/* MasteRSOC v8 — Scoped CSS (standalone pages, no conflict with existing styles) */

::-webkit-scrollbar { width: 6px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px }
.dark ::-webkit-scrollbar-thumb { background: #4b5563 }

/* ── Spinner ── */
.loader { border: 2px solid #e5e7eb; border-radius: 50%; border-top: 2px solid #4f46e5; width: 16px; height: 16px; animation: spin .8s linear infinite; display: inline-block; flex-shrink: 0 }
.dark .loader { border-color: #374151; border-top-color: #6366f1 }
@keyframes spin { 0% { transform: rotate(0) } 100% { transform: rotate(360deg) } }

/* ── Buttons ── */
.btn { padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; border: none }
.btn-primary { background: #4f46e5; color: #fff; border: 1px solid transparent }
.btn-primary:hover { background: #4338ca }
.btn-primary:disabled { background: #9ca3af; cursor: not-allowed }
.btn-secondary { background: #fff; color: #374151; border: 1px solid #d1d5db }
.btn-secondary:hover { background: #f9fafb }
.dark .btn-secondary { background: #374151; color: #d1d5db; border-color: #4b5563 }
.dark .btn-secondary:hover { background: #4b5563 }
.btn-ghost { background: transparent; color: #6b7280; border: none; padding: 5px 10px; font-size: 13px; font-weight: 500; cursor: pointer; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px }
.btn-ghost:hover { background: #f3f4f6; color: #374151 }
.dark .btn-ghost:hover { background: #374151; color: #d1d5db }
.btn-danger { background: transparent; color: #ef4444; border: none; padding: 5px 10px; font-size: 12px; font-weight: 500; cursor: pointer; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px }
.btn-danger:hover { background: #fef2f2 }
.dark .btn-danger:hover { background: #450a0a }
.btn-link { background: none; border: none; color: #4f46e5; font-size: 12px; font-weight: 600; cursor: pointer; padding: 0 }
.btn-link:hover { text-decoration: underline }

/* ── Inputs ── */
.inp { width: 100%; padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13px; background: #fff; color: #111827; outline: none; transition: border-color .15s, box-shadow .15s; box-sizing: border-box }
.inp:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.1) }
.dark .inp { background: #1f2937; border-color: #374151; color: #f9fafb }
.dark .inp:focus { border-color: #6366f1 }
textarea.inp { resize: vertical }

/* ── Labels ── */
.lbl { display: block; font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px }
.dark .lbl { color: #9ca3af }
.lbl-note { font-size: 10px; color: #9ca3af; font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 4px }

/* ── Card ── */
/* Exclude .sidebar.card — sidebar uses styles.css .card + .sidebar rules to stay consistent across all pages */
.card:not(.sidebar) { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px }
.dark .card:not(.sidebar) { background: #1f2937; border-color: #374151 }

/* ── Toggle ── */
.tgl { position: relative; width: 40px; height: 22px; background: #d1d5db; border-radius: 11px; cursor: pointer; transition: background .2s; flex-shrink: 0 }
.tgl.on { background: #4f46e5 }
.tgl-dot { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2) }
.tgl.on .tgl-dot { transform: translateX(18px) }

/* ── Campaign Sections ── */
.cs { margin-bottom: 0 }
.cs-hdr { font-size: 11px; font-weight: 700; color: #4f46e5; text-transform: uppercase; letter-spacing: .07em; padding: 10px 0 7px; border-bottom: 1px solid #e5e7eb; margin-bottom: 11px }
.dark .cs-hdr { border-color: #374151 }
.info-banner { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 9px 12px; font-size: 12px; color: #1e40af }
.dark .info-banner { background: #1e3a8a; border-color: #3b82f6; color: #93c5fd }
.warn-banner { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 9px 12px; font-size: 12px; color: #92400e }
.dark .warn-banner { background: #78350f; border-color: #f59e0b; color: #fde68a }

/* ── Adset ── */
.adset-wrap { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; margin-bottom: 12px; border-left: 4px solid #10b981 !important }
.dark .adset-wrap { border-color: #374151 }
.adset-hdr { background: #f8fafc; padding: 10px 14px; display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none }
.dark .adset-hdr { background: #0f172a }
.adset-body { border-top: 1px solid #e5e7eb; padding: 14px }
.dark .adset-body { border-top-color: #374151 }
.asec { background: #f8fafc; border-radius: 8px; padding: 10px 11px; margin-bottom: 8px }
.dark .asec { background: rgba(15,23,42,.5) }
.asec-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #6b7280; margin-bottom: 9px }
.dark .asec-title { color: #9ca3af }

/* ── Ad Card ── */
.ad-card { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; border-left: 4px solid #8b5cf6 !important }
.dark .ad-card { border-color: #374151 }
.ad-hdr { background: #f1f5f9; padding: 9px 12px; display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none }
.dark .ad-hdr { background: #1e293b }
.ad-body { padding: 12px; background: #fff }
.dark .ad-body { background: #111827 }

/* ── Creative ── */
.creative-wrap { position: relative; flex-shrink: 0 }
.c-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 7px; display: block }
.c-vid { width: 56px; height: 56px; border-radius: 7px; background: #1e1b4b; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #a5b4fc; font-size: 9px; font-weight: 700; gap: 2px }
.dark .c-vid { background: #312e81 }
.c-rm { position: absolute; top: -5px; right: -5px; width: 17px; height: 17px; background: #ef4444; color: #fff; border-radius: 50%; font-size: 9px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid #fff; z-index: 2 }
.dark .c-rm { border-color: #111827 }

/* ── Preview overlay ── */
#prev-ov { position: fixed; z-index: 9999; pointer-events: none; display: none; background: #111827; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); padding: 5px; overflow: hidden }

/* ── Drop zone ── */
.dz { border: 2px dashed #d1d5db; border-radius: 8px; transition: all .2s }
.dz.over { border-color: #4f46e5; background: #eef2ff }
.dark .dz { border-color: #4b5563 }
.dark .dz.over { border-color: #6366f1; background: #1e1b4b }

/* ── Country ── */
.c-chip { display: inline-flex; align-items: center; gap: 3px; background: #e0e7ff; color: #3730a3; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 500 }
.dark .c-chip { background: #312e81; color: #c7d2fe }
.cdrop-menu { position: absolute; top: calc(100% + 3px); left: 0; right: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.1); max-height: 180px; overflow-y: auto; z-index: 50 }
.dark .cdrop-menu { background: #1f2937; border-color: #374151 }
.cdrop-item { padding: 8px 11px; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: space-between }
.cdrop-item:hover { background: #f3f4f6 }
.dark .cdrop-item:hover { background: #374151 }
.cdrop-item-sel { color: #4f46e5; font-weight: 600 }
.cdrop-item-sel::after { content: ' ✓'; margin-left: auto; padding-left: 8px }
.cdrop-search { padding: 6px 8px; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; background: #fff; z-index: 1 }
.dark .cdrop-search { background: #1f2937; border-color: #374151 }
.cdrop-search input { width: 100%; padding: 4px 8px; font-size: 12px; border: 1px solid #d1d5db; border-radius: 6px; outline: none; box-sizing: border-box }
.dark .cdrop-search input { background: #374151; border-color: #4b5563; color: #f9fafb }
.cdrop-search input:focus { border-color: #4f46e5; box-shadow: 0 0 0 2px rgba(79,70,229,.1) }

/* ── Modal ── */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px }
.modal-box { background: #fff; border-radius: 16px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3) }
.dark .modal-box { background: #1f2937 }

/* ── Status Badges ── */
.sp { padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase }
.sp-draft { background: #f3f4f6; color: #6b7280 }
.dark .sp-draft { background: #374151; color: #9ca3af }
.sp-pending { background: #fef3c7; color: #92400e }
.sp-generating { background: #dbeafe; color: #1e40af }
.sp-generated { background: #d1fae5; color: #065f46 }
.sp-live { background: #4f46e5; color: #fff }
.sp-failed { background: #fee2e2; color: #991b1b }
.dark .sp-pending { background: #78350f; color: #fde68a }
.dark .sp-generating { background: #1e3a8a; color: #93c5fd }
.dark .sp-generated { background: #064e3b; color: #6ee7b7 }
.dark .sp-failed { background: #7f1d1d; color: #fca5a5 }

/* ── Step Dots ── */
.sdot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0 }
.sdot-active { background: #4f46e5; color: #fff }
.sdot-done { background: #10b981; color: #fff }
.sdot-idle { background: #e5e7eb; color: #9ca3af }
.dark .sdot-idle { background: #374151; color: #6b7280 }
.sline { height: 2px; width: 40px; background: #e5e7eb }
.dark .sline { background: #374151 }
.sline-done { background: #10b981 }

/* ── Char counter ── */
.cc { font-size: 10px; color: #9ca3af; text-align: right; margin-top: 1px }
.cc.warn { color: #f59e0b }
.cc.over { color: #ef4444 }

/* ── Placement group ── */
.pl-grp { background: #f1f5f9; border-radius: 8px; padding: 9px; margin-bottom: 6px }
.dark .pl-grp { background: rgba(15,23,42,.6) }

/* ── Chevron ── */
.chev { transition: transform .2s }
.chev.open { transform: rotate(180deg) }

/* ── Apply-shared button ── */
.apply-btn { background: #eef2ff; border: 1px solid #c7d2fe; color: #4338ca; border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all .15s }
.apply-btn:hover { background: #e0e7ff }
.dark .apply-btn { background: #1e1b4b; border-color: #4338ca; color: #a5b4fc }
.dark .apply-btn:hover { background: #312e81 }
.apply-btn-full { width: 100%; margin-top: 10px; padding: 9px; border-radius: 8px; background: #eef2ff; border: 1px solid #c7d2fe; color: #4338ca; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; display: flex; align-items: center; justify-content: center; gap: 5px }
.apply-btn-full:hover { background: #e0e7ff }
.dark .apply-btn-full { background: #1e1b4b; border-color: #4338ca; color: #a5b4fc }
.dark .apply-btn-full:hover { background: #312e81 }

/* ── Campaign card accent ── */
.camp-card { border-left: 4px solid #4f46e5 }

/* ── Shared creatives module ── */
.asec-shared { background: rgba(254,243,199,.5); border: 1px solid #fde68a }
.dark .asec-shared { background: rgba(120,53,15,.12); border-color: rgba(245,158,11,.25) }
.asec-shared .asec-title { color: #92400e }
.dark .asec-shared .asec-title { color: #fcd34d }

/* ── Frozen strip ── */
.frozen-strip { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 10px 14px; margin-bottom: 16px }
.dark .frozen-strip { background: rgba(5,46,22,.25); border-color: #166534 }

/* ── Tabs ── */
.tab-btn { padding: 7px 14px; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer; color: #6b7280; background: transparent; border: none; transition: all .15s; white-space: nowrap }
.tab-btn:hover { background: #f3f4f6; color: #374151 }
.dark .tab-btn:hover { background: #374151; color: #d1d5db }
.tab-btn.active { background: #4f46e5; color: #fff }
.tab-pane { display: none }
.tab-pane.active { display: block }

/* ── Tailwind-like utility classes used in JS-generated HTML ── */
.hidden { display: none !important }
.flex { display: flex }
.inline-flex { display: inline-flex }
.grid { display: grid }
.block { display: block }
.items-center { align-items: center }
.items-start { align-items: flex-start }
.justify-between { justify-content: space-between }
.justify-center { justify-content: center }
.justify-end { justify-content: flex-end }
.flex-1 { flex: 1 }
.flex-shrink-0 { flex-shrink: 0 }
.flex-wrap { flex-wrap: wrap }
.min-w-0 { min-width: 0 }
.w-full { width: 100% }
.gap-1 { gap: 4px }
.gap-1\.5 { gap: 6px }
.gap-2 { gap: 8px }
.gap-3 { gap: 12px }
.gap-4 { gap: 16px }
.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 }
.mt-1 { margin-top: 4px }
.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 }
.ml-2 { margin-left: 8px }
.ml-3 { margin-left: 12px }
.ml-4 { margin-left: 16px }
.ml-auto { margin-left: auto }
.mr-auto { margin-right: auto }
.mx-auto { margin-left: auto; margin-right: auto }
.p-0 { padding: 0 }
.p-1 { padding: 4px }
.p-1\.5 { padding: 6px }
.p-2 { padding: 8px }
.p-2\.5 { padding: 10px }
.p-3 { padding: 12px }
.p-4 { padding: 16px }
.p-5 { padding: 20px }
.p-6 { padding: 24px }
.px-2 { padding-left: 8px; padding-right: 8px }
.px-2\.5 { padding-left: 10px; padding-right: 10px }
.px-3 { padding-left: 12px; padding-right: 12px }
.px-4 { padding-left: 16px; padding-right: 16px }
.px-5 { padding-left: 20px; padding-right: 20px }
.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-3 { padding-top: 12px; padding-bottom: 12px }
.py-4 { padding-top: 16px; padding-bottom: 16px }
.py-5 { padding-top: 20px; padding-bottom: 20px }
.py-8 { padding-top: 32px; padding-bottom: 32px }
.py-24 { padding-top: 96px; padding-bottom: 96px }
.pl-6 { padding-left: 24px }
.pb-0 { padding-bottom: 0 }
.pb-16 { padding-bottom: 64px }
.pt-3 { padding-top: 12px }
.pt-4 { padding-top: 16px }
.space-y-1 > * + * { margin-top: 4px }
.space-y-1\.5 > * + * { margin-top: 6px }
.space-y-2 > * + * { margin-top: 8px }
.space-y-3 > * + * { margin-top: 12px }
.space-y-4 > * + * { margin-top: 16px }
.space-y-5 > * + * { margin-top: 20px }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.col-span-2 { grid-column: span 2 / span 2 }
.col-span-3 { grid-column: span 3 / span 3 }
.text-xs { font-size: 12px }
.text-sm { font-size: 13px }
.text-base { font-size: 14px }
.text-lg { font-size: 18px }
.text-xl { font-size: 20px }
.text-2xl { font-size: 24px }
.text-4xl { font-size: 36px }
.font-normal { font-weight: 400 }
.font-medium { font-weight: 500 }
.font-semibold { font-weight: 600 }
.font-bold { font-weight: 700 }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.uppercase { text-transform: uppercase }
.tracking-wide { letter-spacing: .025em }
.leading-relaxed { line-height: 1.625 }
.text-center { text-align: center }
.text-right { text-align: right }
.text-left { text-align: left }
.text-gray-400 { color: #9ca3af }
.text-gray-500 { color: #6b7280 }
.text-gray-600 { color: #4b5563 }
.text-gray-700 { color: #374151 }
.dark .text-gray-300 { color: #d1d5db }
.dark .text-gray-400 { color: #9ca3af }
.text-red-400 { color: #f87171 }
.text-red-600 { color: #dc2626 }
.text-green-500 { color: #22c55e }
.text-blue-500 { color: #3b82f6 }
.text-primary { color: #4f46e5 }
.text-indigo-500 { color: #6366f1 }
.text-indigo-400 { color: #818cf8 }
.text-indigo-500 { color: #6366f1 }
.text-purple-600 { color: #9333ea }
.dark .text-purple-300 { color: #d8b4fe }
.text-emerald-700 { color: #047857 }
.dark .text-emerald-400 { color: #34d399 }
.text-blue-500 { color: #3b82f6 }
.normal-case { text-transform: none }
.select-none { user-select: none }
.cursor-pointer { cursor: pointer }
.cursor-not-allowed { cursor: not-allowed }
.resize-none { resize: none }
.overflow-hidden { overflow: hidden }
.overflow-y-auto { overflow-y: auto }
.relative { position: relative }
.absolute { position: absolute }
.sticky { position: sticky }
.fixed { position: fixed }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0 }
.top-0 { top: 0 }
.top-1\/2 { top: 50% }
.left-0 { left: 0 }
.left-3 { left: 12px }
.right-0 { right: 0 }
.z-10 { z-index: 10 }
.z-40 { z-index: 40 }
.z-50 { z-index: 50 }
.-translate-y-1\/2 { transform: translateY(-50%) }
.bg-white { background-color: #fff }
.bg-gray-50 { background-color: #f9fafb }
.bg-gray-100 { background-color: #f3f4f6 }
.dark .bg-gray-700 { background-color: #374151 }
.dark .bg-gray-800 { background-color: #1f2937 }
.dark .bg-gray-900 { background-color: #111827 }
.bg-emerald-50 { background-color: #ecfdf5 }
.dark .bg-emerald-900\/20 { background-color: rgba(6,78,59,.2) }
.bg-purple-50 { background-color: #faf5ff }
.dark .bg-purple-900\/20 { background-color: rgba(88,28,135,.2) }
.bg-indigo-50 { background-color: #eef2ff }
.dark .bg-indigo-900\/30 { background-color: rgba(49,46,129,.3) }
.bg-emerald-500 { background-color: #10b981 }
.bg-purple-500 { background-color: #8b5cf6 }
.bg-indigo-500 { background-color: #6366f1 }
.border-t { border-top: 1px solid }
.border-b { border-bottom: 1px solid }
.border { border: 1px solid }
.border-gray-100 { border-color: #f3f4f6 }
.border-gray-200 { border-color: #e5e7eb }
.dark .border-gray-700 { border-color: #374151 }
.dark .border-gray-600 { border-color: #4b5563 }
.rounded { border-radius: 4px }
.rounded-md { border-radius: 6px }
.rounded-lg { border-radius: 8px }
.rounded-xl { border-radius: 12px }
.rounded-2xl { border-radius: 16px }
.rounded-full { border-radius: 9999px }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1) }
.transition-shadow { transition: box-shadow .15s }
.transition-colors { transition: color .15s, background-color .15s, border-color .15s }
.pointer-events-none { pointer-events: none }
.opacity-80 { opacity: .8 }
.opacity-60 { opacity: .6 }
.min-h-screen { min-height: 100vh }
.h-3 { height: 12px }
.h-3\.5 { height: 14px }
.h-4 { height: 16px }
.h-5 { height: 20px }
.h-6 { height: 24px }
.h-8 { height: 32px }
.h-11 { height: 44px }
.h-12 { height: 48px }
.h-14 { height: 56px }
.h-16 { height: 64px }
.h-28 { height: 112px }
.w-3 { width: 12px }
.w-3\.5 { width: 14px }
.w-4 { width: 16px }
.w-5 { width: 20px }
.w-6 { width: 24px }
.w-8 { width: 32px }
.w-16 { width: 64px }
.max-w-xs { max-width: 20rem }
.max-w-sm { max-width: 24rem }
.max-w-md { max-width: 28rem }
.max-w-3xl { max-width: 48rem }
.max-w-6xl { max-width: 72rem }
.max-w-\[150px\] { max-width: 150px }
.max-w-\[160px\] { max-width: 160px }
.max-h-\[70vh\] { max-height: 70vh }
.max-h-\[90vh\] { max-height: 90vh }
.shrink-0 { flex-shrink: 0 }
.word-break-all { word-break: break-all }
.hover\:opacity-80:hover { opacity: .8 }
.hover\:underline:hover { text-decoration: underline }
.hover\:text-red-600:hover { color: #dc2626 }
.hover\:border-primary:hover { border-color: #4f46e5 }
.hover\:text-primary:hover { color: #4f46e5 }
.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1) }
.last\:border-0:last-child { border: 0 }

/* ── rsoc8-card (scoped v8 card, avoids conflict with styles.css .card) ── */
.rsoc8-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: 16px;
}

/* Body reset for v8 pages */
.rsoc8-body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #f9fafb;
  color: #111827;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}
.rsoc8-body.dark { background: #111827; color: #f9fafb }

/* ── Field Errors ── */
.field-error { display: none; font-size: 11px; color: #ef4444; margin-top: 3px; font-weight: 500 }
.field-error.visible { display: block }
.inp-error { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.1) !important }
.dark .inp-error { border-color: #f87171 !important }

/* ── Form Error Banner ── */
#form-error-banner { display: none; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 8px; padding: 10px 14px; font-size: 13px; font-weight: 500; margin-bottom: 12px }
#form-error-banner.visible { display: flex; align-items: center; gap: 8px }
.dark #form-error-banner { background: #450a0a; border-color: #7f1d1d; color: #fca5a5 }

/* ── Searchable Select ── */
.ss-wrap { position: relative; width: 100% }
.ss-trigger { width: 100%; padding: 7px 28px 7px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13px; background: #fff; color: #111827; cursor: pointer; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 6px; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; white-space: nowrap; overflow: hidden }
.ss-trigger:focus, .ss-trigger.open { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.1); outline: none }
.ss-trigger .ss-arrow { flex-shrink: 0; width: 14px; height: 14px; opacity: .5; transition: transform .2s }
.ss-trigger.open .ss-arrow { transform: rotate(180deg) }
.ss-trigger .ss-val { overflow: hidden; text-overflow: ellipsis; flex: 1 }
.dark .ss-trigger { background: #1f2937; border-color: #374151; color: #f9fafb }
.dark .ss-trigger:focus, .dark .ss-trigger.open { border-color: #6366f1 }
.ss-trigger.inp-error { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.1) !important }

.ss-panel { display: none; position: absolute; z-index: 1000; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); overflow: hidden }
.ss-panel.open { display: flex; flex-direction: column }
.dark .ss-panel { background: #1f2937; border-color: #374151 }

.ss-search { padding: 8px 10px; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; gap: 6px }
.dark .ss-search { border-bottom-color: #374151 }
.ss-search input { flex: 1; border: none; outline: none; font-size: 12px; background: transparent; color: #111827 }
.dark .ss-search input { color: #f9fafb }
.ss-search svg { flex-shrink: 0; opacity: .4 }

.ss-list { max-height: 200px; overflow-y: auto }
.ss-opt { padding: 8px 12px; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; color: #111827 }
.ss-opt:hover { background: #f3f4f6 }
.dark .ss-opt { color: #f9fafb }
.dark .ss-opt:hover { background: #374151 }
.ss-opt.ss-sel { color: #4f46e5; font-weight: 600 }
.ss-opt.ss-sel::after { content: '✓'; font-size: 11px }
.dark .ss-opt.ss-sel { color: #818cf8 }
.ss-opt.ss-focused { background: #ede9fe; outline: 2px solid #4f46e5; outline-offset: -2px }
.dark .ss-opt.ss-focused { background: #312e81 }
.ss-none { padding: 10px 12px; font-size: 12px; color: #9ca3af; font-style: italic }

/* ── Toast notification ── */
.toast { position: fixed; bottom: 24px; right: 24px; padding: 12px 18px; border-radius: 10px; font-size: 13px; font-weight: 500; z-index: 9999; box-shadow: 0 8px 24px rgba(0,0,0,.15); animation: toastFadeIn .2s ease; max-width: 340px }
.toast-success { background: #16a34a; color: #fff }
.toast-error   { background: #dc2626; color: #fff }
.toast-info    { background: var(--primary, #2563eb); color: #fff }
@keyframes toastFadeIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } }