:root{
  --pink:#e9608a; --pink-d:#c64a72; --pink-l:#fce7ee;
  --ink:#2b2530; --sub:#8a8190; --line:#efe8ee; --bg:#f6f2f5;
  --ok:#3aa676; --gold:#e0a23a; --mut:#b9b0bf;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; font-size:14px;}
a{color:inherit;}
.muted{color:var(--mut);}
.num{font-variant-numeric:tabular-nums;}

/* ===== ログイン ===== */
body.login{display:grid; place-items:center; min-height:100vh;}
.loginbox{width:320px; max-width:90vw; background:#fff; padding:28px 24px; border-radius:20px;
  box-shadow:0 8px 30px rgba(43,37,48,.08); text-align:center;}
.loginbox .logo{font-size:22px; font-weight:800; color:var(--pink-d); line-height:1.4; margin-bottom:18px;}
.loginbox .fld{width:100%; font-size:16px; padding:12px 14px; margin-bottom:12px; border:1px solid var(--line); border-radius:12px;}
.loginbox .fld:focus{outline:none; border-color:var(--pink);}
.btn-primary{width:100%; border:none; background:var(--pink); color:#fff; font:inherit; font-weight:800;
  font-size:16px; padding:13px; border-radius:12px; cursor:pointer;}
.err{background:#fdecef; color:#b3304f; padding:10px 12px; border-radius:10px; font-size:13px; margin:0 0 14px;}
.flash{background:#eafaf2; color:#1f7a52; padding:10px 12px; border-radius:10px; font-size:13px; margin:0 0 14px;}

/* ===== スタッフ（スマホ） ===== */
.phone{max-width:390px; margin:0 auto; min-height:100vh; background:var(--bg);
  display:flex; flex-direction:column; position:relative; padding-bottom:64px;}
.phone header{position:sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:12px; padding:16px 18px 14px;}
.sh-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.store{font-size:15px; color:var(--ink); font-weight:800; letter-spacing:.2px; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.acct{display:flex; gap:8px; flex:0 0 auto;}
.iconbtn{width:36px; height:36px; border-radius:50%; display:inline-grid; place-items:center;
  background:var(--bg); border:1px solid var(--line); color:var(--sub); text-decoration:none; font-size:15px;}
.iconbtn:active{background:var(--line);}
.sh-bottom{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.month{display:flex; align-items:center; gap:12px; font-weight:700; font-size:16px;}
.navbtn{border:none; background:var(--pink-l); color:var(--pink-d); width:32px; height:32px;
  border-radius:50%; font-size:16px; cursor:pointer; text-decoration:none; display:inline-grid; place-items:center;}
.user{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--sub); flex:0 0 auto;}
.user .uname{font-weight:700; color:var(--ink);}
.phone main{padding:16px; display:flex; flex-direction:column; gap:14px;}

.herocard{background:linear-gradient(135deg,var(--pink),var(--pink-d)); color:#fff;
  border-radius:20px; padding:22px 20px; box-shadow:0 8px 22px rgba(201,74,114,.28); position:relative; overflow:hidden;}
.herocard .label{font-size:13px; opacity:.9;}
.herocard .amount{font-size:46px; font-weight:800; letter-spacing:-1px; line-height:1.1; margin-top:2px;}
.herocard .cap{display:inline-block; margin-top:8px; font-size:12px; background:rgba(255,255,255,.22);
  padding:4px 10px; border-radius:999px;}

.card{background:#fff; border-radius:16px; padding:16px; box-shadow:0 2px 10px rgba(43,37,48,.04);}
.card .label{font-size:12px; color:var(--sub);}
.rewardcard{border:1px solid var(--pink-l);}
.metrics{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px;}
.metrics-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:560px){ .metrics-3{grid-template-columns:1fr;} }
.periods{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px;}
.period{background:#faf6f9; border-radius:12px; padding:12px 13px;}
.period .p-label{font-size:11px; color:var(--sub);}
.period .p-val{font-size:19px; font-weight:800; color:var(--ink); margin-top:3px; font-variant-numeric:tabular-nums;}
.period .p-val small{font-size:11px; font-weight:600; color:var(--sub); margin-left:4px;}
.period .p-sub{font-size:11px; color:var(--sub); margin-top:2px;}
@media (max-width:400px){ .periods{grid-template-columns:1fr;} }
.cmp{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); font-size:13px;}
.cmp-label{color:var(--sub);}
.cmp-val{font-weight:800; font-size:16px;}
.cmp-val.up{color:var(--ok);}
.cmp-val.down{color:#c0392b;}
.cmp-sub{color:var(--sub); font-size:12px;}
.cmp-up{color:var(--ok); font-weight:700;}
.cmp-down{color:#c0392b; font-weight:700;}
tbody tr.rowlink{cursor:pointer;}
tbody tr.rowlink:hover{background:#fdeff6;}
.rowlink-hint{color:var(--mut); font-weight:700; margin-left:4px;}
.metric{background:#faf6f9; border-radius:12px; padding:12px 13px;}
.metric .mlabel{font-size:11px; color:var(--sub);}
.metric .mval{font-size:21px; font-weight:800; color:var(--ink); margin-top:3px; line-height:1.1;}
.metric .msub{font-size:11px; color:var(--sub); margin-top:2px;}
.rewardcard .rewardamt{font-size:40px; font-weight:800; color:var(--pink-d); margin:2px 0 8px; letter-spacing:-1px; line-height:1.05;}
.fld2-2{display:flex; gap:10px;}
.fld2-2 > div:first-child{flex:2;}
.fld2-2 > div:last-child{flex:1;}
.sales .main{font-size:28px; font-weight:800; margin-top:2px;}
.sales .sub{font-size:12px; color:var(--sub); margin-top:2px;}

.next .row{display:flex; justify-content:space-between; align-items:baseline;}
.bar{height:12px; border-radius:999px; background:var(--line); margin:10px 0 8px; overflow:hidden;}
.bar > span{display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--pink),var(--gold)); transition:width .4s;}
.next .hint{font-size:14px; font-weight:700; color:var(--pink-d);}
.next .hint small{font-weight:500; color:var(--sub); font-size:12px;}
.next.cap .hint{color:var(--gold);}

.inputbtn{display:none; width:100%; border:none; background:var(--pink); color:#fff; font:inherit;
  font-weight:800; font-size:16px; padding:15px; border-radius:16px; cursor:pointer;
  box-shadow:0 6px 16px rgba(201,74,114,.25);}
body.caninput .inputbtn{display:block;}

details{background:#fff; border-radius:16px; box-shadow:0 2px 10px rgba(43,37,48,.04); overflow:hidden;}
summary{list-style:none; cursor:pointer; padding:14px 16px; font-weight:700; font-size:14px;
  display:flex; justify-content:space-between; align-items:center;}
summary::-webkit-details-marker{display:none;}
.chev{color:var(--sub); transition:transform .2s;}
details[open] summary .chev{transform:rotate(180deg);}
.tbl{padding:0 16px 12px;}
.tbl .r{display:flex; justify-content:space-between; align-items:center; padding:9px 0;
  border-top:1px solid var(--line); font-size:14px; text-decoration:none; color:inherit;}
.tbl .r:first-child{border-top:none;}
.tbl .r.cur{color:var(--pink-d); font-weight:700;}
.tbl .r .tag{font-size:11px; background:var(--pink-l); color:var(--pink-d); padding:2px 8px; border-radius:999px;}
.tbl .r .amt{font-variant-numeric:tabular-nums;}
.tbl .r .reward{color:var(--pink-d); font-weight:700; margin-left:12px;}
.rowright{display:flex; align-items:center; gap:8px;}
.histrow .chev{font-size:18px;}
.edit{border:none; background:var(--pink-l); color:var(--pink-d); border-radius:8px;
  padding:4px 10px; font:inherit; font-size:12px; font-weight:700; cursor:pointer;}

/* スタッフ：今月の明細（日別アコーディオン） */
.daylist{display:flex; flex-direction:column; gap:8px;}
.daylist-head{font-size:12px; color:var(--sub); font-weight:700; margin:2px 2px 0;}
.dacc{background:#fff; border-radius:14px; box-shadow:0 2px 10px rgba(43,37,48,.04); overflow:hidden;}
.dacc-sum{list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:13px 16px;}
.dacc-sum::-webkit-details-marker{display:none;}
.dacc-date{font-weight:700; font-size:15px;}
.dacc-date small{color:var(--sub); font-weight:500; font-size:12px;}
.dacc-total{margin-left:auto; font-weight:800; color:var(--pink-d); font-variant-numeric:tabular-nums;}
.dacc-sum .chev{transition:transform .2s;}
.dacc[open] .dacc-sum .chev{transform:rotate(180deg);}
.dacc-body{padding:2px 16px 14px;}
.drow{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-top:1px solid var(--line); font-size:14px;}
.drow > span:first-child{color:var(--sub);}
.drow small{color:var(--sub);}
.drow-act{margin-top:10px; text-align:right;}
.drow-act .edit{padding:8px 14px; font-size:13px;}

.tabs{position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:390px;
  background:#fff; border-top:1px solid var(--line); display:flex;}
.tabs a{flex:1; text-align:center; padding:10px 0 14px; font-size:11px; color:var(--sub); text-decoration:none;}
.tabs a.on{color:var(--pink-d); font-weight:700;}
.tabs a div{font-size:20px;}

/* 入力シート */
.ovl{position:fixed; inset:0; background:rgba(43,37,48,.45); display:none; z-index:50; align-items:flex-end;}
.ovl.show{display:flex;}
.sheet{background:#fff; width:100%; max-width:390px; margin:0 auto; border-radius:20px 20px 0 0; padding:20px 18px 26px;}
.sheet h3{margin:0 0 16px; font-size:17px;}
.fld2{margin-bottom:14px;}
.fld2 label{display:block; font-size:12px; color:var(--sub); margin-bottom:6px;}
.fld2 select,.fld2 input{width:100%; font:inherit; font-size:16px; padding:11px 12px; border:1px solid var(--line); border-radius:10px;}
.fld2 select:focus,.fld2 input:focus{outline:none; border-color:var(--pink);}
.sheet .acts{display:flex; gap:10px; margin-top:6px;}
.sheet .acts button{flex:1; border:none; border-radius:12px; padding:14px; font:inherit; font-weight:800; cursor:pointer;}
.b-save{background:var(--pink); color:#fff;}
.b-cancel{background:#f0eaf0; color:var(--ink);}
.b-del{background:#fff; color:#c0392b; border:1px solid #f0d5d0; flex:0 0 auto; padding:14px 16px;}

/* ===== 管理者（PC/タブレット） ===== */
body.admin{padding-bottom:40px;}
.top{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10;}
.top .inner{max-width:980px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between;}
.brand{font-weight:800; font-size:16px; display:flex; align-items:center; gap:10px;}
.brand .store{font-size:12px; font-weight:700; color:#fff; background:var(--pink); padding:3px 10px; border-radius:999px;}
.brand .storeswitch{font:inherit; font-size:13px; font-weight:700; color:var(--pink-d); background:var(--pink-l); border:1px solid var(--line); border-radius:999px; padding:4px 10px; cursor:pointer;}
.me{font-size:13px; color:var(--sub);}
nav.adtabs{display:flex; gap:4px; max-width:980px; margin:0 auto; padding:0 16px; overflow-x:auto;}
nav.adtabs a{flex:0 0 auto; padding:12px 16px; font-weight:700; color:var(--sub); text-decoration:none; border-bottom:3px solid transparent;}
nav.adtabs a.on{color:var(--pink-d); border-bottom-color:var(--pink);}
.wrap{max-width:980px; margin:0 auto; padding:18px 16px 40px;}
.pagehead{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:10px;}
h2{font-size:18px; margin:0;}
.actions{display:flex; gap:8px;}
.btn{border:none; border-radius:10px; padding:9px 16px; font:inherit; font-weight:700; cursor:pointer; text-decoration:none; display:inline-block;}
.btn.primary{background:var(--pink); color:#fff;}
.btn.ghost{background:#fff; color:var(--pink-d); border:1px solid var(--line);}

table{width:100%; border-collapse:collapse;}
th,td{padding:12px 14px; text-align:right; white-space:nowrap;}
th:first-child,td:first-child{text-align:left;}
thead th{background:#faf6f9; color:var(--sub); font-size:12px; border-bottom:1px solid var(--line);}
tbody tr{border-bottom:1px solid var(--line);}
tbody tr:hover{background:#fdf7fa;}
tfoot td{font-weight:800; background:#faf6f9; border-top:2px solid var(--line);}
td.reward{font-weight:800; color:var(--pink-d);}
.gap{color:var(--gold); font-weight:700;}
.gap.done{color:var(--ok);}

.hintline{color:var(--sub); font-size:12px; margin:10px 2px;}
.datepick{font:inherit; font-weight:700; padding:7px 12px; border:1px solid var(--pink-l); border-radius:999px;
  color:var(--pink-d); background:#fff; cursor:pointer; accent-color:var(--pink); line-height:1.2;}
.datepick:focus{outline:none; border-color:var(--pink); box-shadow:0 0 0 3px var(--pink-l);}
.datepick::-webkit-calendar-picker-indicator{cursor:pointer; opacity:.7;}
.month .wd{font-weight:700; color:var(--sub);}
.moneycell input{width:130px; text-align:right; font:inherit; border:1px solid var(--line); border-radius:8px; padding:7px 10px;}
.moneycell input.cntcell{width:80px;}
.moneycell input:focus{outline:none; border-color:var(--pink); background:#fffafc;}
.saved{color:var(--ok); font-weight:700; margin-left:10px;}
.note{font-size:12px; color:var(--sub); margin-top:14px;}

/* 月締め確定バー */
.confirmbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 14px; border-radius:12px;
  background:#fff; border:1px solid var(--line); margin-bottom:14px;}
.confirmbar.is-confirmed{background:#eafaf2; border-color:#bfe8d2;}
.cbadge{font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; background:#f0eaf0; color:var(--sub); flex:0 0 auto;}
.cbadge.ok{background:var(--ok); color:#fff;}
.cnote{font-size:12.5px; color:var(--sub);}
.confirmbar form{display:flex; gap:8px;}

/* スタッフ管理 */
.addbox summary{color:var(--pink-d);}
.addform{display:flex; gap:8px; flex-wrap:wrap; padding:0 16px 16px;}
.addform input,.addform select{font:inherit; padding:9px 11px; border:1px solid var(--line); border-radius:8px;}
.addform input{flex:1; min-width:140px;}
.stafflist{display:flex; flex-direction:column; gap:12px;}
.staffcard{background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:0 2px 10px rgba(43,37,48,.04);}
.staffcard.is-left{background:#faf7fa;}
.sc-head{display:flex; align-items:center; gap:10px; margin-bottom:12px; padding-bottom:12px; border-bottom:1px dashed var(--line);}
.nameinput{font:inherit; font-size:16px; font-weight:700; padding:7px 10px; border:1px solid var(--line); border-radius:8px; width:160px;}
.sc-id{color:var(--sub); font-size:12px;}
.sc-fields{display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end;}
.fgrp{display:flex; flex-direction:column; gap:4px;}
.fgrp > span{font-size:11px; color:var(--sub);}
.fgrp select,.fgrp input[type=number]{font:inherit; padding:7px 8px; border:1px solid var(--line); border-radius:8px;}
.fgrp input[type=number]{width:64px; text-align:right;}
.sc-actions{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;}

/* 設定 */
.setrow{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px; border-bottom:1px solid var(--line);}
.setinfo b{font-size:15px;}
.setinfo p{margin:4px 0 0; color:var(--sub); font-size:12.5px; max-width:560px; line-height:1.5;}
.switch{position:relative; display:inline-block; width:52px; height:30px; flex:0 0 auto;}
.switch input{opacity:0; width:0; height:0;}
.switch .slider{position:absolute; inset:0; background:var(--mut); border-radius:999px; transition:.2s; cursor:pointer;}
.switch .slider::before{content:""; position:absolute; width:24px; height:24px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s;}
.switch input:checked + .slider{background:var(--pink);}
.switch input:checked + .slider::before{transform:translateX(22px);}

/* ===== 報酬形態（共通） ===== */
.badge-type{display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; white-space:nowrap;}
.type-fixed{background:#fce7ee; color:#c64a72;}
.type-commission{background:#e7f0fc; color:#2f6ad0;}
.type-hourly{background:#eef2e7; color:#5a7a2f;}

/* 売上 指名/フリー 内訳（スタッフ） */
.splitrow{display:flex; gap:8px; margin-top:14px;}
.splitcell{flex:1; background:rgba(255,255,255,.95); border-radius:10px; padding:8px 10px; min-width:0;}
.splitcell span{display:block; font-size:11px; color:var(--sub);}
.splitcell b{font-size:15px; color:var(--ink);}
.detsub{color:var(--sub); font-weight:400; font-size:11px;}

/* スタッフ管理：歩合入力 */
.ratewrap{font-size:12px; color:var(--sub); display:inline-flex; align-items:center; gap:4px; white-space:nowrap;}
.ratewrap input{width:54px; text-align:right; font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:8px;}
.prodwrap{font-size:12px; color:var(--sub); display:inline-flex; align-items:center; gap:5px; white-space:nowrap;}
.prodwrap input[type=number]{width:54px; text-align:right; font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:8px;}

/* 退店バッジ・削除ボタン */
.tag-left{font-size:11px; font-weight:700; background:#f0eaf0; color:var(--sub); padding:2px 7px; border-radius:999px;}
.btn.danger{background:#fff; color:#c0392b; border:1px solid #f0d5d0;}
.btn.danger:active{background:#fdecef;}

/* ===== レスポンシブ（管理画面・スマホ/タブレット） ===== */
@media (max-width: 640px) {
  .top .inner{flex-wrap:wrap; gap:6px; padding:10px 12px;}
  .brand{font-size:15px;}
  .me{font-size:12px;}
  nav.adtabs{padding:0 8px;}
  nav.adtabs a{padding:11px 12px;}
  .wrap{padding:14px 10px 40px;}
  .pagehead{gap:8px;}
  h2{font-size:16px;}
  /* 広い表は横スクロールで見せる */
  .wrap .card{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .wrap .card table{min-width:560px;}
  /* 設定は縦積み */
  .setrow{flex-direction:column; align-items:flex-start; gap:8px;}
  .setinfo p{max-width:none;}
  /* 追加フォームは縦積み */
  .addform{flex-direction:column; align-items:stretch;}
  .addform input,.addform select,.addform .ratewrap,.addform .prodwrap{width:100%;}
  /* スタッフカードはスマホで余白を詰める */
  .sc-head{flex-wrap:wrap;}
  .nameinput{width:100%;}
  .sc-actions .btn{flex:1; text-align:center;}
}
.addform select{font:inherit; padding:9px 11px; border:1px solid var(--line); border-radius:8px;}

/* ===== 売上入力：スタッフごとの開閉式（アコーディオン） ===== */
.acctools{display:flex; gap:8px; margin-bottom:10px;}
.inputacc{display:flex; flex-direction:column; gap:10px;}
.iacc{background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 2px 8px rgba(43,37,48,.04);}
.iacc-sum{list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:13px 14px;}
.iacc-sum::-webkit-details-marker{display:none;}
.iacc-name{font-weight:800; font-size:15px;}
.iacc-status{margin-left:auto; font-size:12px; color:var(--mut);}
.iacc-status.on{color:var(--ok); font-weight:700;}
.iacc-status.unsaved{color:#c0392b; font-weight:700;}
.iacc-sum .chev{transition:transform .2s;}
.iacc[open] .iacc-sum .chev{transform:rotate(180deg);}
.iacc-body{display:flex; flex-direction:column; gap:10px; padding:4px 14px 14px;}
.ifield{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.ifield label{font-size:12.5px; color:var(--sub);}
.ifield input{width:150px; text-align:right; font:inherit; padding:9px 10px; border:1px solid var(--line); border-radius:8px;}
.ifield input:focus{outline:none; border-color:var(--pink); background:#fffafc;}

/* PC（広い画面）：常に開いた横並びの行レイアウト */
@media (min-width: 821px){
  .acctools{display:none;}
  .iacc-sum{cursor:default;}
  .iacc-sum .chev{display:none;}
  .iacc{display:flex; align-items:center; gap:16px; padding:6px 14px;}
  .iacc-sum{flex:0 0 240px; padding:8px 0;}
  .iacc-body{display:flex !important; flex-direction:row; flex-wrap:wrap; gap:14px 18px; padding:8px 0; flex:1;}
  .ifield{flex-direction:column; align-items:flex-start; gap:4px;}
  .ifield input{width:110px;}
}

/* スマホ：保存ボタンを下部に固定 */
@media (max-width: 820px){
  .saverow{position:sticky; bottom:0; background:var(--bg); padding:12px 0 6px; margin:0 -2px;
    box-shadow:0 -6px 12px rgba(246,242,245,.9);}
  .saverow .btn{width:100%;}
}