/* =============================================
   学タス — base.css v5.0
   Multi-auth / Guest / i18n / Settings / Responsive
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* ─── Tokens ─────────────────────────────────── */
:root {
  --bg:            #1e1e1e;
  --surface:       #252526;
  --surface-mid:   #2d2d30;
  --surface-soft:  #333337;
  --surface-hover: #3e3e42;
  --titlebar:      #181818;
  --border:        rgba(255,255,255,0.07);
  --border-mid:    rgba(255,255,255,0.13);
  --text:          #d4d4d4;
  --text-bright:   #e8e8e8;
  --text-sub:      #9d9d9d;
  --muted:         #6a737d;
  --faint:         #454545;
  --accent:        #4e94ce;
  --accent-h:      #6ab0e8;
  --accent-soft:   rgba(78,148,206,0.14);
  --accent-glow:   0 0 0 2px rgba(78,148,206,0.28);
  --syn-fn:        #dcdcaa;
  --syn-str:       #ce9178;
  --syn-kw:        #c586c0;
  --syn-type:      #4ec9b0;
  --syn-cmt:       #6a9955;
  --syn-tag:       #9cdcfe;
  --danger:        #f44747;
  --danger-soft:   rgba(244,71,71,0.12);
  --warning:       #ffcc02;
  --warning-soft:  rgba(255,204,2,0.09);
  --success:       #4ec9b0;
  --success-soft:  rgba(78,201,176,0.11);
  --done:          rgba(255,255,255,0.02);
  --r0: 2px; --r1: 4px; --r2: 6px; --r3: 10px; --r4: 16px;
  --sh1: 0 1px 4px rgba(0,0,0,.55);
  --sh2: 0 4px 20px rgba(0,0,0,.65);
  --sh3: 0 12px 48px rgba(0,0,0,.78);
  --mono: 'JetBrains Mono','Fira Code','Consolas','SF Mono',monospace;
  --sans: 'Noto Sans JP', sans-serif;
  --sidebar-w: 220px;
  --font-scale: 1;
}

/* ─── Light theme ─────────────────────────────── */
html.theme-light {
  --bg:            #f3f3f3;
  --surface:       #ffffff;
  --surface-mid:   #f0f0f0;
  --surface-soft:  #e8e8e8;
  --surface-hover: #e0e0e0;
  --titlebar:      #dddddd;
  --border:        rgba(0,0,0,0.08);
  --border-mid:    rgba(0,0,0,0.15);
  --text:          #2d2d2d;
  --text-bright:   #111111;
  --text-sub:      #555555;
  --muted:         #888888;
  --faint:         #bbbbbb;
  --accent:        #0078d4;
  --accent-h:      #1a8fe0;
  --accent-soft:   rgba(0,120,212,0.10);
  --accent-glow:   0 0 0 2px rgba(0,120,212,0.25);
  --syn-fn:        #795e26;
  --syn-str:       #a31515;
  --syn-kw:        #af00db;
  --syn-type:      #267f99;
  --syn-cmt:       #008000;
  --syn-tag:       #001080;
  --done:          rgba(0,0,0,0.03);
}
html.theme-light .login-shell { background: #f0f2f5; }

/* ─── Login orb (sun/moon) ────────────────────── */
.login-orb {
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1;
  filter: blur(36px);
  mix-blend-mode: screen;
  will-change: left, top, background;
}
.login-stars {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 1.2s ease;
}
.login-star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: star-pulse var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--dly, 0s);
}
@keyframes star-pulse {
  0%, 100% { opacity: var(--op, 0.6); transform: scale(1); }
  50%       { opacity: calc(var(--op, 0.6) * 0.2); transform: scale(0.7); }
}

/* ─── Site footer ────────────────────────────── */
.login-site-footer {
  position: absolute;
  bottom: 14px; left: 0; right: 0;
  z-index: 3;
  text-align: center;
  font-size: 11px;
  color: var(--login-fg-muted, rgba(255,255,255,0.35));
  font-family: var(--mono);
  letter-spacing: 0.04em;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.login-site-footer .footer-link,
.login-site-footer .footer-sep { pointer-events: all; }
.app-site-footer {
  padding: 32px 0 20px;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  font-family: var(--mono);
  letter-spacing: 0.04em;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.footer-sep { opacity: 0.4; }
.footer-link {
  color: inherit;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity .2s;
}
.footer-link:hover { opacity: 1; text-decoration: underline; }

/* ─── App topbar theme toggle ─────────────────── */
.topbar-theme-btn::before { content: '🌙'; font-size: 14px; }
html.theme-light .topbar-theme-btn::before { content: '☀️'; }
html.theme-light .login-card { background: #ffffff; border-color: rgba(0,0,0,0.12); }
html.theme-light .login-card-title { color: #111; }
html.theme-light .brand-heading { color: #ffffff; }
html.theme-light .guest-banner { background: rgba(255,204,2,0.15); border-color: rgba(255,204,2,0.35); }
html.theme-light .confirm-overlay { background: rgba(0,0,0,0.45); }

/* ─── Reset ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  font-size: calc(13px * var(--font-scale));
  overflow-x: hidden;
}
body {
  margin: 0; min-height: 100dvh;
  color: var(--text); background: var(--bg);
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background .2s, color .2s;
  overflow-x: hidden;
}
button, input, textarea, select { font: inherit; }
button { border: 0; cursor: pointer; }
h1,h2,h3,p { margin-top: 0; }
.hidden { display: none !important; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--surface-hover); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ═══ LOGIN ════════════════════════════════════ */
.login-shell {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
  background: #0a0a0a;
  position: relative; overflow: hidden;
}
/* ─── Mountains ──────────────────────────────── */
.login-mountains {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 420px;
  z-index: 2;
  pointer-events: none;
}
.mtn-far   { fill: var(--mtn-far,   #1c2d4a); }
.mtn-mid   { fill: var(--mtn-mid,   #0f1c30); }
.mtn-near  { fill: var(--mtn-near,  #070e1c); }
.mtn-snow  { fill: var(--mtn-snow-color, rgba(200,220,255,0.18)); }
.mtn-trees { fill: var(--mtn-trees, #050912); }

.login-wrapper {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
  width: min(900px, 100%);
}

/* ─── Left: branding ─────────────────────────── */
.login-brand { padding-right: 24px; }
.brand-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--r2); background: var(--accent);
  margin-bottom: 28px; box-shadow: 0 0 24px rgba(78,148,206,.35);
}
.brand-icon { color: #fff; font-size: calc(14px * var(--font-scale)); font-weight: 700; }
.brand-icon-img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--r2); }
.brand-heading {
  font-size: clamp(32px, 4vw, 48px); font-weight: 700;
  line-height: 1.15; letter-spacing: -0.04em;
  color: #ffffff; margin-bottom: 16px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.7), 0 0 48px rgba(0,0,0,0.4);
}
.brand-sub {
  color: rgba(255,255,255,0.82);
  font-size: calc(14px * var(--font-scale)); line-height: 1.9; margin-bottom: 32px;
  font-family: var(--sans);
  text-shadow: 0 1px 4px rgba(0,0,0,0.85), 0 0 16px rgba(0,0,0,0.6);
}
.brand-features { display: flex; flex-direction: column; gap: 10px; }
.feature-item {
  display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.72);
  font-size: calc(12px * var(--font-scale)); font-family: var(--sans);
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 12px rgba(0,0,0,0.55);
}
.feature-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--login-fg-muted, var(--accent)); flex-shrink: 0; }

/* ─── Right: login card ──────────────────────── */
.login-card {
  background: #111111; border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px; padding: 36px 32px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), var(--sh3);
  display: flex; flex-direction: column; gap: 10px;
}
.login-card-eyebrow { margin: 0 0 2px; font-size: calc(10px * var(--font-scale)); color: var(--syn-cmt); font-family: var(--mono); }
.login-card-title   { margin: 0 0 4px; font-size: calc(24px * var(--font-scale)); font-weight: 700; letter-spacing: -0.03em; color: #ffffff; }
.login-card-sub     { margin: 0 0 6px; color: #909090; font-size: calc(13px * var(--font-scale)); font-family: var(--sans); }

/* ─── Auth buttons ───────────────────────────── */
.auth-btn {
  width: 100%; display: flex; align-items: center; gap: 12px;
  min-height: 48px; border-radius: 10px;
  font-size: calc(14px * var(--font-scale)); font-weight: 600;
  font-family: var(--sans); border: none; cursor: pointer;
  transition: background .15s, transform .12s, box-shadow .15s;
  padding: 0 16px;
}
.auth-btn:hover  { transform: translateY(-1px); }
.auth-btn:active { transform: scale(.98); }

.google-login-btn { background: #ffffff; color: #111111; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.google-login-btn:hover { background: #f0f0f0; box-shadow: 0 4px 16px rgba(0,0,0,.4); }


.ms-login-btn { background: #2f2f2f; color: #ffffff; border: 1px solid rgba(255,255,255,.12); }
.ms-login-btn:hover { background: #3a3a3a; }


.guest-login-btn { background: transparent; color: var(--muted); border: 1px dashed rgba(255,255,255,.15); font-size: calc(13px * var(--font-scale)); }
.guest-login-btn:hover { background: rgba(255,255,255,.04); color: var(--text); border-color: rgba(255,255,255,.25); }

.auth-icon-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
}

.auth-divider {
  display: flex; align-items: center; gap: 12px;
  color: #3a3a3a; font-size: calc(11px * var(--font-scale)); margin: 2px 0;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.08);
}

/* ─── Email / Password form ─────────────────── */
.email-form-section { display: flex; flex-direction: column; gap: 8px; }

.email-form-tabs { display: flex; gap: 0; border: 1px solid var(--border-mid); border-radius: var(--r1); overflow: hidden; }
.email-tab {
  flex: 1; padding: 7px 12px; background: transparent; color: var(--muted);
  border: none; cursor: pointer; font-family: var(--mono); font-size: calc(12px * var(--font-scale));
  font-weight: 500; transition: background .15s, color .15s;
}
.email-tab:not(:last-child) { border-right: 1px solid var(--border-mid); }
.email-tab.active { background: rgba(78,148,206,.15); color: var(--accent); }
.email-tab:hover:not(.active) { background: rgba(255,255,255,.04); color: var(--text); }

.email-input {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border-mid);
  border-radius: var(--r1); background: rgba(255,255,255,.05);
  color: var(--text); font-family: var(--mono); font-size: calc(13px * var(--font-scale)); outline: none;
  transition: border-color .15s, box-shadow .15s; box-sizing: border-box;
}
.email-input:focus { border-color: var(--accent); box-shadow: var(--accent-glow); }
.email-input::placeholder { color: var(--muted); opacity: .7; }

.email-auth-btn { width: 100%; margin-top: 2px; }

.ghost-link {
  background: none; border: none; color: var(--muted); font-size: calc(11px * var(--font-scale));
  cursor: pointer; font-family: var(--mono); text-align: center;
  padding: 2px 0; transition: color .15s; text-decoration: underline;
  text-decoration-color: transparent;
}
.ghost-link:hover { color: var(--accent); text-decoration-color: var(--accent); }

.auth-divider--sm { margin: 0; }
.auth-divider--sm::before, .auth-divider--sm::after { background: rgba(255,255,255,.05); }

.config-warning { margin: 4px 0 0; padding: 10px 12px; border-radius: var(--r1); color: var(--danger); background: var(--danger-soft); border: 1px solid rgba(244,71,71,.22); font-size: calc(12px * var(--font-scale)); line-height: 1.7; }
.login-footer-note { margin: 4px 0 0; color: #3a3a3a; font-size: calc(11px * var(--font-scale)); line-height: 1.8; font-family: var(--sans); text-align: center; }

/* ─── Email Verify Pending ───────────────────── */
.verify-pending {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 8px 0; text-align: center;
}

.verify-icon-wrap {
  position: relative; width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.verify-icon {
  font-size: calc(38px * var(--font-scale)); line-height: 1;
  filter: drop-shadow(0 0 12px rgba(78,148,206,.6));
  animation: verifyFloat 3s ease-in-out infinite;
}
.verify-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(78,148,206,.4);
  animation: verifyPulse 2s ease-out infinite;
}

@keyframes verifyFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
@keyframes verifyPulse {
  0%   { transform: scale(.7); opacity: .8; }
  100% { transform: scale(1.6); opacity: 0; }
}

.verify-app-name {
  font-size: calc(11px * var(--font-scale)); font-weight: 700; letter-spacing: .18em;
  color: var(--accent); text-transform: uppercase;
  font-family: var(--mono); margin: 0;
}
.verify-title {
  font-size: calc(20px * var(--font-scale)); font-weight: 700; color: var(--text-bright);
  margin: 0; font-family: var(--sans);
}
.verify-desc {
  font-size: calc(13px * var(--font-scale)); color: var(--text-sub); line-height: 1.8;
  font-family: var(--sans); margin: 0;
}
.verify-email {
  color: var(--text-bright); font-family: var(--mono); font-size: calc(12px * var(--font-scale));
  background: rgba(78,148,206,.1); padding: 1px 6px;
  border-radius: 3px; border: 1px solid rgba(78,148,206,.2);
}
.verify-sub {
  font-size: calc(11px * var(--font-scale)); color: var(--muted); line-height: 1.9;
  font-family: var(--sans); margin: 0;
}

.verify-progress {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 20px;
  background: rgba(78,148,206,.07); border: 1px solid rgba(78,148,206,.15);
  margin: 4px 0;
}
.verify-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  animation: verifyBlink 1.4s ease-in-out infinite;
}
@keyframes verifyBlink {
  0%, 100% { opacity: 1; } 50% { opacity: .25; }
}
.verify-checking {
  font-size: calc(11px * var(--font-scale)); color: var(--accent); font-family: var(--mono);
  letter-spacing: .06em;
}

/* Login responsive */
@media (max-width: 700px) {
  .login-wrapper { grid-template-columns: 1fr; gap: 28px; }
  .login-brand { padding-right: 0; text-align: center; display: none; }
  .login-card { padding: 28px 22px; }
}

/* ═══ MODALS ══════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(0,0,0,.72);
  backdrop-filter: blur(4px);
  z-index: 400; opacity: 0; pointer-events: none;
  transition: opacity .15s;
}
.modal-overlay.visible { opacity: 1; pointer-events: auto; }

.modal-panel {
  border-radius: var(--r3); background: var(--surface-mid);
  border: 1px solid var(--border-mid);
  box-shadow: var(--sh3);
  animation: panelIn .2s ease both;
  width: min(100%, 440px);
  max-height: 90dvh; overflow-y: auto;
}
@keyframes panelIn { from{transform:scale(.96) translateY(8px)}to{transform:none} }

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: var(--surface); position: sticky; top: 0; z-index: 2;
}
.modal-title { font-size: calc(13px * var(--font-scale)); font-weight: 600; color: var(--text-bright); }
.modal-close-btn { width: 24px; height: 24px; border-radius: var(--r0); background: transparent; color: var(--muted); font-size: calc(12px * var(--font-scale)); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.modal-close-btn:hover { background: var(--surface-hover); color: var(--text); }

/* ─── Guest warning modal ────────────────────── */
.guest-warn-panel { text-align: center; padding: 32px 28px; }
.guest-warn-icon  { font-size: calc(40px * var(--font-scale)); margin-bottom: 12px; }
.guest-warn-title { font-size: calc(17px * var(--font-scale)); font-weight: 700; color: var(--text-bright); margin: 0 0 12px; }
.guest-warn-body  { font-size: calc(13px * var(--font-scale)); line-height: 1.8; color: var(--text-sub); font-family: var(--sans); margin: 0 0 24px; }
.guest-warn-actions { display: flex; flex-direction: column; gap: 8px; }
.guest-warn-actions .primary-button { min-height: 44px; }
.guest-warn-actions .ghost-button   { min-height: 40px; }

/* ─── Settings modal ─────────────────────────── */
.settings-tabs {
  display: flex; border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.stab {
  flex: 1; min-height: 36px; padding: 0 14px;
  font-size: calc(12px * var(--font-scale)); font-weight: 500;
  background: transparent; color: var(--muted);
  border: none; border-bottom: 2px solid transparent;
  transition: color .12s, border-color .12s;
}
.stab:hover  { color: var(--text); }
.stab.active { color: var(--accent); border-bottom-color: var(--accent); }

.settings-content { padding: 16px; }
.settings-section { margin-bottom: 20px; }
.settings-section:last-child { margin-bottom: 0; }
.settings-danger-zone { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--danger-soft); }
.settings-label { display: block; font-size: calc(10px * var(--font-scale)); font-weight: 600; letter-spacing: .1em; color: var(--syn-kw); text-transform: uppercase; margin-bottom: 8px; }
.settings-label--danger { color: var(--danger); }
.settings-danger-desc { font-size: calc(11px * var(--font-scale)); color: var(--muted); margin: 0 0 10px; font-family: var(--sans); line-height: 1.5; }
.settings-hint  { font-size: calc(11px * var(--font-scale)); color: var(--muted); margin: 4px 0 0; font-family: var(--sans); }
.settings-input { width: 100%; padding: 8px 10px; border: 1px solid var(--border-mid); border-radius: var(--r1); background: var(--surface-mid); color: var(--text); font-family: var(--mono); font-size: calc(12px * var(--font-scale)); outline: none; transition: border-color .15s, box-shadow .15s; }
.settings-input:focus { border-color: var(--accent); box-shadow: var(--accent-glow); }
.settings-save-btn { margin-top: 8px; }
.settings-select { width: 100%; padding: 8px 10px; border: 1px solid var(--border-mid); border-radius: var(--r1); background: var(--surface-mid); color: var(--text); font-family: var(--mono); font-size: calc(12px * var(--font-scale)); outline: none; transition: border-color .15s; color-scheme: dark; }
.settings-select:focus { border-color: var(--accent); }
html.theme-light .settings-select { color-scheme: light; }
.settings-select option { background: #2d2d30; color: var(--text); }

.settings-radio-group { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-option {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--r1);
  border: 1px solid var(--border); background: var(--surface-mid);
  cursor: pointer; font-size: calc(12px * var(--font-scale)); color: var(--text-sub);
  white-space: nowrap; min-width: max-content;
  transition: border-color .12s, background .12s, color .12s;
}
.radio-option:hover { border-color: var(--accent); color: var(--text); }
.radio-option input[type="radio"] { accent-color: var(--accent); margin: 0; }
.radio-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--text-bright); }

/* ═══ GUEST BANNER ══════════════════════════════ */
.guest-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 7px 16px;
  background: rgba(255,204,2,0.08);
  border-bottom: 1px solid rgba(255,204,2,0.2);
  font-size: calc(12px * var(--font-scale)); color: var(--warning); font-family: var(--sans);
}
.guest-banner-dot { flex-shrink: 0; }
.guest-banner-cta {
  margin-left: auto; padding: 3px 12px; border-radius: var(--r1);
  background: transparent; border: 1px solid rgba(255,204,2,.35);
  color: var(--warning); font-size: calc(11px * var(--font-scale)); font-family: var(--mono);
  cursor: pointer; flex-shrink: 0;
  transition: background .12s;
}
.guest-banner-cta:hover { background: rgba(255,204,2,.12); }

/* ═══ APP SHELL ════════════════════════════════ */
.app-shell { display: flex; flex-direction: column; min-height: 100dvh; }

/* ─── Title bar ──────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--titlebar); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30;
  min-height: 36px; padding: 0 6px 0 0;
  flex-shrink: 0;
}
.topbar-left  { display: flex; align-items: stretch; flex-shrink: 0; min-width: 0; }
.topbar-right-cluster { display: flex; align-items: center; gap: 2px; flex-shrink: 0; padding-left: 4px; }

.topbar-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; min-height: 36px;
  background: transparent; color: var(--muted);
  border: none; border-right: 1px solid var(--border);
  transition: background .12s, color .12s;
  flex-shrink: 0;
}
.topbar-right-cluster .topbar-icon-btn { border-right: none; border-left: 1px solid var(--border); width: 30px; }
.topbar-icon-btn:hover { background: var(--surface-hover); color: var(--text); }

.topbar-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 14px; font-size: calc(12px * var(--font-scale)); color: var(--text-sub);
  border-right: 1px solid var(--border); user-select: none;
  max-width: 260px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.topbar-tab.active { background: var(--surface); color: var(--text); }
.topbar-icon { color: var(--accent); font-size: calc(13px * var(--font-scale)); flex-shrink: 0; }

/* ─── Search bar ─────────────────────────────── */
.topbar-search-wrap {
  flex: 1; max-width: 400px;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-mid); border: 1px solid var(--border-mid);
  border-radius: var(--r1); padding: 0 10px;
  transition: border-color .15s, box-shadow .15s;
}
.topbar-search-wrap:focus-within { border-color: var(--accent); box-shadow: var(--accent-glow); }
.search-icon { color: var(--muted); font-size: calc(15px * var(--font-scale)); flex-shrink: 0; }
.topbar-search {
  flex: 1; border: none; background: transparent;
  color: var(--text); font-size: calc(12px * var(--font-scale));
  outline: none; padding: 6px 0; font-family: var(--mono);
}
.topbar-search::placeholder { color: var(--faint); }
.search-kbd { font-size: calc(10px * var(--font-scale)); color: var(--faint); flex-shrink: 0; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--r0); padding: 1px 5px; }
.search-result-label { font-size: calc(11px * var(--font-scale)); color: var(--syn-cmt); margin-left: 8px; }

/* User area */
.user-area {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 6px 3px 4px;
  border: 1px solid var(--border); border-radius: var(--r1);
  background: var(--surface-mid); flex-shrink: 0;
}
.avatar { width: 22px; height: 22px; border-radius: var(--r0); object-fit: cover; background: var(--surface-soft); }
.user-meta { display: flex; flex-direction: column; min-width: 0; }
.user-meta span { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(11px * var(--font-scale)); color: var(--text-sub); }
#userEmail { font-size: calc(9px * var(--font-scale)); color: var(--faint); }

/* ─── Workspace ──────────────────────────────── */
.workspace { display: flex; flex: 1; overflow: hidden; position: relative; }

/* Sidebar-right mode */
.workspace.sidebar-right { flex-direction: row-reverse; }
.workspace.sidebar-right .sidebar         { border-right: none; border-left: 1px solid var(--border); }
.workspace.sidebar-right .sidebar-resizer { order: -1; }
.workspace.sidebar-right .sidebar-resizer::after { }

/* ═══ SIDEBAR ══════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--border);
  overflow-y: auto;
  position: sticky; top: 36px;
  height: calc(100dvh - 36px);
  transition: width .2s ease;
}
.sidebar.collapsed { width: 0; overflow: hidden; border-right: none; }

.sidebar-heading {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px; background: var(--surface-mid);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 5; flex-shrink: 0;
}
.sidebar-title-row { display: flex; align-items: center; gap: 5px; }
.panel-chevron { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--r0); background: transparent; color: var(--muted); transition: background .12s; }
.panel-chevron:hover { background: var(--surface-hover); color: var(--text); }
.chevron-icon { display: inline-block; font-size: calc(9px * var(--font-scale)); transition: transform .18s ease; }
.chevron-icon.open { transform: rotate(90deg); }
.sidebar-section-label { font-size: calc(10px * var(--font-scale)); font-weight: 600; letter-spacing: .1em; color: var(--muted); }
.sidebar-actions { display: flex; align-items: center; gap: 3px; }
.icon-btn-group { display: flex; gap: 1px; }

.icon-tool-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--r0);
  background: transparent; color: var(--muted); font-size: calc(10px * var(--font-scale)); font-weight: 600;
  border: 1px solid transparent;
  transition: background .12s, color .12s;
}
.icon-tool-btn:hover  { background: var(--surface-hover); color: var(--text); }
.icon-tool-btn.active { color: var(--accent); border-color: rgba(78,148,206,.35); background: rgba(78,148,206,.08); }
.add-btn { color: var(--accent); font-size: calc(16px * var(--font-scale)); font-weight: 400; }
.add-btn:hover { background: rgba(78,148,206,.12); color: var(--accent-h); }

.folder-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.folder-panel.collapsed { display: none; }

/* Folder form */
.folder-form { padding: 10px; background: var(--surface-mid); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.folder-form-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.folder-form-field:last-child { margin-bottom: 0; }
.form-micro-label { font-size: calc(9px * var(--font-scale)); font-weight: 600; letter-spacing: .1em; color: var(--syn-kw); text-transform: uppercase; }
.folder-actions { display: flex; gap: 5px; margin-top: 8px; }
.color-picker { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; }
.color-swatch { min-height: 22px; border: 1px solid transparent; border-radius: var(--r0); cursor: pointer; background: var(--swatch); transition: transform .12s, border-color .12s; }
.color-swatch:hover  { transform: scale(1.1); }
.color-swatch.active { border-color: #fff; transform: scale(1.1); outline: 1px solid rgba(255,255,255,.2); }

/* ─── Folder list ────────────────────────────── */
.folder-list { flex: 1; overflow-y: auto; padding: 3px 0; }
.folder-list.custom-sort .fi-handle { display: inline-flex; }

.folder-item {
  display: flex; align-items: center; gap: 5px;
  width: 100%; min-height: 26px;
  padding: 3px 8px;
  padding-left: calc(var(--fi-depth,0) * 14px + 6px);
  background: transparent; border: none;
  border-left: 2px solid transparent;
  color: var(--text-sub); cursor: pointer; text-align: left;
  transition: background .1s, color .1s, border-color .1s;
}
.folder-item:hover  { background: var(--surface-hover); color: var(--text); }
.folder-item.active { background: rgba(78,148,206,.1); border-left-color: var(--accent); color: var(--text-bright); }
.folder-item.virtual { border-left-style: dashed; }
.folder-item.drag-over { background: rgba(78,148,206,.18); border-left-color: var(--accent); }
.folder-item.dragging  { opacity: .38; }

.fi-chevron { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex-shrink: 0; font-size: calc(8px * var(--font-scale)); color: var(--muted); transition: transform .15s; }
.fi-chevron.has-children { cursor: pointer; }
.fi-chevron.has-children:hover { color: var(--text); }
.fi-chevron.open { transform: rotate(90deg); }
.fi-handle { display: none; font-size: calc(12px * var(--font-scale)); color: var(--faint); cursor: grab; width: 12px; flex-shrink: 0; user-select: none; align-items: center; justify-content: center; }
.folder-dot { width: 7px; height: 7px; border-radius: var(--r0); flex-shrink: 0; background: var(--folder-color); }
.folder-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(12px * var(--font-scale)); font-weight: 400; }
.folder-item.active .folder-name { font-weight: 500; }
.folder-count { font-size: calc(10px * var(--font-scale)); font-weight: 600; color: var(--text-sub); background: var(--surface-soft); border: 1px solid var(--border-mid); padding: 0 6px; border-radius: 9px; min-width: 20px; text-align: center; flex-shrink: 0; line-height: 18px; height: 18px; }
.folder-item.active .folder-count { color: var(--text-bright); border-color: rgba(78,148,206,.4); }

/* ─── Context menu ───────────────────────────── */
.ctx-menu {
  position: fixed; z-index: 9999;
  background: var(--surface-mid); border: 1px solid var(--border);
  border-radius: var(--r1); padding: 4px 0; min-width: 140px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.ctx-item {
  display: block; width: 100%; padding: 7px 14px;
  background: none; border: none; text-align: left;
  font-size: calc(12px * var(--font-scale)); color: var(--text-sub);
  cursor: pointer; transition: background .1s, color .1s; white-space: nowrap;
}
.ctx-item:hover { background: var(--surface-hover); color: var(--text); }
.ctx-item.danger { color: #f14c4c; }
.ctx-item.danger:hover { background: rgba(244,71,71,.12); color: #f14c4c; }

/* ─── Sidebar resize handle ──────────────────── */
.sidebar-resizer { width: 4px; flex-shrink: 0; background: transparent; cursor: col-resize; position: relative; z-index: 10; transition: background .15s; }
.sidebar-resizer::after { content: ''; position: absolute; inset: 0; margin: auto; width: 1px; background: var(--border); transition: background .15s, width .15s; }
.sidebar-resizer:hover::after, .sidebar-resizer.dragging::after { background: var(--accent); width: 2px; }

/* ═══ EDITOR PANE ══════════════════════════════ */
.editor-pane {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  overflow-y: auto; padding: 12px;
}

.summary-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 10px; }
.summary-card { padding: 11px 13px; border: 1px solid var(--border); border-left: 3px solid var(--border-mid); border-radius: var(--r2); background: var(--surface); box-shadow: var(--sh1); }
.summary-card strong { display: block; margin-top: 5px; font-size: calc(26px * var(--font-scale)); font-weight: 700; letter-spacing: -.04em; color: var(--text-bright); }
.summary-label { font-size: calc(10px * var(--font-scale)); color: var(--syn-cmt); }
.summary-card.warning { border-left-color: var(--warning); }
.summary-card.warning strong { color: var(--warning); }
.summary-card.danger  { border-left-color: var(--danger); }
.summary-card.danger  strong { color: var(--danger); }

.task-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; margin-bottom: 8px; border: 1px solid var(--border); border-top: 2px solid var(--accent); border-radius: var(--r2); background: var(--surface); flex-wrap: wrap; }
.toolbar-left  { display: flex; align-items: center; min-width: 0; flex-wrap: wrap; gap: 4px; }
.toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar-path  { font-size: calc(12px * var(--font-scale)); color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sort-tabs { display: flex; gap: 1px; border: 1px solid var(--border); border-radius: var(--r1); overflow: hidden; }
.sort-tab { min-height: 24px; padding: 0 10px; font-size: calc(11px * var(--font-scale)); font-weight: 500; background: var(--surface-mid); color: var(--muted); border: none; font-family: var(--mono); transition: background .12s, color .12s; }
.sort-tab:hover  { background: var(--surface-soft); color: var(--text); }
.sort-tab.active { background: var(--accent); color: #fff; }

.task-list { display: flex; flex-direction: column; gap: 5px; }

.task-card {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border); border-left: 3px solid var(--border-mid);
  border-radius: var(--r2); background: var(--surface); box-shadow: var(--sh1);
  transition: border-left-color .15s, background .12s, transform .12s;
  animation: cardIn .18s ease both;
}
@keyframes cardIn { from{opacity:0;transform:translateX(-3px)}to{opacity:1;transform:none} }
.task-card:hover { border-left-color: var(--accent); background: var(--surface-mid); transform: translateX(1px); }
.task-card.completed { background: var(--done); opacity: .5; border-left-color: var(--faint); }
.task-card.completed:hover { opacity: .72; }
.task-card.overdue { border-left-color: var(--danger); }
.task-card.soon    { border-left-color: var(--warning); }

.task-checkbox { width: 14px; height: 14px; margin-top: 3px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.task-body { flex: 1; min-width: 0; }
.task-title-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.task-title { margin: 0; font-size: calc(13px * var(--font-scale)); font-weight: 600; line-height: 1.4; color: var(--syn-fn); }
.task-description { margin: 4px 0 0; color: var(--syn-cmt); font-size: calc(11px * var(--font-scale)); line-height: 1.7; white-space: pre-wrap; }
.task-description:not(:empty)::before { content: "/* "; color: var(--faint); }
.task-description:not(:empty)::after  { content: " */"; color: var(--faint); }
.task-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }

.pill { display: inline-flex; align-items: center; gap: 4px; min-height: 17px; padding: 0 6px; border-radius: var(--r0); color: var(--muted); background: var(--surface-soft); border: 1px solid var(--border); font-size: calc(10px * var(--font-scale)); font-weight: 500; }
.folder-pill { color: var(--text-sub); background: color-mix(in srgb, var(--folder-color) 12%, var(--surface-soft)); border-color: color-mix(in srgb, var(--folder-color) 28%, transparent); }
.tag-pill { color: var(--syn-tag); background: rgba(156,220,254,0.09); border-color: rgba(156,220,254,0.2); }
.status-pill.overdue   { color: var(--danger);  background: var(--danger-soft);  border-color: rgba(244,71,71,.2); }
.status-pill.soon      { color: var(--warning); background: var(--warning-soft); border-color: rgba(255,204,2,.2); }
.status-pill.completed { color: var(--success); background: var(--success-soft); border-color: rgba(78,201,176,.2); }

.task-edit-btn { flex-shrink: 0; min-height: 22px; padding: 0 9px; background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: var(--r0); font-size: calc(10px * var(--font-scale)); font-family: var(--mono); transition: background .12s, color .12s; }
.task-edit-btn:hover { background: var(--surface-hover); color: var(--text); }

.empty-state { padding: 52px 24px; text-align: center; border: 1px dashed rgba(255,255,255,.06); border-radius: var(--r2); }
.empty-prompt { margin: 0 0 6px; font-size: calc(14px * var(--font-scale)); font-weight: 600; color: var(--text-sub); }
.prompt-dollar { color: var(--syn-type); margin-right: 6px; }
.empty-hint { margin: 0; font-size: calc(12px * var(--font-scale)); color: var(--muted); }

/* ═══ PROPS PANEL ═══════════════════════════════ */
.props-panel {
  width: 300px; flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--surface);
  position: sticky; top: 36px;
  height: calc(100dvh - 36px);
  overflow-y: auto;
  transition: width .2s ease;
}
.props-header { display: flex; align-items: center; justify-content: space-between; background: var(--surface-mid); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; flex-shrink: 0; padding: 0 10px 0 0; }
.props-tabs   { display: flex; }
.props-tab    { display: inline-flex; align-items: center; padding: 7px 14px; font-size: calc(11px * var(--font-scale)); font-weight: 500; color: var(--text-sub); border-bottom: 2px solid transparent; }
.props-tab.active { color: var(--text); border-bottom-color: var(--accent); }

.notify-badge { display: flex; align-items: center; gap: 7px; padding: 7px 12px; background: var(--surface-mid); border-bottom: 1px solid var(--border); font-size: calc(11px * var(--font-scale)); color: var(--muted); flex-wrap: wrap; flex-shrink: 0; }
.notify-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 5px var(--success); flex-shrink: 0; animation: blink 2.5s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:.3} }
#notifyStatusText { flex: 1; min-width: 0; line-height: 1.5; }
#notifyStatusText[data-state="denied"]  { color: var(--danger); }
#notifyStatusText[data-state="default"] { color: var(--warning); }
#notifyStatusText[data-state="granted"] { color: var(--success); }
.notify-allow-btn { min-height: 20px; padding: 0 9px; border-radius: var(--r0); border: none; background: var(--accent); color: #fff; font-size: calc(10px * var(--font-scale)); font-weight: 600; cursor: pointer; flex-shrink: 0; }
.notify-allow-btn:hover { background: var(--accent-h); }

.task-form { display: flex; flex-direction: column; gap: 10px; padding: 12px; flex: 1; }
.field-group { display: flex; flex-direction: column; gap: 4px; }
.field-label { font-size: calc(9px * var(--font-scale)); font-weight: 600; letter-spacing: .1em; color: var(--syn-kw); text-transform: uppercase; }
.field-hint  { font-size: calc(8px * var(--font-scale)); color: var(--faint); font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 4px; }

/* ─── Notification settings ──────────────────── */
.notif-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.notif-tab { padding: 3px 10px; border-radius: var(--r0); border: 1px solid var(--border-mid); background: transparent; color: var(--muted); font-family: var(--mono); font-size: calc(10px * var(--font-scale)); cursor: pointer; transition: all .15s; }
.notif-tab:hover { border-color: var(--accent); color: var(--text); }
.notif-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.notif-before-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.notif-num { width: 52px !important; padding: 5px 6px !important; text-align: center; }
.notif-unit { font-size: calc(11px * var(--font-scale)); color: var(--muted); white-space: nowrap; }
.notif-dt-row { margin-top: 6px; }
.notif-dt-input { width: 100%; padding: 7px 10px; border: 1px solid var(--border-mid); border-radius: var(--r1); background: var(--surface-mid); color: var(--text); font-family: var(--mono); font-size: calc(12px * var(--font-scale)); outline: none; color-scheme: dark; }
.notif-dt-input:focus { border-color: var(--accent); }
html.theme-light .notif-dt-input { color-scheme: light; }

.checkbox-group { display: flex; flex-direction: column; gap: 7px; }
.checkbox-row { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 7px; color: var(--text-sub) !important; font-size: calc(12px * var(--font-scale)) !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; }
.checkbox-row input { width: 13px; height: 13px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.kw-true { color: var(--syn-type); }

.form-actions { display: flex; justify-content: flex-end; gap: 6px; padding: 10px 12px; margin: 0 -12px -12px; border-top: 1px solid var(--border); background: var(--surface-mid); position: sticky; bottom: 0; }

/* ─── Inputs ─────────────────────────────────── */
input, textarea, select {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--border-mid); border-radius: var(--r1);
  color: var(--syn-str); background: var(--surface-mid);
  outline: none; font-family: var(--mono); font-size: calc(12px * var(--font-scale));
  transition: border-color .15s, box-shadow .15s;
  color-scheme: dark;
}
html.theme-light input, html.theme-light textarea, html.theme-light select { color-scheme: light; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: var(--accent-glow); background: var(--surface-soft); color: var(--text); }
select { color: var(--text); }
select option { background: #2d2d30; color: var(--text); }
html.theme-light select option { background: #f0f0f0; color: #222; }
input[type="date"] { color: var(--text); }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.65) sepia(1) saturate(2) hue-rotate(185deg); cursor: pointer; opacity: .75; }
textarea { resize: vertical; line-height: 1.75; }
.required { color: var(--danger); font-size: calc(9px * var(--font-scale)); font-weight: 700; margin-left: 2px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ─── Buttons ─────────────────────────────────── */
.primary-button, .ghost-button, .danger-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 28px; border-radius: var(--r1);
  font-size: calc(12px * var(--font-scale)); font-weight: 500; font-family: var(--mono);
  text-decoration: none; transition: background .12s, opacity .12s;
  white-space: nowrap;
}
.primary-button { padding: 0 14px; color: #fff; background: var(--accent); }
.primary-button:hover { background: var(--accent-h); }
.ghost-button { min-height: 24px; padding: 0 10px; color: var(--muted); background: transparent; border: 1px solid var(--border); }
.ghost-button:hover { background: var(--surface-hover); color: var(--text); }
.danger-button { padding: 0 12px; color: var(--danger); background: var(--danger-soft); border: 1px solid rgba(244,71,71,.2); }
.danger-button:hover { background: rgba(244,71,71,.22); }
button:disabled { cursor: not-allowed; opacity: .32; }
button:active   { opacity: .8; }

/* ─── Toast ──────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 500; padding: 7px 16px; border-radius: var(--r1);
  color: var(--text); background: var(--surface-soft);
  border: 1px solid var(--border-mid); border-left: 3px solid var(--accent);
  box-shadow: var(--sh3); font-size: calc(12px * var(--font-scale)); font-weight: 500;
  animation: toastIn .2s ease both; white-space: nowrap; max-width: 90vw;
}
@keyframes toastIn { from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* ─── Confirm ────────────────────────────────── */
.confirm-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,.74); backdrop-filter: blur(4px); z-index: 500; opacity: 0; pointer-events: none; transition: opacity .15s; }
.confirm-overlay.visible { opacity: 1; pointer-events: auto; }
.confirm-panel { width: min(100%,380px); padding: 22px 18px; border-radius: var(--r2); background: var(--surface-mid); border: 1px solid var(--border-mid); border-top: 2px solid var(--danger); box-shadow: var(--sh3); animation: panelIn .2s ease both; }
.confirm-message { margin: 0 0 16px; color: var(--text); font-size: calc(13px * var(--font-scale)); line-height: 1.7; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 6px; }

/* ═══ RTL SUPPORT ═══════════════════════════════ */
[dir="rtl"] .topbar { flex-direction: row-reverse; }
[dir="rtl"] .sidebar { border-right: none; border-left: 1px solid var(--border); }
[dir="rtl"] .folder-item { border-left: none; border-right: 2px solid transparent; }
[dir="rtl"] .folder-item.active { border-right-color: var(--accent); }
[dir="rtl"] .task-card { border-left: 1px solid var(--border); border-right: 3px solid var(--border-mid); }
[dir="rtl"] .task-card:hover { border-right-color: var(--accent); transform: translateX(-1px); }
[dir="rtl"] .task-card.overdue { border-right-color: var(--danger); }
[dir="rtl"] .task-card.soon    { border-right-color: var(--warning); }
[dir="rtl"] .guest-banner-cta  { margin-left: 0; margin-right: auto; }

/* ═══ RESPONSIVE ══════════════════════════════ */
@media (max-width: 1100px) {
  .props-panel { width: 260px; }
}

@media (max-width: 900px) {
  /* ── ページ全体スクロールは body に委ねる（ズーム後もスクロール可） ── */
  /* .app-shell に overflow-y: auto を付けると、ズーム後にスクロールコンテナが
     競合して body scroll が機能しなくなるため、ここでは設定しない */
  .workspace  {
    flex-direction: column !important;
    overflow: visible;
    height: auto;
    flex: none;
    min-height: 0;
  }
  .editor-pane {
    border-right: none;
    overflow: visible;
    height: auto;
    flex: none;
  }
  .sidebar {
    position: static; height: auto; width: 100% !important;
    border-right: none; border-bottom: 1px solid var(--border);
    max-height: 260px; overflow-y: auto;
    overscroll-behavior-y: contain; /* サイドバー内スクロールが page scroll へ伝播しないよう隔離 */
  }
  .sidebar.collapsed { max-height: 0; overflow: hidden; border-bottom: none; }
  .sidebar-resizer { display: none !important; }
  .props-panel {
    position: static; height: auto; width: 100%;
    border-top: 1px solid var(--border); max-height: none;
    overflow-y: visible;
  }
  /* デスクトップでパネルを非表示にしていてもモバイルでは必ず表示 */
  #taskEditor.hidden { display: flex !important; }
  .summary-grid { grid-template-columns: repeat(3,1fr); }
  .form-grid    { grid-template-columns: 1fr; }
  .topbar-tab   { max-width: 150px; }
}

@media (max-width: 640px) {
  .topbar { flex-wrap: nowrap; padding: 4px 6px; gap: 4px; min-height: 44px; }
  .topbar-search-wrap { max-width: none; flex: 1; min-width: 0; }
  .topbar-tab { display: none; }
  .search-kbd { display: none; }
  .user-meta { display: none; }
  .user-area { padding: 2px 4px; gap: 4px; }
  .editor-pane { padding: 8px; }
  .summary-grid { grid-template-columns: repeat(3,1fr); gap: 6px; }
  .summary-card { padding: 8px 10px; }
  .summary-card strong { font-size: calc(20px * var(--font-scale)); }
  .task-toolbar { padding: 6px 8px; }
  .sort-tabs .sort-tab { padding: 0 7px; font-size: calc(10px * var(--font-scale)); }
  .task-card { padding: 8px 10px; }
  .props-panel { width: 100%; }
  .task-form  { padding: 10px; }
  .guest-banner { padding: 6px 12px; font-size: calc(11px * var(--font-scale)); }
  .guest-banner-cta { font-size: calc(10px * var(--font-scale)); padding: 2px 8px; }
  .settings-panel { width: min(100%, 100vw); border-radius: var(--r2) var(--r2) 0 0; }
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-panel   { border-radius: var(--r2) var(--r2) 0 0; width: 100%; max-height: 85dvh; }
  .guest-warn-panel { padding: 24px 20px; }
  .toast { bottom: 12px; max-width: 95vw; }
}

@media (max-width: 480px) {
  /* トップバー: プロパティパネル切替ボタンは省略 */
  #propsPanelToggleBtn { display: none !important; }
  /* タスクツールバー: 2行に折り返す */
  .task-toolbar { flex-direction: column; align-items: stretch; gap: 4px; }
  .toolbar-right { justify-content: space-between; }
  .toolbar-path { font-size: calc(11px * var(--font-scale)); }
  /* サマリーカード: 3列を維持しつつコンパクトに */
  .summary-card { padding: 7px 8px; }
  .summary-card strong { font-size: calc(18px * var(--font-scale)); }
  /* ログイン: フッターが山に隠れないよう余白確保 */
  .login-shell { padding-bottom: 52px; }
  .login-site-footer { gap: 4px; font-size: 10px; }
  /* サイドバー: 高さをやや抑える */
  .sidebar { max-height: 200px; }
}

@media (max-width: 400px) {
  .login-card { padding: 24px 16px; }
  .auth-btn { font-size: calc(13px * var(--font-scale)); min-height: 44px; }
  /* サマリーカード: 1列に切り替え */
  .summary-grid { grid-template-columns: 1fr; }
  /* ソートタブ: テキスト省略 */
  .sort-tabs { flex: 1; }
  .sort-tab { flex: 1; text-align: center; }
}

/* ─── Touch friendly ──────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .folder-item { min-height: 38px; }
  .task-card   { padding: 12px 14px; }
  .sort-tab, .icon-tool-btn { min-height: 32px; }
  .task-edit-btn { min-height: 32px; padding: 0 12px; }
  .auth-btn { min-height: 50px; }
  .primary-button, .ghost-button, .danger-button { min-height: 40px; }
  input, textarea, select { font-size: 16px !important; } /* iOS ズーム防止 */
}

/* ─── Print ───────────────────────────────────── */
@media print {
  .topbar, .sidebar, .sidebar-resizer, .props-panel, .guest-banner { display: none; }
  .editor-pane { border: none; padding: 0; }
}