/* ── Design tokens (matches main site) ── */
  :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-2: #d4b16a;
     --primary: #9fdcc4;
     --primary-contrast: #10201a;
     --danger-bg: color-mix(in srgb, #e55 12%, var(--surface-2));
     --danger-border: color-mix(in srgb, #e55 35%, transparent);
     --danger-text: #f9a0a0;
     --shadow: 0 22px 64px rgba(0,0,0,.28);
     --radius: .75rem;
     --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:#3f8068; --accent-2:#b58a3e; --primary:#34745f; --primary-contrast:#fffdf8; --danger-bg:#f8dfd9; --danger-border:#dc8c80; --danger-text:#9a2f26; --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:#3f8068; --accent-2:#b58a3e; --primary:#34745f; --primary-contrast:#fffdf8; --danger-bg:#f8dfd9; --danger-border:#dc8c80; --danger-text:#9a2f26; --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-2:#d4b16a; --primary:#9fdcc4; --primary-contrast:#10201a; --danger-bg:color-mix(in srgb, #e55 12%, var(--surface-2)); --danger-border:color-mix(in srgb, #e55 35%, transparent); --danger-text:#f9a0a0; --shadow:0 22px 64px rgba(0,0,0,.28); --mark-filter:invert(92%) sepia(15%) saturate(287%) hue-rotate(103deg) brightness(104%) contrast(94%); }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: "Manrope","Noto Sans TC","PingFang TC","Microsoft JhengHei",
                 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,
                 "Segoe UI",sans-serif;
    background:
      radial-gradient(circle at top left,
        color-mix(in srgb, var(--accent) 11%, transparent), transparent 34rem),
      radial-gradient(circle at 85% 8%,
        color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 28rem),
      var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100dvh;
  }
  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; }
   /* ── Header ── */
  .site-header {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
    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; font-weight: 800; font-size: 1.05rem;
    letter-spacing: -.02em; color: var(--text);
  }
  .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; }
  @media (max-width: 520px) { .header-nav { display: none; } .mobile-back { display: flex; } }
   /* ── Main layout ── */
  main {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem) 4rem;
  }
  .page-title {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 800; letter-spacing: -.03em;
    margin-bottom: .4rem;
  }
  .page-desc { color: var(--muted); margin-bottom: 2rem; font-size: .95rem; }
   /* ── Card ── */
  .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.75rem 2rem;
    box-shadow: var(--shadow);
  }
   /* ── Form ── */
  .form-group { display: flex; gap: .75rem; flex-wrap: wrap; }
  .url-input {
    flex: 1 1 260px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) - .1rem);
    color: var(--text);
    font-family: inherit; font-size: .95rem;
    padding: .7rem 1rem;
    outline: none;
    transition: border-color .15s;
  }
  .url-input::placeholder { color: var(--muted); }
  .url-input:focus { border-color: var(--accent); }
  .btn {
    padding: .7rem 1.4rem;
    border: none; border-radius: calc(var(--radius) - .1rem);
    font-family: inherit; font-size: .9rem; font-weight: 700;
    cursor: pointer; white-space: nowrap; transition: opacity .15s;
  }
  .btn:hover { opacity: .85; }
  .btn-primary {
    background: var(--primary); color: var(--primary-contrast);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 20%, transparent);
  }
  .btn-copy {
    background: var(--surface-2); color: var(--text);
    border: 1px solid var(--line);
    font-size: .85rem; padding: .45rem .9rem;
    min-width: 4.25rem;
    position: relative;
    transform: translateY(0) scale(1);
    transition: background-color .16s ease, border-color .16s ease, color .16s ease,
                opacity .15s ease, transform .16s ease, box-shadow .16s ease;
  }
  .btn-copy.is-copied {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-contrast);
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--primary) 18%, transparent);
    animation: copy-pop .42s ease;
  }
  @keyframes copy-pop {
    0% { transform: translateY(0) scale(1); }
    42% { transform: translateY(-1px) scale(1.06); }
    100% { transform: translateY(0) scale(1); }
  }
   /* ── Result box ── */
  .result-box {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: color-mix(in srgb, var(--accent) 9%, var(--surface-2));
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: var(--radius);
  }
  .result-label { font-size: .78rem; color: var(--muted); text-transform: uppercase;
    letter-spacing: .08em; margin-bottom: .4rem; }
  .result-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
  .result-url {
    font-size: 1.05rem; font-weight: 700;
    color: var(--accent); word-break: break-all; flex: 1 1 180px;
  }
  /* ── Alert ── */
  .alert {
    margin-top: 1rem; padding: .7rem 1rem;
    border-radius: calc(var(--radius) - .1rem);
    font-size: .9rem;
  }
   .alert-error {
     background: var(--danger-bg);
     border: 1px solid var(--danger-border);
     color: var(--danger-text);
   }
   /* ── Recent list ── */
  .section-title {
    font-size: .8rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
    margin: 2rem 0 .75rem;
  }
  .url-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
  .url-table th {
    text-align: left; color: var(--muted); font-weight: 600;
    font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
    padding: .4rem .6rem; border-bottom: 1px solid var(--line);
  }
  .url-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
  .url-table th:last-child,
  .url-table td:last-child { text-align: right; }
  .url-table tr:last-child td { border-bottom: none; }
  .url-table tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
  .code-link { font-family: "Menlo","Consolas",monospace; font-size: .85rem;
    color: var(--accent); font-weight: 600; }
  .target-cell { max-width: 260px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; color: var(--muted); }
  .history-action { width: 1%; white-space: nowrap; }
  .history-copy {
    padding: .32rem .72rem;
    min-width: 4rem;
    font-size: .8rem;
  }
  .clicks-badge {
    display: inline-block;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 99px; padding: .1rem .55rem;
    font-size: .78rem; color: var(--muted);
  }
  .empty-state { text-align: center; color: var(--muted); padding: 2rem 0; font-size: .9rem; }
  .history-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 2rem 0 .75rem;
  }
  .history-heading .section-title { margin: 0; }
  .history-clear {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: .78rem;
    padding: .28rem .7rem;
  }
  .history-clear:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
   /* ── Footer ── */
  footer {
    text-align: center; color: var(--muted);
    font-size: .8rem; padding: 2rem 1rem;
    border-top: 1px solid var(--line);
  }
  footer a { color: var(--muted); }
  footer a:hover { color: var(--text); }
  [hidden] {
    display: none !important;
  }
  .history-card-shell {
    padding: 0;
    overflow: hidden;
  }
  .history-time-cell {
    color: var(--muted);
    white-space: nowrap;
    font-size: .82rem;
  }