:root {
  --bg: #080c11;
  --panel: #191d23;
  --panel2: #22272e;
  --line: rgba(255,255,255,.08);
  --text: #f4f7fb;
  --muted: #8d95a2;
  --blue: #4f79f6;
  --green: #6fbd7b;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: radial-gradient(circle at 50% 0, #17202a 0, #080c11 42%, #05070a 100%);
  display: grid;
  place-items: center;
}
button { border: 0; color: inherit; font: inherit; cursor: pointer; }
#app { width: min(100%, 430px); min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.phone {
  position: relative;
  width: min(100%, 390px);
  min-height: 844px;
  overflow: hidden;
  padding: 18px 18px 88px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(31,36,43,.96), rgba(13,17,22,.98));
  box-shadow: 0 32px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
}
.statusbar, .page-head, .section-title, .plan-title, .detail-top, .profile-card, .tabs, .task-row, .remind, .menu-list button {
  display: flex; align-items: center; justify-content: space-between;
}
.statusbar { height: 22px; font-size: 12px; font-weight: 700; opacity: .94; }
h1,h2,h3,p { margin: 0; }
.page-head { margin: 22px 0 18px; min-height: 36px; }
.page-head h1 { font-size: 21px; font-weight: 760; letter-spacing: 0; }
.page-head p, small, em { color: var(--muted); font-style: normal; font-size: 12px; }
.ghost { width: 36px; height: 36px; border-radius: 18px; background: transparent; display: grid; place-items: center; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.progress-card, .ai-card, .goal-card, .detail-card, .remind, .task-ai-plan, .profile-card, .stats, .checkin, .achievements, .menu-list, .dialog, .purpose-card, .mini-achievement {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(42,47,55,.9), rgba(27,31,37,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.ai-command, .growth-card, .stage-card, .active-ai, .growth-summary, .plan-advice-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(42,49,60,.94), rgba(20,24,30,.96));
}
.ai-command { padding: 14px; margin-bottom: 12px; }
.ai-command-head { display: flex; align-items: center; gap: 10px; }
.ai-command-head span { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #9db8ff; background: rgba(79,121,246,.16); }
.ai-command-head b { font-size: 15px; }
.ai-command-head p { color: var(--muted); font-size: 12px; margin-top: 3px; }
.ai-coach-content { margin-top: 12px; display: grid; gap: 10px; }
.ai-coach-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ai-coach-title b { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.ai-coach-title button { padding: 8px 14px; border-radius: 18px; background: rgba(255,255,255,.12); font-size: 12px; }
.ai-coach-toggle { width: 100%; height: 26px; margin-top: 8px; display: grid; place-items: center; color: #dce6ff; background: transparent; font-size: 18px; }
.insight-list { display: grid; gap: 8px; margin-top: 12px; }
.insight-list button { padding: 10px 12px; border-radius: 10px; text-align: left; background: rgba(255,255,255,.055); border-left: 3px solid #5c86ff; }
.insight-list button.warn { border-left-color: #f3bf57; }
.insight-list button.up { border-left-color: #6fbd7b; }
.insight-list b { display: block; font-size: 13px; margin-bottom: 4px; }
.insight-list span { display: block; color: #aeb6c4; font-size: 12px; line-height: 1.45; }
.purpose-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px; margin-bottom: 12px; }
.purpose-card b { display: block; font-size: 15px; margin-bottom: 5px; }
.purpose-card p { color: var(--muted); font-size: 12px; line-height: 1.45; }
.purpose-card span { flex: none; max-width: 98px; padding: 7px 9px; border-radius: 999px; color: #dce8ff; background: rgba(79,121,246,.16); font-size: 11px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress-card { display: grid; grid-template-columns: 1fr 86px 16px; gap: 12px; padding: 18px; }
.progress-card span, .goal-card label { color: #c4cad3; font-size: 13px; }
.progress-card strong { display: block; font-size: 34px; margin: 8px 0 6px; }
.progress-card p, .ai-card p, .remind p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.ring { width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(#f4c56a 0 20%, #75bb83 20% 42%, #53a9f4 42% 72%, rgba(255,255,255,.06) 72%); padding: 7px; }
.ring span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #22272e; }
.section-title { margin: 18px 4px 10px; font-size: 15px; }
.section-title button { background: transparent; color: #bac4d2; font-size: 12px; }
.list { display: grid; gap: 8px; }
.empty-state { display: grid; gap: 8px; padding: 18px 14px; border: 1px dashed rgba(255,255,255,.14); border-radius: 12px; color: #dce6f4; background: rgba(255,255,255,.04); text-align: center; }
.empty-state b { font-size: 14px; }
.empty-state p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.empty-state button { justify-self: center; margin-top: 2px; padding: 8px 15px; border-radius: 18px; color: #eff5ff; background: rgba(79,121,246,.28); font-size: 12px; }
.task-row { width: 100%; min-height: 58px; padding: 10px 12px; text-align: left; border-radius: 10px; background: linear-gradient(180deg, rgba(42,47,55,.9), rgba(31,35,41,.94)); border: 1px solid var(--line); cursor: pointer; }
.tile, .plan-menu span { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 8px; color: #dce8ff; background: linear-gradient(135deg, var(--tile), color-mix(in srgb, var(--tile), #111 24%)); }
.task-main { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin-left: 12px; }
.task-main b { font-size: 14px; }
.task-main small { grid-column: 1 / -1; }
.task-time { color: var(--muted); font-size: 12px; margin-right: 10px; }
.task-meta { display: grid; justify-items: end; gap: 5px; margin-right: 10px; min-width: 58px; }
.task-meta i { color: #dfe6f2; font-size: 12px; font-style: normal; }
.priority { padding: 3px 7px; border-radius: 999px; font-size: 10px; line-height: 1; color: #dfe7f4; background: rgba(255,255,255,.08); }
.priority.high { color: #ffe1d7; background: rgba(246,107,93,.18); }
.priority.mid { color: #ffeab8; background: rgba(243,191,87,.16); }
.priority.low { color: #cbe9d0; background: rgba(111,189,123,.15); }
.status { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #818995; color: #111; background: transparent; flex: none; }
.status.done { background: var(--green); border-color: var(--green); color: #102017; }
.ai-card { margin-top: 10px; padding: 14px; }
.ai-card h3 { display: flex; gap: 8px; align-items: center; font-size: 14px; margin-bottom: 8px; }
.ai-card button { float: right; margin-top: 10px; padding: 8px 18px; border-radius: 18px; background: rgba(255,255,255,.12); font-size: 12px; }
.advice-card-list { display: grid; gap: 8px; }
.advice-card-list article { position: relative; padding: 10px; border-radius: 9px; background: rgba(255,255,255,.055); }
.advice-card-list b { display: block; margin-bottom: 5px; font-size: 13px; }
.advice-card-list p { padding-right: 52px; }
.advice-card-list .priority { position: absolute; right: 9px; top: 10px; }
.mini-achievement { display: grid; gap: 5px; margin-top: 10px; padding: 12px; }
.mini-achievement b { font-size: 14px; }
.mini-achievement p { color: #dce6f4; font-size: 12px; line-height: 1.45; }
.mini-achievement small { color: var(--muted); line-height: 1.45; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 88px; width: min(342px, calc(100% - 36px)); transform: translateX(-50%); padding: 12px 14px; border: 1px solid rgba(120,210,138,.34); border-radius: 12px; color: #ecfff1; background: linear-gradient(135deg, rgba(35,75,48,.96), rgba(32,41,54,.96)); box-shadow: 0 18px 46px rgba(0,0,0,.36); font-size: 13px; text-align: left; }
.tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; padding: 8px 12px 12px; border-top: 1px solid var(--line); background: rgba(17,21,26,.94); }
.tabs button { display: grid; gap: 3px; place-items: center; min-width: 54px; background: transparent; color: #77808d; font-size: 11px; }
.tabs .active { color: #f2f6ff; }
.plan-layout { display: grid; grid-template-columns: 94px 1fr; gap: 12px; min-height: 650px; }
.plan-menu { border-right: 1px solid var(--line); padding-right: 8px; display: grid; align-content: start; gap: 10px; }
.plan-menu button { min-height: 52px; display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 9px; background: transparent; color: #aab2bf; font-size: 12px; }
.plan-menu .on { background: rgba(255,255,255,.08); color: var(--text); }
.new-plan { margin-top: 18px; color: #7d8490 !important; }
.plan-panel { min-width: 0; }
.plan-title { margin-bottom: 22px; }
.plan-title span { width: 15px; height: 15px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 22px var(--dot); }
.plan-title h2 { flex: 1; margin-left: 10px; font-size: 18px; }
.plan-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: -10px 0 12px; }
.plan-actions button { height: 34px; border-radius: 9px; background: rgba(255,255,255,.07); font-size: 12px; }
.plan-actions .danger-inline { color: #ff9285; background: rgba(246,107,93,.12); }
.plan-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.goal-card { position: relative; padding: 14px; min-width: 0; }
.growth-card { display: flex; align-items: center; justify-content: space-between; padding: 14px; min-width: 0; box-shadow: inset 0 0 34px color-mix(in srgb, var(--growth), transparent 84%); }
.growth-card strong { display: block; font-size: 28px; margin: 4px 0; }
.growth-card p { color: var(--muted); font-size: 12px; }
.growth-ring { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #f7fbff; background: radial-gradient(circle, #20252d 54%, transparent 55%), conic-gradient(var(--growth) var(--pct, 62%), rgba(255,255,255,.1) 0); border: 1px solid rgba(255,255,255,.08); }
.goal-card button { position: absolute; right: 12px; top: 12px; background: transparent; color: #98a2b1; font-size: 12px; }
.goal-card strong { display: block; margin: 16px 0 6px; font-size: 14px; }
.bar { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.14); margin-top: 12px; }
.bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4f79f6, #6ea0ff); }
.goal-card em { position: absolute; right: 14px; bottom: 12px; color: #e8edf5; font-size: 12px; }
.stage-card { margin-top: 10px; padding: 13px; }
.summary-card { cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.summary-card:hover { border-color: rgba(96,145,255,.42); background: linear-gradient(150deg, rgba(48,57,70,.96), rgba(22,27,34,.96)); }
.summary-card > em { display: block; margin-top: 8px; color: #8ea8df; font-size: 11px; font-style: normal; }
.stage-card label { color: #bac3d0; font-size: 12px; }
.stage-card b { display: block; margin: 8px 0 5px; font-size: 15px; }
.stage-card p, .active-ai p, .growth-summary span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.stage-card p { min-height: 36px; max-height: 36px; overflow: hidden; }
.stage-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.stage-metrics span { padding: 10px 6px; border-radius: 8px; text-align: center; background: rgba(255,255,255,.045); }
.stage-metrics b { margin: 0 0 4px; font-size: 18px; }
.stage-metrics small { color: var(--muted); font-size: 11px; }
.metric-grid, .stats, .badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.metric-grid div, .stats div, .badges div { padding: 12px 6px; text-align: center; border-radius: 9px; background: rgba(255,255,255,.045); }
.metric-grid b, .stats b { display: block; font-size: 20px; margin-bottom: 4px; }
.metric-grid span, .stats span, .badges small { color: var(--muted); font-size: 11px; }
.slim .task-row { min-height: 54px; }
.active-ai { padding: 13px; }
.active-ai b { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.active-ai button { margin-top: 10px; padding: 8px 14px; border-radius: 18px; background: rgba(79,121,246,.2); color: #dce6ff; font-size: 12px; }
.plan-advice-card { padding: 13px; }
.plan-advice-card > b { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.plan-advice-card > p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.advice-preview-list { display: grid; gap: 7px; min-height: 76px; }
.advice-preview-list span { display: grid; gap: 3px; padding: 8px; border-radius: 8px; background: rgba(255,255,255,.045); }
.advice-preview-list b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #eef4ff; font-size: 12px; }
.advice-preview-list small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.detail-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.detail-stats span { padding: 10px 6px; border-radius: 9px; text-align: center; background: rgba(255,255,255,.055); }
.detail-stats b { display: block; color: #eef4ff; font-size: 18px; margin-bottom: 4px; }
.detail-stats small { color: var(--muted); font-size: 11px; }
.ai-hub-card, .ai-chat, .generated-plan { border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(150deg, rgba(42,49,60,.94), rgba(20,24,30,.96)); }
.ai-hub-card { padding: 14px; }
.ai-hub-card > b { display: block; margin-bottom: 10px; }
.ai-hub-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ai-hub-actions button { height: 38px; border-radius: 10px; background: rgba(79,121,246,.18); font-size: 12px; }
.ai-chat { display: grid; gap: 12px; margin-top: 12px; padding: 14px; }
.chat-list { display: grid; gap: 8px; max-height: 250px; overflow: auto; }
.chat-list p { padding: 10px; border-radius: 10px; color: #dce6f4; background: rgba(255,255,255,.055); font-size: 12px; line-height: 1.5; }
.chat-list .user { background: rgba(79,121,246,.18); }
.chat-input { display: grid; grid-template-columns: 1fr 56px; gap: 8px; }
.chat-input input { min-width: 0; height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; color: var(--text); background: rgba(255,255,255,.07); }
.chat-input button { border-radius: 10px; background: linear-gradient(180deg, #5d87ff, #416be7); font-size: 12px; }
.ai-chat > small { color: var(--muted); }
.generated-plan { padding: 12px; }
.generated-plan b { display: block; margin-bottom: 6px; }
.generated-plan p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.generated-plan div { display: grid; gap: 5px; margin: 10px 0; }
.generated-plan span { padding: 7px 8px; border-radius: 8px; background: rgba(255,255,255,.055); font-size: 11px; color: #dce6f4; }
.detail-card { padding: 16px; }
.detail-top { justify-content: flex-start; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.detail-top h2 { font-size: 16px; }
.detail-hero { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.tile.large { width: 44px; height: 44px; border-radius: 12px; }
.detail-hero h2 { margin: 8px 0 4px; font-size: 18px; line-height: 1.25; }
.detail-hero p { color: var(--muted); font-size: 12px; }
.status-pill { display: inline-flex; padding: 4px 8px; border-radius: 999px; color: #ffeab8; background: rgba(243,191,87,.16); font-size: 11px; }
.status-pill.done { color: #cbe9d0; background: rgba(111,189,123,.15); }
.detail-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.detail-chips span, .detail-note, .detail-next { padding: 11px; border-radius: 10px; background: rgba(255,255,255,.055); }
.detail-chips b { display: block; margin-bottom: 5px; font-size: 13px; }
.detail-chips small, .detail-note p, .detail-next p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.detail-note, .detail-next { margin-bottom: 10px; text-align: left; }
.detail-note b, .detail-next b { display: block; margin-bottom: 6px; font-size: 13px; }
dl { margin: 14px 0; display: grid; gap: 14px; }
dl div { display: flex; justify-content: space-between; color: #d9dee7; }
dt { color: var(--muted); }
.primary { width: 100%; height: 44px; border-radius: 10px; background: linear-gradient(180deg, #5d87ff, #416be7); font-weight: 650; }
.primary:disabled { opacity: .65; cursor: wait; }
.secondary { width: 100%; height: 38px; border-radius: 10px; background: rgba(255,255,255,.08); color: #dce6ff; }
.danger { width: 100%; height: 44px; margin-top: 10px; border-radius: 10px; background: rgba(255,255,255,.06); color: #f66b5d; }
.remind { margin-top: 12px; padding: 16px; display: grid; grid-template-columns: 1fr 18px; gap: 4px; }
.task-ai-plan { display: grid; gap: 12px; margin-top: 12px; padding: 14px; }
.task-ai-title { display: flex; align-items: center; gap: 8px; color: #dfe8f6; }
.task-ai-title span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #9db8ff; background: rgba(79,121,246,.16); }
.task-ai-title b { font-size: 13px; }
.task-ai-current { padding: 12px; border-radius: 9px; background: linear-gradient(135deg, rgba(79,121,246,.18), rgba(255,255,255,.055)); border: 1px solid rgba(114,148,255,.22); }
.task-ai-current small, .execution-head small, .execution-action small, .execution-next span { display: block; margin-bottom: 5px; color: #8fa6ff; font-size: 11px; font-weight: 750; }
.task-ai-current strong { display: block; color: #eef4ff; font-size: 15px; line-height: 1.35; }
.task-ai-current p, .task-ai-fallback { color: #b9c4d4; font-size: 12px; line-height: 1.5; }
.task-ai-current p { margin-top: 6px; }
.task-ai-steps { display: grid; gap: 8px; }
.task-ai-steps span { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px; background: rgba(255,255,255,.05); }
.task-ai-steps i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #101820; background: #78d28a; font-size: 11px; font-style: normal; font-weight: 800; }
.task-ai-steps b { min-width: 0; font-size: 12px; }
.task-ai-steps em { color: var(--muted); font-size: 11px; font-style: normal; white-space: nowrap; }
.task-ai-fallback { padding-left: 10px; border-left: 3px solid rgba(243,191,87,.72); }
.task-ai-action { width: 100%; height: 40px; border-radius: 10px; color: #eef4ff; background: linear-gradient(180deg, #5d87ff, #416be7); font-size: 13px; font-weight: 650; }
.execution-dialog { text-align: left; }
.execution-head h2 { margin-bottom: 5px; font-size: 19px; }
.execution-head p { color: var(--muted); font-size: 12px; }
.execution-timer { position: relative; display: grid; place-items: center; gap: 3px; width: 148px; height: 148px; margin: 18px auto; border-radius: 50%; background: conic-gradient(#78d28a 0 var(--progress), rgba(255,255,255,.08) var(--progress)); }
.execution-timer::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #20262d; }
.execution-timer strong, .execution-timer span { position: relative; z-index: 1; }
.execution-timer strong { color: #f3f7ff; font-size: 30px; letter-spacing: 0; }
.execution-timer span { color: var(--muted); font-size: 12px; }
.execution-timer.no-timer { width: 100%; height: auto; margin: 14px 0; padding: 14px; border-radius: 10px; background: rgba(79,121,246,.14); }
.execution-timer.no-timer::after { display: none; }
.execution-timer.no-timer strong { font-size: 18px; }
.execution-action, .execution-next, .execution-safe { padding: 12px; border-radius: 10px; background: rgba(255,255,255,.055); }
.execution-action b, .execution-next b { display: block; color: #eef4ff; font-size: 15px; line-height: 1.4; }
.execution-action p, .execution-safe { margin-top: 6px; color: #b9c4d4; font-size: 12px; line-height: 1.5; }
.execution-next { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.execution-next span { margin-bottom: 0; }
.execution-next b { font-size: 13px; text-align: right; }
.execution-safe { color: #ffeab8; background: rgba(243,191,87,.12); }
.execution-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 12px 0; }
.execution-controls button { height: 38px; border-radius: 10px; color: #dce6ff; background: rgba(255,255,255,.08); font-size: 12px; }
.week-planner-dialog { width: min(380px, 100%); text-align: left; }
.week-modal-head { margin: 4px 0 12px; }
.week-modal-head h2 { margin-bottom: 5px; text-align: left; font-size: 20px; }
.week-modal-head p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.week-modal-list { display: grid; gap: 10px; max-height: 62vh; overflow: auto; padding-right: 2px; }
.week-modal-list .week-day-card { min-height: auto; }
.schedule-layout { display: grid; grid-template-columns: 10% 1fr; gap: 12px; min-height: 660px; }
.date-rail { display: grid; align-content: start; gap: 8px; }
.date-rail button { min-height: 58px; padding: 6px 2px; border-radius: 10px; background: rgba(255,255,255,.04); color: #87909e; display: grid; place-items: center; gap: 2px; }
.date-rail .on { background: rgba(79,121,246,.18); color: #edf4ff; box-shadow: inset 0 0 0 1px rgba(116,151,255,.24); }
.date-rail b { font-size: 12px; line-height: 1; }
.date-rail span { writing-mode: vertical-rl; text-orientation: mixed; font-size: 10px; line-height: 1; }
.schedule-panel { min-width: 0; }
.schedule-title { margin-top: 0; }
.weekly-planner, .weekly-preview { display: grid; gap: 12px; margin-bottom: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(150deg, rgba(42,49,60,.94), rgba(20,24,30,.96)); }
.weekly-preview { cursor: pointer; }
.weekly-planner-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.weekly-planner-head b, .weekly-preview b { display: block; font-size: 15px; margin-bottom: 5px; }
.weekly-planner-head p, .weekly-preview small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.weekly-planner-head button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #dce6ff; background: rgba(79,121,246,.2); flex: none; }
.week-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(178px, 72%); gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
.week-carousel.compact { grid-auto-columns: minmax(150px, 62%); }
.week-day-card { scroll-snap-align: start; min-height: 178px; padding: 11px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.075); }
.week-day-card.today { border-color: rgba(120,210,138,.42); background: linear-gradient(180deg, rgba(45,70,55,.72), rgba(255,255,255,.045)); }
.week-day-card header { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; margin-bottom: 10px; }
.week-day-card header strong { color: #eef4ff; font-size: 14px; }
.week-day-card header small { color: var(--muted); font-size: 11px; }
.week-day-card header button { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; color: #dce6ff; background: rgba(79,121,246,.2); }
.week-day-card header button .icon { width: 14px; height: 14px; }
.week-day-rows { display: grid; gap: 8px; }
.week-day-rows p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.more-rows { display: block; color: #9bb5ff; font-size: 11px; font-style: normal; line-height: 1.4; }
.assignment-mini { display: grid; grid-template-columns: 38px 1fr auto; gap: 2px 8px; align-items: center; padding: 8px; border-radius: 8px; background: rgba(255,255,255,.055); border-left: 3px solid var(--plan); }
.assignment-mini time { grid-row: span 2; color: #dce6f4; font-size: 11px; font-weight: 800; }
.assignment-mini b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #eef4ff; font-size: 12px; }
.assignment-mini em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; font-style: normal; }
.assignment-actions { grid-row: span 2; display: flex; gap: 5px; }
.assignment-actions button { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: rgba(255,255,255,.1); color: #dce6f4; font-size: 14px; }
.assignment-actions button .icon { width: 13px; height: 13px; }
.plan-pool { display: grid; gap: 8px; }
.plan-pool b { font-size: 13px; }
.plan-pool div { display: flex; gap: 7px; overflow-x: auto; }
.plan-pool span { flex: none; padding: 7px 9px; border-radius: 8px; color: #eef4ff; background: color-mix(in srgb, var(--plan), #1f252d 72%); border: 1px solid color-mix(in srgb, var(--plan), transparent 62%); font-size: 11px; }
.schedule-cards { display: grid; gap: 10px; }
.schedule-card { display: flex; gap: 12px; width: 100%; padding: 14px; text-align: left; border-radius: 10px; background: linear-gradient(180deg, rgba(42,47,55,.9), rgba(27,31,37,.94)); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.schedule-card > span { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; color: #dce6ff; background: rgba(79,121,246,.18); }
.schedule-card b, .day-head b { display: block; font-size: 15px; margin-bottom: 5px; }
.schedule-card p, .schedule-edit p, .schedule-note p { color: var(--muted); font-size: 12px; line-height: 1.5; margin-bottom: 7px; }
.schedule-card small { color: #91a0b5; font-size: 11px; }
.schedule-edit { display: grid; gap: 12px; }
.back-line { justify-self: start; display: flex; align-items: center; gap: 4px; background: transparent; color: #9fb0c7; font-size: 12px; }
.schedule-edit label { color: #b8c1ce; font-size: 12px; }
.schedule-edit input { width: 100%; height: 42px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; color: var(--text); background: rgba(255,255,255,.06); font: inherit; }
.schedule-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.week-apply { display: grid; gap: 10px; padding: 12px; border-radius: 10px; background: rgba(255,255,255,.045); border: 1px solid var(--line); }
.week-apply > button { justify-self: start; padding: 8px 12px; border-radius: 9px; color: #dce6ff; background: rgba(79,121,246,.18); font-size: 12px; }
.week-apply small { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.weekday-rule { display: grid; gap: 10px; padding: 12px; border-radius: 10px; background: rgba(79,121,246,.1); border: 1px solid rgba(116,151,255,.18); }
.weekday-rule b { display: block; margin-bottom: 4px; font-size: 13px; }
.weekday-rule small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.weekday-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.weekday-buttons button { height: 32px; border-radius: 8px; color: #aeb8c8; background: rgba(255,255,255,.055); font-size: 11px; }
.weekday-buttons button.on { color: #102017; background: #78d28a; font-weight: 750; }
.schedule-rows, .timeline { display: grid; gap: 8px; }
.day-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.day-head button { padding: 8px 12px; border-radius: 18px; background: rgba(79,121,246,.18); font-size: 12px; }
.schedule-select { position: relative; margin-top: 8px; }
.schedule-select > button { min-width: 150px; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 8px 10px; border-radius: 10px; text-align: left; background: rgba(255,255,255,.07); }
.schedule-select > button span { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }
.schedule-select > button strong { font-size: 13px; }
.schedule-select > button i { font-style: normal; color: #aeb8c8; }
.schedule-options { position: absolute; z-index: 4; left: 0; right: -46px; top: calc(100% + 6px); display: grid; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #20252d; box-shadow: 0 18px 44px rgba(0,0,0,.34); }
.schedule-options button { display: block; width: 100%; padding: 9px; border-radius: 9px; text-align: left; background: rgba(255,255,255,.045); }
.schedule-options .on { background: rgba(79,121,246,.2); }
.schedule-options b { display: block; font-size: 12px; margin-bottom: 4px; }
.schedule-options span { color: var(--muted); font-size: 10px; line-height: 1.35; }
.time-row { display: grid; grid-template-columns: 46px 1fr auto auto; gap: 8px; align-items: center; padding: 11px 10px; border-radius: 11px; background: rgba(255,255,255,.055); border: 1px solid var(--line); }
.time-row.assignment-row { border-left: 3px solid var(--plan); }
.time-row time { color: #dce6f4; font-size: 12px; font-weight: 750; }
.time-row b { display: block; font-size: 13px; margin-bottom: 4px; }
.time-row span { color: var(--muted); font-size: 11px; }
.time-row button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); }
.schedule-note { margin-top: 12px; padding: 13px; border-radius: 12px; background: rgba(79,121,246,.1); border: 1px solid rgba(116,151,255,.18); }
.schedule-note b { display: block; margin-bottom: 6px; font-size: 13px; }
.empty-schedule { padding: 18px 14px; border-radius: 12px; text-align: center; background: rgba(255,255,255,.045); border: 1px dashed rgba(255,255,255,.13); }
.empty-schedule b { display: block; font-size: 14px; margin-bottom: 8px; }
.empty-schedule p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.profile-card { gap: 12px; padding: 16px; }
.avatar { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #edf2f8; color: #19202a; font-weight: 800; }
.vip-badge { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); white-space: nowrap; padding: 3px 7px; border-radius: 999px; color: #18202a; background: #d7dee8; font-size: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.22); }
.vip-badge.vip { color: #2b1b00; background: linear-gradient(135deg,#ffd66f,#ffae45); }
.profile-card div:nth-child(2) { flex: 1; }
.membership-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(150deg, rgba(42,49,60,.94), rgba(20,24,30,.96)); }
.membership-card b { display: block; font-size: 14px; margin-bottom: 5px; }
.membership-card p, .membership-card small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.membership-card div:last-child { display: grid; gap: 7px; }
.membership-card button { padding: 7px 10px; border-radius: 16px; background: rgba(79,121,246,.18); font-size: 12px; }
.stats, .checkin, .achievements, .menu-list { padding: 14px; margin-top: 12px; }
.growth-summary { padding: 14px; margin-top: 12px; }
.growth-summary div:first-child { display: flex; align-items: center; justify-content: space-between; }
.growth-map { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.growth-map span { display: grid; place-items: center; gap: 6px; min-height: 62px; border-radius: 10px; background: linear-gradient(135deg, var(--tile), color-mix(in srgb, var(--tile), #111 34%)); }
.growth-map i { font-style: normal; font-weight: 800; font-size: 14px; }
.growth-map em { width: 100%; color: rgba(255,255,255,.78); font-size: 10px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.checkin .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; }
.checkin-open { width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; background: transparent; }
.checkin-open b { display: block; margin-bottom: 5px; }
.checkin-open small { color: var(--muted); }
.days span { display: grid; place-items: center; gap: 6px; color: #808895; font-size: 10px; }
.days span:before, .days .ok .icon { width: 22px; height: 22px; padding: 4px; border-radius: 50%; border: 1px solid #6f7886; }
.days .ok .icon { background: #dfe6ef; color: #18202a; border: 0; }
.badges div { min-height: 74px; color: #f1f5fb; font-weight: 750; background: linear-gradient(135deg,#8d65df,#62b985); }
.badges small { display: block; margin-top: 8px; color: rgba(255,255,255,.75); font-weight: 400; }
.menu-list { display: grid; gap: 4px; }
.menu-list button { height: 38px; background: transparent; text-align: left; color: #d9dee7; }
.menu-list .icon { margin-right: 10px; }
.menu-list span { margin-left: auto; }
.menu-list .danger-account { color: #ff9285; }
.onboarding { display: grid; align-content: center; justify-items: center; text-align: center; padding-bottom: 36px; }
.orb { width: 128px; height: 128px; display: grid; place-items: center; margin: 150px 0 44px; border-radius: 50%; font-size: 42px; font-weight: 760; background: radial-gradient(circle, #1b2028 45%, transparent 46%), conic-gradient(#ffd66f, #8bd795, #57b4ff, #a27df1, #ffd66f); box-shadow: 0 0 46px rgba(94,150,255,.2); }
.onboarding h1 { font-size: 21px; margin-bottom: 12px; }
.onboarding p { color: var(--muted); font-size: 13px; }
.onboarding button { position: absolute; left: 42px; right: 42px; bottom: 44px; height: 44px; border-radius: 22px; background: rgba(255,255,255,.1); }
.overlay { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.62); backdrop-filter: blur(8px); }
.dialog { position: relative; width: min(340px, 100%); max-height: 86vh; overflow: auto; padding: 24px 18px 18px; text-align: center; }
.info-dialog { text-align: left; }
.info-dialog p { color: #c7d0dd; font-size: 13px; line-height: 1.6; }
.info-dialog ul { display: grid; gap: 8px; margin: 14px 0; padding: 0; list-style: none; }
.info-dialog li { padding: 9px 10px; border-radius: 9px; color: #dce6f4; background: rgba(255,255,255,.055); font-size: 12px; line-height: 1.45; }
.close { position: absolute; right: 12px; top: 10px; background: transparent; font-size: 24px; }
.botmark { width: 64px; height: 64px; padding: 12px; margin: 18px auto; color: #9bb5ff; border-radius: 18px; background: rgba(83,121,246,.16); }
.choice { display: grid; gap: 10px; margin: 18px 0; }
.choice button { padding: 12px; border-radius: 10px; text-align: left; background: linear-gradient(135deg, #537df4, #66b76d); }
.choice small { display: block; color: rgba(255,255,255,.75); margin-top: 4px; }
.ai-result { display: grid; gap: 8px; margin: 12px 0; padding: 12px; border-radius: 10px; text-align: left; background: rgba(79,121,246,.12); border: 1px solid rgba(114,148,255,.24); }
.ai-result label { color: #8fa6ff; font-size: 11px; font-weight: 750; }
.ai-result b, .ai-result > span { display: block; font-size: 13px; line-height: 1.5; }
.adjustment-list { display: grid; gap: 8px; }
.modal-card-list p { color: #b9c4d4; font-size: 12px; line-height: 1.5; padding: 8px; border-radius: 8px; background: rgba(255,255,255,.045); }
.modal-card-list strong { display: block; color: #eef4ff; margin-bottom: 4px; }
.adjustment-item { padding: 10px; border-radius: 9px; background: rgba(255,255,255,.055); }
.adjustment-item strong { display: block; color: #eef4ff; font-size: 13px; margin-bottom: 5px; }
.adjustment-item p { color: #b9c4d4; font-size: 12px; line-height: 1.5; margin-bottom: 8px; }
.adjustment-item div { display: grid; gap: 4px; color: #d6deeb; font-size: 11px; }
.adjustment-item small { display: block; margin-top: 8px; color: #78d28a; line-height: 1.4; }
.ai-error { margin: 10px 0; color: #ff8d80 !important; font-size: 12px; line-height: 1.5; }
.quota-notice { margin: 10px 0; padding: 9px 10px; border-radius: 9px; color: #dce8ff !important; background: rgba(79,121,246,.14); font-size: 12px; line-height: 1.5; }
.pay-actions { display: grid; gap: 10px; margin-top: 16px; }
.pay-actions button { padding: 12px; border-radius: 10px; text-align: left; background: rgba(255,255,255,.07); }
.pay-actions small { display: block; color: var(--muted); margin-top: 4px; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; text-align: left; }
.compare-grid div { padding: 12px; border-radius: 10px; background: rgba(255,255,255,.055); }
.compare-grid .vip-col { background: rgba(255,190,75,.12); border: 1px solid rgba(255,205,95,.22); }
.compare-grid b { display: block; margin-bottom: 8px; }
.compare-grid p { color: #b9c4d4; font-size: 11px; line-height: 1.5; margin-top: 6px; }
.form-dialog { display: grid; gap: 10px; text-align: left; }
.form-dialog h2 { text-align: center; }
.form-dialog label { display: grid; gap: 6px; color: #b9c4d4; font-size: 12px; }
.form-dialog input, .form-dialog select { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 11px; color: var(--text); background: rgba(255,255,255,.07); font: inherit; }
.form-dialog select option { color: #111; }
.assignment-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.assignment-kind button { height: 38px; border-radius: 10px; color: #aeb8c8; background: rgba(255,255,255,.065); font-size: 13px; }
.assignment-kind button.on { color: #102017; background: #78d28a; font-weight: 750; }
.form-tip { color: var(--muted); font-size: 12px; line-height: 1.5; }
.auth-hint { color: var(--muted); font-size: 12px; line-height: 1.5; text-align: center; }
.link-button { background: transparent; color: #9bb5ff; font-size: 12px; }
.checkin-dialog { text-align: left; }
.calendar-head { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 12px; }
.calendar-head button { width: 32px; height: 32px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.08); }
.calendar-week, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendar-week span { color: var(--muted); font-size: 11px; text-align: center; }
.calendar-grid { margin: 8px 0 12px; }
.calendar-grid button { height: 32px; border-radius: 9px; background: rgba(255,255,255,.055); color: #dce6f4; font-size: 12px; }
.calendar-grid .muted { opacity: .42; }
.calendar-grid .signed { color: #102017; background: #78d28a; }
.calendar-grid .selected { box-shadow: inset 0 0 0 2px #6f91ff; }
.checkin-detail { margin-top: 12px; padding: 12px; border-radius: 10px; background: rgba(255,255,255,.055); }
.checkin-detail b { display: block; margin-bottom: 6px; }
.checkin-detail p, .checkin-detail li { color: #b9c4d4; font-size: 12px; line-height: 1.5; }
.checkin-detail ul { padding-left: 18px; margin: 8px 0 0; }
@media (max-width: 430px) {
  #app { padding: 0; }
  .phone { width: 100%; min-height: 100vh; border-radius: 0; border: 0; }
}