/* HolyJournal — dashboard theme based on the supplied NanoKeys reference. */
:root,
html[data-theme],
html[data-theme][data-accent] {
    color-scheme: dark;
    --bg: #080908 !important;
    --bg-2: #0b0c0b !important;
    --surface: #131413 !important;
    --surface-2: #191a18 !important;
    --surface-3: #20211e !important;
    --border: #292a25 !important;
    --border-soft: #20211d !important;
    --text: #f4f4ef !important;
    --muted: #85867e !important;
    --accent-rgb: 245,185,35 !important;
    --accent: #f5b923 !important;
    --accent-2: #ffca3d !important;
    --accent-hi: #ffd15b !important;
    --accent-deep: #edae19 !important;
    --accent-link: #e7c76d !important;
    --accent-beta: #a88225 !important;
    --accent-soft: rgba(var(--accent-rgb),.12) !important;
    --accent-glow: rgba(var(--accent-rgb),.18) !important;
    --accent-ink: #171208 !important;
    --green: #36d381 !important;
    --red: #ed5969 !important;
    --orange: var(--accent) !important;
    --cyan: #1ec8ee;
    --purple: #a873f4;
    --sidebar-w: 232px !important;
    --radius: 11px !important;
    --radius-sm: 8px !important;
    --shadow: 0 12px 35px rgba(0,0,0,.18) !important;
    --shadow-lg: 0 24px 70px rgba(0,0,0,.62) !important;
}

/* --- Акцент: фиолетовый --- */
html[data-theme][data-accent="purple"] {
    --accent-rgb: 154,109,244 !important;
    --accent: #9a6df4 !important;
    --accent-2: #b28cf7 !important;
    --accent-hi: #c4a6ff !important;
    --accent-deep: #7c4fe0 !important;
    --accent-link: #c3aef4 !important;
    --accent-beta: #8a6dc9 !important;
    --accent-ink: #12081f !important;
    --orange: var(--accent) !important;
}

/* --- Акцент: синий --- */
html[data-theme][data-accent="blue"] {
    --accent-rgb: 56,139,253 !important;
    --accent: #388bfd !important;
    --accent-2: #58a6ff !important;
    --accent-hi: #79c0ff !important;
    --accent-deep: #1f6feb !important;
    --accent-link: #7cb7f5 !important;
    --accent-beta: #6d8fc9 !important;
    --accent-ink: #05101f !important;
    --orange: var(--accent) !important;
}

html { background: var(--bg) !important; }
body {
    min-width: 320px;
    color: var(--text) !important;
    background:
        radial-gradient(850px 460px at 72% -180px, rgba(var(--accent-rgb),.07), transparent 70%),
        linear-gradient(180deg, #090a09 0%, #070807 100%) !important;
    font-family: "Onest", "Segoe UI", system-ui, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}
body::before { display: none !important; }
* { scrollbar-width: thin; scrollbar-color: #3b3c36 #0b0c0b; }
::selection { color: var(--accent-ink); background: var(--accent); }
h1,h2,h3 { color: var(--text) !important; font-family: inherit !important; text-shadow: none !important; }
h1 { font-size: 30px !important; line-height: 1.12 !important; font-weight: 780 !important; letter-spacing: -.8px !important; }
h2 { font-size: 15px !important; line-height: 1.25 !important; font-weight: 700 !important; letter-spacing: -.2px !important; }
h3 { font-size: 13px !important; font-weight: 700 !important; }
a { color: var(--accent-link) !important; }
a:hover { color: var(--accent-hi) !important; opacity: 1 !important; }
.muted, small { color: var(--muted) !important; }
.green { color: var(--green) !important; }
.red { color: var(--red) !important; }
.orange { color: var(--orange) !important; }

/* Shell */
.layout { min-height: 100vh !important; background: transparent !important; }
.sidebar {
    width: var(--sidebar-w) !important;
    padding: 14px 12px 12px !important;
    gap: 0 !important;
    background: rgba(9,10,9,.96) !important;
    border-right: 1px solid #1d1e1b !important;
    box-shadow: 12px 0 40px rgba(0,0,0,.16) !important;
    backdrop-filter: blur(16px) !important;
}
.sidebar-logo {
    min-height: 50px !important;
    margin: 0 0 14px !important;
    padding: 0 6px 14px !important;
    gap: 10px !important;
    border-bottom: 1px solid #1d1e1b !important;
}
.logo-mark {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    border: 1px solid rgba(var(--accent-rgb),.42) !important;
    border-radius: 9px !important;
    color: var(--accent) !important;
    background: linear-gradient(145deg, rgba(var(--accent-rgb),.18), rgba(var(--accent-rgb),.04)) !important;
    box-shadow: inset 0 0 18px rgba(var(--accent-rgb),.06), 0 0 22px rgba(var(--accent-rgb),.05) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}
.logo-text { color: #f2f2ed !important; font-size: 13px !important; font-weight: 750 !important; }
.logo-text .beta { color: var(--accent-beta) !important; font-size: 8px !important; font-weight: 700 !important; }
/* --- Пикер акцента --- */
.accent-picker { position: relative !important; margin-left: auto !important; display: flex !important; align-items: center !important; }
.accent-btn {
    width: 20px !important; height: 20px !important; padding: 0 !important; flex: 0 0 20px !important;
    border-radius: 50% !important; cursor: pointer !important;
    border: 2px solid rgba(255,255,255,.22) !important;
    background: linear-gradient(145deg, var(--accent-hi), var(--accent-deep)) !important;
    box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.4) !important;
    transition: transform .12s ease, border-color .12s ease !important;
}
.accent-btn:hover { transform: scale(1.12) !important; border-color: rgba(255,255,255,.4) !important; }
.accent-popover {
    position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important;
    z-index: 200 !important; min-width: 148px !important;
    padding: 10px !important; border-radius: 12px !important;
    border: 1px solid var(--border) !important; background: var(--surface-2) !important;
    box-shadow: var(--shadow-lg) !important;
    opacity: 0 !important; visibility: hidden !important; transform: translateY(-4px) !important;
    transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s !important;
}
.accent-popover.open { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; transition: opacity .12s ease, transform .12s ease !important; }
.accent-popover-title { color: var(--muted) !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: .09em !important; text-transform: uppercase !important; margin: 0 0 8px 2px !important; }
.accent-swatches { display: flex !important; gap: 10px !important; }
.accent-swatch {
    width: 26px !important; height: 26px !important; padding: 0 !important; flex: 0 0 26px !important;
    border-radius: 50% !important; cursor: pointer !important;
    border: 2px solid transparent !important; box-shadow: 0 2px 8px rgba(0,0,0,.4) !important;
    transition: transform .12s ease !important;
}
.accent-swatch:hover { transform: scale(1.1) !important; }
.accent-swatch.active { border-color: #ffffff !important; box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 2px 8px rgba(0,0,0,.4) !important; }
.accent-swatch-green { background: linear-gradient(145deg, #ffca3d, #edae19) !important; }
.accent-swatch-purple { background: linear-gradient(145deg, #b28cf7, #7c4fe0) !important; }
.accent-swatch-blue { background: linear-gradient(145deg, #58a6ff, #1f6feb) !important; }
.nav-group { margin: 0 0 13px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
.nav-group-title {
    padding: 5px 10px 6px !important;
    color: #62635d !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
}
.nav-group-symbol { display: none !important; }
.nav-item {
    min-height: 38px !important;
    margin: 2px 0 !important;
    padding: 9px 10px !important;
    gap: 10px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    color: #8d8e87 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 550 !important;
    transition: color .16s ease, background .16s ease, border-color .16s ease !important;
}
.nav-item:hover { color: #ecece7 !important; background: #121310 !important; border-color: #252620 !important; }
.nav-item.active {
    color: var(--accent-hi) !important;
    background: linear-gradient(90deg, rgba(var(--accent-rgb),.14), rgba(var(--accent-rgb),.055)) !important;
    border-color: rgba(var(--accent-rgb),.25) !important;
}
.nav-item.active::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    left: -13px !important;
    top: 8px !important;
    width: 2px !important;
    height: 20px !important;
    border-radius: 0 3px 3px 0 !important;
    background: var(--accent) !important;
}
.nav-item .ico {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    color: currentColor !important;
    background: transparent !important;
    box-shadow: none !important;
}
.nav-item .ico::before { width: 16px !important; height: 16px !important; background: currentColor !important; opacity: .92; }
.nav-item .badge-count, .badge-count {
    min-width: 21px !important;
    height: 18px !important;
    margin-left: auto !important;
    padding: 1px 6px !important;
    border: 1px solid #2a2b26 !important;
    border-radius: 999px !important;
    color: #a2a39b !important;
    background: #171815 !important;
    font-size: 8px !important;
    line-height: 14px !important;
}
.nav-item.active .badge-count { color: var(--accent-ink) !important; background: var(--accent) !important; border-color: var(--accent) !important; }
.sidebar-actions {
    display: grid !important;
    gap: 6px !important;
    margin: auto 0 10px !important;
    padding-top: 10px !important;
}
.sidebar-actions .sidebar-cta {
    width: 100% !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    border: 1px solid #2b2c27 !important;
    border-radius: 8px !important;
    color: #b6b7af !important;
    background: #11120f !important;
    box-shadow: none !important;
    font-size: 9px !important;
    font-weight: 650 !important;
}
.sidebar-actions .sidebar-cta:hover { color: #f4f4ef !important; border-color: #45463f !important; background: #181916 !important; }
.sidebar-actions .sidebar-role-grant {
    color: var(--accent-hi) !important;
    border-color: rgba(var(--accent-rgb),.32) !important;
    background: rgba(var(--accent-rgb),.075) !important;
}
.sidebar-profile {
    min-height: 56px !important;
    margin: 0 !important;
    padding: 9px !important;
    gap: 9px !important;
    border: 1px solid #242520 !important;
    border-radius: 9px !important;
    color: #f3f3ee !important;
    background: #10110f !important;
    box-shadow: none !important;
}
.sidebar-profile::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #36d381;
    box-shadow: 0 0 10px rgba(54,211,129,.5);
    order: 3;
    margin-left: auto;
}
.sidebar-profile .avatar { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; border-radius: 8px !important; color: var(--accent-ink) !important; background: var(--accent) !important; box-shadow: none !important; font-size: 10px !important; }
.sidebar-profile .who b { color: #e9e9e4 !important; font-size: 10px !important; line-height: 1.2 !important; }
.sidebar-profile .who small { color: #6f706a !important; font-size: 8px !important; }

.main-area { margin-left: var(--sidebar-w) !important; min-width: 0 !important; background: transparent !important; }
.topbar {
    position: sticky !important;
    inset: auto !important;
    z-index: 30 !important;
    width: min(1180px, calc(100% - 48px)) !important;
    min-height: 50px !important;
    height: auto !important;
    margin: 18px auto 0 !important;
    padding: 8px 10px 8px 14px !important;
    border: 1px solid #242723 !important;
    border-radius: 11px !important;
    background:
        linear-gradient(90deg, rgba(17,36,43,.86), rgba(19,18,25,.92)),
        #111311 !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.18) !important;
    pointer-events: auto !important;
}
.topbar-leading { display: flex !important; align-items: center !important; gap: 10px !important; }
.topbar-title {
    display: inline !important;
    color: #cbd3d1 !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    letter-spacing: .1px !important;
    text-transform: none !important;
}
.topbar-title::before { content: "✦"; display: inline-block; margin-right: 8px; color: #20c3e7; }
.hamburger { display: none !important; }
.topbar-actions { display: flex !important; align-items: center !important; gap: 6px !important; pointer-events: auto !important; }
.topbar-actions > form { position: static !important; }
.topbar-action-btn,
.topbar-actions > form .topbar-action-btn {
    position: static !important;
    width: auto !important;
    height: 31px !important;
    min-height: 31px !important;
    padding: 6px 10px !important;
    gap: 7px !important;
    border: 1px solid #31342f !important;
    border-radius: 7px !important;
    color: #9b9d95 !important;
    background: rgba(15,17,15,.82) !important;
    box-shadow: none !important;
    font-size: 9px !important;
    justify-content: center !important;
}
.topbar-action-btn:hover { color: #eee !important; border-color: #4a4c45 !important; background: #181a17 !important; }
.topbar-action-label, .notif-bell > span:not(.top-icon):not(.notif-dot) { display: inline !important; }
.topbar-action-btn .top-icon { width: 13px !important; height: 13px !important; }
.topbar-action-btn .top-icon::before { width: 13px !important; height: 13px !important; background: currentColor !important; }
.notif-dot { position: static !important; min-width: 15px !important; height: 15px !important; padding: 0 4px !important; color: var(--accent-ink) !important; background: var(--accent) !important; font-size: 7px !important; line-height: 15px !important; }
.content {
    width: min(1180px, 100%) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 12px 24px 48px !important;
}

/* Surfaces */
.page-head {
    margin: 0 0 12px !important;
    padding: 20px 21px !important;
    border: 1px solid #292a25 !important;
    border-radius: 11px !important;
    background:
        radial-gradient(420px 180px at 83% 30%, rgba(var(--accent-rgb),.10), transparent 75%),
        linear-gradient(110deg, #141513, #151512) !important;
    box-shadow: var(--shadow) !important;
}
.page-head h1 { margin: 0 0 5px !important; }
.page-head p { max-width: 850px !important; }
.card,.tile,.auth-card,.modal,.table-wrap,.tabs,.shop-item,.manual-card,.notif-item,.wallet-panel,.mode-section {
    border: 1px solid var(--border) !important;
    border-radius: 11px !important;
    color: var(--text) !important;
    background: linear-gradient(145deg, #141513, #111210) !important;
    box-shadow: var(--shadow) !important;
}
.card { padding: 17px !important; }
.card h2 { margin: 0 0 12px !important; }
.card:hover,.tile:hover,.shop-item:hover,.manual-card:hover { border-color: #3b3c35 !important; background: #151613 !important; box-shadow: var(--shadow) !important; transform: none !important; }
.grid { gap: 10px !important; }
.grid-2 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
.grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
.grid-4 { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
.tile { position: relative !important; min-height: 118px !important; padding: 16px !important; overflow: hidden !important; }
.tile::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 14px;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(var(--accent-rgb),.3);
    border-radius: 8px;
    background: rgba(var(--accent-rgb),.1);
}
.tile .label { margin: 0 0 26px !important; color: #8e9088 !important; font-size: 9px !important; font-weight: 600 !important; }
.tile .value { color: #f5f5f0 !important; font-size: 26px !important; line-height: 1.08 !important; font-weight: 760 !important; letter-spacing: -.7px !important; }
.tile .sub { margin-top: 5px !important; color: #777970 !important; font-size: 9px !important; }
.info-plate,.warn-plate,.flash {
    padding: 10px 12px !important;
    border: 1px solid #30312b !important;
    border-radius: 8px !important;
    color: #aaaCA4 !important;
    background: #121310 !important;
    font-size: 10px !important;
    box-shadow: none !important;
}
.flash-success { color: #6fe0a5 !important; border-color: rgba(54,211,129,.32) !important; background: rgba(54,211,129,.08) !important; }
.flash-error,.warn-plate { color: #f17c88 !important; border-color: rgba(237,89,105,.32) !important; background: rgba(237,89,105,.08) !important; }

/* Forms and actions */
input,select,textarea,.manual-rich-editor {
    min-height: 38px !important;
    padding: 9px 11px !important;
    border: 1px solid #30312c !important;
    border-radius: 8px !important;
    color: #e8e8e2 !important;
    background: #0f100e !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.015) !important;
    font-family: inherit !important;
    font-size: 11px !important;
}
textarea { min-height: 78px !important; }
input:hover,select:hover,textarea:hover { border-color: #41423b !important; }
input:focus,select:focus,textarea:focus,.manual-rich-editor:focus { border-color: var(--accent-deep) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.10) !important; outline: 0 !important; }
input::placeholder,textarea::placeholder { color: #5f605a !important; }
.form { gap: 12px !important; }
.form label,.field-row label,.role-map label,.stat-form label { gap: 5px !important; color: #a4a69e !important; font-size: 10px !important; font-weight: 600 !important; }
.field-row { gap: 9px !important; }
.btn {
    min-height: 35px !important;
    padding: 8px 13px !important;
    border: 1px solid #35362f !important;
    border-radius: 8px !important;
    color: #d5d6cf !important;
    background: #191a17 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    font-weight: 650 !important;
}
.btn-sm { min-height: 29px !important; padding: 6px 10px !important; }
.btn:hover { color: #fff !important; background: #22231f !important; border-color: #4a4b43 !important; filter: none !important; }
.btn-primary { color: var(--accent-ink) !important; background: linear-gradient(135deg, var(--accent), var(--accent-deep)) !important; border-color: var(--accent) !important; box-shadow: 0 8px 22px rgba(var(--accent-rgb),.11) !important; }
.btn-primary:hover { color: var(--accent-ink) !important; background: var(--accent-hi) !important; border-color: var(--accent-hi) !important; }
.btn-danger { color: #ef7380 !important; background: rgba(237,89,105,.08) !important; border-color: rgba(237,89,105,.30) !important; }
.btn-danger:hover { color: #ff8b96 !important; background: rgba(237,89,105,.14) !important; border-color: rgba(237,89,105,.45) !important; }
.btn-ghost { color: #babbB3 !important; background: #161714 !important; }

/* Tables, tabs, badges */
.table-wrap { overflow: auto !important; background: #0f100e !important; }
table { width: 100%; border-collapse: collapse; }
th,td { height: 38px !important; padding: 8px 11px !important; border-bottom: 1px solid #22231f !important; color: #d2d3cc !important; font-size: 10px !important; white-space: nowrap; }
th { color: #74766e !important; background: #11120f !important; font-size: 8px !important; font-weight: 700 !important; letter-spacing: .65px !important; text-transform: uppercase; }
tbody tr:hover { background: rgba(var(--accent-rgb),.025) !important; }
tbody tr:last-child td { border-bottom: 0 !important; }
.empty { padding: 30px 15px !important; border: 1px dashed #292a25 !important; border-radius: 8px !important; color: #686a63 !important; background: rgba(0,0,0,.10) !important; text-align: center; }
.tabs { gap: 3px !important; margin-bottom: 12px !important; padding: 4px !important; overflow-x: auto; flex-wrap: nowrap !important; background: #0e0f0d !important; }
.tab { min-height: 31px !important; flex: 0 0 auto; padding: 7px 10px !important; border: 1px solid transparent !important; border-radius: 7px !important; color: #7f8179 !important; background: transparent !important; font-size: 9px !important; font-weight: 650 !important; }
.tab:hover { color: #e5e5df !important; background: #181916 !important; }
.tab.active { color: var(--accent-2) !important; background: rgba(var(--accent-rgb),.10) !important; border-color: rgba(var(--accent-rgb),.24) !important; }
.tab.active .badge-count { color: var(--accent-ink) !important; background: var(--accent) !important; border-color: var(--accent) !important; }
.badge { min-height: 20px !important; padding: 3px 7px !important; border: 1px solid #32332d !important; border-radius: 999px !important; color: #bfc0b9 !important; background: #1b1c19 !important; box-shadow: none !important; font-size: 8px !important; }
.badge-admin,.badge-orange { color: var(--accent-hi) !important; background: rgba(var(--accent-rgb),.10) !important; border-color: rgba(var(--accent-rgb),.27) !important; }
.badge-role { color: var(--accent-link) !important; background: rgba(var(--accent-rgb),.07) !important; border-color: rgba(var(--accent-rgb),.20) !important; }
.badge-soft { color: #95978f !important; background: #1a1b18 !important; }
.badge-green { color: #55dc94 !important; background: rgba(54,211,129,.09) !important; border-color: rgba(54,211,129,.28) !important; }
.badge-red { color: #f07884 !important; background: rgba(237,89,105,.09) !important; border-color: rgba(237,89,105,.28) !important; }

/* Main dashboard */
.page-main .content { display: block !important; width: min(1180px,100%) !important; max-width: 1180px !important; padding: 12px 24px 48px !important; }
.page-main .page-head {
    min-height: 126px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
    padding: 22px !important;
    background:
        radial-gradient(480px 210px at 85% 35%, rgba(var(--accent-rgb),.13), transparent 74%),
        linear-gradient(110deg, #141513, #171711) !important;
}
.main-greeting { margin: 0 0 8px !important; color: #777970 !important; font-size: 8px !important; font-weight: 700 !important; letter-spacing: 1.2px !important; }
.main-username { color: #f7f7f2 !important; font-size: 30px !important; line-height: 1.05 !important; font-weight: 780 !important; letter-spacing: -1px !important; }
.page-main .grid[style*="margin-bottom"] { margin-bottom: 10px !important; }
.page-main .grid-2 .tile { min-height: 150px !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; }
.page-main .grid-2 .tile .label { margin-bottom: auto !important; }
.page-main .grid-2 .tile .value { font-size: 38px !important; }
.page-main .grid-2:last-child .card { min-height: 210px !important; }

/* Modals and auth */
.modal-overlay { background: rgba(0,0,0,.78) !important; backdrop-filter: blur(7px) !important; }
.modal { max-width: 500px; padding: 20px !important; background: #141513 !important; }
.modal .close-x { color: #7c7e76 !important; }
.auth-wrap {
    background:
        radial-gradient(650px 420px at 50% 30%, rgba(var(--accent-rgb),.08), transparent 70%),
        #080908 !important;
}
.auth-card { max-width: 420px !important; padding: 34px !important; background: #11120f !important; }
.auth-card::before { background: radial-gradient(circle, rgba(var(--accent-rgb),.12), transparent 70%) !important; }
.auth-head .logo-mark { width: 50px !important; height: 50px !important; margin: 0 auto 15px !important; font-size: 15px !important; }

/* Page-specific normalization: retain all layouts, remove old visual overrides. */
.page-wallet .content,.page-account .content,.page-admin .content,.page-user_config .content,
.page-workload .content,.page-tops .content,.page-staff .content,.page-shop .content,
.page-discord_settings .content,.page-role_grant .content,.page-manuals .content,
.page-media_partners .content,.page-ticket_panels .content {
    width: min(1180px,100%) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 12px 24px 48px !important;
}
.wallet-balance strong { color: var(--accent-2) !important; text-shadow: none !important; }
.wallet-action-glyph { color: var(--accent-ink) !important; background: var(--accent) !important; }
.wallet-store-banner { background: radial-gradient(430px 160px at 80% 50%, rgba(var(--accent-rgb),.12), transparent 75%), #141513 !important; }
.premium-table-wrap,.mode-section,.account-column,.config-grid > .card { border-color: var(--border) !important; background: #131413 !important; }
.circle-widget .fill { stroke: var(--accent) !important; filter: drop-shadow(0 0 4px rgba(var(--accent-rgb),.25)) !important; }
.cal-cell.has { color: var(--accent-hi) !important; background: rgba(var(--accent-rgb),.11) !important; border-color: rgba(var(--accent-rgb),.25) !important; }
.manual-card:hover { border-color: rgba(var(--accent-rgb),.34) !important; }
.chip.active,.chip:hover { color: var(--accent-ink) !important; background: var(--accent) !important; border-color: var(--accent) !important; }

/* Responsive */
@media (max-width: 1100px) {
    :root { --sidebar-w: 214px !important; }
    .content,.page-main .content { padding-left: 18px !important; padding-right: 18px !important; }
    .topbar { width: calc(100% - 36px) !important; }
    .grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width: 900px) {
    .sidebar {
        width: min(286px,88vw) !important;
        transform: translateX(-105%) !important;
        padding: 14px 12px !important;
        z-index: 80 !important;
    }
    .sidebar.open { transform: translateX(0) !important; }
    .sidebar.open + .sidebar-backdrop { display: block !important; position: fixed !important; inset: 0 !important; z-index: 70 !important; border: 0 !important; background: rgba(0,0,0,.7) !important; backdrop-filter: blur(4px); }
    .main-area { margin-left: 0 !important; }
    .topbar { width: calc(100% - 24px) !important; margin-top: 12px !important; padding-left: 8px !important; }
    .hamburger { display: grid !important; width: 31px !important; height: 31px !important; min-height: 31px !important; border: 1px solid #30312c !important; border-radius: 7px !important; background: #11120f !important; }
    .topbar-title::before { display: none; }
    .content,.page-main .content,
    .page-wallet .content,.page-account .content,.page-admin .content,.page-user_config .content,
    .page-workload .content,.page-tops .content,.page-staff .content,.page-shop .content,
    .page-discord_settings .content,.page-role_grant .content { padding: 10px 12px 34px !important; }
    .grid-3,.grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

/* Google Docs-inspired manual workspace and persistent chapter navigation. */
.manual-editor-widget {
  position: relative !important;
  gap: 0 !important;
  overflow: visible !important;
  border: 1px solid #2b2c27 !important;
  border-radius: 12px !important;
  background: #0d0e0c !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.2) !important;
}
.manual-editor-widget > label:first-child { display: none !important; }
.manual-editor-filebar {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  min-height: 58px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid #292a25 !important;
  border-radius: 12px 12px 0 0 !important;
  background: linear-gradient(145deg, #171815, #121310) !important;
}
.manual-editor-file-icon {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  border: 1px solid rgba(var(--accent-rgb),.35) !important;
  border-radius: 8px !important;
  background: rgba(var(--accent-rgb),.1) !important;
}
.manual-editor-file-icon::before {
  content: "" !important;
  display: block !important;
  width: 17px !important;
  height: 20px !important;
  margin: 6px auto !important;
  background: var(--accent) !important;
  clip-path: polygon(0 0, 70% 0, 100% 28%, 100% 100%, 0 100%) !important;
}
.manual-editor-filebar > div:nth-child(2) { display: grid !important; gap: 1px !important; }
.manual-editor-filebar b { color: #ecece6 !important; font-size: 12px !important; }
.manual-editor-filebar small { color: #777970 !important; font-size: 9px !important; }
.manual-editor-save-state {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-left: auto !important;
  color: #92948b !important;
  font-size: 9px !important;
  font-weight: 650 !important;
}
.manual-editor-save-state > span {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #4fd68c !important;
  box-shadow: 0 0 9px rgba(79,214,140,.4) !important;
}
.manual-editor-widget .manual-toolbar {
  position: sticky !important;
  top: 68px !important;
  z-index: 45 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 7px 9px !important;
  border: 0 !important;
  border-bottom: 1px solid #2c2d28 !important;
  border-radius: 0 !important;
  background: rgba(22,23,20,.97) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(14px) !important;
}
.manual-editor-widget .manual-tool-group {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding-right: 5px !important;
  border-right: 1px solid #30312c !important;
}
.manual-editor-widget .manual-tool,
.manual-editor-widget .manual-color-trigger {
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 5px 8px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  color: #b9bbb2 !important;
  background: transparent !important;
  font-size: 10px !important;
}
.manual-editor-widget .manual-tool:hover,
.manual-editor-widget .manual-tool.is-active,
.manual-editor-widget .manual-color-trigger:hover {
  color: var(--accent-2) !important;
  border-color: #454238 !important;
  background: #24241e !important;
}
.manual-editor-widget .manual-tool-select {
  gap: 5px !important;
  color: #85877f !important;
  font-size: 8px !important;
}
.manual-editor-widget .manual-tool-select select,
.manual-editor-widget .manual-tool-select input {
  min-height: 30px !important;
  height: 30px !important;
  padding: 4px 7px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
}
.manual-editor-widget .manual-document-shell {
  gap: 16px !important;
  margin: 0 !important;
  padding: 18px !important;
  background: #0b0c0a !important;
}
.manual-editor-widget .manual-document-outline {
  top: 132px !important;
  border-color: #2b2c27 !important;
  background: #121310 !important;
}
.manual-editor-widget .manual-ruler {
  border-color: #2b2c27 !important;
  background: #141512 !important;
  box-shadow: 0 5px 16px rgba(0,0,0,.14) !important;
}
.manual-editor-widget .manual-rich-editor {
  min-height: 760px !important;
  margin: 0 auto !important;
  padding: 58px 68px !important;
  border: 1px solid #31322d !important;
  border-radius: 2px !important;
  color: #e8e9e2 !important;
  background: #181917 !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.34) !important;
  font-size: 14px !important;
  line-height: 1.72 !important;
}
.manual-editor-widget > .hint { margin: 0 !important; padding: 9px 14px 0 !important; }
.manual-editor-statusbar {
  position: sticky !important;
  bottom: 8px !important;
  z-index: 40 !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 38px !important;
  margin: 10px !important;
  padding: 7px 11px !important;
  border: 1px solid #30312c !important;
  border-radius: 8px !important;
  color: #85877f !important;
  background: rgba(19,20,17,.96) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.25) !important;
  backdrop-filter: blur(12px) !important;
  font-size: 9px !important;
}
.manual-draft-restore {
  min-height: 26px !important;
  margin-left: auto !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(var(--accent-rgb),.35) !important;
  border-radius: 6px !important;
  color: var(--accent-hi) !important;
  background: rgba(var(--accent-rgb),.08) !important;
  font: inherit !important;
  cursor: pointer !important;
}

body.page-manual_detail .manual-reader-card { overflow: visible !important; }
body.page-manual_detail .manual-reader-outline {
  position: sticky !important;
  top: 76px !important;
  align-self: start !important;
  max-height: calc(100vh - 98px) !important;
  border-color: #2c2d28 !important;
  background: rgba(17,18,15,.97) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.2) !important;
  backdrop-filter: blur(12px) !important;
}
body.page-manual_detail .manual-outline-item {
  position: relative !important;
  border: 1px solid transparent !important;
  transition: color .16s ease, background .16s ease, border-color .16s ease !important;
}
body.page-manual_detail .manual-outline-item.is-active {
  color: var(--accent-2) !important;
  border-color: rgba(var(--accent-rgb),.24) !important;
  background: rgba(var(--accent-rgb),.09) !important;
}
body.page-manual_detail .manual-outline-item.is-active::before {
  content: "" !important;
  position: absolute !important;
  top: 7px !important;
  bottom: 7px !important;
  left: 3px !important;
  width: 2px !important;
  border-radius: 2px !important;
  background: var(--accent) !important;
}
body.page-manual_detail .manual-body h1,
body.page-manual_detail .manual-body h2,
body.page-manual_detail .manual-body h3,
body.page-manual_detail .manual-body h4,
body.page-manual_detail .manual-body .manual-form-question { scroll-margin-top: 105px !important; }
.manual-chapter-dock {
  position: sticky !important;
  bottom: 12px !important;
  z-index: 42 !important;
  display: grid !important;
  grid-template-columns: 34px minmax(150px,1fr) minmax(220px,1.2fr) 34px !important;
  align-items: center !important;
  gap: 9px !important;
  width: min(900px, calc(100% - 20px)) !important;
  min-height: 56px !important;
  margin: 14px auto 0 !important;
  padding: 8px 10px !important;
  border: 1px solid #36362f !important;
  border-radius: 10px !important;
  background: rgba(19,20,17,.96) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.42) !important;
  backdrop-filter: blur(16px) !important;
}
.manual-chapter-dock[hidden] { display: none !important; }
.manual-chapter-current { display: grid !important; gap: 2px !important; min-width: 0 !important; }
.manual-chapter-current small,
.manual-chapter-select-wrap { color: #7f8179 !important; font-size: 8px !important; font-weight: 700 !important; }
.manual-chapter-current b {
  overflow: hidden !important;
  color: #e8e9e2 !important;
  font-size: 11px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.manual-chapter-select-wrap {
  display: grid !important;
  grid-template-columns: auto minmax(0,1fr) !important;
  align-items: center !important;
  gap: 8px !important;
}
.manual-chapter-select-wrap select {
  width: 100% !important;
  min-height: 34px !important;
  padding: 6px 9px !important;
  font-size: 10px !important;
}
.manual-chapter-step {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid #35362f !important;
  border-radius: 7px !important;
  color: #d9dad3 !important;
  background: #1b1c18 !important;
  font-size: 20px !important;
  cursor: pointer !important;
}
.manual-chapter-step:hover:not(:disabled) { color: var(--accent-hi) !important; border-color: rgba(var(--accent-rgb),.38) !important; }
.manual-chapter-step:disabled { opacity: .32 !important; cursor: default !important; }

@media (max-width: 900px) {
  .manual-editor-save-state { display: none !important; }
  .manual-editor-widget .manual-toolbar { top: 56px !important; flex-wrap: nowrap !important; overflow-x: auto !important; }
  .manual-editor-widget .manual-document-shell { padding: 10px !important; }
  .manual-editor-widget .manual-rich-editor { min-height: 560px !important; padding: 28px 22px !important; }
  .manual-editor-statusbar { flex-wrap: wrap !important; }
  body.page-manual_detail .manual-reader-outline { position: sticky !important; top: 62px !important; max-height: 190px !important; }
  .manual-chapter-dock { grid-template-columns: 34px minmax(0,1fr) 34px !important; }
  .manual-chapter-select-wrap { grid-column: 1 / -1 !important; grid-row: 2 !important; }
}

/* Final media layout: list on the left, selected card on the right. */
body.page-media_partners::after,
body.page-media_partners:has(.media-detail-card.open)::after { display: none !important; content: none !important; }
body.page-media_partners.media-dialog-open { overflow: auto !important; }
.page-media_partners .media-split { display: block !important; }
.page-media_partners .media-split:has(.media-detail-card.open) {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr) !important;
  gap: 16px !important;
  align-items: start !important;
}
.page-media_partners .media-detail-card,
.page-media_partners .media-detail-card:not(.open) { display: none !important; }
.page-media_partners .media-detail-card.open {
  display: block !important;
  position: sticky !important;
  top: 78px !important;
  left: auto !important;
  width: auto !important;
  max-width: none !important;
  max-height: calc(100vh - 98px) !important;
  margin: 0 !important;
  padding: 20px !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  overflow: auto !important;
  contain: none !important;
  z-index: 1 !important;
  border: 1px solid #30312b !important;
  border-radius: 11px !important;
  background: #131413 !important;
  box-shadow: none !important;
}
.page-media_partners .media-detail-close {
  position: sticky !important;
  top: 0 !important;
  float: right !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 0 8px 12px !important;
}
@media (max-width: 1050px) {
  .page-media_partners .media-split:has(.media-detail-card.open) { grid-template-columns: 1fr !important; }
  .page-media_partners .media-detail-card.open { position: static !important; max-height: none !important; }
}

@media (max-width: 640px) {
    h1 { font-size: 24px !important; }
    .topbar-title { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topbar-action-label,.notif-bell > span:not(.top-icon):not(.notif-dot) { display: none !important; }
    .topbar-action-btn,.topbar-actions > form .topbar-action-btn { width: 31px !important; padding: 0 !important; }
    .page-head { padding: 17px !important; }
    .page-main .page-head { min-height: 108px !important; }
    .main-username { font-size: 25px !important; }
    .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr !important; }
    .tile { min-height: 104px !important; }
    .page-main .grid-2 .tile { min-height: 125px !important; }
    .card { padding: 14px !important; }
    .field-row { display: grid !important; grid-template-columns: 1fr !important; }
    .field-row > * { min-width: 0 !important; width: 100% !important; }
    th,td { padding: 8px 9px !important; }
}

/* Exact left alignment for Staff and Tops hero copy. */
body.page-staff .staff-head > div:first-child,
body.page-tops .tops-head > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
body.page-staff .staff-head > div:first-child > *,
body.page-tops .tops-head > div:first-child > * { width: auto !important; margin-left: 0 !important; text-align: left !important; }

/* Admin background updates. */
.admin-live-status { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 6px 10px; border: 1px solid #292a25; border-radius: 8px; color: #85877f; background: #11120f; font-size: 11px; font-weight: 650; }
.admin-live-status > span { width: 7px; height: 7px; border-radius: 50%; background: #36d381; box-shadow: 0 0 0 3px rgba(54,211,129,.1); }
.admin-live-status.is-loading > span { background: var(--accent); animation: adminLivePulse 1s infinite; }
.admin-live-status.has-update { color: var(--accent-hi); border-color: rgba(var(--accent-rgb),.32); }
.admin-live-status.has-update > span { background: var(--accent); }
@keyframes adminLivePulse { 50% { opacity: .35; } }

/* Media cards open as a real centered dialog. */
.page-media_partners .media-split { display: block !important; }
.page-media_partners .media-detail-card,
.page-media_partners .media-detail-card:not(.open) {
  display: none !important;
}
.page-media_partners .media-detail-card.open {
  display: block !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  width: min(860px, calc(100vw - 48px)) !important;
  max-width: 860px !important;
  max-height: calc(100vh - 56px) !important;
  margin: 0 !important;
  padding: 22px !important;
  transform: translate(-50%, -50%) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  contain: none !important;
  z-index: 220 !important;
  border: 1px solid #35362f !important;
  border-radius: 12px !important;
  background: #131413 !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.7) !important;
}
body.page-media_partners:has(.media-detail-card.open)::after {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 210 !important;
  background: rgba(0,0,0,.72) !important;
  backdrop-filter: blur(4px) !important;
  pointer-events: auto !important;
}
.page-media_partners .media-detail-close {
  position: sticky !important;
  top: 0 !important;
  float: right !important;
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 0 10px 14px !important;
  z-index: 2 !important;
  border: 1px solid #34352f !important;
  border-radius: 8px !important;
  color: #b4b5ae !important;
  background: #191a17 !important;
  text-decoration: none !important;
}
.page-media_partners .media-detail-close:hover { color: var(--accent-ink) !important; border-color: var(--accent) !important; background: var(--accent) !important; }
body.page-media_partners.media-dialog-open { overflow: hidden !important; }

@media (max-width: 900px) {
  .page-media_partners .media-detail-card.open {
    left: 50% !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    padding: 17px !important;
  }
}

/* Ultimate media layout override: stable side card. */
body.page-media_partners::after,
body.page-media_partners:has(.media-detail-card.open)::after { display: none !important; content: none !important; }
body.page-media_partners.media-dialog-open { overflow: auto !important; }
.page-media_partners .media-split { display: block !important; }
.page-media_partners .media-split:has(.media-detail-card.open) {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr) !important;
  gap: 16px !important;
  align-items: start !important;
}
.page-media_partners .media-detail-card,
.page-media_partners .media-detail-card:not(.open) { display: none !important; }
.page-media_partners .media-detail-card.open {
  display: block !important;
  position: sticky !important;
  top: 78px !important;
  left: auto !important;
  width: auto !important;
  max-width: none !important;
  max-height: calc(100vh - 98px) !important;
  margin: 0 !important;
  padding: 20px !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  overflow: auto !important;
  contain: none !important;
  z-index: 1 !important;
  border: 1px solid #30312b !important;
  border-radius: 11px !important;
  background: #131413 !important;
  box-shadow: none !important;
}
.page-media_partners .media-detail-close {
  position: sticky !important;
  top: 0 !important;
  float: right !important;
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 0 8px 12px !important;
}
@media (max-width: 1050px) {
  .page-media_partners .media-split:has(.media-detail-card.open) { grid-template-columns: 1fr !important; }
  .page-media_partners .media-detail-card.open {
    position: static !important;
    top: auto !important;
    max-height: none !important;
  }
}

/* High-specificity cleanup for legacy desktop dashboard rules. */
body .topbar .topbar-actions > .topbar-action-btn,
body .topbar .topbar-actions > form .topbar-action-btn {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 31px !important;
    min-height: 31px !important;
    padding: 6px 10px !important;
}
body .topbar .topbar-actions > form {
    position: static !important;
    width: auto !important;
    height: auto !important;
}
body.page-main .content .page-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    min-height: 126px !important;
    padding: 22px !important;
}
body.page-main .content .page-head .main-greeting {
    align-self: flex-start !important;
    margin: 0 0 8px !important;
    color: #777970 !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    letter-spacing: 1.2px !important;
}
body.page-main .content .page-head .main-username {
    align-self: flex-start !important;
    margin: 0 !important;
    color: #f7f7f2 !important;
    font-size: 30px !important;
    line-height: 1.05 !important;
}
body.page-main .content > .grid-4 .tile {
    width: auto !important;
    height: auto !important;
    min-height: 118px !important;
    max-height: none !important;
    padding: 16px !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    background-color: #131413 !important;
    background-image: none !important;
}
body.page-main .content > .grid-4 .tile::before { display: none !important; }
body.page-main .content > .grid-4 .tile .label {
    margin: 0 auto auto 0 !important;
    color: #8e9088 !important;
    font-size: 9px !important;
    text-transform: none !important;
}
body.page-main .content > .grid-4 .tile .value {
    color: #f5f5f0 !important;
    font-size: 20px !important;
    line-height: 1.08 !important;
}

@media (max-width: 900px) {
    body .topbar .topbar-actions > .topbar-action-btn,
    body .topbar .topbar-actions > form .topbar-action-btn {
        width: 31px !important;
        min-width: 31px !important;
        max-width: 31px !important;
        padding: 0 !important;
    }
    body.page-main .content .page-head { min-height: 108px !important; padding: 17px !important; }
    body.page-main .content .page-head .main-username { font-size: 25px !important; }
    body.page-main .content > .grid-4 .tile { min-height: 104px !important; }
}

/* Larger desktop scale requested for navigation and primary work areas. */
@media (min-width: 901px) {
    :root,
    html[data-theme],
    html[data-theme][data-accent] { --sidebar-w: 276px !important; }

    body { font-size: 14px !important; }
    h1 { font-size: 34px !important; }
    h2 { font-size: 17px !important; }
    h3 { font-size: 14px !important; }

    .sidebar { padding: 18px 14px 14px !important; }
    .sidebar-logo {
        min-height: 58px !important;
        margin-bottom: 16px !important;
        padding: 0 7px 16px !important;
        gap: 12px !important;
    }
    .logo-mark { width: 38px !important; height: 38px !important; flex-basis: 38px !important; font-size: 12px !important; }
    .logo-text { font-size: 15px !important; }
    .logo-text .beta { font-size: 9px !important; }
    .nav-group { margin-bottom: 15px !important; }
    .nav-group-title {
        display: flex !important;
        align-items: center !important;
        min-height: 26px !important;
        padding: 5px 9px !important;
        color: #73756d !important;
        font-size: 9px !important;
        letter-spacing: 1.15px !important;
    }
    .nav-group-symbol {
        display: inline-grid !important;
        place-items: center !important;
        width: 18px !important;
        margin-right: 6px !important;
        color: var(--accent-beta) !important;
        font-family: "Segoe UI Symbol", sans-serif !important;
        font-size: 13px !important;
        line-height: 1 !important;
    }
    .nav-item {
        min-height: 46px !important;
        margin: 3px 0 !important;
        padding: 8px 10px !important;
        gap: 11px !important;
        border-radius: 9px !important;
        font-size: 13px !important;
    }
    .sidebar .nav-item .ico {
        display: grid !important;
        place-items: center !important;
        width: 28px !important;
        height: 28px !important;
        flex: 0 0 28px !important;
        border: 1px solid #2b2c27 !important;
        border-radius: 7px !important;
        color: #92948c !important;
        background: #151613 !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
    }
    .sidebar .nav-item .ico::before {
        display: block !important;
        content: "" !important;
        width: 16px !important;
        height: 16px !important;
        background: currentColor !important;
        -webkit-mask: var(--icon-mask) center / contain no-repeat !important;
        mask: var(--icon-mask) center / contain no-repeat !important;
        opacity: 1 !important;
    }
    .sidebar .nav-item .ico::after { display: none !important; content: none !important; }
    .sidebar .nav-item:hover .ico { color: #d2d3cc !important; border-color: #40413a !important; background: #1c1d19 !important; }
    .sidebar .nav-item.active .ico {
        color: var(--accent-hi) !important;
        border-color: rgba(var(--accent-rgb),.34) !important;
        background: rgba(var(--accent-rgb),.10) !important;
    }
    .nav-item .badge-count { min-width: 24px !important; height: 20px !important; font-size: 9px !important; line-height: 16px !important; }
    .sidebar-actions { gap: 7px !important; margin-bottom: 11px !important; }
    .sidebar-actions .sidebar-cta { min-height: 39px !important; padding: 8px 10px !important; font-size: 10px !important; }
    .sidebar-profile { min-height: 62px !important; padding: 10px !important; }
    .sidebar-profile .avatar { width: 34px !important; height: 34px !important; flex-basis: 34px !important; }
    .sidebar-profile .who b { font-size: 11px !important; }
    .sidebar-profile .who small { font-size: 9px !important; }

    .topbar {
        width: min(1360px, calc(100% - 56px)) !important;
        min-height: 56px !important;
        margin-top: 22px !important;
        padding: 10px 12px 10px 16px !important;
    }
    .topbar-title { font-size: 11px !important; }
    body .topbar .topbar-actions > .topbar-action-btn,
    body .topbar .topbar-actions > form .topbar-action-btn { height: 35px !important; min-height: 35px !important; padding: 7px 11px !important; font-size: 9px !important; }

    .content,
    .page-main .content,
    .page-wallet .content,.page-account .content,.page-admin .content,.page-user_config .content,
    .page-workload .content,.page-tops .content,.page-staff .content,.page-shop .content,
    .page-discord_settings .content,.page-role_grant .content,.page-manuals .content,
    .page-media_partners .content,.page-ticket_panels .content {
        width: min(1360px,100%) !important;
        max-width: 1360px !important;
        padding: 14px 28px 56px !important;
    }
    .page-head { padding: 24px 25px !important; margin-bottom: 14px !important; }
    body.page-main .content .page-head { min-height: 144px !important; padding: 26px !important; }
    body.page-main .content .page-head .main-username { font-size: 35px !important; }
    .card { padding: 20px !important; }
    .card h2 { margin-bottom: 14px !important; }
    .grid { gap: 13px !important; }
    .tile { min-height: 130px !important; padding: 19px !important; }
    body.page-main .content > .grid-4 .tile { min-height: 130px !important; padding: 19px !important; }
    body.page-main .content > .grid-4 .tile .value { font-size: 22px !important; }
    .page-main .grid-2 .tile { min-height: 170px !important; }
    .page-main .grid-2 .tile .value { font-size: 42px !important; }

    input,select,textarea,.manual-rich-editor { min-height: 42px !important; padding: 10px 12px !important; font-size: 12px !important; }
    .form label,.field-row label,.role-map label,.stat-form label { font-size: 11px !important; }
    .btn { min-height: 39px !important; padding: 9px 15px !important; font-size: 11px !important; }
    .btn-sm { min-height: 32px !important; padding: 7px 11px !important; font-size: 10px !important; }
    th,td { height: 42px !important; padding: 9px 12px !important; font-size: 11px !important; }
    th { font-size: 9px !important; }
    .tab { min-height: 35px !important; padding: 8px 11px !important; font-size: 10px !important; }
    .badge { min-height: 22px !important; padding: 4px 8px !important; font-size: 9px !important; }
    .empty { padding: 34px 17px !important; font-size: 11px !important; }
}

/* Clean single-layer navigation icons (legacy pseudo-shapes are disabled). */
@media (min-width: 901px) {
    .sidebar .nav-item .ico {
        display: grid !important;
        place-items: center !important;
        width: 23px !important;
        height: 23px !important;
        flex: 0 0 23px !important;
        border: 0 !important;
        border-radius: 0 !important;
        color: #85877f !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .sidebar .nav-item .ico::before {
        width: 19px !important;
        height: 19px !important;
        background: currentColor !important;
        -webkit-mask: var(--icon-mask) center / contain no-repeat !important;
        mask: var(--icon-mask) center / contain no-repeat !important;
    }
    .sidebar .nav-item .ico::after { display: none !important; content: none !important; }
    .sidebar .nav-item:hover .ico { color: #d1d2ca !important; background: transparent !important; }
    .sidebar .nav-item.active .ico { color: var(--accent) !important; background: transparent !important; }
}

/* Real card icons replace the former empty decorative squares. */
.tile::after { display: none !important; content: none !important; }
.tile-icon,.page-hero-icon,.wallet-balance-icon,.wallet-store-icon,.wallet-history-icon,
.shop-section-icon,.shop-product-icon {
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--accent-rgb),.31);
    border-radius: 10px;
    color: var(--accent);
    background: rgba(var(--accent-rgb),.09);
    box-shadow: inset 0 0 18px rgba(var(--accent-rgb),.035);
}
.tile-icon::before,.page-hero-icon::before,.wallet-balance-icon::before,
.wallet-store-icon::before,.wallet-history-icon::before,.shop-section-icon::before,
.shop-product-icon::before {
    content: "";
    display: block;
    width: 19px;
    height: 19px;
    background: currentColor;
    -webkit-mask: var(--card-icon) center / contain no-repeat;
    mask: var(--card-icon) center / contain no-repeat;
}
.tile-icon { position: absolute; top: 15px; right: 15px; width: 38px; height: 38px; }
.main-stat-card { position: relative !important; }
.main-stat-position { --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 5V3h8v2h5v16H3V5h5Zm2 0h4V5h-4Zm9 6H5v8h14v-8Zm-8 2h2v2h-2v-2Z'/%3E%3C/svg%3E"); }
.main-stat-duty { --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm1 2v5.6l3.4 2-1 1.8-4.4-2.6V6h2Z'/%3E%3C/svg%3E"); }
.main-stat-vacation { --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 6v5c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V6l-8-4Zm0 2.2L18 7v4c0 3.9-2.5 7.7-6 8.8-3.5-1.1-6-4.9-6-8.8V7l6-2.8Zm-1 3.3h2v5h-2v-5Zm0 7h2v2h-2v-2Z'/%3E%3C/svg%3E"); }
.main-stat-punishment { --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 1 21h22L12 2Zm0 4 7.5 13h-15L12 6Zm-1 4v5h2v-5h-2Zm0 6.5v2h2v-2h-2Z'/%3E%3C/svg%3E"); }
.main-stat-mutes { --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a4 4 0 0 1 4 4v5a4 4 0 0 1-7.2 2.4l1.5-1.3A2 2 0 0 0 14 11V6a2 2 0 0 0-4 0v2.2L8 6.5V6a4 4 0 0 1 4-4ZM3.3 2 22 18.7 20.7 20l-4.1-3.7A7.9 7.9 0 0 1 13 17.9V21h4v2H7v-2h4v-3.1A8 8 0 0 1 4 10H2a10 10 0 0 0 8.9 9.9V21H9v2h6v-2h-2v-1.1a9.8 9.8 0 0 0 5.1-2.1L2 3.3 3.3 2Z'/%3E%3C/svg%3E"); }
.main-stat-checks { --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10.5 3a7.5 7.5 0 1 1 0 15 7.5 7.5 0 0 1 0-15Zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Zm4.7 11.8 1.6-1.6 5.2 5.2-1.6 1.6-5.2-5.2ZM9.4 12.8 7 10.4 8.4 9l1 1 2.8-2.8 1.4 1.4-4.2 4.2Z'/%3E%3C/svg%3E"); }

/* Shared page hero details. */
.page-eyebrow { margin: 0 0 7px !important; color: var(--accent-beta) !important; font-size: 8px !important; font-weight: 750 !important; letter-spacing: 1.25px !important; }
.shop-head,.birthday-head,.wallet-head { display: flex !important; align-items: center !important; justify-content: space-between !important; text-align: left !important; }
.page-hero-icon { width: 58px; height: 58px; flex: 0 0 58px; border-radius: 14px; }
.page-hero-icon::before { width: 27px; height: 27px; }
.shop-hero-icon { --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 4h10l1 4h3v2l-2 10H5L3 10V8h3l1-4Zm2 4h6l-.5-2h-5L9 8Zm-3 2 1.6 8h8.8L18 10H6Z'/%3E%3C/svg%3E"); }
.birthday-hero-icon { --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 2h2v4h-2V2Zm-6 9h14a3 3 0 0 1 3 3v8H2v-8a3 3 0 0 1 3-3Zm0 2a1 1 0 0 0-1 1v1.2c.7.5 1.4.8 2.2.8 1.2 0 2.1-.5 2.8-1.4.7.9 1.7 1.4 3 1.4s2.3-.5 3-1.4c.7.9 1.6 1.4 2.8 1.4.8 0 1.5-.3 2.2-.8V14a1 1 0 0 0-1-1H5Zm-1 5v2h16v-2c-.7.2-1.4.3-2.2.3-1 0-2-.3-2.8-.8-.8.5-1.8.8-3 .8s-2.2-.3-3-.8c-.8.5-1.8.8-2.8.8-.8 0-1.5-.1-2.2-.3ZM9 7h6v3H9V7Z'/%3E%3C/svg%3E"); }

/* Store: catalog dashboard with spacious product cards. */
.page-shop .shop-balance-card {
    min-height: 142px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 22px !important;
    background: radial-gradient(440px 170px at 88% 28%, rgba(var(--accent-rgb),.10), transparent 75%), #131413 !important;
}
.shop-balance-card { --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16a2 2 0 0 1 2 2v12H2V7a2 2 0 0 1 2-2Zm0 2v10h16v-3h-5a3 3 0 0 1 0-6h5V7H4Zm11 3a1 1 0 0 0 0 2h5v-2h-5Z'/%3E%3C/svg%3E"); }
.shop-balance-card .label { margin: 0 0 8px !important; font-size: 10px !important; }
.shop-balance-card .value { font-size: 32px !important; }
.shop-section { padding: 22px !important; }
.shop-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.shop-section-head h2 { margin: 0 !important; font-size: 18px !important; }
.shop-section-icon { width: 32px; height: 32px; flex: 0 0 32px; --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 6h18v15H3V6Zm2 2v11h14V8H5Zm2-6h10v2H7V2Zm1 9h8v2H8v-2Zm0 4h5v2H8v-2Z'/%3E%3C/svg%3E"); }
.shop-section-icon::before { width: 15px; height: 15px; }
.page-shop .shop-grid { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(245px,1fr)) !important; gap: 12px !important; }
.page-shop .shop-product-card {
    position: relative;
    min-height: 235px !important;
    padding: 18px !important;
    gap: 12px !important;
    border-radius: 10px !important;
    background: linear-gradient(145deg,#11120f,#0e0f0d) !important;
}
.shop-product-icon { width: 38px; height: 38px; margin-bottom: 6px; --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 8h-3.2A3 3 0 0 0 12 4.4 3 3 0 0 0 7.2 8H4a2 2 0 0 0-2 2v3h9v-3h2v3h9v-3a2 2 0 0 0-2-2Zm-7-2a1 1 0 1 1 2 0c0 .6-.4 1-2 2V6Zm-4 0a1 1 0 1 1 2 0v2C9.4 7 9 6.6 9 6Zm-7 9h9v7H4a2 2 0 0 1-2-2v-5Zm11 0h9v5a2 2 0 0 1-2 2h-7v-7Z'/%3E%3C/svg%3E"); }
.shop-product-icon::before { width: 18px; height: 18px; }
.shop-item-name { min-height: 38px; color: #e8e8e2 !important; font-size: 13px !important; font-weight: 650 !important; }
.shop-item-price { color: var(--accent-hi) !important; font-size: 25px !important; }
.shop-item-price small { font-size: 9px !important; }
.shop-comment { min-height: 62px !important; }

/* Wallet: balance and actions integrated into one dashboard language. */
.page-wallet .wallet-head { min-height: 168px !important; margin-bottom: 14px !important; padding: 25px !important; }
.wallet-head-copy { max-width: 520px; }
.page-wallet .wallet-head h1 { margin: 0 0 6px !important; font-size: 34px !important; }
.page-wallet .wallet-balance {
    display: flex !important;
    align-items: center !important;
    justify-items: initial !important;
    gap: 15px !important;
    min-width: 235px;
    margin: 0 !important;
    padding: 14px 17px;
    border: 1px solid rgba(var(--accent-rgb),.23);
    border-radius: 11px;
    background: rgba(8,9,8,.44);
}
.wallet-balance-icon { width: 46px; height: 46px; flex: 0 0 46px; --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16a2 2 0 0 1 2 2v12H2V7a2 2 0 0 1 2-2Zm0 2v10h16v-3h-5a3 3 0 0 1 0-6h5V7H4Zm11 3a1 1 0 0 0 0 2h5v-2h-5Z'/%3E%3C/svg%3E"); }
.page-wallet .wallet-balance strong { display: block; color: var(--accent) !important; font-size: 40px !important; line-height: .95 !important; font-weight: 800 !important; }
.page-wallet .wallet-balance span:not(.wallet-balance-icon) { display: block; margin: 4px 0 0 !important; color: #7b7d75 !important; font-size: 9px !important; }
.page-wallet .wallet-actions { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 12px !important; margin-bottom: 12px !important; }
.page-wallet .wallet-action-card,.page-wallet .wallet-action-submit {
    min-height: 142px !important;
    height: 142px !important;
    color: #d9dad3 !important;
    background: transparent !important;
}
.page-wallet .wallet-action-card { border-color: #2d2e29 !important; background: linear-gradient(145deg,#141513,#11120f) !important; }
.page-wallet button.wallet-action-card,.page-wallet .wallet-action-submit { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 17px !important; padding: 22px !important; text-align: left !important; }
.wallet-action-glyph {
    display: grid !important;
    place-items: center !important;
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 50px;
    border: 1px solid rgba(var(--accent-rgb),.31);
    border-radius: 12px;
    color: var(--accent) !important;
    background: rgba(var(--accent-rgb),.09) !important;
}
.wallet-action-glyph::before { position: static !important; content: "" !important; width: 23px !important; height: 23px !important; border: 0 !important; border-radius: 0 !important; background: currentColor !important; transform: none !important; }
.wallet-action-glyph::after { display: none !important; content: none !important; }
.wallet-action-transfer::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m15 4 5 5-5 5v-4H8a3 3 0 0 0-3 3v5H3v-5a5 5 0 0 1 5-5h7V4Zm-6 6v4H5l5 5 5-5h-4v-4H9Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m15 4 5 5-5 5v-4H8a3 3 0 0 0-3 3v5H3v-5a5 5 0 0 1 5-5h7V4Zm-6 6v4H5l5 5 5-5h-4v-4H9Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.wallet-action-plus::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7V4Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7V4Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.wallet-action-copy { display: flex; flex-direction: column; gap: 5px; }
.wallet-action-copy b { color: #ecece6; font-size: 14px !important; font-weight: 700 !important; }
.wallet-action-copy small { color: #777970 !important; font-size: 9px !important; }
.page-wallet .wallet-note { margin: 0 0 16px !important; font-size: 10px !important; }
body.page-wallet .content > .wallet-store-banner {
    min-height: 154px !important;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 14px !important;
    padding: 23px !important;
    background: radial-gradient(430px 170px at 82% 50%,rgba(var(--accent-rgb),.12),transparent 72%),#141513 !important;
}
.wallet-store-icon { width: 54px; height: 54px; flex: 0 0 54px; --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 4h10l1 4h3v2l-2 10H5L3 10V8h3l1-4Zm2 4h6l-.5-2h-5L9 8Zm-3 2 1.6 8h8.8L18 10H6Z'/%3E%3C/svg%3E"); }
.wallet-store-icon::before { width: 25px; height: 25px; }
.wallet-store-copy { flex: 1; padding: 0 !important; }
.wallet-store-copy h2 { font-size: 18px !important; }
.wallet-store-copy .btn { width: auto !important; margin-top: 13px !important; }
body.page-wallet .content > .wallet-history { min-height: 210px !important; padding: 22px !important; background: #131413 !important; }
.wallet-history-head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.wallet-history-head h2 { margin: 0 0 3px !important; }
.wallet-history-head p { font-size: 9px; }
.wallet-history-icon { width: 35px; height: 35px; flex: 0 0 35px; --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 1-9.5 7H.3l3.2-4 3.2 4H4.6A8 8 0 1 0 12 4V2Zm-1 4h2v5.6l3.5 2-1 1.8-4.5-2.6V6Z'/%3E%3C/svg%3E"); }
.wallet-history-icon::before { width: 16px; height: 16px; }

/* Birthdays: full dashboard layout and meaningful icons. */
.page-birthdays .content {
    width: min(1360px,100%) !important;
    max-width: 1360px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding: 14px 28px 56px !important;
    box-sizing: border-box !important;
}
.page-birthdays .birthday-head { min-height: 132px !important; padding: 24px 25px !important; }
.page-birthdays .birthday-head h1 { margin: 0 0 5px !important; font-size: 34px !important; }
.page-birthdays .content > .empty { min-height: 150px !important; display: grid !important; place-items: center !important; margin-bottom: 14px !important; }
.page-birthdays .content > .grid-2 { position: static !important; display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 12px !important; margin: 0 0 14px !important; pointer-events: auto !important; }
.page-birthdays .grid-2 .birthday-stat { position: relative !important; min-height: 130px !important; padding: 20px !important; border: 1px solid var(--border) !important; border-radius: 11px !important; background: linear-gradient(145deg,#141513,#11120f) !important; text-align: left !important; }
.page-birthdays .grid-2 .label { display: block !important; margin: 0 0 34px !important; color: #8e9088 !important; font-size: 10px !important; }
.page-birthdays .grid-2 .value { color: #f3f3ee !important; font-size: 25px !important; }
.birthday-stat-gifts { --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 8h-3.2A3 3 0 0 0 12 4.4 3 3 0 0 0 7.2 8H4a2 2 0 0 0-2 2v3h9v-3h2v3h9v-3a2 2 0 0 0-2-2Zm-7-2a1 1 0 1 1 2 0c0 .6-.4 1-2 2V6Zm-4 0a1 1 0 1 1 2 0v2C9.4 7 9 6.6 9 6Zm-7 9h9v7H4a2 2 0 0 1-2-2v-5Zm11 0h9v5a2 2 0 0 1-2 2h-7v-7Z'/%3E%3C/svg%3E"); }
.birthday-stat-balance { --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16a2 2 0 0 1 2 2v12H2V7a2 2 0 0 1 2-2Zm0 2v10h16v-3h-5a3 3 0 0 1 0-6h5V7H4Zm11 3a1 1 0 0 0 0 2h5v-2h-5Z'/%3E%3C/svg%3E"); }
.page-birthdays .birthday-upcoming-card { min-height: 220px !important; padding: 22px !important; background: #131413 !important; }
.page-birthdays .birthday-upcoming-card h2 { font-size: 18px !important; }
.page-birthdays .birthday-card { min-height: 210px !important; padding: 22px !important; border-radius: 11px !important; background: #131413 !important; }

@media (max-width: 900px) {
    .tile-icon { width: 34px; height: 34px; top: 14px; right: 14px; }
    .page-hero-icon { width: 46px; height: 46px; flex-basis: 46px; }
    .page-hero-icon::before { width: 22px; height: 22px; }
    .page-wallet .wallet-head { min-height: 145px !important; }
    .page-wallet .wallet-balance { min-width: 190px; }
    .page-wallet .wallet-actions { grid-template-columns: 1fr !important; }
    .page-wallet .wallet-action-card,.page-wallet .wallet-action-submit { min-height: 115px !important; height: 115px !important; }
    .page-birthdays .content { width: 100% !important; padding: 10px 12px 34px !important; }
}

@media (max-width: 640px) {
    .shop-head,.birthday-head,.wallet-head { align-items: flex-start !important; }
    .page-hero-icon { display: none; }
    .page-wallet .wallet-head { flex-direction: column !important; gap: 18px; }
    .page-wallet .wallet-balance { width: 100%; }
    body.page-wallet .content > .wallet-store-banner { align-items: flex-start; }
    .wallet-store-copy .btn { width: 100% !important; }
    .page-shop .shop-grid { grid-template-columns: 1fr !important; }
    .page-birthdays .content > .grid-2 { grid-template-columns: 1fr !important; }
}

/* Account: explicit dashboard grid and complete black/gold cleanup. */
.account-hero-icon { --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0-8a3 3 0 1 1 0 6 3 3 0 0 1 0-6ZM3 22v-1a9 9 0 0 1 18 0v1h-2a7 7 0 0 0-14 0H3Z'/%3E%3C/svg%3E"); }
body.page-account .content {
    width: min(1360px,100%) !important;
    max-width: 1360px !important;
    padding: 14px 28px 56px !important;
}
body.page-account .page-head.account-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 132px !important;
    margin: 0 0 12px !important;
    padding: 24px 25px !important;
    text-align: left !important;
    background: radial-gradient(450px 180px at 84% 35%,rgba(var(--accent-rgb),.11),transparent 74%),linear-gradient(110deg,#141513,#171711) !important;
}
body.page-account .page-head h1 { margin: 0 0 5px !important; color: #f4f4ef !important; font-size: 34px !important; }
body.page-account .content > .account-update-note {
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 10px 12px !important;
    color: var(--accent-beta) !important;
    border-color: rgba(var(--accent-rgb),.20) !important;
    background: rgba(var(--accent-rgb),.055) !important;
}
body.page-account .account-layout {
    display: grid !important;
    grid-template-columns: minmax(285px,.9fr) minmax(315px,1fr) minmax(390px,1.2fr) !important;
    gap: 13px !important;
    align-items: stretch !important;
}
body.page-account .account-column { display: contents !important; background: transparent !important; border: 0 !important; }
body.page-account .account-layout .card {
    min-width: 0 !important;
    padding: 20px !important;
    border: 1px solid #292a25 !important;
    border-radius: 11px !important;
    color: #e8e8e2 !important;
    background: linear-gradient(145deg,#141513,#11120f) !important;
    box-shadow: 0 12px 35px rgba(0,0,0,.18) !important;
}
body.page-account .account-profile-card { grid-column: 1 !important; grid-row: 1 !important; min-height: 390px !important; }
body.page-account .account-top-card { grid-column: 2 !important; grid-row: 1 !important; min-height: 390px !important; }
body.page-account .account-calendar-card { grid-column: 3 !important; grid-row: 1 !important; min-height: 390px !important; }
body.page-account .account-position-history { grid-column: 1 !important; grid-row: 2 !important; min-height: 360px !important; }
body.page-account .account-vacation-card { grid-column: 2 !important; grid-row: 2 !important; min-height: 360px !important; }
body.page-account .account-punishment-history { grid-column: 3 !important; grid-row: 2 !important; min-height: 360px !important; }
body.page-account .account-attestation-card { grid-column: 1 / -1 !important; grid-row: 3 !important; }
.account-profile-head { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; }
body.page-account .account-profile-head h1 { margin: 0 0 4px !important; color: #f4f4ef !important; font-size: 25px !important; }
body.page-account .account-profile-card .avatar {
    width: 62px !important;
    height: 62px !important;
    border: 1px solid rgba(var(--accent-rgb),.34) !important;
    border-radius: 14px !important;
    color: var(--accent-ink) !important;
    background: linear-gradient(145deg,var(--accent-2),var(--accent-deep)) !important;
    box-shadow: 0 10px 28px rgba(var(--accent-rgb),.12) !important;
}
body.page-account .dl { border-top: 1px solid #242520 !important; }
body.page-account .dl .row {
    min-height: 35px !important;
    padding: 7px 2px !important;
    border-bottom: 1px solid #242520 !important;
    color: #d5d6cf !important;
    background: transparent !important;
    font-size: 10px !important;
}
body.page-account .dl dt { color: #777970 !important; font-weight: 550 !important; }
body.page-account .dl dd { color: #dfe0d9 !important; font-weight: 650 !important; }
.account-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.account-card-head h2 { margin: 0 0 3px !important; color: #eaeae4 !important; font-size: 16px !important; }
.account-card-head p { margin: 0; font-size: 9px; }
.account-card-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 1px solid rgba(var(--accent-rgb),.29);
    border-radius: 9px;
    color: var(--accent);
    background: rgba(var(--accent-rgb),.085);
}
.account-card-icon::before {
    content: "";
    width: 17px;
    height: 17px;
    background: currentColor;
    -webkit-mask: var(--account-icon) center/contain no-repeat;
    mask: var(--account-icon) center/contain no-repeat;
}
.account-top-icon { --account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 3h10v3h4v3a6 6 0 0 1-5.4 6A5.8 5.8 0 0 1 13 16.7V20h4v2H7v-2h4v-3.3A5.8 5.8 0 0 1 8.4 15 6 6 0 0 1 3 9V6h4V3Zm0 5H5v1a4 4 0 0 0 2.3 3.6A9 9 0 0 1 7 10.4V8Zm12 0h-2v2.4a9 9 0 0 1-.3 2.2A4 4 0 0 0 19 9V8Z'/%3E%3C/svg%3E"); }
.account-position-icon { --account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 5V3h8v2h5v16H3V5h5Zm2 0h4V5h-4Zm9 6H5v8h14v-8Zm-8 2h2v2h-2v-2Z'/%3E%3C/svg%3E"); }
.account-vacation-icon { --account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v3h6V2h2v3h4v17H3V5h4V2Zm12 9H5v9h14v-9ZM5 7v2h14V7H5Z'/%3E%3C/svg%3E"); }
.account-punishment-icon { --account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 1 21h22L12 2Zm0 4 7.5 13h-15L12 6Zm-1 4v5h2v-5h-2Zm0 6.5v2h2v-2h-2Z'/%3E%3C/svg%3E"); }
.account-calendar-icon { --account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v3h6V2h2v3h4v17H3V5h4V2Zm12 8H5v10h14V10ZM5 7v1h14V7H5Zm3 5h3v3H8v-3Zm5 0h3v3h-3v-3Z'/%3E%3C/svg%3E"); }
body.page-account .account-top-card .table-wrap {
    border-color: #292a25 !important;
    background: #0f100e !important;
    box-shadow: none !important;
}
body.page-account .account-top-card table { table-layout: fixed; }
body.page-account .timeline { display: flex !important; flex-direction: column !important; gap: 9px !important; }
body.page-account .timeline-item {
    position: relative !important;
    min-height: 64px !important;
    padding: 12px 12px 12px 38px !important;
    border: 1px solid #282924 !important;
    border-radius: 9px !important;
    color: #d7d8d1 !important;
    background: #0f100e !important;
}
body.page-account .timeline-item::before {
    content: "" !important;
    position: absolute !important;
    left: 15px !important;
    top: 17px !important;
    width: 9px !important;
    height: 9px !important;
    border: 2px solid var(--accent) !important;
    border-radius: 50% !important;
    background: #141513 !important;
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.07) !important;
}
body.page-account .timeline-item b { color: var(--accent-2) !important; }
body.page-account .timeline-item .badge { margin-bottom: 6px; }
body.page-account .pager { margin-top: 11px; }
body.page-account .pager-btn { color: var(--accent-link) !important; border-color: #32332d !important; background: #151613 !important; }
body.page-account .account-vacation-card .form { gap: 11px !important; }
body.page-account .account-vacation-card input { background: #0f100e !important; }
body.page-account .calendar-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; margin-bottom: 15px !important; }
body.page-account .calendar-head .account-card-head { margin: 0 !important; }
body.page-account .norm-calendar { display: grid !important; grid-template-columns: repeat(7,minmax(0,1fr)) !important; gap: 5px !important; }
body.page-account .norm-day {
    min-height: 43px !important;
    padding: 5px !important;
    border: 1px solid #2a2b26 !important;
    border-radius: 7px !important;
    color: #a5a79f !important;
    background: #11120f !important;
    box-shadow: none !important;
}
body.page-account .norm-day b { color: inherit !important; font-size: 11px !important; }
body.page-account .norm-day small { display: none !important; }
body.page-account .norm-day.norm-ok { color: #55dc94 !important; border-color: rgba(54,211,129,.28) !important; background: rgba(54,211,129,.08) !important; }
body.page-account .norm-day.norm-fail { color: #ef7480 !important; border-color: rgba(237,89,105,.28) !important; background: rgba(237,89,105,.08) !important; }
body.page-account .norm-day.norm-vacation { color: var(--accent-hi) !important; border-color: rgba(var(--accent-rgb),.28) !important; background: rgba(var(--accent-rgb),.08) !important; }
body.page-account .norm-day.norm-none { color: #777970 !important; border-color: #292a25 !important; background: #11120f !important; }
body.page-account .attestation-list div { border-color: #292a25 !important; color: #d5d6cf !important; background: #10110f !important; }

@media (max-width: 1199px) and (min-width: 901px) {
    body.page-account .account-layout { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    body.page-account .account-profile-card { grid-column: 1 !important; grid-row: 1 !important; }
    body.page-account .account-top-card { grid-column: 2 !important; grid-row: 1 !important; }
    body.page-account .account-calendar-card { grid-column: 1 / -1 !important; grid-row: 2 !important; }
    body.page-account .account-position-history { grid-column: 1 !important; grid-row: 3 !important; }
    body.page-account .account-vacation-card { grid-column: 2 !important; grid-row: 3 !important; }
    body.page-account .account-punishment-history { grid-column: 1 / -1 !important; grid-row: 4 !important; }
}

@media (max-width: 900px) {
    body.page-account .content { width: 100% !important; padding: 10px 12px 34px !important; }
    body.page-account .page-head.account-head { display: flex !important; min-height: 112px !important; padding: 17px !important; }
    body.page-account .account-layout { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
    body.page-account .account-column { display: contents !important; }
    body.page-account .account-layout .card,
    body.page-account .account-profile-card,body.page-account .account-top-card,
    body.page-account .account-calendar-card,body.page-account .account-position-history,
    body.page-account .account-vacation-card,body.page-account .account-punishment-history,
    body.page-account .account-attestation-card {
        grid-column: 1 !important;
        grid-row: auto !important;
        min-height: auto !important;
    }
    body.page-account .account-profile-card { order: 1; }
    body.page-account .account-top-card { order: 2; }
    body.page-account .account-position-history { order: 3; }
    body.page-account .account-calendar-card { order: 4; }
    body.page-account .account-vacation-card { order: 5; }
    body.page-account .account-punishment-history { order: 6; }
    body.page-account .account-attestation-card { order: 7; }
    html body.page-account .content .account-layout {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) !important;
        width: 100% !important;
    }
    html body.page-account .content .account-layout > .account-column { display: contents !important; }
    html body.page-account .content .account-layout .account-column > .card {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Final page family: store centering, rankings, workload, staff, manuals and notifications. */

/* Store products remain centered even when a category contains only 1–2 items. */
body.page-shop .shop-head,
body.page-shop .shop-balance-card,
body.page-shop .shop-section,
body.page-shop .content > .card:last-child { width: min(1180px,100%) !important; margin-left: auto !important; margin-right: auto !important; }
body.page-shop .shop-section .shop-grid {
    grid-template-columns: repeat(auto-fit,minmax(245px,340px)) !important;
    justify-content: center !important;
}

/* Main page leaderboard loses the old violet grid treatment. */
body.page-main .content > .grid-2:last-child > .card:first-child {
    border-color: #292a25 !important;
    background: linear-gradient(145deg,#141513,#11120f) !important;
    background-image: none !important;
}
body.page-main .content > .grid-2:last-child > .card:first-child .table-wrap {
    border-color: #292a25 !important;
    background: #0f100e !important;
}
body.page-main .content > .grid-2:last-child > .card:first-child th { color: #8a8c84 !important; background: #11120f !important; }
body.page-main .content > .grid-2:last-child > .card:first-child td { color: #d9dad3 !important; background: #10110f !important; }
body.page-main .content > .grid-2:last-child > .card:first-child .rank { color: var(--accent-2) !important; }

/* Tops */
.tops-hero-icon { --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 3h10v3h4v3a6 6 0 0 1-5.4 6A5.8 5.8 0 0 1 13 16.7V20h4v2H7v-2h4v-3.3A5.8 5.8 0 0 1 8.4 15 6 6 0 0 1 3 9V6h4V3Zm0 5H5v1a4 4 0 0 0 2.3 3.6A9 9 0 0 1 7 10.4V8Zm12 0h-2v2.4a9 9 0 0 1-.3 2.2A4 4 0 0 0 19 9V8Z'/%3E%3C/svg%3E"); }
.tops-board-icon { --account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 19h17v2H2V3h2v16Zm3-2V9h3v8H7Zm5 0V5h3v12h-3Zm5 0v-6h3v6h-3Z'/%3E%3C/svg%3E"); }
html body.page-tops .content { width: min(1360px,100%) !important; max-width: 1360px !important; margin: 0 auto !important; padding: 14px 28px 56px !important; }
html body.page-tops .tops-head {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    min-height: 132px !important;
    margin: 0 0 12px !important;
    padding: 24px 25px !important;
    text-align: left !important;
}
body.page-tops .tops-head > div { flex: 1; }
body.page-tops .tops-head h1 { width: auto !important; margin: 0 0 5px !important; font-size: 34px !important; }
body.page-tops .tops-head .btn { position: static !important; margin: 0 !important; }
.tops-info-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 13px; }
html body.page-tops .tops-info-grid .info-plate {
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(var(--accent-rgb),.20) !important;
    color: var(--accent-link) !important;
    background: rgba(var(--accent-rgb),.055) !important;
    text-align: left !important;
}
html body.page-tops .tops-board { margin-top: 0 !important; padding: 21px !important; border-color: #292a25 !important; background: #131413 !important; }
body.page-tops .tops-board .table-wrap { border-color: #292a25 !important; background: #0f100e !important; }
body.page-tops .tops-board th { color: #85877f !important; background: #11120f !important; }
body.page-tops .tops-board td { color: #d7d8d1 !important; background: #10110f !important; }
body.page-tops .tops-board .rank { color: var(--accent-2) !important; font-size: 14px !important; }
body.page-tops .tops-board .row-payout { background: rgba(var(--accent-rgb),.045) !important; }
body.page-tops .tops-board .row-payout td:first-child { box-shadow: inset 3px 0 var(--accent) !important; }

/* Workload */
.workload-hero-icon { --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 19h17v2H2V3h2v16Zm3-2V9h3v8H7Zm5 0V5h3v12h-3Zm5 0v-6h3v6h-3Z'/%3E%3C/svg%3E"); }
html body.page-workload .content { width: min(1360px,100%) !important; max-width: 1360px !important; margin: 0 auto !important; padding: 14px 28px 56px !important; }
html body.page-workload .workload-head {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 14px 18px !important;
    min-height: 148px !important;
    margin: 0 0 13px !important;
    padding: 24px 25px !important;
    border: 1px solid #292a25 !important;
    border-radius: 11px !important;
    background: radial-gradient(460px 190px at 84% 35%,rgba(var(--accent-rgb),.10),transparent 74%),linear-gradient(110deg,#141513,#171711) !important;
}
body.page-workload .workload-head h1 { margin: 0 0 5px !important; color: #f4f4ef !important; font-size: 32px !important; }
.workload-search { grid-column: 1 / -1; display: flex; gap: 8px; max-width: 520px; }
.workload-search input { width: 100% !important; }
.workload-sections { display: grid !important; gap: 13px !important; }
html body.page-workload .workload-section {
    padding: 20px !important;
    border: 1px solid #292a25 !important;
    border-radius: 11px !important;
    background: #131413 !important;
}
body.page-workload .mode-section-head { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 11px !important; margin: 0 0 14px !important; }
body.page-workload .mode-section-head > div { margin: 0 !important; }
body.page-workload .mode-section-head .page-eyebrow,
body.page-workload .workload-head .page-eyebrow { display: block !important; }
.mode-section-icon {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    border: 1px solid rgba(var(--accent-rgb),.28);
    border-radius: 9px;
    color: var(--accent);
    background: rgba(var(--accent-rgb),.08);
}
.mode-section-icon::before { content: ""; width: 17px; height: 17px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 6v5c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V6l-8-4Zm0 2.2L18 7v4c0 3.9-2.5 7.7-6 8.8-3.5-1.1-6-4.9-6-8.8V7l6-2.8Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 6v5c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V6l-8-4Zm0 2.2L18 7v4c0 3.9-2.5 7.7-6 8.8-3.5-1.1-6-4.9-6-8.8V7l6-2.8Z'/%3E%3C/svg%3E") center/contain no-repeat; }
body.page-workload .mode-section-head .badge { display: inline-block !important; margin-left: auto !important; }
html body.page-workload .premium-table-wrap { border: 1px solid #2a2b26 !important; background: #0f100e !important; box-shadow: none !important; }
html body.page-workload .workload-table { color: #d7d8d1 !important; background: #0f100e !important; }
html body.page-workload .workload-table th,
html body.page-workload .workload-table td { height: 38px !important; padding: 7px 9px !important; border-color: #252620 !important; color: #c9cac3 !important; background: #10110f !important; font-size: 9px !important; }
html body.page-workload .workload-table thead th { color: #898b83 !important; background: #151613 !important; }
html body.page-workload .workload-table .sticky-col { color: #d9dad3 !important; background: #121310 !important; }
html body.page-workload .workload-table th.sticky-col { color: #999b93 !important; background: #171815 !important; }
html body.page-workload .workload-table .day-empty { color: #55574f !important; background: #10110f !important; }
html body.page-workload .workload-table .day-ok { color: #57dc95 !important; background: rgba(54,211,129,.08) !important; }
html body.page-workload .workload-table .day-zero { color: #ef7783 !important; background: rgba(237,89,105,.08) !important; }
html body.page-workload .workload-table .day-vacation { color: var(--accent-hi) !important; background: rgba(var(--accent-rgb),.08) !important; }
html body.page-workload .workload-table .nd-head,
html body.page-workload .workload-table .nd-cell { color: var(--accent-2) !important; background: rgba(var(--accent-rgb),.07) !important; }
html body.page-workload .workload-table tbody tr:hover td,
html body.page-workload .workload-table tbody tr:hover .sticky-col { background: #171815 !important; }

/* Staff cards */
.staff-hero-icon { --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm6.5 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM2 21a7 7 0 0 1 14 0v1H2v-1Zm13.4-3.8A7.8 7.8 0 0 1 18 22h4v-1a6 6 0 0 0-6.6-5.97v2.17Z'/%3E%3C/svg%3E"); }
html body.page-staff .content { width: min(1360px,100%) !important; max-width: 1360px !important; margin: 0 auto !important; padding: 14px 28px 56px !important; }
html body.page-staff .staff-head {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 14px 18px !important;
    min-height: 156px !important;
    margin: 0 0 13px !important;
    padding: 24px 25px !important;
    text-align: left !important;
}
body.page-staff .staff-head h1 { display: block !important; margin: 0 0 5px !important; font-size: 34px !important; }
.staff-search { grid-column: 1 / -1; position: relative; width: min(520px,100%) !important; margin: 0 !important; }
.staff-search input { width: 100% !important; padding-left: 38px !important; }
.staff-search-icon { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; color: #777970; transform: translateY(-50%); z-index: 2; }
.staff-search-icon::before { content: ""; display: block; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10.5 3a7.5 7.5 0 1 1 0 15 7.5 7.5 0 0 1 0-15Zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Zm4.7 11.8 1.6-1.6 5.2 5.2-1.6 1.6-5.2-5.2Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10.5 3a7.5 7.5 0 1 1 0 15 7.5 7.5 0 0 1 0-15Zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Zm4.7 11.8 1.6-1.6 5.2 5.2-1.6 1.6-5.2-5.2Z'/%3E%3C/svg%3E") center/contain no-repeat; }
html body.page-staff .staff-sections { display: grid !important; gap: 13px !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; }
html body.page-staff .staff-section { padding: 20px !important; border: 1px solid #292a25 !important; border-radius: 11px !important; background: #131413 !important; }
html body.page-staff .staff-section-head { display: flex !important; min-height: 0 !important; margin: 0 0 15px !important; padding: 0 !important; border: 0 !important; }
body.page-staff .staff-section-head p,body.page-staff .staff-section-head .badge { display: inline-block !important; }
body.page-staff .staff-section-head .badge { margin-left: auto; }
.staff-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(285px,1fr)); gap: 11px; }
.staff-member-card { min-width: 0; padding: 17px; border: 1px solid #292a25; border-radius: 10px; background: linear-gradient(145deg,#11120f,#0e0f0d); transition: border-color .16s,transform .16s; }
.staff-member-card:hover { border-color: rgba(var(--accent-rgb),.27); transform: translateY(-2px); }
.staff-member-head { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid #242520; }
.staff-member-head .avatar { width: 43px !important; height: 43px !important; flex: 0 0 43px !important; border-radius: 11px !important; color: var(--accent-ink) !important; background: var(--accent) !important; box-shadow: none !important; }
.staff-member-name { min-width: 0; flex: 1; }
.staff-member-name h3 { margin: 0 0 3px; overflow: hidden; color: #e9e9e3 !important; font-size: 14px !important; text-overflow: ellipsis; white-space: nowrap; }
.staff-member-name p { margin: 0; color: #7e8078; font-size: 9px; }
.staff-crown { width: 20px; height: 20px; color: var(--accent-2); }
.staff-crown::before { content: ""; display: block; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m3 6 4 4 5-7 5 7 4-4-2 13H5L3 6Zm4 11h10l1-7-3 3-3-5-3 5-3-3 1 7Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m3 6 4 4 5-7 5 7 4-4-2 13H5L3 6Zm4 11h10l1-7-3 3-3-5-3 5-3-3 1 7Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.staff-member-meta { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; padding: 14px 0; }
.staff-member-meta span { display: flex; flex-direction: column; gap: 3px; color: #d1d2cb; font-size: 10px; }
.staff-member-meta b { color: #686a62; font-size: 8px; font-weight: 650; text-transform: uppercase; }
.staff-member-footer { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.staff-member-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.staff-telegram { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-link) !important; font-size: 9px; }
.staff-telegram span { width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m21.5 3.5-3 17-5-4-2.5 2.5v-4l7-7-9 6-5-1.5 17.5-9Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m21.5 3.5-3 17-5-4-2.5 2.5v-4l7-7-9 6-5-1.5 17.5-9Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.staff-no-contact { color: #5f615a; font-size: 9px; }
.staff-empty { min-height: 150px; display: grid !important; place-items: center; }

/* Manuals */
.manuals-hero-icon { --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h9l5 5v15H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm8 1.5V8h4.5L14 3.5ZM8 12h8v2H8v-2Zm0 4h8v2H8v-2Z'/%3E%3C/svg%3E"); }
html body.page-manuals .content { width: min(1360px,100%) !important; max-width: 1360px !important; padding: 14px 28px 56px !important; }
body.page-manuals .manuals-portal { max-width: 1280px; }
body.page-manuals .manuals-hero {
    position: relative;
    align-items: center;
    min-height: 150px;
    padding: 24px 25px !important;
    border: 1px solid #292a25 !important;
    border-radius: 11px;
    background: radial-gradient(460px 190px at 84% 35%,rgba(var(--accent-rgb),.10),transparent 74%),linear-gradient(110deg,#141513,#171711);
}
body.page-manuals .manuals-kicker { color: var(--accent-beta) !important; }
body.page-manuals .manuals-hero h1 { color: #f4f4ef !important; }
body.page-manuals .manuals-hero p { color: #8c8e86 !important; }
body.page-manuals .manuals-search { border-color: #30312c !important; background: #0f100e !important; color: #74766e !important; }
body.page-manuals .manuals-search:focus-within { border-color: var(--accent-deep) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.10) !important; }
body.page-manuals .manuals-search kbd { border-color: #34352f !important; color: #777970 !important; background: #151613 !important; }
body.page-manuals .manuals-layout { gap: 25px; }
body.page-manuals .manuals-categories-title { color: #6f7169 !important; }
body.page-manuals .manuals-category { color: #9b9d95 !important; }
body.page-manuals .manuals-category:hover { color: #e6e6e0 !important; background: #151613 !important; }
body.page-manuals .manuals-category.active { color: var(--accent-hi) !important; background: rgba(var(--accent-rgb),.08) !important; box-shadow: inset 2px 0 var(--accent) !important; }
body.page-manuals .manuals-category b { color: var(--accent-beta) !important; }
body.page-manuals .manuals-library-head h2 { color: #e9e9e3 !important; }
body.page-manuals .manuals-library-head p { color: #73756d !important; }
body.page-manuals .manual-library-card { border-color: #292a25 !important; color: #ecece6 !important; background: linear-gradient(145deg,#11120f,#0e0f0d) !important; }
body.page-manuals .manual-library-card:hover { border-color: rgba(var(--accent-rgb),.30) !important; background: #151613 !important; }
body.page-manuals .manual-library-icon { border-color: rgba(var(--accent-rgb),.28) !important; color: var(--accent) !important; background: rgba(var(--accent-rgb),.08) !important; }
body.page-manuals .manual-library-category { color: var(--accent-deep) !important; }
body.page-manuals .manual-library-copy > p { color: #898b83 !important; }
body.page-manuals .manual-library-meta { color: #62645d !important; }
body.page-manuals .manual-library-arrow { color: #666860 !important; }
body.page-manuals .manual-library-card:hover .manual-library-arrow { color: var(--accent-hi) !important; }
body.page-manuals .manuals-empty { border-color: #2d2e29 !important; color: #73756d !important; }

/* Notifications */
.notifications-hero-icon { --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 1 7 7v4l2 4H3l2-4V9a7 7 0 0 1 7-7Zm0 2a5 5 0 0 0-5 5v4.5L6.2 15h11.6l-.8-1.5V9a5 5 0 0 0-5-5Zm-3 15h6a3 3 0 0 1-6 0Z'/%3E%3C/svg%3E"); }
html body.page-notifications .content { width: min(1100px,100%) !important; max-width: 1100px !important; padding: 14px 28px 56px !important; }
html body.page-notifications .notif-page-head {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    min-height: 132px !important;
    margin: 0 0 13px !important;
    padding: 24px 25px !important;
    border: 1px solid #292a25 !important;
    background: radial-gradient(430px 170px at 84% 35%,rgba(var(--accent-rgb),.10),transparent 74%),linear-gradient(110deg,#141513,#171711) !important;
}
body.page-notifications .notif-page-head > div { flex: 1; }
body.page-notifications .notif-page-head h1 { margin: 0 0 5px !important; color: #f4f4ef !important; font-size: 34px !important; }
body.page-notifications .notif-page-head > .badge { min-width: 34px; margin-left: 0; color: var(--accent-hi) !important; border-color: rgba(var(--accent-rgb),.25) !important; background: rgba(var(--accent-rgb),.08) !important; }
body.page-notifications .notif-list { display: grid !important; gap: 9px !important; }
body.page-notifications .notif-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 13px !important;
    min-height: 92px !important;
    padding: 15px !important;
    border: 1px solid #292a25 !important;
    border-radius: 10px !important;
    color: #d8d9d2 !important;
    background: linear-gradient(145deg,#131412,#10110f) !important;
}
body.page-notifications .notif-item.unread { border-left: 3px solid var(--accent) !important; border-color: rgba(var(--accent-rgb),.28) !important; background: linear-gradient(90deg,rgba(var(--accent-rgb),.075),#11120f 38%) !important; }
body.page-notifications .notif-icon {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    border: 1px solid rgba(var(--accent-rgb),.28) !important;
    border-radius: 10px !important;
    color: var(--accent) !important;
    background: rgba(var(--accent-rgb),.08) !important;
    box-shadow: none !important;
}
body.page-notifications .notif-icon::before {
    content: "" !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: currentColor !important;
    -webkit-mask: var(--notif-mask, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 1 7 7v4l2 4H3l2-4V9a7 7 0 0 1 7-7Zm0 2a5 5 0 0 0-5 5v4.5L6.2 15h11.6l-.8-1.5V9a5 5 0 0 0-5-5Z'/%3E%3C/svg%3E")) center/contain no-repeat !important;
    mask: var(--notif-mask, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 1 7 7v4l2 4H3l2-4V9a7 7 0 0 1 7-7Zm0 2a5 5 0 0 0-5 5v4.5L6.2 15h11.6l-.8-1.5V9a5 5 0 0 0-5-5Z'/%3E%3C/svg%3E")) center/contain no-repeat !important;
}
body.page-notifications .notif-icon::after { display: none !important; content: none !important; }
.notif-icon-data { --notif-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a9 9 0 0 1 8.5 6H18l3.5 4L25 9h-2.4A11 11 0 1 0 23 13h-2a9 9 0 1 1-9-10Zm-1 4h2v4h4v2h-6V7Z'/%3E%3C/svg%3E"); }
.notif-icon-status { --notif-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m9.2 16.6-4.8-4.8 1.4-1.4 3.4 3.4 9-9 1.4 1.4-10.4 10.4Z'/%3E%3C/svg%3E"); }
.notif-icon-position { --notif-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 5V3h8v2h5v16H3V5h5Zm2 0h4V5h-4Zm9 6H5v8h14v-8Z'/%3E%3C/svg%3E"); }
.notif-icon-points,.notif-icon-shop { --notif-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm1 4h-2v1.2c-1.7.3-3 1.4-3 3.1 0 2.1 1.8 2.8 3.6 3.2 1.5.3 2.4.7 2.4 1.5 0 .7-.7 1.2-2 1.2-1.4 0-2.4-.5-3.2-1.1L7.7 17c.9.7 2 1.2 3.3 1.4V20h2v-1.6c1.8-.3 3-1.5 3-3.3 0-2.2-1.8-2.9-3.8-3.4-1.4-.3-2.2-.6-2.2-1.4 0-.7.7-1.1 1.8-1.1 1.2 0 2.1.4 2.9.9l1-1.8c-.8-.6-1.7-.9-2.7-1.1V6Z'/%3E%3C/svg%3E"); }
.notif-icon-vacation,.notif-icon-form { --notif-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v3h6V2h2v3h4v17H3V5h4V2Zm12 9H5v9h14v-9ZM5 7v2h14V7H5Z'/%3E%3C/svg%3E"); }
.notif-icon-punishment { --notif-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 1 21h22L12 2Zm0 4 7.5 13h-15L12 6Zm-1 4v5h2v-5h-2Zm0 6.5v2h2v-2h-2Z'/%3E%3C/svg%3E"); }
body.page-notifications .notif-title-row b { color: #ecece6 !important; font-size: 13px !important; }
body.page-notifications .notif-text { color: #a1a39b !important; font-size: 10px !important; }
body.page-notifications .notif-body small { color: #666860 !important; }
body.page-notifications .notif-status { color: var(--accent-ink) !important; border: 0 !important; background: var(--accent) !important; }

@media (max-width: 900px) {
    html body.page-tops .content,html body.page-workload .content,html body.page-staff .content,
    html body.page-manuals .content,html body.page-notifications .content { width: 100% !important; padding: 10px 12px 34px !important; }
    .tops-info-grid { grid-template-columns: 1fr; }
    .staff-grid { grid-template-columns: 1fr; }
    body.page-manuals .manuals-hero { align-items: stretch; }
    body.page-manuals .manuals-hero-icon { display: none; }
}

@media (max-width: 640px) {
    html body.page-tops .tops-head,html body.page-workload .workload-head,html body.page-staff .staff-head,
    html body.page-notifications .notif-page-head { min-height: 115px !important; padding: 17px !important; }
    .tops-head .page-hero-icon,.workload-head .page-hero-icon,.staff-head .page-hero-icon,.notif-page-head .page-hero-icon { display: none; }
    body.page-tops .tops-head .btn { display: none !important; }
    .workload-search { max-width: none; }
    body.page-manuals .manuals-layout { grid-template-columns: 1fr; }
    body.page-manuals .manuals-grid { grid-template-columns: 1fr; }
}
/* Admin: role norms and bulk daily stats. */
.admin-norm-grid { align-items: start; }
.norm-settings-table input[type="number"] { min-width: 92px; width: 100%; }
.norm-settings-table td:first-child { min-width: 180px; }
.norm-active-label {
  display: block;
  margin-top: 4px;
  color: var(--muted, #8b867b);
  font-size: 11px;
  font-weight: 600;
}

@media (max-width: 760px) {
  .admin-norm-grid { grid-template-columns: 1fr; }
  .norm-settings-table td:first-child { min-width: 145px; }
  .norm-settings-table input[type="number"] { min-width: 78px; }
}

/* Stable admin navigation and searchable team list. */
.admin-member-search { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 12px; padding: 14px 16px !important; }
.admin-member-search label { flex: 1; max-width: 620px; margin: 0; }
.admin-member-search input { margin-top: 7px; }
[hidden] { display: none !important; }

/* Media administration: predictable inline detail panels, no modal overlay. */
body.page-media_partners::after { display: none !important; content: none !important; }
.page-media_partners .media-admin-head { display: flex !important; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 14px; }
.page-media_partners .media-split { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; align-items: start !important; }
.page-media_partners .media-split > .card:first-child { width: auto !important; min-width: 0 !important; }
.page-media_partners .media-detail-card,
.page-media_partners .media-detail-card.open,
.page-media_partners .media-detail-card:not(.open) {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  overflow: visible !important;
  contain: none !important;
  z-index: auto !important;
  transition: none !important;
  box-shadow: none !important;
}
.page-media_partners .media-detail-close { position: static !important; float: right; margin: 0 0 8px 12px; }
.page-media_partners .media-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.page-media_partners .media-list-head h2 { margin: 0 !important; }
.page-media_partners .media-list-head input { width: min(280px, 48%); min-width: 170px; }
.page-media_partners .tab-panel > .card,.page-media_partners .media-split > .card { border-color: #292a25 !important; background: #131413 !important; }
.page-media_partners .media-detail-card form + form { padding-top: 14px; border-top: 1px solid #292a25; }
.page-media_partners button:disabled { cursor: wait !important; opacity: .72 !important; }

@media (max-width: 1050px) {
  .page-media_partners .media-split { grid-template-columns: 1fr !important; }
  .page-media_partners .media-detail-card,.page-media_partners .media-detail-card.open { position: static !important; max-height: none !important; }
}
@media (max-width: 640px) {
  .admin-member-search,.page-media_partners .media-list-head { align-items: stretch; flex-direction: column; }
  .page-media_partners .media-list-head input { width: 100%; }
}

/* Employee moderation reports. */
.ico-report { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10a2 2 0 0 1 2 2v16H5V5a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h4'/%3E%3Cpath d='m15 16 1.5 1.5L20 14'/%3E%3C/svg%3E"); }
.sidebar-report { display: flex !important; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.sidebar-report .ico { width: 18px; height: 18px; flex: 0 0 18px; }
.sidebar-report.active { color: var(--accent-ink) !important; background: var(--accent) !important; }
.report-head { display: flex; justify-content: space-between; align-items: center; min-height: 150px; }
.report-hero-icon { --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h12a2 2 0 0 1 2 2v18H4V4a2 2 0 0 1 2-2Zm0 2v16h12V4H6Zm3 4h6v2H9V8Zm0 4h6v2H9v-2Zm0 4h4v2H9v-2Z'/%3E%3C/svg%3E"); }
.report-layout { align-items: start; }
.report-form-card,.report-history-card { min-height: 330px; }
.report-list { display: grid; gap: 9px; margin-top: 14px; }
.report-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 13px; border: 1px solid #292a25; border-radius: 9px; background: #10110f; }
.report-row small { display: block; margin-top: 3px; }
@media (max-width: 760px) {
  .report-layout { grid-template-columns: 1fr; }
  .report-hero-icon { display: none; }
}

/* Final media dialog override — must stay after legacy media layouts. */
.page-media_partners .media-split { display: block !important; }
.page-media_partners .media-detail-card,
.page-media_partners .media-detail-card:not(.open) { display: none !important; }
.page-media_partners .media-detail-card.open {
  display: block !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  width: min(860px, calc(100vw - 48px)) !important;
  max-width: 860px !important;
  max-height: calc(100vh - 56px) !important;
  margin: 0 !important;
  padding: 22px !important;
  transform: translate(-50%, -50%) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  contain: none !important;
  z-index: 220 !important;
  border: 1px solid #35362f !important;
  border-radius: 12px !important;
  background: #131413 !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.7) !important;
}
body.page-media_partners:has(.media-detail-card.open)::after {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 210 !important;
  background: rgba(0,0,0,.72) !important;
  backdrop-filter: blur(4px) !important;
  pointer-events: auto !important;
}
.page-media_partners .media-detail-close {
  position: sticky !important;
  top: 0 !important;
  float: right !important;
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 0 10px 14px !important;
  z-index: 2 !important;
  border: 1px solid #34352f !important;
  border-radius: 8px !important;
  color: #b4b5ae !important;
  background: #191a17 !important;
  text-decoration: none !important;
}
.page-media_partners .media-detail-close:hover { color: var(--accent-ink) !important; border-color: var(--accent) !important; background: var(--accent) !important; }
body.page-media_partners.media-dialog-open { overflow: hidden !important; }
@media (max-width: 900px) {
  .page-media_partners .media-detail-card.open {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    padding: 17px !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* Active media layout: stable side card. */
body.page-media_partners::after,
body.page-media_partners:has(.media-detail-card.open)::after { display: none !important; content: none !important; }
body.page-media_partners.media-dialog-open { overflow: auto !important; }
.page-media_partners .media-split { display: block !important; }
.page-media_partners .media-split:has(.media-detail-card.open) {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr) !important;
  gap: 16px !important;
  align-items: start !important;
}
.page-media_partners .media-detail-card,
.page-media_partners .media-detail-card:not(.open) { display: none !important; }
.page-media_partners .media-detail-card.open {
  display: block !important;
  position: sticky !important;
  top: 78px !important;
  left: auto !important;
  width: auto !important;
  max-width: none !important;
  max-height: calc(100vh - 98px) !important;
  margin: 0 !important;
  padding: 20px !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  overflow: auto !important;
  contain: none !important;
  z-index: 1 !important;
  border: 1px solid #30312b !important;
  border-radius: 11px !important;
  background: #131413 !important;
  box-shadow: none !important;
}
.page-media_partners .media-detail-close {
  position: sticky !important;
  top: 0 !important;
  float: right !important;
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 0 8px 12px !important;
}
@media (max-width: 1050px) {
  .page-media_partners .media-split:has(.media-detail-card.open) { grid-template-columns: 1fr !important; }
  .page-media_partners .media-detail-card.open { position: static !important; top: auto !important; max-height: none !important; }
}

/* Registration and login: keep the form card and its copy visually centered. */
body.page-register .auth-wrap,
body.page-login .auth-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
  padding: 24px !important;
}
body.page-register .auth-card,
body.page-login .auth-card { margin: auto !important; }
body.page-register .auth-head,
body.page-login .auth-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 0 22px !important;
  text-align: center !important;
}
body.page-register .auth-head h1,
body.page-register .auth-head p,
body.page-login .auth-head h1,
body.page-login .auth-head p {
  width: 100% !important;
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center !important;
}
body.page-register .auth-alt,
body.page-login .auth-alt { text-align: center !important; }

/* Auth layout final guard: center the application card in the viewport on every screen. */
body.page-register,
body.page-login {
  min-width: 0 !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
}
body.page-register .auth-wrap,
body.page-login .auth-wrap {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 24px 14px !important;
}
body.page-register .auth-card.center,
body.page-login .auth-card.center {
  box-sizing: border-box !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: min(420px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  min-width: 0 !important;
  margin: 0 !important;
  align-self: center !important;
  justify-self: center !important;
  transform: none !important;
}
body.page-register .auth-card.center *,
body.page-login .auth-card.center * { box-sizing: border-box; }

@media (max-width: 480px) {
  body.page-register .auth-wrap,
  body.page-login .auth-wrap { padding: 14px !important; }
  body.page-register .auth-card.center,
  body.page-login .auth-card.center {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
  }
}

/* Authentication feedback belongs to the card, so validation never creates a second viewport. */
body.page-register .auth-flashes,
body.page-login .auth-flashes,
body.page-pending .auth-flashes,
body.page-error .auth-flashes {
  display: grid !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 0 18px !important;
  text-align: left !important;
}
body.page-register .auth-flashes .flash,
body.page-login .auth-flashes .flash,
body.page-pending .auth-flashes .flash,
body.page-error .auth-flashes .flash {
  width: 100% !important;
  margin: 0 !important;
}

/* Admin and media panels: larger, higher-contrast typography for long work sessions. */
body.page-admin .content,
body.page-media_partners .content {
  color: #e8e9e2 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 450 !important;
}
body.page-admin .page-head h1,
body.page-media_partners .page-head h1 {
  font-size: 30px !important;
  line-height: 1.18 !important;
  letter-spacing: -.45px !important;
}
body.page-admin h2,
body.page-media_partners h2 {
  color: #f2f3ed !important;
  font-size: 19px !important;
  line-height: 1.3 !important;
  font-weight: 750 !important;
}
body.page-admin h3,
body.page-media_partners h3 { font-size: 16px !important; line-height: 1.35 !important; }
body.page-admin .muted,
body.page-media_partners .muted {
  color: #a8aaa2 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
body.page-admin small,
body.page-media_partners small { font-size: 12px !important; line-height: 1.4 !important; }
body.page-admin .tab,
body.page-media_partners .tab {
  min-height: 42px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}
body.page-admin th,
body.page-media_partners th {
  height: 44px !important;
  padding: 10px 13px !important;
  color: #b5b7af !important;
  font-size: 11.5px !important;
  line-height: 1.3 !important;
  font-weight: 750 !important;
  letter-spacing: .35px !important;
}
body.page-admin td,
body.page-media_partners td {
  height: 48px !important;
  padding: 11px 13px !important;
  color: #dddED7 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
body.page-admin label,
body.page-media_partners label {
  color: #caccC4 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 650 !important;
}
body.page-admin input,
body.page-admin select,
body.page-admin textarea,
body.page-media_partners input,
body.page-media_partners select,
body.page-media_partners textarea {
  min-height: 44px !important;
  padding: 10px 12px !important;
  color: #f0f1eb !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}
body.page-admin textarea,
body.page-media_partners textarea { min-height: 96px !important; }
body.page-admin .btn,
body.page-media_partners .btn {
  min-height: 40px !important;
  padding: 9px 14px !important;
  font-size: 12.5px !important;
  line-height: 1.2 !important;
  font-weight: 750 !important;
}
body.page-admin .btn-sm,
body.page-media_partners .btn-sm { min-height: 36px !important; padding: 8px 12px !important; font-size: 12px !important; }
body.page-admin .badge,
body.page-media_partners .badge,
body.page-admin .badge-count,
body.page-media_partners .badge-count {
  min-height: 24px !important;
  padding: 4px 8px !important;
  font-size: 10.5px !important;
  line-height: 1.25 !important;
  font-weight: 750 !important;
}
body.page-admin .info-plate,
body.page-admin .warn-plate,
body.page-admin .flash,
body.page-media_partners .info-plate,
body.page-media_partners .warn-plate,
body.page-media_partners .flash {
  padding: 12px 14px !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}
body.page-admin .tile .label,
body.page-media_partners .tile .label { color: #a8aaa2 !important; font-size: 11px !important; }
body.page-admin .tile .value,
body.page-media_partners .tile .value { font-size: 27px !important; }
body.page-admin .dl dt,
body.page-media_partners .dl dt { color: #a8aaa2 !important; font-size: 12px !important; }
body.page-admin .dl dd,
body.page-media_partners .dl dd { color: #e5e6df !important; font-size: 13px !important; }

@media (max-width: 700px) {
  body.page-admin .content,
  body.page-media_partners .content { font-size: 13px !important; }
  body.page-admin .page-head h1,
  body.page-media_partners .page-head h1 { font-size: 25px !important; }
  body.page-admin .tab,
  body.page-media_partners .tab { min-height: 39px !important; padding: 9px 12px !important; font-size: 12px !important; }
}

/* Command Center accent typography for primary admin controls. */
body.page-admin .page-head h1,
body.page-media_partners .page-head h1,
body.page-admin .topbar-title,
body.page-media_partners .topbar-title {
  font-family: "Manrope", "Onest", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
}
body.page-admin .tabs .tab,
body.page-media_partners .tabs .tab {
  font-family: "Manrope", "Onest", sans-serif !important;
  min-height: 38px !important;
  padding: 9px 11px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}
body.page-admin .btn-primary,
body.page-admin .btn-danger,
body.page-media_partners .btn-primary,
body.page-media_partners .btn-danger {
  font-family: "Manrope", "Onest", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}
body.page-admin .section-head h2,
body.page-admin .media-list-head h2,
body.page-media_partners .section-head h2,
body.page-media_partners .media-list-head h2,
body.page-media_partners .media-detail-card h2 {
  font-family: "Manrope", "Onest", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .025em !important;
}
body.page-admin .tabs .badge-count,
body.page-media_partners .tabs .badge-count {
  font-family: "Manrope", "Onest", sans-serif !important;
  letter-spacing: 0 !important;
}

/* Keep the admin workspace at its original size; only the primary menu is compact. */
body.page-admin .content {
  width: min(1360px, 100%) !important;
  max-width: 1360px !important;
  margin: 0 auto !important;
  padding: 14px 28px 56px !important;
}
body.page-admin .admin-primary-tabs {
  display: grid !important;
  grid-template-columns: repeat(14, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 4px !important;
  overflow-x: visible !important;
  white-space: normal !important;
}
body.page-admin .admin-primary-tabs .tab {
  grid-column: span 2 !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
  border: 1px solid #2b2d27 !important;
  border-radius: 8px !important;
  color: #a8aaa1 !important;
  background: linear-gradient(145deg, #151613, #10110f) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 3px 10px rgba(0,0,0,.12) !important;
  font-size: 11px !important;
  letter-spacing: .04em !important;
  white-space: nowrap !important;
  transition: color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}
body.page-admin .admin-primary-tabs .tab::before {
  content: "" !important;
  position: absolute !important;
  right: 18px !important;
  bottom: 0 !important;
  left: 18px !important;
  height: 1px !important;
  border-radius: 2px 2px 0 0 !important;
  background: linear-gradient(90deg, transparent, #4a4c43, transparent) !important;
}
body.page-admin .admin-primary-tabs .tab:hover {
  color: #ece9dc !important;
  border-color: #51482f !important;
  background: linear-gradient(145deg, #1a1a15, #13130f) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 5px 14px rgba(0,0,0,.18) !important;
}
body.page-admin .admin-primary-tabs .tab.active {
  color: var(--accent-hi) !important;
  border-color: rgba(var(--accent-rgb),.48) !important;
  background: linear-gradient(145deg, rgba(var(--accent-rgb),.17), rgba(var(--accent-rgb),.065)) !important;
  box-shadow: inset 0 1px 0 rgba(var(--accent-rgb),.09), 0 5px 16px rgba(var(--accent-rgb),.08) !important;
}
body.page-admin .admin-primary-tabs .tab.active::before {
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--accent), transparent) !important;
  box-shadow: 0 0 10px rgba(var(--accent-rgb),.35) !important;
}
body.page-admin .admin-primary-tabs .tab:nth-child(8) {
  grid-column: 2 / span 2 !important;
}
body.page-admin .admin-primary-tabs .tab:last-child {
  padding-right: 6px !important;
  padding-left: 6px !important;
  font-size: 9.5px !important;
  letter-spacing: .015em !important;
}
body.page-admin .admin-primary-tabs .badge-count {
  min-width: 19px !important;
  min-height: 19px !important;
  padding: 2px 5px !important;
  font-size: 9px !important;
}

/* Video titles stay compact even when platforms return very long captions. */
body.page-media_partners #tab-videos .media-video-title {
  display: inline-block !important;
  max-width: 340px !important;
  color: #dedfd8 !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
  font-weight: 650 !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

/* Media workspace uses the same dark control-card tabs as Command Center. */
body.page-media_partners .media-primary-tabs {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 4px !important;
  overflow-x: visible !important;
  white-space: normal !important;
}
body.page-media_partners .media-primary-tabs .tab {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
  border: 1px solid #2b2d27 !important;
  border-radius: 8px !important;
  color: #a8aaa1 !important;
  background: linear-gradient(145deg, #151613, #10110f) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 3px 10px rgba(0,0,0,.12) !important;
  font-size: 11px !important;
  letter-spacing: .04em !important;
  white-space: nowrap !important;
  transition: color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}
body.page-media_partners .media-primary-tabs .tab::before {
  content: "" !important;
  position: absolute !important;
  right: 18px !important;
  bottom: 0 !important;
  left: 18px !important;
  display: block !important;
  height: 1px !important;
  border-radius: 2px 2px 0 0 !important;
  background: linear-gradient(90deg, transparent, #4a4c43, transparent) !important;
}
body.page-media_partners .media-primary-tabs .tab:hover {
  color: #ece9dc !important;
  border-color: #51482f !important;
  background: linear-gradient(145deg, #1a1a15, #13130f) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 5px 14px rgba(0,0,0,.18) !important;
}
body.page-media_partners .media-primary-tabs .tab.active {
  color: var(--accent-hi) !important;
  border-color: rgba(var(--accent-rgb),.48) !important;
  background: linear-gradient(145deg, rgba(var(--accent-rgb),.17), rgba(var(--accent-rgb),.065)) !important;
  box-shadow: inset 0 1px 0 rgba(var(--accent-rgb),.09), 0 5px 16px rgba(var(--accent-rgb),.08) !important;
}
body.page-media_partners .media-primary-tabs .tab.active::before {
  display: block !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--accent), transparent) !important;
  box-shadow: 0 0 10px rgba(var(--accent-rgb),.35) !important;
}
body.page-media_partners .media-primary-tabs .tab.active .badge-count {
  color: var(--accent-ink) !important;
  border-color: var(--accent) !important;
  background: var(--accent) !important;
}

@media (max-width: 900px) {
  body.page-media_partners .media-primary-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.page-media_partners .media-primary-tabs .tab:last-child {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px) {
  body.page-admin .content { padding: 12px 14px 44px !important; }
  body.page-admin .admin-primary-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  body.page-admin .admin-primary-tabs .tab {
    width: auto !important;
  }
}

/* Manual editor v2: fixed controls with a separate scrollable document pane. */
.manual-editor-widget .manual-document-shell {
  height: clamp(540px, 72vh, 840px) !important;
  min-height: 540px !important;
  overflow: hidden !important;
}
.manual-editor-widget .manual-document-outline {
  position: relative !important;
  top: auto !important;
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable !important;
}
.manual-editor-widget .manual-document-workarea {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 8px 30px 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  scrollbar-color: var(--border) #11120f !important;
}
.manual-editor-widget .manual-ruler {
  position: sticky !important;
  top: 0 !important;
  z-index: 18 !important;
  margin-bottom: 10px !important;
  background: rgba(20,21,18,.98) !important;
  backdrop-filter: blur(12px) !important;
}
.manual-editor-widget .manual-rich-editor {
  min-height: 900px !important;
  overflow: visible !important;
}
.manual-editor-widget .manual-document-workarea::-webkit-scrollbar,
.manual-editor-widget .manual-document-outline::-webkit-scrollbar { width: 11px !important; }
.manual-editor-widget .manual-document-workarea::-webkit-scrollbar-track,
.manual-editor-widget .manual-document-outline::-webkit-scrollbar-track { background: #11120f !important; border-radius: 8px !important; }
.manual-editor-widget .manual-document-workarea::-webkit-scrollbar-thumb,
.manual-editor-widget .manual-document-outline::-webkit-scrollbar-thumb { background: var(--border) !important; border: 3px solid #11120f !important; border-radius: 8px !important; }
.manual-editor-widget [data-manual-size] {
  width: 62px !important;
  color: var(--accent-hi) !important;
  border-color: rgba(var(--accent-rgb),.32) !important;
  background: rgba(var(--accent-rgb),.055) !important;
}

/* Reader outline: numbered chapters, progress and a custom chapter picker. */
body.page-manual_detail .manual-reader-outline {
  padding: 13px !important;
  border-radius: 11px !important;
  background: linear-gradient(160deg, rgba(22,23,20,.98), rgba(14,15,13,.98)) !important;
}
.manual-reader-outline-heading {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
}
.manual-reader-outline-heading > div { min-width: 0 !important; }
.manual-reader-outline-heading small {
  display: block !important;
  margin-bottom: 2px !important;
  color: #777970 !important;
  font-size: 7px !important;
  font-weight: 750 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.manual-reader-outline-icon {
  width: 31px !important;
  height: 31px !important;
  flex: 0 0 31px !important;
  border: 1px solid rgba(var(--accent-rgb),.3) !important;
  border-radius: 8px !important;
  background: rgba(var(--accent-rgb),.09) !important;
}
.manual-reader-outline-icon::before {
  content: "" !important;
  display: block !important;
  width: 15px !important;
  height: 16px !important;
  margin: 7px auto !important;
  background: var(--accent) !important;
  clip-path: polygon(0 0,100% 0,100% 18%,0 18%,0 41%,100% 41%,100% 59%,0 59%,0 82%,100% 82%,100% 100%,0 100%) !important;
}
.manual-outline-progress {
  height: 3px !important;
  margin: 10px 2px 12px !important;
  overflow: hidden !important;
  border-radius: 99px !important;
  background: #292a25 !important;
}
.manual-outline-progress span {
  display: block !important;
  width: 0;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg,var(--accent-deep),var(--accent-hi)) !important;
  box-shadow: 0 0 8px rgba(var(--accent-rgb),.3) !important;
  transition: width .22s ease !important;
}
body.page-manual_detail .manual-outline-list { gap: 6px !important; }
body.page-manual_detail .manual-outline-item {
  display: grid !important;
  grid-template-columns: 27px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 42px !important;
  padding: 7px 8px !important;
  border-radius: 8px !important;
}
.manual-outline-index {
  display: grid !important;
  place-items: center !important;
  width: 27px !important;
  height: 27px !important;
  border: 1px solid #33342e !important;
  border-radius: 7px !important;
  color: #76786f !important;
  background: #181916 !important;
  font-size: 8px !important;
  font-weight: 800 !important;
}
.manual-outline-label {
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.page-manual_detail .manual-outline-item.level-h2 .manual-outline-label { padding-left: 7px !important; }
body.page-manual_detail .manual-outline-item.level-h3 .manual-outline-label,
body.page-manual_detail .manual-outline-item.level-h4 .manual-outline-label { padding-left: 14px !important; }
body.page-manual_detail .manual-outline-item.is-active .manual-outline-index {
  color: #181208 !important;
  border-color: var(--accent) !important;
  background: var(--accent) !important;
}
.manual-chapter-picker { position: relative !important; min-width: 0 !important; }
.manual-chapter-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
.manual-chapter-picker-trigger {
  display: grid !important;
  grid-template-columns: 32px minmax(0,1fr) 18px !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 5px 7px !important;
  border: 1px solid #36372f !important;
  border-radius: 8px !important;
  color: #e6e7df !important;
  background: linear-gradient(145deg,#1c1d19,#151613) !important;
  cursor: pointer !important;
}
.manual-chapter-picker-trigger:hover { border-color: rgba(var(--accent-rgb),.38) !important; background: rgba(var(--accent-rgb),.055) !important; }
.manual-chapter-picker-trigger > span:nth-child(2) { display: grid !important; gap: 1px !important; min-width: 0 !important; text-align: left !important; }
.manual-chapter-picker-trigger small { color: #777970 !important; font-size: 7px !important; font-weight: 750 !important; text-transform: uppercase !important; }
.manual-chapter-picker-trigger b { overflow: hidden !important; font-size: 10px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.manual-chapter-picker-icon {
  width: 32px !important;
  height: 32px !important;
  border: 1px solid rgba(var(--accent-rgb),.28) !important;
  border-radius: 7px !important;
  background: rgba(var(--accent-rgb),.08) !important;
}
.manual-chapter-picker-icon::before {
  content: "" !important;
  display: block !important;
  width: 15px !important;
  height: 13px !important;
  margin: 9px auto !important;
  border-top: 2px solid var(--accent-2) !important;
  border-bottom: 2px solid var(--accent-2) !important;
  box-shadow: inset 0 5px 0 -3px var(--accent-2) !important;
}
.manual-chapter-picker-chevron { color: #8b8d84 !important; font-size: 13px !important; }
.manual-chapter-menu {
  position: absolute !important;
  right: 0 !important;
  bottom: calc(100% + 10px) !important;
  z-index: 70 !important;
  width: min(430px, calc(100vw - 40px)) !important;
  max-height: min(520px, 65vh) !important;
  overflow: hidden !important;
  border: 1px solid #393a33 !important;
  border-radius: 12px !important;
  background: rgba(18,19,16,.99) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.62) !important;
  backdrop-filter: blur(18px) !important;
}
.manual-chapter-menu[hidden] { display: none !important; }
.manual-chapter-menu-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 13px 14px !important;
  border-bottom: 1px solid #2d2e29 !important;
  background: linear-gradient(145deg,#1a1b18,#151613) !important;
}
.manual-chapter-menu-head > div { display: grid !important; gap: 2px !important; min-width: 0 !important; }
.manual-chapter-menu-head small { color: #777970 !important; font-size: 7px !important; letter-spacing: .08em !important; text-transform: uppercase !important; }
.manual-chapter-menu-head b { overflow: hidden !important; color: #ebebe5 !important; font-size: 11px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.manual-chapter-menu-head button {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  border: 1px solid #373832 !important;
  border-radius: 7px !important;
  color: #8d8f86 !important;
  background: #1d1e1a !important;
  font-size: 17px !important;
  cursor: pointer !important;
}
.manual-chapter-menu-list {
  display: grid !important;
  gap: 5px !important;
  max-height: min(440px, 55vh) !important;
  padding: 9px !important;
  overflow-y: auto !important;
}
.manual-chapter-menu-item {
  display: grid !important;
  grid-template-columns: 34px minmax(0,1fr) 18px !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 6px 9px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: #a9aba2 !important;
  background: transparent !important;
  text-align: left !important;
  cursor: pointer !important;
}
.manual-chapter-menu-item:hover { color: #ecece6 !important; border-color: #383930 !important; background: #1b1c18 !important; }
.manual-chapter-menu-item.is-active { color: var(--accent-2) !important; border-color: rgba(var(--accent-rgb),.3) !important; background: rgba(var(--accent-rgb),.09) !important; }
.manual-chapter-menu-number {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 32px !important;
  border: 1px solid #34352f !important;
  border-radius: 7px !important;
  color: #7d7f76 !important;
  background: #181916 !important;
  font-size: 8px !important;
  font-weight: 800 !important;
}
.manual-chapter-menu-item.is-active .manual-chapter-menu-number { color: var(--accent-ink) !important; border-color: var(--accent) !important; background: var(--accent) !important; }
.manual-chapter-menu-text { overflow: hidden !important; font-size: 10px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.manual-chapter-menu-arrow { color: #696b63 !important; }

@media (max-width: 900px) {
  .manual-editor-widget .manual-document-shell { height: 68vh !important; min-height: 480px !important; }
  .manual-editor-widget .manual-document-workarea { padding-right: 3px !important; }
  .manual-editor-widget .manual-rich-editor { min-height: 760px !important; }
  .manual-chapter-menu { right: -43px !important; }
}

/* Editable document outline titles; the reader outline is permanently enabled. */
.manual-outline-editor-row {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 30px !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
}
.manual-outline-editor-row .manual-outline-item {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.manual-outline-rename {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border: 1px solid #30312c !important;
  border-radius: 7px !important;
  color: #85877f !important;
  background: #181916 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  opacity: .72 !important;
  transition: color .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease !important;
}
.manual-outline-editor-row:hover .manual-outline-rename,
.manual-outline-rename:focus-visible {
  color: var(--accent-2) !important;
  border-color: rgba(var(--accent-rgb),.38) !important;
  background: rgba(var(--accent-rgb),.055) !important;
  opacity: 1 !important;
}
body.page-manual_detail .manual-reader-shell.outline-hidden {
  grid-template-columns: 280px minmax(0,1fr) !important;
  gap: 16px !important;
}
body.page-manual_detail .manual-reader-shell.outline-hidden .manual-reader-outline {
  width: auto !important;
  min-width: 0 !important;
  padding: 13px !important;
  border: 1px solid #2c2d28 !important;
  overflow-y: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Keep older shared widgets in sync with the selected accent too. */
.feature-ring::before {
    border-color: var(--accent-2) !important;
    box-shadow: inset 0 0 14px rgba(var(--accent-rgb),.18) !important;
}
.alert-line-icon { color: var(--accent-2) !important; }
.manual-ruler-marker.marker-hanging {
    border-color: var(--accent-hi) !important;
    background: var(--accent) !important;
}
.norm-vacation,
.day-vacation {
    color: var(--accent-hi) !important;
    border-color: rgba(var(--accent-rgb),.32) !important;
    background: rgba(var(--accent-rgb),.09) !important;
}

@media (max-width: 900px) {
  body.page-manual_detail .manual-reader-shell.outline-hidden {
    grid-template-columns: 1fr !important;
  }
}

/* Word import: keep tables, cell colors and embedded media readable in both modes. */
.manual-import-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 14px 0 !important;
  overflow-x: auto !important;
  border: 1px solid #34352f !important;
  border-radius: 9px !important;
  background: #11120f !important;
}
.manual-import-table {
  width: 100% !important;
  min-width: 520px !important;
  border: 0 !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
  background: transparent !important;
}
.manual-import-table tr { background: transparent !important; }
.manual-import-table .manual-import-cell {
  min-width: 90px !important;
  height: auto !important;
  padding: 10px 12px !important;
  border-right: 1px solid #34352f !important;
  border-bottom: 1px solid #34352f !important;
  color: inherit !important;
  background-clip: padding-box !important;
  font-size: inherit !important;
  line-height: inherit !important;
  vertical-align: top !important;
  white-space: normal !important;
}
.manual-import-table tr:last-child .manual-import-cell { border-bottom: 0 !important; }
.manual-import-table .manual-import-cell:last-child { border-right: 0 !important; }
.manual-import-table .manual-import-cell > :last-child { margin-bottom: 0 !important; }
.manual-rich-editor .manual-import-table-wrap,
.manual-body .manual-import-table-wrap { clear: both !important; }
.manual-rich-editor img.manual-img-block,
.manual-body img.manual-img-block {
  display: block !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

/* Attestations: trainee flow and attestator-only workspace. */
.page-attestations .content,
.page-attestation_test .content {
  width: min(1180px,100%) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 12px 24px 48px !important;
}
.attestation-hero,
.attestation-test-head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 18px !important;
  background: radial-gradient(460px 180px at 86% 30%,rgba(var(--accent-rgb),.11),transparent 72%),linear-gradient(110deg,#141513,#171711) !important;
}
.attestation-hero > div,
.attestation-test-head > div {
  flex: 1;
  text-align: left !important;
}
.attestation-hero .page-eyebrow,
.attestation-hero h1,
.attestation-hero p,
.attestation-test-head .page-eyebrow,
.attestation-test-head h1,
.attestation-test-head p {
  width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  text-align: left !important;
}
.attestation-stage-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.attestation-stage-card {
  min-height: 270px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 18px !important;
}
.attestation-stage-card.is-passed {
  border-color: rgba(54,211,129,.28) !important;
  background: linear-gradient(145deg,rgba(54,211,129,.055),#121310 46%) !important;
}
.attestation-stage-head,
.attestation-review-head,
.attestation-review-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.attestation-stage-number {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(var(--accent-rgb),.3);
  border-radius: 9px;
  color: var(--accent-hi);
  background: rgba(var(--accent-rgb),.09);
  font-weight: 800;
}
.attestation-stage-card h2 { min-height: 38px; font-size: 16px !important; }
.attestation-stage-card > p { min-height: 58px; }
.attestation-stage-card > .btn { width: 100%; margin-top: auto; }
.attestation-attempt-meter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  border: 1px solid #292a25;
  border-radius: 8px;
  color: var(--muted);
  background: #10110f;
}
.attestation-attempt-meter b { color: var(--accent-2); }
.attestation-manual-note {
  margin-top: auto;
  padding: 11px;
  border: 1px dashed rgba(var(--accent-rgb),.3);
  border-radius: 8px;
  color: var(--accent-link);
  background: rgba(var(--accent-rgb),.055);
}
.attestation-history-card { padding: 18px !important; }
.attestation-test-form { display: grid; gap: 12px; }
.attestation-question-card { padding: 18px !important; }
.attestation-question-number {
  margin-bottom: 7px;
  color: var(--accent-beta);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.attestation-question-card h2 { margin-bottom: 14px !important; font-size: 16px !important; }
.attestation-options { display: grid; gap: 8px; }
.attestation-option {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #30312c;
  border-radius: 8px;
  color: #d9dad3 !important;
  background: #11120f;
  cursor: pointer;
}
.attestation-option:has(input:checked) {
  border-color: rgba(var(--accent-rgb),.45);
  background: rgba(var(--accent-rgb),.09);
}
.attestation-option input { width: 16px !important; min-height: 16px !important; flex: 0 0 16px; accent-color: var(--accent); }
.attestation-text-answer { gap: 7px !important; }
.attestation-submit-bar {
  position: sticky;
  bottom: 12px;
  z-index: 20;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px !important;
  background: rgba(19,20,17,.96) !important;
  backdrop-filter: blur(14px);
}
.attestation-admin-summary {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.attestation-admin-summary .tile { min-height: 105px !important; }
.attestation-admin-section { margin-bottom: 14px !important; padding: 17px !important; }
.attestation-trainee-table td { vertical-align: top; white-space: normal; }
.attestation-admin-result { display: grid; gap: 7px; min-width: 170px; }
.attestation-admin-result > .badge { width: fit-content; }
.attestation-review-list { display: grid; gap: 10px; }
.attestation-review-card {
  padding: 14px;
  border: 1px solid #292a25;
  border-radius: 10px;
  background: #10110f;
}
.attestation-review-card.is-pending {
  border-color: rgba(var(--accent-rgb),.3);
  background: linear-gradient(145deg,rgba(var(--accent-rgb),.06),#10110f 48%);
}
.attestation-review-head h3 { margin: 0 0 3px; font-size: 13px !important; }
.attestation-review-head p { margin: 0; }
.attestation-auto-score {
  width: fit-content;
  margin: 10px 0;
  padding: 6px 9px;
  border-radius: 7px;
  color: var(--accent-link);
  background: rgba(var(--accent-rgb),.07);
}
.attestation-answer-list { display: grid; gap: 7px; margin: 11px 0; }
.attestation-answer-item {
  padding: 10px;
  border: 1px solid #292a25;
  border-radius: 8px;
  background: #131413;
}
.attestation-answer-value,
.attestation-answer-comment { margin-top: 6px; color: #bfc0b9; white-space: pre-wrap; }
.attestation-answer-value.is-correct { color: var(--green); }
.attestation-answer-value.is-wrong { color: var(--red); }
.attestation-review-form { display: grid; grid-template-columns: minmax(220px,1fr) auto; gap: 9px; align-items: end; margin-top: 11px; }
.attestation-review-result { margin-top: 10px; padding-top: 9px; border-top: 1px solid #292a25; }
.attestation-question-editor { gap: 10px !important; }
.attestation-question-editor .field-row { align-items: end; }
.attestation-option-fields { grid-template-columns: repeat(4,minmax(110px,1fr)) !important; }
.attestation-bank-status { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-bottom: 14px; }
.attestation-bank-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(var(--accent-rgb),.24);
  border-radius: 9px;
  background: rgba(var(--accent-rgb),.055);
}
.attestation-bank-card.is-ready { border-color: rgba(54,211,129,.28); background: rgba(54,211,129,.055); }
.attestation-bank-card > div:first-child { display: grid; gap: 3px; }
.attestation-bank-counts { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; color: var(--muted); font-size: 9px; }
.attestation-question-bank { display: grid; gap: 10px; }
.attestation-question-edit-card { position: relative; padding: 16px !important; }
.attestation-question-edit-card.is-disabled { opacity: .62; }
.attestation-question-delete { position: absolute; right: 16px; bottom: 16px; }

@media (max-width: 900px) {
  .page-attestations .content,.page-attestation_test .content { padding: 10px 12px 34px !important; }
  .attestation-stage-grid { grid-template-columns: 1fr; }
  .attestation-stage-card { min-height: 0 !important; }
  .attestation-stage-card h2,.attestation-stage-card > p { min-height: 0; }
  .attestation-admin-summary { grid-template-columns: 1fr; }
  .attestation-option-fields { grid-template-columns: 1fr !important; }
  .attestation-bank-status { grid-template-columns: 1fr; }
  .attestation-bank-card { align-items: flex-start; flex-direction: column; }
  .attestation-review-form { grid-template-columns: 1fr; }
  .attestation-submit-bar { align-items: stretch; flex-direction: column; }
  .attestation-submit-bar .btn { width: 100%; }
  .attestation-question-delete { position: static; margin-top: 8px; }
}

/* Interactive motion: make every enabled control respond consistently. */
:is(.nav-item,.sidebar-cta,.topbar-action-btn,.icon-btn,.btn,.tab,.chip,.wallet-action-card,.wallet-action-submit) {
  transition:
    transform .2s cubic-bezier(.2,.8,.2,1),
    color .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .22s ease,
    opacity .18s ease,
    filter .18s ease !important;
}

:is(.sidebar-cta,.topbar-action-btn,.icon-btn,.btn,.tab,.chip):not(:disabled):not([aria-disabled="true"]):hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.22) !important;
}

:is(.sidebar-cta,.topbar-action-btn,.icon-btn,.btn,.tab,.chip):not(:disabled):not([aria-disabled="true"]):active {
  transform: translateY(0) scale(.985) !important;
  transition-duration: .08s !important;
}

.nav-item:hover {
  transform: translateX(3px) !important;
}

.nav-item.active:hover {
  color: var(--accent-hi) !important;
  background: linear-gradient(90deg,rgba(var(--accent-rgb),.2),rgba(var(--accent-rgb),.075)) !important;
  border-color: rgba(var(--accent-rgb),.38) !important;
  box-shadow: 0 8px 22px rgba(var(--accent-rgb),.09) !important;
}

:is(.nav-item,.sidebar-cta,.topbar-action-btn,.icon-btn,.btn,.tab,.chip,.wallet-action-card,.wallet-action-submit):focus-visible {
  outline: 2px solid rgba(var(--accent-rgb),.72) !important;
  outline-offset: 2px !important;
}

/* Wallet action cards use the same accent motion as the new navigation. */
.page-wallet .wallet-action-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform: translateZ(0);
}

.page-wallet .wallet-action-card::before,
.page-wallet .wallet-action-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.page-wallet .wallet-action-card::before {
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 14% 22%,rgba(var(--accent-rgb),.18),transparent 42%),
    linear-gradient(145deg,rgba(var(--accent-rgb),.075),rgba(var(--accent-rgb),.018));
  opacity: 0;
  transition: opacity .22s ease;
}

.page-wallet .wallet-action-card::after {
  top: -45%;
  bottom: -45%;
  left: -38%;
  z-index: 2;
  width: 24%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);
  transform: skewX(-18deg) translateX(0);
  opacity: 0;
  transition: transform .55s cubic-bezier(.2,.75,.2,1),opacity .16s ease;
}

.page-wallet .wallet-action-card:not(:disabled):hover {
  border-color: rgba(var(--accent-rgb),.42) !important;
  transform: translateY(-3px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 14px 30px rgba(0,0,0,.25),
    0 0 0 1px rgba(var(--accent-rgb),.045) !important;
}

.page-wallet .wallet-action-card:not(:disabled):hover::before {
  opacity: 1;
}

.page-wallet .wallet-action-card:not(:disabled):hover::after {
  opacity: 1;
  transform: skewX(-18deg) translateX(650%);
}

.page-wallet .wallet-action-card:not(:disabled):active {
  transform: translateY(-1px) scale(.992) !important;
  transition-duration: .08s !important;
}

.page-wallet .wallet-action-glyph,
.page-wallet .wallet-action-copy b,
.page-wallet .wallet-action-copy small {
  transition: transform .22s cubic-bezier(.2,.8,.2,1),color .18s ease,border-color .18s ease,background-color .18s ease,box-shadow .2s ease !important;
}

.page-wallet .wallet-action-card:not(:disabled):hover .wallet-action-glyph {
  color: var(--accent-hi) !important;
  border-color: rgba(var(--accent-rgb),.52) !important;
  background: rgba(var(--accent-rgb),.15) !important;
  box-shadow: 0 8px 20px rgba(var(--accent-rgb),.12) !important;
  transform: translateY(-1px) scale(1.07);
}

.page-wallet .wallet-action-card:not(:disabled):hover .wallet-action-copy small {
  color: #a5a79f !important;
}

.page-wallet button.wallet-action-card:disabled {
  cursor: not-allowed !important;
  opacity: .5;
  transform: none !important;
  box-shadow: none !important;
}

.page-wallet button.wallet-action-card:disabled::before,
.page-wallet button.wallet-action-card:disabled::after {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  :is(.nav-item,.sidebar-cta,.topbar-action-btn,.icon-btn,.btn,.tab,.chip,.wallet-action-card,.wallet-action-submit),
  .page-wallet .wallet-action-card::before,
  .page-wallet .wallet-action-card::after,
  .page-wallet .wallet-action-glyph,
  .page-wallet .wallet-action-copy b,
  .page-wallet .wallet-action-copy small {
    transition-duration: .01ms !important;
  }

  .page-wallet .wallet-action-card::after { display: none; }
}

/* Smooth color response: keep gradients stable and animate their tone. */
:is(.nav-item,.sidebar-cta,.topbar-action-btn,.icon-btn,.btn,.tab,.chip,.wallet-action-card,.wallet-action-submit) {
  transition-duration: .28s !important;
  transition-timing-function: cubic-bezier(.2,.75,.2,1) !important;
}

.btn.btn-primary:not(:disabled):not([aria-disabled="true"]):hover {
  color: var(--accent-ink) !important;
  background: linear-gradient(135deg,var(--accent),var(--accent-deep)) !important;
  border-color: var(--accent-hi) !important;
  filter: brightness(1.14) saturate(1.08) !important;
  box-shadow: 0 10px 24px rgba(var(--accent-rgb),.2) !important;
}

.btn.btn-primary:not(:disabled):not([aria-disabled="true"]):active {
  filter: brightness(1.04) saturate(1.03) !important;
}

/* Readability pass: remove 8-10px interface text from everyday screens. */
html body {
  font-size: 14px !important;
}

html body small {
  font-size: 11px !important;
  line-height: 1.45 !important;
}

html body .page-eyebrow,
html body .main-greeting,
html body .nav-group-title,
html body .accent-popover-title {
  font-size: 10px !important;
}

html body .tile .label,
html body .tile .sub,
html body .shop-balance-card .label,
html body .page-birthdays .grid-2 .label {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

html body .info-plate,
html body .warn-plate,
html body .flash,
html body .empty {
  font-size: 12px !important;
  line-height: 1.5 !important;
}

html body :is(.form,.field-row,.role-map,.stat-form) label {
  font-size: 12px !important;
}

html body :is(input,select,textarea,.manual-rich-editor) {
  font-size: 13px !important;
}

html body .btn {
  font-size: 12px !important;
}

html body .btn-sm {
  font-size: 11px !important;
}

html body .tab {
  font-size: 11px !important;
}

html body .badge {
  font-size: 10px !important;
}

html body :is(th,td) {
  font-size: 12px !important;
}

html body th {
  font-size: 10px !important;
}

/* Wallet secondary copy. */
html body.page-wallet .wallet-action-copy small,
html body.page-wallet .wallet-balance span:not(.wallet-balance-icon),
html body.page-wallet .wallet-note {
  font-size: 11px !important;
}

html body.page-wallet .wallet-history-head p {
  color: #a1a39b !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

/* Account labels and card descriptions. */
html body.page-account .dl .row {
  font-size: 12px !important;
}

html body.page-account .dl dt {
  color: #979990 !important;
}

html body.page-account .account-card-head p {
  color: #96988f !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

html body.page-account .timeline small {
  font-size: 11px !important;
}

/* Staff positions, metadata and contact details. */
html body.page-staff .staff-section-head p {
  font-size: 12px !important;
}

html body.page-staff .staff-member-name p {
  color: #a2a49b !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

html body.page-staff .staff-member-meta span {
  font-size: 12px !important;
}

html body.page-staff .staff-member-meta b {
  color: #8f9188 !important;
  font-size: 10px !important;
}

html body.page-staff :is(.staff-telegram,.staff-no-contact) {
  font-size: 11px !important;
}

html body.page-workload .workload-table td {
  font-size: 11px !important;
}

html body.page-notifications .notif-text,
html body .attestation-bank-counts {
  font-size: 12px !important;
}

@media (prefers-reduced-motion: reduce) {
  :is(.nav-item,.sidebar-cta,.topbar-action-btn,.icon-btn,.btn,.tab,.chip,.wallet-action-card,.wallet-action-submit) {
    transition-duration: .01ms !important;
  }
}

/* Full application settings page and persistent personalization. */
:root {
  --user-sidebar-opacity: .96;
  --user-background-dim: .42;
  --user-background-gradient: linear-gradient(180deg,#090a09 0%,#070807 100%);
}

html[data-background="black"] { --user-background-gradient: radial-gradient(850px 460px at 72% -180px,rgba(var(--accent-rgb),.07),transparent 70%),linear-gradient(180deg,#090a09,#070807); }
html[data-background="graphite"] { --user-background-gradient: radial-gradient(900px 520px at 70% -120px,#363941 0%,#202228 45%,#111216 100%); }
html[data-background="midnight"] { --user-background-gradient: radial-gradient(900px 560px at 72% -100px,#173c69 0%,#10253f 42%,#080d16 100%); }
html[data-background="forest"] { --user-background-gradient: radial-gradient(900px 560px at 70% -100px,#1d5038 0%,#102d21 42%,#080f0b 100%); }
html[data-background="warm"] { --user-background-gradient: radial-gradient(900px 560px at 72% -100px,#603918 0%,#332111 43%,#100b07 100%); }
html[data-background="custom"] { --user-background-gradient: linear-gradient(180deg,#11120f,#080908); }

html[data-background]:not([data-background="custom"]) body {
  background: linear-gradient(rgba(5,6,5,var(--user-background-dim)),rgba(5,6,5,var(--user-background-dim))),var(--user-background-gradient) !important;
  background-attachment: fixed !important;
  background-size: cover !important;
}

html[data-background="custom"] body {
  background: linear-gradient(rgba(5,6,5,var(--user-background-dim)),rgba(5,6,5,var(--user-background-dim))),var(--user-background-image,none),var(--user-background-gradient) !important;
  background-attachment: fixed !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html .sidebar {
  background: rgba(9,10,9,var(--user-sidebar-opacity)) !important;
}

html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  scroll-behavior: auto !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}

.profile-settings-btn {
  box-sizing: border-box;
  text-decoration: none !important;
}

.profile-settings-btn.active {
  color: var(--accent-hi) !important;
  border-color: rgba(var(--accent-rgb),.48) !important;
  background: rgba(var(--accent-rgb),.13) !important;
}

.background-music-toggle[hidden] { display: none !important; }
.background-music-toggle.is-playing { color: var(--accent-hi) !important; border-color: rgba(var(--accent-rgb),.35) !important; background: rgba(var(--accent-rgb),.09) !important; }
.top-icon-music { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 4v12.3A4 4 0 1 0 11 20V8h8v6.3A4 4 0 1 0 21 18V4H9Zm-2 16a2 2 0 1 1 2-2 2 2 0 0 1-2 2Zm10-2a2 2 0 1 1 2-2 2 2 0 0 1-2 2ZM11 6h8v-1h-8v1Z'/%3E%3C/svg%3E"); }

body.page-settings .content { width: min(1240px,100%) !important; padding: 16px 24px 52px !important; }
.settings-head { display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 160px !important; padding: 25px !important; }
.settings-head h1 { margin-bottom: 7px !important; font-size: 36px !important; }
.settings-hero-icon { --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.4 13a7.7 7.7 0 0 0 0-2l2.1-1.6-2-3.5-2.6 1a8 8 0 0 0-1.7-1L14.8 3h-4l-.4 2.8a8 8 0 0 0-1.7 1l-2.6-1-2 3.5L6.2 11a7.7 7.7 0 0 0 0 2l-2.1 1.6 2 3.5 2.6-1a8 8 0 0 0 1.7 1l.4 2.8h4l.4-2.8a8 8 0 0 0 1.7-1l2.6 1 2-3.5L19.4 13ZM12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z'/%3E%3C/svg%3E"); }

.settings-layout {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(330px,.65fr);
  gap: 14px;
}

.settings-card { min-width: 0; padding: 21px !important; }
.settings-appearance-card { grid-row: span 2; }
.settings-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 19px; padding-bottom: 15px; border-bottom: 1px solid #292a25; }
.settings-card-head h2 { margin: 0 0 3px !important; font-size: 18px !important; }
.settings-card-head p { margin: 0; font-size: 12px !important; }
.settings-card-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid rgba(var(--accent-rgb),.3); border-radius: 10px; color: var(--accent); background: rgba(var(--accent-rgb),.08); }
.settings-card-icon::before { content: ""; width: 19px; height: 19px; background: currentColor; -webkit-mask: var(--settings-icon) center/contain no-repeat; mask: var(--settings-icon) center/contain no-repeat; }
.settings-appearance-icon { --settings-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a9 9 0 1 0 0 18h1.5a2.5 2.5 0 0 0 0-5H12a1 1 0 0 1 0-2h3a6 6 0 0 0 0-12h-3Zm-4 8a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm3-4a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm5 4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E"); }
.settings-cursor-icon { --settings-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 2 19 15h-7l-4 7L4 2Zm2.2 4.7 2.6 10.2 2-3.9h3L6.2 6.7Z'/%3E%3C/svg%3E"); }
.settings-music-icon { --settings-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 4v12.3A4 4 0 1 0 11 20V8h8v6.3A4 4 0 1 0 21 18V4H9Z'/%3E%3C/svg%3E"); }

.settings-group { margin-top: 17px; padding-top: 17px; border-top: 1px solid #242520; }
.settings-card-head + .settings-group { margin-top: 0; padding-top: 0; border-top: 0; }
.settings-group-title { margin-bottom: 11px; }
.settings-group-title b,.settings-group-title small { display: block; }
.settings-group-title b { color: #e8e9e2; font-size: 14px; }
.settings-group-title small { margin-top: 3px; color: #85877f !important; font-size: 11px !important; }

.settings-accent-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.settings-accent-option { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 9px; min-height: 48px; padding: 8px 10px; border: 1px solid #30312c; border-radius: 9px; color: #c8c9c2; background: #11120f; font-size: 12px; cursor: pointer; }
.settings-accent-option input,.background-option input { position: absolute; opacity: 0; pointer-events: none; }
.settings-accent-option > span { width: 24px; height: 24px; border: 2px solid rgba(255,255,255,.12); border-radius: 50%; }
.accent-option-green > span { background: linear-gradient(145deg,#ffca3d,#edae19); }
.accent-option-purple > span { background: linear-gradient(145deg,#b28cf7,#7c4fe0); }
.accent-option-blue > span { background: linear-gradient(145deg,#79c0ff,#1f6feb); }
.settings-accent-option:has(input:checked) { color: #fff; border-color: rgba(var(--accent-rgb),.42); background: rgba(var(--accent-rgb),.08); }
.settings-accent-option:has(input:checked) > span { border-color: #fff; box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.22); }

.background-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.background-option { display: grid; gap: 7px; padding: 7px; border: 1px solid #30312c; border-radius: 9px; color: #bfc0b9; background: #10110f; font-size: 11px; cursor: pointer; }
.background-option > span { display: block; aspect-ratio: 2.2; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; }
.background-preview-black > span { background: linear-gradient(145deg,#151613,#050605); }
.background-preview-graphite > span { background: radial-gradient(circle at 70% 10%,#4a4d56,#1b1d22 65%); }
.background-preview-midnight > span { background: radial-gradient(circle at 70% 10%,#275f9d,#091522 68%); }
.background-preview-forest > span { background: radial-gradient(circle at 70% 10%,#287653,#08150e 68%); }
.background-preview-warm > span { background: radial-gradient(circle at 70% 10%,#945623,#1c1008 68%); }
.background-preview-custom > span { background: linear-gradient(135deg,#20211e 25%,#373931 25% 50%,#20211e 50% 75%,#373931 75%); background-size: 14px 14px; }
.background-option:has(input:checked) { color: var(--accent-hi); border-color: rgba(var(--accent-rgb),.46); background: rgba(var(--accent-rgb),.07); }

.settings-custom-background { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; padding: 12px; border: 1px solid #292a25; border-radius: 9px; background: #10110f; }
.settings-custom-background label { color: #a7a9a1; font-size: 11px; }
.settings-custom-background input { margin-top: 6px; }
.settings-custom-background .btn { grid-column: 1 / -1; width: fit-content; }

.settings-range-group { display: grid; gap: 8px; }
.settings-range-row { display: grid !important; grid-template-columns: minmax(170px,1fr) auto; align-items: center; gap: 5px 14px !important; padding: 11px 12px; border: 1px solid #292a25; border-radius: 9px; background: #10110f; }
.settings-range-row > span b,.settings-range-row > span small { display: block; }
.settings-range-row > span b { color: #dedfd8; font-size: 12px; }
.settings-range-row > span small { margin-top: 2px; color: #7f8179 !important; font-size: 10px !important; }
.settings-range-row output { color: var(--accent-hi); font-size: 12px; font-weight: 750; }
.settings-range-row input[type="range"] { grid-column: 1 / -1; width: 100%; min-height: 20px !important; padding: 0 !important; border: 0 !important; accent-color: var(--accent); background: transparent !important; box-shadow: none !important; }

.settings-switch-row { display: flex !important; align-items: center; justify-content: space-between; gap: 16px !important; min-height: 62px; margin-top: 11px; padding: 11px 12px; border: 1px solid #292a25; border-radius: 9px; background: #10110f; cursor: pointer; }
.settings-switch-row > span b,.settings-switch-row > span small { display: block; }
.settings-switch-row > span b { color: #dedfd8; font-size: 12px; }
.settings-switch-row > span small { margin-top: 3px; color: #7f8179 !important; font-size: 10px !important; }
.settings-switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.settings-switch-row i { position: relative; width: 42px; height: 23px; flex: 0 0 42px; border: 1px solid #3a3b35; border-radius: 99px; background: #1b1c18; transition: background-color .18s,border-color .18s; }
.settings-switch-row i::before { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #74766e; transition: transform .2s,background-color .18s; }
.settings-switch-row input:checked + i { border-color: rgba(var(--accent-rgb),.5); background: rgba(var(--accent-rgb),.18); }
.settings-switch-row input:checked + i::before { background: var(--accent); transform: translateX(19px); }

.settings-cursor-options { grid-template-columns: 1fr 1fr; }
.settings-note { margin: 12px 2px 0; color: #777970; font-size: 11px; line-height: 1.45; }
.settings-ready-music { margin-top: 14px; }
.settings-track-search { display: grid !important; gap: 5px !important; margin-top: 10px; color: #8c8e86 !important; font-size: 10px !important; }
.settings-track-search input { min-height: 38px !important; padding: 8px 10px !important; font-size: 11px !important; }
.settings-track-options { display: grid; max-height: 300px; gap: 7px; margin-top: 9px; padding-right: 4px; overflow-y: auto; scrollbar-color: rgba(var(--accent-rgb),.4) #11120f; scrollbar-width: thin; }
.settings-track-options::-webkit-scrollbar { width: 6px; }
.settings-track-options::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(var(--accent-rgb),.38); }
.settings-track-option { position: relative; display: grid !important; grid-template-columns: 36px minmax(0,1fr) 17px; align-items: center; gap: 10px !important; min-height: 54px; padding: 8px 10px; border: 1px solid #30312c; border-radius: 9px; color: #d5d6cf !important; background: #11120f; cursor: pointer; }
.settings-track-option:hover { border-color: #45473f; background: #171815; }
.settings-track-option:has(input:checked) { color: var(--accent-hi) !important; border-color: rgba(var(--accent-rgb),.44); background: rgba(var(--accent-rgb),.08); }
.settings-track-option input { position: absolute; width: 1px !important; height: 1px !important; min-height: 0 !important; opacity: 0; pointer-events: none; }
.settings-track-option > span:nth-of-type(2) { min-width: 0; }
.settings-track-option b,.settings-track-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-track-option b { font-size: 12px; }
.settings-track-option small { margin-top: 2px; color: #7f8179 !important; font-size: 10px !important; }
.settings-track-option > i { width: 16px; height: 16px; border: 1px solid #44463e; border-radius: 50%; }
.settings-track-option:has(input:checked) > i { border: 4px solid var(--accent); background: #11120f; }
.settings-track-icon { position: relative; width: 36px; height: 36px; border: 1px solid rgba(var(--accent-rgb),.28); border-radius: 8px; background: rgba(var(--accent-rgb),.07); }
.settings-track-icon::before { content: "♪"; display: grid; place-items: center; width: 100%; height: 100%; color: var(--accent); font-size: 18px; font-weight: 800; }
.settings-track-upload-icon::before { content: "+"; font-size: 21px; font-weight: 500; }
.settings-track-custom { margin-top: 9px; }
.settings-track-empty { margin: 9px 0 0; padding: 12px; border: 1px dashed #30312c; border-radius: 9px; color: #7f8179; text-align: center; font-size: 10px; }
.settings-track-count { display: block; margin-top: 7px; color: #6f716a; font-size: 9px; }
.settings-music-upload { display: grid; gap: 8px; margin: 12px 0; }
.settings-music-file { display: flex !important; align-items: center; gap: 11px !important; min-height: 70px; padding: 12px; border: 1px dashed #3a3b35; border-radius: 10px; color: #d8d9d2 !important; background: #10110f; cursor: pointer; transition: color .18s ease,border-color .18s ease,background-color .18s ease; }
.settings-music-file:hover { color: var(--accent-hi) !important; border-color: rgba(var(--accent-rgb),.5); background: rgba(var(--accent-rgb),.055); }
.settings-music-file input { position: absolute; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; opacity: 0; pointer-events: none; }
.settings-music-file > span b,.settings-music-file > span small { display: block; }
.settings-music-file > span b { font-size: 12px; }
.settings-music-file > span small { margin-top: 3px; color: #7f8179 !important; font-size: 10px !important; }
.settings-music-file-icon { width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid rgba(var(--accent-rgb),.3); border-radius: 9px; color: var(--accent); background: rgba(var(--accent-rgb),.08); }
.settings-music-file-icon::before { content: "+"; display: grid; place-items: center; width: 100%; height: 100%; font-size: 23px; font-weight: 400; }
.settings-music-current { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 11px; border: 1px solid #292a25; border-radius: 9px; background: #10110f; }
.settings-music-current > span { min-width: 0; }
.settings-music-current small,.settings-music-current b { display: block; }
.settings-music-current small { color: #777970 !important; font-size: 10px !important; }
.settings-music-current b { margin-top: 2px; overflow: hidden; color: #d8d9d2; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.settings-music-card > .btn { width: 100%; margin-top: 11px; }

.settings-savebar { position: static; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 4px; padding: 14px 16px !important; background: #121310 !important; }
.settings-savebar > div:first-child b,.settings-savebar > div:first-child small { display: block; }
.settings-savebar > div:first-child b { font-size: 12px; }
.settings-savebar > div:first-child small { margin-top: 3px; font-size: 11px !important; }
.settings-savebar [data-settings-status].is-success { color: #67dda0 !important; }
.settings-save-actions { display: flex; gap: 8px; }

@media (max-width: 1050px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-appearance-card { grid-row: auto; }
  .settings-savebar { grid-column: 1; }
}

@media (max-width: 680px) {
  body.page-settings .content { padding: 10px 12px 34px !important; }
  .settings-head { min-height: 125px !important; padding: 18px !important; }
  .settings-head h1 { font-size: 28px !important; }
  .settings-hero-icon { display: none; }
  .settings-card { padding: 15px !important; }
  .settings-accent-options,.background-options,.settings-cursor-options,.settings-custom-background { grid-template-columns: 1fr; }
  .settings-custom-background .btn { grid-column: 1; width: 100%; }
  .settings-savebar { position: static; align-items: stretch; flex-direction: column; }
  .settings-save-actions { flex-direction: column; }
  .settings-save-actions .btn { width: 100%; }
}

/* Profile settings and custom cursor picker. */
.sidebar-profile-shell {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  margin: 0 !important;
}

.sidebar-profile-shell .sidebar-profile {
  width: 100%;
  margin: 0 !important;
  padding-right: 47px !important;
}

.sidebar-profile-shell .sidebar-profile::before {
  display: none !important;
  content: none !important;
}

.profile-settings-btn {
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #30312c;
  border-radius: 8px;
  color: #92948c;
  background: #171815;
  box-shadow: none;
  transform: translateY(-50%);
  transition: color .2s ease,border-color .2s ease,background-color .2s ease,transform .2s ease,box-shadow .2s ease;
}

.profile-settings-btn:hover,
.profile-settings-btn[aria-expanded="true"] {
  color: var(--accent-hi);
  border-color: rgba(var(--accent-rgb),.42);
  background: rgba(var(--accent-rgb),.1);
  box-shadow: 0 7px 18px rgba(var(--accent-rgb),.1);
  transform: translateY(-50%) rotate(20deg);
}

.profile-settings-icon {
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.4 13a7.7 7.7 0 0 0 0-2l2.1-1.6-2-3.5-2.6 1a8 8 0 0 0-1.7-1L14.8 3h-4l-.4 2.8a8 8 0 0 0-1.7 1l-2.6-1-2 3.5L6.2 11a7.7 7.7 0 0 0 0 2l-2.1 1.6 2 3.5 2.6-1a8 8 0 0 0 1.7 1l.4 2.8h4l.4-2.8a8 8 0 0 0 1.7-1l2.6 1 2-3.5L19.4 13ZM12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.4 13a7.7 7.7 0 0 0 0-2l2.1-1.6-2-3.5-2.6 1a8 8 0 0 0-1.7-1L14.8 3h-4l-.4 2.8a8 8 0 0 0-1.7 1l-2.6-1-2 3.5L6.2 11a7.7 7.7 0 0 0 0 2l-2.1 1.6 2 3.5 2.6-1a8 8 0 0 0 1.7 1l.4 2.8h4l.4-2.8a8 8 0 0 0 1.7-1l2.6 1 2-3.5L19.4 13ZM12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.profile-settings-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 9px);
  z-index: 160;
  width: min(270px,calc(100vw - 24px));
  padding: 13px;
  border: 1px solid #32332d;
  border-radius: 12px;
  color: #ecece6;
  background: #121310;
  box-shadow: 0 18px 48px rgba(0,0,0,.48);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(7px) scale(.985);
  transform-origin: right bottom;
  transition: opacity .18s ease,transform .2s cubic-bezier(.2,.75,.2,1),visibility 0s linear .2s;
}

.profile-settings-popover.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.profile-settings-head {
  display: flex;
  align-items: center;
  min-height: 38px;
  margin: 0 0 11px;
  padding: 0 2px 11px;
  border-bottom: 1px solid #292a25;
}

.profile-settings-head b,
.profile-settings-head small,
.cursor-option-copy b,
.cursor-option-copy small { display: block; }
.profile-settings-head b { font-size: 14px; }
.profile-settings-head small { margin-top: 2px; color: #85877f !important; font-size: 11px !important; }
.profile-settings-section-title { margin: 0 2px 7px; color: #8d8f87; font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.cursor-options { display: grid; gap: 6px; }

.cursor-option {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 18px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 52px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #d5d6cf;
  background: #171815;
  text-align: left;
  transition: color .18s ease,border-color .18s ease,background-color .18s ease,transform .18s ease;
}

.cursor-option:hover {
  color: #f4f4ef;
  border-color: #3c3d36;
  background: #1d1e1a;
  transform: translateX(2px);
}

.cursor-option.active {
  color: var(--accent-hi);
  border-color: rgba(var(--accent-rgb),.38);
  background: rgba(var(--accent-rgb),.09);
}

.cursor-option-preview {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #35362f;
  border-radius: 8px;
  color: #d9dad3;
  background: #10110f;
  font-size: 17px;
}

.cursor-preview-golden-apple { color: #ffcf4d; font-size: 22px; text-shadow: 0 0 9px rgba(255,207,77,.32); }
.cursor-preview-golden-carrot { filter: sepia(1) saturate(2.2) brightness(1.15); }
.cursor-preview-cat,
.cursor-preview-sleepy-cat {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px 30px;
}
.cursor-preview-cat { background-image: url("cursors/cat-cursor-64.png?v=20260715-cats1"); }
.cursor-preview-sleepy-cat { background-image: url("cursors/sleepy-cat-cursor-64.png?v=20260715-cats1"); }
.cursor-option-copy { min-width: 0; }
.cursor-option-copy b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cursor-option-copy small { margin-top: 2px; color: #7f8179 !important; font-size: 10px !important; }
.cursor-option-check { width: 16px; height: 16px; border: 1px solid #42433c; border-radius: 50%; }
.cursor-option.active .cursor-option-check { border: 4px solid var(--accent); background: #11120f; }
.profile-settings-hint { margin: 10px 2px 0; color: #73756d; font-size: 10px; line-height: 1.4; }

html[data-cursor="carrot"] body,
html[data-cursor="carrot"] body * { cursor: url("cursors/carrot.cur?v=20260713-cursors1") 0 0,auto !important; }
html[data-cursor="golden-apple"] body,
html[data-cursor="golden-apple"] body * { cursor: url("cursors/golden-apple.cur?v=20260713-cursors1") 0 0,auto !important; }
html[data-cursor="golden-carrot"] body,
html[data-cursor="golden-carrot"] body * { cursor: url("cursors/golden-carrot.cur?v=20260713-cursors1") 0 0,auto !important; }
html[data-cursor="cat"] body,
html[data-cursor="cat"] body * { cursor: url("cursors/cat-cursor-64.png?v=20260715-cats1") 2 2,auto !important; }
html[data-cursor="sleepy-cat"] body,
html[data-cursor="sleepy-cat"] body * { cursor: url("cursors/sleepy-cat-cursor-64.png?v=20260715-cats1") 2 2,auto !important; }

html body .cursor-option[data-cursor-choice="default"],
html body .cursor-option[data-cursor-choice="default"] * { cursor: default !important; }
html body .cursor-option[data-cursor-choice="carrot"],
html body .cursor-option[data-cursor-choice="carrot"] * { cursor: url("cursors/carrot.cur?v=20260713-cursors1") 0 0,auto !important; }
html body .cursor-option[data-cursor-choice="golden-apple"],
html body .cursor-option[data-cursor-choice="golden-apple"] * { cursor: url("cursors/golden-apple.cur?v=20260713-cursors1") 0 0,auto !important; }
html body .cursor-option[data-cursor-choice="golden-carrot"],
html body .cursor-option[data-cursor-choice="golden-carrot"] * { cursor: url("cursors/golden-carrot.cur?v=20260713-cursors1") 0 0,auto !important; }
html body .cursor-option[data-cursor-choice="cat"],
html body .cursor-option[data-cursor-choice="cat"] * { cursor: url("cursors/cat-cursor-64.png?v=20260715-cats1") 2 2,auto !important; }
html body .cursor-option[data-cursor-choice="sleepy-cat"],
html body .cursor-option[data-cursor-choice="sleepy-cat"] * { cursor: url("cursors/sleepy-cat-cursor-64.png?v=20260715-cats1") 2 2,auto !important; }

@media (prefers-reduced-motion: reduce) {
  .profile-settings-btn,
  .profile-settings-popover,
  .cursor-option { transition-duration: .01ms !important; }
}

/* Main dashboard: primary status labels must read as headings, not captions. */
html body.page-main .content > .grid-4 .main-stat-card > .label {
  color: #d1d2cb !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}

/* Performance and motion layer: cheap composited transitions, no repaint-heavy blur. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: hj-page-out .12s ease both;
}

::view-transition-new(root) {
  animation: hj-page-in .22s cubic-bezier(.2,.75,.2,1) both;
}

@keyframes hj-page-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hj-page-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes hj-panel-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

html:not(:active-view-transition) .content {
  animation: hj-page-in .22s cubic-bezier(.2,.75,.2,1) both;
}

.tab-panel.active {
  animation: hj-panel-in .18s cubic-bezier(.2,.75,.2,1) both !important;
}

.modal-overlay {
  display: flex !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: none !important;
  transition: opacity .2s ease,visibility 0s linear .2s !important;
  animation: none !important;
}

.modal-overlay .modal {
  opacity: 0;
  transform: translateY(12px) scale(.985);
  transition: opacity .2s ease,transform .24s cubic-bezier(.2,.75,.2,1) !important;
  will-change: transform,opacity;
  animation: none !important;
}

.modal-overlay.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s !important;
  animation: none !important;
}

.modal-overlay.open .modal {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: none !important;
}

.sidebar,
.topbar {
  backdrop-filter: none !important;
}

:is(.manual-library-card,.staff-member-card,.shop-item,.notif-item) {
  content-visibility: auto;
  contain-intrinsic-size: auto 180px;
}

@media (max-width: 900px) {
  .sidebar-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 70 !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: rgba(0,0,0,.68) !important;
    backdrop-filter: none !important;
    transition: opacity .18s ease,visibility 0s linear .18s !important;
  }

  .sidebar.open + .sidebar-backdrop {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(:active-view-transition) .content,
  .tab-panel.active,
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .01ms !important;
  }

  .modal-overlay,
  .modal-overlay .modal,
  .sidebar-backdrop {
    transition-duration: .01ms !important;
  }
}

/* In-app navigation feedback; the persistent shell and audio never reload. */
html.is-smooth-loading .content {
  opacity: 1 !important;
  pointer-events: none;
  transition: none !important;
}

html { scrollbar-gutter: stable; }

html .content[data-smooth-content] {
  animation: none !important;
  transform: none !important;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none !important;
  transform: none !important;
}

html.is-smooth-loading .topbar::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: -1px;
  left: 14px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,transparent,var(--accent),transparent);
  transform-origin: left;
  animation: hj-navigation-progress .8s ease-in-out infinite;
}

@keyframes hj-navigation-progress {
  0% { opacity: .25; transform: scaleX(.12); }
  55% { opacity: 1; transform: scaleX(.7); }
  100% { opacity: .2; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  html.is-smooth-loading .content { opacity: 1; }
  html.is-smooth-loading .topbar::after { animation: none; }
}