:root {
    --ink: #121826;
    --muted: #697386;
    --line: rgba(17, 24, 39, 0.10);
    --surface: #ffffff;
    --solid: #ffffff;
    --soft: #f3f5f9;
    --navy: #07153c;
    --navy-2: #0d1f55;
    --accent: #276ef1;
    --accent-dark: #174db7;
    --teal: #1fb69a;
    --good: #0f8f5f;
    --danger: #c53030;
    --shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 12% -10%, rgba(39, 110, 241, 0.10), transparent 30%),
        radial-gradient(circle at 90% 8%, rgba(31, 182, 154, 0.08), transparent 28%),
        var(--soft);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Arial, sans-serif;
    letter-spacing: 0;
    overflow-x: hidden;
}

a {
    color: inherit;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px clamp(16px, 4vw, 42px);
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(20px);
}

.menu-toggle {
    position: fixed;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.notification-toggle {
    position: fixed;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.hamburger {
    display: none;
    width: 42px;
    height: 42px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    cursor: pointer;
    place-items: center;
    gap: 4px;
}

.hamburger span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--ink);
}

.menu-backdrop {
    display: none;
}

.bell-button {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    cursor: pointer;
}

.bell-button span {
    font-size: 18px;
    line-height: 1;
}

.bell-button em {
    position: absolute;
    top: -6px;
    right: -6px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.notification-backdrop {
    position: fixed;
    inset: 0;
    z-index: 45;
    display: none;
    background: rgba(15, 23, 42, 0.32);
}

.notification-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 50;
    width: min(420px, 92vw);
    height: 100vh;
    padding: 22px;
    background: #fff;
    box-shadow: -18px 0 48px rgba(15, 23, 42, 0.18);
    transform: translateX(102%);
    transition: transform 180ms ease;
}

.notification-toggle:checked ~ .notification-backdrop {
    display: block;
}

.notification-toggle:checked ~ .notification-drawer {
    transform: translateX(0);
}

.drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.drawer-head strong,
.drawer-head span {
    display: block;
}

.drawer-head strong {
    font-size: 24px;
}

.drawer-head span,
.drawer-list article span,
.drawer-empty {
    color: var(--muted);
}

.drawer-head label {
    cursor: pointer;
    color: var(--accent);
    font-weight: 800;
}

.drawer-list {
    display: grid;
    gap: 12px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
}

.drawer-list article {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fbff;
}

.drawer-list article.unread {
    border-color: rgba(39, 110, 241, 0.28);
    background: #eef4ff;
}

.drawer-list article p {
    margin: 6px 0;
}

.notification-open-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.notification-open-link:hover strong {
    color: var(--primary);
}

.drawer-link {
    width: 100%;
    margin-top: 16px;
}

.notification-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.notification-actions form {
    margin: 0;
}

.notification-actions button {
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font-weight: 800;
    cursor: pointer;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: max-content;
    font-size: 16px;
    font-weight: 750;
    text-decoration: none;
}

.brand > span {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: linear-gradient(135deg, #276ef1, #1fb69a);
    box-shadow: 0 10px 26px rgba(39, 110, 241, 0.28);
}

.brand-logo-picture {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}

.brand-logo {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    object-fit: contain;
    background: #fff;
    box-shadow: 0 10px 26px rgba(39, 110, 241, 0.16);
}

.brand-full-logo,
.brand-custom-logo {
    gap: 0;
}

.brand-full-logo .brand-logo-picture {
    width: 178px;
    height: 58px;
    flex: 0 0 178px;
}

.brand-custom-logo .brand-logo {
    width: 178px;
    height: 58px;
    flex: 0 0 178px;
}

.brand-full-logo .brand-logo {
    width: 100%;
    height: 100%;
}

.brand-full-logo .brand-logo,
.brand-custom-logo .brand-logo {
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    object-fit: contain;
}

.brand strong,
.brand small {
    display: block;
}

.brand.brand-full-logo strong,
.brand.brand-full-logo small,
.brand.brand-custom-logo strong,
.brand.brand-custom-logo small {
    display: none;
}

.brand small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

nav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.top-actions {
    align-items: center;
}

.top-actions a,
.user-chip {
    padding: 9px 11px;
    border-radius: 12px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
}

.top-actions a:hover,
.top-actions a.active {
    background: #eef4ff;
    color: var(--ink);
}

.user-chip {
    background: rgba(255, 255, 255, 0.56);
    color: var(--ink);
}

.shell {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 0;
    width: 100%;
    margin: 0;
}

.sidebar {
    position: sticky;
    top: 59px;
    min-height: calc(100vh - 59px);
    align-self: start;
    display: grid;
    align-content: start;
    grid-auto-rows: max-content;
    gap: 16px;
    padding: 14px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    background: linear-gradient(180deg, var(--navy), var(--navy-2));
    box-shadow: 10px 0 32px rgba(7, 21, 60, 0.15);
}

.sidebar-profile {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-height: 58px;
    padding: 8px 10px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.065);
    color: #fff;
}

.avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: linear-gradient(135deg, #39d0b5, #276ef1);
    font-weight: 900;
}

.sidebar-profile strong {
    font-size: 13px;
}

.sidebar-profile strong,
.sidebar-profile span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-profile span {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
}

.nav-group {
    display: grid;
    gap: 4px;
}

.nav-group p {
    margin: 0 0 6px;
    padding: 0 10px;
    color: rgba(255, 255, 255, 0.44);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}

.nav-group a {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 9px 10px;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
}

.nav-group a:hover,
.nav-group a.active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    box-shadow: inset 3px 0 0 #39d0b5;
}

.subnav {
    display: grid;
    gap: 3px;
    margin: -2px 0 4px 12px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.subnav a {
    min-height: 30px;
    padding: 7px 9px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.58);
}

.subnav a.active,
.subnav a:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
    box-shadow: none;
}

.page {
    width: min(1180px, calc(100% - 32px));
    margin: 34px auto 56px;
}

.page.with-sidebar {
    width: 100%;
    margin: 0;
    padding: 28px clamp(18px, 3vw, 42px) 56px;
    min-width: 0;
}

.hero {
    min-height: 68vh;
    display: grid;
    align-items: center;
}

.login-stage {
    display: grid;
    min-height: calc(100vh - 170px);
    place-items: center;
    padding: clamp(24px, 6vw, 72px) 0;
}

.login-card {
    width: min(100%, 430px);
    padding: 34px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(22px);
}

.login-mark {
    display: grid;
    justify-items: start;
    gap: 10px;
    margin-bottom: 26px;
}

.login-logo-picture {
    display: inline-flex;
    width: min(238px, 100%);
    flex: 0 0 auto;
}

.login-logo {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.login-logo-picture + div {
    display: none;
}

.login-mark strong,
.login-mark small {
    display: block;
}

.login-mark strong {
    color: var(--text);
    font-size: 17px;
}

.login-mark small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.login-card h1 {
    margin: 0 0 24px;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: 0;
}

.login-form {
    gap: 14px;
}

.login-form input {
    min-height: 52px;
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.94);
}

.login-form .button {
    min-height: 52px;
    border-radius: 16px;
    font-size: 15px;
}

.hero h1,
.section-head h1,
.panel h1 {
    max-width: 940px;
    margin: 0;
    font-size: clamp(34px, 5vw, 64px);
    line-height: 1.02;
    letter-spacing: 0;
}

.panel h1,
.section-head h1 {
    font-size: clamp(28px, 3vw, 38px);
}

h2 {
    margin: 0 0 18px;
    font-size: 22px;
    line-height: 1.2;
}

p {
    line-height: 1.55;
}

.lead {
    max-width: 720px;
    color: var(--muted);
    font-size: 19px;
}

.page-copy {
    max-width: 760px;
    margin: 12px 0 0;
    color: var(--muted);
}

.eyebrow {
    margin: 0 0 12px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    color: var(--ink);
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.10);
}

.button.primary {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.button.primary:hover {
    background: var(--accent-dark);
}

.button.danger {
    border-color: rgba(197, 48, 48, 0.18);
    color: var(--danger);
}

.grid {
    display: grid;
    gap: 20px;
}

.grid.two {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
}

.admin-grid {
    grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.28fr);
    align-items: start;
}

.panel,
.card {
    background: var(--surface);
    border: 1px solid rgba(17, 24, 39, 0.07);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: clamp(20px, 3vw, 30px);
}

.panel-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.panel-title h2,
.panel-title p {
    margin: 0;
}

.panel-title p {
    color: var(--muted);
    font-size: 14px;
}

.panel.narrow {
    width: min(500px, 100%);
    margin: 0 auto;
}

.form {
    display: grid;
    gap: 16px;
    margin-top: 20px;
}

.compact-form {
    gap: 14px;
    margin-top: 12px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

label {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
}

input,
textarea,
select {
    width: 100%;
    min-height: 44px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.84);
    color: var(--ink);
    font: inherit;
    outline: none;
}

textarea {
    resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
    border-color: rgba(0, 113, 227, 0.55);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12);
}

.checkline {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkline input {
    width: 18px;
    min-height: 18px;
}

.alert {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #fff3f0;
    color: var(--danger);
    border: 1px solid #ffd3cc;
}

.copybox {
    margin-top: 16px;
    padding: 14px;
    overflow-wrap: anywhere;
    border: 1px solid rgba(39, 110, 241, 0.18);
    border-radius: 14px;
    background: #eef4ff;
    color: #174db7;
}

.stats {
    display: grid;
    gap: 10px;
}

.stats div,
.result-grid div,
dl div,
.settings-list div,
.mini-summary div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}

.stats div:last-child,
.result-grid div:last-child,
dl div:last-child,
.settings-list div:last-child,
.mini-summary div:last-child {
    border-bottom: 0;
}

.stats span,
.result-grid span,
dt,
.muted,
table span,
.member-head span,
.meta-grid span {
    color: var(--muted);
}

.stats strong {
    font-size: 22px;
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.card h2 {
    margin: 0 0 8px;
    font-size: 21px;
}

dl {
    margin: 18px 0;
}

dt,
dd {
    margin: 0;
}

dd {
    font-weight: 800;
}

.inline-form {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 10px;
}

.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.dashboard-head {
    padding: 4px 0 2px;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.metric-card {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 118px;
    padding: 20px;
    border: 1px solid rgba(17, 24, 39, 0.07);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow);
}

.metric-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    font-weight: 900;
}

.metric-card p {
    margin: 0 0 7px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 750;
}

.metric-card strong {
    font-size: 24px;
    line-height: 1.1;
}

.member-mode .metric-card {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.member-mode .metric-card span,
.member-mode .metric-card small {
    color: var(--muted);
    font-weight: 750;
}

.member-mode .metric-card small {
    font-size: 13px;
}

.metric-card.blue .metric-icon {
    background: #e9f0ff;
    color: #276ef1;
}

.metric-card.green .metric-icon {
    background: #e8faf6;
    color: #15977f;
}

.metric-card.amber .metric-icon {
    background: #fff5df;
    color: #c57900;
}

.metric-card.violet .metric-icon {
    background: #f0eaff;
    color: #6b46e8;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.8fr);
    gap: 20px;
    align-items: start;
}

.member-dashboard-grid {
    align-items: stretch;
}

.exchange-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.exchange-grid > div {
    padding: 16px;
    border: 1px solid rgba(39, 110, 241, 0.14);
    border-radius: 16px;
    background: #f8fbff;
}

.exchange-grid span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.exchange-grid strong {
    font-size: 20px;
}

.support-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.35fr) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}

.support-layout .support-chat:first-child {
    grid-column: 1 / -1;
}

.support-thread-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.support-thread-list a {
    display: block;
    padding: 14px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 16px;
    color: var(--text);
    text-decoration: none;
}

.support-thread-list a.active {
    border-color: rgba(39, 110, 241, 0.36);
    background: #edf4ff;
}

.support-thread-list span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.support-chat {
    display: flex;
    flex-direction: column;
    min-height: 620px;
}

.support-chat-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

.support-chat-head h2,
.support-chat-head p {
    margin: 0;
}

.support-chat-head p {
    margin-top: 4px;
    color: var(--muted);
}

.support-messages {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    min-height: 360px;
    max-height: 560px;
    padding: 18px 2px;
    overflow: auto;
}

.support-messages article {
    max-width: 72%;
    padding: 12px 14px;
    border-radius: 18px;
    border-bottom-left-radius: 6px;
    background: #f3f6fb;
}

.support-messages article.own {
    align-self: flex-end;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 18px;
    background: #276ef1;
    color: #fff;
}

.support-messages strong,
.support-messages p,
.support-messages span {
    display: block;
    margin: 0;
}

.support-messages p {
    margin-top: 4px;
}

.support-messages span {
    margin-top: 7px;
    color: inherit;
    font-size: 11px;
    opacity: 0.72;
}

.support-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.payout-admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1fr);
    gap: 20px;
    align-items: stretch;
    margin-bottom: 20px;
}

.pool-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.pool-summary-strip > div {
    padding: 14px;
    border: 1px solid rgba(39, 110, 241, 0.14);
    border-radius: 16px;
    background: #f8fbff;
}

.pool-summary-strip span,
.payout-table td span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.payout-table td .payout-bank-line {
    width: fit-content;
    max-width: 320px;
    margin-top: 7px;
    padding: 6px 9px;
    border: 1px solid rgba(39, 110, 241, 0.16);
    border-radius: 10px;
    background: #eef5ff;
    color: #1d4ed8;
    overflow-wrap: anywhere;
}

.pool-summary-strip strong {
    display: block;
    margin-top: 6px;
    font-size: 19px;
}

.mini-adjust-form {
    display: grid;
    grid-template-columns: minmax(82px, 1fr) minmax(82px, 1fr) auto;
    gap: 7px;
    align-items: center;
}

.mini-adjust-form.single {
    grid-template-columns: minmax(110px, 1fr) auto;
}

.mini-adjust-form input {
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 12px;
}

.audit-list {
    display: grid;
    gap: 10px;
}

.audit-list article {
    padding: 12px 14px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 14px;
    background: #f8fbff;
}

.audit-list p {
    margin: 4px 0;
    color: var(--muted);
}

.audit-list span {
    color: var(--muted);
    font-size: 12px;
}

.chart-panel {
    min-height: 390px;
}

.period-pill {
    padding: 8px 11px;
    border-radius: 12px;
    background: #f4f6fb;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.statistics-table-wrap {
    margin-top: 8px;
}

.stats-table td {
    white-space: nowrap;
}

.stats-table td:first-child {
    min-width: 110px;
}

.bar-chart {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    align-items: end;
    gap: 18px;
    height: 230px;
    margin-top: 26px;
    padding: 0 10px;
    border-bottom: 1px solid var(--line);
    background: repeating-linear-gradient(to top, transparent 0 45px, rgba(17, 24, 39, 0.05) 46px);
}

.bar-chart span {
    height: var(--h);
    min-height: 18px;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(180deg, #39d0b5, #276ef1);
}

.chart-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 18px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
}

.dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 7px;
    border-radius: 50%;
}

.blue-dot { background: #276ef1; }
.green-dot { background: #1fb69a; }
.violet-dot { background: #6b46e8; }

.invite-panel,
.split-panel {
    min-height: 185px;
}

.dashboard-side {
    display: grid;
    gap: 20px;
}

.compact-invite {
    min-height: 0;
    padding-block: 22px;
}

.compact-invite .panel-title {
    margin-bottom: 10px;
}

.compact-invite .copybox {
    margin-top: 8px;
    padding: 12px;
}

.compact-invite .actions {
    margin-top: 14px;
}

.split-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 142px;
    align-items: center;
    grid-column: 2;
}

.mini-label {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
    text-transform: uppercase;
}

.split-panel strong {
    display: block;
    margin-top: 8px;
    font-size: 28px;
}

.split-panel p {
    color: var(--muted);
}

.ring-chart {
    display: grid;
    place-items: center;
    width: 122px;
    height: 122px;
    border-radius: 50%;
    background:
        radial-gradient(circle, #fff 0 52%, transparent 53%),
        conic-gradient(#276ef1 0 42%, #39d0b5 42% 72%, #f0eaff 72% 100%);
}

.ring-chart span {
    color: var(--ink);
    font-weight: 900;
}

.pool-rates-panel {
    display: grid;
    gap: 14px;
    min-height: 0;
}

.pool-rates-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 14px;
    align-items: center;
}

.pool-rates-head strong {
    display: block;
    margin-top: 6px;
    font-size: 26px;
}

.pool-rates-head p {
    margin: 8px 0 0;
    color: var(--muted);
}

.compact-ring {
    width: 96px;
    height: 96px;
}

.rate-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.rate-grid div {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fbff;
}

.rate-grid span,
.rate-note {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.rate-grid strong {
    display: block;
    margin-top: 6px;
    overflow-wrap: anywhere;
    font-size: 18px;
}

.list-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px 190px;
    gap: 10px;
    margin-bottom: 12px;
}

.field-group {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
}

.category-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 44px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.84);
}

.category-checks .checkline {
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: 12px;
}

.gallery-picker {
    grid-column: 1 / -1;
}

.gallery-choice-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 10px;
    max-height: 280px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.84);
}

.gallery-choice {
    position: relative;
    display: grid;
    gap: 7px;
    min-height: 128px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
}

.gallery-choice input {
    position: absolute;
    top: 9px;
    left: 9px;
    width: 17px;
    min-height: 17px;
    accent-color: var(--accent);
}

.gallery-choice img {
    width: 100%;
    aspect-ratio: 1.25 / 1;
    border-radius: 11px;
    object-fit: cover;
    background: #f6f9ff;
}

.gallery-choice span,
.gallery-choice small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-choice span {
    font-size: 12px;
    font-weight: 850;
}

.gallery-choice small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
}

.gallery-choice.keep-current {
    align-content: center;
    min-height: 128px;
    padding-left: 34px;
    background: #f8fbff;
}

.gallery-choice.selected,
.gallery-choice:has(input:checked) {
    border-color: rgba(39, 110, 241, 0.52);
    background: #eef4ff;
    box-shadow: 0 0 0 4px rgba(39, 110, 241, 0.10);
}

.product-image-tools {
    grid-column: 1 / -1;
}

.selected-image-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 76px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fbff;
}

.selected-image-preview img {
    width: 58px;
    height: 58px;
    border-radius: 13px;
    object-fit: cover;
    background: #eef4ff;
}

.selected-image-preview strong,
.selected-image-preview span {
    display: block;
}

.selected-image-preview span {
    max-width: 100%;
    margin-top: 4px;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-tool-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.modal-toggle {
    position: fixed;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.form-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    padding: 28px;
}

.modal-toggle:checked + .form-modal {
    display: grid;
    place-items: center;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(7, 21, 60, 0.62);
    cursor: pointer;
}

.modal-card {
    position: relative;
    z-index: 1;
    width: min(980px, 94vw);
    max-height: min(760px, 88vh);
    overflow: hidden;
    padding: 22px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(7, 21, 60, 0.28);
}

.upload-modal {
    width: min(720px, 94vw);
}

.modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.modal-head h2,
.modal-head p {
    margin: 0;
}

.modal-head p {
    margin-top: 5px;
    color: var(--muted);
}

.modal-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 10px;
    margin-bottom: 14px;
}

.modal-gallery-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    max-height: min(520px, 58vh);
    overflow-y: auto;
    padding: 4px;
}

.modal-gallery-item {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
}

.modal-gallery-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.modal-gallery-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    object-fit: cover;
    background: #f6f9ff;
}

.modal-gallery-item strong,
.modal-gallery-item span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-gallery-item strong {
    font-size: 12px;
}

.modal-gallery-item span {
    color: var(--muted);
    font-size: 11px;
}

.modal-gallery-item:has(input:checked),
.modal-gallery-item:hover {
    border-color: rgba(39, 110, 241, 0.45);
    background: #eef4ff;
}

.mini-summary,
.settings-list {
    display: grid;
    margin-top: 18px;
}

.product-table-panel {
    margin-bottom: 20px;
}

.products-table {
    min-width: 980px;
}

.products-table th:first-child,
.products-table td:first-child {
    width: 92px;
}

.product-thumb {
    display: block;
    width: 62px;
    height: 62px;
    border: 1px solid var(--line);
    border-radius: 14px;
    object-fit: cover;
    background: #f6f9ff;
}

.product-thumb-button,
.product-image-trigger,
.product-title-trigger,
.product-name-button {
    appearance: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: zoom-in;
}

.product-thumb-button {
    display: block;
    border-radius: 14px;
}

.product-thumb-button:focus-visible,
.product-image-trigger:focus-visible,
.product-title-trigger:focus-visible,
.product-name-button:focus-visible {
    outline: 3px solid rgba(39, 110, 241, 0.28);
    outline-offset: 3px;
}

.product-name-button {
    display: block;
    font-weight: 900;
}

.product-name-button:hover,
.product-title-trigger:hover {
    color: var(--accent);
}

.selected-row {
    background: #f6f9ff;
}

.row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.row-actions form {
    margin: 0;
}

.quick-sale-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.quick-sale-form input {
    width: 68px;
    min-height: 34px;
    padding: 7px 8px;
    border-radius: 10px;
}

.button.small {
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 12px;
    white-space: nowrap;
}

.button.whatsapp {
    border-color: rgba(31, 182, 154, 0.22);
    background: #e8faf6;
    color: #0f7f6e;
}

.icon-button {
    width: 34px;
    min-width: 34px;
    padding: 7px;
    font-size: 17px;
    line-height: 1;
}

.whatsapp-icon {
    border-color: rgba(31, 182, 154, 0.24);
    background: #e8faf6;
    color: #0f7f6e;
}

.button.disabled {
    opacity: 0.45;
    pointer-events: none;
}

.product-editor-block {
    scroll-margin-top: 84px;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 16px;
}

.media-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.media-sidebar {
    display: grid;
    gap: 10px;
    align-content: start;
}

.media-sidebar-head {
    display: grid;
    gap: 4px;
    margin-bottom: 4px;
}

.media-sidebar-head h2,
.media-sidebar-head p {
    margin: 0;
}

.media-sidebar-head p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.media-folder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--muted);
    font-weight: 800;
    text-decoration: none;
}

.media-folder small {
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef4ff;
    color: var(--accent);
}

.media-folder.active,
.media-folder:hover {
    background: #eef4ff;
    color: var(--accent);
}

.folder-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.media-library-panel {
    display: grid;
    gap: 16px;
    padding: clamp(18px, 2vw, 28px);
}

.media-library-head {
    margin: 0;
}

.media-upload {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    padding: 14px;
    border: 1px solid rgba(39, 110, 241, 0.12);
    border-radius: 18px;
    background: #f8fbff;
}

.media-upload label {
    display: grid;
    gap: 7px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.media-upload input,
.media-upload select {
    background: #fff;
}

.bulk-media-form {
    display: grid;
    gap: 14px;
}

.bulk-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fbff;
}

.media-select {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: max-content;
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 22px rgba(7, 21, 60, 0.12);
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.media-select input {
    width: 15px;
    min-height: 15px;
}

.photo-card {
    position: relative;
    display: grid;
    gap: 9px;
    align-content: start;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.photo-card:hover {
    transform: translateY(-2px);
    border-color: rgba(39, 110, 241, 0.18);
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.08);
}

.photo-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    object-fit: cover;
    background: #f6f9ff;
}

.photo-card-body {
    display: grid;
    gap: 5px;
    padding: 2px 2px 0;
}

.photo-preview-button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.photo-card span {
    color: var(--muted);
    font-size: 12px;
}

.media-path {
    display: block;
    max-width: 100%;
    overflow: hidden;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fbff;
    color: var(--muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.photo-card-actions {
    margin: 0;
    padding: 2px;
}

.media-modal {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: none;
    place-items: center;
    padding: 34px;
    background: rgba(7, 21, 60, 0.78);
}

.media-modal.open {
    display: grid;
}

.media-modal img {
    max-width: min(92vw, 1100px);
    max-height: 78vh;
    border-radius: 18px;
    object-fit: contain;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32);
}

.media-modal strong {
    margin-top: 14px;
    color: #fff;
    font-size: 18px;
}

.media-modal-close {
    position: fixed;
    top: 20px;
    right: 22px;
    min-height: 40px;
    padding: 9px 14px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-weight: 900;
    cursor: pointer;
}

.result-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 24px;
    margin-top: 20px;
}

.table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

th,
td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

td strong,
td span {
    display: block;
}

.edit-row td {
    background: rgba(255, 255, 255, 0.42);
}

.member-list {
    display: grid;
    gap: 16px;
}

.tree-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(380px, 0.75fr);
    gap: 20px;
    align-items: start;
}

.member-admin-layout {
    display: grid;
    gap: 20px;
    align-items: start;
}

.member-editor-panel {
    position: relative;
    overflow: hidden;
}

.member-editor-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
}

.member-editor-panel .compact-form {
    margin-top: 4px;
}

.member-editor-panel .form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.member-status-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.member-status-grid button {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}

.member-status-grid button.active,
.member-status-grid button:hover {
    border-color: rgba(39, 110, 241, 0.42);
    background: #eef4ff;
}

.member-status-grid span {
    color: var(--muted);
    font-weight: 800;
    font-size: 12px;
}

.member-status-grid strong {
    color: var(--ink);
    font-size: 24px;
}

.members-table {
    min-width: 1120px;
}

.member-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.member-row-actions form {
    margin: 0;
}

.status-pill {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 850;
}

.status-pill.ok,
.status-pill.completed {
    background: #e8faf6;
    color: #0f7f6e;
}

.status-pill.off,
.status-pill.cancelled {
    background: #fff3f0;
    color: var(--danger);
}

.status-pill.waiting {
    background: #fff5df;
    color: #9a6500;
}

.status-pill.payment {
    background: #eef4ff;
    color: #174db7;
}

.status-pill.approved {
    background: #eaf9ef;
    color: #16723b;
}

.status-pill.shipped {
    background: #f0eaff;
    color: #6b46e8;
}

.tree-list {
    display: grid;
    gap: 12px;
}

.tree-list details {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fbff;
}

.tree-list summary {
    cursor: pointer;
    font-weight: 900;
}

.tree-list summary span,
.tree-node span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.tree-node {
    margin: 10px 0 0 18px;
    padding: 10px 12px;
    border-left: 3px solid var(--teal);
    border-radius: 10px;
    background: #fff;
}

.tree-view-panel,
.tree-move-panel {
    overflow: hidden;
}

.tree-legend {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.tree-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.tree-legend i {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.tree-legend i.founder,
.tree-badge.founder {
    background: #eef4ff;
    color: #174db7;
}

.tree-legend i.side,
.tree-badge.side {
    background: #e8faf6;
    color: #0f7f6e;
}

.tree-legend i.downline,
.tree-badge.downline {
    background: #fff5df;
    color: #9a6500;
}

.tree-legend i.founder {
    background: #276ef1;
}

.tree-legend i.side {
    background: var(--teal);
}

.tree-legend i.downline {
    background: #f5a524;
}

.modern-tree {
    gap: 14px;
}

.modern-tree .tree-branch {
    position: relative;
    padding: 0;
    border-color: rgba(92, 110, 140, 0.18);
    background: linear-gradient(180deg, #f9fbff, #fff);
}

.modern-tree .tree-branch summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
}

.tree-person {
    display: grid;
    gap: 4px;
}

.tree-person strong {
    color: var(--ink);
    font-size: 15px;
}

.tree-person small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.tree-badge {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.tree-children {
    display: grid;
    gap: 10px;
    margin: 0 12px 12px 28px;
    padding-left: 14px;
    border-left: 3px solid rgba(45, 212, 191, 0.42);
}

.modern-tree .depth-0 {
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

.modern-tree .depth-1 {
    background: #fbfffe;
}

.modern-tree .depth-2,
.modern-tree .depth-3,
.modern-tree .depth-4 {
    background: #fffdf8;
}

.modern-tree .tree-node.empty {
    margin: 0 12px 12px 28px;
    color: var(--muted);
}

.order-lines {
    display: grid;
    gap: 10px;
}

.order-line,
.inline-admin-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px;
    gap: 10px;
    align-items: center;
}

.inline-admin-form {
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 12px;
}

.orders-list,
.notification-list {
    display: grid;
    gap: 16px;
}

.order-command-center {
    display: grid;
    gap: 16px;
}

.order-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.order-kpi {
    display: grid;
    gap: 7px;
    min-height: 82px;
    padding: 14px;
    border: 1px solid rgba(17, 24, 39, 0.07);
    border-radius: 16px;
    background: #fff;
    color: var(--ink);
    text-align: left;
    box-shadow: var(--shadow);
    cursor: pointer;
}

.order-kpi span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.order-kpi strong {
    font-size: 24px;
}

.order-kpi.active {
    border-color: rgba(39, 110, 241, 0.36);
    background: #eef4ff;
}

.order-kpi.revenue {
    cursor: default;
}

.orders-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px 190px;
    gap: 10px;
    margin-bottom: 16px;
}

.orders-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 0 12px;
    color: var(--muted);
}

.orders-table-head strong {
    color: var(--ink);
    font-size: 18px;
}

.order-table-panel {
    overflow: hidden;
}

.orders-table {
    min-width: 1120px;
}

.compact-orders-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
}

.compact-orders-table tbody tr:hover {
    background: #f8fbff;
}

.order-detail {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.order-row-actions {
    flex-wrap: nowrap;
}

.quick-status-form {
    display: grid;
    grid-template-columns: 150px auto;
    gap: 8px;
}

.quick-status-form select {
    min-height: 34px;
    padding: 7px 9px;
    border-radius: 10px;
    font-size: 12px;
}

.empty-orders-message {
    display: none;
    margin: 18px 0 0;
    color: var(--muted);
    text-align: center;
}

.order-drawer {
    position: fixed;
    inset: 0;
    z-index: 75;
    display: none;
}

.order-drawer:target {
    display: block;
}

.drawer-screen {
    position: absolute;
    inset: 0;
    background: rgba(7, 21, 60, 0.38);
}

.order-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(720px, 94vw);
    height: 100%;
    overflow-y: auto;
    padding: 22px;
    background: #fff;
    box-shadow: -24px 0 70px rgba(7, 21, 60, 0.24);
}

.order-drawer-head {
    margin-bottom: 18px;
}

.order-drawer-head a {
    text-decoration: none;
}

.order-drawer-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.order-drawer-summary div {
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fbff;
}

.order-drawer-summary span,
.order-drawer-summary small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.order-drawer-summary strong {
    display: block;
    margin-top: 5px;
    overflow-wrap: anywhere;
}

.order-items em {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-style: normal;
    font-size: 12px;
}

.add-item-form {
    grid-template-columns: minmax(0, 1fr) 90px auto;
}

.shop-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
    min-height: calc(100vh - 188px);
}

.shop-catalog-full {
    max-height: none;
    overflow: visible;
}

.cart-panel {
    position: sticky;
    top: 92px;
    max-height: calc(100vh - 112px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cart-panel .panel-title {
    flex: 0 0 auto;
}

.cart-panel .form {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

.cart-panel .submit-order-button {
    position: sticky;
    bottom: 0;
    z-index: 2;
    box-shadow: 0 -14px 24px rgba(255, 255, 255, 0.92);
}

.shop-catalog {
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.shop-catalog.shop-catalog-full {
    max-height: none;
    overflow: visible;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px;
}

.shop-grid-wide {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

.shop-card {
    display: grid;
    grid-template-rows: auto minmax(104px, auto) auto auto;
    gap: 8px;
    align-content: stretch;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    min-width: 0;
}

.shop-card:hover {
    border-color: rgba(39, 110, 241, 0.24);
    box-shadow: 0 18px 50px rgba(20, 36, 72, 0.08);
}

.shop-card.in-cart {
    border-color: rgba(31, 182, 154, 0.42);
    background: linear-gradient(180deg, #f2fffc, #fff);
}

.shop-card img {
    width: 100%;
    aspect-ratio: 1.18 / 1;
    max-height: 176px;
    border-radius: 14px;
    object-fit: contain;
    object-position: center top;
    background: #f6f9ff;
}

.product-image-trigger {
    display: block;
    width: 100%;
    border-radius: 14px;
}

.shop-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.shop-card h2,
.product-title-trigger {
    display: block;
    margin: 4px 0 6px;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.28;
    text-align: left;
}

.shop-card strong {
    display: block;
    font-size: 16px;
    margin-bottom: 0;
}

.cart-controls {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 8px;
    align-self: end;
}

.compact-cart-controls {
    grid-template-columns: 64px minmax(0, 1fr);
}

.cart-controls label {
    display: grid;
    gap: 4px;
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
}

.cart-controls label input {
    width: 100%;
    min-height: 36px;
    padding: 7px 8px;
}

.cart-controls input[name="item_note[]"] {
    grid-column: 1 / -1;
    min-height: 36px;
    padding: 8px 10px;
}

.add-to-cart-button {
    width: 100%;
    min-height: 36px;
    align-self: end;
}

.submit-order-button {
    width: 100%;
}

.cart-top-link {
    white-space: nowrap;
}

.cart-top-link span {
    display: inline-grid;
    min-width: 24px;
    height: 24px;
    margin-left: 6px;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}

.floating-cart-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 80;
    display: none;
    align-items: center;
    gap: 16px;
    width: min(360px, calc(100vw - 32px));
    padding: 14px;
    border: 1px solid rgba(39, 110, 241, 0.18);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 22px 70px rgba(15, 28, 56, 0.20);
    backdrop-filter: blur(18px);
}

.floating-cart-toast.show {
    display: flex;
}

.floating-cart-toast div {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.floating-cart-toast strong {
    font-size: 16px;
}

.floating-cart-toast span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 20px;
    align-items: start;
}

.checkout-items {
    display: grid;
    gap: 12px;
}

.checkout-empty {
    display: grid;
    gap: 10px;
    justify-items: start;
    padding: 22px;
    border: 1px dashed rgba(39, 110, 241, 0.22);
    border-radius: 20px;
    background: #f8fbff;
}

.checkout-empty p {
    margin: 0;
    color: var(--muted);
}

.checkout-item-row {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) 124px 120px auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}

.checkout-item-row img {
    width: 78px;
    height: 78px;
    border-radius: 14px;
    object-fit: contain;
    background: #f6f9ff;
}

.checkout-item-main {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.checkout-item-main span,
.checkout-item-main small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.checkout-item-main strong {
    font-size: 15px;
}

.checkout-item-main input {
    min-height: 36px;
    padding: 8px 10px;
}

.checkout-qty {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 6px;
    align-items: center;
}

.checkout-qty button {
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fbff;
    color: var(--ink);
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
}

.checkout-qty input {
    min-height: 36px;
    padding: 6px;
    text-align: center;
}

.checkout-line-total {
    white-space: nowrap;
}

.cart-total-pill {
    align-self: start;
    padding: 10px 13px;
    border-radius: 999px;
    background: #eef4ff;
    color: var(--accent);
}

.checkout-payment-panel {
    position: sticky;
    top: 92px;
}

.checkout-continue {
    width: 100%;
    text-align: center;
}

.product-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

.product-detail-modal.open {
    display: flex;
}

.product-detail-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 20, 48, 0.62);
    backdrop-filter: blur(14px);
}

.product-detail-card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    width: min(840px, calc(100vw - 42px));
    max-height: min(760px, calc(100vh - 42px));
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 34px 100px rgba(10, 24, 56, 0.28);
    overflow: auto;
}

.product-detail-media {
    min-height: 0;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: linear-gradient(145deg, #f6f9ff, #eef6f7);
    overflow: hidden;
}

.product-detail-media img {
    width: 100%;
    height: auto;
    max-height: min(44vh, 430px);
    object-fit: contain;
    object-position: center top;
    display: block;
}

.product-detail-copy {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 4px 4px 8px;
}

.product-detail-meta {
    width: max-content;
    max-width: 100%;
    padding: 7px 10px;
    border-radius: 999px;
    background: #eef4ff;
    color: var(--accent);
    font-size: 12px;
    font-weight: 900;
}

.product-detail-copy h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.16;
}

.product-detail-price {
    font-size: 22px;
}

.product-detail-description {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.68;
    white-space: pre-line;
}

.product-detail-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(15, 28, 56, 0.08);
}

.order-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

@media (max-width: 1500px) {
    .shop-grid,
    .photo-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .shop-grid-wide {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1240px) {
    .shop-grid,
    .photo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .shop-grid-wide {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

.order-head h2,
.order-head p {
    margin: 0;
}

.order-head p {
    color: var(--muted);
    margin-top: 4px;
}

.order-items {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.order-items > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-radius: 12px;
    background: #f6f9ff;
}

.notification-card {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fbff;
}

.notification-card.unread {
    border-color: rgba(39, 110, 241, 0.28);
    background: #eef4ff;
}

.notification-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.notification-card-head em {
    padding: 5px 9px;
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
}

.notification-card p {
    margin: 6px 0;
}

.notification-card span {
    color: var(--muted);
    font-size: 12px;
}

.member-card {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.54);
}

.document-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.document-grid article {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fbff;
}

.document-grid img {
    width: 100%;
    aspect-ratio: 1.45 / 1;
    border-radius: 11px;
    object-fit: cover;
    background: #eef4ff;
}

.document-grid span {
    color: var(--muted);
}

.compact-documents {
    margin-top: 8px;
}

.settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.34fr);
    gap: 20px;
    align-items: start;
}

.settings-main,
.settings-side {
    display: grid;
    gap: 20px;
}

.settings-card {
    min-height: 0;
}

.settings-card .panel-title {
    margin-bottom: 16px;
}

.compact-settings-card {
    padding: 22px;
}

.settings-side-copy {
    margin: 0 0 16px;
    color: var(--muted);
    line-height: 1.55;
}

.settings-inline-upload {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.settings-inline-upload .button {
    min-width: 210px;
}

.payment-provider-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.payment-provider-grid label {
    margin: 0;
}

.payment-toggle {
    align-self: end;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fbff;
}

.payment-choice-box {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(39, 110, 241, 0.14);
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fbff, #fff);
}

.payment-choice-head strong,
.payment-choice-head span {
    display: block;
}

.payment-choice-head span,
.payment-note {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.iban-card {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.iban-card span,
.iban-card small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.iban-card strong {
    overflow-wrap: anywhere;
    font-size: 15px;
    line-height: 1.35;
}

.payment-note {
    margin: 0;
}

.payment-method-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.payment-method {
    display: grid;
    gap: 5px;
    min-height: 62px;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
}

.payment-method.active {
    border-color: rgba(39, 110, 241, 0.28);
    background: #eef4ff;
}

.payment-method.disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

.payment-method input {
    display: none;
}

.payment-method span {
    font-weight: 900;
}

.payment-method em {
    width: max-content;
    padding: 4px 8px;
    border-radius: 999px;
    background: #fff1d8;
    color: #9a5a00;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.settings-total-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #eef4ff;
    color: var(--accent);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.commission-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.commission-grid label {
    position: relative;
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fbfdff;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.commission-grid label span {
    position: absolute;
    right: 14px;
    bottom: 24px;
    color: var(--muted);
    font-size: 11px;
    pointer-events: none;
}

.commission-grid input {
    min-height: 44px;
    padding-right: 48px;
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font-size: 18px;
    font-weight: 900;
}

.settings-note {
    margin-top: 4px;
    padding: 14px 16px;
    border: 1px solid rgba(39, 110, 241, 0.18);
    border-radius: 16px;
    background: #eef4ff;
    color: #174db7;
    line-height: 1.5;
}

.settings-save-button {
    justify-self: start;
    min-width: 260px;
}

.settings-checklist {
    display: grid;
    gap: 10px;
}

.settings-checklist span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-weight: 800;
}

.settings-checklist span::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #38cdb7;
    box-shadow: 0 0 0 4px rgba(56, 205, 183, 0.15);
}

.identity-field {
    gap: 8px;
}

.visually-hidden-file {
    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;
    border: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
}

.document-upload-block {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(39, 110, 241, 0.12);
    border-radius: 18px;
    background: #f8fbff;
}

.document-upload-head {
    display: grid;
    gap: 4px;
}

.document-upload-head strong {
    color: var(--ink);
    font-size: 16px;
}

.document-upload-head span,
.upload-field > span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.document-upload-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.upload-field,
.identity-field {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.upload-field input[type="file"],
.identity-field input[type="file"] {
    background: #fff;
    min-width: 0;
    padding: 10px;
    border-radius: 12px;
    font-size: 12px;
}

.identity-actions {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.identity-camera-button {
    width: 100%;
}

.identity-preview {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fbff;
}

.identity-preview:not(:empty) {
    display: flex;
}

.identity-preview img {
    width: 72px;
    aspect-ratio: 1.586 / 1;
    object-fit: cover;
    border-radius: 9px;
    border: 1px solid var(--line);
}

.identity-preview strong {
    font-size: 12px;
    color: var(--text);
}

.identity-modal {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: none;
    place-items: center;
    padding: 22px;
}

.identity-modal.open {
    display: grid;
}

.identity-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 12, 34, 0.72);
    backdrop-filter: blur(10px);
}

.identity-modal-card {
    position: relative;
    z-index: 1;
    width: min(1120px, 96vw);
    max-height: 92vh;
    overflow: auto;
    padding: 20px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: #fff;
    box-shadow: 0 28px 80px rgba(7, 21, 60, 0.34);
}

.identity-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.identity-modal-head h2,
.identity-modal-head p {
    margin: 0;
}

.identity-modal-head p:last-child {
    margin-top: 5px;
    color: var(--muted);
}

.identity-close {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    font-weight: 800;
    cursor: pointer;
}

.identity-capture-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 16px;
}

.identity-stage {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    border-radius: 22px;
    background: #081633;
}

.identity-stage video,
.identity-stage canvas {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    display: block;
}

.identity-stage canvas {
    display: none;
    background: #eef4ff;
}

.identity-modal.previewing .identity-stage video,
.identity-modal.previewing .identity-guide {
    display: none;
}

.identity-modal.previewing .identity-stage canvas {
    display: block;
}

.identity-modal.previewing .identity-stage {
    display: grid;
    place-items: center;
    min-height: auto;
    height: auto;
    padding: clamp(10px, 2vw, 18px);
    background: #eef4ff;
}

.identity-modal.previewing .identity-stage canvas {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1.586 / 1;
    object-fit: contain;
    border-radius: 18px;
}

.identity-guide {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(82%, 760px);
    aspect-ratio: 1.586 / 1;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 255, 255, 0.82);
    border-radius: 22px;
    box-shadow: 0 0 0 999px rgba(2, 9, 30, 0.34);
}

.identity-guide span {
    position: absolute;
    width: 34px;
    height: 34px;
    border-color: #38d6bd;
}

.identity-guide span:nth-child(1) {
    left: -2px;
    top: -2px;
    border-left: 5px solid #38d6bd;
    border-top: 5px solid #38d6bd;
    border-radius: 18px 0 0 0;
}

.identity-guide span:nth-child(2) {
    right: -2px;
    top: -2px;
    border-right: 5px solid #38d6bd;
    border-top: 5px solid #38d6bd;
    border-radius: 0 18px 0 0;
}

.identity-guide span:nth-child(3) {
    right: -2px;
    bottom: -2px;
    border-right: 5px solid #38d6bd;
    border-bottom: 5px solid #38d6bd;
    border-radius: 0 0 18px 0;
}

.identity-guide span:nth-child(4) {
    left: -2px;
    bottom: -2px;
    border-left: 5px solid #38d6bd;
    border-bottom: 5px solid #38d6bd;
    border-radius: 0 0 0 18px;
}

.identity-guide strong {
    position: absolute;
    left: 50%;
    bottom: -48px;
    transform: translateX(-50%);
    width: max-content;
    max-width: 90%;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #0b1838;
    font-size: 12px;
}

.identity-panel {
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    gap: 12px;
}

.identity-live,
.identity-tips,
.identity-score-list div {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fbff;
}

.identity-live {
    display: grid;
    gap: 4px;
}

.identity-live span,
.identity-tips p {
    color: var(--muted);
    line-height: 1.45;
}

.identity-score-list {
    display: grid;
    gap: 8px;
}

.identity-score-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.identity-score-list strong {
    padding: 5px 9px;
    border-radius: 999px;
    background: #eef2f7;
    color: var(--muted);
    font-size: 11px;
}

.identity-score-list .ok strong {
    background: #dcf8ef;
    color: #087d68;
}

.identity-score-list .bad strong {
    background: #fff1d8;
    color: #9a5a00;
}

.identity-actions-row {
    display: grid;
    gap: 8px;
    align-self: end;
}

.identity-modal.previewing .identity-actions-row {
    grid-template-columns: 1fr 1fr;
}

.identity-modal.previewing [data-identity-capture] {
    display: none;
}

.identity-actions-row .button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.contract-preview {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fbff;
}

.contract-preview summary {
    cursor: pointer;
    font-weight: 850;
}

.member-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.member-head strong,
.member-head span {
    display: block;
}

.member-head em {
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(52, 199, 89, 0.12);
    color: var(--good);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.danger-form {
    margin-top: 12px;
}

@media (max-width: 980px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .shell {
        display: block;
        width: 100%;
        margin: 0;
        min-width: 0;
    }

    .sidebar {
        position: fixed;
        inset: 59px auto 0 0;
        z-index: 30;
        width: min(82vw, 300px);
        min-height: calc(100vh - 59px);
        overflow-y: auto;
        transform: translateX(-102%);
        transition: transform 180ms ease;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
    }

    .menu-toggle:checked ~ .shell .sidebar {
        transform: translateX(0);
    }

    .menu-backdrop {
        position: fixed;
        inset: 59px 0 0;
        z-index: 25;
        display: none;
        background: rgba(15, 23, 42, 0.42);
        backdrop-filter: blur(2px);
    }

    .menu-toggle:checked ~ .shell .menu-backdrop {
        display: block;
    }

    .hamburger {
        display: grid;
    }

    .topbar {
        justify-content: flex-start;
        gap: 10px;
    }

    .top-actions {
        margin-left: auto;
        flex-wrap: nowrap;
        min-width: 0;
    }

    .brand {
        min-width: 0;
        flex: 1 1 auto;
    }

    .brand small {
        display: none;
    }

    .grid.two,
    .admin-grid,
    .member-admin-layout,
    .tree-layout,
    .settings-layout,
    .shop-layout,
    .checkout-layout,
    .media-layout,
    .photo-grid,
    .cards,
    .result-grid,
    .metric-grid,
    .member-status-grid,
    .dashboard-grid,
    .order-kpi-grid {
        grid-template-columns: 1fr;
    }

    .support-layout {
        grid-template-columns: 1fr;
    }

    .support-chat {
        min-height: 520px;
    }

    .payout-admin-grid,
    .pool-summary-strip {
        grid-template-columns: 1fr;
    }

    .split-panel {
        grid-column: auto;
    }

    .dashboard-side {
        gap: 16px;
    }

    .cart-panel {
        position: static;
        max-height: none;
        overflow: visible;
        display: grid;
    }

    .cart-panel .form {
        overflow: visible;
        padding-right: 0;
    }

    .cart-panel .submit-order-button {
        position: static;
        box-shadow: none;
    }

    .shop-catalog {
        max-height: none;
        overflow: visible;
    }

    .checkout-payment-panel {
        position: static;
    }

    .panel,
    .card,
    .table-wrap,
    .stats,
    .dashboard-grid,
    .member-status-grid,
    .order-kpi-grid,
    .admin-grid,
    .metric-grid {
        min-width: 0;
    }

    .shop-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .shop-grid-wide {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .checkout-item-row {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    .checkout-qty,
    .checkout-line-total,
    .checkout-item-row > .button {
        grid-column: 2;
    }

    .checkout-line-total {
        justify-self: start;
    }

    .photo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .gallery-choice-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .modal-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .orders-toolbar,
    .order-drawer-summary {
        grid-template-columns: 1fr;
    }

    .document-grid {
        grid-template-columns: 1fr;
    }

    .commission-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-inline-upload {
        grid-template-columns: 1fr;
    }

    .settings-inline-upload .button,
    .settings-save-button {
        width: 100%;
        min-width: 0;
    }

    .payment-provider-grid,
    .payment-method-row {
        grid-template-columns: 1fr;
    }

    .identity-capture-grid {
        grid-template-columns: 1fr;
    }

    .identity-stage,
    .identity-stage video,
    .identity-stage canvas {
        min-height: 360px;
    }
}

@media (max-width: 720px) {
    .topbar {
        align-items: center;
        flex-direction: row;
        gap: 8px;
        padding: 9px 10px;
    }

    nav {
        justify-content: flex-end;
    }

    .page {
        width: min(100% - 22px, 1180px);
        margin-top: 20px;
    }

    .page.with-sidebar {
        padding: 24px 16px 46px;
    }

    .brand strong {
        max-width: 118px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .brand {
        gap: 8px;
        font-size: 14px;
    }

    .brand span,
    .brand-logo {
        width: 32px;
        height: 32px;
        border-radius: 11px;
        flex: 0 0 32px;
    }

    .brand-full-logo .brand-logo-picture {
        width: 130px;
        height: 44px;
        flex: 0 0 130px;
    }

    .brand-custom-logo .brand-logo {
        width: 130px;
        height: 44px;
        flex: 0 0 130px;
    }

    .brand-full-logo .brand-logo {
        width: 100%;
        height: 100%;
    }

    .brand-full-logo .brand-logo,
    .brand-custom-logo .brand-logo {
        border-radius: 0;
    }

    .user-chip {
        display: none;
    }

    .bell-button {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        flex: 0 0 38px;
    }

    .top-actions {
        gap: 4px;
        flex: 0 0 auto;
    }

    .top-actions a {
        padding: 8px 9px;
        font-size: 12px;
        white-space: nowrap;
    }

    .top-actions a[href="/admin/settings"] {
        width: 38px;
        height: 38px;
        padding: 0;
        display: grid;
        place-items: center;
        font-size: 0;
    }

    .top-actions a[href="/admin/settings"]::before {
        content: "⚙";
        font-size: 17px;
        line-height: 1;
    }
    .hero {
        min-height: auto;
        padding: 34px 0;
    }

    .form-grid,
    .meta-grid,
    .list-toolbar,
    .orders-toolbar,
    .media-upload,
    .order-line,
    .inline-admin-form,
    .order-items > div,
    .add-item-form,
    .cart-controls {
        grid-template-columns: 1fr;
    }

    .shop-grid {
        grid-template-columns: 1fr !important;
    }

    .shop-grid-wide {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .checkout-item-row {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 10px;
        padding: 10px;
    }

    .checkout-item-row img {
        width: 58px;
        height: 58px;
    }

    .checkout-qty {
        grid-template-columns: 36px minmax(0, 1fr) 36px;
    }

    .floating-cart-toast {
        right: 12px;
        bottom: 12px;
        width: calc(100vw - 24px);
    }

    .commission-grid {
        grid-template-columns: 1fr;
    }

    .photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .media-layout {
        grid-template-columns: 1fr;
    }

    .media-upload {
        padding: 12px;
    }

    .gallery-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 360px;
    }

    .modal-toolbar,
    .modal-gallery-grid {
        grid-template-columns: 1fr;
    }

    .form-modal {
        padding: 14px;
    }

    .identity-modal {
        align-items: stretch;
        justify-items: stretch;
        padding: 0;
        overflow: hidden;
    }

    .identity-modal-card {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 14px;
        border-radius: 0;
        border: 0;
    }

    .identity-modal-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 10px;
        margin-bottom: 12px;
    }

    .identity-modal-head h2 {
        font-size: clamp(24px, 7vw, 34px);
        line-height: 1.05;
    }

    .identity-modal-head p:last-child {
        font-size: 14px;
        line-height: 1.45;
    }

    .identity-close {
        min-width: 68px;
        padding-inline: 10px;
    }

    .identity-capture-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        min-width: 0;
    }

    .document-upload-block {
        padding: 14px;
        border-radius: 18px;
    }

    .document-upload-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .upload-field,
    .identity-field {
        padding: 12px;
    }

    .upload-field input[type="file"],
    .identity-field input[type="file"] {
        width: 100%;
        font-size: 13px;
    }

    .identity-stage,
    .identity-stage video,
    .identity-stage canvas {
        width: 100%;
        min-width: 0;
        min-height: min(62dvh, 560px);
        height: min(62dvh, 560px);
        border-radius: 18px;
    }

    .identity-modal.previewing .identity-stage,
    .identity-modal.previewing .identity-stage canvas {
        min-height: 0;
        height: auto;
        max-height: none;
    }

    .identity-modal.previewing .identity-stage {
        padding: 8px;
    }

    .identity-modal.previewing .identity-stage canvas {
        border-radius: 14px;
    }

    .identity-guide {
        width: min(88%, calc(100vw - 42px));
        border-radius: 16px;
    }

    .identity-guide strong {
        bottom: -42px;
        white-space: normal;
        text-align: center;
    }

    .identity-panel {
        grid-template-rows: auto;
        padding-bottom: 14px;
    }

    .identity-score-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .identity-score-list div {
        display: grid;
        align-content: center;
        min-height: 72px;
    }

    .identity-actions-row {
        position: sticky;
        bottom: 0;
        margin: 0 -14px -14px;
        padding: 10px 14px 14px;
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(16px);
    }

    .identity-modal.previewing .identity-actions-row {
        grid-template-columns: 1fr;
    }

    .pool-rates-head,
    .rate-grid {
        grid-template-columns: 1fr;
    }

    .compact-ring {
        justify-self: start;
    }

    .order-drawer-panel {
        width: 100vw;
        padding: 18px;
    }

    .panel,
    .card {
        border-radius: 20px;
    }

    .table-wrap {
        margin-inline: -2px;
        padding-bottom: 6px;
    }

    table {
        min-width: 680px;
    }

    .statistics-table-wrap {
        overflow: visible;
        margin-inline: 0;
        padding-bottom: 0;
    }

    .stats-table {
        display: block;
        min-width: 0;
    }

    .stats-table thead {
        display: none;
    }

    .stats-table tbody {
        display: grid;
        gap: 12px;
    }

    .stats-table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: #f8fbff;
    }

    .stats-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-width: 0;
        padding: 9px 8px;
        border-bottom: 1px solid rgba(17, 24, 39, 0.07);
        white-space: normal;
        font-size: 13px;
        text-align: right;
    }

    .stats-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 11px;
        font-weight: 850;
        text-align: left;
        text-transform: uppercase;
    }

    .stats-table td:first-child {
        grid-column: 1 / -1;
        min-width: 0;
        padding: 2px 4px 10px;
        border-bottom: 1px solid var(--line);
        font-size: 18px;
        text-align: left;
    }

    .stats-table td:first-child::before {
        display: none;
    }

    .stats-table td:nth-last-child(-n + 2) {
        border-bottom: 0;
    }
}

@media (max-width: 430px) {
    .brand strong {
        max-width: 92px;
    }

    .top-actions a[href="/logout"] {
        padding-inline: 7px;
    }

    .page.with-sidebar {
        padding: 22px 12px 42px;
    }
}

.order-summary-controls {
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
}

.order-summary-controls .orders-toolbar {
    margin: 0;
}

.muted-copy {
    color: var(--muted);
    margin: 0;
}

.order-summary-sheet {
    background: #fff;
    max-width: 920px;
    margin: 0 auto;
}

.summary-print-head {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 160px;
    gap: 22px;
    align-items: center;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.summary-print-logo {
    display: block;
    width: 210px;
}

.summary-print-logo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.summary-print-head h2 {
    margin: 6px 0;
    font-size: 30px;
}

.summary-print-head p {
    color: var(--muted);
    margin: 0;
}

.summary-print-meta {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fafc;
    text-align: center;
}

.summary-print-meta span {
    color: var(--muted);
    font-weight: 700;
}

.summary-print-meta strong {
    font-size: 28px;
    text-align: center;
}

.order-summary-table td,
.order-summary-table th {
    vertical-align: middle;
}

.order-summary-table th:last-child,
.order-summary-table td:last-child {
    width: 120px;
    text-align: right;
}

.summary-signature {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 34px;
}

.summary-signature div {
    min-height: 86px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
}

.summary-signature span {
    display: block;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 12px;
}

@media print {
    @page {
        size: A4;
        margin: 12mm;
    }

    body {
        background: #fff !important;
        color: #000;
    }

    .topbar,
    .sidebar,
    .menu-backdrop,
    .notification-drawer,
    .notification-backdrop,
    .print-hidden {
        display: none !important;
    }

    .shell,
    .page.with-sidebar,
    .page {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }

    .panel.order-summary-sheet {
        box-shadow: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }

    .summary-print-head {
        grid-template-columns: 170px 1fr 120px;
        gap: 14px;
        border-bottom: 1px solid #111;
        padding-bottom: 10px;
        margin-bottom: 14px;
    }

    .summary-print-logo {
        width: 170px;
    }

    .summary-print-head h2 {
        font-size: 20px;
        margin: 2px 0;
    }

    .summary-print-head p,
    .summary-print-head .eyebrow {
        font-size: 10px;
    }

    .summary-print-meta {
        background: #fff;
        border-color: #111;
        border-radius: 8px;
        padding: 8px;
    }

    .summary-print-meta strong {
        font-size: 18px;
    }

    .table-wrap {
        overflow: visible !important;
    }

    .products-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
    }

    .products-table th,
    .products-table td {
        border-bottom: 1px solid #ccc;
        padding: 9px 6px;
    }

    .summary-signature {
        break-inside: avoid;
    }

    .summary-signature div {
        border-color: #111;
        border-radius: 0;
    }
}

@media (max-width: 760px) {
    .product-detail-modal {
        padding: 14px;
    }

    .product-detail-card {
        grid-template-columns: 1fr;
        gap: 14px;
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        padding: 14px;
        border-radius: 22px;
    }

    .product-detail-media,
    .product-detail-media img {
        min-height: 220px;
    }

    .product-detail-copy {
        padding: 0 2px 4px;
    }

    .product-detail-copy h2 {
        font-size: 23px;
    }

    .product-detail-close {
        top: 12px;
        right: 12px;
    }
}