/* qeyet Classic (regular tier) — dev web UI.
   Palette and type scale follow the approved mockup (landing.html). */
:root{
  --bg:#f6f9f7; --ink:#12302b; --mut:#5b716c; --teal:#0f766e; --teal2:#14b8a6;
  --pale:#e3f3ec; --line:#d6e6df; --card:#fff;
  --amber:#e0a526; --amberbg:#fff8e6; --amberline:#f2dca0;
  --red:#b91c1c; --redbg:#fef2f2; --redline:#fecaca;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal)}
.wrap{max-width:960px;margin:0 auto;padding:24px 16px 64px}
.wrap.narrow{max-width:520px}
header.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
header.top h1{font-size:20px;margin:0}
header.top .brand{font-weight:700;letter-spacing:-.01em}
header.top nav{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap;font-size:14px}
header.top nav a{text-decoration:none;color:var(--mut)}
header.top nav a[aria-current="page"]{color:var(--ink);font-weight:600}

.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;margin-bottom:18px}
.card h2{margin:0 0 4px;font-size:18px}
.card p.sub{margin:0 0 18px;color:var(--mut);font-size:14px}

label{display:block;font-size:13px;font-weight:600;margin:0 0 6px}
input[type=text],input[type=password],input[type=email],select{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:15px;background:#fff;color:var(--ink);margin-bottom:14px;
}
input:focus,select:focus,button:focus,a:focus{outline:2px solid var(--teal2);outline-offset:2px}

button,.btn{
  font:inherit;font-size:14px;font-weight:600;padding:11px 16px;border-radius:10px;
  border:1px solid var(--teal);background:var(--teal);color:#fff;cursor:pointer;
  text-decoration:none;display:inline-block;line-height:1.2;
}
button.secondary,.btn.secondary{background:#fff;color:var(--ink);border-color:var(--line)}
button.danger{background:#fff;color:var(--red);border-color:var(--redline)}
button:disabled{opacity:.55;cursor:not-allowed}
.btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.msg{font-size:14px;border-radius:10px;padding:10px 12px;margin:12px 0;display:none}
.msg.show{display:block}
.msg.err{background:var(--redbg);border:1px solid var(--redline);color:var(--red)}
.msg.ok{background:var(--pale);border:1px solid var(--line);color:var(--teal)}
.msg.info{background:#f4f7f6;border:1px solid var(--line);color:var(--mut)}

/* --- tabs --------------------------------------------------------------- */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:20px}
.tabs [role=tab]{
  background:none;border:none;border-bottom:3px solid transparent;color:var(--mut);
  padding:10px 14px;border-radius:0;font-weight:600;font-size:14px;
}
.tabs [role=tab][aria-selected=true]{color:var(--ink);border-bottom-color:var(--teal)}
[role=tabpanel][hidden]{display:none}

/* --- honest line -------------------------------------------------------- */
.honest{background:var(--amberbg);border:1px solid var(--amberline);border-radius:var(--radius);padding:12px 16px;font-size:14px;margin:0 0 20px}

/* --- storage banner ----------------------------------------------------- */
.banner{background:var(--amberbg);border:1px solid var(--amberline);border-radius:var(--radius);padding:14px 16px;margin-bottom:16px;font-size:14px}
.banner.red{background:var(--redbg);border-color:var(--redline)}
.banner .head{font-weight:600;margin-bottom:6px}
.banner .note{color:var(--mut);font-size:12.5px}
.meter{height:8px;background:#e9eeec;border-radius:9px;margin:10px 0;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--amber);border-radius:9px;transition:width .3s}
.banner.red .meter i{background:var(--red)}
.banner .btns{margin-top:10px}

/* --- lists -------------------------------------------------------------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
td.mono,code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.tag{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--pale);color:var(--teal)}
.tag.off{background:#f1f4f3;color:var(--mut)}
.badge{display:inline-block;font-size:12px;font-weight:600;padding:5px 11px;border-radius:99px}
.badge.secure{background:var(--teal);color:#fff}
.badge.standard{background:#eef2f1;color:var(--ink);border:1px solid var(--line)}

.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.kv{font-size:14px}
.kv dt{font-weight:600;margin-top:10px}
.kv dd{margin:2px 0 0;color:var(--mut);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;word-break:break-all}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
details{margin-top:10px}
summary{cursor:pointer;font-weight:600;font-size:14px}

@media (max-width:400px){
  .wrap{padding:16px 12px 48px}
  .card{padding:18px;border-radius:16px}
  .tabs [role=tab]{padding:10px 9px;font-size:13px}
  header.top nav{gap:10px;font-size:13px}
}

/* --- calendar ------------------------------------------------------------ */
/* The calendar screen shares the login/inbox palette and spacing. */
.cal-grid{margin-top:16px}
.cal-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-head div{
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--mut);text-align:center;padding:6px 0;
}
.cal-cell{
  min-height:74px;border:1px solid var(--line);border-radius:10px;padding:6px;
  cursor:pointer;background:var(--card);transition:border-color .15s,box-shadow .15s;
}
.cal-cell.empty{border-color:transparent;background:transparent;cursor:default}
.cal-cell[data-day]:hover{border-color:var(--teal);box-shadow:0 0 0 2px var(--pale)}
.cal-cell.today{background:var(--pale);border-color:var(--teal)}
.cal-day{font-size:12px;font-weight:600;color:var(--mut)}
.cal-cell.today .cal-day{color:var(--teal)}
.cal-event{
  display:block;font-size:11.5px;font-weight:600;background:var(--teal);color:#fff;
  border-radius:6px;padding:2px 6px;margin-top:3px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}
#event-list{list-style:none;margin:0;padding:0}
#event-list li{padding:12px 0;border-bottom:1px solid var(--line)}
#event-list li:last-child{border-bottom:none}
#event-editor textarea{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:15px;margin-bottom:14px;resize:vertical;
}

/* --- rooms (Spaces / chat / calls) --------------------------------------- */
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-top:4px}
.inline-form input,.inline-form select{flex:1;min-width:140px;margin-bottom:0}
.inline-form button{flex:0 0 auto}
.room-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:12px;
}
.room-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between}
.room-head strong{font-size:16px}
.room-card ul{list-style:none;margin:12px 0 0;padding:0}
.room-card ul li{padding:7px 0;border-top:1px solid var(--line);font-size:14px}
#call-list .room-card{margin-top:12px}
/* The not-E2E warning reuses the banner tone, at the same radius. */
.banner.amber{
  background:var(--amberbg);border-color:var(--amberline);color:#8a6100;
  border-radius:var(--radius);padding:10px 14px;margin:10px 0;font-size:14px;
}

/* --- captcha (Classic signup) -------------------------------------------- */
.captcha-box{
  border:1px solid var(--line);border-radius:10px;background:#fafcfb;
  padding:14px;margin:4px 0 16px;min-height:78px;
  display:flex;flex-direction:column;gap:8px;justify-content:center;
}
.captcha-box .captcha-note{font-size:12.5px;color:var(--mut);margin:0}
.captcha-box[data-state="pending"] .captcha-note{color:var(--mut)}
.captcha-box[data-state="error"] .captcha-note{color:var(--red)}
.captcha-fallback{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mut)}
/* The `hidden` attribute must win over the display rule above. */
.captcha-fallback[hidden]{display:none}
.captcha-fallback .box{
  width:22px;height:22px;border:2px solid var(--mut);border-radius:4px;flex:0 0 auto;
}

@media (max-width:560px){
  .cal-row{gap:3px}
  .cal-cell{min-height:54px;padding:4px;border-radius:8px}
  .cal-day{font-size:11px}
  .cal-event{font-size:10.5px;padding:1px 4px}
  .cal-head div{font-size:10.5px;padding:4px 0}
  .inline-form input,.inline-form select,.inline-form button{flex:1 1 100%}
}