/* Modern Perde: the supplied curtain mark, red accents and neutral surfaces. */
:root {
  --control-bg: #f5f5f4;
  --control-panel: #ffffff;
  --control-panel-2: #faf9f8;
  --control-panel-3: #f7eeee;
  --control-text: #252529;
  --control-muted: #68686f;
  --control-faint: #77777e;
  --control-line: #e7e4e3;
  --control-primary: #c02026;
  --control-primary-strong: #a41920;
  --control-primary-soft: rgba(192, 32, 38, .08);
  --control-brand: #c02026;
  --admin-focus: #c02026;
  --admin-focus-soft: rgba(192, 32, 38, .12);
  --control-shadow: 0 3px 16px rgba(25, 25, 28, .045);
  --control-shadow-lg: 0 16px 45px rgba(25, 25, 28, .10);
  --control-radius: 16px;
}

html[data-admin-theme="dark"] {
  --control-bg: #141416;
  --control-panel: #1d1d21;
  --control-panel-2: #242429;
  --control-panel-3: #302328;
  --control-text: #f1eff0;
  --control-muted: #b6b1b5;
  --control-faint: #a39da1;
  --control-line: #37343a;
  --control-primary: #f06b71;
  --control-primary-strong: #c02026;
  --control-primary-soft: rgba(240, 107, 113, .12);
  --control-brand: #f06b71;
  --control-shadow: 0 3px 16px rgba(0, 0, 0, .14);
  --control-shadow-lg: 0 16px 45px rgba(0, 0, 0, .3);
}

html[data-admin-theme] .sidebar {
  background: #202024;
  border-inline-end: 1px solid #333338;
  box-shadow: none;
}
html[data-admin-theme] .side-brand { border-color: #37373c; }
.side-brand img, .brand-badge img { object-fit: contain; }
html[data-admin-theme] .side-brand img {
  width: 44px;
  height: 44px;
  padding: 5px;
  border-radius: 12px;
  background: #fff;
  filter: none;
}
html[data-admin-theme] .side-brand b,
html[data-admin-theme] .side-profile b,
html[data-admin-theme] .side-current b { color: #fafafa; }
html[data-admin-theme] .side-brand span,
html[data-admin-theme] .side-workspace span,
html[data-admin-theme] .side-profile span,
html[data-admin-theme] .side-tools input,
html[data-admin-theme] .side-tools span,
html[data-admin-theme] .side-current small { color: #b8b8c0; }
html[data-admin-theme] .side-tools input::placeholder { color: #aaaab3; }
html[data-admin-theme] .side-workspace,
html[data-admin-theme] .side-tools label { background: #29292e; border-color: #3a3a40; }
html[data-admin-theme] .side-workspace b { color: #f6a4a8; }
html[data-admin-theme] .side-section-button { color: #aaaab3; }
html[data-admin-theme] .side-section-button:hover,
html[data-admin-theme] .nav-btn:hover { background: #303036; color: #fff; }
html[data-admin-theme] .nav-btn { color: #d1d1d7; min-height: 43px; border-radius: 10px; }
html[data-admin-theme] .nav-btn.active {
  background: #c02026;
  color: #fff;
  box-shadow: 0 4px 12px rgba(192, 32, 38, .18);
}
html[data-admin-theme] .nav-btn.active::before { background: #fff; }
html[data-admin-theme] .nav-btn.active .nav-ico { background: rgba(255,255,255,.12); color: white; }
html[data-admin-theme] .nav-count { background: #35353b; color: #d4d4db; border-color: #45454c; }
html[data-admin-theme] .nav-btn.active .nav-count { background: rgba(0,0,0,.16); color: white; border-color: transparent; }
html[data-admin-theme] .side-current { background: #342529; border-color: #5b3339; }
html[data-admin-theme] .side-current-icon { background: #493037; color: #ffb5b9; }
.side-current-dot { background: #f06b71; box-shadow: none; }
html[data-admin-theme] .side-collapse {
  background: #c02026 !important;
  border-color: #d14b50 !important;
  box-shadow: none;
}
html[data-admin-theme] .side-profile { border-color: #37373c; }
.side-profile .avatar { background: #493037; color: #ffc8cb; }

.main { min-width: 0; }
.topbar { padding: 20px 22px; border-radius: 16px; box-shadow: var(--control-shadow); }
.top-title { min-width: 0; }
.top-title h1 { font-size: clamp(22px, 2vw, 28px); line-height: 1.25; }
.top-title p { max-width: 65ch; line-height: 1.6; }
.top-actions { flex-wrap: wrap; gap: 8px; }
.connection-warning i { background: var(--control-gold) !important; }
.connection-danger i { background: var(--control-red) !important; }
.connection-checking i { background: var(--control-muted) !important; }
.btn, .theme-toggle { min-height: 42px; border-radius: 10px; }
.btn-primary { background: #c02026; color: #fff; box-shadow: 0 3px 10px rgba(192,32,38,.14); }
.btn-primary:hover { background: #a41920; }
.btn-gold { background: var(--control-primary-soft); border-color: var(--control-line); color: var(--control-primary); }

.dashboard-welcome {
  border-color: #393237;
  background: linear-gradient(115deg, #252529, #35272b);
  box-shadow: var(--control-shadow);
  padding: 26px;
  border-radius: 18px;
}
.dashboard-welcome::after {
  border-radius: 0;
  border: 0;
  inset: 0 0 0 auto;
  width: 28%;
  height: auto;
  background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.035) 18px 20px);
}
.dashboard-welcome h2 { font-size: clamp(23px, 2.6vw, 32px); letter-spacing: -.025em; }
.dashboard-welcome .btn-primary { background: #c02026; color: #fff; box-shadow: none; }
.dashboard-welcome .btn-primary:hover { background: #a41920; }
.stat-card { min-width: 0; box-shadow: none; }
.stat-card b { font-size: clamp(25px, 2.5vw, 34px); }
.card, .stat-card, .table-wrap, .media-card { border-radius: 16px; }
.table th { background: var(--control-panel-2); color: var(--control-muted); }
.table td { border-color: var(--control-line); }
.table tr:hover td { background: var(--control-primary-soft); }
.table-wrap { max-width: 100%; }
.input, .select, .textarea { border-radius: 10px; }
.input:focus, .select:focus, .textarea:focus {
  outline: 0;
  border-color: var(--control-primary);
  box-shadow: 0 0 0 3px var(--control-primary-soft);
}
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--control-primary);
  outline-offset: 3px;
}
.media-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.media-card { min-width: 0; }
html[data-admin-theme="dark"] .catalog-filter-tab.active { color: var(--control-text); }

.login-art {
  background: radial-gradient(ellipse at 10% 100%, rgba(192,32,38,.25), transparent 60%), #202024;
}
.login-art::before {
  background: repeating-linear-gradient(90deg, transparent 0 56px, rgba(255,255,255,.025) 56px 58px);
}
.login-art h1 { font-size: clamp(32px, 3.5vw, 52px); line-height: 1.12; letter-spacing: -.035em; max-width: 13ch; }
.login-art p { color: #c5c1c5; line-height: 1.8; }
.login-art .brand-badge img { background: white; border-radius: 14px; padding: 6px; }
.login-card { border-radius: 22px; box-shadow: var(--control-shadow-lg); }
.login-card::before { background: #c02026; }
.login-card h2 { letter-spacing: -.03em; }
.login-card .input { min-height: 48px; }
.login-submit { min-height: 48px; }

@media (max-width: 1100px) {
  .admin-shell, .admin-shell.sidebar-collapsed { grid-template-columns: minmax(0, 1fr); }
  .topbar { flex-wrap: wrap; gap: 16px; }
  .top-title { flex: 1 1 220px; }
  .top-actions { width: 100%; justify-content: flex-start; }
}
@media (max-width: 620px) {
  .topbar { display: flex; }
  .main { padding: 12px; }
  .topbar, .dashboard-welcome { padding: 18px; }
  .top-actions .btn { padding: 9px 11px; font-size: 12px; }
  .dashboard-welcome { align-items: flex-start; flex-direction: column; }
  .login-card-wrap { padding: 72px 16px 24px; }
  .login-card { padding: 24px; }
  .modal-backdrop { padding: 10px; }
  .modal { max-height: calc(100dvh - 20px); border-radius: 18px; }
  .modal-head, .modal-body { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}