/* 設計變數：色彩、字級、間距、圓角、陰影 */
:root {
    --bg: #f2f2f7;
    --bg-outer: #e4e4ec;
    --surface: #ffffff;
    --fill: #f2f2f7;
    --text: #1c1c1e;
    --muted: #6b6b76;
    --line: #e5e5ea;
    --grabber: #c7c7cc;
    --primary: #5558e8;
    --primary-ink: #4f46e5;
    --on-primary: #ffffff;
    --primary-soft: #e9eaff;
    --primary-line: rgba(85, 88, 232, 0.45);
    --primary-glow: rgba(85, 88, 232, 0.16);
    --danger: #c9261a;
    --on-danger: #ffffff;
    --star: #d97706;
    --star-ink: #b45309;
    --star-soft: #fff4dc;
    --star-off: #8a8a96;
    --ring: #8a8a96;
    --track: #e5e5ea;
    --level-0: #8a8a96;
    --level-1: #ea580c;
    --level-2: #b58105;
    --level-3: #5558e8;
    --level-4: #16a34a;
    --backdrop: rgba(18, 18, 30, 0.42);
    --toast-bg: rgba(28, 28, 30, 0.94);
    --toast-text: #ffffff;
    --toast-border: transparent;
    --badge-bg: #ffe9b8;
    --badge-text: #6b3a00;
    --badge-line: #e8b84a;
    --done-soft: #e3f6ea;
    --done-ink: #166534;
    --done-solid: #15803d;
    --hero-grad: linear-gradient(135deg, #5558e8, #3f37c9);
    --on-hero-soft: #f4f4ff;
    --ac-0: #4f46e5;
    --ac-1: #b45309;
    --ac-2: #0f766e;
    --ac-3: #be185d;
    --ac-4: #0369a1;
    --ac-5: #c2410c;
    --ac-6: #6d28d9;
    --ac-7: #4d7c0f;
    --sh-card: 0 0 0 1px rgba(20, 20, 50, 0.05), 0 4px 12px rgba(20, 20, 50, 0.09);
    --sh-float: 0 10px 30px rgba(20, 20, 50, 0.2);
    --sh-fab: 0 8px 22px rgba(85, 88, 232, 0.42), 0 2px 6px rgba(85, 88, 232, 0.3);
    --sh-bar: 0 -1px 0 var(--line), 0 -10px 30px rgba(20, 20, 50, 0.06);
    --sh-sheet: 0 -8px 40px rgba(20, 20, 50, 0.2);
    --sh-shell: 0 0 0 1px var(--line), 0 24px 70px rgba(20, 20, 50, 0.12);

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

    --fs-display: 30px;
    --fs-body: 17px;
    --fs-sub: 15px;
    --fs-caption: 14px;
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 24px;
    --r-pill: 999px;
    --tap: 44px;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --tile-suitcase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='14' fill='%23e9eaff'/%3E%3Cg fill='none' stroke='%234f46e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' transform='translate(12 12)'%3E%3Cpath d='M6 8h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2z'/%3E%3Cpath d='M9 8V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M9 12v4M15 12v4'/%3E%3C/g%3E%3C/svg%3E");
    --tile-offline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='14' fill='%23ececf1'/%3E%3Cg fill='none' stroke='%236b6b76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' transform='translate(12 12)'%3E%3Cpath d='M12 20h.01M8.5 16.4a5 5 0 0 1 7 0M5 12.9a10 10 0 0 1 5.2-2.7M19 12.9a10 10 0 0 0-2-1.5M2 8.8a15 15 0 0 1 4.2-2.6M22 8.8a15 15 0 0 0-11.3-3.8M3 3l18 18'/%3E%3C/g%3E%3C/svg%3E");

    --i-chevron-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
    --i-chevron-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
    --i-chevron-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
    --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    --i-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M7.6 12h.01M12 12h.01M16.4 12h.01' stroke-width='3'/%3E%3C/svg%3E");
    --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");
    --i-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M8 12.5l3 3 5-6'/%3E%3C/svg%3E");
    --i-grip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14M5 12h14M5 16h14'/%3E%3C/svg%3E");
    --i-wifi-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h.01M8.5 16.4a5 5 0 0 1 7 0M5 12.9a10 10 0 0 1 5.2-2.7M19 12.9a10 10 0 0 0-2-1.5M2 8.8a15 15 0 0 1 4.2-2.6M22 8.8a15 15 0 0 0-11.3-3.8M3 3l18 18'/%3E%3C/svg%3E");
    --i-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5z'/%3E%3Cpath d='M15 5l4 4'/%3E%3C/svg%3E");
    --i-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1'/%3E%3C/svg%3E");
    --i-export: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4M8 8l4-4 4 4M5 14v5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5'/%3E%3C/svg%3E");
    --i-import: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M8 11l4 4 4-4M5 14v5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5'/%3E%3C/svg%3E");
    --i-sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4v16M4 8l4-4 4 4M16 20V4M12 16l4 4 4-4'/%3E%3C/svg%3E");
    --i-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3'/%3E%3C/svg%3E");
    --i-star-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.8 5.8 6.2.9-4.5 4.4 1.1 6.2L12 17.3 6.4 20.3l1.1-6.2L3 9.7l6.2-.9z'/%3E%3C/svg%3E");
    --i-star-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.8 5.8 6.2.9-4.5 4.4 1.1 6.2L12 17.3 6.4 20.3l1.1-6.2L3 9.7l6.2-.9z'/%3E%3C/svg%3E");
    --i-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4M15 8l4 4-4 4M19 12H9'/%3E%3C/svg%3E");
    --i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z'/%3E%3C/svg%3E");
    --i-reset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 1 2.4 5.7M4 19v-5h5'/%3E%3C/svg%3E");
    --i-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v12a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zM14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");
    --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9.5 16.5h-19zM12 10v4.5M12 17.4h.01'/%3E%3C/svg%3E");
    --i-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E");
    --i-history: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8M3 3v5h5M12 7v5l3 2'/%3E%3C/svg%3E");
    --i-suitcase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2z'/%3E%3Cpath d='M9 8V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M9 12v4M15 12v4'/%3E%3C/svg%3E");
    --i-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M5.3 18.7l1.6-1.6M17.1 6.9l1.6-1.6'/%3E%3C/svg%3E");
    --i-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8.5 8.5 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5z'/%3E%3C/svg%3E");
    --i-contrast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3v18' /%3E%3Cpath d='M12 3a9 9 0 0 1 0 18z' fill='%23000'/%3E%3C/svg%3E");
}

/* 版面風格：theme-boot.js 在首次繪製前寫入 data-theme（light／dark） */
html[data-theme="light"] {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0d0d12;
    --bg-outer: #050508;
    --surface: #1a1a22;
    --fill: #26262f;
    --text: #f5f5f7;
    --muted: #a1a1ab;
    --line: #2c2c36;
    --grabber: #4a4a56;
    --primary: #5e61f0;
    --primary-ink: #a5a7ff;
    --on-primary: #ffffff;
    --primary-soft: #23243d;
    --primary-line: rgba(165, 167, 255, 0.5);
    --primary-glow: rgba(129, 140, 248, 0.25);
    --danger: #ff6b61;
    --on-danger: #1a1a22;
    --star: #fbbf24;
    --star-ink: #fbbf24;
    --star-soft: #3a2f12;
    --star-off: #7a7a86;
    --ring: #7a7a86;
    --track: #34343e;
    --level-0: #8a8a96;
    --level-1: #fb923c;
    --level-2: #fbbf24;
    --level-3: #818cf8;
    --level-4: #4ade80;
    --backdrop: rgba(0, 0, 0, 0.62);
    --toast-bg: #34343e;
    --toast-text: #f5f5f7;
    --toast-border: #4a4a56;
    --badge-bg: #3a2f12;
    --badge-text: #fbbf24;
    --badge-line: #6b5416;
    --done-soft: #173a28;
    --done-ink: #4ade80;
    --done-solid: #4ade80;
    --hero-grad: linear-gradient(135deg, #3c3fb5, #2a2685);
    --on-hero-soft: #d6d8ff;
    --ac-0: #a5a7ff;
    --ac-1: #fbbf24;
    --ac-2: #2dd4bf;
    --ac-3: #f472b6;
    --ac-4: #38bdf8;
    --ac-5: #fb8a5c;
    --ac-6: #b39dfc;
    --ac-7: #a3e635;
    --sh-card: 0 0 0 1px #2c2c36;
    --sh-float: 0 10px 30px rgba(0, 0, 0, 0.6);
    --sh-fab: 0 8px 22px rgba(0, 0, 0, 0.55);
    --sh-bar: 0 -1px 0 var(--line);
    --sh-sheet: 0 -8px 40px rgba(0, 0, 0, 0.6);

    --tile-suitcase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='14' fill='%2325264a'/%3E%3Cg fill='none' stroke='%23a5a7ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' transform='translate(12 12)'%3E%3Cpath d='M6 8h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2z'/%3E%3Cpath d='M9 8V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M9 12v4M15 12v4'/%3E%3C/g%3E%3C/svg%3E");
    --tile-offline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='14' fill='%2326262f'/%3E%3Cg fill='none' stroke='%23a1a1ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' transform='translate(12 12)'%3E%3Cpath d='M12 20h.01M8.5 16.4a5 5 0 0 1 7 0M5 12.9a10 10 0 0 1 5.2-2.7M19 12.9a10 10 0 0 0-2-1.5M2 8.8a15 15 0 0 1 4.2-2.6M22 8.8a15 15 0 0 0-11.3-3.8M3 3l18 18'/%3E%3C/g%3E%3C/svg%3E");
}

/* 基礎 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    background: var(--bg-outer);
    color: var(--text);
    font: var(--fs-body)/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}

body[data-sheet="open"] .page-body {
    overflow: hidden;
}

button,
input {
    font: inherit;
    color: inherit;
}

button {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    touch-action: manipulation;
}

button:disabled {
    opacity: 0.4;
    cursor: default;
}

:focus-visible {
    outline: 2px solid var(--primary-ink);
    outline-offset: 2px;
}

/* 圖示：以遮罩套用，顏色跟著文字色 */
.icon-btn::before,
.fab::before,
.handle::before,
.star::before,
.category-head::after,
.card-foot::after,
.card-meta::before,
.card-tile::before,
.card-percent::before,
.settings-icon::before,
.changelog-current::after,
.offline-badge::before,
.progress [data-role="progress-count"]::before,
.sheet-message::before,
.login-privacy::before,
.sheet-menu .sheet-item::before {
    background-color: currentColor;
    -webkit-mask-image: var(--ic);
    mask-image: var(--ic);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* 外殼：桌機置中、最寬 480px；內容區自己捲動，頂列與進度條固定 */
.app {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    max-width: 480px;
    margin: 0 auto;
    background: var(--bg);
    overflow: hidden;
}

@media (min-width: 520px) {
    .app,
    .privacy {
        box-shadow: var(--sh-shell);
    }
}

.view {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    touch-action: manipulation;
}

.page-body input {
    -webkit-user-select: text;
    user-select: text;
}

.page {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

.view[data-transition="forward"] > .page {
    animation: page-in-right 0.26s var(--ease);
}

.view[data-transition="back"] > .page {
    animation: page-in-left 0.26s var(--ease);
}

@keyframes page-in-right {
    from { transform: translateX(100%); }
}

@keyframes page-in-left {
    from { transform: translateX(-30%); opacity: 0.6; }
}

/* 離線標示 */
.offline-badge {
    position: absolute;
    top: calc(var(--safe-top) + 44px);
    left: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 6px;
    transform: translateX(-50%);
    padding: 4px 14px 4px 10px;
    border: 1px solid var(--badge-line);
    border-radius: var(--r-pill);
    background: var(--badge-bg);
    color: var(--badge-text);
    font-size: var(--fs-caption);
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: var(--sh-float);
    pointer-events: none;
}

.offline-badge::before {
    --ic: var(--i-wifi-off);
    content: "";
    width: 16px;
    height: 16px;
}

body[data-net="offline"] [data-online-only] {
    opacity: 0.4;
    filter: saturate(0.3);
    cursor: not-allowed;
}

body[data-net="offline"] [data-role$="-handle"] {
    pointer-events: none;
}

/* 頂列 */
.topbar {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--safe-top) calc(8px + var(--safe-right)) 0 calc(8px + var(--safe-left));
    min-height: calc(56px + var(--safe-top));
    background: var(--surface);
    box-shadow: 0 1px 0 var(--line);
    transition: background-color 0.2s;
}

.topbar-side {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 56px;
}

.topbar-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: var(--fs-body);
    font-weight: 700;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 「我的清單」頂列：大標題靠左 */
.topbar:where(:has(> .topbar-side:first-child:empty)) {
    min-height: calc(76px + var(--safe-top));
    background: linear-gradient(180deg, var(--primary-soft) 0%, var(--bg) 100%);
    box-shadow: none;
}

.topbar:where(:has(> .topbar-side:first-child:empty)) > .topbar-side:first-child {
    display: none;
}

.topbar:where(:has(> .topbar-side:first-child:empty)) .topbar-title {
    padding-left: 8px;
    font-size: var(--fs-display);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-align: left;
}

/* 排序模式：頂列染色 */
.page[data-sorting="1"] .topbar {
    background: var(--primary-soft);
    box-shadow: none;
}

.page[data-sorting="1"] .topbar-title {
    color: var(--primary-ink);
}

.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tap);
    height: var(--tap);
    border-radius: 50%;
    color: var(--primary-ink);
    font-size: 0;
    line-height: 1;
    transition: background-color 0.15s;
}

.icon-btn::before {
    content: "";
    width: 26px;
    height: 26px;
}

.icon-btn[data-action="back"]::before {
    --ic: var(--i-chevron-l);
    width: 28px;
    height: 28px;
}

.icon-btn[data-action="more"]::before {
    --ic: var(--i-more);
}

.icon-btn:active {
    background-color: var(--primary-soft);
}

.text-btn {
    min-width: var(--tap);
    height: var(--tap);
    padding: 0 12px;
    border: 4px solid transparent;
    border-radius: var(--r-pill);
    background-clip: padding-box;
    color: var(--primary-ink);
    font-size: var(--fs-body);
    font-weight: 700;
}

.text-btn[data-action="sort-done"] {
    background-color: var(--primary);
    color: var(--on-primary);
}

.text-btn:active {
    opacity: 0.8;
}

.avatar {
    width: var(--tap);
    height: var(--tap);
    border: 4px solid transparent;
    border-radius: 50%;
    background-color: var(--primary);
    background-image: var(--hero-grad);
    background-clip: padding-box;
    color: var(--on-primary);
    font-size: var(--fs-sub);
    font-weight: 700;
    line-height: 1;
    transition: transform 0.15s var(--spring);
}

.avatar:active {
    transform: scale(0.92);
}

.page-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    padding: var(--s-2) calc(16px + var(--safe-right)) calc(112px + var(--safe-bottom)) calc(16px + var(--safe-left));
}

.page-body:has(~ .progress) {
    padding-top: var(--s-4);
    padding-bottom: 24px;
}

/* 按鈕 */
.btn-primary,
.btn-danger,
.btn-plain {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 0 var(--s-4);
    border-radius: var(--r-md);
    font-size: var(--fs-body);
    font-weight: 700;
    transition: transform 0.12s var(--ease), filter 0.12s;
}

.btn-primary:not(:disabled):active,
.btn-danger:active,
.btn-plain:active {
    transform: scale(0.98);
    filter: brightness(0.94);
}

.btn-primary {
    background: var(--primary);
    color: var(--on-primary);
}

.btn-primary:disabled {
    background: var(--track);
    color: var(--muted);
    opacity: 1;
}

.btn-danger {
    background: var(--danger);
    color: var(--on-danger);
}

.btn-plain {
    background: var(--fill);
    color: var(--text);
}

.login-dev .btn-plain {
    background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--ring);
}

/* 空狀態 */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-6);
    min-height: 70%;
    padding: 0 32px;
    color: var(--muted);
    font-size: var(--fs-body);
    font-weight: 600;
    text-align: center;
}

.empty::before,
.category-list:empty::before {
    content: "";
    flex: none;
    width: 128px;
    height: 128px;
    margin-bottom: var(--s-6);
    border-radius: 38px;
    background: var(--tile-suitcase) center / contain no-repeat;
    box-shadow: 0 0 0 14px var(--primary-soft), 0 0 0 32px color-mix(in srgb, var(--primary) 7%, transparent), 0 14px 36px var(--primary-glow);
}

.empty:not(:has(button))::before {
    background-image: var(--tile-offline);
    box-shadow: 0 0 0 14px var(--fill);
}

.empty .btn-primary {
    width: auto;
    min-width: 240px;
    min-height: 56px;
    margin-top: var(--s-4);
    border-radius: var(--r-pill);
    background-image: var(--hero-grad);
    color: var(--on-primary);
    font-size: 18px;
    box-shadow: var(--sh-fab);
}

.page:has(.empty .btn-primary) .fab {
    display: none;
}

.category-list:empty {
    display: flex;
    justify-content: center;
    padding: 40px 0 28px;
}

/* 我的清單 */
.card-list,
.item-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 卡片底：清單卡片、設定選項框、版本歷程條目共用 */
.card,
.settings-options,
.changelog-entry {
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--sh-card);
}

.card {
    --accent: var(--ac-0);
    position: relative;
    margin-bottom: var(--s-4);
    overflow: hidden;
    transition: transform 0.15s var(--ease), background-color 0.15s;
}

.card[data-accent="1"] { --accent: var(--ac-1); }
.card[data-accent="2"] { --accent: var(--ac-2); }
.card[data-accent="3"] { --accent: var(--ac-3); }
.card[data-accent="4"] { --accent: var(--ac-4); }
.card[data-accent="5"] { --accent: var(--ac-5); }
.card[data-accent="6"] { --accent: var(--ac-6); }
.card[data-accent="7"] { --accent: var(--ac-7); }

.card:active {
    transform: scale(0.985);
}

.card-cover {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 96px;
    padding: 18px var(--s-4) var(--s-4);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 17%, var(--surface)) 0%, var(--surface) 78%);
}

.card-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: color-mix(in srgb, var(--accent) 20%, var(--surface));
    color: var(--accent);
}

.card-tile::before {
    --ic: var(--i-suitcase);
    content: "";
    width: 26px;
    height: 26px;
}

.card .handle {
    margin-left: 0;
    border-radius: var(--r-md);
    background: var(--primary-soft);
}

.card-main {
    flex: 1;
    min-width: 0;
}

.card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.card-categories {
    margin-top: var(--s-1);
    overflow: hidden;
    color: color-mix(in srgb, var(--muted), var(--text) 28%);
    font-size: var(--fs-caption);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-ring {
    position: relative;
    flex: none;
    width: 60px;
    height: 60px;
}

.card-ring svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ring-track,
.ring-arc {
    fill: none;
    stroke-width: 6;
}

.ring-track {
    stroke: color-mix(in srgb, var(--lvl) 8%, var(--surface));
}

.ring-arc {
    stroke: var(--lvl);
    stroke-linecap: round;
}

.card-ring[data-level="0"] .ring-arc {
    display: none;
}

.card-ring[data-level="0"] .ring-track {
    stroke: var(--track);
}

.card-percent {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sub);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.card[data-complete="1"] .ring-arc,
.card[data-complete="1"] .ring-track {
    stroke: var(--done-solid);
}

.card[data-complete="1"] .card-percent {
    inset: 9px;
    border-radius: 50%;
    background: var(--done-soft);
    color: var(--done-ink);
    font-size: 0;
}

.card[data-complete="1"] .card-percent::before {
    --ic: var(--i-check);
    content: "";
    width: 20px;
    height: 20px;
}

.card-foot {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 48px;
    padding: 0 var(--s-4);
    border-top: 1.5px dashed var(--line);
}

.card-foot::after {
    --ic: var(--i-chevron-r);
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--ring);
}

.page[data-sorting="1"] .card-foot::after,
.page[data-sorting="1"] .category-head::after {
    display: none;
}

.card-meta {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 6px;
    min-width: 0;
    color: var(--muted);
    font-size: var(--fs-sub);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.card-meta::before {
    --ic: var(--i-check-circle);
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--muted);
}

.card[data-complete="1"] .card-meta {
    color: var(--done-ink);
    font-weight: 700;
}

.card[data-complete="1"] .card-meta::before {
    color: var(--done-ink);
}

.bar {
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--track);
    overflow: hidden;
}

.bar-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--lvl);
    transition: width 0.4s var(--ease), background-color 0.3s;
}

/* 進度等級色：進度條與清單卡片進度環；底部區塊另依內含的進度條取色（:has 分開寫，不支援時不連帶失效） */
[data-level="0"] { --lvl: var(--level-0); }
[data-level="1"] { --lvl: var(--level-1); }
[data-level="2"] { --lvl: var(--level-2); }
[data-level="3"] { --lvl: var(--level-3); }
[data-level="4"] { --lvl: var(--level-4); }

.fab {
    position: absolute;
    right: calc(20px + var(--safe-right));
    bottom: calc(20px + var(--safe-bottom));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary);
    background-image: var(--hero-grad);
    color: var(--on-primary);
    font-size: 0;
    line-height: 1;
    box-shadow: var(--sh-fab);
    transition: transform 0.15s var(--spring);
}

.fab::before {
    --ic: var(--i-plus);
    content: "";
    width: 28px;
    height: 28px;
}

.fab:active {
    transform: scale(0.92);
}

.handle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--tap);
    height: var(--tap);
    margin-left: -8px;
    color: var(--primary-ink);
    font-size: 0;
    cursor: grab;
    touch-action: none;
}

.handle::before {
    --ic: var(--i-grip);
    content: "";
    width: 24px;
    height: 24px;
}

/* 排序模式：卡片與分類加上虛線框 */
.page[data-sorting="1"] .card,
.page[data-sorting="1"] .category {
    outline: 2px dashed var(--primary-line);
    outline-offset: -2px;
}

.sortable-ghost {
    opacity: 0.4;
}

.sortable-chosen,
.sortable-fallback {
    box-shadow: var(--sh-float);
}

/* 清單內頁 */
.category-list {
    margin: 0;
}

.category {
    margin-bottom: var(--s-4);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--sh-card);
    overflow: hidden;
}

.category-head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 56px;
    padding: 6px var(--s-4);
    font-size: var(--fs-body);
    font-weight: 700;
    transition: background-color 0.15s;
}

.category-head:active {
    background: var(--fill);
}

.category-name {
    flex: 1;
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

.category-count {
    flex: none;
    min-width: 44px;
    padding: 2px 10px;
    border-radius: var(--r-pill);
    background: var(--primary-soft);
    color: var(--primary-ink);
    font-size: var(--fs-caption);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.category-head::after {
    --ic: var(--i-chevron-d);
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--ring);
    transition: transform 0.22s var(--ease);
}

.category[data-collapsed="1"] .category-head::after {
    transform: rotate(-90deg);
}

.category[data-collapsed="1"] .item-list,
.category[data-collapsed="1"] .add-row {
    display: none;
}

.item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    padding: 8px var(--s-4);
    transition: background-color 0.12s;
}

.item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 64px;
    right: 0;
    height: 1px;
    background: var(--line);
}

.item:first-child::after {
    left: 0;
}

.item:active {
    background: var(--fill);
}

.check {
    position: relative;
    flex: none;
    width: 34px;
    height: 34px;
    border: 2px solid var(--ring);
    border-radius: 50%;
    transition: background-color 0.16s, border-color 0.16s, transform 0.3s var(--spring);
}

.check::after {
    content: "";
    position: absolute;
    inset: -2px;
    background: var(--on-primary);
    -webkit-mask: var(--i-check) center / 24px no-repeat;
    mask: var(--i-check) center / 24px no-repeat;
    opacity: 0;
    transform: scale(0.4);
    transition: transform 0.28s var(--spring), opacity 0.12s;
}

.item:active .check {
    transform: scale(0.86);
}

.item[data-checked="1"] .check,
.settings-option[data-selected="1"] .check {
    border-color: var(--primary);
    background-color: var(--primary);
}

.item[data-checked="1"] .check::after,
.settings-option[data-selected="1"] .check::after {
    opacity: 1;
    transform: scale(1);
}

.item-name {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.35;
    transition: color 0.16s;
}

.item[data-checked="1"] .item-name {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: var(--ring);
}

.item-stars {
    flex: none;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--star-soft);
    color: var(--star-ink);
    font-size: var(--fs-caption);
    line-height: 1.4;
    letter-spacing: 0;
    transition: opacity 0.16s;
}

.item[data-priority="3"] .item-name,
.item[data-priority="4"] .item-name,
.item[data-priority="5"] .item-name {
    font-weight: 600;
}

.item[data-priority="4"]::before,
.item[data-priority="5"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--star);
}

.item[data-priority="5"] .item-stars {
    box-shadow: inset 0 0 0 1.5px var(--star);
}

.item[data-checked="1"][data-priority] .item-name {
    font-weight: 400;
}

.item[data-checked="1"][data-priority]::before {
    display: none;
}

.item[data-checked="1"] .item-stars {
    background: transparent;
    box-shadow: none;
    color: var(--muted);
}

.category[data-complete="1"] .category-count {
    background: var(--done-soft);
    color: var(--done-ink);
}

.category[data-complete="1"] .category-count::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 4px;
    vertical-align: -1px;
    background-color: currentColor;
    -webkit-mask: var(--i-check) center / contain no-repeat;
    mask: var(--i-check) center / contain no-repeat;
}

.item .handle {
    margin-right: -4px;
}

.add-row {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 0 var(--s-4);
    border-top: 1px solid var(--line);
    color: var(--primary-ink);
    font-size: var(--fs-body);
    font-weight: 600;
    text-align: left;
    transition: background-color 0.12s;
}

.add-row:active {
    background: var(--primary-soft);
}

.add-row.add-category {
    margin-top: var(--s-1);
    border: 2px dashed var(--primary-line);
    border-radius: var(--r-lg);
    text-align: center;
}

/* 底部進度條 */
.progress {
    --lvl: var(--level-0);
    padding: 14px calc(20px + var(--safe-right)) calc(14px + var(--safe-bottom)) calc(20px + var(--safe-left));
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    background: var(--surface);
    box-shadow: var(--sh-bar);
}

.progress:has([data-level="1"]) { --lvl: var(--level-1); }
.progress:has([data-level="2"]) { --lvl: var(--level-2); }
.progress:has([data-level="3"]) { --lvl: var(--level-3); }
.progress:has([data-level="4"]) { --lvl: var(--level-4); }

.progress-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
}

.progress [data-role="progress-percent"] {
    order: -1;
    color: var(--lvl);
    font-size: var(--fs-display);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    transition: color 0.3s;
}

.progress [data-role="progress-count"] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: var(--fs-sub);
    font-weight: 600;
}

.progress [data-role="progress-count"]::before {
    --ic: var(--i-check-circle);
    content: "";
    width: 20px;
    height: 20px;
    color: var(--lvl);
}

.progress .bar {
    height: 10px;
}

.progress-slogan {
    margin-top: 10px;
    color: var(--muted);
    font-size: var(--fs-sub);
    font-weight: 500;
    text-align: center;
}

/* 底部面板 */
.sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: var(--backdrop);
    animation: fade-in 0.2s ease-out;
}

.sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 21;
    max-width: 480px;
    max-height: 85vh;
    max-height: 85dvh;
    margin: 0 auto;
    padding: 0 calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left));
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    background: var(--surface);
    box-shadow: var(--sh-sheet);
    overflow-y: auto;
    animation: sheet-up 0.3s var(--ease);
}

@keyframes sheet-up {
    from { transform: translateY(100%); }
}

@keyframes fade-in {
    from { opacity: 0; }
}

.sheet-grabber {
    height: var(--tap);
    touch-action: none;
    cursor: grab;
}

.sheet-grabber::before {
    content: "";
    display: block;
    width: 36px;
    height: 5px;
    margin: 12px auto 0;
    border-radius: var(--r-pill);
    background: var(--grabber);
}

.sheet-title {
    padding: 0 var(--s-1) var(--s-3);
    font-size: var(--fs-body);
    font-weight: 700;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sheet-title > [data-line] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sheet-title > [data-line="1"] {
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--fs-sub);
    font-weight: 500;
}

.sheet-menu {
    border-radius: var(--r-lg);
    background: var(--fill);
    overflow: hidden;
}

.sheet-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 56px;
    padding: 10px var(--s-4);
    font-size: var(--fs-body);
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: background-color 0.12s;
}

.sheet-item + .sheet-item {
    border-top: 1px solid var(--line);
}

.sheet-item:active {
    background: var(--line);
}

.sheet-item.is-danger {
    color: var(--danger);
}

.sheet-item[data-disabled="1"] {
    opacity: 0.4;
    cursor: not-allowed;
}

.sheet-item[data-disabled="1"]:active {
    background: transparent;
}

.sheet-menu .sheet-item::before {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--primary-ink);
}

.sheet-menu .sheet-item.is-danger::before {
    color: var(--danger);
}

.sheet-menu .sheet-item[data-value="template"]::before { --ic: var(--i-doc); content: ""; }
.sheet-menu .sheet-item[data-value="blank"]::before { --ic: var(--i-plus); content: ""; }
.sheet-menu .sheet-item[data-value="copy"]::before { --ic: var(--i-copy); content: ""; }
.sheet-menu .sheet-item[data-value="rename"]::before { --ic: var(--i-pencil); content: ""; }
.sheet-menu .sheet-item[data-value="export"]::before { --ic: var(--i-export); content: ""; }
.sheet-menu .sheet-item[data-value="sort"]::before { --ic: var(--i-sort); content: ""; }
.sheet-menu .sheet-item[data-value="stars"]::before { --ic: var(--i-star-line); content: ""; }
.sheet-menu .sheet-item[data-value="delete"]::before { --ic: var(--i-trash); content: ""; }
.sheet-menu .sheet-item[data-value="reset"]::before { --ic: var(--i-reset); content: ""; }
.sheet-menu .sheet-item[data-value="logout"]::before { --ic: var(--i-logout); content: ""; }
.sheet-menu .sheet-item[data-value="privacy"]::before { --ic: var(--i-shield); content: ""; }
.sheet-menu .sheet-item[data-value="settings"]::before { --ic: var(--i-gear); content: ""; }
.sheet-menu .sheet-item[data-value="changelog"]::before { --ic: var(--i-history); content: ""; }
.sheet-menu label.sheet-item:has(.sheet-file)::before { --ic: var(--i-import); content: ""; }

.sheet-file {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.sheet-form,
.sheet-confirm {
    display: grid;
    gap: var(--s-3);
    padding-top: var(--s-1);
}

.sheet-input {
    width: 100%;
    min-height: 52px;
    padding: 0 var(--s-4);
    border: 1.5px solid var(--ring);
    border-radius: var(--r-md);
    background: var(--fill);
    font-size: var(--fs-body);
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.sheet-input:focus {
    outline: 2px solid var(--primary-ink);
    outline-offset: 2px;
    border-color: var(--primary-ink);
    background: var(--surface);
    box-shadow: 0 0 0 4px var(--primary-glow);
}

.login-dev .sheet-input {
    background: var(--surface);
}

.sheet-message {
    margin: var(--s-1) 0;
    font-size: var(--fs-body);
    font-weight: 700;
    overflow-wrap: anywhere;
    text-align: center;
}

.sheet-message::before {
    --ic: var(--i-alert);
    content: "";
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto var(--s-3);
    color: var(--danger);
}

.sheet-stars {
    display: flex;
    justify-content: center;
    gap: var(--s-1);
    padding: var(--s-2) 0;
}

.star {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    color: var(--star-off);
    font-size: 0;
    line-height: 1;
    transition: transform 0.2s var(--spring), color 0.15s;
}

.star::before {
    --ic: var(--i-star-line);
    content: "";
    width: 38px;
    height: 38px;
}

.star:active {
    transform: scale(0.85);
}

.star.is-on {
    color: var(--star);
}

.star.is-on::before {
    --ic: var(--i-star-fill);
}

/* 提示訊息 */
.toast {
    position: fixed;
    left: 50%;
    top: calc(var(--safe-top) + 76px);
    z-index: 30;
    max-width: min(90vw, 440px);
    transform: translateX(-50%);
    padding: 12px 18px;
    border: 1px solid var(--toast-border);
    border-radius: var(--r-md);
    background: var(--toast-bg);
    color: var(--toast-text);
    font-size: var(--fs-sub);
    font-weight: 600;
    text-align: center;
    box-shadow: var(--sh-float);
    overflow-wrap: anywhere;
    pointer-events: none;
    animation: toast-in 0.26s var(--ease);
}

@media (max-height: 520px) {
    body[data-sheet="open"] .toast {
        top: calc(var(--safe-top) + 8px);
    }
}

@keyframes toast-in {
    from { opacity: 0; transform: translate(-50%, -12px); }
}

/* 登入頁 */
.page-login {
    align-items: center;
    gap: var(--s-5);
    padding: calc(24px + var(--safe-top)) calc(24px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(24px + var(--safe-left));
    overflow-y: auto;
    text-align: center;
}

.page-login > :first-child {
    margin-top: auto;
}

.page-login > :last-child {
    margin-bottom: auto;
}

.login-icon {
    width: 112px;
    height: 112px;
    margin-bottom: var(--s-1);
    border-radius: 26px;
    box-shadow: 0 12px 32px var(--primary-glow), 0 2px 8px rgba(20, 20, 50, 0.12);
}

.login-title {
    margin: 0 0 var(--s-3);
    font-size: var(--fs-display);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.login-google {
    flex: none;
    width: 280px;
    max-width: 100%;
    height: 44px;
    overflow: hidden;
}

.login-google:not(:has(iframe)) {
    visibility: hidden;
}

.login-dev {
    display: grid;
    gap: var(--s-2);
    width: 100%;
    max-width: 280px;
}

.login-privacy,
.privacy-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: var(--tap);
    min-height: var(--tap);
    color: var(--muted);
    font-size: var(--fs-sub);
    font-weight: 500;
    text-decoration: none;
}

.login-privacy::before {
    --ic: var(--i-shield);
    content: "";
    width: 16px;
    height: 16px;
}

/* 隱私權政策頁 */
.privacy {
    max-width: 480px;
    min-height: 100%;
    margin: 0 auto;
    padding: calc(12px + var(--safe-top)) calc(24px + var(--safe-right)) calc(40px + var(--safe-bottom)) calc(24px + var(--safe-left));
    background: var(--surface);
    line-height: 1.75;
}

.privacy-back {
    margin-left: -8px;
    padding: 0 14px;
    border-radius: var(--r-pill);
    color: var(--primary-ink);
    font-weight: 700;
}

.privacy-back:active {
    background: var(--primary-soft);
}

.privacy h1 {
    margin: var(--s-3) 0 var(--s-5);
    font-size: var(--fs-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.privacy h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 28px 0 var(--s-2);
    font-size: var(--fs-body);
    font-weight: 700;
}

.privacy h2::before {
    content: "";
    flex: none;
    width: 4px;
    height: 18px;
    border-radius: var(--r-pill);
    background: var(--primary);
}

.privacy p,
.privacy ul {
    margin: 0;
    font-size: 16px;
}

.privacy ul {
    padding-left: 22px;
}

.privacy li::marker {
    color: var(--primary-ink);
}

.privacy .privacy-date {
    margin-top: 32px;
    color: var(--muted);
    font-size: var(--fs-caption);
}

/* 設定 */
.settings-group {
    margin-bottom: var(--s-6);
}

.settings-group:first-child {
    padding-top: var(--s-3);
}

.settings-group-title {
    margin: 0 var(--s-2) var(--s-2);
    color: var(--muted);
    font-size: var(--fs-caption);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.settings-options {
    overflow: hidden;
}

.settings-option {
    --ic: var(--i-contrast);
    --icon-bg: linear-gradient(135deg, #6b7385, #4b5263);
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 60px;
    padding: 0 var(--s-4);
    font-size: var(--fs-body);
    text-align: left;
    transition: background-color 0.12s;
}

.settings-option + .settings-option {
    border-top: 1px solid var(--line);
}

.settings-option:active {
    background: var(--fill);
}

.settings-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--icon-bg);
    color: var(--on-primary);
}

.settings-icon::before {
    content: "";
    width: 22px;
    height: 22px;
}

.settings-option[data-value="light"] {
    --ic: var(--i-sun);
    --icon-bg: linear-gradient(135deg, #d97706, #b45309);
}

.settings-option[data-value="dark"] {
    --ic: var(--i-moon);
    --icon-bg: linear-gradient(135deg, #6366f1, #4338ca);
}

.settings-label {
    flex: 1;
    min-width: 0;
}

.settings-option .check {
    width: 24px;
    height: 24px;
}

.settings-option .check::after {
    -webkit-mask-size: 18px;
    mask-size: 18px;
}

.settings-option[data-selected="1"] {
    background: color-mix(in srgb, var(--primary) 9%, var(--surface));
    color: var(--primary-ink);
    font-weight: 700;
}


/* 版本歷程 */
.changelog-current {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    margin: 0 0 var(--s-5);
    padding: 22px var(--s-6);
    border-radius: var(--r-xl);
    background: var(--hero-grad);
    color: var(--on-primary);
    box-shadow: var(--sh-fab);
    overflow: hidden;
}

.changelog-current::after {
    --ic: var(--i-history);
    content: "";
    position: absolute;
    right: -14px;
    bottom: -20px;
    width: 124px;
    height: 124px;
    color: rgba(255, 255, 255, 0.14);
}

.changelog-current-label {
    color: var(--on-hero-soft);
    font-size: var(--fs-sub);
    font-weight: 600;
}

.changelog-current-number {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.changelog-entry {
    margin-bottom: var(--s-3);
    padding: 18px var(--s-4);
}

.changelog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
}

.changelog-version {
    padding: 3px var(--s-3);
    border-radius: var(--r-pill);
    background: var(--primary-soft);
    color: var(--primary-ink);
    font-size: var(--fs-sub);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.changelog-date {
    color: var(--muted);
    font-size: var(--fs-caption);
    font-variant-numeric: tabular-nums;
}

.changelog-title {
    margin: var(--s-3) 0 10px;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.changelog-items {
    display: grid;
    gap: var(--s-2);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text);
    font-size: var(--fs-sub);
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.changelog-items li {
    position: relative;
    padding-left: 18px;
}

.changelog-items li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
}

.changelog-error {
    margin: 40px 0;
    color: var(--muted);
    text-align: center;
}

/* 桌機滑鼠懸停 */
@media (hover: hover) {
    .category-head:hover,
    .item:hover {
        background-color: var(--fill);
    }

    .sheet-item:hover {
        background-color: var(--line);
    }

    .settings-option:hover {
        background-color: var(--fill);
    }

    .settings-option[data-selected="1"]:hover {
        background-color: color-mix(in srgb, var(--primary) 9%, var(--surface));
    }

    .card:hover {
        transform: translateY(-1px);
    }

    .card:active {
        transform: scale(0.985);
    }

    .icon-btn:hover,
    .privacy-back:hover {
        background-color: var(--primary-soft);
    }

    .add-row:hover {
        background: var(--primary-soft);
    }

    .btn-primary:hover,
    .btn-danger:hover,
    .btn-plain:hover {
        filter: brightness(0.96);
    }

    .btn-primary:active,
    .btn-danger:active,
    .btn-plain:active {
        filter: brightness(0.94);
    }
}

/* 減少動態效果 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}