:root { --ink:#17213a; --muted:#64748b; --line:#e5eaf2; --surface:#fff; --canvas:#f5f7fb; --brand:#2563eb; --brand-dark:#1d4ed8; --brand-soft:#eff6ff; }
html { font-size:15px; min-height:100%; }
body { min-height:100vh; margin:0; color:var(--ink); background:var(--canvas); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }.app-body { display:flex; flex-direction:column; }.app-body .app-container { flex:1 0 auto; }
a { color:var(--brand); text-decoration:none; } a:hover { color:var(--brand-dark); }
.site-header { background:rgba(255,255,255,.92); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.navbar { min-height:72px; }.brand-lockup { display:inline-flex; gap:.7rem; align-items:center; color:var(--ink); font-weight:800; letter-spacing:-.03em; }.brand-lockup:hover { color:var(--ink); }
.brand-mark { display:grid; width:31px; height:31px; place-items:center; border-radius:9px; color:#fff; background:linear-gradient(135deg,#2563eb,#1e40af); font-size:.83rem; box-shadow:0 5px 12px rgba(37,99,235,.24); }
.app-nav { gap:.2rem; }.app-nav .nav-link { padding:.5rem .8rem; color:#52617a; font-size:.92rem; font-weight:600; border-radius:8px; }.app-nav .nav-link:hover { color:var(--brand); background:var(--brand-soft); }.logout-button { padding:.45rem .85rem; color:#52617a; border:1px solid var(--line); font-weight:600; }
.app-container { padding-top:3rem; padding-bottom:5.5rem; }.footer { min-height:64px; display:flex; align-items:center; border-top:1px solid var(--line); color:#94a3b8!important; font-size:.8rem; }.footer .container { display:flex; gap:.55rem; align-items:center; }.footer-dot { color:#cbd5e1; }
.btn { border-radius:9px; font-weight:700; padding:.6rem .95rem; transition:transform .15s ease,box-shadow .15s ease; }.btn:hover { transform:translateY(-1px); }.btn-primary { border-color:var(--brand); background:var(--brand); box-shadow:0 5px 13px rgba(37,99,235,.18); }.btn-primary:hover,.btn-primary:focus { border-color:var(--brand-dark); background:var(--brand-dark); }.btn-outline-primary { border-color:#bfdbfe; color:var(--brand); background:#fff; }.btn-outline-primary:hover { border-color:var(--brand); background:var(--brand-soft); color:var(--brand); }
.form-control,.form-select { min-height:43px; border-color:#d9e0eb; border-radius:9px; color:var(--ink); }.form-control:focus,.form-select:focus { border-color:#93c5fd; box-shadow:0 0 0 .23rem rgba(37,99,235,.1); }.form-label { margin-bottom:.42rem; color:#40506b; font-size:.85rem; font-weight:700; }.alert { border:0; border-radius:10px; padding:1rem 1.1rem; }.alert-success { color:#166534; background:#dcfce7; }.alert-danger { color:#b42318; background:#fef3f2; }
.page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; margin-bottom:2rem; }.page-heading h1 { margin:.28rem 0 .38rem; font-size:clamp(1.7rem,3vw,2.15rem); font-weight:800; letter-spacing:-.045em; }.page-heading p { margin:0; color:var(--muted); }.eyebrow { color:var(--brand); font-size:.7rem; font-weight:800; letter-spacing:.12em; }.page-actions { display:flex; gap:.65rem; flex-wrap:wrap; }.page-actions form { margin:0; }
.card { border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:0 7px 24px rgba(28,44,75,.045); }.settings-card { overflow:hidden; }.section-heading { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.7rem; }.section-heading h2 { margin:.08rem 0 .35rem; font-size:1.1rem; font-weight:800; }.section-heading p { max-width:700px; margin:0; color:var(--muted); font-size:.9rem; }.section-icon { display:grid; flex:0 0 auto; width:38px; height:38px; place-items:center; border-radius:10px; color:var(--brand); background:var(--brand-soft); font-size:1.2rem; font-weight:800; }
.modern-table { margin:0; }.modern-table thead th { padding:.8rem 1rem; color:#71809a; border-bottom-width:1px; border-color:var(--line); background:#f8fafc; font-size:.72rem; font-weight:800; letter-spacing:.045em; text-transform:uppercase; white-space:nowrap; }.modern-table tbody td { padding:1rem; border-color:#edf1f6; color:#41516b; }.modern-table tbody tr:last-child td { border-bottom:0; }.currency-pill { display:inline-flex; padding:.22rem .48rem; border-radius:999px; color:#1d4ed8; background:#eff6ff; font-size:.72rem; font-weight:800; }
.search-panel { display:flex; gap:.65rem; align-items:center; padding:.75rem; border:1px solid var(--line); border-radius:13px; background:#fff; box-shadow:0 5px 18px rgba(28,44,75,.035); }.search-field { display:flex; flex:1; align-items:center; gap:.55rem; padding-left:.3rem; color:#94a3b8; }.search-field span { font-size:1.55rem; line-height:1; }.search-field .form-control { border:0; box-shadow:none; }.search-field .form-control:focus { box-shadow:none; }.list-meta { display:flex; justify-content:space-between; margin:0 0 .75rem; color:var(--muted); font-size:.84rem; }.list-meta strong { color:var(--ink); }.product-table-wrap { overflow:hidden; border:1px solid var(--line); border-radius:13px; background:#fff; box-shadow:0 7px 24px rgba(28,44,75,.035); }.product-pagination { display:flex; justify-content:center; overflow-x:auto; padding:1.5rem .25rem .25rem; }.product-pagination .pagination { flex-wrap:nowrap; }.page-link { color:#52617a; border-color:var(--line); }.page-item.active .page-link { border-color:var(--brand); background-color:var(--brand); }
.auth-body { display:flex; flex-direction:column; background:#f8fafc; }.auth-body .site-header { background:transparent; border:0; }.auth-body .app-container { display:flex; flex:1; align-items:center; padding-top:1.5rem; padding-bottom:3rem; }.auth-body .footer { border:0; }.auth-shell { display:grid; grid-template-columns:minmax(0,.95fr) minmax(390px,.85fr); width:100%; max-width:1040px; min-height:570px; margin:0 auto; overflow:hidden; border:1px solid #e7edf6; border-radius:20px; background:#fff; box-shadow:0 22px 65px rgba(30,58,138,.1); }.auth-intro { padding:clamp(2.5rem,6vw,5rem); color:#fff; background:radial-gradient(circle at 15% 85%,rgba(96,165,250,.55),transparent 30%),linear-gradient(140deg,#172554,#1d4ed8); }.auth-intro .eyebrow { color:#bfdbfe; }.auth-intro h1 { margin:1.2rem 0; font-size:clamp(2.15rem,4vw,3.45rem); font-weight:800; letter-spacing:-.06em; line-height:1.06; }.auth-intro h1 span { color:#93c5fd; }.auth-intro p { max-width:400px; margin-bottom:2.3rem; color:#dbeafe; line-height:1.7; }.auth-feature { display:flex; gap:.65rem; align-items:center; margin-top:.8rem; color:#e0efff; font-size:.9rem; }.auth-feature span { display:grid; width:20px; height:20px; place-items:center; border-radius:50%; background:rgba(255,255,255,.18); font-size:.72rem; }.auth-card-wrap { display:flex; align-items:center; padding:clamp(2rem,5vw,4.2rem); }.auth-card { width:100%; }.auth-card h2 { margin:.55rem 0 .6rem; font-size:1.7rem; font-weight:800; letter-spacing:-.04em; }.auth-subtitle { margin-bottom:1.9rem; color:var(--muted); font-size:.9rem; }.auth-card .mb-3 { margin-bottom:1.05rem!important; }.auth-switch { color:var(--muted); font-size:.88rem; }.auth-switch a { font-weight:800; }
.home-heading { align-items:center; padding:2.2rem; border-radius:16px; color:#fff; background:linear-gradient(115deg,#172554,#2563eb); box-shadow:0 14px 32px rgba(30,64,175,.16); }.home-heading .eyebrow { color:#bfdbfe; }.home-heading h1 { margin-top:.4rem; }.home-heading p { color:#dbeafe; }.home-heading .btn { background:#fff; color:#1d4ed8; border-color:#fff; }.home-actions { margin-top:.35rem; }.home-action-card { display:flex; align-items:center; gap:1rem; height:100%; padding:1.4rem; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:#fff; box-shadow:0 6px 18px rgba(28,44,75,.035); transition:transform .15s ease,box-shadow .15s ease; }.home-action-card:hover { color:var(--ink); transform:translateY(-3px); box-shadow:0 13px 25px rgba(28,44,75,.08); }.action-icon { display:grid; width:38px; height:38px; place-items:center; border-radius:10px; color:var(--brand); background:var(--brand-soft); font-size:.75rem; font-weight:800; }.home-action-card h2 { margin:0 0 .25rem; font-size:1rem; font-weight:800; }.home-action-card p { margin:0; color:var(--muted); font-size:.84rem; }.action-arrow { margin-left:auto; color:var(--brand); font-size:1.25rem; }
@media (max-width:767.98px) { .navbar { min-height:64px; }.app-container { padding-top:2rem; }.app-nav { padding:.7rem 0; }.page-heading,.product-heading { align-items:flex-start; flex-direction:column; margin-bottom:1.5rem; }.page-actions,.page-actions form { width:100%; }.page-actions .btn { width:100%; }.search-panel { align-items:stretch; flex-wrap:wrap; }.search-field { width:100%; flex-basis:100%; }.search-panel > .btn-primary { flex:1; }.list-meta { gap:.2rem; flex-direction:column; }.auth-shell { grid-template-columns:1fr; max-width:510px; min-height:auto; }.auth-intro { padding:2.2rem; }.auth-intro h1 { font-size:2.15rem; }.auth-intro p,.auth-feature { display:none; }.auth-card-wrap { padding:2rem 1.5rem; }.footer .container { justify-content:center; }.footer-dot,.footer .container span:last-child { display:none; }.home-heading { padding:1.55rem; }.home-heading .btn { width:100%; } }
@media (max-width:575.98px) { .product-pagination .page-link { padding:.375rem .6rem; }.section-heading { gap:.75rem; } }