/* Shared interaction and layout rules. Public DJ themes keep their own identity. */
:root { color-scheme: dark; --ui-focus: #64ded3; --ui-muted: #a4adb5; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { touch-action: manipulation; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--ui-focus) !important; outline-offset: 3px;
}
.skip-link { position: fixed; top: 8px; left: 8px; transform: translateY(-180%); z-index: 20000; padding: 12px 18px; background: #fff; color: #111; border-radius: 8px; }
.skip-link:focus { transform: none; }
.popup-box { max-height: calc(100dvh - 32px); overflow-y: auto; }
.popup-close { min-width: 44px; min-height: 44px; }
.ui-panel { --muted: var(--ui-muted); --primary: #2ea6a0; line-height: 1.5; }
.ui-panel :is(.main, .app-content, .main-inner, .container, .card, .card-body, .form-group, .fg, .search-box, .filter-row) { min-width: 0; }
.ui-panel :is(.main, .app-content) { max-width: 100%; }
.ui-panel :is(.page-header, .card-header, .section-header) { gap: 12px; flex-wrap: wrap; }
.ui-panel :is(.page-title, .section-title) { line-height: 1.25; overflow-wrap: anywhere; }
.ui-panel :is(.card, .form-panel, .item-card, .stat-card) { border-radius: 14px; }
.ui-panel :is(.form-hint, .stat-sub, .page-sub, .page-subtitle, .text-muted, .user-email, .item-sub, .coupon-meta) { color: var(--ui-muted); }
.ui-panel :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=hidden]), select, textarea) { max-width: 100%; min-width: 0; }
.ui-panel :is(.form-input, .form-select, .form-textarea, .fi) { min-height: 44px; }
.ui-panel :is(.btn, .topbar-btn, .modal-close, .category-btn, .tab, .search-box button) { min-height: 44px; }
.ui-panel :is(.btn-icon, .modal-close, .topbar-btn) { min-width: 44px; }
.ui-panel :is(.stats-grid, .grid, .form-row) > * { min-width: 0; }
.ui-panel .stats-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.ui-admin .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-admin .stat-card { gap: 10px; padding: 14px 10px; }
.ui-admin .stat-icon { width: 36px; height: 36px; font-size: 16px; }
.ui-panel .search-box input { min-width: 0; width: 100%; }
.ui-panel :is(.filter-row, .filters) { min-width: 0; }
.ui-panel .filter-row { flex-wrap: wrap; }
.ui-panel .filter-row select { min-width: 0; }
.ui-panel .table-wrapper { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.ui-panel .table-wrapper:focus-visible { outline-offset: -3px; }
.ui-panel .table-scroll-hint { padding: 8px 14px; color: var(--ui-muted); font-size: 12px; }
.ui-panel table { min-width: 600px; }
.ui-panel td { overflow-wrap: normal; }
.ui-panel .dropdown-menu { max-width: calc(100vw - 24px); max-height: calc(100dvh - 100px); overflow-y: auto; }
.ui-panel :is(.dropdown-menu a, .dropdown-menu button) { min-height: 44px; }
.ui-panel :is(.modal-content, .modal-box, .modal-overlay > .modal) { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.ui-panel .more-sheet-content { max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; }
.ui-panel .sidebar-nav a, .ui-panel .bottom-nav a { min-height: 44px; }
.ui-panel .sidebar-nav a.active, .ui-panel .btn-primary { color: #071c1a; font-weight: 700; }
.ui-panel :is(.btn-whatsapp, .btn-success) { color: #071c1a; font-weight: 700; }
.ui-panel .btn-danger { background: #b91c1c; color: #fff; }
.ui-panel .bottom-nav a.active { color: #64ded3; }
.ui-panel .empty, .ui-panel .empty-state { color: var(--ui-muted); }
.ui-panel .btn[aria-disabled=true] { opacity: .65; cursor: default; pointer-events: none; }
.ui-panel .catalog-note { color: var(--ui-muted); font-size: 13px; margin: -4px 0 16px; }
.ui-panel :is(.toggle-switch, .toggle-mini):has(input:focus-visible) { outline: 3px solid var(--ui-focus); outline-offset: 4px; }
.ui-panel .icon-picker input[type=radio] { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; }
.ui-panel .icon-picker input:focus-visible + label { outline: 3px solid var(--ui-focus); outline-offset: 3px; }
.ui-panel .admin-build { position: static; text-align: right; padding: 8px 16px; }
@media (min-width: 769px) and (max-width: 1100px) {
    .ui-dashboard .navbar-nav { display: none; }
    .ui-dashboard .tabs-mobile { display: block; }
}
@media (min-width: 769px) {
    .ui-admin .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ui-admin .main { width: calc(100% - 220px); }
    .ui-panel :is(.form-row, .grid-2) { min-width: 0; }
}
@media (max-width: 768px) {
    :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=hidden]), select, textarea) { font-size: 16px; }
    :is(.site-nav-toggle, .search-wrap button, .auth-box .btn) { min-height: 44px; }
    .ui-panel :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=hidden]), select, textarea) { font-size: 16px; }
    .ui-panel :is(.grid-2, .grid-3, .grid-4) { grid-template-columns: minmax(0, 1fr); }
    .ui-panel .bottom-nav { height: calc(64px + env(safe-area-inset-bottom)); }
    .ui-panel .bottom-nav-inner { height: 64px; }
    .ui-panel .form-row { flex-wrap: wrap; }
    .ui-panel .modal-close { flex-shrink: 0; }
    .ui-panel .topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ui-panel .admin-banner { font-size: 11px; gap: 10px; }
    .ui-panel .admin-banner span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ui-panel .admin-banner a { flex-shrink: 0; }
    .ui-dashboard .tabs { display: flex; overflow-x: auto; }
    .ui-dashboard .tab { flex: 1 0 auto; justify-content: center; }
    .ui-dashboard .fab-edit-site { display: none; }
    .ui-dashboard .hero-banner { padding: 24px 20px; }
}
@media (max-width: 640px) {
    .ui-editor .sidebar { padding-bottom: env(safe-area-inset-bottom); }
    .ui-editor .sidebar-nav a { flex: 1 1 0; min-width: 0; gap: 4px; min-height: 64px; padding: 8px 2px; }
    .ui-editor .sidebar-nav a span { display: block; max-width: 100%; font-size: 9px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
    .ui-editor .sidebar-nav a.active { color: #64ded3; }
    .ui-editor :is(.app-content, .main) { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
    .ui-editor .save-bar { position: static; margin-top: 16px; }
    .ui-editor .fab { bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}