/* 査定お任せくん：新しい見た目（2026-10-23 TAMA）
   2回目の決め直し（同じ日）：カード・並び・横幅・字体・見出しは前のまま。変えるのは「ボタンとタブの形（楕円 → 角6の四角・下だけ2pxの線）」と「暗い表示」だけ
   （1回目は管理画面の共通の土台 ui-kihon/00-KIMARI.md を全部当てたが、TAMA「カードのレイアウトが変わった・大ばかりに変わった」）
   html に data-look="new" がある時だけ効く。外すと前の見た目に戻る（?look=old でこの端末だけ前の見た目）
   暗い表示は色の名前を入れ替えるだけ。index.html の直書きの白と灰色は var(--card,#fff)・var(--soft2,…)・var(--warm,…) にしてある */

/* 暗い表示の色（明るい表示は前の色のまま＝ここでは何も変えない） */
:root[data-look=new][data-theme=dark]{
  color-scheme:dark;
  --bg:#17181b;--card:#1f2024;--soft:#26272c;--soft2:#26272c;--warm:rgba(228,105,14,.14);--line:#36383f;--edge:#4c4f58;
  --text:#f2f0ed;--muted:#a8a29a;--ink2:#cfc9c2;--topbg:#17181b;
  --pick-bg:rgba(228,105,14,.18);--pick-line:#e4690e;--pick-ink:#ffb27a;
  --ok:#4cc27f;--okbg:rgba(76,194,127,.14);--ng:#ff7b72;--ngbg:rgba(255,123,114,.12);--wait:#f0c060;--waitbg:rgba(240,192,96,.12);--info:#8ab4f8;--infobg:rgba(138,180,248,.14);
  --btn-bg:#2a2b31;--btn-line:#4c4f58;--btn-under:#5d606a;
}
:root[data-look=new]{--btn-bg:#fff;--btn-line:#cfcfcc;--btn-under:#b9b9b4;--btn-press:#b8540b}
[data-look=new][data-theme=dark] body{background:var(--bg);color:var(--text)}
[data-look=new][data-theme=dark] .top{background:var(--topbg);backdrop-filter:none;-webkit-backdrop-filter:none}
[data-look=new][data-theme=dark] main a:not([class]){color:var(--text)}
[data-look=new][data-theme=dark] .drawer-back{background:rgba(0,0,0,.6)}

/* ボタン：楕円をやめて角6の四角。塗り（オレンジ）は平らな色＋下だけ濃い線、枠は白地＋線＋下だけ2pxの線で押せると分かる形。大きさ・並びは前のまま。押した時は1px沈む */
/* 下の濃い線は内側の影で描く（線にすると高さが1〜2px増え、下の物が全部ずれるため） */
[data-look=new] .btn{border-radius:6px;background:var(--accent);box-shadow:inset 0 -2px 0 var(--btn-press)}
[data-look=new] .btn.ok{background:var(--accent)}
[data-look=new] :is(.btn.sub,.btn.ng){background:var(--btn-bg);border-color:var(--btn-line);box-shadow:inset 0 -2px 0 var(--btn-under)}
[data-look=new] .btn.ng{color:var(--accent)}
/* 押せないボタンは灰色の地に濃い灰の字（上の塗りが index.html の「押せないボタン」を上書きしていた・2026-10-24 点検6#1） */
[data-look=new] :is(.btn:disabled,.btn[disabled]):where(:not([aria-busy=true])){background:var(--soft2,#ececea);color:#5f5f66;border-color:transparent;box-shadow:none}
[data-look=new][data-theme=dark] :is(.btn:disabled,.btn[disabled]):where(:not([aria-busy=true])){color:var(--muted)}
[data-look=new] .fab{border-radius:6px;background:var(--accent);box-shadow:inset 0 -2px 0 var(--btn-press),0 4px 12px rgba(228,105,14,.22)}
[data-look=new] :is(.big button,.seg button){border-radius:6px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
[data-look=new] :is(.btn,.big button,.seg button,.chip):active:not(:disabled){transform:translateY(1px)}

/* タブ（査定・発送・検品…）と上の切替（依頼する／査定する／運営）・並び順：楕円をやめて角6。今いる所の色は前のまま */
[data-look=new] .chip{border-radius:6px}
[data-look=new] .modesw{border-radius:8px}
[data-look=new] .modesw button{border-radius:6px}
[data-look=new] .sortsel{border-radius:6px}
[data-look=new] .menubtn,[data-look=new] .dclose{border-radius:6px}
/* 残っていた楕円・グラデーションをそろえる（2026-10-24 TAMA：紹介の「12か月」の札・「50%」の丸ほか）
   札は角4・ボタンは角6・塗りは平らなオレンジ。数の丸（件数・未読）と進み具合の棒は丸のまま */
[data-look=new] :is(.badge-rev,.mark,.beta,.tip.scoretip,.ptag,.stp-badge,.tp-cb-m,.pc-tag,.rs-tag,.car-lens,.car-dots){border-radius:4px}
[data-look=new] :is(.shoot .skip,.nbtn,details.thread[open] .th-close,.tabind){border-radius:6px}
[data-look=new] .tp-cb-n{background:var(--accent);box-shadow:none}
[data-look=new] .q-band{background:var(--accent);border-radius:6px;box-shadow:inset 0 -2px 0 var(--btn-press)}

/* 暗い表示の時のボタン・タブ：板の色に合わせる */
[data-look=new][data-theme=dark] :is(.chip,.big button,.seg button,.modesw button){background:var(--card);color:var(--text);border-color:var(--line)}
[data-look=new][data-theme=dark] .modesw{background:var(--soft)}
[data-look=new][data-theme=dark] .modesw button.on{background:var(--pick-bg);color:var(--pick-ink);box-shadow:none}
[data-look=new][data-theme=dark] .tabbar .chip.on{background:var(--text);border-color:var(--text);color:var(--bg)}
[data-look=new][data-theme=dark] .tabbar .chip .cnt{border-color:var(--bg)}
/* 暗い表示で読めなかった所（2026-10-24 点検6#3〜#5・#8） */
[data-look=new][data-theme=dark] .tabbar .chip:not(.on) .cnt:not(.mine){background:var(--soft);color:var(--text)}
[data-look=new][data-theme=dark] .ap-send{background:var(--card)}
[data-look=new][data-theme=dark] .rs-tag{background:var(--infobg);color:var(--info)}
[data-look=new][data-theme=dark] .req{color:#ff8a80}
[data-look=new][data-theme=dark] :is(.big button.on,.seg button.on,.seg button[aria-pressed=true]){background:var(--accent);border-color:var(--accent);color:#fff}

/* 右上の「明るい／暗い」：PCはヘッダー、スマホ（600px以下）はメニューの中 */
[data-look=new] #lookt{display:flex}
.lookt{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.lookt button{min-height:38px;padding:0 12px;border:0;border-radius:0;background:var(--card,#fff);color:var(--muted);font:inherit;font-size:var(--fs-small);font-weight:700;cursor:pointer;white-space:nowrap}
.lookt button[aria-pressed=true]{background:var(--pick-bg,#fdf0e6);color:var(--pick-ink,#a8490a)}
.lookt button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media(max-width:600px){[data-look=new] #lookt{display:none}}
.mlook{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 20px 4px}
.mlook .lookt{flex:none}

/* 運営の画面の折りたたみの題（「専門業者を招待する」など）：本文の大きさ・太さ700・左の色線なし（2026-10-23 TAMA「謎に太文字」） */
[data-look=new] .asec-h{font-size:var(--fs-body);font-weight:700;border-left:0;padding-left:16px;padding-right:16px}

/* 暗い表示の入力欄・選ぶ欄（並び順など、白地が直書きの物）：板の色に。矢印の絵はそのまま */
[data-look=new][data-theme=dark] :is(select,.sortsel,input:not([type=checkbox]):not([type=radio]),textarea){background-color:var(--card);color:var(--text);border-color:var(--line)}
[data-look=new][data-theme=dark] :is(input[type=checkbox],input[type=radio]){accent-color:var(--accent)}

/* 状態のタブ（依頼・成約・検品・振込・完了／査定・発送・検品・入金・完了）：リユースOSと同じ「次へ次へ」の矢印の形（2026-10-23 TAMA）
   一番左は左が平ら・右が飛び出す／間は左がへこみ・右が飛び出す／一番右は左がへこみ・右が平ら。形は ::before の地に付け、件数の印（.cnt）は切らない
   地はうすい灰色、今いる所は前と同じ黒（暗い表示は白）。前の矢印の先がはまるように重ね、2pxの切れ目で段を見分ける */
[data-look=new] .tabbar .filters.stages{gap:0;--ar:12px}
[data-look=new] .tabbar .filters.stages>.chip{position:relative;isolation:isolate;border:1px solid transparent;border-radius:0;background:transparent;color:var(--text);padding-left:calc(var(--ar) + 12px);padding-right:calc(var(--ar) + 8px)}
[data-look=new] .tabbar .filters.stages>.chip::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--stage-bg,#efefed);clip-path:polygon(0 0,calc(100% - var(--ar)) 0,100% 50%,calc(100% - var(--ar)) 100%,0 100%,var(--ar) 50%)}
[data-look=new] .tabbar .filters.stages>.chip+.chip{margin-left:calc(2px - var(--ar))}
[data-look=new] .tabbar .filters.stages>.chip:first-child{padding-left:14px}
[data-look=new] .tabbar .filters.stages>.chip:first-child::before{clip-path:polygon(0 0,calc(100% - var(--ar)) 0,100% 50%,calc(100% - var(--ar)) 100%,0 100%);border-radius:6px 0 0 6px}
[data-look=new] .tabbar .filters.stages>.chip:last-child{padding-right:14px}
[data-look=new] .tabbar .filters.stages>.chip:last-child::before{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,var(--ar) 50%);border-radius:0 6px 6px 0}
[data-look=new] .tabbar .filters.stages>.chip.on{background:transparent;color:#fff}
[data-look=new] .tabbar .filters.stages>.chip.on::before{background:var(--text)}
@media(hover:hover){[data-look=new] .tabbar .filters.stages>.chip:not(.on):hover::before{background:#e4e3e0}}
[data-look=new][data-theme=dark] .tabbar .filters.stages>.chip{--stage-bg:#2a2b31;background:transparent;color:var(--text)}
[data-look=new][data-theme=dark] .tabbar .filters.stages>.chip.on{color:var(--bg)}
[data-look=new][data-theme=dark] .tabbar .filters.stages>.chip.on::before{background:var(--text)}
/* スマホ：5つが画面の幅に入るよう、矢印を小さく・文字の余白を詰める（件数の印は右上のまま） */
@media(max-width:560px){
  [data-look=new] .tabbar .filters.stages{--ar:9px}
  [data-look=new] .tabbar .filters.stages>.chip{padding-left:calc(var(--ar) + 3px);padding-right:calc(var(--ar) + 1px)}
  [data-look=new] .tabbar .filters.stages>.chip:first-child{padding-left:6px}
  [data-look=new] .tabbar .filters.stages>.chip:last-child{padding-right:6px}
  [data-look=new] .tabbar .filters.stages>.chip .cnt{right:calc(var(--ar) - 4px)}
}

/* メニュー（右から出る引き出し）：見出しが項目より小さく薄くて見にくい（2026-10-23 TAMA）
   見出し＝本文の大きさ・太字・濃い色／項目＝同じ大きさで太さふつう・左を見出しより1段下げる。まとまりの間は線と余白で区切る */
[data-look=new] .mgrp2{padding:10px 0 8px}
[data-look=new] .mgrp2+.mgrp2{margin-top:0;padding-top:12px}
[data-look=new] .mgrp2 .mh{font-size:var(--fs-body);font-weight:800;color:var(--text);padding:4px 20px 6px;line-height:1.5}
[data-look=new] .mi{font-size:var(--fs-body);font-weight:400;min-height:46px;padding:0 20px 0 32px;color:var(--text)}
[data-look=new] .mgrp2:not(:has(.mh)) .mi{padding-left:20px;font-weight:700}
[data-look=new] .mi.out{padding-left:20px;font-weight:400;color:var(--muted)}
[data-look=new] .mi.sw{padding-left:32px}

/* 暗い表示の、タブ以外の選んでいる札（運営の見積もりの一覧の期間など）：明るい表示と同じくオレンジの塗り */
[data-look=new][data-theme=dark] .chips .chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
[data-look=new][data-theme=dark] .st.role-rec{color:#5fd4c6;background:rgba(95,212,198,.14)}