/* ============================================================ AssetFlow — main.css Mobile-first. Dark. Premium. ============================================================ */ /* ---- Google Fonts ---- */ /* Plus Jakarta Sans + Inter + JetBrains Mono — loaded in */ /* ============================================================ CSS Custom Properties ============================================================ */ :root { /* Backgrounds */ --bg-base: #080810; --bg-surface: #0F0F1A; --bg-elevated: #181828; --bg-card: #12121E; /* Borders */ --border: #1E1E30; --border-light: #252538; /* Text */ --text-primary: #F2F2F8; --text-body: #9898B8; --text-muted: #52527A; /* Brand */ --accent: #7C5CFC; --accent-dark: #5E3FD4; --accent-light: #A08BFF; --accent-glow: rgba(124, 92, 252, 0.10); --accent-glow-strong: rgba(124, 92, 252, 0.20); --accent-border: rgba(124, 92, 252, 0.25); /* Semantic */ --amber: #F5A623; --amber-glow: rgba(245, 166, 35, 0.10); --green: #1EC97A; --green-glow: rgba(30, 201, 122, 0.10); --red: #F04060; --red-glow: rgba(240, 64, 96, 0.10); --blue: #3D9EFF; --blue-glow: rgba(61, 158, 255, 0.10); /* Typography */ --font-display: 'Plus Jakarta Sans', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Type scale */ --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; --text-4xl: 48px; --text-5xl: 60px; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; /* Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 999px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 4px 16px rgba(0,0,0,0.5); --shadow-lg: 0 8px 32px rgba(0,0,0,0.6); --shadow-glow: 0 0 40px rgba(124,92,252,0.15); /* Transitions */ --transition: 0.15s ease; --transition-slow: 0.3s ease; /* Z-index */ --z-header: 100; --z-dropdown: 200; --z-modal: 400; --z-toast: 500; /* Layout */ --container-max: 1180px; --container-pad: 20px; --header-h: 64px; } /* ============================================================ Reset ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--text-body); background: var(--bg-base); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, textarea, select { font-family: inherit; } ul, ol { list-style: none; } /* ============================================================ Layout ============================================================ */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); } /* ============================================================ Typography ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; color: var(--text-primary); line-height: 1.2; letter-spacing: -0.02em; } .display-title { font-size: clamp(32px, 7vw, 64px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; } .section-title { font-size: clamp(22px, 4vw, 32px); font-weight: 700; letter-spacing: -0.02em; } .font-display { font-family: var(--font-display); } .font-mono { font-family: var(--font-mono); } .font-600 { font-weight: 600; } .font-700 { font-weight: 700; } .font-800 { font-weight: 800; } .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-base { font-size: var(--text-base); } .text-lg { font-size: var(--text-lg); } .text-xl { font-size: var(--text-xl); } .text-2xl { font-size: var(--text-2xl); } .text-primary { color: var(--text-primary); } .text-body { color: var(--text-body); } .text-muted { color: var(--text-muted); } .text-accent { color: var(--accent-light); } .text-amber { color: var(--amber); } .text-green { color: var(--green); } .text-red { color: var(--red); } .text-center { text-align: center; } .text-right { text-align: right; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================================ Flex & Grid utilities ============================================================ */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-5 { gap: var(--space-5); } .gap-6 { gap: var(--space-6); } .grid { display: grid; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } /* ============================================================ Spacing utilities ============================================================ */ .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } /* ============================================================ HEADER ============================================================ */ .site-header { position: sticky; top: 0; z-index: var(--z-header); height: var(--header-h); background: rgba(8, 8, 16, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; gap: var(--space-4); height: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); } /* Logo */ .site-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; } .site-logo-mark { width: 32px; height: 32px; background: var(--accent); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .site-logo-mark svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; } .site-logo-name { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--text-primary); letter-spacing: -0.03em; } /* Desktop nav */ .site-nav { display: flex; align-items: center; gap: var(--space-1); margin-left: var(--space-4); } .nav-link { padding: 7px 12px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); transition: color var(--transition), background var(--transition); white-space: nowrap; } .nav-link:hover, .nav-link.active { color: var(--text-primary); background: var(--bg-elevated); } /* Search */ .header-search { flex: 1; max-width: 320px; position: relative; margin-left: auto; } .header-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; display: flex; } .header-search-icon svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; } .header-search-input { width: 100%; height: 38px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 0 16px 0 38px; font-size: var(--text-sm); color: var(--text-primary); transition: border-color var(--transition), box-shadow var(--transition); outline: none; } .header-search-input::placeholder { color: var(--text-muted); } .header-search-input:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-glow); } /* Header actions */ .header-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* Nav toggle (hamburger) */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-md); color: var(--text-muted); transition: all var(--transition); border: 1px solid var(--border); } .nav-toggle:hover { background: var(--bg-elevated); color: var(--text-primary); } .nav-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; } /* Search dropdown */ .search-dropdown { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; display: none; z-index: var(--z-dropdown); } .search-dropdown.open { display: block; } .search-result-item { display: flex; align-items: center; gap: var(--space-3); padding: 12px var(--space-4); transition: background var(--transition); cursor: pointer; } .search-result-item:hover { background: var(--bg-elevated); } .search-result-thumb { width: 36px; height: 36px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; background: var(--bg-elevated); } .search-result-name { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); } .search-result-price { font-size: var(--text-xs); color: var(--amber); margin-top: 2px; } /* ============================================================ MOBILE NAV ============================================================ */ .mobile-nav { display: none; position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); } .mobile-nav.open { display: flex; } .mobile-nav-panel { background: var(--bg-surface); border-right: 1px solid var(--border); width: min(300px, 85vw); height: 100%; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); overflow-y: auto; transform: translateX(-100%); transition: transform var(--transition-slow); } .mobile-nav.open .mobile-nav-panel { transform: translateX(0); } .mobile-nav-close { align-self: flex-end; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--text-muted); margin-bottom: var(--space-4); transition: all var(--transition); border: 1px solid var(--border); } .mobile-nav-close:hover { background: var(--bg-elevated); color: var(--text-primary); } .mobile-nav-link { display: flex; align-items: center; gap: var(--space-3); padding: 13px var(--space-3); border-radius: var(--radius-md); font-size: var(--text-base); font-weight: 500; color: var(--text-body); transition: all var(--transition); } .mobile-nav-link:hover, .mobile-nav-link.active { background: var(--bg-elevated); color: var(--text-primary); } .mobile-nav-link svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; flex-shrink: 0; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); border-radius: var(--radius-md); padding: 10px 18px; transition: all var(--transition); white-space: nowrap; cursor: pointer; border: 1px solid transparent; text-decoration: none; line-height: 1; } .btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; } /* Primary */ .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 2px 12px rgba(124,92,252,0.35); } .btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); box-shadow: 0 4px 20px rgba(124,92,252,0.5); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } /* Ghost */ .btn-ghost { background: transparent; color: var(--text-body); border-color: var(--border); } .btn-ghost:hover { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-light); } /* Danger */ .btn-danger { background: var(--red-glow); color: var(--red); border-color: rgba(240,64,96,0.2); } .btn-danger:hover { background: var(--red); color: #fff; } /* Ghost accent */ .btn-ghost-accent { background: var(--accent-glow); color: var(--accent-light); border-color: var(--accent-border); } .btn-ghost-accent:hover { background: var(--accent); color: #fff; } /* Sizes */ .btn-sm { padding: 7px 14px; font-size: var(--text-xs); } .btn-lg { padding: 14px 28px; font-size: var(--text-base); } .btn-xl { padding: 16px 32px; font-size: var(--text-md); border-radius: var(--radius-lg); } .btn-block { width: 100%; } /* Icon button */ .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-md); color: var(--text-muted); transition: all var(--transition); flex-shrink: 0; border: none; background: none; cursor: pointer; } .btn-icon:hover { background: var(--bg-elevated); color: var(--text-primary); } .btn-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; } /* Loading state */ .btn-spinner { display: none; } [data-loading] .btn-label { display: none; } [data-loading] .btn-spinner { display: inline-block; } /* ============================================================ FORMS ============================================================ */ .form-group { margin-bottom: var(--space-5); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .form-label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--text-body); margin-bottom: 7px; } .required { color: var(--red); } .form-control { display: block; width: 100%; height: 44px; padding: 0 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: var(--text-sm); font-family: var(--font-body); transition: border-color var(--transition), box-shadow var(--transition); outline: none; -webkit-appearance: none; } .form-control::placeholder { color: var(--text-muted); } .form-control:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-glow); } textarea.form-control { height: auto; padding: 12px 14px; resize: vertical; min-height: 100px; line-height: 1.6; } select.form-control { 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='%235A5A78' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; cursor: pointer; } .form-hint { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); line-height: 1.5; } .input-icon-wrap { position: relative; } .input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; display: flex; } .input-icon svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; } .input-icon-wrap .form-control { padding-left: 38px; } .input-suffix-wrap { position: relative; } .input-suffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: var(--text-sm); pointer-events: none; } /* Toggle */ .toggle-wrap { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; user-select: none; } .toggle { position: relative; flex-shrink: 0; } .toggle input { opacity: 0; position: absolute; width: 0; height: 0; } .toggle-track { width: 44px; height: 24px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-full); transition: all var(--transition); } .toggle input:checked ~ .toggle-track { background: var(--accent); border-color: var(--accent); } .toggle-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--text-muted); border-radius: 50%; transition: all var(--transition); pointer-events: none; } .toggle input:checked ~ .toggle-thumb { transform: translateX(20px); background: #fff; } .toggle-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-body); } /* Upload zone */ .upload-zone { border: 2px dashed var(--border); border-radius: var(--radius-lg); padding: var(--space-7) var(--space-5); text-align: center; transition: all var(--transition); cursor: pointer; background: var(--bg-elevated); } .upload-zone:hover { border-color: var(--accent-border); background: var(--accent-glow); } .upload-zone-icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-3); } .upload-zone-icon svg { width: 20px; height: 20px; stroke: var(--text-muted); fill: none; stroke-width: 1.75; } .upload-zone-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-body); margin-bottom: var(--space-1); } .upload-zone-hint { font-size: var(--text-xs); color: var(--text-muted); } /* ============================================================ BADGES ============================================================ */ .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.6; white-space: nowrap; } .badge-accent { background: var(--accent-glow); color: var(--accent-light); border: 1px solid var(--accent-border); } .badge-green { background: var(--green-glow); color: var(--green); border: 1px solid rgba(30,201,122,0.2); } .badge-amber { background: var(--amber-glow); color: var(--amber); border: 1px solid rgba(245,166,35,0.2); } .badge-red { background: var(--red-glow); color: var(--red); border: 1px solid rgba(240,64,96,0.2); } .badge-blue { background: var(--blue-glow); color: var(--blue); border: 1px solid rgba(61,158,255,0.2); } .badge-muted { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border); } /* ============================================================ ALERTS ============================================================ */ .alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: 14px var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.6; margin-bottom: var(--space-4); border: 1px solid transparent; } .alert svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; margin-top: 2px; } .alert-success { background: var(--green-glow); color: var(--green); border-color: rgba(30,201,122,0.2); } .alert-error { background: var(--red-glow); color: var(--red); border-color: rgba(240,64,96,0.2); } .alert-warning { background: var(--amber-glow); color: var(--amber); border-color: rgba(245,166,35,0.2); } .alert-info { background: var(--blue-glow); color: var(--blue); border-color: rgba(61,158,255,0.2); } /* ============================================================ DROPDOWN ============================================================ */ .dropdown { position: relative; } .dropdown-menu { position: absolute; top: calc(100% + 8px); right: 0; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); min-width: 180px; box-shadow: var(--shadow-lg); overflow: hidden; display: none; z-index: var(--z-dropdown); } .dropdown-menu.open { display: block; } .dropdown-item { display: flex; align-items: center; gap: var(--space-3); padding: 11px var(--space-4); font-size: var(--text-sm); color: var(--text-body); transition: all var(--transition); cursor: pointer; } .dropdown-item:hover { background: var(--bg-elevated); color: var(--text-primary); } .dropdown-item.danger { color: var(--red); } .dropdown-item.danger:hover { background: var(--red-glow); } .dropdown-item svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; opacity: 0.6; } .dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; } /* ============================================================ MODALS ============================================================ */ .modal-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: var(--space-5); } .modal-backdrop.open { display: flex; } .modal { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xl); width: 100%; max-width: 480px; box-shadow: var(--shadow-lg); overflow: hidden; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); } .modal-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; } .modal-close { width: 32px; height: 32px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: all var(--transition); } .modal-close:hover { background: var(--bg-elevated); color: var(--text-primary); } .modal-close svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; } .modal-body { padding: var(--space-6); } .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-top: 1px solid var(--border); background: var(--bg-base); } /* ============================================================ TOASTS ============================================================ */ .toast-wrap { position: fixed; bottom: 24px; right: 24px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-3); pointer-events: none; } .toast { display: flex; align-items: center; gap: var(--space-3); padding: 13px var(--space-5); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); font-size: var(--text-sm); color: var(--text-body); pointer-events: all; animation: toast-in 0.25s ease; max-width: 340px; } .toast svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; } .toast-success { border-color: rgba(30,201,122,0.3); color: var(--green); } .toast-error { border-color: rgba(240,64,96,0.3); color: var(--red); } @keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ PAGINATION ============================================================ */ .pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-1); margin-top: var(--space-8); flex-wrap: wrap; } .page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); border: 1px solid var(--border); background: var(--bg-surface); transition: all var(--transition); cursor: pointer; text-decoration: none; } .page-btn:hover { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-light); } .page-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; } .page-btn.disabled { opacity: 0.35; cursor: default; pointer-events: none; } /* ============================================================ EMPTY STATE ============================================================ */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-12) var(--space-5); gap: var(--space-4); } .empty-state-icon { width: 64px; height: 64px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; } .empty-state-icon svg { width: 28px; height: 28px; stroke: var(--text-muted); fill: none; stroke-width: 1.5; stroke-linecap: round; } .empty-state-title { font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; } .empty-state-desc { font-size: var(--text-base); color: var(--text-muted); max-width: 360px; line-height: 1.7; } /* ============================================================ ADMIN LAYOUT ============================================================ */ .admin-layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; } .admin-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; background: var(--bg-surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; z-index: var(--z-header); } .admin-sidebar-head { padding: var(--space-5) var(--space-4); border-bottom: 1px solid var(--border); flex-shrink: 0; } .admin-nav { flex: 1; padding: var(--space-3) var(--space-3); overflow-y: auto; } .admin-nav-section { padding: var(--space-5) var(--space-2) var(--space-2); } .admin-nav-section-title { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } .admin-nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); transition: all var(--transition); margin-bottom: 2px; text-decoration: none; } .admin-nav-link:hover { background: var(--bg-elevated); color: var(--text-primary); } .admin-nav-link.active { background: var(--accent-glow); color: var(--accent-light); border-left: 2px solid var(--accent); padding-left: 10px; } .admin-nav-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; flex-shrink: 0; } .admin-nav-badge { margin-left: auto; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; padding: 0 5px; } .admin-main { margin-left: 240px; display: flex; flex-direction: column; min-height: 100vh; } .admin-topbar { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 var(--space-6); background: var(--bg-surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; gap: var(--space-4); } .admin-topbar-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; } .admin-topbar-actions { display: flex; align-items: center; gap: var(--space-2); } .admin-content { padding: var(--space-6); flex: 1; } /* Admin stat cards */ .admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); } .stat-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); transition: border-color var(--transition); } .stat-card:hover { border-color: var(--border-light); } .stat-card-icon { width: 38px; height: 38px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-3); } .stat-card-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; } .stat-card-icon.revenue { background: var(--accent-glow); color: var(--accent-light); } .stat-card-icon.orders { background: var(--blue-glow); color: var(--blue); } .stat-card-icon.customers{ background: var(--green-glow); color: var(--green); } .stat-card-icon.products { background: var(--amber-glow); color: var(--amber); } .stat-card-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--space-2); } .stat-card-value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: var(--text-primary); letter-spacing: -0.03em; line-height: 1; margin-bottom: var(--space-2); } .stat-card-delta { display: flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 500; } .stat-card-delta svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; } .stat-card-delta.up { color: var(--green); } .stat-card-delta.down { color: var(--red); } .stat-card-delta.flat { color: var(--text-muted); } /* Chart card */ .chart-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); } .chart-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .chart-card-title { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; } .chart-area { height: 240px; margin-top: var(--space-4); position: relative; } /* Admin table */ .table-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; } .data-table { width: 100%; border-collapse: collapse; min-width: 560px; } .data-table th { padding: 11px var(--space-4); text-align: left; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); background: var(--bg-base); border-bottom: 1px solid var(--border); white-space: nowrap; } .data-table td { padding: 14px var(--space-4); font-size: var(--text-sm); color: var(--text-body); border-bottom: 1px solid var(--border); vertical-align: middle; } .data-table tr:last-child td { border-bottom: none; } .data-table tbody tr:hover td { background: var(--bg-elevated); } /* License key */ .license-key { display: flex; align-items: center; gap: var(--space-2); background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 9px var(--space-3); } .license-key-value { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent-light); letter-spacing: 0.04em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .license-key-copy { flex-shrink: 0; font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); padding: 4px 10px; border-radius: var(--radius-sm); background: var(--bg-elevated); transition: all var(--transition); cursor: pointer; border: none; } .license-key-copy:hover { background: var(--accent-glow); color: var(--accent-light); } /* File row */ .file-row { display: flex; align-items: center; gap: var(--space-3); padding: 12px var(--space-4); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); } .file-row-icon { width: 36px; height: 36px; background: var(--accent-glow); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .file-row-icon svg { width: 16px; height: 16px; stroke: var(--accent-light); fill: none; stroke-width: 2; } .file-row-name { font-size: var(--text-sm); font-weight: 500; color: var(--text-body); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-row-size { font-size: var(--text-xs); color: var(--text-muted); flex-shrink: 0; } /* Divider */ .divider { height: 1px; background: var(--border); margin: var(--space-5) 0; } /* Link utilities */ .link { color: var(--accent-light); text-decoration: none; } .link:hover { text-decoration: underline; } .link-muted { color: var(--text-muted); } .link-muted:hover { color: var(--text-body); } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--bg-surface); border-top: 1px solid var(--border); padding: var(--space-10) 0 0; margin-top: var(--space-12); } .footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-8); max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad) var(--space-10); } .footer-brand-desc { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.7; margin-top: var(--space-3); max-width: 280px; } .footer-col-title { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-4); } .footer-links { display: flex; flex-direction: column; gap: var(--space-3); } .footer-link { font-size: var(--text-sm); color: var(--text-muted); transition: color var(--transition); } .footer-link:hover { color: var(--text-body); } .footer-bottom { border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--container-pad); max-width: var(--container-max); margin: 0 auto; flex-wrap: wrap; } .footer-copy { font-size: var(--text-xs); color: var(--text-muted); } /* ============================================================ ACCOUNT NAV ============================================================ */ .account-nav { display: flex; flex-direction: column; gap: var(--space-1); } .account-nav-link { display: flex; align-items: center; gap: var(--space-3); padding: 11px var(--space-3); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); transition: all var(--transition); text-decoration: none; } .account-nav-link:hover { background: var(--bg-elevated); color: var(--text-primary); } .account-nav-link.active { background: var(--accent-glow); color: var(--accent-light); } .account-nav-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; flex-shrink: 0; } /* ============================================================ RESPONSIVE — MOBILE FIRST ============================================================ */ @media (max-width: 768px) { :root { --container-pad: 16px; --header-h: 58px; } /* Header */ .site-nav { display: none; } .header-search { display: none; } .nav-toggle { display: flex; } /* Footer */ .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--space-6); } /* Grids */ .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .form-row { grid-template-columns: 1fr; } /* Admin */ .admin-stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { /* Footer */ .footer-inner { grid-template-columns: 1fr; } /* Grids */ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } /* Admin */ .admin-stats { grid-template-columns: 1fr; } .stat-card-value { font-size: var(--text-xl); } } /* Admin mobile */ @media (max-width: 900px) { #adminSidebarToggle { display: flex !important; } .admin-sidebar { transform: translateX(-100%); transition: transform var(--transition-slow), box-shadow var(--transition-slow); z-index: 400; } .admin-sidebar.open { transform: translateX(0); box-shadow: 4px 0 40px rgba(0,0,0,0.6); } .admin-sidebar.open::after { content: ''; position: fixed; inset: 0; left: 240px; background: rgba(0,0,0,0.5); z-index: -1; } .admin-main { margin-left: 0; } .admin-content { padding: var(--space-4); } .admin-topbar { padding: 0 var(--space-4); } .grid-3 { grid-template-columns: 1fr !important; } .admin-stats { grid-template-columns: repeat(2, 1fr); } } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Hide scrollbar utility */ .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } /* Desktop only */ @media (min-width: 769px) { #adminSidebarToggle { display: none !important; } }