:root{
  --bg:#F2F5F1;--surface:#FFFFFF;--surface-sunken:#E8EEE9;--line:#D0DAD2;--line-strong:#B3C0B6;
  --ink:#17211A;--ink-2:#44524A;--ink-3:#5A665D;
  --accent:#2E6B3F;--accent-hover:#245733;--accent-soft:#DFEBE2;--accent-weak:#9DBBA5;--on-accent:#FFFFFF;
  --range:rgb(46 107 63 / .09);--grid:#E1E7E2;--danger:#A8321F;
  --pop:0 8px 24px rgb(0 0 0 / .08);
  --font:"Inter","Noto Sans JP",system-ui,-apple-system,"Hiragino Sans","Yu Gothic UI",sans-serif;
  --mono:ui-monospace,Consolas,"BIZ UDGothic",monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121714;--surface:#19201B;--surface-sunken:#151B17;--line:#2A332D;--line-strong:#3B473F;
    --ink:#E4ECE6;--ink-2:#B5C2B9;--ink-3:#8E9C92;
    --accent:#8FCB9F;--accent-hover:#A8DAB5;--accent-soft:#1F3326;--accent-weak:#4C6F56;--on-accent:#0F1A13;
    --range:rgb(143 203 159 / .12);--grid:#252D27;--danger:#F0907E;
    --pop:0 8px 24px rgb(0 0 0 / .35);color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121714;--surface:#19201B;--surface-sunken:#151B17;--line:#2A332D;--line-strong:#3B473F;
  --ink:#E4ECE6;--ink-2:#B5C2B9;--ink-3:#8E9C92;
  --accent:#8FCB9F;--accent-hover:#A8DAB5;--accent-soft:#1F3326;--accent-weak:#4C6F56;--on-accent:#0F1A13;
  --range:rgb(143 203 159 / .12);--grid:#252D27;--danger:#F0907E;
  --pop:0 8px 24px rgb(0 0 0 / .35);color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:400 14px/1.6 var(--font);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* header */
.hdr,.privacy,.notice,main{width:100%;max-width:1800px;margin-left:auto;margin-right:auto}
.hdr{display:flex;align-items:center;gap:12px;padding:14px 24px 4px}
.logo{display:inline-flex;align-items:center;gap:.42em;font:500 19px/1 Inter,sans-serif;letter-spacing:.06em;color:var(--ink);text-decoration:none;flex-shrink:0}
.logo svg{width:1.2em;height:1.2em;flex-shrink:0}
.bookname{min-width:0;width:min(320px,40vw);height:32px;padding:0 10px;border:1px solid var(--line);border-radius:7px;background:var(--surface);font-weight:600}
.bookname:hover{border-color:var(--line-strong)}
.saved{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp{flex:1}
.icon-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--surface);cursor:pointer;display:inline-grid;place-items:center;color:var(--ink-2);flex-shrink:0;transition:border-color .15s var(--ease),color .15s var(--ease)}
.icon-btn:hover{border-color:var(--line-strong);color:var(--ink)}
.privacy{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--ink-3);padding:0 24px 8px;margin:0}
.privacy .ic{width:14px;height:14px}
.privacy .short{display:none}
.notice{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:6px 6px 6px 14px;border:1px solid var(--accent-weak);border-radius:8px;background:var(--accent-soft);font-size:13px;width:calc(100% - 48px)}
.notice span{flex:1}
main{padding:0 24px;flex:1;display:flex;flex-direction:column;min-width:0}

/* toolbar */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:5px 6px;background:var(--surface);border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0}
.fmt-tools{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.tgroup{display:flex;gap:2px;flex-shrink:0}
.vr{width:1px;height:20px;background:var(--line);margin:0 3px;flex-shrink:0}
.tb{position:relative;min-width:32px;height:31px;padding:0 7px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:13px;line-height:1;white-space:nowrap;flex-shrink:0;transition:background .12s var(--ease),color .12s var(--ease)}
.tb:hover:not(:disabled){background:var(--accent-soft);color:var(--ink)}
.tb .ic{width:17px;height:17px}
.tb.txt{font-family:Inter,"Noto Sans JP",sans-serif;font-size:14px;font-weight:600;width:32px}
.tb.pri{background:var(--accent);color:var(--on-accent);font-weight:600}
.tb.pri:hover:not(:disabled){background:var(--accent-hover);color:var(--on-accent)}
.tb[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent-weak);color:var(--accent)}
.tb .caret{font-size:9px;opacity:.7;margin-left:-2px}
.hist-btn{background:var(--accent-soft);border-color:var(--accent-weak);color:var(--accent);font-weight:600;padding:0 10px 0 8px}
.hist-btn:hover:not(:disabled){background:var(--accent);color:var(--on-accent)}
.hist-btn:disabled{background:transparent;border-color:var(--line-strong);color:var(--ink-3);opacity:.6;cursor:default}
.color-tb{padding:0 6px;cursor:pointer}
.color-tb input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;border:0;padding:0}
.swatch{position:absolute;left:7px;right:7px;bottom:3px;height:3px;border-radius:2px;background:#c0392b}
#sw-fill{background:#dfebe2}
.more-btn{display:none}

/* search */
.searchbar{display:flex;align-items:center;gap:8px;padding:5px 8px;background:var(--surface);border:1px solid var(--line);border-bottom:0}
.searchbar input{flex:1;min-width:0;height:30px;padding:0 10px;border:1px solid var(--line-strong);border-radius:7px;background:var(--bg)}
.search-count{font-size:12px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}

/* formula bar */
.fxbar{display:flex;align-items:center;gap:8px;padding:5px 8px;background:var(--bg);border:1px solid var(--line);border-bottom:0}
.addr{width:84px;height:28px;padding:0 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);font:600 13px var(--mono);color:var(--accent);text-transform:uppercase}
.fx{font:italic 14px Georgia,serif;color:var(--ink-3);padding:0 2px}
.fxin{flex:1;min-width:0;height:28px;padding:0 9px;border:1px solid var(--line);border-radius:6px;background:var(--surface);font:13px var(--mono)}

/* grid (jspreadsheet CE, restyled) */
.grid-wrap{border:1px solid var(--line);background:var(--surface);height:max(320px,calc(100dvh - 300px));min-height:240px;overflow:hidden;position:relative}
.masu-grid,.masu-grid .jss_container,.masu-grid .jss_spreadsheet{height:100%}
.masu-grid .jtabs-headers-container{display:none}
.masu-grid .jtabs,.masu-grid .jtabs-content{height:100%}
.masu-grid .jtabs-content>div{height:100%}
.masu-grid .jss_worksheet_container,.masu-grid .jss_container{height:100%;display:flex;flex-direction:column}
.masu-grid .jss_content{flex:1;width:100%!important;max-height:none!important;height:100%;box-shadow:none;padding:0;background:var(--surface)}
.masu-grid .jss_about,.masu-grid .jss_pagination,.masu-grid .jss_toolbar,.masu-grid div.jss_filter{display:none!important}
.masu-grid .jss_worksheet{font:13px/1.4 var(--font);color:var(--ink);border-collapse:separate;border-spacing:0;border-color:var(--grid)}
.masu-grid .jss_worksheet>tbody>tr>td{border-color:var(--grid);background-clip:padding-box;padding:2px 6px;text-align:left;white-space:nowrap}
.masu-grid .jss_worksheet>tbody>tr>td.masu-num{text-align:right;font-variant-numeric:tabular-nums}
.masu-grid .jss_worksheet>thead>tr>td,.masu-grid .jss_worksheet>tbody>tr>td:first-child{background:var(--accent-soft);color:var(--ink-2);font-weight:600;font-size:12px;border-color:var(--line);text-align:center}
.masu-grid .jss_worksheet>thead>tr>td{z-index:3}
.masu-grid .jss_worksheet>thead>tr>td.selected,.masu-grid .jss_worksheet>tbody>tr.selected>td:first-child{background:var(--accent-weak);color:var(--ink)}
.masu-grid .jss_worksheet>tbody>tr>td.highlight{background-color:var(--range)}
.masu-grid .jss_worksheet .highlight-top{border-top:1px solid var(--accent)!important;box-shadow:0 -1px var(--accent)}
.masu-grid .jss_worksheet .highlight-left{border-left:1px solid var(--accent)!important;box-shadow:-1px 0 var(--accent)}
.masu-grid .jss_worksheet .highlight-right{border-right:1px solid var(--accent)!important}
.masu-grid .jss_worksheet .highlight-bottom{border-bottom:1px solid var(--accent)!important}
.masu-grid .jss_worksheet .highlight-selected{outline:2px solid var(--accent);outline-offset:-2px}
.masu-grid .jss_corner{background:var(--accent);border:1px solid var(--surface);width:7px;height:7px}
.masu-grid .jss_worksheet>tbody>tr>td.readonly{color:var(--ink-3)}
.masu-grid .jss_worksheet>tbody>tr>td>input,.masu-grid .jss_worksheet>tbody>tr>td>textarea,.masu-grid .editor{font:13px var(--font);color:var(--ink);background:var(--surface)}
.masu-grid .jss_worksheet>tbody>tr>td.jss_frz-row{position:sticky;z-index:2}
.masu-grid .jss_worksheet>tbody>tr>td.jss_frz-row:not([class*="highlight"]){background-color:var(--surface)}
.masu-grid .jss_worksheet>tbody>tr.masu-frz-last>td{border-bottom:2px solid var(--accent)}
.masu-grid .jss_worksheet td.jss_freezed,.masu-grid .jss_worksheet td.masu-frz-col-last{border-right:2px solid var(--accent)}
.masu-grid .jss_worksheet>tbody>tr>td.jss_comments{background-image:linear-gradient(225deg,#c0392b 5px,transparent 5px)}
.masu-grid .jss_worksheet>thead>tr.jss_filter td input{height:24px}
.masu-grid .jss_filter-row input{width:100%;border:1px solid var(--line);border-radius:4px;background:var(--surface);font-size:12px;padding:1px 4px}
.masu-grid .jss_worksheet>tbody>tr>td.masu-hit{background-color:#ffe9a8!important;color:#17211A}

/* sheet tabs + selection stats */
.tabbar{display:flex;align-items:stretch;gap:0;min-height:34px;background:var(--bg);border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;overflow:hidden}
.tabs{display:flex;overflow-x:auto;scrollbar-width:none;min-width:0}
.tab{border:0;border-right:1px solid var(--line);background:transparent;color:var(--ink-2);padding:0 16px;font-size:13px;cursor:pointer;white-space:nowrap;border-top:2px solid transparent}
.tab:hover{background:var(--surface);color:var(--ink)}
.tab[aria-selected="true"]{background:var(--surface);color:var(--accent);font-weight:600;border-top-color:var(--accent)}
.tab-edit{width:120px;border:1px solid var(--accent);border-radius:4px;margin:4px 6px;padding:0 6px;font-size:13px;background:var(--surface)}
.tab-add{border:0;background:transparent;color:var(--ink-3);width:36px;cursor:pointer;display:grid;place-items:center;flex-shrink:0}
.tab-add:hover{color:var(--accent);background:var(--surface)}
.stat{margin-left:auto;align-self:center;padding:0 14px;font:12px var(--mono);color:var(--ink-3);white-space:nowrap}
.drop-hint{margin:6px 2px 0;font-size:12px;color:var(--ink-3)}

/* menus */
.menu{position:fixed;z-index:50;min-width:180px;padding:5px;background:var(--surface);border:1px solid var(--line);border-radius:9px;box-shadow:var(--pop);display:flex;flex-direction:column}
.menu button{border:0;background:transparent;text-align:left;padding:7px 12px;border-radius:6px;font-size:13px;cursor:pointer;color:var(--ink)}
.menu button:hover,.menu button:focus-visible{background:var(--accent-soft);outline:0}
.menu button[aria-checked="true"]{color:var(--accent);font-weight:600}
.menu button[aria-checked="true"]::before{content:"✓ "}
.menu button.danger{color:var(--danger)}
.menu hr{border:0;border-top:1px solid var(--line);margin:4px 6px}

/* dialogs */
.dlg{width:min(560px,calc(100vw - 32px));max-height:min(640px,calc(100dvh - 48px));padding:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);box-shadow:var(--pop)}
.dlg::backdrop{background:rgb(0 0 0 / .35)}
.dlg-head{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 6px 20px}
.dlg-head h2{margin:0;font-size:17px}
.dlg-note{margin:0 20px 10px;font-size:12.5px;color:var(--ink-3)}
.books{list-style:none;margin:0;padding:0 12px;max-height:380px;overflow:auto}
.books li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px}
.books li:hover{background:var(--bg)}
.books li.current{background:var(--accent-soft)}
.books .b-open{flex:1;min-width:0;border:0;background:transparent;text-align:left;cursor:pointer;padding:4px 0}
.books .b-name{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.books .b-meta{display:block;font-size:12px;color:var(--ink-3)}
.books .b-act{border:1px solid var(--line);background:var(--surface);border-radius:6px;font-size:12px;padding:3px 9px;cursor:pointer;color:var(--ink-2)}
.books .b-act:hover{border-color:var(--line-strong);color:var(--ink)}
.books .b-act.danger{color:var(--danger)}
.books .empty{color:var(--ink-3);font-size:13px;padding:12px 8px}
.dlg-foot{display:flex;justify-content:flex-end;padding:12px 20px 18px}
.btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:8px;border:1px solid var(--line-strong);background:var(--surface);cursor:pointer;font-weight:600}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.pri:hover{background:var(--accent-hover)}
.about{padding:0 20px 20px;font-size:13.5px}
.about p{margin:0 0 10px}
.about .about-h{font-weight:700;margin:14px 0 4px}
.about ul{margin:0 0 10px;padding-left:20px}
.about a{color:var(--accent)}

/* drag and drop */
.drop-layer{position:fixed;inset:0;z-index:60;background:rgb(46 107 63 / .18);display:grid;place-items:center;pointer-events:none}
.drop-layer p{padding:18px 28px;border:2px dashed var(--accent);border-radius:14px;background:var(--surface);font-weight:600;color:var(--accent)}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:70;padding:9px 16px;border-radius:9px;background:var(--ink);color:var(--bg);font-size:13px;box-shadow:var(--pop);max-width:calc(100vw - 32px)}

/* jSuites context menu */
.jcontextmenu{background:var(--surface)!important;color:var(--ink);border:1px solid var(--line)!important;border-radius:9px;box-shadow:var(--pop)!important;padding:5px!important}
.jcontextmenu>div{border-radius:6px;font-size:13px;padding:6px 12px 6px 28px!important;color:var(--ink)}
.jcontextmenu>div:hover{background:var(--accent-soft)!important}
.jcontextmenu>div a{color:var(--ink)}
.jcontextmenu>div span{color:var(--ink-3)}
.jcontextmenu hr{border-color:var(--line)}

/* phones: read and enter values; the format tools fold behind "…" */
@media (max-width:760px){
  .hdr{padding:12px 16px 4px;gap:8px}
  .privacy{padding:0 16px 6px}
  .privacy .long{display:none}.privacy .short{display:inline}
  .saved{display:none}
  main{padding:0 16px}
  .notice{width:calc(100% - 32px)}
  .toolbar{flex-wrap:wrap}
  .tb.lbl span:not(.caret){display:none}
  .tb.pri span{display:inline!important}
  .more-btn{display:inline-flex}
  .fmt-tools{display:none;flex-wrap:wrap;width:100%}
  .toolbar.open .fmt-tools{display:flex}
  .grid-wrap{height:max(300px,calc(100dvh - 260px))}
  .drop-hint{display:none}
}

/* print: the table only */
@media print{
  .hdr,.privacy,.notice,.toolbar,.searchbar,.fxbar,.tabbar,.drop-hint,.tz-foot{display:none!important}
  .grid-wrap{height:auto;border:0;overflow:visible}
  .masu-grid .jss_content{overflow:visible!important;height:auto}
  .masu-grid .jss_worksheet>thead,.masu-grid .jss_worksheet>tbody>tr>td:first-child,.masu-grid .jss_corner{display:none}
}

/* Tsuzura: shared footer */
.tz-foot{display:flex;justify-content:center;padding:22px 16px calc(28px + env(safe-area-inset-bottom))}
.tz-link{display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2);text-decoration:none;font-size:12px;line-height:1.4;--tz-gap:var(--surface);transition:border-color .15s,color .15s}
.tz-link:hover{border-color:var(--line-strong);color:var(--ink)}
.tz-mark{width:24px;height:24px;color:#8E5532;flex-shrink:0}
.tz-name{font-size:14px;font-weight:500;letter-spacing:.12em;color:var(--ink)}
.tz-sub{color:var(--ink-3)}
:root[data-theme="dark"] .tz-mark{color:#C9A063}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tz-mark{color:#C9A063}}

/* filter row (jspreadsheet's: click a cell to choose the values to show) */
.masu-grid .jss_worksheet>thead>tr:nth-child(2)>td{background:var(--surface);cursor:pointer;font-weight:400;color:var(--ink-3);font-size:11px;text-align:right;padding-right:6px}
.masu-grid .jss_worksheet>thead>tr:nth-child(2)>td:not(:first-child)::after{content:"▾ 絞り込み"}
.masu-grid .jss_worksheet>thead>tr:nth-child(2)>td:hover{color:var(--accent)}
.jdropdown-container{background:var(--surface);color:var(--ink);border-color:var(--line)}

/* jspreadsheet's light-only colors, replaced by the theme */
.masu-grid .jss_worksheet{background-color:var(--surface);border-right-color:var(--grid);border-bottom-color:var(--grid)}
.masu-grid .jss_worksheet>tbody>tr>td{border-top:1px solid var(--grid);border-left:1px solid var(--grid);border-right:0;border-bottom:0}
.masu-grid .jss_worksheet>thead>tr>td{border-top:1px solid var(--line);border-left:1px solid var(--line)}
.masu-grid .jss_worksheet>tbody>tr>td>input,.masu-grid .jss_worksheet>tbody>tr>td>textarea{background:var(--surface);color:var(--ink);border:0;outline:2px solid var(--accent)}
.jcomments,.jss_comments_container{background:var(--surface);color:var(--ink)}