/* ============================================================
   SuanMing — macOS 26 Liquid Glass Style
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
    --theme-accent: #DC3545;
    --theme-accent-light: #FF6B6B;
    --theme-glow: rgba(220,53,69,0.12);

    --ios-blue:    var(--theme-accent);
    --ios-green:   #30D158;
    --ios-orange:  #FF9F0A;
    --ios-red:     #FF453A;
    --ios-purple:  #BF5AF2;
    --ios-pink:    #FF375F;
    --ios-teal:    var(--theme-accent-light);
    --ios-yellow:  #FFD60A;
    --ios-indigo:  #5E5CE6;
    --ios-mint:    #66D4CF;

    --bg-base:         #000000;
    --bg-primary:      #1C1C1E;
    --bg-secondary:    #2C2C2E;
    --bg-tertiary:     #3A3A3C;
    --bg-grouped:      #000000;

    --glass-bg:        rgba(255,255,255,0.06);
    --glass-bg-thick:  rgba(255,255,255,0.10);
    --glass-bg-hover:  rgba(255,255,255,0.09);
    --glass-border:    rgba(255,255,255,0.10);
    --glass-border-hi: rgba(255,255,255,0.20);
    --glass-blur:      blur(40px) saturate(180%);
    --glass-shine:     linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%);
    --glass-top-line:  linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);

    --text-1: #FFFFFF;
    --text-2: rgba(255,255,255,0.70);
    --text-3: rgba(255,255,255,0.45);
    --text-4: rgba(255,255,255,0.25);

    --sidebar-w: 260px;
    --radius-xs:  8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-pill: 100px;
}

/* ---------- Light Mode ---------- */
[data-appearance="light"] {
    --bg-base:         #F2F2F7;
    --bg-primary:      #FFFFFF;
    --bg-secondary:    #F2F2F7;
    --bg-tertiary:     #E5E5EA;
    --bg-grouped:      #F2F2F7;

    --glass-bg:        rgba(255,255,255,0.72);
    --glass-bg-thick:  rgba(255,255,255,0.82);
    --glass-bg-hover:  rgba(255,255,255,0.85);
    --glass-border:    rgba(0,0,0,0.06);
    --glass-border-hi: rgba(0,0,0,0.12);
    --glass-shine:     linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 50%);
    --glass-top-line:  linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);

    --text-1: #1C1C1E;
    --text-2: rgba(60,60,67,0.75);
    --text-3: rgba(60,60,67,0.45);
    --text-4: rgba(60,60,67,0.25);
}

/* ---------- Reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
    background:var(--bg-base);
}
body{
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
                 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-base);
    color: var(--text-1);
    line-height: 1.5;
    overflow: hidden;
    height: 100vh;
    -webkit-font-smoothing: antialiased;
}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;color:inherit}

/* ---------- Background Ambience ---------- */
body::before{
    content:'';
    position:fixed;inset:0;z-index:-2;
    pointer-events:none;
    background:
        radial-gradient(ellipse 80% 60% at 15% 20%, var(--theme-glow), transparent),
        radial-gradient(ellipse 60% 80% at 85% 30%, rgba(191,90,242,0.06), transparent),
        radial-gradient(ellipse 70% 50% at 50% 85%, rgba(255,159,10,0.04), transparent),
        var(--bg-base);
    animation: ambience 30s ease-in-out infinite alternate;
}
@keyframes ambience{
    0%{filter:hue-rotate(0deg)}
    100%{filter:hue-rotate(12deg)}
}

/* ---------- SVG Filters ---------- */
.svg-filters{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- Utility ---------- */
.text-gradient{
    background:linear-gradient(135deg, var(--theme-accent), var(--theme-accent-light));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
}
.mono{font-family:'SF Mono','Fira Code','JetBrains Mono','Cascadia Code',monospace}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- App Shell ---------- */
.app-shell{
    display:flex;
    height:100vh;
    overflow:hidden;
    min-height:100dvh;
    background:var(--bg-base);
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar{
    width:var(--sidebar-w);
    min-width:var(--sidebar-w);
    height:100vh;
    display:flex;
    flex-direction:column;
    background:rgba(28,28,30,0.75);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    border-right:1px solid var(--glass-border);
    z-index:100;
    transition:transform .35s cubic-bezier(.4,0,.2,1);
}
[data-appearance="light"] .sidebar{
    background:rgba(255,255,255,0.78);
}

.sidebar-header{
    padding:20px 14px 12px;
    flex-shrink:0;
}

.sidebar-logo{
    display:flex;align-items:center;gap:10px;
    margin-bottom:14px;
    padding:0 4px;
}
.sidebar-logo-icon{
    width:32px;height:32px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--theme-accent),var(--theme-accent-light));
    border-radius:8px;
    color:#fff;
    font-size:18px;
}
.sidebar-title{
    font-size:17px;font-weight:700;letter-spacing:-0.3px;
}

/* Search */
.sidebar-search{position:relative}
.search-icon{
    position:absolute;left:10px;top:50%;transform:translateY(-50%);
    color:var(--text-3);pointer-events:none;
}
.search-input{
    width:100%;
    padding:8px 12px 8px 34px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:10px;
    font-size:13px;
    color:var(--text-1);
    outline:none;
    transition:all .2s;
}
[data-appearance="light"] .search-input{
    background:rgba(0,0,0,0.04);
    border-color:rgba(0,0,0,0.06);
}
.search-input::placeholder{color:var(--text-3)}
.search-input:focus{
    background:rgba(255,255,255,0.09);
    border-color:rgba(220,53,69,0.4);
    box-shadow:0 0 0 3px rgba(220,53,69,0.10);
}
[data-appearance="light"] .search-input:focus{
    background:rgba(255,255,255,0.95);
    border-color:rgba(220,53,69,0.3);
}

/* Nav */
.sidebar-nav{
    flex:1;overflow-y:auto;overflow-x:hidden;
    padding:4px 10px 80px;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,0.1) transparent;
}
.sidebar-nav::-webkit-scrollbar{width:4px}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:4px}

.nav-category{margin-bottom:8px}
.nav-category-label{
    font-size:11px;font-weight:600;text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--text-3);
    padding:12px 8px 4px;
}

.nav-item{
    display:flex;align-items:center;gap:10px;
    padding:7px 10px;
    border-radius:10px;
    cursor:pointer;
    transition:all .15s;
    font-size:13px;
    color:var(--text-2);
}
.nav-item:hover{
    background:var(--glass-bg-hover);
    color:var(--text-1);
}
.nav-item.active{
    background:var(--glass-bg-thick);
    color:var(--text-1);
    font-weight:500;
}

.nav-item-icon{
    width:24px;height:24px;
    display:flex;align-items:center;justify-content:center;
    border-radius:6px;
    flex-shrink:0;
}
.nav-item-icon svg{width:14px;height:14px}

/* Icon colors */
.icon-red .nav-item-icon{color:#FF453A;background:rgba(255,69,58,0.12)}
.icon-pink .nav-item-icon{color:#FF375F;background:rgba(255,55,95,0.12)}
.icon-orange .nav-item-icon{color:#FF9F0A;background:rgba(255,159,10,0.12)}
.icon-gold .nav-item-icon{color:#D4A017;background:rgba(212,160,23,0.12)}
.icon-green .nav-item-icon{color:#30D158;background:rgba(48,209,88,0.12)}
.icon-teal .nav-item-icon{color:#64D2FF;background:rgba(100,210,255,0.12)}
.icon-blue .nav-item-icon{color:#007AFF;background:rgba(0,122,255,0.12)}
.icon-indigo .nav-item-icon{color:#5E5CE6;background:rgba(94,92,230,0.12)}
.icon-purple .nav-item-icon{color:#BF5AF2;background:rgba(191,90,242,0.12)}

/* Sidebar Footer */
.sidebar-footer{
    position:absolute;
    bottom:0;left:0;right:0;
    padding:8px 14px 12px;
    background:rgba(28,28,30,0.9);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-top:1px solid var(--glass-border);
}
[data-appearance="light"] .sidebar-footer{
    background:rgba(255,255,255,0.9);
}

.sidebar-settings-bar{
    display:flex;justify-content:center;gap:4px;
}
.settings-trigger{
    width:36px;height:36px;
    display:flex;align-items:center;justify-content:center;
    border-radius:10px;
    color:var(--text-2);
    transition:all .15s;
}
.settings-trigger:hover,.settings-trigger.active{
    background:var(--glass-bg-hover);
    color:var(--text-1);
}

/* Popovers */
.settings-popover{
    position:absolute;bottom:52px;left:14px;right:14px;
    background:var(--bg-primary);
    border:1px solid var(--glass-border-hi);
    border-radius:var(--radius-md);
    padding:12px;
    opacity:0;
    transform:translateY(8px);
    pointer-events:none;
    transition:all .2s;
    box-shadow:0 8px 32px rgba(0,0,0,0.3);
    z-index:200;
}
.settings-popover.open{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}
[data-appearance="light"] .settings-popover{
    box-shadow:0 8px 32px rgba(0,0,0,0.12);
}

.theme-grid{
    display:grid;grid-template-columns:repeat(6,1fr);gap:8px;
}
.theme-swatch{
    width:100%;aspect-ratio:1;border-radius:50%;
    cursor:pointer;transition:all .2s;
    border:2px solid transparent;
}
.theme-swatch:hover{transform:scale(1.15)}
.theme-swatch.active{
    border-color:var(--text-1);
    box-shadow:0 0 0 2px var(--bg-primary),0 0 0 4px var(--text-1);
}

.lang-pills{display:flex;gap:6px}
.lang-pill{
    flex:1;
    padding:8px;
    text-align:center;
    font-size:13px;font-weight:500;
    border-radius:10px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    color:var(--text-2);
    transition:all .15s;
}
.lang-pill:hover{background:var(--glass-bg-hover);color:var(--text-1)}
.lang-pill.active{
    background:var(--theme-accent);
    color:#fff;
    border-color:transparent;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.main-col{
    flex:1;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.main-content{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    padding:24px;
    scroll-behavior:smooth;
}
.main-content::-webkit-scrollbar{width:6px}
.main-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:3px}

/* ============================================================
   WELCOME
   ============================================================ */
.welcome{
    display:flex;flex-direction:column;align-items:center;
    justify-content:center;
    min-height:calc(100vh - 120px);
    text-align:center;
    padding:40px 20px;
    animation:pageIn .4s ease;
}
@keyframes pageIn{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:translateY(0)}
}
.welcome-icon{
    width:72px;height:72px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--theme-accent),var(--theme-accent-light));
    border-radius:20px;
    color:#fff;
    margin-bottom:20px;
    box-shadow:0 8px 30px var(--theme-glow);
}
.welcome h2{
    font-size:28px;font-weight:700;letter-spacing:-0.5px;
    margin-bottom:8px;
}
.welcome > p{
    color:var(--text-2);font-size:15px;max-width:400px;
    margin-bottom:24px;
}
.welcome-stats{
    display:flex;gap:12px;margin-bottom:36px;flex-wrap:wrap;justify-content:center;
}
.welcome-stat{
    padding:6px 16px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-pill);
    font-size:13px;color:var(--text-2);
}
.welcome-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
    max-width:680px;width:100%;
}
.welcome-links{
    display:flex;gap:16px;margin-top:20px;
}
.welcome-links a{
    font-size:12px;color:var(--text-3);text-decoration:none;
    transition:color .2s;
}
.welcome-links a:hover{color:var(--text-1)}
.welcome-card{
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-lg);
    padding:24px 16px;
    cursor:pointer;
    transition:all .25s;
    text-align:center;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    position:relative;overflow:hidden;
}
.welcome-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:var(--glass-top-line);
}
.welcome-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 40px rgba(0,0,0,0.15);
    background:var(--glass-bg-hover);
}
.welcome-card-icon{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;margin:0 auto 12px;
    background:linear-gradient(135deg,var(--theme-accent),var(--theme-accent-light));
    border-radius:12px;color:#fff;
}
.welcome-card-icon svg{width:20px;height:20px}
.welcome-card h4{font-size:14px;font-weight:600;margin-bottom:6px}
.welcome-card p{font-size:12px;color:var(--text-3);line-height:1.4}

/* ============================================================
   TOOL PAGE
   ============================================================ */
.tool-page{
    max-width:900px;
    margin:0 auto;
    animation:pageIn .35s ease;
}
.tool-page-header{
    margin-bottom:20px;
}
.tool-page-header h1{
    font-size:24px;font-weight:700;letter-spacing:-0.5px;
    margin-bottom:4px;
}
.tool-page-header p{
    color:var(--text-2);font-size:14px;
}

/* ============================================================
   GLASS PANEL (reusable)
   ============================================================ */
.glass-panel{
    background:var(--glass-bg);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-lg);
    position:relative;
    overflow:hidden;
}
.glass-panel::before{
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:var(--glass-top-line);
    z-index:1;
}
.glass-panel-thick{
    background:var(--glass-bg-thick);
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.field-row{
    display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
    margin-bottom:16px;
}
.field-group{
    display:flex;flex-direction:column;gap:4px;
}
.field-group.flex-1{flex:1;min-width:120px}
.field-label{
    font-size:12px;font-weight:500;color:var(--text-2);
    padding-left:2px;
}
.field-input,.field-select,.field-textarea{
    padding:8px 12px;
    background:rgba(255,255,255,0.05);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-sm);
    font-size:14px;
    color:var(--text-1);
    outline:none;
    transition:all .2s;
    min-width:0;
}
[data-appearance="light"] .field-input,
[data-appearance="light"] .field-select,
[data-appearance="light"] .field-textarea{
    background:rgba(0,0,0,0.03);
}
.field-input:focus,.field-select:focus,.field-textarea:focus{
    border-color:var(--theme-accent);
    box-shadow:0 0 0 3px var(--theme-glow);
}
.field-select{
    cursor:pointer;
    -webkit-appearance:none;
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 10px center;
    padding-right:30px;
}
.field-textarea{
    resize:vertical;min-height:80px;line-height:1.6;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:8px 20px;
    border-radius:var(--radius-pill);
    font-size:14px;font-weight:500;
    transition:all .2s;
    white-space:nowrap;
    border:none;cursor:pointer;
}
.btn-primary{
    background:var(--theme-accent);
    color:#fff;
    box-shadow:0 2px 12px var(--theme-glow);
}
.btn-primary:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 20px var(--theme-glow);
    filter:brightness(1.1);
}
.btn-glass{
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    color:var(--text-2);
}
.btn-glass:hover{
    background:var(--glass-bg-hover);
    color:var(--text-1);
}
.btn-sm{padding:6px 14px;font-size:12px}
.btn-lg{padding:12px 28px;font-size:16px}

/* ============================================================
   RESULT CARDS
   ============================================================ */
.result-grid{
    display:grid;gap:12px;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    margin-top:16px;
}
.result-card{
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-md);
    padding:16px;
    position:relative;overflow:hidden;
}
.result-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:var(--glass-top-line);
}
.result-card .rc-label{
    font-size:11px;font-weight:500;color:var(--text-3);
    text-transform:uppercase;letter-spacing:0.3px;
    margin-bottom:6px;
}
.result-card .rc-value{
    font-size:18px;font-weight:600;
    color:var(--text-1);
    word-break:break-all;
}
.result-card .rc-desc{
    font-size:12px;color:var(--text-2);margin-top:4px;
    line-height:1.5;
}

/* ============================================================
   DIVINATION SPECIFIC
   ============================================================ */
.divine-container{
    display:flex;flex-direction:column;align-items:center;
    text-align:center;padding:20px 0;
}
.divine-image{
    width:120px;height:120px;
    margin-bottom:20px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--theme-accent),var(--theme-accent-light));
    border-radius:50%;
    box-shadow:0 8px 40px var(--theme-glow);
    font-size:56px;
    animation:float 3s ease-in-out infinite;
}
@keyframes float{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-8px)}
}
.divine-prompt{
    font-size:16px;color:var(--text-2);margin-bottom:24px;
    max-width:400px;
}
.divine-result{
    width:100%;max-width:600px;
    text-align:left;
}
.divine-number{
    font-size:48px;font-weight:700;
    background:linear-gradient(135deg,var(--theme-accent),var(--theme-accent-light));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
    margin-bottom:8px;
    text-align:center;
}
.divine-rank{
    text-align:center;
    font-size:18px;font-weight:600;
    margin-bottom:16px;
    padding:6px 20px;
    display:inline-block;
    border-radius:var(--radius-pill);
}
.rank-shangshang{background:rgba(255,215,0,0.15);color:#FFD700}
.rank-shang{background:rgba(48,209,88,0.12);color:#30D158}
.rank-zhongji{background:rgba(0,122,255,0.12);color:#007AFF}
.rank-xia{background:rgba(255,159,10,0.12);color:#FF9F0A}
.rank-xiaxia{background:rgba(255,69,58,0.12);color:#FF453A}

.divine-poem{
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-md);
    padding:20px;
    margin-bottom:16px;
    font-size:16px;
    line-height:2;
    text-align:center;
    font-style:italic;
}
.divine-explain{
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-md);
    padding:20px;
    line-height:1.8;
    font-size:14px;
    color:var(--text-2);
}
.divine-explain h4{
    color:var(--text-1);font-size:15px;margin-bottom:8px;
}

/* ============================================================
   CALENDAR SPECIFIC
   ============================================================ */
.cal-header{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:16px;
}
.cal-nav{
    display:flex;align-items:center;gap:8px;
}
.cal-nav-btn{
    width:32px;height:32px;
    display:flex;align-items:center;justify-content:center;
    border-radius:8px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    color:var(--text-2);
    transition:all .15s;
    cursor:pointer;
}
.cal-nav-btn:hover{background:var(--glass-bg-hover);color:var(--text-1)}
.cal-title{
    font-size:18px;font-weight:600;
    min-width:160px;text-align:center;
}
.cal-grid{
    display:grid;grid-template-columns:repeat(7,1fr);gap:2px;
}
.cal-weekday{
    text-align:center;font-size:12px;font-weight:600;
    color:var(--text-3);padding:8px 0;
}
.cal-day{
    aspect-ratio:1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    border-radius:var(--radius-sm);
    cursor:pointer;
    transition:all .15s;
    font-size:14px;
    position:relative;
    gap:2px;
}
.cal-day:hover{background:var(--glass-bg-hover)}
.cal-day.today{
    background:var(--theme-accent);
    color:#fff;
    font-weight:600;
    box-shadow:0 2px 12px var(--theme-glow);
}
.cal-day.today .cal-lunar{color:rgba(255,255,255,0.8)}
.cal-day.selected{
    background:var(--glass-bg-thick);
    border:1px solid var(--theme-accent);
}
.cal-day.other-month{opacity:0.3}
.cal-day.weekend{color:var(--theme-accent)}
.cal-day.today.weekend{color:#fff}
.cal-day.holiday{color:var(--ios-green)}
.cal-lunar{
    font-size:9px;
    color:var(--text-3);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
}
.cal-day.jieqi .cal-lunar{color:var(--ios-green)}
.cal-detail{
    margin-top:16px;
}
.cal-detail-section{
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-md);
    padding:16px;
    margin-bottom:12px;
    position:relative;overflow:hidden;
}
.cal-detail-section::before{
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:var(--glass-top-line);
}
.cal-detail-title{
    font-size:12px;font-weight:600;color:var(--text-3);
    text-transform:uppercase;letter-spacing:0.3px;
    margin-bottom:8px;
}
.cal-info-grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
}
.cal-info-item{
    display:flex;gap:8px;align-items:baseline;
}
.cal-info-label{
    font-size:12px;color:var(--text-3);white-space:nowrap;min-width:56px;
}
.cal-info-value{
    font-size:13px;color:var(--text-1);
}
.cal-yi-ji{
    display:flex;gap:16px;margin-top:8px;
}
.cal-yi,.cal-ji{flex:1}
.cal-yi h5,.cal-ji h5{
    font-size:12px;margin-bottom:6px;
}
.cal-yi h5{color:#30D158}
.cal-ji h5{color:#FF453A}
.cal-yi-tags,.cal-ji-tags{
    display:flex;flex-wrap:wrap;gap:4px;
}
.cal-yi-tags span{
    font-size:11px;padding:2px 8px;border-radius:var(--radius-pill);
    background:rgba(48,209,88,0.1);color:#30D158;
}
.cal-ji-tags span{
    font-size:11px;padding:2px 8px;border-radius:var(--radius-pill);
    background:rgba(255,69,58,0.1);color:#FF453A;
}

/* ============================================================
   BAZI SPECIFIC
   ============================================================ */
.bazi-pillars{
    display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
    margin:16px 0;
}
.bazi-pillar{
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-md);
    padding:16px 12px;
    text-align:center;
    position:relative;overflow:hidden;
}
.bazi-pillar::before{
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:var(--glass-top-line);
}
.bazi-pillar-label{
    font-size:11px;font-weight:500;color:var(--text-3);
    margin-bottom:8px;
}
.bazi-gan{
    font-size:28px;font-weight:700;
    margin-bottom:4px;
}
.bazi-zhi{
    font-size:28px;font-weight:700;
    margin-bottom:6px;
}
.bazi-wuxing{
    font-size:11px;color:var(--text-2);
}
.bazi-nayin{
    font-size:11px;color:var(--text-3);margin-top:2px;
}

/* Wu Xing Colors */
.wx-jin{color:#C0C0C0}
.wx-mu{color:#30D158}
.wx-shui{color:#007AFF}
.wx-huo{color:#FF453A}
.wx-tu{color:#D4A017}

/* ============================================================
   SEGMENTED CONTROL
   ============================================================ */
.segmented{
    display:inline-flex;
    padding:3px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-sm);
    gap:2px;
}
.seg-btn{
    padding:6px 14px;
    font-size:13px;font-weight:500;
    border-radius:9px;
    color:var(--text-2);
    transition:all .15s;
    cursor:pointer;
    border:none;background:none;
}
.seg-btn:hover{color:var(--text-1)}
.seg-btn.active{
    background:var(--theme-accent);
    color:#fff;
    box-shadow:0 1px 4px var(--theme-glow);
}

/* ============================================================
   BADGES
   ============================================================ */
.badge{
    display:inline-block;
    padding:2px 10px;
    border-radius:var(--radius-pill);
    font-size:11px;font-weight:500;
}
.badge-ok{background:rgba(48,209,88,0.12);color:#30D158}
.badge-err{background:rgba(255,69,58,0.12);color:#FF453A}
.badge-info{background:rgba(0,122,255,0.12);color:#007AFF}
.badge-warn{background:rgba(255,159,10,0.12);color:#FF9F0A}
.badge-neutral{background:var(--glass-bg);color:var(--text-2)}

/* ============================================================
   TABLE
   ============================================================ */
.data-table{
    width:100%;border-collapse:collapse;
    font-size:13px;
}
.data-table th{
    text-align:left;
    padding:8px 12px;
    font-weight:600;font-size:12px;
    color:var(--text-3);
    border-bottom:1px solid var(--glass-border);
}
.data-table td{
    padding:8px 12px;
    border-bottom:1px solid rgba(255,255,255,0.04);
    color:var(--text-2);
}
[data-appearance="light"] .data-table td{
    border-bottom-color:rgba(0,0,0,0.04);
}
.data-table tr:hover td{
    background:var(--glass-bg);
}

/* ============================================================
   MOBILE TOGGLE
   ============================================================ */
.mobile-toggle{
    display:none;
    position:fixed;top:12px;left:12px;z-index:200;
    width:40px;height:40px;
    align-items:center;justify-content:center;
    background:var(--glass-bg-thick);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--glass-border);
    border-radius:12px;
    color:var(--text-1);
    box-shadow:0 2px 12px rgba(0,0,0,0.15);
}
.mobile-backdrop{
    position:fixed;inset:0;z-index:90;
    background:rgba(0,0,0,0.4);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    display:none;
    opacity:0;
    transition:opacity .25s;
    pointer-events:none;
}
.mobile-backdrop.active{
    opacity:1;
    pointer-events:auto;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:768px){
    .sidebar{
        position:fixed;left:0;top:0;bottom:0;
        transform:translateX(-100%);
        z-index:110;
    }
    .sidebar.open{transform:translateX(0)}
    .mobile-toggle{display:flex}
    .mobile-backdrop{display:block}
    .mobile-backdrop.active{display:block;opacity:1;pointer-events:auto}
    .main-content{padding:60px 16px 24px}
    .welcome-grid{grid-template-columns:1fr}
    .bazi-pillars{grid-template-columns:repeat(2,1fr)}
    .result-grid{grid-template-columns:1fr}
    .cal-info-grid{grid-template-columns:1fr}
    .cal-yi-ji{flex-direction:column}
    .field-row{flex-direction:column}
    .field-group.flex-1{width:100%}
}

/* ============================================================
   SCROLLBAR (light mode)
   ============================================================ */
[data-appearance="light"] .sidebar-nav::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,0.08);
}
[data-appearance="light"] .main-content::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,0.08);
}

/* ============================================================
   ANIMATION SHAKE (for dice/divination)
   ============================================================ */
@keyframes shake{
    0%,100%{transform:rotate(0)}
    25%{transform:rotate(-8deg)}
    75%{transform:rotate(8deg)}
}
.shake{animation:shake .4s ease 3}

/* ============================================================
   LOADING
   ============================================================ */
@keyframes spin{to{transform:rotate(360deg)}}
.loading{
    display:flex;align-items:center;justify-content:center;
    padding:40px;color:var(--text-3);
}
.loading::after{
    content:'';
    width:24px;height:24px;
    border:2px solid var(--glass-border);
    border-top-color:var(--theme-accent);
    border-radius:50%;
    animation:spin .6s linear infinite;
}