/* ====================================================================
 * Global CSS Variables & Utilities
 * 
 * 统一样式系统 - 以 Fate 项目为标准
 * ==================================================================== */

:root {
    /* Color palette */
    --bg: #efe9e6;
    --card: #fbfaf8;
    --border: rgba(20, 20, 20, .06);
    --text: #1b1b1b;
    --muted: rgba(27, 27, 27, .56);
    --accent: #ff9800;
    --warn: #f6e6e9;
    --info: rgba(3, 169, 244, 0.95);
    
    /* Layout */
    --container-max: 1200px;
    --topnav-h: 56px;
    --input-bg: #fbfbfb;
}

/* ====================================================================
 * Reset & Base Styles
 * ==================================================================== */

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* ====================================================================
 * Utility Classes
 * ==================================================================== */

/* Spacing */
.mt-6 { margin-top: 6px !important; }
.mt-8 { margin-top: 8px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-12 { margin-top: 12px !important; }
.mb-10 { margin-bottom: 10px !important; }
.ml-8 { margin-left: 8px !important; }
.mr-0 { margin-right: 0 !important; }
.my-8 { margin-top: 8px !important; margin-bottom: 8px !important; }
.m-0 { margin: 0 !important; }

/* Padding */
.px-12 { padding-left: 12px !important; padding-right: 12px !important; }
.py-10 { padding-top: 10px !important; padding-bottom: 10px !important; }
.px-10 { padding-left: 10px !important; padding-right: 10px !important; }
.py-6 { padding-top: 6px !important; padding-bottom: 6px !important; }

/* Typography */
.fs-12 { font-size: 12px !important; }
.fs-18 { font-size: 18px !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.text-inherit { color: inherit !important; }
.ta-left { text-align: left !important; }
.ws-nowrap { white-space: nowrap !important; }
.td-none { text-decoration: none !important; }

/* Display */
.hidden { display: none !important; }
.d-grid { display: grid !important; }
.d-flex { display: flex !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-inline-flex { display: inline-flex !important; }

/* Layout helpers */
.w-100 { width: 100% !important; }
.w-180 { width: 180px !important; }
.ai-center { align-items: center !important; }
.ai-end { align-items: flex-end !important; }
.jc-end { justify-content: flex-end !important; }
.fw-wrap { flex-wrap: wrap !important; }
.no-underline { text-decoration: none !important; }

/* Gaps */
.gap-6 { gap: 6px !important; }
.gap-8 { gap: 8px !important; }
.gap-10 { gap: 10px !important; }

/* Borders & Radius */
.b-1 { border: 1px solid var(--border) !important; }
.bt-1 { border-top: 1px solid var(--border) !important; }
.br-12 { border-radius: 12px !important; }

/* Overflow */
.ov-hidden { overflow: hidden !important; }
.ov-auto { overflow: auto !important; }
.ov-x-auto { overflow-x: auto !important; }
.ov-y-hidden { overflow-y: hidden !important; }

/* Backgrounds */
.bg-white { background: #fff !important; }
.bg-soft { background: rgba(246, 230, 233, .18) !important; }

/* Misc */
.cur-pointer { cursor: pointer !important; }
.us-none { user-select: none !important; }
.ls-none { list-style: none !important; }
.float-right { float: right !important; }
.h-42 { height: 42px !important; }

/* Grid helpers */
.grid-2 { grid-template-columns: 1fr 1fr !important; }
.grid-3 { grid-template-columns: 1fr 1fr 1fr !important; }

/* ====================================================================
 * Component Styles
 * ==================================================================== */

/* Card Component */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(20,20,20,.04);
    overflow: hidden;
    margin-top: 12px;
}

.card h2, .card h3 {
    margin: 0;
    padding: 10px 12px;
    font-size: 14px;
    background: rgba(246, 230, 233, .35);
    border-bottom: 1px solid var(--border);
}

.card .content {
    padding: 12px;
}

/* Button Styles */
button, .btn {
    appearance: none;
    border: 1px solid rgba(20,20,20,.08);
    background: var(--card);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    box-shadow: 0 1px 2px rgba(20,20,20,.06);
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    cursor: pointer;
    transition: transform .05s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

button:hover, .btn:hover {
    box-shadow: 0 3px 10px rgba(20,20,20,.06);
}

button:active, .btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(20,20,20,.08);
}

button.primary, .btn.primary, .btn-primary {
    background: rgba(111, 127, 163, .16);
    border-color: rgba(111, 127, 163, .45);
    color: var(--text);
}

button.primary:hover, .btn.primary:hover, .btn-primary:hover {
    background: rgba(111, 127, 163, .22);
}

.btn-secondary {
    background: rgba(246, 230, 233, .35);
    border-color: rgba(20,20,20,.12);
}

button:disabled, .btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-sm {
    padding: 6px 10px;
    border-radius: 10px;
}

.icon-btn {
    min-width: 36px;
    min-height: 36px;
    width: 36px;
    height: 36px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pill {
    padding: 3px 8px;
    border: 1px solid rgba(20,20,20,.10);
    border-radius: 999px;
    background: #fff;
}

.pill-btn {
    padding: 3px 10px;
    border-radius: 999px;
}

/* Form Elements */
label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px;
}

input, select, textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-size: 16px;
    background: var(--input-bg);
    color: var(--text);
}

textarea { 
    resize: vertical; 
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: rgba(111, 127, 163, .70);
    box-shadow: 0 0 0 3px rgba(246, 230, 233, .75);
}

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

@media (min-width: 640px) { 
    .grid.two { 
        grid-template-columns: 1fr 1fr; 
    } 
}

/* Actions Bar (Fixed Bottom) */
.actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(247,244,242,.92);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--border);
    padding: 10px 12px;
}

.actions .wrap {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.actions-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 10px;
    align-items: center;
}

@media (max-width: 460px) {
    .actions-row {
        grid-template-columns: 1fr;
    }
}

/* Separator */
.sep {
    margin: 14px 0;
    border: none;
    border-top: 1px solid var(--border);
}

/* Text Helpers */
.muted { color: var(--muted); }
.error { color: #b00020; }
.success { color: #0a7f2e; }

/* Links */
a { 
    color: var(--accent); 
    text-decoration: none; 
    font-weight: 600; 
}

a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}