/* Видно — детали системы дизайна. Все цвета, тени, скругления и отступы — из tokens.json (tokens.css). */
/* Manrope подключён в tokens.css из папки fonts/ (без Google Fonts). */

:root{--veil:rgba(6,16,60,.22);--veil-strong:rgba(6,16,60,.34);--v-mesh:radial-gradient(55% 70% at 126% 142%,rgba(125,242,107,.34) 0%,rgba(125,242,107,0) 62%),radial-gradient(60% 75% at -6% -12%,rgba(139,98,216,.55) 0%,rgba(139,98,216,0) 60%),radial-gradient(45% 50% at 78% 0%,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 70%),linear-gradient(115deg,#1E3BD9 0%,#2B63EE 45%,#0A8048 100%)}
.v-demo{background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-size:15px;line-height:1.45;padding:var(--space-16);display:flex;flex-direction:column;gap:var(--space-10);-webkit-font-smoothing:antialiased}
.v-row{display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:center}
.v-cap{font-size:12.5px;color:var(--ink-3);font-weight:600}
.v-ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.v-ic-l{width:22px;height:22px}

/* MainButton — главная кнопка */
.v-cta{position:relative;overflow:hidden;display:grid;grid-template-columns:44px 1fr 24px;align-items:center;gap:var(--space-10);width:100%;border:0;font:inherit;font-size:16px;font-weight:700;text-align:center;color:var(--cta-ink);background:linear-gradient(180deg,var(--cta-top),var(--cta-bottom));border-radius:var(--radius-22);padding:8px 16px 8px 8px;box-shadow:var(--shadow-cta);cursor:pointer}
.v-cta-tile{width:44px;height:44px;border-radius:var(--radius-14);background:var(--cta-tile);color:var(--cta-tile-ink);display:flex;align-items:center;justify-content:center}
.v-cta::after{content:"";position:absolute;top:0;bottom:0;width:90px;left:-120px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-18deg);animation:v-shine 3.2s ease-in-out infinite}
@keyframes v-shine{0%{left:-120px}55%,100%{left:120%}}
.v-cta.is-pressed{transform:scale(.98);filter:brightness(.92)}
.v-cta:disabled,.v-cta.is-disabled{opacity:.42;box-shadow:none;cursor:default}
.v-cta:disabled::after,.v-cta.is-disabled::after,.v-cta.is-loading::after{display:none}
.v-spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:v-spin .9s linear infinite;display:inline-block;vertical-align:-3px;margin-right:8px}
@keyframes v-spin{to{transform:rotate(360deg)}}
.v-cta:focus-visible,.v-ghost:focus-visible,.v-seg button:focus-visible,.v-input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* SecondaryButton */
.v-ghost{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:var(--surface);border-radius:var(--radius-16);padding:12px 16px;box-shadow:var(--shadow-ctrl);cursor:pointer}
.v-ghost.is-pressed{background:var(--track)}
.v-ghost:disabled,.v-ghost.is-disabled{color:var(--ink-4);cursor:default}

/* StatusPill */
.v-pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;border-radius:var(--radius-pill);padding:4px 9px;white-space:nowrap}
.v-pill-act{background:var(--blue-tint);color:var(--blue)}
.v-pill-rec{background:var(--red-tint);color:var(--red-ink)}
.v-pill-rec::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);animation:v-blink 1.2s infinite}
@keyframes v-blink{50%{opacity:.25}}
.v-pill-done{background:var(--green-tint);color:var(--green-ink)}
.v-pill-lost{background:var(--amber-tint);color:var(--amber-ink)}
.v-pill-off{background:var(--track);color:var(--ink-2)}

/* FactChip */
.v-chip{display:inline-flex;align-items:center;font-size:13px;font-weight:700;border-radius:var(--radius-pill);padding:6px 12px;background:var(--blue);color:var(--on-blue);font-variant-numeric:tabular-nums;white-space:nowrap;border:0}
.v-chip-sum{background:var(--blue-tint);color:var(--blue)}
.v-chip-miss{background:transparent;border:1.5px dashed var(--blue-border);color:var(--blue);padding:5px 11px}
.v-chip-edit{background:var(--surface);color:var(--blue);box-shadow:0 0 0 2px var(--blue)}

/* Card */
.v-card{background:var(--surface);border-radius:var(--radius-24);padding:var(--space-16);box-shadow:var(--shadow-card)}
.v-card-title{font-size:13px;font-weight:700;color:var(--ink-3);margin-bottom:var(--space-10);display:flex;justify-content:space-between;gap:8px}
.v-card-title a{color:var(--blue);text-decoration:none}

/* GlassWidget */
.v-widget{position:relative;overflow:hidden;border-radius:var(--radius-26);padding:var(--space-16);background:var(--v-mesh);color:#FFFFFF;box-shadow:var(--shadow-brand)}
.v-widget::before{content:"";position:absolute;right:-40px;top:-60px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.14)}
.v-widget-title{position:relative;font-size:13px;font-weight:600}
.v-widget-nums{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8);margin-top:var(--space-10)}
.v-glass{background:linear-gradient(var(--veil),var(--veil)),var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-16);padding:var(--space-10);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.v-glass b{display:block;font-size:24px;font-weight:800;line-height:1;letter-spacing:-.02em;text-shadow:0 1px 2px rgba(10,20,60,.3)}
.v-glass span{font-size:12px;font-weight:700;text-shadow:0 1px 2px rgba(10,20,60,.35)}

/* PatientRow */
.v-prow{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:var(--space-10);align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.v-prow:first-child{border-top:0}
.v-prow.is-pressed{background:var(--surface-2);margin:0 -16px;padding:12px 16px}
.v-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#FFFFFF;background:var(--grad-text);flex:none}
.v-prow-name{font-weight:700;font-size:15px;line-height:1.2}
.v-prow-meta{font-size:12.5px;color:var(--ink-2);margin-top:2px}
.v-prow-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.v-sum{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* IconCircle */
.v-ib{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none}
.v-ib-blue{background:var(--blue-tint);color:var(--blue)}
.v-ib-green{background:var(--green-tint);color:var(--green-ink)}
.v-ib-amber{background:var(--amber-tint);color:var(--amber-ink)}
.v-ib-red{background:var(--red-tint);color:var(--red-ink)}

/* Segmented */
.v-seg{display:grid;grid-template-columns:repeat(3,1fr);background:var(--track);border-radius:var(--radius-12);padding:3px;font-size:13px;font-weight:600;text-align:center}
.v-seg button{border:0;background:transparent;font:inherit;color:var(--ink-2);padding:7px 0;border-radius:var(--radius-9);cursor:pointer}
.v-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px rgba(11,15,25,.1)}

/* FilterChips */
.v-filter{display:flex;gap:6px;flex-wrap:wrap}
.v-filter button{border:0;font:inherit;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:var(--radius-pill);background:var(--surface);color:var(--ink-2);cursor:pointer}
.v-filter button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}

/* TabBar */
.v-tabbar{background:var(--tabbar);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:var(--radius-26);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:8px 6px;font-size:11px;font-weight:600;color:var(--ink-3);text-align:center;box-shadow:var(--shadow-bar)}
.v-tab{display:flex;flex-direction:column;align-items:center;gap:3px}
.v-tab.is-on{color:var(--blue)}
.v-tab-mic{width:46px;height:46px;border-radius:var(--radius-14);background:var(--grad-brand);display:flex;align-items:center;justify-content:center;margin:0 auto;color:#FFFFFF;box-shadow:0 10px 18px -8px rgba(30,59,217,.6)}
.v-tab-mic.is-rec{background:var(--red);box-shadow:0 0 0 6px var(--red-tint)}

/* SavedBanner */
.v-saved{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--space-12);align-items:center;background:var(--green-tint);border-radius:var(--radius-20);padding:14px}
.v-saved .v-ib{width:40px;height:40px;background:var(--surface);color:var(--green-ink)}
.v-saved b{display:block;font-size:16px;letter-spacing:-.01em}
.v-saved span{font-size:13px;color:var(--green-ink)}

/* LoadingSteps */
.v-steps-load{display:grid;gap:var(--space-8)}
.v-steps-load div{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--space-10);align-items:center;font-size:13.5px}
.v-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.v-dot-done{background:var(--green-tint);color:var(--green-ink)}
.v-dot-now{border:2px solid var(--blue);border-right-color:transparent;animation:v-spin .9s linear infinite}
.v-dot-wait{background:var(--track)}
.v-steps-load .is-now{font-weight:700}
.v-steps-load .is-wait{color:var(--ink-3)}

/* Stepper */
.v-stepper{display:grid;grid-template-columns:repeat(var(--n,6),1fr);gap:5px}
.v-stepper span{height:4px;border-radius:2px;background:var(--track)}
.v-stepper span.is-on{background:var(--blue)}

/* Celebration */
.v-cong{position:relative;overflow:hidden;border-radius:var(--radius-24);padding:14px;background:var(--grad-sunset);box-shadow:0 18px 30px -18px rgba(240,137,79,.7)}
.v-cong-card{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--space-12);align-items:center;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);border-radius:18px;padding:12px;color:#0B0F19;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.v-cong .v-ib{width:44px;height:44px;background:#FFF0E6;color:#C2410C}
.v-cong b{display:block;font-size:16px}
.v-cong span{font-size:13px;font-weight:600;color:#5E6472}

/* EmptyState */
.v-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-8);text-align:center;padding:14px 8px}
.v-empty .v-ib{width:56px;height:56px;background:var(--green-tint);color:var(--green-ink)}
.v-empty b{font-size:17px;letter-spacing:-.01em}
.v-empty span{font-size:13.5px;color:var(--ink-2)}

/* Toast */
.v-toast{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--space-10);align-items:center;background:var(--ink);color:var(--bg);border-radius:var(--radius-16);padding:10px 14px 10px 10px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow-cta)}
.v-toast .v-ib{width:28px;height:28px}

/* Input */
.v-field{display:flex;flex-direction:column;gap:5px}
.v-field label{font-size:12px;font-weight:700;color:var(--ink-3)}
.v-input{height:46px;border-radius:var(--radius-14);background:var(--surface);border:1.5px solid var(--line);padding:0 14px;font:inherit;font-size:15px;color:var(--ink);width:100%;box-sizing:border-box}
.v-input::placeholder{color:var(--ink-4)}
.v-input.is-focus{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-tint)}
.v-input.is-error{border-color:var(--red)}
.v-input:disabled{background:var(--track);color:var(--ink-4);border-color:transparent}
.v-field-error{font-size:12px;color:var(--red-ink);font-weight:600}

/* Sidebar (компьютер) */
.v-side{background:var(--surface-2);border-radius:var(--radius-16);padding:18px 12px;display:flex;flex-direction:column;gap:4px;width:232px;box-sizing:border-box}
.v-logo{display:flex;align-items:center;gap:9px;padding:2px 8px 16px;font-weight:800;font-size:18px;letter-spacing:-.02em}
.v-logo i{width:26px;height:26px;border-radius:22%;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g' x1='0.077' y1='0.179' x2='0.923' y2='0.821'><stop offset='0' stop-color='%231E3BD9'/><stop offset='0.45' stop-color='%232B63EE'/><stop offset='1' stop-color='%230A8048'/></linearGradient></defs><rect width='100' height='100' rx='22' fill='url(%23g)'/><path transform='translate(29.13 73) scale(0.03194 -0.03194)' fill='%23FFFFFF' d='M450 0 10 1440H290L650 256L1016 1440H1296L856 0Z'/></svg>") center/100% 100% no-repeat;display:block;position:relative;flex:none}
.v-side .v-logo i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}
.v-rec{display:flex;align-items:center;gap:10px;border-radius:var(--radius-16);padding:8px 10px 8px 8px;background:linear-gradient(180deg,var(--cta-top),var(--cta-bottom));color:var(--cta-ink);font-weight:700;font-size:14px;margin-bottom:12px;box-shadow:var(--shadow-cta)}
.v-rec span{width:32px;height:32px;border-radius:11px;background:var(--grad-brand);display:flex;align-items:center;justify-content:center;color:#FFFFFF}
.v-nav{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;font-size:14px;font-weight:600;color:var(--ink-2)}
.v-nav.is-on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-ctrl)}
.v-nav.is-on .v-ic{color:var(--blue)}
.v-nav em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:var(--ink-3)}

/* TwoWeightTitle */
.v-title{font-size:30px;line-height:1.06;letter-spacing:-.025em;margin:0}
.v-title .v-soft{display:block;font-weight:300;color:var(--ink-2)}
.v-title .v-bold{font-weight:800}

@media (prefers-reduced-motion: reduce){.v-cta::after,.v-pill-rec::before,.v-spin,.v-dot-now{animation:none}}

/* ColorCard — цветная карточка (знакомство, «что нового», польза): текст только в белом стекле */
.v-fcard{border-radius:22px;padding:14px;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;position:relative;overflow:hidden}
.v-fcard::before{content:"";position:absolute;right:-30px;top:-40px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.18)}
.v-fcard-sky{background:var(--grad-sky)}.v-fcard-lagoon{background:var(--grad-lagoon)}.v-fcard-orchid{background:var(--grad-orchid)}.v-fcard-sunset{background:var(--grad-sunset)}
.v-fcard h5{position:relative;margin:0;font-size:16px;font-weight:800;color:#FFFFFF;letter-spacing:-.01em;text-shadow:0 1px 2px rgba(10,20,60,.25)}
.v-fcard-in{position:relative;background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.9);border-radius:16px;padding:10px 12px;color:#0B0F19;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.v-fcard-in b{display:block;font-size:14px}.v-fcard-in span{font-size:12px;color:#5E6472}
.v-fcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
/* пастельные карточки выводов */
.v-pastel-lav{background:var(--lavender)}.v-pastel-ice{background:var(--ice)}.v-pastel-peach{background:var(--peach)}

/* AiCard — подсказка ИИ в тонкой рамке-градиенте */
.v-ai{--ai-grad:var(--grad-text);background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--ai-grad) border-box;border:1.5px solid transparent;border-radius:var(--radius-16);padding:12px 14px;color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .v-ai{--ai-grad:linear-gradient(115deg,var(--blue) 0%,var(--green) 100%)}}
:root[data-theme="dark"] .v-ai{--ai-grad:linear-gradient(115deg,var(--blue) 0%,var(--green) 100%)}