@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap);:root[data-theme=light]{--bg-body:#f0f4f8;--bg-card:#fff;--bg-sidebar:#fff;--bg-hover:#f8fafc;--bg-muted:#f1f5f9;--t-base:#1e293b;--t-muted:#64748b;--t-light:#94a3b8;--t-inverse:#fff;--border:#e4e8ef;--border-soft:#eef1f5;--primary:#2563eb;--primary-light:#3b82f6;--primary-dark:#1d4ed8;--primary-soft:#eff6ff;--primary-ring:rgba(37,99,235,.18);--success:#10b981;--success-soft:#ecfdf5;--warning:#f59e0b;--warning-soft:#fffbeb;--danger:#ef4444;--danger-soft:#fef2f2;--info:#0ea5e9;--info-soft:#f0f9ff;--purple:#8b5cf6;--purple-soft:#f5f3ff;--pink:#ec4899;--pink-soft:#fdf2f8;--teal:#14b8a6;--teal-soft:#f0fdfa;--orange:#f97316;--orange-soft:#fff7ed;--shadow-sm:0 1px 2px 0 rgba(15,23,42,.04);--shadow-card:0 1px 3px 0 rgba(15,23,42,.06),0 1px 2px -1px rgba(15,23,42,.04);--shadow-lg:0 10px 15px -3px rgba(15,23,42,.08),0 4px 6px -4px rgba(15,23,42,.05);--overlay:rgba(240,244,248,.72)}:root[data-theme=dark]{--bg-body:#0b1120;--bg-card:#141b2d;--bg-sidebar:#141b2d;--bg-hover:#1c2438;--bg-muted:#1a2237;--t-base:#f1f5f9;--t-muted:#94a3b8;--t-light:#64748b;--t-inverse:#0b1120;--border:#222c42;--border-soft:#1a2237;--primary:#60a5fa;--primary-light:#93c5fd;--primary-dark:#3b82f6;--primary-soft:#0f2847;--primary-ring:rgba(96,165,250,.24);--success:#34d399;--success-soft:#0f2a20;--warning:#fbbf24;--warning-soft:#2b1f08;--danger:#f87171;--danger-soft:#2b1414;--info:#38bdf8;--info-soft:#0d2232;--purple:#a78bfa;--purple-soft:#1e1a2c;--pink:#f472b6;--pink-soft:#2a1424;--teal:#2dd4bf;--teal-soft:#0e2826;--orange:#fb923c;--orange-soft:#2a1810;--shadow-sm:0 1px 2px 0 rgba(0,0,0,.4);--shadow-card:0 1px 3px 0 rgba(0,0,0,.3),0 1px 2px -1px rgba(0,0,0,.25);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.5),0 4px 6px -4px rgba(0,0,0,.4);--overlay:rgba(11,17,32,.72)}*,:after,:before{box-sizing:border-box}body,html{margin:0;padding:0}a{-webkit-text-decoration:none;text-decoration:none}a,button{color:inherit}button{background:none;border:0;cursor:pointer;font:inherit;padding:0}ol,ul{list-style:none;margin:0;padding:0}img,svg{display:block;max-width:100%}input,textarea{color:inherit;font:inherit}body{background:var(--bg-body);color:var(--t-base);font-family:Inter,system-ui,Segoe UI,Ubuntu,Cantarell,Noto Sans,-apple-system,Roboto,sans-serif;font-feature-settings:"cv11","ss01","ss03";font-size:14px;font-weight:400;letter-spacing:-.003em;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background-color .28s ease,color .28s ease}::-moz-selection{background:var(--primary);color:#fff}::selection{background:var(--primary);color:#fff}.mono{font-family:JetBrains Mono,ui-monospace,SFMono-Regular,monospace}.eyebrow{color:var(--t-light);font-family:JetBrains Mono,monospace;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}@keyframes rise-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes bar-in{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes draw{to{stroke-dashoffset:0}}@keyframes fade-in{to{opacity:1}}.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}.d-sidebar{background:var(--bg-sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;gap:22px;height:100vh;overflow-y:auto;padding:22px 16px 18px;position:sticky;top:0}.d-sidebar::-webkit-scrollbar{width:4px}.d-sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.brand{align-items:center;border-bottom:1px solid var(--border-soft);display:flex;gap:10px;padding:4px 10px 20px}.brand-logo{background:var(--primary);border-radius:8px;box-shadow:0 4px 10px -2px color-mix(in oklab,var(--primary) 40%,transparent);display:grid;height:32px;place-items:center;width:32px}.brand-logo svg{height:18px;width:18px}.brand-text{line-height:1.1}.brand-name{color:var(--t-base);font-family:Inter Tight,Inter,sans-serif;font-size:15.5px;font-weight:700;letter-spacing:-.02em}.brand-tag{color:var(--t-light);font-family:JetBrains Mono,monospace;font-size:9.5px;letter-spacing:.1em}.nav-section{display:flex;flex-direction:column;gap:2px}.nav-label{color:var(--t-light);font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.2em;padding:0 10px 6px;text-transform:uppercase}.nav-link{align-items:center;border-radius:8px;color:var(--t-muted);display:flex;font-size:13px;font-weight:500;gap:12px;line-height:1.2;padding:9px 12px;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease}.nav-link>svg{display:block;fill:none;flex-shrink:0;height:17px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.75;width:17px}.nav-link>span:not(.nav-badge){flex:1;min-width:0}.nav-link:hover{background:var(--bg-hover);color:var(--t-base)}.nav-link.is-active{background:var(--primary-soft);box-shadow:inset 3px 0 0 var(--primary);color:var(--primary)}.nav-badge{border-radius:999px;flex:0 0 auto;font-family:Inter,sans-serif;font-size:9px;font-weight:700;letter-spacing:.04em;line-height:1.4;margin-left:auto;padding:2px 6px}.nav-badge.pro{background:var(--primary);color:#fff}.nav-badge.hot{background:var(--danger-soft);color:var(--danger)}.nav-badge.new{background:var(--success-soft);color:var(--success)}.nav-item-group .nav-link .chev{height:11px;margin-left:auto;transition:transform .2s ease;width:11px}.nav-item-group.is-open .nav-link .chev{transform:rotate(90deg)}.nav-submenu{margin-left:20px;max-height:0;overflow:hidden;padding-left:14px;position:relative;transition:max-height .28s cubic-bezier(.4,0,.2,1)}.nav-submenu:before{background:var(--border);bottom:6px;content:"";left:0;position:absolute;top:6px;width:1px}.nav-item-group.is-open .nav-submenu{max-height:400px;padding-bottom:6px;padding-top:4px}.nav-submenu a{align-items:center;border-radius:6px;color:var(--t-muted);display:flex;font-size:12.5px;padding:7px 10px;transition:color .16s ease,background-color .16s ease,padding-left .16s ease}.nav-submenu a:hover{background:var(--bg-hover);color:var(--t-base);padding-left:13px}.nav-submenu a.is-active{background:var(--primary-soft);color:var(--primary);font-weight:600}.sidebar-footer{border-top:1px solid var(--border-soft);margin-top:auto;padding-top:16px}.workspace{align-items:center;border-radius:8px;display:flex;gap:10px;padding:6px 10px;transition:background-color .18s ease}.workspace:hover{background:var(--bg-hover)}.workspace-avatar{background:linear-gradient(135deg,var(--primary),var(--purple));border-radius:50%;color:#fff;display:grid;flex-shrink:0;font-size:12.5px;font-weight:600;height:32px;place-items:center;width:32px}.workspace-text{line-height:1.2;min-width:0}.workspace-name{color:var(--t-base);font-size:13px;font-weight:600}.workspace-role{color:var(--t-light);font-size:11px}.workspace-chev{color:var(--t-light);margin-left:auto}.main{display:flex;flex-direction:column;min-width:0}.hamburger{align-items:center;border-radius:8px;color:var(--t-base);display:none;height:36px;justify-content:center;margin-right:4px;transition:background .16s;width:36px}.hamburger:hover{background:var(--bg-hover)}.hamburger svg{height:20px;width:20px}.drawer-backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:rgba(15,23,42,.5);inset:0;opacity:0;position:fixed;transition:opacity .24s ease,visibility .24s;visibility:hidden;z-index:90}body.has-drawer-open .drawer-backdrop{opacity:1;visibility:visible}.d-topbar{backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);background:var(--overlay);border-bottom:1px solid var(--border);height:60px;justify-content:space-between;padding:0 32px;position:sticky;top:0;z-index:10}.crumbs,.d-topbar{align-items:center;display:flex}.crumbs{color:var(--t-muted);font-size:13px;font-weight:500;gap:10px}.crumbs .sep{color:var(--t-light)}.crumbs .current{color:var(--t-base);font-weight:600}.topbar-actions{align-items:center;display:flex;gap:6px}.cmd{align-items:center;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--t-light);display:inline-flex;font-size:13px;gap:10px;min-width:220px;padding:7px 10px 7px 12px;transition:all .2s ease}.cmd:hover{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);color:var(--t-muted)}.cmd svg{fill:none;height:14px;stroke:currentColor;stroke-width:2;width:14px}.cmd span{flex:1;text-align:left}.kbd{background:var(--bg-muted);border:1px solid var(--border);border-radius:4px;color:var(--t-muted);font-family:JetBrains Mono,monospace;font-size:10px;padding:2px 6px}.icon-btn{border-radius:8px;color:var(--t-muted);display:grid;height:36px;place-items:center;position:relative;transition:background .18s,color .18s;width:36px}.icon-btn:hover{background:var(--bg-hover);color:var(--t-base)}.icon-btn>svg{fill:none;height:17px;stroke:currentColor;stroke-width:1.8;width:17px}.icon-btn .count{border:2px solid var(--bg-body);border-radius:999px;display:grid;font-size:9.5px;font-weight:600;height:16px;line-height:1;min-width:16px;padding:0 4px;place-items:center;position:absolute;right:5px;top:5px}.icon-btn .count.danger{background:var(--danger);color:#fff}.icon-btn .count.info{background:var(--info);color:#fff}.avatar{background:linear-gradient(135deg,var(--primary),var(--purple));border:2px solid var(--bg-card);border-radius:50%;box-shadow:var(--shadow-sm);color:#fff;cursor:pointer;display:grid;font-size:13px;font-weight:600;height:34px;margin-left:6px;place-items:center;width:34px}.d-footer{align-items:center;color:var(--t-muted);display:flex;font-size:12px;justify-content:space-between;padding:24px 32px 28px}.d-footer a{color:var(--primary);font-weight:600}.d-footer a:hover{color:var(--primary-dark)}.d-footer-meta{color:var(--t-light);display:flex;font-family:JetBrains Mono,monospace;font-size:10.5px;gap:20px;letter-spacing:.06em}.dd-wrap{position:relative}.dd-menu{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);min-width:340px;opacity:0;overflow:hidden;position:absolute;right:0;top:calc(100% + 10px);transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease,visibility .18s;visibility:hidden;z-index:100}.dd-wrap.is-open .dd-menu{opacity:1;transform:translateY(0);visibility:visible}.dd-head{align-items:center;border-bottom:1px solid var(--border-soft);color:var(--t-base);display:flex;font-size:12.5px;font-weight:600;gap:10px;letter-spacing:.01em;padding:14px 18px}.dd-head svg{color:var(--t-muted);fill:none;height:14px;stroke:currentColor;stroke-width:1.8;width:14px}.dd-list{max-height:320px;overflow-y:auto}.dd-list::-webkit-scrollbar{width:4px}.dd-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.dd-item{align-items:center;border-bottom:1px solid var(--border-soft);display:grid;gap:12px;grid-template-columns:36px 1fr;padding:12px 18px;transition:background .15s ease}.dd-item:last-child{border-bottom:0}.dd-item:hover{background:var(--bg-hover)}.dd-avatar{border-radius:50%;color:#fff;display:grid;flex-shrink:0;font-size:12px;font-weight:600;height:36px;place-items:center;width:36px}.dd-avatar.a1{background:linear-gradient(135deg,var(--primary),var(--purple))}.dd-avatar.a2{background:linear-gradient(135deg,var(--success),var(--teal))}.dd-avatar.a3{background:linear-gradient(135deg,var(--danger),var(--warning))}.dd-body{min-width:0}.dd-text{color:var(--t-muted);font-size:13px;line-height:1.4;margin-bottom:3px}.dd-text strong{color:var(--t-base);font-weight:600}.dd-text em{color:var(--primary);font-style:normal}.dd-preview{color:var(--t-muted);display:-webkit-box;font-size:12.5px;-webkit-line-clamp:2;line-height:1.45;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;margin-top:2px}.dd-row-head{align-items:baseline;display:flex;gap:8px;justify-content:space-between}.dd-row-head strong{color:var(--t-base);font-size:13px;font-weight:600}.dd-time{color:var(--t-light);flex-shrink:0;font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.04em}.dd-footer{border-top:1px solid var(--border-soft);color:var(--primary);display:block;font-size:12.5px;font-weight:600;padding:12px 18px;text-align:center;transition:color .18s,background .18s}.dd-footer:hover{background:var(--bg-hover);color:var(--primary-dark)}.dd-menu.dd-profile{min-width:220px}.dd-menu-item{align-items:center;color:var(--t-base);display:flex;font-size:13px;gap:12px;padding:10px 18px;transition:background .15s,color .15s}.dd-menu-item:hover{background:var(--bg-hover)}.dd-menu-item svg{color:var(--t-muted);fill:none;height:15px;stroke:currentColor;stroke-width:1.75;width:15px}.dd-menu-item.danger,.dd-menu-item.danger svg{color:var(--danger)}.dd-menu-item.danger:hover{background:var(--danger-soft)}.dd-divider{background:var(--border-soft);height:1px;margin:6px 0}.dd-profile-head{border-bottom:1px solid var(--border-soft);padding:14px 18px}.dd-profile-name{color:var(--t-base);font-size:13px;font-weight:600}.dd-profile-email{color:var(--t-muted);font-family:JetBrains Mono,monospace;font-size:11.5px;letter-spacing:.02em;margin-top:2px}.content{padding:32px 32px 24px;width:100%}.hero{align-items:flex-end;animation:rise-in .6s cubic-bezier(.2,.7,.2,1) both;display:flex;gap:32px;justify-content:space-between;margin-bottom:28px}.hero-text .eyebrow{display:block;margin-bottom:10px}.hero-title{color:var(--t-base);font-family:Inter Tight,Inter,sans-serif;font-size:clamp(28px,3.2vw,36px);font-weight:700;letter-spacing:-.028em;line-height:1.15;margin:0 0 8px}.hero-title .accent{color:var(--primary)}.hero-sub{color:var(--t-muted);font-size:14px;line-height:1.6;max-width:60ch}.hero-sub strong{color:var(--success);font-weight:600}.hero-actions{display:flex;flex-shrink:0;gap:8px}.btn{align-items:center;border:1px solid transparent;border-radius:8px;display:inline-flex;font-size:13px;font-weight:600;gap:8px;padding:9px 14px;transition:all .18s ease;white-space:nowrap}.btn svg{fill:none;height:14px;stroke:currentColor;stroke-width:2;width:14px}.btn--ghost{background:var(--bg-card);border-color:var(--border);color:var(--t-base)}.btn--ghost:hover{border-color:var(--t-light);box-shadow:var(--shadow-sm)}.btn--primary{background:var(--primary);box-shadow:0 1px 2px var(--primary-ring);color:#fff}.btn--primary:hover{background:var(--primary-dark)}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;min-width:0;padding:22px}.card-head{align-items:flex-end;border-bottom:1px solid var(--border-soft);display:flex;gap:16px;justify-content:space-between;margin-bottom:20px;padding:0 0 16px}.card-head>:last-child{flex-shrink:0;padding-bottom:2px}.card-title-wrap{min-width:0}.card-title-wrap .eyebrow{display:block;margin-bottom:4px}.card-title{color:var(--t-base);font-family:Inter Tight,Inter,sans-serif;font-size:16px;font-weight:700;letter-spacing:-.02em;margin:0}.card-action{align-items:center;color:var(--primary);display:inline-flex;font-size:12px;font-weight:600;gap:5px;transition:color .18s}.card-action:hover{color:var(--primary-dark)}.card-action svg{fill:none;height:12px;stroke:currentColor;stroke-width:2.2;width:12px}.grid{animation:rise-in .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:.26s;display:grid;gap:20px;grid-template-columns:repeat(12,minmax(0,1fr))}.grid>*{min-width:0}.col-6{grid-column:span 6}.col-12{grid-column:span 12}.table-scroll{overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch}.table-scroll::-webkit-scrollbar{height:4px}.table-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.table{border-collapse:collapse;width:100%}.table thead th{border-bottom:1px solid var(--border);color:var(--t-light);font-family:JetBrains Mono,monospace;font-size:10px;font-weight:500;letter-spacing:.14em;padding:10px 0 12px;text-align:left;text-transform:uppercase}.table tbody td{border-bottom:1px solid var(--border-soft);font-size:13px;padding:11px 0}.table tbody tr:last-child td{border-bottom:0}.table tbody tr{transition:background-color .16s ease}.table tbody tr:hover td{background:var(--bg-hover)}.table .cell-name{color:var(--t-base);font-weight:600}.table .cell-date{color:var(--t-muted);font-size:12px}.table .cell-price{color:var(--t-base);font-weight:600;text-align:right}.table .cell-price.pos{color:var(--success)}.table .cell-price.neg{color:var(--danger)}.tag{align-items:center;border-radius:999px;display:inline-flex;font-size:10.5px;font-weight:600;letter-spacing:.02em;line-height:1;padding:3px 9px}.tag.t-new{background:var(--purple-soft);color:var(--purple)}.tag.t-used{background:var(--orange-soft);color:var(--orange)}.tag.t-old{background:var(--warning-soft);color:var(--warning)}.tag.t-unavail{background:var(--danger-soft);color:var(--danger)}.tag.t-active{background:var(--success-soft);color:var(--success)}.tag.t-info{background:var(--info-soft);color:var(--info)}.form-grid{display:grid;gap:18px 22px;grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid .span-2{grid-column:span 2}@media(max-width:720px){.form-grid{grid-template-columns:1fr}.form-grid .span-2{grid-column:span 1}}.field{flex-direction:column;min-width:0}.field,.field-label{display:flex;gap:6px}.field-label{align-items:center;color:var(--t-base);font-size:12px;font-weight:600;letter-spacing:-.005em}.field-label .req{color:var(--danger)}.field-help{color:var(--t-muted);font-size:11.5px;line-height:1.45}.field-error{align-items:center;color:var(--danger);display:flex;font-size:11.5px;gap:4px}.input,.select,.textarea{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--t-base);font-family:inherit;font-size:13px;outline:0;padding:9px 12px;transition:border-color .18s,box-shadow .18s,background .18s;width:100%}.input::-moz-placeholder,.textarea::-moz-placeholder{color:var(--t-light)}.input::placeholder,.textarea::placeholder{color:var(--t-light)}.input:focus,.select:focus,.textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.input:disabled,.select:disabled,.textarea:disabled{background:var(--bg-muted);color:var(--t-light);cursor:not-allowed}.input.is-invalid,.select.is-invalid,.textarea.is-invalid{border-color:var(--danger)}.input.is-invalid:focus,.select.is-invalid:focus,.textarea.is-invalid:focus{box-shadow:0 0 0 3px var(--danger-soft)}.textarea{line-height:1.5;min-height:96px;resize:vertical}.select{-moz-appearance:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2364748B%27 stroke-width=%272%27><path d=%27m6 9 6 6 6-6%27/></svg>");background-position:right 10px center;background-repeat:no-repeat;padding-right:32px}.input-icon{position:relative}.input-icon .ico{color:var(--t-light);height:14px;left:11px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);width:14px}.input-icon .ico svg{fill:none;height:100%;stroke:currentColor;stroke-width:2;width:100%}.input-icon .input{padding-left:34px}.input-group{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;display:flex;overflow:hidden;transition:border-color .18s,box-shadow .18s}.input-group:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.input-group .addon{background:var(--bg-muted);border-right:1px solid var(--border);color:var(--t-muted);display:grid;font-family:JetBrains Mono,monospace;font-size:12px;padding:0 12px;place-items:center}.input-group .input{background:transparent;border:0;border-radius:0}.input-group .input:focus{box-shadow:none}.check{align-items:center;color:var(--t-base);cursor:pointer;display:inline-flex;font-size:13px;gap:8px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.check input{opacity:0;pointer-events:none;position:absolute}.check .box{background:var(--bg-card);border:1.5px solid var(--t-light);border-radius:5px;display:grid;flex-shrink:0;height:16px;place-items:center;transition:all .16s;width:16px}.check input:checked+.box{background:var(--primary);border-color:var(--primary)}.check input:checked+.box:after{border:solid #fff;border-width:0 1.8px 1.8px 0;content:"";height:8px;transform:rotate(45deg) translate(-1px,-1px);width:4px}.check.radio .box{border-radius:50%}.check.radio input:checked+.box:after{background:#fff;border:0;border-radius:50%;height:7px;transform:none;width:7px}.check:hover .box{border-color:var(--primary)}.check input:disabled+.box{cursor:not-allowed;opacity:.5}.switch{align-items:center;color:var(--t-base);cursor:pointer;display:inline-flex;font-size:13px;gap:10px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.switch input{opacity:0;pointer-events:none;position:absolute}.switch .track{background:var(--bg-muted);border:1px solid var(--border);border-radius:999px;flex-shrink:0;height:20px;position:relative;transition:background .2s;width:34px}.switch .track:after{background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);content:"";height:14px;left:2px;position:absolute;top:2px;transition:transform .2s cubic-bezier(.2,.7,.2,1);width:14px}.switch input:checked+.track{background:var(--primary);border-color:var(--primary)}.switch input:checked+.track:after{transform:translateX(14px)}.form-actions{align-items:center;border-top:1px solid var(--border-soft);display:flex;gap:10px;margin-top:18px;padding-top:18px}.form-actions .spacer{flex:1}.btn--secondary{background:var(--bg-muted);border-color:var(--border);color:var(--t-base)}.btn--secondary:hover{background:var(--bg-hover);border-color:var(--t-light)}.btn--success{background:var(--success);color:#fff}.btn--success:hover{background:color-mix(in oklab,var(--success) 90%,#000)}.btn--danger{background:var(--danger);color:#fff}.btn--danger:hover{background:color-mix(in oklab,var(--danger) 90%,#000)}.btn--warning{background:var(--warning);color:#fff}.btn--warning:hover{background:color-mix(in oklab,var(--warning) 90%,#000)}.btn--info{background:var(--info);color:#fff}.btn--info:hover{background:color-mix(in oklab,var(--info) 90%,#000)}.btn--soft-primary{background:var(--primary-soft);color:var(--primary)}.btn--soft-primary:hover{background:color-mix(in oklab,var(--primary-soft) 80%,var(--primary) 8%)}.btn--soft-success{background:var(--success-soft);color:var(--success)}.btn--soft-danger{background:var(--danger-soft);color:var(--danger)}.btn--soft-warning{background:var(--warning-soft);color:var(--warning)}.btn--soft-info{background:var(--info-soft);color:var(--info)}.btn--outline-primary{background:transparent;border-color:var(--primary);color:var(--primary)}.btn--outline-primary:hover{background:var(--primary-soft)}.btn--outline-danger{background:transparent;border-color:var(--danger);color:var(--danger)}.btn--outline-danger:hover{background:var(--danger-soft)}.btn--outline-success{background:transparent;border-color:var(--success);color:var(--success)}.btn--outline-success:hover{background:var(--success-soft)}.btn--lg{font-size:14px;padding:12px 18px}.btn--sm{font-size:11.5px;padding:6px 10px}.btn--icon{padding:9px}.btn--icon svg{margin:0}.btn-group{border-radius:8px;box-shadow:0 0 0 1px var(--border);display:inline-flex;overflow:hidden}.btn-group .btn{border:0;border-radius:0;border-right:1px solid var(--border);box-shadow:none}.btn-group .btn:last-child{border-right:0}.btn-group .btn.is-active{background:var(--primary-soft);color:var(--primary)}.alert{align-items:start;background:var(--bg-muted);border-left:3px solid var(--t-muted);border-radius:10px;color:var(--t-base);display:grid;font-size:13px;gap:12px;grid-template-columns:24px 1fr auto;line-height:1.5;padding:14px 16px}.alert+.alert{margin-top:10px}.alert .ico{border-radius:6px;color:var(--t-muted);display:grid;flex-shrink:0;height:20px;place-items:center;width:20px}.alert .ico svg{fill:none;height:14px;stroke:currentColor;stroke-width:2;width:14px}.alert .body{min-width:0}.alert .title{color:var(--t-base);font-weight:600;margin-bottom:2px}.alert .close{border-radius:5px;color:var(--t-light);display:grid;height:22px;place-items:center;transition:background .16s,color .16s;width:22px}.alert .close:hover{background:var(--bg-hover);color:var(--t-base)}.alert .close svg{fill:none;height:12px;stroke:currentColor;stroke-width:2;width:12px}.alert.success{background:var(--success-soft);border-left-color:var(--success)}.alert.success .ico{background:color-mix(in oklab,var(--success) 14%,transparent);color:var(--success)}.alert.danger{background:var(--danger-soft);border-left-color:var(--danger)}.alert.danger .ico{background:color-mix(in oklab,var(--danger) 14%,transparent);color:var(--danger)}.alert.warning{background:var(--warning-soft);border-left-color:var(--warning)}.alert.warning .ico{background:color-mix(in oklab,var(--warning) 14%,transparent);color:var(--warning)}.alert.info{background:var(--info-soft);border-left-color:var(--info)}.alert.info .ico{background:color-mix(in oklab,var(--info) 14%,transparent);color:var(--info)}.alert.primary{background:var(--primary-soft);border-left-color:var(--primary)}.alert.primary .ico{background:color-mix(in oklab,var(--primary) 14%,transparent);color:var(--primary)}.badge{align-items:center;background:var(--bg-muted);border-radius:999px;color:var(--t-muted);display:inline-flex;font-size:10.5px;font-weight:600;gap:4px;letter-spacing:.02em;line-height:1.4;padding:3px 8px}.badge.primary{background:var(--primary-soft);color:var(--primary)}.badge.success{background:var(--success-soft);color:var(--success)}.badge.danger{background:var(--danger-soft);color:var(--danger)}.badge.warning{background:var(--warning-soft);color:var(--warning)}.badge.info{background:var(--info-soft);color:var(--info)}.badge.purple{background:var(--purple-soft);color:var(--purple)}.badge.solid{background:var(--primary);color:#fff}.badge.dot:before{background:currentColor;border-radius:50%;content:"";height:6px;width:6px}.progress{background:var(--bg-muted);border-radius:999px;height:8px;overflow:hidden;width:100%}.progress.thin{height:4px}.progress.tall{height:14px}.progress-fill{animation:bar-in .9s cubic-bezier(.2,.7,.2,1) both;background:var(--primary);border-radius:999px;height:100%;transform-origin:left}.progress-fill.success{background:var(--success)}.progress-fill.danger{background:var(--danger)}.progress-fill.warning{background:var(--warning)}.progress-fill.info{background:var(--info)}.progress-fill.gradient{background:linear-gradient(90deg,var(--primary),var(--purple))}.progress-fill.striped{background-image:linear-gradient(45deg,hsla(0,0%,100%,.16) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.16) 0,hsla(0,0%,100%,.16) 75%,transparent 0,transparent);background-size:12px 12px}.spinner{animation:spin .7s linear infinite;border:2.5px solid var(--bg-muted);border-radius:50%;border-top-color:var(--primary);display:inline-block;height:22px;width:22px}.spinner.sm{border-width:2px;height:14px;width:14px}.spinner.lg{border-width:3px;height:36px;width:36px}@keyframes spin{to{transform:rotate(1turn)}}.tabs{border-bottom:1px solid var(--border);display:flex;gap:4px;margin-bottom:18px}.tab{border-bottom:2px solid transparent;color:var(--t-muted);cursor:pointer;font-size:13px;font-weight:500;padding:10px 14px;position:relative;top:1px;transition:color .16s,border-color .16s}.tab:hover{color:var(--t-base)}.tab.is-active{border-bottom-color:var(--primary);color:var(--primary);font-weight:600}.tab .badge{margin-left:6px}.tabs.pills{background:var(--bg-muted);border-bottom:0;border-radius:9px;display:inline-flex;padding:3px}.tabs.pills .tab{border-bottom:0;border-radius:7px;font-size:12.5px;padding:7px 12px;top:0}.tabs.pills .tab.is-active{background:var(--bg-card);box-shadow:var(--shadow-sm);color:var(--t-base)}.tab-panel{display:none}.tab-panel.is-active{animation:rise-in .32s ease both;display:block}.accordion{display:flex;flex-direction:column;gap:8px}.accordion-item{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;overflow:hidden}.accordion-trigger{align-items:center;color:var(--t-base);display:flex;font-size:13.5px;font-weight:600;justify-content:space-between;padding:14px 16px;text-align:left;transition:background .16s;width:100%}.accordion-trigger:hover{background:var(--bg-hover)}.accordion-trigger .chev{color:var(--t-muted);height:13px;transition:transform .24s ease;width:13px}.accordion-trigger .chev svg{fill:none;height:100%;stroke:currentColor;stroke-width:2;width:100%}.accordion-item.is-open .accordion-trigger .chev{transform:rotate(180deg)}.accordion-body{color:var(--t-muted);font-size:13px;line-height:1.6;max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.4,0,.2,1)}.accordion-body-inner{padding:0 16px 14px}.accordion-item.is-open .accordion-body{max-height:400px}.modal-demo{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);max-width:480px;overflow:hidden}.modal-head{align-items:center;border-bottom:1px solid var(--border-soft);display:flex;justify-content:space-between;padding:16px 20px}.modal-title{color:var(--t-base);font-family:Inter Tight,sans-serif;font-size:15px;font-weight:700;letter-spacing:-.012em}.modal-body{color:var(--t-muted);font-size:13.5px;line-height:1.6;padding:18px 20px}.modal-foot{background:var(--bg-card);border-top:1px solid var(--border-soft);display:flex;gap:8px;justify-content:flex-end;padding:14px 20px}.popover-demo{display:inline-block;position:relative}.popover-demo .pop{background:var(--t-base);border-radius:6px;bottom:calc(100% + 10px);box-shadow:var(--shadow-lg);color:var(--bg-card);font-size:11.5px;font-weight:500;padding:6px 10px;white-space:nowrap}.popover-demo .pop,.popover-demo .pop:after{left:50%;position:absolute;transform:translateX(-50%)}.popover-demo .pop:after{border:5px solid transparent;border-top:5px solid var(--t-base);content:"";top:100%}.avatar-group{align-items:center;display:inline-flex}.avatar-group .av{border:2px solid var(--bg-card);border-radius:50%;color:#fff;display:grid;flex-shrink:0;font-size:11.5px;font-weight:600;height:32px;margin-left:-8px;place-items:center;width:32px}.avatar-group .av:first-child{margin-left:0}.avatar-group .av.more{background:var(--bg-muted);color:var(--t-muted);font-size:10.5px}.section-h{align-items:baseline;color:var(--t-base);display:flex;font-family:Inter Tight,sans-serif;font-size:15px;font-weight:700;gap:12px;letter-spacing:-.012em;margin:0 0 14px}.section-h .num{color:var(--t-light);font-family:JetBrains Mono,monospace;font-size:11px;font-weight:500;letter-spacing:.06em}.demo-row{align-items:center;display:flex;flex-wrap:wrap;gap:10px}.auth-shell{background:var(--bg-body);display:grid;grid-template-columns:1fr 1fr;min-height:100vh}.auth-aside{background:linear-gradient(135deg,var(--primary),var(--purple));color:#fff;display:flex;flex-direction:column;overflow:hidden;padding:40px 48px;position:relative}.auth-aside:before{background:radial-gradient(circle,hsla(0,0%,100%,.18),transparent 60%);inset:-40% -20% auto auto}.auth-aside:after,.auth-aside:before{aspect-ratio:1;content:"";pointer-events:none;position:absolute;width:80%}.auth-aside:after{background:radial-gradient(circle,hsla(0,0%,100%,.1),transparent 60%);inset:auto auto -30% -20%}.auth-brand{align-items:center;display:flex;gap:10px;position:relative;z-index:1}.auth-brand .logo{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:hsla(0,0%,100%,.18);border:1px solid hsla(0,0%,100%,.25);border-radius:9px;display:grid;height:36px;place-items:center;width:36px}.auth-brand .logo svg{height:20px;width:20px}.auth-brand .name{font-family:Inter Tight,sans-serif;font-size:16px;font-weight:700;letter-spacing:-.018em}.auth-aside-body{margin-top:auto;max-width:440px;position:relative;z-index:1}.auth-aside-eyebrow{color:hsla(0,0%,100%,.7);display:block;font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.18em;margin-bottom:14px;text-transform:uppercase}.auth-aside h1{font-family:Inter Tight,sans-serif;font-size:clamp(28px,3vw,38px);font-weight:700;letter-spacing:-.025em;line-height:1.15;margin:0 0 14px}.auth-aside p{color:hsla(0,0%,100%,.85);font-size:14.5px;line-height:1.6;margin:0 0 24px}.auth-quote{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:hsla(0,0%,100%,.08);border:1px solid hsla(0,0%,100%,.18);border-radius:12px;color:hsla(0,0%,100%,.9);font-size:13px;line-height:1.6;margin-top:32px;padding:18px 20px}.auth-quote-author{align-items:center;color:hsla(0,0%,100%,.75);display:flex;font-size:12px;gap:10px;margin-top:14px}.auth-quote-author .av{background:hsla(0,0%,100%,.22);border-radius:50%;display:grid;font-size:11px;font-weight:600;height:28px;place-items:center;width:28px}.auth-aside-footer{color:hsla(0,0%,100%,.55);display:flex;font-family:JetBrains Mono,monospace;font-size:10px;gap:18px;letter-spacing:.06em;margin-top:auto;padding-top:24px;position:relative;z-index:1}.auth-main{display:flex;flex-direction:column;min-height:100vh;padding:32px 48px}.auth-main-top{align-items:center;display:flex;justify-content:space-between}.auth-main-top .switch-link{color:var(--t-muted);font-size:12.5px}.auth-main-top .switch-link a{color:var(--primary);font-weight:600;margin-left:4px}.auth-card{margin:auto;max-width:400px;padding:8px 0;width:100%}.auth-card h2{color:var(--t-base);font-family:Inter Tight,sans-serif;font-size:26px;font-weight:700;letter-spacing:-.022em;margin:0 0 6px}.auth-card .sub{color:var(--t-muted);font-size:13.5px;line-height:1.55;margin:0 0 24px}.auth-form{display:flex;flex-direction:column;gap:14px}.auth-form .field-row{align-items:center;display:flex;justify-content:space-between}.auth-form .field-row a{color:var(--primary);font-size:12px;font-weight:600}.auth-submit{margin-top:4px}.auth-submit.btn{padding:11px 14px}.auth-divider{align-items:center;color:var(--t-light);display:flex;font-family:JetBrains Mono,monospace;font-size:10px;gap:12px;letter-spacing:.14em;margin:18px 0;text-transform:uppercase}.auth-divider:after,.auth-divider:before{background:var(--border);content:"";flex:1;height:1px}.social-row{display:grid;gap:10px;grid-template-columns:repeat(3,1fr)}.social-btn{align-items:center;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--t-base);display:inline-flex;font-size:12.5px;font-weight:600;gap:8px;justify-content:center;padding:9px 12px;transition:border-color .16s,box-shadow .16s,background .16s}.social-btn:hover{border-color:var(--t-light);box-shadow:var(--shadow-sm)}.social-btn svg{height:14px;width:14px}.auth-main-bottom{color:var(--t-light);font-size:11.5px;margin-top:24px;text-align:center}.auth-main-bottom a{color:var(--t-muted)}.error-shell{background:var(--bg-body);display:grid;min-height:100vh;overflow:hidden;padding:32px;place-items:center;position:relative}.error-shell:before{background:radial-gradient(circle,color-mix(in oklab,var(--primary) 10%,transparent),transparent 70%);inset:-20% -10% auto auto}.error-shell:after,.error-shell:before{aspect-ratio:1;content:"";pointer-events:none;position:absolute;width:60vmax}.error-shell:after{background:radial-gradient(circle,color-mix(in oklab,var(--purple) 8%,transparent),transparent 70%);inset:auto auto -20% -10%}.error-card{animation:rise-in .6s cubic-bezier(.2,.7,.2,1) both;background:var(--bg-card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);max-width:540px;padding:48px 56px;position:relative;text-align:center;width:100%}@media(max-width:600px){.error-card{padding:32px 24px}}.error-eyebrow{color:var(--t-light);display:block;font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:.18em;margin-bottom:14px;text-transform:uppercase}.error-code{background:linear-gradient(135deg,var(--primary),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent;font-size:clamp(96px,16vw,160px);letter-spacing:-.05em;line-height:.95;margin-bottom:8px}.error-code,.error-title{font-family:Inter Tight,sans-serif;font-weight:700}.error-title{color:var(--t-base);font-size:24px;letter-spacing:-.022em;margin:0 0 10px}.error-sub{color:var(--t-muted);font-size:14px;line-height:1.6;margin:0 auto 24px;max-width:40ch}.error-actions{gap:10px}.error-actions,.error-meta{display:flex;flex-wrap:wrap;justify-content:center}.error-meta{border-top:1px dashed var(--border);color:var(--t-light);font-family:JetBrains Mono,monospace;font-size:10.5px;gap:16px;letter-spacing:.06em;margin-top:28px;padding-top:18px}.error-meta strong{color:var(--t-muted);font-weight:600}.chat-shell{animation:rise-in .6s cubic-bezier(.2,.7,.2,1) both;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-card);display:grid;gap:20px;grid-template-columns:280px minmax(0,1fr);height:calc(100vh - 220px);min-height:560px;overflow:hidden}.chat-rail{background:var(--bg-card);border-right:1px solid var(--border-soft);min-width:0}.chat-rail,.chat-rail-head{display:flex;flex-direction:column}.chat-rail-head{border-bottom:1px solid var(--border-soft);gap:12px;padding:14px 16px}.chat-rail-title-row{align-items:center;display:flex;justify-content:space-between}.chat-rail-title{color:var(--t-base);font-family:Inter Tight,sans-serif;font-size:14.5px;font-weight:700;letter-spacing:-.012em}.chat-rail-title .meta{color:var(--t-light);font-family:JetBrains Mono,monospace;font-size:10px;font-weight:500;letter-spacing:.04em;margin-left:8px}.chat-search{position:relative}.chat-search input{background:var(--bg-muted);border:1px solid var(--border);border-radius:8px;color:var(--t-base);font-size:12.5px;outline:0;padding:8px 10px 8px 32px;transition:border-color .18s,box-shadow .18s,background .18s;width:100%}.chat-search input::-moz-placeholder{color:var(--t-light)}.chat-search input::placeholder{color:var(--t-light)}.chat-search input:focus{background:var(--bg-card);border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.chat-search svg{fill:none;height:13px;left:10px;pointer-events:none;position:absolute;stroke:var(--t-light);stroke-width:2;top:50%;transform:translateY(-50%);width:13px}.chat-list-scroll{flex:1;overflow-y:auto;padding:4px 0}.chat-list-scroll::-webkit-scrollbar{width:4px}.chat-list-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.chat-conv{border-bottom:1px solid var(--border-soft);cursor:pointer;display:grid;gap:10px;grid-template-columns:38px 1fr;padding:11px 16px;position:relative;transition:background .16s ease}.chat-conv:hover{background:var(--bg-hover)}.chat-conv.is-active{background:var(--primary-soft);box-shadow:inset 3px 0 0 var(--primary)}.chat-conv-avatar{border-radius:50%;color:#fff;display:grid;flex-shrink:0;font-size:12px;font-weight:600;height:38px;place-items:center;position:relative;width:38px}.chat-conv-avatar .presence{background:var(--success);border:2px solid var(--bg-card);border-radius:50%;bottom:0;height:10px;position:absolute;right:0;width:10px}.chat-conv-avatar .presence.away{background:var(--warning)}.chat-conv-avatar .presence.off{background:var(--t-light)}.chat-conv-body{display:flex;flex-direction:column;gap:2px;min-width:0}.chat-conv-top{align-items:baseline;display:flex;gap:6px;justify-content:space-between}.chat-conv-name{color:var(--t-base);font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-conv-time{color:var(--t-light);flex-shrink:0;font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.04em}.chat-conv-preview{color:var(--t-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-conv.is-unread .chat-conv-preview{color:var(--t-base);font-weight:500}.chat-conv.is-unread .chat-conv-time{color:var(--primary)}.chat-conv-badge{background:var(--primary);border-radius:999px;color:#fff;display:grid;font-size:10px;font-weight:700;height:18px;min-width:18px;padding:0 6px;place-items:center;position:absolute;right:14px;top:14px}.chat-pane{background:var(--bg-card);display:flex;flex-direction:column;min-width:0;overflow:hidden}.chat-pane-head{align-items:center;border-bottom:1px solid var(--border-soft);display:flex;gap:12px;padding:14px 22px}.chat-pane-head .av{border-radius:50%;color:#fff;display:grid;font-size:12px;font-weight:600;height:38px;place-items:center;position:relative;width:38px}.chat-pane-head .av .presence{background:var(--success);border:2px solid var(--bg-card);border-radius:50%;bottom:0;height:10px;position:absolute;right:0;width:10px}.chat-pane-head .meta{flex:1;line-height:1.3;min-width:0}.chat-pane-head .name{color:var(--t-base);font-size:14px;font-weight:600}.chat-pane-head .status{align-items:center;color:var(--t-muted);display:flex;font-size:11.5px;gap:4px}.chat-pane-head .status .dot{background:var(--success);border-radius:50%;height:6px;width:6px}.chat-pane-head-tools{display:flex;gap:2px}.chat-thread{background:var(--bg-muted);display:flex;flex:1;flex-direction:column;gap:16px;overflow-y:auto;padding:22px 28px}.chat-thread::-webkit-scrollbar{width:5px}.chat-thread::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.chat-day-sep{align-items:center;color:var(--t-light);display:flex;font-family:JetBrains Mono,monospace;font-size:10px;gap:10px;letter-spacing:.14em;margin:6px 0;text-transform:uppercase}.chat-day-sep:after,.chat-day-sep:before{background:var(--border);content:"";flex:1;height:1px}.chat-msg{display:flex;gap:10px;max-width:min(75%,600px)}.chat-msg.me{flex-direction:row-reverse;margin-left:auto}.chat-msg-av{align-self:flex-end;border-radius:50%;color:#fff;display:grid;flex-shrink:0;font-size:11.5px;font-weight:600;height:32px;place-items:center;width:32px}.chat-msg-av.me{background:linear-gradient(135deg,var(--primary),var(--purple))}.chat-msg-stack{display:flex;flex-direction:column;gap:4px;min-width:0}.chat-msg.me .chat-msg-stack{align-items:flex-end}.chat-bub{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;border-top-left-radius:4px;box-shadow:var(--shadow-sm);color:var(--t-base);font-size:13.5px;line-height:1.5;padding:10px 14px;word-wrap:break-word}.chat-msg.me .chat-bub{background:var(--primary);border-color:var(--primary);border-top-left-radius:14px;border-top-right-radius:4px;color:#fff}.chat-msg-meta{align-items:center;color:var(--t-light);display:flex;font-family:JetBrains Mono,monospace;font-size:9.5px;gap:6px;letter-spacing:.04em;padding:0 4px}.chat-msg-meta .read{color:var(--primary)}.chat-typing{align-items:center;color:var(--t-muted);display:flex;font-size:11.5px;gap:8px;margin-top:4px}.chat-typing-dots{display:inline-flex;gap:3px}.chat-typing-dots span{animation:typing 1.2s ease-in-out infinite;background:var(--t-light);border-radius:50%;height:4px;width:4px}.chat-typing-dots span:nth-child(2){animation-delay:.15s}.chat-typing-dots span:nth-child(3){animation-delay:.3s}@keyframes typing{0%,60%,to{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}.chat-composer{background:var(--bg-card);border-top:1px solid var(--border-soft);padding:14px 22px 18px}.chat-composer-input{align-items:end;background:var(--bg-muted);border:1px solid var(--border);border-radius:12px;display:flex;gap:8px;padding:8px 10px;transition:border-color .18s,box-shadow .18s}.chat-composer-input:focus-within{background:var(--bg-card);border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.chat-composer-input textarea{background:transparent;border:0;color:var(--t-base);flex:1;font-family:inherit;font-size:13.5px;line-height:1.5;max-height:120px;min-height:22px;outline:0;padding:4px;resize:none}.chat-composer-input textarea::-moz-placeholder{color:var(--t-light)}.chat-composer-input textarea::placeholder{color:var(--t-light)}.chat-composer-tools{align-items:center;display:flex;flex-shrink:0;gap:2px}.chat-composer-tools .tool{border-radius:6px;color:var(--t-muted);display:grid;height:28px;place-items:center;transition:background .16s,color .16s;width:28px}.chat-composer-tools .tool:hover{background:var(--bg-hover);color:var(--t-base)}.chat-composer-tools .tool svg{fill:none;height:14px;stroke:currentColor;stroke-width:1.8;width:14px}.chat-composer-send{background:var(--primary);border-radius:8px;color:#fff;display:grid;flex-shrink:0;height:32px;place-items:center;transition:background .18s;width:32px}.chat-composer-send:hover{background:var(--primary-dark)}.chat-composer-send svg{fill:none;height:14px;stroke:currentColor;stroke-width:2;width:14px}.data-toolbar{align-items:center;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-bottom:16px}.data-toolbar-left{flex:1;min-width:240px}.data-toolbar-left,.data-toolbar-right{align-items:center;display:flex;gap:8px}.data-toolbar .input-icon{flex:1;max-width:320px}.data-table{border-collapse:initial;border-spacing:0;width:100%}.data-table thead th{background:var(--bg-card);border-bottom:1px solid var(--border);color:var(--t-light);font-family:JetBrains Mono,monospace;font-size:10px;font-weight:500;letter-spacing:.14em;padding:12px 14px;position:sticky;text-align:left;text-transform:uppercase;top:0;white-space:nowrap}.data-table thead th .sort{color:var(--t-light);display:inline-flex;margin-left:4px;vertical-align:middle}.data-table thead th.sorted-asc .sort,.data-table thead th.sorted-desc .sort{color:var(--primary)}.data-table thead th.sorted-asc .sort svg{transform:rotate(180deg)}.data-table thead th .sort svg{fill:none;height:10px;stroke:currentColor;stroke-width:2;transition:transform .16s;width:10px}.data-table tbody td{border-bottom:1px solid var(--border-soft);color:var(--t-base);font-size:13px;padding:12px 14px;white-space:nowrap}.data-table tbody tr{transition:background .14s}.data-table tbody tr:hover td{background:var(--bg-hover)}.data-table tbody tr.is-selected td{background:var(--primary-soft)}.data-cell-user{align-items:center;display:flex;gap:10px;min-width:0}.data-cell-user .av{border-radius:50%;color:#fff;display:grid;flex-shrink:0;font-size:11px;font-weight:600;height:30px;place-items:center;width:30px}.data-cell-user-meta{line-height:1.3;min-width:0}.data-cell-user-name{color:var(--t-base);font-size:13px;font-weight:600}.data-cell-user-email{font-size:11px}.data-cell-mono,.data-cell-user-email{color:var(--t-muted);font-family:JetBrains Mono,monospace;letter-spacing:.02em}.data-cell-mono{font-size:12px}.data-cell-actions{display:flex;gap:2px}.data-cell-actions .btn--icon{background:transparent;border:0;border-radius:6px;color:var(--t-muted);padding:6px;transition:background .14s,color .14s}.data-cell-actions .btn--icon:hover{background:var(--bg-hover);color:var(--t-base)}.data-cell-actions .btn--icon svg{fill:none;height:13px;stroke:currentColor;stroke-width:1.8;width:13px}.data-foot{border-top:1px solid var(--border-soft);color:var(--t-muted);font-size:12px;justify-content:space-between;margin-top:4px;padding-top:16px}.data-foot,.data-foot-info{align-items:center;display:flex}.data-foot-info{gap:16px}.data-foot-info .select{font-size:12px;padding:6px 28px 6px 10px;width:auto}.pager{align-items:center;display:flex;gap:4px}.pager-btn{border-radius:7px;color:var(--t-muted);display:grid;font-size:12px;font-weight:600;height:30px;min-width:30px;padding:0 8px;place-items:center;transition:background .16s,color .16s}.pager-btn:hover:not(:disabled){background:var(--bg-hover);color:var(--t-base)}.pager-btn.is-active{background:var(--primary);color:#fff}.pager-btn:disabled{cursor:not-allowed;opacity:.4}.pager-btn svg{fill:none;height:12px;stroke:currentColor;stroke-width:2;width:12px}.chart-pad{padding:8px 0 4px;position:relative}.chart-canvas-wrap{min-height:240px;position:relative;width:100%}.chart-legend{border-top:1px solid var(--border-soft);display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;padding-top:14px}.chart-legend-item{align-items:center;color:var(--t-muted);display:inline-flex;font-size:12px;gap:8px}.chart-legend-item .swatch{border-radius:3px;flex-shrink:0;height:10px;width:10px}.chart-meta-row{border-top:1px dashed var(--border-soft);display:flex;flex-wrap:wrap;gap:18px;margin-top:14px;padding-top:14px}.chart-meta-cell{display:flex;flex-direction:column;gap:3px;min-width:90px}.chart-meta-label{color:var(--t-light);font-family:JetBrains Mono,monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}.chart-meta-value{color:var(--t-base);font-family:Inter Tight,sans-serif;font-size:17px;font-weight:700;letter-spacing:-.02em}.chart-meta-value.up{color:var(--success)}.chart-meta-value.down{color:var(--danger)}.kpi-grid{display:grid;gap:20px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:20px}.kpi-card{animation:rise-in .6s cubic-bezier(.2,.7,.2,1) both;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:14px;min-width:0;overflow:hidden;padding:22px 22px 20px;position:relative;transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease,border-color .22s ease}.kpi-card:before{background:radial-gradient(circle at top right,currentColor,transparent 65%);content:"";height:180px;inset:0 0 auto auto;opacity:.08;pointer-events:none;position:absolute;transition:opacity .22s ease;width:180px}.kpi-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.kpi-card:hover:before{opacity:.14}.kpi-card.c-success{color:var(--success)}.kpi-card.c-danger{color:var(--danger)}.kpi-card.c-purple{color:var(--purple)}.kpi-card.c-primary{color:var(--primary)}.kpi-card:first-child{animation-delay:60ms}.kpi-card:nth-child(2){animation-delay:.12s}.kpi-card:nth-child(3){animation-delay:.18s}.kpi-card:nth-child(4){animation-delay:.24s}.kpi-top{gap:12px;justify-content:space-between;position:relative}.kpi-identity,.kpi-top{align-items:center;display:flex}.kpi-identity{gap:10px;min-width:0}.kpi-icon{border-radius:9px;display:grid;flex-shrink:0;height:32px;place-items:center;width:32px}.kpi-icon svg{fill:none;height:15px;stroke:currentColor;stroke-width:1.9;width:15px}.kpi-icon.primary{background:var(--primary-soft);color:var(--primary)}.kpi-icon.success{background:var(--success-soft);color:var(--success)}.kpi-icon.info{background:var(--info-soft);color:var(--info)}.kpi-icon.purple{background:var(--purple-soft);color:var(--purple)}.kpi-icon.danger{background:var(--danger-soft);color:var(--danger)}.kpi-icon.warning{background:var(--warning-soft);color:var(--warning)}.kpi-label{color:var(--t-muted);font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpi-value{color:var(--t-base);font-family:Inter Tight,Inter,sans-serif;font-size:44px;font-weight:700;letter-spacing:-.035em;line-height:1;position:relative}.kpi-value sup{color:var(--t-muted);font-size:17px;font-weight:500;line-height:2.1;margin-left:3px;vertical-align:top}.kpi-compare{align-items:center;border-top:1px dashed var(--border-soft);color:var(--t-light);display:flex;font-size:12px;font-weight:500;gap:7px;margin-top:auto;padding-top:12px}.kpi-compare strong{color:var(--t-base);font-family:JetBrains Mono,monospace;font-size:11.5px;font-weight:600;letter-spacing:-.01em}.kpi-compare svg{fill:none;flex-shrink:0;height:11px;stroke:currentColor;stroke-width:2.2;width:11px}.kpi-compare .up{color:var(--success)}.kpi-compare .down{color:var(--danger)}.kpi-compare .flat{color:var(--purple)}.kpi-compare .info{color:var(--info)}.kpi-compare .sep{color:var(--t-light);font-weight:400;opacity:.45}.kpi-pill{align-items:center;border-radius:999px;display:inline-flex;flex-shrink:0;font-family:JetBrains Mono,monospace;font-size:10.5px;font-weight:500;gap:4px;letter-spacing:.02em;padding:4px 9px}.kpi-pill.up{background:var(--success-soft);color:var(--success)}.kpi-pill.down{background:var(--danger-soft);color:var(--danger)}.kpi-pill.flat{background:var(--purple-soft);color:var(--purple)}.kpi-pill.info{background:var(--info-soft);color:var(--info)}.kpi-pill svg{fill:none;height:10px;stroke:currentColor;stroke-width:2.5;width:10px}.sv-regions{display:grid;gap:36px;grid-template-columns:repeat(4,minmax(0,1fr))}.sv-region{display:flex;flex-direction:column;gap:10px;min-width:0}.sv-region-head{align-items:center;color:var(--t-muted);display:flex;font-size:13px;font-weight:500;gap:9px}.sv-region-head .marker{border-radius:50%;flex-shrink:0;height:8px;width:8px}.sv-region-value{align-items:baseline;color:var(--t-base);display:flex;font-family:Inter Tight,sans-serif;font-size:28px;font-weight:700;gap:8px;letter-spacing:-.03em;line-height:1.05}.sv-region-value .pct{color:var(--t-light);font-family:JetBrains Mono,monospace;font-size:11.5px;font-weight:500;letter-spacing:.02em}.sv-region-bar{background:var(--bg-muted);border-radius:99px;height:3px;margin-top:2px;overflow:hidden}.sv-region-bar-fill{animation:bar-in .9s cubic-bezier(.2,.7,.2,1) .3s both;border-radius:99px;height:100%;transform-origin:left}.sv-divider{background:var(--border-soft);height:1px;margin:28px 0}.sv-radials{display:grid;gap:28px;grid-template-columns:repeat(3,minmax(0,1fr))}.sv-radial{align-items:center;display:grid;gap:16px;grid-template-columns:72px 1fr}.sv-radial-chart{flex-shrink:0;height:72px;position:relative;width:72px}.sv-radial-chart svg{height:100%;transform:rotate(-90deg);width:100%}.radial-track{fill:none;stroke:var(--bg-muted);stroke-width:5}.radial-fill{fill:none;stroke-linecap:round;stroke-width:5}.radial-fill.danger{stroke:var(--danger)}.radial-fill.info{stroke:var(--info)}.radial-fill.warning{stroke:var(--warning)}.sv-radial-chart .pct{color:var(--t-base);font-family:Inter Tight,sans-serif;font-size:15px;font-weight:700;left:50%;letter-spacing:-.022em;position:absolute;top:50%;transform:translate(-50%,-50%)}.sv-radial-text{display:flex;flex-direction:column;gap:2px;min-width:0}.sv-radial-name{color:var(--t-base);font-size:13.5px;font-weight:600;letter-spacing:-.005em}.sv-radial-caption{color:var(--t-muted);font-size:11.5px}.chart-svg{display:block;height:auto;width:100%}.chart-svg .grid-line{stroke:var(--border-soft);stroke-dasharray:2 4;stroke-width:1}.chart-svg .axis-label{fill:var(--t-light);font-family:JetBrains Mono,monospace;font-size:9.5px;letter-spacing:.04em}.chart-svg .area{fill:url(#chartGrad)}.chart-svg .line{animation:draw 1.4s cubic-bezier(.55,.15,.2,1) .4s forwards;fill:none;stroke:var(--primary);stroke-dasharray:2400;stroke-dashoffset:2400;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.2}.chart-svg .dot-peak{animation:fade-in .6s ease 1.4s forwards;fill:var(--primary);opacity:0;stroke:var(--bg-card);stroke-width:3}.monthly-footer{border-top:1px solid var(--border-soft);display:grid;gap:18px;grid-template-columns:repeat(4,1fr);margin-top:18px;padding-top:18px}.stat-cell{display:flex;flex-direction:column;gap:4px}.stat-cell-label{color:var(--t-muted);font-size:11px;font-weight:500}.stat-cell-value{align-items:center;color:var(--t-base);display:flex;font-family:Inter Tight,sans-serif;font-size:18px;font-weight:700;gap:6px;letter-spacing:-.022em}.stat-cell-value .trend-ic{color:var(--success);flex-shrink:0;height:11px;width:11px}.todo-list{display:flex;flex-direction:column}.todo-item{align-items:center;border-bottom:1px solid var(--border-soft);display:grid;gap:12px;grid-template-columns:20px 1fr auto;padding:11px 0}.todo-item:last-child{border-bottom:0}.todo-check{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:transparent;border:1.5px solid var(--t-light);border-radius:6px;cursor:pointer;height:18px;position:relative;transition:all .16s ease;width:18px}.todo-check:checked,.todo-check:hover{border-color:var(--primary)}.todo-check:checked{background:var(--primary)}.todo-check:checked:after{border:solid #fff;border-width:0 1.8px 1.8px 0;content:"";height:9px;left:5px;position:absolute;top:1px;transform:rotate(45deg);width:4px}.todo-item.is-done .todo-text{color:var(--t-light);-webkit-text-decoration:line-through;text-decoration:line-through;text-decoration-thickness:1.5px}.todo-text{color:var(--t-base);cursor:pointer;font-size:13.5px}.todo-badge{border-radius:999px;font-size:10.5px;font-weight:600;letter-spacing:.02em;line-height:1;padding:3px 9px}.todo-badge.low{background:var(--bg-muted);color:var(--t-muted)}.todo-badge.upcoming{background:var(--info-soft);color:var(--info)}.todo-badge.urgent{background:var(--danger-soft);color:var(--danger)}.todo-badge.warn{background:var(--warning-soft);color:var(--warning)}.todo-badge.done{background:var(--success-soft);color:var(--success)}.sales-summary{align-items:flex-end;display:flex;justify-content:space-between;margin-bottom:4px;padding:0 0 20px}.sales-summary-label .eyebrow{display:block;margin-bottom:4px}.sales-summary h4{font-size:15px;font-weight:600;margin:0}.sales-summary h4,.sales-summary-total{color:var(--t-base);font-family:Inter Tight,sans-serif}.sales-summary-total{font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1}.sales-summary-total sup{color:var(--t-muted);font-size:15px;font-weight:500;line-height:2;margin-right:1px;vertical-align:top}.sales-all{border-top:1px solid var(--border-soft);margin-top:6px;padding:18px 0 0;text-align:center}.sales-all a{align-items:center;color:var(--primary);display:inline-flex;font-size:12.5px;font-weight:600;gap:5px;transition:color .18s}.sales-all a:hover{color:var(--primary-dark)}.sales-all svg{fill:none;height:12px;stroke:currentColor;stroke-width:2.2;width:12px}.wx-hero{align-items:flex-start;display:flex;gap:16px;justify-content:space-between;padding:8px 0}.wx-temp-block{align-items:center;display:flex;gap:16px}.wx-icon{background:linear-gradient(135deg,var(--info-soft),var(--primary-soft));border-radius:16px;color:var(--info);display:grid;flex-shrink:0;height:60px;place-items:center;width:60px}.wx-icon svg{fill:none;height:34px;stroke:currentColor;stroke-width:1.3;width:34px}.wx-temp{color:var(--t-base);font-family:Inter Tight,sans-serif;font-size:44px;font-weight:700;letter-spacing:-.035em;line-height:1}.wx-temp sup{color:var(--t-muted);font-size:18px;font-weight:500;line-height:1.6;vertical-align:top}.wx-condition{color:var(--t-muted);font-size:13px;margin-top:4px}.wx-condition strong{color:var(--t-base);font-weight:600}.wx-date{text-align:right}.wx-date h5{color:var(--t-base);font-family:Inter Tight,sans-serif;font-size:16px;font-weight:700;letter-spacing:-.02em;margin:0 0 2px}.wx-date p{color:var(--t-light);font-family:JetBrains Mono,monospace;font-size:10.5px;letter-spacing:.06em;margin:0}.wx-stats{border-bottom:1px solid var(--border);border-top:1px solid var(--border);display:grid;gap:12px;grid-template-columns:repeat(3,1fr);margin:20px 0 16px;padding:16px 0}.wx-stats>div{display:flex;flex-direction:column;gap:4px}.wx-stat-label{color:var(--t-muted);font-size:11px;font-weight:500}.wx-stat-value{color:var(--t-base);font-family:Inter Tight,sans-serif;font-size:16px;font-weight:700;letter-spacing:-.018em}.wx-stat-value .unit{color:var(--t-light);font-size:11px;font-weight:500;letter-spacing:0;margin-left:3px}.wx-forecast{display:grid;gap:4px;grid-template-columns:repeat(7,1fr);text-align:center}.wx-day{border-radius:10px;cursor:pointer;padding:10px 4px;transition:background .16s ease}.wx-day:hover{background:var(--bg-hover)}.wx-day.is-today{background:var(--primary);color:#fff}.wx-day-name{color:var(--t-muted);font-size:10.5px;font-weight:600;letter-spacing:.04em;margin-bottom:6px}.wx-day.is-today .wx-day-name{color:hsla(0,0%,100%,.85)}.wx-day-icon{color:var(--t-muted);height:22px;margin:0 auto 6px;width:22px}.wx-day-icon svg{fill:none;height:100%;stroke:currentColor;stroke-width:1.6;width:100%}.wx-day.is-today .wx-day-icon{color:#fff}.wx-day-temp{color:var(--t-base);font-size:12.5px;font-weight:600}.wx-day.is-today .wx-day-temp{color:#fff}.chat-frame{background:var(--bg-muted);border-radius:12px;margin:-6px -6px 0;overflow:hidden}.chat-messages{display:flex;flex-direction:column;gap:16px;min-height:200px;padding:20px}.chat-row{display:flex;gap:10px;max-width:min(85%,560px)}.chat-row.me{flex-direction:row-reverse;margin-left:auto}.chat-avatar{background:var(--bg-card);border:1px solid var(--border);border-radius:50%;color:var(--t-base);display:grid;flex-shrink:0;font-size:11.5px;font-weight:600;height:30px;place-items:center;width:30px}.chat-avatar.me{background:linear-gradient(135deg,var(--primary),var(--purple));border:0;color:#fff}.chat-stack{display:flex;flex-direction:column;gap:4px;min-width:0}.chat-row.me .chat-stack{align-items:flex-end}.chat-bubble{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;border-top-left-radius:4px;box-shadow:var(--shadow-sm);color:var(--t-base);font-size:13px;line-height:1.45;padding:8px 12px}.chat-row.me .chat-bubble{background:var(--primary);border-color:var(--primary);border-top-left-radius:14px;border-top-right-radius:4px;color:#fff}.chat-ts{color:var(--t-light);font-family:JetBrains Mono,monospace;font-size:9.5px;letter-spacing:.04em;padding:0 4px}.chat-input-row{align-items:center;background:var(--bg-card);border-top:1px solid var(--border);display:flex;gap:8px;padding:12px 14px}.chat-input{background:transparent;border:0;color:var(--t-base);flex:1;font-size:13.5px;outline:0;padding:4px 0}.chat-input::-moz-placeholder{color:var(--t-light)}.chat-input::placeholder{color:var(--t-light)}.chat-send{background:var(--primary);border-radius:999px;box-shadow:0 2px 6px -1px color-mix(in oklab,var(--primary) 40%,transparent);color:#fff;display:grid;flex-shrink:0;height:34px;place-items:center;transition:background .18s;width:34px}.chat-send:hover{background:var(--primary-dark)}.chat-send svg{fill:none;height:15px;stroke:currentColor;stroke-width:2;width:15px}.mail-hero{align-items:flex-end;animation:rise-in .6s cubic-bezier(.2,.7,.2,1) both;display:flex;gap:24px;justify-content:space-between;margin-bottom:20px}.mail-hero .hero-title{font-size:clamp(24px,2.4vw,28px);margin-bottom:6px}.mail-hero .hero-sub{font-size:13.5px}.mail-shell{animation:rise-in .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:80ms;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-card);display:grid;gap:20px;grid-template-columns:220px minmax(320px,1fr) minmax(0,1.4fr);height:calc(100vh - 240px);min-height:560px;overflow:hidden}.mail-rail,.mail-shell{background:var(--bg-card)}.mail-rail{border-right:1px solid var(--border-soft);display:flex;flex-direction:column;gap:18px;overflow-y:auto;padding:18px 14px}.mail-rail::-webkit-scrollbar{width:4px}.mail-rail::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.mail-compose{align-items:center;background:var(--primary);border-radius:9px;box-shadow:0 2px 6px -1px var(--primary-ring);color:#fff;display:inline-flex;font-size:13px;font-weight:600;gap:8px;justify-content:center;padding:11px 14px;transition:background .18s}.mail-compose:hover{background:var(--primary-dark)}.mail-compose svg{fill:none;height:14px;stroke:currentColor;stroke-width:2;width:14px}.mail-rail-section{display:flex;flex-direction:column;gap:1px}.mail-rail-label{color:var(--t-light);font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.2em;padding:0 10px 8px;text-transform:uppercase}.mail-folder{align-items:center;border-radius:8px;color:var(--t-muted);cursor:pointer;display:flex;font-size:13px;font-weight:500;gap:10px;padding:8px 10px;transition:background .16s ease,color .16s ease}.mail-folder svg{fill:none;flex-shrink:0;height:15px;stroke:currentColor;stroke-width:1.75;width:15px}.mail-folder:hover{background:var(--bg-hover);color:var(--t-base)}.mail-folder.is-active{background:var(--primary-soft);color:var(--primary);font-weight:600}.mail-folder-name{flex:1;min-width:0}.mail-folder-count{color:var(--t-light);font-family:JetBrains Mono,monospace;font-size:10.5px;font-weight:500}.mail-folder.is-active .mail-folder-count{color:var(--primary)}.mail-folder-count.is-strong{border-radius:999px;font-size:10px;padding:2px 7px}.mail-folder-count.is-strong,.mail-folder.is-active .mail-folder-count.is-strong{background:var(--primary);color:#fff}.mail-label-dot{border-radius:50%;flex-shrink:0;height:8px;width:8px}.mail-rail-storage{border-top:1px solid var(--border-soft);margin-top:auto;padding:14px 10px 4px}.mail-storage-head{align-items:center;color:var(--t-muted);display:flex;font-size:11.5px;font-weight:500;justify-content:space-between;margin-bottom:8px}.mail-storage-head .num{color:var(--t-light);font-family:JetBrains Mono,monospace;font-size:10.5px;letter-spacing:.04em}.mail-storage-bar{background:var(--bg-muted);border-radius:99px;height:4px;overflow:hidden}.mail-storage-bar-fill{animation:bar-in .9s cubic-bezier(.2,.7,.2,1) .3s both;background:linear-gradient(90deg,var(--primary),var(--purple));border-radius:99px;height:100%;transform-origin:left}.mail-storage-foot{color:var(--t-light);font-size:11px;margin-top:6px}.mail-storage-foot a{color:var(--primary);font-weight:600}.mail-list{background:var(--bg-card);border-right:1px solid var(--border-soft);min-width:0;overflow:hidden}.mail-list,.mail-list-head{display:flex;flex-direction:column}.mail-list-head{border-bottom:1px solid var(--border-soft);gap:12px;padding:14px 16px}.mail-list-toptools{align-items:center;display:flex;gap:10px;justify-content:space-between}.mail-list-title{color:var(--t-base);font-family:Inter Tight,sans-serif;font-size:15px;font-weight:700;letter-spacing:-.018em}.mail-list-title .meta{color:var(--t-light);font-family:JetBrains Mono,monospace;font-size:10.5px;font-weight:500;letter-spacing:.04em;margin-left:8px}.mail-list-tools{display:flex;gap:2px}.mail-tool{border-radius:7px;color:var(--t-muted);display:grid;height:28px;place-items:center;transition:background .16s,color .16s;width:28px}.mail-tool:hover{background:var(--bg-hover);color:var(--t-base)}.mail-tool svg{fill:none;height:14px;stroke:currentColor;stroke-width:1.8;width:14px}.mail-search{position:relative}.mail-search input{background:var(--bg-muted);border:1px solid var(--border);border-radius:8px;color:var(--t-base);font-size:12.5px;outline:0;padding:8px 10px 8px 32px;transition:border-color .18s,box-shadow .18s,background .18s;width:100%}.mail-search input::-moz-placeholder{color:var(--t-light)}.mail-search input::placeholder{color:var(--t-light)}.mail-search input:focus{background:var(--bg-card);border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.mail-search svg{fill:none;height:13px;left:10px;pointer-events:none;position:absolute;stroke:var(--t-light);stroke-width:2;top:50%;transform:translateY(-50%);width:13px}.mail-tabs{background:var(--bg-card);border-bottom:1px solid var(--border-soft);display:flex;gap:4px;padding:0 16px}.mail-tab{border-bottom:2px solid transparent;color:var(--t-muted);font-size:12px;font-weight:500;margin-right:14px;padding:10px 4px;position:relative;top:1px;transition:color .16s,border-color .16s}.mail-tab:hover{color:var(--t-base)}.mail-tab.is-active{border-bottom-color:var(--primary);color:var(--primary);font-weight:600}.mail-tab .num{color:var(--t-light);font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.04em;margin-left:4px}.mail-tab.is-active .num{color:var(--primary)}.mail-list-scroll{flex:1;overflow-y:auto;padding:4px 0}.mail-list-scroll::-webkit-scrollbar{width:4px}.mail-list-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.mail-row{border-bottom:1px solid var(--border-soft);cursor:pointer;display:grid;gap:10px;grid-template-columns:36px 1fr;padding:12px 16px;position:relative;transition:background .16s ease}.mail-row:hover{background:var(--bg-hover)}.mail-row.is-active{background:var(--primary-soft);box-shadow:inset 3px 0 0 var(--primary)}.mail-row.is-unread:before{background:var(--primary);border-radius:50%;content:"";height:5px;left:8px;position:absolute;top:18px;width:5px}.mail-row-avatar{border-radius:50%;color:#fff;display:grid;flex-shrink:0;font-size:12px;font-weight:600;height:36px;place-items:center;width:36px}.ma-1{background:linear-gradient(135deg,var(--primary),var(--purple))}.ma-2{background:linear-gradient(135deg,var(--success),var(--teal))}.ma-3{background:linear-gradient(135deg,var(--danger),var(--warning))}.ma-4{background:linear-gradient(135deg,var(--info),var(--primary-light))}.ma-5{background:linear-gradient(135deg,var(--orange),var(--pink))}.ma-6{background:linear-gradient(135deg,var(--purple),var(--pink))}.mail-row-body{display:flex;flex-direction:column;gap:3px;min-width:0}.mail-row-top{align-items:baseline;display:flex;gap:8px;justify-content:space-between}.mail-row-from{color:var(--t-base);font-size:13px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-row.is-unread .mail-row-from{font-weight:700}.mail-row-time{color:var(--t-light);flex-shrink:0;font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.04em}.mail-row.is-unread .mail-row-time{color:var(--primary)}.mail-row-subject{color:var(--t-base);font-size:12.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-row.is-unread .mail-row-subject{font-weight:600}.mail-row-preview{color:var(--t-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-row-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}.mail-tag{border-radius:999px;font-size:9.5px;font-weight:600;letter-spacing:.04em;line-height:1.4;padding:2px 7px;text-transform:uppercase}.mail-tag.work{background:var(--primary-soft);color:var(--primary)}.mail-tag.team{background:var(--success-soft);color:var(--success)}.mail-tag.finance{background:var(--purple-soft);color:var(--purple)}.mail-tag.invoice{background:var(--warning-soft);color:var(--warning)}.mail-tag.travel{background:var(--info-soft);color:var(--info)}.mail-tag.attach{align-items:center;background:var(--bg-muted);color:var(--t-muted);display:inline-flex;gap:3px}.mail-tag.attach svg{fill:none;height:9px;stroke:currentColor;stroke-width:2.4;width:9px}.mail-star{bottom:12px;color:var(--t-light);cursor:pointer;position:absolute;right:16px;transition:color .16s}.mail-star svg{fill:none;height:13px;stroke:currentColor;stroke-width:1.8;width:13px}.mail-star.is-on,.mail-star:hover{color:var(--warning)}.mail-star.is-on svg{fill:var(--warning)}.mail-reader{background:var(--bg-card);display:flex;flex-direction:column;min-width:0;overflow:hidden}.reader-toolbar{align-items:center;border-bottom:1px solid var(--border-soft);display:flex;gap:10px;justify-content:space-between;padding:12px 22px}.reader-tools-group{align-items:center;display:flex;gap:2px}.reader-tools-group .sep{background:var(--border-soft);height:18px;margin:0 6px;width:1px}.reader-scroll{flex:1;overflow-y:auto;padding:24px 28px 28px}.reader-scroll::-webkit-scrollbar{width:5px}.reader-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.reader-head{margin-bottom:18px}.reader-subject{color:var(--t-base);font-family:Inter Tight,sans-serif;font-size:22px;font-weight:700;letter-spacing:-.022em;line-height:1.25;margin:0 0 10px}.reader-meta-row{align-items:center;display:flex;flex-wrap:wrap;gap:8px}.reader-meta-row .mail-tag{font-size:10px;padding:3px 8px}.reader-card{border:1px solid var(--border-soft);border-radius:12px;margin-bottom:14px;overflow:hidden}.reader-card-head{align-items:flex-start;background:var(--bg-card);border-bottom:1px solid var(--border-soft);display:flex;gap:12px;padding:14px 16px}.reader-avatar{border-radius:50%;color:#fff;display:grid;flex-shrink:0;font-size:13px;font-weight:600;height:40px;place-items:center;width:40px}.reader-from-block{flex:1;line-height:1.3;min-width:0}.reader-from-name{color:var(--t-base);font-size:13.5px;font-weight:600}.reader-from-email{color:var(--t-muted);font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:.02em}.reader-from-meta{color:var(--t-light);font-size:11.5px;margin-top:4px}.reader-time-block{color:var(--t-muted);flex-shrink:0;font-size:11.5px;text-align:right}.reader-time-block .mono{color:var(--t-light);display:block;font-family:JetBrains Mono,monospace;font-size:10.5px;letter-spacing:.04em;margin-top:2px}.reader-actions{display:flex;gap:4px;margin-left:4px}.reader-body{background:var(--bg-card);color:var(--t-base);font-size:13.5px;line-height:1.65;padding:18px 16px}.reader-body p{margin:0 0 12px}.reader-body p:last-child{margin-bottom:0}.reader-body strong{color:var(--t-base);font-weight:600}.reader-body a{color:var(--primary);font-weight:500}.reader-body ul{list-style:disc;margin:0 0 12px;padding-left:18px}.reader-body li{margin:4px 0}.reader-quote{background:var(--bg-muted);border-left:2px solid var(--border);border-radius:0 8px 8px 0;color:var(--t-muted);font-size:12.5px;margin:14px 0 4px;padding:12px 14px}.reader-attach{background:var(--bg-card);border-top:1px solid var(--border-soft);padding:14px 16px}.reader-attach-head{align-items:center;color:var(--t-light);display:flex;font-family:JetBrains Mono,monospace;font-size:10.5px;gap:8px;letter-spacing:.14em;margin-bottom:12px;text-transform:uppercase}.reader-attach-head svg{fill:none;height:11px;stroke:currentColor;stroke-width:2;width:11px}.reader-attach-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}.reader-attach-item{align-items:center;background:var(--bg-card);border:1px solid var(--border-soft);border-radius:9px;cursor:pointer;display:flex;gap:10px;padding:10px;transition:border-color .16s,box-shadow .16s,transform .16s}.reader-attach-item:hover{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.attach-ico{border-radius:8px;color:#fff;display:grid;flex-shrink:0;font-family:JetBrains Mono,monospace;font-size:9.5px;font-weight:700;height:34px;letter-spacing:.04em;place-items:center;width:34px}.attach-ico.pdf{background:var(--danger)}.attach-ico.doc{background:var(--primary)}.attach-ico.xls{background:var(--success)}.attach-ico.img{background:var(--purple)}.attach-ico.zip{background:var(--orange)}.attach-meta{line-height:1.3;min-width:0}.attach-name{color:var(--t-base);font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attach-size{color:var(--t-light);font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.04em}.reader-collapsed{align-items:center;background:var(--bg-card);cursor:pointer;display:flex;gap:12px;padding:12px 16px;transition:background .16s}.reader-collapsed:hover{background:var(--bg-hover)}.reader-collapsed .reader-avatar{font-size:11px;height:28px;width:28px}.reader-collapsed-from{color:var(--t-base);font-size:12.5px;font-weight:600}.reader-collapsed-preview{color:var(--t-muted);flex:1;font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reader-collapsed-time{color:var(--t-light);font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.04em}.reader-replybar{align-items:center;background:var(--bg-muted);border:1px solid var(--border-soft);border-radius:12px;display:flex;gap:6px;margin-top:8px;padding:14px 16px}.reader-replybar input{background:transparent;border:0;color:var(--t-base);flex:1;font-size:13px;outline:0;padding:4px 6px}.reader-replybar input::-moz-placeholder{color:var(--t-light)}.reader-replybar input::placeholder{color:var(--t-light)}.reader-replybar .reply-send{background:var(--primary);border-radius:8px;color:#fff;display:grid;flex-shrink:0;height:32px;place-items:center;transition:background .18s;width:32px}.reader-replybar .reply-send:hover{background:var(--primary-dark)}.reader-replybar .reply-send svg{fill:none;height:14px;stroke:currentColor;stroke-width:2;width:14px}.cal-hero{margin-bottom:20px}.cal-hero .hero-title{font-size:clamp(24px,2.4vw,28px);margin-bottom:6px}.cal-hero .hero-sub{font-size:13.5px}.cal-shell{animation:rise-in .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:80ms;display:grid;gap:20px;grid-template-columns:280px minmax(0,1fr)}.cal-rail{display:flex;flex-direction:column;gap:18px;min-width:0}.cal-quickadd{align-items:center;background:var(--primary);border-radius:10px;box-shadow:0 2px 6px -1px var(--primary-ring);color:#fff;display:inline-flex;font-size:13px;font-weight:600;gap:8px;justify-content:center;padding:11px 14px;transition:background .18s}.cal-quickadd:hover{background:var(--primary-dark)}.cal-quickadd svg{fill:none;height:14px;stroke:currentColor;stroke-width:2;width:14px}.cal-rail-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:12px;padding:16px}.cal-rail-head{align-items:center;display:flex;gap:8px;justify-content:space-between}.cal-rail-title{color:var(--t-base);font-family:Inter Tight,sans-serif;font-size:13.5px;font-weight:700;letter-spacing:-.01em}.cal-rail-tools{display:flex;gap:2px}.mini-cal-grid{display:grid;gap:1px;grid-template-columns:repeat(7,1fr)}.mini-cal-wd{color:var(--t-light);font-family:JetBrains Mono,monospace;font-size:9.5px;letter-spacing:.06em;padding:4px 0 6px;text-align:center}.mini-cal-day{aspect-ratio:1;border-radius:7px;color:var(--t-base);cursor:pointer;display:grid;font-size:11.5px;place-items:center;position:relative;transition:background .14s ease,color .14s ease}.mini-cal-day:hover{background:var(--bg-hover)}.mini-cal-day.is-other{color:var(--t-light)}.mini-cal-day.is-today{background:var(--primary);color:#fff;font-weight:700}.mini-cal-day.has-event:after{background:var(--primary);border-radius:50%;bottom:3px;content:"";height:3px;left:50%;position:absolute;transform:translateX(-50%);width:3px}.mini-cal-day.is-today.has-event:after{background:#fff}.cal-list{display:flex;flex-direction:column;gap:2px}.cal-list-item{align-items:center;border-radius:7px;cursor:pointer;display:flex;gap:10px;padding:7px 8px;transition:background .14s ease}.cal-list-item:hover{background:var(--bg-hover)}.cal-list-check{background:currentColor;border:1.5px solid;border-radius:4px;flex-shrink:0;height:14px;position:relative;width:14px}.cal-list-check:after{border:solid #fff;border-width:0 1.5px 1.5px 0;content:"";height:7px;left:3px;position:absolute;top:0;transform:rotate(45deg);width:3px}.cal-list-check.is-off{background:transparent}.cal-list-check.is-off:after{display:none}.cal-list-name{color:var(--t-base);flex:1;font-size:12.5px;min-width:0}.cal-list-count,.cal-list-item.is-off .cal-list-name{color:var(--t-light)}.cal-list-count{font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.04em}.upc-list{display:flex;flex-direction:column}.upc-item{align-items:center;border-top:1px solid var(--border-soft);display:grid;gap:12px;grid-template-columns:44px 1fr;padding:11px 0}.upc-item:first-child{border-top:0;padding-top:4px}.upc-date{background:var(--bg-muted);border-radius:8px;line-height:1.05;padding:6px 0;text-align:center}.upc-date .day{color:var(--t-base);font-family:Inter Tight,sans-serif;font-size:17px;font-weight:700;letter-spacing:-.022em}.upc-date .mo{color:var(--t-light);display:block;font-family:JetBrains Mono,monospace;font-size:9px;letter-spacing:.08em;margin-top:2px;text-transform:uppercase}.upc-date.is-today{background:var(--primary-soft)}.upc-date.is-today .day,.upc-date.is-today .mo{color:var(--primary)}.upc-meta{line-height:1.35;min-width:0}.upc-title{color:var(--t-base);font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upc-time{align-items:center;color:var(--t-muted);display:flex;font-size:11.5px;gap:6px;margin-top:3px}.upc-time .dot{border-radius:50%;flex-shrink:0;height:6px;width:6px}.upc-time .mono{color:var(--t-light);font-family:JetBrains Mono,monospace;font-size:10.5px;letter-spacing:.04em}.cal-main{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;min-width:0;overflow:hidden}.cal-toolbar{border-bottom:1px solid var(--border-soft);gap:16px;justify-content:space-between;padding:16px 20px}.cal-toolbar,.cal-toolbar-left{align-items:center;display:flex}.cal-toolbar-left{gap:14px;min-width:0}.cal-month{color:var(--t-base);font-family:Inter Tight,sans-serif;font-size:22px;font-weight:700;letter-spacing:-.022em;line-height:1;white-space:nowrap}.cal-month .yr{color:var(--t-light);font-weight:500;margin-left:4px}.cal-nav{align-items:center;display:flex;gap:4px}.cal-nav-btn{background:var(--bg-card);border:1px solid var(--border);border-radius:7px;color:var(--t-muted);display:grid;height:30px;place-items:center;transition:background .16s,color .16s;width:30px}.cal-nav-btn:hover{background:var(--bg-hover);border-color:var(--t-light);color:var(--t-base)}.cal-nav-btn svg{fill:none;height:13px;stroke:currentColor;stroke-width:2;width:13px}.cal-today-btn{background:var(--bg-card);border:1px solid var(--border);border-radius:7px;color:var(--t-base);font-size:12px;font-weight:600;height:30px;padding:0 12px;transition:border-color .16s,background .16s}.cal-today-btn:hover{background:var(--bg-hover);border-color:var(--t-light)}.cal-views{background:var(--bg-muted);border-radius:8px;display:flex;gap:2px;padding:3px}.cal-view-tab{border-radius:6px;color:var(--t-muted);font-size:12px;font-weight:600;padding:6px 12px;transition:background .16s,color .16s,box-shadow .16s}.cal-view-tab:hover{color:var(--t-base)}.cal-view-tab.is-active{background:var(--bg-card);box-shadow:var(--shadow-sm);color:var(--t-base)}.cal-toolbar-right{align-items:center;display:flex;gap:8px}.cal-weekdays{background:var(--bg-card);border-bottom:1px solid var(--border);display:grid;grid-template-columns:repeat(7,1fr)}.cal-weekdays>div{color:var(--t-light);font-family:JetBrains Mono,monospace;font-size:10px;font-weight:500;letter-spacing:.18em;padding:10px 12px;text-align:left;text-transform:uppercase}.cal-grid{display:grid;flex:1;grid-auto-rows:minmax(110px,1fr);grid-template-columns:repeat(7,1fr)}.cal-cell{border-bottom:1px solid var(--border-soft);border-right:1px solid var(--border-soft);cursor:pointer;display:flex;flex-direction:column;gap:4px;min-width:0;padding:8px 8px 6px;position:relative;transition:background .16s ease}.cal-cell:hover{background:var(--bg-hover)}.cal-cell:nth-child(7n){border-right:0}.cal-grid>.cal-cell:nth-last-child(-n+7){border-bottom:0}.cal-cell.is-other{background:var(--bg-muted)}.cal-cell.is-other:hover{background:var(--bg-hover)}.cal-day-num{align-self:flex-start;border-radius:6px;color:var(--t-base);font-family:Inter Tight,sans-serif;font-size:13px;font-weight:600;line-height:1;margin-bottom:2px;padding:2px 4px}.cal-cell.is-other .cal-day-num{color:var(--t-light);font-weight:500}.cal-cell.is-today .cal-day-num{background:var(--primary);color:#fff;min-width:22px;padding:4px 6px;text-align:center}.cal-cell.is-weekend:not(.is-today):not(.is-other) .cal-day-num{color:var(--t-muted)}.cal-chips{flex-direction:column;gap:2px}.cal-chip,.cal-chips{display:flex;min-width:0}.cal-chip{align-items:center;border-left:2px solid transparent;border-radius:5px;cursor:pointer;font-size:11px;font-weight:500;gap:6px;line-height:1.3;overflow:hidden;padding:3px 7px;text-overflow:ellipsis;transition:filter .16s ease,transform .14s ease;white-space:nowrap}.cal-chip:hover{transform:translateX(1px)}.cal-chip-time{flex-shrink:0;font-family:JetBrains Mono,monospace;font-size:9.5px;font-weight:600;letter-spacing:.02em}.cal-chip-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cal-chip.work{background:var(--primary-soft);border-left-color:var(--primary);color:var(--primary)}.cal-chip.team{background:var(--success-soft);border-left-color:var(--success);color:var(--success)}.cal-chip.personal{background:var(--purple-soft);border-left-color:var(--purple);color:var(--purple)}.cal-chip.travel{background:var(--info-soft);border-left-color:var(--info);color:var(--info)}.cal-chip.finance{background:var(--warning-soft);border-left-color:var(--warning);color:var(--warning)}.cal-chip.birthday{background:var(--pink-soft);border-left-color:var(--pink);color:var(--pink)}.cal-chip.holiday{background:var(--orange-soft);border-left-color:var(--orange);color:var(--orange)}.cal-chip.solid{color:#fff}.cal-chip.solid.work{background:var(--primary);border-left-color:var(--primary-dark)}.cal-chip.solid.team{background:var(--success);border-left-color:var(--success)}.cal-chip.solid.personal{background:var(--purple);border-left-color:var(--purple)}.cal-chip-more{color:var(--t-muted);cursor:pointer;font-size:10.5px;font-weight:600;padding:3px 7px;transition:color .16s}.cal-chip-more:hover{color:var(--primary)}[data-fc]{--fc-border-color:var(--border-soft);--fc-page-bg-color:var(--bg-card);--fc-neutral-bg-color:var(--bg-muted);--fc-neutral-text-color:var(--t-muted);--fc-today-bg-color:color-mix(in oklab,var(--primary) 10%,transparent);--fc-now-indicator-color:var(--danger);--fc-event-bg-color:var(--primary);--fc-event-border-color:var(--primary);--fc-event-text-color:#fff;--fc-event-selected-overlay-color:rgba(15,23,42,.06);--fc-list-event-hover-bg-color:var(--bg-hover);--fc-highlight-color:color-mix(in oklab,var(--primary) 16%,transparent);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;height:100%}.fc .fc-col-header-cell-cushion{color:var(--t-light);font-family:JetBrains Mono,monospace;font-size:10px;font-weight:500;letter-spacing:.18em;padding:10px 0;text-transform:uppercase}.fc-theme-standard .fc-scrollgrid,.fc-theme-standard td,.fc-theme-standard th{border-color:var(--border-soft)}.fc .fc-daygrid-day-number{color:var(--t-base);font-family:Inter Tight,sans-serif;font-size:12.5px;font-weight:600;padding:6px 8px}.fc .fc-day-other .fc-daygrid-day-number{color:var(--t-light);font-weight:500}.fc .fc-day-today .fc-daygrid-day-number{background:var(--primary);border-radius:6px;color:#fff;margin:4px;min-width:22px;padding:3px 7px;text-align:center}.fc .fc-day-today{background:transparent}.fc .fc-daygrid-day-frame{padding:2px 4px}.fc .fc-daygrid-event,.fc .fc-timegrid-event{border:0;border-left:2px solid transparent;border-radius:5px;cursor:pointer;font-size:11px;font-weight:500;line-height:1.3;margin:1px 4px;padding:2px 6px;transition:transform .14s ease,filter .16s ease}.fc .fc-daygrid-event:hover{transform:translateX(1px)}.fc .fc-daygrid-event-dot{display:none}.fc .fc-event-time{font-family:JetBrains Mono,monospace;font-size:9.5px;font-weight:600;margin-right:4px;opacity:.85}.fc .fc-event.fc-cat-work{background:var(--primary-soft);border-left-color:var(--primary);color:var(--primary)}.fc .fc-event.fc-cat-team{background:var(--success-soft);border-left-color:var(--success);color:var(--success)}.fc .fc-event.fc-cat-personal{background:var(--purple-soft);border-left-color:var(--purple);color:var(--purple)}.fc .fc-event.fc-cat-travel{background:var(--info-soft);border-left-color:var(--info);color:var(--info)}.fc .fc-event.fc-cat-finance{background:var(--warning-soft);border-left-color:var(--warning);color:var(--warning)}.fc .fc-event.fc-cat-birthday{background:var(--pink-soft);border-left-color:var(--pink);color:var(--pink)}.fc .fc-event.fc-cat-team .fc-event-time,.fc .fc-event.fc-cat-travel .fc-event-time,.fc .fc-event.fc-cat-work .fc-event-time{color:inherit}.fc .fc-daygrid-more-link{color:var(--t-muted);font-size:10.5px;font-weight:600;padding:2px 6px}.fc .fc-daygrid-more-link:hover{color:var(--primary)}.fc .fc-timegrid-axis-cushion,.fc .fc-timegrid-slot-label-cushion{color:var(--t-light);font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.04em}.fc .fc-timegrid-now-indicator-line{border-color:var(--danger);border-width:1.5px}.fc .fc-timegrid-now-indicator-arrow{border-color:var(--danger)}.fc .fc-list-day-cushion{background:var(--bg-muted)}.fc .fc-list-day-side-text,.fc .fc-list-day-text{color:var(--t-base);font-family:Inter Tight,sans-serif;font-size:13px;font-weight:600}.fc .fc-list-event-time,.fc .fc-list-event-title{color:var(--t-base);font-size:13px}.fc .fc-list-event-dot{border-color:var(--primary)}.fc .fc-list-empty{background:var(--bg-card);color:var(--t-muted)}.palette-backdrop{align-items:flex-start;animation:palette-fade .16s ease both;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:rgba(15,23,42,.55);display:none;inset:0;justify-content:center;padding:12vh 16px 16px;position:fixed;z-index:200}body.has-palette-open .palette-backdrop{display:flex}@keyframes palette-fade{0%{opacity:0}to{opacity:1}}.palette-modal{animation:palette-rise .2s cubic-bezier(.2,.7,.2,1) both;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;max-height:70vh;max-width:560px;overflow:hidden;width:100%}@keyframes palette-rise{0%{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.palette-input-row{align-items:center;border-bottom:1px solid var(--border-soft);display:flex;gap:12px;padding:14px 16px}.palette-icon{color:var(--t-muted);flex-shrink:0;height:18px;width:18px}.palette-input{background:transparent;border:0;color:var(--t-base);flex:1;font-family:inherit;font-size:15px;min-width:0;outline:0;padding:4px 0}.palette-input::-moz-placeholder{color:var(--t-light)}.palette-input::placeholder{color:var(--t-light)}.palette-esc{background:var(--bg-muted);border:1px solid var(--border);border-radius:5px;color:var(--t-muted);flex-shrink:0;font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.04em;padding:3px 7px;text-transform:lowercase}.palette-results{flex:1;overflow-y:auto;padding:6px}.palette-results::-webkit-scrollbar{width:4px}.palette-results::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.palette-result{align-items:center;border-radius:8px;cursor:pointer;display:grid;gap:12px;grid-template-columns:28px 1fr auto;padding:9px 12px;transition:background .12s}.palette-result:hover{background:var(--bg-hover)}.palette-result.is-selected{background:var(--primary-soft);color:var(--primary)}.palette-result-icon{background:var(--bg-muted);border-radius:6px;color:var(--t-muted);display:grid;flex-shrink:0;height:28px;place-items:center;width:28px}.palette-result.is-selected .palette-result-icon{background:color-mix(in oklab,var(--primary) 14%,transparent);color:var(--primary)}.palette-result-icon svg{height:14px;width:14px}.palette-result-label{color:var(--t-base);font-size:13.5px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.palette-result.is-selected .palette-result-label{color:var(--primary);font-weight:600}.palette-result-section{color:var(--t-light);flex-shrink:0;font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.04em;text-transform:uppercase}.palette-result.is-selected .palette-result-section{color:var(--primary);opacity:.8}.palette-empty{color:var(--t-muted);font-size:13px;padding:32px 16px;text-align:center}.palette-foot{background:var(--bg-card);border-top:1px solid var(--border-soft);color:var(--t-muted);display:flex;font-size:11px;gap:18px;padding:10px 16px}.palette-foot kbd{background:var(--bg-muted);border:1px solid var(--border);border-radius:4px;color:var(--t-muted);font-family:JetBrains Mono,monospace;font-size:9.5px;letter-spacing:.04em;margin-right:4px;padding:1.5px 5px}@media(max-width:600px){.palette-backdrop{padding-top:6vh}.palette-foot{flex-wrap:wrap;font-size:10px;gap:10px}}@media(max-width:900px){.auth-shell{grid-template-columns:1fr}.auth-aside{display:none}}@media(max-width:1200px){.sv-regions{gap:28px;grid-template-columns:repeat(2,minmax(0,1fr))}.sv-radials{gap:18px;grid-template-columns:1fr}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mail-shell{grid-template-columns:200px 1fr;height:auto;min-height:0}.mail-reader{display:none}.cal-shell{grid-template-columns:240px 1fr}.cal-grid{grid-auto-rows:minmax(96px,1fr)}}@media(max-width:1100px){.shell{grid-template-columns:72px 1fr}.d-sidebar{padding:20px 10px}.brand-tag,.brand-text,.nav-label,.nav-link .chev,.nav-link .nav-badge,.nav-link>span:not(.nav-badge),.nav-submenu,.workspace-chev,.workspace-text{display:none}.brand{padding:0 0 18px}.brand,.nav-link{justify-content:center}.nav-link{padding:10px}.nav-link.is-active:before{left:-10px}.workspace{justify-content:center;padding:6px}.col-6{grid-column:span 12}.chat-shell{grid-template-columns:240px 1fr}}@media(max-width:720px){.shell{display:block}.d-sidebar{box-shadow:0 12px 40px -8px rgba(0,0,0,.4);height:100vh;left:0;padding:22px 16px 18px;position:fixed;top:0;transform:translateX(-100%);transition:transform .24s cubic-bezier(.2,.7,.2,1);width:280px;z-index:100}.brand-tag,.brand-text,.nav-label,.nav-link .chev,.nav-link .nav-badge,.nav-link>span:not(.nav-badge),.nav-submenu,.workspace-chev,.workspace-text{display:revert}.brand{padding:4px 10px 20px}.brand,.nav-link{justify-content:flex-start}.nav-link{padding:9px 12px}.workspace{justify-content:flex-start;padding:6px 10px}body.has-drawer-open .d-sidebar{transform:translateX(0)}body.has-drawer-open{overflow:hidden}.hamburger{display:inline-flex}.d-topbar{padding:0 12px}.topbar-actions{gap:2px}.crumbs{flex:1;gap:6px;min-width:0;overflow:hidden}.crumbs .sep,.crumbs>span:not(.current){display:none}.crumbs .current{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cmd{height:36px;justify-content:center;min-width:0;padding:0;width:36px}.cmd .kbd,.cmd span{display:none}.cmd svg{height:16px;width:16px}.avatar{margin-left:2px}.dd-menu{max-width:360px;min-width:0;right:-8px;width:calc(100vw - 16px)}.dd-menu.dd-profile{max-width:280px;width:calc(100vw - 16px)}.content{padding:20px 16px 16px}.d-footer{gap:10px;padding:20px 16px}.d-footer,.hero{align-items:flex-start;flex-direction:column}.hero{gap:20px}.hero-actions{flex-wrap:wrap}.grid{gap:16px}.kpi-grid,.sv-regions{grid-template-columns:1fr}.sv-regions{gap:22px}.monthly-footer{gap:16px;grid-template-columns:repeat(2,1fr)}.wx-forecast{gap:6px;grid-template-columns:repeat(4,1fr)}.wx-hero{align-items:flex-start;flex-direction:column;gap:12px}.wx-date{text-align:left}.sales-summary{align-items:flex-start;flex-direction:column;gap:12px}.card{padding:18px}.card-head{flex-wrap:wrap;gap:10px}.chart-canvas-wrap{min-height:200px}.data-toolbar{align-items:stretch;flex-direction:column;gap:10px}.data-toolbar-left,.data-toolbar-right{flex-wrap:wrap;min-width:0}.data-foot{align-items:flex-start;flex-direction:column;gap:12px}.mail-shell{grid-template-columns:1fr}.mail-rail{display:none}.mail-hero{align-items:flex-start;flex-direction:column;gap:16px}.chat-shell{grid-template-columns:1fr;height:auto}.chat-rail{display:none}.cal-shell{grid-template-columns:1fr}.cal-toolbar{flex-wrap:wrap;gap:10px;padding:14px}.cal-toolbar-left{justify-content:space-between;width:100%}.cal-views{order:3}.cal-grid{grid-auto-rows:minmax(78px,1fr)}.cal-weekdays>div{font-size:9px;letter-spacing:.1em;padding:8px 6px}.cal-cell{padding:5px}.cal-chip-time{display:none}.compose-row{gap:6px!important;grid-template-columns:1fr!important}.compose-row-actions{justify-content:flex-start!important}.auth-main{padding:24px 20px}}@media(max-width:480px){.monthly-footer{grid-template-columns:1fr}.wx-forecast{grid-template-columns:repeat(2,1fr)}.form-actions{align-items:stretch;flex-direction:column}.form-actions .btn{justify-content:center;width:100%}.form-actions .spacer{display:none}.social-row{grid-template-columns:1fr}}:root{--jvm-border-color:#e5e6e7;--jvm-box-shadow:0 1px 2px 0 rgba(0,0,0,.05);--jvm-tooltip-font-size:0.9rem;--jvm-tooltip-bg-color:#337ffa;--jvm-tooltip-color:#fff;--jvm-tooltip-padding:3px 5px;--jvm-tooltip-shadow:var(--jvm-box-shadow);--jvm-tooltip-radius:3px;--jvm-zoom-btn-bg-color:#292929;--jvm-zoom-btn-color:#fff;--jvm-zoom-btn-size:15px;--jvm-zoom-btn-radius:3px;--jvm-series-container-right:15px;--jvm-legend-bg-color:#fff;--jvm-legend-radius:0.15rem;--jvm-legend-margin-left:0.75rem;--jvm-legend-padding:0.6rem;--jvm-legend-title-padding-bottom:0.5rem;--jvm-legend-title-margin-bottom:0.575rem;--jvm-legend-tick-margin-top:0.575rem;--jvm-legend-tick-sample-radius:0;--jvm-legend-tick-sample-height:12px;--jvm-legend-tick-sample-width:30px;--jvm-legend-tick-text-font-size:12px;--jvm-legend-tick-text-margin-top:3px}.jvm-zoom-btn,image,text{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.jvm-container{height:100%;position:relative;width:100%}.jvm-tooltip{background-color:var(--jvm-tooltip-bg-color);border-radius:var(--jvm-tooltip-radius);box-shadow:var(--jvm-tooltip-shadow);color:var(--jvm-tooltip-color);display:none;font-size:var(--jvm-tooltip-font-size);padding:var(--jvm-tooltip-padding);position:absolute;white-space:nowrap}.jvm-tooltip.active{display:block}.jvm-zoom-btn{background-color:var(--jvm-zoom-btn-bg-color);border-radius:var(--jvm-zoom-btn-radius);box-sizing:border-box;color:var(--jvm-zoom-btn-color);cursor:pointer;height:var(--jvm-zoom-btn-size);left:10px;line-height:var(--jvm-zoom-btn-size);position:absolute;text-align:center;width:var(--jvm-zoom-btn-size)}.jvm-zoom-btn.jvm-zoomin{top:var(--jvm-zoom-btn-size)}.jvm-zoom-btn.jvm-zoomout{top:calc(var(--jvm-zoom-btn-size)*2 + var(--jvm-zoom-btn-size)/3)}.jvm-series-container{position:absolute;right:var(--jvm-series-container-right)}.jvm-series-container.jvm-series-h{bottom:15px}.jvm-series-container.jvm-series-v{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:.75rem;top:15px}.jvm-legend{background-color:var(--jvm-legend-bg-color);border:1px solid var(--jvm-border-color);border-radius:var(--jvm-legend-radius);box-shadow:var(--jvm-box-shadow);margin-left:var(--jvm-legend-margin-left);padding:var(--jvm-legend-padding)}.jvm-legend-title{border-bottom:1px solid var(--jvm-border-color);line-height:1;margin-bottom:var(--jvm-legend-title-margin-bottom);padding-bottom:var(--jvm-legend-title-padding-bottom);text-align:left}.jvm-legend-tick{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-width:40px}.jvm-legend-tick:not(:first-child){margin-top:var(--jvm-legend-tick-margin-top)}.jvm-legend-tick-sample{border-radius:var(--jvm-legend-tick-sample-radius);height:var(--jvm-legend-tick-sample-height);margin-right:.45rem;width:var(--jvm-legend-tick-sample-width)}.jvm-legend-tick-text{font-size:var(--jvm-legend-tick-text-font-size);line-height:1;text-align:center}.jvm-line[animation=true]{-webkit-animation:jvm-line-animation 10s linear infinite forwards;animation:jvm-line-animation 10s linear infinite forwards}@-webkit-keyframes jvm-line-animation{0%{stroke-dashoffset:250}}@keyframes jvm-line-animation{0%{stroke-dashoffset:250}}









/* === HER VOICE THEME (appended) === */
/* ============================================================
   HER Voice theme
   ------------------------------------------------------------
   Palette source: videohub1/src/styles/globals.css
   Brand primary #D1156C (light) / #E8357A (dark).

   The stock template is fully token-driven, so this file only redefines
   the :root custom properties plus a short list of shape rules.
   It is appended to style.css; deleting the marked block there
   restores the stock blue theme.

   House rules applied: no gradients, no pill-shaped buttons.
   ============================================================ */

/* Fallback — the stock sheet only defines tokens under an explicit
   [data-theme] attribute, so a page renders unstyled until the script
   sets it. This bare :root keeps the light palette applied either way. */
:root,
:root[data-theme="light"] {
  --bg-body:      #FAFAFA;
  --bg-card:      #FFFFFF;
  --bg-sidebar:   #FFFFFF;
  --bg-hover:     #FFF5FA;
  --bg-muted:     #F8F0F5;

  --t-base:       #1a1a2e;
  --t-muted:      #6B7280;
  --t-light:      #9CA3AF;
  --t-inverse:    #FFFFFF;

  --border:       #F0E0EB;
  --border-soft:  #F7EDF3;

  --primary:       #D1156C;
  --primary-light: #E8357A;
  --primary-dark:  #a50d56;
  --primary-soft:  #FFF5FA;
  --primary-ring:  rgba(209, 21, 108, 0.18);

  --success:      #10B981;  --success-soft: #ECFDF5;
  --warning:      #F59E0B;  --warning-soft: #FFFBEB;
  --danger:       #EF4444;  --danger-soft:  #FEF2F2;
  --info:         #3B82F6;  --info-soft:    #EFF6FF;

  --overlay:      rgba(250, 250, 250, 0.72);

  /* Vector-map tooltip follows the brand rather than stock blue. */
  --jvm-tooltip-bg-color: #D1156C;
}

:root[data-theme="dark"] {
  --bg-body:      #16161F;
  --bg-card:      #1E1E2E;
  --bg-sidebar:   #1E1E2E;
  --bg-hover:     #272739;
  --bg-muted:     #1a1a28;

  --t-base:       #F0F0F8;
  --t-muted:      #A0A0B8;
  --t-light:      #6B6B88;
  --t-inverse:    #16161F;

  --border:       #2E2E42;
  --border-soft:  #242434;

  --primary:       #E8357A;
  --primary-light: #F06A9B;
  --primary-dark:  #D1156C;
  --primary-soft:  #2a0f1e;
  --primary-ring:  rgba(232, 53, 122, 0.24);

  --success:      #34D399;  --success-soft: #0f2a20;
  --warning:      #FBBF24;  --warning-soft: #2b1f08;
  --danger:       #F87171;  --danger-soft:  #2b1414;
  --info:         #60A5FA;  --info-soft:    #0d2232;

  --overlay:      rgba(22, 22, 31, 0.72);

  --jvm-tooltip-bg-color: #E8357A;
}

/* ── No gradients ─────────────────────────────────────────────
   The stock sheet has exactly one: a two-tone sweep on the
   workspace avatar. Flattened to a solid brand fill. */
.workspace-avatar {
  background: var(--primary) !important;
}

/* ── No pill shapes ───────────────────────────────────────────
   Badges, tags, chips, progress bars and the chat send button
   all shipped at border-radius 99–999px. Squared off.
   The toggle switch keeps its pill track: there the shape is the
   control's affordance, not decoration. */
.nav-badge,
.icon-btn .count,
.tag,
.badge,
.chat-conv-badge,
.kpi-pill,
.todo-badge,
.mail-folder-count.is-strong,
.mail-tag,
.chat-send {
  border-radius: 3px !important;
}

.progress,
.progress-fill,
.sv-region-bar,
.sv-region-bar-fill,
.mail-storage-bar,
.mail-storage-bar-fill {
  border-radius: 2px !important;
}

/* ── Flatter corners overall ──────────────────────────────────
   The stock sheet mixes 14/12/10/9/8/7px radii. Pulled toward the
   squarer language used across the rest of the admin. */
.card,
.panel,
.modal-content,
.modal-demo,
.dropdown-menu,
.btn,
.form-control,
.form-select,
.input,
.select,
.search-input,
.table-wrap {
  border-radius: 4px !important;
}

/* ── No gradients, continued ──────────────────────────────────
   The stock sheet carries 25 gradient rules, not the one a
   line-count suggested (the file is minified to a single line).
   Each is flattened to the dominant solid colour; the purely
   decorative glows are removed outright. */

/* Avatars, badges and accent fills → first colour of the sweep. */
.workspace-avatar,
.avatar,
.dd-avatar.a1,
.chat-msg-av.me,
.chat-avatar.me,
.ma-1,
.auth-aside,
.progress-fill.gradient,
.mail-storage-bar-fill { background: var(--primary) !important; }

.dd-avatar.a2, .ma-2 { background: var(--success) !important; }
.dd-avatar.a3, .ma-3 { background: var(--danger)  !important; }
.ma-4 { background: var(--info)    !important; }
.ma-5 { background: var(--orange)  !important; }
.ma-6 { background: var(--purple)  !important; }

.wx-icon { background: var(--primary-soft) !important; }

/* Decorative radial blooms and the striped bar texture. */
.auth-aside:before,
.auth-aside:after,
.error-shell:before,
.error-shell:after,
.kpi-card:before { background: none !important; }

.progress-fill.striped { background-image: none !important; }

/* The 404/500 numeral used gradient-clipped text; make it solid. */
.error-code {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--primary) !important;
}

/* ── Brand lockup ─────────────────────────────────────────────
   No tile, no border, no backdrop — the mark sits directly on the
   sidebar and is given room to breathe. Two files are shipped so the
   artwork reads on either surface: the ink is dark on light, white
   on dark. The pink sign-in panel gets an all-white knockout. */
.brand {
  padding: 10px 10px 20px !important;
}

.brand-logo {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  display: block !important;
}

.brand-img {
  display: block;
  height: 46px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.brand-img.on-dark  { display: none; }
[data-theme="dark"] .brand-img.on-light { display: none; }
[data-theme="dark"] .brand-img.on-dark  { display: block; }

/* "The Hub" stands alone now that the wordmark lives in the logo. */
.brand-text { min-width: 0; }
.brand-tag {
  font-size: 10.5px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  color: var(--t-muted) !important;
}

/* Sign-in / sign-up aside: knockout mark on the brand-coloured panel,
   again with nothing drawn around it. */
.auth-brand .logo {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  display: block !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.auth-brand .logo img {
  display: block;
  height: 40px;
  width: auto;
  object-fit: contain;
}
/* The aside already carries the name, so hide the duplicate text label. */
.auth-brand .name { display: none; }

/* Footer credit */
.d-footer a { color: var(--primary); font-weight: 600; text-decoration: none; }
.d-footer a:hover { text-decoration: underline; }


/* ── Modal overlay ────────────────────────────────────────────
   The template ships the modal's *parts* (.modal-demo, -head, -body,
   -foot) as a static demo card with no overlay or behaviour. This adds
   only the positioning shell; the panel itself is the stock component. */
.am-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}
.am-modal.is-open { display: flex; }

.am-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.am-modal .modal-demo {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  /* Head and foot stay put; only the field area scrolls, so the
     Create / Cancel buttons are never pushed below the fold. */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 80px);
}
.am-modal .modal-head,
.am-modal .modal-foot { flex-shrink: 0; }
.am-modal .modal-body { flex: 1; min-height: 0; overflow-y: auto; }
.am-modal .modal-demo.am-narrow { max-width: 560px; }

/* ── A tick must not blank the window ─────────────────────────
   `.check input` is `position:absolute` so the real control can sit
   behind the drawn box. With no positioned ancestor of its own it
   resolved against `.modal-demo`, which is `position:relative` and
   `overflow:hidden`. Ticking a box far down a long form — the
   thematic interests, the consent pair — focused an input the browser
   believed was hundreds of pixels past the panel's bottom edge, so it
   scrolled the *panel*, and the window went white. Containing the
   input in its own label keeps that offset at zero; `overflow:clip`
   means the panel cannot be scrolled again by anything, while the
   field area still scrolls as before. */
.check { position: relative; }
.am-modal .modal-demo { overflow: clip; }

.am-modal .modal-body { color: var(--t-base); padding: 20px; }

/* Section rule inside a form grid. */
.am-section {
  grid-column: span 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.am-section:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.am-checks {
  grid-column: span 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}

/* Scrollable picker list for groups / members. */
.am-picker {
  grid-column: span 2;
  border: 1px solid var(--border);
  background: var(--bg-card);
  max-height: 168px;
  overflow-y: auto;
}
.am-picker label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  font-size: 13px;
}
.am-picker label:last-child { border-bottom: none; }
.am-picker label:hover { background: var(--bg-hover); }
.am-picker .am-picker-meta { margin-left: auto; font-size: 11.5px; color: var(--t-muted); }

/* Rows that only apply to one choice. */
.am-conditional { display: none; }
.am-conditional.is-on { display: flex; }

.am-error {
  grid-column: span 2;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 12.5px;
}
.am-error.is-on { display: flex; }

.input.is-invalid { border-color: var(--danger) !important; }

@media (max-width: 720px) {
  .am-modal { padding: 16px 10px; }
  .am-section, .am-checks, .am-picker, .am-error { grid-column: span 1; }
}


/* ── Upload dropzone ──────────────────────────────────────────
   The template ships no file-drop component, so this is the one
   new primitive here. Flat fill, square corners, dashed edge. */
.am-drop {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px 18px;
  border: 1.5px dashed var(--border);
  background: var(--bg-muted);
  color: var(--t-muted);
  cursor: pointer;
  text-align: center;
  transition: border-color .16s, background .16s, color .16s;
}
.am-drop:hover { border-color: var(--primary); color: var(--primary); }
.am-drop.is-over { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.am-drop.has-file { border-style: solid; border-color: var(--success); background: var(--success-soft); color: var(--success); }

.am-drop-title { font-size: 13.5px; font-weight: 600; color: var(--t-base); }
.am-drop.has-file .am-drop-title { color: var(--success); }
.am-drop-sub { font-size: 11.5px; }

@media (max-width: 720px) { .am-drop { grid-column: span 1; } }


/* ── Qutees progression ───────────────────────────────────────
   The Princess -> Queen ladder and the badge grid. Flat fills and
   square corners throughout; the one circle is the step marker,
   where the shape carries the meaning. */
.qp-journey {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin-bottom: 22px;
}

.qp-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  text-align: center;
}

/* The connecting rail runs behind the markers. */
.qp-step::before {
  content: "";
  position: absolute;
  top: 8px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--border);
}
.qp-step:first-child::before { display: none; }
.qp-step.is-done::before,
.qp-step.is-current::before { background: var(--primary); }

.qp-step-mark {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg-card);
}
.qp-step.is-current .qp-step-mark { box-shadow: 0 0 0 4px var(--primary-ring); }

.qp-step-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t-muted);
  line-height: 1.3;
}
.qp-step.is-done .qp-step-name,
.qp-step.is-current .qp-step-name { color: var(--t-base); }
.qp-step.is-current .qp-step-name { color: var(--primary); }

.qp-step-req { font-size: 11px; color: var(--t-light); }

.qp-meter { border-top: 1px solid var(--border-soft); padding-top: 16px; }
.qp-meter-head,
.qp-meter-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: var(--t-muted);
}
.qp-meter-head { margin-bottom: 8px; color: var(--t-base); }
.qp-meter-foot { margin-top: 8px; }

/* Rank dot in the ladder table. */
.qp-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: 0;
}

/* ── Badge grid ───────────────────────────────────────────── */
.qp-group {
  margin: 20px 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t-muted);
}
.qp-group:first-child { margin-top: 4px; }

.qp-badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}

.qp-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: border-color .14s, background .14s;
}
.qp-badge:hover { border-color: var(--primary); background: var(--bg-hover); }

.qp-badge-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--border);
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.qp-badge-name { font-size: 12.5px; font-weight: 600; color: var(--t-base); line-height: 1.25; }
.qp-badge-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; color: var(--t-light); }
.qp-badge-holders { font-size: 10.5px; color: var(--t-muted); }

@media (max-width: 760px) {
  .qp-journey { grid-template-columns: repeat(3, 1fr); row-gap: 18px; }
  .qp-step:nth-child(4)::before { display: none; }
}


/* ── Actions-only header ──────────────────────────────────────
   The page title lived in the hero and repeated the breadcrumb, so the
   hero is gone. Where a page can add a record, its button survives on
   a compact right-aligned bar. */
.hero--actions {
  margin-bottom: 16px;
  justify-content: flex-end;
  animation: none;
}
.hero--actions .hero-actions { margin-left: auto; }

/* ── Compose: a working mail form, not a mock-up ───────────── */
.compose-label {
  font-size: 11.5px; color: var(--t-light);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .1em; text-transform: uppercase;
}
.cm-avatar {
  width: 24px; height: 24px; background: var(--primary); color: #fff;
  display: grid; place-items: center; font-size: 10px; font-weight: 600;
}
/* Recipients: a chip list that is also a text input. */
.cm-chips {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  min-height: 34px; padding: 4px 0;
}
.cm-chips input {
  border: 0; outline: 0; background: 0 0; flex: 1; min-width: 160px;
  font-size: 13px; color: var(--t-base); padding: 4px 0;
}
.cm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 4px 4px 8px; font-size: 11.5px;
  background: var(--primary-soft); color: var(--primary);
  border: 1px solid var(--border-soft);
}
.cm-chip button {
  background: 0 0; border: 0; color: inherit; cursor: pointer;
  padding: 0 4px; font-size: 13px; line-height: 1;
}
.cm-chip.is-bad { background: var(--danger-soft); color: var(--danger); }
.cm-toggle.is-on { background: var(--primary-soft); color: var(--primary); }
.cm-subject {
  border: 0; outline: 0; background: 0 0; font-size: 16px; font-weight: 600;
  color: var(--t-base); padding: 4px 0; letter-spacing: -.012em;
  font-family: 'Inter Tight', sans-serif; width: 100%;
}
.cm-replyto {
  border: 0; outline: 0; background: 0 0; font-size: 13px;
  color: var(--t-base); padding: 4px 0; width: 100%;
}
.cm-body { min-height: 280px; resize: vertical; line-height: 1.7; font-size: 14px; }
.cm-count {
  margin-top: 8px; font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: var(--t-light);
  letter-spacing: .1em; text-transform: uppercase;
}
.badge.dot.is-sent   { color: var(--success); }
.badge.dot.is-failed { color: var(--danger); }

/* ── Data import ───────────────────────────────────────────── */
.di-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 860px) { .di-grid { grid-template-columns: 1fr; } }
.di-note { font-size: 12.5px; color: var(--t-muted); line-height: 1.6; }
.di-steps { display: flex; gap: 0; margin-bottom: 4px; flex-wrap: wrap; }
.di-step {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace; color: var(--t-light);
  border: 1px solid var(--border-soft); border-right: 0;
}
.di-step:last-child { border-right: 1px solid var(--border-soft); }
.di-step.is-active { color: var(--primary); border-color: var(--primary); }
.di-step.is-done   { color: var(--success); }
.di-step-n {
  width: 18px; height: 18px; display: grid; place-items: center;
  font-size: 10px; background: var(--border-soft); color: var(--t-muted);
}
.di-step.is-active .di-step-n { background: var(--primary); color: #fff; }
.di-step.is-done   .di-step-n { background: var(--success); color: #fff; }
/* Row-level validation results. */
.di-row-bad  td { background: var(--danger-soft); }
.di-row-warn td { background: var(--warning-soft, transparent); }
.di-errs { margin: 0; padding-left: 16px; font-size: 11.5px; color: var(--danger); }
.di-errs li + li { margin-top: 3px; }
.di-warns { margin: 0; padding-left: 16px; font-size: 11.5px; color: var(--t-muted); }
.di-line {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  color: var(--t-muted); white-space: nowrap;
}
.di-summary { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; }
.di-stat { display: flex; flex-direction: column; gap: 2px; }
.di-stat-n { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.di-stat-l {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--t-light); font-family: 'JetBrains Mono', monospace;
}
.di-stat.ok  .di-stat-n { color: var(--success); }
.di-stat.bad .di-stat-n { color: var(--danger); }
.di-fields { width: 100%; }
.di-fields td, .di-fields th { font-size: 12px; }
.di-req { color: var(--danger); font-weight: 600; }

/* The HTML `hidden` attribute has to win. Several of the template's own
   rules set display on .card, .compose-row and the like, and a plain
   [hidden] { display: none } loses to them — and to any inline display.
   Progressive screens rely on this, so it is marked important. */
[hidden] { display: none !important; }

/* Field hints under an input. Already used by several pages, which
   had been rendering them at body size with no distinction. */
.uf-note {
  font-size: 11.5px;
  color: var(--t-muted);
  line-height: 1.5;
  margin-top: 6px;
}
.uf-note.push-warn { color: var(--warning); }

/* ── Daily Reminder ─────────────────────────────────────── */
.dr-msg { max-width: 420px; }
.dr-msg-title { font-weight: 600; font-size: 13px; color: var(--t-base); }
.dr-msg-body {
  font-size: 12px; color: var(--t-muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.dr-audience { display: flex; gap: 4px; flex-wrap: wrap; }
.dr-actions { display: flex; gap: 4px; justify-content: flex-end; }
.dr-bar {
  height: 4px; background: var(--border-soft); width: 90px; margin-top: 5px;
}
.dr-bar-fill { height: 100%; background: var(--success); }
.dr-quote-body { max-width: 380px; font-size: 12.5px; line-height: 1.5; }

/* ── Authorizations: module, then the screens inside it ──── */
.az-module-row {
  display: flex; align-items: stretch; gap: 8px;
  border: 1px solid var(--border-soft); margin-top: 8px;
  background: var(--bg-muted);
}
.az-module {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; background: 0 0; border: 0; cursor: pointer;
  font-family: inherit; font-size: 13.5px; color: var(--t-base); text-align: left;
}
.az-module:hover { background: var(--bg-hover); }
.az-module-name { font-weight: 600; }
.az-caret { display: inline-flex; transition: transform .16s; color: var(--t-muted); }
.az-module.is-open .az-caret { transform: rotate(90deg); }
.az-module .spacer { flex: 1; }
.az-bulk { align-self: center; margin-right: 10px; width: auto; }

.az-screens { border: 1px solid var(--border-soft); border-top: 0; }
.az-screen {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 120px minmax(0, 220px) 120px;
  gap: 12px; align-items: center;
  padding: 9px 14px; border-top: 1px solid var(--border-soft);
}
.az-screen:first-child { border-top: 0; }
.az-screen-head {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--t-light);
  background: var(--bg-muted);
}
.az-screen.is-changed { background: var(--primary-soft); }
.az-screen-name { font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.az-screen-file { font-size: 11px; color: var(--t-light); }
.az-effective, .az-inherited { text-align: left; }

@media (max-width: 860px) {
  .az-screen { grid-template-columns: 1fr; gap: 6px; }
  .az-screen-head { display: none; }
}

/* The forced password window cannot be dismissed — no close button,
   and the backdrop does nothing. There is nothing behind it to use. */
.fp-modal .am-modal-backdrop { cursor: default; }
.fp-modal .modal-head { justify-content: flex-start; }

/* The weather card's place picker sits in the card-action slot, which
   is sized for a short label — without a cap it runs over the title. */
#dash-weather-place { width: auto; max-width: 170px; }

/* ── Idle warning ──────────────────────────────────────────
   Sits above everything, including a modal, because it is about to
   take the page away. */
.idle-warn {
  position: fixed; inset: auto 0 0 0; z-index: 9999;
  display: none; justify-content: center; padding: 16px;
}
.idle-warn.is-on { display: flex; }
.idle-warn-body {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-card); color: var(--t-base);
  border: 1px solid var(--warning); border-left-width: 3px;
  padding: 14px 18px; max-width: 640px; width: 100%;
  box-shadow: 0 8px 28px rgba(0,0,0,.16);
  font-size: 13.5px;
}
.idle-warn-body svg { color: var(--warning); flex-shrink: 0; }
.idle-warn-body > div { flex: 1; }
.idle-count { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
@media (max-width: 620px) {
  .idle-warn-body { flex-wrap: wrap; }
  .idle-warn-body > div { flex: 1 0 100%; }
}

/* ── Sign in / sign up ─────────────────────────────────────── */
.am-note {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--primary-soft); color: var(--primary);
  border: 1px solid var(--border-soft); border-left: 3px solid var(--primary);
  padding: 11px 14px; font-size: 12.5px; line-height: 1.5;
  margin-bottom: 14px;
}
.pw-reveal {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: 0 0; border: 0; color: var(--t-light); cursor: pointer;
  padding: 4px; display: inline-flex;
}
.pw-reveal:hover { color: var(--primary); }
.input-icon { position: relative; }
.input-icon .input { padding-right: 36px; }

/* Password strength, on sign-up. */
.pw-meter { display: flex; gap: 3px; margin-top: 7px; }
.pw-meter span {
  height: 3px; flex: 1; background: var(--border-soft);
}
.pw-meter.s1 span:nth-child(1) { background: var(--danger); }
.pw-meter.s2 span:nth-child(-n+2) { background: var(--warning); }
.pw-meter.s3 span:nth-child(-n+3) { background: var(--info); }
.pw-meter.s4 span { background: var(--success); }

.auth-points { list-style: none; padding: 0; margin: 18px 0 0; }
.auth-points li {
  position: relative; padding-left: 20px; margin-bottom: 9px;
  font-size: 13px; line-height: 1.55; opacity: .9;
}
.auth-points li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; background: currentColor; opacity: .55;
}

/* ── Stories review ───────────────────────────────────────── */
.st-card {
  border: 1px solid var(--border-soft); padding: 16px 18px; margin-bottom: 12px;
  background: var(--bg-card);
}
.st-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; margin-bottom: 8px;
}
.st-card-title { font-size: 14.5px; font-weight: 600; color: var(--t-base); }
.st-card-excerpt {
  font-size: 13px; color: var(--t-muted); line-height: 1.6; margin: 0 0 10px;
}
.st-author-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.st-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.st-review-head {
  display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
  margin-bottom: 10px;
}
.st-review-body {
  font-size: 13px; line-height: 1.65; color: var(--t-base);
  background: var(--bg-muted); border: 1px solid var(--border-soft);
  padding: 14px 16px; max-height: 240px; overflow: auto;
}
.st-author {
  border: 1px solid var(--border-soft); padding: 12px 14px;
  background: var(--bg-muted); font-size: 13px;
}

/* ── Design studio ────────────────────────────────────────── */
.ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ds-tile {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 12px 14px; background: var(--bg-card); cursor: pointer;
  border: 1px solid var(--border-soft); font-family: inherit; width: 100%;
}
.ds-tile:hover { border-color: var(--primary); }
.ds-tile.is-on { border-color: var(--primary); background: var(--primary-soft); }
.ds-tile-swatch { width: 28px; height: 28px; flex-shrink: 0; }
.ds-tile-body { flex: 1; min-width: 0; }
.ds-tile-name { font-size: 13px; font-weight: 600; color: var(--t-base); }

.ds-colour { display: flex; gap: 8px; align-items: center; }
.ds-colour input[type="color"] {
  width: 38px; height: 34px; padding: 2px; border: 1px solid var(--border);
  background: var(--bg-card); cursor: pointer;
}
.ds-colour .input { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 12px; }

.ds-preview-wrap { display: flex; flex-direction: column; align-items: center; }

/* Certificate */
.ds-cert {
  width: 100%; max-width: 460px; aspect-ratio: 1.414 / 1;
  padding: 26px 30px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  position: relative; overflow: hidden;
}
.ds-cert-rule { position: absolute; inset: 0 0 auto 0; height: 6px; }
.ds-cert-seal { margin-bottom: 10px; }
.ds-cert-heading {
  font-family: 'Inter Tight', sans-serif; font-size: 21px; font-weight: 700;
  letter-spacing: -.015em; margin-bottom: 12px; line-height: 1.2;
}
.ds-cert-body { font-size: 12.5px; line-height: 1.65; max-width: 80%; }
.ds-cert-foot {
  position: absolute; left: 30px; right: 30px; bottom: 22px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
}
.ds-cert-sig { text-align: left; }
.ds-cert-sig-rule { width: 130px; height: 1px; margin-bottom: 5px; opacity: .5; }
.ds-cert-sig-name { font-size: 11.5px; font-weight: 600; }
.ds-cert-sig-role { font-size: 10px; opacity: .7; }
.ds-cert-code {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  letter-spacing: .1em; opacity: .6;
}

/* Badge */
.ds-badge-stage { padding: 20px 0; display: grid; place-items: center; }
.ds-badge {
  width: 150px; height: 150px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; padding: 16px;
  text-align: center;
}
.ds-badge-title { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.ds-badge-caption {
  font-size: 12px; color: var(--t-muted); text-align: center; max-width: 280px;
}
.ds-shape-circle { border-radius: 50%; }
.ds-shape-shield { clip-path: polygon(50% 0, 100% 16%, 100% 62%, 50% 100%, 0 62%, 0 16%); }
.ds-shape-hex    { clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); }

/* ── Dashboard fixes ──────────────────────────────────────── */
/* The KPI label was being squeezed to an ellipsis by the pill beside
   it. Let the label take the room and the pill keep its size. */
.kpi-identity { min-width: 0; flex: 1; }
.kpi-label { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
.kpi-pill { flex-shrink: 0; white-space: nowrap; }

/* An attention item was wrapping one word per line: the link had no
   width to grow into, so flex collapsed it to the longest word. */
.todo-item .todo-text { flex: 1; min-width: 0; }
.todo-item .todo-badge { flex-shrink: 0; }

.dash-chart { width: 100%; }
.dash-legend {
  display: flex; gap: 18px; justify-content: center; margin-top: 6px;
  font-size: 11.5px; color: var(--t-muted);
}
.dash-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dash-legend i { width: 9px; height: 9px; display: inline-block; }

/* .todo-item is a three-column grid whose first column is 20px for a
   checkbox. The attention list has no checkbox, so its text was being
   squeezed into that 20px and wrapped one word per line. */
#dash-attention .todo-item { grid-template-columns: 1fr auto; }

/* A select in the card-action slot has to be capped, or it takes the
   whole head and wraps the title a word at a time. */
.card-head .select { width: auto; max-width: 200px; flex-shrink: 0; }
.card-head .card-title-wrap { min-width: 0; }

/* ── Auth: video panel ─────────────────────────────────────── */
.auth-aside--video {
  position: relative;
  overflow: hidden;
  padding: 0;
  display: block;
  background: var(--primary);
}
.auth-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Behind the scrim, and never a tab stop — it is decoration. */
  z-index: 0;
  pointer-events: none;
}
/* A flat wash so the logo bar stays legible over any frame. No
   gradient: a single translucent fill does the same job. */
.auth-video-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(10, 6, 9, .28);
  pointer-events: none;
}
.auth-logobar {
  position: absolute; inset: 0 0 auto 0; z-index: 2;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 28px;
  background: rgba(10, 6, 9, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.auth-logobar img { height: 34px; width: auto; display: block; }
.auth-logobar span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; letter-spacing: .22em;
  color: rgba(255, 255, 255, .92);
}

/* Keep mobile sign-in focused on the form; signin.js also avoids loading video. */
@media (max-width: 900px) {
  .auth-aside--video { display: none; }
  .auth-main { min-height: 100svh; }
  .auth-main-top { flex-wrap: wrap; gap: 8px 16px; }
}

/* ── Profile ──────────────────────────────────────────────── */
.pf-header {
  display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap;
  padding-bottom: 20px;
}
.pf-avatar-wrap {
  position: relative; flex-shrink: 0; padding: 0; border: 0;
  background: 0 0; cursor: pointer; line-height: 0;
}
.pf-avatar {
  width: 96px; height: 96px; display: grid; place-items: center;
  overflow: hidden; background: var(--bg-muted);
  border: 1px solid var(--border-soft);
}
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-avatar--initials {
  background: var(--primary); color: #fff;
  font-size: 30px; font-weight: 600; letter-spacing: -.01em;
  font-family: 'Inter Tight', sans-serif;
}
.pf-avatar-edit {
  position: absolute; right: -6px; bottom: -6px;
  width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--t-muted);
}
.pf-avatar-wrap:hover .pf-avatar-edit { color: var(--primary); border-color: var(--primary); }

.pf-identity { flex: 1; min-width: 220px; }
.pf-name {
  font-size: 24px; font-weight: 700; letter-spacing: -.02em;
  margin: 0 0 2px; color: var(--t-base);
  font-family: 'Inter Tight', sans-serif;
}
.pf-handle {
  margin: 0 0 8px; font-size: 12.5px; color: var(--t-muted);
  font-family: 'JetBrains Mono', monospace;
}
.pf-bio { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--t-muted); max-width: 60ch; }
.pf-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.pf-stats {
  display: flex; align-items: center; gap: 0;
  border-top: 1px solid var(--border-soft); padding-top: 16px;
}
.pf-stat { flex: 1; text-align: center; }
.pf-stat-num {
  display: block; font-size: 21px; font-weight: 700;
  letter-spacing: -.02em; color: var(--t-base);
}
.pf-stat-label {
  display: block; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--t-light);
  font-family: 'JetBrains Mono', monospace; margin-top: 3px;
}
.pf-stat-divider { width: 1px; height: 32px; background: var(--border-soft); }

/* Journey */
.pf-journey-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 10px;
}
.pf-journey-rank { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.pf-journey-pct { font-size: 21px; font-weight: 700; color: var(--t-base); }
.pf-books { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 16px; }
.pf-book {
  width: 28px; height: 28px; display: grid; place-items: center;
  font-size: 11px; font-family: 'JetBrains Mono', monospace;
  border: 1px solid var(--border); color: var(--t-light);
  background: var(--bg-muted); cursor: default;
}
.pf-book--reading  { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.pf-book--finished { border-color: var(--success); background: var(--success); color: #fff; }

/* Badges */
.pf-badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pf-badge {
  width: 44px; height: 44px; display: grid; place-items: center;
  clip-path: polygon(50% 0, 100% 16%, 100% 62%, 50% 100%, 0 62%, 0 16%);
}
.pf-badge-initial { color: #fff; font-weight: 700; font-size: 15px; }

/* Tabs */
.pf-tabs { display: flex; gap: 0; }
.pf-tab {
  padding: 8px 16px; font-size: 12.5px; font-family: inherit;
  background: 0 0; border: 1px solid var(--border-soft); border-right: 0;
  color: var(--t-muted); cursor: pointer;
}
.pf-tab:last-child { border-right: 1px solid var(--border-soft); }
.pf-tab.is-on { color: var(--primary); border-color: var(--primary); }

/* The avatar picker */
.pf-avatar-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}
.pf-avatar-choice {
  padding: 0; border: 2px solid var(--border-soft); background: 0 0;
  cursor: pointer; line-height: 0; overflow: hidden;
}
.pf-avatar-choice svg { width: 100%; height: auto; display: block; }
.pf-avatar-choice:hover { border-color: var(--primary); }
.pf-avatar-choice.is-on { border-color: var(--primary); border-width: 3px; }

@media (max-width: 620px) {
  .pf-header { gap: 14px; }
  .pf-avatar { width: 72px; height: 72px; }
  .pf-stats { flex-wrap: wrap; gap: 12px; }
  .pf-stat-divider { display: none; }
}

/* Shown only when a page was opened by double-clicking the file, where
   every API call resolves against the drive root and fails. */
.disk-warning {
  position: relative; z-index: 10000;
  background: var(--danger); color: #fff;
  padding: 12px 20px; font-size: 13px; line-height: 1.55;
}
.disk-warning a { color: #fff; text-decoration: underline; font-weight: 600; }

/* ── Top bar, told who is signed in ───────────────────────── */
.avatar .avatar-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.dd-profile-role {
  margin-top: 8px; display: inline-block; font-size: 10.5px;
  text-transform: capitalize;
}
.dd-empty { padding: 18px 16px; text-align: center; }
.dd-item.is-unread { background: var(--primary-soft); }

/* ── An unread count in the messages menu ─────────────────────
   The stock item is a two-column grid, so a third child would
   overflow it. A third track at auto width costs nothing on the
   rows that have no badge to put in it. */
.dd-item { grid-template-columns: 36px minmax(0, 1fr) auto; }
.dd-badge {
  min-width: 18px;
  padding: 2px 5px;
  background: var(--primary);
  color: #fff;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
}
/* The last row of the menu is the way out of it, not a message. */
.dd-item--action .dd-text {
  color: var(--primary);
  font-weight: 600;
  font-size: 12.5px;
}
.dd-item--action { justify-content: center; color: var(--primary); }
.icon-btn .count[hidden] { display: none; }

/* ── Approval decisions ───────────────────────────────────── */
.ap-kinds {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.ap-kind {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 14px 16px; background: var(--bg-card); cursor: pointer;
  border: 1px solid var(--border-soft); font-family: inherit; text-align: left;
}
.ap-kind:hover { border-color: var(--primary); }
.ap-kind.is-on { border-color: var(--primary); background: var(--primary-soft); }
.ap-kind.is-empty { opacity: .55; }
.ap-kind-icon { color: var(--t-muted); }
.ap-kind.is-on .ap-kind-icon { color: var(--primary); }
.ap-kind-n {
  font-size: 23px; font-weight: 700; letter-spacing: -.02em; color: var(--t-base);
}
.ap-kind.is-on .ap-kind-n { color: var(--primary); }
.ap-kind-label {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--t-light); font-family: 'JetBrains Mono', monospace;
}

/* ── Role-aware dashboard ─────────────────────────────────────
   A card declares which views it belongs to. Until the view is known
   the role-specific ones stay hidden, so nobody sees a card flash up
   that was never meant for them. */
[data-views] { display: none; }
body[data-view="network"]  [data-views~="network"],
body[data-view="review"]   [data-views~="review"],
body[data-view="clusters"] [data-views~="clusters"],
body[data-view="member"]   [data-views~="member"] { display: block; }
body[data-view="network"]  .kpi-grid[data-views~="network"],
body[data-view="review"]   .kpi-grid[data-views~="review"],
body[data-view="clusters"] .kpi-grid[data-views~="clusters"] { display: grid; }

/* Ring */
.dash-ring { position: relative; display: grid; place-items: center; padding: 6px 0; }
.dash-ring-centre {
  position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center; pointer-events: none;
}
.dash-ring-centre strong {
  display: block; font-size: 25px; font-weight: 700; letter-spacing: -.02em;
  color: var(--t-base);
}
.dash-ring-centre span {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--t-light); font-family: 'JetBrains Mono', monospace;
}
.dash-legend--stack { flex-wrap: wrap; justify-content: center; }
.dash-legend--stack b { color: var(--t-base); margin-left: 3px; }

/* Ranked bars */
.dash-rank { margin-bottom: 14px; }
.dash-rank-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; font-size: 13px; color: var(--t-base); margin-bottom: 4px;
}

/* The decision queue */
.dash-queue {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px;
}
.dash-queue-item {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
  border: 1px solid var(--border-soft); background: var(--bg-card);
  text-decoration: none;
}
.dash-queue-item:hover { border-color: var(--primary); }
.dash-queue-n {
  font-size: 23px; font-weight: 700; letter-spacing: -.02em; color: var(--primary);
}
.dash-queue-label {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--t-light); font-family: 'JetBrains Mono', monospace;
}

/* Coming up */
.dash-event {
  display: flex; gap: 14px; align-items: center; padding: 11px 0;
  border-bottom: 1px solid var(--border-soft); text-decoration: none;
  color: inherit;
}
.dash-event:last-child { border-bottom: 0; }
.dash-event-day {
  flex-shrink: 0; width: 62px; font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; color: var(--primary);
}
.dash-event-body { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }

/* ── Save confirmation ────────────────────────────────────────
   The small card that says the record was written and then goes
   away. Square corners, flat fill, no sweep — same rules as the
   rest of the hub. Sits above the modals so a confirmation
   raised from inside a window is still readable. */
.hv-fb-host {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2400;
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: 0 16px;
}

.hv-fb {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 460px;
  margin-top: 16px;
  padding: 14px 18px;
  background: var(--bg-card);
  color: var(--t-base);
  border: 1px solid var(--border);
  border-left: 3px solid var(--t-muted);
  border-radius: 0;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .18s ease, transform .18s ease;
}

.hv-fb.is-in { opacity: 1; transform: translateY(0); }

.hv-fb-mark {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
}

.hv-fb-mark svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hv-fb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hv-fb-text b     { font-size: 14px; font-weight: 600; line-height: 1.35; }
.hv-fb-text small { font-size: 12px; color: var(--t-muted); line-height: 1.4; }

.hv-fb-ok      { border-left-color: var(--success); }
.hv-fb-ok      .hv-fb-mark { color: var(--success); }
.hv-fb-pending { border-left-color: var(--warning); }
.hv-fb-pending .hv-fb-mark { color: var(--warning); }
.hv-fb-bad     { border-left-color: var(--danger); }
.hv-fb-bad     .hv-fb-mark { color: var(--danger); }
.hv-fb-note    { border-left-color: var(--info); }
.hv-fb-note    .hv-fb-mark { color: var(--info); }

/* On a phone the card spans the screen rather than floating in
   the middle of it, so the words stay large enough to read. */
@media (max-width: 575px) {
  .hv-fb-host { padding: 0 8px; }
  .hv-fb { max-width: none; width: 100%; margin-top: 8px; padding: 12px 14px; }
  .hv-fb-text b { font-size: 13px; }
}

/* ── Chatrooms ────────────────────────────────────────────────
   The stock sheet lays the screen out as a fixed 280px rail
   beside the thread, which leaves a phone with 80px of
   conversation. Below 900px the two become one column and the
   screen shows the rail until a room is picked, then the thread
   with a back button — the pattern every messaging app uses. */
.chat-empty {
  padding: 28px 20px;
  color: var(--t-muted);
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

.chat-conv-new {
  flex: 0 0 auto;
  align-self: center;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg-muted);
  color: var(--t-light);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.chat-conv { cursor: pointer; }
.chat-conv:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* A message still on its way out is dimmed rather than removed,
   so nothing appears to vanish when the network is slow. */
.chat-bub.is-pending { opacity: .55; }

.chat-anon-note {
  padding: 6px 22px 10px;
  color: var(--warning);
  font-size: 11.5px;
  line-height: 1.45;
}

#chat-anon.is-on {
  background: var(--warning-soft);
  color: var(--warning);
  border-color: var(--warning);
}

/* The back button only belongs on the one-column layout. */
.chat-back { display: none; }

@media (max-width: 900px) {
  .chat-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    height: calc(100vh - 190px);
    min-height: 420px;
  }
  /* The stock sheet hides the rail outright below 720px, which
     left a phone on whatever room happened to be open with no
     way back to the list. These two rules take that over: one
     pane at a time, and the back button decides which. */
  .chat-shell .chat-rail { display: flex; border-right: 0; }
  .chat-shell .chat-pane { display: none; }
  .chat-shell.is-pane .chat-rail { display: none; }
  .chat-shell.is-pane .chat-pane { display: flex; }
  .chat-back { display: inline-flex; }
  .chat-pane-head { padding: 12px 14px; gap: 10px; }
  .chat-thread { padding-left: 14px; padding-right: 14px; }
  .chat-composer { padding: 10px 12px; }
}

@media (max-width: 575px) {
  .chat-shell { height: calc(100vh - 160px); border-radius: 0; }
  .chat-pane-head .meta .name { font-size: 13.5px; }
  .chat-pane-head-tools .mail-tool:not(#chat-refresh) { display: none; }
  .chat-bub { max-width: 84vw; }
}

/* ── Account detail window ────────────────────────────────────
   Two columns on a desktop: what the hub recorded on the left,
   what may be changed on the right. One column on a phone, facts
   first, because that is what is being checked most of the time. */
.ud-loading { padding: 32px 8px; color: var(--t-muted); font-size: 13px; text-align: center; }

.ud-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.ud-h {
  margin: 0 0 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--t-light);
}

.ud-facts {
  padding: 14px;
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
  border-radius: 0;
}

.ud-fact {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-soft);
}
.ud-fact:last-of-type { border-bottom: 0; }
.ud-fact span { font-size: 11px; color: var(--t-light); }
.ud-fact b    { font-size: 13px; font-weight: 600; color: var(--t-base); word-break: break-word; }

.ud-locknote {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--danger-soft);
  border-left: 3px solid var(--danger);
  color: var(--t-base);
  font-size: 12px;
  line-height: 1.5;
}

.ud-check {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  font-size: 13px;
  cursor: pointer;
}
.ud-check input { width: 15px; height: 15px; accent-color: var(--primary); }

/* A row that opens a record should look like one. */
tr.is-clickable { cursor: pointer; }
tr.is-clickable:hover { background: var(--bg-hover); }
tr.is-clickable:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

@media (max-width: 760px) {
  .ud-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* ── The forum feed ───────────────────────────────────────────
   A single column that reads the same on a phone and a desk.
   Square corners and flat fills, as everywhere else in the hub. */
.ff-shell {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ff-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0;
}

.ff-h {
  margin: 0;
  font-family: 'Inter Tight', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--t-base);
}

.ff-empty {
  padding: 40px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--t-muted);
  font-size: 13.5px;
  line-height: 1.6;
  text-align: center;
}
.ff-empty-sm { padding: 18px 12px; border: 0; background: none; font-size: 12.5px; }

/* ── Avatar ─────────────────────────────────────────────── */
.ff-avatar {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}
.ff-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ff-avatar.is-anon { background: var(--bg-muted); color: var(--t-light); }
.ff-avatar-sm { width: 32px; height: 32px; font-size: 11px; }

/* ── Composer ───────────────────────────────────────────── */
.ff-composer { padding: 14px 16px; }
.ff-composer-top { display: flex; align-items: center; gap: 12px; }

.ff-composer-open {
  flex: 1;
  min-width: 0;
  padding: 11px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--t-muted);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.ff-composer-open:hover { background: var(--bg-hover); border-color: var(--primary); }

.ff-composer-tools {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}

.ff-tool {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 6px;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--t-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.ff-tool:hover { background: var(--bg-hover); color: var(--primary); }
.ff-tool svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Boards and filters ─────────────────────────────────── */
.ff-boards-card { padding: 14px 16px; }

.ff-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ff-sort { display: flex; align-items: center; gap: 8px; }
.ff-sort-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--t-light);
}
.ff-sort .select { height: 34px; padding: 0 28px 0 10px; font-size: 12.5px; }

.ff-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ff-chip-skel { color: var(--t-light); font-size: 12.5px; }

.ff-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--t-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.ff-chip:hover { border-color: var(--primary); color: var(--primary); }
.ff-chip.is-on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--t-inverse);
}
.ff-chip-n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  opacity: .75;
}

.ff-search {
  position: relative;
  margin-top: 12px;
}
.ff-search svg {
  position: absolute;
  left: 11px; top: 50%;
  width: 15px; height: 15px;
  transform: translateY(-50%);
  fill: none; stroke: var(--t-light); stroke-width: 1.8;
  stroke-linecap: round;
  pointer-events: none;
}
.ff-search input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 34px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--t-base);
  font: inherit;
  font-size: 13px;
}
.ff-search input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}

/* ── A post ─────────────────────────────────────────────── */
.ff-post { margin-bottom: 12px; }

.ff-post-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 10px;
}

.ff-post-who { min-width: 0; flex: 1; }

.ff-post-name {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 700;
  color: var(--t-base);
  letter-spacing: -.01em;
}

.ff-anon, .ff-pin {
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ff-anon { background: var(--info-soft); color: var(--info); border-color: var(--info); }
.ff-pin  { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }

.ff-post-role { font-size: 12px; color: var(--t-muted); margin-top: 1px; }
.ff-post-when { font-size: 11.5px; color: var(--t-light); margin-top: 2px; }
.ff-post-board { color: var(--primary); font-weight: 600; }

.ff-post-body { padding: 0 16px 10px; }

.ff-post-title {
  margin: 0 0 6px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--t-base);
}

.ff-post-text { font-size: 14px; line-height: 1.62; color: var(--t-base); }
.ff-post-text p { margin: 0 0 9px; }
.ff-post-text p:last-child { margin-bottom: 0; }

.ff-post-figure { margin: 0; background: var(--bg-muted); }
.ff-post-figure img { display: block; width: 100%; height: auto; }

.ff-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 0; }
.ff-tag {
  padding: 2px 7px;
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
  border-radius: 0;
  color: var(--t-muted);
  font-size: 11.5px;
  font-weight: 600;
}

.ff-post-counts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 16px 9px;
  font-size: 12px;
  color: var(--t-muted);
}
.ff-react-dot { font-size: 13px; }
.ff-count-right { margin-left: auto; }

.ff-post-actions {
  display: flex;
  gap: 2px;
  padding: 4px 8px;
  border-top: 1px solid var(--border-soft);
}

.ff-act {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 6px;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--t-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ff-act:hover { background: var(--bg-hover); color: var(--t-base); }
.ff-act.is-on { color: var(--primary); }
.ff-act svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.ff-act.is-on svg { fill: var(--primary-soft); }

/* ── Share ──────────────────────────────────────────────── */
.ff-share {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-muted);
}

.ff-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--t-base);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.ff-share-btn:hover { border-color: var(--primary); color: var(--primary); }
.ff-share-btn svg { width: 15px; height: 15px; }
.ff-share-copy svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.ff-share-li:hover { color: #0A66C2; border-color: #0A66C2; }
.ff-share-wa:hover { color: #1FA855; border-color: #1FA855; }

/* ── Comments ───────────────────────────────────────────── */
.ff-comments {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-muted);
}

.ff-comment { display: flex; gap: 10px; padding: 8px 0; }
.ff-comment-body {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
}
.ff-comment-who {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-base);
}
.ff-comment-who span { font-size: 11px; font-weight: 400; color: var(--t-light); }
.ff-comment-text { margin-top: 2px; font-size: 13px; line-height: 1.55; color: var(--t-base); }
.ff-comment-text p { margin: 0 0 6px; }
.ff-comment-text p:last-child { margin-bottom: 0; }

.ff-reply { display: flex; gap: 8px; margin-top: 10px; }
.ff-reply .input { flex: 1; min-width: 0; }

.ff-more-wrap { display: flex; justify-content: center; padding: 6px 0 24px; }

.np-preview { margin: 10px 0 0; background: var(--bg-muted); border: 1px solid var(--border); }
.np-preview img { display: block; width: 100%; max-height: 280px; object-fit: contain; }

/* ── On a phone ─────────────────────────────────────────── */
@media (max-width: 575px) {
  .ff-shell { gap: 8px; }
  .ff-card, .ff-empty { border-left: 0; border-right: 0; }
  .ff-post-head { padding: 12px 14px 8px; gap: 10px; }
  .ff-avatar { width: 40px; height: 40px; }
  .ff-post-body { padding: 0 14px 10px; }
  .ff-post-title { font-size: 15.5px; }
  .ff-post-text { font-size: 13.5px; }
  .ff-tags, .ff-post-counts { padding-left: 14px; padding-right: 14px; }
  .ff-act span { font-size: 12px; }
  .ff-row-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .ff-sort { justify-content: space-between; }
  .ff-share-btn { flex: 1; justify-content: center; }
  .ff-comments { padding: 10px 14px 12px; }
  .ff-reply { flex-direction: column; }
}

/* ── The video feed ───────────────────────────────────────────
   One video at a time, snapping as you scroll. Designed at phone
   width first; on a desk the frame is held to a phone's shape in
   the middle of the screen rather than stretched, because a
   vertical video stretched wide is worse, not better. */
.vf-content {
  padding: 0;
  max-width: none;
}

.vf-stage {
  position: relative;
  display: flex;
  justify-content: center;
}

.vf-feed {
  width: 100%;
  max-width: 480px;
  height: calc(100vh - 92px);
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  background: #000;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.vf-feed::-webkit-scrollbar { display: none; }

.vf-loading {
  padding: 60px 24px;
  color: #cfcfd8;
  font-size: 13.5px;
  line-height: 1.6;
  text-align: center;
}

.vf-cell {
  position: relative;
  height: calc(100vh - 92px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.vf-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.vf-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

/* The play mark shows only while the video is stopped. */
.vf-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px; height: 72px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .34);
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
}
.vf-play svg { width: 34px; height: 34px; fill: currentColor; stroke: none; }
.vf-cell.is-playing .vf-play { display: none; }

/* ── What the video is about ────────────────────────────── */
.vf-info {
  position: absolute;
  left: 0; right: 76px; bottom: 0;
  padding: 18px 16px 20px;
  color: #fff;
  background: rgba(0, 0, 0, .42);
  pointer-events: none;
}

.vf-title {
  margin: 0 0 5px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.012em;
}

.vf-desc {
  margin: 0 0 7px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
}

.vf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.vf-tag {
  padding: 2px 7px;
  background: rgba(255, 255, 255, .16);
  border-radius: 0;
  font-size: 11.5px;
  font-weight: 600;
}

.vf-views {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, .72);
}

/* ── The actions, down the right ────────────────────────── */
.vf-actions {
  position: absolute;
  right: 10px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.vf-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: none;
  border: 0;
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.vf-act-icon {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .38);
  border-radius: 50%;
}
.vf-act-icon svg {
  width: 23px; height: 23px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

.vf-act-n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.vf-act.is-on { color: var(--primary-light); }
.vf-act.is-on .vf-act-icon svg { fill: currentColor; stroke: currentColor; }

/* ── Up and down ────────────────────────────────────────── */
.vf-nav {
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vf-nav-btn {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--t-base);
  cursor: pointer;
}
.vf-nav-btn:hover { border-color: var(--primary); color: var(--primary); }
.vf-nav-btn svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Upload, at the head of the action rail ──────────────────
   It used to be a free-standing button pinned to the corner, and
   on a phone — where the rail climbs further up the screen — it
   sat on top of Share. It is a rail item now, first in the
   column, above Like: flexbox keeps it clear of the rest at every
   width, and there is nothing left to collide with. */
.vf-upload-fab { display: none; }
body.can-upload .vf-upload-fab { display: flex; }

/* Solid brand fill, so the one thing that writes rather than
   reads is not just another translucent circle. */
.vf-upload-fab .vf-act-icon {
  background: var(--primary);
  border-radius: 3px;
}
.vf-upload-fab:hover .vf-act-icon { background: var(--primary-dark); }
.vf-upload-fab svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
}

/* ── The bar a guest gets instead of the sidebar ─────────── */
.vf-guestbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}

.vf-guest-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--t-base);
  font-family: 'Inter Tight', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
}
.vf-guest-brand img { height: 26px; width: auto; }
.vf-guest-brand b { color: var(--primary); }

.vf-guest-actions { display: flex; gap: 8px; }

/* With no shell, the page is the feed. */
body.is-guest .shell { display: block; }
body.is-guest .main { margin: 0; width: 100%; }
body.is-guest .vf-feed,
body.is-guest .vf-cell { height: calc(100vh - 52px); }

/* ── "Sign in to carry on" ──────────────────────────────── */
.vf-gate {
  position: fixed;
  inset: 0;
  z-index: 2300;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: rgba(10, 10, 14, .74);
}

.vf-gate-card {
  width: 100%;
  max-width: 400px;
  padding: 28px 24px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0;
  text-align: center;
}

.vf-gate-title {
  margin: 0 0 8px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--t-base);
}

.vf-gate-text {
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--t-muted);
}

.vf-gate-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vf-gate-actions .btn { width: 100%; justify-content: center; }

.vf-gate-back {
  margin-top: 14px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--t-light);
  font: inherit;
  font-size: 12.5px;
  text-decoration: underline;
  cursor: pointer;
}
.vf-gate-back:hover { color: var(--primary); }

body.vf-gated { overflow: hidden; }

/* ── On a phone ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .vf-nav { display: none; }       /* scrolling is the gesture here */
  .vf-feed { max-width: none; }
}

@media (max-width: 575px) {
  .vf-feed, .vf-cell { height: calc(100vh - 56px); }
  body.is-guest .vf-feed,
  body.is-guest .vf-cell { height: calc(100vh - 50px); }
  .vf-info { right: 68px; padding: 14px 14px 16px; }
  .vf-title { font-size: 15px; }
  .vf-act-icon { width: 42px; height: 42px; }
  .vf-guestbar { padding: 9px 12px; }
  .vf-guest-brand span { font-size: 13px; }
  .vf-guest-actions .btn { padding: 7px 12px; font-size: 12.5px; }
}

/* ── Reading assignments ──────────────────────────────────── */
.as-list { display: flex; flex-direction: column; gap: 10px; }

.as-item {
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 0;
}

.as-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.as-item-title {
  margin: 0;
  font-family: 'Inter Tight', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--t-base);
}

.as-item-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--t-muted); }

.as-item-note {
  margin: 9px 0 0;
  padding: 9px 11px;
  background: var(--bg-muted);
  border-left: 2px solid var(--border);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--t-base);
}

/* How far through the pages she is. */
.as-progress {
  height: 5px;
  margin: 11px 0 9px;
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
  border-radius: 0;
  overflow: hidden;
}
.as-progress span {
  display: block;
  height: 100%;
  background: var(--primary);
}

.as-item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.as-meta { font-size: 11.5px; color: var(--t-light); }
.as-report { padding: 6px 12px; font-size: 12.5px; }

/* ── The roadmap ─────────────────────────────────────────── */
.as-roadmap-desc {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--t-muted);
}

.as-steps { margin: 0; padding: 0; list-style: none; }

.as-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.as-step:last-child { border-bottom: 0; }

.as-step-n {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--primary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
}

.as-step-body { font-size: 13.5px; color: var(--t-base); line-height: 1.5; }
.as-step-body span { color: var(--t-muted); font-size: 12.5px; }
.as-step-due { display: block; color: var(--warning) !important; font-size: 11.5px !important; }

@media (max-width: 575px) {
  .as-item { padding: 12px 13px; }
  .as-item-top { flex-direction: column; gap: 6px; }
  .as-item-foot { flex-direction: column; align-items: stretch; gap: 8px; }
  .as-report { width: 100%; }
}

/* ── Comments on a video ──────────────────────────────────────
   The sheet that slides up over the video, the way a phone does
   it. On a desk it is held to the width of the feed rather than
   spanning the screen, so the conversation stays beside the
   picture it belongs to. */
.vc-scrim {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(0, 0, 0, .4);
}

.vc-panel {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 2200;
  width: 100%;
  max-width: 480px;
  height: min(68vh, 560px);
  display: flex;
  flex-direction: column;
  transform: translate(-50%, 100%);
  transition: transform .22s cubic-bezier(.2, .7, .2, 1);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 0;
}
.vc-panel.is-up { transform: translate(-50%, 0); }

.vc-head {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 48px 12px;
  border-bottom: 1px solid var(--border-soft);
}

/* The handle a thumb expects to see at the top of a sheet. */
.vc-grab {
  position: absolute;
  top: 7px; left: 50%;
  width: 36px; height: 4px;
  transform: translateX(-50%);
  background: var(--border);
}

.vc-title {
  margin: 0;
  font-family: 'Inter Tight', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--t-base);
}

.vc-close {
  position: absolute;
  right: 10px; top: 50%;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--t-muted);
  cursor: pointer;
}
.vc-close svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}

.vc-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 14px 10px;
  overscroll-behavior: contain;
}

.vc-empty {
  padding: 36px 16px;
  color: var(--t-muted);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.vc-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
}
/* A reply is indented under the comment it answers. */
.vc-item.is-reply { padding-left: 38px; }

.vc-avatar {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--primary-soft);
  border-radius: 50%;
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
}
.vc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vc-avatar.is-anon { background: var(--bg-muted); color: var(--t-light); }
.vc-item.is-reply .vc-avatar { width: 27px; height: 27px; font-size: 10px; }

.vc-body { flex: 1; min-width: 0; }

.vc-who {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-base);
}
.vc-when { font-weight: 400; color: var(--t-light); font-size: 11px; }

.vc-anon {
  padding: 1px 5px;
  background: var(--info-soft);
  border: 1px solid var(--info);
  border-radius: 0;
  color: var(--info);
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.vc-text {
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-base);
  overflow-wrap: anywhere;
}

.vc-tools { display: flex; gap: 14px; margin-top: 4px; }
.vc-tools button {
  padding: 0;
  background: none;
  border: 0;
  color: var(--t-light);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.vc-tools button:hover { color: var(--primary); }

.vc-like {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 2px 0 0;
  background: none;
  border: 0;
  color: var(--t-light);
  font: inherit;
  cursor: pointer;
}
.vc-like svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.vc-like span { font-family: 'JetBrains Mono', monospace; font-size: 10px; }
.vc-like.is-on { color: var(--primary); }
.vc-like.is-on svg { fill: currentColor; }

/* ── Writing one ────────────────────────────────────────── */
.vc-compose {
  flex: 0 0 auto;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-soft);
  background: var(--bg-card);
}

.vc-replying {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 5px 9px;
  background: var(--bg-muted);
  border-left: 2px solid var(--primary);
  font-size: 11.5px;
  color: var(--t-muted);
}
.vc-replying b { color: var(--t-base); }
.vc-replying button {
  margin-left: auto;
  padding: 0 4px;
  background: none;
  border: 0;
  color: var(--t-light);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.vc-compose-row { display: flex; align-items: center; gap: 9px; }

.vc-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--t-base);
  font: inherit;
  font-size: 13.5px;
}
.vc-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}
.vc-input:disabled { background: var(--bg-muted); color: var(--t-light); }

.vc-send {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  background: var(--primary);
  border: 0;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
}
.vc-send:disabled { background: var(--bg-muted); color: var(--t-light); cursor: default; }
.vc-send svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 575px) {
  .vc-panel { max-width: none; height: min(74vh, 620px); border-left: 0; border-right: 0; }
  .vc-list { padding: 4px 12px 8px; }
  .vc-compose { padding-left: 12px; padding-right: 12px; }
}

/* ════════════════════════════════════════════════════════════
   FACILITATOR DIRECTORY (facilitators.html)

   The register under Users answers "who is on the books". This
   answers the question a coordinator actually asks — "who knows
   succession law, and where is she already working" — so the unit
   is a card with a face, not a table row. Flat fills, square
   corners, and the thematic areas double as the filter.
   ════════════════════════════════════════════════════════════ */

.fd-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.fd-search {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: 38px;
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.fd-search svg { width: 15px; height: 15px; color: var(--t-light); flex-shrink: 0; }
.fd-search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: none;
  color: var(--t-base);
  font: inherit;
  font-size: 13px;
  min-width: 0;
}

/* The areas are drawn from the data, so the row is as long as the
   programme is wide. It wraps rather than scrolls — a coordinator
   scanning for an area should see all of them at once. */
.fd-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.fd-theme {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--t-muted);
  background: var(--bg-muted);
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
}
.fd-theme span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--t-light);
}
.fd-theme:hover { border-color: var(--border); color: var(--t-base); }
.fd-theme.is-on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--t-inverse);
}
.fd-theme.is-on span { color: var(--t-inverse); opacity: .75; }

/* Two to a row, as the reference lays them out. */
.fd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
  gap: 16px;
}

.fd-empty {
  grid-column: 1 / -1;
  padding: 34px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--t-muted);
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
}

@media (max-width: 575px) {
  .fd-grid { grid-template-columns: 1fr; }
  .fd-tools .btn { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════
   CHATROOMS, SECOND PASS (qutees-chat.html)

   The screen used to be one flat list of rooms with a bubble
   thread. Two things were wrong with that. A member had no way to
   write to one person — every room belonged to a cluster or a
   circle — and a flat list gave no sense of what any room was.

   So the rail now carries two named sections, direct messages
   above channels, and the thread is laid out the way a desk chat
   tool lays one out: a gutter of faces, the name said once per
   block, and the text left-aligned at a single measure, rather
   than two columns of bubbles that make a long message hard to
   read and a quick exchange hard to follow.
   ════════════════════════════════════════════════════════════ */

.chat-shell {
  gap: 0;
  grid-template-columns: 272px minmax(0, 1fr);
  border-radius: 4px;
}
.chat-rail {
  background: var(--bg-muted);
  border-right: 1px solid var(--border);
  min-width: 0;
}
.chat-rail-head { padding: 12px; gap: 0; }

.chat-rail .chat-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
}
.chat-rail .chat-search svg {
  width: 14px; height: 14px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  color: var(--t-light);
}
.chat-rail .chat-search input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: none;
  font: inherit; font-size: 12.5px;
  color: var(--t-base);
}

.chat-list-scroll { padding: 0 0 14px; }

/* ── A section of the rail ─────────────────────────────────── */

.chat-group { padding-top: 6px; }

.chat-group-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px 4px 8px;
}
.chat-group-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 4px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t-light);
  text-align: left;
}
.chat-group-toggle:hover { color: var(--t-base); }
.chat-caret {
  width: 12px; height: 12px; flex-shrink: 0;
  transition: transform .14s ease;
}
.chat-group-toggle[aria-expanded="false"] .chat-caret { transform: rotate(-90deg); }
.chat-group-count { margin-left: 6px; color: var(--t-light); opacity: .8; }

/* The + beside Channels is hidden for anyone the server would
   refuse anyway: the list endpoint's can_create decides it, not
   the role in the token, so the button and the rule cannot drift. */
.chat-group-add {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--t-light);
  cursor: pointer;
}
.chat-group-add svg { width: 13px; height: 13px; }
.chat-group-add:hover { background: var(--bg-hover); color: var(--t-base); }
.chat-group-add[hidden] { display: none; }

.chat-group.is-folded .chat-group-body { display: none; }

/* ── One conversation in the rail ──────────────────────────── */

.chat-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  padding: 5px 12px 5px 10px;
  cursor: pointer;
  border-left: 2px solid transparent;
}
.chat-item:hover { background: var(--bg-hover); }
.chat-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.chat-item.is-active {
  background: var(--primary);
  border-left-color: var(--primary-dark);
}
.chat-item.is-active .chat-item-name,
.chat-item.is-active .chat-item-when,
.chat-item.is-active .chat-item-preview,
.chat-item.is-active .chat-hash { color: var(--t-inverse); }
.chat-item.is-active .chat-item-preview { opacity: .78; }

.chat-item-name {
  min-width: 0;
  font-size: 13px;
  color: var(--t-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-item.is-unread .chat-item-name { font-weight: 600; }

.chat-item-when {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: var(--t-light);
  white-space: nowrap;
}
.chat-item-badge {
  padding: 1px 5px;
  background: var(--danger);
  color: #fff;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
}
/* The preview sits under the name, spanning the two text columns,
   so a long last message never pushes the timestamp off. */
.chat-item-preview {
  grid-column: 2 / 4;
  min-width: 0;
  font-size: 11.5px;
  color: var(--t-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-hash {
  display: grid;
  place-items: center;
  width: 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--t-light);
}
.chat-hash svg { width: 12px; height: 12px; }

.chat-presence {
  width: 9px; height: 9px;
  justify-self: center;
  border-radius: 50%;
  border: 1.5px solid var(--t-light);
  background: transparent;
}
.chat-presence.is-on { background: var(--success); border-color: var(--success); }

.chat-empty--rail {
  padding: 10px 14px 14px;
  text-align: left;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--t-light);
}

/* ── The thread's header ───────────────────────────────────── */

.chat-pane-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-soft);
}
.chat-head-id { flex: 1; min-width: 0; }
.chat-head-name {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-family: 'Inter Tight', Inter, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--t-base);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-head-hash { color: var(--t-light); font-weight: 500; }
.chat-head-sub {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--t-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-tool-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  margin-left: 3px;
}
#chat-members {
  width: auto;
  padding: 0 7px;
  gap: 2px;
  display: inline-flex;
  align-items: center;
}

/* ── The thread ────────────────────────────────────────────── */

.chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: 10px 20px 16px;
  display: block;
  /* The stock sheet tints the thread with --bg-muted, which in this
     theme is pink: fine behind bubbles, wrong behind flat lines.
     The rail keeps the tint, because that is what separates it. */
  background: var(--bg-card);
}
.chat-composer { background: var(--bg-card); }

.chat-day-sep {
  position: relative;
  margin: 16px 0 10px;
  text-align: center;
  border-top: 1px solid var(--border-soft);
  display: block;
}
.chat-day-sep span {
  position: relative;
  top: -8px;
  padding: 0 10px;
  background: var(--bg-card);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-light);
}

.chat-line {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  padding: 5px 6px 5px 0;
  margin-top: 6px;
  border-radius: 3px;
}
.chat-line.is-joined { margin-top: 0; padding-top: 1px; padding-bottom: 1px; }
.chat-line:hover { background: var(--bg-hover); }
/* A message still on its way out is dimmed rather than removed,
   so nothing appears to vanish when the network is slow. */
.chat-line.is-pending { opacity: .55; }

.chat-line-gutter { display: flex; justify-content: flex-start; }
.chat-face {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 3px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}
/* The clock takes the avatar's place on a continued line, and only
   when the pointer is over it — otherwise the gutter is a column of
   timestamps nobody asked for. */
.chat-line-clock {
  width: 34px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  line-height: 1.7;
  color: var(--t-light);
  opacity: 0;
  text-align: right;
  padding-right: 4px;
}
.chat-line:hover .chat-line-clock { opacity: 1; }

.chat-line-body { min-width: 0; }
.chat-line-head {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 1px;
  flex-wrap: wrap;
}
.chat-line-who {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--t-base);
}
.chat-line-who.is-me { color: var(--primary); }
.chat-line-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: var(--t-light);
}
.chat-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-base);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* ── The composer ──────────────────────────────────────────── */

/* White, bordered — the stock fill is --bg-muted, which in this
   theme is pink and reads as a disabled field. */
.chat-composer-input { border-radius: 3px; background: var(--bg-card); }
.chat-composer-send { border-radius: 3px; }
#chat-anon[hidden] { display: none; }

/* ── Picking somebody to write to ──────────────────────────── */

.dm-people {
  margin-top: 12px;
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.dm-person {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  background: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.dm-person:last-child { border-bottom: 0; }
.dm-person:hover { background: var(--bg-hover); }
.dm-person-body { min-width: 0; }
.dm-person-name {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--t-base);
}
.dm-person-meta {
  display: block;
  font-size: 11px;
  color: var(--t-muted);
  text-transform: capitalize;
}

@media (max-width: 900px) {
  .chat-shell { grid-template-columns: minmax(0, 1fr); }
  .chat-rail { border-right: 0; }
  .chat-thread { padding-left: 12px; padding-right: 12px; }
  .chat-line { grid-template-columns: 38px minmax(0, 1fr); }
  .chat-face { width: 30px; height: 30px; font-size: 11px; }
}

@media (max-width: 575px) {
  .chat-pane-head { padding: 10px 12px; }
  .chat-pane-head-tools #chat-members { display: none; }
}

/* ── Facilitator card, second pass ────────────────────────────
   Replaced with the two-column shape asked for: the picture on the
   left at full bleed, the name, what she is and a line about her on
   the right. Where the reference put social icons this puts her
   thematic areas, because that is the data the hub actually holds
   and dead links are worse than none. Two cards to a row on a
   desktop, one on a phone. */

.fd-card {
  display: grid;
  grid-template-columns: 40% minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-radius: 4px;
}
.fd-card.is-off { opacity: .66; }

.fd-card-media { min-width: 0; }
.fd-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 184px;
  object-fit: cover;
}
/* No photograph: her initials on a flat block, same footprint. */
.fd-img--none {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: .04em;
}

.fd-card-body {
  min-width: 0;
  padding: 20px 20px 20px 22px;
  display: flex;
  flex-direction: column;
}

.fd-name {
  margin: 0 0 3px;
  font-family: 'Inter Tight', Inter, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--t-base);
  line-height: 1.2;
}
.fd-role {
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--t-muted);
}
.fd-off { color: var(--danger); }

.fd-bio {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--t-base);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fd-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 16px;
  padding-top: 0;
}
.fd-area {
  padding: 3px 8px;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--primary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
}
.fd-area:hover { background: var(--primary); border-color: var(--primary); color: var(--t-inverse); }

@media (max-width: 767px) {
  .fd-card { grid-template-columns: minmax(0, 1fr); }
  .fd-img { min-height: 0; height: 190px; }
  .fd-card-body { padding: 16px; }
}

/* ── A typed list of things ───────────────────────────────────
   Thematic areas on a facilitator, hashtags on a video. Shared,
   because neither list may be hard-coded. */

.chip-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 5px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: text;
}
.chip-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.chip-input-set { display: contents; }
.chip-input input {
  flex: 1;
  min-width: 120px;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--t-base);
  padding: 3px 2px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 8px;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
}
.chip-x {
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
  opacity: .7;
}
.chip-x:hover { opacity: 1; }

.field-hint {
  margin-top: 5px;
  font-size: 11px;
  color: var(--t-light);
}

/* ── Row actions in a register table ──────────────────────── */

.row-acts { display: inline-flex; gap: 6px; justify-content: flex-end; }
.btn--xs {
  padding: 3px 9px;
  font-size: 11.5px;
  border-radius: 3px;
}
.btn--ghost.is-danger { color: var(--danger); }
.btn--ghost.is-danger:hover { background: var(--danger-soft); border-color: var(--danger); }

/* ── Hashtags that do something ───────────────────────────────
   They were spans. They are the only index the feed has, so they
   are buttons now: tapping one narrows the feed to it, and a bar
   at the top says so and offers the way back. */

.vf-tag {
  border: 0;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  line-height: 1.5;
}
.vf-tag:hover { background: rgba(255, 255, 255, .34); }

/* .vf-info is pointer-events:none so the picture underneath stays
   tappable; the chips have to opt back in. */
.vf-tags { pointer-events: auto; }

.vf-tagbar {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 12px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 12.5px;
  border-radius: 3px;
}
.vf-tagbar[hidden] { display: none; }
.vf-tagbar b { font-weight: 600; }
.vf-tagbar button {
  border: 0;
  padding: 3px 9px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font: inherit;
  font-size: 11.5px;
  border-radius: 3px;
  cursor: pointer;
}
.vf-tagbar button:hover { background: rgba(255, 255, 255, .34); }

/* ── Her own draft, in her own feed ───────────────────────────
   A video waiting on review is not in the feed anybody else sees.
   Showing it to her, clearly marked, is what makes the "saved for
   approval" confirmation point at something real. */

.vf-draft {
  position: absolute;
  top: 12px; left: 12px; right: 12px;
  z-index: 3;
  padding: 8px 11px;
  background: var(--warning);
  color: #1b1200;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  border-radius: 3px;
}
.vf-draft.is-bad { background: var(--danger); color: #fff; }

/* ── The upload window's plain statement of what happens ────── */

.uv-fate {
  grid-column: span 2;
  margin: 0;
  padding: 10px 12px;
  background: var(--bg-muted);
  border-left: 3px solid var(--primary);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--t-muted);
}

@media (max-width: 575px) {
  .vf-tagbar { top: 8px; left: 8px; font-size: 11.5px; }
  .vf-draft { top: 8px; left: 8px; right: 8px; font-size: 11.5px; }
}

/* ════════════════════════════════════════════════════════════
   ANALYTICS (video-analytics.html, forum-analytics.html)

   Chart colours are tokens rather than literals so dark mode is a
   chosen set of steps, not an automatic flip of the light ones.
   Both sets were run through the palette validator against their
   own surface: lightness band, chroma floor, colour-vision
   separation and contrast all pass, worst adjacent pair ΔE 13.6
   (light) and 14.8 (dark) under deuteranopia.

   Every chart here also carries its figures in text — a value on
   each bar, a number in each heat cell, a table under each line —
   so nothing has to be read by colour alone.
   ════════════════════════════════════════════════════════════ */

:root[data-theme="light"] {
  --c1: #D1156C;   /* brand pink   */
  --c2: #3B82F6;   /* blue         */
  --c3: #B45309;   /* amber, dark enough to hold 3:1 on white */
  --c4: #0E9488;   /* teal         */
}
:root[data-theme="dark"] {
  --c1: #E8357A;
  --c2: #4B8EF0;
  --c3: #C2740A;
  --c4: #13A396;
}

/* ── The window the figures cover ─────────────────────────── */

.an-range {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.an-range button {
  padding: 6px 13px;
  font: inherit;
  font-size: 12.5px;
  color: var(--t-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
}
.an-range button:hover { color: var(--t-base); border-color: var(--t-light); }
.an-range button.is-on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--t-inverse);
}

/* ── Headline figures ─────────────────────────────────────── */

.an-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.an-tile {
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--c1);
  border-radius: 4px;
}
/* Something needing a person's attention is marked by more than
   colour: it says so on the line underneath. */
.an-tile.is-alert { border-left-color: var(--warning); }
.an-tile-n {
  font-family: 'Inter Tight', Inter, sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--t-base);
}
.an-tile-l { margin-top: 4px; font-size: 12.5px; color: var(--t-base); }
.an-tile-s { margin-top: 2px; font-size: 11px; color: var(--t-light); }

/* ── Ranked bars ──────────────────────────────────────────── */

.an-bars { display: flex; flex-direction: column; gap: 7px; }
.an-bar-row {
  display: grid;
  grid-template-columns: minmax(96px, 30%) minmax(0, 1fr) 46px;
  align-items: center;
  gap: 10px;
}
.an-bar-label {
  font-size: 12.5px;
  color: var(--t-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.an-bar-track {
  height: 14px;
  background: var(--bg-muted);
  border-radius: 2px;
  overflow: hidden;
}
.an-bar-fill {
  display: block;
  height: 100%;
  background: var(--c1);
  /* Square at the baseline, softened at the data end only. */
  border-radius: 0 2px 2px 0;
}
.an-bar-value {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--t-muted);
}

/* ── Line chart ───────────────────────────────────────────── */

.an-chart { width: 100%; height: 220px; display: block; overflow: visible; }
.an-grid { stroke: var(--border-soft); stroke-width: 1; }
.an-axis {
  fill: var(--t-light);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
}
.an-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* A ring in the surface colour so overlapping end points stay
   separable where two series land on the same value. */
.an-dot { stroke: var(--bg-card); stroke-width: 2; }

.an-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--t-muted);
}
.an-key-item { display: inline-flex; align-items: center; gap: 6px; }
.an-key-item i {
  width: 10px; height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Age bracket against theme ────────────────────────────── */

.an-heat {
  display: grid;
  gap: 2px;
  margin-top: 4px;
  overflow-x: auto;
}
.an-heat-corner { }
.an-heat-col,
.an-heat-row {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: var(--t-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.an-heat-col { justify-content: center; padding-bottom: 4px; text-align: center; }
.an-heat-row { padding-right: 8px; }
.an-heat-cell {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 4px;
  border-radius: 2px;
  background: var(--bg-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--t-base);
}
/* Once the fill is dark enough, the figure flips rather than
   fading into it. */
.an-heat-cell.is-deep { color: #fff; }
.an-heat-cell.is-zero { color: var(--t-light); }

/* ── Tables and notes ─────────────────────────────────────── */

.an-table-wrap { margin-top: 14px; overflow-x: auto; }

.an-details { margin-top: 14px; }
.an-details summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--t-muted);
  padding: 6px 0;
}
.an-details summary:hover { color: var(--t-base); }
.an-details .an-table-wrap { max-height: 320px; overflow-y: auto; margin-top: 6px; }
.an-caption {
  text-align: left;
  padding-bottom: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-light);
}
.an-table td, .an-table th { font-size: 12.5px; }
.an-sub { color: var(--t-muted); font-size: 11.5px; }

.an-note {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--t-muted);
}
.an-none {
  margin: 0;
  padding: 22px 14px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--t-muted);
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
  border-radius: 3px;
}

.col-6 { grid-column: span 6; }

@media (max-width: 900px) {
  .col-6 { grid-column: span 12; }
}
@media (max-width: 575px) {
  .an-bar-row { grid-template-columns: minmax(74px, 38%) minmax(0, 1fr) 40px; gap: 8px; }
  .an-tile-n { font-size: 22px; }
  .an-chart { height: 180px; }
}

/* === SHARED HUB UI === */
/* Shared presentation for every hub screen. Built into style.css by build-theme.cjs.
   Page-specific layouts stay in their own stylesheets; these tokens and controls
   are the common contract for the dashboard, learning, admin, and public pages. */
:root,:root[data-theme=light]{
  --font-ui:"Century Gothic",CenturyGothic,AppleGothic,"Segoe UI",sans-serif;
  --bg-body:#f5f5f7;--bg-card:#fff;--bg-sidebar:#fff;
  --bg-muted:#f0f0f3;--bg-hover:#f8f8fa;
  --t-base:#1d1d1f;--t-muted:#68686e;--t-light:#76767c;--t-inverse:#fff;
  --border:#e5e5ea;--border-soft:#ededf0;--overlay:rgba(245,245,247,.88);
  --radius-card:20px;--radius-control:12px;--radius-dialog:24px;
  --shadow-card:0 2px 8px #00000004;--shadow-sm:0 1px 4px #00000005;
  --shadow-lg:0 16px 48px #00000012;
}
:root[data-theme=dark]{
  --bg-body:#111113;--bg-card:#1c1c1e;--bg-sidebar:#1c1c1e;
  --bg-muted:#262629;--bg-hover:#2c2c2e;
  --t-base:#f5f5f7;--t-muted:#aaaab0;--t-light:#98989f;--t-inverse:#111113;
  --border:#38383a;--border-soft:#2c2c2e;--overlay:rgba(17,17,19,.88);
  --shadow-card:0 2px 8px #00000016;--shadow-lg:0 16px 48px #0005;
  color-scheme:dark;
}
body{font-family:var(--font-ui);letter-spacing:-.015em}
body :where(button,input,select,textarea,h1,h2,h3,h4,h5,h6,p,a,span,label,th,td,div,strong,small,time,summary,li){font-family:var(--font-ui)!important}
.d-sidebar .nav-link>svg,.d-sidebar .nav-submenu a>svg,.d-sidebar [data-nav-toggle]>svg:not(.nav-chevron),.d-topbar .icon-btn>svg,.hub-sidebar-toggle svg,.hub-nav-search svg,.report-icon svg{color:var(--primary,#d20b6a)}
.hub-profile-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;flex-shrink:0}.hub-profile-link svg{width:20px;height:20px}
button,input,select,textarea{font-family:inherit}
h1,h2,h3,h4,.hero-title,.card-title,.brand-name,.section-h,.kpi-value,.pf-name,.auth-card h2,.chat-rail-title,.cal-month{font-family:var(--font-ui)}
.eyebrow,.nav-label,.hub-intro-eyebrow{font-family:var(--font-ui);font-size:10px;font-weight:600;letter-spacing:.12em}
.shell{min-height:100dvh}
.main{min-width:0;min-height:100dvh}
.main>.content{width:100%;max-width:1600px;margin-inline:auto;padding:32px clamp(16px,3vw,40px) 40px}
.d-footer{margin-top:auto;gap:16px;flex-wrap:wrap}
.hero{gap:20px;align-items:center}
.hero-text,.card-title-wrap{min-width:0}
.hero-sub{margin:10px 0 0;line-height:1.65}
.hero-actions,.form-actions{flex-wrap:wrap}
.card,.panel,.kpi-card,.module-card,.chat-shell,.mail-shell,.cal-shell,.compose-shell,.ff-board,.vf-card{border-radius:var(--radius-card)!important;box-shadow:var(--shadow-card);border-color:var(--border)}
.ff-card,.ff-empty,.fd-card,.an-tile,.vf-gate-card{border-radius:var(--radius-card);box-shadow:var(--shadow-card);border-color:var(--border)}
.fd-card{overflow:hidden}
.qp-badge,.ap-kind,.ds-tile,.ud-facts,.dm-people,.as-item{border-radius:14px}
.ff-tool,.ff-chip,.ff-composer-open,.ff-search input,.ff-act,.ff-share-btn,.fd-search,.fd-theme,.pf-tab,.an-range button,.vc-input,.vc-send{border-radius:12px}
.ff-h,.fd-name,.an-tile-n{font-family:var(--font-ui)}
.ff-shell{gap:16px}
.fd-search{min-height:46px}
.chat-rail .chat-search{border-radius:12px}
.card-head{align-items:center;flex-wrap:wrap;gap:12px}
.card-head>:last-child{max-width:100%}
.card-title{letter-spacing:-.02em;line-height:1.35}
.card-action{min-height:36px;display:inline-flex;align-items:center;gap:6px}
.btn,.input,.select,.textarea,.form-control,.form-select,.search-input,.cmd{border-radius:var(--radius-control)!important}
.btn{min-height:44px;line-height:1.35;padding:10px 16px;white-space:normal;justify-content:center;box-shadow:none}
.btn:disabled,button:disabled{opacity:.45;cursor:not-allowed}
.btn--sm{min-height:36px;padding:7px 12px}
.btn--icon{width:44px;min-width:44px;min-height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:12px}
.input,.select,.textarea,.form-control,.form-select,.search-input{min-height:44px;min-width:0;max-width:100%;font:inherit;color:var(--t-base);background-color:var(--bg-card)}
.input::placeholder,.textarea::placeholder{color:var(--t-light);opacity:1}
.field,.input-icon,.input-group{min-width:0}
.field-label{font-weight:600;line-height:1.45}
.field-help,.uf-note{font-size:12px;line-height:1.6}
.input-group .addon{border-radius:var(--radius-control) 0 0 var(--radius-control)}
.input-group .input{border-radius:0 var(--radius-control) var(--radius-control) 0!important}
.pw-reveal{width:44px;height:44px;right:0;display:grid;place-items:center;border-radius:12px}
.pw-reveal svg{width:20px;height:20px}
.input-icon:has(.pw-reveal) .input{padding-right:48px}
.icon-btn,.hamburger,.modal-close,.mail-tool,.cal-nav-btn{min-width:44px;min-height:44px;width:44px;height:44px;border-radius:var(--radius-control)}
.cmd{min-height:44px}
.d-topbar{gap:8px;min-width:0;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
.topbar-actions{flex-shrink:0;gap:4px}
.topbar-actions .avatar{width:40px;height:40px;min-width:40px;min-height:40px}
.crumbs{min-width:0}
.crumbs .current{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d-sidebar .nav-link{min-height:44px;border-radius:12px;line-height:1.35}
.d-sidebar .nav-submenu a{min-height:40px;border-radius:10px;line-height:1.4}
.dd-menu,.palette-modal,.modal-content,.modal-demo{border-radius:var(--radius-dialog)!important;border-color:var(--border);box-shadow:var(--shadow-lg)}
.dd-menu{max-width:calc(100vw - 24px)}
.modal-head,.modal-foot{gap:12px;flex-wrap:wrap}
.modal-title{min-width:0;overflow-wrap:anywhere}
.am-modal .modal-demo{max-height:calc(100dvh - 32px)}
.am-modal-backdrop{background:#11111866;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.am-modal .modal-body{overscroll-behavior:contain}
.am-picker,.am-drop,.alert,.an-none{border-radius:12px}
.am-error{border-radius:10px}
.table-scroll,.table-wrap,.an-table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
:is(.table-scroll,.table-wrap,.an-table-wrap) table:has(tr>:nth-child(5)){min-width:640px}
.hub-table-hint{margin:0 0 10px;color:var(--t-muted);font-size:12px;line-height:1.5}
.table-wrap{border-radius:16px!important}
.table td,.table th{vertical-align:middle}
.table th{color:var(--t-muted);font-family:var(--font-ui);font-weight:600}
.table tbody tr{transition:background-color .15s ease}
.table tbody tr:hover{background:var(--bg-hover)}
.table :is(button,a.btn){white-space:nowrap}
.tag,.badge,.nav-badge,.kpi-pill,.mail-tag{border-radius:6px!important}
.progress,.progress-fill,.mail-storage-bar,.mail-storage-bar-fill{border-radius:6px!important}
.module-card{padding:24px}
.module-card input:not([type=radio]):not([type=checkbox]),.module-card select,.module-card textarea{min-height:44px;border-radius:var(--radius-control);background:var(--bg-card);color:var(--t-base)}
.module-card fieldset,.module-card pre{border-radius:12px}
.module-card h2{font-size:20px;letter-spacing:-.025em}
.module-grid>.module-card{margin-bottom:0}
.module-card p{color:var(--t-muted)}
.module-status:empty{display:none}
.module-status.error{padding:12px 16px;border-radius:12px;background:var(--danger-soft);color:var(--danger)}
.auth-main{background:var(--bg-body)}
.auth-card{max-width:440px}
.auth-card h2{font-size:32px;letter-spacing:-.04em}
.auth-submit{min-height:44px;border-radius:var(--radius-control)!important}
/* Google's embedded control has a fixed 40px large size. Its local fallback
   must use that same size so the two sign-in options remain aligned. */
.google-signin-button button{min-height:40px;min-width:0}
.auth-main-top,.auth-main-bottom{line-height:1.6}
.chat-search input,.chat-compose textarea,.mail-search input{min-height:44px;border-radius:12px}
.chat-bubble,.chat-msg-bubble{border-radius:16px}
.chat-send{border-radius:12px!important;min-width:44px;min-height:44px}
.chat-composer-tools .tool,.chat-composer-send,.reply-send{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:12px}
.chat-composer-input{border-radius:14px}
.pager{flex-wrap:wrap;max-width:100%}
.pager .pager-btn{min-width:44px;min-height:44px;border-radius:10px}
.table-foot,.table-footer,.dt-footer{flex-wrap:wrap;gap:12px}
.cal-main,.cal-rail-card{border-radius:var(--radius-card)}
.cal-view-tab,.cal-today-btn,.mail-folder,.mail-tool,.pagination button,.pagination a{min-height:40px}
.cal-view-tab{border-radius:10px}
.ff-chip,.ff-tool,.pf-tab,.an-range button,.chat-group-toggle,.chat-group-add{min-height:44px}
.chat-group-add{min-width:44px}
main input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=file]),main select{min-height:44px}
.cal-toolbar,.mail-toolbar{flex-wrap:wrap;gap:8px}
/* Focus is visible for keyboard users without leaving a ring on touch taps. */
:is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--primary);outline-offset:3px}
:is(button,a,summary){touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.hub-skip-link{position:fixed;top:8px;left:16px;z-index:10000;padding:12px 18px;background:var(--bg-card);color:var(--primary);border:1px solid var(--border);border-radius:12px;transform:translateY(-160%)}
.hub-skip-link:focus{transform:translateY(0)}
.hub-nav-search{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;color:var(--t-muted);text-align:left}
.hub-nav-search svg{width:18px;height:18px;flex:none}
@media(max-width:900px){
 .hero{align-items:flex-start;flex-wrap:wrap}
 .hero-actions{max-width:100%}
 .d-topbar{padding-inline:16px}
 .topbar-actions .cmd{display:none}
 .topbar-actions{gap:0}
 .topbar-actions .avatar{width:44px;height:44px;min-width:44px;min-height:44px;margin-left:2px}
 .crumbs{flex:1;overflow:hidden}
 .dd-menu{position:fixed;top:68px;right:12px;min-width:0;width:min(360px,calc(100vw - 24px))}
 .d-sidebar .nav-submenu a{min-height:44px}
 .cal-main{grid-row:1}
 .cal-rail{grid-row:2}
}
@media(max-width:700px){
 .main>.content{padding:26px 16px calc(32px + env(safe-area-inset-bottom))}
 .hero{gap:16px;margin-bottom:24px}
 .hero-sub{font-size:14px}
 .card,.module-card{padding:18px}
 .card-head{gap:10px}
 .hero-actions .btn{flex:1 1 auto}
 .btn--sm,.card-action{min-height:44px}
 main button{min-height:44px;min-width:44px}
 main input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=file]),main select,main textarea{font-size:16px}
 .check,.switch,.am-picker label{min-height:44px}
 .input,.select,.textarea,.form-control,.form-select,.search-input,.module-card input:not([type=checkbox]):not([type=radio]),.module-card select,.module-card textarea,.chat-search input,.chat-compose textarea,.mail-search input{font-size:16px}
 .form-grid{grid-template-columns:minmax(0,1fr)}
 .form-grid .span-2{grid-column:1/-1}
 .am-modal{padding:16px 8px;align-items:center}
 .am-modal .modal-demo{width:100%;max-width:100%;max-height:calc(100dvh - 32px)}
 .modal-head,.modal-foot,.am-modal .modal-body{padding:16px}
 .modal-foot .btn{flex:1 1 auto}
 .cal-view-tab,.cal-today-btn,.pagination button,.pagination a{min-height:44px}
 .d-footer{padding:20px 16px calc(24px + env(safe-area-inset-bottom));font-size:12px}
 .auth-card{width:100%;min-width:0}
 .auth-main-top{gap:12px;flex-wrap:wrap}
 .auth-submit{min-height:44px}
 .form-actions{gap:10px}
 .form-actions>.spacer{display:none}
 .chat-pane-head{padding:12px;gap:8px}
 .chat-thread{padding:16px 12px}
 .chat-msg{max-width:94%}
 .chat-composer-input{flex-wrap:wrap}
 .chat-composer-input textarea{flex:1 1 100%;min-width:0;font-size:16px}
 .chat-composer-send{margin-left:auto}
}
@media(max-width:360px){
 .d-topbar{padding-inline:12px;gap:4px}
 .crumbs{font-size:12px;gap:4px}
 .card,.module-card{padding:16px}
 .card-head .btn{max-width:100%}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important}
 .hero,.grid,.card,.kpi-card,.chat-shell,.mail-shell,.cal-shell{animation:none!important}
 .btn,.icon-btn,.nav-link,.dd-menu,body{transition:none!important}
}

/* Compact headings keep the workspace focused on its content. */
.hero-title{font-size:26px;line-height:1.25;letter-spacing:-.025em}
.hero{margin-bottom:20px}
.main>.content{padding-top:24px}
@media(max-width:700px){.hero-title{font-size:23px}.hero{margin-bottom:16px}.main>.content{padding-top:16px}}

.hub-sidebar-toggle{display:none;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--t-base);align-items:center;justify-content:center;cursor:pointer}
.hub-sidebar-toggle svg{width:22px;height:22px}
.d-sidebar .nav-submenu a{display:flex;align-items:center;gap:10px}
.nav-submenu a svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:901px){.hub-sidebar-toggle{display:inline-flex}.sidebar-collapsed .shell{grid-template-columns:minmax(0,1fr)}.sidebar-collapsed .d-sidebar{display:none}}

/* Rounded sidebar with a compact icon rail on desktop. */
.d-sidebar [hidden]{display:none!important}
@media(min-width:901px){
.shell{grid-template-columns:264px minmax(0,1fr)}
.d-sidebar{margin:12px 0 12px 12px;top:12px;height:calc(100dvh - 24px);border:1px solid var(--border);border-radius:24px;padding:12px;gap:16px}
.hub-sidebar-toggle{align-self:flex-end;flex-shrink:0}
.sidebar-collapsed .shell{grid-template-columns:84px minmax(0,1fr)}
.sidebar-collapsed .d-sidebar{display:flex;padding:8px;gap:10px}
.sidebar-collapsed .brand,.sidebar-collapsed .nav-label,.sidebar-collapsed .sidebar-footer,.sidebar-collapsed .nav-link>span,.sidebar-collapsed .nav-link>.chev,.sidebar-collapsed .hub-nav-text,.sidebar-collapsed .hub-nav-search span{display:none}
.sidebar-collapsed .nav-link,.sidebar-collapsed .nav-submenu a,.sidebar-collapsed .hub-nav-search{width:44px;min-height:44px;padding:10px;justify-content:center;margin-inline:auto}
.sidebar-collapsed .nav-submenu{padding-left:0;border:0;margin-left:0}
.sidebar-collapsed .hub-sidebar-toggle{align-self:center}
}


/* The identity remains fixed while navigation scrolls independently. */
*{scrollbar-width:none}*::-webkit-scrollbar{display:none;width:0;height:0}
.d-sidebar{overflow:hidden;gap:0}
.hub-sidebar-head{display:flex;align-items:center;gap:6px;flex:0 0 auto;padding:4px 0 12px;border-bottom:1px solid var(--border);margin-bottom:12px}
.hub-sidebar-head .brand{flex:1;min-width:0;margin:0;padding:0;border:0;gap:8px}
.hub-sidebar-head .brand-logo{max-width:130px;width:100%;height:52px}
.hub-sidebar-head .brand-img{max-height:52px;width:100%;object-fit:contain}
.hub-sidebar-head .brand-text{display:none}
.hub-sidebar-head .hub-sidebar-toggle{align-self:center;flex:0 0 44px}
.hub-sidebar-scroll{min-height:0;overflow-y:auto;overflow-x:hidden;flex:1;display:flex;flex-direction:column;gap:18px;overscroll-behavior:contain}
@media(min-width:901px){.sidebar-collapsed .hub-sidebar-head{justify-content:center}.sidebar-collapsed .hub-sidebar-scroll{gap:10px}}


.pf-organisation{margin-top:20px}.pf-org-branches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:16px}.pf-org-tree{list-style:none;margin:0;padding:0 0 0 16px;border-left:2px solid var(--border)}.pf-org-node{position:relative;display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--border);border-radius:14px;margin:12px 0;background:var(--bg-muted)}.pf-org-tree .pf-org-node:before{content:'';position:absolute;left:-18px;top:24px;width:16px;border-top:2px solid var(--border)}.pf-org-node p{margin:0;color:var(--t-muted)}.pf-org-node span{font-size:12px;color:var(--t-muted)}@media(max-width:700px){.pf-org-branches{grid-template-columns:minmax(0,1fr)}}

.hub-dialog{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid var(--border);border-radius:24px;background:var(--bg-card);color:var(--t-base)}.hub-dialog::backdrop{background:#0006;backdrop-filter:blur(3px)}.meal-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}.meal-filters{display:flex;gap:16px;align-items:end;flex-wrap:wrap;margin-bottom:16px}.meal-field{display:flex;flex-direction:column;gap:8px;font-size:13px;flex:1;min-width:140px;margin-bottom:12px}.meal-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}.meal-value{font-size:26px;font-weight:650;margin:16px 0}.meal-muted{color:var(--t-muted);font-size:13px;line-height:1.6}.meal-observation{padding:16px 0;border-bottom:1px solid var(--border);overflow-wrap:anywhere}.meal-kpi progress{width:100%;accent-color:var(--primary)}.meal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}@media(max-width:1000px){.meal-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.meal-kpis,.meal-grid{grid-template-columns:minmax(0,1fr)}.meal-filters{display:block}.hub-dialog{padding:18px}}