/* Staff portal app chrome — built on top of /assets/theme.css tokens */

body.app{
  font-size:16px;
}

/* Wraps sidebar+main so a full-width persistent banner (emulation, etc.) can
   sit above this flex row without becoming a third flex sibling itself. */
.app-shell{
  display:flex;
  min-height:100vh;
}

/* ---------------- Role emulation ---------------- */
.emulation-banner{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  padding:.75rem 1.6rem;
  background:linear-gradient(90deg, rgba(78,232,255,0.16), rgba(78,232,255,0.06));
  border-bottom:1px solid var(--cyan-line);
  color:var(--ink);
  font-family:var(--mono); font-size:.8rem; letter-spacing:.02em;
}
.emulation-banner b{ color:var(--cyan); }
.emulation-banner form{ margin:0; }
.emulation-banner button{
  background:transparent;
  border:1px solid var(--cyan-line);
  color:var(--cyan);
  font-family:var(--mono); font-size:.74rem; letter-spacing:.05em; text-transform:uppercase;
  padding:.45rem .9rem;
  border-radius:3px;
  cursor:pointer;
  transition: all .15s ease;
}
.emulation-banner button:hover{ border-color:var(--cyan); background:rgba(78,232,255,0.08); box-shadow:0 0 12px var(--cyan-soft); }

.emulate-start{ display:flex; align-items:center; gap:.4rem; margin:.9rem 0; }
.emulate-start select{
  flex:1; min-width:0;
  background:var(--marble);
  border:1px solid var(--marble-line);
  border-radius:3px;
  color:var(--ink-dim);
  font-family:var(--mono); font-size:.72rem;
  padding:.4rem .5rem;
  cursor:pointer;
}
.emulate-start button{
  background:transparent;
  border:1px solid var(--cyan-line);
  color:var(--cyan);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;
  padding:.4rem .7rem;
  border-radius:3px;
  cursor:pointer;
  white-space:nowrap;
}
.emulate-start button:hover{ border-color:var(--cyan); background:rgba(78,232,255,0.08); }

.app-sidebar{
  position:relative;
  width:220px;
  flex:none;
  background:var(--bg-veil);
  border-right:1px solid var(--marble-line);
  padding:1.4rem 1.4rem;
  display:flex;
  flex-direction:column;
}
/* The sidebar is a tall vertical strip, so it gets the same ambient ivy
   texture as the public body background (assets/theme.css html::before)
   rather than the horizontal header/footer flourish — the pattern's own
   vine columns already flow top-to-bottom, a natural fit for a vertical
   rail without needing a rotated image. */
.app-sidebar::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url("/assets/ivy-texture.png");
  background-size:420px 420px;
  background-repeat:repeat;
  mix-blend-mode:screen;
  opacity:.07;
}
.app-sidebar > *{ position:relative; z-index:1; }
.app-brand{
  font-family:var(--serif-display);
  font-weight:700;
  font-size:1.1rem;
  color:var(--ink);
  margin-bottom:.2rem;
}
.app-brand em{ font-style:normal; color:var(--neon); }
.app-brand-sub{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.5rem;
}
.app-brand-back{
  display:inline-block;
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--muted);
  text-decoration:none;
  margin-bottom:1.2rem;
}
.app-brand-back:hover{ color:var(--neon); }
.app-nav{ display:flex; flex-direction:column; gap:.4rem; }
.nav-filter{
  width:100%;
  background:var(--marble);
  border:1px solid var(--marble-line);
  border-radius:5px;
  padding:.4rem .7rem;
  color:var(--ink);
  font-family:var(--mono);
  font-size:.76rem;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
  margin-bottom:.2rem;
}
.nav-filter:focus{ outline:none; border-color:var(--neon); box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 0 0 3px var(--neon-soft); }
.nav-filter::placeholder{ color:var(--muted); }

.nav-group{ display:flex; flex-direction:column; gap:.1rem; }
.nav-group-toggle{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  background:none; border:none; padding:.3rem .3rem 0;
  cursor:pointer;
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.nav-group-toggle:hover{ color:var(--ink-dim); }
.nav-group-chevron{ transition: transform .15s ease; }
.nav-group.collapsed .nav-group-chevron{ transform: rotate(-90deg); }
.nav-group-items{ display:flex; flex-direction:column; gap:0; }
.nav-group.collapsed .nav-group-items{ display:none; }
.nav-group.collapsed.filter-open .nav-group-items{ display:flex; }

.app-nav a{
  display:block;
  font-family:var(--mono);
  font-size:.8rem;
  letter-spacing:.03em;
  color:var(--ink-dim);
  text-decoration:none;
  padding:.38rem .7rem;
  border-radius:3px;
  border:1px solid transparent;
}
.app-nav a:hover{ color:var(--ink); background:rgba(255,255,255,0.03); }
.app-nav a .nav-icon{ display:inline-block; width:1.2em; text-align:center; filter:grayscale(1) opacity(.7); transition:filter .15s ease; }
.app-nav a:hover .nav-icon, .app-nav a.active .nav-icon{ filter:none; }
.app-nav a.active{
  color:var(--neon);
  border-color:var(--neon);
  background:rgba(255,79,160,0.06);
  animation: navGlowPulse 3s ease-in-out infinite;
}
@keyframes navGlowPulse{
  0%,100%{ box-shadow:0 0 0 rgba(255,79,160,0); }
  50%{ box-shadow:0 0 12px var(--neon-soft); }
}
@media (prefers-reduced-motion:reduce){ .app-nav a.active{ animation:none; } }
.app-user{
  margin-top:auto;
  padding-top:1.5rem;
  border-top:1px solid var(--marble-line);
  position:relative;
}
.user-menu-toggle{
  display:flex; align-items:center; gap:.8rem;
  width:100%;
  background:var(--marble);
  border:1px solid var(--marble-line);
  padding:.7rem .8rem;
  border-radius:5px;
  cursor:pointer;
  text-align:left;
  transition: border-color .15s ease, background .15s ease;
}
.user-menu-toggle:hover{ border-color:var(--gold-line); background:var(--bg-veil); }
.user-menu-avatar{ width:40px; height:40px; flex:none; font-size:1rem; margin:0; }
.user-menu-label{ min-width:0; font-family:var(--mono); font-size:.72rem; color:var(--muted); }
.user-menu-label b{
  display:block; color:var(--gold-soft); font-weight:700;
  font-family:var(--serif-body); font-size:.92rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.user-menu-dropdown{
  display:none;
  position:absolute;
  bottom:calc(100% + .5rem);
  left:0; right:0;
  background:var(--marble);
  border:1px solid var(--marble-line);
  border-radius:5px;
  padding:.6rem;
  box-shadow:0 8px 28px rgba(0,0,0,0.4);
  z-index:10;
}
.user-menu-dropdown.open{ display:flex; flex-direction:column; gap:.2rem; }
.user-menu-dropdown a{
  display:block;
  padding:.55rem .7rem;
  border-radius:3px;
  color:var(--ink-dim);
  text-decoration:none;
  font-family:var(--mono); font-size:.76rem;
}
.user-menu-dropdown a:hover{ background:rgba(255,255,255,0.04); color:var(--ink); }
.user-menu-dropdown .emulate-start{ margin:.3rem 0; padding:.5rem .3rem; border-top:1px solid var(--marble-line); border-bottom:1px solid var(--marble-line); }

.app-main{
  flex:1;
  padding:2.6rem clamp(1.5rem,4vw,3.5rem);
  max-width:920px;
}
.app-header{ margin-bottom:2.2rem; }
.app-header h1{
  font-family:var(--serif-display);
  font-weight:700;
  font-size:1.7rem;
  color:var(--ink);
  margin:0 0 .4rem;
}
.app-header p{ color:var(--ink-dim); margin:0; max-width:60ch; }

.app-flash{
  font-family:var(--mono); font-size:.8rem;
  padding:.8rem 1.1rem;
  border-radius:4px;
  margin-bottom:1.6rem;
  border:1px solid;
}
.app-flash.ok{ background:rgba(206,162,76,0.06); border-color:var(--gold-line); color:var(--gold-soft); }
.app-flash.err{ background:rgba(255,79,160,0.07); border-color:var(--neon); color:var(--neon); }

.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1rem; margin-bottom:2rem; }
.stat-card{
  position:relative; overflow:hidden;
  min-height:min-content; /* see .plate in theme.css — same overflow:hidden shrink risk */
  background:var(--marble);
  border:1px solid var(--marble-line);
  border-radius:4px;
  padding:1.2rem 1.3rem;
}
.stat-card .label{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.5rem; }
.stat-card .value{ font-family:var(--serif-display); font-size:1.4rem; color:var(--ink); }

/* ---------------- Dashboard: personal strip + team-pulse two-column grid ---------------- */
.status-strip{
  display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap;
  margin-bottom:2rem; padding-bottom:1.6rem;
  border-bottom:1px solid var(--marble-line);
}
.status-strip-item{ font-family:var(--serif-body); color:var(--ink-dim); font-size:.95rem; }
.status-strip-item b{ color:var(--ink); }

.dashboard-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; align-items:start; }
@media (max-width:860px){ .dashboard-grid{ grid-template-columns:1fr; } }
.dashboard-col{ display:flex; flex-direction:column; gap:1.6rem; }

.mini-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.7rem 0;
  border-bottom:1px solid var(--marble-line);
  font-family:var(--serif-body); color:var(--ink-dim);
}
.mini-row:last-child{ border-bottom:none; }
.mini-row-main{ min-width:0; }
.mini-row-main a{ color:var(--ink); text-decoration:none; }
.mini-row-main a:hover{ color:var(--neon); }
.mini-row-meta{ font-family:var(--mono); font-size:.7rem; color:var(--muted); text-align:right; white-space:nowrap; line-height:1.5; }

table.app-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
table.app-table th{
  text-align:left; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold); padding:.6rem .7rem; border-bottom:1px solid var(--gold-line);
}
table.app-table td{ padding:.7rem; border-bottom:1px solid var(--marble-line); color:var(--ink-dim); }
table.app-table tr:last-child td{ border-bottom:none; }
table.app-table tbody tr{ transition:background .12s ease; }
table.app-table tbody tr:hover{ background:rgba(255,255,255,0.02); }

/* ---------------- Joomla-style list toolbar ---------------- */
.toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1.4rem;
}
.toolbar-search{
  flex:1; min-width:180px; max-width:280px;
  background:var(--marble);
  border:1px solid var(--marble-line);
  border-radius:5px;
  padding:.55rem .8rem;
  color:var(--ink);
  font-family:var(--serif-body);
  font-size:.92rem;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}
.toolbar-search:focus{ outline:none; border-color:var(--neon); box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 0 0 3px var(--neon-soft); }
.toolbar-search::placeholder{ color:var(--muted); }

/* Row-level icon buttons (edit/delete), Joomla list-view style */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px;
  border-radius:5px;
  border:1px solid var(--marble-line);
  background:var(--marble);
  color:var(--ink-dim);
  cursor:pointer;
  font-size:.85rem;
  line-height:1;
  transition: all .15s ease;
  padding:0;
}
.icon-btn:hover{ border-color:var(--gold); color:var(--gold-soft); }
.icon-btn.danger:hover{ border-color:var(--neon); color:var(--neon); }
.row-actions{ display:flex; gap:.5rem; }

/* ---------------- Modal dialogs ---------------- */
dialog.modal{
  border:none;
  border-radius:8px;
  padding:0;
  background:var(--marble);
  border:1px solid var(--gold-line);
  box-shadow:0 24px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.02);
  width:min(560px, 92vw);
  color:var(--ink);
}
dialog.modal::backdrop{
  background:rgba(10,6,12,0.72);
  backdrop-filter:blur(2px);
}
dialog.modal[open]{ animation: modal-in .16s ease-out; }
@keyframes modal-in{ from{ opacity:0; transform:translateY(6px) scale(.98); } to{ opacity:1; transform:none; } }
.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem 1.5rem;
  border-bottom:1px solid var(--marble-line);
}
.modal-header h3{ font-family:var(--serif-display); font-weight:700; font-size:1.1rem; margin:0; color:var(--ink); }
.modal-close{
  background:none; border:none; color:var(--muted); font-size:1.3rem; line-height:1;
  cursor:pointer; padding:.2rem .4rem; border-radius:4px;
}
.modal-close:hover{ color:var(--neon); background:rgba(255,255,255,0.04); }
.modal-body{
  padding:1.5rem; max-height:65vh; overflow-y:auto;
  display:flex; flex-direction:column; gap:1.1rem;
}
.modal-footer{
  display:flex; justify-content:flex-end; gap:.7rem;
  padding:1.1rem 1.5rem;
  border-top:1px solid var(--marble-line);
}

/* Compact select used for a single permission's Allow/Deny/Inherit setting */
.perm-select{
  background:var(--marble);
  color:var(--ink-dim);
  border:1px solid var(--marble-line);
  border-radius:4px;
  font-family:var(--mono); font-size:.72rem;
  padding:.4rem .6rem;
  cursor:pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.perm-select:hover{ border-color:var(--gold-line); }
.perm-select:focus{ outline:none; border-color:var(--neon); box-shadow:0 0 0 3px var(--neon-soft); }
.perm-select[data-value="allow"]{ color:var(--gold-soft); border-color:var(--gold-line); }
.perm-select[data-value="deny"]{ color:var(--neon); border-color:var(--neon); }
.perm-select:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------------- Permissions: select-a-group, then a vertical list of actions ----------------
   Deliberately not a group×permission matrix — that grows a column per permission forever and
   goes unreadable past a handful of actions. This scales down the page instead of across it,
   same as Joomla's own Permissions tab (pick one group, see its actions as rows). */
.perm-layout{ display:flex; gap:1.6rem; align-items:flex-start; margin-bottom:2.6rem; }
.perm-group-nav{ width:200px; flex:none; display:flex; flex-direction:column; gap:.2rem; }
.perm-group-nav button{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  width:100%; text-align:left;
  background:none; border:1px solid transparent;
  padding:.6rem .8rem;
  border-radius:5px;
  font-family:var(--mono); font-size:.8rem;
  color:var(--ink-dim);
  cursor:pointer;
  transition: all .15s ease;
}
.perm-group-nav button:hover{ background:rgba(255,255,255,0.03); color:var(--ink); }
.perm-group-nav button.active{ color:var(--neon); border-color:var(--neon); background:rgba(255,79,160,0.06); }
.perm-group-nav button .count{ font-size:.68rem; color:var(--muted); }
.perm-group-nav button .nav-icon{ display:inline-block; width:1.1em; text-align:center; filter:grayscale(1) opacity(.75); transition:filter .15s ease; }
.perm-group-nav button:hover .nav-icon, .perm-group-nav button.active .nav-icon{ filter:none; }
.perm-panel{
  flex:1; min-width:0;
  background:var(--marble);
  border:1px solid var(--marble-line);
  border-radius:6px;
}
.perm-panel-header{
  padding:1.1rem 1.4rem;
  border-bottom:1px solid var(--marble-line);
}
.perm-panel-header h3{ font-family:var(--serif-display); font-size:1.05rem; margin:0; color:var(--ink); }
.perm-panel-header p{ margin:.3rem 0 0; font-size:.82rem; color:var(--muted); }
.perm-row{
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  padding:1rem 1.4rem;
  border-bottom:1px solid var(--marble-line);
  flex-wrap:wrap;
}
.perm-row:last-child{ border-bottom:none; }
.perm-row-info{ flex:1; min-width:200px; }
.perm-row-info .label{ font-family:var(--serif-body); font-size:1.02rem; color:var(--ink); display:block; }
.perm-row-info .desc{ font-family:var(--mono); font-size:.72rem; color:var(--muted); display:block; margin-top:.25rem; }
.perm-row-controls{ display:flex; align-items:center; gap:.8rem; flex:none; }
.calc-pill{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; text-transform:uppercase;
  padding:.3rem .7rem; border-radius:100px;
  white-space:nowrap;
}
.calc-pill.allow{ color:var(--gold-soft); box-shadow:0 0 0 1px var(--gold-line); }
.calc-pill.deny{ color:var(--neon); box-shadow:0 0 0 1px var(--neon); }
.calc-pill.unset{ color:var(--muted); box-shadow:0 0 0 1px var(--marble-line); }

@media (max-width:760px){
  .perm-layout{ flex-direction:column; }
  .perm-group-nav{ width:auto; flex-direction:row; flex-wrap:wrap; }
}

/* ---------------- Toggle switch (checkbox styled as a sliding switch) ----------------
   Used wherever a settings row is a plain on/off — Bot Admin's feature flags —
   instead of a bare checkbox, matching the app's general "not just a form" feel. */
.toggle-switch{ position:relative; display:inline-block; width:42px; height:24px; flex:none; }
.toggle-switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; }
.toggle-switch .track{ position:absolute; inset:0; background:var(--marble-line); border-radius:100px; transition:background .15s ease, box-shadow .15s ease; }
.toggle-switch .thumb{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--ink-dim); transition:transform .15s ease, background .15s ease; }
.toggle-switch input:checked ~ .track{ background:rgba(255,79,160,0.22); box-shadow:0 0 0 1px var(--neon); }
.toggle-switch input:checked ~ .thumb{ transform:translateX(18px); background:var(--neon); box-shadow:0 0 8px var(--neon-soft); }
.toggle-switch input:focus-visible ~ .track{ box-shadow:0 0 0 3px var(--neon-soft); }
.toggle-switch input:disabled ~ .track{ opacity:.5; cursor:not-allowed; }

/* ---------------- Segmented control (radio group styled as connected buttons) ----------------
   Used for Bot Admin's moderation action (Delete / Warn / Timeout) instead of a <select>. */
.segmented{ display:inline-flex; border:1px solid var(--marble-line); border-radius:5px; overflow:hidden; }
.segmented input{ position:absolute; opacity:0; width:0; height:0; }
.segmented label{
  padding:.55rem 1rem;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-dim); cursor:pointer;
  border-left:1px solid var(--marble-line);
  transition: all .15s ease;
}
.segmented label:first-of-type{ border-left:none; }
.segmented input:checked + label{ background:rgba(255,79,160,0.1); color:var(--neon); }
.segmented input:focus-visible + label{ box-shadow:inset 0 0 0 2px var(--neon-soft); }

/* ---------------- Activity feed (merged, reverse-chronological timeline) ----------------
   Bot Admin's Activity panel merges bot_audit_log + bot_moderation_log into one scannable
   feed instead of two separate raw tables. */
.activity-feed{ display:flex; flex-direction:column; }
.activity-row{ display:flex; align-items:flex-start; gap:.9rem; padding:.85rem 0; border-bottom:1px solid var(--marble-line); }
.activity-row:last-child{ border-bottom:none; }
.activity-dot{ width:8px; height:8px; border-radius:50%; margin-top:.45rem; flex:none; }
.activity-dot.ok{ background:var(--gold-soft); box-shadow:0 0 6px var(--gold-line); }
.activity-dot.warn{ background:var(--neon); box-shadow:0 0 6px var(--neon-soft); }
.activity-main{ flex:1; min-width:0; }
.activity-title{ color:var(--ink); font-family:var(--serif-body); font-size:.95rem; }
.activity-title b{ color:var(--gold-soft); font-weight:600; }
.activity-meta{ font-family:var(--mono); font-size:.7rem; color:var(--muted); margin-top:.25rem; word-break:break-word; }
.activity-time{ font-family:var(--mono); font-size:.7rem; color:var(--muted); white-space:nowrap; flex:none; }

/* ---------------- Word chip (Bot Admin moderation blocklist) ----------------
   Each blocked word is its own DB row and its own tiny delete form — removing
   one is a single-row DELETE, never a shared-textarea edit that could
   corrupt an unrelated entry. */
.word-chip-group{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1rem; }
.word-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .5rem .45rem 1rem;
  border-radius:100px;
  border:1px solid var(--marble-line);
  background:var(--marble);
  color:var(--ink-dim);
  font-family:var(--mono); font-size:.76rem;
}
.word-chip button{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px;
  border-radius:50%;
  border:none; background:none;
  color:var(--muted);
  cursor:pointer;
  font-size:.85rem; line-height:1;
  transition: all .15s ease;
}
.word-chip button:hover{ background:rgba(255,79,160,0.15); color:var(--neon); }
.word-chip-add{ display:flex; gap:.6rem; align-items:center; }
.word-chip-add input{ flex:1; }

/* ---------------- Status hero (Bot Admin connection card) ---------------- */
.status-hero{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.status-hero-left{ display:flex; align-items:center; gap:.9rem; }
.status-hero-orb{ width:14px; height:14px; border-radius:50%; flex:none; }
.status-hero-orb.on{ background:var(--neon); box-shadow:0 0 4px var(--neon), 0 0 16px var(--neon-soft); animation:pillGlowPulse 3s ease-in-out infinite; }
.status-hero-orb.off{ background:var(--muted); }
.status-hero-text .title{ font-family:var(--serif-display); font-size:1.15rem; color:var(--ink); }
.status-hero-text .sub{ font-family:var(--mono); font-size:.72rem; color:var(--muted); margin-top:.15rem; }

/* ---------------- Page-level tabs (e.g. Permissions / Groups) ---------------- */
.tab-nav{
  display:flex; flex-wrap:wrap; gap:.3rem;
  margin-bottom:1.8rem;
  border-bottom:1px solid var(--marble-line);
}
.tab-nav button, .tab-nav a{
  background:none; border:none;
  padding:.8rem 1.3rem;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition: color .15s ease, border-color .15s ease;
  text-decoration:none;
  display:inline-block;
}
.tab-nav button:hover, .tab-nav a:hover{ color:var(--ink); }
.tab-nav button.active, .tab-nav a.active{ color:var(--neon); border-bottom-color:var(--neon); }

/* ---------------- Wiki article body (rendered from markdown-lite) ---------------- */
/* Glassmorphic card behind the article, matching the .cal-wrap precedent
   from the Schedule calendar — long-form text otherwise sits directly on
   the animated circuit-grid body backdrop, which bleeds through and hurts
   readability on real articles. */
.wiki-body-card{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, rgba(37,31,42,0.55), rgba(28,20,32,0.72));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border:1px solid var(--marble-line);
  border-radius:6px;
  padding:1.8rem 2rem;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.25);
}
@media (max-width:640px){ .wiki-body-card{ padding:1.4rem; } }
.wiki-body h1{ font-family:var(--serif-display); font-weight:700; font-size:1.55rem; color:var(--ink); margin:2rem 0 .9rem; }
.wiki-body h1:first-child{ margin-top:0; }
.wiki-body h2{ font-family:var(--serif-display); font-weight:700; font-size:1.3rem; color:var(--ink); margin:1.8rem 0 .8rem; }
.wiki-body h2:first-child{ margin-top:0; }
.wiki-body h3{ font-family:var(--serif-display); font-weight:700; font-size:1.05rem; color:var(--ink); margin:1.4rem 0 .6rem; }
.wiki-body p{ color:var(--ink-dim); margin:0 0 1rem; max-width:70ch; line-height:1.7; }
.wiki-body ul, .wiki-body ol{ margin:0 0 1rem; padding-left:1.3rem; color:var(--ink-dim); max-width:70ch; }
.wiki-body li{ margin-bottom:.5rem; }
.wiki-body li::marker{ color:var(--gold-line); }
.wiki-body strong{ color:var(--ink); }
.wiki-body a{ color:var(--gold-soft); }
.wiki-body u{ text-decoration-color:var(--gold-line); }
.wiki-body del{ color:var(--muted); }
.wiki-body code{ background:var(--bg); border:1px solid var(--marble-line); border-radius:3px; padding:.1rem .35rem; font-family:var(--mono); font-size:.85em; color:var(--gold-soft); }
.wiki-body blockquote{ margin:0 0 1rem; padding:.2rem 0 .2rem 1.1rem; border-left:3px solid var(--gold-line); color:var(--ink-dim); max-width:70ch; }
.wiki-body blockquote p{ margin:0 0 .5rem; }
.wiki-body blockquote p:last-child{ margin-bottom:0; }
.wiki-body hr{ border:none; border-top:1px solid var(--marble-line); margin:1.8rem 0; }
.wiki-body img{ max-width:100%; border-radius:5px; border:1px solid var(--marble-line); margin:.4rem 0 1.2rem; display:block; }

/* ---------------- DokuWiki-flavored chrome: breadcrumb, TOC box, page tree, page footer ---------------- */
.wiki-crumb{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.02em;
  color:var(--muted); margin-bottom:1rem;
}
.wiki-crumb a{ color:var(--muted); text-decoration:none; }
.wiki-crumb a:hover{ color:var(--gold-soft); }
.wiki-crumb .sep{ margin:0 .45rem; color:var(--marble-line); }
.wiki-crumb .current{ color:var(--gold-soft); }

.wiki-toc{
  float:right;
  width:240px;
  margin:0 0 1.4rem 1.6rem;
  background:var(--marble);
  border:1px solid var(--marble-line);
  border-radius:5px;
  padding:1.1rem 1.3rem;
}
.wiki-toc .toc-title{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.7rem; display:block;
}
.wiki-toc ol{ margin:0; padding-left:1.1rem; counter-reset:toc; }
.wiki-toc li{ margin-bottom:.4rem; font-size:.84rem; }
.wiki-toc a{ color:var(--ink-dim); text-decoration:none; }
.wiki-toc a:hover{ color:var(--neon); }
.wiki-toc ol ol{ margin-top:.4rem; padding-left:1.2rem; }
.wiki-toc ol ol li{ font-size:.8rem; color:var(--muted); }
@media (max-width:640px){ .wiki-toc{ float:none; width:auto; margin:0 0 1.6rem; } }

.wiki-tree{ list-style:none; margin:0; padding:0; }
.wiki-tree .ns-group{ margin-bottom:1.8rem; }
.wiki-tree .ns-label{
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.6rem;
}
.wiki-tree .ns-label::before{ content:"▸"; color:var(--gold-line); font-size:.7rem; }
.wiki-tree .ns-pages{ list-style:none; margin:0; padding-left:1.5rem; border-left:1px solid var(--marble-line); }
.wiki-tree .ns-pages li{
  padding:.5rem 0 .5rem 1rem;
  border-bottom:1px solid var(--marble-line);
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap;
}
.wiki-tree .ns-pages li:last-child{ border-bottom:none; }
.wiki-tree .ns-pages a{
  color:var(--ink); text-decoration:none;
  font-family:var(--serif-body); font-size:1.02rem;
}
.wiki-tree .ns-pages a::before{ content:"📄 "; opacity:.5; font-size:.85em; }
.wiki-tree .ns-pages a:hover{ color:var(--neon); }
.wiki-tree .ns-meta{ font-family:var(--mono); font-size:.7rem; color:var(--muted); white-space:nowrap; }

.wiki-page-footer{
  clear:both;
  margin-top:2.5rem;
  padding-top:1.2rem;
  border-top:1px solid var(--marble-line);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  font-family:var(--mono); font-size:.72rem; color:var(--muted);
}
.wiki-page-footer .tools{ display:flex; gap:1.2rem; }
.wiki-page-footer a{ color:var(--muted); text-decoration:none; }
.wiki-page-footer a:hover{ color:var(--gold-soft); }

/* ---------------- WYSIWYG editor (wiki article body) ---------------- */
.wysiwyg-toolbar{
  display:flex; align-items:center; gap:.35rem; flex-wrap:wrap;
  margin-bottom:.7rem;
}
.wysiwyg-toolbar button{
  background:var(--marble);
  border:1px solid var(--marble-line);
  color:var(--ink-dim);
  border-radius:4px;
  padding:.5rem .75rem;
  font-family:var(--mono); font-size:.76rem;
  cursor:pointer;
  transition: all .15s ease;
  line-height:1;
}
.wysiwyg-toolbar button:hover{ border-color:var(--gold); color:var(--gold-soft); }
.wysiwyg-toolbar button.active{ border-color:var(--neon); color:var(--neon); }
.wysiwyg-toolbar button:disabled{ opacity:.5; cursor:default; }
.wysiwyg-toolbar select{
  background:var(--marble);
  border:1px solid var(--marble-line);
  color:var(--ink-dim);
  border-radius:4px;
  padding:.5rem .6rem;
  font-family:var(--mono); font-size:.76rem;
  cursor:pointer;
}
.wysiwyg-toolbar select:hover{ border-color:var(--gold); color:var(--gold-soft); }
.wysiwyg-toolbar .sep{ width:1px; align-self:stretch; background:var(--marble-line); margin:0 .3rem; }

.wysiwyg-editor{
  min-height:340px;
  background:linear-gradient(180deg, rgba(0,0,0,0.16), rgba(0,0,0,0.05)), var(--marble);
  border:1px solid var(--marble-line);
  border-radius:5px;
  padding:1.1rem 1.3rem;
  color:var(--ink);
  font-family:var(--serif-body);
  font-size:1rem;
  line-height:1.65;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wysiwyg-editor:focus{
  outline:none;
  border-color:var(--neon);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 0 0 3px var(--neon-soft);
}
.wysiwyg-editor h1{ font-family:var(--serif-display); font-weight:700; font-size:1.5rem; color:var(--ink); margin:1.1rem 0 .6rem; }
.wysiwyg-editor h1:first-child{ margin-top:0; }
.wysiwyg-editor h2{ font-family:var(--serif-display); font-weight:700; font-size:1.25rem; color:var(--ink); margin:1rem 0 .5rem; }
.wysiwyg-editor h2:first-child{ margin-top:0; }
.wysiwyg-editor h3{ font-family:var(--serif-display); font-weight:700; font-size:1.02rem; color:var(--ink); margin:.9rem 0 .4rem; }
.wysiwyg-editor p{ margin:0 0 .9rem; }
.wysiwyg-editor ul, .wysiwyg-editor ol{ margin:0 0 .9rem; padding-left:1.3rem; }
.wysiwyg-editor li{ margin-bottom:.3rem; }
.wysiwyg-editor a{ color:var(--gold-soft); }
.wysiwyg-editor code{ background:var(--bg); border:1px solid var(--marble-line); border-radius:3px; padding:.1rem .35rem; font-family:var(--mono); font-size:.85em; color:var(--gold-soft); }
.wysiwyg-editor blockquote{ margin:0 0 .9rem; padding:.2rem 0 .2rem 1rem; border-left:3px solid var(--gold-line); color:var(--ink-dim); }
.wysiwyg-editor hr{ border:none; border-top:1px solid var(--marble-line); margin:1.2rem 0; }
.wysiwyg-editor img{ max-width:100%; border-radius:5px; border:1px solid var(--marble-line); display:block; margin:.4rem 0; }
.wysiwyg-editor:empty::before{ content:attr(data-placeholder); color:var(--muted); }

.field-hint{ font-family:var(--mono); font-size:.72rem; color:var(--muted); margin:.5rem 0 0; }

/* ---------------- Forum: category table, topic list, threaded posts ---------------- */
.forum-cat-table .forum-cat-icon{ width:2.4rem; font-size:1.2rem; text-align:center; }
.forum-cat-table .forum-cat-name{
  font-family:var(--serif-display); font-weight:700; font-size:1.02rem;
  color:var(--ink); text-decoration:none;
}
.forum-cat-table .forum-cat-name:hover{ color:var(--neon); }
.forum-cat-table .forum-cat-count{
  font-family:var(--mono); font-size:.68rem; color:var(--muted);
  margin-left:.6rem; white-space:nowrap;
}
.forum-cat-desc{ margin:.3rem 0 0; color:var(--ink-dim); font-size:.88rem; }
.forum-cat-lastpost{
  font-size:.82rem; color:var(--ink-dim); white-space:nowrap;
}
.forum-cat-lastpost span{ font-family:var(--mono); font-size:.7rem; color:var(--muted); }
.forum-cat-empty{ color:var(--muted); font-size:.8rem; font-style:italic; }

.forum-unread-dot{ padding:0; width:10px; height:10px; min-width:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.forum-unread-dot .dot{ margin:0 auto; }

.forum-thread{ display:flex; flex-direction:column; gap:1rem; }
.forum-post-wrap{ min-width:0; }
.forum-post{
  display:flex; gap:1.2rem;
  background:var(--marble);
  border:1px solid var(--marble-line);
  border-left:3px solid var(--marble-line);
  border-radius:4px;
  overflow:hidden;
}
.forum-post-side{
  flex:none; width:140px;
  padding:1rem .9rem;
  background:rgba(0,0,0,0.14);
  border-right:1px solid var(--marble-line);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.4rem;
}
.forum-post-avatar{ width:56px; height:56px; font-size:1.4rem; margin:0; }
.forum-post-name{ font-family:var(--serif-display); font-weight:700; color:var(--gold-soft); font-size:.92rem; line-height:1.2; word-break:break-word; }
.forum-topic-author{ font-size:.62rem; }
.forum-post-role{ font-family:var(--mono); font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.forum-post-main{ flex:1; min-width:0; padding:1rem 1.2rem 1rem 0; }
.forum-post-headerbar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:var(--mono); font-size:.68rem; color:var(--muted); letter-spacing:.03em;
  padding-bottom:.6rem; margin-bottom:.8rem; border-bottom:1px solid var(--marble-line);
}
.forum-post-headerbar .edited{ font-style:italic; }
.forum-post-number{ color:var(--muted); }
.forum-post-created-line{ color:var(--gold-soft); font-size:.85rem; margin-bottom:.7rem; }
.reply-context{ font-family:var(--mono); font-size:.68rem; color:var(--muted); margin-bottom:.5rem; }
.forum-post-body.deleted{ color:var(--muted); font-style:italic; padding:1rem 1.2rem; }
@media (max-width:640px){
  .forum-post{ flex-direction:column; }
  .forum-post-side{ width:auto; flex-direction:row; border-right:none; border-bottom:1px solid var(--marble-line); }
  .forum-post-avatar{ width:36px; height:36px; font-size:1rem; }
  .forum-post-main{ padding:1rem 1.2rem; }
}
.post-actions{
  display:flex; gap:1rem; margin-top:.8rem; padding-top:.7rem;
  border-top:1px solid var(--marble-line);
  font-family:var(--mono); font-size:.7rem;
}
.post-actions a{ color:var(--muted); text-decoration:none; }
.post-actions a:hover{ color:var(--gold-soft); }
.post-actions form{ display:inline; }
.post-actions button{
  background:none; border:none; padding:0; margin:0;
  font:inherit; color:var(--muted); cursor:pointer;
}
.post-actions button:hover{ color:var(--neon); }

a.mention{ color:var(--gold-soft); text-decoration:none; font-weight:600; }
a.mention:hover{ color:var(--neon); }

.login-wrap{
  min-height:100vh; width:100%;
  display:flex; align-items:center; justify-content:center;
}
.login-box{
  width:100%; max-width:360px;
  background:var(--marble);
  border:1px solid var(--marble-line);
  border-radius:6px;
  padding:2.4rem 2.2rem;
}
.login-box h1{
  font-family:var(--serif-display); font-weight:700; font-size:1.5rem; color:var(--ink);
  margin:0 0 .3rem; text-align:center;
}
.login-box .sub{ text-align:center; color:var(--muted); font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; margin-bottom:1.8rem; }
.login-box form{ display:flex; flex-direction:column; gap:1rem; }
.login-box .btn{ width:100%; justify-content:center; margin-top:.4rem; }

@media (max-width:720px){
  body.app{ flex-direction:column; }
  .app-sidebar{ width:auto; flex-direction:column; align-items:stretch; padding:1rem 1.2rem; }
  .app-user{ margin-top:1rem; }
}

/* ---------------- Schedule: holographic calendar ---------------- */
.cal-toolbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  margin-bottom:1.6rem;
}
.cal-nav{ display:flex; align-items:center; gap:1.1rem; }
.cal-nav a{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border:1px solid var(--cyan-line);
  border-radius:4px;
  color:var(--cyan);
  font-size:1.1rem;
  text-decoration:none;
  transition: background .15s ease, box-shadow .15s ease;
}
.cal-nav a:hover{ background:rgba(78,232,255,0.08); box-shadow:0 0 14px var(--cyan-soft); }
.cal-month-label{
  font-family:var(--serif-display); font-size:1.35rem; color:var(--ink);
  min-width:190px; text-align:center;
}

.cal-wrap{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, rgba(37,31,42,0.55), rgba(28,20,32,0.72));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border:1px solid var(--cyan-line);
  border-radius:6px;
  padding:1.5rem;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.3), 0 0 50px rgba(78,232,255,0.05);
}
.cal-wrap::before, .cal-wrap::after{
  content:''; position:absolute; width:22px; height:22px; pointer-events:none;
  border-color:var(--cyan-soft); border-style:solid; border-width:0;
}
.cal-wrap::before{ top:10px; left:10px; border-top-width:2px; border-left-width:2px; }
.cal-wrap::after{ bottom:10px; right:10px; border-bottom-width:2px; border-right-width:2px; }

.cal-dow-row{ display:grid; grid-template-columns:repeat(7,1fr); gap:.5rem; margin-bottom:.6rem; position:relative; z-index:1; }
.cal-dow{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); text-align:center; padding:.3rem 0;
}

.cal-week{ display:grid; grid-template-columns:repeat(7,1fr); gap:.5rem; margin-bottom:.5rem; position:relative; z-index:1; }

.cal-day{
  position:relative;
  min-height:104px;
  background:rgba(255,255,255,0.015);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:4px;
  padding:.5rem .5rem .4rem;
  display:flex; flex-direction:column; gap:.3rem;
  transition: background .15s ease, border-color .15s ease;
}
.cal-day:hover{ background:rgba(78,232,255,0.03); border-color:var(--cyan-line); }
.cal-day.outside{ opacity:.32; }
.cal-day.today{
  border-color:var(--gold-line);
  box-shadow: inset 0 0 0 1px var(--gold-line), 0 0 20px rgba(206,162,76,0.12);
}
.cal-day-num{ font-family:var(--mono); font-size:.76rem; color:var(--ink-dim); }
.cal-day.today .cal-day-num{ color:var(--gold-soft); font-weight:700; }

.cal-add{
  position:absolute; top:.4rem; right:.4rem;
  width:18px; height:18px;
  display:none; align-items:center; justify-content:center;
  border:1px solid var(--cyan-line); border-radius:3px;
  color:var(--cyan); background:rgba(20,16,24,0.65);
  font-size:.7rem; line-height:1; cursor:pointer;
}
.cal-day:hover .cal-add{ display:flex; }

.cal-chip-list{ display:flex; flex-direction:column; gap:.25rem; max-height:180px; overflow-y:auto; }

.cal-chip{
  display:block; width:100%; text-align:left;
  background:rgba(206,162,76,0.1);
  border:1px solid var(--gold-line);
  border-radius:3px;
  padding:.2rem .4rem;
  font-family:var(--mono); font-size:.62rem; color:var(--gold-soft);
  cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition: box-shadow .15s ease, background .15s ease;
}
.cal-chip:hover{ background:rgba(206,162,76,0.18); box-shadow:0 0 10px var(--gold-line); }
.cal-chip.full{ background:rgba(255,79,160,0.1); border-color:var(--neon-soft); color:var(--neon); }
.cal-chip.full:hover{ background:rgba(255,79,160,0.18); box-shadow:0 0 10px var(--neon-soft); }
.cal-chip.mine{ box-shadow:0 0 0 1px var(--cyan-line) inset; }

@media (max-width:860px){
  .cal-day{ min-height:70px; padding:.35rem; }
  .cal-day-num{ font-size:.68rem; }
  .cal-chip{ font-size:.56rem; padding:.15rem .3rem; }
  .cal-month-label{ font-size:1.05rem; min-width:140px; }
}

/* ---------------- Triple clock (Local / Dog Haus / Eorzea) ---------------- */
.clock-row{
  display:flex; flex-wrap:wrap; gap:1rem;
  margin-bottom:1.6rem;
}
.clock-card{
  flex:1 1 200px;
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, rgba(37,31,42,0.55), rgba(28,20,32,0.72));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border:1px solid var(--cyan-line);
  border-radius:6px;
  padding:.9rem 1.1rem;
  text-align:center;
}
.clock-card-label{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); display:block; margin-bottom:.35rem;
}
.clock-card-time{
  font-family:var(--mono); font-size:1.5rem; font-weight:700; letter-spacing:.03em;
  display:block; line-height:1.1;
}
.clock-card-date{
  font-family:var(--mono); font-size:.68rem; color:var(--ink-dim); display:block; margin-top:.3rem;
}
.clock-card.clock-local .clock-card-time{ color:var(--ink); }
.clock-card.clock-house .clock-card-time{ color:var(--gold-soft); text-shadow:0 0 14px var(--gold-line); }
.clock-card.clock-eorzea .clock-card-time{ color:var(--cyan); text-shadow:0 0 14px var(--cyan-soft); }

@media (max-width:640px){
  .clock-card-time{ font-size:1.2rem; }
}

/* ---------------- Discord message preview (Bot Admin → Post tab) ----------------
   Deliberately mimics Discord's own dark theme colors instead of this app's
   gold/neon identity — the whole point is showing what a message will
   actually look like once posted, so it needs to look like Discord, not
   like the venue's own brand. A narrow, intentional exception to "always
   use theme.css tokens," same spirit as the Bone Yard's DokuWiki styling. */
.discord-preview{ background:#313338; border-radius:8px; padding:1rem 1.2rem; border-left:4px solid #cea24c; font-family:'gg sans', Helvetica, Arial, sans-serif; color:#dbdee1; font-size:.9rem; min-height:60px; }
.discord-preview .dp-empty{ color:#80848e; }
.discord-preview .dp-title{ font-weight:700; color:#f2f3f5; margin-bottom:.4rem; }
.discord-preview code{ background:#2b2d31; padding:.1rem .3rem; border-radius:3px; }
.discord-preview pre{ background:#2b2d31; padding:.6rem; border-radius:4px; overflow-x:auto; margin:.4rem 0; }
.discord-preview pre code{ background:none; padding:0; }
.discord-preview blockquote{ border-left:4px solid #4e5058; padding-left:.6rem; margin:.3rem 0; color:#96989d; }
.discord-preview .dp-spoiler{ background:#1e1f22; color:#1e1f22; border-radius:3px; padding:0 .1rem; cursor:pointer; }
.discord-preview .dp-spoiler:hover{ color:#dbdee1; }

/* ---------------- The Tap (Bar POS) ---------------- */
.till-topbar{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  background:var(--marble); border:1px solid var(--marble-line); border-radius:10px;
  padding:.9rem 1.2rem; margin-bottom:1.4rem; position:sticky; top:.6rem; z-index:5;
}
.till-topbar .field{ margin-bottom:0; min-width:220px; flex:1; }
.till-total{ font-family:var(--serif-display); font-size:1.5rem; color:var(--ink); white-space:nowrap; }
.till-total .label{ font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:block; }
.pot-badge{
  display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border-radius:999px;
  font-family:var(--mono); font-size:.85rem; color:var(--gold-soft);
  box-shadow:0 0 0 1px var(--neon), 0 0 18px var(--neon-soft); white-space:nowrap;
}
.pot-badge b{ color:var(--ink); font-family:var(--serif-display); font-size:1.05rem; }
.pos-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1rem; margin-bottom:1.8rem; }
.pos-tile{
  display:block; width:100%; text-align:left; padding:0; border:1px solid var(--marble-line);
  border-radius:10px; background:var(--marble); cursor:pointer; overflow:hidden;
  transition:transform .08s ease, box-shadow .12s ease; font:inherit; color:inherit;
}
.pos-tile:hover{ box-shadow:0 0 0 1px var(--gold-line); }
.pos-tile:active{ transform:scale(.97); }
.pos-tile:disabled{ opacity:.5; cursor:wait; }
.pos-tile img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pos-tile .media.empty{ aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; background:var(--bg-veil); color:var(--muted); font-family:var(--mono); font-size:.68rem; }
.pos-tile .pos-tile-body{ padding:.7rem .8rem .85rem; }
.pos-tile .pos-tile-name{ font-family:var(--serif-display); font-weight:700; font-size:.95rem; color:var(--ink); display:block; margin-bottom:.25rem; }
.pos-tile .pos-tile-price{ font-family:var(--mono); font-size:.78rem; color:var(--gold-soft); }
.pos-tile.gamba{ box-shadow:0 0 0 2px var(--neon), 0 0 22px var(--neon-glow); animation:pos-tile-gamba-pulse 2.6s ease-in-out infinite; }
.pos-tile.gamba .pos-tile-name{ color:var(--neon); text-shadow:0 0 10px var(--neon-soft); }
@keyframes pos-tile-gamba-pulse{
  0%,100%{ box-shadow:0 0 0 2px var(--neon), 0 0 18px var(--neon-soft); }
  50%{ box-shadow:0 0 0 2px var(--neon), 0 0 30px var(--neon-glow); }
}
@media (prefers-reduced-motion:reduce){ .pos-tile.gamba{ animation:none; } }
.till-sale-row.voided td{ color:var(--muted); text-decoration:line-through; }
.till-sale-row .void-reason{ display:block; font-family:var(--mono); font-size:.68rem; color:var(--muted); text-decoration:none; margin-top:.15rem; }