/* ZhiLuTong - Aurora + Glassmorphism design language
   Single source of truth for the visual system. Loaded by src/ui/styles.py. */

:root {
  --zlt-primary: #7BC4A4;
  --zlt-primary-soft: #CDE8DA;
  --zlt-primary-ink: #0F3A2C;
  --zlt-sage: #B5D6C2;
  --zlt-sage-deep: #7CA890;
  --zlt-gold: #D4A574;
  --zlt-gold-soft: #F1E2C8;
  --zlt-ink: #1F2421;
  --zlt-ink-muted: #5B6661;
  --zlt-surface: #FAF8F5;
  --zlt-surface-glass: rgba(255, 255, 255, 0.62);
  --zlt-surface-glass-strong: rgba(255, 255, 255, 0.78);
  --zlt-border: rgba(31, 36, 33, 0.08);
  --zlt-border-strong: rgba(31, 36, 33, 0.14);
  --zlt-success: #2F9E6E;
  --zlt-warning: #C77B30;
  --zlt-danger: #C24A4A;
  --zlt-info: #3E7CB1;
  --zlt-radius-card: 20px;
  --zlt-radius-pill: 999px;
  --zlt-radius-chip: 10px;
  --zlt-shadow-card: 0 18px 40px rgba(15, 58, 44, 0.08), 0 1px 0 rgba(255, 255, 255, 0.65) inset;
  --zlt-shadow-floating: 0 40px 80px rgba(15, 58, 44, 0.12), 0 1px 0 rgba(255, 255, 255, 0.75) inset;
  --zlt-font-sans: "Plus Jakarta Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --zlt-font-display: "Plus Jakarta Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --zlt-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --zlt-mouse-x: 0px;
  --zlt-mouse-y: 0px;
}

html, body, .stApp {
  background: var(--zlt-surface) !important;
  color: var(--zlt-ink) !important;
  font-family: var(--zlt-font-sans) !important;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
  font-feature-settings: "ss01", "cv11";
}
header[data-testid="stHeader"] { background: transparent !important; }
#MainMenu, footer, .viewerBadge_link__qRIco { display: none !important; }

.block-container {
  padding-top: 3.2rem !important;
  padding-bottom: 4rem !important;
  max-width: 1200px !important;
}

h1, h2, h3, h4, .zlt-display {
  font-family: var(--zlt-font-display) !important;
  color: var(--zlt-ink) !important;
  letter-spacing: -0.022em !important;
  font-weight: 600 !important;
}
h1 { font-size: 2.05rem !important; line-height: 1.15 !important; }
h2 { font-size: 1.45rem !important; line-height: 1.2 !important; }
h3 { font-size: 1.12rem !important; line-height: 1.3 !important; }
p, li, label, span, div, button { color: var(--zlt-ink); }

/* ---------- aurora background ---------- */
.zlt-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.zlt-aurora__orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; will-change: transform; }
.zlt-aurora__orb--mint  { background: #B5D6C2; width: 620px; height: 620px; top: -180px; left: -120px; animation: zlt-aurora-drift-a 24s ease-in-out infinite alternate; }
.zlt-aurora__orb--sage  { background: #CDE8DA; width: 540px; height: 540px; top: 30%; right: -160px; animation: zlt-aurora-drift-b 32s ease-in-out infinite alternate; }
.zlt-aurora__orb--gold  { background: #F1E2C8; width: 480px; height: 480px; bottom: -160px; left: 30%; animation: zlt-aurora-drift-c 28s ease-in-out infinite alternate; }
.zlt-aurora__orb--cream { background: #FFFFFF; width: 720px; height: 720px; top: 10%; left: 30%; animation: zlt-aurora-drift-d 40s ease-in-out infinite alternate; opacity: 0.65; }
.zlt-aurora__orb--mint2 { background: #7BC4A4; width: 360px; height: 360px; bottom: 10%; right: 15%; animation: zlt-aurora-drift-e 36s ease-in-out infinite alternate; opacity: 0.32; }

@keyframes zlt-aurora-drift-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(120px, 60px, 0) scale(1.12); } }
@keyframes zlt-aurora-drift-b { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-90px, 80px, 0) scale(0.9); } }
@keyframes zlt-aurora-drift-c { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(60px, -90px, 0) scale(1.15); } }
@keyframes zlt-aurora-drift-d { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-80px, 50px, 0) scale(1.05); } }
@keyframes zlt-aurora-drift-e { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(50px, -60px, 0) scale(0.85); } }

/* ---------- parallax foreground orbs (cursor driven) ---------- */
.zlt-parallax { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.zlt-parallax__orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; transform: translate3d(calc(var(--zlt-mouse-x) * 0.04), calc(var(--zlt-mouse-y) * 0.04), 0); will-change: transform; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.zlt-parallax__orb--a { width: 220px; height: 220px; background: rgba(123,196,164,0.55); top: 22%; left: 8%; }
.zlt-parallax__orb--b { width: 160px; height: 160px; background: rgba(212,165,116,0.45); top: 55%; right: 12%; }
.zlt-parallax__orb--c { width: 120px; height: 120px; background: rgba(181,214,194,0.7); bottom: 12%; left: 42%; }

section.main > div.block-container { position: relative; z-index: 5; }
/* ---------- text-only top nav ---------- */
.zlt-nav { position: relative; z-index: 20; display: flex; align-items: center; gap: 2.1rem; padding: 1rem 0 1.1rem 0; font-family: var(--zlt-font-display); font-size: 0.92rem; font-weight: 500; }
.zlt-nav__brand { font-weight: 700; font-size: 1.02rem; letter-spacing: -0.022em; color: var(--zlt-ink); display: flex; align-items: center; gap: 0.55rem; }
.zlt-nav__brand-mark { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--zlt-primary), var(--zlt-sage-deep)); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 0.78rem; box-shadow: 0 6px 14px rgba(15,58,44,0.18); }
.zlt-nav__links { display: flex; align-items: center; gap: 1.6rem; margin-left: auto; }
.zlt-nav__link { position: relative; padding: 0.25rem 0; color: var(--zlt-ink-muted); text-decoration: none; transition: color 0.25s ease; }
.zlt-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--zlt-primary); transform: scaleX(0); transform-origin: left center; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); border-radius: 2px; }
.zlt-nav__link:hover, .zlt-nav__link[aria-current="page"] { color: var(--zlt-ink); }
.zlt-nav__link:hover::after, .zlt-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.zlt-nav__cta { background: var(--zlt-ink); color: #FAF8F5 !important; border-radius: var(--zlt-radius-pill); padding: 0.5rem 1.1rem; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease; border: 0; cursor: pointer; }
.zlt-nav__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(15,58,44,0.18); }

/* ---------- glassmorphism primary card ---------- */
.zlt-glass { position: relative; background: var(--zlt-surface-glass); border: 1px solid rgba(255, 255, 255, 0.75); border-radius: var(--zlt-radius-card); box-shadow: var(--zlt-shadow-card); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); padding: 1.75rem 1.85rem; }
.zlt-glass--floating { box-shadow: var(--zlt-shadow-floating); }
.zlt-glass--strong  { background: var(--zlt-surface-glass-strong); }
.zlt-glass__title { font-family: var(--zlt-font-display); font-size: 1.1rem; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 0.35rem 0; color: var(--zlt-ink); }
.zlt-glass__eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--zlt-sage-deep); margin: 0 0 0.4rem 0; }
.zlt-glass__lede { color: var(--zlt-ink-muted); font-size: 0.95rem; margin: 0 0 1.1rem 0; max-width: 60ch; }

/* ---------- hero header ---------- */
.zlt-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.4rem; align-items: end; }
.zlt-hero__eyebrow { color: var(--zlt-sage-deep); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.55rem; }
.zlt-hero__title { font-size: 2.05rem; font-weight: 600; line-height: 1.12; margin: 0 0 0.55rem 0; color: var(--zlt-ink); }
.zlt-hero__lede { color: var(--zlt-ink-muted); font-size: 0.98rem; max-width: 56ch; line-height: 1.55; }
.zlt-hero__meta { display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-end; }
@media (max-width: 880px) { .zlt-hero { grid-template-columns: 1fr; } .zlt-hero__meta { align-items: flex-start; } }

/* ---------- step pipeline ---------- */
.zlt-steps { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; padding: 0.25rem 0 0.75rem 0; }
.zlt-step { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.85rem; border-radius: var(--zlt-radius-pill); background: rgba(255,255,255,0.55); border: 1px solid var(--zlt-border); color: var(--zlt-ink-muted); font-size: 0.82rem; font-weight: 500; letter-spacing: -0.005em; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; white-space: nowrap; }
.zlt-step__index { width: 22px; height: 22px; border-radius: 50%; background: rgba(15,58,44,0.06); color: var(--zlt-ink-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; font-family: var(--zlt-font-mono); transition: background 0.3s ease, color 0.3s ease; }
.zlt-step--current { background: rgba(123,196,164,0.22); border-color: rgba(123,196,164,0.55); color: var(--zlt-primary-ink); }
.zlt-step--current .zlt-step__index { background: var(--zlt-primary); color: #fff; box-shadow: 0 0 0 4px rgba(123,196,164,0.18); }
.zlt-step--done { color: var(--zlt-primary-ink); }
.zlt-step--done .zlt-step__index { background: var(--zlt-primary-ink); color: #fff; }
.zlt-step__sep { width: 18px; height: 1px; background: var(--zlt-border-strong); flex: none; }

/* ---------- callouts ---------- */
.zlt-callout { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.9rem 1.05rem; border-radius: var(--zlt-radius-chip); font-size: 0.9rem; line-height: 1.5; background: rgba(255,255,255,0.7); border: 1px solid var(--zlt-border); }
.zlt-callout--info    { background: rgba(62,124,177,0.10); border-color: rgba(62,124,177,0.25); color: #1F3F5E; }
.zlt-callout--success { background: rgba(47,158,110,0.12); border-color: rgba(47,158,110,0.30); color: #14543B; }
.zlt-callout--warning { background: rgba(199,123,48,0.12); border-color: rgba(199,123,48,0.30); color: #6E3B0C; }
.zlt-callout--error   { background: rgba(194,74,74,0.10); border-color: rgba(194,74,74,0.30); color: #6B1F1F; }
.zlt-callout__icon { width: 22px; height: 22px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--zlt-font-mono); font-weight: 700; font-size: 0.75rem; background: rgba(255,255,255,0.7); color: inherit; }

/* ---------- circular gauge ---------- */
.zlt-gauge { display: inline-flex; flex-direction: column; align-items: center; gap: 0.45rem; }
.zlt-gauge__ring { --pct: 0; --ring: var(--zlt-primary); --track: rgba(15,58,44,0.08); width: var(--zlt-gauge-size, 200px); height: var(--zlt-gauge-size, 200px); border-radius: 50%; background: conic-gradient(var(--ring) calc(var(--pct) * 1%), var(--track) 0); display: inline-flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 18px 40px rgba(15,58,44,0.12); transition: background 0.6s ease; }
.zlt-gauge__ring::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--zlt-surface-glass-strong); border: 1px solid rgba(255,255,255,0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.zlt-gauge__value { position: relative; z-index: 1; font-family: var(--zlt-font-display); font-size: calc(var(--zlt-gauge-size, 200px) * 0.22); font-weight: 600; color: var(--zlt-ink); line-height: 1; letter-spacing: -0.04em; }
.zlt-gauge__value small { font-size: 0.4em; color: var(--zlt-ink-muted); margin-left: 0.15em; font-weight: 500; }
.zlt-gauge__label { font-size: 0.78rem; color: var(--zlt-ink-muted); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.zlt-gauge--gold .zlt-gauge__ring { --ring: var(--zlt-gold); }
.zlt-gauge--sage .zlt-gauge__ring { --ring: var(--zlt-sage-deep); }

/* ---------- sub-score bars ---------- */
.zlt-subscore { display: flex; flex-direction: column; gap: 0.85rem; }
.zlt-subscore__row { display: grid; grid-template-columns: 1fr auto; gap: 0.45rem 0.85rem; align-items: center; }
.zlt-subscore__label { color: var(--zlt-ink-muted); font-size: 0.86rem; }
.zlt-subscore__value { font-family: var(--zlt-font-mono); font-size: 0.86rem; color: var(--zlt-primary-ink); font-weight: 600; }
.zlt-subscore__track { grid-column: 1 / -1; height: 6px; background: rgba(15,58,44,0.06); border-radius: 999px; overflow: hidden; }
.zlt-subscore__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--zlt-primary), var(--zlt-sage-deep)); border-radius: 999px; transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); }

/* ---------- chips ---------- */
.zlt-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.18rem 0.55rem; border-radius: var(--zlt-radius-pill); background: rgba(255,255,255,0.65); border: 1px solid var(--zlt-border); font-size: 0.72rem; font-weight: 600; color: var(--zlt-ink-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.zlt-chip--mint { background: rgba(123,196,164,0.18); color: var(--zlt-primary-ink); border-color: rgba(123,196,164,0.45); }
.zlt-chip--gold { background: rgba(212,165,116,0.18); color: #6F4A1A; border-color: rgba(212,165,116,0.45); }
.zlt-chip--ink  { background: rgba(31,36,33,0.92); color: #FAF8F5; border-color: rgba(31,36,33,0.92); }

/* ---------- locked frosted overlay ---------- */
.zlt-lock { position: relative; border-radius: var(--zlt-radius-card); overflow: hidden; }
.zlt-lock__veil { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); }
.zlt-lock__panel { background: rgba(255,255,255,0.78); border: 1px solid rgba(255,255,255,0.85); box-shadow: 0 24px 50px rgba(15,58,44,0.14); border-radius: 18px; padding: 1.2rem 1.4rem; max-width: 360px; text-align: center; color: var(--zlt-ink); }
.zlt-lock__icon { width: 44px; height: 44px; border-radius: 14px; margin: 0 auto 0.65rem auto; display: inline-flex; align-items: center; justify-content: center; background: var(--zlt-ink); color: #FAF8F5; }
.zlt-lock__title { font-weight: 600; font-size: 1rem; margin: 0 0 0.35rem 0; }
.zlt-lock__body { font-size: 0.86rem; color: var(--zlt-ink-muted); margin: 0; }

/* ---------- empty state ---------- */
.zlt-empty { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1.6rem 1rem; text-align: center; color: var(--zlt-ink-muted); }
.zlt-empty__icon { width: 38px; height: 38px; border-radius: 12px; background: rgba(123,196,164,0.18); color: var(--zlt-primary-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }

/* ---------- footer disclaimer ---------- */
.zlt-footer { margin-top: 2.5rem; padding: 1.4rem 0; color: var(--zlt-ink-muted); font-size: 0.78rem; border-top: 1px solid var(--zlt-border); line-height: 1.55; }

/* ---------- metric grid ---------- */
.zlt-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.85rem; }
.zlt-metric { padding: 0.9rem 1rem; border-radius: var(--zlt-radius-chip); background: rgba(255,255,255,0.7); border: 1px solid var(--zlt-border); }
.zlt-metric__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--zlt-ink-muted); margin-bottom: 0.25rem; }
.zlt-metric__value { font-family: var(--zlt-font-display); font-weight: 600; font-size: 1.6rem; color: var(--zlt-ink); letter-spacing: -0.02em; }

/* ---------- skill row ---------- */
.zlt-skill-group { display: flex; flex-direction: column; gap: 0.55rem; }
.zlt-skill-group__title { font-size: 0.78rem; font-weight: 600; color: var(--zlt-sage-deep); letter-spacing: 0.12em; text-transform: uppercase; }
.zlt-skill-row { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.5rem 0.7rem; border-radius: 10px; background: rgba(255,255,255,0.55); border: 1px solid var(--zlt-border); }
.zlt-skill-row__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 0.55rem; background: var(--zlt-primary); flex: none; box-shadow: 0 0 0 4px rgba(123,196,164,0.18); }
.zlt-skill-row__name { font-weight: 600; color: var(--zlt-ink); }
.zlt-skill-row__reason { color: var(--zlt-ink-muted); font-size: 0.86rem; margin-top: 0.18rem; line-height: 1.45; }
.zlt-skill-row__quote { color: var(--zlt-ink-muted); font-size: 0.78rem; margin-top: 0.3rem; font-style: italic; border-left: 2px solid var(--zlt-sage); padding-left: 0.55rem; }

/* ---------- Streamlit widget overrides ---------- */
.stButton > button, .stDownloadButton > button { background: var(--zlt-ink) !important; color: #FAF8F5 !important; border: 0 !important; border-radius: var(--zlt-radius-pill) !important; padding: 0.5rem 1.1rem !important; font-weight: 600 !important; letter-spacing: -0.005em !important; transition: transform 0.25s ease, box-shadow 0.25s ease !important; }
.stButton > button:hover, .stDownloadButton > button:hover { transform: translateY(-2px) !important; box-shadow: 0 12px 24px rgba(15,58,44,0.18) !important; }
.stButton > button:focus, .stDownloadButton > button:focus { outline: 2px solid var(--zlt-primary) !important; outline-offset: 2px !important; }
.stButton > button[kind="secondary"], .stDownloadButton > button[kind="secondary"] { background: rgba(255,255,255,0.78) !important; color: var(--zlt-ink) !important; border: 1px solid var(--zlt-border-strong) !important; }
.stButton > button:disabled, .stDownloadButton > button:disabled { opacity: 0.55 !important; transform: none !important; }

.stTextInput input, .stTextArea textarea, .stSelectbox div[data-baseweb="select"] > div, .stMultiSelect div[data-baseweb="select"] > div { background: rgba(255,255,255,0.78) !important; border-radius: 12px !important; border: 1px solid var(--zlt-border) !important; color: var(--zlt-ink) !important; font-family: var(--zlt-font-sans) !important; }
.stTextInput input:focus, .stTextArea textarea:focus { border-color: var(--zlt-primary) !important; box-shadow: 0 0 0 3px rgba(123,196,164,0.25) !important; }

.stFileUploader section { background: rgba(255,255,255,0.65) !important; border: 1px dashed var(--zlt-border-strong) !important; border-radius: 14px !important; }

.stProgress > div > div > div > div { background: linear-gradient(90deg, var(--zlt-primary), var(--zlt-sage-deep)) !important; }

.stTabs [data-baseweb="tab-list"] { gap: 0.5rem; }
.stTabs [data-baseweb="tab"] { background: transparent !important; border-radius: var(--zlt-radius-pill) !important; padding: 0.4rem 0.95rem !important; color: var(--zlt-ink-muted) !important; font-weight: 500 !important; }
.stTabs [aria-selected="true"] { background: rgba(123,196,164,0.22) !important; color: var(--zlt-primary-ink) !important; }

.streamlit-expanderHeader, [data-testid="stExpander"] details summary { background: rgba(255,255,255,0.6) !important; border-radius: 12px !important; border: 1px solid var(--zlt-border) !important; font-weight: 500 !important; }

@media (max-width: 720px) {
  .zlt-aurora__orb { transform: scale(0.8); }
  .zlt-parallax__orb { display: none; }
  .zlt-hero__title { font-size: 1.55rem !important; }
  h1 { font-size: 1.55rem !important; }
  .zlt-nav { flex-wrap: wrap; gap: 1rem; }
  .zlt-nav__links { width: 100%; margin-left: 0; flex-wrap: wrap; gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .zlt-aurora__orb, .zlt-parallax__orb { animation: none !important; transform: none !important; opacity: 0.25; }
}