/* ============================================================
   TRINUR IMAGE TOOLS — DARK OCEAN DESIGN SYSTEM v2
   ============================================================ */

:root {
    --bg-deep:        #04080f;
    --bg-surface:     #0a1628;
    --bg-card:        rgba(12, 24, 48, 0.65);
    --bg-card-hover:  rgba(18, 36, 64, 0.75);
    --bg-glass:       rgba(15, 28, 55, 0.55);
    --bg-glass-heavy: rgba(10, 22, 46, 0.85);
    --accent-blue:   #60a5fa;
    --accent-indigo: #818cf8;
    --accent-violet: #a78bfa;
    --accent-cyan:   #22d3ee;
    --accent-rose:   #fb7185;
    --accent-amber:  #fbbf24;
    --grad-primary:  linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
    --grad-button:   linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #6366f1 100%);
    --grad-surface:  linear-gradient(180deg, #0a1628 0%, #04080f 100%);
    --text-primary:   #e8edf5;
    --text-secondary: #8899b5;
    --text-muted:     #4d6080;
    --text-accent:    #93bbfc;
    --border-subtle:  rgba(96, 165, 250, 0.08);
    --border-light:   rgba(96, 165, 250, 0.15);
    --border-active:  rgba(96, 165, 250, 0.35);
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.25);
    --shadow-md:  0 4px 20px rgba(0,0,0,0.35);
    --shadow-lg:  0 8px 40px rgba(0,0,0,0.45);
    --shadow-glow: 0 0 30px rgba(96,165,250,0.15);
    --sidebar-w:     380px;
    --topbar-h:      52px;
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px;
    --ease-out: cubic-bezier(0.22,1,0.36,1);
    --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
    --dur-fast: 0.15s; --dur-normal: 0.3s; --dur-slow: 0.5s;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:15px; -webkit-font-smoothing:antialiased; }
body {
    font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    background:var(--bg-deep); color:var(--text-primary);
    overflow:hidden; height:100vh; width:100vw;
}
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(96,165,250,0.2); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:rgba(96,165,250,0.35); }

/* ── App Layout ── */
.app-layout { display:flex; height:100vh; width:100vw; overflow:hidden; position:relative; }

/* ── Sidebar ── */
.sidebar {
    width:var(--sidebar-w); min-width:var(--sidebar-w); height:100vh;
    display:flex; flex-direction:column;
    background:var(--bg-glass-heavy); backdrop-filter:blur(24px) saturate(1.3);
    border-right:1px solid var(--border-subtle);
    position:relative; z-index:30; transition:transform var(--dur-normal) var(--ease-out);
}
.sidebar::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent,rgba(96,165,250,0.3),transparent);
}
.sidebar-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 22px 16px; border-bottom:1px solid var(--border-subtle);
}
.brand { display:flex; align-items:center; gap:12px; }
.brand-icon {
    width:42px; height:42px; display:flex; align-items:center; justify-content:center;
    background:var(--bg-card); border:1px solid var(--border-light);
    border-radius:var(--radius-md); box-shadow:var(--shadow-glow);
}
.brand-name {
    font-size:1.25rem; font-weight:700;
    background:var(--grad-primary); -webkit-background-clip:text;
    -webkit-text-fill-color:transparent; background-clip:text;
    letter-spacing:-0.02em; line-height:1.2;
}
.brand-tag { font-size:0.7rem; color:var(--text-muted); font-weight:500; text-transform:uppercase; letter-spacing:0.1em; }

/* ── Mode Tabs ── */
.mode-tabs {
    display:flex; gap:4px; padding:12px 16px;
    background:rgba(0,0,0,0.15); border-bottom:1px solid var(--border-subtle);
}
.mode-tab {
    flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
    padding:10px 8px; border:none; background:transparent; color:var(--text-muted);
    font-family:inherit; font-size:0.8rem; font-weight:500;
    border-radius:var(--radius-sm); cursor:pointer; transition:all var(--dur-fast) var(--ease-out); user-select:none;
}
.mode-tab:hover { color:var(--text-secondary); background:rgba(96,165,250,0.05); }
.mode-tab.active {
    color:var(--accent-blue); background:rgba(96,165,250,0.1);
    border:1px solid var(--border-active); box-shadow:0 0 12px rgba(96,165,250,0.08);
}

/* ── Sidebar Scroll ── */
.sidebar-scroll { flex:1; overflow-y:auto; padding:16px; }
.controls-panel { display:flex; flex-direction:column; gap:18px; }
.control-group { display:flex; flex-direction:column; gap:8px; }
.control-label {
    display:flex; align-items:center; gap:7px; font-size:0.78rem; font-weight:600;
    color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.06em;
}
.label-hint { font-weight:400; color:var(--text-muted); text-transform:none; letter-spacing:0; font-size:0.75rem; }

/* ── Prompt ── */
.prompt-input {
    width:100%; padding:14px 16px; background:var(--bg-card);
    border:1px solid var(--border-subtle); border-radius:var(--radius-md);
    color:var(--text-primary); font-family:inherit; font-size:0.88rem;
    line-height:1.6; resize:vertical; min-height:100px; transition:all var(--dur-fast) var(--ease-out);
}
.prompt-input::placeholder { color:var(--text-muted); }
.prompt-input:focus { outline:none; border-color:var(--accent-blue); box-shadow:0 0 0 3px rgba(96,165,250,0.1),var(--shadow-glow); }
.char-count { text-align:right; font-size:0.7rem; color:var(--text-muted); font-family:'JetBrains Mono',monospace; }

/* ── Ratio Grid ── */
.ratio-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.ratio-btn {
    display:flex; flex-direction:column; align-items:center; gap:5px;
    padding:10px 4px 8px; background:var(--bg-card); border:1px solid var(--border-subtle);
    border-radius:var(--radius-sm); color:var(--text-muted);
    font-family:'JetBrains Mono',monospace; font-size:0.68rem;
    cursor:pointer; transition:all var(--dur-fast) var(--ease-out);
}
.ratio-btn:hover { border-color:var(--border-light); color:var(--text-secondary); }
.ratio-btn.active { border-color:var(--accent-blue); color:var(--accent-blue); background:rgba(96,165,250,0.08); box-shadow:0 0 10px rgba(96,165,250,0.1); }
.ratio-preview { border:1.5px solid currentColor; border-radius:2px; opacity:0.7; }
.ratio-preview.square { width:18px; height:18px; }
.ratio-preview.landscape { width:21px; height:14px; }
.ratio-preview.portrait { width:14px; height:21px; }
.ratio-preview.widescreen { width:24px; height:13px; }
.ratio-preview.tall { width:13px; height:24px; }

/* ── Upload Zone ── */
.upload-zone {
    border:2px dashed var(--border-light); border-radius:var(--radius-md);
    padding:16px; text-align:center; cursor:pointer; transition:all var(--dur-normal) var(--ease-out);
    min-height:120px; display:flex; flex-direction:column; align-items:center;
    justify-content:center; position:relative; background:rgba(96,165,250,0.02);
}
.upload-zone:hover, .upload-zone.drag-over { border-color:var(--accent-blue); background:rgba(96,165,250,0.06); box-shadow:0 0 20px rgba(96,165,250,0.08); }
.upload-placeholder { display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--text-muted); }
.upload-placeholder p { font-size:0.85rem; }
.upload-link { color:var(--accent-blue); cursor:pointer; font-weight:500; }
.upload-hint { font-size:0.72rem; color:var(--text-muted); opacity:0.7; }
.upload-previews { display:grid; grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); gap:8px; width:100%; }
.upload-preview-item { position:relative; border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:1; border:1px solid var(--border-light); }
.upload-preview-item img { width:100%; height:100%; object-fit:cover; }
.upload-preview-item .remove-btn {
    position:absolute; top:3px; right:3px; width:20px; height:20px;
    background:rgba(0,0,0,0.7); border:none; border-radius:50%; color:#fff;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    font-size:12px; opacity:0; transition:opacity var(--dur-fast);
}
.upload-preview-item:hover .remove-btn { opacity:1; }
.upload-preview-item .upload-label {
    position:absolute; bottom:0; left:0; right:0; padding:2px 0;
    background:rgba(0,0,0,0.6); color:var(--accent-cyan); font-size:0.6rem;
    font-family:'JetBrains Mono',monospace; text-align:center; font-weight:500;
}
.upload-progress-bar { position:absolute; bottom:0; left:0; height:3px; background:var(--grad-primary); border-radius:2px; transition:width 0.3s ease; }

/* ── Generate Button ── */
.sidebar-footer { padding:16px; border-top:1px solid var(--border-subtle); }
.btn-generate {
    width:100%; padding:14px 20px; background:var(--grad-button); background-size:200% 200%;
    border:none; border-radius:var(--radius-md); color:#fff; font-family:inherit;
    font-size:0.95rem; font-weight:600; cursor:pointer; position:relative; overflow:hidden;
    transition:all var(--dur-normal) var(--ease-out); box-shadow:0 4px 20px rgba(96,165,250,0.25);
}
.btn-generate:hover:not(:disabled) { background-position:100% 100%; box-shadow:0 6px 30px rgba(96,165,250,0.35); transform:translateY(-1px); }
.btn-generate:active:not(:disabled) { transform:translateY(0); }
.btn-generate:disabled { opacity:0.4; cursor:not-allowed; box-shadow:none; }
.btn-generate::after {
    content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
    background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.08) 50%,transparent 70%);
    transform:rotate(45deg) translateX(-100%); transition:transform 0.6s;
}
.btn-generate:hover::after { transform:rotate(45deg) translateX(100%); }
.btn-content, .btn-loading { display:flex; align-items:center; justify-content:center; gap:8px; }
.spinner { width:18px; height:18px; border:2px solid rgba(255,255,255,0.2); border-top-color:#fff; border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Main Canvas ── */
.canvas {
    flex:1; height:100vh; overflow:hidden; display:flex; flex-direction:column;
    background:var(--grad-surface); position:relative;
}
.canvas::before {
    content:''; position:fixed; top:-200px; right:-200px; width:600px; height:600px;
    background:radial-gradient(circle,rgba(96,165,250,0.04) 0%,transparent 70%); pointer-events:none; z-index:0;
}

/* ── Canvas Top Bar ── */
.canvas-topbar {
    display:flex; align-items:center; justify-content:center;
    padding:8px 24px; min-height:var(--topbar-h);
    background:rgba(10,22,46,0.6); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border-subtle); position:relative; z-index:2;
}
.view-tabs { display:flex; gap:4px; background:var(--bg-card); border-radius:var(--radius-md); padding:3px; border:1px solid var(--border-subtle); }
.view-tab {
    display:flex; align-items:center; gap:6px; padding:8px 18px;
    border:none; background:transparent; color:var(--text-muted);
    font-family:inherit; font-size:0.82rem; font-weight:500;
    border-radius:var(--radius-sm); cursor:pointer; transition:all var(--dur-fast); position:relative;
}
.view-tab:hover { color:var(--text-secondary); }
.view-tab.active { color:var(--text-primary); background:rgba(96,165,250,0.12); }
.history-badge {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:18px; height:18px; padding:0 5px; background:var(--accent-blue);
    border-radius:9px; font-size:0.6rem; font-weight:700; color:#fff;
    font-family:'JetBrains Mono',monospace;
}

/* ── Canvas Views ── */
.canvas-view { flex:1; overflow-y:auto; overflow-x:hidden; position:relative; z-index:1; }

/* ── Empty State ── */
.empty-state { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; z-index:1; }
.empty-icon { margin-bottom:20px; opacity:0.5; animation:float 6s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.empty-state h2 { font-size:1.6rem; font-weight:700; margin-bottom:8px; letter-spacing:-0.02em; }
.empty-state p { font-size:0.9rem; color:var(--text-muted); max-width:360px; line-height:1.6; }

/* ── Gallery ── */
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; padding:24px; position:relative; z-index:1; }
.gallery-item {
    position:relative; border-radius:var(--radius-lg); overflow:hidden;
    background:var(--bg-card); border:1px solid var(--border-subtle);
    cursor:pointer; transition:all var(--dur-normal) var(--ease-out);
    animation:fadeInUp 0.5s var(--ease-out) both;
}
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} }
.gallery-item:hover { border-color:var(--border-active); box-shadow:var(--shadow-lg),var(--shadow-glow); transform:translateY(-4px); }
.gallery-item img, .gallery-item video { width:100%; height:auto; display:block; }
.gallery-item video { background:#000; }
.gallery-item .gallery-overlay {
    position:absolute; bottom:0; left:0; right:0; padding:12px 14px;
    background:linear-gradient(transparent,rgba(0,0,0,0.75)); display:flex;
    align-items:center; justify-content:space-between; opacity:0; transform:translateY(10px);
    transition:all var(--dur-normal) var(--ease-out);
}
.gallery-item:hover .gallery-overlay { opacity:1; transform:translateY(0); }
.gallery-overlay-info { font-size:0.72rem; color:rgba(255,255,255,0.7); font-family:'JetBrains Mono',monospace; }
.gallery-download-btn {
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.12); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.15); border-radius:50%; color:#fff;
    cursor:pointer; transition:all var(--dur-fast);
}
.gallery-download-btn:hover { background:rgba(96,165,250,0.4); border-color:var(--accent-blue); }

/* ── Gallery Skeleton ── */
.gallery-skeleton {
    aspect-ratio:1; border-radius:var(--radius-lg); background:var(--bg-card);
    border:1px solid var(--border-subtle); position:relative; overflow:hidden;
    animation:fadeInUp 0.4s var(--ease-out) both;
}
.gallery-skeleton::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg,transparent 0%,rgba(96,165,250,0.06) 50%,transparent 100%);
    animation:shimmer 1.8s ease-in-out infinite;
}
@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
.gallery-skeleton-content { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:12px; color:var(--text-muted); }
.gallery-skeleton-content .skeleton-spinner { width:28px; height:28px; border:2px solid var(--border-light); border-top-color:var(--accent-blue); border-radius:50%; animation:spin 1s linear infinite; }
.gallery-skeleton-content span { font-size:0.75rem; font-weight:500; }
.gallery-skeleton-content .skeleton-state { font-size:0.65rem; color:var(--text-muted); font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:0.05em; }
.gallery-skeleton.failed { border-color:rgba(251,113,133,0.3); }
.gallery-skeleton.failed::after { display:none; }
.gallery-skeleton.failed .skeleton-spinner { display:none; }
.gallery-skeleton.failed .gallery-skeleton-content { color:var(--accent-rose); }

/* ── History ── */
.history-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 24px; border-bottom:1px solid var(--border-subtle);
    background:rgba(10,22,46,0.4); position:sticky; top:0; z-index:2;
    backdrop-filter:blur(12px);
}
.history-tabs { display:flex; gap:4px; }
.history-tab {
    display:flex; align-items:center; gap:6px; padding:8px 16px;
    border:1px solid var(--border-subtle); background:var(--bg-card);
    color:var(--text-muted); font-family:inherit; font-size:0.8rem; font-weight:500;
    border-radius:var(--radius-sm); cursor:pointer; transition:all var(--dur-fast);
}
.history-tab:hover { border-color:var(--border-light); color:var(--text-secondary); }
.history-tab.active { border-color:var(--accent-blue); color:var(--accent-blue); background:rgba(96,165,250,0.08); }
.hist-count {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:20px; height:18px; padding:0 5px; font-size:0.65rem;
    border-radius:9px; font-family:'JetBrains Mono',monospace; font-weight:600;
    background:rgba(96,165,250,0.15); color:var(--accent-blue);
}
.history-tab.active .hist-count { background:var(--accent-blue); color:#fff; }
.btn-clear-history {
    display:flex; align-items:center; gap:6px; padding:7px 14px;
    background:transparent; border:1px solid rgba(251,113,133,0.2);
    border-radius:var(--radius-sm); color:var(--accent-rose); font-family:inherit;
    font-size:0.75rem; font-weight:500; cursor:pointer; transition:all var(--dur-fast);
}
.btn-clear-history:hover { background:rgba(251,113,133,0.08); border-color:rgba(251,113,133,0.4); }
.history-content { padding:24px; }
.history-empty {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:60px 20px; text-align:center; color:var(--text-muted); gap:8px;
}
.history-empty p { font-size:0.95rem; font-weight:500; }
.history-empty span { font-size:0.78rem; opacity:0.6; }

/* History Entry */
.history-entry {
    background:var(--bg-card); border:1px solid var(--border-subtle);
    border-radius:var(--radius-lg); margin-bottom:16px; overflow:hidden;
    transition:all var(--dur-fast); animation:fadeInUp 0.4s var(--ease-out) both;
}
.history-entry:hover { border-color:var(--border-light); }
.history-entry-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; border-bottom:1px solid var(--border-subtle);
}
.history-entry-meta { display:flex; flex-direction:column; gap:2px; }
.history-entry-time {
    font-size:0.72rem; color:var(--text-muted); font-family:'JetBrains Mono',monospace;
}
.history-entry-prompt {
    font-size:0.82rem; color:var(--text-secondary); max-width:500px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.history-entry-badge {
    padding:4px 10px; border-radius:var(--radius-sm); font-size:0.68rem;
    font-weight:600; text-transform:uppercase; letter-spacing:0.05em;
}
.history-entry-badge.t2i { background:rgba(96,165,250,0.12); color:var(--accent-blue); }
.history-entry-badge.i2i { background:rgba(167,139,250,0.12); color:var(--accent-violet); }
.history-entry-badge.i2v { background:rgba(251,191,36,0.12); color:var(--accent-amber); }
.history-entry-images {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; padding:12px;
}
.history-thumb {
    border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:1;
    cursor:pointer; transition:all var(--dur-fast); border:1px solid transparent;
}
.history-thumb:hover { border-color:var(--accent-blue); transform:scale(1.03); box-shadow:var(--shadow-glow); }
.history-thumb img, .history-thumb video { width:100%; height:100%; object-fit:cover; display:block; }
.history-thumb video { background:#000; }

/* ── Status Bar ── */
.status-bar {
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
    min-width:300px; max-width:500px; background:var(--bg-glass-heavy);
    backdrop-filter:blur(20px); border:1px solid var(--border-light);
    border-radius:var(--radius-lg); padding:14px 20px; z-index:50;
    box-shadow:var(--shadow-lg); animation:slideUp 0.4s var(--ease-out);
}
@keyframes slideUp { from{opacity:0;transform:translate(-50%,20px)} to{opacity:1;transform:translate(-50%,0)} }
.status-content { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.status-spinner { width:16px; height:16px; border:2px solid var(--border-light); border-top-color:var(--accent-blue); border-radius:50%; animation:spin 0.8s linear infinite; }
#statusText { font-size:0.82rem; font-weight:500; color:var(--text-secondary); }
.status-progress { height:3px; background:rgba(96,165,250,0.1); border-radius:2px; overflow:hidden; }
.status-progress-bar { height:100%; width:0%; background:var(--grad-primary); border-radius:2px; transition:width 0.5s var(--ease-out); }

/* ── Modals ── */
.modal-overlay {
    position:fixed; inset:0; background:rgba(4,8,15,0.85); backdrop-filter:blur(12px);
    display:flex; align-items:center; justify-content:center; z-index:100; animation:fadeIn 0.3s var(--ease-out);
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal-card {
    width:420px; max-width:90vw; background:var(--bg-glass-heavy);
    border:1px solid var(--border-light); border-radius:var(--radius-xl);
    padding:36px 32px; text-align:center; box-shadow:var(--shadow-lg); animation:scaleIn 0.4s var(--ease-spring);
}
@keyframes scaleIn { from{opacity:0;transform:scale(0.92)} to{opacity:1;transform:scale(1)} }
.modal-icon {
    width:72px; height:72px; margin:0 auto 20px; display:flex; align-items:center;
    justify-content:center; background:rgba(96,165,250,0.08);
    border:1px solid var(--border-light); border-radius:50%; color:var(--accent-blue);
}
.modal-card h2 { font-size:1.35rem; font-weight:700; margin-bottom:8px; letter-spacing:-0.02em; }
.modal-desc { font-size:0.85rem; color:var(--text-muted); line-height:1.6; margin-bottom:24px; }
.input-group { position:relative; margin-bottom:16px; }
.input-group input {
    width:100%; padding:14px 44px 14px 16px; background:var(--bg-card);
    border:1px solid var(--border-subtle); border-radius:var(--radius-md);
    color:var(--text-primary); font-family:'JetBrains Mono',monospace; font-size:0.85rem;
    transition:all var(--dur-fast);
}
.input-group input:focus { outline:none; border-color:var(--accent-blue); box-shadow:0 0 0 3px rgba(96,165,250,0.1); }
.input-group input::placeholder { color:var(--text-muted); }
.input-group .icon-btn { position:absolute; right:8px; top:50%; transform:translateY(-50%); }
.icon-btn {
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    border-radius:var(--radius-sm); color:var(--text-secondary); background:transparent;
    transition:all var(--dur-fast); cursor:pointer; flex-shrink:0; border:1px solid transparent;
}
.icon-btn:hover { background:var(--bg-card); color:var(--text-primary); border-color:var(--border-light); transform:rotate(8deg); }

.credit-badge {
    display:flex; align-items:center; gap:6px;
    padding:4px 10px; background:rgba(251,191,36,0.1);
    border:1px solid rgba(251,191,36,0.2);
    border-radius:12px; color:var(--accent-amber);
    font-family:'JetBrains Mono',monospace; font-size:0.75rem; font-weight:600;
}
.btn-primary {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:13px 24px; background:var(--grad-button); border:none;
    border-radius:var(--radius-md); color:#fff; font-family:inherit;
    font-size:0.9rem; font-weight:600; cursor:pointer;
    transition:all var(--dur-normal) var(--ease-out); box-shadow:0 4px 16px rgba(96,165,250,0.3);
}
.btn-primary:hover { box-shadow:0 6px 24px rgba(96,165,250,0.4); transform:translateY(-1px); }
.btn-full { width:100%; }
.modal-link { display:inline-block; margin-top:16px; color:var(--text-accent); text-decoration:none; font-size:0.82rem; font-weight:500; transition:color var(--dur-fast); }
.modal-link:hover { color:var(--accent-blue); }

/* ── Preview Modal ── */
.preview-container { position:relative; max-width:90vw; max-height:90vh; animation:scaleIn 0.35s var(--ease-spring); }
.preview-container img { max-width:90vw; max-height:88vh; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); object-fit:contain; }
.preview-close, .preview-download {
    position:absolute; top:12px; width:40px; height:40px; display:flex; align-items:center;
    justify-content:center; background:rgba(0,0,0,0.6); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.12); border-radius:50%; color:#fff;
    cursor:pointer; transition:all var(--dur-fast); z-index:2;
}
.preview-close { right:12px; }
.preview-download { right:62px; }
.preview-close:hover, .preview-download:hover { background:rgba(96,165,250,0.4); border-color:var(--accent-blue); }

/* ── Toast ── */
.toast-container { position:fixed; top:20px; right:20px; z-index:200; display:flex; flex-direction:column; gap:8px; }
.toast {
    min-width:260px; max-width:360px; padding:12px 16px; background:var(--bg-glass-heavy); backdrop-filter:blur(16px);
    border:1px solid var(--border-light); border-radius:var(--radius-md); color:var(--text-primary);
    font-size:0.82rem; display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-lg);
    animation:slideInRight 0.4s var(--ease-spring); word-break:break-word;
}
@keyframes slideInRight { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
.toast.success { border-left:3px solid var(--accent-cyan); }
.toast.error { border-left:3px solid var(--accent-rose); }
.toast.info { border-left:3px solid var(--accent-blue); }
.toast.warning { border-left:3px solid var(--accent-amber); }
.toast-exit { animation:slideOutRight 0.3s var(--ease-out) forwards; }
@keyframes slideOutRight { to{opacity:0;transform:translateX(40px)} }

/* ── Mobile Toggle ── */
.mobile-toggle {
    display:none; position:fixed; top:10px; left:10px; z-index:40;
    width:40px; height:40px; align-items:center; justify-content:center;
    background:var(--bg-glass-heavy); backdrop-filter:blur(12px);
    border:1px solid var(--border-light); border-radius:var(--radius-sm);
    color:var(--text-primary); cursor:pointer; box-shadow:var(--shadow-md);
}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */

/* ── Tablet (769–1200) ── */
@media (min-width:769px) and (max-width:1200px) {
    :root { --sidebar-w:320px; }
    .gallery { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
    .history-entry-images { grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); }
}

/* ── Desktop Large ── */
@media (min-width:1600px) {
    .gallery { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
    .history-entry-images { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
}

/* ── Mobile (≤768) ── */
@media (max-width:768px) {
    .sidebar {
        position:fixed; top:0; left:0; width:100vw; min-width:100vw; max-width:100vw;
        transform:translateX(-100%); z-index:50;
    }
    .sidebar.open { transform:translateX(0); }
    .mobile-toggle { display:flex; }
    .canvas-topbar { padding:8px 16px; padding-left:56px; justify-content:flex-start; }
    .gallery { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; padding:16px; }
    .history-header { flex-direction:column; gap:10px; padding:12px 16px; align-items:stretch; }
    .history-tabs { width:100%; }
    .history-tab { flex:1; justify-content:center; font-size:0.73rem; padding:7px 10px; }
    .btn-clear-history { align-self:flex-end; }
    .history-content { padding:16px; }
    .history-entry-images { grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:6px; padding:8px; }
    .history-entry-header { padding:10px 14px; flex-direction:column; gap:8px; align-items:flex-start; }
    .history-entry-prompt { max-width:100%; }
    .status-bar { left:16px; right:16px; transform:none; min-width:auto; bottom:16px; }
    @keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
    .toast-container { top:auto; bottom:20px; right:10px; left:10px; }
    .toast { min-width:auto; width:100%; }
    .modal-card { padding:28px 20px; }
    .view-tab { padding:7px 14px; font-size:0.78rem; }
}

/* ── Small mobile (≤420) ── */
@media (max-width:420px) {
    .gallery { grid-template-columns:repeat(2,1fr); gap:8px; padding:12px; }
    .ratio-grid { grid-template-columns:repeat(5,1fr); gap:4px; }
    .ratio-btn { padding:8px 2px 6px; }
    .history-entry-images { grid-template-columns:repeat(3,1fr); }
}