:root {
  color-scheme: dark;
  --bg: #010713;
  --surface: #040b1f;
  --card: #07152f;
  --card-2: #0a1b3c;
  --cyan: #18d9ff;
  --purple: #8a72ff;
  --green: #20e3b2;
  --gold: #f2c66d;
  --danger: #ff6078;
  --text: #f5f8ff;
  --muted: #9aa9c8;
  --line: rgba(135, 166, 226, 0.2);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--text); background: var(--bg); }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
p { line-height: 1.75; }
h1, h2, h3, p { margin-top: 0; }
.ambient { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 20% 0%, rgba(24, 217, 255, .10), transparent 32%), radial-gradient(circle at 85% 18%, rgba(138, 114, 255, .12), transparent 28%); }
#app { position: relative; min-height: 100vh; }
.screen { min-height: 100vh; margin: 0 auto; overflow: hidden; }
.content-screen { width: min(100%, 720px); padding: 28px 20px 72px; }
.app-screen { width: min(100%, 520px); padding: 0 16px 104px; background: linear-gradient(180deg, rgba(5, 14, 35, .92), rgba(1, 7, 19, .98)); box-shadow: 0 0 80px rgba(0, 0, 0, .35); }
.eyebrow { display: inline-block; color: var(--cyan); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.section-head { margin: 38px 0 28px; }
.section-head h2 { max-width: 760px; margin: 8px 0 10px; font-size: clamp(30px, 7vw, 54px); line-height: 1.12; letter-spacing: -.04em; }
.section-head p { max-width: 680px; color: var(--muted); font-size: 15px; }
.back-button, .text-button, .brand-mini, .icon-button { border: 0; background: none; cursor: pointer; }
.back-button { padding: 8px 0; color: var(--muted); font-weight: 700; }
.button { min-height: 50px; border: 1px solid transparent; border-radius: 14px; padding: 14px 18px; font-weight: 800; cursor: pointer; transition: transform .2s ease, border-color .2s ease, filter .2s ease; }
.button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.button-primary { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; color: #00101a; background: linear-gradient(105deg, var(--cyan), #6894ff 58%, var(--purple)); box-shadow: 0 14px 36px rgba(24, 217, 255, .18); }
.button-secondary { width: 100%; color: var(--text); border-color: var(--line); background: rgba(12, 28, 59, .78); }
.full-button { margin-top: 16px; }
.demo-pill, .demo-payment-note { display: inline-flex; align-items: center; border: 1px solid rgba(242, 198, 109, .34); color: var(--gold); background: rgba(242, 198, 109, .08); }
.demo-pill { margin-right: 6px; padding: 3px 7px; border-radius: 6px; font-size: 10px; font-weight: 800; }
.demo-payment-note { margin-bottom: 20px; padding: 10px 12px; border-radius: 10px; font-size: 12px; }

/* Home */
.screen-home { width: min(100%, 520px); padding: 18px 20px 40px; }
.hero-shell { position: relative; min-height: calc(100vh - 36px); display: flex; flex-direction: column; padding: 18px 4px; }
.hero-topline { display: flex; align-items: center; gap: 9px; color: #dce8ff; font-weight: 800; }
.hero-topline small { margin-left: auto; color: var(--muted); font-size: 9px; letter-spacing: .14em; }
.brand-mark, .brand-mini span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(24, 217, 255, .5); border-radius: 50%; color: var(--cyan); background: rgba(24, 217, 255, .08); }
.episode-tag { margin-top: clamp(44px, 10vh, 88px); color: var(--purple); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.hero-shell h1 { margin: 15px 0 16px; font-size: clamp(40px, 11vw, 66px); line-height: 1.04; letter-spacing: -.055em; }
.hero-shell h1 em { color: var(--cyan); font-style: normal; text-shadow: 0 0 26px rgba(24, 217, 255, .28); }
.hero-shell > p { max-width: 440px; color: var(--muted); font-size: 15px; }
.hero-visual { position: relative; flex: 1; min-height: 250px; margin: 4px 0 16px; }
.hero-core { position: absolute; left: 50%; top: 52%; z-index: 2; transform: translate(-50%, -50%); display: grid; place-items: center; width: 126px; height: 126px; border: 1px solid rgba(24, 217, 255, .65); border-radius: 50%; background: radial-gradient(circle, rgba(24, 217, 255, .25), rgba(4, 11, 31, .92) 62%); box-shadow: 0 0 60px rgba(24, 217, 255, .24); }
.hero-core span, .hero-core small { color: var(--muted); font-size: 10px; letter-spacing: .14em; }
.hero-core strong { font-size: 48px; line-height: 1; }
.orbit { position: absolute; left: 50%; top: 52%; border: 1px solid rgba(138, 114, 255, .38); border-radius: 50%; transform: translate(-50%, -50%) rotate(-12deg); }
.orbit-one { width: 270px; height: 110px; }.orbit-two { width: 230px; height: 210px; border-color: rgba(24, 217, 255, .22); transform: translate(-50%, -50%) rotate(22deg); }
.signal { position: absolute; z-index: 3; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: #dce9ff; background: rgba(5, 15, 36, .9); font-size: 10px; box-shadow: var(--shadow); }
.signal-a { left: 3%; top: 24%; }.signal-b { right: 2%; top: 31%; }.signal-c { left: 8%; bottom: 15%; }
.value-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; color: var(--muted); font-size: 10px; text-align: center; }.value-strip span { padding: 8px 3px; border-top: 1px solid var(--line); }

/* Journey and onboarding */
.journey-line { display: grid; gap: 14px; }
.journey-line article { display: grid; grid-template-columns: 50px 1fr; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(135deg, rgba(9, 27, 60, .82), rgba(5, 13, 34, .95)); }
.journey-line article > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--cyan); background: rgba(24, 217, 255, .08); font-weight: 900; }
.journey-line h3 { margin: 1px 0 5px; }.journey-line p { margin: 0; color: var(--muted); font-size: 13px; }
.promise-card, .reward-note, .privacy-card { margin: 18px 0; padding: 20px; border: 1px solid rgba(138, 114, 255, .34); border-radius: var(--radius); background: rgba(138, 114, 255, .07); }
.promise-card p, .reward-note p, .privacy-card p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.selection-bar { position: sticky; top: 10px; z-index: 5; display: flex; align-items: center; gap: 16px; margin-bottom: 18px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; backdrop-filter: blur(18px); background: rgba(4, 11, 31, .86); }.selection-bar strong { color: var(--cyan); font-size: 24px; }.selection-bar span { color: var(--muted); font-size: 12px; }.mini-progress { flex: 1; height: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }.mini-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--purple)); transition: width .25s; }
.drama-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.drama-card { position:relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(7, 21, 47, .88); transition: border-color .2s, transform .2s; }.drama-card.selected { border-color: var(--cyan); transform: translateY(-2px); box-shadow: 0 0 24px rgba(24, 217, 255, .12); }
.drama-cover { position: relative; width: 100%; aspect-ratio: 16/11; border: 0; cursor: pointer; background: radial-gradient(circle at 70% 30%, rgba(138,114,255,.6), transparent 26%), linear-gradient(145deg, #123766, #071027 60%, #111b4a); }.drama-cover .play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; transform: translate(-50%,-50%); background: rgba(1,7,19,.55); }.episode, .category { position: absolute; top: 10px; font-size: 9px; font-weight: 900; }.episode { left: 10px; color: var(--cyan); }.category { right: 10px; padding: 3px 6px; border-radius: 5px; background: rgba(1,7,19,.62); }
.drama-card > div { padding: 13px; }.drama-card h3 { margin-bottom: 5px; font-size: 15px; }.drama-card p { min-height: 45px; margin-bottom: 10px; color: var(--muted); font-size: 11px; line-height: 1.5; }.select-button { width: 100%; padding: 9px 4px; border: 1px solid var(--line); border-radius: 8px; color: var(--cyan); background: rgba(24,217,255,.05); cursor: pointer; font-size: 11px; font-weight: 800; }
.sticky-action { position: sticky; z-index: 6; bottom: 12px; margin-top: 24px; padding: 8px; border-radius: 18px; background: rgba(1,7,19,.86); backdrop-filter: blur(18px); }

/* Membership */
.plan-grid { display: grid; gap: 14px; }.plan-card { position: relative; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(155deg, rgba(12,35,72,.9), rgba(4,11,31,.98)); }.plan-card.cyan { border-color: rgba(24,217,255,.45); }.plan-card.purple { border-color: rgba(138,114,255,.52); }.plan-card.gold { border-color: rgba(242,198,109,.58); }.plan-label { color: var(--muted); font-size: 11px; font-weight: 800; }.plan-price strong { display: block; margin: 13px 0 2px; font-size: 44px; letter-spacing: -.05em; }.plan-card.purple .plan-price { color: #ba9cff; }.plan-card.gold .plan-price { color: var(--gold); }.plan-card h2 { margin-bottom: 8px; }.plan-hook { min-height: 52px; color: #dce7ff; font-weight: 700; }.plan-card ul { min-height: 104px; padding: 0; list-style: none; color: var(--muted); font-size: 13px; line-height: 2; }.plan-card .button + .button { margin-top: 8px; }

/* Forms */
.step-progress { height: 5px; margin-bottom: 18px; border-radius: 999px; background: rgba(255,255,255,.08); }.step-progress i { display: block; height: 100%; border-radius: inherit; background: var(--cyan); }
.form-card { display: grid; gap: 16px; }.form-card fieldset { margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(7,21,47,.74); }.form-card legend { padding: 0 7px; font-weight: 800; }.form-card label, .dialog-field { display: grid; gap: 7px; margin-top: 12px; color: var(--muted); font-size: 12px; }.form-card input, .form-card select, .dialog-field input { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color: var(--text); background: #061126; }.form-grid, .choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }.choice-grid label { display: flex; align-items: center; min-height: 44px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.02); }.choice-grid input { width: auto; min-height: auto; }.safety-note { padding: 14px; border-left: 3px solid var(--gold); color: var(--muted); background: rgba(242,198,109,.07); font-size: 12px; line-height: 1.65; }
.declaration-card { position: relative; padding: 32px 24px; border: 1px solid rgba(138,114,255,.42); border-radius: var(--radius-lg); background: linear-gradient(150deg, rgba(15,29,70,.96), rgba(5,12,31,.96)); box-shadow: var(--shadow); }.quote-mark { position: absolute; right: 20px; top: 4px; color: rgba(138,114,255,.28); font-size: 90px; }.declaration-card h2 { color: var(--cyan); }.declaration-card p { color: #c4cde2; }.declaration-sign { display: flex; justify-content: space-between; align-items: end; margin-top: 26px; padding-top: 15px; border-top: 1px solid var(--line); }.declaration-sign span { font-family: "KaiTi", serif; font-size: 24px; }.declaration-sign small { color: var(--muted); }.share-options { display: grid; gap: 9px; margin: 18px 0; color: var(--muted); font-size: 12px; }
.appearance-guide { display: grid; gap: 10px; margin-bottom: 16px; }.upload-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 78px; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(7,21,47,.78); }.upload-card > span { display: grid; place-items: center; width: 48px; height: 48px; border: 1px dashed rgba(24,217,255,.44); border-radius: 12px; color: var(--cyan); background: rgba(24,217,255,.06); font-weight: 900; }.upload-card.ready > span { border-style: solid; color: var(--green); }.upload-card div { display: grid; gap: 5px; }.upload-card small { color: var(--muted); font-size: 10px; }.upload-card button { border: 0; color: var(--cyan); background: none; cursor: pointer; font-size: 11px; font-weight: 800; }.appearance-status { display: grid; gap: 13px; margin: 18px 0; padding: 18px; border: 1px solid rgba(138,114,255,.32); border-radius: var(--radius); background: rgba(138,114,255,.06); }.appearance-status > div { display: grid; grid-template-columns: 86px 1fr 38px; align-items: center; gap: 8px; font-size: 10px; }.appearance-status i { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }.appearance-status b { display: block; height: 100%; background: linear-gradient(90deg,var(--cyan),var(--purple)); }.appearance-status em { color: var(--green); font-style: normal; text-align: right; }

/* App shell */
.app-header { position: sticky; top: 0; z-index: 8; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 70px; margin: 0 -16px 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: rgba(1,7,19,.82); backdrop-filter: blur(18px); }.brand-mini { display: flex; align-items: center; gap: 7px; justify-self: start; padding: 0; font-size: 11px; font-weight: 800; }.brand-mini span { width: 27px; height: 27px; }.app-header > div { text-align: center; }.app-header > div strong, .app-header > div small { display: block; }.app-header > div small { margin-top: 3px; color: var(--muted); font-size: 9px; }.icon-button { position: relative; justify-self: end; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; }.notice-dot { position: absolute; right: 4px; top: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
.bottom-nav { position: fixed; z-index: 20; left: 50%; bottom: 0; transform: translateX(-50%); display: grid; grid-template-columns: repeat(4, 1fr); width: min(100%, 520px); padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: rgba(2,8,21,.94); backdrop-filter: blur(18px); }.bottom-nav button { display: grid; gap: 2px; place-items: center; border: 0; color: var(--muted); background: none; cursor: pointer; }.bottom-nav button span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; font-size: 11px; font-weight: 900; }.bottom-nav button small { font-size: 9px; }.bottom-nav button.active { color: var(--cyan); }.bottom-nav button.active span { border: 1px solid rgba(24,217,255,.35); background: rgba(24,217,255,.1); }
.today-hero { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 15px; padding: 20px 4px 22px; }.today-hero h1 { margin: 8px 0; font-size: 30px; line-height: 1.2; }.today-hero p { margin: 0; color: var(--muted); font-size: 10px; }
.progress-ring { --progress: 0; display: grid; place-items: center; align-content: center; width: 112px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #061329 58%, transparent 60%), conic-gradient(var(--cyan) calc(var(--progress) * 1%), rgba(255,255,255,.08) 0); box-shadow: 0 0 30px rgba(24,217,255,.12); }.progress-ring strong { font-size: 26px; }.progress-ring strong small { font-size: 11px; }.progress-ring > span { color: var(--muted); font-size: 9px; }
.streak-strip, .profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 14px; padding: 14px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(7,21,47,.78); }.streak-strip div, .profile-stats div { display: grid; place-items: center; gap: 4px; border-right: 1px solid var(--line); }.streak-strip div:last-child, .profile-stats div:last-child { border: 0; }.streak-strip strong, .profile-stats strong { font-size: 20px; }.streak-strip span, .profile-stats span { color: var(--muted); font-size: 9px; }
.energy-card, .card, .task-section, .meal-section { margin-bottom: 14px; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(8,26,57,.94), rgba(4,12,31,.94)); }.energy-card header, .task-section header, .meal-section header, .section-card header { display: flex; align-items: center; justify-content: space-between; }.energy-card h2 { margin: 5px 0 0; color: var(--green); font-size: 30px; }.energy-card h2 small { font-size: 12px; }.trend { padding: 5px 8px; border-radius: 999px; font-size: 9px; }.trend.safe { color: var(--green); background: rgba(32,227,178,.09); }.energy-formula { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 7px; margin-top: 14px; }.energy-formula div { display: grid; gap: 4px; text-align: center; }.energy-formula strong { font-size: 17px; }.energy-formula span, .energy-card > p { color: var(--muted); font-size: 9px; }.energy-card > p { margin: 12px 0 0; }.text-button { color: var(--cyan); font-size: 11px; font-weight: 800; }
.task-section h2, .meal-section h2, .section-card h2 { margin: 4px 0 0; font-size: 20px; }.task-list { display: grid; gap: 8px; margin-top: 14px; }.task-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; width: 100%; min-height: 61px; border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; text-align: left; background: rgba(3,11,28,.68); cursor: pointer; }.task-item.done { border-color: rgba(32,227,178,.22); }.task-item > span { display: grid; gap: 4px; }.task-item small { color: var(--muted); font-size: 9px; }.task-item > i { color: var(--muted); font-style: normal; font-size: 18px; }.task-item.done > i { color: var(--green); }.icon-badge { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(24,217,255,.26); border-radius: 11px; color: var(--cyan); background: rgba(24,217,255,.08); font-size: 11px; font-weight: 900; }.icon-badge.purple { color: #b49cff; border-color: rgba(138,114,255,.35); background: rgba(138,114,255,.08); }
.meal-list { display: grid; gap: 8px; margin-top: 14px; }.meal-list article { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }.meal-photo { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; color: var(--gold); background: linear-gradient(145deg, rgba(242,198,109,.18), rgba(138,114,255,.12)); }.meal-list div { display: grid; gap: 3px; }.meal-list small, .meal-list time { color: var(--muted); font-size: 9px; }

/* Growth, creation, profile */
.growth-hero { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; padding: 20px 4px; }.growth-hero .progress-ring { width: 104px; }.growth-hero h1 { margin: 8px 0; font-size: 33px; }.growth-hero h1 small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }.growth-hero p { margin: 0; color: var(--muted); font-size: 10px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 14px; }.metric { display: grid; place-items: center; gap: 5px; min-height: 74px; padding: 8px 3px; border: 1px solid var(--line); border-radius: 11px; background: rgba(7,21,47,.74); text-align: center; }.metric strong { font-size: 20px; }.metric strong small { margin-left: 2px; font-size: 9px; }.metric span { color: var(--muted); font-size: 8px; }
.habit-bars { display: grid; gap: 12px; margin-top: 16px; }.habit-bars > div { display: grid; grid-template-columns: 62px 1fr 34px; align-items: center; gap: 8px; font-size: 10px; }.habit-bars i { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }.habit-bars b { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--purple)); }.habit-bars strong { text-align: right; }
.week-chart { display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; height: 160px; margin-top: 18px; padding-top: 8px; border-bottom: 1px solid var(--line); }.week-chart div { display: grid; grid-template-rows: 1fr auto auto; align-items: end; justify-items: center; height: 100%; }.week-chart div > span { width: 24px; min-height: 8px; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, var(--purple), rgba(24,217,255,.55)); }.week-chart strong { margin-top: 5px; font-size: 9px; }.week-chart small { margin: 5px 0 7px; color: var(--muted); font-size: 8px; }
.timeline { display: grid; gap: 0; margin: 18px 0; }.timeline article { display: grid; grid-template-columns: 64px 1fr; gap: 13px; padding: 0 0 18px; }.timeline article > span { color: var(--cyan); font-size: 10px; font-weight: 800; }.timeline article > div { position: relative; padding-left: 15px; border-left: 1px solid var(--line); }.timeline article > div::before { content: ''; position: absolute; left: -4px; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }.timeline strong { font-size: 12px; }.timeline p { margin: 4px 0; color: var(--muted); font-size: 10px; }
.creation-hero { padding: 24px 4px; }.creation-hero h1 { margin: 8px 0; font-size: 32px; line-height: 1.15; }.creation-hero p { color: var(--muted); font-size: 11px; }.moment-card { overflow: hidden; border: 1px solid rgba(138,114,255,.44); border-radius: var(--radius-lg); background: rgba(7,21,47,.88); }.moment-visual { position: relative; display: grid; place-items: center; min-height: 220px; background: radial-gradient(circle at center, rgba(24,217,255,.2), transparent 36%), linear-gradient(145deg, #0b2b58, #071128 60%, #231550); }.moment-visual > span { position: absolute; left: 15px; top: 14px; color: var(--cyan); font-size: 11px; font-weight: 900; }.moment-visual strong { font-size: 60px; }.moment-visual small { color: var(--muted); }.qr-placeholder { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 58px; height: 58px; border: 5px solid #fff; color: #00101a; background: repeating-conic-gradient(#00101a 0 12.5%, #fff 0 25%); font-size: 8px; font-weight: 900; text-align: center; }.moment-copy { padding: 18px; }.moment-copy h2 { margin: 7px 0; font-size: 19px; }.moment-copy p { color: var(--muted); font-size: 11px; }.moment-copy > strong { color: var(--green); font-size: 10px; }.action-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 14px; }
.creation-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }.creation-grid button { display: grid; gap: 6px; min-height: 116px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); text-align: left; background: rgba(7,21,47,.74); cursor: pointer; }.creation-grid button > span { color: var(--cyan); font-size: 22px; font-weight: 900; }.creation-grid small { color: var(--muted); font-size: 9px; }
.profile-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 20px 4px; }.avatar { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgba(24,217,255,.38); border-radius: 50%; color: var(--cyan); background: radial-gradient(circle, rgba(24,217,255,.18), #07152f); font-size: 22px; font-weight: 900; }.profile-card h1 { margin: 0 0 4px; }.profile-card p { margin: 0; color: var(--muted); font-size: 10px; }.member-badge { padding: 6px 8px; border-radius: 999px; color: var(--gold); background: rgba(242,198,109,.08); font-size: 9px; font-weight: 800; }
.menu-list { display: grid; gap: 8px; }.menu-list button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; min-height: 66px; border: 1px solid var(--line); border-radius: 13px; padding: 10px 12px; text-align: left; background: rgba(7,21,47,.72); cursor: pointer; }.menu-list button > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--cyan); background: rgba(24,217,255,.08); font-size: 11px; font-weight: 900; }.menu-list div { display: grid; gap: 4px; }.menu-list small { color: var(--muted); font-size: 9px; }.menu-list i { color: var(--muted); font-style: normal; font-size: 20px; }.version-note { margin: 16px 0; color: #6f7e9c; font-size: 9px; text-align: center; }

/* Graduation */
.graduation-screen { width: min(100%, 760px); }.certificate { position: relative; overflow: hidden; padding: 38px 22px 24px; border: 1px solid rgba(242,198,109,.58); border-radius: var(--radius-lg); color: #fff7df; background: radial-gradient(circle at 50% 20%, rgba(242,198,109,.18), transparent 35%), linear-gradient(145deg, #17213e, #070c1e 65%); text-align: center; box-shadow: 0 25px 70px rgba(0,0,0,.38); }.certificate::before { content: ''; position: absolute; inset: 11px; border: 1px solid rgba(242,198,109,.24); pointer-events: none; }.certificate-seal { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 12px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); }.certificate > span { color: var(--gold); font-size: 9px; letter-spacing: .18em; }.certificate h1 { margin: 12px 0 26px; font-family: "STSong", serif; font-size: 30px; }.certificate h2 { color: var(--gold); font-family: "KaiTi", serif; font-size: 30px; }.certificate p { margin: 8px; color: #bbc5d9; font-size: 12px; }.certificate-stats { display: grid; grid-template-columns: repeat(3,1fr); margin: 24px 0; padding: 14px 0; border-top: 1px solid rgba(242,198,109,.2); border-bottom: 1px solid rgba(242,198,109,.2); }.certificate-stats div { display: grid; gap: 4px; }.certificate-stats strong { color: var(--gold); font-size: 22px; }.certificate-stats span { color: var(--muted); font-size: 9px; }.certificate footer { display: flex; justify-content: space-between; color: var(--muted); font-size: 8px; }.deliverable-list { display: grid; gap: 9px; margin: 18px 0; }.deliverable-list article { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(7,21,47,.75); }.deliverable-list article > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--gold); background: rgba(242,198,109,.08); font-weight: 900; }.deliverable-list div { display: grid; gap: 4px; }.deliverable-list small { color: var(--muted); font-size: 9px; }.deliverable-list button { border: 0; color: var(--cyan); background: none; cursor: pointer; font-size: 11px; font-weight: 800; }

/* Dialog and feedback */
dialog { width: min(calc(100% - 28px), 560px); max-height: min(88vh, 780px); overflow: auto; border: 1px solid rgba(138,114,255,.46); border-radius: 22px; padding: 26px 20px 20px; color: var(--text); background: linear-gradient(155deg, #0a1d40, #030a1d 72%); box-shadow: 0 30px 120px rgba(0,0,0,.72); }dialog::backdrop { background: rgba(0,4,12,.78); backdrop-filter: blur(7px); }.dialog-close { position: sticky; z-index: 2; left: 100%; top: 0; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: #07152f; cursor: pointer; }.dialog-kicker { margin: 0 42px 7px 0; color: var(--cyan); font-size: 10px; font-weight: 900; letter-spacing: .12em; }.dialog-kicker.gold { color: var(--gold); }dialog h2 { margin-bottom: 10px; font-size: clamp(25px, 7vw, 36px); line-height: 1.18; }.dialog-copy, .dialog-note { color: var(--muted); font-size: 12px; }.dialog-price { color: var(--cyan); font-size: 46px; font-weight: 900; }.dialog-price.purple { color: #bc9cff; }.dialog-price.gold { color: var(--gold); }.dialog-list { display: grid; gap: 10px; padding: 0; list-style: none; }.dialog-list li { padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); }.dialog-list li::before { content: '✓'; margin-right: 9px; color: var(--green); }.outcome-box { display: grid; gap: 8px; margin: 14px 0; padding: 14px; border: 1px solid rgba(138,114,255,.35); border-radius: 12px; background: rgba(138,114,255,.08); }.outcome-box span { color: #d6dcef; font-size: 12px; }.outcome-box span::before { content: '→'; margin-right: 8px; color: var(--purple); }.army-image { width: 100%; margin: 10px 0 14px; border: 1px solid rgba(24,217,255,.3); border-radius: 14px; }.employee-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }.employee-grid span { display: flex; align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; font-size: 10px; }.employee-grid i { color: var(--purple); font-style: normal; font-weight: 900; }.pay-summary { display: flex; justify-content: space-between; align-items: center; margin: 20px 0; padding: 16px; border: 1px solid rgba(242,198,109,.34); border-radius: 12px; background: rgba(242,198,109,.06); }.pay-summary strong { color: var(--gold); font-size: 30px; }.video-placeholder, .upload-placeholder { display: grid; place-items: center; min-height: 180px; margin: 14px 0; border: 1px dashed rgba(24,217,255,.36); border-radius: 14px; background: radial-gradient(circle, rgba(24,217,255,.12), transparent 46%); }.video-placeholder span { font-size: 42px; }.video-placeholder small { color: var(--muted); }.upload-placeholder { min-height: 100px; color: var(--cyan); font-size: 12px; }.ip-entry { display: grid; gap: 9px; margin: 15px 0; }.ip-entry span { color: var(--muted); font-size: 11px; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 86px; transform: translate(-50%, 18px); width: min(calc(100% - 32px), 430px); padding: 12px 16px; border: 1px solid rgba(24,217,255,.4); border-radius: 12px; color: #eaffff; background: rgba(4,18,38,.95); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: .25s ease; font-size: 12px; text-align: center; }.toast.show { transform: translate(-50%, 0); opacity: 1; }

@media (min-width: 760px) {
  .content-screen { padding-top: 42px; }
}

@media (max-width: 360px) {
  .content-screen, .app-screen { padding-left: 12px; padding-right: 12px; }
  .hero-shell h1 { font-size: 37px; }
  .today-hero h1 { font-size: 26px; }
  .progress-ring { width: 96px; }
  .form-grid { grid-template-columns: 1fr; }
  .energy-formula { gap: 3px; }.energy-formula strong { font-size: 14px; }
  .metric-grid { grid-template-columns: repeat(2,1fr); }
}

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

/* v0.2 — fixed phone H5 canvas */
body { background: #00050d; }
#app { display: flex; justify-content: center; }
.phone-screen, .content-screen, .app-screen, .screen-home, .graduation-screen { width: min(100%, 460px); }
.content-screen { padding: 24px 16px 72px; }
.app-screen { padding-left: 14px; padding-right: 14px; }
.bottom-nav { width: min(100%, 460px); }
.section-head { margin: 28px 0 20px; }
.section-head h2 { font-size: clamp(29px, 8.5vw, 40px); }
.plan-grid, .drama-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }

/* Reference-led cinematic entry */
.screen-home { min-height: 100svh; padding: 14px; background: linear-gradient(180deg,#020914,#01040b); }
.hero-shell { min-height: calc(100svh - 28px); padding: 10px 14px 24px; border: 1px solid rgba(84,123,183,.16); border-radius: 28px; background: radial-gradient(circle at 50% 28%,rgba(80,54,83,.28),transparent 34%),#020914; }
.hero-topline { z-index: 3; color: var(--gold); font-size: 20px; }
.hero-topline .brand-mark { border-color: var(--gold); color: var(--gold); }
.hero-topline button { margin-left: auto; border: 1px solid var(--line); border-radius: 999px; padding: 8px 17px; color: #aeb9cd; background: rgba(5,13,28,.7); }
.cinema-portrait { position: relative; height: 285px; margin: 16px -14px -88px; overflow: hidden; background: radial-gradient(circle at 78% 51%,#ffd68b 0 3%,#e98d49 4%,transparent 19%),linear-gradient(175deg,#091325 5%,#291d27 48%,#bd6737 72%,#07101d 73%); opacity: .88; }
.cinema-portrait::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 45%,#020914 95%); }
.woman-silhouette { position: absolute; z-index: 1; left: 17%; top: 56px; width: 150px; height: 240px; border-radius: 48% 45% 18% 18%; background: #020711; transform: rotate(-4deg); }
.woman-silhouette::before { content:''; position:absolute; left:45px; top:-37px; width:76px; height:88px; border-radius:50%; background:#020711; }
.hero-shell h1 { z-index: 2; margin: 0 0 12px; font-size: clamp(38px,11.5vw,53px); line-height: 1.12; letter-spacing: -.045em; }
.hero-shell h1 em { color: transparent; background: linear-gradient(90deg,#8b75ff,#1de3ef); -webkit-background-clip: text; background-clip: text; }
.hero-shell > p { z-index: 2; margin-bottom: 20px; font-size: 14px; }
.hero-shell > p span { color: var(--cyan); font-weight: 800; }
.episode-tag { z-index: 2; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 999px; padding: 11px; color: var(--cyan); text-align: center; }
.episode-tag i { margin: 0 9px; color: #fff; }
.value-strip { margin-top: 18px; border: 1px solid rgba(95,130,188,.12); border-radius: 15px; background: rgba(5,15,32,.66); }
.value-strip span { display: grid; gap: 4px; border: 0; padding: 13px 3px; font-size: 10px; }
.value-strip b { color: var(--cyan); font-size: 16px; }.value-strip small { color:#7e8ba6;font-size:8px; }
.private-story { margin-top: 18px; color: #56647e; text-align: center; }

/* Story selection */
.drama-select-screen .section-head { text-align: center; }
.drama-select-screen .section-head h2 { color: transparent; background: linear-gradient(90deg,#fff 8%,#21dce9 48%,#b96cff 86%); -webkit-background-clip:text; background-clip:text; font-size: 38px; }
.drama-select-screen .selection-bar { display: grid; justify-items: center; gap: 8px; }
.drama-select-screen .selection-bar > div:first-child { border: 1px solid var(--line); border-radius: 999px; padding: 8px 20px; color:#cdd6e8; }
.drama-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.drama-card p, .drama-card .select-button { display: none; }
.drama-card > div { padding: 12px; }.drama-card h3 { margin:0; font-size:14px; }
.drama-cover { aspect-ratio: 4/5; background: linear-gradient(155deg,#112a4d,#271c32 62%,#071023); }
.drama-card:nth-child(3n+2) .drama-cover { background:linear-gradient(160deg,#46301f,#121323 65%,#071020); }
.drama-card:nth-child(3n) .drama-cover { background:linear-gradient(160deg,#1b3f50,#15152a 65%,#070b18); }
.select-dot { position:absolute; right:8px; top:8px; display:grid; place-items:center; width:28px;height:28px;border:1px solid #8193ff;border-radius:50%;color:#9ba8ff;background:#071126;font-size:20px; }
.drama-card.selected .select-dot { color:#00100e;background:var(--green);border-color:var(--green); }
.story-update { margin:16px 0 0;border:1px solid var(--line);border-radius:999px;padding:11px;text-align:center;color:#b3c5e2;background:#09162c;font-size:12px; }
.sticky-action { display:grid; gap:8px; }.sticky-action small { color:#65738e;text-align:center; }

/* Membership */
.membership-screen { background: radial-gradient(circle at 50% 8%,rgba(27,80,165,.26),transparent 28%),linear-gradient(180deg,#06112a,#020817); }
.membership-hero { margin: 26px 0 22px; }.membership-progress { color:var(--cyan);font-size:11px;letter-spacing:.18em; }
.membership-hero h1 { margin:18px 0 8px;font-size:40px;line-height:1.08; }.membership-hero h1 em { display:block;color:transparent;background:linear-gradient(90deg,var(--cyan),var(--purple));-webkit-background-clip:text;background-clip:text;font-style:normal; }
.membership-hero p { color:var(--muted);font-size:12px; }
.plan-grid { display:grid;gap:13px; }
.plan-card { padding:18px;border-radius:18px; }
.plan-card.featured { box-shadow:0 0 28px rgba(24,217,255,.18),inset 0 0 18px rgba(24,217,255,.04); }
.plan-topline { display:flex;justify-content:space-between;gap:8px;align-items:center; }.plan-topline small { color:#9aa9c8;font-size:9px; }
.plan-heading { display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px;margin:12px 0; }
.plan-price { display:flex;align-items:baseline;gap:3px; }.plan-price strong { margin:0;font-size:42px; }.plan-price span { font-size:10px;color:var(--muted); }
.plan-heading h2 { margin:0 0 4px;font-size:17px; }.plan-heading p { min-height:0;margin:0;color:var(--muted);font-size:9px;line-height:1.5; }
.plan-benefits { display:grid;grid-template-columns:repeat(3,1fr);gap:7px; }.plan-benefits span { display:grid;place-items:center;gap:5px;min-height:74px;border:1px solid var(--line);border-radius:10px;padding:7px 3px;text-align:center; }.plan-benefits b { display:grid;place-items:center;width:27px;height:27px;border-radius:8px;color:var(--cyan);background:rgba(24,217,255,.08); }.plan-benefits strong { font-size:9px;line-height:1.35; }
.plan-detail-link { width:100%;margin:11px 0;border:0;color:#99acd0;background:none;font-size:10px;cursor:pointer; }
.membership-footnote { margin:16px 0;color:#7888a6;font-size:10px;text-align:center; }

/* Health filing */
.health-screen .step-label { display:block;margin-top:-8px;color:#8190ab;text-align:center;font-size:10px; }
.health-screen .section-head { text-align:center; }.health-screen .section-head p { font-size:12px; }
.mode-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }.mode-card { position:relative;display:grid;justify-items:center;gap:8px;border:1px solid var(--line);border-radius:16px;padding:20px 8px;text-align:center;background:#09152d; }.mode-card input { position:absolute;right:10px;bottom:10px;width:auto; }.mode-card b { display:grid;place-items:center;width:52px;height:52px;border-radius:16px;color:var(--cyan);background:radial-gradient(circle,#1c93ff,#102751);font-size:22px; }.mode-card strong { color:var(--cyan); }.mode-card span { color:var(--muted);font-size:10px;line-height:1.7; }.mode-card.safe b,.mode-card.safe strong { color:var(--green); }.mode-card.active { border-color:var(--cyan); }
.profile-options { display:grid;gap:8px!important;padding:0!important;border:0!important;background:none!important; }.profile-options legend { margin-bottom:8px; }.profile-options button { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;border:1px solid var(--line);border-radius:13px;padding:12px;color:var(--text);text-align:left;background:#09152d; }.profile-options button > b { display:grid;place-items:center;width:38px;height:38px;border-radius:10px;color:var(--cyan);background:rgba(24,217,255,.1); }.profile-options button > span { display:grid;gap:3px; }.profile-options small { color:var(--muted);font-size:9px; }.profile-options i { color:#9eabc2;font-style:normal;font-size:9px; }.health-numbers { opacity:.94; }

/* Today dashboard */
.today-hero { display:block;padding:20px 4px 14px; }.today-hero h1 { font-size:28px; }.day-pill { display:inline-block;margin-top:10px;border:1px solid var(--line);border-radius:999px;padding:7px 11px;color:#b9c6dc;font-size:10px; }
.completion-card { display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px;margin-bottom:13px;border:1px solid rgba(32,227,178,.42);border-radius:16px;padding:16px;background:linear-gradient(135deg,#0a203d,#07162f); }.completion-card .progress-ring { width:90px; }.completion-card p { margin:7px 0 0;color:var(--muted);font-size:10px; }
.task-tile-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px; }.task-tile { display:grid;justify-items:center;gap:8px;min-height:122px;border:1px solid var(--line);border-radius:14px;padding:12px 5px;background:#09162e;cursor:pointer; }.task-tile strong { font-size:11px;text-align:center; }.task-tile span:last-child { color:#7886a0;font-size:9px; }.task-tile.done span:last-child { color:var(--green); }
.custom-task-card,.evidence-card { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;width:100%;margin-bottom:10px;border:1px solid rgba(138,114,255,.4);border-radius:14px;padding:12px;text-align:left;background:linear-gradient(135deg,rgba(83,49,151,.3),#09162e); }.custom-task-card > span,.evidence-card div { display:grid;gap:4px; }.custom-task-card small,.evidence-card small { color:var(--muted);font-size:9px; }.custom-task-card i { color:#a691ff;font-style:normal;font-size:9px; }
.evidence-card { border-color:var(--line); }.evidence-card > span { display:grid;place-items:center;width:44px;height:44px;border:1px dashed var(--cyan);border-radius:10px;color:var(--cyan); }.evidence-card i { border:1px solid rgba(24,217,255,.3);border-radius:8px;padding:7px;color:var(--cyan);font-style:normal;font-size:9px; }
.energy-meter { height:7px;margin:15px 0;border-radius:999px;background:#17253c; }.energy-meter span { display:block;width:var(--meter);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold),var(--green),var(--cyan)); }.energy-mini-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center; }.energy-mini-grid span { display:grid;gap:4px;color:var(--muted);font-size:8px; }.energy-mini-grid b { color:#fff;font-size:13px; }

/* Moments and HQ campaigns */
.create-screen { background:radial-gradient(circle at 50% 0,rgba(45,67,150,.24),transparent 25%),#020817; }
.creator-tabs { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0 12px;border:1px solid var(--line);border-radius:12px;padding:5px;background:#071329; }.creator-tabs button { border:0;border-radius:9px;padding:9px 3px;color:var(--muted);background:none;font-size:10px; }.creator-tabs button.active { color:#00101a;background:linear-gradient(100deg,var(--cyan),#8d78ff);font-weight:800; }
.ai-assistant-card { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-bottom:12px;border:1px solid rgba(24,217,255,.35);border-radius:15px;padding:13px;background:linear-gradient(135deg,#0a2545,#12173b); }.assistant-orb { display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:#001018;background:linear-gradient(135deg,var(--cyan),var(--purple));font-weight:900; }.ai-assistant-card > div:nth-child(2) { display:grid;gap:3px; }.ai-assistant-card span { color:var(--cyan);font-size:10px; }.ai-assistant-card strong { font-size:13px; }.ai-assistant-card small { color:var(--muted);font-size:8px;line-height:1.5; }.ai-assistant-card i { color:var(--green);font-style:normal;font-size:8px; }
.copy-structure,.hq-campaign { margin-bottom:12px;border:1px solid var(--line);border-radius:15px;padding:15px;background:#08152d; }.copy-structure header,.hq-campaign header { display:flex;justify-content:space-between;align-items:center; }.copy-structure ol { display:grid;gap:9px;margin:13px 0 0;padding:0;list-style:none; }.copy-structure li { display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;border-top:1px solid rgba(135,166,226,.1);padding-top:9px; }.copy-structure li b { color:var(--purple);font-size:10px; }.copy-structure li span { display:grid;gap:3px; }.copy-structure li strong { font-size:11px; }.copy-structure li small { color:var(--muted);font-size:9px; }
.hq-campaign { border-color:rgba(242,198,109,.35);background:linear-gradient(135deg,rgba(74,51,21,.25),#08152d); }.hq-campaign h2 { margin:5px 0 0;font-size:18px; }.hq-campaign p { margin:10px 0;color:#c4cee1;font-size:10px; }.campaign-status { border-radius:999px;padding:5px 8px;color:var(--gold);background:rgba(242,198,109,.1);font-size:8px; }.campaign-meta { display:flex;flex-wrap:wrap;gap:6px; }.campaign-meta span { border:1px solid var(--line);border-radius:999px;padding:5px 7px;color:var(--muted);font-size:8px; }
.campaign-poster { min-height:330px;background:radial-gradient(circle at 50% 35%,rgba(25,218,255,.28),transparent 25%),linear-gradient(155deg,#103b6f,#07162e 58%,#21134e); }.campaign-poster .poster-kicker { position:absolute;top:56px;color:#e7f8ff;font-size:15px;font-weight:800; }.campaign-poster > strong { margin-top:30px;font-size:72px; }.poster-stats { display:flex;gap:6px;margin-top:12px; }.poster-stats b { border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:5px 7px;font-size:8px; }.campaign-poster .qr-placeholder { width:68px;height:68px;font-size:7px; }

/* Member drama library */
.drama-progress-summary { display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr;align-items:center;gap:6px;margin-bottom:14px;border:1px solid var(--line);border-radius:13px;padding:12px;background:#08152d; }.drama-progress-summary strong { color:var(--cyan);font-size:20px; }.drama-progress-summary span { color:var(--muted);font-size:8px; }
.member-drama-list { display:grid;gap:10px; }.member-drama-list article { display:grid;grid-template-columns:74px 1fr auto;align-items:center;gap:10px;border:1px solid var(--line);border-radius:14px;padding:9px;background:#08152d; }.member-drama-cover { position:relative;display:grid;place-items:center;width:74px;height:96px;border-radius:10px;background:linear-gradient(150deg,#174d76,#171630 70%); }.member-drama-cover span { position:absolute;left:7px;top:7px;color:var(--cyan);font-size:7px; }.member-drama-cover b { font-size:19px; }.member-drama-list h3 { margin:0 0 4px;font-size:13px; }.member-drama-list p { margin:0 0 6px;color:var(--muted);font-size:8px;line-height:1.5; }.production-status { font-size:8px; }.status-ready{color:var(--green)}.status-making{color:var(--cyan)}.status-waiting{color:var(--muted)}.member-drama-list article>button{border:0;color:var(--cyan);background:none;font-size:9px; }

/* Mobile certificate */
.graduation-screen { background:radial-gradient(circle at 50% 8%,rgba(242,198,109,.14),transparent 25%),#050b1d; }.graduation-screen .section-head { text-align:center; }.graduation-screen .certificate { border-width:2px;border-color:#e5b954;background:linear-gradient(160deg,#fff9e9,#f2e7c9);color:#0e1b37; }.graduation-screen .certificate::before { border-color:rgba(170,122,35,.45); }.graduation-screen .certificate p,.graduation-screen .certificate footer { color:#5e6470; }.graduation-screen .certificate h1 { color:#15203a; }.graduation-screen .certificate h2,.graduation-screen .certificate-stats strong { color:#c28c20; }

@media (min-width: 760px) {
  .phone-screen, .content-screen, .app-screen, .screen-home, .graduation-screen { width:460px; }
  .content-screen { padding-top:28px; }
  .plan-grid { grid-template-columns:1fr; }
  .drama-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* v0.3 — story-led entry, explicit meals and compact creation tabs */
.story-hero { position:relative;height:320px;margin:16px -14px 18px;overflow:hidden;background:#07101d; }
.story-hero::after { content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(2,9,20,.2) 66%,#020914 100%); }
.story-hero img { width:100%;height:100%;object-fit:cover;object-position:center 35%;filter:saturate(.86) contrast(1.04); }
.story-hero figcaption { position:absolute;z-index:2;left:22px;bottom:20px;color:#f5e7cd;font-family:"KaiTi","STKaiti",serif;font-size:17px;line-height:1.45;text-shadow:0 2px 16px #000; }
.hero-line-small,.hero-line-main { display:block; }
.hero-line-small { margin-bottom:6px;color:#d7dfed;font-family:"KaiTi","STKaiti",serif;font-size:.55em;font-weight:500;letter-spacing:.04em; }
.hero-line-main { font-size:.86em;line-height:1.04; }
.hero-shell h1 em { display:block;margin-top:6px;font-size:.9em; }

.situation-fields { display:grid;gap:12px; }
.situation-fields label { margin-top:0; }
.form-card textarea,.daily-reflection textarea { width:100%;resize:vertical;border:1px solid var(--line);border-radius:10px;padding:12px;color:var(--text);background:#061126;font:inherit;line-height:1.65; }
.form-card textarea:focus-visible,.daily-reflection textarea:focus-visible { outline:2px solid var(--cyan);outline-offset:2px; }

.meal-capture,.daily-reflection { margin-bottom:12px;border:1px solid var(--line);border-radius:16px;padding:16px;background:linear-gradient(145deg,rgba(8,26,57,.94),rgba(4,12,31,.94)); }
.meal-capture header { display:flex;align-items:end;justify-content:space-between;gap:10px; }
.meal-capture h2,.daily-reflection h2 { margin:5px 0 0;font-size:18px; }
.meal-capture header>small { color:var(--gold);font-size:9px; }
.meal-capture-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px; }
.meal-capture-grid button { display:grid;justify-items:center;gap:5px;min-width:0;border:1px solid var(--line);border-radius:12px;padding:9px 4px;color:var(--text);background:#071329;cursor:pointer; }
.meal-thumb { display:grid;place-items:center;width:48px;height:48px;border-radius:10px;color:#2b1b06;background:linear-gradient(145deg,#f0c979,#d68b4c);font-weight:900; }
.meal-capture-grid strong { font-size:11px; }.meal-capture-grid small { color:var(--muted);font-size:8px;text-align:center; }.meal-capture-grid i { color:var(--cyan);font-style:normal;font-size:8px; }
.meal-capture>p { margin:11px 0 0;color:var(--muted);font-size:9px; }
.daily-reflection textarea { margin:12px 0;min-height:112px; }
.meal-analysis-preview { display:grid;gap:6px;margin:12px 0;border:1px solid var(--line);border-radius:12px;padding:12px;background:#071329; }.meal-analysis-preview span,.meal-analysis-preview small { color:var(--muted);font-size:10px; }.meal-analysis-preview strong { color:var(--gold);font-size:18px; }

.creator-panel[hidden] { display:none!important; }
.creator-panel { animation:panel-in .18s ease-out; }
@keyframes panel-in { from { opacity:.45;transform:translateY(5px); } to { opacity:1;transform:none; } }
.poster-background { position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%; }
.campaign-poster::after { content:'';position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(1,7,19,.08) 24%,rgba(1,7,19,.28) 50%,rgba(1,7,19,.95) 100%); }
.campaign-poster>span,.poster-story-copy,.poster-qr { z-index:2; }
.poster-story-copy { position:absolute;left:16px;right:16px;bottom:20px;padding-right:76px; }
.poster-story-copy>small { display:block;margin-bottom:6px;color:var(--cyan);font-size:8px; }
.poster-story-copy>strong { display:block;font-family:"KaiTi","STKaiti",serif;font-size:19px;line-height:1.42;text-shadow:0 2px 12px #000; }
.poster-story-copy .poster-stats { justify-content:flex-start;margin-top:9px; }
.poster-qr { right:10px!important;bottom:10px!important;width:62px!important;height:62px!important;border-width:4px!important; }
.surprise-card { margin-bottom:12px;overflow:hidden;border:1px solid rgba(242,198,109,.42);border-radius:18px;padding:20px;background:radial-gradient(circle at 90% 0,rgba(242,198,109,.18),transparent 30%),linear-gradient(145deg,#15223c,#071329); }
.surprise-badge { display:inline-block;border:1px solid rgba(242,198,109,.3);border-radius:999px;padding:6px 10px;color:var(--gold);font-size:9px; }
.surprise-card h2 { margin:18px 0 6px;font-size:27px; }.surprise-card>p { color:#c4cee1;font-size:11px; }
.surprise-gift { display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;margin:16px 0;border:1px solid var(--line);border-radius:13px;padding:13px;background:rgba(255,255,255,.03); }.surprise-gift>b { font-size:28px; }.surprise-gift span { display:grid;gap:4px; }.surprise-gift small { color:var(--muted);font-size:9px; }

/* v0.4 — automatic creations, lively semantic icons and member story profile */
.icon-badge svg,.nav-icon svg,.work-icon svg,.colorful-menu button>span svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.icon-badge { position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 18px rgba(0,0,0,.18); }
.icon-badge::after { content:'';position:absolute;inset:2px;border-radius:8px;background:linear-gradient(145deg,rgba(255,255,255,.11),transparent 50%);pointer-events:none; }
.tone-water { color:#45baff!important;border-color:rgba(69,186,255,.42)!important;background:linear-gradient(145deg,rgba(32,119,255,.27),rgba(19,67,137,.18))!important; }
.tone-meal { color:#ffc85c!important;border-color:rgba(255,200,92,.4)!important;background:linear-gradient(145deg,rgba(255,166,43,.25),rgba(111,62,8,.17))!important; }
.tone-activity { color:#43e5b0!important;border-color:rgba(67,229,176,.4)!important;background:linear-gradient(145deg,rgba(29,191,143,.24),rgba(8,83,68,.15))!important; }
.tone-sleep { color:#a98bff!important;border-color:rgba(169,139,255,.4)!important;background:linear-gradient(145deg,rgba(122,83,255,.27),rgba(65,38,124,.17))!important; }
.tone-mood { color:#ff82b0!important;border-color:rgba(255,130,176,.4)!important;background:linear-gradient(145deg,rgba(226,68,132,.24),rgba(101,24,61,.16))!important; }
.tone-evidence { color:#59a4ff!important;border-color:rgba(89,164,255,.4)!important;background:linear-gradient(145deg,rgba(50,105,255,.26),rgba(21,53,129,.17))!important; }
.tone-book,.tone-create { color:#be91ff!important;border-color:rgba(190,145,255,.4)!important;background:linear-gradient(145deg,rgba(137,79,255,.28),rgba(58,33,120,.16))!important; }
.tone-home { color:#22dff3!important; }.tone-growth { color:#7f8cff!important; }.tone-profile { color:#ffbd58!important; }
.task-tile { position:relative;overflow:hidden;transition:border-color .18s ease,transform .18s ease; }
.task-tile::before { content:'';position:absolute;inset:auto 12% -35px;height:48px;border-radius:50%;background:currentColor;filter:blur(24px);opacity:.08; }
.task-tile.done { box-shadow:inset 0 0 24px rgba(255,255,255,.015); }
.bottom-nav .nav-icon { color:#71809d;background:transparent; }
.bottom-nav button:nth-child(1).active .nav-icon { color:#22dff3;background:rgba(34,223,243,.11);border-color:rgba(34,223,243,.32); }
.bottom-nav button:nth-child(2).active .nav-icon { color:#7f8cff;background:rgba(127,140,255,.12);border-color:rgba(127,140,255,.32); }
.bottom-nav button:nth-child(3).active .nav-icon { color:#bd83ff;background:rgba(189,131,255,.12);border-color:rgba(189,131,255,.32); }
.bottom-nav button:nth-child(4).active .nav-icon { color:#ffbd58;background:rgba(255,189,88,.11);border-color:rgba(255,189,88,.32); }
.bottom-nav button.active { color:inherit; }.bottom-nav button:nth-child(1).active{color:#22dff3}.bottom-nav button:nth-child(2).active{color:#7f8cff}.bottom-nav button:nth-child(3).active{color:#bd83ff}.bottom-nav button:nth-child(4).active{color:#ffbd58}

.water-reference { margin:0 0 10px;border:1px solid rgba(69,186,255,.32);border-radius:16px;padding:15px;background:radial-gradient(circle at 92% 10%,rgba(69,186,255,.14),transparent 31%),linear-gradient(145deg,#0a203d,#07142b); }
.water-reference-head { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px; }.water-reference-head h2 { margin:3px 0 0;font-size:18px; }.water-reference-head>strong { color:#45baff;font-size:22px; }
.water-checkpoints { display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:14px 0 10px; }.water-checkpoints i { height:7px;border-radius:999px;background:#1b2b47; }.water-checkpoints i.done { background:linear-gradient(90deg,#2a8dff,#45d8ff);box-shadow:0 0 10px rgba(69,186,255,.25); }
.water-numbers { display:grid;grid-template-columns:1fr 1fr;gap:7px;color:var(--muted);font-size:9px; }.water-numbers span { border:1px solid rgba(104,145,202,.14);border-radius:9px;padding:8px;background:rgba(255,255,255,.025); }.water-numbers span:last-child { grid-column:1/-1;text-align:center; }.water-numbers b { color:#eef8ff; }.water-reference>p { margin:10px 0 0;color:#7284a4;font-size:8px;line-height:1.55; }

.auto-poster-flow { display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:6px;margin:16px 0;border:1px solid rgba(32,227,178,.27);border-radius:15px;padding:11px 9px;background:linear-gradient(135deg,rgba(12,55,69,.48),rgba(23,20,69,.45)); }
.auto-poster-flow span { display:grid;gap:5px;color:#cdd8ec;font-size:8px;line-height:1.45;text-align:center; }.auto-poster-flow b { color:var(--green);font-size:10px; }.auto-poster-flow i { color:#61718f;font-style:normal;font-size:11px; }

.ai-writing-note { display:grid;grid-template-columns:auto 1fr;align-items:center;gap:11px;margin-bottom:12px;border:1px solid rgba(190,145,255,.3);border-radius:14px;padding:13px;background:linear-gradient(135deg,rgba(85,49,155,.2),rgba(7,21,47,.9)); }.ai-writing-note>span { display:grid;place-items:center;width:36px;height:36px;border-radius:11px;color:#d09cff;background:rgba(174,112,255,.12);font-size:18px; }.ai-writing-note div { display:grid;gap:4px; }.ai-writing-note small { color:var(--muted);font-size:9px;line-height:1.55; }
.works-grid { grid-template-columns:repeat(3,1fr); }.works-grid button { justify-items:center;min-width:0;padding:12px 6px;text-align:center; }.works-grid .work-icon { display:grid;place-items:center;width:39px;height:39px;border:1px solid;border-radius:12px; }.works-grid button>b { color:#eef5ff;font-size:15px; }.works-grid strong { font-size:10px; }.works-grid small { font-size:8px;line-height:1.45; }

.profile-story-cover { position:relative;min-height:292px;margin:0 -2px 14px;overflow:hidden;border:1px solid rgba(242,198,109,.28);border-radius:20px;background:#071329; }
.profile-story-cover>img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 44%;filter:saturate(.9) contrast(1.04); }
.profile-cover-shade { position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,8,21,.25),rgba(2,8,21,.55) 45%,#040b1c 100%); }
.profile-story-cover .profile-card { position:relative;z-index:2;padding:18px 16px; }.profile-story-cover blockquote { position:absolute;z-index:2;left:18px;right:18px;bottom:20px;margin:0;font-family:"KaiTi","STKaiti",serif;font-size:20px;font-weight:700;line-height:1.5;text-shadow:0 2px 14px #000; }.profile-story-cover blockquote span { color:#ffd06a; }
.colorful-menu button>span { border:1px solid; }.colorful-menu .tone-rights { color:#ffd064;background:rgba(255,183,55,.12);border-color:rgba(255,208,100,.3); }.colorful-menu .tone-army { color:#48dff4;background:rgba(40,197,240,.11);border-color:rgba(72,223,244,.3); }.colorful-menu .tone-compute { color:#a48cff;background:rgba(126,95,255,.12);border-color:rgba(164,140,255,.3); }.colorful-menu .tone-companion { color:#48e4ad;background:rgba(44,207,151,.11);border-color:rgba(72,228,173,.3); }.colorful-menu .tone-privacy { color:#6fa8ff;background:rgba(70,127,255,.11);border-color:rgba(111,168,255,.3); }.colorful-menu .tone-support { color:#ff82b0;background:rgba(226,68,132,.1);border-color:rgba(255,130,176,.3); }

@media (prefers-reduced-motion:no-preference) {
  .task-tile:active,.creation-grid button:active,.menu-list button:active { transform:scale(.985); }
}

/* v0.5 — four focused daily hubs and stronger growth colors */
.today-hero-v05 { padding:18px 4px 10px; }.today-hero-v05 .day-pill { margin:0 0 14px; }.today-hero-v05 h1 { margin:0;font-size:29px;line-height:1.28;letter-spacing:-.035em; }.today-hero-v05 h1 em { color:transparent;background:linear-gradient(90deg,#24dff1,#ba84ff);-webkit-background-clip:text;background-clip:text;font-style:normal; }.today-hero-v05 p { max-width:340px;margin:12px 0 0;color:#99a8c2;font-size:11px;line-height:1.7; }
.completion-card-v05 { border-color:rgba(126,140,255,.38);background:radial-gradient(circle at 88% 12%,rgba(185,121,255,.13),transparent 34%),linear-gradient(135deg,#0a203d,#10142f); }.completion-card-v05 strong { font-size:15px; }.completion-card-v05 p { line-height:1.65; }
.today-hub-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:0 0 12px; }.today-hub-card { display:grid;grid-template-columns:auto 1fr;grid-template-areas:'icon label' 'value value' 'note note';align-items:center;gap:6px;min-height:132px;border:1px solid var(--line);border-radius:16px;padding:13px;color:var(--text);text-align:left;background:#08152d;cursor:pointer; }.today-hub-card .icon-badge { grid-area:icon;width:34px;height:34px;border-radius:10px; }.today-hub-card .icon-badge svg { width:19px;height:19px; }.today-hub-card>small { grid-area:label;font-size:12px;font-weight:800; }.today-hub-card>strong { grid-area:value;font-size:28px;line-height:1; }.today-hub-card>strong em { margin-left:4px;color:var(--muted);font-size:9px;font-style:normal;font-weight:600; }.today-hub-card>span { grid-area:note;color:var(--muted);font-size:9px; }.today-hub-card.active { transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.22); }.hub-eat.active { border-color:rgba(255,200,92,.55);background:linear-gradient(145deg,rgba(112,66,16,.42),#08152d); }.hub-drink.active { border-color:rgba(69,186,255,.55);background:linear-gradient(145deg,rgba(22,78,142,.42),#08152d); }.hub-move.active { border-color:rgba(67,229,176,.55);background:linear-gradient(145deg,rgba(13,90,70,.42),#08152d); }.hub-promise.active { border-color:rgba(190,145,255,.55);background:linear-gradient(145deg,rgba(75,43,145,.42),#08152d); }
.today-detail-panel[hidden] { display:none!important; }.today-detail-panel { margin-bottom:14px;animation:panel-in .18s ease-out; }.today-data-hero { display:grid;gap:7px;margin-bottom:11px;border:1px solid var(--line);border-radius:18px;padding:18px;background:#07142b; }.today-data-hero>span { color:var(--muted);font-size:9px;letter-spacing:.08em; }.today-data-hero>strong { font-size:42px;line-height:1; }.today-data-hero>strong small { margin-left:5px;color:var(--muted);font-size:13px; }.today-data-hero>p { margin:4px 0 0;color:#c2cde0;font-size:11px;line-height:1.75; }.today-data-hero>b { color:#c6a8ff;font-size:10px; }
.panel-eat .today-data-hero { border-color:rgba(255,200,92,.38);background:radial-gradient(circle at 90% 8%,rgba(255,186,58,.16),transparent 35%),#0b172c; }.panel-eat .today-data-hero>strong { color:#ffd064; }.panel-drink .today-data-hero { border-color:rgba(69,186,255,.38);background:radial-gradient(circle at 90% 8%,rgba(69,186,255,.16),transparent 35%),#08172e; }.panel-drink .today-data-hero>strong { color:#45baff; }.panel-move .today-data-hero { border-color:rgba(67,229,176,.38);background:radial-gradient(circle at 90% 8%,rgba(67,229,176,.16),transparent 35%),#07182a; }.panel-move .today-data-hero>strong { color:#43e5b0; }.panel-promise .today-data-hero { border-color:rgba(190,145,255,.4);background:radial-gradient(circle at 90% 8%,rgba(190,145,255,.17),transparent 35%),#11142f; }.panel-promise .today-data-hero>strong { color:#c6a0ff; }
.move-data-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px; }.move-data-grid article { display:grid;gap:6px;border:1px solid rgba(67,229,176,.2);border-radius:13px;padding:12px 7px;text-align:center;background:rgba(7,31,39,.65); }.move-data-grid span { color:var(--muted);font-size:8px; }.move-data-grid strong { color:#5de8b8;font-size:17px; }.move-data-grid small { margin-left:2px;font-size:8px; }.panel-move .evidence-card>span { width:44px;height:44px;border:0; }.panel-move .evidence-card .icon-badge { width:42px;height:42px; }
.personal-task-list { display:grid;gap:8px;margin-bottom:9px; }.personal-task-list button { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;width:100%;border:1px solid var(--line);border-radius:13px;padding:12px;color:var(--text);text-align:left;background:#08152d;cursor:pointer; }.personal-task-list button>span { display:grid;place-items:center;width:28px;height:28px;border-radius:9px;color:#9b83e8;background:rgba(138,114,255,.12); }.personal-task-list button>div { display:grid;gap:4px; }.personal-task-list small { color:var(--muted);font-size:8px; }.personal-task-list i { color:#a99acb;font-style:normal;font-size:8px; }.personal-task-list button.done { border-color:rgba(67,229,176,.25); }.personal-task-list button.done>span,.personal-task-list button.done>i { color:#43e5b0; }.add-promise-button { width:100%;margin-bottom:11px;border:1px dashed rgba(190,145,255,.45);border-radius:13px;padding:13px;color:#c7a8ff;background:rgba(100,61,174,.1);font-weight:800;cursor:pointer; }
.panel-promise .daily-reflection { border-color:rgba(190,145,255,.26); }.panel-promise .daily-reflection h2 { font-size:16px;line-height:1.55; }

.growth-hero { border:1px solid rgba(126,140,255,.28);border-radius:18px;padding:15px;background:radial-gradient(circle at 8% 10%,rgba(69,186,255,.13),transparent 32%),radial-gradient(circle at 94% 88%,rgba(190,145,255,.16),transparent 34%),#08152d; }
.metric-grid .metric:nth-child(1) { border-color:rgba(67,229,176,.28);background:rgba(18,85,67,.18); }.metric-grid .metric:nth-child(1) strong { color:#43e5b0; }.metric-grid .metric:nth-child(2) { border-color:rgba(69,186,255,.28);background:rgba(23,75,133,.18); }.metric-grid .metric:nth-child(2) strong { color:#45baff; }.metric-grid .metric:nth-child(3) { border-color:rgba(190,145,255,.28);background:rgba(81,50,145,.18); }.metric-grid .metric:nth-child(3) strong { color:#be91ff; }.metric-grid .metric:nth-child(4) { border-color:rgba(255,200,92,.28);background:rgba(105,66,15,.18); }.metric-grid .metric:nth-child(4) strong { color:#ffc85c; }
.habit-bars>div { border-radius:10px;padding:8px; }.habit-bars .habit-water { color:#45baff;background:rgba(40,119,190,.09); }.habit-bars .habit-meal { color:#ffc85c;background:rgba(176,111,25,.09); }.habit-bars .habit-activity { color:#43e5b0;background:rgba(31,145,107,.09); }.habit-bars .habit-sleep { color:#a98bff;background:rgba(103,75,190,.09); }.habit-bars .habit-water b { background:linear-gradient(90deg,#298dff,#45d8ff); }.habit-bars .habit-meal b { background:linear-gradient(90deg,#e58d2d,#ffd064); }.habit-bars .habit-activity b { background:linear-gradient(90deg,#1dbf8f,#56efbd); }.habit-bars .habit-sleep b { background:linear-gradient(90deg,#7659e8,#b696ff); }
.week-chart>div:nth-child(1)>span { background:#45baff; }.week-chart>div:nth-child(2)>span { background:#43e5b0; }.week-chart>div:nth-child(3)>span { background:#a98bff; }.week-chart>div:nth-child(4)>span { background:#ffc85c; }

/* v0.5 — focused mobile flows */
.add-promise-button { display:grid;justify-items:center;gap:4px; }
.add-promise-button small { color:#83759f;font-size:8px;font-weight:500; }
.drama-category-nav { position:sticky;z-index:5;top:8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:12px 0 14px;padding:7px;border:1px solid rgba(93,119,171,.3);border-radius:15px;background:rgba(4,12,29,.94);backdrop-filter:blur(10px); }
.drama-category-nav button { min-height:35px;border:1px solid transparent;border-radius:9px;padding:6px 4px;color:#8391ac;background:transparent;font-size:9px;font-weight:800;cursor:pointer; }
.drama-category-nav button.active { border-color:rgba(42,226,241,.4);color:#031225;background:linear-gradient(100deg,#35dce8,#9f7cff);box-shadow:0 5px 18px rgba(57,205,238,.2); }
.drama-group[hidden] { display:none; }
.drama-group>header { display:flex;justify-content:space-between;align-items:end;margin:0 2px 10px; }
.drama-group>header h2 { margin:0;font-size:18px; }
.drama-group>header span { color:var(--muted);font-size:9px; }
.auto-poster-flow { grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px; }
.auto-poster-flow span { grid-template-columns:auto 1fr;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:9px;background:rgba(4,14,34,.45);text-align:left; }
.auto-poster-flow i { display:none; }
.profile-story-cover>img { object-position:center 26%; }
.army-image { display:block;height:190px;object-fit:cover;object-position:72% center; }

/* v0.6 — connected customer detail views */
.detail-rows,.library-list,.companion-list,.faq-list,.handover-list { display:grid;gap:8px;margin:14px 0; }
.detail-rows article,.library-list article,.companion-list article { display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:11px;padding:11px;background:rgba(255,255,255,.025); }
.detail-rows article>div,.library-list article>div { display:grid;gap:3px; }.detail-rows small,.library-list small,.companion-list small { color:var(--muted);font-size:8px; }.detail-rows b { color:var(--cyan);font-size:11px; }
.library-list article>b { color:var(--purple);font-size:10px; }.companion-list article { display:grid;grid-template-columns:1fr auto; }.companion-list article small { grid-column:1/-1; }.companion-list article>strong { color:var(--green);font-size:10px; }
.poster-library-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0; }.poster-library-grid article { display:grid;align-content:end;min-height:135px;border:1px solid rgba(126,140,255,.3);border-radius:12px;padding:10px;background:radial-gradient(circle at 70% 15%,rgba(190,145,255,.2),transparent 35%),linear-gradient(155deg,#123665,#0a122c 65%); }.poster-library-grid span { color:var(--cyan);font-size:8px; }.poster-library-grid strong { margin-top:auto;font-size:11px;line-height:1.45; }.poster-library-grid small { margin-top:5px;color:var(--muted);font-size:7px; }
.faq-list details { border:1px solid var(--line);border-radius:11px;padding:11px;background:rgba(255,255,255,.025); }.faq-list summary { cursor:pointer;font-size:11px;font-weight:800; }.faq-list p { margin:8px 0 0;color:var(--muted);font-size:9px;line-height:1.6; }
.employee-mini-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px; }.employee-mini-grid span { border:1px solid var(--line);border-radius:8px;padding:7px 4px;color:#c8d2e7;text-align:center;font-size:8px; }
.handover-list span { border:1px solid rgba(67,229,176,.22);border-radius:10px;padding:10px;color:#bcebdc;background:rgba(30,119,91,.1);font-size:10px; }