/* ============================================================
   DEVINE CONNECT — Design System
   Palette: Pink · Magenta · White · Yellow-Green
   ============================================================ */

:root{
  /* Brand */
  --magenta-900:#7A0B45;
  --magenta-700:#A81263;
  --magenta:#C81E7C;
  --magenta-500:#DE2A8E;
  --magenta-300:#F06CB4;

  --pink:#FF74A8;
  --pink-400:#FF8FBB;
  --pink-200:#FFC6DC;
  --pink-100:#FFE1EC;
  --pink-050:#FFF2F7;

  --lime:#A9CE3A;
  --lime-600:#8CB420;
  --lime-300:#C7E265;
  --lime-100:#EEF7D4;

  --gold:#F5C542;

  /* Neutrals (light) */
  --white:#FFFFFF;
  --bg:#FFF8FB;
  --bg-2:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#FFF4F8;
  --line:#F2DDE7;
  --line-2:#EAEAEF;

  --ink:#26111C;
  --ink-2:#5C4451;
  --ink-3:#907C87;
  --ink-4:#B9A7B1;

  /* Gradients */
  --g-brand:linear-gradient(135deg,#FF74A8 0%,#DE2A8E 52%,#A81263 100%);
  --g-brand-soft:linear-gradient(135deg,#FFD9E7 0%,#FFC0DA 100%);
  --g-lime:linear-gradient(135deg,#C7E265 0%,#8CB420 100%);
  --g-glow:radial-gradient(60% 60% at 50% 0%,rgba(222,42,142,.16),transparent 70%);
  --g-card:linear-gradient(180deg,rgba(255,255,255,0) 38%,rgba(28,6,18,.82) 100%);

  /* Elevation */
  --sh-1:0 1px 2px rgba(122,11,69,.06), 0 2px 8px rgba(122,11,69,.05);
  --sh-2:0 4px 14px rgba(122,11,69,.09), 0 1px 3px rgba(122,11,69,.06);
  --sh-3:0 10px 34px rgba(122,11,69,.14), 0 3px 10px rgba(122,11,69,.07);
  --sh-4:0 22px 60px rgba(122,11,69,.22), 0 6px 18px rgba(122,11,69,.10);
  --sh-mag:0 8px 26px rgba(200,30,124,.42);

  /* Radii */
  --r-xs:10px; --r-sm:14px; --r-md:20px; --r-lg:26px; --r-xl:34px; --r-2xl:44px; --r-full:999px;

  /* Motion */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
  --e-in-out:cubic-bezier(.65,0,.35,1);
  --t-fast:.16s; --t:.28s; --t-slow:.48s;

  /* Layout */
  --nav-h:62px;
  --bar-h:60px;
  --pad:16px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --app-max:520px;

  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  --font-d:'Fraunces','Plus Jakarta Sans',Georgia,serif;
}

/* ---------- Dark mode ---------- */
html[data-theme="dark"]{
  --white:#150C12;
  --bg:#120A0F;
  --bg-2:#1A1017;
  --surface:#1E131B;
  --surface-2:#271822;
  --line:#3A2531;
  --line-2:#33212C;

  --ink:#FDF3F8;
  --ink-2:#D6BFCC;
  --ink-3:#A08C99;
  --ink-4:#6F5C68;

  --pink-050:#251520;
  --pink-100:#2E1926;
  --pink-200:#4A2338;
  --lime-100:#22301A;

  --g-brand-soft:linear-gradient(135deg,#4A1A34 0%,#3A1128 100%);
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 4px 14px rgba(0,0,0,.45);
  --sh-3:0 10px 34px rgba(0,0,0,.55);
  --sh-4:0 22px 60px rgba(0,0,0,.65);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
  transition:background var(--t) var(--e-out), color var(--t) var(--e-out);
}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
/* Default size for every icon from the ICON set; specific rules below override. */
svg[viewBox="0 0 24 24"]{width:20px;height:20px;flex:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2.5px solid var(--magenta-500);outline-offset:2px;border-radius:8px}

::-webkit-scrollbar{width:0;height:0}
.scroll-x{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}

/* ---------- Typography ---------- */
.t-display{font-family:var(--font-d);font-weight:600;letter-spacing:-.02em;line-height:1.12}
.t-h1{font-size:26px;font-weight:800;letter-spacing:-.025em;line-height:1.18}
.t-h2{font-size:20px;font-weight:800;letter-spacing:-.02em}
.t-h3{font-size:16px;font-weight:750;letter-spacing:-.01em}
.t-body{font-size:14.5px;color:var(--ink-2)}
.t-sm{font-size:13px;color:var(--ink-2)}
.t-xs{font-size:11.5px;color:var(--ink-3);font-weight:600}
.t-label{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.t-grad{background:var(--g-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.num{font-variant-numeric:tabular-nums}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 22px;border-radius:var(--r-full);
  font-weight:750;font-size:14.5px;letter-spacing:-.01em;
  transition:transform var(--t-fast) var(--e-spring), box-shadow var(--t) var(--e-out), background var(--t) var(--e-out), opacity var(--t) var(--e-out);
  will-change:transform;user-select:none;white-space:nowrap;
}
.btn svg{width:18px;height:18px}
.btn-sm svg,.btn-xs svg{width:15px;height:15px}
.btn:active{transform:scale(.955)}
.btn-primary{background:var(--g-brand);color:#fff;box-shadow:var(--sh-mag)}
.btn-primary:active{box-shadow:0 4px 14px rgba(200,30,124,.38)}
.btn-lime{background:var(--g-lime);color:#1E2A05;box-shadow:0 8px 22px rgba(140,180,32,.34)}
.btn-ghost{background:var(--surface-2);color:var(--magenta);border:1.5px solid var(--line)}
.btn-outline{background:transparent;color:var(--magenta);border:1.8px solid var(--magenta-300)}
.btn-sm{height:38px;padding:0 16px;font-size:13px}
.btn-xs{height:31px;padding:0 13px;font-size:12px;font-weight:700}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

.icon-btn{
  width:42px;height:42px;border-radius:var(--r-full);
  display:grid;place-items:center;background:var(--surface-2);color:var(--ink-2);
  transition:transform var(--t-fast) var(--e-spring), background var(--t) var(--e-out), color var(--t) var(--e-out);
  flex:none;
}
.icon-btn svg{width:19px;height:19px}
.icon-btn:active{transform:scale(.9)}
.icon-btn.on{background:var(--g-brand);color:#fff;box-shadow:var(--sh-mag)}

/* ---------- Surfaces ---------- */
.card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden}
.card-flat{background:var(--surface);border-radius:var(--r-lg);border:1.5px solid var(--line)}
.pill{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;
  border-radius:var(--r-full);background:var(--pink-050);color:var(--magenta-700);
  font-size:12px;font-weight:700;border:1px solid var(--pink-100);white-space:nowrap;
}
.pill-lime{background:var(--lime-100);color:var(--lime-600);border-color:transparent}
.pill svg{width:13px;height:13px}
.pill-solid{background:var(--g-brand);color:#fff;border:0}
.pill-glass{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

.avatar{border-radius:var(--r-full);object-fit:cover;background:var(--pink-100);flex:none}
.av-ring{padding:2.5px;border-radius:var(--r-full);background:var(--g-brand);display:inline-flex;flex:none}
.av-ring.lime{background:var(--g-lime)}
.av-ring>img{border:2.5px solid var(--surface)}

.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot-on{background:var(--lime);box-shadow:0 0 0 2.5px var(--surface),0 0 8px rgba(169,206,58,.7)}
.dot-off{background:var(--ink-4);box-shadow:0 0 0 2.5px var(--surface)}

.divider{height:1px;background:var(--line);border:0;margin:0}

.badge{
  min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-full);
  background:var(--g-brand);color:#fff;font-size:11px;font-weight:800;
  display:grid;place-items:center;box-shadow:0 2px 8px rgba(200,30,124,.4);
}

/* ---------- Inputs ---------- */
.field{
  width:100%;height:50px;padding:0 16px;border-radius:var(--r-md);
  background:var(--surface-2);border:1.5px solid var(--line);color:var(--ink);
  transition:border-color var(--t) var(--e-out), box-shadow var(--t) var(--e-out), background var(--t) var(--e-out);
  font-size:15px;
}
.field::placeholder{color:var(--ink-4)}
.field:focus{outline:none;border-color:var(--magenta-300);box-shadow:0 0 0 4px rgba(222,42,142,.11);background:var(--surface)}
textarea.field{height:auto;min-height:100px;padding:14px 16px;resize:vertical;line-height:1.55}
select.field{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23907C87' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}

.search-wrap{position:relative;display:flex;align-items:center}
.search-wrap>svg{position:absolute;left:15px;width:18px;height:18px;color:var(--ink-4);pointer-events:none}
.search-wrap>.field{padding-left:44px;height:46px;border-radius:var(--r-full)}

.switch{width:50px;height:29px;border-radius:var(--r-full);background:var(--line);position:relative;transition:background var(--t) var(--e-out);flex:none}
.switch::after{content:'';position:absolute;top:2.5px;left:2.5px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.22);transition:transform var(--t) var(--e-spring)}
.switch.on{background:var(--g-lime)}
.switch.on::after{transform:translateX(21px)}

.range{-webkit-appearance:none;width:100%;height:6px;border-radius:99px;background:var(--line);outline:none}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--g-brand);box-shadow:0 2px 10px rgba(200,30,124,.5);border:3px solid #fff;cursor:pointer}
.range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--magenta);border:3px solid #fff;cursor:pointer}

/* ---------- Utilities ---------- */
.row{display:flex;align-items:center}
.row-b{display:flex;align-items:center;justify-content:space-between}
.col{display:flex;flex-direction:column}
.g4{gap:4px}.g6{gap:6px}.g8{gap:8px}.g10{gap:10px}.g12{gap:12px}.g14{gap:14px}.g16{gap:16px}.g20{gap:20px}
.grow{flex:1;min-width:0}
.center{display:grid;place-items:center}
.px{padding-left:var(--pad);padding-right:var(--pad)}
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}.mt24{margin-top:24px}
.tc{text-align:center}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rel{position:relative}
.hide{display:none !important}

/* ---------- Animations ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(.82);opacity:0}60%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
@keyframes slideRight{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.75}}
@keyframes ripple{from{transform:scale(.6);opacity:.6}to{transform:scale(2.4);opacity:0}}
@keyframes shimmer{from{background-position:-420px 0}to{background-position:420px 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.08)}70%{transform:scale(.96)}100%{transform:scale(1);opacity:1}}
@keyframes heartBurst{0%{transform:scale(0) rotate(-18deg);opacity:0}45%{transform:scale(1.28) rotate(6deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:0}}
@keyframes barPulse{0%,100%{height:22%}50%{height:100%}}

.anim-up{animation:fadeUp .42s var(--e-out) both}
.anim-in{animation:fadeIn .3s var(--e-out) both}
.anim-pop{animation:pop .38s var(--e-spring) both}
.stg>*{animation:fadeUp .44s var(--e-out) both}
.stg>*:nth-child(1){animation-delay:.02s}
.stg>*:nth-child(2){animation-delay:.06s}
.stg>*:nth-child(3){animation-delay:.10s}
.stg>*:nth-child(4){animation-delay:.14s}
.stg>*:nth-child(5){animation-delay:.18s}
.stg>*:nth-child(6){animation-delay:.22s}
.stg>*:nth-child(7){animation-delay:.26s}
.stg>*:nth-child(8){animation-delay:.30s}
.stg>*:nth-child(n+9){animation-delay:.34s}

.skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--pink-100) 50%,var(--surface-2) 75%);background-size:420px 100%;animation:shimmer 1.3s linear infinite;border-radius:var(--r-sm)}

.spinner{width:22px;height:22px;border:2.5px solid var(--pink-200);border-top-color:var(--magenta);border-radius:50%;animation:spin .7s linear infinite}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}