:root { --ink:#17212b; --muted:#667583; --line:#d9e1e5; --canvas:#f3f6f5; --surface:#fff; --nav:#15222b; --nav-muted:#9baab3; --teal:#0e7a70; --teal-soft:#e6f4f0; --blue:#2667a8; --blue-soft:#e9f1f9; --gold:#a56809; --gold-soft:#fff4dd; --red:#bf3c42; --red-soft:#fdeced; --shadow:0 8px 24px rgba(26,45,57,.07); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--canvas); font:14px/1.5 "IBM Plex Sans","Noto Sans SC",system-ui,sans-serif; }
button,input,textarea { font:inherit; } button { cursor:pointer; } i { width:17px; height:17px; stroke-width:1.8; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:248px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; padding:24px 14px 16px; display:flex; flex-direction:column; background:var(--nav); color:#fff; }
.brand { display:flex; align-items:center; gap:11px; padding:0 10px 30px; } .brand-mark { display:grid; place-items:center; width:34px; height:34px; overflow:hidden; border-radius:9px; background:#fff; box-shadow:0 5px 14px rgba(15,84,198,.22); } .brand-mark img { display:block; width:100%; height:100%; object-fit:cover; } .brand strong,.brand span { display:block; } .brand strong { letter-spacing:.2px; } .brand span { margin-top:1px; color:var(--nav-muted); font-size:10px; }
nav { display:grid; gap:5px; } .nav-item { width:100%; height:42px; border:0; padding:0 10px; border-radius:5px; background:transparent; color:var(--nav-muted); display:flex; align-items:center; gap:11px; text-align:left; } .nav-item:hover { background:#1f303a; color:#fff; } .nav-item.active { background:#214842; color:#edfffa; } .nav-item b { margin-left:auto; min-width:20px; padding:1px 6px; border-radius:10px; background:#2a3b45; color:#bfd0d7; font-size:11px; font-weight:600; text-align:center; } .nav-item.active b { background:#347066; color:#e7fffa; }
.sidebar-bottom { margin-top:auto; padding:14px 8px 0; border-top:1px solid #2b3c45; } .source-health { margin-bottom:15px; color:#aebdc5; font-size:11px; display:flex; gap:8px; align-items:center; } .pulse { width:7px; height:7px; border-radius:50%; background:#5bc1a5; box-shadow:0 0 0 3px rgba(91,193,165,.13); }.profile { width:100%; display:flex; align-items:center; gap:9px; border:0; padding:5px 0; background:transparent; color:#fff; text-align:left; }.profile>span:nth-child(2) { flex:1; font-size:12px; }.profile small { display:block; color:var(--nav-muted); font-size:10px; }.profile>i { color:#92a5af; width:14px; }.avatar { width:29px; height:29px; display:grid; place-items:center; border-radius:50%; background:#825c45; font-size:12px; }
main { min-width:0; } .topbar { height:70px; padding:0 32px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.82); display:flex; align-items:center; justify-content:space-between; }.crumb { color:var(--muted); display:flex; align-items:center; gap:6px; font-size:12px; }.crumb i { width:14px; }.crumb strong { color:var(--ink); }.top-actions { display:flex; align-items:center; gap:9px; }.icon-button,.more-button,.row-action,.format-button { position:relative; display:inline-grid; place-items:center; border:1px solid transparent; background:transparent; color:#596b77; }.icon-button { width:34px; height:34px; border-color:var(--line); border-radius:5px; background:#fff; }.icon-button:hover { background:#f4f7f8; }.icon-button em { position:absolute; top:7px; right:7px; width:6px; height:6px; border:1px solid #fff; border-radius:50%; background:#ca5456; }.icon-button.small { width:28px; height:28px; }.button { min-height:34px; padding:0 13px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:5px; border:1px solid transparent; font-weight:600; font-size:12px; }.button.primary { background:var(--teal); color:#fff; border-color:var(--teal); }.button.primary:hover { background:#09675f; }.button.secondary { border-color:#c9d4d9; background:#fff; color:#344754; }.button.secondary:hover { background:#f8faf9; }.button.compact { min-height:31px; padding:0 10px; }.button.full { width:100%; margin-top:16px; }
.view { display:none; padding:29px 32px 42px; }.view.active { display:block; }.page-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:22px; }.page-heading h1 { margin:2px 0 4px; font-size:24px; letter-spacing:0; line-height:1.25; }.eyebrow,.panel-kicker { margin:0; color:var(--teal); font-size:11px; font-weight:700; letter-spacing:.5px; }.subtle { margin:0; color:var(--muted); }.compact-heading { margin-bottom:20px; }.status-group { padding-top:10px; display:flex; align-items:center; gap:13px; }.last-sync { display:flex; align-items:center; gap:5px; color:var(--muted); font-size:11px; }.last-sync i { width:13px; }.status { white-space:nowrap; display:inline-flex; align-items:center; width:max-content; padding:3px 8px; border-radius:3px; font-size:11px; font-weight:600; }.status.teal { background:var(--teal-soft); color:#076b61; }.status.amber { background:var(--gold-soft); color:#936007; }.status.red { background:var(--red-soft); color:#a62e34; }.status.gray { background:#edf1f2; color:#667580; }
.workflow { display:flex; align-items:center; padding:15px 17px; margin-bottom:22px; border:1px solid var(--line); border-radius:6px; background:#fff; box-shadow:var(--shadow); overflow-x:auto; }.flow-step { min-width:160px; display:grid; grid-template-columns:25px 1fr; align-items:center; gap:8px; color:#83919a; }.flow-step>span { display:grid; place-items:center; width:23px; height:23px; border:1px solid #c8d1d5; border-radius:50%; font-size:11px; font-weight:700; }.flow-step strong,.flow-step small { display:block; }.flow-step strong { color:inherit; font-size:12px; }.flow-step small { font-size:10px; }.flow-step>i { display:none; }.flow-step.complete,.flow-step.current { color:#2f5a59; }.flow-step.complete>span { background:#dff2ed; border-color:#9bcfc1; }.flow-step.complete>i { display:block; grid-column:3; width:14px; color:#1d8a7b; }.flow-step.current>span { color:#fff; background:var(--teal); border-color:var(--teal); }.flow-step.current>i { display:block; grid-column:3; color:var(--teal); width:15px; }.flow-line { width:calc(100% - 160px); min-width:24px; height:1px; margin:0 8px; background:#d7dfe2; }.flow-line.complete { background:#8ac9bd; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr); gap:18px; }.panel { border:1px solid var(--line); border-radius:6px; background:var(--surface); box-shadow:var(--shadow); }.standard-panel { padding:20px; }.issues-panel { padding:20px; }.signal-panel,.policy-panel { padding:20px; }.panel-header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }.panel-header h2 { margin:2px 0 0; font-size:16px; }.text-button,.full-link { display:inline-flex; align-items:center; gap:4px; border:0; padding:2px 0; background:transparent; color:var(--teal); font-weight:600; font-size:12px; }.text-button:hover,.full-link:hover { color:#075f58; }.text-button i,.full-link i { width:14px; }.standard-meta { display:flex; flex-wrap:wrap; gap:16px; margin:18px 0 14px; color:var(--muted); font-size:11px; }.standard-meta span { display:flex; gap:5px; align-items:center; }.standard-meta i { width:14px; color:#66848a; }.clause-preview { display:grid; grid-template-columns:38px 1fr 24px; gap:12px; align-items:start; padding:14px; border:1px solid #d9e6e4; border-left:3px solid var(--teal); background:#f7fbfa; }.clause-number { padding-top:2px; color:var(--teal); font-weight:700; font-size:16px; }.clause-title { font-weight:700; }.clause-preview p { margin:4px 0 8px; color:#3f4f59; font-size:13px; }.clause-tags { display:flex; gap:6px; }.clause-tags span { padding:2px 6px; background:#e4eeec; color:#4d6967; font-size:10px; }.more-button { width:24px; height:24px; }.audit-summary { margin-top:16px; padding-top:15px; border-top:1px solid #edf0f1; display:flex; align-items:center; gap:16px; }.audit-summary>div:first-child { display:flex; align-items:center; gap:8px; }.score { color:var(--teal); font-size:25px; line-height:1; font-weight:700; }.audit-summary strong,.audit-summary small { display:block; }.audit-summary strong { font-size:11px; }.audit-summary small { color:var(--muted); font-size:10px; }.issue-bars { display:grid; flex:1; gap:4px; }.bar { display:block; width:var(--w); height:4px; border-radius:2px; }.bar.red { background:#e78685; }.bar.orange { background:#e5b151; }.bar.green { background:#75b9a8; }.count-pill { display:grid; place-items:center; min-width:22px; height:22px; border-radius:11px; background:var(--red-soft); color:var(--red); font-size:11px; font-weight:700; }.issue-list { margin-top:12px; }.issue-row { width:100%; display:grid; grid-template-columns:8px 1fr 15px; gap:9px; align-items:center; padding:10px 0; border:0; border-bottom:1px solid #ecf0f1; background:transparent; text-align:left; }.issue-row:last-child { border-bottom:0; }.issue-row:hover strong,.issue-row.selected strong { color:var(--teal); }.issue-row strong,.issue-row small { display:block; }.issue-row strong { font-size:12px; }.issue-row small { color:var(--muted); font-size:10px; }.issue-row>i { width:14px; color:#9aabb4; }.severity { display:block; width:7px; height:7px; border-radius:50%; }.severity.high { background:var(--red); }.severity.medium { background:#d99327; }.severity.low { background:#6d9eb6; }.full-link { width:100%; justify-content:center; margin-top:8px; padding-top:11px; border-top:1px solid #edf0f1; }.signal-panel,.policy-panel { min-height:214px; }.signal-card { display:flex; gap:10px; align-items:flex-start; margin-top:15px; }.signal-icon { display:grid; place-items:center; flex:0 0 31px; width:31px; height:31px; border-radius:4px; }.signal-icon i { width:16px; }.signal-icon.blue { color:#2b71aa; background:var(--blue-soft); }.signal-icon.gold { color:#a66d12; background:var(--gold-soft); }.signal-card strong { display:block; font-size:12px; }.signal-card p { margin:2px 0 0; color:var(--muted); font-size:11px; }.signal-footer,.policy-footer { display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding-top:12px; border-top:1px solid #edf0f1; color:var(--muted); font-size:10px; }.signal-footer span,.policy-footer span { display:flex; align-items:center; gap:5px; }.signal-footer i,.policy-footer i { width:13px; }.policy-main { display:flex; align-items:flex-start; gap:10px; margin-top:15px; }.doc-icon { display:grid; place-items:center; width:35px; height:38px; color:#86611a; background:#fff4d9; border:1px solid #f0ddad; }.doc-icon i { width:18px; }.policy-main strong { display:block; font-size:12px; }.policy-main p { margin:2px 0; color:var(--muted); font-size:11px; }.policy-impact { margin-top:12px; padding:10px; border-left:2px solid #d8b35c; background:#fffaf0; }.policy-impact span { color:#9b741a; font-size:10px; font-weight:700; }.policy-impact p { margin:3px 0 0; color:#505a58; font-size:11px; }
.editor-layout { min-height:620px; display:grid; grid-template-columns:210px minmax(0,1fr) 275px; gap:14px; }.outline { padding:7px; border:1px solid var(--line); border-radius:6px; background:#fff; align-self:start; }.outline-header { display:flex; justify-content:space-between; padding:8px 9px 10px; color:#52636c; font-size:11px; }.outline-header span { color:var(--teal); }.outline-item,.outline-child { width:100%; border:0; padding:7px 9px; border-radius:3px; background:transparent; color:#4e5f69; text-align:left; font-size:12px; }.outline-item:hover,.outline-child:hover { background:#f0f5f4; }.outline-item.active,.outline-child.active { color:#0b6b61; background:#e7f4f1; font-weight:600; }.outline-item b { float:right; padding:0 5px; border-radius:8px; color:#a24445; background:#fbe5e6; font-size:10px; }.outline-child { padding-left:22px; font-size:11px; }.editor { overflow:hidden; }.editor-toolbar { height:45px; display:flex; align-items:center; justify-content:space-between; padding:0 15px; border-bottom:1px solid var(--line); background:#fbfcfc; color:#50626c; font-size:12px; }.editor-toolbar span { display:flex; gap:6px; align-items:center; }.editor-toolbar>div { display:flex; gap:3px; }.format-button { width:26px; height:26px; border-radius:3px; }.format-button:hover { background:#eaf1f0; }.format-button i { width:14px; }.editor-document { max-width:720px; padding:35px clamp(24px,5vw,64px) 56px; margin:0 auto; }.doc-label { margin-bottom:18px; color:var(--teal); font-size:12px; font-weight:700; }.editor-document h2 { margin:0 0 16px; font-size:21px; }.editor-document h3 { margin:25px 0 8px; font-size:15px; }.editor-document textarea { width:100%; min-height:88px; padding:11px; border:1px solid #a8cfc8; border-radius:3px; outline:none; resize:vertical; color:#263640; line-height:1.75; }.editor-document textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(14,122,112,.1); }.inline-alert { display:flex; align-items:flex-start; gap:9px; margin-top:10px; padding:10px; border:1px solid #f0d99c; background:#fff9e8; }.inline-alert>i { flex:0 0 auto; color:#bc8015; }.inline-alert strong,.inline-alert p { display:block; }.inline-alert strong { color:#8c640e; font-size:11px; }.inline-alert p { margin:1px 0 0; color:#6f654d; font-size:11px; }.inline-alert .text-button { margin-left:auto; white-space:nowrap; }.placeholder-text { color:#84939a; }.review-pane { align-self:start; }.review-tabs { display:flex; border-bottom:1px solid var(--line); }.review-tabs button { flex:1; padding:12px 6px; border:0; border-bottom:2px solid transparent; background:transparent; color:#7d8b93; font-size:11px; }.review-tabs button.active { border-bottom-color:var(--teal); color:var(--teal); font-weight:700; }.review-tabs b { padding:1px 4px; border-radius:8px; background:#edf1f2; font-size:9px; }.review-tabs .active b { background:#e4f2ef; }.review-pane #issueDetail { padding:17px; }.review-pane h3 { margin:10px 0 7px; font-size:15px; }.review-pane p { margin:0; color:#52616a; font-size:12px; }.proposal { margin-top:14px; padding:11px; border-left:2px solid #69aa9d; background:#f1f8f6; }.proposal span { color:#168171; font-size:10px; font-weight:700; }.proposal p { margin-top:4px; color:#405a56; font-size:11px; }.source-ref { display:flex; align-items:flex-start; gap:6px; margin-top:13px; color:#66777f; font-size:10px; }.source-ref i { flex:0 0 auto; width:14px; }
.source-strip { display:flex; align-items:center; gap:12px; padding:14px 17px; margin-bottom:15px; }.source-strip>div { display:flex; align-items:center; gap:10px; margin-right:auto; }.source-logo { display:grid; place-items:center; width:28px; height:28px; border-radius:4px; background:#cf3e42; color:#fff; font-weight:700; font-size:11px; }.source-strip strong,.source-strip small { display:block; }.source-strip strong { font-size:12px; }.source-strip small { color:var(--muted); font-size:10px; }.table-panel { overflow:hidden; }.table-toolbar { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line); }.search { display:flex; align-items:center; gap:7px; width:min(340px,55%); padding:0 9px; border:1px solid #ccd7db; border-radius:4px; }.search i { width:15px; color:#83929a; }.search input { width:100%; height:31px; border:0; outline:0; color:#34464f; background:transparent; font-size:12px; }.filter-group { display:flex; gap:3px; }.filter { border:0; padding:5px 8px; border-radius:3px; background:transparent; color:#65757e; font-size:11px; }.filter.active { color:#087167; background:#e6f3f0; font-weight:600; }.data-table { min-width:650px; }.table-head,.table-row { display:grid; grid-template-columns:minmax(270px,1.7fr) .55fr .9fr .55fr 30px; align-items:center; gap:10px; padding:0 16px; }.table-head { height:35px; color:#73828a; background:#f7f9f9; font-size:10px; }.table-row { min-height:67px; border-top:1px solid #edf1f2; color:#3b4a53; font-size:11px; }.table-row strong,.table-row small { display:block; }.table-row strong { color:#263842; font-size:12px; }.table-row small { color:#7a8991; font-size:10px; }.match { font-size:11px; font-weight:600; }.match.high { color:#148070; }.match.medium { color:#a67018; }.row-action { width:27px; height:27px; border-radius:3px; }.row-action:hover { background:#edf3f2; }
.policy-layout { display:grid; grid-template-columns:minmax(300px,.82fr) minmax(0,1.5fr); gap:16px; }.policy-list { align-self:start; overflow:hidden; }.list-header { display:flex; align-items:center; justify-content:space-between; padding:14px 15px; border-bottom:1px solid var(--line); }.policy-row { width:100%; display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:10px; padding:13px 15px; border:0; border-bottom:1px solid #edf0f1; background:#fff; text-align:left; }.policy-row:hover,.policy-row.active { background:#f4f9f8; }.policy-row.active { border-left:3px solid var(--teal); padding-left:12px; }.small-doc { width:30px; height:33px; }.small-doc i { width:15px; }.policy-row strong,.policy-row small { display:block; }.policy-row strong { font-size:12px; }.policy-row small { margin-top:2px; color:#76858d; font-size:10px; }.interpretation { overflow:hidden; }.interpretation-header { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; padding:22px; border-bottom:1px solid var(--line); }.interpretation-header h2 { margin:8px 0 3px; font-size:19px; }.interpretation-header p { margin:0; color:var(--muted); font-size:11px; }.interpretation-body { padding:22px; }.interpretation-body h3 { margin:0 0 8px; font-size:14px; }.interpretation-body>div>p { margin:0; color:#44555e; line-height:1.8; }.impact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:20px 0; }.impact-grid>div { padding:11px; border:1px solid #dfe7e7; background:#f9fbfb; }.impact-grid span,.impact-grid strong { display:block; }.impact-grid span { color:#708087; font-size:10px; }.impact-grid strong { margin-top:3px; color:#37514d; font-size:11px; }.evidence { padding:14px; border:1px solid #d5e5e2; background:#f4faf8; }.evidence-head { display:flex; align-items:center; gap:6px; color:#247166; }.evidence-head i { width:15px; }.evidence-head strong { font-size:11px; }.evidence-head span { margin-left:auto; color:#62817a; font-size:10px; }.evidence blockquote { margin:10px 0; padding-left:10px; border-left:2px solid #94c7bb; color:#3f5551; font-size:12px; }.evidence a { display:inline-flex; align-items:center; gap:4px; color:var(--teal); font-size:11px; font-weight:600; text-decoration:none; }.evidence a i { width:13px; }
dialog { width:min(560px,calc(100% - 30px)); padding:0; border:0; border-radius:7px; box-shadow:0 20px 55px rgba(17,30,38,.25); } dialog::backdrop { background:rgba(17,32,42,.38); }.modal { padding:20px; }.modal-header { display:flex; justify-content:space-between; align-items:start; }.modal-header h2 { margin:2px 0 0; font-size:18px; }.dropzone { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:145px; gap:5px; margin:18px 0; border:1px dashed #9fbeb8; background:#f5faf8; color:#58706b; cursor:pointer; }.dropzone>i { width:24px; height:24px; color:var(--teal); }.dropzone strong { color:#2d4c47; }.dropzone span { font-size:11px; }.dropzone input { width:0; height:0; opacity:0; }.modal-fields { display:grid; grid-template-columns:1.4fr .9fr; gap:10px; }.modal-fields label { display:grid; gap:5px; color:#62727a; font-size:11px; }.modal-fields input { width:100%; height:34px; padding:0 8px; border:1px solid #cbd7da; border-radius:3px; outline-color:var(--teal); font-size:11px; }.modal-footer { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }.toast { position:fixed; right:22px; bottom:22px; z-index:5; display:flex; align-items:center; gap:8px; transform:translateY(110px); padding:11px 14px; border:1px solid #a8d3c8; border-radius:5px; background:#f1fbf7; color:#176d60; box-shadow:var(--shadow); transition:transform .24s ease; font-size:12px; font-weight:600; }.toast.visible { transform:translateY(0); }.toast i { width:17px; }
@media (max-width: 1100px) { .dashboard-grid { grid-template-columns:1fr; }.signal-panel,.policy-panel { min-height:auto; }.editor-layout { grid-template-columns:185px minmax(0,1fr); }.review-pane { grid-column:2; }.policy-layout { grid-template-columns:1fr; }.policy-list { display:grid; grid-template-columns:repeat(3,1fr); }.list-header { grid-column:1/-1; }.policy-row { grid-template-columns:30px 1fr; }.policy-row .status { display:none; } }
@media (max-width: 760px) { .app-shell { display:block; }.sidebar { position:static; height:auto; padding:13px 14px; }.brand { padding:0 7px 11px; }.sidebar nav { grid-template-columns:repeat(4,1fr); gap:4px; }.nav-item { height:48px; padding:5px; justify-content:center; flex-direction:column; gap:2px; font-size:10px; }.nav-item i { width:16px; }.nav-item b,.sidebar-bottom { display:none; }.topbar { height:auto; min-height:58px; padding:10px 15px; gap:8px; }.crumb { display:none; }.top-actions { width:100%; justify-content:flex-end; }.top-actions .button { padding:0 9px; }.view { padding:22px 15px 30px; }.page-heading { display:block; }.page-heading h1 { font-size:21px; }.status-group { padding-top:9px; }.workflow { padding:12px; }.flow-step { min-width:145px; }.dashboard-grid { gap:13px; }.standard-panel,.issues-panel,.signal-panel,.policy-panel { padding:15px; }.audit-summary { flex-wrap:wrap; }.audit-summary .issue-bars { min-width:100px; }.editor-layout { grid-template-columns:1fr; }.outline { display:flex; gap:3px; overflow:auto; padding:6px; }.outline-header { display:none; }.outline-item,.outline-child { width:max-content; white-space:nowrap; }.review-pane { grid-column:auto; }.editor-document { padding:27px 20px; }.table-panel { overflow:auto; }.table-toolbar { min-width:650px; }.source-strip { flex-wrap:wrap; }.source-strip>div { width:100%; }.policy-list { display:block; }.impact-grid { grid-template-columns:1fr; }.modal-fields { grid-template-columns:1fr; } }