/* APP — consolidated product styles */
:root{--ink:#203b2d;--green:#187348;--muted:#697a6e;--line:#dce4dc;--pale:#edf2e7;--paper:#fff;--bg:#f5f7f2}*{box-sizing:border-box}body{margin:0;font:16px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:var(--bg)}a{color:var(--green);text-decoration:none}a:hover{text-decoration:underline}button,input,select,textarea{font:inherit}button,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:7px;padding:11px 17px;background:white;color:var(--ink);font-size:15px;font-weight:500;cursor:pointer;text-decoration:none}button:hover,.button:hover{background:var(--pale);text-decoration:none}.primary{background:var(--green);border-color:var(--green);color:white}.primary:hover{background:#115936}.quiet{border:none;background:none;padding:8px 0;color:var(--muted)}:focus-visible{outline:3px solid #79a78d;outline-offset:3px}h1,h2,h3,p{margin:0}h1{font-size:34px;line-height:1.2;letter-spacing:-1px;margin:8px 0 12px}h2{font-size:21px;line-height:1.4}h3{font-size:17px;margin:10px 0}p{color:var(--muted);margin:9px 0 17px}small{font-size:13px}.sidebar{position:fixed;top:0;bottom:0;width:248px;padding:34px 25px;background:white;border-right:1px solid var(--line);display:flex;flex-direction:column}.brand{font-size:30px;letter-spacing:2px;font-weight:600;color:var(--ink)}.brand span{display:block;font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted)}.workspace-label,.eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:500;color:var(--muted)}.workspace-label{margin-top:45px}.company-name{margin:9px 0 25px;font-size:17px;overflow-wrap:anywhere}nav{display:grid;gap:6px}nav a{color:var(--ink);padding:12px 10px;border-radius:6px;font-size:15px}nav a:hover{background:var(--pale);text-decoration:none}.account{margin-top:auto;padding-top:30px;font-size:13px;overflow-wrap:anywhere}.account span,.account small{display:block}.account small{color:var(--muted)}.workspace{margin-left:248px;min-height:100vh}.anonymous{margin-left:0}.topbar{padding:17px 38px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;font-size:12px;color:var(--muted);background:#fcfdf9}main{max-width:1500px;padding:36px 38px;margin:auto}.heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:27px}.heading p{margin-bottom:0}.heading h1{max-width:850px}.panel{background:white;border:1px solid var(--line);border-radius:10px;margin-bottom:24px;min-width:0;overflow:hidden}.padded{padding:26px}.panel-head{padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px}.panel-head span{color:var(--muted);font-size:13px}.stats{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:18px;margin-bottom:30px}.stats section{border:1px solid var(--line);background:white;border-radius:9px;padding:23px}.stats span{display:block;color:var(--muted);font-size:14px}.stats strong{display:block;font-size:34px;margin-top:5px}.stats small{font-size:13px;font-weight:400}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:14px;text-align:left}th{font-size:11px;letter-spacing:.5px;text-transform:uppercase;background:#f5f7f2;color:var(--muted);font-weight:500}th,td{padding:16px 20px;border-bottom:1px solid var(--line)}td small{display:block;color:var(--muted);margin-top:5px}td:last-child{white-space:nowrap}tr:last-child td{border-bottom:none}.status{display:inline-block;font-size:12px;border:1px solid #d7e2d4;padding:4px 9px;border-radius:20px;background:#f3f5ed;white-space:nowrap}.issued,.accepted{background:#e5f3e8;color:#1f7040}.draft{background:#fcf2de;border-color:#eee0bd;color:#85651d}.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;align-items:start}.company-row{padding:23px 25px;border-top:1px solid var(--line);overflow-wrap:anywhere}.company-row p{font-size:14px}.fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:22px 0}label{display:block;font-size:14px;font-weight:500;margin:18px 0}.fields label{margin:0}.unit{font-weight:400;color:var(--muted);font-size:12px}input,select,textarea{display:block;width:100%;min-width:0;border:1px solid #cbd7cc;border-radius:6px;background:#fff;padding:12px;color:var(--ink);margin-top:7px;font-size:16px}textarea{resize:vertical;min-height:85px}.hint{font-size:13px;color:var(--muted)}.info,.notice,.error{border:1px solid #ceddce;border-radius:8px;background:#edf4e9;padding:15px 19px;font-size:14px;margin-bottom:24px}.error{background:#fff0e9;border-color:#e5bfae;color:#933e25}.notice{background:#e0f2e5;color:#1d6136}.form-actions{display:flex;justify-content:space-between;gap:20px;align-items:center;margin:20px 0}.form-actions span{font-size:14px;color:var(--muted)}.calc-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:23px;align-items:start}.summary{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:white}.summary-price{background:var(--ink);color:white;padding:25px}.summary-price span{font-size:11px;letter-spacing:1px;color:#cadace}.summary-price strong{font-size:36px;display:block;margin:12px 0}.summary-price p{color:#b9cdbd;font-size:13px;margin:0}.summary-row{display:flex;justify-content:space-between;gap:15px;font-size:14px;margin:14px 0}.summary-row b{white-space:nowrap}.profit{border-top:1px solid var(--line);margin-top:20px;padding-top:8px}.profit p{font-size:13px}.actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.document{max-width:930px;margin:auto;background:white;border:1px solid var(--line);padding:46px;color:var(--ink)}.doc-header{border-top:6px solid var(--ink);border-bottom:1px solid var(--line);padding:23px 0;display:flex;justify-content:space-between;gap:20px}.doc-header>div:last-child{text-align:right}.doc-brand{font-size:24px}.doc-header p{font-size:12px;margin-bottom:0}.doc-header h2{margin-top:7px}.doc-parties{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:28px 0}.doc-parties p{white-space:pre-line;font-size:14px}.doc-terms{display:grid;grid-template-columns:1fr 1.2fr .6fr;gap:18px;padding:15px 0;border-block:1px solid var(--line);margin-bottom:24px}.doc-terms .eyebrow{font-size:9px}.doc-terms p{font-size:13px;margin-bottom:0}.document th{background:var(--ink);color:white;font-size:10px}.document td,.document th{padding:14px 9px}.document td{font-size:13px}.doc-total{margin:24px 0;padding:22px;background:var(--pale);border-left:3px solid #94aa7b;display:flex;justify-content:space-between;gap:20px;align-items:center}.doc-total span{font-size:10px;letter-spacing:1px}.doc-total p{font-size:12px;margin-bottom:0}.doc-total strong{font-size:30px;white-space:nowrap}.doc-signature{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:20px 0;margin-top:23px;font-size:13px}.doc-footer{font-size:10px;line-height:1.7;color:var(--muted);border-top:1px solid var(--line);padding-top:15px;margin-top:18px}.app-footer{padding:20px 38px 30px;color:var(--muted);font-size:12px}.login-layout{max-width:1040px;margin:65px auto;display:grid;grid-template-columns:1.3fr 1fr;gap:70px;align-items:center}.login-layout h1{font-size:43px;line-height:1.2;margin:20px 0}.lead{font-size:18px}.login-note{font-size:16px;color:var(--green);line-height:2.6;margin-top:30px}.login-card{padding:32px}.full{width:100%}.login-card details{margin-top:24px;font-size:13px;color:var(--muted)}summary{cursor:pointer}.login-card p{font-size:14px}form{margin:0}.document p,.document strong{overflow-wrap:anywhere}@media(max-width:1150px){.sidebar{width:215px;padding:25px 18px}.workspace{margin-left:215px}.anonymous{margin:0}main{padding:28px 22px}.calc-layout{grid-template-columns:1fr}.fields{grid-template-columns:repeat(2,minmax(0,1fr))}.summary{margin-bottom:24px}.heading{align-items:start;flex-wrap:wrap}.stats{grid-template-columns:1fr 1fr}.stats section:last-child{grid-column:1/-1}.document{padding:30px}.login-layout{gap:30px}}@media(max-width:760px){.sidebar{position:static;width:auto;padding:18px 20px;border-right:0;border-bottom:1px solid var(--line)}.brand{font-size:23px}.brand span,.workspace-label{display:none}.company-name{font-size:14px;margin:8px 0}nav{display:flex;overflow:auto;gap:4px}nav a{white-space:nowrap;padding:8px;font-size:13px}.account{margin-top:8px;padding:0;display:flex;align-items:center;gap:14px}.account span{max-width:180px;font-size:11px}.account small{display:none}.account form{margin-left:auto}.account button{font-size:12px}.workspace{margin:0}.topbar{padding:12px 20px;font-size:10px}main{padding:25px 16px}h1{font-size:28px}.split{grid-template-columns:1fr;gap:0}.stats{gap:10px}.stats section{padding:17px}.stats strong{font-size:28px}.fields{gap:18px}.padded{padding:21px}.form-actions{align-items:stretch;flex-direction:column}.panel-head{padding:18px;flex-wrap:wrap}.panel-head span{font-size:12px}.document{padding:22px 17px}.doc-brand{font-size:19px}.doc-header{flex-direction:column}.doc-header>div:last-child{text-align:left}.doc-parties{gap:18px}.doc-terms{grid-template-columns:1fr}.doc-total{align-items:start;flex-direction:column}.doc-signature{flex-direction:column}.doc-parties p{font-size:12px}.login-layout{grid-template-columns:1fr;gap:22px;margin:15px auto}.login-layout h1{font-size:33px}.login-note{display:none}.login-card{padding:24px}.app-footer{padding:15px 20px}.heading .actions{width:100%}}@media(max-width:420px){.fields{grid-template-columns:1fr}.stats span{font-size:12px}.doc-parties{grid-template-columns:1fr}.document .table-wrap{margin-inline:-8px}}
.filter-bar{margin-bottom:24px}.selected{background:var(--pale);border-color:var(--green);color:var(--green)}.search-form{padding:0 24px 20px;display:flex;gap:12px;align-items:flex-end}.search-form label{flex:1;margin:0}.search-form input{margin-bottom:0}.search-form button{flex-shrink:0}.stats{grid-template-columns:repeat(4,minmax(0,1fr))}.stats a{font-size:12px}@media(max-width:1150px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stats section:last-child{grid-column:auto}}@media(max-width:420px){.search-form{display:block}.search-form button{margin-top:12px}}
.narrow{max-width:660px}.access-link{display:block;overflow-wrap:anywhere;font-size:14px;font-weight:500}.company-title{font-weight:600;font-size:18px}.account>a{display:block;margin-bottom:9px;font-weight:500}nav a[aria-current=page]{background:var(--pale);color:var(--green);font-weight:500}.sidebar nav{overflow-y:auto}.notice p{margin-top:8px}
/* Workspace system: restrained forest navigation, clear work surfaces. */
:root{--ink:#243c34;--green:#24694e;--muted:#6c7a73;--line:#e0e7e0;--bg:#f4f6f2;--pale:#edf3e9}
body{font-size:15px;letter-spacing:-.1px}.sidebar{background:#1d352c;color:#eef4e9;border:0;padding:30px 20px}.brand{color:#f4f6e9;letter-spacing:2.5px}.brand span{color:#b0c4b5;margin-top:2px}.workspace-label{color:#a8bcae;margin-top:32px;letter-spacing:1.6px}.company-name{font-size:16px;padding-bottom:21px;margin-bottom:12px;border-bottom:1px solid #3b5146}.sidebar nav{gap:3px;flex:1;min-height:80px}.sidebar nav a{color:#d3e0d4;display:flex;gap:12px;align-items:center;padding:10px 12px;font-size:14px;border-radius:8px}.sidebar nav a:hover{background:#2b4939}.sidebar nav a[aria-current=page]{background:#dce9ca;color:#20392c}.nav-symbol{font-size:19px;width:20px;text-align:center;line-height:1}.nav-caption{color:#9caf9f;letter-spacing:1.5px;font-size:10px;margin:22px 12px 6px}.account{padding:20px 10px 0;margin-top:15px;border-top:1px solid #3b5146}.account a,.account .quiet{color:#e1eadc}.account>a{display:flex;justify-content:space-between;align-items:center}.account small{color:#a9bdaf}.account>span{color:#c0d0c3;font-size:12px}.account .quiet{font-size:12px;padding-bottom:0}.topbar{background:#fff;padding-block:18px}.topbar>span{display:flex;align-items:center;gap:8px}.live-dot{width:6px;height:6px;border-radius:50%;background:#6b8e64;display:inline-block}h1{font-size:32px;font-weight:500;letter-spacing:-1.1px}h2{font-size:19px;letter-spacing:-.3px}.heading{margin-bottom:30px}.heading p{font-size:14px}.panel{border-radius:12px;box-shadow:0 3px 12px #203b2d03}.panel-head a{font-size:12px;font-weight:500}.stats section{border-radius:12px;padding:23px;position:relative}.stats span{font-size:12px}.stats strong{font-size:37px;line-height:1.2;margin:14px 0}.stats a{font-weight:500}.stats section:first-child{background:#e8eee0;border-color:#d9e4cc}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(290px,1fr);gap:24px}.flow-panel{padding:26px;background:#f0f3e9}.flow-panel h2{margin-top:10px}.workflow-steps{padding:0;list-style:none;margin:20px 0 0}.workflow-steps li+li{border-top:1px solid #d8e1d2}.workflow-steps a{display:flex;align-items:center;gap:14px;padding:14px 0;color:var(--ink)}.workflow-steps b{font-size:12px;color:#809176;font-weight:500}.workflow-steps span{flex:1;font-weight:500}.workflow-steps small{display:block;color:var(--muted);font-size:12px;font-weight:400;margin-top:2px}.empty-state{padding:36px;text-align:center;white-space:normal!important}.empty-state p{font-size:14px;max-width:420px;margin:10px auto 20px}.empty-state strong{font-size:17px}.empty-symbol{display:block;font-size:36px;color:#98ad8f}.work-row{display:flex;justify-content:space-between;gap:20px;padding:22px 25px;border-top:1px solid var(--line);color:var(--ink)}.work-row:hover{background:#f7f9f3;text-decoration:none}.work-row small{display:block;color:var(--muted);font-size:12px;margin-top:5px}.work-meta{text-align:right;flex-shrink:0}.overdue{background:#fbede1;color:#945226;border-color:#edd7c7}.setup-banner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 30px;background:#e6eddc;border:1px solid #d7e2cb;border-radius:12px;margin-bottom:26px;color:var(--ink)}.setup-banner:hover{text-decoration:none;background:#e0e9d2}.setup-banner h2{margin-top:7px}.setup-banner p{margin:7px 0 0;font-size:13px}.setup-banner .button{background:transparent;border-color:#b6c9a6;white-space:nowrap}.setup-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:24px;align-items:start}.setup-step{display:flex;align-items:center;gap:20px;padding:25px;color:var(--ink)}.setup-step+ .setup-step{border-top:1px solid var(--line)}.setup-step:hover{background:#f6f8f2;text-decoration:none}.setup-step>div{flex:1}.setup-step h2{font-size:17px}.setup-step p{margin:5px 0 0;font-size:13px}.step-number{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#f0f3ed;border:1px solid #dce4d6;font-size:13px;flex-shrink:0}.step-number.done{background:#deebd3;color:#306140}.document-filters{display:grid;grid-template-columns:minmax(0,1fr) 210px auto;gap:18px;padding:25px;border-bottom:1px solid var(--line);align-items:end}.document-filters label{margin:0}.pagination{display:flex;gap:25px;align-items:center;justify-content:center;padding:20px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}.skip-link{position:fixed;left:12px;top:-70px;z-index:10;padding:12px;background:#fff;border:2px solid var(--green)}.skip-link:focus{top:12px}
@media(min-width:1500px){main{padding-top:44px}.heading{margin-bottom:34px}}
@media(max-width:1100px){.dashboard-grid,.setup-layout{grid-template-columns:1fr}.setup-banner{padding:23px;align-items:start}.setup-banner .button{white-space:normal}.flow-panel{margin-bottom:24px}.workflow-steps{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.workflow-steps li+li{border:0}.document-filters{grid-template-columns:minmax(0,1fr) 170px}.document-filters button{grid-column:1/-1}}
@media(max-width:760px){.sidebar{padding:20px}.sidebar .brand{font-size:25px}.sidebar .company-name{border:0;padding:0;margin:9px 0 15px}.sidebar nav{overflow-x:auto;min-height:0;flex:initial;padding-bottom:5px}.sidebar nav a{padding:9px 11px;font-size:12px;gap:8px;flex-shrink:0}.nav-caption{display:none}.nav-symbol{font-size:16px;width:16px}.account{border:0;padding:8px 0 0;margin-top:0}.account>a{display:none}.account form{margin-left:auto}.account .quiet{padding:5px 0}.topbar>span:last-child{max-width:40%;text-align:right}h1{font-size:28px}.dashboard-grid{gap:0}.setup-banner{display:block;padding:22px}.setup-banner .button{margin-top:18px;width:100%}.setup-step{padding:22px 17px;gap:13px}.setup-step h2{font-size:16px}.document-filters{display:block;padding:20px}.document-filters label{margin-bottom:16px}.document-filters button{width:100%}.work-row{padding:20px;gap:12px}.work-row strong{font-size:14px}.work-meta .status{font-size:10px}.empty-state{padding:28px 20px}.stats strong{font-size:30px}.stats section{padding:19px 16px}.stats span{min-height:36px}.stats a{font-size:11px}.workflow-steps{display:block}.workflow-steps li+li{border-top:1px solid #d8e1d2}.flow-panel{padding:23px}}
.sidebar nav{scrollbar-width:thin;scrollbar-color:#647c6a transparent;align-content:start}.sidebar nav::-webkit-scrollbar{width:4px;height:4px}.sidebar nav::-webkit-scrollbar-thumb{background:#647c6a;border-radius:6px}.sidebar nav::-webkit-scrollbar-track{background:transparent}.company-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:0 25px 25px}.company-card{display:block;padding:23px;border:1px solid var(--line);border-radius:10px;color:var(--ink);transition:border-color .15s,background .15s}.company-card:hover{background:#f7f9f3;border-color:#9cb28f;text-decoration:none}.company-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.company-monogram{display:grid;place-items:center;width:39px;height:39px;border-radius:9px;background:#e5edda;color:#436344;font-size:18px;font-weight:500}.company-card h3{margin-top:22px;overflow-wrap:anywhere}.company-card p{font-size:13px;min-height:44px}.company-card-bottom{border-top:1px solid var(--line);padding-top:16px;display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.company-card-bottom b{font-size:18px;color:var(--green)}.suspended{background:#f9e9e2;color:#935b42;border-color:#eccdbf}.owner-guide{background:#eef2e6}.owner-guide h2{margin-top:12px}.owner-guide li{padding:16px 0}.owner-guide li span{font-size:14px;font-weight:500}.owner-guide li p{font-size:13px;margin:7px 0}.owner-guide .workflow-steps{display:block}.owner-stats section{padding-block:19px}.owner-stats strong{margin-bottom:0}
@media(max-width:1150px){.company-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.company-grid{grid-template-columns:1fr;padding:0 20px 20px}.company-card p{min-height:0}.owner-stats span{min-height:initial}}
@media(max-width:760px){.account>a{display:block;margin:0;font-size:12px}.account>a span{display:none}.account>span{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account{gap:12px}}
.recovery-row{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:22px;padding-block:12px}.recovery-row strong{overflow-wrap:anywhere}.recovery-row label{margin:0}.recovery-row .hint{margin-bottom:0}@media(max-width:1000px){.recovery-row{grid-template-columns:1fr}.recovery-row+.recovery-row{border-top:1px solid var(--line)}}
.check-line{display:flex;align-items:flex-start;gap:12px;font-weight:400;padding:18px;background:#f3f6ee;border-radius:8px}.check-line input{width:18px;min-width:18px;margin-top:4px}.billing-fields{border-block:1px solid var(--line);padding:17px 0;margin:20px 0}.billing-fields summary{font-weight:500;font-size:14px}.billing-fields .fields{grid-template-columns:repeat(2,minmax(0,1fr))}.document + .panel{margin-top:28px}td details{white-space:normal;min-width:150px;margin-top:10px}td details summary{font-size:12px;color:var(--green)}@media(max-width:760px){.billing-fields .fields{grid-template-columns:1fr}}
.stats .money-stat{font-size:30px;overflow-wrap:anywhere}@media(max-width:760px){.stats .money-stat{font-size:24px}}
.brand-upload-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.asset-preview{height:130px;border:1px dashed var(--line);border-radius:10px;margin:18px 0;display:grid;place-items:center;background:#f8faf5}.asset-preview img{max-width:90%;max-height:115px}.sidebar-logo{max-width:165px;max-height:60px;object-fit:contain;align-self:flex-start;margin-top:18px;background:white;border-radius:5px;padding:4px}.sort-item{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;margin-top:9px;padding:10px;background:#fff}.sort-item>span:nth-of-type(2){flex:1}.sort-item button{padding:5px 9px}.drag-handle{cursor:grab;color:var(--muted)}.dragging{opacity:.45}.home-blocks{display:flex;flex-direction:column}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}body[data-density=compact] main{padding-top:22px}body[data-density=compact] td{padding:9px 16px}body[data-density=compact] .padded{padding:18px}body[data-density=compact] .sidebar nav a{padding-block:7px}@media(max-width:950px){.brand-upload-grid{grid-template-columns:1fr}}
[hidden]{display:none!important}.code-input{font:13px/1.5 ui-monospace,monospace;min-height:350px}


/* INTERFACE — consolidated product styles */
/* Shared layout and accessible surface tokens. */
:root {
  --ink:#1d2939; --muted:#596779; --line:#dfe5ed; --bg:#f5f7fa;
  --paper:#fff; --pale:#edf3f1; --accent-hover:#184d39;
  --sidebar-width:260px;
}
body { font-size:14px; line-height:1.6; letter-spacing:0; color:var(--ink); }
button,.button,input,select,textarea { border-radius:8px; }
button,.button { min-height:40px; padding:9px 15px; font-size:13px; line-height:1.45; transition:background-color .14s,border-color .14s,box-shadow .14s; }
button:not(.primary):hover,.button:not(.primary):hover { background:var(--surface-hover); border-color:var(--control-line); }
.primary,.primary:hover { color:#fff; }
.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
button:disabled { opacity:.55; cursor:not-allowed; }
a { text-underline-offset:3px; }
:focus-visible { outline:3px solid #619acf; outline-offset:3px; }
input,select,textarea { font-size:14px; padding:10px 12px; border-color:var(--control-line); line-height:1.5; }
input:focus,select:focus,textarea:focus { border-color:#62869f; box-shadow:0 0 0 3px #4478a514; }
input[type=checkbox],input[type=radio] { accent-color:var(--green); }
label { color:var(--ink); font-weight:500; font-size:13px; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:1; }
h1 { font-size:30px; letter-spacing:-.8px; line-height:1.2; font-weight:600; }
h2 { font-size:18px; font-weight:500; letter-spacing:-.3px; }
h3 { font-size:15px; }
p { line-height:1.7; }
.eyebrow { color:var(--muted); font-size:10px; letter-spacing:1.35px; }
.heading { gap:20px; margin-bottom:25px; }
.heading p { max-width:680px; }
.sidebar { width:var(--sidebar-width); padding:24px 16px 16px; background:#17232f; color:#e9eef5; border-right:1px solid #263545; }
.sidebar .brand { font-size:25px; color:#fff; padding-inline:12px; letter-spacing:2px; }
.sidebar .brand span { color:#a3b3c5; font-size:11px; letter-spacing:.15px; }
.sidebar .workspace-label { color:#94a6bc; font-size:9px; margin:25px 12px 0; }
.sidebar .company-name { color:#f0f4f8; font-size:13px; margin:6px 12px 14px; padding-bottom:15px; border-color:#314152; }
.sidebar-logo { margin-left:12px; max-height:42px; }
.nav-search { margin:0 6px 14px; }
.nav-search input { background:#223140; color:#fff; border-color:#3b4c5e; font-size:12px; margin:0; padding:9px 11px; }
.nav-search input::placeholder { color:#b5c1d0; }
.sidebar nav { display:flex; flex-direction:column; gap:3px; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:#566c82 transparent; min-height:70px; flex:1; padding:0 4px 4px; }
.sidebar nav a { display:flex; align-items:center; gap:11px; flex:none; padding:10px 12px; min-height:40px; border:1px solid transparent; border-radius:7px; color:#c6d2df; font-size:13px; line-height:1.4; white-space:normal; transition:background-color .12s,color .12s; }
.sidebar nav a:hover { background:#26394a; color:#fff; text-decoration:none; }
.sidebar nav a[aria-current=page],.sidebar nav a[aria-current=page]:hover { background:#e8f3ee; color:#173c2a; border-color:#e8f3ee; font-weight:500; box-shadow:inset 3px 0 #5eae87; }
.nav-symbol { display:inline-grid; place-items:center; width:20px; flex:0 0 20px; font-size:17px; opacity:.9; }
.sidebar .account { display:block; border-top:1px solid #314152; padding:15px 12px 0; margin-top:14px; }
.sidebar .account>a { display:flex; color:#eff4fa; font-size:12px; margin:0 0 6px; }
.sidebar .account>span { display:block; color:#c1cedc; max-width:none; font-size:11px; }
.sidebar .account small { display:block; color:#a3b3c5; font-size:10px; }
.sidebar .account .quiet { color:#c1cedc; min-height:32px; font-size:11px; padding:6px 0 0; }
.sidebar .account .quiet:hover { background:transparent; color:#fff; }
.workspace { margin-left:var(--sidebar-width); min-width:0; }
.workspace.anonymous { margin-left:0; }
.topbar { position:sticky; top:0; z-index:4; min-height:56px; padding:12px 32px; background:var(--paper); backdrop-filter:blur(12px); border-color:var(--line); color:var(--muted); font-size:11px; gap:16px; align-items:center; }
.topbar>span:last-of-type { margin-left:auto; }
main { padding:30px 32px; max-width:1520px; }
.panel { background:var(--paper); border-color:var(--line); border-radius:12px; box-shadow:0 2px 5px #1d293903; margin-bottom:22px; }
.padded { padding:24px; }
.panel-head { padding:19px 22px; }
.panel-head span { color:var(--muted); }
.split,.dashboard-grid,.setup-layout { gap:22px; }
.fields { gap:20px; }
.stats { gap:16px; margin-bottom:24px; }
.stats section,.stats section:first-child { background:#fff; border-color:var(--line); border-radius:12px; padding:20px; }
.stats section:first-child { border-top:3px solid #4c9374; padding-top:18px; }
.stats strong,.stats .money-stat { color:var(--ink); font-variant-numeric:tabular-nums; font-size:30px; letter-spacing:-1px; margin:12px 0; overflow-wrap:anywhere; }
.stats span { color:var(--muted); font-size:12px; }
.stats a { font-size:12px; }
.table-wrap { overflow:auto; overscroll-behavior-x:contain; }
table { font-size:13px; }
th { background:var(--surface-soft); color:var(--muted); font-size:10px; letter-spacing:.65px; padding:12px 18px; white-space:nowrap; }
td { padding:15px 18px; vertical-align:top; font-variant-numeric:tabular-nums; }
td small { color:var(--muted); font-size:11px; line-height:1.5; }
tbody tr:hover { background:var(--surface-soft); }
td a { font-weight:500; }
.status { border-radius:6px; padding:4px 8px; background:#eef2f6; border-color:#dce4ec; color:#43576d; font-size:11px; }
.status.accepted,.status.issued { background:#eaf5ef; border-color:#c6e3d3; color:#225c3e; }
.status.draft { background:#fff6e5; border-color:#efdeb8; color:#765517; }
.status.overdue,.status.suspended { background:#fff0e9; border-color:#edccbd; color:#873c23; }
.setup-banner { background:var(--pale); border-color:var(--line); padding:22px 24px; }
.setup-banner:hover { background:var(--surface-hover); }
.setup-banner .button { background:#fff; border-color:var(--line); }
.flow-panel,.owner-guide { background:var(--surface-soft); }
.workflow-steps li+li { border-color:var(--line); }
.workflow-steps b { color:var(--muted); }
.company-monogram,.step-number { background:var(--surface-soft); color:var(--ink); border-color:var(--line); }
.company-card:hover,.setup-step:hover,.work-row:hover { background:var(--surface-soft); }
.notice { background:#edf8f1; border-color:#bdddc9; color:#235d3b; }
.error { background:#fff2f1; border-color:#ebc2bd; color:#8b3025; }
.info,.check-line { background:var(--surface-soft); border-color:var(--line); color:var(--ink); }
.check-line input { flex-shrink:0; }
.summary-price { background:#21384a; }
.summary-price span,.summary-price p { color:#d0dfeb; }
.search-form { gap:12px; }
.search-form button { margin:0; }
.app-footer { padding:8px 32px 25px; font-size:11px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.nav-toggle,.nav-close,.nav-backdrop { display:none; }
@media(min-width:901px) and (max-width:1150px) {
  :root { --sidebar-width:236px; }
  main { padding:26px 24px; }
  .sidebar { padding-inline:12px; }
  .fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:900px) {
  .workspace { margin-left:0; }
  .sidebar { position:static; width:auto; }
  body[data-enhanced=true] .sidebar { position:fixed; top:0; bottom:0; left:0; width:min(310px,86vw); z-index:30; transform:translateX(-101%); visibility:hidden; transition:transform .18s ease,visibility .18s; }
  body[data-enhanced=true].nav-open .sidebar { transform:translateX(0); visibility:visible; }
  .sidebar .brand span,.sidebar .workspace-label { display:block; }
  .sidebar nav { flex:1; min-height:60px; }
  .sidebar .account { margin-top:14px; }
  .sidebar .company-name { border-bottom:1px solid #314152; }
  .sidebar .account>a span { display:inline; }
  .nav-toggle { display:inline-flex; flex:none; min-height:36px; padding:7px 10px; font-size:13px; }
  .nav-close { display:block; position:absolute; right:13px; top:15px; padding:0; width:34px; min-height:34px; background:transparent; border:0; color:#dbe5ef; font-size:25px; }
  .nav-backdrop:not([hidden]) { display:block; position:fixed; inset:0; z-index:25; padding:0; border:0; border-radius:0; background:#101b2a77; backdrop-filter:blur(2px); }
  .nav-open { overflow:hidden; }
  .topbar { padding:10px 18px; gap:12px; }
  .topbar>span:last-of-type { display:none; }
  main { padding:25px 20px; }
  .heading { align-items:flex-start; flex-wrap:wrap; }
  .split,.dashboard-grid,.setup-layout { grid-template-columns:minmax(0,1fr); gap:0; }
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .calc-layout { grid-template-columns:minmax(0,1fr); }
  h1 { font-size:27px; }
  .app-footer { padding-inline:20px; }
}
@media(max-width:560px) {
  main { padding:22px 14px; }
  h1 { font-size:25px; }
  .heading { gap:16px; margin-bottom:20px; }
  .heading .actions { width:100%; }
  .heading .actions>* { flex:1; }
  .padded,.panel-head { padding:19px 17px; }
  .fields,.billing-fields .fields { grid-template-columns:minmax(0,1fr); gap:17px; }
  input,select,textarea { font-size:16px; }
  .stats { gap:10px; }
  .stats section,.stats section:first-child { padding:16px 13px; }
  .stats span { min-height:0; font-size:11px; }
  .stats strong,.stats .money-stat { font-size:25px; letter-spacing:-.7px; }
  .stats a { font-size:11px; }
  .work-row { flex-wrap:wrap; }
  .work-meta { text-align:left; }
  .setup-banner { padding:20px; }
  .search-form { padding-inline:17px; display:flex; flex-wrap:wrap; }
  .search-form label { flex:1 1 190px; }
  .search-form button { margin:0; }
  .company-grid { padding:0 17px 17px; }
  .doc-parties { grid-template-columns:1fr; }
  .doc-total strong { font-size:25px; white-space:normal; }
  .summary-row { flex-wrap:wrap; }
  .sort-item { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; }
}
/* Native controls need explicit sizing; otherwise color wells collapse on mobile. */
input[type=color] { height:44px; padding:5px; cursor:pointer; }
input[type=file] { padding:7px; font-size:12px; }
input[type=file]::file-selector-button { border:1px solid var(--control-line); border-radius:5px; background:var(--surface-soft); padding:7px 10px; color:var(--ink); margin-right:10px; cursor:pointer; }
.nav-backdrop:not([hidden]):hover { background:#101b2a77; border:0; }

.nav-empty { color:#c6d2df; font-size:12px; padding:0 12px; }

.cost-entry .fields{grid-template-columns:repeat(2,minmax(0,1fr))}
#costs{scroll-margin-top:80px}
@media(max-width:560px){.cost-entry .fields{grid-template-columns:1fr}}

.job-cost-layout{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
.cost-entry .fields label{display:flex;flex-direction:column;justify-content:space-between;gap:7px}.cost-entry .fields input{margin-top:0}
@media(max-width:900px){.job-cost-layout{grid-template-columns:1fr}}

/* Appearance: a company brand or personal palette drives every accent surface. */
:root {
 --brand:#24694e; --green:var(--brand); --accent-hover:color-mix(in srgb,var(--brand),black 18%);
 --surface-soft:color-mix(in srgb,var(--brand) 3%,#f8fafc); --surface-hover:color-mix(in srgb,var(--brand) 8%,#f8fafc);
 --bg:color-mix(in srgb,var(--brand) 4%,#f5f7fa); --pale:color-mix(in srgb,var(--brand) 10%,white);
 --control-line:#bfcbd8; --nav-bg:color-mix(in srgb,var(--brand) 30%,#131e2a);
 --nav-hover:color-mix(in srgb,var(--brand) 45%,#263545); --nav-active:color-mix(in srgb,var(--brand) 12%,white);
 --nav-active-text:color-mix(in srgb,var(--brand),black 20%); color-scheme:light;
}
:root[data-mode=dark] {
 --ink:#e6edf5; --muted:#a9b8ca; --line:#344456; --control-line:#53647a;
 --paper:#1a2635; --bg:color-mix(in srgb,var(--brand) 7%,#101821);
 --surface-soft:#202f40; --surface-hover:#293d51; --pale:color-mix(in srgb,var(--brand) 24%,#1a2635);
 --green:color-mix(in srgb,var(--brand) 38%,#e5f2ff); --nav-bg:color-mix(in srgb,var(--brand) 18%,#101821);
 --nav-active:color-mix(in srgb,var(--brand) 35%,#27374a); --nav-active-text:#f2f7ff; color-scheme:dark;
}
button,.button,input,select,textarea,.summary,.sort-item,.document,.stats section,.stats section:first-child {background:var(--paper);color:var(--ink)}
.primary,.preview-action {background:var(--brand);border-color:var(--brand);color:#fff}
.primary:hover {color:#fff;background:var(--accent-hover)}
.quiet{background:transparent}
.sidebar{background:var(--nav-bg)}
.sidebar nav a:hover{background:var(--nav-hover)}
.sidebar nav a[aria-current=page],.sidebar nav a[aria-current=page]:hover{background:var(--nav-active);color:var(--nav-active-text);border-color:transparent;box-shadow:inset 3px 0 var(--green)}
.nav-search input{background:var(--nav-hover);color:#fff}
.stats section:first-child{border-top-color:var(--brand)}
.summary-price,.preview-nav{background:var(--nav-bg);color:#fff}
.document th{background:var(--nav-bg);color:#fff}
.company-card-bottom b,.live-dot{color:var(--green)}
.live-dot{background:var(--green)}
.selected{background:var(--pale);border-color:var(--green);color:var(--green)}
.asset-preview{background:var(--surface-soft)}
.step-number.done{background:var(--pale);color:var(--green)}
.setup-banner .button{background:var(--paper)}
input:focus,select:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--pale)}
:focus-visible{outline-color:var(--green)}
.mode-switch{flex-shrink:0;margin-left:auto}.mode-switch button{min-height:34px;padding:6px 10px;font-size:12px}
.palette-picker{border:0;padding:0;margin:22px 0;display:flex;flex-wrap:wrap;gap:10px}
.palette-picker legend{font-size:13px;font-weight:500;margin-bottom:10px}
.palette-option{position:relative;display:flex;align-items:center;gap:9px;margin:0;padding:11px 13px;border:1px solid var(--control-line);border-radius:9px;cursor:pointer;background:var(--paper)}
.palette-option:has(input:checked){border-color:var(--green);box-shadow:0 0 0 2px var(--green);background:var(--pale)}
.palette-option input{width:16px;height:16px;margin:0;accent-color:var(--green)}
.swatch{width:20px;height:20px;border-radius:50%;background:var(--swatch,var(--brand));border:1px solid #ffffff40}
.theme-preview{display:grid;grid-template-columns:minmax(120px,1fr) 3fr;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:22px 0 30px;background:var(--bg)}
.theme-preview>div,.preview-nav{padding:24px}.preview-nav{font-size:12px;line-height:2.5}.preview-action{display:inline-block;padding:8px 12px;border-radius:7px;font-size:12px;font-weight:500}
:root[data-mode=dark] .status{background:#293a4d;border-color:#44576d;color:#dae5f1}
:root[data-mode=dark] .status.accepted,:root[data-mode=dark] .status.issued,:root[data-mode=dark] .notice{background:#193c31;border-color:#376454;color:#b5eed1}
:root[data-mode=dark] .status.draft{background:#40351e;border-color:#68562d;color:#f3d690}
:root[data-mode=dark] .status.overdue,:root[data-mode=dark] .status.suspended,:root[data-mode=dark] .error{background:#482b2c;border-color:#754748;color:#ffcbc5}
:root[data-mode=dark] .empty-symbol{color:var(--muted)}
@media(max-width:560px){.topbar{gap:8px}.topbar>span{font-size:9px}.mode-switch button{font-size:11px;padding:6px 8px}.theme-preview{grid-template-columns:1fr}.theme-preview>div,.preview-nav{padding:18px}.palette-option{flex:1 1 125px}}

.palette-forest{--swatch:#24694e}
form:has(input[name=accent][value="#24694e"]:checked) .theme-preview{--brand:#24694e;--nav-bg:color-mix(in srgb,#24694e 30%,#131e2a)}
.palette-ocean{--swatch:#214e70}
form:has(input[name=accent][value="#214e70"]:checked) .theme-preview{--brand:#214e70;--nav-bg:color-mix(in srgb,#214e70 30%,#131e2a)}
.palette-blue{--swatch:#245ac4}
form:has(input[name=accent][value="#245ac4"]:checked) .theme-preview{--brand:#245ac4;--nav-bg:color-mix(in srgb,#245ac4 30%,#131e2a)}
.palette-violet{--swatch:#7041a6}
form:has(input[name=accent][value="#7041a6"]:checked) .theme-preview{--brand:#7041a6;--nav-bg:color-mix(in srgb,#7041a6 30%,#131e2a)}
.palette-rose{--swatch:#a03262}
form:has(input[name=accent][value="#a03262"]:checked) .theme-preview{--brand:#a03262;--nav-bg:color-mix(in srgb,#a03262 30%,#131e2a)}
.palette-copper{--swatch:#914626}
form:has(input[name=accent][value="#914626"]:checked) .theme-preview{--brand:#914626;--nav-bg:color-mix(in srgb,#914626 30%,#131e2a)}
.palette-slate{--swatch:#42444c}
form:has(input[name=accent][value="#42444c"]:checked) .theme-preview{--brand:#42444c;--nav-bg:color-mix(in srgb,#42444c 30%,#131e2a)}

.palette-option:has(input[value=company]) .swatch{background:var(--company-brand)}

.brand-config .theme-preview{--brand:var(--company-brand);--nav-bg:color-mix(in srgb,var(--company-brand) 30%,#131e2a)}
.palette-original .swatch{background:var(--company-brand)}

/* ── Remeselný systém (Stitch návrh, 2026-09) ──────────────────────────────
   Pragmatic structural: ink sidebar, tonal layers, 1px structural lines,
   4px controls / 8px panels, status tones that never follow the theme. */
:root {
 --ink:#1a2421; --muted:#55615c; --line:#e2e8e5; --control-line:#c5d1cb;
 --paper:#fff; --bg:color-mix(in srgb,var(--brand) 3%,#f8faf9);
 --surface-soft:color-mix(in srgb,var(--brand) 5%,#f8faf9); --surface-hover:color-mix(in srgb,var(--brand) 9%,#f3f6f5);
 --pale:color-mix(in srgb,var(--brand) 10%,#fff); --tint:color-mix(in srgb,var(--brand) 7%,#fff);
 --nav-bg:color-mix(in srgb,var(--brand) 12%,#121b18); --nav-line:color-mix(in srgb,var(--brand) 18%,#26312d);
 --nav-hover:color-mix(in srgb,var(--brand) 22%,#1d2824); --nav-text:#c9d4cf; --nav-muted:#8fa29a;
 --nav-active:var(--brand); --nav-active-text:#fff;
 --shadow-1:0 1px 3px rgba(21,32,28,.04); --shadow-8:0 10px 25px -5px rgba(21,32,28,.15),0 4px 6px -2px rgba(21,32,28,.05);
 --r-control:4px; --r-panel:8px;
 --font:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
:root[data-mode=dark] {
 --ink:#e3ece8; --muted:#a3b3ac; --line:#2c3935; --control-line:#475650;
 --paper:#18221f; --bg:color-mix(in srgb,var(--brand) 6%,#0f1614);
 --surface-soft:#1d2925; --surface-hover:#24322d; --pale:color-mix(in srgb,var(--brand) 26%,#18221f); --tint:color-mix(in srgb,var(--brand) 16%,#18221f);
 --green:color-mix(in srgb,var(--brand) 40%,#e4f5ec); --nav-bg:color-mix(in srgb,var(--brand) 8%,#0b110f); --nav-line:#222d29;
 --nav-hover:#1c2723; --nav-active:color-mix(in srgb,var(--brand) 80%,#0b110f);
 --shadow-1:0 1px 3px rgba(0,0,0,.3);
}
body { font-family:var(--font); font-size:14px; line-height:20px; background:var(--bg); color:var(--ink); }
button,.button,input,select,textarea { border-radius:var(--r-control); }
button,.button { min-height:38px; padding:8px 14px; font-size:13px; font-weight:500; border-color:var(--control-line); }
button:not(.primary):hover,.button:not(.primary):hover { background:var(--surface-hover); }
input,select,textarea { min-height:38px; padding:8px 12px; border-color:var(--control-line); }
input:focus,select:focus,textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent); }
:focus-visible { outline:3px solid var(--brand); outline-offset:2px; }
:root[data-mode=dark] :focus-visible { outline-color:var(--green); }
.quiet,.quiet:hover { border:0; background:transparent; min-height:0; }
h1 { font-size:30px; line-height:38px; font-weight:600; letter-spacing:-.02em; }
h2 { font-size:18px; line-height:24px; font-weight:500; letter-spacing:-.01em; }
h3 { font-size:15px; line-height:20px; font-weight:500; }
p { line-height:1.55; }
.eyebrow { font-size:10px; line-height:14px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--green); }
.eyebrow.dot::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:7px; vertical-align:1px; }
.heading { align-items:flex-end; }
.heading h1 { margin:6px 0 8px; }
.heading p { font-size:15px; line-height:22px; }
.heading .actions { display:flex; flex-wrap:wrap; gap:10px; }

/* Sidebar */
.sidebar { background:var(--nav-bg); color:var(--nav-text); border-right:1px solid var(--nav-line); padding:0 0 12px; }
.sidebar .brand .brand-mark { display:grid; font-size:18px; color:#fff; margin:0; }
.sidebar .brand { display:flex; align-items:center; gap:12px; padding:18px 20px; margin:0; border-bottom:1px solid var(--nav-line); font-size:20px; letter-spacing:.06em; color:#fff; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:var(--r-control); background:var(--brand); color:#fff; font-size:18px; letter-spacing:0; }
:root[data-mode=dark] .brand-mark { background:var(--nav-active); }
.sidebar .brand .brand-text { display:flex; flex-direction:column; margin:0; color:#fff; font-size:19px; line-height:1.1; font-weight:600; letter-spacing:.06em; }
.sidebar .brand-text span { color:var(--nav-muted); font-size:10px; font-weight:500; letter-spacing:.04em; margin-top:3px; }
.workspace-box { margin:18px 16px 12px; }
.sidebar .workspace-label { display:inline-block; margin:0 0 8px; padding:2px 6px; border:1px solid var(--nav-line); border-radius:3px; color:var(--nav-text); font-size:9px; letter-spacing:.1em; font-weight:600; }
.company-row-nav { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--nav-line); border-radius:var(--r-control); background:var(--nav-hover); }
.company-mark { display:grid; place-items:center; width:24px; height:24px; flex:none; border-radius:3px; background:var(--brand); color:#fff; font-size:12px; font-weight:600; }
.sidebar .company-row-nav .company-name { margin:0; padding:0; border:0; color:#f2f6f4; font-size:13px; line-height:18px; font-weight:500; }
.sidebar .sidebar-logo { margin:0; max-height:24px; max-width:60px; padding:2px; border-radius:3px; }
.nav-search { position:relative; margin:0 16px 16px; display:block; }
.nav-search input { width:100%; min-height:36px; margin:0; padding:8px 64px 8px 12px; background:var(--nav-hover); border-color:var(--nav-line); color:#fff; font-size:12px; }
.nav-search input::placeholder { color:var(--nav-muted); }
.nav-search kbd { position:absolute; right:8px; top:50%; transform:translateY(-50%); padding:1px 5px; border:1px solid var(--nav-line); border-radius:3px; background:var(--nav-bg); color:var(--nav-text); font:500 10px/16px var(--font); pointer-events:none; }
.sidebar nav { gap:2px; padding:0 10px 8px; }
.sidebar nav a { gap:12px; min-height:36px; padding:8px 12px; border:0; border-radius:var(--r-control); color:var(--nav-text); font-size:14px; font-weight:500; }
.sidebar nav a:hover { background:var(--nav-hover); color:#fff; }
.sidebar nav a[aria-current=page],.sidebar nav a[aria-current=page]:hover { background:var(--nav-active); color:var(--nav-active-text); font-weight:600; box-shadow:none; }
.nav-symbol { font-size:14px; opacity:.85; }
.sidebar .nav-empty { color:var(--nav-muted); padding:0 26px; }
.sidebar .account { display:grid; grid-template-columns:34px minmax(0,1fr) auto; grid-template-areas:"av txt txt" "out out loc"; gap:8px 10px; align-items:center; margin:12px 0 0; padding:14px 16px 0; border-top:1px solid var(--nav-line); font-size:12px; }
.avatar,.topbar-avatar span { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--pale); color:var(--nav-active-text); font-size:11px; font-weight:600; letter-spacing:.02em; }
.sidebar .account .avatar { grid-area:av; display:grid; background:var(--nav-active); color:#fff; }
.sidebar .account-text { grid-area:txt; min-width:0; }
.sidebar .account-text>a { display:flex; justify-content:space-between; margin:0; color:#fff; font-size:13px; font-weight:500; }
.sidebar .account-text>span { display:block; color:var(--nav-text); font-size:11px; line-height:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar .account-text small { display:block; color:var(--nav-muted); font-size:10px; line-height:14px; }
.sidebar .account form { grid-area:out; margin:0; }
.sidebar .account .quiet { display:inline-flex; gap:6px; padding:0; color:var(--nav-text); font-size:12px; font-weight:500; white-space:nowrap; min-height:0; }
.sidebar .account .quiet:hover { color:#fff; }
.sidebar .account .locale { grid-area:loc; display:block; color:var(--nav-muted); font-size:10px; font-weight:600; letter-spacing:.08em; white-space:nowrap; }

/* Topbar */
.topbar { min-height:60px; padding:10px 32px; background:var(--paper); border-bottom:1px solid var(--line); color:var(--ink); font-size:13px; gap:18px; box-shadow:none; }
.topbar .env { color:var(--green); font-weight:500; }
.topbar .context { color:var(--muted); margin-left:0; }
.topbar .context::before { content:'•'; margin-right:14px; color:var(--control-line); }
.topbar>span:last-of-type { margin-left:0; }
.topbar-tools { margin-left:auto; display:flex; align-items:center; gap:10px; }
.topbar-tools .mode-switch { margin:0; }
.topbar-tools button { min-height:36px; padding:6px 12px; font-size:13px; font-weight:500; background:var(--paper); }
.topbar-avatar { display:block; border-radius:50%; text-decoration:none; }
.topbar-avatar span { background:var(--brand); color:#fff; }
.topbar-avatar:hover { text-decoration:none; opacity:.9; }
main { padding:32px 32px 40px; }

/* Surfaces */
.panel { border:1px solid var(--line); border-radius:var(--r-panel); box-shadow:var(--shadow-1); background:var(--paper); }
.panel-head { padding:18px 22px; border-bottom:1px solid var(--line); }
.panel-head>div>span,.panel-head>div>p { display:block; margin:3px 0 0; color:var(--muted); font-size:12px; line-height:16px; }
.panel-head a { font-size:13px; font-weight:500; white-space:nowrap; }
.panel-head.bare { padding:0; border:0; margin-bottom:18px; }
.panel-head .table-wrap,.panel>.table-wrap { border-top:0; }
.notice { border-radius:var(--r-control); background:#eaf5ef; border-color:#b8e2cd; color:#1b5a40; }
.error { border-radius:var(--r-control); background:#fdf2f2; border-color:#f8b4b4; color:#991b1b; }
.info,.check-line { border-radius:var(--r-control); background:var(--tint); border-color:color-mix(in srgb,var(--brand) 16%,var(--line)); }

/* Setup banner */
.setup-banner { display:flex; align-items:center; gap:18px; padding:18px 22px; margin-bottom:22px; border:1px solid color-mix(in srgb,var(--brand) 14%,var(--line)); border-radius:var(--r-panel); background:var(--tint); color:var(--ink); }
.setup-banner:hover { background:var(--pale); text-decoration:none; }
.setup-banner>div { flex:1; min-width:0; }
.setup-banner h2 { margin:0; font-size:14px; line-height:20px; }
.setup-banner p { margin:3px 0 10px; font-size:13px; }
.banner-icon { display:grid; place-items:center; width:32px; height:32px; flex:none; border:2px solid var(--green); border-radius:50%; color:var(--green); font-weight:600; }
.banner-link { color:var(--green); font-weight:500; white-space:nowrap; }
.setup-banner progress { display:block; width:210px; max-width:100%; height:5px; border:0; border-radius:3px; overflow:hidden; background:color-mix(in srgb,var(--brand) 16%,var(--line)); appearance:none; }
.setup-banner progress::-webkit-progress-bar { background:color-mix(in srgb,var(--brand) 16%,var(--line)); }
.setup-banner progress::-webkit-progress-value { background:var(--brand); }
.setup-banner progress::-moz-progress-bar { background:var(--brand); }

/* Stat tiles */
.stats section,.stats section:first-child { border:1px solid var(--line); border-top:1px solid var(--line); border-radius:var(--r-panel); padding:18px; background:var(--paper); box-shadow:var(--shadow-1); display:flex; flex-direction:column; }
.stats .stat-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.stats .stat-head span { font-size:10px; line-height:14px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.stats .stat-head i { display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:var(--r-control); background:var(--pale); color:var(--green); font-style:normal; font-size:15px; }
.stats strong,.stats .money-stat { font-size:28px; line-height:34px; letter-spacing:-.03em; font-weight:600; margin:14px 0 14px; color:var(--ink); }
.stats .stat-foot { margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-control); background:var(--surface-soft); color:var(--muted); font-size:12px; font-weight:500; text-decoration:none; }
.stats .stat-foot:hover { background:var(--surface-hover); text-decoration:none; }
.stats .stat-foot span { display:inline; font-size:12px; color:var(--muted); min-height:0; }
.stats .stat-foot b { color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.stats .stat-foot.is-overdue { background:#fdf2f2; }
.stats .stat-foot.is-overdue span,.stats .stat-foot.is-overdue b { color:#991b1b; }
.stats .stat-foot.is-overdue span::before { content:'●'; margin-right:5px; font-size:9px; }
.tag-draft { padding:1px 6px; border:1px solid #f0d59e; border-radius:3px; background:#fff9eb; color:#8c5b00!important; }

/* Workflow steps */
.work-panel { padding:24px; }
.work-panel .panel-head.bare p { font-size:13px; }
.workflow-steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; list-style:none; padding:0; margin:0 0 28px; }
.workflow-steps li+li { border:0; }
.workflow-steps a { text-align:left; align-items:stretch; display:flex; flex-direction:column; gap:2px; height:100%; padding:10px 10px 8px; border-radius:var(--r-control); background:var(--tint); color:var(--ink); text-decoration:none; position:relative; }
.workflow-steps a::after { content:'→'; position:absolute; right:10px; top:9px; color:var(--muted); }
.workflow-steps a:hover { background:var(--pale); text-decoration:none; }
.workflow-steps b { font-size:10px; line-height:14px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.workflow-steps span { font-size:16px; line-height:22px; font-weight:500; flex:none; }
.workflow-steps small { display:flex; justify-content:space-between; align-items:center; gap:6px; margin-top:6px; color:var(--muted); font-size:12px; font-weight:400; }
.workflow-steps em { font-style:normal; font-weight:500; font-size:11px; color:var(--ink); background:var(--paper); padding:1px 7px; border-radius:3px; font-variant-numeric:tabular-nums; }
.workflow-steps .current a { background:var(--brand); color:#fff; }
.workflow-steps .current b,.workflow-steps .current small,.workflow-steps .current a::after { color:color-mix(in srgb,#fff 80%,var(--brand)); }
.workflow-steps .current em { background:color-mix(in srgb,#000 22%,var(--brand)); color:#fff; }
.work-head { margin-bottom:12px; }
.work-head h3 { margin:0; display:flex; gap:8px; align-items:center; }
.work-head h3 span { color:var(--green); }
.work-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.work-card { display:flex; flex-direction:column; gap:3px; padding:14px; border-radius:var(--r-panel); background:var(--tint); color:var(--ink); text-decoration:none; }
.work-card:hover { background:var(--pale); text-decoration:none; }
.work-card-top { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; }
.work-card-top small,.code { font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--muted); }
.work-card>strong { font-size:15px; line-height:20px; }
.work-card>small { color:var(--muted); font-size:12px; }
.work-card-foot { display:flex; justify-content:space-between; align-items:center; margin-top:12px; padding:9px 11px; border-radius:var(--r-control); background:var(--paper); }
.work-card-foot span { font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.work-card-foot b { font-variant-numeric:tabular-nums; }
.work-card-foot b.late { color:#991b1b; }
.work-cards .empty-state { grid-column:1/-1; background:var(--surface-soft); border-radius:var(--r-panel); }
.home-blocks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-flow:row dense; column-gap:22px; }
.home-blocks>.home-block { grid-column:1/-1; }
.home-blocks>.home-block.half { grid-column:auto; }

/* Tables */
table { font-size:13px; }
th { background:var(--tint); color:var(--ink); font-size:11px; line-height:14px; font-weight:500; letter-spacing:.02em; text-transform:none; padding:11px 16px; border-bottom:1px solid var(--line); }
td { padding:12px 16px; border-color:var(--line); vertical-align:middle; }
td strong { display:block; font-weight:500; }
td small { display:block; }
td .code { display:block; }
th.num,td.num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
tbody tr:hover { background:var(--surface-soft); }

/* Status badges: fixed semantic tones, independent of theme. */
.status { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border:1px solid #cbd8d2; border-radius:3px; background:#edf2f0; color:#374a44; font-size:11px; font-weight:500; line-height:16px; white-space:nowrap; }
.status::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.status.accepted,.status.issued,.status.active,.status.done,.status.paid { background:#eaf5ef; border-color:#b8e2cd; color:#1b5a40; }
.status.draft,.status.planned { background:#fff9eb; border-color:#f0d59e; color:#8c5b00; }
.status.overdue,.status.suspended,.status.cancelled { background:#fdf2f2; border-color:#f8b4b4; color:#991b1b; }
:root[data-mode=dark] .status { background:#26332f; border-color:#3d4d47; color:#d3e0da; }
:root[data-mode=dark] .status.accepted,:root[data-mode=dark] .status.issued,:root[data-mode=dark] .status.active,:root[data-mode=dark] .status.done,:root[data-mode=dark] .status.paid { background:#173a2c; border-color:#2f6450; color:#b5eed1; }
:root[data-mode=dark] .status.draft,:root[data-mode=dark] .status.planned,:root[data-mode=dark] .tag-draft { background:#3d321a; border-color:#66542a; color:#f3d690!important; }
:root[data-mode=dark] .status.overdue,:root[data-mode=dark] .status.suspended,:root[data-mode=dark] .status.cancelled,:root[data-mode=dark] .stats .stat-foot.is-overdue { background:#452729; border-color:#754748; color:#ffcbc5; }
:root[data-mode=dark] .stats .stat-foot.is-overdue span,:root[data-mode=dark] .stats .stat-foot.is-overdue b,:root[data-mode=dark] .work-card-foot b.late { color:#ffcbc5; }
:root[data-mode=dark] .notice { background:#173a2c; border-color:#2f6450; color:#b5eed1; }
:root[data-mode=dark] .error { background:#452729; border-color:#754748; color:#ffcbc5; }

/* Document preview and calculation summary */
.document { border-radius:var(--r-panel); }
.document th { background:var(--tint); color:var(--ink); }
:root[data-mode=dark] .document th { background:var(--surface-soft); }
.summary-price { background:var(--tint); color:var(--ink); border:1px solid color-mix(in srgb,var(--brand) 14%,var(--line)); border-radius:var(--r-panel); }
.summary-price span,.summary-price p { color:var(--muted); }
.summary-price strong { color:var(--green); }

/* Footer */
.app-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px 24px; padding:12px 32px; border-top:1px solid var(--line); background:var(--tint); color:var(--muted); font-size:12px; }
.footer-links { display:flex; gap:18px; }
.footer-links a { color:var(--ink); font-weight:500; }

/* Filter chips (Zákazky) */
.filter-bar { display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; padding:16px 18px; }
.segmented { display:inline-flex; flex-wrap:wrap; gap:2px; padding:3px; border-radius:var(--r-control); background:var(--tint); }
.segmented a { padding:7px 14px; border-radius:3px; color:var(--ink); font-size:13px; font-weight:500; text-decoration:none; }
.segmented a:hover { background:var(--pale); text-decoration:none; }
.segmented a[aria-current=true] { background:var(--brand); color:#fff; font-weight:500; }
.chips { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.chips>span { margin-right:6px; font-size:10px; font-weight:600; letter-spacing:.08em; color:var(--muted); }
.chips a { padding:4px 11px; border:1px solid var(--line); border-radius:999px; background:var(--surface-soft); color:var(--ink); font-size:12px; font-weight:500; text-decoration:none; }
.chips a:hover { background:var(--surface-hover); text-decoration:none; }
.chips a[aria-current=true] { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.member-filter { display:flex; align-items:flex-end; gap:8px; margin-left:auto; }
.member-filter label { margin:0; font-size:12px; }
.member-filter select { min-width:200px; margin-top:4px; }
.late-flag { display:inline-block; margin-top:3px; padding:1px 6px; border-radius:3px; background:#fdf2f2; color:#991b1b; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
:root[data-mode=dark] .late-flag { background:#452729; color:#ffcbc5; }
.table-foot { display:flex; justify-content:space-between; gap:12px; padding:12px 18px; border-top:1px solid var(--line); background:var(--tint); color:var(--muted); font-size:12px; }

@media(max-width:1150px) {
  .workflow-steps { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:900px) {
  .sidebar { padding-bottom:12px; }
  .topbar { padding:10px 16px; }
  .topbar .context { display:none; }
  .topbar-tools .quick-search span+* { display:none; }
  .home-blocks { grid-template-columns:minmax(0,1fr); }
  .home-blocks>.home-block.half { grid-column:1/-1; }
  .member-filter { margin-left:0; }
}
@media(max-width:560px) {
  main { padding:22px 16px 32px; }
  h1 { font-size:24px; line-height:32px; letter-spacing:-.01em; }
  .stats strong,.stats .money-stat { font-size:22px; line-height:28px; }
  .stats .stat-foot { flex-wrap:wrap; }
  .workflow-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .work-panel { padding:18px 16px; }
  .work-head { flex-wrap:wrap; }
  .setup-banner { flex-wrap:wrap; padding:16px; }
  .setup-banner .banner-icon { display:none; }
  .topbar-tools { gap:6px; }
  .topbar-tools .quick-search { display:none; }
  .topbar-avatar { display:none; }
  .app-footer { padding:12px 16px; }
  .member-filter { width:100%; flex-wrap:wrap; }
  .member-filter select { min-width:0; }
  .member-filter label { flex:1 1 180px; }
}

/* ── Responzivita: telefón (≤560), tablet na výšku (≤900), tablet na šírku (901–1150) ──
   Každá zmena vzhľadu musí fungovať na všetkých troch šírkach. */
.tabbar { display:none; }
.mode-icon { font-size:14px; }

/* Tables that do not fit on phones/tablets become labelled cards (set by workspace.js). */
table.stacked,table.stacked tbody,table.stacked tr,table.stacked td { display:block; width:100%; }
table.stacked thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
table.stacked tr { padding:12px 16px; border-bottom:1px solid var(--line); }
table.stacked tr:last-child { border-bottom:0; }
table.stacked td { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:5px 0; border:0; text-align:right; white-space:normal; }
table.stacked td::before { content:attr(data-label); flex:0 1 42%; text-align:left; color:var(--muted); font-size:11px; font-weight:500; letter-spacing:.02em; }
table.stacked td>* { min-width:0; }
table.stacked td[data-label=""]::before { display:none; }
table.stacked td[data-label=""] { justify-content:flex-start; text-align:left; }
table.stacked td:first-child { display:block; text-align:left; padding-top:0; font-weight:500; }
table.stacked td:first-child::before { display:block; margin-bottom:2px; }
table.stacked td:last-child:has(a,button,form) { justify-content:flex-end; padding-top:8px; }
table.stacked td:last-child:has(a,button,form)::before { display:none; }
table.stacked td.empty-state { display:block; text-align:center; }
table.stacked td.empty-state::before { display:none; }
table.stacked td form { margin:0; }
table.stacked tbody tr:hover { background:transparent; }

/* Touch devices get 44px targets regardless of width. */
@media(pointer:coarse) {
  button,.button,input,select { min-height:44px; }
  .sidebar nav a { min-height:44px; }
  .segmented a,.chips a { padding-block:10px; }
  .topbar-tools button { min-height:40px; }
}

@media(min-width:901px) and (max-width:1150px) {
  main { padding:26px 24px 36px; }
  .topbar { padding-inline:24px; }
  .topbar .context { display:none; }
  .work-cards { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
  .home-blocks { column-gap:18px; }
}

@media(max-width:900px) {
  .topbar { position:sticky; top:0; min-height:56px; gap:10px; }
  .topbar .env { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nav-toggle { background:var(--paper); }
  .heading { align-items:flex-start; }
  .heading .actions { width:100%; }
  .filter-bar { gap:12px; }
  .filter-bar .segmented { width:100%; }
  .filter-bar .segmented a { flex:1; text-align:center; }
  .member-filter { width:100%; }
  .member-filter label { flex:1; }
  .member-filter select { width:100%; min-width:0; }
  .chips { flex-wrap:nowrap; overflow-x:auto; width:100%; padding-bottom:2px; scrollbar-width:none; }
  .chips::-webkit-scrollbar { display:none; }
  .chips a { flex:none; }
  .panel-head { flex-wrap:wrap; }
  .work-cards { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
  .footer-links { flex-wrap:wrap; }
}

/* Phones: compact topbar, bottom tab bar, full-width actions. */
@media(max-width:700px) {
  body[data-enhanced=true] .tabbar { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); position:fixed; left:0; right:0; bottom:0; z-index:20; padding:4px 4px calc(4px + env(safe-area-inset-bottom)); background:var(--paper); border-top:1px solid var(--line); box-shadow:0 -4px 14px rgba(21,32,28,.06); }
  .tabbar a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:52px; padding:4px 2px; border-radius:var(--r-control); color:var(--muted); font-size:10px; font-weight:500; line-height:12px; text-decoration:none; text-align:center; }
  .tabbar a span { font-size:18px; line-height:20px; }
  .tabbar a:hover { text-decoration:none; background:var(--surface-soft); }
  .tabbar a[aria-current=page] { color:var(--green); background:var(--tint); }
  body[data-enhanced=true] .workspace { padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
  body.nav-open .tabbar { visibility:hidden; }
  .topbar { padding:8px 12px; padding-top:max(8px, env(safe-area-inset-top)); }
  .nav-toggle span { display:none; }
  .nav-toggle { width:40px; padding:0; justify-content:center; font-size:18px; }
  .mode-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .topbar-tools .mode-switch button { width:40px; padding:0; justify-content:center; }
}

@media(max-width:560px) {
  main { padding:20px 14px 28px; }
  .topbar .env { font-size:12px; }
  .topbar-avatar { display:block; }
  .topbar-avatar span { width:32px; height:32px; }
  .heading .actions { flex-direction:column; }
  .heading .actions>* { width:100%; }
  .setup-banner>div { flex:1 1 100%; }
  .setup-banner progress { width:100%; }
  .banner-link { flex:1 1 100%; }
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .stats section,.stats section:first-child { padding:14px 12px; }
  .stats .stat-head i { display:none; }
  .stats .stat-foot { flex-direction:column; align-items:flex-start; gap:2px; padding:7px 9px; }
  .stats .stat-foot span { font-size:11px; }
  .workflow-steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .workflow-steps li:last-child { grid-column:1/-1; }
  .workflow-steps span { font-size:15px; }
  .work-cards { grid-template-columns:minmax(0,1fr); }
  .work-head { flex-direction:column; align-items:flex-start; gap:6px; }
  .panel-head { padding:16px; }
  .panel-head>a { font-size:13px; }
  .filter-bar { padding:14px; }
  .app-footer { flex-direction:column; padding:14px 16px; }
  table.stacked tr { padding:12px 14px; }
}
.cell-value { display:contents; }
table.stacked .cell-value { display:block; }


/* STITCH — consolidated product styles */
/* FABRIQ precision workspace. Adapted from the supplied Stitch reference;
   uses real Manager routes/data and keeps the existing server-rendered forms. */
:root {
  --ink:#142135; --muted:#627187; --line:#e1e8f3; --control-line:#cbd6e8;
  --paper:#fff; --bg:#f4f7fd; --surface-soft:#f0f4fc; --surface-hover:#e9f0fd;
  --pale:color-mix(in srgb,var(--brand) 9%,#f7f9ff); --tint:#eef3fc;
  --nav-bg:#172335; --nav-line:#35455c; --nav-hover:#27374f; --nav-text:#e0e8f7; --nav-muted:#a8b7cf;
  --nav-active:#315ff0; --nav-active-text:#fff; --shell-blue:#245bf5; --shell-teal:#217c8d; --shell-yellow:#f5df54;
  --r-control:14px; --r-panel:24px;
  --shadow-1:0 14px 35px -24px rgba(22,42,82,.42),0 3px 10px rgba(22,42,82,.025);
  --shadow-card:0 24px 44px -28px rgba(22,42,82,.48);
  --font:'Plus Jakarta Sans','Avenir Next',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color-scheme:light;
}
:root[data-mode=dark] {
  --ink:#eef4ff; --muted:#aab9d0; --line:#34435a; --control-line:#53657e;
  --paper:#1b2739; --bg:#101a2a; --surface-soft:#25344a; --surface-hover:#2f425b;
  --pale:color-mix(in srgb,var(--brand) 18%,#26364a); --tint:#233247;
  --nav-bg:#101827; --nav-line:#334258; --nav-hover:#26364d; --nav-text:#e5edfb; --nav-muted:#aab9d0;
  --shadow-1:0 14px 35px -24px rgba(0,0,0,.8); --shadow-card:0 24px 44px -28px rgba(0,0,0,.8);
  color-scheme:dark;
}
html { scroll-behavior:smooth; }
body { min-width:320px; font-family:var(--font); color:var(--ink); background:radial-gradient(circle at 4% 4%,rgba(209,228,255,.66),transparent 35%),radial-gradient(circle at 90% 98%,rgba(213,235,221,.55),transparent 36%),var(--bg); background-attachment:fixed; }
:root[data-mode=dark] body { background:radial-gradient(circle at 0 0,rgba(41,76,134,.22),transparent 40%),var(--bg); }
body,button,input,select,textarea { font-family:var(--font); }
button,.button { border-radius:999px; padding:10px 18px; min-height:42px; font-weight:500; }
button:hover,.button:hover { transform:translateY(-1px); }
button:active,.button:active { transform:translateY(0); }
button,.button,.panel,.work-card,.spotlight-card { transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease; }
.primary,.primary:hover { background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 12px 24px -16px var(--brand); }
.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); box-shadow:0 18px 28px -17px var(--brand); }
input,select,textarea { border-radius:14px; background:var(--surface-soft); border:1px solid var(--control-line); }
input:focus,select:focus,textarea:focus { background:var(--paper); }
:focus-visible { outline:3px solid var(--shell-blue); outline-offset:3px; }
h1 { font-size:clamp(27px,2.3vw,38px); line-height:1.18; letter-spacing:-.035em; }
h2 { letter-spacing:-.025em; }
.eyebrow { color:var(--shell-blue); font-weight:600; letter-spacing:.1em; }
.heading { align-items:center; margin-bottom:28px; }
.heading p { font-size:14px; max-width:720px; }
.heading .actions { gap:9px; }

/* The full section list remains available as a focus-trapped drawer. */
.workspace { margin-left:var(--sidebar-width); min-width:0; }
.workspace.anonymous { margin-left:0; }
@media(max-width:900px) { .workspace:not(.anonymous) { margin-left:0; } }
.sidebar { background:var(--nav-bg); border:1px solid var(--nav-line); border-radius:24px; box-shadow:0 25px 70px rgba(11,22,37,.28); }
.sidebar .brand { display:block; height:67px; padding:0 18px; overflow:hidden; }
.sidebar .brand-logo { display:block; width:220px; height:67px; object-fit:contain; }
.sidebar .workspace-box { margin-top:12px; }
.sidebar nav a { border-radius:12px; }
.sidebar nav a[aria-current=page],.sidebar nav a[aria-current=page]:hover { background:var(--nav-active); color:var(--nav-active-text); box-shadow:0 10px 20px -12px var(--nav-active); }
.sidebar .company-row-nav { border-radius:14px; }
.sidebar .nav-search input { border-radius:12px; }
body[data-enhanced=true] .sidebar { position:fixed; top:12px; bottom:12px; left:12px; width:min(322px,calc(100vw - 32px)); z-index:31; padding:22px 10px 16px; transform:translateX(calc(-100% - 24px)); visibility:hidden; transition:transform .22s ease,visibility .22s; }
body[data-enhanced=true].nav-open .sidebar { transform:translateX(0); visibility:visible; }
body[data-enhanced=true] .workspace { margin-left:0; }
.nav-toggle { display:none; flex:none; align-items:center; gap:7px; border:0; background:var(--tint); color:var(--ink); font-size:13px; }
body[data-enhanced=true] .nav-toggle { display:inline-flex; }
.nav-close { display:block; position:absolute; right:18px; top:16px; width:36px; min-height:36px; padding:0; border:1px solid var(--nav-line); background:var(--nav-hover); color:#fff; font-size:22px; }
.nav-backdrop:not([hidden]) { display:block; position:fixed; inset:0; z-index:30; border:0; border-radius:0; background:rgba(13,25,42,.48); backdrop-filter:blur(5px); }
.nav-backdrop:not([hidden]):hover { background:rgba(13,25,42,.48); }
.nav-open { overflow:hidden; }

/* Compact horizontal command surface inspired by the Stitch reference. */
.topbar { position:sticky; top:0; z-index:25; display:flex; gap:18px; min-height:76px; padding:10px clamp(16px,3vw,48px); background:color-mix(in srgb,var(--paper) 92%,transparent); backdrop-filter:blur(18px); border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent); box-shadow:0 5px 22px rgba(27,45,76,.04); }
.header-brand { display:flex; align-items:center; justify-content:center; width:176px; height:52px; padding:2px 8px; border-radius:14px; background:#101b2b; flex:none; overflow:hidden; }
.header-brand img { width:168px; height:58px; object-fit:contain; }
.primary-nav { display:flex; align-items:center; justify-content:center; gap:2px; width:max-content; max-width:100%; padding:5px; margin:auto; border:1px solid #e4eafb; border-radius:999px; background:#eef2ff; }
.primary-nav a { padding:10px clamp(9px,1.45vw,21px); border-radius:999px; color:#34425b; font-size:13px; font-weight:500; white-space:nowrap; text-decoration:none; }
.primary-nav a:hover { background:#dee8ff; text-decoration:none; }
.primary-nav a[aria-current=page] { background:#18253a; color:#fff; box-shadow:0 8px 18px -12px #18253a; }
.primary-nav .nav-symbol { display:none; }
:root[data-mode=dark] .primary-nav { background:#263751; border-color:#40536e; }
:root[data-mode=dark] .primary-nav a { color:#dce7fa; }
:root[data-mode=dark] .primary-nav a:hover { background:#324967; }
:root[data-mode=dark] .primary-nav a[aria-current=page] { color:#fff; background:#315ff0; }
.topbar-tools { margin-left:0; gap:8px; }
.topbar-tools button,.topbar-avatar span { display:grid; place-items:center; width:42px; height:42px; min-height:42px; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--tint); color:var(--ink); }
.topbar-tools button:hover { background:var(--surface-hover); }
.topbar-tools .mode-label,.topbar-tools .quick-search span:last-child { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.topbar-avatar span { background:var(--shell-blue); color:#fff; font-size:11px; }
.mode-switch { margin:0; }

/* Airy card grid with durable contrast in both modes. */
main { width:100%; max-width:1660px; margin:0 auto; padding:clamp(24px,3vw,46px) clamp(18px,3.2vw,52px) 128px; }
.panel,.document,.summary { border-radius:var(--r-panel); border:1px solid var(--line); background:var(--paper); box-shadow:var(--shadow-1); }
.panel:hover { box-shadow:var(--shadow-card); }
.padded,.work-panel { padding:clamp(20px,2vw,32px); }
.panel-head { padding:20px 26px; }
.setup-banner { border-radius:22px; padding:20px 26px; background:var(--paper); box-shadow:var(--shadow-1); }
.setup-banner .banner-icon { background:#e3eaff; border:0; border-radius:14px; color:var(--shell-blue); }
.setup-banner progress::-webkit-progress-value { background:var(--shell-blue); }
.setup-banner progress::-moz-progress-bar { background:var(--shell-blue); }
.banner-link { color:var(--shell-blue); }
.stats { gap:16px; }
.stats section,.stats section:first-child { border-radius:22px; padding:22px; box-shadow:var(--shadow-1); }
.stats section:first-child { border:1px solid var(--line); border-top:1px solid var(--line); }
.stats section:nth-child(1) { background:var(--shell-blue); border-color:var(--shell-blue); }
.stats section:nth-child(1) .stat-head span,.stats section:nth-child(1) strong,.stats section:nth-child(1) .stat-head i { color:#fff; }
.stats section:nth-child(1) .stat-head i { background:rgba(255,255,255,.16); }
.stats section:nth-child(1) .stat-foot { background:rgba(255,255,255,.18); }
.stats section:nth-child(1) .stat-foot span,.stats section:nth-child(1) .stat-foot b { color:#fff; }
.stats section:nth-child(4) { background:#1c293d; border-color:#1c293d; }
.stats section:nth-child(4) .stat-head span,.stats section:nth-child(4) strong,.stats section:nth-child(4) .stat-head i { color:#fff; }
.stats section:nth-child(4) .stat-head i,.stats section:nth-child(4) .stat-foot { background:rgba(255,255,255,.12); }
.stats section:nth-child(4) .stat-foot span,.stats section:nth-child(4) .stat-foot b { color:#f3f7ff; }
.stats .stat-head span { font-size:11px; }
.stats strong,.stats .money-stat { font-size:clamp(26px,2.3vw,36px); line-height:1.15; }
.home-blocks { column-gap:24px; }
.work-panel { position:relative; }
.work-panel .panel-head.bare h2 { font-size:22px; }
.workflow-steps { gap:10px; }
.workflow-steps a { border-radius:16px; padding:14px; background:var(--surface-soft); }
.workflow-steps .current a { background:#202c41; }
.workflow-steps a:hover { transform:translateY(-2px); }
.work-cards { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.work-card { min-height:200px; padding:18px; border-radius:20px; background:var(--shell-blue); color:#fff; box-shadow:0 17px 25px -20px #1d4cce; }
.work-card:nth-child(2) { background:var(--shell-teal); box-shadow:0 17px 25px -20px #1b697a; }
.work-card:nth-child(3) { background:#202c41; }
.work-card:nth-child(4) { background:var(--shell-yellow); color:#172033; }
.work-card:hover { transform:translateY(-4px); background:#1748da; box-shadow:0 23px 34px -20px #193d94; }
.work-card:nth-child(2):hover { background:#1a6a7a; }
.work-card:nth-child(3):hover { background:#172335; }
.work-card:nth-child(4):hover { background:#ebd044; }
.work-card-top small,.work-card>small,.work-card .status,.work-card-foot span { color:inherit; }
.work-card .status { border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.15); }
.work-card:nth-child(4) .status { border-color:#735b00; background:rgba(255,255,255,.35); color:#172033; }
.work-card-foot { margin-top:auto; background:rgba(255,255,255,.15); }
.work-card-foot b { color:inherit; }
.work-card:nth-child(4) .work-card-foot { background:rgba(255,255,255,.35); }
.work-card-foot b.late { color:#fff; text-decoration:underline; }
.table-wrap { border-radius:0 0 var(--r-panel) var(--r-panel); }
.table-wrap table { min-width:0; }
th { background:var(--surface-soft); text-transform:uppercase; letter-spacing:.05em; font-size:10px; }
td { padding:16px 18px; }
tbody tr:hover { background:var(--surface-hover); }
.status { border-radius:999px; padding:5px 10px; }
.segmented { border-radius:999px; }
.segmented a { border-radius:999px; }
.chips a { border-radius:999px; }
.document { max-width:1100px; }
.document th { background:var(--surface-soft); }
.doc-header { border-top-color:var(--shell-blue); }
.doc-total { border-radius:18px; background:var(--surface-soft); border-left-color:var(--shell-blue); }
.summary-price { background:var(--surface-soft); border-radius:20px; }
.info,.notice,.error,.check-line { border-radius:16px; }
.app-footer { background:transparent; border-top:0; padding:18px clamp(18px,3vw,48px); }

/* Dynamic job and quote highlights, never generated numbers or mock contacts. */
.jobs-spotlight { margin:0 0 24px; }
.spotlight-heading { display:flex; justify-content:space-between; gap:12px; align-items:end; margin:0 0 14px; }
.spotlight-heading h2 { margin:3px 0 0; font-size:22px; }
.spotlight-heading>span { color:var(--muted); font-size:12px; }
.spotlight-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.spotlight-card { display:flex; flex-direction:column; min-height:200px; padding:21px; border-radius:22px; background:var(--shell-blue); color:#fff; text-decoration:none; box-shadow:0 18px 32px -22px #1e58f6; }
.spotlight-card:nth-child(2) { background:#202c41; }
.spotlight-card:nth-child(3) { background:var(--shell-yellow); color:#172033; }
.spotlight-card:hover { transform:translateY(-3px); text-decoration:none; box-shadow:var(--shadow-card); }
.spotlight-top,.spotlight-bottom { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.spotlight-top { margin-bottom:15px; }
.spotlight-top small { font-size:11px; font-weight:600; letter-spacing:.08em; }
.spotlight-top span { width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.18); display:grid; place-items:center; }
.spotlight-card strong { font-size:19px; line-height:1.3; }
.spotlight-client { margin:6px 0 22px; opacity:.85; font-size:13px; }
.spotlight-bottom { margin-top:auto; align-items:end; font-size:12px; }
.spotlight-bottom small { display:block; opacity:.7; }
.spotlight-bottom b { font-size:18px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.quote-highlights { display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:14px; margin:0 0 24px; }
.quote-highlight { display:flex; flex-direction:column; gap:9px; min-width:0; min-height:148px; padding:22px; border:1px solid var(--line); border-radius:22px; background:var(--paper); box-shadow:var(--shadow-1); }
.quote-highlight-main { border-color:var(--shell-blue); background:var(--shell-blue); color:#fff; }
.quote-highlight>span { font-size:11px; font-weight:600; letter-spacing:.07em; }
.quote-highlight strong { font-size:clamp(18px,2vw,30px); line-height:1.2; overflow-wrap:anywhere; }
.quote-highlight small { color:var(--muted); margin-top:auto; }
.quote-highlight-main small { color:#dce8ff; }

/* Calculator workflow: the supplied quote mockup translated to real calculations. */
.calculator-heading { gap:20px; }
.calculator-heading>div { min-width:0; }
.calculator-heading h1 { max-width:900px; margin:5px 0 8px; overflow-wrap:anywhere; }
.calculator-heading .eyebrow { margin-top:12px; }
.calculator-back { color:var(--muted); font-size:12px; font-weight:600; text-decoration:none; }
.calculator-back:hover { color:var(--shell-blue); }
.calculator-version,.calculator-revision { flex:none; align-self:center; border:1px solid var(--line); border-radius:999px; background:var(--paper); padding:10px 15px; color:var(--ink); font-size:12px; font-weight:600; box-shadow:var(--shadow-1); }
.calculator-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,340px); align-items:start; gap:20px; }
.calculator-main,.calculator-side { display:grid; gap:20px; min-width:0; }
.calculator-side { position:sticky; top:98px; }
.calculator-section,.calculator-quote { scroll-margin-top:100px; }
.calculator-section-head { display:flex; align-items:flex-start; gap:15px; }
.calculator-section-head>div { min-width:0; }
.calculator-section-head h2 { margin:2px 0 5px; font-size:22px; }
.calculator-section-head p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.calculator-section-head .eyebrow { font-size:10px; }
.calculator-step-icon { display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:14px; background:#e2eaff; color:var(--shell-blue); font-size:13px; font-weight:600; }
.calculator-section .fields,.calculator-custom-fields .fields,.calculator-extra-fields .fields,.calculator-quote .fields { gap:15px; margin:22px 0 0; }
.calculator-section .fields label,.calculator-custom-fields .fields label,.calculator-extra-fields .fields label,.calculator-quote .fields label { display:flex; flex-direction:column; justify-content:flex-end; gap:4px; color:var(--ink); font-size:12px; font-weight:600; line-height:1.4; }
.calculator-section .fields input,.calculator-section .fields select,.calculator-custom-fields .fields input,.calculator-custom-fields .fields select,.calculator-extra-fields .fields input,.calculator-extra-fields .fields select,.calculator-quote .fields input { min-height:46px; margin-top:4px; background:var(--surface-soft); font-size:14px; }
.calculator-section .unit,.calculator-custom-fields .unit,.calculator-extra-fields .unit { display:inline; margin-left:4px; font-size:11px; font-weight:500; }
.calculator-custom-fields,.calculator-extra-fields { display:grid; gap:20px; scroll-margin-top:100px; }
.calculator-custom-fields .panel,.calculator-extra-fields .panel { margin:0; }
.calculator-custom-fields .panel h2,.calculator-extra-fields .panel h2 { font-size:22px; }
.calculator-custom-fields .panel>.eyebrow,.calculator-extra-fields .panel>.eyebrow { font-size:10px; }
.calculator-side-card { min-width:0; padding:24px; border:1px solid var(--line); border-radius:24px; background:var(--paper); box-shadow:var(--shadow-1); }
.calculator-side-kicker { display:block; color:var(--shell-blue); font-size:10px; font-weight:600; letter-spacing:.1em; }
.calculator-side-accent { position:relative; overflow:hidden; background:#1f58ed; color:#fff; border-color:#1f58ed; box-shadow:0 20px 38px -25px #1f58ed; }
.calculator-side-accent:after { content:''; position:absolute; width:230px; height:230px; right:-110px; top:-120px; border:1px solid rgba(255,255,255,.25); border-radius:50%; box-shadow:0 0 0 28px rgba(255,255,255,.05),0 0 0 65px rgba(255,255,255,.04); pointer-events:none; }
.calculator-side-accent .calculator-side-kicker { color:#dce6ff; }
.calculator-side-accent>strong { display:block; margin:14px 0 8px; font-size:25px; letter-spacing:-.03em; }
.calculator-side-accent p { max-width:27ch; margin:0 0 23px; color:#edf3ff; font-size:13px; line-height:1.6; }
.calculator-side-graphic { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.calculator-side-graphic span { padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.17); font-size:10px; font-weight:600; }
.calculator-side-graphic i { font-style:normal; opacity:.75; }
.calculator-steps { list-style:none; padding:0; margin:15px 0 0; }
.calculator-steps li+li { border-top:1px solid var(--line); }
.calculator-steps li>a,.calculator-steps li>span { display:flex; align-items:center; gap:12px; padding:12px 0; color:var(--ink); text-decoration:none; font-size:13px; font-weight:500; }
.calculator-steps b { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; background:var(--surface-soft); color:var(--shell-blue); font-size:10px; }
.calculator-steps a:hover { color:var(--shell-blue); }
.calculator-side-note { display:flex; align-items:flex-start; gap:12px; padding:17px 20px; border:1px solid var(--line); border-radius:20px; background:var(--surface-soft); }
.calculator-side-note>span { display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:10px; background:#e0e9ff; color:var(--shell-blue); font-size:17px; }
.calculator-side-note p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.calculator-side-note strong { color:var(--ink); }
.calculator-submit { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 24px; border:1px solid var(--line); border-radius:22px; background:var(--paper); box-shadow:var(--shadow-1); }
.calculator-submit strong,.calculator-submit span { display:block; }
.calculator-submit strong { font-size:14px; }
.calculator-submit div>span { max-width:440px; margin-top:3px; color:var(--muted); font-size:12px; line-height:1.5; }
.calculator-submit button { flex:none; }
.calculator-empty { max-width:670px; }
.calculator-metrics { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:16px; margin-bottom:22px; }
.calculator-metric { display:flex; flex-direction:column; min-width:0; min-height:150px; padding:22px 24px; border:1px solid var(--line); border-radius:22px; background:var(--paper); box-shadow:var(--shadow-1); }
.calculator-metric-primary { background:var(--shell-blue); border-color:var(--shell-blue); color:#fff; }
.calculator-metric-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.calculator-metric-top span { font-size:10px; font-weight:600; letter-spacing:.075em; }
.calculator-metric-top i { display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:50%; background:var(--surface-soft); color:var(--shell-blue); font-style:normal; font-size:18px; }
.calculator-metric-primary .calculator-metric-top i { background:rgba(255,255,255,.17); color:#fff; }
.calculator-metric strong { display:block; margin:10px 0 6px; font-size:clamp(23px,2.2vw,35px); line-height:1.13; letter-spacing:-.035em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.calculator-metric small { margin-top:auto; color:var(--muted); font-size:11px; }
.calculator-metric-primary small { color:#e4ecff; }
.calculator-lines { overflow:hidden; }
.calculator-lines-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:25px 26px 17px; }
.calculator-lines-head h2 { margin:5px 0 0; font-size:22px; }
.calculator-lines-head .eyebrow { font-size:10px; }
.calculator-count { flex:none; padding:6px 12px; border-radius:999px; background:var(--surface-soft); color:var(--muted); font-size:11px; font-weight:600; }
.calculator-table { width:100%; min-width:590px!important; }
.calculator-table th { padding:12px 17px; background:var(--paper); color:var(--muted); border-bottom:1px solid var(--line); }
.calculator-table th:first-child { width:44%; }
.calculator-table td { padding:16px 17px; font-size:12px; font-variant-numeric:tabular-nums; }
.calculator-table td:first-child { display:flex; align-items:center; gap:12px; font-size:13px; }
.calculator-table td:not(:first-child),.calculator-table th:not(:first-child) { text-align:right; white-space:nowrap; }
.calculator-table td:last-child { color:var(--ink); }
.calculator-row-icon { display:grid; place-items:center; flex:none; width:33px; height:33px; border-radius:11px; background:#e0e9ff; color:var(--shell-blue); font-size:10px; font-weight:600; }
.calculator-table-foot { display:grid; gap:7px; margin:8px 24px 24px; padding:18px; border-radius:18px; background:var(--surface-soft); }
.calculator-table-foot>div,.calculator-finance-row,.calculator-finance-final { display:flex; justify-content:space-between; align-items:baseline; gap:14px; font-size:12px; }
.calculator-table-foot strong,.calculator-finance-row strong { white-space:nowrap; font-variant-numeric:tabular-nums; }
.calculator-table-total { margin-top:7px; padding-top:12px; border-top:1px solid var(--line); font-size:15px!important; font-weight:600; }
.calculator-detail-card h2 { margin:5px 0 14px; }
.calculator-input-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.calculator-input-list>div { display:grid; gap:3px; min-width:0; padding:13px; border-radius:12px; background:var(--surface-soft); }
.calculator-input-list span,.calculator-input-list small { color:var(--muted); font-size:11px; }
.calculator-input-list strong { overflow-wrap:anywhere; font-size:13px; }
.calculator-quote button { margin-top:23px; }
.calculator-client { text-align:center; }
.calculator-client .calculator-side-kicker { text-align:left; }
.calculator-client-avatar { display:grid; place-items:center; width:70px; height:70px; margin:10px auto 12px; border-radius:23px; background:#e0e9ff; color:var(--shell-blue); font-size:24px; font-weight:600; }
.calculator-client h2 { margin:0; font-size:19px; overflow-wrap:anywhere; }
.calculator-client p { margin:6px 0 18px; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.calculator-client a { display:block; padding:11px 13px; border-radius:999px; background:var(--surface-soft); color:var(--ink); font-size:12px; font-weight:600; text-decoration:none; }
.calculator-client a:hover { background:var(--surface-hover); }
.calculator-finance h2 { margin:5px 0 18px; }
.calculator-finance-row { padding:10px 0; border-bottom:1px solid var(--line); color:var(--muted); }
.calculator-finance-row strong { color:var(--ink); }
.calculator-finance-final { align-items:center; margin-top:14px; padding:15px; border-radius:15px; background:#e8eeff; color:#1746d1; font-weight:600; }
.calculator-finance-final strong { font-size:18px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.calculator-finance p { margin:14px 0 0; color:var(--muted); font-size:11px; line-height:1.55; }
:root[data-mode=dark] .calculator-step-icon,:root[data-mode=dark] .calculator-row-icon,:root[data-mode=dark] .calculator-client-avatar,:root[data-mode=dark] .calculator-side-note>span { background:#314770; color:#b8cbff; }
:root[data-mode=dark] .calculator-finance-final { background:#263f78; color:#d6e1ff; }
@media(max-width:1100px) { .calculator-grid { grid-template-columns:minmax(0,1fr) 280px; } .calculator-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:850px) { .calculator-grid { grid-template-columns:1fr; } .calculator-side { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); } .calculator-side-note { grid-column:1/-1; } }
@media(max-width:640px) { .calculator-heading { align-items:flex-start; } .calculator-version,.calculator-revision { align-self:flex-start; } .calculator-metrics { grid-template-columns:1fr 1fr; gap:10px; } .calculator-metric-primary { grid-column:1/-1; } .calculator-metric { min-height:135px; padding:17px; } .calculator-metric strong { font-size:23px; } .calculator-side { grid-template-columns:1fr; } .calculator-side-note { grid-column:auto; } .calculator-submit { align-items:stretch; flex-direction:column; } .calculator-submit button { width:100%; } .calculator-lines-head { padding:21px 19px 13px; } .calculator-table-foot { margin:8px 15px 15px; } .calculator-input-list { grid-template-columns:1fr; } }

/* Floating route dock is supplementary; keyboard order follows the page. */
.command-dock { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:18; display:flex; align-items:center; gap:3px; padding:6px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(22,32,50,.95); backdrop-filter:blur(18px); box-shadow:0 24px 48px -16px rgba(12,22,37,.36); }
.command-dock a,.command-dock button { display:grid; place-items:center; width:42px; height:42px; min-height:42px; padding:0; border:0; border-radius:50%; background:transparent; color:#c6d4e9; font-size:19px; text-decoration:none; }
.command-dock a:hover,.command-dock button:hover { background:rgba(255,255,255,.14); color:#fff; text-decoration:none; }
.command-dock .dock-create { width:47px; height:47px; margin:0 4px; background:var(--shell-blue); color:#fff; font-size:27px; }
.command-dock .dock-create:hover { background:#4476ff; }

@media(max-width:1270px) { .primary-nav a { padding-inline:10px; } .header-brand { width:148px; } .header-brand img { width:150px; } }
@media(max-width:1120px) { .primary-nav { display:none; } .topbar-tools { margin-left:auto; } }
@media(max-width:900px) {
  .topbar { padding:10px 20px; }
  main { padding:24px 20px 105px; }
  .sidebar { width:min(322px,calc(100vw - 32px)); }
  .spotlight-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .quote-highlights { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .quote-highlight-main { grid-column:1/-1; }
}
@media(max-width:700px) { .command-dock { display:none; } main { padding-bottom:40px; } }
@media(max-width:560px) {
  .topbar { min-height:64px; padding:8px 14px; gap:8px; }
  .header-brand { width:135px; height:44px; }
  .header-brand img { width:139px; height:50px; }
  .nav-toggle { width:42px; min-height:42px; padding:0; justify-content:center; }
  .nav-toggle span:first-child { display:inline; }
  .nav-toggle span:last-child { display:none; }
  main { padding:23px 14px 32px; }
  .panel,.document,.summary { border-radius:20px; }
  .padded,.work-panel { padding:19px; }
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .stats section,.stats section:first-child { padding:15px; }
  .stats strong,.stats .money-stat { font-size:22px; }
  .spotlight-grid,.quote-highlights { grid-template-columns:1fr; }
  .quote-highlight-main { grid-column:auto; }
  .spotlight-card { min-height:165px; }
  .spotlight-heading { align-items:start; flex-direction:column; }
  .heading .actions { width:100%; }
  .heading .actions>* { width:100%; }
  .work-cards { grid-template-columns:1fr; }
  .work-card { min-height:170px; }
  .command-dock { display:none; }
  .app-footer { padding-bottom:26px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}

/* The website's original typographic FABRIQ mark, shared with Manager. */
.header-brand { width:auto; min-width:154px; height:52px; justify-content:flex-start; padding:0; background:transparent; border-radius:0; }
.fabriq-wordmark { display:inline-block; color:#167449; font-family:'DM Sans',var(--font); font-size:38px; font-weight:600; line-height:1; letter-spacing:-2.6px; white-space:nowrap; }
.fabriq-wordmark sup { display:inline-block; padding-left:3px; font-size:15px; font-weight:500; letter-spacing:0; vertical-align:top; line-height:1.1; }
.sidebar .brand { display:flex; align-items:center; height:67px; padding:0 18px; }
.sidebar .fabriq-wordmark { color:#e6f4e9; }
:root[data-mode=dark] .header-brand .fabriq-wordmark { color:#8ed4a5; }
@media(max-width:1270px) { .header-brand { min-width:142px; } }
@media(max-width:560px) { .header-brand { min-width:115px; height:44px; } .header-brand .fabriq-wordmark { font-size:31px; } .header-brand .fabriq-wordmark sup { font-size:12px; } }

/* Quieter Manager surfaces aligned with the original website. */
:root { --shell-blue:var(--brand); --shell-teal:#287a6a; --shell-yellow:#e3eddc; --r-panel:18px; --line:#dbe6dd; --surface-soft:#f3f6f2; --surface-hover:#eaf2eb; --tint:#f0f5f0; --bg:#f6f9f5; --shadow-1:0 10px 28px -22px rgba(17,57,38,.34),0 1px 3px rgba(17,57,38,.035); --shadow-card:0 16px 34px -25px rgba(17,57,38,.38); }
:root:not([data-mode=dark]) body { background:linear-gradient(135deg,#f6f9f5 0%,#f8faf7 52%,#f0f6f1 100%); }
.topbar { background:color-mix(in srgb,var(--paper) 96%,transparent); border-bottom-color:var(--line); box-shadow:none; }
.primary-nav { background:color-mix(in srgb,var(--brand) 7%,var(--paper)); border-color:color-mix(in srgb,var(--brand) 12%,var(--line)); }
.primary-nav a { color:var(--ink); }
.primary-nav a:hover { background:color-mix(in srgb,var(--brand) 12%,var(--paper)); }
.primary-nav a[aria-current=page] { background:var(--brand); color:#fff; box-shadow:none; }
:root[data-mode=dark] .primary-nav { background:var(--surface-soft); border-color:var(--line); }
:root[data-mode=dark] .primary-nav a[aria-current=page] { background:var(--brand); }
.sidebar { background:#173d2e; border-color:#315944; }
.sidebar nav a[aria-current=page],.sidebar nav a[aria-current=page]:hover { background:#e0eddf; color:#183d2c; box-shadow:none; }
.sidebar .nav-close { background:#28513d; border-color:#446750; }
.workflow-steps .current a { background:#203c30; }
.panel,.document,.summary { box-shadow:var(--shadow-1); }
.panel:hover { box-shadow:var(--shadow-1); }
.eyebrow,.banner-link { color:var(--brand); }
.stats section:nth-child(1) { background:#173d2e; border-color:#173d2e; }
.stats section:nth-child(4) { background:var(--paper); border-color:var(--line); }
.stats section:nth-child(4) .stat-head span,.stats section:nth-child(4) strong,.stats section:nth-child(4) .stat-foot span,.stats section:nth-child(4) .stat-foot b { color:var(--ink); }
.stats section:nth-child(4) .stat-head i,.stats section:nth-child(4) .stat-foot { background:var(--surface-soft); }
.work-card { background:#1e6346; box-shadow:none; }
.work-card:nth-child(2) { background:#287a6a; box-shadow:none; }
.work-card:nth-child(3) { background:#263d34; }
.work-card:nth-child(4) { background:#e1eddd; color:#183d2c; }
.work-card:hover { background:#1a573e; box-shadow:var(--shadow-card); }
.work-card:nth-child(4):hover { background:#d6e7d0; }
.spotlight-card { background:#1e6346; box-shadow:none; }
.spotlight-card:nth-child(2) { background:#263d34; }
.spotlight-card:nth-child(3) { background:#e1eddd; color:#183d2c; }
.quote-highlight-main { background:#1e6346; border-color:#1e6346; }
.command-dock { display:none; }
.calculator-metric-primary { background:#1e6346; border-color:#1e6346; }
.calculator-metric-primary .calculator-metric-top i { background:rgba(255,255,255,.13); }
.calculator-side-accent { background:color-mix(in srgb,var(--brand) 9%,var(--paper)); border-color:color-mix(in srgb,var(--brand) 18%,var(--line)); color:var(--ink); box-shadow:var(--shadow-1); }
.calculator-side-accent:after { display:none; }
.calculator-side-accent .calculator-side-kicker { color:var(--brand); }
.calculator-side-accent p { max-width:none; color:var(--muted); }
.calculator-side-graphic span { background:var(--paper); border:1px solid var(--line); color:var(--ink); }
.calculator-step-icon,.calculator-row-icon,.calculator-client-avatar,.calculator-side-note>span { background:color-mix(in srgb,var(--brand) 12%,var(--paper)); color:var(--brand); }
.calculator-finance-final { background:color-mix(in srgb,var(--brand) 10%,var(--paper)); color:var(--brand); }
.calculator-side-card,.calculator-metric { border-radius:18px; }
.calculator-submit { border-radius:18px; }
:root[data-mode=dark] .calculator-side-accent { background:var(--surface-soft); }
:root[data-mode=dark] .calculator-step-icon,:root[data-mode=dark] .calculator-row-icon,:root[data-mode=dark] .calculator-client-avatar,:root[data-mode=dark] .calculator-side-note>span { background:#315744; color:#b5e3c3; }
:root[data-mode=dark] .calculator-finance-final { background:#315744; color:#d5f0dd; }


/* EXPERIENCE — consolidated product styles */
/* Bundled UI typeface (SIL OFL 1.1, see fonts/PlusJakartaSans-OFL.txt). Latin + Slovak subset, variable weight. */
@font-face { font-family:'Plus Jakarta Sans'; src:url('fonts/PlusJakartaSans-v2.woff2') format('woff2'); font-weight:200 800; font-style:normal; font-display:swap; }
/* Theme contract: colors come from theme.py, components consume semantic roles.
   Structural rules in stitch.css remain; this layer owns color and interaction. */
:root { --accent:#24694e; --accent-ink:#fff; --feature-bg:#224d3c; --feature-alt:#315749; --feature-ink:#fff; --feature-muted:#cfdfd6; --feature-line:#47705c; --success-bg:#e8f5ed; --success-ink:#205c3c; --warning-bg:#fff2d7; --warning-ink:#77520b; --danger-bg:#fdebed; --danger-ink:#952638; --r-panel:18px; --r-control:11px; }
:root[data-mode] body { background:radial-gradient(ellipse at 95% 0,var(--tint),transparent 48%),var(--bg); background-attachment:fixed; color:var(--ink); }
:root[data-mode] .topbar { background:color-mix(in srgb,var(--paper) 94%,transparent); border-color:var(--line); box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 2%,transparent); }
:root[data-mode] .header-brand { min-width:155px; width:155px; height:58px; padding:0; overflow:hidden; border-radius:10px; background:transparent; }
:root[data-mode] .header-brand .fabriq-logo-final { display:block; flex:none; width:174px; max-width:none; height:auto; margin-left:-10px; object-fit:contain; }
:root[data-mode=dark] .header-brand { background:transparent; }
:root[data-mode=dark] .header-brand .fabriq-logo-final,:root[data-mode] .sidebar .fabriq-logo-final { filter:brightness(0) invert(1); }
:root[data-mode] .sidebar .brand { width:190px; height:64px; padding:0; margin:0 0 16px 16px; overflow:hidden; background:transparent; border:0; border-radius:12px; }
:root[data-mode] .sidebar .fabriq-logo-final { display:block; flex:none; width:203px; max-width:none; height:auto; margin-left:-7px; }
:root[data-mode] .sidebar { background:var(--nav-bg); border-color:var(--nav-line); box-shadow:0 30px 90px #0005; }
:root[data-mode] .sidebar nav a { color:var(--nav-text); }
:root[data-mode] .sidebar nav a:hover { background:var(--nav-hover); color:#fff; }
:root[data-mode] .sidebar nav a[aria-current=page],:root[data-mode] .sidebar nav a[aria-current=page]:hover { background:var(--nav-active); color:var(--nav-active-text); box-shadow:inset 3px 0 var(--feature-muted); }
:root[data-mode] .sidebar .nav-close { background:var(--nav-hover); border-color:var(--nav-line); }
:root[data-mode] .primary-nav { background:var(--surface-soft); border-color:var(--line); padding:4px; }
:root[data-mode] .primary-nav a { color:var(--muted); transition:background .18s,color .18s,box-shadow .18s; }
:root[data-mode] .primary-nav a:hover { background:var(--surface-hover); color:var(--ink); }
:root[data-mode] .primary-nav a[aria-current=page] { background:var(--paper); color:var(--accent); box-shadow:0 2px 8px #00000012,inset 0 -2px var(--accent); }
:root[data-mode] .topbar-tools button { background:var(--surface-soft); border-color:var(--line); color:var(--ink); }
:root[data-mode] .topbar-avatar span { background:var(--pale); border:1px solid var(--line); color:var(--accent); }
:root[data-mode] button,:root[data-mode] .button { transition:transform .14s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease; }
:root[data-mode] button:hover,:root[data-mode] .button:hover { transform:translateY(-1px); box-shadow:0 4px 12px #00000010; }
:root[data-mode] button:active,:root[data-mode] .button:active { transform:translateY(1px) scale(.98); box-shadow:none; }
:root[data-mode] .primary,:root[data-mode] .preview-action { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 18%,transparent); }
:root[data-mode] .primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); color:var(--accent-ink); }
:root[data-mode] .quiet { background:transparent; }
:root[data-mode] .eyebrow,:root[data-mode] .banner-link,:root[data-mode] .calculator-side-kicker { color:var(--accent); }
:root[data-mode] input,:root[data-mode] select,:root[data-mode] textarea { background:var(--surface-soft); border-color:var(--control-line); color:var(--ink); border-radius:11px; transition:box-shadow .18s,border-color .18s,background .18s; }
:root[data-mode] input:focus,:root[data-mode] select:focus,:root[data-mode] textarea:focus { background:var(--paper); border-color:var(--accent); box-shadow:0 0 0 4px var(--pale); }
:root[data-mode] :focus-visible { outline-color:var(--accent); }
:root[data-mode] .nav-search input { background:var(--nav-hover); color:var(--nav-text); border-color:var(--nav-line); }
:root[data-mode] .panel,:root[data-mode] .summary,:root[data-mode] .calculator-side-card { border-color:var(--line); background:var(--paper); box-shadow:var(--shadow-1); }
:root[data-mode] .panel-head,:root[data-mode] td,:root[data-mode] th { border-color:var(--line); }
:root[data-mode] th { color:var(--muted); background:var(--surface-soft); }
:root[data-mode] tbody tr:hover { background:var(--surface-hover); }
:root[data-mode] .stats section { background:var(--paper); border-color:var(--line); box-shadow:var(--shadow-1); }
:root[data-mode] .stats section .stat-head span,:root[data-mode] .stats section strong,:root[data-mode] .stats section .stat-foot b { color:var(--ink); }
:root[data-mode] .stats section .stat-head i { color:var(--accent); background:var(--pale); }
:root[data-mode] .stats section .stat-foot { background:var(--surface-soft); }
:root[data-mode] .stats section .stat-foot span { color:var(--muted); }
:root[data-mode] .stats section:first-child { background:linear-gradient(135deg,var(--feature-bg),var(--feature-alt)); border-color:var(--feature-line); }
:root[data-mode] .stats section:first-child .stat-head span,:root[data-mode] .stats section:first-child strong,:root[data-mode] .stats section:first-child .stat-head i,:root[data-mode] .stats section:first-child .stat-foot span,:root[data-mode] .stats section:first-child .stat-foot b { color:var(--feature-ink); }
:root[data-mode] .stats section:first-child .stat-head i,:root[data-mode] .stats section:first-child .stat-foot { background:#ffffff12; }
:root[data-mode] .setup-banner { background:var(--paper); border-color:var(--line); }
:root[data-mode] .setup-banner .banner-icon,:root[data-mode] .step-number.done { background:var(--pale); color:var(--accent); border-color:var(--line); }
:root[data-mode] .workflow-steps a { background:var(--surface-soft); color:var(--ink); }
:root[data-mode] .workflow-steps .current a { background:var(--feature-bg); color:var(--feature-ink); }
:root[data-mode] .workflow-steps .current small,:root[data-mode] .workflow-steps .current b { color:var(--feature-muted); }
:root[data-mode] .work-card,:root[data-mode] .spotlight-card { background:var(--feature-bg); color:var(--feature-ink); border:1px solid var(--feature-line); box-shadow:var(--shadow-1); }
:root[data-mode] .work-card:nth-child(2),:root[data-mode] .spotlight-card:nth-child(2) { background:var(--feature-alt); }
:root[data-mode] .work-card:nth-child(3),:root[data-mode] .work-card:nth-child(4),:root[data-mode] .spotlight-card:nth-child(3) { background:var(--tint); color:var(--ink); border-color:var(--line); }
:root[data-mode] .work-card:hover,:root[data-mode] .spotlight-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-card); border-color:var(--accent); }
:root[data-mode] .quote-highlight-main,:root[data-mode] .calculator-metric-primary { background:linear-gradient(135deg,var(--feature-bg),var(--feature-alt)); border-color:var(--feature-line); color:var(--feature-ink); }
:root[data-mode] .quote-highlight-main small,:root[data-mode] .calculator-metric-primary small { color:var(--feature-muted); }
:root[data-mode] .calculator-metric:not(.calculator-metric-primary) { background:var(--paper); border-color:var(--line); }
:root[data-mode] .calculator-metric-top i { background:var(--pale); color:var(--accent); }
:root[data-mode] .calculator-metric-primary .calculator-metric-top i { background:#ffffff16; color:var(--feature-ink); }
:root[data-mode] .calculator-side-accent { background:linear-gradient(145deg,var(--tint),var(--paper)); border-color:var(--line); color:var(--ink); }
:root[data-mode] .calculator-side-accent .calculator-side-kicker { color:var(--accent); }
:root[data-mode] .calculator-side-accent p { color:var(--muted); }
:root[data-mode] .calculator-step-icon,:root[data-mode] .calculator-row-icon,:root[data-mode] .calculator-client-avatar,:root[data-mode] .calculator-side-note>span { background:var(--pale); color:var(--accent); }
:root[data-mode] .calculator-finance-final { background:var(--pale); color:var(--accent); }
:root[data-mode] .calculator-table th { background:var(--paper); }
:root[data-mode] .calculator-section .fields input,:root[data-mode] .calculator-section .fields select,:root[data-mode] .calculator-custom-fields .fields input,:root[data-mode] .calculator-custom-fields .fields select,:root[data-mode] .calculator-extra-fields .fields input,:root[data-mode] .calculator-extra-fields .fields select,:root[data-mode] .calculator-quote .fields input { background:var(--surface-soft); color:var(--ink); }
:root[data-mode] .summary-price { background:var(--feature-bg); color:var(--feature-ink); }
:root[data-mode] .summary-price p,:root[data-mode] .summary-price span { color:var(--feature-muted); }
:root[data-mode] .document th { background:var(--feature-bg); color:var(--feature-ink); }
:root[data-mode] .status { background:var(--surface-soft); color:var(--muted); border-color:var(--line); }
:root[data-mode] .status.accepted,:root[data-mode] .status.issued,:root[data-mode] .status.active,:root[data-mode] .status.done,:root[data-mode] .notice { background:var(--success-bg); color:var(--success-ink); border-color:color-mix(in srgb,var(--success-ink) 25%,var(--success-bg)); }
:root[data-mode] .status.draft,:root[data-mode] .status.planned { background:var(--warning-bg); color:var(--warning-ink); border-color:color-mix(in srgb,var(--warning-ink) 25%,var(--warning-bg)); }
:root[data-mode] .status.overdue,:root[data-mode] .status.suspended,:root[data-mode] .status.cancelled,:root[data-mode] .error { background:var(--danger-bg); color:var(--danger-ink); border-color:color-mix(in srgb,var(--danger-ink) 25%,var(--danger-bg)); }
:root[data-mode] .palette-option { background:var(--paper); color:var(--ink); border-color:var(--line); }
:root[data-mode] .palette-option:has(input:checked) { background:var(--pale); border-color:var(--accent); box-shadow:0 0 0 2px var(--pale); }
:root[data-mode] .preview-nav { background:var(--feature-bg); color:var(--feature-ink); }
:root[data-mode] .theme-preview { background:var(--bg); }
.theme-preview-metrics { display:flex; gap:12px; flex-wrap:wrap; margin:16px 0; }
.theme-preview-metrics>span { padding:13px 16px; background:var(--paper); border:1px solid var(--line); border-radius:12px; font-size:12px; color:var(--muted); }
.theme-preview-metrics b { display:block; margin-top:5px; font-size:20px; color:var(--ink); }
:root[data-mode] .tabbar { background:color-mix(in srgb,var(--paper) 96%,transparent); border-color:var(--line); }
:root[data-mode] .tabbar a[aria-current=page] { background:var(--pale); color:var(--accent); }
/* Motion carries feedback; never delays navigation or form submission. */
@keyframes workspace-enter { from { opacity:.35; transform:translateY(7px); } to { opacity:1; transform:none; } }
@keyframes detail-enter { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }
@keyframes busy-turn { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:no-preference) {
  main { animation:workspace-enter .25s ease-out both; }
  details[open]>:not(summary) { animation:detail-enter .18s ease-out; }
  .theme-changing .workspace,.theme-changing .panel,.theme-changing input,.theme-changing .topbar,.theme-changing .calculator-metric { transition:background-color .24s ease,color .24s ease,border-color .24s ease; }
}
.palette-option { transition:background .2s,border-color .2s,box-shadow .2s,transform .15s; }
.palette-option:active { transform:scale(.98); }
button[aria-busy=true] { cursor:progress; opacity:.8; }
button[aria-busy=true]::after { content:''; display:inline-block; width:12px; height:12px; margin-left:8px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:busy-turn .7s linear infinite; }
.interaction-status { position:fixed; z-index:50; right:24px; bottom:24px; max-width:min(380px,calc(100vw - 32px)); padding:14px 18px; border:1px solid var(--line); border-radius:14px; background:var(--paper); color:var(--ink); box-shadow:var(--shadow-card); font-size:13px; }
.interaction-status[data-error=true] { background:var(--danger-bg); color:var(--danger-ink); }
@media(max-width:700px) { .interaction-status { bottom:85px; right:16px; } }
@media(max-width:560px) { :root[data-mode] .header-brand { width:125px; min-width:125px; height:44px; } :root[data-mode] .header-brand .fabriq-logo-final { width:140px; margin-left:-8px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

:root[data-mode] .stats section:first-child>span {color:var(--feature-muted)}

/* ── Typografia ─────────────────────────────────────────────────────────────
   One scale for the whole Manager. Weights: 400 text, 500 emphasis/controls,
   600 only for headings, key figures and tiny uppercase labels. Nothing heavier.
   11 label · 12 meta · 13 control · 14 text · 16 subhead · 18 section · 28 page/figure */
:root { --fs-label:11px; --fs-meta:12px; --fs-control:13px; --fs-text:14px; --fs-sub:16px; --fs-section:18px; --fs-page:28px; --fs-figure:28px; --fs-figure-sm:22px; }
:root[data-mode] body { font-size:var(--fs-text); line-height:1.55; font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; font-kerning:normal; }
:root[data-mode] :is(b,strong) { font-weight:600; }
:root[data-mode] :is(td,.work-card,.spotlight-card,.stat-foot,.summary-row,.company-row,.company-card,.setup-step,.sort-item,.doc-parties,.work-row,.team-row,.calculator-summary-row,label,.info,.hint,.notice,.check-line) :is(b,strong) { font-weight:500; }
:root[data-mode] :is(h1,h2,h3,h4) :is(b,strong) { font-weight:inherit; }

/* Headings */
:root[data-mode] h1 { font-size:var(--fs-page); line-height:1.2; font-weight:600; letter-spacing:-.02em; }
:root[data-mode] h2,:root[data-mode] .work-panel .panel-head.bare h2,:root[data-mode] .spotlight-heading h2,:root[data-mode] .calculator-section-head h2,:root[data-mode] .calculator-lines-head h2,:root[data-mode] :is(.calculator-custom-fields,.calculator-extra-fields) .panel h2 { font-size:var(--fs-section); line-height:1.35; font-weight:600; letter-spacing:-.01em; }
:root[data-mode] h3 { font-size:15px; line-height:1.4; font-weight:600; letter-spacing:0; }
:root[data-mode] .setup-step h2,:root[data-mode] .setup-banner h2 { font-size:15px; }
:root[data-mode] .heading p,:root[data-mode] p.lead { font-size:15px; line-height:1.55; font-weight:400; }
:root[data-mode] p { font-weight:400; }

/* Small uppercase labels: the only small text that stays semibold, never below 11px. */
:root[data-mode] :is(.eyebrow,.workspace-label,.stat-head span,.workflow-steps b,.work-card-foot span,.chips>span,.late-flag,.calculator-side-kicker) { font-size:var(--fs-label); font-weight:600; letter-spacing:.07em; line-height:1.4; }
:root[data-mode] th { font-size:var(--fs-label); font-weight:500; letter-spacing:.05em; line-height:1.4; }
:root[data-mode] .document .eyebrow,:root[data-mode] .document span.eyebrow { font-size:var(--fs-label); }

/* Text roles */
:root[data-mode] :is(small,td small,.hint,.panel-head>div>span,.panel-head>div>p,.panel-head>span) { font-size:var(--fs-meta); font-weight:400; line-height:1.5; }
:root[data-mode] td { font-size:var(--fs-text); font-weight:400; }
:root[data-mode] td :is(strong,b) { font-weight:500; }
:root[data-mode] :is(.code,small.code,b.code,.work-card-top small) { font-size:var(--fs-meta); font-weight:500; letter-spacing:.03em; font-variant-numeric:tabular-nums; }
:root[data-mode] label { font-size:var(--fs-control); font-weight:500; }
:root[data-mode] .unit { font-size:var(--fs-meta); font-weight:400; }
:root[data-mode] :is(input,select,textarea) { font-size:var(--fs-text); font-weight:400; }
:root[data-mode] :is(button,.button) { font-size:var(--fs-control); font-weight:500; letter-spacing:0; }
:root[data-mode] :is(.primary-nav a,.sidebar nav a,.tabbar a,.segmented a,.chips a) { font-weight:500; }
:root[data-mode] :is(.sidebar nav a,.primary-nav a) { font-size:var(--fs-control); }
:root[data-mode] :is(.sidebar nav a[aria-current=page],.primary-nav a[aria-current=page],.segmented a[aria-current=true]) { font-weight:600; }
:root[data-mode] .status { font-size:var(--fs-meta); font-weight:500; }
:root[data-mode] :is(.panel-head a,.banner-link,.work-head a) { font-size:var(--fs-control); font-weight:500; }
:root[data-mode] kbd { font-weight:500; }
:root[data-mode] .avatar,:root[data-mode] .topbar-avatar span { font-weight:600; letter-spacing:.02em; }

/* Figures: numbers carry weight through size, not heaviness. */
:root[data-mode] :is(.stats strong,.stats .money-stat) { font-size:var(--fs-figure); line-height:1.15; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
:root[data-mode] .calculator-metric strong { font-size:26px; line-height:1.15; font-weight:600; letter-spacing:-.02em; }
:root[data-mode] .calculator-side-accent>strong { font-size:20px; font-weight:600; letter-spacing:-.01em; }
:root[data-mode] .quote-highlight strong { font-size:clamp(18px,1.8vw,24px); font-weight:600; letter-spacing:-.01em; }
:root[data-mode] .summary-price strong { font-size:26px; font-weight:600; letter-spacing:-.02em; }
:root[data-mode] .doc-total strong { font-size:24px; font-weight:600; letter-spacing:-.01em; }
:root[data-mode] .doc-brand { font-size:20px; font-weight:600; letter-spacing:-.01em; }
:root[data-mode] .theme-preview-metrics b { font-size:18px; font-weight:600; }
:root[data-mode] .workflow-steps span { font-size:var(--fs-sub); font-weight:500; }
:root[data-mode] .workflow-steps em { font-size:var(--fs-meta); font-weight:500; }
:root[data-mode] :is(.work-card>strong,.spotlight-card>strong) { font-size:15px; font-weight:600; line-height:1.35; }
:root[data-mode] .stat-foot b,:root[data-mode] .work-card-foot b { font-weight:500; }
:root[data-mode] :is(.num,td.num b,.money,.money-stat,.doc-total strong,.summary-row strong) { font-variant-numeric:tabular-nums; }

@media(max-width:900px) {
  :root { --fs-page:24px; --fs-figure:24px; }
  :root[data-mode] .calculator-metric strong { font-size:22px; }
}
@media(max-width:560px) {
  :root { --fs-page:22px; --fs-figure:20px; --fs-section:17px; }
  :root[data-mode] .heading p,:root[data-mode] p.lead { font-size:14px; }
  :root[data-mode] :is(input,select,textarea) { font-size:16px; }
  :root[data-mode] .summary-price strong,:root[data-mode] .doc-total strong { font-size:22px; }
}

/* Refinements found in the full-page review */
:root[data-mode] body { letter-spacing:0; }
/* A flex cell stops being a table cell and misaligns row rules; keep it a real cell. */
:root[data-mode] .calculator-table td:first-child { display:table-cell; font-size:var(--fs-text); }
:root[data-mode] .calculator-table td { font-size:var(--fs-control); vertical-align:middle; }
:root[data-mode] .calculator-table .calculator-row-icon { display:inline-grid; vertical-align:middle; margin-right:12px; }
:root[data-mode] .calculator-table-total { font-size:15px!important; font-weight:600; }
:root[data-mode] .calculator-table-foot>div,:root[data-mode] .calculator-finance-row { font-size:var(--fs-control); }
:root[data-mode] .work-card-foot { gap:12px; }
:root[data-mode] .work-card-foot b { white-space:nowrap; }
:root[data-mode] .doc-footer { font-size:var(--fs-label); }
:root[data-mode] .document :is(.doc-total span,.doc-total small) { font-size:var(--fs-label); }
:root[data-mode] :is(.calculator-back,.calculator-version) { font-size:var(--fs-meta); font-weight:500; }
:root[data-mode] .calculator-client-avatar { font-weight:600; font-size:20px; }
:root[data-mode] .calculator-row-icon,:root[data-mode] .calculator-steps b,:root[data-mode] .calculator-side-graphic span { font-size:var(--fs-label); }
/* The drawer must be visible at the first frame of opening, otherwise focus() into it
   (menu button, Ctrl+K, tab bar) is refused and keyboard users stay behind the overlay.
   Closing still waits for the slide-out before hiding. */
body[data-enhanced=true].nav-open .sidebar { transition:transform .22s ease,visibility 0s; }
/* Stacked cards must fit the phone; the desktop min-width of the cost table would push values off-screen. */
table.stacked,.calculator-table.stacked { min-width:0!important; width:100%; }
@media(max-width:560px) {
  :root[data-mode] .header-brand { margin-left:8px; width:118px; min-width:118px; }
  :root[data-mode] .header-brand .fabriq-logo-final { width:132px; margin-left:-7px; }
}
/* In card mode the first cell is the card title; its column label adds nothing. */
table.stacked td:first-child::before { display:none!important; }
table.stacked td:first-child { font-size:15px; font-weight:500; padding-bottom:6px; }
table.stacked td:first-child .cell-value { display:flex; align-items:center; gap:10px; }
table.stacked td:first-child .calculator-row-icon { margin-right:0; }

/* ── Tím, výkaz práce a hospodárenie zákazky ──────────────────────────────── */
:root[data-mode] .muted { color:var(--muted); }
:root[data-mode] .back-link { display:inline-block; margin-bottom:10px; font-size:var(--fs-meta); font-weight:500; }
:root[data-mode] .person { display:flex; align-items:center; gap:10px; min-width:0; }
:root[data-mode] .person>span:last-child { min-width:0; }
:root[data-mode] .person strong { display:block; font-size:var(--fs-text); font-weight:500; line-height:1.35; }
:root[data-mode] .person small { display:block; font-size:var(--fs-meta); color:var(--muted); line-height:1.45; }
:root[data-mode] .person-mark { display:inline-grid; place-items:center; flex:none; width:32px; height:32px; border-radius:50%; background:var(--pale); color:var(--accent); font-size:var(--fs-label); font-weight:600; letter-spacing:.03em; }
:root[data-mode] .person-mark-lg { width:56px; height:56px; font-size:18px; }
:root[data-mode] .member-hero { display:flex; align-items:center; gap:16px; min-width:0; }
:root[data-mode] .member-hero h1 { margin:4px 0 6px; }

/* Team overview */
:root[data-mode] .team-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr); gap:22px; align-items:start; }
:root[data-mode] .member-list { list-style:none; margin:0; padding:0; }
:root[data-mode] .member-row { display:grid; grid-template-columns:minmax(200px,1.2fr) minmax(0,2fr); gap:12px 20px; align-items:center; padding:16px 22px; border-top:1px solid var(--line); }
:root[data-mode] .member-row:first-child { border-top:0; }
:root[data-mode] .member-row.is-inactive .member-main,:root[data-mode] .member-row.is-inactive .member-facts { opacity:.65; }
:root[data-mode] .member-main { display:flex; align-items:center; gap:12px; min-width:0; color:var(--ink); text-decoration:none; }
:root[data-mode] .member-main:hover strong { color:var(--accent); }
:root[data-mode] .member-name { min-width:0; }
:root[data-mode] .member-name strong { display:block; font-weight:500; }
:root[data-mode] .member-name small { display:block; color:var(--muted); font-size:var(--fs-meta); overflow-wrap:anywhere; }
:root[data-mode] .member-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0; }
:root[data-mode] .member-facts dt { font-size:var(--fs-label); font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
:root[data-mode] .member-facts dd { margin:2px 0 0; font-size:var(--fs-control); font-variant-numeric:tabular-nums; }
:root[data-mode] .member-actions { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; }
:root[data-mode] .member-actions form { margin:0; }
:root[data-mode] .member-actions .button { min-height:34px; padding:6px 14px; }
:root[data-mode] .member-warning { grid-column:1/-1; margin:0; }
:root[data-mode] .fields.fields-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }

/* Rates */
:root[data-mode] .rate-now { display:flex; flex-direction:column; gap:2px; margin:14px 0 18px; padding:14px 16px; border-radius:var(--r-control); background:var(--tint); }
:root[data-mode] .rate-now span { font-size:var(--fs-label); font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
:root[data-mode] .rate-now strong { font-size:22px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
:root[data-mode] .rate-now small { font-size:var(--fs-meta); color:var(--muted); }
:root[data-mode] .rate-history { margin-top:18px; border:1px solid var(--line); border-radius:var(--r-control); }
:root[data-mode] .member-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }

/* Assignment on the job */
:root[data-mode] .assignment-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px 28px; flex-wrap:wrap; }
:root[data-mode] .assignment-head>div:first-child { flex:1 1 280px; }
:root[data-mode] .person-card { flex:0 1 380px; align-items:flex-start; padding:12px 14px; border-radius:var(--r-control); background:var(--tint); }
:root[data-mode] .person-card small a { font-weight:400; }
:root[data-mode] .inline-form { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-top:18px; }
:root[data-mode] .inline-form label { flex:1 1 260px; margin:0; }

/* Profitability */
:root[data-mode] .profit-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:16px; }
:root[data-mode] .profit-grid>div { display:flex; flex-direction:column; gap:3px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-control); background:var(--paper); }
:root[data-mode] .profit-grid span { font-size:var(--fs-label); font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
:root[data-mode] .profit-grid strong { font-size:20px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
:root[data-mode] .profit-grid small { font-size:var(--fs-meta); color:var(--muted); }
:root[data-mode] .profit-grid .profit-result { background:var(--tint); border-color:color-mix(in srgb,var(--accent) 30%,var(--line)); }
:root[data-mode] .profit-grid .profit-result strong { color:var(--accent); }
:root[data-mode] .profit-grid .profit-result.is-negative strong,:root[data-mode] .profit-plan .is-negative { color:var(--danger-ink); }
:root[data-mode] .profit-plan .is-positive { color:var(--success-ink); }
:root[data-mode] .profit-plan { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 20px; margin-top:14px; padding:12px 14px; border-radius:var(--r-control); background:var(--surface-soft); font-size:var(--fs-control); }
:root[data-mode] .profit-plan b { font-weight:500; font-variant-numeric:tabular-nums; }

/* Time entries */
:root[data-mode] .time-form { border-bottom:1px solid var(--line); }
:root[data-mode] .time-form .error { margin-bottom:14px; }
:root[data-mode] .time-fields { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; }
:root[data-mode] .time-fields label { flex:1 1 150px; margin:0; }
:root[data-mode] .time-fields .time-note { flex:2 1 240px; }
:root[data-mode] .time-fields button { flex:none; }
:root[data-mode] .time-form .hint { margin:10px 0 0; }
:root[data-mode] .time-people { display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:16px 22px; list-style:none; border-bottom:1px solid var(--line); }
:root[data-mode] .time-people li { display:flex; align-items:center; gap:10px; padding:6px 14px 6px 6px; border-radius:999px; background:var(--surface-soft); }
:root[data-mode] .time-people strong { display:block; font-size:var(--fs-control); font-weight:500; }
:root[data-mode] .time-people small { display:block; font-size:var(--fs-meta); color:var(--muted); }
:root[data-mode] tr.is-cancelled td { color:var(--muted); }
:root[data-mode] tr.is-cancelled td.num { text-decoration:line-through; }
:root[data-mode] .cancel-entry summary { cursor:pointer; font-size:var(--fs-meta); font-weight:500; color:var(--muted); white-space:nowrap; }
:root[data-mode] .cancel-entry summary:hover { color:var(--danger-ink); }
:root[data-mode] .cancel-entry[open] form { display:grid; gap:8px; min-width:220px; margin-top:8px; }
:root[data-mode] .cancel-entry label { margin:0; }

/* Dashboard cards: responsible person next to the deadline */
:root[data-mode] .work-card-foot .person { gap:8px; }
:root[data-mode] .work-card-foot .person span,:root[data-mode] .work-card-foot .work-card-due span { font-size:inherit; font-weight:inherit; letter-spacing:0; text-transform:none; }
:root[data-mode] .work-card-foot .person strong { font-size:var(--fs-control); color:inherit; }
:root[data-mode] .work-card-foot .person small { color:inherit; opacity:.75; }
:root[data-mode] .work-card-foot .person-mark { width:28px; height:28px; background:color-mix(in srgb,currentColor 16%,transparent); color:inherit; }
:root[data-mode] .work-card-due { display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
:root[data-mode] .work-card-due>span { font-size:var(--fs-label)!important; font-weight:600!important; letter-spacing:.07em!important; text-transform:uppercase!important; opacity:.8; }

@media(max-width:1150px) {
  :root[data-mode] .team-layout { grid-template-columns:minmax(0,1fr); }
  :root[data-mode] .profit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:900px) {
  :root[data-mode] .member-row { grid-template-columns:minmax(0,1fr); }
  :root[data-mode] .member-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:560px) {
  :root[data-mode] .member-row { padding:14px 16px; }
  :root[data-mode] .member-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  :root[data-mode] .fields.fields-2 { grid-template-columns:minmax(0,1fr); }
  :root[data-mode] .member-stats { grid-template-columns:minmax(0,1fr); }
  :root[data-mode] .profit-grid { grid-template-columns:minmax(0,1fr); }
  :root[data-mode] .time-fields button { width:100%; }
  :root[data-mode] .time-people { padding:14px 16px; }
  :root[data-mode] .person-card { flex-basis:100%; }
  :root[data-mode] .member-hero { align-items:flex-start; }
  :root[data-mode] .person-mark-lg { width:44px; height:44px; font-size:15px; }
}
@media(max-width:560px) {
  :root[data-mode] .profit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  :root[data-mode] .profit-grid>div { padding:12px; }
  :root[data-mode] .profit-grid strong { font-size:17px; }
  :root[data-mode] .member-stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  :root[data-mode] .member-stats section { padding:12px 10px; }
  :root[data-mode] .member-stats strong { font-size:18px; margin:8px 0; }
  :root[data-mode] .member-stats .stat-foot { padding:6px 8px; }
  :root[data-mode] .member-stats .stat-foot span { display:none; }
  :root[data-mode] .member-stats .stat-foot b { font-size:var(--fs-meta); white-space:normal; }
}
:root[data-mode] .rate-history td:first-child { white-space:nowrap; }
/* Card mode would strike through the column labels too; the "Stornované" badge carries the state. */
:root[data-mode] table.stacked tr.is-cancelled td.num { text-decoration:none; }
/* Work card foot: responsible person on the first line, deadline on the second. */
:root[data-mode] .work-card-foot:has(.work-card-due) { flex-direction:column; align-items:stretch; gap:8px; }
:root[data-mode] .work-card-foot .work-card-due { flex-direction:row; justify-content:space-between; align-items:baseline; padding-top:8px; border-top:1px solid color-mix(in srgb,currentColor 18%,transparent); text-transform:none!important; letter-spacing:0!important; font-size:var(--fs-control)!important; font-weight:400!important; }
:root[data-mode] .work-card-foot .work-card-due b { text-transform:none; letter-spacing:0; font-size:var(--fs-control); }
:root[data-mode] .work-card-foot .person { text-transform:none; letter-spacing:0; }
:root[data-mode] .tabbar a { font-size:var(--fs-label); line-height:14px; }
/* Shared interaction primitives */
.ui-icon{width:21px;height:21px;display:inline-block;vertical-align:middle;flex:none}.nav-symbol .ui-icon{width:20px;height:20px}.tabbar .ui-icon{width:22px;height:22px}.quick-time-panel{max-width:760px}.pdf-preview-panel{border:1px solid var(--line,#d9e1dc);border-radius:18px;overflow:hidden;background:var(--paper,#fff);margin-block:24px}.pdf-preview{display:block;border:0;width:100%;height:min(1100px,85vh);background:#e6ebe8}.pdf-preview-panel>.hint{padding:0 20px}.document-accessible{margin-block:20px}.field-error{display:block;color:var(--danger-ink,#b42332);font-size:12px;line-height:1.5;margin-top:6px}[aria-invalid=true]{border-color:var(--danger-ink,#b42332)!important;box-shadow:0 0 0 3px #b4233215!important}.flash-toast{position:fixed;right:24px;bottom:30px;z-index:120;max-width:min(440px,calc(100vw - 32px));box-shadow:0 12px 42px #0002;display:flex;align-items:center;gap:16px;animation:toast-in .2s ease-out}.flash-toast button{padding:4px 10px;flex:none}.flash-toast~.flash-toast{bottom:115px}#global-search{width:min(620px,calc(100vw - 32px));max-height:75vh;overflow:auto;border:1px solid var(--line,#d9e1dc);border-radius:20px;padding:24px;background:var(--paper,#fff);color:var(--ink,#1a3328);box-shadow:0 24px 100px #0004}#global-search::backdrop{background:#10221980;backdrop-filter:blur(5px)}.search-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:15px}.search-dialog-head h2{font-size:20px}.search-results{display:grid;gap:6px;margin-top:15px}.search-results a{display:flex;justify-content:space-between;gap:12px;padding:12px;border-radius:10px;color:inherit}.search-results a:hover,.search-results a:focus{background:var(--accent-soft,#e5f3eb)}.search-results small{white-space:nowrap;opacity:.65}@keyframes toast-in{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}@media(max-width:900px){.flash-toast{bottom:90px;right:16px}.flash-toast~.flash-toast{bottom:165px}.pdf-preview{height:65vh}}@media(prefers-reduced-motion:reduce){.flash-toast{animation:none}}

.inquiry-message{white-space:pre-wrap;overflow-wrap:anywhere}

/* Phones (notably Android Chrome) do not render PDFs inside a frame: offer the file itself.
   The lazy iframe is not rendered there, so it is not downloaded either. */
.pdf-open-mobile{display:none}
@media(max-width:700px){.pdf-preview{display:none}.pdf-open-mobile{display:flex;margin:16px 20px 4px}.pdf-preview-panel>.hint{padding-bottom:4px}}

/* E-mail a document to the customer */
.mail-panel{margin-block:24px}
.mail-panel h2{margin:4px 0 6px}
.mail-panel form{margin-top:14px}
.mail-panel textarea{min-height:170px;font-family:inherit}
.mail-history{margin-top:22px;padding-top:16px;border-top:1px solid var(--line,#e2e8e5)}
.mail-history h3{margin:0 0 10px}
.mail-history ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mail-history li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}