/* ===== Craftly Design System ===== */
:root {
  --brand: #4f46e5;
  --brand-600: #4f46e5;
  --accent: #f43f5e;
  --ring: rgba(79, 70, 229, 0.35);
}
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; }

::selection { background: rgba(99,102,241,.2); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,.35); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.55); }

/* Focus */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px;
}

/* ===== Utility components ===== */
.container-x { width: 100%; max-width: 1280px; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { .container-x { padding-left: 1.5rem; padding-right: 1.5rem; } }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; border-radius:.75rem; transition:all .18s cubic-bezier(.4,0,.2,1); cursor:pointer; white-space:nowrap; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background:linear-gradient(135deg,#6366f1,#4f46e5); color:#fff; padding:.65rem 1.25rem; box-shadow:0 6px 20px -6px rgba(79,70,229,.6); }
.btn-primary:hover { box-shadow:0 10px 28px -6px rgba(79,70,229,.7); transform:translateY(-1px); }
.btn-accent { background:linear-gradient(135deg,#fb7185,#e11d48); color:#fff; padding:.65rem 1.25rem; box-shadow:0 6px 20px -6px rgba(225,29,72,.5); }
.btn-accent:hover { transform:translateY(-1px); }
.btn-ghost { background:transparent; color:inherit; padding:.6rem 1rem; }
.btn-ghost:hover { background:rgba(100,116,139,.1); }
.btn-outline { border:1.5px solid rgba(100,116,139,.3); padding:.6rem 1.1rem; background:transparent; }
.btn-outline:hover { border-color:var(--brand); color:var(--brand); }
.btn-sm { padding:.4rem .8rem; font-size:.875rem; border-radius:.6rem; }
.btn-lg { padding:.85rem 1.75rem; font-size:1.05rem; }
.btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }

.chip { display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .7rem; border-radius:999px; font-size:.8rem; font-weight:500; background:rgba(99,102,241,.09); color:#4f46e5; }
[data-theme="dark"] .chip { background:rgba(99,102,241,.18); color:#a5b4fc; }

.card { background:#fff; border-radius:1rem; border:1px solid rgba(226,232,240,.9); transition:all .22s ease; }
[data-theme="dark"] .card { background:#0f172a; border-color:rgba(51,65,85,.6); }
.card-hover:hover { transform:translateY(-4px); box-shadow:0 18px 40px -12px rgba(15,23,42,.18); border-color:rgba(129,140,248,.5); }

.field { width:100%; padding:.7rem .9rem; border-radius:.75rem; border:1.5px solid rgba(203,213,225,.9); background:#fff; transition:all .15s; font-size:.95rem; }
.field:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--ring); outline:none; }
[data-theme="dark"] .field { background:#0f172a; border-color:rgba(51,65,85,.9); color:#e2e8f0; }
.label { display:block; font-size:.82rem; font-weight:600; margin-bottom:.35rem; color:#475569; }
[data-theme="dark"] .label { color:#94a3b8; }

.badge-level { font-size:.68rem; font-weight:700; padding:.15rem .5rem; border-radius:.4rem; text-transform:uppercase; letter-spacing:.03em; }

/* Trust ring */
.trust-ring { --p:0; background:conic-gradient(var(--brand) calc(var(--p)*1%), rgba(148,163,184,.25) 0); border-radius:50%; display:grid; place-items:center; }

/* ===== Animations ===== */
@keyframes fadeUp { from { opacity:0; transform:translateY(16px);} to { opacity:1; transform:none; } }
@keyframes fadeIn { from { opacity:0;} to { opacity:1; } }
@keyframes scaleIn { from { opacity:0; transform:scale(.96);} to { opacity:1; transform:none; } }
@keyframes slideUp { from { transform:translateY(100%);} to { transform:none; } }
@keyframes shimmer { 0%{background-position:-500px 0;} 100%{background-position:500px 0;} }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pulse-dot { 0%,100%{opacity:1;} 50%{opacity:.35;} }

.animate-fade-up { animation:fadeUp .5s cubic-bezier(.4,0,.2,1) both; }
.animate-fade-in { animation:fadeIn .4s ease both; }
.animate-scale-in { animation:scaleIn .25s cubic-bezier(.4,0,.2,1) both; }
.reveal { opacity:0; }
.reveal.in { animation:fadeUp .6s cubic-bezier(.16,1,.3,1) both; }
.stagger > * { opacity:0; }
.stagger.in > * { animation:fadeUp .5s cubic-bezier(.16,1,.3,1) both; }
.stagger.in > *:nth-child(1){animation-delay:.03s} .stagger.in > *:nth-child(2){animation-delay:.08s}
.stagger.in > *:nth-child(3){animation-delay:.13s} .stagger.in > *:nth-child(4){animation-delay:.18s}
.stagger.in > *:nth-child(5){animation-delay:.23s} .stagger.in > *:nth-child(6){animation-delay:.28s}
.stagger.in > *:nth-child(7){animation-delay:.33s} .stagger.in > *:nth-child(8){animation-delay:.38s}

/* Skeleton */
.skeleton { background:linear-gradient(90deg,#eef2f7 25%,#e2e8f0 37%,#eef2f7 63%); background-size:1000px 100%; animation:shimmer 1.4s infinite linear; border-radius:.6rem; }
[data-theme="dark"] .skeleton { background:linear-gradient(90deg,#1e293b 25%,#334155 37%,#1e293b 63%); background-size:1000px 100%; }

/* Spinner */
.spinner { width:18px; height:18px; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
.spinner-brand { border-color:rgba(99,102,241,.25); border-top-color:#6366f1; }

/* Image with blur-up */
.img-blur { filter:blur(12px); transform:scale(1.04); transition:filter .5s, transform .5s; }
.img-blur.loaded { filter:none; transform:none; }

/* Gradient text */
.grad-text { background:linear-gradient(135deg,#6366f1,#a855f7,#f43f5e); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mesh-bg { background:
  radial-gradient(60rem 60rem at 10% -10%, rgba(99,102,241,.16), transparent),
  radial-gradient(50rem 50rem at 100% 0%, rgba(244,63,94,.12), transparent),
  radial-gradient(40rem 40rem at 50% 120%, rgba(16,185,129,.10), transparent); }
[data-theme="dark"] .mesh-bg { background:
  radial-gradient(60rem 60rem at 10% -10%, rgba(99,102,241,.22), transparent),
  radial-gradient(50rem 50rem at 100% 0%, rgba(244,63,94,.14), transparent); }

/* Toast */
.toast { pointer-events:auto; min-width:260px; max-width:360px; padding:.85rem 1rem; border-radius:.85rem; box-shadow:0 12px 32px -8px rgba(15,23,42,.3); display:flex; gap:.7rem; align-items:flex-start; animation:scaleIn .2s ease both; }

/* Star ratings */
.stars i { color:#f59e0b; }

/* Line clamp fallback */
.clamp-1 { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Hide scrollbar for carousels */
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

/* Sticky mobile bar safe area */
.safe-b { padding-bottom: env(safe-area-inset-bottom); }

/* Nav link */
.nav-link { position:relative; font-weight:500; padding:.4rem 0; }
.nav-link::after { content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--brand); transition:width .2s; }
.nav-link:hover::after, .nav-link.active::after { width:100%; }

/* Drawer */
.drawer-overlay { animation:fadeIn .2s ease both; }
.drawer-panel { animation:slideRight .25s cubic-bezier(.4,0,.2,1) both; }
@keyframes slideRight { from{transform:translateX(-100%);} to{transform:none;} }

/* Progress bar top */
#route-progress { position:fixed; top:0; left:0; height:3px; background:linear-gradient(90deg,#6366f1,#f43f5e); z-index:200; transition:width .3s ease, opacity .3s; box-shadow:0 0 10px rgba(99,102,241,.6); }

/* Range slider */
input[type=range] { accent-color:#4f46e5; }

/* Tooltip */
.tip { position:relative; }
.tip:hover::after { content:attr(data-tip); position:absolute; bottom:130%; left:50%; transform:translateX(-50%); background:#0f172a; color:#fff; font-size:.72rem; padding:.3rem .55rem; border-radius:.4rem; white-space:nowrap; z-index:50; }