/* NemDisplay app (customer part) – design C ("nordisk venlig"), built from docs/mockups/2026-11-06-app-c (c-base.css + app.css, sidebar variant) plus the app's own parts at the end. Light by default, dark and auto. Links are never underlined. */ @font-face{font-family:Nunito;font-style:normal;font-weight:500 900;font-display:swap;src:url("/assets/fonts/nunito-latin.woff2") format("woff2")} :root{ --bg:#f8f5ef;--surface:#fff;--surface-2:#f3efe7;--ink:#26303d;--ink-2:#5f6876;--ink-3:#8d95a1;--line:#ebe5d9; --brand:#2f6b5e;--brand-hover:#275a4f;--brand-ink:#fff;--brand-soft:#dcebe4; --sage:#dfece1;--sage-ink:#3d6b4c;--sand:#f5e8d0;--sand-ink:#8a6223;--sky:#dceaf6;--sky-ink:#2f6290; --heather:#ece2f3;--heather-ink:#71508f;--peach:#f9e2d8;--peach-ink:#a0503a;--mint:#d8efec;--mint-ink:#2c6e68; --ok:#3e9b66;--ok-soft:#e0f2e6;--warn:#c48318;--warn-soft:#fbefd6;--bad:#c8553d;--bad-soft:#f9e1da; --note:#fff6d9;--note-line:#ecd58f; --shadow:0 1px 2px rgba(70,55,30,.05),0 10px 28px -8px rgba(70,55,30,.10); --shadow-lg:0 2px 4px rgba(70,55,30,.05),0 24px 48px -16px rgba(70,55,30,.18); --r-xl:28px;--r-lg:24px;--r:20px;--r-sm:14px;--r-xs:10px; color-scheme:light; } @media (prefers-color-scheme:dark){:root[data-theme=auto]{ --bg:#171f2a;--surface:#212b38;--surface-2:#1b2430;--ink:#e9edf2;--ink-2:#a3adba;--ink-3:#77828f;--line:#2e3a4a; --brand:#7cc4ae;--brand-hover:#95d3bf;--brand-ink:#10251f;--brand-soft:#23403a; --sage:#25362d;--sage-ink:#a9d3b4;--sand:#3a3226;--sand-ink:#e9c98f;--sky:#213349;--sky-ink:#a5c9ec; --heather:#33293f;--heather-ink:#cfb4e4;--peach:#3d2a26;--peach-ink:#efb39f;--mint:#1f3a38;--mint-ink:#94d6cc; --ok:#6cc792;--ok-soft:#1f3a2b;--warn:#e8b25a;--warn-soft:#3b2f1b;--bad:#ee8a73;--bad-soft:#3f2622; --note:#3a3420;--note-line:#6b5d2f; --shadow:0 1px 2px rgba(0,0,0,.25),0 10px 28px -10px rgba(0,0,0,.45); --shadow-lg:0 24px 48px -16px rgba(0,0,0,.6); color-scheme:dark; }} :root[data-theme=dark]{ --bg:#171f2a;--surface:#212b38;--surface-2:#1b2430;--ink:#e9edf2;--ink-2:#a3adba;--ink-3:#77828f;--line:#2e3a4a; --brand:#7cc4ae;--brand-hover:#95d3bf;--brand-ink:#10251f;--brand-soft:#23403a; --sage:#25362d;--sage-ink:#a9d3b4;--sand:#3a3226;--sand-ink:#e9c98f;--sky:#213349;--sky-ink:#a5c9ec; --heather:#33293f;--heather-ink:#cfb4e4;--peach:#3d2a26;--peach-ink:#efb39f;--mint:#1f3a38;--mint-ink:#94d6cc; --ok:#6cc792;--ok-soft:#1f3a2b;--warn:#e8b25a;--warn-soft:#3b2f1b;--bad:#ee8a73;--bad-soft:#3f2622; --note:#3a3420;--note-line:#6b5d2f; --shadow:0 1px 2px rgba(0,0,0,.25),0 10px 28px -10px rgba(0,0,0,.45); --shadow-lg:0 24px 48px -16px rgba(0,0,0,.6); color-scheme:dark; } *{box-sizing:border-box} html,body{margin:0} body{background:var(--bg);color:var(--ink);font:500 15px/1.5 Nunito,ui-rounded,'Segoe UI',system-ui,sans-serif;-webkit-font-smoothing:antialiased} a,a:hover,a:focus,a:visited{text-decoration:none;color:inherit} button,input,textarea,select{font:inherit;color:inherit} button{cursor:pointer} h1,h2,h3,h4{margin:0;font-weight:900;letter-spacing:-.01em;line-height:1.2} p{margin:0} svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* ---------- brand ---------- */ .brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:21px;letter-spacing:-.02em;color:var(--ink)} .brand-mark{width:38px;height:38px;flex:none} .brand em{font-style:normal;color:var(--brand)} .brand .tag{font-size:12px;font-weight:800;background:var(--sand);color:var(--sand-ink);padding:3px 9px;border-radius:999px;letter-spacing:0} /* ---------- shell ---------- */ .app{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh;background:linear-gradient(90deg,var(--surface) 263px,var(--line) 263px 264px,transparent 264px)} .side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;padding:22px 16px;background:var(--surface);border-right:1px solid var(--line);overflow-y:auto} .side .brand{padding:0 8px 18px} .nav{display:grid;gap:4px} .nav-sep{height:1px;background:var(--line);margin:10px 10px} .nav a{white-space:nowrap;display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:18px;font-weight:700;color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s} .nav a:hover{background:var(--surface-2);color:var(--ink)} .nav a.on{background:var(--z,var(--surface-2));color:var(--ink);font-weight:800} .nav a.on .bub{background:var(--surface);box-shadow:0 2px 6px rgba(0,0,0,.06)} .bub{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:var(--z);color:var(--zi);flex:none} .bub svg.i{width:19px;height:19px} .nav .count{margin-left:auto;font-size:12px;font-weight:800;background:var(--peach);color:var(--peach-ink);border-radius:999px;padding:2px 8px} .z-sand{--z:var(--sand);--zi:var(--sand-ink)} .z-sky{--z:var(--sky);--zi:var(--sky-ink)} .z-sage{--z:var(--sage);--zi:var(--sage-ink)} .z-heather{--z:var(--heather);--zi:var(--heather-ink)} .z-peach{--z:var(--peach);--zi:var(--peach-ink)} .z-mint{--z:var(--mint);--zi:var(--mint-ink)} .z-plain{--z:var(--surface-2);--zi:var(--ink-2)} .side-foot{margin-top:auto;display:flex;align-items:center;gap:12px;padding:12px;border-radius:20px;background:var(--surface-2)} .side-foot b{display:block;font-weight:800;font-size:14px;line-height:1.2} .side-foot span{font-size:13px;color:var(--ink-3)} .avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:var(--sand);color:var(--sand-ink);flex:none;font-size:15px} .avatar.sm{width:30px;height:30px;font-size:12px} .main{min-width:0;padding:22px 36px 48px} .top{display:flex;align-items:center;gap:14px;margin-bottom:24px;min-height:48px} .top h1{font-size:30px} .top .sp{flex:1} .round{width:44px;height:44px;border-radius:50%;border:0;background:var(--surface);box-shadow:var(--shadow);display:grid;place-items:center;color:var(--ink-2)} .round:hover{color:var(--ink)} .pill{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 13px;font-weight:800;font-size:13px;background:var(--surface-2);color:var(--ink-2);white-space:nowrap} .pill svg.i{width:15px;height:15px} .pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.bad{background:var(--bad-soft);color:var(--bad)} .pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.z{background:var(--z);color:var(--zi)} .dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none} .pill.ok .dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 25%,transparent)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:999px;padding:12px 22px;font-weight:800;font-size:15px;background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);white-space:nowrap;transition:transform .1s,background .15s} .btn:active{transform:scale(.97)} .btn.primary{background:var(--brand);color:var(--brand-ink);box-shadow:none} .btn.primary:hover{background:var(--brand-hover)} .btn.soft{background:var(--z,var(--surface-2));color:var(--zi,var(--ink));box-shadow:none} .btn.sm{padding:8px 15px;font-size:14px} .btn svg.i{width:18px;height:18px} .card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:24px} .card.zone{background:var(--z);box-shadow:none} .sec-h{display:flex;align-items:center;gap:12px;margin:34px 0 16px;flex-wrap:wrap} .sec-h h2{font-size:21px} .sec-h .sp{flex:1} .link{font-weight:800;color:var(--brand);display:inline-flex;align-items:center;gap:6px} /* ---------- slide thumbnails ---------- */ .thumb{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;container-type:inline-size;flex:none;color:#fff} .thumb .tt{position:absolute;left:8cqw;top:12cqw;right:8cqw;font-weight:900;font-size:11cqw;line-height:1.05} .thumb .ts{position:absolute;left:8cqw;bottom:10cqw;right:8cqw;font-weight:800;font-size:max(9.5px,5.6cqw);line-height:1.35;opacity:.92} .t-menu{background:radial-gradient(circle at 85% 20%,#f6c27a 0 16%,transparent 17%),linear-gradient(135deg,#d9773f,#b9542e)} .t-cake{background:radial-gradient(circle at 78% 62%,#fff4ee 0 20%,#f6d9d2 21% 27%,transparent 28%),#e9a3a8;color:#5a2228} .t-hours{background:linear-gradient(160deg,#9bbfa4,#6f9a7b)} .t-video{background:linear-gradient(160deg,#3b4654,#232b35)} .t-video::after{content:"";position:absolute;left:50%;top:50%;width:16cqw;height:16cqw;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%232b3440'/%3E%3C/svg%3E") center/60% no-repeat} .t-insta{background:linear-gradient(135deg,#b48bd0,#e08aa6 60%,#f2b27c)} .t-borger{background:linear-gradient(160deg,#5b8fc0,#2f6290)} .t-borger .num{position:absolute;right:8cqw;top:10cqw;font-size:26cqw;font-weight:900;line-height:1;opacity:.95} .t-lib{background:linear-gradient(160deg,#c9a46c,#9a7440)} .t-nd{background:linear-gradient(160deg,#2f6b5e,#1f4d43);} .t-nd .sun{position:absolute;right:10cqw;top:14cqw;width:20cqw;height:20cqw;border-radius:50%;background:#f5e8d0} .t-nd .hill{position:absolute;left:-10%;right:-10%;bottom:-38cqw;height:60cqw;border-radius:50%;background:#3d8a74} .t-off{background:repeating-linear-gradient(135deg,var(--surface-2) 0 12px,var(--bg) 12px 24px);color:var(--ink-3);display:grid;place-items:center} .t-off svg.i{width:13cqw;height:13cqw;stroke-width:1.6} /* ---------- overview ---------- */ .hero{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:20px} .hello{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--sand);padding:32px 34px;min-height:236px;display:flex;flex-direction:column;justify-content:space-between;gap:20px} .hello h2{font-size:34px;color:var(--ink);max-width:56%} .hello .big{font-size:18px;font-weight:700;color:var(--sand-ink);margin-top:8px;max-width:56%} .hello .acts{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1} .hello .btn:not(.primary){background:var(--surface);box-shadow:none} .hello .ill{position:absolute;right:18px;bottom:0;width:min(46%,320px);height:auto} .trial{border-radius:var(--r-xl);background:var(--mint);padding:28px;display:flex;flex-direction:column;gap:18px} .trial-top{display:flex;gap:20px;align-items:center} .ring{width:104px;height:104px;flex:none;position:relative} .ring svg{width:100%;height:100%;transform:rotate(-90deg)} .ring b{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-size:30px;font-weight:900;line-height:1;color:var(--mint-ink)} .ring b small{display:block;font-size:13px;font-weight:800;margin-top:2px} .trial h3{font-size:20px} .trial .meta{color:var(--mint-ink);font-weight:700;margin-top:4px} .trial .btn.primary{align-self:flex-start} .screens{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} .scr{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:12px 12px 16px;display:flex;flex-direction:column;gap:12px;transition:transform .15s,box-shadow .15s;cursor:pointer} .scr:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)} .scr .thumb{border-radius:16px} .scr-row .pill{padding:4px 10px;font-size:12.5px} .scr-b{padding:0 6px;display:flex;flex-direction:column;gap:8px} .scr-b h3{font-size:17px} .scr-row{display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap} .scr .now{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink-2);font-size:14px} .scr .now .bub{width:28px;height:28px;border-radius:9px} .scr .now .bub svg.i{width:15px;height:15px} .lower{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;margin-top:34px} .guide{border-radius:var(--r-xl);background:var(--sage);padding:28px} .guide-h{display:flex;align-items:center;gap:14px;margin-bottom:18px} .guide-h h2{font-size:21px} .guide-h .sp{flex:1} .guide-h strong{font-size:15px;font-weight:900;color:var(--sage-ink)} .bar{height:12px;border-radius:999px;background:color-mix(in srgb,var(--surface) 65%,transparent);overflow:hidden;margin-bottom:18px} .bar i{display:block;height:100%;width:67%;border-radius:inherit;background:var(--sage-ink)} .steps{display:grid;grid-template-columns:1fr 1fr;gap:10px} .step{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:18px;padding:12px 14px;font-weight:800;font-size:14.5px} .step .ck{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--ok-soft);color:var(--ok)} .step .ck svg.i{width:16px;height:16px;stroke-width:3} .step.done{color:var(--ink-3)} .step.done span:last-child{text-decoration:line-through;text-decoration-thickness:1.5px} .step.todo .ck{background:var(--surface-2);color:var(--ink-3);border:2px dashed var(--line)} .step.next{box-shadow:inset 0 0 0 2px var(--sage-ink)} .step.next .ck{background:var(--sage-ink);color:var(--surface);border:0} .step.next .go{margin-left:auto;color:var(--sage-ink)} .feed{display:grid;gap:4px} .feed-i{display:flex;gap:14px;align-items:center;padding:10px 4px} .feed-i+.feed-i{border-top:1px dashed var(--line)} .feed-i .bub{width:40px;height:40px} .feed-i p{font-weight:700;font-size:14.5px;line-height:1.35} .feed-i time{display:block;color:var(--ink-3);font-size:13px;font-weight:700} /* ---------- playlist editor ---------- */ .back{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--ink-2);background:var(--surface);border-radius:999px;padding:8px 16px 8px 10px;box-shadow:var(--shadow)} .pl-head{border-radius:var(--r-xl);background:var(--heather);padding:26px 30px;display:flex;align-items:center;gap:22px;flex-wrap:wrap} .pl-head .bub{width:64px;height:64px;border-radius:22px;background:var(--surface)} .pl-head .bub svg.i{width:30px;height:30px} .pl-name{font-size:30px;font-weight:900;border:0;background:transparent;padding:4px 10px;margin-left:-10px;border-radius:14px;width:100%;max-width:420px;color:var(--ink)} .pl-name:hover,.pl-name:focus{background:color-mix(in srgb,var(--surface) 60%,transparent);outline:0} .pl-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px} .pl-meta .pill{background:var(--surface);color:var(--heather-ink)} .pl-head .sp{flex:1} .pl-acts{display:flex;gap:10px;flex-wrap:wrap} .pl-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;margin-top:22px;align-items:start} .slides{display:grid;gap:12px} .slide{display:grid;grid-template-columns:auto auto 132px minmax(0,1fr) auto auto;gap:16px;align-items:center;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:12px 14px 12px 8px;transition:box-shadow .15s,transform .15s,opacity .15s} .slide.dragging{opacity:.45} .slide.over{box-shadow:0 0 0 3px var(--heather-ink),var(--shadow-lg)} .slide.playing{box-shadow:inset 0 0 0 2.5px var(--heather-ink),var(--shadow)} .grip{cursor:grab;color:var(--ink-3);padding:8px 2px;display:grid;place-items:center} .grip:active{cursor:grabbing} .slide .no{width:30px;height:30px;border-radius:50%;background:var(--heather);color:var(--heather-ink);display:grid;place-items:center;font-weight:900;font-size:14px} .slide .thumb{border-radius:12px} .slide h3{font-size:16.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .slide .type{margin-top:6px} .slide .type .pill{padding:4px 10px;font-size:12.5px} .dur{display:flex;align-items:center;gap:4px;background:var(--surface-2);border-radius:999px;padding:4px} .dur button{width:34px;height:34px;border-radius:50%;border:0;background:var(--surface);font-weight:900;font-size:18px;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.08)} .dur output{min-width:58px;text-align:center;font-weight:900;font-size:15px} .more{width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--ink-3);display:grid;place-items:center} .more:hover{background:var(--surface-2);color:var(--bad)} .add-slide{border:2.5px dashed color-mix(in srgb,var(--heather-ink) 40%,transparent);border-radius:var(--r);background:transparent;padding:22px;display:flex;align-items:center;justify-content:center;gap:12px;font-weight:900;font-size:16px;color:var(--heather-ink)} .add-slide:hover{background:var(--heather)} .add-slide .bub{background:var(--heather);color:var(--heather-ink)} .aside{display:grid;gap:18px;position:sticky;top:76px} .aside h3{font-size:17px;margin-bottom:14px;display:flex;align-items:center;gap:10px} .preview .thumb{border-radius:18px;box-shadow:0 0 0 8px #2b323c,0 0 0 9px #444c57} .preview .stand{width:28%;height:12px;margin:14px auto 0;border-radius:0 0 10px 10px;background:#444c57} .prog{display:flex;gap:5px;margin-top:18px} .prog i{flex:1;height:6px;border-radius:9px;background:var(--surface-2)} .prog i.on{background:var(--heather-ink)} .prog i.half{background:linear-gradient(90deg,var(--heather-ink) 45%,var(--surface-2) 45%)} .runs{display:grid;gap:8px} .run{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:18px;background:var(--surface-2);font-weight:800} .run small{display:block;font-weight:700;color:var(--ink-3);font-size:13px} .run .sp{flex:1} .tog{width:52px;height:30px;border-radius:999px;border:0;background:color-mix(in srgb,var(--ink-3) 35%,transparent);position:relative;flex:none;transition:background .2s} .tog::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s} .tog[aria-pressed="true"]{background:var(--ok)} .tog[aria-pressed="true"]::after{transform:translateX(22px)} .when{display:flex;gap:8px;flex-wrap:wrap} .chip{border:0;border-radius:999px;padding:9px 15px;font-weight:800;font-size:14px;background:var(--surface-2);color:var(--ink-2)} .chip.on{background:var(--heather);color:var(--heather-ink);box-shadow:inset 0 0 0 2px var(--heather-ink)} /* ===== layout and components (mockup app.css) ===== */ /* NemDisplay app mockup, direction C. Additions on top of c-base.css. */ html{scroll-padding-top:70px} body{min-height:100vh;overflow-x:hidden} .app{grid-template-columns:264px minmax(0,1fr);background:linear-gradient(90deg,var(--surface) 263px,var(--line) 263px 264px,transparent 264px)} .side{align-self:start} .main{padding:22px 36px 120px;max-width:1440px} /* ---------- sidebar (variant "Sidebar") ---------- */ .side{gap:4px;padding:20px 14px} .side .brand{padding:0 8px 14px} .nav a{padding:6px 10px} .nav .count.soft{background:var(--surface-2);color:var(--ink-3)} .nav .count.mint{background:var(--mint);color:var(--mint-ink)} .bub{position:relative} .bub .st{position:absolute;right:-3px;top:-3px;width:12px;height:12px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 2.5px var(--surface)} .sub{display:none;margin:2px 0 6px 31px;padding-left:18px;border-left:2px solid var(--line);gap:2px} .nav-g.open .sub{display:grid} .sub a{padding:7px 12px;border-radius:14px;font-size:14px;font-weight:700;gap:8px} .sub a.on{background:var(--z);color:var(--zi);font-weight:800} .sub a.dis{opacity:.5;pointer-events:none} .sub a .count{font-size:11.5px;padding:1px 7px} .side-foot{cursor:pointer;position:relative;border:0;width:100%;text-align:left;color:inherit;margin-top:auto} .side-foot .chev{margin-left:auto;color:var(--ink-3);width:18px;height:18px} .side-foot span{min-width:0} .side-foot b,.side-foot span span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nav-label{font-size:12px;font-weight:900;color:var(--ink-3);padding:6px 12px 2px;letter-spacing:.02em} /* ---------- top bar inside main ---------- */ .top{flex-wrap:wrap} .top .round{flex:none} .top .acct{display:none} .top .pill.trial-pill{cursor:pointer} /* ---------- generic ---------- */ .grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start} .grid-main{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;align-items:start} .grid-side{display:grid;grid-template-columns:240px minmax(0,1fr);gap:22px;align-items:start} .stack{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)} .slides,.aside{grid-template-columns:minmax(0,1fr)} .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .row .sp,.sp{flex:1} .card h2{font-size:19px} .card-h{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap} .card-h h2,.card-h h3{flex:1;min-width:0} .card-h .bub{width:40px;height:40px} .muted{color:var(--ink-3)} .hide{display:none!important} .btn.danger{background:var(--bad-soft);color:var(--bad);box-shadow:none} .btn.danger.solid{background:var(--bad);color:#fff} .btn.ghost{background:transparent;box-shadow:none;color:var(--ink-2)} .btn.ghost:hover{background:var(--surface-2)} .btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none} .btn.block{width:100%} .icon-btn{width:38px;height:38px;border-radius:50%;border:0;background:var(--surface-2);display:inline-grid;place-items:center;color:var(--ink-2);flex:none} .icon-btn svg.i{width:17px;height:17px} .icon-btn:hover{background:var(--z,var(--sky));color:var(--zi,var(--sky-ink))} .icon-btn.bad:hover{background:var(--bad-soft);color:var(--bad)} .tabs{display:inline-flex;gap:4px;background:var(--surface);border-radius:999px;padding:5px;box-shadow:var(--shadow);margin-bottom:22px;max-width:100%;overflow-x:auto;scrollbar-width:none} .tabs a{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;font-weight:800;font-size:14.5px;color:var(--ink-2);white-space:nowrap} .tabs a:hover{color:var(--ink)} .tabs a.on{background:var(--z,var(--surface-2));color:var(--zi,var(--ink))} .tabs a .count{font-size:12px;font-weight:900;background:var(--surface-2);color:var(--ink-3);border-radius:999px;padding:1px 8px} .tabs a.on .count{background:var(--surface);color:var(--zi)} .tabs a.dis{opacity:.5;pointer-events:none} .tabs a .soon{font-size:11px;font-weight:900;background:var(--sand);color:var(--sand-ink);border-radius:999px;padding:1px 8px} .seg{display:inline-flex;gap:4px;background:var(--surface-2);border-radius:999px;padding:4px;flex-wrap:wrap} .seg button{border:0;background:transparent;border-radius:999px;padding:8px 16px;font-weight:800;font-size:14px;color:var(--ink-2);white-space:nowrap} .seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)} .seg a{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:8px 16px;font-weight:800;font-size:14px;color:var(--ink-2);white-space:nowrap} .seg a:hover{color:var(--ink)} .seg a.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)} .seg a .count{font-size:12px;font-weight:900;color:var(--ink-3)} .seg a svg.i{width:16px;height:16px} .filter-seg{gap:10px;flex-wrap:wrap;margin-top:18px} /* forms */ .field{display:grid;gap:7px;min-width:0} .field>span:first-child,.flabel{font-weight:800;font-size:14px;color:var(--ink-2)} .input,.field input:not([type=checkbox]):not([type=radio]):not([type=color]),.field select,.field textarea{width:100%;border:0;border-radius:16px;background:var(--surface-2);padding:13px 16px;font-weight:700;font-size:15px;color:var(--ink);outline:0;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .15s,background .15s;min-width:0} .field select{appearance:none;background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d95a1' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/16px no-repeat;padding-right:42px;cursor:pointer} .field textarea{resize:vertical;line-height:1.45;min-height:96px} .field input:focus,.field select:focus,.field textarea:focus,.input:focus{background:var(--surface);box-shadow:inset 0 0 0 2px var(--brand)} .field input:disabled{color:var(--ink-3);cursor:not-allowed} .field.missing input,.field.missing select{box-shadow:inset 0 0 0 2px var(--warn);background:var(--warn-soft)} .field.missing>span:first-child::after{content:"Mangler";margin-left:8px;font-size:11.5px;font-weight:900;background:var(--warn-soft);color:var(--warn);padding:2px 8px;border-radius:999px} .field .with-act{display:flex;gap:8px;align-items:center} .field .with-act input{flex:1} .frow{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px} .frow.half{grid-template-columns:1fr 1fr} .check{display:flex;align-items:center;gap:12px;font-weight:700;cursor:pointer} .check input{width:22px;height:22px;accent-color:var(--brand);flex:none;margin:0} .opt{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:18px;background:var(--surface-2);font-weight:800;cursor:pointer} .opt .sp{flex:1} .opt input[type=radio]{width:20px;height:20px;accent-color:var(--brand);margin:0} .opt:has(input:checked){background:var(--brand-soft);box-shadow:inset 0 0 0 2px var(--brand)} .toggles{display:grid;gap:8px} .search{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:999px;padding:10px 18px;color:var(--ink-3);box-shadow:inset 0 0 0 1.5px var(--line)} .search input{border:0;background:transparent;outline:0;width:100%;font-weight:700;color:var(--ink);min-width:0} .search:focus-within{box-shadow:inset 0 0 0 2px var(--brand)} /* alerts / banners */ .banner{display:flex;align-items:center;gap:14px;border-radius:var(--r-lg);padding:16px 20px;background:var(--z,var(--sand));color:var(--ink);flex-wrap:wrap;margin-bottom:20px} .banner .bub{background:var(--surface)} .banner b{font-weight:900} .banner .sp{flex:1} .banner.ok{--z:var(--ok-soft);--zi:var(--ok)} .banner.warn{--z:var(--warn-soft);--zi:var(--warn)} .banner.bad{--z:var(--bad-soft);--zi:var(--bad)} .banner .btn{background:var(--surface);box-shadow:none} /* tables */ .tbl{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden} .tbl table{width:100%;border-collapse:collapse;font-size:14.5px} .tbl th{text-align:left;font-size:12.5px;font-weight:900;color:var(--ink-3);padding:16px 18px 10px;white-space:nowrap} .tbl td{padding:12px 18px;border-top:1px solid var(--line);font-weight:700;vertical-align:middle} .tbl tr:hover td{background:color-mix(in srgb,var(--surface-2) 55%,transparent)} .tbl td.r,.tbl th.r{text-align:right} .tbl .who{display:flex;align-items:center;gap:12px;min-width:0} .tbl .who b{display:block;font-weight:900} .tbl .who small{display:block;color:var(--ink-3);font-weight:700;font-size:13px;word-break:break-all} .tbl .avatar{width:38px;height:38px;border-radius:13px;font-size:13px;background:var(--z,var(--sand));color:var(--zi,var(--sand-ink))} .mono{font-variant-numeric:tabular-nums;letter-spacing:.02em} /* modal */ .scrim{position:fixed;inset:0;background:rgba(20,26,34,.42);z-index:80;display:grid;place-items:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .2s} .scrim.show{opacity:1;pointer-events:auto} .modal{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:28px;transform:translateY(12px) scale(.98);transition:transform .2s} .modal.wide{width:min(860px,100%)} .scrim.show .modal{transform:none} .modal-h{display:flex;align-items:center;gap:14px;margin-bottom:20px} .modal-h h2{font-size:22px;flex:1} .modal-h .bub{width:48px;height:48px;border-radius:16px} .modal-x{width:40px;height:40px;border-radius:50%;border:0;background:var(--surface-2);display:grid;place-items:center;color:var(--ink-2)} .modal-f{display:flex;gap:10px;justify-content:flex-end;margin-top:24px;flex-wrap:wrap} .modal p.lead{font-weight:700;font-size:16px;color:var(--ink-2)} /* toast (C style) */ .toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,30px);opacity:0;background:var(--ink);color:var(--bg);font-weight:800;padding:12px 20px;border-radius:999px;box-shadow:var(--shadow-lg);transition:all .25s;z-index:99;display:flex;gap:10px;align-items:center;pointer-events:none;max-width:calc(100vw - 32px)} .toast.show{opacity:1;transform:translate(-50%,0)} /* ---------- popover menu ---------- */ .pop{position:fixed;z-index:70;background:var(--surface);border-radius:22px;box-shadow:var(--shadow-lg);padding:8px;min-width:260px;display:none} .pop.show{display:block} .pop a,.pop button.pl{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;font-weight:800;font-size:14.5px;width:100%;border:0;background:transparent;text-align:left;color:var(--ink)} .pop a:hover,.pop button.pl:hover{background:var(--surface-2)} .pop .pg{font-size:12px;font-weight:900;color:var(--ink-3);padding:8px 12px 4px} .pop hr{border:0;height:1px;background:var(--line);margin:6px 8px} .pop .ok-c{margin-left:auto;color:var(--ok)} .pop .avatar.sm{border-radius:10px} /* ---------- live slide players ---------- */ .live-scr{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;container-type:inline-size;background:#2b333e} .live-scr .thumb{position:absolute;inset:0;border-radius:0;opacity:0;transition:opacity .6s} .live-scr .thumb.on{opacity:1} .live-scr .lp{position:absolute;left:0;bottom:0;height:4px;background:rgba(255,255,255,.85);z-index:3;border-radius:0 4px 4px 0} .live-scr.portrait{aspect-ratio:9/16} .tv{border-radius:18px;box-shadow:0 0 0 8px #2b323c,0 0 0 9px #444c57;margin:9px} .tv-stand{width:28%;height:12px;margin:14px auto 0;border-radius:0 0 10px 10px;background:#444c57} .live-tag{position:absolute;left:12px;top:12px;z-index:4;display:flex;align-items:center;gap:6px;font-weight:900;font-size:12px;background:rgba(20,26,34,.62);color:#fff;border-radius:999px;padding:4px 10px 4px 8px} .live-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:#ff6b57;animation:blink 1.4s infinite} @keyframes blink{50%{opacity:.25}} /* extra slide looks */ .t-brunch{background:radial-gradient(circle at 82% 22%,#f7c58a 0 15%,transparent 16%),linear-gradient(135deg,#e2884a,#c4553a)} .t-jul{background:radial-gradient(circle at 15% 80%,#2f6b5e 0 10%,transparent 11%),radial-gradient(circle at 88% 18%,#f5e8d0 0 8%,transparent 9%),linear-gradient(160deg,#b2393f,#7d1f27)} .t-coffee{background:radial-gradient(circle at 76% 64%,#fff 0 13%,#e5c48c 14% 19%,transparent 20%),linear-gradient(150deg,#f0c75e,#dc9a32);color:#3b2a0c} .t-staff{background:linear-gradient(160deg,#6d9ccc,#3f6f9f)} .t-welcome{background:radial-gradient(circle at 85% 80%,#f5e8d0 0 14%,transparent 15%),linear-gradient(160deg,#5fa79a,#2c6e68)} .t-hygiene{background:radial-gradient(circle at 80% 30%,rgba(255,255,255,.35) 0 9%,transparent 10%),radial-gradient(circle at 70% 55%,rgba(255,255,255,.25) 0 6%,transparent 7%),linear-gradient(160deg,#7fb9d6,#3f86ad)} .t-web{background:#fbfaf7;color:#2b333e} .t-web::before{content:"";position:absolute;left:0;right:0;top:0;height:14cqw;background:#2f6b5e} .t-web .tt{color:#fff;top:3.4cqw;font-size:7cqw} .t-web .ts{color:#2b333e;opacity:1} .t-web .lines{position:absolute;left:8cqw;right:40cqw;top:22cqw;display:grid;gap:3.4cqw} .t-web .lines i{height:3.2cqw;border-radius:2cqw;background:#e6e1d6} .t-web .lines i:nth-child(2){width:80%}.t-web .lines i:nth-child(3){width:60%} .t-web .box{position:absolute;right:8cqw;top:22cqw;width:26cqw;height:22cqw;border-radius:3cqw;background:#f5e8d0} .t-plan{background:#fff;color:#26303d} .t-plan::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 22%,#ebe5d9 22% 22.6%,transparent 22.6%) 0 0/100% 100%,repeating-linear-gradient(180deg,transparent 0 11cqw,#ebe5d9 11cqw calc(11cqw + 1px));opacity:.9} .t-plan .tt{font-size:7cqw;top:4cqw;color:#3f6f9f} .t-plan .bars{position:absolute;left:26cqw;right:6cqw;top:16cqw;bottom:6cqw;display:grid;gap:4cqw} .t-plan .bars i{border-radius:2cqw;background:#dceaf6} .t-plan .bars i:nth-child(1){margin-right:40%;background:#dfece1}.t-plan .bars i:nth-child(2){margin-left:30%;background:#f5e8d0}.t-plan .bars i:nth-child(3){margin-right:20%;margin-left:10%}.t-plan .bars i:nth-child(4){margin-left:45%;background:#ece2f3} .t-pdf::after{content:"PDF";position:absolute;right:5cqw;bottom:5cqw;font-size:5cqw;font-weight:900;background:rgba(255,255,255,.92);color:#7d1f27;padding:.5cqw 2.4cqw;border-radius:2cqw} .thumb.portrait{aspect-ratio:9/16} /* ---------- overview ---------- */ .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:20px} .stat{border-radius:var(--r-lg);background:var(--z);color:var(--zi);padding:16px 18px;display:flex;align-items:center;gap:14px;cursor:pointer} .stat .bub{background:var(--surface);width:44px;height:44px;border-radius:15px} .stat b{display:block;font-size:28px;font-weight:900;line-height:1;color:var(--ink)} .stat b small{font-size:15px;font-weight:800;color:var(--zi)} .stat span{font-weight:800;font-size:14px} .act{display:flex;gap:14px;align-items:center;padding:12px;border-radius:20px;background:var(--z);} .act+.act{margin-top:10px} .act .bub{background:var(--surface)} .act p{font-weight:800;line-height:1.3;flex:1;min-width:0} .act time{display:block;font-weight:700;font-size:13px;color:var(--zi)} .act .btn{background:var(--surface);box-shadow:none} .news-mini{display:grid;gap:12px} .news-mini article{display:flex;gap:14px;align-items:flex-start} .news-mini h3{font-size:16px} .news-mini p{font-weight:600;color:var(--ink-2);font-size:14.5px;margin-top:3px} .scr .live-scr{border-radius:16px} .scr .loc{color:var(--ink-3);font-weight:700;font-size:13.5px;margin-top:-4px} /* ---------- screens ---------- */ .screens.big{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))} .scr-foot{display:flex;gap:8px;flex-wrap:wrap;padding:0 6px} .scr-foot .pill{padding:4px 10px;font-size:12.5px} .add-tile{border:2.5px dashed color-mix(in srgb,var(--sky-ink) 35%,transparent);border-radius:var(--r-lg);display:grid;place-items:center;align-content:center;gap:10px;font-weight:900;color:var(--sky-ink);min-height:240px;background:transparent;cursor:pointer} .add-tile:hover{background:var(--sky)} .add-tile .bub{background:var(--sky);color:var(--sky-ink);width:52px;height:52px;border-radius:18px} .s-head{border-radius:var(--r-xl);background:var(--sky);padding:24px 28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap} .s-head .bub{width:64px;height:64px;border-radius:22px;background:var(--surface)} .s-head .bub svg.i{width:30px;height:30px} .s-head h1{font-size:30px} .s-head .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .s-head .meta .pill:not(.ok):not(.bad){background:var(--surface);color:var(--sky-ink)} .s-head .acts{display:flex;gap:10px;flex-wrap:wrap} .s-head .btn:not(.primary){background:var(--surface);box-shadow:none} .kv{display:grid;gap:2px} .kv>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px dashed var(--line);font-size:14.5px} .kv>div:first-child{border-top:0} .kv span{color:var(--ink-3);font-weight:700} .kv b{font-weight:800;text-align:right} .sched{display:grid;gap:8px} .sched-axis,.sched-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:center} .sched-axis .ax{position:relative;height:18px;font-size:12px;font-weight:800;color:var(--ink-3)} .sched-axis .ax span{position:absolute;transform:translateX(-50%)} .sched-row .nm{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;min-width:0} .sched-row .nm span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sched-row .nm .thumb{width:44px;border-radius:7px} .sched-row .tr{position:relative;height:26px;border-radius:999px;background:var(--surface-2)} .sched-row .tr i{position:absolute;top:0;bottom:0;border-radius:999px;background:var(--z,var(--heather));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--zi,var(--heather-ink)) 35%,transparent)} .sched-row .tr em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:12.5px;font-weight:800;color:var(--ink-3)} .sched .now-wrap{position:relative} .sched .now{position:absolute;top:22px;bottom:-4px;width:2.5px;background:var(--bad);border-radius:2px;z-index:2} .sched .now::before{content:attr(data-t);position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:11.5px;font-weight:900;color:#fff;background:var(--bad);border-radius:999px;padding:1px 7px;white-space:nowrap} .sched .now-wrap{display:grid;gap:6px} .sched-now{position:absolute;inset:0;pointer-events:none} .sched-now>div{position:relative} .sched-now .now{top:-26px;bottom:0;height:calc(100% + 26px)} .now-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .now-list .it{display:grid;gap:6px;font-weight:800;font-size:13.5px} .now-list .it .thumb{border-radius:12px} .now-list .it.cur .thumb{box-shadow:0 0 0 3px var(--heather-ink)} .now-list .it small{color:var(--ink-3);font-weight:700} .now-list .it.off{opacity:.45} /* ---------- content ---------- */ .folders{display:grid;gap:4px;padding:14px} .folders h3{font-size:15px;padding:6px 10px 8px} .folders a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;font-weight:700;color:var(--ink-2)} .folders a:hover{background:var(--surface-2);color:var(--ink)} .folders a.on{background:var(--sage);color:var(--sage-ink);font-weight:800} .folders a .n{margin-left:auto;font-size:12.5px;font-weight:800;color:var(--ink-3)} .folders a.on .n{color:var(--sage-ink)} .folders a svg.i{width:18px;height:18px} .folders a.drop-over{background:var(--sage);color:var(--sage-ink);box-shadow:inset 0 0 0 2px var(--sage-ink)} .folders a.dragging,.file.dragging{opacity:.45} .file[draggable=true]{cursor:grab} .pill.ori svg.i{width:13px;height:13px} .drop{border:2.5px dashed color-mix(in srgb,var(--sage-ink) 40%,transparent);border-radius:var(--r-lg);background:var(--surface);padding:28px;display:flex;align-items:center;gap:18px;cursor:pointer;transition:background .15s} .drop:hover,.drop.over{background:var(--sage)} .drop .bub{width:58px;height:58px;border-radius:20px;background:var(--sage);color:var(--sage-ink)} .drop:hover .bub{background:var(--surface)} .drop .bub svg.i{width:26px;height:26px} .drop b{font-size:17px;font-weight:900;display:block} .drop .types{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px} .drop .types .pill{padding:3px 10px;font-size:12px;background:var(--surface-2)} .drop .field{margin-left:auto;width:220px} .ups{display:grid;gap:8px;margin-top:12px} .up{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:18px;padding:10px 14px;box-shadow:var(--shadow);font-weight:800;font-size:14px} .up .bar2{flex:1;height:8px;border-radius:9px;background:var(--surface-2);overflow:hidden} .up .bar2 i{display:block;height:100%;background:var(--sage-ink);border-radius:inherit;transition:width .3s} .up .pc{min-width:44px;text-align:right;color:var(--ink-3)} .files{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:20px} .file{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:10px 10px 12px;display:grid;gap:10px;position:relative} .file .thumb{border-radius:13px} .file h3{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px} .file .meta{display:flex;gap:6px;flex-wrap:wrap;padding:0 4px} .file .meta .pill{padding:3px 9px;font-size:12px} .file .fm{position:absolute;right:16px;top:16px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#26303d;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.15);opacity:0;transition:opacity .15s} .file:hover .fm,.file .fm:focus{opacity:1} .file .fm svg.i{width:17px;height:17px} .swatches{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .sw{width:38px;height:38px;border-radius:13px;border:0;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.08)} .sw.on{box-shadow:0 0 0 3px var(--surface),0 0 0 5.5px var(--ink)} .sw-pick{position:relative;width:38px;height:38px;border-radius:13px;background:conic-gradient(#e86a5a,#f2c14e,#7fae8a,#5b8fc0,#b48bd0,#e86a5a);overflow:hidden} .sw-pick input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%} .tprev{aspect-ratio:16/9;border-radius:18px;container-type:inline-size;position:relative;overflow:hidden;color:#fff;transition:background .2s} .tprev .tt{position:absolute;left:8cqw;top:14cqw;right:8cqw;font-weight:900;font-size:9cqw;line-height:1.05;word-break:break-word} .tprev .ts{position:absolute;left:8cqw;top:38cqw;right:8cqw;font-weight:800;font-size:4.6cqw;line-height:1.35;opacity:.92;white-space:pre-line} .webrow{display:grid;grid-template-columns:150px minmax(0,1fr) auto auto;gap:18px;align-items:center;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:12px 16px 12px 12px} .webrow+.webrow{margin-top:12px} .webrow .thumb{border-radius:12px} .webrow h3{font-size:16.5px} .webrow .url{color:var(--ink-3);font-weight:700;font-size:13.5px;word-break:break-all} .webrow .wr-actions{display:flex;gap:8px;align-items:center} .fallback-card{margin-top:22px} .fallback-card form{align-items:flex-end} .fallback-card .field.grow{flex:1;min-width:240px} .row .field.grow{flex:1;min-width:140px} .when-p .days.months label{min-width:40px} /* text templates (#34) */ .tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px} .tpl{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:18px;border-radius:var(--r);background:var(--tile,#2f6b5e);color:#fff;box-shadow:var(--shadow);min-height:140px} .tpl .bub{background:rgba(255,255,255,.18);color:#fff}.tpl b{font-size:17px;font-weight:900}.tpl span:last-child{font-size:13.5px;opacity:.9;line-height:1.35} .tpl:hover{filter:brightness(1.07)} .when-p .monthdays{width:120px} .when-p .every{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--ink-2)}.when-p .every input{width:90px} .when-p .tags{min-width:200px} /* availability strip (#39): one bar per day, height = hours with a heartbeat */ .news-row{grid-template-columns:minmax(0,1fr) auto}.news-edit{margin-top:12px}.rss{margin-top:22px}.rss-url{display:block;font-size:12.5px;word-break:break-all;background:var(--surface-2);padding:8px 10px;border-radius:10px;flex:1} .avail-strip{display:flex;gap:2px;align-items:flex-end;height:28px;margin:4px 0 8px} .avail-strip i{flex:1;min-width:3px;height:calc(100% * var(--h,0) / 24);min-height:2px;border-radius:2px;background:var(--ok);opacity:.85} .avail-strip i[style*="--h:0"]{background:var(--bad);opacity:.5} /* emergency message (#35): big tiles that work on a phone */ .alarm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px} .alarm-grid form{display:contents} .alarm-tile{display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-align:left;min-height:120px;padding:16px 18px;border:0;border-radius:var(--r);background:var(--tile,#b3261e);color:#fff;cursor:pointer;box-shadow:var(--shadow)} .alarm-tile b{font-size:18px;font-weight:900}.alarm-tile span{font-size:13.5px;opacity:.88;line-height:1.35} .alarm-tile:disabled{opacity:.45;cursor:default}.alarm-tile:not(:disabled):hover{filter:brightness(1.08)} .alarm-on{border:2px solid var(--bad)}.alarm-msg{font-size:17px;line-height:1.4} .alarm-btn{min-height:56px;font-size:17px}.alarm-on .alarm-btn{background:var(--bad);color:#fff} .alarm-log li{padding:8px 0;border-top:1px solid var(--line)} .alarm-log code,.mode-hook code{word-break:break-all;font-size:13px} .scr-folder{margin:18px 0 0 calc(var(--depth,0)*18px)}.scr-folder>summary{display:flex;align-items:center;gap:8px;cursor:pointer;padding:6px 0 10px;font-size:16px}.scr-folder>summary .btn{margin-left:auto} .folder-tree li{padding:8px 0 8px calc(var(--depth,0)*20px);border-top:1px solid var(--line)}.folder-tree a{display:inline-flex;align-items:center;gap:6px} .folder-screens{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 14px} .team-members li{padding:8px 0;border-top:1px solid var(--line);gap:8px}.team-edit{margin-top:12px}.team-edit summary{cursor:pointer;font-weight:800;display:inline-flex;gap:6px;align-items:center} .mode-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px} .mode-grid form{display:contents} .mode-screens summary{cursor:pointer;font-weight:800;padding:6px 0} .mode-screen-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-top:8px} .mode-hook{margin:14px 0 10px}.mode-hook h3{font-size:15px;margin:0 0 6px}.mode-hook .row{gap:8px;margin:4px 0} .z-coral{--z:var(--bad-soft);--zi:var(--bad)} .clip-pick{position:relative;border-radius:12px;overflow:hidden;background:#2b333e;cursor:crosshair;user-select:none;touch-action:none;max-width:720px} .clip-pick img{display:block;width:100%;pointer-events:none} .clip-pick .clip-box{position:absolute;border:2px solid var(--brand);background:rgba(124,196,174,.16);box-shadow:0 0 0 9999px rgba(0,0,0,.42);pointer-events:none} .clip-pick.portrait{max-width:360px} .webrow .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px} .webrow .meta .pill{padding:3px 10px;font-size:12px} .webrow .stt{display:grid;justify-items:end;gap:4px;text-align:right} .webrow .stt small{color:var(--ink-3);font-weight:700;font-size:12.5px} /* ---------- playlists ---------- */ .pls{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px} .plc{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:14px 14px 18px;display:grid;gap:14px;cursor:pointer;transition:transform .15s,box-shadow .15s} .plc:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)} .plc .strip{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:6px;border-radius:16px;overflow:hidden} .plc .strip .thumb{border-radius:0} .plc .strip .thumb:first-child{grid-row:1/3;aspect-ratio:auto;height:100%} .plc .strip .thumb .tt{font-size:12cqw} .plc .strip .thumb:not(:first-child) .tt,.plc .strip .thumb:not(:first-child) .ts{display:none} .plc h3{font-size:18px;padding:0 4px} .plc .meta{display:flex;gap:6px;flex-wrap:wrap;padding:0 4px} .plc .meta .pill{padding:4px 10px;font-size:12.5px} .plc .meta .pill.z{background:var(--sky);color:var(--sky-ink)} /* playlist editor: timeline (B's idea in C's look) */ .pl-grid{grid-template-columns:minmax(0,1fr) 380px} .tl{padding:18px 20px 20px} .tl-h{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap} .tl-h h3{font-size:17px;flex:1} .tl-h .pill{background:var(--heather);color:var(--heather-ink)} .ruler{position:relative;height:22px;font-size:12px;font-weight:800;color:var(--ink-3);font-variant-numeric:tabular-nums} .ruler span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap} .ruler span::after{content:"";position:absolute;left:50%;top:17px;width:1.5px;height:6px;border-radius:2px;background:var(--line)} .ruler span.first{transform:none} .ruler span.first::after{left:0} .track-wrap{position:relative;margin-top:4px} .track{display:flex;gap:6px;height:128px} .blk{position:relative;min-width:58px;border-radius:16px;overflow:hidden;background:var(--surface-2);display:flex;flex-direction:column;cursor:pointer;box-shadow:inset 0 0 0 2.5px transparent;transition:box-shadow .15s,opacity .15s} .blk .thumb{border-radius:0;aspect-ratio:auto;flex:1;min-height:0} .blk .thumb .tt{font-size:max(11px,9cqw)} .blk .thumb .ts{display:none} .blk .lbl{display:flex;justify-content:space-between;gap:6px;padding:6px 9px;font-size:12.5px;font-weight:800;background:var(--surface-2);white-space:nowrap;overflow:hidden} .blk .lbl span:first-child{overflow:hidden;text-overflow:ellipsis} .blk .lbl span:last-child{color:var(--ink-3)} .blk:hover{box-shadow:inset 0 0 0 2.5px color-mix(in srgb,var(--heather-ink) 40%,transparent)} .blk.sel{box-shadow:0 0 0 2.5px var(--heather-ink)} .blk.sel .lbl{background:var(--heather);color:var(--heather-ink)} .blk.sel .lbl span:last-child{color:var(--heather-ink)} .blk.off{opacity:.42} .blk.off::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(0,0,0,.08) 10px 20px);pointer-events:none} .playhead{position:absolute;top:-30px;bottom:-8px;width:3px;margin-left:-1.5px;border-radius:3px;background:var(--heather-ink);pointer-events:none;z-index:4} .playhead::before{content:"";position:absolute;top:-4px;left:50%;width:14px;height:14px;transform:translateX(-50%);border-radius:50%;background:var(--heather-ink);box-shadow:0 0 0 3px var(--surface)} .livec{padding:18px} .livec .tv{margin:10px 10px 0} .ctl{display:flex;align-items:center;gap:12px;margin-top:22px} .ctl .round{width:46px;height:46px;background:var(--heather-ink);color:var(--surface);box-shadow:none} .ctl .round.sm{width:38px;height:38px;background:var(--surface-2);color:var(--ink-2)} .ctl .tc{white-space:nowrap;font-weight:900;font-variant-numeric:tabular-nums;font-size:15px} .ctl .cur{margin-left:auto;font-weight:800;color:var(--heather-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .prog{margin-top:14px} .prog i{position:relative;overflow:hidden;cursor:pointer} .prog i b{position:absolute;inset:0 auto 0 0;background:var(--heather-ink);border-radius:inherit} .prog i.off{opacity:.35} .slide{grid-template-columns:auto auto 132px minmax(0,1fr) auto auto auto} .slide .type{display:flex;gap:6px;flex-wrap:wrap} .slide.off{opacity:.55} .slide.sel{box-shadow:inset 0 0 0 2.5px var(--heather-ink),var(--shadow)} .whenb{border:0;cursor:pointer} .whenb.lim{background:var(--sand);color:var(--sand-ink)} .when-p{grid-column:1/-1;display:none;border-top:1px dashed var(--line);margin:4px -6px 0 0;padding:14px 4px 4px;gap:14px} .slide.open .when-p{display:grid} .when-p .wr{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .when-p .wr>b{width:84px;font-weight:800;color:var(--ink-2);font-size:14px} .days{display:flex;gap:6px;flex-wrap:wrap} .days button{width:44px;height:38px;border-radius:13px;border:0;background:var(--surface-2);font-weight:800;font-size:13px;color:var(--ink-2)} .days button.on{background:var(--heather);color:var(--heather-ink);box-shadow:inset 0 0 0 2px var(--heather-ink)} .when-p input{border:0;border-radius:13px;background:var(--surface-2);padding:9px 12px;font-weight:800;color:var(--ink);outline:0} .picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-height:52vh;overflow:auto;padding:4px} .pick{position:relative;display:grid;gap:8px;padding:8px;border-radius:18px;background:var(--surface-2);cursor:pointer;font-weight:800;font-size:13.5px} .pick .thumb{border-radius:12px} .pick span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px} .pick input{position:absolute;right:14px;top:14px;width:22px;height:22px;accent-color:var(--heather-ink);margin:0} .pick:has(input:checked){background:var(--heather);box-shadow:inset 0 0 0 2.5px var(--heather-ink)} /* ---------- players ---------- */ .code-in{display:flex;gap:8px;justify-content:center;align-items:center} .code-in input{width:52px;height:64px;border-radius:16px;border:0;background:var(--surface-2);text-align:center;font-size:28px;font-weight:900;text-transform:uppercase;color:var(--ink);outline:0;box-shadow:inset 0 0 0 1.5px var(--line)} .code-in input:focus{box-shadow:inset 0 0 0 2.5px var(--peach-ink);background:var(--surface)} .code-in i{width:10px} .hw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} .hw .card{display:grid;gap:12px;align-content:start} .hw h3{font-size:18px} .hw .facts{display:flex;gap:6px;flex-wrap:wrap} .hw .facts .pill{padding:4px 10px;font-size:12.5px} .hw .art{height:92px;border-radius:18px;display:grid;place-items:center;background:var(--z)} /* ---------- guide ---------- */ .gsteps{display:grid;gap:12px} .gstep{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:18px;align-items:center;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:18px 22px} .gstep .n{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;font-weight:900;font-size:20px;background:var(--surface-2);color:var(--ink-3)} .gstep h3{font-size:18px} .gstep p{font-weight:600;color:var(--ink-2);margin-top:4px} .gstep.done{box-shadow:none;background:transparent;border:2px dashed var(--line)} .gstep.done .n{background:var(--ok-soft);color:var(--ok)} .gstep.done h3{color:var(--ink-3)} .gstep.done p{display:none} .gstep.cur{box-shadow:inset 0 0 0 2.5px var(--sage-ink),var(--shadow-lg)} .gstep.cur .n{background:var(--sage-ink);color:var(--surface)} .gstep .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} /* ---------- news ---------- */ .news{display:grid;gap:16px;max-width:860px} .nitem{display:grid;grid-template-columns:120px minmax(0,1fr);gap:22px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:22px 24px} .nitem .ver{display:grid;align-content:start;gap:6px} .nitem .ver b{font-size:22px;font-weight:900} .nitem .ver span{color:var(--ink-3);font-weight:700;font-size:13.5px} .nitem h2{font-size:19px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .nitem p{font-weight:600;color:var(--ink-2);margin-top:8px;line-height:1.55} .nitem.unseen{box-shadow:inset 0 0 0 2.5px var(--peach-ink),var(--shadow)} .newdot{font-size:12px;font-weight:900;background:var(--peach);color:var(--peach-ink);border-radius:999px;padding:2px 9px} /* ---------- help ---------- */ .help-hero{border-radius:var(--r-xl);background:var(--sky);padding:30px 34px;display:grid;gap:18px;position:relative;overflow:hidden} .help-hero h2{font-size:30px;max-width:60%} .help-hero .search{max-width:640px;padding:14px 22px;font-size:16px;box-shadow:var(--shadow)} .help-hero .chips{display:flex;gap:8px;flex-wrap:wrap} .help-hero .chip{background:var(--surface)} .help-hero svg.ill{position:absolute;right:30px;top:20px;width:190px} .hnav{position:sticky;top:76px;display:grid;gap:2px;padding:14px;max-height:calc(100vh - 100px);overflow:auto} .hnav a{padding:8px 12px;border-radius:13px;font-weight:700;font-size:14px;color:var(--ink-2)} .hnav a:hover{background:var(--surface-2);color:var(--ink)} .hnav a.on{background:var(--sky);color:var(--sky-ink);font-weight:800} .art{scroll-margin-top:80px} .art+.art{margin-top:16px} .art h2{font-size:21px;margin-bottom:10px} .prose{font-weight:600;color:var(--ink-2);line-height:1.6} .prose p+p,.prose p+ol,.prose p+ul,.prose ol+p,.prose ul+p{margin-top:10px} .prose strong{color:var(--ink);font-weight:800} .prose ol,.prose ul{margin:8px 0 0;padding-left:22px} .prose li+li{margin-top:5px} .art .rel{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} .art .rel a{font-size:13px;font-weight:800;background:var(--sky);color:var(--sky-ink);border-radius:999px;padding:5px 12px} .contact{border-radius:var(--r-xl);background:var(--peach);padding:24px 28px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:16px} .contact h3{font-size:19px} .contact .bub{background:var(--surface);width:52px;height:52px} .contact .sp{flex:1} .contact .btn:not(.primary){background:var(--surface);box-shadow:none} mark{background:var(--note);color:inherit;border-radius:4px;padding:0 2px} /* help drawer */ .drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--surface);box-shadow:var(--shadow-lg);z-index:85;transform:translateX(105%);visibility:hidden;transition:transform .25s,visibility .25s;display:flex;flex-direction:column} .drawer.show{transform:none;visibility:visible} .drawer-h{display:flex;align-items:center;gap:12px;padding:20px 22px 12px} .drawer-h h2{font-size:21px;flex:1} .drawer .search{margin:0 22px 8px;background:var(--surface-2);box-shadow:none} .drawer-b{flex:1;overflow:auto;padding:12px 22px 26px} .drawer-b h3{font-size:19px;margin:6px 0 10px} .help-needs{background:var(--surface-2);border-radius:14px;padding:10px 14px;margin:0 0 12px}.help-needs b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);margin-bottom:4px}.help-needs ul{margin:0;padding-left:20px} .help-next{margin-top:8px} .drawer-b h4{font-size:15px;margin:18px 0 6px}.drawer-b p{margin:0 0 10px;line-height:1.5}.drawer-b ul,.drawer-b ol{margin:0 0 10px;padding-left:22px;line-height:1.5}.drawer-b li{margin-bottom:5px} .drawer-b kbd,.help-public kbd{display:inline-block;padding:1px 7px;border-radius:6px;background:var(--surface-2);box-shadow:inset 0 -1.5px 0 var(--line-2);font:700 12.5px/1.5 inherit} .drawer-b .rel{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px} .drawer-b .rel a{font-size:13px;font-weight:800;background:var(--sky);color:var(--sky-ink);border-radius:999px;padding:5px 12px;cursor:pointer} .drawer-b .res a{display:block;padding:10px 12px;border-radius:14px;font-weight:800;cursor:pointer} .drawer-b .res a:hover{background:var(--surface-2)} .drawer-f{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:10px} /* ---------- settings / profile ---------- */ .role-seg{display:inline-flex} .rolepill{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:6px 10px 6px 13px;font-weight:800;font-size:13px;background:var(--z);color:var(--zi);cursor:pointer} .rolepill svg.i{width:14px;height:14px} .r-admin{--z:var(--heather);--zi:var(--heather-ink)} .r-editor{--z:var(--sky);--zi:var(--sky-ink)} .r-viewer{--z:var(--surface-2);--zi:var(--ink-2)} .sub-trial{border-radius:var(--r-xl);background:var(--mint);padding:24px;display:grid;gap:16px} .sub-trial .btn:not(.primary){background:var(--surface);box-shadow:none} .miss{background:var(--surface);border-radius:18px;padding:14px 16px} .miss b{display:block;font-weight:900;margin-bottom:8px} .miss a{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--warn);background:var(--warn-soft);border-radius:999px;padding:4px 12px;font-size:13.5px;margin:0 6px 6px 0} .danger-card{box-shadow:inset 0 0 0 2px var(--bad-soft),var(--shadow)} .keybox{border-radius:20px;background:var(--ok-soft);padding:18px 20px;display:grid;gap:12px} .keybox code{display:block;font:800 15px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface);border-radius:14px;padding:12px 14px;word-break:break-all;user-select:all} .keybox b{font-weight:900;color:var(--ok)} .prof-h{display:flex;align-items:center;gap:18px;margin-bottom:20px} .prof-h .avatar{width:72px;height:72px;font-size:26px;border-radius:24px} .prof-h h2{font-size:24px} .prof-h p{color:var(--ink-3);font-weight:700} .idrow{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:18px;background:var(--surface-2)} .idrow .lg{width:40px;height:40px;border-radius:13px;background:var(--surface);display:grid;place-items:center;flex:none} .idrow b{display:block;font-weight:900} .idrow small{color:var(--ink-3);font-weight:700} .idrow .sp{flex:1} .idrow+.idrow{margin-top:8px} .mfa-status{display:flex;align-items:center;gap:16px;padding:18px;border-radius:20px;background:var(--z)} .mfa-status .bub{width:52px;height:52px;border-radius:18px;background:var(--surface)} .mfa-status b{font-size:17px;font-weight:900;display:block} .qr{width:200px;height:200px;border-radius:20px;background:#fff;padding:14px;margin:0 auto;box-shadow:inset 0 0 0 1.5px var(--line)} .qr svg{width:100%;height:100%} .secret{font:800 16px ui-monospace,Menlo,monospace;letter-spacing:.08em;text-align:center;background:var(--surface-2);border-radius:14px;padding:10px;margin-top:12px} .stepper{display:flex;gap:8px;margin-bottom:20px} .stepper i{flex:1;height:6px;border-radius:9px;background:var(--surface-2)} .stepper i.on{background:var(--brand)} .codes{display:grid;grid-template-columns:1fr 1fr;gap:8px;counter-reset:c} .codes code{font:800 15px ui-monospace,Menlo,monospace;background:var(--surface-2);border-radius:13px;padding:10px 12px;letter-spacing:.06em} .codes code::before{counter-increment:c;content:counter(c) ".";color:var(--ink-3);margin-right:8px;font-size:12px} /* ---------- auth ---------- */ .auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)} .auth-art{background:var(--sand);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:40px 48px} .auth-art h2{font-size:40px;max-width:480px;margin-top:40px} .auth-art svg.ill{width:min(560px,100%);align-self:center} .auth-art .brand{font-size:24px} .auth-side{display:grid;place-items:center;padding:40px 24px;position:relative} .auth-card{width:min(420px,100%);display:grid;gap:18px} .auth-card h1{font-size:32px} .help-public{line-height:1.55;font-weight:600}.help-public p{margin:0 0 12px}.help-public ul,.help-public ol{margin:0 0 12px;padding-left:20px}.help-public li{margin-bottom:4px}.help-public h4{font-size:16px;margin:20px 0 6px} .auth-card .brand{display:none} .prov{display:grid;gap:10px} .prov .btn{justify-content:flex-start;padding:13px 20px;width:100%} .prov .btn svg{width:20px;height:20px;flex:none} .or{display:flex;align-items:center;gap:14px;color:var(--ink-3);font-weight:800;font-size:14px} .or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)} .auth-foot{display:grid;gap:8px;justify-items:start} .auth-foot a{font-weight:800;color:var(--brand)} .auth-card .btn.primary,.auth-card .auth-step>.btn{width:100%;padding:15px} .linkbtn{border:0;background:transparent;font-weight:800;color:var(--brand);padding:0;justify-self:start} .auth-theme{position:absolute;top:20px;right:20px} .otp{display:flex;gap:8px} .otp input{flex:1;min-width:0;height:64px;border-radius:16px;border:0;background:var(--surface-2);text-align:center;font-size:26px;font-weight:900;color:var(--ink);outline:0} .otp input:focus{box-shadow:inset 0 0 0 2.5px var(--brand);background:var(--surface)} .auth-step{display:none;gap:18px} .auth-step.on{display:grid} .mail-art{width:96px;height:96px;border-radius:30px;background:var(--sky);color:var(--sky-ink);display:grid;place-items:center} .mail-art svg.i{width:44px;height:44px} /* ---------- chat widget ---------- */ .chat-fab{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:14px 22px 14px 16px;background:var(--brand);color:var(--brand-ink);font-weight:900;font-size:15px;box-shadow:0 10px 28px -6px color-mix(in srgb,var(--brand) 60%,transparent)} .chat-fab .bub{width:34px;height:34px;border-radius:12px;background:color-mix(in srgb,var(--brand-ink) 18%,transparent);color:inherit} .chat-fab:hover{background:var(--brand-hover)} .chat{position:fixed;right:24px;bottom:24px;z-index:61;width:380px;max-width:calc(100vw - 32px);height:min(600px,calc(100vh - 110px));background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;transform-origin:bottom right;transform:scale(.6);opacity:0;pointer-events:none;transition:transform .2s,opacity .2s} .chat.show{transform:none;opacity:1;pointer-events:auto} .chat-h{background:var(--brand);color:var(--brand-ink);padding:18px 18px 16px;display:flex;align-items:center;gap:12px} .chat-h .faces{display:flex} .chat-h .faces .avatar{width:38px;height:38px;font-size:13px;box-shadow:0 0 0 2.5px var(--brand)} .chat-h .faces .avatar+.avatar{margin-left:-10px;background:var(--sky);color:var(--sky-ink)} .chat-h b{display:block;font-weight:900;font-size:16.5px} .chat-h small{display:flex;align-items:center;gap:6px;font-weight:700;font-size:13px;opacity:.9} .chat-h small i{width:8px;height:8px;border-radius:50%;background:#9fe0b8} .chat-h .x{margin-left:auto;width:38px;height:38px;border-radius:50%;border:0;background:color-mix(in srgb,var(--brand-ink) 15%,transparent);color:inherit;display:grid;place-items:center} .chat-m{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:10px;background:var(--bg)} .chat-m .msg{max-width:82%;padding:11px 15px;border-radius:20px;font-weight:600;line-height:1.45;font-size:14.5px} .chat-m .msg.them{background:var(--surface);border-bottom-left-radius:7px;box-shadow:var(--shadow);align-self:flex-start} .chat-m .msg.me{background:var(--brand);color:var(--brand-ink);border-bottom-right-radius:7px;align-self:flex-end} .chat-m .who{font-size:12px;font-weight:800;color:var(--ink-3);margin:4px 6px -4px} .chat-m .who.r{align-self:flex-end} .chat-m .typing{display:flex;gap:4px;padding:14px 16px} .chat-m .typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:blink 1s infinite} .chat-m .typing i:nth-child(2){animation-delay:.2s}.chat-m .typing i:nth-child(3){animation-delay:.4s} .chat-f{display:flex;gap:8px;align-items:flex-end;padding:12px;border-top:1px solid var(--line);background:var(--surface)} .chat-f textarea{flex:1;border:0;border-radius:18px;background:var(--surface-2);padding:11px 14px;resize:none;outline:0;font-weight:600;min-height:46px;max-height:120px;line-height:1.4} .chat-f .round{width:46px;height:46px;background:var(--brand);color:var(--brand-ink);box-shadow:none;flex:none} /* ---------- mobile bottom nav + sheet ---------- */ .bnav,.sheet{display:none} .scrim2{position:fixed;inset:0;background:rgba(20,26,34,.35);z-index:74;opacity:0;pointer-events:none;transition:opacity .2s} .scrim2.show{opacity:1;pointer-events:auto} /* ---------- responsive ---------- */ @media (max-width:1280px){ .screens{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-main,.pl-grid{grid-template-columns:minmax(0,1fr) 340px} .hw{grid-template-columns:1fr 1fr} } @media (max-width:1080px){ .grid-main,.pl-grid,.grid2,.grid-side{grid-template-columns:minmax(0,1fr)} .hnav{position:static;max-height:none;grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto} .stats{grid-template-columns:repeat(2,minmax(0,1fr))} .aside{position:static} .auth{grid-template-columns:1fr} .auth-art{display:none} .auth-card .brand{display:flex} .help-hero svg.ill{display:none} .help-hero h2{max-width:none} } @media (max-width:860px){ .app{grid-template-columns:minmax(0,1fr);background:none} .side{display:none!important} .main{padding:18px 16px 130px} .top h1{font-size:26px} .top .pill.trial-pill{display:none} .bnav{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;position:fixed;left:0;right:0;bottom:0;z-index:65;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(0,0,0,.08);padding:8px 8px calc(8px + env(safe-area-inset-bottom))} .bnav a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 2px;font-size:11.5px;font-weight:800;color:var(--ink-2);border-radius:16px;cursor:pointer} .bnav a .bub{width:44px;height:32px;border-radius:12px} .bnav a.on{color:var(--ink)} .bnav a.on .bub{box-shadow:0 0 0 2px var(--zi)} .sheet{display:block;position:fixed;left:0;right:0;bottom:0;z-index:75;background:var(--surface);border-radius:28px 28px 0 0;box-shadow:var(--shadow-lg);padding:10px 16px calc(96px + env(safe-area-inset-bottom));transform:translateY(105%);visibility:hidden;transition:transform .25s,visibility .25s;max-height:85vh;overflow:auto} .sheet.show{transform:none;visibility:visible} .sheet .grab{width:44px;height:5px;border-radius:9px;background:var(--line);margin:0 auto 14px} .sheet .sh-acct{display:flex;align-items:center;gap:12px;padding:12px;border-radius:20px;background:var(--surface-2);margin-bottom:12px} .sheet .sh-acct b{display:block;font-weight:900} .sheet .sh-acct small{color:var(--ink-3);font-weight:700} .sheet .sh-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .sheet .sh-grid a{display:flex;align-items:center;gap:10px;padding:10px;border-radius:18px;background:var(--surface-2);font-weight:800;font-size:14px;min-width:0} .sheet .sh-grid a .bub{width:36px;height:36px} .sheet .sh-grid a .count{margin-left:auto;font-size:11.5px;font-weight:900;background:var(--peach);color:var(--peach-ink);border-radius:999px;padding:1px 7px} .sheet .pgroup{padding:14px 4px 6px} .chat-fab{right:16px;bottom:92px;padding:0;width:56px;height:56px;justify-content:center} .chat-fab .lbl{display:none} .chat-fab .bub{background:transparent} .chat{right:8px;left:8px;bottom:84px;width:auto;max-width:none;height:calc(100vh - 160px)} .toast{bottom:100px} .hero{grid-template-columns:minmax(0,1fr)} .hello{padding:24px;min-height:0} .hello h2,.hello .big{max-width:none} .hello h2{font-size:28px} .hello .ill{position:static;width:70%;max-width:260px;align-self:center;order:-1;margin-bottom:-8px} .lower{grid-template-columns:minmax(0,1fr)} .steps{grid-template-columns:1fr} .slide{grid-template-columns:auto 96px minmax(0,1fr) auto;gap:10px;padding:10px} .slide .no{display:none} .slide .dur{grid-column:2/4;justify-self:start} .slide .more{grid-column:4;grid-row:2} .slide .tog{grid-column:4;grid-row:1} .pl-head,.s-head{padding:20px} .pl-name{font-size:24px} .s-head h1{font-size:24px} .track{height:104px} .tl{padding:16px 14px} .webrow{grid-template-columns:110px minmax(0,1fr);gap:12px} .webrow .stt{grid-column:1/-1;justify-items:start;text-align:left;grid-auto-flow:column;align-items:center;justify-content:start;gap:10px} .webrow>.icon-btn{position:absolute;right:12px;top:12px} .webrow{position:relative} .drop{flex-wrap:wrap;padding:20px} .drop .field{margin-left:0;width:100%} .gstep{grid-template-columns:44px minmax(0,1fr);padding:16px} .gstep .n{width:44px;height:44px;border-radius:15px} .gstep .acts{grid-column:1/-1;justify-content:flex-start} .nitem{grid-template-columns:1fr;gap:10px;padding:18px} .nitem .ver{grid-auto-flow:column;justify-content:start;align-items:baseline;gap:10px} .help-hero{padding:22px} .help-hero h2{font-size:24px} .sched-axis,.sched-row{grid-template-columns:96px minmax(0,1fr)} .sched-row .nm .thumb{display:none} .hw{grid-template-columns:1fr} .frow,.frow.half{grid-template-columns:1fr} .tbl table,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%} .tbl thead{display:none} .tbl tr{padding:12px 14px;border-top:1px solid var(--line)} .tbl tr:first-child{border-top:0} .tbl td{border:0;padding:4px 0;display:flex;justify-content:space-between;align-items:center;gap:12px} .tbl td[data-l]::before{content:attr(data-l);color:var(--ink-3);font-weight:800;font-size:13px} .tbl td.r{justify-content:flex-end} .tbl tr:hover td{background:none} .auth-side{padding:28px 16px} .modal{padding:22px;border-radius:24px} .code-in input{width:42px;height:56px;font-size:24px} } @media (max-width:560px){ .screens,.screens.big{grid-template-columns:1fr} .stats{grid-template-columns:1fr 1fr} .stat{padding:12px;gap:10px} .stat .bub{display:none} .trial-top{gap:14px} .ring{width:84px;height:84px} .files{grid-template-columns:1fr 1fr;gap:10px} .file .fm{opacity:1} .pls{grid-template-columns:1fr} .codes{grid-template-columns:1fr} .tabs{display:flex} .tabs a{padding:8px 13px;font-size:14px} .pl-head .pl-acts{width:100%} .s-head .acts{width:100%} } .sched-row .nm .thumb .tt,.sched-row .nm .thumb .ts,.sched-row .nm .thumb .lines,.sched-row .nm .thumb .box{display:none} /* compact sidebar so all groups + subpages fit at 900px height */ .side .nav a{padding:5px 10px} .side .bub{width:34px;height:34px;border-radius:12px} .side .bub svg.i{width:18px;height:18px} .side .nav-sep{margin:6px 10px} .side .sub a{padding:6px 12px} .side .sub{margin-left:27px} .side .brand{padding-bottom:10px} .side-foot{padding:10px 12px} .field .otp input,.field .code-in input{font-size:26px;font-weight:900;text-align:center;padding:0;height:64px;border-radius:16px} .field .code-in input{width:52px;flex:none} .tl{overflow:hidden} @media (max-width:860px){.track{gap:4px}.blk{min-width:34px;border-radius:12px}.blk .lbl{padding:5px 6px;justify-content:center}.blk .lbl span:first-child{display:none}.blk .thumb .tt{display:none}} @media (max-width:1080px){.folders{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;padding:8px;scrollbar-width:none}.folders h3{display:none}.folders a .n{margin-left:6px}} @media (max-width:560px){.file .meta .pill:nth-child(3),.file .meta .pill:nth-child(2):not(:last-child){display:none}.file h3{font-size:14px}} /* ===== the app's own parts ===== */ [hidden]{display:none!important} .sprite{position:absolute;width:0;height:0;overflow:hidden} .skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:100;background:var(--surface);border-radius:999px;padding:8px 16px;font-weight:800;box-shadow:var(--shadow)} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} a{color:inherit} .main{width:100%} .side .nav a .count{flex:none} .sub a.dis{cursor:default} .sub a{color:var(--ink-2)} .side-foot>span:nth-child(2){display:grid;flex:1;text-align:left} .top h1{min-width:0;overflow-wrap:anywhere} .small{font-size:13.5px} .lead-text{font-weight:700;color:var(--ink-2)} /* theme switch: light / dark / auto in one pill (the mockup's round toggle, with "auto" kept) */ .theme-switch{display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow);flex:none} .theme-switch button{width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--ink-3);display:grid;place-items:center;padding:0} .theme-switch button:hover{color:var(--ink)} .theme-switch button[aria-pressed=true]{background:var(--surface-2);color:var(--ink)} .theme-switch button:focus-visible{outline:2px solid var(--brand);outline-offset:1px} .theme-switch svg.i{width:18px;height:18px} /* "view as customer" from NemDisplay's backend: read-only, always visible */ .view-as-bar{position:sticky;top:0;z-index:66;display:flex;align-items:center;justify-content:center;gap:14px;padding:8px 16px;background:var(--warn-soft);color:var(--warn);font-weight:800;flex-wrap:wrap} .view-as-bar form{margin:0} .view-as-bar .btn{background:var(--surface);box-shadow:none} /* guide bar on the page the current step points to */ .guide-bar{margin-bottom:22px} .guide-bar .gb-text{min-width:0;flex:1 1 280px;font-weight:700} .guide-bar .row{gap:8px} /* account popover, sheet: forms behave like their links */ .pop form{margin:0} .pop .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pop button.pl[aria-current]{cursor:default} .sheet .sh-who{flex:1;min-width:0} .sheet .sh-who b,.sheet .sh-who small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sheet .sh-grid form{margin:0;display:contents} .sheet .sh-grid button{display:flex;align-items:center;gap:10px;padding:10px;border-radius:18px;background:var(--surface-2);font-weight:800;font-size:14px;min-width:0;border:0;text-align:left;color:var(--ink)} .sheet .sh-grid button .bub{width:36px;height:36px} .sheet .sh-grid a.on{box-shadow:inset 0 0 0 2px var(--zi,var(--ink-3))} /* toast: flash message from the server and nd.toast() */ .toast.toast-error svg.i{color:var(--bad)} .toast.toast-ok svg.i{color:var(--ok)} :root[data-theme=dark] .toast.toast-ok svg.i{color:#3e9b66} .toast svg.i{width:18px;height:18px;flex:none} /* modal content built from