/* 追加UI用CSS（色は app.css のトークンのみを使う） */

/* 稼働状況 */
.ops-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:12px 0 4px}
.ops-item{display:flex;flex-direction:column;gap:4px;padding:12px 16px;border-radius:16px;background:var(--tint-bg);min-width:0}
.ops-item .stat-label{font-size:12.5px;color:var(--muted)}
.ops-val{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ops-sub{font-size:12.5px;color:var(--muted)}
.ops-item.is-warn{background:var(--warn-bg)}
.ops-item.is-warn .ops-val{color:var(--warn-text)}
.ops-item.is-err{background:var(--err-bg)}
.ops-item.is-err .ops-val{color:var(--err-text)}
.ops-warn{margin:12px 0 0;padding:12px 16px;border-radius:14px;background:var(--warn-bg);color:var(--warn-text);border:1px solid var(--line);font-size:14px}
.ops-warn ul{margin:6px 0 0;padding-left:20px}
.ops-ok{margin:12px 0 0;padding:10px 16px;border-radius:14px;background:var(--ok-bg);color:var(--ok-text);font-size:14px}

/* 表（共有リンク・操作履歴・撮影失敗） */
.ops-table-wrap{overflow-x:auto;margin-top:12px;border-radius:14px;border:1px solid var(--line)}
.ops-table{width:100%;border-collapse:collapse;font-size:13.5px}
.ops-table th{position:sticky;top:0;text-align:left;font-weight:600;color:var(--muted);background:var(--tint-bg);padding:10px 14px;white-space:nowrap}
.ops-table td{padding:10px 14px;border-top:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.ops-table td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.ops-scroll{max-height:420px;overflow:auto}
.ops-table tr.is-expired td{color:var(--muted)}
.ops-details>summary{cursor:pointer;font-weight:600;padding:6px 0;list-style:none;display:flex;gap:8px;align-items:center}
.ops-details>summary::-webkit-details-marker{display:none}
.ops-details>summary .ico{transition:transform .15s}
.ops-details[open]>summary .ico{transform:rotate(180deg)}
.ops-note{margin:0 0 14px;padding:12px 16px;border-radius:14px;background:var(--warn-bg);color:var(--warn-text);font-size:13.5px;line-height:1.6}
.ops-confirm-msg{margin:0 0 8px;line-height:1.7}

/* チーム / ブックマーク（v9・v10） */
.team-tags{display:inline-flex;flex-wrap:wrap;gap:4px 6px;min-width:0}
.group-tag.team-tag{background:var(--ok-bg);color:var(--ok-text)}
.group-tag.is-shared{background:var(--neutral-bg);color:var(--neutral)}
.sc-group{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.srow-group{flex-wrap:wrap;gap:4px 6px;align-content:center}
.team-pick{border:0;padding:0;margin:0 0 16px;min-width:0}
.team-pick legend{font-weight:700;font-size:14px;padding:0;margin-bottom:6px}
.team-pick .check{margin:0 0 8px}
.team-pick small{display:block;color:var(--muted);font-size:12.5px;line-height:1.5;margin-top:2px}
.team-fixed{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.team-fixed small{color:var(--muted);font-size:12.5px}
.team-counts{display:flex;gap:10px;flex-wrap:wrap;flex:none}
.team-counts .group-count{gap:6px}
.team-counts .stat-label{font-size:12px;color:var(--muted)}
.team-msg{flex:1 1 100%;padding:10px 14px;border-radius:14px;background:var(--err-bg);color:var(--err-text);font-size:13.5px;line-height:1.6}
.user-teams{margin-top:6px}
.user-teams-line{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.user-teams-edit{margin-left:2px}
.team-panel{margin-top:10px;padding:12px 14px;border-radius:14px;background:var(--tint-bg);display:flex;flex-direction:column;gap:8px}
.team-panel .team-pick{margin:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.team-panel .team-pick .check{margin:0}
.team-panel-actions{display:flex;gap:8px}
.my-teams{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.leader-mark{display:inline-block;margin-left:8px;padding:0 8px;border-radius:99px;background:var(--ok-bg);color:var(--ok-text);font-size:11.5px;font-weight:700;line-height:1.7}
.tm-bar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;margin:12px 0 10px}
.tm-bar .tb-field{margin:0}
.tm-existing{margin:0 0 12px}
.tm-list{gap:8px}
.tm-row .row-actions{gap:8px}
.group-add-team{margin:0}
.group-add-team select{min-width:140px}

/* サイドバー: ブックマーク */
.side-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.side-label-link{font-size:12px;font-weight:600;letter-spacing:0;color:var(--muted);text-decoration:underline;white-space:nowrap}
.side-label-link:hover{color:var(--accent-deep)}
.side-bm{display:flex;align-items:center;gap:10px;padding:8px 12px;min-height:38px;font-size:14px;line-height:1.4}
.side-bm .ico{color:var(--muted)}
.side-bm .side-text{display:flex;flex-direction:column;min-width:0}

/* ブックマーク一覧（/bookmarks） */
.bm-sec{margin-top:20px}
.bm-site{display:flex;align-items:center;gap:10px;font-size:16px;margin:0 0 8px;font-weight:700}
.bm-site-link{color:inherit;text-decoration:none}
.bm-site-link:hover{text-decoration:underline}
.bm-list{margin-top:8px}
.bm-row .row-title{gap:8px;flex-wrap:nowrap}
.bm-row .row-title .ico{color:var(--accent);flex:none}
.bm-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.bm-row .row-sub{word-break:normal;overflow-wrap:anywhere}
@media (max-width:700px){
  .bm-row .row-actions{width:100%}
}

/* ローカル開発用のアカウント切り替え（画面右上） */
.dev-switch{position:sticky;top:8px;margin:12px 16px -4px auto;width:fit-content;z-index:60;display:flex;align-items:center;gap:8px;padding:6px 10px;background:rgba(255,255,255,.92);border:1px dashed #F59E0B;border-radius:10px;box-shadow:0 4px 14px rgba(15,23,42,.08);backdrop-filter:blur(8px)}
.dev-switch-tag{font-size:11px;font-weight:700;color:#92400E;background:#FEF3C7;border-radius:6px;padding:2px 8px;white-space:nowrap}
.dev-switch select{font:inherit;font-size:13px;max-width:min(360px,60vw);padding:6px 10px;border:1px solid #CBD5E1;border-radius:8px;background:#fff;color:#0F172A}
@media (max-width:640px){.dev-switch{width:auto;margin:12px 12px -4px}.dev-switch select{max-width:none;flex:1}}

/* ===== v10.4 UI改善 ===== */
/* 受信途絶（警告） */
.status-warn{background:var(--warn-bg);color:var(--warn-text);box-shadow:inset 0 0 0 1px rgba(180,83,9,.4)}
.status-warn .dot{background:var(--warn);box-shadow:0 0 0 3px rgba(180,83,9,.2)}
.dot-warn{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block;background:var(--warn);box-shadow:0 0 0 3px rgba(180,83,9,.2)}
.alert-ok{background:var(--ok-bg);color:var(--ok-text);border:1px solid rgba(21,128,61,.3)}
.alert-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.badge-wait{background:var(--accent-tint);color:var(--accent-deep)}

/* 「?」ヘルプ */
.help{position:relative;display:inline-flex;align-items:center;margin-left:6px;vertical-align:middle;font-weight:400;letter-spacing:0;text-transform:none}
.help-btn{position:relative;width:20px;height:20px;padding:0;border-radius:50%;border:1px solid var(--ctl-line);background:#fff;color:var(--muted);font:700 12px/1 var(--font);cursor:pointer;display:inline-grid;place-items:center}
.help-btn::after{content:"";position:absolute;inset:-9px}
.help-btn:hover,.help-btn[aria-expanded="true"]{background:var(--accent-tint);color:var(--accent-deep);border-color:rgba(37,99,235,.4)}
.help-pop{position:absolute;left:0;top:calc(100% + 8px);z-index:80;width:max-content;max-width:min(300px,calc(100vw - 32px));padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.98);border:1px solid var(--line);box-shadow:var(--glass-shadow-lg);color:var(--text);font:400 12.5px/1.65 var(--font);text-align:left;white-space:normal}
.help-line{display:block}
.help-line+.help-line{margin-top:6px}

/* サイト一覧: 次にやること */
.site-next{position:relative;z-index:2;display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;padding:10px 14px;border-radius:14px;background:var(--accent-tint);border:1px solid rgba(37,99,235,.2);color:var(--accent-deep);text-decoration:none;font-size:13px;line-height:1.4}
.site-next:hover{background:#DCE8FD}
.site-next-l{font-size:12px;font-weight:600;color:var(--muted)}
.site-next-t{font-weight:700}
.site-next-go{margin-left:auto;font-weight:700}
/* カード下段: 狭い幅では折り返し、「開く」は崩さない */
.site-card-foot{flex-wrap:wrap;row-gap:8px}
.site-card-foot .site-open{white-space:nowrap;flex:none}
/* リスト表示: 見出しは折り返さない */
.srow-head .srow-group,.srow-head .srow-name,.srow-head span{white-space:nowrap;overflow:visible}

/* 入力欄の見た目をそろえる（数値・複数行も同じ角丸・枠） */
input[type=number],textarea{font:inherit;padding:10px 14px;border:1px solid var(--ctl-line);border-radius:12px;background:rgba(255,255,255,.85);box-shadow:inset 0 1px 2px rgba(31,41,55,.08);color:var(--text);width:100%}
input[type=number]:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
textarea{resize:vertical;line-height:1.6}

/* サイト設定（基本 + 詳細設定） */
.settings-form{max-width:640px}
.settings-basic{display:flex;flex-direction:column;margin-bottom:6px}
.settings-adv{margin:4px 0 18px;border:1px solid var(--line);border-radius:14px;padding:4px 14px}
.settings-adv>summary{cursor:pointer;font-weight:700;padding:10px 0;font-size:14px}
.settings-adv-body{padding:6px 0 4px}
details.settings-adv[open]>summary{border-bottom:1px solid var(--line);margin-bottom:12px}

/* サイト追加直後の計測タグ */
.side-card.is-new{box-shadow:var(--glass-hi),0 0 0 2px var(--accent),var(--glass-shadow)}
.btn-pulse{animation:btn-pulse 1.8s ease-out 3}
@keyframes btn-pulse{0%{box-shadow:0 0 0 0 rgba(37,99,235,.5)}100%{box-shadow:0 0 0 12px rgba(37,99,235,0)}}
@media (prefers-reduced-motion:reduce){.btn-pulse{animation:none}}

/* サイドバー: パスワード変更 */
.side-pw{color:var(--muted)}

/* スマホ(〜760px): タップしやすい大きさ */
@media (max-width:760px){
  .seg-btn{min-height:40px;padding:6px 14px}
  .btn-sm{min-height:40px}
  .crumbs a{display:inline-flex;align-items:center;min-height:40px;padding:0 4px}
  .switch::before{content:"";position:absolute;inset:-12px -4px}
  .star-btn{width:40px;height:40px}
  .link-btn,.ck-action,.menu summary{min-height:40px;display:inline-flex;align-items:center}
  .help-btn{width:24px;height:24px}
  .side-nav .side-link,.side-foot .side-link{min-height:40px}
  .tb-clear{width:36px;height:36px}
  .site-next{padding:12px 14px}
}
#tag,#pages,#site-settings{scroll-margin-top:72px}
@media (max-width:760px){
  .select-sm,select{min-height:40px}
  .grp-toggle{min-height:40px}
  .brand{min-width:40px;min-height:40px;display:inline-flex;align-items:center}
  details.menu>summary,.ops-details>summary,.more>summary{min-height:40px;display:flex;align-items:center}
  .site-link{display:inline-block;padding:10px 0;margin:-10px 0}
}

/* ページ比較表（/site/{id}/table）。色の 赤/黄/緑 は Excel 既定のカラースケールに合わせた固定値（データの色なのでトークン化しない） */
.pt-card{min-width:0}
.pt-explain{margin:0 0 14px;color:var(--text-2);font-size:14px}
.pt-controls{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-bottom:12px}
.pt-group{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.pt-gl{font-size:12.5px;font-weight:700;color:var(--muted)}
.pt-dates{display:inline-flex;gap:6px;align-items:center}
.pt-dates input{padding:6px 10px;border:1px solid var(--ctl-line);border-radius:10px;font:inherit;font-size:13px;background:#fff;color:var(--text)}
.pt-legend{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:0 0 10px;padding:10px 14px;border-radius:14px;background:var(--tint-bg);font-size:12.5px;color:var(--text-2)}
.pt-legend[hidden]{display:none}
.pt-bar{width:120px;height:12px;border-radius:6px;background:linear-gradient(90deg,#F8696B,#FFEB84,#63BE7B);box-shadow:inset 0 0 0 1px rgba(31,41,55,.15);flex:none}
.pt-few-note{display:inline-flex;gap:8px;align-items:center}
.pt-few{display:inline-block;margin-left:8px;padding:0 7px;border-radius:99px;border:1px solid var(--ctl-line);background:#fff;color:var(--muted);font-size:11.5px;font-weight:700;line-height:1.6;vertical-align:middle;flex:none}
.pt-few-note .pt-few{margin-left:0}
.pt-terms{position:relative;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin:0 0 12px;font-size:13px;color:var(--text-2)}
.pt-term{display:inline-flex;align-items:center}
.pt-term .help{position:static}
.pt-terms .help-pop{left:0;right:auto;top:calc(100% + 4px)}
.pt-status{min-height:0;color:var(--muted);font-size:13px}
.pt-status:not(:empty){padding:10px 0}
.pt-wrap{overflow:auto;max-width:100%;max-height:72vh;border:1px solid var(--line);border-radius:14px;background:#fff}
.pt-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pt-table{border-collapse:separate;border-spacing:0;width:100%;font-size:13.5px;font-variant-numeric:tabular-nums;color:#1F2937}
.pt-table th,.pt-table td{position:relative;padding:10px 8px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);white-space:nowrap;background:#fff}
.pt-table thead th{position:sticky;top:0;z-index:2;background:#EEF2F8;text-align:center;vertical-align:bottom;font-weight:700;color:#1F2937;white-space:normal;min-width:88px;line-height:1.4;word-break:keep-all}
.pt-table .pt-first{position:sticky;left:0;z-index:1;text-align:left;padding-left:12px;min-width:150px;max-width:260px;white-space:normal;background:#fff;font-weight:600}
.pt-table thead .pt-first{z-index:3;background:#EEF2F8}
.pt-table .pt-first a{color:var(--accent-deep)}
.pt-table td.pt-num{text-align:right}
.pt-table td.is-null{color:var(--muted);text-align:center}
.pt-table tbody tr:hover td:not(.is-heat),.pt-table tbody tr:hover th.pt-first{background:var(--accent-tint)}
.pt-table tr.is-few .pt-first{font-weight:500}
.pt-sort{display:inline-flex;align-items:center;justify-content:center;gap:4px;width:100%;min-height:36px;padding:2px 4px;border:0;border-radius:8px;background:transparent;font:inherit;font-weight:700;color:inherit;cursor:pointer}
.pt-sort:hover{background:rgba(37,99,235,.1)}
.pt-sort:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pt-sort.is-on{color:var(--accent-deep)}
.pt-arrow{font-size:10px;width:10px;flex:none}
.pt-foot{margin:10px 0 0}
@media (max-width:760px){
  .pt-table{font-size:13px}
  .pt-table .pt-first{min-width:128px;max-width:150px}
  .pt-legend{padding:10px 12px}
  .pt-bar{width:90px}
}
/* v11: 除外IP */
.ipx-ta{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.6;min-height:110px;resize:vertical}
.ipx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ipx-optout{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding:12px;border:1px solid rgba(31,41,55,.12);border-radius:14px;background:rgba(255,255,255,.55)}
.ipx-optout .code-box{margin:6px 0 0}
.ipx-box{display:flex;flex-direction:column;gap:10px;margin-top:12px}