/* =========================================================
   Progreel — Design System
   ========================================================= */

:root {
  --bg: #0a0a0f;
  --bg-elev: #0f0f16;
  --surface: #15151e;
  --surface-2: #1b1b26;
  --surface-3: #242432;
  --surface-glass: rgba(21, 21, 30, .72);
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .13);
  --text: #f3f2f8;
  --text-2: #a6a4b9;
  --text-3: #6d6b82;
  --accent: #8b7bff;
  --accent-strong: #7461ff;
  --accent-2: #ff5e8a;
  --accent-soft: rgba(139, 123, 255, .14);
  --accent-ring: rgba(139, 123, 255, .45);
  --grad: linear-gradient(135deg, #7c6cff 0%, #b45cff 48%, #ff5e8a 100%);
  --grad-soft: linear-gradient(135deg, rgba(124,108,255,.22), rgba(255,94,138,.14));
  --ok: #2fd6a0;
  --ok-soft: rgba(47, 214, 160, .14);
  --warn: #ffb547;
  --warn-soft: rgba(255, 181, 71, .14);
  --danger: #ff5468;
  --danger-soft: rgba(255, 84, 104, .14);
  --info: #4cb2ff;
  --info-soft: rgba(76, 178, 255, .14);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 12px 32px -12px rgba(0,0,0,.7), 0 0 0 1px var(--line);
  --shadow-lg: 0 30px 80px -20px rgba(0,0,0,.8), 0 0 0 1px var(--line-2);
  --r-xs: 8px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --sidebar-w: 248px;
  --topbar-h: 64px;
  --tabbar-h: 68px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font: "Inter", "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f5f4fa; --bg-elev: #fbfbfe; --surface: #ffffff; --surface-2: #f4f3f9; --surface-3: #eae8f3;
    --surface-glass: rgba(255,255,255,.78);
    --line: rgba(28, 24, 60, .08); --line-2: rgba(28, 24, 60, .15);
    --text: #17152a; --text-2: #5d5a74; --text-3: #918ea8;
    --accent: #6b57ff; --accent-strong: #5a45f5; --accent-soft: rgba(107,87,255,.1); --accent-ring: rgba(107,87,255,.35);
    --ok: #0fa877; --ok-soft: rgba(15,168,119,.1); --warn: #d98300; --warn-soft: rgba(217,131,0,.1);
    --danger: #e3344b; --danger-soft: rgba(227,52,75,.09); --info: #1f8fe0; --info-soft: rgba(31,143,224,.1);
    --shadow-sm: 0 1px 2px rgba(28,24,60,.06);
    --shadow: 0 10px 30px -14px rgba(28,24,60,.22), 0 0 0 1px var(--line);
    --shadow-lg: 0 30px 70px -20px rgba(28,24,60,.35), 0 0 0 1px var(--line);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f5f4fa; --bg-elev: #fbfbfe; --surface: #ffffff; --surface-2: #f4f3f9; --surface-3: #eae8f3;
  --surface-glass: rgba(255,255,255,.78);
  --line: rgba(28, 24, 60, .08); --line-2: rgba(28, 24, 60, .15);
  --text: #17152a; --text-2: #5d5a74; --text-3: #918ea8;
  --accent: #6b57ff; --accent-strong: #5a45f5; --accent-soft: rgba(107,87,255,.1); --accent-ring: rgba(107,87,255,.35);
  --ok: #0fa877; --ok-soft: rgba(15,168,119,.1); --warn: #d98300; --warn-soft: rgba(217,131,0,.1);
  --danger: #e3344b; --danger-soft: rgba(227,52,75,.09); --info: #1f8fe0; --info-soft: rgba(31,143,224,.1);
  --shadow-sm: 0 1px 2px rgba(28,24,60,.06);
  --shadow: 0 10px 30px -14px rgba(28,24,60,.22), 0 0 0 1px var(--line);
  --shadow-lg: 0 30px 70px -20px rgba(28,24,60,.35), 0 0 0 1px var(--line);
  color-scheme: light;
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .18s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .32s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; letter-spacing: -.01em; font-weight: 700; }
p { margin: 0; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { width: 16px; height: 16px; }
.i-lg { width: 24px; height: 24px; }
.i-xl { width: 32px; height: 32px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.row { display: flex; align-items: center; gap: 12px; }
.row-sm { display: flex; align-items: center; gap: 8px; }
.spacer { flex: 1; }
.stack > * + * { margin-top: 16px; }

/* ---------- Shell ---------- */

.shell { display: flex; min-height: 100vh; min-height: 100dvh; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  width: var(--sidebar-w);
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 14px;
  background: var(--bg-elev);
  border-right: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: var(--grad); color: #fff; box-shadow: 0 6px 20px -6px rgba(180, 92, 255, .7);
  position: relative; overflow: hidden;
}
.brand-mark svg { width: 15px; height: 15px; margin-left: 2px; }
.brand-mark::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); animation: shine 6s var(--ease) infinite 2s; }
@keyframes shine { 0%, 80% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); padding: 18px 12px 6px; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-sm);
  color: var(--text-2); font-weight: 500;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item:active { transform: scale(.98); }
.nav-item.is-active { background: var(--accent-soft); color: var(--text); }
.nav-item.is-active::before { content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--grad); }
.nav-item.is-active .i { color: var(--accent); }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent-2); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }

.sidebar-projects { overflow-y: auto; flex: 1; margin: 0 -6px; padding: 0 6px; scrollbar-width: none; }
.sidebar-projects::-webkit-scrollbar { display: none; }
.side-project { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: var(--r-sm); color: var(--text-2); font-size: 14px; transition: background .2s, color .2s; }
.side-project:hover { background: var(--surface-2); color: var(--text); }
.side-project.is-active { color: var(--text); background: var(--surface-2); }
.side-project .cover { width: 22px; height: 22px; border-radius: 6px; font-size: 12px; }

.sidebar-foot { border-top: 1px solid var(--line); padding-top: 12px; display: flex; align-items: center; gap: 10px; }
.user-chip { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 6px 8px; border-radius: var(--r-sm); transition: background .2s; }
.user-chip:hover { background: var(--surface-2); }
.user-chip .name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.user-chip .role { font-size: 12px; color: var(--text-3); }

.main-wrap { flex: 1; min-width: 0; margin-left: var(--sidebar-w); display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 28px;
  background: var(--surface-glass);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.topbar.is-scrolled { border-bottom-color: var(--line); }
.topbar .brand { display: none; padding: 0; }
.crumbs { display: flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 14px; min-width: 0; }
.crumbs a:hover { color: var(--text); }
.crumbs .current { color: var(--text); font-weight: 600; }

.main { flex: 1; padding: 8px 28px 64px; }
.page { max-width: 1240px; margin: 0 auto; width: 100%; }
.page-narrow { max-width: 760px; }

.tabbar { display: none; }

@media (max-width: 960px) {
  .sidebar { display: none; }
  .main-wrap { margin-left: 0; }
  .topbar { padding: 0 16px; height: 58px; }
  .topbar .brand { display: flex; font-size: 18px; }
  .topbar .crumbs { display: none; }
  .main { padding: 4px 16px calc(var(--tabbar-h) + var(--safe-b) + 28px); }
  .tabbar {
    position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(10px + var(--safe-b));
    height: 62px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    background: var(--surface-glass);
    backdrop-filter: saturate(170%) blur(22px); -webkit-backdrop-filter: saturate(170%) blur(22px);
    border: 1px solid var(--line-2); border-radius: 22px; box-shadow: var(--shadow-lg);
  }
  .tab {
    display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 600;
    color: var(--text-3); padding: 6px 0; position: relative; transition: color .2s;
  }
  .tab .i { width: 22px; height: 22px; transition: transform .35s var(--spring); }
  .tab.is-active { color: var(--text); }
  .tab.is-active .i { color: var(--accent); transform: translateY(-1px) scale(1.08); }
  .tab:active .i { transform: scale(.88); }
  .tab .dot { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent-2); color: #fff; font-size: 10px; display: grid; place-items: center; border: 2px solid var(--surface); }
  .tab-fab { justify-self: center; width: 50px; height: 50px; border-radius: 17px; display: grid; place-items: center; background: var(--grad); color: #fff; box-shadow: 0 10px 24px -8px rgba(180, 92, 255, .8); transition: transform .3s var(--spring); }
  .tab-fab:active { transform: scale(.9) rotate(90deg); }
  .tab-fab .i { width: 24px; height: 24px; stroke-width: 2.2; }
}

/* ---------- Page header ---------- */

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 22px 0 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 28px; font-weight: 800; letter-spacing: -.025em; }
.page-head p { color: var(--text-2); margin-top: 4px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
@media (max-width: 640px) {
  .page-head { padding: 14px 0 18px; }
  .page-head h1 { font-size: 24px; }
}

.section { margin-top: 36px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-head h2 { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.section-head .count { font-size: 12px; font-weight: 700; color: var(--text-3); background: var(--surface-2); padding: 1px 8px; border-radius: 20px; }
.link-more { font-size: 13px; color: var(--text-2); display: inline-flex; align-items: center; gap: 2px; transition: color .2s, gap .2s; }
.link-more:hover { color: var(--accent); gap: 6px; }

/* ---------- Buttons ---------- */

.btn {
  --btn-bg: var(--surface-2); --btn-fg: var(--text); --btn-bd: var(--line-2);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: 12px;
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd);
  font-weight: 600; font-size: 14px; white-space: nowrap; user-select: none;
  transition: transform .2s var(--ease), background .2s, border-color .2s, box-shadow .25s, opacity .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--surface-3); }
.btn:active { transform: scale(.97); }
.btn:disabled, .btn.is-loading { opacity: .55; pointer-events: none; }
.btn .i { width: 18px; height: 18px; }
.btn-primary { --btn-fg: #fff; --btn-bd: transparent; background: var(--grad); box-shadow: 0 8px 22px -10px rgba(160, 92, 255, .9), inset 0 1px 0 rgba(255,255,255,.18); overflow: hidden; }
.btn-primary:hover { background: var(--grad); box-shadow: 0 12px 28px -10px rgba(160, 92, 255, 1), inset 0 1px 0 rgba(255,255,255,.25); transform: translateY(-1px); }
.btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-100%); transition: transform .7s var(--ease); }
.btn-primary:hover::after { transform: translateX(100%); }
.btn-soft { --btn-bg: var(--accent-soft); --btn-fg: var(--accent); --btn-bd: transparent; }
.btn-soft:hover { background: rgba(139,123,255,.24); }
.btn-ghost { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-danger { --btn-bg: var(--danger-soft); --btn-fg: var(--danger); --btn-bd: transparent; }
.btn-danger:hover { background: rgba(255,84,104,.22); }
.btn-ok { --btn-bg: var(--ok-soft); --btn-fg: var(--ok); --btn-bd: transparent; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn-lg { height: 50px; padding: 0 24px; font-size: 15px; border-radius: 14px; }
.btn-block { width: 100%; }
.btn-icon { width: 40px; padding: 0; }
.btn-icon.btn-sm { width: 34px; }
.btn.is-loading::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.icon-btn { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--text-2); position: relative; transition: background .2s, color .2s, transform .2s var(--ease); }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn:active { transform: scale(.92); }
.icon-btn .badge-dot { position: absolute; top: 7px; right: 7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent-2); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg); animation: pop .4s var(--spring); }
@keyframes pop { from { transform: scale(0); } }

/* ---------- Cards ---------- */

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.card-pad { padding: 20px; }
.card-hover { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.card-hover:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow); }

.grid { display: grid; gap: 16px; }
.grid-projects { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.grid-assets { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
@media (max-width: 640px) {
  .grid-projects { grid-template-columns: 1fr; gap: 12px; }
  .grid-assets { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* ---------- Covers (project icons) ---------- */

.cover { --c1: #7c6cff; --c2: #c15cff; position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: linear-gradient(135deg, var(--c1), var(--c2)); flex: none; }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover-icon { font-size: 1.5em; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.cover-violet { --c1: #7c6cff; --c2: #b45cff; }
.cover-pink { --c1: #ff5e8a; --c2: #ff8f6b; }
.cover-orange { --c1: #ff8a3d; --c2: #ffc24a; }
.cover-yellow { --c1: #f5c84a; --c2: #9be15d; }
.cover-green { --c1: #23c983; --c2: #2fd6c8; }
.cover-teal { --c1: #1fb6c9; --c2: #4c8dff; }
.cover-blue { --c1: #4c6fff; --c2: #6cc2ff; }
.cover-slate { --c1: #4a4a63; --c2: #7c7a96; }

/* ---------- Project card ---------- */

.project-card { display: flex; flex-direction: column; overflow: hidden; position: relative; }
.project-card .pc-banner { height: 112px; position: relative; border-radius: 0; font-size: 34px; }
.project-card .pc-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.35), transparent 60%); }
.project-card .pc-banner .cover-icon { transition: transform .5s var(--spring); }
.project-card:hover .pc-banner .cover-icon { transform: scale(1.15) rotate(-6deg); }
.project-card .pc-banner img { transition: transform .8s var(--ease); }
.project-card:hover .pc-banner img { transform: scale(1.06); }
.pc-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pc-title { font-size: 16px; font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-meta { display: flex; align-items: center; gap: 14px; color: var(--text-3); font-size: 12.5px; }
.pc-meta span { display: inline-flex; align-items: center; gap: 5px; }
.pc-meta .i { width: 15px; height: 15px; }
.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.pc-flag { position: absolute; top: 10px; right: 10px; z-index: 1; }

/* ---------- Progress ---------- */

.bar { height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; position: relative; }
.bar > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad); transition: width 1.1s var(--ease); }
.bar.is-done > span { background: var(--ok); }
.bar-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-2); }
.bar-row .bar { flex: 1; }

.ring { --size: 44px; width: var(--size); height: var(--size); position: relative; display: inline-grid; place-items: center; flex: none; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; }
.ring-track { stroke: var(--surface-3); }
.ring-bar { stroke: url(#ring-grad); stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease); }
.ring-label { position: relative; font-weight: 800; font-size: calc(var(--size) * .26); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ring-label small { font-size: .6em; font-weight: 700; color: var(--text-3); margin-left: 1px; }

/* ---------- Avatars ---------- */

.avatar {
  --hue: 260; --s: 34px;
  width: var(--s); height: var(--s); border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  font-weight: 700; font-size: calc(var(--s) * .42); color: #fff; line-height: 1;
  background: linear-gradient(135deg, hsl(var(--hue) 80% 62%), hsl(calc(var(--hue) + 40) 85% 55%));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
  user-select: none;
}
.avatar-xs { --s: 22px; }
.avatar-sm { --s: 28px; }
.avatar-md { --s: 36px; }
.avatar-lg { --s: 48px; }
.avatar-xl { --s: 72px; }
.avatar-empty { background: var(--surface-3); color: var(--text-3); }
.avatar-empty .i { width: 55%; height: 55%; }
.avatar-more { background: var(--surface-3); color: var(--text-2); font-size: 11px; }
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack .avatar { box-shadow: 0 0 0 2px var(--surface); }
.avatar-stack .avatar + .avatar { margin-left: -8px; }

/* ---------- Chips & badges ---------- */

.chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 8px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.chip .i { width: 13px; height: 13px; }
.chip-accent { background: var(--accent-soft); color: var(--accent); }
.chip-ok { background: var(--ok-soft); color: var(--ok); }
.chip-warn { background: var(--warn-soft); color: var(--warn); }
.chip-danger { background: var(--danger-soft); color: var(--danger); }
.chip-info { background: var(--info-soft); color: var(--info); }
.chip-glass { background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.due-overdue { background: var(--danger-soft); color: var(--danger); }
.due-today { background: var(--warn-soft); color: var(--warn); animation: pulse-warn 2.4s ease-in-out infinite; }
.due-soon { background: var(--warn-soft); color: var(--warn); }
.due-later { background: var(--surface-2); color: var(--text-2); }
.due-done { background: var(--ok-soft); color: var(--ok); }
@keyframes pulse-warn { 50% { box-shadow: 0 0 0 4px rgba(255,181,71,.12); } }

.role-badge { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 6px; letter-spacing: .02em; }
.role-teacher { background: rgba(255, 94, 138, .15); color: #ff6d95; }
.role-tutor { background: var(--info-soft); color: var(--info); }
.role-student { background: var(--surface-2); color: var(--text-2); }

.status-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.s-todo { background: var(--text-3); }
.s-doing { background: var(--info); box-shadow: 0 0 0 3px var(--info-soft); }
.s-pending { background: var(--text-3); box-shadow: 0 0 0 3px var(--surface-3); }
.s-done { background: var(--ok); }

/* ---------- Forms ---------- */

.field { display: flex; flex-direction: column; gap: 7px; }
.field + .field { margin-top: 18px; }
.label { font-size: 13px; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.req { color: var(--accent-2); font-size: 11px; font-weight: 700; }
.opt { color: var(--text-3); font-size: 11px; font-weight: 600; }
.name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.name-grid + .hint { margin-top: 6px; }
.m-real { font-weight: 500; font-size: 13px; color: var(--text-2); }
.input, .select, .textarea {
  width: 100%; min-height: 46px; padding: 11px 14px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
  outline: none; font-size: 16px; line-height: 1.5;
  transition: border-color .2s, box-shadow .2s, background .2s;
  -webkit-appearance: none; appearance: none;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-2); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); background: var(--surface); }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.textarea { resize: vertical; min-height: 96px; }
.select { padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.input[type="date"] { min-height: 46px; }
.hint { font-size: 12.5px; color: var(--text-3); }
.error { font-size: 12.5px; color: var(--danger); display: flex; align-items: center; gap: 5px; animation: shake .4s; }
.has-error .input, .has-error .textarea { border-color: var(--danger); }
@keyframes shake { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }
.input-group { position: relative; }
.input-group .input { padding-left: 42px; }
.input-group > .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; transition: color .2s; }
.input-group:focus-within > .i { color: var(--accent); }
.input-group .toggle-pass { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .field + .field { margin-top: 0; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.switch { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; }
.switch-track { width: 44px; height: 26px; border-radius: 13px; background: var(--surface-3); position: relative; transition: background .25s; flex: none; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform .35s var(--spring); }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 4px var(--accent-soft); }

.segmented { display: inline-flex; padding: 4px; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 13px; position: relative; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmented::-webkit-scrollbar { display: none; }
.segmented a, .segmented button, .segmented label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; transition: color .25s; cursor: pointer; }
.segmented a:hover, .segmented button:hover, .segmented label:hover { color: var(--text); }
.segmented .is-active, .segmented input:checked + span { color: var(--text); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.seg-indicator { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 9px; background: var(--surface); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); transition: transform .45s var(--spring), width .45s var(--spring); }
.segmented .count { font-size: 11px; background: var(--surface-3); color: var(--text-2); padding: 0 6px; border-radius: 8px; min-width: 18px; text-align: center; }

.role-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.role-option { position: relative; cursor: pointer; }
.role-option input { position: absolute; opacity: 0; }
.role-option span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--text-2); transition: all .25s var(--ease); }
.role-option span b { font-size: 22px; transition: transform .35s var(--spring); }
.role-option input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--text); box-shadow: 0 0 0 3px var(--accent-soft); }
.role-option input:checked + span b { transform: scale(1.18); }

.icon-picker { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.icon-picker label { position: relative; cursor: pointer; }
.icon-picker input { position: absolute; opacity: 0; }
.icon-picker span { aspect-ratio: 1; display: grid; place-items: center; font-size: 22px; border-radius: 12px; background: var(--surface-2); border: 1px solid transparent; transition: transform .3s var(--spring), border-color .2s, background .2s; }
.icon-picker label:hover span { transform: scale(1.08); }
.icon-picker input:checked + span { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.06); }
.color-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.color-picker label { cursor: pointer; position: relative; }
.color-picker input { position: absolute; opacity: 0; }
.color-picker .cover { width: 34px; height: 34px; border-radius: 50%; transition: transform .3s var(--spring), box-shadow .2s; }
.color-picker input:checked + .cover { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); transform: scale(1.08); }
@media (max-width: 480px) { .icon-picker { grid-template-columns: repeat(6, 1fr); } }

.cover-preview { display: flex; gap: 18px; align-items: center; }
.cover-preview .cover { width: 96px; height: 96px; border-radius: 24px; font-size: 40px; transition: background .4s; }
.thumb-upload { display: inline-flex; flex-direction: column; gap: 8px; }

/* ---------- Member picker ---------- */

.picker { position: relative; }
.picker-results { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; max-height: 300px; overflow-y: auto; animation: drop-in .25s var(--ease); }
.picker-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; width: 100%; text-align: left; }
.picker-item:hover, .picker-item.is-focus { background: var(--surface-2); }
.picker-item[disabled] { opacity: .45; cursor: default; }
.picker-item .uname { font-size: 12px; color: var(--text-3); }
.picker-empty { padding: 14px; text-align: center; color: var(--text-3); font-size: 13px; }
.picker-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.picker-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px 4px 4px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; font-weight: 600; animation: pop .35s var(--spring); }
.picker-chip button { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--text-3); }
.picker-chip button:hover { background: var(--surface-3); color: var(--text); }
.picker-chip .i { width: 13px; height: 13px; }
.picker-chip .note { font-size: 11px; color: var(--text-3); font-weight: 500; }
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }

/* ---------- Empty state ---------- */

.empty { text-align: center; padding: 56px 20px; border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); color: var(--text-2); }
.empty-art { width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 26px; display: grid; place-items: center; background: var(--grad-soft); color: var(--accent); position: relative; animation: float 5s ease-in-out infinite; }
.empty-art .i { width: 38px; height: 38px; stroke-width: 1.5; }
.empty h3 { color: var(--text); font-size: 17px; margin-bottom: 6px; }
.empty p { font-size: 14px; max-width: 380px; margin: 0 auto; }
.empty .btn { margin-top: 20px; }
@keyframes float { 50% { transform: translateY(-6px) rotate(-3deg); } }

/* ---------- Alerts / banners ---------- */

.banner { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--r); background: var(--grad-soft); border: 1px solid rgba(139,123,255,.25); }
.banner .i { color: var(--accent); }
.banner-warn { background: var(--warn-soft); border-color: rgba(255,181,71,.25); }
.banner-warn .i { color: var(--warn); }
.banner p { flex: 1; font-size: 14px; }
@media (max-width: 640px) { .banner { flex-wrap: wrap; } .banner .btn { width: 100%; } }

/* ---------- Toasts ---------- */

.toasts { position: fixed; z-index: 200; top: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: min(92vw, 420px); }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 500; animation: toast-in .5s var(--spring) both; max-width: 100%; }
.toast.is-leaving { animation: toast-out .3s var(--ease) both; }
.toast .t-icon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.toast-success .t-icon { background: var(--ok-soft); color: var(--ok); }
.toast-error .t-icon { background: var(--danger-soft); color: var(--danger); }
.toast-info .t-icon { background: var(--accent-soft); color: var(--accent); }
.toast .i { width: 16px; height: 16px; stroke-width: 2.4; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-16px) scale(.92); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-10px) scale(.95); } }

/* ---------- Modal / Sheet ---------- */

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(5, 5, 10, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade-in .3s var(--ease) both; }
.modal-panel { position: relative; width: min(100%, 540px); max-height: calc(100dvh - 40px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); animation: modal-in .45s var(--spring) both; overscroll-behavior: contain; }
.modal-panel.wide { width: min(100%, 720px); }
.modal-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; background: var(--surface); }
.modal-head h3 { font-size: 18px; flex: 1; }
.modal-body { padding: 4px 20px 20px; }
.modal-foot { position: sticky; bottom: 0; display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px 18px; background: var(--surface); border-top: 1px solid var(--line); }
.modal.is-closing .modal-backdrop { animation: fade-out .25s var(--ease) both; }
.modal.is-closing .modal-panel { animation: modal-out .25s var(--ease) both; }
.sheet-grip { display: none; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(20px) scale(.96); } }
@keyframes modal-out { to { opacity: 0; transform: translateY(10px) scale(.97); } }
@media (max-width: 640px) {
  .modal { place-items: end stretch; padding: 0; }
  .modal-panel, .modal-panel.wide { width: 100%; max-height: 92dvh; border-radius: 26px 26px 0 0; border-bottom: 0; animation: sheet-in .5s var(--spring) both; padding-bottom: var(--safe-b); }
  .modal.is-closing .modal-panel { animation: sheet-out .3s var(--ease) both; }
  .sheet-grip { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 10px auto 0; }
  .modal-head { padding-top: 10px; }
  .modal-foot .btn { flex: 1; }
  @keyframes sheet-in { from { transform: translateY(100%); } }
  @keyframes sheet-out { to { transform: translateY(100%); } }
}

/* ---------- Dropdown menu ---------- */

.menu-wrap { position: relative; }
.menu { position: absolute; z-index: 60; right: 0; top: calc(100% + 6px); min-width: 200px; padding: 6px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow-lg); transform-origin: top right; animation: menu-in .3s var(--spring) both; }
.menu.menu-up { top: auto; bottom: calc(100% + 6px); transform-origin: bottom right; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--text); text-align: left; transition: background .15s; }
.menu-item:hover { background: var(--surface-2); }
.menu-item .i { width: 17px; height: 17px; color: var(--text-2); }
.menu-item.danger, .menu-item.danger .i { color: var(--danger); }
.menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }
@keyframes menu-in { from { opacity: 0; transform: scale(.92) translateY(-4px); } }

/* ---------- Reveal animations ---------- */

.reveal > * { animation: rise .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms + 40ms); }
.rise { animation: rise .6s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* =========================================================
   Guest (auth)
   ========================================================= */

.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.auth-art { position: relative; overflow: hidden; background: #08070d; display: flex; flex-direction: column; justify-content: space-between; padding: 44px; color: #fff; isolation: isolate; }
.auth-art .blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .75; z-index: -1; animation: blob 18s ease-in-out infinite; }
.auth-art .b1 { width: 460px; height: 460px; background: #7c6cff; top: -120px; left: -80px; }
.auth-art .b2 { width: 380px; height: 380px; background: #ff5e8a; bottom: -100px; right: -60px; animation-delay: -6s; }
.auth-art .b3 { width: 300px; height: 300px; background: #2fd6c8; top: 40%; left: 40%; opacity: .35; animation-delay: -12s; }
@keyframes blob { 33% { transform: translate(60px, 40px) scale(1.1); } 66% { transform: translate(-40px, 60px) scale(.92); } }
.auth-art .grain { position: absolute; inset: 0; z-index: -1; opacity: .18; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); mix-blend-mode: overlay; }
.auth-art .brand { color: #fff; padding: 0; }
.auth-copy h2 { font-size: clamp(34px, 4vw, 54px); font-weight: 800; letter-spacing: -.035em; line-height: 1.12; }
.auth-copy p { margin-top: 16px; font-size: 16px; opacity: .78; max-width: 420px; line-height: 1.8; }
.reel { display: flex; gap: 12px; margin: 40px -60px 0 0; transform: rotate(-6deg); }
.reel-strip { display: flex; gap: 12px; animation: reel 28s linear infinite; }
.reel-frame { width: 150px; height: 96px; border-radius: 14px; flex: none; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); display: grid; place-items: center; font-size: 30px; position: relative; overflow: hidden; }
.reel-frame::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.15), transparent 60%); }
.reel-frame .pin { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #ff5e8a; border: 2px solid #fff; top: 22%; left: 64%; box-shadow: 0 0 0 6px rgba(255,94,138,.25); animation: ping 2s ease-out infinite; }
@keyframes reel { to { transform: translateX(calc(-50% - 6px)); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255,94,138,.6); } 100% { box-shadow: 0 0 0 14px rgba(255,94,138,0); } }
.auth-foot { font-size: 13px; opacity: .55; }

.auth-panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--bg); }
.auth-card { width: 100%; max-width: 410px; animation: rise .7s var(--ease) both; }
.auth-card h1 { font-size: 28px; font-weight: 800; letter-spacing: -.025em; }
.auth-card .lead { color: var(--text-2); margin: 8px 0 28px; }
.auth-switch { margin-top: 24px; text-align: center; font-size: 14px; color: var(--text-2); }
.auth-switch a { color: var(--accent); font-weight: 600; }
.auth-mobile-brand { display: none; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 12px; margin: 20px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .auth-panel { align-items: flex-start; padding: 28px 20px 40px; position: relative; overflow: hidden; }
  .auth-panel::before { content: ""; position: absolute; width: 420px; height: 420px; top: -260px; right: -160px; border-radius: 50%; background: var(--grad); filter: blur(80px); opacity: .35; pointer-events: none; }
  .auth-mobile-brand { display: flex; margin-bottom: 36px; }
  .auth-mobile-brand .brand { padding: 0; }
}

/* =========================================================
   Dashboard
   ========================================================= */

.hero { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 30px 32px; background: var(--surface); border: 1px solid var(--line); isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; right: -140px; top: -280px; border-radius: 50%; background: var(--grad); filter: blur(90px); opacity: .32; animation: blob 20s ease-in-out infinite; }
.hero::after { content: ""; position: absolute; z-index: -1; width: 300px; height: 300px; left: 30%; bottom: -220px; border-radius: 50%; background: #2fd6c8; filter: blur(90px); opacity: .14; }
.hero-date { color: var(--text-2); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.hero h1 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin-top: 6px; }
.hero-stats { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.stat { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px; background: var(--surface-glass); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); min-width: 150px; transition: transform .3s var(--ease), border-color .3s; }
.stat:hover { transform: translateY(-2px); border-color: var(--line-2); }
.stat-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.stat-num { font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 12px; color: var(--text-2); margin-top: 3px; }
@media (max-width: 640px) {
  .hero { padding: 22px 20px; border-radius: 22px; }
  .hero h1 { font-size: 23px; }
  .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
  .stat { flex-direction: column; align-items: flex-start; min-width: 0; padding: 12px; gap: 10px; }
  .stat-icon { width: 32px; height: 32px; border-radius: 10px; }
  .stat-icon .i { width: 17px; height: 17px; }
  .stat-num { font-size: 21px; }
  .stat-label { font-size: 11px; }
}

.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
@media (max-width: 1100px) { .dash-grid, .dash-grid[style] { grid-template-columns: minmax(0, 1fr) !important; } }
@media (min-width: 961px) {
  .dash-grid .hscroll { margin: 0 -4px; padding: 4px 4px 12px; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
}

.hscroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -28px; padding: 4px 28px 12px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; flex: none; }
@media (max-width: 960px) { .hscroll { margin: 0 -16px; padding: 4px 16px 12px; scroll-padding: 16px; } }

.task-tile { width: 250px; padding: 16px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; }
.task-tile .tt-project { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); }
.task-tile .tt-project .cover { width: 20px; height: 20px; border-radius: 6px; font-size: 11px; }
.task-tile h4 { font-size: 15px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }

.list { display: flex; flex-direction: column; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; transition: background .2s; }
.list-item:hover { background: var(--surface-2); }
.list-item .li-body { flex: 1; min-width: 0; }
.list-item .li-title { font-weight: 600; font-size: 14px; }
.list-item .li-sub { font-size: 12.5px; color: var(--text-3); }
.thumb-sm { width: 56px; height: 40px; border-radius: 9px; overflow: hidden; flex: none; background: var(--surface-3); display: grid; place-items: center; color: var(--text-3); }
.thumb-sm img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   Project detail
   ========================================================= */

.project-hero { position: relative; border-radius: var(--r-xl); overflow: hidden; margin-top: 12px; isolation: isolate; border: 1px solid var(--line); }
.project-hero .ph-bg { position: absolute; inset: 0; z-index: -2; border-radius: 0; }
.project-hero .ph-bg .cover-icon { display: none; }
.project-hero .ph-bg img { filter: blur(40px) saturate(1.4); transform: scale(1.3); opacity: .8; }
.project-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,10,15,.15), rgba(10,10,15,.75)); }
.ph-inner { display: flex; align-items: flex-end; gap: 22px; padding: 34px 30px 26px; color: #fff; }
.ph-inner .cover { width: 92px; height: 92px; border-radius: 24px; font-size: 42px; box-shadow: 0 16px 40px -10px rgba(0,0,0,.6), 0 0 0 3px rgba(255,255,255,.18); }
.ph-text { flex: 1; min-width: 0; }
.ph-text h1 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; text-shadow: 0 2px 20px rgba(0,0,0,.3); }
.ph-text p { opacity: .82; margin-top: 6px; font-size: 14px; max-width: 640px; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ph-meta { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; font-size: 13px; }
.ph-meta .chip { background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(8px); }
.ph-meta .avatar-stack .avatar { box-shadow: 0 0 0 2px rgba(20,20,30,.6); }
.ph-side { display: flex; align-items: center; gap: 14px; }
.ph-side .ring-track { stroke: rgba(255,255,255,.18); }
.ph-side .ring-label small { color: rgba(255,255,255,.6); }
.ph-actions { display: flex; gap: 8px; }
.ph-actions .btn:not(.btn-primary) { --btn-bg: rgba(255,255,255,.12); --btn-fg: #fff; --btn-bd: rgba(255,255,255,.16); backdrop-filter: blur(10px); }
@media (max-width: 760px) {
  .project-hero { margin: 4px -16px 0; border-radius: 0 0 26px 26px; border: 0; }
  .ph-inner { position: relative; flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 20px 20px; }
  .ph-inner .cover { width: 60px; height: 60px; border-radius: 17px; font-size: 28px; }
  .ph-text h1 { font-size: 22px; }
  .ph-side { position: absolute; top: 22px; right: 20px; flex-direction: row-reverse; gap: 10px; }
  .ph-side .ring { --size: 54px !important; }
  /* ボタンが3つ以上あるときは、進捗リングだけ右上に残してボタンは下に並べる */
  .ph-side:has(.ph-actions > :nth-child(3)) { display: contents; }
  .ph-side:has(.ph-actions > :nth-child(3)) .ring { position: absolute; top: 22px; right: 20px; }
  .ph-side:has(.ph-actions > :nth-child(3)) .ph-actions { flex-wrap: wrap; }
}

.tabs-bar { position: sticky; top: var(--topbar-h); z-index: 20; display: flex; align-items: center; gap: 12px; padding: 14px 0; margin-top: 8px; background: linear-gradient(var(--bg) 70%, transparent); }
@media (max-width: 960px) { .tabs-bar { top: 58px; } }
.tab-panel { animation: rise .5s var(--ease) both; }

/* Dropzone */
.dropzone { position: relative; display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: var(--r-lg); border: 1.5px dashed var(--line-2); background: var(--surface); cursor: pointer; transition: border-color .25s, background .25s, transform .35s var(--spring); overflow: hidden; }
.dropzone:hover { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.is-over { border-color: var(--accent); border-style: solid; background: var(--accent-soft); transform: scale(1.01); }
.dropzone .dz-icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--grad); color: #fff; flex: none; box-shadow: 0 10px 24px -10px rgba(160,92,255,.9); transition: transform .4s var(--spring); }
.dropzone:hover .dz-icon, .dropzone.is-over .dz-icon { transform: translateY(-3px) rotate(-6deg); }
.dropzone .dz-icon .i { width: 26px; height: 26px; }
.dropzone h4 { font-size: 15px; }
.dropzone p { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.dropzone input { display: none; }
.drop-overlay { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; background: rgba(10,10,20,.72); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.drop-overlay.is-active { opacity: 1; }
.drop-overlay .do-box { padding: 48px 64px; border-radius: 30px; border: 2px dashed var(--accent); text-align: center; color: #fff; transform: scale(.9); transition: transform .4s var(--spring); }
.drop-overlay.is-active .do-box { transform: scale(1); }
.drop-overlay .dz-icon { margin: 0 auto 14px; width: 70px; height: 70px; border-radius: 22px; display: grid; place-items: center; background: var(--grad); }
@media (max-width: 640px) { .dropzone { padding: 16px; gap: 14px; } .dropzone .dz-icon { width: 46px; height: 46px; border-radius: 14px; } }

.upload-queue { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.upload-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); animation: rise .4s var(--ease) both; }
.upload-item .ui-thumb { width: 64px; height: 44px; border-radius: 10px; overflow: hidden; background: var(--surface-3); display: grid; place-items: center; flex: none; color: var(--text-3); }
.upload-item .ui-thumb img { width: 100%; height: 100%; object-fit: cover; }
.upload-item .ui-body { flex: 1; min-width: 0; }
.upload-item .ui-name { font-weight: 600; font-size: 14px; }
.upload-item .ui-status { font-size: 12px; color: var(--text-3); display: flex; gap: 10px; margin-top: 2px; }
.upload-item .bar { margin-top: 8px; height: 5px; }
.upload-item .bar > span { transition: width .3s linear; }
.upload-item.is-done .bar > span { background: var(--ok); }
.upload-item.is-error { border-color: rgba(255,84,104,.4); }
.upload-item.is-error .ui-status { color: var(--danger); }

/* Asset card */
.asset-card { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.asset-thumb { position: relative; aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; display: grid; place-items: center; color: var(--text-3); }
.asset-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.asset-card:hover .asset-thumb img { transform: scale(1.05); }
.asset-thumb .play { position: absolute; width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,.5); backdrop-filter: blur(8px); color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(.8); transition: all .35s var(--spring); }
.asset-thumb .play .i { margin-left: 3px; }
.asset-card:hover .asset-thumb .play { opacity: 1; transform: scale(1); }
.asset-thumb .tl { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; }
.asset-thumb .br { position: absolute; bottom: 8px; right: 8px; }
.asset-thumb .fallback { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.asset-thumb .fallback .i { width: 34px; height: 34px; stroke-width: 1.4; }
.asset-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.asset-title { font-weight: 600; font-size: 14px; line-height: 1.4; }
.asset-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); }
.asset-meta .stat-inline { display: inline-flex; align-items: center; gap: 3px; }
.asset-meta .i { width: 14px; height: 14px; }
.expiry { font-size: 11.5px; display: inline-flex; align-items: center; gap: 4px; color: var(--text-3); }
.expiry.is-soon { color: var(--warn); }
@media (max-width: 640px) {
  .asset-body { padding: 10px 10px 12px; gap: 6px; }
  .asset-title { font-size: 13px; }
  .asset-meta { font-size: 11px; flex-wrap: wrap; gap: 6px; }
}

/* Kanban */
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.column { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px; min-height: 140px; transition: background .25s, border-color .25s; }
.column.is-over { background: var(--accent-soft); border-color: var(--accent-ring); }
.column-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 12px; font-weight: 700; font-size: 14px; }
.column-head .count { font-size: 12px; color: var(--text-3); font-weight: 600; }
.column-head .add { margin-left: auto; }
.column-list { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.task-card { position: relative; padding: 13px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s, border-color .2s, opacity .2s; user-select: none; }
.task-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-1px); }
.task-card.is-dragging { opacity: .4; transform: rotate(2deg) scale(.98); }
.task-card.is-new { animation: pop-in .5s var(--spring) both; }
.task-card h5 { font-size: 14px; font-weight: 600; line-height: 1.45; margin: 0 0 10px; }
.task-card .tc-foot { display: flex; align-items: center; gap: 8px; }
.task-card .tc-foot .spacer { flex: 1; }
.task-card .bar { margin-top: 10px; height: 4px; }
.task-card.is-done h5 { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--text-3); }
.drop-placeholder { height: 4px; border-radius: 2px; background: var(--accent); margin: -2px 0; box-shadow: 0 0 12px var(--accent); }
@keyframes pop-in { from { opacity: 0; transform: scale(.9); } }
@media (max-width: 960px) {
  .board { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 8px; gap: 10px; scrollbar-width: none; scroll-padding: 16px; }
  .board::-webkit-scrollbar { display: none; }
  .column { flex: none; width: 82vw; max-width: 340px; scroll-snap-align: start; }
}
.board-dots { display: none; justify-content: center; gap: 6px; margin-top: 4px; }
@media (max-width: 960px) { .board-dots { display: flex; } }
.board-dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--line-2); transition: width .35s var(--spring), background .25s; }
.board-dots span.is-active { width: 18px; background: var(--accent); }

/* Member list */
.member-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.member-row + .member-row { border-top: 1px solid var(--line); }
.member-row .m-body { flex: 1; min-width: 0; }
.member-row .m-name { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.member-row .m-sub { font-size: 12.5px; color: var(--text-3); }

/* Task detail */
.progress-input { display: flex; align-items: center; gap: 16px; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 4px; background: linear-gradient(to right, var(--accent) var(--val, 0%), var(--surface-3) var(--val, 0%)); outline: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 10px rgba(0,0,0,.35), 0 0 0 5px var(--accent-soft); cursor: grab; transition: transform .25s var(--spring); }
.range::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
.range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.progress-value { font-size: 28px; font-weight: 800; min-width: 76px; text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.progress-steps { display: flex; gap: 6px; margin-top: 10px; }
.progress-steps button { flex: 1; height: 30px; border-radius: 8px; background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--text-2); transition: background .2s, color .2s; }
.progress-steps button:hover { background: var(--surface-3); color: var(--text); }
.status-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.status-picker label { position: relative; cursor: pointer; }
.status-picker input { position: absolute; opacity: 0; }
.status-picker label > span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border-radius: 10px; background: var(--surface-2); font-size: 13px; font-weight: 600; color: var(--text-2); border: 1px solid transparent; transition: all .2s; }
.status-picker input:checked + span { background: var(--surface); transform: translateY(-1px); border-color: var(--line-2); color: var(--text); box-shadow: var(--shadow-sm); }
@media (max-width: 480px) { .status-picker label > span { font-size: 12px; } }
.status-picker input:checked + span .status-dot { animation: pop .35s var(--spring); }
.status-picker input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-soft); }
.timeline { position: relative; display: flex; flex-direction: column; gap: 14px; padding-left: 4px; }
.timeline-item { display: flex; gap: 12px; font-size: 13.5px; position: relative; }
.timeline-item:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 32px; bottom: -14px; width: 2px; background: var(--line); }
.timeline-item .tl-body { flex: 1; min-width: 0; padding-top: 3px; }
.timeline-item .tl-note { margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); white-space: pre-wrap; word-break: break-word; }

/* Task list page */
.task-group { margin-top: 26px; }
.task-group h3 { font-size: 13px; font-weight: 700; color: var(--text-2); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; letter-spacing: .02em; }
.task-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; }
.task-row + .task-row { border-top: 1px solid var(--line); }
.task-row:hover { background: var(--surface-2); }
.task-row:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.task-row:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.task-row:only-child { border-radius: var(--r-lg); }
.task-row .tr-body { flex: 1; min-width: 0; }
.task-row .tr-title { font-weight: 600; font-size: 14.5px; }
.task-row .tr-sub { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.task-row .tr-sub .cover { width: 16px; height: 16px; border-radius: 5px; font-size: 9px; }
.check-btn { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; color: transparent; flex: none; transition: all .3s var(--spring); }
.check-btn:hover { border-color: var(--ok); color: var(--ok); }
.check-btn.is-checked { background: var(--ok); border-color: var(--ok); color: #fff; transform: scale(1.1); }
.check-btn .i { width: 14px; height: 14px; stroke-width: 3; }

/* Notifications */
.notif { display: flex; gap: 14px; padding: 16px 18px; position: relative; transition: background .2s; }
.notif + .notif { border-top: 1px solid var(--line); }
.notif:hover { background: var(--surface-2); }
.notif.is-unread::before { content: ""; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 3px rgba(255,94,138,.2); }
.notif-icon { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-weight: 600; font-size: 14.5px; line-height: 1.5; }
.notif.is-read .notif-title { font-weight: 500; color: var(--text-2); }
.notif-text { font-size: 13px; color: var(--text-2); white-space: pre-line; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.notif-time { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.ni-question, .ni-answer, .ni-mention { background: rgba(255,94,138,.14); color: #ff6d95; }
.ni-invite, .ni-member_added, .ni-member_joined, .ni-signup_request, .ni-signup_approved { background: var(--accent-soft); color: var(--accent); }
.ni-reminder, .ni-expiry { background: var(--warn-soft); color: var(--warn); }
.ni-task_assigned, .ni-task_review, .ni-task_changed, .ni-task_unassigned { background: var(--info-soft); color: var(--info); }
.ni-comment, .ni-reply, .ni-asset_uploaded, .ni-submitted, .ni-assignment_approved { background: var(--ok-soft); color: var(--ok); }
.ni-assignment_request { background: var(--accent-soft); color: var(--accent); }
.ni-assignment_rejected { background: var(--warn-soft); color: var(--warn); }

/* Profile */
.settings-card { padding: 24px; }
.settings-card h2 { font-size: 17px; margin-bottom: 4px; }
.settings-card > .muted { font-size: 13.5px; margin-bottom: 20px; }
.hue-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.hue-picker label { cursor: pointer; position: relative; }
.hue-picker input { position: absolute; opacity: 0; }
.hue-picker .avatar { transition: transform .3s var(--spring), box-shadow .2s; }
.hue-picker input:checked + .avatar { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); transform: scale(1.1); }
.profile-head { display: flex; align-items: center; gap: 18px; padding: 24px; }

/* =========================================================
   Review (player + comments)
   ========================================================= */

.is-review .sidebar { display: none; }
.is-review .main-wrap { margin-left: 0; }
.is-review .topbar { display: none; }
.is-review .main { padding: 0; }
.is-review .tabbar { display: none; }
.is-review { background: #07070b; }

.review { display: grid; grid-template-columns: minmax(0, 1fr) 400px; height: 100vh; height: 100dvh; color: #f3f2f8; --surface: #121219; --surface-2: #1a1a23; --surface-3: #24242f; --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.13); --text: #f3f2f8; --text-2: #a6a4b9; --text-3: #6d6b82; --bg: #07070b; --surface-glass: rgba(18,18,25,.8); color-scheme: dark; }
.review-stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.review-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); min-height: 60px; }
.review-head .rh-title { flex: 1; min-width: 0; }
.review-head .rh-title h1 { font-size: 15px; font-weight: 700; }
.review-head .rh-title .crumb { font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.review-head .rh-title .crumb a:hover { color: var(--text); }
.review-head .btn { --btn-bg: var(--surface-2); --btn-fg: var(--text); --btn-bd: var(--line); }
.review-head .btn-primary { --btn-fg: #fff; }

.viewport { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; padding: 18px; overflow: hidden; background: radial-gradient(ellipse at center, #14141c 0%, #07070b 70%); }
.media-box { position: relative; max-width: 100%; max-height: 100%; line-height: 0; border-radius: 6px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); touch-action: manipulation; }
.media-box video, .media-box img, .media-box canvas { max-width: 100%; max-height: calc(100dvh - 60px - 104px - 36px); width: auto; height: auto; border-radius: 6px; background: #000; user-select: none; -webkit-user-drag: none; }
.media-box.is-pinning { cursor: crosshair; }
.media-box.is-pinning::after { content: "クリックして位置を指定"; position: absolute; left: 50%; top: 14px; transform: translateX(-50%); padding: 6px 14px; border-radius: 20px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.4; pointer-events: none; animation: rise .3s var(--ease); white-space: nowrap; }
.media-box .audio-poster { width: min(70vw, 640px); aspect-ratio: 16/9; display: grid; place-items: center; background: var(--grad-soft), #0e0e15; border-radius: 6px; color: var(--accent); }
.media-box .audio-poster .i { width: 64px; height: 64px; stroke-width: 1.2; }
.pins { position: absolute; inset: 0; pointer-events: none; }
.pin { position: absolute; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer; animation: pin-drop .45s var(--spring) both; z-index: 2; }
.pin-head { width: 30px; height: 30px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); display: grid; place-items: center; background: var(--accent); box-shadow: 0 6px 16px rgba(0,0,0,.5), 0 0 0 2px #fff; transition: transform .25s var(--spring), background .2s; }
.pin-head span { transform: rotate(45deg); font-size: 12px; font-weight: 800; color: #fff; line-height: 1; }
.pin.is-question .pin-head { background: var(--accent-2); }
.pin.is-resolved .pin-head { background: var(--ok); }
.pin.is-draft .pin-head { background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.5), 0 0 0 2px var(--accent); }
.pin.is-draft .pin-head span { color: var(--accent); }
.pin.is-active .pin-head, .pin:hover .pin-head { transform: rotate(-45deg) scale(1.2); }
.pin.is-active::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--accent); opacity: .6; animation: ping 1.4s ease-out infinite; }
.pin-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 240px; padding: 8px 12px; border-radius: 12px; background: rgba(15,15,22,.92); backdrop-filter: blur(10px); border: 1px solid var(--line-2); font-size: 13px; line-height: 1.5; white-space: normal; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--ease); }
.pin:hover .pin-tip, .pin.is-active .pin-tip { opacity: 1; transform: translateX(-50%) translateY(-2px); }
/* 上端付近のピン: 指す点の下側に描く */
.pin.is-flip { transform: translate(-50%, 0); }
.pin.is-flip .pin-head { transform: rotate(135deg); }
.pin.is-flip .pin-head span { transform: rotate(-135deg); }
.pin.is-flip.is-active .pin-head, .pin.is-flip:hover .pin-head { transform: rotate(135deg) scale(1.2); }
.pin.is-flip.is-active::after { bottom: auto; top: -6px; }
.pin.is-flip .pin-tip { bottom: auto; top: calc(100% + 8px); }
.pin.is-flip:hover .pin-tip, .pin.is-flip.is-active .pin-tip { transform: translateX(-50%) translateY(2px); }
@keyframes pin-drop { from { opacity: 0; transform: translate(-50%, -160%) scale(.6); } }

.big-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.45); backdrop-filter: blur(10px); color: #fff; z-index: 3; transition: transform .35s var(--spring), opacity .3s; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.big-play .i { width: 30px; height: 30px; margin-left: 4px; }
.big-play:hover { transform: scale(1.08); }
.is-playing .big-play { opacity: 0; transform: scale(.7); pointer-events: none; }

.controls { padding: 10px 16px 14px; border-top: 1px solid var(--line); background: var(--surface); }
.scrubber { position: relative; height: 34px; cursor: pointer; touch-action: none; }
.scrub-track { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--surface-3); overflow: hidden; transition: height .2s, margin-top .2s; }
.scrubber:hover .scrub-track, .scrubber.is-dragging .scrub-track { height: 8px; margin-top: -4px; }
.scrub-buffer { position: absolute; inset: 0 auto 0 0; background: rgba(255,255,255,.12); }
.scrub-fill { position: absolute; inset: 0 auto 0 0; background: var(--grad); }
.scrub-head { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5); transform: scale(0); transition: transform .2s var(--spring); pointer-events: none; z-index: 2; }
.scrubber:hover .scrub-head, .scrubber.is-dragging .scrub-head { transform: scale(1); }
.scrub-marker { position: absolute; top: 50%; width: 10px; height: 10px; margin: -14px 0 0 -5px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); z-index: 1; transition: transform .2s var(--spring); cursor: pointer; }
.scrub-marker:hover { transform: scale(1.5); }
.scrub-marker.is-question { background: var(--accent-2); }
.scrub-marker.is-resolved { background: var(--ok); }
.scrub-hover { position: absolute; bottom: calc(100% + 2px); transform: translateX(-50%); padding: 3px 8px; border-radius: 6px; background: #000; font-size: 12px; font-family: var(--mono); opacity: 0; transition: opacity .15s; pointer-events: none; white-space: nowrap; }
@media (hover: hover) { .scrubber:hover .scrub-hover { opacity: 1; } }
.scrubber.is-dragging .scrub-hover { opacity: 1; }
.ctrl-row { display: flex; align-items: center; gap: 4px; }
.ctrl-row .icon-btn { width: 38px; height: 38px; color: var(--text); }
.ctrl-row .icon-btn.play-btn { width: 44px; height: 44px; }
.ctrl-row .icon-btn.play-btn .i { width: 22px; height: 22px; }
.timecode { font-family: var(--mono); font-size: 13px; color: var(--text-2); padding: 0 8px; white-space: nowrap; }
.timecode b { color: var(--text); font-weight: 600; }
.speed-btn { height: 30px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; font-weight: 700; font-family: var(--mono); color: var(--text-2); background: var(--surface-2); }
.speed-btn:hover { color: var(--text); }
.volume { width: 80px; }
.zoom-ctrl { display: flex; align-items: center; gap: 4px; }
@media (max-width: 640px) { .volume, .hide-sm { display: none; } }

/* Comments panel */
.panel { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-left: 1px solid var(--line); }
.panel-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); min-height: 60px; }
.panel-head h2 { font-size: 15px; flex: 1; display: flex; align-items: center; gap: 8px; }
.panel-head .segmented { padding: 3px; }
.panel-head .segmented button { height: 28px; padding: 0 10px; font-size: 12.5px; }
.comment-list { flex: 1; overflow-y: auto; padding: 8px 10px 16px; overscroll-behavior: contain; }
.comment { position: relative; padding: 12px; border-radius: 14px; transition: background .2s, box-shadow .3s; animation: rise .4s var(--ease) both; }
.comment:hover { background: var(--surface-2); }
.comment.is-active { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.comment.is-resolved > .c-main { opacity: .55; }
.c-main { display: flex; gap: 10px; }
.c-body { flex: 1; min-width: 0; }
.c-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.c-name { font-weight: 700; font-size: 13.5px; }
.c-ago { font-size: 12px; color: var(--text-3); }
.c-text { font-size: 14px; line-height: 1.65; margin-top: 4px; white-space: pre-wrap; word-break: break-word; }
.c-tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.c-time { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); font-family: var(--mono); font-size: 12px; font-weight: 600; transition: background .2s, transform .2s var(--spring); }
.c-time:hover { background: rgba(139,123,255,.28); transform: scale(1.05); }
.c-time .i { width: 12px; height: 12px; }
.c-actions { display: flex; gap: 2px; margin-top: 6px; opacity: .8; }
.c-actions button { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--text-3); transition: background .2s, color .2s; }
.c-actions button:hover { background: var(--surface-3); color: var(--text); }
.c-actions .i { width: 14px; height: 14px; }
.c-actions .is-on { color: var(--ok); }
.c-replies { margin: 8px 0 0 38px; display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--line); padding-left: 10px; }
.c-replies .comment { padding: 8px; }
.c-pin-num { width: 20px; height: 20px; border-radius: 50% 50% 50% 3px; display: inline-grid; place-items: center; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 800; }
.c-pin-num.is-question { background: var(--accent-2); }
.c-pin-num.is-resolved { background: var(--ok); }
.comments-empty { text-align: center; padding: 48px 20px; color: var(--text-3); font-size: 14px; }
.comments-empty .empty-art { width: 64px; height: 64px; border-radius: 20px; }
.comments-empty .empty-art .i { width: 28px; height: 28px; }

.composer { border-top: 1px solid var(--line); padding: 12px 14px calc(12px + var(--safe-b)); background: var(--surface); }
.composer-replying { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); padding: 0 4px 8px; }
.composer-box { border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface-2); transition: border-color .2s, box-shadow .2s; }
.composer-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.composer textarea { display: block; width: 100%; min-height: 48px; max-height: 160px; resize: none; padding: 12px 14px 4px; border: 0; background: transparent; outline: none; font-size: 15px; line-height: 1.55; }
.composer-tools { display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 8px; }
.tool-chip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: transparent; border: 1px solid var(--line); transition: all .2s var(--ease); white-space: nowrap; }
.tool-chip:hover { color: var(--text); border-color: var(--line-2); }
.tool-chip .i { width: 15px; height: 15px; }
.tool-chip.is-on { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.tool-chip.is-question.is-on { background: rgba(255,94,138,.15); color: #ff6d95; }
.tool-chip .mono { font-size: 12px; }
.send-btn { margin-left: auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--grad); color: #fff; transition: transform .25s var(--spring), opacity .2s; flex: none; }
.send-btn:disabled { opacity: .35; }
.send-btn:not(:disabled):active { transform: scale(.88); }
.send-btn .i { width: 18px; height: 18px; }
.composer-locked { padding: 16px; text-align: center; font-size: 14px; color: var(--text-2); }

.file-strip { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 12px; scrollbar-width: none; }
.file-strip::-webkit-scrollbar { display: none; }
.file-strip a { flex: none; width: 76px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--surface-3); display: grid; place-items: center; color: var(--text-3); opacity: .6; transition: opacity .2s, box-shadow .2s; }
.file-strip a:hover { opacity: 1; }
.file-strip a.is-current { opacity: 1; box-shadow: 0 0 0 2px var(--accent); }
.file-strip img { width: 100%; height: 100%; object-fit: cover; }

.loader { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--text-2); font-size: 14px; }
.loader-spin { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--surface-3); border-top-color: var(--accent); animation: spin .8s linear infinite; }

.expired-box { text-align: center; max-width: 380px; color: var(--text-2); }
.expired-box .empty-art { background: var(--warn-soft); color: var(--warn); }

@media (max-width: 1024px) {
  .review { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: auto; min-height: 100dvh; }
  .review-stage { position: sticky; top: 0; z-index: 10; background: #07070b; }
  .viewport { padding: 0; flex: none; }
  .media-box { border-radius: 0; box-shadow: none; width: 100%; display: flex; justify-content: center; }
  .media-box video, .media-box img, .media-box canvas { max-height: 46dvh; border-radius: 0; }
  .media-box .audio-poster { width: 100%; border-radius: 0; }
  .review-head { padding: 8px 10px; min-height: 52px; }
  .review-head .btn-label { display: none; }
  .controls { padding: 4px 10px 6px; }
  .panel { border-left: 0; min-height: 50dvh; }
  .comment-list { overflow: visible; padding-bottom: 150px; }
  .composer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; box-shadow: 0 -10px 30px rgba(0,0,0,.4); }
  .file-strip { display: none; }
  .panel-head { position: sticky; top: 0; }
}

/* Lightweight skeleton */
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 8px; }
@keyframes shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* Error page */
.error-page { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 40px 20px; }
.error-code { font-size: 96px; font-weight: 900; letter-spacing: -.05em; line-height: 1; }

/* ---------- Review: anchor / drawing (v2) ---------- */
.anchor-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 10px 0; }
.anchor-chip { display: inline-flex; align-items: center; height: 28px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 600; overflow: hidden; transition: background .2s, color .2s; animation: pop .3s var(--spring); }
.anchor-chip .anchor-main { display: inline-flex; align-items: center; gap: 5px; height: 100%; padding: 0 6px 0 9px; color: inherit; }
.anchor-chip .anchor-main:only-child { padding-right: 10px; }
.anchor-chip .i { width: 14px; height: 14px; }
.anchor-chip .mono { font-size: 12px; }
.anchor-x { width: 26px; height: 100%; display: grid; place-items: center; color: inherit; opacity: .7; }
.anchor-x:hover { opacity: 1; background: rgba(255,255,255,.08); }
.anchor-x .i { width: 13px; height: 13px; }
.anchor-chip.is-away { background: var(--warn-soft); color: var(--warn); }
.anchor-chip.is-away .anchor-main { cursor: pointer; }
.anchor-chip.is-muted { background: var(--surface-3); color: var(--text-2); }
.anchor-chip.is-pin { background: rgba(139,123,255,.2); }
.anchor-chip.is-draw { background: rgba(255,77,109,.15); color: #ff6d87; }
.composer-hint { flex: 1; min-width: 0; font-size: 11.5px; color: var(--text-3); padding-left: 4px; }

.has-played .big-play { display: none; }
.media-box.is-drawing { cursor: crosshair; }
.pins.is-drawing { pointer-events: auto; touch-action: none; cursor: crosshair; z-index: 4; }
.pins.is-drawing .pin, .pins.is-drawing .mark-badge { pointer-events: none; }
.marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.65)); }
.marks .is-dim { opacity: .45; }
.mark-badge { position: absolute; transform: translate(-50%, -50%); min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(0,0,0,.5); pointer-events: auto; cursor: pointer; z-index: 2; animation: pop .35s var(--spring); }
.mark-badge.is-question { background: var(--accent-2); }
.mark-badge.is-resolved { background: var(--ok); }

.draw-bar { position: absolute; z-index: 8; top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 16px; background: rgba(14,14,20,.92); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 16px 40px rgba(0,0,0,.6); animation: drop-in .3s var(--ease); max-width: calc(100% - 20px); }
.draw-group { display: flex; align-items: center; gap: 2px; padding-right: 6px; margin-right: 2px; border-right: 1px solid rgba(255,255,255,.12); }
.draw-bar button { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #c9c7d8; transition: background .15s, color .15s; flex: none; }
.draw-bar button:hover { background: rgba(255,255,255,.08); color: #fff; }
.draw-bar button.is-on { background: var(--accent); color: #fff; }
.draw-bar .swatch { width: 28px; height: 28px; }
.draw-bar .swatch::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); transition: transform .2s var(--spring); }
.draw-bar .swatch.is-on { background: transparent; }
.draw-bar .swatch.is-on::before { transform: scale(1.25); box-shadow: 0 0 0 2px #0e0e14, 0 0 0 4px #fff; }
.draw-bar .draw-done { width: auto; padding: 0 14px; background: var(--grad); color: #fff; font-size: 13px; font-weight: 700; margin-left: 2px; }
.draw-bar .i { width: 18px; height: 18px; }

.marks-toggle { position: absolute; z-index: 7; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; backdrop-filter: blur(8px); opacity: .75; transition: opacity .2s, background .2s; }
.marks-toggle:hover { opacity: 1; }
.marks-toggle.is-off { background: rgba(255,255,255,.18); }
.marks-toggle .i { width: 18px; height: 18px; }

.c-frame { display: block; width: 148px; max-width: 100%; margin-top: 8px; border-radius: 9px; border: 1px solid var(--line-2); cursor: pointer; transition: transform .2s var(--ease), border-color .2s; }
.c-frame:hover { transform: scale(1.03); border-color: var(--accent); }
.comment.is-active .c-frame { border-color: var(--accent); }

@media (max-width: 1024px) {
  .draw-bar { top: 8px; gap: 2px; padding: 4px; }
  .draw-bar button { width: 32px; height: 32px; }
  .draw-group { padding-right: 4px; }
  .marks-toggle { top: 8px; right: 8px; width: 32px; height: 32px; }
  .composer-hint { display: none; }
}

/* 狭い画面 × マウス操作: タスクボードのスクロールを分かるように */
.board-dots span { cursor: pointer; }
.board.is-panning { scroll-snap-type: none; cursor: grabbing; user-select: none; }
@media (max-width: 960px) and (hover: hover) and (pointer: fine) {
  .board { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; cursor: grab; padding-bottom: 12px; }
  .board::-webkit-scrollbar { display: block; height: 8px; }
  .board::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
  .board .task-card { cursor: pointer; }
  .board-dots { gap: 8px; }
  .board-dots span { width: 8px; height: 8px; border-radius: 4px; }
  .board-dots span.is-active { width: 22px; }
}

/* サムネイル: iOS Safari では aspect-ratio 内の height:100% が効かないため絶対配置で敷き詰める */
.asset-thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.asset-thumb .tl, .asset-thumb .br, .asset-thumb .play { z-index: 1; }
/* 書類（PDF・AI・PSD）は切り取らずに全体を見せる */
.asset-thumb.is-doc { background: repeating-conic-gradient(var(--surface-3) 0 25%, var(--surface-2) 0 50%) 0 0 / 16px 16px; }
.asset-thumb.is-doc > img { object-fit: contain; padding: 10px; filter: drop-shadow(0 4px 12px rgba(0,0,0,.35)); }
.asset-card:hover .asset-thumb.is-doc > img { transform: scale(1.03); }

/* メンション */
@media (min-width: 1025px) { .composer { position: relative; } }
.mention-menu { position: absolute; left: 14px; right: 14px; bottom: calc(100% - 4px); z-index: 30; max-height: 240px; overflow-y: auto; padding: 6px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow-lg); animation: drop-in .2s var(--ease); }
.mention-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; text-align: left; font-size: 14px; }
.mention-item:hover, .mention-item.is-focus { background: var(--surface-2); }
.mention-item .uname { color: var(--text-3); font-size: 12px; }
.mention-item .role-badge { margin-left: auto; }
.mention { color: var(--accent); background: var(--accent-soft); border-radius: 5px; padding: 0 3px; font-weight: 600; }
.mention.is-me { color: #fff; background: var(--accent); }

/* プロフィール画像（元画像を切り抜き範囲で丸く表示） */
.avatar.has-img { background-color: var(--surface-3); background-repeat: no-repeat; color: transparent; }
.avatar-xl { --s: 84px; }
.cropper { position: relative; width: min(100%, 320px); aspect-ratio: 1; margin: 4px auto 0; overflow: hidden; border-radius: 18px; background: #000; touch-action: none; cursor: grab; user-select: none; }
.cropper:active { cursor: grabbing; }
.cropper img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; will-change: transform; pointer-events: none; }
.crop-mask { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0,0,0,.55); outline: 2px solid rgba(255,255,255,.85); outline-offset: -2px; pointer-events: none; }
.crop-zoom { display: flex; align-items: center; gap: 10px; margin: 18px auto 0; width: min(100%, 320px); color: var(--text-3); }

/* 入力中のメンション: 透明にした入力欄の後ろに、色付きの同じ文章を重ねる */
.composer-input { position: relative; }
.composer-mirror, .composer textarea { padding: 12px 14px 4px; font-size: 15px; line-height: 1.55; font-feature-settings: "palt" 1; letter-spacing: normal; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; }
.composer-mirror { position: absolute; inset: 0; overflow: hidden; pointer-events: none; color: var(--text); }
.composer textarea { position: relative; color: transparent; caret-color: var(--text); -webkit-text-fill-color: transparent; overflow-y: auto; scrollbar-width: none; }
.composer textarea::-webkit-scrollbar { display: none; }
.composer textarea::placeholder { color: var(--text-3); -webkit-text-fill-color: var(--text-3); }
.composer textarea::selection { background: rgba(139,123,255,.35); }
.mention-hl { color: var(--accent); background: var(--accent-soft); border-radius: 4px; box-shadow: 0 0 0 1px var(--accent-soft); font-weight: inherit; }
.mention-hl.is-all, .mention.is-all { color: #ff6d95; background: rgba(255,94,138,.16); box-shadow: 0 0 0 1px rgba(255,94,138,.16); }
.mention-item .avatar .i { width: 13px; height: 13px; }

.mention-item[disabled] { opacity: .45; cursor: default; }
.mention-item[disabled]:hover { background: none; }
.mention-item[disabled] .role-badge { white-space: normal; text-align: right; }

/* コメントの並び順 */
.panel-sub { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.segmented-sm { padding: 3px; border-radius: 11px; }
.segmented-sm button { height: 26px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
.segmented-sm .seg-indicator { top: 3px; bottom: 3px; border-radius: 8px; }
.segmented-sm .i { width: 13px; height: 13px; }

/* 空の列の「新規登録」カード */
.task-empty { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 64px; border: 1.5px dashed var(--line-2); border-radius: 14px; color: var(--text-3); font-size: 13.5px; font-weight: 600; transition: border-color .2s, color .2s, background .2s, transform .25s var(--ease); animation: fade-in .3s var(--ease); }
.task-empty:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.task-empty:active { transform: scale(.98); }
.column.is-over .task-empty { border-color: var(--accent); color: var(--accent); }

/* ペンディング: 完了と同じく控えめに（取り消し線は付けない） */
.task-card.is-pending { opacity: .55; }
.task-card.is-pending:hover { opacity: .9; }
.task-card.is-pending h5 { color: var(--text-3); }
.task-card.is-pending .bar > span { background: var(--text-3); }
.due-paused { background: var(--surface-2); color: var(--text-3); }
.task-row.is-pending { opacity: .6; }

/* タスクの担当者（複数選択） */
.assignee-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.assignee-option { position: relative; cursor: pointer; }
.assignee-option input { position: absolute; opacity: 0; pointer-events: none; }
.assignee-option > span { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 5px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--text-2); transition: background .2s, border-color .2s, color .2s, transform .2s var(--spring); }
.assignee-option > span small { font-size: 11px; color: var(--text-3); font-weight: 600; }
.assignee-option > span > .i { width: 14px; height: 14px; stroke-width: 3; color: var(--accent); margin-left: -2px; display: none; }
.assignee-option:hover > span { border-color: var(--line-2); color: var(--text); }
.assignee-option input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.assignee-option input:checked + span > .i { display: block; animation: pop .3s var(--spring); }
.assignee-option input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-soft); }
.task-card .avatar-stack .avatar { box-shadow: 0 0 0 2px var(--surface); }

/* サイドバー: プロジェクト作成ボタン（プロジェクト名と見間違えないよう点線のボタンに） */
.side-new { display: flex; align-items: center; gap: 10px; margin: 8px 6px 4px; padding: 8px 12px; border: 1.5px dashed var(--line-2); border-radius: var(--r-sm); color: var(--text-2); font-size: 13.5px; font-weight: 600; transition: border-color .2s, color .2s, background .2s; }
.side-new:hover { border-color: var(--accent); border-style: solid; color: var(--accent); background: var(--accent-soft); }
.side-new-icon { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; flex: none; }
.side-new-icon .i { width: 14px; height: 14px; stroke-width: 2.6; }

/* ユーザー管理 */
.user-row { transition: background .2s; }
.user-row:hover { background: var(--surface-2); }
.user-meta { display: flex; gap: 16px; font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.user-meta span { display: inline-flex; align-items: center; gap: 5px; }
.chip-cover { width: 22px; height: 22px; border-radius: 6px; font-size: 12px; }
.role-badge { white-space: nowrap; }
@media (max-width: 640px) {
  .user-meta { display: none; }
  .user-row .m-name { flex-wrap: wrap; }
}

/* =========================================================
   書類ビューアー（PDF・Word・PowerPoint・Excel）
   ========================================================= */
.viewport.is-doc { display: block; padding: 0; overflow: auto; overscroll-behavior: contain; }
.doc-view { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 28px 32px 80px; min-height: 100%; }
.doc-page { position: relative; background: #fff; box-shadow: 0 14px 40px -12px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.04); }
.doc-pdf-page canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.doc-marks { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.doc-marks .pin, .doc-marks [data-mark] { pointer-events: auto; }
.doc-page { cursor: crosshair; }
.doc-page :is(p, span, td, li, h1, h2, h3, h4) { cursor: text; }

/* PDF の文字（選択用の透明な層） */
.textLayer { position: absolute; text-align: initial; inset: 0; overflow: hidden; line-height: 1; -webkit-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; z-index: 2; }
.textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.textLayer span.markedContent { top: 0; height: 0; }
.textLayer ::selection { background: rgba(124,108,255,.35); }
.textLayer br::selection { background: transparent; }

/* 文字のハイライト */
.doc-hl { position: absolute; background: rgba(255,210,63,.42); border-radius: 2px; cursor: pointer; transition: background .2s, box-shadow .2s; }
.doc-hl.is-question { background: rgba(255,94,138,.3); }
.doc-hl.is-resolved { background: rgba(47,214,160,.28); }
.doc-hl.is-active { background: rgba(255,210,63,.7); box-shadow: 0 0 0 2px #7c6cff; }
.doc-hl.is-draft { background: rgba(124,108,255,.35); box-shadow: 0 0 0 1.5px #7c6cff; }
.doc-hl-num { position: absolute; left: -11px; top: -13px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: #7c6cff; color: #fff; font: 800 10.5px/19px var(--font); text-align: center; box-shadow: 0 0 0 2px #fff; }
.doc-hl.is-question .doc-hl-num { background: #ff5e8a; }
.doc-hl.is-resolved .doc-hl-num { background: #2fd6a0; }
.doc-hl.is-draft .doc-hl-num { background: #fff; color: #7c6cff; box-shadow: 0 0 0 2px #7c6cff; }

/* Word */
.doc-word { width: 100%; }
.doc-word .docx-wrapper { background: transparent !important; padding: 0 !important; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.doc-scale { position: relative; }
.doc-scale > section.docx { transform-origin: 0 0; margin: 0 !important; box-shadow: 0 14px 40px -12px rgba(0,0,0,.75) !important; }

/* PowerPoint */
.doc-pptx .pptx-preview-wrapper { height: auto !important; overflow: visible !important; background: transparent !important; }
.doc-pptx .pptx-preview-slide-wrapper { position: relative !important; margin: 0 auto 20px !important; }

/* Excel */
.doc-view.doc-excel { padding: 18px; align-items: stretch; }
.excel-book { width: 100%; display: flex; flex-direction: column; background: #fff; color: #1d1d1f; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 40px -12px rgba(0,0,0,.75); }
.sheet-tabs { display: flex; gap: 4px; padding: 8px; background: #f1f1f5; border-bottom: 1px solid #e2e2e8; overflow-x: auto; scrollbar-width: none; }
.sheet-tabs button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #666; white-space: nowrap; }
.sheet-tabs button:hover { background: #e7e7ee; }
.sheet-tabs button.is-active { background: #fff; color: #111; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.sheet-tabs .i { width: 14px; height: 14px; color: #1d7a46; }
.sheet-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #7c6cff; color: #fff; font-size: 10.5px; line-height: 18px; text-align: center; }
.sheet-wrap { overflow: auto; max-height: calc(100dvh - 190px); }
table.sheet { border-collapse: collapse; font: 13px/1.4 -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif; }
table.sheet th { position: sticky; background: #f6f6f9; color: #888; font-weight: 600; font-size: 11.5px; border: 1px solid #e3e3e8; padding: 3px 6px; }
table.sheet thead th { top: 0; z-index: 2; }
table.sheet tbody th { left: 0; z-index: 1; min-width: 44px; text-align: center; }
table.sheet thead th.corner { left: 0; z-index: 3; }
table.sheet td { position: relative; border: 1px solid #e8e8ec; padding: 4px 8px; min-width: 76px; max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #1d1d1f; cursor: cell; }
table.sheet td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.sheet td:hover { box-shadow: inset 0 0 0 2px rgba(124,108,255,.55); }
table.sheet td.has-comment::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 10px 10px 0; border-color: transparent #7c6cff transparent transparent; }
table.sheet td.is-question::after { border-right-color: #ff5e8a; }
table.sheet td.is-resolved::after { border-right-color: #2fd6a0; }
table.sheet td.is-active { background: rgba(255,210,63,.4); box-shadow: inset 0 0 0 2px #7c6cff; }
table.sheet td.is-draft { background: rgba(124,108,255,.16); box-shadow: inset 0 0 0 2px #7c6cff; }
.sheet-empty { padding: 30px !important; color: #888 !important; }
.sheet-note { padding: 10px 14px; font-size: 12.5px; color: #888; background: #fafafa; border-top: 1px solid #eee; }

/* 文字を選択したときのボタン */
.sel-comment { position: fixed; z-index: 90; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 11px; background: var(--grad); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 10px 26px -8px rgba(124,108,255,.9); animation: pop .3s var(--spring); }
.sel-comment .i { width: 16px; height: 16px; }

/* コメント一覧の位置表示 */
.c-place { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; }
.c-place .i { width: 12px; height: 12px; }
.c-place:hover { background: rgba(139,123,255,.28); }
.c-quote { display: block; width: 100%; margin-top: 8px; padding: 6px 10px; border-left: 3px solid #ffd23f; border-radius: 0 8px 8px 0; background: rgba(255,210,63,.1); color: var(--text-2); font-size: 13px; line-height: 1.6; text-align: left; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.anchor-chip.is-place { max-width: 100%; }
.anchor-chip.is-place .anchor-main { min-width: 0; }

@media (max-width: 1024px) {
  .is-doc-mode .viewport.is-doc { flex: none; height: 56dvh; }
  .doc-view { padding: 12px 12px 40px; gap: 12px; }
  .doc-view.doc-excel { padding: 8px; }
  .sheet-wrap { max-height: calc(56dvh - 70px); }
}
.asset-thumb .fallback.k-pdf { color: #ef4b4b; }
.asset-thumb .fallback.k-word { color: #3b82f6; }
.asset-thumb .fallback.k-excel { color: #22a35a; }
.asset-thumb .fallback.k-powerpoint { color: #f07a2a; }

.file-strip .fallback { display: grid; place-items: center; }
.file-strip .fallback.k-pdf { color: #ef4b4b; } .file-strip .fallback.k-word { color: #3b82f6; }
.file-strip .fallback.k-excel { color: #22a35a; } .file-strip .fallback.k-powerpoint { color: #f07a2a; }

/* 書類の中身は、アプリ側の見た目の設定（文字色・行間・文字詰め・画像の配置など）を引き継がない */
.doc-page {
  isolation: isolate; /* 「文字の背面」の画像がページの白い背景の裏に隠れないように */
  color: #000;
  line-height: normal;
  letter-spacing: normal;
  font-feature-settings: normal;
  text-align: initial;
}
.doc-page, .doc-page *, .doc-page *::before, .doc-page *::after { box-sizing: content-box; }
.doc-page img, .doc-page svg, .doc-page video { display: revert; max-width: none; }
.doc-page h1, .doc-page h2, .doc-page h3, .doc-page h4, .doc-page h5, .doc-page h6, .doc-page p {
  margin: revert; line-height: revert; letter-spacing: revert; font-weight: revert;
}
.doc-page a { color: revert; text-decoration: revert; }
.doc-page ::selection { background: rgba(124,108,255,.35); }
.doc-pdf-page canvas { display: block; }
.doc-marks, .doc-marks * { box-sizing: border-box; }
.doc-marks { z-index: 50; }

/* 組織の表示 */
.org-badge { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; padding: 8px 16px 8px 8px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.org-badge-thumb { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--grad); color: #fff; font-weight: 800; font-size: 18px; flex: none; }
.org-badge-thumb img { width: 100%; height: 100%; object-fit: cover; }
.org-badge-name { font-weight: 700; font-size: 15px; }
.side-org { display: flex; align-items: center; gap: 10px; margin: -6px 4px 12px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.side-org .org-badge-thumb { width: 28px; height: 28px; border-radius: 8px; font-size: 13px; }
.side-org-name { font-size: 13px; font-weight: 700; min-width: 0; }
.side-org-label { display: block; font-size: 10.5px; font-weight: 600; color: var(--text-3); letter-spacing: .04em; }
.org-card { display: flex; flex-direction: column; }
.org-card-main { display: flex; align-items: center; gap: 14px; padding: 18px 18px 12px; }
.org-card-thumb { width: 52px; height: 52px; border-radius: 15px; font-size: 22px; }
.org-card-name { display: block; font-weight: 700; font-size: 16px; }

@media (max-width: 960px) { .tabbar.tabbar-3 { grid-template-columns: repeat(3, 1fr); } }
.role-admin { background: rgba(255,181,71,.16); color: var(--warn); }

/* 登録の案内（リンク・コード） */
.share-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.share-label { display: inline-flex; align-items: center; gap: 6px; width: 150px; font-size: 13px; font-weight: 600; color: var(--text-2); flex: none; }
.share-label .i { width: 15px; height: 15px; }
.share-value { flex: 1; min-width: 160px; padding: 7px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13.5px; overflow-wrap: anywhere; user-select: all; }
.share-code { font-size: 16px; font-weight: 700; letter-spacing: .12em; }
@media (max-width: 640px) { .share-label { width: 100%; } }

.pending-card { border-color: rgba(255,181,71,.35); }
.pending-card .member-row + .member-row { border-top: 1px solid var(--line); }

/* スマホ横向き: 動画と操作を左、コメントを右に並べる */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 600px) {
  .review { grid-template-columns: minmax(0, 1fr) minmax(260px, 40%); grid-template-rows: none; height: 100dvh; min-height: 0; overflow: hidden; }
  .review-stage { position: relative; height: 100dvh; padding-left: env(safe-area-inset-left); }
  .review-head { min-height: 44px; padding: 4px 8px; }
  .viewport { flex: 1; min-height: 0; }
  .media-box { height: 100%; align-items: center; }
  .media-box video, .media-box img, .media-box canvas { max-height: calc(100dvh - 44px - 76px); }
  .is-doc-mode .viewport.is-doc { flex: 1; height: auto; }
  .sheet-wrap { max-height: none; }
  .panel { min-height: 0; height: 100dvh; border-left: 1px solid var(--line); padding-right: env(safe-area-inset-right); }
  .panel-head { position: static; min-height: 44px; padding: 6px 10px; }
  .panel-head h2 { white-space: nowrap; font-size: 14px; }
  .controls { padding: 2px 10px 4px; }
  .comment-list { overflow-y: auto; padding-bottom: 12px; }
  .composer { position: relative; left: auto; right: auto; bottom: auto; box-shadow: none; padding: 8px 10px calc(8px + var(--safe-b)); }
  .composer textarea, .composer-mirror { min-height: 40px; }
}

/* =========================================================
   授業管理・課題プロジェクト
   ========================================================= */
.link { color: var(--accent); font-weight: 600; }
.link:hover { text-decoration: underline; }
.section-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; margin-bottom: 14px; color: var(--text); list-style: none; }
.section-title::-webkit-details-marker { display: none; }
.section-title .count { font-size: 12px; font-weight: 600; color: var(--text-3); background: var(--surface-2); border-radius: 10px; padding: 1px 8px; }
.input-suffix { position: relative; }
.input-suffix .input { padding-right: 52px; }
.input-suffix .suffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text-3); pointer-events: none; }

.kind-badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 700; flex: none; }
.kind-badge .i { width: 12px; height: 12px; }
.kind-badge.is-pending { background: var(--warn-soft); color: var(--warn); }
.pc-course { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--text-2); margin-bottom: 6px; }
.sub-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; flex: none; font-size: 11.5px; font-weight: 600; color: var(--ok); }
.sub-badge .i { width: 12px; height: 12px; }
.chip-assignment { background: rgba(255,255,255,.18); color: #fff; font-weight: 700; }
a.chip-assignment:hover { background: rgba(255,255,255,.28); }
.chip-submitted { background: var(--ok-soft); color: var(--ok); font-weight: 700; }
.asset-thumb .chip-submitted { background: rgba(31,191,117,.9); color: #fff; }
.submit-hint { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; color: var(--text-2); }
.submit-hint .i { color: var(--ok); }
.banner-assignment { border-color: rgba(255,181,71,.35); background: linear-gradient(135deg, rgba(255,181,71,.12), rgba(139,123,255,.1)); }
.banner-assignment > .i { color: var(--warn); }
.banner > p { flex: 1; min-width: 0; }
a.banner { color: inherit; transition: transform .2s var(--ease), border-color .2s; }
a.banner:hover { transform: translateY(-1px); border-color: rgba(255,181,71,.6); }
.assignment-request .cover { width: 40px; height: 40px; border-radius: 11px; font-size: 20px; flex: none; }
.request-note { margin-top: 6px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13px; line-height: 1.6; color: var(--text-2); }
.assignment-request .m-name a:hover { color: var(--accent); }

.course-card { display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 16px; }
.course-head { display: flex; align-items: center; gap: 12px; }
.course-icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--grad); color: #fff; flex: none; box-shadow: 0 8px 20px -8px rgba(139,123,255,.7); }
.course-name { display: block; font-weight: 700; font-size: 15.5px; }
.course-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.course-stat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.course-stat > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.course-stat b { font-size: 22px; font-weight: 800; line-height: 1.2; }
.course-stat b small { font-size: 13px; font-weight: 600; color: var(--text-3); }
.course-stat > span:last-child > small { font-size: 12.5px; color: var(--text-3); }
.course-stat .stat-icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.course-stat .stat-icon.is-ok { background: var(--ok-soft); color: var(--ok); }
.course-stat .stat-icon.is-warn { background: var(--warn-soft); color: var(--warn); }
.course-stat:first-child b { font-size: 15px; }
.assignment-list { display: flex; flex-direction: column; gap: 10px; }
.assignment-row { display: grid; grid-template-columns: auto minmax(0, 1.4fr) minmax(160px, 1fr) auto; align-items: center; gap: 16px; padding: 14px 18px; }
.assignment-row > .cover { width: 48px; height: 48px; border-radius: 13px; font-size: 24px; }
.ar-title { font-weight: 700; font-size: 15px; }
.ar-members { display: flex; align-items: center; gap: 8px; margin-top: 6px; min-width: 0; }
.ar-progress { display: flex; flex-direction: column; gap: 6px; }
.ar-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
@media (max-width: 860px) {
  .course-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .course-stat { padding: 14px; gap: 10px; }
  .assignment-row { grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; padding: 14px; }
  .ar-progress { grid-column: 1 / -1; }
  .ar-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .assignment-request { flex-wrap: wrap; }
  .request-actions { width: 100%; justify-content: flex-end; }
  .banner { flex-wrap: wrap; }
}

/* =========================================================
   タスクの表示切り替え（ボード / ToDo / ガント / カレンダー）
   ========================================================= */
.show-sm { display: none; }
@media (max-width: 640px) { .show-sm { display: inline; } }
.task-views-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.task-views-bar .segmented { flex: none; }
.seg-sm button, .seg-sm a { height: 28px !important; padding: 0 12px !important; font-size: 12.5px !important; }
.tv-root { animation: rise .4s var(--ease) both; }
.tv-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.tv-help { margin-top: 10px; text-align: center; }
.chip-toggle { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font-size: 12.5px; font-weight: 600; transition: all .2s; }
.chip-toggle:hover { border-color: var(--accent); color: var(--text); }
.chip-toggle.is-on { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.tv-project { width: 16px; height: 16px; border-radius: 5px; font-size: 9px; flex: none; }

/* ToDo */
.tv-add { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; margin-bottom: 14px; transition: border-color .2s, box-shadow .2s; }
.tv-add:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.tv-add-icon { color: var(--accent); display: grid; }
.tv-add-input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 15px; height: 36px; }
.tv-add-date { border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); height: 34px; padding: 0 8px; font-size: 13px; color: var(--text-2); }
.tv-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.tv-list .task-group:first-of-type { margin-top: 16px; }
.tv-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; transition: background .15s; }
.tv-row + .tv-row { border-top: 1px solid var(--line); }
.tv-row:hover { background: var(--surface-2); }
.card > .tv-row:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.card > .tv-row:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.card > .tv-row:only-child { border-radius: var(--r-lg); }
.tv-row.is-new { animation: pop-in .5s var(--spring) both; }
.tv-main { flex: 1; min-width: 0; }
.tv-title { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-row-done .tv-title { text-decoration: line-through; color: var(--text-3); }
.s-row-pending { opacity: .65; }
.tv-sub { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-3); margin-top: 2px; flex-wrap: wrap; }
.tv-sub > span { display: inline-flex; align-items: center; gap: 4px; }
.tv-pct { font-size: 12px; color: var(--text-3); width: 36px; text-align: right; flex: none; }
.check-btn:disabled { opacity: .5; cursor: default; }
@media (max-width: 640px) {
  .tv-row { gap: 10px; padding: 12px; flex-wrap: wrap; }
  .tv-row .tv-main { flex-basis: calc(100% - 40px); }
  .tv-row .chip, .tv-row .avatar-stack, .tv-row .avatar-empty { margin-left: 36px; }
  .tv-row .avatar-stack, .tv-row .avatar-empty { margin-left: 0; }
  .tv-row .tv-pct { margin-left: auto; }
  .tv-add { padding-left: 12px; }
  .tv-add-date { width: 120px; }
}

/* ガントチャート */
.gantt { --g-side: 240px; --g-row: 44px; }
@media (max-width: 640px) { .gantt { --g-side: 128px; --g-row: 42px; } }
.g-scroll { position: relative; overflow: auto; max-height: min(70vh, 720px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overscroll-behavior-x: contain; }
.g-canvas { position: relative; min-width: 100%; }
.g-head { position: sticky; top: 0; z-index: 4; display: flex; background: var(--surface); border-bottom: 1px solid var(--line); }
.g-corner { position: sticky; left: 0; z-index: 2; width: var(--g-side); flex: none; display: flex; align-items: flex-end; gap: 6px; padding: 0 14px 10px; font-size: 12px; font-weight: 700; color: var(--text-2); background: var(--surface); border-right: 1px solid var(--line); }
.g-scale { position: relative; height: 52px; flex: none; }
.g-months { position: absolute; inset: 0 0 auto; height: 22px; }
.g-month { position: absolute; top: 0; height: 22px; border-left: 1px solid var(--line); }
.g-month span { position: sticky; left: calc(var(--g-side) + 8px); display: inline-block; padding: 4px 8px; font-size: 11.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.g-days { position: absolute; left: 0; right: 0; top: 22px; height: 30px; }
.g-days.is-hidden { display: none; }
.g-day { position: absolute; top: 0; height: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; font-size: 11px; color: var(--text-2); border-left: 1px solid var(--line); }
.g-day b { font-weight: 700; }
.g-day small { font-size: 9px; color: var(--text-3); }
.g-day.is-weekend { color: var(--text-3); }
.g-day.is-sun b { color: var(--danger); }
.g-day.is-today { background: var(--accent); color: #fff; border-radius: 8px; }
.g-day.is-today small { color: rgba(255,255,255,.8); }
.g-day.is-today b { color: #fff; }
.g-body { position: relative; }
.g-bg { position: absolute; top: 0; bottom: 0; left: var(--g-side); pointer-events: none; }
.g-weekend { position: absolute; top: 0; bottom: 0; background: var(--surface-2); opacity: .7; }
.g-monthline { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); }
.g-today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); opacity: .8; z-index: 1; }
.g-today span { display: none; }
.g-row { position: relative; display: flex; height: var(--g-row); border-bottom: 1px solid var(--line); }
.g-row:hover .g-name { background: var(--surface-2); }
.g-name { position: sticky; left: 0; z-index: 3; width: var(--g-side); flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 14px; background: var(--surface); border-right: 1px solid var(--line); cursor: pointer; font-size: 13.5px; font-weight: 600; }
.g-title { flex: 1; min-width: 0; }
.g-name .avatar-stack, .g-name .avatar-empty { flex: none; }
@media (max-width: 640px) { .g-name .avatar-stack, .g-name .avatar-empty, .g-name .tv-project { display: none; } .g-name { padding: 0 8px 0 10px; font-size: 12.5px; } }
.g-track { position: relative; flex: 1; }
.g-track.is-empty { cursor: crosshair; }
.g-hint { position: sticky; left: calc(var(--g-side) + 12px); display: inline-flex; align-items: center; height: 100%; padding-left: 12px; font-size: 12px; color: var(--text-3); pointer-events: none; }
.g-bar { position: absolute; top: 9px; bottom: 9px; z-index: 2; min-width: 8px; border-radius: 8px; background: var(--bar-bg, var(--accent-soft)); border: 1px solid var(--bar-c, var(--accent)); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: box-shadow .2s, transform .2s var(--spring); }
.g-bar:hover { box-shadow: 0 6px 18px -6px var(--bar-c, var(--accent)); }
.g-bar.is-grabbed, .g-bar.is-dragging { cursor: grabbing; transform: scaleY(1.12); box-shadow: 0 10px 26px -8px var(--bar-c, var(--accent)); transition: box-shadow .2s, transform .2s var(--spring); z-index: 5; }
.g-bar.is-point { border-style: dashed; }
.g-bar.is-late { --bar-c: var(--danger); --bar-bg: var(--danger-soft); }
.g-bar.is-ghost { background: var(--accent-soft); border: 1px dashed var(--accent); pointer-events: none; }
.g-fill { position: absolute; inset: 0 auto 0 0; border-radius: 7px 0 0 7px; background: var(--bar-c, var(--accent)); opacity: .55; pointer-events: none; }
.g-label { position: absolute; left: 10px; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.g-label.is-outside { left: calc(100% + 8px); right: auto; overflow: visible; color: var(--text-2); }
.g-handle { position: absolute; top: -4px; bottom: -4px; width: 12px; cursor: ew-resize; z-index: 1; }
.g-handle.is-start { left: -6px; }
.g-handle.is-end { right: -6px; }
.g-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 14px; margin: -7px 0 0 -2px; border-radius: 2px; background: var(--bar-c, var(--accent)); opacity: 0; transition: opacity .2s; }
.g-bar:hover .g-handle::after { opacity: .9; }
.g-tip { position: absolute; top: -2px; z-index: 6; transform: translateY(-100%); padding: 3px 8px; border-radius: 7px; background: var(--text); color: var(--bg); font-size: 11.5px; font-weight: 700; white-space: nowrap; pointer-events: none; }
.g-sep { position: sticky; left: 0; padding: 14px 14px 6px; font-size: 12px; font-weight: 700; color: var(--text-2); border-bottom: 1px solid var(--line); width: max-content; }
.s-bar-todo { --bar-c: var(--text-3); --bar-bg: var(--surface-3); }
.s-bar-doing { --bar-c: var(--info); --bar-bg: var(--info-soft); }
.s-bar-done { --bar-c: var(--ok); --bar-bg: var(--ok-soft); }
.s-bar-pending { --bar-c: var(--text-3); --bar-bg: var(--surface-2); opacity: .6; }

/* カレンダー */
.cal-title { font-size: 18px; font-weight: 800; min-width: 120px; text-align: center; }
.cal-grid { overflow: hidden; }
.cal-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.cal-dow span { padding: 8px 0; text-align: center; font-size: 12px; font-weight: 700; color: var(--text-3); }
.cal-dow .is-sun, .cal-day.is-sun .cal-num { color: var(--danger); }
.cal-dow .is-sat, .cal-day.is-sat .cal-num { color: var(--info); }
.cal-week { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: 30px repeat(var(--lanes), 24px) 20px; row-gap: 3px; min-height: 118px; border-bottom: 1px solid var(--line); }
.cal-week:last-child { border-bottom: 0; }
.cal-day { display: grid; grid-template-rows: subgrid; padding: 0 6px; border-right: 1px solid var(--line); cursor: pointer; transition: background .15s; }
.cal-day:nth-child(7) { border-right: 0; }
.cal-day:hover { background: var(--surface-2); }
.cal-day.is-other { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.cal-day.is-other .cal-num { opacity: .45; }
.cal-day.is-selected { background: var(--accent-soft); }
.cal-day.is-drop { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.cal-num { align-self: center; justify-self: start; display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 12px; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.cal-day.is-today .cal-num { background: var(--accent); color: #fff !important; opacity: 1; }
.cal-more { align-self: center; font-size: 11px; font-weight: 700; color: var(--text-3); }
.cal-bar { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; min-width: 0; margin: 0 3px; padding: 0 8px; border-radius: 7px; background: var(--bar-bg); color: var(--text); border-left: 3px solid var(--bar-c); font-size: 12px; font-weight: 600; line-height: 24px; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .15s var(--spring), box-shadow .15s; }
.cal-bar:hover { box-shadow: 0 4px 14px -6px var(--bar-c); }
.cal-bar.is-late { --bar-c: var(--danger); --bar-bg: var(--danger-soft); }
.cal-bar.cont-l { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.cal-bar.cont-r { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.s-bar-done.cal-bar span:last-child { text-decoration: line-through; opacity: .7; }
.cal-bar.is-grabbed, .cal-bar.is-dragging { transform: scale(1.04); box-shadow: 0 10px 26px -8px var(--bar-c); z-index: 3; }
.cal-grid.is-dragging .cal-bar { pointer-events: none; }
.cal-proj { font-size: 10px; flex: none; }
.cal-daylist { margin-top: 16px; }
.cal-daylist-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
@media (max-width: 640px) {
  .cal-week { grid-template-rows: 26px repeat(var(--lanes), 18px) 16px; row-gap: 2px; min-height: 92px; }
  .cal-day { padding: 0 2px; }
  .cal-num { min-width: 20px; height: 20px; font-size: 11.5px; }
  .cal-bar { margin: 0 1px; padding: 0 3px; font-size: 10px; line-height: 18px; border-left-width: 2px; border-radius: 4px; }
  .cal-bar .cal-proj { display: none; }
  .cal-more { font-size: 10px; }
  .cal-title { font-size: 16px; min-width: 96px; }
}
@media (max-width: 640px) { .form-grid.date-pair { grid-template-columns: 1fr 1fr; gap: 10px; } }
.page.is-wide { max-width: 1280px !important; }
@media (max-width: 640px) {
  .tv-add { flex-wrap: wrap; row-gap: 6px; }
  .tv-add-input { flex-basis: calc(100% - 34px); }
  .tv-add-date { flex: 1; width: auto; }
}
.g-month { overflow: hidden; }
.g-add-row .g-name { color: var(--accent); }
.g-add-row .g-name .i { flex: none; }
.g-add-row .g-track { background: repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, var(--accent) 6%, transparent) 8px 16px); }
.g-add-row:hover .g-hint { color: var(--accent); }

/* メールアドレス未登録 */
.no-email-body { padding-top: 24px; }
.no-email-body h3 { font-size: 17px; text-align: center; margin-bottom: 6px; }
.no-email-body > p.muted { text-align: center; }
.no-email-art { width: 60px; height: 60px; border-radius: 18px; margin: 0 auto 14px; background: var(--warn-soft); color: var(--warn); }
.no-email-list { list-style: none; margin: 16px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.no-email-list li { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.no-email-list li > span { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--warn-soft); color: var(--warn); flex: none; }
.no-email-list b { display: block; font-size: 14px; }
.no-email-list small { display: block; font-size: 12.5px; color: var(--text-2); line-height: 1.6; margin-top: 2px; }
.no-email { color: var(--warn); font-weight: 600; }
.forgot-note { display: flex; gap: 6px; margin-top: 18px; line-height: 1.6; }
.forgot-note .i { flex: none; margin-top: 3px; }
.no-email-body + .modal-foot .btn { flex: 1; }

/* =========================================================
   企画（プロジェクトのタブ）
   ========================================================= */
.board-create { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1200px) { .board-create { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.board-new { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px; text-align: left; overflow: hidden; }
.board-new::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 0% 0%, var(--k) 0%, transparent 60%); opacity: .14; transition: opacity .3s; }
.board-new:hover::before { opacity: .24; }
.bn-art { position: relative; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--k); color: #fff; flex: none; box-shadow: 0 10px 24px -10px var(--k); transition: transform .35s var(--spring); }
.bn-art .i { width: 26px; height: 26px; }
.board-new:hover .bn-art { transform: rotate(-6deg) scale(1.06); }
.bn-text { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bn-text b { font-size: 15.5px; }
.bn-text small { font-size: 12.5px; color: var(--text-2); }
.bn-plus { position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); flex: none; transition: all .2s; }
.board-new:hover .bn-plus { background: var(--k); color: #fff; }
.k-storyboard { --k: #ff5e8a; }
.k-mindmap { --k: #8b7bff; }
.k-whiteboard { --k: #ffb547; }
.k-notebook { --k: #2fd6a0; }
.grid-boards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.board-card { display: flex; gap: 14px; padding: 16px; align-items: center; }
.bc-art { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--k) 16%, transparent); color: var(--k); }
.bc-art .i { width: 28px; height: 28px; }
.bc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bc-kind { font-size: 11.5px; font-weight: 700; color: var(--text-3); letter-spacing: .02em; }
.bc-title { font-weight: 700; font-size: 15px; }
.bc-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); margin-top: 2px; }
@media (max-width: 760px) { .board-create { grid-template-columns: 1fr; gap: 10px; } .board-new { padding: 14px; } .bn-art { width: 44px; height: 44px; } }

/* =========================================================
   企画の編集画面（共通）
   ========================================================= */
.is-board { background: var(--bg); }
.bd { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.bd-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-height: 60px; border-bottom: 1px solid var(--line); background: var(--surface); position: relative; z-index: 30; }
.bd-kind { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--k); color: #fff; flex: none; }
.bd-kind .i { width: 20px; height: 20px; }
.bd-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bd-crumb { font-size: 11.5px; color: var(--text-3); }
.bd-crumb:hover { color: var(--text); }
.bd-title { font-size: 16px; font-weight: 800; border: 0; background: transparent; outline: none; padding: 1px 6px; margin-left: -6px; border-radius: 7px; width: 100%; min-width: 0; color: var(--text); }
input.bd-title:hover { background: var(--surface-2); }
input.bd-title:focus { background: var(--surface-2); box-shadow: 0 0 0 2px var(--accent-soft); }
.bd-save { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.bd-save.is-saved { color: var(--ok); animation: fade-out 2.5s 1.2s forwards; }
.bd-save.is-error { color: var(--danger); }
@keyframes fade-out { to { opacity: 0; } }
.bd-present { display: inline-flex; align-items: center; gap: 6px; }
.bd-live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); animation: pulse-warn 2s infinite; }
.bd-undo { display: flex; gap: 2px; }
.bd-chat-toggle { position: relative; }
.bd-chat-toggle.is-active { --btn-bg: var(--accent-soft); --btn-fg: var(--accent); --btn-bd: transparent; }
.bd-unread { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent-2); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.bd-readonly { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 13px; background: var(--warn-soft); color: var(--text); }
.bd-readonly span { flex: 1; }
.bd-body { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 0; transition: grid-template-columns .3s var(--ease); }
.chat-open .bd-body { grid-template-columns: minmax(0, 1fr) 340px; }
.bd-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.bd-toolbar { position: absolute; z-index: 20; left: 50%; bottom: 18px; transform: translateX(-50%); width: max-content; display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); max-width: calc(100% - 24px); overflow-x: auto; scrollbar-width: none; }
.bd-toolbar::-webkit-scrollbar { display: none; }
.bd-toolbar > button { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 11px; border-radius: 11px; font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; flex: none; transition: background .15s, color .15s; }
.bd-toolbar > button:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.bd-toolbar > button.is-active { background: var(--accent); color: #fff; }
.bd-toolbar > button:disabled { opacity: .35; }
.bd-tsep { width: 1px; height: 22px; background: var(--line-2); margin: 0 4px; flex: none; }
.show-sm-flex { display: none !important; }
.bd-zoom { position: absolute; z-index: 20; right: 14px; bottom: 18px; display: flex; align-items: center; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: 0 8px 24px -10px rgba(0,0,0,.4); }
.bd-zoom button { height: 30px; min-width: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--text-2); }
.bd-zoom button:hover { background: var(--surface-2); color: var(--text); }
.bd-zoom-val { min-width: 48px !important; font-family: var(--mono); }
.bd-hint { position: absolute; z-index: 5; left: 16px; top: 12px; font-size: 11.5px; color: var(--text-3); pointer-events: none; max-width: 60%; }
.bd-palette { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); }
.bd-palette button { width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); transition: transform .15s var(--spring); }
.bd-palette button:hover { transform: scale(1.15); }
.bd-palette .is-none { background: var(--surface-2); color: var(--text-3); display: grid; place-items: center; }

@media (max-width: 860px) {
  .bd-head { padding: 8px 10px; gap: 8px; min-height: 54px; }
  .bd-kind { display: none; }
  .bd-save { display: none; }
  .bd-hint { display: none; }
  .show-sm-flex { display: inline-flex !important; }
  .bd-toolbar { bottom: calc(12px + var(--safe-b)); }
  .bd-toolbar > button span:not(.mm-swatch) { display: none; }
  .bd-undo.hide-sm { display: none; }
  .bd-toolbar > button { padding: 0 10px; }
  .bd-zoom { bottom: auto; top: 12px; right: 10px; }
  .chat-open .bd-body { grid-template-columns: minmax(0, 1fr) 0; }
  .bd-chat { position: fixed; inset: 0; z-index: 80; transform: translateY(100%); transition: transform .35s var(--ease); width: auto !important; }
  .chat-open .bd-chat { transform: none; }
}

/* チャット */
.bd-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--surface); border-left: 1px solid var(--line); width: 340px; }
.bd-chat-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.bd-chat-head h2 { flex: 1; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.bd-chat-head .count { font-size: 12px; color: var(--text-3); background: var(--surface-2); border-radius: 10px; padding: 1px 8px; }
.bd-chat-list { flex: 1; overflow-y: auto; padding: 12px 10px; overscroll-behavior: contain; }
.bd-chat-empty { text-align: center; padding: 30px 16px; color: var(--text-3); font-size: 13px; line-height: 1.7; }
.bd-chat-empty .empty-art { width: 52px; height: 52px; border-radius: 16px; margin: 0 auto 12px; }
.bmsg { position: relative; display: flex; gap: 10px; padding: 6px 8px; border-radius: 12px; }
.bmsg:not(.is-compact) { margin-top: 8px; }
.bmsg:hover { background: var(--surface-2); }
.bmsg.is-new { animation: rise .35s var(--ease) both; }
.bmsg-gap { width: 32px; flex: none; }
.bmsg-body { flex: 1; min-width: 0; }
.bmsg-head { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 2px; }
.bmsg-head .role-badge { font-size: 10px; }
.bmsg-text { font-size: 14px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.bmsg-text a { color: var(--accent); text-decoration: underline; }
.bmsg-del { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; opacity: 0; transition: opacity .15s; }
.bmsg:hover .bmsg-del { opacity: 1; }
@media (hover: none) { .bmsg-del { opacity: .5; } }
.bd-composer { position: relative; padding: 10px 12px calc(10px + var(--safe-b)); border-top: 1px solid var(--line); }
.bd-composer .mention-menu { left: 12px; right: 12px; }
.bd-composer-box { display: flex; align-items: flex-end; gap: 6px; padding: 6px 6px 6px 12px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface-2); transition: border-color .2s, box-shadow .2s; }
.bd-composer-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.bd-composer-box textarea { flex: 1; min-height: 36px; max-height: 160px; resize: none; border: 0; background: transparent; outline: none; font-size: 15px; line-height: 1.5; padding: 7px 0; }
.btn-icon { width: 38px; height: 38px; padding: 0; justify-content: center; flex: none; }
.bd-composer-hint { font-size: 11px; color: var(--text-3); padding: 6px 4px 0; }
.mention-group { background: var(--accent-soft); color: var(--accent); }

/* =========================================================
   マインドマップ
   ========================================================= */
.mm { position: absolute; inset: 0; overflow: hidden; outline: none; cursor: grab; touch-action: none; background-color: var(--bg); background-image: radial-gradient(circle, var(--line-2) 1px, transparent 1.2px); }
.mm.is-panning { cursor: grabbing; }
.mm-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.mm-links { position: absolute; left: 0; top: 0; max-width: none; max-height: none; overflow: visible; pointer-events: none; }
.mm-links path { fill: none; stroke-linecap: round; opacity: .85; }
.mm-nodes { position: absolute; left: 0; top: 0; }
.mm-node { position: absolute; left: 0; top: 0; width: max-content; max-width: 300px; padding: 6px 4px 5px; font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--text); cursor: pointer; user-select: none; -webkit-user-select: none; transition: transform .28s var(--ease), box-shadow .2s, background .2s; white-space: pre-wrap; overflow-wrap: anywhere; }
.mm-node.is-new { transition: none; animation: pop-in .35s var(--spring) both; }
.mm-node.d-0 { padding: 14px 24px; border-radius: 18px; font-size: 20px; font-weight: 800; color: #fff; background: var(--grad); box-shadow: 0 14px 34px -12px rgba(139,123,255,.8); }
.mm-node.d-1 { padding: 9px 16px; border-radius: 13px; font-size: 16px; font-weight: 700; background: var(--surface); border: 2px solid var(--c); box-shadow: 0 8px 20px -12px var(--c); }
.mm-node.d-2, .mm-node.d-3 { padding: 4px 6px 6px; border-radius: 6px; }
.mm-text { min-width: 1em; outline: none; }
.mm-text:empty::before { content: "アイデアを入力"; color: var(--text-3); font-weight: 500; }
.mm-node.d-0 .mm-text:empty::before { color: rgba(255,255,255,.7); }
.mm-node.is-selected { box-shadow: 0 0 0 3px var(--accent), 0 10px 26px -10px rgba(139,123,255,.7); }
.mm-node.d-2.is-selected, .mm-node.d-3.is-selected { background: var(--accent-soft); }
.mm-node.is-editing { cursor: text; user-select: text; -webkit-user-select: text; }
.mm-node.is-editing .mm-text { user-select: text; -webkit-user-select: text; }
.mm-node.is-drop { box-shadow: 0 0 0 3px var(--ok), 0 0 0 8px var(--ok-soft); }
.mm-node.is-dragging { opacity: .35; }
.mm-node.is-grabbed { transform-origin: center; filter: brightness(1.1); }
.mm-ghost { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; opacity: .85; transition: none !important; }
.mm-fold { position: absolute; top: 50%; right: -26px; transform: translateY(-50%); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--surface); border: 1.5px solid var(--c); color: var(--c); font-size: 11px; font-weight: 800; line-height: 1; display: grid; place-items: center; }
.mm-fold.is-folded { background: var(--c); color: #fff; }
.mm-swatch { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.mm-toolbar { position: absolute; }

/* =========================================================
   ホワイトボード
   ========================================================= */
.wb { position: absolute; inset: 0; overflow: hidden; outline: none; touch-action: none; color-scheme: light; color: #1f1f2e; background-color: #f6f6f9; background-image: radial-gradient(circle, #cfcfdc 1.1px, transparent 1.3px); }
.wb[data-mode="hand"], .wb.is-space { cursor: grab; }
.wb.is-panning { cursor: grabbing; }
.wb[data-mode="sticky"], .wb[data-mode="text"], .wb[data-mode="rect"], .wb[data-mode="ellipse"], .wb[data-mode="arrow"], .wb[data-mode="pen"] { cursor: crosshair; }
.wb.is-drop { box-shadow: inset 0 0 0 3px var(--accent); }
.wb-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.wb-item { position: absolute; box-sizing: border-box; user-select: none; -webkit-user-select: none; }
.wb-text { width: 100%; height: 100%; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden; }
.wb-item.is-editing .wb-text { user-select: text; -webkit-user-select: text; cursor: text; overflow: auto; }
.t-sticky { background: var(--c); border-radius: 4px; padding: 18px; font-size: 18px; line-height: 1.45; font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 12px 24px -12px rgba(0,0,0,.35); display: flex; }
.t-sticky .wb-text { display: flex; align-items: center; justify-content: center; text-align: center; }
.t-sticky .wb-text:empty::before { content: "メモを入力"; color: rgba(0,0,0,.3); }
.t-text { padding: 4px 6px; color: var(--c); font-weight: 600; line-height: 1.35; }
.t-text .wb-text:empty::before { content: "テキスト"; color: rgba(0,0,0,.3); }
.t-rect, .t-ellipse { border: 3px solid var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); display: flex; align-items: center; justify-content: center; padding: 10px; font-size: 16px; font-weight: 600; text-align: center; color: #1f1f2e; }
.t-rect { border-radius: 8px; }
.t-ellipse { border-radius: 50%; }
.t-rect .wb-text, .t-ellipse .wb-text { display: flex; align-items: center; justify-content: center; }
.t-image img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 4px; pointer-events: none; }
.t-image { box-shadow: 0 10px 26px -14px rgba(0,0,0,.45); }
.t-arrow, .t-pen { pointer-events: none; }
.t-arrow svg, .t-pen svg { overflow: visible; display: block; }
.t-arrow path, .t-pen path { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: stroke; }
.t-arrow path.hit, .t-pen path.hit { stroke: transparent; }
.wb[data-mode="pen"] .t-arrow path, .wb[data-mode="pen"] .t-pen path { pointer-events: none; }
.wb-sel { position: absolute; left: 0; top: 0; pointer-events: none; }
.wb-outline { position: absolute; border: calc(2px / var(--zoom, 1)) solid #7c6cff; border-radius: calc(4px / var(--zoom, 1)); margin: calc(-3px / var(--zoom, 1)); box-sizing: content-box; padding: calc(1px / var(--zoom, 1)); }
.wb-handle { position: absolute; width: calc(14px / var(--zoom, 1)); height: calc(14px / var(--zoom, 1)); margin: calc(-7px / var(--zoom, 1)) 0 0 calc(-7px / var(--zoom, 1)); border-radius: calc(4px / var(--zoom, 1)); background: #fff; border: calc(2px / var(--zoom, 1)) solid #7c6cff; pointer-events: auto; cursor: nwse-resize; touch-action: none; }
.wb-handle.is-point { border-radius: 50%; cursor: move; }
.wb-ghost { position: absolute; border: 2px dashed #7c6cff; background: rgba(124,108,255,.08); pointer-events: none; }
.wb-ghost.is-line { border: 0; background: #7c6cff; }
.wb-marquee { position: absolute; z-index: 15; border: 1px solid #7c6cff; background: rgba(124,108,255,.1); pointer-events: none; }
.wb .bd-toolbar, .wb .bd-zoom, .wb .wb-ctx { color: var(--text); color-scheme: normal; }
.wb-tools { left: 16px; bottom: auto; top: 50%; transform: translateY(-50%); flex-direction: column; overflow: visible; }
.wb-tools > button { width: 42px; height: 42px; padding: 0; justify-content: center; }
.wb-ctx { position: absolute; z-index: 25; display: flex; align-items: center; gap: 3px; padding: 5px; border-radius: 13px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); animation: drop-in .18s var(--ease); }
.wb-ctx > button { height: 32px; min-width: 32px; padding: 0 7px; border-radius: 9px; display: inline-grid; place-items: center; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.wb-ctx > button:hover { background: var(--surface-2); color: var(--text); }
.wb-color { width: 24px !important; min-width: 24px !important; height: 24px !important; padding: 0 !important; border-radius: 50% !important; background: var(--c) !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); transition: transform .15s var(--spring); }
.wb-color.is-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.wb-color:hover { transform: scale(1.15); }
.wb .bd-hint { color: #8a8aa0; }
@media (max-width: 860px) {
  .wb-tools { left: 50%; top: auto; bottom: calc(12px + var(--safe-b)); transform: translateX(-50%); flex-direction: row; overflow-x: auto; }
  .wb-tools > button { width: 40px; height: 40px; }
}

/* =========================================================
   ノート
   ========================================================= */
.nb { position: absolute; inset: 0; display: flex; flex-direction: column; }
.nb.is-drop { box-shadow: inset 0 0 0 3px var(--accent); }
.nb-toolbar { position: relative; left: auto; bottom: auto; transform: none; margin: 12px auto 0; flex: none; }
.nb-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 28px 24px 0; }
.nb-doc { max-width: 760px; margin: 0 auto; }
.nb-tail { max-width: 760px; margin: 0 auto; height: 40vh; cursor: text; }
.nb-block { position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 3px 0 3px 4px; border-radius: 8px; }
.nb-block.is-dragging { opacity: .4; }
.nb-block.drop-before { box-shadow: 0 -2px 0 var(--accent); }
.nb-block.drop-after { box-shadow: 0 2px 0 var(--accent); }
.nb-grip { position: absolute; left: -34px; top: 5px; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--text-3); opacity: 0; cursor: grab; touch-action: none; transition: opacity .15s, background .15s; }
.nb-block:hover .nb-grip, .nb-block:focus-within .nb-grip { opacity: 1; }
.nb-grip:hover { background: var(--surface-2); color: var(--text); }
.nb-text { flex: 1; min-width: 0; outline: none; font-size: 16px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; padding: 1px 2px; }
.nb-text:empty::before { content: attr(data-ph); color: var(--text-3); pointer-events: none; }
.nb-text:not(:focus):empty::before { opacity: 0; }
.nb-block:only-child .nb-text:empty::before { opacity: 1; }
.k-h1 .nb-text { font-size: 30px; font-weight: 800; line-height: 1.35; letter-spacing: -.01em; margin-top: 14px; }
.k-h2 .nb-text { font-size: 21px; font-weight: 800; line-height: 1.45; margin-top: 10px; }
.k-h1 .nb-grip { top: 22px; }
.k-h2 .nb-grip { top: 14px; }
.nb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text); margin: 12px 6px 0 8px; flex: none; }
.nb-check { width: 20px; height: 20px; margin: 5px 2px 0 4px; border-radius: 6px; border: 2px solid var(--line-2); display: grid; place-items: center; color: transparent; flex: none; transition: all .2s var(--spring); }
.nb-check .i { width: 12px; height: 12px; stroke-width: 3.2; }
.is-done .nb-check { background: var(--ok); border-color: var(--ok); color: #fff; }
.is-done .nb-text { color: var(--text-3); text-decoration: line-through; }
.k-quote .nb-text { border-left: 4px solid var(--accent); padding-left: 14px; color: var(--text-2); font-style: normal; background: var(--accent-soft); border-radius: 0 10px 10px 0; padding: 8px 14px; }
.nb-divider { flex: 1; padding: 12px 0; }
.nb-divider hr { border: 0; border-top: 2px solid var(--line-2); margin: 0; }
.nb-figure { flex: 1; margin: 8px 0; display: flex; flex-direction: column; align-items: center; }
.nb-img-wrap { position: relative; max-width: 100%; }
.nb-img-wrap img { display: block; width: 100%; border-radius: 10px; box-shadow: 0 12px 30px -16px rgba(0,0,0,.5); }
.nb-resize { position: absolute; right: -6px; top: 50%; width: 10px; height: 46px; margin-top: -23px; border-radius: 5px; background: var(--surface); border: 2px solid var(--accent); cursor: ew-resize; opacity: 0; touch-action: none; transition: opacity .15s; }
.nb-block:hover .nb-resize { opacity: 1; }
@media (hover: none) { .nb-resize { opacity: .9; } }
.nb-caption { margin-top: 8px; font-size: 13px; color: var(--text-2); text-align: center; outline: none; min-width: 120px; white-space: pre-wrap; }
.nb-caption:empty::before { content: attr(data-ph); color: var(--text-3); }
.nb-caption:not(:focus):empty::before { opacity: 0; }
.nb-block:hover .nb-caption:empty::before { opacity: 1; }
.nb-menu { position: absolute; z-index: 40; min-width: 180px; padding: 6px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow-lg); animation: menu-in .25s var(--spring) both; }
.nb-menu .menu-item.is-on { color: var(--accent); }
.nb-toolbar > button span { font-size: 12.5px; }
@media (max-width: 860px) {
  .nb-scroll { padding: 18px 16px 0 34px; }
  .nb-grip { opacity: .55; left: -30px; }
  .nb-toolbar { order: 2; margin: 0 auto calc(10px + var(--safe-b)); }
  .k-h1 .nb-text { font-size: 25px; }
}
.mm-toolbar { overflow: visible; }
.wb-world svg, .wb-world img { max-width: none; }

/* =========================================================
   絵コンテ
   ========================================================= */
.sb { position: absolute; inset: 0; display: flex; flex-direction: column; }
.sb-bar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--surface); position: relative; z-index: 5; }
.sb-stats { display: flex; gap: 16px; font-size: 13px; color: var(--text-2); }
.sb-stats b { color: var(--text); font-size: 16px; font-weight: 800; }
.sb-bar .menu { right: 0; }
.sb-scroll { flex: 1; min-height: 0; overflow: auto; padding: 18px 18px 60px; }
.sb-sheet { max-width: 1240px; margin: 0 auto; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.sb-row { display: grid; grid-template-columns: 96px 56px 300px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr) 84px 44px; }
.sb-row > * { border-right: 1px solid var(--line); min-width: 0; }
.sb-row > *:last-child { border-right: 0; }
.sb-headrow { background: var(--surface-2); font-size: 12px; font-weight: 700; color: var(--text-2); position: sticky; top: 0; z-index: 2; }
.sb-headrow > div { padding: 10px 12px; text-align: center; }
.sb-cut { border-top: 1px solid var(--line); background: var(--surface); transition: background .2s; }
.sb-cut.is-new { animation: rise .35s var(--ease) both; }
.sb-cut.is-dragging { opacity: .4; }
.sb-cut.drop-before { box-shadow: 0 -3px 0 var(--accent) inset; }
.sb-cut.drop-after { box-shadow: 0 3px 0 var(--accent) inset; }
.sb-no { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 4px; }
.sb-num { font-size: 22px; font-weight: 800; font-family: var(--mono); }
.sb-grip { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); cursor: grab; touch-action: none; }
.sb-grip:hover { background: var(--surface-2); color: var(--text); }
.sb-pic { position: relative; padding: 10px; }
.sb-pic img, .sb-pic-empty { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; background: #fff; object-fit: contain; border: 1px solid var(--line-2); }
.sb-pic img { cursor: pointer; }
.sb-pic.is-loading::after { content: ""; position: absolute; inset: 10px; border-radius: 8px; background: rgba(0,0,0,.35); animation: pulse-warn 1s infinite; }
.sb-pic.is-drop img, .sb-pic.is-drop .sb-pic-empty { outline: 3px solid var(--accent); }
.sb-pic-empty { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--surface-2); border-style: dashed; }
.sb-pic-empty button { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.sb-pic-empty button:hover { color: var(--accent); border-color: var(--accent); }
.sb-pic-ops { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.sb-pic:hover .sb-pic-ops { opacity: 1; }
@media (hover: none) { .sb-pic-ops { opacity: 1; } }
.sb-pic-ops button { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(20,20,30,.78); color: #fff; backdrop-filter: blur(6px); }
.sb-pic-ops button:hover { background: var(--accent); }
.sb-cell { display: block; }
.sb-field { display: block; width: 100%; min-height: 72px; height: 100%; resize: none; border: 0; background: transparent; outline: none; padding: 12px; font-size: 14px; line-height: 1.6; color: var(--text); overflow: hidden; }
.sb-field:focus { background: var(--accent-soft); }
.sb-field::placeholder { color: var(--text-3); }
.sb-sec { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px; }
.sb-sec input { width: 52px; height: 36px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface-2); text-align: center; font-size: 15px; font-weight: 700; font-family: var(--mono); outline: none; -moz-appearance: textfield; }
.sb-sec input::-webkit-inner-spin-button { opacity: .4; }
.sb-sec input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sb-sec span { font-size: 12px; color: var(--text-3); }
.sb-ops { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; }
.sb-ops .icon-btn { width: 32px; height: 32px; opacity: .55; }
.sb-cut:hover .sb-ops .icon-btn { opacity: 1; }
.sb-addrow { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 52px; border-top: 1px dashed var(--line-2); color: var(--text-2); font-size: 13.5px; font-weight: 600; }
.sb-addrow:hover { background: var(--accent-soft); color: var(--accent); }
@media (max-width: 1100px) {
  .sb-row { grid-template-columns: 88px 50px 220px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr) 76px 40px; }
}
@media (max-width: 860px) {
  .sb-bar { padding: 10px 12px; }
  .sb-scroll { padding: 12px 10px 90px; }
  .sb-headrow { display: none; }
  .sb-sheet { border: 0; background: transparent; overflow: visible; }
  .sb-row.sb-cut { grid-template-columns: auto 1fr 1fr; grid-template-areas: "sc no ops" "pic pic pic" "a a a" "d d d" "s s sec"; margin-bottom: 14px; border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
  .sb-row > * { border-right: 0; }
  .sb-no { grid-area: no; flex-direction: row; justify-content: flex-start; padding: 8px 12px; }
  .sb-no .sb-num::before { content: "CUT "; font-size: 12px; color: var(--text-3); font-family: inherit; }
  .sb-ops { grid-area: ops; flex-direction: row; justify-content: flex-end; }
  .sb-ops .icon-btn { opacity: 1; }
  .sb-pic { grid-area: pic; padding: 0 12px 6px; }
  .sb-cell { border-top: 1px solid var(--line); }
  .sb-cell::before { content: attr(data-label); display: block; padding: 8px 12px 0; font-size: 11.5px; font-weight: 700; color: var(--text-3); }
  .sb-cell:nth-of-type(1) { grid-area: a; }
  .sb-cell:nth-of-type(2) { grid-area: d; }
  .sb-cell:nth-of-type(3) { grid-area: s; border-right: 1px solid var(--line); }
  .sb-sec { grid-area: sec; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 0 0 10px; }
  .sb-sec::before { padding: 8px 12px 4px; }
  .sb-sec input { margin-left: 12px; }
  .sb-sec span { display: none; }
  .sb-field { min-height: 56px; padding: 6px 12px 10px; }
  .sb-addrow { border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
}

/* 手描きパッド */
.sb-pad-panel { width: min(100%, 980px) !important; }
.sb-pad-tools { display: flex; align-items: center; gap: 6px; padding: 10px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sb-pen-color { width: 28px; height: 28px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); transition: transform .15s var(--spring); }
.sb-pen-color.is-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.sb-pen-size { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; }
.sb-pen-size span { border-radius: 50%; background: var(--text); }
.sb-pen-size.is-on, .sb-tool.is-on { background: var(--accent-soft); color: var(--accent); }
.sb-tool { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.sb-pad-wrap { padding: 16px 18px; background: var(--surface-2); }
.sb-pad-wrap canvas { width: 100%; aspect-ratio: 16 / 9; height: auto; background: #fff; border-radius: 8px; box-shadow: 0 10px 30px -14px rgba(0,0,0,.45); touch-action: none; cursor: crosshair; }
@media (max-width: 640px) { .sb-pad-wrap { padding: 10px; } .sb-tool span { display: none; } }
.sb-stats > span { white-space: nowrap; }
@media (max-width: 640px) {
  .sb-bar .btn-label { display: none; }
  .sb-stats { gap: 10px; font-size: 12px; }
  .sb-stats b { font-size: 15px; }
}
/* 絵コンテ: 画角（縦 9:16） */
.sb-aspect button { gap: 7px; }
.sb-aspect-icon { display: inline-block; width: calc(var(--aw) * 1.05px); height: calc(var(--ah) * 1.05px); border: 1.6px solid currentColor; border-radius: 3px; }
.sb[data-ratio="9:16"] .sb-row { grid-template-columns: 96px 56px 170px minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, .8fr) 84px 44px; }
.sb[data-ratio="9:16"] .sb-pic img, .sb[data-ratio="9:16"] .sb-pic-empty { aspect-ratio: 9 / 16; }
.sb[data-ratio="9:16"] .sb-pic-empty { flex-direction: column; }
.sb-pad-wrap.is-tall { display: flex; justify-content: center; }
.sb-pad-wrap.is-tall canvas { width: auto; height: min(62vh, 640px); aspect-ratio: 9 / 16; }
@media (max-width: 860px) {
  .sb[data-ratio="9:16"] .sb-row.sb-cut { grid-template-columns: auto 1fr 1fr; }
  .sb[data-ratio="9:16"] .sb-pic { width: min(52%, 220px); justify-self: center; padding: 0 0 6px; }
  .sb[data-ratio="9:16"] .sb-pic-ops { right: 6px; bottom: 12px; }
  .sb-aspect button { padding: 0 9px !important; }
  .sb-pad-wrap.is-tall canvas { height: min(52vh, 560px); }
}
@media (max-width: 640px) {
  .sb-bar { flex-wrap: wrap; row-gap: 8px; }
  .sb-aspect { order: 5; }
}

/* 絵コンテ: シーン番号 */
.sb-scene { display: flex; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; background: var(--surface-2); }
.sb-scene input { width: 40px; height: 34px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); text-align: center; font-size: 17px; font-weight: 800; font-family: var(--mono); outline: none; -moz-appearance: textfield; color: var(--text); }
.sb-scene input::-webkit-inner-spin-button, .sb-scene input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sb-scene input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sb-scene button { width: 22px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--text-3); flex: none; }
.sb-scene button:hover { background: var(--surface-3); color: var(--accent); }
.sb-scene button .i { width: 13px; height: 13px; }
.sb-scene-val { font-size: 20px; font-weight: 800; font-family: var(--mono); }
.sb-cut.is-scene-cont .sb-scene input { opacity: .45; border-color: transparent; background: transparent; }
.sb-cut.is-scene-cont .sb-scene button { opacity: 0; }
.sb-cut.is-scene-cont:hover .sb-scene button, .sb-cut.is-scene-cont .sb-scene:focus-within button { opacity: 1; }
.sb-cut.is-scene-cont .sb-scene:focus-within input, .sb-cut.is-scene-cont:hover .sb-scene input { opacity: 1; border-color: var(--line-2); background: var(--surface); }
.sb-cut.is-scene-start:not(:first-child) { border-top: 3px solid var(--accent); }
@media (hover: none) { .sb-cut.is-scene-cont .sb-scene button { opacity: .6; } }
@media (max-width: 860px) {
  .sb-scene { grid-area: sc; background: transparent; padding: 8px 0 8px 10px; gap: 4px; }
  .sb-scene::before { content: "S"; font-size: 12px; font-weight: 700; color: var(--text-3); margin-right: 2px; }
  .sb-scene button { width: 28px; height: 30px; }
  .sb-cut.is-scene-cont .sb-scene input { opacity: 1; border-color: var(--line-2); background: var(--surface); }
  .sb-cut.is-scene-cont .sb-scene button { opacity: 1; }
  .sb-cut.is-scene-start:not(:first-child) { border-top: 1px solid var(--line-2); margin-top: 28px; box-shadow: 0 -15px 0 -12px var(--accent); }
  .sb-no { padding-left: 4px; }
}

/* フッター（コピーライト） */
.site-foot { margin-top: 48px; padding: 18px 0 4px; border-top: 1px solid var(--line); text-align: center; font-size: 12px; color: var(--text-3); letter-spacing: .02em; }
.is-review .site-foot { display: none; }
.auth-copyright { border-top: 0; margin-top: 32px; }
@media (min-width: 901px) { .auth-copyright { margin-top: 40px; } }
.site-foot a, .auth-foot a { color: inherit; text-decoration: none; transition: color .2s; }
.site-foot a:hover, .auth-foot a:hover { color: var(--accent); text-decoration: underline; }

/* ノート: 取り消し線 */
.nb-text s { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--text-2); color: var(--text-3); }

/* 兄弟ツール Stugrid（スタジオ総合管理ツール）への切り替え */
.side-apps { margin-bottom: 8px; }
.app-mark { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; }
.app-mark .i { width: 13px; height: 13px; }
.app-mark-stugrid { background: linear-gradient(135deg, #14c9a8 0%, #2aa7e8 52%, #4c6fff 100%); box-shadow: 0 4px 12px -4px rgba(30,160,210,.7); }
.app-switch { gap: 10px; }
.app-switch-sub { font-size: 11.5px; color: var(--text-3); font-weight: 500; }
.app-switch-ext { margin-left: auto; opacity: .5; }
.topbar-app { display: none; }
@media (max-width: 960px) { .topbar-app { display: grid; } }
.notif-app { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 5px; background: rgba(20,201,168,.14); color: #19b89b; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.ni-sg_loan, .ni-sg_return { background: rgba(20,201,168,.14); color: #19b89b; }
.ni-sg_reminder, .ni-sg_overdue { background: var(--warn-soft); color: var(--warn); }
.ni-sg_report { background: var(--danger-soft); color: var(--danger); }