/* Limitless Studio Scheduling — theme adapted from the main site (studio-calendar.html) */
:root {
  --bg:#050508; --bg2:#0d1117; --surface:#111827; --surface2:#1a2332;
  --blue:#3b82f6; --blue-dim:#1d4ed8; --blue-pale:#93c5fd;
  --red:#ff3131; --green:#22c55e; --amber:#f59e0b; --text:#f1f5f9;
  --text-dim:#94a3b8; --text-mute:#64748b;
  --border:rgba(59,130,246,0.15); --border2:rgba(255,255,255,0.06);
  --radius:12px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);color:var(--text);
  font-family:'Inter','Noto Sans Thai',sans-serif;line-height:1.6;min-height:100vh;
}
a{color:var(--blue-pale);text-decoration:none;}
a:hover{color:var(--blue);}
.container{max-width:1100px;margin:0 auto;padding:0 1.5rem;}
.mono,h1,h2,h3,.brand,.btn{font-family:'Space Grotesk','Inter',sans-serif;}

/* ---- NAV ---- */
nav.top{
  position:sticky;top:0;z-index:100;
  background:rgba(5,5,8,0.88);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border2);padding:0.85rem 0;
}
nav.top .container{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;}
.brand{font-weight:700;font-size:1rem;letter-spacing:-0.01em;color:var(--text);}
.brand span{color:var(--blue);}
nav.top .links{display:flex;gap:0.35rem;align-items:center;flex-wrap:wrap;}
nav.top .links a{
  font-family:'Space Grotesk',sans-serif;font-size:0.82rem;color:var(--text-dim);
  padding:0.4rem 0.7rem;border-radius:8px;
}
nav.top .links a:hover,nav.top .links a.active{color:var(--text);background:var(--surface);}
.who{font-size:0.78rem;color:var(--text-mute);}
.who b{color:var(--text-dim);font-weight:600;}

/* ---- LAYOUT ---- */
main{padding:2.25rem 0 4rem;}
h1{font-size:clamp(1.5rem,3.5vw,2rem);font-weight:700;letter-spacing:-0.02em;margin-bottom:0.35rem;}
h1 span{color:var(--blue);}
h2{font-size:1.15rem;font-weight:600;margin:1.75rem 0 0.9rem;letter-spacing:-0.01em;}
.sub{color:var(--text-dim);font-size:0.92rem;margin-bottom:1.5rem;}
.muted{color:var(--text-mute);}
.row{display:flex;gap:1rem;flex-wrap:wrap;}
.grid{display:grid;gap:1rem;}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}

/* ---- CARDS ---- */
.card{
  background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);
  padding:1.25rem;
}
.card.pad-sm{padding:0.9rem 1rem;}
.card h3{font-size:1rem;margin-bottom:0.5rem;}
.stat{font-size:1.9rem;font-weight:700;font-family:'Space Grotesk',sans-serif;line-height:1;}
.stat-label{font-size:0.75rem;color:var(--text-mute);text-transform:uppercase;letter-spacing:0.06em;margin-top:0.35rem;}

/* ---- MENU GRID (dashboard home tiles) ---- */
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0.75rem;margin:0.5rem 0 1.75rem;}
.menu-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;
  background:var(--surface);border:1px solid var(--border2);border-radius:16px;padding:1.25rem 0.75rem;min-height:104px;
  text-decoration:none;color:var(--text);transition:border-color .15s,background .15s,transform .05s;}
.menu-tile:hover{border-color:var(--blue);background:var(--surface2);color:var(--text);}
.menu-tile:active{transform:scale(0.97);}
.mt-ic{font-size:1.9rem;line-height:1;}
.mt-lbl{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:0.92rem;text-align:center;}

/* ---- BADGES ---- */
.badge{
  display:inline-block;font-size:0.72rem;font-weight:600;font-family:'Space Grotesk',sans-serif;
  padding:0.22rem 0.6rem;border-radius:999px;letter-spacing:0.02em;border:1px solid transparent;
}
.badge.open{color:var(--green);background:rgba(34,197,94,0.12);border-color:rgba(34,197,94,0.3);}
.badge.pending{color:var(--amber);background:rgba(245,158,11,0.12);border-color:rgba(245,158,11,0.3);}
.badge.booked,.badge.accepted{color:var(--blue-pale);background:rgba(59,130,246,0.14);border-color:rgba(59,130,246,0.35);}
.badge.blocked,.badge.declined,.badge.cancelled{color:var(--text-mute);background:rgba(255,255,255,0.05);border-color:var(--border2);}
.badge.completed{color:var(--text-dim);background:rgba(255,255,255,0.05);border-color:var(--border2);}
.badge.meeting{color:#c4b5fd;background:rgba(139,92,246,0.14);border-color:rgba(139,92,246,0.35);}
.badge.role{color:var(--blue-pale);background:rgba(59,130,246,0.1);border-color:var(--border);}

/* ---- TABLES ---- */
table{width:100%;border-collapse:collapse;font-size:0.86rem;}
th,td{text-align:left;padding:0.4rem 0.6rem;border-bottom:1px solid var(--border2);vertical-align:middle;
  line-height:1.25;white-space:normal;overflow-wrap:break-word;}
/* controls & pills never wrap their own label (kept on one line) */
.table-wrap td .btn,.table-wrap td .badge,.table-wrap td .user-chip{white-space:nowrap;}
th{font-family:'Space Grotesk',sans-serif;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-mute);font-weight:600;}
tbody tr:nth-child(even) td{background:rgba(255,255,255,0.022);}
tbody tr:hover td{background:rgba(59,130,246,0.08);}
/* No inner scrollbox and no sideways scroll: the table always fits the page
   width (cells wrap), and pagination keeps it short so the page just scrolls. */
.table-wrap{overflow:visible;max-height:none;border:1px solid var(--border2);border-radius:var(--radius);}
/* live table search */
.table-search{display:flex;align-items:center;gap:0.5rem;margin:0 0 0.6rem;flex-wrap:wrap;}
.table-search input[type=search]{width:100%;max-width:340px;}
.table-search .ts-count{font-size:0.8rem;color:var(--text-mute);}
.table-empty-row td{color:var(--text-mute);font-style:italic;}
/* compact in-row controls so rows with a dropdown/buttons stay short */
.table-wrap td select,.table-wrap td input,.table-wrap td .btn{font-size:0.8rem;padding:0.25rem 0.45rem;}
.table-wrap td .btn-group{flex-wrap:nowrap;gap:0.3rem;}
/* pager under long tables */
.table-pager{display:flex;align-items:center;gap:0.6rem;justify-content:flex-end;margin:0.5rem 0 0;font-size:0.82rem;color:var(--text-mute);}
.table-pager button{appearance:none;background:var(--surface2,rgba(255,255,255,0.06));border:1px solid var(--border2);color:var(--text);border-radius:8px;padding:0.3rem 0.7rem;cursor:pointer;font-weight:600;}
.table-pager button:disabled{opacity:0.4;cursor:default;}
.table-pager .pg-info{min-width:9ch;text-align:center;}
.empty{padding:2.5rem 1rem;text-align:center;color:var(--text-mute);}

/* ---- FORMS ---- */
.form{max-width:440px;}
.form.wide{max-width:680px;}
label{display:block;font-size:0.82rem;color:var(--text-dim);margin:0.9rem 0 0.35rem;font-weight:500;}
input,select,textarea{
  width:100%;background:var(--bg2);color:var(--text);border:1px solid var(--border2);
  border-radius:9px;padding:0.6rem 0.75rem;font-family:inherit;font-size:0.92rem;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,0.15);}
textarea{min-height:90px;resize:vertical;}
.field-row{display:flex;gap:0.75rem;flex-wrap:wrap;}
.field-row > div{flex:1;min-width:140px;}
.help{font-size:0.76rem;color:var(--text-mute);margin-top:0.3rem;}

/* ---- BUTTONS ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.4rem;cursor:pointer;
  font-weight:600;font-size:0.85rem;padding:0.6rem 1.05rem;border-radius:9px;border:1px solid transparent;
  background:var(--surface2);color:var(--text);transition:background .15s,border-color .15s,opacity .15s;
}
.btn:hover{background:#22304a;color:var(--text);}
.btn.primary{background:var(--blue);color:#fff;}
.btn.primary:hover{background:var(--blue-dim);}
.btn.success{background:rgba(34,197,94,0.15);color:var(--green);border-color:rgba(34,197,94,0.35);}
.btn.success:hover{background:rgba(34,197,94,0.25);}
.btn.danger{background:rgba(255,49,49,0.12);color:var(--red);border-color:rgba(255,49,49,0.35);}
.btn.danger:hover{background:rgba(255,49,49,0.2);}
.btn.ghost{background:transparent;border-color:var(--border2);color:var(--text-dim);}
.btn.ghost:hover{background:var(--surface);color:var(--text);}
.btn.sm{padding:0.38rem 0.7rem;font-size:0.78rem;}
.btn-group{display:flex;gap:0.4rem;flex-wrap:wrap;}
.btn[disabled]{opacity:0.5;cursor:not-allowed;}

/* ---- FLASH ---- */
.flash{padding:0.8rem 1rem;border-radius:9px;margin-bottom:1rem;font-size:0.88rem;border:1px solid;}
.flash.ok{color:var(--green);background:rgba(34,197,94,0.1);border-color:rgba(34,197,94,0.3);}
.flash.err{color:var(--red);background:rgba(255,49,49,0.1);border-color:rgba(255,49,49,0.3);}
.flash.info{color:var(--blue-pale);background:rgba(59,130,246,0.1);border-color:var(--border);}

/* ---- AUTH PAGE ---- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;
  background:radial-gradient(ellipse at top,rgba(59,130,246,0.1),transparent 55%);}
.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:2rem;}
.auth-card .brand{font-size:1.3rem;display:block;text-align:center;margin-bottom:0.25rem;}
.auth-card .tagline{text-align:center;color:var(--text-mute);font-size:0.82rem;margin-bottom:1.5rem;}

/* ---- CALENDAR ---- */
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cal-grid .dow{font-size:0.72rem;color:var(--text-mute);text-transform:uppercase;letter-spacing:0.06em;
  text-align:center;padding:0.3rem 0;font-family:'Space Grotesk',sans-serif;}
.cal-cell{background:var(--bg2);border:1px solid var(--border2);border-radius:9px;min-height:92px;padding:0.4rem;
  display:flex;flex-direction:column;gap:3px;}
.cal-cell.muted-day{opacity:0.4;}
.cal-cell.today{border-color:var(--blue);}
.cal-cell .daynum{font-size:0.74rem;color:var(--text-mute);font-weight:600;}
.cal-pill{display:block;font-size:0.7rem;padding:2px 6px;border-radius:6px;border:1px solid;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cal-pill.open{color:var(--green);border-color:rgba(34,197,94,0.4);background:rgba(34,197,94,0.1);}
.cal-pill.pending{color:var(--amber);border-color:rgba(245,158,11,0.4);background:rgba(245,158,11,0.1);}
.cal-pill.booked{color:var(--blue-pale);border-color:rgba(59,130,246,0.4);background:rgba(59,130,246,0.12);}
.cal-pill.blocked{color:var(--text-mute);border-color:var(--border2);background:rgba(255,255,255,0.04);}
.cal-pill.meeting{color:#c4b5fd;border-color:rgba(139,92,246,0.4);background:rgba(139,92,246,0.12);}

/* ---- CALENDAR: mobile agenda list (hidden on desktop) ---- */
.cal-agenda{display:none;flex-direction:column;gap:0.5rem;}
.agenda-day{display:flex;gap:0.75rem;background:var(--surface);border:1px solid var(--border2);border-radius:12px;padding:0.7rem 0.85rem;}
.agenda-day.today{border-color:var(--blue);}
.agenda-date{flex:0 0 46px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  border-right:1px solid var(--border2);padding-right:0.6rem;}
.agenda-dow{font-size:0.68rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-mute);}
.agenda-num{font-size:1.5rem;font-weight:700;font-family:'Space Grotesk',sans-serif;line-height:1.1;color:var(--text);}
.agenda-mon{font-size:0.66rem;text-transform:uppercase;color:var(--text-mute);}
.agenda-items{flex:1;display:flex;flex-direction:column;gap:0.5rem;min-width:0;}
.agenda-item{display:flex;flex-wrap:wrap;align-items:center;gap:0.45rem;}
.agenda-time{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:0.86rem;color:var(--blue-pale);min-width:84px;}
.agenda-label{flex:1;min-width:120px;font-size:0.9rem;}

footer{border-top:1px solid var(--border2);padding:1.5rem 0;color:var(--text-mute);font-size:0.8rem;text-align:center;}

/* ---- MOBILE NAV TOGGLE + HOME (hidden on desktop) ---- */
.nav-toggle{display:none;background:var(--surface2);color:var(--text);border:1px solid var(--border2);
  border-radius:9px;font-size:1.3rem;line-height:1;padding:0.35rem 0.65rem;cursor:pointer;}
.nav-home{display:none;text-decoration:none;font-size:1.25rem;line-height:1;padding:0.35rem 0.55rem;
  border:1px solid var(--border2);border-radius:9px;background:var(--surface2);}

/* =========================== MOBILE =========================== */
@media(max-width:760px){
  /* Calendar: swap the 7-col grid for the agenda list */
  .cal-grid{display:none;}
  .cal-agenda{display:flex;}
  .cal-head{align-items:stretch;}
  .cal-head h2{font-size:1.05rem;}
  .cal-head .btn-group{width:100%;}
  .cal-head .btn-group .btn{flex:1;text-align:center;}

  /* Nav: a Home button + ☰ toggle always visible; links collapse */
  .nav-toggle{display:block;}
  .nav-home{display:inline-block;}
  nav.top .brand{flex:1;}   /* push Home + ☰ to the right */
  nav.top .container{flex-wrap:wrap;gap:0.5rem;}
  nav.top .links{display:none;flex-direction:column;align-items:stretch;width:100%;order:3;gap:0.15rem;margin-top:0.5rem;}
  nav.top.open .links{display:flex;}
  nav.top .links a{padding:0.7rem 0.7rem;font-size:0.95rem;border-radius:8px;}
  /* Keep the EN/ไทย switcher reachable on mobile; hide only name/role to declutter. */
  nav.top .who{display:flex;align-items:center;order:2;margin-left:auto;}
  nav.top .who > :not(.lang-switch){display:none;}
  nav.top .who .lang-switch{margin-right:0;}

  /* Bigger tap targets + readable type */
  .btn{padding:0.7rem 1rem;font-size:0.92rem;}
  .btn.sm{padding:0.5rem 0.8rem;font-size:0.85rem;}
  input,select,textarea{font-size:16px;}   /* prevents iOS zoom-on-focus */
  .grid.cols-2,.grid.cols-3{grid-template-columns:1fr;}
  h1{font-size:1.45rem;}
  main{padding:1.5rem 0 3rem;}
  .container{padding:0 1rem;}
  th,td{padding:0.6rem 0.55rem;}
  /* hint that wide tables scroll sideways */
  .table-wrap{position:relative;-webkit-overflow-scrolling:touch;}
  .profile-head .avatar{width:72px;height:72px;font-size:28px;}
  .media-grid{grid-template-columns:1fr 1fr;}
}

/* Very small screens: stacked "card" tables instead of sideways scrolling.
   .stackable is added by app.js only to uniform header/body tables. */
@media(max-width:560px){
  .table-wrap.stack-off{overflow:auto;}
  table.stackable,
  table.stackable tbody,
  table.stackable tr,
  table.stackable td{display:block;width:100%;}
  table.stackable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  table.stackable tr{
    border:1px solid var(--border2);border-radius:10px;background:var(--surface);
    margin:0 0 0.7rem;padding:0.35rem 0.6rem;
  }
  table.stackable td{
    border:none;padding:0.4rem 0;display:flex;flex-wrap:wrap;gap:0.3rem 0.6rem;justify-content:space-between;align-items:center;
    text-align:right;font-size:0.92rem;
  }
  table.stackable td+td{border-top:1px solid var(--border2);}
  table.stackable td::before{
    content:attr(data-label);text-align:left;font-size:0.74rem;font-weight:600;
    color:var(--text-mute);text-transform:uppercase;letter-spacing:0.03em;flex:0 0 30%;
  }
  /* Multi-badge cells (e.g. ROLES): group the chips on the right and let them
     wrap onto new lines instead of overflowing the card sideways. */
  table.stackable td .badge{margin:0;}
  table.stackable td:empty,
  table.stackable td[data-label=""]{display:none;}
  /* let action buttons fill the row width */
  table.stackable td .btn,table.stackable td .btn-group{flex-wrap:wrap;}
  .table-wrap:has(table.stackable){overflow:visible;border:none;max-height:none;}
}

/* ---- Tabbed sections (auto-built from [data-autotabs] headings) ---- */
.tabbar{display:flex;gap:0.25rem;flex-wrap:wrap;margin:0 0 1rem;border-bottom:1px solid var(--border,rgba(255,255,255,0.1));padding-bottom:0;overflow-x:auto;}
.tabbar .tab{appearance:none;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text-mute);
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:0.9rem;padding:0.55rem 0.9rem;cursor:pointer;white-space:nowrap;border-radius:8px 8px 0 0;}
.tabbar .tab:hover{color:var(--text);background:rgba(255,255,255,0.03);}
.tabbar .tab.active{color:var(--blue,#3b82f6);border-bottom-color:var(--blue,#3b82f6);}
.tabbar .tab .count{display:inline-block;min-width:18px;margin-left:0.4rem;padding:1px 6px;border-radius:10px;
  font-size:0.72rem;background:var(--surface2,rgba(255,255,255,0.08));color:var(--text-mute);}
.tabbar .tab.active .count{background:var(--blue,#3b82f6);color:#fff;}
.tabpane[hidden]{display:none;}
.tabpane-title.tabbed{display:none;}   /* heading is replaced by its tab */
@media(max-width:560px){
  .tabbar .tab{padding:0.5rem 0.6rem;font-size:0.85rem;}
}

/* ---- Push-enable banner ---- */
.push-banner{display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap;margin:0 0 1rem;padding:0.6rem 0.9rem;
  background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.35);border-radius:10px;font-size:0.9rem;}
.push-banner .btn{margin-left:auto;}
.push-banner .btn+.btn{margin-left:0.4rem;}

/* ---- Clickable calendar events (link to the session page) ---- */
a.cal-pill{text-decoration:none;cursor:pointer;display:block;}
a.cal-pill:hover{filter:brightness(1.2);}
a.agenda-item{text-decoration:none;color:inherit;cursor:pointer;}
a.agenda-item:hover{background:var(--surface2,rgba(255,255,255,0.05));}

/* ---- Date + 24-hour time inputs (slot forms) ---- */
.dt-row{display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;}
.dt-row input[type="date"]{flex:1 1 9rem;min-width:8rem;}
.time24{flex:0 0 5.5rem;width:5.5rem;text-align:center;letter-spacing:0.05em;font-variant-numeric:tabular-nums;}

/* ---- Language switcher ---- */
.lang-switch{display:inline-flex;gap:2px;border:1px solid var(--border2);border-radius:7px;overflow:hidden;margin-right:0.5rem;vertical-align:middle;}
.lang-switch a{padding:0.15rem 0.5rem;font-size:0.74rem;font-weight:600;text-decoration:none;color:var(--text-mute);}
.lang-switch a.on{background:var(--blue,#3b82f6);color:#fff;}

/* ---- Legal pages (privacy / terms) ---- */
.legal{max-width:760px;padding:2.5rem 1.5rem 4rem;line-height:1.7;}
.legal h1{margin:0 0 0.3rem;}
.legal h2{font-size:1.08rem;margin:1.8rem 0 0.4rem;}
.legal ul{padding-left:1.2rem;}
.legal li{margin:0.25rem 0;}
.legal .legal-back{margin:0.3rem 0 1.2rem;}
.legal a{color:var(--blue,#3b82f6);}
.consent{display:flex;gap:0.5rem;align-items:flex-start;margin:0.8rem 0 0.2rem;font-size:0.86rem;font-weight:400;line-height:1.5;}
.consent input{width:auto;margin-top:0.2rem;flex:0 0 auto;}
.danger-zone{border:1px solid rgba(239,68,68,0.5);border-radius:var(--radius,12px);padding:1rem 1.1rem;margin-top:1.5rem;}
.danger-zone h3{color:#ef4444;margin:0 0 0.4rem;}
.btn.danger{background:#ef4444;border-color:#ef4444;color:#fff;}
.btn.danger:hover{background:#dc2626;}

/* ---- Avatars & profile ---- */
.avatar{border-radius:50%;object-fit:cover;vertical-align:middle;background:var(--surface);display:inline-block;}
.avatar-fallback{display:inline-flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:600;color:#fff;background:linear-gradient(135deg,#3b82f6,#6366f1);line-height:1;}
.user-chip{display:inline-flex;align-items:center;gap:0.4rem;}
.user-chip .avatar{flex:0 0 auto;}
.user-link{color:inherit;text-decoration:none;border-bottom:1px dashed rgba(255,255,255,0.25);}
.user-link:hover{color:var(--blue,#3b82f6);border-bottom-color:currentColor;}
.profile-head{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;margin-bottom:1.25rem;}
.profile-head .avatar{width:96px;height:96px;font-size:38px;flex:0 0 auto;}
.profile-head h1{margin:0;}
.social-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0.4rem;}
.social-list a{color:var(--blue,#3b82f6);text-decoration:none;}
.social-list .ic{display:inline-block;width:1.4rem;}
.avatar-edit{display:flex;gap:1rem;align-items:center;margin:0.4rem 0 0.6rem;}

/* ---- Profile media gallery ---- */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0.8rem;margin-top:0.4rem;}
.media-item{margin:0;display:flex;flex-direction:column;gap:0.3rem;}
.media-thumb{width:100%;height:150px;object-fit:cover;border-radius:10px;border:1px solid var(--border2);display:block;background:var(--surface);}
.media-video{width:100%;border-radius:10px;border:1px solid var(--border2);background:#000;max-height:220px;}
.media-embed{position:relative;width:100%;padding-top:56.25%;border-radius:10px;overflow:hidden;border:1px solid var(--border2);}
.media-embed iframe{position:absolute;inset:0;width:100%;height:100%;}
.media-linkcard{display:flex;align-items:center;justify-content:center;height:150px;border:1px dashed var(--border2);border-radius:10px;color:var(--blue,#3b82f6);text-decoration:none;background:var(--surface);}
.media-item figcaption{font-size:0.8rem;color:var(--text-dim);}
.share-link{display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;}
.share-link input{flex:1;min-width:220px;font-size:0.82rem;}

/* ---- Grouped list views ---- */
.group-picker{display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;margin:0 0 1rem;}
.group-picker select{width:auto;min-width:150px;}
.group-heading{margin:1.4rem 0 0.5rem;padding-bottom:0.3rem;border-bottom:1px solid var(--border,rgba(255,255,255,0.1));font-size:1.02rem;}
.group-heading:first-of-type{margin-top:0.4rem;}

/* ---- Roles & permissions ---- */
.perm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0.4rem 1rem;margin-top:0.3rem;}
.perm-opt{display:flex;align-items:center;gap:0.4rem;margin:0;font-weight:500;font-size:0.9rem;}
.perm-opt input{width:auto;}

/* ---- Notifications bell + feed ---- */
.nav-bell{position:relative;font-size:1.2rem;text-decoration:none;margin-left:0.4rem;}
.nav-bell .nbadge{position:absolute;top:-6px;right:-8px;background:#ef4444;color:#fff;font-size:0.62rem;font-weight:700;line-height:1;padding:2px 4px;border-radius:10px;min-width:14px;text-align:center;}
.notif-list{display:flex;flex-direction:column;gap:0.4rem;}
.notif{display:flex;gap:0.7rem;align-items:flex-start;padding:0.7rem 0.9rem;border:1px solid var(--border,rgba(255,255,255,0.1));border-radius:10px;background:var(--surface,#15151c);text-decoration:none;color:inherit;}
.notif.unread{border-left:3px solid var(--blue,#3b82f6);background:rgba(59,130,246,0.07);}
.notif .n-ic{font-size:1.1rem;}
.notif .n-body{display:flex;flex-direction:column;gap:2px;}
.notif .n-time{font-size:0.74rem;color:var(--text-mute,#888);}
a.notif:hover{border-color:var(--blue,#3b82f6);}
/* ---- Announcements on the dashboard ---- */
.announce-feed{display:flex;flex-direction:column;gap:0.6rem;margin-bottom:1.5rem;}
.card.announce{border-left:4px solid var(--blue,#3b82f6);}
.card.announce.pinned{border-left-color:#f59e0b;}
.card.announce .a-head{display:flex;justify-content:space-between;gap:0.5rem;flex-wrap:wrap;align-items:baseline;}
.card.announce .a-body{margin-top:0.4rem;}