/* 配色とレイアウトは cockpit-cn の app.html に合わせる。浅色のみ。 */
:root{--bg:#f7f7fa;--card:#fff;--card2:#f7f7fa;--fg:#19182a;--muted:#77758b;--line:#e9e8ef;--brand:#5c55e7;--brand-dark:#4038c8;--brand-soft:#efeffd;--mint:#2cb994;--ok:#e5f6f0;--ok-fg:#17805f;--warn:#fdf3e1;--warn-fg:#8f5a00;--bad:#fdeced;--bad-fg:#c23744;--hero1:#222031;--hero2:#342c72;--shadow:0 6px 18px rgba(45,40,72,.035)}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.7 Inter,-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","PingFang SC","Noto Sans JP","Microsoft YaHei",system-ui,sans-serif}
a{color:var(--brand)}
h1,h2,h3{line-height:1.35}
small,.hint{color:var(--muted);font-size:13px}
.hint{margin:2px 0 14px}
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:0 0 12px}
label input:not([type=checkbox]),label select,label textarea{display:block;width:100%;margin-top:5px;font-weight:400}
input,select,textarea{background:#fff;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:9px 11px;font:inherit;font-size:14px;min-width:0;max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
textarea{width:100%;font-variant-numeric:tabular-nums}
input[type=file]{padding:6px;background:var(--card2);flex:1 1 14rem}
input[type=file]::file-selector-button{font:inherit;font-size:13px;border:1px solid var(--line);background:#fff;color:#545267;border-radius:8px;padding:5px 12px;margin-right:10px;cursor:pointer}
button,.btn{display:inline-block;background:var(--brand);color:#fff;border:0;border-radius:10px;padding:9px 18px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 7px 16px rgba(92,85,231,.22);text-decoration:none;transition:.2s}
button:hover,.btn:hover{background:var(--brand-dark)}
button:disabled{opacity:.5;cursor:not-allowed}
button.ghost,.btn.ghost{background:#fff;color:#545267;border:1px solid var(--line);font-weight:500;box-shadow:none}
button.ghost:hover,.btn.ghost:hover{background:var(--brand-soft);color:var(--brand)}
button.small{padding:4px 11px;font-size:13px}
button.danger{background:#fff;color:var(--bad-fg);border:1px solid #f3c9cd;box-shadow:none;font-weight:500}
button.danger:hover{background:var(--bad)}
.check{display:flex;gap:8px;align-items:flex-start;font-weight:500;color:var(--fg);margin:10px 0}
.check input{margin-top:5px;flex:none}
.lang{display:flex;gap:10px;font-size:12px}
.lang a{color:inherit;text-decoration:none;opacity:.7}
.lang a:hover{opacity:1;text-decoration:underline}
.lang a[aria-current]{opacity:1;font-weight:700}
#msg{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;width:max-content;max-width:min(560px,calc(100vw - 32px));background:#1e1d2b;color:#fff;border-radius:11px;padding:9px 16px;font-size:14px;white-space:pre-wrap;box-shadow:0 12px 32px rgba(25,24,42,.28);cursor:pointer}
#msg:empty{display:none}
.warnbar{background:var(--warn);color:var(--warn-fg);padding:8px 14px;border-radius:8px;font-size:13px;margin:14px 0 0}
.warnbar:empty{display:none}

/* ログイン前 */
.login-top{display:flex;align-items:center;gap:14px;background:#0c1117;color:#fff;border-bottom:1px solid rgba(255,255,255,.08);padding:15px clamp(20px,5vw,72px)}
.login-top b{font-size:18px}
.login-top .sp{flex:1}
.login-top .lang,.login-top>a{color:#a5adb8;font-size:13px}
.login-shell{min-height:calc(100vh - 60px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);background:radial-gradient(circle at 13% 20%,rgba(44,185,148,.14),transparent 31%),linear-gradient(135deg,#0c1117,#151c26)}
.login-story{color:#fff;padding:clamp(40px,6vh,72px) clamp(32px,7vw,110px);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.login-story::after{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(91,221,188,.12);border-radius:50%;right:-210px;bottom:-210px;box-shadow:0 0 0 70px rgba(91,221,188,.025),0 0 0 140px rgba(91,221,188,.018)}
.login-kicker{color:#59dbb9;font-size:13px;letter-spacing:.12em;margin:0 0 15px;font-weight:700}
.login-story h1{font-size:clamp(34px,3.8vw,56px);line-height:1.15;letter-spacing:-.03em;max-width:700px;margin:0 0 18px}
.login-story>p{color:#aeb8c5;font-size:16px;max-width:650px;margin:0}
.login-proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:30px;max-width:680px}
.login-proof div{border:1px solid rgba(255,255,255,.1);border-radius:13px;padding:13px 15px;background:rgba(255,255,255,.035)}
.login-proof b{display:block;font-size:14px;margin-bottom:2px}
.login-proof span{display:block;color:#8f9aa8;font-size:12px}
.login-story>p.login-notice{color:#8f9aa8;font-size:12px;margin-top:16px}
.login-story>p.warnbar{color:var(--warn-fg);font-size:13px;max-width:680px;margin-top:14px}
.login-story>p.warnbar:empty{display:none}
.login-panel{display:flex;align-items:center;justify-content:center;padding:42px clamp(20px,5vw,72px);background:rgba(247,247,250,.97)}
.login-card{width:min(460px,100%);background:#fff;border:1px solid #e4e3ea;border-radius:22px;padding:32px;box-shadow:0 28px 90px rgba(0,0,0,.22)}
.login-card h2{font-size:24px;margin:14px 0 14px}
.login-card button{width:100%;padding:11px;margin-top:4px}
.login-card input:not([type=checkbox]){font-size:16px;padding:11px 13px}
.loginmark{width:48px;height:48px;border-radius:15px;background:linear-gradient(145deg,#38d3ad,#14856d);color:#071510;display:grid;place-items:center;font-size:23px;font-weight:900}
.loginfoot{text-align:center;margin:16px 0 0;font-size:13px;color:var(--muted)}
.loginfoot a{margin:0 6px}

/* ログイン後 */
.side{width:248px;background:#fff;border-right:1px solid var(--line);padding:26px 18px 18px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:20;overflow-y:auto}
.brand{display:flex;align-items:center;gap:12px;padding:0 8px 24px}
.mark{flex:0 0 37px;height:37px;border-radius:12px;background:linear-gradient(145deg,#6f67ef,#453dcc);color:#fff;display:grid;place-items:center;font-weight:900;font-size:19px;box-shadow:0 8px 18px rgba(92,85,231,.28)}
.brand b{display:block;font-size:15px;line-height:1.3}
.brand span{display:block;font-size:11px;color:#8e8c9b}
.mnav{display:grid;gap:4px}
.mnav button{display:flex;align-items:center;gap:12px;background:transparent;color:#6f6d7f;font-weight:500;padding:10px 13px;border-radius:11px;text-align:left;width:100%;box-shadow:none}
.mnav button:hover{background:#f7f6fd;color:var(--brand)}
.mnav button.on{background:#efeffd;color:var(--brand);font-weight:700}
.mnav .ic{width:20px;text-align:center;font-size:17px;line-height:1.2}
.mnav .nm{flex:1;min-width:0}
.mnav .bd{font-size:11px;min-width:20px;padding:0 7px;border-radius:9px;background:var(--brand);color:#fff;text-align:center;font-weight:600}
.mnav .bd:empty{display:none}
.coswitch{margin-top:auto;background:#f7f7fa;padding:10px;border-radius:12px;display:flex;align-items:center;gap:9px}
.ava{flex:0 0 32px;height:32px;border-radius:9px;background:#1e1d2b;color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.coswitch div:last-child{min-width:0}
.coswitch b{display:block;font-size:12px;line-height:1.35;overflow-wrap:anywhere}
.coswitch small{display:block;font-size:10px;line-height:1.4;overflow-wrap:anywhere}
.wide-main{margin-left:248px;padding:0 32px 48px;min-width:0}
.wide-main>*{max-width:1080px;margin-left:auto;margin-right:auto}
.topbar{min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 0}
.crumb{font-size:12px;color:#8b899a;margin-bottom:4px;letter-spacing:.04em}
.topbar h1{margin:0;font-size:25px;letter-spacing:-.02em}
.tacts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted)}
.hero{background:linear-gradient(115deg,var(--hero1) 0%,#292542 62%,var(--hero2) 100%);color:#fff;border-radius:22px;padding:31px 34px;margin-bottom:18px;box-shadow:0 18px 40px rgba(45,40,72,.16)}
.hero .st{font-size:13px;opacity:.85;overflow-wrap:anywhere}
.hero .st i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#4ade80;margin-right:6px;box-shadow:0 0 0 4px rgba(74,222,128,.18)}
.hero h2{font-size:26px;margin:8px 0 6px}
.hero p{margin:0 0 16px;opacity:.8;font-size:14px}
.hero button{background:#6f67ef}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow);min-width:0}
.kpi .l{color:var(--muted);font-size:12px}
.kpi .v{font-size:26px;font-weight:700;margin-top:6px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;overflow-wrap:anywhere}
.kpi .v.sm{font-size:14px;letter-spacing:0;line-height:1.5;margin-top:10px}
.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:21px 23px;margin-bottom:18px;box-shadow:var(--shadow)}
.panel h2{font-size:17px;margin:0 0 4px}
.panel h3{font-size:14px;margin:18px 0 6px}
.panel>:last-child{margin-bottom:0}
.upload{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.narrow{max-width:26rem}
.dates{margin-top:10px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.dates label{margin:0;flex:0 1 11rem}
.flow{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:10px}
.flow li{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer}
.flow li:hover{border-color:var(--brand)}
.flow .n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#f0eff4;color:var(--muted);font-weight:700;flex:none}
.flow li.done .n{background:var(--ok);color:var(--ok-fg)}
.flow li.cur{border-color:var(--brand)}
.flow li.cur .n{background:var(--brand);color:#fff}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row>span{flex:1 1 12rem;overflow-wrap:anywhere;font-size:14px}
.cand{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) auto auto;gap:10px;align-items:end;padding:12px 0;border-bottom:1px solid var(--line)}
.cand:last-child{border-bottom:0}
.cand label{margin:0;font-size:12px}
.cand input{padding:7px 8px;font-size:13px}
.status{white-space:pre-wrap;border-radius:10px;padding:10px 14px;font-size:14px;margin:14px 0 0}
.status:empty{display:none}
.status.PASS{background:var(--ok);color:var(--ok-fg)}
.status.NEEDS_REVIEW{background:var(--warn);color:var(--warn-fg)}
.status.BLOCKED{background:var(--bad);color:var(--bad-fg)}
.downloads{display:flex;gap:10px;margin-top:12px}
.pill{display:inline-block;font-size:12px;border-radius:999px;padding:1px 10px;white-space:nowrap;background:#f0eff4;color:var(--muted)}
.pill.active{background:var(--ok);color:var(--ok-fg)}
.pill.suspended{background:var(--warn);color:var(--warn-fg)}
.pill.closed{background:var(--bad);color:var(--bad-fg)}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{border-bottom:1px solid var(--line);padding:8px;text-align:left;white-space:nowrap}
th{color:var(--muted);font-weight:500}
td button+button{margin-left:6px}
.n{text-align:right;font-variant-numeric:tabular-nums}
.filters{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 12px;align-items:end;margin-top:10px}
.filters label{margin:0}
.filters .wide{grid-column:span 2}
.filters .acts{display:flex;gap:8px;grid-column:span 2}
.filters .acts button{white-space:nowrap}
@media(max-width:1050px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cand{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .login-shell{grid-template-columns:1fr}
  .login-story{padding:40px 24px}
  .login-panel{padding:32px 16px 48px;order:-1}
  /* サイドバーを画面下のタブにする */
  .side{inset:auto 0 0 0;width:auto;padding:5px 6px calc(5px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--line);overflow:visible}
  .side .brand,.side .coswitch{display:none}
  .mnav{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .mnav button{flex-direction:column;gap:0;padding:5px 1px;font-size:10px;text-align:center;position:relative;line-height:1.3}
  .mnav .nm{overflow-wrap:anywhere}
  .mnav .bd{position:absolute;top:0;right:4px}
  .wide-main{margin-left:0;padding:0 16px 96px}
  .topbar{min-height:0;padding:14px 0}
  .topbar h1{font-size:21px}
  .hero{padding:22px}
  .hero h2{font-size:21px}
  .panel{padding:16px}
}
@media(max-width:520px){
  .login-proof{grid-template-columns:minmax(0,1fr)}
  .login-card{padding:22px}
  .cand{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filters .wide,.filters .acts{grid-column:auto}
}

.report-view:not(:empty){margin-top:18px}
.report-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.report-tabs button.on{background:var(--brand-soft);color:var(--brand);border-color:var(--brand)}
.report-body{overflow-x:auto}
.report-body .num{text-align:right;font-variant-numeric:tabular-nums}
.report-total td{font-weight:700;background:var(--card2)}

.cash-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 12px;align-items:end}
.cash-form label{margin:0}
.cash-form input,.cash-form select{width:100%}
.cash-actions{display:flex;gap:8px}
.cash-open td{background:var(--warn)}
#cash-table .n,#d-cash .n{text-align:right}
#d-cash input,#d-cash select{min-width:110px}
.tips{margin-top:14px}
.tips summary{cursor:pointer;font-weight:600}
.tips ul{margin:8px 0;padding-left:20px}
.quick-dir{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quick-dir button{min-height:72px;font-size:20px;border-radius:16px}
.quick-dir .quick-in{background:var(--mint)}
.quick-dir button.on{outline:3px solid var(--fg);outline-offset:2px}
#quick-body{margin-top:18px}
#quick-amount{font-size:24px;width:100%}
.quick-what{font-weight:600;margin:14px 0 8px}
.quick-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:10px}
.quick-cat{min-height:56px;font-size:15px}
.quick-more{margin-top:8px;color:var(--muted);font-size:14px}
.quick-more summary{cursor:pointer}
.home-more{margin-top:6px}
.sales{display:flex;gap:10px;align-items:flex-end;margin-bottom:14px}
.sales label{flex:1;margin:0}
.sales input{width:100%;flex:1}
.q-card+.q-card{margin-top:18px;border-top:1px solid var(--line);padding-top:18px}
.q-text{font-size:17px;font-weight:600;margin:6px 0}
#quick-undo{width:100%;margin-top:10px}