/* ========================================
   serl.ink — Design System
   ======================================== */

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --space-xs: 0.25rem; --space-sm: 0.5rem;
  --space-md: 1rem; --space-lg: 1.5rem;
  --space-xl: 2rem; --space-2xl: 3rem;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --bg-primary: #0a0a0b; --bg-secondary: #111113;
  --bg-tertiary: #18181b; --bg-elevated: #1e1e22;
  --bg-hover: #252529; --border: #27272a;
  --border-focus: #3f3f46; --text-primary: #fafafa;
  --text-secondary: #a1a1aa; --text-muted: #71717a;
  --accent: #3b82f6; --accent-hover: #2563eb;
  --accent-muted: rgba(59,130,246,0.15); --danger: #ef4444;
  --danger-hover: #dc2626; --success: #22c55e;
  --warn: #eab308; --code-bg: #0d0d0f;
}

[data-theme="light"] {
  --bg-primary: #f5f5f0; --bg-secondary: #eaeae5;
  --bg-tertiary: #e0e0db; --bg-elevated: #ffffff;
  --bg-hover: #d9d9d4; --border: #c8c8c3;
  --border-focus: #a0a09b; --text-primary: #1a1a18;
  --text-secondary: #4a4a45; --text-muted: #6b6b66;
  --accent: #2563eb; --accent-hover: #1d4ed8;
  --accent-muted: rgba(37,99,235,0.1); --danger: #dc3545;
  --danger-hover: #c82333; --success: #28a745;
  --warn: #d4a017; --code-bg: #ffffff;
}

[data-theme="dark"] .icon-sun{display:inline}[data-theme="dark"] .icon-moon{display:none}
[data-theme="light"] .icon-sun{display:none}[data-theme="light"] .icon-moon{display:inline}
[data-theme="light"] .code-block code{color:#1a1a18}
[data-theme="light"] .ql-editor{background:var(--code-bg)!important;color:var(--text-primary)!important}
[data-theme="light"] .ql-toolbar.ql-snow{background:var(--bg-secondary)}
[data-theme="light"] .ql-toolbar.ql-snow .ql-stroke{stroke:var(--text-secondary)}
[data-theme="light"] .ql-toolbar.ql-snow .ql-fill{fill:var(--text-secondary)}
[data-theme="light"] .ql-toolbar.ql-snow .ql-picker{color:var(--text-secondary)}

/* ========================================
   Reset & Base
   ======================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-left) env(safe-area-inset-bottom) env(safe-area-inset-right)}
a{color:var(--accent);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--accent-hover)}
.container{max-width:900px;margin:0 auto;padding:0 var(--space-lg);width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
main{animation:fadeIn 200ms ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
::selection{background:var(--accent-muted);color:var(--text-primary)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.text-muted{color:var(--text-muted)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg-secondary)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--border-focus)}

/* ========================================
   Navbar
   ======================================== */
.navbar{border-bottom:1px solid var(--border);background:var(--bg-secondary);position:sticky;top:0;z-index:100;backdrop-filter:blur(12px)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:56px}
.logo{display:flex;align-items:center;gap:var(--space-sm);font-weight:700;font-size:1.1rem;color:var(--text-primary)}
.logo:hover{color:var(--text-primary)}
.logo-icon{color:var(--accent);font-size:1.2rem}
.nav-links{display:flex;align-items:center;gap:var(--space-xs)}
.nav-links a{padding:6px 14px;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.875rem;font-weight:500;transition:all var(--transition);min-height:36px;display:flex;align-items:center}
.nav-links a:hover,.nav-links a.active{color:var(--text-primary);background:var(--bg-hover)}
.nav-cta{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}
.nav-cta:hover{background:var(--accent-hover)!important;color:#fff!important}
.nav-user{opacity:.8}.nav-user:hover{opacity:1}
.mobile-menu{display:none;background:none;border:none;color:var(--text-primary);font-size:1.5rem;cursor:pointer;padding:8px;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.theme-toggle{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 12px;cursor:pointer;font-size:1rem;line-height:1;transition:all var(--transition);color:var(--text-secondary);min-height:36px;display:flex;align-items:center;justify-content:center}
.theme-toggle:hover{border-color:var(--border-focus);color:var(--text-primary)}

/* ========================================
   Footer
   ======================================== */
.footer{margin-top:auto;border-top:1px solid var(--border);padding:var(--space-md) 0;padding-bottom:max(var(--space-md),env(safe-area-inset-bottom))}
.footer-inner{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--text-muted);flex-wrap:wrap;gap:var(--space-sm)}
.footer-links{display:flex;gap:var(--space-md);flex-wrap:wrap}
.footer-links a{color:var(--text-muted)}
.footer-links a:hover{color:var(--text-primary)}

/* ========================================
   Hero & Page Header
   ======================================== */
.hero{text-align:center;padding:var(--space-2xl) 0 var(--space-xl)}
.hero h1{font-size:2.2rem;font-weight:700;letter-spacing:-0.03em;margin-bottom:var(--space-sm)}
.page-header{padding:var(--space-xl) 0 var(--space-lg)}
.page-header h1{font-size:1.8rem;font-weight:700;letter-spacing:-0.03em}
.subtitle{color:var(--text-secondary);font-size:1rem}

/* ========================================
   Buttons
   ======================================== */
.btn{display:inline-flex;align-items:center;gap:var(--space-xs);padding:10px var(--space-md);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-secondary);color:var(--text-primary);font-family:var(--font-sans);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition);text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.btn-secondary{background:transparent}
.btn-danger{color:var(--danger);border-color:var(--danger)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-full{width:100%;justify-content:center;padding:14px;font-size:1rem}
.btn-sm{padding:8px 14px;font-size:.8rem;min-height:36px}
.btn-shortcut{opacity:.5;font-size:.75rem}

/* ========================================
   Form Elements
   ======================================== */
.paste-form{display:flex;flex-direction:column;gap:var(--space-md)}
.form-header{display:flex;flex-direction:column;gap:var(--space-sm)}
.form-actions-row{display:flex;gap:var(--space-sm)}
.form-options{display:flex;flex-direction:column;gap:var(--space-lg);padding:var(--space-lg);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md)}
.opt-row{display:flex;gap:var(--space-xl)}
.opt-row .option-group{flex:1;min-width:0}
.option-group{display:flex;flex-direction:column;gap:var(--space-xs)}
.option-label{font-size:.8rem;font-weight:500;color:var(--text-secondary)}
.option-hint{font-size:.75rem;color:var(--text-muted);margin-top:var(--space-xs);display:block;line-height:1.4}
.title-input{width:100%;padding:var(--space-md);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-sans);font-size:1rem;font-weight:600;transition:border-color var(--transition)}
.title-input:focus{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.title-input::placeholder{color:var(--text-muted);font-weight:400}
.select-input{padding:10px var(--space-md);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-sans);font-size:.875rem;cursor:pointer;transition:border-color var(--transition);flex:1}
.select-input:focus{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.text-input{padding:10px var(--space-md);background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-sans);font-size:.875rem;transition:border-color var(--transition);outline:none}
.text-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}
.text-input::placeholder{color:var(--text-muted)}
.radio-group{display:flex;gap:var(--space-md)}
.radio-label{display:flex;align-items:center;gap:6px;font-size:.875rem;color:var(--text-secondary);cursor:pointer}

/* Quill Dark Theme */
.ql-toolbar.ql-snow{border-color:var(--border)!important;background:var(--bg-secondary);border-radius:var(--radius-md) var(--radius-md) 0 0;padding:8px!important}
.ql-toolbar.ql-snow .ql-stroke{stroke:var(--text-secondary)}
.ql-toolbar.ql-snow .ql-fill{fill:var(--text-secondary)}
.ql-toolbar.ql-snow .ql-picker{color:var(--text-secondary)}
.ql-toolbar.ql-snow .ql-picker-options{background:var(--bg-secondary);border-color:var(--border)}
.ql-toolbar.ql-snow button:hover .ql-stroke,.ql-toolbar.ql-snow .ql-picker-label:hover{stroke:var(--accent);color:var(--accent)}
.ql-toolbar.ql-snow .ql-active .ql-stroke{stroke:var(--accent)}
.ql-toolbar.ql-snow .ql-active .ql-fill{fill:var(--accent)}
.ql-container.ql-snow{border-color:var(--border)!important;border-top:1px solid var(--border)!important;border-radius:0 0 var(--radius-md) var(--radius-md)}
.ql-editor{background:var(--code-bg)!important;color:var(--text-primary)!important;font-family:var(--font-sans);font-size:.875rem;line-height:1.7;min-height:300px}
.ql-snow .ql-editor.ql-blank::before{color:var(--text-muted)!important;font-style:normal!important;opacity:1!important}
.ql-editor a{color:var(--accent)}
.ql-editor pre.ql-syntax{background:var(--bg-primary);color:var(--text-primary);border-radius:var(--radius-sm);font-family:var(--font-mono)}
.ql-editor blockquote{border-left:3px solid var(--accent);color:var(--text-secondary)}
#quillEditor{border-radius:var(--radius-md);overflow:hidden}

/* Remove old editor styles */
.editor-toolbar,.et-btn,.et-sep,.et-preview-btn,.live-preview{display:none}

/* Editor */
.editor-wrap{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:border-color var(--transition)}
.editor-wrap:focus-within{border-color:var(--accent)}
.editor{width:100%;min-height:400px;padding:var(--space-md);background:var(--code-bg);border:none;color:var(--text-primary);font-family:var(--font-mono);font-size:.875rem;line-height:1.7;resize:vertical;tab-size:4}
.editor:focus{outline:2px solid var(--accent);outline-offset:-2px}
.editor::placeholder{color:var(--text-muted)}
.editor-footer{display:flex;justify-content:flex-end;padding:var(--space-xs) var(--space-md);background:var(--bg-secondary);border-top:1px solid var(--border)}
.char-count{font-size:.75rem;color:var(--text-muted);font-family:var(--font-mono)}

/* ========================================
   Cards & Lists
   ======================================== */
.card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-xl);margin-bottom:var(--space-lg)}
.card-title{font-size:1.1rem;font-weight:600;margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:1px solid var(--border)}
.dashboard-grid{display:flex;flex-direction:column;gap:var(--space-md);padding-bottom:var(--space-2xl)}

/* Paste List */
.paste-list,.paste-list-mini{display:flex;flex-direction:column;gap:var(--space-sm)}
.paste-card{display:block;padding:var(--space-md) var(--space-lg);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);transition:all var(--transition);text-decoration:none}
.paste-card:hover{border-color:var(--accent);background:var(--bg-elevated);transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.3)}
.paste-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-xs)}
.paste-card-title{font-size:1rem;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.paste-card-meta{display:flex;flex-wrap:wrap;gap:var(--space-md);font-size:.75rem;color:var(--text-muted)}
.meta-item{display:flex;align-items:center;gap:4px;font-size:.8rem;color:var(--text-muted)}
.meta-icon{font-size:.7rem}.meta-warn{color:var(--warn)}

/* Dashboard paste cards */
.dash-paste-card{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);transition:border-color var(--transition)}
.dash-paste-card:hover{border-color:var(--accent)}
.dash-paste-link{flex:1;min-width:0;text-decoration:none}
.dash-paste-link .paste-card-header,.dash-paste-link .paste-card-meta{pointer-events:none}
.dash-paste-actions{display:flex;gap:var(--space-xs);flex-shrink:0}

/* Paste chart sparkline */
.paste-chart{display:flex;align-items:flex-end;gap:2px;height:28px;flex-shrink:0;padding:0 4px;margin:0 var(--space-sm)}
.paste-chart-bar{display:block;width:4px;border-radius:1px;background:var(--accent);opacity:.5;transition:opacity .15s ease}
.paste-chart:hover .paste-chart-bar{opacity:.8}
.dash-check{display:flex;align-items:center;padding-right:var(--space-sm);flex-shrink:0}
.dash-cb{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}

/* Dashboard analytics */
.ana-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-sm);margin-bottom:var(--space-md)}
.ana-card{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-md);display:flex;align-items:center;gap:var(--space-md)}
.ana-card .ana-icon{font-size:1.4rem;color:var(--accent);opacity:.6;flex-shrink:0}
.ana-card .ana-body{display:flex;flex-direction:column}
.ana-card .ana-val{font-size:1.3rem;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1.2}
.ana-card .ana-lbl{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}
.ana-highlight{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--bg-tertiary);border-left:3px solid var(--accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin-bottom:var(--space-md);font-size:.8rem}
.ana-highlight-icon{font-size:1rem;flex-shrink:0}
.ana-highlight-label{color:var(--text-muted);margin-right:var(--space-xs)}
.ana-highlight-link{color:var(--accent);font-weight:600}
.ana-highlight-views{color:var(--text-muted)}

/* Dashboard toolbar */
.dash-toolbar{display:flex;gap:var(--space-md);align-items:center;margin-bottom:var(--space-md);flex-wrap:wrap}
.dash-sort{display:flex;flex-shrink:0}
.seg-btn{padding:6px 16px;border:1px solid var(--border);background:var(--bg-tertiary);color:var(--text-secondary);font-family:var(--font-sans);font-size:.8rem;font-weight:500;cursor:pointer;transition:all var(--transition);text-decoration:none;white-space:nowrap}
.seg-btn:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.seg-btn:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.seg-btn+.seg-btn{margin-left:-1px}
.seg-btn:hover{color:var(--text-primary);background:var(--bg-hover)}
.seg-active,.seg-btn.seg-active{background:var(--accent);border-color:var(--accent);color:#fff}
.seg-active:hover,.seg-btn.seg-active:hover{background:var(--accent-hover);color:#fff}
.dash-bulk-bar{display:none;align-items:center;justify-content:space-between;margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--accent-muted);border:1px solid var(--accent);border-radius:var(--radius-sm);font-size:.85rem;color:var(--accent)}

/* Ad items */
.ad-info{display:flex;flex-direction:column;gap:var(--space-lg)}
.ad-hint{font-size:.8rem;color:var(--text-muted);line-height:1.6;padding:var(--space-md);background:var(--bg-tertiary);border-radius:var(--radius-sm);margin-bottom:var(--space-md)}
.ad-stats,.ad-stats-row{display:flex;gap:var(--space-xl)}
.ad-list{display:flex;flex-direction:column;gap:var(--space-sm)}
.ad-item{display:flex;flex-direction:column;gap:var(--space-xs);padding:var(--space-md);background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm)}
.ad-url{font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-url a{color:var(--accent)}
.ad-meta{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center;font-size:.75rem;color:var(--text-muted)}
.ad-time{font-size:.7rem}
.ad-actions{display:flex;gap:var(--space-xs);margin-top:var(--space-xs)}
.ad-form{display:flex;flex-direction:column;gap:var(--space-md);padding:var(--space-md);background:var(--bg-tertiary);border-radius:var(--radius-sm)}
.ad-stat-item{display:flex;align-items:baseline;gap:6px}
.ad-stat-num{font-size:1.1rem;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.ad-stat-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}

/* Stat cards */
.stat{display:flex;flex-direction:column;align-items:center;gap:4px}
.stat-value{font-size:2rem;font-weight:700;color:var(--accent);line-height:1}
.stat-label{font-size:.75rem;color:var(--text-muted);text-align:center}

/* ========================================
   Paste View
   ======================================== */
.paste-view{padding:var(--space-xl) 0}
.paste-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-md);margin-bottom:var(--space-lg);flex-wrap:wrap}
.paste-title{font-size:1.5rem;font-weight:700;letter-spacing:-0.02em;overflow-wrap:break-word;hyphens:auto}
.paste-meta{display:flex;flex-wrap:wrap;gap:var(--space-md);margin-top:var(--space-sm)}
.paste-actions{display:flex;gap:var(--space-xs);flex-wrap:wrap}
.paste-links{display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-md);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:var(--space-lg)}
.link-item{display:flex;align-items:center;gap:var(--space-md)}
.link-label{font-size:.75rem;font-weight:600;color:var(--text-muted);min-width:40px}
.link-copy{display:flex;flex:1;gap:var(--space-xs)}
.link-input{flex:1;padding:8px var(--space-md);background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-mono);font-size:.8rem;min-width:0;overflow:hidden;text-overflow:ellipsis}
.keys-notice{padding:var(--space-lg);background:var(--accent-muted);border:1px solid var(--accent);border-radius:var(--radius-md);display:flex;flex-wrap:wrap;gap:var(--space-md) var(--space-xl)}
.key-info{display:flex;align-items:center;gap:var(--space-sm);font-size:.85rem}
.key-label{font-weight:600;color:var(--text-secondary)}
.key-value{font-family:var(--font-mono);font-size:.8rem;background:var(--bg-primary);padding:2px 8px;border-radius:4px;user-select:all}
.key-link{font-size:.8rem;font-weight:500;color:var(--accent);background:var(--accent-muted);border:1px solid var(--accent);border-radius:var(--radius-sm);cursor:pointer;padding:6px 14px;font-family:var(--font-sans);text-decoration:none;transition:all var(--transition);display:inline-flex;align-items:center;min-height:36px}
.key-link:hover{background:var(--accent);color:#fff}
.key-delete{color:var(--danger);background:rgba(239,68,68,.1);border-color:var(--danger)}
.key-delete:hover{background:var(--danger);color:#fff}

/* Code block */
.code-block{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;margin-bottom:var(--space-lg)}
.code-block pre{margin:0;padding:var(--space-md);background:var(--code-bg)!important;overflow-x:auto;font-size:.85rem;line-height:1.7}
.code-block code{font-family:var(--font-mono)!important;font-size:.85rem!important;background:transparent!important}
pre[class*="language-"],code[class*="language-"]{font-family:var(--font-mono)!important;font-size:.85rem!important;text-shadow:none!important}
[data-theme="dark"] pre[class*="language-"]{background:var(--code-bg)!important}
[data-theme="light"] pre[class*="language-"]{background:var(--code-bg)!important}
[data-theme="light"] pre[class*="language-"],
[data-theme="light"] code[class*="language-"],
[data-theme="light"] pre[class*="language-"] *{color:#1a1a18!important;text-shadow:none!important}

/* HTML content */
.html-content{border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-lg);background:var(--bg-secondary);margin-bottom:var(--space-lg);line-height:1.8;word-wrap:break-word}
.html-content a{color:var(--accent)}
.html-content a:hover{text-decoration:underline;color:var(--accent-hover)}
.html-content p,.html-content br{margin-bottom:var(--space-sm)}

/* Dialog */
.dialog{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-secondary);color:var(--text-primary);padding:0;max-width:400px;width:90%;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.dialog::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.dialog-content{padding:var(--space-lg)}
.dialog-content h3{font-size:1.1rem;font-weight:600;margin-bottom:var(--space-sm)}
.dialog-content p{font-size:.875rem;color:var(--text-secondary);margin-bottom:var(--space-lg);line-height:1.5}
.dialog-actions{display:flex;gap:var(--space-sm);justify-content:flex-end}

/* ========================================
   Auth Pages
   ======================================== */
.auth-wrap{display:flex;justify-content:center;align-items:center;min-height:65vh;padding:var(--space-xl) var(--space-lg)}
.auth-box{width:100%;max-width:420px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-2xl)}
.auth-head{margin-bottom:var(--space-xl);text-align:center}
.auth-head-title{font-size:1.5rem;font-weight:700;letter-spacing:-0.02em;margin-bottom:var(--space-xs)}
.auth-head-sub{font-size:.9rem;color:var(--text-muted)}
.auth-form{display:flex;flex-direction:column;gap:var(--space-md)}
.auth-fgroup{display:flex;flex-direction:column;gap:6px}
.auth-fgroup label{font-size:.8rem;font-weight:600;color:var(--text-secondary)}
.auth-input{width:100%;padding:10px 14px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-sans);font-size:.9rem;transition:border-color var(--transition);outline:none}
.auth-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}
.auth-input::placeholder{color:var(--text-muted)}
.auth-input:-webkit-autofill{-webkit-text-fill-color:var(--text-primary);-webkit-box-shadow:0 0 0 30px var(--bg-tertiary) inset}
.auth-btn{margin-top:var(--space-xs)}
.auth-row{display:flex;gap:var(--space-md)}
.auth-row .auth-fgroup{flex:1;min-width:0}
.auth-captcha{display:flex;justify-content:center}
.auth-foot{text-align:center;font-size:.85rem;color:var(--text-muted);margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:1px solid var(--border)}
.auth-foot a{font-weight:600;color:var(--accent)}
.auth-foot a:hover{color:var(--accent-hover)}
.pw-strength{margin-top:4px;height:4px;border-radius:2px;background:var(--border);overflow:hidden}
.pw-strength-bar{height:100%;border-radius:2px;transition:width .3s ease}
.pw-label{font-size:.7rem;margin-top:2px;display:block}

/* Password protect */
.pw-page{display:flex;justify-content:center;align-items:center;min-height:60vh}
.pw-card{text-align:center;max-width:380px;width:100%}
.pw-icon{font-size:3rem;margin-bottom:var(--space-md)}
.pw-form{display:flex;flex-direction:column;gap:var(--space-md);margin-top:var(--space-lg)}
.pw-back{display:inline-block;margin-top:var(--space-lg);font-size:.875rem;color:var(--text-muted)}

/* ========================================
   Admin
   ======================================== */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md);margin-bottom:var(--space-lg)}
.stat-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-lg);text-align:center;min-width:0}
.stat-card .stat-value{font-size:1.5rem;display:block;white-space:nowrap;font-variant-numeric:tabular-nums}
.stat-card .stat-label{font-size:.8rem;display:block;margin-top:4px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.admin-table{width:100%;border-collapse:collapse;font-size:.85rem}
.admin-table th,.admin-table td{padding:var(--space-sm) var(--space-md);text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
.admin-table th{font-weight:600;color:var(--text-muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}
.admin-table tbody tr:hover{background:var(--bg-hover)}
.admin-table .url-cell{max-width:250px;overflow:hidden;text-overflow:ellipsis}
.actions-cell{display:flex;gap:var(--space-xs)}

/* ========================================
   Alerts & Badges
   ======================================== */
.alert{padding:var(--space-md);border-radius:var(--radius-md);font-size:.85rem;margin:var(--space-md) 0;line-height:1.5}
.alert-error{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.3);color:#f87171}
.alert-success{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.3);color:#4ade80}
.alert-warn{background:rgba(234,179,8,.08);border:1px solid rgba(234,179,8,.3);color:#facc15}
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.badge-success{background:rgba(34,197,94,.15);color:var(--success)}
.badge-warn{background:rgba(234,179,8,.15);color:var(--warn)}
.badge-secondary{background:var(--bg-hover);color:var(--text-muted)}
.badge-primary{background:var(--accent-muted);color:var(--accent)}

/* Toast */
.toast-container{position:fixed;bottom:var(--space-xl);left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:var(--space-sm);pointer-events:none}
.toast{pointer-events:auto;padding:12px 20px;border-radius:var(--radius-md);font-size:.85rem;font-weight:500;box-shadow:0 8px 30px rgba(0,0,0,.4);animation:toastIn .3s ease-out,toastOut .3s ease-in 4s forwards;display:flex;align-items:center;gap:var(--space-sm)}
.toast-success{background:#065f46;border:1px solid rgba(34,197,94,.3);color:#6ee7b7}
.toast-error{background:#7f1d1d;border:1px solid rgba(239,68,68,.3);color:#fca5a5}
.toast-close{background:none;border:none;color:inherit;cursor:pointer;font-size:1.2rem;padding:0 0 0 var(--space-sm);opacity:.6}
.toast-close:hover{opacity:1}
@keyframes toastIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{from{opacity:1}to{opacity:0}}

/* ========================================
   Search & Pagination
   ======================================== */
.search-form{display:flex;gap:var(--space-sm);margin-top:var(--space-md)}
.search-input{flex:1;padding:10px var(--space-md);background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-sans);font-size:.875rem;transition:border-color var(--transition);outline:none}
.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}
.search-input::placeholder{color:var(--text-muted)}
.search-results-count{font-size:.875rem;color:var(--text-muted);margin-bottom:var(--space-md)}
.pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-md);padding:var(--space-lg) 0 var(--space-2xl)}
.page-info{font-size:.85rem;color:var(--text-muted)}

/* ========================================
   Infinite Scroll
   ======================================== */
.infinite-scroll-sentinel{display:flex;justify-content:center;padding:var(--space-lg) 0 var(--space-2xl)}
.infinite-scroll-loader{display:flex;align-items:center;gap:var(--space-sm);font-size:.85rem;color:var(--text-muted)}
.loader-spin{display:inline-block;width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.load-more-end{text-align:center;padding:var(--space-lg) 0 var(--space-2xl)}
.load-more-end-text{font-size:.8rem;color:var(--text-muted)}

/* ========================================
   Static Pages
   ======================================== */
.static-page{padding-bottom:var(--space-2xl)}
.static-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-xl);line-height:1.8}
.static-card h2{font-size:1.1rem;font-weight:700;margin:var(--space-xl) 0 var(--space-sm);color:var(--text-primary)}
.static-card h2:first-child{margin-top:0}
.static-card p{font-size:.9rem;color:var(--text-secondary);margin-bottom:var(--space-md)}
.static-card ul{margin:var(--space-sm) 0 var(--space-md) var(--space-lg);font-size:.9rem;color:var(--text-secondary)}
.static-card ul li{margin-bottom:var(--space-xs)}
.static-card .static-intro{font-size:1rem;color:var(--text-primary);font-weight:500;padding:var(--space-md) var(--space-lg);background:var(--bg-tertiary);border-left:3px solid var(--accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin-bottom:var(--space-xl)}
.static-muted{color:var(--text-muted);font-size:.8rem;margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid var(--border)}
.contact-info{display:flex;align-items:center;gap:var(--space-sm);margin:var(--space-lg) 0;padding:var(--space-md);background:var(--bg-tertiary);border-radius:var(--radius-sm)}
.contact-info span{font-size:1rem}
.contact-info a{color:var(--accent);font-weight:600}
.donation-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin:var(--space-lg) 0}
.donation-box{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-md);text-align:center}
.donation-box h3{font-size:.85rem;font-weight:600;margin-bottom:4px}
.donation-box p{font-size:.8rem;color:var(--text-muted);margin-bottom:0}
.donation-box code{display:block;font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted);background:var(--bg-elevated);padding:6px var(--space-sm);border-radius:4px;margin-top:var(--space-sm);word-break:break-all}
.cf-turnstile{margin:var(--space-sm) 0}

/* Live URL preview */
.live-url{padding:var(--space-sm) var(--space-md);background:var(--bg-tertiary);border:1px dashed var(--border);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.85rem;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:var(--space-xs)}
.live-url-prefix{color:var(--text-muted)}
#liveUrlDomain{color:var(--accent);font-weight:600}
#liveUrlSlug{color:var(--text-primary)}

/* ========================================
   Error Pages
   ======================================== */
.error-page{text-align:center;padding:var(--space-2xl) 0}
.error-code{font-size:6rem;font-weight:800;color:var(--border);line-height:1;margin-bottom:var(--space-md)}
.empty-state{text-align:center;padding:var(--space-2xl);color:var(--text-muted)}
.empty-state-icon{font-size:2.5rem;margin-bottom:var(--space-md);display:block;opacity:.5}
.empty-state p{font-size:.9rem;margin-bottom:var(--space-sm)}
.empty-state p:last-child{margin-bottom:0}

/* 404 */
.error-search{display:flex;gap:var(--space-sm);max-width:380px;margin:var(--space-lg) auto 0}
.error-links{display:flex;gap:var(--space-sm);justify-content:center;margin-top:var(--space-md)}

/* Scroll to top */
.scroll-top{position:fixed;bottom:var(--space-xl);right:var(--space-xl);width:42px;height:42px;border-radius:50%;background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-secondary);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:99;opacity:0;transform:translateY(10px);transition:all var(--transition);pointer-events:none}
.scroll-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.scroll-top:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* ========================================
   Responsive — max-width 640px
   ======================================== */
@media(max-width:640px){
  .container{padding:0 var(--space-md)}
  /* Hero */
  .hero h1{font-size:1.6rem}
  .hero{padding:var(--space-xl) 0 var(--space-lg)}
  .page-header h1{font-size:1.4rem}
  .subtitle{font-size:.9rem}

  /* Navbar */
  .nav-links{display:none;position:absolute;top:56px;left:0;right:0;background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-direction:column;align-items:stretch;padding:var(--space-sm) 0;z-index:200;box-shadow:0 4px 12px rgba(0,0,0,.3)}
  .nav-links a{border-radius:0;padding:var(--space-md) var(--space-lg);min-height:44px}
  .nav-links .theme-toggle{border-radius:0;border:none;border-top:1px solid var(--border);padding:var(--space-md) var(--space-lg);min-height:44px;width:100%;justify-content:flex-start;gap:var(--space-sm);font-size:1rem;color:var(--text-secondary);background:none}
  [data-theme="dark"] .nav-links .theme-toggle::after{content:'Light mode';font-size:.875rem}
  [data-theme="light"] .nav-links .theme-toggle::after{content:'Dark mode';font-size:.875rem}
  .nav-links.open{display:flex}
  .mobile-menu{display:flex}
  .btn-shortcut{display:none}

  /* Forms */
  .ql-editor{min-height:250px!important}
  .ql-toolbar.ql-snow{padding:6px!important}
  .ql-toolbar.ql-snow .ql-formats{margin-right:8px!important}
  .form-options{gap:var(--space-md);padding:var(--space-md)}
  .opt-row{flex-direction:column;gap:var(--space-md)}
  .form-actions-row{flex-direction:column}
  .editor{min-height:300px}

  /* Paste View */
  .paste-header{flex-direction:column}
  .paste-actions{width:100%}
  .paste-actions .btn{flex:1;justify-content:center;min-height:44px}
  .link-item{flex-direction:column;align-items:stretch}
  .paste-title{font-size:1.3rem}
  .paste-card-meta{flex-wrap:wrap}
  .keys-notice{flex-direction:column;gap:var(--space-md)}

  /* Cards */
  .card{padding:var(--space-md);border-radius:var(--radius-md)}
  .card-title{font-size:1rem}

  /* Dashboard */
  .dash-paste-card{flex-wrap:wrap}
  .dash-paste-actions{width:100%;justify-content:flex-end}
  .paste-chart{display:none}
  .dash-toolbar{flex-direction:column;align-items:stretch}
  .dash-sort{justify-content:center;width:100%}
  .seg-btn{flex:1;text-align:center}

  /* Stats */
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-sm)}
  .stat-card{padding:var(--space-md)}
  .stat-card .stat-value{font-size:1.3rem}
  .ad-stats,.ad-stats-row{flex-direction:column;align-items:center;gap:var(--space-sm)}
  .ad-stat-item{text-align:center}

  /* Admin */
  .admin-table{font-size:.75rem}
  .admin-table th,.admin-table td{padding:var(--space-xs) var(--space-sm)}
  .actions-cell{flex-direction:column}

  /* Auth */
  .auth-wrap{padding:var(--space-lg) var(--space-md);min-height:60vh}
  .auth-box{padding:var(--space-lg);border-radius:var(--radius-md);background:transparent;border:none}
  .auth-row{flex-direction:column}
  .auth-head-title{font-size:1.3rem}

  /* Static pages */
  .static-card{padding:var(--space-lg);border-radius:var(--radius-md);background:transparent;border:none}
  .donation-grid{grid-template-columns:1fr}

  /* Search */
  .search-form{flex-direction:column}
  .pagination{padding:var(--space-md) 0}

  /* Analytics */
  .ana-grid{grid-template-columns:repeat(2,1fr)}
  .ana-card{gap:var(--space-sm);padding:var(--space-sm) var(--space-md)}
  .ana-card .ana-val{font-size:1.1rem}

  /* Toast */
  .toast-container{left:var(--space-md);right:var(--space-md);bottom:var(--space-md)}

  /* Misc */
  .scroll-top{right:var(--space-md);bottom:var(--space-md)}
  .error-code{font-size:4rem}
}