:root{
  --bg:#030506; --panel:rgba(255,255,255,.06); --card:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.14); --txt:#f4f7fb; --mut:#9aa7bd;
  --acc:#cfddd3; --acc2:#9fc0ab; --green:#4ade80;
  --glass:linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,.05) 45%,rgba(255,255,255,.09));
  --bevel:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.25),inset 1px 0 0 rgba(255,255,255,.1),inset -1px 0 0 rgba(255,255,255,.07);
  --vol:0 0 70px rgba(215,230,220,.06),0 24px 60px rgba(0,0,0,.5),0 4px 16px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
body{
  margin:0;color:var(--txt);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1050px 640px at -12% 6%,rgba(216,230,220,.08),transparent 62%),
    radial-gradient(1150px 720px at 113% 24%,rgba(202,218,208,.07),transparent 62%),
    radial-gradient(950px 620px at 88% 109%,rgba(222,234,224,.06),transparent 62%),
    radial-gradient(760px 520px at 6% 96%,rgba(212,226,216,.05),transparent 62%),
    var(--bg);
  min-height:100vh;-webkit-font-smoothing:antialiased;
}
body::before{ /* organic glass blobs bleeding from the edges */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(44vmax 34vmax at 12% 20%,rgba(222,234,224,.055),transparent 70%),
    radial-gradient(48vmax 38vmax at 90% 28%,rgba(210,224,214,.05),transparent 70%),
    radial-gradient(42vmax 36vmax at 80% 90%,rgba(226,238,230,.05),transparent 70%),
    radial-gradient(36vmax 30vmax at 8% 84%,rgba(214,228,218,.045),transparent 70%);
  filter:blur(50px);
}
.hidden{display:none!important}
::selection{background:rgba(215,230,220,.35)}
.btn{border-radius:16px;padding:11px 20px;font-weight:700;border:1px solid var(--line);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;box-shadow:var(--bevel),0 10px 26px rgba(0,0,0,.4);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:.18s;position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 45%);pointer-events:none}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn.primary{background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(214,226,218,.88));color:#0b1020;border-color:rgba(255,255,255,.6);box-shadow:var(--bevel),0 16px 44px rgba(220,235,225,.16)}
.btn.ghost{color:#fff}
.link{background:none;border:0;color:var(--mut);cursor:pointer;text-decoration:underline;box-shadow:none}
.link::before{display:none}
.mark{width:26px;height:26px;display:inline-grid;place-items:center;background:linear-gradient(135deg,#fff,#cfdccf);color:#0b1020;border-radius:8px;font-weight:900;box-shadow:var(--bevel)}
.mark-img{width:30px;height:30px;border-radius:10px;object-fit:cover;display:inline-block;box-shadow:0 6px 16px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.2)}
.gate{min-height:100vh;display:grid;place-items:center;padding:20px;position:relative;z-index:1}
.gate-card{max-width:500px;width:100%;background:var(--glass);border:1px solid var(--line);border-radius:30px;padding:40px 34px;text-align:center;box-shadow:var(--bevel),var(--vol);backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%);position:relative;overflow:hidden}
.gate-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.2),transparent 35%);pointer-events:none}
.gate-card .brand{justify-content:center}
.gate-card h1{margin:18px 0 8px;font-size:30px;letter-spacing:-.02em;color:#fff}
.gate-card p{color:#b7c2d4}
.gate-card a{color:#fff}
.mut{color:var(--mut);font-size:13px}
.app{display:grid;grid-template-columns:264px 1fr;min-height:100vh;position:relative;z-index:1}
.side{border-right:1px solid var(--line);padding:16px 14px;display:flex;flex-direction:column;gap:8px;background:rgba(255,255,255,.04);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.side-top{display:flex;gap:10px;align-items:center}
.side-top button{background:rgba(255,255,255,.08);border:1px solid var(--line);color:#fff;border-radius:12px;padding:7px 11px;cursor:pointer;box-shadow:var(--bevel)}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:#fff;font-weight:800}
.compose{margin:10px 0;border-radius:16px}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav button{background:none;border:1px solid transparent;color:#c3cede;text-align:left;padding:10px 12px;border-radius:14px;cursor:pointer;display:flex;justify-content:space-between;transition:.15s;box-shadow:none}
.side nav button::before{display:none}
.side nav button.active,.side nav button:hover{background:rgba(255,255,255,.1);color:#fff;border-color:var(--line);box-shadow:var(--bevel)}
.side nav i{color:var(--acc2);font-style:normal;font-weight:800}
.label{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.16em;margin:12px 4px 2px}
.foot{margin-top:auto;color:var(--mut);font-size:12px}
.main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;gap:10px;padding:14px;border-bottom:1px solid var(--line);align-items:center;background:rgba(255,255,255,.03);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.topbar input{flex:1;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:16px;padding:11px 18px;color:#fff;box-shadow:inset 0 2px 8px rgba(0,0,0,.35),var(--bevel);outline:none}
.topbar input::placeholder{color:#7c8aa0}
.topbar input:focus{border-color:rgba(215,230,220,.45)}
.topbar button{background:rgba(255,255,255,.08);border:1px solid var(--line);color:#fff;border-radius:14px;padding:9px 14px;cursor:pointer;box-shadow:var(--bevel)}
.topbar button::before{display:none}
#session{font-size:12px;color:var(--mut)}
.cols{display:grid;grid-template-columns:350px 1fr;flex:1;min-height:0}
.list{border-right:1px solid var(--line);overflow:auto;padding:10px}
.list-head{display:flex;justify-content:space-between;padding:8px 10px;color:#fff;font-weight:700}
.list-head span{color:var(--mut);font-weight:400}
.thread{padding:13px 14px;cursor:pointer;display:flex;gap:11px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:18px;margin-bottom:8px;box-shadow:var(--bevel);transition:.15s;position:relative;overflow:hidden}
.thread::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 40%);pointer-events:none}
.thread:hover{background:rgba(255,255,255,.09);transform:translateY(-1px)}
.thread.unread{border-left:3px solid var(--acc2)}
.thread .av{width:36px;height:36px;border-radius:12px;background:#223047;display:grid;place-items:center;font-size:12px;font-weight:800;flex:none;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 14px rgba(0,0,0,.4)}
.thread b{display:block;font-size:14px;color:#fff}.thread small{color:#8b98ad}
.read{padding:18px;overflow:auto}
.msg{border:1px solid var(--line);border-radius:24px;padding:18px;background:var(--glass);box-shadow:var(--bevel),var(--vol);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);position:relative;overflow:hidden}
.msg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 30%);pointer-events:none}
.msg h3{color:#fff;margin:10px 0}
.msg p{color:#d5deea;line-height:1.6;position:relative}
.msg .mut{color:#8b98ad}
.msg-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;position:relative}
.msg-actions button{background:rgba(255,255,255,.08);border:1px solid var(--line);color:#fff;border-radius:999px;padding:7px 14px;cursor:pointer;box-shadow:var(--bevel);transition:.15s}
.msg-actions button:hover{background:rgba(255,255,255,.15)}
.sig{font-family:ui-monospace,monospace;font-size:12px;color:#a5f3c8;background:rgba(4,20,12,.7);border:1px solid rgba(74,222,128,.3);border-radius:14px;padding:12px;margin-top:12px;white-space:pre-wrap;position:relative}
.panel{padding:24px;max-width:780px}
.panel h2{color:#fff;letter-spacing:-.01em}
.panel label{color:#b7c2d4}
.row{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap}.row.end{justify-content:flex-end}
.row input,.panel input,.modal-card input,.modal-card textarea{background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:14px;padding:11px 14px;color:#fff;flex:1;min-width:160px;box-shadow:inset 0 2px 8px rgba(0,0,0,.35);outline:none}
.row input:focus,.panel input:focus,.modal-card input:focus,.modal-card textarea:focus{border-color:rgba(215,230,220,.45)}
.contact{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:18px;padding:12px;margin:8px 0;box-shadow:var(--bevel)}
.contact b{color:#fff}.contact small{color:#8b98ad}
.contact .av{width:34px;height:34px;border-radius:12px;background:#223047;display:grid;place-items:center;font-weight:800;color:#fff}
.modal{position:fixed;inset:0;background:rgba(2,4,8,.65);display:grid;place-items:center;padding:16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:50}
.modal-card{background:linear-gradient(150deg,rgba(40,48,66,.92),rgba(13,18,28,.94));border:1px solid rgba(255,255,255,.2);border-radius:26px;padding:22px;width:min(640px,94vw);box-shadow:var(--bevel),var(--vol);position:relative;overflow:hidden}
.modal-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 32%);pointer-events:none}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;position:relative}
.modal-head b{color:#fff;font-size:17px}
.modal-head button{background:rgba(255,255,255,.08);border:1px solid var(--line);color:#fff;cursor:pointer;font-size:15px;border-radius:12px;padding:5px 11px}
.modal-card label{display:block;margin:10px 0 4px;color:var(--mut);font-size:13px;position:relative}
.modal-card textarea{width:100%;position:relative}
.modal .row{position:relative}
@media(max-width:900px){.app{grid-template-columns:1fr}.side{position:fixed;z-index:10;top:0;bottom:0;left:0;right:35%;transform:translateX(-105%);transition:.25s;background:rgba(10,14,22,.92)}.side.open{transform:none}.cols{grid-template-columns:1fr}.list{max-height:38vh}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}