:root{--blue:#2268ff;--dark:#132542;--muted:#71829b;--light:#a5b4c9;--line:#d9e5f5;--bg:#f4f8fe;--red:#ff4d4f;--radius-control:8px;--radius-card:16px}
button,input,select,textarea{font:inherit}button{touch-action:manipulation}input,select,textarea{min-width:0}
.device{--design-height:945px;background:var(--bg)}.device[data-page=home]{background:#f5f7f9}
.demo-shell{display:flex;align-items:flex-start;gap:32px}.demo-nav{width:218px;padding:24px 20px;background:#fff;border:1px solid #e4eaf3;border-radius:16px;color:var(--dark)}
.demo-nav h2{font-size:18px;margin:0 0 8px}.demo-nav p{font-size:14px;line-height:1.8;color:var(--muted);margin:0 0 16px}
.demo-nav button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 10px;border-radius:8px;color:var(--muted);font-size:14px}
.demo-nav button:hover,.demo-nav button.active{color:var(--blue);background:#edf4ff}.demo-nav .nav-group{font-size:14px;color:var(--light);margin:14px 10px 4px}.demo-nav .reset-demo{margin-top:20px;border-top:1px solid #edf1f6;border-radius:0;padding-top:16px}
.top-glow{background:linear-gradient(#c5dcff 0%,#f4f8fe 70%)}.device[data-page=home] .top-glow{background:linear-gradient(#c4d7f7 0%,#f5f7f9 64%)}
.header-company{border:0;background:none;padding:0;max-width:calc(100% - 35px);font-size:16px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#111;text-align:left}
.navbar .header-right{margin-left:auto;border:0;background:none;color:var(--blue);font-size:14px;z-index:1}.mini-pill{display:none}
.scroll{scroll-behavior:auto}.page-content{padding:14px 16px 24px}.page-content>*:last-child{margin-bottom:0}.detail-scroll.has-actions{bottom:90px}.page-scroll.has-footer{bottom:110px}
.scroll-lock{overflow:hidden!important}.home-scroll{padding:6px 16px 28px;bottom:99px}
.segment-control{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:42px;flex-shrink:0;border:1px solid #fff;border-radius:8px;background:#f0f4ff;margin-bottom:12px;overflow:hidden}
.segment-control button{min-width:0;border:0;border-radius:7px;background:none;color:#202632;font-size:14px;padding:0 4px;white-space:nowrap}
.segment-control button.active{color:white;background:linear-gradient(115deg,#5689ff,#165dff)}.segment-control small{font:inherit;margin-left:4px}
.center-entry{display:flex;align-items:center;gap:12px;width:100%;height:46px;border:1px solid #fff;border-radius:12px;background:linear-gradient(100deg,#fff,#e4effd);padding:10px 12px;color:var(--dark);font-size:14px;font-weight:500;text-align:left;margin-bottom:12px}
.center-entry .entry-icon{display:grid;place-items:center;width:24px;height:24px;flex:none;background:#e3f0ff;border-radius:4px}.center-entry .entry-icon img{width:16px;height:16px}.center-entry.todo .entry-icon img{width:24px;height:24px}.center-entry>img{margin-left:auto;width:16px;height:16px}
.search-toolbar{display:flex;gap:12px;align-items:center;margin-bottom:16px}.search-control{height:42px;display:flex;align-items:center;gap:6px;flex:1;padding:0 10px;min-width:0;background:white;border-radius:8px}
.search-control img{width:16px;height:16px;flex:none}.search-control input{width:100%;border:0;outline:none;background:none;font-size:14px;color:var(--dark)}.search-control input::placeholder{color:#86909c}
.filter-trigger{height:42px;border:0;border-radius:8px;background:white;color:var(--muted);padding:0 10px;display:flex;align-items:center;gap:3px;font-size:14px;white-space:nowrap}
.filter-trigger img{width:16px;height:16px}.filter-trigger.active{color:var(--blue)}
.pill-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0}.pill-row.equal>*{flex:1}
.pill{display:flex;align-items:center;justify-content:center;gap:3px;border:1px solid var(--line);background:white;border-radius:14px;min-height:28px;padding:4px 12px;color:#617087;font-size:14px;white-space:nowrap}
.pill.active{border-color:var(--blue);background:#e9f4ff;color:var(--blue)}.pill img{width:14px;height:14px}.pill .expand{width:10px;height:10px}
.category-pills{gap:7px}.category-pills .pill{flex:1;padding:4px 5px;font-size:14px}.main-tab .count{margin-left:1px}
.record-list{display:flex;flex-direction:column;gap:12px;margin-top:16px}.record-card{display:block;width:100%;border:0;border-radius:16px;background:#fff;padding:17px 14px;text-align:left;color:var(--dark);box-shadow:0 4px 6px #5275a30d;cursor:pointer}
.record-card:active{background:#fafdff}.record-card .title-row{display:flex;align-items:center;gap:8px;min-height:24px}.record-card .record-title{font-size:14px;font-weight:500;line-height:22px;min-width:0;flex:1}
.record-card .tag{flex:none;border-radius:12px;background:#eaf3ff;color:var(--blue);font-size:14px;font-weight:500;padding:4px 8px;line-height:22px}.record-card .record-body{color:var(--muted);font-size:14px;line-height:22px;margin:10px 0;overflow-wrap:anywhere}
.record-card .meta-line{font-size:14px;color:#7b8fac;line-height:22px;margin-top:5px;overflow-wrap:anywhere}.record-card .approval-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px;margin-top:12px;color:var(--light);font-size:14px}
.record-card .record-date{display:flex;align-items:center;gap:5px;font-size:14px;color:var(--light);margin-top:10px}.record-card.center-record{padding:16px 14px}
.clock{position:relative;display:inline-block;width:12px;height:12px;flex:none}.clock img{display:block;width:12px;height:12px}.clock:before{content:"";position:absolute;width:1px;height:4px;left:5.5px;top:2px;background:#8294b0}.clock:after{content:"";position:absolute;width:3px;height:1px;left:5.5px;top:6px;background:#8294b0}
.state-badge{display:inline-block;font-size:14px;font-weight:400;border-radius:3px;padding:2px 5px;line-height:22px;flex:none;white-space:nowrap}
.state-badge.success{background:#eff9e9;color:#52b737}.state-badge.danger{background:#fff0f0;color:#f04452}.state-badge.warning{background:#fff5e7;color:#f6a142}.state-badge.muted{background:#f0f4fa;color:#a5b4c9}.state-badge.unread{background:#ff4a52;color:white;border-radius:0}
.status-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.status-badges .state-badge{font-size:14px;min-width:52px;text-align:center}
.read-all{position:absolute;z-index:5;right:16px;bottom:54px;width:56px;height:56px;border:0;background:var(--blue);color:#fff;border-radius:50%;box-shadow:0 5px 14px #1d5dfa33;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:14px;gap:2px}
.read-all img{width:24px;height:24px}.read-all b{position:absolute;right:-2px;top:-3px;min-width:18px;height:18px;padding:1px 4px;background:#ff4a52;border:1px solid #fff;border-radius:10px;font-size:14px;font-weight:400}
.read-all:disabled{opacity:.5;cursor:default}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stat-group{background:white;border-radius:16px;padding:8px;height:82px}
.stat-group.wide{grid-column:1/-1}.stat-group h3{margin:0 4px 5px;font-weight:400;font-size:14px;line-height:22px;color:var(--muted)}
.stat-options{display:flex;gap:8px}.stat-option{flex:1;min-width:0;border:1px solid transparent;background:#f5f8fc;border-radius:8px;text-align:left;padding:2px 5px;height:46px;color:var(--dark)}
.stat-option strong{font-size:18px;line-height:24px;font-weight:500;display:block;overflow-wrap:normal}.stat-option small{display:block;font-size:14px;line-height:22px;color:var(--muted)}
.stat-option.active{color:var(--blue);background:#e9f4ff;border-color:var(--blue)}.stat-option.active small{color:var(--blue)}.approval-stats{grid-template-columns:1fr}.approval-stats .stat-group{height:96px}
.approval-stats .stat-option{height:56px;padding:5px}.approval-stats .stat-option strong{font-size:16px}.result-summary{display:flex;align-items:center;justify-content:space-between;margin:16px 0 12px;font-size:14px;color:var(--muted);gap:8px}
.result-summary .filter-chip{color:var(--blue);border:1px solid var(--blue);background:#e9f4ff;border-radius:14px;padding:5px 8px;font-size:14px}.filter-chip button{border:0;background:none;color:inherit;padding:0 0 0 5px}.result-summary .count-text{margin-left:auto;white-space:nowrap}
.empty-block{padding:40px 18px;background:#fff;border-radius:16px;text-align:center;color:var(--light);font-size:14px;line-height:1.8;margin-top:16px}.load-more{display:block;width:100%;border:0;background:none;color:var(--blue);font-size:14px;padding:18px}
.filter-panel{background:#fff;padding:16px;margin:0 -16px -24px;min-height:100%}.filter-panel h2{font-size:15px;font-weight:500;color:var(--dark);margin:0 0 16px}
.filter-panel h3{font-size:14px;font-weight:500;color:var(--dark);margin:16px 0 12px}.tree-panel{background:#f5f7fc;border-radius:16px;padding:8px;max-height:370px;overflow:auto;margin:10px 0 18px}
.tree-row{display:flex;align-items:center;gap:8px;min-height:34px;color:#263a57;font-size:14px}.tree-row.selected{color:var(--blue)}.tree-row.group{font-weight:500}
.tree-arrow{display:grid;place-items:center;border:0;background:none;padding:0;width:18px;height:30px;flex:none}.tree-arrow img{width:10px;height:8px}.tree-arrow.closed img{transform:rotate(-90deg)}
.tree-choice{border:0;background:none;padding:4px 0;flex:1;display:flex;align-items:center;gap:10px;text-align:left;color:inherit;font-weight:inherit;font-size:inherit;line-height:22px}
.radio-circle{display:block;width:16px;height:16px;border:1px solid #c9d5e5;border-radius:50%;background:#fff;flex:none}
.tree-row.selected .radio-circle{border:0;background:url("assets/demo/radio-selected.svg") center/16px 16px no-repeat}.tree-spacer{width:18px;flex:none}
.time-presets{display:flex;gap:6px}.time-presets button{flex:1;height:36px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#617087;font-size:14px;padding:0 4px}.time-presets button.active{color:var(--blue);border-color:var(--blue);background:#e9f4ff}
.date-range{display:flex;align-items:center;gap:8px;height:42px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:white;margin-top:10px}.date-range input{width:calc(50% - 12px);background:none;border:0;outline:none;color:var(--muted);font-size:14px}.date-range span{color:var(--light)}
.form-field{margin-bottom:16px}.form-field label{display:block;font-size:14px;font-weight:500;line-height:22px;color:var(--dark);margin-bottom:6px}
.form-field>input,.form-field>select,.field-select{width:100%;height:42px;flex-shrink:0;border:1px solid var(--line);border-radius:8px;background:white;padding:0 12px;color:var(--dark);font-size:14px}.form-field input::placeholder{color:var(--light)}
.field-select{display:flex;align-items:center;justify-content:space-between;text-align:left;color:var(--light)}.field-select.has-value{color:var(--dark)}.field-select img{width:10px;height:10px}
.form-field .tree-panel{margin-bottom:0;max-height:300px}.form-actions{display:flex;gap:16px;margin-top:24px}.form-actions button{flex:1;height:44px;border:1px solid #ccd8e8;border-radius:8px;background:white;color:#536783;font-size:14px;font-weight:500}
.form-actions .primary,.primary-button{border:0;background:var(--blue);color:#fff}.filter-footer{position:absolute;z-index:8;bottom:34px;left:0;right:0;padding:12px 16px 16px;background:white}
.filter-footer .form-actions{margin:0}.form-error{font-size:14px;color:var(--red);line-height:22px;margin:6px 0}.personal-filter .form-actions{margin:22px 0 0}
.detail-card{background:white;border-radius:16px;padding:16px;margin-bottom:14px;color:var(--dark)}.detail-card h2{font-size:15px;line-height:22px;font-weight:500;margin:0 0 12px}.detail-card h3{font-size:14px;line-height:22px;font-weight:500;margin:18px 0 8px}
.detail-grid{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px 0;margin:0;font-size:14px;line-height:22px}.detail-grid dt{margin:0;color:var(--muted);font-weight:400;overflow-wrap:anywhere}.detail-grid dd{margin:0;color:var(--dark);font-size:14px;line-height:22px;overflow-wrap:anywhere}.detail-grid.message-detail dd{font-size:14px}
.detail-grid .value-success{color:#52b737}.detail-grid .value-warning{color:#f6a142}.detail-grid .value-muted{color:#a5b4c9}.detail-grid .value-link{color:var(--blue)}.detail-grid .value-danger{color:var(--red)}
.project-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.project-heading h2{margin:0}.project-name{font-size:14px;font-weight:500;line-height:22px;color:var(--blue);margin:0 0 12px;overflow-wrap:anywhere}
.project-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.project-tags span{font-size:14px;border-radius:5px;padding:4px 6px;line-height:22px;background:#eaf8f0;color:#1faa6a}.project-tags span:nth-child(2){background:#eaf3ff;color:var(--blue)}.project-tags span:nth-child(3){background:#fff0f0;color:#ec5151}
.project-meta{grid-template-columns:92px minmax(0,1fr);gap:11px 0}.project-metrics{border-top:1px solid #e6edf7;margin-top:14px;padding-top:12px}

.file-preview{display:flex;align-items:center;gap:10px;min-height:57px;border:0;background:#f5f8fc;border-radius:8px;padding:12px;width:100%;text-align:left;color:var(--dark);font-size:14px}
.file-preview .pdf-badge{display:grid;place-items:center;flex:none;width:31px;height:32px;background:#ffedee;color:#ec5151;border-radius:4px;font-size:14px}.file-preview .file-name{min-width:0;overflow-wrap:anywhere;flex:1}.file-preview .file-link{color:var(--blue);font-size:14px;white-space:nowrap}
.detail-tabs{display:flex;border-bottom:1px solid #e6edf7;margin:0 0 22px;height:30px}.detail-tabs button{width:50%;border:0;border-bottom:2px solid transparent;background:none;font-size:14px;color:var(--muted);padding:0 0 12px}.detail-tabs button.active{color:var(--dark);font-weight:500;border-color:var(--blue)}
.timeline{position:relative;padding-left:36px}.timeline:before{content:"";position:absolute;width:2px;background:#bce6cf;left:14px;top:8px;bottom:0}.timeline-event{position:relative;padding-bottom:16px}
.timeline-event:before{content:"✓";position:absolute;left:-29px;top:0;background:#1faa6a;color:#fff;border-radius:50%;font-size:14px;width:16px;height:16px;text-align:center;line-height:22px}
.event-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;font-size:14px;line-height:22px;color:var(--dark);font-weight:500}.event-heading time{font-size:14px;color:var(--muted);white-space:nowrap;font-weight:400}
.event-content{background:#f5f8fc;border-radius:8px;padding:8px 10px;margin-top:8px;font-size:14px;color:var(--muted);line-height:22px;overflow-wrap:anywhere}.event-content strong{font-size:14px;font-weight:400;color:var(--dark);display:block}.event-content .event-action{color:#1faa6a}
.browse-group{margin-bottom:26px}.browse-group:last-child{margin-bottom:4px}.browse-group h3{font-size:14px;font-weight:500;margin:0 0 18px}
.browse-row{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:14px}.browse-row:before{content:"";width:7px;height:7px;background:var(--blue);border-radius:50%;flex:none}.browse-avatar{width:34px;height:34px;display:grid;place-items:center;background:#eaf3ff;border-radius:50%;color:var(--blue);font-size:14px;flex:none}.browse-row time{margin-left:auto;color:var(--muted);font-size:14px;white-space:nowrap}
.approval-actions{position:absolute;z-index:9;left:0;right:0;bottom:0;height:90px;padding:12px 16px 34px;background:#fff;display:flex;gap:11px}
.approval-actions button{flex:1;height:44px;border:1px solid var(--blue);border-radius:8px;background:#fff;color:var(--blue);font-size:14px;font-weight:500}.approval-actions .approve{background:var(--blue);color:#fff}.approval-actions .reject{border-color:var(--red);color:var(--red)}
.wide-button{display:block;width:100%;height:44px;border:1px solid var(--blue);border-radius:8px;color:var(--blue);background:#fff;font-size:14px;font-weight:500;margin:16px 0}.wide-button.danger{border-color:#f54552;color:#f54552}.wide-button.primary{background:var(--blue);color:#fff;border-color:var(--blue)}.wide-button:disabled{background:#dde6f2;color:#8799b1;border-color:#dde6f2;cursor:default}
.org-current{padding:14px;border-radius:16px;background:#fff;margin-bottom:16px}.org-current small{display:block;font-size:14px;color:var(--muted);margin-bottom:8px}.org-current strong{font-size:14px;font-weight:500}.org-current .state-badge{float:right;color:var(--blue);background:#eaf3ff}
.org-tree{background:#fff;max-height:none;margin:12px 0 0;padding:8px}.org-tree .tree-row{min-height:42px;border-radius:8px}.org-tree .tree-row.selected{background:#edf4ff}.org-tree .radio-circle{margin-left:auto}
.org-footer{position:absolute;left:16px;right:16px;bottom:34px;background:var(--bg)}.org-footer .wide-button{margin:10px 0 0}
.org-switch-content{padding:16px 16px 24px;display:flex;flex-direction:column;gap:12px}.org-switch-content>h2{font-size:16px;line-height:24px;font-weight:500;margin:0}.org-options{padding:8px;border-radius:16px;background:#fff;display:flex;flex-direction:column;gap:8px}.org-option{display:flex;align-items:center;gap:12px;padding:12px;width:100%;min-height:80px;border:0;border-radius:8px;background:#fff;text-align:left;color:var(--dark)}.org-option.selected{background:#eaf3ff}.org-option-avatar{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:8px;background:var(--dark);color:#fff;font-size:18px;line-height:26px;font-weight:500}.org-option-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.org-option-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.org-option-title>strong{font-size:16px;line-height:24px;font-weight:500}.org-option.selected .org-option-title>strong{color:var(--blue)}.org-option-role{flex:none;padding:2px 6px;border-radius:4px;font-size:12px;line-height:18px;font-weight:500}.org-option-role.group{color:var(--red);background:#ffedef}.org-option-role.subsidiary{color:#1faa6a;background:#eaf8f0}.org-option-role.branch{color:#f6a142;background:#fff5e7}.org-option-path{font-size:12px;line-height:18px;color:var(--muted);overflow-wrap:anywhere}.org-option-indicator{width:20px;height:20px;flex:none}.org-option-indicator img{display:block}
.modal-shade{position:absolute;z-index:20;inset:0;background:#0006}.bottom-sheet{position:absolute;z-index:21;bottom:0;left:0;right:0;max-height:calc(100% - 60px);overflow:auto;background:white;border-radius:16px 16px 0 0;padding:16px 16px 34px;color:var(--dark)}
.sheet-title-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.sheet-title-row h2{font-size:15px;line-height:22px;margin:0;font-weight:500}.sheet-title-row button{background:none;border:0;color:var(--muted);font-size:14px;padding:0}
.opinion-label{display:flex;align-items:center;justify-content:space-between;font-size:14px;line-height:22px;margin:0 0 12px}.opinion-label button{background:none;border:0;color:var(--blue);font-size:14px;padding:0}
.opinion-input{display:block;width:100%;height:120px;min-height:90px;padding:12px;border:1px solid var(--line);border-radius:8px;font-size:14px;line-height:22px;color:var(--dark);resize:none;outline:none}.opinion-input::placeholder{color:var(--muted)}.opinion-input.invalid{border-color:var(--red)}
.opinion-meta{display:flex;align-items:flex-start;justify-content:space-between;min-height:18px;margin:12px 0;font-size:14px;color:var(--muted)}.opinion-meta .error{font-size:14px;color:var(--red)}
.confirm-action{width:100%;height:44px;border:0;border-radius:8px;background:var(--blue);color:#fff;font-size:14px;font-weight:500}.confirm-action.reject{background:var(--red)}
.suggestion-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}.suggestion-chips button{border:1px solid var(--line);color:var(--blue);background:#f5f8ff;padding:5px 8px;border-radius:8px;font-size:14px}
.center-modal{position:absolute;z-index:21;top:50%;left:16px;right:16px;transform:translateY(-50%);max-height:80%;overflow:auto;padding:20px 16px;background:#fff;border-radius:16px;color:var(--dark)}
.center-modal h2{font-size:16px;font-weight:500;line-height:23px;margin:0 0 16px}.center-modal p{font-size:14px;color:var(--muted);line-height:22px}.center-modal time{font-size:14px;color:var(--light)}.center-modal hr{border:0;border-top:1px solid #e6edf7;margin:18px 0}
.info-box{display:flex;gap:8px;align-items:flex-start;border-radius:8px;background:#e9f4ff;color:#6d89ae;font-size:14px;padding:10px 12px;margin:12px 0 24px}
.modal-buttons{display:flex;gap:12px;margin-top:22px}.modal-buttons button{flex:1;height:44px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--muted);font-size:14px}.modal-buttons .primary{background:var(--blue);border-color:var(--blue);color:white}.modal-buttons .danger{background:var(--red);border-color:var(--red);color:white}
.file-document{background:#fff;border:1px solid var(--line);padding:16px;margin:12px 0;font-size:14px}.file-document h3{text-align:center;font-size:16px}.file-document dl{grid-template-columns:90px 1fr}.file-preview-sheet{max-height:86%}
.home-notification{display:block;border:0;border-radius:0;background:none;padding:0;text-align:left;width:100%;color:inherit}.home-notification+.home-notification{margin-top:0;border-top:1px solid #e7edf7;padding-top:12px}
.subtab.active{background:#e9f4ff;color:var(--blue);border-color:var(--blue)}
.app-tile span{overflow-wrap:anywhere}
.page-success-banner{background:#eaf8f0;border-radius:8px;font-size:14px;line-height:22px;color:#1faa6a;padding:10px 12px;margin-bottom:14px}
.device .home-indicator{z-index:10;pointer-events:none}.modal-shade~.home-indicator{z-index:22}
@media (max-width:760px){.demo-nav{display:none}.demo-shell{display:block}.device{height:min(945px,calc(100dvh - 48px))}}
@media (max-width:420px){.device,.device[data-page]{width:100vw;height:var(--visual-height,100dvh);min-height:0;max-height:none;border-radius:0}.demo-shell{width:100vw}.page-content{padding-left:16px;padding-right:16px}.selected-grid,.extra-grid{width:100%;grid-template-columns:repeat(4,minmax(0,1fr))}.catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 5px}.catalog-grid .app-tile,.selected-grid .app-tile,.extra-grid .app-tile{width:100%}.my-app-grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:8px}.tree-row{font-size:14px}.detail-grid{grid-template-columns:92px minmax(0,1fr)}.demo-nav{display:none}}

.stat-group h2,.stat-group h3{margin:0 4px 5px;font-weight:400;font-size:14px;line-height:22px;color:var(--muted)}
.stat-option span,.stat-option small{display:block;font-size:14px;line-height:22px;color:var(--muted)}
.stat-option.active span,.stat-option.active small{color:var(--blue)}
.message-detail .detail-grid dd{font-size:14px}
.white-card,.message-card,.selected-panel{border-radius:16px}
.home-notification{box-shadow:none}
.opinion-label>span{color:var(--red)}
.org-tree>h2{padding:8px}
.browse-row strong{font-weight:400}
@media (max-width:760px){#app{padding:0}.device{height:var(--visual-height,100dvh);min-height:0}}

.org-tree .tree-choice{min-width:0;font-weight:400}
.org-tree .tree-choice .radio-circle{order:2;margin-left:auto}
.org-tree .tree-choice>span:last-child{flex:1;overflow-wrap:anywhere}
.tree-choice{min-width:0}
.tree-choice>span:last-child{overflow-wrap:anywhere}
.stat-option{cursor:pointer}
.stat-option:hover{border-color:#a8c6ff}
.detail-tabs button:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.banner{border-radius:16px}
.notice-modal{padding:18px 20px}
.notice-modal h2{font-size:18px;font-weight:700;margin-bottom:8px}
.notice-modal p{font-size:14px;line-height:22px;color:#536a8b}
.notice-modal .info-box{align-items:center;margin-bottom:24px}
.info-box img{width:22px;height:22px;flex:none}
.notice-modal .modal-buttons button{font-size:16px}

@media(max-width:760px){#app{height:var(--visual-height,100dvh);min-height:var(--visual-height,100dvh);place-items:start center}}
.bottom-sheet .confirm-action{position:sticky;bottom:0;box-shadow:0 -8px 8px #fff}
.form-field>select:has(option:first-child:checked){color:var(--light)}.form-field>select option{color:var(--dark)}
.info-symbol{position:relative;width:22px;height:22px;flex:none}.info-symbol img{display:block}.info-symbol b{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:white;font-weight:700}
.selected-tile{user-select:none;-webkit-user-select:none}.selected-tile img{-webkit-user-drag:none;-webkit-touch-callout:none}.selected-tile.is-dragging{opacity:.55;outline:1px dashed var(--blue);border-radius:8px}
/* Keep message categories on one row; narrower phones can scroll the row. */
.message-card .subtabs{display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.message-card .subtabs::-webkit-scrollbar{display:none}
.message-card .subtab{flex:1 0 auto;width:auto;min-width:max-content;height:32px;padding:6px 8px;line-height:18px;text-align:center}

.home-app-carousel{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;width:100%;height:154px;margin-top:16px;cursor:grab;-webkit-overflow-scrolling:touch}
.home-app-carousel::-webkit-scrollbar{display:none}
.home-app-carousel .home-app-page{flex:0 0 100%;width:100%;margin:0;grid-template-rows:repeat(2,69px);scroll-snap-align:start;scroll-snap-stop:always}
.home-app-carousel[data-pages="1"]{cursor:auto}
.home-app-carousel.is-panning{scroll-snap-type:none;cursor:grabbing;user-select:none}
.home-app-carousel img{-webkit-user-drag:none;-webkit-touch-callout:none}
.home-app-pager{height:10px;margin-top:4px;align-items:center}
.home-app-pager button{position:relative;width:20px;height:2px;padding:0;border:0;border-radius:2px;background:#c9cdd4}
.home-app-pager button:before{content:"";position:absolute;inset:-8px 0}
.home-app-pager button.active{background:#165dff}
.home-app-empty{grid-column:1/-1;grid-row:1/-1;align-self:center;text-align:center;color:var(--light);font-size:14px;line-height:22px}

/* Labels stay within their own carousel cell; longer names wrap without clipping. */
.device[data-page=home] .my-apps{height:auto;min-height:234px}
.home-app-carousel{height:auto;min-height:154px;padding-bottom:2px}
.home-app-carousel .home-app-page{column-gap:6px;grid-template-rows:repeat(2,minmax(69px,1fr));align-content:start}
.home-app-carousel .home-app-page>div{min-width:0}
.home-app-carousel .app-tile span{width:100%;max-width:none;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.home-app-pager{margin-top:2px}


/* Mobile typography: 14px body / 22px line height. */
:root{--font-body:14px;--line-body:22px;--font-heading:16px;--line-heading:24px}
.device{font-size:var(--font-body);line-height:var(--line-body)}
.record-card .record-title,.detail-card h2,.sheet-title-row h2,.filter-panel h2{font-size:var(--font-heading);line-height:var(--line-heading)}
.record-card .record-body,.detail-grid,.detail-grid dd,.message-detail .detail-grid dd,.event-content,.event-content strong,.browse-row,.browse-row time,.opinion-input{font-size:var(--font-body);line-height:var(--line-body)}
.detail-grid{align-items:start;row-gap:12px}
.detail-grid dt,.detail-grid dd{min-width:0;overflow-wrap:anywhere}
.project-heading{gap:12px;align-items:flex-start}
.project-heading h2{min-width:0}
.project-tags span,.record-card .tag,.state-badge{line-height:22px}
.file-preview{align-items:center;min-height:64px;height:auto}
.file-preview .pdf-badge{width:36px;height:36px}
.file-preview .file-name{line-height:22px}
.stat-group,.approval-stats .stat-group{height:auto;min-height:104px}
.stat-option,.approval-stats .stat-option{height:auto;min-height:64px}
.stat-option span,.stat-option small{line-height:22px}
.result-summary{flex-wrap:wrap}
.pill-row{overflow-x:auto;justify-content:flex-start;padding-bottom:2px}
.pill-row.equal>*{flex:1 0 auto}
.pill{min-height:34px;line-height:22px;padding:5px 12px}
.category-pills .pill{padding:5px 10px}
.message-heading{height:32px;min-height:32px;gap:12px;align-items:flex-start;flex-wrap:nowrap}
.message-heading .main-tabs{height:32px;gap:24px;flex:none}
.message-heading .main-tab{width:56px;height:32px;padding:0 0 8px;white-space:nowrap}
.message-heading .main-tab .count{width:24px;min-width:24px;height:24px;padding:0;font-size:12px;line-height:18px;flex:none}
.message-heading .main-tab.active::after{left:50%;transform:translateX(-50%)}
.message-heading .text-link{height:24px;white-space:nowrap;display:flex;align-items:center}
.message-card .record-list{margin-top:12px;gap:12px}
.message-card .home-notification .record-body{margin:8px 0 0}
.message-card .home-notification .record-date,.message-card .home-notification .approval-meta{margin-top:8px;line-height:22px}
.message-card .home-notification .tag{padding:3px 6px}
.message-card .home-notification .title-row{min-height:24px}
@media(max-width:340px){.message-heading{gap:6px}.message-heading .main-tabs{gap:10px}.message-heading .main-tab{width:52px}.message-heading .main-tab .count{width:20px;min-width:20px}}
.home-app-carousel .home-app-page{grid-template-rows:repeat(2,minmax(96px,1fr));row-gap:16px}
.home-app-carousel .app-tile{min-height:96px}
.catalog-grid .app-tile,.selected-grid .app-tile,.extra-grid .app-tile{height:auto;min-height:96px}
.app-tile span{white-space:normal;overflow:visible;text-overflow:clip;line-height:22px;overflow-wrap:anywhere}
.drag-note{white-space:normal;text-align:center;line-height:22px}
.event-heading{flex-wrap:wrap;font-size:14px;line-height:22px}
.event-heading time{max-width:110px;white-space:normal;text-align:right;line-height:22px}
.browse-row time{max-width:112px;white-space:normal;text-align:right;line-height:22px}
.browse-avatar{width:36px;height:36px}
.detail-tabs{height:auto;min-height:40px}
.detail-tabs button{line-height:22px;padding-bottom:10px}
.opinion-meta{min-height:22px;gap:12px}
.read-all{width:76px;height:76px;font-size:14px;line-height:22px}
.read-all b{min-width:24px;height:24px;line-height:22px}
.form-field label{line-height:22px}
.demo-nav p,.demo-nav .nav-group,.demo-nav button{font-size:14px;line-height:22px}

/* Keep navigation labels on one line at the 14px minimum. */
.nav-item{width:56px;height:46px;top:16px;line-height:22px;white-space:nowrap}
.nav-item:nth-child(1){left:calc(10.1333% - 28px)}
.nav-item:nth-child(2){left:calc(30.9333% - 28px)}
.nav-item:nth-child(4){left:calc(69.0667% - 28px)}
.nav-item:nth-child(5){left:calc(89.8667% - 28px)}
.app-tile span{text-wrap:balance}

.card-heading,.category-title,.available-heading,.edit-heading h2{font-size:16px;line-height:24px}
/* Body remains 14px. Compact labels and original application captions use 12px. */
:root { --font-label: 12px; --line-label: 18px; }
.app-tile span,
.catalog-grid .app-tile span,
.selected-grid .app-tile span,
.extra-grid .app-tile span,
.home-app-carousel .app-tile span {
  font-size: var(--font-label);
  line-height: var(--line-label);
  white-space: nowrap;
  overflow-wrap: normal;
  text-wrap: nowrap;
  width: max-content;
  max-width: none;
}
.home-app-carousel .home-app-page {
  column-gap: 7px;
  row-gap: 12px;
  grid-template-rows: repeat(2, minmax(70px, 1fr));
}
.home-app-carousel .app-tile,
.catalog-grid .app-tile,
.selected-grid .app-tile,
.extra-grid .app-tile { min-height: 70px; }
.notification-tag,
.record-card .tag,
.project-tags span,
.state-badge,
.status-badges .state-badge,
.result-summary .filter-chip,
.stat-option small,
.stat-option span,
.browse-avatar,
.file-preview .pdf-badge,
.pill,
.category-pills .pill,
.subtab,
.message-card .subtab {
  font-size: var(--font-label);
  line-height: var(--line-label);
  white-space: nowrap;
}
.pill, .message-card .subtab { min-height: 32px; padding: 6px 8px; }
/* The full approval center retains its detailed field rows. */
.approval-global .title-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:8px}
.approval-global .title-row .tag{min-width:0;padding:2px 6px;font-size:12px;line-height:20px;border-radius:4px}
.approval-global .title-row .record-title{min-width:0;font-size:16px;line-height:24px;overflow-wrap:anywhere}
.approval-global .title-row .state-badge{font-size:12px;line-height:20px;padding:2px 6px;border-radius:4px}
.approval-card-fields{display:grid;gap:8px;margin-top:12px}
.approval-field{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:start;gap:8px;font-size:14px;line-height:22px}
.approval-field-label{color:#86909c;white-space:nowrap}
.approval-field-value{min-width:0;color:#4e5969;overflow-wrap:anywhere;white-space:normal}
.approval-object,.approval-summary{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.approval-object{-webkit-line-clamp:2}
.approval-summary{-webkit-line-clamp:3}
.approval-date{white-space:nowrap}
.approval-card-meta,.approval-card-flow{display:grid;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid #edf1f6}
.approval-card-meta .approval-field{font-size:12px;line-height:18px}
.approval-card-meta .approval-field-value{color:var(--muted)}
.approval-card-flow .approval-field{grid-template-columns:84px minmax(0,1fr)}
/* All work-center tabs share a fixed header above their independently scrolling lists. */
.device[data-page="work-center"] .page-name{top:58px;font-size:18px;line-height:26px}
.work-center-tabs{position:absolute;top:102px;left:16px;right:16px}
.work-center-tabs>.segment-control{margin:0}
.work-center-scroll{top:160px}
.work-center-content{display:flex;flex-direction:column;align-items:stretch;gap:16px;padding:0 16px 24px}
.work-center-content>.center-entry,.work-center-content>.search-toolbar,.work-center-content>.pill-row,.work-center-content>.record-list{margin:0}
.work-center-content>.center-entry{flex:none}
.work-center-content>.search-toolbar{flex:none;min-height:42px}
.work-center-content>.record-list{gap:12px}
/* Figma 451:413 / 453:439: home summaries and personal approval cards. */
.approval-role-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.approval-status-tabs{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:16px}
.approval-role-tabs>.pill,.approval-status-tabs>.pill{padding:6px 8px;min-height:32px;font-size:12px;line-height:18px}
.approval-status-tabs>.pill{gap:4px;padding:6px}
.approval-list-card,.approval-home-record{display:flex;flex-direction:column;gap:10px;min-width:0}
.approval-list-card .title-row,.approval-home-record .title-row{display:flex;align-items:center;gap:8px;min-width:0;width:100%}
.approval-list-card .title-row .tag,.approval-home-record .title-row .tag{display:flex;justify-content:center;align-items:center;flex:none;width:64px;height:24px;padding:3px 6px;border-radius:12px;background:#e9f4ff;font-size:12px;line-height:18px}
.approval-list-card .record-title{flex:0 1 auto;min-width:0;font-size:14px;line-height:22px;overflow-wrap:anywhere}
#record-results>.approval-list-card:first-child .record-title,.message-card .approval-home-record:first-child .record-title{font-size:16px;line-height:24px}
.approval-list-card .state-badge{flex:none;display:flex;align-items:center;justify-content:center;height:24px;padding:3px 6px;border-radius:1px;font-size:12px;line-height:18px}
.approval-list-card .state-badge.success{background:#eaf7e6;color:#49b333}
.approval-list-card .state-badge.danger{background:#fff0f0;color:#f04452}
.approval-list-card .record-body,.message-card .approval-home-record .record-body{margin:0;font-size:14px;line-height:22px;color:#71829b;overflow-wrap:anywhere}
.approval-card-body>p{margin:0}
.approval-card-body .approval-project{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.approval-list-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 8px;width:100%;font-size:14px;line-height:22px;color:#a5b4c9}
.approval-list-meta>span{white-space:nowrap}
.message-card .approval-home-record{gap:8px}
.approval-home-record .title-row{gap:6px}
.approval-home-record .title-row .tag{width:36px}
.approval-home-record .record-title{flex:1;min-width:0;font-size:14px;line-height:22px}
.approval-home-record .state-badge.unread{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:24px;padding:3px 6px;border-radius:1px;background:#f04452;color:#fff;font-size:12px;line-height:18px}
.message-card .approval-home-record .record-body{color:#86909c}
.approval-home-record .approval-content{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.approval-home-time{font-size:14px;line-height:22px;font-weight:500;color:#c9cdd4}
@media (max-width: 340px) {
  .approval-status-tabs{gap:8px}
  .approval-role-tabs>.pill{padding-left:4px;padding-right:4px}
  .home-app-carousel .home-app-page { column-gap: 4px; }
  .app-tile span,
  .catalog-grid .app-tile span,
  .selected-grid .app-tile span,
  .extra-grid .app-tile span,
  .home-app-carousel .app-tile span { font-size: 10px; }
}