/* ==========================================================================
   Admin CSS — handwritten.
   Структура:
   1. Design tokens (CSS vars)
   2. Reset + base
   3. Typography
   4. Colors
   5. Layout (display/flex/grid/space)
   6. Spacing (margin/padding)
   7. Sizing (w/h)
   8. Borders/radius
   9. Effects (transition/opacity/hover/animate)
  10. Positioning
  11. Pseudo + group
  12. Responsive
  13. Core components (sidebar, card, btn, form, badge, flash, modal, tabs)
  14. Page components (dashboard, blog, gallery, menu, modules, tours, works, ...)
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  --bg:        #0A0A0C;
  --bg-2:      #0F0F14;
  --bg-3:      #16161E;
  --bg-4:      #1C1C28;
  --violet:        #7B2FFF;
  --violet-dim:    #5A1FCC;
  --violet-light:  #9B5FFF;
  --neon:      #39FF8F;
  --neon-dim:  #1FCC66;
  --danger:    #FF4757;
  --warning:   #FFBE0B;
  --text:       #ffffff;
  --text-muted: #6B7280;
  --text-dim:   #9CA3AF;
  --fg-rgb:     255,255,255;
  color-scheme: dark;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Theme toggle — shared, works in both themes via tokens */
.theme-toggle { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px; background: rgba(var(--fg-rgb),0.04); border: 1px solid rgba(var(--fg-rgb),0.10); color: var(--text-muted); font-size:12px; cursor:pointer; transition: all 0.15s; }
.theme-toggle:hover { color: var(--text); border-color: rgba(123,47,255,0.35); }
.theme-toggle i { width:14px; height:14px; }

/* ---------- 2. Reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
input, select, textarea, button { font-family: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; color: inherit; padding: 0; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ---------- 3. Typography ---------- */
.font-sans    { font-family: var(--font-sans); }
.font-display { font-family: var(--font-display); }
.font-mono    { font-family: var(--font-mono); }
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.text-\[9px\]  { font-size: 9px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-xs   { font-size: 12px; line-height: 1.4; }
.text-sm   { font-size: 13px; line-height: 1.45; }
.text-base { font-size: 14px; line-height: 1.5; }
.text-lg   { font-size: 17px; line-height: 1.4; }
.text-xl   { font-size: 20px; line-height: 1.35; }
.text-2xl  { font-size: 24px; line-height: 1.25; }
.uppercase { text-transform: uppercase; }
.tracking-wide   { letter-spacing: 0.025em; }
.tracking-wider  { letter-spacing: 0.05em; }
.text-center { text-align: center; }
.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.leading-relaxed    { line-height: 1.625; }
.whitespace-nowrap   { white-space: nowrap; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- 4. Colors ---------- */
.text-white        { color: #fff; }
.text-violet       { color: var(--violet); }
.text-violet-light { color: var(--violet-light); }
.text-neon         { color: var(--neon); }
.text-danger       { color: var(--danger); }
.text-warning      { color: var(--warning); }
.text-text-muted   { color: var(--text-muted); }
.text-text-dim     { color: var(--text-dim); }
.text-text-muted\/20 { color: rgba(107,114,128,0.20); }
.text-text-muted\/30 { color: rgba(107,114,128,0.30); }
.text-text-muted\/40 { color: rgba(107,114,128,0.40); }
.text-text-muted\/50 { color: rgba(107,114,128,0.50); }
.text-text-muted\/60 { color: rgba(107,114,128,0.60); }
.text-gray-500     { color: #6B7280; }
.text-blue-400     { color: #60A5FA; }
.text-green-400    { color: #4ADE80; }
.text-green-600\/70 { color: rgba(22,163,74,0.7); }
.text-red-400      { color: #F87171; }
.text-yellow-400   { color: #FACC15; }
.accent-violet     { accent-color: var(--violet); }

.bg-bg      { background-color: var(--bg); }
.bg-bg-2    { background-color: var(--bg-2); }
.bg-bg-3    { background-color: var(--bg-3); }
.bg-bg-card { background-color: var(--bg-2); }
.border-border { border-color: rgba(var(--fg-rgb),0.1) !important; }
.bg-primary { background-color: var(--violet); color:#fff; }
input.bg-bg, textarea.bg-bg, select.bg-bg { color:#fff; }
input.bg-bg::placeholder, textarea.bg-bg::placeholder { color:#4B5563; }
.bg-violet      { background-color: var(--violet); }
.bg-violet\/5   { background-color: rgba(123,47,255,0.05); }
.bg-violet\/10  { background-color: rgba(123,47,255,0.10); }
.bg-white\/5    { background-color: rgba(var(--fg-rgb),0.05); }
.bg-white\/10   { background-color: rgba(var(--fg-rgb),0.10); }
.bg-black\/60   { background-color: rgba(0,0,0,0.60); }
.bg-yellow-400  { background-color: #FACC15; }

/* ---------- 5. Layout: display / flex / grid ---------- */
.hidden       { display: none; }
.block        { display: block; }
.inline       { display: inline; }
.inline-flex  { display: inline-flex; }
.flex         { display: flex; }
.grid         { display: grid; }

.flex-1    { flex: 1 1 0%; }
.flex-col  { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.shrink-0  { flex-shrink: 0; }
.min-w-0   { min-width: 0; }

.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }

.gap-0\.5 { gap: 2px; }
.gap-1    { gap: 4px; }
.gap-1\.5 { gap: 6px; }
.gap-2    { gap: 8px; }
.gap-3    { gap: 12px; }
.gap-4    { gap: 16px; }
.gap-5    { gap: 20px; }
.gap-6    { gap: 24px; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

.space-y-1 > * + * { margin-top: 4px; }
.space-y-2 > * + * { margin-top: 8px; }
.space-y-3 > * + * { margin-top: 12px; }
.space-y-4 > * + * { margin-top: 16px; }
.space-y-5 > * + * { margin-top: 20px; }

.divide-y > * + *         { border-top: 1px solid rgba(var(--fg-rgb),0.08); }
.divide-white\/5 > * + *  { border-top-color: rgba(var(--fg-rgb),0.05); }

/* ---------- 6. Spacing ---------- */
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.my-2 { margin-top: 8px; margin-bottom: 8px; }

.mt-0\.5 { margin-top: 2px; }
.mt-1    { margin-top: 4px; }
.mt-1\.5 { margin-top: 6px; }
.mt-2    { margin-top: 8px; }
.mt-3    { margin-top: 12px; }
.mt-4    { margin-top: 16px; }
.mt-5    { margin-top: 20px; }
.mt-6    { margin-top: 24px; }

.mb-0    { margin-bottom: 0; }
.mb-1    { margin-bottom: 4px; }
.mb-1\.5 { margin-bottom: 6px; }
.mb-2    { margin-bottom: 8px; }
.mb-3    { margin-bottom: 12px; }
.mb-4    { margin-bottom: 16px; }
.mb-5    { margin-bottom: 20px; }
.mb-6    { margin-bottom: 24px; }
.mb-8    { margin-bottom: 32px; }

.ml-1    { margin-left: 4px; }
.ml-1\.5 { margin-left: 6px; }
.ml-2    { margin-left: 8px; }

.mr-1    { margin-right: 4px; }

.p-0\.5 { padding: 2px; }
.p-1    { padding: 4px; }
.p-3    { padding: 12px; }
.p-4    { padding: 16px; }
.p-5    { padding: 20px; }
.p-6    { padding: 24px; }
.p-8    { padding: 32px; }
.p-12   { padding: 48px; }

.px-1\.5 { padding-left: 6px;  padding-right: 6px; }
.px-2    { padding-left: 8px;  padding-right: 8px; }
.px-3    { padding-left: 12px; padding-right: 12px; }
.px-4    { padding-left: 16px; padding-right: 16px; }
.px-6    { padding-left: 24px; padding-right: 24px; }

.py-0\.5 { padding-top: 2px;  padding-bottom: 2px; }
.py-1    { padding-top: 4px;  padding-bottom: 4px; }
.py-1\.5 { padding-top: 6px;  padding-bottom: 6px; }
.py-2    { padding-top: 8px;  padding-bottom: 8px; }
.py-2\.5 { padding-top: 10px; padding-bottom: 10px; }
.py-3    { padding-top: 12px; padding-bottom: 12px; }
.py-4    { padding-top: 16px; padding-bottom: 16px; }
.py-12   { padding-top: 48px; padding-bottom: 48px; }

.pt-2  { padding-top: 8px; }
.pt-3  { padding-top: 12px; }
.pt-4  { padding-top: 16px; }
.pb-3  { padding-bottom: 12px; }
.pb-4  { padding-bottom: 16px; }
.pb-px { padding-bottom: 1px; }

/* ---------- 7. Sizing ---------- */
.w-2    { width: 8px; }
.w-2\.5 { width: 10px; }
.w-3    { width: 12px; }
.w-3\.5 { width: 14px; }
.w-4    { width: 16px; }
.w-5    { width: 20px; }
.w-7    { width: 28px; }
.w-8    { width: 32px; }
.w-9    { width: 36px; }
.w-10   { width: 40px; }
.w-14   { width: 56px; }
.w-48   { width: 192px; }
.w-3\/5 { width: 60%; }
.w-full { width: 100%; }

.h-2    { height: 8px; }
.h-2\.5 { height: 10px; }
.h-3    { height: 12px; }
.h-3\.5 { height: 14px; }
.h-4    { height: 16px; }
.h-5    { height: 20px; }
.h-7    { height: 28px; }
.h-8    { height: 32px; }
.h-9    { height: 36px; }
.h-10   { height: 40px; }
.h-full { height: 100%; }

.min-h-screen { min-height: 100vh; }

.max-w-xs { max-width: 320px; }
.max-w-sm { max-width: 384px; }
.max-w-lg { max-width: 512px; }

/* ---------- 8. Borders / radius ---------- */
.border          { border: 1px solid rgba(var(--fg-rgb),0.08); }
.border-0        { border: 0; }
.border-b        { border-bottom: 1px solid rgba(var(--fg-rgb),0.08); }
.border-t        { border-top: 1px solid rgba(var(--fg-rgb),0.08); }
.border-r        { border-right: 1px solid rgba(var(--fg-rgb),0.08); }
.border-r-0      { border-right: 0; }
.border-transparent { border-color: transparent; }
.border-white\/5   { border-color: rgba(var(--fg-rgb),0.05); }
.border-white\/10  { border-color: rgba(var(--fg-rgb),0.10); }
.border-violet\/20 { border-color: rgba(123,47,255,0.20); }
.border-violet\/30 { border-color: rgba(123,47,255,0.30); }

.rounded        { border-radius: 6px; }
.rounded-md     { border-radius: 8px; }
.rounded-lg     { border-radius: 10px; }
.rounded-xl     { border-radius: 14px; }
.rounded-full   { border-radius: 9999px; }
.rounded-l-lg   { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.rounded-l-none { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* ---------- 9. Effects ---------- */
.cursor-pointer { cursor: pointer; }
.cursor-grab    { cursor: grab; }

.opacity-0  { opacity: 0; }
.opacity-30 { opacity: 0.30; }
.opacity-40 { opacity: 0.40; }
.opacity-50 { opacity: 0.50; }

.transition-all     { transition: all 0.2s; }
.transition-colors  { transition: color 0.2s, background-color 0.2s, border-color 0.2s, fill 0.2s, stroke 0.2s; }
.transition-opacity { transition: opacity 0.2s; }

.overflow-hidden   { overflow: hidden; }
.overflow-x-auto   { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }

.object-cover { object-fit: cover; }

@keyframes pulse-admin { 50% { opacity: 0.5; } }
.animate-pulse { animation: pulse-admin 2s cubic-bezier(0.4,0,0.6,1) infinite; }

.hover\:opacity-80:hover        { opacity: 0.8; }
.hover\:underline:hover         { text-decoration: underline; }
.hover\:text-white:hover        { color: #fff; }
.hover\:text-violet:hover       { color: var(--violet); }
.hover\:text-danger:hover       { color: var(--danger); }
.hover\:text-text-muted:hover   { color: var(--text-muted); }
.hover\:bg-violet\/10:hover     { background-color: rgba(123,47,255,0.10); }
.hover\:border-violet\/20:hover { border-color: rgba(123,47,255,0.20); }
.hover\:border-violet\/30:hover { border-color: rgba(123,47,255,0.30); }
.hover\:border-white\/20:hover  { border-color: rgba(var(--fg-rgb),0.20); }

/* ---------- 10. Positioning ---------- */
.relative { position: relative; }
.fixed    { position: fixed; }
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }
.top-3    { top: 12px; }
.left-3   { left: 12px; }
.z-40     { z-index: 40; }
.z-50     { z-index: 50; }

/* ---------- 11. Pseudo / group ---------- */
.group:hover .group-hover\:opacity-100 { opacity: 1; }

/* peer toggle (switches) — input[type=checkbox].peer + label with ::after */
.peer:checked ~ .peer-checked\:bg-neon\/30         { background-color: rgba(57,255,143,0.30); }
.peer:checked ~ .peer-checked\:after\:bg-neon::after       { background-color: var(--neon); }
.peer:checked ~ .peer-checked\:after\:translate-x-4::after { transform: translateX(16px); }

.after\:content-\[\'\'\]::after { content: ''; }
.after\:absolute::after         { position: absolute; }
.after\:top-0\.5::after         { top: 2px; }
.after\:left-0\.5::after        { left: 2px; }
.after\:w-4::after              { width: 16px; }
.after\:h-4::after              { height: 16px; }
.after\:bg-text-muted::after    { background-color: var(--text-muted); }
.after\:rounded-full::after     { border-radius: 9999px; }
.after\:transition-all::after   { transition: all 0.2s; }

/* ---------- 12. Responsive ---------- */
@media (min-width: 640px) {
  .sm\:block       { display: block; }
  .sm\:flex        { display: flex; }
  .sm\:inline      { display: inline; }
  .sm\:col-span-2  { grid-column: span 2 / span 2; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 768px) {
  .md\:hidden { display: none; }
}
@media (max-width: 767.98px) {
  .max-md\:fixed                { position: fixed; }
  .max-md\:top-0                { top: 0; }
  .max-md\:left-0               { left: 0; }
  .max-md\:w-56                 { width: 224px; }
  .max-md\:z-50                 { z-index: 50; }
  .max-md\:transition-transform { transition: transform 0.2s; }
  .max-md\:-translate-x-full    { transform: translateX(-100%); }
}
@media (min-width: 1024px) {
  .lg\:flex        { display: flex; }
  .lg\:px-8        { padding-left: 32px; padding-right: 32px; }
  .lg\:w-56        { width: 224px; }
  .lg\:col-span-2  { grid-column: span 2 / span 2; }
  .lg\:col-span-3  { grid-column: span 3 / span 3; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* ==========================================================================
   13. Core components
   ========================================================================== */

/* ---- Sidebar link (used in layout.php nav) ---- */
.sidebar-link {
  transition: all 0.2s;
  border-radius: 10px;
  color: var(--text-dim);
}
.sidebar-link:hover,
.sidebar-link.active { background: rgba(123,47,255,0.12); color: #fff; }
.sidebar-link.active { border-left: 3px solid var(--violet); }

/* ---- Card / stat-card ---- */
.card {
  background: var(--bg-2);
  border: 1px solid rgba(var(--fg-rgb),0.06);
  border-radius: 14px;
}
.stat-card {
  background: linear-gradient(135deg, rgba(var(--fg-rgb),0.03), rgba(var(--fg-rgb),0.01));
  border: 1px solid rgba(var(--fg-rgb),0.06);
  border-radius: 14px;
  padding: 20px;
}

/* ---- Buttons ---- */
.btn-primary {
  background: linear-gradient(135deg, var(--violet), var(--violet-dim));
  border: none; color: #fff;
  padding: 10px 20px; border-radius: 10px;
  font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(123,47,255,0.4);
}
.btn-danger {
  background: rgba(255,71,87,0.15);
  border: 1px solid rgba(255,71,87,0.3);
  color: var(--danger);
  padding: 8px 16px; border-radius: 10px;
  font-weight: 500; cursor: pointer; transition: all 0.2s;
}
.btn-danger:hover { background: rgba(255,71,87,0.25); }
.btn-ghost {
  background: rgba(var(--fg-rgb),0.05);
  border: 1px solid rgba(var(--fg-rgb),0.1);
  color: var(--text-dim);
  padding: 8px 16px; border-radius: 10px;
  font-weight: 500; cursor: pointer; transition: all 0.2s;
}
.btn-ghost:hover { background: rgba(var(--fg-rgb),0.1); color: #fff; }

/* ---- Form inputs ---- */
.form-input {
  background: rgba(var(--fg-rgb),0.04);
  border: 1px solid rgba(var(--fg-rgb),0.1);
  border-radius: 10px;
  padding: 10px 14px;
  color: #fff;
  width: 100%;
  font-size: 14px;
  transition: border-color 0.2s;
}
.form-input:focus {
  outline: none;
  border-color: rgba(123,47,255,0.5);
  box-shadow: 0 0 0 3px rgba(123,47,255,0.1);
}
.form-input::placeholder { color: #4B5563; }
textarea.form-input { resize: vertical; min-height: 80px; }
select.form-input {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
select.form-input option { background: var(--bg-3); color: #fff; }
.form-row    { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.form-full   { margin-bottom: 12px; }
.field-label { font-size: 11px; color: var(--text-muted); font-weight: 500; margin-bottom: 4px; display: block; }

/* ---- Badges ---- */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 12px; font-weight: 500;
}
.badge-violet { background: rgba(123,47,255,0.15); color: var(--violet-light); border: 1px solid rgba(123,47,255,0.25); }
.badge-neon   { background: rgba(57,255,143,0.10);  color: var(--neon);         border: 1px solid rgba(57,255,143,0.20); }
.badge-danger { background: rgba(255,71,87,0.10);   color: var(--danger); }
.badge-gray   { background: rgba(var(--fg-rgb),0.06); color: var(--text-dim); }

.stack-tag-preview {
  display: inline-block;
  padding: 3px 10px; border-radius: 6px;
  font-size: 11px; font-weight: 500;
  background: rgba(123,47,255,0.1);
  border: 1px solid rgba(123,47,255,0.2);
  color: var(--text-dim);
  margin: 2px;
}

/* ---- Flash ---- */
.flash         { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.flash-success { background: rgba(57,255,143,0.1); border: 1px solid rgba(57,255,143,0.2); color: var(--neon); }
.flash-error   { background: rgba(255,71,87,0.1); border: 1px solid rgba(255,71,87,0.2); color: var(--danger); }

/* ---- Modal ---- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: none;
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--bg-3);
  border: 1px solid rgba(var(--fg-rgb),0.08);
  border-radius: 16px;
  padding: 28px;
  max-width: 520px; width: 90%;
}

/* ---- Misc ---- */
.table-row { border-bottom: 1px solid rgba(var(--fg-rgb),0.04); transition: background 0.15s; }
.table-row:hover { background: rgba(123,47,255,0.04); }
.sortable-ghost  { opacity: 0.4; }
.sortable-chosen { box-shadow: 0 0 30px rgba(123,47,255,0.2); }
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 8px rgba(123,47,255,0.5); }
.drag-handle { cursor: grab; color: var(--text-muted); display: flex; align-items: center; }

/* ==========================================================================
   14. Page components
   ========================================================================== */

/* ---- Login ---- */
.login-card {
  background: var(--bg-2);
  border: 1px solid rgba(var(--fg-rgb),0.06);
  border-radius: 20px;
}

/* ---- Tabs (integrations / seo / tour_edit) ---- */
.tab-nav {
  display: flex; gap: 2px;
  background: rgba(var(--fg-rgb),0.03);
  border-radius: 10px; padding: 3px;
  margin-bottom: 20px;
  border: 1px solid rgba(var(--fg-rgb),0.05);
  width: fit-content;
}
.tab-btn {
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 13px; font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.15s;
  text-decoration: none;
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.tab-btn:hover  { color: #fff; }
.tab-btn.active { background: rgba(123,47,255,0.2); color: #fff; }
.tab-btn i      { width: 14px; height: 14px; }
.tab-panel         { display: none; }
.tab-panel.active  { display: block; }

/* tour_edit uses pill tabs with top-rounded corners (overrides on .tour-edit-scope) */
.tour-edit .tab-btn { border-radius: 8px 8px 0 0; border-bottom: none; }
.tour-edit .tab-btn.active { background: var(--bg-2); border-color: rgba(var(--fg-rgb),0.06); color: #fff; }

/* ---- Setting row ---- */
.setting-row { display: grid; grid-template-columns: 140px 1fr; gap: 8px; align-items: center; }
.setting-row label { font-size: 12px; color: var(--text-muted); font-weight: 500; text-align: right; padding-right: 4px; }
@media (max-width: 640px) {
  .setting-row { grid-template-columns: 1fr; }
  .setting-row label { text-align: left; }
}
/* seo.php variant: 120px label + top align */
.seo-settings .setting-row { grid-template-columns: 120px 1fr; align-items: start; }
.seo-settings .setting-row label { padding-top: 10px; }
@media (max-width: 640px) {
  .seo-settings .setting-row { grid-template-columns: 1fr; }
  .seo-settings .setting-row label { text-align: left; padding-top: 0; }
}

/* ---- Status pill / file-status ---- */
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 100px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.status-on       { background: rgba(57,255,143,0.1);  color: var(--neon);         border: 1px solid rgba(57,255,143,0.15); }
.status-off      { background: rgba(var(--fg-rgb),0.04); color: var(--text-muted);   border: 1px solid rgba(var(--fg-rgb),0.06); }
.status-new      { background: rgba(123,47,255,0.15); color: var(--violet-light); border: 1px solid rgba(123,47,255,0.25); }
.status-progress { background: rgba(57,255,143,0.1);  color: var(--neon);         border: 1px solid rgba(57,255,143,0.2);  }
.status-trash    { background: rgba(var(--fg-rgb),0.04); color: var(--text-muted);   border: 1px solid rgba(var(--fg-rgb),0.08); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; }
.status-on       .status-dot { background: var(--neon);         box-shadow: 0 0 6px rgba(57,255,143,0.5); }
.status-off      .status-dot { background: var(--text-muted); }
.status-new      .status-dot { background: var(--violet-light); box-shadow: 0 0 6px rgba(123,47,255,0.5); }
.status-progress .status-dot { background: var(--neon);         box-shadow: 0 0 6px rgba(57,255,143,0.5); }
.status-trash    .status-dot { background: var(--text-muted); }
.status-select {
  background: rgba(var(--fg-rgb),0.04);
  border: 1px solid rgba(var(--fg-rgb),0.1);
  border-radius: 8px;
  color: #fff; padding: 6px 12px;
  font-size: 12px; cursor: pointer;
}
.status-select option { background: var(--bg-3); }

.file-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 3px 10px; border-radius: 100px; }
.file-ok { background: rgba(57,255,143,0.08);  color: var(--neon);       border: 1px solid rgba(57,255,143,0.15); }
.file-no { background: rgba(var(--fg-rgb),0.03); color: var(--text-muted); border: 1px solid rgba(var(--fg-rgb),0.06); }

.test-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 500; cursor: pointer;
  border: 1px solid rgba(123,47,255,0.25);
  background: rgba(123,47,255,0.08);
  color: var(--violet-light);
  transition: all 0.15s;
}
.test-btn:hover { background: rgba(123,47,255,0.15); }

/* ---- Dashboard (index.php) ---- */
.dash-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.dash-section-title i { width: 14px; height: 14px; opacity: 0.5; }
.mini-bar      { height: 6px; border-radius: 6px; background: rgba(var(--fg-rgb),0.04); overflow: hidden; }
.mini-bar-fill { height: 100%; border-radius: 6px; transition: width 0.6s ease; }
.recent-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid rgba(var(--fg-rgb),0.04);
}
.recent-row:last-child { border-bottom: none; }
.top-num {
  width: 20px; height: 20px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
}

/* ---- Blog list (blog.php) ---- */
.post-status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.4); cursor: pointer;
}
.post-status-pub   { background: var(--neon); box-shadow: 0 0 6px rgba(57,255,143,0.5); }
.post-status-draft { background: var(--text-muted); }
.post-check {
  width: 16px; height: 16px; border-radius: 5px;
  border: 1.5px solid rgba(var(--fg-rgb),0.15);
  background: rgba(var(--fg-rgb),0.03);
  cursor: pointer; appearance: none; -webkit-appearance: none;
  transition: all 0.15s; flex-shrink: 0;
}
.post-check:checked { background: rgba(123,47,255,0.7); border-color: rgba(123,47,255,0.9); }
.post-check:checked::after {
  content: '✓';
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #fff; font-weight: 700; line-height: 16px;
}
.bulk-bar {
  background: rgba(123,47,255,0.12);
  border: 1px solid rgba(123,47,255,0.25);
  border-radius: 12px;
  padding: 10px 16px;
  display: none; align-items: center; gap: 12px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.bulk-bar.show, .bulk-bar.visible { display: flex; }
.bulk-bar select {
  background: rgba(var(--fg-rgb),0.06);
  border: 1px solid rgba(var(--fg-rgb),0.12);
  border-radius: 8px;
  color: #fff; padding: 6px 10px; font-size: 12px; cursor: pointer;
}
.bulk-bar select option { background: var(--bg-3); }
.post-views { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-muted); }

/* ---- Blog editor (blog_edit.php) ---- */
.cover-zone {
  border: 2px dashed rgba(123,47,255,0.2);
  border-radius: 10px;
  padding: 16px; text-align: center;
  cursor: pointer; transition: all 0.2s;
  background: rgba(123,47,255,0.02);
}
.cover-zone:hover, .cover-zone.dragover { border-color: rgba(123,47,255,0.4); background: rgba(123,47,255,0.05); }
.cover-preview { position: relative; border-radius: 10px; overflow: hidden; max-width: 320px; }
.cover-preview img { width: 100%; display: block; border-radius: 10px; }
.cover-actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.cover-btn {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
}
.cover-btn-del       { background: rgba(255,71,87,0.7); color: #fff; }
.cover-btn-del:hover { background: rgba(255,71,87,0.9); }
.slug-field  { display: flex; align-items: center; gap: 0; }
.slug-prefix {
  background: rgba(var(--fg-rgb),0.06);
  border: 1px solid rgba(var(--fg-rgb),0.1);
  border-right: none;
  border-radius: 10px 0 0 10px;
  padding: 10px 12px;
  color: var(--text-muted);
  font-size: 13px; font-family: var(--font-mono); white-space: nowrap;
}
.slug-input { border-radius: 0 10px 10px 0 !important; font-family: var(--font-mono); font-size: 13px; }
.seo-card   { border-left: 3px solid rgba(123,47,255,0.3); }

/* TinyMCE dark theme overrides */
.tox-tinymce { border: 1px solid rgba(var(--fg-rgb),0.1) !important; border-radius: 10px !important; }
.tox .tox-edit-area__iframe { background: var(--bg-2) !important; }
.tox .tox-toolbar__primary { background: var(--bg-3) !important; border-bottom: 1px solid rgba(var(--fg-rgb),0.06) !important; }
.tox .tox-toolbar__group { border-right: 1px solid rgba(var(--fg-rgb),0.06) !important; }
.tox .tox-tbtn { color: var(--text-dim) !important; }
.tox .tox-tbtn:hover { background: rgba(123,47,255,0.15) !important; color: #fff !important; }
.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover { background: rgba(123,47,255,0.25) !important; color: var(--violet-light) !important; }
.tox .tox-statusbar { background: var(--bg-3) !important; border-top: 1px solid rgba(var(--fg-rgb),0.06) !important; }
.tox .tox-statusbar__text-container { color: var(--text-muted) !important; }
.tox .tox-statusbar a { color: var(--text-muted) !important; }
.tox .tox-menubar { background: var(--bg-3) !important; }
.tox .tox-mbtn { color: var(--text-dim) !important; }
.tox .tox-mbtn:hover { background: rgba(123,47,255,0.15) !important; color: #fff !important; }

.autosave-status { font-size: 11px; padding: 3px 10px; border-radius: 100px; transition: all 0.3s; }
.autosave-saving { background: rgba(255,190,11,0.12); color: var(--warning); border: 1px solid rgba(255,190,11,0.2); }
.autosave-saved  { background: rgba(57,255,143,0.08); color: var(--neon);    border: 1px solid rgba(57,255,143,0.15); }
.autosave-idle   { background: rgba(var(--fg-rgb),0.03); color: var(--text-muted); border: 1px solid rgba(var(--fg-rgb),0.06); }

/* ---- AI topics / queue (ai_topics.php) ---- */
.topic-card { transition: all 0.2s; }
.topic-card:hover    { border-color: rgba(123,47,255,0.3); }
.topic-card.selected { border-color: rgba(123,47,255,0.5); background: rgba(123,47,255,0.04); }
.ai-tab {
  padding: 8px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
  transition: all 0.2s; cursor: pointer;
  border: 1px solid transparent;
}
.ai-tab:hover  { background: rgba(var(--fg-rgb),0.04); }
.ai-tab.active { background: rgba(123,47,255,0.12); color: #fff; border-color: rgba(123,47,255,0.3); }
.ai-tab-content        { display: none; }
.ai-tab-content.active { display: block; }
.sched-date {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--violet-light);
  background: rgba(123,47,255,0.08);
  padding: 2px 8px; border-radius: 6px;
}
.progress-bar-wrap {
  flex: 1; height: 4px;
  background: rgba(var(--fg-rgb),0.06);
  border-radius: 4px; overflow: hidden; min-width: 120px;
}
.progress-bar-fill {
  height: 100%; width: 0%; border-radius: 4px;
  transition: width 0.5s ease;
  background: linear-gradient(90deg, var(--violet), var(--neon));
}
.queue-row.generating { border-color: rgba(123,47,255,0.3); }
.queue-row.success    { border-color: rgba(57,255,143,0.3); background: rgba(57,255,143,0.03); }
.queue-row.error      { border-color: rgba(255,71,87,0.3);  background: rgba(255,71,87,0.03); }
.queue-row.removing   { opacity: 0.4; transform: scale(0.98); transition: all 0.3s; }

/* ---- Contacts (contacts.php) ---- */
.contact-row {
  display: grid; grid-template-columns: 32px 120px 1fr;
  gap: 8px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid rgba(var(--fg-rgb),0.04);
}
.contact-row:last-child { border-bottom: none; }
.contact-row label { font-size: 12px; color: var(--text-muted); font-weight: 500; text-align: right; padding-right: 4px; }
@media (max-width: 640px) {
  .contact-row { grid-template-columns: 32px 1fr; }
  .contact-row label { text-align: left; }
}
.vis-toggle {
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid rgba(var(--fg-rgb),0.15);
  background: rgba(var(--fg-rgb),0.03);
  cursor: pointer; appearance: none; -webkit-appearance: none;
  transition: all 0.15s;
}
.vis-toggle:checked { background: rgba(57,255,143,0.5); border-color: rgba(57,255,143,0.7); }
.vis-toggle:checked::after {
  content: '✓'; display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #fff; font-weight: 700; line-height: 18px;
}
.section-divider { padding-top: 12px; margin-top: 4px; border-top: 1px solid rgba(var(--fg-rgb),0.06); }
.section-label   { font-size: 10px; color: rgba(107,114,128,0.6); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 4px; }

/* ---- Gallery (gallery.php) ---- */
.gal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1100px) { .gal-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .gal-grid { grid-template-columns: repeat(2, 1fr); } }
.gal-card {
  position: relative; border-radius: 10px; overflow: hidden;
  background: var(--bg-3);
  border: 1px solid rgba(var(--fg-rgb),0.06);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.gal-card:hover { border-color: rgba(123,47,255,0.3); box-shadow: 0 0 20px rgba(123,47,255,0.08); }
.gal-thumb { aspect-ratio: 4/3; overflow: hidden; cursor: grab; position: relative; }
.gal-thumb:active { cursor: grabbing; }
.gal-thumb img    { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.gal-card:hover .gal-thumb img { transform: scale(1.03); }
.gal-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 40%, transparent 60%, rgba(0,0,0,0.6) 100%);
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.gal-card:hover .gal-overlay { opacity: 1; }
.gal-del {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255,71,87,0.9); color: #fff;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; z-index: 3;
  opacity: 0; transition: opacity 0.2s;
  backdrop-filter: blur(4px);
}
.gal-card:hover .gal-del { opacity: 1; }
.gal-del:hover { background: var(--danger); transform: scale(1.1); }
.gal-num {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,0.7); color: rgba(var(--fg-rgb),0.5);
  font-size: 10px; padding: 2px 8px; border-radius: 6px;
  font-family: var(--font-mono); z-index: 3; backdrop-filter: blur(4px);
}
.gal-info { padding: 10px 12px; }
.gal-title-input {
  width: 100%; background: transparent;
  border: none; border-bottom: 1px solid rgba(var(--fg-rgb),0.06);
  padding: 4px 0; color: #fff; font-size: 12px;
  transition: border-color 0.2s;
}
.gal-title-input:focus { border-color: rgba(123,47,255,0.4); outline: none; }
.gal-title-input::placeholder { color: rgba(var(--fg-rgb),0.15); }
.gal-size { font-size: 10px; color: rgba(var(--fg-rgb),0.2); font-family: var(--font-mono); margin-top: 4px; }

.upload-zone {
  border: 2px dashed rgba(123,47,255,0.2);
  border-radius: 12px;
  padding: 40px 24px; text-align: center;
  cursor: pointer; transition: all 0.2s;
  background: rgba(123,47,255,0.02);
}
.upload-zone:hover, .upload-zone.dragover { border-color: rgba(123,47,255,0.5); background: rgba(123,47,255,0.06); }
.upload-zone i { opacity: 0.3; margin-bottom: 8px; }
/* upload-zone inside tour/work editors has smaller padding */
.gallery-grid + .upload-zone,
.tour-edit .upload-zone,
.work-edit .upload-zone { padding: 20px; border-radius: 10px; }

/* ---- Menu (menu.php) ---- */
.menu-card {
  background: rgba(var(--fg-rgb),0.02);
  border: 1px solid rgba(var(--fg-rgb),0.06);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  transition: all 0.15s;
}
.menu-card:hover       { border-color: rgba(123,47,255,0.2); }
.menu-card.is-child    { margin-left: 32px; border-left: 2px solid rgba(123,47,255,0.3); }
.menu-handle           { cursor: grab; color: var(--text-muted); display: flex; align-items: center; }
.menu-icon-preview {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.menu-icon-preview.c-violet { background: rgba(123,47,255,0.15); border: 1px solid rgba(123,47,255,0.25); color: var(--violet-light); }
.menu-icon-preview.c-neon   { background: rgba(57,255,143,0.10); border: 1px solid rgba(57,255,143,0.20); color: var(--neon); }
.menu-info   { flex: 1; min-width: 0; }
.menu-title  { font-size: 14px; font-weight: 600; color: #fff; }
.menu-url    { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
.menu-badges, .menu-actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.menu-act-btn {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid rgba(var(--fg-rgb),0.08);
  background: transparent; color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.menu-act-btn:hover     { background: rgba(var(--fg-rgb),0.06); color: #fff; }
.menu-act-btn.del:hover { background: rgba(255,71,87,0.12); border-color: rgba(255,71,87,0.25); color: var(--danger); }

.add-form { background: var(--bg-2); border: 1px solid rgba(var(--fg-rgb),0.06); border-radius: 14px; padding: 20px; }

.hidden-badge  { background: rgba(var(--fg-rgb),0.04); color: var(--text-muted); border: 1px solid rgba(var(--fg-rgb),0.08); padding: 2px 8px; border-radius: 100px; font-size: 10px; }
.type-badge    { padding: 2px 8px; border-radius: 100px; font-size: 10px; font-weight: 600; }
.type-dropdown { background: rgba(123,47,255,0.12); color: var(--violet-light); border: 1px solid rgba(123,47,255,0.2); }
.type-link     { background: rgba(57,255,143,0.08);  color: var(--neon);         border: 1px solid rgba(57,255,143,0.15); }

.loc-tab {
  padding: 8px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
  text-decoration: none; color: var(--text-muted);
  transition: all 0.2s;
}
.loc-tab:hover  { color: #fff; }
.loc-tab.active { background: rgba(123,47,255,0.15); color: var(--violet-light); border: 1px solid rgba(123,47,255,0.2); }

.quick-group       { margin-bottom: 8px; }
.quick-group-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: #4B5563; margin-bottom: 4px; }
.quick-btn {
  display: block; width: 100%; text-align: left;
  background: transparent;
  border: 1px solid rgba(var(--fg-rgb),0.06);
  border-radius: 6px;
  padding: 6px 10px; color: var(--text-dim);
  font-size: 12px; cursor: pointer;
  transition: all 0.15s; margin-bottom: 3px;
}
.quick-btn:hover { background: rgba(123,47,255,0.08); border-color: rgba(123,47,255,0.2); color: #fff; }

/* ---- Modules (modules.php) ---- */
.mod-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(var(--fg-rgb),0.04); }
.mod-row:last-child { border-bottom: none; }
.mod-row.is-off     { opacity: 0.4; }
.mod-row.is-blocked { opacity: 0.25; pointer-events: none; }
.mod-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(123,47,255,0.1); border: 1px solid rgba(123,47,255,0.2);
  color: var(--violet-light); flex-shrink: 0;
}
.mod-row.is-off .mod-icon,
.mod-row.is-blocked .mod-icon { background: rgba(var(--fg-rgb),0.03); border-color: rgba(var(--fg-rgb),0.06); color: #4B5563; }
.mod-name { font-size: 13px; font-weight: 600; min-width: 0; }
.mod-lim  { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); }
.mod-lim i { width: 12px; height: 12px; opacity: 0.5; }
.mod-num {
  width: 44px;
  background: rgba(var(--fg-rgb),0.04);
  border: 1px solid rgba(var(--fg-rgb),0.08);
  border-radius: 6px; padding: 3px 4px;
  color: #fff; font-size: 12px; text-align: center;
}
.mod-num:focus { border-color: rgba(123,47,255,0.4); outline: none; }
.mod-sw { position: relative; width: 38px; height: 20px; flex-shrink: 0; }
.mod-sw input { opacity: 0; width: 0; height: 0; position: absolute; }
.mod-sw-t {
  position: absolute; inset: 0;
  background: rgba(var(--fg-rgb),0.08);
  border-radius: 10px; cursor: pointer; transition: background 0.2s;
}
.mod-sw-t::after {
  content: ''; position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #4B5563; border-radius: 50%;
  transition: all 0.2s;
}
.mod-sw input:checked + .mod-sw-t         { background: rgba(57,255,143,0.25); }
.mod-sw input:checked + .mod-sw-t::after  { transform: translateX(18px); background: var(--neon); }
.mod-save {
  background: rgba(123,47,255,0.15);
  border: 1px solid rgba(123,47,255,0.25);
  color: var(--violet-light);
  padding: 4px 12px; border-radius: 6px;
  font-size: 11px; font-weight: 600;
  cursor: pointer; flex-shrink: 0;
}
.mod-save:hover { background: rgba(123,47,255,0.25); }
.mod-blocked-text { font-size: 10px; color: var(--danger); }

/* ---- Settings — brand slot ---- */
.brand-slot { display: flex; gap: 14px; align-items: center; }
.brand-preview {
  width: 72px; height: 72px; flex-shrink: 0;
  border: 1px solid rgba(var(--fg-rgb),0.1);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background-image:
    linear-gradient(45deg, #2a2a35 25%, transparent 25%),
    linear-gradient(-45deg, #2a2a35 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #2a2a35 75%),
    linear-gradient(-45deg, transparent 75%, #2a2a35 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  background-color: var(--bg-3);
}
.brand-preview img   { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-preview-empty { color: rgba(var(--fg-rgb),0.2); }
.brand-body    { flex: 1; min-width: 0; }
.brand-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.brand-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all 0.15s;
  border: 1px solid transparent;
}
.brand-btn-upload        { background: rgba(123,47,255,0.12); color: var(--violet-light); border-color: rgba(123,47,255,0.3); }
.brand-btn-upload:hover  { background: rgba(123,47,255,0.2); }
.brand-btn-remove        { color: var(--danger); border-color: rgba(255,71,87,0.25); background: rgba(255,71,87,0.05); }
.brand-btn-remove:hover  { background: rgba(255,71,87,0.15); }
.brand-filename { font-size: 11px;   color: rgba(var(--fg-rgb),0.4);  margin-top: 6px; font-family: var(--font-mono); }
.brand-hint     { font-size: 10.5px; color: rgba(var(--fg-rgb),0.35); margin-top: 6px; }
.brand-title    { font-size: 13px; font-weight: 500; color: #fff; margin-bottom: 2px; }
.brand-status   { font-size: 11px; color: rgba(var(--fg-rgb),0.45); }
input[type=file].brand-file { position: absolute; left: -9999px; opacity: 0; }

/* ---- Submissions ---- */
.sub-check {
  width: 16px; height: 16px; border-radius: 5px;
  border: 1.5px solid rgba(var(--fg-rgb),0.15);
  background: rgba(var(--fg-rgb),0.03);
  cursor: pointer; appearance: none; -webkit-appearance: none;
  transition: all 0.15s; flex-shrink: 0;
}
.sub-check:checked        { background: rgba(123,47,255,0.7); border-color: rgba(123,47,255,0.9); }
.sub-check:checked::after {
  content: '✓';
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #fff; font-weight: 700; line-height: 16px;
}
.sub-check:hover { border-color: rgba(123,47,255,0.5); }

.inline-del {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid transparent; background: transparent;
  color: var(--text-muted); cursor: pointer;
  transition: all 0.15s;
}
.inline-del:hover { background: rgba(255,71,87,0.12); border-color: rgba(255,71,87,0.25); color: var(--danger); }

/* ---- Tour / Work gallery editor ---- */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.gallery-item {
  position: relative; aspect-ratio: 16/10;
  border-radius: 8px; overflow: hidden;
  background: var(--bg-3);
  border: 2px solid transparent;
  cursor: grab; transition: border-color 0.2s;
  user-select: none;
}
.gallery-item:active   { cursor: grabbing; }
.gallery-item:hover    { border-color: rgba(123,47,255,0.3); }
.gallery-item.is-cover { border-color: rgba(57,255,143,0.4); }
.gallery-item img      { width: 100%; height: 100%; object-fit: cover; pointer-events: none; cursor: zoom-in; }
.gallery-item-actions  {
  position: absolute; top: 4px; right: 4px;
  display: flex; gap: 3px;
  opacity: 0; transition: opacity 0.15s; z-index: 2;
}
.gallery-item:hover .gallery-item-actions { opacity: 1; }
.gallery-btn {
  width: 26px; height: 26px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
}
.gallery-btn-cover        { background: rgba(57,255,143,0.25); color: var(--neon); }
.gallery-btn-cover:hover  { background: rgba(57,255,143,0.5); }
.gallery-btn-del          { background: rgba(255,71,87,0.25);  color: var(--danger); }
.gallery-btn-del:hover    { background: rgba(255,71,87,0.5); }
.cover-badge {
  position: absolute; bottom: 4px; left: 4px;
  background: rgba(57,255,143,0.2);
  border: 1px solid rgba(57,255,143,0.3);
  color: var(--neon);
  font-size: 9px; padding: 1px 6px; border-radius: 4px; font-weight: 600;
}
.gallery-drag-num {
  position: absolute; bottom: 4px; right: 4px;
  background: rgba(0,0,0,0.6);
  color: var(--text-muted);
  font-size: 9px; padding: 1px 6px;
  border-radius: 4px; font-family: var(--font-mono);
}

/* Lightbox */
.lightbox { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); }
.lightbox-img {
  position: relative; z-index: 1;
  max-width: 90vw; max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(0,0,0,0.5);
}
.lightbox-close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid rgba(var(--fg-rgb),0.15);
  background: rgba(0,0,0,0.5); color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.lightbox-close:hover { background: rgba(var(--fg-rgb),0.1); }

/* Dynamic rows (repeat-add fields) */
.dyn-row { display: flex; gap: 8px; align-items: start; margin-bottom: 6px; }
.dyn-row .form-input { flex: 1; }
.dyn-remove {
  background: rgba(255,71,87,0.15);
  border: 1px solid rgba(255,71,87,0.2);
  color: var(--danger);
  width: 32px; height: 38px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.dyn-add {
  background: rgba(123,47,255,0.1);
  border: 1px solid rgba(123,47,255,0.2);
  color: var(--violet-light);
  padding: 6px 14px; border-radius: 8px;
  cursor: pointer; font-size: 12px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
}

/* ---- Tours listing ---- */
.tour-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1100px) { .tour-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .tour-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .tour-grid { grid-template-columns: 1fr; } }
.tour-thumb {
  aspect-ratio: 16/10; background: var(--bg-3);
  border-radius: 10px; overflow: hidden; position: relative;
  border: 1px solid rgba(var(--fg-rgb),0.06);
  transition: border-color 0.2s;
}
.tour-thumb:hover { border-color: rgba(123,47,255,0.3); }
.tour-thumb img   { width: 100%; height: 100%; object-fit: cover; }
.tour-thumb-empty { display: flex; align-items: center; justify-content: center; color: rgba(var(--fg-rgb),0.15); }
.tour-check {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  width: 20px; height: 20px; border-radius: 5px;
  border: 2px solid rgba(var(--fg-rgb),0.25);
  background: rgba(0,0,0,0.5);
  cursor: pointer; appearance: none; -webkit-appearance: none;
  transition: all 0.15s;
}
.tour-check:checked { background: var(--violet); border-color: var(--violet); }
.tour-check:checked::after {
  content: '✓'; color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; height: 100%;
}
.tour-status { position: absolute; top: 8px; right: 8px; z-index: 5; }
.tour-info   { padding: 8px 4px 0; }
.tour-info a { font-size: 13px; font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-info span { font-size: 11px; color: var(--text-muted); }
.tour-pub-btn {
  width: 22px; height: 22px; border-radius: 50%;
  border: none;
  background: rgba(var(--fg-rgb),0.08);
  color: rgba(var(--fg-rgb),0.2);
  font-size: 14px; cursor: pointer;
  transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; position: relative; z-index: 5;
}
.tour-pub-btn:hover    { background: rgba(57,255,143,0.15); color: rgba(57,255,143,0.7); }
.tour-pub-btn.is-pub   { background: rgba(57,255,143,0.2); color: var(--neon); box-shadow: 0 0 6px rgba(57,255,143,0.3); }

/* ---- Works listing ---- */
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1100px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .work-grid { grid-template-columns: 1fr; } }
.work-thumb {
  aspect-ratio: 16/10; background: var(--bg-3);
  border-radius: 10px; overflow: hidden; position: relative;
  border: 1px solid rgba(var(--fg-rgb),0.06);
  transition: border-color 0.2s;
}
.work-thumb:hover { border-color: rgba(123,47,255,0.3); }
.work-thumb img   { width: 100%; height: 100%; object-fit: cover; }
.work-thumb-empty { display: flex; align-items: center; justify-content: center; color: rgba(var(--fg-rgb),0.15); }
.work-check {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  width: 20px; height: 20px; border-radius: 5px;
  border: 2px solid rgba(var(--fg-rgb),0.25);
  background: rgba(0,0,0,0.5);
  cursor: pointer; appearance: none; -webkit-appearance: none;
  transition: all 0.15s;
}
.work-check:checked { background: var(--violet); border-color: var(--violet); }
.work-check:checked::after {
  content: '✓'; color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; height: 100%;
}
.work-status     { position: absolute; top: 8px; right: 8px; z-index: 2; }
.work-status-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.4); }
.work-status-on  { background: var(--neon); box-shadow: 0 0 6px rgba(57,255,143,0.5); }
.work-status-off { background: var(--text-muted); }
.work-info   { padding: 8px 4px 0; }
.work-info a { font-size: 13px; font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.work-info span { font-size: 11px; color: var(--text-muted); }
.work-featured-btn {
  width: 22px; height: 22px; border-radius: 50%;
  border: none;
  background: rgba(var(--fg-rgb),0.08);
  color: rgba(var(--fg-rgb),0.2);
  font-size: 12px; cursor: pointer;
  transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.work-featured-btn:hover       { background: rgba(123,47,255,0.2); color: rgba(123,47,255,0.7); }
.work-featured-btn.is-featured { background: rgba(123,47,255,0.25); color: var(--violet-light); box-shadow: 0 0 6px rgba(123,47,255,0.3); }


/* ============================================================
 * USERS PAGE
 * ============================================================ */
.users-page { max-width: 1100px; }
.users-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.users-head-actions { display: flex; gap: 10px; align-items: center; }

.users-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
@media (max-width: 600px) { .users-grid { grid-template-columns: 1fr; } }

.user-card { background: var(--bg-2, #1a1a1a); border: 1px solid rgba(255,255,255,.05); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 12px; transition: border-color .2s, transform .2s; }
.user-card:hover { border-color: rgba(155,95,255,.25); }
.user-card.is-blocked { opacity: .55; }

.user-card-head { display: flex; align-items: center; gap: 12px; }
.user-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; letter-spacing: -.02em; }
.user-card-meta { flex: 1; min-width: 0; }
.user-card-name { font-size: 14px; font-weight: 600; color: #fff; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.user-card-login { font-size: 12px; color: rgba(255,255,255,.45); margin-top: 2px; font-family: monospace; }
.user-tag-me { background: rgba(57,255,143,.12); color: #39FF8F; font-size: 10px; padding: 1px 6px; border-radius: 4px; font-weight: 500; font-family: inherit; }
.user-tag-blocked { background: rgba(255,71,87,.15); color: #FF4757; font-size: 10px; padding: 1px 6px; border-radius: 4px; font-weight: 500; font-family: inherit; }

.user-role-pill { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 100px; white-space: nowrap; }
.user-role-pill.role-super   { background: linear-gradient(135deg, rgba(124,58,237,.2), rgba(219,39,119,.2)); color: #c084fc; border: 1px solid rgba(155,95,255,.3); }
.user-role-pill.role-preset  { background: rgba(57,255,143,.1);  color: #39FF8F; }
.user-role-pill.role-custom  { background: rgba(255,255,255,.05); color: rgba(255,255,255,.6); }

.user-perms { display: flex; flex-wrap: wrap; gap: 5px; }
.perm-chip { font-size: 11px; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,.04); color: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.05); }
.perm-chip-all { background: rgba(155,95,255,.12); color: #c084fc; border-color: rgba(155,95,255,.2); font-weight: 600; }
.perm-chip-more { background: transparent; color: rgba(255,255,255,.4); }

.user-meta-row { display: flex; gap: 8px; align-items: center; font-size: 11px; color: rgba(255,255,255,.5); flex-wrap: wrap; }
.user-meta-row svg { opacity: .5; }

.user-card-actions { display: flex; gap: 4px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.04); }
.user-card-actions form { display: inline; }
.user-card-actions .btn-ghost { padding: 5px 10px; gap: 5px; display: inline-flex; align-items: center; }

.users-empty { text-align: center; color: rgba(255,255,255,.4); font-size: 13px; padding: 40px; }

/* USER EDIT */
.user-edit-page { max-width: 760px; }
.user-edit-head { margin-bottom: 20px; }
.user-edit-head .back-link { display: inline-flex; align-items: center; gap: 5px; color: rgba(255,255,255,.45); font-size: 12px; margin-bottom: 10px; }
.user-edit-head .back-link:hover { color: #c084fc; }

.form-label { display: block; font-size: 11px; color: rgba(255,255,255,.55); margin-bottom: 6px; font-weight: 500; }

.role-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 720px) { .role-presets { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .role-presets { grid-template-columns: 1fr; } }

.role-preset-btn { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: 12px 14px; cursor: pointer; text-align: left; transition: all .2s; display: flex; flex-direction: column; gap: 3px; color: inherit; font: inherit; }
.role-preset-btn:hover { border-color: rgba(155,95,255,.4); background: rgba(155,95,255,.05); }
.role-preset-name { font-size: 13px; font-weight: 600; color: #fff; }
.role-preset-desc { font-size: 11px; color: rgba(255,255,255,.5); }

.perm-row { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background .15s; font-size: 13px; color: rgba(255,255,255,.85); }
.perm-row:hover { background: rgba(255,255,255,.03); }
.perm-row input[type=checkbox] { margin-top: 2px; accent-color: #9B5FFF; cursor: pointer; }
.perm-row-star { background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(219,39,119,.08)); border: 1px solid rgba(155,95,255,.15); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }

.perm-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; transition: opacity .2s; }
@media (max-width: 720px) { .perm-groups { grid-template-columns: 1fr; } }
.perm-groups.is-disabled { opacity: .4; pointer-events: none; }

.perm-group-title { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.4); margin-bottom: 6px; font-weight: 600; }
.perm-group-items { display: flex; flex-direction: column; gap: 1px; }


/* Dashboard — cafe stats */
.cafe-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.cafe-stat { background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.04); border-radius: 10px; padding: 12px 14px; }
.cafe-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.45); margin-bottom: 6px; }
.cafe-stat-value { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; color: #fff; line-height: 1; }
.cafe-stat-sub { font-size: 10px; color: rgba(255,255,255,.4); margin-top: 4px; }