/*
 * NewsUploader UI
 * A quiet, editorial interface for a high-frequency publishing workflow.
 */

:root {
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-soft: #eff6ff;
    --action-color: #172033;
    --action-hover: #0f172a;
    --secondary-color: #f1f5f9;
    --accent-color: #0f766e;
    --danger-color: #dc2626;
    --danger-soft: #fef2f2;
    --success-color: #16a34a;
    --success-soft: #f0fdf4;
    --warning-color: #d97706;
    --warning-soft: #fffbeb;
    --studio-red: #e11d48;

    --border-width: 1px;
    --border-color-main: #e2e8f0;
    --border-strong: #cbd5e1;
    --bg-body: #f5f6f8;
    --bg-surface: #ffffff;
    --bg-surface-hover: #f8fafc;
    --bg-elevated: #ffffff;
    --text-main: #172033;
    --text-muted: #64748b;
    --text-subtle: #94a3b8;

    --shadow-hard: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
    --shadow-hard-hover: 0 2px 4px rgba(15, 23, 42, .05), 0 14px 34px rgba(15, 23, 42, .09);
    --shadow-hard-active: 0 1px 2px rgba(15, 23, 42, .08);
    --shadow-float: 0 16px 50px rgba(15, 23, 42, .16);
    --radius-sm: 9px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 26px;
    --nav-height: 72px;
}

body.dark-mode {
    --primary-color: #60a5fa;
    --primary-hover: #93c5fd;
    --primary-soft: rgba(59, 130, 246, .12);
    --action-color: #e5e7eb;
    --action-hover: #f8fafc;
    --secondary-color: #1e293b;
    --accent-color: #5eead4;
    --danger-color: #f87171;
    --danger-soft: rgba(127, 29, 29, .22);
    --success-color: #4ade80;
    --success-soft: rgba(20, 83, 45, .26);
    --warning-color: #fbbf24;
    --warning-soft: rgba(120, 53, 15, .24);
    --studio-red: #fb7185;
    --border-color-main: #2b3039;
    --border-strong: #3b424d;
    --bg-body: #101318;
    --bg-surface: #171b22;
    --bg-surface-hover: #1d222a;
    --bg-elevated: #1b2028;
    --text-main: #edf0f5;
    --text-muted: #9ca3af;
    --text-subtle: #737b88;
    --shadow-hard: 0 1px 2px rgba(0, 0, 0, .2), 0 10px 30px rgba(0, 0, 0, .15);
    --shadow-hard-hover: 0 2px 6px rgba(0, 0, 0, .2), 0 18px 40px rgba(0, 0, 0, .22);
    --shadow-float: 0 18px 60px rgba(0, 0, 0, .4);
}

html {
    background: var(--bg-body);
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: -.012em !important;
    background: var(--bg-body) !important;
    color: var(--text-main) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.dark-mode { background: var(--bg-body) !important; }

::selection {
    color: #fff;
    background: var(--primary-color);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; border: 0; }
::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--border-strong);
    background-clip: padding-box;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text-main) !important;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 700 !important;
    letter-spacing: -.035em !important;
}

a { color: var(--primary-color); }
.text-muted { color: var(--text-muted) !important; }
.text-main { color: var(--text-main) !important; }
.bg-light { background: var(--bg-surface-hover) !important; }

/* Navigation */
.app-navbar.navbar {
    min-height: var(--nav-height);
    margin: 0 !important;
    padding: .75rem 0 !important;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color-main) 82%, transparent) !important;
    background: color-mix(in srgb, var(--bg-surface) 88%, transparent) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .02) !important;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.app-navbar .container { max-width: 1320px; }

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin: 0;
    color: var(--text-main) !important;
    font-size: 1rem !important;
    font-weight: 740 !important;
    letter-spacing: -.025em !important;
    text-transform: none !important;
}

.app-brand:hover { opacity: .9; }

.brand-mark {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: #172033;
    box-shadow: none;
}

.brand-mark i { color: #fff !important; font-size: .9rem; }
body.dark-mode .brand-mark {
    color: #101318;
    background: #edf0f5;
}
body.dark-mode .brand-mark i { color: #101318 !important; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.brand-copy small {
    margin-top: .25rem;
    color: var(--text-muted);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.studio-status {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    gap: .45rem;
    margin-left: 1.15rem;
    padding: .35rem .55rem;
    border: 1px solid var(--border-color-main);
    border-radius: 7px;
    color: var(--text-muted);
    background: var(--bg-surface-hover);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .61rem;
    font-weight: 650;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
}

.studio-live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--studio-red);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--studio-red) 12%, transparent);
}

.studio-status-code {
    padding-left: .45rem;
    border-left: 1px solid var(--border-color-main);
    color: var(--text-subtle);
}

.navbar-toggler {
    width: 42px;
    height: 42px;
    padding: 0 !important;
    border: 1px solid var(--border-color-main) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: var(--text-main) !important;
    background: var(--bg-surface) !important;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 4px var(--primary-soft) !important;
}

.desktop-nav {
    align-items: center;
    gap: .2rem !important;
}

.app-navbar .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .66rem .82rem !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: var(--text-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    letter-spacing: -.01em !important;
    text-transform: none !important;
    transform: none !important;
}

.app-navbar .nav-link:hover {
    color: var(--text-main) !important;
    background: var(--bg-surface-hover) !important;
}

.app-navbar .nav-link.active {
    color: var(--primary-color) !important;
    background: var(--primary-soft) !important;
}

.nav-create-btn {
    min-height: 42px;
    margin-left: .65rem !important;
    padding-inline: 1rem !important;
}

/* App content */
.app-main.container {
    width: min(100% - 2rem, 1280px);
    max-width: 1280px;
    margin-top: 0 !important;
    padding-top: 2.35rem;
    padding-bottom: 7rem !important;
}

.page-header-block {
    position: relative;
    isolation: isolate;
    min-height: 144px;
    margin-bottom: 1.75rem !important;
    padding: clamp(1.5rem, 3vw, 2.25rem) !important;
    overflow: hidden;
    border: 1px solid var(--border-color-main) !important;
    border-top: 2px solid var(--studio-red) !important;
    border-radius: var(--radius-xl) !important;
    color: var(--text-main) !important;
    background: var(--bg-surface) !important;
    box-shadow: var(--shadow-hard) !important;
}

.page-header-block::before { display: none; }

.studio-eyebrow {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .72rem;
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .65rem;
    font-weight: 650;
    letter-spacing: .075em;
    line-height: 1.2;
    text-transform: uppercase;
}

.studio-eyebrow::before {
    width: 18px;
    height: 2px;
    flex: 0 0 18px;
    background: var(--studio-red);
    content: "";
}

.studio-eyebrow-code {
    color: var(--text-subtle);
}

.page-header-block h1 {
    margin: 0 0 .55rem !important;
    color: var(--text-main) !important;
    font-size: clamp(1.65rem, 3vw, 2.35rem) !important;
    font-weight: 750 !important;
    letter-spacing: -.05em !important;
    line-height: 1.12;
    text-transform: none !important;
}

.page-header-block h1 i {
    margin-right: .65rem !important;
    color: var(--primary-color);
    font-size: .78em;
}

.page-header-block .text-muted {
    max-width: 650px;
    margin: 0 !important;
    color: var(--text-muted) !important;
    font-size: .98rem !important;
    font-weight: 450 !important;
    letter-spacing: -.01em !important;
    line-height: 1.55;
    text-transform: none !important;
}

/* Surfaces */
.card {
    margin-bottom: 1.35rem !important;
    overflow: visible;
    border: 1px solid var(--border-color-main) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--bg-surface) !important;
    box-shadow: var(--shadow-hard) !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

.card-header {
    min-height: 62px;
    padding: 1.12rem 1.35rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-color-main) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    color: var(--text-main) !important;
    background: transparent !important;
    font-size: .98rem !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
    text-transform: none !important;
}

.card-header i { color: var(--primary-color); }
.card-body { color: var(--text-main); }

/* Buttons */
.btn {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    padding: .63rem 1rem !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: .82rem !important;
    font-weight: 650 !important;
    letter-spacing: -.005em !important;
    line-height: 1.2;
    text-transform: none !important;
    transform: none !important;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .09) !important;
}

.btn:active { transform: translateY(0) !important; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--primary-soft) !important; }

.btn-primary {
    border-color: var(--action-color) !important;
    color: #fff !important;
    background: var(--action-color) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    border-color: var(--action-hover) !important;
    color: #fff !important;
    background: var(--action-hover) !important;
}

body.dark-mode .btn-primary,
body.dark-mode .btn-primary:hover { color: #101318 !important; }

.btn-secondary, .btn-dark {
    border-color: var(--border-color-main) !important;
    color: var(--text-main) !important;
    background: var(--secondary-color) !important;
}

.btn-outline-primary, .btn-outline-light, .btn-outline-warning {
    border-color: var(--border-strong) !important;
    color: var(--text-main) !important;
    background: var(--bg-surface) !important;
}

.btn-outline-primary:hover, .btn-outline-light:hover, .btn-outline-warning:hover {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    background: var(--primary-soft) !important;
}

.btn-outline-danger {
    border-color: color-mix(in srgb, var(--danger-color) 28%, var(--border-color-main)) !important;
    color: var(--danger-color) !important;
    background: var(--bg-surface) !important;
}

.btn-outline-danger:hover, .btn-danger {
    border-color: var(--danger-color) !important;
    color: #fff !important;
    background: var(--danger-color) !important;
}

.btn-success {
    border-color: var(--success-color) !important;
    color: #fff !important;
    background: var(--success-color) !important;
}

.btn-warning {
    border-color: var(--warning-color) !important;
    color: #fff !important;
    background: var(--warning-color) !important;
}

/* Forms */
.form-label {
    margin-bottom: .48rem !important;
    color: var(--text-main) !important;
    font-size: .8rem !important;
    font-weight: 650 !important;
    letter-spacing: -.005em !important;
    text-transform: none !important;
}

.form-control, .form-select, .input-group-text {
    min-height: 46px;
    padding: .67rem .85rem !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 11px !important;
    color: var(--text-main) !important;
    background: var(--bg-surface) !important;
    box-shadow: 0 1px 1px rgba(15, 23, 42, .02) !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: .9rem;
    font-weight: 450 !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.form-control::placeholder { color: var(--text-subtle) !important; opacity: 1; }

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color) !important;
    color: var(--text-main) !important;
    background: var(--bg-surface) !important;
    box-shadow: 0 0 0 4px var(--primary-soft) !important;
    outline: none;
    transform: none !important;
}

.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group-text {
    min-width: 44px;
    justify-content: center;
    border-right: 0 !important;
    color: var(--text-muted) !important;
    background: var(--bg-surface-hover) !important;
    font-weight: 600 !important;
}

.form-text {
    color: var(--text-muted) !important;
    font-size: .76rem !important;
    font-weight: 450 !important;
    line-height: 1.5;
}

.form-check-input {
    border: 1px solid var(--border-strong) !important;
    background-color: var(--bg-surface);
    box-shadow: none !important;
}

.form-check-input:checked {
    border-color: var(--primary-color) !important;
    background-color: var(--primary-color) !important;
}

.form-switch .form-check-input {
    border-radius: 999px !important;
}

.required-field.is-invalid {
    border-color: var(--danger-color) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger-color) 12%, transparent) !important;
}

.required-field.is-valid {
    border-color: color-mix(in srgb, var(--success-color) 60%, var(--border-strong)) !important;
}

/* Tables */
.table-responsive {
    overflow: hidden;
    border: 1px solid var(--border-color-main);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-hard) !important;
}

.table-neobrutalism,
.table {
    width: 100%;
    margin: 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    color: var(--text-main) !important;
    background: var(--bg-surface) !important;
}

.table-neobrutalism th,
.table > thead > tr > th {
    padding: .9rem 1.15rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-color-main) !important;
    color: var(--text-muted) !important;
    background: var(--bg-surface-hover) !important;
    font-size: .69rem !important;
    font-weight: 700 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
    white-space: nowrap;
}

.table-neobrutalism td,
.table > tbody > tr > td {
    padding: 1.05rem 1.15rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-color-main) !important;
    color: var(--text-main) !important;
    background: var(--bg-surface) !important;
    font-size: .86rem;
    font-weight: 450 !important;
    vertical-align: middle;
}

.table-neobrutalism tr:last-child td,
.table > tbody > tr:last-child > td { border-bottom: 0 !important; }

.table > tbody > tr:hover > td,
.table-neobrutalism tbody tr:hover td { background: var(--bg-surface-hover) !important; }

.table-dark { --bs-table-bg: transparent; --bs-table-color: var(--text-main); }

.record-title {
    display: block;
    max-width: 460px;
    color: var(--text-main);
    font-weight: 650;
    line-height: 1.45;
}

.record-meta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--text-muted);
    font-size: .78rem;
    white-space: nowrap;
}

.table-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
    flex-wrap: wrap;
}

.portal-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .8rem;
}

.portal-avatar {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--primary-color) 18%, var(--border-color-main));
    border-radius: 11px;
    color: var(--primary-color);
    background: var(--primary-soft);
}

.portal-identity strong {
    display: block;
    overflow: hidden;
    color: var(--text-main);
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-url {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: .4rem;
    overflow: hidden;
    color: var(--text-muted) !important;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-url:hover { color: var(--primary-color) !important; }

.empty-state {
    padding: 3.5rem 1.25rem !important;
    text-align: center;
}

.empty-state-icon {
    display: grid;
    width: 54px;
    height: 54px;
    margin: 0 auto 1rem;
    place-items: center;
    border-radius: 16px;
    color: var(--primary-color);
    background: var(--primary-soft);
    font-size: 1.15rem;
}

.empty-state p {
    margin: 0;
    color: var(--text-muted);
    font-weight: 450;
}

.result-link-group { min-width: 300px; }
.result-link-group .form-control { font-size: .76rem; }

.section-heading {
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

/* Feedback */
.alert {
    border: 1px solid var(--border-color-main) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-hard) !important;
    color: var(--text-main) !important;
    background: var(--bg-surface) !important;
}

.alert-success {
    border-color: color-mix(in srgb, var(--success-color) 25%, var(--border-color-main)) !important;
    background: var(--success-soft) !important;
}

.alert-danger {
    border-color: color-mix(in srgb, var(--danger-color) 25%, var(--border-color-main)) !important;
    background: var(--danger-soft) !important;
}

.badge, .badge-status, .badge-brutal {
    display: inline-flex !important;
    align-items: center;
    gap: .25rem;
    padding: .38rem .6rem !important;
    border: 1px solid var(--border-color-main) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-size: .69rem !important;
    font-weight: 650 !important;
    letter-spacing: .015em !important;
    text-transform: none !important;
}

.bg-brutal-success, .badge.bg-success {
    border-color: color-mix(in srgb, var(--success-color) 24%, transparent) !important;
    color: var(--success-color) !important;
    background: var(--success-soft) !important;
}

.bg-brutal-danger, .badge.bg-danger {
    border-color: color-mix(in srgb, var(--danger-color) 24%, transparent) !important;
    color: var(--danger-color) !important;
    background: var(--danger-soft) !important;
}

.badge.bg-secondary {
    color: var(--text-muted) !important;
    background: var(--secondary-color) !important;
}

/* Editor & enhanced selects */
.ql-toolbar {
    padding: .7rem !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 12px 12px 0 0 !important;
    background: var(--bg-surface-hover) !important;
}

.ql-container {
    border: 1px solid var(--border-strong) !important;
    border-top: 0 !important;
    border-radius: 0 0 12px 12px !important;
    color: var(--text-main) !important;
    background: var(--bg-surface) !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: .98rem !important;
}

.ql-editor {
    min-height: 360px !important;
    padding: 1.35rem !important;
    color: var(--text-main) !important;
    line-height: 1.75 !important;
}

body.dark-mode .ql-stroke { stroke: var(--text-main) !important; }
body.dark-mode .ql-fill { fill: var(--text-main) !important; }
body.dark-mode .ql-picker-label { color: var(--text-main) !important; }
body.dark-mode .ql-picker-options {
    border-color: var(--border-color-main) !important;
    color: var(--text-main) !important;
    background: var(--bg-surface) !important;
}

.choices { margin-bottom: 0 !important; }
.choices.is-open { z-index: 1050 !important; }
.choices[data-type*="select-multiple"] .choices__inner {
    min-height: 46px !important;
    padding: .35rem .55rem !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 11px !important;
    color: var(--text-main) !important;
    background: var(--bg-surface) !important;
}

.choices.is-focused .choices__inner,
.choices.is-focused.is-open .choices__inner {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px var(--primary-soft) !important;
    transform: none !important;
}

.choices__list--multiple .choices__item {
    margin: 2px 4px 2px 0 !important;
    padding: .36rem .55rem !important;
    border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent) !important;
    border-radius: 7px !important;
    color: var(--primary-color) !important;
    background: var(--primary-soft) !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

.choices__list--dropdown {
    margin-top: 6px !important;
    overflow: hidden;
    border: 1px solid var(--border-color-main) !important;
    border-radius: 12px !important;
    color: var(--text-main) !important;
    background: var(--bg-surface) !important;
    box-shadow: var(--shadow-float) !important;
}

.choices__list--dropdown .choices__item {
    padding: .7rem .85rem !important;
    border: 0 !important;
    color: var(--text-main) !important;
    font-size: .82rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    color: var(--primary-color) !important;
    background: var(--primary-soft) !important;
}

.choices__input {
    color: var(--text-main) !important;
    background: transparent !important;
    font-family: "Inter", system-ui, sans-serif !important;
}

/* Upload & distribution */
.image-upload-section {
    padding: 1.35rem !important;
    border: 1px dashed var(--border-strong) !important;
    border-radius: var(--radius-md) !important;
    background: var(--bg-surface-hover) !important;
}

.image-upload-section:hover {
    border-color: var(--primary-color) !important;
    box-shadow: none !important;
    transform: none !important;
}

.img-preview {
    max-height: 260px !important;
    margin-top: 1rem !important;
    border: 1px solid var(--border-color-main) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
}

#multiImageMessage {
    padding: 2rem !important;
    border: 1px dashed var(--border-strong) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-main) !important;
    background: var(--bg-surface-hover) !important;
}

#multiImageMessage h4 {
    color: var(--text-main) !important;
    font-size: 1rem;
    text-transform: none !important;
}

#multiImageMessage i { color: var(--primary-color); }

.portal-card {
    overflow: hidden !important;
}

.portal-card:hover { border-color: var(--border-strong) !important; }

.portal-card.border-primary {
    border-color: color-mix(in srgb, var(--primary-color) 55%, var(--border-color-main)) !important;
    box-shadow: 0 0 0 3px var(--primary-soft), var(--shadow-hard) !important;
    transform: none !important;
}

.portal-card .portal-checkbox {
    width: 1.35rem !important;
    height: 1.35rem !important;
    margin-left: 0 !important;
    border-radius: 6px !important;
}

.portal-name-text {
    font-size: 1rem !important;
    letter-spacing: -.02em !important;
    text-transform: none !important;
}

.portal-form-body {
    border-top: 0;
    background: color-mix(in srgb, var(--bg-surface-hover) 50%, transparent);
}

.card.border-0.shadow-none.bg-transparent {
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.card.border-0.shadow-none.bg-transparent > .card-header {
    min-height: auto;
    margin-bottom: 1rem !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.card.border-0.shadow-none.bg-transparent > .card-header h2 {
    font-size: 1.3rem;
    text-transform: none !important;
}

#selectAllPortals {
    width: 2.5rem !important;
    height: 1.35rem !important;
}

#selectAllPortals + label,
#sameImage + label {
    color: var(--text-main) !important;
    font-size: .78rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.sticky-submit-container {
    position: sticky !important;
    z-index: 1040 !important;
    bottom: 1.25rem !important;
    width: fit-content;
    max-width: calc(100vw - 2rem);
    margin: 2rem auto 0 !important;
    padding: .55rem;
    border: 1px solid color-mix(in srgb, var(--border-color-main) 78%, transparent);
    border-radius: 17px;
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent) !important;
    box-shadow: var(--shadow-float);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.sticky-submit-container .btn {
    min-height: 48px !important;
    padding: .75rem 1.3rem !important;
    font-size: .84rem !important;
}

#aiGenerateBtn {
    min-height: 50px;
    border: 1px solid var(--border-strong) !important;
    border-radius: 12px !important;
    color: var(--text-main) !important;
    background: var(--bg-surface) !important;
    box-shadow: none !important;
    font-size: .86rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

#aiGenerateBtn i { color: var(--primary-color); }

#aiGenerateBtn:hover {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    background: var(--primary-soft) !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
}

#floating-alerts {
    top: calc(var(--nav-height) + 1rem) !important;
    right: 1rem !important;
    width: min(360px, calc(100vw - 2rem));
    max-width: none !important;
    gap: .7rem !important;
}

.floating-alert {
    padding: 1rem !important;
    border: 1px solid var(--border-color-main) !important;
    border-radius: var(--radius-md) !important;
    background: var(--bg-surface) !important;
    box-shadow: var(--shadow-float) !important;
}

.floating-alert h6 {
    font-size: .8rem !important;
    letter-spacing: -.01em !important;
    text-transform: none !important;
}

#fullScreenLoader {
    background: rgba(5, 10, 22, .86) !important;
    backdrop-filter: blur(12px) !important;
}

.brutal-spinner {
    width: 54px !important;
    height: 54px !important;
    border: 4px solid rgba(255,255,255,.18) !important;
    border-top-color: #60a5fa !important;
}

/* AI settings */
.ai-settings-card { max-width: 820px !important; }

.provider-option {
    padding: 1rem !important;
    border: 1px solid var(--border-color-main) !important;
    border-radius: 13px !important;
    color: var(--text-main) !important;
    background: var(--bg-surface) !important;
}

.provider-option:hover {
    border-color: var(--border-strong) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .06) !important;
    transform: translateY(-1px) !important;
}

.provider-option.active {
    border-color: var(--primary-color) !important;
    color: var(--text-main) !important;
    background: var(--primary-soft) !important;
    box-shadow: 0 0 0 3px var(--primary-soft) !important;
    transform: none !important;
}

.provider-option .provider-icon {
    width: 42px !important;
    height: 42px !important;
    border: 0 !important;
    border-radius: 11px !important;
    color: var(--primary-color);
    background: var(--primary-soft) !important;
}

.provider-option.active .provider-icon {
    color: #fff;
    background: var(--primary-color) !important;
}

body.dark-mode .provider-option.active .provider-icon { color: #0d1422; }

.provider-option .provider-info h6 {
    font-size: .86rem !important;
    letter-spacing: -.01em !important;
    text-transform: none !important;
}

.provider-option .provider-info small {
    color: var(--text-muted);
    font-weight: 450 !important;
}

.test-result {
    border: 1px solid var(--border-color-main) !important;
    border-radius: 11px !important;
    font-size: .82rem;
    font-weight: 550 !important;
}

/* Modal */
.modal-content {
    overflow: hidden;
    border: 1px solid var(--border-color-main) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--text-main) !important;
    background: var(--bg-elevated) !important;
    box-shadow: var(--shadow-float) !important;
}

.modal-header, .modal-footer { border-color: var(--border-color-main) !important; }
.modal-title { color: var(--text-main) !important; }
.list-group-item {
    border-color: var(--border-color-main) !important;
    color: var(--text-main) !important;
    background: transparent !important;
}

body:not(.dark-mode) .btn-close-white { filter: none; }

/* Theme and mobile navigation */
.theme-toggle-btn {
    position: static !important;
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border: 1px solid var(--border-color-main) !important;
    border-radius: 12px !important;
    color: var(--text-muted) !important;
    background: var(--bg-surface-hover) !important;
    box-shadow: none !important;
    font-size: .9rem !important;
}

.mobile-theme-toggle { display: none; }

.mobile-bottom-nav {
    display: none;
}

/* Auth */
.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
    background: var(--bg-body);
}

.auth-showcase {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: clamp(2.2rem, 5vw, 5rem);
    color: #fff;
    background: #171a20;
    border-right: 1px solid rgba(255,255,255,.08);
}

.auth-showcase::before,
.auth-showcase::after { display: none; }

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: #fff;
    font-weight: 700;
}

.auth-copy {
    max-width: 600px;
    padding-left: 1.5rem;
    border-left: 2px solid #e11d48;
}
.auth-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.2rem;
    color: #9ca3af;
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.auth-copy h1 {
    max-width: 560px;
    margin-bottom: 1.2rem;
    color: #fff !important;
    font-size: clamp(2.6rem, 4.6vw, 4.8rem);
    font-weight: 680 !important;
    letter-spacing: -.065em !important;
    line-height: .98;
}

.auth-copy p {
    max-width: 520px;
    margin: 0;
    color: #aeb8cc;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
}

.auth-feature-row { display: none; }

.auth-studio-foot {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: #7f8794;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .66rem;
    letter-spacing: .065em;
    text-transform: uppercase;
}

.auth-panel {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 2rem;
    background: var(--bg-surface);
}

.auth-card { width: min(100%, 430px); }
.auth-card h2 {
    margin-bottom: .5rem;
    font-size: 1.75rem;
}
.auth-card > p {
    margin-bottom: 2rem;
    color: var(--text-muted);
}

.auth-card .form-control { min-height: 50px; }
.auth-submit { min-height: 50px; width: 100%; }

@media (max-width: 991.98px) {
    :root { --nav-height: 66px; }

    .app-navbar {
        min-height: var(--nav-height);
        padding-block: .55rem !important;
    }

    .app-navbar .navbar-collapse {
        margin-top: .75rem;
        padding: .75rem;
        border: 1px solid var(--border-color-main);
        border-radius: var(--radius-md);
        background: var(--bg-surface);
        box-shadow: var(--shadow-float);
    }

    .desktop-nav { align-items: stretch; }
    .studio-status { display: none; }
    .app-navbar .nav-link { width: 100%; padding: .78rem .8rem !important; }
    .nav-create-btn { width: 100%; margin: .45rem 0 0 !important; }

    .auth-shell { grid-template-columns: 1fr; }
    .auth-showcase {
        min-height: 36vh;
        padding: 2rem;
    }
    .auth-showcase .auth-copy h1 { font-size: clamp(2rem, 8vw, 3.3rem); }
    .auth-showcase .auth-feature-row { display: none; }
    .auth-panel { min-height: 64vh; padding: 2.5rem 1.25rem; }
}

@media (max-width: 767.98px) {
    body { font-size: 14px; }
    body.has-mobile-nav { padding-bottom: 74px; }

    .app-main.container {
        width: min(100% - 1.25rem, 1280px);
        padding-top: 1rem;
        padding-bottom: 4.5rem !important;
    }

    .app-navbar .navbar-toggler,
    .app-navbar .navbar-collapse { display: none !important; }

    .mobile-theme-toggle {
        display: inline-flex;
        margin-left: auto;
    }

    .page-header-block {
        min-height: 0;
        align-items: flex-start !important;
        gap: 1rem !important;
        margin-bottom: 1rem !important;
        padding: 1.25rem !important;
        border-radius: 18px !important;
    }

    .page-header-block::before {
        top: -75px;
        right: -85px;
    }

    .page-header-block h1 {
        font-size: 1.55rem !important;
    }

    .studio-eyebrow {
        margin-bottom: .6rem;
        font-size: .59rem;
    }

    .page-header-block .text-muted {
        font-size: .84rem !important;
    }

    .page-header-block > .btn {
        width: 100%;
    }

    .card {
        margin-bottom: .9rem !important;
        border-radius: 16px !important;
    }

    .card-header {
        min-height: 56px;
        padding: .95rem 1rem !important;
        border-radius: 16px 16px 0 0 !important;
        font-size: .9rem !important;
    }

    .card-body.p-4,
    .card-body.p-md-5,
    .card-body.p-4.p-md-5,
    .portal-form-body {
        padding: 1rem !important;
    }

    .row.mb-5 { margin-bottom: 1.25rem !important; }
    .mb-5 { margin-bottom: 1.5rem !important; }

    .form-control, .form-select, .input-group-text {
        min-height: 45px;
        font-size: 16px !important;
    }

    textarea.form-control { font-size: 16px !important; }

    .ql-editor {
        min-height: 300px !important;
        padding: 1rem !important;
        font-size: 16px;
    }

    .ql-toolbar {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        gap: .15rem;
        -webkit-overflow-scrolling: touch;
    }

    .ql-toolbar .ql-formats {
        display: inline-flex;
        flex: 0 0 auto;
        margin-right: .25rem !important;
    }

    .portal-card .card-header { padding: 1rem !important; }
    .portal-card .portal-checkbox { margin-right: .75rem !important; }
    .badge-status-portal { display: none !important; }

    .form-label.d-flex {
        align-items: flex-start !important;
        gap: .5rem;
        flex-direction: column;
    }

    .suggest-title-btn { align-self: stretch; }

    .relevant-post-input.input-group {
        display: grid;
        grid-template-columns: 1fr 72px 44px;
        gap: .5rem;
    }

    .relevant-post-input.input-group input:nth-child(1),
    .relevant-post-input.input-group input:nth-child(2) {
        grid-column: 1 / -1;
        border-radius: 10px !important;
    }

    .relevant-post-input.input-group input:nth-child(3) {
        max-width: none !important;
        grid-column: 1 / 3;
        border-radius: 10px !important;
    }

    .relevant-post-input.input-group .btn {
        grid-column: 3;
        min-width: 44px;
        padding: 0 !important;
    }

    .sticky-submit-container {
        position: fixed !important;
        right: .625rem;
        bottom: 5.25rem !important;
        left: .625rem;
        display: grid !important;
        width: auto;
        grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
        gap: .45rem !important;
        padding: .45rem;
        border-radius: 15px;
        opacity: 0;
        pointer-events: none !important;
        transform: translateY(14px);
        transition: opacity .2s ease, transform .2s ease !important;
    }

    body.show-editor-actions .sticky-submit-container {
        opacity: 1;
        pointer-events: auto !important;
        transform: translateY(0);
    }

    .sticky-submit-container .btn {
        min-width: 0;
        padding: .7rem .55rem !important;
        pointer-events: auto;
        white-space: nowrap;
    }

    .sticky-submit-container .btn i { margin-right: .38rem !important; }

    .table-responsive {
        overflow-x: auto;
        border-radius: 16px;
        -webkit-overflow-scrolling: touch;
    }

    .table-neobrutalism,
    .table { min-width: 720px; }

    .responsive-data-table {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none !important;
    }

    .responsive-data-table .table,
    .responsive-data-table .table-neobrutalism {
        min-width: 0 !important;
        border-collapse: separate !important;
        background: transparent !important;
    }

    .responsive-data-table thead { display: none; }
    .responsive-data-table tbody {
        display: grid;
        gap: .75rem;
    }

    .responsive-data-table tbody tr {
        display: grid;
        overflow: hidden;
        border: 1px solid var(--border-color-main);
        border-radius: 16px;
        background: var(--bg-surface);
        box-shadow: var(--shadow-hard);
    }

    .responsive-data-table tbody td {
        display: grid;
        min-height: 48px;
        grid-template-columns: 92px minmax(0, 1fr);
        align-items: center;
        gap: .8rem;
        padding: .72rem 1rem !important;
        border-bottom: 1px solid var(--border-color-main) !important;
        background: var(--bg-surface) !important;
        text-align: left !important;
    }

    .responsive-data-table tbody td::before {
        color: var(--text-muted);
        content: attr(data-label);
        font-size: .65rem;
        font-weight: 700;
        letter-spacing: .045em;
        text-transform: uppercase;
    }

    .responsive-data-table tbody td:last-child { border-bottom: 0 !important; }
    .responsive-data-table .table-actions { justify-content: flex-start; }
    .responsive-data-table .empty-state {
        display: block;
        padding: 2.5rem 1rem !important;
    }
    .responsive-data-table .empty-state::before { display: none; }
    .responsive-data-table .result-link-group { min-width: 0; width: 100%; }
    .responsive-data-table .result-link-group .form-control { min-width: 0; }

    .mobile-bottom-nav {
        position: fixed;
        z-index: 1055;
        right: .65rem;
        bottom: max(.65rem, env(safe-area-inset-bottom));
        left: .65rem;
        display: grid;
        grid-template-columns: repeat(4, 1fr) 1.15fr;
        gap: .15rem;
        min-height: 62px;
        padding: .38rem;
        border: 1px solid color-mix(in srgb, var(--border-color-main) 82%, transparent);
        border-radius: 19px;
        background: color-mix(in srgb, var(--bg-surface) 93%, transparent);
        box-shadow: var(--shadow-float);
        backdrop-filter: blur(18px) saturate(150%);
        -webkit-backdrop-filter: blur(18px) saturate(150%);
    }

    .mobile-nav-link {
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: center;
        gap: .22rem;
        flex-direction: column;
        border-radius: 13px;
        color: var(--text-muted);
        font-size: .59rem;
        font-weight: 600;
        line-height: 1;
        text-decoration: none;
    }

    .mobile-nav-link i { font-size: .9rem; }
    .mobile-nav-link.active {
        color: var(--primary-color);
        background: var(--primary-soft);
    }

    .mobile-nav-link.mobile-primary {
        color: #fff;
        background: var(--action-color);
    }

    body.dark-mode .mobile-nav-link.mobile-primary { color: #101318; }

    .theme-toggle-btn {
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    #floating-alerts {
        top: calc(var(--nav-height) + .6rem) !important;
        right: .65rem !important;
        width: calc(100vw - 1.3rem);
    }

    .auth-showcase {
        min-height: 31vh;
        padding: 1.5rem;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .auth-copy {
        padding-left: 1rem;
    }

    .auth-copy h1 { margin-bottom: .8rem; }
    .auth-copy p { font-size: .9rem; }
    .auth-panel {
        min-height: 69vh;
        padding: 2rem 1.25rem;
        align-items: start;
    }
}

@media (max-width: 420px) {
    .brand-copy small { display: none; }
    .app-main.container { width: min(100% - .9rem, 1280px); }
    .mobile-bottom-nav { right: .45rem; bottom: max(.45rem, env(safe-area-inset-bottom)); left: .45rem; }
    .mobile-nav-link span { font-size: .55rem; }
    .sticky-submit-container { right: .45rem; left: .45rem; width: auto; }
    .sticky-submit-container .btn { font-size: .72rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}