/* ========== Reset & Base ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink-deep:#0A1628;--ink-dark:#0D1B2A;--ink-mid:#1B2A3E;--ink-light:#243447;
  --gold:#C9B896;--gold-light:#D4C9A8;--gold-dim:#8A7E62;
  --vermilion:#8B1A1A;--vermilion-light:#A52A2A;
  --silver:#A0B0C0;--silver-light:#C0CDD9;--silver-dim:#6B7B8B;
  --paper:#F5F0E6;--paper-warm:#EDE4D0;--paper-dark:#E0D5C0;
  --jade:#5B8C6F;--jade-light:#7AAB8E;
  --bronze:#8B6F3F;
  --bg:var(--paper);--bg-card:#FFFFFF;--bg-soft:var(--paper-warm);
  --text:var(--ink-deep);--text2:#5A6A7A;--text3:#8A9AAA;
  --accent:var(--ink-dark);--accent-light:rgba(13,27,42,0.06);
  --green:var(--jade);--orange:#C8893E;--red:var(--vermilion);--purple:#6B4E8C;--blue:#4A90D9;
  --gold-accent:var(--gold);
  --border:rgba(13,27,42,0.1);--border-strong:rgba(13,27,42,0.18);
  --shadow-sm:0 1px 3px rgba(10,22,40,0.08);
  --shadow-md:0 4px 16px rgba(10,22,40,0.1);
  --shadow-lg:0 8px 32px rgba(10,22,40,0.12);
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;
  --font-serif:'Noto Serif SC','Songti SC','SimSun',serif;
  --font-sans:'PingFang SC','Noto Sans SC','Microsoft YaHei',-apple-system,sans-serif;
  --font-mono:'SF Mono','Menlo','Consolas',monospace;
  --sidebar-w:260px;--header-h:64px;
}

html,body{height:100%;overflow:hidden;font-family:var(--font-sans);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
body{display:flex}

/* ========== App Shell (Desktop) ========== */
.app-shell{display:flex;width:100%;height:100vh}

/* ====== Sidebar ====== */
.sidebar{
  width:var(--sidebar-w);min-width:var(--sidebar-w);
  background:linear-gradient(180deg,var(--ink-deep) 0%,var(--ink-dark) 60%,#0a1220 100%);
  color:var(--gold-light);
  display:flex;flex-direction:column;
  flex-shrink:0;position:relative;z-index:50;
  border-right:1px solid rgba(201,184,150,0.1);
}
.sidebar::before{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,184,150,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 0% 80%, rgba(139,26,26,0.03) 0%, transparent 40%);
  pointer-events:none;
}
.sidebar>*{position:relative;z-index:1}

.sidebar-header{
  padding:28px 24px 20px;border-bottom:1px solid rgba(255,255,255,0.06);
  display:flex;align-items:center;gap:14px;
}
.sidebar-logo{
  width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--gold),var(--gold-dim));
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;color:var(--ink-deep);
  font-family:var(--font-serif);flex-shrink:0;
  box-shadow:0 2px 12px rgba(201,184,150,0.25);
}
.sidebar-brand{flex:1;min-width:0}
.sidebar-brand h1{
  font-family:var(--font-serif);font-size:18px;font-weight:700;color:var(--gold);letter-spacing:0.04em;line-height:1.2;white-space:nowrap
}
.sidebar-brand p{font-size:11px;color:var(--silver-dim);margin-top:2px;letter-spacing:0.12em;white-space:nowrap}
/* 返回庚戌堂首页入口 */
.sidebar-top-actions{
  display:flex;align-items:center;gap:8px;
  padding:12px 24px 6px;border-bottom:1px solid rgba(255,255,255,0.04)
}
.gxt-back{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:1;padding:7px 10px;border-radius:8px;border:1px solid rgba(201,184,150,.25);color:var(--gold-light);font-size:11px;letter-spacing:.12em;font-family:var(--font-serif);text-decoration:none;transition:all .2s;cursor:pointer;white-space:nowrap}
.gxt-back:hover{background:rgba(201,184,150,.12);color:var(--gold);border-color:rgba(201,184,150,.45)}

/* Sidebar Navigation */
.sidebar-nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.sidebar-nav::-webkit-scrollbar{width:3px}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(201,184,150,0.15);border-radius:3px}

.nav-item{
  display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-md);
  color:var(--silver-light);font-size:14px;font-weight:500;cursor:pointer;
  transition:all .2s ease;text-decoration:none;border:none;background:none;width:100%;
  font-family:var(--font-sans);letter-spacing:0.01em;
}
.nav-item:hover{background:rgba(201,184,150,0.08);color:var(--gold)}
.nav-item.active{
  background:rgba(201,184,150,0.12);color:var(--gold);font-weight:600;
  box-shadow:inset 3px 0 0 var(--gold);
}
.nav-item .nav-icon{font-size:20px;width:24px;text-align:center;flex-shrink:0}
.nav-item .nav-badge{
  margin-left:auto;min-width:20px;height:20px;padding:0 6px;
  background:var(--vermilion);color:#fff;border-radius:10px;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.nav-item .nav-badge.hidden{display:none}

.nav-divider{height:1px;background:rgba(255,255,255,0.06);margin:8px 16px}

/* Sidebar User Section */
.sidebar-user{
  padding:16px 20px;border-top:1px solid rgba(255,255,255,0.06);
  background:rgba(0,0,0,0.15);
}
.sidebar-user-info{display:flex;align-items:center;gap:12px}
.sidebar-avatar{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--ink-mid),var(--ink-light));
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--gold);font-family:var(--font-serif);font-weight:600;
  border:2px solid rgba(201,184,150,0.25);flex-shrink:0;cursor:pointer;overflow:hidden
}
.sidebar-user-meta{flex:1;min-width:0}
.sidebar-user-name{
  font-size:14px;font-weight:600;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer
}
.sidebar-user-level{
  font-size:11px;color:var(--silver-dim);margin-top:1px;display:flex;align-items:center;gap:6px
}
.sidebar-user-level .level-dot{
  width:6px;height:6px;border-radius:50%;background:var(--jade);display:inline-block
}

/* ====== Main Area ====== */
.main-area{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--bg)}
.main-bg{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(201,184,150,0.05) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 100%, rgba(139,26,26,0.03) 0%, transparent 40%);
  pointer-events:none;z-index:0
}

/* Top Header */
.top-header{
  height:var(--header-h);min-height:var(--header-h);
  background:rgba(245,240,230,0.85);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 28px;gap:16px;
  flex-shrink:0;z-index:10;position:relative
}
.header-title{
  font-family:var(--font-serif);font-size:18px;font-weight:700;color:var(--ink-deep);
  white-space:nowrap
}
.header-breadcrumb{
  display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text2)
}
.header-breadcrumb span.sep{color:var(--text3)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.header-search{
  display:flex;align-items:center;gap:8px;padding:7px 14px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);
  min-width:200px;transition:all .2s
}
.header-search:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,184,150,0.1)}
.header-search input{
  border:none;background:none;outline:none;font-size:13px;color:var(--text);
  font-family:var(--font-sans);width:100%
}
.header-search input::placeholder{color:var(--text3)}
.header-search-icon{color:var(--text3);font-size:14px;cursor:pointer}
.header-avatar-btn{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--ink-dark),var(--ink-mid));
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--gold);cursor:pointer;
  border:2px solid var(--gold-dim);position:relative;overflow:hidden
}

/* Content Area */
.content-area{
  flex:1;overflow-y:auto;overflow-x:hidden;padding:28px 32px;
  position:relative;z-index:1
}
.content-area::-webkit-scrollbar{width:6px}
.content-area::-webkit-scrollbar-thumb{background:rgba(13,27,42,0.12);border-radius:3px}
.content-area::-webkit-scrollbar-thumb:hover{background:rgba(13,27,40,0.2)}

/* Page system for desktop */
.page-desktop{display:none}
.page-desktop.active{display:block;animation:pageIn .25s ease}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ========== Typography ========== */
h1{font-family:var(--font-serif);font-size:28px;font-weight:700;letter-spacing:0.02em;line-height:1.2}
h2{font-family:var(--font-serif);font-size:22px;font-weight:600;letter-spacing:0.01em;line-height:1.3}
h3{font-size:16px;font-weight:600;line-height:1.4}
.section-title{font-size:13px;font-weight:600;color:var(--text2);letter-spacing:0.06em;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.section-title::before{content:'';width:3px;height:16px;background:linear-gradient(to bottom, var(--gold), var(--jade));border-radius:2px}

/* ========== Components ========== */
.card{
  background:var(--bg-card);border-radius:var(--radius-lg);
  padding:20px 24px;box-shadow:var(--shadow-sm);
  margin-bottom:16px;border:1px solid var(--border);
  transition:all .2s ease
}
.card:hover{box-shadow:var(--shadow-md)}
.card-accent{border-left:3px solid var(--gold)}
.card-flat{box-shadow:none;border-color:var(--border)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 22px;border-radius:var(--radius-md);font-size:14px;font-weight:600;
  border:none;cursor:pointer;transition:all .2s ease;
  font-family:var(--font-sans);white-space:nowrap;letter-spacing:0.01em
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--ink-dark);color:var(--gold)}
.btn-primary:hover{background:var(--ink-mid)}
.btn-secondary{background:var(--bg-soft);color:var(--ink-dark);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--ink-deep);background:rgba(13,27,42,0.04)}
.btn-outline{background:transparent;color:var(--ink-dark);border:1.5px solid var(--ink-deep)}
.btn-outline:hover{background:rgba(13,27,42,0.04)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-dim));color:var(--ink-dark)}
.btn-danger{background:var(--vermilion);color:#fff}
.btn-lg{padding:14px 30px;font-size:16px;border-radius:var(--radius-lg)}
.btn-sm{padding:7px 16px;font-size:13px;border-radius:var(--radius-sm)}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}

/* Modal */
.modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,22,40,0.55);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px;backdrop-filter:blur(4px)}
.modal.hidden{display:none}
.modal-card{background:var(--bg-card);border-radius:var(--radius-lg);width:100%;max-width:560px;max-height:85vh;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--border);display:flex;flex-direction:column}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border)}
.modal-close{width:32px;height:32px;border-radius:50%;border:none;background:var(--bg-soft);color:var(--text2);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:var(--border)}
.modal-body{padding:20px 22px;overflow-y:auto;font-size:14px;line-height:1.7;color:var(--text)}
.code-block{background:var(--ink-deep);color:#d4c9a8;padding:16px;border-radius:var(--radius-md);font-family:var(--font-mono);font-size:12px;line-height:1.6;overflow-x:auto;white-space:pre-wrap;word-break:break-all}

.tag{display:inline-flex;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:600;letter-spacing:0.02em}
.tag-blue{background:rgba(13,27,42,0.07);color:var(--ink-dark)}
.tag-green{background:rgba(91,140,111,0.11);color:var(--jade)}
.tag-orange{background:rgba(200,137,62,0.11);color:var(--orange)}
.tag-red{background:rgba(139,26,26,0.09);color:var(--vermilion)}
.tag-gold{background:rgba(201,184,150,0.18);color:var(--bronze)}
.tag-purple{background:rgba(107,78,140,0.09);color:var(--purple)}

.form-input{width:100%;padding:11px 16px;border-radius:var(--radius-md);border:1.5px solid var(--border);font-size:14px;font-family:var(--font-sans);outline:none;background:var(--bg-card);transition:border-color .2s,color .2s}
.form-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,184,150,0.1)}
.form-label{font-size:13px;font-weight:600;color:var(--text2);display:block;margin-bottom:6px}
.form-select{padding:10px 14px;border-radius:var(--radius-md);border:1.5px solid var(--border);font-size:14px;background:var(--bg-card);color:var(--text);outline:none;min-width:120px;cursor:pointer}
.form-select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,184,150,0.1)}
/* ========== LOGIN OVERLAY ========== */
.login-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--paper) 0%,var(--paper-warm) 50%,#e8dcc8 100%);
  background-image:
    radial-gradient(circle at 30% 20%, rgba(201,184,150,0.1) 0%, transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(139,26,26,0.05) 0%, transparent 40%),
    linear-gradient(135deg,var(--paper) 0%,var(--paper-warm) 50%,#e8dcc8 100%)
}
.login-card{
  width:460px;background:var(--bg-card);border-radius:var(--radius-xl);
  padding:40px 36px;box-shadow:var(--shadow-lg);border:1px solid rgba(201,184,150,0.2);
  text-align:center;position:relative;overflow:hidden
}
.login-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--ink-deep),var(--gold),var(--vermilion))
}
.login-logo{width:72px;height:72px;margin:0 auto 16px;border-radius:18px;background:linear-gradient(135deg,var(--ink-dark),var(--ink-mid));display:flex;align-items:center;justify-content:center;font-size:32px;color:var(--gold);font-weight:700;font-family:var(--font-serif);border:3px solid var(--gold-dim);box-shadow:0 4px 20px rgba(201,184,150,0.2)}
.login-card h2{font-family:var(--font-serif);margin-bottom:4px}
.login-card .login-subtitle{font-size:13px;color:var(--text2);letter-spacing:0.15em;margin-bottom:28px}
.login-form{width:100%;max-width:360px;margin:0 auto;text-align:left}
.account-list{display:flex;flex-direction:column;gap:10px;margin-top:16px;max-height:220px;overflow-y:auto;padding-right:4px}
.account-list::-webkit-scrollbar{width:4px}
.account-list::-webkit-scrollbar-thumb{background:rgba(13,27,42,0.15);border-radius:2px}
.account-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-md);border:1px solid var(--border);cursor:pointer;transition:all .15s;background:var(--bg-card)}
.account-item:hover{border-color:var(--gold);background:rgba(201,184,150,0.05)}
.account-item .acc-avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--ink-mid),var(--ink-light));display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--gold);font-family:var(--font-serif);font-weight:600}
.account-item .acc-info{flex:1;text-align:left}
.account-item .acc-name{font-size:14px;font-weight:600;color:var(--ink-deep)}
.account-item .acc-meta{font-size:11px;color:var(--text2);margin-top:1px}
.account-item .acc-del{width:28px;height:28px;border-radius:50%;border:none;background:transparent;color:var(--text3);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center}
.account-item .acc-del:hover{background:rgba(139,26,26,0.08);color:var(--vermilion)}

/* ========== DASHBOARD HOME ========== */
.welcome-banner{
  display:flex;align-items:center;gap:20px;padding:24px 28px;
  background:linear-gradient(135deg, rgba(13,27,42,0.94) 0%, #0f1f33 50%, #132238 100%);
  border-radius:var(--radius-xl);border:1px solid rgba(201,184,150,0.15);
  color:var(--gold-light);margin-bottom:24px;position:relative;overflow:hidden
}
.welcome-banner::before{
  content:'';position:absolute;top:-30%;right:-10%;width:250px;height:250px;
  background:radial-gradient(circle, rgba(201,184,150,0.06) 0%, transparent 70%);
  pointer-events:none
}
.welcome-banner>*{position:relative;z-index:1}
.welcome-avatar-lg{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--ink-mid),var(--ink-light));
  display:flex;align-items:center;justify-content:center;
  font-size:28px;color:var(--gold);font-family:var(--font-serif);
  font-weight:700;flex-shrink:0;border:2px solid rgba(201,184,150,0.3);overflow:hidden
}
.welcome-text{flex:1}
.welcome-greeting{font-size:14px;color:var(--silver-light);margin-bottom:2px}
.welcome-name{font-size:22px;font-family:var(--font-serif);font-weight:700;color:var(--gold);cursor:pointer}
.welcome-level-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.welcome-level-tag{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(201,184,150,0.12);color:var(--bronze);
  padding:3px 12px;border-radius:20px;font-size:12px;font-weight:600
}
.welcome-exp{flex:1;max-width:220px}
.exp-bar-lg{height:8px;background:rgba(255,255,255,0.08);border-radius:4px;overflow:hidden}
.exp-bar-fill-lg{height:100%;background:linear-gradient(90deg,var(--jade),var(--gold));border-radius:4px;transition:width .5s ease}
.welcome-exp-label{font-size:11px;color:var(--silver-dim);margin-top:4px;text-align:right}
.welcome-stats-col{text-align:right}
.welcome-score-val{font-size:28px;font-weight:700;color:var(--gold);font-family:var(--font-serif);line-height:1}
.welcome-score-lbl{font-size:11px;color:var(--silver-dim)}
.welcome-perm{display:inline-block;font-size:11px;font-weight:600;padding:2px 10px;border-radius:10px;margin-top:4px}

.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat-card{
  background:var(--bg-card);border-radius:var(--radius-lg);padding:20px;
  border:1px solid var(--border);text-align:center;
  transition:all .2s ease;position:relative;overflow:hidden
}
.stat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  opacity:0;transition:opacity .2s
}
.stat-card:nth-child(1)::before{background:var(--ink-deep)}
.stat-card:nth-child(2)::before{background:var(--jade)}
.stat-card:nth-child(3)::before{background:var(--orange)}
.stat-card:nth-child(4)::before{background:var(--purple)}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat-card:hover::before{opacity:1}
.stat-icon{font-size:28px;margin-bottom:8px}
.stat-value{font-size:30px;font-weight:700;color:var(--ink-deep);font-family:var(--font-serif);line-height:1.2}
.stat-label{font-size:12px;color:var(--text2);margin-top:4px}

.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.quick-card{
  background:var(--bg-card);border-radius:var(--radius-lg);padding:24px 16px;
  border:1px solid var(--border);cursor:pointer;text-align:center;
  transition:all .2s ease;position:relative
}
.quick-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:rgba(201,184,150,0.3)}
.qc-icon{font-size:36px;margin-bottom:10px;display:block}
.qc-title{font-size:15px;font-weight:600;font-family:var(--font-serif);color:var(--ink-deep)}
.qc-desc{font-size:12px;color:var(--text2);margin-top:4px}
.qc-badge{
  position:absolute;top:10px;right:10px;min-width:20px;height:20px;padding:0 6px;
  background:var(--vermilion);color:#fff;border-radius:10px;font-size:11px;font-weight:700
}
.qc-badge.hidden{display:none}

.dashboard-split{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;margin-bottom:24px}

.recommend-banner{
  padding:24px 28px;background:linear-gradient(135deg, rgba(201,184,150,0.08), rgba(139,26,26,0.03));
  border-radius:var(--radius-xl);border:1px solid rgba(201,184,150,0.2);
  cursor:pointer;transition:all .2s;position:relative;overflow:hidden
}
.recommend-banner:hover{border-color:rgba(201,184,150,0.35);transform:translateY(-1px)}
.rec-badge{font-size:12px;font-weight:700;color:var(--bronze);letter-spacing:0.1em;text-transform:uppercase}
.rec-main{font-size:20px;font-weight:700;font-family:var(--font-serif);margin-top:6px;color:var(--ink-deep)}
.rec-sub{font-size:14px;color:var(--text2);margin-top:4px}
.rec-arrow{float:right;font-size:20px;color:var(--gold-dim);margin-top:2px}

.section-grid-wide{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.section-card-wide{
  background:var(--bg-card);border-radius:var(--radius-lg);padding:18px 20px;
  border:1px solid var(--border);cursor:pointer;transition:all .2s;
  display:flex;align-items:center;gap:16px;position:relative
}
.section-card-wide:hover{border-color:rgba(201,184,150,0.35);box-shadow:var(--shadow-md);transform:translateX(3px)}
.scw-icon{font-size:32px;flex-shrink:0;width:48px;text-align:center}
.scw-body{flex:1;min-width:0}
.scw-name{font-size:15px;font-weight:600;font-family:var(--font-serif);color:var(--ink-deep)}
.scw-count{font-size:12px;color:var(--text2);margin-top:2px}
.scw-tags{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.diff-tag{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600}
.diff-tag.easy{background:rgba(91,140,111,0.11);color:var(--jade)}
.diff-tag.normal{background:rgba(74,144,217,0.11);color:var(--blue)}
.diff-tag.hard{background:rgba(200,137,62,0.12);color:var(--orange)}
.diff-tag.extreme{background:rgba(107,78,140,0.09);color:var(--purple)}
.diff-tag.heaven{background:rgba(139,26,26,0.08);color:var(--vermilion)}
.section-card-wide.locked{opacity:.4;pointer-events:none}
.section-card-wide.locked::after{content:'🔒';position:absolute;top:14px;right:14px;font-size:14px}

.streak-card{
  background:linear-gradient(135deg,#0d1b2a,#162940);border-radius:var(--radius-lg);
  padding:20px 24px;color:var(--gold-light);position:relative;overflow:hidden
}
.streak-card::after{
  content:'';position:absolute;bottom:-20px;right:-20px;
  width:100px;height:100px;background:radial-gradient(circle, rgba(201,184,150,0.06),transparent)
}
.streak-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;position:relative}
.streak-title{font-size:14px;font-weight:600;color:var(--gold)}
.streak-days{font-size:32px;font-weight:700;font-family:var(--font-serif);color:var(--gold)}
.streak-unit{font-size:13px;color:var(--silver-dim);margin-left:4px}
.streak-info{font-size:12px;color:var(--silver-dim);position:relative}

/* ========== QUIZ PAGE ========== */
.quiz-layout{max-width:800px;margin:0 auto}
.quiz-modes{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:20px}
.quiz-mode-card{
  background:var(--bg-card);border-radius:var(--radius-xl);padding:32px 24px;
  border:2px solid var(--border);cursor:pointer;text-align:center;
  transition:all .2s ease;position:relative
}
.quiz-mode-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.quiz-mode-card .mode-icon{font-size:42px;margin-bottom:12px;display:block}
.quiz-mode-card .mode-title{font-size:18px;font-weight:700;font-family:var(--font-serif);margin-bottom:6px}
.quiz-mode-card .mode-desc{font-size:13px;color:var(--text2)}
.quiz-mode-card.practice{background:linear-gradient(135deg,#EEF8F0,#D8EEDB);border-color:var(--green)}
.quiz-mode-card.exam{background:linear-gradient(135deg,#EDF6FA,#D6EAF0);border-color:var(--blue)}
.quiz-mode-card.promo{background:linear-gradient(135deg,#F5EDFA,#E8D9F2);border-color:var(--purple)}
.quiz-mode-card.wrong{background:linear-gradient(135deg,#FCEFEF,#F5DCDC);border-color:var(--red)}
.quiz-mode-card.practice .mode-icon{color:var(--green)}
.quiz-mode-card.exam .mode-icon{color:var(--blue)}
.quiz-mode-card.promo .mode-icon{color:var(--purple)}
.quiz-mode-card.wrong .mode-icon{color:var(--red)}

.section-accuracy-panel{background:var(--bg-card);border-radius:var(--radius-xl);padding:20px;border:1px solid var(--border);margin-top:24px}
.sa-item{margin-bottom:14px}
.sa-item:last-child{margin-bottom:0}
.sa-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:14px}
.sa-name{font-weight:600;color:var(--text1)}
.sa-val{font-weight:600;color:var(--ink-dark);font-variant-numeric:tabular-nums}
.sa-bar{height:8px;background:var(--border);border-radius:4px;overflow:hidden}
.sa-fill{height:100%;background:linear-gradient(90deg,var(--jade),var(--ink-dark));border-radius:4px;transition:width .3s}

.quiz-active-panel{max-width:760px;margin:0 auto}
.quiz-top-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 0;margin-bottom:16px}
.quiz-progress-text{font-size:14px;font-weight:600;color:var(--text2)}
.quiz-timer{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-dark);font-family:var(--font-mono)}
.quiz-timer.warning{color:var(--orange)}
.quiz-timer.danger{color:var(--vermilion)}
.progress-bar{height:5px;background:var(--border);border-radius:3px;margin-bottom:24px;overflow:hidden}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--ink-dark),var(--jade));border-radius:3px;transition:width .3s}
.question-card{background:var(--bg-card);border-radius:var(--radius-xl);padding:28px 32px;border:1px solid var(--border);margin-bottom:20px;box-shadow:var(--shadow-md)}
.question-number{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:10px;text-transform:uppercase;letter-spacing:0.05em}
.question-text{font-size:18px;font-weight:700;line-height:1.7;margin-bottom:24px;font-family:var(--font-serif)}
.options-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.option-item{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--radius-md);border:1.5px solid var(--border);cursor:pointer;transition:all .2s;background:var(--bg-card);font-size:15px;font-weight:500}
.option-item:hover{border-color:var(--gold);background:rgba(201,184,150,0.03)}
.option-item .option-letter{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;border:2px solid var(--border);flex-shrink:0;transition:all .2s}
.option-item.correct{border-color:var(--jade);background:rgba(91,140,111,0.05)}
.option-item.correct .option-letter{background:var(--jade);color:#fff;border-color:var(--jade)}
.option-item.wrong{border-color:var(--vermilion);background:rgba(139,26,26,0.05)}
.option-item.wrong .option-letter{background:var(--vermilion);color:#fff;border-color:var(--vermilion)}
.option-item.disabled{pointer-events:none;opacity:.7}
.answer-feedback{text-align:center;padding:14px;margin-top:14px;border-radius:var(--radius-md);font-weight:600;font-size:15px}
.answer-feedback.ok{background:rgba(91,140,111,0.1);color:var(--jade)}
.answer-feedback.fail{background:rgba(139,26,26,0.1);color:var(--vermilion)}
.answer-explain{font-size:14px;color:var(--text2);margin-top:8px;line-height:1.7;padding:16px;background:var(--bg-soft);border-radius:var(--radius-sm);border-left:3px solid var(--gold)}
.quiz-nav{display:flex;gap:12px;margin-top:20px}
.quiz-nav .btn{flex:1}

.results-panel{max-width:560px;margin:40px auto;text-align:center}
.results-score{font-size:72px;font-weight:700;color:var(--ink-deep);line-height:1;font-family:var(--font-serif)}
.results-label{font-size:15px;color:var(--text2);margin-top:4px}
.results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:28px 0}
.result-item{background:var(--bg-soft);border-radius:var(--radius-md);padding:18px 12px;text-align:center}
.result-item .ri-value{font-size:24px;font-weight:700;font-family:var(--font-serif)}
.result-item .ri-label{font-size:11px;color:var(--text2);margin-top:4px}

.quiz-config-panel{max-width:520px;margin:0 auto}
.config-row{margin-bottom:20px}
.config-options{display:flex;flex-wrap:wrap;gap:10px}
.config-opt{padding:9px 18px;border-radius:var(--radius-md);border:1.5px solid var(--border);font-size:13px;cursor:pointer;transition:all .15s;background:var(--bg-card);font-weight:500}
.config-opt:hover{border-color:var(--ink-dark)}
.config-opt.selected{border-color:var(--ink-dark);background:var(--accent-light);color:var(--ink-dark);font-weight:600}
.config-option{padding:9px 18px;border-radius:var(--radius-md);border:1.5px solid var(--border);font-size:13px;cursor:pointer;transition:all .15s;background:var(--bg-card);font-weight:500}
.config-option:hover{border-color:var(--ink-dark)}
.config-option.selected{border-color:var(--ink-dark);background:var(--accent-light);color:var(--ink-dark);font-weight:600}
.config-option.disabled{opacity:.35;pointer-events:none;text-decoration:line-through}
.slider-row{display:flex;align-items:center;gap:16px}
.slider-row input[type=range]{flex:1;-webkit-appearance:none;height:6px;border-radius:3px;background:var(--border);outline:none}
.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--ink-dark);cursor:pointer;border:3px solid var(--gold)}
.slider-val{font-size:22px;font-weight:700;color:var(--ink-dark);min-width:40px;font-family:var(--font-serif)}
.config-btns{display:flex;gap:12px;margin-top:24px}
.config-btns .btn{flex:1}

/* ========== KNOWLEDGE PAGE ========== */
.knowledge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.knowledge-card{
  background:var(--bg-card);border-radius:var(--radius-lg);padding:22px;
  border:1px solid var(--border);cursor:pointer;transition:all .2s;position:relative
}
.knowledge-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:rgba(201,184,150,0.3)}
.kc-icon{font-size:36px;margin-bottom:10px}
.kc-name{font-size:16px;font-weight:600;font-family:var(--font-serif);margin-bottom:6px}
.kc-desc{font-size:12px;color:var(--text2);margin-bottom:10px}
.kc-diffs{display:flex;gap:5px;flex-wrap:wrap}
.knowledge-card.locked{opacity:.4;pointer-events:none}
.knowledge-card.locked::after{content:'🔒';position:absolute;top:14px;right:14px;font-size:14px}

/* ========== SECTION DETAIL PAGE ========== */
.section-detail-header{display:flex;align-items:center;gap:18px;margin-bottom:8px}
.sdh-icon{font-size:48px;width:72px;height:72px;border-radius:var(--radius-lg);background:var(--bg-soft);display:flex;align-items:center;justify-content:center;border:1px solid var(--border)}
.sdh-body{flex:1;min-width:0}
.sdh-name{font-size:24px;font-weight:700;font-family:var(--font-serif);margin-bottom:4px}
.sdh-meta{font-size:13px;color:var(--text2)}
.sdh-progress{margin-top:10px;background:var(--border);border-radius:6px;height:8px;overflow:hidden}
.sdh-progress-fill{height:100%;background:linear-gradient(90deg,var(--jade),var(--gold));border-radius:6px;transition:width .3s}

.unit-list{display:flex;flex-direction:column;gap:10px}
.unit-item{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all .15s;position:relative}
.unit-item:hover{border-color:var(--gold);transform:translateX(3px)}
.unit-item.locked{opacity:.5;cursor:not-allowed;pointer-events:none}
.unit-item.locked::after{content:'🔒';position:absolute;right:16px;font-size:14px}
.unit-item.passed{border-color:var(--jade);background:rgba(91,140,111,0.04)}
.unit-num{width:34px;height:34px;border-radius:50%;background:var(--ink-dark);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.unit-item.passed .unit-num{background:var(--jade);color:#fff}
.unit-body{flex:1;min-width:0}
.unit-name{font-size:15px;font-weight:600;margin-bottom:2px}
.unit-desc{font-size:12px;color:var(--text2)}
.unit-status{margin-left:auto;font-size:12px;font-weight:600;color:var(--text2);white-space:nowrap}
.unit-status.passed{color:var(--jade)}
.unit-status.locked{color:var(--text3)}

.learning-content{padding:0;background:transparent;border:none;box-shadow:none}
.learning-content:hover{box-shadow:none}
.learning-content .kc-section{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.learning-content .kc-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.learning-content h3{font-family:var(--font-serif);font-size:17px;margin:0 0 10px;color:var(--ink-deep);font-weight:700}
.learning-content h3::before{content:'';display:inline-block;width:4px;height:16px;background:var(--gold);border-radius:2px;margin-right:8px;vertical-align:middle}
.learning-content p{line-height:1.75;color:var(--text);margin-bottom:10px;font-size:14.5px}
.learning-content ul{margin:8px 0 12px 18px;padding:0;color:var(--text);font-size:14.5px;line-height:1.75}
.learning-content li{margin-bottom:6px}
.learning-content .highlight{background:linear-gradient(135deg,rgba(201,184,150,0.12) 0%,rgba(201,184,150,0.04) 100%);border-left:3px solid var(--gold);padding:14px 16px;border-radius:var(--radius-sm);margin:14px 0}
.knowledge-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}
.knowledge-table th,.knowledge-table td{padding:10px 12px;border:1px solid var(--border);text-align:center;vertical-align:middle}
.knowledge-table th{background:var(--ink-dark);color:var(--gold);font-weight:600}
.knowledge-table td{background:var(--bg-card)}
.knowledge-table tr:nth-child(even) td{background:rgba(201,184,150,0.06)}
.knowledge-table .wx-text{display:inline-block;line-height:1;vertical-align:middle;font-weight:600}
.knowledge-table .wx-mu{color:#5B8C6F}
.knowledge-table .wx-huo{color:#D9534F}
.knowledge-table .wx-tu{color:#C8A545}
.knowledge-table .wx-jin{color:#9AA0A6}
.knowledge-table .wx-shui{color:#4A90A4}
.learning-content table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}
.learning-content th,.learning-content td{padding:10px 12px;border:1px solid var(--border);text-align:center;vertical-align:middle}
.learning-content th{background:var(--ink-dark);color:var(--gold);font-weight:600}
.learning-content td{background:var(--bg-card)}
.learning-content tr:nth-child(even) td{background:rgba(201,184,150,0.06)}
.wuxing-diagram{position:relative;width:280px;height:280px;margin:24px auto;flex-shrink:0}
.wx-node{position:absolute;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-family:var(--font-serif);font-size:16px;box-shadow:var(--shadow-md);z-index:2}
.wx-node.wx-jin{background:#9AA0A6;top:20px;left:50%;transform:translateX(-50%)}
.wx-node.wx-shui{background:#4A90A4;top:50%;right:20px;transform:translateY(-50%)}
.wx-node.wx-mu{background:#5B8C6F;bottom:20px;right:45px}
.wx-node.wx-huo{background:#D9534F;bottom:20px;left:45px}
.wx-node.wx-tu{background:#D4A84B;top:50%;left:20px;transform:translateY(-50%)}
.wuxing-arrows{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}
.wuxing-arrows path{fill:none;stroke-width:2.2;stroke-linecap:round}
.wuxing-arrows .wx-gen{stroke:#4A90A4 !important}
.wuxing-arrows .wx-rest{stroke:#D9534F !important;stroke-dasharray:6,5 !important}
.wx-legend{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--text2)}
.wx-legend span{display:flex;align-items:center;gap:4px}
.wx-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
@media(max-width:768px){
  .wuxing-diagram{width:260px;height:260px}
  .wx-node{width:56px;height:56px;font-size:14px}
  .wx-node.wx-jin{top:18px}
  .wx-node.wx-shui{right:18px}
  .wx-node.wx-mu{bottom:18px;right:40px}
  .wx-node.wx-huo{bottom:18px;left:40px}
  .wx-node.wx-tu{left:18px}
}

/* ========== RANK PAGE ========== */
.rank-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.rank-tab{
  padding:9px 20px;border-radius:var(--radius-md);font-size:13px;
  color:var(--text2);background:var(--bg-card);border:1px solid var(--border);
  cursor:pointer;white-space:nowrap;transition:all .15s;font-weight:500
}
.rank-tab.active{background:var(--ink-dark);color:var(--gold);border-color:var(--ink-dark)}
.rank-table-wrapper{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border);overflow:hidden}
.rank-row{display:flex;align-items:center;padding:14px 20px;border-bottom:1px solid var(--border);transition:background .15s}
.rank-row:last-child{border-bottom:none}
.rank-row:hover{background:var(--accent-light)}
.rank-row.me{background:rgba(201,184,150,0.08)}
.rank-pos{width:48px;font-size:15px;font-weight:700;color:var(--text2);flex-shrink:0;text-align:center}
.rank-medal-wrap{width:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.rank-medal{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.rank-medal.gold{background:rgba(201,184,150,0.18);color:var(--bronze);border:1.5px solid var(--gold)}
.rank-medal.silver{background:rgba(160,176,192,0.12);color:var(--silver-dim);border:1.5px solid var(--silver)}
.rank-medal.bronze{background:rgba(139,111,63,0.1);color:var(--bronze);border:1.5px solid var(--bronze)}
.rank-name-cell{flex:1;font-size:14px;font-weight:600;min-width:0}
.rank-val-cell{font-size:15px;font-weight:700;color:var(--ink-deep);font-family:var(--font-serif);min-width:60px;text-align:right}
.rank-avatar{width:42px;height:42px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--ink-dark),var(--purple));display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;flex-shrink:0;margin:0 10px;border:2px solid var(--border)}
.rank-avatar img{width:100%;height:100%;object-fit:cover}
.rank-info{flex:1;min-width:0}
.rank-info .rank-nickname{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-info .rank-meta{font-size:12px;color:var(--text2);margin-top:2px}

/* ========== PROFILE PAGE ========== */
.profile-layout{max-width:900px;margin:0 auto}
.profile-hero{
  display:flex;align-items:center;gap:28px;padding:28px;
  background:linear-gradient(135deg,rgba(13,27,42,0.95),#0f1f33);
  border-radius:var(--radius-xl);color:var(--gold-light);margin-bottom:24px;
  position:relative;overflow:hidden
}
.profile-hero::before{
  content:'';position:absolute;top:-20%;right:-5%;width:200px;height:200px;
  background:radial-gradient(circle, rgba(201,184,150,0.05),transparent)
}
.profile-hero>*{position:relative;z-index:1}
.ph-avatar{
  width:80px;height:80px;border-radius:50%;
  background:linear-gradient(135deg,var(--ink-mid),var(--ink-light));
  display:flex;align-items:center;justify-content:center;
  font-size:34px;color:var(--gold);font-family:var(--font-serif);
  font-weight:700;border:3px solid rgba(201,184,150,0.3);cursor:pointer;flex-shrink:0;overflow:hidden
}
.ph-info{flex:1}
.ph-name{font-size:24px;font-family:var(--font-serif);font-weight:700;color:var(--gold)}
.ph-title-row{display:flex;align-items:center;gap:10px;margin-top:6px}
.ph-title{
  display:inline-flex;align-items:center;padding:4px 14px;border-radius:20px;
  font-size:13px;font-weight:600;background:rgba(201,184,150,0.12);color:var(--bronze);cursor:pointer
}
.ph-title.title-common{background:#f5f5f7;color:#666;border:1px solid #e0e0e0}
.ph-title.title-uncommon{background:#e8f5e9;color:#2e7d32;border:1px solid #a5d6a7}
.ph-title.title-rare{background:#e3f2fd;color:#1565c0;border:1px solid #90caf9}
.ph-title.title-epic{background:#f3e5f5;color:#7b1fa2;border:1px solid #ce93d8}
.ph-title.title-legendary{background:linear-gradient(135deg,#ff8a65,#ff5252);color:#fff;border:1px solid transparent;box-shadow:0 2px 10px rgba(255,82,82,.35)}
.ph-title.title-mythic{background:linear-gradient(135deg,#ff0000,#ff7f00,#ffff00,#00ff00,#00ffff,#0000ff,#8b00ff);color:#fff;border:1px solid transparent;box-shadow:0 2px 12px rgba(0,0,0,.25);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.ph-type{font-size:12px;padding:3px 10px;border-radius:20px}
.ph-level-line{margin-top:10px;display:flex;align-items:center;gap:14px}
.ph-level-text{font-size:14px;font-weight:600;color:var(--silver-light)}
.ph-exp-bar{flex:1;max-width:260px;height:8px;background:rgba(255,255,255,0.08);border-radius:4px;overflow:hidden}
.ph-exp-fill{height:100%;background:linear-gradient(90deg,var(--jade),var(--gold));border-radius:4px;transition:width .4s}
.ph-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.ph-action-btn{
  padding:7px 16px;border-radius:var(--radius-md);font-size:12px;
  background:rgba(255,255,255,0.08);color:var(--gold-light);border:1px solid rgba(255,255,255,0.1);
  cursor:pointer;transition:all .15s;font-family:var(--font-sans)
}
.ph-action-btn:hover{background:rgba(255,255,255,0.15)}

.profile-stats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:24px}
.psg-item{background:var(--bg-card);padding:18px 12px;text-align:center}
.psg-val{font-size:22px;font-weight:700;font-family:var(--font-serif);color:var(--ink-deep)}
.psg-lbl{font-size:11px;color:var(--text2);margin-top:4px}

.profile-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.profile-section-title{font-size:15px;font-weight:700;font-family:var(--font-serif);margin-bottom:12px;display:flex;align-items:center;gap:8px}

.menu-list{display:flex;flex-direction:column;gap:1px;background:var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:20px}
.menu-item{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--bg-card);cursor:pointer;transition:all .15s;font-size:14px;font-weight:500;border:none;width:100%;text-align:left;font-family:var(--font-sans)}
.menu-item:hover{background:var(--accent-light)}
.menu-item .menu-icon{font-size:20px;width:26px;text-align:center}
.menu-item .menu-arrow{color:var(--text3);margin-left:auto;font-size:14px}

.radar-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:20px;margin-bottom:20px;border:1px solid var(--border)}
.radar-title{font-size:16px;font-weight:700;text-align:center;font-family:var(--font-serif)}
.radar-sub{font-size:12px;color:var(--text2);text-align:center;margin-top:4px;margin-bottom:14px}
#sectionRadar{display:block;margin:0 auto;max-width:360px;height:auto}
.radar-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;margin-top:12px;font-size:11px;color:var(--text2)}
.radar-legend span{display:flex;align-items:center;gap:4px}
.radar-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* ========== WRONG BOOK ========== */
.wrong-item{background:var(--bg-card);border-radius:var(--radius-md);padding:18px 22px;margin-bottom:12px;border:1px solid var(--border);transition:all .15s}
.wrong-item:hover{border-color:var(--gold-dim)}
.wrong-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.wrong-item-section{font-size:12px;font-weight:600;color:var(--bronze);background:rgba(201,184,150,0.12);padding:3px 10px;border-radius:8px}
.wrong-item-diff{font-size:12px;font-weight:600;color:var(--text2)}
.wrong-item-q{font-size:15px;font-weight:700;line-height:1.6;font-family:var(--font-serif);margin-bottom:12px}
.wrong-item-options{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.wrong-item-option{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-md);border:1.5px solid var(--border);background:var(--bg);font-size:14px;line-height:1.5}
.wrong-item-option .opt-letter{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;border:2px solid var(--border);flex-shrink:0}
.wrong-item-option.correct{border-color:var(--jade);background:rgba(91,140,111,0.06)}
.wrong-item-option.correct .opt-letter{background:var(--jade);color:#fff;border-color:var(--jade)}
.wrong-item-option.wrong{border-color:var(--vermilion);background:rgba(139,26,26,0.06)}
.wrong-item-option.wrong .opt-letter{background:var(--vermilion);color:#fff;border-color:var(--vermilion)}
.wrong-item-summary{display:flex;flex-direction:column;gap:6px;margin-top:12px;font-size:13px;color:var(--text2)}
.wrong-item-summary .wrong{color:var(--vermilion);font-weight:600}
.wrong-item-summary .correct{color:var(--jade);font-weight:600}
.wrong-item-exp{margin-top:14px;padding:12px;border-radius:var(--radius-md);background:rgba(201,184,150,0.08);border:1px solid rgba(201,184,150,0.2);font-size:13px;color:var(--text2);line-height:1.7}
.wrong-item-exp-title{font-weight:600;color:var(--ink-dark);margin-bottom:4px}
.wrong-actions{display:flex;gap:10px;margin-top:12px}

/* ========== ACHIEVEMENTS ========== */
.ach-group{margin-bottom:28px}
.ach-group-title{font-size:14px;font-weight:700;color:var(--ink-deep);margin-bottom:12px;padding-left:8px;border-left:3px solid var(--gold);font-family:var(--font-serif)}
.ach-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.ach-card{display:flex;align-items:center;gap:14px;background:var(--bg-card);border-radius:var(--radius-md);padding:16px 18px;border:1px solid var(--border);transition:all .15s;opacity:.55}
.ach-card.unlocked{opacity:1;border-color:rgba(201,184,150,0.4);background:rgba(201,184,150,0.04);box-shadow:var(--shadow-sm)}
.ach-icon{font-size:30px;width:44px;text-align:center;flex-shrink:0}
.ach-info{flex:1;min-width:0}
.ach-name{font-size:15px;font-weight:600;font-family:var(--font-serif);display:flex;align-items:center;gap:8px}
.ach-desc{font-size:12px;color:var(--text2);margin-top:3px;line-height:1.5}
.ach-reward{font-size:13px;font-weight:700;color:var(--orange);white-space:nowrap;background:rgba(200,137,62,0.1);padding:3px 8px;border-radius:8px}
.ach-status{font-size:12px;color:var(--text3);white-space:nowrap;margin-top:4px}
.ach-summary{
  background:linear-gradient(135deg,var(--ink-deep) 0%,var(--ink-dark) 100%);
  color:var(--gold-light);border-radius:var(--radius-lg);
  padding:22px 24px;margin-bottom:28px;display:flex;align-items:center;gap:24px;
  position:relative;overflow:hidden
}
.ach-summary::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 80% 20%,rgba(201,184,150,.12),transparent 50%),
             radial-gradient(ellipse at 20% 90%,rgba(139,26,26,.1),transparent 45%);
}
.ach-summary>*{position:relative;z-index:1}
.ach-summary-ring{
  width:84px;height:84px;border-radius:50%;
  background:conic-gradient(var(--gold) var(--ach-pct,0%),rgba(201,184,150,.15) 0);
  display:flex;align-items:center;justify-content:center;flex-shrink:0
}
.ach-summary-ring-inner{
  width:68px;height:68px;border-radius:50%;background:var(--ink-deep);
  display:flex;align-items:center;justify-content:center;flex-direction:column
}
.ach-summary-percent{font-size:19px;font-weight:900;color:var(--gold);line-height:1}
.ach-summary-percent small{font-size:10px;font-weight:500}
.ach-summary-label{font-size:10px;color:var(--silver-dim);margin-top:2px;letter-spacing:.06em}
.ach-summary-info{flex:1;min-width:0}
.ach-summary-title{font-family:var(--font-serif);font-size:17px;font-weight:700;margin-bottom:6px;color:#fff}
.ach-summary-count{font-size:13px;color:var(--silver);display:flex;gap:16px;flex-wrap:wrap}
.ach-summary-count span{color:var(--gold);font-weight:700}
.ach-summary-bar{height:8px;background:rgba(201,184,150,.15);border-radius:4px;margin-top:14px;overflow:hidden}
.ach-summary-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--jade));border-radius:4px;transition:width .6s ease}
.ach-summary-cats{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.ach-summary-cat{
  font-size:11px;color:var(--silver);background:rgba(255,255,255,.06);
  padding:5px 10px;border-radius:8px;border:1px solid rgba(201,184,150,.12)
}
.ach-summary-cat span{color:var(--gold);font-weight:700;margin-left:4px}
@media(max-width:768px){
  .ach-list{grid-template-columns:1fr}
  .ach-summary{flex-direction:column;align-items:flex-start;gap:18px}
}

/* ========== TITLES ========== */
.title-list{display:flex;flex-direction:column;gap:8px}
.title-item{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:var(--radius-md);border:1.5px solid var(--border);margin-bottom:8px;cursor:pointer;position:relative;background:var(--bg-card);transition:all .15s}
.title-item:hover{border-color:var(--gold)}
.title-item.equipped{border-color:var(--gold);background:rgba(201,184,150,0.05)}
.title-item-name{font-size:15px;font-weight:600;font-family:var(--font-serif)}
.title-item-source{font-size:11px;color:var(--text2)}
.title-item-badge{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;padding:2px 8px;border-radius:10px;background:var(--gold);color:#fff}

/* 称号稀有度 */
.title-common{background:#f5f5f7;color:#666;border-color:#e0e0e0}
.title-uncommon{background:#e8f5e9;color:#2e7d32;border-color:#a5d6a7}
.title-rare{background:#e3f2fd;color:#1565c0;border-color:#90caf9}
.title-epic{background:#f3e5f5;color:#7b1fa2;border-color:#ce93d8}
.title-legendary{background:linear-gradient(135deg,#ff8a65,#ff5252);color:#fff;border-color:transparent;box-shadow:0 2px 10px rgba(255,82,82,.35)}
.title-mythic{background:linear-gradient(135deg,#ff0000,#ff7f00,#ffff00,#00ff00,#00ffff,#0000ff,#8b00ff);color:#fff;border-color:transparent;box-shadow:0 2px 12px rgba(0,0,0,.25);text-shadow:0 1px 2px rgba(0,0,0,.4)}

.title-item-common{background:#f5f5f7}
.title-item-uncommon{background:#e8f5e9}
.title-item-rare{background:#e3f2fd}
.title-item-epic{background:#f3e5f5}
.title-item-legendary{background:#fff3e0}
.title-item-mythic{background:linear-gradient(135deg,rgba(255,0,0,.08),rgba(255,127,0,.08),rgba(255,255,0,.08),rgba(0,255,0,.08),rgba(0,255,255,.08),rgba(0,0,255,.08),rgba(139,0,255,.08))}

.rank-title{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:600;border:1px solid transparent}
.rank-title.title-common{background:#f5f5f7;color:#666;border-color:#e0e0e0}
.rank-title.title-uncommon{background:#e8f5e9;color:#2e7d32;border-color:#a5d6a7}
.rank-title.title-rare{background:#e3f2fd;color:#1565c0;border-color:#90caf9}
.rank-title.title-epic{background:#f3e5f5;color:#7b1fa2;border-color:#ce93d8}
.rank-title.title-legendary{background:linear-gradient(135deg,#ff8a65,#ff5252);color:#fff;border-color:transparent}
.rank-title.title-mythic{background:linear-gradient(135deg,#ff0000,#ff7f00,#ffff00,#00ff00,#00ffff,#0000ff,#8b00ff);color:#fff;border-color:transparent;text-shadow:0 1px 2px rgba(0,0,0,.4)}

/* ========== EXCHANGE ========== */
.exchange-layout{max-width:600px;margin:0 auto}
.exchange-header{text-align:center;margin-bottom:24px}
.exchange-bal-label{font-size:13px;color:var(--text2)}
.exchange-bal-val{font-size:40px;font-weight:700;color:var(--ink-deep);font-family:var(--font-serif)}
.exchange-card{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border);margin-bottom:14px;transition:all .15s}
.exchange-card:hover{box-shadow:var(--shadow-sm)}
.ec-name{font-size:17px;font-weight:700;font-family:var(--font-serif)}
.ec-desc{font-size:13px;color:var(--text2);margin-top:3px}
.shop-grid{display:grid;gap:12px;margin-bottom:24px}
.shop-card{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border);padding:18px 20px;transition:all .15s}
.shop-card:hover{box-shadow:var(--shadow-sm)}
.shop-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.shop-info{flex:1;min-width:0}
.shop-name{font-size:16px;font-weight:700;font-family:var(--font-serif);margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.shop-desc{font-size:13px;color:var(--text2);margin-bottom:8px;line-height:1.5}
.shop-cost{font-size:15px;font-weight:700;color:var(--orange)}
.title-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;border:1px solid transparent}
.title-badge.common{background:#f5f5f7;color:#666;border-color:#e0e0e0}
.title-badge.uncommon{background:#e8f5e9;color:#2e7d32;border-color:#a5d6a7}
.title-badge.rare{background:#e3f2fd;color:#1565c0;border-color:#90caf9}
.title-badge.epic{background:#f3e5f5;color:#7b1fa2;border-color:#ce93d8}
.title-badge.legendary{background:#ffebee;color:#c62828;border-color:#ef9a9a}
.title-badge.mythic{background:linear-gradient(90deg,#ff0000,#ff7f00,#ffff00,#00ff00,#0000ff,#4b0082,#9400d3);color:#fff;border-color:transparent;text-shadow:0 1px 2px rgba(0,0,0,.35);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.ec-price{font-size:16px;font-weight:700;color:var(--orange)}

/* ========== TASKS PAGE ========== */
.task-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.task-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:18px 20px;border:1px solid var(--border);display:flex;flex-direction:column;gap:10px}
.task-card.completed{border-color:var(--jade);background:rgba(91,140,111,0.04)}
.task-card.claimed{opacity:.7}
.task-header{display:flex;align-items:center;gap:10px}
.task-icon{font-size:28px}
.task-title{flex:1;font-size:15px;font-weight:600}
.task-desc{font-size:12px;color:var(--text2);line-height:1.6}
.task-progress{background:var(--border);border-radius:6px;height:8px;overflow:hidden;margin-top:4px}
.task-progress-fill{height:100%;background:linear-gradient(90deg,var(--jade),var(--gold));border-radius:6px;transition:width .3s}
.task-footer{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.task-reward{font-size:14px;font-weight:700;color:var(--orange)}
.task-status{font-size:12px;font-weight:600;color:var(--text2)}
.task-status.done{color:var(--jade)}

@media(max-width:768px){
  .task-list{grid-template-columns:1fr}
}

/* ========== GUIDE PAGE ========== */
.guide-layout{max-width:720px;margin:0 auto}
.guide-hero{
  text-align:center;padding:36px 24px;
  background:linear-gradient(135deg,rgba(201,184,150,0.08),rgba(139,26,26,0.03));
  border-radius:var(--radius-xl);border:1px solid rgba(201,184,150,0.15);margin-bottom:20px
}
.guide-hero-icon{font-size:42px;margin-bottom:10px}
.guide-hero h2{font-size:22px}
.guide-hero p{font-size:14px;color:var(--text2);margin-top:6px}
.level-grid-guide{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.lg-item{padding:10px;background:var(--bg-soft);border-radius:10px;text-align:center;font-size:12px}
.lg-item b{display:block;font-size:14px;margin-bottom:2px}

/* ========== ABOUT / SETTINGS ========== */
.about-card{max-width:640px;margin:0 auto}
.about-logo{width:80px;height:80px;margin:0 auto 16px;border-radius:20px;background:linear-gradient(135deg,var(--ink-dark),var(--ink-mid));display:flex;align-items:center;justify-content:center;font-size:36px;color:var(--gold);font-family:var(--font-serif);font-weight:700;border:3px solid var(--gold-dim)}
.about-title{font-family:var(--font-serif);font-size:22px;font-weight:700;text-align:center}
.about-version{text-align:center;color:var(--text2);font-size:13px;margin:6px 0 20px}
.about-desc{font-size:14px;color:var(--text2);line-height:1.8;margin-bottom:20px}
.about-info{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px}
.about-info-item{background:var(--bg-soft);border-radius:var(--radius-md);padding:14px;font-size:13px}
.about-info-item b{display:block;color:var(--ink-dark);margin-bottom:4px}

/* ========== MODAL & TOAST ========== */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,22,40,0.5);z-index:200;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s}
.modal-dialog{width:90%;max-width:420px;background:var(--bg-card);border-radius:var(--radius-xl);padding:32px 28px;text-align:center;box-shadow:0 8px 40px rgba(10,22,40,0.2);border:1px solid var(--gold-dim)}
.modal-dialog h3{font-size:20px;margin-bottom:8px;font-family:var(--font-serif)}
.modal-dialog p{font-size:14px;color:var(--text2);margin-bottom:20px;line-height:1.6}
.modal-btns{display:flex;gap:10px;justify-content:center}
.jiazhi-card-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,10,18,0.78);z-index:250;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .25s}
.jiazhi-card-modal.hidden{display:none}
.jiazhi-card{width:100%;max-width:380px;background:linear-gradient(180deg,#1a1a2e 0%,#0f0f1a 100%);border:1px solid rgba(212,175,55,0.35);border-radius:16px;padding:28px 22px;color:#e8e0cc;box-shadow:0 12px 50px rgba(0,0,0,0.5);text-align:center;position:relative;overflow:hidden}
.jiazhi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#d4af37,transparent)}
.jiazhi-card-top{font-size:13px;color:#d4af37;letter-spacing:4px;margin-bottom:10px}
.jiazhi-card-main{font-size:56px;font-weight:700;color:#d4af37;margin:6px 0 4px;text-shadow:0 2px 12px rgba(212,175,55,0.25);font-family:var(--font-serif)}
.jiazhi-card-sub{font-size:12px;color:#9ea3b0;margin-bottom:18px}
.jiazhi-card-info{display:flex;justify-content:center;gap:16px;margin-bottom:18px}
.jiazhi-card-info>div{display:flex;flex-direction:column;gap:4px;min-width:70px}
.jiazhi-card-info .lab{font-size:11px;color:#9ea3b0}
.jiazhi-card-info .val{font-size:18px;font-weight:600;color:#f0e6d2}
.jiazhi-card-poem{background:rgba(255,255,255,0.05);border-radius:10px;padding:16px 14px;margin-bottom:16px;border:1px solid rgba(212,175,55,0.15)}
.jiazhi-card-poem-title{font-size:12px;color:#d4af37;margin-bottom:10px;letter-spacing:6px}
.jiazhi-card-poem p{font-size:15px;line-height:1.9;margin:0;color:#e8e0cc}
.jiazhi-card-fortune{font-size:22px;font-weight:700;color:#ff4d4f;margin:14px 0 6px}
.jiazhi-card-fortune.good{color:#34c759}
.jiazhi-card-fortune.mid{color:#ff9500}
.jiazhi-card-desc{font-size:13px;color:#b8bccc;line-height:1.7;margin-bottom:16px}
.jiazhi-card-extra{font-size:12px;color:#7a7f8f;margin-bottom:20px}
.jiazhi-card-btns{display:flex;gap:10px;justify-content:center}
.jiazhi-card-btns .btn{flex:1}
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:rgba(13,27,42,0.93);color:var(--gold);padding:12px 28px;border-radius:var(--radius-md);font-size:14px;font-weight:500;z-index:300;animation:fadeIn .3s,slideDown .3s;pointer-events:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);max-width:420px;text-align:center}
@keyframes slideDown{from{opacity:0;transform:translateX(-50%) translateY(-12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ========== Utilities ========== */
.hidden{display:none!important}
.text-center{text-align:center}
.mt-12{margin-top:12px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mb-12{margin-bottom:12px}.mb-20{margin-bottom:20px}
.flex-1{flex:1}
.empty-state{text-align:center;padding:60px 20px}
.empty-icon{font-size:52px;margin-bottom:14px}
.empty-title{font-size:18px;font-weight:600;margin-bottom:8px;font-family:var(--font-serif)}
.empty-desc{font-size:14px;color:var(--text2)}
.back-link{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--text2);font-size:13px;font-weight:500;margin-bottom:16px;transition:color .15s;font-family:var(--font-sans);background:none;border:none;padding:0}
.back-link:hover{color:var(--ink-deep)}
.back-link span:first-child{font-size:16px}
.back-to-top{position:fixed;right:28px;bottom:28px;width:44px;height:44px;border-radius:50%;background:var(--ink-dark);color:var(--gold);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);cursor:pointer;z-index:90;opacity:0;transform:translateY(20px);transition:all .25s;font-size:20px;border:none}
.back-to-top.show{opacity:1;transform:translateY(0)}
.float-vote-btn{position:fixed;right:24px;bottom:82px;z-index:95;display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;background:linear-gradient(135deg,var(--vermilion) 0%,#a52a2a 100%);color:#fff;font-family:var(--font-serif);font-size:15px;font-weight:600;letter-spacing:.06em;text-decoration:none;box-shadow:0 6px 22px rgba(139,26,26,.38);transition:transform .2s,box-shadow .2s;border:1px solid rgba(255,255,255,.1)}
.float-vote-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(139,26,26,.45);color:#fff}
.float-vote-btn span{font-size:18px}
@keyframes spin{to{transform:rotate(360deg)}}
.global-loading{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(245,240,230,0.88);backdrop-filter:blur(8px);z-index:9999;transition:opacity .2s}
.global-loading.hidden{opacity:0;pointer-events:none}
.global-loading .spinner{width:36px;height:36px;border:3px solid rgba(201,184,150,0.2);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:12px}
.global-loading .text{font-size:14px;color:var(--text2)}

/* ========== Responsive ========== */
@media(max-width:1023px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .3s ease;z-index:200;box-shadow:none}
  .sidebar.open{transform:translateX(0);box-shadow:4px 0 30px rgba(0,0,0,.2)}
  .sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:199;opacity:0;pointer-events:none;transition:opacity .3s}
  .sidebar-overlay.show{opacity:1;pointer-events:auto}
  .menu-toggle{display:flex!important}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .quick-grid{grid-template-columns:repeat(2,1fr)}
  .dashboard-split{grid-template-columns:1fr}
  .profile-stats-grid{grid-template-columns:repeat(3,1fr)}
  .profile-cols{grid-template-columns:1fr}
  .results-grid{grid-template-columns:repeat(2,1fr)}
  .options-list{grid-template-columns:1fr}
  .knowledge-grid{grid-template-columns:repeat(2,1fr)}
  .quiz-modes{grid-template-columns:1fr}
  .level-grid-guide{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:767px){
  :root{--sidebar-w:260px;--header-h:56px}
  body{flex-direction:column}
  .app-shell{flex-direction:column}
  .main-area{min-height:0}
  .top-header{padding:0 16px}
  .header-search{display:none}
  .content-area{padding:16px}
  .welcome-banner{flex-direction:column;text-align:center;padding:20px}
  .welcome-stats-col{text-align:center;margin-top:12px}
  .welcome-exp{max-width:100%}
  .section-grid-wide{grid-template-columns:1fr}
  .knowledge-grid{grid-template-columns:1fr}
  .quiz-active-panel,.quiz-layout,.quiz-config-panel{max-width:100%}
  .question-card{padding:20px 16px}
  .profile-hero{flex-direction:column;text-align:center;padding:20px}
  .ph-actions{flex-direction:row;justify-content:center;align-items:center;margin-top:12px}
  .profile-stats-grid{grid-template-columns:repeat(2,1fr)}
  .rank-table-wrapper{border-radius:var(--radius-md)}
  .rank-row{padding:10px 14px}
  .exchange-layout,.guide-layout,.results-panel,.profile-layout{max-width:100%}
  .level-grid-guide{grid-template-columns:repeat(2,1fr)}
  .login-card{width:92%;max-width:380px;padding:28px 24px}
}

.menu-toggle{
  display:none;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--radius-md);
  background:none;border:none;cursor:pointer;font-size:22px;color:var(--text);flex-shrink:0
}