@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ─── Design Tokens ─────────────────────────────────── */
:root {
  --bg-primary:    #08080e;
  --bg-secondary:  #0f0f1a;
  --bg-tertiary:   #161625;
  --bg-card:       #1c1c2e;
  --bg-card-hover: #22223a;

  --accent:        #ff6b35;
  --accent-light:  #ff8c5a;
  --accent-glow:   rgba(255,107,53,.25);
  --accent-ai:     #7c3aed;
  --accent-ai-glow:rgba(124,58,237,.25);
  --accent-green:  #22c55e;
  --accent-red:    #ef4444;
  --accent-yellow: #f59e0b;

  --text-primary:  #f0f0f8;
  --text-secondary:#a0a0c0;
  --text-subtle:   #555570;

  --border:        rgba(255,255,255,.07);
  --border-light:  rgba(255,255,255,.13);

  --glass-bg:      rgba(22,22,40,.88);
  --glass-border:  rgba(255,255,255,.09);

  --shadow-sm: 0 2px 8px rgba(0,0,0,.35);
  --shadow-md: 0 4px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 10px 50px rgba(0,0,0,.6);

  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  26px;
  --radius-full:9999px;

  --sidebar-w:  240px;
  --sidebar-col:70px;
  --header-h:   64px;

  --tr-fast: 130ms ease;
  --tr-base: 240ms ease;
  --tr-slow: 420ms cubic-bezier(.4,0,.2,1);
}

/* ─── Reset ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
button{cursor:pointer;border:none;background:none;font-family:inherit;font-size:inherit}
input,textarea,select{font-family:inherit;font-size:inherit}
img{max-width:100%;display:block}

::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg-secondary)}
::-webkit-scrollbar-thumb{background:var(--text-subtle);border-radius:99px}

/* ─── Utilities ──────────────────────────────────────── */
.hidden{display:none!important}
.glass{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border)}

/* ─── Buttons ────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:var(--radius-full);font-weight:600;font-size:14px;transition:all var(--tr-base);white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-light));color:#fff;box-shadow:0 4px 20px var(--accent-glow)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 28px var(--accent-glow)}
.btn-primary:active{transform:translateY(0)}
.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-light)}
.btn-secondary:hover{background:var(--bg-card-hover);border-color:var(--accent)}
.btn-ghost{color:var(--text-secondary)}
.btn-ghost:hover{color:var(--text-primary);background:var(--bg-card)}
.btn-danger{background:rgba(239,68,68,.15);color:var(--accent-red);border:1px solid rgba(239,68,68,.3)}
.btn-danger:hover{background:rgba(239,68,68,.25)}
.btn-ai{background:linear-gradient(135deg,var(--accent-ai),#9d5ff5);color:#fff;box-shadow:0 4px 20px var(--accent-ai-glow)}
.btn-ai:hover{transform:translateY(-1px);box-shadow:0 6px 28px var(--accent-ai-glow)}

/* ─── Form Elements ──────────────────────────────────── */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:13px;font-weight:500;color:var(--text-secondary);margin-bottom:6px}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap .input-icon{position:absolute;left:14px;font-size:16px;pointer-events:none}
.form-input{width:100%;background:var(--bg-primary);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:12px 14px 12px 42px;color:var(--text-primary);transition:border-color var(--tr-base),box-shadow var(--tr-base);outline:none}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.form-input::placeholder{color:var(--text-subtle)}
.form-input.no-icon{padding-left:14px}
textarea.form-input{resize:vertical;min-height:90px}
.form-error{color:var(--accent-red);font-size:13px;margin-top:6px}

/* ─── Cards ──────────────────────────────────────────── */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:transform var(--tr-base),box-shadow var(--tr-base),border-color var(--tr-base)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--border-light)}

/* ─── Badges / Tags ──────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--radius-full);font-size:12px;font-weight:600}
.badge-orange{background:rgba(255,107,53,.15);color:var(--accent)}
.badge-purple{background:rgba(124,58,237,.15);color:var(--accent-ai)}
.badge-green{background:rgba(34,197,94,.15);color:var(--accent-green)}
.badge-red{background:rgba(239,68,68,.15);color:var(--accent-red)}
.badge-yellow{background:rgba(245,158,11,.15);color:var(--accent-yellow)}

/* ─── Toast ──────────────────────────────────────────── */
#toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px}
.toast{display:flex;align-items:center;gap:10px;padding:14px 20px;border-radius:var(--radius-md);font-size:14px;font-weight:500;min-width:280px;box-shadow:var(--shadow-lg);animation:toastIn .3s ease;background:var(--bg-card);border:1px solid var(--border-light)}
.toast.success{border-color:rgba(34,197,94,.4);color:var(--accent-green)}
.toast.error{border-color:rgba(239,68,68,.4);color:var(--accent-red)}
.toast.info{border-color:rgba(255,107,53,.4);color:var(--accent)}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastOut{to{opacity:0;transform:translateX(20px)}}

/* ─── Loading Spinner ────────────────────────────────── */
.spinner{width:20px;height:20px;border:2px solid var(--border-light);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* ─── Stars ──────────────────────────────────────────── */
.stars{display:flex;gap:2px}
.star{font-size:16px;cursor:pointer;transition:transform var(--tr-fast)}
.star:hover,.star.active{transform:scale(1.15)}

/* ─── Price Range ────────────────────────────────────── */
.price-range{font-weight:700;letter-spacing:1px}
.price-range .dim{color:var(--text-subtle)}

/* ─── Overlay backdrop ───────────────────────────────── */
.overlay-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:100;opacity:0;transition:opacity var(--tr-base);pointer-events:none}
.overlay-backdrop.active{opacity:1;pointer-events:all}

/* ─── Responsive ─────────────────────────────────────── */
@media(max-width:768px){
  :root{--sidebar-w:0px;--sidebar-col:0px}
}