:root {
    --bg: #0f0f0e;
    --surface: #161714;
    --surface2: #1e1f1b;
    --border: #2c2e27;
    --accent: #a8d060;
    --accent-dark: #7aaa2e;
    --accent-glow: rgba(168,208,96,0.15);
    --shell: #f5c542;
    --text: #e8e4d8;
    --muted: #9a9a8a;
    --success: #a8d060;
    --error: #f87171;
  }


  :root.light {
    --bg: #f0f0ee;
    --surface: #fafafa;
    --surface2: #e4e4e1;
    --border: #c0c0bc;
    --accent: #111110;
    --accent-dark: #000000;
    --accent-glow: rgba(0,0,0,0.12);
    --shell: #111110;
    --text: #111110;
    --muted: #777774;
    --success: #2a7a00;
    --error: #cc1a1a;
  }

  /* Light mode overrides */
  :root.light body { background: var(--bg); }

  :root.light .panel,
  :root.light .right-panel {
    background: var(--surface);
    box-shadow: 2px 0 16px rgba(0,0,0,0.07), 0 0 0 1px var(--border);
  }

  :root.light .card-tabs {
    background: var(--surface2);
    border-bottom: 1.5px solid var(--border);
  }

  :root.light .card-tab {
    color: var(--muted);
  }
  :root.light .card-tab:hover {
    background: #1a1c14;
    color: #f0f2eb;
  }
  :root.light .card-tab.active {
    background: var(--surface);
    color: var(--accent);
    border-bottom-color: var(--accent);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }

  :root.light header {
    background: rgba(240,242,235,0.92);
    border-bottom: 1.5px solid var(--border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    backdrop-filter: blur(12px);
  }

  :root.light .gen-btn {
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  }
  :root.light .gen-btn:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  }
  :root.light .poz-add-btn {
    color: #fff;
  }
  :root.light .lb-btn.primary {
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
  }
  :root.light .lb-btn {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.85);
  }
  :root.light .lb-btn:hover {
    background: rgba(255,255,255,0.18);
    border-color: #a8d060;
    color: #a8d060;
  }
  .poz-save-action-btn { color: #fff; }
  :root.light .poz-save-action-btn {
    color: #fff;
    background: #1a1c14 !important;
  }

  :root.light textarea,
  :root.light input[type="text"],
  :root.light input[type="password"] {
    background: var(--surface2);
    border-color: var(--border);
    color: var(--text);
  }
  :root.light textarea:focus,
  :root.light input[type="text"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(74,140,0,0.12);
  }

  :root.light .model-tab {
    background: var(--surface2);
    border-color: var(--border);
    color: var(--muted);
  }
  :root.light .model-tab:hover {
    background: #1a1c14;
    border-color: #1a1c14;
    color: #f0f2eb;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  }
  :root.light .model-tab.active {
    background: rgba(176,136,0,0.1);
    border-color: var(--shell);
    color: var(--shell);
    box-shadow: 0 0 12px rgba(176,136,0,0.3);
  }

  :root.light .ratio-pill:hover {
    background: #1a1c14;
    border-color: #1a1c14;
    color: #f0f2eb;
  }
  :root.light .ratio-pill.active {
    background: rgba(0,0,0,0.08);
    border-color: var(--accent);
    box-shadow: none;
  }

  :root.light .gallery-item-dl-btn {
    background: rgba(255,255,255,0.85);
    border-color: rgba(0,0,0,0.2);
    color: #111;
  }
  :root.light .gallery-item-dl-btn:hover {
    background: #fff;
    border-color: var(--accent);
    color: var(--accent);
  }

  :root.light .status-bar {
    background: #f5f5f3;
    border-color: #d0d0cc;
    color: #555;
  }
  :root.light .status-bar.loading {
    background: #f0f5e8;
    border-color: #2a7a00;
    color: #2a7a00;
    box-shadow: 0 0 10px rgba(74,140,0,0.2);
  }
  :root.light .status-bar.success {
    background: #eef5e0;
    border-color: #2a7a00;
    color: #2a7a00;
  }
  :root.light .status-bar.error {
    background: #fef0f0;
    border-color: #cc1a1a;
    color: #cc1a1a;
  }

  :root.light .gallery-item {
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: 1px solid var(--border);
  }
  :root.light .gallery-item:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.22);
    border-color: #1a1c14;
  }

  :root.light .batch-open-btn {
    background: var(--surface);
    border-color: var(--border);
    color: var(--muted);
  }
  :root.light .batch-open-btn:hover {
    background: #1a1c14;
    border-color: #1a1c14;
    color: #f0f2eb;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  }

  :root.light .float-card {
    background: var(--surface);
    box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 0 0 1px var(--border);
  }

  :root.light .poz-panel-inner {
    background: var(--surface);
  }
  :root.light .poz-card {
    background: var(--surface2);
    border-color: var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  }
  :root.light .poz-card:hover {
    border-color: #1a1c14;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Syne', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
  }
  html { overflow-x: hidden; }

  /* ===== SVG PISTACHIO ANIMATIONS ===== */
  @keyframes emptyDance {
    0%   { transform: translateY(0px) scale(1); }
    8%   { transform: translateY(-14px) scale(1.05); }
    14%  { transform: translateY(0px) scale(1); }
    18%  { transform: translateY(-7px) scale(1.02); }
    22%  { transform: translateY(0px) scale(1); }
    100% { transform: translateY(0px) scale(1); }
  }
  @keyframes shellDance {
    0%   { transform: translateY(0px) rotate(0deg) scale(1); }
    8%   { transform: translateY(-12px) rotate(0deg) scale(1.05); }
    14%  { transform: translateY(0px) rotate(0deg) scale(1); }
    18%  { transform: translateY(-6px) rotate(0deg) scale(1.02); }
    22%  { transform: translateY(0px) rotate(0deg) scale(1); }
    /* Dur, bekle */
    40%  { transform: translateY(0px) rotate(0deg) scale(1); }
    /* Dön */
    70%  { transform: translateY(0px) rotate(360deg) scale(1); }
    /* Bekle */
    100% { transform: translateY(0px) rotate(360deg) scale(1); }
  }
  @keyframes shellSway {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
  }
  @keyframes nutPop {
    0%, 100% { transform: scale(1); }
    40% { transform: scale(1.05); }
    60% { transform: scale(0.97); }
  }
  @keyframes leafSway {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(8deg); }
  }
  @keyframes sparkle1 {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1); }
  }

  /* ===== HEADER ===== */
  header {
    padding: 6px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    position: relative;
    flex-shrink: 0;
  }

  @keyframes scanline {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  .logo-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
  }

  .logo-text-block { line-height: 1; }

  .logo-name {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: var(--accent);
    letter-spacing: -0.3px;
  }

  .logo-sub {
    font-family: 'DM Mono', monospace;
    font-size: 7.5px;
    color: var(--muted);
    letter-spacing: 0.15em;
    margin-top: 4px;
  }

  .credits-badge {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 5px 14px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .credits-dot {
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    animation: blink 1s steps(1) infinite;
    box-shadow: 0 0 6px var(--accent);
  }
  :root.light .credits-dot {
    background: #1a1c14;
    box-shadow: none;
    animation: none;
  }

  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }

  /* ===== LAYOUT ===== */
  .app {
    display: grid;
    grid-template-columns: 370px 1fr 275px;
    flex: 1;
    overflow: hidden;
    height: calc(100vh - 76px);
    transition: grid-template-columns 0.3s ease;
  }
  .app.right-hidden {
    grid-template-columns: 370px 1fr 0px;
  }
  .app.left-hidden {
    grid-template-columns: 0px 1fr 275px;
  }
  .app.left-hidden.right-hidden {
    grid-template-columns: 0px 1fr 0px;
  }
  .app.right-expanded {
    grid-template-columns: 370px 1fr 550px !important;
  }
  .app.left-hidden.right-expanded {
    grid-template-columns: 0px 1fr 550px !important;
  }
  .panel {
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 0.3s ease;
    min-width: 0;
    position: relative;
    z-index: 9999;
  }
  .app.left-hidden .panel {
    opacity: 0;
    pointer-events: none;
    border-right: none;
    overflow: hidden;
    min-width: 0;
  }
  .prompts-panel {
    background: var(--surface);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overflow-y: auto;
    transition: opacity 0.3s ease;
    position: relative;
    z-index: 9999;
    grid-column: 3;
  }
  .app.right-hidden .prompts-panel {
    opacity: 0;
    pointer-events: none;
    border-left: none;
  }

  .panel {
    background: var(--surface);
    border-right: none;
    overflow: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .panel::-webkit-scrollbar { width: 3px; }
  .panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

  .section-label {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--shell);
    text-transform: uppercase;
    margin-bottom: 5px;
  }

  input[type="text"], input[type="password"], textarea {
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: 'DM Mono', monospace;
    font-size: 14px;
    padding: 9px 12px;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
  }
  input:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
  }
  textarea { resize: vertical; min-height: 85px; line-height: 1.5; font-size: 13px; overflow: auto; }
  textarea#prompt_0, textarea#prompt_1, textarea#prompt_2, textarea#prompt_3, textarea#prompt_4 {
    min-height: 160px;
    flex: 1;
    transition: min-height 0.2s ease;
  }
  textarea#prompt_0:focus, textarea#prompt_1:focus, textarea#prompt_2:focus, textarea#prompt_3:focus, textarea#prompt_4:focus {
    min-height: 220px;
  }

  .api-row { display: flex; gap: 8px; }

  .save-btn {
    background: var(--surface2);
    border: 1.5px solid var(--border);
    color: var(--muted);
    border-radius: 10px;
    padding: 9px 14px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: all 0.2s;
    font-family: 'Syne', sans-serif;
  }
  .save-btn:hover { border-color: var(--accent); color: var(--accent); }

  /* Model */
  .model-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

  .model-tab {
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 10px 8px;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Syne', sans-serif;
    color: var(--muted);
    transition: all 0.2s;
  }
  .model-tab:hover { border-color: var(--shell); color: var(--text); box-shadow: 0 0 10px rgba(212, 168, 67, 0.35); }
  .model-tab.active {
    background: rgba(212, 168, 67, 0.12);
    border-color: var(--shell);
    color: var(--shell);
    box-shadow: 0 0 12px rgba(212, 168, 67, 0.5), 0 0 4px rgba(212, 168, 67, 0.3);
  }

  /* ===== ASPECT RATIO — NEW FLOW ===== */
  /* Step 1: ratio pills */
  .ratio-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }

  .ratio-pill {
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: 30px;
    padding: 7px 13px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    transition: all 0.2s;
    flex-shrink: 0;
  }
  .ratio-pill:hover { border-color: var(--accent); transform: translateY(-1px); }
  .ratio-pill.active {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.6);
  }

  .ratio-thumb {
    background: var(--muted);
    border-radius: 2px;
    flex-shrink: 0;
    transition: background 0.2s;
  }
  .ratio-pill.active .ratio-thumb { background: #fff; }
  .ratio-pill:hover .ratio-thumb { background: rgba(168,208,96,0.6); }

  .ratio-txt {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
  }
  .ratio-pill.active .ratio-txt { color: #fff; font-weight: 700; }

  /* Step 2: resolution — appears after ratio selected */
  .res-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .res-picker.visible { display: flex; }

  @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

  .res-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    color: var(--muted);
    letter-spacing: 0.1em;
  }

  .res-label-row .selected-ratio {
    color: var(--accent);
    font-size: 10px;
  }

  .res-btns { display: flex; gap: 8px; }

  .res-btn {
    flex: 1;
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    cursor: pointer;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: var(--muted);
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .res-btn:hover { border-color: var(--accent); color: var(--text); transform: translateY(-1px); }
  .res-btn.active {
    background: rgba(168,208,96,0.12);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
  }

  .res-btn-sub {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: inherit;
    opacity: 0.7;
    font-weight: 400;
  }

  /* Selected summary chip */
  .selection-chip {
    display: none;
    align-items: center;
    gap: 6px;
    background: rgba(168,208,96,0.08);
    border: 1.5px solid rgba(168,208,96,0.3);
    border-radius: 30px;
    padding: 5px 12px 5px 8px;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--accent);
    cursor: pointer;
    width: fit-content;
    transition: all 0.2s;
  }
  .selection-chip.visible { display: flex; }
  .selection-chip:hover { background: rgba(168,208,96,0.15); }
  .chip-x {
    font-size: 11px;
    opacity: 0.6;
    margin-left: 2px;
  }

  /* Count */
  .count-row { display: flex; gap: 8px; }

  .count-btn {
    flex: 1;
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 10px 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    font-family: 'DM Mono', monospace;
    color: var(--muted);
    transition: all 0.2s;
    text-align: center;
  }
  .count-btn:hover { border-color: var(--accent); color: var(--text); transform: translateY(-1px); }
  .count-btn.active {
    background: rgba(168,208,96,0.12);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
  }

  /* Neg prompt */
  .neg-toggle {
    background: transparent; border: none; color: var(--muted);
    font-size: 11px; font-weight: 700; font-family: 'Syne', sans-serif;
    cursor: pointer; padding: 0; display: flex; align-items: center;
    gap: 5px; transition: color 0.2s;
  }
  .neg-toggle:hover { color: var(--accent); }
  .neg-area { display: none; margin-top: 8px; }
  .neg-area.open { display: block; }

  /* Status */
  .status-bar {
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 9px 14px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  .status-bar::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0%;
    background: linear-gradient(90deg, rgba(168,208,96,0.15), rgba(168,208,96,0.25));
    transition: width 0.5s ease;
    z-index: -1;
    border-radius: 10px;
  }
  .status-bar.loading { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
  .status-bar.loading::before {
    animation: statusFill 25s ease-out forwards;
  }
  @keyframes statusFill {
    0% { width: 0%; }
    10% { width: 15%; }
    30% { width: 40%; }
    60% { width: 65%; }
    80% { width: 80%; }
    95% { width: 92%; }
    100% { width: 95%; }
  }
  .status-bar.success { border-color: var(--success); color: var(--success); }
  .status-bar.success::before { width: 100%; background: linear-gradient(90deg, rgba(168,208,96,0.1), rgba(168,208,96,0.2)); }
  .status-bar.error { border-color: var(--error); color: var(--error); }
  .status-bar.error::before { width: 0%; }

  /* Generate */
  .gen-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #1a2010;
    border: none;
    border-radius: 12px;
    padding: 11px;
    font-family: 'DM Mono', monospace;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    width: 100%;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(168,208,96,0.3);
    position: relative;
    overflow: hidden;
  }
  .gen-btn::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.1) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.5s;
  }
  .gen-btn:hover::after { transform: translateX(100%); }
  .gen-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(168,208,96,0.45); }
  .gen-btn:active { transform: translateY(0); }
  .gen-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

  .gen-btn .spinner {
    width: 16px; height: 16px;
    border: 2.5px solid rgba(0,0,0,0.3);
    border-top-color: #1a2010;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: none;
  }
  .gen-btn.loading .spinner { display: block; }
  .gen-btn.loading .btn-text { display: none; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .shortcut-hint { text-align: center; font-family: 'DM Mono', monospace; font-size: 10px; color: var(--muted); margin-top: -6px; letter-spacing: 0.08em; }
  .shortcut-hint .cmd { font-size: 15px; vertical-align: middle; line-height: 1; }
  .divider { border: none; border-top: 1px solid var(--border); }

  /* ===== GALLERY ===== */
  .gallery-panel { background: var(--bg); overflow-y: auto; padding: 20px; -webkit-overflow-scrolling: touch; touch-action: pan-y; min-width: 0; overflow-x: hidden; grid-column: 2; }
  .gallery-panel::-webkit-scrollbar { width: 6px; }
  .gallery-panel::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 3px; }
  .gallery-panel::-webkit-scrollbar-track { background: var(--surface2); }

  .gallery-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }

  .gallery-title {
    font-family: 'Syne', sans-serif;
    font-weight: 900; font-size: 16px; color: var(--muted);
  }

  .clear-btn {
    background: transparent; border: 1.5px solid var(--border); color: var(--muted);
    border-radius: 8px; padding: 5px 12px; font-size: 11px; font-weight: 700;
    font-family: 'Syne', sans-serif; cursor: pointer; transition: all 0.2s;
  }
  .clear-btn:hover { border-color: var(--error); color: var(--error); }
  @media (pointer: coarse) { .expand-panel-btn { display: none !important; } }

  .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-items: start; }

  .gallery-item {
    position: relative;
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: 14px; overflow: hidden; transition: all 0.25s; cursor: pointer;
  }
  .gallery-item.dragging { opacity: 0.3; transform: scale(0.97); }
  .gallery-item.drag-over { outline: 2px dashed var(--accent); outline-offset: 2px; transform: translateY(-2px); }
  @property --fill-pct {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
  }
  .gallery-item:hover {
    border-color: transparent; transform: translateY(-3px);
    animation: neonFlash 0.55s ease-out 2.5s forwards;
  }
  .gallery-item:hover::before {
    content: '';
    position: absolute; inset: 0; border-radius: 14px;
    padding: 2px;
    background: conic-gradient(
      from 270deg,
      #a8d060 0%,
      #d8ffaa calc(var(--fill-pct) - 2%),
      #ffffff calc(var(--fill-pct) - 0.5%),
      transparent var(--fill-pct),
      transparent 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: neonGrow 2.5s cubic-bezier(0.2, 0, 0.4, 1) forwards;
    z-index: 10; pointer-events: none;
  }
  @keyframes neonGrow {
    0%   { --fill-pct: 3%; }
    100% { --fill-pct: 101%; }
  }
  @keyframes neonFlash {
    0%   { box-shadow: 0 0 0 2px #ffffff, 0 0 28px rgba(168,208,96,1), 0 0 55px rgba(168,208,96,0.6); }
    45%  { box-shadow: 0 0 0 1.5px var(--accent), 0 0 5px rgba(168,208,96,0.2); }
    100% { box-shadow: 0 0 0 1.5px var(--accent), 0 0 14px rgba(168,208,96,0.55), 0 0 30px rgba(168,208,96,0.2), 0 8px 24px rgba(0,0,0,0.4); }
  }
  .compare-toggle-btn { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-size: 10px; font-family: 'DM Mono', monospace; padding: 2px 8px; cursor: pointer; transition: all 0.2s; letter-spacing: 0.04em; }
  .compare-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
  .compare-toggle-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(168,208,96,0.1); }
  .gallery-item img { width: 100%; display: block; height: auto; object-fit: cover; }
  .gallery-item-ref-btn {
    position: absolute;
    top: 7px; left: 7px;
    background: rgba(0,0,0,0.72);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 7px;
    color: #fff;
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    padding: 4px 8px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, border-color 0.2s;
    white-space: nowrap;
  }
  .gallery-item:hover .gallery-item-ref-btn { opacity: 1; }
  .gallery-item-ref-btn:hover { border-color: var(--accent); color: var(--accent); }
  .gallery-item-pin-btn {
    position: absolute;
    top: 36px; left: 7px;
    background: rgba(0,0,0,0.72);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 7px;
    color: #fff;
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    padding: 4px 8px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, border-color 0.2s, color 0.2s;
    white-space: nowrap;
  }
  .gallery-item:hover .gallery-item-pin-btn { opacity: 1; }
  .gallery-item-pin-btn:hover { border-color: var(--accent); color: var(--accent); }
  .gallery-item-del-btn { position: absolute; top: 7px; right: 50px; background: rgba(80,0,0,0.78); border: 1px solid rgba(255,80,80,0.45); border-radius: 7px; color: #ff7676; font-size: 13px; padding: 4px 8px; cursor: pointer; opacity: 0.85; transition: opacity 0.2s, background 0.2s, border-color 0.2s; line-height: 1; z-index: 5; }
  .gallery-item:hover .gallery-item-del-btn { opacity: 1; }
  .gallery-item-del-btn:hover { background: rgba(180,30,30,0.95); border-color: #ff5555; color: #fff; }
  .gallery-item-dl-btn {
    position: absolute;
    top: 7px; right: 7px;
    background: rgba(0,0,0,0.72);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 7px;
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, border-color 0.2s;
    text-decoration: none;
    line-height: 1;
  }
  .gallery-item:hover .gallery-item-dl-btn { opacity: 1; }
  .gallery-item-dl-btn:hover { border-color: var(--accent); color: var(--accent); }
  .gallery-item-info { padding: 9px 11px; border-top: 1px solid var(--border); }
  .gallery-item-prompt { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
  .gallery-item-meta { display: flex; justify-content: space-between; align-items: center; }

  .tag { background: var(--surface2); border-radius: 6px; padding: 2px 6px; font-family: 'DM Mono', monospace; font-size: 9px; color: var(--muted); }

  .output-name-input { font-size: 11px; }
  .fortune-line { font-style:italic!important; font-size:11px!important; color:rgba(255,255,255,0.5)!important; margin-top:6px!important; white-space:normal!important; overflow:visible!important; line-height:1.5!important; word-break:break-word!important; }
  :root.light .fortune-line { color:rgba(0,0,0,0.4)!important; }
  textarea.prompt-masked { -webkit-text-security: disc; text-security: disc; }
  .prompt-masked-text { color: transparent !important; text-shadow: 0 0 6px var(--muted); user-select: none; }
  .gallery-prompt-eye { background:none; border:none; cursor:pointer; color:var(--muted); padding:0; display:flex; align-items:center; flex-shrink:0; opacity:0.5; }
  .gallery-prompt-eye:hover { opacity:1; }

  .download-btn {
    background: var(--surface2); border: 1.5px solid var(--border); border-radius: 7px;
    padding: 3px 9px; font-size: 11px; font-weight: 700; font-family: 'Syne', sans-serif;
    color: var(--muted); cursor: pointer; transition: all 0.2s; text-decoration: none; display: inline-flex; align-items: center;
  }
  .download-btn:hover { border-color: var(--success); color: var(--success); }

  .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 60vh; gap: 14px; grid-column: 1 / -1; }

  .empty-pixel-wrap {
    animation: floatBob 2s ease-in-out infinite;
    filter: drop-shadow(0 6px 14px rgba(168,208,96,0.25));
  }
  @keyframes floatBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  .empty-text { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 18px; color: var(--muted); }
  .empty-sub { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--border); }

  .skeleton-item { background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px; overflow: visible; }
  .skeleton-img {
    width: 100%;
    aspect-ratio: 1;
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .skeleton-img img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    border-radius: inherit;
    opacity: 0.8;
  }
  @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  .spin-slow { animation: spin 2s linear infinite; }
  @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  .skeleton-item.shaking { animation: pst-shake 0.45s cubic-bezier(.36,.07,.19,.97) infinite; transform-origin: center; will-change: transform; }
  @keyframes pst-shake {
    0%,100% { transform: translate(0,0) rotate(0); }
    10% { transform: translate(-2px,1px) rotate(-0.6deg); }
    20% { transform: translate(2px,-1px) rotate(0.6deg); }
    30% { transform: translate(-3px,0) rotate(-0.9deg); }
    40% { transform: translate(3px,1px) rotate(0.9deg); }
    50% { transform: translate(-2px,-1px) rotate(-0.4deg); }
    60% { transform: translate(2px,0) rotate(0.4deg); }
    70% { transform: translate(-3px,1px) rotate(-0.6deg); }
    80% { transform: translate(2px,-1px) rotate(0.6deg); }
    90% { transform: translate(-1px,0) rotate(-0.2deg); }
  }

  /* ===== LIGHTBOX ===== */
  .lightbox { display: none; position: fixed; inset: 0; background: rgba(5,5,5,0.96); z-index: 2000; align-items: center; justify-content: center; padding: 40px; backdrop-filter: blur(4px); }
  .lightbox.open { display: flex; }
  .lightbox-content { position: relative; max-width: 88vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .lightbox-content img {
    max-width: 100%; max-height: 80vh; border-radius: 12px; display: block;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    transition: transform 0.15s ease;
    transform-origin: 0 0;
    cursor: zoom-in;
  }
  .lightbox-content img.zoomed {
    cursor: grab;
  }
  .lightbox-content img.panning {
    cursor: grabbing;
    transition: none;
  }
  .lightbox-close { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.6); border: 1.5px solid rgba(255,255,255,0.25); color: #fff; width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer; opacity: 0.85; transition: all 0.2s; z-index: 10000; display: flex; align-items: center; justify-content: center; }
  .lightbox-close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; }
  .lightbox-close:hover { opacity: 1; }
  .lightbox-actions { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
  .lb-img-wrap {
    position: relative; display: flex; align-items: center; justify-content: center;
    overflow: hidden; cursor: default;
  }
  .lb-img-wrap img { resize: none; }
  .lb-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.12); border: 2px solid rgba(0,0,0,0.6);
    color: #fff; width: 40px; height: 40px; padding: 0;
    border-radius: 50%; cursor: pointer; display: flex; align-items: center;
    justify-content: center; transition: all 0.2s; z-index: 2010;
  }
  .lb-nav svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .lb-nav:hover { background: rgba(255,255,255,0.25); border-color: rgba(0,0,0,0.8); }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .lb-counter {
    text-align: center; font-family: 'DM Mono', monospace; font-size: 11px;
    color: rgba(255,255,255,0.5); margin-top: 8px;
  }
  .lb-btn { background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.2); border-radius: 10px; padding: 8px 20px; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 12px; color: rgba(255,255,255,0.85); cursor: pointer; transition: all 0.2s; text-decoration: none; }
  .lb-btn:hover { border-color: #a8d060; color: #a8d060; box-shadow: 0 0 10px rgba(168,208,96,0.2); }
  .lb-btn.primary { background: linear-gradient(135deg, #a8d060, #7aaa2e); border-color: #a8d060; color: #1a2010; font-weight: 900; box-shadow: 0 4px 14px rgba(168,208,96,0.3); }
  .lb-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(168,208,96,0.45); }

  /* ===== PROMPTS PANEL ===== */
  .prompts-panel-scroll { overflow-y: auto; flex: 1; }
  .prompts-header { padding: 16px 16px 0; border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .prompts-tabs { display: flex; margin-top: 10px; }
  .prompts-tab { flex: 1; padding: 9px 4px; text-align: center; font-size: 12px; font-weight: 700; font-family: 'Syne', sans-serif; color: var(--muted); cursor: pointer; border-bottom: 2.5px solid transparent; transition: all 0.2s; }
  .prompts-tab:hover { color: var(--text); }
  .prompts-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
  .prompts-body { flex: 1; overflow-y: auto; padding: 14px; }
  .prompts-body::-webkit-scrollbar { width: 3px; }
  .prompts-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
  .tab-content { display: none; }
  .tab-content.active { display: block; }
  #tab-presets { flex-direction: column; max-height: 60vh; overflow: hidden; }
  #tab-presets.active { display: flex; }
  .card-tab.drop-target { outline: 2px solid var(--accent, #94e26b); outline-offset: 2px; background: rgba(148,226,107,0.18); }
  .model-tag-select { position: absolute; top: 4px; left: 4px; background: rgba(0,0,0,0.6); color: #fff; border: 1px solid rgba(255,255,255,0.25); border-radius: 6px; font-size: 9px; padding: 2px 4px; cursor: pointer; outline: none; max-width: 70px; }
  .model-tag-select option { color: #000; background: #fff; }

  /* PRESETS */
  .preset-filters{display:flex;gap:6px;margin-bottom:10px;}
  .preset-gender-btn{flex:1;background:var(--surface2);border:1px solid var(--border);color:var(--muted);font-family:'DM Mono',monospace;font-size:10px;padding:6px 0;border-radius:6px;cursor:pointer;transition:all .15s;text-align:center;}
  .preset-gender-btn:hover{border-color:var(--accent);color:var(--text);}
  .preset-gender-btn.on{background:var(--accent);color:var(--bg);border-color:var(--accent);font-weight:700;}
  .preset-pack{margin-bottom:8px;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
  .preset-pack-head{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;transition:background .15s;user-select:none;}
  .preset-pack-head:hover{background:var(--surface2);}
  .preset-pack-icon{width:18px;height:18px;border-radius:4px;flex-shrink:0;}
  .preset-pack-name{font-family:'Syne',sans-serif;font-size:12px;font-weight:600;flex:1;}
  .preset-pack-count{font-family:'DM Mono',monospace;font-size:9px;color:var(--muted);}
  .preset-pack-arrow{font-size:10px;color:var(--muted);transition:transform .2s;}
  .preset-pack.open .preset-pack-arrow{transform:rotate(90deg);}
  .preset-pack-body{display:none;padding:0 10px 10px;}
  .preset-pack.open .preset-pack-body{display:block;}
  .preset-pack-desc{font-size:10px;color:var(--muted);margin-bottom:8px;line-height:1.4;}
  .preset-item{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);}
  .preset-item:last-child{border-bottom:none;}
  .preset-item-info{flex:1;min-width:0;}
  .preset-item-title{font-family:'DM Mono',monospace;font-size:10px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .preset-item-gender{font-family:'DM Mono',monospace;font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;}
  .preset-use-btn{background:none;border:1px solid var(--border);color:var(--muted);font-family:'DM Mono',monospace;font-size:9px;padding:4px 10px;border-radius:4px;cursor:pointer;transition:all .13s;flex-shrink:0;}
  .preset-use-btn:hover{border-color:var(--accent);color:var(--accent);}
  .preset-pack.locked .preset-pack-body{filter:blur(3px);pointer-events:none;user-select:none;}
  .preset-buy-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;background:linear-gradient(135deg,var(--accent),#c8a060);color:var(--bg);font-family:'DM Mono',monospace;font-size:10px;font-weight:700;padding:8px;border:none;border-radius:6px;cursor:pointer;margin-top:6px;transition:opacity .15s;letter-spacing:.04em;}
  .preset-buy-btn:hover{opacity:.85;}
  .preset-lock-icon{font-size:11px;margin-left:4px;opacity:.5;}

  .add-prompt-form { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
  .add-prompt-form input { font-size: 11px; padding: 8px 10px; border-radius: 9px; }
  .add-prompt-form textarea { font-size: 11px; min-height: 56px; border-radius: 9px; resize: vertical; }
  .add-prompt-btn { background: var(--surface2); border: 1.5px solid var(--border); border-radius: 9px; padding: 8px; font-size: 12px; font-weight: 800; font-family: 'Syne', sans-serif; color: var(--muted); cursor: pointer; transition: all 0.2s; text-align: center; }
  .add-prompt-btn:hover { border-color: var(--accent); color: var(--accent); }
  .prompt-count { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--border); text-align: right; }

  .prompt-item { background: var(--surface2); border: 1.5px solid var(--border); border-radius: 12px; padding: 10px; margin-bottom: 8px; transition: all 0.2s; }
  .prompt-item:hover { border-color: rgba(168,208,96,0.35); }
  .prompt-item-title { font-size: 12px; font-weight: 800; color: var(--text); margin-bottom: 4px; display: flex; align-items: center; gap: 4px; }
  .prompt-edit-icon { font-size: 10px; color: var(--muted); cursor: pointer; opacity: 0; transition: opacity 0.15s; }
  .prompt-item:hover .prompt-edit-icon { opacity: 1; }
  .prompt-edit-icon:hover { color: var(--accent); }
  .prompt-item-text { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; }
  .prompt-item-actions { display: flex; gap: 5px; }
  .prompt-use-btn { flex: 1; background: rgba(168,208,96,0.1); border: 1.5px solid rgba(168,208,96,0.3); border-radius: 7px; padding: 5px 8px; font-size: 11px; font-weight: 800; font-family: 'Syne', sans-serif; color: var(--accent); cursor: pointer; transition: all 0.2s; }
  .prompt-use-btn:hover { background: rgba(168,208,96,0.2); }
  .prompt-del-btn { background: transparent; border: 1.5px solid var(--border); border-radius: 7px; padding: 5px 10px; font-size: 11px; font-weight: 700; font-family: 'Syne', sans-serif; color: var(--muted); cursor: pointer; transition: all 0.2s; }
  .prompt-del-btn:hover { border-color: var(--error); color: var(--error); }

  .history-item { background: var(--surface2); border: 1.5px solid var(--border); border-radius: 12px; padding: 10px; margin-bottom: 8px; cursor: pointer; transition: all 0.2s; }
  .history-item:hover { border-color: var(--accent); transform: translateX(2px); }
  .history-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; margin-bottom: 7px; display: block; }
  .history-prompt { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; }
  .history-meta { display: flex; justify-content: space-between; align-items: center; }
  .history-tags { display: flex; gap: 3px; }
  .history-reuse { background: transparent; border: 1.5px solid var(--border); border-radius: 6px; padding: 3px 9px; font-size: 10px; font-weight: 700; font-family: 'Syne', sans-serif; color: var(--muted); cursor: pointer; transition: all 0.2s; }
  .history-reuse:hover { border-color: var(--accent); color: var(--accent); }

  .no-items { text-align: center; color: var(--border); font-family: 'DM Mono', monospace; font-size: 11px; padding: 32px 0; }

  /* ===== CARD TAB SYSTEM ===== */
  .card-tabs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    flex-shrink: 0;
    background: var(--surface);
    padding: 8px 10px;
    gap: 4px;
    border-bottom: 1px solid var(--border);
  }
  .card-tab {
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    color: var(--muted);
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    min-width: 0;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .card-tab { touch-action: none; }
  .card-tab:hover { border-color: var(--accent); color: var(--text); }
  .card-tab.active { background: rgba(168,208,96,0.12); border-color: var(--accent); color: var(--accent); }
  .card-tab.drag-over-tab { border-color: var(--shell); background: rgba(245,197,66,0.15); }
  .card-tab.generating::after {
    content: '';
    position: absolute;
    top: 5px; right: 6px;
    width: 5px; height: 5px;
    background: var(--accent);
    border-radius: 50%;
    animation: blink 1s steps(1) infinite;
  }

  /* ===== FLOATING CARD PANELS ===== */
  .float-card {
    position: fixed;
    width: 320px;
    max-height: calc(100vh - 80px);
    min-width: 260px;
    min-height: 200px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.55);
    display: flex;
    flex-direction: column;
    z-index: 200;
    overflow: hidden;
    transition: box-shadow 0.2s;
  }
  .float-resize {
    position: absolute; z-index: 101; background: transparent; touch-action: none;
  }
  .float-resize:hover, .float-resize.active { background: rgba(168,208,96,0.25); }
  .float-resize-n { top:-4px;left:8px;right:8px;height:14px;cursor:n-resize; }
  .float-resize-s { bottom:-4px;left:8px;right:8px;height:14px;cursor:s-resize; }
  .float-resize-e { right:-4px;top:8px;bottom:8px;width:14px;cursor:e-resize; }
  .float-resize-w { left:-4px;top:8px;bottom:8px;width:14px;cursor:w-resize; }
  .float-resize-nw { top:-4px;left:-4px;width:22px;height:22px;cursor:nw-resize;border-radius:14px 0 0 0; }
  .float-resize-ne { top:-4px;right:-4px;width:22px;height:22px;cursor:ne-resize;border-radius:0 14px 0 0; }
  .float-resize-sw { bottom:-4px;left:-4px;width:22px;height:22px;cursor:sw-resize;border-radius:0 0 0 14px; }
  .float-resize-se { bottom:-4px;right:-4px;width:22px;height:22px;cursor:se-resize;border-radius:0 0 14px 0; }
  .float-card.is-dragging-float { box-shadow: 0 20px 60px rgba(0,0,0,0.7); }
  .float-card.is-generating {
    width: 140px !important;
    height: 140px !important;
    min-width: 140px;
    min-height: 140px;
    max-height: 140px !important;
    transition: width 0.4s ease, height 0.4s ease, min-width 0.4s ease, min-height 0.4s ease, max-height 0.4s ease;
  }
  .float-card.is-generating .float-card-body,
  .float-card.is-generating .float-card-results,
  .float-card.is-generating .float-resize,
  .float-card.is-generating .float-card-header { display: none !important; }
  .float-gen-spinner {
    width: 140px;
    height: 140px;
    overflow: hidden;
    border-radius: 14px;
  }
  .float-gen-spinner img {
    width: 140px; height: 140px;
    object-fit: cover;
    display: block;
  }
  .float-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    cursor: grab;
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    -webkit-touch-callout: none;
    position: relative;
    z-index: 102;
  }
  .float-card-header:active { cursor: grabbing; }
  .float-card-title {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.1em;
  }
  .float-card-close {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
  }
  .float-card-close:hover { color: var(--text); }
  .float-card-mute {
    background: none; border: none; color: var(--muted); cursor: pointer;
    font-size: 16px; padding: 0 6px; line-height: 1; transition: color 0.2s;
  }
  .float-card-mute:hover { color: var(--text); }
  .gen-toast {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
    background: var(--accent); color: #000; padding: 12px 24px;
    border-radius: 12px; font-family: 'DM Sans', sans-serif; font-weight: 600;
    font-size: 14px; z-index: 9999; opacity: 0;
    animation: toastIn 0.3s ease forwards, toastOut 0.3s ease 4.7s forwards;
    box-shadow: 0 8px 32px rgba(168,208,96,0.4);
  }
  :root.light .gen-toast {
    background: #222; color: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  }
  :root.light .mobile-mini-gen {
    background: #222!important; color: #fff!important; border-color: #333!important;
  }
  /* Radyo & ses butonları */
  #soundBtnsWrap {
    position:fixed; bottom:72px; right:24px; z-index:99999;
    display:none; flex-direction:column; gap:14px; align-items:center;
    pointer-events:auto;
  }
  @media (max-width: 768px) {
    #soundBtnsWrap { bottom:16px; right:12px; gap:10px; }
    .sound-float-btn { width:40px!important; height:40px!important; font-size:18px!important; }
  }
  .sound-float-btn {
    width:36px!important; height:36px!important; min-width:unset!important; padding:0!important;
    border-radius:50%!important; border:none!important; background:rgba(255,255,255,0.15);
    backdrop-filter:blur(8px); font-size:16px!important; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    -webkit-user-select:none; user-select:none; touch-action:none; -webkit-touch-callout:none;
  }
  :root.light .sound-float-btn {
    background:rgba(0,0,0,0.15)!important; border:1px solid rgba(0,0,0,0.1)!important;
  }
  @keyframes toastIn { to { opacity: 1; transform: translateX(-50%) translateY(0); } }
  @keyframes toastOut { to { opacity: 0; transform: translateX(-50%) translateY(-20px); } }
  /* Card inline results */
  .card-results-wrap {
    border-top: 1px solid var(--border);
    padding-top: 6px;
  }
  .card-results-toggle {
    background: none; border: none; color: var(--muted); cursor: pointer;
    font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 600;
    display: flex; align-items: center; gap: 6px; padding: 4px 0;
    transition: color 0.2s;
  }
  .card-results-toggle:hover { color: var(--accent); }
  .card-results-badge {
    background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
    padding: 1px 7px; font-size: 10px;
  }
  .card-results {
    display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
    max-height: 200px; overflow-y: auto;
  }
  .card-results.hidden { display: none; }
  .card-results::-webkit-scrollbar { width: 3px; }
  .card-results::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
  .card-result-thumb {
    width: calc(33.33% - 3px); aspect-ratio: 1; border-radius: 6px;
    overflow: hidden; border: 1.5px solid var(--border); cursor: pointer;
    transition: border-color 0.2s;
  }
  .card-result-thumb:hover { border-color: var(--accent); }
  .card-result-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .float-card-results {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px;
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-radius: 0 0 12px 12px;
    min-height: 0;
  }
  .float-card-results:empty { display: none; }
  .float-card-results .gallery-item {
    width: calc(50% - 2px);
    flex-shrink: 0;
    border-radius: 6px;
  }
  .float-card-results .gallery-item:only-child {
    width: 100%;
  }
  .float-card-body {
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
  }
  .float-card-body::-webkit-scrollbar { width: 3px; }
  .float-card-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

  /* ===== CARD NAME ROW ===== */
  .card-name-row {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
  }
  .card-name-row .card-name-input { display: none; }
  .card-name-input {
    flex: 1;
    font-size: 13px !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    padding: 7px 10px !important;
    color: var(--text) !important;
  }
  .card-name-input::placeholder { color: var(--muted); font-weight: 400; }
  .hidden-row { display: none !important; }
  .compact-global-btn { font-size: 13px !important; }
  .card-save-btn {
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 7px 10px;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.2s;
    flex-shrink: 0;
  }
  .card-save-btn:hover { border-color: var(--accent); transform: scale(1.08); }
  .card-save-btn.saved { border-color: var(--accent); background: rgba(168,208,96,0.12); }
  .mobile-mini-gen { display: none; }
  .mobile-actions-bar { display: none; }

  /* ===== COMPACT TOGGLE ===== */
  .compact-toggle {
    width: 100%;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted);
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    margin-top: 4px;
  }
  .compact-toggle:hover { border-color: var(--accent); color: var(--accent); }
  .compact-settings {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    transition: all 0.25s ease;
  }
  .compact-settings.hidden {
    display: none;
  }
  /* ===== POZ REFERANSLARI ===== */
  .poz-panel {
    position: fixed;
    inset: 0;
    background: rgba(5,5,4,0.92);
    backdrop-filter: blur(8px);
    z-index: 900;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
  }
  .poz-panel.open { display: flex; }
  .poz-panel-inner {
    width: 100%;
    max-width: 1100px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.7);
  }
  .poz-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
  }
  .poz-panel-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: var(--text);
    letter-spacing: .04em;
  }
  .poz-count {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    background: var(--bg);
    padding: 3px 9px;
    border-radius: 20px;
    border: 1px solid var(--border);
  }
  .poz-add-btn {
    background: var(--accent);
    border: none;
    color: #0f0f0e;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 12px;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
  }
  .poz-add-btn:hover { background: var(--accent-dark); }
  .poz-close-btn {
    background: none;
    border: 1.5px solid var(--border);
    color: var(--muted);
    font-size: 16px;
    width: 32px; height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: color .15s, border-color .15s;
  }
  .poz-close-btn:hover { color: var(--text); border-color: var(--text); }
  .poz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    padding: 24px;
    min-height: 200px;
  }
  .poz-empty {
    grid-column: 1/-1;
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
  }
  .poz-card {
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .2s, transform .15s, box-shadow .2s;
    position: relative;
  }
  .poz-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(168,208,96,0.15); }
  .poz-card-img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
  .poz-gal-thumb { cursor: pointer; border-radius: 6px; overflow: hidden; border: 1.5px solid var(--border); aspect-ratio: 3/4; background: var(--surface2); transition: border-color 0.15s; }
  .poz-gal-thumb:hover { border-color: var(--accent); }
  .poz-card-img-placeholder { width: 100%; aspect-ratio: 3/4; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 36px; }
  .poz-card-body { padding: 10px 12px 12px; }
  .poz-card-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 12px; color: var(--text); margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .poz-card-prompt { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .poz-card-del {
    position: absolute; top: 6px; right: 6px;
    background: rgba(0,0,0,0.7); border: none; color: var(--muted);
    width: 22px; height: 22px; border-radius: 6px; font-size: 12px;
    display: none; align-items: center; justify-content: center; cursor: pointer;
    transition: color .15s;
  }
  .poz-card:hover .poz-card-del { display: flex; }
  .poz-card-del:hover { color: var(--error); }

  /* Poz Add Modal */
  .poz-add-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(6px);
    z-index: 1100;
    display: none; align-items: center; justify-content: center;
  }
  .poz-add-modal.open { display: flex; }
  .poz-add-modal-inner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px;
    width: 380px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  }
  .poz-add-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
  }
  .poz-upload-zone {
    border: 2px dashed var(--border);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    min-height: 100px;
    display: flex; align-items: center; justify-content: center;
  }
  .poz-upload-zone:hover, .poz-upload-zone.drag { border-color: var(--accent); background: var(--accent-glow); }

  /* Poz Use Modal */
  .poz-use-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(6px);
    z-index: 1200;
    display: none; align-items: center; justify-content: center;
  }
  .poz-use-modal.open { display: flex; }
  .poz-use-modal-inner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px;
    width: 340px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  }
  .poz-use-option {
    display: flex; align-items: center; gap: 14px;
    width: 100%; background: var(--surface2);
    border: 1.5px solid var(--border);
    color: var(--text); border-radius: 10px;
    padding: 12px 14px; cursor: pointer; text-align: left;
    transition: border-color .15s, background .15s;
  }
  .poz-use-option:hover { border-color: var(--accent); background: var(--accent-glow); }
  .panel-toggle-left, .panel-toggle-right {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 48px;
    background: rgba(255,255,255,0.08);
    border: none;
    cursor: pointer;
    color: white;
    font-size: 12px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: left 0.3s ease, right 0.3s ease;
  }
  .panel-toggle-left { left: 0; border-radius: 0 8px 8px 0; }
  .panel-toggle-right { right: 0; border-radius: 8px 0 0 8px; }
  .panel-toggle-left:hover, .panel-toggle-right:hover { background: transparent; border: 1.5px solid var(--error); color: var(--error); }
  :root.light .panel-toggle-left, :root.light .panel-toggle-right { background: rgba(0,0,0,0.06); color: #1a1c14; }
  :root.light .panel-toggle-left:hover, :root.light .panel-toggle-right:hover { background: transparent; border: 1.5px solid var(--error); color: var(--error); }

  /* Light mode — generate & action buttons */
  :root.light .gen-btn {
    background: #1a1c14;
    color: #f0f2eb;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  }
  :root.light .gen-btn:hover {
    background: #2e3020;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  }
  :root.light .gen-btn:disabled {
    background: #888;
    color: #ccc;
  }

  /* card tab active */
  :root.light .card-tab.active {
    background: var(--surface);
    color: #1a1c14;
    border-bottom-color: #1a1c14;
    font-weight: 700;
  }

  /* compact toggle btn */
  :root.light .compact-toggle-btn {
    color: var(--muted);
  }
  :root.light .compact-toggle-btn:hover {
    color: #1a1c14;
    background: var(--surface2);
  }

  /* selection chips */
  :root.light .selection-chip.active,
  :root.light .ratio-pill.active,
  :root.light .res-btn.active:not([onclick*="2K"]):not([onclick*="4K"]),
  :root.light .model-tab.active {
    background: #1a1c14;
    border-color: #1a1c14;
    color: #f0f2eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  }
  .panel { position: relative; overflow: hidden; }
  .prompts-panel { position: relative; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }

  .gallery-panel.drop-highlight { outline: 2px dashed var(--accent); outline-offset: -4px; }

  /* card tab dragging out style */
  .card-tab.being-dragged-out { opacity: 0.4; }

  .card-panel {
    display: none !important;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
  }
  .card-panel.active { display: flex !important; }
  .card-panel.compact-active .card-bottom-bar { display: none !important; }
  .card-panel.active.generating-hidden { display: none !important; }
  .mini-gen-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #1a2010; border: none; border-radius: 8px;
    width: 34px; height: 28px; font-size: 12px;
    cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(168,208,96,0.3);
  }
  :root.light .mini-gen-btn {
    background: linear-gradient(135deg, #222, #000);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  }
  .mini-gen-btn:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(168,208,96,0.5); }
  .card-bottom-bar {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    bottom: 0;
    background: var(--surface);
    padding-top: 8px;
    z-index: 5;
  }

  .copy-card-btn {
    width: 100%;
    background: transparent;
    border: 1.5px dashed var(--border);
    border-radius: 10px;
    color: var(--muted);
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: -6px;
  }
  .copy-card-btn:hover { border-color: var(--accent); color: var(--accent); }

  /* Ref image drag-drop reorder */
  .ref-img-item { cursor: grab; touch-action: none; }
  .ref-img-item.dragging { opacity: 0.4; cursor: grabbing; }
  .ref-img-item.drag-over { border-color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }

  /* ===== REFERENCE IMAGE BAR ===== */
  .ref-bar {
    background: var(--surface2);
    border: 1.5px dashed var(--border);
    border-radius: 12px;
    padding: 10px;
    transition: border-color 0.2s;
  }
  .ref-bar.has-images { border-style: solid; border-color: rgba(168,208,96,0.3); }
  .ref-bar.dragover { border-color: var(--accent); background: var(--accent-glow); }

  .ref-bar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }

  .ref-bar-hint {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--muted);
  }

  .ref-upload-btn {
    background: transparent;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    padding: 4px 10px;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s;
  }
  .ref-upload-btn:hover { border-color: var(--accent); color: var(--accent); }

  .ref-images {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }

  .ref-img-item {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    border: 1.5px solid var(--border);
    flex-shrink: 0;
    transition: border-color 0.2s;
  }
  .ref-img-item:hover { border-color: var(--accent); }
  .ref-img-item.active { border-color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }

  .ref-img-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .ref-img-remove {
    position: absolute;
    top: 2px; right: 2px;
    background: rgba(0,0,0,0.7);
    border: none;
    border-radius: 50%;
    width: 16px; height: 16px;
    font-size: 9px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .ref-img-item:hover .ref-img-remove { opacity: 1; }

  .ref-img-uploading {
    width: 52px; height: 52px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .cat-badge {
    position: absolute; top: 1px; left: 1px;
    background: rgba(0,0,0,0.7);
    color: #fff; font-size: 9px;
    padding: 1px 5px; border-radius: 8px;
    cursor: pointer; z-index: 10;
    backdrop-filter: blur(4px);
    white-space: nowrap;
    line-height: 1.3;
    user-select: none;
  }
  .cat-badge:hover { background: rgba(0,0,0,0.9); }
  .cat-badge.loading { font-size: 8px; animation: catPulse 1s infinite; }
  @keyframes catPulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

  .cat-dropdown {
    position: absolute; top: 18px; left: 1px;
    background: rgba(0,0,0,0.88);
    border-radius: 6px; z-index: 20;
    backdrop-filter: blur(8px);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  }
  .cat-dropdown-item {
    padding: 3px 10px; cursor: pointer;
    font-size: 10px; color: #fff;
    white-space: nowrap;
  }
  .cat-dropdown-item:hover { background: rgba(255,255,255,0.12); }
  .cat-dropdown-item.active { color: var(--accent); }

  .ref-spinner {
    width: 16px; height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }

  .ref-add-placeholder {
    width: 52px; height: 52px;
    border-radius: 8px;
    border: 1.5px dashed var(--border);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--border);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
  }
  .ref-add-placeholder:hover { border-color: var(--accent); color: var(--accent); }

  .ref-mode-badge {
    display: none;
    align-items: center;
    gap: 5px;
    background: rgba(168,208,96,0.1);
    border: 1px solid rgba(168,208,96,0.3);
    border-radius: 6px;
    padding: 3px 8px;
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    color: var(--accent);
    margin-top: 6px;
  }
  .ref-mode-badge.visible { display: flex; }

  /* ===== BATCH MODAL ===== */
  .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 24px;
    backdrop-filter: blur(6px);
  }
  .modal-overlay.open { display: flex; }

  .batch-modal {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    width: 100%;
    max-width: 820px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalIn 0.2s ease;
  }
  @keyframes modalIn { from { opacity: 0; transform: scale(0.97) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

  .batch-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
  }

  .batch-modal-title {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .batch-modal-close {
    background: transparent;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 5px 12px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s;
  }
  .batch-modal-close:hover { border-color: var(--error); color: var(--error); }

  .batch-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
  }
  .batch-modal-body::-webkit-scrollbar { width: 3px; }
  .batch-modal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

  /* Batch row */
  .batch-row {
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: start;
    transition: border-color 0.2s;
    position: relative;
  }
  .batch-row.running { border-color: var(--accent); }
  .batch-row.done { border-color: var(--success); }
  .batch-row.error-row { border-color: var(--error); }

  .batch-row-left { display: flex; flex-direction: column; gap: 8px; }

  .batch-row-num {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    color: var(--muted);
    position: absolute;
    top: 10px; left: 12px;
  }

  .batch-prompt-input {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    padding: 8px 10px;
    width: 100%;
    resize: none;
    min-height: 60px;
    outline: none;
    transition: border-color 0.2s;
  }
  .batch-prompt-input:focus { border-color: var(--accent); }

  .batch-row-settings {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
  }

  .batch-ratio-select, .batch-res-select {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    padding: 5px 8px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
  }
  .batch-ratio-select:focus, .batch-res-select:focus { border-color: var(--accent); }

  .batch-row-right {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    min-width: 60px;
  }

  .batch-del-btn {
    background: transparent;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    padding: 5px 9px;
    font-size: 11px;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'DM Mono', monospace;
  }
  .batch-del-btn:hover { border-color: var(--error); color: var(--error); }

  .batch-row-status {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    color: var(--muted);
    text-align: right;
  }
  .batch-row-status.running { color: var(--accent); }
  .batch-row-status.done { color: var(--success); }
  .batch-row-status.error { color: var(--error); }

  .batch-result-thumb {
    width: 52px; height: 52px;
    border-radius: 7px;
    object-fit: cover;
    display: block;
    cursor: pointer;
    border: 1.5px solid var(--success);
    transition: transform 0.2s;
  }
  .batch-result-thumb:hover { transform: scale(1.05); }

  .batch-modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
  }

  .batch-add-btn {
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 9px 16px;
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s;
  }
  .batch-add-btn:hover { border-color: var(--accent); color: var(--accent); }

  .batch-run-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #1a2010;
    border: none;
    border-radius: 10px;
    padding: 10px 24px;
    font-family: 'DM Mono', monospace;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(168,208,96,0.3);
  }
  .batch-run-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(168,208,96,0.4); }
  .batch-run-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

  .batch-summary {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--muted);
  }

  /* Batch open button in header */
  .batch-open-btn {
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: 18px;
    padding: 5px 12px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .batch-open-btn:hover { border-color: var(--accent); color: var(--accent); }
  .panel > * { animation: fadeUp 0.35s ease both; }
  .panel > *:nth-child(1) { animation-delay: 0.04s; }
  .panel > *:nth-child(2) { animation-delay: 0.08s; }
  .panel > *:nth-child(3) { animation-delay: 0.12s; }
  .panel > *:nth-child(4) { animation-delay: 0.16s; }
  .panel > *:nth-child(5) { animation-delay: 0.20s; }
  .panel > *:nth-child(6) { animation-delay: 0.24s; }
  .panel > *:nth-child(7) { animation-delay: 0.28s; }
  .panel > *:nth-child(8) { animation-delay: 0.32s; }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes radioShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-4px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)} }

  /* PASSWORD OVERLAY */
  #pwOverlay {
    position: fixed; inset: 0; z-index: 2147483646;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.4s ease;
  }
  #pwOverlay:not(.hidden) ~ .app,
  #pwOverlay:not(.hidden) ~ header { visibility: hidden; }
  #pwOverlay.hidden { opacity: 0; pointer-events: none; }
  #pwBox {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 48px 40px 40px;
    width: 340px;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    box-shadow: 0 0 60px rgba(168,208,96,0.08);
  }
  #pwLogo { line-height: 1; margin-bottom: 4px; }
  #pwLogo img {
    display: block; width: 110px; height: auto;
    filter: drop-shadow(0 0 10px rgba(168,208,96,0.7)) drop-shadow(0 0 24px rgba(168,208,96,0.4)) drop-shadow(0 0 48px rgba(168,208,96,0.2));
    animation: mascotGlow 2.5s ease-in-out infinite alternate;
  }
  @keyframes mascotGlow {
    from { filter: drop-shadow(0 0 8px rgba(168,208,96,0.6)) drop-shadow(0 0 20px rgba(168,208,96,0.3)); }
    to   { filter: drop-shadow(0 0 16px rgba(168,208,96,0.95)) drop-shadow(0 0 36px rgba(168,208,96,0.55)) drop-shadow(0 0 60px rgba(168,208,96,0.25)); }
  }
  #pwTitle {
    font-family: 'Syne', sans-serif;
    font-size: 22px; font-weight: 700;
    color: var(--text); letter-spacing: 0.5px;
  }
  #pwSub {
    font-size: 12px; color: var(--muted);
    margin-bottom: 8px; text-align: center;
  }
  #pwUser, #pwInput {
    width: 100%; padding: 12px 16px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text); font-size: 14px;
    font-family: 'DM Mono', monospace;
    outline: none; transition: border-color 0.2s;
    box-sizing: border-box;
  }
  #pwUser:focus, #pwInput:focus { border-color: var(--accent); }
  #pwInput.shake {
    animation: pwShake 0.4s ease;
    border-color: var(--error);
  }
  #pwBtn {
    width: 100%; padding: 12px;
    background: #a8d060; color: #1a1f0d;
    border: none; border-radius: 8px;
    font-family: 'Syne', sans-serif;
    font-size: 14px; font-weight: 700;
    cursor: pointer; letter-spacing: 0.5px;
    transition: background 0.2s, transform 0.1s;
    margin-top: 4px;
  }
  #pwBtn:hover { background: #bfe070; }
  #pwBtn:active { transform: scale(0.98); }
  #pwError {
    font-size: 12px; color: var(--error);
    opacity: 0; transition: opacity 0.2s;
    height: 16px;
  }
  #pwError.show { opacity: 1; }
  @keyframes pwShake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
  }

  /* ===== SHORTCUT TOOLTIP ===== */
  #shortcutTooltip {
    position: fixed;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20,22,16,0.97);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 18px 32px;
    font-family: 'DM Mono', monospace;
    font-size: 14px;
    color: var(--text);
    z-index: 9999;
    display: flex;
    gap: 28px;
    align-items: center;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    opacity: 1;
    transition: opacity 0.6s ease;
    pointer-events: none;
    white-space: nowrap;
  }
  #shortcutTooltip.fade { opacity: 0; }
  #shortcutTooltip .st-item { display: flex; align-items: center; gap: 10px; }
  #shortcutTooltip .st-key {
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: 7px;
    padding: 5px 14px;
    font-size: 14px;
    color: var(--shell);
    font-weight: 700;
    letter-spacing: 0.05em;
  }
  #shortcutTooltip .st-label { color: var(--text); font-size: 13px; }

  /* ═══════ MOBILE ═══════ */
  @media (max-width: 768px) {
    header { padding: 6px 12px; min-height: 48px; gap: 8px; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    header::-webkit-scrollbar { display: none; }
    header .logo-group { flex-shrink: 0; gap: 6px; }
    header .logo-group img { width: 36px !important; height: 36px !important; }
    .logo-name { font-size: 12px; }
    .logo-sub { display: none; }
    .credits-badge { padding: 4px 10px; font-size: 10px; flex-shrink: 0; }
    .batch-open-btn { padding: 5px 10px; font-size: 9px; flex-shrink: 0; }

    .app { grid-template-columns: 260px 1fr 0px; height: calc(100vh - 48px); }
    .app.left-hidden { grid-template-columns: 0px 1fr 0px; }
    .app.left-hidden.right-hidden { grid-template-columns: 0px 1fr 0px; }
    .app.right-hidden { grid-template-columns: 260px 1fr 0px; }
    .app.left-hidden:not(.right-hidden) { grid-template-columns: 0px 1fr 260px; }

    .panel-toggle-handle { opacity:1!important; width:22px; height:48px; font-size:16px; -webkit-tap-highlight-color:transparent; background:rgba(255,40,40,0.15); border:1.5px solid rgba(255,40,40,0.5); color:#ff4444; box-shadow:0 0 10px rgba(255,40,40,0.2); transition:all 0.25s; position:fixed!important; top:50%!important; transform:translateY(-50%)!important; z-index:500; }
    .panel-toggle-left { left:0!important; border-radius:0 8px 8px 0!important; border-left:none!important; }
    .panel-toggle-right { right:0!important; left:auto!important; border-radius:8px 0 0 8px!important; border-right:none!important; }
    :root.light .panel-toggle-handle { background:rgba(255,40,40,0.1); border-color:rgba(255,40,40,0.4); color:#cc2222; }

    .panel { padding:12px!important; gap:10px!important; }
    .card-tabs { padding:6px 8px; gap:3px; }
    .card-tab { font-size:11px; min-height:28px; }
    .section-label { font-size:9px; margin-bottom:3px; }
    .model-tabs { gap:4px; }
    .model-tab { padding:8px 4px; font-size:11px; }
    .ratio-pill { padding:6px 10px; }
    .ratio-txt { font-size:10px; }
    .res-btn { padding:8px 4px; font-size:12px; }
    .count-btn { padding:7px 14px; font-size:11px; }
    .status-bar { padding:6px 10px; font-size:10px; }
    .gen-btn { padding:11px; font-size:12px; }
    textarea { min-height:55px; font-size:12px!important; line-height:1.4; }
    .neg-toggle, .neg-area { display:none!important; }
    .shortcut-hint { display:none; }

    .card-name-input { display:none!important; }
    .card-name-row { display:flex!important; justify-content:flex-end; }
    .card-name-row .card-save-btn:not(.mobile-mini-gen) { display:none; }
    /* Mobilde ust beyaz generate butonu fazlaliktir; mini-gen-btn ve alttaki gen-btn kalsin */
    .mobile-mini-gen { display:none!important; }
    /* Galeri ve history kartlarindaki fortune satiri layout sismeyi onlemek icin gizli */
    .gallery-item .fortune-line,
    .history-item .fortune-line { display:none!important; }

    .output-name-section { font-size:9px; margin-bottom:2px; }
    .output-name-section input { font-size:9px!important; padding:3px 6px; height:24px; }
    .output-name-section .section-label { font-size:7px; margin-bottom:1px; }
    .section-label { font-size:8px; }
    textarea { min-height:50px; font-size:11px!important; line-height:1.3; }

    .mobile-actions-bar { display:flex!important; gap:6px; margin-top:6px; }
    .mob-action-btn { flex:1; background:var(--surface2); border:1.5px solid var(--border); border-radius:6px; padding:5px 2px; font-size:14px; color:var(--muted); cursor:pointer; transition:border-color 0.15s; white-space:nowrap; text-align:center; line-height:1; }
    .mob-action-btn:active { border-color:var(--accent); }

    .ref-bar-hint { font-size:9px; }
    .ref-upload-btn { display:none; }
    .ref-img-item, .ref-img-uploading { width:44px; height:44px; }
    .ref-img-item img { width:44px; height:44px; }
    .ref-add-placeholder { width:44px; height:44px; font-size:16px; }
    .ref-mode-badge { font-size:9px; padding:4px 8px; }
    .ref-img-remove { opacity:1; }
    #shortcutTooltip { display:none!important; }
    #shortcutsToggleBtn { display:none!important; }
    .shortcut-hint { display:none!important; }
    #expandPanelBtn { display:none!important; }
    .float-card-mute { display:none!important; }
    .card-name-row:not(.hidden-row) .mobile-mini-gen { display:none!important; }

    /* Sağ panel (hazır promptlar) kompakt */
    .prompts-panel { font-size:11px; }
    .prompts-header { padding:8px 10px 0; }
    .prompts-tab { font-size:10px; padding:6px 4px; }
    .prompts-body { padding:8px; }
    .add-prompt-form { gap:5px; margin-bottom:8px; padding-bottom:8px; }
    .add-prompt-form input { font-size:10px; padding:6px 8px; }
    .add-prompt-form textarea { font-size:10px; min-height:40px; resize:vertical; }
    .add-prompt-btn { padding:6px; font-size:10px; }
    .prompt-item { padding:7px; margin-bottom:5px; border-radius:8px; }
    .prompt-item-title { font-size:10px; margin-bottom:2px; }
    .prompt-item-text { font-size:9px; -webkit-line-clamp:1; margin-bottom:4px; }
    .prompt-item-actions { gap:3px; }
    .prompt-item-actions button { font-size:9px!important; padding:3px 6px!important; }

    .gallery-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important; gap:8px; }
    .gallery-item-ref-btn, .gallery-item-dl-btn { opacity:1; }
    .gallery-item-ref-btn { font-size:8px; padding:3px 6px; top:5px; left:5px; }
    .gallery-item-dl-btn { font-size:10px; padding:3px 6px; top:5px; right:5px; }
    .gallery-item-info { padding:6px 8px; }
    .gallery-item-prompt { font-size:9px; margin-bottom:4px; }
    .download-btn { padding:2px 6px; font-size:9px; }

    .lightbox { padding:0; align-items:center; justify-content:center; }
    .lightbox-content { max-width:100vw; max-height:100vh; }
    .lightbox-content img { max-height:70vh; max-width:calc(100vw - 16px); object-fit:contain; }
    .lightbox-close { position:absolute!important; top:10px!important; right:14px!important; width:44px; height:44px; z-index:10001; }
    .lb-nav { width:44px; height:44px; }
    .lb-nav svg { width:22px; height:22px; }
    .lb-prev { left:6px; }
    .lb-next { right:6px; }
    .lightbox-actions { flex-wrap:wrap; gap:6px; justify-content:center; }
    .lb-btn { padding:7px 12px; font-size:11px; }

    .float-card { width:calc(100vw - 16px); min-width:140px!important; left:8px; max-height:calc(100vh - 60px)!important; }
    .float-resize { position:absolute; z-index:10; }
    .float-resize-n { top:-6px; left:12px; right:40px; height:20px; }
    .float-resize-s { bottom:-6px; left:12px; right:12px; height:20px; }
    .float-resize-e { right:-6px; top:40px; bottom:12px; width:20px; }
    .float-resize-w { left:-6px; top:12px; bottom:12px; width:20px; }
    .float-resize-nw { top:-6px; left:-6px; width:28px; height:28px; }
    .float-resize-ne { display:none!important; }
    .float-resize-sw { bottom:-6px; left:-6px; width:28px; height:28px; }
    .float-resize-se { bottom:-6px; right:-6px; width:28px; height:28px; }

    .poz-panel { padding:8px; }
    .poz-grid { grid-template-columns:repeat(2,1fr); gap:10px; padding:12px; }
    .batch-modal-inner { width:calc(100vw - 16px)!important; max-height:85vh!important; }

    input[type="text"], input[type="password"], select { font-size:16px!important; }
    .output-name-section input[type="text"] { font-size:9px!important; padding:3px 6px!important; height:24px!important; }
    textarea { font-size:12px!important; }

    .gallery-item-ref-btn { display:none; }

    .gallery-panel { -webkit-overflow-scrolling:touch; will-change:scroll-position; }
    .gallery-item { will-change:auto; }

    @media (hover: none) {
      .gen-btn:hover { transform:none; }
      .ratio-pill:hover { border-color:var(--border); transform:none; }
      .ratio-pill:hover .ratio-thumb { background:var(--muted); }
      .ratio-pill.active:hover .ratio-thumb { background:#fff; }
      .res-btn:hover { border-color:var(--border); color:var(--muted); transform:none; }
      .res-btn.active:hover { border-color:var(--accent); color:var(--accent); }
      .count-btn:hover { border-color:var(--border); transform:none; }
      .count-btn.active:hover { border-color:var(--accent); color:var(--accent); }
      .model-tab:hover { border-color:var(--border); color:var(--muted); box-shadow:none; }
      .model-tab.active:hover { border-color:var(--shell); color:var(--shell); }
      .gallery-item:hover { transform:none; box-shadow:none; border-color:var(--border); }
      .history-item:hover { transform:none; border-color:var(--border); }
      .batch-open-btn:hover { border-color:var(--border); color:var(--muted); }
      .save-btn:hover { border-color:var(--border); color:var(--muted); }
      .panel-toggle-handle:hover { background:rgba(255,40,40,0.15); border-color:rgba(255,40,40,0.5); color:#ff4444; box-shadow:0 0 10px rgba(255,40,40,0.2); }
      .prompt-item:hover { border-color:var(--border); }
      .clear-btn:hover { border-color:var(--border); color:var(--muted); }
      .neg-toggle:hover { color:var(--muted); }
      .card-tab:hover { border-color:var(--border); color:var(--muted); }
      .card-tab.active:hover { border-color:var(--accent); color:var(--accent); }
    }
  }

  @media (max-width: 480px) {
    .app { grid-template-columns: 0px 1fr 0px; }
    .app.left-hidden { grid-template-columns: 0px 1fr 0px; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
  }

  /* iPhone SE / very small screens */
  @media (max-width: 320px) {
    .gallery-grid { grid-template-columns: 1fr !important; }
    .float-card { width:calc(100vw - 8px)!important; left:4px!important; }
    #pwBox { padding:16px!important; width:calc(100vw - 32px)!important; }
    .panel-toggle-handle { width:44px!important; height:44px!important; min-width:44px!important; }
    .preset-pack-head { padding:12px!important; }
    .preset-use-btn { padding:8px 12px!important; min-height:44px!important; }
  }

  /* Tablet landscape — 3 columns gallery */
  @media (min-width: 769px) and (max-width: 1024px) {
    .gallery-grid { grid-template-columns: repeat(3, 1fr) !important; }
  }

  /* Telefon yatay mod — shortcuts gizle */
  @media (max-height: 500px) and (orientation: landscape) {
    #shortcutTooltip { display:none!important; }
    #shortcutsToggleBtn { display:none!important; }
    .shortcut-hint { display:none!important; }
  }