/* Paramount Mail - Gmail-style UI. Light + dark follow the device. */
:root{--bg:#f6f8fc;--surface:#fff;--surface2:#eef2fa;--hover:#e9eef6;--sel:#c2dbff;--line:#e0e3e9;--tx:#1f1f1f;--tx2:#5f6368;--tx3:#80868b;--brand:#0b57d0;--brand-d:#0842a0;--brand-bg:#d3e3fd;--danger:#b3261e;--ok:#188038;--unread:#fff;--read:#f2f6fc;--star:#f4b400;--shadow:0 1px 3px rgba(60,64,67,.3),0 4px 8px 3px rgba(60,64,67,.15);color-scheme:light dark}
@media(prefers-color-scheme:dark){:root{--bg:#1b1c1f;--surface:#242529;--surface2:#2d2f34;--hover:#303238;--sel:#2b4a7a;--line:#3a3c42;--tx:#e8eaed;--tx2:#aab0b8;--tx3:#80868b;--brand:#8ab4f8;--brand-d:#aecbfa;--brand-bg:#2a4170;--danger:#f2b8b5;--ok:#81c995;--unread:#242529;--read:#1d1e21;--shadow:0 1px 3px rgba(0,0,0,.6),0 4px 8px 3px rgba(0,0,0,.4)}}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--tx);font:14px/1.45 "Google Sans",Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}a{color:var(--brand)}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
.ibtn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--tx2);cursor:pointer;flex:none}.ibtn:hover{background:var(--hover);color:var(--tx)}.ibtn:disabled{opacity:.4;cursor:default}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--brand);border-radius:20px;padding:9px 20px;font-weight:500;cursor:pointer}.btn:hover{background:var(--hover)}
.btn.pri{background:var(--brand);color:var(--surface);border-color:var(--brand)}.btn.pri:hover{background:var(--brand-d)}.btn.dng{color:var(--danger)}.btn.txt{border-color:transparent;background:transparent}.btn:disabled{opacity:.55;cursor:default}
.in{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:13px 14px;outline:none}.in:focus{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.lbl{display:block;font-size:12px;color:var(--tx2);margin:0 0 4px}.muted{color:var(--tx2)}.small{font-size:12px}.sp{flex:1}.hide{display:none!important}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:12px;color:var(--tx2)}.chip.live{background:#d93025;border-color:#d93025;color:#fff}.chip.ok{color:var(--ok)}
.avatar{width:32px;height:32px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font-weight:600;font-size:14px;flex:none;text-transform:uppercase}
/* ---- login (Android "add account" feel) ---- */
.auth{min-height:100%;display:grid;place-items:center;padding:20px;background:var(--bg)}
.acard{width:min(450px,100%);background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:36px 36px 28px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.acard h1{font-size:24px;font-weight:400;margin:14px 0 6px}.acard .sub{color:var(--tx2);margin:0 0 24px;font-size:16px}
.logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:500}.logo b{font-weight:600}.logo svg{width:34px;height:34px}
.acc{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:4px 12px 4px 4px;margin-bottom:18px}
.afoot{display:flex;justify-content:space-between;align-items:center;margin-top:30px;gap:10px}.err{color:var(--danger);font-size:13px;margin-top:8px;display:flex;gap:6px}
.steps{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:14px}.steps li{display:flex;gap:12px;align-items:center;color:var(--tx3)}.steps li.on{color:var(--tx)}.steps li.done{color:var(--ok)}
.spin{width:20px;height:20px;border:3px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:sp .8s linear infinite;flex:none}@keyframes sp{to{transform:rotate(360deg)}}
.srv{margin-top:18px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13px;display:grid;gap:6px}.srv div{display:flex;justify-content:space-between;gap:12px}.srv span:first-child{color:var(--tx2)}
.shake{animation:sh .35s}@keyframes sh{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.chk{display:flex;align-items:center;gap:10px;margin-top:14px;color:var(--tx2);cursor:pointer}.chk input{width:18px;height:18px}
/* ---- app shell ---- */
.app{height:100%;display:flex;flex-direction:column;background:var(--bg)}
.top{display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;padding-top:max(8px,env(safe-area-inset-top))}
.top .logo{width:228px;padding-left:4px;font-size:20px}
.search{flex:1;max-width:720px;display:flex;align-items:center;background:var(--surface2);border-radius:24px;height:48px;padding:0 6px}.search input{flex:1;border:0;background:transparent;outline:none;height:100%;padding:0 6px;font-size:16px}.search:focus-within{background:var(--surface);box-shadow:var(--shadow)}
.main{flex:1;display:flex;min-height:0}
.side{width:256px;padding:6px 12px 12px 8px;overflow-y:auto;flex:none;display:flex;flex-direction:column;gap:2px}
.compose-btn{display:flex;align-items:center;gap:14px;background:var(--brand-bg);color:var(--brand-d);border:0;border-radius:16px;height:56px;padding:0 24px 0 18px;font-weight:500;font-size:14px;cursor:pointer;margin:4px 0 14px;box-shadow:0 1px 2px rgba(0,0,0,.1);width:max-content}.compose-btn:hover{box-shadow:var(--shadow)}
.nav{display:flex;align-items:center;gap:16px;height:32px;padding:0 12px 0 20px;border-radius:0 16px 16px 0;margin-left:-8px;padding-left:28px;color:var(--tx);cursor:pointer;border:0;background:transparent;text-align:left;width:calc(100% + 8px);font-size:14px}
.nav:hover{background:var(--hover)}.nav.on{background:var(--brand-bg);font-weight:700;color:var(--brand-d)}.nav .n{margin-left:auto;font-size:12px;font-weight:600}.nav .ic{width:18px;height:18px}
.sec{font-size:12px;color:var(--tx2);font-weight:600;padding:14px 12px 4px 20px;letter-spacing:.02em;text-transform:uppercase}
.pane{flex:1;min-width:0;background:var(--surface);border-radius:16px 16px 0 0;margin-right:12px;display:flex;flex-direction:column;overflow:hidden}
.tb{display:flex;align-items:center;gap:2px;padding:6px 12px 6px 8px;border-bottom:1px solid var(--line);min-height:52px}
.tb .pg{color:var(--tx2);font-size:12px;margin:0 6px 0 auto;white-space:nowrap}.tb input[type=checkbox]{width:18px;height:18px;margin:0 12px}
.list{flex:1;overflow-y:auto}
.row{display:grid;grid-template-columns:20px 28px 200px 1fr auto;align-items:center;gap:8px;padding:0 16px 0 14px;height:40px;border-bottom:1px solid var(--line);cursor:pointer;background:var(--read);font-size:14px}
.row.unread{background:var(--unread);font-weight:700}.row:hover{box-shadow:inset 1px 0 0 var(--line),inset -1px 0 0 var(--line),0 1px 2px rgba(60,64,67,.3);z-index:1;position:relative}.row.sel{background:var(--sel)}
.row .who,.row .mid{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row .mid .sn{font-weight:400;color:var(--tx2)}.row .dt{font-size:12px;color:var(--tx2);white-space:nowrap}.row.unread .dt{color:var(--tx);font-weight:700}
.star{background:none;border:0;cursor:pointer;color:var(--tx3);padding:0;display:grid;place-items:center}.star.on{color:var(--star)}.star.on .ic{fill:var(--star)}
.empty{display:grid;place-items:center;gap:8px;padding:60px 20px;color:var(--tx2);text-align:center}
.rd{flex:1;overflow-y:auto;padding:0 24px 24px}.rd h2{font-size:22px;font-weight:400;margin:18px 0 12px}.rd .hd{display:flex;gap:12px;align-items:flex-start;margin:6px 0 14px}.rd .hd .avatar{width:40px;height:40px}
.rd iframe{width:100%;border:0;min-height:120px;background:#fff;border-radius:8px;color-scheme:light}.rd pre{white-space:pre-wrap;word-break:break-word;font:inherit}
.banner{background:var(--surface2);border-radius:8px;padding:8px 12px;display:flex;gap:10px;align-items:center;margin:8px 0}
.atts{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.att{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:8px 12px;text-decoration:none;color:var(--tx);font-size:13px}.att:hover{background:var(--hover)}
.replybar{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
/* ---- compose ---- */
.cw{position:fixed;right:24px;bottom:0;width:min(560px,calc(100vw - 16px));max-height:88vh;background:var(--surface);border-radius:12px 12px 0 0;box-shadow:var(--shadow);z-index:60;display:flex;flex-direction:column}
.cw.min .cb{display:none}.cw.max{right:8vw;left:8vw;bottom:5vh;width:auto;height:90vh;max-height:none;border-radius:12px}
.ch{display:flex;align-items:center;gap:4px;background:#404040;color:#fff;border-radius:12px 12px 0 0;padding:0 6px 0 16px;height:40px;font-weight:500;cursor:pointer}.ch .ibtn{color:#fff;width:32px;height:32px}.ch .ibtn:hover{background:rgba(255,255,255,.15)}
.cb{display:flex;flex-direction:column;min-height:0;flex:1}.cf{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding:0 16px}.cf label{color:var(--tx2);width:34px;font-size:14px}.cf input{flex:1;border:0;background:transparent;outline:none;height:38px}
.cf .lnk{font-size:13px;color:var(--tx2);cursor:pointer;border:0;background:none}.ced{flex:1;min-height:200px;overflow:auto;padding:12px 16px;outline:none}.ced:empty:before{content:attr(data-ph);color:var(--tx3)}
.cfmt{display:flex;gap:2px;padding:4px 10px;border-top:1px solid var(--line);flex-wrap:wrap}.cfmt button{border:0;background:none;border-radius:4px;padding:4px 9px;cursor:pointer;color:var(--tx2);min-width:30px}.cfmt button:hover{background:var(--hover)}
.cfoot{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}.pills{display:flex;gap:6px;flex-wrap:wrap;padding:6px 16px}.pill{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:14px;padding:2px 4px 2px 10px;font-size:12px}
/* ---- menus / dialogs / toast ---- */
.menu{position:fixed;background:var(--surface);border-radius:12px;box-shadow:var(--shadow);padding:8px 0;z-index:90;min-width:220px;max-height:70vh;overflow:auto}.menu button,.menu .mi{display:flex;width:100%;align-items:center;gap:12px;border:0;background:none;padding:9px 18px;text-align:left;cursor:pointer;color:var(--tx)}.menu button:hover{background:var(--hover)}.menu hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:80;display:grid;place-items:center;padding:16px}.dlg{background:var(--surface);border-radius:20px;padding:24px;width:min(520px,100%);max-height:92vh;overflow:auto;box-shadow:var(--shadow)}.dlg h3{margin:0 0 14px;font-size:20px;font-weight:400}.dlg .fl{display:grid;gap:14px}.dlg .ft{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;flex-wrap:wrap}
.toast{position:fixed;left:24px;bottom:24px;background:#323232;color:#fff;padding:12px 18px;border-radius:6px;z-index:200;box-shadow:var(--shadow);max-width:calc(100vw - 48px)}.toast.e{background:#8c1d18}
/* ---- pages (meet, requests) ---- */
.page{flex:1;overflow-y:auto;padding:24px 28px}.page h1{font-weight:400;font-size:26px;margin:0 0 4px}.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:20px}
.card{border:1px solid var(--line);border-radius:16px;padding:18px;background:var(--surface)}.card h3{margin:0 0 10px;font-size:16px;font-weight:500}
.rm{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}.rm:first-of-type{border-top:0}.rm .t{font-weight:500}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:14px 0}.tabs button{border:0;background:none;padding:10px 16px;cursor:pointer;color:var(--tx2);border-bottom:3px solid transparent}.tabs button.on{color:var(--brand);border-color:var(--brand);font-weight:500}
.req{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px;display:grid;gap:6px}.req .r1{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.req .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.help{background:var(--surface2);border-radius:12px;padding:12px 16px;font-size:13px;color:var(--tx2);margin:12px 0}
/* ---- meet room ---- */
.room{position:fixed;inset:0;background:#202124;color:#fff;z-index:70;display:flex;flex-direction:column}.room .stage{flex:1;display:flex;min-height:0}.vgrid{flex:1;display:grid;gap:8px;padding:12px;grid-auto-rows:1fr;min-width:0;align-content:center}
.tile{position:relative;background:#3c4043;border-radius:12px;overflow:hidden;min-height:120px}.tile .vid{position:absolute;inset:0}.tile .vid video,.tile .vid div{border-radius:12px}.tile .nm{position:absolute;left:10px;bottom:8px;background:rgba(0,0,0,.55);padding:2px 8px;border-radius:6px;font-size:13px;z-index:2}.tile .av{position:absolute;inset:0;display:grid;place-items:center}.tile .av .avatar{width:84px;height:84px;font-size:34px}
.rbar{display:flex;justify-content:center;align-items:center;gap:12px;padding:12px 12px max(14px,env(safe-area-inset-bottom));background:#202124}.rbar .ibtn{width:48px;height:48px;background:#3c4043;color:#fff}.rbar .ibtn:hover{background:#4a4d51}.rbar .ibtn.off{background:#d93025}.rbar .ibtn.on{background:#8ab4f8;color:#202124}.rbar .end{background:#d93025;width:64px;border-radius:24px}.rbar .end .ic{transform:rotate(135deg)}
.rtop{display:flex;align-items:center;gap:12px;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top))}.rside{width:340px;background:#fff;color:#1f1f1f;display:flex;flex-direction:column;margin:12px 12px 0 0;border-radius:12px;min-height:0}.rside .hd{display:flex;align-items:center;padding:10px 12px 10px 18px;font-size:18px}.rside .bd{flex:1;overflow:auto;padding:8px 18px}.rside .msg{margin:10px 0}.rside .msg b{font-size:12px}.rside .cin{display:flex;gap:8px;padding:12px;border-top:1px solid #e0e3e9}.rside .in{background:#f1f3f4;color:#1f1f1f;border-color:#e0e3e9}
.lobby{display:grid;place-items:center;flex:1;padding:20px;text-align:center}
/* ---- mobile ---- */
.menu-btn{display:none}.fab{display:none}
@media(max-width:900px){.row{grid-template-columns:20px 28px 1fr auto}.row .mid{grid-column:1/-1;grid-row:2;margin-top:-10px;padding-left:56px}.row{height:62px;align-content:center;row-gap:0}.grid2{grid-template-columns:1fr}}
@media(max-width:760px){
 .menu-btn{display:inline-grid}.top .logo{width:auto}.top .logo span.t{display:none}.pane{margin:0;border-radius:0}
 .side{position:fixed;inset:0 auto 0 0;z-index:75;background:var(--bg);transform:translateX(-105%);transition:transform .2s;width:min(300px,86vw);box-shadow:var(--shadow);padding-top:max(12px,env(safe-area-inset-top))}.side.open{transform:none}
 .side-scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:74}.compose-btn{display:none}
 .fab{display:grid;position:fixed;right:16px;bottom:max(18px,env(safe-area-inset-bottom));width:56px;height:56px;border-radius:16px;border:0;background:var(--brand-bg);color:var(--brand-d);box-shadow:var(--shadow);place-items:center;z-index:50}
 .cw,.cw.max{inset:0;width:auto;height:auto;max-height:none;border-radius:0}.cw.min{inset:auto 0 0 0;height:40px}.ch{border-radius:0;padding-top:env(safe-area-inset-top);height:calc(40px + env(safe-area-inset-top))}
 .rd{padding:0 14px 90px}.page{padding:16px 14px 90px}.acard{padding:28px 22px 22px;border-radius:24px}.tb .pg{display:none}
 .rside{position:fixed;inset:auto 0 0 0;width:auto;height:62vh;margin:0;border-radius:16px 16px 0 0;z-index:5}.search{height:42px}.toast{left:12px;right:12px;bottom:84px}
}