:root{
  --bg:#0e0e13; --panel:#1a1a23; --panel2:#141419; --line:#2b2b38; --line2:#363644;
  --fg:#f2f3f8; --muted:#b0b5c6; --dim:#949ab0; --faint:#7e8397;
  --gold:#d9b96b; --gold-hi:#ecd79c;
  --ok:#84e8a8; --ok-bg:rgba(59,165,93,.22);
  --late:#f5cf80; --late-bg:rgba(224,160,32,.2);
  --abs:#ff9d9d; --abs-bg:rgba(217,79,79,.22);
  --dh:#c2adff; --dh-bg:rgba(122,91,214,.24);
  --serif:'Shippori Mincho B1',"Hiragino Mincho ProN",serif;
  --sans:'Zen Kaku Gothic New',-apple-system,"Hiragino Sans",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:15px;line-height:1.65}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-hi)}
h1{font-family:var(--serif);font-size:26px;font-weight:500;letter-spacing:.03em;margin:0 0 14px}
h2.sub-h{font-size:13px;color:var(--dim);letter-spacing:.14em;margin:22px 0 8px;font-weight:500}

/* ---- 全体レイアウト ---- */
.shell{display:flex;min-height:100vh}
.side{width:212px;flex-shrink:0;border-right:1px solid #1a1a23;padding:24px 18px;
display:flex;flex-direction:column;gap:26px;position:sticky;top:0;height:100vh}
.side .brand{font-family:var(--serif);font-size:20px;letter-spacing:.14em;color:var(--gold)}
.sidenav{display:flex;flex-direction:column;gap:2px}
.sidenav a{padding:10px 12px;border-radius:8px;font-size:14px;color:var(--fg)}
.sidenav a:hover{background:#12121a;color:var(--fg)}
.sidenav a.on{background:rgba(201,167,90,.12);color:var(--gold)}
.sidefoot{margin-top:auto}
.content{flex-grow:1;padding:24px 28px 40px;min-width:0}
.content.plain{max-width:1100px;margin:0 auto}

/* ---- 部品 ---- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:16px}
.narrow{max-width:420px;margin:56px auto}
.center{text-align:center}
label{display:block;margin:10px 0;font-size:13px;color:var(--muted)}
input,select,textarea{width:100%;padding:11px 13px;margin-top:5px;background:var(--panel2);color:var(--fg);
border:1px solid var(--line);border-radius:9px;font-size:16px;font-family:var(--sans)}
button{padding:10px 15px;border-radius:9px;border:1px solid var(--line2);
background:#20202c;color:var(--fg);font-size:14px;font-family:var(--sans);cursor:pointer}
button:hover{border-color:#3a3a48}
button.primary{background:linear-gradient(180deg,#d9b96b,#c9a75a);color:#1a1408;border-color:transparent;font-weight:700}
button.big{width:100%;padding:15px;margin-top:14px;font-size:16px;letter-spacing:.08em}
button.danger{background:#3a1c1c;border-color:#5a2a2a}
button.link{background:none;border:none;color:var(--muted);text-decoration:underline;padding:0}
.alert{background:#3a1c1c;border:1px solid #5a2a2a;padding:11px 14px;border-radius:9px}
.ok-alert{background:rgba(59,165,93,.15);border-color:#2f6b45;color:#8fe0ab}
.muted{color:var(--muted)} .small{font-size:13px} .sub{font-size:12px;color:var(--dim)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.good{color:var(--ok)} .bad{color:var(--abs)}
code{background:var(--panel2);padding:1px 5px;border-radius:4px;font-size:12px}
.qr{width:100%;max-width:320px;border-radius:12px;background:#fff;padding:12px}
.pw{font-family:ui-monospace,monospace;font-size:19px;letter-spacing:.06em;color:var(--gold)}
.daybar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.daybar h1{margin:0}
.chk{display:inline-flex;align-items:center;gap:6px;margin:0;color:var(--fg);font-size:13px}
.chk input{width:auto;margin:0}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:7px 0}
.inline input,.inline select{width:auto;margin:0}
details summary{cursor:pointer;color:var(--gold);font-size:13px}
a.cur{color:var(--fg);font-weight:700;text-decoration:underline}
.addgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:12px}
.addgrid label{margin:0}
.addbtn{grid-column:1/-1}
.posgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.posgrid label{margin:0}
.setgroup{padding:16px 18px}
.setnote{margin:0 0 12px}
.setgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px 18px}
.setitem{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;
padding:6px 0;border-bottom:1px solid #1e1e28}
.setlabel{font-size:13px;color:var(--muted);white-space:nowrap}
.setinput{display:flex;align-items:center;gap:6px}
.setinput input{width:100px;margin:0;padding:7px 10px;font-size:15px;text-align:right}
.setinput .unit{font-size:12px;color:var(--dim);width:18px}
.ranktable{max-width:420px}
.ranktable td,.ranktable th{padding:6px 10px}
.mcols{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start}
@media(max-width:860px){.mcols{grid-template-columns:1fr}}

/* ---- 表 ---- */
.grid{width:100%;border-collapse:collapse;font-size:14px}
.grid th{text-align:left;color:var(--dim);font-size:12px;letter-spacing:.08em;font-weight:500;
padding:9px 10px;border-bottom:1px solid var(--line)}
.grid td{padding:10px;border-bottom:1px solid #1a1a23;vertical-align:top}
.grid tr.late{background:rgba(224,160,32,.05)}
.grid tr.absent{background:rgba(217,79,79,.06)}
table.kv{width:100%;font-size:14px}
table.kv th{text-align:left;color:var(--muted);font-weight:500;padding:5px 10px 5px 0;white-space:nowrap}
table.kv td{padding:5px 0}
.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;margin-right:3px}
.tag.ok{background:var(--ok-bg);color:var(--ok)}
.tag.late{background:var(--late-bg);color:var(--late)}
.tag.abs{background:var(--abs-bg);color:var(--abs)}
.tag.none{background:#282833;color:var(--muted)}
.tag.dh,.tag.ev2{background:var(--dh-bg);color:var(--dh)}
.tag.os,.tag.pl,.tag.off{background:#1c1c26;color:#9aa0bb}

/* ---- カレンダー ---- */
.calhead{display:flex;align-items:baseline;gap:18px}
.calhead .ym{font-family:var(--serif);font-size:32px;letter-spacing:.04em}
.calhead .meta{font-size:13px;color:var(--dim)}
.calbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.viewsw{display:flex;gap:8px}
.viewsw a{height:36px;padding:0 15px;border-radius:9px;border:1px solid var(--line2);
display:flex;align-items:center;font-size:14px;color:var(--muted)}
.viewsw a.on{border-color:var(--gold);background:rgba(201,167,90,.12);color:var(--gold)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.cal-h{text-align:center;font-size:12px;letter-spacing:.1em;color:var(--dim);padding:2px}
.cal-h.sun{color:#e07070}.cal-h.sat{color:#70a0e0}
.cal-c{min-height:132px;background:var(--panel);border:1px solid var(--line);border-radius:10px;
padding:9px 10px;display:flex;flex-direction:column;gap:3px;color:var(--fg);overflow:hidden}
.cal-c.empty{background:none;border:none;min-height:0}
.cal-c.today{border-color:var(--gold)}
.cal-c.closed{background:#0e0e13;border-color:#161620}
.cal-c.closed .d{color:#3d3f4d}
.cal-c.event{border-color:rgba(201,167,90,.55)}
.cal-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:2px}
.cal-top .d{font-family:var(--serif);font-size:20px;color:var(--fg)}
.cal-top .gear{color:#3d3f4d;font-size:13px}
.cal-c:hover .gear{color:var(--gold)}
.cal-sum{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:2px}
.mini{font-size:11px;padding:1px 6px;border-radius:4px;background:#26263250;color:var(--muted)}
.mini.ok{color:var(--ok)}.mini.late,.mini.pen{color:var(--late)}
.mini.abs{color:var(--abs)}.mini.ev{color:var(--dh)}
.who{display:block;font-size:12px;line-height:1.7;padding:0 6px;border-radius:4px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who.late{background:var(--late-bg);color:var(--late)}
.who.abs{background:var(--abs-bg);color:var(--abs)}
.who.leave{background:#1c1c26;color:#9aa0bb}
.who.os{background:rgba(122,91,214,.14);color:#a894e8}
.who.dh{background:var(--dh-bg);color:var(--dh)}
.legend{display:flex;gap:5px;align-items:center}
.legend .who{display:inline-block}
.editday{margin-bottom:16px}
.summary{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.summary .row{display:flex;align-items:baseline;justify-content:space-between}
.summary .row span:first-child{font-size:13px;color:var(--muted)}
.summary .row b{font-family:var(--serif);font-size:18px;font-weight:500}

/* ---- 公休グリッド ---- */
.shiftwrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
table.shift{border-collapse:collapse;font-size:12px}
table.shift th,table.shift td{border:1px solid #1e1e28;padding:0;text-align:center}
table.shift th{color:var(--muted);font-weight:500;padding:4px 2px;min-width:28px}
table.shift th.sun{color:#e07070}table.shift th.sat{color:#70a0e0}
table.shift .wd{font-size:9px}
table.shift .nm{min-width:80px;text-align:left;padding:5px 8px;position:sticky;left:0;
background:var(--panel);white-space:nowrap;z-index:2}
table.shift .cl{background:#101016}
.cell{display:block;margin:0;cursor:pointer}
.cell input{display:none}
.cell span{display:block;width:100%;height:28px;line-height:28px}
.cell input:checked + span{background:rgba(201,167,90,.28)}
.cell input:checked + span::after{content:'休';color:var(--gold);font-size:11px}
.closedmark{display:block;height:28px;line-height:28px;color:#33353f;font-size:11px}

/* ---- QRカード ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.qcard{background:#fff;border-radius:10px;padding:12px;text-align:center;color:#111}
.qcard img{width:100%;display:block}
.qname{font-size:17px;font-weight:700;margin-bottom:6px}
.qstore{font-size:10px;color:#666;letter-spacing:.1em}
.qcard .dl{display:block;font-size:11px;margin-top:6px}
@media print{.side,.noprint{display:none}body{background:#fff}
.cards{grid-template-columns:repeat(3,1fr)}.qcard{break-inside:avoid;border:1px solid #ddd}}

@media(max-width:900px){
  .shell{flex-direction:column}
  .side{width:auto;height:auto;position:static;flex-direction:row;align-items:center;
  gap:14px;padding:12px 16px;border-right:none;border-bottom:1px solid #1a1a23;overflow-x:auto}
  .sidenav{flex-direction:row}
  .content{padding:16px}
  .cal-c{min-height:92px}
}
.mx{display:block;width:100%;height:26px;line-height:26px;font-size:10px;border-radius:3px}
.mx.ok{background:#1d2a22}
.mx.none{background:transparent}
.mx.late{background:rgba(224,160,32,.32);color:#f5d79a}
.mx.abs{background:rgba(217,79,79,.4);color:#ffc4c4}
.mx.leave{background:#1c1c26;color:#7c8098}
.mx.dh{background:rgba(122,91,214,.32);color:#cbbcff}
.mx.closed{background:#16161c;color:#4a4d5c}
.mx-table td{padding:1px}
.legend .mx{display:inline-block;width:13px;height:13px;margin:0 4px 0 10px;vertical-align:-2px}
.late-t{color:var(--late)}
.daylist td{padding:6px 10px;vertical-align:middle}
.daylist .dcell{white-space:nowrap;font-size:15px}
.daylist .dcell .wd{font-size:12px;color:var(--dim);margin-right:6px}
.daylist .dcell.sun b,.daylist .dcell.sun .wd{color:#e07070}
.daylist .dcell.sat b,.daylist .dcell.sat .wd{color:#70a0e0}
.daylist tr.closedrow{background:rgba(255,255,255,.02)}
.daylist tr.closedrow .dcell b{color:var(--dim)}
.cal-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:2px;color:var(--muted)}
.mx.os{background:rgba(122,91,214,.14);color:#a894e8}
a.mx{cursor:pointer;text-decoration:none}
a.mx:hover{outline:1px solid var(--gold);outline-offset:-1px}
table.shift td.sel{outline:2px solid var(--gold);outline-offset:-2px}
table.shift th.ev{color:var(--dh)}
.cellform{margin-bottom:16px}
.cellhead{display:flex;align-items:baseline;gap:14px;margin-bottom:10px}
.cellname{font-family:var(--serif);font-size:24px}
.cellhead .closelink{margin-left:auto;font-size:13px}
.sep{width:1px;height:24px;background:var(--line2);margin:0 4px}
.salesgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.salesbox{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.salesbox label{margin:0;flex-grow:1}
.salesbox .saleshint{font-size:11px;color:var(--dim);flex-basis:100%}
.foldable{border:1px solid var(--line);border-radius:12px;padding:12px 16px;background:var(--panel)}
.foldable summary{font-size:14px;padding:2px 0}
.foldable[open] summary{margin-bottom:10px;border-bottom:1px solid var(--line);padding-bottom:10px}
.big-chk{align-items:flex-start;gap:8px;padding:8px 12px;border:1px solid var(--line2);
border-radius:10px;line-height:1.4}
.big-chk:has(input:checked){border-color:var(--gold);background:rgba(201,167,90,.1);color:var(--gold)}
.chk-note{display:block;font-size:12px;color:var(--muted);font-weight:400}
button.mx{border:none;padding:0;font-family:var(--sans);cursor:pointer;transition:none}
button.mx:hover:not(:disabled){outline:1px solid var(--gold);outline-offset:-1px}
button.mx:disabled{cursor:default}
button.mx.pending{opacity:.45}
table.shift th a{color:inherit}
table.shift th a:hover{color:var(--gold)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;
background:#1c1c26;border:1px solid var(--line2);border-radius:999px;
padding:10px 20px;font-size:13px;color:var(--fg);box-shadow:0 8px 30px rgba(0,0,0,.5)}
.cal-c.wide{min-height:420px}
.cal-top .wd2{font-size:12px;color:var(--dim)}
.pcode{font-family:ui-monospace,monospace;font-size:16px;letter-spacing:.14em;color:var(--gold)}
.pcode.big{font-size:30px;text-align:center;margin:6px 0 10px}
.qcode{font-family:ui-monospace,monospace;font-size:15px;letter-spacing:.16em;color:#333;margin-top:6px}
.paircode{font-family:ui-monospace,monospace;font-size:38px;letter-spacing:.16em;
color:var(--gold);background:var(--panel2);border:1px solid var(--line2);
border-radius:12px;padding:14px 18px;text-align:center;margin:0 0 10px}
.setitem.wide{grid-column:1/-1}
.setitem.wide .setinput input{width:340px;text-align:left}
.logval{font-family:ui-monospace,monospace;font-size:12px;max-width:260px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logval.gold{color:var(--gold)}
.effectbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.effectbar .setitem{border:none;padding:0}
.sub.gold{color:var(--gold)}
.pinmask{font-family:ui-monospace,monospace;font-size:22px;letter-spacing:.3em;color:var(--gold)}
.ranktable input{margin:0;padding:7px 10px;font-size:15px}
.ranktable .rmax{width:130px;text-align:right}
.ranktable .rtime{width:90px;text-align:center}
.ranktable{max-width:520px}
.timesel{display:inline-flex;align-items:center;gap:2px}
.timesel select{width:auto;margin:0;padding:7px 6px;font-size:15px;text-align:center}
.timesel .colon{color:var(--dim)}
.setinput select{width:auto;margin:0;padding:7px 10px;font-size:15px}