/*
  BreakFlow · Premium Liquid Glass / Deep Blue
  Design reference: supplied LUNA SHORTCUTS 43v archive.
  Strict scope: authenticated application (.app-shell) only.
  The login screen, existing backdrop animation, database and API code remain unchanged.
*/
.app-shell {
  --glass-primary: rgba(102,133,156,.20);
  --glass-panel: rgba(112,142,164,.19);
  --glass-raised: rgba(134,162,183,.24);
  --glass-sub: rgba(111,141,160,.17);
  --glass-soft: rgba(140,170,192,.12);
  --glass-border: rgba(236,248,255,.16);
  --glass-active-border: rgba(237,250,255,.31);
  --glass-text: #F9FCFF;
  --glass-secondary: #DCE9F4;
  --glass-blue: #38B8F1;
  --glass-gold: #F4C825;
  --glass-green: #55D99B;
  --glass-red: #FF9FB3;
  --glass-ease: cubic-bezier(.2,.7,.18,1);
  --glass-blur: blur(16px) saturate(128%);
  --glass-wallpaper: none; /* optional image url(...); defaults to the existing Aurora/Grid scene */
  --glass-shadow: 0 18px 48px rgba(0,10,26,.23), 0 4px 12px rgba(1,12,30,.12),
                  inset 0 1px 0 rgba(255,255,255,.21), inset 0 -1px 0 rgba(236,248,255,.05);
  --glass-shadow-raised: 0 27px 57px rgba(0,9,25,.32), 0 10px 23px rgba(0,16,36,.20),
                         0 0 23px rgba(56,184,241,.10), inset 0 1px 0 rgba(255,255,255,.29);
  --text: var(--glass-text);
  --muted: var(--glass-secondary);
  --blue: var(--glass-blue);
  --mint: var(--glass-green);
  --amber: var(--glass-gold);
  --stroke: var(--glass-border);
  color: var(--glass-text);
  align-items: flex-start;
  gap: clamp(17px,2vw,28px);
  padding: 20px clamp(16px,2vw,32px) 24px;
  background: transparent;
  isolation: isolate;
}

/* Additional stationary ambient light only: the pre-existing aurora/grid remain untouched. */
.app-shell::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    var(--glass-wallpaper),
    radial-gradient(ellipse 46vw 46vh at 78% 19%,rgba(47,124,182,.20),transparent 78%),
    radial-gradient(ellipse 46vw 38vh at 42% 79%,rgba(33,82,147,.17),transparent 80%),
    radial-gradient(ellipse 30vw 42vh at 7% 32%,rgba(56,116,159,.12),transparent 79%);
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:fixed;
}

.app-shell :is(h1,h2,h3,.stat-value,.slot-time,.my-time,.topbar-title) { color:var(--glass-text); text-shadow:0 1px 1px rgba(1,12,30,.15); }
.app-shell :is(.muted,.filter-note,.label,.small,.sidebar-label) {color:var(--glass-secondary)}
.app-shell .label {letter-spacing:.11em;opacity:.83}
.app-shell .page-head h1 {font-weight:500;letter-spacing:-.025em}
.app-shell .page-head {margin:6px 0 26px;gap:17px}
.app-shell .page-head .muted {max-width:710px}
.app-shell .section-head {margin:28px 0 16px}
.app-shell .section-head h3 {margin:0}

/* One glass material for actual dashboard panels, with physical edge glints. */
.app-shell :is(.glass,.sidebar,.topbar,.clock-chip,.live-chip,.name-chip,.empty) {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.app-shell .glass {
  position: relative;
  isolation: isolate;
  color: var(--glass-text);
  background: linear-gradient(139deg, rgba(151,182,200,.095), rgba(91,123,155,.075) 60%, rgba(54,87,117,.07)), var(--glass-panel);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: transform .76s var(--glass-ease), border-color .68s ease, box-shadow .76s var(--glass-ease), background-color .6s ease;
  backface-visibility: hidden;
}
.app-shell :is(.stat-card,.slot-card,.box) {overflow:visible}
.app-shell :is(.stat-card,.slot-card,.box)::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background: radial-gradient(ellipse at 92% 0%,rgba(208,241,255,.14),transparent 54%),
              linear-gradient(131deg,rgba(92,151,185,.10),rgba(44,91,139,.04) 59%,rgba(8,27,51,.04));
  opacity:.72;
  transition:opacity .7s var(--glass-ease);
}
.app-shell :is(.glass,.sidebar,.topbar)::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.055);
  background:linear-gradient(149deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.022) 19%,transparent 46%,transparent 78%,rgba(189,223,253,.045) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(172,224,250,.065);
  transition:opacity .7s var(--glass-ease), border-color .6s ease;
}
.app-shell :is(.stat-card,.slot-card,.box,.hero-panel) > * {position:relative;z-index:1}
.app-shell .glass:hover {border-color:var(--glass-active-border)}
.app-shell :is(.stat-card,.slot-card,.box):hover {
  transform:translate3d(0,-5px,0) scale(1.012);
  box-shadow:var(--glass-shadow-raised);
  z-index:2;
}
.app-shell :is(.stat-card,.slot-card,.box):hover::before {opacity:1}
.app-shell :is(.stat-card,.slot-card,.box):hover::after {opacity:1;border-color:rgba(236,248,255,.18)}

/* Floating sidebar retains the original menu labels at every width. */
.app-shell .sidebar {
  z-index:120;
  position:sticky;
  top:20px;
  flex:0 0 244px;
  width:244px;
  height:calc(100vh - 40px);
  height:calc(100dvh - 40px);
  border:1px solid rgba(236,248,255,.21);
  border-radius:26px;
  padding:22px 14px 16px;
  overflow:hidden;
  background:linear-gradient(155deg,rgba(150,182,205,.12),rgba(69,110,151,.10) 56%,rgba(35,73,106,.08)),rgba(102,133,156,.22);
  box-shadow:0 22px 53px rgba(0,10,25,.27),inset 0 1px 0 rgba(255,255,255,.19);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  transition:transform .78s var(--glass-ease),border-color .65s ease,box-shadow .78s var(--glass-ease);
}
.app-shell .sidebar::after {z-index:0}
.app-shell .sidebar > * {position:relative;z-index:1}
.app-shell .sidebar:hover,.app-shell .sidebar:focus-within {
  transform:translate3d(0,-2px,0) scale(1.008);
  border-color:rgba(237,250,255,.29);
  box-shadow:0 26px 62px rgba(0,10,25,.34),0 0 22px rgba(56,184,241,.06),inset 0 1px 0 rgba(255,255,255,.23);
}
.app-shell .sidebar-logo {margin:3px 8px 30px;gap:12px}
.app-shell .sidebar-logo .brand-title {font-size:20px;letter-spacing:.06em;color:#fff}
.app-shell .logo-mark {background:linear-gradient(135deg,rgba(57,184,241,.65),rgba(94,143,206,.48));border:1px solid rgba(232,248,255,.31);box-shadow:inset 0 1px rgba(255,255,255,.27),0 9px 24px rgba(13,90,139,.24);border-radius:15px}
.app-shell .sidebar-label {color:#c5d6e4;font-size:11px;margin:17px 12px 10px}
.app-shell .nav-button {
  position:relative;
  display:flex;
  gap:12px;
  width:100%;
  align-items:center;
  margin:5px 0;
  padding:12px 13px;
  min-height:47px;
  color:#dce9f4;
  background:rgba(220,238,251,.025);
  border:1px solid transparent;
  border-radius:15px;
  text-align:left;
  box-shadow:none;
  transition:transform .48s var(--glass-ease),background-color .4s ease,border-color .4s ease,color .4s ease,box-shadow .5s var(--glass-ease);
}
.app-shell .nav-button .nav-text,.app-shell .nav-button .signout-text {display:inline;white-space:nowrap}
.app-shell .nav-button .nav-icon {font-size:20px;flex:0 0 24px;color:#eaf6ff}
.app-shell .nav-button:is(:hover,:focus-visible) {transform:translateX(3px);background:rgba(216,239,252,.12);color:white;border-color:rgba(237,250,255,.17)}
.app-shell .nav-button.active {
  background:linear-gradient(108deg,rgba(56,184,241,.19),rgba(123,179,210,.10));
  color:#fff;
  border:1px solid rgba(214,245,255,.25);
  box-shadow:inset 3px 0 0 var(--glass-blue),inset 0 1px 0 rgba(255,255,255,.13),0 7px 19px rgba(11,48,82,.13);
}
.app-shell .sidebar-bottom {border-top:1px solid rgba(236,248,255,.14);padding-top:15px}
.app-shell .sidebar-profile {padding:10px 11px;margin:0 0 8px;border-radius:14px;background:rgba(210,239,252,.045)}
.app-shell .avatar {border:1px solid rgba(236,248,255,.18);border-radius:14px;background:linear-gradient(145deg,rgba(56,184,241,.20),rgba(122,170,205,.18))}

/* Floating top bar: stable across navigation, no layout shifts. */
.app-shell .workspace {flex:1;min-width:0;min-height:calc(100vh - 40px);padding:0 2px 90px}
.app-shell .topbar {
  position:sticky;
  top:20px;
  z-index:110;
  isolation:isolate;
  min-height:66px;
  display:flex;
  gap:15px;
  align-items:center;
  margin:0 0 35px;
  padding:13px 18px;
  border-radius:22px;
  border:1px solid rgba(236,248,255,.20);
  background:linear-gradient(130deg,rgba(134,169,190,.125),rgba(57,94,131,.08)),rgba(112,142,164,.21);
  box-shadow:0 16px 38px rgba(0,9,27,.2),inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
}
.app-shell .topbar > * {position:relative;z-index:1}
.app-shell .topbar-title {font-size:14px;letter-spacing:.04em;color:#f6fbff}
.app-shell .clock-chip,.app-shell .live-chip {
  border-color:rgba(226,247,255,.18);
  background:rgba(170,207,228,.095);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  color:var(--glass-secondary);
  padding:9px 14px;
}
.app-shell .live-chip {color:#9aefcf}
.app-shell .live-dot {background:var(--glass-green);box-shadow:0 0 11px rgba(85,217,155,.48)}

/* Cards and slot states */
.app-shell .hero-panel {
  border-radius:29px;
  padding:32px 36px;
  margin-bottom:26px;
  overflow:hidden;
  background:linear-gradient(112deg,rgba(74,139,183,.22),rgba(101,144,165,.15) 58%,rgba(133,165,183,.18));
  border-color:rgba(236,248,255,.23);
  box-shadow:0 23px 58px rgba(2,17,42,.25),inset 0 1px rgba(255,255,255,.20);
}
/* Preserve the original hero's atmospheric halo in ::before. */
.app-shell .hero-panel::before {opacity:.8;z-index:0;filter:none}
.app-shell .hero-panel::after {z-index:0}
.app-shell .hero-panel h2 {font-size:clamp(22px,2.2vw,29px);margin:9px 0 8px}
.app-shell .hero-panel .label {color:#aee7ff}
.app-shell .hero-panel .muted {color:#d9ecf9}
.app-shell .stat-card {min-height:154px;border-radius:24px;padding:23px 23px;background:linear-gradient(137deg,rgba(144,182,204,.13),rgba(77,120,154,.08)),var(--glass-primary)}
.app-shell .stat-card:nth-child(2)::before {background:radial-gradient(ellipse at 88% 10%,rgba(99,185,232,.22),transparent 55%),linear-gradient(131deg,rgba(75,132,186,.11),transparent)}
.app-shell .stat-card:nth-child(3)::before {background:radial-gradient(ellipse at 88% 10%,rgba(93,230,180,.15),transparent 55%),linear-gradient(131deg,rgba(41,130,132,.09),transparent)}
.app-shell .stat-card:nth-child(4)::before {background:radial-gradient(ellipse at 88% 10%,rgba(244,200,37,.13),transparent 55%),linear-gradient(131deg,rgba(158,135,75,.08),transparent)}
.app-shell .stat-value {font-size:clamp(29px,2.8vw,36px);line-height:1.3;letter-spacing:-.015em;color:#f9fcff}
.app-shell .stat-icon {font-size:22px;color:#b4e9ff;opacity:.93}
.app-shell .stats-grid {gap:18px;margin-bottom:29px}
.app-shell .slot-grid {gap:17px}
.app-shell .slot-card {min-width:0;border-radius:23px;padding:20px 21px 19px;background:linear-gradient(145deg,rgba(147,179,196,.095),rgba(91,134,165,.07)),var(--glass-panel)}
.app-shell .slot-card.booked {background:linear-gradient(146deg,rgba(69,162,214,.24),rgba(74,117,151,.12)),rgba(111,141,160,.20);border-color:rgba(102,205,248,.48);box-shadow:var(--glass-shadow),inset 0 0 0 1px rgba(56,184,241,.1)}
.app-shell .slot-time {font-size:clamp(19px,1.6vw,22px);white-space:nowrap;font-weight:500;color:#fff}
.app-shell .capacity-row {color:#d8e7f4;margin-top:15px}
.app-shell .capacity-row b {color:#f5fbff}
.app-shell .capacity-bar {height:7px;border-radius:12px;background:rgba(8,28,59,.24);border:1px solid rgba(236,248,255,.065)}
.app-shell .capacity-bar span {background:linear-gradient(90deg,#55D99B,#38B8F1);box-shadow:0 0 13px rgba(56,184,241,.20)}
.app-shell .name-list {color:#e0eefd;gap:7px;min-height:51px;padding-top:14px}
.app-shell .name-chip {padding:4px 8px;border-radius:10px;background:rgba(203,234,252,.09);border:1px solid rgba(236,248,255,.14);color:#e7f4fd;max-width:100%;overflow-wrap:anywhere}
.app-shell .slot-actions {margin-top:17px}
.app-shell .box {border-radius:24px;padding:25px;background:linear-gradient(145deg,rgba(152,187,204,.09),rgba(70,112,147,.06)),var(--glass-sub)}
.app-shell .my-item {border-color:rgba(236,248,255,.14)}
.app-shell .empty {background:rgba(155,196,220,.07);border:1px dashed rgba(236,248,255,.18);color:#d8e8f4}
.app-shell .two-col {gap:20px}
.app-shell .badge {background:rgba(85,217,155,.12);border:1px solid rgba(85,217,155,.15);color:#abf4d3;padding:5px 10px;border-radius:99px}
.app-shell .badge.warn {background:rgba(244,200,37,.12);border-color:rgba(244,200,37,.19);color:#f8df82}
.app-shell .badge.mine {background:rgba(56,184,241,.15);border-color:rgba(56,184,241,.23);color:#b7ebff}
.app-shell .badge.full,.app-shell .badge.locked {background:rgba(255,124,161,.13);border-color:rgba(255,124,161,.18);color:#ffc1cf}
.app-shell .badge.past {background:rgba(194,207,217,.08);border-color:rgba(194,207,217,.15);color:#d4e3ef}

/* Inputs / buttons retain their original IDs, event handlers and validation. */
.app-shell :is(input,select,textarea) {
  background:rgba(60,94,128,.20);
  border:1px solid rgba(236,248,255,.20);
  border-radius:14px;
  min-height:46px;
  color:#f9fcff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -2px 8px rgba(2,20,43,.08);
  -webkit-backdrop-filter:blur(10px) saturate(125%);
  backdrop-filter:blur(10px) saturate(125%);
  transition:border-color .36s ease,box-shadow .36s ease,background-color .36s ease;
}
.app-shell :is(input,textarea)::placeholder {color:#b7ccdc;opacity:.88}
.app-shell :is(input,select,textarea):focus-visible,.app-shell :is(input,select,textarea):focus {
  outline:none;
  border-color:rgba(124,213,250,.72);
  box-shadow:0 0 0 3px rgba(56,184,241,.16),0 0 24px rgba(56,184,241,.10),inset 0 1px 0 rgba(255,255,255,.11);
}
.app-shell input[type=checkbox] {accent-color:#38B8F1;min-width:20px;min-height:20px;width:20px;height:20px}
.app-shell select option {background:#14293c;color:#f9fcff}
.app-shell .form-field>span {color:#dce9f4}
.app-shell :is(button.primary,button.secondary,button.ghost,button.danger) {
  position:relative;
  min-height:43px;
  border-radius:13px;
  border:1px solid rgba(236,248,255,.20);
  color:#f9fcff;
  text-shadow:0 1px 1px rgba(0,16,37,.20);
  box-shadow:0 8px 20px rgba(0,17,40,.16),inset 0 1px 0 rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(12px) saturate(128%);
  backdrop-filter:blur(12px) saturate(128%);
  transition:transform .46s var(--glass-ease),border-color .38s ease,box-shadow .46s var(--glass-ease),background-color .38s ease,filter .4s ease;
}
.app-shell button.primary {background:linear-gradient(128deg,rgba(38,154,213,.60),rgba(58,133,191,.35));border-color:rgba(166,226,255,.37)}
.app-shell button.secondary {background:linear-gradient(130deg,rgba(116,173,202,.24),rgba(86,141,184,.20));color:#edf8ff}
.app-shell button.ghost {background:rgba(150,179,204,.12);color:#e6f0fa}
.app-shell button.danger {background:rgba(197,78,114,.20);color:#ffccd7;border-color:rgba(255,171,190,.30)}
.app-shell :is(button.primary,button.secondary,button.ghost,button.danger):hover:not(:disabled) {
  transform:translateY(-3px) scale(1.012);
  border-color:rgba(237,250,255,.48);
  box-shadow:0 13px 26px rgba(0,15,39,.25),0 0 15px rgba(56,184,241,.12),inset 0 1px 0 rgba(255,255,255,.30);
  filter:brightness(1.07);
}
.app-shell :is(button.primary,button.secondary,button.ghost,button.danger):active:not(:disabled) {transform:translateY(0) scale(.99);box-shadow:inset 0 2px 8px rgba(0,17,40,.20)}
.app-shell :is(button.primary,button.secondary,button.ghost,button.danger):focus-visible,
.app-shell .nav-button:focus-visible {outline:2px solid rgba(158,222,250,.88);outline-offset:3px}
.app-shell button:disabled {opacity:.58;box-shadow:none;filter:saturate(.6);cursor:not-allowed}

/* Data tables and management screens */
.app-shell .table-wrap {overflow-x:auto;max-width:100%;scrollbar-color:rgba(174,221,243,.32) transparent}
.app-shell .data-table {color:#f5fbff}
.app-shell .data-table th {color:#d9e9f5;border-bottom:1px solid rgba(236,248,255,.19);font-size:12px;white-space:nowrap}
.app-shell .data-table td {border-bottom:1px solid rgba(236,248,255,.10)}
.app-shell .data-table tbody tr {transition:background-color .3s ease}
.app-shell .data-table tbody tr:hover {background:rgba(197,228,245,.075)}
.app-shell .data-table tbody tr:last-child td {border-bottom:0}
.app-shell .setting-row {border-color:rgba(236,248,255,.14)}
.app-shell .row-actions {gap:7px}
.app-shell .form-inline {gap:13px}
.app-shell .mini-input {background:rgba(57,90,117,.22)}

/* UI-only entrance: no opacity fade on glass surfaces, to avoid the glass turning transparent. */
@keyframes bfGlassRise {from {transform:translate3d(0,19px,0)} to {transform:translate3d(0,0,0)}}
@keyframes bfModalRise {from {transform:translate3d(0,22px,0) scale(.965)} to {transform:translate3d(0,0,0) scale(1)}}
@keyframes bfModalLeave {from {opacity:1;transform:translate3d(0,0,0) scale(1)} to {opacity:0;transform:translate3d(0,16px,0) scale(.978)}}
@media (prefers-reduced-motion:no-preference) {
  .app-shell #view-root.motion-enter .page-head {animation:bfGlassRise 1.06s var(--glass-ease) .04s backwards}
  .app-shell #view-root.motion-enter .hero-panel {animation:bfGlassRise 1.12s var(--glass-ease) .13s backwards}
  .app-shell #view-root.motion-enter .stat-card {animation:bfGlassRise 1.14s var(--glass-ease) backwards}
  .app-shell #view-root.motion-enter .stat-card:nth-child(1) {animation-delay:.25s}
  .app-shell #view-root.motion-enter .stat-card:nth-child(2) {animation-delay:.53s}
  .app-shell #view-root.motion-enter .stat-card:nth-child(3) {animation-delay:.81s}
  .app-shell #view-root.motion-enter .stat-card:nth-child(4) {animation-delay:1.09s}
  .app-shell #view-root.motion-enter .slot-card {animation:bfGlassRise 1.12s var(--glass-ease) backwards}
  .app-shell #view-root.motion-enter .slot-card:nth-child(1) {animation-delay:.18s!important}
  .app-shell #view-root.motion-enter .slot-card:nth-child(2) {animation-delay:.46s!important}
  .app-shell #view-root.motion-enter .slot-card:nth-child(3) {animation-delay:.74s!important}
  .app-shell #view-root.motion-enter .slot-card:nth-child(4) {animation-delay:1.02s!important}
  .app-shell #view-root.motion-enter .slot-card:nth-child(5) {animation-delay:1.30s!important}
  .app-shell #view-root.motion-enter .slot-card:nth-child(6) {animation-delay:1.58s!important}
  .app-shell #view-root.motion-enter .slot-card:nth-child(7) {animation-delay:1.86s!important}
  .app-shell #view-root.motion-enter .slot-card:nth-child(8) {animation-delay:2.14s!important}
  .app-shell #view-root.motion-enter .slot-card:nth-child(9) {animation-delay:2.42s!important}
  .app-shell #view-root.motion-enter .slot-card:nth-child(10) {animation-delay:2.70s!important}
  .app-shell #view-root.motion-enter .slot-card:nth-child(11) {animation-delay:2.98s!important}
  .app-shell #view-root.motion-enter .slot-card:nth-child(12) {animation-delay:3.26s!important}
  .app-shell #view-root.motion-enter .slot-card:nth-child(13) {animation-delay:3.54s!important}
  .app-shell #view-root.motion-enter .slot-card:nth-child(14) {animation-delay:3.82s!important}
  .app-shell #view-root.motion-enter .slot-card:nth-child(15) {animation-delay:4.10s!important}
  .app-shell #view-root.motion-enter .slot-card:nth-child(16) {animation-delay:4.38s!important}
  .app-shell #view-root.motion-enter .slot-card:nth-child(17) {animation-delay:4.66s!important}
  .app-shell #view-root.motion-enter .slot-card:nth-child(18) {animation-delay:4.94s!important}
  .app-shell #view-root.motion-enter .slot-card:nth-child(19) {animation-delay:5.22s!important}
  .app-shell #view-root.motion-enter .slot-card:nth-child(20) {animation-delay:5.50s!important}
  .app-shell #view-root.motion-enter .slot-card:nth-child(21) {animation-delay:5.78s!important}
  .app-shell #view-root.motion-enter .slot-card:nth-child(22) {animation-delay:6.06s!important}
  .app-shell #view-root.motion-enter .slot-card:nth-child(23) {animation-delay:6.34s!important}
  .app-shell #view-root.motion-enter .two-col .box {animation:bfGlassRise 1.10s var(--glass-ease) .35s backwards}
  .app-shell .two-col > :nth-child(2) .box {animation-delay:.65s}
}

/* Existing components must not replay entrance when Realtime patches a page. */
.app-shell #view-root:not(.motion-enter) {
  animation:none!important;
}
.app-shell #view-root:not(.motion-enter) :is(.page-head,.hero-panel,.stat-card,.slot-card,.two-col .box) {
  animation:none!important;
}

/* Existing modal is an overlay dialog, not a dashboard card being moved to center. */
#modal-root:not(:empty) {background:rgba(3,12,26,.57);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#modal-root .modal {
  position:relative;
  isolation:isolate;
  z-index:1;
  max-height:min(85vh,800px);
  overflow-y:auto;
  width:min(460px,100%);
  border-radius:27px;
  padding:30px;
  background:linear-gradient(143deg,rgba(138,177,198,.18),rgba(56,100,133,.13)),rgba(76,113,139,.43);
  color:#f9fcff;
  border:1px solid rgba(236,248,255,.28);
  box-shadow:0 31px 87px rgba(0,11,28,.46),inset 0 1px 0 rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(19px) saturate(133%);
  backdrop-filter:blur(19px) saturate(133%);
  animation:bfModalRise .9s cubic-bezier(.2,.7,.18,1) backwards;
}
#modal-root .modal::after {content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.07);background:linear-gradient(160deg,rgba(255,255,255,.10),transparent 40%);pointer-events:none}
#modal-root .modal > * {position:relative;z-index:1}
#modal-root .modal .muted {color:#dce9f4}
#modal-root .modal :is(input,select) {border:1px solid rgba(236,248,255,.25);background:rgba(28,66,98,.38);color:#f9fcff}
#modal-root .modal :is(input,select):focus-visible {outline:2px solid rgba(56,184,241,.7);outline-offset:1px}
#modal-root .modal :is(button.primary,button.ghost) {border:1px solid rgba(236,248,255,.25);border-radius:13px;color:#f9fcff;background:rgba(112,164,191,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);min-height:44px;transition:transform .42s var(--glass-ease, cubic-bezier(.2,.7,.18,1)),background-color .4s ease}
#modal-root .modal button.primary {background:rgba(42,149,207,.55)}
#modal-root .modal button:hover:not(:disabled) {transform:translateY(-2px)}
#modal-root .modal.is-closing {animation:bfModalLeave .76s var(--glass-ease, ease) both}
#modal-root.is-closing {background:rgba(3,12,26,0);transition:background-color .76s ease}
#toast .toast-item {background:rgba(52,89,117,.80);border-color:rgba(236,248,255,.29);color:#f9fcff;box-shadow:0 14px 34px rgba(0,12,30,.28);-webkit-backdrop-filter:blur(16px) saturate(128%);backdrop-filter:blur(16px) saturate(128%)}

/* Breakpoints: no collapsed icon-only nav on tablets; use labeled mobile bottom rail. */
@media (max-width:1150px) and (min-width:761px) {
  .app-shell {gap:16px;padding-inline:14px}
  .app-shell .sidebar {flex-basis:206px;width:206px;padding-inline:10px}
  .app-shell .sidebar-logo {gap:7px;margin-inline:6px}
  .app-shell .sidebar-logo .brand-title {font-size:17px}
  .app-shell .nav-button {font-size:13px;padding-inline:10px;gap:8px}
  .app-shell .slot-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-shell .stats-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-shell .sidebar .nav-text,.app-shell .sidebar .signout-text,.app-shell .sidebar-label,.app-shell .sidebar-profile .profile-text {display:inline}
}
@media (max-width:760px) {
  .app-shell {display:block;min-height:100dvh;padding:12px 12px 0}
  .app-shell .workspace {min-height:100vh;padding:0 0 calc(118px + env(safe-area-inset-bottom,0px))}
  .app-shell .topbar {position:sticky;top:8px;min-height:61px;border-radius:17px;padding:11px 13px;margin-bottom:28px}
  .app-shell .topbar-title {display:block;font-size:11px;flex:1 1 120px}
  .app-shell .top-actions {gap:6px}
  .app-shell .top-actions :is(.live-chip,.clock-chip) {padding:6px 8px;font-size:11px}
  .app-shell .sidebar {
    position:fixed;
    top:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));left:10px;right:10px;
    width:auto;height:auto;min-height:73px;max-height:calc(100dvh - 100px);
    padding:7px 7px;
    border-radius:23px;
    display:flex;flex-direction:row;align-items:center;
    flex:none;
    gap:3px;
    overflow:visible;
    transform:none;
    z-index:120;
  }
  .app-shell .sidebar:hover,.app-shell .sidebar:focus-within {transform:none;box-shadow:0 22px 53px rgba(0,10,25,.27),inset 0 1px rgba(255,255,255,.19)}
  .app-shell .sidebar-logo,.app-shell .sidebar-label,.app-shell .sidebar-profile {display:none!important}
  .app-shell .sidebar nav {display:flex;gap:2px;align-items:stretch;flex:1 1 auto;min-width:0}
  .app-shell .sidebar nav .nav-button {
    margin:0;
    min-width:0;
    min-height:60px;
    flex:1 1 0;
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;
    padding:8px 3px;
    border-radius:16px;
    text-align:center;
  }
  .app-shell .sidebar .nav-icon {flex:none;width:auto;line-height:1;font-size:20px}
  .app-shell .sidebar .nav-text,.app-shell .sidebar .signout-text {display:block!important;white-space:normal;line-height:1.2;text-align:center;font-size:10.5px;color:inherit;overflow-wrap:anywhere}
  .app-shell .nav-button:is(:hover,:focus-visible) {transform:translateY(-2px)}
  .app-shell .sidebar nav .nav-button.active {box-shadow:inset 0 -3px 0 rgba(56,184,241,.65),inset 0 1px 0 rgba(255,255,255,.12)}
  .app-shell .sidebar-bottom {border:0;margin:0;padding:0;flex:0 0 67px;min-width:0}
  .app-shell .sidebar-bottom .nav-button {display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;width:100%;min-height:60px;margin:0;padding:8px 3px;border-radius:15px}
  .app-shell .sidebar-bottom .nav-button .nav-icon {width:auto;flex:none}
  .app-shell .hero-panel {padding:26px 23px;border-radius:24px}
  .app-shell .slot-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-shell .stats-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .app-shell .stat-card {min-height:140px;padding:17px;border-radius:21px}
  .app-shell .two-col {grid-template-columns:1fr}
  .app-shell .box {padding:21px;border-radius:21px}
  .app-shell .form-inline {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px) {
  .app-shell {padding-inline:10px}
  .app-shell .topbar {flex-wrap:wrap;align-items:center;row-gap:8px;padding:11px 11px;margin-bottom:23px}
  .app-shell .topbar-title {font-size:11px;flex:1 0 100%}
  .app-shell .top-actions {width:100%;justify-content:space-between}
  .app-shell .page-head {margin:7px 0 22px}
  .app-shell .page-head h1 {font-size:29px}
  .app-shell .slot-grid {grid-template-columns:1fr;gap:14px}
  .app-shell .stats-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .app-shell .stat-card {padding:15px;min-height:132px}
  .app-shell .stat-value {font-size:27px}
  .app-shell .slot-card {padding:20px}
  .app-shell .hero-panel {padding:24px 20px}
  .app-shell .filter-note {font-size:11px}
  .app-shell .filters {width:100%}
  .app-shell .filters :is(input,select) {width:calc(50% - 5px);min-width:0}
  .app-shell .form-inline {grid-template-columns:1fr}
  .app-shell .sidebar {left:7px;right:7px;padding:5px 4px;bottom:calc(7px + env(safe-area-inset-bottom,0px))}
  .app-shell .sidebar .nav-text,.app-shell .sidebar .signout-text {font-size:10px}
  .app-shell .sidebar-bottom {flex-basis:60px}
  #modal-root:not(:empty) {align-items:flex-end;padding:10px 10px calc(15px + env(safe-area-inset-bottom,0px))}
  #modal-root .modal {padding:24px 21px;border-radius:24px;max-height:calc(100dvh - 50px)}
}
@media (max-width:340px) {
  .app-shell .sidebar .nav-text,.app-shell .sidebar .signout-text {font-size:9px}
  .app-shell .sidebar-bottom {flex-basis:55px}
  .app-shell .topbar-title {font-size:10px}
}

/* Graceful fallback, including older WebKit builds. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .app-shell :is(.glass,.sidebar,.topbar,.clock-chip,.live-chip) {background-color:rgba(26,49,72,.92)}
  #modal-root .modal {background-color:rgba(27,58,82,.96)}
}
@media (hover:none) {
  .app-shell :is(.stat-card,.slot-card,.box):hover {transform:none;box-shadow:var(--glass-shadow)}
  .app-shell .sidebar:hover {transform:none}
}
@media (prefers-reduced-motion:reduce) {
  .app-shell *, .app-shell *::before, .app-shell *::after, #modal-root *, #modal-root *::before, #modal-root *::after {
    animation:none!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* The old whole-view rise animated children twice. Keep the container stationary. */
.app-shell #view-root.anim-in {animation:none!important}
/* Guard against accidental hover scaling in reduced-motion mode. */
@media (prefers-reduced-motion:reduce) {
  .app-shell :is(.stat-card,.slot-card,.box):hover,
  .app-shell .sidebar:hover { transform:none!important; }
}

/* Manager account controls: shared premium glass material, without changing existing form behavior. */
.app-shell .manager-admin-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(236,248,255,.19);
  background: linear-gradient(145deg, rgba(102,133,156,.22), rgba(45,78,105,.17));
  box-shadow: 0 18px 48px rgba(2,12,28,.22), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.035);
}
.app-shell .manager-admin-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,252,255,.48), transparent);
  pointer-events: none;
}
.app-shell .manager-admin-panel > * { position: relative; z-index: 1; }
.app-shell .manager-admin-panel .section-head { margin-top: 0; }
.app-shell .manager-create-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  margin-top: 18px;
}
.app-shell .manager-create-form .form-field { min-width: 0; margin: 0; }
.app-shell .manager-create-form button { grid-column: 1 / -1; justify-self: start; min-height: 44px; }
.app-shell .manager-table-wrap { margin-top: 18px; }
.app-shell .manager-limit-note { margin-top: 14px; }
@media (max-width: 1100px) {
  .app-shell .manager-create-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .app-shell .manager-create-form { grid-template-columns: 1fr; }
  .app-shell .manager-create-form button { width: 100%; }
  .app-shell .manager-admin-panel { padding: 18px; }
}