/* ============================================================
   Social.Members — 用户中心样式（深色，A 方案继承营销站）
   ============================================================
   依赖：tokens.css + reset.css + LayUI 2.9.21（已本地化到 /lib/layui/）

   结构：
     §1  Body / 基础排版
     §2  后台主布局（顶栏 + 侧栏 + 内容区三段式）
     §3  顶栏内组件
     §4  侧栏导航
     §5  内容区基础（标题 / 卡片 / 容器）
     §6  业务组件（tier badge / usage bar / device card / license key box）
     §7  Standalone 未登录布局（居中卡片）
     §8  LayUI Dark Theme override（兜底）
     §9  工具类
   ============================================================ */


/* ============================================================
   §1  Body / 基础排版
   ============================================================ */

html, body {
    background: var(--bg-base);
    color: var(--text);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color .15s var(--ease);
}
a:hover { color: var(--accent-hover); }

h1, h2, h3, h4, h5 {
    color: var(--text);
    font-weight: 700;
    line-height: 1.3;
}

/* Reset 用了 *,*::before,*::after { box-sizing:border-box }，这里不重复 */


/* ============================================================
   §2  后台主布局（三段式）
   ============================================================ */

/*  顶栏  64px 高
    侧栏  220px 宽（折叠 60px）
    内容  剩余空间 + 32px 内边距 */

.members-shell {
    min-height: 100vh;
    display: grid;
    grid-template-areas:
        "topbar topbar"
        "side   main";
    grid-template-columns: 220px 1fr;
    grid-template-rows: 64px 1fr;
}

.members-shell.is-side-collapsed {
    grid-template-columns: 60px 1fr;
}

.members-topbar {
    grid-area: topbar;
    background: var(--bg-elev-1);
    border-bottom: 1px solid var(--border-glass);
    padding: 0 var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-5);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 100;
}

.members-side {
    grid-area: side;
    background: var(--bg-elev-1);
    border-right: 1px solid var(--border-glass);
    padding: var(--space-4) 0;
    overflow-y: auto;
}

.members-main {
    grid-area: main;
    padding: var(--space-6) var(--space-6) var(--space-8);
    max-width: 1280px;
    width: 100%;
}

@media (max-width: 900px) {
    .members-shell {
        grid-template-areas:
            "topbar"
            "main";
        grid-template-columns: 1fr;
    }
    .members-side {
        position: fixed;
        top: 64px;
        bottom: 0;
        left: 0;
        width: 240px;
        transform: translateX(-100%);
        transition: transform .25s var(--ease);
        z-index: 99;
    }
    .members-shell.is-side-open .members-side { transform: translateX(0); }
}


/* ============================================================
   §3  顶栏内组件
   ============================================================ */

.members-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text);
    text-decoration: none;
    min-width: 200px;
}
.members-brand:hover { color: var(--text); }
.members-brand .brand-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
}

.topbar-spacer { flex: 1; }

.topbar-action {
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    transition: all .15s var(--ease);
    position: relative;
    background: transparent;
    border: none;
}
.topbar-action:hover {
    background: var(--bg-glass-hover);
    color: var(--text);
}
.topbar-action .badge-dot {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg-elev-1);
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 12px 4px 4px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s var(--ease);
    color: var(--text);
    font-weight: 500;
}
.topbar-user:hover { background: var(--bg-glass-hover); }
.topbar-user .avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--gradient-hero);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .82rem;
}
.topbar-user i.caret {
    color: var(--text-faint);
    font-size: .7rem;
}

/* 用户菜单容器 + 下拉浮层 */
.topbar-user-wrap {
    position: relative;
}
.topbar-user-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-glass-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .15s var(--ease), transform .15s var(--ease);
    z-index: 200;
}
.topbar-user-menu.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.user-menu-header {
    padding: 12px;
    border-bottom: 1px solid var(--border-glass);
    margin-bottom: 4px;
}
.user-menu-name {
    color: var(--text);
    font-weight: 600;
    font-size: .92rem;
    margin-bottom: 2px;
}
.user-menu-email {
    color: var(--text-faint);
    font-size: .8rem;
    word-break: break-all;
}
.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: .9rem;
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background .12s var(--ease), color .12s var(--ease);
}
.user-menu-item:hover {
    background: var(--bg-glass-hover);
    color: var(--text);
}
.user-menu-item i {
    color: var(--text-faint);
    width: 16px;
}
.user-menu-item:hover i { color: var(--accent); }
.user-menu-item-danger:hover {
    color: #fca5a5;
}
.user-menu-item-danger:hover i { color: #ef4444; }
.user-menu-divider {
    height: 1px;
    background: var(--border-glass);
    margin: 4px 0;
}


/* ============================================================
   §4  侧栏导航
   ============================================================ */

.side-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}
.side-nav .nav-group-label {
    color: var(--text-faint);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    padding: var(--space-4) var(--space-5) var(--space-2);
}
.side-nav .nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px var(--space-5);
    color: var(--text-muted);
    font-size: .92rem;
    font-weight: 500;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all .15s var(--ease);
    position: relative;
}
.side-nav .nav-item i {
    width: 18px;
    text-align: center;
    color: var(--text-faint);
    font-size: 1rem;
    flex-shrink: 0;
    transition: color .15s var(--ease);
}
.side-nav .nav-item:hover {
    background: var(--bg-glass-hover);
    color: var(--text);
}
.side-nav .nav-item:hover i { color: var(--text); }
.side-nav .nav-item.is-active {
    background: var(--bg-glass);
    border-left-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}
.side-nav .nav-item.is-active i { color: var(--accent); }
.side-nav .nav-item .nav-meta {
    margin-left: auto;
    font-size: .72rem;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--accent);
    color: white;
    font-weight: 700;
}


/* ============================================================
   §5  内容区基础
   ============================================================ */

.page-header {
    margin-bottom: var(--space-6);
}
.page-header h1 {
    font-size: 1.6rem;
    margin-bottom: var(--space-1);
}
.page-header .page-sub {
    color: var(--text-muted);
    font-size: .95rem;
}

/* 卡片基类（跟 LayUI .layui-card 共存，不冲突）*/
.m-card {
    background: var(--bg-elev-1);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    transition: border-color .2s var(--ease);
}
.m-card.is-elevated { background: var(--bg-elev-2); }
.m-card .m-card-title {
    font-size: .82rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    margin-bottom: var(--space-3);
}
.m-card .m-card-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
}
.m-card .m-card-foot {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-glass);
    color: var(--text-muted);
    font-size: .85rem;
}

/* 双列 / 三列 / 四列响应式 grid 工具 */
.m-grid {
    display: grid;
    gap: var(--space-4);
}
.m-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.m-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.m-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
    .m-grid.cols-2,
    .m-grid.cols-3,
    .m-grid.cols-4 { grid-template-columns: 1fr; }
}


/* ============================================================
   §6  业务组件
   ============================================================ */

/* Tier Badge：Free / Pro / Team */
.tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1;
}
.tier-badge.is-free {
    background: var(--bg-glass);
    color: var(--text-muted);
    border: 1px solid var(--border-glass);
}
.tier-badge.is-pro {
    background: linear-gradient(135deg, #ff6b6b 0%, #f97316 100%);
    color: white;
    box-shadow: 0 0 16px var(--accent-glow);
}
.tier-badge.is-team {
    background: linear-gradient(135deg, #a78bfa 0%, #818cf8 100%);
    color: white;
    box-shadow: 0 0 16px rgba(167, 139, 250, .4);
}

/* 用量条 */
.usage-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--bg-glass);
    overflow: hidden;
    margin-top: var(--space-2);
}
.usage-bar .usage-fill {
    height: 100%;
    background: var(--gradient-hero);
    border-radius: 4px;
    transition: width .4s var(--ease);
}
.usage-bar.is-warning .usage-fill { background: #fbbf24; }
.usage-bar.is-danger  .usage-fill { background: #ef4444; }

/* 设备卡 */
.device-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius);
    background: var(--bg-glass);
}
.device-card + .device-card { margin-top: var(--space-2); }
.device-card .device-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius);
    background: var(--bg-elev-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1.4rem;
    flex-shrink: 0;
}
.device-card .device-info { flex: 1; min-width: 0; }
.device-card .device-name {
    color: var(--text);
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: 2px;
}
.device-card .device-meta {
    color: var(--text-faint);
    font-size: .8rem;
}
.device-card .device-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #4ade80;
    font-size: .8rem;
    font-weight: 600;
}
.device-card .device-status .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px #4ade80;
}

/* License Key 复制框 */
.license-key-box {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--bg-elev-2);
    border: 1px solid var(--border-glass-strong);
    border-radius: var(--radius);
    padding: 14px var(--space-4);
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--text);
    letter-spacing: .04em;
}
.license-key-box .key-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: all;
}
.license-key-box .key-copy {
    background: var(--accent);
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    font-size: .82rem;
    transition: all .15s var(--ease);
    flex-shrink: 0;
}
.license-key-box .key-copy:hover {
    background: var(--accent-hover);
    box-shadow: 0 0 16px var(--accent-glow);
}


/* ============================================================
   §7  Standalone 未登录布局（居中卡片）
   ============================================================ */

.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 107, 107, .08) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(56, 189, 248, .06) 0%, transparent 50%),
        var(--bg-base);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-6);
    box-shadow: var(--shadow-lg);
}
.auth-card .auth-brand {
    text-align: center;
    margin-bottom: var(--space-6);
}
.auth-card h1 {
    text-align: center;
    font-size: 1.4rem;
    margin-bottom: var(--space-5);
}
.auth-card .auth-foot {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-glass);
    text-align: center;
    color: var(--text-muted);
    font-size: .88rem;
}


/* ============================================================
   §8  LayUI Dark Theme override
   ============================================================
   策略：只覆盖最常用的 30 个类。其它 LayUI 组件用到时再补。
   ============================================================ */

/* --- 卡片 --- */
.layui-card,
.layui-card-body {
    background: var(--bg-elev-1) !important;
    color: var(--text) !important;
    border-color: var(--border-glass) !important;
}
.layui-card { border: 1px solid var(--border-glass) !important; border-radius: var(--radius-lg) !important; box-shadow: none !important; }
.layui-card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border-glass) !important;
    color: var(--text) !important;
    font-weight: 600 !important;
}

/* --- 表单输入 --- */
.layui-input,
.layui-textarea,
.layui-select,
.layui-form-select dl {
    background: var(--bg-elev-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: var(--radius-sm) !important;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease) !important;
}
.layui-input:hover,
.layui-textarea:hover,
.layui-select:hover { border-color: var(--border-glass-strong) !important; }
.layui-input:focus,
.layui-textarea:focus,
.layui-select:focus,
.layui-input-focus,
.layui-form-select.layui-form-selected .layui-input {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, .14) !important;
    outline: none !important;
}
.layui-input::placeholder,
.layui-textarea::placeholder { color: var(--text-faint) !important; }
.layui-form-label {
    color: var(--text-muted) !important;
    font-weight: 500 !important;
}
.layui-form-item { margin-bottom: var(--space-4) !important; }

/* 下拉项 */
.layui-form-select dl {
    background: var(--bg-elev-2) !important;
    border: 1px solid var(--border-glass-strong) !important;
    box-shadow: var(--shadow) !important;
}
.layui-form-select dl dd { color: var(--text-muted) !important; }
.layui-form-select dl dd:hover,
.layui-form-select dl dd.layui-this {
    background: var(--bg-glass-hover) !important;
    color: var(--accent) !important;
}

/* --- 按钮 --- */
.layui-btn {
    background: var(--accent) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    transition: all .15s var(--ease) !important;
}
.layui-btn:hover {
    background: var(--accent-hover) !important;
    box-shadow: 0 0 16px var(--accent-glow) !important;
}
.layui-btn.layui-btn-primary {
    background: transparent !important;
    color: var(--text) !important;
    border: 1px solid var(--border-glass-strong) !important;
}
.layui-btn.layui-btn-primary:hover {
    background: var(--bg-glass-hover) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    box-shadow: none !important;
}
.layui-btn.layui-btn-danger {
    background: #ef4444 !important;
}
.layui-btn.layui-btn-danger:hover {
    background: #dc2626 !important;
    box-shadow: 0 0 16px rgba(239, 68, 68, .35) !important;
}
.layui-btn.layui-btn-warm {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
}
.layui-btn.layui-btn-disabled,
.layui-btn-disabled:hover {
    background: var(--bg-glass) !important;
    color: var(--text-faint) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* --- 表格 --- */
.layui-table {
    background: transparent !important;
    color: var(--text) !important;
    border-color: var(--border-glass) !important;
}
.layui-table thead {
    background: var(--bg-elev-2) !important;
}
.layui-table thead th {
    background: var(--bg-elev-2) !important;
    color: var(--text) !important;
    border-color: var(--border-glass) !important;
    font-weight: 700 !important;
}
.layui-table tbody tr { background: var(--bg-elev-1) !important; }
.layui-table tbody tr:hover,
.layui-table-hover tbody tr:hover { background: var(--bg-glass-hover) !important; }
.layui-table td {
    border-color: var(--border-glass) !important;
    color: var(--text-muted) !important;
}
.layui-table-page {
    background: var(--bg-elev-1) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-glass) !important;
}

/* --- 分页 --- */
.layui-laypage a,
.layui-laypage span {
    background: var(--bg-elev-2) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-glass) !important;
}
.layui-laypage a:hover { color: var(--accent) !important; }
.layui-laypage .layui-laypage-curr .layui-laypage-em {
    background: var(--accent) !important;
}

/* --- 弹层 layer --- */
.layui-layer {
    background: var(--bg-elev-1) !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--border-glass-strong) !important;
    border-radius: var(--radius-lg) !important;
}
.layui-layer-title {
    background: var(--bg-elev-1) !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border-glass) !important;
    font-weight: 600 !important;
}
.layui-layer-content {
    background: var(--bg-elev-1) !important;
    color: var(--text-muted) !important;
}
.layui-layer-btn { background: var(--bg-elev-1) !important; border-top: 1px solid var(--border-glass) !important; }
.layui-layer-btn .layui-layer-btn0 {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: white !important;
}
.layui-layer-btn .layui-layer-btn1 {
    background: transparent !important;
    border: 1px solid var(--border-glass-strong) !important;
    color: var(--text-muted) !important;
}
.layui-layer-shade { background: rgba(0, 0, 0, .6) !important; }
.layui-layer-ico {
    /* LayUI 的 icon 是 sprite，深色背景下要反转或换 SVG —— 暂时让它透明度高些 */
    opacity: .9;
}

/* --- 复选框 / 单选 / Switch --- */
.layui-form-checkbox[lay-skin="primary"] i,
.layui-form-checkbox i {
    background: var(--bg-elev-2) !important;
    border-color: var(--border-glass-strong) !important;
    color: var(--text-faint) !important;
}
.layui-form-checkbox[lay-skin="primary"].layui-form-checked i,
.layui-form-checkbox.layui-form-checked i {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: white !important;
}
.layui-form-checkbox span,
.layui-form-radio span {
    color: var(--text) !important;
    background: transparent !important;
}
.layui-form-radio i {
    color: var(--text-faint) !important;
}
.layui-form-radioed i {
    color: var(--accent) !important;
}
.layui-form-switch {
    background: var(--bg-elev-2) !important;
    border: 1px solid var(--border-glass-strong) !important;
}
.layui-form-onswitch {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* --- 选项卡 Tab --- */
.layui-tab-title {
    border-bottom: 1px solid var(--border-glass) !important;
}
.layui-tab-title li {
    color: var(--text-muted) !important;
}
.layui-tab-title .layui-this {
    color: var(--accent) !important;
}
.layui-tab-title .layui-this::after {
    border-color: var(--accent) !important;
    border-bottom-color: var(--bg-base) !important;
}
.layui-tab-bar { background: var(--bg-elev-2) !important; color: var(--text-muted) !important; }

/* --- 进度条 --- */
.layui-progress { background: var(--bg-glass) !important; }
.layui-progress-bar { background: var(--accent) !important; }
.layui-progress-text { color: var(--text-muted) !important; }

/* --- 步骤条 --- */
.layui-element-step .layui-step-item-title {
    color: var(--text-muted) !important;
}
.layui-element-step .layui-step-item-process .layui-step-item-title,
.layui-element-step .layui-step-item-finish .layui-step-item-title {
    color: var(--text) !important;
}
.layui-element-step .layui-step-item-process .layui-step-item-icon {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* --- 时间线 --- */
.layui-timeline-axis {
    background: var(--bg-elev-2) !important;
    color: var(--accent) !important;
    border: 1px solid var(--accent) !important;
}
.layui-timeline-item::before {
    background: var(--border-glass) !important;
}
.layui-timeline-content {
    color: var(--text-muted) !important;
}
.layui-timeline-title {
    color: var(--text) !important;
}

/* --- 下拉菜单 --- */
.layui-dropdown {
    background: var(--bg-elev-2) !important;
    border: 1px solid var(--border-glass-strong) !important;
    box-shadow: var(--shadow) !important;
    border-radius: var(--radius) !important;
}
.layui-dropdown-menu li {
    color: var(--text-muted) !important;
}
.layui-dropdown-menu li:hover,
.layui-dropdown-menu li.layui-this {
    background: var(--bg-glass-hover) !important;
    color: var(--accent) !important;
}

/* --- 提示 tip --- */
.layui-layer-tips .layui-layer-content {
    background: var(--bg-elev-2) !important;
    color: var(--text) !important;
}

/* --- LayUI iconfont 颜色统一 --- */
.layui-icon { color: inherit; }


/* ============================================================
   §9  工具类（跟营销站 site.css 同名同义，省得改 cshtml）
   ============================================================ */

.text-muted  { color: var(--text-muted) !important; }
.text-faint  { color: var(--text-faint) !important; }
.text-accent { color: var(--accent) !important; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

.flex { display: flex; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }