/* ═══════════════════════════════════════════════════
   COptO - Common Design System
   Golden Ratio (φ = 1.618) based tokens
   ═══════════════════════════════════════════════════ */

/* ── Reset ── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ═══ DARK THEME - 黒背景 × 白文字 × プラチナシルバー主役 ═══ */
:root,
[data-theme="dark"] {
    /* Base: 純黒 */
    --bg: #000000;
    --bg-up: #1c1c1e;
    --bg-card: rgba(255, 255, 255, 0.04);
    --bg-card-h: rgba(255, 255, 255, 0.08);
    --bg-input: rgba(255, 255, 255, 0.05);
    /* Text: 純白3段階 */
    --c1: #ffffff;
    --c2: #c7c7cc;
    --c3: #8e8e93;
    --c4: #636366;
    --bdr: rgba(255, 255, 255, 0.14);
    --bdr-h: rgba(255, 255, 255, 0.24);
    /* Accent: モノクロ。--brand(Apple Blue dark)は限定4箇所のみ */
    --accent: #ffffff;
    --accent-dim: rgba(255, 255, 255, 0.14);
    --brand: #0a84ff;
    --brand-dim: rgba(10, 132, 255, 0.16);
    --grad: linear-gradient(180deg, #ffffff 0%, #c7c7cc 50%, #8e8e93 100%);
    --btn-bg: #ffffff;
    --btn-c: #000000;
    --hdr-bg: rgba(0, 0, 0, 0.72);
    --green: #34c759;
    --green-dim: rgba(52, 199, 89, 0.12);
    --orange: #ff9f0a;
    --red: #ff453a;
    --red-soft: #f87171; /* hover系の柔らかい赤 (logout/削除アイコン統一) */
    /* Gold/Silver は mono alias (後方互換のみ・新規使用禁止) */
    --gold: #ffffff;
    --gold-dim: rgba(255, 255, 255, 0.14);
    --gold-grad: linear-gradient(180deg, #ffffff 0%, #c7c7cc 50%, #8e8e93 100%);
    --silver: #ffffff;
    --silver-dim: rgba(255, 255, 255, 0.14);
    --silver-grad: linear-gradient(180deg, #ffffff 0%, #c7c7cc 50%, #8e8e93 100%);
    /* DS v5.1 (2026-04-26 確定): chart は mono gray のみ — Champagne/Platinum 廃止 */
    --chart-primary: #c7c7cc;
    --chart-secondary: #8e8e93;
    --sb-t: rgba(255, 255, 255, 0.08);
    --sb-h: rgba(255, 255, 255, 0.14);
    --toggle-bg: rgba(255, 255, 255, 0.08);
    --toggle-hover: rgba(255, 255, 255, 0.16);
    color-scheme: dark;
}

/* ═══ LIGHT THEME - 白背景 × 黒文字 × シャンパンゴールド主役 ═══ */
[data-theme="light"] {
    /* Base: 純白 + ニュートラル面 (暖色taupe排除・Apple系) */
    --bg: #ffffff;
    --bg-up: #f5f5f7;
    --bg-card: rgba(0, 0, 0, 0.028);
    --bg-card-h: rgba(0, 0, 0, 0.05);
    --bg-input: rgba(0, 0, 0, 0.035);
    /* Text: ニュートラル黒4段階 (暖色なし) */
    --c1: #1d1d1f;
    --c2: #515154;
    --c3: #86868b;
    --c4: #c7c7cc;
    --bdr: rgba(29, 29, 31, 0.09);
    --bdr-h: rgba(29, 29, 31, 0.16);
    /* Accent: モノクロ。--brand(Apple Blue)は限定4箇所のみ(tab active/primary/link/focus) */
    --accent: #1d1d1f;
    --accent-dim: rgba(29, 29, 31, 0.06);
    --brand: #0071e3;
    --brand-dim: rgba(0, 113, 227, 0.10);
    --grad: linear-gradient(180deg, #1d1d1f 0%, #515154 50%, #86868b 100%);
    --btn-bg: #1d1d1f;
    --btn-c: #ffffff;
    --hdr-bg: rgba(255, 255, 255, 0.82);
    --green: #248a3d;
    --green-dim: rgba(36, 138, 61, 0.1);
    --orange: #c93400;
    --red: #d70015;
    --red-soft: #f87171;
    /* Gold/Silver は mono alias (後方互換のみ・新規使用禁止) */
    --gold: #1d1d1f;
    --gold-dim: rgba(29, 29, 31, 0.10);
    --gold-grad: linear-gradient(180deg, #1d1d1f 0%, #6e6d6a 50%, #9c9892 100%);
    --silver: #1d1d1f;
    --silver-dim: rgba(29, 29, 31, 0.10);
    --silver-grad: linear-gradient(180deg, #1d1d1f 0%, #6e6d6a 50%, #9c9892 100%);
    /* DS v5.1 (2026-04-26 確定): chart は mono gray のみ — Champagne/Platinum 廃止 */
    --chart-primary: #6e6d6a;
    --chart-secondary: #9c9892;
    --sb-t: rgba(0, 0, 0, 0.05);
    --sb-h: rgba(0, 0, 0, 0.1);
    --toggle-bg: rgba(0, 0, 0, 0.05);
    --toggle-hover: rgba(0, 0, 0, 0.1);
    color-scheme: light;
}

/* ═══ AUTO THEME - 昼は Light ═══ */
@media (prefers-color-scheme: light) {
    [data-theme="auto"] {
        --bg: #ffffff;
        --bg-up: #fbfaf8;
        --bg-card: rgba(0, 0, 0, 0.028);
        --bg-card-h: rgba(0, 0, 0, 0.055);
        --bg-input: rgba(0, 0, 0, 0.035);
        --c1: #1d1d1f;
        --c2: #6e6d6a;
        --c3: #9c9892;
        --c4: #c7c1b8;
        --bdr: rgba(29, 29, 31, 0.09);
        --bdr-h: rgba(29, 29, 31, 0.17);
        --accent: #1d1d1f;
        --accent-dim: rgba(29, 29, 31, 0.10);
        --grad: linear-gradient(180deg, #1d1d1f 0%, #6e6d6a 50%, #9c9892 100%);
        --btn-bg: #1d1d1f;
        --btn-c: #ffffff;
        --hdr-bg: rgba(255, 255, 255, 0.82);
        --green: #248a3d;
        --green-dim: rgba(36, 138, 61, 0.1);
        --orange: #c93400;
        --red: #d70015;
        --red-soft: #f87171;
        --gold: #1d1d1f;
        --gold-dim: rgba(29, 29, 31, 0.10);
        --gold-grad: linear-gradient(180deg, #1d1d1f 0%, #6e6d6a 50%, #9c9892 100%);
        --silver: #1d1d1f;
        --silver-dim: rgba(29, 29, 31, 0.10);
        --silver-grad: linear-gradient(180deg, #1d1d1f 0%, #6e6d6a 50%, #9c9892 100%);
        /* DS v5.1 (2026-04-26 確定): chart は mono gray のみ */
        --chart-primary: #6e6d6a;
        --chart-secondary: #9c9892;
        --toggle-bg: rgba(0, 0, 0, 0.05);
        --toggle-hover: rgba(0, 0, 0, 0.1);
        color-scheme: light;
    }
}

/* ═══ Golden Ratio Design Tokens ═══
   φ = 1.618  |  Fibonacci: 1,2,3,5,8,13,21,34,55,89,144,233,377,610
   Header 55px / Padding 34px / Logo 21px = フィボナッチ起点     */
:root {
    --font-en: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', sans-serif;
    --font-jp: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;

    /* ── Typography φ-Scale (base 13px × φⁿ) ── */
    --fs-2xs: 8px;
    --fs-xs: 11px;
    --fs-sm: 13px;
    --fs-base: 14px;
    --fs-md: 16px;
    --fs-lg: 21px;
    --fs-xl: 26px;
    --fs-2xl: 34px;
    --fs-3xl: 42px;
    --fs-4xl: 55px;
    --fs-5xl: 68px;

    /* ── Fibonacci Spacing ── */
    --sp-1: 1px;
    --sp-2: 2px;
    --sp-3: 3px;
    --sp-5: 5px;
    --sp-8: 8px;
    --sp-13: 13px;
    --sp-21: 21px;
    --sp-34: 34px;
    --sp-55: 55px;
    --sp-89: 89px;
    --sp-144: 144px;
    --sp-233: 233px;
    /* Legacy aliases */
    --sp-xs: 5px;
    --sp-sm: 8px;
    --sp-base: 13px;
    --sp-md: 21px;
    --sp-lg: 34px;
    --sp-xl: 55px;
    --sp-2xl: 89px;
    --sp-3xl: 144px;

    /* ── Layout ── */
    --max-w: 987px;
    /* Fibonacci */
    --hdr-h: 55px;
    /* Fibonacci */

    /* ── Fibonacci Radius ── */
    --radius-xs: 3px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 13px;
    --radius-xl: 21px;

    /* DS v5.1 Tesla unified 3-tier radius (確定 2026-04-26、 Fibonacci と並走)
       box 12 / button 10 / badge 8 — 引算の美学 + premium B2B */
    --radius-box: 12px;
    --radius-button: 10px;
    --radius-badge: 8px;

    /* ── Golden Ratio Transitions ── */
    --ease: cubic-bezier(0.382, 0, 0.618, 1);
    --ease-spring: cubic-bezier(0.5, 1.25, 0.6, 1); /* 適度overshoot 5% (Apple HIG smooth spring CSS等価) */
    --t-fast: 0.13s var(--ease);
    --t-base: 0.34s var(--ease);
    --t-slow: 0.55s var(--ease);

    /* ── Apple HIG Motion (2026-04-21 Phase 1) ── */
    --ease-hig: cubic-bezier(0.25, 0.1, 0.25, 1);
    --t-hover: 120ms var(--ease-hig);
    --t-modal: 220ms var(--ease-hig);
    --t-sheet: 260ms var(--ease-hig);
    --t-page:  180ms var(--ease-hig);

    /* ── Apple HIG Shadows (Light base / Dark は [data-theme] で上書き) ── */
    --shadow-sm: 0 1px 2px rgba(29, 29, 31, 0.04);
    --shadow-md: 0 4px 16px rgba(29, 29, 31, 0.06), 0 1px 2px rgba(29, 29, 31, 0.04);
    --shadow-lg: 0 12px 40px rgba(29, 29, 31, 0.08), 0 2px 4px rgba(29, 29, 31, 0.04);
    --shadow-accent: 0 0 0 1px var(--accent-dim), 0 4px 16px var(--accent-dim);
}

/* Dark theme shadow override - 黒基調は純黒の奥行きで階層表現 */
:root,
[data-theme="dark"] {
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.7), 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-accent: 0 0 0 1px var(--accent-dim), 0 4px 16px rgba(209, 209, 214, 0.15);
}

/* ── Base ── */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* オーバースクロール時に sticky ヘッダ下線が宙に現れる「謎の黒線」を抑止。
       バウンドの余白を常にページ背景で塗り、ラバーバンド reveal を止める */
    background: var(--bg);
    overscroll-behavior-y: none;
}

body {
    font-family: var(--font-en), var(--font-jp);
    background: var(--bg);
    color: var(--c1);
    line-height: 1.618;
    min-height: 100vh;
    transition: background .4s, color .4s;
}

/* Apple HIG: 数値は tabular-nums で整列感を出す（管理画面の統一感UP） */
.num,
.stat-value,
.stat-num,
td[data-num],
.tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Apple HIG: prefers-reduced-motion 対応（必須） */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══ A11y utilities (Phase 5) ═══ */
/* Screen reader only (WCAG 2.1) */
.sr-only,
.u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip to main content link (WCAG 2.4.1 Bypass Blocks) */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--accent);
    color: var(--btn-c);
    padding: 10px 16px;
    z-index: 99999;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    font-weight: 600;
    font-size: 12px;
    transition: top var(--t-hover);
}
.skip-link:focus {
    top: 0;
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: more) {
    :root {
        --bdr: rgba(29, 29, 31, 0.24);
        --bdr-h: rgba(29, 29, 31, 0.40);
    }
    :root, [data-theme="dark"] {
        --bdr: rgba(255, 255, 255, 0.28);
        --bdr-h: rgba(255, 255, 255, 0.44);
    }
}

/* ═══════════════════════════════════════════════════
   Phase 4: Motion Polish - Apple HIG準拠の微細モーション
   全ページ共通で「card lift / button sweep / input focus ring」を適用
   ═══════════════════════════════════════════════════ */

/* ─── Card lift (hover時に浮き上がる) ─── */
.stat-card,
.stat,
.section-card,
.project-item {
    transition:
        transform var(--t-hover),
        box-shadow var(--t-hover),
        border-color var(--t-hover);
}
.stat-card:hover,
.stat:hover,
.section-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--bdr-h);
}

/* ─── Button polish ─── */
.btn,
button[class*="btn-"],
.doc-btn,
.dash-doc-btn {
    transition:
        background var(--t-hover),
        border-color var(--t-hover),
        color var(--t-hover),
        transform var(--t-hover),
        box-shadow var(--t-hover);
    will-change: transform;
}
.btn:active,
button[class*="btn-"]:active,
.doc-btn:active {
    transform: scale(0.97);
}

/* ─── Focus ring: アクセント色 (HIG準拠) ─── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 5px);
}

/* ─── Page fade-in (コンテンツ表示時) ─── */
@keyframes coptoFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dash-ready,
.stats-grid > .stat-card,
.sections-grid > .section-card,
main > section,
main > div {
    animation: coptoFadeIn var(--t-page) both;
}
.stats-grid > .stat-card:nth-child(1) { animation-delay: 0ms; }
.stats-grid > .stat-card:nth-child(2) { animation-delay: 40ms; }
.stats-grid > .stat-card:nth-child(3) { animation-delay: 80ms; }
.stats-grid > .stat-card:nth-child(4) { animation-delay: 120ms; }
.stats-grid > .stat-card:nth-child(5) { animation-delay: 160ms; }

/* ─── Theme toggle polish ─── */
.theme-toggle,
.c-theme-toggle {
    transition:
        background var(--t-hover),
        color var(--t-hover),
        transform var(--t-hover);
}
.theme-toggle:hover,
.c-theme-toggle:hover {
    background: var(--toggle-hover);
    transform: rotate(-12deg);
}

/* ─── Table row hover ─── */
tbody tr,
.history-table tbody tr {
    transition: background var(--t-hover);
}
tbody tr:hover {
    background: var(--bg-card-h);
}

/* ─── Status badge ─── */
.status-badge {
    transition: transform var(--t-hover);
}
.status-badge:hover { transform: scale(1.05); }

/* ─── Loader: auth-loading spinner ─── */
.auth-loading-spinner,
.u-auth-spinner {
    animation: authSpin 900ms linear infinite;
}
@keyframes authSpin {
    to { transform: rotate(360deg); }
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

/* ═══ Common Header ═══ */
.c-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--hdr-h);
    padding: 0 34px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--hdr-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--bdr);
    transition: transform .4s, box-shadow .4s, background-color .4s, color .4s, border-color .4s, opacity .4s;
}

/* ═══ Common Logo - 18px unified ═══ */
.c-logo {
    font-family: var(--font-en);
    font-size: 21px;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: var(--c1);
    text-decoration: none;
    display: flex;
    align-items: baseline;
}

.c-logo-c {
    /* mono化: グラデ廃止・通常色 */
    color: var(--c1);
}

.c-theme-toggle,
.theme-toggle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--c2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--t-base);
    flex-shrink: 0;
    margin-left: var(--sp-8);
}

.c-theme-toggle:hover,
.theme-toggle:hover {
    color: var(--c1);
    transform: scale(1.15);
}

.c-theme-toggle svg,
.theme-toggle svg {
    width: 20px;
    height: 20px;
    transition: transform .4s cubic-bezier(0.5, 1.25, 0.6, 1);
}

.c-theme-toggle:active svg,
.theme-toggle:active svg {
    transform: rotate(30deg);
}

.icon-sun,
.icon-moon {
    display: none;
}

[data-theme="dark"] .icon-sun {
    display: block;
}

[data-theme="light"] .icon-moon {
    display: block;
}

/* Auto theme: follow system preference for icon visibility */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] .icon-sun {
        display: block;
    }

    [data-theme="auto"] .icon-moon {
        display: none;
    }
}

@media (prefers-color-scheme: light) {
    [data-theme="auto"] .icon-moon {
        display: block;
    }

    [data-theme="auto"] .icon-sun {
        display: none;
    }
}

/* ═══ Common Buttons ═══ */
.c-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-8) var(--sp-21);
    border-radius: 10px;
    font-size: var(--fs-sm);
    font-weight: 600;
    font-family: inherit;
    border: 1px solid var(--bdr);
    background: transparent;
    color: var(--c2);
    cursor: pointer;
    transition: transform var(--t-base), box-shadow var(--t-base), background-color var(--t-base), color var(--t-base), border-color var(--t-base), opacity var(--t-base);
    text-decoration: none;
}

.c-btn:hover {
    border-color: var(--bdr-h);
    color: var(--c1);
    background: var(--bg-card);
}

.c-btn-primary {
    background: var(--btn-bg);
    color: var(--btn-c);
    border-color: transparent;
}

.c-btn-primary:hover {
    opacity: 0.9;
    outline: 1px solid #c7c7cc;
    outline-offset: 0;
}

.c-btn:disabled,
.c-btn[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(100%);
}

/* ═══ Common Label / Badge ═══ */
.c-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--c3);
    padding: var(--sp-3) var(--sp-8);
    border: 1px solid var(--bdr);
    border-radius: 10px;
    line-height: 1;
}

/* ═══ Common Footer ═══ */
.c-footer {
    padding: var(--sp-21);
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--c4);
    border-top: 1px solid var(--bdr);
    margin-top: var(--sp-55);
}

.c-footer a {
    color: var(--c3);
    text-decoration: none;
    transition: color var(--t-base);
}

.c-footer a:hover {
    color: var(--c1);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ═══ Common Progress Bar ═══ */
.c-prog-wrap {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
}

.c-prog-bar {
    flex: 1;
    height: 4px;
    background: rgba(128, 128, 128, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.c-prog-fill {
    height: 100%;
    background: var(--grad);
    border-radius: 2px;
    transition: width 0.8s;
}

.c-prog-pct {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--accent);
    min-width: 36px;
    text-align: right;
}

/* ═══ Scrollbar ═══ */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--bdr);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bdr-h);
}

/* ═══ Common Responsive ═══ */
@media (max-width: 768px) {
    .c-header {
        padding: 0 var(--sp-md);
    }

    .c-logo {
        font-size: 18px;
    }

    .c-footer {
        padding: var(--sp-base);
        font-size: 11px;
    }
}

/* ═══ Utility Classes (inline style replacement) ═══ */

/* Typography */
.u-fw500-c1 { font-weight: 500; color: var(--c1); }
.u-fw600-c2 { font-weight: 600; color: var(--c2); }
.u-fw700-c2 { font-weight: 600; color: var(--c2); }
.u-fw600-right { font-weight: 600; text-align: right; }
.u-fs11 { font-size: 11px; }
.u-fs11-c3 { font-size: 11px; color: var(--c3); }
.u-fs14-fw700 { font-size: 14px; font-weight: 600; }
.u-fs13-fw700 { font-size: 13px; font-weight: 600; }
.u-label-upper { font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--c4); }
.u-label-upper-block { font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--c4); display: block; margin-bottom: 8px; }
.u-kpi-value { font-size: 10px; font-weight: 600; color: var(--c4); text-transform: uppercase; letter-spacing: 1px; }
.u-sim-value { text-align: center; font-size: 20px; font-weight: 800; margin-top: 4px; }
.u-big-value { font-size: 22px; font-weight: 800; color: var(--c1); margin-top: 4px; }
.u-grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: currentColor; }

/* Layout */
.u-flex-between { display: flex; justify-content: space-between; align-items: center; }
.u-flex-between-mb20 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.u-flex-gap6 { display: flex; gap: 6px; }
.u-flex-gap8 { display: flex; gap: 8px; }
.u-flex-center-gap8 { display: flex; align-items: center; gap: 8px; }
.u-flex-wrap-gap12 { display: flex; gap: 12px; flex-wrap: wrap; }
.u-grid-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.u-grid-3col-16 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; text-align: center; }
.u-col-span2 { grid-column: span 2; }

/* Spacing */
.u-mt10 { margin-top: 10px; }
.u-mt20 { margin-top: 20px; }
.u-mb20 { margin-bottom: 20px; }
.u-p20 { padding: 20px; }

/* Visibility */
.u-hidden { display: none; }

/* Components */
.u-auth-loading, .auth-loading { display: flex; align-items: center; justify-content: center; min-height: 100vh; flex-direction: column; gap: 16px; background: var(--bg); transition: opacity .22s cubic-bezier(.32,.72,.22,1); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Noto Sans JP', sans-serif; }
.u-auth-loading.fade-out, .auth-loading.fade-out { opacity: 0; pointer-events: none; }
.u-auth-spinner, .auth-loading-spinner { width: 28px; height: 28px; border: 1.5px solid var(--bdr); border-top-color: var(--c2); border-radius: 50%; animation: authSpin .8s linear infinite; }
@keyframes authSpin { to { transform: rotate(360deg); } }
.u-auth-text, .auth-loading-text { color: var(--c3); font-size: 13px; letter-spacing: -0.011em; font-weight: 400; }
@keyframes dashFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.dash-ready { animation: dashFadeIn .35s cubic-bezier(.32,.72,.22,1) forwards; }
.u-btn-primary { background: var(--btn-bg); color: var(--btn-c); border-color: transparent; }
.u-btn-primary-sm { background: var(--btn-bg); color: var(--btn-c); border-color: transparent; font-size: 11px; }
.u-gtd-card { flex: 1; min-width: 120px; padding: 14px 18px; border-radius: 10px; border: 1px solid var(--bdr); background: var(--bg-card); }
.u-gtd-card-lg { flex: 1; min-width: 140px; padding: 14px 18px; border-radius: 10px; border: 1px solid var(--bdr); background: var(--bg-card); }
.u-section-footer { padding: 14px 20px; border-top: 1px solid var(--bdr); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.u-check-label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--c2); cursor: pointer; }
.u-checkbox { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.u-range { width: 100%; accent-color: var(--accent); }
.u-sim-result { margin-top: 20px; padding: 20px; border: 1px solid var(--bdr); border-radius: 12px; background: var(--bg-card); }
.u-filter-bar { padding: 12px 20px; border-bottom: 1px solid rgba(128,128,128,.06); display: flex; gap: 6px; flex-wrap: wrap; }
.u-back-link { color: var(--c3); font-size: 12px; text-decoration: none; }