/* ============================================================
   assets/css/tools-unified.css
   ============================================================
   ONE stylesheet, used by ALL FIVE tools:
     Kuaishou Video Downloader, URL Shortener, QR Code Generator,
     YouTube Thumbnail Downloader, YouTube Transcriber.
   (Electricity Calculator is intentionally separate — its own
   pre-existing design system, not part of this file.)

   WHY GROUPED SELECTORS: every "chrome" piece shared by the five
   tools — outer card, header bar, title, badge, body padding,
   pill-shaped input field, primary button, message box, progress
   bar, full-width CTA button — is written ONCE, as a single rule
   whose selector list includes every tool's markup class. That is
   what actually guarantees a pixel-identical result: it is not
   five different rules that happen to reference the same design
   tokens (which can still drift the moment one file is edited and
   the other four are not) — it is the exact same CSS declaration
   block applied to all five tools at once. Change a value here and
   all five update together, atomically.

   Each tool's markup keeps its old, JS-referenced class names
   (nothing in assets/js/*.js needed to change) and additionally
   carries the new shared class (at-tool, at-tool__header, etc.) so
   the intent is explicit in the markup itself.

   Design tokens (colors, spacing scale, radii, shadows) live in
   shared.css, loaded as a dependency of this file.
   ============================================================ */


/* ------------------------------------------------------------
   1. OUTER CARD
   ------------------------------------------------------------ */
.at-tool,
.kuaishou-tool-container,
.url-shortener-container,
.qr-generator-container,
.at-yt-container,
.yt-transcriber-container {
    width: 100%;
    max-width: 100%;
    background: var(--at-surface);
    border: 1px solid var(--at-border);
    border-radius: var(--at-container-radius);
    overflow: hidden;
    box-shadow: var(--at-card-shadow);
    margin: var(--at-container-margin);
    box-sizing: border-box;
    transition: all 0.3s ease, border-color 0.3s ease;
    font-family: var(--at-font-family);
    color: var(--at-foreground);
}

/* FIX (dark mode: tool boundary invisible): the light-mode shadow
   above is a black-based rgba() — it only reads as a shadow because
   the theme's light-mode background is white/near-white. On the
   theme's dark palette (near-black --bg-deep) that exact same black
   shadow blends straight into the page background, and previously
   there was no border at all to fall back on, so the card had zero
   visible edge. --at-border (var(--border-subtle, ...)) already
   resolves to the theme's real light/dark border token — a light
   grey at low opacity in dark mode, a dark navy at low opacity in
   light mode — so the `border` declared on the base rule above stays
   visible in both. This dark-mode block only needs to swap the
   shadow itself for something that still reads as depth against a
   dark background: a soft, low-alpha WHITE glow (top highlight) with
   the black drop-shadow kept softer/smaller underneath. */
html[data-theme="dark"] .at-tool,
.dark .at-tool,
.dark-mode .at-tool,
html[data-theme="dark"] .kuaishou-tool-container,
.dark .kuaishou-tool-container,
.dark-mode .kuaishou-tool-container,
html[data-theme="dark"] .url-shortener-container,
.dark .url-shortener-container,
.dark-mode .url-shortener-container,
html[data-theme="dark"] .qr-generator-container,
.dark .qr-generator-container,
.dark-mode .qr-generator-container,
html[data-theme="dark"] .at-yt-container,
.dark .at-yt-container,
.dark-mode .at-yt-container,
html[data-theme="dark"] .yt-transcriber-container,
.dark .yt-transcriber-container,
.dark-mode .yt-transcriber-container {
    border-color: var(--at-border);
    box-shadow:
        rgba(255, 255, 255, 0.06) 0px 1px 0px inset,
        rgba(0, 0, 0, 0.5) 0px 6px 14px -4px;
}

/* Kuaishou sits inside a theme "post card" wrapper ON SOME PAGES —
   in that specific case only, strip THIS card's own border/shadow so
   the wrapping post-card's border is the only one shown (avoids a
   double-border/double-shadow "box inside a box" look).
   FIX: this previously matched `.kuaishou-tool-container` on its own
   in dark mode (no .anas-post-card requirement), which stripped the
   border/shadow added above unconditionally — the Kuaishou tool had
   no visible edge in dark mode at all, wrapped or not. Now scoped
   strictly to the .anas-post-card-wrapped case, so standalone
   Kuaishou embeds keep the same visible border/shadow as every other
   tool. */
html[data-theme="dark"] .kuaishou-tool-container.anas-post-card,
body.dark .kuaishou-tool-container.anas-post-card,
html[data-theme="dark"] .anas-post-card .kuaishou-tool-container,
body.dark .anas-post-card .kuaishou-tool-container,
body .kuaishou-tool-container.anas-post-card {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}


/* ------------------------------------------------------------
   2. HEADER BAR + TITLE + BADGE
   ------------------------------------------------------------ */
.at-tool__header,
.kuaishou-header,
.url-shortener-header,
.qr-generator-header,
.yt-transcriber-header {
    background: linear-gradient(135deg, var(--at-primary), var(--at-primary-dark));
    padding: var(--at-header-padding) !important;
    text-align: center;
    box-sizing: border-box;
}

.at-tool__title,
.kuaishou-header h1,
.kuaishou-header h2,
.url-shortener-header h2,
.qr-generator-header h1,
.qr-generator-header h2,
.yt-transcriber-header h2 {
    color: #fff !important;
    font-size: var(--at-header-font-size) !important;
    line-height: 1.3 !important;
    margin: 0 0 4px 0 !important;
    font-weight: var(--at-header-font-weight) !important;
    font-family: var(--at-font-family) !important;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.at-tool__badge,
.kuaishou-badge,
.url-shortener-badge,
.qr-generator-badge {
    display: inline-block;
    font-size: var(--at-badge-font-size) !important;
    line-height: 1.4 !important;
    background: var(--at-badge-bg);
    color: #fff !important;
    padding: var(--at-badge-padding);
    border-radius: var(--at-badge-radius);
    font-weight: var(--at-badge-font-weight) !important;
    font-family: var(--at-font-family) !important;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}


/* ------------------------------------------------------------
   3. BODY PADDING (content inset below the header)
   ------------------------------------------------------------ */
.at-tool__body,
.kuaishou-input-section,
.url-shortener-input-section,
.qr-generator-input-section,
.yt-transcriber-input-section {
    padding: var(--at-section-padding);
}

/* Small note / disclaimer strip (used by YouTube Transcriber; shared
   class so any tool can reuse the exact same treatment later). */
.at-tool__note,
.yt-transcriber-disclaimer {
    margin: 0 var(--at-section-padding) 12px;
    padding: 10px 14px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--at-muted);
    font-family: var(--at-font-family);
}


/* ------------------------------------------------------------
   4. FIELD — the bordered "pill" wrapping an input + attached
      button (Kuaishou / URL Shortener / YT Thumbnail / Transcriber).
   ------------------------------------------------------------ */
.at-tool__field,
.kuaishou-input-group,
.url-shortener-input-group,
.at-yt-input-group,
.yt-transcriber-input-group {
    display: flex;
    border-radius: var(--at-group-radius);
    overflow: hidden;
    border: var(--at-group-border-width) solid var(--at-border);
    box-shadow: var(--at-group-shadow);
    transition: all 0.3s ease;
    background: var(--at-surface);
}

.at-tool__field:focus-within,
.kuaishou-input-group:focus-within,
.url-shortener-input-group:focus-within,
.at-yt-input-group:focus-within,
.yt-transcriber-input-group:focus-within {
    border-color: var(--at-primary);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--at-primary) 15%, transparent);
    transform: translateY(-1px);
}


/* ------------------------------------------------------------
   5. INPUT (text / url / textarea)
   ------------------------------------------------------------ */
.at-tool__input,
.kuaishou-url-input,
.url-shortener-input,
#at-yt-url-input,
.yt-transcriber-input,
.qr-generator-text-input {
    flex: 1;
    min-width: 0;
    padding: var(--at-input-padding);
    border: none;
    font-size: var(--at-input-font-size);
    font-weight: var(--at-input-font-weight);
    outline: none;
    background: transparent;
    color: var(--at-foreground);
    font-family: var(--at-font-family);
    box-sizing: border-box;
}

.at-tool__input::placeholder,
.kuaishou-url-input::placeholder,
.url-shortener-input::placeholder,
#at-yt-url-input::placeholder,
.yt-transcriber-input::placeholder,
.qr-generator-text-input::placeholder {
    color: var(--at-muted);
    font-weight: 500;
    opacity: 1;
}

/* Click/tap into the field -> placeholder disappears immediately
   (not just once typing starts). */
.at-tool__input:focus::placeholder,
.kuaishou-url-input:focus::placeholder,
.url-shortener-input:focus::placeholder,
#at-yt-url-input:focus::placeholder,
.yt-transcriber-input:focus::placeholder,
.qr-generator-text-input:focus::placeholder {
    opacity: 0;
}

/* QR's textarea isn't paired with a button inside a .at-tool__field
   pill (it stands alone, live-updates as you type) — so, unlike the
   other four inputs, it carries its own border/radius/background
   instead of inheriting them from a wrapping field. Geometry (radius,
   border width, padding, font) still matches the shared field/input
   tokens exactly. */
.qr-generator-text-input {
    width: 100%;
    border: var(--at-group-border-width) solid var(--at-border);
    border-radius: var(--at-group-radius);
    background: var(--at-surface);
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.qr-generator-text-input:focus {
    border-color: var(--at-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--at-primary) 22%, transparent);
}


/* ------------------------------------------------------------
   6. FIELD BUTTON — attached action button (Start / Shorten /
      Preview / Transcribe).
   ------------------------------------------------------------ */
.at-tool__field-btn,
.kuaishou-go-button,
.url-shortener-button,
.at-yt-preview-btn,
.yt-transcriber-button {
    background: linear-gradient(135deg, var(--at-primary), var(--at-primary-dark));
    color: #fff;
    border: none;
    padding: var(--at-button-padding);
    font-weight: var(--at-button-font-weight);
    font-size: var(--at-button-font-size);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--at-font-family);
}

.at-tool__field-btn:hover:not(:disabled),
.kuaishou-go-button:hover:not(:disabled),
.url-shortener-button:hover:not(:disabled),
.at-yt-preview-btn:hover:not(:disabled),
.yt-transcriber-button:hover:not(:disabled) {
    box-shadow: 0 6px 16px color-mix(in srgb, var(--at-primary) 35%, transparent);
}

.at-tool__field-btn:active,
.kuaishou-go-button:active,
.url-shortener-button:active,
.at-yt-preview-btn:active,
.yt-transcriber-button:active {
    transform: scale(0.98);
}

.at-tool__field-btn:disabled,
.kuaishou-go-button:disabled,
.url-shortener-button:disabled,
.at-yt-preview-btn:disabled,
.yt-transcriber-button:disabled {
    background: var(--at-disabled-bg);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.at-tool__field-btn:focus,
.kuaishou-go-button:focus,
.url-shortener-button:focus,
.at-yt-preview-btn:focus,
.yt-transcriber-button:focus,
.at-tool__input:focus,
.kuaishou-url-input:focus,
.url-shortener-input:focus,
#at-yt-url-input:focus,
.yt-transcriber-input:focus {
    outline: 2px solid var(--at-primary);
    outline-offset: 2px;
}
/* The input's own outline stays invisible on YT Thumbnail — its
   focus is already shown by the field's border/shadow lift. */
#at-yt-url-input:focus {
    outline: none;
}


/* ------------------------------------------------------------
   7. MESSAGE (inline error / success notice)
   ------------------------------------------------------------ */
.at-tool__message,
.kuaishou-message,
.url-shortener-message,
.qr-generator-message,
.yt-transcriber-message,
.at-yt-success {
    margin: var(--at-message-margin-top) 0 0;
    padding: var(--at-message-padding);
    border-radius: var(--at-message-radius);
    font-size: var(--at-message-font-size);
    font-weight: 500;
    font-family: var(--at-font-family);
}
.kuaishou-message,
.url-shortener-message,
.qr-generator-message {
    display: none;
}
.yt-transcriber-message:empty {
    display: none;
}
.at-yt-success {
    display: none;
}

.at-tool__message--error,
.kuaishou-error,
.url-shortener-error,
.qr-generator-error,
.yt-transcriber-message--error {
    background: var(--at-error-bg);
    color: var(--at-error-text);
    border-left: 4px solid var(--at-error-text);
}
html[data-theme="dark"] .kuaishou-error, .dark .kuaishou-error, .dark-mode .kuaishou-error,
html[data-theme="dark"] .url-shortener-error, .dark .url-shortener-error, .dark-mode .url-shortener-error,
html[data-theme="dark"] .qr-generator-error, .dark .qr-generator-error, .dark-mode .qr-generator-error,
html[data-theme="dark"] .yt-transcriber-message--error, .dark .yt-transcriber-message--error, .dark-mode .yt-transcriber-message--error {
    background: var(--at-error-bg-dark) !important;
    color: var(--at-error-text-dark) !important;
    border-left-color: var(--at-error-border-dark) !important;
}

.at-tool__message--success,
.kuaishou-success,
.url-shortener-success,
.yt-transcriber-message--success,
.at-yt-success {
    background: var(--at-success-bg);
    color: var(--at-success-text);
    border-left: 4px solid var(--at-success);
}
html[data-theme="dark"] .kuaishou-success, .dark .kuaishou-success, .dark-mode .kuaishou-success,
html[data-theme="dark"] .url-shortener-success, .dark .url-shortener-success, .dark-mode .url-shortener-success,
html[data-theme="dark"] .yt-transcriber-message--success, .dark .yt-transcriber-message--success, .dark-mode .yt-transcriber-message--success,
html[data-theme="dark"] .at-yt-success, .dark .at-yt-success, .dark-mode .at-yt-success {
    background: var(--at-success-bg-dark) !important;
    color: var(--at-success-text-dark) !important;
    border-left-color: var(--at-success) !important;
}

.yt-transcriber-message--info {
    color: var(--at-muted);
}


/* ------------------------------------------------------------
   8. PROGRESS BAR (Kuaishou's post-download save progress keeps
      its own three-part structure — a different moment in the
      flow — see the Kuaishou-only block near the bottom of this
      file.)
   ------------------------------------------------------------ */
.at-tool__progress,
.url-shortener-progress,
.at-yt-progress,
.yt-transcriber-progress {
    display: none;
    width: 100%;
    background: var(--at-border);
    border-radius: 10px;
    padding: 6px;
    margin-top: 12px;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
}

.at-tool__progress-bar,
.url-shortener-progress-bar,
.at-yt-progress-bar,
.yt-transcriber-progress-bar {
    width: 0%;
    height: 36px;
    background: rgb(250, 204, 21); /* starting yellow — window.ATProgress (shared.js) ramps it through orange to success-green as it climbs, identically on every tool */
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.15s linear, background-color 0.4s ease;
    position: relative;
    overflow: hidden;
    font-family: var(--at-font-family);
}

.at-tool__progress-bar::after,
.url-shortener-progress-bar::after,
.at-yt-progress-bar::after,
.yt-transcriber-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: at-tool-shine 2s infinite;
}
@keyframes at-tool-shine {
    0% { left: -100%; }
    100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .at-tool__progress-bar::after,
    .url-shortener-progress-bar::after,
    .at-yt-progress-bar::after,
    .yt-transcriber-progress-bar::after {
        animation: none;
    }
}


/* ------------------------------------------------------------
   9. RESULT WRAPPER (hidden until the tool has something to show)
   ------------------------------------------------------------ */
.at-tool__result,
.kuaishou-result,
.qr-generator-result {
    display: none;
    padding: 0 var(--at-section-padding) var(--at-section-padding);
}
.qr-generator-result {
    text-align: center;
}
#at-yt-download-section {
    display: none;
}
/* URL Shortener's & YT Transcriber's ".at-tool__result" use their own
   box model (flex list / bordered panel with margin, not padding) —
   opt back out of the shared padding so the shared class only
   contributes the "hidden until populated" behavior here. */
.url-shortener-result,
.yt-transcriber-output {
    padding: 0;
}


/* ------------------------------------------------------------
   10. CTA — the large full-width primary action button that sits
       below a result (Copy short link / Download PNG / Download
       Thumbnail). Shape/type is identical everywhere; the fill
       color follows each button's own meaning (green = confirm /
       copy, brand gradient = download), same convention as every
       other "success vs primary" color in this plugin.
   ------------------------------------------------------------ */
.at-tool__cta,
.url-shortener-copy-btn,
.qr-generator-download-btn,
.at-yt-download-btn {
    display: none;
    width: calc(100% - 2 * var(--at-section-padding));
    margin: 20px var(--at-section-padding) 0;
    padding: var(--at-cta-padding);
    border: none;
    border-radius: var(--at-group-radius);
    font-weight: var(--at-button-font-weight);
    font-size: var(--at-cta-font-size);
    font-family: var(--at-font-family);
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}
.qr-generator-download-btn {
    display: inline-block;
    width: auto;
    margin: 0;
}
/* #at-yt-download-section (unlike url-shortener-copy-btn's unpadded
   parent) already carries the shared .at-tool__result side padding
   itself, so this button only needs a plain full-width fill — no
   extra horizontal margin/calc, or the inset would be applied twice. */
.at-yt-download-btn {
    width: 100%;
    margin: 20px 0 0;
}

.at-tool__cta:not(:disabled):hover,
.url-shortener-copy-btn:hover,
.qr-generator-download-btn:hover:not(:disabled),
.at-yt-download-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.at-tool__cta:disabled,
.qr-generator-download-btn:disabled,
.at-yt-download-btn:disabled {
    background: var(--at-disabled-bg);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.at-tool__cta:focus,
.url-shortener-copy-btn:focus,
.qr-generator-download-btn:focus,
.at-yt-download-btn:focus {
    outline: 2px solid var(--at-primary);
    outline-offset: 2px;
}

/* Fill colors — kept as each button's own meaning (see note above). */
.url-shortener-copy-btn {
    background: var(--at-success) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--at-success) 40%, transparent);
}
.url-shortener-copy-btn:hover {
    background: color-mix(in srgb, var(--at-success) 85%, black) !important;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--at-success) 50%, transparent);
}
.url-shortener-copy-btn.url-shortener-copied {
    background: var(--at-primary) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--at-primary) 40%, transparent);
}
.url-shortener-copy-btn.url-shortener-copied:hover {
    background: var(--at-primary-dark) !important;
}

.qr-generator-download-btn,
.at-yt-download-btn {
    background: linear-gradient(135deg, var(--at-primary), var(--at-primary-dark));
}
.qr-generator-download-btn--secondary {
    background: var(--at-surface);
    color: var(--at-foreground);
    border: 1.5px solid var(--at-border);
}
.qr-generator-download-btn--secondary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--at-surface) 92%, black 8%);
}


/* ------------------------------------------------------------
   11. SHARE / SOCIAL ROW (Kuaishou + URL Shortener)
   ------------------------------------------------------------ */
.at-tool__share,
.kuaishou-share-row,
.url-shortener-social-buttons {
    display: flex;
    gap: 10px;
    margin: 15px var(--at-section-padding) var(--at-section-padding);
}

.at-tool__share-btn,
.kuaishou-share-button,
.url-shortener-social-btn {
    flex: 1;
    height: 36px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.3s ease;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    font-family: var(--at-font-family);
    color: #fff;
    background: linear-gradient(135deg, var(--at-primary), var(--at-primary-dark));
}
.at-tool__share-btn:hover,
.kuaishou-share-button:hover,
.url-shortener-social-btn:hover {
    transform: translateY(-1px);
}
.at-tool__share-btn:active,
.kuaishou-share-button:active,
.url-shortener-social-btn:active {
    transform: scale(0.98);
}


/* ============================================================
   TOOL-SPECIFIC FEATURES — cannot be shared because the feature
   itself differs (video player vs QR canvas vs plain text output
   vs a plain image preview vs a list of shortened links), but all
   consistently use the same tokens above, so their spacing/type
   still matches the rest of the family.
   ============================================================ */

/* ---------- Kuaishou: steps indicator, player, downloads ---------- */
.kuaishou-steps-container { display: flex; justify-content: center; padding: 10px 8px; gap: 10px; }
.kuaishou-step { width: 28px; height: 28px; border-radius: 50%; background: #ff0e0e; display: flex; align-items: center; justify-content: center; font-weight: bold; transition: all 0.3s ease; font-size: 0.9rem; color: #fff; }
.kuaishou-step.kuaishou-active { background: var(--at-primary); transform: scale(1.1); }
.kuaishou-step.kuaishou-done { background: var(--at-success); font-size: 0; }
.kuaishou-step.kuaishou-done::after { content: '\2713'; font-size: 1rem; }

.kuaishou-loading { display: none; text-align: center; padding: 20px 16px; }
.kuaishou-spinner { width: 36px; height: 36px; border: 4px solid var(--at-border); border-top: 4px solid var(--at-primary); border-radius: 50%; animation: kuaishou-spin 0.8s linear infinite; margin: 0 auto 8px; }
@keyframes kuaishou-spin { to { transform: rotate(360deg); } }
.kuaishou-loading p { font-size: 0.9rem; color: var(--at-muted); font-family: var(--at-font-family); }

.kuaishou-thumbnail-container { position: relative; width: 100%; aspect-ratio: 9 / 16; max-height: 480px; background: #000; border-radius: var(--at-group-radius); overflow: hidden; margin-bottom: 10px; }
.kuaishou-thumbnail-image, .kuaishou-video-tag { width: 100%; height: 100%; object-fit: contain; display: block; }
.kuaishou-play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; color: #fff; opacity: 0.9; pointer-events: none; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4)); }
.kuaishou-buffering-indicator, .kuaishou-sound-notification { position: absolute; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); color: #fff; padding: 6px 14px; border-radius: 20px; font-size: 0.8rem; display: none; }
.kuaishou-buffering-indicator.kuaishou-show, .kuaishou-sound-notification.kuaishou-show { display: block; }
.kuaishou-buffering-indicator { top: 50%; }
.kuaishou-sound-notification { bottom: 12px; }
.kuaishou-video-controls { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 8px; background: linear-gradient(transparent, rgba(0,0,0,0.7)); }
.kuaishou-control-btn { background: none; border: none; color: #fff; cursor: pointer; padding: 4px; display: flex; }
.kuaishou-progress-slider, .kuaishou-volume-slider { accent-color: var(--at-primary); cursor: pointer; }
.kuaishou-progress-slider { flex: 1; }
.kuaishou-volume-slider { width: 60px; }
.kuaishou-time-display { color: #fff; font-size: 0.75rem; min-width: 40px; text-align: center; }
.kuaishou-volume-control { display: flex; align-items: center; gap: 4px; }

.kuaishou-info-row { display: flex; gap: 10px; padding: 8px 12px; background: var(--at-surface); border-radius: var(--at-group-radius); margin: 8px 0; }
.kuaishou-info-item { display: flex; align-items: center; gap: 6px; flex: 1; }
.kuaishou-info-content { display: flex; flex-direction: column; }
.kuaishou-info-label { font-size: 0.72rem; color: var(--at-muted); }
.kuaishou-info-value { font-size: 0.78rem; font-weight: 600; }

.kuaishou-download-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.kuaishou-download-btn { background: linear-gradient(135deg, var(--at-primary), var(--at-primary-dark)); color: #fff; border: none; border-radius: var(--at-group-radius); padding: 10px 6px; cursor: pointer; min-height: 56px; transition: all 0.2s ease; }
.kuaishou-download-btn.kuaishou-sd { background: var(--at-surface); color: var(--at-foreground); border: 1.5px solid var(--at-border); }
.kuaishou-btn-content { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.kuaishou-btn-icon { font-size: 12px; font-weight: 700; }
.kuaishou-download-btn small { font-size: 9px; opacity: 0.85; }
.kuaishou-download-btn:hover:not(:disabled) { transform: translateY(-1px); }
.kuaishou-download-btn:active { transform: scale(0.98); }

.kuaishou-progress-container { display: none; margin: 10px 0; }
.kuaishou-progress-info { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--at-muted); margin-bottom: 6px; }
.kuaishou-progress-bar { width: 100%; height: 8px; background: var(--at-border); border-radius: 4px; overflow: hidden; }
.kuaishou-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--at-primary), var(--at-accent)); transition: width 0.1s linear; }
.kuaishou-progress-text { display: block; text-align: right; font-size: 0.75rem; color: var(--at-muted); margin-top: 4px; }

.kuaishou-share-row { margin-top: 10px; }
.kuaishou-dots { animation: kuaishou-dotPulse 1.5s infinite; }
@keyframes kuaishou-dotPulse {
    0%, 20% { opacity: 0.3; }
    50% { opacity: 1; }
    80%, 100% { opacity: 0.3; }
}
.kuaishou-save-hint { color: var(--at-primary); font-weight: 600; cursor: pointer; margin-left: 4px; }

.kuaishou-success-page { display: none; text-align: center; padding: 30px 20px; }
.kuaishou-success-icon { width: 70px; height: 70px; margin: 0 auto 12px; border-radius: 50%; background: var(--at-success); color: #fff; display: flex; align-items: center; justify-content: center; }
.kuaishou-success-page h2 { font-size: 1.2rem; margin-bottom: 8px; }
.kuaishou-success-page p { font-size: 0.9rem; color: var(--at-muted); margin-bottom: 16px; }
.kuaishou-next-video-btn { background: linear-gradient(135deg, var(--at-primary), var(--at-primary-dark)); color: #fff; border: none; border-radius: var(--at-group-radius); padding: var(--at-cta-padding); font-size: var(--at-cta-font-size); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }


/* ---------- URL Shortener: result list ---------- */
.url-shortener-result { display: none; padding: 0 var(--at-section-padding); flex-direction: column; gap: 12px; }
.url-shortener-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--at-surface); border-radius: 8px; border: 1px solid var(--at-primary); transition: all 0.2s ease; }
.url-shortener-item:hover { background: color-mix(in srgb, var(--at-surface) 92%, black 8%); transform: translateX(2px); }
.url-shortener-item-number { background: var(--at-primary); color: #fff; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; }
.url-shortener-link { color: var(--at-success); text-decoration: none; font-weight: 600; font-size: 0.9rem; word-break: break-all; flex: 1; }
.url-shortener-link:hover { text-decoration: underline; }
.url-shortener-item-error { color: var(--at-error-text); font-weight: 500; font-size: 0.9rem; flex: 1; }
.url-shortener-count { display: none; margin-top: 8px; text-align: center; font-size: 1.1rem; color: var(--at-muted); font-weight: 500; }
.url-shortener-scroll-indicator { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); font-size: 0.7rem; color: rgba(255,255,255,0.8); animation: bounce 2s infinite; }
@keyframes bounce { 0%,20%,50%,80%,100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-5px); } 60% { transform: translateX(-50%) translateY(-3px); } }
.url-shortener-facebook-btn { background: linear-gradient(135deg, #1877F2, #0D6EFD) !important; }
.url-shortener-facebook-btn:hover { background: linear-gradient(135deg, #0D6EFD, #0B5ED7) !important; }
.url-shortener-social-icon { font-size: 0.8rem; font-weight: bold; }


/* ---------- QR Code Generator: options + canvas ---------- */
.qr-generator-input-group { margin-bottom: var(--at-section-padding); }
.qr-generator-options { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.qr-generator-option { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--at-muted); }
.qr-generator-option select { padding: 6px 10px; border-radius: 8px; border: 1.5px solid var(--at-border); background: var(--at-surface); color: var(--at-foreground); font-family: var(--at-font-family); font-size: 0.85rem; cursor: pointer; }
.qr-generator-canvas-wrap { display: inline-block; padding: 16px; background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.12); }
#qrGeneratorCanvas { display: block; max-width: 100%; height: auto; }
.qr-generator-download-row { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }


/* ---------- YT Thumbnail: preview box ---------- */
/* A sibling of .at-tool__body (not nested inside it), same as every
   other tool's result/output area — so it carries its own left/right/
   bottom inset via margin instead of inheriting a parent's padding
   (avoids the double-inset that nesting it inside .at-tool__body
   would otherwise cause). */
.at-yt-preview { position: relative; width: calc(100% - 2 * var(--at-section-padding)); aspect-ratio: 16 / 9; border: 2.5px dashed var(--at-primary); border-radius: var(--at-group-radius); display: flex; align-items: center; justify-content: center; overflow: hidden; margin: 0 var(--at-section-padding) var(--at-section-padding); background: color-mix(in srgb, var(--at-surface) 96%, var(--at-primary) 4%); text-align: center; color: var(--at-muted); font-size: 0.85rem; padding: 12px; box-sizing: border-box; }
.at-yt-preview img { width: 100%; height: 100%; object-fit: cover; }
.at-yt-preview.at-yt-active { border-style: solid; }
@media (max-width: 480px) {
    .at-yt-preview {
        width: calc(100% - 2 * var(--at-section-padding-mobile));
        margin: 0 var(--at-section-padding-mobile) var(--at-section-padding-mobile);
    }
}


/* ---------- YT Transcriber: output panel ---------- */
.yt-transcriber-output { display: none; margin: 0 var(--at-section-padding) var(--at-section-padding); border: 1px solid var(--at-border); border-radius: 10px; overflow: hidden; }
.yt-transcriber-output-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--at-border); font-size: 12px; color: var(--at-muted); }
.yt-transcriber-wordcount { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yt-transcriber-actions { display: flex; flex-shrink: 0; gap: 8px; }
.yt-transcriber-action-btn { border: none; color: #fff; border-radius: var(--at-group-radius); padding: 7px 14px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; font-family: var(--at-font-family); }
#yt-transcriber-copy-btn { background: var(--at-success); box-shadow: 0 2px 8px color-mix(in srgb, var(--at-success) 35%, transparent); }
#yt-transcriber-copy-btn:hover { background: color-mix(in srgb, var(--at-success) 85%, black); }
#yt-transcriber-download-btn { background: linear-gradient(135deg, var(--at-primary), var(--at-primary-dark)); box-shadow: 0 2px 8px color-mix(in srgb, var(--at-primary) 35%, transparent); }
#yt-transcriber-download-btn:hover { box-shadow: 0 4px 12px color-mix(in srgb, var(--at-primary) 45%, transparent); }
.yt-transcriber-action-btn:active { transform: scale(0.97); }
.yt-transcriber-text { padding: 18px; font-size: 14px; line-height: 1.9; white-space: pre-wrap; word-wrap: break-word; max-height: 420px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--at-border) transparent; }
.yt-transcriber-text::-webkit-scrollbar { width: 8px; }
.yt-transcriber-text::-webkit-scrollbar-track { background: transparent; }
.yt-transcriber-text::-webkit-scrollbar-thumb { background-color: var(--at-border); border-radius: 8px; }
.yt-transcriber-text::-webkit-scrollbar-thumb:hover { background-color: var(--at-accent); }


/* ============================================================
   RESPONSIVE — identical breakpoints/scale for every tool.
   ============================================================ */
@media (max-width: 480px) {
    .at-tool, .kuaishou-tool-container, .url-shortener-container,
    .qr-generator-container, .at-yt-container, .yt-transcriber-container {
        border-radius: var(--at-container-radius-mobile);
        margin: var(--at-container-margin-mobile);
    }
    .at-tool__header, .kuaishou-header, .url-shortener-header,
    .qr-generator-header, .yt-transcriber-header {
        padding: var(--at-header-padding-mobile);
    }
    .at-tool__title, .kuaishou-header h1, .kuaishou-header h2, .url-shortener-header h2,
    .qr-generator-header h1, .qr-generator-header h2, .yt-transcriber-header h2 {
        font-size: var(--at-header-font-size-mobile);
    }
    .at-tool__body, .kuaishou-input-section, .url-shortener-input-section,
    .qr-generator-input-section, .yt-transcriber-input-section {
        padding: var(--at-section-padding-mobile);
    }
    .at-tool__field, .kuaishou-input-group, .url-shortener-input-group,
    .at-yt-input-group, .yt-transcriber-input-group {
        flex-direction: column;
    }
    .at-tool__input, .kuaishou-url-input, .url-shortener-input,
    #at-yt-url-input, .yt-transcriber-input {
        padding: var(--at-input-padding-mobile);
        border-bottom: 1px solid var(--at-border);
    }
    .at-tool__field-btn, .kuaishou-go-button, .url-shortener-button,
    .at-yt-preview-btn, .yt-transcriber-button {
        padding: var(--at-button-padding-mobile);
        font-size: var(--at-button-font-size-mobile);
        border-radius: 0 0 6px 6px;
    }
    .at-tool__cta, .url-shortener-copy-btn, .qr-generator-download-btn,
    .at-yt-download-btn {
        padding: var(--at-cta-padding-mobile);
    }
    .at-tool__progress-bar, .url-shortener-progress-bar,
    .at-yt-progress-bar, .yt-transcriber-progress-bar {
        height: 32px;
    }
    .qr-generator-options { flex-direction: column; align-items: flex-start; }
    .yt-transcriber-output-foot { flex-wrap: wrap; }
    .yt-transcriber-wordcount { white-space: normal; overflow: visible; text-overflow: clip; }
    .yt-transcriber-actions { width: 100%; }
    .yt-transcriber-action-btn { flex: 1; }
}

@media (min-width: 481px) and (max-width: 768px) {
    .at-tool, .kuaishou-tool-container, .url-shortener-container,
    .qr-generator-container, .at-yt-container, .yt-transcriber-container {
        max-width: 100%;
        margin: var(--at-container-margin-tablet);
    }
}

@media (min-width: 769px) {
    .at-tool, .kuaishou-tool-container, .url-shortener-container,
    .qr-generator-container, .at-yt-container, .yt-transcriber-container {
        max-width: 100%;
        margin: var(--at-container-margin-desktop);
    }
}

@media (max-width: 360px) {
    .at-tool, .kuaishou-tool-container, .url-shortener-container,
    .qr-generator-container, .at-yt-container, .yt-transcriber-container {
        margin: var(--at-container-margin-xs);
        border-radius: var(--at-container-radius-xs);
    }
}

@media print {
    .at-tool__field-btn, .at-tool__cta, .at-tool__share,
    .kuaishou-go-button, .kuaishou-download-btn, .kuaishou-share-button,
    .kuaishou-next-video-btn, .kuaishou-volume-control, .kuaishou-video-controls,
    .kuaishou-play-icon, .url-shortener-button, .url-shortener-social-buttons,
    .url-shortener-copy-btn, .url-shortener-progress, .url-shortener-count,
    .url-shortener-scroll-indicator, .qr-generator-input-section,
    .qr-generator-download-row, .at-yt-download-btn, .at-yt-progress,
    .at-yt-input-group {
        display: none !important;
    }
    .at-tool, .kuaishou-tool-container, .url-shortener-container,
    .qr-generator-container, .at-yt-container, .yt-transcriber-container {
        box-shadow: none !important;
        border: 1px solid #000 !important;
        background: #fff !important;
    }
    .url-shortener-link { color: #000 !important; text-decoration: underline !important; }
}

@media (prefers-reduced-motion: reduce) {
    .at-tool__field-btn, .at-tool__cta, .kuaishou-spinner, .kuaishou-step,
    .kuaishou-download-btn, .kuaishou-share-button, .kuaishou-go-button,
    .kuaishou-next-video-btn, .url-shortener-button, .url-shortener-copy-btn,
    .url-shortener-social-btn, .url-shortener-item, .url-shortener-scroll-indicator,
    .at-yt-preview-btn, .at-yt-download-btn, .yt-transcriber-button,
    .yt-transcriber-action-btn {
        animation: none !important;
        transition: none !important;
    }
    .at-tool__field-btn:hover, .at-tool__cta:hover, .kuaishou-download-btn:hover,
    .kuaishou-share-button:hover, .kuaishou-go-button:hover,
    .url-shortener-button:hover, .url-shortener-copy-btn:hover,
    .url-shortener-social-btn:hover, .url-shortener-item:hover,
    .at-yt-preview-btn:hover, .at-yt-download-btn:hover {
        transform: none !important;
    }
}