/* ============================================================
 *  ZONA — Life Dashboard & Gamification Ecosystem
 *  Modern, Premium, Mobile-First Design System
 * ============================================================ */

/* --- CSS Variables (Dark Theme Default) --- */
:root,
[data-theme="dark"] {
    --z-bg: #0f0f1a;
    --z-bg-elevated: #181830;
    --z-surface: #1e1e3a;
    --z-surface-hover: #28284a;
    --z-border: rgba(255,255,255,0.06);
    --z-text: #e8e8f0;
    --z-text-secondary: #a0a0c0;
    --z-text-muted: #6b6b88;
    --z-primary: #6366f1;
    --z-primary-glow: rgba(99,102,241,0.25);
    --z-success: #10b981;
    --z-warning: #f59e0b;
    --z-danger: #f43f5e;
    --z-info: #06b6d4;
    --z-gradient-1: linear-gradient(135deg, #6366f1, #8b5cf6);
    --z-gradient-2: linear-gradient(135deg, #f43f5e, #f59e0b);
    --z-gradient-3: linear-gradient(135deg, #10b981, #06b6d4);
    --z-gradient-hero: linear-gradient(135deg, #6366f1 0%, #8b5cf6 40%, #f43f5e 100%);
    --z-radius-sm: 8px;
    --z-radius: 12px;
    --z-radius-lg: 16px;
    --z-radius-xl: 20px;
    --z-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --z-shadow: 0 4px 16px rgba(0,0,0,0.3);
    --z-shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
    --z-transition: 0.2s ease;
    --z-sidebar-width: 240px;
    --z-bottom-nav-height: 64px;
    --z-topbar-height: 56px;
}

[data-theme="light"] {
    --z-bg: #f8f7ff;
    --z-bg-elevated: #ffffff;
    --z-surface: #ffffff;
    --z-surface-hover: #f3f0ff;
    --z-border: rgba(0,0,0,0.08);
    --z-text: #1a1a2e;
    --z-text-secondary: #555577;
    --z-text-muted: #9999bb;
    --z-primary: #6366f1;
    --z-primary-glow: rgba(99,102,241,0.15);
}

/* --- RESET & BASE --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{font-size:16px;-webkit-tap-highlight-color:transparent}

body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background:var(--z-bg);
    color:var(--z-text);
    line-height:1.6;
    min-height:100vh;
    min-height:100dvh;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,h5{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;line-height:1.3}
h1{font-size:clamp(1.75rem, 5vw, 2.5rem)}
h2{font-size:clamp(1.25rem, 3vw, 1.75rem)}
h3{font-size:1.1rem}
h4{font-size:1rem}

a{color:var(--z-primary);text-decoration:none}
a:hover{opacity:0.85}

img{max-width:100%;height:auto}

/* --- TEXT GRADIENT --- */
.text-gradient{background:var(--z-gradient-1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ============================================================
 *  LAYOUT — Desktop Sidebar + Main Content + Mobile Bottom Nav
 * ============================================================ */

/* Sidebar */
.z-sidebar{
    position:fixed;top:0;left:0;bottom:0;width:var(--z-sidebar-width);
    background:var(--z-bg-elevated);border-right:1px solid var(--z-border);
    display:flex;flex-direction:column;z-index:1000;
    padding:0;overflow-y:auto;
}

.z-sidebar-brand{padding:20px 20px 12px}
.z-logo{display:flex;align-items:center;gap:10px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.4rem;color:var(--z-text)}
.z-logo-icon{font-size:1.6rem}

.z-sidebar-nav{flex:1;padding:8px 12px;display:flex;flex-direction:column;gap:2px}
.z-sidebar-footer{padding:8px 12px 16px;display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--z-border);margin-top:8px}

.z-nav-item{
    display:flex;align-items:center;gap:12px;padding:10px 14px;
    border-radius:var(--z-radius);color:var(--z-text-secondary);
    font-size:0.9rem;font-weight:500;transition:all var(--z-transition);
    text-decoration:none;
}
.z-nav-item:hover{background:var(--z-surface-hover);color:var(--z-text)}
.z-nav-item.active{background:var(--z-primary);color:#fff;box-shadow:0 4px 12px var(--z-primary-glow)}
.z-nav-item i{font-size:1.2rem;width:22px;text-align:center}

/* Main Content Area */
.z-main{
    margin-left:var(--z-sidebar-width);
    min-height:100vh;min-height:100dvh;
    padding-bottom:calc(var(--z-bottom-nav-height) + 24px);
}

.z-topbar{
    position:sticky;top:0;z-index:500;
    display:flex;align-items:center;justify-content:space-between;
    padding:0 20px;height:var(--z-topbar-height);
    background:var(--z-bg);border-bottom:1px solid var(--z-border);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}

.z-topbar-start{display:flex;align-items:center;gap:12px}
.z-topbar-title{font-weight:700;font-size:1.1rem;font-family:'Plus Jakarta Sans',sans-serif}
.z-btn-icon{background:none;border:none;color:var(--z-text);font-size:1.4rem;cursor:pointer;padding:4px;display:none}
.z-level-chip{background:var(--z-primary-glow);color:var(--z-primary);padding:3px 10px;border-radius:20px;font-size:0.8rem;font-weight:700}

.z-content{padding:20px;max-width:1000px;margin:0 auto}

/* Bottom Nav (Mobile) */
.z-bottom-nav{
    display:none;
    position:fixed;bottom:0;left:0;right:0;height:var(--z-bottom-nav-height);
    background:var(--z-bg-elevated);border-top:1px solid var(--z-border);
    z-index:1000;padding:4px 8px;
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}

.z-bnav-item{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;flex:1;color:var(--z-text-muted);
    font-size:0.7rem;font-weight:500;text-decoration:none;transition:all var(--z-transition);
}
.z-bnav-item i{font-size:1.2rem}
.z-bnav-item.active{color:var(--z-primary)}
.z-bnav-item:hover{color:var(--z-text)}

/* ============================================================
 *  AUTH LAYOUT
 * ============================================================ */
.auth-layout{
    display:flex;align-items:center;justify-content:center;
    min-height:100vh;min-height:100dvh;
    padding:20px;
    background:var(--z-bg);
    background-image:radial-gradient(ellipse at 50% 0%, rgba(99,102,241,0.08) 0%, transparent 60%);
}

.auth-container{width:100%;max-width:440px}
.auth-card{background:var(--z-bg-elevated);border:1px solid var(--z-border);border-radius:var(--z-radius-xl);padding:32px 28px;box-shadow:var(--z-shadow-lg)}

.auth-header{text-align:center;margin-bottom:28px}
.auth-logo{font-size:2rem;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;margin-bottom:8px}
.auth-header h2{margin-bottom:4px}
.auth-header p{color:var(--z-text-muted);font-size:0.9rem;margin:0}

.auth-form{display:flex;flex-direction:column;gap:16px}

.z-form-group{display:flex;flex-direction:column;gap:6px}
.z-form-group label{font-size:0.85rem;font-weight:600;color:var(--z-text-secondary)}
.z-input{
    width:100%;padding:12px 14px;background:var(--z-surface);
    border:1px solid var(--z-border);border-radius:var(--z-radius);
    color:var(--z-text);font-size:0.95rem;font-family:'Inter',sans-serif;
    transition:border-color var(--z-transition);outline:none;
}
.z-input:focus{border-color:var(--z-primary);box-shadow:0 0 0 3px var(--z-primary-glow)}
.z-input-wrap{position:relative}
.z-input-wrap .z-input{padding-right:44px}
.z-pass-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--z-text-muted);cursor:pointer;font-size:1.2rem}

.auth-links{display:flex;justify-content:center;gap:8px;margin-top:20px;font-size:0.9rem}
.auth-links a{color:var(--z-text-secondary)}
.auth-links a:hover{color:var(--z-primary)}

/* ============================================================
 *  BUTTONS
 * ============================================================ */
.z-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:10px 20px;border-radius:var(--z-radius);font-weight:600;
    font-size:0.9rem;font-family:'Inter',sans-serif;cursor:pointer;
    border:1px solid transparent;transition:all var(--z-transition);
    text-decoration:none;white-space:nowrap;
}
.z-btn-primary{background:var(--z-gradient-1);color:#fff;box-shadow:0 4px 14px var(--z-primary-glow)}
.z-btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px var(--z-primary-glow);opacity:1}
.z-btn-outline{background:transparent;border-color:var(--z-border);color:var(--z-text)}
.z-btn-outline:hover{background:var(--z-surface-hover);opacity:1}
.z-btn-success{background:var(--z-success);color:#fff}
.z-btn-disabled{opacity:0.5;pointer-events:none}
.z-btn-sm{padding:6px 14px;font-size:0.8rem;border-radius:var(--z-radius-sm)}
.z-btn-lg{padding:14px 32px;font-size:1rem;border-radius:var(--z-radius-lg)}
.z-btn-block{display:flex;width:100%}

/* ============================================================
 *  ALERTS / TOASTS
 * ============================================================ */
.z-alert{
    padding:12px 16px;border-radius:var(--z-radius);margin-bottom:16px;
    font-size:0.9rem;font-weight:500;animation:fadeIn 0.3s ease;
}
.z-alert-success{background:rgba(16,185,129,0.15);color:var(--z-success);border:1px solid rgba(16,185,129,0.3)}
.z-alert-error{background:rgba(244,63,94,0.15);color:var(--z-danger);border:1px solid rgba(244,63,94,0.3)}

@keyframes fadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* ============================================================
 *  LANDING PAGE
 * ============================================================ */
.landing-wrapper{text-align:center;padding:0}
.landing-hero{padding:60px 20px 40px}
.landing-logo{font-size:2.5rem;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;margin-bottom:16px}
.landing-hero h1{margin-bottom:12px;line-height:1.2}
.landing-hero p{color:var(--z-text-secondary);max-width:500px;margin:0 auto 28px;font-size:1.05rem}
.landing-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.landing-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;padding:40px 20px;max-width:900px;margin:0 auto}
.landing-feature-card{background:var(--z-surface);padding:28px 24px;border-radius:var(--z-radius-lg);border:1px solid var(--z-border);text-align:left;transition:all var(--z-transition)}
.landing-feature-card:hover{transform:translateY(-4px);border-color:var(--z-primary);box-shadow:var(--z-shadow)}
.lf-icon{font-size:2rem;margin-bottom:12px}
.landing-feature-card h3{font-size:1.05rem;margin-bottom:6px}
.landing-feature-card p{color:var(--z-text-secondary);font-size:0.9rem;margin:0}

.landing-stats{display:flex;justify-content:center;gap:40px;padding:30px 20px;flex-wrap:wrap}
.stat-item{display:flex;flex-direction:column;align-items:center}
.stat-item strong{font-size:1.4rem;color:var(--z-primary)}
.stat-item span{font-size:0.85rem;color:var(--z-text-muted)}

.landing-bottom{padding:50px 20px 40px}
.landing-bottom h2{margin-bottom:8px}
.landing-bottom p{color:var(--z-text-muted);margin-bottom:24px}
.landing-footer{padding:20px;color:var(--z-text-muted);font-size:0.85rem}

/* ============================================================
 *  DASHBOARD
 * ============================================================ */

/* Hero */
.dash-hero{background:var(--z-surface);border-radius:var(--z-radius-xl);padding:28px;border:1px solid var(--z-border);margin-bottom:20px;position:relative;overflow:hidden}
.dash-hero::before{content:'';position:absolute;top:-50px;right:-50px;width:150px;height:150px;background:var(--z-gradient-1);border-radius:50%;opacity:0.08;filter:blur(40px)}
.dash-hero-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;position:relative;z-index:1}
.dash-greeting h2{margin:0;font-size:1.3rem}
.dash-sub{color:var(--z-text-muted);font-size:0.85rem;margin:4px 0 0}

/* Level Ring */
.dash-level-ring{
    width:80px;height:80px;border-radius:50%;
    background:conic-gradient(var(--z-primary) var(--pct,0%), var(--z-surface) var(--pct,0%));
    padding:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.dash-level-inner{
    width:72px;height:72px;border-radius:50%;
    background:var(--z-surface);display:flex;
    flex-direction:column;align-items:center;justify-content:center;
}
.dash-lv-num{font-size:1.5rem;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;line-height:1}
.dash-lv-label{font-size:0.65rem;color:var(--z-text-muted);text-transform:uppercase}
.dash-level-title{text-align:center;font-size:0.8rem;color:var(--z-primary);font-weight:600;margin-top:6px}

/* EXP Bar */
.dash-exp-bar-wrap{margin-top:16px;position:relative;z-index:1}
.dash-exp-info{display:flex;justify-content:space-between;font-size:0.78rem;color:var(--z-text-muted);margin-bottom:6px}
.dash-exp-bar{height:6px;background:var(--z-surface);border-radius:3px;overflow:hidden}
.dash-exp-fill{height:100%;background:var(--z-gradient-1);border-radius:3px;transition:width 0.8s ease}

/* Stats Row */
.dash-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.dash-stat-card{background:var(--z-surface);border:1px solid var(--z-border);border-radius:var(--z-radius);padding:14px 16px;display:flex;align-items:center;gap:12px}
.dsc-icon{font-size:1.5rem;flex-shrink:0}
.dsc-info{display:flex;flex-direction:column}
.dsc-val{font-weight:700;font-size:0.95rem;line-height:1.2}
.dsc-label{font-size:0.72rem;color:var(--z-text-muted)}

/* Check-in Card */
.dash-checkin{background:var(--z-surface);border:1px solid var(--z-border);border-radius:var(--z-radius-lg);padding:16px 20px;margin-bottom:20px}
.dash-checkin.checked{background:rgba(16,185,129,0.08);border-color:rgba(16,185,129,0.3)}
.dash-checkin-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dash-checkin-left{display:flex;align-items:center;gap:12px}
.dash-checkin-icon{font-size:1.4rem}
.dash-checkin-left strong{display:block;font-size:0.9rem}
.dash-checkin-left p{color:var(--z-text-muted);font-size:0.8rem;margin:0}

/* Section */
.dash-section{margin-bottom:24px}
.dash-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.dash-section-header h3{font-size:1rem;display:flex;align-items:center;gap:6px;margin:0}
.z-link{font-size:0.85rem;color:var(--z-primary);font-weight:500;text-decoration:none}

/* Quest List */
.dash-quest-list{display:flex;flex-direction:column;gap:8px}
.dash-quest-item{background:var(--z-surface);border:1px solid var(--z-border);border-radius:var(--z-radius);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:all var(--z-transition)}
.dash-quest-item.completed{background:rgba(16,185,129,0.05);border-color:rgba(16,185,129,0.2)}
.dash-quest-item.claimed{opacity:0.6}
.dqi-left{display:flex;align-items:flex-start;gap:10px;flex:1;min-width:0}
.dqi-icon{font-size:1.2rem;flex-shrink:0;margin-top:1px}
.dqi-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.dqi-title{font-weight:600;font-size:0.88rem}
.dqi-desc{font-size:0.78rem;color:var(--z-text-muted)}
.dqi-progress{display:flex;align-items:center;gap:8px}
.dqi-progress-bar{flex:1;height:4px;background:var(--z-surface);border-radius:2px;overflow:hidden;min-width:60px}
.dqi-progress-fill{height:100%;background:var(--z-success);border-radius:2px;transition:width 0.5s ease}
.dqi-count{font-size:0.75rem;color:var(--z-text-muted);white-space:nowrap}
.dqi-reward{font-size:0.78rem;color:var(--z-warning);white-space:nowrap}
.dqi-badge-claimed{font-size:1.1rem}

/* Book Scroll */
.dash-book-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.dash-book-scroll::-webkit-scrollbar{display:none}
.dash-book-card{flex-shrink:0;width:140px;background:var(--z-surface);border:1px solid var(--z-border);border-radius:var(--z-radius);padding:14px;text-decoration:none;color:var(--z-text);transition:all var(--z-transition)}
.dash-book-card:hover{border-color:var(--z-primary);transform:translateY(-2px)}
.dbc-cover{font-size:2.5rem;text-align:center;margin-bottom:8px}
.dbc-info{display:flex;flex-direction:column}
.dbc-title{font-weight:600;font-size:0.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dbc-author{font-size:0.75rem;color:var(--z-text-muted)}
.dbc-progress-bar{height:3px;background:var(--z-border);border-radius:2px;margin-top:6px;overflow:hidden}
.dbc-progress-fill{height:100%;background:var(--z-primary);border-radius:2px}

/* Skills Grid */
.dash-skills-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.dash-skill-item{background:var(--z-surface);border:1px solid var(--z-border);border-radius:var(--z-radius);padding:14px;display:flex;flex-direction:column;gap:8px}
.dsk-top{display:flex;align-items:center;gap:8px}
.dsk-color{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dsk-name{font-weight:600;font-size:0.85rem;flex:1}
.dsk-lv{font-size:0.75rem;color:var(--z-text-muted)}
.dsk-bar{height:4px;background:var(--z-surface);border-radius:2px;overflow:hidden}
.dsk-fill{height:100%;border-radius:2px;transition:width 0.6s ease}

/* Weekly Quest */
.dash-weekly-list{display:flex;flex-direction:column;gap:8px}
.dash-wq-item{display:flex;align-items:center;gap:12px;background:var(--z-surface);border:1px solid var(--z-border);border-radius:var(--z-radius);padding:12px 16px}
.dash-wq-item.completed{background:rgba(16,185,129,0.05)}
.dash-wq-icon{font-size:1.2rem}
.dash-wq-info{flex:1;min-width:0}
.dash-wq-title{font-weight:600;font-size:0.85rem}
.dash-wq-count{font-size:0.78rem;color:var(--z-text-muted);white-space:nowrap}

/* Timeline Mini */
.dash-timeline-mini{display:flex;flex-direction:column;gap:0}
.dtm-item{display:flex;gap:14px;padding:12px 0;position:relative}
.dtm-item:not(:last-child)::after{content:'';position:absolute;left:15px;top:36px;bottom:0;width:1px;background:var(--z-border)}
.dtm-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-size:0.8rem;position:relative;z-index:1}
.dtm-content{flex:1;min-width:0}
.dtm-header{display:flex;justify-content:space-between;gap:8px}
.dtm-title{font-weight:600;font-size:0.85rem}
.dtm-desc{font-size:0.8rem;color:var(--z-text-secondary);display:block}
.dtm-time{font-size:0.72rem;color:var(--z-text-muted);white-space:nowrap}

/* ============================================================
 *  BUKOIN / NOVEL
 * ============================================================ */
.genre-filter{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:20px;-webkit-overflow-scrolling:touch}
.genre-filter::-webkit-scrollbar{display:none}
.genre-chip{padding:6px 16px;border-radius:20px;font-size:0.82rem;font-weight:500;background:var(--z-surface);border:1px solid var(--z-border);color:var(--z-text-secondary);text-decoration:none;white-space:nowrap;transition:all var(--z-transition)}
.genre-chip.active,.genre-chip:hover{background:var(--z-primary);color:#fff;border-color:var(--z-primary)}

.novel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:14px}
.novel-card{background:var(--z-surface);border:1px solid var(--z-border);border-radius:var(--z-radius-lg);overflow:hidden;text-decoration:none;color:var(--z-text);transition:all var(--z-transition);display:block}
.novel-card:hover{border-color:var(--z-primary);transform:translateY(-2px);box-shadow:var(--z-shadow)}
.novel-cover{height:120px;display:flex;align-items:center;justify-content:center;font-size:3rem;background:var(--z-gradient-1);opacity:0.15}
.novel-card-body{padding:14px;display:flex;flex-direction:column;gap:4px}
.novel-card-title{font-weight:600;font-size:0.9rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.novel-card-author{font-size:0.78rem;color:var(--z-text-muted)}
.novel-card-synopsis{font-size:0.75rem;color:var(--z-text-secondary)}
.novel-card-meta{display:flex;justify-content:space-between;font-size:0.72rem;color:var(--z-text-muted);margin-top:4px}

/* Novel Detail */
.novel-detail-header{margin-bottom:24px}
.z-back-link{display:inline-flex;align-items:center;gap:6px;color:var(--z-text-muted);font-size:0.85rem;margin-bottom:16px;text-decoration:none}
.nd-hero{display:flex;gap:20px;background:var(--z-surface);border:1px solid var(--z-border);border-radius:var(--z-radius-xl);padding:24px}
.nd-cover{font-size:5rem;flex-shrink:0;width:120px;height:160px;display:flex;align-items:center;justify-content:center;background:var(--z-gradient-1);opacity:0.1;border-radius:var(--z-radius)}
.nd-info{flex:1}
.nd-info h2{margin-bottom:4px}
.nd-author{color:var(--z-text-secondary);font-size:0.9rem;margin-bottom:8px}
.nd-meta{display:flex;gap:16px;font-size:0.82rem;color:var(--z-text-muted);margin-bottom:12px;flex-wrap:wrap}
.nd-synopsis{font-size:0.9rem;color:var(--z-text-secondary);margin-bottom:16px;line-height:1.7}
.nd-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Chapter List */
.chapter-list{display:flex;flex-direction:column;gap:2px}
.chapter-item{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--z-surface);border-radius:var(--z-radius);text-decoration:none;color:var(--z-text);transition:all var(--z-transition);border:1px solid transparent}
.chapter-item:hover{background:var(--z-surface-hover);border-color:var(--z-border)}
.ch-num{font-weight:700;font-size:0.9rem;color:var(--z-primary);min-width:28px}
.ch-title{flex:1;font-size:0.9rem}
.ch-arrow{color:var(--z-text-muted)}

/* ============================================================
 *  READER
 * ============================================================ */
.reader-container{max-width:750px;margin:0 auto}
.reader-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--z-border);margin-bottom:24px;position:sticky;top:56px;background:var(--z-bg);z-index:100}
.reader-chapter-title{font-weight:600;font-size:0.9rem;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reader-content{padding:20px 0 32px}
.reader-novel-title{font-size:0.85rem;color:var(--z-text-muted);text-align:center;margin-bottom:8px}
.reader-chapter-heading{text-align:center;margin-bottom:32px}
.reader-chapter-heading h3{font-size:1.4rem}
.reader-body{font-size:1.05rem;line-height:2;color:var(--z-text);font-family:'Inter',Georgia,serif}
.reader-nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-top:1px solid var(--z-border)}
.reader-progress{font-size:0.85rem;color:var(--z-text-muted)}
.reader-stats{text-align:center;color:var(--z-text-muted);font-size:0.8rem;margin-top:16px}

/* ============================================================
 *  QUEST & HABIT
 * ============================================================ */
.habit-progress-summary{text-align:center;margin-bottom:20px}
.habit-circle{
    width:90px;height:90px;border-radius:50%;
    background:conic-gradient(var(--z-success) var(--pct,0%), var(--z-surface) var(--pct,0%));
    padding:4px;display:inline-flex;align-items:center;justify-content:center;
}
.habit-circle span{display:flex;align-items:center;justify-content:center;width:82px;height:82px;border-radius:50%;background:var(--z-surface);font-weight:700;font-size:1.2rem}
.habit-label{display:block;margin-top:8px;color:var(--z-text-secondary);font-size:0.9rem}

.habit-list{display:flex;flex-direction:column;gap:6px}
.habit-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--z-surface);border:1px solid var(--z-border);border-radius:var(--z-radius);cursor:pointer;font-family:'Inter',sans-serif;font-size:0.9rem;color:var(--z-text);transition:all var(--z-transition);text-align:left;width:100%}
.habit-item:hover{background:var(--z-surface-hover)}
.habit-item.done{opacity:0.5}
.habit-check{width:24px;height:24px;border-radius:6px;border:2px solid var(--z-border);display:flex;align-items:center;justify-content:center;font-size:0.8rem;flex-shrink:0;transition:all var(--z-transition)}
.habit-title{flex:1;font-weight:500}
.habit-reward{font-size:0.78rem;color:var(--z-warning);white-space:nowrap}

/* ============================================================
 *  GROWTH / LEVEL & SKILL
 * ============================================================ */
.growth-level-hero{display:flex;align-items:center;gap:24px;background:var(--z-surface);border:1px solid var(--z-border);border-radius:var(--z-radius-xl);padding:28px;margin-bottom:24px}
.glh-level-badge{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.glh-title{font-size:0.85rem;color:var(--z-primary);font-weight:600;margin-top:6px}
.glh-exp-info{flex:1}

.level-table{display:flex;flex-direction:column;gap:2px}
.level-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--z-surface);border-radius:var(--z-radius);font-size:0.85rem;transition:background var(--z-transition)}
.level-row.current{background:var(--z-primary-glow);border:1px solid var(--z-primary)}
.level-row.passed{opacity:0.5}
.lr-num{font-weight:700;width:28px;text-align:center}
.lr-title{flex:1;font-weight:500}
.lr-exp{color:var(--z-text-muted);font-size:0.78rem}
.lr-status{font-size:0.9rem}

.skill-tree{display:flex;flex-direction:column;gap:14px}
.skill-card{background:var(--z-surface);border:1px solid var(--z-border);border-radius:var(--z-radius-lg);padding:18px}
.sk-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.sk-icon{width:44px;height:44px;border-radius:var(--z-radius);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.sk-info{display:flex;flex-direction:column}
.sk-name{font-weight:700;font-size:0.95rem}
.sk-level{font-size:0.78rem;color:var(--z-text-muted)}
.sk-bar-wrap{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.sk-bar{flex:1;height:6px;background:var(--z-bg);border-radius:3px;overflow:hidden}
.sk-fill{height:100%;border-radius:3px;transition:width 0.6s ease}
.sk-exp-text{font-size:0.75rem;color:var(--z-text-muted);white-space:nowrap}
.sk-desc{font-size:0.82rem;color:var(--z-text-secondary);margin:0}

.exp-history{display:flex;flex-direction:column;gap:2px}
.exp-item{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--z-surface);border-radius:var(--z-radius);gap:12px}
.exp-item-left{display:flex;align-items:center;gap:10px}
.exp-amount{font-weight:700;font-size:0.9rem}
.exp-amount.positive{color:var(--z-success)}
.exp-source{font-size:0.78rem;color:var(--z-text-muted)}
.exp-item-right{text-align:right}
.exp-desc{font-size:0.8rem;color:var(--z-text-secondary);display:block}
.exp-time{font-size:0.72rem;color:var(--z-text-muted)}

/* ============================================================
 *  BADGE
 * ============================================================ */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.badge-card{position:relative;background:var(--z-surface);border:1px solid var(--z-border);border-radius:var(--z-radius-lg);padding:20px 14px;text-align:center;overflow:hidden;transition:all var(--z-transition)}
.badge-card.earned:hover{transform:translateY(-2px);box-shadow:var(--z-shadow)}
.badge-card.locked{opacity:0.4}
.badge-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin:0 auto 10px}
.badge-name{font-weight:700;font-size:0.85rem;display:block}
.badge-desc{font-size:0.72rem;color:var(--z-text-muted);display:block;margin-top:2px}
.badge-tier{display:inline-block;padding:2px 8px;border-radius:10px;font-size:0.68rem;font-weight:600;margin-top:6px;text-transform:uppercase}
.tier-bronze{background:rgba(205,127,50,0.2);color:#cd7f32}
.tier-silver{background:rgba(192,192,192,0.2);color:#c0c0c0}
.tier-gold{background:rgba(245,158,11,0.2);color:#f59e0b}
.tier-platinum{background:rgba(99,102,241,0.2);color:#6366f1}
.tier-diamond{background:rgba(6,182,212,0.2);color:#06b6d4}
.badge-locked-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.5rem;color:var(--z-text-muted);opacity:0.6}

/* ============================================================
 *  WALLET
 * ============================================================ */
.wallet-balance-card{position:relative;text-align:center;padding:36px 24px;background:var(--z-surface);border:1px solid var(--z-border);border-radius:var(--z-radius-xl);margin-bottom:24px;overflow:hidden}
.wbc-glow{position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:200px;height:200px;background:var(--z-gradient-1);border-radius:50%;opacity:0.06;filter:blur(40px)}
.wbc-label{font-size:0.85rem;color:var(--z-text-muted);display:block;margin-bottom:4px}
.wbc-amount{font-size:2.5rem;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;display:block;position:relative;z-index:1}
.wbc-stats{display:flex;justify-content:center;gap:24px;margin-top:12px;font-size:0.85rem;color:var(--z-text-secondary);position:relative;z-index:1}

.wallet-tx-list{display:flex;flex-direction:column;gap:8px}
.wallet-tx-item{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--z-surface);border-radius:var(--z-radius)}
.wtx-left{display:flex;flex-direction:column}
.wtx-amount{font-weight:700;font-size:0.9rem}
.wtx-amount.in{color:var(--z-success)}
.wtx-amount.out{color:var(--z-danger)}
.wtx-source{font-size:0.75rem;color:var(--z-text-muted)}
.wtx-right{text-align:right}
.wtx-desc{font-size:0.8rem;color:var(--z-text-secondary);display:block}
.wtx-time{font-size:0.72rem;color:var(--z-text-muted)}

/* ============================================================
 *  PROFILE
 * ============================================================ */
.profile-header-card{text-align:center;background:var(--z-surface);border:1px solid var(--z-border);border-radius:var(--z-radius-xl);padding:32px 24px;margin-bottom:24px}
.profile-avatar{width:80px;height:80px;border-radius:50%;background:var(--z-gradient-1);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:2rem;font-weight:800;color:#fff}
.profile-title h3{margin:0}
.profile-title span{font-size:0.85rem;color:var(--z-text-muted)}
.profile-badges-row{display:flex;justify-content:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.profile-badge-chip{background:var(--z-bg);padding:4px 12px;border-radius:20px;font-size:0.78rem;font-weight:500;border:1px solid var(--z-border)}
.profile-bio{color:var(--z-text-secondary);margin-top:12px;font-size:0.9rem}
.profile-form{display:flex;flex-direction:column;gap:16px}

.info-cards{display:flex;flex-direction:column;gap:8px}
.info-card{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--z-surface);border-radius:var(--z-radius)}
.info-label{font-size:0.85rem;color:var(--z-text-muted)}
.info-value{font-size:0.85rem;font-weight:600}

/* ============================================================
 *  SETTINGS
 * ============================================================ */
.theme-toggle-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.theme-option{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px;background:var(--z-surface);border:2px solid var(--z-border);border-radius:var(--z-radius-lg);cursor:pointer;transition:all var(--z-transition)}
.theme-option.active{border-color:var(--z-primary);background:var(--z-primary-glow)}
.theme-option input{display:none}
.theme-icon{font-size:2rem}

.toggle-list{display:flex;flex-direction:column;gap:4px}
.toggle-item{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--z-surface);border-radius:var(--z-radius);cursor:pointer}

/* ============================================================
 *  ONBOARDING
 * ============================================================ */
.onboarding-wrapper{max-width:500px;margin:0 auto}
.onboarding-header{text-align:center;margin-bottom:32px}
.onboarding-header h1{margin-bottom:8px}
.onboarding-header p{color:var(--z-text-muted);font-size:0.9rem}
.onb-step{margin-bottom:28px}
.onb-step h3{font-size:1.1rem;margin-bottom:4px}
.onb-sub{font-size:0.85rem;color:var(--z-text-muted);margin-bottom:16px}
.onb-chips{display:flex;flex-wrap:wrap;gap:10px}
.onb-chip{padding:10px 18px;border-radius:24px;background:var(--z-surface);border:1px solid var(--z-border);font-size:0.88rem;font-weight:500;cursor:pointer;transition:all var(--z-transition);display:inline-flex;align-items:center;gap:6px;user-select:none}
.onb-chip:has(input:checked){background:var(--z-primary);color:#fff;border-color:var(--z-primary)}
.onb-chip input{display:none}
.onb-select-group{margin-bottom:14px}
.onb-select-group label{font-size:0.85rem;font-weight:600;color:var(--z-text-secondary);display:block;margin-bottom:6px}
.onb-nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.onb-dots{display:flex;gap:8px}
.onb-dots .dot{width:8px;height:8px;border-radius:50%;background:var(--z-border);transition:background var(--z-transition)}
.onb-dots .dot.active{background:var(--z-primary);width:20px;border-radius:4px}

/* ============================================================
 *  EMPTY STATE
 * ============================================================ */
.z-empty{text-align:center;padding:32px 20px}
.z-empty-icon{font-size:3rem;display:block;margin-bottom:8px}
.z-empty p{color:var(--z-text-muted);font-size:0.9rem;margin:0}

/* ============================================================
 *  PAGE HEADER
 * ============================================================ */
.page-header{margin-bottom:20px}
.page-header h2{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.page-header p{color:var(--z-text-muted);font-size:0.9rem;margin:0}

/* Timeline Full */
.timeline-full{display:flex;flex-direction:column;gap:0}

/* ============================================================
 *  RESPONSIVE
 * ============================================================ */

/* Tablet & below */
@media (max-width: 1024px) {
    .z-sidebar{display:none}
    .z-main{margin-left:0}
    .z-bottom-nav{display:flex}
    .z-btn-icon{display:block}
    .dash-stats-row{grid-template-columns:repeat(2,1fr)}
    .dash-skills-grid{grid-template-columns:1fr}
    .nd-hero{flex-direction:column;text-align:center}
    .nd-cover{margin:0 auto}
    .nd-actions{justify-content:center}
    .growth-level-hero{flex-direction:column;text-align:center}
    .novel-grid{grid-template-columns:repeat(2,1fr)}
}

/* Mobile */
@media (max-width: 640px) {
    .z-content{padding:16px}
    .dash-stats-row{grid-template-columns:repeat(2,1fr);gap:8px}
    .dash-stat-card{padding:12px;gap:8px}
    .dash-hero{padding:20px}
    .dash-hero-inner{flex-direction:column;align-items:center;text-align:center}
    .dash-checkin-inner{flex-direction:column;text-align:center}
    .dash-quest-item{flex-direction:column;align-items:flex-start}
    .dqi-right{align-self:flex-end}
    .novel-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .badge-grid{grid-template-columns:repeat(2,1fr)}
    .reader-content{padding:12px 0}
    .reader-body{font-size:1rem}
    .auth-card{padding:24px 18px}
    .landing-features{grid-template-columns:1fr}
    .wallet-balance-card{padding:24px 16px}
    .wbc-amount{font-size:2rem}
}

/* Small phones */
@media (max-width: 380px) {
    .dash-stats-row{grid-template-columns:1fr}
    .novel-grid{grid-template-columns:1fr}
    .badge-grid{grid-template-columns:1fr}
}