:root {
        color-scheme: dark;
        font-family: "DM Sans", "Segoe UI", system-ui, sans-serif;
        font-synthesis: none;
        text-rendering: optimizeLegibility;
        --page: #0d121b;
        --panel: #151d29;
        --panel-raised: #1b2533;
        --line: #2a3646;
        --muted: #94a2b5;
        --text: #edf3fa;
        --blue: #4d9dff;
        --blue-hover: #69adff;
        --green: #72d6ac;
        --red: #ff9e9e;
      }
      * { box-sizing: border-box; }
      body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--text); background: var(--page); font-size: 13px; }
      button, input, select { font: inherit; }
      button, select { color: inherit; }
      button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
      .topbar { position: relative; z-index: 20; display: flex; height: 58px; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--line); background: #111823; }
      .header-actions { display: flex; align-items: center; gap: 18px; }
      .brand { display: flex; align-items: center; gap: 10px; color: var(--text); font: 650 14px Manrope, "Segoe UI", sans-serif; text-decoration: none; }
      .brand img { display: block; width: 52px; height: 38px; object-fit: contain; }
      .brand small { display: block; margin-top: 2px; color: var(--muted); font: 500 10px "DM Sans", "Segoe UI", sans-serif; letter-spacing: .04em; }
      .back-link { color: #b8c6d8; font-size: 12px; text-decoration: none; }
      .back-link:hover { color: #fff; }
      .menu-toggle { display: grid; width: 38px; height: 38px; align-content: center; justify-items: center; gap: 5px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: #172130; cursor: pointer; }
      .menu-toggle span { display: block; width: 16px; height: 2px; border-radius: 2px; background: #dce6f2; }
      .app-menu { position: absolute; top: 50px; right: 16px; z-index: 30; width: min(260px, calc(100vw - 32px)); padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: #151d29; box-shadow: 0 14px 34px rgb(0 0 0 / 35%); }
      .app-menu[hidden], .menu-backdrop[hidden] { display: none; }
      .menu-link { display: block; padding: 11px 12px; border-radius: 6px; color: #dce6f2; font-size: 12px; text-decoration: none; }
      .menu-link:hover, .menu-link[aria-current="page"] { background: #202d3e; color: #fff; }
      .menu-backdrop { position: fixed; inset: 58px 0 0; z-index: 10; background: rgb(0 0 0 / 18%); }
      main { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 34px 0 52px; }
      .intro { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 22px; }
      .eyebrow { margin: 0 0 8px; color: #7db2ff; font-size: 10px; font-weight: 700; letter-spacing: .15em; }
      h1, h2, p { margin-top: 0; }
      h1 { margin-bottom: 8px; font: 750 clamp(25px, 4vw, 36px)/1.15 Manrope, "Segoe UI", sans-serif; letter-spacing: -.04em; }
      .intro-copy { max-width: 690px; margin: 0; color: #a3afc0; font-size: 13px; line-height: 1.6; }
      .privacy-pill { flex: 0 0 auto; padding: 8px 11px; border: 1px solid #294c43; border-radius: 99px; background: #142720; color: #a5e2c5; font-size: 10px; }
      .layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 16px; }
      .panel { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 8px 22px rgb(0 0 0 / 12%); }
      .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
      h2 { margin: 0; font: 650 14px Manrope, "Segoe UI", sans-serif; }
      .file-count { color: var(--muted); font-size: 11px; }
      .dropzone { display: grid; min-height: 145px; place-content: center; gap: 7px; padding: 18px; border: 1px dashed #48617d; border-radius: 9px; background: #192638; color: #dcecff; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
      .dropzone:hover, .dropzone.dragging { border-color: var(--blue); background: #1c2d43; }
      .dropzone strong { font-size: 13px; }
      .dropzone span:last-child { color: var(--muted); font-size: 11px; }
      .drop-icon { color: #85b9ff; font-size: 28px; line-height: 1; }
      .file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
      .list-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 17px 0 9px; }
      .list-heading[hidden], .progress-wrap[hidden] { display: none; }
      .hint { color: var(--muted); font-size: 10px; }
      .quiet-button, .icon-button { min-height: 32px; padding: 0 10px; border: 1px solid #344255; border-radius: 6px; background: #202b3a; color: #dce6f2; cursor: pointer; }
      .quiet-button:hover:not(:disabled), .icon-button:hover:not(:disabled) { border-color: #4a6079; background: #27364a; }
      .quiet-button:disabled, .icon-button:disabled { opacity: .45; cursor: not-allowed; }
      .file-list { display: grid; gap: 10px; }
      .file-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding: 11px; border: 1px solid #2a3646; border-radius: 10px; background: #111925; }
      .preview { display: grid; width: 104px; height: 104px; place-items: center; overflow: hidden; border: 1px solid #303c4e; border-radius: 7px; background-color: #0a1018; background-image: linear-gradient(45deg,#182230 25%,transparent 25%),linear-gradient(-45deg,#182230 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#182230 75%),linear-gradient(-45deg,transparent 75%,#182230 75%); background-position: 0 0,0 7px,7px -7px,-7px 0; background-size: 14px 14px; }
      .preview img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
      .file-content { display: grid; min-width: 0; gap: 9px; }
      .file-topline { display: flex; min-width: 0; align-items: start; justify-content: space-between; gap: 8px; }
      .file-name { overflow: hidden; color: #edf3fa; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
      .file-actions { display: flex; flex: 0 0 auto; gap: 5px; }
      .remove-button { width: 29px; height: 29px; flex: 0 0 29px; padding: 0; border: 1px solid #493a43; border-radius: 6px; background: #281a22; color: #ffb4bb; cursor: pointer; font-size: 18px; line-height: 1; }
      .remove-button:hover { background: #43232d; }
      .download-button { width: 29px; height: 29px; flex: 0 0 29px; padding: 0; border: 1px solid #344e6b; border-radius: 6px; background: #19283a; color: #a9d0ff; cursor: pointer; font-size: 16px; line-height: 1; }
      .download-button:hover:not(:disabled) { border-color: #4a77a8; background: #233a54; }
      .download-button:disabled { opacity: .45; cursor: not-allowed; }
      .stats { display: flex; flex-wrap: wrap; gap: 6px 14px; color: #9eacbf; font-size: 10px; }
      .stats strong { color: #dce6f2; font-weight: 600; }
      .dimensions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 7px; }
      .field { display: grid; min-width: 0; gap: 5px; color: #aebcce; font-size: 10px; }
      .field input, .field select, .target-row input, .target-row select { width: 100%; min-width: 0; height: 35px; padding: 0 9px; border: 1px solid #344255; border-radius: 6px; background: #101721; color: var(--text); }
      .field input:disabled { opacity: .55; }
      .lock-button { min-width: 38px; height: 35px; padding: 0 7px; border: 1px solid #344255; border-radius: 6px; background: #202b3a; color: #b9c7d9; cursor: pointer; }
      .lock-button[aria-pressed="true"] { border-color: #4674ad; background: #1a2a45; color: #c7dcff; }
      .file-status { min-height: 14px; margin: 0; color: #91a1b7; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
      .file-status.error { color: var(--red); }
      .file-status.success { color: var(--green); }
      .file-status.warning { color: #e9bd76; }
      .settings-grid { display: grid; gap: 14px; }
      .target-row { display: grid; grid-template-columns: minmax(0, 1fr) 86px; gap: 8px; }
      .setting-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #aebcce; font-size: 11px; }
      .quality-output { color: #dce6f2; font-variant-numeric: tabular-nums; }
      input[type="range"] { width: 100%; accent-color: var(--blue); }
      .format-hint { margin: -7px 0 0; color: #8f9db1; font-size: 10px; line-height: 1.5; }
      .primary-button { min-height: 40px; padding: 0 15px; border: 1px solid #438de0; border-radius: 7px; background: #2879d0; color: #fff; cursor: pointer; font-weight: 650; }
      .primary-button:hover:not(:disabled) { background: #388ce7; }
      .primary-button:disabled { opacity: .45; cursor: not-allowed; }
      .secondary-button { min-height: 40px; padding: 0 15px; border: 1px solid #34475e; border-radius: 7px; background: #202b3a; color: #e6edf6; cursor: pointer; font-weight: 600; }
      .secondary-button:hover:not(:disabled) { background: #2a3a4e; }
      .secondary-button:disabled { opacity: .45; cursor: not-allowed; }
      .settings-actions { display: grid; gap: 8px; margin-top: 17px; }
      .privacy-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: #8796ab; font-size: 10px; line-height: 1.55; }
      .offline-note { margin: 10px 0 0; color: #8796ab; font-size: 10px; line-height: 1.55; }
      .progress-wrap { margin: 14px 0 0; }
      .progress-line { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; color: #c8d3e1; font-size: 10px; }
      progress { width: 100%; height: 7px; accent-color: var(--blue); }
      .global-status { min-height: 15px; margin: 12px 0 0; color: #a7b5c8; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
      .global-status.error { color: var(--red); }
      @media (max-width: 800px) {
        .topbar { height: 54px; padding: 0 14px; }
        .header-actions { gap: 12px; }
        .menu-backdrop { top: 54px; }
        main { width: min(100% - 24px, 640px); padding: 22px 0 32px; }
        .layout { grid-template-columns: minmax(0, 1fr); }
        .settings-panel { order: -1; }
        .privacy-pill { align-self: start; }
      }
      @media (max-width: 480px) {
        .brand img { width: 43px; height: 34px; }
        .back-link { display: none; }
        .brand { gap: 7px; font-size: 12px; }
        .brand small { font-size: 9px; }
        .back-link { font-size: 11px; }
        main { width: calc(100% - 18px); padding-top: 17px; }
        .intro { display: block; margin-bottom: 15px; }
        .privacy-pill { display: inline-block; margin-top: 12px; }
        .panel { padding: 12px; }
        .file-card { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 9px; }
        .preview { grid-row: 1 / span 2; width: 76px; height: 76px; }
        .file-content { display: contents; }
        .file-topline { grid-column: 2; }
        .stats, .dimensions, .file-status { grid-column: 1 / -1; }
        .stats { padding-top: 1px; }
        .dimensions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
        .dimensions .field { font-size: 9px; }
        .file-status { margin-top: -2px; }
      }
      @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }