/* ═══════════════════════════════════════════════════════════════════════════ Bonga2DJ — Main Stylesheet Dark / Light mode via data-theme attribute on Retractable nested left nav, mobile-first responsive ═══════════════════════════════════════════════════════════════════════════ */ /* ── Custom Properties ─────────────────────────────────────────────────────── */ :root { /* Brand */ --c-primary: #7c3aed; --c-primary-l: #a78bfa; --c-accent: #2bd9e9; --c-amber: #f7b733; --c-green: #22c55e; --c-red: #ef4444; --c-rose: #f43f5e; /* Dark theme defaults */ --c-bg: #08080e; --c-bg2: #0f0f18; --c-surface: #13131d; --c-surface2: #1b1b28; --c-border: rgba(255,255,255,.09); --c-border2: rgba(255,255,255,.16); --c-text: #f2eee6; --c-text2: #a9a6bb; --c-text3: #6e6c81; /* Sidebar */ --sidebar-w: 240px; --sidebar-w-col: 62px; /* collapsed width */ --topbar-h: 52px; /* Typography */ --f-disp: 'Bricolage Grotesque', sans-serif; --f-body: 'Inter', sans-serif; --f-mono: 'Space Mono', monospace; /* Misc */ --radius: 10px; --radius-sm: 6px; --shadow: 0 8px 30px rgba(0,0,0,.45); --trans: .2s cubic-bezier(.2,.8,.2,1); --grad: linear-gradient(110deg,var(--c-amber),var(--c-rose) 42%,var(--c-primary) 82%); } html[data-theme="light"] { --c-bg: #f0ecdf; --c-bg2: #e7e2d0; --c-surface: #fffdf7; --c-surface2: #f5f0e4; --c-border: rgba(0,0,0,.10); --c-border2: rgba(0,0,0,.18); --c-text: #14120d; --c-text2: #4a4637; --c-text3: #807a6b; --shadow: 0 4px 20px rgba(0,0,0,.15); } /* ── Reset & Base ──────────────────────────────────────────────────────────── */ *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { background: var(--c-bg); color: var(--c-text); font-family: var(--f-body); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background var(--trans), color var(--trans); } h1,h2,h3,h4,h5 { font-family: var(--f-disp); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; } a { color: var(--c-primary-l); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; } button { cursor: pointer; font-family: inherit; font-size: inherit; border: none; background: none; } input, select, textarea { font-family: inherit; font-size: .875rem; background: var(--c-bg); color: var(--c-text); border: 1px solid var(--c-border2); border-radius: var(--radius-sm); padding: .55rem .8rem; outline: none; transition: border-color var(--trans); width: 100%; } input:focus, select:focus, textarea:focus { border-color: var(--c-primary); } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-thumb { background: var(--c-text3); border-radius: 3px; } /* ── App Layout ────────────────────────────────────────────────────────────── */ #app { display: flex; min-height: 100vh; } /* ── Sidebar ───────────────────────────────────────────────────────────────── */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); background: var(--c-surface); border-right: 1px solid var(--c-border); display: flex; flex-direction: column; z-index: 200; transition: width var(--trans), transform var(--trans); overflow: hidden; } .sidebar.collapsed { width: var(--sidebar-w-col); } .sidebar.collapsed .sidebar-label, .sidebar.collapsed .brand-name { opacity: 0; pointer-events: none; width: 0; overflow: hidden; } .sidebar.collapsed .nav-group-children { display: none; } /* mobile: hidden off-screen by default */ @media(max-width: 860px) { .sidebar { transform: translateX(-100%); width: var(--sidebar-w) !important; } .sidebar.open { transform: translateX(0); } } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 14px 12px; border-bottom: 1px solid var(--c-border); flex-shrink: 0; } .brand-logo { width: 30px; height: 30px; border-radius: 9px; background: var(--grad); position: relative; flex-shrink: 0; } .brand-logo::before { content: ''; position: absolute; width: 3px; height: 12px; top: 9px; left: 8px; background: var(--c-bg); border-radius: 2px; box-shadow: 5px 1px 0 var(--c-bg), 10px -1px 0 var(--c-bg); animation: eq 1.1s ease-in-out infinite alternate; } @keyframes eq { 0%{height:5px;top:12px} 100%{height:14px;top:8px} } .brand-name { font-family: var(--f-disp); font-weight: 800; font-size: 17px; white-space: nowrap; transition: var(--trans); } .sidebar-toggle { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 7px; flex-shrink: 0; transition: background var(--trans); } .sidebar-toggle:hover { background: var(--c-surface2); } .sidebar-toggle span { display: block; width: 18px; height: 2px; background: var(--c-text2); border-radius: 1px; transition: var(--trans); } /* Nav groups */ .sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 0; } .nav-group { margin-bottom: 2px; } .nav-group-header { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: var(--radius-sm); margin: 0 6px; cursor: pointer; transition: background var(--trans); user-select: none; font-size: .83rem; font-weight: 600; color: var(--c-text2); letter-spacing: .03em; } .nav-group-header:hover { background: var(--c-surface2); color: var(--c-text); } .nav-group-header .nav-icon { font-size: 16px; flex-shrink: 0; width: 20px; text-align: center; } .nav-group-header .sidebar-label { flex: 1; white-space: nowrap; transition: var(--trans); } .nav-group-header .nav-chevron { font-size: 10px; transition: transform var(--trans); margin-left: auto; } .nav-group.open .nav-chevron { transform: rotate(90deg); } .nav-group-children { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--c-border); overflow: hidden; max-height: 0; transition: max-height .3s ease; } .nav-group.open .nav-group-children { max-height: 600px; } .nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: var(--radius-sm); margin: 1px 6px; cursor: pointer; transition: background var(--trans), color var(--trans); font-size: .83rem; color: var(--c-text2); white-space: nowrap; } .nav-item:hover { background: var(--c-surface2); color: var(--c-text); } .nav-item.active { background: rgba(124,58,237,.2); color: var(--c-primary-l); border-left: 2px solid var(--c-primary); } .nav-item .nav-icon { font-size: 15px; flex-shrink: 0; width: 20px; text-align: center; } .nav-item .sidebar-label { transition: var(--trans); } .sidebar-footer { border-top: 1px solid var(--c-border); padding: 10px 0; flex-shrink: 0; } .theme-toggle { display: flex; align-items: center; gap: 9px; padding: 9px 12px; margin: 0 6px; border-radius: var(--radius-sm); width: calc(100% - 12px); color: var(--c-text2); font-size: .83rem; transition: background var(--trans); } .theme-toggle:hover { background: var(--c-surface2); } .theme-icon { font-size: 15px; width: 20px; text-align: center; } .nav-signout { color: var(--c-red) !important; width: 100%; } /* ── Main wrap ─────────────────────────────────────────────────────────────── */ .main-wrap { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-width: 0; transition: margin-left var(--trans); } .sidebar.collapsed ~ .main-wrap, #sidebar.collapsed + * .main-wrap { margin-left: var(--sidebar-w-col); } @media(max-width: 860px) { .main-wrap { margin-left: 0 !important; } } /* ── Topbar (mobile) ───────────────────────────────────────────────────────── */ .topbar { display: none; align-items: center; gap: 12px; padding: 0 16px; height: var(--topbar-h); background: var(--c-surface); border-bottom: 1px solid var(--c-border); position: sticky; top: 0; z-index: 100; } @media(max-width: 860px) { .topbar { display: flex; } } .topbar-menu { font-size: 20px; color: var(--c-text2); } .topbar-title { font-family: var(--f-disp); font-weight: 700; font-size: 16px; flex: 1; } .topbar-actions { display: flex; align-items: center; gap: 10px; } .topbar-theme { font-size: 18px; } /* ── Page container ────────────────────────────────────────────────────────── */ .page-container { flex: 1; padding: 28px 32px; overflow-y: auto; scroll-padding-top: 20px; } @media(max-width: 640px) { .page-container { padding: 18px 16px; } } /* ── Page header ───────────────────────────────────────────────────────────── */ .page-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } .page-header h1 { font-size: clamp(22px,4vw,36px); flex: 1; } .page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* ── Buttons ───────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: .55rem 1.1rem; border-radius: var(--radius); font-weight: 600; font-size: .875rem; transition: all var(--trans); border: 1px solid transparent; white-space: nowrap; } .btn--primary { background: var(--c-primary); color: #fff; } .btn--primary:hover { background: #6d28d9; } .btn--secondary { background: var(--c-surface2); color: var(--c-text); border-color: var(--c-border2); } .btn--secondary:hover { border-color: var(--c-primary); color: var(--c-primary-l); } .btn--ghost { background: transparent; color: var(--c-text2); border-color: var(--c-border); } .btn--ghost:hover { background: var(--c-surface2); } .btn--danger { background: var(--c-red); color: #fff; } .btn--danger:hover { background: #dc2626; } .btn--sm { padding: .35rem .75rem; font-size: .8rem; } .btn--xs { padding: .2rem .55rem; font-size: .75rem; } .btn--icon { padding: .5rem; border-radius: 8px; } .btn:disabled { opacity: .45; cursor: not-allowed; } /* ── Cards ─────────────────────────────────────────────────────────────────── */ .card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; padding: 20px; } .card--hover { transition: transform var(--trans), border-color var(--trans), box-shadow var(--trans); } .card--hover:hover { transform: translateY(-3px); border-color: var(--c-border2); box-shadow: var(--shadow); } .card-title { font-size: 1rem; font-weight: 700; margin-bottom: 6px; } .card-meta { font-size: .78rem; color: var(--c-text3); font-family: var(--f-mono); } /* ── Grid layouts ──────────────────────────────────────────────────────────── */ .grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 14px; } .grid-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); gap: 12px; } .stack { display: flex; flex-direction: column; gap: 10px; } .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* ── Forms ─────────────────────────────────────────────────────────────────── */ .form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; } .form-label { font-size: .84rem; font-weight: 600; color: var(--c-text2); } .form-hint { font-size: .75rem; color: var(--c-text3); } .form-error { font-size: .78rem; color: var(--c-red); margin-top: 3px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media(max-width:480px) { .form-row { grid-template-columns: 1fr; } } /* ── Modals ────────────────────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fadeIn .2s ease; } .modal-overlay.hidden { display: none; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } .modal-box { background: var(--c-surface); border: 1px solid var(--c-border2); border-radius: 18px; padding: 28px; max-width: 580px; width: 100%; max-height: 92vh; overflow-y: auto; position: relative; animation: popIn .25s cubic-bezier(.2,.8,.2,1); box-shadow: var(--shadow); } .modal-box--sm { max-width: 420px; } .modal-box--xs { max-width: 340px; } .modal-box--lg { max-width: 780px; } @keyframes popIn { from{transform:translateY(16px) scale(.97);opacity:0} to{transform:none;opacity:1} } .modal-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 8px; background: var(--c-surface2); color: var(--c-text2); font-size: 13px; line-height: 30px; text-align: center; transition: background var(--trans); } .modal-close:hover { background: var(--c-border2); color: var(--c-text); } .modal-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 18px; } /* Sub-modal (popup within popup) */ .sub-modal { z-index: 600; } /* Confirm dialog */ .confirm-msg { font-size: .95rem; margin-bottom: 20px; line-height: 1.55; } .confirm-actions { display: flex; gap: 10px; justify-content: flex-end; } /* ── Context menu ──────────────────────────────────────────────────────────── */ .context-menu { position: fixed; z-index: 800; background: var(--c-surface2); border: 1px solid var(--c-border2); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 160px; overflow: hidden; animation: fadeIn .15s ease; } .context-menu.hidden { display: none; } .context-menu-item { display: flex; align-items: center; gap: 9px; padding: 10px 14px; font-size: .84rem; cursor: pointer; transition: background var(--trans); } .context-menu-item:hover { background: var(--c-border); } .context-menu-item.danger { color: var(--c-red); } .context-menu-sep { height: 1px; background: var(--c-border); margin: 3px 0; } /* ── Toast ─────────────────────────────────────────────────────────────────── */ .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 900; display: flex; flex-direction: column; gap: 8px; max-width: 360px; width: calc(100vw - 48px); } .toast { background: var(--c-surface2); border: 1px solid var(--c-border2); border-radius: var(--radius); padding: 13px 16px; font-size: .875rem; box-shadow: var(--shadow); animation: toastIn .25s ease; display: flex; align-items: flex-start; gap: 10px; } .toast--success { border-left: 3px solid var(--c-green); } .toast--error { border-left: 3px solid var(--c-red); } .toast--warning { border-left: 3px solid var(--c-amber); } @keyframes toastIn { from{transform:translateX(30px);opacity:0} to{transform:none;opacity:1} } /* ── Data tables ───────────────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--radius); } table { width: 100%; border-collapse: collapse; min-width: 480px; } th,td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--c-border); font-size: .84rem; } th { font-family: var(--f-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--c-text3); background: var(--c-surface); } tr:last-child td { border-bottom: none; } tr:hover td { background: var(--c-surface2); } td.mono { font-family: var(--f-mono); font-size: .78rem; } .td-actions { display: flex; gap: 5px; } /* ── Badges ────────────────────────────────────────────────────────────────── */ .badge { display: inline-block; font-size: .7rem; font-weight: 700; font-family: var(--f-mono); padding: .18rem .55rem; border-radius: 20px; text-transform: uppercase; letter-spacing: .05em; } .badge--primary { background: rgba(124,58,237,.25); color: var(--c-primary-l); } .badge--green { background: rgba(34,197,94,.2); color: var(--c-green); } .badge--amber { background: rgba(247,183,51,.2); color: var(--c-amber); } .badge--red { background: rgba(239,68,68,.2); color: var(--c-red); } .badge--gray { background: var(--c-surface2); color: var(--c-text3); } /* ── Inline editable fields ─────────────────────────────────────────────────── */ .editable { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; border-radius: 4px; padding: 2px 6px; transition: background var(--trans); } .editable:hover { background: var(--c-surface2); } .editable .edit-icon { font-size: 11px; opacity: .5; } .editable-input { background: var(--c-surface2); border: 1px solid var(--c-primary); border-radius: 4px; padding: 3px 8px; font-size: inherit; color: var(--c-text); min-width: 80px; } /* ── Beat Lab sequencer ──────────────────────────────────────────────────────── */ .seq-grid { display: grid; gap: 4px; } .seq-row { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; } .seq-label { width: 56px; font-size: .7rem; font-weight: 700; text-transform: uppercase; color: var(--c-text3); flex-shrink: 0; } .seq-step { width: 28px; height: 28px; border-radius: 4px; background: var(--c-surface2); border: 1px solid var(--c-border); cursor: pointer; transition: all .1s; flex-shrink: 0; } .seq-step.active { background: var(--c-primary); border-color: var(--c-primary); } .seq-step:hover { border-color: var(--c-primary-l); } /* ── Storage algorithm cards ─────────────────────────────────────────────────── */ .algo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 12px; } .algo-card { background: var(--c-surface2); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 16px; cursor: pointer; transition: all var(--trans); position: relative; } .algo-card:hover { border-color: var(--c-border2); } .algo-card.active { border-color: var(--c-primary); background: rgba(124,58,237,.12); } .algo-card .algo-icon { font-size: 22px; margin-bottom: 8px; } .algo-card .algo-name { font-weight: 700; font-size: .9rem; margin-bottom: 4px; } .algo-card .algo-desc { font-size: .75rem; color: var(--c-text3); line-height: 1.4; } .algo-card .algo-badge { position: absolute; top: 8px; right: 8px; } /* ── Pricing tiers ───────────────────────────────────────────────────────────── */ .tier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px,1fr)); gap: 12px; } .tier-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; padding: 18px; position: relative; transition: all var(--trans); text-align: center; } .tier-card:hover { transform: translateY(-4px); border-color: var(--c-border2); } .tier-card.popular { border-color: var(--c-primary) !important; box-shadow: 0 0 0 1px var(--c-primary); } .tier-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--grad); color: #08080e; font-family: var(--f-mono); font-size: .65rem; font-weight: 700; padding: .15rem .7rem; border-radius: 20px; white-space: nowrap; } .tier-name { font-size: 1rem; font-weight: 700; } .tier-price { font-family: var(--f-disp); font-weight: 800; font-size: 2rem; margin: 8px 0 2px; } .tier-price small { font-size: .8rem; color: var(--c-text3); font-weight: 400; } .tier-desc { font-size: .75rem; color: var(--c-text3); margin-bottom: 14px; } .tier-features { list-style: none; font-size: .78rem; text-align: left; color: var(--c-text2); display: grid; gap: 6px; } /* ── Live clip grid ──────────────────────────────────────────────────────────── */ .clip-grid-row { display: flex; gap: 5px; align-items: center; margin-bottom: 5px; } .clip-track-label { width: 80px; font-size: .72rem; font-weight: 600; color: var(--c-text3); flex-shrink: 0; } .clip-slot { width: 88px; height: 66px; border-radius: 8px; border: 1px solid var(--c-border); background: var(--c-surface2); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .72rem; gap: 3px; transition: all var(--trans); overflow: hidden; position: relative; } .clip-slot:hover { border-color: var(--c-border2); } .clip-slot.has-clip { border-color: rgba(124,58,237,.5); } .clip-slot.playing { background: rgba(124,58,237,.3); border-color: var(--c-primary); animation: pulse .8s ease-in-out infinite alternate; } @keyframes pulse { from{box-shadow:0 0 0 rgba(124,58,237,0)} to{box-shadow:0 0 12px rgba(124,58,237,.5)} } .clip-name { font-weight: 700; text-align: center; padding: 0 4px; } .clip-type { font-size: .65rem; color: var(--c-text3); } /* ── Auth pages ──────────────────────────────────────────────────────────────── */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--c-bg); } .auth-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 18px; padding: 36px 32px; max-width: 420px; width: 100%; box-shadow: var(--shadow); } .auth-logo { text-align: center; font-size: 2rem; margin-bottom: 8px; } .auth-title { text-align: center; font-size: 1.5rem; font-weight: 800; margin-bottom: 4px; } .auth-sub { text-align: center; color: var(--c-text3); font-size: .875rem; margin-bottom: 24px; } .auth-footer { text-align: center; font-size: .82rem; color: var(--c-text3); margin-top: 20px; } /* ── Settings color pickers ─────────────────────────────────────────────────── */ .color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .color-row { display: flex; flex-direction: column; gap: 5px; font-size: .82rem; font-weight: 600; } .color-pick { display: flex; align-items: center; gap: 8px; } .color-pick input[type="color"] { width: 36px; height: 36px; border: none; border-radius: 6px; cursor: pointer; padding: 0; } .color-pick input[type="text"] { flex: 1; } /* ── Leaderboard ─────────────────────────────────────────────────────────────── */ .lb-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); margin-bottom: 8px; transition: background var(--trans); } .lb-row:hover { background: var(--c-surface2); } .lb-rank { font-family: var(--f-disp); font-weight: 800; font-size: 20px; color: var(--c-amber); min-width: 30px; } .lb-name { flex: 1; font-weight: 600; font-size: .9rem; } .lb-meta { font-size: .78rem; color: var(--c-text3); font-family: var(--f-mono); } .lb-like-btn { background: transparent; border: 1px solid var(--c-border); border-radius: 6px; padding: 5px 10px; color: var(--c-text2); font-size: .78rem; transition: all var(--trans); } .lb-like-btn:hover { border-color: var(--c-rose); color: var(--c-rose); } .lb-like-btn.liked { background: rgba(244,63,94,.15); border-color: var(--c-rose); color: var(--c-rose); } /* ── Piano roll mini ─────────────────────────────────────────────────────────── */ .piano-keys { display: flex; height: 100px; gap: 2px; } .piano-key { flex: 1; border-radius: 0 0 4px 4px; } .piano-key.white { background: var(--c-surface2); border: 1px solid var(--c-border); } .piano-key.black { background: var(--c-text); height: 65px; flex: .6; } .piano-key.active { background: var(--c-primary); } /* ── Helpers ─────────────────────────────────────────────────────────────────── */ .hidden { display: none !important; } .text-mono { font-family: var(--f-mono); } .text-sm { font-size: .83rem; } .text-xs { font-size: .74rem; } .text-muted { color: var(--c-text3); } .text-primary { color: var(--c-primary-l); } .text-success { color: var(--c-green); } .text-danger { color: var(--c-red); } .text-center { text-align: center; } .mt-1 { margin-top: 6px; } .mt-2 { margin-top: 12px; } .mt-4 { margin-top: 24px; } .mb-1 { margin-bottom: 6px; } .mb-2 { margin-bottom: 12px; } .mb-4 { margin-bottom: 24px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .divider { border: none; border-top: 1px solid var(--c-border); margin: 18px 0; } .loading-spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--c-border); border-top-color: var(--c-primary); animation: spin .7s linear infinite; margin: 32px auto; } @keyframes spin { to{transform:rotate(360deg)} } .empty-state { text-align: center; padding: 48px 24px; color: var(--c-text3); } .empty-state .empty-icon { font-size: 3rem; margin-bottom: 14px; } .empty-state h3 { font-size: 1.1rem; margin-bottom: 8px; color: var(--c-text2); } /* ── Help popup FAB ──────────────────────────────────────────────────────────── */ .help-fab { position: fixed; right: 20px; bottom: 20px; z-index: 400; width: 44px; height: 44px; border-radius: 50%; background: var(--c-primary); color: #fff; font-size: 20px; font-weight: 800; box-shadow: 0 6px 20px rgba(124,58,237,.45); transition: transform var(--trans); } .help-fab:hover { transform: scale(1.1) rotate(10deg); } /* ── Overlay for mobile sidebar ──────────────────────────────────────────────── */ .sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 190; background: rgba(0,0,0,.5); } @media(max-width: 860px) { .sidebar-overlay.active { display: block; } } /* ── Responsive tweaks ───────────────────────────────────────────────────────── */ @media(max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .tier-grid { grid-template-columns: 1fr 1fr; } .form-row { grid-template-columns: 1fr; } .color-grid{ grid-template-columns: 1fr; } }