:root {
    color-scheme: dark;
    --page-bg: #020617;
    --surface: #0f172a;
    --surface-soft: #111c31;
    --surface-muted: #162033;
    --border: #24324a;
    --border-soft: #1b2940;
    --text: #f8fafc;
    --muted: #94a3b8;
    --primary: #3b82f6;
    --primary-hover: #2563eb;
}
html { scroll-behavior: smooth; }
body { background: var(--page-bg); }
::selection { background: rgba(59,130,246,.32); color:#fff; }
.site-content { width:min(83.333333%,1480px); margin-inline:auto; }
.surface { border:1px solid var(--border-soft); background:var(--surface); }
.surface-soft { border:1px solid var(--border-soft); background:var(--surface-soft); }
.focus-ring:focus,.form-control:focus { outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.16); }
.site-nav-link { display:inline-flex; align-items:center; color:#cbd5e1; font-size:.875rem; transition:color .18s ease; }
.site-nav-link i { color:#60a5fa; font-size:.8rem; }
.site-nav-link:hover { color:#fff; }
.mobile-site-nav-link { display:flex; align-items:center; gap:.75rem; border-radius:.5rem; padding:.75rem; color:#cbd5e1; font-size:.875rem; }
.mobile-site-nav-link i { color:#60a5fa; }
.mobile-site-nav-link:hover { background:#0f172a; color:#fff; }
.dashboard-header-control,.dashboard-user-button { display:inline-flex; flex-shrink:0; height:44px; align-items:center; justify-content:center; border:1px solid #334155; border-radius:.65rem; color:#cbd5e1; background:#020617; font-size:.875rem; transition:border-color .18s ease,background .18s ease,color .18s ease; }
.dashboard-header-control { min-width:44px; padding-inline:.75rem; }
.dashboard-icon-control { width:44px; min-width:44px; padding-inline:0; overflow:visible; }
.dashboard-user-button { display:flex; min-width:44px; gap:.65rem; padding:0 .75rem; }
.dashboard-header-control:hover,.dashboard-user-button:hover,.dashboard-user-button[aria-expanded="true"] { border-color:#475569; background:#0f172a; color:#fff; }
.app-sidebar { position:fixed; bottom:0; left:0; top:72px; z-index:40; display:none; width:18rem; overflow-y:auto; border-right:1px solid #1e293b; background:#020617; padding:1.25rem 1rem; }
.sidebar-section { padding:0 .75rem .5rem; color:#64748b; font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.dashboard-sidebar-link { display:flex; align-items:center; gap:.75rem; border:1px solid transparent; border-radius:.6rem; padding:.72rem .75rem; color:#cbd5e1; font-size:.875rem; transition:border-color .18s ease,background .18s ease,color .18s ease; }
.dashboard-sidebar-link i { width:1.25rem; text-align:center; color:#60a5fa; }
.dashboard-sidebar-link:hover { background:#0f172a; color:#fff; }
.dashboard-sidebar-link[aria-current="page"] { color:#fff; background:#172554; border-color:var(--primary); }
.dashboard-dropdown-link { display:flex; align-items:center; gap:.75rem; border-radius:.55rem; padding:.7rem .75rem; color:#cbd5e1; font-size:.875rem; transition:background .18s ease,color .18s ease; }
.dashboard-dropdown-link i { width:1.1rem; text-align:center; color:#60a5fa; }
.dashboard-dropdown-link:hover { background:#0f172a; color:#fff; }
.form-label { display:block; margin-bottom:.5rem; color:#cbd5e1; font-size:.82rem; font-weight:600; }
.form-hint { margin-top:.45rem; color:#64748b; font-size:.75rem; line-height:1.45; }
.form-control { width:100%; border:1px solid #334155; border-radius:.65rem; background:#020617; padding:.72rem .85rem; color:#f8fafc; font-size:.875rem; transition:border-color .18s ease,box-shadow .18s ease; }
.form-control::placeholder { color:#475569; }
.form-control:disabled { cursor:not-allowed; opacity:.55; }
textarea.form-control { min-height:120px; resize:vertical; }
select.form-control { color-scheme:dark; }
.checkbox-card { display:flex; cursor:pointer; align-items:flex-start; gap:.75rem; border:1px solid #26344b; border-radius:.7rem; background:#0b1324; padding:.85rem; transition:border-color .18s ease,background .18s ease; }
.checkbox-card:hover { border-color:#3b82f6; background:#0f1b31; }
.checkbox-card input { margin-top:.15rem; accent-color:#2563eb; }
.btn-primary,.btn-secondary,.btn-danger,.btn-ghost { display:inline-flex; min-height:42px; align-items:center; justify-content:center; gap:.55rem; border-radius:.65rem; padding:.65rem 1rem; font-size:.85rem; font-weight:700; transition:background .18s ease,border-color .18s ease,color .18s ease,opacity .18s ease; }
.btn-primary { border:1px solid var(--primary); background:var(--primary); color:#fff; }
.btn-primary:hover { background:#1d4ed8; border-color:#1d4ed8; }
.btn-secondary { border:1px solid #334155; background:#0f172a; color:#e2e8f0; }
.btn-secondary:hover { border-color:#475569; background:#172033; }
.btn-danger { border:1px solid #9f1239; background:#881337; color:#ffe4e6; }
.btn-danger:hover { background:#9f1239; }
.btn-ghost { border:1px solid transparent; background:transparent; color:#94a3b8; }
.btn-ghost:hover { background:#0f172a; color:#fff; }
.btn-primary:disabled,.btn-secondary:disabled,.btn-danger:disabled { cursor:not-allowed; opacity:.45; }
.data-table { width:100%; border-collapse:separate; border-spacing:0; }
.data-table th { border-bottom:1px solid #1e293b; background:#0b1324; padding:.78rem 1rem; text-align:left; color:#64748b; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.data-table td { border-bottom:1px solid #18243a; padding:.9rem 1rem; color:#cbd5e1; font-size:.82rem; vertical-align:middle; }
.data-table tbody tr:last-child td { border-bottom:0; }
.data-table tbody tr:hover td { background:#111a2d; }
.table-responsive { overflow-x:auto; }
.pagination-button { display:inline-flex; height:36px; min-width:36px; align-items:center; justify-content:center; border:1px solid #334155; border-radius:.55rem; background:#0f172a; color:#cbd5e1; }
.pagination-button:hover { border-color:#475569; color:#fff; }
.code-block { overflow:auto; border:1px solid #1e293b; border-radius:.75rem; background:#020617; padding:1rem; color:#cbd5e1; font: .78rem/1.7 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; white-space:pre-wrap; word-break:break-word; }
.detail-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; }
.detail-item { border:1px solid #1e293b; border-radius:.75rem; background:#0b1324; padding:1rem; }
.detail-item dt { color:#64748b; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.detail-item dd { margin-top:.5rem; color:#e2e8f0; font-size:.875rem; word-break:break-word; }
.toast-item { pointer-events:auto; display:flex; gap:.8rem; overflow:hidden; border:1px solid #334155; border-radius:.85rem; background:#0f172a; padding:.9rem 1rem; box-shadow:0 20px 45px rgba(0,0,0,.35); animation:toast-in .22s ease-out; }
.toast-item[data-type="success"] { border-color:#065f46; }
.toast-item[data-type="error"] { border-color:#9f1239; }
.toast-item[data-type="warning"] { border-color:#92400e; }
.toast-item[data-type="info"] { border-color:#1d4ed8; }
.toast-progress { height:2px; transform-origin:left; animation:toast-progress linear forwards; }
@keyframes toast-in { from { opacity:0; transform:translateY(-8px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes toast-progress { from { transform:scaleX(1); } to { transform:scaleX(0); } }
.site-scrollbar { scrollbar-width:thin; scrollbar-color:#334155 #0f172a; }
.site-scrollbar::-webkit-scrollbar { width:10px; height:10px; }
.site-scrollbar::-webkit-scrollbar-track { background:#0f172a; }
.site-scrollbar::-webkit-scrollbar-thumb { background:#334155; border:2px solid #0f172a; border-radius:999px; }
.site-scrollbar::-webkit-scrollbar-thumb:hover { background:#475569; }
.prose-legal h2 { margin-top:2.25rem; margin-bottom:.8rem; color:#f8fafc; font-size:1.2rem; font-weight:700; }
.prose-legal h3 { margin-top:1.5rem; margin-bottom:.5rem; color:#e2e8f0; font-weight:700; }
.prose-legal p,.prose-legal li { color:#a8b4c7; line-height:1.85; }
.prose-legal ul { margin:.75rem 0; padding-left:1.25rem; list-style:disc; }
@media (min-width:640px) { .detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

@media (min-width:1024px) { .app-sidebar { display:block; } }
@media (max-width:1279px) { .site-content { width:calc(100% - 3rem); max-width:1180px; } }
@media (max-width:767px) { .site-content { width:calc(100% - 2rem); } }

.app-content-shell { width:100%; max-width:none; padding:1.5rem 1rem 2.5rem; }
.notification-count { pointer-events:none; position:absolute; right:-.35rem; top:-.35rem; display:flex; min-width:1.2rem; height:1.2rem; align-items:center; justify-content:center; border:2px solid #020617; border-radius:999px; background:#f43f5e; padding:0 .2rem; color:#fff; font-size:.58rem; font-weight:800; line-height:1; }
.settings-tabs { display:flex; width:100%; gap:.35rem; overflow-x:auto; border-bottom:1px solid #1e293b; padding-bottom:.65rem; scrollbar-width:thin; }
.settings-tab { display:inline-flex; min-height:42px; flex:0 0 auto; align-items:center; gap:.55rem; border:1px solid transparent; border-radius:.65rem; padding:.65rem .9rem; color:#94a3b8; font-size:.84rem; font-weight:700; white-space:nowrap; }
.settings-tab i { color:#60a5fa; }
.settings-tab:hover { background:#0f172a; color:#fff; }
.settings-tab[aria-current="page"] { border-color:#1d4ed8; background:#172554; color:#fff; }
.settings-panel { border:1px solid #1e293b; border-radius:.8rem; background:#0b1324; padding:1.15rem; }
.settings-panel-title { display:flex; align-items:center; gap:.65rem; color:#f8fafc; font-weight:700; }
.settings-panel-title i { color:#60a5fa; }
.form-actions { display:flex; justify-content:flex-end; gap:.75rem; margin-top:1.5rem; border-top:1px solid #1e293b; padding-top:1.25rem; }
select.form-control { min-width:0; padding-right:2.75rem; background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%); background-position:calc(100% - 17px) calc(50% - 2px),calc(100% - 12px) calc(50% - 2px); background-size:5px 5px,5px 5px; background-repeat:no-repeat; appearance:none; }
.filter-bar { display:grid; width:100%; gap:1rem; }
@media (min-width:640px) { .app-content-shell { padding-inline:1.5rem; } }
@media (min-width:1280px) { .app-content-shell { padding:1.75rem 2rem 3rem; } }
@media (min-width:1536px) { .app-content-shell { padding-inline:2.5rem; } }
@media (max-width:639px) { .dashboard-user-button { padding-inline:.45rem; gap:.4rem; } .form-actions { flex-direction:column-reverse; } .form-actions .btn-primary,.form-actions .btn-secondary { width:100%; } }

.page-header-actions > form, .page-header-actions > a { max-width:100%; }
.page-header-actions select.form-control { min-width:12rem; max-width:100%; }
@media(max-width:639px){.page-header-actions > form,.page-header-actions > a,.page-header-actions > button{width:100%;}.page-header-actions select.form-control{width:100%;}}

.social-link { display:inline-flex; width:2.5rem; height:2.5rem; align-items:center; justify-content:center; border:1px solid #334155; border-radius:.75rem; background:#0f172a; color:#94a3b8; transition:color .18s ease,border-color .18s ease,transform .18s ease,background .18s ease; }
.social-link:hover { color:#fff; border-color:var(--primary); background:#172033; transform:translateY(-2px); }

/* Notification center */
.notification-dropdown { isolation:isolate; }
.notification-list { scrollbar-width:thin; scrollbar-color:#334155 #0f172a; }
.notification-list::-webkit-scrollbar { width:8px; }
.notification-list::-webkit-scrollbar-track { background:#0f172a; }
.notification-list::-webkit-scrollbar-thumb { border:2px solid #0f172a; border-radius:999px; background:#334155; }
.notification-item { position:relative; display:flex; width:100%; align-items:flex-start; gap:.75rem; border-bottom:1px solid #1e293b; background:#0f172a; padding:.9rem 1rem; text-align:left; transition:background .18s ease,opacity .18s ease; }
.notification-item:last-child { border-bottom:0; }
.notification-item:hover { background:#111c31; }
.notification-item.is-unread { background:#0c1830; }
.notification-item.is-unread:hover { background:#10203d; }
.notification-item.is-reading { pointer-events:none; opacity:.58; }
.notification-item-icon { display:flex; width:2.25rem; height:2.25rem; flex:0 0 auto; align-items:center; justify-content:center; border:1px solid #253651; border-radius:.7rem; background:#020617; color:#60a5fa; }
.notification-item.is-unread .notification-item-icon { border-color:#1d4ed8; background:#172554; color:#93c5fd; }
.notification-unread-dot { width:.5rem; height:.5rem; flex:0 0 auto; margin-top:.35rem; border-radius:999px; background:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.12); }
.notification-read-all:disabled { cursor:not-allowed; opacity:.45; }

/* Stable branded actions even when a saved color is missing or invalid. */
.brand-action { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; border:1px solid var(--primary); border-radius:.65rem; background:var(--primary); color:#fff; font-weight:700; transition:filter .18s ease,transform .18s ease; }
.brand-action:hover { filter:brightness(1.08); }
.brand-action:active { transform:translateY(1px); }

@media (max-width:639px) {
    .notification-dropdown { right:-3.5rem; width:calc(100vw - 1rem); max-width:25rem; }
}
.notification-item { border-left:0; border-right:0; border-top:0; color:inherit; font:inherit; }
.notification-message { display:-webkit-box; margin-top:.25rem; overflow:hidden; color:#94a3b8; font-size:.75rem; line-height:1.25rem; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
