:root {
  --ink: #18332d;
  --muted: #71817c;
  --green: #17594a;
  --green-dark: #0d3d33;
  --green-soft: #e7f0eb;
  --paper: #f8f8f3;
  --card: #fff;
  --line: #e3e7e2;
  --yellow: #f0d77b;
  --orange: #dc8150;
  --red: #ca6256;
  --blue: #568497;
  --shadow: 0 20px 55px rgba(26, 57, 49, .09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", "Noto Sans SC", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

.auth-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.08fr) minmax(420px, .92fr); }
.auth-story { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 44px 7vw; color: #edf5f1; background: radial-gradient(circle at 80% 20%, rgba(240,215,123,.14), transparent 20%), linear-gradient(145deg, #174f42, #0b352d); }
.auth-story::after { content:""; position:absolute; right:-180px; bottom:-260px; width:640px; height:640px; border:1px solid rgba(255,255,255,.07); border-radius:50%; box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018); }
.public-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-glyph { width: 43px; height: 43px; display:grid; place-items:center; border-radius:13px; color:var(--green-dark); background:var(--yellow); font-size:25px; font-weight:700; }
.public-brand strong,.public-brand small { display:block; }
.public-brand strong { font-size:20px; letter-spacing:.08em; }
.public-brand small { margin-top:2px; color:rgba(237,245,241,.58); font-size:10px; letter-spacing:.12em; }
.story-copy { position:relative; z-index:1; max-width:610px; margin:auto 0; }
.story-kicker,.card-kicker { color:#b39d48; font-size:9px; font-weight:700; letter-spacing:.18em; }
.story-copy h1 { margin:18px 0; font-size:clamp(42px,5vw,72px); line-height:1.13; letter-spacing:-.055em; }
.story-copy h1 em { color:var(--yellow); font-style:normal; }
.story-copy > p { max-width:540px; color:rgba(237,245,241,.67); font-size:14px; line-height:1.9; }
.story-points { display:flex; flex-wrap:wrap; gap:16px; margin-top:36px; }
.story-points span { display:flex; align-items:center; gap:7px; color:rgba(237,245,241,.76); font-size:11px; }
.story-points i { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; color:var(--green-dark); background:var(--yellow); font-style:normal; font-weight:700; }
.auth-risk { position:relative; z-index:1; margin:0; color:rgba(237,245,241,.42); font-size:9px; }
.auth-panel { display:grid; place-items:center; padding:40px; background:#fbfaf6; }
.auth-box { width:min(420px,100%); }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; margin-bottom:45px; padding:4px; border-radius:12px; background:#edf1ee; }
.auth-tabs button { padding:10px; border:0; border-radius:9px; color:#7d8c87; background:transparent; font-size:11px; }
.auth-tabs button.active { color:var(--green); background:#fff; font-weight:700; box-shadow:0 5px 15px rgba(20,60,50,.08); }
.auth-heading h2 { margin:0; font-size:28px; letter-spacing:-.035em; }
.auth-heading p { margin:8px 0 27px; color:#84928d; font-size:11px; }
.backend-status { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; margin:-12px 0 18px; padding:10px 11px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.backend-status > span { width:8px; height:8px; border-radius:50%; background:#d6b64d; box-shadow:0 0 0 3px #faf2d8; }
.backend-status strong,.backend-status small { display:block; }
.backend-status strong { font-size:9px; }
.backend-status small { margin-top:2px; color:#8e9a96; font-size:7px; }
.backend-status button { padding:5px 7px; border:0; border-radius:7px; color:var(--green); background:var(--green-soft); font-size:8px; font-weight:700; }
.backend-status.ready > span { background:#2c9274; box-shadow:0 0 0 3px #dff0e9; }
.backend-status.error > span { background:var(--red); box-shadow:0 0 0 3px #f8e8e6; }
#authForm { display:grid; gap:16px; }
#authForm label,.plan-form label,.modal-form label { display:grid; gap:7px; color:#526861; font-size:10px; font-weight:600; }
#authForm input,.modal-form input,.modal-form select,.plan-form input { width:100%; padding:13px 14px; border:1px solid #dce2de; border-radius:11px; outline:none; color:var(--ink); background:#fff; font-size:11px; }
#authForm input:focus,.modal-form input:focus,.modal-form select:focus,.plan-form input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(23,89,74,.08); }
.password-field { position:relative; }
.password-field button { position:absolute; right:8px; top:50%; transform:translateY(-50%); padding:5px 8px; border:0; color:#75857f; background:transparent; font-size:9px; }
.consent { grid-template-columns:auto 1fr !important; align-items:center; font-weight:400 !important; }
.consent input { width:auto !important; }
.primary-cta,.yellow-button,.soft-button,.ghost-button { border:0; border-radius:11px; font-weight:700; }
.primary-cta { padding:13px 17px; color:#fff; background:var(--green); box-shadow:0 9px 22px rgba(23,89,74,.18); }
.primary-cta:hover { background:#104b3e; transform:translateY(-1px); }
.primary-cta.small { padding:10px 14px; }
.form-error { min-height:15px; margin:0; color:var(--red); font-size:9px; text-align:center; }
.auth-footer { margin-top:24px; padding-top:18px; border-top:1px solid var(--line); color:#98a39f; font-size:9px; text-align:center; }

.app { min-height:100vh; }
.app-sidebar { position:fixed; inset:0 auto 0 0; z-index:30; width:232px; display:flex; flex-direction:column; padding:27px 18px 20px; color:#edf5f1; background:linear-gradient(170deg,#123f35,#0b3029); }
.public-brand.compact { padding:0 8px 30px; }
.public-brand.compact .brand-glyph { width:39px; height:39px; font-size:21px; }
.app-nav { display:grid; gap:5px; }
.app-nav button { width:100%; display:flex; align-items:center; gap:12px; padding:12px 14px; border:0; border-radius:11px; color:rgba(237,245,241,.66); background:transparent; font-size:12px; text-align:left; }
.app-nav button span { width:20px; color:#dcc766; font-size:18px; text-align:center; }
.app-nav button.active,.app-nav button:hover { color:#fff; background:rgba(255,255,255,.1); }
.sidebar-principle { display:flex; gap:10px; margin-top:30px; padding:15px; border:1px solid rgba(255,255,255,.1); border-radius:14px; background:rgba(255,255,255,.05); }
.sidebar-principle > span { width:28px; height:28px; flex:none; display:grid; place-items:center; border-radius:9px; color:var(--green-dark); background:var(--yellow); font-size:10px; font-weight:700; }
.sidebar-principle p { margin:0; color:rgba(237,245,241,.55); font-size:9px; line-height:1.6; }
.sidebar-principle strong { display:block; margin-bottom:2px; color:#fff; font-size:10px; }
.sidebar-user { display:flex; align-items:center; gap:9px; margin-top:auto; padding-top:17px; border-top:1px solid rgba(255,255,255,.1); }
.user-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:var(--green-dark); background:var(--yellow); font-weight:700; }
.sidebar-user > span:nth-child(2) { min-width:0; flex:1; }
.sidebar-user strong,.sidebar-user small { overflow:hidden; display:block; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-user strong { font-size:10px; }
.sidebar-user small { margin-top:2px; color:rgba(237,245,241,.45); font-size:7px; }
.sidebar-user button { border:0; color:rgba(237,245,241,.55); background:transparent; font-size:17px; }

.app-main { min-height:100vh; margin-left:232px; padding:0 4vw 35px; }
.app-header { min-height:100px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.app-header p { margin:0 0 6px; color:#8a9893; font-size:9px; letter-spacing:.1em; text-transform:uppercase; }
.app-header h1 { margin:0; font-size:clamp(21px,2vw,29px); letter-spacing:-.035em; }
.header-actions { display:flex; align-items:center; gap:9px; }
.live-state { display:flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid var(--line); border-radius:99px; color:#73827d; background:#fff; font-size:9px; }
.live-state i { width:7px; height:7px; border-radius:50%; background:#2c9274; box-shadow:0 0 0 3px #dff0e9; }
.round-button { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:11px; background:#fff; font-size:18px; }
.profile-button { display:flex; align-items:center; gap:7px; padding:4px 9px 4px 4px; border:1px solid var(--line); border-radius:99px; background:#fff; }
.profile-button span { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--green); font-size:9px; }
.profile-button b { font-size:9px; }
.app-page { display:none; animation:pageIn .22s ease; }
.app-page.active { display:block; }
@keyframes pageIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }

.dashboard-hero { overflow:hidden; position:relative; display:grid; grid-template-columns:minmax(0,1fr) 180px; align-items:center; gap:35px; margin-top:28px; padding:35px 40px; border-radius:23px; color:#edf5f1; background:radial-gradient(circle at 88% 20%,rgba(240,215,123,.15),transparent 20%),linear-gradient(125deg,#185244,#0e3a31); box-shadow:var(--shadow); }
.dashboard-hero::after { content:""; position:absolute; right:-95px; bottom:-170px; width:340px; height:340px; border:1px solid rgba(255,255,255,.07); border-radius:50%; box-shadow:0 0 0 45px rgba(255,255,255,.025),0 0 0 90px rgba(255,255,255,.015); }
.hero-copy,.hero-score { position:relative; z-index:1; }
.hero-label { display:inline-flex; padding:5px 9px; border-radius:99px; color:var(--green-dark); background:var(--yellow); font-size:9px; font-weight:700; }
.hero-copy h2 { max-width:760px; margin:17px 0 10px; font-size:clamp(23px,2.6vw,35px); line-height:1.35; letter-spacing:-.035em; }
.hero-copy p { max-width:710px; margin:0; color:rgba(237,245,241,.64); font-size:11px; line-height:1.8; }
.hero-buttons { display:flex; gap:9px; margin-top:22px; }
.yellow-button { padding:11px 15px; color:var(--green-dark); background:var(--yellow); }
.ghost-button { padding:11px 15px; color:#dfece7; background:rgba(255,255,255,.09); }
.hero-score { text-align:center; }
.score-ring { width:118px; height:118px; display:grid; place-items:center; margin:auto; border-radius:50%; background:conic-gradient(var(--yellow) calc(var(--score)*1%),rgba(255,255,255,.12) 0); position:relative; }
.score-ring::before { content:""; position:absolute; inset:10px; border-radius:50%; background:#15483d; }
.score-ring strong,.score-ring span { position:relative; z-index:1; display:block; }
.score-ring strong { color:var(--yellow); font-size:28px; }
.score-ring span { color:rgba(237,245,241,.6); font-size:8px; }
.hero-score small { display:block; margin-top:9px; color:#9cc9b8; font-size:8px; }
.trade-strip { display:grid; grid-template-columns:auto minmax(0,1fr) minmax(250px,.6fr); align-items:center; gap:15px; margin-top:14px; padding:14px 17px; border:1px solid #eadfae; border-radius:13px; background:#fffaf0; }
.trade-state { padding:7px 9px; border-radius:8px; color:#fff; background:var(--orange); font-size:9px; font-weight:700; }
.trade-strip strong { font-size:10px; }
.trade-strip p { margin:3px 0 0; color:#796f51; font-size:8px; line-height:1.55; }
.trade-strip > p { padding-left:14px; border-left:1px solid #eadfae; }
.trade-strip b { color:var(--orange); }

.flow-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(270px,.6fr); gap:22px; margin-top:32px; }
.section-title { display:flex; align-items:end; justify-content:space-between; gap:15px; margin:0 0 13px; }
.section-title span { display:block; margin-bottom:4px; color:#9d8d49; font-size:8px; font-weight:700; letter-spacing:.16em; }
.section-title h2 { margin:0; font-size:19px; letter-spacing:-.02em; }
.section-title button { padding:5px; border:0; color:var(--green); background:transparent; font-size:9px; font-weight:700; }
.section-title small { color:#94a09c; font-size:8px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.metric-grid article { padding:16px; border:1px solid var(--line); border-radius:13px; background:#fff; }
.metric-grid span,.metric-grid strong,.metric-grid small { display:block; }
.metric-grid span { color:#8e9b97; font-size:8px; }
.metric-grid strong { margin:8px 0 4px; font-size:17px; }
.metric-grid small { color:#9ca7a3; font-size:7px; cursor:pointer; }
.positive { color:var(--red)!important; }
.negative { color:#21846b!important; }
.next-step-card,.allocation-card { padding:20px; border:1px solid var(--line); border-radius:15px; background:#fff; }
.next-step-card h3,.allocation-card h3 { margin:7px 0 15px; font-size:14px; }
.step-item { display:flex; gap:9px; padding:11px 0; border-top:1px solid #edf0ed; }
.step-item:first-child { border:0; }
.step-item i { width:23px; height:23px; flex:none; display:grid; place-items:center; border-radius:8px; color:var(--green); background:var(--green-soft); font-style:normal; font-size:9px; font-weight:700; }
.step-item strong,.step-item small { display:block; }
.step-item strong { font-size:9px; }
.step-item small { margin-top:3px; color:#8d9995; font-size:7px; line-height:1.5; }
.dashboard-section { margin-top:34px; }
.advice-feed { display:grid; gap:9px; }
.advice-row { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:13px; background:#fff; }
.fund-symbol { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; color:var(--green); background:var(--green-soft); font-weight:700; }
.advice-row h3 { margin:0 0 4px; font-size:11px; }
.advice-row p { overflow:hidden; margin:0; color:#7d8b86; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.advice-actions { text-align:right; }
.action-tag { display:inline-flex; padding:5px 8px; border-radius:99px; font-size:8px; font-weight:700; }
.action-tag.hold { color:var(--green); background:var(--green-soft); }
.action-tag.watch { color:#9a7228; background:#faf2d8; }
.action-tag.profit { color:var(--orange); background:#faeae1; }
.advice-actions button { display:block; margin:5px 0 0 auto; padding:0; border:0; color:#9b8943; background:transparent; font-size:7px; }
.empty-state { display:grid; justify-items:center; padding:38px 20px; border:1px dashed #ccd6d1; border-radius:14px; color:#84928d; background:rgba(255,255,255,.62); text-align:center; }
.empty-state > span { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:var(--green); background:var(--green-soft); font-size:18px; }
.empty-state h3 { margin:12px 0 4px; color:var(--ink); font-size:13px; }
.empty-state p { max-width:420px; margin:0; font-size:9px; line-height:1.6; }
.learning-preview { display:grid; grid-template-columns:1fr auto; align-items:center; gap:30px; margin-top:34px; padding:25px 28px; border-radius:18px; color:#edf5f1; background:var(--green-dark); }
.learning-preview h2 { margin:6px 0; font-size:19px; }
.learning-preview p { max-width:680px; margin:0; color:rgba(237,245,241,.62); font-size:9px; line-height:1.7; }
.learning-preview button { margin-top:12px; padding:0; border:0; color:var(--yellow); background:transparent; font-size:9px; font-weight:700; }
.pot-row { display:flex; gap:9px; }
.pot-row > span { width:48px; height:54px; display:grid; place-items:center; border-radius:13px; font-weight:700; }
.pot-row small { display:block; font-size:7px; font-weight:500; }
.soup { color:var(--blue); background:#e6f0f3; }
.tomato { color:var(--red); background:#f8e8e6; }
.mixed { color:#9a742a; background:#faf2d8; }
.spicy { color:var(--orange); background:#faeae1; }

.page-intro { padding:32px 0 22px; }
.page-intro h2 { margin:5px 0; font-size:27px; letter-spacing:-.035em; }
.page-intro p { max-width:680px; margin:0; color:#7b8a85; font-size:10px; line-height:1.7; }
.search-hero { padding:23px; border-radius:17px; background:var(--green-dark); }
.code-search { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; padding:5px 5px 5px 13px; border-radius:12px; background:#fff; }
.code-search > span { color:#91a09b; font-size:19px; }
.code-search input { min-width:0; border:0; outline:0; font-size:11px; }
.code-search button { padding:10px 14px; border:0; border-radius:9px; color:var(--green-dark); background:var(--yellow); font-size:10px; font-weight:700; }
.search-hero > p { margin:10px 3px 0; color:rgba(237,245,241,.55); font-size:8px; }
.method-card { display:grid; grid-template-columns:210px 1fr; gap:25px; margin:14px 0 30px; padding:21px; border:1px solid var(--line); border-radius:15px; background:#fff; }
.method-card > div span { color:#a28c39; font-size:8px; font-weight:700; }
.method-card h3 { margin:5px 0 0; font-size:16px; }
.method-card ol { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:0; padding:0; list-style:none; }
.method-card li { padding-left:10px; border-left:2px solid var(--green-soft); }
.method-card b,.method-card small { display:block; }
.method-card b { font-size:9px; }
.method-card small { margin-top:4px; color:#899692; font-size:7px; line-height:1.5; }
.watchlist-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.watch-card,.fund-result-card { padding:18px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.market-environment { display:grid; grid-template-columns:1fr auto; align-items:center; gap:28px; margin-bottom:18px; padding:22px 24px; border-radius:16px; color:#edf5f1; background:linear-gradient(125deg,#185244,#0e3a31); }
.market-environment span { color:var(--yellow); font-size:8px; font-weight:700; letter-spacing:.12em; }
.market-environment h3 { margin:6px 0 4px; font-size:19px; }
.market-environment p { margin:0; color:rgba(237,245,241,.65); font-size:8px; line-height:1.7; }
.breadth-meter { min-width:150px; text-align:right; }
.breadth-meter strong,.breadth-meter span { display:block; }
.breadth-meter strong { color:var(--yellow); font-size:25px; }
.breadth-meter span { color:rgba(237,245,241,.58); font-size:7px; letter-spacing:0; }
.breadth-meter i { display:block; width:150px; height:6px; margin-top:9px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.14); }
.breadth-meter b { display:block; height:100%; border-radius:inherit; background:var(--yellow); }
.watch-head,.result-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.growth-watch .watch-head > div { position:relative; padding-left:35px; }
.momentum-score { position:absolute; left:0; top:0; width:27px; height:27px; display:grid; place-items:center; border-radius:8px; color:var(--green-dark); background:var(--yellow); font-size:9px; font-weight:700; }
.watch-head h3,.result-head h3 { margin:0 0 3px; font-size:11px; }
.watch-head p,.result-head p { margin:0; color:#929e99; font-size:7px; }
.check-grid,.fund-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:14px 0; }
.growth-watch .check-grid { grid-template-columns:repeat(4,1fr); }
.check-grid div,.fund-metrics div { padding:9px; border-radius:9px; background:#f5f7f4; }
.check-grid span,.check-grid strong,.check-grid small,.fund-metrics span,.fund-metrics strong,.fund-metrics small { display:block; }
.check-grid span,.fund-metrics span { color:#909d98; font-size:7px; }
.check-grid strong,.fund-metrics strong { margin-top:4px; font-size:10px; }
.check-grid small,.fund-metrics small { margin-top:2px; color:#889590; font-size:6px; }
.watch-reason,.explain-box { padding:10px; border-radius:9px; color:#61756e; background:var(--green-soft); font-size:8px; line-height:1.6; }
.watch-bottom { display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
.watch-bottom small { color:#96a19d; font-size:7px; }
.watch-bottom button { padding:0; border:0; color:var(--green); background:transparent; font-size:8px; font-weight:700; }
.result-heading { margin-top:30px; }
.estimate-box { margin-top:10px; padding:10px; border-radius:9px; color:#796828; background:#faf2d8; font-size:8px; }
.fund-dossier { overflow:hidden; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:var(--shadow); }
.dossier-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:25px 27px; color:#edf5f1; background:linear-gradient(125deg,#185244,#0e3a31); }
.dossier-head h2 { margin:7px 0 4px; font-size:23px; letter-spacing:-.03em; }
.dossier-head p { margin:0; color:rgba(237,245,241,.6); font-size:8px; }
.dossier-head > div:last-child { display:flex; align-items:center; gap:9px; }
.dossier-summary { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); background:#fbfcfa; }
.dossier-summary > div { padding:15px 18px; border-left:1px solid var(--line); }
.dossier-summary > div:first-child { border:0; }
.dossier-summary span,.dossier-summary strong,.dossier-summary small { display:block; }
.dossier-summary span { color:#8d9a96; font-size:7px; }
.dossier-summary strong { margin-top:5px; font-size:13px; }
.dossier-summary small { margin-top:2px; color:#9ba5a1; font-size:6px; }
.dossier-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); }
.analysis-step { padding:24px; background:#fff; }
.analysis-step.wide { grid-column:1/-1; }
.step-heading { display:flex; align-items:flex-start; gap:10px; margin-bottom:16px; }
.step-heading > span { width:27px; height:27px; flex:none; display:grid; place-items:center; border-radius:8px; color:#fff; background:var(--green); font-size:9px; font-weight:700; }
.step-heading h3 { margin:0; font-size:13px; }
.step-heading p { margin:3px 0 0; color:#8c9995; font-size:7px; }
.analysis-step > p { margin:12px 0 0; color:#6f807a; font-size:8px; line-height:1.7; }
.trend-chart { position:relative; height:250px; padding-bottom:25px; }
.trend-chart svg { width:100%; height:220px; overflow:visible; }
.chart-labels { position:absolute; inset:auto 0 0; height:28px; border-top:1px solid var(--line); }
.chart-labels span { position:absolute; top:6px; display:grid; transform:translateX(-50%); color:#919d99; font-size:6px; white-space:nowrap; }
.chart-labels span:first-child { transform:none; }
.chart-labels span:last-child { transform:translateX(-100%); }
.chart-labels b { color:var(--ink); font-size:7px; }
.chart-empty,.inline-empty { padding:20px; border-radius:10px; color:#8c9995; background:#f5f7f4; font-size:8px; text-align:center; }
.plain-explanation { margin-top:10px; padding:12px 14px; border-radius:10px; color:#60746d; background:var(--green-soft); font-size:8px; line-height:1.75; }
.detail-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.detail-metrics > div { padding:11px; border-radius:10px; background:#f5f7f4; }
.detail-metrics span,.detail-metrics strong,.detail-metrics small { display:block; }
.detail-metrics span { color:#8d9a96; font-size:7px; }
.detail-metrics strong { margin-top:5px; font-size:12px; }
.detail-metrics small { margin-top:2px; color:#98a39f; font-size:6px; }
.drawdown-number { padding:18px; border-radius:12px; color:var(--orange); background:#faeae1; font-size:28px; font-weight:700; }
.drawdown-number small { display:block; margin-top:3px; color:#96705c; font-size:7px; font-weight:500; }
.asset-layout { display:grid; grid-template-columns:1.2fr .8fr; gap:16px; }
.asset-bars { display:grid; gap:11px; }
.asset-bars > div > span { display:flex; justify-content:space-between; margin-bottom:5px; color:#74837e; font-size:8px; }
.asset-bars > div > span b { color:var(--ink); }
.asset-bars > div > i { height:7px; display:block; overflow:hidden; border-radius:99px; background:#edf0ed; }
.asset-bars > div > i b { height:100%; display:block; border-radius:inherit; }
.asset-bars > small { color:#99a39f; font-size:6px; }
.concentration-card { padding:16px; border-radius:12px; color:#edf5f1; background:var(--green-dark); }
.concentration-card span,.concentration-card strong { display:block; }
.concentration-card span { color:rgba(237,245,241,.55); font-size:7px; }
.concentration-card strong { margin:6px 0; color:var(--yellow); font-size:24px; }
.concentration-card p { margin:0; color:rgba(237,245,241,.65); font-size:7px; line-height:1.6; }
.top-holdings { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin-top:16px; }
.top-holdings > div:not(.inline-empty) { display:grid; grid-template-columns:20px 1fr auto auto; align-items:center; gap:7px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; }
.top-holdings > div > span { width:18px; height:18px; display:grid; place-items:center; border-radius:6px; color:var(--green); background:var(--green-soft); font-size:7px; }
.top-holdings b { font-size:8px; }
.top-holdings small { color:#96a19d; font-size:6px; }
.top-holdings strong { font-size:8px; }
.data-date { color:#9aa5a1!important; font-size:6px!important; }
.company-card { display:grid; gap:6px; padding:15px; border-radius:11px; background:#f5f7f4; }
.company-card strong { font-size:12px; }
.company-card span { color:#657970; font-size:8px; }
.company-card small { color:#929e99; font-size:7px; }
.announcement-list { display:grid; gap:7px; }
.announcement-list a { display:flex; justify-content:space-between; gap:15px; padding:10px 12px; border:1px solid var(--line); border-radius:9px; color:var(--ink); text-decoration:none; }
.announcement-list a:hover { border-color:#b9cdc4; background:#fbfcfa; }
.announcement-list span { font-size:8px; }
.announcement-list small { flex:none; color:#929e99; font-size:7px; }
.archive-link { display:inline-block; margin-top:12px; color:var(--green); font-size:8px; font-weight:700; text-decoration:none; }
.dossier-disclaimer { padding:13px 24px; color:#909d98; background:#f8f9f6; font-size:7px; text-align:center; }
.momentum-summary { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px; padding:13px 18px; border-bottom:1px solid var(--line); background:#fff8df; }
.momentum-summary strong { color:#866f20; font-size:10px; }
.momentum-summary p { margin:0; color:#746d51; font-size:8px; line-height:1.5; }
.momentum-summary span { color:#9a8847; font-size:7px; white-space:nowrap; }

.plan-layout { display:grid; grid-template-columns:minmax(0,.85fr) minmax(430px,1.15fr); gap:22px; align-items:start; }
.plan-form,.plan-preview { padding:25px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.plan-form { display:grid; gap:21px; }
.money-input { display:flex; align-items:center; gap:8px; padding:10px 13px; border:1px solid var(--line); border-radius:11px; background:#fbfcfa; }
.money-input input { flex:1; min-width:0; padding:0; border:0; background:transparent; font-size:20px; font-weight:700; }
.money-input small { color:#97a29e; font-size:8px; }
.segmented { display:grid; grid-template-columns:repeat(3,1fr); padding:4px; border-radius:10px; background:#eef2ef; }
.segmented button { padding:9px; border:0; border-radius:8px; color:#74847e; background:transparent; font-size:9px; }
.segmented button.active { color:var(--green); background:#fff; font-weight:700; box-shadow:0 4px 12px rgba(20,60,50,.08); }
.range { padding:0!important; accent-color:var(--green); }
.goal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.goal-grid button { padding:12px 8px; border:1px solid var(--line); border-radius:10px; background:#fff; text-align:left; }
.goal-grid button.active { border-color:var(--green); background:var(--green-soft); }
.goal-grid span,.goal-grid b,.goal-grid small { display:block; }
.goal-grid span { margin-bottom:6px; color:var(--green); }
.goal-grid b { font-size:9px; }
.goal-grid small { margin-top:2px; color:#96a19d; font-size:6px; }
.plan-preview { box-shadow:var(--shadow); }
.preview-head { display:flex; justify-content:space-between; gap:15px; }
.preview-head span { color:#94a09c; font-size:8px; }
.preview-head h3 { margin:4px 0 0; font-size:18px; }
.preview-head > b { height:max-content; padding:5px 8px; border-radius:99px; color:var(--orange); background:#faeae1; font-size:8px; }
.allocation-wrap { display:flex; justify-content:center; align-items:center; gap:35px; margin:25px 0; }
.allocation-donut { position:relative; width:135px; height:135px; border-radius:50%; }
.allocation-donut::after { content:"配置比例"; position:absolute; inset:24px; display:grid; place-items:center; border-radius:50%; color:#82908c; background:#fff; font-size:8px; }
#allocationLegend { min-width:180px; display:grid; gap:9px; }
#allocationLegend div { display:grid; grid-template-columns:8px 1fr auto; align-items:center; gap:7px; font-size:9px; }
#allocationLegend i { width:7px; height:7px; border-radius:2px; }
#allocationLegend small { display:block; color:#99a39f; font-size:6px; }
.plan-explain { padding:13px; border-radius:10px; background:var(--green-soft); }
.plan-explain strong { color:var(--green); font-size:9px; }
.plan-explain p { margin:5px 0 0; color:#62756e; font-size:8px; line-height:1.65; }
.plan-preview ul { display:grid; gap:9px; margin:15px 0 0; padding:0; list-style:none; }
.plan-preview li { display:flex; align-items:center; gap:9px; }
.plan-preview li i { width:26px; height:26px; display:grid; place-items:center; border-radius:8px; color:var(--green); background:var(--green-soft); font-style:normal; font-weight:700; }
.plan-preview li span { color:#889590; font-size:8px; }
.plan-preview li b { display:block; margin-bottom:2px; color:var(--ink); font-size:9px; }

.portfolio-intro { display:flex; justify-content:space-between; align-items:end; gap:20px; }
.portfolio-intro > div:last-child { display:flex; gap:8px; }
.soft-button { padding:10px 13px; color:var(--green); background:var(--green-soft); }
.portfolio-metrics { grid-template-columns:repeat(3,1fr); margin-bottom:28px; }
.portfolio-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(260px,.55fr); gap:22px; }
.position-strategy-section { margin-bottom:28px; }
.position-strategy-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.strategy-position-card { padding:18px; border:1px solid var(--line); border-radius:15px; background:#fff; }
.strategy-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.strategy-card-head span { color:#9b8a4b; font-size:7px; font-weight:700; }
.strategy-card-head h3 { margin:4px 0 0; font-size:11px; }
.position-progress { height:7px; margin:15px 0 12px; overflow:hidden; border-radius:99px; background:#edf0ed; }
.position-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--green),#d1b24b); }
.strategy-numbers { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.strategy-numbers div { padding:8px; border-radius:9px; background:#f5f7f4; }
.strategy-numbers span,.strategy-numbers strong { display:block; }
.strategy-numbers span { color:#929e99; font-size:6px; }
.strategy-numbers strong { margin-top:3px; font-size:9px; }
.strategy-position-card > p { min-height:38px; margin:12px 0 7px; color:#6f807a; font-size:8px; line-height:1.65; }
.strategy-position-card > button { padding:0; border:0; color:var(--green); background:transparent; font-size:8px; font-weight:700; }
.strategy-rulebook { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px; padding:15px; border-radius:14px; background:var(--green-soft); }
.strategy-rulebook > div { display:flex; align-items:flex-start; gap:8px; }
.strategy-rulebook b { width:22px; height:22px; flex:none; display:grid; place-items:center; border-radius:7px; color:#fff; background:var(--green); font-size:8px; }
.strategy-rulebook strong,.strategy-rulebook small { display:block; }
.strategy-rulebook strong { font-size:8px; }
.strategy-rulebook small { margin-top:3px; color:#81908b; font-size:6px; line-height:1.5; }
.holding-list { display:grid; gap:9px; }
.holding-row { display:grid; grid-template-columns:minmax(200px,1.2fr) repeat(3,minmax(75px,.5fr)) auto; align-items:center; gap:12px; padding:14px; border:1px solid var(--line); border-radius:13px; background:#fff; }
.fund-id { display:flex; align-items:center; gap:10px; min-width:0; }
.fund-id h3 { overflow:hidden; margin:0 0 3px; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.fund-id p { margin:0; color:#96a19d; font-size:7px; }
.row-metric span,.row-metric strong { display:block; }
.row-metric span { color:#929e99; font-size:7px; }
.row-metric strong { margin-top:3px; font-size:10px; }
.holding-buttons { text-align:right; }
.holding-buttons button { display:block; margin:4px 0 0 auto; padding:0; border:0; color:#8b984f; background:transparent; font-size:7px; }
.holding-buttons .delete { color:var(--red); }
.allocation-bar { height:12px; display:flex; overflow:hidden; margin:18px 0; border-radius:99px; background:#edf0ed; }
.allocation-list { display:grid; gap:10px; }
.allocation-list span { display:grid; grid-template-columns:8px 1fr auto; align-items:center; gap:7px; color:#72827c; font-size:8px; }
.allocation-list i { width:7px; height:7px; border-radius:2px; }
.allocation-list b { color:var(--ink); }

.essence-block { display:flex; align-items:center; gap:20px; padding:28px; border-radius:18px; color:#edf5f1; background:linear-gradient(125deg,#185244,#0e3a31); }
.essence-block > span { width:54px; height:54px; flex:none; display:grid; place-items:center; border-radius:16px; color:var(--green-dark); background:var(--yellow); font-size:20px; font-weight:700; }
.essence-block h2 { margin:0 0 7px; font-size:20px; }
.essence-block p { margin:0; color:rgba(237,245,241,.64); font-size:10px; line-height:1.8; }
.lesson-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; }
.lesson-grid article { padding:18px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.lesson-icon { width:34px; height:34px; display:grid; place-items:center; margin-bottom:13px; border-radius:10px; font-size:11px; font-weight:700; }
.lesson-grid h3 { margin:0; font-size:11px; }
.lesson-grid p { min-height:75px; margin:8px 0; color:#7b8985; font-size:8px; line-height:1.65; }
.lesson-grid b { color:var(--green); font-size:7px; }
.strategy-block { display:grid; grid-template-columns:1fr auto; align-items:center; gap:35px; margin-top:12px; padding:25px; border:1px solid #d8e4de; border-radius:16px; background:var(--green-soft); }
.strategy-block > div > span { display:inline-block; padding:5px 8px; border-radius:7px; color:#fff; background:var(--green); font-size:8px; font-weight:700; }
.strategy-block h2 { margin:8px 0 5px; font-size:17px; }
.strategy-block p { margin:0; color:#64766f; font-size:9px; line-height:1.7; }
.strategy-block ol { display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; margin:0; color:#526a62; font-size:8px; }

.app-footer { margin-top:35px; padding-top:16px; border-top:1px solid var(--line); color:#99a39f; font-size:8px; text-align:center; }
.mobile-nav { display:none; }
.modal-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:18px; background:rgba(8,29,24,.48); backdrop-filter:blur(5px); }
.modal { position:relative; width:min(520px,100%); max-height:86vh; overflow:auto; padding:29px; border-radius:20px; background:#fff; box-shadow:0 28px 85px rgba(0,0,0,.23); }
.modal-close { position:absolute; right:15px; top:15px; width:30px; height:30px; border:0; border-radius:50%; color:#74837e; background:#eff2ef; }
.modal-mark { width:35px; height:35px; display:grid; place-items:center; border-radius:10px; color:#fff; background:var(--green); font-size:10px; font-weight:700; }
.modal h2 { margin:14px 0 16px; font-size:20px; }
.modal-form { display:grid; gap:12px; }
.modal-form .form-row { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.strategy-form-block { display:grid; gap:11px; padding:14px; border-radius:12px; background:var(--green-soft); }
.strategy-form-block > strong { color:var(--green); font-size:10px; }
.strategy-form-block p { margin:0; color:#71837c; font-size:7px; line-height:1.6; }
.strategy-modal-lead { padding:13px; border-radius:11px; background:var(--green-soft); }
.strategy-modal-lead strong { color:var(--green); font-size:11px; }
.strategy-modal-lead p { margin:5px 0 0; color:#61756e; font-size:8px; line-height:1.65; }
.risk-callout { margin-top:12px; padding:14px 16px; border:1px solid #ecd5c6; border-radius:12px; color:#8d5c43; background:#fff3eb; }
.risk-callout strong { font-size:9px; }
.risk-callout p { margin:5px 0 0; font-size:8px; line-height:1.7; }
.modal-form button { margin-top:5px; }
.modal p,.modal li { color:#687b74; font-size:9px; line-height:1.7; }
.modal-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:14px 0; }
.modal-metrics div { padding:9px; border-radius:9px; background:#f5f7f4; }
.modal-metrics span,.modal-metrics strong,.modal-metrics small { display:block; }
.modal-metrics span { color:#909d98; font-size:7px; }
.modal-metrics strong { margin-top:3px; font-size:10px; }
.modal-metrics small { color:#929e99; font-size:6px; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:17px; }
.danger-button { padding:10px 13px; border:0; border-radius:9px; color:#fff; background:var(--red); font-size:9px; font-weight:700; }
.toast { position:fixed; z-index:120; right:24px; bottom:24px; max-width:330px; padding:12px 15px; border-radius:10px; color:#fff; background:var(--green-dark); box-shadow:0 12px 30px rgba(0,0,0,.2); font-size:9px; opacity:0; transform:translateY(9px); pointer-events:none; transition:.2s ease; }
.toast.show { opacity:1; transform:none; }

@media (max-width:1100px) {
  .app-sidebar { width:205px; }
  .app-main { margin-left:205px; padding-inline:25px; }
  .metric-grid { grid-template-columns:repeat(2,1fr); }
  .lesson-grid { grid-template-columns:repeat(2,1fr); }
  .holding-row { grid-template-columns:minmax(190px,1.2fr) repeat(2,minmax(70px,.5fr)) auto; }
  .holding-row .hide-tablet { display:none; }
}

@media (max-width:860px) {
  body { padding-bottom:66px; }
  .auth-screen { grid-template-columns:1fr; }
  .auth-story { min-height:300px; padding:30px 7vw; }
  .story-copy { margin:55px 0; }
  .story-copy h1 { font-size:42px; }
  .auth-risk { display:none; }
  .auth-panel { padding:45px 22px; }
  .app-sidebar { display:none; }
  .app-main { margin:0; padding:0 18px 25px; }
  .mobile-nav { position:fixed; inset:auto 0 0 0; z-index:60; display:grid; grid-template-columns:repeat(5,1fr); padding:7px 8px max(7px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(255,255,255,.94); backdrop-filter:blur(14px); }
  .mobile-nav button { display:grid; place-items:center; gap:2px; border:0; color:#84928d; background:transparent; font-size:7px; }
  .mobile-nav span { font-size:17px; }
  .mobile-nav button.active { color:var(--green); font-weight:700; }
  .flow-grid,.portfolio-layout,.plan-layout { grid-template-columns:1fr; }
  .position-strategy-grid { grid-template-columns:1fr; }
  .strategy-rulebook { grid-template-columns:1fr 1fr; }
  .plan-preview { order:-1; }
  .method-card { grid-template-columns:1fr; }
  .method-card ol { grid-template-columns:repeat(2,1fr); }
  .dossier-grid { grid-template-columns:1fr; }
  .analysis-step.wide { grid-column:auto; }
}

@media (max-width:620px) {
  .app-main { padding-inline:13px; }
  .app-header { min-height:82px; }
  .app-header h1 { font-size:18px; }
  .live-state,.profile-button b { display:none; }
  .dashboard-hero { grid-template-columns:1fr; gap:22px; padding:25px 21px; }
  .dashboard-hero h2 { font-size:24px; }
  .hero-score { display:flex; align-items:center; gap:10px; text-align:left; }
  .score-ring { width:74px; height:74px; margin:0; }
  .score-ring::before { inset:7px; }
  .score-ring strong { font-size:19px; }
  .hero-buttons { flex-direction:column; }
  .trade-strip { grid-template-columns:auto 1fr; }
  .trade-strip > p { grid-column:1/-1; padding:10px 0 0; border-top:1px solid #eadfae; border-left:0; }
  .metric-grid,.portfolio-metrics { grid-template-columns:1fr 1fr; }
  .advice-row { grid-template-columns:39px minmax(0,1fr); }
  .advice-actions { grid-column:2; display:flex; align-items:center; justify-content:space-between; text-align:left; }
  .advice-actions button { margin:0; }
  .learning-preview { grid-template-columns:1fr; }
  .pot-row { justify-content:space-between; }
  .page-intro h2 { font-size:23px; }
  .code-search { grid-template-columns:auto 1fr; }
  .code-search button { grid-column:1/-1; }
  .method-card ol,.watchlist-grid,.lesson-grid { grid-template-columns:1fr; }
  .market-environment { grid-template-columns:1fr; }
  .breadth-meter { text-align:left; }
  .breadth-meter i { width:100%; }
  .growth-watch .check-grid { grid-template-columns:1fr 1fr; }
  .momentum-summary { grid-template-columns:1fr; }
  .momentum-summary span { white-space:normal; }
  .dossier-head { align-items:stretch; flex-direction:column; }
  .dossier-head > div:last-child { justify-content:space-between; }
  .dossier-summary { grid-template-columns:1fr 1fr; }
  .dossier-summary > div:nth-child(3) { border-left:0; border-top:1px solid var(--line); }
  .dossier-summary > div:nth-child(4) { border-top:1px solid var(--line); }
  .asset-layout { grid-template-columns:1fr; }
  .top-holdings { grid-template-columns:1fr; }
  .announcement-list a { align-items:flex-start; flex-direction:column; gap:4px; }
  .goal-grid { grid-template-columns:1fr; }
  .goal-grid button { display:grid; grid-template-columns:25px 1fr; }
  .goal-grid span { grid-row:1/3; margin:0; }
  .allocation-wrap { gap:18px; }
  .allocation-donut { width:110px; height:110px; }
  .allocation-donut::after { inset:19px; }
  #allocationLegend { min-width:0; flex:1; }
  .portfolio-intro { align-items:stretch; flex-direction:column; }
  .portfolio-intro > div:last-child { display:grid; grid-template-columns:1fr 1fr; }
  .holding-row { grid-template-columns:minmax(0,1fr) auto; }
  .holding-row .row-metric { display:none; }
  .strategy-numbers { grid-template-columns:1fr 1fr; }
  .essence-block { align-items:flex-start; flex-direction:column; }
  .strategy-block { grid-template-columns:1fr; }
  .strategy-block ol { padding-left:20px; }
  .modal { padding:25px 20px; }
  .modal-form .form-row,.modal-metrics { grid-template-columns:1fr; }
  .toast { right:13px; bottom:77px; left:13px; max-width:none; }
}

@media (max-width:390px) {
  .metric-grid,.portfolio-metrics { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; }
}