/* ================================================================
   Ad Order Desk — Design System  "Crystal Glass" (2026-10-08 刷新)
   目標: Apple 製品のような、高級感のあるすりガラス（Liquid Glass）と、業務アプリとしての見やすさの両立。
   方針（オーナー決定・必ず守る）: 使いやすさ・見やすさ ＞ 見た目
     - ガラス（半透明＋ぼかし＋光の縁）は "枠まわり"（サイドバー / 上部バー / スマホ下タブ / ダイアログ /
       お知らせ / トースト / 下部操作バー / 手順バー）と、カードの "地" に使う。
     - 文字・表・入力欄は白（不透明）の上に置き、コントラストを保つ。
     - 背景は模様なしの「ただのグラデーション」（2026-10-08 オーナー指定）。サファイアの青 → パールのような白へ流れる上品な色。
   色: アクセントは Apple のシステムブルーに近い青（#2563EB）と、水色へのグラデーション。
   ================================================================ */
:root {
  color-scheme: light;
  --bg: #EEF2FA;
  --surface: #FFFFFF;            /* 入力欄・表など、読みやすさ優先の不透明な面 */
  --surface-2: #F5F8FD;
  --card: rgba(255,255,255,.86); /* カードの地（すりガラス。青い背景でも白く見え、文字は十分に読める濃さ） */
  --card-edge: rgba(15,23,42,.07);
  --card-rim: rgba(255,255,255,.92);     /* カードの光の縁 */
  --glass: rgba(255,255,255,.56);        /* サイドバー・タブなど */
  --glass-strong: rgba(255,255,255,.82); /* ダイアログ・お知らせなど */
  --glass-border: rgba(255,255,255,.88);
  --glass-edge: rgba(15,23,42,.08);
  --glass-hi: inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.30);
  --glass-shadow: 0 0 0 .5px rgba(15,23,42,.08), 0 2px 6px -2px rgba(30,58,138,.08), 0 26px 64px -22px rgba(30,58,138,.32);
  --glass-sheen: radial-gradient(140% 70% at 0% 0%, rgba(255,255,255,.80), rgba(255,255,255,0) 55%);  /* 左上から差す光 */
  --card-sheen: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 120px);
  --blur: blur(30px) saturate(190%);
  --card-blur: blur(22px) saturate(170%);
  --seg-track: rgba(118,128,160,.13);
  --hover: rgba(37,99,235,.06);
  --line: #E0E6F0;
  --line-2: #EBEFF6;
  --line-strong: #C9D2E1;
  --text: #0B1324;
  --text-2: #374157;
  --text-3: #5D687E;             /* 白地でコントラスト 5:1 以上 */
  --brand: #2563EB;
  --brand-2: #3B82F6;
  --brand-weak: #E8F0FF;
  --brand-ink: #1D4ED8;
  --grad: linear-gradient(120deg, #1D9BF0 0%, #2563EB 52%, #3D4FE0 100%);   /* 主ボタン・選択中 */
  --grad-v: linear-gradient(180deg, #38BDF8 0%, #2563EB 100%);             /* グラフの棒 */
  --grad-soft: linear-gradient(135deg, #EEF4FF 0%, #E8FAFF 100%);
  --glow: 0 10px 24px -8px rgba(37,99,235,.55);
  --red: #E5484D;  --red-weak: #FDECEC;  --red-ink: #B42328;
  --amber: #D97706; --amber-weak: #FEF3E2; --amber-ink: #9A4A00;
  --green: #16A34A; --green-weak: #E5F6EC; --green-ink: #0D7A39;
  --blue: #2563EB; --blue-weak: #E7EFFE; --blue-ink: #1D4ED8;
  --violet: #7C3AED; --violet-weak: #F1EBFE; --violet-ink: #6527C9;
  --gray: #64748B; --gray-weak: #EEF1F6; --gray-ink: #475569;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow-sm: 0 0 0 .5px rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.05);
  --shadow: 0 0 0 .5px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04), 0 14px 34px -18px rgba(30,58,138,.24);
  --shadow-lg: 0 0 0 .5px rgba(15,23,42,.06), 0 26px 56px -20px rgba(30,58,138,.36), 0 6px 14px -6px rgba(15,23,42,.08);
  --sidebar: 264px;
  --tabbar-h: 68px;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic UI', system-ui, sans-serif;
  /* 背景「Sapphire Pearl」: 左上の深いサファイアブルー → 澄んだ青 → 淡いスカイブルー → 右下のパールホワイト。
     模様は入れない（2026-10-08 オーナー指定）。右上にごく薄い真珠の光、左下にごく薄い藍色の深みを重ねて奥行きを出す。
     見出しが乗る左上付近は、濃い紺の文字でもコントラスト 5:1 以上になる明るさにしてある */
  --page-glow:
    radial-gradient(1100px 760px at 100% 0%, rgba(255,255,255,.42), rgba(255,255,255,0) 62%),
    radial-gradient(1000px 760px at 0% 100%, rgba(79,70,229,.16), rgba(79,70,229,0) 62%),
    linear-gradient(135deg, #2A57C6 0%, #3D74DE 8%, #6A9FEE 24%, #97C5F4 46%, #C3E0F7 70%, #EAF3FB 100%);
  --on-bg-text: #0A1A33;          /* 背景（青のグラデーション）に直接のる文字 */
  --on-bg-muted: rgba(10,26,51,.74);
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #060A14;
  --surface: #121826; --surface-2: #171E2E;
  --card: rgba(20,26,40,.74); --card-edge: rgba(255,255,255,.08); --card-rim: rgba(255,255,255,.08);
  --glass: rgba(22,28,44,.55); --glass-strong: rgba(24,30,48,.82);
  --glass-border: rgba(255,255,255,.12); --glass-edge: rgba(255,255,255,.10);
  --glass-hi: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.04);
  --glass-shadow: 0 0 0 .5px rgba(0,0,0,.5), 0 26px 64px -20px rgba(0,0,0,.75);
  --glass-sheen: radial-gradient(140% 70% at 0% 0%, rgba(255,255,255,.07), rgba(255,255,255,0) 55%);
  --card-sheen: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 120px);
  --seg-track: rgba(255,255,255,.08);
  --hover: rgba(255,255,255,.05);
  --line: #273041; --line-2: #1F2736; --line-strong: #3A4456;
  --text: #EEF1F7; --text-2: #BCC4D4; --text-3: #8F99AE;
  --brand: #5B9BFF; --brand-2: #60A5FA; --brand-weak: #16264A; --brand-ink: #C4DAFF;
  --grad: linear-gradient(120deg, #2AA3F5 0%, #3B82F6 52%, #5865F2 100%);
  --grad-soft: linear-gradient(135deg, rgba(59,130,246,.14), rgba(34,211,238,.08));
  --glow: 0 10px 26px -8px rgba(59,130,246,.6);
  --red-weak: #3A1C1F; --amber-weak: #3A2A12; --green-weak: #12301F; --blue-weak: #172645; --violet-weak: #2A1D47; --gray-weak: #222A37;
  --red-ink: #FF9A9E; --amber-ink: #FBBF4D; --green-ink: #5BE08F; --blue-ink: #9DBBFF; --violet-ink: #C9AEFF; --gray-ink: #AEB7C7;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 0 0 .5px rgba(0,0,0,.4), 0 14px 34px -16px rgba(0,0,0,.6);
  --shadow-lg: 0 26px 56px -16px rgba(0,0,0,.7);
  --page-glow:
    radial-gradient(1100px 760px at 100% 0%, rgba(96,165,250,.10), transparent 62%),
    radial-gradient(1000px 760px at 0% 100%, rgba(79,70,229,.18), transparent 62%),
    linear-gradient(135deg, #0B1838 0%, #10244E 35%, #0F2A4D 65%, #0B1F36 100%);
  --on-bg-text: #EEF1F7;
  --on-bg-muted: rgba(226,236,250,.78);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { background: var(--bg); }
body {
  font-family: var(--font); font-size: 14px; line-height: 1.6; color: var(--text); background: transparent;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "palt" 1; text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
body.has-modal { overflow: hidden; }
/* 背景: グラデーションのみ（模様なし）。固定表示なのでスクロールしても動かない */
body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: var(--page-glow); pointer-events: none; }
::selection { background: rgba(59,130,246,.22); }
a { color: var(--brand); text-decoration: none; }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.35; letter-spacing: -.005em; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 50%, transparent); outline-offset: 2px; border-radius: 10px; }
.ic { flex: none; vertical-align: middle; }
.muted { color: var(--text-3); }
.small { font-size: 12px; }
.bold { font-weight: 700; }
.mono { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.hide { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip-link {
  position: absolute; top: -9999px; left: 50%; transform: translateX(-50%); z-index: 9999;
  background: var(--brand); color: #fff; padding: 10px 20px; border-radius: 999px; font-weight: 700; font-size: 13.5px;
  box-shadow: var(--shadow-lg); text-decoration: none; transition: top .2s cubic-bezier(.2,.9,.3,1.15);
}
.skip-link:focus {
  top: 14px; outline: 3px solid #fff; outline-offset: 2px;
}

/* スクロールバー（細く・半透明に。macOS 風） */
* { scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.38) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,.36); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(100,116,139,.55); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.18); }

/* ガラスの共通レシピ（ぼかし）。色・縁・光は各部品で指定する */
.glass, .sidebar, .tabbar, .modal, .notif-panel, .notif-fab, .steps, .wizard-foot, .bulkbar, .toast, .login-box {
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}

/* ---------- Layout ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar) minmax(0,1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 14px; height: calc(100vh - 28px); margin: 14px 0 14px 14px;
  background: var(--glass-sheen), var(--glass); border: 1px solid var(--glass-border); border-radius: 30px;
  box-shadow: var(--glass-shadow), var(--glass-hi);
  display: flex; flex-direction: column; padding: 18px 12px 12px; overflow: hidden auto;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 10px 20px; }
/* アプリのアイコン（Apple のアプリアイコン風: つややかな青いガラスの角丸） */
.brand-logo {
  position: relative; overflow: hidden; width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: linear-gradient(150deg, #7DD3FC 0%, #3B82F6 42%, #2563EB 62%, #312E81 100%);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 17px; letter-spacing: -.02em; text-shadow: 0 1px 2px rgba(15,23,42,.35);
  box-shadow: 0 8px 18px -6px rgba(37,99,235,.65), inset 0 1px 1px rgba(255,255,255,.65), inset 0 -2px 5px rgba(15,23,42,.22);
}
.brand-logo::after { content: ''; position: absolute; inset: 0 0 48% 0; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.05)); border-radius: 11px 11px 50% 50% / 11px 11px 18px 18px; pointer-events: none; }
.brand-name { font-weight: 800; font-size: 15.5px; letter-spacing: -.015em; }
.brand-sub { font-size: 11.5px; color: var(--text-3); font-weight: 500; }
.nav { display: flex; flex-direction: column; gap: 3px; }
.nav-label { font-size: 11px; color: var(--text-3); font-weight: 700; padding: 18px 12px 6px; letter-spacing: .08em; }
.nav a {
  display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 9px 12px; border-radius: 14px; color: var(--text-2); font-weight: 600;
  transition: background .18s, color .18s, box-shadow .18s, transform .12s;
}
.nav a:hover { background: color-mix(in srgb, var(--surface) 62%, transparent); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
[data-theme="dark"] .nav a:hover { background: rgba(255,255,255,.06); box-shadow: none; }
.nav a:active { transform: scale(.985); }
/* 選択中: Apple の Finder のような、青いガラスの帯＋白い文字（どこにいるか一目でわかる） */
.nav a.active, [data-theme="dark"] .nav a.active {
  background: var(--grad); color: #fff;
  box-shadow: var(--glow), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(15,23,42,.12);
}
.nav a.active .ic { color: #fff; }
.nav a .count { margin-left: auto; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; border-radius: 99px; padding: 0 7px; min-width: 22px; text-align: center; line-height: 20px; box-shadow: 0 2px 6px -1px rgba(229,72,77,.5); }
.nav a.active .count { box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
.sidebar-foot { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.me { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 18px; background: color-mix(in srgb, var(--surface) 58%, transparent); border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm); min-width: 0; }
[data-theme="dark"] .me { background: rgba(255,255,255,.04); box-shadow: none; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff; flex: none; box-shadow: inset 0 1px 1px rgba(255,255,255,.45), 0 4px 10px -4px rgba(15,23,42,.35); }
.me-info { min-width: 0; flex: 1; }
.me-name { font-weight: 700; font-size: 13.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-role { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 18px; background: var(--seg-track); }
.foot-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; border: 0; background: transparent; border-radius: 14px; cursor: pointer; color: var(--text-2); font-size: 11px; font-weight: 600; transition: background .15s, color .15s, box-shadow .15s; }
.foot-btn:hover { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 4px 10px -4px rgba(15,23,42,.14); }
[data-theme="dark"] .foot-btn:hover { background: rgba(255,255,255,.08); box-shadow: none; }
.foot-btn .notif-dot { top: 4px; right: calc(50% - 18px); }
.main { min-width: 0; display: flex; flex-direction: column; }
/* 上部バー: 最初は透明、スクロールすると すりガラスになる（高さを変えず固定して振動を防止） */
.topbar {
  position: sticky; top: 0; z-index: 20; background: transparent;
  display: flex; align-items: center; gap: 12px; padding: 16px 34px; border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.scrolled .topbar {
  background: color-mix(in srgb, var(--bg) 52%, transparent); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border-bottom-color: var(--glass-edge); box-shadow: 0 12px 28px -22px rgba(30,58,138,.4);
}
.topbar h1 { font-size: 26px; font-weight: 800; letter-spacing: -.022em; color: var(--on-bg-text); }
.topbar .crumb { color: var(--on-bg-muted); font-size: 13px; font-weight: 600; letter-spacing: .01em; }
/* 背景（青のグラデーション）に直接のる補足文は、白地用の灰色だと読みにくいので濃い紺にする */
.content > .hint, .content > .muted, .content > .small, .content > .stack > .hint { color: var(--on-bg-muted); font-weight: 500; }
.toolbar > .muted, .toolbar > .small { color: var(--on-bg-text); font-weight: 700; }
.toolbar .btn-ghost { color: var(--on-bg-text); }
.toolbar .btn-ghost:hover { background: rgba(255,255,255,.4); }
.topbar .icon-btn { background: rgba(255,255,255,.62); color: var(--on-bg-text); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
[data-theme="dark"] .topbar .icon-btn { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
html:not([data-theme="dark"]) .topbar .seg, html:not([data-theme="dark"]) .topbar .btn-group { background: rgba(255,255,255,.42); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.topbar .spacer { flex: 1; }
.content { padding: 8px 34px 60px; max-width: 1480px; width: 100%; }
.content.narrow { max-width: 1080px; }
.demo-banner { background: linear-gradient(90deg, #FEF3C7, #FDE68A); color: #78350F; font-size: 12px; padding: 6px 16px; border-bottom: 1px solid rgba(180, 83, 9, .15); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
[data-theme="dark"] .demo-banner { background: linear-gradient(90deg, rgba(245, 158, 11, .25), rgba(217, 119, 6, .2)); color: #FDE68A; border-bottom: 1px solid rgba(245, 158, 11, .3); }
.demo-banner-inner { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; max-width: 1400px; margin: 0 auto; }
.demo-tag { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; padding: 1px 8px; border-radius: 99px; background: rgba(180, 83, 9, .15); letter-spacing: .02em; }
[data-theme="dark"] .demo-tag { background: rgba(245, 158, 11, .35); color: #FFF; }
.demo-user { display: inline-flex; align-items: center; gap: 6px; }
.demo-actions { display: inline-flex; align-items: center; gap: 6px; }
.demo-banner button { display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, .75); border: 1px solid rgba(180, 83, 9, .2); border-radius: 99px; padding: 3px 12px; cursor: pointer; font-size: 12px; font-weight: 700; color: #78350F; transition: all .15s; }
.demo-banner button:hover { background: #FFF; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,.08); }
.demo-banner .demo-quick-switch { background: #2563EB; color: #FFF; border-color: #1D4ED8; }
.demo-banner .demo-quick-switch:hover { background: #1D4ED8; color: #FFF; }
[data-theme="dark"] .demo-banner button { background: rgba(30, 41, 59, .8); border-color: rgba(245, 158, 11, .4); color: #FDE68A; }
[data-theme="dark"] .demo-banner button:hover { background: rgba(51, 65, 85, .9); color: #FFF; }
[data-theme="dark"] .demo-banner .demo-quick-switch { background: #3B82F6; color: #FFF; border-color: #60A5FA; }
.demo-banner + .shell .sidebar { height: calc(100vh - 28px - 34px); }

/* bottom tab (mobile) */
.tabbar { display: none; }

/* ---------- Buttons（Apple の Liquid Glass のような丸い「カプセル型」） ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 17px; border-radius: 999px;
  border: 1px solid var(--card-edge); background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.80)); color: var(--text); font-weight: 700; font-size: 13px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 4px 12px -8px rgba(30,58,138,.25), inset 0 1px 0 #fff;
  transition: background .15s, border-color .15s, box-shadow .2s, transform .08s; white-space: nowrap;
}
[data-theme="dark"] .btn { background: rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.btn:hover { background: #fff; border-color: var(--line-strong); box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 10px 22px -10px rgba(30,58,138,.32), inset 0 1px 0 #fff; }
[data-theme="dark"] .btn:hover { background: rgba(255,255,255,.12); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-outline { background: rgba(255,255,255,.55); border-color: color-mix(in srgb, var(--brand) 28%, transparent); color: var(--brand-ink); }
.btn-outline:hover { background: var(--brand-weak); border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
[data-theme="dark"] .btn-outline { color: var(--brand-ink); }
.btn-primary, [data-theme="dark"] .btn-primary { background: var(--grad); border-color: transparent; color: #fff; box-shadow: var(--glow), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(15,23,42,.15); text-shadow: 0 1px 1px rgba(15,23,42,.18); }
.btn-primary:hover, [data-theme="dark"] .btn-primary:hover { background: var(--grad); filter: brightness(1.06) saturate(1.05); border-color: transparent; box-shadow: 0 14px 28px -10px rgba(37,99,235,.6), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-success, [data-theme="dark"] .btn-success { background: linear-gradient(120deg, #22C55E, #16A34A 55%, #0E8F43); border-color: transparent; color: #fff; box-shadow: 0 10px 22px -10px rgba(22,163,74,.6), inset 0 1px 0 rgba(255,255,255,.3); text-shadow: 0 1px 1px rgba(15,23,42,.15); }
.btn-success:hover { filter: brightness(1.05); border-color: transparent; background: linear-gradient(120deg, #22C55E, #16A34A 55%, #0E8F43); }
.btn-danger, [data-theme="dark"] .btn-danger { background: linear-gradient(120deg, #F87171, #E5484D 55%, #C9343A); border-color: transparent; color: #fff; box-shadow: 0 10px 22px -10px rgba(229,72,77,.6), inset 0 1px 0 rgba(255,255,255,.3); text-shadow: 0 1px 1px rgba(15,23,42,.15); }
.btn-danger:hover { filter: brightness(1.05); border-color: transparent; background: linear-gradient(120deg, #F87171, #E5484D 55%, #C9343A); }
.btn-ghost, [data-theme="dark"] .btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); }
.btn-ghost:hover, [data-theme="dark"] .btn-ghost:hover { background: var(--hover); border-color: transparent; box-shadow: none; color: var(--text); }
.btn-onDark { background: rgba(255,255,255,.14) !important; color: #fff !important; border-color: rgba(255,255,255,.22) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important; }
.btn-onDark:hover { background: rgba(255,255,255,.22) !important; }
.btn-sm { height: 32px; padding: 0 13px; font-size: 12.5px; }
.btn-lg { height: 48px; padding: 0 26px; font-size: 14.5px; }
.icon-btn { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 0; background: transparent; border-radius: 50%; color: var(--text-2); cursor: pointer; transition: background .15s, color .15s, transform .08s; }
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn:active { transform: scale(.94); }
/* 切り替えボタン（セグメント）: すりガラスの溝の上に、白いカプセルが乗る */
.btn-group, .seg { display: inline-flex; flex-wrap: wrap; background: var(--seg-track); padding: 3px; border-radius: 999px; gap: 2px; box-shadow: inset 0 1px 2px rgba(15,23,42,.06); }
.btn-group button, .seg button { border: 0; background: transparent; height: 32px; padding: 0 14px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12.5px; color: var(--text-2); transition: background .18s, color .18s, box-shadow .18s; white-space: nowrap; }
.btn-group button:hover, .seg button:hover { color: var(--text); }
.btn-group button.on, .seg button.on { background: var(--surface); color: var(--brand-ink); box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 4px 10px -3px rgba(30,58,138,.18), inset 0 1px 0 #fff; }
[data-theme="dark"] .btn-group button.on, [data-theme="dark"] .seg button.on { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }

/* ---------- Cards（白いすりガラス。上辺に光の縁） ---------- */
.card {
  background: var(--card-sheen), var(--card); border: 1px solid var(--card-rim); border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter: var(--card-blur); backdrop-filter: var(--card-blur);
}
[data-theme="dark"] .card { box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05); }
.card-pad { padding: 22px; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--line-2); }
.card-head > .ic:first-child { color: var(--brand); }
.card-head h3 { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; }
.card-head .spacer { flex: 1; }
.card-head a.small { font-weight: 700; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.between { justify-content: space-between; }

/* KPI（数字のカード）: 右上にアプリアイコン風の色つきガラス、奥に同じ色のやわらかい光 */
.kpi { --kc: var(--brand); padding: 20px 22px; position: relative; overflow: hidden; cursor: pointer; transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s; isolation: isolate; }
.kpi::after { content: ''; position: absolute; right: -40px; top: -50px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--kc) 22%, transparent), transparent 70%); z-index: -1; pointer-events: none; }
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.9); }
.kpi-label { font-size: 13px; color: var(--text-2); font-weight: 700; display: flex; align-items: center; gap: 6px; padding-right: 48px; }
.kpi-value { font-size: 34px; font-weight: 800; letter-spacing: -.03em; margin-top: 4px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }
.kpi-ic {
  position: absolute; right: 18px; top: 18px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(150deg, color-mix(in srgb, var(--kc) 55%, #fff) 0%, var(--kc) 70%, color-mix(in srgb, var(--kc) 80%, #000) 100%); color: #fff;
  box-shadow: 0 8px 18px -8px var(--kc), inset 0 1px 1px rgba(255,255,255,.55), inset 0 -2px 4px rgba(15,23,42,.18);
}
.kpi-ic::after { content: ''; position: absolute; inset: 0 0 50% 0; background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0)); pointer-events: none; }
.kpi.alert { border-color: color-mix(in srgb, var(--red) 35%, #fff); background: linear-gradient(180deg, color-mix(in srgb, var(--red) 9%, var(--surface)), var(--card)); }
.kpi.alert .kpi-value { color: var(--red-ink); }
[data-theme="dark"] .kpi.alert { background: linear-gradient(180deg, rgba(229,72,77,.16), var(--card)); border-color: #5b2a2d; }

/* ---------- Badges & chips ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 18%, transparent); }
.badge-red { background: var(--red-weak); color: var(--red-ink); }
.badge-amber { background: var(--amber-weak); color: var(--amber-ink); }
.badge-green { background: var(--green-weak); color: var(--green-ink); }
.badge-blue { background: var(--blue-weak); color: var(--blue-ink); }
.badge-violet { background: var(--violet-weak); color: var(--violet-ink); }
.badge-gray { background: var(--gray-weak); color: var(--gray-ink); }
.badge-muted { background: var(--gray-weak); color: var(--text-3); }
.mchip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 7px; border-radius: 8px; font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--mc) 10%, var(--surface)); color: var(--text); border: 1px solid color-mix(in srgb, var(--mc) 28%, transparent); white-space: nowrap; }
.mchip i { width: 8px; height: 8px; border-radius: 3px; background: var(--mc); }
.mchip-sm { height: 22px; font-size: 11.5px; padding: 0 7px 0 6px; }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 7px; background: var(--gray-weak); color: var(--text-2); font-size: 12px; }
.cstat { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cstat-none { color: var(--text-3); } .cstat-partial { color: var(--amber-ink); } .cstat-complete { color: var(--green-ink); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label, .label { font-size: 13px; font-weight: 700; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.req { color: var(--red-ink); font-size: 11px; font-weight: 700; }
.opt { color: var(--text-3); font-size: 11px; font-weight: 500; }
.hint { font-size: 12.5px; color: var(--text-3); }
.input, .select, .textarea {
  width: 100%; height: 40px; padding: 0 14px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface);
  box-shadow: inset 0 1px 2px rgba(15,23,42,.05), 0 1px 0 rgba(255,255,255,.8); transition: border-color .15s, box-shadow .2s; outline: none;
}
.input::placeholder, .textarea::placeholder { color: color-mix(in srgb, var(--text-3) 85%, transparent); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.textarea { height: auto; min-height: 80px; padding: 10px 14px; resize: vertical; line-height: 1.65; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-2) 18%, transparent), 0 6px 16px -10px rgba(37,99,235,.45); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; }
.input.err, .textarea.err { border-color: var(--red); background: color-mix(in srgb, var(--red) 4%, var(--surface)); }
.input.warn, .textarea.warn { border-color: #F2C27B; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23727C91' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; }
.input-yen { position: relative; }
.input-yen::before { content: '¥'; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-weight: 600; }
.input-yen .input { padding-left: 28px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.input-yen small { position: absolute; right: -2px; bottom: -18px; font-size: 11px; color: var(--text-3); }

/* toggle chips (multi select) */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--surface); cursor: pointer; font-size: 13px; font-weight: 600; user-select: none; transition: all .18s; color: var(--text-2);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.chip:hover { border-color: var(--line-strong); color: var(--text); }
.chip input { display: none; }
.chip.on, .chip:has(input:checked) { background: var(--grad); border-color: transparent; color: #fff; font-weight: 700; box-shadow: 0 6px 14px -8px rgba(37,99,235,.7), inset 0 1px 0 rgba(255,255,255,.3); }
[data-theme="dark"] .chip.on, [data-theme="dark"] .chip:has(input:checked) { box-shadow: 0 6px 14px -8px rgba(59,130,246,.7); }
.chip.on::before, .chip:has(input:checked)::before { content: '✓'; font-size: 11px; }
.chip-all { border-style: dashed; color: var(--text-2); }

/* media picker tiles */
.media-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.mtile {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface);
  cursor: pointer; transition: all .15s; user-select: none;
}
.mtile:hover { border-color: color-mix(in srgb, var(--mc) 50%, var(--line)); transform: translateY(-1px); box-shadow: var(--shadow); }
.mtile .mdot { width: 36px; height: 36px; border-radius: 11px; background: color-mix(in srgb, var(--mc) 14%, var(--surface)); color: var(--mc); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.mtile .mname { font-weight: 700; font-size: 13.5px; line-height: 1.3; }
.mtile .mcheck { position: absolute; right: 10px; top: 10px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; color: #fff; }
.mtile.on { border-color: var(--mc); background: color-mix(in srgb, var(--mc) 7%, var(--surface)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mc) 14%, transparent); }
.mtile.on .mcheck { background: var(--mc); border-color: var(--mc); }

/* ---------- Wizard ---------- */
.wizard { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 20px; align-items: start; }
.steps { display: flex; gap: 4px; margin-bottom: 20px; background: var(--glass-sheen), var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 999px; padding: 6px; box-shadow: var(--glass-shadow), var(--glass-hi); }
.step { flex: 1; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; cursor: pointer; color: var(--text-3); font-weight: 700; font-size: 13px; border: 0; background: transparent; text-align: left; transition: background .18s, color .18s, box-shadow .18s; min-width: 0; }
.step:hover { background: var(--hover); color: var(--text-2); }
.step .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gray-weak); font-size: 12px; font-weight: 800; flex: none; box-shadow: inset 0 0 0 1px rgba(15,23,42,.05); }
.step.done { color: var(--text-2); } .step.done .n { background: var(--green-weak); color: var(--green-ink); }
.step.on { background: var(--surface); color: var(--brand-ink); box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 8px 20px -10px rgba(37,99,235,.45), inset 0 1px 0 #fff; }
[data-theme="dark"] .step.on { background: rgba(91,155,255,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(91,155,255,.3); }
.step.on .n { background: var(--grad); color: #fff; box-shadow: 0 4px 10px -3px rgba(37,99,235,.65), inset 0 1px 0 rgba(255,255,255,.35); }
.step small { display: block; font-size: 11px; font-weight: 500; opacity: .85; }
.summary { position: sticky; top: 92px; }
.summary .tot { font-size: 30px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.summary-line { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 7px 0; border-bottom: 1px dashed var(--line-2); }
/* クリエイティブ入力の段階は横幅が必要なので、画面が狭めのときは右の合計パネルを隠す */
@media (max-width: 1680px) { .wizard.wide-step { grid-template-columns: minmax(0,1fr); } .wizard.wide-step .summary { display: none; } }
.wizard-foot {
  position: sticky; bottom: 16px; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 18px; margin-top: 22px;
  background: var(--glass-sheen), var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 999px; box-shadow: var(--glass-shadow), var(--glass-hi);
}
.wizard-foot .spacer { flex: 1; }
.autosave { font-size: 12.5px; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; }

/* placement block */
.pl { border: 1px solid var(--card-edge); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.pl + .pl { margin-top: 14px; }
.pl-head { display: flex; align-items: center; gap: 10px; padding: 13px 18px; background: color-mix(in srgb, var(--surface-2) 80%, transparent); border-bottom: 1px solid var(--line-2); cursor: pointer; transition: background .15s; }
.pl-head:hover { background: color-mix(in srgb, var(--surface-2) 95%, transparent); }
.pl-head .t { font-weight: 800; }
.pl-head .meta { color: var(--text-3); font-size: 12.5px; }
.pl-head .spacer { flex: 1; }
.pl-body { padding: 20px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px 18px; }
.pl.collapsed .pl-head { border-bottom: 0; }
.pl.collapsed .pl-body { display: none; }
.c12 { grid-column: span 12; } .c8 { grid-column: span 8; } .c6 { grid-column: span 6; } .c4 { grid-column: span 4; } .c3 { grid-column: span 3; }
.media-group { margin-bottom: 28px; }
.media-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.media-group-head h3 { font-size: 16px; font-weight: 800; }
.addtype { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.addtype button { border: 1px dashed var(--line-strong); background: color-mix(in srgb, var(--surface) 60%, transparent); border-radius: 10px; height: 32px; padding: 0 11px; font-size: 12.5px; font-weight: 700; color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.addtype button:hover { border-color: var(--brand-2); color: var(--brand); background: var(--brand-weak); }
.addtype button.spec::after { content: '仕様あり'; font-size: 10px; background: var(--green-weak); color: var(--green-ink); border-radius: 4px; padding: 0 4px; margin-left: 2px; }

/* ---------- Creative form ---------- */
.cr { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 20px; }
.cr-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cr-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 92px; align-self: start; max-height: calc(100vh - 190px); overflow: auto; }
.tl-item { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: start; }
.tl-item + .tl-item { margin-top: 6px; }
.tl-n { height: 40px; display: grid; place-items: center; font-size: 11.5px; color: var(--text-3); font-weight: 700; }
.counter { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-3); height: 40px; display: flex; align-items: center; min-width: 56px; justify-content: flex-end; }
.counter.over { color: var(--red-ink); font-weight: 700; }
.counter.near { color: var(--amber-ink); }
.issues { grid-column: 2 / 4; display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.issue { font-size: 12.5px; display: flex; gap: 6px; align-items: flex-start; line-height: 1.5; }
.issue.error { color: var(--red-ink); } .issue.warn { color: var(--amber-ink); }
.issue .ic { margin-top: 2px; }
.add-line { margin-top: 8px; }
.notes { border: 1px solid var(--card-edge); border-radius: 16px; background: var(--card); overflow: hidden; box-shadow: var(--shadow); }
.notes summary { padding: 12px 16px; cursor: pointer; font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 8px; list-style: none; }
.notes summary::-webkit-details-marker { display: none; }
.notes summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); transition: transform .15s; }
.notes[open] summary::after { transform: rotate(-135deg); }
.notes .nb { padding: 0 16px 16px; font-size: 13px; color: var(--text-2); white-space: pre-wrap; line-height: 1.8; }
.check-card { padding: 16px; }
.check-row { display: flex; gap: 8px; font-size: 13px; padding: 4px 0; }

/* dropzone & image grid */
.drop {
  border: 1.5px dashed var(--line-strong); border-radius: 16px; padding: 20px; text-align: center; color: var(--text-2); cursor: pointer; background: color-mix(in srgb, var(--surface-2) 80%, transparent); transition: all .15s;
}
.drop:hover, .drop.over { border-color: var(--brand-2); background: var(--brand-weak); color: var(--brand-ink); }
.drop b { color: var(--brand); }
.ratio-guide { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.rg { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; font-size: 12px; background: var(--surface); }
.rg .shape { background: color-mix(in srgb, var(--brand-2) 18%, transparent); border: 1.5px solid var(--brand-2); border-radius: 3px; }
.rg.ok { border-color: color-mix(in srgb, var(--green) 50%, transparent); background: var(--green-weak); }
.rg.ok .shape { background: var(--green); border-color: var(--green); }
.rg .need { font-size: 10px; font-weight: 700; color: var(--red-ink); }
.imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin-top: 10px; }
.img { position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); }
.img .th { aspect-ratio: 1; background: repeating-conic-gradient(#F1F3F7 0% 25%, #fff 0% 50%) 50% / 16px 16px; display: grid; place-items: center; overflow: hidden; }
.img .th img { max-width: 100%; max-height: 100%; object-fit: contain; }
.img .meta { padding: 6px 9px; font-size: 11.5px; line-height: 1.45; }
.img .meta b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); }
.img.err { border-color: var(--red); box-shadow: 0 0 0 2px var(--red-weak); }
.img .x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; background: rgba(17,24,39,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; border: 1px solid rgba(255,255,255,.25); cursor: pointer; display: grid; place-items: center; }
.img .rlabel { position: absolute; top: 7px; left: 7px; font-size: 10.5px; font-weight: 700; background: rgba(17,24,39,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; padding: 1px 7px; border-radius: 6px; }
.img .issue { padding: 0 9px 7px; font-size: 11.5px; }

/* carousel cards */
.ccards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ccard { border: 1px solid var(--line); border-radius: 16px; padding: 10px; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.ccard-h { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12.5px; }
.ccard .th { aspect-ratio: 1; border-radius: 10px; border: 1.5px dashed var(--line-strong); display: grid; place-items: center; overflow: hidden; cursor: pointer; background: var(--surface); color: var(--text-3); font-size: 12px; text-align: center; }
.ccard .th img { width: 100%; height: 100%; object-fit: contain; }
.ccard .input { height: 36px; font-size: 13px; }

/* ---------- Table ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.toolbar .spacer { flex: 1; }
.search { position: relative; }
.search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
.search .input { padding-left: 38px; width: 280px; border-radius: 999px; }
.select.fsel, .fsel { width: auto; max-width: 230px; height: 36px; border-radius: 999px; border: 1px solid var(--line); background-color: var(--surface); padding: 0 32px 0 14px; font-size: 13px; font-weight: 600; }
#cnt { font-weight: 700; color: var(--text-2); }
.table-wrap { overflow: auto; border-radius: var(--radius); border: 1px solid var(--card-rim); background: var(--surface); box-shadow: var(--shadow); max-height: calc(100vh - 230px); }
[data-theme="dark"] .table-wrap { border-color: var(--card-edge); }
table.t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.t th { position: sticky; top: 0; z-index: 2; background: color-mix(in srgb, var(--surface-2) 88%, transparent); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); text-align: left; font-size: 12px; font-weight: 700; color: var(--text-3); letter-spacing: .02em; padding: 11px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; cursor: pointer; user-select: none; }
.t th:hover { color: var(--text); }
.t th.sorted { color: var(--brand); }
.t td { padding: 12px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.t th:first-child, .t td:first-child { padding-left: 18px; }
.stat-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.t tbody tr:last-child td { border-bottom: 0; }
.t tbody tr { transition: background .12s; cursor: pointer; }
.t tbody tr:hover { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.t tbody tr.sel { background: var(--brand-weak); box-shadow: inset 3px 0 0 var(--brand); }
.t td.num, .t th.num { text-align: right; font-variant-numeric: tabular-nums; }
.t .group-row td { background: color-mix(in srgb, var(--bg) 85%, var(--surface)); font-weight: 800; font-size: 13px; padding: 9px 12px; position: sticky; top: 40px; z-index: 1; cursor: default; }
.t .cb { width: 40px; }
.t input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; }
.cell-main { font-weight: 700; }
.cell-sub { font-size: 12px; color: var(--text-3); }
.period { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bulkbar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.10), transparent 50%), rgba(15,20,34,.80); color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 8px 8px 8px 20px; display: flex; align-items: center; gap: 10px; box-shadow: 0 24px 56px -14px rgba(15,23,42,.55), inset 0 1px 0 rgba(255,255,255,.14); }
.bulkbar select { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; height: 34px; padding: 0 12px; }
.bulkbar select option { color: #111; }
.bulkbar .icon-btn { color: #fff; }
.bulkbar .icon-btn:hover { background: rgba(255,255,255,.12); }

/* Kanban */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.kcol { background: var(--glass-sheen), color-mix(in srgb, var(--surface) 42%, transparent); -webkit-backdrop-filter: var(--card-blur); backdrop-filter: var(--card-blur); border: 1px solid var(--glass-border); border-radius: 24px; padding: 10px; min-height: 300px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow), var(--glass-hi); }
[data-theme="dark"] .kcol { background: rgba(255,255,255,.03); }
.kcol.over { outline: 2px dashed var(--brand-2); outline-offset: -4px; }
.kcol-h { display: flex; align-items: center; gap: 8px; padding: 4px 4px 6px; font-weight: 700; font-size: 13px; }
.kcol-h .n { margin-left: auto; color: var(--text-3); font-size: 12px; font-weight: 600; }
.kcard { background: var(--surface); border: 1px solid var(--card-edge); border-radius: 14px; padding: 11px 13px; box-shadow: var(--shadow-sm); cursor: grab; display: flex; flex-direction: column; gap: 6px; transition: box-shadow .15s, transform .15s; }
.kcard:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.kcard.dragging { opacity: .5; }
.kcard .kc-t { font-weight: 800; font-size: 13.5px; line-height: 1.35; }

/* Gantt */
.gantt { overflow: auto; border: 1px solid var(--card-edge); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); max-height: calc(100vh - 230px); }
.gantt-grid { display: grid; position: relative; min-width: max-content; }
.g-head { position: sticky; top: 0; z-index: 3; background: var(--surface-2); border-bottom: 1px solid var(--line); display: contents; }
.g-label { position: sticky; left: 0; z-index: 2; background: var(--surface); border-right: 1px solid var(--line); padding: 6px 12px; font-size: 12.5px; min-height: 42px; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.g-label:hover { background: var(--surface-2); }
.g-days { display: grid; position: relative; border-bottom: 1px solid var(--line-2); }
.g-day { border-right: 1px solid var(--line-2); font-size: 10.5px; text-align: center; color: var(--text-3); }
.g-day.we { background: color-mix(in srgb, var(--gray-weak) 70%, transparent); }
.g-day.today { background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red-ink); font-weight: 700; }
.g-bar { position: absolute; top: 9px; height: 24px; border-radius: 8px; font-size: 11.5px; color: #fff; font-weight: 700; padding: 0 9px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; box-shadow: 0 2px 6px -2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.3); cursor: pointer; text-shadow: 0 1px 1px rgba(0,0,0,.18); }
.g-month { font-size: 11.5px; font-weight: 700; padding: 4px 6px; border-right: 1px solid var(--line); color: var(--text-2); white-space: nowrap; }
.g-todayline { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); z-index: 1; pointer-events: none; }

/* bar chart */
.bars { display: flex; flex-direction: column; gap: 11px; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 110px; gap: 10px; align-items: center; font-size: 13px; }
.bar-track { height: 10px; background: var(--gray-weak); border-radius: 99px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(15,23,42,.06); }
.bar-fill { height: 100%; border-radius: 99px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.month-chart { display: flex; align-items: flex-end; gap: 10px; height: 170px; padding-top: 10px; }
.mc-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.mc-bar { width: 100%; max-width: 46px; border-radius: 12px 12px 5px 5px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand-2) 55%, #fff), color-mix(in srgb, var(--brand-2) 22%, transparent)); min-height: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.mc-bar.cur { background: var(--grad-v); box-shadow: 0 10px 22px -8px rgba(37,99,235,.6), inset 0 1px 0 rgba(255,255,255,.45); }
.mc-l { font-size: 12px; color: var(--text-3); font-weight: 600; }
.mc-v { font-size: 11px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* list items */
.li { display: flex; align-items: center; gap: 12px; padding: 13px 22px; border-bottom: 1px solid var(--line-2); cursor: pointer; transition: background .1s; }
.li:last-child { border-bottom: 0; }
.li:hover { background: var(--hover); }
.li .grow { flex: 1; min-width: 0; }
.li .ttl { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* request cards (requester list / mobile) */
.rcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.rcard { padding: 18px 20px; cursor: pointer; transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column; gap: 10px; }
.rcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.rcard .rc-t { font-size: 16px; font-weight: 800; }
.rcard .rc-c { font-size: 12.5px; color: var(--text-3); }
.receipt { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--green-ink); background: var(--green-weak); padding: 4px 11px; border-radius: 99px; }

/* detail */
.detail { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 20px; align-items: start; }
.hero { padding: 24px 26px; display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.hero h2 { font-size: 23px; font-weight: 800; letter-spacing: -.01em; }
.dl { display: grid; grid-template-columns: 140px 1fr; gap: 9px 16px; font-size: 13.5px; }
.dl dt { color: var(--text-3); font-weight: 700; }
.dl dd { margin: 0; min-width: 0; word-break: break-word; }
.receive-box { border-radius: var(--radius); padding: 20px; background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.9), transparent 55%), linear-gradient(135deg, #E6F0FF 0%, #E3F7FF 100%); border: 1px solid rgba(255,255,255,.95); box-shadow: var(--shadow), inset 0 1px 0 #fff, inset 0 0 0 1px rgba(59,130,246,.12); }
[data-theme="dark"] .receive-box { background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(34,211,238,.08)); border-color: rgba(91,155,255,.25); box-shadow: var(--shadow); }
.receive-box.done { background: var(--green-weak); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.thread { display: flex; flex-direction: column; gap: 12px; padding: 16px 22px; max-height: 420px; overflow: auto; }
.msg { display: flex; gap: 10px; }
.msg .bubble { background: var(--surface-2); border: 1px solid var(--line-2); padding: 9px 14px; border-radius: 6px 18px 18px 18px; font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.msg.mine { flex-direction: row-reverse; }
.msg.mine .bubble { background: var(--grad); color: #fff; border-color: transparent; border-radius: 18px 6px 18px 18px; box-shadow: 0 8px 18px -10px rgba(37,99,235,.6); }
.msg.mine .bubble a { color: #fff; text-decoration: underline; }
.msg .who { font-size: 11.5px; color: var(--text-3); margin-bottom: 2px; }
.msg.mine .who { text-align: right; }
.timeline { padding: 12px 22px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.tl-ev { display: flex; gap: 10px; }
.tl-ev .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-2); margin-top: 7px; flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-2) 18%, transparent); }
.cr-view { display: flex; flex-direction: column; gap: 12px; }
.cr-row { display: grid; grid-template-columns: 170px 1fr; gap: 12px; font-size: 13.5px; padding: 9px 0; border-bottom: 1px dashed var(--line-2); }
.cr-row .k { color: var(--text-3); font-weight: 700; }
.cr-row ol { margin: 0; padding-left: 20px; }
.cr-row li { padding: 1px 0; }
.cr-row li .cnt { color: var(--text-3); font-size: 11px; margin-left: 6px; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.thumbs a { display: block; width: 96px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface-2); font-size: 10.5px; color: var(--text-3); text-align: center; }
.thumbs img { width: 100%; height: 74px; object-fit: contain; display: block; background: repeating-conic-gradient(#F1F3F7 0% 25%, #fff 0% 50%) 50% / 12px 12px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding: 0 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.tabs button { border: 0; background: transparent; padding: 13px 12px; font-weight: 700; color: var(--text-3); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; transition: color .15s; }
.tabs button:hover { color: var(--text-2); }
.tabs button.on { color: var(--text); border-color: var(--brand); }

/* empty / misc */
.empty { text-align: center; padding: 48px 20px; color: var(--text-3); }
.empty h4 { margin-top: 10px; color: var(--text-2); font-size: 15px; }
.empty p { margin: 6px 0 14px; font-size: 13px; }
.divider { height: 1px; background: var(--line-2); margin: 4px 0; }
.alert-box { display: flex; gap: 10px; padding: 13px 16px; border-radius: 14px; font-size: 13.5px; border: 1px solid transparent; }
.alert-box.info { background: var(--blue-weak); color: #1E40AF; border-color: color-mix(in srgb, var(--blue) 18%, transparent); }
.alert-box.warn { background: var(--amber-weak); color: #8A3C00; border-color: color-mix(in srgb, var(--amber) 22%, transparent); }
.alert-box.err { background: var(--red-weak); color: #991B1B; border-color: color-mix(in srgb, var(--red) 20%, transparent); }
.alert-box.ok { background: var(--green-weak); color: #166534; border-color: color-mix(in srgb, var(--green) 20%, transparent); }
[data-theme="dark"] .alert-box { color: var(--text); }

/* modal & toast */
.modal-wrap { position: fixed; inset: 0; z-index: 100; background: rgba(15,23,42,.24); -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); display: grid; place-items: center; padding: 20px; animation: fade .18s; }
[data-theme="dark"] .modal-wrap { background: rgba(0,0,0,.5); }
.modal-wrap.out { opacity: 0; transition: opacity .15s; }
.modal { width: min(540px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--glass-sheen), var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 30px; box-shadow: 0 0 0 .5px rgba(15,23,42,.1), 0 40px 90px -24px rgba(15,23,42,.5), var(--glass-hi); animation: pop .28s cubic-bezier(.2,.9,.3,1.15); overflow: hidden; }
.modal-wide { width: min(900px, 100%); }
.modal-head { display: flex; align-items: center; padding: 20px 24px 16px; border-bottom: 1px solid var(--line-2); }
.modal-head h3 { font-size: 18px; font-weight: 800; letter-spacing: -.015em; flex: 1; }
.modal-body { padding: 22px 24px; overflow: auto; overflow-wrap: break-word; word-break: break-word; }
.modal-body p { margin: 0 0 8px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line-2); }
@keyframes pop { from { transform: scale(.94) translateY(10px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
#toasts { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
#toasts .toast { pointer-events: auto; }
/* トースト: iPhone の Dynamic Island のような、黒いガラスのカプセル */
.toast { display: flex; align-items: center; gap: 10px; background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.12), transparent 50%), rgba(12,16,28,.84); color: #fff; padding: 12px 20px 12px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 44px -14px rgba(15,23,42,.55), inset 0 1px 0 rgba(255,255,255,.14); font-size: 13.5px; font-weight: 600; animation: pop .28s cubic-bezier(.2,.9,.3,1.15); max-width: 460px; overflow-wrap: break-word; word-break: break-word; }
.toast-ok .ic { color: #4ADE80; } .toast-error .ic { color: #F87171; }
.toast.out { opacity: 0; transform: translateY(-6px) scale(.98); transition: all .3s; }

/* login */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-art {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(900px 640px at 100% 0%, rgba(255,255,255,.22), transparent 60%), linear-gradient(150deg, #1B3A8F 0%, #2A57C6 40%, #3D74DE 70%, #6A9FEE 100%);
  color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; margin: 14px 0 14px 14px; border-radius: 32px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.3);
}
.login-art::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12,24,72,0), rgba(12,24,72,.28)); }
.login-art h2 { font-size: 36px; line-height: 1.28; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(15,23,42,.25); }
.login-art p { opacity: .92; max-width: 440px; }
.login-feats { display: grid; gap: 12px; max-width: 440px; }
.login-feats div { display: flex; gap: 12px; align-items: center; background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.22), transparent 55%), rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); padding: 13px 16px; border-radius: 20px; -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); font-size: 13.5px; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 24px -14px rgba(15,23,42,.5); }
.login-form { display: grid; place-items: center; padding: 32px; background: transparent; }
.login-box { width: min(420px, 100%); display: flex; flex-direction: column; gap: 16px; padding: 34px; border-radius: 32px; background: var(--glass-sheen), var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), var(--glass-hi); }
.login-box h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.demo-users { display: grid; gap: 8px; }
.demo-users button { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line); background: var(--surface); padding: 11px 13px; border-radius: 16px; cursor: pointer; transition: all .15s; }
.demo-users button:hover { border-color: var(--brand-2); background: var(--brand-weak); }

/* 読み込み中のくるくる */
.spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--brand) 18%, transparent); border-top-color: var(--brand); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* json editor */
.code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; min-height: 420px; white-space: pre; tab-size: 2; }

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 1200px) {
  .wizard, .detail, .cr { grid-template-columns: minmax(0,1fr); }
  .summary, .cr-side { position: static; max-height: none; }
  .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px) {
  body { font-size: 15px; }
  .shell { grid-template-columns: minmax(0,1fr); }
  .sidebar { display: none; }
  .topbar { padding: 14px 64px 12px 16px; }  /* 右上のお知らせボタンと重ならないように右を空ける */
  .topbar h1 { font-size: 22px; }
  .content { padding: 4px 14px calc(var(--tabbar-h) + 44px + env(safe-area-inset-bottom)); }
  .demo-banner { padding-right: 64px; }
  /* スマホ下のタブ: 浮かぶガラスのカプセル。選択中は青いカプセル、中央の「＋」は光る丸ボタン */
  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40;
    height: var(--tabbar-h); align-items: center; padding: 0 6px;
    background: var(--glass-sheen), rgba(255,255,255,.95); border: 1px solid var(--glass-border); border-radius: 999px; box-shadow: var(--glass-shadow), var(--glass-hi);
    -webkit-backdrop-filter: blur(32px) saturate(190%); backdrop-filter: blur(32px) saturate(190%);
  }
  [data-theme="dark"] .tabbar { background: var(--glass-sheen), rgba(14,20,36,.9); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 54px; font-size: 10.5px; font-weight: 700; color: var(--text-3); position: relative; border-radius: 999px; margin: 0 2px; transition: background .2s, color .2s, box-shadow .2s; }
  .tabbar a.active, [data-theme="dark"] .tabbar a.active { color: #fff; background: var(--grad); box-shadow: var(--glow), inset 0 1px 0 rgba(255,255,255,.3); }
  .tabbar a.fab, .tabbar a.fab.active, [data-theme="dark"] .tabbar a.fab.active { color: var(--text-2); background: transparent; box-shadow: none; }
  .tabbar a.fab .ic { background: var(--grad); color: #fff; border-radius: 50%; width: 40px; height: 40px; padding: 9px; margin-top: -4px; box-shadow: 0 8px 18px -6px rgba(37,99,235,.7), inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 3px rgba(255,255,255,.75); }
  [data-theme="dark"] .tabbar a.fab .ic { box-shadow: 0 8px 18px -6px rgba(37,99,235,.7), inset 0 1px 0 rgba(255,255,255,.3); }
  .tabbar a.fab.active { color: var(--brand); }
  .tabbar a .count { position: absolute; top: 2px; right: calc(50% - 22px); background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800; border-radius: 99px; padding: 0 6px; line-height: 17px; box-shadow: 0 0 0 2px var(--surface); }
  .g2, .g3, .g4 { grid-template-columns: minmax(0,1fr); }
  .g4.kpis { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .kpi { padding: 16px; }
  .kpi-ic { width: 32px; height: 32px; right: 12px; top: 12px; border-radius: 10px; }
  .kpi-label { font-size: 12.5px; padding-right: 34px; }
  .kpi-value { font-size: 26px; }
  .kpi-sub { font-size: 12px; }
  .card-pad { padding: 18px; }
  .card-head { padding: 14px 18px; }
  .li { padding: 13px 16px; }
  .steps { overflow-x: auto; border-radius: 18px; }
  .step small { display: none; }
  .step { flex: none; padding: 8px 10px; }
  .step:not(.on) .lbl { display: none; }
  .pl-body { grid-template-columns: minmax(0,1fr); padding: 14px; }
  .pl-body > * { grid-column: span 1 !important; }
  .input, .select { height: 46px; font-size: 16px; }
  .textarea { font-size: 16px; }
  .chip { height: 40px; padding: 0 14px; }
  .btn { height: 44px; }
  .btn-sm { height: 36px; }
  .icon-btn { width: 40px; height: 40px; }
  .media-tiles { grid-template-columns: 1fr 1fr; }
  .mtile { padding: 12px; }
  .mtile .mdot { width: 30px; height: 30px; }
  .wizard-foot { bottom: calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom)); padding: 8px; border-radius: 28px; }
  .wizard-foot .btn { flex: 1; }
  .wizard-foot .autosave { display: none; }
  .search .input { width: 100%; }
  .search { flex: 1 1 100%; }
  .toolbar .fsel { flex: 1 1 45%; }
  .login { grid-template-columns: 1fr; }
  .login-art { display: none; }
  .login-form { padding: 20px 14px; }
  .login-box { padding: 26px 22px; }
  .dl { grid-template-columns: 1fr; gap: 2px 0; }
  .dl dt { margin-top: 8px; }
  .cr-row { grid-template-columns: 1fr; gap: 4px; }
  .bar-row { grid-template-columns: 100px 1fr 84px; }
  .rcards { grid-template-columns: minmax(0,1fr); }
  .bulkbar { bottom: calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom)); left: 12px; right: 12px; transform: none; flex-wrap: wrap; }
  #toasts { left: 12px; right: 12px; top: 12px; }
  .toast { max-width: none; }
  .toolbar .filters { display: none; width: 100%; flex-wrap: wrap; gap: 8px; }
  .toolbar.open .filters { display: flex; }
  .toolbar .filters .fsel { flex: 1 1 100%; height: 44px; max-width: none; }
  .filter-toggle { display: inline-flex !important; }
  .hide-sm { display: none !important; }
  .imgs { grid-template-columns: repeat(2, 1fr); }
  .modal-wrap { padding: 12px; }
  .modal { border-radius: 26px; max-height: calc(100vh - 24px); }
}
@media (min-width: 861px) { .show-sm { display: none !important; } .toolbar .filters { display: contents; } .filter-toggle { display: none !important; } }
@media print {
  .sidebar, .topbar, .tabbar, .wizard-foot, .notif-fab, .user-fab, #user-fab, .modal-wrap, .notif-panel-wrap, .demo-banner, .skip-link, #toasts, .bulkbar, #btn-export-csv, #btn-print, #cat-tabs, .seg, .select, .copy-inline-btn, button, .filter-toggle { display: none !important; }
  .shell { display: block !important; }
  .main { padding: 0 !important; margin: 0 !important; }
  .content { max-width: 100% !important; padding: 0 !important; }
  body { background: #FFFFFF !important; color: #111827 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body::before, body::after { display: none !important; }
  .card { box-shadow: none !important; border: 1px solid #D1D5DB !important; background: #FFFFFF !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; break-inside: avoid; page-break-inside: avoid; margin-bottom: 16px !important; }
  .table-wrap { overflow: visible !important; border: 0 !important; max-height: none !important; }
  .table-wrap table { border-collapse: collapse !important; width: 100% !important; }
  .t th, .t td { border-bottom: 1px solid #E5E7EB !important; color: #111827 !important; }
}

/* ---------- アプリ内お知らせ ---------- */
.notif-btn{position:relative}
.notif-dot{position:absolute;top:-2px;right:-4px;min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:#EF4444;color:#fff;font-size:10.5px;font-weight:800;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--surface)}
.notif-dot.hide{display:none}
.notif-fab{display:none}
.notif-panel-wrap{position:fixed;inset:0;z-index:200;background:rgba(15,23,42,.28);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade .15s}
.notif-panel{position:absolute;color:var(--text);left:calc(var(--sidebar) + 24px);bottom:16px;width:380px;max-height:70vh;display:flex;flex-direction:column;background:var(--glass-sheen),var(--glass-strong);border:1px solid var(--glass-border);border-radius:26px;box-shadow:0 0 0 .5px rgba(15,23,42,.1),0 34px 80px -22px rgba(15,23,42,.5),var(--glass-hi);overflow:hidden;animation:pop .2s cubic-bezier(.2,.9,.3,1.15)}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line-2);font-size:15px}
.notif-list{overflow:auto}
.notif-item{display:block;padding:13px 18px;border-bottom:1px solid var(--line-2);color:inherit;text-decoration:none;transition:background .1s}
.notif-item:last-child{border-bottom:0}
.notif-item:hover{background:var(--hover)}
.notif-item.unread{background:color-mix(in srgb,var(--brand) 9%,transparent);box-shadow:inset 3px 0 0 var(--brand)}
.notif-title{font-weight:800;font-size:14px}
.notif-body{font-size:13px;color:var(--text-2);margin-top:2px;word-break:break-all}
.notif-time{font-size:11.5px;color:var(--text-3);margin-top:4px}
.notif-empty{padding:36px;text-align:center;color:var(--text-3);font-size:14px}
@media (max-width:860px){
  .notif-fab{display:flex;align-items:center;justify-content:center;position:fixed;top:10px;right:12px;z-index:90;width:44px;height:44px;border-radius:50%;border:1px solid var(--glass-border);background:var(--glass-sheen),var(--glass-strong);box-shadow:var(--glass-shadow),var(--glass-hi);color:var(--text)}
  .notif-fab .notif-dot{top:-3px;right:-3px}
  .notif-panel{left:8px;right:8px;top:62px;bottom:auto;width:auto}
  .user-fab{display:flex;align-items:center;justify-content:center;position:fixed;top:12px;right:64px;z-index:90;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.8);color:#fff;font-weight:800;font-size:15px;box-shadow:0 2px 8px rgba(15,23,42,.15);cursor:pointer}
}

/* ================================================================
   透明効果が使えない環境・「透明度を下げる」設定の人には、不透明で表示する（読みやすさ優先）
   ================================================================ */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root { --glass: rgba(255,255,255,.97); --glass-strong: #FFFFFF; --card: rgba(255,255,255,.97); }
  [data-theme="dark"] { --glass: #181D27; --glass-strong: #1C2230; --card: #171C25; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: #FFFFFF; --glass-strong: #FFFFFF; --card: #FFFFFF; }
  [data-theme="dark"] { --glass: #181D27; --glass-strong: #1C2230; --card: #171C25; }
  .glass, .sidebar, .tabbar, .modal, .notif-panel, .notif-fab, .steps, .wizard-foot, .bulkbar, .toast, .login-box, .topbar, .scrolled .topbar, .card, .kcol { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .scrolled .topbar { background: var(--bg); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 必須項目・エラー項目ジャンプ時のハイライト演出 ---------- */
@keyframes highlightFlash {
  0% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.55); outline: 2px solid var(--brand); }
  50% { box-shadow: 0 0 0 8px rgba(217, 119, 6, 0.5); outline: 2px solid var(--amber); }
  100% { box-shadow: none; outline: none; }
}
.highlight-flash {
  animation: highlightFlash 1.6s ease-out;
}

@media (max-width: 1200px) {
  #dgrid { grid-template-columns: 1fr !important; }
}