:root{
--bg:#0d1117; --surface:#161b22; --surface2:#1c2333; --surface3:#21262d;
--border:#30363d; --border2:#484f58;
--ink:#e6edf3; --muted:#8b949e; --soft:#161b22;
--accent:#58a6ff; --accent-d:#1f6feb;
--navy:#58a6ff; --navy2:#79c0ff; --blue:#58a6ff; --blue-d:#1f6feb;
--ok:#3fb950; --danger:#f85149; --warn:#d29922; --orange:#f0883e;
--line:#30363d;
--radius:5px;
--sans:"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);font-size:15px;line-height:1.7;-webkit-text-size-adjust:100%}
/* スクロールバー：ダークテーマ用に細身・角丸（標準の灰色バーが目立つのを解消）。Firefox=scrollbar-*／Chrome・Edge=::-webkit。つまみは普段ひかえめ→重ねると明るく→ドラッグ中は青 */
*{scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
*::-webkit-scrollbar{width:12px;height:12px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--border2);border-radius:5px;border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--muted);border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:active{background:var(--accent);border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-corner{background:transparent}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;color:var(--navy2)}
h1{font-size:20px;margin:0;color:var(--ink);font-weight:700;letter-spacing:.01em}
h2.ph{font-size:13px;color:var(--muted);margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--border);letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.topstrip{background:#010409;color:#8b949e;display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:5px 16px;font-size:12px;border-bottom:1px solid #21262d}
.tswho{color:#c9d1d9;font-weight:600}
.tswho .muted{color:#8b949e}
.topstrip .logoutbtn{color:#c9d1d9;background:transparent;padding:3px 12px;border-radius:3px;font-size:12px;font-weight:600;text-decoration:none;border:1px solid var(--border2)}
.topstrip .logoutbtn:hover{background:#21262d;color:#e6edf3;text-decoration:none}
.topbar{display:flex;align-items:center;gap:14px;background:#161b22;color:var(--ink);padding:0 18px;min-height:52px;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
/* 全ページ共通の「← 戻る」（header.ejs。前に見ていたページへ戻る） */
.backbtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;margin-right:-4px;padding:6px 12px;border:1px solid var(--border2);border-radius:5px;background:var(--surface3);color:var(--ink);font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;line-height:1}
.backbtn:hover{border-color:var(--accent);background:var(--surface);color:var(--accent)}
.backbtn:active{transform:translateY(1px)}
.backbtn[hidden]{display:none}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:700;font-size:15px;letter-spacing:.02em}
.brand:hover{text-decoration:none;color:var(--accent)}
.logo{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;background:var(--accent);color:#0d1117;font-weight:800;font-size:12px;letter-spacing:0}
.logo.big{width:56px;height:56px;font-size:20px;border-radius:7px}
img.logo{object-fit:cover;background:#05070e;border:none}
.rolechip{display:inline-flex;align-items:center;background:#21262d;padding:4px 10px;border-radius:3px;font-size:11px;font-weight:700;white-space:nowrap;border:1px solid var(--border);color:var(--muted)}
.rc-admin{color:#e6edf3;border-color:#484f58}
.rc-operator{color:var(--accent)}
.rc-staff{color:var(--ok)}
.rc-accounting{color:var(--warn)}
.rc-system{color:var(--ink);background:var(--surface3);border-color:var(--orange);font-weight:700}
/* 新規案件のお知らせ＝「新規案件」の文字だけオレンジ・他の文字は白（左線はオレンジで目印） */
.msg-item.msg-newcase{border-left:3px solid var(--orange)}
.nc-tag{color:var(--orange);font-weight:800}
.mainnav{display:flex;gap:2px;row-gap:4px;margin-left:6px;flex:1 1 auto;min-width:0;overflow:visible;flex-wrap:wrap}
.mainnav::-webkit-scrollbar{height:0}
.mainnav a{color:var(--muted);padding:7px 11px;border-radius:4px;font-weight:600;font-size:14px;white-space:nowrap;flex:0 0 auto;transition:color .12s,background .12s}
.topbar .brand{flex:0 0 auto;white-space:nowrap}
.topbar>.rolechip{flex:0 0 auto;white-space:nowrap}
.mainnav a:hover{background:var(--surface2);color:var(--ink);text-decoration:none}
.mainnav a.on{background:var(--surface3);color:var(--accent);font-weight:700;border:1px solid var(--border)}
.mainnav a.on:hover{background:var(--surface3);text-decoration:none}
/* カテゴリナビ（管理/担当/経理/オペ）：見出し▾＝クリック/ホバーで関連項目が下に展開 */
.navgroup{position:relative;display:inline-flex;flex:0 0 auto}
.navgroup-btn{font:inherit;color:var(--muted);padding:7px 11px;border-radius:4px;font-weight:600;font-size:14px;white-space:nowrap;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:color .12s,background .12s}
.navgroup-btn:hover{background:var(--surface2);color:var(--ink)}
.navgroup-btn.on{background:var(--surface3);color:var(--accent);font-weight:700;border:1px solid var(--border)}
.ng-caret{font-size:9px;opacity:.65;transition:transform .15s}
.navgroup.open .ng-caret{transform:rotate(180deg)}
.navgroup-menu{position:absolute;top:calc(100% + 5px);left:0;min-width:196px;background:var(--surface);border:1px solid var(--border);border-radius:5px;box-shadow:0 12px 30px rgba(0,0,0,.5);padding:6px;display:none;flex-direction:column;gap:2px;z-index:60}
/* ボタンとメニューの5px隙間を透明ブリッジで埋める＝矢印から子項目へカーソルを降ろす途中で閉じない（hoverが切れない） */
.navgroup-menu::before{content:"";position:absolute;left:0;right:0;top:-9px;height:9px;background:transparent}
.navgroup.open>.navgroup-menu{display:flex}
@media(hover:hover){.navgroup:hover>.navgroup-menu{display:flex}}
.navgroup-menu a{color:var(--muted);padding:8px 12px;border-radius:4px;font-weight:600;font-size:14px;white-space:nowrap;display:flex;align-items:center;gap:6px}
.navgroup-menu a:hover{background:var(--surface2);color:var(--ink);text-decoration:none}
.navgroup-menu a.on{background:var(--surface3);color:var(--accent);font-weight:700}
.me{margin-left:auto;display:flex;align-items:center;gap:12px}
.homebtn{display:inline-flex;align-items:center;gap:5px;background:var(--surface2);color:var(--muted);padding:6px 12px;border-radius:4px;font-weight:600;font-size:12px;white-space:nowrap;border:1px solid var(--border)}
.homebtn:hover{background:var(--surface3);color:var(--ink);text-decoration:none}
.who{font-size:12px;line-height:1.2;text-align:right;color:var(--muted)}
.who small{display:block;color:#484f58;font-size:10px}
.linkbtn{background:none;border:none;color:var(--muted);cursor:pointer;font:inherit;font-size:12px;padding:0;text-decoration:underline}
.linkbtn:hover{color:var(--ink)}
.linkbtn.danger{color:var(--danger)}
.logoutbtn{text-decoration:none;background:var(--surface2);padding:5px 10px;border-radius:3px;border:1px solid var(--border)}
.logoutbtn:hover{background:var(--surface3);color:var(--ink);text-decoration:none}
.wrap{max-width:1800px;margin:0 auto;padding:16px 30px 28px}
.pagehead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 16px;flex-wrap:wrap}
.monthtag{font-size:22px;font-weight:800;color:var(--accent);background:rgba(88,166,255,.1);padding:5px 18px;border-radius:4px;vertical-align:middle;margin-left:10px;border:1px solid rgba(88,166,255,.2)}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin:0 0 14px}
.users-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;align-items:start}
.users-layout .panel{margin-bottom:0}
.users-list-panel .tablewrap{max-height:calc(100vh - 200px);overflow-y:auto}
.panel.center{text-align:center}
.foot{text-align:center;color:#484f58;font-size:11px;padding:12px}
.customer-db-panel{border-left:3px solid var(--accent)}
.cdb-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.cdb-name{font-size:18px;font-weight:700;color:var(--ink)}
.cdb-kana{font-size:11px;color:var(--muted);margin-top:1px;letter-spacing:.03em}
.cdb-addr{margin-top:4px}
.cdb-contact{display:flex;gap:8px;flex-wrap:nowrap;margin-top:6px}
.cdb-contact .callbtn{font-size:14px;font-weight:700}
.seisan-box{background:var(--surface2);border-radius:4px;padding:10px 12px;margin-bottom:12px;border:1px solid var(--border)}
.seisan-label{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:8px;letter-spacing:.06em;text-transform:uppercase}
.seisan-btns{display:flex;gap:8px;justify-content:space-evenly}
.seisan-pill input{display:none}
.seisan-pill span{display:block;padding:5px 14px;border-radius:10px;font-size:12px;font-weight:600;border:1px solid var(--border);background:var(--surface3);color:var(--muted);cursor:pointer;transition:all .15s}
.seisan-pill:has(input[value="現金"]:checked) span,.seisan-pill:has(input[value="振込"]:checked) span{background:rgba(88,166,255,.15);color:var(--accent);border-color:rgba(88,166,255,.4)}
.houmon-pass-row{display:flex;align-items:center;gap:8px;margin-top:8px;background:rgba(210,153,34,.08);border:1px solid rgba(210,153,34,.3);border-radius:4px;padding:6px 10px}
.houmon-pass-label{font-size:11px;font-weight:700;color:var(--warn);white-space:nowrap}
.houmon-pass-input{flex:1;border:none;background:transparent;font-size:14px;font-weight:600;color:var(--ink);outline:none;min-width:0}
.houmon-pass-input::placeholder{color:#484f58;font-weight:400}
.cdb-hist-label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.06em;margin-bottom:8px}
.cdb-total{text-align:right;flex-shrink:0}
.cdb-cnt{font-size:24px;font-weight:800;color:var(--ink);line-height:1}
.cdb-cnt span{font-size:12px;font-weight:400;color:var(--muted)}
.cdb-cumamt{font-size:15px;font-weight:700;color:var(--accent);margin-top:4px}
.cdb-cumamt span{font-size:11px;font-weight:400;color:var(--muted);display:block}
.row-current{background:rgba(88,166,255,.06)!important}
.work-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin:0 0 12px}
.status-row{display:flex;gap:5px;margin-bottom:14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.st-pill{flex:1;min-width:0;cursor:pointer}
.st-pill input{display:none}
.st-pill span{display:block;text-align:center;padding:8px 4px;border-radius:4px;font-size:12px;font-weight:600;background:var(--surface2);color:var(--muted);white-space:nowrap;transition:.15s;border:1px solid var(--border)}
.st-pill input:checked+span.badge,.st-pill input:checked~span{border-color:currentColor}
.st-pill:has(input:checked) span{background:var(--surface2);color:var(--muted)}
.st-pill:has(input[value="受付中"]:checked) span{background:rgba(88,166,255,.12);color:var(--accent);border-color:rgba(88,166,255,.4)}
.st-pill:has(input[value="見積中"]:checked) span{background:rgba(210,153,34,.1);color:var(--warn);border-color:rgba(210,153,34,.4)}
.st-pill:has(input[value="見積決定"]:checked) span,.st-pill:has(input[value="工事決定"]:checked) span{background:rgba(130,80,255,.12);color:#b084ff;border-color:rgba(130,80,255,.4)}
.st-pill:has(input[value="工事完了"]:checked) span{background:rgba(63,185,80,.1);color:var(--ok);border-color:rgba(63,185,80,.35)}
.six-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px}
.six-cell{border-radius:5px;border:1px solid var(--border);background:var(--surface2);padding:9px 6px 7px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.six-st{min-height:58px}
.six-st input{display:none}
.six-name{font-size:11px;font-weight:700;color:var(--muted);text-align:center;white-space:nowrap;transition:.15s}
.six-st:has(input:checked){border-color:currentColor}
.six-st:has(input[value="受付中"]:checked){background:rgba(88,166,255,.12);border-color:rgba(88,166,255,.4)}
.six-st:has(input[value="受付中"]:checked) .six-name{color:var(--accent)}
.six-st:has(input[value="見積中"]:checked){background:rgba(210,153,34,.1);border-color:rgba(210,153,34,.4)}
.six-st:has(input[value="見積中"]:checked) .six-name{color:var(--warn)}
.six-st:has(input[value="工事決定"]:checked){background:rgba(130,80,255,.12);border-color:rgba(130,80,255,.4)}
.six-st:has(input[value="工事決定"]:checked) .six-name{color:#b084ff}
.six-st:has(input[value="工事完了"]:checked){background:rgba(63,185,80,.1);border-color:rgba(63,185,80,.35)}
.six-st:has(input[value="工事完了"]:checked) .six-name{color:var(--ok)}
.six-st:has(input[value="電話パス"]:checked),.six-st:has(input[value="現場パス"]:checked){background:rgba(248,81,73,.1);border-color:rgba(248,81,73,.4)}
.six-st:has(input[value="電話パス"]:checked) .six-name,.six-st:has(input[value="現場パス"]:checked) .six-name{color:var(--danger)}
.work-amounts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.wa-field{display:flex;flex-direction:column;gap:4px}
.wa-field span{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.04em}
.wa-field input{height:40px;border:1px solid var(--border);border-radius:4px;padding:0 10px;font:inherit;font-size:15px;width:100%;box-sizing:border-box;background:var(--surface2);color:var(--ink)}
.wa-result strong{font-size:20px;font-weight:800;color:var(--ok);line-height:40px}
.attach-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 8px}
.attach-form{flex:1 1 calc(50% - 4px)}
.attach-btn{display:flex;align-items:center;justify-content:center;gap:6px;height:40px;border:1px dashed var(--border);border-radius:4px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;width:100%;box-sizing:border-box;background:var(--surface2)}
.attach-btn input[type=file]{display:none}
.attach-btn:hover{border-color:var(--accent);color:var(--accent)}
.attach-list{padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:8px}
.attach-item{background:var(--surface2);border-radius:4px;overflow:hidden;border:1px solid var(--border)}
.attach-item-head{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:12px}
.attach-img{width:100%;display:block;max-height:220px;object-fit:contain;background:#010409}
/* 写真アップロードのAJAX進捗・失敗時の再送（#2 携帯からの写真喪失対策） */
.attach-status{flex-basis:100%;margin-top:6px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.attach-status.busy{color:var(--muted)}
.attach-status.err{color:var(--warn,#f59e0b)}
.att-bar{flex:1 1 120px;min-width:100px;height:7px;border-radius:3px;background:var(--surface2);border:1px solid var(--border);overflow:hidden}
.att-bar-fill{display:block;height:100%;width:0;background:var(--accent);transition:width .15s}
.att-pct{white-space:nowrap}
.att-retry{padding:2px 10px;font-size:12px}
.kouji-dates-label{font-size:12px;font-weight:700;color:#b084ff;margin-bottom:6px;letter-spacing:.04em}
.kouji-dates-row{display:flex;align-items:flex-end;gap:8px}
.kouji-dates-sep{font-size:15px;color:var(--muted);padding-bottom:8px}
.kouji-dates-row .wa-field{flex:1}
.kouji-dates-row input[type=date]{height:40px;border:1px solid rgba(130,80,255,.3);border-radius:4px;padding:0 10px;font:inherit;font-size:14px;width:100%;box-sizing:border-box;background:var(--surface2);color:var(--ink)}
.flash{background:rgba(63,185,80,.1);border:1px solid rgba(63,185,80,.3);color:var(--ok);padding:10px 14px;border-radius:4px;margin:0 0 14px;font-size:13px}
.err{background:rgba(248,81,73,.1);border:1px solid rgba(248,81,73,.3);color:var(--danger);padding:10px 14px;border-radius:4px;margin:0 0 14px;font-size:13px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 16px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}
.stat-n{font-size:24px;font-weight:800;color:var(--ink);line-height:1.1}
.stat-l{font-size:11px;color:var(--muted);margin-top:4px;letter-spacing:.04em}
.filterbar{display:flex;gap:8px;flex-wrap:nowrap;margin:0 0 14px;align-items:center}
.filterbar input,.filterbar select{height:40px;line-height:1.3;padding:0 11px;min-width:0}
.filterbar input[type=search]{flex:2}
.filterbar select{flex:1}
/* 担当者の白いスマホ画面：狭い幅で5要素をnowrapのまま詰めると凹み入力欄が潰れて小さくなるので折り返す＋大きくする */
@media(max-width:760px),(max-height:500px) and (orientation:landscape){
body.fdstaffmobile .filterbar{flex-wrap:wrap;gap:6px;margin-bottom:2px}
body.fdstaffmobile .filterbar input,body.fdstaffmobile .filterbar select{height:46px;font-size:15px}
body.fdstaffmobile .filterbar input[type=search]{flex:1 1 100%;width:100%}
body.fdstaffmobile .filterbar select{flex:1 1 calc(50% - 3px);width:calc(50% - 3px);min-width:0}
body.fdstaffmobile .filterbar .btn{flex:1 1 auto;height:44px;font-size:14px}
body.fdstaffmobile .grid-stack-item[gs-id="pl-filter"] .pl-body{padding-top:8px;padding-bottom:6px}
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 16px;border-radius:4px;border:1px solid var(--border);background:var(--surface2);color:var(--ink);font:inherit;font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s}
.btn:hover{text-decoration:none;background:var(--surface3);border-color:var(--border2)}
.btn.primary{background:var(--accent-d);color:#fff;border-color:var(--accent-d)}
.btn.primary:hover{background:var(--accent);border-color:var(--accent);color:#0d1117}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--surface2);color:var(--ink)}
.btn.block{width:100%}
.btn.small{height:28px;padding:0 10px;font-size:12px;border-radius:3px}
.form .field,.field{display:block;margin:0 0 12px;font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.04em}
input,select,textarea{width:100%;font:inherit;font-size:14px;color:var(--ink);border:1px solid var(--border);border-radius:4px;padding:9px 11px;background:var(--surface2);margin-top:4px;transition:border-color .12s}
textarea{resize:vertical;line-height:1.7}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(88,166,255,.12)}
input::placeholder,textarea::placeholder{color:#484f58;opacity:1}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#484f58}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px}
.row-addr{display:grid;grid-template-columns:108px 108px 1.5fr 1.4fr;gap:10px}
.row-narrow{display:grid;grid-template-columns:170px 1fr;gap:10px;max-width:420px}
.row-ag{display:grid;grid-template-columns:120px 1fr;gap:10px}
.row-ag3{display:grid;grid-template-columns:1.2fr 110px 1.9fr;gap:10px}
.row-ag4{display:grid;grid-template-columns:1.3fr 1fr 105px 1.8fr;gap:10px}
@media(max-width:760px){.row-addr{grid-template-columns:1fr 1fr}.row-narrow{grid-template-columns:1fr 1fr;max-width:none}.row-ag3,.row-ag4{grid-template-columns:1fr 1fr}}
.form.compact h2.ph{margin:10px 0 7px;font-size:11px;padding-bottom:5px}
.agency-box{position:relative;background:rgba(210,153,34,.06);border:1px solid rgba(210,153,34,.2);border-radius:5px;padding:10px 14px 2px;margin:5px 0 10px}
.ac-list{position:absolute;z-index:40;background:var(--surface3);border:1px solid var(--border2);border-radius:4px;box-shadow:0 18px 40px -10px rgba(0,0,0,.7);max-height:280px;overflow:auto}
.ac-item{padding:8px 12px;cursor:pointer;font-size:13px;line-height:1.4;border-bottom:1px solid var(--border)}
.ac-item:last-child{border-bottom:none}
.ac-item:hover,.ac-item.active{background:var(--surface2)}
.ac-item b{color:var(--ink);font-weight:700}
.ac-sub{color:var(--muted);font-size:12px}
.agfilter{width:auto;max-width:260px;height:36px;margin:0}
.ag-row{cursor:pointer}
.row-ids{display:grid;grid-template-columns:160px 110px;gap:10px}
input.auto{background:rgba(88,166,255,.08);color:var(--accent);font-weight:700;border-style:dashed;border-color:rgba(88,166,255,.3)}
@media(max-width:760px){.row-ids{grid-template-columns:1fr 1fr}}
.greet{color:var(--muted);font-size:13px}
.salescard{padding:12px 14px;margin-bottom:10px}
.sc-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.sc-content{margin:0 0 7px}
.ministats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 12px}
.ms{background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:8px 4px;text-align:center}
.ms-n{display:block;font-size:16px;font-weight:800;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.ms-l{display:block;font-size:10px;color:var(--muted);margin-top:2px;letter-spacing:.04em}
.ministats3{grid-template-columns:repeat(3,1fr)}
.monthbox{background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:10px 14px;margin:0 0 12px}
.monthttl{font-size:11px;color:var(--muted);font-weight:700;margin-bottom:7px;letter-spacing:.04em}
.monthrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.mcell{display:flex;flex-direction:column;gap:2px}
.mc-l{font-size:10px;color:var(--muted);letter-spacing:.04em}
.mc-n{font-size:16px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
.mc-n.pay{color:var(--ok)}
.mc-n.exp{color:var(--warn)}
.cards.cards4{grid-template-columns:repeat(4,1fr)}
.jobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin:0 0 8px}
.jobcard{display:block;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius);padding:13px 15px;color:var(--ink);transition:border-color .12s,background .12s;cursor:pointer}
.jobcard:hover{text-decoration:none;background:var(--surface2);border-color:var(--border2)}
.jobcard.st-l-新規{border-left-color:var(--accent)}
.jobcard.st-l-対応中{border-left-color:var(--warn)}
.jobcard.st-l-見積提出{border-left-color:#b084ff}
.jobcard.st-l-完了{border-left-color:var(--ok)}
.jobcard.st-l-キャンセル{border-left-color:#484f58}
.jobhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.jobno{color:var(--muted);font-size:11px}
.jobcust{font-weight:700;color:var(--ink);font-size:15px}
.jobwhen{color:var(--accent);font-weight:600;font-size:12px;margin:4px 0 1px}
.jobkana{font-size:11px;color:var(--muted);font-weight:600;margin-left:4px}
.jobaddr{color:var(--muted);font-size:13px;margin-top:3px;line-height:1.5}
.jobdist{color:var(--muted);font-size:12px;margin-top:6px}
.jobaddr .muted{font-size:11px}
.jobamt{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.amt{font-size:12px;font-weight:600;padding:3px 10px;border-radius:3px}
.amt b{font-size:14px;font-weight:800;margin-left:2px}
.amt-total{background:rgba(88,166,255,.1);color:var(--accent);border:1px solid rgba(88,166,255,.2)}
.amt-pay{background:rgba(63,185,80,.1);color:var(--ok);border:1px solid rgba(63,185,80,.2)}
.jobcontent{margin:7px 0 0;font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted)}
.jobfoot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding-top:8px;margin-top:9px;font-size:12px}
.jobopen{color:var(--accent);font-weight:600}
.callbtn{display:inline-flex;align-items:center;gap:6px;font-size:17px;font-weight:800;color:var(--ok);font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}
.callbtn:hover{text-decoration:none;color:#3fb950}
.callbtn.sm{font-size:13px;font-weight:700;color:var(--accent)}
/* 改善策3（#58）：住所→地図リンク。電話(callbtn)と並ぶ操作 */
.maplink{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:800;color:var(--accent);white-space:nowrap}
.maplink:hover{text-decoration:none;color:#79c0ff}
@media(max-width:760px){.cards.cards4{grid-template-columns:1fr 1fr}.jobs{grid-template-columns:1fr}}
.charts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chartcard{margin:0}
.chartcard-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.chartcard-head .ph{margin:0;border-bottom:none;padding-bottom:0}
.chartbox{position:relative;height:240px}
@media(max-width:760px){.charts{grid-template-columns:1fr}.chartbox{height:220px}}
.revcard{padding:14px 16px;margin-bottom:12px}
.rev-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;padding-bottom:9px;border-bottom:1px solid var(--border)}
.rev-body{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.rev-field{margin-bottom:8px}
.rev-dt{font-size:11px;color:var(--muted);margin-bottom:2px}
.rev-docs{margin-top:9px}
.rev-lbl{display:block;font-size:11px;color:var(--muted);margin-bottom:5px;letter-spacing:.04em}
.doc-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:4px 9px;font-size:12px;margin:0 5px 5px 0;color:var(--accent);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-chip:hover{background:var(--surface3);text-decoration:none}
.rev-right{background:var(--surface2);border-radius:4px;padding:12px;border:1px solid var(--border)}
@media(max-width:760px){.rev-body{grid-template-columns:1fr}}
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:0 0 16px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:12px 14px}
.kpi-l{font-size:11px;color:var(--muted);line-height:1.4;letter-spacing:.04em}
.kpi-n{font-size:20px;font-weight:800;color:var(--ink);margin-top:5px;font-variant-numeric:tabular-nums;line-height:1.28}
.kpi-n small{font-size:12px;font-weight:600;color:var(--muted);margin-left:2px}
.kpi-n.exp{color:var(--warn)}
.kpi-n.pay{color:var(--ok)}
.kpi-n.profit{color:var(--accent)}
.kpi.big{background:rgba(88,166,255,.05);border-color:rgba(88,166,255,.2)}
.furikomi-list{display:flex;flex-direction:column;gap:8px}
.furikomi-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface2);border-radius:4px;padding:11px 13px;border:1px solid var(--border)}
.furikomi-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.furikomi-name{font-weight:700;font-size:13px;color:var(--ink)}
.furikomi-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.furikomi-amt{font-size:15px;font-weight:800;color:var(--ok);white-space:nowrap}
.furikomi-btns{display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.furikomi-done{font-size:11px;font-weight:700;color:var(--ok);white-space:nowrap}
.furikomi-done-bar{text-align:center;color:var(--ok);font-weight:600;font-size:12px;padding:6px 0}
.kcols{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.kside .panel{margin-bottom:12px}
table.list th.r,table.list td.r{text-align:right}
table.list tfoot th{background:var(--surface2);color:var(--ink);font-weight:700;padding:10px 12px;border-top:1px solid var(--border2);text-align:right;white-space:nowrap}
table.list tfoot th:first-child{text-align:left}
@media(max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}.kcols{grid-template-columns:1fr}}
.dbcards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dbcard{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;color:var(--ink);transition:background .12s,border-color .12s}
.dbcard:hover{text-decoration:none;border-color:var(--border2);background:var(--surface2)}
.dbicon{flex:none;width:42px;height:42px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px}
.dbtxt{flex:1;min-width:0}
.dbname{font-weight:600;color:var(--ink);font-size:14px}
.dbsub{color:var(--muted);font-size:11px;margin-top:2px}
.dbnum{font-size:20px;font-weight:800;color:var(--ink);white-space:nowrap}
.dbnum small{font-size:11px;font-weight:600;color:var(--muted);margin-left:2px}
@media(max-width:760px){.dbcards{grid-template-columns:1fr}}
.head-right{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.headfield{font-size:11px;color:var(--muted);font-weight:600;margin:0;line-height:1.2;letter-spacing:.04em}
.headfield input{height:34px;margin-top:2px;padding:5px 9px;width:130px}
.headfield input[type=number]{width:74px}
.agency-box h2.ph{margin-top:0 !important;color:var(--warn);border-bottom-color:rgba(210,153,34,.2)}
.panel.form.compact{padding:14px 16px;margin-bottom:8px}
.form.compact .field{margin-bottom:6px;font-size:11px}
.form.compact .grid2,.form.compact .grid3,.form.compact .grid4{gap:8px}
.form.compact input,.form.compact select,.form.compact textarea{margin-top:2px;padding:6px 10px}
.form.compact .radios{margin-top:2px;gap:6px}
.form.compact .radio{padding:5px 10px;font-size:12px;white-space:nowrap;flex:0 0 auto}
.form.compact .phrases{margin:2px 0 4px}
.form.compact .nofield{margin:-2px 0 6px;font-size:11px}
.form.compact .actions{margin-top:4px}
.pagehead.tight{margin-bottom:8px}
.pagehead.tight h1{font-size:17px}
.radios{display:flex;gap:8px;margin-top:5px;flex-wrap:wrap}
.radio{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:4px;padding:7px 14px;cursor:pointer;font-weight:600;color:var(--muted);margin:0;font-size:13px;transition:all .12s}
.radio input{width:auto;margin:0}
/* 受付方法（電話・メール・LINE）は一列固定・文字を詰めてスクロールを出さない */
.src-radios{flex-wrap:nowrap;gap:3px;overflow:visible}
/* .form.compact .radio(flex:0 0 auto)より詳細度で勝たせる＝5択を枠幅に均等に収めて左端切れを防ぐ */
.src-radios .radio,.form.compact .src-radios .radio{flex:1 1 0;min-width:0;justify-content:center;padding:5px 2px;font-size:11px;gap:2px;white-space:nowrap}
.src-radios .radio span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.src-radios .radio input{width:13px;height:13px;flex:none}
.radio:has(input:checked){border-color:var(--accent);background:rgba(88,166,255,.1);color:var(--accent)}
.hint{color:var(--muted);font-weight:400;display:block;margin-top:4px;font-size:12px}
.hint.nofield{margin:-6px 0 12px;font-size:11px}
h2.ph.mt{margin-top:20px}
.actions{display:flex;gap:8px;margin-top:5px}
.inline{display:inline;margin:0}
.tablewrap{overflow-x:auto}
/* 表の50件ずつページ送り（table-paginate.js／#47） */
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0 2px;flex-wrap:wrap}
.pager-info{font-size:13px;color:var(--muted);font-weight:700;min-width:130px;text-align:center}
.pager .btn{min-width:128px}
.pager .btn:disabled{opacity:.38;pointer-events:none}
table.list{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
table.list th{background:var(--surface2);color:var(--muted);text-align:left;font-weight:600;font-size:11px;padding:9px 11px;border-bottom:1px solid var(--border);white-space:nowrap;letter-spacing:.04em;text-transform:uppercase}
table.list td{padding:10px 11px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--ink)}
table.list tbody tr{cursor:pointer;transition:background .1s}
table.list tbody tr:hover{background:var(--surface2)}
.mono{font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.small{font-size:12px}
.strong{font-weight:700;color:var(--ink)}
.muted{color:var(--muted)}
.ok{color:var(--ok);font-weight:700}
.ellip{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty{color:#484f58;text-align:center;padding:40px}
.pre{white-space:pre-wrap}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.5}
.src-電話{background:rgba(88,166,255,.12);color:var(--accent)}
.src-メール{background:rgba(130,80,255,.12);color:#b084ff}
.src-LINE{background:rgba(63,185,80,.1);color:var(--ok)}
.st-新規,.st-受付中{background:rgba(88,166,255,.12);color:var(--accent)}
.st-対応中,.st-見積中{background:rgba(210,153,34,.1);color:var(--warn)}
.st-見積提出,.st-見積決定,.st-工事決定{background:rgba(130,80,255,.12);color:#b084ff}
.st-完了,.st-工事完了{background:rgba(63,185,80,.1);color:var(--ok)}
.st-キャンセル{background:var(--surface2);color:var(--muted)} /* 固定#484f58はダーク面で読めない(コントラスト1.9)→テーマ変数で両テーマ対応 */
.st-支払済{background:rgba(63,185,80,.08);color:#3fb950}
.st-l-受付中{border-left-color:var(--accent)}
.st-l-見積中{border-left-color:var(--warn)}
.st-l-見積決定,.st-l-工事決定{border-left-color:#b084ff}
.st-l-工事完了{border-left-color:var(--ok)}
.role-admin{background:#21262d;color:var(--ink);border:1px solid #484f58}
.role-operator{background:rgba(88,166,255,.12);color:var(--accent)}
.role-staff{background:rgba(63,185,80,.1);color:var(--ok)}
.role-accounting{background:rgba(210,153,34,.1);color:var(--warn)}
.badge.att{background:var(--accent-d);color:#fff}
.qitems{font-size:13px}
.qitems th{font-size:11px}
.qitems td{padding:5px 5px;vertical-align:middle}
.qitems input,.qitems select{margin-top:0;padding:5px 7px;font-size:13px;min-width:64px}
.qitems td:first-child input{min-width:160px}
.qitems .qsmall{width:62px;text-align:right;min-width:0}
.qitems .qamount{width:110px;text-align:right;min-width:0}
.qitems th.qc{width:74px}
.qtotals{margin:12px 0 4px}
.qsum{margin:10px 0 0 auto;border-collapse:collapse;min-width:240px}
.qsum th,.qsum td{padding:7px 12px;border-bottom:1px solid var(--border)}
.qsum th{text-align:left;color:var(--muted);font-weight:600}
.qsum td{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);min-width:130px}
.qsum tr.qtotal th{color:var(--ink);font-size:15px;font-weight:800}
.qsum tr.qtotal td{font-size:19px;color:var(--accent);border-bottom:none}
.billitems{font-size:12.5px}
.billitems th{font-size:10.5px;white-space:nowrap}
.billitems td{padding:4px 4px;vertical-align:middle}
.billitems input,.billitems select{margin-top:0;padding:5px 7px;font-size:14px;min-width:0}
/* 白ソフトテーマ(body.fdstaffmobile)が全要素・全inputの角丸を!importantで強制するため、台帳だけExcelと同じ四角に上書き */
.billitems th,.billitems td,.tablewrap .billitems input,.tablewrap .billitems select{border-radius:0!important}
.billitems .bnum{width:104px;text-align:right}
.billitems .bsmall{width:92px;text-align:right}
.billitems .bwide{width:110px}
.billitems .bno{width:64px}
.billitems input[readonly]{background:transparent!important;border-color:transparent!important;box-shadow:none!important;color:var(--ink);cursor:default}
.billitems .bdate{width:140px}
.billitems td.mono{text-align:right;white-space:nowrap}
.billitems tr.billtotal td{font-weight:700;border-top:2px solid var(--border2)}
/* 水道救急車 支給計算台帳の色（見本Excel「スイキュウへの請求」実測値：水色=accent5 60%／薄橙=accent2 60%／薄緑=accent6 60%） */
.bill-blue{background:#bdd7ee;color:#111}
.bill-orange{background:#f8cbad;color:#111}
.bill-green{background:#c5e0b4;color:#111}
.billitems th.bill-blue,.billitems td.bill-blue{background:#bdd7ee;color:#111}
.billitems th.bill-orange,.billitems td.bill-orange{background:#f8cbad;color:#111}
.billitems th.bill-green,.billitems td.bill-green{background:#c5e0b4;color:#111}
/* 水道救急車 請求台帳（見本Excelと同じ形・色。ダッシュボード用の縮小版＋印刷用にも共通で使う） */
table.mini-ledger{width:100%;border-collapse:collapse;font-size:11px}
table.mini-ledger th{background:var(--surface2);color:var(--ink);padding:4px 6px;font-weight:700;text-align:center;white-space:nowrap;border-radius:0;border:1px solid var(--border)}
table.mini-ledger th.bill-blue{background:#bdd7ee;color:#111}
table.mini-ledger th.bill-orange{background:#f8cbad;color:#111}
table.mini-ledger th.bill-green{background:#c5e0b4;color:#111}
table.mini-ledger td{border:1px solid var(--border);padding:4px 6px;text-align:right;white-space:nowrap;color:var(--ink);border-radius:0}
table.mini-ledger td.name{text-align:left}
table.mini-ledger td.bill-blue{background:#bdd7ee;color:#111}
table.mini-ledger td.bill-orange{background:#f8cbad;color:#111}
table.mini-ledger td.bill-green{background:#c5e0b4;color:#111}
table.mini-ledger tr.sub td{background:var(--surface2);font-weight:700}
table.mini-ledger tr.sub td.bill-blue{background:#bdd7ee;color:#111}
table.mini-ledger tr.sub td.bill-orange{background:#f8cbad;color:#111}
table.mini-ledger tr.sub td.bill-green{background:#c5e0b4;color:#111}
.cobadge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.5;background:var(--surface2);color:var(--muted);white-space:nowrap;border:1px solid var(--border)}
.co-生活ファクトリー{background:rgba(88,166,255,.12);color:var(--accent)}
.co-水道救急車{background:rgba(248,81,73,.1);color:var(--danger)}
.jobtags{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap}
.urg-通常{background:var(--surface2);color:var(--muted)}
.urg-お急ぎ{background:rgba(210,153,34,.1);color:var(--warn)}
.urg-大至急{background:rgba(248,81,73,.1);color:var(--danger)}
.req{display:inline-block;font-size:10px;font-weight:700;color:#fff;background:var(--danger);border-radius:2px;padding:1px 5px;margin-left:4px;vertical-align:middle}
.phrases{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 7px}
.chip{font:inherit;font-size:11px;font-weight:600;color:var(--ink);background:linear-gradient(180deg,var(--surface3),var(--surface2));border:1px solid var(--border);border-radius:999px;padding:5px 12px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.28);transition:transform .12s,box-shadow .12s,border-color .12s,background .12s,color .12s}
.chip:hover{border-color:var(--accent);color:var(--accent);background:linear-gradient(180deg,rgba(88,166,255,.18),rgba(88,166,255,.08));transform:translateY(-1px);box-shadow:0 4px 12px -4px rgba(88,166,255,.55)}
.chip:active{transform:translateY(0);box-shadow:0 1px 2px rgba(0,0,0,.28)}
/* お問い合わせ内容：見出しバーと「タグを編集」ボタン（見やすく） */
.ph-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 8px}
.ph-bar-label{font-size:12px;color:var(--muted);font-weight:600}
.ph-editbtn{font:inherit;font-size:13px;font-weight:700;color:var(--accent);background:rgba(88,166,255,.14);border:1px solid var(--accent);border-radius:4px;padding:6px 14px;cursor:pointer;white-space:nowrap}
.ph-editbtn:hover{background:var(--accent);color:#0d1117}
.ph-editbtn.on{color:#0d1117;background:var(--ok);border-color:var(--ok)}
/* 定型文：カテゴリ（トイレ/洗面/…）＋子項目 */
.phrases.ph-grouped{display:flex;flex-direction:column;align-items:stretch;gap:8px;max-height:220px;overflow-y:auto;margin:0 0 10px;padding:10px;background:linear-gradient(180deg,rgba(88,166,255,.05),transparent);border:1px solid var(--border);border-radius:6px}
.ph-cat{display:flex;align-items:center;gap:10px}
.ph-cat+.ph-cat{border-top:1px solid var(--border);padding-top:8px}
.ph-cat-name{flex:none;min-width:56px;font-size:11.5px;font-weight:800;color:var(--accent);text-align:center;background:rgba(88,166,255,.12);border:1px solid rgba(88,166,255,.28);border-radius:999px;padding:3px 10px;letter-spacing:.02em}
.ph-cat-items{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
/* 定型文：先頭のカテゴリタブ（押すと関連内容が出る） */
.ph-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:0 0 9px;border-bottom:1px solid var(--border)}
.ph-tab{font:inherit;font-size:12.5px;font-weight:800;color:var(--muted);background:linear-gradient(180deg,var(--surface3),var(--surface2));border:1px solid var(--border);border-radius:999px;padding:5px 15px;cursor:pointer;transition:transform .12s,box-shadow .12s,border-color .12s,background .12s,color .12s}
.ph-tab:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.ph-tab.on{background:linear-gradient(180deg,#79c0ff,var(--accent));border-color:var(--accent);color:#0d1117;box-shadow:0 3px 10px -3px rgba(88,166,255,.7)}
.ph-tab-items{min-height:38px}
/* 定型文タグの 追加（＋）／編集／削除 */
.chip-add{border-style:dashed;color:var(--accent);border-color:var(--accent);font-weight:800}
.chip-editing{border-style:dashed}
.chip-x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;border-radius:50%;background:rgba(248,81,73,.2);color:var(--danger);font-size:12px;line-height:1}
.chip-x:hover{background:var(--danger);color:#fff}
/* フォーム内の管理会社入力欄＝自動補完の位置決めラッパーのみ（琥珀ボックス装飾は消す） */
.pl-body .agency-box{background:none;border:none;padding:0;margin:0}
.radio.urg-大至急:has(input:checked){border-color:var(--danger);background:rgba(248,81,73,.1);color:var(--danger)}
.radio.urg-お急ぎ:has(input:checked){border-color:var(--warn);background:rgba(210,153,34,.1);color:var(--warn)}
.detail{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.readout{margin:0}
.readout div{display:flex;gap:12px;padding:7px 0;border-bottom:1px solid var(--border)}
.readout dt{flex:none;width:80px;color:var(--muted);font-size:12px}
.readout dd{margin:0;flex:1;font-size:13px}
dl.meta div,dl.readout div{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--border)}
dl.meta dt{width:70px;color:var(--muted);font-size:12px;flex:none}
dl.meta dd{margin:0;font-size:13px}
.note{color:var(--danger)}
.files{list-style:none;margin:0 0 12px;padding:0}
.files li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.fname{font-weight:600;font-size:13px}
.uploadrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.uploadrow select{width:auto}
.uploadrow input[type=file]{width:auto;flex:1;min-width:160px;border:1px dashed var(--border);background:var(--surface2)}
.ops{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pwform input{width:120px;margin:0}
.loginbody{background:#010409;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.logincard{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:0;width:100%;max-width:380px;box-shadow:0 30px 70px -20px rgba(0,0,0,.7);text-align:center;overflow:hidden}
/* カードの枠の中に貼り込む画像（GIF/写真） */
.login-banner{width:100%;height:160px;background:#0b1a2a;overflow:hidden}
.login-banner img{width:100%;height:100%;object-fit:cover;display:block}
.login-inner{padding:20px 30px 30px}
/* 最近の動き：管理会社名 */
.recent-agency{font-weight:400;font-size:11.5px;color:var(--warn);margin-top:2px}
/* 閲覧専用（最近の動き等から開いたとき） */
.ro-banner{display:flex;align-items:center;gap:12px;background:rgba(88,166,255,.1);border:1px solid rgba(88,166,255,.35);color:var(--accent);padding:11px 14px;border-radius:5px;margin:0 0 14px;font-size:13px;font-weight:700;flex-wrap:wrap}
.ro-banner .btn{margin-left:auto}
.ro-dim [disabled],.ro-dim input:disabled,.ro-dim select:disabled,.ro-dim textarea:disabled{opacity:.75;cursor:not-allowed}
/* 設定：ログイン画像の選択 */
.loginimg-row{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.loginimg-prev img{width:260px;height:130px;object-fit:cover;border-radius:5px;border:1px solid var(--border);display:block;background:#0b1a2a}
.loginimg-form{flex:1;min-width:260px}
@media(max-width:620px){.loginimg-prev img{width:100%;height:150px}}
.loginlogo{margin-bottom:8px}
.logincard h1{font-size:18px;margin:5px 0 1px;color:var(--ink)}
.logincard .sub{color:var(--muted);font-size:12px;margin:0 0 18px}
.logincard form{text-align:left}
.logincard label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:10px;letter-spacing:.04em}
.logincard label.remember{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--muted);cursor:pointer;margin:-2px 0 14px}
.logincard label.remember input{width:auto;margin:0;flex:none}
@media(max-width:760px){
.cards{grid-template-columns:1fr 1fr}
.detail{grid-template-columns:1fr}
.grid2{grid-template-columns:1fr}
.who{display:none}
.ellip{max-width:140px}
.wrap{padding:12px 12px 24px}
h1{font-size:17px}
.topbar{flex-wrap:wrap;height:auto;min-height:50px;padding:7px 12px;gap:7px}
.brand{font-size:14px}
.me{margin-left:auto;order:2;gap:8px}
/* ダーク側もナビの構成を統一：ボタンを均等に伸ばして整列（白いデザインと同じ並び方・触りやすい大きさ） */
.mainnav{order:3;width:100%;margin-left:0;gap:6px;overflow:visible;flex-wrap:wrap;padding-bottom:2px}
.mainnav::-webkit-scrollbar{height:0}
.navgroup-menu{min-width:170px}
.navgroup{width:auto;flex:1 1 auto;min-width:108px}
.navgroup-btn{width:100%;justify-content:center;padding:11px 8px;font-size:14px;white-space:nowrap;border:1px solid var(--border);border-radius:5px;background:var(--surface)}
.navgroup-btn.on{border-color:var(--accent)}
.mainnav > a{white-space:nowrap;flex:1 1 auto;min-width:84px;justify-content:center;text-align:center;padding:11px 8px;font-size:14px;border:1px solid var(--border);border-radius:5px;background:var(--surface);display:inline-flex;align-items:center;gap:4px}
.mainnav a.on{font-size:14px;font-weight:700;padding:11px 8px;border-radius:5px;border-color:var(--accent)}
.pagehead{gap:8px}
.head-right{gap:7px}
.headfield input{width:110px}
.headfield input[type=number]{width:64px}
}
@media(max-width:760px){
.grid3,.grid4{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
.grid2,.grid3,.grid4,.row-addr,.row-ag3,.row-ag4,.row-ids,.row-narrow{grid-template-columns:1fr;max-width:none}
.cards,.cards.cards4{grid-template-columns:1fr 1fr}
.ops{flex-wrap:wrap;gap:8px}
.uploadrow{flex-direction:column;align-items:stretch}
.uploadrow select,.uploadrow input[type=file]{width:100%}
}
/* ===== スタッフホーム：セクション・振込ステップ ===== */
.sec{margin:0 0 8px}
.sec-head{display:flex;align-items:center;gap:9px;margin:24px 0 12px}
.sec-head::before{content:"";width:4px;height:20px;border-radius:2px;flex:none;background:var(--border2)}
.sec-ico{font-size:16px;line-height:1}
.sec-ttl{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:.02em}
.sec-cnt{font-size:12px;font-weight:800;color:var(--muted);background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:2px 11px;line-height:1.5;font-variant-numeric:tabular-nums}
.sec-sub{font-size:12px;color:var(--muted);margin-left:auto}
.sec-today .sec-head::before{background:var(--accent)}
.sec-open .sec-head::before{background:var(--warn)}
.sec-furikomi .sec-head::before{background:var(--ok)}
.sec-furikomi .sec-ttl{color:var(--ok)}
.furikomi-block{background:rgba(63,185,80,.04);border:1px solid rgba(63,185,80,.22);border-radius:7px;padding:11px;margin:0 0 12px}
.furikomi-block .jobcard{margin:0;border-color:rgba(63,185,80,.18)}
.furikomi-steps{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:8px;margin-top:10px}
.fstep{background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:10px 11px;display:flex;flex-direction:column;gap:8px;justify-content:space-between}
.fstep-label{font-size:12px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:6px}
.fstep-no{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--border2);color:var(--ink);font-size:12px;font-weight:800;flex:none}
.fstep.todo{border-color:rgba(88,166,255,.4);background:rgba(88,166,255,.06)}
.fstep.todo .fstep-no{background:var(--accent);color:#0d1117}
.fstep.done{border-color:rgba(63,185,80,.35);background:rgba(63,185,80,.08)}
.fstep.done .fstep-no{background:var(--ok);color:#0d1117}
.fstep-state{font-size:14px;font-weight:800;color:var(--ok);display:flex;align-items:center;gap:5px}
.fstep-state.wait{font-size:12px;font-weight:600;color:var(--muted)}
.fstep .btn{height:36px;font-size:12px}
.fstep-arrow{display:flex;align-items:center;color:var(--muted);font-size:18px;font-weight:800}
@media(max-width:520px){
.furikomi-steps{grid-template-columns:1fr;gap:6px}
.fstep-arrow{justify-content:center;transform:rotate(90deg);font-size:15px}
}
.monthbox .monthttl{color:var(--accent)}
/* ジョブカード：電話番号を白・対応するボタンを強調 */
.jobtel{color:var(--ink)!important}
.jobtel:hover{color:#fff!important}
.jobopen{display:inline-flex;align-items:center;gap:6px;background:var(--accent-d);color:#fff;font-weight:700;font-size:13px;padding:7px 14px;border-radius:4px;white-space:nowrap}
.jobcard:hover .jobopen{background:var(--accent);color:#0d1117}
.jobopen-arrow{font-size:15px;font-weight:800;transition:transform .12s}
.jobcard:hover .jobopen-arrow{transform:translateX(3px)}
/* ジョブカード：住所・内容・ふりがな・郵便番号を白に */
.jobaddr{color:var(--ink)}
.jobaddr .muted{color:var(--ink)}
.jobcontent{color:var(--ink)}
.jobkana{color:var(--ink)}
/* ジョブカード：日付を白に */
.jobwhen{color:var(--ink)}
/* 振込待ち：清算方法ごとのアクション */
.furikomi-action{margin-top:10px;padding-top:10px;border-top:1px solid rgba(63,185,80,.18)}
.furikomi-action .fstep-state{justify-content:center;padding:6px 0}
.furikomi-action .fstep-state.wait{font-size:13px}
/* 振込待ち：合計金額（白） */
.furikomi-total{margin-left:auto;font-size:18px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.01em}
/* 送金総合金額ラベル＋見出し折り返し */
.sec-head{flex-wrap:wrap}
.furikomi-total-lbl{font-size:12px;font-weight:700;color:var(--muted);margin-right:8px}
/* 金額欄は半角・メモ欄は全角IMEに（Windows向け ime-mode） */
.numfield{ime-mode:disabled}
input[type=number]{ime-mode:disabled}
.jpfield{ime-mode:active}
/* 上部ナビ（ホーム〜グラフ）・挨拶文を白に */
.mainnav a{color:#fff}
.mainnav a:hover{color:#fff}
.homebtn{color:#fff}
.homebtn:hover{color:#fff}
.greet{color:#fff}
.greet strong{color:#fff}
/* 「○○画面」役割バッジを大きく・はっきり（全役割・全ページ共通） */
.rolechip{font-size:14px;font-weight:800;padding:7px 16px;border-radius:5px;border:none;letter-spacing:.04em;box-shadow:0 2px 8px -2px rgba(0,0,0,.5)}
.rc-admin{background:#e6edf3;color:#0d1117}
.rc-operator{background:var(--accent);color:#0d1117}
.rc-staff{background:var(--ok);color:#0d1117}
.rc-accounting{background:var(--warn);color:#0d1117}
@media(max-width:760px){.rolechip{font-size:13px;padding:6px 13px}}
/* 案件カード：PCでは件数が少ないとき横いっぱいに大きく（小窓化を防ぐ） */
.jobs{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
/* 管理設定：DB保存・復元 */
.settings-db{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:14px 16px}
.sdb-ok{font-size:15px;font-weight:800;color:var(--ok)}
.sdb-none{font-size:15px;font-weight:800;color:var(--warn)}
.sdb-actions{display:flex;gap:10px;flex-wrap:wrap}
.settings-db code,.panel code{background:var(--surface3);border:1px solid var(--border);border-radius:3px;padding:1px 6px;font-size:12px;color:var(--accent)}
.btn:disabled{opacity:.4;cursor:not-allowed}
/* ===== 担当者ホーム：7カテゴリ件数グリッド ===== */
.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 14px}
/* ダッシュボードの案件クイック検索（#60）＝ホームからすぐ案件を探す（/cases?q= へ） */
.dash-quicksearch{display:flex;gap:8px;margin:0 0 14px;max-width:580px}
.dash-quicksearch input{flex:1 1 auto;min-width:0;background:var(--surface2);color:var(--ink);border:1px solid var(--border);border-radius:5px;padding:10px 14px;font:inherit;font-size:14px}
.dash-quicksearch input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px rgba(88,166,255,.22)}
.dash-quicksearch .btn{flex:0 0 auto}
/* 設定の目次（カテゴリ別・#設定整理） */
.set-toc{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:14px 16px;margin:0 0 18px}
.set-toc-h{font-size:15px;font-weight:800;color:var(--accent);margin-bottom:12px}
.set-toc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.set-toc-cat{background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:11px 13px}
.set-toc-ct{font-weight:800;font-size:13.5px;color:var(--ink);margin-bottom:3px}
.set-toc-cd{font-size:12px;color:var(--muted);margin-bottom:8px;line-height:1.55}
.set-toc-cat a{display:block;font-size:13px;color:var(--accent);padding:5px 0;text-decoration:none;border-top:1px solid var(--border)}
.set-toc-cat a:hover{color:#79c0ff;text-decoration:underline}
.set-toc-tech{opacity:.92}
.set-toc-tech .set-toc-ct{color:var(--muted)}
/* 説明ツールチップ ON/OFF（設定項目に data-tip・body.set-tips のとき表示） */
.set-tip-toggle{float:right;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.set-tip-toggle input{width:15px;height:15px;cursor:pointer}
/* 浮遊ツールチップ（body直下・position:fixed＝GridStackのoverflowで切れない） */
.set-tip-pop{position:fixed;z-index:9999;background:var(--surface3);color:var(--ink);border:1px solid var(--border2);border-radius:4px;padding:8px 11px;font-size:12.5px;font-weight:500;line-height:1.65;max-width:300px;white-space:normal;box-shadow:0 12px 34px -8px rgba(0,0,0,.8);pointer-events:none}
.set-switch{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;cursor:pointer;font-weight:600}
.set-switch input{width:19px;height:19px;cursor:pointer}
/* 設定の選択フィールド（消費税率・自動更新・新規案件保持 など） */
.set-field label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.set-field select{background:var(--surface2);color:var(--ink);border:1px solid var(--border);border-radius:4px;padding:9px 13px;font:inherit;font-size:14px;min-width:210px;cursor:pointer}
.set-field select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px rgba(88,166,255,.22)}
.set-saved{margin-left:10px;font-size:12.5px;font-weight:700;color:var(--ok);opacity:0;transition:opacity .2s}
.set-saved.on{opacity:1}
.set-field input[type=number],.set-field input[type=date]{background:var(--surface2);color:var(--ink);border:1px solid var(--border);border-radius:4px;padding:9px 12px;font:inherit;font-size:14px}
.set-field input[type=number]{width:92px}
.set-field input[type=number]:focus,.set-field input[type=date]:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px rgba(88,166,255,.22)}
.taxrate-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.taxrate-pct{font-weight:700;color:var(--ink)}
.taxrate-quick{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.set-range{width:260px;max-width:100%;accent-color:var(--accent);cursor:pointer;vertical-align:middle}
/* 目次から飛んだとき、見出しが上のバーに隠れないように余白 */
[id^="set-"],#setup{scroll-margin-top:74px}
/* 状態カード：色は --cat に集約（デザイン選択 #55 で使い回す）。既定デザイン=bar（左の色帯＋色つき数字） */
.catchip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--cat,var(--border2));border-radius:5px;padding:11px 6px;color:var(--ink);transition:background .12s,border-color .12s}
.catchip:hover{text-decoration:none;background:var(--surface2);border-color:var(--border2)}
.cat-n{font-size:22px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--cat,var(--ink))}
.cat-l{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap}
.catchip.cat-新規案件{--cat:var(--accent)}
.catchip.cat-電話済み{--cat:#56d4dd}
.catchip.cat-見積中{--cat:var(--warn)}
.catchip.cat-工事決定{--cat:#b084ff}
.catchip.cat-工事完了{--cat:var(--ok)}
.catchip.cat-支払済{--cat:#3fb950}
.catchip.cat-電話パス{--cat:var(--danger)}
.catchip.cat-訪問パス{--cat:var(--danger)}
/* ===== 担当者別の流れ表（staff-flow パーツ）20260721 ===== */
.sf-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sf-tools{display:flex;align-items:center;gap:7px;flex:none}
.sf-stylesel{font-size:12px;font-weight:700;color:var(--ink);background:var(--surface2);border:1px solid var(--border);border-radius:0;padding:4px 8px;cursor:pointer}
.sf-modebtn{flex:none;font-size:12px;font-weight:700;color:var(--ink);background:var(--surface2);border:1px solid var(--border);border-radius:0;padding:4px 12px;cursor:pointer;white-space:nowrap}
.sf-modebtn:hover,.sf-stylesel:hover{border-color:var(--accent);color:var(--accent)}
.sf-root.sf-compact .sf-mode-d,.sf-root:not(.sf-compact) .sf-mode-c{display:none}
.sf-root.sf-compact .sf-detail{display:none}
.sf-bar{display:none}
.sf-root.sf-compact[data-sfstyle="bar"] .sf-bar{display:block}
/* 見た目デザインの凡例（積み上げ帯のときだけ表示） */
.sf-legend{display:none;flex-wrap:wrap;gap:6px 12px;margin-top:9px;font-size:11px;color:var(--muted)}
.sf-legend span{display:inline-flex;align-items:center;gap:4px}
.sf-legend i{width:10px;height:10px;background:var(--cat);display:inline-block}
.sf-root[data-sfstyle="funnel"] .sf-legend{display:flex}
/* ==== 見た目デザイン9種（data-sfstyleで切替） ==== */
.sf-root[data-sfstyle="solid"] .sf-card{background:var(--cat);box-shadow:none;color:#fff}
.sf-root[data-sfstyle="solid"] .sf-n{color:#fff}
.sf-root[data-sfstyle="solid"] .sf-today{background:rgba(0,0,0,.28);color:#fff;border-color:transparent}
.sf-root[data-sfstyle="outline"] .sf-card{background:transparent;box-shadow:inset 0 0 0 1.5px var(--cat);color:var(--ink)}
.sf-root[data-sfstyle="outline"] .sf-n{color:var(--cat)}
.sf-root[data-sfstyle="heat"] .sf-card{background:var(--sfheat);box-shadow:none;color:var(--ink)}
.sf-root[data-sfstyle="heat"] .sf-n{color:var(--ink)}
.sf-root[data-sfstyle="bar"] .sf-card{background:transparent;box-shadow:none}
.sf-root[data-sfstyle="bar"] .sf-n{color:var(--ink)}
.sf-root[data-sfstyle="dot"] .sf-card{background:transparent;box-shadow:none;padding-left:6px}
.sf-root[data-sfstyle="dot"] .sf-top{justify-content:flex-start;gap:5px}
.sf-root[data-sfstyle="dot"] .sf-top::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--cat)}
.sf-root[data-sfstyle="dot"] .sf-n{color:var(--ink)}
.sf-root[data-sfstyle="mono"] .sf-card{background:var(--surface2);box-shadow:none;color:var(--ink)}
.sf-root[data-sfstyle="mono"] .sf-n{color:var(--ink)}
.sf-root[data-sfstyle="mono"] .sf-card::after{content:"";display:block;width:15px;height:3px;background:var(--cat);margin-top:2px}
.sf-root[data-sfstyle="ring"] .staffflow td.sf-c{text-align:center;min-width:44px}
.sf-root[data-sfstyle="ring"] .sf-card{width:34px;height:34px;min-width:0;border-radius:50%;padding:0;background:conic-gradient(var(--cat) var(--sfdeg),var(--surface3) 0);box-shadow:none;align-items:center;justify-content:center;position:relative;margin:0 auto}
.sf-root[data-sfstyle="ring"] .sf-card::before{content:"";position:absolute;inset:5px;background:var(--surface);border-radius:50%}
.sf-root[data-sfstyle="ring"] .sf-top{position:relative;z-index:1;justify-content:center}
.sf-root[data-sfstyle="ring"] .sf-n{color:var(--ink);font-size:12px}
.sf-root[data-sfstyle="ring"] .sf-today,.sf-root[data-sfstyle="ring"] .sf-detail{display:none}
.sf-root[data-sfstyle="funnel"] .staffflow thead{display:none}
.sf-root[data-sfstyle="funnel"] .staffflow tbody tr{display:flex;align-items:stretch}
.sf-root[data-sfstyle="funnel"] .staffflow td.sf-name{flex:0 0 88px;position:static;display:flex;align-items:center}
.sf-root[data-sfstyle="funnel"] .staffflow td.sf-c{flex:var(--sfn,0) 1 0;min-width:0;padding:3px 1px}
.sf-root[data-sfstyle="funnel"] .staffflow td.sf-c[style*="--sfn:0"]{padding:0;flex:0}
.sf-root[data-sfstyle="funnel"] .sf-card{width:100%;height:24px;flex-direction:row;align-items:center;justify-content:center;background:var(--cat);box-shadow:none;color:#fff;padding:0}
.sf-root[data-sfstyle="funnel"] .sf-n{color:#fff;font-size:11px}
.sf-root[data-sfstyle="funnel"] .sf-today,.sf-root[data-sfstyle="funnel"] .sf-bar,.sf-root[data-sfstyle="funnel"] .sf-detail{display:none}
.staffflow{width:100%;border-collapse:separate;border-spacing:0}
.staffflow th,.staffflow td{padding:5px 6px;border-bottom:1px solid var(--border)}
.staffflow thead th{position:sticky;top:0;z-index:2;background:var(--surface);font-size:11px;font-weight:700;color:var(--muted);text-align:center;white-space:nowrap}
.staffflow th.sf-h{box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--cat,var(--border)) 55%,var(--border));color:color-mix(in srgb,var(--cat,var(--ink)) 70%,var(--ink))}
.staffflow th.sf-namehead{text-align:left}
.staffflow td.sf-name{text-align:left;font-weight:700;color:var(--ink);white-space:nowrap;position:sticky;left:0;background:var(--surface);z-index:1}
.staffflow td.sf-c{text-align:center;vertical-align:top;min-width:52px}
.staffflow td.sf-c-names{text-align:left;min-width:92px}
.staffflow td.sf-c-names .sf-card{width:100%}
.staffflow tr:hover td{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.staffflow tr:hover td.sf-name{background:color-mix(in srgb,var(--ink) 5%,var(--surface))}
.staffflow tr.sf-inactive td.sf-name{color:var(--muted);font-weight:600}
.sf-card{display:flex;flex-direction:column;align-items:stretch;gap:3px;width:100%;min-width:34px;padding:4px 8px 5px 9px;border-radius:0;text-align:left;line-height:1.3;text-decoration:none;color:var(--ink);background:color-mix(in srgb,var(--cat) 12%,var(--surface));box-shadow:inset 3px 0 0 var(--cat);transition:background .12s,box-shadow .12s}
.sf-card:hover{background:color-mix(in srgb,var(--cat) 20%,var(--surface));box-shadow:inset 3px 0 0 var(--cat),0 2px 8px color-mix(in srgb,var(--cat) 22%,transparent)}
.sf-top{display:flex;align-items:center;justify-content:space-between;gap:5px}
.sf-n{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;color:color-mix(in srgb,var(--cat) 55%,var(--ink))}
.sf-today{font-size:10px;font-weight:800;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);padding:0 4px;white-space:nowrap}
.sf-bar{height:4px;background:var(--surface3)}
.sf-bar>i{display:block;height:100%;background:var(--cat)}
.sf-names{display:flex;flex-flow:row wrap;gap:3px 4px;min-width:0}
.sf-nm{font-size:11px;font-weight:600;white-space:nowrap;color:var(--ink);background:var(--surface3);border:1px solid var(--border);padding:0 5px;line-height:1.6}
.staffflow td.sf-c-names,.staffflow td.sf-c-done{text-align:left}
.sf-root:not(.sf-compact) .staffflow td.sf-c-names{min-width:92px}
.sf-root:not(.sf-compact) .staffflow td.sf-c-done{min-width:210px}
.sf-donebody{display:flex;flex-direction:column;gap:3px}
.sf-drow{display:flex;flex-flow:row wrap;align-items:baseline;gap:1px 7px;font-size:11px;font-weight:600;color:var(--ink)}
.sf-dm{font-weight:800;min-width:34px;color:var(--muted)}
.sf-din{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ok)}
.sf-dout{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,var(--surface));padding:0 4px}
body.fdstaffmobile .sf-card,body.fdstaffmobile.fdgoldui .sf-card{border-radius:0!important}
.sf-h.cat-新規案件,.sf-card.cat-新規案件{--cat:var(--accent)}
.sf-h.cat-電話済み,.sf-card.cat-電話済み{--cat:#56d4dd}
.sf-h.cat-見積中,.sf-card.cat-見積中{--cat:var(--warn)}
.sf-h.cat-工事決定,.sf-card.cat-工事決定{--cat:#b084ff}
.sf-h.cat-工事完了,.sf-card.cat-工事完了{--cat:var(--ok)}
.sf-h.cat-電話パス,.sf-card.cat-電話パス{--cat:var(--danger)}
.sf-h.cat-訪問パス,.sf-card.cat-訪問パス{--cat:var(--danger)}
/* ===== 状態カードのデザイン選択（#55・data-kpi-styleで切替）。db.js DASH_KPI_STYLES と一致させること ===== */
[data-kpi-style="fill"] .catchip{border-left-width:1px;border-color:color-mix(in srgb,var(--cat) 35%,transparent);background:color-mix(in srgb,var(--cat) 12%,var(--surface))}
[data-kpi-style="outline"] .catchip{border:1.5px solid var(--cat);background:var(--surface)}
[data-kpi-style="solid"] .catchip{border-color:var(--cat);background:var(--cat)}
[data-kpi-style="solid"] .catchip .cat-n{color:#fff}
[data-kpi-style="solid"] .catchip .cat-l{color:rgba(255,255,255,.92)}
[data-kpi-style="top"] .catchip{border-left:1px solid var(--border);border-top:3px solid var(--cat)}
[data-kpi-style="plain"] .catchip{border-left:1px solid var(--border)}
[data-kpi-style="plain"] .catchip .cat-n{color:var(--ink)}
[data-kpi-style="badge"] .catchip{border-left:1px solid var(--border);gap:5px}
[data-kpi-style="badge"] .catchip .cat-n{background:var(--cat);color:#fff;min-width:40px;height:40px;padding:0 8px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:18px}
[data-kpi-style="grad"] .catchip{border-left-width:1px;border-color:color-mix(in srgb,var(--cat) 30%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--cat) 24%,var(--surface)),var(--surface))}
@media(max-width:760px){.catgrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:430px){.catgrid{grid-template-columns:repeat(3,1fr)}.cat-n{font-size:19px}}
.mc-n.send{color:var(--accent)}
/* 新ステータスのバッジ色 */
.st-新規案件{background:rgba(88,166,255,.12);color:var(--accent)}
.st-電話済み{background:rgba(86,212,221,.12);color:#56d4dd}
.st-訪問パス{background:rgba(248,81,73,.1);color:var(--danger)}
.st-l-新規案件{border-left-color:var(--accent)}
.st-l-電話済み{border-left-color:#56d4dd}
.st-l-訪問パス{border-left-color:var(--danger)}
/* 案件詳細 6→7グリッドの新カテゴリ選択色 */
.six-st:has(input[value="新規案件"]:checked){background:rgba(88,166,255,.12);border-color:rgba(88,166,255,.4)}
.six-st:has(input[value="新規案件"]:checked) .six-name{color:var(--accent)}
.six-st:has(input[value="電話済み"]:checked){background:rgba(86,212,221,.12);border-color:rgba(86,212,221,.4)}
.six-st:has(input[value="電話済み"]:checked) .six-name{color:#56d4dd}
.six-st:has(input[value="訪問パス"]:checked){background:rgba(248,81,73,.1);border-color:rgba(248,81,73,.4)}
.six-st:has(input[value="訪問パス"]:checked) .six-name{color:var(--danger)}
/* 分析グラフ：12種から選択 */
.graphpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.gp-item{display:flex;align-items:center;gap:7px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:7px 10px;cursor:pointer;font-size:12px;font-weight:600;color:var(--ink);margin:0}
.gp-item input{width:auto;margin:0;flex:none}
.gp-item:has(input:checked){border-color:var(--accent);background:rgba(88,166,255,.1);color:var(--accent)}
.charts .chartcard.wide{grid-column:1/-1}
/* オペレーター：未割当案件リスト */
.unassigned-panel{border-left:3px solid var(--warn)}
.unassigned-list{display:flex;flex-direction:column;gap:10px}
/* 担当者未割当＝かっこいいカード＋担当者の色アバターを押して「飛ばす」 */
.unassigned-row{display:flex;flex-direction:column;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:13px 16px;color:var(--ink);transition:border-color .16s ease,box-shadow .18s ease,transform .14s ease}
.unassigned-row:hover{text-decoration:none;border-color:var(--accent);transform:translateY(-1px);box-shadow:0 0 0 1px rgba(88,166,255,.22),0 14px 34px -18px rgba(88,166,255,.55)}
.ua-main{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ua-no{color:var(--muted);font-size:11px;font-weight:700;flex:none;background:var(--surface3);border-radius:3px;padding:2px 7px;font-family:ui-monospace,Consolas,monospace}
.ua-cust{font-weight:800;font-size:15px;flex:none;color:var(--ink);letter-spacing:.01em}
.ua-cust:hover,.ua-no:hover,.ua-content:hover{color:var(--accent);text-decoration:none}
.ua-content{flex:1;min-width:40px;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 担当者を選んで飛ばす＝アクセント色のクールなピル型セレクト（何人いてもスクロールで対応） */
.ua-assign{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ua-assign-label{font-size:11.5px;color:var(--muted);font-weight:800;flex:none;letter-spacing:.02em}
.ua-assign select{appearance:none;-webkit-appearance:none;min-width:200px;max-width:320px;height:40px;margin:0;padding:0 38px 0 16px;border-radius:999px;border:1.5px solid var(--accent);color:var(--accent);font-weight:800;font-size:13px;cursor:pointer;background-color:rgba(88,166,255,.1);background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 14px center;transition:background-color .15s ease,box-shadow .15s ease,transform .12s ease}
.ua-assign select:hover{background-color:rgba(88,166,255,.2);transform:translateY(-1px)}
.ua-assign select:focus{outline:none;box-shadow:0 0 0 3px rgba(88,166,255,.28)}
.ua-assign select option{background:var(--surface);color:var(--ink);font-weight:600}
.btnsm{height:34px;padding:0 20px;font-size:13px;flex:none}
.ua-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:12px;color:var(--muted);margin-top:2px}
.ua-m{display:inline-flex;align-items:center;gap:5px;background:var(--surface3);border:1px solid var(--border);border-radius:4px;padding:2px 9px}
.ua-m.mono{white-space:nowrap;font-family:ui-monospace,Consolas,monospace}
.ua-addr{min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:620px){.ua-meta{gap:4px 6px}.ua-addr{white-space:normal}.ua-content{flex:1 1 100%;order:5;white-space:normal}}
/* 割り当てログ */
.assignlog{background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:12px 14px;margin:0 0 14px}
.assignlog-ttl{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.assignlog-row{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid var(--border)}
.assignlog-row:last-child{border-bottom:none}
.al-act{font-size:11px;font-weight:800;border-radius:3px;padding:2px 8px;flex:none}
.al-送信{background:rgba(88,166,255,.15);color:var(--accent)}
.al-変更{background:rgba(210,153,34,.15);color:var(--warn)}
.al-to{font-weight:700}
.al-meta{margin-left:auto}
/* 経理：未回収の色 */
.kpi-n.unc{color:var(--danger)}
td.unc,.unc{color:var(--danger);font-weight:700}
/* 経理レビュー：写真ズーム */
.rev-photos{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.zoomwrap{position:relative;width:160px;height:160px;overflow:hidden;border:1px solid var(--border);border-radius:5px;background:#010409}
.zoomtag{position:absolute;top:6px;left:6px;z-index:2;background:var(--accent-d);color:#fff;font-size:10px;font-weight:700;border-radius:3px;padding:2px 7px}
.zoomimg{width:100%;height:100%;object-fit:cover;cursor:zoom-in;transition:transform .05s linear;transform-origin:center center;display:block;will-change:transform}
.zoomimg.grabbing{cursor:grabbing}
/* 管理ダッシュボード */
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:6px;box-shadow:0 0 0 0 rgba(63,185,80,.6);animation:livepulse 1.8s infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(63,185,80,.5)}70%{box-shadow:0 0 0 7px rgba(63,185,80,0)}100%{box-shadow:0 0 0 0 rgba(63,185,80,0)}}
.adm-alert{display:block;background:rgba(210,153,34,.1);border:1px solid rgba(210,153,34,.35);color:var(--warn);border-radius:5px;padding:11px 16px;margin:0 0 16px;font-weight:600;font-size:14px}
.adm-alert:hover{text-decoration:none;background:rgba(210,153,34,.16)}
.adm-alert strong{color:#f0c860}
.adm-menu{display:flex;flex-direction:column;gap:8px}
.adm-menu .btn{justify-content:flex-start}
/* 担当者ホーム：件数を1列（1行）に。狭い画面は横スクロール */
.catgrid.onerow{display:flex;gap:8px;grid-template-columns:none;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.catgrid.onerow::-webkit-scrollbar{height:0}
.catgrid.onerow .catchip{flex:1 0 auto;min-width:96px}
@media(max-width:430px){.catgrid.onerow .catchip{min-width:84px}.catgrid.onerow .cat-n{font-size:19px}}
/* 件数7つを1行に全部収める（横スクロールなし） */
.catgrid.onerow{overflow-x:visible;gap:6px}
.catgrid.onerow .catchip{flex:1 1 0;min-width:0;padding:9px 3px}
.catgrid.onerow .cat-l{font-size:10px;white-space:normal;line-height:1.2}
.catgrid.onerow .cat-n{font-size:18px}
/* 狭い画面では白いデザインと同じ4列×2段に揃える（ダーク側もまとまりよく） */
@media(max-width:760px){
.catgrid.onerow{display:grid;grid-template-columns:repeat(4,1fr);row-gap:6px;column-gap:8px}
.catgrid.onerow .catchip{padding:11px 4px}
.catgrid.onerow .cat-n{font-size:24px}
.catgrid.onerow .cat-l{font-size:11px}
}
/* 今月の集計の金額を白に */
.monthrow .mc-n,.monthrow .mc-n.pay,.monthrow .mc-n.send,.monthrow .mc-n.exp{color:#fff}
/* 件数カテゴリのラベルを白に */
.catchip .cat-l{color:#fff}
/* 担当者ホーム：電話パス・訪問パス セクション */
.sec-pass .sec-head::before{background:var(--danger)}
.sec-pass .sec-ttl{color:var(--danger)}
/* 担当者ホーム：カテゴリ別セクションの色 */
.sec-cat-新規案件 .sec-head::before{background:var(--accent)} .sec-cat-新規案件 .sec-ttl{color:var(--accent)}
.sec-cat-電話済み .sec-head::before{background:#56d4dd} .sec-cat-電話済み .sec-ttl{color:#56d4dd}
.sec-cat-見積中 .sec-head::before{background:var(--warn)} .sec-cat-見積中 .sec-ttl{color:var(--warn)}
.sec-cat-工事決定 .sec-head::before{background:#b084ff} .sec-cat-工事決定 .sec-ttl{color:#b084ff}
.empty.small{padding:14px;font-size:13px}
/* カテゴリ→セクションへスライド：上に余白・移動先を一瞬ハイライト */
.sec{scroll-margin-top:14px}
.sec-flash{animation:secflash 1.1s ease}
@keyframes secflash{0%{background:rgba(88,166,255,.16)}100%{background:transparent}}
.sec-flash{border-radius:6px}
/* 掛け率など変更不可の表示欄 */
.wa-fixed{height:40px;display:flex;align-items:center;padding:0 11px;border:1px dashed var(--border);border-radius:4px;background:var(--surface3);color:var(--accent);font-weight:800;font-size:16px;font-variant-numeric:tabular-nums;margin-top:4px;cursor:not-allowed;user-select:none}
/* 自動保存インジケーター */
.autosave{margin-top:14px;text-align:center;font-size:13px;font-weight:700;border-radius:5px;padding:11px;border:1px solid var(--border);background:var(--surface2);color:var(--muted)}
.autosave.saving{color:var(--warn);border-color:rgba(210,153,34,.35);background:rgba(210,153,34,.08)}
.autosave.ok{color:var(--ok);border-color:rgba(63,185,80,.35);background:rgba(63,185,80,.1)}
.autosave.err{color:var(--danger);border-color:rgba(248,81,73,.35);background:rgba(248,81,73,.1)}
/* お客様情報：ふりがな・住所を白に */
.cdb-kana{color:#fff}
.cdb-addr,.cdb-addr.muted{color:#fff}
/* お客様情報：電話番号・携帯番号を白に */
.cdb-contact .callbtn{color:#fff}
.cdb-contact .callbtn:hover{color:#fff}
.cdb-contact .maplink{color:#fff;font-size:14px;font-weight:700}
.cdb-contact .maplink:hover{color:#fff}
/* お客様情報：電話番号を大きく・緑の箱なし・触れると文字色が変わる（タップで発信） */
.cdb-contact{flex-direction:column;gap:4px;align-items:flex-start;margin-top:8px}
.cdb-contact .callbtn{display:inline-flex;align-items:center;gap:8px;width:auto;font-size:21px;font-weight:800;color:#fff;background:none;border:none;border-radius:0;padding:3px 0;letter-spacing:.02em;transition:color .12s}
.cdb-contact .callbtn:hover{color:var(--ok);background:none;text-decoration:none}
.cdb-contact .callbtn:active{color:#3fb950}
/* 税理士用資料：ツールバー */
.taxbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.taxperiod{display:flex;align-items:center;gap:8px}
.taxperiod select{width:auto;min-width:130px}
.taxdl{display:flex;gap:8px;flex-wrap:wrap}
@media print{
.topstrip,.topbar,.taxbar,.foot,.pagehead a{display:none!important}
body{background:#fff;color:#000}
.panel{border:1px solid #ccc;background:#fff}
table.list th,table.list td{color:#000}
}
/* 税理士資料：暗証番号入力 */
.pinpanel{max-width:420px;margin:30px auto;text-align:center}
.pin-ico{font-size:40px;margin-bottom:6px}
.pin-ttl{font-size:17px;color:var(--ink);margin:0 0 6px}
.pin-form{margin-top:6px}
.pin-input{text-align:center;font-size:26px;font-weight:800;letter-spacing:.4em;padding:12px}
/* レシート写真 A4印刷 */
.rc-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.rc-toolbar > div{display:flex;align-items:center;gap:12px}
.rc-sheet{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rc-card{border:1px solid var(--border);border-radius:5px;overflow:hidden;background:var(--surface)}
.rc-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;background:var(--surface2);border-bottom:1px solid var(--border);font-size:12px}
.rc-date{font-weight:800;color:var(--ink)}
.rc-type{background:var(--accent-d);color:#fff;border-radius:3px;padding:1px 7px;font-size:11px;font-weight:700}
.rc-cust{color:var(--ink)}
.rc-amt{margin-left:auto;font-weight:800;color:var(--warn)}
.rc-imgwrap{background:#010409;display:flex;align-items:center;justify-content:center}
.rc-img{width:100%;max-height:260px;object-fit:contain;display:block}
@media(max-width:640px){.rc-sheet{grid-template-columns:1fr}}
@media print{
@page{size:A4;margin:10mm}
.topstrip,.topbar,.foot,.rc-toolbar,.rc-head a{display:none!important}
body{background:#fff;color:#000}
.wrap{max-width:none;padding:0}
.rc-head h1{font-size:14px;margin:0 0 4mm;color:#000}
.rc-sheet{display:grid;grid-template-columns:1fr 1fr;gap:6mm}
.rc-card{border:1px solid #999;break-inside:avoid;page-break-inside:avoid}
.rc-meta{background:#f0f0f0;color:#000;border-bottom:1px solid #999}
.rc-date,.rc-cust{color:#000}
.rc-type{background:#444;color:#fff}
.rc-amt{color:#000}
.rc-imgwrap{background:#fff}
.rc-img{max-height:110mm}
}
/* レシートをまとめて密に並べる（案件ごとに大きく分けない） */
.rc-sheet{grid-template-columns:repeat(3,1fr);gap:8px}
.rc-meta{padding:4px 7px;font-size:10px;gap:5px}
.rc-img{max-height:190px}
@media(max-width:640px){.rc-sheet{grid-template-columns:1fr 1fr}}
@media print{
.rc-sheet{grid-template-columns:repeat(3,1fr)!important;gap:4mm!important}
.rc-img{max-height:78mm!important}
.rc-meta{font-size:8pt!important;padding:1mm 2mm!important}
}
/* その月のレシートをなるべく詰めて4列で並べる */
.rc-sheet{grid-template-columns:repeat(4,1fr);gap:6px}
.rc-meta{padding:3px 6px;font-size:9px;gap:5px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
.rc-ref{color:var(--muted)}
.rc-img{max-height:150px}
@media(max-width:760px){.rc-sheet{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.rc-sheet{grid-template-columns:1fr 1fr}}
@media print{
.rc-sheet{grid-template-columns:repeat(4,1fr)!important;gap:3mm!important}
.rc-img{max-height:58mm!important}
.rc-meta{font-size:7pt!important;padding:.5mm 1.5mm!important}
}
/* 印刷／PDF 実行確認モーダル */
.modal-back{position:fixed;inset:0;background:rgba(1,4,9,.7);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px}
.modal{background:var(--surface);border:1px solid var(--border2);border-radius:7px;padding:24px;max-width:380px;width:100%;text-align:center;box-shadow:0 30px 70px -20px rgba(0,0,0,.7)}
.modal-ico{font-size:36px;margin-bottom:4px}
.modal h3{margin:0 0 8px;color:var(--ink);font-size:17px}
.modal-actions{display:flex;gap:10px;justify-content:center;margin-top:18px}
.modal-actions .btn{min-width:120px}
@media print{.modal-back{display:none!important}}
/* 経理レビュー：状態（変更不可）＋確認/入金ボタン */
.rev-statusbox{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:8px 11px;margin-bottom:12px}
.rev-status-lbl{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.04em}
.rev-flags{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.rev-flags .btn{justify-content:flex-start}
.flag-done{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:rgba(63,185,80,.1);border:1px solid rgba(63,185,80,.35);border-radius:4px;padding:9px 12px;font-size:13px;font-weight:700;color:var(--ok)}
.flag-done.approved{background:rgba(88,166,255,.1);border-color:rgba(88,166,255,.35);color:var(--accent)}
.flag-done .linkbtn{margin-left:auto;color:var(--muted)}
.flag-done form.inline{margin-left:auto}
/* 案件詳細：経理ステータスの反映バー */
.keiri-flags-bar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.kf{font-size:12px;font-weight:700;border-radius:4px;padding:6px 12px}
.kf-ok{background:rgba(88,166,255,.12);color:var(--accent);border:1px solid rgba(88,166,255,.3)}
.kf-pay{background:rgba(63,185,80,.1);color:var(--ok);border:1px solid rgba(63,185,80,.3)}
/* 設定：コードボックス */
.codebox{background:#010409;border:1px solid var(--border);border-radius:4px;padding:14px;overflow:auto;font-family:Consolas,Menlo,monospace;font-size:12px;line-height:1.6;color:#c9d1d9;white-space:pre;max-height:340px}
details summary{list-style:none}
details summary::-webkit-details-marker{display:none}
/* 請求済み表示 */
.kf-bill{background:rgba(130,80,255,.14);color:#b084ff;border:1px solid rgba(130,80,255,.35)}
.billed-tag{font-size:12px;font-weight:800;color:#b084ff;background:rgba(130,80,255,.12);border:1px solid rgba(130,80,255,.35);border-radius:4px;padding:5px 10px}
.billed-badge{background:rgba(130,80,255,.15);color:#b084ff}
/* 担当者管理：免許証の写真 */
.license-img{width:100%;max-height:240px;object-fit:contain;background:#010409;border:1px solid var(--border);border-radius:4px;display:block}
/* 役割の色：管理者＝緑（緑ボタンで管理者がわかる）。緑重複を避け担当者は青に */
.rolechip.rc-admin{background:var(--ok);color:#06210f}
.rolechip.rc-staff{background:var(--accent);color:#06121f}
.rolechip.rc-operator{background:#56d4dd;color:#062021}
.rolechip.rc-accounting{background:var(--warn);color:#1f1500}
.role-admin{background:rgba(63,185,80,.16);color:var(--ok);border:1px solid rgba(63,185,80,.4)}
.role-staff{background:rgba(88,166,255,.14);color:var(--accent)}
.role-operator{background:rgba(86,212,221,.14);color:#56d4dd}
.role-accounting{background:rgba(210,153,34,.12);color:var(--warn)}
/* オンライン（操作中）表示：管理者だけが見る */
.online-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ok);margin-right:7px;vertical-align:middle;box-shadow:0 0 0 0 rgba(63,185,80,.7);animation:onlinepulse 1.6s infinite}
@keyframes onlinepulse{0%{box-shadow:0 0 0 0 rgba(63,185,80,.55)}70%{box-shadow:0 0 0 6px rgba(63,185,80,0)}100%{box-shadow:0 0 0 0 rgba(63,185,80,0)}}
.online-count{margin-left:auto;font-size:13px;font-weight:800;color:var(--ok);background:rgba(63,185,80,.12);border:1px solid rgba(63,185,80,.35);border-radius:999px;padding:2px 11px}
.online-list{display:flex;flex-direction:column;gap:7px}
.online-item{display:flex;align-items:center;gap:8px}
.online-item .badge{margin-left:auto}
/* ===== カスタマイズ可能なダッシュボード（Gridstack） ===== */
.dash-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%}
.grid-stack{margin:0 -4px}
/* 編集モード：マス目（吸着するグリッド）を表示。24列・セル32pxの細グリッド。
線の色・種類は全レイアウト共通の --pl-grid-img（管理者がパレットで変更）で描画 */
.dash-editing #dashGrid{
background-image: var(--pl-grid-img, none);
background-size: calc(100% / 24) 32px;
background-position: 0 0;
outline:var(--pl-grid-ol, 1px dashed var(--pl-grid-color, rgba(88,166,255,.4)));
border-radius:5px;
}
.dash-editing .grid-stack-placeholder>.placeholder-content{background:rgba(88,166,255,.18);border:2px dashed var(--accent);border-radius:5px}
.grid-stack-item-content{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;inset:0}
/* 空白（スペーサー）パーツ：表示中は“何もない空きスペース”（背景・枠・影・見出しを消す）／編集中だけ薄い点線でつかめるように見せる。fdstaffmobileの!importantに勝つよう body 起点で指定。 */
body .grid-stack-item[gs-id="pl-spacer"] > .grid-stack-item-content{background:transparent!important;box-shadow:none!important;border-color:transparent!important}
body:not(.pl-editing) .grid-stack-item[gs-id="pl-spacer"] .pl-handle{display:none}
body.pl-editing .grid-stack-item[gs-id="pl-spacer"] > .grid-stack-item-content{border:1px dashed var(--border)!important;background:rgba(148,163,184,.06)!important}
body.pl-editing .grid-stack-item[gs-id="pl-spacer"] .pl-body::after{content:'（空白）';display:block;text-align:center;color:var(--muted);font-size:12px;opacity:.7;padding:6px}
.widget{padding:14px 16px;overflow:auto;height:100%;width:100%;box-sizing:border-box}
.widget>h2.ph{margin:0 0 10px}
.widget .tablewrap{margin:0}
.widget.kpi-w{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:3px 8px;gap:0;overflow:visible;container-type:size}
/* 数字は状態ピル(.cat-n)と同じ大きさ感に。カード高に合わせ自動調整（小枠でも大きく見せる）／flexで潰さない＋overflow可視で切れない */
.widget.kpi-w .kpi-n{font-size:clamp(20px,48cqh + 4px,32px);font-weight:800;line-height:1.12;flex:0 0 auto;white-space:nowrap}
.widget.kpi-w .kpi-n small{font-size:.5em;font-weight:600;color:var(--muted);margin-left:3px}
.widget.kpi-w .kpi-n.unc{color:var(--warn)}
/* ラベルは状態ピルと同じ白・太字（薄いグレーをやめる） */
.widget.kpi-w .kpi-l{font-size:clamp(10.5px,7cqh + 6px,13px);color:var(--ink);font-weight:700;margin-bottom:1px;line-height:1.2;flex:0 0 auto;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-menu-row{display:flex;flex-wrap:wrap;gap:8px}
.adm-menu-row .btn.block{width:auto;flex:0 0 auto}
.catfill .cat-n{font-size:26px}
/* 部品を外す × ボタン（編集モードのみ）＝初期UI(.pl-wremove)と見た目統一（サイズ・角丸・色。位置は今どおり角に浮かせたまま） */
.wremove{position:absolute;top:5px;right:5px;z-index:5;width:22px;height:22px;border-radius:3px;border:1px solid var(--border2);background:var(--surface3);color:var(--muted);font-size:14px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0}
.dash-editing .wremove{display:inline-flex}
.wremove:hover{background:var(--danger);border-color:var(--danger);color:#fff}
/* 左のパーツ置き場 */
.palette{position:fixed;left:0;top:0;bottom:0;width:230px;background:var(--surface);border-right:1px solid var(--border2);padding:14px 12px;overflow:auto;z-index:130;transform:translateX(-100%);transition:transform .22s;box-shadow:0 0 40px rgba(0,0,0,.5)}
.palette.open{transform:none}
.palette-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}
.palette-close{width:26px;height:26px;border-radius:50%;border:1px solid var(--border2);background:var(--surface2);color:var(--ink);font-size:16px;line-height:1;cursor:pointer;padding:0}
.palette-close:hover{background:var(--danger);border-color:var(--danger);color:#fff}
.palette-ttl{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.palette-item{position:relative;display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:11px 13px;margin:0 0 8px;color:var(--ink);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.palette-item:hover{border-color:var(--accent);color:var(--accent);background:var(--surface3)}
.palette-item .pi-tip,.pl-pitem .pi-tip{position:absolute;left:6px;right:6px;top:calc(100% - 2px);z-index:6;background:var(--surface3);border:1px solid var(--accent);border-radius:4px;padding:9px 12px;font-size:14px;font-weight:500;line-height:1.7;color:var(--ink);box-shadow:0 12px 30px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(-4px);pointer-events:none;transition:opacity .14s,transform .14s,visibility .14s}
.palette-item:hover .pi-tip,.palette-item:focus-visible .pi-tip,.pl-pitem:hover .pi-tip,.pl-pitem:focus-visible .pi-tip{opacity:1;visibility:visible;transform:none}
.pl-pitem{position:relative}
.pl-pitem .pl-pi-label{flex:1}
/* #45 新パーツの赤いNEWバッジ（未使用のみ・一度使うと消える。parts-new-badge.js が付与） */
.pl-new{position:absolute;top:-7px;right:-7px;background:var(--danger);color:#fff;font-size:9px;font-weight:800;line-height:1;letter-spacing:.6px;padding:3px 5px;border-radius:3px;box-shadow:0 2px 8px rgba(0,0,0,.55);pointer-events:none;z-index:7;animation:plNewPop .25s ease-out}
@keyframes plNewPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.pi-plus{color:var(--accent);font-weight:800}
/* 最近の動き：項目（列）ピッカー */
.rc-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.rc-head .ph{flex:1;font-size:12px}
.rc-pick-btn{display:none}
.dash-editing .rc-pick-btn{display:inline-flex}
.rc-picker-wrap{position:relative}
.rc-picker{position:absolute;right:0;top:34px;z-index:40;background:var(--surface3);border:1px solid var(--border2);border-radius:5px;padding:10px 12px;box-shadow:0 18px 40px -10px rgba(0,0,0,.7);min-width:160px}
.rc-picker-ttl{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.05em;margin-bottom:6px}
.rc-pick-row{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink);font-weight:600;padding:3px 2px;margin:0}
.rc-pick-row label{display:flex;align-items:center;gap:6px;cursor:pointer;margin:0;flex:1}
.rc-pick-row input{width:auto;margin:0;flex:none}
.rc-mv{width:22px;height:22px;border-radius:3px;border:1px solid var(--border);background:var(--surface2);color:var(--ink);font-size:10px;line-height:1;cursor:pointer;padding:0;flex:none}
.rc-mv:hover{border-color:var(--accent);color:var(--accent)}
/* 状態・受付方法バッジの囲いを統一（最近の動き） */
.rc-table td[data-col="status"] .badge{display:inline-block;width:6em;text-align:center;box-sizing:border-box;padding:3px 6px}
.rc-table td[data-col="source"] .badge{display:inline-block;width:5em;text-align:center;box-sizing:border-box;padding:3px 6px}
.rc-table td[data-col="status"]{text-align:left}
/* グラフ部品 */
.chart-w{display:flex;flex-direction:column}
.chart-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.chart-head .ph{flex:1;font-size:12px}
.chart-type{width:auto;min-width:96px;height:30px;margin:0;padding:2px 8px;font-size:12px}
.chart-box{position:relative;flex:1;min-height:120px}
/* グラフを「表」で見るモード（#グラフに表機能） */
.chart-table,.an-table{position:absolute;inset:0;overflow:auto}
.cht-table{width:100%;border-collapse:collapse;font-size:12px}
.cht-table th,.cht-table td{padding:4px 8px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
.cht-table .r{text-align:right;font-variant-numeric:tabular-nums}
.cht-table thead th{position:sticky;top:0;background:var(--surface2);color:var(--muted);font-weight:700;font-size:11px;z-index:1}
.cht-table tbody tr:hover{background:var(--surface2)}
.cht-table tfoot th{position:sticky;bottom:0;border-top:2px solid var(--border2);font-weight:800;background:var(--surface)}
.cht-table .cht-pct{color:var(--muted)}
.cht-empty{padding:16px;text-align:center;color:var(--muted);font-size:12px}
@media(max-width:760px){
.palette{left:0;right:0;top:auto;bottom:0;width:auto;height:auto;max-height:48vh;transform:translateY(100%);border-right:none;border-top:1px solid var(--border2)}
.palette.open{transform:none}
}
/* 時計・クイック受付・本日の予定 パーツ */
/* 時計＝全ページ共通で1段（日付＋時刻を1行）・パーツ内で必ず上下左右中央 */
.widget.clock-w{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;padding:4px 6px;height:100%;width:100%;box-sizing:border-box}
.pl-body:has(>.clock-w),.grid-stack-item-content:has(>.clock-w){display:flex}
.pl-body>.clock-w,.grid-stack-item-content>.clock-w{flex:1;margin:auto}
.widget.clock-w .clock-time{font-size:19px;line-height:1.25;margin:0;font-variant-numeric:tabular-nums}
.widget.clock-w .clock-date{font-size:11px;line-height:1.25;margin:0}
.quicknew-w{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-decoration:none;color:var(--accent)}
.quicknew-w:hover{text-decoration:none;color:var(--accent)}
.quicknew-w .qn-ico{font-size:30px;font-weight:800;line-height:1;width:46px;height:46px;border-radius:6px;background:rgba(88,166,255,.14);display:flex;align-items:center;justify-content:center}
.quicknew-w .qn-t{font-size:13px;font-weight:700}
.today-list{display:flex;flex-direction:column;gap:6px}
.today-row{display:flex;align-items:center;gap:10px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:8px 11px;color:var(--ink)}
.today-row:hover{text-decoration:none;background:var(--surface3);border-color:var(--border2)}
.today-time{color:var(--accent);font-weight:700;flex:none;min-width:64px}
.today-content{flex:1;min-width:0}
/* 編集モードの見た目 */
.dash-editing .grid-stack-item-content{outline:2px dashed rgba(88,166,255,.5);cursor:move}
.dash-editing .grid-stack-item-content:hover{outline-color:var(--accent)}
.dash-hint{background:rgba(88,166,255,.08);border:1px solid rgba(88,166,255,.3);color:var(--accent);padding:8px 12px;border-radius:4px;margin:0 0 12px}
.grid-stack-item>.ui-resizable-se{filter:none}
/* 保存トースト */
.dash-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);background:var(--accent-d);color:#fff;font-weight:700;font-size:14px;padding:11px 20px;border-radius:5px;box-shadow:0 16px 40px -8px rgba(0,0,0,.6);z-index:300;opacity:0;transition:transform .35s cubic-bezier(.2,.9,.3,1.2),opacity .3s}
.dash-toast.show{transform:translate(-50%,0);opacity:1}
/* ===== 計算機パーツ（ダッシュボード・監視 共通） ===== */
.calc-w{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0}
.calc-d{width:100%;box-sizing:border-box;text-align:right;font-size:22px;font-weight:700;font-family:ui-monospace,Consolas,monospace;background:var(--surface2);color:var(--ink);border:1px solid var(--border);border-radius:4px;padding:8px 10px}
.calc-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;flex:1}
.calc-b{font-size:16px;font-weight:700;border:1px solid var(--border);border-radius:4px;background:var(--surface3);color:var(--ink);cursor:pointer;padding:6px;min-height:36px}
.calc-b:hover{border-color:var(--accent);color:var(--accent)}
.calc-b.ck-op{color:var(--accent);font-weight:800}
.calc-b.ck-eq{background:var(--accent-d);color:#fff;border-color:var(--accent-d)}
.calc-b.ck-eq:hover{color:#fff}
.calc-b.ck-clear{color:var(--danger)}
/* ===== ツール系パーツ（メモ・タイマー・天気・お知らせ） ===== */
.memo-w{display:flex;flex-direction:column;height:100%}
.memo-ta{flex:1;width:100%;box-sizing:border-box;resize:none;background:var(--surface2);color:var(--ink);border:1px solid var(--border);border-radius:4px;padding:9px;font:inherit;font-size:13px;line-height:1.6}
/* メモの見出し＋操作ボタン（消去・保存・一覧表示） */
.memo-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px;flex:0 0 auto}
.memo-head .ph{padding:0;border:0;margin:0;white-space:nowrap}
.memo-btns{display:flex;gap:6px;flex:0 0 auto}
.memo-btns button{font-size:12px;padding:4px 9px;border-radius:4px;border:1px solid var(--border);background:var(--surface2);color:var(--ink);cursor:pointer;white-space:nowrap}
.memo-btns button:hover{background:var(--surface3);border-color:var(--border2)}
/* 保存したメモの一覧 */
.memo-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:5px}
.memo-li{display:flex;align-items:center;gap:6px}
.memo-li-open{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:6px 10px;color:var(--ink);cursor:pointer}
.memo-li-open:hover{background:var(--surface3)}
.memo-li-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:13px}
.memo-li-del{flex:0 0 auto;background:none;border:0;color:var(--muted);font-size:17px;line-height:1;cursor:pointer;padding:2px 6px}
.memo-li-del:hover{color:var(--danger)}
.timer-w{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}
.timer-disp{font-size:34px;font-weight:800;font-family:ui-monospace,Consolas,monospace;margin:0 0 12px}
.timer-btns{display:flex;gap:8px}
.weather-w{height:100%}
.weather-w .weather-body{text-align:center}
.notice-w .notice-view{white-space:pre-wrap;font-size:14px;line-height:1.75;max-height:100%;overflow:auto}
.notice-w .notice-ta{width:100%;box-sizing:border-box;min-height:90px;resize:vertical;background:var(--surface2);color:var(--ink);border:1px solid var(--border);border-radius:4px;padding:8px;font:inherit;font-size:13px}
.todo-w,.callmemo-w,.mapeta-w,.geo-w{display:flex;flex-direction:column;height:100%}
.todo-list,.callmemo-list{flex:1;overflow:auto;margin:6px 0}
.todo-item{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:14px}
.todo-item input{width:18px;height:18px;flex:none}
.todo-item span{flex:1}
.todo-del,.callmemo-del{border:none;background:none;color:var(--muted);cursor:pointer;font-size:16px;flex:none}
.todo-input,.callmemo-input{width:100%;box-sizing:border-box;padding:7px 9px;border-radius:4px;border:1px solid var(--border);background:var(--surface2);color:var(--ink);font:inherit;font-size:13px}
.callmemo-item{padding:5px 0;border-bottom:1px solid var(--border);font-size:13px;line-height:1.5}
.geo-w .geo-body{font-size:15px;line-height:1.6}
/* ミニカレンダー */
.minical-w{display:flex;flex-direction:column;height:100%}
.minical-nav{display:flex;gap:6px;margin:0 0 8px}
.minical-nav .btn{flex:1 1 0}
.minical-dow{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:12px;color:var(--muted);margin-bottom:4px}
.minical-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.mc-day{padding:6px 0;border-radius:3px;font-size:13px}
.mc-blank{visibility:hidden}
.mc-sun{color:var(--danger)}
.mc-sat{color:var(--accent)}
.mc-today{background:var(--accent);color:#fff;font-weight:800}
/* カウントダウン */
.countdown-w input{width:100%;box-sizing:border-box;margin:0 0 6px;padding:7px 9px;border-radius:4px;border:1px solid var(--border);background:var(--surface2);color:var(--ink);font:inherit;font-size:13px}
/* QRコード生成 */
.qr-w input{width:100%;box-sizing:border-box;padding:7px 9px;border-radius:4px;border:1px solid var(--border);background:var(--surface2);color:var(--ink);font:inherit;font-size:13px}
/* 画像メモ */
.imgmemo-w .imgmemo-preview img{display:block}
/* 電光掲示板 */
.ledboard-controls{display:flex;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.ledboard-controls select{flex:1 1 auto;min-width:0;padding:6px 8px;border-radius:4px;border:1px solid var(--border);background:var(--surface2);color:var(--ink);font:inherit;font-size:12px}
.ledboard-input{width:100%;box-sizing:border-box;margin:0 0 8px;padding:7px 9px;border-radius:4px;border:1px solid var(--border);background:var(--surface2);color:var(--ink);font:inherit;font-size:13px}
.ledboard-input:disabled{opacity:.5}
.ledboard-sys{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;padding:0 4px}
.ledboard-w.lb-syson .ledboard-sys{color:var(--accent)}
.ledboard-screen{position:relative;overflow:hidden;white-space:nowrap;border-radius:3px;padding:10px 0}
.ledboard-track{display:inline-block;padding-left:100%;animation-name:lb-scroll;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:var(--lb-dur,13s)}
@keyframes lb-scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.ledboard-text{font-size:20px;letter-spacing:2px}
.lb-style-led{background:#0a0a0a}
.lb-style-led .ledboard-text{color:#ff2b2b;font-family:'Courier New',monospace;font-weight:800;text-shadow:0 0 6px #ff2b2b,0 0 14px #ff2b2b99}
.lb-style-lcd{background:#8fa88a}
.lb-style-lcd .ledboard-text{color:#1c2a1c;font-family:'Courier New',monospace;font-weight:700;text-shadow:0 1px 0 #ffffff33}
.lb-style-lcd::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,#00000012 0 2px,transparent 2px 4px);pointer-events:none}
.lb-style-digital{background:#050505}
.lb-style-digital .ledboard-text{color:#ff8a00;font-family:'Courier New',monospace;font-weight:800;letter-spacing:4px;text-shadow:0 0 4px #ff8a00,0 0 10px #ff8a0088}
.lb-style-crt{background:#031403}
.lb-style-crt .ledboard-text{color:#39ff6a;font-family:'Courier New',monospace;font-weight:700;text-shadow:0 0 5px #39ff6a99}
.lb-style-crt::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,#00000055 0 1px,transparent 1px 3px);pointer-events:none}
.lb-style-dot{background:#000}
.lb-style-dot .ledboard-text{color:#ffcf3a;font-family:'Courier New',monospace;font-weight:800;letter-spacing:3px;text-shadow:0 0 0 #ffcf3a}
.lb-style-dot::after{content:'';position:absolute;inset:0;background:radial-gradient(#0006 1px,transparent 1.4px);background-size:4px 4px;pointer-events:none}
.lb-style-neon{background:#170826}
.lb-style-neon .ledboard-text{color:#ff4fd8;font-family:inherit;font-weight:800;text-shadow:0 0 6px #ff4fd8,0 0 16px #ff4fd8aa,0 0 28px #7cf7ff66}
/* 電光掲示板：横幅いっぱい・低い高さ（1段バナー）で置かれた時のコンパクト表示 */
/* ★2026-08-01：1行表示のときは、操作類（スタイル・速さ・チェック・文章入力）を隠して
流れる画面を横いっぱいに使う。操作は右端の「設定」を押した時だけ、上に浮かせて出す。
（以前は操作類が横幅を食っていて、掲示板が右端の細い帯しか残らなかった） */
.ledboard-w{position:relative}
.ledboard-cfgbox{display:contents} /* 普通の高さのときは今までどおり（枠が無いのと同じ扱い） */
.ledboard-cfg{display:none}
.ledboard-w.lb-compact{display:flex;align-items:center;gap:8px;padding:4px 8px}
.ledboard-w.lb-compact .ph{display:none}
.ledboard-w.lb-compact .ledboard-cfgbox{display:none}
.ledboard-w.lb-compact .ledboard-screen{flex:1 1 auto;height:100%;padding:0;margin:0;display:flex;align-items:center}
.ledboard-w.lb-compact .ledboard-track{padding-left:100%}
.ledboard-w.lb-compact .ledboard-text{font-size:15px}
.ledboard-w.lb-compact .ledboard-cfg{display:block;order:2;flex:0 0 auto;font:inherit;font-size:11px;font-weight:700;padding:3px 9px;border-radius:4px;border:1px solid var(--border);background:var(--surface2);color:var(--muted);cursor:pointer;opacity:.5}
.ledboard-w.lb-compact .ledboard-cfg:hover{opacity:1;color:var(--ink);border-color:var(--accent)}
/* ★ポップは position:fixed（画面基準）で開く。パーツの枠は overflow:hidden なので、
枠の中(absolute)で開くと切れてしまう＝🎨や➖のポップと同じ作法に合わせる。位置はJSで入れる。 */
.ledboard-w.lb-compact.lb-cfgopen .ledboard-cfgbox{display:flex;flex-direction:column;gap:8px;position:fixed;z-index:1200;background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:10px;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.ledboard-w.lb-compact.lb-cfgopen .ledboard-input{margin:0;width:100%;box-sizing:border-box}
/* ★2026-08-01：1行のときは枠の見出し「電光掲示板」と上下の余白を無くして、本当に1行だけにする。
つまみ(⠿)と外す(×)はレイアウト編集中だけ出す＝ふだんは掲示板そのものしか見えない。 */
.grid-stack-item.lb-item-compact .pl-handle{display:none}
body.pl-editing .grid-stack-item.lb-item-compact .pl-handle{display:flex;font-size:0;padding:2px 6px;min-height:0;border-bottom:none}
body.pl-editing .grid-stack-item.lb-item-compact .pl-handle > *{font-size:12px}
/* 余白を無くし、掲示板を枠の高さの真ん中に置く（上に寄って下に空きが残らないように） */
.grid-stack-item.lb-item-compact .grid-stack-item-content{display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.grid-stack-item.lb-item-compact .pl-body{padding:0;flex:1 1 auto;display:flex;align-items:center;min-height:0}
.grid-stack-item.lb-item-compact .ledboard-w.lb-compact{flex:1 1 auto;width:100%;padding:2px 6px}
/* ★流れる画面の角丸は最小限に（白ソフトの見た目が全要素に20pxの角丸を当てているため、ここで戻す） */
.ledboard-w.lb-compact .ledboard-screen{border-radius:2px}
/* ===== 汎用ページレイアウト（お客様新規受付・水道救急車請求 など。各ブロックをドラッグで配置） ===== */
.pl-tools{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.pl-tools-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;align-items:center}
.pl-tools-row > .btn,.pl-tools-row > .gl-wrap,.pl-tools-row > .role-tpl{min-width:0;width:100%}
.pl-tools-row > .gl-wrap{display:flex}
.pl-tools-row > .gl-wrap > .btn{width:100%}
.pl-tools-row > .role-tpl{display:flex;gap:6px;align-items:center}
.pl-tools-row > .role-tpl > .btn{flex:1 1 auto;white-space:nowrap}
.pl-tools-row > .role-tpl > select{flex:0 0 auto;border-radius:4px;border:1px solid var(--border);background:var(--surface2);color:var(--ink);font:inherit;font-size:13px;padding:0 8px}
.pl-grid{margin-top:4px}
.pl-handle{display:flex;align-items:center;gap:7px;padding:8px 12px;font-size:15.5px;font-weight:400;color:var(--ink);background:var(--surface2);border-bottom:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;user-select:none;flex:none}
.pl-grip{color:var(--border2);font-size:14px;line-height:1;display:none}
/* 新着あり（伝言の未読・未割り当て）＝パーツ名の左で赤に点滅（NEWバッジ・未読ナビバッジと赤で統一。緑はオンライン専用） */
.pl-newdot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--danger);box-shadow:0 0 7px var(--danger);animation:pl-blink 1.1s ease-in-out infinite;flex:none}
@keyframes pl-blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.65)}}
/* 入口ボタン（✏編集・🧩追加）の赤丸＝未使用の新パーツがある時だけ表示（parts-new-badge.js が付与・改善策2）。ボタン文字のすぐ後ろに続けて表示（ナビの赤バッジと同じ並び方） */
.pl-trigger-dot{display:inline-block;vertical-align:middle;margin-left:5px;min-width:16px;height:16px;padding:0 3px;border-radius:999px;background:var(--danger);color:#fff;font-size:10px;font-weight:800;line-height:16px;text-align:center;pointer-events:none}
/* PCで携帯レイアウトを編集中＝グリッドを「スマホの大きさの枠」に見立ててプレビュー（#54）。スマホ実機サイズの枠で表示 */
.gs-mobedit{max-width:412px;margin:34px auto 0;border:3px solid var(--accent);border-radius:11px;box-shadow:0 0 0 8px rgba(88,166,255,.07),0 16px 46px rgba(0,0,0,.45);position:relative}
.gs-mobedit::before{content:'スマホの画面 青い枠＝幅 ／ オレンジの点線＝1画面ぶん';position:absolute;top:-29px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:800;color:var(--accent);background:var(--surface);border:1px solid var(--accent);border-radius:999px;padding:3px 12px;z-index:3}
/* ★スマホで実際に見える範囲＝「1画面ぶんの窓」（2026-08-08 お客様指示）。
画面といっしょに動くと目安にならないので、窓は画面に貼り付けて動かさない（position:fixed）。
中身だけがスクロールするので、いつでも1画面に入る量が分かる。作るのは footer.ejs の fdMobScreens。 */
.mob-screen-win{position:fixed;pointer-events:none;z-index:79;border:3px dashed var(--warn);border-radius:12px}
.mob-screen-win>b{position:absolute;left:8px;top:-13px;font-size:11px;font-weight:800;color:var(--warn);
background:var(--surface);border:1px solid var(--warn);border-radius:999px;padding:1px 10px;white-space:nowrap;line-height:1.6}
/* 編集中：他ページの編集へ飛ぶ左サイドナビ（携帯枠の左の空きスペースを使う・全レイアウト画面共通） */
.mobedit-nav{display:none}
.fd-mobedit .mobedit-nav{display:flex;flex-direction:column;gap:3px;position:fixed;left:12px;top:118px;width:172px;max-height:72vh;overflow:auto;z-index:80;background:var(--surface);border:1px solid var(--border2);border-radius:6px;padding:10px;box-shadow:0 12px 36px rgba(0,0,0,.45)}
.mobedit-nav .mn-ttl{font-size:12px;font-weight:800;color:var(--accent);margin:0 0 4px;padding:0 2px}
.mobedit-nav a{display:block;padding:7px 10px;border-radius:4px;font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;border:1px solid transparent}
.mobedit-nav a:hover{background:var(--surface2);border-color:var(--border)}
.mobedit-nav a.mn-cur{background:rgba(88,166,255,.16);border-color:var(--accent);color:var(--accent)}
.mobedit-nav .mn-hint{font-size:10.5px;color:var(--muted);margin-top:6px;padding:0 2px;line-height:1.45}
/* 画面の向き（縦/横）切替ボタン */
.mobedit-nav .mn-orient{display:flex;align-items:center;gap:4px;margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.mobedit-nav .mn-orient-lbl{font-size:11px;font-weight:700;color:var(--muted);margin-right:2px}
.mobedit-nav .mn-or{flex:1;padding:6px 4px;border-radius:4px;border:1px solid var(--border);background:var(--surface2);color:var(--ink);font-size:12px;font-weight:700;cursor:pointer}
.mobedit-nav .mn-or.on{background:rgba(88,166,255,.18);border-color:var(--accent);color:var(--accent)}
/* 横向き＝携帯を寝かせた幅。枠を730pxに広げ、最初の画面の高さ目安も低くする（横は縦に短い） */
.fd-mobedit-land .gs-mobedit{max-width:730px}
.fd-mobedit-land{--mob-screen-h:340px}
.fd-mobedit-land .gs-mobedit::before{content:'スマホの画面・横向き 青い枠＝幅 ／ オレンジの点線＝1画面ぶん'}
/* 🧲 重力ON/OFFボタンのオン状態（編集ツールバー・両エンジン共通） */
#gravityBtn.on, [data-pl-gravity].on{background:rgba(88,166,255,.18);border-color:var(--accent);color:var(--accent)}
.dbland-rotate{display:none}
@media(max-width:760px){ .fd-mobedit .mobedit-nav{display:none} }
@media(max-width:760px){ #toggleMobileBtn,[data-pl-mobedit]{display:none!important} } /* 実機スマホでは不要（すでにスマホ表示なので） */
.pl-body{padding:14px 16px}
.pl-body>:first-child{margin-top:0}
.pl-body .ph.mt{margin-top:14px}
body.pl-editing .pl-handle{cursor:move;background:rgba(88,166,255,.14);color:var(--accent)}
body.pl-editing .pl-grip{display:inline}
body.pl-editing .grid-stack-item-content{outline:2px dashed rgba(88,166,255,.45)}
body.pl-editing .grid-stack-item-content:hover{outline-color:var(--accent)}
/* パーツ内の文字・数字は枠の中央に（見出し＝タブ／入力値とも中央寄せ。複数行や一覧は読みやすさ優先で左） */
.pl-handle{justify-content:center;text-align:center}
.pl-body{text-align:center}
.pl-body input:not([type=checkbox]):not([type=radio]),.pl-body select{text-align:center}
.pl-body select{text-align-last:center}
.pl-body textarea{text-align:left}
.pl-body .radios,.pl-body .actions{justify-content:center}
.pl-body table,.pl-body .tablewrap,.pl-body table th,.pl-body table td{text-align:left}
/* 管理会社・不動産関係のパーツ＝枠とタブをオレンジに */
.pl-g-agency .pl-block{border-color:var(--orange)}
.pl-g-agency .pl-handle{background:rgba(240,136,62,.14);color:#fff;border-bottom-color:var(--orange)}
.pl-g-agency .pl-grip{color:var(--orange)}
body.pl-editing .pl-g-agency .pl-handle{background:rgba(240,136,62,.22);color:#fff}
body.pl-editing .pl-g-agency .grid-stack-item-content{outline-color:rgba(240,136,62,.55)}
body.pl-editing .pl-g-agency .grid-stack-item-content:hover{outline-color:var(--orange)}
/* ===== 新規受付（case_new）の入力欄グループ色分け＝選べるデザイン（data-grp-styleで切替・全画面共有） ===== */
/* グループごとの色（枠/帯/塗りの素になる）。--grp を1つ持たせて各デザインで使い回す */
.pl-grid[data-page="case_new"] .pl-g-intake{--grp:#58a6ff}
.pl-grid[data-page="case_new"] .pl-g-customer{--grp:#3fb950}
.pl-grid[data-page="case_new"] .pl-g-contact{--grp:#a371f7}
.pl-grid[data-page="case_new"] .pl-g-address{--grp:#e3b341}
.pl-grid[data-page="case_new"] .pl-g-when{--grp:#f778ba}
/* 共通：角丸＋なめらかに切替（管理会社=agencyは別扱いなので除外） */
.pl-grid[data-page="case_new"] .grid-stack-item[class*="pl-g-"]:not(.pl-g-agency)>.grid-stack-item-content.pl-block{border-radius:4px;transition:border-color .15s,background .15s}
/* ①帯（既定）：左の色帯＋うっすら背景 */
.pl-grid[data-page="case_new"][data-grp-style="bar"] .grid-stack-item[class*="pl-g-"]:not(.pl-g-agency)>.grid-stack-item-content.pl-block{border-left:3px solid var(--grp);background:color-mix(in srgb,var(--grp) 7%,transparent)}
/* ②枠線：全周を色の細枠で囲む（背景なし＝すっきり） */
.pl-grid[data-page="case_new"][data-grp-style="outline"] .grid-stack-item[class*="pl-g-"]:not(.pl-g-agency)>.grid-stack-item-content.pl-block{border:1.5px solid color-mix(in srgb,var(--grp) 60%,transparent);background:transparent}
/* ③塗り：背景をやわらかく塗る（帯なし＝面で区別） */
.pl-grid[data-page="case_new"][data-grp-style="tint"] .grid-stack-item[class*="pl-g-"]:not(.pl-g-agency)>.grid-stack-item-content.pl-block{border:1px solid transparent;background:color-mix(in srgb,var(--grp) 15%,transparent)}
/* ④上線：上に色のライン＋ごく薄い背景 */
.pl-grid[data-page="case_new"][data-grp-style="top"] .grid-stack-item[class*="pl-g-"]:not(.pl-g-agency)>.grid-stack-item-content.pl-block{border-top:3px solid var(--grp);background:color-mix(in srgb,var(--grp) 5%,transparent)}
/* ⑤なし：色分けしない（背景に溶け込ませてすっきり） */
.pl-grid[data-page="case_new"][data-grp-style="none"] .grid-stack-item[class*="pl-g-"]:not(.pl-g-agency)>.grid-stack-item-content.pl-block{border-color:transparent;background:var(--bg)}
/* --- 追加デザイン10種（#44 計15種）。すべて var(--grp) を使用。db.js CASE_GROUP_STYLES と一致させること --- */
.pl-grid[data-page="case_new"][data-grp-style="barthick"] .grid-stack-item[class*="pl-g-"]:not(.pl-g-agency)>.grid-stack-item-content.pl-block{border-left:6px solid var(--grp);background:color-mix(in srgb,var(--grp) 8%,transparent)}
.pl-grid[data-page="case_new"][data-grp-style="barright"] .grid-stack-item[class*="pl-g-"]:not(.pl-g-agency)>.grid-stack-item-content.pl-block{border-right:5px solid var(--grp);background:color-mix(in srgb,var(--grp) 7%,transparent)}
.pl-grid[data-page="case_new"][data-grp-style="bottom"] .grid-stack-item[class*="pl-g-"]:not(.pl-g-agency)>.grid-stack-item-content.pl-block{border-bottom:3px solid var(--grp);background:color-mix(in srgb,var(--grp) 5%,transparent)}
.pl-grid[data-page="case_new"][data-grp-style="frame"] .grid-stack-item[class*="pl-g-"]:not(.pl-g-agency)>.grid-stack-item-content.pl-block{border:2.5px solid color-mix(in srgb,var(--grp) 70%,transparent);background:transparent}
.pl-grid[data-page="case_new"][data-grp-style="double"] .grid-stack-item[class*="pl-g-"]:not(.pl-g-agency)>.grid-stack-item-content.pl-block{border:3px double color-mix(in srgb,var(--grp) 78%,transparent);background:transparent}
.pl-grid[data-page="case_new"][data-grp-style="dashed"] .grid-stack-item[class*="pl-g-"]:not(.pl-g-agency)>.grid-stack-item-content.pl-block{border:1.5px dashed color-mix(in srgb,var(--grp) 65%,transparent);background:color-mix(in srgb,var(--grp) 4%,transparent)}
.pl-grid[data-page="case_new"][data-grp-style="solidfill"] .grid-stack-item[class*="pl-g-"]:not(.pl-g-agency)>.grid-stack-item-content.pl-block{border:1px solid color-mix(in srgb,var(--grp) 40%,transparent);background:color-mix(in srgb,var(--grp) 26%,transparent)}
.pl-grid[data-page="case_new"][data-grp-style="glow"] .grid-stack-item[class*="pl-g-"]:not(.pl-g-agency)>.grid-stack-item-content.pl-block{border:1px solid color-mix(in srgb,var(--grp) 55%,transparent);background:color-mix(in srgb,var(--grp) 8%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--grp) 18%,transparent),0 6px 18px -8px var(--grp)}
.pl-grid[data-page="case_new"][data-grp-style="ring"] .grid-stack-item[class*="pl-g-"]:not(.pl-g-agency)>.grid-stack-item-content.pl-block{border:1px solid transparent;background:color-mix(in srgb,var(--grp) 6%,transparent);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--grp) 45%,transparent)}
.pl-grid[data-page="case_new"][data-grp-style="grad"] .grid-stack-item[class*="pl-g-"]:not(.pl-g-agency)>.grid-stack-item-content.pl-block{border:1px solid transparent;background:linear-gradient(180deg,color-mix(in srgb,var(--grp) 22%,transparent),transparent)}
/* ===== 新規受付：よく使う内容〜お問い合わせ内容を詰めて他パーツと馴染ませる(#42) ===== */
.pl-grid[data-page="case_new"] .ph-bar{margin:0 0 6px}
.pl-grid[data-page="case_new"] .ph-bar-label{font-size:11.5px}
.pl-grid[data-page="case_new"] .phrases.ph-grouped{background:transparent;border:none;border-radius:0;padding:0;margin:0 0 8px;gap:6px;max-height:200px}
.pl-grid[data-page="case_new"] .ph-tabs{margin:0 0 8px;padding:0 0 7px;gap:5px}
.pl-grid[data-page="case_new"] .ph-tab{font-size:12px;padding:4px 13px}
.pl-grid[data-page="case_new"] .ph-tab-items{min-height:0;gap:6px}
.pl-grid[data-page="case_new"] .pl-body .chip{font-size:12.5px;padding:5px 12px}
/* グループ色分けデザインの選択UI（編集モードのみ表示） */
.grp-style-pick{display:none;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 10px;padding:7px 11px;background:var(--surface);border:1px solid var(--border);border-radius:5px}
body.pl-editing .grp-style-pick{display:flex}
body.dash-editing .grp-style-pick{display:flex} /* 管理ダッシュボードの編集モードでも表示（#55 状態カードのデザイン選択） */
.grp-style-pick>span{font-size:12.5px;color:var(--muted);font-weight:700}
.grp-style-pick .gsp{background:var(--surface3);border:1px solid var(--border);color:var(--ink);border-radius:4px;padding:4px 11px;font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.grp-style-pick .gsp:hover{border-color:var(--accent);color:var(--accent)}
.grp-style-pick .gsp.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.grp-style-pick .gsp .gsp-dots{display:inline-flex;gap:2px}
.grp-style-pick .gsp .gsp-dots i{width:7px;height:7px;border-radius:50%;display:inline-block}
/* 改善策1（#56）：各ボタンに実際の見た目のミニ見本。--g=見本色（青）。中の地は --bg。実際の15デザインを縮小再現 */
.gsp .gsp-mini{--g:#58a6ff;width:30px;height:18px;border-radius:2px;background:var(--bg);display:inline-block;flex:0 0 auto;box-sizing:border-box}
.gsp.on .gsp-mini{--g:#fff}
.gsp[data-grp="bar"] .gsp-mini{border-left:3px solid var(--g);background:color-mix(in srgb,var(--g) 12%,var(--bg))}
.gsp[data-grp="outline"] .gsp-mini{border:1.5px solid color-mix(in srgb,var(--g) 60%,transparent)}
.gsp[data-grp="tint"] .gsp-mini{background:color-mix(in srgb,var(--g) 22%,var(--bg))}
.gsp[data-grp="top"] .gsp-mini{border-top:3px solid var(--g);background:color-mix(in srgb,var(--g) 8%,var(--bg))}
.gsp[data-grp="none"] .gsp-mini{border:1px solid var(--border2)}
.gsp[data-grp="barthick"] .gsp-mini{border-left:6px solid var(--g);background:color-mix(in srgb,var(--g) 12%,var(--bg))}
.gsp[data-grp="barright"] .gsp-mini{border-right:5px solid var(--g);background:color-mix(in srgb,var(--g) 10%,var(--bg))}
.gsp[data-grp="bottom"] .gsp-mini{border-bottom:3px solid var(--g);background:color-mix(in srgb,var(--g) 8%,var(--bg))}
.gsp[data-grp="frame"] .gsp-mini{border:2.5px solid color-mix(in srgb,var(--g) 70%,transparent)}
.gsp[data-grp="double"] .gsp-mini{border:3px double color-mix(in srgb,var(--g) 80%,transparent)}
.gsp[data-grp="dashed"] .gsp-mini{border:1.5px dashed color-mix(in srgb,var(--g) 65%,transparent)}
.gsp[data-grp="solidfill"] .gsp-mini{background:color-mix(in srgb,var(--g) 34%,var(--bg));border:1px solid color-mix(in srgb,var(--g) 45%,transparent)}
.gsp[data-grp="glow"] .gsp-mini{border:1px solid color-mix(in srgb,var(--g) 55%,transparent);box-shadow:0 0 6px -1px var(--g)}
.gsp[data-grp="ring"] .gsp-mini{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--g) 50%,transparent)}
.gsp[data-grp="grad"] .gsp-mini{background:linear-gradient(180deg,color-mix(in srgb,var(--g) 30%,var(--bg)),var(--bg))}
/* 状態カードのデザイン選択ボタンのミニ見本（#55） */
.ksp-mini{--c:#58a6ff;width:30px;height:18px;border-radius:3px;background:var(--surface);border:1px solid var(--border);display:inline-block;flex:0 0 auto;box-sizing:border-box}
.gsp.on .ksp-mini{--c:#fff}
.ksp-mini[data-k="bar"]{border-left:3px solid var(--c)}
.ksp-mini[data-k="fill"]{background:color-mix(in srgb,var(--c) 22%,var(--surface));border-color:transparent}
.ksp-mini[data-k="outline"]{border:1.5px solid var(--c)}
.ksp-mini[data-k="solid"]{background:var(--c);border-color:var(--c)}
.ksp-mini[data-k="top"]{border-top:3px solid var(--c)}
.ksp-mini[data-k="badge"]{position:relative}
.ksp-mini[data-k="badge"]::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;background:var(--c)}
.ksp-mini[data-k="grad"]{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 35%,var(--surface)),var(--surface));border-color:transparent}
/* 編集モード：レイアウト枠にグリッド（マス目）を表示＝ドラッグ時にこのマスへ吸着。
24列・セルは --pl-cell（既定80px）。線の色・種類は全レイアウト共通の --pl-grid-img */
body.pl-editing .pl-grid{
background-image: var(--pl-grid-img, none);
background-size: calc(100% / var(--pl-col, 24)) var(--pl-cell, 80px);
background-position: 0 0;
outline:var(--pl-grid-ol, 1px dashed var(--pl-grid-color, rgba(88,166,255,.4)));
border-radius:5px;
}
body.pl-editing .pl-grid .grid-stack-placeholder>.placeholder-content{background:rgba(88,166,255,.18);border:2px dashed var(--accent);border-radius:5px}
/* ===== 🎨 グリッド線パレット（全レイアウト共通の線色・線種を変更。動作=/static/grid-style.js） ===== */
.gl-wrap{position:relative;display:inline-block}
.gl-pop{position:absolute;top:calc(100% + 6px);right:0;z-index:60;width:300px;max-width:88vw;
background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:12px;
box-shadow:0 14px 40px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:10px;text-align:left}
.gl-pop[hidden]{display:none}
.gl-ttl{font-weight:800;font-size:13px;color:var(--ink);display:flex;align-items:baseline;gap:8px}
.gl-ttl small{font-weight:600;color:var(--muted,#8b949e);font-size:11px}
.gl-row{display:flex;align-items:flex-start;gap:8px}
.gl-lbl{flex:0 0 24px;font-size:12px;font-weight:700;color:var(--muted,#8b949e);padding-top:5px}
.gl-swatches{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.gl-sw{width:26px;height:26px;border-radius:4px;border:2px solid var(--border);cursor:pointer;padding:0;
background:linear-gradient(var(--sw),var(--sw)),repeating-conic-gradient(#888 0% 25%,#ccc 0% 50%) 0/10px 10px}
.gl-sw.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.gl-pick{width:26px;height:26px;border-radius:4px;border:2px dashed var(--border);cursor:pointer;
display:flex;align-items:center;justify-content:center;font-size:12px;position:relative;overflow:hidden}
.gl-pick input{position:absolute;inset:0;opacity:0;cursor:pointer}
.gl-lines{display:flex;flex-wrap:wrap;gap:6px}
.gl-ln{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:56px;padding:6px 8px;
border:1px solid var(--border);border-radius:4px;background:var(--bg,#0d1117);color:var(--ink);cursor:pointer;font-size:11px;font-weight:700}
.gl-ln i{display:block;width:40px;height:0;border-top:2px solid var(--ink)}
.gl-ln-solid i{border-top-style:solid}
.gl-ln-dashed i{border-top-style:dashed}
.gl-ln-dotted i{border-top-style:dotted;border-top-width:3px}
.gl-ln-none i{border-top-color:transparent;position:relative}
.gl-ln-none i::after{content:'✕';position:absolute;left:50%;top:-9px;transform:translateX(-50%);color:var(--muted,#8b949e);font-size:11px}
.gl-ln.on{border-color:var(--accent);background:rgba(88,166,255,.12);box-shadow:0 0 0 1px var(--accent) inset}
.gl-foot{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.gl-note{margin-right:auto;font-size:11px;color:var(--muted,#8b949e)}
/* グリッドのこまかさ（スナップ）トグル：細かめ=24マス / 標準=12マス相当。動作=grid-style.js（この端末に保存） */
.gl-snaps{display:flex;gap:6px}
.gl-snap{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:64px;padding:6px 10px;
border:1px solid var(--border);border-radius:4px;background:var(--bg,#0d1117);color:var(--ink);cursor:pointer;font-size:12px;font-weight:700}
.gl-snap small{font-weight:600;color:var(--muted,#8b949e);font-size:10px}
.gl-snap.on{border-color:var(--accent);background:rgba(88,166,255,.12);box-shadow:0 0 0 1px var(--accent) inset}
/* 標準（粗いマス）のとき：編集マス目の背景を12列・セル2倍にして、丸め先のマスと見た目を一致させる */
body.gl-snap-coarse.dash-editing #dashGrid{ background-size: calc(100% / 12) 64px; }
body.gl-snap-coarse.pl-editing .pl-grid{ background-size: calc(100% / 12) calc(var(--pl-cell, 80px) * 2); }
/* 通常パーツ（管理会社以外）＝外側の背景と同じ色・枠線なしで溶け込ませる。管理会社パーツ(.pl-g-agency)はそのまま */
.pl-grid .grid-stack-item:not(.pl-g-agency)>.grid-stack-item-content.pl-block{background:var(--bg);border-color:transparent}
body:not(.pl-editing) .pl-grid .grid-stack-item:not(.pl-g-agency) .pl-handle{background:transparent;border-bottom-color:transparent}
/* 入力時に出てくる要素（郵便番号の案内・漢字候補・「その他」直接入力）は、パーツの高さを変えず
欄の下に浮かせて表示＝下のパーツが押し下げられずバランスが崩れない */
.pl-grid .grid-stack-item-content{overflow:visible}
.pl-body{position:relative}
.pl-body>.zip-hint:not(:empty){position:absolute;left:10px;right:10px;top:100%;margin:-2px 0 0;z-index:30;background:var(--surface3);border:1px solid var(--border2);border-radius:4px;padding:6px 10px;box-shadow:0 12px 28px -10px rgba(0,0,0,.75)}
.pl-body>input[name="company_other"],
.pl-body>input[name="assigned_name_other"]{position:absolute;left:10px;right:10px;top:100%;margin-top:2px;z-index:30;box-shadow:0 12px 28px -10px rgba(0,0,0,.75)}
/* 入力欄の文字を大きく見やすく（表示倍率0.7でも読める） */
.pl-body input,.pl-body select,.pl-body textarea{font-size:16.5px}
.pl-body input::placeholder,.pl-body textarea::placeholder{font-size:15px}
/* 担当者 未割り当てパーツ（新規受付したがまだ担当者に送っていない案件） */
.ua-mini{display:flex;flex-direction:column;gap:6px;text-align:left}
.ua-mini-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:linear-gradient(180deg,var(--surface2),var(--surface));border:1px solid var(--border);border-left:3px solid var(--warn);border-radius:5px;padding:8px 11px;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.22);transition:transform .14s ease,box-shadow .16s ease,border-color .14s ease}
.ua-mini-row:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:0 6px 16px -10px rgba(0,0,0,.7)}
.ua-mini-link{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1 1 auto;min-width:0;color:var(--ink)}
.ua-mini-link:hover{text-decoration:none;color:var(--ink)}
.ua-mini-assign{flex:0 0 auto;margin-left:auto}
.ua-mini-assign select{font-size:12px;padding:4px 8px;border-radius:4px;max-width:150px;border:1px solid var(--border2);background:var(--surface);transition:border-color .15s ease,box-shadow .15s ease}
.ua-mini-assign select:hover{border-color:var(--accent)}
.ua-mini-assign select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(88,166,255,.2)}
.ua-mini-no{color:var(--accent);font-weight:800;font-size:11.5px;font-family:ui-monospace,Consolas,monospace;background:rgba(88,166,255,.1);border-radius:3px;padding:1px 7px}
.ua-mini-cust{font-weight:800}
.ua-mini-content{flex:1 1 90px;min-width:0;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ua-mini-at{margin-left:auto;white-space:nowrap}
/* 伝言・未割り当ては下に拡張(リサイズ)でき、中身が多いときは枠内でスクロール */
.pl-expandable .grid-stack-item-content{overflow:hidden}
.pl-expandable .pl-body{flex:1 1 auto;min-height:0;overflow-y:auto}
/* 伝言：メッセージ枠（未読は赤枠）を縦に長く・赤枠を太く目立たせる */
.pl-expandable .msglist{gap:12px}
.pl-expandable .msg{padding:16px 16px;min-height:84px}
.pl-expandable .msg-unread{border-width:2px;box-shadow:0 0 0 2px rgba(248,81,73,.3)}
/* お問い合わせ内容：選択できる定型文(チップ)の文字を大きく */
.pl-body .phrases{gap:7px}
.pl-body .chip{font-size:14.5px;padding:7px 14px}
/* 書き込み欄(お問い合わせ内容)をもっと長く */
.pl-body #content{min-height:150px;line-height:1.7}
/* お問い合わせ内容：ブロック下の余白をなくす＝書き込み欄を枠いっぱいに伸ばす。
★この枠は data-pl-nofit（fitHeightsが高さを測り直さない）なので、伸ばしても暴走しない。 */
.grid-stack-item[data-pl-nofit]>.grid-stack-item-content>.pl-body{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.grid-stack-item[data-pl-nofit]>.grid-stack-item-content>.pl-body>#content{flex:1 1 auto}
/* 登録・担当者に送るボタン（縦を1マス分=40pxに抑える＝以前は50pxで間延び） */
.pl-body .actions{gap:9px;flex-wrap:wrap}
.pl-body .actions .btn{height:40px;font-size:15.5px;padding:0 20px;border-radius:5px}
/* 登録パーツの幅を狭く（1マス等）したら、ボタンを縦に並べる */
.pl-body:has(.actions){container-type:inline-size}
@container (max-width:380px){
.pl-body .actions{flex-direction:column;align-items:stretch}
.pl-body .actions .btn{width:100%}
}
/* 外すボタン（編集モードのみ表示） */
.pl-wremove{margin-left:auto;display:none;width:22px;height:22px;border-radius:3px;border:1px solid var(--border2);background:var(--surface3);color:var(--muted);font-size:14px;line-height:1;cursor:pointer;align-items:center;justify-content:center}
.pl-wremove:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
body.pl-editing .pl-wremove{display:inline-flex}
/* 担当者ナビ統合：案件一覧⇄データベースの切替タブ */
.subnav-tabs{display:flex;gap:8px;margin:0 0 14px}
.subnav-tabs a{padding:7px 16px;border-radius:10px;border:1px solid var(--border);background:var(--surface2);color:var(--ink);font-weight:700;font-size:14px;text-decoration:none}
.subnav-tabs a.on{background:var(--accent);color:#fff;border-color:var(--accent)}
/* 左のパーツ置き場（パレット） */
.pl-palette{position:fixed;left:0;top:0;bottom:0;width:240px;background:var(--surface);border-right:1px solid var(--border2);box-shadow:8px 0 30px -10px rgba(0,0,0,.6);z-index:1200;padding:14px 12px;overflow:auto;transform:translateX(-102%);transition:transform .22s ease}
.pl-palette.open{transform:none}
.pl-palette-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.pl-palette-ttl{font-weight:800;font-size:13px;color:var(--ink)}
.pl-palette-close{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border-radius:4px;border:1px solid var(--danger);background:rgba(248,81,73,.12);color:var(--danger);cursor:pointer;font-size:0;font-weight:800;line-height:1}
.pl-palette-close::before{content:"✕ 閉じる";font-size:13px}
.pl-palette-close:hover{background:var(--danger);color:#fff}
.pl-pitem{display:flex;align-items:center;gap:8px;width:100%;text-align:left;margin:6px 0;padding:9px 11px;border-radius:5px;border:1px solid var(--border2);background:var(--surface2);color:var(--ink);font-size:13px;font-weight:600;cursor:pointer}
.pl-pitem:hover{background:var(--surface3);border-color:var(--accent)}
.pl-pi-plus{color:var(--accent);font-weight:800;font-size:15px}
/* 便利ウィジェット：時計 */
.pl-clockw{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:4px}
.pl-clock-time{font-size:30px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1}
.pl-clock-date{font-size:13px;color:var(--muted)}
/* 便利ウィジェット：カレンダー */
.pl-cal-head{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;color:var(--ink);margin-bottom:3px}
.pl-cal-title{min-width:96px;text-align:center}
.pl-cal-nav{background:var(--surface3);border:1px solid var(--border);color:var(--ink);width:26px;height:26px;border-radius:4px;cursor:pointer;font-size:17px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex:none;padding:0}
.pl-cal-nav:hover{border-color:var(--accent);color:var(--accent);background:var(--surface2)}
.pl-cal-t{width:100%;border-collapse:collapse;table-layout:fixed}
.pl-cal-t th{font-size:11px;color:var(--muted);font-weight:700;padding:2px 0}
.pl-cal-t td{text-align:center;font-size:12.5px;color:var(--ink);padding:2px 0;border-radius:3px}
.pl-cal-t td.pl-cal-today{background:var(--accent);color:#fff;font-weight:800}
.pl-cal-t th.pl-cal-sun{color:var(--danger)}
.pl-cal-t td.pl-cal-sun:not(.pl-cal-today),.pl-cal-t td.pl-cal-holiday:not(.pl-cal-today){color:var(--danger);font-weight:700}
/* 便利ウィジェット：メモ */
.pl-memo{width:100%;min-height:120px;resize:vertical;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--ink);padding:9px 11px;font:inherit;line-height:1.5}
/* 便利ウィジェット：電卓 */
.pl-calc-disp{width:100%;box-sizing:border-box;text-align:right;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--ink);padding:8px 10px;margin-bottom:8px}
.pl-calc-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pl-calc-keys button{padding:11px 0;border-radius:4px;border:1px solid var(--border2);background:var(--surface2);color:var(--ink);font-size:15px;font-weight:700;cursor:pointer}
.pl-calc-keys button:hover{background:var(--surface3)}
.pl-calc-keys .pl-calc-op{background:rgba(88,166,255,.16);color:var(--accent)}
.pl-calc-keys .pl-calc-fn{color:var(--muted)}
.pl-calc-keys .pl-calc-eq{background:var(--accent);color:#fff;border-color:var(--accent)}
.pl-calc-keys .pl-calc-zero{grid-column:span 1}
/* 伝言：ナビの未読バッジ */
.msgnav{position:relative}
.navbadge{display:inline-block;min-width:18px;height:18px;line-height:18px;text-align:center;background:var(--danger);color:#fff;border-radius:999px;font-size:11px;font-weight:800;padding:0 5px;margin-left:5px;vertical-align:middle}
/* 伝言：一覧 */
.msglist{display:flex;flex-direction:column;gap:10px}
.msg{background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:12px 14px}
.msg-unread{border-color:rgba(248,81,73,.5);box-shadow:0 0 0 1px rgba(248,81,73,.25)}
.msg-sent{background:var(--surface);opacity:.92}
.msg-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.msg-from{font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.msg-to{font-size:12px;color:var(--accent);font-weight:600}
.msg-at{margin-left:auto}
.msg-body{font-size:14px;line-height:1.7;white-space:pre-wrap;word-break:break-word}
/* 受信した伝言＝送り主ごとに1つのカードへまとめる */
.msg-group .msg-head{margin-bottom:0}
.msg-count{font-size:11px;font-weight:700;color:var(--muted);background:var(--surface3);border:1px solid var(--border);border-radius:999px;padding:2px 9px}
.msg-group-items{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.msg-item{border:1px solid var(--border);border-radius:5px;padding:9px 12px;background:var(--surface)}
.msg-item.item-unread{border-left:3px solid var(--danger)}
.msg-item-line{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.msg-item-line .msg-body{flex:1 1 60%;min-width:120px}
.msg-item-line .msg-at{margin-left:auto}
/* 押すと送り主への返信になる（カード内の各メッセージ） */
.msg-inbox{cursor:pointer;transition:border-color .12s,background .12s}
.msg-inbox:hover{border-color:var(--accent);background:var(--surface3)}
.msg-inbox.replying{border-color:var(--accent);box-shadow:0 0 0 2px rgba(88,166,255,.35)}
.reply-hint{font-size:11px;font-weight:700;color:var(--accent);background:rgba(88,166,255,.12);border:1px solid rgba(88,166,255,.3);border-radius:999px;padding:2px 8px}
/* 返信先の表示 */
.reply-indicator{display:inline-flex;align-items:center;background:rgba(88,166,255,.12);border:1px solid rgba(88,166,255,.35);color:var(--accent);font-weight:700;font-size:13px;border-radius:4px;padding:6px 12px;margin:0 0 12px}
/* 自分が送った返信＝受信枠の中に色違い(緑)で表示 */
.msg-replies{margin-top:10px;display:flex;flex-direction:column;gap:8px;border-top:1px dashed var(--border);padding-top:10px}
.msg-reply{background:rgba(63,185,80,.10);border:1px solid rgba(63,185,80,.45);border-left:3px solid var(--ok);border-radius:4px;padding:8px 11px}
.msg-reply-head{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.msg-reply-me{font-size:12px;font-weight:700;color:var(--ok)}
.msg-reply .msg-at{margin-left:auto}
/* ===== 伝言（メッセージ）を読みやすく・使いやすく（#37） ===== */
/* 一覧・本文は左寄せ＝pl-bodyの中央寄せ(line1053)を上書き（数字パーツは中央のまま） */
.pl-body .msglist,.pl-body .msg{text-align:left}
/* 伝言ページの送信フォーム：枠ごと左寄せ（ラベル・状態表示・補足も左に＝読みやすい） */
.pl-grid[data-page="messages"] .grid-stack-item[gs-id="pl-compose"] .pl-body{text-align:left}
.pl-grid[data-page="messages"] .pl-body select,
.pl-grid[data-page="messages"] .pl-body textarea{text-align:left}
/* 送信ボタンは横いっぱい＝「ここを押す」が一目で分かる */
.pl-grid[data-page="messages"] .pl-body .actions{justify-content:stretch;margin-top:8px}
.pl-grid[data-page="messages"] .pl-body .actions .btn.primary{flex:1 1 auto}
/* 受信カード：本文をやや大きく読みやすく、返信ヒントはホバーで点灯＝押せると分かる */
.msg-item-line .msg-body{font-size:15px;line-height:1.75}
.msg-inbox{position:relative}
.msg-inbox:hover .reply-hint{background:var(--accent);color:#fff;border-color:var(--accent)}
/* ===== 伝言：LINE風の会話スレッド（#48）＝相手ごとに集約・送信と返信を同じ場所・新着を明示 ===== */
.chatlist{display:flex;flex-direction:column;gap:12px;text-align:left}
.chat{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:10px 12px}
.chat-unread{border-color:rgba(88,166,255,.5);box-shadow:0 0 0 1px rgba(88,166,255,.22)}
.chat-broadcast{background:var(--surface)}
.chat-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px;padding-bottom:7px;border-bottom:1px dashed var(--border)}
.chat-who{font-weight:800;font-size:14px;display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.chat-at{margin-left:auto;flex:0 0 auto}
.chat-broadcast .chat-at{margin-left:0}
/* 会話の中身＝吹き出しを縦に時系列で並べる */
.chat-stream{display:flex;flex-direction:column;gap:8px}
.brow{display:flex;width:100%}
.brow.in{justify-content:flex-start}
.brow.out{justify-content:flex-end}
.bubble{position:relative;max-width:80%;padding:9px 13px;border-radius:7px;font-size:15px;line-height:1.7}
/* 相手＝左・グレー／自分＝右・緑（自分の発言は緑＝従来の返信色と統一） */
.bub-in{background:var(--surface3);border:1px solid var(--border);border-top-left-radius:5px}
.bub-out{background:rgba(63,185,80,.16);border:1px solid rgba(63,185,80,.45);border-top-right-radius:5px}
.bubble-body{white-space:pre-wrap;word-break:break-word;color:var(--ink)}
.bubble-at{display:block;margin-top:4px;font-size:11px;color:var(--muted)}
.bub-out .bubble-at{text-align:right;color:rgba(63,185,80,.92)}
/* 既読マーク（#59）＝相手が読んだら「既読」を青で表示。未読は「✓（送信済み）」 */
.rd-on{font-weight:800;color:#79c0ff}
/* 押すと返信できる受信吹き出し＝ホバーで反応 */
.bubble.msg-inbox{cursor:pointer;transition:border-color .12s,background .12s,box-shadow .12s}
.bubble.msg-inbox:hover{border-color:var(--accent)}
.bubble.msg-inbox.replying{border-color:var(--accent);box-shadow:0 0 0 2px rgba(88,166,255,.4)}
/* 新着（未読）の受信吹き出し＝赤で目立たせ「NEW」を付ける */
.bub-new{border-color:var(--danger);box-shadow:0 0 0 1px rgba(248,81,73,.3)}
.bub-newtag{position:absolute;top:-8px;left:-6px;background:var(--danger);color:#fff;font-size:9px;font-weight:800;letter-spacing:.5px;line-height:1;padding:3px 6px;border-radius:3px;box-shadow:0 2px 7px rgba(0,0,0,.5)}
/* 新規案件の自動通知の吹き出し */
.bub-newcase{background:rgba(240,136,62,.13);border-color:rgba(240,136,62,.5)}
/* 会話ごとの直接返信欄（改善策1）＝上の共通フォームに戻らず、その相手へすぐ返信 */
.chat-reply{display:flex;gap:7px;margin-top:10px;padding-top:9px;border-top:1px dashed var(--border)}
.chat-reply-input{flex:1 1 auto;min-width:0;background:var(--surface3);color:var(--ink);border:1px solid var(--border);border-radius:999px;padding:8px 14px;font:inherit;font-size:14px}
.chat-reply-input::placeholder{color:var(--muted)}
.chat-reply-input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px rgba(88,166,255,.25)}
.chat-reply-send{flex:0 0 auto;border-radius:999px;align-self:stretch}
/* 小さい伝言ウィジェット（案件新規受付など）＝吹き出しをコンパクトに */
.chatlist-mini{gap:9px}
.chatlist-mini .chat{padding:9px 10px;border-radius:5px}
.chatlist-mini .chat-head{margin-bottom:7px;padding-bottom:6px}
.chatlist-mini .chat-who{font-size:13px}
.chatlist-mini .bubble{font-size:13.5px;padding:7px 11px;max-width:88%;line-height:1.6}
/* 伝言：着信トースト */
.msgtoast{position:fixed;right:18px;bottom:18px;z-index:300;background:var(--accent-d);color:#fff;font-weight:700;font-size:14px;padding:13px 18px;border-radius:6px;box-shadow:0 16px 40px -8px rgba(0,0,0,.6);cursor:pointer;transform:translateY(140%);opacity:0;transition:transform .35s cubic-bezier(.2,.9,.3,1.2),opacity .35s;max-width:78vw}
.msgtoast.show{transform:translateY(0);opacity:1}
/* ふりがな→漢字 変換候補 */
.kanji-cands{position:fixed;z-index:1200;display:none;flex-wrap:wrap;align-items:center;gap:6px;max-width:min(440px,92vw);background:var(--surface3);border:1px solid var(--border2);border-radius:5px;padding:8px 11px;box-shadow:0 18px 44px -14px rgba(0,0,0,.85)}
.kanji-cands.show{display:flex}
.kanji-cands:empty{display:none}
.kc-label{font-size:11px;color:var(--muted);font-weight:700}
.kc-chip{font:inherit;font-size:13px;font-weight:700;line-height:1;padding:6px 11px;border-radius:4px;border:1px solid var(--border);background:var(--surface3);color:var(--ink);cursor:pointer;width:auto;margin:0;transition:.12s}
.kc-chip:hover{border-color:var(--accent);color:var(--accent)}
.kc-chip.on{background:rgba(88,166,255,.15);border-color:var(--accent);color:var(--accent)}
/* 請求：チェック列 */
.billtable td input[type=checkbox],.billtable th input[type=checkbox]{width:18px;height:18px;margin:0;cursor:pointer}
.bill-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
table.list tfoot td{border-top:2px solid var(--border2);padding:10px 12px;background:var(--surface2)}
/* 統一の使い方ガイド（各画面の「📖 使い方」details） */
.usehelp{border:1px solid rgba(88,166,255,.3);background:rgba(88,166,255,.06);border-radius:5px;padding:8px 14px;margin:0 0 16px}
.usehelp>summary{cursor:pointer;font-weight:800;font-size:15px;color:var(--accent);list-style:none}
.usehelp>summary::-webkit-details-marker{display:none}
.usehelp>summary::before{content:""}
.usehelp[open]>summary::before{content:""}
.usehelp .uh-body{font-size:15px;line-height:1.9;color:var(--ink);margin-top:8px}
.usehelp .uh-body ul{margin:4px 0 8px;padding-left:20px}
.usehelp .uh-body li{margin:3px 0}
.usehelp .uh-ex{background:rgba(63,185,80,.1);border-left:3px solid var(--ok);padding:6px 10px;border-radius:3px;margin:6px 0}
/* ===== 区切り線（デコパーツ）：実線・点線・二重線・波線・グラデを全レイアウト画面に配置。動作=/static/page-layout.js ===== */
.pl-deco>.grid-stack-item-content,.pl-deco-content{background:transparent;border:0;box-shadow:none;padding:0}
.pl-deco-content{position:relative;width:100%;height:100%}
body:not(.pl-editing) .pl-deco .grid-stack-item-content{outline:none}
/* 実際に見える線（pointer-events:none で下のドラッグを邪魔しない） */
.pl-deco-line{position:absolute;pointer-events:none;--dv-color:rgba(88,166,255,.9);--dv-w:3px;--dv-wave:none}
.pl-deco-line[data-orient="h"]{left:6px;right:6px;top:50%;transform:translateY(-50%)}
.pl-deco-line[data-orient="v"]{top:6px;bottom:6px;left:50%;transform:translateX(-50%)}
/* 横線 */
.pl-deco-line[data-orient="h"][data-dv="solid"]{border-top:var(--dv-w) solid var(--dv-color)}
.pl-deco-line[data-orient="h"][data-dv="dashed"]{border-top:var(--dv-w) dashed var(--dv-color)}
.pl-deco-line[data-orient="h"][data-dv="dotted"]{border-top:var(--dv-w) dotted var(--dv-color)}
.pl-deco-line[data-orient="h"][data-dv="double"]{border-top:calc(var(--dv-w) + 2px) double var(--dv-color)}
.pl-deco-line[data-orient="h"][data-dv="twin"]{height:7px;border-top:var(--dv-w) solid var(--dv-color);border-bottom:var(--dv-w) solid var(--dv-color)}
.pl-deco-line[data-orient="h"][data-dv="gradient"]{height:var(--dv-w);border-radius:99px;background:linear-gradient(90deg,transparent,var(--dv-color),transparent)}
.pl-deco-line[data-orient="h"][data-dv="wave"]{height:12px;background:var(--dv-wave) repeat-x center/auto 12px}
/* 縦線 */
.pl-deco-line[data-orient="v"][data-dv="solid"]{border-left:var(--dv-w) solid var(--dv-color)}
.pl-deco-line[data-orient="v"][data-dv="dashed"]{border-left:var(--dv-w) dashed var(--dv-color)}
.pl-deco-line[data-orient="v"][data-dv="dotted"]{border-left:var(--dv-w) dotted var(--dv-color)}
.pl-deco-line[data-orient="v"][data-dv="double"]{border-left:calc(var(--dv-w) + 2px) double var(--dv-color)}
.pl-deco-line[data-orient="v"][data-dv="twin"]{width:7px;border-left:var(--dv-w) solid var(--dv-color);border-right:var(--dv-w) solid var(--dv-color)}
.pl-deco-line[data-orient="v"][data-dv="gradient"]{width:var(--dv-w);border-radius:99px;background:linear-gradient(180deg,transparent,var(--dv-color),transparent)}
.pl-deco-line[data-orient="v"][data-dv="wave"]{width:12px;background:var(--dv-wave) repeat-y center/12px auto}
/* クールな飾り：ネオン（光る線）・グラデ帯（太い丸グラデ）・星飾り（✦の装飾線） */
.pl-deco-line[data-orient="h"][data-dv="glow"]{height:var(--dv-w);border-radius:99px;background:var(--dv-color);box-shadow:0 0 5px var(--dv-color),0 0 11px var(--dv-color)}
.pl-deco-line[data-orient="v"][data-dv="glow"]{width:var(--dv-w);border-radius:99px;background:var(--dv-color);box-shadow:0 0 5px var(--dv-color),0 0 11px var(--dv-color)}
.pl-deco-line[data-orient="h"][data-dv="band"]{height:calc(var(--dv-w) + 9px);border-radius:99px;background:linear-gradient(90deg,transparent,var(--dv-color),transparent);opacity:.6}
.pl-deco-line[data-orient="v"][data-dv="band"]{width:calc(var(--dv-w) + 9px);border-radius:99px;background:linear-gradient(180deg,transparent,var(--dv-color),transparent);opacity:.6}
.pl-deco-line[data-orient="h"][data-dv="stars"]{height:14px;background:var(--dv-wave) repeat-x center/auto 14px}
.pl-deco-line[data-orient="v"][data-dv="stars"]{width:14px;background:var(--dv-wave) repeat-y center/14px auto}
/* 見出し（横線の中央に出すラベル＝背景色で線を割る。色は線色に合わせる＝JSで指定） */
.pl-deco-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;max-width:84%;
padding:1px 12px;background:var(--bg);font-size:13px;font-weight:800;line-height:1.5;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;border-radius:3px}
.pl-deco-label:empty{display:none}
/* 編集チップ（つまみ＋操作ボタン）＝編集中だけ表示 */
.pl-deco-bar{display:none;position:absolute;top:3px;left:3px;z-index:3;align-items:center;gap:4px}
body.pl-editing .pl-deco-bar{display:inline-flex}
.pl-deco-grip{cursor:move;font-size:11px;font-weight:700;color:var(--accent);background:rgba(13,17,23,.92);border:1px solid var(--border);padding:2px 7px;border-radius:3px;line-height:1.4}
.pl-deco-btn{cursor:pointer;border:1px solid var(--border);background:rgba(13,17,23,.92);color:var(--ink);min-width:22px;height:22px;border-radius:3px;padding:0 6px;font-size:12px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.pl-deco-btn:hover{border-color:var(--accent);color:var(--accent)}
.pl-deco-del:hover{border-color:var(--danger);color:var(--danger)}
/* 編集中：細い線でも掴めるよう枠を薄い点線で示す */
body.pl-editing .pl-deco .grid-stack-item-content{outline:1px dashed rgba(139,148,158,.5)}
body.pl-editing .pl-deco .grid-stack-item-content:hover{outline-color:var(--accent)}
/* 線種・色・太さ・向きを選ぶポップ */
.pl-deco-pop{position:absolute;top:30px;left:3px;z-index:8;width:250px;max-width:94vw;max-height:80vh;overflow:hidden auto;text-align:left;
background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:10px;box-shadow:0 14px 40px rgba(0,0,0,.55);
display:flex;flex-direction:column;gap:9px;--dv-color:rgba(88,166,255,.9)}
.pl-deco-pop[hidden]{display:none}
.dvp-row{display:flex;align-items:flex-start;gap:8px}
.dvp-lbl{flex:0 0 30px;font-size:12px;font-weight:700;color:var(--muted);padding-top:6px}
.dvp-variants{display:flex;flex-wrap:wrap;gap:5px}
.dvp-v{display:flex;flex-direction:column;align-items:center;gap:2px;width:50px;padding:6px 2px;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--ink);cursor:pointer;font-size:11px;font-weight:700}
.dvp-v .dvp-pv{display:block;width:36px;height:10px}
.dvp-pv-solid{border-top:3px solid var(--dv-color);margin-top:4px}
.dvp-pv-dashed{border-top:3px dashed var(--dv-color);margin-top:4px}
.dvp-pv-dotted{border-top:3px dotted var(--dv-color);margin-top:4px}
.dvp-pv-double{border-top:5px double var(--dv-color);margin-top:3px}
.dvp-pv-twin{height:7px;border-top:2px solid var(--dv-color);border-bottom:2px solid var(--dv-color);margin-top:2px}
.dvp-pv-gradient{height:4px;border-radius:5px;background:linear-gradient(90deg,transparent,var(--dv-color),transparent);margin-top:4px}
.dvp-pv-wave{height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 6 Q 6 0 12 6 T 24 6' fill='none' stroke='%2358a6ff' stroke-width='2'/%3E%3C/svg%3E") repeat-x center/auto 10px}
.dvp-pv-glow{height:4px;border-radius:5px;background:var(--dv-color);box-shadow:0 0 4px var(--dv-color),0 0 8px var(--dv-color);margin-top:4px}
.dvp-pv-band{height:9px;border-radius:5px;background:linear-gradient(90deg,transparent,var(--dv-color),transparent);opacity:.75;margin-top:1px}
.dvp-pv-stars{height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 7 H28' stroke='%2358a6ff' stroke-width='1.4' opacity='.75'/%3E%3Cpath d='M14 4 L16 7 L14 10 L12 7 Z' fill='%2358a6ff'/%3E%3C/svg%3E") repeat-x center/auto 12px;margin-top:0}
.dvp-v.on{border-color:var(--accent);background:rgba(88,166,255,.12);box-shadow:0 0 0 1px var(--accent) inset}
.dvp-colors{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dvp-sw{width:24px;height:24px;border-radius:4px;border:2px solid var(--border);cursor:pointer;padding:0;background:var(--sw)}
.dvp-sw.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.dvp-pick{width:24px;height:24px;border-radius:4px;border:2px dashed var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;position:relative;overflow:hidden}
.dvp-pick input{position:absolute;inset:0;opacity:0;cursor:pointer}
.dvp-sizes,.dvp-orients{display:flex;flex-wrap:wrap;gap:6px}
.dvp-sz,.dvp-or{min-width:42px;padding:6px 10px;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--ink);cursor:pointer;font-size:12px;font-weight:700}
.dvp-sz.on,.dvp-or.on{border-color:var(--accent);background:rgba(88,166,255,.12);box-shadow:0 0 0 1px var(--accent) inset}
.dvp-none{padding:4px 9px;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--muted);cursor:pointer;font-size:11px;font-weight:700}
.dvp-none.on{border-color:var(--accent);color:var(--ink);background:rgba(88,166,255,.12)}
.dvp-label-input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--ink);padding:6px 9px;font:inherit;font-size:12.5px}
.dvp-label-input:focus{outline:none;border-color:var(--accent)}
/* かんたんプリセット（重要/注意/完了/情報/標準）＝左に色チップで一目で分かる */
.dvp-preset{border-left-width:4px}
.dvp-preset[data-ps-preset="info"]{border-left-color:rgba(88,166,255,.9)}
.dvp-preset[data-ps-preset="done"]{border-left-color:rgba(63,185,80,.9)}
.dvp-preset[data-ps-preset="warn"]{border-left-color:rgba(240,136,62,.95)}
.dvp-preset[data-ps-preset="imp"]{border-left-color:rgba(248,81,73,.9)}
/* 見出しの飾りアイコン（絵文字）選択 */
.dvp-icons{flex-wrap:wrap}
.dvp-icon{min-width:34px;font-size:15px;padding:4px 6px;line-height:1.15}
.dvp-icon-none{font-size:11px;color:var(--muted)}
/* マイプリセット（この端末に保存した見た目）。色見本＋ホバーで×削除 */
.dvp-my{flex-wrap:wrap;align-items:center}
.dvp-mywrap{position:relative;display:inline-flex}
.dvp-my-sw{width:24px;height:24px;border-radius:4px;border:2px solid var(--border);cursor:pointer;padding:0}
.dvp-my-sw.on{box-shadow:0 0 0 2px var(--accent)}
.dvp-my-x{position:absolute;top:-6px;right:-6px;width:15px;height:15px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:10px;line-height:1;padding:0;cursor:pointer;display:none}
.dvp-mywrap:hover .dvp-my-x{display:flex;align-items:center;justify-content:center}
.dvp-my-x:hover{border-color:var(--danger);color:var(--danger)}
.dvp-my-save{font-size:11px;color:var(--accent)}
/* ===== パーツの枠の色（機能3）：見出しの🎨ボタン＋色ポップ。編集中だけ表示。動作=/static/page-layout.js ===== */
.pl-bcolor-btn{display:none;margin:0 2px;min-width:20px;height:20px;padding:0 6px;border:1px solid var(--border);border-radius:3px;background:rgba(13,17,23,.55);color:var(--ink);font-size:11px;line-height:1;cursor:pointer;align-items:center;justify-content:center;flex:none}
.pl-bcolor-btn:hover{border-color:var(--accent)}
body.pl-editing .pl-bcolor-btn{display:inline-flex}
.pl-bcolor-pop{position:absolute;top:38px;left:8px;z-index:8;width:248px;max-width:94vw;max-height:72vh;overflow:hidden auto;text-align:left;
background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:10px;box-shadow:0 14px 40px rgba(0,0,0,.55);
display:flex;flex-direction:column;gap:9px}
.pl-bcolor-pop[hidden]{display:none}
/* ポップを閉じる×（右上）＝開いたら必ず閉じられる目印（見た目ポップ・区切り線ポップ共通） */
.dvp-close{align-self:flex-end;flex:none;width:27px;height:27px;margin:-3px -3px 0 0;padding:0;border:1px solid var(--border2);border-radius:4px;background:var(--surface3);color:var(--ink);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.dvp-close:hover{border-color:var(--danger);color:var(--danger);background:var(--surface)}
/* 自社ホーム(/admin)版：編集モード(dash-editing)でも 🎨見た目ボタン・区切り線バーを出す。動作=/static/dash-decor.js */
body.dash-editing .pl-bcolor-btn,body.dash-editing .pl-deco-bar{display:inline-flex}
/* admin はコンテンツ全体がハンドルなので、🎨ボタンは×(右5px)の左へ絶対配置 */
.pl-bcolor-btn-dash{position:absolute;top:5px;right:33px;z-index:6;min-width:24px;height:24px;margin:0;background:var(--surface3);border-color:var(--border2)}
/* ポップ表示中はカードのはみ出しを許可＝隣のカードに隠れない */
.dash-editing .grid-stack-item{overflow:visible}
.dash-editing .grid-stack-item.pl-pop-open{z-index:30}
/* HP monitoring dashboard parts */
.hpmon-w{height:100%;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.hpmon-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hpmon-head .ph{margin:0;border-bottom:none;padding-bottom:0}
.hpmon-badge{background:rgba(88,166,255,.16);color:var(--accent);border:1px solid rgba(88,166,255,.35)}
.hpmon-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:auto;padding-right:2px}
.hpmon-item{border:1px solid var(--border);background:linear-gradient(180deg,rgba(88,166,255,.08),rgba(255,255,255,.02));border-radius:4px;padding:8px;min-width:0}
.hpmon-item b{display:block;color:var(--ink);font-size:12px;margin-bottom:3px}
.hpmon-item span,.hpmon-list{font-size:11px;color:var(--muted);line-height:1.55}
.hpmon-list{margin:0;padding-left:18px;overflow:auto}
.hpmon-state{font-size:11px;font-weight:800;border-radius:999px;padding:3px 8px;border:1px solid var(--border)}
.hpmon-state.ok{color:var(--ok);background:rgba(63,185,80,.12);border-color:rgba(63,185,80,.35)}
.hpmon-state.warn{color:var(--warn);background:rgba(210,153,34,.12);border-color:rgba(210,153,34,.35)}
.hpmon-control{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
.hpmon-url{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:4px;background:var(--surface2);color:var(--ink);padding:7px 9px;font-size:12px}
.hpmon-result{border:1px solid var(--border);border-radius:4px;background:rgba(255,255,255,.03);padding:8px;max-height:190px;overflow:auto}
.hpmon-score{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.hpmon-score b{font-size:18px;color:var(--accent)}
.hpmon-score span{font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hpmon-row{display:grid;grid-template-columns:86px minmax(0,1fr);gap:8px;border-top:1px solid var(--border);padding:5px 0;font-size:11px}
.hpmon-row b{color:var(--ink)}
.hpmon-row span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hpmon-row.ok b{color:var(--ok)}
.hpmon-row.warn b{color:var(--warn)}
.hpmon-row.bad b,.hpmon-error{color:var(--danger)}
/* HP operation dashboard parts */
.hpbox-w{height:100%;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.hpbox-w .ph{margin:0;border-bottom:none;padding-bottom:0}
.hpbox-main{border:1px solid var(--border);background:rgba(88,166,255,.07);border-radius:4px;padding:10px;min-width:0}
.hpbox-main b{display:block;color:var(--ink);font-size:13px;margin-bottom:4px}
.hpbox-main span{display:block;color:var(--muted);font-size:11px;line-height:1.5;overflow:hidden;text-overflow:ellipsis}
.hpbox-note{display:grid;gap:7px;overflow:auto}
.hpbox-note div{border:1px solid var(--border);border-radius:4px;background:rgba(255,255,255,.03);padding:8px;color:var(--muted);font-size:12px}
/* HP management pages */
.hp-pagehead{align-items:flex-end}
.hp-page-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hp-page-card{min-height:160px}
.hp-monitor-page{grid-template-columns:repeat(2,minmax(0,1fr))}
.hp-monitor-page .hp-page-card:first-child{grid-column:1/-1}
@media(max-width:900px){.hp-page-grid,.hp-monitor-page{grid-template-columns:1fr}}
/* HP pages use the common page-layout structure */
.pl-grid[data-page="hp"] .pl-body,
.pl-grid[data-page="hp_monitor"] .pl-body{text-align:left}
.pl-grid[data-page="hp"] .hpbox-w,
.pl-grid[data-page="hp_monitor"] .hpmon-w{min-height:0}
.pl-grid[data-page="hp_monitor"] .hpmon-list{font-size:12px;line-height:1.7}
.pl-grid[data-page="hp_monitor"] .hpmon-control input{text-align:left}
/* HP monitor visual cards */
.hpmon-card{height:100%;display:flex;flex-direction:column;gap:9px;min-height:0}
.hpmon-kpi{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--border);border-radius:4px;background:rgba(88,166,255,.07);padding:8px 10px}
.hpmon-kpi b{font-size:28px;line-height:1;color:var(--accent)}
.hpmon-kpi small{color:var(--muted);font-size:12px}
.hpmon-kpi span{font-size:12px;color:var(--muted);font-weight:700}
.hpmon-tools{display:flex;gap:7px;align-items:center}
.hpmon-tools select{min-width:104px;height:31px;font-size:12px;padding:4px 8px}
.hpmon-visual{display:none;min-height:0;flex:1}
.hpmon-card[data-view="bar"] .hpmon-v-bar,.hpmon-card[data-view="donut"] .hpmon-v-donut,.hpmon-card[data-view="line"] .hpmon-v-line,.hpmon-card[data-view="table"] .hpmon-v-table{display:block}
.hpmon-barrow{display:grid;grid-template-columns:82px minmax(0,1fr) 34px;gap:7px;align-items:center;margin:6px 0;font-size:12px;color:var(--muted)}
.hpmon-barrow i{height:10px;border-radius:999px;background:linear-gradient(90deg,var(--ok),var(--accent));position:relative;overflow:hidden}
.hpmon-barrow i::after{content:"";position:absolute;left:var(--v);right:0;top:0;bottom:0;background:var(--surface2)}
.hpmon-barrow.warn i{background:linear-gradient(90deg,var(--warn),var(--accent))}
.hpmon-barrow.bad i{background:linear-gradient(90deg,var(--danger),var(--warn))}
.hpmon-barrow b{font-size:11px;color:var(--ink);text-align:right}
.hpmon-v-donut{display:none;text-align:center}
.hpmon-donut{width:112px;height:112px;margin:4px auto 8px;border-radius:50%;background:conic-gradient(var(--ok) 0 var(--score),rgba(210,153,34,.8) var(--score) 86%,rgba(248,81,73,.8) 86% 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.hpmon-donut::after{content:"";position:absolute;inset:15px;border-radius:50%;background:var(--surface)}
.hpmon-donut b,.hpmon-donut span{position:relative;z-index:1}
.hpmon-donut b{font-size:26px;color:var(--ink)}
.hpmon-donut span{font-size:10px;color:var(--muted);font-weight:700}
.hpmon-legend{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.hpmon-legend span{font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.hpmon-legend i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.hpmon-legend .warn i{background:var(--warn)}.hpmon-legend .bad i{background:var(--danger)}
.hpmon-line{height:112px;border-left:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;align-items:flex-end;gap:10px;padding:8px 8px 0;margin:6px 4px 2px}
.hpmon-line span{flex:1;min-width:18px;height:var(--v);background:linear-gradient(180deg,var(--accent),rgba(88,166,255,.2));border-radius:4px 7px 0 0;position:relative}
.hpmon-line span.warn{background:linear-gradient(180deg,var(--warn),rgba(210,153,34,.2))}
.hpmon-line span.bad{background:linear-gradient(180deg,var(--danger),rgba(248,81,73,.2))}
.hpmon-line b{position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--muted)}
.hpmon-tablewrap{max-height:170px;overflow:auto}
.hpmon-table th,.hpmon-table td{font-size:11px;padding:6px 7px}
.hpmon-pill{display:inline-flex;align-items:center;border-radius:999px;padding:2px 7px;font-size:10px;font-weight:800;border:1px solid var(--border)}
.hpmon-pill.ok{color:var(--ok);border-color:rgba(63,185,80,.4);background:rgba(63,185,80,.12)}
.hpmon-pill.warn{color:var(--warn);border-color:rgba(210,153,34,.4);background:rgba(210,153,34,.12)}
.hpmon-pill.bad{color:var(--danger);border-color:rgba(248,81,73,.4);background:rgba(248,81,73,.12)}
.hpmon-action{border:1px solid var(--border);border-radius:4px;background:rgba(255,255,255,.03);padding:7px 9px}
.hpmon-action summary{cursor:pointer;font-size:12px;font-weight:800;color:var(--accent)}
.hpmon-action p{margin:6px 0;color:var(--muted);font-size:12px;line-height:1.55}
.hpmon-action label{display:block;font-size:11px;color:var(--muted);font-weight:700}
.hpmon-setting{width:100%;box-sizing:border-box;margin-top:4px;border:1px solid var(--border);border-radius:4px;background:var(--surface2);color:var(--ink);padding:7px;font:inherit;font-size:12px;resize:vertical}
/* HP access analytics lists */
.hpaccess-card{height:100%;display:flex;flex-direction:column;gap:9px;min-height:0}
.hpaccess-head{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--border);border-radius:4px;background:rgba(88,166,255,.07);padding:8px 10px}
.hpaccess-head b{font-size:15px;color:var(--ink)}
.hpaccess-head span{font-size:11px;color:var(--accent);font-weight:800}
.hpaccess-tablewrap{flex:1;min-height:0;overflow:auto}
.hpaccess-table th,.hpaccess-table td{font-size:11px;padding:6px 7px;white-space:nowrap}
.hpaccess-table td:last-child{white-space:normal;min-width:120px}
/* HP management edit fields */
.hpedit-card{min-height:0}
.hpedit-list{display:flex;flex-direction:column;gap:8px;min-height:0;overflow:auto}
.hpedit-field{display:block;margin:0;text-align:left}
.hpedit-field span{display:block;color:var(--muted);font-size:11px;font-weight:800;margin-bottom:3px}
.hpedit-card input,.hpedit-card textarea{box-sizing:border-box;width:100%;font-size:12px;margin-top:0;padding:7px 8px}
.hpedit-card textarea{min-height:54px;resize:vertical;line-height:1.45}
.hpedit-actions{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin-top:auto;flex-wrap:wrap}
.hpedit-saved{display:none;color:var(--ok);font-size:12px;font-weight:800}
.hpedit-saved.on{display:inline}
/* HP required todo list */
.hpreq-card{min-height:0}
.hpreq-list{display:flex;flex-direction:column;gap:6px;min-height:0;overflow:auto}
.hpreq-row{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:4px;background:rgba(255,255,255,.03);padding:7px 8px;text-align:left}
.hpreq-row input{width:auto;margin:0}
.hpreq-row span{flex:1;color:var(--ink);font-size:12px;line-height:1.45}
.hpreq-row.done span{text-decoration:line-through;color:var(--muted)}
.hpreq-del{border:0;background:transparent;color:var(--muted);font-weight:900;cursor:pointer;padding:2px 6px}
.hpreq-add{display:flex;gap:8px;align-items:center}
.hpreq-add input{margin:0;font-size:12px}
.hpreq-empty{border:1px dashed var(--border);border-radius:4px;padding:10px;color:var(--muted);font-size:12px;text-align:center}
/* HP management guide */
.hpedit-guide{border:1px solid var(--border);border-radius:4px;background:rgba(63,185,80,.06);padding:8px;text-align:left;display:grid;gap:3px;max-height:120px;overflow:auto}
.hpedit-guide b{font-size:11px;color:var(--ok);line-height:1.2}
.hpedit-guide p{margin:0;color:var(--muted);font-size:11px;line-height:1.45}
/* HP live monitor check */
.hplive{border:1px solid var(--border);border-radius:4px;background:rgba(255,255,255,.035);padding:8px;display:flex;flex-direction:column;gap:7px}
.hplive-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hplive-head b{font-size:12px;color:var(--ink)}
.hplive-head span{font-size:10px;color:var(--accent);font-weight:800}
.hplive-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center}
.hplive-url{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:4px;background:var(--surface2);color:var(--ink);padding:7px 9px;font:inherit;font-size:12px}
.hplive-status{border:1px solid var(--border);border-radius:4px;background:rgba(88,166,255,.08);padding:6px 8px;color:var(--muted);font-size:11px;font-weight:800;line-height:1.35}
.hplive-status.ok{color:var(--ok);background:rgba(63,185,80,.1);border-color:rgba(63,185,80,.35)}
.hplive-status.warn{color:var(--warn);background:rgba(210,153,34,.1);border-color:rgba(210,153,34,.35)}
.hplive-status.bad{color:var(--danger);background:rgba(248,81,73,.1);border-color:rgba(248,81,73,.35)}
.hplive-urlview{color:var(--muted);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:5px}
.hplive-tablewrap{max-height:145px;overflow:auto}
.hplive-table th,.hplive-table td{font-size:11px;padding:5px 6px;vertical-align:top}
.hplive-table td:last-child{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hplive-pill{display:inline-flex;align-items:center;border-radius:999px;padding:2px 7px;font-size:10px;font-weight:800;border:1px solid var(--border);white-space:nowrap}
.hplive-pill.ok{color:var(--ok);border-color:rgba(63,185,80,.4);background:rgba(63,185,80,.12)}
.hplive-pill.warn{color:var(--warn);border-color:rgba(210,153,34,.4);background:rgba(210,153,34,.12)}
.hplive-pill.bad{color:var(--danger);border-color:rgba(248,81,73,.4);background:rgba(248,81,73,.12)}
/* HP data source status */
.hpdata-source{border:1px solid rgba(210,153,34,.4);border-radius:4px;background:rgba(210,153,34,.08);padding:7px 9px;text-align:left}
.hpdata-source b{display:block;color:var(--warn);font-size:12px;line-height:1.3}
.hpdata-source span{display:inline-flex;margin-top:3px;border-radius:999px;border:1px solid rgba(210,153,34,.45);padding:2px 7px;color:var(--warn);font-size:10px;font-weight:800;background:rgba(210,153,34,.12)}
.hpdata-source p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.45}
.hplive-part{height:100%;box-sizing:border-box}
/* HP live status full view */
.grid-stack-item[gs-id="hp-live-status"] .hplive-part{height:100%;padding:10px}
.grid-stack-item[gs-id="hp-live-status"] .hplive-tablewrap{max-height:none;overflow:visible}
.grid-stack-item[gs-id="hp-live-status"] .hplive-table th,
.grid-stack-item[gs-id="hp-live-status"] .hplive-table td{font-size:12px;padding:6px 8px}
.grid-stack-item[gs-id="hp-live-status"] .hplive-table td:last-child{max-width:none;white-space:normal;overflow:visible;text-overflow:clip}
.grid-stack-item[gs-id="hp-live-status"] .hplive-results{min-height:0;overflow:visible}
.grid-stack-item[gs-id="hp-live-status"] .hplive-status{font-size:12px}
/* HP monitor resizable scroll areas */
.pl-grid[data-page="hp_monitor"] .hp-scroll-resizable{
resize:vertical;
overflow:auto !important;
min-height:90px;
max-height:none !important;
padding-bottom:14px;
scrollbar-gutter:stable;
}
.pl-grid[data-page="hp_monitor"] .hp-scroll-resizable::after{
content:"";
display:block;
width:36px;
height:5px;
margin:8px auto 0;
border-radius:999px;
background:linear-gradient(90deg,transparent,rgba(139,148,158,.75),transparent);
}
.pl-grid[data-page="hp_monitor"] .hpaccess-card,
.pl-grid[data-page="hp_monitor"] .hpmon-card,
.pl-grid[data-page="hp_monitor"] .hplive{
overflow:visible;
}
/* HP monitor visible resize handles */
.pl-grid[data-page="hp_monitor"] .hp-resize-grip{
width:100%;
min-height:22px;
margin:3px 0 0;
border:1px dashed rgba(88,166,255,.45);
border-radius:4px;
background:rgba(88,166,255,.08);
color:var(--accent);
font-size:11px;
font-weight:800;
cursor:ns-resize;
display:flex;
align-items:center;
justify-content:center;
user-select:none;
}
.pl-grid[data-page="hp_monitor"] .hp-resize-grip span::before,
.pl-grid[data-page="hp_monitor"] .hp-resize-grip span::after{
content:"";
display:inline-block;
width:24px;
height:1px;
margin:0 8px 3px;
background:rgba(88,166,255,.65);
vertical-align:middle;
}
body.hp-resizing{cursor:ns-resize !important;user-select:none}
/* HP monitor resize flex override */
.pl-grid[data-page="hp_monitor"] .hp-scroll-resizable{
flex:0 0 auto !important;
box-sizing:border-box;
}
/* HP management resize handles */
.pl-grid[data-page="hp"] .hp-scroll-resizable{
resize:vertical;
overflow:auto !important;
flex:0 0 auto !important;
box-sizing:border-box;
min-height:70px;
max-height:none !important;
padding-bottom:10px;
scrollbar-gutter:stable;
}
.pl-grid[data-page="hp"] .hp-resize-grip{
width:100%;
min-height:22px;
margin:3px 0 0;
border:1px dashed rgba(88,166,255,.45);
border-radius:4px;
background:rgba(88,166,255,.08);
color:var(--accent);
font-size:11px;
font-weight:800;
cursor:ns-resize;
display:flex;
align-items:center;
justify-content:center;
user-select:none;
}
.pl-grid[data-page="hp"] .hp-resize-grip span::before,
.pl-grid[data-page="hp"] .hp-resize-grip span::after{
content:"";
display:inline-block;
width:24px;
height:1px;
margin:0 8px 3px;
background:rgba(88,166,255,.65);
vertical-align:middle;
}
/* HP dashboard parts match HP monitor/manage scroll behavior */
#dashGrid .grid-stack-item[gs-id^="hp-"] .hp-scroll-resizable{
resize:vertical;
overflow:auto !important;
flex:0 0 auto !important;
box-sizing:border-box;
min-height:90px;
max-height:none !important;
padding-bottom:14px;
scrollbar-gutter:stable;
}
#dashGrid .grid-stack-item[gs-id^="hp-"] .hpaccess-card,
#dashGrid .grid-stack-item[gs-id^="hp-"] .hpmon-card,
#dashGrid .grid-stack-item[gs-id^="hp-"] .hplive,
#dashGrid .grid-stack-item[gs-id^="hp-"] .hpbox-w{
overflow:visible;
}
#dashGrid .grid-stack-item[gs-id^="hp-"] .hp-resize-grip{
width:100%;
min-height:22px;
margin:3px 0 0;
border:1px dashed rgba(88,166,255,.45);
border-radius:4px;
background:rgba(88,166,255,.08);
color:var(--accent);
font-size:11px;
font-weight:800;
cursor:ns-resize;
display:flex;
align-items:center;
justify-content:center;
user-select:none;
}
#dashGrid .grid-stack-item[gs-id^="hp-"] .hp-resize-grip span::before,
#dashGrid .grid-stack-item[gs-id^="hp-"] .hp-resize-grip span::after{
content:"";
display:inline-block;
width:24px;
height:1px;
margin:0 8px 3px;
background:rgba(88,166,255,.65);
vertical-align:middle;
}
/* Settings TOC status dots */
.set-toc-cat a{
display:flex;
align-items:flex-start;
gap:7px;
}
.set-toc-dot{
width:10px;
height:10px;
border-radius:999px;
flex:0 0 10px;
margin-top:4px;
box-shadow:0 0 0 2px rgba(255,255,255,.05),0 0 0 1px var(--border);
}
.set-toc-dot.ok{background:var(--ok);box-shadow:0 0 0 2px rgba(63,185,80,.15),0 0 0 1px rgba(63,185,80,.55)}
.set-toc-dot.mid{background:var(--warn);box-shadow:0 0 0 2px rgba(210,153,34,.15),0 0 0 1px rgba(210,153,34,.55)}
.set-toc-dot.todo{background:var(--danger);box-shadow:0 0 0 2px rgba(248,81,73,.15),0 0 0 1px rgba(248,81,73,.55)}
.set-toc-dot.opt{background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.72)}
.set-toc-cat a[data-set-status="todo"]{color:#ff8b86}
.set-toc-cat a[data-set-status="mid"]{color:#d29922}
.set-toc-cat a[data-set-status="ok"]{color:var(--accent)}
.set-toc-cat a[data-set-status="opt"]{color:var(--ink)}
/* Settings TOC final status colors 20260627 */
.set-toc-dot.mid{background:var(--danger);box-shadow:0 0 0 2px rgba(248,81,73,.15),0 0 0 1px rgba(248,81,73,.55)}
.set-toc-dot.opt{background:#8b949e;box-shadow:0 0 0 2px rgba(139,148,158,.16),0 0 0 1px rgba(139,148,158,.65)}
.set-toc-cat a[data-set-status="todo"],
.set-toc-cat a[data-set-status="mid"]{color:var(--ink)}
.set-toc-cat a[data-set-status="ok"]{color:var(--ok)}
.set-toc-cat a[data-set-status="opt"]{color:var(--accent)}
/* settings individual parts patch 20260627 */
.pl-grid[data-page="settings"] .pl-body{text-align:left}
.pl-grid[data-page="settings"] .pl-body input:not([type=checkbox]):not([type=radio]),
.pl-grid[data-page="settings"] .pl-body select{text-align:left;text-align-last:auto}
.pl-grid[data-page="settings"] .settings-part-body>.panel{border:0!important;background:transparent!important;padding:0!important;margin:0!important}
.pl-grid[data-page="settings"] .settings-part-body>.panel>.ph,
.pl-grid[data-page="settings"] .settings-part-body>.panel h2.ph{margin-top:0}
.pl-grid[data-page="settings"] .settings-part .grid-stack-item-content{overflow:hidden}
.pl-grid[data-page="settings"] .settings-part .settings-part-body{flex:1 1 auto;min-height:0;overflow:auto}
.pl-grid[data-page="settings"] .settings-palette-part .pl-pi-label{white-space:normal}
/* settings toc five parts patch 20260627 */
.pl-grid[data-page="settings"] .settings-toc-body>.set-toc-h{margin:0 0 10px}
.pl-grid[data-page="settings"] .settings-toc-body>.set-toc-cat{background:transparent;border:0;border-radius:0;padding:0;margin:0}
.pl-grid[data-page="settings"] .settings-toc-body .set-toc-ct{font-size:14px}
.pl-grid[data-page="settings"] .settings-toc-body .set-toc-cd{margin-bottom:9px}
.pl-grid[data-page="settings"] .settings-toc-part .grid-stack-item-content{overflow:hidden}
.pl-grid[data-page="settings"] .settings-toc-part .settings-toc-body{flex:1 1 auto;min-height:0;overflow:auto}
/* setup panel original design restore 20260627 */
.pl-grid[data-page="settings"] .grid-stack-item[gs-id="pl-setup"] .settings-part-body>#setup.setup-panel,
.pl-grid[data-page="settings"] .settings-part-body>#setup.setup-panel{
background:rgba(63,185,80,.05)!important;
border:1px solid var(--border)!important;
border-left:3px solid var(--ok)!important;
border-radius:var(--radius)!important;
padding:20px!important;
margin:0!important;
}
.pl-grid[data-page="settings"] .grid-stack-item[gs-id="pl-setup"] .settings-part-body>#setup.setup-panel>.ph,
.pl-grid[data-page="settings"] .settings-part-body>#setup.setup-panel>.ph{
margin-top:0;
}
/* local ai dashboard parts patch 20260627 */
.ai-card{height:100%;display:flex;flex-direction:column;gap:10px}
.ai-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ai-head .ph{margin:0;border:0;padding:0;font-size:16px}
.ai-pill{display:inline-flex;align-items:center;border:1px solid var(--border);background:var(--surface2);color:var(--muted);border-radius:999px;padding:3px 9px;font-size:12px;font-weight:800;white-space:nowrap}
.ai-pill.ok{color:var(--ok);border-color:rgba(63,185,80,.45);background:rgba(63,185,80,.08)}
.ai-pill.warn{color:var(--warn);border-color:rgba(210,153,34,.45);background:rgba(210,153,34,.08)}
.ai-pill.danger{color:var(--danger);border-color:rgba(248,81,73,.45);background:rgba(248,81,73,.08)}
.ai-control{display:flex;gap:8px;align-items:center}
.ai-control input,.ai-add input,.ai-note{width:100%;box-sizing:border-box;border:1px solid var(--border);background:var(--surface2);color:var(--ink);border-radius:4px;padding:8px 10px;font:inherit;font-size:13px}
.ai-note{min-height:80px;resize:vertical;line-height:1.5}
.ai-tall{flex:1;min-height:150px}
.ai-kpis,.ai-grid2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ai-grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ai-kpis>div,.ai-grid2>div,.ai-storage-row{border:1px solid var(--border);background:var(--surface2);border-radius:4px;padding:10px}
.ai-kpis b,.ai-grid2 b,.ai-storage-row b{display:block;font-size:20px;line-height:1.1;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-kpis span,.ai-grid2 span,.ai-storage-row span{display:block;margin-top:4px;color:var(--muted);font-size:12px}
.ai-speed-big{display:flex;align-items:flex-end;gap:6px;font-size:44px;font-weight:900;color:var(--accent);line-height:1}
.ai-speed-big small{font-size:16px;color:var(--muted);font-weight:700}
.ai-meter{height:10px;border-radius:999px;background:var(--surface2);border:1px solid var(--border);overflow:hidden}
.ai-meter span{display:block;height:100%;background:linear-gradient(90deg,var(--ok),var(--warn),var(--danger));transition:width .2s}
.ai-listbox{flex:1;min-height:0;overflow:auto;border:1px solid var(--border);background:var(--surface2);border-radius:4px;padding:8px}
.ai-listbox p{margin:0}
.ai-listitem{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;border-bottom:1px solid var(--border);padding:6px 0;font-size:13px}
.ai-listitem:last-child{border-bottom:0}
.ai-listitem button{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:16px;line-height:1}
.ai-add{display:flex;gap:8px}
.ai-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.ai-checks label{display:flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--surface2);border-radius:4px;padding:8px;font-size:13px}
.ai-live-line{font-size:13px;border-bottom:1px solid var(--border);padding:6px 0}
.ai-live-line:last-child{border-bottom:0}
@media(max-width:700px){.ai-control,.ai-add{flex-direction:column;align-items:stretch}.ai-kpis,.ai-grid2,.ai-checks{grid-template-columns:1fr}.ai-speed-big{font-size:34px}}
/* ai external connection renewal 20260628 */
.ai-card[data-ai-kind="ai-external-ai"]{
background:
radial-gradient(circle at 12% 8%, rgba(34,211,238,.13), transparent 28%),
linear-gradient(145deg, rgba(15,23,42,.96), rgba(2,6,23,.98));
border:1px solid rgba(148,163,184,.24);
box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 16px 34px rgba(0,0,0,.18);
}
.ai-external-board{height:100%;min-height:0;display:flex;flex-direction:column;gap:8px}
.ai-ext-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ai-ext-kpis>div{border:1px solid rgba(148,163,184,.22);background:rgba(2,6,23,.48);border-radius:4px;padding:8px;min-width:0}
.ai-ext-kpis b{display:block;color:#8bd5ff;font-size:23px;line-height:1;font-variant-numeric:tabular-nums}
.ai-ext-kpis span{display:block;color:rgba(230,237,243,.64);font-size:11px;margin-top:5px}
.ai-ext-policy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.ai-ext-policy label{display:flex;align-items:center;gap:8px;border:1px solid rgba(148,163,184,.22);background:rgba(15,23,42,.62);border-radius:4px;padding:7px 8px;min-width:0}
.ai-ext-policy span{display:flex;flex-direction:column;gap:2px;font-size:12px;font-weight:800;color:#e8f1fb;min-width:0}
.ai-ext-policy small{font-size:10.5px;color:rgba(230,237,243,.58);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-ext-toolbar{display:flex;align-items:center;gap:8px;min-height:28px}
.ai-ext-toolbar span{font-size:12px;color:rgba(230,237,243,.68)}
.ai-ext-toolbar .ai-ext-policy-state{margin-right:auto;color:#7ee787;font-weight:800}
.ai-ext-table{min-height:160px;resize:vertical;max-height:520px;background:rgba(2,6,23,.42);border-color:rgba(148,163,184,.22);padding:0}
.ai-ext-services{width:100%;min-width:820px;border-collapse:collapse}
.ai-ext-services th{position:sticky;top:0;z-index:1;text-align:left;background:#111827;color:#b9c7d5;font-size:11px;padding:7px;border-bottom:1px solid rgba(148,163,184,.22)}
.ai-ext-services td{font-size:12px;padding:7px;border-bottom:1px solid rgba(148,163,184,.16);vertical-align:top;color:#dce7f3}
.ai-ext-services td:first-child b{display:block;color:#f8fbff;line-height:1.2}
.ai-ext-services td:first-child small{display:block;color:rgba(230,237,243,.52);margin-top:2px}
.ai-ext-dot{display:inline-block;width:9px;height:9px;border-radius:999px;margin-right:6px;box-shadow:0 0 12px currentColor}
.ai-ext-dot.ok{color:#3fb950;background:#3fb950}.ai-ext-dot.warn{color:#d29922;background:#d29922}.ai-ext-dot.danger{color:#f85149;background:#f85149}
.ai-ext-status{display:inline-flex;border-radius:999px;border:1px solid currentColor;padding:2px 7px;font-size:11px;font-weight:900;white-space:nowrap}
.ai-ext-status.ok{color:#7ee787;background:rgba(63,185,80,.08)}.ai-ext-status.warn{color:#f2cc60;background:rgba(210,153,34,.08)}.ai-ext-status.danger{color:#ff9b96;background:rgba(248,81,73,.08)}
.ai-ext-endpoint{max-width:210px;color:#9cc9ff;word-break:break-all}
.ai-ext-instruction{min-width:220px;color:#cde8ff}
.ai-ext-actions button{border:1px solid rgba(148,163,184,.22);background:rgba(15,23,42,.82);color:#e8f1fb;border-radius:4px;padding:4px 7px;font-size:11px;cursor:pointer}
.ai-ext-actions .ai-ext-del{color:#ff9b96;font-size:14px;line-height:1}
.ai-ext-add{display:grid;grid-template-columns:120px minmax(130px,.8fr) minmax(160px,1fr) auto;gap:7px}
.ai-ext-add input,.ai-ext-add select{width:100%;box-sizing:border-box;border:1px solid rgba(148,163,184,.24);background:rgba(2,6,23,.48);color:#e8f1fb;border-radius:4px;padding:7px 8px;font:inherit;font-size:12px;min-width:0}
.ai-ext-note{min-height:62px;max-height:180px;background:rgba(2,6,23,.42);border-color:rgba(148,163,184,.22)}
@media(max-width:900px){.ai-ext-policy,.ai-ext-kpis{grid-template-columns:1fr}.ai-ext-add{grid-template-columns:1fr}.ai-ext-services{min-width:720px}}
/* dashboard hp dedicated parts patch 20260627 */
.hpdash-card{height:100%;display:flex;flex-direction:column;gap:10px}
.hpdash-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hpdash-head .ph{margin:0;border:0;padding:0;font-size:16px}
.hpdash-pill{border:1px solid rgba(88,166,255,.45);background:rgba(88,166,255,.08);color:var(--accent);border-radius:999px;padding:3px 9px;font-size:12px;font-weight:800;white-space:nowrap}
.hpdash-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hpdash-kpis label{display:flex;flex-direction:column;gap:5px;border:1px solid var(--border);background:var(--surface2);border-radius:4px;padding:8px;color:var(--muted);font-size:12px;font-weight:700}
.hpdash-kpis input,.hpdash-add input,.hpdash-note{width:100%;box-sizing:border-box;border:1px solid var(--border);background:var(--bg);color:var(--ink);border-radius:4px;padding:8px 10px;font:inherit;font-size:13px}
.hpdash-result{border:1px solid var(--border);background:var(--surface2);border-radius:4px;padding:10px;font-size:14px}
.hpdash-result b{color:var(--ok);font-size:20px;margin:0 4px}
.hpdash-note{min-height:86px;resize:vertical;line-height:1.5;background:var(--surface2)}
.hpdash-tall{flex:1;min-height:160px}
.hpdash-add{display:flex;gap:8px}
.hpdash-list{flex:1;min-height:0;overflow:auto;border:1px solid var(--border);background:var(--surface2);border-radius:4px;padding:8px}
.hpdash-item{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;border-bottom:1px solid var(--border);padding:6px 0;font-size:13px}
.hpdash-item:last-child{border-bottom:0}
.hpdash-item button{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:16px;line-height:1}
@media(max-width:700px){.hpdash-kpis{grid-template-columns:1fr}.hpdash-add{flex-direction:column}}
/* HP dashboard ops cool design 20260628 */
.hpdash-card{
background:
linear-gradient(145deg, rgba(88,166,255,.08), rgba(255,255,255,0) 34%),
linear-gradient(180deg, rgba(18,27,38,.96), rgba(8,12,20,.98));
border:1px solid rgba(148,163,184,.22);
box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 12px 30px rgba(0,0,0,.18);
}
.hpdash-head{min-height:28px}
.hpdash-head .ph{letter-spacing:0;color:#e8f1fb}
.hpdash-pill{background:rgba(47,129,247,.14);box-shadow:0 0 18px rgba(47,129,247,.08)}
.hpdash-op-card{height:100%;display:flex;flex-direction:column;gap:8px;min-height:0}
.hpdash-op-top{display:grid;grid-template-columns:minmax(240px,.55fr) minmax(0,1fr);gap:8px;min-height:96px}
.hpdash-op-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hpdash-op-kpis>div{border:1px solid rgba(148,163,184,.22);background:rgba(15,23,42,.68);border-radius:4px;padding:9px;min-width:0}
.hpdash-op-kpis b{display:block;color:#8bd5ff;font-size:24px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hpdash-op-kpis span{display:block;color:rgba(230,237,243,.64);font-size:11px;margin-top:5px}
.hpdash-op-chart{border:1px solid rgba(148,163,184,.22);background:rgba(2,6,23,.38);border-radius:4px;padding:8px;overflow:hidden;display:grid;align-content:center;gap:5px}
.hpops-bar{display:grid;grid-template-columns:minmax(90px,.42fr) minmax(0,1fr) 44px;align-items:center;gap:7px;font-size:11px;color:rgba(230,237,243,.72)}
.hpops-bar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hpops-bar i{display:block;height:8px;border-radius:999px;background:linear-gradient(90deg,#2f81f7,#56d4dd);box-shadow:0 0 12px rgba(88,166,255,.22)}
.hpops-bar.warn i{background:linear-gradient(90deg,#f97316,#f85149);box-shadow:0 0 12px rgba(248,81,73,.24)}
.hpops-bar b{text-align:right;color:#e8f1fb;font-variant-numeric:tabular-nums}
.hpops-empty{color:rgba(230,237,243,.58);font-size:12px;text-align:center}
.hpdash-op-form{display:grid;grid-template-columns:repeat(5,minmax(110px,1fr)) auto auto;gap:6px;align-items:end}
.hpdash-op-form label{display:flex;flex-direction:column;gap:4px;min-width:0;color:rgba(230,237,243,.62);font-size:10.5px;font-weight:800}
.hpdash-op-form input,.hpdash-op-form select{width:100%;box-sizing:border-box;border:1px solid rgba(148,163,184,.24);background:rgba(2,6,23,.48);color:#e8f1fb;border-radius:4px;padding:7px 8px;font:inherit;font-size:12px;min-width:0}
.hpdash-op-form .btn{white-space:nowrap}
.hpdash-op-tablewrap{flex:1;min-height:150px;max-height:330px;overflow:auto;border:1px solid rgba(148,163,184,.22);background:rgba(2,6,23,.36);border-radius:4px}
.hpdash-op-table{min-width:1040px}
.hpdash-op-table th{position:sticky;top:0;background:#111827;z-index:1;color:#b9c7d5;font-size:11px}
.hpdash-op-table td{font-size:12px;vertical-align:top}
.hpops-instruction{min-width:170px;color:#cde8ff}
.hpops-judge{color:#7ee787;font-weight:800}
.hpops-del{border:0;background:transparent;color:var(--muted);font-size:16px;line-height:1;cursor:pointer}
.hpops-del:hover{color:var(--danger)}
.hpdash-card .hpdash-kpis label,.hpdash-card .hpdash-result,.hpdash-card .hpdash-list,.hpdash-card .hpdash-note{background:rgba(2,6,23,.38);border-color:rgba(148,163,184,.22)}
@media(max-width:1100px){.hpdash-op-top{grid-template-columns:1fr}.hpdash-op-form{grid-template-columns:1fr 1fr}.hpdash-op-form .btn{min-height:32px}}
/* HP search rank trends */
.hpdash-ranktrend-card{height:100%;display:flex;flex-direction:column;gap:8px;min-height:0}
.hpdash-ranktrend-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hpdash-ranktrend-toolbar label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;font-weight:800}
.hpdash-ranktrend-toolbar input,.hpdash-ranktrend-toolbar select,.ranktrend-add input,.ranktrend-add select{border:1px solid var(--border);background:var(--surface2);color:var(--ink);border-radius:4px;padding:6px 8px;font:inherit;font-size:12px;min-width:0}
.hpdash-seg{display:inline-flex;border:1px solid var(--border);border-radius:4px;overflow:hidden;background:var(--surface2)}
.hpdash-seg button{border:0;border-right:1px solid var(--border);background:transparent;color:var(--muted);padding:6px 10px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.hpdash-seg button:last-child{border-right:0}
.hpdash-seg button.active{background:rgba(88,166,255,.18);color:var(--accent)}
.ranktrend-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ranktrend-kpis>div{border:1px solid var(--border);background:var(--surface2);border-radius:4px;padding:7px 8px}
.ranktrend-kpis b{display:block;color:var(--accent);font-size:19px;line-height:1}
.ranktrend-kpis span{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.ranktrend-chart{flex:1;min-height:210px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));border-radius:4px;overflow:hidden}
.ranktrend-chart svg{display:block;width:100%;height:100%;min-height:210px}
.ranktrend-axis{stroke:rgba(139,148,158,.48);stroke-width:1}
.ranktrend-grid{stroke:rgba(139,148,158,.18);stroke-width:1}
.ranktrend-axislabel{font-size:11px;fill:var(--muted)}
.ranktrend-legend{font-size:11px;font-weight:700}
.ranktrend-empty{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:13px;padding:14px}
.ranktrend-add{display:grid;grid-template-columns:100px 132px 1fr 1fr 88px auto auto;gap:6px;align-items:center}
.ranktrend-tablewrap{min-height:150px;max-height:300px;overflow:auto;border:1px solid var(--border);background:var(--surface2);border-radius:4px}
.ranktrend-table{min-width:920px}
.ranktrend-table td,.ranktrend-table th{font-size:12px;vertical-align:top}
.ranktrend-engine{display:inline-flex;align-items:center;border-radius:999px;padding:2px 7px;font-size:11px;font-weight:800}
.ranktrend-engine.google{background:rgba(47,129,247,.14);color:#58a6ff;border:1px solid rgba(47,129,247,.35)}
.ranktrend-engine.yahoo{background:rgba(249,115,22,.14);color:#fb923c;border:1px solid rgba(249,115,22,.38)}
.ranktrend-diff.up{color:var(--ok);font-weight:800}
.ranktrend-diff.down{color:var(--danger);font-weight:800}
.ranktrend-del{border:0;background:transparent;color:var(--muted);font-size:16px;line-height:1;cursor:pointer}
.ranktrend-del:hover{color:var(--danger)}
@media(max-width:1000px){.ranktrend-add{grid-template-columns:1fr 1fr}.ranktrend-addbtn,.ranktrend-sample{grid-column:auto}.ranktrend-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* dashboard hp rank 30 days part patch 20260627 */
.hpdash-rank30-card{height:100%;display:flex;flex-direction:column;gap:8px;min-height:0}
.hpdash-rank-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hpdash-rank-controls label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;font-weight:800}
.hpdash-rank-controls input{border:1px solid var(--border);background:var(--surface2);color:var(--ink);border-radius:4px;padding:6px 8px;font:inherit;font-size:13px}
.hpdash-rank-chart{flex:1;min-height:180px;border:1px solid var(--border);background:var(--surface2);border-radius:4px;overflow:hidden}
.hpdash-rank-chart svg{display:block;width:100%;height:100%;min-height:180px}
.hpdash-rank-data{width:100%;box-sizing:border-box;min-height:86px;resize:vertical;border:1px solid var(--border);background:var(--surface2);color:var(--ink);border-radius:4px;padding:8px 10px;font:inherit;font-size:12px;line-height:1.45}
.hpdash-rank-legend{font-size:11px;fill:var(--muted)}
.hpdash-rank-axis{stroke:rgba(139,148,158,.45);stroke-width:1}
.hpdash-rank-grid{stroke:rgba(139,148,158,.18);stroke-width:1}
.hpdash-rank-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:13px;padding:12px;text-align:center}
/* dashboard hp blog table part patch 20260627 */
.hpdash-blog-card{height:100%;display:flex;flex-direction:column;gap:8px;min-height:0}
.hpdash-blog-add{display:grid;grid-template-columns:1.4fr 1.2fr .8fr .8fr 1fr .5fr .75fr 1fr auto;gap:6px;align-items:center}
.hpdash-blog-input{min-width:0;width:100%;box-sizing:border-box;border:1px solid var(--border);background:var(--surface2);color:var(--ink);border-radius:4px;padding:7px 8px;font:inherit;font-size:12px}
.hpdash-blog-tablewrap{flex:1;min-height:0;overflow:auto;border:1px solid var(--border);border-radius:4px;background:var(--surface2)}
.hpdash-blog-table{min-width:980px}
.hpdash-blog-table td,.hpdash-blog-table th{font-size:12px;vertical-align:top}
.hpdash-blog-title a{font-weight:800;color:var(--accent)}
.hpdash-blog-del{border:0;background:transparent;color:var(--muted);font-size:16px;line-height:1;cursor:pointer}
.hpdash-blog-del:hover{color:var(--danger)}
@media(max-width:1000px){.hpdash-blog-add{grid-template-columns:1fr 1fr}.hpdash-blog-addbtn{grid-column:1/-1}}
/* local AI message input */
.ai-msg-tools,.ai-msg-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ai-msg-model{min-width:180px;max-width:100%;background:var(--surface2);color:var(--ink);border:1px solid var(--border);border-radius:4px;padding:7px 9px;font:inherit}
.ai-msg-input{min-height:96px;resize:vertical;background:var(--surface2);color:var(--ink);border:1px solid var(--border);border-radius:4px;padding:10px;font:inherit}
.ai-msg-history{min-height:120px}
.ai-msg-row{border-bottom:1px solid var(--border);padding:8px 0;display:grid;gap:8px}
.ai-msg-row:last-child{border-bottom:0}
.ai-msg-q,.ai-msg-a{display:grid;gap:4px}
.ai-msg-q b,.ai-msg-a b{font-size:12px;color:var(--accent)}
.ai-msg-q div,.ai-msg-a div{white-space:pre-wrap;line-height:1.45}
/* AI CPU/GPU live gauges */
.ai-gauge-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;min-height:0}
.ai-gauge{border:1px solid var(--border);background:var(--surface2);border-radius:4px;padding:10px;min-width:0}
.ai-gauge-dial{position:relative;aspect-ratio:1.55/1;overflow:hidden;border-radius:120px 120px 12px 12px;background:radial-gradient(circle at 50% 92%, var(--surface) 0 20%, transparent 21%),conic-gradient(from 245deg, var(--ok) 0 32%, var(--warn) 32% 62%, var(--danger) 62% 75%, transparent 75% 100%);border:1px solid rgba(255,255,255,.08)}
.ai-gauge-dial:before{content:"";position:absolute;inset:18% 16% -52%;border-radius:50%;background:var(--surface2);border:1px solid rgba(255,255,255,.06)}
.ai-gauge-needle{position:absolute;left:50%;bottom:9%;width:3px;height:58%;background:var(--ink);border-radius:99px;transform-origin:50% 96%;transform:translateX(-50%) rotate(-115deg);transition:transform .35s ease;box-shadow:0 0 8px rgba(255,255,255,.25)}
.ai-gauge-dial b{position:absolute;left:0;right:0;bottom:10%;text-align:center;font-size:21px;color:var(--accent);line-height:1}
.ai-gauge-label{margin-top:8px;font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-gauge-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-gauge.warn .ai-gauge-dial b{color:var(--warn)}
.ai-gauge.danger .ai-gauge-dial b{color:var(--danger)}
.ai-hw-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
@media(max-width:900px){.ai-gauge-board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.ai-gauge-board{grid-template-columns:1fr}}
/* AI CPU/GPU cool gauge polish 20260627 */
.ai-card[data-ai-kind="ai-cpu-gpu"]{
background:
linear-gradient(135deg, rgba(11,18,28,.92), rgba(18,27,38,.72)),
radial-gradient(circle at 18% 12%, rgba(86,212,221,.16), transparent 34%),
radial-gradient(circle at 88% 20%, rgba(126,231,135,.12), transparent 30%);
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-head{
padding-bottom:2px;
border-bottom:1px solid rgba(255,255,255,.06);
}
.ai-gauge-board{
gap:12px;
}
.ai-gauge{
position:relative;
overflow:hidden;
padding:12px;
background:
linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
rgba(8,13,20,.78);
border-color:rgba(121,192,255,.22);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.18);
}
.ai-gauge:before{
content:"";
position:absolute;
inset:-40% -20% auto -20%;
height:70%;
background:linear-gradient(90deg, transparent, rgba(86,212,221,.18), transparent);
transform:rotate(-8deg);
pointer-events:none;
}
.ai-gauge-dial{
background:
radial-gradient(circle at 50% 88%, rgba(255,255,255,.12) 0 2px, transparent 3px),
radial-gradient(circle at 50% 92%, rgba(8,13,20,1) 0 18%, transparent 19%),
repeating-conic-gradient(from 244deg, rgba(255,255,255,.45) 0deg 1deg, transparent 1deg 8deg),
conic-gradient(from 245deg, #34d399 0 30%, #facc15 30% 58%, #fb923c 58% 68%, #ef4444 68% 75%, transparent 75% 100%);
border-color:rgba(121,192,255,.28);
box-shadow:inset 0 0 22px rgba(0,0,0,.5), 0 0 18px rgba(86,212,221,.08);
}
.ai-gauge-dial:before{
background:
radial-gradient(circle at 50% 42%, rgba(121,192,255,.10), transparent 32%),
linear-gradient(180deg, rgba(10,18,28,.96), rgba(5,8,13,.98));
border-color:rgba(255,255,255,.08);
}
.ai-gauge-needle{
width:4px;
height:62%;
bottom:8%;
background:linear-gradient(180deg, #e6edf3, #56d4dd);
box-shadow:0 0 10px rgba(86,212,221,.55), 0 0 2px #fff;
}
.ai-gauge-needle:after{
content:"";
position:absolute;
left:50%;
bottom:-7px;
width:14px;
height:14px;
border-radius:50%;
background:#e6edf3;
border:3px solid #0b111a;
transform:translateX(-50%);
box-shadow:0 0 10px rgba(86,212,221,.45);
}
.ai-gauge-dial b{
bottom:12%;
font-size:24px;
font-variant-numeric:tabular-nums;
color:#7ee787;
text-shadow:0 0 12px rgba(126,231,135,.35);
}
.ai-gauge.warn .ai-gauge-dial b{
color:#facc15;
text-shadow:0 0 12px rgba(250,204,21,.35);
}
.ai-gauge.danger .ai-gauge-dial b{
color:#ff7b72;
text-shadow:0 0 12px rgba(255,123,114,.4);
}
.ai-gauge-label{
display:flex;
align-items:center;
gap:6px;
letter-spacing:0;
}
.ai-gauge-label:before{
content:"";
width:7px;
height:7px;
border-radius:50%;
background:#56d4dd;
box-shadow:0 0 10px rgba(86,212,221,.75);
}
.ai-gauge-sub{
margin-top:3px;
font-variant-numeric:tabular-nums;
}
.ai-hw-foot{
padding:8px 10px;
border:1px solid rgba(121,192,255,.16);
background:rgba(8,13,20,.55);
border-radius:4px;
}
.ai-hw-updated:before{
content:"LIVE";
display:inline-flex;
margin-right:8px;
padding:1px 6px;
border-radius:999px;
color:#7ee787;
border:1px solid rgba(126,231,135,.4);
background:rgba(126,231,135,.08);
font-size:10px;
font-weight:900;
}
/* AI research real list 20260627 */
.ai-research-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
.ai-research-summary>div{border:1px solid rgba(93,230,255,.18);background:linear-gradient(180deg,rgba(16,24,35,.94),rgba(8,13,20,.94));border-radius:4px;padding:9px 10px}
.ai-research-summary b{display:block;font-size:22px;color:#e9fbff;line-height:1;text-shadow:0 0 14px rgba(93,230,255,.25)}
.ai-research-summary span{display:block;margin-top:5px;font-size:11px;color:#8ea2b4}
.ai-research-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.ai-research-list{max-height:420px;overflow:auto;padding-right:4px}
.ai-research-item{border:1px solid rgba(148,163,184,.22);background:linear-gradient(180deg,rgba(11,18,28,.96),rgba(7,11,17,.96));border-radius:4px;padding:10px 11px;margin-bottom:9px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.ai-research-item-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ai-research-item-head b{color:#f7fbff;font-size:13.5px;line-height:1.35}
.ai-research-item-head span{color:#7dd3fc;font-size:11px;white-space:nowrap}
.ai-research-meta{display:flex;gap:6px;flex-wrap:wrap;margin:7px 0}
.ai-research-meta span{font-size:10.5px;color:#b6c7d6;border:1px solid rgba(125,211,252,.18);background:rgba(14,165,233,.08);border-radius:999px;padding:2px 7px}
.ai-research-meta .hot{color:#ffe8a3;border-color:rgba(245,158,11,.32);background:rgba(245,158,11,.12)}
.ai-research-excerpt{white-space:pre-line;color:#d7e1ea;font-size:12px;line-height:1.55;max-height:7.8em;overflow:auto;border-top:1px solid rgba(148,163,184,.14);padding-top:8px}
.ai-research-links{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.ai-research-links a{font-size:11px;color:#67e8f9;text-decoration:none;border:1px solid rgba(103,232,249,.22);border-radius:999px;padding:3px 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-research-links a:hover{border-color:#67e8f9;background:rgba(103,232,249,.08)}
/* AI models live compact 20260628 */
.ai-card[data-ai-kind="ai-models"]{gap:8px}
.ai-model-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ai-model-kpis>div{border:1px solid rgba(34,197,94,.18);background:linear-gradient(180deg,rgba(11,18,28,.94),rgba(8,13,20,.94));border-radius:4px;padding:8px 10px}
.ai-model-kpis b{display:block;font-size:21px;line-height:1;color:#dfffee}
.ai-model-kpis span{display:block;margin-top:4px;font-size:11px;color:#8ea2b4}
.ai-model-toolbar{display:flex;align-items:center;gap:9px;min-height:28px}
.ai-model-live-list{flex:0 1 auto;min-height:70px;max-height:150px;padding:6px}
.ai-model-row{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:8px;border:1px solid rgba(148,163,184,.16);background:rgba(15,23,42,.6);border-radius:4px;padding:7px 8px;margin-bottom:6px}
.ai-model-row:last-child{margin-bottom:0}
.ai-model-dot{width:9px;height:9px;border-radius:999px;background:#64748b;box-shadow:0 0 0 3px rgba(100,116,139,.14)}
.ai-model-row.using{border-color:rgba(34,197,94,.42);background:linear-gradient(90deg,rgba(34,197,94,.16),rgba(15,23,42,.72))}
.ai-model-row.using .ai-model-dot{background:#22c55e;box-shadow:0 0 12px rgba(34,197,94,.85),0 0 0 3px rgba(34,197,94,.18)}
.ai-model-row.ready{border-color:rgba(56,189,248,.28)}
.ai-model-row.ready .ai-model-dot{background:#38bdf8;box-shadow:0 0 9px rgba(56,189,248,.55),0 0 0 3px rgba(56,189,248,.14)}
.ai-model-name{font-size:13px;color:#f8fafc;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-model-side{text-align:right;white-space:nowrap}
.ai-model-side b{display:block;color:#bbf7d0;font-size:11px;line-height:1.1}
.ai-model-side small{display:block;color:#94a3b8;font-size:10px;margin-top:2px}
/* AI blog drafts list 20260628 */
.ai-card[data-ai-kind="ai-blog-drafts"]{gap:8px}
.ai-blog-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ai-blog-kpis>div{border:1px solid rgba(14,165,233,.22);background:linear-gradient(180deg,rgba(11,18,28,.94),rgba(8,13,20,.94));border-radius:4px;padding:8px 9px}
.ai-blog-kpis b{display:block;font-size:19px;line-height:1;color:#e0f2fe;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-blog-kpis span{display:block;margin-top:4px;font-size:11px;color:#8ea2b4}
.ai-blog-toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ai-blog-draft-list{min-height:120px;max-height:260px;overflow:auto;padding:6px}
.ai-blog-row{border:1px solid rgba(148,163,184,.18);background:linear-gradient(180deg,rgba(15,23,42,.78),rgba(8,13,20,.92));border-radius:4px;padding:9px 10px;margin-bottom:8px}
.ai-blog-row.wp{border-color:rgba(34,197,94,.28)}
.ai-blog-row-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ai-blog-row-head b{font-size:13px;color:#f8fafc;line-height:1.35}
.ai-blog-row-head span{font-size:11px;color:#7dd3fc;white-space:nowrap}
.ai-blog-meta{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.ai-blog-meta span{font-size:10.5px;color:#b6c7d6;border:1px solid rgba(125,211,252,.18);background:rgba(14,165,233,.08);border-radius:999px;padding:2px 7px}
.ai-blog-excerpt{color:#d7e1ea;font-size:12px;line-height:1.5;max-height:4.6em;overflow:auto;border-top:1px solid rgba(148,163,184,.14);padding-top:7px}
/* AI thinking and scroll resize 20260628 */
.ai-listbox.ai-scroll-resizable{flex:0 0 auto;resize:vertical;max-height:none}
.ai-scroll-resize-grip{width:100%;min-height:22px;margin:3px 0 0;border:1px dashed rgba(125,211,252,.32);background:linear-gradient(180deg,rgba(15,23,42,.78),rgba(8,13,20,.9));color:#8ecae6;border-radius:4px;cursor:ns-resize;font-size:11px;font-weight:800;letter-spacing:0;display:flex;align-items:center;justify-content:center}
.ai-scroll-resize-grip span{display:inline-flex;align-items:center;gap:8px}
.ai-scroll-resize-grip span::before,.ai-scroll-resize-grip span::after{content:"";display:inline-block;width:22px;height:1px;background:rgba(125,211,252,.45)}
.ai-scroll-resize-grip:hover{border-color:#67e8f9;color:#e0faff;background:rgba(14,165,233,.12)}
body.ai-scroll-resizing{cursor:ns-resize;user-select:none}
.ai-thinking-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ai-thinking-kpis>div{border:1px solid rgba(34,197,94,.18);background:linear-gradient(180deg,rgba(11,18,28,.94),rgba(8,13,20,.94));border-radius:4px;padding:8px 10px}
.ai-thinking-kpis b{display:block;font-size:20px;line-height:1;color:#e7fff3}
.ai-thinking-kpis span{display:block;margin-top:4px;font-size:11px;color:#8ea2b4}
.ai-thinking-toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ai-thinking-list{min-height:120px;max-height:260px}
.ai-thinking-row{border:1px solid rgba(148,163,184,.18);background:linear-gradient(180deg,rgba(15,23,42,.78),rgba(8,13,20,.92));border-radius:4px;padding:9px 10px;margin-bottom:8px}
.ai-thinking-row.run{border-color:rgba(245,158,11,.38);background:linear-gradient(90deg,rgba(245,158,11,.13),rgba(15,23,42,.76))}
.ai-thinking-row.ok{border-color:rgba(34,197,94,.34)}
.ai-thinking-row.danger{border-color:rgba(239,68,68,.42)}
.ai-thinking-title{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.ai-thinking-title span{width:8px;height:8px;border-radius:999px;background:#38bdf8;box-shadow:0 0 9px rgba(56,189,248,.55)}
.ai-thinking-row.run .ai-thinking-title span{background:#f59e0b;box-shadow:0 0 10px rgba(245,158,11,.6)}
.ai-thinking-row.ok .ai-thinking-title span{background:#22c55e;box-shadow:0 0 10px rgba(34,197,94,.6)}
.ai-thinking-row.danger .ai-thinking-title span{background:#ef4444;box-shadow:0 0 10px rgba(239,68,68,.62)}
.ai-thinking-title b{font-size:13px;color:#f8fafc}
.ai-thinking-body{font-size:12px;line-height:1.55;color:#d7e1ea}
/* AI CPU/GPU hyper realistic meter 20260628 */
.ai-card[data-ai-kind="ai-cpu-gpu"]{
background:
linear-gradient(180deg, rgba(15,21,30,.96), rgba(6,9,14,.98)),
linear-gradient(135deg, rgba(43,54,68,.68), rgba(8,12,18,.86));
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-board{
gap:14px;
align-items:stretch;
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge{
--meter-accent:#56d4dd;
--meter-mid:#facc15;
--meter-danger:#ef4444;
min-height:178px;
padding:14px 12px 12px;
border-radius:5px;
border:1px solid rgba(182,198,218,.22);
background:
linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,0) 28%),
repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 6px),
linear-gradient(180deg, rgba(19,27,37,.94), rgba(5,8,13,.96));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -18px 28px rgba(0,0,0,.34),
0 14px 26px rgba(0,0,0,.30);
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge[data-gauge="ram"]{--meter-accent:#7ee787;--meter-mid:#f2cc60;--meter-danger:#ff7b72}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge[data-gauge="gpu"]{--meter-accent:#79c0ff;--meter-mid:#f2cc60;--meter-danger:#ff7b72}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge[data-gauge="vram"]{--meter-accent:#ffb86b;--meter-mid:#f2cc60;--meter-danger:#ff7b72}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge:before{
content:"";
position:absolute;
inset:7px;
height:auto;
border-radius:4px;
background:
linear-gradient(180deg, rgba(255,255,255,.10), transparent 32%),
linear-gradient(90deg, rgba(255,255,255,.04), transparent 24%, transparent 76%, rgba(255,255,255,.035));
transform:none;
pointer-events:none;
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge:after{
content:"";
position:absolute;
right:10px;
top:10px;
width:8px;
height:8px;
border-radius:50%;
background:var(--meter-accent);
box-shadow:0 0 10px var(--meter-accent), 0 0 20px rgba(255,255,255,.10);
opacity:.82;
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-dial{
position:relative;
isolation:isolate;
aspect-ratio:1.72/1;
border-radius:999px 999px 18px 18px;
border:1px solid rgba(255,255,255,.20);
background:
linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 18%),
radial-gradient(ellipse at 50% 105%, rgba(255,255,255,.18) 0 8%, transparent 9%),
radial-gradient(ellipse at 50% 98%, rgba(4,7,12,1) 0 22%, transparent 23%),
repeating-conic-gradient(from 244deg, rgba(255,255,255,.80) 0deg 1.25deg, transparent 1.25deg 6deg),
repeating-conic-gradient(from 245deg, rgba(255,255,255,.34) 0deg 2deg, transparent 2deg 23deg),
conic-gradient(from 245deg, #22c55e 0 28%, var(--meter-mid) 28% 58%, #fb923c 58% 68%, var(--meter-danger) 68% 75%, transparent 75% 100%),
linear-gradient(180deg, #111a25, #05080d);
box-shadow:
inset 0 0 0 7px rgba(255,255,255,.045),
inset 0 0 0 10px rgba(0,0,0,.48),
inset 0 -26px 28px rgba(0,0,0,.72),
inset 0 18px 24px rgba(255,255,255,.05),
0 0 0 1px rgba(0,0,0,.82),
0 16px 22px rgba(0,0,0,.32);
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-dial:before{
content:"";
position:absolute;
inset:20% 15% -56%;
z-index:1;
border-radius:50%;
border:1px solid rgba(255,255,255,.10);
background:
radial-gradient(circle at 50% 35%, rgba(255,255,255,.08), transparent 25%),
radial-gradient(circle at 50% 63%, rgba(0,0,0,.78) 0 13%, transparent 14%),
linear-gradient(180deg, #0f1722, #03060b 70%);
box-shadow:
inset 0 1px 16px rgba(255,255,255,.05),
inset 0 -18px 28px rgba(0,0,0,.78);
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-dial:after{
content:"";
position:absolute;
inset:2px 4px 0;
z-index:6;
border-radius:999px 999px 18px 18px;
background:
linear-gradient(116deg, rgba(255,255,255,.30) 0 10%, rgba(255,255,255,.08) 11% 20%, transparent 21% 58%, rgba(255,255,255,.10) 59% 64%, transparent 65%),
linear-gradient(180deg, rgba(255,255,255,.10), transparent 36%);
mix-blend-mode:screen;
pointer-events:none;
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-needle{
z-index:4;
left:50%;
bottom:9%;
width:5px;
height:66%;
border-radius:99px 99px 2px 2px;
background:
linear-gradient(90deg, rgba(0,0,0,.38), transparent 32%, rgba(255,255,255,.75) 50%, transparent 68%, rgba(0,0,0,.28)),
linear-gradient(180deg, #f4fbff 0 7%, var(--meter-accent) 7% 77%, #161b22 78% 100%);
clip-path:polygon(50% 0, 82% 72%, 58% 100%, 42% 100%, 18% 72%);
transform-origin:50% 96%;
box-shadow:0 0 12px color-mix(in srgb, var(--meter-accent) 72%, transparent), 0 0 2px #fff;
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-needle:before{
content:"";
position:absolute;
left:50%;
bottom:-16px;
width:10px;
height:22px;
border-radius:99px;
background:linear-gradient(180deg, #05080d, #293340);
transform:translateX(-50%);
box-shadow:inset 0 1px 2px rgba(255,255,255,.25);
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-needle:after{
content:"";
position:absolute;
left:50%;
bottom:-10px;
width:22px;
height:22px;
border-radius:50%;
background:
radial-gradient(circle at 35% 28%, #ffffff 0 8%, transparent 9%),
radial-gradient(circle, var(--meter-accent) 0 27%, #0b111a 28% 46%, #d7e1ee 47% 66%, #111827 67%);
border:1px solid rgba(255,255,255,.45);
transform:translateX(-50%);
box-shadow:0 0 14px color-mix(in srgb, var(--meter-accent) 60%, transparent), 0 3px 8px rgba(0,0,0,.55);
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-dial b{
z-index:5;
left:50%;
right:auto;
bottom:8%;
min-width:58px;
padding:4px 8px 5px;
border-radius:4px;
border:1px solid rgba(255,255,255,.13);
background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.34));
color:var(--meter-accent);
font-size:23px;
font-weight:900;
font-variant-numeric:tabular-nums;
line-height:1;
text-align:center;
text-shadow:0 0 13px color-mix(in srgb, var(--meter-accent) 62%, transparent);
transform:translateX(-50%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-dial b:before{
content:"0";
position:absolute;
left:-44px;
top:-42px;
color:rgba(230,237,243,.74);
font-size:10px;
font-weight:800;
text-shadow:none;
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-dial b:after{
content:"100";
position:absolute;
right:-54px;
top:-42px;
color:rgba(230,237,243,.74);
font-size:10px;
font-weight:800;
text-shadow:none;
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge.warn .ai-gauge-dial b,
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge.danger .ai-gauge-dial b{
color:var(--meter-danger);
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-label{
position:relative;
z-index:2;
margin-top:10px;
color:#f0f6fc;
font-size:13px;
font-weight:900;
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-label:before{
width:8px;
height:8px;
background:var(--meter-accent);
box-shadow:0 0 10px var(--meter-accent), 0 0 18px color-mix(in srgb, var(--meter-accent) 40%, transparent);
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-sub{
position:relative;
z-index:2;
margin-top:4px;
color:rgba(230,237,243,.68);
font-size:12px;
font-variant-numeric:tabular-nums;
}
@media(max-width:900px){
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge{min-height:166px}
}
@media(max-width:520px){
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge{min-height:174px}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-dial b{font-size:22px}
}
/* AI CPU/GPU needle visibility patch 20260628 */
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-needle{
z-index:8;
width:8px;
height:70%;
bottom:8%;
background:
linear-gradient(90deg, rgba(0,0,0,.70), rgba(0,0,0,0) 18%, rgba(255,255,255,.95) 45%, rgba(255,255,255,.95) 55%, rgba(0,0,0,0) 82%, rgba(0,0,0,.70)),
linear-gradient(180deg, #fff 0 9%, #ff3b30 10% 74%, #3b0710 75% 100%);
clip-path:polygon(50% 0, 88% 74%, 61% 100%, 39% 100%, 12% 74%);
outline:1px solid rgba(0,0,0,.62);
filter:drop-shadow(0 0 5px rgba(255,255,255,.62)) drop-shadow(0 0 12px rgba(255,59,48,.72));
box-shadow:none;
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-needle:before{
z-index:8;
bottom:-18px;
width:12px;
height:25px;
background:linear-gradient(180deg, #fff 0 8%, #222b36 9% 56%, #05080d 57%);
border:1px solid rgba(255,255,255,.25);
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-needle:after{
z-index:9;
bottom:-12px;
width:26px;
height:26px;
background:
radial-gradient(circle at 34% 27%, #fff 0 8%, transparent 9%),
radial-gradient(circle, #ff3b30 0 25%, #fff 26% 34%, #111827 35% 56%, #d7e1ee 57% 72%, #05080d 73%);
box-shadow:0 0 16px rgba(255,59,48,.72), 0 4px 10px rgba(0,0,0,.70);
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-dial:after{
z-index:6;
opacity:.76;
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-dial b{
z-index:10;
}
/* AI CPU/GPU round white meter 20260628 */
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge{
min-height:184px;
background:
linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,0) 32%),
linear-gradient(180deg, rgba(18,27,38,.96), rgba(5,8,13,.98));
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-dial{
width:min(118px, 100%);
aspect-ratio:1/1;
margin:0 auto;
border-radius:50%;
overflow:hidden;
border:3px solid rgba(238,244,250,.92);
background:
radial-gradient(circle at 50% 55%, #ffffff 0 53%, transparent 54%),
radial-gradient(circle at 50% 55%, rgba(0,0,0,.08) 0 58%, transparent 59%),
repeating-conic-gradient(from 225deg, #111827 0deg 1.8deg, transparent 1.8deg 9deg),
repeating-conic-gradient(from 225deg, #111827 0deg 3.8deg, transparent 3.8deg 23deg),
conic-gradient(from 225deg, #22c55e 0deg 70deg, #facc15 70deg 135deg, #fb923c 135deg 165deg, #ef4444 165deg 220deg, transparent 220deg 360deg),
radial-gradient(circle at 50% 50%, #f8fafc 0 61%, #d7dee8 62% 72%, #7b8490 73% 78%, #111827 79% 100%);
box-shadow:
inset 0 0 0 5px rgba(255,255,255,.82),
inset 0 0 0 8px rgba(0,0,0,.08),
inset 0 -12px 20px rgba(0,0,0,.10),
0 0 0 1px rgba(0,0,0,.75),
0 12px 18px rgba(0,0,0,.32);
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-dial:before{
inset:18%;
z-index:1;
border-radius:50%;
border:1px solid rgba(17,24,39,.12);
background:
radial-gradient(circle at 36% 28%, rgba(255,255,255,.92) 0 12%, transparent 13%),
radial-gradient(circle at 50% 58%, #ffffff 0 55%, #eef2f7 56% 100%);
box-shadow:inset 0 0 16px rgba(0,0,0,.08);
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-dial:after{
inset:3px;
z-index:6;
border-radius:50%;
opacity:.55;
background:
linear-gradient(135deg, rgba(255,255,255,.85) 0 12%, rgba(255,255,255,.25) 13% 23%, transparent 24% 60%, rgba(255,255,255,.22) 61% 69%, transparent 70%),
radial-gradient(circle at 50% 16%, rgba(255,255,255,.38), transparent 35%);
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-needle{
z-index:8;
height:45%;
width:7px;
bottom:50%;
transform-origin:50% 100%;
background:
linear-gradient(90deg, rgba(0,0,0,.78), transparent 22%, #fff 50%, transparent 78%, rgba(0,0,0,.68)),
linear-gradient(180deg, #ffebe8 0 9%, #e11d48 10% 100%);
clip-path:polygon(50% 0, 88% 100%, 12% 100%);
outline:1px solid rgba(17,24,39,.62);
filter:drop-shadow(0 0 4px rgba(0,0,0,.42)) drop-shadow(0 0 8px rgba(225,29,72,.5));
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-needle:before{
display:none;
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-needle:after{
z-index:9;
bottom:-14px;
width:28px;
height:28px;
border:2px solid rgba(17,24,39,.75);
background:
radial-gradient(circle at 35% 28%, #fff 0 10%, transparent 11%),
radial-gradient(circle, #ef4444 0 24%, #ffffff 25% 35%, #111827 36% 60%, #d1d5db 61% 72%, #030712 73%);
box-shadow:0 4px 10px rgba(0,0,0,.35), 0 0 8px rgba(239,68,68,.42);
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-dial b{
bottom:16%;
min-width:54px;
border-color:rgba(17,24,39,.18);
background:rgba(255,255,255,.88);
color:#111827;
font-size:22px;
text-shadow:none;
box-shadow:0 2px 8px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.75);
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge.warn .ai-gauge-dial b{
color:#92400e;
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge.danger .ai-gauge-dial b{
color:#b91c1c;
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-dial b:before{
left:-33px;
top:-34px;
color:#111827;
opacity:.74;
}
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-dial b:after{
right:-43px;
top:-34px;
color:#111827;
opacity:.74;
}
@media(max-width:900px){
.ai-card[data-ai-kind="ai-cpu-gpu"] .ai-gauge-dial{width:min(126px, 100%)}
}
/* AI thinking compact visible rows 20260628 */
.ai-card[data-ai-kind="ai-thinking"]{
--think-row-h:34px;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-body{
gap:6px;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-kpis{
display:flex;
gap:6px;
align-items:center;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-kpis>div{
flex:1 1 0;
display:flex;
align-items:center;
justify-content:space-between;
gap:6px;
min-width:0;
min-height:28px;
padding:4px 8px;
border-radius:4px;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-kpis b{
order:2;
min-width:0;
font-size:15px;
line-height:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-kpis span{
order:1;
margin:0;
flex:0 0 auto;
font-size:10px;
line-height:1;
color:#9fb1c2;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-toolbar{
gap:6px;
min-height:26px;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-toolbar .btn{
padding:4px 9px;
min-height:24px;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-at{
line-height:1.2;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-list{
min-height:118px;
max-height:none;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-row{
display:grid;
grid-template-columns:minmax(88px, .72fr) minmax(0, 1.28fr);
align-items:center;
gap:8px;
min-height:var(--think-row-h);
padding:5px 8px;
margin-bottom:5px;
border-radius:4px;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-title{
min-width:0;
margin:0;
gap:5px;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-title span{
flex:0 0 auto;
width:7px;
height:7px;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-title b{
min-width:0;
font-size:12px;
line-height:1.2;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-body{
min-width:0;
font-size:11.5px;
line-height:1.25;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
@media(max-width:640px){
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-row{
grid-template-columns:1fr;
gap:2px;
min-height:44px;
}
}
/* AI thinking priority visible 20260628 */
.ai-card[data-ai-kind="ai-thinking"]{
--think-row-h:26px;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-body{
gap:4px;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-kpis>div{
min-height:22px;
padding:3px 7px;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-kpis b{
font-size:13px;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-kpis span{
font-size:9.5px;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-toolbar{
min-height:20px;
gap:5px;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-toolbar .btn{
padding:2px 8px;
min-height:20px;
font-size:11px;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-at{
font-size:10.5px;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-list{
min-height:0;
padding-right:2px;
overflow:hidden;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-row{
grid-template-columns:minmax(78px, .64fr) minmax(0, 1.36fr);
min-height:var(--think-row-h);
padding:3px 7px;
margin-bottom:3px;
gap:6px;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-row.next{
border-color:rgba(34,197,94,.46);
background:linear-gradient(90deg,rgba(34,197,94,.15),rgba(15,23,42,.78));
}
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-title span{
width:6px;
height:6px;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-title b{
font-size:11.5px;
}
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-body{
font-size:11px;
line-height:1.15;
}
@media(max-width:640px){
.ai-card[data-ai-kind="ai-thinking"] .ai-thinking-row{
grid-template-columns:minmax(72px, .7fr) minmax(0, 1.3fr);
min-height:28px;
gap:5px;
}
}
/* AI live visible stamp 20260628 */
.ai-live-line{
display:grid;
grid-template-columns:92px minmax(0,1fr);
gap:8px;
align-items:start;
}
.ai-live-line .ai-live-time{
display:inline-block;
min-width:92px;
font-variant-numeric:tabular-nums;
color:#9fb1c2;
}
/* HP dashboard inquiry settings 20260628 */
.hpinquiry-card{display:flex;flex-direction:column;gap:9px;min-height:0}
.hpinquiry-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hpinquiry-kpis>div{border:1px solid var(--border);background:var(--surface2);border-radius:4px;padding:8px}
.hpinquiry-kpis b{display:block;font-size:22px;color:var(--accent);line-height:1}
.hpinquiry-kpis span{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.hpinquiry-sources{display:flex;gap:8px;flex-wrap:wrap}
.hpinquiry-sources label{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);background:rgba(255,255,255,.03);border-radius:999px;padding:4px 8px;font-size:12px;color:var(--ink)}
.hpinquiry-auto{border:1px solid rgba(148,163,184,.22);background:rgba(255,255,255,.025);border-radius:4px;padding:8px}
.hpinquiry-auto summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--ink)}
.hpinquiry-auto-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.hpinquiry-auto-grid label{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:12px;color:var(--muted)}
.hpinquiry-auto-grid span{display:flex;align-items:center;gap:5px;color:var(--ink);font-weight:700}
.hpinquiry-auto-grid textarea{width:100%;min-height:56px;resize:vertical;box-sizing:border-box;border:1px solid var(--border);background:var(--surface2);color:var(--ink);border-radius:4px;padding:7px;font-size:12px;line-height:1.35}
.hpinquiry-auto-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.hpinquiry-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);gap:10px;min-height:0}
.hpinquiry-compose,.hpinquiry-side{min-width:0}
.hpinquiry-fields{display:grid;grid-template-columns:120px repeat(3,minmax(0,1fr));gap:6px;margin-bottom:7px}
.hpinquiry-fields input,.hpinquiry-fields select,.hpinquiry-content,.hpinquiry-reply{width:100%;box-sizing:border-box;border:1px solid var(--border);background:var(--surface2);color:var(--ink);border-radius:4px;padding:8px}
.hpinquiry-content{min-height:78px;resize:vertical}
.hpinquiry-reply{min-height:62px;resize:vertical;margin-top:7px}
.hpinquiry-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:7px}
.hpinquiry-endpoint{border:1px solid rgba(88,166,255,.22);background:rgba(88,166,255,.07);border-radius:4px;padding:8px;margin-bottom:8px;font-size:12px;color:var(--muted)}
.hpinquiry-endpoint b{display:block;color:var(--ink);font-size:13px;margin-bottom:4px}
.hpinquiry-endpoint code{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--accent);margin-bottom:4px}
.hpinquiry-listhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 6px;font-size:12px}
.hpinquiry-listhead b{color:var(--ink)}
.hpinquiry-listhead span{color:var(--muted)}
.hpinquiry-history{min-height:160px;max-height:320px;overflow:auto;border:1px solid var(--border);background:var(--surface2);border-radius:4px;padding:8px}
.hpinquiry-row{border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.025);border-radius:4px;padding:8px;margin-bottom:7px}
.hpinquiry-rowtop{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.hpinquiry-rowtop b{color:var(--accent)}
.hpinquiry-rowtop span{border:1px solid var(--border);border-radius:999px;padding:1px 6px;color:var(--ink)}
.hpinquiry-rowtop .hpinquiry-db{font-weight:700}
.hpinquiry-rowtop .hpinquiry-db.ok{border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.12);color:var(--ok)}
.hpinquiry-rowtop .hpinquiry-db.warn{border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.12);color:#f59e0b}
.hpinquiry-person{font-size:12px;color:var(--ink);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hpinquiry-text,.hpinquiry-replylog{font-size:12px;color:var(--muted);line-height:1.45;margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hpinquiry-replylog{color:var(--ok)}
@media(max-width:900px){.hpinquiry-grid{grid-template-columns:1fr}.hpinquiry-fields{grid-template-columns:1fr 1fr}.hpinquiry-auto-grid{grid-template-columns:1fr}.hpinquiry-history{max-height:260px}}
/* invoice issuable table free edit 20260628 */
.invtable-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;padding:8px;border:1px solid var(--border);background:var(--surface2);border-radius:4px}
.invtable-tools .btn.small{min-height:30px}
.invtable-search{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;font-weight:700}
.invtable-search input{width:180px;box-sizing:border-box;border:1px solid var(--border);background:var(--bg);color:var(--ink);border-radius:4px;padding:6px 8px;font:inherit;font-size:12px}
.invtable-cols{position:relative}
.invtable-cols summary{cursor:pointer;border:1px solid var(--border);background:var(--bg);border-radius:4px;padding:6px 10px;font-size:12px;font-weight:800;color:var(--ink);list-style:none}
.invtable-colset{position:absolute;top:calc(100% + 6px);left:0;z-index:45;width:360px;max-width:82vw;max-height:360px;overflow:auto;background:var(--surface);border:1px solid var(--border2);border-radius:5px;padding:10px;box-shadow:0 16px 36px rgba(0,0,0,.35)}
.invcol-row{display:grid;grid-template-columns:24px 86px 1fr;align-items:center;gap:7px;margin-bottom:7px;font-size:12px;color:var(--muted)}
.invcol-row input[type=text]{width:100%;box-sizing:border-box;border:1px solid var(--border);background:var(--bg);color:var(--ink);border-radius:4px;padding:6px 8px;font:inherit;font-size:12px}
.invtable-status{margin-left:auto;color:var(--muted);font-size:12px;font-weight:800}
.invtable-status.ok{color:var(--ok)}
.inv-edit-table.inv-editing td[data-inv-cell]{outline:1px dashed rgba(88,166,255,.55);background:rgba(88,166,255,.08);cursor:text}
.inv-edit-table td[data-inv-cell]:focus{outline:2px solid var(--accent);background:rgba(88,166,255,.16)}
.inv-edit-table .inv-free-cell{min-width:110px;color:#cde8ff}
.invtable-wrap{max-height:none;overflow:auto}
.pl-grid[data-page="invoices"] .pl-body{text-align:left}
@media(max-width:800px){.invtable-tools{align-items:stretch}.invtable-search,.invtable-search input{width:100%}.invtable-status{margin-left:0}.invtable-colset{left:auto;right:0}}
/* invoice display save feedback 20260628 */
.invtable-tools.invtable-saved-flash{animation:invtableSavedFlash .75s ease-out}
@keyframes invtableSavedFlash{
0%{box-shadow:0 0 0 0 rgba(63,185,80,.55);border-color:rgba(63,185,80,.9)}
100%{box-shadow:0 0 0 12px rgba(63,185,80,0)}
}
/* invoice history part 20260628 */
.invhist-widget{height:100%;min-height:0;display:flex;flex-direction:column;gap:9px}
.invhist-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.invhist-head .ph{margin:0 0 3px;border:0;padding:0}
.invhist-head .hint{margin:0}
.invhist-wrap{flex:1;min-height:0;overflow:auto;border:1px solid var(--border);border-radius:4px;background:var(--surface2)}
.invhist-table{min-width:900px}
.invhist-table th{position:sticky;top:0;z-index:1}
.invhist-table td,.invhist-table th{font-size:12px}
/* invoice parts suite 20260628 */
.invpart{height:100%;min-height:0;display:flex;flex-direction:column;gap:8px;text-align:left}
.invpart .ph{margin:0 0 2px;border:0;padding:0}
.invpart label{display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:12px;font-weight:800}
.invpart input,.invpart select,.invpart textarea{width:100%;box-sizing:border-box;border:1px solid var(--border);background:var(--surface2);color:var(--ink);border-radius:4px;padding:7px 9px;font:inherit;font-size:12px}
.invpart textarea{min-height:58px;resize:vertical}
.invitem-row{display:grid;grid-template-columns:1fr 56px 54px 90px 28px;gap:5px;margin-bottom:5px}
.invitem-row button{border:0;background:transparent;color:var(--danger);font-size:16px;cursor:pointer}
.invp-items{flex:1;min-height:0;overflow:auto}
.invpreview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.invp-preview{background:#3a3f47;border:1px solid var(--border);border-radius:0;padding:10px}
.invmini-sheet{background:#fff;color:#111;width:min(100%,988px);aspect-ratio:210/297;height:auto;margin:0 auto;padding:22px;font-family:"Yu Mincho","Yu Gothic",serif;box-shadow:0 8px 24px rgba(0,0,0,.28);box-sizing:border-box}
.invmini-sheet h1{text-align:center;letter-spacing:.35em;margin:0 0 18px;padding-left:.35em;color:#111} /* 紙は常に白：ダークの h1{color:var(--ink)}(明色)が乗ると白紙に白字で消えるため紙側で固定 */
.invmini-top{display:grid;grid-template-columns:1fr 230px;gap:18px;font-size:12px}
.invmini-total{border:2px solid #111;margin:18px 0;padding:10px;font-size:18px;display:flex;justify-content:space-between}
.invmini-total b{font-size:24px}
.invmini-sheet table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:12px;border:2px solid #111}
.invmini-sheet th{background:#111;color:#fff;padding:6px;border-bottom:1px solid #bbb;border-right:1px dotted rgba(255,255,255,.4);overflow:hidden;text-overflow:ellipsis}
.invmini-sheet th:last-child{border-right:none}
.invmini-sheet td{padding:6px;border-bottom:1px solid #bbb;border-right:1px dotted #bbb;overflow:hidden;text-overflow:ellipsis}
.invmini-sheet td:last-child{border-right:none}
.invmini-sheet tr:last-child td{border-bottom:none}
.invmini-sums{width:230px;margin:10px 0 0 auto;text-align:right;font-size:13px}
.invmini-sums b{display:block;border:2px solid #111;padding:6px;margin-top:4px}
.invmini-note{border-top:1px solid #ccc;margin-top:18px;padding-top:10px;white-space:pre-wrap}
/* 選んだ請求書デザインに寄せる簡易見た目（20260707・文字位置と項目列数を似せる程度） */
.invmini-sheet{--inv-accent:#111}
.invmini-sheet th{background:var(--inv-accent);color:#fff}
.invmini-total{border-color:var(--inv-accent)}
.invmini-sums b{border-color:var(--inv-accent)}
.invmini-landscape{width:min(100%,980px);aspect-ratio:297/210}
.invmini-title-right h1{text-align:right;padding-right:.2em}
.invmini-envelope .invmini-top>div:first-child{border:1px solid #999;border-radius:2px;padding:8px}
.invmini-edit{cursor:text}
.invmini-edit:hover{background:rgba(47,111,179,.08)}
.invmini-edit:focus{outline:2px solid #2f6fb3;outline-offset:-2px;background:rgba(47,111,179,.08)}
.invtool-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:900px){.invitem-row{grid-template-columns:1fr 1fr}.invmini-top{grid-template-columns:1fr}.invtool-grid{grid-template-columns:1fr}}
/* invoice issuer parts 20260628 */
.invissuer-part{min-height:0}
.invissuer-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-height:0;overflow:auto}
.invissuer-grid .wide{grid-column:1/-1}
.invissuer-summary{border:1px solid var(--border);background:var(--surface2);border-radius:4px;padding:8px;display:flex;flex-direction:column;gap:4px;font-size:12px}
.invissuer-summary b{color:var(--accent);font-size:15px}
.invseal-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-height:0}
.invis-img-form{border:1px solid var(--border);background:var(--surface2);border-radius:4px;padding:8px;display:flex;flex-direction:column;gap:7px;min-width:0}
/* ★2026-08-04：置き場を市松模様（グレーの格子）にする＝入れた画像が「透過されているか」を目で確かめられる。
格子が透けて見えれば透過PNG。白い四角で格子が隠れたら、背景が白いままの画像（帳票の文字を隠してしまう）。 */
.invis-img-preview{height:82px;border:1px dashed var(--border2);border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--muted);overflow:hidden;
background-color:#fff;
background-image:linear-gradient(45deg,rgba(0,0,0,.10) 25%,transparent 25%),linear-gradient(-45deg,rgba(0,0,0,.10) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(0,0,0,.10) 75%),linear-gradient(-45deg,transparent 75%,rgba(0,0,0,.10) 75%);
background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0}
/* ★画像の後ろに白を敷かない＝敷くと透過かどうか分からなくなる（前はここで白を敷いていた） */
.invis-img-preview img{max-width:100%;max-height:78px;object-fit:contain;background:transparent;padding:3px;border-radius:2px}
.invmini-issuer{position:relative;border:1px solid #999;margin:12px 0;padding:8px 64px 8px 8px;font-size:11px;line-height:1.6;display:flex;flex-direction:column;gap:1px;min-height:54px}
.invmini-issuer b{font-size:14px}
.invmini-logo{max-height:28px;max-width:150px;object-fit:contain;margin-bottom:3px}
.invmini-stamp{position:absolute;right:10px;top:10px;width:42px;height:42px;object-fit:contain}
.invmini-stamp.blank{border:1px dashed #c00;border-radius:50%;color:#c00;display:flex;align-items:center;justify-content:center}
@media(max-width:900px){.invissuer-grid,.invseal-grid{grid-template-columns:1fr}}
/* ===== お客様マップ（casemap）の色付きピン・新規の点滅・凡例 ===== */
/* 管理DB：Googleマップ＋ストリートビューの分割表示（キー設定時のみ） */
.casemap-canvas.casemap-split{display:flex;gap:6px}
.casemap-split .casemap-mappane,.casemap-split .casemap-panopane{position:relative;flex:1 1 50%;min-width:0;height:100%;min-height:160px;border-radius:3px;overflow:hidden;background:var(--surface2)}
.casemap-pano-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted);text-align:center;padding:8px;background:var(--surface2)}
@media(max-width:640px){.casemap-canvas.casemap-split{flex-direction:column}}
.casemap-pin{display:block;width:14px;height:14px;border-radius:50%;background:var(--pin,#58a6ff);border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.casemap-pin-new{animation:casemap-pulse 1.1s ease-in-out infinite}
@keyframes casemap-pulse{0%,100%{box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 0 0 rgba(248,81,73,.55);transform:scale(1)}50%{box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 0 8px rgba(248,81,73,0);transform:scale(1.2)}}
.casemap-leg{display:inline-flex;align-items:center;gap:5px}
.leaflet-container .casemap-pin{cursor:pointer}
/* ★地図の中は角丸をかけない：body.fdstaffmobile *{border-radius:10px} が地図タイルにも効き、
タイル4枚の角の隙間が黒い星形になって見えていた（20260721修正）。ピンの丸だけは残す。 */
body .leaflet-container,
body .leaflet-container *:not(.casemap-pin):not(.fd-house-pin):not(.fd-staffmap-pin){border-radius:0!important}
body .leaflet-tile,body .leaflet-tile-container,body .leaflet-tile-container img{border-radius:0!important}
/* 選択中の新規ピン（ルート計算の対象）＝白＋色のリングで強調 */
.casemap-pin-sel{box-shadow:0 0 0 2px #fff,0 0 0 5px var(--pin,#f85149),0 0 8px 2px rgba(248,81,73,.6);transform:scale(1.25)}
/* 期間/状態フィルタのボタン */
.casemap-filter{display:flex;gap:4px;flex-wrap:wrap}
.casemap-filter .cmf{font-size:11.5px;padding:3px 9px;border-radius:999px;border:1px solid var(--border);background:var(--surface2);color:var(--muted);cursor:pointer;line-height:1.3}
.casemap-filter .cmf:hover{color:var(--ink);border-color:var(--accent)}
.casemap-filter .cmf.on{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700}
.casemap-filter .cmf-new.on{background:#f85149;border-color:#f85149}
.casemap-filter .cmf-homes.on{background:#8957e5;border-color:#8957e5}
/* 🏠 担当者宅マーク（地図上・中塗り丸＋⌂） */
.fd-house-pin{width:24px;height:24px;border-radius:50% 50% 50% 0;background:#8957e5;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4);transform:rotate(45deg);display:flex;align-items:center;justify-content:center}
.fd-house-pin::after{content:'⌂';transform:rotate(-45deg);color:#fff;font-size:14px;font-weight:800;line-height:1}
/* 🗺 担当者ページの住所マップ：新規＝赤点滅／それ以外＝青 */
.fd-staffmap-pin{width:24px;height:24px;border-radius:50% 50% 50% 0;background:#58a6ff;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4);transform:rotate(45deg);display:flex;align-items:center;justify-content:center}
.fd-staffmap-pin::after{content:'⌂';transform:rotate(-45deg);color:#fff;font-size:14px;font-weight:800;line-height:1}
.fd-staffmap-pin-new{background:#f85149;animation:fd-staffmap-blink 1.1s ease-in-out infinite}
@keyframes fd-staffmap-blink{0%,100%{transform:rotate(45deg) scale(1)}50%{transform:rotate(45deg) scale(1.18)}}
/* 現在地→新規 ルート計算 */
.casemap-route-btn{width:100%}
.casemap-route-head{font-weight:700;margin:2px 0 4px}
.casemap-route-tbl{width:100%;border-collapse:collapse;font-size:12px}
.casemap-route-tbl th{font-weight:600;color:var(--muted);text-align:left;padding:3px 6px;border-bottom:1px solid var(--border);white-space:nowrap}
.casemap-route-tbl td{padding:4px 6px;border-bottom:1px solid var(--border);vertical-align:top}
.casemap-route-tbl .rt-hw{color:#3fb950;font-weight:700;white-space:nowrap}
.casemap-route-tbl .rt-nohw{color:#d29922;font-weight:700;white-space:nowrap}
.casemap-route-tbl .rt-links a{text-decoration:none;font-size:15px;margin-right:2px}
.casemap-route-out .xsmall,.xsmall{font-size:10.5px}
/* ===== HP監視：AI検索での見え方（AI Visibility / searchfit-seo） ===== */
.aivis-w{display:flex;flex-direction:column;gap:12px}
.aivis-top{display:flex;align-items:center;gap:14px}
.aivis-score{flex:0 0 auto;width:66px;height:66px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid var(--border2);background:var(--surface2)}
.aivis-score b{font-size:23px;font-weight:800;line-height:1}
.aivis-score small{font-size:10px;color:var(--muted)}
.aivis-score.s-bad{border-color:var(--danger);color:var(--danger)}
.aivis-score.s-warn{border-color:var(--warn);color:var(--warn)}
.aivis-score.s-ok{border-color:var(--ok);color:var(--ok)}
.aivis-sum{min-width:0}
.aivis-sum b{display:block;font-size:14px;margin-bottom:3px}
.aivis-sum span{font-size:12.5px;color:var(--muted);line-height:1.65}
.aivis-engines{display:flex;flex-direction:column;gap:9px}
.aivis-eng{display:grid;grid-template-columns:88px 1fr 32px;align-items:center;gap:8px 10px}
.aivis-eng-n{font-weight:700;font-size:13px}
.aivis-eng-bar{height:8px;border-radius:999px;background:var(--surface3);overflow:hidden}
.aivis-eng-bar i{display:block;height:100%;width:var(--v);border-radius:999px;transition:width .5s ease}
.aivis-eng.bad .aivis-eng-bar i{background:var(--danger)}
.aivis-eng.warn .aivis-eng-bar i{background:var(--warn)}
.aivis-eng.ok .aivis-eng-bar i{background:var(--ok)}
.aivis-eng>b{font-size:13px;font-weight:800;text-align:right}
.aivis-eng-note{grid-column:2/4;font-size:11.5px;color:var(--muted);margin-top:-4px}
.aivis-qs{display:flex;flex-direction:column;gap:5px;border-top:1px dashed var(--border);padding-top:11px}
.aivis-qs-h{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:1px}
.aivis-q{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;padding:5px 11px;border-radius:4px;background:var(--surface2)}
.aivis-q-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aivis-q-b{flex:none;font-size:11px;font-weight:800;padding:2px 10px;border-radius:999px}
.aivis-q.none .aivis-q-b{color:#ff9a8d;background:rgba(248,81,73,.15)}
.aivis-q.part .aivis-q-b{color:#e3b341;background:rgba(210,153,34,.16)}
.aivis-q.ok .aivis-q-b{color:#7ee2a8;background:rgba(63,185,80,.15)}
.aivis-actions{margin:6px 0 0;padding-left:18px}
.aivis-actions li{font-size:12.5px;line-height:1.7;margin:5px 0}
.aivis-foot{font-size:11px;color:var(--muted);margin:2px 0 0;line-height:1.6}
/* ===== HP健康診断（まとめ）：重複6パーツを1枚に統合 ===== */
.hpchk-w{display:flex;flex-direction:column;gap:11px}
.hpchk-head{display:flex;align-items:center;gap:13px}
.hpchk-overall{flex:0 0 auto;width:60px;height:60px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid var(--border2);background:var(--surface2)}
.hpchk-overall b{font-size:21px;font-weight:800;line-height:1}
.hpchk-overall small{font-size:10px;color:var(--muted)}
.hpchk-overall.s-ok{border-color:var(--ok);color:var(--ok)}
.hpchk-overall.s-warn{border-color:var(--warn);color:var(--warn)}
.hpchk-overall.s-bad{border-color:var(--danger);color:var(--danger)}
.hpchk-h-tx{min-width:0}
.hpchk-h-tx b{display:block;font-size:14px;margin-bottom:2px}
.hpchk-h-tx span{font-size:12px;color:var(--muted);line-height:1.55}
.hpchk-live{background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:10px 12px}
.hpchk-cats{display:flex;flex-direction:column;gap:6px}
.hpchk-cat{border:1px solid var(--border);border-radius:5px;background:var(--surface);overflow:hidden;transition:border-color .14s ease}
.hpchk-cat[open]{border-color:var(--border2)}
.hpchk-cat>summary{display:grid;grid-template-columns:1fr 84px 30px 14px;align-items:center;gap:10px;padding:10px 13px;cursor:pointer;list-style:none;font-size:13.5px;font-weight:700}
.hpchk-cat>summary::-webkit-details-marker{display:none}
.hpchk-cat>summary::after{content:"▸";color:var(--muted);font-size:11px;justify-self:end}
.hpchk-cat[open]>summary::after{content:"▾"}
.hpchk-c-name{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hpchk-c-bar{height:7px;border-radius:999px;background:var(--surface3);overflow:hidden}
.hpchk-c-bar i,.hpchk-r-bar i{display:block;height:100%;width:var(--v);border-radius:999px;transition:width .5s ease}
.hpchk-c-bar i.ok,.hpchk-r-bar i.ok{background:var(--ok)}
.hpchk-c-bar i.warn,.hpchk-r-bar i.warn{background:var(--warn)}
.hpchk-c-bar i.bad,.hpchk-r-bar i.bad{background:var(--danger)}
.hpchk-c-score{font-weight:800;font-size:13px;text-align:right}
.hpchk-c-score.ok{color:var(--ok)}.hpchk-c-score.warn{color:var(--warn)}.hpchk-c-score.bad{color:var(--danger)}
.hpchk-c-body{padding:6px 13px 12px;border-top:1px dashed var(--border)}
.hpchk-row{display:grid;grid-template-columns:92px 1fr 30px;align-items:center;gap:9px;padding:4px 0;font-size:12.5px}
.hpchk-r-n{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hpchk-r-bar{height:6px;border-radius:999px;background:var(--surface3);overflow:hidden}
.hpchk-row b{font-size:12.5px;text-align:right}
.hpchk-row b.ok{color:var(--ok)}.hpchk-row b.warn{color:var(--warn)}.hpchk-row b.bad{color:var(--danger)}
.hpchk-r-note{grid-column:2/4;font-size:11px;color:var(--muted);margin-top:-3px}
.hpchk-act{font-size:12px;color:var(--ink);background:var(--surface2);border-radius:4px;padding:8px 11px;margin:9px 0 0;line-height:1.6}
/* ===== HP健康診断の推移（hp-health-history）：自動保存スコアの折れ線グラフ ===== */
.hphist-w{display:flex;flex-direction:column;gap:10px;height:100%}
.hphist-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.hphist-h-tx b{display:block;font-size:14px;color:var(--ink)}
.hphist-h-tx span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.5}
.hphist-latest{flex:0 0 auto;text-align:center;background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:5px 12px;min-width:62px}
.hphist-latest-v{display:block;font-size:22px;font-weight:800;line-height:1;color:var(--ink)}
.hphist-latest small{font-size:10px;color:var(--muted)}
.hphist-tabs{display:flex;flex-wrap:wrap;gap:6px}
.hphist-tab{appearance:none;border:1px solid var(--border2);background:var(--surface);color:var(--muted);border-radius:999px;padding:4px 13px;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s ease}
.hphist-tab:hover{color:var(--ink);border-color:var(--accent)}
.hphist-tab.on{background:rgba(88,166,255,.14);border-color:var(--accent);color:var(--accent)}
.hphist-chart{flex:1 1 auto;min-height:160px;background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:6px}
.hphist-svg{width:100%;height:100%;display:block;min-height:150px}
.hphist-grid{stroke:var(--border);stroke-width:1;stroke-dasharray:3 4}
.hphist-axis{fill:var(--muted);font-size:11px}
.hphist-foot{font-size:11.5px;color:var(--muted);background:var(--surface2);border-radius:4px;padding:8px 11px;line-height:1.6}
/* ===== 検索パフォーマンス（hp-gsc-performance / Google Search Console） ===== */
.gscperf-w{display:flex;flex-direction:column;gap:12px}
.gscperf-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.gscperf-h-tx b{display:block;font-size:14px;color:var(--ink)}
.gscperf-h-tx span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.gscperf-status{flex:0 0 auto;font-size:11px;font-weight:700;padding:4px 11px;border-radius:999px}
.gscperf-status.ok{color:var(--ok);background:rgba(63,185,80,.12);border:1px solid rgba(63,185,80,.4)}
.gscperf-status.bad{color:var(--muted);background:var(--surface2);border:1px solid var(--border)}
.gscperf-setup{background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:4px 12px}
.gscperf-setup>summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--ink);padding:6px 0;list-style:none}
.gscperf-setup>summary::-webkit-details-marker{display:none}
.gscperf-setup>summary::before{content:"▸ ";color:var(--accent)}
.gscperf-setup[open]>summary::before{content:"▾ "}
.gscperf-setup-body{padding:6px 0 12px}
.gscperf-guide{margin:0 0 12px;font-size:12px;color:var(--muted);line-height:1.9}
.gscperf-guide code{background:var(--surface3);color:var(--accent);padding:1px 5px;border-radius:2px;font-size:11px}
.gscperf-guide-lead{margin:0 0 10px;font-size:12px;color:var(--ink);background:var(--surface3);border-left:3px solid var(--accent);border-radius:3px;padding:9px 12px;line-height:1.7}
.gscperf-steps{border:1px solid var(--border);border-radius:4px;background:var(--surface)}
.gscperf-steps>summary{cursor:pointer;font-weight:700;font-size:12.5px;color:var(--accent);padding:9px 12px;list-style:none}
.gscperf-steps>summary::-webkit-details-marker{display:none}
.gscperf-steps>summary::before{content:"▸ "}
.gscperf-steps[open]>summary::before{content:"▾ "}
.gscperf-steps-body{padding:2px 14px 12px}
.gscperf-step-grp{margin:12px 0}
.gscperf-step-t{font-weight:800;font-size:12.5px;color:var(--ink);margin-bottom:5px;padding:5px 10px;background:linear-gradient(180deg,var(--surface3),var(--surface2));border-radius:3px}
.gscperf-steps-body ol{margin:6px 0 0;padding-left:22px;line-height:1.95}
.gscperf-steps-body li{margin:5px 0}
.gscperf-steps-body a{color:var(--accent);text-decoration:underline}
.gscperf-steps-body b{color:var(--ink)}
.gscperf-tip{margin:12px 0 0;font-size:11.5px;color:var(--ink);background:rgba(88,166,255,.08);border:1px solid rgba(88,166,255,.25);border-radius:4px;padding:9px 12px;line-height:1.7}
.gscperf-field{display:block;margin:8px 0}
.gscperf-field span{display:block;font-size:11.5px;color:var(--muted);margin-bottom:3px}
.gscperf-site,.gscperf-sa{width:100%;background:var(--surface);border:1px solid var(--border2);border-radius:4px;color:var(--ink);padding:8px 10px;font-size:12px;font-family:inherit}
.gscperf-sa{resize:vertical;font-family:ui-monospace,monospace;font-size:11px}
.gscperf-actions{display:flex;align-items:center;gap:10px;margin-top:8px}
.gscperf-msg{font-size:12px;font-weight:700}
.gscperf-msg.ok{color:var(--ok)} .gscperf-msg.bad{color:var(--danger)}
.gscperf-err{font-size:11.5px;color:var(--danger);margin:8px 0 0;line-height:1.6}
.gscperf-range{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gscperf-tab{appearance:none;border:1px solid var(--border2);background:var(--surface);color:var(--muted);border-radius:999px;padding:4px 13px;font-size:12px;font-weight:700;cursor:pointer}
.gscperf-tab.on{background:rgba(88,166,255,.14);border-color:var(--accent);color:var(--accent)}
.gscperf-fetched{font-size:11px;color:var(--muted);margin-left:auto}
.gscperf-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gscperf-kpi{background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:10px 12px;text-align:center}
.gscperf-kpi b{display:block;font-size:24px;font-weight:800;color:var(--ink);line-height:1.1}
.gscperf-kpi small{display:block;font-size:10.5px;color:var(--muted);margin-top:3px}
.gscperf-chart{background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:10px 6px}
.gscperf-svg{width:100%;height:auto;display:block}
.gscperf-grid{stroke:currentColor;stroke-width:1;opacity:.22;stroke-dasharray:4 4}
.gscperf-grid-minor{stroke:currentColor;stroke-width:1;opacity:.1}
.gscperf-axis{fill:var(--muted);font-size:11px}
.gscperf-axis-imp{fill:#58a6ff;font-weight:600}
.gscperf-axis-clk{fill:#3fb950;font-weight:600}
.gscperf-legend{display:flex;gap:16px;justify-content:center;font-size:11px;color:var(--muted);margin-top:4px}
.gscperf-legend i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:5px;vertical-align:middle}
.gscperf-tables{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gscperf-tbl-h{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.gscperf-tbl table{width:100%;border-collapse:collapse;font-size:11.5px}
.gscperf-tbl th{color:var(--muted);text-align:right;font-weight:600;padding:3px 6px;border-bottom:1px solid var(--border)}
.gscperf-tbl th:first-child{text-align:left}
.gscperf-tbl td{padding:4px 6px;border-bottom:1px solid var(--border);color:var(--ink);text-align:right}
.gscperf-tbl td:first-child{text-align:left;max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gscperf-note{font-size:11px;color:var(--muted);line-height:1.6;margin:0}
.gscperf-empty{font-size:12px;color:var(--muted);background:var(--surface2);border-radius:4px;padding:10px 12px;line-height:1.7}
.gscperf-tbl tr.gscperf-pri td{background:rgba(88,166,255,.08)}
.gscperf-tbl tr.gscperf-pri td:first-child{font-weight:700;box-shadow:inset 3px 0 0 var(--accent)}
@media(max-width:640px){.gscperf-kpis{grid-template-columns:repeat(2,1fr)}.gscperf-tables{grid-template-columns:1fr}}
/* 電話クリック集計パーツ hp-tel-clicks */
.telclick-w{display:flex;flex-direction:column;gap:10px}
.telclick-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.telclick-h-tx b{display:block;font-size:14px;color:var(--ink)}
.telclick-h-tx span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.telclick-total{font-size:12.5px;color:var(--muted)}
.telclick-total b{color:var(--ink)}
.telclick-table{width:100%;border-collapse:collapse;font-size:12px}
.telclick-table th{color:var(--muted);text-align:right;font-weight:600;padding:5px 8px;border-bottom:1px solid var(--border)}
.telclick-table th:first-child{text-align:left}
.telclick-table td{padding:6px 8px;border-bottom:1px solid var(--border);color:var(--ink);text-align:right}
.telclick-table td:first-child{text-align:left;max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.telclick-table tr:last-child td{border-bottom:0}
.telclick-n b{color:var(--accent);font-size:14px}
.telclick-phone,.telclick-last{color:var(--muted);font-size:11.5px}
.telclick-empty{font-size:12px;color:var(--muted);background:var(--surface2);border-radius:4px;padding:12px 14px;line-height:1.7}
.telclick-note{font-size:11px;color:var(--muted);margin:0;line-height:1.6}
/* ページの読まれ方パーツ hp-page-behavior
帯＝章を横に並べたもの。上の色が「止まった時間」、下の数字が「そこまで見た人の割合」。 */
.pbhv-w{display:flex;flex-direction:column;gap:10px}
.pbhv-head{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.pbhv-h-tx{flex:1 1 auto;min-width:160px}
.pbhv-h-tx b{display:block;font-size:14px;color:var(--ink)}
.pbhv-h-tx span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.pbhv-pick{max-width:260px;font-size:12px;padding:4px 6px}
.pbhv-sum{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12px;color:var(--muted)}
.pbhv-sum b{color:var(--ink);font-size:14px}
.pbhv-ribbon{position:relative;height:64px;margin:2px 0 4px}
.pbhv-cell{position:absolute;top:0;height:100%;padding-right:1px;overflow:hidden}
.pbhv-cell i{display:block;height:26px;border-right:1px solid var(--surface)}
.pbhv-cell u{display:block;font-size:9.5px;line-height:1.3;color:var(--muted);text-decoration:none;margin-top:3px;
overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pbhv-cell b{display:block;font-size:11.5px;color:var(--ink);margin-top:1px;font-variant-numeric:tabular-nums}
.pbhv-cell b.dim{color:var(--muted)}
.pbhv-sub{font-size:12px;font-weight:700;color:var(--ink);margin-top:4px}
.pbhv-table{width:100%;border-collapse:collapse;font-size:12px}
.pbhv-table th{color:var(--muted);text-align:right;font-weight:600;padding:5px 8px;border-bottom:1px solid var(--border)}
.pbhv-table th:first-child{text-align:left}
.pbhv-table td{padding:6px 8px;border-bottom:1px solid var(--border);color:var(--ink);text-align:right}
.pbhv-table td:first-child{text-align:left}
.pbhv-table tr:last-child td{border-bottom:0}
.pbhv-n{white-space:nowrap;font-variant-numeric:tabular-nums}
.pbhv-bar{display:inline-block;width:60px;height:7px;background:var(--surface2);border-radius:3px;overflow:hidden;margin-left:8px;vertical-align:middle}
.pbhv-bar i{display:block;height:100%;background:var(--accent);border-radius:3px}
.pbhv-empty{font-size:12px;color:var(--muted);background:var(--surface2);border-radius:4px;padding:12px 14px;line-height:1.7}
.pbhv-note{font-size:11px;color:var(--muted);margin:0;line-height:1.7}
/* 流入元集計パーツ hp-traffic-source */
.trafficsrc-w{display:flex;flex-direction:column;gap:10px}
.trafficsrc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.trafficsrc-h-tx b{display:block;font-size:14px;color:var(--ink)}
.trafficsrc-h-tx span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.trafficsrc-total{font-size:12.5px;color:var(--muted)}
.trafficsrc-total b{color:var(--ink)}
.trafficsrc-classes{display:flex;flex-direction:column;gap:6px}
.trafficsrc-cls{display:flex;align-items:center;gap:8px;font-size:12px}
.trafficsrc-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.trafficsrc-cls-lb{flex:0 0 84px;color:var(--ink)}
.trafficsrc-bar{flex:1 1 auto;height:9px;background:var(--surface2);border-radius:3px;overflow:hidden}
.trafficsrc-bar i{display:block;height:100%;border-radius:3px}
.trafficsrc-cls-n{flex:0 0 auto;color:var(--muted);font-size:11.5px;min-width:78px;text-align:right}
.trafficsrc-cls-n b{color:var(--ink);font-size:13px}
.trafficsrc-table{width:100%;border-collapse:collapse;font-size:12px}
.trafficsrc-table th{color:var(--muted);text-align:right;font-weight:600;padding:5px 8px;border-bottom:1px solid var(--border)}
.trafficsrc-table th:first-child{text-align:left}
.trafficsrc-table td{padding:6px 8px;border-bottom:1px solid var(--border);color:var(--ink);text-align:right}
.trafficsrc-table td:first-child{text-align:left}
.trafficsrc-table tr:last-child td{border-bottom:0}
.trafficsrc-n b{color:var(--accent);font-size:14px}
.trafficsrc-last{color:var(--muted);font-size:11.5px}
.trafficsrc-empty{font-size:12px;color:var(--muted);background:var(--surface2);border-radius:4px;padding:12px 14px;line-height:1.7}
/* 検索エンジン別／AI検索別／端末別のまとまり（2026-08-06） */
.trafficsrc-grp{border-top:1px solid var(--border);padding-top:8px;margin-top:8px;display:flex;flex-direction:column;gap:5px}
.trafficsrc-grp>b{font-size:12px;color:var(--ink)}
.trafficsrc-grp .trafficsrc-cls-n{min-width:120px}
.trafficsrc-note{font-size:11px;color:var(--muted);margin:0;line-height:1.6}
/* ===== 設定ページ：セットアップ手順（sw-*）のデザイン =====
★settings.ejs のインライン