/* ═══════════ Kia View · базовая дизайн-система (логин + кабинет) ═══════════
   Токены и примитивы в стиле 21st-компонента: 2px-рамки, световая кромка за
   курсором, кнопки со «вспышкой», мягкие свечения. Подключается ПЕРЕД cabinet.css. */
:root{
  --font:'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --color-accent:#19d38a; --color-accent-2:#16b6d6;
  --color-accent-bg:rgba(25,211,138,.12);
  --color-accent-glow:0 0 28px -6px rgba(25,211,138,.55);
  --color-up:#2fd97c; --color-dn:#ff5c7a;
  --color-warn:#fbbf24;
  --radius:14px; --radius-s:10px;
}
:root,:root[data-theme="dark"]{
  --color-bg:#05080c; --color-bg-2:#090d13; --color-surface:#0d131b; --color-surface-2:#121a24;
  --color-border:#1e2836; --color-line:rgba(148,163,184,.09);
  --color-text:#e6edf3; --color-text-2:#9aa6b8; --color-text-3:#5d6b80;
  --color-text-primary:#19d38a;              /* акцент подсветки (как в компоненте) */
  color-scheme:dark;
}
:root[data-theme="light"]{
  --color-bg:#eef1f6; --color-bg-2:#ffffff; --color-surface:#ffffff; --color-surface-2:#f5f7fb;
  --color-border:#d9e0ea; --color-line:rgba(15,23,42,.08);
  --color-text:#0f172a; --color-text-2:#475569; --color-text-3:#8a97a8;
  --color-accent:#0ea56f; --color-accent-2:#0e93c0; --color-accent-bg:rgba(14,165,111,.12);
  --color-accent-glow:0 0 0 1px rgba(14,165,111,.18);
  --color-text-primary:#0ea56f;
  --color-up:#16a34a; --color-dn:#e11d48;
  color-scheme:light;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){
    --color-bg:#eef1f6; --color-bg-2:#ffffff; --color-surface:#ffffff; --color-surface-2:#f5f7fb;
    --color-border:#d9e0ea; --color-line:rgba(15,23,42,.08);
    --color-text:#0f172a; --color-text-2:#475569; --color-text-3:#8a97a8;
    --color-accent:#0ea56f; --color-accent-2:#0e93c0; --color-accent-bg:rgba(14,165,111,.12);
    --color-accent-glow:0 0 0 1px rgba(14,165,111,.18);
    --color-text-primary:#0ea56f; --color-up:#16a34a; --color-dn:#e11d48;
    color-scheme:light;
  }
}
*{box-sizing:border-box;margin:0;padding:0}
body{font:14px/1.45 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
::selection{background:var(--color-accent-bg)}

/* ───────── поле ввода: 2px рамка + световая кромка за курсором ───────── */
.ui-field label{display:block;margin-bottom:7px;font-size:13px;font-weight:600;color:var(--color-text-2)}
.ui-input{position:relative;width:100%;border-radius:var(--radius-s);isolation:isolate}
.ui-input input,.ui-input select{
  position:relative;z-index:1;width:100%;height:52px;padding:0 44px 0 16px;
  border:2px solid var(--color-border);border-radius:var(--radius-s);
  background:var(--color-surface);color:var(--color-text);outline:none;font-weight:500;
  transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.ui-input input::placeholder{color:var(--color-text-3);font-weight:500}
.ui-input input:hover{border-color:var(--color-border)}
.ui-input input:focus{background:var(--color-bg);border-color:var(--color-accent);box-shadow:0 0 0 4px var(--color-accent-bg)}
.ui-input input:disabled{opacity:.55;cursor:default}
/* световые полосы сверху/снизу — идут за курсором (--mx ставит JS) */
.ui-input::before,.ui-input::after{content:"";position:absolute;left:0;right:0;height:2px;z-index:3;
  pointer-events:none;opacity:0;transition:opacity .2s var(--ease)}
.ui-input::before{top:0;border-radius:var(--radius-s) var(--radius-s) 0 0;
  background:radial-gradient(32px circle at var(--mx,50%) 0,var(--color-text-primary),transparent 70%)}
.ui-input::after{bottom:0;border-radius:0 0 var(--radius-s) var(--radius-s);
  background:radial-gradient(32px circle at var(--mx,50%) 2px,var(--color-text-primary),transparent 70%)}
.ui-input:hover::before,.ui-input:hover::after{opacity:1}
.ui-input-ic{position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:4;
  display:grid;place-items:center;color:var(--color-text-3);width:26px;height:26px}
.ui-input-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
button.ui-input-ic{cursor:pointer;border-radius:7px}
button.ui-input-ic:hover{color:var(--color-accent)}

/* ───────── кнопки ───────── */
.ui-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 20px;border-radius:var(--radius-s);font-weight:700;font-size:14px;
  border:2px solid var(--color-border);background:var(--color-surface);color:var(--color-text);
  overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s}
.ui-btn:hover{transform:translateY(-1px);background:var(--color-surface-2)}
.ui-btn:active{transform:translateY(0)}
.ui-btn:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.ui-btn-primary{background:linear-gradient(135deg,var(--color-accent),var(--color-accent-2));
  border-color:transparent;color:#04110b}
.ui-btn-primary:hover{background:linear-gradient(135deg,var(--color-accent),var(--color-accent-2));
  box-shadow:0 10px 30px -12px var(--color-accent)}
.ui-btn-ghost{background:transparent}
/* «вспышка» по кнопке при наведении */
.ui-shine::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-100%);
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.32) 50%,transparent 62%)}
.ui-shine:hover::after{transform:translateX(100%);transition:transform .85s var(--ease)}
.ui-btn.loading{pointer-events:none;opacity:.85}
.ui-btn.loading .lbl::after{content:"";display:inline-block;width:12px;height:12px;margin-left:8px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-2px;
  animation:ui-spin .7s linear infinite}
@keyframes ui-spin{to{transform:rotate(360deg)}}

/* ───────── карточка ───────── */
.ui-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);
  box-shadow:0 20px 50px -30px rgba(0,0,0,.8)}