:root,[data-theme="light"]{
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --text-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;
  --space-12:3rem;--space-16:4rem;
  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;
  --radius-xl:1rem;--radius-full:9999px;
  --transition:180ms cubic-bezier(.16,1,.3,1);
  --color-bg:#f7f6f2;--color-surface:#f9f8f5;
  --color-surface-dynamic:#e6e4df;
  --color-divider:#dcd9d5;--color-border:#d4d1ca;
  --color-text:#28251d;--color-text-muted:#7a7974;--color-text-faint:#bab9b4;
  --color-text-inverse:#f9f8f4;
  --color-primary:#01696f;--color-primary-hover:#0c4e54;
  --color-primary-active:#0f3638;--color-primary-highlight:#cedcd8;
  --color-error:#a12c7b;--color-error-bg:#f5e9f0;
  --color-success:#437a22;--color-success-bg:#d4dfcc;
  --color-warning:#964219;--color-warning-bg:#f0e4d6;
  --shadow-sm:0 1px 2px oklch(.2 .01 80/.06);
  --font-body:'Satoshi','Inter',sans-serif;
}

[data-theme="dark"]{
  --color-bg:#131211;--color-surface:#191817;
  --color-surface-dynamic:#2a2927;
  --color-divider:#232220;--color-border:#363432;
  --color-text:#d0cfcd;--color-text-muted:#797876;--color-text-faint:#4e4d4b;
  --color-text-inverse:#2b2a28;
  --color-primary:#4f98a3;--color-primary-hover:#227f8b;
  --color-primary-active:#1a626b;--color-primary-highlight:#1f3436;
  --color-error:#d163a7;--color-error-bg:#2a1e25;
  --color-success:#6daa45;--color-success-bg:#1e2d18;
  --color-warning:#bb653b;--color-warning-bg:#2a1f18;
  --shadow-sm:0 1px 2px oklch(0 0 0/.3);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{
  min-height:100dvh;font-family:var(--font-body);font-size:var(--text-base);
  color:var(--color-text);background:var(--color-bg);line-height:1.6;
}
img,svg{display:block;max-width:100%}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
input{font:inherit;color:inherit}
a,button,input{
  transition:color var(--transition),background var(--transition),
              border-color var(--transition),box-shadow var(--transition),opacity var(--transition);
}
::selection{background:oklch(from var(--color-primary) l c h/.25);color:var(--color-text)}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}

.page{max-width:600px;margin-inline:auto;padding:var(--space-6) var(--space-4) var(--space-16)}

header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--space-10);padding-bottom:var(--space-6);
  border-bottom:1px solid var(--color-divider);
}
.logo{display:flex;align-items:center;gap:var(--space-2);text-decoration:none;color:var(--color-text)}
.logo-icon{width:36px;height:36px;flex-shrink:0}
.logo-name{font-size:var(--text-lg);font-weight:700;letter-spacing:-.02em;color:var(--color-text)}
.logo-name span{color:var(--color-primary)}
.theme-btn{
  width:36px;height:36px;border-radius:var(--radius-full);
  display:flex;align-items:center;justify-content:center;
  color:var(--color-text-muted);border:1px solid var(--color-border);
  background:var(--color-surface);
}
.theme-btn:hover{color:var(--color-text);border-color:var(--color-text-muted)}

.input-card{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);padding:var(--space-5);
  box-shadow:var(--shadow-sm);margin-bottom:var(--space-4);
}
.input-label{
  font-size:var(--text-xs);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--color-text-muted);
  margin-bottom:var(--space-2);display:block;
}
.url-row{
  display:flex;gap:var(--space-2);align-items:center;
  background:var(--color-bg);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-2) var(--space-3);
  transition:border-color var(--transition),box-shadow var(--transition);
}
.url-row:focus-within{
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px oklch(from var(--color-primary) l c h/.15);
}
.url-input{
  flex:1;background:none;border:none;outline:none;
  font-size:var(--text-sm);padding:var(--space-1) 0;color:var(--color-text);
}
.url-input::placeholder{color:var(--color-text-faint)}
.url-input-actions{display:flex;gap:var(--space-1);flex-shrink:0}
.icon-btn{
  width:30px;height:30px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);
}
.icon-btn:hover{color:var(--color-text);background:var(--color-surface-dynamic)}
.icon-btn:active{transform:scale(.93)}

.platform-row{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-3);min-height:24px}
.platform-badge{
  display:inline-flex;align-items:center;gap:var(--space-1);
  font-size:var(--text-xs);font-weight:600;
  padding:.2em .6em;border-radius:var(--radius-full);
  background:var(--color-primary-highlight);color:var(--color-primary);
  opacity:0;transform:scale(.9);
  transition:opacity var(--transition),transform var(--transition);
}
.platform-badge.visible{opacity:1;transform:scale(1)}

/* Options grid — collapses to 1 col when audio format is hidden */
.options-grid{
  display:grid;grid-template-columns:1fr;gap:var(--space-3);margin-top:var(--space-4);
}
.options-grid.show-format{
  grid-template-columns:1fr 1fr;
}
.option-group{display:flex;flex-direction:column;gap:var(--space-1)}
.option-label{
  font-size:var(--text-xs);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--color-text-muted);
}
.select{
  background:var(--color-bg);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);
  font-size:var(--text-sm);color:var(--color-text);appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a7974' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center;
  padding-right:2rem;cursor:pointer;
}
.select:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px oklch(from var(--color-primary) l c h/.15)}

/* Audio format group — hidden by default, shown when audio-only is on */
#format-group{
  display:none;
}
#format-group.active{
  display:flex;
}

.toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:var(--space-3);padding-top:var(--space-3);
  border-top:1px solid var(--color-divider);
}
.toggle-label-group{display:flex;flex-direction:column;gap:2px}
.toggle-label{font-size:var(--text-sm);font-weight:500}
.toggle-sublabel{font-size:var(--text-xs);color:var(--color-text-muted)}
.toggle{position:relative;width:44px;height:24px;cursor:pointer}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-track{
  position:absolute;inset:0;background:var(--color-surface-dynamic);
  border-radius:var(--radius-full);transition:background var(--transition);
  border:1px solid var(--color-border);
}
.toggle input:checked + .toggle-track{background:var(--color-primary);border-color:var(--color-primary)}
.toggle-thumb{
  position:absolute;top:3px;left:3px;width:16px;height:16px;
  background:white;border-radius:var(--radius-full);
  transition:transform var(--transition);box-shadow:0 1px 3px oklch(0 0 0/.2);
}
.toggle input:checked ~ .toggle-thumb{transform:translateX(20px)}

.btn-download{
  width:100%;margin-top:var(--space-5);
  display:flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-4) var(--space-6);
  background:var(--color-primary);color:var(--color-text-inverse);
  border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:600;
  letter-spacing:.01em;
}
[data-theme="dark"] .btn-download{color:#fff}
.btn-download:hover{background:var(--color-primary-hover)}
.btn-download:active{background:var(--color-primary-active);transform:scale(.99)}
.btn-download:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-download .spinner{
  width:16px;height:16px;
  border:2px solid oklch(from var(--color-text-inverse) l c h/.4);
  border-top-color:var(--color-text-inverse);border-radius:var(--radius-full);
  animation:spin .7s linear infinite;display:none;
}
[data-theme="dark"] .btn-download .spinner{border:2px solid rgba(255,255,255,.3);border-top-color:#fff}
.btn-download.loading .spinner{display:block}
.btn-download.loading .btn-text{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

.result-area{
  margin-top:var(--space-4);border-radius:var(--radius-xl);overflow:hidden;
  opacity:0;transform:translateY(8px);
  transition:opacity .25s ease,transform .25s ease;pointer-events:none;
}
.result-area.show{opacity:1;transform:translateY(0);pointer-events:auto}
.result-card{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);overflow:hidden;
}
.result-header{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-divider);
}
.result-icon{
  width:32px;height:32px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.result-icon.success{background:var(--color-success-bg);color:var(--color-success)}
.result-icon.error{background:var(--color-error-bg);color:var(--color-error)}
.result-title{font-size:var(--text-sm);font-weight:600}
.result-sub{font-size:var(--text-xs);color:var(--color-text-muted)}
.result-body{padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.result-url-box{
  display:flex;align-items:center;gap:var(--space-2);
  background:var(--color-bg);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);
}
.result-url-text{
  flex:1;font-size:var(--text-xs);color:var(--color-text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:ui-monospace,'SF Mono',monospace;
}
.copy-btn{
  font-size:var(--text-xs);font-weight:600;color:var(--color-primary);
  padding:.2em .5em;border-radius:var(--radius-sm);flex-shrink:0;
}
.copy-btn:hover{background:var(--color-primary-highlight)}
.btn-open-download{
  display:flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-3) var(--space-4);
  background:var(--color-primary);color:var(--color-text-inverse);
  border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;
  text-decoration:none;
}
[data-theme="dark"] .btn-open-download{color:#fff}
.btn-open-download:hover{background:var(--color-primary-hover)}
.btn-open-download:active{transform:scale(.98)}

.picker-grid{display:flex;flex-direction:column;gap:var(--space-2)}
.picker-item{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3);background:var(--color-bg);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
}
.picker-thumb{
  width:60px;height:42px;object-fit:cover;border-radius:var(--radius-sm);
  background:var(--color-surface-dynamic);flex-shrink:0;
}
.picker-info{flex:1;min-width:0}
.picker-type{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:capitalize}
.picker-link{
  display:inline-flex;align-items:center;gap:4px;
  font-size:var(--text-xs);font-weight:600;color:var(--color-primary);
  padding:.3em .6em;border-radius:var(--radius-sm);
  border:1px solid var(--color-primary-highlight);text-decoration:none;flex-shrink:0;
}
.picker-link:hover{background:var(--color-primary-highlight)}

.history-section{margin-top:var(--space-8)}
.history-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}
.history-title{
  font-size:var(--text-xs);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--color-text-muted);
}
.clear-btn{
  font-size:var(--text-xs);color:var(--color-text-faint);
  padding:.2em .4em;border-radius:var(--radius-sm);
}
.clear-btn:hover{color:var(--color-text-muted);background:var(--color-surface-dynamic)}
.history-list{display:flex;flex-direction:column;gap:var(--space-2)}
.history-item{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
}
.history-platform{
  width:28px;height:28px;border-radius:var(--radius-md);
  background:var(--color-primary-highlight);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:10px;font-weight:700;color:var(--color-primary);
}
.history-info{flex:1;min-width:0}
.history-url{
  font-size:var(--text-xs);color:var(--color-text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:ui-monospace,'SF Mono',monospace;
}
.history-meta{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:1px}
.history-action{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:var(--radius-md);color:var(--color-primary);
}
.history-action:hover{background:var(--color-primary-highlight)}
.empty-history{
  text-align:center;padding:var(--space-10) var(--space-8);
  color:var(--color-text-faint);font-size:var(--text-sm);
}

.platforms-note{
  margin-top:var(--space-8);padding-top:var(--space-6);
  border-top:1px solid var(--color-divider);text-align:center;
}
.platforms-note p{font-size:var(--text-xs);color:var(--color-text-faint);margin-bottom:var(--space-3)}
.platform-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center}
.platform-chip{
  font-size:var(--text-xs);color:var(--color-text-faint);
  padding:.2em .6em;border-radius:var(--radius-full);border:1px solid var(--color-divider);
}

@media(max-width:480px){
  .options-grid{grid-template-columns:1fr !important}
  .page{padding:var(--space-4) var(--space-3) var(--space-12)}
  
  /* Header */
  header{
    margin-bottom:var(--space-6);
    padding-bottom:var(--space-4);
  }
  .logo-name{font-size:var(--text-base)}
  .logo-icon{width:30px;height:30px}
  
  /* Input card */
  .input-card{padding:var(--space-4)}
  .input-label{font-size:calc(var(--text-xs) * 0.95)}
  
  /* URL row */
  .url-row{padding:var(--space-2)}
  .url-input{font-size:var(--text-xs)}
  
  /* Options */
  .option-label{font-size:calc(var(--text-xs) * 0.9)}
  .select{
    font-size:var(--text-xs);
    padding:var(--space-2);
    padding-right:1.75rem;
  }
  
  /* Toggle row */
  .toggle-row{
    flex-wrap:wrap;
    gap:var(--space-2);
  }
  .toggle-label{font-size:var(--text-xs)}
  .toggle-sublabel{font-size:calc(var(--text-xs) * 0.9)}
  
  /* Download button */
  .btn-download{
    padding:var(--space-3) var(--space-5);
    font-size:var(--text-xs);
  }
  
  /* Result area */
  .result-header{padding:var(--space-3) var(--space-4)}
  .result-body{padding:var(--space-3) var(--space-4)}
  .result-title{font-size:var(--text-xs)}
  .result-url-box{padding:var(--space-2)}
  .btn-open-download{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}
  
  /* History */
  .history-section{margin-top:var(--space-6)}
  .history-item{padding:var(--space-2) var(--space-3)}
  .history-url{font-size:calc(var(--text-xs) * 0.9)}
  .history-meta{font-size:calc(var(--text-xs) * 0.85)}
  
  /* Platform chips */
  .platform-chips{gap:var(--space-1)}
  .platform-chip{font-size:calc(var(--text-xs) * 0.85);padding:.15em .5em}
  
  /* iOS hint */
  .ios-hint{
    font-size:calc(var(--text-xs) * 0.9);
    padding:var(--space-2);
  }
}

@media(max-width:360px){
  .page{padding:var(--space-3) var(--space-2) var(--space-10)}
  .input-card{padding:var(--space-3)}
  .logo-name{font-size:var(--text-sm)}
  .result-body{padding:var(--space-2) var(--space-3)}
  .history-item{padding:var(--space-2)}
}

.ios-hint{
  font-size:var(--text-xs);color:var(--color-text-muted);
  background:var(--color-surface-dynamic);
  border-radius:var(--radius-md);padding:var(--space-3);
  line-height:1.5;
}