:root {
    --bg: #070b10;
    --surface: #101820;
    --surface-2: #17222d;
    --panel: rgba(16, 24, 32, .92);
    --panel-strong: #17222d;
    --border: rgba(125, 211, 252, .16);
    --text: #f3f7fb;
    --muted: #9daab7;
    --red: #38bdf8;
    --red-dark: #0f5d75;
    --green: #7ddc93;
    --accent: #d6b45f;
    --amber: #d6b45f;
    --shadow-red: 0 18px 44px rgba(56, 189, 248, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.app-body,
body.admin-body {
    min-height: 100vh;
    color: var(--text);
    font-family: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    overflow-x: hidden;
    background:
        linear-gradient(180deg, #070b10 0%, #101820 48%, #080d13 100%),
        repeating-linear-gradient(90deg, rgba(125,211,252,.035) 0 1px, transparent 1px 118px);
}

body.app-body::before,
body.admin-body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .46;
    background-image:
        linear-gradient(rgba(125,211,252,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(214,180,95,.035) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to bottom, black, transparent 82%);
    z-index: 0;
}

main, header, footer, .site-container, .admin-shell { position: relative; z-index: 1; }
.container-soft { width: min(1220px, calc(100% - 32px)); margin-inline: auto; }
.glass {
    background: rgba(17, 20, 25, .84);
    border: 1px solid var(--border);
    box-shadow: 0 22px 70px rgba(0,0,0,.30);
    backdrop-filter: blur(16px);
}
.soft-card {
    background: linear-gradient(145deg, rgba(21, 31, 41, .96), rgba(8, 13, 19, .94));
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 16px 44px rgba(0,0,0,.22);
}
.soft-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.soft-card-hover:hover { transform: translateY(-3px); border-color: rgba(125,211,252,.45); box-shadow: var(--shadow-red); }

.site-topbar {
    color: #fff;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--topbar-color) 82%, #020617), color-mix(in srgb, var(--topbar-color) 42%, #d6b45f));
    box-shadow: 0 12px 36px rgba(2, 8, 23, .24);
}
.site-header { background: rgba(8, 13, 19, .80); }
.brand-mark {
    background: linear-gradient(135deg, #0f172a, #0ea5e9 62%, #d6b45f);
    box-shadow: 0 16px 36px rgba(56,189,248,.18);
}
.profile-orb {
    color: #071016;
    background: linear-gradient(135deg, #38bdf8, #d6b45f);
    box-shadow: 0 16px 38px rgba(56,189,248,.16);
    border: 1px solid rgba(255,255,255,.22);
}
.user-panel-sidebar { min-height: 420px; }

.btn-primary,
.btn-light,
.btn-muted {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 46px;
    border-radius: 6px;
    padding: .85rem 1.2rem;
    font-weight: 850;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, filter .18s ease;
}
.btn-primary {
    background: linear-gradient(135deg, #38bdf8 0%, #d6b45f 100%);
    color: #061019;
    border: 1px solid rgba(125,211,252,.55);
    box-shadow: 0 14px 30px rgba(56,189,248,.16), inset 0 1px rgba(255,255,255,.34);
}
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-light {
    background: #eef6ff;
    color: #0b111a;
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 12px 28px rgba(238,246,255,.12);
}
.btn-muted {
    background: rgba(148,163,184,.10);
    color: #dbeafe;
    border: 1px solid rgba(148,163,184,.20);
}
.btn-muted:hover { background: rgba(45,212,191,.12); border-color: rgba(45,212,191,.35); transform: translateY(-1px); }

.form-input, .form-select, .form-textarea {
    width: 100%;
    border: 1px solid rgba(148,163,184,.20);
    background: rgba(8, 13, 20, .72);
    color: #fff;
    border-radius: 6px;
    padding: .95rem 1rem;
    outline: none;
    font-weight: 650;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-select option { background: #101620; color: #fff; }
.form-textarea { min-height: 150px; resize: vertical; line-height: 1.65; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: rgba(214,180,95,.72);
    box-shadow: 0 0 0 4px rgba(214,180,95,.11);
    background: rgba(8,13,20,.90);
}
.form-label { display:block; color:#cbd5e1; font-weight:850; margin-bottom:.55rem; font-size:.9rem; }
.badge {
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    border:1px solid currentColor;
    border-radius:6px;
    padding:.34rem .68rem;
    font-size:.75rem;
    font-weight:900;
}

.product-grid { display:grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap:1rem; }
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1280px) { .product-grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.product-card-img { aspect-ratio: 16 / 10; object-fit: cover; width:100%; border-radius: 8px 8px 0 0; }
.prose-dark :where(p, li) { color:#c7d2e1; line-height:1.8; }
.prose-dark :where(h2,h3,h4,strong) { color:#fff; }
.table-wrap { overflow-x:auto; border-radius:10px; border:1px solid var(--border); }
.modern-table { width:100%; border-collapse:separate; border-spacing:0; min-width:760px; }
.modern-table th {
    color:#9fb0c7;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:.72rem;
    text-align:left;
    background:rgba(148,163,184,.09);
    padding:1rem;
}
.modern-table td { padding:1rem; border-top:1px solid rgba(148,163,184,.12); color:#e5eefb; vertical-align:middle; }
.modern-table tr:hover td { background:rgba(45,212,191,.055); }
.admin-sidebar-link {
    display:flex;
    align-items:center;
    gap:.8rem;
    padding:.85rem 1rem;
    border-radius:8px;
    color:#cbd5e1;
    font-weight:850;
    transition:.2s ease;
}
.admin-sidebar-link:hover,
.admin-sidebar-link.active {
    background:linear-gradient(90deg, rgba(45,212,191,.22), rgba(56,189,248,.08));
    color:#fff;
}
.mobile-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.mobile-scroll::-webkit-scrollbar { height: 6px; }
.mobile-scroll::-webkit-scrollbar-thumb { background: rgba(148,163,184,.28); border-radius: 999px; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.hero-title { font-size: clamp(3rem, 8vw, 7.2rem); line-height:.92; letter-spacing:0; }
.section-title { font-size: clamp(2.1rem, 5vw, 4.5rem); line-height:1; letter-spacing:0; }

@media (max-width: 767px) {
    .container-soft { width: min(100% - 24px, 1220px); }
    .glass { backdrop-filter: blur(12px); }
    .btn-primary, .btn-light, .btn-muted { width: 100%; }
    .modern-table { min-width: 680px; }
}

@media print {
    header, footer, .admin-sidebar, .no-print { display:none !important; }
    body { background:#fff !important; color:#000 !important; }
}

.text-red-300, .text-red-400 { color: #d6b45f !important; }
.from-red-600 { --tw-gradient-from: #82652b var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(130 101 43 / 0) var(--tw-gradient-to-position) !important; }
.to-red-900 { --tw-gradient-to: #263f3a var(--tw-gradient-to-position) !important; }
.hover\:border-red-500\/30:hover { border-color: rgba(214,180,95,.30) !important; }

/* CRYPTIX visual refresh: layered glass, depth and restrained motion. */
.app-body { background-color: #060816; }
.site-header { box-shadow: 0 16px 60px rgba(0,0,0,.28); }
.soft-card { border-radius: 22px; position: relative; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.08); }
.soft-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .45; background: linear-gradient(130deg, rgba(255,255,255,.08), transparent 30%, transparent 70%, rgba(24,215,255,.05)); }
.soft-card > * { position: relative; z-index: 1; }
.soft-card-hover:hover { transform: translateY(-7px) rotateX(1deg); box-shadow: 0 30px 85px rgba(0,0,0,.42), 0 0 0 1px rgba(24,215,255,.22), 0 0 46px rgba(124,92,255,.12); }
.brand-mark { padding: 0; transform: translateZ(0); }
.brand-mark img { display: block; width: 100%; height: 100%; }
.hero-title { text-shadow: 0 18px 60px rgba(0,0,0,.35); }
.hero-title span { background: linear-gradient(120deg, #18d7ff, #7c5cff 55%, #ff4ecd); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.btn-primary { border-radius: 14px; }
.btn-muted, .btn-light { border-radius: 14px; }
.form-input, .form-select, .form-textarea { border-radius: 14px; }
.product-card-img { border-radius: 22px 22px 0 0; }
.badge { border-radius: 999px; }
.floating-orb { position: absolute; width: 180px; height: 180px; border-radius: 50%; filter: blur(2px); background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.5), rgba(24,215,255,.20) 18%, rgba(124,92,255,.16) 46%, transparent 72%); box-shadow: inset -20px -20px 50px rgba(0,0,0,.30), 0 0 70px rgba(124,92,255,.18); animation: orbFloat 9s ease-in-out infinite alternate; pointer-events: none; }
@keyframes orbFloat { from { transform: translate3d(0,0,0) rotate(0deg); } to { transform: translate3d(18px,-22px,0) rotate(8deg); } }