.demo-shell{background:var(--cream);min-height:100dvh;color:var(--ink);grid-template-columns:240px minmax(0,1fr);display:grid}.demo-shell button,.demo-shell input,.demo-shell select,.demo-shell textarea{font:inherit}.demo-shell button{border:1px solid var(--line);cursor:pointer;color:var(--ink);background:#fff;border-radius:7px;min-height:40px;padding:9px 14px}.demo-shell button:hover{border-color:var(--forest);background:var(--mint)}.demo-shell button:disabled{opacity:.45;cursor:not-allowed}.demo-shell .demo-primary{background:var(--forest);color:#fff;border-color:var(--forest)}.demo-sidebar{background:var(--nav);color:#f8fafc;flex-direction:column;gap:16px;height:100dvh;padding:24px 16px;display:flex;position:sticky;top:0}.demo-brand{align-items:center;gap:12px;font-size:19px;font-weight:700;display:flex}.demo-brand>span{background:var(--forest);border-radius:8px;padding:4px 10px;font-size:26px}.demo-brand small{color:#b8c8d2;margin-top:3px;font-size:12px;font-weight:400;display:block}.demo-label{color:#c3ebd7;border:1px solid #517565;border-radius:5px;padding:6px 10px;font-size:12px}.demo-sidebar nav{scrollbar-width:thin;flex:1;overflow:auto}.demo-sidebar nav p{color:#aab8c7;margin:0;padding:14px 10px 5px;font-size:11px}.demo-sidebar nav button{text-align:left;color:#d5dde5;background:0 0;border:0;width:100%;margin:2px 0;padding:9px 12px;display:block}.demo-sidebar nav button:hover,.demo-sidebar nav button.active{color:#fff;background:#164e45}.demo-sidebar-foot{color:#b8c8d2;margin:0;font-size:11px;line-height:1.8}.demo-content{width:100%;min-width:0;max-width:1600px;margin:auto;padding:24px 32px 16px}.demo-safety{color:#795019;background:#fffbeb;border:1px solid #e5c98b;border-radius:8px;align-items:center;gap:14px;padding:12px 16px;font-size:13px;line-height:1.7;display:flex}.demo-safety strong{white-space:nowrap;font-size:14px}.demo-header{justify-content:space-between;align-items:center;gap:20px;margin-top:26px;display:flex}.demo-header h1{margin:3px 0;font-size:28px;font-weight:750}.demo-eyebrow{color:var(--muted);margin:0;font-size:11px}.demo-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.demo-actions label{gap:3px;font-size:11px;display:grid}.demo-description{color:var(--muted);margin:10px 0 20px;line-height:1.7}.demo-shell label{color:var(--ink)}.demo-shell input,.demo-shell select,.demo-shell textarea{min-height:40px;color:var(--ink);background:#fff;border:1px solid #bdc9d2;border-radius:6px;max-width:100%;padding:9px 10px}.demo-tour{background:#eef8f4;border:1px solid #9acbbd;border-radius:9px;justify-content:space-between;align-items:center;gap:16px;margin:16px 0;padding:18px 20px;display:flex}.demo-tour small{color:#356b59}.demo-tour h2{margin:5px 0;font-size:18px}.demo-tour p{max-width:650px;margin:0;font-size:13px;line-height:1.7}.demo-notice{color:#214765;background:#e8f0f9;border-radius:6px;padding:11px 14px;font-size:13px;line-height:1.6}.demo-permission,.demo-footnote,.demo-report-note{color:var(--muted);font-size:12px;line-height:1.8}.demo-panel{border:1px solid var(--line);background:#fff;border-radius:10px;min-width:0;margin:18px 0;padding:22px;box-shadow:0 1px 2px #172d3d05}.demo-panel h2{margin:0 0 10px;font-size:18px;font-weight:700}.demo-panel h3{margin-top:20px}.demo-panel p,.demo-panel li{line-height:1.85}.demo-panel>p{color:var(--muted);font-size:13px}.demo-panel ul{padding-left:20px;list-style:outside}.demo-metrics{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:20px 0;display:grid}.demo-metrics>div{border:1px solid var(--line);background:#fff;border-radius:8px;gap:7px;padding:18px;display:grid}.demo-metrics span{color:var(--muted);font-size:12px}.demo-metrics strong{font-variant-numeric:tabular-nums;font-size:27px;font-weight:700}.demo-metrics small{color:var(--muted);font-size:10px}.demo-grid{grid-template-columns:1fr 1fr;gap:18px;display:grid}.demo-grid .demo-panel{margin-top:0}.demo-flow{grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px;display:grid}.demo-flow button{text-align:left;background:var(--surface-soft);gap:8px;padding:18px;display:grid}.demo-flow small{color:var(--forest);font-size:12px}.demo-flow strong{font-size:20px}.demo-flow span{color:var(--muted);font-size:12px}.demo-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:end;gap:15px;margin-bottom:18px;display:flex}.demo-toolbar label{gap:6px;font-size:12px;display:grid}.demo-toolbar input{min-width:240px}.demo-table{max-width:100%;margin:16px 0;overflow:auto}.demo-table table{border-collapse:collapse;white-space:nowrap;width:100%;font-size:13px}.demo-table th{text-align:left;color:#526170;background:#f3f6f8;font-size:12px}.demo-table td,.demo-table th{border-bottom:1px solid var(--line);padding:12px}.demo-table .demo-number{text-align:right;font-variant-numeric:tabular-nums}.demo-table td button{padding:5px 12px;font-size:12px}.demo-badge{background:var(--mint);color:var(--forest-strong);border-radius:5px;padding:4px 7px;font-size:11px;display:inline-block}.demo-empty{text-align:center;color:var(--muted);padding:25px}.demo-dialog{border:1px solid var(--line);width:min(850px,94vw);max-height:88dvh;box-shadow:var(--shadow);color:var(--ink);background:#fff;border-radius:12px;margin:auto;padding:24px;overflow:auto}.demo-dialog::backdrop{background:#0f172a85}.demo-dialog header{justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;display:flex}.demo-dialog h2{overflow-wrap:anywhere;margin:0;font-size:19px;font-weight:700}.demo-form{gap:14px;display:grid}.demo-form label,.demo-payment label{gap:6px;font-size:12px;display:grid}.demo-form input,.demo-form select{width:100%}.demo-line{border:1px solid var(--line);border-radius:7px;grid-template-columns:minmax(180px,2fr) 1fr 1fr auto;align-items:end;gap:10px;min-width:0;padding:12px;display:grid}.demo-line legend{color:var(--muted);padding:0 5px;font-size:12px}.demo-form p{color:var(--muted);font-size:12px}.demo-total{text-align:right;margin:18px 0;font-weight:700;line-height:1.8}.demo-payment{border-top:1px solid var(--line);flex-wrap:wrap;align-items:end;gap:12px;margin:20px 0;padding-top:18px;display:flex}.demo-import-label{gap:8px;margin:20px 0;font-size:13px;display:grid}.demo-import-label textarea{resize:vertical;width:100%;font-family:monospace;line-height:1.8}.demo-bar{grid-template-columns:180px minmax(80px,1fr) 110px;align-items:center;gap:14px;margin:16px 0;font-size:12px;display:grid}.demo-bar>div{background:#e9eff3;border-radius:4px;height:12px;overflow:hidden}.demo-bar i{background:var(--forest);border-radius:4px;height:100%;display:block}.demo-bar b{text-align:right}.demo-footer{color:var(--muted);text-align:center;padding:20px;font-size:11px}.demo-loading{min-height:100dvh;color:var(--forest);place-items:center;display:grid}@media (max-width:1100px){.demo-shell{grid-template-columns:210px minmax(0,1fr)}.demo-content{padding:20px}.demo-header,.demo-tour{flex-direction:column;align-items:flex-start}.demo-flow{grid-template-columns:repeat(2,1fr)}.demo-grid{grid-template-columns:1fr}.demo-bar{grid-template-columns:150px minmax(40px,1fr) 90px}}@media (max-width:720px){.demo-shell{display:block}.demo-sidebar{gap:12px;height:auto;padding:16px;position:relative}.demo-brand small,.demo-sidebar-foot,.demo-label{display:none}.demo-sidebar nav{gap:14px;max-height:190px;display:flex;overflow-x:auto}.demo-sidebar nav>div{flex-shrink:0}.demo-sidebar nav p{padding-top:2px}.demo-sidebar nav button{min-height:34px;padding:6px 9px;font-size:12px}.demo-content{padding:16px}.demo-safety{flex-direction:column;align-items:flex-start;gap:4px}.demo-header h1{font-size:24px}.demo-panel{padding:16px}.demo-metrics{grid-template-columns:1fr 1fr}.demo-metrics>div{padding:12px}.demo-metrics strong{font-size:22px}.demo-toolbar{flex-direction:column;align-items:stretch}.demo-toolbar input{width:100%;min-width:0}.demo-dialog{padding:18px}.demo-line{grid-template-columns:1fr 1fr}.demo-line label:first-of-type{grid-column:1/-1}.demo-bar{grid-template-columns:1fr 80px}.demo-bar>span{grid-column:1/-1}.demo-footer{line-height:1.8}}.demo-mobile-nav{display:none}@media (max-width:720px){.demo-sidebar nav{display:none}.demo-sidebar .demo-mobile-nav{color:#d5dde5;gap:6px;font-size:12px;display:grid}.demo-mobile-nav select{width:100%}}
