/* =====================================================
   DOTVEC — Production CSS (no Tailwind, no warnings)
   Author: You
   Place at: public/css/app.css
   ===================================================== */


/* ---------- Theme Tokens ---------- */
:root{
  --brand: #7C3AED;          /* Purple 600 */
  --brand-700:#6D28D9;       /* hover */
  --brand-50:#F3E8FF;
  --bg:#ffffff;
  --text:#111827;            /* gray-900 */
  --muted:#6B7280;           /* gray-500 */
  --ring:#A78BFA;            /* accent outline */
  --success:#16A34A;
  --danger:#DC2626;

  --radius: 14px;
  --shadow: 0 8px 30px rgba(0,0,0,.06);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.05);

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
}

/* ---------- Base / Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none;transition:color .2s}
a:hover{color:var(--brand-700)}
h1,h2,h3,h4{margin:0 0 var(--space-4);line-height:1.2;font-weight:800;color:var(--text)}
h1{font-size:clamp(2rem,3.5vw,3rem)}
h2{font-size:clamp(1.5rem,2.6vw,2.25rem)}
p{margin:0 0 var(--space-4);color:var(--muted)}

/* ---------- Layout Helpers ---------- */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--space-4)}
.section{padding:var(--space-12) 0}
.center{display:grid;place-items:center}
.stack>*+*{margin-top:var(--space-4)}

/* Responsive grids without weird selectors (editor friendly) */
.grid{display:grid;gap:var(--space-6)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (min-width:768px){
  .grid-md-2{grid-template-columns:repeat(2,1fr)}
  .grid-md-3{grid-template-columns:repeat(3,1fr)}
  .grid-md-4{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1024px){
  .grid-lg-3{grid-template-columns:repeat(3,1fr)}
  .grid-lg-4{grid-template-columns:repeat(4,1fr)}
}

/* ---------- Surface / Card ---------- */
.card{
  background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:var(--space-6);
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;padding:.65rem 1.1rem;border-radius:999px;
  font-weight:600;border:1px solid transparent;cursor:pointer;
  transition:background .15s,border-color .15s,transform .05s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-700)}
.btn-outline{background:#fff;border-color:var(--brand);color:var(--brand)}
.btn-outline:hover{background:var(--brand-50)}
.btn-muted{background:#f3f4f6;color:#111827}
.btn-icon{padding:.6rem;border-radius:12px}

/* ---------- Badges / Pills ---------- */
.pill{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.4rem .8rem;border-radius:999px;
  background:var(--brand-50);color:var(--brand);font-weight:600;
  border:1px solid rgba(124,58,237,.15)
}
.badge{display:inline-block;padding:.25rem .55rem;border-radius:8px;font-size:.78rem}
.badge-success{background:rgba(22,163,74,.12);color:var(--success)}
.badge-danger{background:rgba(220,38,38,.12);color:var(--danger)}

/* ---------- Forms / Search ---------- */
.input{
  width:100%;padding:.9rem 1rem;border-radius:999px;border:1px solid #e5e7eb;
  background:#fff;outline:none;transition:border-color .15s,box-shadow .15s;
}
.input:focus{border-color:var(--ring);box-shadow:0 0 0 4px rgba(167,139,250,.25)}
.input-group{position:relative}
.input-group .icon-right{position:absolute;right:.6rem;top:50%;transform:translateY(-50%)}

/* ---------- Navbar ---------- */
.navbar{
  position:sticky;top:0;z-index:30;background:#fff;
  border-bottom:1px solid #F1F5F9;backdrop-filter:saturate(180%) blur(6px)
}
.navbar .inner{display:flex;align-items:center;gap:1rem;justify-content:space-between;padding:.9rem 0}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:800;color:var(--brand)}
.nav-links{display:flex;gap:1rem;flex-wrap:wrap}
.nav-links a{color:#111827;padding:.35rem .6rem;border-radius:10px}
.nav-links a:hover{background:#F8FAFC}

/* ---------- Hero (purple) ---------- */
.hero{
  background:linear-gradient(180deg, #E9D5FF 0%, #F3E8FF 70%);
  border-bottom:1px solid #F1F5F9;
}
.hero .title{color:#6D28D9}
.hero .search{max-width:680px;margin:var(--space-6) auto}

/* ---------- Gallery / Asset cards ---------- */
.asset{
  background:#fff;border-radius:18px;overflow:hidden;
  border:1px solid #EEF2F7;box-shadow:var(--shadow-sm);
  transition:transform .15s ease;
}
.asset:hover{transform:translateY(-3px)}
.asset .meta{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem}
.meta .tags{display:flex;gap:.5rem;flex-wrap:wrap}

/* ---------- Footer ---------- */
footer{
  background:#0f172a;color:#fff;margin-top:var(--space-12);padding:var(--space-8) 0
}
footer .muted{color:#CBD5E1}

/* ---------- Utilities ---------- */
.m-0{margin:0}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}
.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}
.p-2{padding:var(--space-2)}.p-4{padding:var(--space-4)}.p-6{padding:var(--space-6)}
.text-center{text-align:center}.text-right{text-align:right}
.text-muted{color:var(--muted)}.text-white{color:#fff}
.bg-light{background:#F8FAFC}.bg-brand{background:var(--brand);color:#fff}
.rounded{border-radius:var(--radius)}.shadow{box-shadow:var(--shadow)}
.hidden{display:none}

/* ---------- Animations ---------- */
.fade-in{opacity:0;transform:translateY(6px);animation:fadeIn .35s ease forwards}
@keyframes fadeIn{to{opacity:1;transform:none}}


/* ---------- AI Tools Dropdown (Header + Sticky) ---------- */
.dv-ai-tools{ position: relative; }
.dv-ai-details{ position: relative; }

.dv-ai-summary{
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  gap: .45rem;
  align-items: center;
  padding: .35rem .6rem;
  border-radius: 10px;
  border: 1px solid transparent;
  color: #111827;
  user-select: none;
  transition: background .15s ease, border-color .15s ease;
}
.dv-ai-summary::-webkit-details-marker{ display:none; }

.dv-ai-details:hover .dv-ai-summary{
  background: #F8FAFC;
  border-color: #EEF2F7;
}

.dv-ai-caret{ opacity:.7; font-size: 12px; line-height: 1; }

.dv-ai-menu{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid #EEF2F7;
  border-radius: 14px;
  padding: 8px;
  box-shadow: var(--shadow);
  z-index: 9999;
}

.dv-ai-item{
  display:block;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: #111827;
  font-size: 14px;
  transition: background .15s ease, color .15s ease;
}
.dv-ai-item:hover{
  background: var(--brand-50);
  color: var(--brand-700);
}

/* Active highlight when user is on ai.* routes */
.dv-ai-tools.is-active .dv-ai-summary{
  background: var(--brand-50);
  border-color: rgba(124,58,237,.20);
  color: var(--brand-700);
}

/* Smooth open/close */
.dv-ai-details[open] .dv-ai-menu{ animation: fadeIn .18s ease both; }


[x-cloak]{ display:none !important; }