/* Rotiera prototype: shared brand tokens and parts */
@font-face{font-family:Satoshi;src:url(fonts/Satoshi-Variable.woff2) format("woff2");font-weight:300 900;font-display:swap}
:root{--paper:#f6f3ee;--paper2:#efebe4;--white:#fff;--ink:#141217;--ink2:#6a6672;--ink3:#a7a3ad;--rule:#e6e1d9;--rule2:#f0ece6;
 --rose:#f0466e;--rose-t:#ffe3ea;--green:#12865a;--green-t:#e0f4ea;--amber:#b86a00;--amber-t:#fdf0d9;--red:#c42d48;--red-t:#fde4e8;
 --dawn:#f7a35c;--sun:#f2c440;--sky:#4f9cf0;--mint:#2fb98f;--dusk:#8a6cf0;
 --ease:cubic-bezier(.2,.85,.25,1);--out:cubic-bezier(.16,1,.3,1);
 --sh1:0 1px 2px rgba(20,18,23,.05),0 10px 30px -14px rgba(20,18,23,.16);--sh2:0 2px 6px rgba(20,18,23,.06),0 30px 70px -20px rgba(20,18,23,.38)}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:500 15px/1.45 Satoshi,system-ui,sans-serif;font-feature-settings:"tnum" 1;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
svg.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mono{font:600 12.5px ui-monospace,Menlo,monospace;letter-spacing:0}

/* wordmark */
.wm{font-weight:900;letter-spacing:-.055em;line-height:1;display:inline-flex;align-items:baseline}
.wm .i{position:relative;display:inline-block}
.wm .i::after{content:'';position:absolute;left:50%;top:.07em;width:.19em;height:.19em;margin-left:-.095em;border-radius:50%;background:var(--rose)}

/* app bar */
.bar{position:sticky;top:0;z-index:30;background:rgba(246,243,238,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.bar .in{max-width:1400px;margin:0 auto;padding:0 32px;height:64px;display:flex;align-items:center;gap:18px}
.branch{display:flex;align-items:center;gap:9px;height:38px;padding:0 12px;border-radius:12px;font-weight:700;font-size:14px}
.branch:hover{background:var(--paper2)}.branch i{width:10px;height:10px;border-radius:3px}
.tabs{display:flex;gap:2px}
.tabs a{height:38px;padding:0 14px;border-radius:12px;display:flex;align-items:center;font-size:14px;font-weight:600;color:var(--ink2)}
.tabs a:hover{color:var(--ink);background:var(--paper2)}.tabs a.on{color:var(--ink);background:var(--white);box-shadow:0 1px 2px rgba(20,18,23,.06)}
.search{margin-left:auto;display:flex;align-items:center;gap:10px;width:300px;height:40px;padding:0 12px;border-radius:12px;background:var(--white);color:var(--ink3);font-size:14px;box-shadow:inset 0 0 0 1px var(--rule)}
.search kbd{margin-left:auto;font:700 11px Satoshi;border:1px solid var(--rule);border-radius:6px;padding:1px 6px;color:var(--ink3)}
.ib{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--ink2);position:relative}.ib:hover{background:var(--paper2);color:var(--ink)}
.ib .dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--rose);border:2px solid var(--paper)}
.me{width:36px;height:36px;border-radius:50%;object-fit:cover}

/* buttons */
.btn{height:42px;padding:0 18px;border-radius:30px;background:var(--ink);color:#fff;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:8px;transition:transform .15s,background .2s,opacity .2s;white-space:nowrap}
.btn:hover{background:#2a2730}.btn:active{transform:scale(.96)}
.btn.g{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--rule)}.btn.g:hover{background:var(--paper2)}
.btn.s{height:34px;padding:0 14px;font-size:13px}
.btn.r{background:transparent;color:var(--red)}.btn.r:hover{background:var(--red-t)}
.btn:disabled{opacity:.3;pointer-events:none}

/* people */
.av{border-radius:50%;object-fit:cover;flex:none;display:inline-grid;place-items:center;font-weight:800;color:var(--ink);overflow:hidden}
.lbl{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.tag{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:20px;font-size:12px;font-weight:700;background:var(--paper2);color:var(--ink2);white-space:nowrap}
.drawer b .tag{justify-self:start}
.tag.g{background:var(--green-t);color:var(--green)}.tag.a{background:var(--amber-t);color:var(--amber)}.tag.r{background:var(--red-t);color:var(--red)}.tag.n{background:var(--rose-t);color:#b3264c}

/* the line */
.now-dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--rose);animation:pulse 2.4s infinite;z-index:3}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(240,70,110,.45)}70%,100%{box-shadow:0 0 0 12px rgba(240,70,110,0)}}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(20,18,23,.26);opacity:0;pointer-events:none;transition:opacity .3s;z-index:50}
.drawer{position:fixed;top:10px;right:10px;bottom:10px;width:460px;max-width:calc(100% - 20px);background:var(--white);border-radius:26px;box-shadow:var(--sh2);z-index:51;transform:translateX(calc(100% + 20px));transition:transform .45s var(--out);display:flex;flex-direction:column;overflow:hidden;visibility:hidden}
body.d-on .scrim{opacity:1;pointer-events:auto}body.d-on .drawer{transform:none;visibility:visible}
.modal{position:fixed;left:50%;top:50%;width:min(620px,calc(100% - 24px));max-height:calc(100% - 40px);overflow:auto;background:var(--white);border-radius:28px;box-shadow:var(--sh2);z-index:51;transform:translate(-50%,-47%) scale(.97);opacity:0;pointer-events:none;transition:all .35s var(--out)}
body.m-on .scrim{opacity:1;pointer-events:auto}body.m-on .modal{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);opacity:0;background:var(--ink);color:#fff;border-radius:16px;padding:12px 16px;font-weight:600;font-size:14px;display:flex;gap:12px;align-items:center;z-index:60;transition:all .4s var(--out);pointer-events:none}
.toast.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}.toast button{color:#ffb3c4;font-weight:700}

@media (max-width:1250px){.search{width:40px;padding:0;justify-content:center;font-size:0;gap:0}.search kbd{display:none}.branch{white-space:nowrap}.tabs a{padding:0 11px}}
@media (max-width:900px){
 .bar .in{padding:0 14px;gap:6px}.bar .btn .t{display:none}.bar .btn{padding:0 12px}.bar .me{width:32px;height:32px}.branch{padding:0 8px;font-size:13.5px}.tabs,.search{display:none}.branch{margin-right:auto}
 .modal{left:0;right:0;top:auto;bottom:0;width:auto;max-height:92vh;border-radius:26px 26px 0 0;transform:translateY(100%);opacity:1}body.m-on .modal{transform:none}
 .drawer{top:auto;left:0;right:0;bottom:0;width:auto;max-width:none;height:88vh;border-radius:26px 26px 0 0;transform:translateY(100%)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}