:root{
  --app-bg:#f4f7fb;--app-surface:#fff;--app-text:#0b1327;--app-muted:#6c7a90;--app-line:#e2e8f2;
  --app-blue:#2563ff;--app-blue-soft:#edf3ff;--app-green:#0f9f68;--app-green-soft:#eaf8f2;
  --app-amber:#c57b12;--app-amber-soft:#fff6e7;--app-red:#c94141;--app-red-soft:#fff0f0;--side:238px
}
*{box-sizing:border-box}html{height:100%;background:var(--app-bg)}body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--app-bg);color:var(--app-text);overflow-x:hidden}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit}.app-shell{min-height:100vh;display:grid;grid-template-columns:var(--side) minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid var(--app-line);padding:18px 14px;display:flex;flex-direction:column;z-index:30}.side-brand{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 18px}.side-brand img{width:132px;display:block}.demo-pill{font-size:9px;font-weight:800;color:var(--app-blue);background:var(--app-blue-soft);border:1px solid #d9e5ff;border-radius:999px;padding:5px 7px}.side-nav{display:grid;gap:4px}.nav-item{border:0;background:transparent;color:#647289;border-radius:11px;padding:11px 12px;display:flex;align-items:center;gap:11px;text-align:left;font-size:13px;text-decoration:none}.nav-item:hover{background:#f7f9fc;color:#26344d}.nav-item.active{background:var(--app-blue-soft);color:var(--app-blue);font-weight:700}.nav-icon{width:20px;text-align:center}.sidebar-bottom{margin-top:auto;display:grid;gap:8px}.profile-chip{padding:10px;border:1px solid var(--app-line);border-radius:13px;display:flex;align-items:center;gap:10px}.avatar,.mini-avatar{display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#2563ff,#7da7ff);font-weight:800}.avatar{width:34px;height:34px;border-radius:50%}.profile-chip b{font-size:12px}.profile-chip span{display:block;color:#8793a6;font-size:10px}.main{min-width:0}.topbar{height:72px;position:sticky;top:0;z-index:20;background:rgba(244,247,251,.9);backdrop-filter:blur(16px);border-bottom:1px solid rgba(226,232,242,.9);display:flex;align-items:center;gap:14px;padding:0 24px}.menu-btn{display:none;border:1px solid var(--app-line);background:#fff;border-radius:10px;width:42px;height:42px}.search-wrap{flex:1;max-width:560px;position:relative}.search-wrap input{width:100%;height:42px;border:1px solid var(--app-line);background:#fff;border-radius:12px;padding:0 48px 0 14px;outline:none}.search-wrap input:focus,.field input:focus,.field select:focus,.field textarea:focus,.toolbar input:focus,.toolbar select:focus{border-color:#9bb9ff;box-shadow:0 0 0 3px rgba(37,99,255,.10)}.search-key{position:absolute;right:10px;top:10px;background:#f2f5f9;color:#8a95a7;font-size:10px;border-radius:6px;padding:4px 6px}.top-actions{margin-left:auto;display:flex;gap:8px}.icon-btn,.primary-btn,.secondary-btn,.danger-btn,.text-btn{min-height:40px;border-radius:11px;border:1px solid var(--app-line);background:#fff;color:#344258;padding:0 13px;font-weight:700;font-size:12px}.primary-btn{background:var(--app-blue);color:#fff;border-color:var(--app-blue)}.danger-btn{background:var(--app-red-soft);color:var(--app-red);border-color:#ffdada}.text-btn{border:0;background:transparent;color:var(--app-blue);padding:0;min-height:auto}.secondary-btn:hover,.icon-btn:hover{background:#f8faff}.primary-btn:hover{filter:brightness(.97)}.content{padding:28px 28px 70px;max-width:1540px;margin:auto}.demo-banner{margin-bottom:18px;padding:12px 14px;border:1px solid #ccdcff;background:#f2f6ff;border-radius:13px;color:#42649e;font-size:11px;display:flex;justify-content:space-between;gap:15px;align-items:center}.demo-banner b{color:#244f9b}.demo-banner span{color:#58739e}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}.page-head h1{font-size:27px;letter-spacing:-.03em;margin:0 0 5px}.page-head p{margin:0;color:var(--app-muted);font-size:13px;max-width:720px}.page-actions{display:flex;gap:8px;flex-wrap:wrap}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.metric{background:#fff;border:1px solid var(--app-line);border-radius:16px;padding:18px}.metric.clickable{cursor:pointer}.metric.clickable:hover{border-color:#c9d9ff}.metric-top{display:flex;justify-content:space-between;gap:10px;color:#768397;font-size:11px}.metric-icon{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--app-blue-soft);color:var(--app-blue)}.metric b{display:block;font-size:24px;margin:10px 0 3px;letter-spacing:-.03em}.trend{font-size:10px;color:var(--app-green)}.muted{color:var(--app-muted)}.grid-2,.grid-3{display:grid;gap:14px;margin-top:14px}.grid-2{grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr)}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.panel{background:#fff;border:1px solid var(--app-line);border-radius:17px;padding:18px;min-width:0}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}.panel-head h2{font-size:14px;margin:0 0 3px}.panel-head span{font-size:10px;color:#7d899c}.panel-sub{font-size:10px;color:#8592a5}.line-chart{height:255px;width:100%;position:relative}.line-chart.compact{height:190px}.line-chart svg{width:100%;height:100%;overflow:visible}.chart-gridline{stroke:#e9eef6;stroke-width:1}.chart-line{fill:none;stroke:var(--app-blue);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.chart-line.alt{stroke:#6e8fd8;stroke-dasharray:5 5}.chart-area{fill:url(#areaGradient)}.chart-label{font-size:9px;fill:#8592a5}.activity-list{display:grid;gap:12px}.activity-item{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center}.activity-dot{width:34px;height:34px;border-radius:11px;background:var(--app-blue-soft);color:var(--app-blue);display:grid;place-items:center;font-size:12px}.activity-item b{font-size:11px;display:block}.activity-item small{font-size:10px;color:#8894a6}.activity-item time{font-size:9px;color:#9aa5b5}.table-wrap{overflow:auto;border:1px solid var(--app-line);border-radius:16px;background:#fff}.data-table{width:100%;border-collapse:collapse;min-width:840px}.data-table.compact{min-width:680px}.data-table th,.data-table td{text-align:left;padding:13px 14px;border-bottom:1px solid #edf1f6;font-size:12px;vertical-align:middle}.data-table th{font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:#8390a3;background:#fbfcfe;white-space:nowrap}.data-table tr:last-child td{border-bottom:0}.data-table tbody tr:hover{background:#fbfdff}.cell-link{border:0;background:transparent;color:#16233a;padding:0;text-align:left;font-weight:700}.cell-link:hover{color:var(--app-blue);text-decoration:underline}.subline{display:block;color:#8b97a8;font-size:9px;margin-top:3px}.client-cell{display:flex;align-items:center;gap:10px}.mini-avatar{width:30px;height:30px;border-radius:10px;font-size:10px;flex:0 0 auto}.status{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;font-size:9px;font-weight:800;text-transform:capitalize;background:var(--app-blue-soft);color:var(--app-blue)}.status.done,.status.paid,.status.active,.status.settled,.status.available{background:var(--app-green-soft);color:#118558}.status.pending,.status.review,.status.busy{background:var(--app-amber-soft);color:#b8710b}.status.blocked,.status.overdue,.status.inactive{background:var(--app-red-soft);color:#c44040}.status.archived{background:#eef1f5;color:#657286}.row-actions{display:flex;gap:6px;align-items:center}.mini-btn{height:31px;border:1px solid var(--app-line);background:#fff;border-radius:9px;padding:0 9px;font-size:10px;font-weight:700;color:#526177}.mini-btn:hover{border-color:#c9d9ff;color:var(--app-blue)}.status-select{height:32px;border:1px solid var(--app-line);border-radius:9px;background:#fff;padding:0 8px;color:#445168;font-size:10px}.toolbar{display:flex;gap:9px;align-items:center;margin-bottom:14px;flex-wrap:wrap}.toolbar input,.toolbar select{height:40px;border:1px solid var(--app-line);background:#fff;border-radius:10px;padding:0 12px;color:#344258;outline:none}.toolbar input{min-width:240px}.toolbar .spacer{margin-left:auto}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.card{background:#fff;border:1px solid var(--app-line);border-radius:16px;padding:18px;min-width:0}.card.clickable{cursor:pointer}.card.clickable:hover{border-color:#c9d9ff}.card h3{font-size:14px;margin:0 0 6px}.card p{font-size:11px;color:#748197;margin:0}.card-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.card-actions{display:flex;gap:6px;margin-top:15px;flex-wrap:wrap}.progress{height:8px;border-radius:999px;background:#edf1f6;overflow:hidden;margin-top:13px}.progress i{display:block;height:100%;background:var(--app-blue);border-radius:999px}.card-meta{display:flex;justify-content:space-between;gap:10px;margin-top:12px;color:#8190a3;font-size:10px}.bar-list{display:grid;gap:14px}.bar-row{display:grid;grid-template-columns:minmax(100px,140px) minmax(0,1fr) 82px;align-items:center;gap:12px;font-size:11px}.bar-progress,.native-progress{appearance:none;-webkit-appearance:none;width:100%;height:10px;border:0;border-radius:999px;overflow:hidden;background:#edf1f6}.bar-progress::-webkit-progress-bar,.native-progress::-webkit-progress-bar{background:#edf1f6;border-radius:999px}.bar-progress::-webkit-progress-value,.native-progress::-webkit-progress-value{background:var(--app-blue);border-radius:999px}.bar-progress::-moz-progress-bar,.native-progress::-moz-progress-bar{background:var(--app-blue);border-radius:999px}.native-progress{margin-top:13px;height:8px}.donut-row{display:grid;grid-template-columns:170px 1fr;gap:22px;align-items:center}.donut{width:160px;aspect-ratio:1;position:relative}.donut-svg{width:100%;height:100%;display:block}.donut-base,.donut-paid,.donut-pending,.donut-overdue{stroke-width:6}.donut-base{stroke:#edf1f6}.donut-paid{stroke:var(--app-green)}.donut-pending{stroke:var(--app-amber)}.donut-overdue{stroke:var(--app-red)}.donut-center{position:absolute;inset:0;display:grid;place-items:center;z-index:2;text-align:center}.donut-center b{font-size:20px}.donut-center span{font-size:9px;color:#7e8a9d;display:block}.legend{display:grid;gap:10px}.legend-item{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px}.legend-label{display:flex;align-items:center;gap:8px}.legend-dot{width:9px;height:9px;border-radius:50%;background:var(--app-blue)}.legend-dot.green{background:var(--app-green)}.legend-dot.amber{background:var(--app-amber)}.legend-dot.red{background:var(--app-red)}.insight-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.insight{padding:13px;border:1px solid var(--app-line);border-radius:13px;background:#fbfcfe}.insight b{display:block;font-size:16px}.insight span{font-size:9px;color:#8190a3}.calendar-shell{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--app-line);border-radius:16px;overflow:hidden;background:#fff}.cal-head,.cal-day{min-height:106px;padding:9px;border-right:1px solid #edf1f6;border-bottom:1px solid #edf1f6;font-size:11px}.cal-head{min-height:auto;background:#fbfcfe;text-transform:uppercase;color:#8995a8;font-size:9px}.cal-day:nth-child(7n){border-right:0}.cal-day.other{background:#fafbfc;color:#aab2be}.cal-day.today{box-shadow:inset 0 0 0 2px #bdd0ff}.cal-day b{font-size:11px}.cal-event{display:block;width:100%;border:0;text-align:left;margin-top:6px;padding:6px 7px;border-radius:7px;background:var(--app-blue-soft);color:var(--app-blue);font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cal-event:hover{background:#dfe9ff}.agenda{display:grid;gap:10px}.agenda-item{border:1px solid var(--app-line);border-radius:12px;padding:12px;background:#fff}.agenda-item button{border:0;background:transparent;padding:0;text-align:left;font-weight:700;color:#26344d}.agenda-item small{display:block;color:#8490a2;margin-top:4px}.message-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px}.thread-list,.message-panel{background:#fff;border:1px solid var(--app-line);border-radius:16px;overflow:hidden}.thread{width:100%;border:0;background:#fff;padding:14px;text-align:left;border-bottom:1px solid #edf1f6}.thread.active{background:#f1f5ff}.thread b{display:block;font-size:12px}.thread span{display:block;color:#7f8b9e;font-size:10px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message-panel{display:flex;flex-direction:column;min-height:560px}.message-head{padding:16px;border-bottom:1px solid #edf1f6;display:flex;justify-content:space-between;gap:10px}.message-head b{font-size:13px}.messages{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1}.bubble{max-width:72%;padding:10px 12px;border-radius:13px;background:#f1f4f8;color:#344258;font-size:12px}.bubble.me{align-self:flex-end;background:var(--app-blue);color:#fff}.reply-box{display:flex;gap:8px;padding:12px;border-top:1px solid #edf1f6}.reply-box input{flex:1;height:40px;border:1px solid var(--app-line);border-radius:10px;padding:0 12px;outline:none}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.setting-card{background:#fff;border:1px solid var(--app-line);border-radius:16px;padding:18px}.setting-card h3{font-size:14px;margin:0 0 5px}.setting-card>p{font-size:10px;color:#7c899c;margin:0 0 14px}.field{display:grid;gap:6px;margin-bottom:12px}.field label{font-size:10px;font-weight:700;color:#55637a}.field input,.field select,.field textarea{width:100%;border:1px solid var(--app-line);border-radius:10px;padding:10px 11px;outline:none;background:#fff;color:#29364b}.field textarea{min-height:90px;resize:vertical}.field-help{font-size:9px;color:#8a96a8}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.switch-row{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:12px 0;border-bottom:1px solid #edf1f6}.switch-row:last-child{border-bottom:0}.switch-row b{font-size:11px}.switch-row span{display:block;font-size:9px;color:#8591a3;margin-top:2px}.switch{width:42px;height:24px;border:0;border-radius:999px;background:#dfe5ee;padding:3px;position:relative}.switch i{display:block;width:18px;height:18px;border-radius:50%;background:#fff;transition:.18s}.switch.on{background:var(--app-blue)}.switch.on i{transform:translateX(18px)}.archive-box{border:1px dashed #cfd9e9;border-radius:14px;padding:14px;background:#fbfcfe}.archive-box h3{font-size:12px;margin:0 0 8px}.archive-box p{font-size:10px;color:#8290a4;margin:0}.empty{padding:42px;text-align:center;color:#8692a5}.empty strong{display:block;color:#4c5a70;margin-bottom:4px}.search-results{position:absolute;top:47px;left:0;right:0;background:#fff;border:1px solid var(--app-line);border-radius:12px;box-shadow:0 18px 42px rgba(20,38,71,.16);overflow:hidden;display:none;z-index:40}.search-results.show{display:block}.search-result{display:block;width:100%;border:0;background:#fff;text-align:left;padding:10px 12px;border-bottom:1px solid #edf1f6}.search-result:last-child{border-bottom:0}.search-result:hover{background:#f8faff}.search-result b{display:block;font-size:11px}.search-result small{font-size:9px;color:#8d99aa}.modal-backdrop,.drawer-backdrop{position:fixed;inset:0;background:rgba(7,14,28,.42);display:none}.modal-backdrop{z-index:100;align-items:center;justify-content:center;padding:18px}.modal-backdrop.show{display:flex}.modal{width:min(590px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:18px;border:1px solid var(--app-line);box-shadow:0 30px 80px rgba(12,29,58,.25);padding:20px}.modal.wide{width:min(760px,100%)}.modal-head,.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:16px}.modal-head h2,.drawer-head h2{font-size:18px;margin:2px 0 0}.modal-kicker,.drawer-kicker{font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:#8a96a8;font-weight:800}.close-btn{border:0;background:#f1f4f8;border-radius:9px;width:34px;height:34px;flex:0 0 auto}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.form-error{display:none;color:var(--app-red);font-size:10px;background:var(--app-red-soft);border-radius:10px;padding:9px 10px}.form-error.show{display:block}.drawer-backdrop{z-index:89}.drawer-backdrop.show{display:block}.detail-drawer{position:fixed;right:0;top:0;bottom:0;width:min(520px,96vw);background:#fff;z-index:90;transform:translateX(102%);transition:.22s ease;box-shadow:-24px 0 60px rgba(11,24,48,.18);padding:20px;overflow:auto}.detail-drawer.show{transform:none}.drawer-body{padding-bottom:40px}.detail-hero{padding:16px;border:1px solid var(--app-line);border-radius:15px;background:#fbfcfe;margin-bottom:14px}.detail-hero h3{font-size:18px;margin:0 0 4px}.detail-hero p{font-size:11px;color:#768397;margin:0}.detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}.detail-stat{border:1px solid var(--app-line);border-radius:12px;padding:12px}.detail-stat span{display:block;font-size:9px;color:#8491a4;text-transform:uppercase;letter-spacing:.05em}.detail-stat b{display:block;font-size:13px;margin-top:4px}.detail-section{margin-top:18px}.detail-section h3{font-size:12px;margin:0 0 9px}.detail-list{display:grid;gap:8px}.detail-row{border:1px solid var(--app-line);border-radius:11px;padding:10px;display:flex;justify-content:space-between;gap:10px;align-items:center}.detail-row button{border:0;background:transparent;text-align:left;padding:0;color:#26344d;font-weight:700;font-size:11px}.detail-row small{display:block;color:#8995a7;font-size:9px;margin-top:2px}.history-item{display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:start}.history-line{width:10px;height:10px;margin-top:4px;border-radius:50%;background:var(--app-blue)}.history-item b{display:block;font-size:11px}.history-item p{font-size:9px;color:#7f8c9f;margin:3px 0 0}.history-item time{font-size:8px;color:#9aa5b4;white-space:nowrap}.toast{position:fixed;right:20px;bottom:20px;z-index:120;background:#0b1327;color:#fff;padding:12px 15px;border-radius:12px;box-shadow:0 16px 44px rgba(3,10,24,.25);font-size:12px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:none}.mobile-overlay{display:none}.app-footer{padding:0 28px 30px;color:#8b96a7;font-size:10px}.app-footer a{color:#566780}.session-note{border-left:3px solid var(--app-blue);padding:10px 12px;background:#f6f9ff;color:#627493;font-size:10px;border-radius:0 10px 10px 0}.pill-tabs{display:flex;gap:6px;padding:4px;background:#eef2f7;border-radius:12px;width:max-content;max-width:100%;overflow:auto;margin-bottom:14px}.pill-tab{border:0;border-radius:9px;background:transparent;color:#66758b;padding:8px 11px;font-size:10px;font-weight:700;white-space:nowrap}.pill-tab.active{background:#fff;color:var(--app-blue);box-shadow:0 1px 4px rgba(18,36,67,.08)}
@media(max-width:1120px){:root{--side:210px}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-2{grid-template-columns:1fr}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.calendar-shell{grid-template-columns:1fr}.message-layout{grid-template-columns:250px minmax(0,1fr)}.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:780px){.app-shell{display:block}.sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;transform:translateX(-105%);transition:.22s;box-shadow:0 0 40px rgba(11,25,50,.14)}.sidebar.open{transform:none}.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(10,20,40,.34);z-index:25}.mobile-overlay.show{display:block}.menu-btn{display:inline-grid;place-items:center}.topbar{height:64px;padding:0 12px}.search-wrap{max-width:none}.search-key{display:none}.top-actions #historyTop{display:none}.top-actions .icon-btn{width:42px;padding:0;font-size:0}.top-actions .icon-btn:after{content:"↻";font-size:17px}.content{padding:20px 12px 60px}.page-head{align-items:flex-start;flex-direction:column}.metric-grid{grid-template-columns:1fr 1fr;gap:10px}.metric{padding:14px}.metric b{font-size:20px}.cards,.settings-grid,.grid-3{grid-template-columns:1fr}.message-layout{grid-template-columns:1fr}.thread-list{display:flex;overflow:auto}.thread{min-width:180px;border-right:1px solid #edf1f6}.message-panel{min-height:480px}.calendar-scroll{overflow:auto}.calendar-grid{min-width:680px}.toolbar input{min-width:0;flex:1}.app-footer{padding-left:12px;padding-right:12px}.demo-banner{align-items:flex-start;flex-direction:column}.donut-row{grid-template-columns:1fr}.donut{margin:auto}.detail-drawer{width:min(520px,100vw)}.field-row{grid-template-columns:1fr}.bar-row{grid-template-columns:90px minmax(0,1fr) 70px}.insight-grid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.metric-grid{grid-template-columns:1fr}.top-actions .primary-btn{font-size:0;width:42px;padding:0}.top-actions .primary-btn:after{content:"+";font-size:20px}.page-head h1{font-size:23px}.bubble{max-width:88%}.detail-grid,.insight-grid{grid-template-columns:1fr}.page-actions{width:100%}.page-actions>*{flex:1}.toolbar{align-items:stretch}.toolbar>*{flex:1 1 140px}.donut{width:140px}.drawer-head{position:sticky;top:-20px;background:#fff;padding-top:12px;z-index:2}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.mt10{margin-top:10px}.mt14{margin-top:14px}.mt16{margin-top:16px}.mb14{margin-bottom:14px}.check-input{margin-right:6px}.link-button{display:inline-flex;align-items:center;text-decoration:none}.search-empty{padding:15px}


/* ClyraHQ v3 interaction clarity */
.demo-banner-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.session-chip{display:inline-flex!important;align-items:center;min-height:30px;padding:0 10px;border:1px solid #c9d9ff;border-radius:999px;background:#fff!important;color:#315b9d!important;font-weight:800;font-size:9px!important;white-space:nowrap}
.demo-guide{margin:0 0 24px;border:1px solid #d7e2f5;background:#fff;border-radius:18px;padding:16px;display:grid;grid-template-columns:minmax(210px,.8fr) minmax(0,1.8fr);gap:16px;align-items:center;box-shadow:0 10px 28px rgba(33,59,105,.05)}
.demo-guide-copy{display:grid;gap:4px}.demo-guide-copy>span{font-size:9px;letter-spacing:.12em;font-weight:900;color:var(--app-blue)}.demo-guide-copy>b{font-size:14px}.demo-guide-copy>small{font-size:10px;line-height:1.5;color:var(--app-muted)}
.demo-guide-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.demo-guide-actions button{border:1px solid var(--app-line);background:#f9fbff;border-radius:12px;padding:11px;text-align:left;min-width:0;color:#26344d}.demo-guide-actions button:hover,.demo-guide-actions button:focus-visible{border-color:#a9c3ff;background:#f0f5ff;box-shadow:0 0 0 3px rgba(37,99,255,.08)}.demo-guide-actions strong{display:block;font-size:11px}.demo-guide-actions small{display:block;margin-top:3px;font-size:8.5px;color:#7f8ca0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.click-card,.click-row,.agenda-item[data-detail]{cursor:pointer}.click-card{position:relative;transition:border-color .16s,transform .16s,box-shadow .16s}.click-card:hover{border-color:#b9ccf8;transform:translateY(-1px);box-shadow:0 12px 26px rgba(24,52,102,.07)}.click-card:after{content:"Open →";position:absolute;right:14px;top:14px;font-size:9px;font-weight:800;color:var(--app-blue);opacity:.7}.click-row:hover td{background:#f6f9ff}.click-row td:first-child{position:relative}.click-row td:first-child:after{content:"Open";display:inline-block;margin-left:7px;padding:3px 6px;border-radius:999px;background:var(--app-blue-soft);color:var(--app-blue);font-size:8px;font-weight:800;vertical-align:middle}.agenda-item[data-detail]:hover{border-color:#b9ccf8;background:#f8faff}
.detail-drawer.show{border-left:1px solid #dfe7f2}.detail-actions .primary-btn,.detail-actions .secondary-btn,.detail-actions .danger-btn{min-height:42px}.card-actions{position:relative;z-index:2}.card-actions .mini-btn,.row-actions .mini-btn{min-height:34px;padding:0 10px;border:1px solid #d9e2ef;border-radius:9px;background:#fff;color:#38475f;font-size:10px;font-weight:800}.card-actions .mini-btn:hover,.row-actions .mini-btn:hover{border-color:#afc5f7;background:#f3f7ff;color:var(--app-blue)}
.demo-hint{font-size:9px;color:#7f8da2;margin-top:7px}.page-head p strong{color:#344258}
@media(max-width:1120px){.demo-guide{grid-template-columns:1fr}.demo-guide-actions{grid-template-columns:repeat(5,minmax(110px,1fr));overflow:auto;padding-bottom:2px}}
@media(max-width:780px){.demo-banner-actions{width:100%;justify-content:space-between}.demo-guide{padding:13px}.demo-guide-actions{display:flex;overflow:auto}.demo-guide-actions button{min-width:132px;flex:0 0 132px}.click-card:after{content:"Tap to open →"}.click-row td:first-child:after{content:"Tap"}}