:root {
  --bg: #0b1020;
  --panel: #111827;
  --panel-2: #172033;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: #243047;
  --accent: #4f46e5;
  --accent-2: #7c3aed;
  --success: #10b981;
  --danger: #ef4444;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}
html[data-theme='light'] {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --panel-2: #eef2f8;
  --text: #111827;
  --muted: #4b5563;
  --border: #d6dbe7;
  --accent: #4338ca;
  --accent-2: #7c3aed;
  --shadow: 0 10px 30px rgba(17,24,39,.08);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, Arial, sans-serif; background: linear-gradient(180deg,var(--bg),color-mix(in srgb, var(--bg) 90%, black)); color: var(--text); }
.container { width: min(1200px, calc(100% - 32px)); margin: 0 auto; }
.topbar { border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); background: color-mix(in srgb, var(--bg) 88%, transparent); position: sticky; top: 0; z-index: 10; }
.topbar .inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; gap: 16px; }
.brand { font-weight: 700; letter-spacing: .2px; }
.nav { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.btn, button, input[type='submit'] { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--border); background: var(--panel-2); color: var(--text); border-radius: 12px; padding: 10px 14px; cursor:pointer; text-decoration:none; font-weight:600; }
.btn.primary { background: linear-gradient(135deg,var(--accent),var(--accent-2)); border-color: transparent; color: #fff; }
.btn.danger { background: color-mix(in srgb, var(--danger) 18%, var(--panel)); }
.btn.wide { width: 100%; }
.icon-btn { width: 44px; padding: 10px; }
.hero { padding: 40px 0 24px; }
.hero-card, .panel { background: color-mix(in srgb, var(--panel) 92%, transparent); border:1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow); }
.hero-card { padding: 32px; }
.compact-card { padding: 28px; }
.grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.app-grid { grid-template-columns: repeat(var(--app-cols, 3), minmax(0, 1fr)); }
.app-card { padding:20px; min-height:180px; display:flex; flex-direction:column; gap:12px; justify-content:space-between; }
.app-head { display:flex; gap:14px; align-items:center; }
.app-icon { width:52px; height:52px; border-radius:14px; background: var(--panel-2); display:grid; place-items:center; overflow:hidden; border:1px solid var(--border); }
.app-icon img { width:100%; height:100%; object-fit:cover; }
.muted { color: var(--muted); }
.page-section { padding: 22px 0 32px; }
.forms { display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap:18px; }
.panel { padding:20px; }
label { display:block; font-size:.9rem; margin: 10px 0 6px; color: var(--muted); }
input[type='text'], input[type='url'], input[type='number'], input[type='password'], textarea, select, input[type='file'] { width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background: var(--bg); color: var(--text); }
textarea { min-height:100px; resize:vertical; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse: collapse; }
th, td { text-align:left; padding: 12px 10px; border-bottom:1px solid var(--border); vertical-align: top; }
.cards-stack { display:grid; gap:18px; }
.small { font-size:.875rem; }
.badge { display:inline-block; padding:4px 10px; border-radius:999px; background: var(--panel-2); border:1px solid var(--border); font-size:.8rem; }
.footer-space { height:40px; }
.login-center { min-height: calc(100vh - 72px); display:grid; place-items:center; }
.checks { display:grid; gap:8px; max-height:240px; overflow:auto; padding:8px; border:1px solid var(--border); border-radius:12px; background: var(--bg); }
a { color: inherit; }
.login-actions { display:grid; gap:12px; margin-top: 22px; }
.motd-box { border:1px solid var(--border); background: var(--panel-2); border-radius:16px; padding:16px; margin-top:16px; }
.motd-title { font-weight:700; margin-bottom:8px; }
.alert.error { background:#3a1820; color:#ffd3da; border:1px solid #5b2230; border-radius:14px; padding:12px 14px; margin-bottom:14px; }
.inline-form { display:grid; gap:8px; margin-top:10px; }
.compact-action { display:inline-flex; margin-top:8px; margin-right:8px; }
.row-actions { display:flex; gap:10px; margin-top:10px; }
.sep { border:0; border-top:1px solid var(--border); margin:20px 0; }
summary.btn { list-style:none; width:max-content; }
summary.btn::-webkit-details-marker { display:none; }
@media (max-width: 700px) { .topbar .inner { align-items:flex-start; flex-direction:column; } }

.compact-detail-form { max-width: 320px; margin-top: 10px; }
@media (max-width: 980px) { .app-grid { grid-template-columns: repeat(min(var(--app-cols, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 640px) { .app-grid { grid-template-columns: 1fr; } }


.admin-tabs { display:grid; gap:18px; }
.admin-tab-list { display:flex; flex-wrap:wrap; gap:10px; }
.admin-tab-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--border); background: var(--panel-2); color: var(--text); border-radius: 999px; padding: 10px 16px; cursor:pointer; font-weight:700; }
.admin-tab-btn.is-active { background: linear-gradient(135deg,var(--accent),var(--accent-2)); border-color: transparent; color:#fff; }
.admin-tab-panel { display:none; }
.admin-tab-panel.is-active { display:block; }
.admin-tab-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap:18px; }


.brand-wrap{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:nowrap}
.brand-line{display:flex;align-items:baseline;gap:8px;min-width:0;flex-wrap:nowrap}
.brand{white-space:nowrap;line-height:1.2}
.portal-logo{max-height:40px;max-width:180px;width:auto;height:auto;display:block;object-fit:contain;border-radius:6px;flex:0 0 auto}
.settings-logo-preview{max-height:56px;max-width:240px;width:auto;height:auto;display:block;object-fit:contain;border-radius:8px}
.page-chip{font-size:1rem;opacity:.9;white-space:nowrap;line-height:1.2}

.admin-tab-grid.users-single-column{grid-template-columns:minmax(0,1fr)}
@media (max-width: 700px) { .brand-line{flex-wrap:wrap} }

.toolbar-row{display:flex;gap:14px;align-items:end;flex-wrap:wrap;margin:12px 0 14px}
.toolbar-field{display:grid;gap:6px;min-width:220px;flex:1 1 260px}
.toolbar-field-sm{flex:0 0 220px;min-width:200px}
.search-panel{padding:16px 20px}
.table-empty-row td{text-align:center;color:var(--muted);font-style:italic}
.brand-wrap{flex:1 1 auto;min-width:0}
.brand-line{flex:1 1 auto;min-width:0;white-space:nowrap}
.page-chip,.brand{display:inline-block;vertical-align:middle}
.nav{flex:0 0 auto}
@media (max-width: 900px){.brand-wrap{width:100%}.brand-line{white-space:normal}}

.sort-header{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer}
.sort-header .sort-arrow{opacity:.75;min-width:1em;text-align:center}
.sort-header.is-active .sort-arrow{opacity:1}
th .sort-header:hover{opacity:.9}


.top-banner{position:sticky;top:73px;z-index:9;border-bottom:1px solid var(--border)}
.top-banner-success{background:#137a54;color:#f4fff8}
.top-banner-danger{background:#8f1d1d;color:#fff1f1}
.top-banner-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}
.top-banner-text{font-size:.94rem;line-height:1.35}
.top-banner-close{background:transparent;border:0;color:inherit;font-size:1.2rem;padding:4px 6px;border-radius:8px}
.top-banner-close:hover{background:rgba(255,255,255,.12)}
.admin-portal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:18px}
@media (max-width:700px){.top-banner{top:101px}.top-banner-inner{align-items:flex-start}.top-banner-close{margin-top:2px}}

.notifications{position:relative;display:flex;align-items:center}
.notifications-panel{position:absolute;top:calc(100% + 10px);right:0;width:min(420px,calc(100vw - 32px));max-height:420px;overflow:auto;background:color-mix(in srgb,var(--panel) 96%, transparent);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:14px;z-index:30}
.notifications-header{font-weight:700;margin-bottom:10px}
.notifications-list{display:grid;gap:10px}
.notification-item{border:1px solid var(--border);border-radius:14px;padding:12px;background:var(--panel-2)}
.notification-title{font-weight:700;margin-bottom:6px}
.notification-message{font-size:.92rem;line-height:1.4;color:var(--text)}
.notification-info{border-left:4px solid var(--accent)}
.notification-warning{border-left:4px solid #f59e0b}
.notification-danger{border-left:4px solid var(--danger)}
.notifications-empty{padding:8px 2px}

.table-pager{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-top:14px;flex-wrap:wrap}
.pager-btn{min-width:38px;padding:8px 12px;border-radius:10px}
.pager-btn.is-active{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent;color:#fff}
.pager-btn:disabled{opacity:.5;cursor:default}


.reveal-field{display:flex;align-items:stretch;gap:8px}
.reveal-field input{flex:1 1 auto}
.reveal-btn{min-width:46px;padding:0 12px;border-radius:12px}