/* haio Studio shell — shared tokens, sidebar/tab-bar, common controls */
:root {
  --blue:#2F6BFF; --blue-soft:#EAF0FF; --blue-deep:#1E50D8;
  --navy:#151D3F; --ink:#1B2559; --body:#3B4256; --muted:#8A90A6;
  --mint:#7FE0C3; --paper:#F3F5FB; --line:#E4E8F4; --coral:#E4604E;
  --shadow:0 10px 30px rgba(21,29,63,.08);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Poppins',sans-serif; background:var(--paper); color:var(--body);
  font-size:15px; display:flex; min-height:100vh; }
::selection { background:var(--blue); color:#fff; }

/* ── Sidebar (desktop) ── */
.sidebar { width:224px; background:var(--navy); padding:20px 14px 16px; position:sticky; top:0;
  height:100vh; display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
.sidebar .logo { display:flex; align-items:center; gap:10px; padding:6px 8px 22px; }
.sidebar .logo .mark { width:34px; height:34px; background:#fff; border-radius:9px;
  display:flex; align-items:center; justify-content:center; }
.sidebar .logo img { height:22px; width:auto; }
.sidebar .logo span { color:#fff; font-size:17px; font-weight:500; }
.sidebar .logo b { font-weight:700; }
.sidebar nav { display:flex; flex-direction:column; gap:5px; }
.sidebar nav a { display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.72);
  text-decoration:none; padding:11px 12px; border-radius:11px; font-size:14px; font-weight:500; }
.sidebar nav a:hover { background:rgba(255,255,255,.08); color:#fff; }
.sidebar nav a.active { background:var(--blue); color:#fff; }
.sidebar .mascot { margin-top:auto; text-align:center; }
.sidebar .mascot img { height:76px; opacity:.92; filter:drop-shadow(0 4px 10px rgba(0,0,0,.3)); }

main.page { flex:1; min-width:0; max-width:1140px; margin:0 auto;
  padding:38px clamp(16px,3vw,36px) 110px; }
h1.pagetitle { color:var(--ink); font-size:24px; font-weight:800; margin-bottom:4px; }
.pagesub { color:var(--muted); font-size:13.5px; margin-bottom:26px; }

/* ── Shared controls ── */
label { font-size:11.5px; font-weight:600; color:var(--muted); display:block;
  margin:14px 0 5px; text-transform:uppercase; letter-spacing:1.2px; }
input[type=text], input[type=search], input[type=password], input[type=date], input[type=time],
select, textarea { border:1.5px solid var(--line); border-radius:11px; padding:11px 14px;
  font-family:inherit; font-size:14.5px; color:var(--body); background:#FBFCFE;
  transition:border-color .15s; }
input[type=text], input[type=search], textarea { width:100%; }
textarea { resize:vertical; line-height:1.55; }
input:focus, select:focus, textarea:focus { outline:2px solid transparent;
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(75,99,242,.18); }
button { background:var(--blue); color:#fff; border:none; border-radius:11px; padding:12px 24px;
  font-family:inherit; font-size:14.5px; font-weight:600; cursor:pointer;
  transition:background .15s, transform .1s; }
button:hover { background:var(--blue-deep); }
button:active { transform:translateY(1px); }
button:disabled { background:#B9C1E8; cursor:wait; transform:none; }
button:focus-visible { outline:3px solid rgba(75,99,242,.4); outline-offset:2px; }
button.ghost { background:var(--blue-soft); color:var(--blue); }
button.ghost:hover { background:#DEE4FD; }
button.mint { background:var(--mint); color:var(--navy); }
button.mint:hover { background:#65D4B2; }
.card { background:#fff; border-radius:20px; padding:26px 28px; box-shadow:var(--shadow);
  border:1px solid var(--line); }
.hidden { display:none; }

/* ── Status pills ── */
.pill { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.7px;
  padding:5px 12px; border-radius:999px; text-transform:uppercase; border:none; }
.pill.draft { background:#E8EAF3; color:#5A6280; }
.pill.ready { background:var(--blue-soft); color:var(--blue); }
.pill.scheduled { background:#FFF1DC; color:#B47A19; }
.pill.posted { background:#DFF7EE; color:#12805C; }
.pill.archived { background:#F1F1F3; color:#9AA0B4; }

/* ── Toast ── */
#toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:12px 22px; border-radius:12px; font-size:14px;
  opacity:0; transition:opacity .2s; pointer-events:none; z-index:99; max-width:86vw; }
#toast.show { opacity:1; }

/* ── Notification bell (injected by app.js on every page) ── */
#bell { position:fixed; top:18px; right:20px; z-index:80; }
#bell #bellBtn { position:relative; background:#fff; color:var(--ink); font-size:18px;
  width:44px; height:44px; padding:0; border-radius:14px; box-shadow:var(--shadow); }
#bell #bellBtn:hover { background:var(--blue-soft); }
#bell #bellDot { display:none; position:absolute; top:-5px; right:-5px; min-width:20px; height:20px;
  padding:0 5px; border-radius:999px; background:var(--coral); color:#fff; font-size:11px;
  font-weight:700; place-items:center; }
#bellPanel { display:none; position:absolute; top:52px; right:0; width:min(370px,86vw);
  background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 50px rgba(21,29,63,.22);
  overflow:hidden; }
#bell.open #bellPanel { display:block; }
#bellPanel .bhead { display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink); }
#bellPanel .bhead button { background:none; color:var(--blue); font-size:12px; padding:4px 6px; }
#bellList { max-height:min(60vh,420px); overflow-y:auto; }
#bellList a { text-decoration:none; display:block; }
#bellList .bi { display:flex; gap:11px; padding:13px 16px; border-bottom:1px solid var(--line); }
#bellList .bi:hover { background:#F7F8FC; }
#bellList .bi.unread { background:var(--blue-soft); }
#bellList .bi.unread:hover { background:#DEE4FD; }
#bellList .bico { font-size:16px; line-height:1.3; }
#bellList .bi b { display:block; color:var(--ink); font-size:13.5px; font-weight:700; line-height:1.4; }
#bellList .bi p { color:var(--body); font-size:12.5px; margin:3px 0 0; line-height:1.5;
  white-space:pre-line; }
#bellList .bi time { color:var(--muted); font-size:11px; }
#bellList .bempty { padding:30px 20px; text-align:center; color:var(--muted); font-size:13px; }

/* ── Mobile: sidebar becomes bottom tab bar ── */
@media (max-width:720px) {
  body { flex-direction:column; }
  #bell { top:auto; bottom:calc(72px + env(safe-area-inset-bottom)); right:14px; }
  #bellPanel { top:auto; bottom:52px; }
  .sidebar { width:100%; height:auto; position:fixed; bottom:0; top:auto;
    flex-direction:row; padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    z-index:60; }
  .sidebar .logo, .sidebar .mascot { display:none; }
  .sidebar nav { flex-direction:row; width:100%; justify-content:space-around; gap:0; }
  .sidebar nav a { flex-direction:column; gap:3px; font-size:10.5px; padding:7px 10px; }
  .sidebar nav a .ico { font-size:19px; }
  main.page { padding-bottom:130px; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }