/* Nuvio 4.0 — quiet, spacious workspace */
:root {
  --bg-app: #f7f8fa;
  --bg-canvas: #f7f8fa;
  --bg-sidebar: #ffffff;
  --bg-sidebar-hover: #f4f6f8;
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;
  --bg-elevated: #edf1f5;
  --bg-input: #ffffff;
  --bg-glass: #ffffff;
  --border-subtle: #eef0f2;
  --border-main: #e6e9ed;
  --border-hover: #cbd2db;
  --border-focus: #315cdb;
  --border-glass: #e6e9ed;
  --accent: #315cdb;
  --accent-hover: #254bc1;
  --accent-gradient: none;
  --accent-glow: rgba(49, 92, 219, .12);
  --danger: #cf3f49;
  --danger-hover: #b9343e;
  --danger-bg: #fff1f1;
  --danger-border: #f4d6d8;
  --success: #278569;
  --success-bg: #edf8f2;
  --success-border: #d0e8da;
  --warning: #bd8428;
  --text-main: #202b39;
  --text-secondary: #697585;
  --text-tertiary: #8793a1;
  --text-dim: #a0aab5;
  --radius-xs: 7px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --shadow-sm: 0 1px 2px rgba(27, 39, 57, .04);
  --shadow-card: 0 2px 8px rgba(27, 39, 57, .025);
  --shadow-elevated: 0 18px 48px rgba(27, 39, 57, .12);
  --font-sans: 'DM Sans', sans-serif;
  --font-mono: 'DM Sans', sans-serif;
  --transition: all .16s ease;
}

body { background: var(--bg-app); color: var(--text-main); font-family: var(--font-sans); }
button, input, select { font: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid rgba(49, 92, 219, .25); outline-offset: 2px;
}
::-webkit-scrollbar-track { background: #f7f8fa; }
::-webkit-scrollbar-thumb { background: #cdd3da; }
::-webkit-scrollbar-thumb:hover { background: #aeb8c4; }

/* Navigation and app frame */
.sidebar { width: 248px; background: #fff; border-color: var(--border-main); backdrop-filter: none; }
.sidebar-brand { padding: 30px 24px 25px; gap: 12px; border: 0; }
.sidebar-brand:hover { background: transparent; }
.brand-icon-box {
  width: 38px; height: 38px; border-radius: 12px; background: #315cdb; box-shadow: none;
  color: #fff; font-family: Manrope, sans-serif; font-size: 21px; font-weight: 800; letter-spacing: -2px;
}
.brand-icon-box span { color: #b9caff; }
.brand-title { color: var(--text-main); font-family: Manrope, sans-serif; font-size: 16px; font-weight: 800; letter-spacing: -.6px; }
.brand-badge { color: var(--text-tertiary); font-size: 10px; letter-spacing: .01em; }
.online-dot { width: 5px; height: 5px; box-shadow: none; }
.sidebar-nav { padding: 20px 14px; gap: 28px; }
.nav-section-label { padding: 0 12px 9px; color: #9aa5b1; font-size: 10px; letter-spacing: .13em; font-weight: 700; }
.nav-items-list { gap: 3px; }
.sidebar-link { min-height: 42px; padding: 10px 12px; border: 0; border-radius: 9px; color: #697585; font-size: 13px; }
.sidebar-link svg { width: 17px; height: 17px; color: #8994a2; }
.sidebar-link:hover { color: var(--text-main); background: #f5f7fa; }
.sidebar-link:hover svg { color: #526176; }
.sidebar-link.active { background: #eef2ff; color: #315cdb; box-shadow: none; }
.sidebar-link.active svg { color: #315cdb; }
.nav-count-badge, .sidebar-link.active .nav-count-badge { background: #fff; border: 0; color: #6473a0; box-shadow: none; font-size: 11px; }
.admin-pill { border: 0; background: #fff2dc; color: #97691e; border-radius: 5px; }
.sidebar-bottom { padding: 18px 16px 22px; gap: 14px; background: #fff; border-color: var(--border-main); }
.sidebar-storage-card { border: 0; background: #f7f8fa; border-radius: 12px; padding: 13px; }
.storage-header { color: #687586; }
.storage-header span:last-child { color: #566477; font-family: var(--font-sans); }
.storage-bar-bg { height: 4px; background: #e3e8ed; }
.storage-bar-fill { background: #315cdb; }
.sidebar-user-card { padding: 2px 4px; }
.sidebar-avatar { width: 34px; height: 34px; border: 0; background: #eaf0ff; color: #315cdb; box-shadow: none; }
.sidebar-username { color: var(--text-main); }
.btn-sidebar-logout { color: #84909f; }
.btn-sidebar-logout:hover { color: var(--danger); }

.top-header { height: 72px; padding: 0 clamp(24px, 4vw, 58px); background: rgba(247,248,250,.94); border-color: var(--border-main); backdrop-filter: blur(12px); }
.breadcrumbs { gap: 10px; font-size: 13px; }
.crumb-root { color: #9aa4b1; }
.crumb-sep { color: #c5cbd2; }
.crumb-current { color: #334154; }
.header-quick-actions { gap: 12px; }
.btn-paste-hint { padding: 0; border: 0; background: transparent; color: #8b96a3; }
.btn-paste-hint svg { color: #a4aeba; }
.kbd { background: #fff; border: 1px solid var(--border-main); box-shadow: none; color: #657285; font: inherit; padding: 3px 6px; }
.main-inner { padding: 42px clamp(24px, 4vw, 58px) 72px; max-width: 1640px; }
.view-header { margin-bottom: 30px; }
.view-title-group h1 { font: 800 clamp(27px, 3vw, 35px)/1.2 Manrope, sans-serif; color: #202b39; letter-spacing: -1.5px; }
.view-title-group p { font-size: 14px; color: #7d8998; margin-top: 8px; }

/* Buttons and fields */
.btn { min-height: 38px; gap: 8px; padding: 9px 15px; font-size: 12px; border-radius: 9px; box-shadow: none; }
.btn-primary { background: #315cdb; border-color: #315cdb; color: #fff; box-shadow: none; }
.btn-primary:hover { background: #254bc1; border-color: #254bc1; box-shadow: 0 5px 14px rgba(49,92,219,.16); transform: none; }
.btn-secondary { background: #fff; border-color: #dfe4e9; color: #465366; box-shadow: none; }
.btn-secondary:hover { background: #f7f9fc; color: #263446; transform: none; }
.btn-subtle:hover { background: #f1f4f7; color: #263446; }
.btn-danger:hover { box-shadow: none; }
.form-input, .toolbar-search input, .select-clean { background: #fff; border: 1px solid #dfe4e9; color: #273448; box-shadow: none; border-radius: 9px; }
.form-input:focus, .toolbar-search input:focus, .select-clean:focus { border-color: #7190e4; outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }
.form-input::placeholder, .toolbar-search input::placeholder { color: #a2acb8; }
.select-clean { min-height: 39px; color: #526174; }
.select-clean option { background: #fff; color: #273448; }
.form-label { color: #354257; }
.form-desc { color: #8490a0; }

/* Gallery */
.view-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; gap: 12px; margin-bottom: 24px; }
.toolbar-search { width: 100%; max-width: 420px; }
.toolbar-search input { height: 40px; padding-left: 37px; }
.toolbar-search svg { color: #8d99a7; }
.filter-segments { min-height: 40px; background: #edf0f4; border: 0; border-radius: 10px; padding: 3px; gap: 2px; }
.seg-btn { min-height: 32px; padding: 7px 11px; border-radius: 7px; color: #768293; white-space: nowrap; }
.seg-btn:hover { background: #e4e9ee; color: #3d4b5f; }
.seg-btn.active { background: #fff; color: #315cdb; box-shadow: 0 1px 4px rgba(29,44,62,.08); }
.toolbar-right { gap: 8px; }
.toolbar-right > .seg-btn { border: 1px solid #dfe4e9; min-height: 39px; background: #fff; }
.toolbar-right > .seg-btn.active { border-color: #b9c8f8; background: #eef2ff; }
.bulk-selection-bar { background: #eef2ff; border-color: #d8e2ff; box-shadow: none; border-radius: 10px; }
.gallery-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.gallery-card { border-color: #e8ebef; border-radius: 13px; box-shadow: none; }
.gallery-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(32,47,72,.08); border-color: #d6dde6; }
.card-preview-thumb { height: 178px; background: #f0f2f5; color: #a6b2c1; }
.card-preview-thumb img { transition: transform .25s ease; }
.card-overlay-actions { background: rgba(24,35,51,.45); backdrop-filter: none; }
.card-icon-action { border-color: rgba(255,255,255,.3); background: #fff; color: #45546a; box-shadow: none; }
.card-icon-action:hover { background: #edf2ff; color: #315cdb; transform: none; }
.card-footer-info { padding: 14px 15px 15px; gap: 9px; border: 0; }
.card-title-text { color: #2a3749; }
.card-meta-row { color: #8793a1; }
.file-type-pill { background: #f0f3f6; border: 0; color: #647487; font-family: var(--font-sans); border-radius: 5px; }
.empty-showcase-box { min-height: 440px; padding: 50px 28px 40px; background: #fff; border-color: #e7eaee; box-shadow: none; }
.empty-showcase-box::before { display: none; }
.empty-icon-ring { width: 64px; height: 64px; background: #eef2ff; border: 0; color: #315cdb; box-shadow: none; border-radius: 18px; }
.empty-showcase-box h3 { color: #263446; font: 800 20px Manrope, sans-serif; letter-spacing: -.5px; }
.empty-showcase-box p { color: #7a8796; font-size: 13px; line-height: 1.65; }
.empty-filter-state { min-height: 300px; }
.empty-actions-row { margin-bottom: 0; }
.empty-tip-card { background: #fafbfc; border-color: #eef0f2; border-radius: 10px; }
.empty-tip-card strong { color: #3f4e62; }
.empty-tip-card span { color: #8894a3; }

/* Upload and integration */
.upload-hero-card, .form-panel, .clean-table-card { background: #fff; border: 1px solid #e7eaee; border-radius: 16px; box-shadow: none; }
.upload-hero-card { padding: clamp(22px, 4vw, 42px); }
.dropzone-box { min-height: 270px; background: #fafbfe; border: 1.5px dashed #cbd5e6; border-radius: 14px; }
.dropzone-box:hover, .dropzone-box.dragover { background: #f3f6ff; border-color: #7892e6; }
.dropzone-icon-glow { background: #eaf0ff; border: 0; color: #315cdb; box-shadow: none; border-radius: 16px; }
.dropzone-box h3 { color: #273448 !important; }
.queue-row { background: #fbfcfd; border-color: #e8ebef; }
.queue-row [style*="color: #fff"] { color: #273448 !important; }
.queue-prog { background: #315cdb; }
.sharex-hero { background: #edf2ff; border: 1px solid #dbe4ff; border-radius: 16px; box-shadow: none; }
.sharex-hero h2 { color: #263b6d !important; }
.sharex-hero p { color: #65769c !important; }
.step-cards-3 { gap: 14px; }
.step-box { background: #fff; border-color: #e7eaee; border-radius: 13px; box-shadow: none; }
.step-box h4, #pane-admin .step-box [id^="adminStat"] { color: #263446 !important; }
.step-badge { color: #315cdb; background: #eef2ff; border: 0; }
.data-table { min-width: 580px; }
.clean-table-card { overflow-x: auto; }
.clean-table-card h3 { color: #263446 !important; }
.data-table th { color: #8b97a5; background: #fafbfc; border-color: #edf0f2; }
.data-table td { color: #526174; border-color: #edf0f2; }
.data-table tr:hover td { background: #fafbfc; }
.data-table td[style*="color: #fff"] { color: #354257 !important; }
.action-btn-circle { color: #718094; background: #fff; border-color: #e5e9ee; box-shadow: none; }
.action-btn-circle:hover { color: #315cdb; background: #eef2ff; }
.settings-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 22px; align-items: start; }
.form-panel { padding: clamp(20px, 3vw, 30px); }
.form-panel h2, .form-panel h3 { color: #263446 !important; }
.switch-title { color: #354257; }
.switch-slider { background: #dce2e9; }
.switch-toggle input:checked + .switch-slider { background: #315cdb; }
.discord-card-box { background: #313338; border: 0; }
.discord-card-box .discord-embed-wrap { background: #2b2d31; }

/* Authentication and overlays */
.auth-wall-page { background: radial-gradient(circle at 50% 15%, #e8efff, transparent 42%), #f7f8fa; }
.auth-card-clean { max-width: 420px; padding: 36px; background: #fff; border-color: #e5e9ee; backdrop-filter: none; box-shadow: 0 24px 65px rgba(31,49,82,.08); border-radius: 20px; }
.auth-card-clean::before { display: none; }
.auth-card-clean .brand-title { color: #263446; }
.auth-nav-pills { background: #f0f3f7; border-radius: 10px; }
.auth-pill-btn { color: #6e7b8b; }
.auth-pill-btn.active { background: #fff; color: #315cdb; box-shadow: 0 1px 5px rgba(37,55,79,.08); }
.modal-overlay { background: rgba(19,27,39,.72); }
.lightbox-dialog { background: #fff; border-color: #e5e9ee; box-shadow: 0 25px 70px rgba(15,23,42,.25); }
.lightbox-stage { background: #eef1f5; }
.lightbox-details-col { background: #fff; border-color: #e5e9ee; }
.lightbox-details-col [style*="color: #fff"] { color: #273448 !important; }
.toast-msg { background: #263446; border: 0; box-shadow: 0 12px 35px rgba(30,42,58,.18); }
.toast-msg.error { background: #8d2e37; color: #fff; }

@media (max-width: 1200px) {
  .view-toolbar { grid-template-columns: minmax(230px, 1fr) auto; }
  .filter-segments { grid-row: 2; grid-column: 1 / -1; width: max-content; max-width: 100%; overflow-x: auto; }
  .toolbar-right { justify-self: end; }
}
@media (max-width: 900px) {
  .sidebar { width: 74px; }
  .sidebar-brand { justify-content: center; padding: 24px 0; }
  .sidebar-brand .brand-info, .nav-section-label, .sidebar-link-content span, .nav-count-badge, .sidebar-bottom { display: none; }
  .sidebar-nav { padding: 14px 10px; gap: 8px; }
  .sidebar-link { justify-content: center; padding: 12px; }
  .sidebar-link-content { gap: 0; }
  .sidebar-link svg { width: 19px; height: 19px; }
  .sidebar-link .admin-pill { display: none; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-layout > div:last-child .form-panel { position: static !important; }
}
@media (max-width: 640px) {
  .app-shell { padding-bottom: 69px; }
  .app-shell[style*="display: flex"] { display: block !important; }
  .sidebar { position: fixed; top: auto; bottom: 0; left: 0; width: 100%; height: 68px; border-right: 0; border-top: 1px solid #e4e8ed; box-shadow: 0 -4px 18px rgba(26,43,67,.04); }
  .sidebar-top { height: 100%; }
  .sidebar-brand, .sidebar-bottom, .nav-section-label { display: none; }
  .sidebar-nav { height: 100%; display: flex; flex-direction: row; align-items: stretch; justify-content: space-around; gap: 0; padding: 5px 4px; }
  .sidebar-nav > div { flex: 1; }
  .sidebar-nav #sidebarAdminGroup[style*="block"] { display: block !important; }
  .nav-items-list { flex-direction: row; height: 100%; justify-content: space-around; }
  .sidebar-link { flex: 1; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 1px; min-height: 0; border-radius: 8px; }
  .sidebar-link-content { flex-direction: column; gap: 3px; }
  .sidebar-link-content span { display: block; font-size: 10px; line-height: 1.1; }
  .sidebar-link svg { width: 19px; height: 19px; }
  .top-header { height: 62px; padding: 0 18px; }
  .header-quick-actions .btn-paste-hint { display: none; }
  .main-inner { padding: 28px 18px 50px; }
  .view-header { margin-bottom: 22px; }
  .view-title-group h1 { font-size: 27px; }
  .view-toolbar { display: flex; align-items: stretch; gap: 10px; }
  .toolbar-search { max-width: none; flex: 1 0 100%; }
  .filter-segments { order: 2; width: 100%; }
  .toolbar-right { flex: 1 0 100%; order: 3; justify-content: space-between; }
  .toolbar-right .select-clean { flex: 1; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card-preview-thumb { height: 138px; }
  .card-footer-info { padding: 11px; }
  .card-meta-row span:last-child { display: none; }
  .card-overlay-actions { display: none; }
  .card-select-input { opacity: 1; }
  .empty-showcase-box { padding: 34px 20px; }
  .empty-tips-grid { grid-template-columns: 1fr; }
  .step-cards-3 { grid-template-columns: 1fr; }
  .sharex-hero { flex-direction: column; align-items: stretch; gap: 18px; }
  .sharex-hero .btn { width: 100%; }
  .lightbox-dialog { height: min(90vh, 850px); flex-direction: column; }
  .lightbox-stage { min-height: 0; }
  .lightbox-details-col { width: 100%; max-height: 42%; overflow-y: auto; border-left: 0; border-top: 1px solid var(--border-main); }
  .toast-msg { bottom: 82px; left: 16px; right: 16px; justify-content: center; }
}
@media (max-width: 390px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .card-preview-thumb { height: 190px; }
  .sidebar-link-content span { font-size: 9px; }
}

/* Nuvio navigation and brand */
:root {
  --accent: #6557f5;
  --accent-hover: #5142db;
  --accent-glow: rgba(101,87,245,.14);
  --border-focus: #6557f5;
}
.app-shell { display: flex; flex-direction: column; }
.content-area { width: 100%; }
.top-header {
  height: 78px; padding: 0 clamp(20px, 4vw, 64px);
  gap: 26px; background: rgba(255,255,255,.91);
  border-bottom: 1px solid var(--border-main);
}
.header-brand { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 10px; color: var(--text-main); text-decoration: none; font: 800 19px Manrope,sans-serif; letter-spacing: -.9px; }
.header-brand img, .auth-brand-mark { width: 38px; height: 38px; display: block; }
.brand-period { color: #6557f5; }
.header-nav { display: flex; align-items: center; gap: 4px; margin-left: clamp(8px, 3vw, 48px); min-width: 0; }
.header-nav .sidebar-link { width: auto; min-height: 38px; padding: 9px 13px; white-space: nowrap; justify-content: center; color: #6e7988; font-weight: 600; }
.header-nav .sidebar-link:hover { background: #f3f2ff; color: #5142db; }
.header-nav .sidebar-link.active { background: #f0eeff; color: #594be1; }
.header-nav .nav-count-badge, .header-nav .sidebar-link.active .nav-count-badge { margin-left: 7px; background: rgba(101,87,245,.1); color: #6557f5; }
.header-quick-actions { margin-left: auto; gap: 13px; }
.header-storage { display: flex; flex-direction: column; gap: 6px; width: 96px; color: #8390a0; font-size: 10px; white-space: nowrap; }
.header-storage .storage-bar-bg { display: block; width: 100%; height: 3px; }
.header-storage .storage-bar-fill { display: block; background: #6557f5; }
.theme-toggle { width: 38px; height: 38px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--border-main); border-radius: 10px; color: #69768a; cursor: pointer; transition: var(--transition); }
.theme-toggle:hover { color: #6557f5; background: #f6f4ff; border-color: #d9d3ff; }
.theme-icon-sun { display: none; }
.header-account { display: flex; align-items: center; gap: 9px; padding-left: 13px; border-left: 1px solid var(--border-main); }
.header-account .sidebar-avatar { width: 32px; height: 32px; background: #f0eeff; color: #6557f5; }
.header-account .sidebar-username { font-size: 12px; white-space: nowrap; }
.header-account .admin-pill { display: none !important; }
.header-account .btn-sidebar-logout { margin-left: 2px; }
.main-inner { max-width: 1520px; padding-top: 48px; }
.auth-card-clean .brand-title { font-size: 18px; }
.auth-card-clean .brand-badge { font-size: 11px; }
.btn-primary { background: #6557f5; border-color: #6557f5; }
.btn-primary:hover { background: #5142db; border-color: #5142db; box-shadow: 0 7px 20px rgba(101,87,245,.2); }
.sidebar-avatar, .empty-icon-ring, .dropzone-icon-glow { color: #6557f5; background: #f0eeff; }
.seg-btn.active, .sidebar-link.active, .step-badge { color: #6557f5; }
.step-badge { background: #f0eeff; }
.sharex-hero { background: linear-gradient(115deg,#f2f0ff 0%,#f8faff 100%); border-color: #e5e0ff; }
.sharex-hero h2 { color: #38306f !important; }
.storage-bar-fill, .queue-prog { background: #6557f5; }
.empty-showcase-box { min-height: 385px; }
.view-title-group h1 { letter-spacing: -1.7px; }

@media (max-width: 1250px) {
  .header-nav { margin-left: 0; }
  .header-storage { display: none; }
  .header-account .sidebar-username { display: none; }
}
@media (max-width: 900px) {
  .top-header { height: auto; min-height: 70px; flex-wrap: wrap; gap: 0; padding: 14px 24px 0; }
  .header-brand { height: 42px; }
  .header-quick-actions { height: 42px; }
  .header-nav { order: 3; width: 100%; margin: 10px 0 0; padding: 0 0 11px; overflow-x: auto; scrollbar-width: none; }
  .header-nav::-webkit-scrollbar { display: none; }
  .header-nav .sidebar-link { flex: 0 0 auto; }
  .main-inner { padding-top: 34px; }
}
@media (max-width: 640px) {
  .app-shell { padding-bottom: 0; }
  .app-shell[style*="display: flex"] { display: flex !important; }
  .top-header { padding: 11px 18px 0; }
  .header-brand { font-size: 17px; }
  .header-brand img { width: 34px; height: 34px; }
  .header-quick-actions { gap: 7px; }
  .header-account { gap: 4px; padding-left: 7px; }
  .header-account .sidebar-avatar { display: none; }
  .header-account .btn-sidebar-logout { padding: 8px; }
  .header-upload-btn { width: 38px; height: 38px; min-height: 38px; padding: 0; }
  .header-upload-btn span { display: none; }
  .header-nav { margin-top: 7px; padding-bottom: 9px; }
  .header-nav .sidebar-link { font-size: 12px; min-height: 35px; padding: 8px 11px; }
  .main-inner { padding: 30px 18px 60px; }
}

/* Dark theme */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body {
  --bg-app: #10131b; --bg-canvas: #10131b; --bg-sidebar: #171b25;
  --bg-card: #1b202b; --bg-card-hover: #222837; --bg-elevated: #282e3b;
  --bg-input: #1b202b; --border-subtle: #2b3140; --border-main: #303747;
  --border-hover: #495266; --text-main: #f0f2f8; --text-secondary: #a6afbf;
  --text-tertiary: #8490a4; --text-dim: #697589; --danger-bg: #3c2029;
  --danger-border: #70343f; --success-bg: #19352e; --success-border: #295845;
  background: #10131b; color: #f0f2f8;
}
html[data-theme="dark"] .top-header { background: rgba(23,27,37,.94); border-color: #303747; }
html[data-theme="dark"] .header-brand, html[data-theme="dark"] .view-title-group h1, html[data-theme="dark"] .sidebar-username { color: #f1f3f9; }
html[data-theme="dark"] .header-nav .sidebar-link { color: #a6afbf; }
html[data-theme="dark"] .header-nav .sidebar-link:hover { color: #d4ceff; background: #29263e; }
html[data-theme="dark"] .header-nav .sidebar-link.active { color: #c3bcff; background: #312c50; }
html[data-theme="dark"] .theme-toggle { background: #222837; border-color: #394153; color: #c7c0ff; }
html[data-theme="dark"] .theme-toggle:hover { background: #312c50; }
html[data-theme="dark"] .theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-icon-sun { display: block; }
html[data-theme="dark"] .header-account { border-color: #353d4e; }
html[data-theme="dark"] .header-account .sidebar-avatar { background: #312c50; color: #cbc5ff; }
html[data-theme="dark"] .header-storage { color: #98a4b5; }
html[data-theme="dark"] .header-storage .storage-bar-bg { background: #343b4b; }
html[data-theme="dark"] .view-title-group p, html[data-theme="dark"] .form-desc { color: #9ba6b7; }
html[data-theme="dark"] .btn-secondary { background: #242a37; color: #e0e4ee; border-color: #3a4354; }
html[data-theme="dark"] .btn-secondary:hover { background: #30384a; color: #fff; }
html[data-theme="dark"] .btn-subtle:hover { color: #fff; background: #2e3544; }
html[data-theme="dark"] .form-input, html[data-theme="dark"] .toolbar-search input, html[data-theme="dark"] .select-clean { background: #1b202b; border-color: #3a4253; color: #e9edf5; }
html[data-theme="dark"] .form-input::placeholder, html[data-theme="dark"] .toolbar-search input::placeholder { color: #748096; }
html[data-theme="dark"] .select-clean option { background: #1b202b; color: #e9edf5; }
html[data-theme="dark"] .form-label, html[data-theme="dark"] .switch-title { color: #dbe0eb; }
html[data-theme="dark"] .filter-segments { background: #222735; }
html[data-theme="dark"] .seg-btn { color: #a6afbf; }
html[data-theme="dark"] .seg-btn:hover { background: #343b4c; color: #e9edf5; }
html[data-theme="dark"] .seg-btn.active { background: #3a345f; color: #cbc5ff; box-shadow: none; }
html[data-theme="dark"] .toolbar-right > .seg-btn { background: #1b202b; border-color: #3a4253; }
html[data-theme="dark"] .toolbar-right > .seg-btn.active { background: #3a345f; border-color: #6557f5; }
html[data-theme="dark"] .gallery-card, html[data-theme="dark"] .empty-showcase-box, html[data-theme="dark"] .upload-hero-card, html[data-theme="dark"] .form-panel, html[data-theme="dark"] .clean-table-card, html[data-theme="dark"] .step-box { background: #1b202b; border-color: #303747; }
html[data-theme="dark"] .gallery-card:hover { background: #202634; border-color: #4a5366; }
html[data-theme="dark"] .card-preview-thumb { background: #252b38; color: #8390a4; }
html[data-theme="dark"] .card-footer-info { border-color: #303747; }
html[data-theme="dark"] .card-title-text, html[data-theme="dark"] .empty-showcase-box h3 { color: #e9edf5; }
html[data-theme="dark"] .card-meta-row, html[data-theme="dark"] .empty-showcase-box p { color: #a1acbc; }
html[data-theme="dark"] .file-type-pill, html[data-theme="dark"] .empty-tip-card { background: #282e3b; border-color: #394153; color: #aeb9c9; }
html[data-theme="dark"] .empty-icon-ring, html[data-theme="dark"] .dropzone-icon-glow { background: #302b4f; color: #bcb4ff; }
html[data-theme="dark"] .dropzone-box { background: #1d2230; border-color: #4a516a; }
html[data-theme="dark"] .dropzone-box:hover, html[data-theme="dark"] .dropzone-box.dragover { background: #25263c; border-color: #8377ff; }
html[data-theme="dark"] .dropzone-box h3 { color: #e9edf5 !important; }
html[data-theme="dark"] .queue-row { background: #222837; border-color: #394153; }
html[data-theme="dark"] .queue-row [style*="color: #fff"] { color: #e9edf5 !important; }
html[data-theme="dark"] .sharex-hero { background: linear-gradient(115deg,#262340,#1d2435); border-color: #3d3a62; }
html[data-theme="dark"] .sharex-hero h2 { color: #edeaff !important; }
html[data-theme="dark"] .sharex-hero p { color: #b5b5d0 !important; }
html[data-theme="dark"] .step-box h4, html[data-theme="dark"] #pane-admin .step-box [id^="adminStat"] { color: #e9edf5 !important; }
html[data-theme="dark"] .step-badge { background: #302b4f; color: #c4bcff; }
html[data-theme="dark"] .clean-table-card h3, html[data-theme="dark"] .form-panel h2, html[data-theme="dark"] .form-panel h3 { color: #e9edf5 !important; }
html[data-theme="dark"] .data-table th { background: #222837; color: #9ca9bc; border-color: #343c4e; }
html[data-theme="dark"] .data-table td { color: #c0c8d7; border-color: #343c4e; }
html[data-theme="dark"] .data-table tr:hover td { background: #242b39; }
html[data-theme="dark"] .data-table td[style*="color: #fff"] { color: #e9edf5 !important; }
html[data-theme="dark"] .action-btn-circle, html[data-theme="dark"] .card-icon-action { background: #2a3140; border-color: #434d60; color: #d1d9e5; }
html[data-theme="dark"] .action-btn-circle:hover { background: #3a345f; color: #cbc5ff; }
html[data-theme="dark"] .bulk-selection-bar { background: #2b2845; border-color: #4d4678; }
html[data-theme="dark"] .switch-slider { background: #4b5363; }
html[data-theme="dark"] .auth-wall-page { background: radial-gradient(circle at 50% 15%,#25213f,transparent 45%),#10131b; }
html[data-theme="dark"] .auth-card-clean { background: #1b202b; border-color: #373e50; box-shadow: 0 24px 65px rgba(0,0,0,.3); }
html[data-theme="dark"] .auth-card-clean .brand-title { color: #f1f3f9; }
html[data-theme="dark"] .auth-nav-pills { background: #262c39; }
html[data-theme="dark"] .auth-pill-btn { color: #aab4c5; }
html[data-theme="dark"] .auth-pill-btn.active { background: #3a345f; color: #d1cbff; }
html[data-theme="dark"] .lightbox-dialog, html[data-theme="dark"] .lightbox-details-col { background: #1b202b; border-color: #3b4355; }
html[data-theme="dark"] .lightbox-stage { background: #11151e; }
html[data-theme="dark"] .lightbox-details-col [style*="color: #fff"] { color: #e9edf5 !important; }
html[data-theme="dark"] .toast-msg { background: #343b4d; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #171b25; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #454e60; }

/* Flat presentation */
:root { --accent: #4959bb; --accent-hover: #39499f; --accent-glow: transparent; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 8px; }
body, body * { background-image: none !important; box-shadow: none !important; text-shadow: none !important; }
button, a, input, select { transition: color .14s ease, background-color .14s ease, border-color .14s ease; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #7582d5; outline-offset: 2px; }
.top-header { height: 60px; padding-inline: clamp(20px,3vw,48px); gap: 20px; background: #fff; backdrop-filter: none; }
.header-brand { gap: 9px; font-size: 17px; letter-spacing: -.6px; }
.header-brand img { width: 30px; height: 30px; }
.brand-period { color: inherit; }
.header-nav { gap: 0; margin-left: clamp(4px,2vw,24px); }
.header-nav .sidebar-link { min-height: 32px; padding: 7px 10px; border-radius: 5px; font-size: 12px; font-weight: 600; }
.header-nav .sidebar-link.active, .header-nav .sidebar-link:hover { background: transparent; color: #2d3c64; }
.header-nav .sidebar-link.active { position: relative; }
.header-nav .sidebar-link.active::after { content: ""; position: absolute; height: 2px; bottom: -14px; left: 10px; right: 10px; background: #4959bb; }
.header-nav .nav-count-badge, .header-nav .sidebar-link.active .nav-count-badge { background: #eef0f5; color: #667384; border-radius: 4px; padding: 1px 5px; }
.header-quick-actions { gap: 9px; }
.header-storage { font-size: 10px; }
.theme-toggle { width: 32px; height: 32px; border: 0; background: transparent; border-radius: 5px; color: #6f7b8c; }
.theme-toggle:hover { background: #f1f3f7; color: #263449; border: 0; }
.header-upload-btn { min-height: 32px; padding: 7px 12px; }
.nuvio-dialog { width: min(440px, calc(100vw - 32px)); border: 1px solid var(--border-main); border-radius: 12px; padding: 22px; color: var(--text-main); background: var(--bg-card); box-shadow: 0 24px 80px #0008; }
.nuvio-dialog::backdrop { background: #090b10aa; backdrop-filter: blur(2px); }
.nuvio-dialog h2 { font-size: 17px; margin: 0 0 8px; }
.nuvio-dialog p { color: var(--text-secondary); font-size: 13px; line-height: 1.55; margin: 0 0 18px; }
.nuvio-dialog .form-label:not([hidden]) { display: block; margin-bottom: 7px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.header-account { padding-left: 9px; }
.header-account .sidebar-avatar { width: 28px; height: 28px; background: #edf0f4; color: #3b4758; font-size: 11px; }
.main-inner { padding-top: 36px; }
.view-title-group h1 { font-size: 29px; letter-spacing: -1.2px; }
.view-title-group p { margin-top: 5px; font-size: 13px; }
.view-header { margin-bottom: 26px; }
.btn { min-height: 34px; padding: 7px 12px; border-radius: 6px; font-size: 12px; }
.btn-primary { background: #34445b; border-color: #34445b; }
.btn-primary:hover { background: #243247; border-color: #243247; transform: none; }
.btn-secondary { border-color: #d9dee5; }
.form-input, .toolbar-search input, .select-clean { border-radius: 6px; }
.form-input:focus, .toolbar-search input:focus, .select-clean:focus { border-color: #6877ba; outline: 2px solid rgba(73,89,187,.16); outline-offset: 1px; }
.toolbar-search input, .select-clean { height: 36px; min-height: 36px; }
.view-toolbar { margin-bottom: 20px; }
.filter-segments { min-height: 36px; background: transparent; border: 1px solid #dfe3e9; border-radius: 6px; padding: 2px; }
.seg-btn { min-height: 29px; border-radius: 4px; }
.seg-btn.active { background: #eef0f5; color: #34445b; }
.toolbar-right > .seg-btn { min-height: 36px; }
.gallery-grid { gap: 12px; }
.gallery-card { border-radius: 7px; }
.gallery-card:hover { transform: none; border-color: #aeb8c5; }
.card-preview-thumb { background: #f2f4f6; }
.gallery-card:hover .card-preview-thumb img { transform: none; }
.card-footer-info { padding: 12px; }
.file-type-pill { background: transparent; padding: 0; color: #7c8999; }
.empty-showcase-box { min-height: 315px; padding: 64px 20px 40px; border: 0; border-top: 1px solid var(--border-main); border-radius: 0; background: transparent; }
.empty-icon-ring { width: 40px; height: 40px; margin-bottom: 18px; border-radius: 0; background: transparent; color: #77849a; }
.empty-showcase-box h3 { font-size: 18px; }
.empty-showcase-box p { margin-bottom: 19px; }
.empty-actions-row { gap: 8px; }
.upload-hero-card { max-width: 900px; margin: 0 auto; padding: 0; border: 0; border-radius: 0; background: transparent; }
.dropzone-box { min-height: 238px; padding: 42px 24px; border: 1px dashed #b9c2ce; border-radius: 7px; background: transparent; }
.dropzone-box:hover, .dropzone-box.dragover { background: #f8f9fb; border-color: #66758b; }
.dropzone-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; color: #596a83; }
.dropzone-icon svg { width: 24px; height: 24px; }
.upload-paste-hint { display: inline-block; font-size: 11px; color: #8490a0; }
.queue-row { border-radius: 6px; }
.sharex-hero { padding: 0 0 25px; margin-bottom: 10px; background: transparent; border: 0; border-bottom: 1px solid var(--border-main); border-radius: 0; }
.sharex-hero::after { display: none; }
.sharex-hero h2 { color: #263449 !important; }
.sharex-hero p { color: #728094 !important; }
.step-cards-3 { gap: 0; margin-bottom: 28px; }
.step-box { padding: 19px 20px 19px 0; background: transparent; border: 0; border-radius: 0; border-bottom: 1px solid var(--border-main); }
.step-box:hover { transform: none; border-color: var(--border-main); }
.step-badge { margin: 0 0 9px; padding: 0; background: transparent; color: #7c8999; font-weight: 700; font-size: 10px; letter-spacing: .06em; }
.clean-table-card { padding: 0; background: transparent; border: 0; border-radius: 0; }
.clean-table-card .view-header { margin-bottom: 12px !important; }
.data-table th { background: transparent; font-size: 10px; }
.data-table td { padding-block: 13px; }
.form-panel { padding: 0; border: 0; background: transparent; border-radius: 0; }
.settings-layout { gap: clamp(32px,5vw,72px); }
.settings-layout > div:last-child { border-left: 1px solid var(--border-main); padding-left: clamp(24px,3vw,42px); }
.discord-card-box { border-radius: 6px; }
.auth-wall-page { background: #f7f8fa; }
.auth-card-clean { border-radius: 8px; }
.auth-nav-pills { border-radius: 6px; }
.auth-pill-btn.active { background: #fff; color: #34445b; }
.lightbox-dialog { border-radius: 8px; }
.toast-msg { border-radius: 6px; }
.card-icon-action:hover { transform: none; }
.key-badge-mono, .code-font { background: #f1f3f6; color: #354459; border-radius: 4px; }

html[data-theme="dark"] .top-header { background: #171b25; }
html[data-theme="dark"] .header-nav .sidebar-link.active, html[data-theme="dark"] .header-nav .sidebar-link:hover { background: transparent; color: #f0f2f8; }
html[data-theme="dark"] .header-nav .sidebar-link.active::after { background: #a8b2e9; }
html[data-theme="dark"] .header-nav .nav-count-badge, html[data-theme="dark"] .header-nav .sidebar-link.active .nav-count-badge { background: #2b3240; color: #acb7ca; }
html[data-theme="dark"] .theme-toggle { background: transparent; border: 0; }
html[data-theme="dark"] .theme-toggle:hover { background: #2b3240; }
html[data-theme="dark"] .header-account .sidebar-avatar { background: #303746; color: #d4dbe6; }
html[data-theme="dark"] .btn-primary { background: #5665aa; border-color: #5665aa; color: #fff; }
html[data-theme="dark"] .btn-primary:hover { background: #6876b7; border-color: #6876b7; }
html[data-theme="dark"] .filter-segments { background: transparent; border-color: #3a4354; }
html[data-theme="dark"] .seg-btn.active { background: #303747; color: #e0e6f1; }
html[data-theme="dark"] .gallery-card:hover { background: #1b202b; border-color: #697386; }
html[data-theme="dark"] .empty-showcase-box, html[data-theme="dark"] .upload-hero-card, html[data-theme="dark"] .form-panel, html[data-theme="dark"] .clean-table-card, html[data-theme="dark"] .step-box { background: transparent; border-color: #323a4b; }
html[data-theme="dark"] .empty-icon-ring { background: transparent; color: #9daac0; }
html[data-theme="dark"] .dropzone-box { background: transparent; border-color: #525d70; }
html[data-theme="dark"] .dropzone-box:hover, html[data-theme="dark"] .dropzone-box.dragover { background: #1a202b; border-color: #8793a7; }
html[data-theme="dark"] .dropzone-icon { color: #aeb9ca; }
html[data-theme="dark"] .sharex-hero { background: transparent; border-color: #323a4b; }
html[data-theme="dark"] .sharex-hero h2 { color: #e8edf5 !important; }
html[data-theme="dark"] .sharex-hero p { color: #a1adbe !important; }
html[data-theme="dark"] .step-badge { background: transparent; color: #a5afc0; }
html[data-theme="dark"] .data-table th { background: transparent; }
html[data-theme="dark"] .auth-wall-page { background: #10131b; }
html[data-theme="dark"] .key-badge-mono, html[data-theme="dark"] .code-font { background: #282f3d; color: #d6deea; }

@media (max-width: 900px) {
  .top-header { height: auto; min-height: 0; padding: 8px 20px 0; row-gap: 0; }
  .header-brand, .header-quick-actions { height: 34px; }
  .header-nav { margin: 2px 0 0; padding-bottom: 6px; }
  .header-nav .sidebar-link.active::after { bottom: -6px; }
  .settings-layout > div:last-child { border-left: 0; border-top: 1px solid var(--border-main); padding: 24px 0 0; }
}
@media (max-width: 640px) {
  .top-header { padding-inline: 16px; }
  .header-brand img { width: 28px; height: 28px; }
  .header-upload-btn { display: none; }
  .header-nav .sidebar-link { min-height: 31px; padding: 6px 9px; }
  .main-inner { padding-top: 26px; }
  .view-title-group h1 { font-size: 27px; }
  .empty-showcase-box { padding: 46px 8px 30px; }
  .step-cards-3 { grid-template-columns: 1fr; }
}

/* Gallery finishing details */
.gallery-result-count { align-self: flex-end; margin-bottom: 3px; color: #8290a1; font-size: 12px; font-variant-numeric: tabular-nums; }
.gallery-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.gallery-card.selected { border-color: #6e7db5; }
.card-media-area { position: relative; }
.card-preview-thumb { display: flex; width: 100%; height: auto; min-height: 0; aspect-ratio: 16/10; padding: 0; border: 0; border-radius: 0; color: #9ba7b7; }
.card-preview-thumb:hover { color: #65758d; }
.card-preview-thumb img, .card-preview-thumb video { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-overlay-actions { position: absolute; inset: auto 9px 9px auto; width: auto; height: auto; padding: 0; background: transparent; opacity: 0; gap: 4px; backdrop-filter: none; pointer-events: none; }
.gallery-card:hover .card-overlay-actions, .gallery-card:focus-within .card-overlay-actions { opacity: 1; pointer-events: auto; }
.card-icon-action { width: 29px; height: 29px; border-radius: 5px; background: #fff; border-color: #dce2e9; color: #47576d; }
.card-icon-action:hover { background: #f3f5f8; border-color: #bfc8d3; color: #243247; }
.card-icon-action.is-favorite { color: #4959bb; }
.card-icon-action.danger:hover { color: #b9434d; background: #fff1f2; border-color: #ecc8cd; }
.card-select-input { top: 11px; left: 11px; width: 16px; height: 16px; accent-color: #4959bb; }
.gallery-card:focus-within .card-select-input { opacity: 1; }
.card-footer-info { padding: 11px 12px 12px; gap: 7px; border-top: 1px solid var(--border-main); }
.card-title-text { font-size: 12px; font-weight: 600; }
.card-meta-row { justify-content: flex-start; gap: 10px; font-size: 10px; font-variant-numeric: tabular-nums; }
.card-meta-row span:last-child { margin-left: auto; }
.file-type-pill { min-width: 25px; font-size: 10px; font-weight: 700; }
.gallery-skeleton { border: 1px solid var(--border-main); border-radius: 7px; overflow: hidden; background: #fff; }
.skeleton-preview { aspect-ratio: 16/10; background: #eef1f5; }
.skeleton-line { height: 8px; width: 66%; margin: 13px 12px 0; border-radius: 3px; background: #e9edf2; }
.skeleton-line.short { width: 38%; margin-top: 10px; margin-bottom: 14px; }
.gallery-error { grid-column: 1/-1; padding: 38px 0; border-top: 1px solid var(--border-main); color: var(--danger); font-size: 13px; }
.modal-overlay { backdrop-filter: none; }
html[data-theme="dark"] .gallery-result-count { color: #94a0b3; }
html[data-theme="dark"] .gallery-card.selected { border-color: #8894c8; }
html[data-theme="dark"] .card-icon-action { background: #252c3a; border-color: #465164; color: #d1d8e5; }
html[data-theme="dark"] .card-icon-action:hover { background: #30394b; border-color: #69778d; color: #fff; }
html[data-theme="dark"] .card-icon-action.is-favorite { color: #b7c0f5; }
html[data-theme="dark"] .card-icon-action.danger:hover { background: #41272d; border-color: #89505b; color: #f5b4bd; }
html[data-theme="dark"] .gallery-skeleton { background: #1b202b; border-color: #303747; }
html[data-theme="dark"] .skeleton-preview { background: #252c39; }
html[data-theme="dark"] .skeleton-line { background: #313a4a; }
@media (max-width: 1100px) { .gallery-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 760px) { .gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px) {
  .gallery-result-count { margin: 0; }
  .card-overlay-actions { display: flex; opacity: 1; pointer-events: auto; right: 7px; bottom: 7px; }
  .card-icon-action { width: 27px; height: 27px; }
  .card-select-input { opacity: 1; }
  .card-meta-row { gap: 6px; }
  .card-meta-row span:last-child { display: none; }
  .modal-overlay { padding: 12px; }
  .lightbox-dialog { display: block; height: auto; max-height: calc(100dvh - 24px); overflow-y: auto; }
  .lightbox-stage { height: min(38dvh, 320px); min-height: 220px; padding: 12px; }
  .lightbox-details-col { width: 100%; max-height: none; min-height: 0; overflow: visible; padding: 20px; }
}

/* ShareX embed composer and Discord preview */
.sharex-settings-block .settings-layout { align-items: start; }
.sharex-settings-block .settings-layout > div:first-child > .form-panel { padding: 24px 26px; }
.sharex-settings-block .settings-layout > div:last-child { min-width: 0; }
.embed-settings-fields { margin-top: 22px !important; padding-top: 22px !important; border-color: var(--border-main) !important; }
.embed-description-input { min-height: 108px; resize: vertical; line-height: 1.55; }
.embed-timestamp-toggle { min-height: 48px; align-items: center; }
.discord-preview-panel { position: sticky; top: 78px; min-width: 0; max-width: 450px; }
.discord-preview-heading { display: block; margin: 4px 0 18px; }
.discord-preview-heading h3 { margin: 0; color: var(--text-main); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.discord-preview-heading p { margin: 4px 0 0; color: var(--text-tertiary); font-size: 12px; }
.discord-message { display: flex; align-items: flex-start; gap: 12px; padding: 2px 0 0; border: 0; border-radius: 0; background: transparent; color: #dbdee1; }
.discord-message-avatar { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: #5865f2; color: #fff; font-size: 14px; font-weight: 700; }
.discord-message-avatar svg { width: 24px; height: 24px; }
.discord-message-content { min-width: 0; width: min(100%, 310px); flex: 0 1 310px; }
.discord-message-meta { display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px; }
.discord-message-meta strong { color: #f2f3f5; font-size: 13px; }
.discord-message-meta span { color: #949ba4; font-size: 10px; }
.discord-message-link { display: block; max-width: 280px; margin: 0 0 9px; overflow: hidden; color: #00a8fc; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.discord-embed-wrap { box-sizing: border-box; display: flex; flex-direction: column; gap: 7px; width: min(100%, 280px); padding: 15px 13px 11px; border-left: 3px solid var(--embed-preview-color, #4959bb); border-radius: 0 4px 4px 0; background: #2b2d31; }
.discord-embed-author, .discord-embed-title, .discord-embed-desc { overflow-wrap: anywhere; }
.discord-embed-author { width: fit-content; color: #f2f3f5; font-size: 11px; font-weight: 600; text-decoration: none; }
.discord-embed-author.has-url:hover { text-decoration: underline; }
.discord-embed-title { width: fit-content; color: #00a8fc; font-size: 14px; font-weight: 700; text-decoration: none; }
.discord-embed-title:hover { text-decoration: underline; }
.discord-embed-desc { color: #dbdee1; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.discord-embed-timestamp { color: #a1a6ad; font-size: 10px; }
.discord-embed-timestamp[hidden] { display: none; }
.embed-help { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 18px; padding-top: 17px; }
.embed-help h4 { margin: 0; }
.embed-help p { margin: 3px 0 0; }
.embed-variable-list { display: flex; flex-wrap: wrap; gap: 6px; }
.embed-variable-list code { padding: 5px 7px; border: 1px solid var(--border-main); border-radius: 5px; background: var(--bg-elevated); color: var(--text-secondary); font: 10px var(--font-mono); cursor: pointer; }
.embed-variable-list code:hover { border-color: var(--border-hover); color: var(--text-main); }
.embed-variable-list code:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.embed-preview-note { margin: 12px 0 0; color: var(--text-tertiary); font-size: 11px; line-height: 1.5; }
html[data-theme="dark"] .discord-preview-panel { color: var(--text-main); }
@media (max-width: 900px) { .discord-preview-panel { position: static; } }
@media (max-width: 390px) { .gallery-grid { grid-template-columns: 1fr; } }

/* Account menu */
.header-account { position: relative; padding-left: 8px; }
.account-trigger { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 3px 5px; border: 0; border-radius: 5px; background: transparent; color: var(--text-main); cursor: pointer; }
.account-trigger:hover, .account-trigger[aria-expanded="true"] { background: #f1f3f6; }
.account-trigger.active { background: #f1f3f6; }
.account-trigger .sidebar-avatar { width: 27px; height: 27px; flex: 0 0 auto; }
.account-trigger .sidebar-username { display: block; max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.account-chevron { flex: 0 0 auto; color: #8a96a5; transition: transform .14s ease; }
.account-trigger[aria-expanded="true"] .account-chevron { transform: rotate(180deg); }
.account-menu { position: absolute; top: calc(100% + 11px); right: 0; z-index: 80; width: 226px; padding: 5px; background: #fff; border: 1px solid #dfe4e9; border-radius: 8px; color: #263449; }
.account-menu[hidden] { display: none; }
.account-menu-heading { display: flex; flex-direction: column; gap: 2px; padding: 10px 11px 11px; }
.account-menu-heading span { color: #8995a4; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.account-menu-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
.account-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 37px; padding: 8px 10px; border: 0; border-radius: 5px; background: transparent; color: #46556a; text-align: left; font-size: 12px; font-weight: 600; cursor: pointer; }
.account-menu-item svg { flex: 0 0 auto; color: #7a8799; }
.account-menu-item:hover, .account-menu-item:focus-visible { background: #f2f4f7; color: #223149; }
.account-menu-item:focus-visible { outline-offset: -2px; }
.account-menu-divider { height: 1px; margin: 5px 6px; background: #e8ebef; }
.account-menu-logout:hover { background: #fff1f2; color: #ac414b; }
.account-menu-logout:hover svg { color: #ac414b; }
.sharex-settings-block { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border-main); }
.account-settings-header { margin-bottom: 30px; }
.account-settings-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); max-width: 1050px; }
.account-settings-column + .account-settings-column { border-left: 1px solid var(--border-main); padding-left: clamp(24px, 3vw, 42px); }
.account-settings-section { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid var(--border-main); }
.account-settings-section h2 { margin: 0 0 5px; color: var(--text-main); font-size: 16px; font-weight: 700; }
.account-section-desc { margin: 0 0 22px; color: var(--text-tertiary); font-size: 12px; }
.account-settings-section .form-group { max-width: 420px; }
.account-settings-section .form-input { max-width: 420px; }
.account-profile-summary { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; }
.account-profile-avatar { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--border-main); border-radius: 50%; background: var(--bg-elevated); color: var(--text-main); font-size: 15px; font-weight: 700; }
.account-profile-summary strong, .account-profile-summary span:not(.account-profile-avatar) { display: block; }
.account-profile-summary strong { color: var(--text-main); font-size: 14px; }
.account-profile-summary div span { margin-top: 2px; color: var(--text-tertiary); font-size: 11px; }
@media (max-width: 800px) { .account-settings-layout { grid-template-columns: 1fr; gap: 0; } .account-settings-column + .account-settings-column { border-left: 0; padding-left: 0; } }
html[data-theme="dark"] .account-trigger:hover, html[data-theme="dark"] .account-trigger[aria-expanded="true"] { background: #2a3140; }
html[data-theme="dark"] .account-trigger.active { background: #2a3140; }
html[data-theme="dark"] .account-menu { background: #1e2430; border-color: #3b4455; color: #edf0f6; }
html[data-theme="dark"] .account-menu-heading span { color: #8e9aae; }
html[data-theme="dark"] .account-menu-item { color: #c3ccda; }
html[data-theme="dark"] .account-menu-item svg { color: #9aa7ba; }
html[data-theme="dark"] .account-menu-item:hover, html[data-theme="dark"] .account-menu-item:focus-visible { background: #2b3342; color: #fff; }
html[data-theme="dark"] .account-menu-divider { background: #364052; }
html[data-theme="dark"] .account-menu-logout:hover { background: #3b262d; color: #f1b5be; }
html[data-theme="dark"] .account-menu-logout:hover svg { color: #f1b5be; }
@media (max-width: 1250px) { .header-account .sidebar-username { display: block; } }
@media (max-width: 900px) { .account-menu { position: fixed; top: 88px; right: 16px; } }
@media (max-width: 640px) {
  .header-account .sidebar-avatar { display: flex; }
  .account-trigger { gap: 5px; }
  .account-trigger .sidebar-username { max-width: 66px; }
}

/* Account and ShareX workspaces */
.main-inner:has(#pane-settings.active), .main-inner:has(#pane-sharex.active) { max-width: 1800px; }
.account-settings-layout { max-width: none; gap: clamp(28px, 3vw, 56px); align-items: start; }
@media (min-width: 1251px) {
  .account-settings-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .account-settings-column:first-child { display: contents; }
  .account-settings-column:first-child > .account-settings-section:nth-child(2) { border-left: 1px solid var(--border-main); padding-left: clamp(28px, 3vw, 56px); }
}
.account-settings-section .form-group, .account-settings-section .form-input { max-width: none; }
.account-settings-section { min-width: 0; }

.sharex-page-header { margin-bottom: 18px; }
.sharex-section-nav { display: flex; gap: 24px; border-bottom: 1px solid var(--border-main); margin-bottom: 28px; }
.sharex-section-tab { position: relative; min-height: 40px; padding: 0 2px 12px; border: 0; background: transparent; color: var(--text-tertiary); cursor: pointer; font-size: 13px; font-weight: 600; }
.sharex-section-tab:hover, .sharex-section-tab.active { color: var(--text-main); }
.sharex-section-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--text-main); }
.sharex-panel[hidden] { display: none; }
.sharex-settings-block { margin: 0; padding: 0; border: 0; }
.sharex-settings-block .settings-layout { grid-template-columns: minmax(0, 1.3fr) minmax(340px, .7fr); gap: clamp(36px, 4vw, 72px); }
#settingsForm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; align-items: start; }
#settingsForm > .form-group { margin: 0; }
#settingsForm > .embed-settings-fields { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.embed-settings-fields > .switch-row { grid-column: 1 / -1; }
.embed-settings-fields > .form-group { margin: 0; }
#settingsForm > button[type="submit"] { grid-column: 1 / -1; width: min(220px, 100%) !important; }
.embed-help { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border-main); }
.embed-help h4 { color: var(--text-main); font-size: 13px; font-weight: 700; }
.embed-help p { margin: 5px 0 13px; color: var(--text-tertiary); font-size: 12px; }
.embed-help > div:first-child { display: block; }
.embed-help > .embed-variable-list { display: flex; flex-wrap: wrap; gap: 7px; }
.embed-help code { padding: 6px 8px; border: 1px solid var(--border-main); border-radius: 4px; color: var(--text-secondary); background: var(--bg-elevated); font: 11px var(--font-mono); }
@media (max-width: 1250px) {
  .sharex-settings-block .settings-layout { grid-template-columns: 1fr; }
  .sharex-settings-block .settings-layout > div:last-child { border-left: 0; border-top: 1px solid var(--border-main); padding: 28px 0 0; }
}
@media (max-width: 680px) {
  #settingsForm, #settingsForm > .embed-settings-fields { grid-template-columns: 1fr; }
  .sharex-section-nav { gap: 20px; }
}

/* Uniform account panels */
.account-settings-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.account-settings-column, .account-settings-column:first-child { display: contents; }
.account-settings-layout .account-settings-section:not(.account-session-section),
.account-settings-column:first-child > .account-settings-section:nth-child(2) {
  display: flex; flex-direction: column; min-width: 0; min-height: 430px;
  margin: 0; padding: 26px 28px 28px;
  border: 1px solid var(--border-main); border-radius: 8px;
  background: var(--bg-card); box-shadow: none;
}
.account-settings-layout .account-settings-section form { display: flex; flex: 1; flex-direction: column; }
.account-settings-layout .account-settings-section form button { align-self: flex-start; margin-top: auto; }
.header-nav .sidebar-link { display: inline-flex; align-items: center; text-decoration: none; }
.account-auto-save { margin: auto 0 0; color: var(--text-tertiary); font-size: 11px; }
.account-settings-layout .account-session-section {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin: 6px 0 0; padding: 21px 2px 0;
  border: 0; border-top: 1px solid var(--border-main); border-radius: 0; background: transparent;
}
.account-session-section .account-section-desc { margin: 4px 0 0; }
@media (max-width: 1250px) {
  .account-settings-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-settings-column:last-child > .account-settings-section:first-child { grid-column: 1 / -1; }
  .account-settings-column:last-child > .account-settings-section:first-child .form-group { max-width: 560px; }
}
@media (max-width: 800px) {
  .account-settings-layout { grid-template-columns: 1fr; }
  .account-settings-layout .account-settings-section:not(.account-session-section),
  .account-settings-column:first-child > .account-settings-section:nth-child(2) { min-height: 0; padding: 22px; }
  .account-settings-column:last-child > .account-settings-section:first-child { grid-column: auto; }
}

/* Expanded English-first authentication layout */
.auth-wall-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:clamp(24px,5vw,80px);background:#f5f7fa}
.auth-layout{width:min(1200px,100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.92fr);align-items:center;gap:clamp(48px,8vw,120px);margin:auto}
.auth-intro{display:flex;min-height:480px;flex-direction:column;justify-content:center;gap:clamp(48px,7vh,96px);padding:20px 0}
.auth-intro-brand{display:inline-flex;align-items:center;gap:13px;width:max-content;color:#243247;font:800 25px Manrope,sans-serif;letter-spacing:-1px;text-decoration:none}
.auth-intro-brand img{width:54px;height:54px}
.auth-intro-brand>span>span{color:#4959bb}
.auth-intro-copy{max-width:510px;padding:30px 0}
.auth-intro-eyebrow{margin:0 0 18px;color:#596b95;font-size:11px;font-weight:700;letter-spacing:.12em}
.auth-intro-copy h1{margin:0 0 18px;color:#202b39;font:700 clamp(38px,4.5vw,58px)/1.08 Manrope,sans-serif;letter-spacing:-.055em}
.auth-intro-copy h1 span{color:#74819a}
.auth-intro-copy>p:last-child{max-width:440px;margin:0;color:#6b7788;font-size:15px;line-height:1.75}
.auth-card-clean{width:100%;max-width:560px;padding:clamp(32px,4vw,52px);border:1px solid #e0e5ec;border-radius:10px;background:#fff;box-shadow:0 18px 55px rgba(31,49,82,.07)}
.auth-form-heading{margin:0 0 26px}
.auth-form-heading h2{margin:0 0 6px;color:#202b39;font:700 24px Manrope,sans-serif;letter-spacing:-.03em}
.auth-form-heading p{margin:0;color:#778293;font-size:13px;line-height:1.5}
.auth-nav-pills{margin-bottom:24px}
.auth-card-clean .form-group{margin-bottom:19px}
.auth-card-clean .form-input{min-height:44px}
.auth-card-clean .form-desc{line-height:1.55}
.username-availability{margin:7px 0 0;font-size:11px;line-height:1.4}
.username-availability[hidden]{display:none}
.username-availability.is-available{color:#26805a}
.username-availability.is-taken,.username-availability.is-invalid{color:#b54752}
.username-availability.is-pending{color:#7b8798}
#authScreen .auth-intro-brand,
#authScreen .auth-intro-brand:link,
#authScreen .auth-intro-brand:visited,
#authScreen .auth-intro-brand:hover,
#authScreen .auth-intro-brand:focus,
#authScreen .auth-intro-brand:active{color:inherit;text-decoration:none!important}
#authScreen .auth-intro-brand:focus-visible{outline:2px solid #7586c8;outline-offset:6px;border-radius:3px}
html[data-theme="dark"] .auth-wall-page{background:#10131b}
html[data-theme="dark"] .auth-intro-brand{color:#f0f3f8}
html[data-theme="dark"] .auth-intro-brand>span>span{color:#aeb9f5}
html[data-theme="dark"] .auth-intro-eyebrow{color:#aeb9f5}
html[data-theme="dark"] .auth-intro-copy h1{color:#f0f3f8}
html[data-theme="dark"] .auth-intro-copy h1 span{color:#9ba7bd}
html[data-theme="dark"] .auth-intro-copy>p:last-child{color:#a2adbf}
html[data-theme="dark"] .auth-card-clean{background:#171b25;border-color:#30394a;box-shadow:none}
html[data-theme="dark"] .auth-form-heading h2{color:#f0f3f8}
html[data-theme="dark"] .auth-form-heading p{color:#a2adbf}
html[data-theme="dark"] .username-availability.is-available{color:#7fd2aa}
html[data-theme="dark"] .username-availability.is-taken,html[data-theme="dark"] .username-availability.is-invalid{color:#f09ba4}
html[data-theme="dark"] .auth-nav-pills{background:#202632;border-color:#30394a}
html[data-theme="dark"] .auth-pill-btn.active{background:#343e55;color:#f2f4f8;box-shadow:none}
@media(max-width:820px){.auth-wall-page{align-items:flex-start;padding:32px 20px}.auth-layout{width:min(540px,100%);grid-template-columns:1fr;gap:25px}.auth-intro{min-height:0;padding:0}.auth-intro-brand img{width:42px;height:42px}.auth-intro{gap:16px}.auth-intro-copy{padding:7px 0 0}.auth-intro-eyebrow{margin-bottom:11px}.auth-intro-copy h1{font-size:clamp(30px,8vw,42px);margin-bottom:10px}.auth-intro-copy>p:last-child{font-size:13px}.auth-card-clean{max-width:none;padding:clamp(25px,7vw,38px)}}