:root {
    --bg: #0d0d0f;
    --surface: #16161a;
    --surface2: #1e1e24;
    --border: #2a2a35;
    --accent: #7c6af7;
    --accent2: #e84d8a;
    --accent-glow: rgba(124,106,247,0.25);
    --text: #e8e8f0;
    --muted: #8888a8;
    --success: #4ade80;
    --danger: #f87171;
    --warning: #fbbf24;
    --radius: 10px;
    --mono: 'Space Mono', monospace;
    --sans: 'DM Sans', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.6;
    min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; transition: color .2s; }
a:hover { color: #a598ff; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* NAV */
nav {
    background: rgba(13,13,15,0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 100;
    padding: 0;
}
.nav-inner {
    display: flex; align-items: center; gap: 8px;
    max-width: 1100px; margin: 0 auto; padding: 14px 20px;
}
.nav-logo {
    margin-right: auto;
    display: flex; align-items: center;
    line-height: 0;   /* prevent extra space below inline img */
}
.nav-logo img {
    height: 40px;     /* constrained to nav bar height */
    width: auto;      /* preserve 742:152 aspect ratio (~197x40 rendered) */
    display: block;
}
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link {
    padding: 6px 14px; border-radius: 6px;
    color: var(--muted); font-size: 0.9rem; font-weight: 500;
    transition: all .2s;
}
.nav-link:hover { color: var(--text); background: var(--surface2); }
.nav-link.active { color: var(--text); background: var(--surface2); }
.btn-nav {
    padding: 7px 16px; border-radius: 6px;
    background: var(--accent); color: #fff; font-weight: 600; font-size: 0.88rem;
    transition: all .2s; border: none; cursor: pointer;
}
.btn-nav:hover { background: #9588ff; color: #fff; transform: translateY(-1px); }
.nav-user {
    display: flex; align-items: center; gap: 8px;
    color: var(--muted); font-size: 0.88rem;
}
.nav-user strong { color: var(--text); }

/* MAIN */
main { padding: 40px 0 80px; }

/* CARDS */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
}
.card-header { margin-bottom: 24px; border-bottom: 1px solid var(--border); padding-bottom: 18px; }
.card-header h1, .card-header h2 { font-family: var(--mono); font-size: 1.2rem; }

/* BUTTONS */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px; border-radius: 7px; border: none;
    font-family: var(--sans); font-size: 0.9rem; font-weight: 600;
    cursor: pointer; transition: all .2s; text-decoration: none;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #9588ff; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 20px var(--accent-glow); }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-ghost { background: var(--surface2); color: var(--text); }
.btn-ghost:hover { background: var(--border); color: var(--text); }
.btn-sm { padding: 5px 12px; font-size: 0.82rem; border-radius: 5px; }

/* FORMS */
.form-group { margin-bottom: 18px; }
label { display: block; margin-bottom: 6px; font-size: 0.88rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
input[type=text], input[type=password], input[type=email], select, textarea {
    width: 100%; padding: 10px 14px;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 7px; color: var(--text); font-family: var(--sans); font-size: 0.95rem;
    transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }

/* ALERTS */
.alert {
    padding: 12px 16px; border-radius: 7px;
    margin-bottom: 20px; font-size: 0.9rem; font-weight: 500;
    display: flex; align-items: center; gap: 8px;
}
.alert-success { background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.3); color: var(--success); }
.alert-error   { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3); color: var(--danger); }
.alert-info    { background: rgba(124,106,247,.1); border: 1px solid rgba(124,106,247,.3); color: var(--accent); }

/* GRID */
.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
.file-card {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.file-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.file-thumb {
    width: 100%; aspect-ratio: 1;
    object-fit: cover; display: block;
    background: var(--surface);
}
.file-info { padding: 10px 12px; }
.file-name { font-size: 0.8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.file-meta { font-size: 0.75rem; color: var(--muted); display: flex; justify-content: space-between; }
.file-actions { padding: 8px 12px; border-top: 1px solid var(--border); display: flex; gap: 6px; }

/* BBCODE BOX */
.bbcode-box { margin-top: 24px; }
.bbcode-box h3 { font-family: var(--mono); font-size: 0.9rem; color: var(--muted); margin-bottom: 12px; }
.code-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.code-label { font-size: 0.78rem; color: var(--muted); min-width: 90px; font-family: var(--mono); }
.code-input {
    flex: 1; font-family: var(--mono); font-size: 0.8rem;
    padding: 7px 10px; background: var(--bg);
    border: 1px solid var(--border); border-radius: 5px; color: var(--text);
    cursor: text;
}
.copy-btn {
    padding: 6px 12px; font-size: 0.78rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: 5px; color: var(--muted);
    cursor: pointer; transition: all .2s; white-space: nowrap;
    font-family: var(--sans);
}
.copy-btn:hover { border-color: var(--accent); color: var(--accent); }
.copy-btn.copied { border-color: var(--success); color: var(--success); }

/* TABLE */
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th { padding: 10px 12px; text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--border); font-weight: 600; }
td { padding: 10px 12px; border-bottom: 1px solid rgba(42,42,53,.5); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(124,106,247,.04); }

/* BADGE */
.badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
.badge-admin { background: rgba(232,77,138,.15); color: var(--accent2); border: 1px solid rgba(232,77,138,.3); }
.badge-user  { background: rgba(124,106,247,.15); color: var(--accent); border: 1px solid rgba(124,106,247,.3); }

/* PAGE TITLE */
.page-title { font-family: var(--mono); font-size: 1.6rem; font-weight: 700; margin-bottom: 6px; }
.page-sub { color: var(--muted); margin-bottom: 32px; }

/* UPLOAD ZONE */
.upload-zone {
    border: 2px dashed var(--border); border-radius: var(--radius);
    padding: 50px 30px; text-align: center;
    transition: all .2s; cursor: pointer; margin-bottom: 20px;
}
.upload-zone:hover, .upload-zone.dragover { border-color: var(--accent); background: var(--accent-glow); }
.upload-zone svg { color: var(--muted); margin-bottom: 12px; }
.upload-zone p { color: var(--muted); font-size: 0.9rem; }
.upload-zone strong { color: var(--text); }
#file-input { display: none; }

/* EMPTY STATE */
.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty svg { margin-bottom: 16px; opacity: .4; }
.empty p { font-size: 0.95rem; }

/* STATS ROW */
.stats-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.stat-card {
    flex: 1; min-width: 140px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px;
}
.stat-val { font-family: var(--mono); font-size: 1.6rem; font-weight: 700; color: var(--accent); }
.stat-label { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }

@media (max-width: 600px) {
    .nav-links { display: none; }
    .file-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .code-row { flex-wrap: wrap; }
    .code-input { min-width: 0; }
}

/* ------------------------------------------------------------------ */
/* Page-level utility classes (replaces all inline style attributes)   */
/* ------------------------------------------------------------------ */

/* Auth pages (login, mfa_verify) */
.auth-wrap { max-width:400px; margin:60px auto; }
.auth-header { text-align:center; border:none; padding-bottom:8px; }
.auth-title { font-size:1.5rem; margin-bottom:6px; }
.auth-subtitle { color:var(--muted); font-size:0.9rem; }
.auth-icon { font-size:2rem; margin-bottom:10px; }
.auth-back { margin-top:16px; text-align:center; }
.auth-back a { font-size:0.88rem; color:var(--muted); }

/* MFA setup page */
.setup-wrap { max-width:520px; margin:0 auto; }
.setup-step-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.setup-step-num {
    width:28px; height:28px; border-radius:50%; background:var(--accent);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-size:0.85rem; font-weight:700; flex-shrink:0;
}
.setup-step-title { font-family:var(--mono); font-size:1rem; }
.setup-body { color:var(--muted); font-size:0.9rem; margin-bottom:20px; }
.setup-qr-wrap { text-align:center; margin-bottom:20px; }
.setup-qr-inner { display:inline-block; padding:12px; background:#fff; border-radius:8px; line-height:0; }
.setup-manual-summary { cursor:pointer; font-size:0.88rem; color:var(--muted); }
.setup-manual-body { margin-top:12px; }
.setup-manual-note { font-size:0.85rem; color:var(--muted); margin-bottom:8px; }
.setup-secret { font-family:var(--mono); letter-spacing:.1em; word-break:break-all; }
.setup-secret-copy { margin-left:8px; }
.setup-cancel-form { flex:0; }
.setup-actions { display:flex; gap:10px; }

/* OTP / MFA code input */
.otp-input { font-family:var(--mono); font-size:1.4rem; letter-spacing:.2em; text-align:center; }

/* Account page */
.account-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.account-mfa-heading { display:flex; align-items:center; gap:10px; }
.mfa-on  { background:rgba(74,222,128,.15);  color:var(--success); border-color:rgba(74,222,128,.3); }
.mfa-off { background:rgba(248,113,113,.10); color:var(--danger);  border-color:rgba(248,113,113,.3); }
.mfa-status-text { color:var(--muted); font-size:0.9rem; margin-bottom:20px; }
.mfa-app-list { font-size:0.88rem; color:var(--muted); margin-bottom:20px; }
.mfa-app-list strong { color:var(--text); }
.mfa-indicator { color:var(--success); font-size:0.8rem; margin-left:2px; }

/* Admin page */
.admin-create-form { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.admin-field { margin:0; flex:1; min-width:160px; }
.admin-checkbox-row { margin:0; display:flex; align-items:center; gap:8px; padding-bottom:2px; }
.admin-checkbox-label { margin:0; text-transform:none; letter-spacing:0; font-size:0.9rem; cursor:pointer; }
.admin-actions { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.admin-pw-form { display:flex; gap:4px; }
.admin-pw-input { width:130px; padding:5px 8px; font-size:0.82rem; }
.admin-mfa-col { color:var(--success); }
.admin-mfa-off { color:var(--muted); font-size:0.85rem; }

/* Table cells */
.td-muted { color:var(--muted); }
.td-muted-sm { color:var(--muted); font-size:0.85rem; }
.td-muted-xs { color:var(--muted); font-size:0.82rem; }
.td-num { font-size:0.85rem; }
.td-key { color:var(--muted); padding:4px 0; width:80px; }
.td-val { color:var(--muted); padding:6px 0; }

/* index.php gallery header */
.gallery-header { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:24px; }
.gallery-sub { color:var(--muted); margin-bottom:0; }

/* file.php detail layout */
.file-detail-grid { display:grid; grid-template-columns:1fr 400px; gap:24px; align-items:start; }
.file-detail-img { width:100%; border-radius:6px; display:block; }
.file-video-thumb { display:flex; align-items:center; justify-content:center; background:var(--surface); }
.file-info-table { font-size:0.88rem; width:100%; }
.file-actions-row { margin-top:16px; display:flex; gap:8px; }
.file-back { margin-bottom:20px; }
.file-back a { color:var(--muted); font-size:0.9rem; }

/* upload.php */
.upload-results-heading { margin-top:32px; }
.upload-preview-img { max-height:160px; border-radius:6px; margin-bottom:16px; display:block; }
.upload-video-placeholder { padding:16px; background:var(--surface2); border-radius:6px; margin-bottom:16px; font-family:var(--mono); font-size:0.85rem; color:var(--muted); }
.upload-file-list { margin-bottom:16px; display:flex; flex-direction:column; gap:8px; }

/* Share links / BBCode boxes */
.share-heading { font-family:var(--mono); font-size:0.95rem; margin-bottom:16px; color:var(--muted); }
.share-subheading { margin-top:24px; }
.code-row-mb { margin-bottom:10px; }

/* Buttons — full-width centred */
.btn-full { width:100%; justify-content:center; padding:11px; }
.btn-full-sm { flex:1; justify-content:center; }

/* Misc */
.text-muted { color:var(--muted); }
.text-muted-sm { color:var(--muted); font-size:0.88rem; }
.text-muted-xs { color:var(--muted); font-size:0.82rem; }
.text-success { color:var(--success); }
.text-danger  { color:var(--danger); }
.text-mono { font-family:var(--mono); }
.text-mono-sm { font-family:var(--mono); font-size:0.9rem; }
.mb-0 { margin-bottom:0; }
.d-none { display:none; }
.mb-16 { margin-bottom:16px; }
.mb-20 { margin-bottom:20px; }
.mb-24 { margin-bottom:24px; }
.mt-8  { margin-top:8px; }
.mt-12 { margin-top:12px; }
.mt-16 { margin-top:16px; }
.mt-32 { margin-top:32px; }
.ml-auto { margin-left:auto; }
.ml-8    { margin-left:8px; }
.word-break { word-break:break-all; }
.w-full { width:100%; }
.fs-mono-lg { font-family:var(--mono); font-size:1rem; margin-bottom:16px; color:var(--muted); }
.card-pad { padding:20px; }
.card-subheader { font-family:var(--mono); font-size:0.95rem; margin-bottom:16px; color:var(--muted); }

/* Footer */
.site-footer { border-top:1px solid var(--border); padding:20px; text-align:center; color:var(--muted); font-size:0.82rem; font-family:var(--mono); }

@media (max-width:700px) {
    .account-grid      { grid-template-columns:1fr; }
    .file-detail-grid  { grid-template-columns:1fr; }
}

/* ------------------------------------------------------------------ */
/* Confirmation modal                                                   */
/* ------------------------------------------------------------------ */
#confirm-overlay {
    display: none; visibility: hidden;
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
    align-items: center; justify-content: center;
}
#confirm-overlay.active { display: flex; visibility: visible; }
#confirm-box {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 28px; max-width: 380px;
    width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
#confirm-msg {
    color: var(--text); font-size: 1rem; margin-bottom: 24px; line-height: 1.5;
}
#confirm-btns { display: flex; gap: 10px; justify-content: flex-end; }