/* YojakAI — site-wide design upgrade (S62). Loaded after each page's inline
   CSS so it enhances without breaking layout. Visual-only (colours, gradients,
   shadows, type, motion) — no layout/position overrides. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{ --yk-grad:linear-gradient(135deg,#6d5efc 0%,#9d7bff 55%,#f5b942 120%); }
html{ scroll-behavior:smooth; }

body{
  font-family:'Plus Jakarta Sans','Segoe UI',system-ui,Arial,sans-serif !important;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(60% 50% at 12% -5%, rgba(109,94,252,.20), transparent 55%),
    radial-gradient(48% 45% at 104% 6%, rgba(245,185,66,.10), transparent 55%),
    radial-gradient(45% 50% at 88% 102%, rgba(157,123,255,.14), transparent 55%),
    #0a0a1e !important;
  background-attachment:fixed !important;
}

h1{ letter-spacing:-.022em; }
h2,h3{ letter-spacing:-.012em; }

/* glass cards with hover lift + soft entrance */
.card{
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
  backdrop-filter:blur(7px);
  animation:ykfade .45s ease both;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px -14px rgba(109,94,252,.40) !important;
  border-color:rgba(157,123,255,.45) !important;
}
@keyframes ykfade{ from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:none;} }

/* primary buttons: gradient + glow + lift (exclude destructive/ghost/secondary) */
.btn:not(.del):not(.ghost):not(.cancel):not(.secondary),
.addbtn, .next, .cta, a.botbtn, .save, button.save{
  background-image:var(--yk-grad) !important;
  border:0 !important; color:#fff !important;
  box-shadow:0 10px 26px -10px rgba(109,94,252,.6);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
.btn:not(.del):not(.ghost):not(.cancel):hover,
.addbtn:hover, .next:hover, .cta:hover, a.botbtn:hover, .save:hover{
  transform:translateY(-2px); filter:brightness(1.08);
  box-shadow:0 16px 34px -10px rgba(109,94,252,.75) !important;
}
.btn:active, .next:active, .cta:active{ transform:translateY(0); }

/* inputs: refined focus glow */
input:focus, textarea:focus, select:focus{
  outline:none !important;
  border-color:#9d7bff !important;
  box-shadow:0 0 0 3px rgba(109,94,252,.28) !important;
}

a{ transition:color .15s ease; }

/* nicer scrollbar */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:linear-gradient(#6d5efc,#9d7bff); border-radius:8px; }
*::-webkit-scrollbar-track{ background:rgba(255,255,255,.04); }

/* ---- S62 polish pass: logo, nav, pills, selection ---- */
::selection{ background:rgba(109,94,252,.34); color:#fff; }

/* logo mark — subtle gradient glow */
.logo .dot, header .logo > span:first-child, .logo .ic{
  box-shadow:0 0 0 1px rgba(157,123,255,.35), 0 6px 18px -6px rgba(109,94,252,.7) !important;
}

/* nav links: smooth accent on hover */
nav a:hover, .nav a:hover, header a:hover{ color:#cfc6ff !important; }

/* status / badge pills get a soft ring */
.badge, .pill, .tag, .chip{ box-shadow:0 0 0 1px rgba(255,255,255,.05) inset; }

/* secondary/ghost buttons: clean outline so the primary CTA stands out */
.btn.ghost, .btn.secondary, .ghost, button.cancel, .btn.cancel{
  background:transparent !important; background-image:none !important;
  border:1px solid rgba(157,123,255,.45) !important; color:#cfc6ff !important;
  box-shadow:none !important;
}
.btn.ghost:hover, .ghost:hover{ background:rgba(109,94,252,.12) !important; }

/* gentle section heading rhythm */
h1,h2{ line-height:1.12; }

/* ---- S62 decorative layer (modern SaaS feel) — fixed, behind content ---- */
body::before{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(157,123,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157,123,255,.05) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 50% 10%, #000, transparent 70%);
          mask-image:radial-gradient(circle at 50% 10%, #000, transparent 70%); }
body::after{ content:''; position:fixed; z-index:-1; pointer-events:none;
  width:460px; height:460px; border-radius:50%; top:-130px; right:-120px;
  background:radial-gradient(circle, rgba(245,185,66,.16), transparent 68%);
  filter:blur(30px); animation:ykfloat 22s ease-in-out infinite; }
@keyframes ykfloat{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-55px,70px) scale(1.08)} }

/* custom logo mark — crisp bolt over the gradient square (replaces the ⚡ emoji) */
.logo .dot, header .logo > span:first-child{
  color:transparent !important; background-image:var(--yk-grad) !important;
  position:relative; overflow:hidden; }
.logo .dot::after, header .logo > span:first-child::after{
  content:''; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M13 2 4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E") center/54% no-repeat; }

/* animated gradient sheen on primary CTAs */
.btn:not(.del):not(.ghost):not(.cancel):not(.secondary), .cta, .next, .addbtn{
  background-size:180% 180% !important; animation:yksheen 6s ease infinite; }
@keyframes yksheen{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* ---- S62 3D + motion ---- */
.card{ transform-style:preserve-3d; will-change:transform; }
.yk-tilt{ transition:transform .18s cubic-bezier(.2,.7,.2,1) !important; }
@media (prefers-reduced-motion: no-preference){
  .logo .dot, header .logo > span:first-child{ animation:ykbob 4.5s ease-in-out infinite; }
  .badge, .pill{ animation:ykpulse 3.2s ease-in-out infinite; }
}
@keyframes ykbob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes ykpulse{ 0%,100%{box-shadow:0 0 0 1px rgba(157,123,255,.16) inset, 0 0 0 0 rgba(109,94,252,0)}
  50%{box-shadow:0 0 0 1px rgba(157,123,255,.3) inset, 0 0 20px -4px rgba(109,94,252,.55)} }