:root{
  --bg:#f3f6fb;
  --surface:#ffffff;
  --surface-2:#f8fbff;
  --text:#142033;
  --muted:#6b7a90;
  --primary:#173d7a;
  --primary-2:#2f67c9;
  --accent:#f0b429;
  --success:#1f9d62;
  --warn:#f08c00;
  --danger:#d64545;
  --border:#dbe4f0;
  --shadow:0 12px 30px rgba(17,38,68,.08);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,Segoe UI,Arial,sans-serif;background:linear-gradient(180deg,#edf3fb 0%,#f6f8fc 100%);color:var(--text)}
a{text-decoration:none}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 28px;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;box-shadow:var(--shadow);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.brand-wrap{display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 420px}.brand-copy{display:flex;flex-direction:column;gap:4px;min-width:0}.brand{font-size:24px;font-weight:800;letter-spacing:.2px;line-height:1.15;word-break:break-word}.brand-sub{font-size:13px;opacity:.85;word-break:break-word}
.top-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end;flex:0 1 auto}
.user-chip{padding:10px 14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:999px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 15px;border-radius:12px;background:var(--primary-2);color:#fff;border:none;cursor:pointer;font-weight:600;box-shadow:0 6px 16px rgba(47,103,201,.18)}
.btn:hover{filter:brightness(.98)}
.btn.small{padding:8px 12px;font-size:14px}
.btn.gray,.btn-light{background:#eef4ff;color:var(--primary);box-shadow:none;border:1px solid var(--border)}
.btn.green{background:var(--success)} .btn.red{background:var(--danger)} .btn.orange{background:var(--warn)}
.layout{display:flex;min-height:calc(100vh - 84px);gap:22px;padding:22px}
.sidebar{width:260px;flex:0 0 260px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:22px;padding:18px;box-shadow:var(--shadow);align-self:flex-start;position:sticky;top:106px;z-index:20}
.sidebar .menu-title{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:6px 8px 10px}
.sidebar a{display:block;padding:13px 14px;border-radius:14px;color:var(--text);margin-bottom:8px;font-weight:600;border:1px solid transparent}
.sidebar a:hover,.sidebar a.active{background:linear-gradient(135deg,#edf4ff,#f8fbff);border-color:#d8e5ff;color:var(--primary)}
.content{flex:1;min-width:0}
.hero{padding:30px 32px;border-radius:26px;background:radial-gradient(circle at top right,rgba(240,180,41,.24),transparent 22%),linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 100%);color:#fff;box-shadow:var(--shadow)}
.hero h1,.hero h2{margin:0 0 8px}.hero p{margin:0;opacity:.9}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:18px}
.card h2,.card h3{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:18px 0}
.stat-label{font-size:14px;color:var(--muted);margin-bottom:8px}.stat{font-size:34px;font-weight:800;color:var(--primary)}
.toast-notice{position:fixed;right:18px;bottom:18px;z-index:30000;max-width:min(420px,calc(100vw - 28px));padding:14px 44px 14px 14px;border-radius:18px;border:1px solid var(--border);box-shadow:0 18px 48px rgba(15,23,42,.18);background:#fff;transition:transform .2s ease,opacity .2s ease}.toast-notice.success{background:#e9f8ef;color:#145c37}.toast-notice.error{background:#fff0f0;color:#8e2323}.toast-notice.hide{opacity:0;transform:translateY(8px)}.toast-label{font-size:12px;font-weight:700;opacity:.8;margin-bottom:4px}.toast-message{font-size:14px;line-height:1.45}.toast-close{position:absolute;right:10px;top:10px;border:0;background:transparent;font-size:20px;line-height:1;cursor:pointer;color:inherit}
.table-wrap{overflow:auto;border-radius:16px}
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface)}
th,td{padding:14px 12px;border-bottom:1px solid #ebf0f6;text-align:left;vertical-align:top}
th{background:#f7faff;color:#4b5b74;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
tr:hover td{background:#fbfdff}
.badge{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;color:#fff}
.badge-warn{background:var(--warn)}.badge-info{background:var(--primary-2)}.badge-success{background:var(--success)}.badge-danger{background:var(--danger)}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
label{display:block;font-size:14px;color:#44536a;margin-bottom:6px;font-weight:600}
input,select,textarea{width:100%;padding:12px 13px;border:1px solid #cfd9e6;border-radius:12px;background:#fff;font:inherit;outline:none}
input:focus,select:focus,textarea:focus{border-color:#8db5ff;box-shadow:0 0 0 4px rgba(47,103,201,.10)}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-box{max-width:450px;width:100%;background:#fff;border:1px solid var(--border);padding:30px;border-radius:26px;box-shadow:var(--shadow)}
.login-box .hero-mini{margin:-8px -8px 22px;padding:22px;border-radius:22px;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff}
.chart-box{display:flex;gap:14px;align-items:flex-end;height:230px;padding:18px;background:linear-gradient(180deg,#fbfdff,#f4f8fe);border:1px dashed #d5e2f3;border-radius:18px}
.bar{flex:1;border-radius:14px 14px 0 0;position:relative;min-height:12px;box-shadow:inset 0 -8px 18px rgba(255,255,255,.18)}
.bar span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:12px;white-space:nowrap;color:#51627a;margin-bottom:6px}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}.legend i{display:inline-block;width:12px;height:12px;border-radius:99px;margin-right:6px;vertical-align:middle}
.slot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.slot{padding:13px;border-radius:14px;text-align:center;border:1px solid var(--border);font-weight:700}
.slot.available{background:#eaf6ff;border-color:#9fd0ff;color:#0b5cab}
.slot.booked{background:#f3f5f8;color:#7b8796}
.slot.selected{background:#e8fff1;border-color:#7ad59e;color:#15693b}
.muted{color:var(--muted)}
.section-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.empty{padding:18px;border:1px dashed var(--border);border-radius:16px;background:var(--surface-2);color:var(--muted)}
@media(max-width:980px){.layout{display:block;padding:14px}.sidebar{width:auto;position:static;margin-bottom:16px}.content{padding:0}.topbar{padding:16px 18px}.brand-wrap{flex-basis:100%}.brand{font-size:21px}}

.profile-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.profile-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.meta-box{padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}.meta-box strong{display:block;margin-bottom:6px;color:var(--muted);font-size:13px}.chat-shell{display:grid;grid-template-columns:320px 1fr;gap:18px}.thread-list{display:flex;flex-direction:column;gap:10px}.thread-item{display:block;padding:14px;border:1px solid var(--border);border-radius:16px;background:#fff;color:var(--text)}.thread-item.active,.thread-item:hover{border-color:#a8c8ff;background:#f6faff}.thread-item .meta{display:flex;justify-content:space-between;gap:8px;align-items:center}.thread-item .snippet{color:var(--muted);font-size:13px;margin-top:6px}.thread-item .count{display:inline-flex;min-width:24px;height:24px;border-radius:99px;align-items:center;justify-content:center;background:var(--primary-2);color:#fff;font-size:12px;font-weight:700}.chat-panel{display:flex;flex-direction:column;min-height:540px}.chat-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--border);margin-bottom:14px}.messages-box{flex:1;display:flex;flex-direction:column;gap:12px;max-height:520px;overflow:auto;padding-right:4px}.msg{max-width:76%;padding:12px 14px;border-radius:16px;border:1px solid var(--border);background:#fff}.msg.mine{align-self:flex-end;background:#edf5ff;border-color:#b8d4ff}.msg .small{display:block;color:var(--muted);font-size:12px;margin-top:6px}.chat-form{display:grid;grid-template-columns:1fr auto;gap:10px;padding-top:14px;border-top:1px solid var(--border);margin-top:14px}.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}.contact-box{padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}@media(max-width:980px){.chat-shell,.profile-grid{grid-template-columns:1fr}.chat-panel{min-height:unset}}


.notify-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:20px;box-shadow:0 8px 20px rgba(0,0,0,.08)}
.notify-btn:hover{background:rgba(255,255,255,.2)}
.notify-icon{line-height:1;display:inline-flex;align-items:center;justify-content:center;transform:translateY(-1px)}
.notify-badge{position:absolute;top:-5px;right:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#ff4d4f;color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.notify-menu{position:relative}
.notify-dropdown{display:none;position:absolute;right:0;top:54px;width:340px;background:#fff;color:var(--text);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;z-index:40}
.notify-menu:hover .notify-dropdown{display:block}
.notify-head{padding:14px 16px;font-weight:800;background:#f7faff;border-bottom:1px solid var(--border)}
.notify-item,.notify-empty,.notify-all{display:block;padding:12px 16px;border-bottom:1px solid #eef3f8}
.notify-item strong{display:block;color:var(--text);margin-bottom:3px}
.notify-item span{display:block;color:var(--muted);font-size:13px}
.notify-item.unread{background:#f7fbff}
.notify-item.read{background:#fff}
.notify-empty{color:var(--muted)}
.notify-all{font-weight:700;color:var(--primary);background:#fbfdff;border-bottom:none}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.info-box{padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}
.kbd{display:inline-flex;padding:4px 8px;background:#eef4ff;border-radius:8px;border:1px solid var(--border);font-size:12px;font-weight:700;color:var(--primary)}
@media(max-width:980px){.notify-dropdown{width:min(340px,88vw);right:-30px}.top-actions{gap:8px}.notify-btn{width:42px;height:42px}}

.align-end{align-items:end}.analysis-form-row{align-items:end}.analysis-form-row .actions{margin-top:24px}


.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(180px,1fr));gap:12px;overflow:auto}
.calendar-col{border:1px solid #e7e7e7;border-radius:14px;background:#fff;min-height:220px}
.calendar-col-head{padding:12px 14px;border-bottom:1px solid #eee;font-weight:700;background:#fafafa;border-radius:14px 14px 0 0}
.calendar-event{margin:10px;padding:10px 12px;border:1px solid #ececec;border-radius:12px;background:#fcfcfc;display:grid;gap:4px}
.calendar-empty{padding:14px;color:#777}
@media (max-width: 1200px){.calendar-grid{grid-template-columns:repeat(3,minmax(220px,1fr));}}
@media (max-width: 800px){.calendar-grid{grid-template-columns:repeat(1,minmax(240px,1fr));}}

.dropzone{position:relative;border:2px dashed #c7d8ee;border-radius:16px;padding:18px;min-height:110px;display:grid;place-items:center;text-align:center;background:#f8fbff;cursor:pointer;transition:.18s ease}
.dropzone.drag,.dropzone:hover{border-color:#7faef5;background:#eef5ff}
.dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.photo-upload-box{display:grid;gap:8px}
.photo-preview{width:100%;min-height:110px;border:1px solid var(--border);border-radius:16px;background:#fff;display:grid;place-items:center;overflow:hidden}
.photo-preview img{width:100%;height:180px;object-fit:cover;display:block}
.photo-preview span{color:var(--muted);font-size:13px}


.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px}
.modal-card{background:#fff;border-radius:18px;box-shadow:0 20px 80px rgba(15,23,42,.25);width:min(680px,100%);padding:20px;max-height:90vh;overflow:auto}
.stack-form > div{margin-bottom:10px}

.site-logo{width:56px;max-width:56px;height:56px;flex:0 0 56px;object-fit:contain;border-radius:14px;background:#fff;padding:6px;box-shadow:0 8px 20px rgba(0,0,0,.08)}
.logo-preview-large{max-width:220px;max-height:120px;object-fit:contain;border:1px solid #e5e7eb;border-radius:14px;padding:8px;background:#fff}
.inline-form input[type=text], .inline-form input[type=email]{padding:8px 10px}

.permission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.log-box{max-height:460px;overflow:auto;background:#0f172a;color:#e2e8f0;border-radius:16px;padding:14px;font:12px/1.5 Consolas,Monaco,monospace;white-space:pre-wrap}
.code-muted{color:#94a3b8}

.mobile-menu-toggle{display:none;width:46px;height:46px;border:none;border-radius:14px;background:rgba(255,255,255,.14);color:#fff;font-size:24px;cursor:pointer}
.mobile-sidebar-backdrop{display:none}
@media(max-width:980px){
  html.mobile-sidebar-open,body.mobile-sidebar-open{overflow:hidden;height:100%}
  .mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
  .layout{position:relative;padding:16px;display:block}
  .content{width:100%}
  .sidebar{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:100dvh;z-index:120;transform:translateX(-102%);transition:.22s ease;margin:0;border-radius:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:16px 18px 28px;background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(248,250,252,.99))}
  body.mobile-sidebar-open .sidebar{transform:translateX(0)}
  .mobile-sidebar-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:110}
  body.mobile-sidebar-open .mobile-sidebar-backdrop{display:block}
  .sidebar .menu-group:last-child{padding-bottom:22px}
  .sidebar .menu-title{margin:6px 4px 12px}
  .topbar{padding:14px 16px;gap:12px;align-items:flex-start}
  .brand-wrap{flex:1 1 calc(100% - 58px);min-width:0}
  .top-actions{width:100%;justify-content:flex-start}
  .mobile-sidebar-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding:2px 2px 12px;background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(248,250,252,.97));border-bottom:1px solid #e2e8f0;z-index:2}
  .mobile-sidebar-title{font-size:15px;font-weight:800;color:#0f172a}
  .mobile-sidebar-close{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:none;border-radius:14px;background:#eaf1ff;color:#1d4ed8;font-size:24px;cursor:pointer}
}

.menu-group{display:grid;gap:8px;margin-bottom:10px}
.menu-group-toggle{width:100%;text-align:left;border:none;background:#eef4ff;color:#14345c;border-radius:14px;padding:12px 14px;font-weight:800;cursor:pointer;position:relative}
.menu-group-toggle:after{content:'▾';position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:12px;opacity:.75}
.menu-group-links{display:grid;gap:8px}
.menu-group:not(.open) .menu-group-links{display:none}
.menu-group:not(.open) .menu-group-toggle:after{content:'▸'}
@media(min-width:981px){.menu-group-toggle{cursor:default}.menu-group-toggle:after{display:none}}

@media(max-width:980px){
  .sidebar .menu-title{font-size:11px;margin:8px 4px 10px}
  .sidebar a{padding:15px 14px;font-size:15px}
  .menu-group{margin-bottom:12px}
  .menu-group-toggle{padding:14px 14px;font-size:15px;border-radius:16px}
}

.checkbox-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:8px}.checkbox-grid label{display:flex;gap:8px;align-items:center;padding:10px 12px;border:1px solid #e7ebf3;border-radius:12px;background:#fff}.schedule-grid td{vertical-align:top;min-width:140px}.schedule-grid .grid-item{padding:8px 10px;margin-bottom:8px;border:1px solid #e7ebf3;border-radius:12px;background:#fafbfe;line-height:1.45}.schedule-grid .grid-item:last-child{margin-bottom:0}
.schedule-grid .grid-dropzone{min-width:140px;vertical-align:top;transition:background .2s ease}
.schedule-grid .grid-dropzone.drop-hover{background:#eef5ff}
.draggable-schedule{cursor:grab}
.draggable-schedule.dragging{opacity:.5}
.checkbox-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}


.grid-item{border-left:6px solid rgba(0,0,0,.12);border-radius:14px;padding:10px 12px;box-shadow:0 6px 18px rgba(17,24,39,.08);margin-bottom:8px;background:#fff;}
.grid-item strong{display:block;font-size:13px;margin-bottom:4px;}
.grid-item span{font-size:12px;line-height:1.35;display:block;}
.subject-color-c1{background:linear-gradient(135deg,#eef2ff,#ffffff);border-left-color:#6366f1;}
.subject-color-c2{background:linear-gradient(135deg,#ecfeff,#ffffff);border-left-color:#06b6d4;}
.subject-color-c3{background:linear-gradient(135deg,#ecfdf5,#ffffff);border-left-color:#10b981;}
.subject-color-c4{background:linear-gradient(135deg,#fff7ed,#ffffff);border-left-color:#f97316;}
.subject-color-c5{background:linear-gradient(135deg,#fdf2f8,#ffffff);border-left-color:#ec4899;}
.subject-color-c6{background:linear-gradient(135deg,#f5f3ff,#ffffff);border-left-color:#8b5cf6;}
.subject-color-c7{background:linear-gradient(135deg,#eff6ff,#ffffff);border-left-color:#3b82f6;}
.subject-color-c8{background:linear-gradient(135deg,#fefce8,#ffffff);border-left-color:#eab308;}
.grid-dropzone.drop-hover{outline:2px dashed #6366f1;outline-offset:-4px;background:#f8faff;}

.subject-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;background:rgba(255,255,255,.55);margin-right:6px;font-size:13px;vertical-align:middle}
.subject-color-c1{background:linear-gradient(135deg,#eef2ff,#e0e7ff);border-left-color:#6366f1}
.subject-color-c2{background:linear-gradient(135deg,#ecfeff,#cffafe);border-left-color:#06b6d4}
.subject-color-c3{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-left-color:#22c55e}
.subject-color-c4{background:linear-gradient(135deg,#fff7ed,#ffedd5);border-left-color:#f97316}
.subject-color-c5{background:linear-gradient(135deg,#fdf2f8,#fce7f3);border-left-color:#ec4899}
.subject-color-c6{background:linear-gradient(135deg,#faf5ff,#f3e8ff);border-left-color:#a855f7}
.subject-color-c7{background:linear-gradient(135deg,#eff6ff,#dbeafe);border-left-color:#3b82f6}
.subject-color-c8{background:linear-gradient(135deg,#fefce8,#fef9c3);border-left-color:#eab308}

.weekly-slot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:10px}
.day-slot-card{background:#fff;border:1px solid #e7ebf3;border-radius:16px;padding:12px}
.day-slot-card textarea{width:100%;min-height:180px;resize:vertical;font-family:inherit}

.grid-add-btn{padding:6px 8px;font-size:12px;border:1px dashed #c7d2fe;background:#f8fafc;color:#334155;border-radius:10px;cursor:pointer}
.grid-dropzone{vertical-align:top;min-width:120px}
.grid-dropzone:hover{background:#f8fbff}


.grid-context-menu{position:absolute;z-index:9999;background:#fff;border:1px solid #d8deea;border-radius:14px;box-shadow:0 14px 40px rgba(15,23,42,.18);padding:8px;min-width:220px}
.grid-context-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:10px 12px;border-radius:10px;cursor:pointer}
.grid-context-menu button:hover{background:#f3f6fb}
.grid-copy-hint{position:sticky;bottom:10px;z-index:20;background:#111827;color:#fff;padding:10px 14px;border-radius:999px;display:inline-block;margin-top:12px;font-size:13px}
.grid-item{cursor:grab}
.grid-item:active{cursor:grabbing}


@media(min-width:981px){
  .layout{display:block;padding:22px 22px 22px 304px;position:relative}
  .sidebar{position:fixed;left:22px;top:106px;bottom:22px;width:260px;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 128px);margin:0}
  .content{width:100%}
}
.grid-context-menu button.redish{color:#b42318}
.checkbox-grid .actions{display:flex;gap:8px;justify-content:flex-end}

.topbar{z-index:1200}.sidebar{z-index:1100}.mobile-sidebar-backdrop{z-index:1090}.grid-context-menu{z-index:20000}.grid-add-inline{width:100%;min-height:52px;margin-top:2px;background:#f8fbff}.grid-dropzone{position:relative}.grid-dropzone .grid-add-inline{display:block}.grid-dropzone:has(.grid-item) .grid-add-inline{display:none}


/* UI polish v2 */
:root{
  --ui-primary:#1e40af;
  --ui-primary-soft:#eff6ff;
  --ui-secondary:#0f172a;
  --ui-success:#16a34a;
  --ui-warning:#f59e0b;
  --ui-danger:#dc2626;
  --ui-surface:#ffffff;
  --ui-surface-soft:#f8fafc;
  --ui-border:#e2e8f0;
  --ui-shadow:0 18px 48px rgba(15,23,42,.08);
}
body{background:radial-gradient(circle at top,#eef4ff 0,#f7f9fc 32%,#f8fafc 100%)}
.hero{position:relative;overflow:hidden;padding:34px 34px 30px;border-radius:28px;background:linear-gradient(135deg,#15326f 0%,#2563eb 56%,#60a5fa 100%)}
.hero:before,.hero:after{content:"";position:absolute;border-radius:999px;background:rgba(255,255,255,.12);filter:blur(2px)}
.hero:before{width:220px;height:220px;right:-60px;top:-70px}
.hero:after{width:140px;height:140px;right:160px;top:18px;background:rgba(255,255,255,.08)}
.topbar{background:linear-gradient(135deg,#0f172a 0%,#1d4ed8 55%,#2563eb 100%);box-shadow:0 14px 36px rgba(15,23,42,.18)}
.sidebar{background:rgba(255,255,255,.96);border-color:#e6edf7;box-shadow:0 18px 50px rgba(15,23,42,.08)}
.sidebar a{display:flex;align-items:center;gap:10px;font-weight:700}
.sidebar a.active,.sidebar a:hover{background:linear-gradient(135deg,#eef4ff,#ffffff);box-shadow:inset 0 0 0 1px #dbeafe}
.content{padding-bottom:26px}
.card{border-radius:22px;border-color:#e9eef6;box-shadow:var(--ui-shadow)}
.table-wrap{border:1px solid #e8eef6;border-radius:18px;background:#fff;box-shadow:0 10px 28px rgba(15,23,42,.04)}
table{border-radius:18px;overflow:hidden}
th{position:sticky;top:0;background:linear-gradient(180deg,#f8fbff,#f2f7ff);color:#334155;font-size:12px}
td{font-size:14px}
tr:nth-child(even) td{background:#fcfdff}
tr:hover td{background:#f8fbff}
input,select,textarea{background:#fff;border-color:#d7e0ec;border-radius:14px}
.btn{border-radius:14px;background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 12px 24px rgba(37,99,235,.2)}
.btn.btn-light,.btn.gray{background:#fff;color:#1d4ed8;border:1px solid #dbeafe;box-shadow:none}
.btn.green{background:linear-gradient(135deg,#16a34a,#15803d)}
.btn.red{background:linear-gradient(135deg,#dc2626,#b91c1c)}
.btn.orange{background:linear-gradient(135deg,#f59e0b,#d97706)}
.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:20px 0}
.metric-card{position:relative;overflow:hidden;padding:22px;border-radius:24px;background:linear-gradient(180deg,#fff,#f8fbff);border:1px solid #e5edf8;box-shadow:0 18px 40px rgba(15,23,42,.08)}
.metric-card:before{content:"";position:absolute;inset:auto -40px -40px auto;width:120px;height:120px;border-radius:999px;background:rgba(37,99,235,.08)}
.metric-card .metric-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.metric-card .metric-label{font-size:13px;color:#64748b;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.metric-card .metric-value{font-size:40px;line-height:1;font-weight:800;color:#0f172a}
.metric-card .metric-sub{font-size:13px;color:#64748b}
.metric-card .metric-icon{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;font-size:24px;color:#1d4ed8;background:#eef4ff;box-shadow:inset 0 0 0 1px #dbeafe}
.metric-card.primary .metric-icon{background:#eef4ff;color:#1d4ed8}
.metric-card.success .metric-icon{background:#ecfdf5;color:#15803d;box-shadow:inset 0 0 0 1px #bbf7d0}
.metric-card.warning .metric-icon{background:#fff7ed;color:#b45309;box-shadow:inset 0 0 0 1px #fed7aa}
.metric-card.dark .metric-icon{background:#e2e8f0;color:#0f172a;box-shadow:inset 0 0 0 1px #cbd5e1}
.section-card-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.section-card-header h2{margin:0;font-size:20px}
.surface-soft{background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid #edf2f7;border-radius:22px;padding:18px}
.quick-action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.quick-action{display:flex;align-items:center;gap:14px;padding:18px;background:linear-gradient(180deg,#fff,#f8fbff);border:1px solid #e8eef7;border-radius:20px;color:#0f172a;box-shadow:0 12px 28px rgba(15,23,42,.05)}
.quick-action:hover{transform:translateY(-1px);box-shadow:0 18px 34px rgba(15,23,42,.08)}
.quick-action-icon{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;font-size:20px;background:#eef4ff;color:#1d4ed8}
.quick-action-copy strong{display:block;margin-bottom:4px}
.quick-action-copy span{font-size:13px;color:#64748b}
.modern-table caption{caption-side:top;text-align:left;padding:0 0 12px;font-weight:800;color:#0f172a}
.modern-table td .muted{font-size:12px}
.progress-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;background:#f8fafc;border:1px solid #e2e8f0;font-size:12px;font-weight:700;color:#475569}
.page-shell{display:grid;gap:18px}
@media(max-width:980px){
  .hero{padding:26px 22px 24px;border-radius:24px}
  .metric-card .metric-value{font-size:34px}
  .dashboard-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .dashboard-grid,.quick-action-grid{grid-template-columns:1fr}
  .hero{padding:22px 18px}
  .card{padding:16px}
  th,td{padding:11px 10px}
  .top-actions{gap:6px}
  .brand{font-size:19px}
  .site-logo{width:48px;max-width:48px;height:48px;flex-basis:48px}
  .brand-sub{font-size:12px}
  .mobile-menu-toggle{width:42px;height:42px;font-size:22px}
}

.mobile-sidebar-head{display:none}
.bulk-list-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.bulk-list-item{padding:16px;border:1px solid #e5edf8;border-radius:18px;background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:0 10px 26px rgba(15,23,42,.05)}
.bulk-list-item strong{display:block;font-size:15px;color:#0f172a}
.bulk-list-meta{display:grid;gap:6px;margin-top:10px;font-size:13px;color:#475569}
.bulk-list-toolbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}


.login-floating-logo{display:flex;justify-content:center;align-items:center;margin-bottom:18px}
.login-floating-logo img{max-height:90px;max-width:240px;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(15,23,42,.16))}
.quick-filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:14px}
.quick-filter-card{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:18px;border:1px solid #dbeafe;background:linear-gradient(180deg,#fff,#f8fbff);text-decoration:none;color:#0f172a;box-shadow:0 10px 24px rgba(15,23,42,.05)}
.quick-filter-card strong{font-size:15px}
.quick-filter-card span{font-size:12px;color:#475569}
.quick-filter-card.active{border-color:#2563eb;box-shadow:0 12px 28px rgba(37,99,235,.16);background:linear-gradient(180deg,#eff6ff,#ffffff)}
.quick-filter-card.clear{justify-content:center;align-items:flex-start;background:linear-gradient(180deg,#fff7ed,#ffffff);border-color:#fed7aa}

/* Premium login page */
.login-premium-page{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px;overflow:hidden;background:linear-gradient(135deg,#081226 0%,#0f1f45 38%,#1d4ed8 100%)}
.login-premium-bg{position:absolute;border-radius:999px;filter:blur(20px);opacity:.5;animation:loginPremiumFloat 10s ease-in-out infinite}
.login-premium-bg-1{width:340px;height:340px;left:-90px;top:-80px;background:linear-gradient(135deg,rgba(168,85,247,.95),rgba(59,130,246,.9))}
.login-premium-bg-2{width:280px;height:280px;right:-80px;top:140px;background:linear-gradient(135deg,rgba(6,182,212,.9),rgba(34,197,94,.85));animation-delay:2s}
.login-premium-bg-3{width:220px;height:220px;left:24%;bottom:-60px;background:linear-gradient(135deg,rgba(245,158,11,.9),rgba(239,68,68,.85));animation-delay:4s}
.login-premium-shell{position:relative;z-index:2;display:grid;grid-template-columns:minmax(320px,1.08fr) minmax(340px,.92fr);gap:42px;align-items:center;max-width:1180px;width:100%}
.login-premium-brand{color:#fff;animation:loginPremiumFadeLeft .8s ease both}
.login-premium-badge{display:inline-flex;align-items:center;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.1);backdrop-filter:blur(10px);font-size:13px;font-weight:700;letter-spacing:.04em;color:#dbeafe;margin-bottom:20px}
.login-premium-brand h1{margin:0 0 18px;font-size:54px;line-height:1.05;font-weight:900;letter-spacing:-1.5px;text-shadow:0 12px 36px rgba(0,0,0,.22)}
.login-premium-brand p{margin:0 0 24px;max-width:620px;font-size:18px;line-height:1.8;color:rgba(255,255,255,.82)}
.login-premium-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;max-width:640px}
.login-premium-point{padding:18px 18px 16px;border-radius:22px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(12px);box-shadow:0 18px 40px rgba(2,6,23,.12)}
.login-premium-point strong{display:block;font-size:16px;margin-bottom:7px;color:#fff}
.login-premium-point span{display:block;font-size:14px;line-height:1.55;color:rgba(255,255,255,.76)}
.login-premium-card-wrap{display:flex;justify-content:center;animation:loginPremiumFadeRight .8s ease both}
.login-premium-card{position:relative;width:100%;max-width:455px;padding:34px 30px 24px;border-radius:30px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 24px 70px rgba(2,6,23,.3);overflow:hidden}
.login-premium-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.04));pointer-events:none}
.login-premium-glow{position:absolute;right:-42px;top:-42px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 68%);pointer-events:none}
.login-premium-logo{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;margin:0 auto 18px;min-height:92px}
.login-premium-logo img{max-width:148px;max-height:86px;width:auto;height:auto;display:block;filter:drop-shadow(0 10px 28px rgba(0,0,0,.28));animation:loginPremiumPulse 3s ease-in-out infinite}
.login-premium-head{position:relative;z-index:2;text-align:center;margin-bottom:22px}
.login-premium-head h2{margin:0 0 8px;font-size:31px;line-height:1.15;color:#fff;font-weight:800}
.login-premium-head p{margin:0;color:rgba(255,255,255,.76);font-size:15px}
.login-premium-alert{position:relative;z-index:2;margin-bottom:18px;padding:12px 14px;border-radius:16px;font-size:14px;border:1px solid rgba(255,255,255,.14);color:#fff;background:rgba(239,68,68,.18)}
.login-premium-alert.success{background:rgba(22,163,74,.18)}
.login-premium-form{position:relative;z-index:2}
.login-premium-field{margin-bottom:18px}
.login-premium-field label{display:block;margin-bottom:8px;font-size:14px;font-weight:700;color:#f8fafc}
.login-premium-inputwrap{position:relative}
.login-premium-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:16px;opacity:.92;pointer-events:none}
.login-premium-inputwrap input{width:100%;height:56px;padding:0 16px 0 44px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.1);color:#fff;outline:none;transition:all .25s ease;box-shadow:none}
.login-premium-inputwrap input::placeholder{color:rgba(255,255,255,.5)}
.login-premium-inputwrap input:focus{border-color:rgba(255,255,255,.32);box-shadow:0 0 0 4px rgba(99,102,241,.14);transform:translateY(-1px)}
.login-premium-btn{width:100%;height:58px;border:none;border-radius:18px;background:linear-gradient(135deg,#7c3aed,#06b6d4);color:#fff;font-size:16px;font-weight:800;cursor:pointer;position:relative;overflow:hidden;box-shadow:0 16px 34px rgba(124,58,237,.34);transition:transform .25s ease,box-shadow .25s ease}
.login-premium-btn:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 20px 36px rgba(124,58,237,.42)}
.login-premium-btn:before{content:"";position:absolute;top:0;left:-120%;width:92%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);transition:.72s}
.login-premium-btn:hover:before{left:130%}
.login-premium-footer{position:relative;z-index:2;margin-top:18px;text-align:center;font-size:13px;color:rgba(255,255,255,.68)}
@keyframes loginPremiumFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(14px,-18px,0) scale(1.04)}}
@keyframes loginPremiumPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes loginPremiumFadeLeft{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}}
@keyframes loginPremiumFadeRight{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:992px){.login-premium-shell{grid-template-columns:1fr;gap:26px}.login-premium-brand{text-align:center}.login-premium-brand h1{font-size:40px}.login-premium-brand p,.login-premium-points{margin-left:auto;margin-right:auto}}
@media(max-width:576px){.login-premium-page{padding:16px}.login-premium-card{padding:28px 18px 22px;border-radius:24px}.login-premium-brand h1{font-size:30px}.login-premium-brand p{font-size:15px;line-height:1.65}.login-premium-head h2{font-size:25px}.login-premium-inputwrap input,.login-premium-btn{height:52px}.login-premium-logo{min-height:78px}.login-premium-logo img{max-width:130px;max-height:74px}}


.login-premium-logo{--login-logo-bg:#fff;--login-logo-width:148px;--login-logo-padding:14px}
.login-premium-logo-box{display:flex;align-items:center;justify-content:center;background:var(--login-logo-bg);padding:var(--login-logo-padding);border-radius:22px;min-height:94px;box-shadow:0 18px 34px rgba(15,23,42,.18);border:1px solid rgba(255,255,255,.42)}
.login-premium-logo img{max-width:var(--login-logo-width);max-height:110px}
.login-role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 18px;position:relative;z-index:2}
.login-role-grid.compact{margin-bottom:20px}
.login-role-card{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);border-radius:18px;padding:14px 12px;color:#fff;text-align:left;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:all .22s ease;backdrop-filter:blur(10px)}
.login-role-card strong{font-size:15px}
.login-role-card small{font-size:12px;color:rgba(255,255,255,.7)}
.login-role-card .role-icon{font-size:22px;line-height:1;margin-bottom:2px}
.login-role-card:hover,.login-role-card.active{transform:translateY(-1px);background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34);box-shadow:0 14px 24px rgba(15,23,42,.18)}
.login-premium-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 18px;flex-wrap:wrap;position:relative;z-index:2}
.login-premium-row.between{margin-top:8px}
.login-premium-rolehint{font-size:13px;color:rgba(255,255,255,.75)}
.login-premium-inputwrap.has-toggle input{padding-right:52px}
.password-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);height:36px;width:36px;border:none;border-radius:12px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.password-toggle:hover{background:rgba(255,255,255,.2)}
.login-reset-page .login-premium-shell.single-card{grid-template-columns:1fr;max-width:640px}
.login-premium-card-wrap.full-center{justify-content:center}
.reset-card{max-width:560px}
.login-premium-note{position:relative;z-index:2;margin:0 0 18px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.82);font-size:14px;line-height:1.6}
@media(max-width:576px){.login-role-grid{grid-template-columns:1fr 1fr}.login-role-card{padding:12px 10px}.login-role-card strong{font-size:14px}.login-role-card small{font-size:11px}.login-premium-row{align-items:flex-start}}


/* v8 login premium upgrades */
.login-premium-logo-box{min-height:var(--login-logo-height,116px);display:flex;align-items:center;justify-content:center;background:var(--login-logo-bg,#fff);padding:var(--login-logo-padding,14px);border-radius:22px;box-shadow:0 14px 36px rgba(15,23,42,.12);}
.login-premium-logo-box img{max-width:var(--login-logo-width,148px);max-height:calc(var(--login-logo-height,116px) - 16px);width:auto;height:auto;object-fit:contain;display:block;}
.login-role-card{position:relative;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);transition:.25s ease;}
.login-role-card .role-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:var(--role-soft,rgba(37,99,235,.16));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
.login-role-card strong{color:#fff;}
.login-role-card small{color:rgba(255,255,255,.72);}
.login-role-card:hover,.login-role-card.active{border-color:var(--role-accent,#2563eb);box-shadow:0 14px 30px color-mix(in srgb, var(--role-accent,#2563eb) 26%, transparent);transform:translateY(-2px);}
.login-role-card.active{background:linear-gradient(135deg, color-mix(in srgb, var(--role-accent,#2563eb) 28%, rgba(255,255,255,.06)), rgba(255,255,255,.10));}
.login-role-card.active .role-icon{background:var(--role-accent,#2563eb);}
.login-role-card.active::after{content:'';position:absolute;inset:auto 14px 10px 14px;height:3px;border-radius:999px;background:var(--role-accent,#2563eb);}
.login-premium-countdowns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 16px;}
.count-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:5px;color:#fff;}
.count-card span{font-size:12px;color:rgba(255,255,255,.7);}
.count-card strong{font-size:20px;letter-spacing:.2px;}
.login-premium-note.strong{font-weight:700;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);}
.login-secondary-btn,.login-link-btn{height:50px;border-radius:16px;border:none;font-weight:800;cursor:pointer;}
.login-secondary-btn{flex:1;background:linear-gradient(135deg,#7c3aed,#06b6d4);color:#fff;box-shadow:0 14px 30px rgba(124,58,237,.28);}
.login-link-btn{padding:0 18px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.14);}
.login-link-btn[disabled]{opacity:.5;cursor:not-allowed;}
.wrap-actions{gap:12px;align-items:center;}
@media (max-width:576px){.login-premium-countdowns{grid-template-columns:1fr;}.wrap-actions{flex-direction:column;}.login-secondary-btn,.login-link-btn{width:100%;}}


/* v9 safe login fallback overrides */

.login-premium-page{background:linear-gradient(135deg,#0b1730 0%,#12305f 55%,#1d4ed8 100%);}
.login-premium-shell{grid-template-columns:minmax(280px,1fr) minmax(320px,460px);gap:32px;align-items:center;}
.login-premium-card{background:rgba(11,23,48,.78);border:1px solid rgba(255,255,255,.14);backdrop-filter:none;-webkit-backdrop-filter:none;}
.login-premium-card:before{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));}
.login-premium-logo{min-height:auto;margin-bottom:14px;}
.login-premium-logo-box{background:#fff !important;border-radius:20px;min-height:var(--login-logo-height,116px);padding:var(--login-logo-padding,14px);box-shadow:0 10px 30px rgba(2,6,23,.22);display:flex;align-items:center;justify-content:center;}
.login-premium-logo-box img{max-width:var(--login-logo-width,148px);max-height:calc(var(--login-logo-height,116px) - 20px);width:auto;height:auto;object-fit:contain;display:block;animation:none;filter:none;}
.login-role-card{position:relative;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);box-shadow:none;}
.login-role-card:hover,.login-role-card.active{transform:translateY(-2px);border-color:var(--role-accent,#2563eb);box-shadow:0 10px 24px rgba(2,6,23,.22);background:rgba(255,255,255,.12);}
.login-role-card.active::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;border-radius:18px 18px 0 0;background:var(--role-accent,#2563eb);}
.login-role-card.active::after{content:'';position:absolute;left:12px;right:12px;bottom:10px;height:3px;border-radius:999px;background:var(--role-accent,#2563eb);}
.login-role-card .role-icon{background:var(--role-soft,rgba(37,99,235,.16));}
.login-role-card.active .role-icon{background:var(--role-accent,#2563eb);}
.login-premium-inputwrap input{background:rgba(255,255,255,.08);}
.login-premium-btn,.login-secondary-btn{background:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);}
.login-link-btn{background:rgba(255,255,255,.08);}
@supports (background: color-mix(in srgb, red 50%, white)) {
  .login-role-card:hover,.login-role-card.active{box-shadow:0 14px 30px color-mix(in srgb, var(--role-accent,#2563eb) 26%, transparent);}
  .login-role-card.active{background:linear-gradient(135deg, color-mix(in srgb, var(--role-accent,#2563eb) 20%, rgba(255,255,255,.08)), rgba(255,255,255,.10));}
}
@media(max-width:992px){.login-premium-shell{grid-template-columns:1fr;max-width:680px;margin:0 auto;}.login-premium-brand{display:none;}.login-premium-card{max-width:100%;}}
@media(max-width:576px){.login-role-grid{grid-template-columns:1fr 1fr;}.login-premium-card{padding:22px 16px 18px;border-radius:20px;}.login-premium-head h2{font-size:24px;}.login-premium-row{gap:10px;}.password-toggle{width:34px;height:34px;}}


/* V10 login stability refinements */
.login-single-page .login-premium-shell.single-card{max-width:560px;margin:0 auto;}
.login-single-card{width:100%;max-width:520px;margin:0 auto;}
.login-premium-row.end-only{justify-content:flex-end;}
.login-premium-row.top-gap{margin-top:14px;}
.login-premium-card-wrap.full-center{justify-content:center;}


/* Split premium login */
.login-premium-page{position:relative;min-height:100vh;overflow:hidden;padding:28px}
.login-premium-bg{position:absolute;border-radius:50%;filter:blur(20px);opacity:.38;pointer-events:none}
.login-premium-bg-1{width:300px;height:300px;left:-80px;top:-60px;background:linear-gradient(135deg,#60a5fa,#2563eb)}
.login-premium-bg-2{width:240px;height:240px;right:-60px;top:120px;background:linear-gradient(135deg,#22c55e,#06b6d4)}
.login-premium-bg-3{width:220px;height:220px;left:20%;bottom:-70px;background:linear-gradient(135deg,#f59e0b,#ef4444)}
.login-split-shell{position:relative;z-index:2;max-width:1220px;margin:0 auto;min-height:calc(100vh - 56px);display:grid;grid-template-columns:minmax(0,1.12fr) minmax(430px,.88fr);gap:34px;align-items:center}
.login-split-showcase{color:#fff;padding:22px 10px 22px 6px}
.login-showcase-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);box-shadow:0 14px 34px rgba(15,23,42,.14);font-weight:700;font-size:13px;backdrop-filter:blur(10px);margin-bottom:18px}
.login-split-showcase h1{font-size:52px;line-height:1.05;letter-spacing:-1.1px;margin:0 0 18px;font-weight:900;color:#fff;text-shadow:0 14px 36px rgba(15,23,42,.22)}
.login-split-showcase p{font-size:18px;line-height:1.75;max-width:650px;margin:0 0 24px;color:rgba(255,255,255,.88)}
.login-showcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:760px}
.login-showcase-item{padding:18px 18px 16px;border-radius:22px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 40px rgba(15,23,42,.12);backdrop-filter:blur(10px)}
.login-showcase-item strong{display:block;font-size:17px;margin-bottom:8px;color:#fff}
.login-showcase-item span{display:block;font-size:14px;line-height:1.6;color:rgba(255,255,255,.82)}
.login-split-formside{display:flex;justify-content:center}
.login-premium-card{position:relative;overflow:hidden;background:rgba(255,255,255,.96);border:1px solid rgba(226,232,240,.95);border-radius:30px;padding:34px 34px 26px;box-shadow:0 24px 60px rgba(15,23,42,.16)}
.login-split-card{width:100%;max-width:500px}
.login-premium-glow{position:absolute;right:-50px;top:-50px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.14),transparent 70%);pointer-events:none}
.login-premium-logo{display:flex;justify-content:center;align-items:center;margin-bottom:18px}
.login-premium-logo-box{display:flex;justify-content:center;align-items:center;background:var(--login-logo-bg,#fff);width:var(--login-logo-width,168px);min-height:var(--login-logo-height,124px);padding:var(--login-logo-padding,16px);border-radius:24px;box-shadow:0 14px 32px rgba(15,23,42,.09);border:1px solid #eef2f7}
.login-premium-logo-box img{max-width:100%;max-height:calc(var(--login-logo-height,124px) - (var(--login-logo-padding,16px) * 2));height:auto;display:block}
.login-premium-head{text-align:center;margin-bottom:18px;position:relative;z-index:2}
.login-premium-head h2{margin:0 0 8px;font-size:32px;line-height:1.1;color:#0f172a;font-weight:900}
.login-premium-head p{margin:0;color:#64748b;font-size:15px;line-height:1.6}
.login-premium-alert{margin-bottom:16px;padding:13px 14px;border-radius:16px;font-size:14px;font-weight:600}
.login-premium-alert.error{background:#fff1f2;color:#b42318;border:1px solid #fecdd3}
.login-premium-alert.success{background:#ecfdf3;color:#166534;border:1px solid #bbf7d0}
.login-premium-form{position:relative;z-index:2}
.login-premium-field{margin-bottom:16px}
.login-premium-field label{display:block;margin-bottom:7px;font-size:14px;font-weight:700;color:#334155}
.login-premium-inputwrap{position:relative}
.login-premium-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:16px;opacity:.85}
.login-premium-inputwrap input{width:100%;height:56px;border-radius:18px;border:1px solid #d7e1ee;background:#fff;padding:0 16px 0 44px;font:inherit;outline:none;transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease}
.login-premium-inputwrap input:focus{border-color:#8db5ff;box-shadow:0 0 0 4px rgba(37,99,235,.10);transform:translateY(-1px)}
.login-premium-inputwrap.has-toggle input{padding-right:58px}
.password-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:none;background:#eef4ff;border-radius:12px;cursor:pointer;font-size:17px;color:#1d4ed8}
.login-premium-row{display:flex;justify-content:flex-end;align-items:center;margin:4px 0 18px}
.forgot-link{font-size:14px;font-weight:700;color:#2563eb}
.forgot-link:hover{color:#1d4ed8}
.login-premium-btn{width:100%;height:58px;border:none;border-radius:18px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 16px 34px rgba(37,99,235,.26);transition:transform .2s ease, box-shadow .2s ease}
.login-premium-btn:hover{transform:translateY(-2px);box-shadow:0 20px 38px rgba(37,99,235,.30)}
.login-premium-footer{text-align:center;margin-top:16px;font-size:13px;color:#64748b}
.align-left-desktop{text-align:left}
@media(max-width:1100px){
  .login-split-shell{grid-template-columns:1fr;gap:22px;max-width:780px}
  .login-split-showcase{text-align:center;padding:0 6px}
  .login-split-showcase p{margin-left:auto;margin-right:auto}
  .login-showcase-grid{margin:0 auto}
  .align-left-desktop{text-align:center}
  .login-split-card{max-width:560px}
}
@media(max-width:700px){
  .login-premium-page{padding:16px}
  .login-split-shell{min-height:auto;padding:14px 0}
  .login-split-showcase h1{font-size:34px}
  .login-split-showcase p{font-size:15px;line-height:1.65}
  .login-showcase-grid{grid-template-columns:1fr}
  .login-premium-card{padding:26px 18px 20px;border-radius:24px}
  .login-premium-head h2{font-size:28px}
  .login-premium-logo-box{border-radius:20px}
}


.login-showcase-counters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:760px;margin:0 0 18px}
.login-counter-card{position:relative;padding:18px 18px 16px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 40px rgba(15,23,42,.12);backdrop-filter:blur(10px);overflow:hidden;animation:loginFloatY 6.2s ease-in-out infinite}
.login-counter-card:before{content:"";position:absolute;inset:auto -32px -36px auto;width:110px;height:110px;border-radius:999px;background:rgba(255,255,255,.12)}
.login-counter-value{display:block;font-size:34px;line-height:1;font-weight:900;color:#fff;margin-bottom:8px;letter-spacing:-1px}
.login-counter-label{display:block;font-size:13px;line-height:1.5;color:rgba(255,255,255,.82);font-weight:600}
.float-delay-1{animation-delay:0s}.float-delay-2{animation-delay:1.2s}.float-delay-3{animation-delay:2.4s}
.stat-float{animation:loginFloatY 7s ease-in-out infinite}.stat-float-1{animation-delay:.2s}.stat-float-2{animation-delay:1.2s}.stat-float-3{animation-delay:2.1s}.stat-float-4{animation-delay:3s}
.login-success-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:760px;margin:18px 0 0}
.login-success-box{position:relative;padding:20px 20px 18px;border-radius:24px;border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 40px rgba(15,23,42,.12);overflow:hidden}
.login-success-box.primary{background:linear-gradient(135deg,rgba(37,99,235,.28),rgba(59,130,246,.15))}
.login-success-box.secondary{background:linear-gradient(135deg,rgba(14,165,233,.26),rgba(16,185,129,.14))}
.login-success-box:before{content:"";position:absolute;right:-26px;top:-26px;width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.09)}
.login-success-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.login-success-top strong{font-size:30px;line-height:1;font-weight:900;color:#fff;letter-spacing:-1px}
.login-success-tag{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);font-size:12px;font-weight:800;color:#e0ecff}
.login-success-box p{margin:0 0 12px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.82)}
.progress-line{height:10px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.progress-line span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ffffff,#bfdbfe);box-shadow:0 8px 18px rgba(255,255,255,.24)}
.progress-line.alt span{background:linear-gradient(90deg,#cffafe,#bbf7d0)}
.login-animated-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:760px;margin-top:18px}
.login-mini-stat{padding:16px 16px 14px;border-radius:22px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.16);box-shadow:0 16px 34px rgba(15,23,42,.12);backdrop-filter:blur(10px)}
.mini-stat-kicker{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#cfe0ff;margin-bottom:8px}
.login-mini-stat strong{display:block;font-size:26px;line-height:1.1;color:#fff;font-weight:900;margin-bottom:6px}
.login-mini-stat small{display:block;font-size:13px;line-height:1.5;color:rgba(255,255,255,.78)}
.glass-rise{animation:loginRiseGlow 5.8s ease-in-out infinite}.rise-1{animation-delay:.1s}.rise-2{animation-delay:1.1s}.rise-3{animation-delay:2.1s}
.pulse-soft{animation:loginPulseSoft 4.4s ease-in-out infinite}.delay-soft{animation-delay:1.4s}
@keyframes loginFloatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes loginRiseGlow{0%,100%{transform:translateY(0);box-shadow:0 16px 34px rgba(15,23,42,.12)}50%{transform:translateY(-10px);box-shadow:0 24px 44px rgba(37,99,235,.18)}}
@keyframes loginPulseSoft{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}
@media(max-width:1100px){.login-showcase-counters,.login-success-panel,.login-animated-stats{margin-left:auto;margin-right:auto}.login-showcase-counters,.login-animated-stats{max-width:720px}}
@media(max-width:700px){.login-showcase-counters,.login-success-panel,.login-animated-stats{grid-template-columns:1fr}.login-counter-value{font-size:30px}.login-success-top strong{font-size:26px}.login-mini-stat strong{font-size:24px}}


/* v13 login countdown and mobile order */
.login-shell-v13{grid-template-columns:minmax(0,1.04fr) minmax(470px,.96fr);gap:40px;align-items:center}
.login-showcase-v13{padding-right:8px}
.login-formside-v13{justify-content:flex-end}
.login-card-v13{max-width:560px;padding:36px 38px 28px;background:rgba(255,255,255,.98)}
.login-brand-title{font-size:28px;line-height:1.15;font-weight:900;color:#12284c;text-align:center;margin:2px 0 10px;letter-spacing:-.4px}
.login-card-v13 .login-premium-head h2{color:#12284c;text-align:center}
.login-card-v13 .login-premium-head p{color:#5b6b83;text-align:center}
.login-card-v13 .login-premium-field label{color:#1f2f49}
.login-card-v13 .dark-inputs input{background:#f7faff;border:1px solid #d9e3f2;color:#12284c}
.login-card-v13 .dark-inputs input::placeholder{color:#7b8aa2}
.login-card-v13 .login-premium-icon{color:#5b6b83}
.login-card-v13 .password-toggle{background:#edf3ff;color:#284f93}
.login-card-v13 .forgot-link.dark-link{color:#284f93;font-weight:700}
.login-card-v13 .dark-footer{color:#687891}
.login-countdown-stack{display:grid;grid-template-columns:1fr;gap:16px;max-width:540px;margin-top:12px}
.exam-count-card{position:relative;overflow:hidden;padding:22px 22px 18px;border-radius:24px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 38px rgba(15,23,42,.12);backdrop-filter:blur(12px);animation:statFloatY 6s ease-in-out infinite}
.exam-count-card:before{content:"";position:absolute;inset:auto -30px -30px auto;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 68%)}
.exam-count-card.lgs-card{animation-delay:1.2s}
.exam-count-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}
.exam-kicker{display:inline-flex;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.16);font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#e8eefc}
.exam-count-top strong{font-size:20px;line-height:1.25;color:#fff;max-width:260px;text-align:right}
.exam-count-value-wrap{display:flex;align-items:flex-end;gap:10px;margin-bottom:10px}
.exam-count-value{font-size:64px;line-height:1;font-weight:900;color:#fff;letter-spacing:-2px;text-shadow:0 14px 26px rgba(15,23,42,.14)}
.exam-count-unit{font-size:18px;font-weight:800;color:#dbe7ff;padding-bottom:10px}
.exam-count-sub{font-size:14px;color:rgba(255,255,255,.84);margin-bottom:14px}
.exam-progress{height:10px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.exam-progress span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#fbbf24,#fde68a);box-shadow:0 8px 18px rgba(251,191,36,.28);transition:width .8s ease}
.exam-progress.alt span{background:linear-gradient(90deg,#22c55e,#86efac);box-shadow:0 8px 18px rgba(34,197,94,.25)}
.exam-count-card.is-expired .exam-count-value{font-size:44px}
@keyframes statFloatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (max-width:1100px){.login-shell-v13{grid-template-columns:1fr;gap:24px}.login-formside-v13{justify-content:center}.login-showcase-v13{padding-right:0}.login-countdown-stack{max-width:none}}
@media (max-width:768px){.login-shell-v13{display:flex;flex-direction:column}.login-formside-v13{order:1;width:100%}.login-showcase-v13{order:2;width:100%}.login-card-v13{max-width:100%;padding:28px 22px 22px}.login-brand-title{font-size:24px}.login-split-showcase h1{font-size:34px}.exam-count-value{font-size:52px}.exam-count-top strong{font-size:18px;text-align:left;max-width:none}.exam-count-top{flex-direction:column;align-items:flex-start}.login-premium-logo{margin-bottom:12px}.login-premium-logo-box{margin-left:auto;margin-right:auto}}
@media (max-width:480px){.login-premium-page.login-split-page{padding:14px}.login-card-v13{border-radius:24px}.exam-count-card{padding:18px 18px 16px}.exam-count-value{font-size:44px}.exam-count-unit{font-size:16px;padding-bottom:7px}}

.exam-count-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}
.exam-time-box{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:92px;padding:14px 10px;border-radius:18px;position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(124,58,237,.24),rgba(6,182,212,.22));border:1px solid rgba(255,255,255,.18);box-shadow:0 0 10px rgba(124,58,237,.26),0 0 22px rgba(6,182,212,.20),inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 18px rgba(255,255,255,.06),0 12px 24px rgba(15,23,42,.12);backdrop-filter:blur(10px);transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease}
.exam-time-box:before{content:"";position:absolute;top:0;left:-120%;width:80%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.24),transparent);transition:left .7s ease}
.exam-time-box:hover{transform:translateY(-4px) scale(1.03);border-color:rgba(255,255,255,.28);box-shadow:0 0 20px rgba(124,58,237,.52),0 0 40px rgba(6,182,212,.40),inset 0 0 22px rgba(255,255,255,.14),0 18px 34px rgba(15,23,42,.18)}
.exam-time-box:hover:before{left:130%}
.exam-time-box span{display:block;font-size:34px;line-height:1;font-weight:900;color:#fff;letter-spacing:-1px;text-shadow:0 0 10px rgba(124,58,237,.80),0 0 20px rgba(6,182,212,.58),0 10px 20px rgba(15,23,42,.16)}
.exam-time-box small{display:block;margin-top:8px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#e0e7ff}
.exam-count-card.is-expired .exam-time-box span{font-size:28px}
@media (max-width:768px){.exam-count-grid{gap:10px}.exam-time-box{min-height:84px;padding:12px 8px}.exam-time-box span{font-size:28px}.exam-time-box small{font-size:11px}}
@media (max-width:480px){.exam-count-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.exam-time-box{min-height:78px}.exam-time-box span{font-size:26px}}

/* v20 mobile sidebar layering and premium animation fix */
@media (max-width: 980px) {
  .topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  body.mobile-sidebar-open .topbar,
  html.mobile-sidebar-open .topbar {
    z-index: 80;
  }

  .mobile-sidebar-backdrop {
    position: fixed;
    inset: 0;
    display: none;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1390;
    opacity: 0;
    transition: opacity .28s ease;
  }

  body.mobile-sidebar-open .mobile-sidebar-backdrop {
    display: block;
    opacity: 1;
  }

  .sidebar {
    position: fixed;
    inset: 0;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    min-height: 100dvh;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
    padding: calc(env(safe-area-inset-top, 0px) + 4px) 16px calc(env(safe-area-inset-bottom, 0px) + 22px);
    background:
      radial-gradient(circle at top left, rgba(59,130,246,0.22), transparent 34%),
      radial-gradient(circle at bottom left, rgba(168,85,247,0.20), transparent 32%),
      linear-gradient(180deg, rgba(255,255,255,0.97), rgba(248,250,252,0.95));
    box-shadow: 0 22px 60px rgba(15,23,42,0.24);
    backdrop-filter: blur(18px) saturate(155%);
    -webkit-backdrop-filter: blur(18px) saturate(155%);
    z-index: 1400;
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
    transition:
      transform .34s cubic-bezier(.22,1,.36,1),
      opacity .26s ease,
      visibility .26s ease,
      box-shadow .26s ease;
    overflow-y: auto;
    overflow-x: hidden;
  }

  body.mobile-sidebar-open .sidebar {
    transform: translateX(0) scale(1);
    opacity: 1;
    visibility: visible;
  }

  .mobile-sidebar-head {
    display: flex !important;
    position: sticky;
    top: 0;
    margin: 0 -16px 16px;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 14px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.92));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(148,163,184,0.20);
    z-index: 3;
  }

  .mobile-sidebar-title {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .02em;
    color: #0f172a;
  }

  .mobile-sidebar-close {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(59,130,246,0.14);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(219,234,254,0.92));
    color: #1d4ed8;
    box-shadow: 0 8px 20px rgba(37,99,235,0.18);
  }

  .sidebar .menu-title {
    margin: 10px 4px 12px;
  }

  .sidebar a,
  .menu-group-toggle {
    border-radius: 18px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 10px 24px rgba(15,23,42,0.05);
  }

  .sidebar a {
    margin-bottom: 10px;
    background: rgba(255,255,255,0.66);
    border: 1px solid rgba(226,232,240,0.95);
  }

  .sidebar a:hover,
  .sidebar a.active {
    background: linear-gradient(135deg, rgba(239,246,255,0.98), rgba(255,255,255,0.98));
    border-color: rgba(147,197,253,0.85);
    box-shadow: 0 12px 26px rgba(59,130,246,0.12);
  }

  .menu-group-toggle {
    background: linear-gradient(135deg, rgba(239,246,255,0.96), rgba(255,255,255,0.92));
    border: 1px solid rgba(191,219,254,0.9);
  }
}


/* v21 full-screen mobile sidebar fit */
@media (max-width: 980px) {
  .layout {
    padding: 14px;
  }

  .topbar {
    border-radius: 20px;
  }

  .sidebar .menu-group:last-child {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  }
}


.appointment-calendar-table-wrap{border:1px solid #e6edf7;background:linear-gradient(180deg,#ffffff,#fbfdff)}
.appointment-calendar-table th:nth-child(1),.appointment-calendar-table td:nth-child(1){padding-left:16px}
.appointment-calendar-table td{white-space:normal}
.appointment-date-cell{font-weight:800;color:var(--primary)}
.appointment-status-row td{border-bottom:1px solid #edf2f8}
.appointment-status-active_open td:first-child{box-shadow:inset 4px 0 0 0 var(--success)}
.appointment-status-next_open td:first-child{box-shadow:inset 4px 0 0 0 var(--primary-2)}
.appointment-status-manual_open td:first-child{box-shadow:inset 4px 0 0 0 var(--warn)}
.appointment-status-closed td:first-child{box-shadow:inset 4px 0 0 0 var(--danger)}
@media(max-width:760px){
  .appointment-calendar-table{min-width:640px}
}


/* Teacher/Admin mobile usability fixes */
@media (max-width: 900px){
  body{overflow-x:hidden}
  .topbar{padding:14px 14px 12px;gap:12px}
  .top-actions{width:100%;justify-content:flex-start;gap:8px}
  .user-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .layout{padding:12px}
  .card{padding:14px;border-radius:18px}
  .table-wrap{overflow:auto;-webkit-overflow-scrolling:touch}
  .table-wrap table{min-width:760px}
  .actions{display:flex;flex-wrap:wrap}
  input,select,textarea,button{font-size:16px}
}
@media (max-width: 640px){
  .topbar{padding:12px 12px 10px}
  .brand-wrap{gap:10px;align-items:flex-start}
  .brand-copy{min-width:0}
  .brand{font-size:18px}
  .brand-sub{display:none}
  .notify-btn{width:42px;height:42px}
  .sidebar{padding:14px;border-radius:18px}
  .sidebar a{padding:12px 12px}
  .section-title{align-items:flex-start}
}