:root{font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;color:#30323c;background:#f5f4f1;font-synthesis:none;--panel:#ffffffb8;--line:#dededb;--muted:#777b81;--accent:#303d42;--text:#30323c;--bg:#f5f4f1}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text)}body[data-theme=mint]{--bg:#e7eee8;--panel:#f4faf5bd;--accent:#295447;--line:#c8d8cd;--text:#293d33}body[data-theme=night]{--bg:#20252e;--panel:#2d3440;--accent:#bcd0df;--line:#46515d;--text:#e1e7ec;--muted:#a7b4bf}header{height:90px;display:flex;align-items:center;gap:16px;padding:0 32px}.brand{font-size:14px;font-weight:600;color:inherit;text-decoration:none}nav{display:flex;gap:5px;padding:5px;border:1px solid var(--line);border-radius:40px;position:absolute;left:50%;transform:translateX(-50%);background:var(--panel)}button,select,input,textarea{font:inherit;font-size:13px}button{cursor:pointer;border:1px solid var(--line);background:var(--panel);color:inherit;border-radius:9px;padding:10px 17px}button:hover{filter:brightness(.96)}nav button{border:0;border-radius:28px;padding:10px 25px;background:transparent}nav button.active,.primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}header select{margin-left:auto}select,input,textarea{border:1px solid var(--line);border-radius:8px;background:var(--panel);color:inherit;padding:10px}input{min-width:0}textarea{width:100%;min-height:150px;resize:vertical}main{max-width:1040px;margin:0 auto;padding:28px 35px 70px}.hero{min-height:430px;display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column}.hero .icon{font-size:40px;margin-bottom:25px;opacity:.7}.hero h1{font-size:26px;font-weight:550;letter-spacing:.03em;margin:0 0 14px}.hero p{font-size:14px;color:var(--muted);margin:0 0 28px;line-height:1.8}.panel{padding:24px;border:1px solid var(--line);background:var(--panel);border-radius:18px;margin:18px 0}h2{font-size:18px;font-weight:550;margin:0 0 20px}h3{font-size:15px;font-weight:550}p,small{color:var(--muted);line-height:1.8;font-size:13px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}label{font-size:12px;display:flex;flex-direction:column;gap:7px}table{width:100%;border-collapse:collapse;font-size:12px}th,td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--line);max-width:350px;overflow-wrap:anywhere}th{color:var(--muted);font-weight:500}.tablewrap{overflow:auto}.bad{color:#bd654d}.good{color:#448563}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}.login{max-width:380px;margin:90px auto}.login input{width:100%;margin-bottom:16px}.login button{width:100%}#message{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);max-width:85vw;background:var(--accent);color:var(--bg);padding:0;border-radius:10px;font-size:13px}#message:not(:empty){padding:14px 25px}pre{white-space:pre-wrap;font-size:12px;overflow-wrap:anywhere}.empty{padding:30px;text-align:center;color:var(--muted);font-size:13px}a{color:inherit}button:disabled{opacity:.45;cursor:not-allowed}@media(max-width:800px){header{padding:0 15px;height:130px;align-items:flex-start;padding-top:15px}nav{top:70px}nav button{padding:8px 20px}.brand{padding-top:10px}main{padding:15px}.grid{grid-template-columns:1fr}.hero{min-height:350px}}
body[data-theme=space-blue]{--bg:#293a56;--panel:#ffffffdc;--accent:#263b60;--line:#ffffff48;--text:#24334c;--muted:#52647c;background-image:url('/assets/blue-desktop.png');background-size:cover;background-position:center;background-attachment:fixed}body[data-theme=space-green]{--bg:#244f45;--panel:#ffffffe3;--accent:#245548;--line:#ffffff48;--text:#244138;--muted:#537266;background-image:url('/assets/green-desktop.png');background-size:cover;background-position:center;background-attachment:fixed}body[data-theme^=space] .hero{background:var(--panel);border-radius:24px;min-height:480px;margin-top:35px}body[data-theme^=space] header{color:#fff}body[data-theme^=space] nav,body[data-theme^=space] header select,body[data-theme^=space] header button{color:var(--text)}body[data-fit=contain][data-theme^=space]{background-size:contain;background-repeat:no-repeat}nav{padding:4px;gap:2px}nav button{font-size:13px;font-weight:500}.hero .primary{min-width:220px;border-radius:25px}.hero h1{font-size:26px;font-weight:550}.hero .icon{font-size:58px;margin-bottom:40px}
.ledger-line{display:grid;grid-template-columns:1.2fr 1.6fr 1fr 1fr auto;gap:10px;align-items:end;margin:14px 0}.ledger-line input,.ledger-line select{width:100%}select[multiple]{min-height:95px;max-width:100%}#modeBadge{font-size:11px;color:var(--muted);white-space:nowrap}.tablewrap input{width:120px}#bookBody{margin-top:20px}@media(max-width:850px){.ledger-line{grid-template-columns:1fr 1fr}.ledger-line button{justify-self:start}#modeBadge{display:none}}

/* Keep desktop navigation separate from account and theme controls. */
header{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto auto;gap:10px 14px;height:104px;padding-top:16px;padding-bottom:12px}
header .brand{grid-column:1;grid-row:1}header nav{grid-column:2;grid-row:1;position:static;left:auto;transform:none;justify-self:center;white-space:nowrap}
header #modeBadge{grid-column:1 / -1;grid-row:2}header #billing{grid-column:3;grid-row:1}header #theme{grid-column:4;grid-row:1}header #fit{grid-column:5;grid-row:1}header #logout{grid-column:6;grid-row:1}header select{margin-left:0;max-width:140px}
body[data-theme^=space] .primary,body[data-theme^=space] nav button.active,body[data-theme^=space] #message{color:#fff}
@media(max-width:1100px){header{height:150px;grid-template-columns:auto minmax(0,1fr) auto auto auto auto}header nav{grid-column:1 / -1;grid-row:3}header #modeBadge{grid-row:2}header .brand{padding-top:0}}

/* Desktop canvas extends behind the draggable title bar; scrollbars never occupy space. */
html.desktop{height:100%;overflow:hidden;scrollbar-width:none}
body[data-desktop]{height:100dvh;min-height:0;overflow:hidden;display:grid;grid-template-rows:36px auto minmax(0,1fr)}
body[data-desktop],body[data-desktop] *{scrollbar-width:none}
body[data-desktop]::-webkit-scrollbar,body[data-desktop] *::-webkit-scrollbar{width:0;height:0;display:none}
body[data-desktop] #desktopTitlebar{height:36px;display:flex;align-items:center;justify-content:space-between;app-region:drag;-webkit-app-region:drag;user-select:none;background:transparent;color:var(--text)}
body[data-desktop] .window-caption{padding-left:16px;font-size:12px;font-weight:500}
body[data-desktop] .window-buttons{display:flex;height:36px;app-region:no-drag;-webkit-app-region:no-drag}
body[data-desktop] .window-buttons button{width:46px;height:36px;border:0;border-radius:0;padding:0;background:transparent;color:inherit;display:grid;place-items:center}
body[data-desktop] .window-buttons button:hover{background:#ffffff55;filter:none}
body[data-desktop] .window-buttons button[data-window-action=close]:hover{background:#c42b1c;color:white}
body[data-desktop] .window-buttons svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1}
body[data-desktop][data-theme^=space] #desktopTitlebar{color:#fff}
body[data-desktop][data-theme^=space]{background-size:cover!important;background-repeat:no-repeat;background-position:center;background-attachment:fixed}
body[data-desktop] header{height:84px;padding-top:8px;padding-bottom:8px;min-width:0}
body[data-desktop] #app{width:100%;height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;margin:0 auto;padding:20px 28px 28px}
body[data-desktop] #app:has(.login){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:12px 24px}
body[data-desktop] .login{flex:none;width:min(380px,100%);max-width:100%;margin:0;padding:24px}
body[data-desktop] .login + .row{justify-content:center;gap:10px;flex:none}
body[data-desktop] .login input{margin-bottom:12px}
body[data-desktop] #message{z-index:10;pointer-events:none}
@media(max-width:1100px){body[data-desktop] header{height:100px}body[data-desktop] header:has(nav:empty){height:74px}}
@media(max-height:720px){body[data-desktop] #app:has(.login){gap:10px}body[data-desktop] .login{padding:18px 22px}body[data-desktop] .login h2{margin-bottom:10px}body[data-desktop] .login p{margin:8px 0}body[data-desktop] .login input{padding:8px;margin-bottom:10px}}
body[data-desktop] nav:empty{visibility:hidden;border:0;background:none}

.brand{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.brand img{width:28px;height:28px;object-fit:contain;flex:none}
body[data-desktop] .window-caption{display:flex;align-items:center;gap:8px}
body[data-desktop] .window-caption img{width:18px;height:18px;object-fit:contain}

.code-entry{display:flex;gap:8px;align-items:start}.code-entry input{width:100%;min-width:0}.code-entry button{flex:none;white-space:nowrap}
body[data-desktop] #app:has(#phoneFlow){display:flex;align-items:center;justify-content:center}
body[data-desktop] #app:has(#phoneFlow)>.panel{width:min(620px,100%);margin:0}
.phone-flow{display:flex;flex-direction:column;gap:12px}.phone-flow p{margin:0}.phone-flow .grid{gap:12px}
body[data-desktop] .login + .row{flex-wrap:wrap}
.login .code-entry input{flex:1;width:0;min-width:100px}.login .code-entry button{width:auto;padding-left:12px;padding-right:12px}