@import url('../assets/fonts/inter.css');

/* ============================================================
   SEO Jarvis — Личный кабинет · Design System
   Extracted 1:1 from Figma (ЛК Jarvis.fig)
   ============================================================ */

:root{
  /* ---- Brand blue ---- */
  --blue-700:#0e47a8;   /* dark brand */
  --blue-600:#1a69f0;   /* primary */
  --blue-500:#377ef0;
  --blue-400:#2282ff;
  --blue-300:#95c5f8;
  --blue-100:#cee5ff;
  --blue-75 :#dbe5f7;   /* borders */
  --blue-50 :#e9f4ff;   /* soft fill */
  --blue-25 :#f6f8ff;   /* app bg */
  --blue-10 :#f7f9ff;   /* sidebar */
  --cyan-500:#29b6f6;

  /* ---- Ink / text ---- */
  --ink   :#080814;
  --ink-2 :#191919;
  --text  :#59617a;
  --muted :#99a1b8;
  --muted-2:#737a92;

  /* ---- Semantic ---- */
  --green   :#14b861;
  --green-2 :#177848;
  --green-bg:#e0faeb;
  --green-50:#f4ffe3;
  --gold    :#ffb800;
  --gold-bg :#fff8e6;
  --red     :#fe3e0e;
  --red-bg  :#fff2eb;

  /* ---- Surfaces ---- */
  --surface:#ffffff;
  --surface-2:#f7f9ff;
  --bg:#f6f8ff;
  --border:#dbe5f7;
  --border-2:#e9f4ff;

  /* ---- Gradients ---- */
  --grad-primary:linear-gradient(90deg,#83b7f7 0%,#2571f1 100%);
  --grad-brand:linear-gradient(160deg,#0e47a8 0%,#1a69f0 55%,#2282ff 100%);
  --grad-panel:linear-gradient(155deg,#0e47a8 0%,#0b3c92 100%);
  --grad-social:linear-gradient(135deg,#0e6ef2 0%,#3fb1eb 100%);
  --grad-login:linear-gradient(90deg,#376dc0 0%,#0e47a8 100%);
  --grad-danger:linear-gradient(135deg,#ff6b35 0%,#fe3e0e 100%);

  /* ---- Radii ---- */
  --r-sm:8px;  --r-md:10px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-pill:100px;

  /* ---- Shadow ---- */
  --sh-xs:0 1px 2px rgba(15,42,92,.05);
  --sh-sm:0 2px 8px rgba(20,60,140,.06);
  --sh-md:0 8px 24px rgba(20,60,140,.10);
  --sh-lg:0 18px 48px rgba(15,42,92,.16);
  --sh-blue:0 12px 30px rgba(26,105,240,.28);

  /* ---- Layout ---- */
  --sidebar-w:220px;
  --topbar-h:74px;

  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

*{margin:0;padding:0;box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:'cv11','ss01';
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;outline:none}
img{max-width:100%;display:block}
ul{list-style:none}
::selection{background:rgba(26,105,240,.18)}

/* Accessibility: visible keyboard focus */
:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px;border-radius:6px}
.btn:focus-visible,.sb-item:focus-visible,.fchip:focus-visible,.social-btn:focus-visible{outline-offset:3px}
.input:focus-visible,.select:focus-visible{outline:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#cdd8ee;border-radius:20px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#aebbdc;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ============ ICON (Ionicons via CSS mask or inline svg) ============ */
.ic{display:inline-flex;width:20px;height:20px;flex:none;color:currentColor}
.ic svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:34;stroke-linecap:round;stroke-linejoin:round}
.ic.fill svg{fill:currentColor;stroke:none}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 20px;border-radius:var(--r-md);
  font-size:14px;font-weight:600;color:var(--ink);
  background:var(--surface);border:1px solid var(--border);
  transition:transform .16s var(--ease),box-shadow .2s var(--ease),background .2s,filter .2s var(--ease);
  white-space:nowrap;user-select:none;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh-sm)}
.btn:active{transform:translateY(0)}
.btn .ic{width:18px;height:18px}
/* Primary CTA: flat blue gradient, no blue glow. On hover just lighten slightly. */
.btn-primary{background:var(--grad-primary);color:#fff;border:none}
.btn-primary:hover{box-shadow:none;filter:brightness(1.08)}
.btn-primary:active{filter:brightness(.98)}
.btn-ghost{background:var(--blue-50);color:var(--blue-600);border:none;font-weight:600}
.btn-ghost:hover{background:#dcecff}
.btn-soft{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.btn-danger{background:var(--red-bg);color:var(--red);border:none}
.btn-danger:hover{background:#ffe2d6}
.btn-danger-outline{background:#fff;color:var(--red);border:1.5px solid var(--red)}
.btn-danger-outline:hover{background:var(--red-bg)}
.btn-danger-grad{background:var(--grad-danger);color:#fff;border:none}
.btn-danger-grad:hover{box-shadow:none;filter:brightness(1.08)}
.btn-danger-grad:active{filter:brightness(.98)}
.btn-outline{background:var(--surface);color:var(--blue-600);border:1.5px solid var(--blue-600)}
.btn-outline:hover{background:var(--blue-50)}
.btn-outline .ic{color:var(--blue-600)}
.btn-sm{height:34px;padding:0 14px;font-size:13px;border-radius:var(--r-sm)}
.btn-lg{height:54px;padding:0 26px;font-size:16px;border-radius:var(--r-lg)}
.btn-block{width:100%}
.btn:disabled{opacity:.5;pointer-events:none}

/* ============ Chips / badges ============ */
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r-pill);font-size:13px;font-weight:500;background:var(--blue-50);color:var(--blue-600);white-space:nowrap;flex:none}
.chip-green{background:var(--green-bg);color:var(--green)}
.chip-gold{background:var(--gold-bg);color:#FBB500}
.chip-red{background:var(--red-bg);color:var(--red)}
.chip-gray{background:#eef2fb;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.tag{display:inline-flex;align-items:center;padding:4px 11px;border-radius:8px;font-size:12px;font-weight:500;background:var(--blue-50);color:var(--blue-600);line-height:1.35}

.delta-up{color:var(--green);font-weight:500}
.delta-down{color:var(--red);font-weight:500}
.delta-flat{color:var(--muted);font-weight:500}

/* ============ Cards ============ */
.card{background:var(--surface);border-radius:var(--r-xl);border:1px solid var(--border);box-shadow:var(--sh-xs)}
.card-pad{padding:20px}

/* ============ Form fields ============ */
.field{display:block;margin-bottom:18px}
.field label{display:block;font-size:15px;font-weight:500;color:var(--text);margin-bottom:8px}
.input{
  width:100%;height:49px;padding:0 16px;border-radius:var(--r-md);
  background:var(--surface);border:1.5px solid var(--border);
  font-size:16px;color:var(--ink);transition:border-color .18s,box-shadow .18s,background .18s;
}
.input::placeholder{color:var(--muted)}
.input:focus{border-color:var(--blue-500);box-shadow:0 0 0 4px rgba(26,105,240,.12);background:#fff}
.input-wrap{position:relative}
.input-wrap .ic{position:absolute;top:50%;transform:translateY(-50%);color:var(--muted)}
/* Leading icon: the first child of a has-left wrapper is emitted by icon() without a
   .left class, so anchor it explicitly. Keeps the magnifier/mail/lock pinned at 14px. */
.input-wrap.has-left>.ic:first-child,.input-wrap .ic.left{left:14px}
.input-wrap .ic.right{left:auto;right:14px;cursor:pointer}
.input-wrap.has-left .input{padding-left:44px}

/* ============ Utilities ============ */
.flex{display:flex}.items-center{align-items:center}.items-end{align-items:flex-end}.justify-between{justify-content:space-between}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.grow{flex:1}.wrap{flex-wrap:wrap}
.muted{color:var(--muted)}.text-sec{color:var(--text)}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ============ App footer ============ */
.app-foot{padding:22px 40px 34px;text-align:center;font-size:13px;color:var(--muted)}
.app-foot a{color:var(--blue-600)}
.app-foot a:hover{text-decoration:underline}

/* ============ Toast ============ */
#toasts{position:fixed;right:24px;bottom:24px;z-index:9000;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.toast{display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:12px 16px;border-radius:var(--r-md);box-shadow:var(--sh-lg);font-size:14px;font-weight:500;transform:translateY(12px);opacity:0;animation:toastIn .4s var(--ease-out) forwards}
.toast .ic{width:18px;height:18px}
.toast.ok .ic{color:var(--green)}
.toast.err .ic{color:var(--red)}
@keyframes toastIn{to{transform:translateY(0);opacity:1}}
.toast.out{animation:toastOut .3s var(--ease) forwards}
@keyframes toastOut{to{transform:translateY(12px);opacity:0}}