:root { color-scheme:light dark; --bg:#101816; --surface:#17211e; --surface-2:#20302a; --text:#f1f7f2; --muted:#b2c2ba; --line:rgba(241,247,242,.12); --accent:#7fd3b1; --accent-fg:#10201a; --shadow:0 22px 64px rgba(0,0,0,.28); --mark-filter:invert(92%) sepia(15%) saturate(287%) hue-rotate(103deg) brightness(104%) contrast(94%); }
  @media (prefers-color-scheme: light) { :root:not([data-theme="night"]) { --bg:#f8f5ee; --surface:#fffdf8; --surface-2:#eee7da; --text:#26312d; --muted:#64746c; --line:rgba(38,49,45,.12); --accent:#34745f; --accent-fg:#fffdf8; --shadow:0 18px 52px rgba(72,80,67,.13); --mark-filter:none; } }
  :root[data-theme="day"] { color-scheme:light; --bg:#f8f5ee; --surface:#fffdf8; --surface-2:#eee7da; --text:#26312d; --muted:#64746c; --line:rgba(38,49,45,.12); --accent:#34745f; --accent-fg:#fffdf8; --shadow:0 18px 52px rgba(72,80,67,.13); --mark-filter:none; }
  :root[data-theme="night"] { --bg:#101816; --surface:#17211e; --surface-2:#20302a; --text:#f1f7f2; --muted:#b2c2ba; --line:rgba(241,247,242,.12); --accent:#7fd3b1; --accent-fg:#10201a; --shadow:0 22px 64px rgba(0,0,0,.28); --mark-filter:invert(92%) sepia(15%) saturate(287%) hue-rotate(103deg) brightness(104%) contrast(94%); }
  *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
  body { font-family:"Manrope","Noto Sans TC",sans-serif; background:radial-gradient(circle at top left,color-mix(in srgb,var(--accent) 11%,transparent),transparent 34rem),var(--bg); color:var(--text); min-height:100vh; display:flex; flex-direction:column; }
  a { color:var(--accent); }
  /* Header / Nav */
  .site-header { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:.9rem clamp(1rem,4vw,4rem); backdrop-filter:blur(18px); background:color-mix(in srgb, var(--bg) 78%, transparent); border-bottom:1px solid var(--line); }
  .brand { display:inline-flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--text); font-weight:800; font-size:1.05rem; letter-spacing:-.02em; }
  .brand img { width:2.2rem; height:2.2rem; object-fit:contain; filter:var(--mark-filter); }
  .header-right { display:flex; align-items:center; gap:.75rem; }
  .header-nav { display:flex; align-items:center; gap:1.25rem; }
  .header-nav a { color:var(--muted); text-decoration:none; font-size:.88rem; }
  .header-nav a:hover { color:var(--text); }
  .theme-toggle { width:2.5rem; height:2.5rem; border:1px solid var(--line); background:color-mix(in srgb, var(--surface) 86%, transparent); color:var(--text); border-radius:999px; display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(16px); }
  .theme-toggle .theme-icon { grid-area:1/1; width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:opacity .18s ease, transform .18s ease; }
  .theme-toggle .sun circle { fill:currentColor; stroke:none; }
  .theme-toggle .moon { opacity:1; transform:scale(1) rotate(0deg); }
  .theme-toggle .sun  { opacity:0; transform:scale(.7) rotate(-20deg); }
  :root[data-theme="day"] .theme-toggle .moon { opacity:0; transform:scale(.7) rotate(-20deg); }
  :root[data-theme="day"] .theme-toggle .sun  { opacity:1; transform:scale(1) rotate(0deg); }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="night"]) .theme-toggle .moon { opacity:0; transform:scale(.7) rotate(-20deg); }
    :root:not([data-theme="night"]) .theme-toggle .sun  { opacity:1; transform:scale(1) rotate(0deg); }
  }
  .mobile-back { display:none; align-items:center; gap:.4rem; padding:.5rem clamp(1rem,4vw,2rem); font-size:.82rem; color:var(--muted); border-bottom:1px solid var(--line); }
  .mobile-back a { color:var(--accent); text-decoration:none; }
  /* Main */
  main { flex:1; max-width:680px; margin:0 auto; padding:3rem 1.5rem; width:100%; }
  h1 { font-size:1.8rem; font-weight:800; margin-bottom:.4rem; }
  .subtitle { color:var(--muted); margin-bottom:2rem; font-size:.95rem; }

  .notice-bar { margin:0 0 1rem; padding:.75rem 1rem; border:1px solid color-mix(in srgb,#f1b84b 55%,var(--line)); border-left:4px solid #f1b84b; border-radius:8px; background:color-mix(in srgb,#f1b84b 15%,var(--surface)); color:var(--text); font-size:.9rem; line-height:1.5; }
  .notice-bar.warning { border-color:color-mix(in srgb,#f1b84b 55%,var(--line)); border-left-color:#f1b84b; }
  .notice-bar.success { border-color:color-mix(in srgb,var(--accent) 65%,var(--line)); border-left-color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,var(--surface)); }
  /* Input area */
  .input-row { display:flex; gap:.6rem; margin-bottom:1rem; }
  .input-row input { flex:1; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:.75rem 1rem; color:var(--text); font-size:1rem; font-family:inherit; outline:none; }
  .input-row input:focus { border-color:var(--accent); }
  .cookie-form { display:grid; gap:1rem; }
  .cookie-form label { display:grid; gap:.45rem; color:var(--muted); font-size:.9rem; }
  .cookie-form input[type="file"], .cookie-form textarea { width:100%; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:.75rem 1rem; color:var(--text); font:inherit; outline:none; }
  .cookie-form textarea { min-height:18rem; resize:vertical; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; font-size:.82rem; line-height:1.5; }
  .cookie-form input[type="file"]:focus, .cookie-form textarea:focus { border-color:var(--accent); }
  .cookie-helper-panel { margin:0 0 1rem; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:8px; background:var(--surface); line-height:1.55; }
  .cookie-helper-panel h2 { font-size:1rem; margin-bottom:.35rem; }
  .cookie-helper-panel p { color:var(--muted); font-size:.9rem; }
  .cookie-helper-panel .helper-status { margin-top:.65rem; color:var(--text); font-weight:700; }
  .cookie-helper-panel.success { border-color:color-mix(in srgb,var(--accent) 60%,var(--line)); background:color-mix(in srgb,var(--accent) 12%,var(--surface)); }
  .btn { background:var(--accent); color:var(--accent-fg); font-weight:700; border:none; border-radius:8px; padding:.75rem 1.2rem; cursor:pointer; font-size:.95rem; white-space:nowrap; font-family:inherit; transition:opacity .15s; box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 18%,transparent); }
  .btn:disabled { opacity:.4; cursor:not-allowed; }
  .btn.secondary { background:var(--surface-2); color:var(--text); }
  /* Video preview */
  #preview { display:none; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1.25rem; margin-bottom:1.5rem; gap:1rem; align-items:flex-start; }
  #preview.visible { display:flex; }
  #preview img { width:120px; height:68px; object-fit:cover; border-radius:6px; flex-shrink:0; }
  .preview-info h2 { font-size:1rem; font-weight:700; margin-bottom:.25rem; line-height:1.4; }
  .preview-info p { color:var(--muted); font-size:.85rem; }
  /* Format selector */
  .fmt-section { margin-bottom:1.5rem; }
  .fmt-section label { display:block; margin-bottom:.5rem; font-size:.9rem; color:var(--muted); }
  select { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:.65rem .9rem; color:var(--text); font-size:.95rem; font-family:inherit; width:100%; outline:none; cursor:pointer; }
  select:focus { border-color:var(--accent); }
  /* Toggle */
  .toggle-row { display:flex; align-items:center; gap:.6rem; margin-bottom:1.5rem; cursor:pointer; }
  .toggle-row input { accent-color:var(--accent); width:16px; height:16px; cursor:pointer; }
  /* Progress & status */
  #status { margin-top:1rem; font-size:.9rem; color:var(--muted); min-height:1.4em; }
  #status.error { color:#ff6b6b; }
  #status.success { color:var(--accent); }
  /* Disclaimer */
  .disclaimer { margin-top:3rem; padding:1rem 1.25rem; background:var(--surface); border-radius:8px; border-left:3px solid var(--accent); font-size:.82rem; color:var(--muted); line-height:1.6; }
  /* Footer */
  footer { text-align:center; padding:1.5rem; border-top:1px solid var(--line); color:var(--muted); font-size:.82rem; }
  [hidden] { display: none !important; }
  @media(max-width:520px) { .input-row { flex-direction:column; } #preview { flex-direction:column; } #preview img { width:100%; height:auto; } .header-nav { display:none; } .mobile-back { display:flex; } }