* { margin:0; padding:0; box-sizing:border-box; }
body { background:#0a0e14; color:#e8eef7; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; font-size:17px; line-height:1.5; }
a { color:#7fb3ff; }
.app-grid { max-width:880px; margin:0 auto; padding:18px 14px 40px; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:14px 0 8px; }
.brand { font-size:20px; font-weight:800; letter-spacing:-.02em; }
.brand span { color:#7fb3ff; }
.topbar .tag { font-size:13px; color:#94a3b8; background:#16202f; padding:6px 10px; border-radius:999px; border:1px solid #263244; }
h1.hero { font-size:26px; line-height:1.2; font-weight:800; margin:10px 0 6px; }
.sub { color:#94a3b8; font-size:15px; margin-bottom:16px; }
.card { background:#131d2c; border:1px solid #223145; border-radius:18px; padding:18px; margin-bottom:14px; }
.card-clickable { cursor:pointer; transition:transform .12s, border-color .12s; }
.card-clickable:active { transform:scale(.99); }
.card-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.card-head .ic { font-size:22px; }
.card-head .tt { font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.card-head .soon { margin-left:auto; font-size:12px; color:#94a3b8; border:1px solid #263244; padding:4px 8px; border-radius:999px; }
.row { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid #1b283a; font-size:15px; }
.row:last-child { border-bottom:none; }
.lbl { color:#94a3b8; } .val { font-weight:700; text-align:right; }
.ok { color:#4ade80; } .bad { color:#fb7185; } .yel { color:#fbbf24; }
.progress { background:#1c2b3f; border-radius:10px; height:14px; overflow:hidden; margin:10px 0 4px; }
.progress > div { height:100%; background:#3b82f6; border-radius:10px; transition:width .5s; }
.progress.money > div { background:#f97316; } .progress.skill > div { background:#22c55e; } .progress.habit > div { background:#ef4444; }
.plabel { font-size:15px; color:#e8eef7; } .pval { font-size:13px; color:#94a3b8; }
.fin3 { display:grid; grid-template-columns:1fr; gap:10px; }
@media(min-width:620px){ .fin3 { grid-template-columns:repeat(3,1fr); } }
.fincol { background:#0d1827; border:1px solid #1e344d; border-radius:14px; padding:12px; }
.fintitle { font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#94a3b8; }
.num { font-size:22px; font-weight:800; }
.num2 { font-size:15px; color:#cbd5e1; }
.topcat { margin-top:10px; font-size:14px; color:#e2e8f0; }
.topcat .dot { display:inline-block; width:10px; height:10px; border-radius:999px; background:#fb7185; margin-right:6px; vertical-align:middle; }
.badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.badge { padding:6px 10px; border-radius:999px; font-size:13px; border:1px solid #263244; background:#0d1827; }
.badge.learn { background:#fde047; color:#111; border-color:#fde047; font-weight:700; }
.badge.mastered { background:#22c55e; color:#fff; border-color:#22c55e; }
.badge.building { background:#fde047; color:#111; border-color:#fde047; font-weight:700; }
.badge.sailing { background:#22c55e; color:#fff; border-color:#22c55e; }
.week { display:flex; gap:6px; margin:10px 0; }
.wday { flex:1; text-align:center; padding:10px 0; border-radius:12px; background:#0d1827; border:1px solid #1e344d; font-size:13px; color:#94a3b8; }
.wday.done { background:#22c55e; color:#fff; border-color:#22c55e; font-weight:800; }
.wday.today { outline:2px solid #7fb3ff; color:#fff; }
.lifeicons { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.lifeitem { background:#0d1827; border:1px solid #1e344d; border-radius:14px; padding:12px; }
.lifeitem .k { font-size:13px; color:#94a3b8; } .lifeitem .v { font-size:20px; font-weight:800; }
.detail { display:none; margin-top:12px; border-top:1px dashed #263244; padding-top:12px; }
.detail.open { display:block; }
.btn { display:inline-block; padding:10px 14px; border-radius:12px; background:#1f4b8a; color:#fff; border:none; font-weight:800; font-size:14px; cursor:pointer; }
.note { font-size:13px; color:#94a3b8; }
.hide { display:none !important; }
.footer { padding:14px; text-align:center; color:#7c8aa0; font-size:13px; }

.tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media(min-width:620px){ .tiles{ grid-template-columns:repeat(3,1fr);} }
.tile { background:#131d2c; border:1px solid #223145; border-radius:18px; padding:18px; text-decoration:none; color:#e8eef7; display:block; }
.tile:active { transform:scale(.99); }
.tile .ic { font-size:28px; }
.tile .tt { font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; margin:6px 0; }
.tile .sub { font-size:13px; color:#94a3b8; }
.tile .big { font-size:22px; font-weight:800; margin-top:8px; }
.back { display:inline-block; margin:10px 0 16px; padding:8px 12px; border-radius:999px; background:#16202f; border:1px solid #263244; color:#e8eef7; text-decoration:none; font-size:14px; }
.form { background:#0d1827; border:1px solid #1e344d; border-radius:14px; padding:14px; }
.form label { display:block; font-size:13px; color:#94a3b8; margin:10px 0 4px; }
.form input, .form select, .form textarea { width:100%; padding:12px; border-radius:10px; border:1px solid #263244; background:#131d2c; color:#e8eef7; font-size:16px; }
.form button { margin-top:14px; width:100%; padding:14px; border-radius:12px; background:#1f4b8a; color:#fff; border:none; font-weight:800; font-size:16px; cursor:pointer; }
.list { margin-top:14px; }
.list .row { border-bottom:1px solid #1b283a; }

.micbtn { background:#7c2d12; color:#fff; border:none; padding:10px 14px; border-radius:999px; font-size:18px; margin-left:6px; cursor:pointer; vertical-align:middle; min-width:48px; }
.micbtn.rec { background:#dc2626; }
.fieldwrap { display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.fieldwrap input, .fieldwrap select { flex:1; }
.mic-status { font-size:13px; color:#fbbf24; margin-left:8px; }

.spark { margin-top:8px; min-height:32px; }
.spark svg { display:block; }
.tile { min-height:150px; }
.tile .big { font-size:16px; line-height:1.35; }
.fintitle { color:#e8eef7; }

.delbtn{background:none;border:1px solid #263244;color:#fb7185;border-radius:8px;padding:4px 8px;cursor:pointer;font-size:14px;margin-left:8px}