* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: #f4f6fb; color: #12233f; -webkit-font-smoothing: antialiased; }
.top { background: #0a1f44; color: #fff; padding: 14px 16px 12px; }
.top h1 { margin: 0; font-size: 22px; }
.top h1 .accent { color: #d4af37; }
.benefit { margin: 4px 0 10px; font-size: 14px; color: #d7e0f2; line-height: 1.35; }
main { max-width: 1100px; margin: 0 auto; padding: 12px 12px 32px; }
.mainnav { display: flex; gap: 8px; flex-wrap: wrap; }
.navbtn { flex: 1 1 auto; padding: 10px 10px; font-size: 14px; font-weight: 600; border: 2px solid #fff; border-radius: 10px; background: transparent; color: #fff; cursor: pointer; min-height: 44px; }
.navbtn.primary { background: #059669; border-color: #059669; color: #fff; }
.btn { padding: 10px 14px; font-size: 15px; font-weight: 600; border: 2px solid #0a1f44; border-radius: 10px; background: #fff; color: #0a1f44; cursor: pointer; min-height: 44px; }
.btn.primary { background: #059669; border-color: #059669; color: #fff; }
.btn.danger { border-color: #a33; color: #a33; }
.btn.small { padding: 6px 10px; font-size: 13px; min-height: 40px; }
.fine { font-size: 13px; color: #68779a; line-height: 1.45; }
.honest { background: #fdf6e0; border: 1px solid #c9a227; border-radius: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.45; margin-bottom: 12px; }
.version { font-size: 12px; color: #9aa7c2; }
.note { background: #e5f3ee; border: 1px solid #059669; color: #065f46; border-radius: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.45; margin: 10px 0; }

/* formula bar */
.formulabar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.cellref { flex: 0 0 64px; text-align: center; font-weight: 700; font-size: 15px; background: #0a1f44; color: #ffd968; border-radius: 9px; padding: 11px 4px; }
#formulaBar { flex: 1; font-size: 16px; padding: 10px; border: 1.5px solid #b9c4da; border-radius: 9px; background: #fff; color: #12233f; min-height: 44px; }
.cellvalue { font-size: 13px; color: #68779a; margin: 0 0 8px; min-height: 16px; }

/* grid */
.gridwrap { overflow: auto; border: 1px solid #dde3ef; border-radius: 10px; background: #fff; max-height: 62vh; -webkit-overflow-scrolling: touch; }
table.grid { border-collapse: collapse; font-size: 14px; }
table.grid th, table.grid td { border: 1px solid #e3e8f2; padding: 0 8px; height: 40px; min-width: 88px; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #fff; }
table.grid thead th { position: sticky; top: 0; z-index: 3; background: #eef1f7; color: #33456b; font-weight: 700; text-align: center; }
table.grid th.rowhead { position: sticky; left: 0; z-index: 2; background: #eef1f7; color: #33456b; min-width: 44px; text-align: center; font-weight: 700; }
table.grid th.corner { position: sticky; left: 0; top: 0; z-index: 4; background: #eef1f7; min-width: 44px; }
table.grid th.selhead { background: #059669; color: #fff; }
td.cell { cursor: cell; }
td.cell.num { text-align: right; }
td.cell.err { color: #b3261e; font-weight: 700; }
td.cell.selected { outline: 3px solid #059669; outline-offset: -3px; background: #ecfdf5; }
.celledit { width: 100%; height: 100%; font-size: 15px; border: 0; outline: none; padding: 0 2px; background: #fff; color: #12233f; }

/* sheet tabs */
.tabbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.sheettabs { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.sheettab { padding: 10px 14px; font-size: 14px; font-weight: 600; border: 2px solid #0a1f44; border-radius: 10px 10px 0 0; background: #fff; color: #0a1f44; cursor: pointer; min-height: 44px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheettab.active { background: #059669; border-color: #059669; color: #fff; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.toolbar .btn { flex: 1 1 140px; }
.savestate { font-size: 13px; color: #68779a; margin-top: 10px; }
footer { margin-top: 18px; }