[hidden]{display:none!important}
/* Warm-paper ledger look, adapted from the Notion recipe: cream canvas, ink text, one deep-green accent. System fonts only (offline). */
:root{
  --paper:#f4f0e6; --card:#fbf9f3; --ink:#1c1a15; --ink2:#5b564a; --ink3:#8b8576;
  --line:#ddd6c4; --line2:#c9c0a8; --acc:#0e6b50; --acc2:#0a5440; --accsoft:#dcebe3; --warn:#9a4b00; --sel:#fff3c4;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --rowh:32px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--paper);color:var(--ink);font:15px/1.45 var(--sans);-webkit-text-size-adjust:100%}
body{overflow:hidden;height:100vh;height:100dvh}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* paywall.js adds bottom padding to body when its one-line bar shows; .app fills what is left, so nothing sits under the bar */
.app{display:flex;flex-direction:column;height:100%;max-width:100vw}

.top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);flex:none;min-width:0}
.mark{font:700 21px/1 var(--serif);min-height:32px;letter-spacing:-.02em;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px}
.mk{width:18px;height:18px;border:2px solid var(--acc);border-radius:3px;background:
  linear-gradient(var(--acc),var(--acc)) 50% 0/2px 100% no-repeat,linear-gradient(var(--acc),var(--acc)) 0 50%/100% 2px no-repeat}
.priv{font-size:13px;color:var(--acc2);background:var(--accsoft);padding:3px 9px;border-radius:99px;white-space:nowrap}
.sp{flex:1}
.pill{background:var(--ink);color:var(--paper);text-decoration:none;font-weight:600;font-size:14px;padding:8px 14px;border-radius:99px;white-space:nowrap}
.pill:hover{background:var(--acc)}
.ghost{background:none;border:1px solid var(--line2);border-radius:8px;padding:7px 12px;white-space:nowrap}
.ghost:hover{background:var(--card)}
.ghost.sm{padding:5px 10px;font-size:13px}
.primary{background:var(--acc);color:#fff;border:0;border-radius:10px;padding:10px 18px;font-weight:600;white-space:nowrap}
.primary:hover{background:var(--acc2)}
.chip{background:var(--card);border:1px solid var(--line2);border-radius:99px;padding:6px 13px;font-size:14px}
.chip:hover{border-color:var(--acc);color:var(--acc2)}

/* empty state */
.empty{flex:1;overflow:auto;display:block;padding:24px 18px}
.drop{max-width:640px;width:100%;margin:4vh auto 0;box-sizing:border-box;border:2px dashed var(--line2);border-radius:18px;padding:36px 30px;background:var(--card)}
.drop.over{border-color:var(--acc);background:var(--accsoft)}
.drop h1{font:700 clamp(28px,5.4vw,46px)/1.08 var(--serif);letter-spacing:-.03em;margin:0 0 14px}
.lede{color:var(--ink2);margin:0 0 22px;max-width:52ch}
.acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.or{color:var(--ink2);font-size:14px}
.samples{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:22px 0 4px;color:var(--ink2);font-size:14px}
.facts{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:8px;color:var(--ink2);font-size:14px;border-top:1px solid var(--line);padding-top:16px}
.facts b{color:var(--ink)}

/* workspace */
.work{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0}
.work[hidden],.empty[hidden]{display:none}
.tools{display:flex;align-items:center;gap:4px;padding:6px 10px;overflow-x:auto;flex:none;border-bottom:1px solid var(--line);scrollbar-width:thin;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.tools button{background:none;border:1px solid transparent;border-radius:7px;padding:6px 10px;white-space:nowrap;font-size:14px}
.tools button:hover:not(:disabled){background:var(--card);border-color:var(--line2)}
.tools button:disabled{color:var(--ink3);cursor:default}
.sep{width:1px;height:20px;background:var(--line);margin:0 4px;flex:none}
.tag{font:600 10px/1 var(--sans);font-style:normal;background:var(--accsoft);color:var(--acc2);padding:2px 5px;border-radius:4px;margin-left:3px;vertical-align:1px}
body.pro .tag{display:none}
.chk,.sel{display:flex;align-items:center;gap:6px;font-size:14px;white-space:nowrap;padding:0 6px}
.sel select{padding:4px 6px;border:1px solid var(--line2);border-radius:6px;background:var(--card)}

.viewbar{display:flex;align-items:center;gap:10px;padding:8px 10px;flex:none;flex-wrap:wrap}
.filter{display:flex;gap:6px;flex:1;min-width:0;align-items:center}
.filter select,.filter input{border:1px solid var(--line2);background:var(--card);border-radius:8px;padding:7px 8px;min-width:0}
.filter select{max-width:132px}
.filter input{flex:1;min-width:90px}
.savebox{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;background:var(--card);border:1px solid var(--line2);border-radius:10px;box-shadow:0 10px 30px rgba(40,30,0,.18);padding:4px;min-width:250px}
.menu[hidden]{display:none}
.menu button{display:block;width:100%;text-align:left;background:none;border:0;padding:10px 12px;border-radius:7px}
.menu button:hover{background:var(--accsoft)}

.cellbar{display:flex;gap:6px;padding:0 10px 8px;flex:none}
.cellbar input,.cellbar textarea{border:1px solid var(--line2);background:var(--card);border-radius:8px;padding:6px 9px;min-width:0;resize:none;font-family:var(--mono);font-size:13.5px}
.cellbar input{width:28%;max-width:200px;font-family:var(--sans);font-weight:600}
.cellbar textarea{flex:1;height:34px;overflow:hidden}

.scroller{flex:1;min-height:0;overflow:auto;position:relative;border-top:1px solid var(--line);background:var(--card);outline-offset:-2px;overscroll-behavior:contain}
.sizer{position:relative}
.hrow{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:var(--cols);width:var(--tw);height:34px;background:#ece6d4;border-bottom:1px solid var(--line2)}
.body{position:relative}
.row{position:absolute;left:0;display:grid;grid-template-columns:var(--cols);width:var(--tw);height:var(--rowh)}
.c{padding:0 9px;line-height:calc(var(--rowh) - 1px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;font-size:14px;cursor:cell}
.c.num{text-align:right}
.rn{position:sticky;left:0;z-index:3;background:#f0ebdc;color:var(--ink3);font:12px/calc(var(--rowh) - 1px) var(--mono);text-align:right;padding:0 8px;border-right:1px solid var(--line2);border-bottom:1px solid var(--line);overflow:hidden;cursor:default}
.hrow .rn{z-index:6;background:#e4ddc8;line-height:34px;border-bottom:0}
.row:nth-child(even) .c{background:#f8f5ec}
.c.act{background:var(--sel)!important;box-shadow:inset 0 0 0 2px var(--acc)}
.h{display:flex;align-items:center;gap:4px;padding:0 8px;font-weight:600;font-size:13.5px;border-right:1px solid var(--line2);cursor:pointer;user-select:none;min-width:0;background:#ece6d4}
.h span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.h:hover{background:#e4ddc8}
.h.act{background:var(--accsoft)}
.h i{font-style:normal;color:var(--acc);font-size:12px;flex:none}
.celledit{position:absolute;z-index:8;border:2px solid var(--acc);background:#fff;border-radius:0;padding:4px 8px;font:14px/22px var(--sans);resize:none;box-shadow:0 6px 20px rgba(0,0,0,.2);min-height:var(--rowh);margin:0;overflow:auto}
.celledit[hidden]{display:none}

.status{display:flex;gap:16px;padding:6px 12px;font-size:12.5px;color:var(--ink2);border-top:1px solid var(--line);flex:none;flex-wrap:wrap;row-gap:2px;overflow-x:hidden}
#stMsg{margin-left:auto;color:var(--acc2);font-weight:600}
#stMsg.warn{color:var(--warn)}
.drag{position:fixed;inset:0;z-index:50;background:rgba(14,107,80,.9);display:flex;align-items:center;justify-content:center;color:#fff;font:700 28px var(--serif)}
.drag[hidden]{display:none}

.dlg{border:1px solid var(--line2);border-radius:14px;background:var(--card);color:var(--ink);padding:0;width:min(440px,calc(100vw - 24px));box-shadow:0 20px 60px rgba(0,0,0,.3)}
.dlg::backdrop{background:rgba(28,26,21,.45)}
#dlgBody{padding:18px 20px}
.dlg h2{font:700 21px/1.2 var(--serif);margin:0 0 10px}
.dlg p{margin:0 0 10px;color:var(--ink2)}
.dlg .row2{display:flex;gap:8px;margin:8px 0;align-items:center;flex-wrap:wrap}
.dlg input[type=text],.dlg select{flex:1;min-width:0;border:1px solid var(--line2);border-radius:8px;padding:8px;background:#fff}
.dlg .btns{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
.dlg table{border-collapse:collapse;width:100%;font-size:14px}
.dlg td{padding:4px 0;border-bottom:1px solid var(--line)}
.dlg td:last-child{text-align:right;font-variant-numeric:tabular-nums}

@media (max-width:640px){
  .top{padding:8px 10px;gap:8px}
  .priv{display:none}
  .mark{font-size:19px}
  .drop{padding:26px 18px}
  .viewbar{gap:8px}
  .filter{flex:1 1 100%}
  .filter select{max-width:96px}
  .savebox{flex:1 1 100%}
  .savebox .primary{width:100%}
  .menu{left:0;right:0}
  .cellbar input{width:34%}
}
@media (prefers-reduced-motion:no-preference){.primary,.pill,.chip{transition:background .15s,border-color .15s}}

.linkbtn{background:none;border:0;padding:6px 0;color:var(--acc2);text-decoration:underline;font-size:inherit}
.upsell ul{margin:0 0 14px;padding-left:20px;color:var(--ink2)}
.faq,.tp-legal,.legal{max-width:640px;margin:28px auto 0;color:var(--ink2);font-size:14px}
.faq h2{font:700 22px/1.2 var(--serif);color:var(--ink);margin:0 0 8px}
.faq h3{font-size:15px;color:var(--ink);margin:16px 0 4px}
.faq p{margin:0}
.tp-legal{text-align:center;margin-top:24px}
.tp-legal a,.legal a{color:var(--acc2);display:inline-block;min-height:24px;line-height:24px;padding:0 6px}
.legal{font-size:12px;text-align:center;padding-bottom:12px;margin-top:8px}