/* UI-1: Shared visual system for the advertising team's daily workspace. */
:root {
  --ink:#182b36; --muted:#536773; --line:#dce5eb; --paper:#f3f6f8;
  --green:#087f8c; --lime:#a8e1dd; --nav:#182b36; --radius:12px;
  --accent-soft:#e9f5f5; --danger:#b43f3f; --focus:#087f8c;
}
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:14px/1.55 "Segoe UI Variable","Segoe UI","Microsoft YaHei",sans-serif; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; border:1px solid var(--line); border-radius:7px; padding:8px 13px; background:#fff; color:var(--ink); font-weight:500; min-height:36px; transition:background .12s,border-color .12s; }
button:hover { background:#eef5f7; border-color:#b8cbd4; }
button:disabled { opacity:.5; cursor:not-allowed; }
input,select,textarea { width:100%; min-width:0; border:1px solid #bdccd5; border-radius:7px; padding:9px 11px; background:#fff; color:var(--ink); min-height:40px; }
input::placeholder,textarea::placeholder { color:#657986; opacity:1; }
textarea { resize:vertical; min-height:96px; }
input[type=checkbox],input[type=radio] { width:16px; min-height:16px; height:16px; accent-color:var(--green); }
input[type=file] { padding:7px; max-width:100%; }
input:focus,select:focus,textarea:focus,button:focus-visible,summary:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
label { display:block; font-size:13px; font-weight:600; margin:14px 0; min-width:0; }
label>span { display:block; margin-bottom:6px; }
h1,h2,h3,p { margin-top:0; }
/* UI-3 CARD-1: Free-form headings wrap; identity columns may shrink. */
h2,h3 { overflow-wrap:anywhere; }
h1 { font-size:26px; font-weight:650; letter-spacing:-.65px; line-height:1.25; margin-bottom:7px; }
h2 { font-size:22px; font-weight:650; letter-spacing:-.3px; line-height:1.35; }
h3 { font-size:16px; font-weight:650; line-height:1.45; margin-bottom:12px; }
p { margin-bottom:14px; }
small { font-size:12px; }
.muted { color:var(--muted); }
.eyebrow { font-size:13px; font-weight:600; color:var(--green); }
.primary { background:var(--green); border-color:var(--green); color:white; font-weight:600; }
.primary:hover { background:#066b76; border-color:#066b76; }
.wide { width:100%; }
.language { position:fixed; right:28px; top:13px; z-index:10; padding:6px 11px; background:white; font-size:13px; min-height:34px; }
.brand { display:flex; align-items:center; gap:10px; font-size:24px; letter-spacing:-.5px; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:#e1f4f1; color:#096e78; flex-shrink:0; }
.brand-mark svg { width:22px; height:22px; }
.brand small { font-size:11px; font-weight:500; color:#bdcdd6; margin-left:5px; letter-spacing:.2px; }
.login-screen { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; background:white; }
.login-story { display:flex; flex-direction:column; justify-content:space-between; padding:52px 10%; background:var(--nav); color:#f5f9fa; min-height:100vh; }
.login-story .eyebrow { color:#a8e1dd; }
.login-story h1 { font-size:52px; margin:16px 0; letter-spacing:-1.8px; line-height:1.12; max-width:480px; }
.login-story p { font-size:17px; max-width:380px; color:#c0d0d9; }
.login-story>span { font-size:12px; color:#c0d0d9; }
.story-flow { margin-top:34px; font-size:14px; border-top:1px solid #ffffff24; padding-top:24px; display:flex; gap:16px; }
.story-flow span { color:#84c6c7; }
.login-panel { display:grid; place-items:center; padding:48px; }
.login-panel form { width:100%; max-width:370px; }
.login-panel h2 { margin:12px 0 8px; font-size:28px; }
.demo-accounts { margin-top:28px; padding:18px; border:1px solid var(--line); border-radius:10px; background:#f7fafb; color:var(--muted); font-size:13px; }
.demo-accounts>div { display:flex; gap:7px; flex-wrap:wrap; margin:10px 0; }
.demo-accounts button { padding:6px 9px; font-size:12px; }
.demo-accounts small { overflow-wrap:anywhere; }
.workspace { min-height:100vh; display:flex; }
.workspace[hidden],.login-screen[hidden] { display:none; }
.sidebar { position:fixed; inset:0 auto 0 0; width:220px; background:var(--nav); color:white; padding:23px 14px 16px; display:flex; flex-direction:column; z-index:20; overflow-y:auto; }
.sidebar .brand { margin:0 12px; }
.workspace-tag { color:#aec2ce; font-size:12px; margin:22px 12px 14px; }
.sidebar nav { display:grid; gap:4px; }
.sidebar nav button { border:0; background:none; color:#c2d1da; text-align:left; display:flex; align-items:center; gap:12px; padding:11px 13px; min-height:44px; font-size:14px; font-weight:500; }
.sidebar nav button:hover { background:#ffffff0d; color:white; }
.sidebar nav button.active { background:#284954; color:#e4f8f7; box-shadow:inset 3px 0 #78c9c6; }
.nav-icon { display:inline-flex; align-items:center; width:20px; height:20px; flex-shrink:0; }
.nav-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.sidebar-note { margin-top:auto; padding:24px 12px 18px; font-size:12px; color:#b2c5d0; display:flex; align-items:flex-start; gap:7px; line-height:1.5; }
.live-dot { width:7px; height:7px; background:#3a9d86; border-radius:50%; display:inline-block; flex-shrink:0; }
.sidebar-note .live-dot { margin-top:5px; background:#83c8ae; }
.account { border-top:1px solid #ffffff24; padding:16px 10px 8px; display:flex; gap:10px; align-items:center; font-weight:600; }
.account small { display:block; color:#aec2ce; font-size:12px; font-weight:400; }
.avatar { display:inline-grid; place-items:center; border-radius:50%; background:#e6f1f4; color:#306173; width:30px; height:30px; font-size:11px; font-weight:650; flex-shrink:0; }
.sidebar .avatar { width:34px; height:34px; background:#36505e; color:#eef7fa; }
.logout { background:none; border:0; color:#c2d1da; font-size:12px; padding:6px 9px; text-align:left; margin-left:43px; min-height:30px; }
.logout:hover { background:#ffffff0d; color:white; }
.workspace main { width:calc(100% - 220px); min-width:0; margin-left:220px; }
.topbar { height:60px; border-bottom:1px solid var(--line); padding:0 28px; display:flex; align-items:center; justify-content:space-between; background:#fff; font-size:13px; }
.slash { margin:0 10px; color:#899eaa; }
#crumb { font-weight:600; }
.workspace-status { display:flex; gap:7px; align-items:center; font-size:12px; color:var(--muted); margin-right:80px; }
.content { max-width:1680px; margin:auto; padding:28px; min-width:0; }
.page-header { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:22px; }
.page-header>div { min-width:0; }
.page-header p { font-size:14px; margin:0; max-width:78ch; }
.page-header>button { flex-shrink:0; }
.page-header>label { margin:0; min-width:160px; max-width:220px; }
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin-bottom:8px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.stat { padding:17px 22px; border-right:1px solid var(--line); min-width:0; }
.stat:last-child { border-right:0; }
.stat>span { color:var(--muted); font-size:13px; font-weight:500; }
.stat strong { display:block; font-size:30px; line-height:1.45; font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:-.5px; }
.stats-context { font-size:12px; color:var(--muted); margin:0 0 22px; padding-left:2px; }
.stat.attention strong { color:#aa3a3a; }
.panel { background:white; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; min-width:0; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); }
.toolbar h2,.toolbar h3 { margin:0; }
.toolbar input { width:min(350px,45%); font-size:13px; padding:9px 12px; }
.scope-label { color:var(--muted); font-size:12px; margin-left:auto; }
.segmented { display:flex; background:#f0f4f6; padding:3px; border:1px solid var(--line); border-radius:8px; gap:2px; }
.segmented button { border:0; background:transparent; border-radius:5px; font-size:13px; padding:5px 13px; min-height:30px; color:var(--muted); }
.segmented button.selected { background:white; color:var(--green); box-shadow:0 1px 3px #182b3610; }
.stage-tabs { display:flex; gap:4px; overflow:auto; padding:11px 16px; border-bottom:1px solid var(--line); scrollbar-width:thin; }
.stage-tabs button { flex-shrink:0; border:0; background:none; font-size:12px; padding:6px 9px; color:var(--muted); min-height:34px; }
.stage-tabs button:hover { background:#f0f5f7; }
.stage-tabs button.selected { color:#076975; background:var(--accent-soft); font-weight:650; }
.stage-tabs small { margin-left:6px; color:inherit; font-size:12px; padding:1px 5px; background:#edf1f3; border-radius:4px; font-variant-numeric:tabular-nums; }
.stage-tabs button.selected small { background:#d0e9ea; }
.table-wrap { overflow:auto; scrollbar-width:thin; }
.project-filters { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; padding:18px; border-top:1px solid var(--line); }
.project-filters .project-criteria-hint,.project-filters .filter-actions,.project-filters .form-error { grid-column:1 / -1; margin:0; }
.project-criteria-hint { color:var(--muted); font-size:13px; }
.project-order { display:flex; gap:8px; align-items:end; margin-left:auto; }
.project-order label { margin:0; min-width:130px; }
#records th button { padding:0; border:0; background:transparent; color:inherit; min-height:24px; font-weight:inherit; }
#records th[aria-sort=ascending] button::after { content:" ↑"; }
#records th[aria-sort=descending] button::after { content:" ↓"; }
.project-filters .filter-actions { display:flex; gap:8px; flex-wrap:wrap; }
@media(max-width:1100px) { .project-filters { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:650px) { .project-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } }
table { width:100%; border-collapse:collapse; text-align:left; white-space:nowrap; font-variant-numeric:tabular-nums; }
th { font-size:12px; color:var(--muted); font-weight:600; padding:12px 18px; background:#f7f9fb; border-bottom:1px solid var(--line); vertical-align:middle; }
td { padding:14px 18px; border-bottom:1px solid #e8eef2; font-size:14px; vertical-align:middle; }
tbody tr:hover { background:#f7fbfc; }
tr:last-child td { border-bottom:0; }
td small { display:block; font-size:12px; color:var(--muted); margin-top:4px; }
.row-link { border:0; padding:0; min-height:24px; background:none; text-align:left; font-weight:600; color:#173b4a; }
.row-link:hover { color:var(--green); background:transparent; text-decoration:underline; text-underline-offset:3px; }
#records .project-table.layout-custom { table-layout:fixed; }
#records .project-table:not(.layout-custom) [data-column=project] { width:28%; min-width:240px; }
#records .project-table:not(.layout-custom) [data-column=nextStep] { min-width:220px; }
#records [data-column=project],#records [data-column=nextStep],#records [data-column=owner] { white-space:normal; overflow-wrap:anywhere; }
#records [data-column=project] .row-link { max-width:100%; overflow-wrap:anywhere; }
.project-layout { border-top:1px solid var(--line); padding:14px 18px; }
.project-layout>p { color:var(--muted); font-size:13px; }
.project-column-options { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.project-column-options label { min-width:0; }
.project-column-options [type=checkbox] { width:auto; min-height:0; }
@media(max-width:900px) { .project-column-options { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:650px) { .project-column-options { grid-template-columns:repeat(2,minmax(0,1fr)); } .project-order { flex-wrap:wrap; margin-left:0; width:100%; } .project-order label { flex:1; } }
.pill { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; background:#edf2f5; color:#425c6b; border:1px solid #e0e8ed; border-radius:5px; font-size:12px; font-weight:500; white-space:nowrap; line-height:1.4; }
.pill.won { background:#e7f5ee; color:#22654a; border-color:#cce8d9; }
.pill.lost { background:#fceeee; color:#a13b3b; border-color:#f2d4d4; }
.pill.contacted,.pill.appointment { background:#eaf3fc; color:#325f91; border-color:#d1e2f3; }
.pill.new { background:#f3f5f7; color:#53616e; border-color:#e1e6eb; }
.pill.quoted { background:#fcf3e2; color:#8a6116; border-color:#f0dfba; }
.pill.design { background:#f1ecfb; color:#6a4d98; border-color:#e0d5f3; }
.pill.redesign { background:#fff0e8; color:#9f522b; border-color:#f5dbca; }
.owner { display:flex; align-items:center; gap:8px; }
.deadline { color:var(--danger); font-weight:600; }
.empty { text-align:center; padding:38px 22px; color:var(--muted); font-size:13px; }
.empty strong { display:block; color:#405968; font-weight:600; margin-bottom:5px; font-size:14px; }
.list-empty { background:white; border:1px solid var(--line); border-radius:var(--radius); padding-bottom:24px; }
.empty-actions { display:flex; justify-content:center; gap:10px; padding:0 18px; flex-wrap:wrap; }
.board { display:flex; overflow:auto; gap:16px; padding:18px; background:#f6f9fb; min-height:300px; align-items:flex-start; }
.board-column { width:260px; flex-shrink:0; }
.board-title { font-size:13px; font-weight:600; margin-bottom:12px; color:#435d6a; display:flex; justify-content:space-between; padding:0 2px; }
.board-title span { padding:0 7px; background:#e8eef1; border-radius:4px; }
.board-card { background:white; border:1px solid var(--line); border-radius:9px; margin-bottom:10px; padding:16px; text-align:left; }
.board-card:hover { background:#fff; border-color:#89b8c1; }
.board-card h3 { font-size:15px; margin:12px 0 5px; }
.board-card p { font-size:13px; margin:0 0 12px; color:var(--muted); overflow-wrap:anywhere; }
.board-card .owner { margin-top:16px; margin-bottom:8px; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-bottom:22px; }
.client-card,.person-card { background:white; border:1px solid var(--line); border-radius:var(--radius); padding:22px; display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.client-card .client-icon { width:38px; height:38px; border-radius:9px; background:var(--accent-soft); color:var(--green); display:grid; place-items:center; margin-bottom:14px; }
.client-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.client-card h3,.person-card h3 { margin-bottom:7px; overflow-wrap:anywhere; }
.client-card p { color:var(--muted); font-size:13px; margin:4px 0; overflow-wrap:anywhere; max-width:100%; }
.client-card button { margin-top:auto; }
.person-card .avatar { width:42px; height:42px; font-size:14px; margin-bottom:14px; }
.duties { display:flex; gap:6px; flex-wrap:wrap; margin:14px 0; }
.person-card button { width:100%; font-size:13px; margin-top:14px; }
/* TEAM-1 ROLE-1: Read each person's identity, position, work and account state in one row. */
.team-directory { padding:8px 22px; }
.team-directory .team-member { display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:14px; padding:22px 0; }
.team-profile.person-card { display:grid; grid-template-columns:minmax(140px,.8fr) minmax(0,2fr) 160px; gap:18px; padding:0; border:0; border-radius:0; background:transparent; align-items:center; width:100%; }
.team-profile.team-read { grid-template-columns:minmax(140px,.8fr) minmax(0,2fr); }
.team-profile.person-card>button { margin:0; }
.team-profile .team-identity h3 { margin:0; font-size:15px; }
.team-identity { display:flex; align-items:center; gap:12px; min-width:0; }
.team-identity>div { min-width:0; overflow-wrap:anywhere; }
.team-identity .avatar { flex-shrink:0; width:36px; height:36px; margin:0; }
.handover-guide { margin:20px 0; padding:16px; border:1px solid var(--line); border-radius:var(--radius); }
.handover-guide p { max-width:78ch; color:var(--muted); }
.handover-links { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.handover-links button { max-width:100%; overflow-wrap:anywhere; text-align:left; }
.team-facts { display:grid; grid-template-columns:.8fr 1.2fr 1fr; gap:16px; margin:0; min-width:0; }
.team-facts>div { min-width:0; }
.team-facts dt { font-size:12px; color:var(--muted); margin-bottom:6px; }
.team-facts dd { margin:0; overflow-wrap:anywhere; }
.team-facts .duties,.team-status { display:flex; gap:6px; flex-wrap:wrap; margin:0; }
.team-status .pill { white-space:normal; }
.team-inactive { background:#edf0f2; color:var(--muted); }
.team-password-pending { background:#fff2dc; color:#755116; }
.password-identity { display:grid; gap:4px; border-left:3px solid var(--green); padding:10px 14px; margin-bottom:18px; background:var(--accent-soft); overflow-wrap:anywhere; }
.password-identity>span,.password-identity>small { font-size:13px; color:var(--muted); }
.password-identity>strong { font-size:16px; }
.team-actions { display:flex; flex-direction:column; gap:8px; }
.team-actions button { white-space:normal; }
.account-audit { margin:14px 0; border-top:1px solid var(--line); padding-top:18px; }
.account-audit summary { cursor:pointer; font-weight:600; }
.account-audit p { overflow-wrap:anywhere; color:var(--muted); }
@media (max-width:1000px) { .team-directory .team-member,.team-profile.person-card { grid-template-columns:1fr; gap:16px; } .team-actions { flex-direction:row; flex-wrap:wrap; } }
@media (max-width:600px) { .team-directory { padding:4px 16px; } .team-facts { grid-template-columns:1fr; gap:12px; } .team-facts>div { display:grid; grid-template-columns:92px minmax(0,1fr); gap:10px; } .team-actions button { flex:1; } }
.client-tools { padding:0 0 20px; justify-content:flex-start; border:0; flex-wrap:wrap; }
.filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px 16px; background:white; border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:22px; }
.filters label { margin:0; }
.filters .filter-actions { align-self:end; display:flex; gap:8px; flex-wrap:wrap; }
.filters .form-error { margin:0; grid-column:1/-1; }
.form-error:empty { display:none; }
.report-grid { display:grid; grid-template-columns:minmax(280px,.9fr) minmax(0,1.4fr); gap:20px; }
.chart { padding:22px; }
.chart h3 { margin-bottom:22px; }
.bar-row { margin:16px 0; }
.bar-row>div { display:flex; justify-content:space-between; font-size:13px; margin-bottom:7px; gap:12px; }
.bar-track { height:8px; background:#edf3f6; border-radius:4px; overflow:hidden; }
.bar-fill { height:100%; background:#3798a3; border-radius:4px; }
.report-note { font-size:13px; line-height:1.65; color:var(--muted); padding:12px 2px; margin:0 0 10px; }
.report-note code { font:inherit; }
.help-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.help-card { background:white; padding:22px; border:1px solid var(--line); border-radius:var(--radius); }
.help-card p { font-size:14px; color:var(--muted); line-height:1.75; max-width:78ch; margin:0; }
.help-card h3 { margin-bottom:12px; }
.help-card { display:flex; flex-direction:column; align-items:flex-start; }
.help-actions { padding-top:16px; margin-top:auto; }
dialog { width:min(960px,calc(100vw - 48px)); max-height:90vh; border:1px solid #cad7df; border-radius:14px; padding:0; color:var(--ink); box-shadow:0 24px 80px #142b3650; }
dialog::backdrop { background:#182b3670; backdrop-filter:blur(2px); }
.dialog-top { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; padding:15px 24px; border-bottom:1px solid var(--line); background:#fff; z-index:1; font-size:15px; font-weight:650; }
.dialog-top button { display:grid; place-items:center; font-size:25px; width:34px; height:34px; min-height:34px; padding:0; border:0; background:#f1f5f7; color:var(--muted); }
#dialog-body { padding:24px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; }
.form-grid .full { grid-column:1/-1; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.detail-head { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; margin-bottom:24px; }
.detail-head>div { min-width:0; }
.detail-head h2 { margin-bottom:7px; }
.detail-head p { color:var(--muted); font-size:14px; margin:0; }
.detail-section { border-top:1px solid var(--line); margin-top:24px; padding-top:22px; }
.detail-section h3 { font-size:16px; }
.notice { padding:12px 14px; border:1px solid #d8e8ed; border-left:3px solid #83b9c3; border-radius:7px; font-size:13px; line-height:1.65; background:#f1f7f9; color:#405f6e; overflow-wrap:anywhere; }
.checks { display:flex; gap:16px; flex-wrap:wrap; }
.checks label { display:flex; align-items:center; gap:7px; margin:8px 0; font-size:13px; font-weight:400; }
.member-row { border-bottom:1px solid var(--line); padding:12px 0; display:grid; grid-template-columns:140px 1fr; align-items:center; gap:12px; }
.member-row .checks { gap:12px; }
.timeline { border-left:2px solid #dbe7ec; margin-left:5px; padding-left:20px; }
.timeline-item { position:relative; margin:20px 0; font-size:14px; }
.timeline-item:before { content:""; position:absolute; left:-25px; top:6px; width:8px; height:8px; border-radius:50%; background:#6b9da8; border:2px solid white; }
.timeline-item small { color:var(--muted); display:block; margin-top:4px; font-size:12px; }
.timeline-item p { margin:6px 0; color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere; }
.error,.form-error { color:var(--danger); font-size:13px; }
.form-error { min-height:20px; }
.toast { position:fixed; bottom:24px; right:24px; max-width:min(460px,90vw); background:var(--nav); color:white; border-radius:9px; padding:14px 20px; box-shadow:0 8px 28px #182b3625; z-index:100; font-size:14px; }
.toast.error { background:#963d3d; }
.small-button { padding:7px 11px; font-size:13px; }
.section-tabs { display:flex; gap:4px; overflow:auto; margin:0 0 22px; padding:5px; background:#e7eef2; border:1px solid #d5e1e8; border-radius:9px; flex-shrink:0; scrollbar-width:thin; }
.section-tabs button { border:0; white-space:nowrap; background:transparent; color:#425c6b; font-size:13px; padding:8px 12px; min-height:36px; }
.section-tabs button:hover { background:#f3f8fa; }
.section-tabs button[aria-selected=true],.section-tabs button.active { background:white; color:#086f7b; box-shadow:0 1px 3px #182b3612; font-weight:650; }
#content>.section-tabs { flex-wrap:wrap; background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:0 0 8px; margin-bottom:20px; gap:4px 6px; }
#content>.section-tabs button.active { background:var(--accent-soft); box-shadow:none; }
.record-card { padding:20px; border:1px solid var(--line); border-radius:10px; margin:16px 0; background:#fff; }
.record-card p { font-size:14px; line-height:1.65; overflow-wrap:anywhere; }
/* UI-4: All record families use the same responsive information hierarchy. */
.record-header { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; }
.record-header h3 { margin:0; font-size:16px; line-height:1.5; flex:1 1 180px; min-width:0; }
.record-status { display:inline-block; padding:4px 10px; border-radius:6px; background:var(--accent-soft); color:#086f7b; font-size:12px; line-height:1.5; max-width:100%; overflow-wrap:anywhere; }
.record-card .record-meta { margin:8px 0 16px; color:var(--muted); font-size:12px; }
.record-body>:first-child { margin-top:0; }
.record-body>:last-child { margin-bottom:0; }
.record-card small { font-size:12px; color:var(--muted); }
.customer-facts { display:grid; grid-template-columns:minmax(100px,.25fr) minmax(0,1fr); gap:10px 20px; margin:20px 0; }
.customer-facts dt { color:var(--muted); font-size:13px; }
.customer-facts dd { margin:0; overflow-wrap:anywhere; }
.customer-project-count { text-align:left; white-space:normal; }
.customer-project-row { padding:16px 0; border-top:1px solid var(--line); }
.customer-project-row header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.customer-project-row .row-link { max-width:100%; white-space:normal; overflow-wrap:anywhere; text-align:left; }
.customer-project-row .record-meta { margin:8px 0; }
.customer-project-row p:last-child { margin-bottom:0; }
@media (max-width:600px) { .customer-facts { grid-template-columns:1fr; gap:4px; } .customer-facts dd { margin-bottom:12px; } }
.record-card .detail-section { padding:16px 0 0; margin-top:16px; }
.preserve { white-space:pre-wrap; overflow-wrap:anywhere; }
details { padding:16px; border:1px solid var(--line); border-radius:8px; margin:18px 0; background:#f9fbfc; }
summary { cursor:pointer; font-weight:600; font-size:14px; }
details[open]>summary { margin-bottom:12px; }
.work-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:20px; margin-bottom:22px; }
.work-grid>.panel { padding:20px; }
.work-grid h3 { margin-bottom:4px; }
.work-row { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; text-align:left; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; padding:14px 0; min-width:0; }
.work-row:last-child { border-bottom:0; }
.work-row:hover { background:#f5f9fb; }
.work-row>span:first-child { min-width:0; overflow-wrap:anywhere; }
.work-row>span:last-child { text-align:right; flex-shrink:0; max-width:46%; }
.work-row strong { font-weight:600; }
.work-row small { display:block; font-size:12px; color:var(--muted); margin-top:5px; }
.work-row small.deadline { color:var(--danger); }
.calendar-wrap { overflow:auto; }
.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(112px,1fr)); min-width:784px; }
.calendar-weekday { text-align:center; font-size:13px; font-weight:600; padding:12px; background:#f5f8fa; color:var(--muted); }
.calendar-day { min-height:142px; border:1px solid #e5edf1; padding:10px; overflow:hidden; }
.calendar-day>strong { font-size:13px; color:var(--muted); display:inline-grid; place-items:center; width:26px; height:26px; }
.calendar-day.outside { background:#f8fafb; }
.calendar-day.today>strong { background:var(--green); border-radius:50%; color:#fff; }
.calendar-event { display:block; width:100%; padding:8px; margin-top:8px; font-size:12px; text-align:left; white-space:normal; background:#e9f5f3; border:0; border-left:3px solid #4f9d8e; border-radius:5px; }
.calendar-event.deployment { background:#edf3fc; border-color:#668cbc; }
.calendar-event.appointment { background:#fff4e4; border-color:#ba8842; }
.calendar-event span { font-weight:600; display:block; overflow-wrap:anywhere; }
.calendar-event small { display:block; line-height:1.5; font-size:12px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.metric-grid small { display:block; color:var(--muted); font-size:13px; line-height:1.5; }
.metric-grid strong { display:block; font-size:27px; margin-top:6px; font-weight:650; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; letter-spacing:-.35px; }
.metric-grid.panel { padding:20px 22px; margin-bottom:22px; }
.report-totals { display:grid; gap:16px; margin:20px 0; }
.report-totals>.panel { padding:22px; }
.report-totals .panel.metric-grid { margin-bottom:0; padding:22px; }
.operations-panel { padding:22px; margin:22px 0; }
.operations-panel h3 { margin-top:0; }
.operations-panel .toolbar { padding:0 0 14px; margin-bottom:14px; flex-wrap:wrap; justify-content:flex-start; }
.operations-panel .toolbar h3 { margin-right:auto; }
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)); gap:16px; margin-bottom:24px; }
.kpi-card { min-width:0; margin:0; }
.kpi-card .metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.kpi-card .metric-grid strong { font-size:23px; overflow-wrap:anywhere; }
.kpi-details { margin-top:24px; border-top:1px solid var(--line); padding-top:20px; }
.kpi-card progress { width:100%; height:8px; accent-color:var(--green); margin-top:16px; }
.kpi-card h3 small { font-size:12px; font-weight:400; }
.kpi-card>p { font-size:13px; }
.performance-summary { padding:22px; }
.performance-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
#content>.notice { margin:18px 0; }
#content>h3 { margin:26px 0 14px; }
#import-rows { margin-top:24px; }
#import-rows td { vertical-align:top; }
#import-rows p { margin:8px 0; }
/* UI-1: Readable rail, local scrolling and controls at narrow widths. */
@media (max-width:1200px) {
  .content { padding:24px; }
  .stat { padding:16px; }
  .report-grid { grid-template-columns:1fr; }
  .filters { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .toolbar .scope-label { display:none; }
}
@media (max-width:900px) {
  .sidebar { width:190px; }
  .workspace main { margin-left:190px; width:calc(100% - 190px); }
  .content { padding:22px; }
  .work-grid { grid-template-columns:1fr; }
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat:nth-child(2) { border-right:0; }
  .stat:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .page-header { flex-wrap:wrap; }
}
@media (max-width:750px) {
  .login-screen { grid-template-columns:1fr; }
  .login-story { display:none; }
  .login-panel { min-height:100vh; padding:28px; }
  .sidebar { width:76px; padding:18px 6px 12px; }
  .sidebar .brand { margin:0; justify-content:center; }
  .sidebar .brand strong,.workspace-tag,.sidebar-note,.account>div { display:none; }
  .sidebar .brand-mark { width:34px; height:34px; }
  .sidebar nav { margin-top:24px; gap:5px; }
  .sidebar nav button { display:flex; flex-direction:column; align-items:center; gap:5px; padding:9px 2px; min-height:60px; text-align:center; font-size:11px; line-height:1.3; border-radius:7px; }
  .sidebar nav button>span:last-child { display:block; width:100%; }
  .sidebar nav button.active { box-shadow:inset 3px 0 #78c9c6; }
  .account { margin-top:auto; padding:15px 0 8px; justify-content:center; }
  .logout { display:block; font-size:10px; line-height:1.35; margin:0; text-align:center; padding:8px 2px; min-height:36px; }
  .workspace main { margin-left:76px; width:calc(100% - 76px); }
  .topbar { height:56px; padding:0 16px; }
  .workspace-status { display:none; }
  .language { right:16px; top:11px; }
  .content { padding:22px 14px; }
  h1 { font-size:25px; }
  .page-header { align-items:flex-start; gap:14px; margin-bottom:18px; }
  .page-header p { font-size:13px; }
  .page-header>button { font-size:13px; }
  .page-header>label { width:100%; max-width:none; }
  .stats { margin-bottom:8px; }
  .stat { padding:14px 12px; }
  .stat>span { font-size:12px; }
  .stat strong { font-size:27px; }
  .stat small { font-size:11px; }
  .toolbar { padding:12px; flex-wrap:wrap; }
  .toolbar input { width:100%; flex:1 0 100%; }
  .segmented { margin-left:auto; }
  .stage-tabs { padding:10px; }
  .filters { grid-template-columns:repeat(2,minmax(0,1fr)); padding:14px; gap:14px 10px; }
  .filters .filter-actions { grid-column:1/-1; }
  .filters label { font-size:12px; }
  .filters input,.filters select { font-size:13px; padding:8px; }
  .form-grid,.help-grid { grid-template-columns:1fr; }
  .form-grid .full { grid-column:auto; }
  .member-row { grid-template-columns:1fr; gap:4px; }
  .card-grid { grid-template-columns:1fr; }
  #content>.section-tabs { flex-wrap:nowrap; }
  .section-tabs { margin-bottom:18px; }
  .section-tabs button { font-size:13px; padding:8px 11px; }
  dialog { width:calc(100vw - 20px); max-height:94dvh; border-radius:12px; }
  .dialog-top { padding:14px 18px; }
  #dialog-body { padding:18px; }
  .detail-head h2 { font-size:21px; }
  .detail-head { flex-wrap:wrap; }
  .detail-head .pill { align-self:flex-start; }
  .operations-panel,.chart,.work-grid>.panel { padding:18px; }
  .work-row { gap:12px; }
  .work-row strong { font-size:13px; }
  .metric-grid { gap:18px 12px; }
  .metric-grid strong { font-size:23px; }
  .metric-grid small { font-size:12px; }
  .metric-grid.panel { padding:18px; }
  .performance-actions { justify-content:flex-start; }
  .toast { right:14px; bottom:14px; }
}
@media (max-width:600px) { .kpi-card .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }

.page-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; flex-shrink:0; }
.page-actions label { margin:0; max-width:210px; }
@media(max-width:750px) { .page-actions { justify-content:flex-start; width:100%; } .page-actions label { flex:1; min-width:140px; } }

/* UI-2: Hierarchy for daily follow-up, records and report results. */
.result-count { font-size:13px; color:var(--muted); margin-left:auto; white-space:nowrap; font-variant-numeric:tabular-nums; }
.next-step-cell { max-width:300px; min-width:210px; white-space:normal; line-height:1.65; }
.missing-step { color:#86612b; background:#fbf4e9; border-radius:4px; padding:2px 6px; }
.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.panel-heading h3 { margin:0; }
.panel-heading p { font-size:12px; line-height:1.6; color:var(--muted); margin:5px 0 0; }
.panel-count { display:inline-grid; place-items:center; min-width:26px; height:25px; padding:0 7px; border-radius:5px; background:#edf3f6; color:#486574; font-size:12px; flex-shrink:0; font-variant-numeric:tabular-nums; }
.work-copy>strong { display:block; font-size:14px; line-height:1.5; }
.work-meta { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px; color:var(--muted); margin-top:8px; line-height:1.6; }
.work-row .work-meta>span { text-align:left; max-width:none; }
.work-status { font-size:13px; font-variant-numeric:tabular-nums; }
.work-kind { display:inline-block; color:#397382; font-size:12px; margin-bottom:5px; }
.work-grid .empty { text-align:left; padding:26px 0 16px; }
.work-grid { align-items:start; }
.work-column { display:grid; gap:20px; min-width:0; }
.work-column>.panel { padding:20px; }
.report-audit { padding:20px; }
@media(max-width:750px) { .work-column>.panel,.report-audit { padding:18px; } }
.task-summary { display:flex; align-items:center; gap:28px; background:#eaf1f5; border:1px solid #dbe6ed; border-radius:9px; padding:15px 20px; margin:0 0 22px; }
.task-summary>div:first-child { margin-right:auto; }
.task-summary>div:first-child strong { font-weight:600; }
.task-summary small { display:block; font-size:12px; margin-top:3px; color:var(--muted); }
.task-summary-count { display:flex; align-items:center; gap:10px; }
.task-summary-count>span { font-size:12px; color:var(--muted); }
.task-summary-count strong { font-size:23px; font-weight:650; font-variant-numeric:tabular-nums; }
.report-filter-panel { background:white; border:1px solid var(--line); border-radius:9px; padding:0; margin:0 0 20px; }
.report-filter-panel summary { padding:14px 18px; font-size:13px; color:var(--ink); line-height:1.7; }
.report-filter-panel[open]>summary { margin:0; border-bottom:1px solid var(--line); }
.report-filter-panel summary>span { display:block; margin-left:16px; font-size:12px; font-weight:400; color:var(--muted); }
.report-filter-panel .filters { border:0; border-radius:0; margin:0; background:transparent; padding:18px; }
.report-page .report-grid { gap:20px; margin-top:4px; }
.report-page .number-cell { text-align:right; font-variant-numeric:tabular-nums; }
.report-page .metric-grid>div { border-left:2px solid #dce9ee; padding-left:12px; }
.report-page .report-note { max-width:100ch; }
.report-page .metric-grid strong { font-size:25px; }
.report-result-context { margin:0 0 20px; padding:18px 20px; background:var(--accent-soft); border-left:3px solid var(--green); }
.report-result-context h2 { margin:0 0 8px; font-size:18px; }
.report-result-context p { margin:6px 0; }
.report-access { color:var(--muted); font-size:13px; }
.report-time-context { font-weight:600; }
.report-result-context dl { display:flex; flex-wrap:wrap; gap:6px 12px; margin:12px 0 0; font-size:13px; }
.report-result-context dt { color:var(--muted); }
.report-result-context dd { margin:0 16px 0 0; font-variant-numeric:tabular-nums; }
.report-definition,.report-export-history { padding:0; background:white; margin:20px 0; }
.report-definition>summary,.report-export-history>summary { padding:14px 18px; }
.report-export-history>summary h3 { display:inline; font-size:14px; margin:0; }
.report-export-scope { display:block; margin-top:6px; color:var(--muted); overflow-wrap:anywhere; line-height:1.6; }
.report-draft-label { grid-column:1 / -1; margin:0; color:var(--muted); font-size:13px; }
.report-definition>p { margin:14px 18px; max-width:78ch; line-height:1.7; }
.report-export-history>.panel { border:0; margin:0; border-radius:0; }
@media(max-width:750px) { .report-result-context { padding:14px; } .report-result-context dl { display:grid; grid-template-columns:auto minmax(0,1fr); } .report-result-context dd { overflow-wrap:anywhere; margin:0; } }
@media(max-width:1200px) { .result-count { margin-left:0; } .task-summary { gap:18px; } }
@media(max-width:750px) {
 .task-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:14px; gap:12px 8px; }
 .task-summary>div:first-child { grid-column:1/-1; }
 .task-summary-count { display:block; }
 .task-summary-count>span,.task-summary-count strong { display:block; }
 .task-summary-count strong { margin-top:3px; }
 .result-count { font-size:12px; }
 .work-copy>strong { font-size:13px; }
 .work-row>span:last-child { max-width:40%; }
 .work-meta { gap:3px 8px; }
 .work-meta>span { flex-basis:100%; }
 .report-filter-panel summary { padding:12px 14px; }
 .report-filter-panel .filters { padding:14px; }
}

/* UI-5: Historic records keep full content behind a native disclosure. */
.record-history { padding:0; background:#fff; border-radius:10px; }
.record-history>summary { padding:16px 20px; }
.record-history>.record-card { margin:0; border:0; border-top:1px solid var(--line); border-radius:0; }
.record-history>.record-card:last-child { border-radius:0 0 10px 10px; }

/* UI-3: Optional dialog context styles leave ordinary titles unchanged. */
#dialog-title.has-context { min-width:0; flex:1; color:var(--muted); font-size:12px; font-weight:500; }
.dialog-top:has(.has-context) { gap:16px; }
.dialog-context { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; color:var(--ink); font-size:15px; font-weight:650; line-height:1.45; }

/* FORM-2 UI-1: Native hidden states must survive component display rules. */
[hidden] { display:none !important; }

/* UI-12 QUOTE-1: Cash components and non-cash valuation keep separate meaning. */
.quote-amounts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 20px; margin:0 0 22px; }
.quote-amounts>div { min-width:0; }
.quote-amounts dt { color:var(--muted); font-size:12px; margin-bottom:5px; }
.quote-amounts dd { margin:0; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.quote-amounts .quote-cash { grid-column:1 / -1; padding-bottom:15px; border-bottom:1px solid var(--line); }
.quote-cash dd { color:var(--ink); font-size:24px; line-height:1.3; font-weight:650; }
.quote-amounts .quote-valuation { grid-column:1 / -1; padding:12px 14px; background:var(--paper); border-radius:7px; }
.quote-terms { margin:18px 0; }
.quote-terms h4 { margin:0 0 7px; font-size:12px; font-weight:600; color:var(--muted); }
.quote-terms p { margin:0; }

/* SYNC-1: Same project cards and form controls, with a contained copy preview. */
.simulation-resources{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;margin:24px 0}.simulation-resources dd{margin:0;overflow-wrap:anywhere}
.simulation-action{display:flex;flex-wrap:wrap;align-items:end;gap:12px;padding-top:16px}.simulation-action .form-error:empty{display:none}
.simulation-connection{font-weight:600}.simulation-problem{margin:16px 0}.simulation-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;background:var(--surface-muted,#f3f7f8);padding:16px;border-radius:10px}.simulation-compare p{overflow-wrap:anywhere}.simulation-compare h4{margin:0 0 8px}
.simulation-log{padding-left:24px}.simulation-log li{padding:12px 0}.simulation-log small{display:block;margin-top:4px;color:var(--muted)}
@media(max-width:640px){.simulation-resources{grid-template-columns:1fr;gap:6px}.simulation-resources dd{margin-bottom:14px}.simulation-compare{grid-template-columns:1fr}.simulation-action button{width:100%}}
/* UI-15: A quiet viewing surface keeps the original record and its review nearby. */
.material-preview{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.material-preview-bar{display:flex;align-items:flex-start;gap:12px;justify-content:space-between}
.material-preview-bar strong{overflow-wrap:anywhere;min-width:0;font-weight:600}
.material-preview-bar button{flex-shrink:0}
.material-status,.material-link-note{color:var(--muted);font-size:13px}
.material-link-note{display:block;margin-top:6px}
.material-canvas iframe{display:block;width:100%;height:480px;border:1px solid var(--line);border-radius:7px;background:white}
.material-pdf{border:1px solid var(--line);border-radius:7px;overflow:hidden;background:#edf0f3;min-width:0;color:var(--ink)}
.material-pdf-controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:8px;background:var(--paper);border-bottom:1px solid var(--line)}
.material-pdf-controls button,.material-pdf-controls input,.material-pdf-controls select{font-size:12px;min-height:32px;padding:5px 7px;margin:0;max-width:100%;width:auto}
.material-pdf-controls input[type=number]{width:4.5em;min-width:0}.material-pdf-controls input[type=search]{flex:1 1 120px;min-width:80px}
.material-pdf-controls select{min-width:0}.material-pdf-matches{font-size:12px;color:var(--muted)}
.material-pdf-body{height:480px;position:relative;min-width:0}
.material-pdf-viewport{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;min-width:0}
.material-pdf-viewport>.pdfViewer{position:relative;min-height:100%;--page-margin:8px auto;--page-border:0 solid transparent}
.material-pdf-print{position:fixed;left:-10000px;top:0;width:800px;height:1000px;border:0}
@media(max-width:640px){.material-pdf-body{height:360px}.material-pdf-controls{padding:6px}.material-pdf-controls button{flex-grow:1}}
@media(max-width:640px){.material-preview{padding:10px}.material-preview-bar{flex-direction:column}.material-canvas iframe{height:360px}}

/* GOOGLE-1: The two native OAuth confirmation stages load only this same-origin style. */
.google-callback { padding:24px; }
.google-callback>main { width:100%; max-width:660px; margin:48px auto; padding:28px; overflow-wrap:anywhere; }
.google-callback h1 { font-size:24px; }
.google-callback form { margin:24px 0; }
.google-continue { display:inline-block; padding:12px 16px; border:1px solid var(--line); border-radius:8px; }
.google-connection { margin-top:24px; padding:20px; }
.google-connection .toolbar { padding:0; flex-wrap:wrap; }
.google-connection p,[data-google-settings] p { overflow-wrap:anywhere; }
.google-authorization { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.google-browser-confirm { display:flex; align-items:flex-start; gap:10px; }
.google-browser-confirm input { width:auto; min-height:0; margin-top:4px; flex-shrink:0; }
@media(max-width:640px){.google-callback{padding:16px}.google-callback>main{margin:24px auto;padding:20px}.google-callback button,.google-continue{width:100%;text-align:center}}