:root { --ink:#14231f; --muted:#66746f; --paper:#f8f7f2; --line:#dfe4dc; --green:#1e4e42; --mint:#dcece4; --gold:#bf8c35; --red:#b64b4b; --white:#fff; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input { font:inherit; } button { cursor:pointer; } .shell { min-height:100vh; } .top { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,5vw,72px); background:#102a24; color:white; } .brand { letter-spacing:.08em; font-size:13px; font-weight:700; } .brand strong { color:#e4b45e; } .account { display:flex; align-items:center; gap:11px; font-size:14px; } .avatar { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:#dcece4; color:#1e4e42; font-weight:700; }
.layout { max-width:1360px; margin:auto; padding:30px clamp(20px,5vw,72px) 64px; } .eyebrow { color:var(--gold); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } h1 { font:500 clamp(31px,5vw,48px)/1.05 Georgia,serif; margin:7px 0 9px; } h2 { font:500 25px/1.15 Georgia,serif; margin:0; } .lead { max-width:690px; margin:0; color:var(--muted); }
.notice { display:flex; gap:10px; margin:25px 0; padding:13px 16px; border:1px solid #cfdfd7; border-radius:10px; background:#edf5f0; font-size:14px; color:#315348; } .tabs { display:flex; gap:6px; overflow:auto; margin:30px 0 22px; border-bottom:1px solid var(--line); } .tab { border:0; border-bottom:3px solid transparent; background:none; color:var(--muted); padding:12px 13px; white-space:nowrap; } .tab.active { border-color:var(--gold); color:var(--ink); font-weight:700; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; } .card { padding:20px; border:1px solid var(--line); background:var(--white); border-radius:12px; box-shadow:0 2px 12px #1f332608; } .card .label { color:var(--muted); font-size:13px; } .metric { font-size:28px; font-weight:700; letter-spacing:-.04em; margin:5px 0; } .positive { color:var(--green); } .negative { color:var(--red); } .small { font-size:13px; color:var(--muted); }
.section { margin-top:30px; } .columns { display:grid; grid-template-columns:1.5fr 1fr; gap:18px; margin-top:16px; } .table-card { padding:20px; border:1px solid var(--line); border-radius:12px; background:white; } .row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid #edf0eb; } .row:last-child { border:0; } .row strong { font-variant-numeric:tabular-nums; } .bar { height:9px; border-radius:99px; overflow:hidden; background:#e7ece6; margin-top:7px; } .bar > span { display:block; height:100%; background:var(--gold); border-radius:99px; }
.action { background:#143c33; color:white; padding:24px; border-radius:12px; } .action h2 { color:white; } .action p { color:#c7d8cf; } .action button { border:0; border-radius:7px; padding:11px 15px; color:#173a30; font-weight:700; background:#efd091; } .scenario { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; } .scenario .card { min-height:140px; } .badge { display:inline-block; padding:3px 8px; border-radius:99px; background:#f7ead1; color:#755313; font-size:12px; font-weight:700; }
.login { min-height:100vh; display:grid; place-items:center; padding:20px; background:linear-gradient(135deg,#143c33,#0d211c); } .login-card { width:min(460px,100%); padding:38px; border-radius:16px; background:var(--white); } .login-card h1 { font-size:38px; } label { display:block; margin:20px 0 7px; font-size:14px; font-weight:700; } input { width:100%; padding:13px; border:1px solid #cfd7cf; border-radius:8px; } .primary { width:100%; margin-top:20px; border:0; border-radius:8px; padding:13px; background:var(--green); color:white; font-weight:700; } .demo { margin-top:16px; color:var(--muted); font-size:13px; }
@media (max-width:850px) { .grid { grid-template-columns:repeat(2,1fr); } .columns { grid-template-columns:1fr; } } @media (max-width:540px) { .top { height:62px; } .account span { display:none; } .layout { padding-top:24px; } .grid,.scenario { grid-template-columns:1fr; } .login-card { padding:27px; } }
select {font:inherit;max-width:100%;padding:12px;border:1px solid #cfd7cf;border-radius:8px;background:white;}
button:disabled{opacity:.6;cursor:wait;}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
.scroll{overflow:auto;margin-top:16px;}table{width:100%;border-collapse:collapse;text-align:left;}th,td{padding:10px;border-bottom:1px solid var(--line);white-space:nowrap;}th{color:var(--muted);font-size:13px;}.entries input{width:110px;}.entries [data-field="label"]{width:190px;}.toolbar{max-width:260px;}
#status{color:var(--green);min-height:24px;}#invitation{display:block;overflow-wrap:anywhere;}.top button{background:transparent;color:white;border:1px solid #668177;border-radius:6px;padding:7px 12px;}
.test-banner{text-align:center;background:#f7ead1;color:#624710;font-size:14px;padding:10px 16px;}.legal{text-align:center;padding:18px;background:var(--paper);font-size:13px;}.legal a{color:var(--green);}.login{min-height:calc(100vh - 105px);}
.entry-list{display:grid;gap:14px;margin:20px 0}.entry-card{background:white;border:1px solid var(--line);border-radius:12px;padding:18px}.entry-main{display:grid;grid-template-columns:1.5fr 1fr 1fr auto auto;gap:12px;align-items:end}.entry-main label{margin:0}.entry-main select{width:100%}.entry-main button,#discard{padding:10px 12px;background:var(--paper);border:1px solid var(--line);border-radius:8px;color:var(--ink)}.entry-card details{margin-top:12px}.entry-card summary{cursor:pointer;color:var(--green);font-size:14px}.month-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.month-grid label{margin:12px 0 0}.toolbar{max-width:none;display:flex;gap:12px;align-items:center;margin-top:20px}.toolbar .primary{width:auto;margin:0}.grid>div{min-width:0}#create-future{max-width:480px}
@media(max-width:1000px){.entry-main{grid-template-columns:1fr 1fr}.entry-main>div:first-child{grid-column:1/-1}.month-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:540px){.entry-main{grid-template-columns:1fr}.month-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.toolbar{flex-direction:column;align-items:stretch}.entry-card{padding:14px}}
@media(max-width:540px){.comparison-table thead{display:none}.comparison-table,.comparison-table tbody{display:block}.comparison-table tr{display:grid;grid-template-columns:1fr;gap:0;border-bottom:1px solid var(--line);padding:8px 0}.comparison-table td{display:flex;justify-content:space-between;gap:12px;border:none;padding:5px 0;font-size:13px;white-space:normal}.comparison-table td:first-child{font-weight:700;font-size:14px}.comparison-table td[data-caption]::before{content:attr(data-caption);color:var(--muted)}}
.risk-results,.risk-config{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:20px}.risk-results>*{min-width:0}.risk-config fieldset,fieldset{min-width:0;border:1px solid var(--line);border-radius:10px;padding:16px;margin-top:16px}legend{font-weight:700;padding:0 6px}.risk-config select{display:block;width:100%}.income-choice{display:flex;gap:10px;align-items:center;margin:10px 0;font-weight:400}.income-choice input{width:20px;height:20px;flex-shrink:0}.income-choice:has(input:disabled){color:var(--muted)}.risk-person-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.risk-metrics{margin:0}.risk-metrics>div{padding:12px 0;border-bottom:1px solid var(--line)}.risk-metrics dt{font-size:13px;color:var(--muted)}.risk-metrics dd{margin:3px 0 0;font-size:24px;font-weight:700}.risk-results summary{cursor:pointer;color:var(--green)}#risk-form button:not(.primary){border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:8px;padding:10px 12px}
@media(max-width:850px){.risk-results,.risk-config{grid-template-columns:1fr}}