/* ===== SOURCE: style.css ===== */
:root {
  color-scheme: light;
  --bg: #f5f3f9;
  --bg-2: #eef3fb;
  --text: #171926;
  --muted: #7f8291;
  --glass: rgba(255,255,255,.68);
  --glass-strong: rgba(255,255,255,.84);
  --line: rgba(76,66,116,.10);
  --shadow: 0 18px 46px rgba(67,56,112,.10);
  --pink: #e777b8;
  --violet: #9d69fa;
  --blue: #568fff;
  --couple: #e86fae;
  --couple-soft: rgba(232,111,174,.13);
  --friends: #568fff;
  --friends-soft: rgba(86,143,255,.13);
  --danger: #ef5f72;
  --nav-h: 88px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #090c15;
  --bg-2: #111626;
  --text: #f6f7ff;
  --muted: #989cad;
  --glass: rgba(20,24,39,.72);
  --glass-strong: rgba(22,27,44,.90);
  --line: rgba(255,255,255,.075);
  --shadow: 0 22px 54px rgba(0,0,0,.28);
  --couple-soft: rgba(232,111,174,.15);
  --friends-soft: rgba(86,143,255,.15);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; width: 100%; overflow-x: hidden; }
body {
  min-height: 100dvh;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 8%, rgba(231,119,184,.18), transparent 28%),
    radial-gradient(circle at 90% 28%, rgba(86,143,255,.14), transparent 30%),
    radial-gradient(circle at 50% 88%, rgba(157,105,250,.12), transparent 28%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid rgba(116,100,255,.48); outline-offset: 2px; }
button { border: 0; }
.icon { fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }

.background { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .32; }
.orb-a { width: 220px; height: 220px; left: -90px; top: 70px; background: #f08dbc; }
.orb-b { width: 260px; height: 260px; right: -120px; top: 260px; background: #6ca6ff; }
.orb-c { width: 220px; height: 220px; left: 35%; bottom: 8%; background: #a983ff; }
.grain { position: absolute; inset: 0; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }

.app-shell { width: min(100%, 760px); margin: 0 auto; padding: calc(18px + env(safe-area-inset-top)) 18px calc(var(--nav-h) + 44px + env(safe-area-inset-bottom)); }
.page { width: 100%; animation: pageIn .24s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

.topbar, .page-header { display: flex; align-items: center; gap: 12px; min-height: 62px; margin-bottom: 14px; }
.topbar.compact { min-height: 48px; }
.hello { min-width: 0; }
.hello small, .kicker { display: block; color: var(--muted); font-size: 13px; font-weight: 650; letter-spacing: .01em; }
.hello h1, .page-header h1 { margin: 3px 0 0; font-size: clamp(29px, 7vw, 38px); line-height: 1.02; letter-spacing: -.045em; }
.page-header h1 { font-size: 29px; }
.spacer { flex: 1; }
.avatar, .profile-avatar {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
  background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.38));
  border: 1px solid rgba(255,255,255,.55); box-shadow: var(--shadow);
}
html[data-theme="dark"] .avatar, html[data-theme="dark"] .profile-avatar { background: linear-gradient(145deg, #2a3150, #171b2d); border-color: var(--line); }
.top-icon { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--glass); border: 1px solid var(--line); }

.audience-switch, .segmented, .calendar-filter, .theme-segment {
  display: grid; gap: 4px; padding: 4px; border-radius: 20px; background: rgba(91,84,124,.075); border: 1px solid var(--line);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.audience-switch { grid-template-columns: 1fr 1fr; margin-bottom: 16px; }
.audience-switch button, .segmented button, .calendar-filter button, .theme-segment button {
  min-height: 44px; border-radius: 16px; background: transparent; color: var(--muted); font-weight: 750; display: flex; align-items: center; justify-content: center; gap: 7px; transition: .18s ease;
}
.audience-switch button.active, .segmented button.active, .calendar-filter button.active, .theme-segment button.active {
  color: var(--text);
  background: linear-gradient(135deg, rgba(231,119,184,.16), rgba(157,105,250,.16), rgba(86,143,255,.15));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 20px rgba(77,62,140,.07);
}
html[data-theme="dark"] .audience-switch button.active, html[data-theme="dark"] .segmented button.active, html[data-theme="dark"] .calendar-filter button.active, html[data-theme="dark"] .theme-segment button.active { box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }

.hero-card, .plans-hero, .games-hero, .room-hero, .wish-hero, .calendar-card, .truth-card, .profile-card, .about-card, .settings-list, .empty-card, .quick-card, .room-card, .event-mini, .wish-row {
  border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(26px) saturate(120%); -webkit-backdrop-filter: blur(26px) saturate(120%);
}
.hero-card, .plans-hero, .games-hero, .room-hero, .wish-hero, .calendar-card, .truth-card, .profile-card, .about-card, .settings-list, .empty-card {
  background: var(--glass); border-radius: 28px;
}
.hero-card {
  position: relative; overflow: hidden; padding: 24px; min-height: 310px; display: flex; flex-direction: column; justify-content: flex-end;
  background:
    radial-gradient(circle at 105% -5%, rgba(86,143,255,.22), transparent 38%),
    radial-gradient(circle at -10% 100%, rgba(231,119,184,.22), transparent 42%),
    linear-gradient(145deg, var(--glass-strong), var(--glass));
}
html[data-theme="dark"] .hero-card { background: radial-gradient(circle at 105% -5%, rgba(86,143,255,.12), transparent 38%), radial-gradient(circle at -10% 100%, rgba(231,119,184,.11), transparent 42%), linear-gradient(145deg, rgba(24,29,49,.96), rgba(11,14,26,.96)); }
.hero-orb { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.38); background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.92), rgba(173,151,255,.18) 35%, rgba(115,120,255,.05) 70%); box-shadow: inset -12px -15px 28px rgba(105,89,190,.12); }
.hero-orb-a { width: 180px; height: 180px; left: -100px; top: 20px; }
.hero-orb-b { width: 82px; height: 82px; right: 18px; top: 18px; }
.hero-card h1 { position: relative; z-index: 1; margin: 12px 0 9px; font-size: clamp(34px, 9vw, 50px); line-height: .98; letter-spacing: -.055em; max-width: 640px; }
.hero-card p, .plans-hero p, .games-hero p, .wish-hero p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.45; max-width: 560px; }
.eyebrow, .idea-badge { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; width: max-content; color: #8c7ce1; font-size: 11px; font-weight: 850; letter-spacing: .10em; }
html[data-theme="dark"] .eyebrow, html[data-theme="dark"] .idea-badge { color: #b0a7ff; }
.hero-actions, .action-row { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr .85fr; gap: 9px; margin-top: 20px; }

.primary, .secondary, .danger-btn, .danger-solid, .ghost-btn {
  min-height: 52px; border-radius: 18px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 780; transition: transform .16s ease, box-shadow .18s ease, opacity .18s ease;
}
.primary { color: #fff; background: linear-gradient(105deg, var(--pink), var(--violet) 50%, var(--blue)); box-shadow: 0 12px 28px rgba(111,89,228,.23), inset 0 1px 0 rgba(255,255,255,.22); }
.secondary { color: var(--text); background: rgba(255,255,255,.45); border: 1px solid var(--line); }
html[data-theme="dark"] .secondary { background: rgba(255,255,255,.055); }
.secondary.glass { background: rgba(255,255,255,.30); }
html[data-theme="dark"] .secondary.glass { background: rgba(255,255,255,.06); }
.danger-btn { color: var(--danger); background: rgba(239,95,114,.08); border: 1px solid rgba(239,95,114,.18); }
.danger-solid { color: #fff; background: linear-gradient(135deg, #ff6b7e, #e94d67); }
.ghost-btn { min-height: 42px; background: transparent; color: var(--muted); padding-inline: 10px; }
.primary:active, .secondary:active, .danger-btn:active, .danger-solid:active, .ghost-btn:active, .icon-btn:active, .month-btn:active { transform: scale(.975); }
.full { width: 100%; }
.mt { margin-top: 12px; }

.section-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin: 28px 4px 12px; }
.section-head h2 { margin: 0; font-size: 23px; letter-spacing: -.035em; }
.section-head small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 3px; }
.text-btn { padding: 6px 0; background: transparent; color: #7d79f3; font-weight: 800; font-size: 15px; }

.rooms-list, .stack-list, .wish-list, .people-list { display: grid; gap: 10px; }
.room-card, .event-mini, .quick-card, .wish-row, .empty-action {
  width: 100%; background: var(--glass); border-radius: 22px; padding: 14px; text-align: left;
}
.room-card { min-height: 84px; display: grid; grid-template-columns: 48px minmax(0,1fr) 24px; gap: 12px; align-items: center; }
.room-visual, .event-mini-icon, .quick-icon, .setting-icon, .empty-action-icon, .mini-action, .game-icon {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: 0 0 auto;
  background: linear-gradient(145deg, rgba(231,119,184,.10), rgba(86,143,255,.10));
}
.room-visual.couple, .event-mini-icon.couple { color: var(--couple); background: var(--couple-soft); }
.room-visual.friends, .event-mini-icon.friends { color: var(--friends); background: var(--friends-soft); }
.room-card-copy, .event-mini-copy, .wish-copy { min-width: 0; display: block; }
.room-card-copy b, .event-mini-copy b, .wish-copy b { display: block; font-size: 15px; line-height: 1.25; }
.room-card-copy small, .event-mini-copy small, .event-mini-copy span, .wish-copy small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.3; }
.room-card-arrow, .event-mini-arrow { opacity: .4; display: grid; place-items: center; }

.event-mini { min-height: 86px; display: grid; grid-template-columns: 44px minmax(0,1fr) 22px; gap: 12px; align-items: center; border: 1px solid var(--line); box-shadow: var(--shadow); }
.event-mini.couple { box-shadow: inset 3px 0 0 var(--couple), var(--shadow); }
.event-mini.friends { box-shadow: inset 3px 0 0 var(--friends), var(--shadow); }
.event-mini-copy small { margin: 0 0 4px; color: var(--couple); font-weight: 750; }
.event-mini.friends .event-mini-copy small { color: var(--friends); }
.home-next { min-height: 94px; }

.empty-action { min-height: 82px; border: 1px dashed rgba(125,113,170,.20); display: grid; grid-template-columns: 44px minmax(0,1fr) 20px; gap: 12px; align-items: center; color: var(--text); }
.empty-action b { display: block; font-size: 15px; }
.empty-action small { display: block; color: var(--muted); margin-top: 4px; font-size: 12px; line-height: 1.35; }
.empty-card { padding: 18px; color: var(--muted); line-height: 1.45; box-shadow: none; }

.quick-grid, .room-actions, .game-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick-card { min-height: 140px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; border: 1px solid var(--line); box-shadow: var(--shadow); }
.quick-card > .icon { width: 28px; height: 28px; color: #917cf5; }
.quick-card b { display: block; margin-top: auto; font-size: 15px; line-height: 1.2; }
.quick-card small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.35; }

.plans-hero, .games-hero, .wish-hero { padding: 22px; }
.plans-hero h2, .games-hero h2, .wish-hero h2 { margin: 10px 0 7px; font-size: 29px; letter-spacing: -.04em; }

.room-hero { position: relative; padding: 22px; overflow: hidden; }
.room-hero.couple { background: linear-gradient(145deg, rgba(232,111,174,.13), var(--glass)); }
.room-hero.friends { background: linear-gradient(145deg, rgba(86,143,255,.13), var(--glass)); }
.room-hero h2 { margin: 6px 60px 18px 0; font-size: 28px; letter-spacing: -.04em; }
.room-big-icon { position: absolute; right: 20px; top: 20px; width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center; background: rgba(255,255,255,.14); }
.member-stack { display: flex; align-items: center; }
.mini-avatar, .invite { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--glass-strong); border: 2px solid var(--bg); margin-left: -6px; }
.mini-avatar:first-child { margin-left: 0; }
.invite { background: linear-gradient(135deg, rgba(231,119,184,.28), rgba(86,143,255,.24)); }
.room-actions { margin-top: 12px; }
.room-actions .quick-card { min-height: 120px; }

.calendar-filter { grid-template-columns: .75fr 1fr 1fr; margin-bottom: 12px; }
.calendar-filter button { font-size: 13px; }
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot.couple { background: var(--couple); }
.dot.friends { background: var(--friends); }
.calendar-card { padding: 16px; }
.calendar-month-head { display: grid; grid-template-columns: 42px 1fr 42px; gap: 10px; align-items: center; margin-bottom: 16px; }
.calendar-month-head > div { text-align: center; }
.calendar-month-head b { display: block; font-size: 18px; }
.calendar-month-head small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.month-btn, .icon-btn, .close-btn { width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; color: var(--text); background: var(--glass); border: 1px solid var(--line); }
.close-btn { width: 46px; height: 46px; font-size: 30px; font-weight: 300; }
.weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.weekdays span { text-align: center; color: var(--muted); font-size: 10px; font-weight: 800; padding: 5px 0 8px; }
.calendar-day { position: relative; aspect-ratio: 1/1; border-radius: 50%; background: transparent; display: grid; place-items: center; font-weight: 650; font-size: 14px; }
.calendar-day.empty { pointer-events: none; }
.calendar-day.today:not(.selected)::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(145,105,250,.45); border-radius: 50%; }
.calendar-day.selected { color: white; background: linear-gradient(135deg, var(--pink), var(--violet) 55%, var(--blue)); box-shadow: 0 7px 18px rgba(121,95,230,.28); }
.day-dots { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; min-height: 6px; }
.calendar-day.selected .dot.couple { background: #ffd0e5; }
.calendar-day.selected .dot.friends { background: #cde0ff; }
.selected-date-head { align-items: flex-end; }

.sheet-wrap { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: flex-end; justify-content: center; background: rgba(6,8,17,.34); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding-top: max(14px, env(safe-area-inset-top)); }
.sheet { width: min(100%, 720px); max-height: calc(100dvh - max(14px, env(safe-area-inset-top))); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: color-mix(in srgb, var(--bg) 86%, transparent); border: 1px solid var(--line); border-bottom: 0; border-radius: 30px 30px 0 0; padding: 0 18px calc(24px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 60px rgba(0,0,0,.22); }
html[data-theme="dark"] .sheet { background: rgba(12,15,27,.96); }
.sheet-handle { width: 42px; height: 5px; border-radius: 999px; background: rgba(127,127,145,.25); margin: 10px auto 2px; }
.sheet-head { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 12px; min-height: 78px; margin: 0 -2px 14px; padding-top: 6px; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 95%, transparent) 0 76%, transparent); }
html[data-theme="dark"] .sheet-head { background: linear-gradient(to bottom, rgba(12,15,27,.98) 0 76%, transparent); }
.sheet-head > div { min-width: 0; flex: 1; }
.sheet-head h2 { margin: 0; font-size: 27px; letter-spacing: -.04em; }
.sheet-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.sheet-open .bottom-nav { opacity: 0; pointer-events: none; transform: translateY(20px); }
.sheet-hint { color: var(--muted); font-size: 12px; line-height: 1.45; margin: 10px 4px; }

.form-stack { display: grid; gap: 14px; }
.field { display: block; margin: 0; }
.field > span { display: block; margin: 0 0 7px 3px; color: var(--muted); font-size: 12px; font-weight: 750; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; color: var(--text); background: rgba(255,255,255,.52); border: 1px solid var(--line); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.50); }
html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea { background: rgba(255,255,255,.055); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.field input, .field select { height: 56px; padding: 0 15px; }
.field textarea { min-height: 104px; resize: vertical; padding: 14px 15px; line-height: 1.4; }
.field input[type="datetime-local"] { -webkit-appearance: none; appearance: none; }

.wizard-progress { display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: center; gap: 6px; margin: 3px 2px 22px; }
.wizard-progress i { height: 4px; border-radius: 999px; background: rgba(125,125,145,.13); }
.wizard-progress i.active { background: linear-gradient(90deg, var(--pink), var(--violet), var(--blue)); }
.wizard-progress span { margin-left: 6px; color: var(--muted); font-size: 11px; font-weight: 750; }
.context-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 31px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.context-pill.couple { color: var(--couple); background: var(--couple-soft); }
.context-pill.friends { color: var(--friends); background: var(--friends-soft); }
.wizard-step h2, .idea-result h2, .event-detail h2 { margin: 14px 0 7px; font-size: 29px; line-height: 1.08; letter-spacing: -.045em; }
.wizard-step > p, .idea-result > p { margin: 0 0 18px; color: var(--muted); line-height: 1.45; }
.wizard-options { display: grid; grid-template-columns: 1fr; gap: 10px; }
.wizard-option { width: 100%; min-height: 64px; padding: 10px 14px; border-radius: 19px; display: grid; grid-template-columns: 42px minmax(0,1fr) 22px; gap: 12px; align-items: center; text-align: left; background: var(--glass); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.20); }
.wizard-emoji { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(145deg, rgba(231,119,184,.11), rgba(86,143,255,.10)); }
.wizard-option b { font-size: 16px; }
.wizard-option > span:last-child { opacity: .35; justify-self: end; }
.idea-result { padding: 18px; border-radius: 24px; background: linear-gradient(145deg, var(--glass-strong), var(--glass)); border: 1px solid var(--line); box-shadow: var(--shadow); }
.result-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 4px; }
.result-meta span { min-height: 30px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; background: rgba(118,105,155,.08); color: var(--muted); font-size: 11px; font-weight: 700; }

.event-detail { padding-bottom: 8px; }
.detail-list { display: grid; gap: 9px; margin-top: 18px; }
.detail-list > div { min-height: 62px; padding: 10px 12px; border-radius: 18px; display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 10px; align-items: center; background: rgba(127,127,150,.065); }
.detail-list > div > .icon { width: 38px; height: 38px; padding: 9px; border-radius: 13px; background: rgba(145,115,235,.10); }
.detail-list small, .note-box small { display: block; color: var(--muted); font-size: 11px; margin-bottom: 3px; }
.detail-list b { display: block; font-size: 14px; }
.note-box { margin-top: 9px; padding: 14px; border-radius: 18px; background: rgba(127,127,150,.065); }
.note-box p { margin: 4px 0 0; line-height: 1.45; }
.event-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px; }
.event-actions-grid .danger-btn { grid-column: 1/-1; }
.confirm-box { text-align: center; padding: 6px 4px 12px; }
.confirm-icon { width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 19px; display: grid; place-items: center; font-size: 25px; font-weight: 900; }
.confirm-icon.danger { color: var(--danger); background: rgba(239,95,114,.11); }
.confirm-box h3 { margin: 0 0 8px; font-size: 22px; }
.confirm-box p { margin: 0 auto; max-width: 340px; color: var(--muted); line-height: 1.45; }

.settings-list { overflow: hidden; }
.setting-row { width: 100%; min-height: 68px; padding: 11px 13px; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 11px; align-items: center; background: transparent; text-align: left; border-bottom: 1px solid var(--line); }
.setting-row:last-child { border-bottom: 0; }
.setting-row.button { color: var(--text); }
.setting-row > span:nth-child(2) b, .setting-row > span b { display: block; font-size: 14px; }
.setting-row > span:nth-child(2) small, .setting-row > span small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.setting-row > i { opacity: .35; font-style: normal; }
.setting-row.vertical { grid-template-columns: 1fr; align-items: stretch; }
.theme-segment { grid-template-columns: repeat(3,1fr); margin-top: 8px; }
.theme-segment button { min-height: 38px; font-size: 12px; }
.switch { width: 48px; height: 29px; border-radius: 999px; padding: 3px; background: rgba(127,127,145,.18); }
.switch i { display: block; width: 23px; height: 23px; border-radius: 50%; background: white; box-shadow: 0 3px 8px rgba(0,0,0,.12); transition: transform .18s ease; }
.switch.on { background: linear-gradient(135deg, var(--pink), var(--violet)); }
.switch.on i { transform: translateX(19px); }

.person-row { min-height: 64px; padding: 9px 2px; display: grid; grid-template-columns: 42px 1fr; gap: 11px; align-items: center; border-bottom: 1px solid var(--line); }
.person-row:last-child { border-bottom: 0; }
.person-row b, .person-row small { display: block; }
.person-row small { margin-top: 3px; color: var(--muted); font-size: 11px; }

.wish-row { min-height: 72px; display: grid; grid-template-columns: 34px minmax(0,1fr) 36px 36px; gap: 9px; align-items: center; border: 1px solid var(--line); box-shadow: var(--shadow); }
.wish-check { width: 30px; height: 30px; border-radius: 10px; background: rgba(127,127,145,.09); border: 1px solid var(--line); display: grid; place-items: center; }
.wish-check.checked { color: white; background: linear-gradient(135deg, var(--pink), var(--violet)); }
.wish-row.done .wish-copy { opacity: .48; text-decoration: line-through; }
.mini-action { width: 34px; height: 34px; border-radius: 11px; background: rgba(128,110,210,.08); }
.mini-action.danger { color: var(--danger); background: rgba(239,95,114,.07); }

.game-grid { margin-top: 12px; }
.game-card { min-height: 160px; padding: 16px; border-radius: 24px; display: flex; flex-direction: column; align-items: flex-start; background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow); text-align: left; }
.game-card.large { grid-column: 1/-1; min-height: 170px; background: linear-gradient(145deg, rgba(157,105,250,.11), var(--glass)); }
.game-card b { margin-top: auto; font-size: 17px; }
.game-card small { margin-top: 6px; color: var(--muted); line-height: 1.35; }
.truth-card { min-height: 330px; padding: 24px; display: flex; flex-direction: column; justify-content: center; text-align: center; margin: 12px 0; background: linear-gradient(145deg, rgba(157,105,250,.12), var(--glass)); }
.truth-card h2 { margin: 15px auto 0; max-width: 520px; font-size: 30px; line-height: 1.16; letter-spacing: -.04em; }
.mode-label { color: #9a86f4; font-size: 11px; font-weight: 850; letter-spacing: .1em; }
.swipe-hint { color: var(--muted); text-align: center; font-size: 12px; }

.profile-card { padding: 17px; display: grid; grid-template-columns: 60px 1fr; gap: 14px; align-items: center; }
.profile-card .profile-avatar { width: 60px; height: 60px; }
.profile-card h2 { margin: 0; font-size: 20px; }
.profile-card p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.about-card { padding: 14px; display: grid; grid-template-columns: 44px 1fr auto; gap: 11px; align-items: center; }
.about-card b, .about-card small { display: block; }
.about-card small { color: var(--muted); font-size: 11px; margin-top: 4px; line-height: 1.35; }
.about-card em { color: var(--muted); font-style: normal; font-size: 12px; }

.bottom-nav {
  position: fixed; z-index: 5000; left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(calc(100% - 28px), 732px); margin: 0 auto; min-height: var(--nav-h); padding: 6px;
  display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; border-radius: 28px;
  background: color-mix(in srgb, var(--glass-strong) 85%, transparent); border: 1px solid rgba(255,255,255,.48); box-shadow: 0 18px 44px rgba(42,36,75,.16); backdrop-filter: blur(26px) saturate(135%); -webkit-backdrop-filter: blur(26px) saturate(135%); transition: opacity .18s ease, transform .18s ease;
}
html[data-theme="dark"] .bottom-nav { border-color: var(--line); background: rgba(24,28,44,.88); box-shadow: 0 18px 44px rgba(0,0,0,.34); }
.nav-btn { min-width: 0; border-radius: 22px; background: transparent; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 650; }
.nav-btn.active { color: var(--text); background: linear-gradient(135deg, rgba(231,119,184,.18), rgba(157,105,250,.17), rgba(86,143,255,.16)); box-shadow: inset 0 1px 0 rgba(255,255,255,.38); }
.nav-btn span { white-space: nowrap; }

#toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 28px + env(safe-area-inset-bottom)); z-index: 20000; max-width: calc(100% - 40px); transform: translate(-50%, 14px); opacity: 0; pointer-events: none; padding: 11px 15px; border-radius: 16px; color: white; background: rgba(24,26,38,.92); box-shadow: 0 12px 30px rgba(0,0,0,.18); font-size: 13px; font-weight: 650; transition: .18s ease; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast[data-type="error"] { background: rgba(145,38,54,.95); }

.skeleton-block, .skeleton-line { border-radius: 26px; background: linear-gradient(90deg, rgba(127,127,145,.08), rgba(127,127,145,.15), rgba(127,127,145,.08)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.skeleton-block { height: 230px; }
.skeleton-line { height: 84px; margin-top: 14px; }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (max-width: 520px) {
  .app-shell { padding-left: 16px; padding-right: 16px; }
  .hero-card { padding: 20px; min-height: 295px; }
  .hero-actions, .action-row { grid-template-columns: 1fr; }
  .quick-grid, .room-actions, .game-grid { grid-template-columns: 1fr 1fr; }
  .wizard-step h2, .idea-result h2, .event-detail h2 { font-size: 27px; }
  .truth-card { min-height: 300px; }
  .truth-card h2 { font-size: 27px; }
}

@media (max-width: 380px) {
  .app-shell { padding-left: 13px; padding-right: 13px; }
  .hero-card h1 { font-size: 34px; }
  .quick-card { min-height: 130px; }
  .bottom-nav { left: 10px; right: 10px; width: calc(100% - 20px); }
  .calendar-card { padding: 12px; }
  .calendar-day { font-size: 13px; }
  .event-actions-grid { grid-template-columns: 1fr; }
  .event-actions-grid .danger-btn { grid-column: auto; }
}


/* === V101 MOBILE POLISH START === */

/* ---------------------------------------------------------
   VIEWPORT / SAFARI SAFETY
--------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  max-width: 100%;
  overflow-x: clip;
}

body.sheet-open {
  overflow: hidden;
}

.app-shell,
.page,
.topbar,
.page-header,
.audience-switch,
.hero-card,
.hero-actions,
.room-hero,
.room-actions,
.quick-grid,
.settings-list,
.calendar-card,
.sheet,
.wizard,
.event-detail {
  min-width: 0;
  max-width: 100%;
}

.app-shell,
.page {
  overflow-x: clip;
}

.audience-switch > button,
.hero-actions > button,
.action-row > button,
.nav-btn,
.quick-card,
.event-mini {
  min-width: 0;
  max-width: 100%;
}

.hero-card h1,
.hero-card p,
.room-hero h2,
.event-mini-copy,
.primary span,
.secondary span,
.nav-btn span {
  min-width: 0;
  max-width: 100%;
}

.hero-card h1,
.room-hero h2 {
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: balance;
}

button,
.audience-switch,
.bottom-nav {
  touch-action: manipulation;
}


/* ---------------------------------------------------------
   MAIN LAYOUT
--------------------------------------------------------- */

:root {
  --nav-h: 78px;
}

.app-shell {
  width: min(100%, 720px);
  padding-top: calc(14px + env(safe-area-inset-top));
  padding-bottom:
    calc(var(--nav-h) + 34px + env(safe-area-inset-bottom));
}

.topbar,
.page-header {
  min-height: 56px;
  margin-bottom: 12px;
}

.topbar.compact {
  min-height: 46px;
}

.avatar {
  width: 46px;
  height: 46px;
}


/* ---------------------------------------------------------
   AUDIENCE SWITCH
--------------------------------------------------------- */

.audience-switch {
  margin-bottom: 14px;
  border-radius: 19px;
}

.audience-switch button {
  min-height: 48px;
  border-radius: 15px;
  font-size: 15px;
}


/* ---------------------------------------------------------
   HOME HERO
--------------------------------------------------------- */

.hero-card {
  min-height: 282px;
  padding: 22px;
  border-radius: 26px;
}

.hero-card h1 {
  margin: 11px 0 9px;
  font-size: clamp(32px, 8.4vw, 44px);
  line-height: 1.01;
  letter-spacing: -.05em;
}

.hero-card p {
  font-size: 15px;
  line-height: 1.42;
}

.hero-orb-a {
  width: 156px;
  height: 156px;
  left: -88px;
}

.hero-orb-b {
  width: 72px;
  height: 72px;
  right: 16px;
  top: 16px;
}

.hero-actions {
  margin-top: 17px;
  gap: 8px;
}


/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */

.primary,
.secondary,
.danger-btn,
.danger-solid {
  min-height: 50px;
  border-radius: 17px;
}


/* ---------------------------------------------------------
   SECTIONS
--------------------------------------------------------- */

.section-head {
  margin-top: 24px;
  margin-bottom: 10px;
}

.section-head h2 {
  font-size: 22px;
}


/* ---------------------------------------------------------
   ROOM
--------------------------------------------------------- */

.room-hero {
  padding: 20px;
  border-radius: 26px;
}

.room-hero h2 {
  margin-right: 58px;
  font-size: 26px;
  line-height: 1.06;
}

.room-actions {
  gap: 9px;
}

.room-actions .quick-card {
  min-height: 108px;
}

.quick-card {
  border-radius: 20px;
}


/* ---------------------------------------------------------
   BOTTOM NAV
--------------------------------------------------------- */

.bottom-nav {
  bottom: calc(8px + env(safe-area-inset-bottom));
  min-height: var(--nav-h);
  border-radius: 25px;
  padding: 5px;
}

.nav-btn {
  border-radius: 19px;
  gap: 3px;
  font-size: 11px;
}


/* ---------------------------------------------------------
   SHEETS
--------------------------------------------------------- */

.sheet-wrap {
  padding:
    max(10px, env(safe-area-inset-top))
    8px
    0;
}

.sheet {
  width: min(100%, 680px);

  max-height:
    calc(
      100dvh -
      max(10px, env(safe-area-inset-top))
    );

  padding:
    0
    16px
    calc(18px + env(safe-area-inset-bottom));

  border-radius: 28px 28px 0 0;
}

.sheet-head {
  min-height: 68px;
  margin-bottom: 10px;
}

.sheet-head h2 {
  font-size: 25px;
  line-height: 1.05;
}

.close-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 27px;
}


/* ---------------------------------------------------------
   PLANNER
--------------------------------------------------------- */

.wizard-progress {
  margin-bottom: 18px;
}

.wizard-step h2,
.idea-result h2,
.event-detail h2 {
  font-size: 26px;
}

.wizard-step > p,
.idea-result > p {
  margin-bottom: 15px;
}

.wizard-options {
  gap: 8px;
}

.wizard-option {
  min-height: 58px;
  border-radius: 17px;
  padding: 8px 12px;
}

.wizard-emoji {
  width: 40px;
  height: 40px;
  border-radius: 13px;
}

.idea-result {
  padding: 16px;
  border-radius: 22px;
}


/* ---------------------------------------------------------
   EVENT
--------------------------------------------------------- */

.detail-list {
  margin-top: 14px;
  gap: 7px;
}

.detail-list > div {
  min-height: 56px;
  border-radius: 16px;
}

.event-actions-grid {
  margin-top: 13px;
  gap: 8px;
}


/* ---------------------------------------------------------
   IPHONE
--------------------------------------------------------- */

@media (max-width: 520px) {

  .app-shell {
    padding-left: 14px;
    padding-right: 14px;
  }

  .hero-card {
    min-height: 270px;
    padding: 20px;
  }

  .hero-card h1 {
    font-size: clamp(31px, 9vw, 39px);
  }

  .hero-actions,
  .action-row {
    grid-template-columns: 1fr;
  }

  .sheet {
    padding-left: 14px;
    padding-right: 14px;
  }

}

@media (max-width: 380px) {

  .app-shell {
    padding-left: 12px;
    padding-right: 12px;
  }

  .hero-card h1 {
    font-size: 30px;
  }

  .audience-switch button {
    font-size: 14px;
  }

}

/* === V101 MOBILE POLISH END === */

/* === ROOM DELETE BUTTON === */

.room-manage-head {
  margin-top: 28px;
}

.room-delete-button {
  margin-top: 2px;
  margin-bottom: 18px;
  min-height: 54px;
  border-radius: 18px;
  font-weight: 700;
}


/* === CLEAN UGLY CORNER DECOR === */

/* Убираем декоративные пузыри / орбы / блобы */
.hero-orb,
.hero-orb-a,
.hero-orb-b,
.hero-orb-c,
.hero-bubble,
.hero-bubble-sm,
.hero-bubble-lg,
.decor-orb,
.decor-bubble,
.card-orb,
.sheet-orb,
.glass-orb,
.glow-orb,
.liquid-orb,
.bg-orb,
.bg-bubble,
.blob,
.blob-1,
.blob-2,
.blob-3,
[class*="orb"],
[class*="bubble"],
[class*="blob"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Убираем псевдоэлементы, которые часто рисуют эти штуки */
.hero-card::before,
.hero-card::after,
.hero-panel::before,
.hero-panel::after,
.room-card::before,
.room-card::after,
.room-hero::before,
.room-hero::after,
.quick-card::before,
.quick-card::after,
.sheet::before,
.sheet::after,
.sheet-card::before,
.sheet-card::after,
.modal-card::before,
.modal-card::after,
.glass-card::before,
.glass-card::after,
.profile-card::before,
.profile-card::after,
.settings-card::before,
.settings-card::after,
.calendar-card::before,
.calendar-card::after,
.event-card::before,
.event-card::after,
.event-detail::before,
.event-detail::after,
.liquid::before,
.liquid::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Жестко обрезаем всё по радиусу */
.hero-card,
.hero-panel,
.room-card,
.room-hero,
.quick-card,
.sheet,
.sheet-card,
.modal-card,
.glass-card,
.profile-card,
.settings-card,
.calendar-card,
.event-card,
.event-detail,
.liquid,
.empty-card,
.home-next-card,
.home-next-empty {
  overflow: hidden !important;
  background-clip: padding-box !important;
  isolation: isolate;
}

/* На всякий случай — убираем лишние декоративные фоны в светлой теме */
:root[data-theme="light"] .hero-card,
:root[data-theme="light"] .hero-panel,
:root[data-theme="light"] .room-card,
:root[data-theme="light"] .room-hero,
:root[data-theme="light"] .sheet,
:root[data-theme="light"] .sheet-card,
:root[data-theme="light"] .modal-card,
:root[data-theme="light"] .profile-card,
:root[data-theme="light"] .settings-card,
:root[data-theme="light"] .calendar-card,
:root[data-theme="light"] .event-detail {
  background-image: none !important;
}


/* === CLEAN UGLY CORNER DECOR === */

/* Убираем декоративные пузыри / орбы / блобы */
.hero-orb,
.hero-orb-a,
.hero-orb-b,
.hero-orb-c,
.hero-bubble,
.hero-bubble-sm,
.hero-bubble-lg,
.decor-orb,
.decor-bubble,
.card-orb,
.sheet-orb,
.glass-orb,
.glow-orb,
.liquid-orb,
.bg-orb,
.bg-bubble,
.blob,
.blob-1,
.blob-2,
.blob-3,
[class*="orb"],
[class*="bubble"],
[class*="blob"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Убираем псевдоэлементы, которые часто рисуют эти штуки */
.hero-card::before,
.hero-card::after,
.hero-panel::before,
.hero-panel::after,
.room-card::before,
.room-card::after,
.room-hero::before,
.room-hero::after,
.quick-card::before,
.quick-card::after,
.sheet::before,
.sheet::after,
.sheet-card::before,
.sheet-card::after,
.modal-card::before,
.modal-card::after,
.glass-card::before,
.glass-card::after,
.profile-card::before,
.profile-card::after,
.settings-card::before,
.settings-card::after,
.calendar-card::before,
.calendar-card::after,
.event-card::before,
.event-card::after,
.event-detail::before,
.event-detail::after,
.liquid::before,
.liquid::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Жестко обрезаем всё по радиусу */
.hero-card,
.hero-panel,
.room-card,
.room-hero,
.quick-card,
.sheet,
.sheet-card,
.modal-card,
.glass-card,
.profile-card,
.settings-card,
.calendar-card,
.event-card,
.event-detail,
.liquid,
.empty-card,
.home-next-card,
.home-next-empty {
  overflow: hidden !important;
  background-clip: padding-box !important;
  isolation: isolate;
}

/* На всякий случай — убираем лишние декоративные фоны в светлой теме */
:root[data-theme="light"] .hero-card,
:root[data-theme="light"] .hero-panel,
:root[data-theme="light"] .room-card,
:root[data-theme="light"] .room-hero,
:root[data-theme="light"] .sheet,
:root[data-theme="light"] .sheet-card,
:root[data-theme="light"] .modal-card,
:root[data-theme="light"] .profile-card,
:root[data-theme="light"] .settings-card,
:root[data-theme="light"] .calendar-card,
:root[data-theme="light"] .event-detail {
  background-image: none !important;
}


/* =========================================================
   V103 — PREMIUM CLEAN UI
   ========================================================= */

:root {
  --glass: rgba(255,255,255,.82);
  --glass-strong: rgba(255,255,255,.94);

  --line: rgba(61,55,92,.075);

  --shadow:
    0 10px 28px rgba(55,48,91,.065),
    0 1px 2px rgba(55,48,91,.035);

  --nav-h: 76px;
}

html[data-theme="dark"] {
  --glass: rgba(21,24,37,.88);
  --glass-strong: rgba(26,30,46,.96);
  --line: rgba(255,255,255,.07);

  --shadow:
    0 14px 34px rgba(0,0,0,.22),
    0 1px 2px rgba(0,0,0,.18);
}


/* ---------------------------------------------------------
   BACKGROUND
--------------------------------------------------------- */

body {
  background:
    linear-gradient(
      145deg,
      rgba(247,242,249,.98) 0%,
      rgba(243,244,251,.98) 48%,
      rgba(239,244,252,.98) 100%
    ) !important;
}

html[data-theme="dark"] body {
  background:
    linear-gradient(
      145deg,
      #090b13 0%,
      #0d101b 50%,
      #101421 100%
    ) !important;
}

/* старые фоновые пузыри окончательно выключаем */
.background .orb,
.background [class*="orb"],
.background [class*="bubble"],
.background [class*="blob"] {
  display: none !important;
}

.grain {
  opacity: .018 !important;
}


/* ---------------------------------------------------------
   GLASS SURFACES
--------------------------------------------------------- */

.hero-card,
.plans-hero,
.games-hero,
.room-hero,
.wish-hero,
.calendar-card,
.truth-card,
.profile-card,
.about-card,
.settings-list,
.empty-card,
.quick-card,
.room-card,
.event-mini,
.wish-row,
.idea-result {
  border-color: var(--line) !important;
  box-shadow: var(--shadow) !important;

  backdrop-filter: blur(18px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(108%) !important;
}


/* обычные карточки — чистые, почти белые */
.quick-card,
.room-card,
.event-mini,
.wish-row,
.profile-card,
.about-card,
.settings-list,
.calendar-card,
.empty-card,
.plans-hero,
.games-hero,
.wish-hero {
  background-color: rgba(255,255,255,.78) !important;
  background-image: none !important;
}

html[data-theme="dark"] .quick-card,
html[data-theme="dark"] .room-card,
html[data-theme="dark"] .event-mini,
html[data-theme="dark"] .wish-row,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .about-card,
html[data-theme="dark"] .settings-list,
html[data-theme="dark"] .calendar-card,
html[data-theme="dark"] .empty-card,
html[data-theme="dark"] .plans-hero,
html[data-theme="dark"] .games-hero,
html[data-theme="dark"] .wish-hero {
  background-color: rgba(20,23,36,.90) !important;
}


/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.hero-card {
  min-height: 270px !important;
  padding: 21px !important;
  border-radius: 26px !important;

  background-color: rgba(255,255,255,.82) !important;
  background-image:
    linear-gradient(
      145deg,
      rgba(255,244,250,.94),
      rgba(249,247,255,.94) 48%,
      rgba(240,247,255,.94)
    ) !important;
}

html[data-theme="dark"] .hero-card {
  background-color: rgba(18,21,34,.96) !important;
  background-image:
    linear-gradient(
      145deg,
      rgba(30,26,42,.96),
      rgba(22,22,38,.97) 50%,
      rgba(20,27,44,.96)
    ) !important;
}

.hero-card h1 {
  font-size: clamp(31px, 8.8vw, 42px) !important;
  line-height: 1.02 !important;
  margin-top: 10px !important;
  margin-bottom: 8px !important;
}

.hero-card p {
  font-size: 15px !important;
  line-height: 1.42 !important;
}

.eyebrow,
.idea-badge {
  font-size: 10px !important;
  letter-spacing: .12em !important;
}


/* ---------------------------------------------------------
   AUDIENCE SWITCH
--------------------------------------------------------- */

.audience-switch,
.segmented,
.calendar-filter,
.theme-segment {
  padding: 3px !important;
  gap: 3px !important;

  border-radius: 18px !important;

  background: rgba(100,95,125,.055) !important;
  border-color: rgba(80,72,110,.07) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="dark"] .audience-switch,
html[data-theme="dark"] .segmented,
html[data-theme="dark"] .calendar-filter,
html[data-theme="dark"] .theme-segment {
  background: rgba(255,255,255,.045) !important;
}

.audience-switch button,
.segmented button,
.calendar-filter button,
.theme-segment button {
  min-height: 43px !important;
  border-radius: 15px !important;
}

.audience-switch button.active,
.segmented button.active,
.calendar-filter button.active,
.theme-segment button.active {
  background:
    linear-gradient(
      135deg,
      rgba(235,150,201,.15),
      rgba(169,132,248,.14),
      rgba(112,159,255,.14)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 3px 10px rgba(63,54,100,.045) !important;
}


/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */

.primary,
.secondary,
.danger-btn,
.danger-solid,
.ghost-btn {
  border-radius: 16px !important;
}

.primary,
.secondary,
.danger-btn,
.danger-solid {
  min-height: 50px !important;
}

.primary {
  background:
    linear-gradient(
      100deg,
      #df72b4 0%,
      #9c6ff1 52%,
      #5d91f6 100%
    ) !important;

  box-shadow:
    0 8px 20px rgba(116,91,214,.17),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.secondary {
  background: rgba(255,255,255,.66) !important;
  border-color: rgba(66,61,88,.075) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .secondary {
  background: rgba(255,255,255,.055) !important;
}


/* ---------------------------------------------------------
   SECTION TITLES
--------------------------------------------------------- */

.section-head {
  margin-top: 24px !important;
  margin-bottom: 10px !important;
}

.section-head h2 {
  font-size: 22px !important;
}


/* ---------------------------------------------------------
   QUICK CARDS
--------------------------------------------------------- */

.quick-grid,
.room-actions,
.game-grid {
  gap: 9px !important;
}

.quick-card {
  min-height: 112px !important;
  border-radius: 20px !important;
  padding: 14px !important;
}

.room-actions .quick-card {
  min-height: 108px !important;
}

.quick-card b {
  font-size: 15px !important;
}

.quick-card small {
  font-size: 11.5px !important;
}


/* ---------------------------------------------------------
   ROOM HERO
--------------------------------------------------------- */

.room-hero {
  border-radius: 25px !important;
  padding: 19px !important;
}

.room-hero.couple {
  background-color: rgba(255,255,255,.80) !important;
  background-image:
    linear-gradient(
      145deg,
      rgba(251,230,242,.68),
      rgba(255,255,255,.82)
    ) !important;
}

.room-hero.friends {
  background-color: rgba(255,255,255,.80) !important;
  background-image:
    linear-gradient(
      145deg,
      rgba(228,238,255,.78),
      rgba(255,255,255,.84)
    ) !important;
}

html[data-theme="dark"] .room-hero.couple {
  background-image:
    linear-gradient(
      145deg,
      rgba(75,36,62,.36),
      rgba(20,23,36,.94)
    ) !important;
}

html[data-theme="dark"] .room-hero.friends {
  background-image:
    linear-gradient(
      145deg,
      rgba(37,52,83,.42),
      rgba(20,23,36,.94)
    ) !important;
}

.room-hero h2 {
  font-size: 25px !important;
}


/* ---------------------------------------------------------
   EVENT CARDS
--------------------------------------------------------- */

.event-mini {
  min-height: 80px !important;
  border-radius: 19px !important;
}

.event-mini.couple {
  box-shadow:
    inset 3px 0 0 rgba(232,111,174,.85),
    var(--shadow) !important;
}

.event-mini.friends {
  box-shadow:
    inset 3px 0 0 rgba(86,143,255,.85),
    var(--shadow) !important;
}


/* ---------------------------------------------------------
   SHEETS / MODALS
--------------------------------------------------------- */

.sheet-wrap {
  background: rgba(19,20,29,.28) !important;

  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.sheet {
  border-radius: 28px 28px 0 0 !important;

  background-color: rgba(249,249,252,.985) !important;
  background-image: none !important;

  border-color: rgba(60,54,85,.075) !important;

  box-shadow:
    0 -12px 40px rgba(24,20,44,.14) !important;
}

html[data-theme="dark"] .sheet {
  background-color: rgba(15,18,29,.985) !important;

  box-shadow:
    0 -15px 45px rgba(0,0,0,.34) !important;
}

.sheet-handle {
  width: 36px !important;
  height: 4px !important;
  margin-top: 9px !important;

  background: rgba(117,116,128,.24) !important;
}

.sheet-head {
  min-height: 65px !important;
  margin-bottom: 8px !important;

  background:
    linear-gradient(
      to bottom,
      rgba(249,249,252,.99) 0%,
      rgba(249,249,252,.99) 78%,
      rgba(249,249,252,0)
    ) !important;
}

html[data-theme="dark"] .sheet-head {
  background:
    linear-gradient(
      to bottom,
      rgba(15,18,29,.99) 0%,
      rgba(15,18,29,.99) 78%,
      rgba(15,18,29,0)
    ) !important;
}

.sheet-head h2 {
  font-size: 25px !important;
}

.close-btn {
  width: 43px !important;
  height: 43px !important;

  border-radius: 14px !important;

  background: rgba(255,255,255,.82) !important;

  box-shadow:
    0 3px 12px rgba(48,42,76,.055) !important;
}

html[data-theme="dark"] .close-btn {
  background: rgba(255,255,255,.055) !important;
}


/* ---------------------------------------------------------
   PLANNER
--------------------------------------------------------- */

.wizard-progress {
  margin-bottom: 17px !important;
}

.wizard-step h2,
.idea-result h2,
.event-detail h2 {
  font-size: 26px !important;
}

.wizard-step > p,
.idea-result > p {
  margin-bottom: 14px !important;
}

.wizard-options {
  gap: 8px !important;
}

.wizard-option {
  min-height: 58px !important;
  padding: 8px 12px !important;

  border-radius: 17px !important;

  background: rgba(255,255,255,.84) !important;

  border-color: rgba(64,58,92,.065) !important;

  box-shadow:
    0 3px 12px rgba(45,39,73,.035) !important;
}

html[data-theme="dark"] .wizard-option {
  background: rgba(255,255,255,.048) !important;
}

.wizard-emoji {
  width: 39px !important;
  height: 39px !important;

  border-radius: 12px !important;
}

.idea-result {
  border-radius: 21px !important;

  background-color: rgba(255,255,255,.84) !important;
  background-image: none !important;

  box-shadow:
    0 7px 22px rgba(48,41,81,.055) !important;
}

html[data-theme="dark"] .idea-result {
  background-color: rgba(255,255,255,.045) !important;
}


/* ---------------------------------------------------------
   EVENT DETAILS
--------------------------------------------------------- */

.detail-list {
  margin-top: 13px !important;
  gap: 7px !important;
}

.detail-list > div,
.note-box {
  background: rgba(90,86,112,.045) !important;
}

html[data-theme="dark"] .detail-list > div,
html[data-theme="dark"] .note-box {
  background: rgba(255,255,255,.045) !important;
}

.detail-list > div {
  min-height: 56px !important;
  border-radius: 16px !important;
}

.note-box {
  border-radius: 16px !important;
}


/* ---------------------------------------------------------
   INPUTS
--------------------------------------------------------- */

.field input,
.field select,
.field textarea {
  background: rgba(255,255,255,.86) !important;

  border-color: rgba(62,56,88,.075) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.50) !important;
}

html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea {
  background: rgba(255,255,255,.045) !important;
}


/* ---------------------------------------------------------
   PROFILE
--------------------------------------------------------- */

.profile-card {
  padding: 15px !important;
  border-radius: 23px !important;
}

.settings-list {
  border-radius: 23px !important;
}

.setting-row {
  min-height: 64px !important;
}

.about-card {
  border-radius: 22px !important;
}


/* ---------------------------------------------------------
   BOTTOM NAV
--------------------------------------------------------- */

.bottom-nav {
  bottom: calc(8px + env(safe-area-inset-bottom)) !important;

  min-height: var(--nav-h) !important;

  padding: 5px !important;

  border-radius: 24px !important;

  background: rgba(252,251,254,.91) !important;

  border-color: rgba(80,71,107,.075) !important;

  box-shadow:
    0 10px 30px rgba(46,39,75,.11) !important;

  backdrop-filter: blur(20px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(115%) !important;
}

html[data-theme="dark"] .bottom-nav {
  background: rgba(24,27,41,.93) !important;

  box-shadow:
    0 12px 34px rgba(0,0,0,.30) !important;
}

.nav-btn {
  border-radius: 18px !important;
  gap: 3px !important;
}

.nav-btn.active {
  background:
    linear-gradient(
      135deg,
      rgba(233,146,199,.15),
      rgba(165,128,246,.14),
      rgba(104,153,251,.14)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34) !important;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 520px) {

  .app-shell {
    padding-left: 14px !important;
    padding-right: 14px !important;

    padding-bottom:
      calc(
        var(--nav-h) +
        28px +
        env(safe-area-inset-bottom)
      ) !important;
  }

  .topbar,
  .page-header {
    margin-bottom: 10px !important;
  }

  .hero-card {
    min-height: 260px !important;
  }

  .hero-actions {
    gap: 8px !important;
  }

  .sheet {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .event-actions-grid {
    gap: 8px !important;
  }
}

/* === V103 END === */


/* =========================================================
   V104 — IOS SHEET SCROLL LOCK
   ========================================================= */

html {
  background: #f5f3f9 !important;
}

html[data-theme="dark"] {
  background: #090c15 !important;
}

html.sheet-open-html {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.sheet-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/*
   Внешняя область шторки вообще не должна скроллиться.
*/
.sheet-wrap {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none;
}

/*
   Скролл разрешаем ТОЛЬКО самой шторке.
*/
.sheet {
  overflow-x: hidden !important;
  overflow-y: auto !important;

  overscroll-behavior-y: contain !important;

  touch-action: pan-y;

  -webkit-overflow-scrolling: touch;
}

/*
   Убираем эффект протягивания содержимого за края.
*/
.sheet::before,
.sheet::after {
  pointer-events: none;
}

#sheetRoot {
  position: relative;
  z-index: 10000;
}

/*
   Никаких движений нижней навигации под модалкой.
*/
.sheet-open .bottom-nav {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
}

/*
   Цвет области у нижнего края iPhone совпадает с приложением.
*/
body {
  background-color: #f5f3f9 !important;
}

html[data-theme="dark"] body {
  background-color: #090c15 !important;
}

/* === V104 END === */


/* === ROOM BOTTOM SAFE SPACE === */

.page {
  padding-bottom: calc(
    118px +
    env(safe-area-inset-bottom)
  ) !important;
}

.room-delete-button {
  margin-bottom: 18px !important;
}

.room-manage-head {
  margin-top: 30px !important;
}


/* =========================================================
   V105 — NO GRAY / CLEAN DARK THEME
   ========================================================= */

html[data-theme="dark"] body {
  background:
    linear-gradient(
      155deg,
      #070912 0%,
      #0a0d18 50%,
      #0c1020 100%
    ) !important;
}


/* Основные карточки — больше никакого серого */
html[data-theme="dark"] .quick-card,
html[data-theme="dark"] .room-card,
html[data-theme="dark"] .event-mini,
html[data-theme="dark"] .wish-row,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .about-card,
html[data-theme="dark"] .settings-list,
html[data-theme="dark"] .calendar-card,
html[data-theme="dark"] .empty-card,
html[data-theme="dark"] .plans-hero,
html[data-theme="dark"] .games-hero,
html[data-theme="dark"] .wish-hero,
html[data-theme="dark"] .idea-result {
  background:
    linear-gradient(
      145deg,
      rgba(18,21,34,.96),
      rgba(13,16,28,.97)
    ) !important;

  border-color:
    rgba(145,120,255,.10) !important;
}


/* Пространство друзей — лёгкий синий оттенок */
html[data-theme="dark"] .room-hero.friends {
  background:
    linear-gradient(
      145deg,
      rgba(33,43,74,.96),
      rgba(14,18,32,.98) 70%
    ) !important;

  border-color:
    rgba(105,145,255,.18) !important;
}


/* Пространство пары — лёгкий розово-фиолетовый */
html[data-theme="dark"] .room-hero.couple {
  background:
    linear-gradient(
      145deg,
      rgba(62,31,55,.94),
      rgba(16,17,30,.98) 70%
    ) !important;

  border-color:
    rgba(230,110,180,.16) !important;
}


/* Пустые состояния */
html[data-theme="dark"] .empty-card,
html[data-theme="dark"] .home-next-empty {
  background:
    rgba(14,17,29,.94) !important;

  border-color:
    rgba(139,116,239,.11) !important;
}


/* Поля и строки деталей */
html[data-theme="dark"] .detail-list > div,
html[data-theme="dark"] .note-box,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea {
  background:
    rgba(17,20,34,.96) !important;

  border-color:
    rgba(145,120,255,.09) !important;
}


/* Кнопки выбора в генераторе */
html[data-theme="dark"] .wizard-option {
  background:
    linear-gradient(
      145deg,
      rgba(22,25,41,.98),
      rgba(15,18,31,.98)
    ) !important;

  border-color:
    rgba(145,120,255,.10) !important;
}


/* Модальные окна */
html[data-theme="dark"] .sheet {
  background:
    #0d101c !important;

  border-color:
    rgba(145,120,255,.10) !important;
}

html[data-theme="dark"] .sheet-head {
  background:
    linear-gradient(
      to bottom,
      rgba(13,16,28,1) 0%,
      rgba(13,16,28,1) 78%,
      rgba(13,16,28,0)
    ) !important;
}


/* Нижнее меню */
html[data-theme="dark"] .bottom-nav {
  background:
    rgba(13,16,29,.96) !important;

  border-color:
    rgba(145,120,255,.11) !important;
}


/* Переключатели */
html[data-theme="dark"] .audience-switch,
html[data-theme="dark"] .segmented,
html[data-theme="dark"] .calendar-filter,
html[data-theme="dark"] .theme-segment {
  background:
    rgba(16,19,32,.95) !important;

  border-color:
    rgba(145,120,255,.09) !important;
}


/* Выбранный пункт */
html[data-theme="dark"] .audience-switch button.active,
html[data-theme="dark"] .segmented button.active,
html[data-theme="dark"] .calendar-filter button.active,
html[data-theme="dark"] .theme-segment button.active,
html[data-theme="dark"] .nav-btn.active {
  background:
    linear-gradient(
      135deg,
      rgba(218,92,177,.18),
      rgba(145,91,241,.18),
      rgba(78,127,244,.18)
    ) !important;
}

/* === V105 END === */


/* =========================================================
   V105 — NO GRAY / CLEAN DARK THEME
   ========================================================= */

html[data-theme="dark"] body {
  background:
    linear-gradient(
      155deg,
      #070912 0%,
      #0a0d18 50%,
      #0c1020 100%
    ) !important;
}


/* Основные карточки — больше никакого серого */
html[data-theme="dark"] .quick-card,
html[data-theme="dark"] .room-card,
html[data-theme="dark"] .event-mini,
html[data-theme="dark"] .wish-row,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .about-card,
html[data-theme="dark"] .settings-list,
html[data-theme="dark"] .calendar-card,
html[data-theme="dark"] .empty-card,
html[data-theme="dark"] .plans-hero,
html[data-theme="dark"] .games-hero,
html[data-theme="dark"] .wish-hero,
html[data-theme="dark"] .idea-result {
  background:
    linear-gradient(
      145deg,
      rgba(18,21,34,.96),
      rgba(13,16,28,.97)
    ) !important;

  border-color:
    rgba(145,120,255,.10) !important;
}


/* Пространство друзей — лёгкий синий оттенок */
html[data-theme="dark"] .room-hero.friends {
  background:
    linear-gradient(
      145deg,
      rgba(33,43,74,.96),
      rgba(14,18,32,.98) 70%
    ) !important;

  border-color:
    rgba(105,145,255,.18) !important;
}


/* Пространство пары — лёгкий розово-фиолетовый */
html[data-theme="dark"] .room-hero.couple {
  background:
    linear-gradient(
      145deg,
      rgba(62,31,55,.94),
      rgba(16,17,30,.98) 70%
    ) !important;

  border-color:
    rgba(230,110,180,.16) !important;
}


/* Пустые состояния */
html[data-theme="dark"] .empty-card,
html[data-theme="dark"] .home-next-empty {
  background:
    rgba(14,17,29,.94) !important;

  border-color:
    rgba(139,116,239,.11) !important;
}


/* Поля и строки деталей */
html[data-theme="dark"] .detail-list > div,
html[data-theme="dark"] .note-box,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea {
  background:
    rgba(17,20,34,.96) !important;

  border-color:
    rgba(145,120,255,.09) !important;
}


/* Кнопки выбора в генераторе */
html[data-theme="dark"] .wizard-option {
  background:
    linear-gradient(
      145deg,
      rgba(22,25,41,.98),
      rgba(15,18,31,.98)
    ) !important;

  border-color:
    rgba(145,120,255,.10) !important;
}


/* Модальные окна */
html[data-theme="dark"] .sheet {
  background:
    #0d101c !important;

  border-color:
    rgba(145,120,255,.10) !important;
}

html[data-theme="dark"] .sheet-head {
  background:
    linear-gradient(
      to bottom,
      rgba(13,16,28,1) 0%,
      rgba(13,16,28,1) 78%,
      rgba(13,16,28,0)
    ) !important;
}


/* Нижнее меню */
html[data-theme="dark"] .bottom-nav {
  background:
    rgba(13,16,29,.96) !important;

  border-color:
    rgba(145,120,255,.11) !important;
}


/* Переключатели */
html[data-theme="dark"] .audience-switch,
html[data-theme="dark"] .segmented,
html[data-theme="dark"] .calendar-filter,
html[data-theme="dark"] .theme-segment {
  background:
    rgba(16,19,32,.95) !important;

  border-color:
    rgba(145,120,255,.09) !important;
}


/* Выбранный пункт */
html[data-theme="dark"] .audience-switch button.active,
html[data-theme="dark"] .segmented button.active,
html[data-theme="dark"] .calendar-filter button.active,
html[data-theme="dark"] .theme-segment button.active,
html[data-theme="dark"] .nav-btn.active {
  background:
    linear-gradient(
      135deg,
      rgba(218,92,177,.18),
      rgba(145,91,241,.18),
      rgba(78,127,244,.18)
    ) !important;
}

/* === V105 END === */


/* =========================================================
   V106 — CALENDAR AS MAIN TAB
   ========================================================= */

.calendar-today {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 4px;
  padding: 4px 10px;

  border: 0;
  border-radius: 999px;

  color: #8d70ec;

  background:
    rgba(141,112,236,.10);

  font: inherit;
  font-size: 11px;
  font-weight: 700;

  cursor: pointer;
}

html[data-theme="dark"] .calendar-today {
  color: #a994ff;

  background:
    rgba(150,120,255,.12);
}

.calendar-today:active {
  transform: scale(.96);
}

/* Календарь теперь основной экран вкладки */
.calendar-card {
  margin-top: 0 !important;
}

/* === V106 END === */


/* =========================================================
   V107 — PEOPLE FIRST HOME
   ========================================================= */

.home-intro {
  padding:
    12px
    4px
    10px;
}

.home-intro h1 {
  margin:
    8px
    0
    8px;

  font-size:
    clamp(
      34px,
      9.5vw,
      46px
    );

  line-height: .98;

  letter-spacing:
    -.055em;
}

.home-intro p {
  max-width: 520px;

  margin: 0;

  color: var(--muted);

  font-size: 15px;
  line-height: 1.45;
}


.home-section-head {
  align-items: center;
}

.home-section-note {
  color: var(--muted);

  font-size: 11px;
  font-weight: 600;
}


.home-space-card,
.home-add-card {
  position: relative;

  display: grid;

  grid-template-columns:
    58px
    minmax(0,1fr)
    34px;

  align-items: center;

  width: 100%;

  min-height: 104px;

  padding: 15px;

  border:
    1px solid
    rgba(76,68,105,.075);

  border-radius: 23px;

  text-align: left;

  box-shadow:
    0 8px 24px
    rgba(52,44,84,.055);

  overflow: hidden;
}


.home-space-card.couple,
.home-add-card.couple {
  background:
    linear-gradient(
      135deg,
      rgba(255,239,248,.95),
      rgba(250,246,255,.96) 55%,
      rgba(241,246,255,.96)
    );
}


.home-space-card.friends {
  background:
    linear-gradient(
      135deg,
      rgba(240,246,255,.96),
      rgba(248,248,255,.96)
    );
}


.home-space-icon,
.home-add-icon {
  display: grid;

  place-items: center;

  width: 48px;
  height: 48px;

  border-radius: 16px;
}


.home-space-icon.couple,
.home-add-icon.couple {
  color: #df69a9;

  background:
    rgba(226,105,171,.105);
}


.home-space-icon.friends {
  color: #6492f4;

  background:
    rgba(90,139,244,.105);
}


.home-space-copy {
  display: flex;

  flex-direction: column;

  min-width: 0;
}


.home-space-copy > small {
  margin-bottom: 3px;

  color: #9279dc;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: .12em;
}


.home-space-copy > b {
  overflow: hidden;

  color: var(--text);

  font-size: 18px;
  font-weight: 750;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.home-space-copy > span {
  margin-top: 3px;

  color: var(--muted);

  font-size: 12px;
  line-height: 1.35;
}


.home-space-arrow,
.home-space-plus {
  display: grid;

  place-items: center;

  color: var(--muted);
}


.home-friends-list {
  display: grid;

  gap: 9px;
}


.home-add-friends {
  display: flex;

  align-items: center;

  width: 100%;

  min-height: 72px;

  padding: 12px 14px;

  gap: 12px;

  border:
    1px dashed
    rgba(112,94,189,.20);

  border-radius: 20px;

  text-align: left;

  background:
    rgba(255,255,255,.38);
}


.home-add-friends > span {
  display: grid;

  place-items: center;

  flex:
    0 0 40px;

  width: 40px;
  height: 40px;

  border-radius: 13px;

  color: #8770df;

  background:
    rgba(134,109,225,.09);
}


.home-add-friends div {
  display: flex;

  flex-direction: column;

  min-width: 0;
}


.home-add-friends b {
  color: var(--text);

  font-size: 14px;
}


.home-add-friends small {
  margin-top: 2px;

  color: var(--muted);

  font-size: 11px;
  line-height: 1.3;
}


.create-space-intro {
  display: flex;

  align-items: center;

  gap: 13px;

  margin-bottom: 18px;

  padding: 14px;

  border-radius: 20px;

  background:
    rgba(135,109,225,.065);
}


.create-space-icon {
  display: grid;

  place-items: center;

  flex:
    0 0 48px;

  width: 48px;
  height: 48px;

  border-radius: 16px;

  color: #8b71e8;

  background:
    rgba(137,112,232,.10);
}


.create-space-intro b {
  display: block;

  margin-bottom: 3px;

  color: var(--text);

  font-size: 14px;
}


.create-space-intro p {
  margin: 0;

  color: var(--muted);

  font-size: 11px;
  line-height: 1.35;
}


/* DARK */

html[data-theme="dark"]
.home-space-card.couple,

html[data-theme="dark"]
.home-add-card.couple {
  background:
    linear-gradient(
      135deg,
      rgba(52,27,48,.88),
      rgba(22,20,37,.97) 58%,
      rgba(17,22,38,.97)
    );

  border-color:
    rgba(225,106,173,.13);
}


html[data-theme="dark"]
.home-space-card.friends {
  background:
    linear-gradient(
      135deg,
      rgba(27,38,68,.90),
      rgba(15,19,33,.98)
    );

  border-color:
    rgba(94,141,245,.13);
}


html[data-theme="dark"]
.home-add-friends {
  background:
    rgba(15,18,31,.82);

  border-color:
    rgba(145,119,243,.18);
}


html[data-theme="dark"]
.create-space-intro {
  background:
    rgba(137,111,235,.08);
}


/* MOBILE */

@media (max-width: 520px) {

  .home-intro h1 {
    font-size: 38px;
  }

  .home-space-card,
  .home-add-card {
    grid-template-columns:
      52px
      minmax(0,1fr)
      28px;

    min-height: 96px;

    padding: 13px;
  }

  .home-space-icon,
  .home-add-icon {
    width: 44px;
    height: 44px;

    border-radius: 14px;
  }

}

/* === V107 END === */

/* =========================================================
   V108 — COMPACT PEOPLE HOME
   ========================================================= */

/* ---------------------------------------------------------
   TOP
--------------------------------------------------------- */

.home-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 52px;

  margin-bottom: 7px;
}

.home-greeting small {
  color: var(--muted);

  font-size: 13px;
  font-weight: 650;
}

.home-avatar {
  width: 45px !important;
  height: 45px !important;
}


/* ---------------------------------------------------------
   TITLE
--------------------------------------------------------- */

.home-title-block {
  padding:
    3px
    3px
    1px;
}

.home-title-block .eyebrow {
  margin-bottom: 7px;
}

.home-title-block h1 {
  margin: 0;

  font-size:
    clamp(
      33px,
      9vw,
      43px
    );

  line-height: .99;

  letter-spacing: -.055em;
}

.home-title-block p {
  max-width: 510px;

  margin:
    8px
    0
    2px;

  color: var(--muted);

  font-size: 14px;
  line-height: 1.4;
}


/* ---------------------------------------------------------
   SECTION
--------------------------------------------------------- */

.home-main-head {
  margin-top: 21px !important;
}

.home-next-head {
  margin-top: 21px !important;
}

.home-friends-head {
  margin-top: 23px !important;
}

.home-one-only {
  color: var(--muted);

  font-size: 10px;
  font-weight: 650;
}


/* ---------------------------------------------------------
   MAIN COUPLE CARD
--------------------------------------------------------- */

.home-primary-space {
  display: grid;

  grid-template-columns:
    50px
    minmax(0, 1fr)
    auto;

  align-items: center;

  width: 100%;

  min-height: 90px;

  padding:
    13px
    14px;

  gap: 12px;

  border:
    1px solid
    rgba(80,69,112,.075);

  border-radius: 23px;

  text-align: left;

  overflow: hidden;

  box-shadow:
    0 8px 24px
    rgba(54,44,85,.055);
}


.home-primary-space.couple {
  background:
    linear-gradient(
      125deg,
      rgba(255,231,245,.92),
      rgba(250,244,255,.96) 54%,
      rgba(239,246,255,.95)
    );
}


.home-primary-space.couple.empty {
  background:
    linear-gradient(
      125deg,
      rgba(255,242,249,.90),
      rgba(246,246,255,.92)
    );
}


.home-primary-icon {
  display: grid;

  place-items: center;

  width: 48px;
  height: 48px;

  color: #dc68aa;

  background:
    rgba(225,101,169,.105);

  border-radius: 16px;
}


.home-primary-copy {
  display: flex;

  flex-direction: column;

  min-width: 0;
}


.home-primary-copy > b {
  overflow: hidden;

  color: var(--text);

  font-size: 19px;
  font-weight: 760;

  line-height: 1.15;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.home-primary-copy > span {
  margin-top: 5px;

  color: var(--muted);

  font-size: 11.5px;
  line-height: 1.3;
}


.home-invite-partner {
  display: inline-flex !important;

  align-items: center;

  width: fit-content;

  color: #d76aab !important;

  font-weight: 700;
}


.home-primary-right,
.home-friend-right {
  display: flex;

  align-items: center;

  gap: 8px;
}


.home-circle-plus {
  display: grid;

  place-items: center;

  width: 37px;
  height: 37px;

  color: #906fe8;

  border-radius: 999px;

  background:
    rgba(142,111,232,.10);
}


/* ---------------------------------------------------------
   MEMBER AVATARS
--------------------------------------------------------- */

.home-member-stack {
  display: flex;

  flex-direction: row-reverse;

  justify-content: flex-end;
}


.home-mini-avatar {
  display: grid;

  place-items: center;

  width: 29px;
  height: 29px;

  margin-left: -7px;

  color: var(--text);

  border:
    2px solid
    rgba(255,255,255,.85);

  border-radius: 999px;

  background:
    linear-gradient(
      145deg,
      rgba(255,240,248,.98),
      rgba(233,239,255,.98)
    );

  font-size: 9px;
  font-weight: 800;

  box-shadow:
    0 2px 8px
    rgba(44,38,70,.07);
}


.home-mini-avatar:first-child {
  margin-left: 0;
}


.home-mini-avatar.more {
  color: #7f6bc7;

  font-size: 8px;
}


/* ---------------------------------------------------------
   NEAREST
--------------------------------------------------------- */

.home-next-empty-v2 {
  display: grid;

  grid-template-columns:
    43px
    minmax(0,1fr)
    18px;

  align-items: center;

  width: 100%;

  min-height: 70px;

  padding:
    11px
    13px;

  gap: 11px;

  border:
    1px dashed
    rgba(103,89,154,.15);

  border-radius: 20px;

  color: var(--text);

  text-align: left;

  background:
    rgba(255,255,255,.48);
}


.home-next-empty-icon {
  display: grid;

  place-items: center;

  width: 42px;
  height: 42px;

  color: #866cdf;

  border-radius: 13px;

  background:
    rgba(134,108,223,.09);
}


.home-next-empty-v2 > span:nth-child(2) {
  display: flex;

  flex-direction: column;
}


.home-next-empty-v2 b {
  font-size: 13px;
}


.home-next-empty-v2 small {
  margin-top: 3px;

  color: var(--muted);

  font-size: 10.5px;
}


/* ---------------------------------------------------------
   FRIENDS
--------------------------------------------------------- */

.home-create-friends {
  display: inline-flex;

  align-items: center;

  gap: 4px;

  padding:
    6px
    9px;

  color: #876ee5;

  border: 0;

  border-radius: 999px;

  background:
    rgba(135,109,229,.08);

  font-size: 11px;
  font-weight: 750;
}


.home-friends-v2 {
  display: grid;

  gap: 8px;
}


.home-friend-row {
  display: grid;

  grid-template-columns:
    43px
    minmax(0,1fr)
    auto;

  align-items: center;

  width: 100%;

  min-height: 72px;

  padding:
    10px
    12px;

  gap: 10px;

  border:
    1px solid
    rgba(75,69,103,.07);

  border-radius: 20px;

  text-align: left;

  background:
    rgba(255,255,255,.69);

  box-shadow:
    0 5px 16px
    rgba(51,43,78,.035);
}


.home-friend-icon {
  display: grid;

  place-items: center;

  width: 41px;
  height: 41px;

  color: #6290f3;

  border-radius: 13px;

  background:
    rgba(93,140,244,.095);
}


.home-friend-copy {
  display: flex;

  flex-direction: column;

  min-width: 0;
}


.home-friend-copy b {
  overflow: hidden;

  color: var(--text);

  font-size: 15px;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.home-friend-copy small {
  margin-top: 2px;

  color: var(--muted);

  font-size: 10.5px;
}


.home-new-company {
  display: flex;

  align-items: center;

  min-height: 50px;

  padding:
    8px
    11px;

  gap: 9px;

  color: var(--muted);

  border:
    1px dashed
    rgba(120,101,194,.16);

  border-radius: 17px;

  background:
    transparent;

  font-size: 11.5px;
  font-weight: 700;

  text-align: left;
}


.home-new-company > span {
  display: grid;

  place-items: center;

  width: 31px;
  height: 31px;

  color: #866de2;

  border-radius: 10px;

  background:
    rgba(134,108,225,.08);
}


.home-new-company.strong {
  color: var(--text);

  background:
    rgba(255,255,255,.46);
}


.home-no-friends {
  display: flex;

  align-items: center;

  min-height: 67px;

  padding:
    11px
    12px;

  gap: 10px;

  border-radius: 19px;

  background:
    rgba(255,255,255,.48);
}


.home-no-friends div {
  display: flex;

  flex-direction: column;
}


.home-no-friends b {
  color: var(--text);

  font-size: 13px;
}


.home-no-friends small {
  margin-top: 2px;

  color: var(--muted);

  font-size: 10px;
}


/* ---------------------------------------------------------
   DARK
--------------------------------------------------------- */

html[data-theme="dark"]
.home-primary-space.couple {
  background:
    linear-gradient(
      125deg,
      rgba(61,28,53,.91),
      rgba(26,21,41,.97) 55%,
      rgba(17,23,41,.97)
    );

  border-color:
    rgba(223,104,171,.13);
}


html[data-theme="dark"]
.home-primary-space.couple.empty {
  background:
    linear-gradient(
      125deg,
      rgba(45,25,43,.91),
      rgba(18,20,34,.98)
    );
}


html[data-theme="dark"]
.home-mini-avatar {
  border-color:
    rgba(14,17,29,.94);

  background:
    linear-gradient(
      145deg,
      #292339,
      #1b2740
    );
}


html[data-theme="dark"]
.home-next-empty-v2,

html[data-theme="dark"]
.home-friend-row,

html[data-theme="dark"]
.home-no-friends,

html[data-theme="dark"]
.home-new-company.strong {
  background:
    rgba(14,17,29,.94);

  border-color:
    rgba(139,116,239,.10);
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 520px) {

  .home-title-block h1 {
    font-size: 36px;
  }

  .home-title-block p {
    font-size: 13px;
  }

  .home-primary-space {
    min-height: 84px;
  }

  .home-member-stack {
    display: none;
  }

  .home-friend-row {
    min-height: 67px;
  }

}


/* === V108 END === */

/* === SPACE V2 === */

html, body, .page, .sheet {
  scrollbar-width: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.page::-webkit-scrollbar,
.sheet::-webkit-scrollbar {
  display: none !important;
}

.home-new-company {
  display: none !important;
}

.space-top,
.space-plan {
  padding: 17px;
  border: 1px solid rgba(130,105,220,.10);
  border-radius: 24px;
}

.space-top.couple {
  background: linear-gradient(135deg,#3a1c34,#171525 65%,#101629);
}

.space-top.friends {
  background: linear-gradient(135deg,#1c2948,#101522 70%);
}

.space-top-row {
  display: flex;
  align-items: center;
  gap: 13px;
}

.space-main-icon {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  color: #9b7cff;
  background: rgba(145,115,245,.12);
}

.space-top h2 {
  margin: 4px 0;
  font-size: 20px;
  line-height: 1.1;
}

.space-top p,
.space-plan p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.space-members {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

.space-invite {
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  color: #a68cff;
  background: rgba(145,115,245,.11);
  font-weight: 700;
}

.space-plan {
  margin-top: 12px;
  background: #101321;
}

.space-plan h2 {
  margin: 8px 0 5px;
  font-size: 25px;
  line-height: 1.05;
}

.space-plan .primary {
  margin-top: 16px;
}

.space-surprise {
  margin-top: 8px;
}

.room-rename {
  margin-bottom: 8px;
}

.room-delete-button {
  margin-bottom: 22px !important;
}

/* === SPACE V2 END === */


/* === SPACE POLISH V3 === */

/* нижнее меню больше ничего не перекрывает */
.page {
  padding-bottom:
    calc(155px + env(safe-area-inset-bottom))
    !important;
}

/* пространство чуть компактнее */
.space-top {
  padding: 15px !important;
}

.space-top h2 {
  font-size: 19px !important;
}

.space-members {
  margin-top: 12px !important;
}

/* блок идеи компактнее */
.space-plan {
  padding: 16px !important;
}

.space-plan h2 {
  font-size: 23px !important;
}

.space-plan .primary {
  margin-top: 14px !important;
}

/* четыре раздела немного компактнее */
.room-actions {
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.room-actions .quick-card {
  min-height: 96px !important;
  padding: 13px !important;
}

/* нижняя навигация поверх контента, но контент до неё не доходит */
.bottom-nav {
  z-index: 5000 !important;
}

@media (max-width: 520px) {
  .page {
    padding-bottom:
      calc(165px + env(safe-area-inset-bottom))
      !important;
  }
}

/* === SPACE POLISH V3 END === */

/* === INVITE SHARE === */

.invite-share-card {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 22px 17px;

  border: 1px solid rgba(135,110,225,.10);
  border-radius: 23px;

  text-align: center;

  background: rgba(255,255,255,.72);
}

.invite-share-icon {
  display: grid;
  place-items: center;

  width: 58px;
  height: 58px;

  margin-bottom: 12px;

  border-radius: 19px;

  color: #8d72eb;
  background: rgba(140,113,234,.11);
}

.invite-share-card.couple .invite-share-icon {
  color: #df69aa;
  background: rgba(224,103,170,.11);
}

.invite-share-card h2 {
  margin: 0;

  font-size: 23px;
  letter-spacing: -.03em;
}

.invite-share-card p {
  max-width: 390px;

  margin: 8px 0 15px;

  color: var(--muted);

  font-size: 12px;
  line-height: 1.45;
}

.invite-link-box {
  width: 100%;

  padding: 12px;

  overflow: hidden;

  border-radius: 14px;

  color: var(--muted);
  background: rgba(105,95,140,.06);

  font-size: 10px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-share-actions {
  display: grid;
  gap: 8px;

  margin-top: 11px;
}

html[data-theme="dark"] .invite-share-card {
  background: #101321;
}

html[data-theme="dark"] .invite-link-box {
  background: rgba(255,255,255,.045);
}

/* === INVITE SHARE END === */

/* =========================================================

/* =========================================================
   V111 — EVENT SHEET FIX
   ========================================================= */

.sheet,
.sheet * {
  box-sizing: border-box;
}

.event-detail {
  width: 100%;
  min-width: 0;
}

.event-detail h2 {
  margin-bottom: 14px !important;
}

.detail-list {
  width: 100%;
}

.detail-list > div {
  width: 100%;
  min-width: 0;

  padding: 12px 14px !important;

  background:
    linear-gradient(
      135deg,
      rgba(25,28,46,.96),
      rgba(17,20,35,.97)
    ) !important;

  border: 1px solid rgba(132,110,220,.08);
}

.event-detail .action-row,
.event-detail .event-actions-grid {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;

  width: 100% !important;
  gap: 8px !important;

  margin-top: 13px !important;
}

.event-detail .action-row > *,
.event-detail .event-actions-grid > * {
  width: 100% !important;
  min-width: 0 !important;

  padding-left: 10px !important;
  padding-right: 10px !important;

  overflow: hidden;

  white-space: nowrap;
}

.event-detail .danger-btn,
.event-detail .danger-solid {
  width: 100% !important;

  margin-top: 9px !important;
}

.sheet {
  overflow-x: hidden !important;
}

@media (max-width: 380px) {

  .event-detail .action-row,
  .event-detail .event-actions-grid {
    grid-template-columns: 1fr !important;
  }

}

/* === V111 END === */

/* =========================================================

/* =========================================================
   ========================================================= */

/* NAMI_STORY_NO_ICON_V3 */
#app .couple-story-card {
  grid-template-columns: minmax(0, 1fr) 24px !important;
  column-gap: 10px !important;
}

#app .couple-story-card .couple-story-content {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
}

#app .couple-story-card .couple-story-chevron {
  grid-column: 2 !important;
  align-self: center !important;
}



/* ===== SOURCE: premium-ui.css ===== */

/* СВОИ — PREMIUM GLASS */

*,
*::before,
*::after {
  box-sizing: border-box;
}


/* DARK */

html[data-svoi-theme="dark"] {
  color-scheme: dark;

  --bg: #080a10;
  --bg2: #0d111b;

  --text: #f7f8fb;
  --muted: #9299ab;

  --glass: rgba(17,21,32,.70);
  --glass2: rgba(25,30,45,.82);

  --border: rgba(164,176,218,.14);
  --border2: rgba(173,184,225,.23);

  --accent: #8179dc;
  --blue: #628bd8;

  --shadow:
    0 20px 50px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.05);
}


/* LIGHT */

html[data-svoi-theme="light"] {
  color-scheme: light;

  --bg: #faf7fc;
  --bg2: #eef5fb;

  --text: #151823;
  --muted: #7a8091;

  --glass: rgba(255,255,255,.64);
  --glass2: rgba(255,255,255,.82);

  --border: rgba(255,255,255,.88);
  --border2: rgba(255,255,255,.98);

  --accent: #786bde;
  --blue: #5988df;

  --shadow:
    0 18px 44px rgba(76,63,121,.11),
    inset 0 1px 0 rgba(255,255,255,.95);
}


html[data-svoi-theme] body {
  background: var(--bg) !important;
  color: var(--text) !important;

  -webkit-font-smoothing: antialiased;
}


html[data-svoi-theme] h1,
html[data-svoi-theme] h2,
html[data-svoi-theme] h3,
html[data-svoi-theme] b {
  color: var(--text) !important;
}


html[data-svoi-theme] p,
html[data-svoi-theme] small,
html[data-svoi-theme] .muted {
  color: var(--muted) !important;
}


/* =========================
   BACKGROUND + ORBS
   ========================= */

html[data-svoi-theme] .background {
  position: fixed !important;
  inset: 0 !important;
  z-index: -10 !important;

  display: block !important;
  overflow: hidden !important;

  pointer-events: none !important;

  background:
    linear-gradient(
      150deg,
      var(--bg),
      var(--bg2)
    ) !important;
}

html[data-svoi-theme] .orb {
  display: block !important;
  position: absolute !important;

  border-radius: 50% !important;

  pointer-events: none !important;
}


/* DARK */

html[data-svoi-theme="dark"] .orb-a {
  width: 520px !important;
  height: 520px !important;

  top: -275px !important;
  right: -230px !important;
  left: auto !important;

  opacity: .72 !important;
  filter: blur(8px) !important;

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(78,105,177,.62),
      rgba(37,50,95,.20) 52%,
      transparent 73%
    ) !important;
}

html[data-svoi-theme="dark"] .orb-b {
  width: 430px !important;
  height: 430px !important;

  top: 39vh !important;
  left: -260px !important;
  right: auto !important;

  opacity: .58 !important;
  filter: blur(11px) !important;

  background:
    radial-gradient(
      circle at 45% 42%,
      rgba(105,89,145,.52),
      rgba(51,42,81,.15) 55%,
      transparent 74%
    ) !important;
}

html[data-svoi-theme="dark"] .orb-c {
  width: 560px !important;
  height: 560px !important;

  right: -295px !important;
  bottom: -290px !important;
  left: auto !important;

  opacity: .58 !important;
  filter: blur(12px) !important;

  background:
    radial-gradient(
      circle at 42% 38%,
      rgba(61,84,145,.50),
      rgba(31,42,78,.14) 58%,
      transparent 75%
    ) !important;
}


/* LIGHT */

html[data-svoi-theme="light"] .orb-a {
  width: 450px !important;
  height: 450px !important;

  top: -170px !important;
  left: -200px !important;

  opacity: .84 !important;
  filter: blur(5px) !important;

  background:
    radial-gradient(
      circle at 40% 40%,
      rgba(247,179,214,.76),
      rgba(247,179,214,.08) 64%,
      transparent 74%
    ) !important;
}

html[data-svoi-theme="light"] .orb-b {
  width: 530px !important;
  height: 530px !important;

  top: 22vh !important;
  right: -275px !important;

  opacity: .78 !important;
  filter: blur(6px) !important;

  background:
    radial-gradient(
      circle at 42% 42%,
      rgba(159,199,255,.70),
      rgba(159,199,255,.07) 64%,
      transparent 74%
    ) !important;
}

html[data-svoi-theme="light"] .orb-c {
  width: 470px !important;
  height: 470px !important;

  left: -40px !important;
  bottom: -250px !important;

  opacity: .74 !important;
  filter: blur(6px) !important;

  background:
    radial-gradient(
      circle at 42% 42%,
      rgba(208,175,250,.65),
      rgba(208,175,250,.06) 64%,
      transparent 74%
    ) !important;
}


/* =========================
   PREMIUM GLASS CARDS
   ========================= */

html[data-svoi-theme] :is(
  .home-primary-space,
  .home-friend-row,
  .calendar-event-card,
  .quick-card,
  .game-card,
  .profile-card,
  .settings,
  .calendar-card,
  .empty-card,
  .wish-card,
  .wizard-option,
  .idea-result,
  .space-plan
) {
  position: relative !important;
  overflow: hidden !important;

  color: var(--text) !important;

  background:
    linear-gradient(
      145deg,
      var(--glass2),
      var(--glass)
    ) !important;

  border:
    1px solid var(--border) !important;

  box-shadow:
    var(--shadow) !important;

  backdrop-filter:
    blur(28px) saturate(135%) !important;

  -webkit-backdrop-filter:
    blur(28px) saturate(135%) !important;
}


/* мягкий внутренний объём */

html[data-svoi-theme] :is(
  .home-primary-space,
  .home-friend-row,
  .quick-card,
  .game-card,
  .space-plan
)::after {
  content: "";

  position: absolute;

  width: 170px;
  height: 170px;

  right: -90px;
  bottom: -100px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(117,132,210,.16),
      rgba(90,100,175,.04) 58%,
      transparent 74%
    );
}


/* =========================
   HOME
   ========================= */

html[data-svoi-theme]
.home-primary-space {
  min-height: 104px !important;
  border-radius: 26px !important;
}

html[data-svoi-theme]
.home-friend-row {
  min-height: 78px !important;
  border-radius: 22px !important;
}

html[data-svoi-theme]
.home-primary-icon,
html[data-svoi-theme]
.home-friend-icon {
  border:
    1px solid var(--border) !important;

  background:
    rgba(119,111,207,.10) !important;
}

html[data-svoi-theme]
.home-primary-icon {
  color: var(--accent) !important;
}

html[data-svoi-theme]
.home-friend-icon {
  color: var(--blue) !important;
}

html[data-svoi-theme]
.home-create-friends,
html[data-svoi-theme]
.text-btn {
  color: var(--accent) !important;
}

html[data-svoi-theme]
.home-new-company {
  display: flex !important;

  min-height: 60px !important;

  color: var(--muted) !important;

  background:
    rgba(121,112,210,.025) !important;

  border:
    1px dashed
    rgba(127,118,215,.28) !important;

  border-radius: 20px !important;
}


/* =========================
   SPACE HERO
   ========================= */

html[data-svoi-theme]
.space-people-art {
  display: none !important;
}

html[data-svoi-theme]
.space-hero-v4 {
  position: relative !important;

  min-height: 245px !important;

  padding: 23px !important;

  overflow: hidden !important;

  border:
    1px solid var(--border2) !important;

  border-radius: 30px !important;

  box-shadow:
    var(--shadow) !important;

  backdrop-filter:
    blur(30px) saturate(135%) !important;

  -webkit-backdrop-filter:
    blur(30px) saturate(135%) !important;
}


html[data-svoi-theme="dark"]
.space-hero-v4 {
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(82,104,176,.35),
      transparent 36%
    ),
    radial-gradient(
      circle at 20% 115%,
      rgba(98,79,138,.21),
      transparent 44%
    ),
    linear-gradient(
      145deg,
      rgba(27,32,49,.87),
      rgba(12,16,25,.73)
    ) !important;
}


html[data-svoi-theme="light"]
.space-hero-v4 {
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(165,194,249,.30),
      transparent 36%
    ),
    radial-gradient(
      circle at 20% 115%,
      rgba(224,181,239,.23),
      transparent 44%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.80),
      rgba(248,244,252,.60)
    ) !important;
}


/* абстрактная стеклянная сфера */

html[data-svoi-theme]
.space-hero-v4::before {
  content: "";

  position: absolute;

  width: 210px;
  height: 210px;

  right: -70px;
  top: -80px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(151,170,235,.26),
      rgba(85,102,170,.07) 56%,
      transparent 74%
    );

  border:
    1px solid
    rgba(255,255,255,.06);
}

html[data-svoi-theme]
.space-hero-v4::after {
  content: "";

  position: absolute;

  width: 150px;
  height: 150px;

  left: -65px;
  bottom: -75px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(118,97,160,.17),
      transparent 70%
    );
}

html[data-svoi-theme]
.space-hero-content {
  position: relative;
  z-index: 2;

  width: 76% !important;
}


/* =========================
   BUTTONS
   ========================= */

html[data-svoi-theme]
.primary {
  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #776fd5,
      #627dcc
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.10) !important;

  box-shadow:
    0 9px 22px
    rgba(62,67,136,.18) !important;
}

html[data-svoi-theme]
.secondary,
html[data-svoi-theme]
.ghost-btn {
  color: var(--text) !important;

  background:
    linear-gradient(
      145deg,
      var(--glass2),
      var(--glass)
    ) !important;

  border:
    1px solid var(--border) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.04) !important;
}

html[data-svoi-theme]
.space-hero-invite {
  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #7770d5,
      #627cca
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.10) !important;
}


/* =========================
   BOTTOM NAV
   ========================= */

html[data-svoi-theme]
.bottom-nav {
  color: var(--text) !important;

  background:
    linear-gradient(
      145deg,
      var(--glass2),
      var(--glass)
    ) !important;

  border:
    1px solid var(--border2) !important;

  border-radius:
    29px !important;

  box-shadow:
    var(--shadow) !important;

  backdrop-filter:
    blur(32px) saturate(135%) !important;

  -webkit-backdrop-filter:
    blur(32px) saturate(135%) !important;
}

html[data-svoi-theme]
.nav-btn {
  color: var(--muted) !important;

  border-radius:
    21px !important;
}

html[data-svoi-theme]
.nav-btn.active {
  color: var(--text) !important;

  background:
    linear-gradient(
      135deg,
      rgba(126,113,217,.23),
      rgba(94,119,199,.16)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.05) !important;
}


/* =========================
   SHEETS / MODALS
   ========================= */

html[data-svoi-theme]
.sheet {
  color: var(--text) !important;

  background:
    linear-gradient(
      145deg,
      var(--glass2),
      var(--glass)
    ) !important;

  border:
    1px solid var(--border) !important;

  backdrop-filter:
    blur(34px) saturate(135%) !important;

  -webkit-backdrop-filter:
    blur(34px) saturate(135%) !important;
}


/* =========================
   SEGMENTS
   ========================= */

html[data-svoi-theme] :is(
  .audience-switch,
  .segmented,
  .theme-segment
) {
  background: var(--glass) !important;
  border: 1px solid var(--border) !important;

  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

html[data-svoi-theme] :is(
  .audience-switch button.active,
  .segmented button.active,
  .theme-segment button.active
) {
  color: var(--text) !important;

  background:
    linear-gradient(
      135deg,
      rgba(123,112,210,.24),
      rgba(92,119,194,.16)
    ) !important;

  border:
    1px solid rgba(137,130,220,.18) !important;
}


/* =========================
   CALENDAR
   ========================= */

html[data-svoi-theme] .calendar-card {
  border-radius: 29px !important;
}

html[data-svoi-theme] .calendar-day {
  color: var(--text) !important;
}

html[data-svoi-theme] .calendar-day.selected,
html[data-svoi-theme] .calendar-day.is-selected {
  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #7b72d7,
      #6380cf
    ) !important;

  box-shadow:
    0 8px 20px rgba(70,75,155,.20) !important;
}

html[data-svoi-theme] .calendar-month-btn,
html[data-svoi-theme] .calendar-add-top {
  color: var(--text) !important;

  background: var(--glass2) !important;

  border: 1px solid var(--border) !important;
}


/* события пары — спокойный фиолетовый,
   без розового */
html[data-svoi-theme] .couple.calendar-event-card {
  border-left-color: #8777cf !important;
}

html[data-svoi-theme] .friends.calendar-event-card {
  border-left-color: #5989d8 !important;
}

html[data-svoi-theme] .calendar-kind-dot.couple {
  background: #8777cf !important;
}

html[data-svoi-theme] .calendar-kind-dot.friends {
  background: #5989d8 !important;
}


/* =========================
   GAMES
   ========================= */

html[data-svoi-theme] .games-hero {
  position: relative !important;
  overflow: hidden !important;

  color: var(--text) !important;

  background:
    radial-gradient(
      circle at 98% 3%,
      rgba(102,115,190,.20),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      var(--glass2),
      var(--glass)
    ) !important;

  border:
    1px solid var(--border) !important;

  border-radius:
    28px !important;

  box-shadow:
    var(--shadow) !important;

  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
}

html[data-svoi-theme] .game-card {
  border-radius: 23px !important;
}


/* =========================
   PROFILE
   ========================= */

html[data-svoi-theme] .profile-card,
html[data-svoi-theme] .settings {
  border-radius: 26px !important;
}

html[data-svoi-theme] .setting-row {
  border-color: var(--border) !important;
}

html[data-svoi-theme] .switch.on {
  background:
    linear-gradient(
      135deg,
      #7970d7,
      #637dca
    ) !important;
}


/* =========================
   ICON BOXES
   ========================= */

html[data-svoi-theme] :is(
  .action-icon,
  .list-icon,
  .calendar-event-kind-icon,
  .room-tool-icon
) {
  color: var(--accent) !important;

  background:
    rgba(119,111,207,.10) !important;

  border:
    1px solid var(--border) !important;
}


/* =========================
   SHEET / EVENT DETAILS
   ========================= */

html[data-svoi-theme] .detail-list > div {
  color: var(--text) !important;

  background: var(--glass) !important;

  border:
    1px solid var(--border) !important;

  border-radius:
    18px !important;
}

html[data-svoi-theme] .close-btn,
html[data-svoi-theme] .icon-btn {
  color: var(--text) !important;

  background: var(--glass2) !important;

  border:
    1px solid var(--border) !important;
}


/* =========================
   INPUTS
   ========================= */

html[data-svoi-theme] input,
html[data-svoi-theme] textarea,
html[data-svoi-theme] select {
  color: var(--text) !important;

  background: var(--glass) !important;

  border:
    1px solid var(--border) !important;
}

html[data-svoi-theme] input::placeholder,
html[data-svoi-theme] textarea::placeholder {
  color: var(--muted) !important;
}


/* =========================
   SAFE AREA
   ========================= */

html[data-svoi-theme] .page {
  padding-bottom:
    calc(
      150px +
      env(safe-area-inset-bottom)
    ) !important;
}

html,
body,
.page,
.sheet {
  scrollbar-width: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.page::-webkit-scrollbar,
.sheet::-webkit-scrollbar {
  display: none !important;
}


/* ==========================================
   FINAL SHEETS + ROOM FIX
   ========================================== */

/* затемнение под окном — без серой каши */
html[data-svoi-theme] .sheet-wrap {
  background: rgba(8,10,16,.34) !important;

  backdrop-filter: blur(9px) saturate(105%) !important;
  -webkit-backdrop-filter: blur(9px) saturate(105%) !important;
}

html[data-svoi-theme="light"] .sheet-wrap {
  background: rgba(45,48,60,.13) !important;
}


/* сама шторка */
html[data-svoi-theme] .sheet {
  width: min(calc(100% - 20px), 540px) !important;

  margin:
    0 10px
    calc(8px + env(safe-area-inset-bottom))
    !important;

  padding: 22px !important;

  border-radius: 30px !important;

  background:
    linear-gradient(
      155deg,
      rgba(22,27,41,.96),
      rgba(12,16,25,.96)
    ) !important;

  border:
    1px solid rgba(160,174,218,.15) !important;

  box-shadow:
    0 30px 80px rgba(0,0,0,.34) !important;

  backdrop-filter: blur(28px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(120%) !important;

  overflow-x: hidden !important;
}


html[data-svoi-theme="light"] .sheet {
  background:
    linear-gradient(
      155deg,
      rgba(255,255,255,.97),
      rgba(246,244,250,.95)
    ) !important;

  border:
    1px solid rgba(255,255,255,.94) !important;

  box-shadow:
    0 28px 75px rgba(68,59,105,.18) !important;
}


/* убираем старые полосы и псевдоэлементы */
html[data-svoi-theme] .sheet::before,
html[data-svoi-theme] .sheet::after,
html[data-svoi-theme] .sheet-head::before,
html[data-svoi-theme] .sheet-head::after {
  display: none !important;
}


/* заголовок шторки */
html[data-svoi-theme] .sheet-head {
  position: relative !important;

  margin: 0 0 20px !important;
  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;
  box-shadow: none !important;
}


html[data-svoi-theme] .sheet-head h2 {
  margin: 0 !important;

  color: var(--text) !important;

  font-size: 25px !important;
  line-height: 1.05 !important;
}


/* крестик */
html[data-svoi-theme] .sheet .close-btn {
  width: 48px !important;
  height: 48px !important;

  flex: 0 0 48px !important;

  border-radius: 16px !important;

  color: var(--text) !important;

  background: var(--glass2) !important;

  border:
    1px solid var(--border) !important;
}


/* результат идеи */
html[data-svoi-theme] .sheet .idea-result {
  padding: 20px !important;

  border-radius: 24px !important;

  background:
    linear-gradient(
      145deg,
      var(--glass2),
      var(--glass)
    ) !important;

  border:
    1px solid var(--border) !important;

  box-shadow: none !important;
}


/* кнопки результата — одна под другой */
html[data-svoi-theme]
.sheet .idea-result .action-row {
  display: grid !important;

  grid-template-columns: 1fr !important;

  gap: 10px !important;

  width: 100% !important;
}


html[data-svoi-theme]
.sheet .idea-result .action-row button {
  width: 100% !important;
  min-height: 54px !important;

  border-radius: 17px !important;
}


/* мастер создания плана */
html[data-svoi-theme] .sheet .wizard-option {
  width: 100% !important;
  min-height: 74px !important;

  padding: 12px 15px !important;

  border-radius: 20px !important;

  color: var(--text) !important;

  background:
    linear-gradient(
      145deg,
      var(--glass2),
      var(--glass)
    ) !important;

  border:
    1px solid var(--border) !important;

  box-shadow: none !important;
}


html[data-svoi-theme] .context-pill {
  color: var(--accent) !important;

  background:
    rgba(122,111,211,.10) !important;

  border:
    1px solid rgba(125,116,214,.13) !important;

  border-radius: 999px !important;
}


/* карточки информации события */
html[data-svoi-theme] .detail-list > div {
  color: var(--text) !important;

  background:
    linear-gradient(
      145deg,
      var(--glass2),
      var(--glass)
    ) !important;

  border:
    1px solid var(--border) !important;

  border-radius: 18px !important;
}


/* исправляем кнопку приглашения */
html[data-svoi-theme] .space-hero-content {
  width: 100% !important;
}


html[data-svoi-theme] .space-hero-bottom {
  display: flex !important;

  align-items: center !important;
  justify-content: flex-start !important;

  gap: 12px !important;

  margin-top: 22px !important;
}


html[data-svoi-theme] .space-hero-invite {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 170px !important;
  max-width: 230px !important;

  min-height: 46px !important;

  padding: 0 16px !important;

  gap: 7px !important;

  border-radius: 16px !important;

  font-size: 13px !important;
  font-weight: 700 !important;

  line-height: 1.1 !important;

  white-space: nowrap !important;
}


/* никаких переносов внутри */
html[data-svoi-theme]
.space-hero-invite br {
  display: none !important;
}


/* ==========================================
   FINAL REFERENCE BACKGROUND
   ========================================== */

html[data-svoi-theme] body {
  min-height: 100vh !important;
}


/* ---------- LIGHT ---------- */

html[data-svoi-theme="light"] .background {
  background:
    linear-gradient(
      145deg,
      #fbf8fd 0%,
      #f6f2fb 48%,
      #eef5fc 100%
    ) !important;
}

html[data-svoi-theme="light"] .orb-a {
  width: 560px !important;
  height: 560px !important;

  left: -260px !important;
  top: -230px !important;

  opacity: .92 !important;

  filter: blur(8px) !important;

  background:
    radial-gradient(
      circle at 45% 45%,
      rgba(246,174,214,.78),
      rgba(246,174,214,.16) 52%,
      transparent 73%
    ) !important;
}

html[data-svoi-theme="light"] .orb-b {
  width: 620px !important;
  height: 620px !important;

  right: -310px !important;
  top: 17vh !important;

  opacity: .86 !important;

  filter: blur(10px) !important;

  background:
    radial-gradient(
      circle at 42% 42%,
      rgba(158,199,255,.74),
      rgba(158,199,255,.14) 54%,
      transparent 74%
    ) !important;
}

html[data-svoi-theme="light"] .orb-c {
  width: 520px !important;
  height: 520px !important;

  left: -80px !important;
  bottom: -260px !important;

  opacity: .82 !important;

  filter: blur(9px) !important;

  background:
    radial-gradient(
      circle at 45% 45%,
      rgba(209,174,250,.70),
      rgba(209,174,250,.12) 54%,
      transparent 74%
    ) !important;
}


/* ---------- DARK ---------- */

html[data-svoi-theme="dark"] .background {
  background:
    linear-gradient(
      150deg,
      #080a10 0%,
      #0b0f19 52%,
      #0d1220 100%
    ) !important;
}

html[data-svoi-theme="dark"] .orb-a {
  width: 590px !important;
  height: 590px !important;

  right: -300px !important;
  top: -260px !important;

  opacity: .82 !important;

  filter: blur(10px) !important;

  background:
    radial-gradient(
      circle at 40% 38%,
      rgba(82,105,177,.67),
      rgba(42,55,104,.24) 52%,
      transparent 74%
    ) !important;
}

html[data-svoi-theme="dark"] .orb-b {
  width: 500px !important;
  height: 500px !important;

  left: -300px !important;
  top: 40vh !important;

  opacity: .66 !important;

  filter: blur(12px) !important;

  background:
    radial-gradient(
      circle at 44% 42%,
      rgba(106,88,151,.55),
      rgba(53,43,85,.19) 55%,
      transparent 75%
    ) !important;
}

html[data-svoi-theme="dark"] .orb-c {
  width: 650px !important;
  height: 650px !important;

  right: -340px !important;
  bottom: -330px !important;

  opacity: .70 !important;

  filter: blur(13px) !important;

  background:
    radial-gradient(
      circle at 40% 38%,
      rgba(60,86,153,.58),
      rgba(31,43,83,.18) 56%,
      transparent 75%
    ) !important;
}


/* ==========================================
   REFERENCE GLASS — ALL SCREENS
   ========================================== */

/* ОБЩЕЕ СТЕКЛО */

html[data-svoi-theme] :is(
  .home-primary-space,
  .home-friend-row,
  .calendar-event-card,
  .space-plan,
  .quick-card,
  .calendar-card,
  .game-card,
  .games-hero,
  .profile-card,
  .settings,
  .empty-card,
  .wish-card,
  .wizard-option,
  .idea-result,
  .invite-share-card
) {
  position: relative !important;
  overflow: hidden !important;

  border-radius: 24px !important;

  backdrop-filter:
    blur(30px)
    saturate(140%) !important;

  -webkit-backdrop-filter:
    blur(30px)
    saturate(140%) !important;
}


/* ---------- LIGHT GLASS ---------- */

html[data-svoi-theme="light"] :is(
  .home-primary-space,
  .home-friend-row,
  .calendar-event-card,
  .space-plan,
  .quick-card,
  .calendar-card,
  .game-card,
  .games-hero,
  .profile-card,
  .settings,
  .empty-card,
  .wish-card,
  .wizard-option,
  .idea-result,
  .invite-share-card
) {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.78),
      rgba(250,248,255,.58)
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.92) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 15px 38px rgba(76,64,122,.09) !important;
}


/* ---------- DARK GLASS ---------- */

html[data-svoi-theme="dark"] :is(
  .home-primary-space,
  .home-friend-row,
  .calendar-event-card,
  .space-plan,
  .quick-card,
  .calendar-card,
  .game-card,
  .games-hero,
  .profile-card,
  .settings,
  .empty-card,
  .wish-card,
  .wizard-option,
  .idea-result,
  .invite-share-card
) {
  background:
    linear-gradient(
      145deg,
      rgba(27,32,49,.76),
      rgba(13,17,27,.66)
    ) !important;

  border:
    1px solid
    rgba(156,171,220,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 18px 45px rgba(0,0,0,.25) !important;
}


/* ВНУТРЕННИЙ БЛИК */

html[data-svoi-theme] :is(
  .home-primary-space,
  .home-friend-row,
  .calendar-event-card,
  .space-plan,
  .quick-card,
  .game-card
)::before {
  content: "" !important;

  position: absolute !important;

  width: 190px !important;
  height: 190px !important;

  right: -115px !important;
  bottom: -120px !important;

  border-radius: 50% !important;

  pointer-events: none !important;

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(131,150,225,.14),
      transparent 68%
    ) !important;
}


/* -------------------------
   HOME
   ------------------------- */

html[data-svoi-theme] .home-primary-space {
  min-height: 102px !important;
}

html[data-svoi-theme] .home-friend-row {
  min-height: 76px !important;
}

html[data-svoi-theme] .home-new-company {
  border-radius: 22px !important;
}

html[data-svoi-theme="light"] .home-new-company {
  background:
    rgba(255,255,255,.30) !important;
}

html[data-svoi-theme="dark"] .home-new-company {
  background:
    rgba(18,22,34,.35) !important;
}


/* -------------------------
   SPACE
   ------------------------- */

html[data-svoi-theme] .space-hero-v4 {
  border-radius: 30px !important;

  backdrop-filter:
    blur(32px)
    saturate(140%) !important;

  -webkit-backdrop-filter:
    blur(32px)
    saturate(140%) !important;
}

html[data-svoi-theme] .space-plan {
  border-radius: 27px !important;
}


/* -------------------------
   QUICK CARDS
   ------------------------- */

html[data-svoi-theme] .quick-card {
  min-height: 104px !important;

  border-radius: 22px !important;
}


/* -------------------------
   CALENDAR
   ------------------------- */

html[data-svoi-theme] .calendar-card {
  border-radius: 30px !important;
}


/* -------------------------
   PROFILE
   ------------------------- */

html[data-svoi-theme] .profile-card,
html[data-svoi-theme] .settings {
  border-radius: 27px !important;
}


/* -------------------------
   MODALS / SHEETS
   ------------------------- */

html[data-svoi-theme="light"] .sheet {
  background:
    linear-gradient(
      155deg,
      rgba(255,255,255,.96),
      rgba(247,245,251,.92)
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.96) !important;
}

html[data-svoi-theme="dark"] .sheet {
  background:
    linear-gradient(
      155deg,
      rgba(24,29,44,.96),
      rgba(11,15,24,.95)
    ) !important;

  border:
    1px solid
    rgba(157,171,220,.15) !important;
}


/* -------------------------
   BOTTOM NAV
   ------------------------- */

html[data-svoi-theme="light"] .bottom-nav {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.82),
      rgba(248,246,252,.68)
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.96) !important;
}

html[data-svoi-theme="dark"] .bottom-nav {
  background:
    linear-gradient(
      145deg,
      rgba(25,30,46,.82),
      rgba(12,16,26,.72)
    ) !important;

  border:
    1px solid
    rgba(158,171,220,.17) !important;
}


/* ==========================================
   BACKGROUND VISIBILITY FIX
   ========================================== */

html[data-svoi-theme] {
  background: var(--bg) !important;
}

html[data-svoi-theme] body {
  position: relative !important;
  min-height: 100vh !important;

  background: transparent !important;
}


/* фон теперь находится ПОД приложением,
   а не за всей страницей */

html[data-svoi-theme] .background {
  position: fixed !important;

  inset: 0 !important;

  z-index: 0 !important;

  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  overflow: hidden !important;

  pointer-events: none !important;
}


/* само приложение поверх фона */

html[data-svoi-theme] .app-shell {
  position: relative !important;
  z-index: 1 !important;

  background: transparent !important;
}


/* навигация поверх интерфейса */

html[data-svoi-theme] .bottom-nav {
  z-index: 5000 !important;
}


/* модалки ещё выше */

html[data-svoi-theme] #sheetRoot {
  position: relative !important;
  z-index: 10000 !important;
}


/* уведомления выше всего */

html[data-svoi-theme] #toast {
  position: fixed !important;
  z-index: 50000 !important;
}


/* гарантированно показываем сферы */

html[data-svoi-theme] .background .orb {
  display: block !important;
  visibility: visible !important;
}


/* лёгкая текстура поверх сфер */

html[data-svoi-theme] .background .grain {
  position: absolute !important;
  inset: 0 !important;

  display: block !important;

  opacity: .025 !important;

  pointer-events: none !important;
}


/* ==========================================
   WISHES — FINAL
   ========================================== */

html[data-svoi-theme] .wish-hero {
  position: relative !important;
  overflow: hidden !important;

  margin-bottom: 18px !important;
  padding: 22px !important;

  border-radius: 28px !important;

  backdrop-filter: blur(30px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(140%) !important;
}

html[data-svoi-theme="light"] .wish-hero {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.76),
      rgba(250,247,255,.55)
    ) !important;

  border: 1px solid rgba(255,255,255,.94) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 18px 42px rgba(80,65,120,.08) !important;
}

html[data-svoi-theme="dark"] .wish-hero {
  background:
    linear-gradient(
      145deg,
      rgba(28,33,50,.76),
      rgba(13,17,27,.66)
    ) !important;

  border: 1px solid rgba(155,170,220,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 20px 45px rgba(0,0,0,.23) !important;
}

html[data-svoi-theme] .wish-hero .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;

  color: var(--accent) !important;
}

html[data-svoi-theme] .wish-hero h2 {
  margin: 10px 0 7px !important;

  font-size: 25px !important;
  line-height: 1.08 !important;
}

html[data-svoi-theme] .wish-hero p {
  margin: 0 !important;
  line-height: 1.45 !important;
}


/* LIST */

html[data-svoi-theme] .wish-list {
  display: grid !important;
  gap: 11px !important;
}

html[data-svoi-theme] .wish-row {
  position: relative !important;

  display: grid !important;
  grid-template-columns: 42px minmax(0,1fr) auto auto !important;

  align-items: center !important;
  gap: 10px !important;

  min-height: 76px !important;

  padding: 12px !important;

  border-radius: 22px !important;

  backdrop-filter: blur(28px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(135%) !important;
}

html[data-svoi-theme="light"] .wish-row {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.72),
      rgba(250,248,255,.54)
    ) !important;

  border: 1px solid rgba(255,255,255,.92) !important;

  box-shadow:
    0 12px 30px rgba(74,61,112,.07) !important;
}

html[data-svoi-theme="dark"] .wish-row {
  background:
    linear-gradient(
      145deg,
      rgba(26,31,47,.74),
      rgba(13,17,27,.66)
    ) !important;

  border: 1px solid rgba(155,169,218,.13) !important;

  box-shadow:
    0 14px 34px rgba(0,0,0,.20) !important;
}


/* CHECK */

html[data-svoi-theme] .wish-check {
  width: 38px !important;
  height: 38px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  border-radius: 13px !important;

  color: var(--text) !important;

  background: rgba(125,118,210,.07) !important;

  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .wish-check.checked {
  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #7970d7,
      #6380cf
    ) !important;
}


/* TEXT */

html[data-svoi-theme] .wish-copy {
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  gap: 4px !important;
}

html[data-svoi-theme] .wish-copy b {
  overflow: hidden !important;

  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-svoi-theme] .wish-copy small {
  overflow: hidden !important;

  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-svoi-theme] .wish-row.done .wish-copy {
  opacity: .50 !important;
}

html[data-svoi-theme] .wish-row.done .wish-copy b {
  text-decoration: line-through !important;
}


/* В ПЛАН */

html[data-svoi-theme] .wish-plan-btn {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 6px !important;

  min-height: 38px !important;

  padding: 0 12px !important;

  border-radius: 13px !important;

  color: var(--accent) !important;

  background: rgba(121,112,211,.09) !important;

  border: 1px solid rgba(130,120,216,.14) !important;

  font-size: 12px !important;
  font-weight: 700 !important;

  white-space: nowrap !important;
}


/* DELETE */

html[data-svoi-theme] .wish-delete-btn {
  width: 38px !important;
  height: 38px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  border-radius: 13px !important;

  color: #bb6870 !important;

  background: rgba(185,86,95,.07) !important;

  border: 1px solid rgba(185,86,95,.11) !important;
}


/* EMPTY */

html[data-svoi-theme] .wish-empty {
  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;
  text-align: center !important;

  gap: 9px !important;

  padding: 30px 22px !important;

  border-radius: 25px !important;

  background: var(--glass) !important;

  border: 1px solid var(--border) !important;

  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
}

html[data-svoi-theme] .wish-empty .primary {
  margin-top: 8px !important;
}


/* MOBILE */

@media (max-width: 390px) {
  html[data-svoi-theme] .wish-row {
    grid-template-columns: 40px minmax(0,1fr) 40px !important;
  }

  html[data-svoi-theme] .wish-plan-btn {
    width: 40px !important;
    padding: 0 !important;
  }

  html[data-svoi-theme] .wish-plan-btn span {
    display: none !important;
  }

  html[data-svoi-theme] .wish-delete-btn {
    grid-column: 3 !important;
  }
}


/* ==========================================
   GAMES — FINAL
   ========================================== */

html[data-svoi-theme] .games-hero {
  position: relative !important;
  overflow: hidden !important;

  margin: 16px 0 18px !important;
  padding: 23px !important;

  border-radius: 29px !important;

  backdrop-filter: blur(30px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(140%) !important;
}

html[data-svoi-theme="light"] .games-hero {
  background:
    radial-gradient(
      circle at 92% 0%,
      rgba(164,197,247,.24),
      transparent 43%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.76),
      rgba(250,247,255,.56)
    ) !important;

  border: 1px solid rgba(255,255,255,.94) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 18px 42px rgba(76,62,118,.08) !important;
}

html[data-svoi-theme="dark"] .games-hero {
  background:
    radial-gradient(
      circle at 95% 0%,
      rgba(81,104,177,.28),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(28,33,50,.77),
      rgba(13,17,27,.67)
    ) !important;

  border: 1px solid rgba(155,170,220,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 20px 45px rgba(0,0,0,.23) !important;
}

html[data-svoi-theme] .games-hero .eyebrow {
  color: var(--accent) !important;
}

html[data-svoi-theme] .games-hero h2 {
  margin: 10px 0 7px !important;

  font-size: 26px !important;
  line-height: 1.08 !important;
}

html[data-svoi-theme] .games-hero p {
  margin: 0 !important;
  line-height: 1.45 !important;
}


/* GAME GRID */

html[data-svoi-theme] .game-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;

  gap: 12px !important;
}

html[data-svoi-theme] .game-card {
  position: relative !important;
  overflow: hidden !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  min-height: 160px !important;

  padding: 18px !important;

  text-align: left !important;

  border-radius: 24px !important;

  color: var(--text) !important;

  backdrop-filter: blur(28px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(135%) !important;
}

html[data-svoi-theme] .game-card.large {
  grid-column: 1 / -1 !important;

  min-height: 150px !important;
}

html[data-svoi-theme="light"] .game-card {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.73),
      rgba(249,247,254,.53)
    ) !important;

  border: 1px solid rgba(255,255,255,.92) !important;

  box-shadow:
    0 14px 34px rgba(73,61,111,.07) !important;
}

html[data-svoi-theme="dark"] .game-card {
  background:
    linear-gradient(
      145deg,
      rgba(26,31,47,.75),
      rgba(13,17,27,.66)
    ) !important;

  border: 1px solid rgba(155,169,218,.13) !important;

  box-shadow:
    0 16px 38px rgba(0,0,0,.21) !important;
}

html[data-svoi-theme] .game-card::after {
  content: "";

  position: absolute;

  width: 145px;
  height: 145px;

  right: -80px;
  bottom: -85px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(115,132,207,.15),
      transparent 68%
    );
}

html[data-svoi-theme] .game-icon {
  width: 48px !important;
  height: 48px !important;

  display: grid !important;
  place-items: center !important;

  margin-bottom: 22px !important;

  border-radius: 16px !important;

  color: var(--accent) !important;

  background: rgba(122,113,211,.10) !important;

  border: 1px solid rgba(130,121,216,.13) !important;
}

html[data-svoi-theme] .game-card b {
  position: relative;
  z-index: 2;

  margin-bottom: 5px !important;

  font-size: 17px !important;
  line-height: 1.15 !important;
}

html[data-svoi-theme] .game-card small {
  position: relative;
  z-index: 2;

  line-height: 1.35 !important;

  color: var(--muted) !important;
}


/* ==========================================
   GAME QUESTION
   ========================================== */

html[data-svoi-theme] .segmented {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;

  gap: 5px !important;

  margin: 18px 0 !important;
  padding: 5px !important;

  border-radius: 18px !important;

  background: var(--glass) !important;

  border: 1px solid var(--border) !important;

  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

html[data-svoi-theme] .segmented button {
  min-height: 44px !important;

  border: 0 !important;
  border-radius: 14px !important;

  color: var(--muted) !important;

  background: transparent !important;

  font-weight: 700 !important;
}

html[data-svoi-theme] .segmented button.active {
  color: var(--text) !important;

  background:
    linear-gradient(
      135deg,
      rgba(124,113,214,.23),
      rgba(96,124,204,.17)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}


/* QUESTION CARD */

html[data-svoi-theme] .truth-card {
  position: relative !important;
  overflow: hidden !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;

  min-height: 300px !important;

  margin-bottom: 14px !important;
  padding: 26px !important;

  border-radius: 30px !important;

  backdrop-filter: blur(32px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(140%) !important;
}

html[data-svoi-theme="light"] .truth-card {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(175,194,249,.24),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.82),
      rgba(249,246,254,.60)
    ) !important;

  border: 1px solid rgba(255,255,255,.95) !important;

  box-shadow:
    0 20px 48px rgba(74,61,112,.10) !important;
}

html[data-svoi-theme="dark"] .truth-card {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(79,102,176,.34),
      transparent 42%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(104,83,144,.20),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(28,34,51,.86),
      rgba(12,16,26,.72)
    ) !important;

  border: 1px solid rgba(158,172,220,.15) !important;

  box-shadow:
    0 24px 55px rgba(0,0,0,.27) !important;
}

html[data-svoi-theme] .truth-card::after {
  content: "";

  position: absolute;

  width: 190px;
  height: 190px;

  right: -95px;
  bottom: -90px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(118,133,213,.15),
      transparent 69%
    );
}

html[data-svoi-theme] .truth-card .mode-label {
  position: relative;
  z-index: 2;

  width: fit-content !important;

  padding: 7px 11px !important;

  border-radius: 999px !important;

  color: var(--accent) !important;

  background: rgba(123,113,211,.09) !important;

  border: 1px solid rgba(130,121,216,.13) !important;

  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .055em !important;
}

html[data-svoi-theme] .truth-card h2 {
  position: relative;
  z-index: 2;

  max-width: 92% !important;

  margin: auto 0 !important;

  font-size: 29px !important;
  line-height: 1.13 !important;
  letter-spacing: -.025em !important;
}

html[data-svoi-theme] .truth-card + .primary {
  min-height: 56px !important;

  border-radius: 18px !important;
}

html[data-svoi-theme] .swipe-hint {
  margin: 13px 0 0 !important;

  text-align: center !important;

  color: var(--muted) !important;

  font-size: 12px !important;
}


/* iPhone narrow */

@media (max-width: 390px) {
  html[data-svoi-theme] .game-grid {
    grid-template-columns: 1fr !important;
  }

  html[data-svoi-theme] .game-card.large {
    grid-column: auto !important;
  }

  html[data-svoi-theme] .game-card {
    min-height: 130px !important;
  }

  html[data-svoi-theme] .truth-card {
    min-height: 270px !important;
  }

  html[data-svoi-theme] .truth-card h2 {
    font-size: 26px !important;
  }
}


/* ==========================================
   PROFILE — FINAL
   ========================================== */

html[data-svoi-theme] .profile-card {
  display: flex !important;
  align-items: center !important;

  gap: 16px !important;

  margin: 16px 0 24px !important;
  padding: 20px !important;

  border-radius: 28px !important;

  backdrop-filter: blur(30px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(140%) !important;
}

html[data-svoi-theme="light"] .profile-card {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.78),
      rgba(249,247,254,.55)
    ) !important;

  border: 1px solid rgba(255,255,255,.94) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 18px 42px rgba(74,61,112,.08) !important;
}

html[data-svoi-theme="dark"] .profile-card {
  background:
    linear-gradient(
      145deg,
      rgba(28,33,50,.78),
      rgba(13,17,27,.67)
    ) !important;

  border: 1px solid rgba(155,170,220,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 20px 45px rgba(0,0,0,.23) !important;
}


/* AVATAR */

html[data-svoi-theme] .profile-avatar {
  width: 64px !important;
  height: 64px !important;

  flex: 0 0 64px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 21px !important;

  color: #fff !important;

  background:
    linear-gradient(
      145deg,
      #7c72d8,
      #6380cf
    ) !important;

  border: 1px solid rgba(255,255,255,.13) !important;

  box-shadow:
    0 12px 25px rgba(73,72,151,.18) !important;

  font-size: 22px !important;
  font-weight: 800 !important;
}

html[data-svoi-theme] .profile-card h2 {
  margin: 0 0 4px !important;

  font-size: 22px !important;
}

html[data-svoi-theme] .profile-card p {
  margin: 0 !important;

  color: var(--muted) !important;
}


/* SECTION TITLES */

html[data-svoi-theme] .section-head {
  margin: 22px 2px 10px !important;
}

html[data-svoi-theme] .section-head h2 {
  margin: 0 !important;

  font-size: 17px !important;
}


/* SETTINGS */

html[data-svoi-theme] .settings-list {
  overflow: hidden !important;

  border-radius: 27px !important;

  backdrop-filter: blur(30px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(140%) !important;
}

html[data-svoi-theme="light"] .settings-list {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.73),
      rgba(249,247,254,.52)
    ) !important;

  border: 1px solid rgba(255,255,255,.92) !important;

  box-shadow:
    0 15px 36px rgba(74,61,112,.07) !important;
}

html[data-svoi-theme="dark"] .settings-list {
  background:
    linear-gradient(
      145deg,
      rgba(26,31,47,.74),
      rgba(13,17,27,.65)
    ) !important;

  border: 1px solid rgba(155,169,218,.13) !important;

  box-shadow:
    0 17px 40px rgba(0,0,0,.21) !important;
}


html[data-svoi-theme] .setting-row {
  display: flex !important;
  align-items: center !important;

  gap: 12px !important;

  min-height: 72px !important;

  padding: 14px 16px !important;

  background: transparent !important;

  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
}

html[data-svoi-theme] .setting-row:last-child {
  border-bottom: 0 !important;
}

html[data-svoi-theme] .setting-row.vertical {
  display: block !important;
}

html[data-svoi-theme] .setting-row b {
  display: block !important;

  margin-bottom: 3px !important;
}

html[data-svoi-theme] .setting-row small {
  color: var(--muted) !important;
}


/* SETTING ICON */

html[data-svoi-theme] .setting-icon {
  width: 42px !important;
  height: 42px !important;

  flex: 0 0 42px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 14px !important;

  color: var(--accent) !important;

  background:
    rgba(123,113,211,.10) !important;

  border:
    1px solid rgba(130,121,216,.13) !important;
}


/* THEME SWITCH */

html[data-svoi-theme] .theme-segment {
  display: grid !important;

  grid-template-columns:
    repeat(3,1fr) !important;

  gap: 5px !important;

  margin-top: 12px !important;
  padding: 5px !important;

  border-radius: 17px !important;

  background:
    rgba(123,113,211,.055) !important;

  border:
    1px solid var(--border) !important;
}

html[data-svoi-theme] .theme-segment button {
  min-height: 40px !important;

  padding: 0 8px !important;

  border: 0 !important;
  border-radius: 13px !important;

  color: var(--muted) !important;

  background: transparent !important;

  font-size: 12px !important;
  font-weight: 700 !important;
}

html[data-svoi-theme] .theme-segment button.active {
  color: var(--text) !important;

  background:
    linear-gradient(
      135deg,
      rgba(126,114,216,.25),
      rgba(94,122,201,.18)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}


/* TOGGLE */

html[data-svoi-theme] .switch {
  position: relative !important;

  width: 50px !important;
  height: 30px !important;

  margin-left: auto !important;

  flex: 0 0 50px !important;

  padding: 0 !important;

  border-radius: 999px !important;

  background:
    rgba(120,125,145,.20) !important;

  border:
    1px solid var(--border) !important;
}

html[data-svoi-theme] .switch i {
  position: absolute !important;

  width: 24px !important;
  height: 24px !important;

  left: 2px !important;
  top: 2px !important;

  border-radius: 50% !important;

  background: #fff !important;

  box-shadow:
    0 2px 8px rgba(0,0,0,.17) !important;

  transition:
    transform .22s ease !important;
}

html[data-svoi-theme] .switch.on {
  background:
    linear-gradient(
      135deg,
      #7970d7,
      #6380cf
    ) !important;
}

html[data-svoi-theme] .switch.on i {
  transform: translateX(20px) !important;
}


/* ABOUT */

html[data-svoi-theme] .about-card {
  display: grid !important;

  grid-template-columns:
    42px minmax(0,1fr) auto !important;

  align-items: center !important;

  gap: 12px !important;

  padding: 16px !important;

  border-radius: 24px !important;

  backdrop-filter: blur(28px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(135%) !important;
}

html[data-svoi-theme="light"] .about-card {
  background:
    rgba(255,255,255,.64) !important;

  border:
    1px solid rgba(255,255,255,.92) !important;
}

html[data-svoi-theme="dark"] .about-card {
  background:
    rgba(23,28,43,.70) !important;

  border:
    1px solid rgba(155,169,218,.13) !important;
}

html[data-svoi-theme] .about-card em {
  color: var(--muted) !important;

  font-style: normal !important;

  font-size: 12px !important;
}


/* ==========================================
   COMPACT SPACE HERO
   ========================================== */

html[data-svoi-theme] .space-hero-v4 {
  min-height: 0 !important;
  height: auto !important;

  padding: 20px 20px 18px !important;

  border-radius: 28px !important;
}


/* контент занимает всю ширину */

html[data-svoi-theme] .space-hero-content {
  width: 100% !important;
}


/* маленькая подпись */

html[data-svoi-theme] .space-hero-v4 .eyebrow,
html[data-svoi-theme] .space-hero-v4 .kicker {
  margin: 0 0 10px !important;

  font-size: 11px !important;
  line-height: 1 !important;

  opacity: .72 !important;
}


/* главный заголовок */

html[data-svoi-theme] .space-hero-v4 h2 {
  max-width: 78% !important;

  margin: 0 0 8px !important;

  font-size: 27px !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em !important;
}


/* статус */

html[data-svoi-theme] .space-hero-v4 p {
  margin: 0 !important;

  font-size: 15px !important;
  line-height: 1.3 !important;

  color: var(--muted) !important;
}


/* нижняя строка */

html[data-svoi-theme] .space-hero-bottom {
  display: flex !important;

  align-items: center !important;

  gap: 10px !important;

  margin-top: 16px !important;
}


/* аватар */

html[data-svoi-theme] .space-hero-bottom .mini-avatar {
  width: 42px !important;
  height: 42px !important;

  flex: 0 0 42px !important;

  border-radius: 14px !important;
}


/* приглашение — компактнее */

html[data-svoi-theme] .space-hero-invite {
  width: auto !important;
  min-width: 0 !important;

  min-height: 44px !important;

  padding: 0 15px !important;

  border-radius: 15px !important;

  font-size: 13px !important;
  font-weight: 700 !important;
}


/* сфера тоже чуть меньше */

html[data-svoi-theme] .space-hero-v4::before {
  width: 165px !important;
  height: 165px !important;

  right: -55px !important;
  top: -65px !important;
}


/* ещё компактнее на iPhone */

@media (max-width: 430px) {
  html[data-svoi-theme] .space-hero-v4 {
    padding: 18px !important;
  }

  html[data-svoi-theme] .space-hero-v4 h2 {
    max-width: 82% !important;

    font-size: 25px !important;
  }

  html[data-svoi-theme] .space-hero-v4 p {
    font-size: 14px !important;
  }
}


/* SPACE HERO — CLEAN VERSION */

html[data-svoi-theme] .space-hero-v4 {
  padding: 18px 20px !important;
}

html[data-svoi-theme] .space-hero-v4 .eyebrow,
html[data-svoi-theme] .space-hero-v4 .kicker {
  margin-bottom: 12px !important;
}

html[data-svoi-theme] .space-hero-v4 p {
  margin: 0 !important;

  font-size: 15px !important;
  line-height: 1.35 !important;

  font-weight: 500 !important;
}

html[data-svoi-theme] .space-hero-bottom {
  margin-top: 14px !important;
}


/* PAIR HERO — MINIMAL */

html[data-svoi-theme] .space-hero-v4 .eyebrow,
html[data-svoi-theme] .space-hero-v4 .kicker {
  display: none !important;
}

html[data-svoi-theme] .space-hero-v4 p {
  margin: 0 !important;

  max-width: 82% !important;

  font-size: 21px !important;
  line-height: 1.18 !important;
  font-weight: 750 !important;

  letter-spacing: -.02em !important;

  color: var(--text) !important;
}

html[data-svoi-theme] .space-hero-bottom {
  margin-top: 18px !important;
}

html[data-svoi-theme] .space-hero-v4 {
  padding: 22px 20px !important;
}


/* PAIR HERO — FINAL MINIMAL */

html[data-svoi-theme] .space-hero-v4 {
  padding: 22px 20px !important;
}

html[data-svoi-theme] .space-hero-v4 p {
  margin: 0 !important;
  max-width: 78% !important;

  color: var(--text) !important;

  font-size: 22px !important;
  line-height: 1.16 !important;
  font-weight: 750 !important;

  letter-spacing: -.025em !important;
}

html[data-svoi-theme] .space-hero-bottom {
  margin-top: 18px !important;
}


/* ==========================================
   GLOBAL SHEET VIEWPORT FIX
   Все модальные окна всегда внутри экрана
   ========================================== */

html[data-svoi-theme] #sheetRoot {
  position: fixed !important;

  inset: 0 !important;

  width: 100vw !important;
  height: 100dvh !important;

  z-index: 10000 !important;

  pointer-events: none !important;

  overflow: hidden !important;
}


/* затемнение всегда относительно viewport */

html[data-svoi-theme] #sheetRoot .sheet-wrap {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  display: flex !important;

  align-items: flex-end !important;
  justify-content: center !important;

  padding:
    max(10px, env(safe-area-inset-top))
    10px
    max(8px, env(safe-area-inset-bottom))
    !important;

  overflow: hidden !important;

  pointer-events: auto !important;

  overscroll-behavior: contain !important;
}


/* сама шторка */

html[data-svoi-theme] #sheetRoot .sheet {
  position: relative !important;

  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;

  transform: none !important;

  width: 100% !important;
  max-width: 540px !important;

  max-height:
    calc(
      100dvh -
      env(safe-area-inset-top) -
      env(safe-area-inset-bottom) -
      26px
    ) !important;

  margin: 0 !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  -webkit-overflow-scrolling: touch !important;

  overscroll-behavior: contain !important;

  border-radius: 30px !important;
}


/* содержимое больше не может вытолкнуть окно за экран */

html[data-svoi-theme] #sheetRoot .sheet > * {
  max-width: 100% !important;
}


/* при открытой шторке задняя страница не прокручивается */

html:has(#sheetRoot .sheet-wrap),
body:has(#sheetRoot .sheet-wrap) {
  overflow: hidden !important;

  overscroll-behavior: none !important;
}


/* iPhone */

@media (max-width: 600px) {
  html[data-svoi-theme] #sheetRoot .sheet-wrap {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-bottom:
      max(6px, env(safe-area-inset-bottom))
      !important;
  }

  html[data-svoi-theme] #sheetRoot .sheet {
    border-radius: 29px 29px 24px 24px !important;
  }
}


/* iOS swipe-back feedback */

html.swiping-back #app {
  transform: translateX(7px) !important;

  transition:
    transform .12s ease-out !important;
}

#app {
  transition:
    transform .18s ease-out;
}


/* ==========================================
   CALENDAR — FINAL
   ========================================== */

html[data-svoi-theme] .calendar-card {
  position: relative !important;
  overflow: hidden !important;

  margin-top: 14px !important;
  padding: 18px !important;

  border-radius: 29px !important;

  backdrop-filter: blur(30px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(140%) !important;
}


/* LIGHT */

html[data-svoi-theme="light"] .calendar-card {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.78),
      rgba(249,247,254,.56)
    ) !important;

  border: 1px solid rgba(255,255,255,.94) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 18px 42px rgba(74,61,112,.08) !important;
}


/* DARK */

html[data-svoi-theme="dark"] .calendar-card {
  background:
    linear-gradient(
      145deg,
      rgba(27,32,49,.78),
      rgba(13,17,27,.67)
    ) !important;

  border: 1px solid rgba(155,170,220,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 20px 45px rgba(0,0,0,.23) !important;
}


/* FILTERS */

html[data-svoi-theme] .calendar-filter [data-calendar-filter] {
  border-radius: 999px !important;

  color: var(--muted) !important;

  background: transparent !important;
}

html[data-svoi-theme] .calendar-filter [data-calendar-filter].active {
  color: var(--text) !important;

  background:
    linear-gradient(
      135deg,
      rgba(124,113,214,.23),
      rgba(95,122,201,.17)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}


/* DAYS */

html[data-svoi-theme] .calendar-day {
  min-width: 0 !important;
  aspect-ratio: 1 / 1 !important;

  padding: 0 !important;

  border: 0 !important;
  border-radius: 14px !important;

  color: var(--text) !important;

  background: transparent !important;

  font-weight: 650 !important;
}

html[data-svoi-theme] .calendar-day.empty {
  pointer-events: none !important;
}

html[data-svoi-theme] .calendar-day.today {
  color: var(--accent) !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(126,116,214,.25) !important;
}

html[data-svoi-theme] .calendar-day.selected {
  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #7b72d7,
      #6281cf
    ) !important;

  box-shadow:
    0 8px 20px rgba(67,74,151,.22) !important;
}


/* SELECTED DATE */

html[data-svoi-theme] .selected-date-head {
  margin-top: 25px !important;
  margin-bottom: 11px !important;
}

html[data-svoi-theme] .selected-date-head small {
  color: var(--muted) !important;
}

html[data-svoi-theme] .selected-date-head h2 {
  margin: 3px 0 0 !important;
}


/* EVENT CARDS */

html[data-svoi-theme] .event-mini {
  position: relative !important;
  overflow: hidden !important;

  display: grid !important;

  grid-template-columns:
    48px minmax(0,1fr) 24px !important;

  align-items: center !important;

  gap: 12px !important;

  width: 100% !important;

  min-height: 84px !important;

  margin-bottom: 10px !important;
  padding: 13px !important;

  text-align: left !important;

  border-radius: 23px !important;

  color: var(--text) !important;

  backdrop-filter: blur(28px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(135%) !important;
}

html[data-svoi-theme="light"] .event-mini {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.72),
      rgba(249,247,254,.53)
    ) !important;

  border: 1px solid rgba(255,255,255,.92) !important;

  box-shadow:
    0 13px 32px rgba(74,61,112,.07) !important;
}

html[data-svoi-theme="dark"] .event-mini {
  background:
    linear-gradient(
      145deg,
      rgba(25,30,46,.75),
      rgba(12,16,26,.66)
    ) !important;

  border: 1px solid rgba(155,169,218,.13) !important;

  box-shadow:
    0 15px 35px rgba(0,0,0,.20) !important;
}


/* убираем яркую розовую полосу */

html[data-svoi-theme] .event-mini.couple {
  border-left:
    2px solid rgba(130,115,214,.56) !important;
}

html[data-svoi-theme] .event-mini.friends {
  border-left:
    2px solid rgba(91,137,216,.62) !important;
}


/* ICON */

html[data-svoi-theme] .event-mini-icon {
  width: 46px !important;
  height: 46px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 15px !important;

  background:
    rgba(122,113,211,.10) !important;

  border:
    1px solid rgba(130,121,216,.13) !important;
}

html[data-svoi-theme] .event-mini-icon.couple {
  color: var(--accent) !important;
}

html[data-svoi-theme] .event-mini-icon.friends {
  color: var(--blue) !important;
}


/* COPY */

html[data-svoi-theme] .event-mini-copy {
  min-width: 0 !important;
}

html[data-svoi-theme] .event-mini-copy small {
  display: block !important;

  margin-bottom: 3px !important;

  color: var(--muted) !important;
}

html[data-svoi-theme] .event-mini-copy b {
  display: block !important;

  overflow: hidden !important;

  margin-bottom: 3px !important;

  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-svoi-theme] .event-mini-copy span {
  color: var(--muted) !important;

  font-size: 12px !important;
}


/* EMPTY DAY */

html[data-svoi-theme] .empty-action {
  width: 100% !important;

  min-height: 82px !important;

  padding: 14px !important;

  border-radius: 22px !important;

  color: var(--text) !important;

  background: var(--glass) !important;

  border:
    1px dashed rgba(126,116,214,.22) !important;
}

html[data-svoi-theme] .empty-action-icon {
  color: var(--accent) !important;
}


/* ==========================================
   PLANNER WIZARD — READABILITY + BACK
   ========================================== */

html[data-svoi-theme] .wizard,
html[data-svoi-theme] .wizard-step,
html[data-svoi-theme] .wizard-progress {
  opacity: 1 !important;
  filter: none !important;
}


/* прогресс */

html[data-svoi-theme] .wizard-progress {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr auto !important;

  align-items: center !important;

  gap: 8px !important;

  margin: 4px 2px 20px !important;
}

html[data-svoi-theme] .wizard-progress i {
  display: block !important;

  height: 4px !important;

  border-radius: 999px !important;

  background: rgba(125,130,150,.16) !important;
}

html[data-svoi-theme] .wizard-progress i.active {
  background:
    linear-gradient(
      90deg,
      #d95fba,
      #8170dc,
      #6388df
    ) !important;
}

html[data-svoi-theme] .wizard-progress span {
  min-width: 52px !important;

  color: var(--text) !important;

  opacity: .78 !important;

  font-size: 12px !important;
  font-weight: 750 !important;

  text-align: right !important;
}


/* LIGHT — усиливаем читаемость */

html[data-svoi-theme="light"] .wizard-step h2 {
  color: #151823 !important;
}

html[data-svoi-theme="light"] .wizard-step > p {
  color: #6f7485 !important;

  opacity: 1 !important;
}

html[data-svoi-theme="light"] .wizard-progress span {
  color: #555b6d !important;

  opacity: 1 !important;
}

html[data-svoi-theme="light"] .context-pill {
  color: #7164d3 !important;

  background:
    rgba(119,105,215,.11) !important;

  border:
    1px solid rgba(119,105,215,.20) !important;

  opacity: 1 !important;
}

html[data-svoi-theme="light"] .wizard-option {
  color: #151823 !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.92),
      rgba(248,247,252,.82)
    ) !important;

  border:
    1px solid rgba(255,255,255,.98) !important;

  box-shadow:
    0 10px 28px rgba(66,55,105,.08) !important;
}

html[data-svoi-theme="light"] .wizard-option b {
  color: #151823 !important;
}

html[data-svoi-theme="light"] .wizard-emoji {
  background:
    rgba(119,105,215,.07) !important;
}


/* DARK */

html[data-svoi-theme="dark"] .wizard-step > p {
  color: #969db0 !important;

  opacity: 1 !important;
}

html[data-svoi-theme="dark"] .wizard-progress span {
  color: #a1a8b9 !important;

  opacity: 1 !important;
}


/* КРАСИВАЯ КНОПКА НАЗАД */

html[data-svoi-theme] .wizard-back-btn {
  width: 46px !important;
  height: 46px !important;

  display: grid !important;
  place-items: center !important;

  margin-top: 13px !important;
  padding: 0 !important;

  border-radius: 15px !important;

  color: var(--text) !important;

  background:
    linear-gradient(
      145deg,
      var(--glass2),
      var(--glass)
    ) !important;

  border:
    1px solid var(--border) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05) !important;

  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

html[data-svoi-theme="light"] .wizard-back-btn {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 8px 20px rgba(70,58,110,.07) !important;
}


/* WIZARD BACK — CLEAN */

html[data-svoi-theme] .wizard-back-btn {
  display: inline-grid !important;
  place-items: center !important;

  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;

  height: 40px !important;
  min-height: 40px !important;

  margin: 14px 0 0 !important;
  padding: 0 !important;

  border-radius: 14px !important;

  color: var(--muted) !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}

html[data-svoi-theme="dark"] .wizard-back-btn {
  background: rgba(27,32,48,.68) !important;

  border:
    1px solid rgba(155,170,220,.13) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

html[data-svoi-theme="light"] .wizard-back-btn {
  background: rgba(255,255,255,.65) !important;

  border:
    1px solid rgba(255,255,255,.90) !important;

  box-shadow:
    0 7px 18px rgba(70,58,110,.06),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

html[data-svoi-theme] .wizard-back-btn svg {
  width: 18px !important;
  height: 18px !important;

  transform: rotate(180deg) !important;

  stroke-width: 2 !important;
}


/* ==========================================
   PLANNER — FINAL LIGHT READABILITY
   ========================================== */

html[data-svoi-theme="light"]
#sheetRoot .sheet {
  opacity: 1 !important;
  filter: none !important;

  background:
    linear-gradient(
      155deg,
      rgba(255,255,255,.975),
      rgba(248,246,252,.955)
    ) !important;

  border:
    1px solid rgba(255,255,255,1) !important;

  box-shadow:
    0 28px 70px rgba(72,60,110,.18),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}


html[data-svoi-theme="light"]
.wizard-step {
  opacity: 1 !important;
  filter: none !important;
}


html[data-svoi-theme="light"]
.wizard-step h2 {
  color: #171923 !important;

  opacity: 1 !important;
}


html[data-svoi-theme="light"]
.wizard-step > p {
  color: #686d7c !important;

  opacity: 1 !important;

  font-weight: 500 !important;
}


html[data-svoi-theme="light"]
.wizard-progress span {
  color: #626777 !important;

  opacity: 1 !important;

  font-weight: 750 !important;
}


html[data-svoi-theme="light"]
.wizard-progress i {
  background:
    rgba(78,82,104,.11) !important;
}


html[data-svoi-theme="light"]
.wizard-progress i.active {
  background:
    linear-gradient(
      90deg,
      #d865ba,
      #8172dc,
      #6489df
    ) !important;
}


html[data-svoi-theme="light"]
.context-pill {
  color: #6759cc !important;

  opacity: 1 !important;

  background:
    rgba(112,96,210,.12) !important;

  border:
    1px solid rgba(112,96,210,.20) !important;
}


html[data-svoi-theme="light"]
.wizard-option {
  opacity: 1 !important;

  color: #171923 !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(247,247,251,.94)
    ) !important;

  border:
    1px solid rgba(255,255,255,1) !important;

  box-shadow:
    0 10px 26px rgba(65,55,100,.09),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}


html[data-svoi-theme="light"]
.wizard-option b {
  color: #171923 !important;
}


/* ==========================================
   WIZARD BACK — HARD RESET
   ========================================== */

html[data-svoi-theme]
button.wizard-back-btn {
  all: unset !important;

  box-sizing: border-box !important;

  display: grid !important;
  place-items: center !important;

  width: 42px !important;
  height: 42px !important;

  margin-top: 14px !important;

  border-radius: 50% !important;

  cursor: pointer !important;

  -webkit-tap-highlight-color: transparent !important;
}


html[data-svoi-theme]
button.wizard-back-btn svg {
  display: block !important;

  width: 21px !important;
  height: 21px !important;

  fill: none !important;

  stroke: currentColor !important;
  stroke-width: 2.2 !important;

  stroke-linecap: round !important;
  stroke-linejoin: round !important;

  transform: none !important;
}


html[data-svoi-theme="dark"]
button.wizard-back-btn {
  color: #c9ceda !important;

  background:
    rgba(29,34,50,.72) !important;

  border:
    1px solid rgba(156,170,218,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}


html[data-svoi-theme="light"]
button.wizard-back-btn {
  color: #555b6c !important;

  background:
    rgba(255,255,255,.90) !important;

  border:
    1px solid rgba(255,255,255,1) !important;

  box-shadow:
    0 7px 18px rgba(70,58,105,.09),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}


/* ==========================================
   LIGHT SHEET — CLEAN MILKY GLASS
   ========================================== */

html[data-svoi-theme="light"]
#sheetRoot .sheet {
  background:
    linear-gradient(
      160deg,
      #fbfafd 0%,
      #f7f5fb 55%,
      #f3f5fb 100%
    ) !important;

  opacity: 1 !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  border:
    1px solid rgba(255,255,255,.98) !important;

  box-shadow:
    0 28px 70px rgba(73,61,105,.20),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}


/* задний экран размываем только СНАРУЖИ шторки */

html[data-svoi-theme="light"]
#sheetRoot .sheet-wrap {
  background:
    rgba(55,53,72,.12) !important;

  backdrop-filter:
    blur(12px) saturate(105%) !important;

  -webkit-backdrop-filter:
    blur(12px) saturate(105%) !important;
}


/* текст мастера */

html[data-svoi-theme="light"]
.wizard-step h2 {
  color: #141720 !important;
}

html[data-svoi-theme="light"]
.wizard-step > p {
  color: #666b7b !important;
}

html[data-svoi-theme="light"]
.wizard-progress span {
  color: #555b6a !important;
}

html[data-svoi-theme="light"]
.context-pill {
  color: #685bd0 !important;

  background:
    #eeeafc !important;

  border:
    1px solid #ddd6f8 !important;
}


/* варианты тоже без просвечивания */

html[data-svoi-theme="light"]
.wizard-option {
  background:
    #fbfbfd !important;

  border:
    1px solid rgba(255,255,255,1) !important;

  box-shadow:
    0 9px 24px rgba(64,56,91,.09) !important;
}


/* ==========================================
   PLANNER — FINAL TEXT + BACK BUTTON
   ========================================== */

html[data-svoi-theme] .wizard-step h2 {
  margin: 18px 0 8px !important;

  font-size: 25px !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;

  opacity: 1 !important;
}

html[data-svoi-theme="light"] .wizard-step h2 {
  color: #151821 !important;
}

html[data-svoi-theme="dark"] .wizard-step h2 {
  color: #f7f8fb !important;
}


/* если подзаголовок пустой — места под него нет */

html[data-svoi-theme] .wizard-step > p:empty {
  display: none !important;
}


/* на остальных шагах подзаголовок читаемый */

html[data-svoi-theme="light"] .wizard-step > p {
  color: #5f6575 !important;
  opacity: 1 !important;
}

html[data-svoi-theme="dark"] .wizard-step > p {
  color: #9aa2b5 !important;
  opacity: 1 !important;
}


/* НАЗАД — как на макете */

html[data-svoi-theme] button.wizard-back-btn {
  appearance: none !important;
  -webkit-appearance: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 7px !important;

  width: auto !important;
  min-width: 105px !important;
  height: 44px !important;

  margin: 15px 0 0 !important;
  padding: 0 15px 0 11px !important;

  border-radius: 16px !important;

  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 700 !important;

  -webkit-tap-highlight-color: transparent !important;
}


/* SVG */

html[data-svoi-theme] button.wizard-back-btn svg {
  display: block !important;

  width: 19px !important;
  height: 19px !important;

  flex: 0 0 19px !important;

  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;

  stroke-linecap: round !important;
  stroke-linejoin: round !important;

  transform: none !important;
}


/* LIGHT */

html[data-svoi-theme="light"] button.wizard-back-btn {
  color: #303440 !important;

  background:
    rgba(255,255,255,.76) !important;

  border:
    1px solid rgba(255,255,255,.96) !important;

  box-shadow:
    0 8px 22px rgba(66,57,96,.08),
    inset 0 1px 0 rgba(255,255,255,1) !important;

  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}


/* DARK */

html[data-svoi-theme="dark"] button.wizard-back-btn {
  color: #e5e8f0 !important;

  background:
    rgba(27,32,48,.72) !important;

  border:
    1px solid rgba(157,170,218,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04) !important;

  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}


/* ==========================================
   WIZARD BACK — FINAL SAFE VERSION
   ========================================== */

html[data-svoi-theme]
.wizard-step > button.wizard-back-btn {
  all: unset !important;
  box-sizing: border-box !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 9px !important;

  width: auto !important;
  min-width: 104px !important;
  height: 42px !important;

  margin: 14px 0 0 !important;
  padding: 0 15px !important;

  border-radius: 14px !important;

  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 700 !important;

  -webkit-tap-highlight-color: transparent !important;
}

html[data-svoi-theme]
.wizard-step > button.wizard-back-btn::before {
  content: "" !important;

  width: 8px !important;
  height: 8px !important;

  border-left: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;

  transform: rotate(45deg) !important;
}

html[data-svoi-theme]
.wizard-step > button.wizard-back-btn span {
  all: unset !important;

  display: inline !important;
  color: inherit !important;

  font-size: 14px !important;
  font-weight: 700 !important;
}


/* LIGHT */

html[data-svoi-theme="light"]
.wizard-step > button.wizard-back-btn {
  color: #343947 !important;

  background: rgba(255,255,255,.82) !important;

  border:
    1px solid rgba(255,255,255,.98) !important;

  box-shadow:
    0 7px 20px rgba(67,57,98,.08),
    inset 0 1px 0 #fff !important;
}


/* DARK */

html[data-svoi-theme="dark"]
.wizard-step > button.wizard-back-btn {
  color: #e3e7f0 !important;

  background: rgba(28,33,49,.78) !important;

  border:
    1px solid rgba(157,170,218,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}


/* ==========================================
   WIZARD BACK — ABSOLUTE FINAL
   ========================================== */

html[data-svoi-theme]
#sheetRoot .wizard button[data-wizard-back] {
  -webkit-appearance: none !important;
  appearance: none !important;

  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 112px !important;
  max-width: none !important;

  height: 44px !important;
  min-height: 44px !important;

  margin: 14px 0 2px !important;
  padding: 0 17px 0 14px !important;

  gap: 10px !important;

  border-radius: 16px !important;

  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 700 !important;

  text-decoration: none !important;
  white-space: nowrap !important;

  overflow: visible !important;

  opacity: 1 !important;
}


/* аккуратный chevron */

html[data-svoi-theme]
#sheetRoot .wizard button[data-wizard-back]::before {
  content: "" !important;

  display: block !important;

  width: 8px !important;
  height: 8px !important;

  flex: 0 0 8px !important;

  border-left: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;

  transform: rotate(45deg) !important;

  margin-left: 2px !important;
}


/* текст */

html[data-svoi-theme]
#sheetRoot .wizard button[data-wizard-back] > span {
  display: inline !important;

  width: auto !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;

  color: inherit !important;

  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}


/* LIGHT */

html[data-svoi-theme="light"]
#sheetRoot .wizard button[data-wizard-back] {
  color: #303541 !important;

  background:
    rgba(255,255,255,.88) !important;

  border:
    1px solid rgba(255,255,255,1) !important;

  box-shadow:
    0 8px 22px rgba(61,54,88,.10),
    inset 0 1px 0 #fff !important;

  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}


/* DARK */

html[data-svoi-theme="dark"]
#sheetRoot .wizard button[data-wizard-back] {
  color: #eef0f6 !important;

  background:
    rgba(28,33,49,.88) !important;

  border:
    1px solid rgba(155,170,220,.18) !important;

  box-shadow:
    0 8px 22px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.05) !important;

  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}


/* ==========================================
   WIZARD BACK — ABSOLUTE FINAL
   ========================================== */

html[data-svoi-theme]
#sheetRoot .wizard button[data-wizard-back] {
  -webkit-appearance: none !important;
  appearance: none !important;

  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 112px !important;
  max-width: none !important;

  height: 44px !important;
  min-height: 44px !important;

  margin: 14px 0 2px !important;
  padding: 0 17px 0 14px !important;

  gap: 10px !important;

  border-radius: 16px !important;

  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 700 !important;

  text-decoration: none !important;
  white-space: nowrap !important;

  overflow: visible !important;

  opacity: 1 !important;
}


/* аккуратный chevron */

html[data-svoi-theme]
#sheetRoot .wizard button[data-wizard-back]::before {
  content: "" !important;

  display: block !important;

  width: 8px !important;
  height: 8px !important;

  flex: 0 0 8px !important;

  border-left: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;

  transform: rotate(45deg) !important;

  margin-left: 2px !important;
}


/* текст */

html[data-svoi-theme]
#sheetRoot .wizard button[data-wizard-back] > span {
  display: inline !important;

  width: auto !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;

  color: inherit !important;

  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}


/* LIGHT */

html[data-svoi-theme="light"]
#sheetRoot .wizard button[data-wizard-back] {
  color: #303541 !important;

  background:
    rgba(255,255,255,.88) !important;

  border:
    1px solid rgba(255,255,255,1) !important;

  box-shadow:
    0 8px 22px rgba(61,54,88,.10),
    inset 0 1px 0 #fff !important;

  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}


/* DARK */

html[data-svoi-theme="dark"]
#sheetRoot .wizard button[data-wizard-back] {
  color: #eef0f6 !important;

  background:
    rgba(28,33,49,.88) !important;

  border:
    1px solid rgba(155,170,220,.18) !important;

  box-shadow:
    0 8px 22px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.05) !important;

  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}


/* ==========================================
   WIZARD BACK — CLEAN DIV
   ========================================== */

html[data-svoi-theme] .wizard-back-clean {
  box-sizing: border-box !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: fit-content !important;
  min-width: 108px !important;
  height: 44px !important;

  margin: 15px 0 2px !important;
  padding: 0 16px 0 13px !important;

  gap: 7px !important;

  border-radius: 15px !important;

  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 700 !important;

  white-space: nowrap !important;

  cursor: pointer !important;

  -webkit-tap-highlight-color: transparent !important;
}


/* стрелка */

html[data-svoi-theme] .wizard-back-arrow {
  display: inline-block !important;

  margin-top: -2px !important;

  font-size: 26px !important;
  line-height: .75 !important;
  font-weight: 400 !important;
}


/* LIGHT */

html[data-svoi-theme="light"] .wizard-back-clean {
  color: #343844 !important;

  background:
    rgba(255,255,255,.88) !important;

  border:
    1px solid rgba(255,255,255,.98) !important;

  box-shadow:
    0 7px 20px rgba(66,56,94,.09),
    inset 0 1px 0 #fff !important;

  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}


/* DARK */

html[data-svoi-theme="dark"] .wizard-back-clean {
  color: #eef0f6 !important;

  background:
    rgba(28,33,49,.84) !important;

  border:
    1px solid rgba(155,170,220,.16) !important;

  box-shadow:
    0 7px 20px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.04) !important;

  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}


/* LIGHT SHEET — MORE READABLE */

html[data-svoi-theme="light"] #sheetRoot .sheet {
  background:
    linear-gradient(
      155deg,
      rgba(250,249,253,.97),
      rgba(244,244,250,.95)
    ) !important;

  backdrop-filter:
    blur(34px) saturate(115%) !important;

  -webkit-backdrop-filter:
    blur(34px) saturate(115%) !important;
}

html[data-svoi-theme="light"] #sheetRoot .sheet-wrap {
  background:
    rgba(40,42,55,.16) !important;

  backdrop-filter:
    blur(15px) !important;

  -webkit-backdrop-filter:
    blur(15px) !important;
}


/* ==========================================
   PLANNER — STEP 3 + RESULT FINAL
   ========================================== */

html[data-svoi-theme] .wizard-step {
  padding-bottom: 2px !important;
}

html[data-svoi-theme] .wizard-options {
  display: grid !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

html[data-svoi-theme] .wizard-option {
  min-height: 68px !important;
  padding: 11px 15px !important;
  border-radius: 20px !important;
}

html[data-svoi-theme] .wizard-emoji {
  width: 46px !important;
  height: 46px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
}


/* ГОТОВАЯ ИДЕЯ */

html[data-svoi-theme] .idea-result {
  padding: 22px !important;
  border-radius: 26px !important;
}

html[data-svoi-theme] .idea-result h2 {
  margin: 14px 0 8px !important;
  font-size: 27px !important;
  line-height: 1.1 !important;
  letter-spacing: -.025em !important;
}

html[data-svoi-theme] .idea-result > p {
  margin: 0 !important;
  line-height: 1.45 !important;
  color: var(--muted) !important;
}

html[data-svoi-theme] .idea-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;

  padding: 7px 11px !important;
  border-radius: 999px !important;

  color: var(--accent) !important;
  background: rgba(122,113,211,.10) !important;

  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .055em !important;
}


/* параметры результата */

html[data-svoi-theme] .result-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;

  margin: 18px 0 !important;
}

html[data-svoi-theme] .result-meta span {
  padding: 7px 10px !important;

  border-radius: 999px !important;

  color: var(--muted) !important;
  background: rgba(122,113,211,.07) !important;
  border: 1px solid var(--border) !important;

  font-size: 11px !important;
  font-weight: 650 !important;
}


/* две основные кнопки */

html[data-svoi-theme] .idea-result .action-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;

  gap: 9px !important;
}

html[data-svoi-theme] .idea-result .action-row button {
  min-height: 50px !important;
  border-radius: 16px !important;
}


/* изменить параметры */

html[data-svoi-theme] .idea-result [data-wizard-reset] {
  width: 100% !important;
  min-height: 44px !important;

  margin-top: 9px !important;

  border-radius: 15px !important;

  color: var(--muted) !important;
}


/* LIGHT */

html[data-svoi-theme="light"] .idea-result {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.96),
      rgba(248,247,252,.91)
    ) !important;

  border: 1px solid rgba(255,255,255,1) !important;

  box-shadow:
    0 14px 36px rgba(65,55,95,.08) !important;
}


/* DARK */

html[data-svoi-theme="dark"] .idea-result {
  background:
    linear-gradient(
      145deg,
      rgba(27,32,48,.90),
      rgba(13,17,27,.82)
    ) !important;

  border: 1px solid rgba(155,170,220,.15) !important;

  box-shadow:
    0 16px 38px rgba(0,0,0,.22) !important;
}


/* ==========================================
   SURPRISE — FINAL
   ========================================== */

html[data-svoi-theme] #sheetRoot .idea-result {
  position: relative !important;
  overflow: hidden !important;

  padding: 22px !important;
  border-radius: 26px !important;
}


/* LIGHT */

html[data-svoi-theme="light"] #sheetRoot .idea-result {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(247,247,252,.95)
    ) !important;

  border:
    1px solid rgba(255,255,255,1) !important;

  box-shadow:
    0 14px 36px rgba(66,56,95,.09) !important;
}


/* DARK */

html[data-svoi-theme="dark"] #sheetRoot .idea-result {
  background:
    linear-gradient(
      145deg,
      rgba(27,32,48,.92),
      rgba(13,17,27,.86)
    ) !important;

  border:
    1px solid rgba(155,170,220,.15) !important;

  box-shadow:
    0 17px 40px rgba(0,0,0,.22) !important;
}


/* ГОТОВО */

html[data-svoi-theme] #sheetRoot .idea-badge {
  display: inline-flex !important;
  align-items: center !important;

  gap: 7px !important;

  padding: 7px 11px !important;

  border-radius: 999px !important;

  color: var(--accent) !important;

  background:
    rgba(122,113,211,.10) !important;

  border:
    1px solid rgba(127,118,215,.12) !important;

  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .055em !important;
}


/* НАЗВАНИЕ ИДЕИ */

html[data-svoi-theme] #sheetRoot .idea-result h2 {
  margin: 15px 0 8px !important;

  font-size: 27px !important;
  line-height: 1.1 !important;
  letter-spacing: -.025em !important;
}

html[data-svoi-theme] #sheetRoot .idea-result p {
  margin: 0 0 18px !important;

  color: var(--muted) !important;

  font-size: 15px !important;
  line-height: 1.45 !important;
}


/* КНОПКИ */

html[data-svoi-theme]
#sheetRoot .idea-result .action-row {
  display: grid !important;

  grid-template-columns: 1fr !important;

  gap: 9px !important;

  width: 100% !important;
}

html[data-svoi-theme]
#sheetRoot .idea-result .action-row button {
  width: 100% !important;
  min-height: 52px !important;

  border-radius: 17px !important;
}


/* "ЕЩЁ ВАРИАНТ" */

html[data-svoi-theme]
#sheetRoot [data-surprise-again] {
  color: var(--text) !important;
}


/* "В КАЛЕНДАРЬ" */

html[data-svoi-theme]
#sheetRoot [data-save-surprise] {
  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #786fd6,
      #6382d2
    ) !important;
}


/* ==========================================
   HOME — FINAL POLISH
   ========================================== */

/* заголовки */

html[data-svoi-theme] .hello h1 {
  letter-spacing: -.035em !important;
}

html[data-svoi-theme] .home-primary-space,
html[data-svoi-theme] .home-friend-row {
  position: relative !important;
  overflow: hidden !important;

  width: 100% !important;

  color: var(--text) !important;

  backdrop-filter: blur(30px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(135%) !important;
}


/* ПАРА */

html[data-svoi-theme] .home-primary-space {
  min-height: 104px !important;

  padding: 17px 18px !important;

  border-radius: 27px !important;
}

html[data-svoi-theme="light"] .home-primary-space {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.82),
      rgba(248,247,252,.67)
    ) !important;

  border:
    1px solid rgba(255,255,255,.96) !important;

  box-shadow:
    0 16px 38px rgba(69,58,103,.09),
    inset 0 1px 0 #fff !important;
}

html[data-svoi-theme="dark"] .home-primary-space {
  background:
    linear-gradient(
      145deg,
      rgba(27,32,49,.80),
      rgba(13,17,27,.70)
    ) !important;

  border:
    1px solid rgba(157,171,220,.15) !important;

  box-shadow:
    0 18px 42px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}


/* мягкая сфера в карточке */

html[data-svoi-theme] .home-primary-space::after {
  content: "" !important;

  position: absolute !important;

  width: 180px !important;
  height: 180px !important;

  right: -90px !important;
  bottom: -100px !important;

  border-radius: 50% !important;

  pointer-events: none !important;

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(105,125,211,.18),
      transparent 68%
    ) !important;
}


/* иконка пары */

html[data-svoi-theme] .home-primary-icon {
  width: 52px !important;
  height: 52px !important;

  flex: 0 0 52px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 17px !important;

  color: var(--accent) !important;

  background:
    rgba(121,111,211,.10) !important;

  border:
    1px solid rgba(130,121,216,.14) !important;
}


/* ближайшее событие */

html[data-svoi-theme] .event-mini {
  border-radius: 23px !important;
}

html[data-svoi-theme] .event-mini.couple {
  border-left:
    2px solid rgba(126,113,211,.60) !important;
}

html[data-svoi-theme] .event-mini.friends {
  border-left:
    2px solid rgba(91,137,216,.65) !important;
}


/* ДРУЗЬЯ */

html[data-svoi-theme] .home-friend-row {
  min-height: 78px !important;

  padding: 13px 16px !important;

  border-radius: 23px !important;
}

html[data-svoi-theme="light"] .home-friend-row {
  background:
    rgba(255,255,255,.70) !important;

  border:
    1px solid rgba(255,255,255,.94) !important;

  box-shadow:
    0 12px 30px rgba(69,58,103,.07) !important;
}

html[data-svoi-theme="dark"] .home-friend-row {
  background:
    rgba(24,29,44,.72) !important;

  border:
    1px solid rgba(155,169,218,.13) !important;

  box-shadow:
    0 14px 32px rgba(0,0,0,.20) !important;
}

html[data-svoi-theme] .home-friend-icon {
  width: 46px !important;
  height: 46px !important;

  flex: 0 0 46px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 15px !important;

  color: var(--blue) !important;

  background:
    rgba(87,132,215,.09) !important;

  border:
    1px solid rgba(91,137,216,.13) !important;
}


/* НОВАЯ КОМПАНИЯ */

html[data-svoi-theme] .home-new-company {
  min-height: 60px !important;

  border-radius: 21px !important;

  color: var(--muted) !important;

  border:
    1px dashed rgba(126,116,214,.25) !important;
}

html[data-svoi-theme="light"] .home-new-company {
  background:
    rgba(255,255,255,.25) !important;
}

html[data-svoi-theme="dark"] .home-new-company {
  background:
    rgba(15,19,30,.28) !important;
}


/* + СОЗДАТЬ */

html[data-svoi-theme] .home-create-friends {
  min-height: 36px !important;

  padding: 0 12px !important;

  border-radius: 999px !important;

  color: var(--accent) !important;

  background:
    rgba(121,112,211,.08) !important;

  border:
    1px solid rgba(130,121,216,.10) !important;

  font-size: 12px !important;
  font-weight: 750 !important;
}


/* ==========================================
   FRIENDS HERO — COMPACT FINAL
   ========================================== */

html[data-svoi-theme]
.space-hero-v4.friends {
  min-height: 0 !important;
  height: auto !important;

  padding: 21px 20px !important;

  border-radius: 28px !important;
}


/* убираем дублирующие тексты */

html[data-svoi-theme]
.space-hero-v4.friends .space-hero-label,
html[data-svoi-theme]
.space-hero-v4.friends h2 {
  display: none !important;
}


/* количество участников становится главным */

html[data-svoi-theme]
.space-hero-v4.friends p {
  margin: 0 !important;

  color: var(--text) !important;

  font-size: 21px !important;
  line-height: 1.15 !important;
  font-weight: 750 !important;

  letter-spacing: -.02em !important;
}


/* аватары + приглашение */

html[data-svoi-theme]
.space-hero-v4.friends .space-hero-bottom {
  display: flex !important;
  align-items: center !important;

  gap: 11px !important;

  margin-top: 17px !important;
}


/* кнопка компактная */

html[data-svoi-theme]
.space-hero-v4.friends .space-hero-invite {
  min-width: 0 !important;
  width: auto !important;

  min-height: 44px !important;

  padding: 0 15px !important;

  border-radius: 15px !important;
}


/* декоративная сфера меньше */

html[data-svoi-theme]
.space-hero-v4.friends::before {
  width: 170px !important;
  height: 170px !important;

  right: -65px !important;
  top: -70px !important;
}


/* === BOTTOM NAV SAFE SPACE — FINAL === */

html[data-svoi-theme] .page {
  padding-bottom:
    calc(205px + env(safe-area-inset-bottom))
    !important;
}

@media (max-width: 520px) {
  html[data-svoi-theme] .page {
    padding-bottom:
      calc(220px + env(safe-area-inset-bottom))
      !important;
  }
}

html[data-svoi-theme],
html[data-svoi-theme] body {
  scroll-padding-bottom:
    calc(180px + env(safe-area-inset-bottom));
}


/* === EVENT TIME RANGE === */

html[data-svoi-theme] .event-time-range {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  gap: 10px !important;
  width: 100% !important;
}

html[data-svoi-theme] .event-time-range .field {
  min-width: 0 !important;
  margin: 0 !important;
}

html[data-svoi-theme] .event-time-range input {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  font-size: 16px !important;
  border-radius: 16px !important;
}

html[data-svoi-theme] .event-time-range .field > span {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
}


/* ==========================================
   WISHES — PHOTO CARDS
   ========================================== */

html[data-svoi-theme] .wish-row {
  display: block !important;
  overflow: hidden !important;

  padding: 0 !important;

  border-radius: 24px !important;
}


/* фото */

html[data-svoi-theme] .wish-photo {
  width: 100% !important;
  height: 185px !important;

  overflow: hidden !important;

  background: var(--glass2) !important;
}

html[data-svoi-theme] .wish-photo img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
}


/* содержимое */

html[data-svoi-theme] .wish-row-content {
  display: grid !important;

  grid-template-columns:
    40px minmax(0, 1fr) !important;

  column-gap: 11px !important;
  row-gap: 10px !important;

  align-items: start !important;

  padding: 15px !important;
}


/* чек */

html[data-svoi-theme] .wish-row-content .wish-check {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;

  margin-top: 1px !important;
}


/* название + заметка */

html[data-svoi-theme] .wish-row-content .wish-copy {
  grid-column: 2 !important;

  min-width: 0 !important;
}

html[data-svoi-theme] .wish-copy b {
  display: block !important;

  font-size: 16px !important;
  line-height: 1.25 !important;
}

html[data-svoi-theme] .wish-copy small {
  display: block !important;

  margin-top: 5px !important;

  color: var(--muted) !important;

  line-height: 1.4 !important;
}


/* действия */

html[data-svoi-theme] .wish-actions {
  grid-column: 2 !important;

  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;

  gap: 7px !important;
}


/* ссылка */

html[data-svoi-theme] .wish-link-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 4px !important;

  min-height: 36px !important;

  padding: 0 11px !important;

  border-radius: 12px !important;

  color: var(--accent) !important;
  text-decoration: none !important;

  background:
    rgba(121,112,211,.09) !important;

  border:
    1px solid rgba(121,112,211,.13) !important;

  font-size: 12px !important;
  font-weight: 750 !important;
}


/* в план */

html[data-svoi-theme] .wish-actions .wish-plan-btn {
  width: auto !important;
  min-height: 36px !important;

  padding: 0 11px !important;

  border-radius: 12px !important;
}


/* удалить */

html[data-svoi-theme] .wish-actions .wish-delete-btn {
  width: 36px !important;
  height: 36px !important;

  border-radius: 12px !important;
}


/* выполненная хотелка */

html[data-svoi-theme] .wish-row.done .wish-photo img {
  opacity: .55 !important;
  filter: saturate(.55) !important;
}


/* ==========================================
   WISH PHOTO PICKER
   ========================================== */

html[data-svoi-theme] .wish-photo-picker {
  display: grid !important;
  gap: 10px !important;
}

html[data-svoi-theme] .wish-photo-picker > .secondary {
  min-height: 50px !important;

  border-radius: 17px !important;

  border:
    1px dashed rgba(121,112,211,.25) !important;
}


/* preview */

html[data-svoi-theme] .wish-photo-preview {
  position: relative !important;
  overflow: hidden !important;

  width: 100% !important;

  border-radius: 20px !important;

  background: var(--glass2) !important;

  border:
    1px solid var(--border) !important;
}

html[data-svoi-theme] .wish-photo-preview[hidden] {
  display: none !important;
}

html[data-svoi-theme] .wish-photo-preview img {
  display: block !important;

  width: 100% !important;
  height: 210px !important;

  object-fit: cover !important;
}


/* remove photo */

html[data-svoi-theme]
.wish-photo-preview [data-wish-photo-remove] {
  position: absolute !important;

  right: 10px !important;
  bottom: 10px !important;

  display: inline-flex !important;
  align-items: center !important;

  gap: 6px !important;

  min-height: 38px !important;

  padding: 0 12px !important;

  border-radius: 13px !important;

  color: #fff !important;

  background:
    rgba(20,22,31,.72) !important;

  backdrop-filter:
    blur(14px) !important;

  -webkit-backdrop-filter:
    blur(14px) !important;

  border:
    1px solid rgba(255,255,255,.15) !important;

  font-size: 12px !important;
  font-weight: 700 !important;
}


/* === WISH PHOTO CARD — COMPACT === */

html[data-svoi-theme] .wish-row.has-photo {
  display: grid !important;
  grid-template-columns: 96px minmax(0,1fr) !important;
  gap: 13px !important;

  padding: 14px !important;
  align-items: start !important;
}

html[data-svoi-theme] .wish-row.has-photo .wish-photo {
  width: 96px !important;
  height: 96px !important;

  border-radius: 18px !important;
  overflow: hidden !important;

  align-self: start !important;
}

html[data-svoi-theme] .wish-row.has-photo .wish-photo img {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center !important;
}

html[data-svoi-theme] .wish-row.has-photo .wish-row-content {
  padding: 0 !important;

  grid-template-columns: 34px minmax(0,1fr) !important;
  column-gap: 9px !important;
  row-gap: 8px !important;
}

html[data-svoi-theme] .wish-row.has-photo .wish-actions {
  gap: 6px !important;
}


/* ==========================================
   WISH PHOTO — FULLSCREEN VIEWER
   ========================================== */

html[data-svoi-theme] #sheetRoot .sheet.wish-photo-lightbox {
  width: 100vw !important;
  max-width: none !important;

  height: 100dvh !important;
  max-height: 100dvh !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: rgba(5,7,12,.98) !important;

  box-shadow: none !important;

  overflow: hidden !important;
}


/* убираем стандартную ручку */

html[data-svoi-theme]
#sheetRoot .sheet.wish-photo-lightbox
.sheet-handle {
  display: none !important;
}


/* сам viewer */

html[data-svoi-theme] .wish-photo-viewer {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding:
    calc(60px + env(safe-area-inset-top))
    14px
    calc(70px + env(safe-area-inset-bottom))
    !important;

  box-sizing: border-box !important;
}


/* большое фото */

html[data-svoi-theme] .wish-photo-viewer > img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 900px !important;
  max-height: 100% !important;

  object-fit: contain !important;

  border-radius: 18px !important;
}


/* закрыть */

html[data-svoi-theme] .wish-photo-viewer-close {
  position: absolute !important;

  top: calc(14px + env(safe-area-inset-top)) !important;
  right: 14px !important;

  z-index: 5 !important;

  width: 44px !important;
  height: 44px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  border-radius: 50% !important;

  color: #fff !important;
  background: rgba(35,38,48,.72) !important;

  border:
    1px solid rgba(255,255,255,.14) !important;

  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;

  font-size: 30px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
}


/* название снизу */

html[data-svoi-theme] .wish-photo-viewer-title {
  position: absolute !important;

  left: 20px !important;
  right: 20px !important;
  bottom:
    calc(18px + env(safe-area-inset-bottom))
    !important;

  color: rgba(255,255,255,.94) !important;

  text-align: center !important;

  font-size: 14px !important;
  font-weight: 650 !important;
}


/* === WISH ACTIONS — CLEAN FINAL === */

html[data-svoi-theme] .wish-photo {
  cursor: pointer !important;
  pointer-events: auto !important;
}

html[data-svoi-theme] .wish-photo img {
  pointer-events: none !important;
}

html[data-svoi-theme] .wish-edit-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  width: auto !important;
  min-height: 36px !important;

  padding: 0 11px !important;

  border-radius: 12px !important;

  color: var(--text) !important;
  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;

  font-size: 12px !important;
  font-weight: 700 !important;
}

html[data-svoi-theme] .wish-edit-btn span {
  display: inline !important;
}


/* фото в форме редактирования */

html[data-svoi-theme] #wishEditForm .wish-photo-preview {
  display: block !important;
  overflow: hidden !important;
  border-radius: 20px !important;
}

html[data-svoi-theme] #wishEditForm .wish-photo-preview[hidden] {
  display: none !important;
}

html[data-svoi-theme] #wishEditForm .wish-photo-preview img {
  width: 100% !important;
  height: 190px !important;
  object-fit: cover !important;
}


/* удалить фото — маленькая кнопка сверху */

html[data-svoi-theme]
#wishEditForm [data-wish-edit-photo-remove] {
  position: absolute !important;

  top: 10px !important;
  right: 10px !important;
  bottom: auto !important;

  width: 42px !important;
  height: 42px !important;

  padding: 0 !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 14px !important;

  color: #fff !important;
  background: rgba(19,21,29,.72) !important;

  border: 1px solid rgba(255,255,255,.15) !important;

  font-size: 0 !important;
}

html[data-svoi-theme]
#wishEditForm [data-wish-edit-photo-remove] .icon {
  width: 17px !important;
  height: 17px !important;
}


/* заменить фото */

html[data-svoi-theme]
#wishEditForm [data-wish-edit-photo-pick] {
  min-height: 46px !important;

  border-radius: 15px !important;

  border: 1px solid var(--border) !important;
  background: var(--glass2) !important;

  font-size: 14px !important;
  font-weight: 700 !important;
}


/* ==========================================
   WISH CARD ACTIONS — FINAL ALIGNMENT
   ========================================== */

html[data-svoi-theme] .wish-actions {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr)
    42px !important;

  gap: 7px !important;
  width: 100% !important;
  align-items: stretch !important;
}

html[data-svoi-theme] .wish-actions .wish-plan-btn,
html[data-svoi-theme] .wish-actions .wish-edit-btn {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;

  padding: 0 9px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 6px !important;

  border-radius: 13px !important;

  font-size: 12px !important;
  font-weight: 750 !important;

  white-space: nowrap !important;
}

html[data-svoi-theme] .wish-actions .wish-delete-btn {
  width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;

  padding: 0 !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 13px !important;
}


/* чуть больше места справа от фото */

html[data-svoi-theme] .wish-row.has-photo {
  grid-template-columns: 88px minmax(0,1fr) !important;
  gap: 12px !important;
}

html[data-svoi-theme] .wish-row.has-photo .wish-photo {
  width: 88px !important;
  height: 88px !important;
}


/* ==========================================
   PHOTO VIEWER — CLOSE BUTTON
   ========================================== */

html[data-svoi-theme] .wish-photo-viewer-close {
  top: calc(env(safe-area-inset-top) + 18px) !important;
  right: 18px !important;

  width: 52px !important;
  height: 52px !important;

  border-radius: 17px !important;

  background: rgba(28,31,40,.88) !important;
  border: 1px solid rgba(255,255,255,.18) !important;

  box-shadow:
    0 8px 26px rgba(0,0,0,.32) !important;

  font-size: 31px !important;
  line-height: 1 !important;

  cursor: pointer !important;
}


/* ==========================================
   WISH CARD — PREMIUM FINAL
   ========================================== */

html[data-svoi-theme] .wish-row.has-photo {
  position: relative !important;

  display: grid !important;
  grid-template-columns: 104px minmax(0,1fr) !important;
  gap: 15px !important;

  padding: 15px !important;

  border-radius: 26px !important;
}


/* PHOTO */

html[data-svoi-theme] .wish-row.has-photo .wish-photo {
  width: 104px !important;
  height: 104px !important;

  border-radius: 20px !important;
  overflow: hidden !important;

  box-shadow:
    0 8px 22px rgba(0,0,0,.16) !important;
}

html[data-svoi-theme] .wish-row.has-photo .wish-photo img {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
}


/* CONTENT */

html[data-svoi-theme] .wish-row.has-photo .wish-row-content {
  display: block !important;

  min-width: 0 !important;

  padding: 2px 0 0 !important;
}


/* CHECK — top right */

html[data-svoi-theme] .wish-row.has-photo .wish-check {
  position: absolute !important;

  top: 15px !important;
  right: 15px !important;

  width: 32px !important;
  height: 32px !important;

  margin: 0 !important;

  border-radius: 50% !important;

  background: rgba(120,113,214,.08) !important;
  border: 1px solid rgba(135,126,220,.20) !important;
}


/* TEXT */

html[data-svoi-theme] .wish-row.has-photo .wish-copy {
  display: block !important;

  padding-right: 38px !important;
}

html[data-svoi-theme] .wish-row.has-photo .wish-copy b {
  font-size: 18px !important;
  line-height: 1.18 !important;
  letter-spacing: -.015em !important;
}

html[data-svoi-theme] .wish-row.has-photo .wish-copy small {
  margin-top: 7px !important;

  font-size: 13px !important;
  line-height: 1.35 !important;
}


/* ACTIONS */

html[data-svoi-theme] .wish-row.has-photo .wish-actions {
  display: grid !important;

  grid-template-columns:
    minmax(0,1fr)
    42px
    42px !important;

  gap: 7px !important;

  margin-top: 14px !important;
}


/* В ПЛАН */

html[data-svoi-theme]
.wish-row.has-photo .wish-plan-btn {
  width: 100% !important;
  height: 42px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 7px !important;

  padding: 0 13px !important;

  border-radius: 14px !important;

  color: #c8c3ff !important;

  background:
    linear-gradient(
      135deg,
      rgba(112,99,213,.20),
      rgba(82,111,196,.14)
    ) !important;

  border:
    1px solid rgba(129,119,220,.23) !important;

  font-size: 13px !important;
  font-weight: 750 !important;
}


/* EDIT — icon only */

html[data-svoi-theme]
.wish-row.has-photo .wish-edit-btn {
  width: 42px !important;
  height: 42px !important;

  padding: 0 !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 14px !important;

  color: var(--text) !important;
  background: var(--glass2) !important;

  border: 1px solid var(--border) !important;
}

html[data-svoi-theme]
.wish-row.has-photo .wish-edit-btn span {
  display: none !important;
}


/* DELETE */

html[data-svoi-theme]
.wish-row.has-photo .wish-delete-btn {
  width: 42px !important;
  height: 42px !important;

  padding: 0 !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 14px !important;

  color: #ff6f81 !important;

  background:
    rgba(164,54,72,.10) !important;

  border:
    1px solid rgba(213,76,96,.18) !important;
}


/* LIGHT */

html[data-svoi-theme="light"]
.wish-row.has-photo {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.82),
      rgba(248,247,253,.68)
    ) !important;
}


/* DARK */

html[data-svoi-theme="dark"]
.wish-row.has-photo {
  background:
    linear-gradient(
      145deg,
      rgba(25,30,45,.84),
      rgba(13,17,27,.76)
    ) !important;
}


/* ==========================================
   TRUTH GAME — CATEGORIES + MODES
   ========================================== */

/* категории */

html[data-svoi-theme] .truth-category-scroll {
  display: flex !important;
  align-items: center !important;

  gap: 8px !important;

  width: calc(100% + 18px) !important;

  margin: 8px -18px 14px 0 !important;
  padding: 2px 18px 5px 0 !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  scrollbar-width: none !important;

  -webkit-overflow-scrolling: touch !important;
}

html[data-svoi-theme] .truth-category-scroll::-webkit-scrollbar {
  display: none !important;
}

html[data-svoi-theme] .truth-category-chip {
  flex: 0 0 auto !important;

  min-height: 40px !important;

  padding: 0 14px !important;

  border-radius: 14px !important;

  color: var(--muted) !important;

  background: var(--glass2) !important;

  border: 1px solid var(--border) !important;

  font-size: 12px !important;
  font-weight: 750 !important;

  white-space: nowrap !important;

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease !important;
}

html[data-svoi-theme] .truth-category-chip.active {
  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #776fd3,
      #617fd0
    ) !important;

  border-color: transparent !important;

  box-shadow:
    0 8px 22px rgba(72,76,157,.22) !important;
}


/* 18+ */

html[data-svoi-theme] .truth-category-chip.adult {
  color: #d98a9b !important;

  border-color:
    rgba(205,91,113,.16) !important;

  background:
    rgba(148,62,81,.07) !important;
}

html[data-svoi-theme] .truth-category-chip.adult.active {
  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #a84f70,
      #7b4f9e
    ) !important;

  border-color: transparent !important;

  box-shadow:
    0 8px 22px rgba(118,50,85,.24) !important;
}


/* ПРАВДА / ДЕЙСТВИЕ / АВТО */

html[data-svoi-theme] .segmented {
  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0,1fr)) !important;

  gap: 5px !important;

  padding: 5px !important;

  border-radius: 18px !important;

  background: var(--glass2) !important;

  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .segmented button {
  min-width: 0 !important;
  min-height: 42px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 5px !important;

  padding: 0 8px !important;

  border-radius: 13px !important;

  color: var(--muted) !important;

  background: transparent !important;

  font-size: 12px !important;
  font-weight: 750 !important;
}

html[data-svoi-theme] .segmented button.active {
  color: var(--text) !important;

  background:
    rgba(255,255,255,.09) !important;

  box-shadow:
    0 5px 16px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.08)
    !important;
}


/* вопрос */

html[data-svoi-theme] .truth-card {
  margin-top: 15px !important;

  min-height: 260px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  padding: 26px 22px !important;

  border-radius: 29px !important;
}

html[data-svoi-theme] .truth-card .mode-label {
  margin-bottom: 15px !important;

  font-size: 10px !important;
  font-weight: 850 !important;

  letter-spacing: .09em !important;
}

html[data-svoi-theme] .truth-card h2 {
  margin: 0 !important;

  font-size: 27px !important;
  line-height: 1.2 !important;

  letter-spacing: -.025em !important;
}


/* следующая карточка */

html[data-svoi-theme] [data-next-truth] {
  min-height: 54px !important;

  margin-top: 11px !important;

  border-radius: 18px !important;
}


/* 18+ confirmation */

html[data-svoi-theme] .adult-confirm .confirm-icon {
  width: 62px !important;
  height: 62px !important;

  display: grid !important;
  place-items: center !important;

  margin: 2px auto 14px !important;

  border-radius: 20px !important;

  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #a84f70,
      #76509b
    ) !important;

  font-size: 17px !important;
  font-weight: 850 !important;

  box-shadow:
    0 10px 28px rgba(116,52,84,.23) !important;
}


/* ==========================================
   WHO IS MORE LIKELY — TOOLBAR
   ========================================== */

html[data-svoi-theme] .likely-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 10px !important;

  margin: 8px 0 12px !important;
}

html[data-svoi-theme] .likely-counter {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 38px !important;
  padding: 0 13px !important;

  border-radius: 13px !important;

  color: var(--muted) !important;
  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;

  font-size: 12px !important;
  font-weight: 750 !important;
}

html[data-svoi-theme] .likely-auto {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 6px !important;

  min-height: 38px !important;
  padding: 0 13px !important;

  border-radius: 13px !important;

  color: var(--muted) !important;
  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;

  font-size: 12px !important;
  font-weight: 750 !important;
}

html[data-svoi-theme] .likely-auto.active {
  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #766ed3,
      #617fd0
    ) !important;

  border-color: transparent !important;

  box-shadow:
    0 7px 20px rgba(70,76,158,.22) !important;
}

html[data-svoi-theme] .truth-card.likely {
  min-height: 285px !important;
}


/* ==========================================
   WHO IS MORE LIKELY — CLEAN FINAL
   ========================================== */

html[data-svoi-theme] .likely-toolbar {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: center !important;
  gap: 9px !important;

  margin: 8px 0 12px !important;
}

html[data-svoi-theme] .likely-counter {
  min-width: 64px !important;
  height: 42px !important;
  min-height: 42px !important;

  padding: 0 13px !important;

  border-radius: 14px !important;

  font-size: 13px !important;
  font-weight: 800 !important;
}

html[data-svoi-theme] .likely-auto {
  justify-self: end !important;

  width: auto !important;
  min-width: 0 !important;

  height: 42px !important;
  min-height: 42px !important;

  padding: 0 14px !important;

  border-radius: 14px !important;

  font-size: 13px !important;
}


/* карточка вопроса компактнее */

html[data-svoi-theme] .truth-card.likely {
  min-height: 220px !important;

  margin-top: 0 !important;

  padding: 24px 22px !important;

  justify-content: center !important;

  border-radius: 27px !important;
}

html[data-svoi-theme] .truth-card.likely .mode-label {
  margin-bottom: 18px !important;
}

html[data-svoi-theme] .truth-card.likely h2 {
  font-size: 26px !important;
  line-height: 1.18 !important;
  letter-spacing: -.025em !important;
}


/* следующая кнопка ближе к карточке */

html[data-svoi-theme] [data-next-likely] {
  min-height: 54px !important;

  margin-top: 10px !important;

  border-radius: 18px !important;
}


/* ==========================================
   WHO IS MORE LIKELY — FINAL POLISH
   ========================================== */

html[data-svoi-theme] .likely-toolbar {
  display: grid !important;
  grid-template-columns: 60px 1fr !important;
  align-items: center !important;
  gap: 8px !important;

  margin: 6px 0 10px !important;
}

html[data-svoi-theme] .likely-counter {
  width: 60px !important;
  min-width: 60px !important;

  height: 38px !important;
  min-height: 38px !important;

  padding: 0 !important;

  border-radius: 13px !important;

  font-size: 12px !important;
  font-weight: 800 !important;
}

html[data-svoi-theme] .likely-auto {
  justify-self: end !important;

  width: auto !important;
  min-width: 0 !important;

  height: 38px !important;
  min-height: 38px !important;

  padding: 0 12px !important;

  border-radius: 13px !important;

  gap: 5px !important;

  font-size: 12px !important;
  font-weight: 800 !important;
}

html[data-svoi-theme] .likely-auto svg {
  width: 13px !important;
  height: 13px !important;
}


/* Карточка */

html[data-svoi-theme] .truth-card.likely {
  height: 198px !important;
  min-height: 198px !important;
  max-height: 198px !important;

  margin: 0 !important;

  padding: 20px !important;

  border-radius: 25px !important;

  justify-content: center !important;
}

html[data-svoi-theme] .truth-card.likely .mode-label {
  width: fit-content !important;

  margin: 0 0 15px !important;

  padding: 7px 10px !important;

  border-radius: 12px !important;

  font-size: 9px !important;
  font-weight: 850 !important;

  line-height: 1 !important;
  letter-spacing: .11em !important;
}

html[data-svoi-theme] .truth-card.likely h2 {
  margin: 0 !important;

  font-size: 23px !important;
  line-height: 1.16 !important;
  letter-spacing: -.025em !important;
}


/* Кнопка следующего вопроса */

html[data-svoi-theme] [data-next-likely] {
  height: 50px !important;
  min-height: 50px !important;

  margin-top: 8px !important;

  border-radius: 17px !important;

  font-size: 15px !important;
  font-weight: 800 !important;
}


/* ==========================================
   LIKELY — CENTER PURPLE LABEL
   ========================================== */

html[data-svoi-theme] .truth-card.likely {
  align-items: center !important;
  text-align: center !important;
}

html[data-svoi-theme] .truth-card.likely .mode-label {
  align-self: center !important;
  margin: 0 auto 16px !important;
  text-align: center !important;
}

html[data-svoi-theme] .truth-card.likely h2 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ==========================================
   LIKELY — LABEL POLISH
   ========================================== */

html[data-svoi-theme] .truth-card.likely .mode-label {
  width: auto !important;
  max-width: 88% !important;

  padding: 6px 12px !important;

  border-radius: 999px !important;

  margin: 0 auto 14px !important;

  font-size: 8.5px !important;
  font-weight: 850 !important;
  line-height: 1 !important;

  letter-spacing: .105em !important;

  background:
    rgba(113, 91, 214, .10) !important;

  border:
    1px solid rgba(139, 116, 235, .16) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}


/* ==========================================
   GAMES HOME — CLEAN GRID
   ========================================== */

html[data-svoi-theme] .game-grid {
  margin-top: 18px !important;
  gap: 12px !important;
}

html[data-svoi-theme] .game-card {
  min-height: 178px !important;
  padding: 20px !important;
  border-radius: 24px !important;
}

html[data-svoi-theme] .game-card.large {
  min-height: 190px !important;
}

html[data-svoi-theme] .game-card strong {
  font-size: 18px !important;
  line-height: 1.15 !important;
}

html[data-svoi-theme] .game-card > span:last-child {
  font-size: 13px !important;
  line-height: 1.35 !important;
}

html[data-svoi-theme] .game-icon {
  width: 48px !important;
  height: 48px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 15px !important;

  font-size: 16px !important;
  font-weight: 850 !important;
}


/* ==========================================
   QUICK GAMES — PLAY SCREEN
   ========================================== */

html[data-svoi-theme] .truth-card.quick-game-card {
  min-height: 250px !important;

  margin-top: 8px !important;
  padding: 24px 22px !important;

  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;

  border-radius: 27px !important;
}

html[data-svoi-theme] .quick-game-card .mode-label {
  align-self: center !important;

  width: fit-content !important;

  margin: 0 auto 18px !important;
  padding: 7px 12px !important;

  border-radius: 999px !important;

  color: #9888f2 !important;
  background: rgba(113,91,214,.10) !important;
  border: 1px solid rgba(139,116,235,.16) !important;

  font-size: 9px !important;
  font-weight: 850 !important;
  line-height: 1 !important;

  letter-spacing: .10em !important;
}

html[data-svoi-theme] .quick-game-card h2 {
  max-width: 100% !important;

  margin: 0 auto !important;

  text-align: center !important;

  font-size: 25px !important;
  line-height: 1.18 !important;
  letter-spacing: -.025em !important;
}

html[data-svoi-theme] [data-next-quick-game] {
  min-height: 52px !important;

  margin-top: 9px !important;

  border-radius: 18px !important;
}


/* WHAT DO WE DO — CATEGORIES */

html[data-svoi-theme] .surprise-category-scroll {
  width: calc(100% + 20px) !important;
  margin: 2px -20px 14px 0 !important;
  padding-top: 2px !important;
  padding-bottom: 5px !important;
}


/* ==========================================
   WHAT DO WE DO — SURPRISE BUTTON
   ========================================== */

html[data-svoi-theme] .surprise-random-btn {
  width: 100% !important;
  min-height: 44px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 7px !important;

  margin: 0 0 11px !important;

  border-radius: 15px !important;

  color: #9b8cf2 !important;

  background:
    rgba(113, 91, 214, .09) !important;

  border:
    1px solid rgba(139, 116, 235, .16) !important;

  font-size: 13px !important;
  font-weight: 800 !important;
}

html[data-svoi-theme] .surprise-random-btn:active {
  transform: scale(.985) !important;
}


/* ==========================================
   GAMES HOME — FINAL UNIFIED GRID
   ========================================== */

html[data-svoi-theme] .game-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  gap: 10px !important;

  margin-top: 16px !important;
  padding-bottom: 10px !important;
}


/* Все игровые карточки */

html[data-svoi-theme] .game-card {
  position: relative !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 168px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;

  gap: 7px !important;

  padding: 17px !important;

  text-align: left !important;

  border-radius: 23px !important;

  overflow: hidden !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;

  box-shadow:
    0 10px 30px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.055)
    !important;
}


/* Большая первая */

html[data-svoi-theme] .game-card.large {
  grid-column: 1 / -1 !important;

  min-height: 176px !important;

  padding: 20px !important;
}


/* Названия — старые b и новые strong одинаково */

html[data-svoi-theme] .game-card b,
html[data-svoi-theme] .game-card strong {
  display: block !important;

  margin-top: 4px !important;

  color: var(--text) !important;

  font-size: 17px !important;
  font-weight: 820 !important;

  line-height: 1.12 !important;
  letter-spacing: -.02em !important;
}


/* Описания — и small, и span */

html[data-svoi-theme] .game-card small,
html[data-svoi-theme] .game-card > span:last-child:not(.game-icon) {
  display: block !important;

  margin-top: 0 !important;

  color: var(--muted) !important;

  font-size: 12px !important;
  font-weight: 560 !important;

  line-height: 1.3 !important;
}


/* Иконки */

html[data-svoi-theme] .game-card .game-icon {
  width: 43px !important;
  height: 43px !important;

  flex: 0 0 43px !important;

  display: grid !important;
  place-items: center !important;

  margin-bottom: 3px !important;

  border-radius: 14px !important;

  color: #9184e9 !important;

  background:
    rgba(112, 93, 211, .10) !important;

  border:
    1px solid rgba(137, 119, 225, .14) !important;

  font-size: 15px !important;
  font-weight: 850 !important;
}


/* Правда или действие — чуть выразительнее */

html[data-svoi-theme] .game-card[data-truth] {
  background:
    linear-gradient(
      135deg,
      rgba(112,93,211,.10),
      rgba(90,122,205,.055)
    ),
    var(--glass2) !important;
}

html[data-svoi-theme] .game-card[data-truth] .game-icon {
  width: 48px !important;
  height: 48px !important;

  border-radius: 16px !important;

  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #756ed0,
      #6680cb
    ) !important;

  border: 0 !important;

  box-shadow:
    0 8px 20px rgba(75,78,157,.20) !important;
}


/* Что делаем? */

html[data-svoi-theme] .game-card[data-surprise] .game-icon {
  color: #7295ca !important;
  background: rgba(85,125,185,.09) !important;
}


/* Что выберешь */

html[data-svoi-theme] .game-card[data-would-you-rather] .game-icon {
  color: #8c81df !important;
}


/* Я никогда не */

html[data-svoi-theme] .game-card[data-never-have-i-ever] .game-icon {
  font-size: 19px !important;
}


/* Красный флаг */

html[data-svoi-theme] .game-card[data-red-flag] .game-icon {
  color: #ca7384 !important;
  background: rgba(183,82,103,.08) !important;
}


/* Знаешь меня */

html[data-svoi-theme] .game-card[data-know-me] .game-icon {
  font-size: 19px !important;
}


/* Оцени */

html[data-svoi-theme] .game-card[data-rate-it] .game-icon {
  font-size: 13px !important;
}


/* Нажатие */

html[data-svoi-theme] .game-card:active {
  transform: scale(.975) !important;
}


/* На маленьких экранах */

@media (max-width: 370px) {
  html[data-svoi-theme] .game-grid {
    gap: 8px !important;
  }

  html[data-svoi-theme] .game-card {
    min-height: 158px !important;
    padding: 15px !important;
  }

  html[data-svoi-theme] .game-card b,
  html[data-svoi-theme] .game-card strong {
    font-size: 16px !important;
  }
}


/* ==========================================
   COUPLE SPACE — V1
   ========================================== */

html[data-svoi-theme] .couple-room-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 14px !important;

  margin: 4px 0 18px !important;
}

html[data-svoi-theme] .couple-room-head small {
  display: block !important;

  margin-bottom: 3px !important;

  color: var(--muted) !important;

  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: .13em !important;
}

html[data-svoi-theme] .couple-room-head h1 {
  margin: 0 !important;

  font-size: 30px !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em !important;
}


/* hero */

html[data-svoi-theme] .couple-hero {
  position: relative !important;

  padding: 23px !important;

  border-radius: 29px !important;

  overflow: hidden !important;

  background:
    radial-gradient(
      circle at 88% 10%,
      rgba(126,105,211,.17),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.025)
    ),
    var(--glass2) !important;

  border: 1px solid var(--border) !important;

  box-shadow:
    0 15px 38px rgba(0,0,0,.07),
    inset 0 1px 0 rgba(255,255,255,.06)
    !important;
}

html[data-svoi-theme] .couple-hero h2 {
  max-width: 280px !important;

  margin: 10px 0 7px !important;

  font-size: 27px !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
}

html[data-svoi-theme] .couple-hero p {
  max-width: 310px !important;

  margin: 0 !important;

  color: var(--muted) !important;

  font-size: 13px !important;
  line-height: 1.42 !important;
}

html[data-svoi-theme] .couple-date-button {
  width: 100% !important;
  min-height: 52px !important;

  margin-top: 19px !important;

  border-radius: 18px !important;
}


/* functions */

html[data-svoi-theme] .couple-feature-grid {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0,1fr)) !important;

  gap: 10px !important;

  margin-top: 13px !important;
}

html[data-svoi-theme] .couple-feature-card {
  min-width: 0 !important;
  min-height: 150px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  padding: 17px !important;

  text-align: left !important;

  border-radius: 23px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;

  box-shadow:
    0 9px 27px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.05)
    !important;
}

html[data-svoi-theme] .couple-feature-card:active {
  transform: scale(.975) !important;
}

html[data-svoi-theme] .couple-feature-icon {
  width: 42px !important;
  height: 42px !important;

  display: grid !important;
  place-items: center !important;

  margin-bottom: 13px !important;

  border-radius: 14px !important;

  color: #9385e9 !important;

  background:
    rgba(112,93,211,.10) !important;

  border:
    1px solid rgba(137,119,225,.14) !important;
}

html[data-svoi-theme] .couple-feature-card b {
  margin-bottom: 5px !important;

  color: var(--text) !important;

  font-size: 16px !important;
  line-height: 1.14 !important;
}

html[data-svoi-theme] .couple-feature-card small {
  color: var(--muted) !important;

  font-size: 11px !important;
  line-height: 1.3 !important;
}


/* lower actions */

html[data-svoi-theme] .couple-next-head {
  margin-top: 25px !important;
}

html[data-svoi-theme] .couple-people-head {
  margin-top: 26px !important;
}

html[data-svoi-theme] .couple-secondary-actions {
  display: grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap: 9px !important;

  padding-bottom: 12px !important;
}

html[data-svoi-theme] .couple-secondary-actions button {
  min-height: 48px !important;

  border-radius: 16px !important;
}


/* ==========================================
   COUPLE — MEMORIES
   ========================================== */

html[data-svoi-theme] .memory-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 10px !important;
  padding-bottom: 16px !important;
}

html[data-svoi-theme] .memory-card {
  position: relative !important;
  overflow: hidden !important;

  border-radius: 22px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;

  box-shadow:
    0 9px 28px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.05)
    !important;
}

html[data-svoi-theme] .memory-photo {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;

  display: block !important;

  padding: 0 !important;

  overflow: hidden !important;

  background: var(--glass2) !important;
  border: 0 !important;
}

html[data-svoi-theme] .memory-photo img {
  width: 100% !important;
  height: 100% !important;

  display: block !important;

  object-fit: cover !important;
}

html[data-svoi-theme] .memory-photo-empty {
  display: grid !important;
  place-items: center !important;

  color: #9285e9 !important;

  background:
    radial-gradient(
      circle at 70% 20%,
      rgba(119,99,211,.18),
      transparent 45%
    ),
    var(--glass2) !important;
}

html[data-svoi-theme] .memory-card-body {
  position: relative !important;

  padding: 13px 13px 14px !important;
}

html[data-svoi-theme] .memory-card h3 {
  margin: 0 28px 8px 0 !important;

  color: var(--text) !important;

  font-size: 14px !important;
  font-weight: 780 !important;

  line-height: 1.25 !important;
}

html[data-svoi-theme] .memory-meta {
  display: flex !important;
  flex-direction: column !important;

  gap: 2px !important;

  color: var(--muted) !important;

  font-size: 10px !important;
  line-height: 1.3 !important;
}

html[data-svoi-theme] .memory-delete {
  position: absolute !important;

  top: 10px !important;
  right: 9px !important;

  width: 28px !important;
  height: 28px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  border-radius: 9px !important;

  color: var(--muted) !important;

  background: transparent !important;
  border: 0 !important;
}


/* empty */

html[data-svoi-theme] .memory-empty {
  grid-column: 1 / -1 !important;

  min-height: 320px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 30px 24px !important;

  text-align: center !important;

  border-radius: 28px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .memory-empty-icon {
  width: 58px !important;
  height: 58px !important;

  display: grid !important;
  place-items: center !important;

  margin-bottom: 16px !important;

  border-radius: 19px !important;

  color: #9385e9 !important;
  background: rgba(112,93,211,.10) !important;
}

html[data-svoi-theme] .memory-empty h2 {
  margin: 0 0 7px !important;

  font-size: 22px !important;
}

html[data-svoi-theme] .memory-empty p {
  max-width: 280px !important;

  margin: 0 0 20px !important;

  color: var(--muted) !important;

  font-size: 13px !important;
  line-height: 1.45 !important;
}


/* add form */

html[data-svoi-theme] .memory-photo-picker {
  width: 100% !important;
  min-height: 52px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 7px !important;

  border-radius: 17px !important;

  color: var(--text) !important;
  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .memory-preview {
  position: relative !important;

  width: 100% !important;

  margin-top: 10px !important;

  overflow: hidden !important;

  border-radius: 20px !important;
}

html[data-svoi-theme] .memory-preview img {
  width: 100% !important;
  max-height: 290px !important;

  display: block !important;

  object-fit: cover !important;
}

html[data-svoi-theme] .memory-preview button {
  position: absolute !important;

  top: 9px !important;
  right: 9px !important;

  width: 38px !important;
  height: 38px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  border-radius: 50% !important;

  color: white !important;
  background: rgba(0,0,0,.58) !important;

  font-size: 24px !important;
}


/* fullscreen viewer */

html[data-svoi-theme] .memory-photo-lightbox {
  background: rgba(5,6,10,.96) !important;
}

html[data-svoi-theme] .memory-lightbox {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html[data-svoi-theme] .memory-lightbox img {
  width: 100% !important;
  max-height: 82vh !important;

  object-fit: contain !important;
}

html[data-svoi-theme] .memory-lightbox-close {
  position: absolute !important;

  z-index: 3 !important;

  top: calc(env(safe-area-inset-top) + 12px) !important;
  right: 14px !important;

  width: 48px !important;
  height: 48px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 50% !important;

  color: #fff !important;
  background: rgba(255,255,255,.11) !important;

  font-size: 27px !important;
}

html[data-svoi-theme] .memory-lightbox-caption {
  position: absolute !important;

  left: 20px !important;
  right: 20px !important;
  bottom: calc(env(safe-area-inset-bottom) + 26px) !important;

  color: #fff !important;

  text-align: center !important;

  font-size: 14px !important;
  line-height: 1.4 !important;
}


/* MEMORY FORM — COMPACT PHOTO PREVIEW */

html[data-svoi-theme] .memory-preview {
  height: 190px !important;
  max-height: 190px !important;
}

html[data-svoi-theme] .memory-preview img {
  width: 100% !important;
  height: 190px !important;
  max-height: 190px !important;
  object-fit: cover !important;
}


/* ==========================================
   MEMORY FORM — FINAL PREVIEW SIZE
   ========================================== */

html[data-svoi-theme] .memory-form .memory-preview {
  position: relative !important;

  width: 100% !important;
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;

  margin-top: 10px !important;

  overflow: hidden !important;

  border-radius: 20px !important;
}

html[data-svoi-theme] .memory-form .memory-preview img {
  display: block !important;

  width: 100% !important;
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;

  object-fit: cover !important;
}

html[data-svoi-theme] .memory-form .memory-preview[hidden] {
  display: none !important;
}


/* ==========================================
   COUPLE — CHECK-IN FINAL
   ========================================== */

html[data-svoi-theme] .checkin-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding-bottom: 18px !important;
}

html[data-svoi-theme] .checkin-card {
  position: relative !important;

  padding: 17px !important;

  border-radius: 22px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;

  box-shadow:
    0 9px 28px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.04)
    !important;
}

html[data-svoi-theme] .checkin-card-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;

  gap: 10px !important;

  padding-right: 30px !important;
  margin-bottom: 13px !important;
}

html[data-svoi-theme] .checkin-card-head b {
  display: block !important;

  color: var(--text) !important;

  font-size: 14px !important;
  font-weight: 800 !important;
}

html[data-svoi-theme] .checkin-card-head small {
  display: block !important;

  margin-top: 3px !important;

  color: var(--muted) !important;

  font-size: 10px !important;
}

html[data-svoi-theme] .checkin-mood {
  flex: 0 0 auto !important;

  padding: 6px 10px !important;

  border-radius: 999px !important;

  color: #988af0 !important;

  background:
    rgba(112,93,211,.09) !important;

  border:
    1px solid rgba(137,119,225,.14) !important;

  font-size: 10px !important;
  font-weight: 800 !important;
}

html[data-svoi-theme] .checkin-block + .checkin-block {
  margin-top: 12px !important;
}

html[data-svoi-theme] .checkin-block > span {
  display: block !important;

  margin-bottom: 4px !important;

  color: var(--muted) !important;

  font-size: 9px !important;
  font-weight: 850 !important;

  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html[data-svoi-theme] .checkin-block p {
  margin: 0 !important;

  color: var(--text) !important;

  font-size: 13px !important;
  line-height: 1.42 !important;
}

html[data-svoi-theme] .checkin-delete {
  position: absolute !important;

  top: 11px !important;
  right: 9px !important;

  width: 28px !important;
  height: 28px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  color: var(--muted) !important;

  background: transparent !important;
  border: 0 !important;
}


/* empty */

html[data-svoi-theme] .checkin-empty {
  min-height: 300px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 30px 22px !important;

  text-align: center !important;

  border-radius: 27px !important;

  background:
    radial-gradient(
      circle at 75% 10%,
      rgba(120,101,211,.13),
      transparent 42%
    ),
    var(--glass2) !important;

  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .checkin-empty h2 {
  margin: 0 0 8px !important;

  font-size: 22px !important;
  line-height: 1.15 !important;
}

html[data-svoi-theme] .checkin-empty p {
  max-width: 285px !important;

  margin: 0 0 20px !important;

  color: var(--muted) !important;

  font-size: 13px !important;
  line-height: 1.45 !important;
}


/* form moods */

html[data-svoi-theme] .checkin-mood-grid {
  display: flex !important;
  flex-wrap: wrap !important;

  gap: 7px !important;

  margin-bottom: 18px !important;
}

html[data-svoi-theme] .checkin-mood-choice {
  min-height: 40px !important;

  padding: 0 12px !important;

  border-radius: 13px !important;

  color: var(--muted) !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;

  font-size: 12px !important;
  font-weight: 750 !important;
}

html[data-svoi-theme] .checkin-mood-choice.active {
  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #756ed0,
      #6680cb
    ) !important;

  border-color: transparent !important;

  box-shadow:
    0 7px 20px rgba(75,78,157,.20) !important;
}


/* CHECK-IN — EDIT / DELETE */

html[data-svoi-theme] .checkin-actions {
  position: absolute !important;

  top: 10px !important;
  right: 9px !important;

  display: flex !important;
  align-items: center !important;

  gap: 3px !important;
}

html[data-svoi-theme] .checkin-edit,
html[data-svoi-theme] .checkin-delete {
  position: static !important;

  width: 30px !important;
  height: 30px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  border-radius: 10px !important;

  color: var(--muted) !important;

  background: transparent !important;
  border: 0 !important;
}

html[data-svoi-theme] .checkin-edit:active,
html[data-svoi-theme] .checkin-delete:active {
  background: var(--glass2) !important;
}

html[data-svoi-theme] .checkin-card-head {
  padding-right: 68px !important;
}


/* ==========================================
   CHECK-IN CARD — CLEAN LAYOUT
   ========================================== */

html[data-svoi-theme] .checkin-card {
  padding: 18px !important;
  border-radius: 24px !important;
}

html[data-svoi-theme] .checkin-card-head {
  display: block !important;

  padding-right: 76px !important;
  margin-bottom: 16px !important;
}

html[data-svoi-theme] .checkin-person {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

html[data-svoi-theme] .checkin-person b {
  font-size: 15px !important;
  line-height: 1.2 !important;
}

html[data-svoi-theme] .checkin-person small {
  margin-top: 3px !important;
  font-size: 11px !important;
}

html[data-svoi-theme] .checkin-mood {
  display: inline-flex !important;
  align-items: center !important;

  margin-top: 10px !important;

  padding: 6px 11px !important;

  border-radius: 999px !important;

  font-size: 10px !important;
  font-weight: 800 !important;
}


/* действия справа */

html[data-svoi-theme] .checkin-actions {
  top: 16px !important;
  right: 14px !important;

  gap: 5px !important;
}

html[data-svoi-theme] .checkin-edit,
html[data-svoi-theme] .checkin-delete {
  width: 32px !important;
  height: 32px !important;

  border-radius: 11px !important;

  background: rgba(255,255,255,.035) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .checkin-block {
  padding-top: 2px !important;
}

html[data-svoi-theme] .checkin-block + .checkin-block {
  margin-top: 15px !important;
}

html[data-svoi-theme] .checkin-block > span {
  margin-bottom: 6px !important;
}

html[data-svoi-theme] .checkin-block p {
  font-size: 14px !important;
  line-height: 1.4 !important;
}


/* CHECK-IN — NAME + MOOD SAME LINE */

html[data-svoi-theme] .checkin-person {
  width: 100% !important;
}

html[data-svoi-theme] .checkin-person-line {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;

  min-width: 0 !important;
}

html[data-svoi-theme] .checkin-person-line b {
  flex: 0 1 auto !important;
  min-width: 0 !important;

  margin: 0 !important;
}

html[data-svoi-theme] .checkin-person-line .checkin-mood {
  flex: 0 0 auto !important;

  margin: 0 !important;

  padding: 5px 9px !important;

  font-size: 10px !important;
}

html[data-svoi-theme] .checkin-person small {
  margin-top: 4px !important;
}


/* ==========================================
   COUPLE — GOALS
   ========================================== */

html[data-svoi-theme] .goals-progress-card {
  position: relative !important;

  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 8px 14px !important;

  margin-bottom: 12px !important;
  padding: 18px !important;

  border-radius: 24px !important;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(115,96,208,.15),
      transparent 42%
    ),
    var(--glass2) !important;

  border: 1px solid var(--border) !important;

  box-shadow:
    0 10px 30px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.05)
    !important;
}

html[data-svoi-theme] .goals-progress-card > div:first-child span {
  display: block !important;

  margin-bottom: 4px !important;

  color: var(--muted) !important;

  font-size: 9px !important;
  font-weight: 850 !important;

  letter-spacing: .10em !important;
}

html[data-svoi-theme] .goals-progress-card > div:first-child b {
  color: var(--text) !important;

  font-size: 15px !important;
  font-weight: 800 !important;
}

html[data-svoi-theme] .goals-progress-card > strong {
  color: #8f82e7 !important;

  font-size: 24px !important;
  font-weight: 850 !important;

  letter-spacing: -.03em !important;
}

html[data-svoi-theme] .goals-progress-track {
  grid-column: 1 / -1 !important;

  height: 7px !important;

  overflow: hidden !important;

  border-radius: 999px !important;

  background:
    rgba(120,120,150,.12) !important;
}

html[data-svoi-theme] .goals-progress-track i {
  display: block !important;

  height: 100% !important;

  border-radius: inherit !important;

  background:
    linear-gradient(
      90deg,
      #756ed0,
      #6d8bd5
    ) !important;

  transition: width .3s ease !important;
}


/* LIST */

html[data-svoi-theme] .couple-goals-list {
  display: flex !important;
  flex-direction: column !important;

  gap: 10px !important;

  padding-bottom: 18px !important;
}

html[data-svoi-theme] .couple-goal-card {
  position: relative !important;

  display: grid !important;
  grid-template-columns: 36px minmax(0,1fr) auto !important;
  align-items: flex-start !important;

  gap: 12px !important;

  padding: 17px !important;

  border-radius: 23px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;

  box-shadow:
    0 9px 28px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.045)
    !important;
}


/* CHECK */

html[data-svoi-theme] .goal-check {
  width: 34px !important;
  height: 34px !important;

  display: grid !important;
  place-items: center !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 12px !important;

  color: transparent !important;

  background:
    rgba(255,255,255,.035) !important;

  border:
    1px solid var(--border) !important;

  font-size: 16px !important;
  font-weight: 850 !important;
}

html[data-svoi-theme] .goal-check.active {
  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #756ed0,
      #6680cb
    ) !important;

  border-color: transparent !important;

  box-shadow:
    0 7px 18px rgba(75,78,157,.18) !important;
}


/* CONTENT */

html[data-svoi-theme] .goal-content {
  min-width: 0 !important;

  padding-top: 2px !important;
}

html[data-svoi-theme] .goal-content h3 {
  margin: 0 0 6px !important;

  color: var(--text) !important;

  font-size: 15px !important;
  font-weight: 820 !important;

  line-height: 1.2 !important;
}

html[data-svoi-theme] .goal-content p {
  margin: 0 0 9px !important;

  color: var(--muted) !important;

  font-size: 12px !important;
  line-height: 1.4 !important;
}

html[data-svoi-theme] .goal-due {
  display: inline-flex !important;
  align-items: center !important;

  gap: 5px !important;

  color: var(--muted) !important;

  font-size: 10px !important;
  font-weight: 700 !important;
}


/* ACTIONS */

html[data-svoi-theme] .goal-actions {
  display: flex !important;
  align-items: center !important;

  gap: 4px !important;
}

html[data-svoi-theme] .goal-actions button {
  width: 31px !important;
  height: 31px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  border-radius: 10px !important;

  color: var(--muted) !important;

  background:
    rgba(255,255,255,.03) !important;

  border:
    1px solid var(--border) !important;
}


/* DONE */

html[data-svoi-theme] .couple-goal-card.done {
  opacity: .67 !important;
}

html[data-svoi-theme] .couple-goal-card.done .goal-content h3 {
  text-decoration: line-through !important;
  text-decoration-thickness: 1px !important;
}


/* EMPTY */

html[data-svoi-theme] .goals-empty {
  min-height: 300px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 30px 23px !important;

  text-align: center !important;

  border-radius: 27px !important;

  background:
    radial-gradient(
      circle at 78% 8%,
      rgba(119,99,211,.13),
      transparent 42%
    ),
    var(--glass2) !important;

  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .goals-empty-icon {
  width: 58px !important;
  height: 58px !important;

  display: grid !important;
  place-items: center !important;

  margin-bottom: 16px !important;

  border-radius: 19px !important;

  color: #9385e9 !important;

  background:
    rgba(112,93,211,.10) !important;
}

html[data-svoi-theme] .goals-empty h2 {
  max-width: 290px !important;

  margin: 0 0 8px !important;

  font-size: 21px !important;
  line-height: 1.17 !important;
}

html[data-svoi-theme] .goals-empty p {
  max-width: 300px !important;

  margin: 0 0 20px !important;

  color: var(--muted) !important;

  font-size: 12px !important;
  line-height: 1.45 !important;
}


/* ==========================================
   GOALS — DEADLINE + SECTIONS
   ========================================== */

html[data-svoi-theme] .goal-deadline-section {
  margin: 4px 0 18px !important;
}

html[data-svoi-theme] .goal-deadline-switch {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;

  gap: 5px !important;

  padding: 5px !important;

  border-radius: 17px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .goal-deadline-switch button {
  min-height: 42px !important;

  border-radius: 13px !important;

  color: var(--muted) !important;
  background: transparent !important;

  font-size: 12px !important;
  font-weight: 760 !important;
}

html[data-svoi-theme] .goal-deadline-switch button.active {
  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #756ed0,
      #6680cb
    ) !important;
}

html[data-svoi-theme] .goal-date-field {
  margin-top: 9px !important;
}

html[data-svoi-theme] .goal-date-field[hidden] {
  display: none !important;
}

html[data-svoi-theme] .goals-section-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  margin: 20px 3px 9px !important;
}

html[data-svoi-theme] .goals-section-title h2 {
  margin: 0 !important;

  font-size: 17px !important;
  font-weight: 820 !important;
}

html[data-svoi-theme] .goals-section-title span {
  min-width: 28px !important;
  height: 28px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 10px !important;

  color: var(--muted) !important;
  background: var(--glass2) !important;

  font-size: 11px !important;
  font-weight: 800 !important;
}

html[data-svoi-theme] .goal-due.no-deadline {
  opacity: .72 !important;
}

html[data-svoi-theme] .couple-goals-list.completed {
  padding-bottom: 22px !important;
}


/* ==========================================
   GOAL DATE FIELD — BETTER VISIBILITY
   ========================================== */

html[data-svoi-theme] .goal-date-field,
html[data-svoi-theme] .field input[type="date"][name="due_date"] {
  width: 100% !important;
}

html[data-svoi-theme] .field input[type="date"][name="due_date"] {
  min-height: 58px !important;
  width: 100% !important;
  padding: 0 18px !important;

  border-radius: 18px !important;
  border: 1.5px solid rgba(140, 150, 190, 0.32) !important;

  background: rgba(255,255,255,0.08) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 30px rgba(0,0,0,0.10) !important;

  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}

html[data-svoi-theme="light"] .field input[type="date"][name="due_date"] {
  background: rgba(255,255,255,0.92) !important;
  border: 1.5px solid rgba(120, 130, 180, 0.24) !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

html[data-svoi-theme="dark"] .field input[type="date"][name="due_date"] {
  background: rgba(15,18,34,0.88) !important;
  border: 1.5px solid rgba(130, 150, 255, 0.24) !important;
  color: #f3f5ff !important;
  -webkit-text-fill-color: #f3f5ff !important;
}

html[data-svoi-theme] .field input[type="date"][name="due_date"]::-webkit-calendar-picker-indicator {
  opacity: 0.95 !important;
  cursor: pointer !important;
  filter: none !important;
}

html[data-svoi-theme="dark"] .field input[type="date"][name="due_date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.2) !important;
}

html[data-svoi-theme] .field input[type="date"][name="due_date"]:focus {
  outline: none !important;
  border-color: rgba(129, 140, 248, 0.70) !important;
  box-shadow:
    0 0 0 3px rgba(129, 140, 248, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 10px 30px rgba(0,0,0,0.12) !important;
}

/* === SVOI CUSTOM GOAL DATE START === */

/* ==========================================
   PREMIUM GOAL DATE PICKER
   ========================================== */

html[data-svoi-theme] .goal-date-picker {
  width: 100%;
  display: grid;
  gap: 10px;
}


/* ---------- segmented control ---------- */

html[data-svoi-theme] .goal-date-switch {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;

  padding: 5px;

  border-radius: 19px;
  border: 1px solid rgba(125, 135, 180, 0.16);

  background: rgba(120, 125, 165, 0.08);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10);
}


/* ---------- switch buttons ---------- */

html[data-svoi-theme] .goal-date-mode {
  position: relative;

  min-width: 0;
  min-height: 47px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  padding: 0 12px;

  border: 0;
  border-radius: 15px;

  background: transparent;
  color: var(--text);

  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition:
    background .20s ease,
    color .20s ease,
    box-shadow .20s ease,
    transform .16s ease;
}

html[data-svoi-theme] .goal-date-mode:active {
  transform: scale(.975);
}


/* ---------- active segment ---------- */

html[data-svoi-theme] .goal-date-mode.is-active {
  background: rgba(255,255,255,0.12);

  box-shadow:
    0 7px 22px rgba(20, 22, 45, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.18);
}


/* ---------- light ---------- */

html[data-svoi-theme="light"] .goal-date-switch {
  background: rgba(120, 125, 165, 0.075);
  border-color: rgba(110, 120, 165, 0.13);
}

html[data-svoi-theme="light"] .goal-date-mode {
  color: rgba(31, 35, 55, 0.62);
}

html[data-svoi-theme="light"] .goal-date-mode.is-active {
  background: rgba(255,255,255,0.96);
  color: #171928;

  box-shadow:
    0 8px 24px rgba(35, 38, 70, 0.09),
    inset 0 1px 0 rgba(255,255,255,1);
}


/* ---------- dark ---------- */

html[data-svoi-theme="dark"] .goal-date-switch {
  background: rgba(255,255,255,0.045);
  border-color: rgba(150, 160, 220, 0.10);
}

html[data-svoi-theme="dark"] .goal-date-mode {
  color: rgba(238, 240, 255, 0.58);
}

html[data-svoi-theme="dark"] .goal-date-mode.is-active {
  background: rgba(255,255,255,0.095);
  color: #f7f7ff;

  box-shadow:
    0 10px 25px rgba(0,0,0,0.16),
    inset 0 1px 0 rgba(255,255,255,0.10);
}


/* ==========================================
   SELECTED DATE CARD
   ========================================== */

html[data-svoi-theme] .goal-date-value {
  position: relative;

  width: 100%;
  min-height: 68px;

  display: flex;
  align-items: center;
  gap: 13px;

  padding: 11px 14px;

  border: 1px solid rgba(126, 137, 190, 0.18);
  border-radius: 19px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.11),
      rgba(255,255,255,0.055)
    );

  color: var(--text);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 10px 30px rgba(20, 22, 45, 0.06);

  cursor: pointer;

  overflow: hidden;

  animation: svoiGoalDateIn .22s ease both;

  -webkit-tap-highlight-color: transparent;
}

html[data-svoi-theme] .goal-date-value[hidden] {
  display: none !important;
}


/* subtle glow */

html[data-svoi-theme] .goal-date-value::after {
  content: "";

  position: absolute;
  width: 110px;
  height: 110px;
  right: -54px;
  top: -60px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(129, 140, 248, 0.18),
      rgba(129, 140, 248, 0)
    );

  pointer-events: none;
}


/* ---------- icon ---------- */

html[data-svoi-theme] .goal-date-icon {
  flex: 0 0 43px;

  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      rgba(129,140,248,0.18),
      rgba(168,85,247,0.10)
    );

  color: #8178f6;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15);
}

html[data-svoi-theme] .goal-date-icon svg {
  width: 21px;
  height: 21px;
}


/* ---------- date text ---------- */

html[data-svoi-theme] .goal-date-copy {
  min-width: 0;
  flex: 1;

  display: grid;
  gap: 3px;
}

html[data-svoi-theme] .goal-date-caption {
  font-size: 12px;
  line-height: 1.2;
  font-weight: 650;

  color: var(--muted, rgba(150,150,170,.75));
}

html[data-svoi-theme] .goal-date-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  font-size: 16px;
  line-height: 1.25;
  font-weight: 750;

  color: var(--text);
}


/* ---------- arrow ---------- */

html[data-svoi-theme] .goal-date-chevron {
  position: relative;
  z-index: 2;

  width: 29px;
  height: 29px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  color: rgba(130,135,165,.70);

  background: rgba(130,135,165,.07);
}

html[data-svoi-theme] .goal-date-chevron svg {
  width: 15px;
  height: 15px;
}


/* ---------- light date card ---------- */

html[data-svoi-theme="light"] .goal-date-value {
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.98),
      rgba(250,249,255,0.92)
    );

  border-color: rgba(116, 122, 170, 0.15);

  box-shadow:
    0 9px 28px rgba(43, 44, 78, 0.07),
    inset 0 1px 0 rgba(255,255,255,1);
}

html[data-svoi-theme="light"] .goal-date-caption {
  color: rgba(70, 74, 98, 0.52);
}

html[data-svoi-theme="light"] .goal-date-text {
  color: #171925;
}


/* ---------- dark date card ---------- */

html[data-svoi-theme="dark"] .goal-date-value {
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.075),
      rgba(255,255,255,0.035)
    );

  border-color: rgba(150,160,230,0.11);

  box-shadow:
    0 11px 30px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.08);
}

html[data-svoi-theme="dark"] .goal-date-caption {
  color: rgba(220,222,240,.48);
}

html[data-svoi-theme="dark"] .goal-date-text {
  color: #f6f6ff;
}


/* ==========================================
   REAL NATIVE DATE INPUT
   Keep functionality, remove ugly UI
   ========================================== */

html[data-svoi-theme] input.goal-date-native {
  position: fixed !important;

  left: -10000px !important;
  top: auto !important;

  width: 1px !important;
  height: 1px !important;

  min-height: 0 !important;

  padding: 0 !important;
  margin: 0 !important;

  opacity: 0 !important;

  border: 0 !important;
  box-shadow: none !important;

  pointer-events: none !important;
}


/* ---------- animation ---------- */

@keyframes svoiGoalDateIn {
  from {
    opacity: 0;
    transform: translateY(-3px) scale(.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* ---------- small screens ---------- */

@media (max-width: 380px) {
  html[data-svoi-theme] .goal-date-mode {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 13px;
  }

  html[data-svoi-theme] .goal-date-value {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* === SVOI CUSTOM GOAL DATE END === */

/* ==========================================
   GOAL DEADLINE — PREMIUM FINAL
   ========================================== */

html[data-svoi-theme] .goal-deadline-section {
  margin: 4px 0 20px !important;
}

html[data-svoi-theme] .goal-date-switch {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;

  gap: 6px !important;

  padding: 5px !important;
  margin: 8px 0 10px !important;

  border-radius: 18px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .goal-date-chip {
  min-height: 43px !important;

  padding: 0 10px !important;

  border-radius: 14px !important;
  border: 0 !important;

  background: transparent !important;
  color: var(--muted) !important;

  font-size: 12px !important;
  font-weight: 780 !important;
}

html[data-svoi-theme] .goal-date-chip.active {
  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #756ed0,
      #6685d4
    ) !important;

  box-shadow:
    0 7px 20px rgba(78,79,164,.20),
    inset 0 1px 0 rgba(255,255,255,.15)
    !important;
}


/* DATE CARD */

html[data-svoi-theme] .goal-date-display {
  position: relative !important;

  width: 100% !important;
  min-height: 68px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 14px !important;

  padding: 12px 15px !important;

  overflow: hidden !important;

  border-radius: 19px !important;

  background: var(--glass2) !important;

  border:
    1px solid var(--border) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05)
    !important;
}

html[data-svoi-theme] .goal-date-display.has-value {
  border-color:
    rgba(126,120,218,.30) !important;

  background:
    linear-gradient(
      135deg,
      rgba(117,110,208,.08),
      rgba(102,133,212,.04)
    ),
    var(--glass2) !important;
}

html[data-svoi-theme] .goal-date-copy {
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  gap: 4px !important;
}

html[data-svoi-theme] .goal-date-copy small {
  color: var(--muted) !important;

  font-size: 8px !important;
  font-weight: 850 !important;

  line-height: 1 !important;

  letter-spacing: .11em !important;
}

html[data-svoi-theme] .goal-date-copy strong {
  color: var(--text) !important;

  font-size: 16px !important;
  font-weight: 780 !important;

  line-height: 1.15 !important;
}

html[data-svoi-theme] .goal-date-display.is-empty
.goal-date-copy strong {
  color: var(--muted) !important;
}

html[data-svoi-theme] .goal-date-display-icon {
  width: 40px !important;
  height: 40px !important;

  flex: 0 0 40px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 13px !important;

  color: #8e82e5 !important;

  background:
    rgba(112,93,211,.09) !important;

  border:
    1px solid rgba(137,119,225,.13)
    !important;
}


/* Invisible native iOS picker */

html[data-svoi-theme] .goal-date-native-input {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  opacity: 0 !important;

  cursor: pointer !important;

  z-index: 2 !important;
}

html[data-svoi-theme]
.goal-date-native-input:disabled {
  pointer-events: none !important;
}


/* CLEAR */

html[data-svoi-theme] .goal-date-clear {
  width: auto !important;

  min-height: 34px !important;

  margin: 6px 0 0 !important;
  padding: 0 4px !important;

  border: 0 !important;

  color: var(--muted) !important;
  background: transparent !important;

  font-size: 11px !important;
  font-weight: 700 !important;
}

html[data-svoi-theme]
.goal-date-clear[hidden] {
  display: none !important;
}


/* ==========================================
   GOAL DEADLINE — CLEAN FINAL
   ========================================== */

html[data-svoi-theme] .goal-deadline-section {
  margin: 4px 0 20px !important;
}

html[data-svoi-theme] .goal-date-switch {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;

  gap: 5px !important;

  padding: 5px !important;
  margin-top: 8px !important;

  border-radius: 18px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .goal-date-chip {
  min-height: 44px !important;

  padding: 0 12px !important;

  border: 0 !important;
  border-radius: 14px !important;

  color: var(--muted) !important;
  background: transparent !important;

  font-size: 13px !important;
  font-weight: 780 !important;
}

html[data-svoi-theme] .goal-date-chip.active {
  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #766fd3,
      #6687d5
    ) !important;

  box-shadow:
    0 7px 20px rgba(76,78,160,.20),
    inset 0 1px 0 rgba(255,255,255,.15)
    !important;
}


/* дата появляется только когда она нужна */

html[data-svoi-theme] .goal-date-display {
  position: relative !important;

  width: 100% !important;
  min-height: 66px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 12px !important;

  margin-top: 10px !important;
  padding: 11px 14px !important;

  overflow: hidden !important;

  border-radius: 19px !important;

  background:
    linear-gradient(
      135deg,
      rgba(117,110,208,.08),
      rgba(102,135,213,.04)
    ),
    var(--glass2) !important;

  border:
    1px solid rgba(127,120,218,.25)
    !important;
}

html[data-svoi-theme]
.goal-date-display[hidden] {
  display: none !important;
}


html[data-svoi-theme] .goal-date-copy {
  display: flex !important;
  flex-direction: column !important;

  gap: 4px !important;

  min-width: 0 !important;
}

html[data-svoi-theme] .goal-date-copy small {
  color: var(--muted) !important;

  font-size: 8px !important;
  font-weight: 850 !important;

  line-height: 1 !important;
  letter-spacing: .12em !important;
}

html[data-svoi-theme] .goal-date-copy strong {
  color: var(--text) !important;

  font-size: 16px !important;
  font-weight: 800 !important;

  line-height: 1.15 !important;
}


html[data-svoi-theme] .goal-date-display-icon {
  width: 40px !important;
  height: 40px !important;

  flex: 0 0 40px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 13px !important;

  color: #9084e6 !important;

  background:
    rgba(112,93,211,.09) !important;

  border:
    1px solid rgba(137,119,225,.13)
    !important;
}


/* невидимый iPhone picker */

html[data-svoi-theme] .goal-date-native-input {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  opacity: 0 !important;

  border: 0 !important;

  z-index: 3 !important;
}


/* ==========================================
   GOAL DATE — CLEAN OVERRIDE
   remove all legacy duplicated controls
   ========================================== */

html[data-svoi-theme] .goal-date-display {
  position: relative !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px !important;
  align-items: center !important;

  gap: 14px !important;

  width: 100% !important;
  min-height: 72px !important;

  margin-top: 10px !important;
  padding: 13px 14px 13px 17px !important;

  overflow: hidden !important;

  border-radius: 20px !important;

  background:
    linear-gradient(
      135deg,
      rgba(118,108,213,.09),
      rgba(95,132,209,.04)
    ),
    var(--glass2) !important;

  border:
    1px solid rgba(128,121,220,.24) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 8px 24px rgba(0,0,0,.045)
    !important;
}

html[data-svoi-theme]
.goal-date-display[hidden] {
  display: none !important;
}


/* текст даты */

html[data-svoi-theme] .goal-date-copy {
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  gap: 5px !important;

  overflow: hidden !important;
}

html[data-svoi-theme] .goal-date-copy small {
  display: block !important;

  margin: 0 !important;

  color: var(--muted) !important;

  font-size: 8px !important;
  font-weight: 850 !important;

  line-height: 1 !important;
  letter-spacing: .12em !important;

  white-space: nowrap !important;
}

html[data-svoi-theme] .goal-date-copy strong {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;

  color: var(--text) !important;

  font-size: 17px !important;
  font-weight: 800 !important;

  line-height: 1.15 !important;
  letter-spacing: -.015em !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* календарь справа */

html[data-svoi-theme] .goal-date-display-icon {
  position: static !important;

  width: 42px !important;
  height: 42px !important;

  display: grid !important;
  place-items: center !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 14px !important;

  color: #9185e8 !important;

  background:
    rgba(112,93,211,.10) !important;

  border:
    1px solid rgba(137,119,225,.14) !important;
}


/* полностью прячем нативный вид input,
   но оставляем его кликабельным поверх карточки */

html[data-svoi-theme]
.goal-date-display
.goal-date-native-input,

html[data-svoi-theme]
.goal-date-display
input[type="date"][name="due_date"] {

  position: absolute !important;

  inset: 0 !important;

  z-index: 5 !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  opacity: 0 !important;

  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  background: transparent !important;

  border: 0 !important;
  outline: 0 !important;

  font-size: 0 !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  cursor: pointer !important;
}


/* если в DOM остались старые элементы —
   гарантированно скрываем их внутри карточки */

html[data-svoi-theme]
.goal-date-display .goal-date-switch,

html[data-svoi-theme]
.goal-date-display .goal-date-chip,

html[data-svoi-theme]
.goal-date-display .goal-date-clear {

  display: none !important;
}


/* верхний переключатель */

html[data-svoi-theme] .goal-deadline-section > .goal-date-switch {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;

  gap: 5px !important;

  padding: 5px !important;
  margin: 8px 0 0 !important;

  border-radius: 18px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}


/* ==========================================
   GOAL DATE — iOS PICKER FIX
   ========================================== */

html[data-svoi-theme]
.goal-date-display
.goal-date-native-input {

  position: absolute !important;
  inset: 0 !important;

  z-index: 20 !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  /* Не ставим opacity:0 — iOS иногда перестаёт
     открывать picker у полностью невидимого input */
  opacity: .001 !important;

  pointer-events: auto !important;

  -webkit-appearance: auto !important;
  appearance: auto !important;

  background: transparent !important;

  border: 0 !important;
  outline: 0 !important;

  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  font-size: 16px !important;

  cursor: pointer !important;
}

html[data-svoi-theme]
.goal-date-native-input::-webkit-datetime-edit {
  opacity: 0 !important;
}

html[data-svoi-theme]
.goal-date-native-input::-webkit-calendar-picker-indicator {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;

  opacity: 0 !important;

  cursor: pointer !important;
}

html[data-svoi-theme]
.goal-date-native-input:disabled {
  pointer-events: none !important;
}


/* ==========================================
   GOAL DATE — iOS FINAL
   native picker hidden outside visual card
   ========================================== */

html[data-svoi-theme] .goal-date-display {
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

html[data-svoi-theme]
.goal-date-display
.goal-date-native-input {

  position: absolute !important;

  right: 8px !important;
  bottom: 8px !important;
  left: auto !important;
  top: auto !important;

  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;

  margin: 0 !important;
  padding: 0 !important;

  opacity: .001 !important;

  pointer-events: none !important;

  overflow: hidden !important;

  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;

  box-shadow: none !important;

  font-size: 1px !important;

  -webkit-appearance: none !important;
  appearance: none !important;
}

html[data-svoi-theme]
.goal-date-native-input::-webkit-datetime-edit,

html[data-svoi-theme]
.goal-date-native-input::-webkit-date-and-time-value,

html[data-svoi-theme]
.goal-date-native-input::-webkit-calendar-picker-indicator {

  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
}


/* ==========================================
   FRIENDS SPACE
   ========================================== */

html[data-svoi-theme] .friends-room-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 14px !important;

  margin: 4px 0 18px !important;
}

html[data-svoi-theme] .friends-room-head h1 {
  margin: 0 !important;

  font-size: 30px !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em !important;
}

html[data-svoi-theme] .friends-room-head small {
  display: block !important;

  margin-top: 5px !important;

  color: var(--muted) !important;

  font-size: 11px !important;
  font-weight: 650 !important;
}


/* HERO */

html[data-svoi-theme] .friends-hero {
  padding: 23px !important;

  border-radius: 29px !important;

  background:
    radial-gradient(
      circle at 92% 5%,
      rgba(88,130,207,.17),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.02)
    ),
    var(--glass2) !important;

  border: 1px solid var(--border) !important;

  box-shadow:
    0 15px 38px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.055)
    !important;
}

html[data-svoi-theme] .friends-hero h2 {
  margin: 10px 0 7px !important;

  font-size: 28px !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
}

html[data-svoi-theme] .friends-hero p {
  max-width: 315px !important;

  margin: 0 !important;

  color: var(--muted) !important;

  font-size: 13px !important;
  line-height: 1.42 !important;
}

html[data-svoi-theme] .friends-hero .primary {
  min-height: 52px !important;

  margin-top: 19px !important;

  border-radius: 18px !important;
}


/* FEATURE GRID */

html[data-svoi-theme] .friends-feature-grid {
  display: grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap: 10px !important;

  margin-top: 13px !important;
}

html[data-svoi-theme] .friends-feature-card {
  min-width: 0 !important;
  min-height: 150px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  padding: 17px !important;

  text-align: left !important;

  border-radius: 23px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;

  box-shadow:
    0 9px 27px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.05)
    !important;
}

html[data-svoi-theme] .friends-feature-card:active {
  transform: scale(.975) !important;
}

html[data-svoi-theme] .friends-feature-icon {
  width: 42px !important;
  height: 42px !important;

  display: grid !important;
  place-items: center !important;

  margin-bottom: 13px !important;

  border-radius: 14px !important;

  color: #7899d4 !important;

  background:
    rgba(80,120,190,.09) !important;

  border:
    1px solid rgba(105,145,210,.14) !important;

  font-size: 16px !important;
  font-weight: 850 !important;
}

html[data-svoi-theme] .friends-feature-card b {
  margin-bottom: 5px !important;

  color: var(--text) !important;

  font-size: 16px !important;
  line-height: 1.14 !important;
}

html[data-svoi-theme] .friends-feature-card small {
  color: var(--muted) !important;

  font-size: 11px !important;
  line-height: 1.3 !important;
}


/* LOWER */

html[data-svoi-theme] .friends-next-head {
  margin-top: 25px !important;
}

html[data-svoi-theme] .friends-secondary-actions {
  display: grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap: 9px !important;

  margin-top: 14px !important;
  padding-bottom: 14px !important;
}

html[data-svoi-theme] .friends-secondary-actions button {
  min-height: 48px !important;

  border-radius: 16px !important;
}


/* ==========================================
   FRIENDS SPACE
   ========================================== */

html[data-svoi-theme] .friends-room-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 14px !important;

  margin: 4px 0 18px !important;
}

html[data-svoi-theme] .friends-room-head h1 {
  margin: 0 !important;

  font-size: 30px !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em !important;
}

html[data-svoi-theme] .friends-room-head small {
  display: block !important;

  margin-top: 5px !important;

  color: var(--muted) !important;

  font-size: 11px !important;
  font-weight: 650 !important;
}


/* HERO */

html[data-svoi-theme] .friends-hero {
  padding: 23px !important;

  border-radius: 29px !important;

  background:
    radial-gradient(
      circle at 92% 5%,
      rgba(88,130,207,.17),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.02)
    ),
    var(--glass2) !important;

  border: 1px solid var(--border) !important;

  box-shadow:
    0 15px 38px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.055)
    !important;
}

html[data-svoi-theme] .friends-hero h2 {
  margin: 10px 0 7px !important;

  font-size: 28px !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
}

html[data-svoi-theme] .friends-hero p {
  max-width: 315px !important;

  margin: 0 !important;

  color: var(--muted) !important;

  font-size: 13px !important;
  line-height: 1.42 !important;
}

html[data-svoi-theme] .friends-hero .primary {
  min-height: 52px !important;

  margin-top: 19px !important;

  border-radius: 18px !important;
}


/* FEATURE GRID */

html[data-svoi-theme] .friends-feature-grid {
  display: grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap: 10px !important;

  margin-top: 13px !important;
}

html[data-svoi-theme] .friends-feature-card {
  min-width: 0 !important;
  min-height: 150px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  padding: 17px !important;

  text-align: left !important;

  border-radius: 23px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;

  box-shadow:
    0 9px 27px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.05)
    !important;
}

html[data-svoi-theme] .friends-feature-card:active {
  transform: scale(.975) !important;
}

html[data-svoi-theme] .friends-feature-icon {
  width: 42px !important;
  height: 42px !important;

  display: grid !important;
  place-items: center !important;

  margin-bottom: 13px !important;

  border-radius: 14px !important;

  color: #7899d4 !important;

  background:
    rgba(80,120,190,.09) !important;

  border:
    1px solid rgba(105,145,210,.14) !important;

  font-size: 16px !important;
  font-weight: 850 !important;
}

html[data-svoi-theme] .friends-feature-card b {
  margin-bottom: 5px !important;

  color: var(--text) !important;

  font-size: 16px !important;
  line-height: 1.14 !important;
}

html[data-svoi-theme] .friends-feature-card small {
  color: var(--muted) !important;

  font-size: 11px !important;
  line-height: 1.3 !important;
}


/* LOWER */

html[data-svoi-theme] .friends-next-head {
  margin-top: 25px !important;
}

html[data-svoi-theme] .friends-secondary-actions {
  display: grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap: 9px !important;

  margin-top: 14px !important;
  padding-bottom: 14px !important;
}

html[data-svoi-theme] .friends-secondary-actions button {
  min-height: 48px !important;

  border-radius: 16px !important;
}


/* ==========================================
   FRIENDS — AVAILABILITY
   ========================================== */

html[data-svoi-theme] .availability-intro {
  padding: 20px !important;
  margin-bottom: 12px !important;

  border-radius: 26px !important;

  background:
    radial-gradient(
      circle at 92% 5%,
      rgba(90,131,208,.14),
      transparent 42%
    ),
    var(--glass2) !important;

  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .availability-intro h2 {
  margin: 9px 0 6px !important;
  font-size: 21px !important;
  line-height: 1.15 !important;
}

html[data-svoi-theme] .availability-intro p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 12px !important;
}


/* poll list */

html[data-svoi-theme] .availability-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding-bottom: 18px !important;
}

html[data-svoi-theme] .availability-poll-card {
  width: 100% !important;

  padding: 17px !important;

  text-align: left !important;

  border-radius: 23px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .availability-poll-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

html[data-svoi-theme] .availability-poll-top h3 {
  margin: 7px 0 0 !important;

  color: var(--text) !important;

  font-size: 17px !important;
  line-height: 1.2 !important;
}

html[data-svoi-theme] .availability-status {
  color: #7897d4 !important;

  font-size: 8px !important;
  font-weight: 850 !important;
  letter-spacing: .1em !important;
}

html[data-svoi-theme] .availability-status.closed {
  color: var(--muted) !important;
}

html[data-svoi-theme] .availability-best {
  display: grid !important;
  grid-template-columns: 1fr auto !important;

  gap: 3px 10px !important;

  margin-top: 15px !important;
  padding: 13px !important;

  border-radius: 17px !important;

  background: rgba(89,128,205,.07) !important;
  border: 1px solid rgba(100,140,210,.12) !important;
}

html[data-svoi-theme] .availability-best small {
  grid-column: 1 / -1 !important;

  color: var(--muted) !important;

  font-size: 8px !important;
  font-weight: 850 !important;

  letter-spacing: .09em !important;
}

html[data-svoi-theme] .availability-best b {
  color: var(--text) !important;
  font-size: 14px !important;
}

html[data-svoi-theme] .availability-best span {
  color: var(--muted) !important;
  font-size: 11px !important;
}

html[data-svoi-theme] .availability-card-meta {
  display: flex !important;
  justify-content: space-between !important;

  gap: 10px !important;

  margin-top: 12px !important;

  color: var(--muted) !important;
  font-size: 10px !important;
}


/* empty */

html[data-svoi-theme] .availability-empty {
  min-height: 290px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 28px 23px !important;

  text-align: center !important;

  border-radius: 27px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .availability-empty-icon {
  width: 57px !important;
  height: 57px !important;

  display: grid !important;
  place-items: center !important;

  margin-bottom: 15px !important;

  border-radius: 18px !important;

  color: #7798d4 !important;
  background: rgba(80,120,190,.09) !important;
}

html[data-svoi-theme] .availability-empty h2 {
  margin: 0 0 7px !important;
  font-size: 21px !important;
}

html[data-svoi-theme] .availability-empty p {
  max-width: 290px !important;

  margin: 0 0 20px !important;

  color: var(--muted) !important;

  font-size: 12px !important;
  line-height: 1.45 !important;
}


/* create dates */

html[data-svoi-theme] .availability-dates-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 12px !important;

  margin: 5px 2px 9px !important;
}

html[data-svoi-theme] .availability-dates-head > span {
  color: var(--muted) !important;

  font-size: 12px !important;
  font-weight: 750 !important;
}

html[data-svoi-theme] .availability-date-list {
  display: flex !important;
  flex-direction: column !important;

  gap: 7px !important;

  margin-bottom: 18px !important;
}

html[data-svoi-theme] .availability-date-row {
  display: grid !important;
  grid-template-columns: 1fr 44px !important;

  gap: 7px !important;
}

html[data-svoi-theme] .availability-date-row input {
  min-height: 50px !important;

  padding: 0 14px !important;

  border-radius: 16px !important;

  color: var(--text) !important;
  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;

  font-size: 14px !important;
}

html[data-svoi-theme] .availability-date-row button {
  width: 44px !important;
  height: 50px !important;

  border-radius: 15px !important;

  color: var(--muted) !important;
  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;

  font-size: 22px !important;
}

html[data-svoi-theme] .availability-date-row button:disabled {
  opacity: .25 !important;
}


/* voting */

html[data-svoi-theme] .availability-vote-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 15px !important;

  margin-bottom: 10px !important;
  padding: 15px 16px !important;

  border-radius: 20px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .availability-vote-summary span {
  color: var(--muted) !important;
  font-size: 11px !important;
}

html[data-svoi-theme] .availability-vote-summary b {
  flex: 0 0 auto !important;

  color: #7d94d8 !important;

  font-size: 11px !important;
}

html[data-svoi-theme] .availability-options {
  display: flex !important;
  flex-direction: column !important;

  gap: 8px !important;
}

html[data-svoi-theme] .availability-option {
  width: 100% !important;

  display: grid !important;
  grid-template-columns: 34px minmax(0,1fr) 32px !important;
  align-items: center !important;

  gap: 11px !important;

  padding: 14px !important;

  text-align: left !important;

  border-radius: 20px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .availability-option.selected {
  border-color: rgba(105,140,215,.40) !important;

  background:
    linear-gradient(
      135deg,
      rgba(90,126,205,.10),
      rgba(112,100,210,.05)
    ),
    var(--glass2) !important;
}

html[data-svoi-theme] .availability-option.best {
  box-shadow:
    inset 3px 0 0 rgba(104,139,213,.72) !important;
}

html[data-svoi-theme] .availability-option-check {
  width: 32px !important;
  height: 32px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 11px !important;

  color: #fff !important;

  background: rgba(90,120,190,.08) !important;
  border: 1px solid var(--border) !important;

  font-size: 14px !important;
  font-weight: 850 !important;
}

html[data-svoi-theme] .availability-option.selected
.availability-option-check {
  background:
    linear-gradient(
      135deg,
      #6f78cf,
      #638dd6
    ) !important;

  border-color: transparent !important;
}

html[data-svoi-theme] .availability-option-copy {
  min-width: 0 !important;
}

html[data-svoi-theme] .availability-option-copy b {
  display: block !important;

  color: var(--text) !important;

  font-size: 14px !important;
  line-height: 1.2 !important;
}

html[data-svoi-theme] .availability-option-copy small {
  display: block !important;

  margin-top: 4px !important;

  overflow: hidden !important;

  color: var(--muted) !important;

  font-size: 10px !important;
  line-height: 1.3 !important;

  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

html[data-svoi-theme] .availability-option-votes {
  width: 30px !important;
  height: 30px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 10px !important;

  color: var(--text) !important;
  background: var(--glass2) !important;

  font-size: 11px !important;
  font-weight: 800 !important;
}

html[data-svoi-theme] .availability-save {
  margin-top: 10px !important;
}


/* ==========================================
   FRIENDS — POLLS
   ========================================== */

html[data-svoi-theme] .friends-polls-intro {
  padding: 20px !important;
  margin-bottom: 12px !important;

  border-radius: 26px !important;

  background:
    radial-gradient(
      circle at 92% 5%,
      rgba(91,132,207,.14),
      transparent 42%
    ),
    var(--glass2) !important;

  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .friends-polls-intro h2 {
  margin: 9px 0 6px !important;
  font-size: 21px !important;
  line-height: 1.15 !important;
}

html[data-svoi-theme] .friends-polls-intro p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}


/* LIST */

html[data-svoi-theme] .friends-polls-list {
  display: flex !important;
  flex-direction: column !important;

  gap: 10px !important;
  padding-bottom: 18px !important;
}

html[data-svoi-theme] .friends-poll-card {
  width: 100% !important;

  padding: 17px !important;

  text-align: left !important;

  border-radius: 23px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .friends-poll-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;

  gap: 12px !important;
}

html[data-svoi-theme] .friends-poll-status {
  color: #7594d1 !important;

  font-size: 8px !important;
  font-weight: 850 !important;

  letter-spacing: .1em !important;
}

html[data-svoi-theme] .friends-poll-status.closed {
  color: var(--muted) !important;
}

html[data-svoi-theme] .friends-poll-head h3 {
  margin: 7px 0 0 !important;

  color: var(--text) !important;

  font-size: 17px !important;
  line-height: 1.2 !important;
}

html[data-svoi-theme] .friends-poll-leader {
  display: grid !important;
  grid-template-columns: 1fr auto !important;

  gap: 4px 10px !important;

  margin-top: 15px !important;
  padding: 13px !important;

  border-radius: 17px !important;

  background:
    rgba(87,126,200,.07) !important;

  border:
    1px solid rgba(105,140,205,.12) !important;
}

html[data-svoi-theme] .friends-poll-leader small {
  grid-column: 1 / -1 !important;

  color: var(--muted) !important;

  font-size: 8px !important;
  font-weight: 850 !important;

  letter-spacing: .09em !important;
}

html[data-svoi-theme] .friends-poll-leader b {
  color: var(--text) !important;
  font-size: 14px !important;
}

html[data-svoi-theme] .friends-poll-leader span {
  width: 28px !important;
  height: 28px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 9px !important;

  color: #7896d5 !important;
  background: rgba(83,122,195,.08) !important;

  font-size: 11px !important;
  font-weight: 850 !important;
}

html[data-svoi-theme] .friends-poll-meta {
  display: flex !important;
  justify-content: space-between !important;

  gap: 10px !important;

  margin-top: 12px !important;

  color: var(--muted) !important;

  font-size: 10px !important;
}


/* EMPTY */

html[data-svoi-theme] .friends-polls-empty {
  min-height: 290px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 28px 23px !important;

  text-align: center !important;

  border-radius: 27px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .friends-polls-empty-icon {
  width: 57px !important;
  height: 57px !important;

  display: grid !important;
  place-items: center !important;

  margin-bottom: 15px !important;

  border-radius: 18px !important;

  color: #7798d4 !important;
  background: rgba(80,120,190,.09) !important;
}

html[data-svoi-theme] .friends-polls-empty h2 {
  margin: 0 0 7px !important;
  font-size: 21px !important;
}

html[data-svoi-theme] .friends-polls-empty p {
  max-width: 290px !important;

  margin: 0 0 20px !important;

  color: var(--muted) !important;

  font-size: 12px !important;
  line-height: 1.45 !important;
}


/* CREATE */

html[data-svoi-theme] .friend-poll-mode {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;

  gap: 5px !important;

  padding: 5px !important;
  margin-bottom: 18px !important;

  border-radius: 17px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .friend-poll-mode button {
  min-height: 42px !important;

  border: 0 !important;
  border-radius: 13px !important;

  color: var(--muted) !important;
  background: transparent !important;

  font-size: 12px !important;
  font-weight: 760 !important;
}

html[data-svoi-theme] .friend-poll-mode button.active {
  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #6f79cf,
      #648dd6
    ) !important;
}

html[data-svoi-theme] .friend-poll-options-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  margin: 5px 2px 9px !important;
}

html[data-svoi-theme] .friend-poll-options-head > span {
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

html[data-svoi-theme] .friend-poll-option-list {
  display: flex !important;
  flex-direction: column !important;

  gap: 7px !important;

  margin-bottom: 18px !important;
}

html[data-svoi-theme] .friend-poll-option-row {
  display: grid !important;
  grid-template-columns: 28px minmax(0,1fr) 42px !important;
  align-items: center !important;

  gap: 7px !important;
}

html[data-svoi-theme] .friend-poll-option-row > span {
  color: var(--muted) !important;

  text-align: center !important;

  font-size: 11px !important;
  font-weight: 800 !important;
}

html[data-svoi-theme] .friend-poll-option-row input {
  min-width: 0 !important;
  min-height: 48px !important;

  padding: 0 13px !important;

  border-radius: 15px !important;

  color: var(--text) !important;
  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;

  font-size: 13px !important;
}

html[data-svoi-theme] .friend-poll-option-row button {
  width: 42px !important;
  height: 48px !important;

  border-radius: 14px !important;

  color: var(--muted) !important;
  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;

  font-size: 21px !important;
}

html[data-svoi-theme] .friend-poll-option-row button:disabled {
  opacity: .25 !important;
}


/* VOTE */

html[data-svoi-theme] .friend-poll-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 14px !important;

  margin-bottom: 10px !important;
  padding: 15px 16px !important;

  border-radius: 20px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .friend-poll-summary span {
  color: var(--muted) !important;
  font-size: 11px !important;
}

html[data-svoi-theme] .friend-poll-summary b {
  flex: 0 0 auto !important;

  color: #7896d5 !important;
  font-size: 11px !important;
}

html[data-svoi-theme] .friend-poll-vote-options {
  display: flex !important;
  flex-direction: column !important;

  gap: 8px !important;
}

html[data-svoi-theme] .friend-poll-vote-option {
  width: 100% !important;

  display: grid !important;
  grid-template-columns: 34px minmax(0,1fr) 32px !important;
  align-items: center !important;

  gap: 11px !important;

  padding: 14px !important;

  text-align: left !important;

  border-radius: 20px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .friend-poll-vote-option.selected {
  border-color:
    rgba(104,139,213,.38) !important;

  background:
    linear-gradient(
      135deg,
      rgba(90,126,205,.10),
      rgba(112,100,210,.05)
    ),
    var(--glass2) !important;
}

html[data-svoi-theme] .friend-poll-vote-option.leading {
  box-shadow:
    inset 3px 0 0 rgba(104,139,213,.72) !important;
}

html[data-svoi-theme] .friend-poll-choice {
  width: 32px !important;
  height: 32px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 11px !important;

  color: #fff !important;

  background:
    rgba(90,120,190,.08) !important;

  border:
    1px solid var(--border) !important;

  font-size: 14px !important;
  font-weight: 850 !important;
}

html[data-svoi-theme]
.friend-poll-vote-option.selected
.friend-poll-choice {
  background:
    linear-gradient(
      135deg,
      #6f78cf,
      #638dd6
    ) !important;

  border-color: transparent !important;
}

html[data-svoi-theme] .friend-poll-option-copy {
  min-width: 0 !important;
}

html[data-svoi-theme] .friend-poll-option-copy b {
  display: block !important;

  color: var(--text) !important;

  font-size: 14px !important;
}

html[data-svoi-theme] .friend-poll-option-copy small {
  display: block !important;

  margin-top: 4px !important;

  overflow: hidden !important;

  color: var(--muted) !important;

  font-size: 10px !important;

  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

html[data-svoi-theme] .friend-poll-count {
  width: 30px !important;
  height: 30px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 10px !important;

  color: var(--text) !important;
  background: var(--glass2) !important;

  font-size: 11px !important;
  font-weight: 800 !important;
}

html[data-svoi-theme] .friend-poll-save {
  margin-top: 10px !important;
}

html[data-svoi-theme] .friend-poll-close,
html[data-svoi-theme] .friend-poll-delete {
  margin-top: 8px !important;
}


/* FRIEND POLL — VALIDATION */

html[data-svoi-theme]
.friend-poll-option-row input.poll-option-error {
  border-color: rgba(225,82,98,.65) !important;

  box-shadow:
    0 0 0 3px rgba(225,82,98,.08)
    !important;
}


/* ==========================================
   FRIENDS — EXPENSES
   ========================================== */

html[data-svoi-theme] .expense-total-card {
  padding: 22px !important;
  margin-bottom: 23px !important;

  border-radius: 28px !important;

  background:
    radial-gradient(
      circle at 95% 0%,
      rgba(89,133,205,.16),
      transparent 44%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.015)
    ),
    var(--glass2) !important;

  border:
    1px solid var(--border) !important;
}

html[data-svoi-theme] .expense-total-label {
  display: block !important;

  color: var(--muted) !important;

  font-size: 8px !important;
  font-weight: 850 !important;

  letter-spacing: .12em !important;
}

html[data-svoi-theme] .expense-total-card > strong {
  display: block !important;

  margin-top: 8px !important;

  color: var(--text) !important;

  font-size: 34px !important;
  font-weight: 850 !important;

  line-height: 1 !important;
  letter-spacing: -.045em !important;
}

html[data-svoi-theme] .expense-total-card > p {
  margin: 8px 0 17px !important;

  color: var(--muted) !important;

  font-size: 11px !important;
}

html[data-svoi-theme] .expense-total-card .primary {
  min-height: 48px !important;

  border-radius: 16px !important;
}


/* sections */

html[data-svoi-theme] .expense-section {
  margin-top: 23px !important;
}

html[data-svoi-theme] .expense-section .section-head {
  margin-bottom: 9px !important;
}


/* transfers */

html[data-svoi-theme] .expense-transfer-list {
  display: flex !important;
  flex-direction: column !important;

  gap: 8px !important;
}

html[data-svoi-theme] .expense-transfer-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 12px !important;

  padding: 15px !important;

  border-radius: 19px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .expense-transfer-route {
  display: flex !important;
  align-items: center !important;

  min-width: 0 !important;

  gap: 7px !important;
}

html[data-svoi-theme] .expense-person {
  min-width: 0 !important;

  overflow: hidden !important;

  color: var(--text) !important;

  font-size: 12px !important;
  font-weight: 760 !important;

  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-svoi-theme] .expense-arrow {
  flex: 0 0 auto !important;

  color: #7995d3 !important;

  font-size: 16px !important;
}

html[data-svoi-theme] .expense-transfer-card > strong {
  flex: 0 0 auto !important;

  color: var(--text) !important;

  font-size: 13px !important;
  font-weight: 850 !important;
}


/* balances */

html[data-svoi-theme] .expense-balance-list {
  overflow: hidden !important;

  border-radius: 21px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .expense-balance-row {
  display: grid !important;

  grid-template-columns:
    38px minmax(0,1fr) auto !important;

  align-items: center !important;

  gap: 11px !important;

  min-height: 66px !important;

  padding: 11px 13px !important;

  border-bottom:
    1px solid var(--border) !important;
}

html[data-svoi-theme]
.expense-balance-row:last-child {
  border-bottom: 0 !important;
}

html[data-svoi-theme] .expense-avatar {
  width: 38px !important;
  height: 38px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 13px !important;

  color: #8398d8 !important;

  background:
    rgba(90,126,201,.09) !important;

  font-size: 13px !important;
  font-weight: 850 !important;
}

html[data-svoi-theme] .expense-balance-copy {
  min-width: 0 !important;
}

html[data-svoi-theme] .expense-balance-copy b {
  display: block !important;

  overflow: hidden !important;

  color: var(--text) !important;

  font-size: 13px !important;

  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-svoi-theme] .expense-balance-copy small {
  display: block !important;

  margin-top: 3px !important;

  color: var(--muted) !important;

  font-size: 9px !important;
}

html[data-svoi-theme]
.expense-balance-row > strong {
  font-size: 12px !important;
  font-weight: 850 !important;
}

html[data-svoi-theme]
.expense-balance-row > strong.positive {
  color: #69a78a !important;
}

html[data-svoi-theme]
.expense-balance-row > strong.negative {
  color: #d6838d !important;
}


/* expense list */

html[data-svoi-theme] .expense-list {
  display: flex !important;
  flex-direction: column !important;

  gap: 8px !important;
}

html[data-svoi-theme] .expense-card {
  padding: 14px !important;

  border-radius: 20px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .expense-card-main {
  display: grid !important;

  grid-template-columns:
    39px minmax(0,1fr) auto !important;

  align-items: center !important;

  gap: 11px !important;
}

html[data-svoi-theme] .expense-card-icon {
  width: 39px !important;
  height: 39px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 13px !important;

  color: #8299d7 !important;

  background:
    rgba(90,126,201,.09) !important;

  font-size: 15px !important;
  font-weight: 900 !important;
}

html[data-svoi-theme] .expense-card-copy {
  min-width: 0 !important;
}

html[data-svoi-theme] .expense-card-copy b {
  display: block !important;

  overflow: hidden !important;

  color: var(--text) !important;

  font-size: 13px !important;

  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-svoi-theme] .expense-card-copy small {
  display: block !important;

  margin-top: 3px !important;

  color: var(--muted) !important;

  font-size: 9px !important;
}

html[data-svoi-theme] .expense-card-main > strong {
  color: var(--text) !important;

  font-size: 13px !important;
  font-weight: 850 !important;
}

html[data-svoi-theme] .expense-card-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  margin-top: 10px !important;
  padding-top: 9px !important;

  border-top:
    1px solid var(--border) !important;
}

html[data-svoi-theme] .expense-card-bottom > span {
  color: var(--muted) !important;

  font-size: 9px !important;
}

html[data-svoi-theme] .expense-delete-btn {
  width: 30px !important;
  height: 30px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  border-radius: 10px !important;

  color: var(--muted) !important;
  background: transparent !important;

  border: 0 !important;
}


/* empty */

html[data-svoi-theme] .expense-empty {
  min-height: 275px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 25px !important;

  text-align: center !important;

  border-radius: 25px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .expense-empty-icon {
  width: 55px !important;
  height: 55px !important;

  display: grid !important;
  place-items: center !important;

  margin-bottom: 14px !important;

  border-radius: 18px !important;

  color: #8299d7 !important;

  background:
    rgba(90,126,201,.09) !important;

  font-size: 20px !important;
  font-weight: 900 !important;
}

html[data-svoi-theme] .expense-empty h2 {
  margin: 0 0 7px !important;

  font-size: 20px !important;
}

html[data-svoi-theme] .expense-empty p {
  max-width: 280px !important;

  margin: 0 0 18px !important;

  color: var(--muted) !important;

  font-size: 11px !important;
  line-height: 1.45 !important;
}


/* all settled */

html[data-svoi-theme] .expense-all-set {
  display: flex !important;
  align-items: center !important;

  gap: 11px !important;

  padding: 14px !important;
  margin-top: 10px !important;

  border-radius: 18px !important;

  background:
    rgba(79,151,117,.06) !important;

  border:
    1px solid rgba(91,163,130,.13) !important;
}

html[data-svoi-theme] .expense-all-set > span {
  width: 34px !important;
  height: 34px !important;

  display: grid !important;
  place-items: center !important;

  flex: 0 0 34px !important;

  border-radius: 11px !important;

  color: #78aa91 !important;

  background:
    rgba(90,155,122,.09) !important;
}

html[data-svoi-theme] .expense-all-set b,
html[data-svoi-theme] .expense-all-set small {
  display: block !important;
}

html[data-svoi-theme] .expense-all-set b {
  color: var(--text) !important;

  font-size: 12px !important;
}

html[data-svoi-theme] .expense-all-set small {
  margin-top: 3px !important;

  color: var(--muted) !important;

  font-size: 9px !important;
}


/* add expense */

html[data-svoi-theme] .expense-amount-field {
  position: relative !important;
}

html[data-svoi-theme] .expense-amount-field input {
  padding-right: 48px !important;

  font-size: 24px !important;
  font-weight: 800 !important;
}

html[data-svoi-theme] .expense-amount-field > span {
  position: absolute !important;

  top: 50% !important;
  right: 17px !important;

  transform:
    translateY(-50%) !important;

  color: var(--muted) !important;

  font-size: 18px !important;
  font-weight: 750 !important;
}

html[data-svoi-theme] .expense-form-section {
  margin: 19px 0 !important;
}

html[data-svoi-theme] .expense-form-label {
  display: block !important;

  margin: 0 2px 9px !important;

  color: var(--muted) !important;

  font-size: 11px !important;
  font-weight: 750 !important;
}

html[data-svoi-theme] .expense-payer-list {
  display: flex !important;

  gap: 7px !important;

  overflow-x: auto !important;

  padding-bottom: 2px !important;

  scrollbar-width: none !important;
}

html[data-svoi-theme]
.expense-payer-list::-webkit-scrollbar {
  display: none !important;
}

html[data-svoi-theme] .expense-person-chip {
  display: flex !important;
  align-items: center !important;

  gap: 7px !important;

  flex: 0 0 auto !important;

  min-height: 43px !important;

  padding: 5px 11px 5px 6px !important;

  border-radius: 15px !important;

  color: var(--muted) !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;

  font-size: 11px !important;
  font-weight: 750 !important;
}

html[data-svoi-theme] .expense-person-chip > span {
  width: 31px !important;
  height: 31px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 10px !important;

  background:
    rgba(89,126,204,.08) !important;
}

html[data-svoi-theme] .expense-person-chip.active {
  color: var(--text) !important;

  border-color:
    rgba(109,138,217,.35) !important;

  background:
    rgba(91,126,205,.09) !important;
}

html[data-svoi-theme] .expense-participants-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 10px !important;
}

html[data-svoi-theme] .expense-participant-list {
  overflow: hidden !important;

  border-radius: 19px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .expense-participant {
  width: 100% !important;

  display: grid !important;
  grid-template-columns:
    31px minmax(0,1fr) !important;

  align-items: center !important;

  gap: 10px !important;

  min-height: 51px !important;

  padding: 9px 12px !important;

  text-align: left !important;

  background: transparent !important;
  border: 0 !important;

  border-bottom:
    1px solid var(--border) !important;
}

html[data-svoi-theme]
.expense-participant:last-child {
  border-bottom: 0 !important;
}

html[data-svoi-theme]
.expense-participant-check {
  width: 31px !important;
  height: 31px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 10px !important;

  color: transparent !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;

  font-size: 12px !important;
  font-weight: 850 !important;
}

html[data-svoi-theme]
.expense-participant.selected
.expense-participant-check {
  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #6e79cf,
      #638dd5
    ) !important;

  border-color: transparent !important;
}

html[data-svoi-theme] .expense-participant-name {
  color: var(--text) !important;

  font-size: 12px !important;
  font-weight: 700 !important;
}

html[data-svoi-theme] .expense-split-hint {
  display: block !important;

  margin: 8px 2px 0 !important;

  color: var(--muted) !important;

  font-size: 9px !important;
  line-height: 1.35 !important;
}


/* ==========================================
   FRIEND EXPENSES — SETTLEMENTS
   ========================================== */

html[data-svoi-theme] .expense-transfer-actions {
  flex: 0 0 auto !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;

  gap: 7px !important;
}

html[data-svoi-theme] .expense-transfer-actions > strong {
  color: var(--text) !important;

  font-size: 13px !important;
  font-weight: 850 !important;

  white-space: nowrap !important;
}

html[data-svoi-theme] .expense-settle-btn {
  min-height: 31px !important;

  padding: 0 11px !important;

  border: 0 !important;
  border-radius: 11px !important;

  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #6f78cf,
      #638bd5
    ) !important;

  box-shadow:
    0 5px 14px rgba(79,93,178,.17)
    !important;

  font-size: 10px !important;
  font-weight: 800 !important;
}


/* HISTORY */

html[data-svoi-theme] .expense-settlement-history {
  overflow: hidden !important;

  border-radius: 20px !important;

  background: var(--glass2) !important;

  border:
    1px solid var(--border) !important;
}

html[data-svoi-theme] .expense-settlement-row {
  display: grid !important;

  grid-template-columns:
    34px minmax(0,1fr) auto !important;

  align-items: center !important;

  gap: 10px !important;

  min-height: 62px !important;

  padding: 10px 12px !important;

  border-bottom:
    1px solid var(--border) !important;
}

html[data-svoi-theme]
.expense-settlement-row:last-child {
  border-bottom: 0 !important;
}

html[data-svoi-theme] .expense-settlement-icon {
  width: 34px !important;
  height: 34px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 11px !important;

  color: #70a58b !important;

  background:
    rgba(82,151,117,.08) !important;

  font-size: 12px !important;
  font-weight: 900 !important;
}

html[data-svoi-theme] .expense-settlement-copy {
  min-width: 0 !important;
}

html[data-svoi-theme] .expense-settlement-copy b {
  display: block !important;

  overflow: hidden !important;

  color: var(--text) !important;

  font-size: 12px !important;

  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

html[data-svoi-theme] .expense-settlement-copy small {
  display: block !important;

  margin-top: 3px !important;

  color: var(--muted) !important;

  font-size: 9px !important;
}

html[data-svoi-theme] .expense-settlement-right {
  display: flex !important;
  align-items: center !important;

  gap: 6px !important;
}

html[data-svoi-theme] .expense-settlement-right strong {
  color: var(--text) !important;

  font-size: 11px !important;
  font-weight: 850 !important;

  white-space: nowrap !important;
}

html[data-svoi-theme] .expense-settlement-right button {
  width: 30px !important;
  height: 30px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  border: 0 !important;
  border-radius: 10px !important;

  color: var(--muted) !important;

  background:
    rgba(255,255,255,.025) !important;
}


/* SETTLEMENT SHEET */

html[data-svoi-theme] .settlement-recipient-card {
  display: flex !important;
  align-items: center !important;

  gap: 12px !important;

  margin-bottom: 18px !important;
  padding: 14px !important;

  border-radius: 19px !important;

  background:
    linear-gradient(
      135deg,
      rgba(92,127,207,.09),
      rgba(112,99,207,.04)
    ),
    var(--glass2) !important;

  border:
    1px solid rgba(109,137,212,.18)
    !important;
}

html[data-svoi-theme] .settlement-recipient-icon {
  width: 40px !important;
  height: 40px !important;

  display: grid !important;
  place-items: center !important;

  flex: 0 0 40px !important;

  border-radius: 13px !important;

  color: #8399dc !important;

  background:
    rgba(88,125,201,.09) !important;

  font-size: 18px !important;
  font-weight: 850 !important;
}

html[data-svoi-theme] .settlement-recipient-card small,
html[data-svoi-theme] .settlement-recipient-card b {
  display: block !important;
}

html[data-svoi-theme] .settlement-recipient-card small {
  color: var(--muted) !important;

  font-size: 8px !important;
  font-weight: 850 !important;

  letter-spacing: .1em !important;
}

html[data-svoi-theme] .settlement-recipient-card b {
  margin-top: 4px !important;

  color: var(--text) !important;

  font-size: 15px !important;
}

html[data-svoi-theme] .settlement-hint {
  display: block !important;

  margin: -4px 2px 18px !important;

  color: var(--muted) !important;

  font-size: 9px !important;
  line-height: 1.4 !important;
}


/* ==========================================
   FRIENDS — AI TRIPS
   ========================================== */

html[data-svoi-theme] .ai-trip-hero {
  padding: 23px !important;
  margin-bottom: 17px !important;

  border-radius: 29px !important;

  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(116,100,210,.18),
      transparent 42%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(77,132,207,.10),
      transparent 40%
    ),
    var(--glass2) !important;

  border:
    1px solid var(--border) !important;
}

html[data-svoi-theme] .ai-trip-badge {
  display: inline-flex !important;

  padding: 6px 9px !important;

  border-radius: 10px !important;

  color: #9186e7 !important;

  background:
    rgba(114,94,211,.09) !important;

  font-size: 8px !important;
  font-weight: 900 !important;

  letter-spacing: .11em !important;
}

html[data-svoi-theme] .ai-trip-hero h2 {
  margin: 13px 0 7px !important;

  font-size: 29px !important;
  line-height: 1.05 !important;

  letter-spacing: -.04em !important;
}

html[data-svoi-theme] .ai-trip-hero p {
  margin: 0 !important;

  max-width: 310px !important;

  color: var(--muted) !important;

  font-size: 12px !important;
  line-height: 1.45 !important;
}

html[data-svoi-theme] .ai-trip-hero .primary {
  margin-top: 18px !important;

  min-height: 51px !important;

  border-radius: 17px !important;
}


/* trip list */

html[data-svoi-theme] .ai-trip-list-head {
  margin-top: 22px !important;
}

html[data-svoi-theme] .ai-trip-list {
  display: flex !important;
  flex-direction: column !important;

  gap: 9px !important;
}

html[data-svoi-theme] .ai-trip-list-card {
  width: 100% !important;

  padding: 17px !important;

  text-align: left !important;

  border-radius: 22px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .ai-trip-card-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

html[data-svoi-theme] .ai-trip-card-icon {
  width: 38px !important;
  height: 38px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 12px !important;

  color: #879ce0 !important;

  background:
    rgba(91,126,202,.09) !important;
}

html[data-svoi-theme] .ai-trip-card-status {
  color: #8f87dc !important;

  font-size: 8px !important;
  font-weight: 850 !important;

  letter-spacing: .10em !important;
}

html[data-svoi-theme] .ai-trip-list-card h3 {
  margin: 13px 0 9px !important;

  color: var(--text) !important;

  font-size: 18px !important;
}

html[data-svoi-theme] .ai-trip-card-meta {
  display: flex !important;
  justify-content: space-between !important;

  gap: 10px !important;

  color: var(--muted) !important;

  font-size: 10px !important;
}

html[data-svoi-theme] .ai-trip-card-meta strong {
  color: var(--text) !important;

  font-size: 10px !important;
}


/* empty */

html[data-svoi-theme] .ai-trip-empty {
  min-height: 170px !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 5px !important;

  padding: 24px !important;

  text-align: center !important;

  border-radius: 23px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .ai-trip-empty > span {
  color: #9085e4 !important;

  font-size: 23px !important;
}

html[data-svoi-theme] .ai-trip-empty b {
  margin-top: 5px !important;

  color: var(--text) !important;

  font-size: 13px !important;
}

html[data-svoi-theme] .ai-trip-empty small {
  color: var(--muted) !important;

  font-size: 10px !important;
}


/* create form */

html[data-svoi-theme] .ai-trip-two-fields {
  display: grid !important;
  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap: 8px !important;
}

html[data-svoi-theme] .ai-trip-form-section {
  margin: 18px 0 !important;
}

html[data-svoi-theme] .ai-trip-form-label {
  display: block !important;

  margin: 0 2px 8px !important;

  color: var(--muted) !important;

  font-size: 11px !important;
  font-weight: 750 !important;
}

html[data-svoi-theme] .ai-trip-chips {
  display: flex !important;
  flex-wrap: wrap !important;

  gap: 7px !important;
}

html[data-svoi-theme] .ai-trip-chips button {
  min-height: 37px !important;

  padding: 0 12px !important;

  border-radius: 13px !important;

  color: var(--muted) !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;

  font-size: 10px !important;
  font-weight: 750 !important;
}

html[data-svoi-theme] .ai-trip-chips button.active {
  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #706fd0,
      #6489d5
    ) !important;

  border-color: transparent !important;
}

html[data-svoi-theme] .ai-trip-generate-btn {
  min-height: 52px !important;

  margin-top: 8px !important;

  border-radius: 17px !important;
}

html[data-svoi-theme] .ai-trip-search-note {
  display: block !important;

  margin-top: 8px !important;

  text-align: center !important;

  color: var(--muted) !important;

  font-size: 8px !important;
}


/* trip detail */

html[data-svoi-theme] .trip-budget-overview {
  padding: 20px !important;
  margin-bottom: 13px !important;

  border-radius: 25px !important;

  background:
    radial-gradient(
      circle at 95% 0%,
      rgba(106,101,211,.14),
      transparent 44%
    ),
    var(--glass2) !important;

  border:
    1px solid var(--border) !important;
}

html[data-svoi-theme] .trip-budget-overview > span {
  color: var(--muted) !important;

  font-size: 8px !important;
  font-weight: 850 !important;

  letter-spacing: .11em !important;
}

html[data-svoi-theme] .trip-budget-overview > strong {
  display: block !important;

  margin: 8px 0 11px !important;

  color: var(--text) !important;

  font-size: 30px !important;
  font-weight: 850 !important;

  letter-spacing: -.04em !important;
}

html[data-svoi-theme] .trip-budget-overview > div {
  display: flex !important;
  justify-content: space-between !important;

  gap: 12px !important;

  color: var(--muted) !important;

  font-size: 10px !important;
}


/* suggestion */

html[data-svoi-theme] .trip-suggestions {
  display: flex !important;
  flex-direction: column !important;

  gap: 12px !important;
}

html[data-svoi-theme] .trip-suggestion-card {
  position: relative !important;

  padding: 19px !important;

  border-radius: 25px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .trip-suggestion-card.selected {
  border-color:
    rgba(117,111,214,.42) !important;

  box-shadow:
    inset 0 0 0 1px rgba(118,110,214,.08)
    !important;
}

html[data-svoi-theme] .trip-suggestion-number {
  width: 31px !important;
  height: 31px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 10px !important;

  color: #9186df !important;

  background:
    rgba(111,95,210,.08) !important;

  font-size: 10px !important;
  font-weight: 900 !important;
}

html[data-svoi-theme] .trip-selected-badge {
  position: absolute !important;

  top: 19px !important;
  right: 19px !important;

  color: #72a38d !important;

  font-size: 8px !important;
  font-weight: 850 !important;

  letter-spacing: .10em !important;
}

html[data-svoi-theme] .trip-suggestion-card h2 {
  margin: 13px 0 6px !important;

  font-size: 22px !important;

  letter-spacing: -.03em !important;
}

html[data-svoi-theme] .trip-suggestion-card > p {
  margin: 0 !important;

  color: var(--muted) !important;

  font-size: 11px !important;
  line-height: 1.45 !important;
}


/* price */

html[data-svoi-theme] .trip-price-main {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;

  gap: 7px !important;

  margin-top: 16px !important;
}

html[data-svoi-theme] .trip-price-main > div {
  padding: 12px !important;

  border-radius: 16px !important;

  background:
    rgba(95,126,201,.055) !important;

  border:
    1px solid var(--border) !important;
}

html[data-svoi-theme] .trip-price-main small,
html[data-svoi-theme] .trip-price-main strong {
  display: block !important;
}

html[data-svoi-theme] .trip-price-main small {
  color: var(--muted) !important;

  font-size: 7px !important;
  font-weight: 850 !important;

  letter-spacing: .09em !important;
}

html[data-svoi-theme] .trip-price-main strong {
  margin-top: 5px !important;

  color: var(--text) !important;

  font-size: 14px !important;
}


/* breakdown */

html[data-svoi-theme] .trip-budget-breakdown {
  margin-top: 9px !important;

  overflow: hidden !important;

  border-radius: 17px !important;

  border:
    1px solid var(--border) !important;
}

html[data-svoi-theme] .trip-budget-breakdown > div {
  display: flex !important;
  justify-content: space-between !important;

  gap: 12px !important;

  min-height: 39px !important;

  align-items: center !important;

  padding: 0 12px !important;

  border-bottom:
    1px solid var(--border) !important;
}

html[data-svoi-theme]
.trip-budget-breakdown > div:last-child {
  border-bottom: 0 !important;
}

html[data-svoi-theme] .trip-budget-breakdown span {
  color: var(--muted) !important;

  font-size: 9px !important;
}

html[data-svoi-theme] .trip-budget-breakdown b {
  color: var(--text) !important;

  font-size: 10px !important;
}


/* why */

html[data-svoi-theme] .trip-why {
  display: flex !important;
  flex-direction: column !important;

  gap: 6px !important;

  margin-top: 14px !important;
}

html[data-svoi-theme] .trip-why small {
  margin-bottom: 2px !important;

  color: var(--muted) !important;

  font-size: 7px !important;
  font-weight: 850 !important;

  letter-spacing: .10em !important;
}

html[data-svoi-theme] .trip-why span {
  color: var(--text) !important;

  font-size: 10px !important;
  line-height: 1.35 !important;
}

html[data-svoi-theme] .trip-caveats {
  display: flex !important;
  flex-direction: column !important;

  gap: 5px !important;

  margin-top: 11px !important;
}

html[data-svoi-theme] .trip-caveats span {
  color: var(--muted) !important;

  font-size: 9px !important;
  line-height: 1.35 !important;
}


/* vote */

html[data-svoi-theme] .trip-vote-row {
  display: grid !important;
  grid-template-columns: 1fr 1.2fr !important;

  gap: 7px !important;

  margin-top: 16px !important;
}

html[data-svoi-theme] .trip-vote-row button {
  min-height: 44px !important;

  border-radius: 14px !important;

  font-size: 10px !important;
  font-weight: 800 !important;
}

html[data-svoi-theme] .trip-vote-btn {
  color: var(--text) !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .trip-vote-btn.active {
  color: #8a99df !important;

  border-color:
    rgba(112,130,215,.32) !important;
}

html[data-svoi-theme] .trip-vote-btn span {
  margin-left: 5px !important;

  opacity: .7 !important;
}

html[data-svoi-theme] .trip-select-btn {
  color: #fff !important;

  border: 0 !important;

  background:
    linear-gradient(
      135deg,
      #716fcf,
      #648bd5
    ) !important;
}

html[data-svoi-theme] .trip-select-btn.selected {
  color: #75a38f !important;

  background:
    rgba(77,145,112,.07) !important;

  border:
    1px solid rgba(80,153,119,.13) !important;
}


/* chosen */

html[data-svoi-theme] .trip-next-step {
  display: flex !important;
  align-items: center !important;

  gap: 11px !important;

  margin-top: 12px !important;
  padding: 14px !important;

  border-radius: 19px !important;

  background:
    rgba(76,148,111,.06) !important;

  border:
    1px solid rgba(88,158,123,.12) !important;
}

html[data-svoi-theme] .trip-next-step > span {
  width: 35px !important;
  height: 35px !important;

  display: grid !important;
  place-items: center !important;

  flex: 0 0 35px !important;

  border-radius: 11px !important;

  color: #75a38f !important;

  background:
    rgba(75,145,110,.08) !important;
}

html[data-svoi-theme] .trip-next-step b,
html[data-svoi-theme] .trip-next-step small {
  display: block !important;
}

html[data-svoi-theme] .trip-next-step b {
  color: var(--text) !important;

  font-size: 12px !important;
}

html[data-svoi-theme] .trip-next-step small {
  margin-top: 3px !important;

  color: var(--muted) !important;

  font-size: 9px !important;
  line-height: 1.35 !important;
}


/* ==========================================
   AI TRIP FORM — ALIGNMENT FINAL
   ========================================== */

html[data-svoi-theme] .ai-trip-form {
  width: 100% !important;
  padding: 0 !important;
}


/* ---------- ОБЩИЕ ПОЛЯ ---------- */

html[data-svoi-theme] .ai-trip-form .field {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;

  margin: 0 0 17px !important;
}

html[data-svoi-theme] .ai-trip-form .field > span {
  display: block !important;

  margin: 0 4px 8px !important;

  color: var(--muted) !important;

  font-size: 11px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
}

html[data-svoi-theme] .ai-trip-form .field > input,
html[data-svoi-theme] .ai-trip-form .field > textarea {
  width: 100% !important;
  min-width: 0 !important;

  box-sizing: border-box !important;

  border-radius: 18px !important;

  color: var(--text) !important;
  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035)
    !important;
}


/* ---------- ДАТЫ / ДНИ / БЮДЖЕТ ---------- */

html[data-svoi-theme] .ai-trip-two-fields {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;

  gap: 10px !important;

  width: 100% !important;
  margin: 0 !important;
}

html[data-svoi-theme] .ai-trip-two-fields .field {
  min-width: 0 !important;
  width: 100% !important;

  margin-bottom: 17px !important;
}

html[data-svoi-theme] .ai-trip-two-fields input {
  width: 100% !important;
  min-width: 0 !important;
  height: 58px !important;
  min-height: 58px !important;

  box-sizing: border-box !important;

  padding: 0 14px !important;

  font-size: 17px !important;
  font-weight: 650 !important;

  line-height: 58px !important;
}


/* iOS DATE */

html[data-svoi-theme]
.ai-trip-form input[type="date"] {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;
  height: 58px !important;

  padding: 0 12px !important;

  text-align: center !important;

  font-size: 15px !important;
  font-weight: 620 !important;

  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

html[data-svoi-theme]
.ai-trip-form input[type="date"]::-webkit-date-and-time-value {
  text-align: center !important;
  min-height: 58px !important;
  line-height: 58px !important;
}


/* ДНИ */

html[data-svoi-theme]
.ai-trip-form input[name="duration_days"] {
  font-size: 18px !important;
  font-weight: 650 !important;
}


/* БЮДЖЕТ */

html[data-svoi-theme]
.ai-trip-form .expense-amount-field {
  position: relative !important;

  width: 100% !important;
  min-width: 0 !important;
}

html[data-svoi-theme]
.ai-trip-form .expense-amount-field input {
  width: 100% !important;
  min-width: 0 !important;
  height: 58px !important;
  min-height: 58px !important;

  box-sizing: border-box !important;

  padding:
    0 44px
    0 15px !important;

  border-radius: 18px !important;

  color: var(--text) !important;
  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;

  font-size: 18px !important;
  font-weight: 700 !important;

  line-height: 58px !important;
}

html[data-svoi-theme]
.ai-trip-form .expense-amount-field > span {
  position: absolute !important;

  top: 50% !important;
  right: 16px !important;

  transform: translateY(-50%) !important;

  margin: 0 !important;

  color: var(--muted) !important;

  font-size: 17px !important;
  font-weight: 750 !important;

  pointer-events: none !important;
}


/* ---------- СЕКЦИИ ---------- */

html[data-svoi-theme] .ai-trip-form-section {
  width: 100% !important;

  margin: 4px 0 22px !important;
}

html[data-svoi-theme] .ai-trip-form-label {
  display: block !important;

  margin: 0 4px 10px !important;

  color: var(--muted) !important;

  font-size: 11px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
}


/* ---------- ЧИПЫ ---------- */

html[data-svoi-theme] .ai-trip-chips {
  display: flex !important;
  flex-wrap: wrap !important;

  gap: 8px !important;

  width: 100% !important;
}

html[data-svoi-theme] .ai-trip-chips button {
  min-height: 42px !important;

  padding: 0 14px !important;

  border-radius: 14px !important;

  color: var(--muted) !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;

  font-size: 11px !important;
  font-weight: 730 !important;

  line-height: 1 !important;

  white-space: nowrap !important;
}

html[data-svoi-theme] .ai-trip-chips button.active {
  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #736fd1,
      #668bd6
    ) !important;

  border-color: transparent !important;

  box-shadow:
    0 7px 18px rgba(77,88,175,.18),
    inset 0 1px 0 rgba(255,255,255,.13)
    !important;
}


/* ---------- УЧАСТНИКИ ---------- */

html[data-svoi-theme]
.ai-trip-form .expense-participants-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  width: 100% !important;

  margin: 0 0 9px !important;
}

html[data-svoi-theme]
.ai-trip-form .expense-participants-head
.ai-trip-form-label {
  margin: 0 4px !important;
}

html[data-svoi-theme]
.ai-trip-form [data-trip-people-count] {
  min-width: 28px !important;

  margin-right: 5px !important;

  color: var(--muted) !important;

  text-align: right !important;

  font-size: 11px !important;
  font-weight: 760 !important;
}

html[data-svoi-theme]
.ai-trip-form .expense-participant-list {
  width: 100% !important;

  overflow: hidden !important;

  border-radius: 18px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme]
.ai-trip-form .expense-participant {
  width: 100% !important;
  min-height: 58px !important;

  display: grid !important;
  grid-template-columns: 40px minmax(0,1fr) !important;
  align-items: center !important;

  gap: 10px !important;

  padding: 8px 13px !important;

  border: 0 !important;

  text-align: left !important;
}

html[data-svoi-theme]
.ai-trip-form .expense-participant-check {
  width: 38px !important;
  height: 38px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 12px !important;
}

html[data-svoi-theme]
.ai-trip-form .expense-participant-name {
  color: var(--text) !important;

  font-size: 13px !important;
  font-weight: 720 !important;
}


/* ---------- ПОЖЕЛАНИЯ ---------- */

html[data-svoi-theme]
.ai-trip-form textarea[name="notes"] {
  min-height: 132px !important;

  padding: 15px 16px !important;

  resize: none !important;

  font-size: 14px !important;
  line-height: 1.45 !important;
}


/* ---------- КНОПКА ---------- */

html[data-svoi-theme] .ai-trip-generate-btn {
  width: 100% !important;
  min-height: 58px !important;

  margin: 3px 0 0 !important;

  border-radius: 18px !important;

  font-size: 16px !important;
  font-weight: 820 !important;
}


/* ---------- ПОДСКАЗКА ---------- */

html[data-svoi-theme] .ai-trip-search-note {
  display: block !important;

  max-width: 310px !important;

  margin: 10px auto 2px !important;

  color: var(--muted) !important;

  text-align: center !important;

  font-size: 9px !important;
  line-height: 1.4 !important;
}


/* ---------- УБИРАЕМ IOS ПЕРЕКОСЫ ---------- */

html[data-svoi-theme]
.ai-trip-form input,
html[data-svoi-theme]
.ai-trip-form textarea,
html[data-svoi-theme]
.ai-trip-form button {
  -webkit-tap-highlight-color: transparent !important;
}

html[data-svoi-theme]
.ai-trip-form input {
  appearance: none;
  -webkit-appearance: none;
}

html[data-svoi-theme]
.ai-trip-form input[type="date"] {
  appearance: auto !important;
  -webkit-appearance: auto !important;
}


/* ==========================================
   AI TRIP DATES — iPHONE FINAL FIX
   ========================================== */

html[data-svoi-theme]
.ai-trip-form
.ai-trip-two-fields {
  width: 100% !important;

  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;

  gap: 10px !important;

  overflow: visible !important;
}

html[data-svoi-theme]
.ai-trip-form
.ai-trip-two-fields > .field {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  overflow: hidden !important;

  box-sizing: border-box !important;
}

html[data-svoi-theme]
.ai-trip-form
.ai-trip-two-fields > .field > span {
  width: 100% !important;

  margin:
    0 5px
    8px !important;

  box-sizing: border-box !important;
}


/* native iOS date */

html[data-svoi-theme]
.ai-trip-form
.ai-trip-two-fields
input[type="date"] {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  inline-size: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;

  height: 58px !important;
  min-height: 58px !important;

  margin: 0 !important;
  padding:
    0 10px !important;

  box-sizing: border-box !important;

  overflow: hidden !important;

  border-radius: 18px !important;

  color: var(--text) !important;
  -webkit-text-fill-color:
    var(--text) !important;

  background:
    var(--glass2) !important;

  border:
    1px solid
    var(--border) !important;

  font-size: 14px !important;
  font-weight: 620 !important;

  text-align: center !important;

  appearance: auto !important;
  -webkit-appearance: auto !important;
}


/* iOS internal date text */

html[data-svoi-theme]
.ai-trip-form
input[type="date"]::-webkit-date-and-time-value {
  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;

  text-align: center !important;

  color: var(--text) !important;

  font-size: 14px !important;
}


/* убираем внутренние iOS отступы */

html[data-svoi-theme]
.ai-trip-form
input[type="date"]::-webkit-datetime-edit {
  padding: 0 !important;

  min-width: 0 !important;
}

html[data-svoi-theme]
.ai-trip-form
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  padding: 0 !important;

  min-width: 0 !important;
}


/* календарь остаётся кликабельным */

html[data-svoi-theme]
.ai-trip-form
input[type="date"]::-webkit-calendar-picker-indicator {
  margin: 0 !important;

  opacity: .65 !important;
}


/* Дней + бюджет тоже точно по одной сетке */

html[data-svoi-theme]
.ai-trip-two-fields
input[name="duration_days"],

html[data-svoi-theme]
.ai-trip-two-fields
.expense-amount-field,

html[data-svoi-theme]
.ai-trip-two-fields
.expense-amount-field input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  box-sizing: border-box !important;
}


/* ==========================================
   AI TRIP — CUSTOM DATE CARDS
   ========================================== */

html[data-svoi-theme]
.ai-trip-dates-grid {
  overflow: visible !important;
}

html[data-svoi-theme]
.ai-trip-date-field {
  position: relative !important;

  width: 100% !important;
  min-width: 0 !important;

  overflow: visible !important;
}

html[data-svoi-theme]
.ai-trip-date-card {
  width: 100% !important;
  min-width: 0 !important;
  height: 58px !important;

  display: grid !important;
  grid-template-columns:
    minmax(0,1fr) 22px !important;

  align-items: center !important;

  gap: 7px !important;

  padding: 0 13px !important;

  box-sizing: border-box !important;

  overflow: hidden !important;

  border-radius: 18px !important;

  color: var(--muted) !important;

  background: var(--glass2) !important;

  border:
    1px solid var(--border) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.035)
    !important;

  text-align: left !important;

  -webkit-tap-highlight-color:
    transparent !important;
}

html[data-svoi-theme]
.ai-trip-date-card.has-value {
  color: var(--text) !important;

  border-color:
    rgba(118,125,194,.38) !important;
}

html[data-svoi-theme]
.ai-trip-date-card > span:first-child {
  min-width: 0 !important;

  overflow: hidden !important;

  font-size: 13px !important;
  font-weight: 620 !important;

  line-height: 1.2 !important;

  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

html[data-svoi-theme]
.ai-trip-date-card svg {
  width: 18px !important;
  height: 18px !important;

  color: #8b82df !important;

  opacity: .9 !important;
}


/* Нативный picker остаётся рабочим,
   но больше не ломает нашу сетку */

html[data-svoi-theme]
.ai-trip-date-native {
  position: fixed !important;

  left: -10000px !important;
  top: 0 !important;

  width: 1px !important;
  height: 1px !important;

  min-width: 1px !important;
  min-height: 1px !important;

  opacity: .01 !important;

  pointer-events: none !important;

  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;

  -webkit-appearance: auto !important;
  appearance: auto !important;
}


/* ==========================================
   TRIP FINANCE — PLAN / FACT
   ========================================== */

html[data-svoi-theme] .trip-finance-overview {
  display: grid !important;
  grid-template-columns:
    repeat(3,minmax(0,1fr)) !important;

  gap: 7px !important;

  margin-top: 13px !important;
}

html[data-svoi-theme] .trip-finance-overview > div {
  min-width: 0 !important;

  padding: 12px 10px !important;

  border-radius: 17px !important;

  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .trip-finance-overview small {
  display: block !important;

  color: var(--muted) !important;

  font-size: 7px !important;
  font-weight: 850 !important;

  letter-spacing: .09em !important;
}

html[data-svoi-theme] .trip-finance-overview strong {
  display: block !important;

  margin-top: 6px !important;

  overflow: hidden !important;

  color: var(--text) !important;

  font-size: 12px !important;
  font-weight: 850 !important;

  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

html[data-svoi-theme]
.trip-finance-overview strong.over {
  color: #d7838d !important;
}

html[data-svoi-theme] .trip-add-real-expense {
  min-height: 48px !important;

  margin-top: 8px !important;

  border-radius: 16px !important;
}


/* ==========================================
   TRIP CHECKLIST
   ========================================== */

html[data-svoi-theme] .trip-checklist-section {
  margin-top: 23px !important;
  padding-bottom: 8px !important;
}

html[data-svoi-theme]
.trip-checklist-section .section-head > div small {
  display: block !important;

  margin-top: 3px !important;

  color: var(--muted) !important;

  font-size: 9px !important;
}


/* LIST */

html[data-svoi-theme] .trip-checklist-list {
  overflow: hidden !important;

  border-radius: 21px !important;

  background: var(--glass2) !important;

  border:
    1px solid var(--border) !important;
}

html[data-svoi-theme] .trip-checklist-item {
  display: grid !important;

  grid-template-columns:
    35px minmax(0,1fr) 32px !important;

  align-items: center !important;

  gap: 10px !important;

  min-height: 62px !important;

  padding: 10px 11px !important;

  border-bottom:
    1px solid var(--border) !important;
}

html[data-svoi-theme]
.trip-checklist-item:last-child {
  border-bottom: 0 !important;
}


/* CHECK */

html[data-svoi-theme] .trip-check-toggle {
  width: 35px !important;
  height: 35px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  border-radius: 12px !important;

  color: transparent !important;

  background: var(--glass2) !important;

  border:
    1px solid var(--border) !important;

  font-size: 13px !important;
  font-weight: 900 !important;
}

html[data-svoi-theme]
.trip-checklist-item.done
.trip-check-toggle {
  color: #fff !important;

  border-color: transparent !important;

  background:
    linear-gradient(
      135deg,
      #6f78cf,
      #638cd5
    ) !important;
}


/* COPY */

html[data-svoi-theme] .trip-check-copy {
  min-width: 0 !important;
}

html[data-svoi-theme] .trip-check-copy b {
  display: block !important;

  overflow: hidden !important;

  color: var(--text) !important;

  font-size: 12px !important;
  line-height: 1.25 !important;

  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

html[data-svoi-theme] .trip-check-copy small {
  display: block !important;

  margin-top: 4px !important;

  color: var(--muted) !important;

  font-size: 9px !important;
}

html[data-svoi-theme]
.trip-checklist-item.done
.trip-check-copy {
  opacity: .52 !important;
}

html[data-svoi-theme]
.trip-checklist-item.done
.trip-check-copy b {
  text-decoration:
    line-through !important;
}


/* DELETE */

html[data-svoi-theme] .trip-check-delete {
  width: 32px !important;
  height: 32px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  border: 0 !important;
  border-radius: 10px !important;

  color: var(--muted) !important;
  background: transparent !important;
}


/* EMPTY */

html[data-svoi-theme] .trip-checklist-empty {
  width: 100% !important;

  display: flex !important;
  align-items: center !important;

  gap: 12px !important;

  padding: 16px !important;

  text-align: left !important;

  border-radius: 20px !important;

  background: var(--glass2) !important;

  border:
    1px solid var(--border) !important;
}

html[data-svoi-theme]
.trip-checklist-empty > span {
  width: 39px !important;
  height: 39px !important;

  display: grid !important;
  place-items: center !important;

  flex: 0 0 39px !important;

  border-radius: 13px !important;

  color: #8799db !important;

  background:
    rgba(92,126,200,.09) !important;

  font-weight: 900 !important;
}

html[data-svoi-theme]
.trip-checklist-empty b,
html[data-svoi-theme]
.trip-checklist-empty small {
  display: block !important;
}

html[data-svoi-theme]
.trip-checklist-empty b {
  color: var(--text) !important;

  font-size: 12px !important;
}

html[data-svoi-theme]
.trip-checklist-empty small {
  margin-top: 4px !important;

  color: var(--muted) !important;

  font-size: 9px !important;
  line-height: 1.35 !important;
}


/* ASSIGNEES */

html[data-svoi-theme] .trip-assignee-list {
  display: flex !important;
  flex-wrap: wrap !important;

  gap: 7px !important;
}

html[data-svoi-theme]
.trip-assignee-list button {
  min-height: 38px !important;

  padding: 0 12px !important;

  border-radius: 13px !important;

  color: var(--muted) !important;

  background: var(--glass2) !important;

  border:
    1px solid var(--border) !important;

  font-size: 10px !important;
  font-weight: 750 !important;
}

html[data-svoi-theme]
.trip-assignee-list button.active {
  color: #fff !important;

  border-color: transparent !important;

  background:
    linear-gradient(
      135deg,
      #716fd0,
      #658bd5
    ) !important;
}


/* ==========================================
   HOME — SPACE PROFILE SELECTOR
   ========================================== */

html[data-svoi-theme] .profile-home {
  width: 100% !important;

  padding-bottom:
    calc(
      28px +
      env(safe-area-inset-bottom)
    ) !important;
}


/* TOP */

html[data-svoi-theme] .profile-home-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 14px !important;

  margin: 2px 0 31px !important;
}

html[data-svoi-theme] .profile-home-brand {
  display: inline-flex !important;
  align-items: center !important;

  gap: 7px !important;
}

html[data-svoi-theme]
.profile-home-brand > span {
  width: 29px !important;
  height: 29px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 10px !important;

  color: #8d84e1 !important;

  background:
    rgba(110,96,207,.08) !important;

  border:
    1px solid rgba(128,113,218,.11)
    !important;
}

html[data-svoi-theme]
.profile-home-brand > b {
  color: var(--text) !important;

  font-size: 12px !important;
  font-weight: 880 !important;

  letter-spacing: .12em !important;
}


/* INTRO */

html[data-svoi-theme] .profile-home-intro {
  margin-bottom: 24px !important;
}

html[data-svoi-theme]
.profile-home-intro h1 {
  margin: 0 !important;

  color: var(--text) !important;

  font-size: 34px !important;
  font-weight: 850 !important;

  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
}

html[data-svoi-theme]
.profile-home-intro p {
  max-width: 320px !important;

  margin: 9px 0 0 !important;

  color: var(--muted) !important;

  font-size: 12px !important;
  line-height: 1.45 !important;
}


/* LIST */

html[data-svoi-theme] .profile-space-list {
  display: flex !important;
  flex-direction: column !important;

  gap: 11px !important;
}


/* CARD */

html[data-svoi-theme] .space-profile-card {
  position: relative !important;

  width: 100% !important;
  min-height: 128px !important;

  display: grid !important;

  grid-template-columns:
    84px
    minmax(0,1fr)
    34px !important;

  align-items: center !important;

  gap: 14px !important;

  padding: 18px !important;

  overflow: hidden !important;

  text-align: left !important;

  border-radius: 27px !important;

  color: var(--text) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.012)
    ),
    var(--glass2) !important;

  border:
    1px solid var(--border) !important;

  box-shadow:
    0 13px 34px
      rgba(0,0,0,.045),
    inset 0 1px 0
      rgba(255,255,255,.045)
    !important;

  -webkit-tap-highlight-color:
    transparent !important;

  transition:
    transform .16s ease,
    border-color .16s ease !important;
}

html[data-svoi-theme]
.space-profile-card:active {
  transform: scale(.978) !important;
}


/* PAIR = violet atmosphere */

html[data-svoi-theme]
.space-profile-card.couple {
  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(126,103,219,.18),
      transparent 42%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(86,112,206,.08),
      transparent 45%
    ),
    var(--glass2) !important;

  border-color:
    rgba(129,116,210,.17) !important;
}


/* FRIENDS = blue atmosphere */

html[data-svoi-theme]
.space-profile-card.friends {
  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(75,133,209,.16),
      transparent 42%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(75,103,178,.06),
      transparent 44%
    ),
    var(--glass2) !important;

  border-color:
    rgba(93,137,208,.15) !important;
}


/* VISUAL */

html[data-svoi-theme] .space-profile-visual {
  position: relative !important;

  width: 80px !important;
  height: 80px !important;

  display: grid !important;
  place-items: center !important;

  flex: 0 0 auto !important;

  border-radius: 25px !important;
}

html[data-svoi-theme]
.space-profile-card.couple
.space-profile-visual {
  background:
    linear-gradient(
      145deg,
      rgba(119,99,211,.18),
      rgba(91,120,210,.08)
    ) !important;

  border:
    1px solid rgba(135,118,220,.16)
    !important;
}

html[data-svoi-theme]
.space-profile-card.friends
.space-profile-visual {
  background:
    linear-gradient(
      145deg,
      rgba(74,130,207,.16),
      rgba(81,113,185,.07)
    ) !important;

  border:
    1px solid rgba(88,140,214,.15)
    !important;
}

html[data-svoi-theme]
.space-profile-main-icon {
  display: grid !important;
  place-items: center !important;

  color: #8d88df !important;
}

html[data-svoi-theme]
.space-profile-card.friends
.space-profile-main-icon {
  color: #78a0dc !important;
}


/* MEMBER AVATARS */

html[data-svoi-theme]
.space-profile-avatars {
  position: absolute !important;

  right: -5px !important;
  bottom: -5px !important;

  display: flex !important;

  padding-left: 7px !important;
}

html[data-svoi-theme]
.space-profile-avatar {
  width: 25px !important;
  height: 25px !important;

  display: grid !important;
  place-items: center !important;

  margin-left: -7px !important;

  border-radius: 50% !important;

  color: var(--text) !important;

  background:
    rgba(33,39,58,.94) !important;

  border:
    2px solid var(--surface) !important;

  font-size: 7px !important;
  font-weight: 850 !important;
}


/* COPY */

html[data-svoi-theme] .space-profile-info {
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;
}

html[data-svoi-theme]
.space-profile-info small {
  margin-bottom: 7px !important;

  color: var(--muted) !important;

  font-size: 8px !important;
  font-weight: 880 !important;

  line-height: 1 !important;
  letter-spacing: .12em !important;
}

html[data-svoi-theme]
.space-profile-card.couple
.space-profile-info small {
  color: #9288df !important;
}

html[data-svoi-theme]
.space-profile-card.friends
.space-profile-info small {
  color: #78a0d8 !important;
}

html[data-svoi-theme]
.space-profile-info b {
  display: block !important;

  overflow: hidden !important;

  color: var(--text) !important;

  font-size: 19px !important;
  font-weight: 810 !important;

  line-height: 1.12 !important;

  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

html[data-svoi-theme]
.space-profile-info > span {
  display: block !important;

  margin-top: 6px !important;

  overflow: hidden !important;

  color: var(--muted) !important;

  font-size: 10px !important;

  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}


/* ARROW */

html[data-svoi-theme]
.space-profile-enter {
  width: 34px !important;
  height: 34px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 12px !important;

  color: var(--muted) !important;

  background:
    rgba(255,255,255,.025) !important;

  border:
    1px solid var(--border) !important;
}


/* CREATE FRIEND GROUP */

html[data-svoi-theme]
.space-profile-card.new-friends {
  min-height: 105px !important;

  opacity: .82 !important;

  background:
    transparent !important;

  border:
    1px dashed
    rgba(124,133,170,.28) !important;
}

html[data-svoi-theme]
.space-profile-card.new-friends
.space-profile-visual {
  height: 66px !important;
  width: 66px !important;

  border-radius: 21px !important;

  color: var(--muted) !important;

  background:
    rgba(255,255,255,.025) !important;

  border:
    1px solid var(--border) !important;
}

html[data-svoi-theme]
.space-profile-card.new-friends {
  grid-template-columns:
    70px
    minmax(0,1fr)
    34px !important;
}


/* FOOTER */

html[data-svoi-theme] .profile-home-footer {
  max-width: 300px !important;

  margin: 22px auto 0 !important;

  color: var(--muted) !important;

  text-align: center !important;

  font-size: 9px !important;
  line-height: 1.5 !important;

  opacity: .7 !important;
}


/* ==========================================
   HOME — PROFILE SELECTOR V2
   ========================================== */

/* вся зона выбора */

html[data-svoi-theme] .profile-space-list {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 11px !important;

  width: 100% !important;
}


/* ==========================================================
   ОБЩАЯ КАРТОЧКА
   ========================================================== */

html[data-svoi-theme] .space-profile-card {
  position: relative !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 176px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 0 !important;

  padding: 18px 13px !important;

  overflow: hidden !important;

  text-align: center !important;

  border-radius: 26px !important;

  box-sizing: border-box !important;

  -webkit-tap-highlight-color:
    transparent !important;

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease !important;
}

html[data-svoi-theme]
.space-profile-card:active {
  transform: scale(.97) !important;
}


/* стрелки полностью убираем */

html[data-svoi-theme]
.space-profile-enter {
  display: none !important;
}


/* ==========================================================
   ПАРА — ГЛАВНЫЙ ПРОФИЛЬ
   ========================================================== */

html[data-svoi-theme]
.space-profile-card.couple {
  grid-column:
    1 / -1 !important;

  min-height: 202px !important;

  padding: 24px 20px 21px !important;

  background:
    radial-gradient(
      circle at 50% 5%,
      rgba(129,104,221,.22),
      transparent 47%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(89,116,208,.08),
      transparent 44%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.012)
    ),
    var(--glass2) !important;

  border:
    1px solid
    rgba(133,116,218,.20) !important;

  box-shadow:
    0 16px 40px rgba(0,0,0,.055),
    inset 0 1px 0
      rgba(255,255,255,.055)
    !important;
}


/* большая иконка пары */

html[data-svoi-theme]
.space-profile-card.couple
.space-profile-visual {
  width: 82px !important;
  height: 82px !important;

  margin: 0 0 14px !important;

  border-radius: 27px !important;

  background:
    linear-gradient(
      145deg,
      rgba(123,99,214,.21),
      rgba(89,119,208,.09)
    ) !important;

  border:
    1px solid
    rgba(143,124,226,.20) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.07)
    !important;
}

html[data-svoi-theme]
.space-profile-card.couple
.space-profile-main-icon {
  color: #9588e7 !important;

  transform: scale(1.08) !important;
}


/* ==========================================================
   КОМПАНИИ
   ========================================================== */

html[data-svoi-theme]
.space-profile-card.friends {
  min-height: 177px !important;

  padding: 18px 11px 16px !important;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(73,132,211,.17),
      transparent 48%
    ),
    var(--glass2) !important;

  border:
    1px solid
    rgba(93,139,211,.16) !important;

  box-shadow:
    0 10px 29px rgba(0,0,0,.04),
    inset 0 1px 0
      rgba(255,255,255,.04)
    !important;
}


/* большая иконка компании */

html[data-svoi-theme]
.space-profile-card.friends
.space-profile-visual {
  width: 68px !important;
  height: 68px !important;

  margin: 0 0 13px !important;

  border-radius: 22px !important;

  background:
    linear-gradient(
      145deg,
      rgba(71,130,207,.18),
      rgba(82,110,185,.07)
    ) !important;

  border:
    1px solid
    rgba(91,142,215,.17) !important;
}

html[data-svoi-theme]
.space-profile-card.friends
.space-profile-main-icon {
  color: #79a0dd !important;
}


/* ==========================================================
   АВАТАРЫ УЧАСТНИКОВ
   ========================================================== */

html[data-svoi-theme]
.space-profile-avatars {
  position: absolute !important;

  right: -7px !important;
  bottom: -6px !important;

  display: flex !important;

  padding: 0 !important;
}

html[data-svoi-theme]
.space-profile-avatar {
  width: 25px !important;
  height: 25px !important;

  display: grid !important;
  place-items: center !important;

  margin-left: -7px !important;

  border-radius: 50% !important;

  color: var(--text) !important;

  background:
    rgba(32,38,57,.96) !important;

  border:
    2px solid
    var(--surface) !important;

  font-size: 7px !important;
  font-weight: 850 !important;

  box-sizing: border-box !important;
}


/* ==========================================================
   ТЕКСТ
   ========================================================== */

html[data-svoi-theme]
.space-profile-info {
  width: 100% !important;
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  text-align: center !important;
}

html[data-svoi-theme]
.space-profile-info small {
  display: block !important;

  margin: 0 0 6px !important;

  font-size: 8px !important;
  font-weight: 880 !important;

  line-height: 1 !important;

  letter-spacing: .13em !important;
}

html[data-svoi-theme]
.space-profile-card.couple
.space-profile-info small {
  color: #968ae5 !important;
}

html[data-svoi-theme]
.space-profile-card.friends
.space-profile-info small {
  color: #79a0db !important;
}


html[data-svoi-theme]
.space-profile-info b {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;

  overflow: hidden !important;

  color: var(--text) !important;

  font-size: 16px !important;
  font-weight: 810 !important;

  line-height: 1.15 !important;

  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

html[data-svoi-theme]
.space-profile-card.couple
.space-profile-info b {
  font-size: 21px !important;
}


html[data-svoi-theme]
.space-profile-info > span {
  display: block !important;

  width: 100% !important;

  margin: 6px 0 0 !important;

  overflow: hidden !important;

  color: var(--muted) !important;

  font-size: 9px !important;
  line-height: 1.25 !important;

  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}


/* ==========================================================
   НОВАЯ КОМПАНИЯ
   ========================================================== */

html[data-svoi-theme]
.space-profile-card.new-friends {
  min-height: 177px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 18px 11px !important;

  opacity: 1 !important;

  background:
    rgba(255,255,255,.012) !important;

  border:
    1px dashed
    rgba(115,132,182,.30) !important;

  box-shadow:
    none !important;
}

html[data-svoi-theme]
.space-profile-card.new-friends
.space-profile-visual {
  width: 68px !important;
  height: 68px !important;

  margin: 0 0 13px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 22px !important;

  color: #8297cf !important;

  background:
    rgba(89,121,191,.055) !important;

  border:
    1px solid
    rgba(109,136,200,.12) !important;
}

html[data-svoi-theme]
.space-profile-card.new-friends
.space-profile-main-icon {
  color: #8398d1 !important;
}


/* чуть приглушаем вторичный текст */

html[data-svoi-theme]
.space-profile-card.new-friends
.space-profile-info > span {
  max-width: 125px !important;

  white-space: normal !important;

  line-height: 1.3 !important;
}


/* ==========================================================
   INTRO — ЧИЩЕ
   ========================================================== */

html[data-svoi-theme]
.profile-home-intro {
  margin-bottom: 22px !important;
}

html[data-svoi-theme]
.profile-home-intro h1 {
  font-size: 32px !important;
}

html[data-svoi-theme]
.profile-home-intro p {
  margin-top: 7px !important;

  font-size: 11px !important;
}


/* ==========================================================
   FOOTER — НЕ ОТВЛЕКАЕТ
   ========================================================== */

html[data-svoi-theme]
.profile-home-footer {
  margin-top: 19px !important;

  opacity: .52 !important;
}


/* очень узкие экраны */

@media (max-width: 340px) {

  html[data-svoi-theme]
  .profile-space-list {
    grid-template-columns:
      1fr !important;
  }

  html[data-svoi-theme]
  .space-profile-card.couple {
    grid-column:
      auto !important;
  }

}


/* ==========================================
   AUTH — SVOI
   ========================================== */

html[data-svoi-theme] .auth-shell {
  min-height: 78vh !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  max-width: 420px !important;

  margin: 0 auto !important;
  padding: 26px 4px !important;
}

html[data-svoi-theme] .auth-logo {
  width: 54px !important;
  height: 54px !important;

  display: grid !important;
  place-items: center !important;

  margin-bottom: 22px !important;

  border-radius: 18px !important;

  color: #9186df !important;

  background:
    linear-gradient(
      145deg,
      rgba(122,105,215,.17),
      rgba(85,119,207,.07)
    ) !important;

  border:
    1px solid
    rgba(132,116,218,.16) !important;
}

html[data-svoi-theme] .auth-heading > span {
  color: #9186df !important;

  font-size: 9px !important;
  font-weight: 900 !important;

  letter-spacing: .16em !important;
}

html[data-svoi-theme] .auth-heading h1 {
  margin: 7px 0 0 !important;

  color: var(--text) !important;

  font-size: 31px !important;
  font-weight: 850 !important;

  letter-spacing: -.04em !important;
}

html[data-svoi-theme] .auth-heading p {
  margin: 8px 0 0 !important;

  color: var(--muted) !important;

  font-size: 12px !important;
}

html[data-svoi-theme] .auth-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;

  gap: 4px !important;

  margin: 25px 0 20px !important;
  padding: 4px !important;

  border-radius: 16px !important;

  background:
    var(--glass2) !important;

  border:
    1px solid var(--border) !important;
}

html[data-svoi-theme] .auth-tabs button {
  min-height: 42px !important;

  border: 0 !important;
  border-radius: 12px !important;

  color: var(--muted) !important;
  background: transparent !important;

  font-size: 11px !important;
  font-weight: 760 !important;
}

html[data-svoi-theme]
.auth-tabs button.active {
  color: var(--text) !important;

  background:
    rgba(118,112,205,.12) !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(130,119,218,.12) !important;
}

html[data-svoi-theme] .auth-form {
  display: flex !important;
  flex-direction: column !important;

  gap: 14px !important;
}

html[data-svoi-theme]
.auth-form .field {
  margin: 0 !important;
}

html[data-svoi-theme]
.auth-form input {
  width: 100% !important;
  height: 57px !important;

  box-sizing: border-box !important;

  border-radius: 18px !important;
}

html[data-svoi-theme]
.auth-main-btn {
  min-height: 56px !important;

  margin-top: 4px !important;

  border-radius: 18px !important;
}


/* KEY CREATED */

html[data-svoi-theme] .auth-success {
  text-align: left !important;
}

html[data-svoi-theme]
.auth-success-check {
  width: 47px !important;
  height: 47px !important;

  display: grid !important;
  place-items: center !important;

  margin-bottom: 15px !important;

  border-radius: 16px !important;

  color: #7e9edc !important;

  background:
    rgba(85,129,203,.09) !important;
}

html[data-svoi-theme]
.auth-success h1 {
  margin: 0 !important;

  color: var(--text) !important;

  font-size: 29px !important;
  font-weight: 850 !important;
}

html[data-svoi-theme]
.auth-success > p {
  margin: 9px 0 20px !important;

  color: var(--muted) !important;

  font-size: 11px !important;
  line-height: 1.5 !important;
}

html[data-svoi-theme]
.auth-key-box {
  padding: 17px !important;

  margin-bottom: 10px !important;

  border-radius: 20px !important;

  background:
    var(--glass2) !important;

  border:
    1px solid
    rgba(125,117,211,.18) !important;
}

html[data-svoi-theme]
.auth-key-box small {
  display: block !important;

  margin-bottom: 8px !important;

  color: var(--muted) !important;

  font-size: 8px !important;
  font-weight: 850 !important;

  letter-spacing: .11em !important;
}

html[data-svoi-theme]
.auth-key-box strong {
  display: block !important;

  color: var(--text) !important;

  font-size: 15px !important;
  font-weight: 780 !important;

  line-height: 1.55 !important;

  overflow-wrap: anywhere !important;

  user-select: text !important;
  -webkit-user-select: text !important;
}

html[data-svoi-theme]
.auth-success .full {
  min-height: 52px !important;

  margin-top: 8px !important;

  border-radius: 17px !important;
}

html[data-svoi-theme]
.auth-key-warning {
  margin-top: 14px !important;

  color: var(--muted) !important;

  text-align: center !important;

  font-size: 9px !important;
  line-height: 1.45 !important;
}


/* PROFILE — LOGOUT */

html[data-svoi-theme] .profile-logout-btn {
  width: 100% !important;
  min-height: 66px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 14px !important;

  padding: 13px 16px !important;

  border-radius: 19px !important;

  text-align: left !important;

  color: #d77f89 !important;

  background:
    rgba(190,76,91,.055) !important;

  border:
    1px solid rgba(204,91,104,.14) !important;
}

html[data-svoi-theme]
.profile-logout-btn > span {
  min-width: 0 !important;
}

html[data-svoi-theme]
.profile-logout-btn b,
html[data-svoi-theme]
.profile-logout-btn small {
  display: block !important;
}

html[data-svoi-theme]
.profile-logout-btn b {
  font-size: 12px !important;
  font-weight: 780 !important;
}

html[data-svoi-theme]
.profile-logout-btn small {
  margin-top: 4px !important;

  color: var(--muted) !important;

  font-size: 9px !important;
}


/* AUTH — INTRO */

html[data-svoi-theme] .auth-about {
  display: grid !important;
  gap: 8px !important;
  margin: 20px 0 4px !important;
}

html[data-svoi-theme] .auth-about > div {
  display: grid !important;
  grid-template-columns: 38px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
}

html[data-svoi-theme] .auth-about > div > span {
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  color: #8b8ee0 !important;
  background: rgba(99,111,204,.08) !important;
}

html[data-svoi-theme] .auth-about p {
  margin: 0 !important;
}

html[data-svoi-theme] .auth-about b,
html[data-svoi-theme] .auth-about small {
  display: block !important;
}

html[data-svoi-theme] .auth-about b {
  color: var(--text) !important;
  font-size: 11px !important;
}

html[data-svoi-theme] .auth-about small {
  margin-top: 3px !important;
  color: var(--muted) !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
}

#bottomNav[hidden] {
  display: none !important;
}


/* ==========================================
   NAMI — GLOBAL BRAND
   ========================================== */

html[data-svoi-theme] .nami-global-brand {
  width: fit-content !important;

  display: inline-flex !important;
  align-items: center !important;

  gap: 9px !important;

  margin: 1px 0 20px !important;
}

html[data-svoi-theme] .nami-global-mark {
  width: 32px !important;
  height: 32px !important;

  display: grid !important;
  place-items: center !important;

  flex: 0 0 32px !important;
}

html[data-svoi-theme] .nami-global-mark svg {
  width: 32px !important;
  height: 32px !important;

  overflow: visible !important;
}

html[data-svoi-theme] .nami-global-word {
  color: var(--text) !important;

  font-size: 15px !important;
  font-weight: 790 !important;

  line-height: 1 !important;
  letter-spacing: .19em !important;
}


/* старые дубли бренда больше не нужны */

html[data-svoi-theme] .profile-home-brand,
html[data-svoi-theme] .auth-logo {
  display: none !important;
}

html[data-svoi-theme] .profile-home-top {
  justify-content: flex-end !important;
}


/* на экране входа чуть больше воздуха */

html[data-svoi-theme] .auth-shell {
  padding-top: 8px !important;
}


/* NAMI — SPACE AVATARS */

html[data-svoi-theme] .space-profile-visual {
  overflow: visible !important;
}

html[data-svoi-theme] .space-profile-photo {
  width: 100% !important;
  height: 100% !important;

  display: block !important;

  object-fit: cover !important;

  border-radius: inherit !important;
}

html[data-svoi-theme] .space-avatar-edit {
  position: absolute !important;

  top: -5px !important;
  right: -5px !important;

  width: 28px !important;
  height: 28px !important;

  display: grid !important;
  place-items: center !important;

  z-index: 5 !important;

  border-radius: 50% !important;

  color: var(--text) !important;

  background:
    rgba(25,29,42,.88) !important;

  border:
    2px solid var(--surface) !important;

  box-shadow:
    0 5px 15px
    rgba(0,0,0,.18) !important;

  backdrop-filter:
    blur(12px) !important;

  -webkit-backdrop-filter:
    blur(12px) !important;
}

html[data-svoi-theme]
.space-profile-card.couple
.space-profile-photo {
  border-radius: 27px !important;
}

html[data-svoi-theme]
.space-profile-card.friends
.space-profile-photo {
  border-radius: 22px !important;
}


/* ==========================================
   NAMI HOME — FINAL POLISH
   ========================================== */

/* логотип заметнее */

html[data-svoi-theme] .nami-global-brand {
  margin: 0 0 10px !important;
  gap: 8px !important;
}

html[data-svoi-theme] .nami-global-mark {
  width: 36px !important;
  height: 36px !important;
}

html[data-svoi-theme] .nami-global-mark svg {
  width: 36px !important;
  height: 36px !important;
}

html[data-svoi-theme] .nami-global-word {
  font-size: 16px !important;
  letter-spacing: .18em !important;
}


/* убираем лишний воздух сверху */

html[data-svoi-theme] .profile-home-top {
  margin: 0 0 12px !important;
}

html[data-svoi-theme] .profile-home-intro {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

html[data-svoi-theme] .profile-home-intro h1 {
  font-size: 30px !important;
  line-height: 1.03 !important;
}

html[data-svoi-theme] .profile-home-intro p {
  margin-top: 6px !important;
}


/* пара компактнее */

html[data-svoi-theme]
.space-profile-card.couple {
  min-height: 176px !important;
  padding: 20px 18px !important;
}

html[data-svoi-theme]
.space-profile-card.couple
.space-profile-visual {
  width: 72px !important;
  height: 72px !important;
  margin-bottom: 11px !important;
}

html[data-svoi-theme]
.space-profile-card.couple
.space-profile-info b {
  font-size: 19px !important;
}


/* компании немного плотнее */

html[data-svoi-theme]
.space-profile-card.friends,
html[data-svoi-theme]
.space-profile-card.new-friends {
  min-height: 160px !important;
}


/* пространство под нижнюю навигацию */

html[data-svoi-theme] .profile-home {
  padding-bottom:
    calc(
      135px +
      env(safe-area-inset-bottom)
    ) !important;
}


/* новая компания не прячется */

html[data-svoi-theme]
.space-profile-card.new-friends {
  margin-bottom: 10px !important;
}


/* аватары чуть чище */

html[data-svoi-theme]
.space-profile-avatar {
  width: 24px !important;
  height: 24px !important;

  background:
    rgba(30,33,47,.91) !important;

  border-width: 2px !important;

  font-size: 7px !important;
}


/* ==========================================
   NAMI HOME — HEADER ALIGN FINAL
   ========================================== */

html[data-svoi-theme] .profile-home {
  padding-top: 0 !important;
}

html[data-svoi-theme] .profile-home-top {
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  margin: 0 0 14px !important;
  padding: 0 !important;
}

html[data-svoi-theme]
.profile-home-top .profile-home-brand {
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
}

html[data-svoi-theme]
.profile-home-top .home-avatar {
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  margin: 0 !important;

  align-self: center !important;

  transform: none !important;
}

html[data-svoi-theme] .profile-home-intro {
  margin: 0 0 18px !important;
  padding: 0 !important;
}

html[data-svoi-theme]
.profile-home-intro h1 {
  margin: 0 !important;
}

html[data-svoi-theme]
.profile-home-intro p {
  margin: 7px 0 0 !important;
}


/* ==========================================
   NAMI — REMOVE EMPTY PAGE SPACE
   ========================================== */

/* приложение больше не растягивает короткие страницы */

html[data-svoi-theme] #app {
  min-height: 0 !important;
  height: auto !important;
}

html[data-svoi-theme] .page {
  min-height: 0 !important;
  height: auto !important;

  padding-bottom:
    calc(
      112px +
      env(safe-area-inset-bottom)
    ) !important;
}


/* убираем старое искусственное растягивание */

html[data-svoi-theme] .page,
html[data-svoi-theme] .profile-home {
  flex: none !important;
}


/* нормальная зона прокрутки над нижним меню */

html[data-svoi-theme],
html[data-svoi-theme] body {
  scroll-padding-bottom:
    calc(
      105px +
      env(safe-area-inset-bottom)
    ) !important;
}


/* последний элемент страницы не создаёт лишний хвост */

html[data-svoi-theme] .page > *:last-child {
  margin-bottom: 0 !important;
}


/* профиль */

html[data-svoi-theme] .settings-list:last-child,
html[data-svoi-theme] .profile-logout-btn {
  margin-bottom: 0 !important;
}


/* игры */

html[data-svoi-theme] .games-grid,
html[data-svoi-theme] .quick-games-grid {
  margin-bottom: 0 !important;
}


/* календарь */

html[data-svoi-theme] .calendar-day-section,
html[data-svoi-theme] .calendar-empty {
  margin-bottom: 0 !important;
}


/* ==========================================
   NAMI — REMOVE EMPTY PAGE SPACE
   ========================================== */

/* приложение больше не растягивает короткие страницы */

html[data-svoi-theme] #app {
  min-height: 0 !important;
  height: auto !important;
}

html[data-svoi-theme] .page {
  min-height: 0 !important;
  height: auto !important;

  padding-bottom:
    calc(
      112px +
      env(safe-area-inset-bottom)
    ) !important;
}


/* убираем старое искусственное растягивание */

html[data-svoi-theme] .page,
html[data-svoi-theme] .profile-home {
  flex: none !important;
}


/* нормальная зона прокрутки над нижним меню */

html[data-svoi-theme],
html[data-svoi-theme] body {
  scroll-padding-bottom:
    calc(
      105px +
      env(safe-area-inset-bottom)
    ) !important;
}


/* последний элемент страницы не создаёт лишний хвост */

html[data-svoi-theme] .page > *:last-child {
  margin-bottom: 0 !important;
}


/* профиль */

html[data-svoi-theme] .settings-list:last-child,
html[data-svoi-theme] .profile-logout-btn {
  margin-bottom: 0 !important;
}


/* игры */

html[data-svoi-theme] .games-grid,
html[data-svoi-theme] .quick-games-grid {
  margin-bottom: 0 !important;
}


/* календарь */

html[data-svoi-theme] .calendar-day-section,
html[data-svoi-theme] .calendar-empty {
  margin-bottom: 0 !important;
}


/* ==========================================
   NAMI — SMART BOTTOM NAV
   ========================================== */

/* длинные страницы — меню закреплено */

html[data-svoi-theme]
body:not(.nav-flow-mode) .page {
  padding-bottom:
    calc(
      112px +
      env(safe-area-inset-bottom)
    ) !important;
}


/* короткие страницы — меню сразу после контента */

html[data-svoi-theme]
body.nav-flow-mode .page {
  padding-bottom: 8px !important;
}


html[data-svoi-theme]
body.nav-flow-mode .bottom-nav {
  position: relative !important;

  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;

  width:
    calc(100% - 48px) !important;

  margin:
    14px 24px
    calc(
      12px +
      env(safe-area-inset-bottom)
    ) !important;

  transform: none !important;
}


/* убираем старые лишние хвосты */

html[data-svoi-theme]
body.nav-flow-mode {
  padding-bottom: 0 !important;
}


/* ==========================================
   NAMI — CLEAN SPACE CARDS
   ========================================== */

/* убираем маленькие аватары участников */
html[data-svoi-theme] .space-profile-avatars,
html[data-svoi-theme] .space-profile-avatar {
  display: none !important;
}


/* иконка пространства чище */
html[data-svoi-theme] .space-profile-visual {
  position: relative !important;
  overflow: visible !important;
}


/* fallback пары */
html[data-svoi-theme]
.space-profile-card.couple
.space-profile-visual:not(:has(.space-profile-photo)) {
  background:
    linear-gradient(
      145deg,
      rgba(255,145,135,.14),
      rgba(130,119,226,.13)
    ) !important;
}


/* fallback компании */
html[data-svoi-theme]
.space-profile-card.friends
.space-profile-visual:not(:has(.space-profile-photo)) {
  background:
    linear-gradient(
      145deg,
      rgba(112,154,231,.15),
      rgba(137,122,221,.10)
    ) !important;
}


/* фото занимает всю карточку аватара */
html[data-svoi-theme] .space-profile-photo {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  border-radius: inherit !important;
}


/* кнопка смены фото */
html[data-svoi-theme] .space-avatar-edit {
  top: auto !important;
  right: -5px !important;
  bottom: -5px !important;

  width: 27px !important;
  height: 27px !important;

  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #8a7de1,
      #719ce5
    ) !important;

  border:
    2px solid rgba(255,255,255,.9) !important;

  box-shadow:
    0 5px 14px rgba(76,81,160,.20) !important;
}


/* название и подпись чуть плотнее */
html[data-svoi-theme]
.space-profile-info small {
  margin-top: 1px !important;
}

html[data-svoi-theme]
.space-profile-info > span {
  margin-top: 5px !important;
}


/* ==========================================
   NAMI HOME — HEADER + BOTTOM FINAL FIX
   ========================================== */

/* NAMI слева, профиль справа — строго одна строка */
html[data-svoi-theme] .profile-home-top {
  width: 100% !important;

  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  grid-template-rows: 48px !important;

  align-items: center !important;

  gap: 12px !important;

  margin: 0 0 18px !important;
  padding: 0 !important;
}

html[data-svoi-theme]
.profile-home-top .profile-home-brand {
  grid-column: 1 !important;
  grid-row: 1 !important;

  display: inline-flex !important;
  align-items: center !important;

  justify-self: start !important;

  margin: 0 !important;
}

html[data-svoi-theme]
.profile-home-top .home-avatar {
  grid-column: 2 !important;
  grid-row: 1 !important;

  position: static !important;

  justify-self: end !important;
  align-self: center !important;

  margin: 0 !important;
  transform: none !important;
}


/* заголовок сразу после шапки */
html[data-svoi-theme] .profile-home-intro {
  margin: 0 0 18px !important;
}


/* чтобы последняя карточка не уходила под меню */
html[data-svoi-theme] .profile-home {
  padding-bottom:
    calc(
      120px +
      env(safe-area-inset-bottom)
    ) !important;
}

html[data-svoi-theme]
.space-profile-card.new-friends {
  margin-bottom: 18px !important;
}


/* нижнюю служебную подпись на главной убираем */
html[data-svoi-theme] .profile-home-footer {
  display: none !important;
}


/* NAMI HOME — ONE HEADER ONLY */

html[data-svoi-theme] .nami-global-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

html[data-svoi-theme] .profile-home-top {
  position: absolute !important;

  top: 0 !important;
  right: 0 !important;

  width: auto !important;
  height: 42px !important;
  min-height: 42px !important;

  display: flex !important;
  align-items: center !important;

  margin: 0 !important;
  padding: 0 !important;
}

html[data-svoi-theme] .profile-home-brand {
  display: none !important;
}

html[data-svoi-theme] .profile-home {
  position: relative !important;
}

html[data-svoi-theme] .profile-home-intro {
  margin-top: 20px !important;
}

/* последняя карточка полностью выше меню */

html[data-svoi-theme] .space-profile-card.new-friends {
  margin-bottom: 105px !important;
}


/* NAMI HOME HEADER — FINAL */

html[data-svoi-theme] .profile-home-top {
  position: static !important;

  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;

  display: grid !important;
  grid-template-columns: 1fr auto !important;

  align-items: center !important;

  margin: 0 0 18px !important;
}

html[data-svoi-theme] .profile-home-brand {
  display: inline-flex !important;
  align-items: center !important;

  gap: 9px !important;

  justify-self: start !important;
}

html[data-svoi-theme] .profile-home-brand > span {
  width: 36px !important;
  height: 36px !important;

  background:
    url('/static/nami-mark.svg')
    center / contain
    no-repeat !important;
}

html[data-svoi-theme] .profile-home-brand b {
  font-size: 16px !important;
  font-weight: 800 !important;

  letter-spacing: .18em !important;
}

html[data-svoi-theme] .profile-home-top .home-avatar {
  position: static !important;

  justify-self: end !important;

  margin: 0 !important;
  transform: none !important;
}

html[data-svoi-theme] .profile-home-intro {
  margin-top: 0 !important;
}


/* NAMI — SPACE AVATARS FINAL */

html[data-svoi-theme] .space-profile-visual {
  position: relative !important;
  overflow: visible !important;
}

html[data-svoi-theme] .space-profile-photo {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

html[data-svoi-theme] .space-avatar-edit {
  position: absolute !important;
  right: -7px !important;
  bottom: -7px !important;

  width: 31px !important;
  height: 31px !important;

  display: grid !important;
  place-items: center !important;

  z-index: 30 !important;

  border-radius: 50% !important;

  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #ff8b87,
      #817fe4
    ) !important;

  border: 2px solid #fff !important;

  box-shadow:
    0 5px 16px rgba(83,74,151,.25) !important;
}


/* NAMI — AVATAR CROP FIX */

html[data-svoi-theme]
.space-profile-card.couple
.space-profile-visual {
  position: relative !important;

  width: 78px !important;
  height: 78px !important;
  min-width: 78px !important;
  min-height: 78px !important;

  flex: 0 0 78px !important;

  border-radius: 25px !important;
}

html[data-svoi-theme]
.space-profile-card.friends
.space-profile-visual {
  position: relative !important;

  width: 70px !important;
  height: 70px !important;
  min-width: 70px !important;
  min-height: 70px !important;

  flex: 0 0 70px !important;

  border-radius: 22px !important;
}

html[data-svoi-theme]
.space-profile-photo {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: cover !important;
  object-position: center !important;

  border-radius: inherit !important;

  display: block !important;
}

/* карандаш остаётся снаружи фотографии */

html[data-svoi-theme]
.space-avatar-edit {
  position: absolute !important;

  right: -7px !important;
  bottom: -7px !important;

  z-index: 40 !important;
}


/* NAMI — DELETE SPACE PHOTO */

html[data-svoi-theme] .space-avatar-delete {
  position: absolute !important;

  left: -7px !important;
  bottom: -7px !important;

  width: 29px !important;
  height: 29px !important;

  display: grid !important;
  place-items: center !important;

  z-index: 40 !important;

  border-radius: 50% !important;

  color: #fff !important;

  background:
    rgba(202,90,105,.92) !important;

  border:
    2px solid rgba(255,255,255,.96) !important;

  box-shadow:
    0 5px 14px
    rgba(120,45,55,.18) !important;
}


/* NAMI — SPACE PHOTO BUTTON V2 */

html[data-svoi-theme] .space-avatar-edit {
  right: -5px !important;
  bottom: -5px !important;

  width: 32px !important;
  height: 32px !important;

  border-radius: 11px !important;

  color: #756fd2 !important;

  background:
    rgba(255,255,255,.82) !important;

  border:
    1px solid rgba(120,111,196,.18) !important;

  box-shadow:
    0 5px 15px rgba(72,67,130,.12),
    inset 0 1px 0 rgba(255,255,255,.9)
    !important;

  backdrop-filter:
    blur(16px) saturate(130%) !important;

  -webkit-backdrop-filter:
    blur(16px) saturate(130%) !important;
}

html[data-svoi-theme="dark"] .space-avatar-edit {
  color: #aaa5ef !important;

  background:
    rgba(28,31,47,.84) !important;

  border-color:
    rgba(154,145,230,.18) !important;
}


/* NAMI — SPACE DEFAULT SYMBOLS */

html[data-svoi-theme]
.nami-space-symbol {
  width: 58px !important;
  height: 58px !important;

  display: block !important;

  overflow: visible !important;

  filter:
    drop-shadow(
      0 8px 14px
      rgba(105,91,178,.13)
    ) !important;
}

html[data-svoi-theme]
.space-profile-card.couple
.nami-space-symbol {
  width: 64px !important;
  height: 64px !important;
}

html[data-svoi-theme]
.space-profile-main-icon {
  width: 100% !important;
  height: 100% !important;

  display: grid !important;
  place-items: center !important;
}

/* убираем старую синюю пиктограмму */

html[data-svoi-theme]
.space-profile-main-icon > .icon {
  display: none !important;
}


/* NAMI — USER AVATAR */

html[data-svoi-theme] .avatar,
html[data-svoi-theme] .profile-avatar {
  overflow: hidden !important;
}

html[data-svoi-theme] .user-avatar-photo {
  width: 100% !important;
  height: 100% !important;

  display: block !important;

  object-fit: cover !important;
  object-position: center !important;

  border-radius: inherit !important;
}

html[data-svoi-theme] .profile-avatar-actions {
  display: flex !important;
  gap: 8px !important;

  margin: 10px 0 20px !important;
}

html[data-svoi-theme] .profile-avatar-actions button {
  flex: 1 !important;
  min-height: 43px !important;
  border-radius: 14px !important;
}


/* NAMI — USER PHOTOS EVERYWHERE */

html[data-svoi-theme] .home-avatar,
html[data-svoi-theme] .profile-avatar,
html[data-svoi-theme] .mini-avatar,
html[data-svoi-theme] .space-profile-avatar {
  overflow: hidden !important;
}

html[data-svoi-theme] .home-avatar .user-avatar-photo,
html[data-svoi-theme] .profile-avatar .user-avatar-photo,
html[data-svoi-theme] .mini-avatar .user-avatar-photo,
html[data-svoi-theme] .space-profile-avatar .user-avatar-photo {
  width: 100% !important;
  height: 100% !important;

  display: block !important;

  object-fit: cover !important;
  object-position: center !important;

  border-radius: inherit !important;
}


/* ==========================================
   NAMI — USER AVATAR POLISH
   ========================================== */

/* аватар справа сверху на главной */
html[data-svoi-theme] .home-avatar {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;

  border-radius: 18px !important;

  box-shadow:
    0 8px 22px rgba(70,65,120,.10) !important;
}

/* фото внутри */
html[data-svoi-theme]
.home-avatar .user-avatar-photo {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center !important;
}


/* аватары в списке участников */
html[data-svoi-theme] .people-list .mini-avatar {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;

  border-radius: 16px !important;

  font-size: 14px !important;
}

/* фото участников */
html[data-svoi-theme]
.people-list
.mini-avatar
.user-avatar-photo {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center !important;

  border-radius: inherit !important;
}

/* чуть больше расстояние между аватаром и именем */
html[data-svoi-theme] .person-row {
  gap: 14px !important;
}


/* ==========================================
   NAMI — HOME FINAL DETAILS
   ========================================== */

/* личный аватар строго квадратный */
html[data-svoi-theme] .home-avatar {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;

  padding: 0 !important;

  overflow: hidden !important;

  border-radius: 17px !important;
}

html[data-svoi-theme]
.home-avatar .user-avatar-photo {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center !important;

  border-radius: inherit !important;
}


/* возвращаем плюс только карточке создания компании */
html[data-svoi-theme]
.space-profile-card.new-friends
.space-profile-main-icon > .icon {
  display: block !important;

  width: 34px !important;
  height: 34px !important;

  color: #829bd9 !important;
}


/* сам блок новой компании чуть выразительнее */
html[data-svoi-theme]
.space-profile-card.new-friends
.space-profile-visual {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.28),
      rgba(129,129,224,.06)
    ) !important;
}


/* FIX — USER AVATAR MUST STAY INSIDE BUTTON */

html[data-svoi-theme] .home-avatar {
  position: relative !important;

  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;

  overflow: hidden !important;
  border-radius: 17px !important;
}

html[data-svoi-theme]
.home-avatar .user-avatar-photo {
  position: static !important;

  inset: auto !important;

  width: 100% !important;
  height: 100% !important;

  display: block !important;

  object-fit: cover !important;
  object-position: center !important;

  border-radius: inherit !important;
}


/* FIX — USER AVATAR MUST STAY INSIDE BUTTON */

html[data-svoi-theme] .home-avatar {
  position: relative !important;

  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;

  overflow: hidden !important;
  border-radius: 17px !important;
}

html[data-svoi-theme]
.home-avatar .user-avatar-photo {
  position: static !important;

  inset: auto !important;

  width: 100% !important;
  height: 100% !important;

  display: block !important;

  object-fit: cover !important;
  object-position: center !important;

  border-radius: inherit !important;
}


/* ==========================================
   NAMI — ROOM SETTINGS
   ========================================== */

html[data-svoi-theme]
.room-settings-hero {
  padding: 18px !important;
  margin-bottom: 20px !important;

  text-align: center !important;

  border-radius: 26px !important;

  background:
    linear-gradient(
      145deg,
      var(--glass2),
      var(--glass)
    ) !important;

  border:
    1px solid var(--border2) !important;
}

html[data-svoi-theme]
.room-settings-avatar {
  width: 92px !important;
  height: 92px !important;

  display: grid !important;
  place-items: center !important;

  margin: 0 auto 13px !important;

  overflow: hidden !important;

  border-radius: 28px !important;

  background:
    rgba(125,120,220,.07) !important;

  border:
    1px solid rgba(130,120,220,.12) !important;
}

html[data-svoi-theme]
.room-settings-avatar img {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
}

html[data-svoi-theme]
.room-settings-avatar
.nami-space-symbol {
  width: 72px !important;
  height: 72px !important;
}

html[data-svoi-theme]
.room-settings-title small {
  color: #8d83df !important;

  font-size: 9px !important;
  font-weight: 850 !important;

  letter-spacing: .15em !important;
}

html[data-svoi-theme]
.room-settings-title h2 {
  margin: 7px 0 0 !important;

  color: var(--text) !important;

  font-size: 22px !important;
  font-weight: 850 !important;
}

html[data-svoi-theme]
.room-settings-title p {
  margin: 5px 0 0 !important;

  color: var(--muted) !important;

  font-size: 10px !important;
}

html[data-svoi-theme]
.room-settings-photo-actions {
  display: flex !important;
  gap: 8px !important;

  margin-top: 16px !important;
}

html[data-svoi-theme]
.room-settings-photo-actions button {
  flex: 1 !important;

  min-height: 44px !important;

  border-radius: 15px !important;
}

html[data-svoi-theme]
.room-settings-section-title {
  margin: 19px 4px 9px !important;

  color: var(--muted) !important;

  font-size: 10px !important;
  font-weight: 800 !important;

  letter-spacing: .05em !important;
}

html[data-svoi-theme]
.room-settings-danger {
  width: 100% !important;

  display: grid !important;
  grid-template-columns: 40px 1fr auto !important;
  align-items: center !important;

  gap: 11px !important;

  padding: 13px !important;

  text-align: left !important;

  border-radius: 19px !important;

  color: #ce6f7b !important;

  background:
    rgba(200,80,95,.055) !important;

  border:
    1px solid rgba(200,80,95,.13) !important;
}

html[data-svoi-theme]
.room-settings-danger > span {
  width: 40px !important;
  height: 40px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 13px !important;

  background:
    rgba(200,80,95,.08) !important;
}

html[data-svoi-theme]
.room-settings-danger b,
html[data-svoi-theme]
.room-settings-danger small {
  display: block !important;
}

html[data-svoi-theme]
.room-settings-danger b {
  font-size: 11px !important;
}

html[data-svoi-theme]
.room-settings-danger small {
  margin-top: 3px !important;

  color: var(--muted) !important;

  font-size: 8px !important;
}


/* ==========================================
   NAMI — COUPLE ROOM POLISH
   ========================================== */

/* Имена пары */
html[data-svoi-theme]
.couple-room-head h1 {
  max-width: 250px !important;

  font-size: 27px !important;
  line-height: 1.05 !important;

  letter-spacing: -.035em !important;
}


/* Шестерёнка */
html[data-svoi-theme]
.couple-room-head [data-room-settings] {
  width: 48px !important;
  height: 48px !important;

  border-radius: 16px !important;
}


/* Фирменный знак вместо старого кружка */
html[data-svoi-theme]
.couple-hero .eyebrow {
  display: inline-flex !important;
  align-items: center !important;

  gap: 8px !important;
}

html[data-svoi-theme]
.couple-hero .eyebrow
.nami-space-symbol {
  width: 20px !important;
  height: 20px !important;

  flex: 0 0 20px !important;

  filter: none !important;
}


/* Последние карточки больше не уходят под навигацию */
html[data-svoi-theme]
.page:has(.couple-room-head) {
  padding-bottom:
    calc(
      165px +
      env(safe-area-inset-bottom)
    ) !important;
}


/* ==========================================
   NAMI — COUPLE SCREEN FINAL POLISH
   ========================================== */

/* Заголовок пары в одну строку */

html[data-svoi-theme]
.couple-room-head {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
}

html[data-svoi-theme]
.couple-room-head h1 {
  max-width: none !important;

  margin: 3px 0 0 !important;

  font-size: 23px !important;
  line-height: 1.05 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* Хотелки / Чек-ин — нормальные значки */

html[data-svoi-theme]
.couple-feature-icon {
  display: grid !important;
  place-items: center !important;
}

html[data-svoi-theme]
.couple-feature-icon .icon {
  width: 23px !important;
  height: 23px !important;

  color: #8479df !important;
}


/* Последний ряд полностью поднимается над tab bar */

html[data-svoi-theme]
.page:has(.couple-room-head) {
  padding-bottom:
    calc(
      var(--nav-h, 88px) +
      105px +
      env(safe-area-inset-bottom)
    ) !important;
}

html[data-svoi-theme]
.couple-feature-grid {
  margin-bottom: 20px !important;
}


/* NAMI — PROFILE NAME */

html[data-svoi-theme]
.profile-name-button {
  width: 100% !important;

  min-height: 48px !important;

  margin: 10px 0 8px !important;

  border-radius: 17px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 8px !important;
}


/* ==========================================
   NAMI — PROFILE SECURITY
   ========================================== */

html[data-svoi-theme]
.profile-security-title {
  margin-top: 28px !important;
}

html[data-svoi-theme]
.profile-created-row {
  margin-bottom: 9px !important;
}

html[data-svoi-theme]
.profile-delete-account {
  width: 100% !important;

  display: grid !important;
  grid-template-columns: 42px 1fr auto !important;
  align-items: center !important;

  gap: 12px !important;

  margin-top: 9px !important;
  padding: 14px !important;

  text-align: left !important;

  border-radius: 20px !important;

  color: #ca6474 !important;

  background:
    rgba(205,80,100,.055) !important;

  border:
    1px solid rgba(205,80,100,.14) !important;
}

html[data-svoi-theme]
.profile-delete-account > span {
  width: 42px !important;
  height: 42px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 14px !important;

  background:
    rgba(205,80,100,.08) !important;
}

html[data-svoi-theme]
.profile-delete-account b,
html[data-svoi-theme]
.profile-delete-account small {
  display: block !important;
}

html[data-svoi-theme]
.profile-delete-account b {
  font-size: 12px !important;
}

html[data-svoi-theme]
.profile-delete-account small {
  margin-top: 4px !important;

  color: var(--muted) !important;

  font-size: 9px !important;
}


/* delete account sheets */

html[data-svoi-theme]
.delete-account-warning,
html[data-svoi-theme]
.delete-account-confirm {
  text-align: center !important;
}

html[data-svoi-theme]
.delete-account-icon {
  width: 58px !important;
  height: 58px !important;

  display: grid !important;
  place-items: center !important;

  margin: 4px auto 16px !important;

  border-radius: 19px !important;

  color: #ca6474 !important;

  background:
    rgba(205,80,100,.08) !important;
}

html[data-svoi-theme]
.delete-account-warning h2,
html[data-svoi-theme]
.delete-account-confirm h2 {
  margin: 0 0 10px !important;
}

html[data-svoi-theme]
.delete-account-warning p,
html[data-svoi-theme]
.delete-account-confirm p {
  color: var(--muted) !important;

  line-height: 1.5 !important;
}

html[data-svoi-theme]
.delete-account-warning button {
  margin-top: 9px !important;
}

html[data-svoi-theme]
.delete-account-confirm strong {
  display: block !important;

  margin: 16px 0 10px !important;

  letter-spacing: .12em !important;
}

html[data-svoi-theme]
.delete-account-confirm input {
  width: 100% !important;

  margin-bottom: 12px !important;

  text-align: center !important;

  text-transform: uppercase !important;
}


/* =========================================================
   NAMI — PROFILE PREMIUM V2
   ========================================================= */

html[data-svoi-theme]
.page:has(.profile-card) {
  padding-left: 16px !important;
  padding-right: 16px !important;

  padding-bottom:
    calc(
      170px +
      env(safe-area-inset-bottom)
    ) !important;
}


/* -------------------------
   Заголовки разделов
   ------------------------- */

html[data-svoi-theme]
.page:has(.profile-card)
.section-head {
  margin:
    30px 4px
    12px !important;
}

html[data-svoi-theme]
.page:has(.profile-card)
.section-head h2 {
  margin: 0 !important;

  font-size: 20px !important;
  line-height: 1.15 !important;

  font-weight: 850 !important;
  letter-spacing: -.035em !important;

  color: var(--text) !important;
}


/* -------------------------
   Общие строки настроек
   ------------------------- */

html[data-svoi-theme]
.page:has(.profile-card)
.setting-row {
  min-height: 78px !important;

  padding: 13px 14px !important;

  border-radius: 21px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.53),
      rgba(255,255,255,.30)
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.56) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.55),
    0 8px 28px
      rgba(82,73,160,.045) !important;

  backdrop-filter:
    blur(22px)
    saturate(135%) !important;

  -webkit-backdrop-filter:
    blur(22px)
    saturate(135%) !important;
}


/* тёмная тема */

html[data-svoi-theme="dark"]
.page:has(.profile-card)
.setting-row {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.035)
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.08) !important;
}


/* -------------------------
   Иконки строк
   ------------------------- */

html[data-svoi-theme]
.page:has(.profile-card)
.setting-icon {
  width: 46px !important;
  height: 46px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 15px !important;

  color: #786fda !important;

  background:
    linear-gradient(
      145deg,
      rgba(139,126,230,.15),
      rgba(116,143,230,.08)
    ) !important;

  border:
    1px solid
    rgba(126,114,215,.10) !important;
}

html[data-svoi-theme]
.page:has(.profile-card)
.setting-icon .icon {
  width: 21px !important;
  height: 21px !important;
}


/* -------------------------
   Текст строк
   ------------------------- */

html[data-svoi-theme]
.page:has(.profile-card)
.setting-row > span:nth-child(2) {
  min-width: 0 !important;
}

html[data-svoi-theme]
.page:has(.profile-card)
.setting-row b {
  display: block !important;

  color: var(--text) !important;

  font-size: 15px !important;
  font-weight: 800 !important;

  letter-spacing: -.02em !important;
}

html[data-svoi-theme]
.page:has(.profile-card)
.setting-row small {
  display: block !important;

  margin-top: 3px !important;

  color: var(--muted) !important;

  font-size: 11px !important;
  line-height: 1.35 !important;
}


/* -------------------------
   Стрелки
   ------------------------- */

html[data-svoi-theme]
.page:has(.profile-card)
.setting-row > i {
  color:
    color-mix(
      in srgb,
      var(--muted) 70%,
      transparent
    ) !important;

  opacity: .72 !important;
}


/* =========================================================
   АККАУНТ
   ========================================================= */

html[data-svoi-theme]
.profile-access-key {
  margin: 0 !important;
}


/* ключ доступа — чуть ярче */

html[data-svoi-theme]
.profile-access-key
.setting-icon {
  color: #756bdd !important;

  background:
    linear-gradient(
      145deg,
      rgba(125,112,226,.18),
      rgba(121,151,229,.09)
    ) !important;
}


/* =========================================================
   БЕЗОПАСНОСТЬ
   ========================================================= */

html[data-svoi-theme]
.profile-security-title {
  margin-top: 34px !important;
}


/* дата создания — спокойная карточка */

html[data-svoi-theme]
.profile-created-row {
  margin: 0 0 10px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.46),
      rgba(255,255,255,.25)
    ) !important;
}


/* =========================================================
   ВЫХОД
   ========================================================= */

html[data-svoi-theme]
.page:has(.profile-card)
[data-logout] {
  width: 100% !important;

  min-height: 66px !important;

  display: grid !important;
  grid-template-columns:
    1fr auto !important;

  align-items: center !important;

  margin-top: 10px !important;
  padding:
    13px 16px !important;

  text-align: left !important;

  border-radius: 21px !important;

  color: var(--text) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.48),
      rgba(255,255,255,.27)
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.52) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.45) !important;
}

html[data-svoi-theme]
.page:has(.profile-card)
[data-logout] b {
  color: var(--text) !important;

  font-size: 14px !important;
  font-weight: 800 !important;
}

html[data-svoi-theme]
.page:has(.profile-card)
[data-logout] small {
  margin-top: 3px !important;

  color: var(--muted) !important;

  font-size: 10px !important;
}

html[data-svoi-theme]
.page:has(.profile-card)
[data-logout] > svg,
html[data-svoi-theme]
.page:has(.profile-card)
[data-logout] > .icon {
  color: #a5a0b4 !important;
}


/* =========================================================
   УДАЛЕНИЕ АККАУНТА
   ========================================================= */

html[data-svoi-theme]
.profile-delete-account {
  min-height: 68px !important;

  margin-top: 9px !important;

  padding:
    12px 14px !important;

  border-radius: 21px !important;

  color: #c86776 !important;

  background:
    linear-gradient(
      145deg,
      rgba(222,89,112,.075),
      rgba(222,89,112,.035)
    ) !important;

  border:
    1px solid
    rgba(210,95,115,.12) !important;

  box-shadow:
    none !important;
}

html[data-svoi-theme]
.profile-delete-account > span {
  width: 44px !important;
  height: 44px !important;

  border-radius: 14px !important;

  color: #cf6476 !important;

  background:
    rgba(212,91,112,.09) !important;
}

html[data-svoi-theme]
.profile-delete-account b {
  font-size: 14px !important;
  font-weight: 800 !important;
}

html[data-svoi-theme]
.profile-delete-account small {
  margin-top: 3px !important;

  font-size: 10px !important;

  color:
    color-mix(
      in srgb,
      var(--muted) 88%,
      #cf6476
    ) !important;
}


/* =========================================================
   О ПРИЛОЖЕНИИ
   ========================================================= */

html[data-svoi-theme]
.page:has(.profile-card)
.section-head + .about-card,
html[data-svoi-theme]
.page:has(.profile-card)
.section-head + .app-about,
html[data-svoi-theme]
.page:has(.profile-card)
.section-head + .setting-row {
  border-radius: 23px !important;
}


/* =========================================================
   Чуть более воздушный профиль
   ========================================================= */

html[data-svoi-theme]
.page:has(.profile-card)
.profile-avatar-actions {
  gap: 9px !important;
}

html[data-svoi-theme]
.page:has(.profile-card)
.profile-avatar-actions button,
html[data-svoi-theme]
.profile-name-button {
  border-radius: 18px !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.52) !important;
}


/* нижнее меню чуть отделяем */

html[data-svoi-theme]
.page:has(.profile-card)
~ .bottom-nav {
  box-shadow:
    0 12px 45px
      rgba(70,65,130,.12),
    inset 0 1px 0
      rgba(255,255,255,.65) !important;
}


/* =========================================================
   NAMI — PROFILE PREMIUM V3
   ========================================================= */

/* меньше лишней пустоты снизу */
html[data-svoi-theme]
.page:has(.profile-card) {
  padding-bottom:
    calc(
      125px +
      env(safe-area-inset-bottom)
    ) !important;
}


/* =========================================================
   ВЕРХ ПРОФИЛЯ
   ========================================================= */

html[data-svoi-theme]
.profile-card {
  position: relative !important;

  padding: 20px !important;

  border-radius: 28px !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.58),
      rgba(255,255,255,.30)
    ) !important;

  border:
    1px solid rgba(255,255,255,.62) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 18px 50px rgba(78,73,150,.06) !important;
}


/* фото */
html[data-svoi-theme]
.profile-card .user-avatar-photo,
html[data-svoi-theme]
.profile-card .profile-avatar {
  border-radius: 22px !important;
}


/* имя */
html[data-svoi-theme]
.profile-card h2,
html[data-svoi-theme]
.profile-card strong {
  letter-spacing: -.035em !important;
}


/* кнопка изменить имя делаем визуально легче */
html[data-svoi-theme]
.profile-name-button {
  min-height: 48px !important;

  margin-top: 10px !important;
  margin-bottom: 8px !important;

  border-radius: 17px !important;

  background:
    rgba(255,255,255,.43) !important;

  border:
    1px solid rgba(255,255,255,.55) !important;

  box-shadow: none !important;
}


/* фото-кнопки */
html[data-svoi-theme]
.profile-avatar-actions {
  gap: 8px !important;
}

html[data-svoi-theme]
.profile-avatar-actions button {
  min-height: 46px !important;

  border-radius: 16px !important;

  font-size: 13px !important;

  background:
    rgba(255,255,255,.38) !important;

  border:
    1px solid rgba(255,255,255,.48) !important;

  box-shadow: none !important;
}


/* =========================================================
   СЕКЦИИ
   ========================================================= */

html[data-svoi-theme]
.page:has(.profile-card)
.section-head {
  margin:
    28px 4px
    11px !important;
}

html[data-svoi-theme]
.page:has(.profile-card)
.section-head h2 {
  font-size: 19px !important;
  font-weight: 850 !important;

  letter-spacing: -.04em !important;
}


/* =========================================================
   ОФОРМЛЕНИЕ
   ========================================================= */

html[data-svoi-theme]
.page:has(.profile-card)
.setting-group,
html[data-svoi-theme]
.page:has(.profile-card)
.settings-card {
  border-radius: 25px !important;

  overflow: hidden !important;
}


/* делаем строки компактнее */
html[data-svoi-theme]
.page:has(.profile-card)
.setting-row {
  min-height: 72px !important;

  padding:
    12px 14px !important;

  border-radius: 20px !important;
}


/* =========================================================
   АККАУНТ + БЕЗОПАСНОСТЬ
   ========================================================= */

html[data-svoi-theme]
.profile-access-key,
html[data-svoi-theme]
.profile-created-row {
  background:
    linear-gradient(
      140deg,
      rgba(255,255,255,.52),
      rgba(255,255,255,.28)
    ) !important;

  border:
    1px solid rgba(255,255,255,.55) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6) !important;
}


/* выход — НЕ красный */
html[data-svoi-theme]
.page:has(.profile-card)
[data-logout] {
  color: var(--text) !important;

  background:
    linear-gradient(
      140deg,
      rgba(255,255,255,.48),
      rgba(255,255,255,.27)
    ) !important;

  border:
    1px solid rgba(255,255,255,.52) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55) !important;
}

html[data-svoi-theme]
.page:has(.profile-card)
[data-logout] .icon,
html[data-svoi-theme]
.page:has(.profile-card)
[data-logout] svg {
  color: #9693a6 !important;
}


/* удаление — единственный красный пункт */
html[data-svoi-theme]
.profile-delete-account {
  margin-top: 8px !important;

  background:
    linear-gradient(
      140deg,
      rgba(215,91,111,.065),
      rgba(215,91,111,.025)
    ) !important;

  border:
    1px solid rgba(205,95,115,.11) !important;

  box-shadow: none !important;
}


/* =========================================================
   ИКОНКИ
   ========================================================= */

html[data-svoi-theme]
.page:has(.profile-card)
.setting-icon {
  width: 44px !important;
  height: 44px !important;

  border-radius: 14px !important;

  background:
    linear-gradient(
      145deg,
      rgba(130,118,225,.15),
      rgba(118,145,225,.07)
    ) !important;
}


/* =========================================================
   ABOUT NAMI
   ========================================================= */

html[data-svoi-theme]
.page:has(.profile-card)
.about-card {
  min-height: 78px !important;

  padding: 14px !important;

  border-radius: 22px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.5),
      rgba(255,255,255,.28)
    ) !important;

  border:
    1px solid rgba(255,255,255,.52) !important;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
.profile-card,
html[data-svoi-theme="dark"]
.profile-access-key,
html[data-svoi-theme="dark"]
.profile-created-row,
html[data-svoi-theme="dark"]
.page:has(.profile-card)
[data-logout] {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.035)
    ) !important;

  border-color:
    rgba(255,255,255,.085) !important;
}


/* =========================================================
   NAMI — PROFILE HEADER V4
   ========================================================= */

/* Главная карточка профиля */
html[data-svoi-theme]
.profile-card {
  position: relative !important;

  min-height: 132px !important;

  display: flex !important;
  align-items: center !important;

  padding: 20px 76px 20px 20px !important;

  border-radius: 29px !important;

  overflow: visible !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.58),
      rgba(255,255,255,.28)
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.64) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.72),
    0 16px 45px
      rgba(76,72,145,.055) !important;
}


/* Фото */
html[data-svoi-theme]
.profile-card .profile-avatar,
html[data-svoi-theme]
.profile-card .user-avatar-photo {
  width: 78px !important;
  height: 78px !important;

  flex: 0 0 78px !important;

  border-radius: 22px !important;

  object-fit: cover !important;

  box-shadow:
    0 8px 22px
      rgba(70,68,130,.12) !important;
}


/* Имя */
html[data-svoi-theme]
.profile-card h2,
html[data-svoi-theme]
.profile-card strong {
  margin: 0 !important;

  font-size: 24px !important;
  line-height: 1.05 !important;

  font-weight: 850 !important;
  letter-spacing: -.045em !important;

  color: var(--text) !important;
}


/* Подпись */
html[data-svoi-theme]
.profile-card p,
html[data-svoi-theme]
.profile-card small {
  margin-top: 6px !important;

  font-size: 13px !important;
  line-height: 1.3 !important;

  color: var(--muted) !important;
}


/* =========================================================
   КАРАНДАШ ВНУТРИ КАРТОЧКИ
   ========================================================= */

/*
   Кнопка остаётся той же функционально,
   но визуально переносится в правый край карточки.
*/

html[data-svoi-theme]
.profile-name-button {
  position: relative !important;
  z-index: 5 !important;

  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;

  height: 46px !important;
  min-height: 46px !important;

  margin:
    -69px
    17px
    23px
    auto !important;

  padding: 0 !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 15px !important;

  font-size: 0 !important;

  color: #766ddb !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.72),
      rgba(255,255,255,.42)
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.7) !important;

  box-shadow:
    0 7px 18px
      rgba(75,70,140,.09),
    inset 0 1px 0
      rgba(255,255,255,.8) !important;
}

html[data-svoi-theme]
.profile-name-button .icon,
html[data-svoi-theme]
.profile-name-button svg {
  width: 19px !important;
  height: 19px !important;

  margin: 0 !important;
}


/* =========================================================
   ДЕЙСТВИЯ С ФОТО
   ========================================================= */

html[data-svoi-theme]
.profile-avatar-actions {
  display: grid !important;

  grid-template-columns:
    1fr 1fr !important;

  gap: 9px !important;

  margin-top: 0 !important;
}

html[data-svoi-theme]
.profile-avatar-actions button {
  min-height: 48px !important;

  padding:
    0 14px !important;

  border-radius: 17px !important;

  font-size: 13px !important;
  font-weight: 750 !important;

  color: var(--text) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.50),
      rgba(255,255,255,.29)
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.55) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.62) !important;
}


/* Удалить фото — очень лёгкий красный оттенок */
html[data-svoi-theme]
.profile-avatar-actions
[data-user-avatar-delete] {
  color: #b96878 !important;

  background:
    linear-gradient(
      145deg,
      rgba(210,90,110,.055),
      rgba(255,255,255,.28)
    ) !important;
}


/* =========================================================
   ПЕРЕХОД К ОФОРМЛЕНИЮ
   ========================================================= */

html[data-svoi-theme]
.profile-avatar-actions
+ .section-head {
  margin-top: 34px !important;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
.profile-card {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.035)
    ) !important;

  border-color:
    rgba(255,255,255,.085) !important;
}

html[data-svoi-theme="dark"]
.profile-name-button,
html[data-svoi-theme="dark"]
.profile-avatar-actions button {
  background:
    rgba(255,255,255,.065) !important;

  border-color:
    rgba(255,255,255,.08) !important;
}


/* =========================================================
   NAMI — PROFILE HEADER V5
   ========================================================= */

html[data-svoi-theme]
.profile-card {
  display: grid !important;
  grid-template-columns: 80px minmax(0,1fr) !important;
  align-items: center !important;

  gap: 16px !important;

  min-height: 124px !important;

  padding: 20px !important;

  overflow: hidden !important;

  border-radius: 29px !important;
}


/* avatar */

html[data-svoi-theme]
.profile-card .profile-avatar {
  width: 80px !important;
  height: 80px !important;

  min-width: 80px !important;

  margin: 0 !important;

  border-radius: 22px !important;

  overflow: hidden !important;
}

html[data-svoi-theme]
.profile-card .profile-avatar
.user-avatar-photo {
  position: static !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  border-radius: 22px !important;
}


/* text */

html[data-svoi-theme]
.profile-main {
  min-width: 0 !important;
}

html[data-svoi-theme]
.profile-name-row {
  display: flex !important;
  align-items: center !important;

  gap: 9px !important;

  min-width: 0 !important;
}

html[data-svoi-theme]
.profile-name-row h2 {
  min-width: 0 !important;

  margin: 0 !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;

  font-size: 24px !important;
  line-height: 1.05 !important;

  font-weight: 850 !important;
  letter-spacing: -.045em !important;
}

html[data-svoi-theme]
.profile-main > p {
  margin: 7px 0 0 !important;

  color: var(--muted) !important;

  font-size: 13px !important;
}


/* edit-name pencil */

html[data-svoi-theme]
.profile-name-edit {
  width: 35px !important;
  height: 35px !important;

  min-width: 35px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  border-radius: 12px !important;

  color: #766ddb !important;

  background:
    rgba(255,255,255,.46) !important;

  border:
    1px solid rgba(255,255,255,.58) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65) !important;
}

html[data-svoi-theme]
.profile-name-edit .icon,
html[data-svoi-theme]
.profile-name-edit svg {
  width: 16px !important;
  height: 16px !important;

  margin: 0 !important;
}


/* photo controls */

html[data-svoi-theme]
.profile-card + .profile-avatar-actions {
  margin-top: 10px !important;
}


/* old big button no longer exists */
html[data-svoi-theme]
.profile-name-button {
  display: none !important;
}


/* dark */

html[data-svoi-theme="dark"]
.profile-name-edit {
  background:
    rgba(255,255,255,.065) !important;

  border-color:
    rgba(255,255,255,.085) !important;
}


/* =========================================================
   NAMI — ACCESS KEY SHEET PREMIUM
   ========================================================= */

html[data-svoi-theme]
.access-key-sheet {
  margin-top: 8px !important;
}

html[data-svoi-theme]
.access-key-hero {
  display: grid !important;
  grid-template-columns: 52px minmax(0,1fr) !important;
  gap: 14px !important;

  padding: 14px !important;
  margin: 12px 0 14px !important;

  border-radius: 22px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.52),
      rgba(255,255,255,.28)
    ) !important;

  border:
    1px solid rgba(255,255,255,.55) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 10px 26px rgba(76,72,145,.05) !important;
}

html[data-svoi-theme]
.access-key-hero-icon {
  width: 52px !important;
  height: 52px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 16px !important;

  color: #7f74e4 !important;

  background:
    linear-gradient(
      145deg,
      rgba(130,118,225,.14),
      rgba(118,145,225,.07)
    ) !important;

  border:
    1px solid rgba(130,118,225,.10) !important;
}

html[data-svoi-theme]
.access-key-hero-copy {
  min-width: 0 !important;
}

html[data-svoi-theme]
.access-key-label {
  color: #9a96ad !important;

  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html[data-svoi-theme]
.access-key-code {
  margin-top: 7px !important;
  padding: 12px 14px !important;

  border-radius: 16px !important;

  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em !important;
  word-break: break-word !important;

  color: var(--text) !important;

  background:
    rgba(255,255,255,.55) !important;

  border:
    1px solid rgba(255,255,255,.62) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72) !important;
}

html[data-svoi-theme]
.access-key-desc {
  margin-top: 10px !important;

  color: var(--muted) !important;

  font-size: 13px !important;
  line-height: 1.42 !important;
}

html[data-svoi-theme]
.access-key-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;

  margin-top: 6px !important;
}

html[data-svoi-theme]
.access-key-actions button {
  min-height: 50px !important;

  border-radius: 17px !important;

  font-size: 14px !important;
  font-weight: 780 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.48),
      rgba(255,255,255,.30)
    ) !important;

  border:
    1px solid rgba(255,255,255,.55) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7) !important;
}

html[data-svoi-theme]
.access-key-main-btn {
  min-height: 56px !important;

  margin-top: 12px !important;

  border-radius: 20px !important;

  font-size: 15px !important;
  font-weight: 850 !important;

  background:
    linear-gradient(
      135deg,
      #7b73e8,
      #6f89ea
    ) !important;

  border: none !important;

  box-shadow:
    0 12px 26px rgba(109,102,214,.22),
    inset 0 1px 0 rgba(255,255,255,.26) !important;
}

html[data-svoi-theme]
.access-key-note {
  margin-top: 14px !important;
  padding: 12px 14px !important;

  border-radius: 16px !important;

  color: #8f8a9f !important;

  font-size: 12px !important;
  line-height: 1.45 !important;

  background:
    rgba(255,255,255,.34) !important;

  border:
    1px solid rgba(255,255,255,.45) !important;
}

/* Чуть лучше сам sheet */
html[data-svoi-theme]
#sheetRoot .sheet {
  border-radius: 30px 30px 0 0 !important;
}

html[data-svoi-theme]
#sheetRoot .sheet h2,
html[data-svoi-theme]
#sheetRoot .sheet h1 {
  letter-spacing: -.04em !important;
}

/* DARK */
html[data-svoi-theme="dark"]
.access-key-hero,
html[data-svoi-theme="dark"]
.access-key-actions button,
html[data-svoi-theme="dark"]
.access-key-note,
html[data-svoi-theme="dark"]
.access-key-code {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.04)
    ) !important;

  border-color:
    rgba(255,255,255,.08) !important;
}


/* =========================================================
   NAMI — ACCESS KEY WINDOW V2
   ========================================================= */

html[data-svoi-theme]
.access-key-sheet-v2 {
  padding-top: 8px !important;
}


/* Главная карточка */

html[data-svoi-theme]
.access-key-premium-card {
  display: grid !important;
  grid-template-columns: 50px minmax(0,1fr) !important;

  gap: 14px !important;

  padding: 16px !important;

  border-radius: 24px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.62),
      rgba(244,245,255,.36)
    ) !important;

  border:
    1px solid rgba(255,255,255,.72) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 10px 30px rgba(86,82,160,.06) !important;
}


/* Щит */

html[data-svoi-theme]
.access-key-premium-icon {
  width: 50px !important;
  height: 50px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 16px !important;

  color: #756de0 !important;

  background:
    linear-gradient(
      145deg,
      rgba(124,112,226,.16),
      rgba(112,145,230,.08)
    ) !important;
}


/* Текст */

html[data-svoi-theme]
.access-key-premium-content {
  min-width: 0 !important;
}

html[data-svoi-theme]
.access-key-premium-content > small {
  display: block !important;

  color: #9692a6 !important;

  font-size: 10px !important;
  font-weight: 850 !important;

  letter-spacing: .09em !important;
}

html[data-svoi-theme]
.access-key-premium-value {
  margin-top: 6px !important;

  color: var(--text) !important;

  font-size: 16px !important;
  line-height: 1.25 !important;

  font-weight: 850 !important;

  letter-spacing: -.025em !important;

  overflow-wrap: anywhere !important;
}

html[data-svoi-theme]
.access-key-premium-content p {
  margin:
    8px 0 0 !important;

  color: var(--muted) !important;

  font-size: 12px !important;
  line-height: 1.45 !important;
}


/* Показать / скопировать */

html[data-svoi-theme]
.access-key-premium-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;

  gap: 9px !important;

  margin-top: 12px !important;
}

html[data-svoi-theme]
.access-key-premium-actions button {
  min-height: 49px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 8px !important;

  padding: 0 12px !important;

  border-radius: 17px !important;

  color: var(--text) !important;

  font-size: 13px !important;
  font-weight: 800 !important;

  background:
    rgba(255,255,255,.52) !important;

  border:
    1px solid rgba(255,255,255,.68) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78) !important;
}


/* Главная кнопка */

html[data-svoi-theme]
.access-key-premium-main {
  width: 100% !important;
  min-height: 56px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 9px !important;

  margin-top: 11px !important;

  border: 0 !important;
  border-radius: 19px !important;

  color: #fff !important;

  font-size: 15px !important;
  font-weight: 850 !important;

  background:
    linear-gradient(
      135deg,
      #7b70e5 0%,
      #687fe1 100%
    ) !important;

  box-shadow:
    0 12px 28px rgba(104,96,211,.22),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
}


/* Подсказка снизу */

html[data-svoi-theme]
.access-key-premium-note {
  display: grid !important;
  grid-template-columns: 28px 1fr !important;

  gap: 9px !important;

  align-items: start !important;

  margin-top: 12px !important;
  padding: 12px !important;

  border-radius: 16px !important;

  color: var(--muted) !important;

  background:
    rgba(125,116,220,.055) !important;

  border:
    1px solid rgba(125,116,220,.08) !important;
}

html[data-svoi-theme]
.access-key-premium-note > span {
  width: 28px !important;
  height: 28px !important;

  display: grid !important;
  place-items: center !important;

  color: #8177df !important;
}

html[data-svoi-theme]
.access-key-premium-note p {
  margin: 1px 0 0 !important;

  font-size: 11px !important;
  line-height: 1.45 !important;
}


/* dark */

html[data-svoi-theme="dark"]
.access-key-premium-card,
html[data-svoi-theme="dark"]
.access-key-premium-actions button {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.035)
    ) !important;

  border-color:
    rgba(255,255,255,.09) !important;
}


/* =========================================================
   NAMI PROFILE — CLEAN REDESIGN
   ========================================================= */

html[data-svoi-theme]
.nami-profile-page {
  padding-bottom:
    calc(
      175px +
      env(safe-area-inset-bottom)
    ) !important;
}


/* header */

html[data-svoi-theme]
.nami-profile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 18px;
}

html[data-svoi-theme]
.nami-profile-top h1 {
  margin: 0;

  font-size: 34px;
  line-height: 1;

  font-weight: 850;
  letter-spacing: -.05em;
}

html[data-svoi-theme]
.nami-profile-brand {
  padding: 9px 13px;

  border-radius: 14px;

  color: #7b72dc;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;

  background:
    rgba(255,255,255,.46);

  border:
    1px solid
    rgba(255,255,255,.62);
}


/* hero */

html[data-svoi-theme]
.nami-profile-hero {
  display: grid;

  grid-template-columns:
    76px minmax(0,1fr);

  gap: 15px;

  padding: 18px;

  border-radius: 27px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.58),
      rgba(247,247,255,.28)
    );

  border:
    1px solid
    rgba(255,255,255,.67);

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.75),
    0 18px 45px
      rgba(83,78,150,.055);
}


html[data-svoi-theme]
.nami-profile-avatar {
  width: 76px;
  height: 76px;

  display: grid;
  place-items: center;

  overflow: hidden;

  border-radius: 22px;

  font-size: 24px;
  font-weight: 850;

  background:
    rgba(125,115,220,.10);
}

html[data-svoi-theme]
.nami-profile-avatar img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


html[data-svoi-theme]
.nami-profile-info {
  align-self: center;

  min-width: 0;
}

html[data-svoi-theme]
.nami-profile-name-row {
  display: flex;
  align-items: center;

  gap: 8px;

  min-width: 0;
}

html[data-svoi-theme]
.nami-profile-name-row h2 {
  min-width: 0;

  margin: 0;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: var(--text);

  font-size: 23px;
  line-height: 1.05;

  font-weight: 850;
  letter-spacing: -.045em;
}

html[data-svoi-theme]
.nami-profile-info p {
  margin: 6px 0 0;

  color: var(--muted);

  font-size: 12px;
}


html[data-svoi-theme]
.nami-profile-edit {
  width: 33px;
  height: 33px;

  flex: 0 0 33px;

  display: grid;
  place-items: center;

  padding: 0;

  border-radius: 11px;

  color: #776eda;

  background:
    rgba(255,255,255,.52);

  border:
    1px solid
    rgba(255,255,255,.65);
}


/* photo buttons inside hero */

html[data-svoi-theme]
.nami-profile-photo-actions {
  grid-column: 1 / -1;

  display: grid;

  gap: 8px;

  margin-top: 1px;
}

html[data-svoi-theme]
.nami-profile-photo-actions.two {
  grid-template-columns: 1fr 1fr;
}

html[data-svoi-theme]
.nami-profile-photo-actions.one {
  grid-template-columns: 1fr;
}

html[data-svoi-theme]
.nami-profile-photo-actions button {
  min-height: 43px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 0 12px;

  border-radius: 15px;

  color: var(--text);

  font-size: 12px;
  font-weight: 800;

  background:
    rgba(255,255,255,.42);

  border:
    1px solid
    rgba(255,255,255,.55);
}

html[data-svoi-theme]
.nami-profile-photo-actions
button.danger {
  color: #b96c7c;

  background:
    rgba(206,91,111,.045);
}


/* titles */

html[data-svoi-theme]
.nami-profile-section-title {
  margin:
    27px 5px
    10px;

  color: var(--text);

  font-size: 19px;
  font-weight: 850;

  letter-spacing: -.04em;
}


/* appearance */

html[data-svoi-theme]
.nami-settings-card {
  overflow: hidden;

  border-radius: 24px;

  background:
    rgba(255,255,255,.45);

  border:
    1px solid
    rgba(255,255,255,.60);

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.65);
}

html[data-svoi-theme]
.nami-theme-block {
  padding: 16px;
}

html[data-svoi-theme]
.nami-theme-block b,
html[data-svoi-theme]
.nami-settings-copy b,
html[data-svoi-theme]
.nami-account-copy b {
  display: block;

  color: var(--text);

  font-size: 13px;
  font-weight: 800;
}

html[data-svoi-theme]
.nami-theme-block small,
html[data-svoi-theme]
.nami-settings-copy small,
html[data-svoi-theme]
.nami-account-copy small {
  display: block;

  margin-top: 3px;

  color: var(--muted);

  font-size: 10px;
}


html[data-svoi-theme]
.nami-theme-segment {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 4px;

  margin-top: 13px;
  padding: 4px;

  border-radius: 17px;

  background:
    rgba(125,120,190,.055);
}

html[data-svoi-theme]
.nami-theme-segment button {
  min-height: 39px;

  border: 0;
  border-radius: 13px;

  color: var(--muted);

  font-size: 12px;
  font-weight: 800;

  background: transparent;
}

html[data-svoi-theme]
.nami-theme-segment button.active {
  color: var(--text);

  background:
    rgba(255,255,255,.60);

  box-shadow:
    0 4px 14px
      rgba(90,82,160,.07),
    inset 0 1px 0
      rgba(255,255,255,.78);
}


html[data-svoi-theme]
.nami-settings-divider,
html[data-svoi-theme]
.nami-account-divider {
  height: 1px;

  margin-left: 62px;

  background:
    rgba(130,125,160,.10);
}


html[data-svoi-theme]
.nami-settings-row {
  min-height: 70px;

  display: grid;

  grid-template-columns:
    42px 1fr auto;

  align-items: center;

  gap: 11px;

  padding: 12px 15px;
}


html[data-svoi-theme]
.nami-settings-icon,
html[data-svoi-theme]
.nami-account-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 14px;

  color: #7b72dc;

  background:
    rgba(124,114,220,.09);
}


/* account */

html[data-svoi-theme]
.nami-account-card {
  overflow: hidden;

  border-radius: 24px;

  background:
    rgba(255,255,255,.45);

  border:
    1px solid
    rgba(255,255,255,.60);
}


html[data-svoi-theme]
.nami-account-row {
  width: 100%;
  min-height: 70px;

  display: grid;

  grid-template-columns:
    42px 1fr auto;

  align-items: center;

  gap: 11px;

  padding: 12px 15px;

  text-align: left;

  color: var(--text);

  border: 0;

  background: transparent;
}

html[data-svoi-theme]
.nami-account-row.static {
  cursor: default;
}

html[data-svoi-theme]
.nami-account-row
> .icon {
  color: #a3a0af;
}


html[data-svoi-theme]
.nami-account-icon.neutral {
  color: #8e8a9d;

  background:
    rgba(120,118,135,.065);
}

html[data-svoi-theme]
.nami-account-row.delete
.nami-account-copy b {
  color: #bc6878;
}

html[data-svoi-theme]
.nami-account-icon.danger {
  color: #ca6879;

  background:
    rgba(205,95,115,.075);
}


/* about */

html[data-svoi-theme]
.nami-about-mini {
  display: grid;

  grid-template-columns:
    42px 1fr auto;

  align-items: center;

  gap: 11px;

  margin-top: 18px;
  padding: 12px 14px;

  border-radius: 20px;

  background:
    rgba(255,255,255,.26);

  border:
    1px solid
    rgba(255,255,255,.42);
}

html[data-svoi-theme]
.nami-about-mark {
  width: 42px;
  height: 42px;

  overflow: hidden;
}

html[data-svoi-theme]
.nami-about-mark
.nami-space-symbol {
  width: 42px !important;
  height: 42px !important;
}

html[data-svoi-theme]
.nami-about-mini b {
  display: block;

  font-size: 12px;
  font-weight: 850;
}

html[data-svoi-theme]
.nami-about-mini small {
  display: block;

  margin-top: 2px;

  color: var(--muted);

  font-size: 9px;
}

html[data-svoi-theme]
.nami-about-mini > span {
  color: var(--muted);

  font-size: 10px;
}


/* DARK */

html[data-svoi-theme="dark"]
.nami-profile-hero,
html[data-svoi-theme="dark"]
.nami-settings-card,
html[data-svoi-theme="dark"]
.nami-account-card,
html[data-svoi-theme="dark"]
.nami-about-mini {
  background:
    rgba(255,255,255,.055);

  border-color:
    rgba(255,255,255,.075);
}

html[data-svoi-theme="dark"]
.nami-theme-segment button.active,
html[data-svoi-theme="dark"]
.nami-profile-edit,
html[data-svoi-theme="dark"]
.nami-profile-photo-actions button {
  background:
    rgba(255,255,255,.075);

  border-color:
    rgba(255,255,255,.08);
}


/* =========================================================
   NAMI — PROFILE TOP ICON OFF + BEAUTIFUL PENCIL
   ========================================================= */

/* Убираем солнышко/иконку сверху только на экране профиля */
html[data-svoi-theme]
.page:has(.profile-card) .topbar .top-icon {
  display: none !important;
}

html[data-svoi-theme]
.page:has(.profile-card) .topbar {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* Карточка профиля — даём место справа под карандаш */
html[data-svoi-theme]
.page:has(.profile-card) .profile-card {
  position: relative !important;
  min-height: 132px !important;
  padding: 20px 86px 20px 20px !important;
  border-radius: 28px !important;
}

/* Чуть аккуратнее текст внутри карточки */
html[data-svoi-theme]
.page:has(.profile-card) .profile-card h2 {
  margin: 0 !important;
  line-height: 1.04 !important;
}

html[data-svoi-theme]
.page:has(.profile-card) .profile-card p,
html[data-svoi-theme]
.page:has(.profile-card) .profile-card small {
  margin-top: 6px !important;
}

/* Красивый карандаш */
html[data-svoi-theme]
.page:has(.profile-card) .profile-name-button {
  position: relative !important;
  z-index: 6 !important;

  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;

  height: 48px !important;
  min-height: 48px !important;

  margin: -96px 18px 38px auto !important;
  padding: 0 !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 16px !important;
  overflow: hidden !important;

  font-size: 0 !important;
  color: #766ddd !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.78),
      rgba(255,255,255,.46)
    ) !important;

  border:
    1px solid rgba(255,255,255,.72) !important;

  box-shadow:
    0 10px 24px rgba(80,74,155,.10),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
}

html[data-svoi-theme]
.page:has(.profile-card) .profile-name-button .icon,
html[data-svoi-theme]
.page:has(.profile-card) .profile-name-button svg {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}

/* Небольшой аккуратный эффект */
html[data-svoi-theme]
.page:has(.profile-card) .profile-name-button::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  box-shadow:
    inset 0 0 0 1px rgba(120,110,230,.08) !important;
  pointer-events: none !important;
}

/* Чтобы блок под карточкой не прилипал */
html[data-svoi-theme]
.page:has(.profile-card) .profile-avatar-actions {
  margin-top: 0 !important;
}

/* Dark mode */
html[data-svoi-theme="dark"]
.page:has(.profile-card) .profile-name-button {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.04)
    ) !important;

  border-color:
    rgba(255,255,255,.09) !important;

  box-shadow:
    0 8px 22px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}


/* =========================================================
   NAMI — OFFICIAL TOP BRAND
   ========================================================= */

html[data-svoi-theme]
.nami-top-brand {
  display: flex !important;
  align-items: center !important;

  gap: 12px !important;

  margin:
    6px 0
    18px !important;

  padding:
    12px 14px !important;

  border-radius: 20px !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.57),
      rgba(255,255,255,.30)
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.64) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.72),
    0 10px 30px
      rgba(78,72,150,.05) !important;

  backdrop-filter:
    blur(20px)
    saturate(130%) !important;

  -webkit-backdrop-filter:
    blur(20px)
    saturate(130%) !important;
}


/* логотип */

html[data-svoi-theme]
.nami-top-brand-logo {
  width: 45px !important;
  height: 45px !important;

  flex: 0 0 45px !important;

  display: grid !important;
  place-items: center !important;

  overflow: hidden !important;

  border-radius: 14px !important;

  background:
    rgba(255,255,255,.55) !important;

  border:
    1px solid
    rgba(255,255,255,.68) !important;
}

html[data-svoi-theme]
.nami-top-brand-logo img {
  width: 34px !important;
  height: 34px !important;

  display: block !important;

  object-fit: contain !important;
}


/* текст */

html[data-svoi-theme]
.nami-top-brand-text {
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;
}

html[data-svoi-theme]
.nami-top-brand-text b {
  color: var(--text) !important;

  font-size: 15px !important;
  line-height: 1.1 !important;

  font-weight: 900 !important;
  letter-spacing: -.025em !important;
}

html[data-svoi-theme]
.nami-top-brand-text small {
  margin-top: 4px !important;

  color: var(--muted) !important;

  font-size: 11px !important;
  line-height: 1.3 !important;
}


/* dark */

html[data-svoi-theme="dark"]
.nami-top-brand {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.035)
    ) !important;

  border-color:
    rgba(255,255,255,.085) !important;
}

html[data-svoi-theme="dark"]
.nami-top-brand-logo {
  background:
    rgba(255,255,255,.06) !important;

  border-color:
    rgba(255,255,255,.08) !important;
}


/* NAMI TOP BRAND — SIZE FIX */

html[data-svoi-theme]
.nami-top-brand {
  width: 100% !important;
  height: auto !important;
  min-height: 68px !important;
  max-height: 68px !important;

  box-sizing: border-box !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.58),
      rgba(255,255,255,.31)
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.65) !important;
}

html[data-svoi-theme]
.nami-top-brand-logo {
  position: relative !important;

  width: 46px !important;
  height: 46px !important;

  flex: 0 0 46px !important;

  overflow: hidden !important;

  background:
    rgba(255,255,255,.54) !important;

  border:
    1px solid
    rgba(255,255,255,.68) !important;
}

html[data-svoi-theme]
.nami-top-brand-logo svg {
  position: static !important;

  width: 34px !important;
  height: 34px !important;

  max-width: 34px !important;
  max-height: 34px !important;

  transform: none !important;
}

html[data-svoi-theme]
.nami-top-brand-text b {
  font-size: 15px !important;
  font-weight: 900 !important;
}

html[data-svoi-theme]
.nami-top-brand-text small {
  margin-top: 3px !important;

  font-size: 11px !important;
  line-height: 1.25 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* dark */

html[data-svoi-theme="dark"]
.nami-top-brand {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.035)
    ) !important;

  border-color:
    rgba(255,255,255,.09) !important;
}


/* =========================================================
   NAMI — BRAND COMPACT FINAL
   ========================================================= */

html[data-svoi-theme]
.nami-top-brand {
  min-height: 60px !important;
  max-height: 60px !important;

  margin:
    -2px 0
    14px !important;

  padding:
    8px 12px !important;

  gap: 10px !important;

  border-radius: 18px !important;
}

html[data-svoi-theme]
.nami-top-brand-logo {
  width: 40px !important;
  height: 40px !important;

  min-width: 40px !important;
  min-height: 40px !important;

  flex: 0 0 40px !important;

  border-radius: 13px !important;
}

html[data-svoi-theme]
.nami-top-brand-logo svg {
  width: 30px !important;
  height: 30px !important;
}

html[data-svoi-theme]
.nami-top-brand-text b {
  font-size: 14px !important;
}

html[data-svoi-theme]
.nami-top-brand-text small {
  max-width: 280px !important;

  margin-top: 2px !important;

  font-size: 10.5px !important;
  line-height: 1.25 !important;

  white-space: normal !important;
}

/* =========================================================
   NAMI — DARK GLASS COLOR SYSTEM
   ========================================================= */

/* Главная карточка пользователя */

html[data-svoi-theme="dark"]
.profile-card {
  background:
    linear-gradient(
      135deg,
      rgba(72,79,133,.50),
      rgba(54,62,112,.34)
    ) !important;

  border:
    1px solid
    rgba(145,142,225,.28) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 45px rgba(18,20,48,.25) !important;
}


/* Кнопки фотографии */

html[data-svoi-theme="dark"]
.profile-avatar-actions button {
  color: #f6f5ff !important;

  background:
    linear-gradient(
      145deg,
      rgba(72,78,132,.46),
      rgba(52,59,108,.34)
    ) !important;

  border:
    1px solid
    rgba(143,139,222,.22) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.08) !important;
}

html[data-svoi-theme="dark"]
.profile-avatar-actions
[data-user-avatar-delete] {
  color: #f2c1cc !important;

  background:
    linear-gradient(
      145deg,
      rgba(112,67,103,.31),
      rgba(62,56,103,.34)
    ) !important;

  border:
    1px solid
    rgba(220,124,154,.18) !important;
}


/* Оформление */

html[data-svoi-theme="dark"]
.settings-list {
  overflow: hidden !important;

  border-radius: 25px !important;

  background:
    linear-gradient(
      145deg,
      rgba(54,62,112,.44),
      rgba(40,47,91,.32)
    ) !important;

  border:
    1px solid
    rgba(128,128,210,.18) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.07) !important;
}

html[data-svoi-theme="dark"]
.settings-list .setting-row {
  background:
    linear-gradient(
      145deg,
      rgba(70,77,132,.24),
      rgba(48,55,103,.18)
    ) !important;

  border-color:
    rgba(133,131,215,.10) !important;
}


/* Переключатель темы */

html[data-svoi-theme="dark"]
.theme-segment {
  background:
    rgba(38,43,82,.56) !important;

  border:
    1px solid
    rgba(132,129,211,.13) !important;
}

html[data-svoi-theme="dark"]
.theme-segment button {
  color:
    rgba(224,224,240,.60) !important;
}

html[data-svoi-theme="dark"]
.theme-segment button.active {
  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      rgba(111,98,201,.65),
      rgba(81,98,178,.58)
    ) !important;

  box-shadow:
    0 7px 18px
    rgba(45,39,110,.25) !important;
}


/* О приложении */

html[data-svoi-theme="dark"]
.about-card {
  background:
    linear-gradient(
      145deg,
      rgba(60,67,119,.42),
      rgba(43,50,96,.30)
    ) !important;

  border:
    1px solid
    rgba(135,132,214,.17) !important;
}


/* Ключ доступа */

html[data-svoi-theme="dark"]
.profile-access-key {
  background:
    linear-gradient(
      145deg,
      rgba(66,73,127,.46),
      rgba(45,53,101,.32)
    ) !important;

  border:
    1px solid
    rgba(136,133,218,.19) !important;
}


/* Дата создания */

html[data-svoi-theme="dark"]
.profile-created-row {
  background:
    linear-gradient(
      145deg,
      rgba(62,70,124,.44),
      rgba(44,52,99,.30)
    ) !important;

  border:
    1px solid
    rgba(135,132,215,.17) !important;
}


/* Выход */

html[data-svoi-theme="dark"]
.profile-logout-btn {
  background:
    linear-gradient(
      145deg,
      rgba(63,69,119,.38),
      rgba(43,49,92,.27)
    ) !important;

  border:
    1px solid
    rgba(133,130,205,.14) !important;
}


/* Удаление аккаунта */

html[data-svoi-theme="dark"]
.profile-delete-account {
  background:
    linear-gradient(
      145deg,
      rgba(105,57,88,.30),
      rgba(54,48,89,.27)
    ) !important;

  border:
    1px solid
    rgba(208,102,137,.18) !important;
}


/* Иконки — тоже без серого */

html[data-svoi-theme="dark"]
.setting-icon {
  color: #a69cf4 !important;

  background:
    linear-gradient(
      145deg,
      rgba(110,96,202,.22),
      rgba(74,91,170,.15)
    ) !important;

  border:
    1px solid
    rgba(154,145,232,.12) !important;
}


/* Фирменная плашка NAMI */

html[data-svoi-theme="dark"]
.nami-top-brand {
  background:
    linear-gradient(
      135deg,
      rgba(64,72,127,.34),
      rgba(45,53,102,.20)
    ) !important;

  border:
    1px solid
    rgba(136,132,216,.14) !important;
}

html[data-svoi-theme="dark"]
.nami-top-brand-logo {
  background:
    rgba(91,91,161,.15) !important;

  border:
    1px solid
    rgba(150,143,226,.14) !important;
}

/* =========================================================
   NAMI — PROFILE DARK COLOR FIX
   ========================================================= */

html[data-svoi-theme="dark"]
body .page .profile-card {
  background:
    linear-gradient(
      135deg,
      rgba(62,72,145,.72) 0%,
      rgba(46,55,118,.62) 55%,
      rgba(38,48,103,.58) 100%
    ) !important;

  border:
    1px solid
    rgba(139,132,235,.32) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 18px 42px rgba(10,14,42,.26) !important;
}


/* две кнопки фото */

html[data-svoi-theme="dark"]
body .page .profile-avatar-actions button {
  color: #f7f6ff !important;

  background:
    linear-gradient(
      135deg,
      rgba(65,73,143,.68),
      rgba(45,55,116,.60)
    ) !important;

  border:
    1px solid
    rgba(139,132,235,.27) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 8px 22px rgba(9,12,38,.17) !important;
}


/* удалить фото — не серое, а мягко розово-фиолетовое */

html[data-svoi-theme="dark"]
body .page .profile-avatar-actions
[data-user-avatar-delete] {
  color: #ffd6e0 !important;

  background:
    linear-gradient(
      135deg,
      rgba(112,61,108,.55),
      rgba(66,52,112,.56)
    ) !important;

  border:
    1px solid
    rgba(220,118,158,.24) !important;
}


/* карандаш тоже в цвет */

html[data-svoi-theme="dark"]
body .page .profile-name-edit {
  color: #b5aaff !important;

  background:
    linear-gradient(
      145deg,
      rgba(105,93,200,.36),
      rgba(70,79,163,.28)
    ) !important;

  border:
    1px solid
    rgba(166,155,244,.24) !important;

  box-shadow:
    0 7px 18px rgba(18,17,57,.24),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}


/* =========================================================
   NAMI — PROFILE DARK FINAL OVERRIDE
   MUST STAY AT END OF FILE
   ========================================================= */

/* Карточка пользователя */

html[data-svoi-theme="dark"] body .profile-card {
  background:
    radial-gradient(
      circle at 85% 10%,
      rgba(103,91,206,.15),
      transparent 42%
    ),
    radial-gradient(
      circle at 8% 15%,
      rgba(238,112,132,.07),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #202741 0%,
      #1c233c 52%,
      #181f37 100%
    ) !important;

  border:
    1px solid
    rgba(119,126,211,.22) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 18px 42px rgba(3,7,24,.28) !important;
}


/* Фото-кнопки */

html[data-svoi-theme="dark"]
body .profile-avatar-actions button {
  color: #f7f7ff !important;

  background:
    linear-gradient(
      145deg,
      #202842,
      #1a2139
    ) !important;

  border:
    1px solid
    rgba(119,126,211,.20) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 8px 22px rgba(3,7,24,.20) !important;
}


/* Удалить фото */

html[data-svoi-theme="dark"]
body .profile-avatar-actions
[data-user-avatar-delete] {
  color: #f3cbd6 !important;

  background:
    linear-gradient(
      145deg,
      #30203b,
      #211d36
    ) !important;

  border-color:
    rgba(211,108,144,.18) !important;
}


/* Весь блок оформления */

html[data-svoi-theme="dark"]
body .settings-list {
  background:
    linear-gradient(
      145deg,
      #1e263f,
      #191f36
    ) !important;

  border:
    1px solid
    rgba(115,122,207,.18) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 14px 32px rgba(3,7,24,.20) !important;
}


/* строки внутри оформления */

html[data-svoi-theme="dark"]
body .settings-list .setting-row {
  background:
    linear-gradient(
      145deg,
      rgba(37,46,78,.92),
      rgba(27,34,59,.92)
    ) !important;

  border:
    1px solid
    rgba(116,123,208,.10) !important;
}


/* Сегмент темы */

html[data-svoi-theme="dark"]
body .theme-segment {
  background:
    #171d32 !important;

  border:
    1px solid
    rgba(115,121,201,.12) !important;
}

html[data-svoi-theme="dark"]
body .theme-segment button {
  background:
    transparent !important;

  color:
    rgba(221,224,243,.52) !important;
}

html[data-svoi-theme="dark"]
body .theme-segment button.active {
  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #4b477e,
      #3f4d82
    ) !important;

  border:
    1px solid
    rgba(141,135,230,.18) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 7px 18px rgba(5,7,27,.22) !important;
}


/* О приложении */

html[data-svoi-theme="dark"]
body .about-card {
  background:
    linear-gradient(
      145deg,
      #202842,
      #1a2139
    ) !important;

  border:
    1px solid
    rgba(118,126,211,.18) !important;
}


/* Ключ доступа */

html[data-svoi-theme="dark"]
body .profile-access-key {
  background:
    linear-gradient(
      145deg,
      #202842,
      #192139
    ) !important;

  border:
    1px solid
    rgba(118,126,211,.18) !important;
}


/* Аккаунт создан */

html[data-svoi-theme="dark"]
body .profile-created-row {
  background:
    linear-gradient(
      145deg,
      #202842,
      #192139
    ) !important;

  border:
    1px solid
    rgba(118,126,211,.18) !important;
}


/* Выход */

html[data-svoi-theme="dark"]
body .profile-logout-btn {
  background:
    linear-gradient(
      145deg,
      #1f273f,
      #191f35
    ) !important;

  border:
    1px solid
    rgba(114,121,199,.15) !important;
}


/* Удаление аккаунта */

html[data-svoi-theme="dark"]
body .profile-delete-account {
  background:
    linear-gradient(
      145deg,
      #302038,
      #211b32
    ) !important;

  border:
    1px solid
    rgba(205,100,137,.17) !important;
}


/* Фиолетовые иконки */

html[data-svoi-theme="dark"]
body .setting-icon {
  color:
    #a396ff !important;

  background:
    linear-gradient(
      145deg,
      #29284f,
      #242745
    ) !important;

  border:
    1px solid
    rgba(140,132,230,.15) !important;
}


/* Карандаш */

html[data-svoi-theme="dark"]
body .profile-name-edit {
  color:
    #aa9cff !important;

  background:
    linear-gradient(
      145deg,
      #302c59,
      #25294b
    ) !important;

  border:
    1px solid
    rgba(159,148,244,.22) !important;
}


/* Тексты */

html[data-svoi-theme="dark"]
body .profile-card h2,
html[data-svoi-theme="dark"]
body .setting-row b,
html[data-svoi-theme="dark"]
body .about-card b,
html[data-svoi-theme="dark"]
body .profile-access-key b,
html[data-svoi-theme="dark"]
body .profile-created-row b,
html[data-svoi-theme="dark"]
body .profile-logout-btn b {
  color:
    #f8f8ff !important;
}

html[data-svoi-theme="dark"]
body .profile-card p,
html[data-svoi-theme="dark"]
body .setting-row small,
html[data-svoi-theme="dark"]
body .about-card small,
html[data-svoi-theme="dark"]
body .profile-access-key small,
html[data-svoi-theme="dark"]
body .profile-created-row small,
html[data-svoi-theme="dark"]
body .profile-logout-btn small {
  color:
    rgba(220,224,244,.66) !important;
}


/* =========================================================
   NAMI — PROFILE LIGHT FINAL
   ========================================================= */

/* NAMI как на Главной */

html:not([data-svoi-theme="dark"])
.profile-home-brand {
  display: flex !important;
  align-items: center !important;

  gap: 11px !important;

  margin: 4px 0 20px !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html:not([data-svoi-theme="dark"])
.profile-home-brand-mark {
  width: 48px !important;
  height: 48px !important;

  flex: 0 0 48px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 15px !important;

  background:
    rgba(255,255,255,.42) !important;

  border:
    1px solid rgba(255,255,255,.62) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.74),
    0 8px 22px rgba(91,83,165,.06) !important;
}

html:not([data-svoi-theme="dark"])
.profile-home-brand-mark svg {
  width: 34px !important;
  height: 34px !important;

  position: static !important;
  display: block !important;
}

html:not([data-svoi-theme="dark"])
.profile-home-brand strong {
  color: var(--text) !important;

  font-size: 17px !important;
  font-weight: 900 !important;

  letter-spacing: .22em !important;
}


/* Карточка профиля */

html:not([data-svoi-theme="dark"])
.profile-card {
  background:
    radial-gradient(
      circle at 5% 5%,
      rgba(255,151,127,.12),
      transparent 42%
    ),
    radial-gradient(
      circle at 100% 10%,
      rgba(104,137,231,.16),
      transparent 45%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.50),
      rgba(242,244,255,.37)
    ) !important;

  border:
    1px solid rgba(255,255,255,.70) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    0 16px 36px rgba(92,83,163,.06) !important;
}


/* Фото-кнопки */

html:not([data-svoi-theme="dark"])
.profile-avatar-actions button {
  color: var(--text) !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,158,137,.08),
      rgba(110,137,230,.12)
    ) !important;

  border:
    1px solid rgba(255,255,255,.70) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 8px 20px rgba(86,79,153,.045) !important;
}

html:not([data-svoi-theme="dark"])
.profile-avatar-actions
[data-user-avatar-delete] {
  color: #a95f76 !important;

  background:
    linear-gradient(
      135deg,
      rgba(244,122,143,.10),
      rgba(135,114,224,.08)
    ) !important;
}


/* Оформление */

html:not([data-svoi-theme="dark"])
.settings-list {
  background:
    linear-gradient(
      145deg,
      rgba(255,245,247,.72),
      rgba(235,241,255,.68)
    ) !important;

  border:
    1px solid rgba(255,255,255,.75) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 14px 32px rgba(86,78,155,.045) !important;
}

html:not([data-svoi-theme="dark"])
.settings-list .setting-row {
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.38),
      rgba(231,237,255,.32)
    ) !important;

  border-color:
    rgba(133,126,215,.08) !important;
}


/* Тема */

html:not([data-svoi-theme="dark"])
.theme-segment {
  background:
    linear-gradient(
      135deg,
      rgba(245,236,252,.56),
      rgba(229,237,255,.58)
    ) !important;

  border:
    1px solid rgba(137,129,216,.08) !important;
}

html:not([data-svoi-theme="dark"])
.theme-segment button.active {
  background:
    linear-gradient(
      135deg,
      rgba(218,207,250,.72),
      rgba(204,218,250,.72)
    ) !important;

  border:
    1px solid rgba(129,119,213,.11) !important;

  box-shadow:
    0 6px 16px rgba(91,82,162,.07) !important;
}


/* О приложении */

html:not([data-svoi-theme="dark"])
.about-card {
  background:
    linear-gradient(
      135deg,
      rgba(255,153,132,.065),
      rgba(105,138,232,.105)
    ) !important;

  border:
    1px solid rgba(255,255,255,.72) !important;
}


/* Аккаунт и безопасность */

html:not([data-svoi-theme="dark"])
.profile-access-key,
html:not([data-svoi-theme="dark"])
.profile-created-row,
html:not([data-svoi-theme="dark"])
.profile-logout-btn {
  background:
    linear-gradient(
      135deg,
      rgba(255,159,137,.055),
      rgba(106,138,231,.105)
    ) !important;

  border:
    1px solid rgba(255,255,255,.72) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80) !important;
}


/* Удаление */

html:not([data-svoi-theme="dark"])
.profile-delete-account {
  background:
    linear-gradient(
      135deg,
      rgba(245,124,145,.09),
      rgba(145,119,219,.065)
    ) !important;

  border:
    1px solid rgba(215,105,135,.10) !important;
}


/* Иконки */

html:not([data-svoi-theme="dark"])
.setting-icon {
  color: #776cda !important;

  background:
    linear-gradient(
      145deg,
      rgba(223,211,249,.62),
      rgba(213,224,250,.60)
    ) !important;

  border:
    1px solid rgba(130,119,213,.09) !important;
}


/* карандаш */

html:not([data-svoi-theme="dark"])
.profile-name-edit {
  color: #7368d8 !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.86),
      rgba(224,221,249,.74)
    ) !important;

  border:
    1px solid rgba(255,255,255,.88) !important;
}


/* =========================================================
   NAMI — PROFILE BRAND DARK
   ========================================================= */

html[data-svoi-theme="dark"]
.profile-home-brand {
  display: flex !important;
  align-items: center !important;

  gap: 11px !important;

  margin: 4px 0 20px !important;
  padding: 0 !important;

  background: transparent !important;
}

html[data-svoi-theme="dark"]
.profile-home-brand-mark {
  width: 48px !important;
  height: 48px !important;

  flex: 0 0 48px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 15px !important;

  background: rgba(15,19,39,.72) !important;

  border:
    1px solid rgba(126,132,220,.14) !important;
}

html[data-svoi-theme="dark"]
.profile-home-brand-mark svg {
  width: 34px !important;
  height: 34px !important;
}

html[data-svoi-theme="dark"]
.profile-home-brand strong {
  color: #fff !important;

  font-size: 17px !important;
  font-weight: 900 !important;

  letter-spacing: .22em !important;
}



/* ===== SOURCE: profile-final.css ===== */

/* =========================================================
   NAMI — CLEAN PROFILE
   отдельный финальный стиль профиля
   ========================================================= */

.nami-profile-final {
  padding-bottom:
    calc(175px + env(safe-area-inset-bottom));
}


/* ==========================================
   TITLE
   ========================================== */

.nami-profile-final-title {
  margin-bottom: 22px;
}

.nami-profile-final-title h1 {
  margin: 0;

  color: var(--text);

  font-size: 34px;
  line-height: 1;

  font-weight: 900;
  letter-spacing: -.055em;
}


/* ==========================================
   NAMI — ТОЧНО КАК НА ГЛАВНОЙ
   ========================================== */

.nami-profile-final-brand {
  margin-bottom: 20px;
}

.nami-profile-final-brand
.profile-home-brand {
  margin: 0 !important;
}


/* ==========================================
   USER CARD
   ========================================== */

.nami-profile-final-user {
  display: grid;

  grid-template-columns:
    82px minmax(0,1fr);

  align-items: center;

  gap: 16px;

  padding: 20px;

  border-radius: 28px;
}


.nami-profile-final-avatar {
  width: 82px;
  height: 82px;

  display: grid;
  place-items: center;

  overflow: hidden;

  border-radius: 24px;

  font-size: 25px;
  font-weight: 900;

  background:
    linear-gradient(
      145deg,
      rgba(255,139,126,.16),
      rgba(105,126,231,.18)
    );
}

.nami-profile-final-avatar img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


.nami-profile-final-info {
  min-width: 0;
}

.nami-profile-final-name {
  display: flex;
  align-items: center;

  gap: 9px;

  min-width: 0;
}

.nami-profile-final-name h2 {
  min-width: 0;

  margin: 0;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: var(--text);

  font-size: 24px;
  line-height: 1.05;

  font-weight: 900;
  letter-spacing: -.045em;
}

.nami-profile-final-info p {
  margin: 7px 0 0;

  color: var(--muted);

  font-size: 13px;
  line-height: 1.25;
}


/* pencil */

.nami-profile-final-edit {
  width: 38px;
  height: 38px;

  min-width: 38px;

  display: grid;
  place-items: center;

  padding: 0;

  border-radius: 50%;

  color: #796ee2;
}

.nami-profile-final-edit svg {
  width: 17px;
  height: 17px;
}


/* ==========================================
   PHOTO ACTIONS
   ========================================== */

.nami-profile-final-photo-actions {
  display: grid;

  gap: 10px;

  margin-top: 12px;
}

.nami-profile-final-photo-actions.two {
  grid-template-columns: 1fr 1fr;
}

.nami-profile-final-photo-actions.one {
  grid-template-columns: 1fr;
}

.nami-profile-final-photo-actions button {
  min-height: 50px;

  border-radius: 18px;

  color: var(--text);

  font-size: 13px;
  font-weight: 850;
}


/* ==========================================
   SECTIONS
   ========================================== */

.nami-profile-final-section-title {
  margin:
    28px 5px
    11px;

  color: var(--text);

  font-size: 20px;
  line-height: 1;

  font-weight: 900;
  letter-spacing: -.045em;
}


/* ==========================================
   APPEARANCE
   ========================================== */

.nami-profile-final-panel {
  overflow: hidden;

  border-radius: 26px;
}

.nami-profile-final-theme {
  padding: 17px;
}

.nami-profile-final-copy {
  min-width: 0;
}

.nami-profile-final-copy b,
.nami-profile-final-copy small {
  display: block;
}

.nami-profile-final-copy b {
  color: var(--text);

  font-size: 13px;
  font-weight: 850;
}

.nami-profile-final-copy small {
  margin-top: 4px;

  color: var(--muted);

  font-size: 10px;
  line-height: 1.35;
}


/* theme segment */

.nami-profile-final-theme-segment {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 4px;

  margin-top: 14px;
  padding: 4px;

  border-radius: 18px;
}

.nami-profile-final-theme-segment button {
  min-height: 42px;

  padding: 0;

  border: 0;
  border-radius: 14px;

  color: var(--muted);

  background: transparent;

  font-size: 12px;
  font-weight: 850;
}


/* generic row */

.nami-profile-final-row {
  min-height: 74px;

  display: grid;

  grid-template-columns:
    44px minmax(0,1fr) auto;

  align-items: center;

  gap: 12px;

  padding: 13px 16px;
}


.nami-profile-final-icon {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border-radius: 15px;

  color: #8175e4;
}


.nami-profile-final-divider {
  height: 1px;

  margin-left: 72px;
}


/* ==========================================
   ABOUT
   ========================================== */

.nami-profile-final-about {
  min-height: 78px;

  display: grid;

  grid-template-columns:
    44px minmax(0,1fr) auto;

  align-items: center;

  gap: 12px;

  padding: 14px 16px;

  border-radius: 24px;
}

.nami-profile-final-about em {
  color: var(--muted);

  font-size: 11px;
  font-style: normal;
}


/* ==========================================
   ACCOUNT
   ========================================== */

.nami-profile-final-account {
  overflow: hidden;

  border-radius: 26px;
}

.nami-profile-final-account-row {
  width: 100%;
  min-height: 74px;

  display: grid;

  grid-template-columns:
    44px minmax(0,1fr) auto;

  align-items: center;

  gap: 12px;

  padding: 13px 16px;

  text-align: left;

  color: var(--text);

  border: 0;
  background: transparent;
}

.nami-profile-final-account-row.static {
  cursor: default;
}

.nami-profile-final-account-row
> .icon {
  color: var(--muted);
}

.nami-profile-final-account-row.danger
.nami-profile-final-copy b {
  color: #c9657e;
}

.nami-profile-final-icon.neutral {
  color: #8a8da0;
}

.nami-profile-final-icon.danger {
  color: #d06882;
}

.nami-profile-final-divider.account {
  margin-left: 72px;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
.nami-profile-final-user {
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(255,143,125,.12),
      transparent 43%
    ),
    radial-gradient(
      circle at 100% 0%,
      rgba(104,138,232,.18),
      transparent 48%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.58),
      rgba(238,243,255,.43)
    );

  border:
    1px solid rgba(255,255,255,.76);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 18px 40px rgba(82,77,150,.06);
}


html:not([data-svoi-theme="dark"])
.nami-profile-final-edit {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.90),
      rgba(223,220,250,.78)
    );

  border:
    1px solid rgba(255,255,255,.88);

  box-shadow:
    0 7px 18px rgba(89,80,165,.10),
    inset 0 1px 0 rgba(255,255,255,.90);
}


html:not([data-svoi-theme="dark"])
.nami-profile-final-photo-actions button {
  background:
    linear-gradient(
      135deg,
      rgba(255,145,127,.08),
      rgba(103,137,231,.13)
    );

  border:
    1px solid rgba(255,255,255,.75);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 10px 24px rgba(82,76,146,.05);
}

html:not([data-svoi-theme="dark"])
.nami-profile-final-photo-actions
button.delete {
  color: #a75d75;

  background:
    linear-gradient(
      135deg,
      rgba(244,119,141,.10),
      rgba(138,117,223,.08)
    );
}


html:not([data-svoi-theme="dark"])
.nami-profile-final-panel,
html:not([data-svoi-theme="dark"])
.nami-profile-final-about,
html:not([data-svoi-theme="dark"])
.nami-profile-final-account {
  background:
    linear-gradient(
      140deg,
      rgba(255,247,249,.72),
      rgba(234,241,255,.68)
    );

  border:
    1px solid rgba(255,255,255,.77);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 14px 32px rgba(82,77,146,.045);
}


html:not([data-svoi-theme="dark"])
.nami-profile-final-theme-segment {
  background:
    linear-gradient(
      135deg,
      rgba(245,237,252,.60),
      rgba(228,237,255,.61)
    );

  border:
    1px solid rgba(135,126,214,.08);
}

html:not([data-svoi-theme="dark"])
.nami-profile-final-theme-segment
button.active {
  color: var(--text);

  background:
    linear-gradient(
      135deg,
      rgba(219,207,250,.82),
      rgba(203,219,250,.82)
    );

  box-shadow:
    0 6px 17px rgba(88,79,160,.07);
}


html:not([data-svoi-theme="dark"])
.nami-profile-final-icon {
  background:
    linear-gradient(
      145deg,
      rgba(223,211,249,.65),
      rgba(211,225,251,.63)
    );

  border:
    1px solid rgba(132,121,214,.08);
}

html:not([data-svoi-theme="dark"])
.nami-profile-final-divider {
  background:
    rgba(127,121,173,.10);
}


/* =========================================================
   DARK — ПАЛИТРА ГЛАВНОЙ
   ========================================================= */

html[data-svoi-theme="dark"]
.nami-profile-final-user {
  background:
    radial-gradient(
      circle at 14% 5%,
      rgba(244,121,132,.07),
      transparent 38%
    ),
    radial-gradient(
      circle at 100% 0%,
      rgba(106,104,218,.13),
      transparent 44%
    ),
    linear-gradient(
      145deg,
      #1b233b 0%,
      #181f36 55%,
      #151c31 100%
    );

  border:
    1px solid rgba(110,120,211,.20);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 18px 42px rgba(2,6,23,.26);
}


html[data-svoi-theme="dark"]
.nami-profile-final-edit {
  color: #aa9cff;

  background:
    linear-gradient(
      145deg,
      #302c59,
      #25294b
    );

  border:
    1px solid rgba(159,148,244,.22);

  box-shadow:
    0 7px 18px rgba(3,5,22,.22),
    inset 0 1px 0 rgba(255,255,255,.07);
}


html[data-svoi-theme="dark"]
.nami-profile-final-photo-actions button {
  color: #f8f8ff;

  background:
    linear-gradient(
      145deg,
      #202842,
      #192139
    );

  border:
    1px solid rgba(111,121,210,.20);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 9px 22px rgba(2,6,22,.19);
}

html[data-svoi-theme="dark"]
.nami-profile-final-photo-actions
button.delete {
  color: #f2cbd6;

  background:
    linear-gradient(
      145deg,
      #30203b,
      #211d36
    );

  border-color:
    rgba(211,108,144,.17);
}


html[data-svoi-theme="dark"]
.nami-profile-final-panel,
html[data-svoi-theme="dark"]
.nami-profile-final-about,
html[data-svoi-theme="dark"]
.nami-profile-final-account {
  background:
    linear-gradient(
      145deg,
      #1d253e,
      #171e34
    );

  border:
    1px solid rgba(108,118,205,.17);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 14px 32px rgba(2,6,22,.20);
}


html[data-svoi-theme="dark"]
.nami-profile-final-theme-segment {
  background: #141b30;

  border:
    1px solid rgba(108,117,199,.11);
}

html[data-svoi-theme="dark"]
.nami-profile-final-theme-segment
button.active {
  color: #fff;

  background:
    linear-gradient(
      135deg,
      #4a477e,
      #3e4c81
    );

  box-shadow:
    0 7px 18px rgba(3,5,22,.21),
    inset 0 1px 0 rgba(255,255,255,.065);
}


html[data-svoi-theme="dark"]
.nami-profile-final-icon {
  color: #a396ff;

  background:
    linear-gradient(
      145deg,
      #29284f,
      #242745
    );

  border:
    1px solid rgba(140,132,230,.14);
}

html[data-svoi-theme="dark"]
.nami-profile-final-divider {
  background:
    rgba(126,132,205,.12);
}


/* smooth tap */

.nami-profile-final button {
  -webkit-tap-highlight-color:
    transparent;
}


/* NAMI — PAGE HEADER ORDER */

.nami-profile-final-brand {
  margin:
    0 0
    22px !important;
}

.nami-profile-final-title {
  margin:
    0 0
    22px !important;
}

.nami-profile-final-title h1 {
  font-size: 34px !important;
  letter-spacing: -.055em !important;
}


/* =========================================================
   NAMI — ACCESS KEY SHEET
   ========================================================= */

.nami-access-sheet {
  padding-top: 8px;
}


/* ключ */

.nami-access-card {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  align-items: start;

  gap: 14px;

  padding: 17px;

  border-radius: 24px;
}

.nami-access-card-icon {
  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  border-radius: 17px;

  color: #9b8cff;
}

.nami-access-card-body {
  min-width: 0;
}

.nami-access-card-body small {
  display: block;

  color: var(--muted);

  font-size: 9px;
  line-height: 1;

  font-weight: 900;
  letter-spacing: .12em;
}

.nami-access-card-body strong {
  display: block;

  margin-top: 8px;

  color: var(--text);

  font-size: 17px;
  line-height: 1.25;

  font-weight: 900;
  letter-spacing: -.025em;

  overflow-wrap: anywhere;
}

.nami-access-card-body p {
  margin: 9px 0 0;

  color: var(--muted);

  font-size: 11px;
  line-height: 1.45;
}


/* две кнопки */

.nami-access-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 9px;

  margin-top: 11px;
}

.nami-access-actions button {
  min-height: 51px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 0 10px;

  border-radius: 17px;

  color: var(--text);

  font-size: 13px;
  font-weight: 850;
}

.nami-access-action-icon {
  display: grid;
  place-items: center;
}


/* главная кнопка */

.nami-access-reset {
  width: 100%;
  min-height: 57px;

  margin-top: 11px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  padding: 0 16px;

  border: 0;
  border-radius: 19px;

  color: #fff;

  font-size: 14px;
  font-weight: 900;

  background:
    linear-gradient(
      135deg,
      #796ee8 0%,
      #687fe7 100%
    );

  box-shadow:
    0 13px 28px rgba(88,78,205,.22),
    inset 0 1px 0 rgba(255,255,255,.22);
}


/* предупреждение */

.nami-access-warning {
  display: grid;
  grid-template-columns: 32px minmax(0,1fr);

  gap: 9px;

  align-items: center;

  margin-top: 12px;
  padding: 12px 13px;

  border-radius: 17px;
}

.nami-access-warning > span {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  color: #9185ef;
}

.nami-access-warning p {
  margin: 0;

  color: var(--muted);

  font-size: 10px;
  line-height: 1.45;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
.nami-access-card {
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(255,142,126,.11),
      transparent 42%
    ),
    radial-gradient(
      circle at 100% 0%,
      rgba(105,137,232,.16),
      transparent 48%
    ),
    linear-gradient(
      140deg,
      rgba(255,255,255,.66),
      rgba(237,242,255,.50)
    );

  border:
    1px solid rgba(255,255,255,.78);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 13px 30px rgba(83,76,150,.06);
}

html:not([data-svoi-theme="dark"])
.nami-access-card-icon {
  background:
    linear-gradient(
      145deg,
      rgba(224,212,250,.70),
      rgba(212,226,252,.68)
    );

  border:
    1px solid rgba(126,117,213,.09);
}

html:not([data-svoi-theme="dark"])
.nami-access-actions button {
  background:
    linear-gradient(
      135deg,
      rgba(255,153,135,.07),
      rgba(104,136,230,.12)
    );

  border:
    1px solid rgba(255,255,255,.76);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.84);
}

html:not([data-svoi-theme="dark"])
.nami-access-warning {
  background:
    linear-gradient(
      135deg,
      rgba(139,117,224,.055),
      rgba(105,137,232,.05)
    );

  border:
    1px solid rgba(128,120,213,.08);
}


/* =========================================================
   DARK — как главная NAMI
   ========================================================= */

html[data-svoi-theme="dark"]
.nami-access-card {
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(244,120,133,.07),
      transparent 40%
    ),
    radial-gradient(
      circle at 100% 0%,
      rgba(107,105,219,.13),
      transparent 46%
    ),
    linear-gradient(
      145deg,
      #1d253e 0%,
      #181f36 55%,
      #151c31 100%
    );

  border:
    1px solid rgba(111,120,210,.19);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 16px 36px rgba(2,6,22,.25);
}

html[data-svoi-theme="dark"]
.nami-access-card-icon {
  background:
    linear-gradient(
      145deg,
      #2d2b54,
      #252846
    );

  border:
    1px solid rgba(146,137,235,.15);
}

html[data-svoi-theme="dark"]
.nami-access-actions button {
  color: #f7f7ff;

  background:
    linear-gradient(
      145deg,
      #202842,
      #191f36
    );

  border:
    1px solid rgba(111,120,207,.18);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 8px 20px rgba(2,6,22,.18);
}

html[data-svoi-theme="dark"]
.nami-access-warning {
  background:
    linear-gradient(
      145deg,
      rgba(43,42,79,.62),
      rgba(25,31,57,.66)
    );

  border:
    1px solid rgba(118,112,207,.12);
}



/* ===== SOURCE: nami-pages.css ===== */

/* =========================================================
   NAMI — UNIVERSAL PAGE HEADER
   ========================================================= */

.nami-page-header {
  width: 100%;

  margin:
    0 0
    24px;
}


/* NAMI — тот же бренд, что на главной */

.nami-page-header
.nami-page-brand {
  display: flex !important;
  align-items: center !important;

  gap: 11px !important;

  margin:
    0 0
    22px !important;

  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* логотип */

.nami-page-header
.profile-home-brand > span {
  width: 48px !important;
  height: 48px !important;

  flex: 0 0 48px !important;

  display: block !important;

  border-radius: 15px !important;

  background:
    url('/static/nami-mark.svg')
    center / 36px 36px
    no-repeat !important;
}


/* NAMI */

.nami-page-header
.profile-home-brand b {
  color: var(--text) !important;

  font-size: 17px !important;
  line-height: 1 !important;

  font-weight: 900 !important;

  letter-spacing: .22em !important;
}


/* ==========================================
   TITLE ROW
   ========================================== */

.nami-page-title-row {
  width: 100%;

  display: flex;
  align-items: center;

  gap: 11px;
}

.nami-page-title-row h1 {
  min-width: 0;
  flex: 1;

  margin: 0;

  color: var(--text);

  font-size: 34px;
  line-height: 1.02;

  font-weight: 900;
  letter-spacing: -.055em;
}


/* кнопка назад / плюс */

.nami-page-head-button {
  width: 46px;
  height: 46px;

  flex: 0 0 46px;

  display: grid;
  place-items: center;

  padding: 0;

  border-radius: 15px;

  color: #8b80eb;
}

.nami-page-head-action {
  margin-left: auto;

  display: flex;
  align-items: center;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
.nami-page-head-button {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.78),
      rgba(224,224,251,.65)
    );

  border:
    1px solid rgba(255,255,255,.82);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 20px rgba(87,80,157,.07);
}


/* =========================================================
   DARK — как главная
   ========================================================= */

html[data-svoi-theme="dark"]
.nami-page-header
.profile-home-brand b {
  color: #fff !important;
}

html[data-svoi-theme="dark"]
.nami-page-head-button {
  color: #a89cff;

  background:
    linear-gradient(
      145deg,
      #202842,
      #191f36
    );

  border:
    1px solid rgba(112,120,207,.18);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 20px rgba(2,6,22,.18);
}


/* mobile */

@media (max-width: 390px) {

  .nami-page-title-row h1 {
    font-size: 31px;
  }

}



/* ===== SOURCE: auth-final.css ===== */
/* =========================================================
   NAMI — AUTH FINAL
   LIGHT + DARK + SYSTEM
   ========================================================= */

.auth-shell {
  width: 100%;
  max-width: 520px;

  margin: 0 auto;

  padding:
    8px 0
    48px;

  box-sizing: border-box;
}


/* =========================================================
   BRAND
   ========================================================= */

.nami-auth-brand {
  display: flex;
  align-items: center;

  gap: 10px;

  margin:
    3px 0
    22px;
}

.nami-auth-brand-mark {
  width: 46px;
  height: 46px;

  flex: 0 0 46px;

  display: block;

  border-radius: 15px;

  background:
    url('/static/nami-mark.svg')
    center / 34px 34px
    no-repeat;
}

.nami-auth-brand strong {
  font-size: 17px;
  line-height: 1;

  font-weight: 900;
  letter-spacing: .21em;
}


/* =========================================================
   HEADING
   ========================================================= */

.auth-heading {
  margin-bottom: 18px;
}

.auth-heading > span {
  display: none !important;
}

.auth-heading h1 {
  margin: 0;

  font-size: 34px;
  line-height: 1.02;

  font-weight: 900;
  letter-spacing: -.055em;
}

.auth-heading p {
  margin:
    10px 0 0;

  font-size: 14px;
  line-height: 1.42;
}


/* =========================================================
   FEATURES
   ========================================================= */

.auth-about {
  display: grid;

  gap: 8px;

  margin-bottom: 19px;
}

.auth-about > div {
  display: grid;

  grid-template-columns:
    46px minmax(0,1fr);

  align-items: center;

  gap: 12px;

  min-height: 68px;

  padding:
    10px 13px;

  border-radius: 20px;

  box-sizing: border-box;
}

.auth-about > div > span {
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  border-radius: 15px;
}

.auth-about p {
  min-width: 0;

  margin: 0;
}

.auth-about b,
.auth-about small {
  display: block;
}

.auth-about b {
  font-size: 14px;
  line-height: 1.15;

  font-weight: 850;
}

.auth-about small {
  margin-top: 4px;

  font-size: 11px;
  line-height: 1.3;
}


/* =========================================================
   TABS
   ========================================================= */

.auth-tabs {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 4px;

  margin:
    0 0
    18px;

  padding: 5px;

  border-radius: 21px;
}

.auth-tabs button {
  min-height: 52px;

  padding:
    0 12px;

  border: 0;

  border-radius: 17px;

  font-size: 14px;
  font-weight: 800;

  transition:
    background .2s ease,
    color .2s ease,
    transform .16s ease,
    box-shadow .2s ease;
}

.auth-tabs button:active {
  transform: scale(.985);
}


/* =========================================================
   FORM
   ========================================================= */

.auth-form {
  display: grid;

  gap: 13px;
}

.auth-form .field {
  display: block;
}

.auth-form .field > span {
  display: block;

  margin:
    0 5px
    8px;

  font-size: 12px;
  font-weight: 800;
}

.auth-form input {
  width: 100%;
  height: 64px;

  padding:
    0 18px;

  border-radius: 22px;

  outline: none;

  box-sizing: border-box;

  font: inherit;

  font-size: 17px;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.auth-main-btn {
  min-height: 62px !important;

  margin-top: 2px !important;

  border-radius: 21px !important;

  font-size: 16px !important;
  font-weight: 900 !important;

  letter-spacing: -.01em;

  transition:
    transform .16s ease,
    opacity .16s ease,
    box-shadow .2s ease;
}

.auth-main-btn:active {
  transform: scale(.985);
}

.auth-main-btn:disabled {
  opacity: .68;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
.nami-auth-brand-mark {
  background-color:
    rgba(255,255,255,.42);

  border:
    1px solid
    rgba(255,255,255,.68);

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.82),
    0 8px 24px
      rgba(83,76,154,.06);
}

html:not([data-svoi-theme="dark"])
.nami-auth-brand strong {
  color: var(--text);
}

html:not([data-svoi-theme="dark"])
.auth-heading h1 {
  color: var(--text);
}

html:not([data-svoi-theme="dark"])
.auth-heading p,
html:not([data-svoi-theme="dark"])
.auth-about small {
  color: var(--muted);
}

html:not([data-svoi-theme="dark"])
.auth-about > div {
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.60),
      rgba(241,244,255,.45)
    );

  border:
    1px solid
    rgba(255,255,255,.73);

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.82),
    0 8px 24px
      rgba(83,77,150,.035);
}

html:not([data-svoi-theme="dark"])
.auth-about > div > span {
  color: #7d72dc;

  background:
    linear-gradient(
      145deg,
      rgba(225,215,251,.70),
      rgba(217,228,252,.68)
    );

  border:
    1px solid
    rgba(133,122,216,.08);
}

html:not([data-svoi-theme="dark"])
.auth-about b {
  color: var(--text);
}

html:not([data-svoi-theme="dark"])
.auth-tabs {
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.47),
      rgba(231,237,252,.55)
    );

  border:
    1px solid
    rgba(255,255,255,.74);
}

html:not([data-svoi-theme="dark"])
.auth-tabs button {
  color:
    rgba(74,76,91,.58);

  background:
    transparent;
}

html:not([data-svoi-theme="dark"])
.auth-tabs button.active {
  color: var(--text);

  background:
    linear-gradient(
      135deg,
      rgba(224,215,250,.82),
      rgba(212,225,251,.82)
    );

  border:
    1px solid
    rgba(132,121,216,.10);

  box-shadow:
    0 6px 18px
      rgba(88,80,157,.07),
    inset 0 1px 0
      rgba(255,255,255,.72);
}

html:not([data-svoi-theme="dark"])
.auth-form .field > span {
  color:
    rgba(76,76,91,.72);
}

html:not([data-svoi-theme="dark"])
.auth-form input {
  color: var(--text);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.62),
      rgba(237,242,255,.52)
    );

  border:
    1px solid
    rgba(255,255,255,.76);

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.85),
    0 8px 24px
      rgba(82,76,148,.035);
}

html:not([data-svoi-theme="dark"])
.auth-form input::placeholder {
  color:
    rgba(106,106,124,.56);
}

html:not([data-svoi-theme="dark"])
.auth-form input:focus {
  background:
    rgba(255,255,255,.76);

  border-color:
    rgba(118,106,217,.32);

  box-shadow:
    0 0 0 4px
      rgba(118,106,217,.08),
    inset 0 1px 0
      rgba(255,255,255,.92);
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
.nami-auth-brand-mark {
  background-color:
    rgba(15,19,39,.70);

  border:
    1px solid
    rgba(126,132,220,.14);

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.045),
    0 9px 26px
      rgba(0,0,0,.18);
}

html[data-svoi-theme="dark"]
.nami-auth-brand strong,
html[data-svoi-theme="dark"]
.auth-heading h1,
html[data-svoi-theme="dark"]
.auth-about b {
  color: #f8f8ff;
}

html[data-svoi-theme="dark"]
.auth-heading p,
html[data-svoi-theme="dark"]
.auth-about small {
  color:
    rgba(220,224,244,.62);
}

html[data-svoi-theme="dark"]
.auth-about > div {
  background:
    linear-gradient(
      145deg,
      #202842,
      #192139
    );

  border:
    1px solid
    rgba(118,126,211,.16);

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.045),
    0 10px 28px
      rgba(3,7,24,.18);
}

html[data-svoi-theme="dark"]
.auth-about > div > span {
  color: #a99cff;

  background:
    linear-gradient(
      145deg,
      rgba(101,91,194,.25),
      rgba(70,82,169,.19)
    );

  border:
    1px solid
    rgba(153,143,237,.12);
}

html[data-svoi-theme="dark"]
.auth-tabs {
  background:
    #161c30;

  border:
    1px solid
    rgba(112,120,198,.14);
}

html[data-svoi-theme="dark"]
.auth-tabs button {
  color:
    rgba(218,222,241,.50);

  background:
    transparent;
}

html[data-svoi-theme="dark"]
.auth-tabs button.active {
  color: #fff;

  background:
    linear-gradient(
      135deg,
      #494477,
      #3d4d83
    );

  border:
    1px solid
    rgba(145,138,228,.18);

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.08),
    0 7px 20px
      rgba(3,6,25,.26);
}

html[data-svoi-theme="dark"]
.auth-form .field > span {
  color:
    rgba(221,224,243,.66);
}

html[data-svoi-theme="dark"]
.auth-form input {
  color: #f7f7ff;

  background:
    linear-gradient(
      145deg,
      #202842,
      #192138
    );

  border:
    1px solid
    rgba(117,124,205,.17);

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.045),
    0 9px 24px
      rgba(3,7,24,.18);
}

html[data-svoi-theme="dark"]
.auth-form input::placeholder {
  color:
    rgba(214,218,239,.38);
}

html[data-svoi-theme="dark"]
.auth-form input:focus {
  border-color:
    rgba(154,142,239,.42);

  box-shadow:
    0 0 0 4px
      rgba(124,108,231,.12),
    inset 0 1px 0
      rgba(255,255,255,.06);
}


/* =========================================================
   SYSTEM / AUTO DARK
   ========================================================= */

@media (prefers-color-scheme: dark) {

  html[data-svoi-theme="system"]
  .nami-auth-brand strong,

  html[data-svoi-theme="system"]
  .auth-heading h1,

  html[data-svoi-theme="system"]
  .auth-about b {
    color: #f8f8ff;
  }

  html[data-svoi-theme="system"]
  .nami-auth-brand-mark {
    background-color:
      rgba(15,19,39,.70);

    border:
      1px solid
      rgba(126,132,220,.14);
  }

  html[data-svoi-theme="system"]
  .auth-heading p,

  html[data-svoi-theme="system"]
  .auth-about small {
    color:
      rgba(220,224,244,.62);
  }

  html[data-svoi-theme="system"]
  .auth-about > div {
    background:
      linear-gradient(
        145deg,
        #202842,
        #192139
      );

    border:
      1px solid
      rgba(118,126,211,.16);
  }

  html[data-svoi-theme="system"]
  .auth-about > div > span {
    color: #a99cff;

    background:
      rgba(101,91,194,.22);
  }

  html[data-svoi-theme="system"]
  .auth-tabs {
    background: #161c30;

    border:
      1px solid
      rgba(112,120,198,.14);
  }

  html[data-svoi-theme="system"]
  .auth-tabs button {
    color:
      rgba(218,222,241,.50);
  }

  html[data-svoi-theme="system"]
  .auth-tabs button.active {
    color: #fff;

    background:
      linear-gradient(
        135deg,
        #494477,
        #3d4d83
      );
  }

  html[data-svoi-theme="system"]
  .auth-form .field > span {
    color:
      rgba(221,224,243,.66);
  }

  html[data-svoi-theme="system"]
  .auth-form input {
    color: #f7f7ff;

    background:
      linear-gradient(
        145deg,
        #202842,
        #192138
      );

    border:
      1px solid
      rgba(117,124,205,.17);
  }

  html[data-svoi-theme="system"]
  .auth-form input::placeholder {
    color:
      rgba(214,218,239,.38);
  }

}


/* =========================================================
   SMALL IPHONE
   ========================================================= */

@media (max-width: 390px) {

  .auth-heading h1 {
    font-size: 31px;
  }

  .auth-about > div {
    min-height: 64px;

    padding:
      9px 11px;
  }

  .auth-form input {
    height: 60px;
  }

}


/* ===== SOURCE: home-final.css ===== */

/* =========================================================
   NAMI — HOME FINAL
   Только главная страница
   ========================================================= */

.profile-home {
  width: 100% !important;

  padding-bottom:
    calc(150px + env(safe-area-inset-bottom)) !important;
}


/* =========================================================
   HEADER / NAMI
   ========================================================= */

.profile-home .profile-home-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  margin: 0 0 24px !important;
}

.profile-home .profile-home-brand {
  display: flex !important;
  align-items: center !important;

  gap: 12px !important;

  margin: 0 !important;
}

.profile-home .profile-home-brand > span {
  width: 48px !important;
  height: 48px !important;

  flex: 0 0 48px !important;

  display: block !important;

  border-radius: 16px !important;

  background:
    url('/static/nami-mark.svg')
    center / 34px 34px
    no-repeat !important;
}

.profile-home .profile-home-brand b {
  font-size: 17px !important;
  font-weight: 900 !important;

  letter-spacing: .24em !important;

  color: var(--text) !important;
}

.profile-home .home-avatar {
  width: 52px !important;
  height: 52px !important;

  min-width: 52px !important;
  min-height: 52px !important;

  padding: 0 !important;

  overflow: hidden !important;

  border-radius: 17px !important;
}

.profile-home .home-avatar img {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  border-radius: inherit !important;
}


/* =========================================================
   INTRO
   ========================================================= */

.profile-home .profile-home-intro {
  margin: 0 0 22px !important;
}

.profile-home .profile-home-intro h1 {
  margin: 0 !important;

  font-size: 35px !important;
  line-height: 1.02 !important;

  font-weight: 900 !important;
  letter-spacing: -.055em !important;

  color: var(--text) !important;
}

.profile-home .profile-home-intro p {
  margin: 9px 0 0 !important;

  font-size: 13px !important;
  line-height: 1.4 !important;

  color: var(--muted) !important;
}


/* =========================================================
   GRID
   ========================================================= */

.profile-home .profile-space-list {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 12px !important;
}


/* =========================================================
   BASE CARD
   ========================================================= */

.profile-home .space-profile-card {
  position: relative !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  padding: 20px 15px !important;

  overflow: hidden !important;

  text-align: center !important;

  border-radius: 28px !important;

  -webkit-tap-highlight-color: transparent !important;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease !important;
}

.profile-home .space-profile-card:active {
  transform: scale(.975) !important;
}


/* Пара всегда на всю ширину */

.profile-home .space-profile-card.couple {
  grid-column: 1 / -1 !important;

  min-height: 188px !important;
}


/* Компания */

.profile-home .space-profile-card.friends,
.profile-home .space-profile-card.new-friends {
  min-height: 172px !important;
}


/* убираем старние стрелки */

.profile-home .space-profile-enter {
  display: none !important;
}


/* =========================================================
   VISUAL
   ========================================================= */

.profile-home .space-profile-visual {
  position: relative !important;

  display: grid !important;
  place-items: center !important;

  flex: none !important;

  margin: 0 0 13px !important;

  overflow: visible !important;
}

.profile-home
.space-profile-card.couple
.space-profile-visual {
  width: 82px !important;
  height: 82px !important;

  min-width: 82px !important;
  min-height: 82px !important;

  border-radius: 26px !important;
}

.profile-home
.space-profile-card.friends
.space-profile-visual,
.profile-home
.space-profile-card.new-friends
.space-profile-visual {
  width: 72px !important;
  height: 72px !important;

  min-width: 72px !important;
  min-height: 72px !important;

  border-radius: 23px !important;
}


/* фото пространства */

.profile-home .space-profile-photo {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  border-radius: inherit !important;
}


/* NAMI symbol */

.profile-home .nami-space-symbol {
  display: block !important;

  width: 62px !important;
  height: 62px !important;

  filter:
    drop-shadow(
      0 9px 18px
      rgba(107,91,190,.16)
    ) !important;
}

.profile-home
.space-profile-card.friends
.nami-space-symbol {
  width: 57px !important;
  height: 57px !important;
}


/* плюс новой компании */

.profile-home
.space-profile-card.new-friends
.space-profile-main-icon > .icon {
  display: block !important;

  width: 34px !important;
  height: 34px !important;
}


/* камера */

.profile-home .space-avatar-edit {
  right: -7px !important;
  bottom: -7px !important;

  width: 32px !important;
  height: 32px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 11px !important;
}


/* =========================================================
   TEXT
   ========================================================= */

.profile-home .space-profile-info {
  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;

  min-width: 0 !important;
}

.profile-home .space-profile-info small {
  margin: 0 0 7px !important;

  font-size: 9px !important;
  line-height: 1 !important;

  font-weight: 900 !important;
  letter-spacing: .20em !important;
}

.profile-home .space-profile-info b {
  display: block !important;

  max-width: 100% !important;

  margin: 0 !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;

  color: var(--text) !important;

  font-size: 19px !important;
  line-height: 1.08 !important;

  font-weight: 900 !important;

  letter-spacing: -.035em !important;
}

.profile-home
.space-profile-card.couple
.space-profile-info b {
  font-size: 21px !important;
}

.profile-home .space-profile-info > span {
  margin-top: 7px !important;

  color: var(--muted) !important;

  font-size: 10px !important;
  line-height: 1.25 !important;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
.profile-home .profile-home-brand > span {
  background:
    url('/static/nami-mark.svg')
    center / 34px 34px
    no-repeat,
    rgba(255,255,255,.38) !important;

  border:
    1px solid
    rgba(255,255,255,.68) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.8),
    0 8px 22px
      rgba(87,78,155,.06) !important;
}


html:not([data-svoi-theme="dark"])
.profile-home .space-profile-card.couple {
  background:
    radial-gradient(
      circle at 14% 5%,
      rgba(255,143,126,.19),
      transparent 43%
    ),
    radial-gradient(
      circle at 92% 10%,
      rgba(107,132,232,.20),
      transparent 46%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.58),
      rgba(239,241,255,.46)
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.76) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.86),
    0 17px 42px
      rgba(85,76,155,.07) !important;
}


html:not([data-svoi-theme="dark"])
.profile-home .space-profile-card.friends {
  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(132,116,229,.12),
      transparent 48%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(103,151,235,.14),
      transparent 47%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.54),
      rgba(237,243,255,.40)
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.72) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.82),
    0 12px 32px
      rgba(79,76,150,.055) !important;
}


html:not([data-svoi-theme="dark"])
.profile-home .space-profile-card.new-friends {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.32),
      rgba(226,228,250,.22)
    ) !important;

  border:
    1.5px dashed
    rgba(114,107,188,.25) !important;

  box-shadow: none !important;
}


html:not([data-svoi-theme="dark"])
.profile-home .space-profile-visual:not(.has-photo) {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.50),
      rgba(137,126,221,.075)
    ) !important;

  border:
    1px solid
    rgba(127,117,211,.10) !important;
}


html:not([data-svoi-theme="dark"])
.profile-home .space-profile-info small {
  color: #8175d7 !important;
}


html:not([data-svoi-theme="dark"])
.profile-home .space-avatar-edit {
  color: #736bd7 !important;

  background:
    rgba(250,249,255,.94) !important;

  border:
    1px solid
    rgba(125,113,209,.18) !important;

  box-shadow:
    0 6px 16px
    rgba(82,72,148,.12) !important;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
.profile-home .profile-home-brand > span {
  background:
    url('/static/nami-mark.svg')
    center / 34px 34px
    no-repeat,
    rgba(17,22,44,.72) !important;

  border:
    1px solid
    rgba(126,132,220,.14) !important;
}


html[data-svoi-theme="dark"]
.profile-home .space-profile-card.couple {
  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(238,111,129,.11),
      transparent 40%
    ),
    radial-gradient(
      circle at 88% 10%,
      rgba(105,93,209,.18),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      #1e263f 0%,
      #1a2139 55%,
      #171e34 100%
    ) !important;

  border:
    1px solid
    rgba(126,122,216,.19) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.055),
    0 17px 42px
      rgba(3,7,24,.25) !important;
}


html[data-svoi-theme="dark"]
.profile-home .space-profile-card.friends {
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(88,105,205,.12),
      transparent 46%
    ),
    linear-gradient(
      145deg,
      #1c253e,
      #171f35
    ) !important;

  border:
    1px solid
    rgba(116,124,207,.16) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.045),
    0 12px 30px
      rgba(3,7,24,.20) !important;
}


html[data-svoi-theme="dark"]
.profile-home .space-profile-card.new-friends {
  background:
    linear-gradient(
      145deg,
      rgba(32,39,65,.68),
      rgba(25,31,53,.54)
    ) !important;

  border:
    1.5px dashed
    rgba(132,126,218,.20) !important;

  box-shadow: none !important;
}


html[data-svoi-theme="dark"]
.profile-home .space-profile-visual:not(.has-photo) {
  background:
    linear-gradient(
      145deg,
      rgba(103,93,201,.15),
      rgba(61,70,141,.10)
    ) !important;

  border:
    1px solid
    rgba(133,126,223,.15) !important;
}


html[data-svoi-theme="dark"]
.profile-home .space-profile-info small {
  color: #a89cff !important;
}


html[data-svoi-theme="dark"]
.profile-home .space-profile-info b {
  color: #f8f8ff !important;
}


html[data-svoi-theme="dark"]
.profile-home .space-profile-info > span {
  color:
    rgba(218,221,240,.57) !important;
}


html[data-svoi-theme="dark"]
.profile-home .space-avatar-edit {
  color: #b1a6ff !important;

  background:
    #1b2037 !important;

  border:
    1px solid
    rgba(155,145,240,.20) !important;

  box-shadow:
    0 6px 16px
    rgba(3,6,22,.30) !important;
}


/* =========================================================
   SMALL IPHONE
   ========================================================= */

@media (max-width: 380px) {

  .profile-home .profile-home-intro h1 {
    font-size: 32px !important;
  }

  .profile-home .space-profile-card {
    padding-left: 11px !important;
    padding-right: 11px !important;
  }

  .profile-home .space-profile-info b {
    font-size: 17px !important;
  }

}


/* =========================================================
   NAMI — JOIN SPACE BY CODE
   ========================================================= */

.home-join-code {
  width: 100%;

  display: grid;
  grid-template-columns: 46px minmax(0,1fr) 30px;
  align-items: center;

  gap: 13px;

  margin: 4px 0 18px;
  padding: 13px 14px;

  border-radius: 22px;

  text-align: left;

  -webkit-tap-highlight-color: transparent;
}

.home-join-code-icon {
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  border-radius: 15px;

  font-size: 20px;
  font-weight: 900;

  color: #776de0;
}

.home-join-code-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;
}

.home-join-code-copy b {
  color: var(--text);

  font-size: 14px;
  line-height: 1.15;

  font-weight: 850;
}

.home-join-code-copy small {
  margin-top: 4px;

  color: var(--muted);

  font-size: 11px;
}

.home-join-code-arrow {
  color: #8177dc;

  font-size: 26px;
  font-weight: 400;

  text-align: center;
}


/* SHEET */

.join-code-sheet {
  padding: 5px 0 8px;

  text-align: center;
}

.join-code-art {
  width: 72px;
  height: 72px;

  display: grid;
  place-items: center;

  margin: 2px auto 17px;

  border-radius: 23px;
}

.join-code-art-symbol {
  font-size: 29px;
  font-weight: 900;

  color: #786de0;
}

.join-code-heading h3 {
  margin: 0;

  color: var(--text);

  font-size: 22px;
  line-height: 1.08;

  font-weight: 900;
  letter-spacing: -.035em;
}

.join-code-heading p {
  max-width: 290px;

  margin: 9px auto 20px;

  color: var(--muted);

  font-size: 13px;
  line-height: 1.45;
}

.join-code-input {
  width: 100%;
  height: 62px;

  padding: 0 18px;

  border-radius: 19px;

  outline: none;

  text-align: center;
  text-transform: uppercase;

  color: var(--text);

  font-size: 22px;
  line-height: 1;

  font-weight: 900;
  letter-spacing: .18em;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    monospace;
}

.join-code-input::placeholder {
  opacity: .3;
}

.join-code-submit {
  height: 54px;

  margin-top: 11px;

  border-radius: 17px !important;
}

.join-code-submit:disabled {
  opacity: .65;
}

.join-code-hint {
  display: block;

  margin-top: 13px;

  color: var(--muted);

  font-size: 10px;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
.home-join-code {
  background:
    linear-gradient(
      135deg,
      rgba(255,246,249,.68),
      rgba(232,239,255,.70)
    );

  border:
    1px solid rgba(255,255,255,.82);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 10px 27px rgba(83,76,150,.045);
}

html:not([data-svoi-theme="dark"])
.home-join-code-icon,
html:not([data-svoi-theme="dark"])
.join-code-art {
  background:
    linear-gradient(
      145deg,
      rgba(226,213,250,.73),
      rgba(211,225,252,.71)
    );

  border:
    1px solid rgba(255,255,255,.78);
}

html:not([data-svoi-theme="dark"])
.join-code-input {
  background:
    rgba(255,255,255,.58);

  border:
    1px solid rgba(255,255,255,.80);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86);
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
.home-join-code {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(95,91,198,.12),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      #202842,
      #181f35
    );

  border:
    1px solid rgba(118,125,210,.17);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 12px 30px rgba(2,6,22,.20);
}

html[data-svoi-theme="dark"]
.home-join-code-icon,
html[data-svoi-theme="dark"]
.join-code-art {
  color: #aaa0ff;

  background:
    rgba(112,102,216,.14);

  border:
    1px solid rgba(136,128,222,.15);
}

html[data-svoi-theme="dark"]
.join-code-input {
  color: #fff;

  background:
    #1b2239;

  border:
    1px solid rgba(119,126,211,.17);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04);
}


/* =========================================================
   NAMI — JOIN CODE V2
   ========================================================= */


/* =========================================================
   HOME COMPACT INVITE
   ========================================================= */

.home-join-code-v2 {
  min-height: 66px !important;

  grid-template-columns:
    42px minmax(0,1fr) auto !important;

  gap: 12px !important;

  margin:
    2px 0 20px !important;

  padding:
    10px 11px !important;

  border-radius:
    20px !important;
}

.home-join-code-v2
.home-join-code-icon {
  width: 42px !important;
  height: 42px !important;

  border-radius:
    13px !important;

  overflow: hidden !important;
}

.home-join-code-v2
.home-join-code-icon img {
  width: 27px !important;
  height: 27px !important;

  object-fit: contain !important;
}

.home-join-code-v2
.home-join-code-copy b {
  font-size: 14px !important;
  line-height: 1.1 !important;

  font-weight: 850 !important;
}

.home-join-code-v2
.home-join-code-copy small {
  margin-top: 4px !important;

  font-size: 11px !important;
}

.home-join-code-cta {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 67px;
  height: 36px;

  padding: 0 12px;

  border-radius: 12px;

  color: #756bd8;

  font-size: 11px;
  font-weight: 850;
}


/* =========================================================
   SHEET V2
   ========================================================= */

.join-code-sheet-v2 {
  padding:
    7px 0 10px !important;

  text-align:
    center !important;
}


/* logo */

.join-code-badge {
  width: 60px;
  height: 60px;

  display: grid;
  place-items: center;

  margin:
    3px auto 15px;

  border-radius:
    19px;
}

.join-code-badge img {
  width: 38px;
  height: 38px;

  object-fit: contain;
}


/* label */

.join-code-eyebrow {
  display: block;

  color: #8276df;

  font-size: 10px;
  line-height: 1;

  font-weight: 900;
  letter-spacing: .16em;
}


/* text */

.join-code-description {
  max-width: 285px;

  margin:
    9px auto 22px !important;

  color: var(--muted);

  font-size: 13px;
  line-height: 1.45;
}


/* =========================================================
   6 CODE CELLS
   ========================================================= */

.join-code-boxes {
  display: grid;

  grid-template-columns:
    repeat(6,minmax(0,1fr));

  gap: 7px;

  width: 100%;

  margin-bottom: 13px;
}

.join-code-char {
  min-width: 0;
  width: 100%;
  height: 58px;

  padding: 0 !important;

  border-radius:
    16px !important;

  outline:
    none !important;

  text-align:
    center;

  text-transform:
    uppercase;

  color:
    var(--text);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    sans-serif;

  font-size:
    22px;

  line-height:
    58px;

  font-weight:
    850;

  caret-color:
    #786dde;

  transition:
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.join-code-char:focus {
  transform:
    translateY(-1px);
}


/* button */

.join-code-sheet-v2
.join-code-submit {
  height: 54px !important;

  margin-top:
    0 !important;

  border-radius:
    17px !important;

  font-size:
    15px !important;

  font-weight:
    850 !important;
}


/* hint */

.join-code-sheet-v2
.join-code-hint {
  margin-top:
    14px !important;

  font-size:
    10px !important;

  opacity:
    .72;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
.home-join-code-v2 {
  background:
    rgba(255,255,255,.36) !important;

  border:
    1px solid
    rgba(255,255,255,.76) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.78),
    0 8px 22px
      rgba(86,77,153,.035) !important;
}

html:not([data-svoi-theme="dark"])
.home-join-code-v2
.home-join-code-icon {
  background:
    linear-gradient(
      145deg,
      rgba(255,221,224,.55),
      rgba(218,225,254,.66)
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.75) !important;
}

html:not([data-svoi-theme="dark"])
.home-join-code-cta {
  background:
    linear-gradient(
      135deg,
      rgba(224,213,251,.60),
      rgba(213,225,252,.66)
    );

  border:
    1px solid
    rgba(255,255,255,.72);
}


/* sheet */

html:not([data-svoi-theme="dark"])
.join-code-badge {
  background:
    linear-gradient(
      145deg,
      rgba(255,222,225,.54),
      rgba(217,224,252,.69)
    );

  border:
    1px solid
    rgba(255,255,255,.82);

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.88);
}

html:not([data-svoi-theme="dark"])
.join-code-char {
  background:
    rgba(255,255,255,.55) !important;

  border:
    1px solid
    rgba(129,119,209,.10) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.82) !important;
}

html:not([data-svoi-theme="dark"])
.join-code-char:focus {
  border-color:
    rgba(123,109,224,.42) !important;

  box-shadow:
    0 0 0 3px
      rgba(120,105,225,.08),
    inset 0 1px 0
      rgba(255,255,255,.88) !important;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
.home-join-code-v2 {
  background:
    rgba(28,35,59,.68) !important;

  border:
    1px solid
    rgba(118,125,210,.13) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.035),
    0 8px 22px
      rgba(2,6,22,.13) !important;
}

html[data-svoi-theme="dark"]
.home-join-code-v2
.home-join-code-icon {
  background:
    rgba(100,91,196,.12) !important;

  border:
    1px solid
    rgba(129,122,216,.12) !important;
}

html[data-svoi-theme="dark"]
.home-join-code-cta {
  color:
    #b0a5ff;

  background:
    rgba(112,101,216,.13);

  border:
    1px solid
    rgba(130,122,218,.13);
}


/* sheet */

html[data-svoi-theme="dark"]
.join-code-badge {
  background:
    linear-gradient(
      145deg,
      rgba(113,70,120,.26),
      rgba(70,67,142,.28)
    );

  border:
    1px solid
    rgba(136,127,220,.14);

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.04);
}

html[data-svoi-theme="dark"]
.join-code-char {
  color:
    #fff !important;

  background:
    #191f34 !important;

  border:
    1px solid
    rgba(118,125,210,.14) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.03) !important;
}

html[data-svoi-theme="dark"]
.join-code-char:focus {
  border-color:
    rgba(151,138,239,.48) !important;

  box-shadow:
    0 0 0 3px
      rgba(118,103,223,.10),
    inset 0 1px 0
      rgba(255,255,255,.035) !important;
}


/* =========================================================
   SMALL IPHONE
   ========================================================= */

@media (max-width: 380px) {

  .join-code-boxes {
    gap: 5px;
  }

  .join-code-char {
    height: 54px;

    border-radius:
      14px !important;

    font-size:
      20px;
  }

}



/* ===== NAMI JOIN CODE V3 BEGIN ===== */


/* ==========================================================
   JOIN CODE — NAMI PREMIUM V3
   ========================================================== */

.join-code-sheet-v3 {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  width: 100%;
  box-sizing: border-box;

  padding:
    6px
    2px
    4px;

  text-align: center;
}


/* everything except decorations stays above bubbles */

.join-code-sheet-v3 > *:not(.join-code-orb) {
  position: relative;
  z-index: 2;
}


/* ==========================================================
   DECORATIVE NAMI ORBS
   ========================================================== */

.join-code-sheet-v3 .join-code-orb {
  position: absolute;
  z-index: 0;

  display: block;

  border-radius: 999px;

  pointer-events: none;

  filter:
    blur(.1px);

  opacity: .72;
}


.join-code-sheet-v3 .join-code-orb::after {
  content: "";

  position: absolute;
  inset: 10%;

  border-radius: inherit;

  background:
    radial-gradient(
      circle at 28% 22%,
      rgba(255,255,255,.90),
      rgba(255,255,255,.18) 24%,
      transparent 56%
    );
}


.join-code-orb-1 {
  width: 150px;
  height: 150px;

  left: -92px;
  top: 48px;

  background:
    radial-gradient(
      circle at 68% 30%,
      rgba(255,205,167,.88) 0%,
      rgba(255,144,164,.70) 30%,
      rgba(170,102,235,.42) 61%,
      rgba(96,120,244,.18) 78%,
      transparent 80%
    );

  box-shadow:
    0 18px 60px
      rgba(216,111,191,.22);
}


.join-code-orb-2 {
  width: 98px;
  height: 98px;

  right: -42px;
  top: 126px;

  background:
    radial-gradient(
      circle at 35% 28%,
      rgba(255,255,255,.92),
      rgba(255,176,184,.58) 27%,
      rgba(126,104,244,.58) 59%,
      rgba(68,132,246,.22) 78%,
      transparent 80%
    );

  box-shadow:
    0 20px 55px
      rgba(113,105,244,.20);
}


.join-code-orb-3 {
  width: 45px;
  height: 45px;

  left: 20px;
  top: 244px;

  background:
    radial-gradient(
      circle at 35% 25%,
      #ffffff,
      rgba(240,166,219,.70) 32%,
      rgba(111,102,239,.68) 68%,
      transparent 72%
    );
}


.join-code-orb-4 {
  width: 30px;
  height: 30px;

  right: 22px;
  top: 260px;

  background:
    radial-gradient(
      circle at 35% 25%,
      #ffffff,
      rgba(255,150,168,.75) 30%,
      rgba(111,100,243,.62) 67%,
      transparent 72%
    );
}


/* ==========================================================
   LOGO
   ========================================================== */

.join-code-sheet-v3 .join-code-badge {
  width: 82px !important;
  height: 82px !important;

  margin:
    4px auto 18px !important;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius:
    25px !important;

  box-sizing: border-box;

  backdrop-filter:
    blur(22px)
    saturate(145%);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(145%);
}


.join-code-sheet-v3
.join-code-badge img {
  width: 51px;
  height: 51px;

  object-fit: contain;

  display: block;
}


/* ==========================================================
   TITLE
   ========================================================== */

.join-code-sheet-v3
.join-code-title {
  margin:
    0 0 15px;

  font-size:
    clamp(30px, 8.2vw, 37px);

  line-height: 1.03;

  letter-spacing:
    -.045em;

  font-weight: 800;
}


.join-code-sheet-v3
.join-code-eyebrow {
  display: block;

  margin:
    0 0 12px;

  font-size: 13px;
  line-height: 1;

  font-weight: 800;

  letter-spacing:
    .20em;

  text-transform:
    uppercase;
}


.join-code-sheet-v3
.join-code-description {
  max-width: 310px;

  margin:
    0 auto 27px !important;

  font-size:
    16px !important;

  line-height:
    1.42 !important;

  font-weight:
    500;
}


/* ==========================================================
   CODE INPUT CARDS
   ========================================================== */

.join-code-sheet-v3
.join-code-boxes {
  display: grid !important;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  gap:
    8px !important;

  width:
    100%;

  margin:
    0 0 18px !important;
}


.join-code-sheet-v3
.join-code-char {
  width:
    100% !important;

  min-width:
    0 !important;

  height:
    62px !important;

  padding:
    0 !important;

  border-radius:
    18px !important;

  box-sizing:
    border-box;

  text-align:
    center;

  font-size:
    23px !important;

  line-height:
    62px;

  font-weight:
    800 !important;

  outline:
    none;

  appearance:
    none;

  -webkit-appearance:
    none;

  backdrop-filter:
    blur(18px)
    saturate(145%);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(145%);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}


.join-code-sheet-v3
.join-code-char:focus {
  transform:
    translateY(-1px)
    scale(1.02);
}


/* ==========================================================
   GRADIENT CTA
   ========================================================== */

.join-code-sheet-v3
.join-code-submit {
  position:
    relative;

  width:
    100% !important;

  height:
    64px !important;

  padding:
    0 70px 0 22px !important;

  border:
    0 !important;

  border-radius:
    20px !important;

  overflow:
    hidden;

  font-size:
    19px !important;

  line-height:
    1 !important;

  font-weight:
    800 !important;

  letter-spacing:
    -.015em;

  color:
    #fff !important;

  background:
    linear-gradient(
      110deg,
      #ff9292 0%,
      #ee75ae 24%,
      #ae68e8 47%,
      #7767ed 67%,
      #5680e9 100%
    ) !important;

  box-shadow:
    0 14px 32px
      rgba(108,98,226,.25),
    0 5px 14px
      rgba(233,111,167,.18),
    inset 0 1px 0
      rgba(255,255,255,.38) !important;

  transition:
    transform .18s ease,
    filter .18s ease,
    opacity .18s ease !important;
}


.join-code-sheet-v3
.join-code-submit::before {
  content: "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      100deg,
      rgba(255,255,255,.22),
      transparent 32%,
      transparent 67%,
      rgba(255,255,255,.10)
    );

  pointer-events:
    none;
}


.join-code-sheet-v3
.join-code-submit::after {
  content:
    "→";

  position:
    absolute;

  right:
    10px;

  top:
    50%;

  transform:
    translateY(-50%);

  width:
    44px;

  height:
    44px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    15px;

  font-size:
    28px;

  line-height:
    1;

  font-weight:
    400;

  color:
    #fff;

  background:
    rgba(255,255,255,.16);

  border:
    1px solid
    rgba(255,255,255,.13);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.18);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}


.join-code-sheet-v3
.join-code-submit:active {
  transform:
    scale(.985);
}


.join-code-sheet-v3
.join-code-submit:disabled {
  opacity:
    .68 !important;

  filter:
    saturate(.75);
}


/* ==========================================================
   BOTTOM TEXT
   ========================================================== */

.join-code-sheet-v3
.join-code-hint {
  display:
    block;

  margin:
    19px 0 1px !important;

  font-size:
    13px !important;

  line-height:
    1.35;

  font-weight:
    500;

  letter-spacing:
    .005em;
}


/* ==========================================================
   LIGHT THEME
   ========================================================== */

html:not([data-svoi-theme="dark"])
.join-code-sheet-v3
.join-code-title {
  color:
    #11131b !important;
}


html:not([data-svoi-theme="dark"])
.join-code-sheet-v3
.join-code-eyebrow {
  color:
    #8375e4 !important;
}


html:not([data-svoi-theme="dark"])
.join-code-sheet-v3
.join-code-description {
  color:
    #8c8f9f !important;
}


html:not([data-svoi-theme="dark"])
.join-code-sheet-v3
.join-code-badge {
  background:
    linear-gradient(
      145deg,
      rgba(255,230,235,.72),
      rgba(239,232,255,.78) 48%,
      rgba(224,237,255,.72)
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.80) !important;

  box-shadow:
    0 16px 34px
      rgba(104,100,203,.12),
    inset 0 1px 0
      rgba(255,255,255,.95) !important;
}


html:not([data-svoi-theme="dark"])
.join-code-sheet-v3
.join-code-char {
  color:
    #141620 !important;

  background:
    rgba(255,255,255,.68) !important;

  border:
    1px solid
      rgba(126,124,180,.10) !important;

  box-shadow:
    0 10px 25px
      rgba(75,69,137,.055),
    inset 0 1px 0
      rgba(255,255,255,.96) !important;
}


html:not([data-svoi-theme="dark"])
.join-code-sheet-v3
.join-code-char:focus {
  background:
    rgba(255,255,255,.87) !important;

  border-color:
    rgba(119,98,238,.62) !important;

  box-shadow:
    0 0 0 4px
      rgba(121,102,237,.09),
    0 11px 28px
      rgba(95,80,207,.10),
    inset 0 1px 0
      rgba(255,255,255,1) !important;
}


html:not([data-svoi-theme="dark"])
.join-code-sheet-v3
.join-code-hint {
  color:
    #a1a2af !important;
}


/* ==========================================================
   DARK THEME
   ========================================================== */

html[data-svoi-theme="dark"]
.join-code-sheet-v3
.join-code-title {
  color:
    #ffffff !important;
}


html[data-svoi-theme="dark"]
.join-code-sheet-v3
.join-code-eyebrow {
  color:
    #9b87ff !important;
}


html[data-svoi-theme="dark"]
.join-code-sheet-v3
.join-code-description {
  color:
    #9da4bc !important;
}


html[data-svoi-theme="dark"]
.join-code-sheet-v3
.join-code-badge {
  background:
    linear-gradient(
      145deg,
      rgba(82,56,105,.44),
      rgba(47,45,97,.58) 48%,
      rgba(32,48,88,.62)
    ) !important;

  border:
    1px solid
      rgba(143,131,235,.20) !important;

  box-shadow:
    0 16px 38px
      rgba(4,7,24,.34),
    0 0 26px
      rgba(113,92,241,.09),
    inset 0 1px 0
      rgba(255,255,255,.09) !important;
}


html[data-svoi-theme="dark"]
.join-code-sheet-v3
.join-code-char {
  color:
    #fff !important;

  background:
    linear-gradient(
      145deg,
      rgba(27,35,61,.92),
      rgba(23,30,53,.92)
    ) !important;

  border:
    1px solid
      rgba(122,130,214,.20) !important;

  box-shadow:
    0 10px 27px
      rgba(0,3,18,.22),
    inset 0 1px 0
      rgba(255,255,255,.04) !important;
}


html[data-svoi-theme="dark"]
.join-code-sheet-v3
.join-code-char:focus {
  border-color:
    rgba(157,129,255,.72) !important;

  background:
    linear-gradient(
      145deg,
      rgba(31,39,68,.98),
      rgba(25,32,58,.98)
    ) !important;

  box-shadow:
    0 0 0 4px
      rgba(139,108,255,.11),
    0 0 25px
      rgba(106,99,255,.11),
    inset 0 1px 0
      rgba(255,255,255,.05) !important;
}


html[data-svoi-theme="dark"]
.join-code-sheet-v3
.join-code-hint {
  color:
    #737b94 !important;
}


/* slightly richer bubbles in dark mode */

html[data-svoi-theme="dark"]
.join-code-sheet-v3
.join-code-orb {
  opacity:
    .90;
}


/* ==========================================================
   SMALL IPHONES
   ========================================================== */

@media (max-width: 380px) {

  .join-code-sheet-v3
  .join-code-title {
    font-size:
      30px;
  }

  .join-code-sheet-v3
  .join-code-description {
    max-width:
      282px;

    font-size:
      15px !important;
  }

  .join-code-sheet-v3
  .join-code-boxes {
    gap:
      6px !important;
  }

  .join-code-sheet-v3
  .join-code-char {
    height:
      57px !important;

    border-radius:
      16px !important;

    font-size:
      21px !important;
  }

  .join-code-sheet-v3
  .join-code-submit {
    height:
      60px !important;

    font-size:
      18px !important;
  }

  .join-code-sheet-v3
  .join-code-badge {
    width:
      76px !important;

    height:
      76px !important;
  }

}


/* ===== NAMI JOIN CODE V3 END ===== */


/* =========================================================
   NAMI — HOME SPACE CARDS V3
   unified pair + companies
   ========================================================= */


/* =========================================================
   GRID
   ========================================================= */

.profile-home
.profile-space-list {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 12px !important;

  align-items: stretch !important;
}


/* =========================================================
   ALL SPACE CARDS
   ========================================================= */

.profile-home
.profile-space-list
.space-profile-card {
  position: relative !important;

  grid-column: auto !important;

  width: 100% !important;
  min-width: 0 !important;

  min-height: 218px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  padding: 13px !important;

  overflow: hidden !important;

  border-radius: 27px !important;

  text-align: left !important;

  -webkit-tap-highlight-color: transparent !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease !important;
}

.profile-home
.profile-space-list
.space-profile-card:active {
  transform: scale(.975) !important;
}


/* =========================================================
   VISUAL TOP
   ========================================================= */

.profile-home
.space-profile-visual {
  position: relative !important;

  width: 100% !important;
  height: 108px !important;

  flex: 0 0 108px !important;

  display: grid !important;
  place-items: center !important;

  margin: 0 0 13px !important;

  border-radius: 21px !important;

  overflow: hidden !important;
}


/* subtle background circles */

.profile-home
.space-profile-visual::before {
  content: "" !important;

  position: absolute !important;

  width: 100px !important;
  height: 100px !important;

  left: -28px !important;
  top: -32px !important;

  border-radius: 50% !important;

  pointer-events: none !important;
}

.profile-home
.space-profile-visual::after {
  content: "" !important;

  position: absolute !important;

  width: 82px !important;
  height: 82px !important;

  right: -22px !important;
  bottom: -28px !important;

  border-radius: 50% !important;

  pointer-events: none !important;
}


/* =========================================================
   MAIN ICON / PHOTO
   ========================================================= */

.profile-home
.space-profile-main-icon {
  position: relative !important;
  z-index: 2 !important;

  width: 66px !important;
  height: 66px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 21px !important;

  overflow: hidden !important;
}

.profile-home
.space-profile-main-icon img {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
}

.profile-home
.space-profile-main-icon svg {
  width: 27px !important;
  height: 27px !important;
}


/* plus for new company */

.profile-home
.space-profile-card.new-friends
.space-profile-main-icon {
  color: #7c73db !important;
}


/* =========================================================
   TEXT
   ========================================================= */

.profile-home
.space-profile-info {
  display: flex !important;
  flex-direction: column !important;

  min-width: 0 !important;

  padding: 0 3px 2px !important;
}

.profile-home
.space-profile-info small {
  margin: 0 0 6px !important;

  color: #887dde !important;

  font-size: 9px !important;
  line-height: 1 !important;

  font-weight: 900 !important;
  letter-spacing: .15em !important;

  text-transform: uppercase !important;
}

.profile-home
.space-profile-info b {
  display: -webkit-box !important;

  margin: 0 !important;

  overflow: hidden !important;

  color: var(--text) !important;

  font-size: 17px !important;
  line-height: 1.08 !important;

  font-weight: 900 !important;
  letter-spacing: -.035em !important;

  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.profile-home
.space-profile-info > span {
  display: -webkit-box !important;

  margin-top: 7px !important;

  overflow: hidden !important;

  color: var(--muted) !important;

  font-size: 10px !important;
  line-height: 1.35 !important;

  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}


/* =========================================================
   CORNER ACTION
   old giant + / chevron becomes subtle
   ========================================================= */

.profile-home
.space-profile-enter {
  position: absolute !important;

  top: 16px !important;
  right: 16px !important;
  z-index: 4 !important;

  width: 30px !important;
  height: 30px !important;

  display: grid !important;
  place-items: center !important;

  margin: 0 !important;

  border-radius: 11px !important;

  opacity: .78 !important;
}

.profile-home
.space-profile-enter svg {
  width: 14px !important;
  height: 14px !important;
}


/* new company:
   hide duplicate corner plus because central plus is enough */

.profile-home
.space-profile-card.new-friends
.space-profile-enter {
  display: none !important;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
.profile-home
.profile-space-list
.space-profile-card {
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(255,154,137,.08),
      transparent 40%
    ),
    radial-gradient(
      circle at 100% 5%,
      rgba(103,139,232,.11),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.61),
      rgba(239,242,255,.46)
    ) !important;

  border:
    1px solid rgba(255,255,255,.82) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 13px 30px rgba(82,75,149,.05) !important;
}


html:not([data-svoi-theme="dark"])
.profile-home
.space-profile-visual {
  background:
    linear-gradient(
      145deg,
      rgba(255,246,250,.66),
      rgba(225,234,255,.67)
    ) !important;

  border:
    1px solid rgba(255,255,255,.76) !important;
}


html:not([data-svoi-theme="dark"])
.profile-home
.space-profile-visual::before {
  background:
    rgba(255,155,145,.10) !important;
}

html:not([data-svoi-theme="dark"])
.profile-home
.space-profile-visual::after {
  background:
    rgba(105,137,230,.10) !important;
}


html:not([data-svoi-theme="dark"])
.profile-home
.space-profile-main-icon {
  background:
    linear-gradient(
      145deg,
      rgba(255,224,228,.68),
      rgba(216,225,253,.75)
    ) !important;

  border:
    1px solid rgba(255,255,255,.83) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 8px 18px rgba(89,81,160,.05) !important;
}


html:not([data-svoi-theme="dark"])
.profile-home
.space-profile-enter {
  color: #756bd8 !important;

  background:
    rgba(255,255,255,.48) !important;

  border:
    1px solid rgba(255,255,255,.68) !important;
}


/* new company not dashed anymore */

html:not([data-svoi-theme="dark"])
.profile-home
.space-profile-card.new-friends {
  border:
    1px solid rgba(129,119,209,.12) !important;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
.profile-home
.profile-space-list
.space-profile-card {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(91,96,198,.10),
      transparent 44%
    ),
    linear-gradient(
      145deg,
      #202842,
      #191f36
    ) !important;

  border:
    1px solid rgba(118,125,210,.17) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.043),
    0 14px 32px rgba(2,6,22,.20) !important;
}


html[data-svoi-theme="dark"]
.profile-home
.space-profile-visual {
  background:
    linear-gradient(
      145deg,
      rgba(47,54,91,.76),
      rgba(30,38,66,.72)
    ) !important;

  border:
    1px solid rgba(119,126,211,.13) !important;
}


html[data-svoi-theme="dark"]
.profile-home
.space-profile-visual::before {
  background:
    rgba(218,91,126,.07) !important;
}

html[data-svoi-theme="dark"]
.profile-home
.space-profile-visual::after {
  background:
    rgba(91,94,200,.11) !important;
}


html[data-svoi-theme="dark"]
.profile-home
.space-profile-main-icon {
  color: #aaa0ff !important;

  background:
    linear-gradient(
      145deg,
      rgba(104,73,147,.28),
      rgba(67,70,145,.28)
    ) !important;

  border:
    1px solid rgba(137,128,220,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}


html[data-svoi-theme="dark"]
.profile-home
.space-profile-info b {
  color: #f8f8ff !important;
}

html[data-svoi-theme="dark"]
.profile-home
.space-profile-info > span {
  color: rgba(216,220,239,.58) !important;
}


html[data-svoi-theme="dark"]
.profile-home
.space-profile-enter {
  color: #aaa0ff !important;

  background:
    rgba(106,96,207,.11) !important;

  border:
    1px solid rgba(133,125,219,.12) !important;
}


html[data-svoi-theme="dark"]
.profile-home
.space-profile-card.new-friends {
  border:
    1px solid rgba(128,124,218,.16) !important;
}


/* =========================================================
   SMALL IPHONE
   ========================================================= */

@media (max-width: 380px) {

  .profile-home
  .profile-space-list {
    gap: 9px !important;
  }

  .profile-home
  .profile-space-list
  .space-profile-card {
    min-height: 204px !important;

    padding: 11px !important;

    border-radius: 24px !important;
  }

  .profile-home
  .space-profile-visual {
    height: 98px !important;
    flex-basis: 98px !important;

    border-radius: 19px !important;
  }

  .profile-home
  .space-profile-info b {
    font-size: 15px !important;
  }

  .profile-home
  .space-profile-info > span {
    font-size: 9.5px !important;
  }

}



/* ==========================================================
   NAMI JOIN CODE V3 — COMPACT
   ========================================================== */

.join-code-sheet-v3 {
  margin-top: -34px !important;
  padding: 0 2px 0 !important;
}


/* LOGO */

.join-code-sheet-v3 .join-code-badge {
  width: 66px !important;
  height: 66px !important;

  margin:
    0 auto 11px !important;

  border-radius:
    21px !important;
}

.join-code-sheet-v3
.join-code-badge img {
  width: 42px !important;
  height: 42px !important;
}


/* TITLE */

.join-code-sheet-v3
.join-code-title {
  margin:
    0 0 10px !important;

  font-size:
    30px !important;

  line-height:
    1.02 !important;
}


/* LABEL */

.join-code-sheet-v3
.join-code-eyebrow {
  margin:
    0 0 9px !important;

  font-size:
    11px !important;

  letter-spacing:
    .18em !important;
}


/* DESCRIPTION */

.join-code-sheet-v3
.join-code-description {
  max-width:
    295px !important;

  margin:
    0 auto 17px !important;

  font-size:
    14px !important;

  line-height:
    1.35 !important;
}


/* CODE BOXES */

.join-code-sheet-v3
.join-code-boxes {
  gap:
    6px !important;

  margin:
    0 0 14px !important;
}

.join-code-sheet-v3
.join-code-char {
  height:
    52px !important;

  border-radius:
    15px !important;

  font-size:
    20px !important;

  line-height:
    52px !important;
}


/* BUTTON */

.join-code-sheet-v3
.join-code-submit {
  height:
    56px !important;

  border-radius:
    18px !important;

  padding:
    0 62px 0 18px !important;

  font-size:
    17px !important;
}

.join-code-sheet-v3
.join-code-submit::after {
  right:
    8px !important;

  width:
    40px !important;

  height:
    40px !important;

  border-radius:
    13px !important;

  font-size:
    25px !important;
}


/* BOTTOM TEXT */

.join-code-sheet-v3
.join-code-hint {
  margin:
    12px 0 0 !important;

  font-size:
    12px !important;
}


/* DECORATIVE BALLS — SMALLER */

.join-code-sheet-v3
.join-code-orb-1 {
  width:
    115px !important;

  height:
    115px !important;

  left:
    -76px !important;

  top:
    30px !important;
}

.join-code-sheet-v3
.join-code-orb-2 {
  width:
    75px !important;

  height:
    75px !important;

  right:
    -37px !important;

  top:
    105px !important;
}

.join-code-sheet-v3
.join-code-orb-3 {
  width:
    34px !important;

  height:
    34px !important;
}

.join-code-sheet-v3
.join-code-orb-4 {
  width:
    24px !important;

  height:
    24px !important;
}


/* SMALL IPHONE */

@media (max-width: 380px) {

  .join-code-sheet-v3 {
    margin-top:
      -30px !important;
  }

  .join-code-sheet-v3
  .join-code-title {
    font-size:
      28px !important;
  }

  .join-code-sheet-v3
  .join-code-char {
    height:
      49px !important;
  }

  .join-code-sheet-v3
  .join-code-submit {
    height:
      54px !important;
  }

}


/* =========================================================
   NAMI — HOME SPACE CARDS V4
   ========================================================= */


/* GRID */

.profile-home .profile-space-list {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;

  gap: 12px !important;

  align-items: start !important;
  grid-auto-rows: auto !important;
}


/* =========================================================
   RESET OLD CARD DIMENSIONS
   ========================================================= */

.profile-home
.profile-space-list
.space-profile-card {
  width: 100% !important;
  height: auto !important;

  min-width: 0 !important;
  max-width: none !important;

  aspect-ratio: auto !important;

  margin: 0 !important;

  box-sizing: border-box !important;

  overflow: hidden !important;
}


/* =========================================================
   COUPLE — WIDE + COMPACT
   ========================================================= */

.profile-home
.space-profile-card.couple {
  grid-column: 1 / -1 !important;

  min-height: 156px !important;

  display: grid !important;
  grid-template-columns:
    112px minmax(0,1fr) 34px !important;

  align-items: center !important;

  gap: 16px !important;

  padding: 17px !important;

  border-radius: 28px !important;
}


/* couple visual */

.profile-home
.space-profile-card.couple
.space-profile-visual {
  width: 112px !important;
  height: 112px !important;

  min-width: 112px !important;
  min-height: 112px !important;

  flex: none !important;

  margin: 0 !important;

  border-radius: 24px !important;
}


/* photo fills visual */

.profile-home
.space-profile-card.couple
.space-profile-photo {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  border-radius: 24px !important;
}


/* couple info */

.profile-home
.space-profile-card.couple
.space-profile-info {
  align-self: center !important;

  padding: 0 !important;
}

.profile-home
.space-profile-card.couple
.space-profile-info small {
  margin-bottom: 7px !important;
}

.profile-home
.space-profile-card.couple
.space-profile-info b {
  font-size: 20px !important;
  line-height: 1.08 !important;

  -webkit-line-clamp: 2 !important;
}

.profile-home
.space-profile-card.couple
.space-profile-info > span {
  margin-top: 6px !important;

  font-size: 11px !important;
}


/* couple chevron */

.profile-home
.space-profile-card.couple
.space-profile-enter {
  position: static !important;

  width: 34px !important;
  height: 34px !important;

  justify-self: end !important;

  opacity: .72 !important;
}


/* =========================================================
   FRIENDS + NEW COMPANY
   ========================================================= */

.profile-home
.space-profile-card.friends,
.profile-home
.space-profile-card.new-friends {
  grid-column: auto !important;

  min-height: 196px !important;
  height: 196px !important;

  display: flex !important;
  flex-direction: column !important;

  padding: 12px !important;

  border-radius: 25px !important;
}


/* compact visual */

.profile-home
.space-profile-card.friends
.space-profile-visual,
.profile-home
.space-profile-card.new-friends
.space-profile-visual {
  width: 100% !important;
  height: 92px !important;

  min-height: 92px !important;
  flex: 0 0 92px !important;

  margin: 0 0 11px !important;

  border-radius: 19px !important;
}


/* icon smaller */

.profile-home
.space-profile-card.friends
.space-profile-main-icon,
.profile-home
.space-profile-card.new-friends
.space-profile-main-icon {
  width: 58px !important;
  height: 58px !important;

  border-radius: 18px !important;
}

.profile-home
.space-profile-card.new-friends
.space-profile-main-icon svg {
  width: 25px !important;
  height: 25px !important;
}


/* company photo */

.profile-home
.space-profile-card.friends
.space-profile-photo {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  border-radius: 19px !important;
}


/* info */

.profile-home
.space-profile-card.friends
.space-profile-info,
.profile-home
.space-profile-card.new-friends
.space-profile-info {
  padding: 0 3px !important;

  min-height: 0 !important;
}

.profile-home
.space-profile-card.friends
.space-profile-info small,
.profile-home
.space-profile-card.new-friends
.space-profile-info small {
  margin-bottom: 5px !important;

  font-size: 8px !important;
}

.profile-home
.space-profile-card.friends
.space-profile-info b,
.profile-home
.space-profile-card.new-friends
.space-profile-info b {
  font-size: 15px !important;
  line-height: 1.08 !important;
}

.profile-home
.space-profile-card.friends
.space-profile-info > span,
.profile-home
.space-profile-card.new-friends
.space-profile-info > span {
  margin-top: 5px !important;

  font-size: 9.5px !important;
  line-height: 1.25 !important;
}


/* existing company chevron */

.profile-home
.space-profile-card.friends
.space-profile-enter {
  top: 14px !important;
  right: 14px !important;

  width: 28px !important;
  height: 28px !important;

  border-radius: 10px !important;
}


/* new company needs no second + */

.profile-home
.space-profile-card.new-friends
.space-profile-enter {
  display: none !important;
}


/* =========================================================
   PHOTO CONTROLS
   ========================================================= */

.profile-home
.space-avatar-edit,
.profile-home
.space-avatar-delete {
  position: absolute !important;
  z-index: 8 !important;

  width: 30px !important;
  height: 30px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 11px !important;

  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;

  box-shadow:
    0 6px 16px rgba(0,0,0,.12) !important;
}


/* camera */

.profile-home
.space-avatar-edit {
  right: 7px !important;
  bottom: 7px !important;

  color: #796fde !important;
}


/* delete */

.profile-home
.space-avatar-delete {
  left: 7px !important;
  bottom: 7px !important;

  color: #fff !important;

  background:
    rgba(203,77,98,.84) !important;

  border:
    1px solid rgba(255,255,255,.46) !important;
}

.profile-home
.space-avatar-edit svg,
.profile-home
.space-avatar-delete svg {
  width: 13px !important;
  height: 13px !important;
}


/* =========================================================
   REMOVE HUGE DECORATION
   ========================================================= */

.profile-home
.space-profile-visual::before {
  width: 74px !important;
  height: 74px !important;

  left: -28px !important;
  top: -28px !important;
}

.profile-home
.space-profile-visual::after {
  width: 62px !important;
  height: 62px !important;

  right: -23px !important;
  bottom: -26px !important;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
.profile-home
.space-avatar-edit {
  background:
    rgba(255,255,255,.78) !important;

  border:
    1px solid rgba(255,255,255,.88) !important;
}


html:not([data-svoi-theme="dark"])
.profile-home
.space-profile-card.new-friends {
  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(255,153,137,.07),
      transparent 40%
    ),
    radial-gradient(
      circle at 100% 0%,
      rgba(105,139,232,.11),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.60),
      rgba(239,242,255,.46)
    ) !important;

  border:
    1px solid rgba(255,255,255,.80) !important;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
.profile-home
.space-avatar-edit {
  color: #aaa0ff !important;

  background:
    rgba(23,29,50,.86) !important;

  border:
    1px solid rgba(129,122,216,.18) !important;
}


html[data-svoi-theme="dark"]
.profile-home
.space-profile-card.new-friends {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(92,94,199,.11),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      #202842,
      #191f36
    ) !important;

  border:
    1px solid rgba(118,125,210,.17) !important;
}


/* =========================================================
   SMALL IPHONE
   ========================================================= */

@media (max-width: 380px) {

  .profile-home
  .space-profile-card.couple {
    grid-template-columns:
      98px minmax(0,1fr) 30px !important;

    gap: 12px !important;

    min-height: 140px !important;

    padding: 14px !important;
  }

  .profile-home
  .space-profile-card.couple
  .space-profile-visual {
    width: 98px !important;
    height: 98px !important;

    min-width: 98px !important;
    min-height: 98px !important;
  }

  .profile-home
  .space-profile-card.couple
  .space-profile-info b {
    font-size: 17px !important;
  }

  .profile-home
  .space-profile-card.friends,
  .profile-home
  .space-profile-card.new-friends {
    height: 184px !important;
    min-height: 184px !important;
  }

  .profile-home
  .space-profile-card.friends
  .space-profile-visual,
  .profile-home
  .space-profile-card.new-friends
  .space-profile-visual {
    height: 84px !important;
    min-height: 84px !important;
    flex-basis: 84px !important;
  }

}


/* =========================================================
   NAMI — HOME CARDS V5
   clean final layout
   ========================================================= */


/* =========================================================
   HOME GRID
   ========================================================= */

.profile-home .profile-space-list {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;

  gap: 11px !important;

  align-items: start !important;
}


/* =========================================================
   REMOVE PHOTO EDIT CONTROLS FROM HOME
   фото меняется из настроек пространства
   ========================================================= */

.profile-home .space-avatar-edit,
.profile-home .space-avatar-delete {
  display: none !important;
}


/* =========================================================
   COUPLE
   ========================================================= */

.profile-home
.profile-space-list
.space-profile-card.couple {
  grid-column: 1 / -1 !important;

  width: 100% !important;
  height: auto !important;

  min-height: 126px !important;

  display: grid !important;

  grid-template-columns:
    92px minmax(0,1fr) !important;

  align-items: center !important;

  gap: 14px !important;

  padding: 14px !important;

  border-radius: 26px !important;
}


/* photo / visual */

.profile-home
.space-profile-card.couple
.space-profile-visual {
  width: 92px !important;
  height: 92px !important;

  min-width: 92px !important;
  min-height: 92px !important;

  margin: 0 !important;

  border-radius: 22px !important;
}

.profile-home
.space-profile-card.couple
.space-profile-photo {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  border-radius: 22px !important;
}


/* text */

.profile-home
.space-profile-card.couple
.space-profile-info {
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: flex-start !important;

  padding: 0 !important;

  text-align: left !important;
}

.profile-home
.space-profile-card.couple
.space-profile-info small {
  margin: 0 0 7px !important;

  font-size: 9px !important;
}

.profile-home
.space-profile-card.couple
.space-profile-info b {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;

  overflow: visible !important;

  white-space: normal !important;
  text-overflow: clip !important;

  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;

  font-size: 18px !important;
  line-height: 1.08 !important;
}

.profile-home
.space-profile-card.couple
.space-profile-info > span {
  display: block !important;

  margin-top: 7px !important;

  font-size: 10.5px !important;
}


/* убираем стрелку — вся карточка и так нажимается */

.profile-home
.space-profile-card.couple
.space-profile-enter {
  display: none !important;
}


/* =========================================================
   FRIEND CARDS
   ========================================================= */

.profile-home
.profile-space-list
.space-profile-card.friends,
.profile-home
.profile-space-list
.space-profile-card.new-friends {
  grid-column: auto !important;

  width: 100% !important;

  height: 180px !important;
  min-height: 180px !important;

  display: flex !important;
  flex-direction: column !important;

  padding: 11px !important;

  border-radius: 24px !important;
}


/* visual */

.profile-home
.space-profile-card.friends
.space-profile-visual,
.profile-home
.space-profile-card.new-friends
.space-profile-visual {
  width: 100% !important;

  height: 82px !important;
  min-height: 82px !important;
  flex: 0 0 82px !important;

  margin: 0 0 10px !important;

  border-radius: 18px !important;
}


/* photo */

.profile-home
.space-profile-card.friends
.space-profile-photo {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  border-radius: 18px !important;
}


/* icon */

.profile-home
.space-profile-card.friends
.space-profile-main-icon,
.profile-home
.space-profile-card.new-friends
.space-profile-main-icon {
  width: 52px !important;
  height: 52px !important;

  border-radius: 17px !important;
}

.profile-home
.space-profile-card.new-friends
.space-profile-main-icon svg {
  width: 23px !important;
  height: 23px !important;
}


/* text */

.profile-home
.space-profile-card.friends
.space-profile-info,
.profile-home
.space-profile-card.new-friends
.space-profile-info {
  min-width: 0 !important;

  padding: 0 3px !important;

  text-align: left !important;
}

.profile-home
.space-profile-card.friends
.space-profile-info small,
.profile-home
.space-profile-card.new-friends
.space-profile-info small {
  margin-bottom: 5px !important;

  font-size: 8px !important;
}

.profile-home
.space-profile-card.friends
.space-profile-info b,
.profile-home
.space-profile-card.new-friends
.space-profile-info b {
  display: block !important;

  width: 100% !important;

  overflow: hidden !important;

  white-space: nowrap !important;
  text-overflow: ellipsis !important;

  font-size: 15px !important;
  line-height: 1.1 !important;

  -webkit-line-clamp: unset !important;
}

.profile-home
.space-profile-card.friends
.space-profile-info > span,
.profile-home
.space-profile-card.new-friends
.space-profile-info > span {
  display: block !important;

  margin-top: 5px !important;

  overflow: hidden !important;

  white-space: nowrap !important;
  text-overflow: ellipsis !important;

  font-size: 9.5px !important;
  line-height: 1.2 !important;

  -webkit-line-clamp: unset !important;
}


/* no corner buttons */

.profile-home
.space-profile-card.friends
.space-profile-enter,
.profile-home
.space-profile-card.new-friends
.space-profile-enter {
  display: none !important;
}


/* =========================================================
   DECORATION — SMALLER
   ========================================================= */

.profile-home
.space-profile-visual::before {
  width: 58px !important;
  height: 58px !important;

  left: -20px !important;
  top: -21px !important;
}

.profile-home
.space-profile-visual::after {
  width: 49px !important;
  height: 49px !important;

  right: -18px !important;
  bottom: -19px !important;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
.profile-home
.space-profile-card.couple,
html:not([data-svoi-theme="dark"])
.profile-home
.space-profile-card.friends,
html:not([data-svoi-theme="dark"])
.profile-home
.space-profile-card.new-friends {
  border:
    1px solid rgba(255,255,255,.82) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 10px 26px rgba(83,76,150,.045) !important;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
.profile-home
.space-profile-card.couple,
html[data-svoi-theme="dark"]
.profile-home
.space-profile-card.friends,
html[data-svoi-theme="dark"]
.profile-home
.space-profile-card.new-friends {
  border:
    1px solid rgba(118,125,210,.16) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 12px 28px rgba(2,6,22,.18) !important;
}


/* =========================================================
   SMALL IPHONE
   ========================================================= */

@media (max-width: 380px) {

  .profile-home
  .profile-space-list
  .space-profile-card.couple {
    grid-template-columns:
      82px minmax(0,1fr) !important;

    min-height: 112px !important;

    gap: 12px !important;

    padding: 12px !important;
  }

  .profile-home
  .space-profile-card.couple
  .space-profile-visual {
    width: 82px !important;
    height: 82px !important;

    min-width: 82px !important;
    min-height: 82px !important;
  }

  .profile-home
  .space-profile-card.couple
  .space-profile-info b {
    font-size: 16px !important;
  }

  .profile-home
  .profile-space-list
  .space-profile-card.friends,
  .profile-home
  .profile-space-list
  .space-profile-card.new-friends {
    height: 170px !important;
    min-height: 170px !important;
  }

  .profile-home
  .space-profile-card.friends
  .space-profile-visual,
  .profile-home
  .space-profile-card.new-friends
  .space-profile-visual {
    height: 75px !important;
    min-height: 75px !important;
    flex-basis: 75px !important;
  }

}


/* =========================================================
   NAMI HOME V6 — final compact spacing
   ========================================================= */

.profile-home
.profile-space-list
.space-profile-card.friends,
.profile-home
.profile-space-list
.space-profile-card.new-friends {
  height: 166px !important;
  min-height: 166px !important;
}

.profile-home
.space-profile-card.friends
.space-profile-visual,
.profile-home
.space-profile-card.new-friends
.space-profile-visual {
  height: 72px !important;
  min-height: 72px !important;
  flex-basis: 72px !important;

  margin-bottom: 9px !important;
}

.profile-home
.space-profile-card.friends
.space-profile-main-icon,
.profile-home
.space-profile-card.new-friends
.space-profile-main-icon {
  width: 48px !important;
  height: 48px !important;

  border-radius: 16px !important;
}

.profile-home
.space-profile-card.new-friends
.space-profile-main-icon svg {
  width: 21px !important;
  height: 21px !important;
}

.profile-home
.space-profile-card.friends
.space-profile-info b,
.profile-home
.space-profile-card.new-friends
.space-profile-info b {
  font-size: 14px !important;
}

.profile-home
.space-profile-card.new-friends
.space-profile-info > span {
  white-space: normal !important;
  line-height: 1.2 !important;
}


/* =========================================================
   NAMI — NEW COMPANY CARD FINAL
   ========================================================= */

.profile-home
.space-profile-card.new-friends {
  justify-content: center !important;
  align-items: center !important;

  height: 166px !important;
  min-height: 166px !important;

  padding: 18px 14px !important;

  text-align: center !important;
}


/* убираем старую большую декоративную область */

.profile-home
.space-profile-card.new-friends
.space-profile-visual {
  width: 54px !important;
  height: 54px !important;

  min-height: 54px !important;
  flex: 0 0 54px !important;

  margin: 0 0 13px !important;

  border-radius: 18px !important;
}


/* убираем большие фоновые круги */

.profile-home
.space-profile-card.new-friends
.space-profile-visual::before,
.profile-home
.space-profile-card.new-friends
.space-profile-visual::after {
  display: none !important;
}


/* сам плюс */

.profile-home
.space-profile-card.new-friends
.space-profile-main-icon {
  width: 54px !important;
  height: 54px !important;

  border-radius: 18px !important;
}

.profile-home
.space-profile-card.new-friends
.space-profile-main-icon svg {
  width: 23px !important;
  height: 23px !important;
}


/* текст */

.profile-home
.space-profile-card.new-friends
.space-profile-info {
  width: 100% !important;

  align-items: center !important;

  padding: 0 !important;

  text-align: center !important;
}


/* слово КОМПАНИЯ тут лишнее */

.profile-home
.space-profile-card.new-friends
.space-profile-info small {
  display: none !important;
}


.profile-home
.space-profile-card.new-friends
.space-profile-info b {
  overflow: visible !important;

  white-space: normal !important;
  text-overflow: clip !important;

  font-size: 15px !important;
  line-height: 1.1 !important;

  text-align: center !important;
}


.profile-home
.space-profile-card.new-friends
.space-profile-info > span {
  max-width: 125px !important;

  margin: 6px auto 0 !important;

  overflow: visible !important;

  white-space: normal !important;
  text-overflow: clip !important;

  font-size: 9.5px !important;
  line-height: 1.3 !important;

  text-align: center !important;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
.profile-home
.space-profile-card.new-friends {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.50),
      rgba(235,239,255,.48)
    ) !important;

  border:
    1px solid rgba(137,126,215,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 9px 24px rgba(84,76,151,.04) !important;
}

html:not([data-svoi-theme="dark"])
.profile-home
.space-profile-card.new-friends
.space-profile-main-icon {
  color: #756bdc !important;

  background:
    linear-gradient(
      145deg,
      rgba(230,218,252,.82),
      rgba(215,227,253,.82)
    ) !important;

  border:
    1px solid rgba(255,255,255,.88) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 7px 18px rgba(93,84,168,.07) !important;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
.profile-home
.space-profile-card.new-friends {
  background:
    linear-gradient(
      145deg,
      rgba(31,39,65,.82),
      rgba(24,30,52,.82)
    ) !important;

  border:
    1px solid rgba(125,130,215,.15) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 26px rgba(2,6,22,.17) !important;
}

html[data-svoi-theme="dark"]
.profile-home
.space-profile-card.new-friends
.space-profile-main-icon {
  color: #aaa0ff !important;

  background:
    linear-gradient(
      145deg,
      rgba(103,91,203,.22),
      rgba(68,77,153,.20)
    ) !important;

  border:
    1px solid rgba(141,133,226,.16) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}


/* =========================================================
   NAMI — FRIEND COMPANY ALIGN FINAL
   ========================================================= */

.profile-home
.space-profile-card.friends {
  justify-content: center !important;
  align-items: center !important;

  padding: 18px 14px !important;

  text-align: center !important;
}


/* визуальная зона компании — как у новой компании */

.profile-home
.space-profile-card.friends
.space-profile-visual {
  width: 64px !important;
  height: 64px !important;

  min-width: 64px !important;
  min-height: 64px !important;

  flex: 0 0 64px !important;

  margin: 0 auto 12px !important;

  border-radius: 19px !important;
}


/* убираем смещение декоративных кругов */

.profile-home
.space-profile-card.friends
.space-profile-visual::before,
.profile-home
.space-profile-card.friends
.space-profile-visual::after {
  display: none !important;
}


/* фото компании */

.profile-home
.space-profile-card.friends
.space-profile-photo {
  width: 64px !important;
  height: 64px !important;

  display: block !important;

  margin: 0 auto !important;

  object-fit: cover !important;

  border-radius: 19px !important;
}


/* если фото нет — фирменная иконка */

.profile-home
.space-profile-card.friends
.space-profile-main-icon {
  width: 64px !important;
  height: 64px !important;

  margin: 0 auto !important;

  border-radius: 19px !important;
}


/* текст строго по центру */

.profile-home
.space-profile-card.friends
.space-profile-info {
  width: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  padding: 0 !important;

  text-align: center !important;
}

.profile-home
.space-profile-card.friends
.space-profile-info small {
  margin: 0 0 6px !important;

  text-align: center !important;
}

.profile-home
.space-profile-card.friends
.space-profile-info b {
  width: 100% !important;

  text-align: center !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  font-size: 15px !important;
}

.profile-home
.space-profile-card.friends
.space-profile-info > span {
  width: 100% !important;

  margin: 6px 0 0 !important;

  text-align: center !important;

  font-size: 10px !important;
}


/* никаких стрелок и технических кнопок */

.profile-home
.space-profile-card.friends
.space-profile-enter,
.profile-home
.space-profile-card.friends
.space-avatar-edit,
.profile-home
.space-profile-card.friends
.space-avatar-delete {
  display: none !important;
}


/* NAMI_COMPANY_HOME_PHOTO_FINAL */
.profile-home .space-profile-card.friends .space-profile-visual{
  position:relative!important;
  width:64px!important;
  height:64px!important;
  min-width:64px!important;
  min-height:64px!important;
  overflow:hidden!important;
  border-radius:19px!important;
}

.profile-home .space-profile-card.friends .space-profile-photo{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:inherit!important;
  z-index:3!important;
}


/* ===== SOURCE: calendar-final.css ===== */

/* =========================================================
   NAMI — CALENDAR FINAL V2
   ========================================================= */

.page:has(.calendar-final-head) {
  padding-bottom:
    calc(155px + env(safe-area-inset-bottom)) !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.calendar-final-head {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 48px !important;
  align-items: center !important;

  gap: 14px !important;

  margin: 8px 0 20px !important;
}

.calendar-final-head > div {
  min-width: 0 !important;
}

.calendar-final-head h1 {
  margin: 0 !important;

  color: var(--text) !important;

  font-size: 34px !important;
  line-height: 1 !important;

  font-weight: 900 !important;
  letter-spacing: -.055em !important;
}

.calendar-final-head .icon-btn {
  width: 48px !important;
  height: 48px !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 16px !important;

  display: grid !important;
  place-items: center !important;

  justify-self: end !important;
}


/* =========================================================
   FILTER
   ========================================================= */

.page:has(.calendar-final-head)
.calendar-filter {
  min-height: 58px !important;

  margin-bottom: 14px !important;
  padding: 5px !important;

  border-radius: 20px !important;

  gap: 3px !important;
}

.page:has(.calendar-final-head)
.calendar-filter button {
  min-height: 46px !important;

  border-radius: 16px !important;

  font-size: 13px !important;
  font-weight: 800 !important;
}


/* =========================================================
   MONTH CARD
   ========================================================= */

.page:has(.calendar-final-head)
.calendar-card {
  padding: 17px 14px 18px !important;

  border-radius: 28px !important;
}

.page:has(.calendar-final-head)
.calendar-month-head {
  grid-template-columns: 44px 1fr 44px !important;

  gap: 9px !important;

  margin-bottom: 15px !important;
}

.page:has(.calendar-final-head)
.calendar-month-head b {
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: -.025em !important;
}

.page:has(.calendar-final-head)
.calendar-today {
  margin-top: 5px !important;

  padding: 3px 10px !important;

  border-radius: 999px !important;

  font-size: 11px !important;
  font-weight: 800 !important;
}

.page:has(.calendar-final-head)
.month-btn {
  width: 44px !important;
  height: 44px !important;

  border-radius: 15px !important;
}


/* =========================================================
   WEEK + DAYS
   ========================================================= */

.page:has(.calendar-final-head)
.weekdays {
  margin-bottom: 7px !important;
}

.page:has(.calendar-final-head)
.weekdays span {
  color: var(--muted) !important;

  font-size: 10px !important;
  font-weight: 850 !important;

  text-align: center !important;
}

.page:has(.calendar-final-head)
.calendar-grid {
  gap: 4px 3px !important;
}

.page:has(.calendar-final-head)
.calendar-day {
  aspect-ratio: auto !important;

  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;

  border-radius: 14px !important;

  font-size: 14px !important;
  font-weight: 780 !important;
}

.page:has(.calendar-final-head)
.calendar-day.today:not(.selected)::before {
  inset: 3px !important;

  border-radius: 12px !important;
}

.page:has(.calendar-final-head)
.calendar-day.selected {
  border-radius: 14px !important;

  transform: translateY(-1px) !important;
}


/* =========================================================
   SELECTED DAY
   ========================================================= */

.calendar-day-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 12px !important;

  margin: 22px 4px 11px !important;
}

.calendar-day-summary-copy {
  min-width: 0 !important;
}

.calendar-day-summary-copy small {
  display: block !important;

  margin-bottom: 5px !important;

  color: var(--muted) !important;

  font-size: 12px !important;
  line-height: 1.2 !important;
}

.calendar-day-summary-copy h2 {
  margin: 0 !important;

  color: var(--text) !important;

  font-size: 21px !important;
  line-height: 1.05 !important;

  font-weight: 900 !important;
  letter-spacing: -.035em !important;
}

.calendar-summary-add {
  flex: 0 0 auto !important;

  min-height: 40px !important;

  display: flex !important;
  align-items: center !important;

  gap: 6px !important;

  padding: 0 13px !important;

  border-radius: 14px !important;

  color: #756bda !important;

  font-size: 12px !important;
  font-weight: 850 !important;
}


/* =========================================================
   EMPTY DAY CARD
   ========================================================= */

.calendar-empty-card {
  width: 100% !important;

  display: grid !important;

  grid-template-columns:
    48px minmax(0,1fr) 34px !important;

  align-items: center !important;

  gap: 12px !important;

  padding: 15px !important;

  border-radius: 22px !important;

  text-align: left !important;
}

.calendar-empty-icon {
  width: 48px !important;
  height: 48px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 15px !important;

  color: #776cdf !important;
}

.calendar-empty-copy {
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;
}

.calendar-empty-copy b {
  color: var(--text) !important;

  font-size: 15px !important;
  line-height: 1.15 !important;

  font-weight: 850 !important;
}

.calendar-empty-copy small {
  margin-top: 5px !important;

  color: var(--muted) !important;

  font-size: 11px !important;
  line-height: 1.35 !important;
}

.calendar-empty-plus {
  width: 34px !important;
  height: 34px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 12px !important;

  color: #8176df !important;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
.calendar-final-head .icon-btn,
html:not([data-svoi-theme="dark"])
.page:has(.calendar-final-head)
.month-btn {
  color: #756bd7 !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.74),
      rgba(228,228,252,.59)
    ) !important;

  border:
    1px solid rgba(255,255,255,.86) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 7px 18px rgba(84,76,151,.06) !important;
}


html:not([data-svoi-theme="dark"])
.page:has(.calendar-final-head)
.calendar-filter {
  background:
    linear-gradient(
      135deg,
      rgba(255,244,248,.54),
      rgba(229,238,255,.56)
    ) !important;

  border:
    1px solid rgba(255,255,255,.76) !important;
}

html:not([data-svoi-theme="dark"])
.page:has(.calendar-final-head)
.calendar-filter button.active {
  color: #171722 !important;

  background:
    linear-gradient(
      135deg,
      rgba(222,209,251,.86),
      rgba(207,221,251,.83)
    ) !important;
}


html:not([data-svoi-theme="dark"])
.page:has(.calendar-final-head)
.calendar-card {
  background:
    radial-gradient(
      circle at 3% 5%,
      rgba(255,151,132,.09),
      transparent 35%
    ),
    radial-gradient(
      circle at 100% 6%,
      rgba(104,139,232,.13),
      transparent 44%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.64),
      rgba(238,242,255,.48)
    ) !important;

  border:
    1px solid rgba(255,255,255,.80) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 16px 38px rgba(84,77,151,.055) !important;
}


html:not([data-svoi-theme="dark"])
.page:has(.calendar-final-head)
.calendar-day {
  color: #171721 !important;

  background:
    rgba(255,255,255,.24) !important;
}

html:not([data-svoi-theme="dark"])
.page:has(.calendar-final-head)
.calendar-day.selected {
  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #7d71e5,
      #6582e1
    ) !important;

  box-shadow:
    0 7px 18px rgba(100,91,202,.19) !important;
}


html:not([data-svoi-theme="dark"])
.calendar-summary-add {
  background:
    rgba(255,255,255,.46) !important;

  border:
    1px solid rgba(255,255,255,.68) !important;
}


html:not([data-svoi-theme="dark"])
.calendar-empty-card {
  background:
    linear-gradient(
      135deg,
      rgba(255,151,133,.055),
      rgba(105,139,231,.085)
    ) !important;

  border:
    1px solid rgba(255,255,255,.72) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78) !important;
}

html:not([data-svoi-theme="dark"])
.calendar-empty-icon,
html:not([data-svoi-theme="dark"])
.calendar-empty-plus {
  background:
    linear-gradient(
      145deg,
      rgba(224,212,249,.64),
      rgba(213,225,251,.62)
    ) !important;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
.calendar-final-head .icon-btn,
html[data-svoi-theme="dark"]
.page:has(.calendar-final-head)
.month-btn {
  color: #aaa0ff !important;

  background:
    linear-gradient(
      145deg,
      #202842,
      #191f36
    ) !important;

  border:
    1px solid rgba(120,127,214,.18) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}


html[data-svoi-theme="dark"]
.page:has(.calendar-final-head)
.calendar-filter {
  background:
    linear-gradient(
      145deg,
      #1d253e,
      #171e34
    ) !important;

  border:
    1px solid rgba(119,126,211,.16) !important;
}

html[data-svoi-theme="dark"]
.page:has(.calendar-final-head)
.calendar-filter button.active {
  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #4a477f,
      #3e4f83
    ) !important;
}


html[data-svoi-theme="dark"]
.page:has(.calendar-final-head)
.calendar-card {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(91,96,196,.13),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #202842,
      #181f35
    ) !important;

  border:
    1px solid rgba(118,125,210,.18) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 16px 38px rgba(2,6,22,.24) !important;
}


html[data-svoi-theme="dark"]
.page:has(.calendar-final-head)
.calendar-day {
  color:
    rgba(242,243,252,.90) !important;

  background:
    rgba(255,255,255,.018) !important;
}

html[data-svoi-theme="dark"]
.page:has(.calendar-final-head)
.calendar-day.selected {
  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #766be1,
      #607dda
    ) !important;

  box-shadow:
    0 7px 18px rgba(73,66,171,.24) !important;
}


html[data-svoi-theme="dark"]
.calendar-summary-add {
  color: #aaa0ff !important;

  background:
    #1d253e !important;

  border:
    1px solid rgba(120,126,211,.16) !important;
}


html[data-svoi-theme="dark"]
.calendar-empty-card {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(96,90,192,.10),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      #1d253e,
      #171e33
    ) !important;

  border:
    1px solid rgba(118,125,210,.16) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

html[data-svoi-theme="dark"]
.calendar-empty-icon,
html[data-svoi-theme="dark"]
.calendar-empty-plus {
  color: #a99cff !important;

  background:
    rgba(115,104,220,.13) !important;
}


/* =========================================================
   SMALL IPHONE
   ========================================================= */

@media (max-width: 380px) {

  .calendar-final-head h1 {
    font-size: 31px !important;
  }

  .page:has(.calendar-final-head)
  .calendar-card {
    padding:
      15px 10px 16px !important;
  }

  .page:has(.calendar-final-head)
  .calendar-day {
    height: 39px !important;
    min-height: 39px !important;
  }

  .calendar-empty-card {
    grid-template-columns:
      44px minmax(0,1fr) 32px !important;

    padding: 13px !important;
  }

}


/* =========================================================
   NAMI — CALENDAR BOTTOM NAV FIX
   ========================================================= */

.page:has(.calendar-card) {
  padding-bottom:
    calc(
      245px +
      env(safe-area-inset-bottom)
    ) !important;
}

.page:has(.calendar-card)
.calendar-events-list {
  margin-bottom: 35px !important;
}

.page:has(.calendar-card)
.calendar-empty-card {
  margin-bottom: 12px !important;
}


/* =========================================================
   NAMI — COUPLE AVAILABILITY
   ========================================================= */


/* calendar day indicator */

.calendar-day {
  position: relative;
}

.calendar-day .availability-mark {
  position: absolute;

  top: 5px;
  right: 6px;

  width: 6px;
  height: 6px;

  border-radius: 50%;
}

.calendar-day .availability-mark.free-mine {
  background: #8b80df;

  box-shadow:
    0 0 0 3px
    rgba(139,128,223,.10);
}

.calendar-day .availability-mark.free-both {
  background: #ff8c92;

  box-shadow:
    0 0 0 3px
    rgba(255,140,146,.12);
}


/* subtle matched day */

.calendar-day.free-both:not(.selected) {
  box-shadow:
    inset 0 0 0 1px
    rgba(238,137,156,.20);
}


/* =========================================================
   SELECTED DAY AVAILABILITY CARD
   ========================================================= */

.calendar-availability-card {
  display: grid;

  grid-template-columns:
    44px minmax(0,1fr);

  gap: 11px;

  margin:
    10px 0 12px;

  padding: 12px;

  border-radius: 20px;
}


.calendar-free-mark {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border-radius: 14px;
}

.calendar-free-mark svg {
  width: 29px !important;
  height: 21px !important;
}


.calendar-free-copy {
  min-width: 0;
}

.calendar-free-copy > small {
  display: block;

  margin-bottom: 4px;

  color: #978cec;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .13em;
}

.calendar-free-copy h3 {
  margin: 0;

  color: var(--text);

  font-size: 15px;
  line-height: 1.1;

  font-weight: 900;
}

.calendar-free-copy p {
  margin: 5px 0 0;

  color: var(--muted);

  font-size: 9.5px;
  line-height: 1.35;
}


.calendar-free-chips {
  display: flex;
  flex-wrap: wrap;

  gap: 5px;

  margin-top: 7px;
}

.calendar-free-chip {
  min-height: 24px;

  display: inline-flex;
  align-items: center;

  padding: 0 8px;

  border-radius: 999px;

  color: #a096f1;

  font-size: 9px;
  font-weight: 800;
}


.calendar-free-actions {
  grid-column:
    1 / -1;

  display: flex;

  gap: 7px;
}


.calendar-free-edit,
.calendar-free-plan {
  min-height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 5px;

  padding: 0 12px;

  border-radius: 12px;

  font-size: 10px;
  font-weight: 850;
}


.calendar-free-edit {
  flex: 1;

  color: #9d93ef;
}

.calendar-free-plan {
  flex: 1.25;

  color: #fff;

  background:
    linear-gradient(
      135deg,
      #786edf,
      #6884df
    );

  box-shadow:
    0 6px 16px
    rgba(91,91,196,.16);
}


/* =========================================================
   AVAILABILITY SHEET
   ========================================================= */

.couple-availability-sheet {
  padding:
    1px 0 8px;
}


.availability-sheet-head {
  display: grid;

  grid-template-columns:
    50px minmax(0,1fr);

  align-items: center;

  gap: 12px;

  margin-bottom: 15px;
}


.availability-sheet-mark {
  width: 50px;
  height: 50px;

  display: grid;
  place-items: center;

  border-radius: 16px;
}

.availability-sheet-mark svg {
  width: 32px !important;
  height: 23px !important;
}


.availability-sheet-head > span:last-child {
  display: flex;
  flex-direction: column;
}

.availability-sheet-head b {
  color: var(--text);

  font-size: 16px;
  font-weight: 900;
}

.availability-sheet-head small {
  margin-top: 4px;

  color: var(--muted);

  font-size: 9.5px;
  line-height: 1.3;
}


/* periods */

.availability-periods {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 8px;
}


.availability-period {
  min-height: 68px;

  display: grid;

  grid-template-columns:
    28px minmax(0,1fr);

  align-items: center;

  gap: 8px;

  padding: 10px;

  border-radius: 17px;

  text-align: left;

  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease;
}


.availability-period:active {
  transform:
    scale(.98);
}


.availability-period-check {
  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  color: transparent;
}


.availability-period > span:last-child {
  min-width: 0;

  display: flex;
  flex-direction: column;
}

.availability-period b {
  color: var(--text);

  font-size: 12px;
  line-height: 1.1;

  font-weight: 850;
}

.availability-period small {
  margin-top: 4px;

  color: var(--muted);

  font-size: 8.5px;
  line-height: 1.2;
}


/* selected */

.availability-period.selected
.availability-period-check {
  color: #fff;

  background:
    linear-gradient(
      135deg,
      #7a70df,
      #6885df
    );
}


/* note */

.availability-private-note {
  margin:
    11px 4px 13px;

  color: var(--muted);

  font-size: 9px;
  line-height: 1.35;

  text-align: center;
}


.availability-save {
  min-height: 50px !important;

  border-radius:
    17px !important;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
.calendar-availability-card,
html:not([data-svoi-theme="dark"])
.availability-period {
  background:
    rgba(255,255,255,.54);

  border:
    1px solid
    rgba(255,255,255,.80);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.88);
}


html:not([data-svoi-theme="dark"])
.calendar-free-mark,
html:not([data-svoi-theme="dark"])
.availability-sheet-mark {
  background:
    linear-gradient(
      145deg,
      rgba(247,216,225,.72),
      rgba(216,228,253,.77)
    );

  border:
    1px solid
    rgba(255,255,255,.82);
}


html:not([data-svoi-theme="dark"])
.calendar-free-chip,
html:not([data-svoi-theme="dark"])
.calendar-free-edit {
  background:
    rgba(232,224,252,.65);
}


html:not([data-svoi-theme="dark"])
.availability-period-check {
  background:
    rgba(226,222,246,.68);
}


html:not([data-svoi-theme="dark"])
.availability-period.selected {
  border-color:
    rgba(126,115,217,.30);

  background:
    linear-gradient(
      145deg,
      rgba(244,239,255,.88),
      rgba(229,235,255,.80)
    );
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
.calendar-availability-card,
html[data-svoi-theme="dark"]
.availability-period {
  background:
    linear-gradient(
      145deg,
      #1d253d,
      #181f35
    );

  border:
    1px solid
    rgba(119,126,211,.14);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.03);
}


html[data-svoi-theme="dark"]
.calendar-free-mark,
html[data-svoi-theme="dark"]
.availability-sheet-mark {
  background:
    linear-gradient(
      145deg,
      rgba(111,72,124,.25),
      rgba(67,74,151,.26)
    );

  border:
    1px solid
    rgba(137,129,220,.14);
}


html[data-svoi-theme="dark"]
.calendar-free-chip,
html[data-svoi-theme="dark"]
.calendar-free-edit {
  background:
    rgba(109,99,207,.12);
}


html[data-svoi-theme="dark"]
.availability-period-check {
  background:
    rgba(105,99,176,.15);
}


html[data-svoi-theme="dark"]
.availability-period.selected {
  border-color:
    rgba(134,123,230,.32);

  background:
    linear-gradient(
      145deg,
      #252d4a,
      #202741
    );
}


/* small iPhone */

@media (max-width: 380px) {

  .calendar-availability-card {
    padding: 10px;
  }

  .availability-periods {
    gap: 7px;
  }

  .availability-period {
    min-height: 64px;

    padding: 8px;
  }

}


/* NAMI_CALENDAR_FILTER_4COLS */
.page:has(.calendar-final-head) .calendar-filter{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
.page:has(.calendar-final-head) .calendar-filter button{min-width:0!important;white-space:nowrap!important;padding-left:4px!important;padding-right:4px!important;}


/* ===== SOURCE: games-final.css ===== */

/* =========================================================
   NAMI — GAMES FINAL
   light + dark
   ========================================================= */


/* ---------------------------------------------------------
   PAGE
   --------------------------------------------------------- */

.page:has(.game-grid) {
  padding-bottom:
    calc(
      190px +
      env(safe-area-inset-bottom)
    ) !important;
}


/* ---------------------------------------------------------
   AUDIENCE SWITCH
   --------------------------------------------------------- */

.page:has(.game-grid)
.audience-switch {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;

  gap: 5px !important;

  margin: 0 0 18px !important;
  padding: 5px !important;

  border-radius: 22px !important;

  overflow: hidden !important;
}

.page:has(.game-grid)
.audience-switch button {
  min-height: 52px !important;

  border: 0 !important;
  border-radius: 17px !important;

  font-size: 14px !important;
  font-weight: 850 !important;

  transition:
    transform .18s ease,
    background .18s ease !important;
}

.page:has(.game-grid)
.audience-switch button:active {
  transform: scale(.98) !important;
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.page:has(.game-grid)
.game-grid {
  display: grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap: 11px !important;

  margin-top: 0 !important;
}


/* ---------------------------------------------------------
   CARD BASE
   --------------------------------------------------------- */

.page:has(.game-grid)
.game-card {
  position: relative !important;

  min-width: 0 !important;
  min-height: 168px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  padding: 17px !important;

  overflow: hidden !important;

  border-radius: 26px !important;

  text-align: left !important;

  -webkit-tap-highlight-color:
    transparent !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease !important;
}


/* первая игра — hero */

.page:has(.game-grid)
.game-card.large {
  grid-column: 1 / -1 !important;

  min-height: 186px !important;

  padding: 21px !important;

  border-radius: 29px !important;
}


/* убираем старый декоративный слой */

.page:has(.game-grid)
.game-card::after {
  opacity: 0 !important;
}


/* ---------------------------------------------------------
   ICON
   --------------------------------------------------------- */

.page:has(.game-grid)
.game-icon {
  width: 48px !important;
  height: 48px !important;

  flex: 0 0 48px !important;

  display: grid !important;
  place-items: center !important;

  margin: 0 0 24px !important;

  border-radius: 16px !important;

  font-size: 16px !important;
  line-height: 1 !important;

  font-weight: 900 !important;

  color: #776cdf !important;
}

.page:has(.game-grid)
.game-card.large
.game-icon {
  width: 54px !important;
  height: 54px !important;

  flex-basis: 54px !important;

  margin-bottom: 28px !important;

  border-radius: 18px !important;
}

.page:has(.game-grid)
.game-icon svg {
  width: 22px !important;
  height: 22px !important;
}


/* ---------------------------------------------------------
   TEXT
   --------------------------------------------------------- */

.page:has(.game-grid)
.game-card b,
.page:has(.game-grid)
.game-card strong {
  display: block !important;

  margin: auto 0 0 !important;

  color: var(--text) !important;

  font-size: 17px !important;
  line-height: 1.08 !important;

  font-weight: 900 !important;
  letter-spacing: -.035em !important;
}

.page:has(.game-grid)
.game-card.large b,
.page:has(.game-grid)
.game-card.large strong {
  font-size: 22px !important;
}

.page:has(.game-grid)
.game-card small,
.page:has(.game-grid)
.game-card > span:last-child:not(.game-icon) {
  display: block !important;

  margin-top: 7px !important;

  color: var(--muted) !important;

  font-size: 11px !important;
  line-height: 1.38 !important;

  font-weight: 550 !important;
}


/* =========================================================
   LIGHT THEME
   ========================================================= */

html:not([data-svoi-theme="dark"])
.page:has(.game-grid)
.audience-switch {
  background:
    linear-gradient(
      135deg,
      rgba(255,242,247,.54),
      rgba(230,238,255,.58)
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.78) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.84),
    0 10px 28px
      rgba(83,76,150,.045) !important;
}

html:not([data-svoi-theme="dark"])
.page:has(.game-grid)
.audience-switch button {
  color:
    rgba(75,75,94,.55) !important;

  background:
    transparent !important;
}

html:not([data-svoi-theme="dark"])
.page:has(.game-grid)
.audience-switch button.active {
  color: #161621 !important;

  background:
    linear-gradient(
      135deg,
      rgba(222,210,250,.84),
      rgba(208,221,251,.82)
    ) !important;

  box-shadow:
    0 6px 17px
      rgba(91,82,164,.07),
    inset 0 1px 0
      rgba(255,255,255,.64) !important;
}


/* cards */

html:not([data-svoi-theme="dark"])
.page:has(.game-grid)
.game-card {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(106,138,231,.10),
      transparent 46%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.66),
      rgba(239,242,255,.48)
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.78) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.88),
    0 13px 32px
      rgba(82,74,148,.055) !important;
}


/* hero truth/dare */

html:not([data-svoi-theme="dark"])
.page:has(.game-grid)
.game-card[data-truth] {
  background:
    radial-gradient(
      circle at 4% 0%,
      rgba(255,145,125,.18),
      transparent 40%
    ),
    radial-gradient(
      circle at 98% 4%,
      rgba(109,126,235,.19),
      transparent 48%
    ),
    linear-gradient(
      145deg,
      rgba(255,249,252,.80),
      rgba(235,239,255,.63)
    ) !important;
}


/* icons */

html:not([data-svoi-theme="dark"])
.page:has(.game-grid)
.game-icon {
  background:
    linear-gradient(
      145deg,
      rgba(226,214,251,.74),
      rgba(213,225,251,.72)
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.82) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.86) !important;
}


/* индивидуальные оттенки */

html:not([data-svoi-theme="dark"])
.page:has(.game-grid)
.game-card[data-truth]
.game-icon {
  color: #d86f91 !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,199,210,.66),
      rgba(224,211,250,.70)
    ) !important;
}

html:not([data-svoi-theme="dark"])
.page:has(.game-grid)
.game-card[data-likely]
.game-icon,
html:not([data-svoi-theme="dark"])
.page:has(.game-grid)
.game-card[data-know-me]
.game-icon {
  color: #6682dc !important;
}

html:not([data-svoi-theme="dark"])
.page:has(.game-grid)
.game-card[data-surprise]
.game-icon {
  color: #8b68d7 !important;
}

html:not([data-svoi-theme="dark"])
.page:has(.game-grid)
.game-card[data-red-flag]
.game-icon {
  color: #c86b7d !important;
}


/* =========================================================
   DARK THEME
   ========================================================= */

html[data-svoi-theme="dark"]
.page:has(.game-grid)
.audience-switch {
  background:
    linear-gradient(
      145deg,
      #1b2239,
      #161d32
    ) !important;

  border:
    1px solid
    rgba(117,124,209,.15) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.04),
    0 12px 30px
      rgba(2,6,22,.19) !important;
}

html[data-svoi-theme="dark"]
.page:has(.game-grid)
.audience-switch button {
  color:
    rgba(213,216,237,.52) !important;

  background:
    transparent !important;
}

html[data-svoi-theme="dark"]
.page:has(.game-grid)
.audience-switch button.active {
  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #4c477f,
      #3f4e83
    ) !important;

  box-shadow:
    0 7px 18px
      rgba(3,6,23,.23),
    inset 0 1px 0
      rgba(255,255,255,.065) !important;
}


/* cards */

html[data-svoi-theme="dark"]
.page:has(.game-grid)
.game-card {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(91,100,205,.10),
      transparent 46%
    ),
    linear-gradient(
      145deg,
      #202842,
      #191f36
    ) !important;

  border:
    1px solid
    rgba(118,125,210,.17) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.045),
    0 15px 34px
      rgba(2,6,22,.22) !important;
}


/* первая карточка */

html[data-svoi-theme="dark"]
.page:has(.game-grid)
.game-card[data-truth] {
  background:
    radial-gradient(
      circle at 3% 0%,
      rgba(219,94,129,.10),
      transparent 42%
    ),
    radial-gradient(
      circle at 98% 2%,
      rgba(93,90,202,.17),
      transparent 48%
    ),
    linear-gradient(
      145deg,
      #242943,
      #1a2037
    ) !important;
}


/* icons */

html[data-svoi-theme="dark"]
.page:has(.game-grid)
.game-icon {
  color: #aaa0ff !important;

  background:
    linear-gradient(
      145deg,
      rgba(83,76,163,.30),
      rgba(53,64,131,.24)
    ) !important;

  border:
    1px solid
    rgba(143,135,225,.15) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.045) !important;
}

html[data-svoi-theme="dark"]
.page:has(.game-grid)
.game-card[data-truth]
.game-icon {
  color: #ef9ab0 !important;

  background:
    linear-gradient(
      145deg,
      rgba(129,64,102,.35),
      rgba(70,57,132,.32)
    ) !important;
}

html[data-svoi-theme="dark"]
.page:has(.game-grid)
.game-card[data-likely]
.game-icon,
html[data-svoi-theme="dark"]
.page:has(.game-grid)
.game-card[data-know-me]
.game-icon {
  color: #91a9ff !important;
}

html[data-svoi-theme="dark"]
.page:has(.game-grid)
.game-card[data-red-flag]
.game-icon {
  color: #ef9bad !important;
}


/* text dark */

html[data-svoi-theme="dark"]
.page:has(.game-grid)
.game-card b,
html[data-svoi-theme="dark"]
.page:has(.game-grid)
.game-card strong {
  color: #f8f8ff !important;
}

html[data-svoi-theme="dark"]
.page:has(.game-grid)
.game-card small,
html[data-svoi-theme="dark"]
.page:has(.game-grid)
.game-card > span:last-child:not(.game-icon) {
  color:
    rgba(216,220,241,.63) !important;
}


/* ---------------------------------------------------------
   PRESS
   --------------------------------------------------------- */

.page:has(.game-grid)
.game-card:active {
  transform:
    scale(.978) !important;
}


/* ---------------------------------------------------------
   SMALL IPHONES
   --------------------------------------------------------- */

@media (max-width: 380px) {

  .page:has(.game-grid)
  .game-grid {
    gap: 9px !important;
  }

  .page:has(.game-grid)
  .game-card {
    min-height: 158px !important;
    padding: 14px !important;
  }

  .page:has(.game-grid)
  .game-card.large {
    min-height: 175px !important;
  }

  .page:has(.game-grid)
  .game-card b,
  .page:has(.game-grid)
  .game-card strong {
    font-size: 15px !important;
  }

  .page:has(.game-grid)
  .game-card.large b {
    font-size: 20px !important;
  }

}


/* NAMI — games without audience switch */

.page:has(.game-grid)
.game-grid {
  margin-top: 22px !important;
}


/* =========================================================
   NAMI — GAMES BOTTOM SPACE FINAL
   ========================================================= */

/* ровно нужное место под нижнюю навигацию */
.page:has(.game-grid) {
  min-height: 100dvh !important;

  padding-bottom:
    calc(
      125px +
      env(safe-area-inset-bottom)
    ) !important;
}


/* убираем старые лишние отступы */
.page:has(.game-grid)
.game-grid {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


/* последняя карточка не создаёт лишний воздух */
.page:has(.game-grid)
.game-card:last-child {
  margin-bottom: 0 !important;
}


/* комфортная прокрутка до самого конца */
html {
  scroll-padding-bottom:
    calc(
      115px +
      env(safe-area-inset-bottom)
    );
}



/* ===== SOURCE: spaces-final.css ===== */

/* =========================================================
   NAMI — SPACE INVITE FINAL
   ========================================================= */

.nami-invite-final {
  padding: 6px 0 8px;

  text-align: center;
}

.nami-invite-mark {
  width: 66px;
  height: 66px;

  display: grid;
  place-items: center;

  margin: 0 auto 17px;

  border-radius: 21px;
}

.nami-invite-mark img {
  width: 42px;
  height: 42px;

  object-fit: contain;
}


/* text */

.nami-invite-copy > span {
  display: block;

  margin-bottom: 10px;

  color: #8579df;

  font-size: 10px;
  line-height: 1;

  font-weight: 900;
  letter-spacing: .17em;
}

.nami-invite-copy h2 {
  margin: 0;

  color: var(--text);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  font-size: 36px;
  line-height: 1;

  font-weight: 900;
  letter-spacing: .13em;
}

.nami-invite-copy p {
  max-width: 300px;

  margin: 13px auto 20px;

  color: var(--muted);

  font-size: 13px;
  line-height: 1.45;
}


/* copy code */

.nami-invite-copy-code {
  width: 100%;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  border-radius: 17px;

  color: #786dde;

  font-size: 14px;
  font-weight: 850;
}


/* divider */

.nami-invite-divider {
  display: flex;
  align-items: center;

  gap: 12px;

  margin: 17px 0;
}

.nami-invite-divider::before,
.nami-invite-divider::after {
  content: "";

  height: 1px;

  flex: 1;
}

.nami-invite-divider span {
  color: var(--muted);

  font-size: 10px;
}


/* bottom actions */

.nami-invite-share,
.nami-invite-copy-link {
  min-height: 52px !important;

  border-radius: 17px !important;
}

.nami-invite-copy-link {
  margin-top: 9px !important;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
.nami-invite-mark {
  background:
    linear-gradient(
      145deg,
      rgba(255,222,226,.63),
      rgba(217,225,253,.76)
    );

  border:
    1px solid rgba(255,255,255,.86);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 8px 22px rgba(84,76,151,.05);
}


html:not([data-svoi-theme="dark"])
.nami-invite-copy-code {
  background:
    linear-gradient(
      135deg,
      rgba(230,218,252,.70),
      rgba(214,226,253,.72)
    );

  border:
    1px solid rgba(255,255,255,.82);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88);
}

html:not([data-svoi-theme="dark"])
.nami-invite-divider::before,
html:not([data-svoi-theme="dark"])
.nami-invite-divider::after {
  background:
    rgba(99,93,150,.10);
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
.nami-invite-mark {
  background:
    linear-gradient(
      145deg,
      rgba(112,67,121,.27),
      rgba(67,67,143,.29)
    );

  border:
    1px solid rgba(137,128,220,.15);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04);
}


html[data-svoi-theme="dark"]
.nami-invite-copy-code {
  color: #afa4ff;

  background:
    linear-gradient(
      145deg,
      #202842,
      #191f36
    );

  border:
    1px solid rgba(119,126,211,.17);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04);
}

html[data-svoi-theme="dark"]
.nami-invite-copy h2 {
  color: #fff;
}

html[data-svoi-theme="dark"]
.nami-invite-divider::before,
html[data-svoi-theme="dark"]
.nami-invite-divider::after {
  background:
    rgba(150,151,195,.13);
}


/* small phones */

@media (max-width: 380px) {

  .nami-invite-copy h2 {
    font-size: 31px;
  }

}



/* ===== SOURCE: couple-final.css ===== */

/* =========================================================
   NAMI — COUPLE FINAL
   ========================================================= */

.page:has(.couple-room-head) {
  padding-bottom:
    calc(175px + env(safe-area-inset-bottom)) !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.couple-room-head {
  display: grid !important;

  grid-template-columns:
    minmax(0,1fr) 48px !important;

  align-items: start !important;

  gap: 14px !important;

  margin:
    22px 0 18px !important;
}

.couple-room-title {
  min-width: 0 !important;
}

.couple-room-head small {
  display: block !important;

  margin-bottom: 7px !important;

  color: #8579df !important;

  font-size: 10px !important;
  line-height: 1 !important;

  font-weight: 900 !important;
  letter-spacing: .17em !important;
}

.couple-room-head h1 {
  margin: 0 !important;

  color: var(--text) !important;

  font-size: 30px !important;
  line-height: 1.04 !important;

  font-weight: 900 !important;
  letter-spacing: -.045em !important;
}


/* settings */

.couple-settings-button {
  width: 48px !important;
  height: 48px !important;

  margin: 0 !important;

  border-radius: 16px !important;
}


/* =========================================================
   MEMBERS UNDER TITLE
   ========================================================= */

.couple-head-meta {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;

  gap: 8px !important;

  margin-top: 12px !important;
}

.couple-head-members,
.couple-head-invite {
  min-height: 34px !important;

  display: flex !important;
  align-items: center !important;

  border-radius: 12px !important;

  font-size: 11px !important;
  font-weight: 800 !important;
}

.couple-head-members {
  gap: 7px !important;

  padding:
    3px 10px 3px 5px !important;
}

.couple-head-invite {
  gap: 5px !important;

  padding: 0 10px !important;

  color: #796fdb !important;
}


/* avatars */

.couple-head-avatars {
  display: flex !important;

  padding-left: 2px !important;
}

.couple-head-avatar {
  width: 26px !important;
  height: 26px !important;

  display: grid !important;
  place-items: center !important;

  overflow: hidden !important;

  margin-left: -5px !important;

  border-radius: 50% !important;

  font-size: 9px !important;
  font-weight: 800 !important;
}

.couple-head-avatar:first-child {
  margin-left: 0 !important;
}

.couple-head-avatar img {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
}


/* =========================================================
   HERO
   ========================================================= */

.page:has(.couple-room-head)
.couple-hero {
  padding: 22px !important;

  border-radius: 29px !important;

  overflow: hidden !important;
}

.page:has(.couple-room-head)
.couple-hero .eyebrow {
  display: flex !important;
  align-items: center !important;

  gap: 8px !important;

  margin-bottom: 17px !important;

  color: #8175de !important;

  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
}

.page:has(.couple-room-head)
.couple-hero .eyebrow svg {
  width: 23px !important;
  height: 16px !important;
}

.page:has(.couple-room-head)
.couple-hero h2 {
  max-width: 310px !important;

  margin: 0 !important;

  color: var(--text) !important;

  font-size: 31px !important;
  line-height: 1.03 !important;

  font-weight: 900 !important;
  letter-spacing: -.045em !important;
}

.page:has(.couple-room-head)
.couple-hero p {
  max-width: 325px !important;

  margin:
    12px 0 20px !important;

  color: var(--muted) !important;

  font-size: 13px !important;
  line-height: 1.45 !important;
}


/* actions */

.couple-hero-actions {
  display: grid !important;

  grid-template-columns:
    minmax(0,1fr) 54px !important;

  gap: 9px !important;
}

.couple-date-button {
  width: 100% !important;
  min-height: 54px !important;

  margin: 0 !important;

  border-radius: 17px !important;

  font-size: 14px !important;
}

.couple-surprise-button {
  width: 54px !important;
  height: 54px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  border-radius: 17px !important;

  color: #7d72dc !important;
}


/* =========================================================
   CORE FEATURES — ONLY 4
   ========================================================= */

.page:has(.couple-room-head)
.couple-core-grid {
  display: grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap: 10px !important;

  margin-top: 11px !important;
}

.page:has(.couple-room-head)
.couple-feature-card {
  min-height: 137px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  padding: 15px !important;

  border-radius: 24px !important;

  text-align: left !important;
}

.page:has(.couple-room-head)
.couple-feature-icon {
  width: 42px !important;
  height: 42px !important;

  display: grid !important;
  place-items: center !important;

  margin:
    0 0 18px !important;

  border-radius: 14px !important;

  color: #8075dc !important;
}

.page:has(.couple-room-head)
.couple-feature-icon svg {
  width: 19px !important;
  height: 19px !important;
}

.page:has(.couple-room-head)
.couple-feature-card b {
  margin: auto 0 0 !important;

  color: var(--text) !important;

  font-size: 16px !important;
  line-height: 1.08 !important;

  font-weight: 900 !important;
  letter-spacing: -.025em !important;
}

.page:has(.couple-room-head)
.couple-feature-card small {
  display: block !important;

  margin-top: 6px !important;

  color: var(--muted) !important;

  font-size: 10px !important;
  line-height: 1.35 !important;
}


/* =========================================================
   UPCOMING
   ========================================================= */

.page:has(.couple-room-head)
.couple-next-head {
  margin:
    25px 3px 11px !important;
}

.page:has(.couple-room-head)
.couple-next-head h2 {
  margin: 0 !important;

  font-size: 21px !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
}

.page:has(.couple-room-head)
.couple-next-head .text-btn {
  display: flex !important;
  align-items: center !important;

  gap: 5px !important;

  min-height: 36px !important;

  padding: 0 11px !important;

  border-radius: 12px !important;

  font-size: 11px !important;
  font-weight: 850 !important;
}

.page:has(.couple-room-head)
.couple-upcoming-list {
  margin-bottom: 0 !important;
}

.page:has(.couple-room-head)
.event-mini,
.page:has(.couple-room-head)
.couple-empty-plan {
  border-radius: 21px !important;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
.couple-settings-button,
html:not([data-svoi-theme="dark"])
.couple-head-members,
html:not([data-svoi-theme="dark"])
.couple-head-invite,
html:not([data-svoi-theme="dark"])
.couple-surprise-button {
  background:
    rgba(255,255,255,.48) !important;

  border:
    1px solid rgba(255,255,255,.76) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 7px 18px rgba(83,76,150,.04) !important;
}


html:not([data-svoi-theme="dark"])
.page:has(.couple-room-head)
.couple-hero {
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(255,147,132,.11),
      transparent 38%
    ),
    radial-gradient(
      circle at 100% 0%,
      rgba(102,137,232,.14),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.68),
      rgba(239,242,255,.52)
    ) !important;

  border:
    1px solid rgba(255,255,255,.82) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 15px 35px rgba(84,76,151,.05) !important;
}


html:not([data-svoi-theme="dark"])
.page:has(.couple-room-head)
.couple-feature-card {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.64),
      rgba(241,243,255,.47)
    ) !important;

  border:
    1px solid rgba(255,255,255,.80) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.87),
    0 10px 26px rgba(84,76,151,.04) !important;
}


html:not([data-svoi-theme="dark"])
.page:has(.couple-room-head)
.couple-feature-icon {
  background:
    linear-gradient(
      145deg,
      rgba(229,218,252,.76),
      rgba(215,226,253,.74)
    ) !important;

  border:
    1px solid rgba(255,255,255,.84) !important;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
.couple-settings-button,
html[data-svoi-theme="dark"]
.couple-head-members,
html[data-svoi-theme="dark"]
.couple-head-invite,
html[data-svoi-theme="dark"]
.couple-surprise-button {
  color: #aaa0ff !important;

  background:
    rgba(28,35,59,.76) !important;

  border:
    1px solid rgba(119,126,211,.15) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}


html[data-svoi-theme="dark"]
.page:has(.couple-room-head)
.couple-hero {
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(216,89,124,.08),
      transparent 40%
    ),
    radial-gradient(
      circle at 100% 0%,
      rgba(86,92,194,.13),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      #202842,
      #191f36
    ) !important;

  border:
    1px solid rgba(118,125,210,.17) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 15px 34px rgba(2,6,22,.21) !important;
}


html[data-svoi-theme="dark"]
.page:has(.couple-room-head)
.couple-feature-card {
  background:
    linear-gradient(
      145deg,
      #202842,
      #191f36
    ) !important;

  border:
    1px solid rgba(118,125,210,.16) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 10px 26px rgba(2,6,22,.17) !important;
}


html[data-svoi-theme="dark"]
.page:has(.couple-room-head)
.couple-feature-icon {
  color: #a99fff !important;

  background:
    rgba(109,99,212,.13) !important;

  border:
    1px solid rgba(135,127,221,.13) !important;
}


html[data-svoi-theme="dark"]
.couple-head-avatar {
  background: #202842 !important;

  border:
    2px solid #171d31 !important;
}


/* =========================================================
   SMALL IPHONE
   ========================================================= */

@media (max-width: 380px) {

  .couple-room-head h1 {
    font-size: 27px !important;
  }

  .page:has(.couple-room-head)
  .couple-hero {
    padding: 19px !important;
  }

  .page:has(.couple-room-head)
  .couple-hero h2 {
    font-size: 28px !important;
  }

  .page:has(.couple-room-head)
  .couple-feature-card {
    min-height: 130px !important;

    padding: 13px !important;
  }

}


/* =========================================================
   NAMI — COUPLE LAYOUT V2
   geometry / spacing / alignment
   ========================================================= */


/* =========================================================
   PAGE
   ========================================================= */

.page:has(.couple-room-head) {
  padding-bottom:
    calc(220px + env(safe-area-inset-bottom)) !important;
}


/* =========================================================
   TOP
   ========================================================= */

.couple-room-head {
  align-items: center !important;

  margin:
    18px 0 17px !important;
}

.couple-room-head h1 {
  font-size: 29px !important;
  line-height: 1.02 !important;
}

.couple-room-head small {
  margin-bottom: 6px !important;
}


/* =========================================================
   MEMBER CHIP
   ========================================================= */

.couple-head-meta {
  margin-top: 10px !important;
}

.couple-head-members {
  height: 38px !important;
  min-height: 38px !important;

  padding:
    4px 11px 4px 5px !important;

  gap: 8px !important;

  border-radius: 14px !important;
}

.couple-head-avatars {
  height: 28px !important;

  display: flex !important;
  align-items: center !important;
}

.couple-head-avatar {
  width: 28px !important;
  height: 28px !important;

  min-width: 28px !important;

  overflow: hidden !important;

  border-radius: 50% !important;

  display: grid !important;
  place-items: center !important;

  font-size: 10px !important;
  font-weight: 850 !important;
}


/* nested avatars / initials */

.couple-head-avatar > * {
  width: 100% !important;
  height: 100% !important;

  display: grid !important;
  place-items: center !important;

  margin: 0 !important;

  border-radius: 50% !important;

  overflow: hidden !important;
}

.couple-head-avatar img {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  border-radius: 50% !important;
}


/* =========================================================
   HERO — COMPACT
   ========================================================= */

.page:has(.couple-room-head)
.couple-hero {
  padding:
    20px !important;

  border-radius:
    28px !important;
}

.page:has(.couple-room-head)
.couple-hero .eyebrow {
  margin-bottom:
    14px !important;
}

.page:has(.couple-room-head)
.couple-hero h2 {
  max-width:
    290px !important;

  font-size:
    29px !important;

  line-height:
    1.02 !important;
}

.page:has(.couple-room-head)
.couple-hero p {
  max-width:
    310px !important;

  margin:
    10px 0 17px !important;

  font-size:
    12px !important;

  line-height:
    1.42 !important;
}


/* hero buttons */

.couple-hero-actions {
  grid-template-columns:
    minmax(0,1fr) 52px !important;

  gap:
    9px !important;
}

.couple-date-button,
.couple-surprise-button {
  height:
    52px !important;

  min-height:
    52px !important;

  border-radius:
    16px !important;
}

.couple-surprise-button {
  width:
    52px !important;
}


/* =========================================================
   4 FEATURE CARDS
   ========================================================= */

.page:has(.couple-room-head)
.couple-core-grid {
  gap:
    10px !important;

  margin-top:
    10px !important;

  align-items:
    stretch !important;
}


/* all 4 exactly same height */

.page:has(.couple-room-head)
.couple-feature-card {
  height:
    128px !important;

  min-height:
    128px !important;

  padding:
    13px !important;

  border-radius:
    22px !important;

  display:
    grid !important;

  grid-template-rows:
    38px 1fr auto !important;

  align-items:
    start !important;
}


/* icon */

.page:has(.couple-room-head)
.couple-feature-icon {
  width:
    38px !important;

  height:
    38px !important;

  margin:
    0 !important;

  border-radius:
    13px !important;
}

.page:has(.couple-room-head)
.couple-feature-icon svg {
  width:
    18px !important;

  height:
    18px !important;
}


/* title */

.page:has(.couple-room-head)
.couple-feature-card b {
  align-self:
    end !important;

  margin:
    0 !important;

  padding-top:
    10px !important;

  font-size:
    15px !important;

  line-height:
    1.05 !important;
}


/* description */

.page:has(.couple-room-head)
.couple-feature-card small {
  min-height:
    27px !important;

  margin-top:
    5px !important;

  overflow:
    hidden !important;

  font-size:
    9.5px !important;

  line-height:
    1.35 !important;

  display:
    -webkit-box !important;

  -webkit-line-clamp:
    2 !important;

  -webkit-box-orient:
    vertical !important;
}


/* =========================================================
   UPCOMING
   ========================================================= */

.page:has(.couple-room-head)
.couple-next-head {
  margin:
    20px 3px 10px !important;
}

.page:has(.couple-room-head)
.couple-next-head h2 {
  font-size:
    20px !important;
}


/* event */

.page:has(.couple-room-head)
.event-mini {
  min-height:
    82px !important;

  padding:
    12px !important;

  border-radius:
    21px !important;
}


/* =========================================================
   BOTTOM NAV SAFE ZONE
   ========================================================= */

.page:has(.couple-room-head)
.couple-upcoming-list {
  margin-bottom:
    42px !important;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
.couple-head-avatar {
  background:
    rgba(255,255,255,.78) !important;

  border:
    2px solid
    rgba(255,255,255,.88) !important;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
.couple-head-avatar {
  color:
    #fff !important;

  background:
    #242b47 !important;

  border:
    2px solid
    #171d31 !important;
}


/* =========================================================
   SMALL IPHONE
   ========================================================= */

@media (max-width: 380px) {

  .couple-room-head h1 {
    font-size:
      26px !important;
  }

  .page:has(.couple-room-head)
  .couple-hero {
    padding:
      18px !important;
  }

  .page:has(.couple-room-head)
  .couple-hero h2 {
    font-size:
      27px !important;
  }

  .page:has(.couple-room-head)
  .couple-feature-card {
    height:
      120px !important;

    min-height:
      120px !important;

    padding:
      12px !important;
  }

}


/* =========================================================
   NAMI — COUPLE V3
   story + quick actions
   ========================================================= */


/* =========================================================
   STORY CARD
   ========================================================= */

.couple-story-card {
  position: relative;

  width: 100%;

  display: grid;

  grid-template-columns:
    48px minmax(0,1fr) 28px;

  align-items: center;

  gap: 13px;

  min-height: 108px;

  padding: 15px;

  border-radius: 24px;

  text-align: left;

  overflow: hidden;

  -webkit-tap-highlight-color: transparent;
}


.couple-story-mark {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border-radius: 16px;
}


.couple-story-mark svg {
  width: 31px !important;
  height: 22px !important;
}


.couple-story-content {
  min-width: 0;

  display: flex;
  flex-direction: column;
}


.couple-story-content small {
  margin-bottom: 6px;

  color: #8378df;

  font-size: 9px;
  font-weight: 900;
  letter-spacing: .15em;
}


.couple-story-content b {
  color: var(--text);

  font-size: 18px;
  line-height: 1.08;

  font-weight: 900;
  letter-spacing: -.03em;
}


.couple-story-content > span {
  margin-top: 5px;

  color: var(--muted);

  font-size: 10.5px;
  line-height: 1.3;
}


.couple-story-content em {
  display: inline-flex;

  width: fit-content;

  margin-top: 7px;
  padding: 4px 8px;

  border-radius: 999px;

  color: #8175dd;

  font-size: 9px;
  line-height: 1;

  font-style: normal;
  font-weight: 800;
}


.couple-story-chevron {
  display: grid;
  place-items: center;

  color: #8c83c8;
}


/* =========================================================
   QUICK ACTIONS
   ========================================================= */

.couple-quick-actions {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: 8px;

  margin-top: 9px;
  margin-bottom: 10px;
}


.couple-quick-actions button {
  min-width: 0;
  height: 64px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 6px;

  padding: 7px 5px;

  border-radius: 18px;

  -webkit-tap-highlight-color: transparent;
}


.couple-quick-actions button > span {
  color: #8176df;

  display: grid;
  place-items: center;
}


.couple-quick-actions button b {
  color: var(--text);

  font-size: 10.5px;
  line-height: 1;

  font-weight: 850;

  white-space: nowrap;
}


/* =========================================================
   CORE GRID
   ========================================================= */

.page:has(.couple-room-head)
.couple-core-grid {
  margin-top: 0 !important;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
.couple-story-card,
html:not([data-svoi-theme="dark"])
.couple-quick-actions button {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.62),
      rgba(238,242,255,.48)
    );

  border:
    1px solid rgba(255,255,255,.80);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 9px 24px rgba(84,76,151,.04);
}


html:not([data-svoi-theme="dark"])
.couple-story-mark {
  background:
    linear-gradient(
      145deg,
      rgba(255,221,225,.64),
      rgba(216,226,253,.72)
    );

  border:
    1px solid rgba(255,255,255,.84);
}


html:not([data-svoi-theme="dark"])
.couple-story-content em {
  background:
    rgba(227,217,251,.60);
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
.couple-story-card,
html[data-svoi-theme="dark"]
.couple-quick-actions button {
  background:
    linear-gradient(
      145deg,
      #202842,
      #191f36
    );

  border:
    1px solid rgba(118,125,210,.16);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 26px rgba(2,6,22,.17);
}


html[data-svoi-theme="dark"]
.couple-story-mark {
  background:
    linear-gradient(
      145deg,
      rgba(110,70,123,.28),
      rgba(68,69,146,.29)
    );

  border:
    1px solid rgba(138,130,220,.15);
}


html[data-svoi-theme="dark"]
.couple-story-content b {
  color: #fff;
}


html[data-svoi-theme="dark"]
.couple-story-content em {
  color: #afa5ff;

  background:
    rgba(112,101,216,.12);
}


/* =========================================================
   ABOUT SHEET
   ========================================================= */

.couple-about-sheet {
  padding: 4px 0 8px;
}


.couple-about-mark {
  width: 64px;
  height: 64px;

  display: grid;
  place-items: center;

  margin: 0 auto 14px;

  border-radius: 20px;
}


.couple-about-mark svg {
  width: 40px !important;
  height: 29px !important;
}


.couple-about-intro {
  text-align: center;
}


.couple-about-intro h2 {
  margin: 0;

  color: var(--text);

  font-size: 22px;
  font-weight: 900;

  letter-spacing: -.035em;
}


.couple-about-intro p {
  max-width: 295px;

  margin: 8px auto 20px;

  color: var(--muted);

  font-size: 12px;
  line-height: 1.45;
}


.couple-about-extra-title {
  margin:
    5px 2px 2px;

  color: var(--muted);

  font-size: 10px;
  font-weight: 850;

  text-transform: uppercase;
  letter-spacing: .12em;
}


.couple-marriage-row {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 14px;

  min-height: 68px;

  padding: 12px 14px;

  border-radius: 18px;
}


.couple-marriage-row > span {
  display: flex;
  flex-direction: column;

  text-align: left;
}


.couple-marriage-row b {
  color: var(--text);

  font-size: 14px;
  font-weight: 850;
}


.couple-marriage-row small {
  margin-top: 4px;

  color: var(--muted);

  font-size: 10px;
}


.couple-marriage-row input {
  width: 21px;
  height: 21px;

  accent-color: #756bdb;
}


.couple-wedding-date[hidden] {
  display: none !important;
}


html:not([data-svoi-theme="dark"])
.couple-about-mark,
html:not([data-svoi-theme="dark"])
.couple-marriage-row {
  background:
    rgba(255,255,255,.50);

  border:
    1px solid rgba(255,255,255,.78);
}


html[data-svoi-theme="dark"]
.couple-about-mark,
html[data-svoi-theme="dark"]
.couple-marriage-row {
  background:
    #1c243b;

  border:
    1px solid rgba(119,126,211,.15);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 380px) {

  .couple-story-card {
    grid-template-columns:
      44px minmax(0,1fr) 24px;

    gap: 10px;

    padding: 13px;
  }

  .couple-story-mark {
    width: 44px;
    height: 44px;
  }

  .couple-story-content b {
    font-size: 16px;
  }

  .couple-quick-actions {
    gap: 6px;
  }

  .couple-quick-actions button {
    height: 60px;
  }

}


/* =========================================================
   NAMI — ABOUT COUPLE V2
   compact premium form
   ========================================================= */

.couple-about-sheet {
  padding: 0 2px 10px !important;
}


/* =========================================================
   TOP
   ========================================================= */

.couple-about-mark {
  width: 58px !important;
  height: 58px !important;

  margin: -2px auto 12px !important;

  border-radius: 18px !important;
}

.couple-about-mark svg {
  width: 36px !important;
  height: 26px !important;
}


.couple-about-intro h2 {
  font-size: 21px !important;
  line-height: 1.05 !important;

  margin: 0 !important;
}


.couple-about-intro p {
  max-width: 290px !important;

  margin: 7px auto 16px !important;

  font-size: 11.5px !important;
  line-height: 1.4 !important;
}


/* =========================================================
   FORM
   ========================================================= */

.couple-about-sheet
.form-stack {
  gap: 9px !important;
}


/* each date block */

.couple-about-sheet
.field {
  display: block !important;

  margin: 0 !important;
}


.couple-about-sheet
.field > span {
  display: block !important;

  margin: 0 0 6px 4px !important;

  color: var(--muted) !important;

  font-size: 11px !important;
  line-height: 1 !important;

  font-weight: 800 !important;
}


/* compact date input */

.couple-about-sheet
.field input[type="date"] {
  width: 100% !important;
  height: 54px !important;

  min-height: 54px !important;

  padding:
    0 15px !important;

  border-radius:
    16px !important;

  box-sizing:
    border-box !important;

  font-size:
    15px !important;

  font-weight:
    650 !important;

  text-align:
    center !important;

  outline:
    none !important;

  -webkit-appearance:
    none !important;

  appearance:
    none !important;
}


/* native date text */

.couple-about-sheet
input[type="date"]::-webkit-date-and-time-value {
  text-align: center !important;
}


/* calendar icon */

.couple-about-sheet
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .65 !important;

  cursor: pointer !important;
}


/* =========================================================
   EXTRA TITLE
   ========================================================= */

.couple-about-extra-title {
  margin:
    5px 4px 1px !important;

  color: #857ad8 !important;

  font-size: 9px !important;

  font-weight: 900 !important;

  letter-spacing: .16em !important;

  text-transform: uppercase !important;
}


/* =========================================================
   MARRIAGE
   ========================================================= */

.couple-marriage-row {
  min-height: 62px !important;

  padding:
    10px 13px !important;

  border-radius:
    18px !important;
}


.couple-marriage-row > span {
  min-width: 0 !important;
}


.couple-marriage-row b {
  font-size: 14px !important;
  line-height: 1.1 !important;
}


.couple-marriage-row small {
  margin-top: 4px !important;

  font-size: 10px !important;
}


/* iOS-like switch */

.couple-marriage-row
input[type="checkbox"] {
  position: relative !important;

  width: 48px !important;
  height: 28px !important;

  min-width: 48px !important;

  margin: 0 !important;

  border: 0 !important;

  border-radius: 999px !important;

  -webkit-appearance: none !important;
  appearance: none !important;

  background:
    radial-gradient(
      circle at 14px 50%,
      #ffffff 0 9px,
      transparent 10px
    ),
    rgba(145,148,168,.28) !important;

  transition:
    background .18s ease,
    box-shadow .18s ease !important;
}


.couple-marriage-row
input[type="checkbox"]:checked {
  background:
    radial-gradient(
      circle at 34px 50%,
      #ffffff 0 9px,
      transparent 10px
    ),
    linear-gradient(
      135deg,
      #8b76e8,
      #6e8bea
    ) !important;

  box-shadow:
    0 6px 16px rgba(104,91,207,.20) !important;
}


/* wedding date spacing */

.couple-wedding-date {
  margin-top: 0 !important;
}


/* =========================================================
   SAVE BUTTON
   ========================================================= */

.couple-about-sheet
button[type="submit"] {
  height: 52px !important;

  margin-top: 4px !important;

  border-radius: 17px !important;

  font-size: 14px !important;

  font-weight: 850 !important;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
.couple-about-sheet
.field input[type="date"] {
  color: #171923 !important;

  background:
    rgba(255,255,255,.56) !important;

  border:
    1px solid rgba(255,255,255,.82) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 7px 18px rgba(84,76,151,.035) !important;
}


html:not([data-svoi-theme="dark"])
.couple-marriage-row {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.62),
      rgba(235,240,255,.52)
    ) !important;

  border:
    1px solid rgba(255,255,255,.82) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 8px 20px rgba(84,76,151,.04) !important;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
.couple-about-sheet
.field input[type="date"] {
  color: #f7f7ff !important;

  color-scheme: dark !important;

  background:
    #181e32 !important;

  border:
    1px solid rgba(119,126,211,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}


html[data-svoi-theme="dark"]
.couple-marriage-row {
  background:
    linear-gradient(
      145deg,
      #202842,
      #1a2138
    ) !important;

  border:
    1px solid rgba(119,126,211,.16) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}


/* =========================================================
   SHEET ITSELF — LESS TALL / CLEANER
   ========================================================= */

#sheetRoot:has(.couple-about-sheet)
.sheet {
  max-height:
    min(88dvh, 760px) !important;
}


#sheetRoot:has(.couple-about-sheet)
.sheet-content {
  padding-bottom:
    calc(18px + env(safe-area-inset-bottom)) !important;
}


/* =========================================================
   SMALL IPHONE
   ========================================================= */

@media (max-width: 380px) {

  .couple-about-mark {
    width: 52px !important;
    height: 52px !important;
  }

  .couple-about-intro p {
    margin-bottom: 13px !important;
  }

  .couple-about-sheet
  .field input[type="date"] {
    height: 50px !important;
    min-height: 50px !important;
  }

  .couple-marriage-row {
    min-height: 58px !important;
  }

}


/* =========================================================
   NAMI — COUPLE ABOUT V2
   compact premium
   ========================================================= */

.couple-about-v2 {
  padding:
    0 0 6px !important;
}


/* =========================================================
   SUMMARY
   ========================================================= */

.couple-about-summary {
  display: grid;

  grid-template-columns:
    52px minmax(0,1fr);

  align-items: center;

  gap: 13px;

  margin:
    -2px 0 17px;
}


.couple-about-v2
.couple-about-mark {
  width: 52px !important;
  height: 52px !important;

  margin: 0 !important;

  border-radius:
    17px !important;
}


.couple-about-v2
.couple-about-mark svg {
  width: 33px !important;
  height: 24px !important;
}


.couple-about-v2
.couple-about-intro {
  min-width: 0;

  text-align: left !important;
}


.couple-about-v2
.couple-about-intro h2 {
  margin: 0 !important;

  font-size:
    20px !important;

  line-height:
    1.05 !important;
}


.couple-about-v2
.couple-about-intro p {
  max-width: none !important;

  margin:
    5px 0 0 !important;

  font-size:
    11px !important;

  line-height:
    1.35 !important;
}


/* =========================================================
   FORM
   ========================================================= */

.couple-about-form {
  display: flex;
  flex-direction: column;

  gap: 12px;
}


.couple-about-group {
  display: flex;
  flex-direction: column;

  gap: 6px;
}


.couple-about-label {
  padding-left: 3px;

  color: var(--muted);

  font-size: 11px;
  line-height: 1;

  font-weight: 800;
}


.couple-about-section-label {
  margin:
    5px 3px 0;

  color: var(--muted);

  font-size: 9px;
  line-height: 1;

  font-weight: 900;

  letter-spacing: .15em;

  text-transform: uppercase;
}


/* =========================================================
   DATE ROWS
   ========================================================= */

.couple-date-row {
  position: relative;

  min-height: 54px;

  display: grid;

  grid-template-columns:
    35px minmax(0,1fr) 20px;

  align-items: center;

  gap: 8px;

  padding:
    7px 11px;

  border-radius:
    17px;

  overflow: hidden;
}


.couple-date-icon {
  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  border-radius:
    11px;

  color:
    #8277df;
}


.couple-date-row input {
  position: relative;

  width: 100%;
  min-width: 0;

  height: 38px;

  margin: 0;
  padding: 0;

  border: 0 !important;

  outline: 0 !important;

  background:
    transparent !important;

  color:
    var(--text) !important;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    sans-serif;

  font-size:
    14px !important;

  font-weight:
    750;

  text-align:
    left;

  box-shadow:
    none !important;
}


.couple-date-row
input::-webkit-calendar-picker-indicator {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  opacity: 0;

  cursor: pointer;
}


.couple-date-chevron {
  display: grid;
  place-items: center;

  color:
    var(--muted);

  opacity: .7;
}


/* =========================================================
   MARRIAGE
   ========================================================= */

.couple-about-v2
.couple-marriage-card {
  min-height: 66px;

  display: grid;

  grid-template-columns:
    42px minmax(0,1fr) 50px;

  align-items: center;

  gap: 10px;

  padding:
    11px 12px;

  border-radius:
    19px;
}


.couple-marriage-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius:
    14px;
}


.couple-marriage-icon svg {
  width: 28px !important;
  height: 20px !important;
}


.couple-marriage-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;
}


.couple-marriage-copy b {
  color: var(--text);

  font-size:
    14px;

  line-height:
    1.1;

  font-weight:
    850;
}


.couple-marriage-copy small {
  margin-top:
    4px;

  color:
    var(--muted);

  font-size:
    9.5px;

  line-height:
    1.3;
}


/* =========================================================
   SWITCH
   ========================================================= */

.couple-marriage-switch {
  position: relative;

  width: 48px;
  height: 28px;

  display: block;
}


.couple-marriage-switch input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;
}


.couple-marriage-switch i {
  position: absolute;

  inset: 0;

  border-radius:
    999px;

  transition:
    .2s ease;
}


.couple-marriage-switch i::after {
  content: "";

  position: absolute;

  width: 22px;
  height: 22px;

  top: 3px;
  left: 3px;

  border-radius: 50%;

  background: #fff;

  box-shadow:
    0 2px 7px rgba(0,0,0,.18);

  transition:
    transform .2s ease;
}


.couple-marriage-switch
input:checked + i {
  background:
    linear-gradient(
      135deg,
      #776ce0,
      #6884e0
    ) !important;
}


.couple-marriage-switch
input:checked + i::after {
  transform:
    translateX(20px);
}


/* =========================================================
   WEDDING DATE
   ========================================================= */

.couple-wedding-date {
  animation:
    coupleWeddingIn .18s ease;
}


.couple-wedding-date[hidden] {
  display: none !important;
}


@keyframes coupleWeddingIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
   SAVE
   ========================================================= */

.couple-about-save {
  min-height: 52px !important;

  margin-top:
    3px !important;

  border-radius:
    17px !important;

  font-size:
    14px !important;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
.couple-date-row,
html:not([data-svoi-theme="dark"])
.couple-about-v2
.couple-marriage-card {
  background:
    rgba(255,255,255,.52);

  border:
    1px solid
    rgba(255,255,255,.80);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.88),
    0 7px 20px
    rgba(84,76,151,.035);
}


html:not([data-svoi-theme="dark"])
.couple-date-icon,
html:not([data-svoi-theme="dark"])
.couple-marriage-icon {
  background:
    linear-gradient(
      145deg,
      rgba(231,220,252,.72),
      rgba(216,227,253,.72)
    );

  border:
    1px solid
    rgba(255,255,255,.82);
}


html:not([data-svoi-theme="dark"])
.couple-marriage-switch i {
  background:
    rgba(150,151,177,.20);
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
.couple-date-row,
html[data-svoi-theme="dark"]
.couple-about-v2
.couple-marriage-card {
  background:
    linear-gradient(
      145deg,
      #1d253d,
      #181f35
    );

  border:
    1px solid
    rgba(119,126,211,.15);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.035);
}


html[data-svoi-theme="dark"]
.couple-date-icon,
html[data-svoi-theme="dark"]
.couple-marriage-icon {
  color:
    #aaa0ff;

  background:
    rgba(108,98,211,.13);

  border:
    1px solid
    rgba(136,128,221,.13);
}


html[data-svoi-theme="dark"]
.couple-marriage-switch i {
  background:
    rgba(151,154,190,.18);
}


/* =========================================================
   SMALL IPHONE
   ========================================================= */

@media (max-width: 380px) {

  .couple-about-summary {
    grid-template-columns:
      48px minmax(0,1fr);

    margin-bottom:
      14px;
  }

  .couple-about-v2
  .couple-about-mark {
    width: 48px !important;
    height: 48px !important;
  }

  .couple-about-form {
    gap: 10px;
  }

  .couple-date-row {
    min-height: 51px;
  }

}


/* =========================================================
   NAMI — DATE INPUT CLEAN FIX
   убираем внутренние чёрные прямоугольники iOS Safari
   ========================================================= */

.couple-about-v2
.couple-date-row input[type="date"] {
  width: 100% !important;
  min-width: 0 !important;

  height: 38px !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  outline: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;

  -webkit-appearance: none !important;
  appearance: none !important;

  color: var(--text) !important;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    sans-serif !important;

  font-size: 15px !important;
  line-height: 38px !important;

  font-weight: 750 !important;

  text-align: left !important;
}


/* внутренности Safari */

.couple-about-v2
.couple-date-row
input[type="date"]::-webkit-datetime-edit {
  padding: 0 !important;

  background: transparent !important;

  color: inherit !important;
}


.couple-about-v2
.couple-date-row
input[type="date"]::-webkit-date-and-time-value {
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: left !important;

  background: transparent !important;

  color: inherit !important;
}


.couple-about-v2
.couple-date-row
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  padding: 0 !important;

  background: transparent !important;
}


.couple-about-v2
.couple-date-row
input[type="date"]::-webkit-datetime-edit-text,
.couple-about-v2
.couple-date-row
input[type="date"]::-webkit-datetime-edit-month-field,
.couple-about-v2
.couple-date-row
input[type="date"]::-webkit-datetime-edit-day-field,
.couple-about-v2
.couple-date-row
input[type="date"]::-webkit-datetime-edit-year-field {
  background: transparent !important;

  color: inherit !important;
}


/* системный календарик не нужен —
   у нас уже своя иконка слева */

.couple-about-v2
.couple-date-row
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;

  opacity: 0 !important;

  cursor: pointer !important;
}


/* сама внешняя строка становится чище */

.couple-about-v2
.couple-date-row {
  min-height: 54px !important;

  padding:
    7px 12px !important;

  border-radius:
    17px !important;
}


/* LIGHT */

html:not([data-svoi-theme="dark"])
.couple-about-v2
.couple-date-row input[type="date"] {
  color: #171827 !important;
}


/* DARK */

html[data-svoi-theme="dark"]
.couple-about-v2
.couple-date-row input[type="date"] {
  color: #f4f5ff !important;
}


/* =========================================================
   NAMI — MARRIAGE COUNTDOWN
   ========================================================= */

.couple-story-marriage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 6px;

  margin-top: 8px;
}

.couple-story-content
.couple-story-marriage em {
  width: fit-content;

  display: inline-flex;
  align-items: center;

  gap: 4px;

  margin: 0 !important;
  padding: 5px 8px;

  border-radius: 999px;

  font-size: 9px;
  line-height: 1.1;

  font-style: normal;
  font-weight: 800;
}

.couple-story-content
.wedding-countdown {
  white-space: normal;
}


/* LIGHT */

html:not([data-svoi-theme="dark"])
.couple-story-marriage em {
  color: #756bd5;

  background:
    rgba(228,220,251,.70);

  border:
    1px solid rgba(255,255,255,.74);
}

html:not([data-svoi-theme="dark"])
.couple-story-marriage
.wedding-countdown {
  color: #6278c9;

  background:
    rgba(218,229,253,.74);
}


/* DARK */

html[data-svoi-theme="dark"]
.couple-story-marriage em {
  color: #afa5ff;

  background:
    rgba(111,99,214,.14);

  border:
    1px solid rgba(133,125,221,.12);
}

html[data-svoi-theme="dark"]
.couple-story-marriage
.wedding-countdown {
  color: #9fb3ff;

  background:
    rgba(86,105,191,.14);
}


/* =========================================================
   NAMI — COUPLE STORY V4
   ровная компактная карточка
   ========================================================= */

.couple-story-card {
  grid-template-columns:
    46px minmax(0,1fr) 24px !important;

  align-items: center !important;

  gap: 12px !important;

  min-height: 0 !important;

  padding: 14px !important;

  border-radius: 23px !important;
}


/* =========================================================
   ICON
   ========================================================= */

.couple-story-mark {
  width: 46px !important;
  height: 46px !important;

  align-self: start !important;

  margin-top: 1px !important;

  border-radius: 15px !important;
}

.couple-story-mark svg {
  width: 29px !important;
  height: 21px !important;
}


/* =========================================================
   CONTENT
   ========================================================= */

.couple-story-content {
  display: flex !important;
  flex-direction: column !important;

  min-width: 0 !important;
}

.couple-story-content > small {
  margin: 0 0 5px !important;

  font-size: 8.5px !important;
  line-height: 1 !important;

  font-weight: 900 !important;
  letter-spacing: .15em !important;
}

.couple-story-content > b {
  margin: 0 !important;

  color: var(--text) !important;

  font-size: 17px !important;
  line-height: 1.12 !important;

  font-weight: 900 !important;
  letter-spacing: -.025em !important;
}


/* =========================================================
   RELATIONSHIP ANNIVERSARY
   первая строка под главным сроком
   ========================================================= */

.couple-story-content
> span:not(.couple-story-marriage) {
  width: 100% !important;

  display: flex !important;
  align-items: center !important;

  min-height: 27px !important;

  margin: 8px 0 0 !important;
  padding: 6px 9px !important;

  border-radius: 10px !important;

  font-size: 9.5px !important;
  line-height: 1.15 !important;

  font-weight: 750 !important;
}


/* =========================================================
   MARRIAGE
   ========================================================= */

.couple-story-marriage {
  width: 100% !important;

  display: grid !important;
  grid-template-columns: 1fr !important;

  gap: 5px !important;

  margin: 5px 0 0 !important;
}


/* две строки строго одинаковой формы */

.couple-story-content
.couple-story-marriage em {
  width: 100% !important;
  min-height: 27px !important;

  display: flex !important;
  align-items: center !important;

  gap: 6px !important;

  margin: 0 !important;
  padding: 6px 9px !important;

  border-radius: 10px !important;

  font-size: 9.5px !important;
  line-height: 1.15 !important;

  font-style: normal !important;
  font-weight: 750 !important;

  box-sizing: border-box !important;
}


/* иконка в строке годовщины брака */

.couple-story-content
.wedding-countdown svg {
  width: 12px !important;
  height: 12px !important;

  flex: 0 0 12px !important;
}


/* =========================================================
   CHEVRON
   ========================================================= */

.couple-story-chevron {
  width: 24px !important;
  height: 40px !important;

  display: grid !important;
  place-items: center !important;

  align-self: center !important;

  opacity: .62 !important;
}

.couple-story-chevron svg {
  width: 15px !important;
  height: 15px !important;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
.couple-story-content
> span:not(.couple-story-marriage) {
  color: #6d65b5 !important;

  background:
    rgba(232,226,251,.64) !important;

  border:
    1px solid rgba(255,255,255,.70) !important;
}

html:not([data-svoi-theme="dark"])
.couple-story-content
.couple-story-marriage em {
  color: #6d65b5 !important;

  background:
    rgba(232,226,251,.54) !important;

  border:
    1px solid rgba(255,255,255,.66) !important;
}

html:not([data-svoi-theme="dark"])
.couple-story-content
.couple-story-marriage
.wedding-countdown {
  color: #6077c3 !important;

  background:
    rgba(220,230,253,.68) !important;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
.couple-story-content
> span:not(.couple-story-marriage) {
  color: #aba3ed !important;

  background:
    rgba(108,99,202,.11) !important;

  border:
    1px solid rgba(132,126,213,.10) !important;
}

html[data-svoi-theme="dark"]
.couple-story-content
.couple-story-marriage em {
  color: #aba3ed !important;

  background:
    rgba(108,99,202,.10) !important;

  border:
    1px solid rgba(132,126,213,.10) !important;
}

html[data-svoi-theme="dark"]
.couple-story-content
.couple-story-marriage
.wedding-countdown {
  color: #9dafef !important;

  background:
    rgba(80,101,181,.12) !important;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.couple-story-card.empty {
  min-height: 92px !important;
}

.couple-story-card.empty
.couple-story-content
> span:not(.couple-story-marriage) {
  background: transparent !important;

  border: 0 !important;

  padding: 0 !important;

  min-height: 0 !important;

  color: var(--muted) !important;

  line-height: 1.3 !important;
}


/* =========================================================
   SMALL IPHONE
   ========================================================= */

@media (max-width: 380px) {

  .couple-story-card {
    grid-template-columns:
      42px minmax(0,1fr) 20px !important;

    gap: 10px !important;

    padding: 12px !important;
  }

  .couple-story-mark {
    width: 42px !important;
    height: 42px !important;
  }

  .couple-story-content > b {
    font-size: 16px !important;
  }

  .couple-story-content
  > span:not(.couple-story-marriage),
  .couple-story-content
  .couple-story-marriage em {
    font-size: 9px !important;
  }

}


/* =========================================================
   NAMI — COUPLE FINAL V5
   story geometry + about spacing + bottom safe zone
   ========================================================= */


/* =========================================================
   STORY CARD
   ========================================================= */

.page:has(.couple-room-head)
.couple-story-card {
  grid-template-columns:
    40px minmax(0,1fr) 20px !important;

  gap: 11px !important;

  padding: 13px 14px !important;

  min-height: 0 !important;

  border-radius: 22px !important;
}


/* logo smaller */

.page:has(.couple-room-head)
.couple-story-mark {
  width: 40px !important;
  height: 40px !important;

  margin-top: 1px !important;

  align-self: start !important;

  border-radius: 13px !important;
}

.page:has(.couple-room-head)
.couple-story-mark svg {
  width: 27px !important;
  height: 20px !important;
}


/* content */

.page:has(.couple-room-head)
.couple-story-content {
  gap: 0 !important;
}


.page:has(.couple-room-head)
.couple-story-content > small {
  margin: 0 0 5px !important;

  font-size: 8px !important;
  line-height: 1 !important;

  letter-spacing: .16em !important;
}


.page:has(.couple-room-head)
.couple-story-content > b {
  margin: 0 !important;

  font-size: 17px !important;
  line-height: 1.05 !important;

  letter-spacing: -.025em !important;
}


/* =========================================================
   ALL INFO ROWS
   ========================================================= */

.page:has(.couple-room-head)
.couple-story-content
> span:not(.couple-story-marriage),

.page:has(.couple-room-head)
.couple-story-content
.couple-story-marriage em {
  width: 100% !important;

  min-height: 28px !important;

  display: flex !important;
  align-items: center !important;

  margin: 0 !important;

  padding: 6px 9px !important;

  border-radius: 10px !important;

  box-sizing: border-box !important;

  font-size: 9.5px !important;
  line-height: 1.15 !important;

  font-weight: 750 !important;
}


/* relationship anniversary */

.page:has(.couple-room-head)
.couple-story-content
> span:not(.couple-story-marriage) {
  margin-top: 8px !important;
}


/* marriage rows */

.page:has(.couple-room-head)
.couple-story-marriage {
  width: 100% !important;

  display: grid !important;
  grid-template-columns: 1fr !important;

  gap: 5px !important;

  margin-top: 5px !important;
}


/* calendar icon */

.page:has(.couple-room-head)
.couple-story-marriage
.wedding-countdown svg {
  width: 12px !important;
  height: 12px !important;

  flex: 0 0 12px !important;
}


/* arrow */

.page:has(.couple-room-head)
.couple-story-chevron {
  width: 20px !important;

  align-self: center !important;

  opacity: .55 !important;
}

.page:has(.couple-room-head)
.couple-story-chevron svg {
  width: 14px !important;
  height: 14px !important;
}


/* =========================================================
   LIGHT STORY ROWS
   ========================================================= */

html:not([data-svoi-theme="dark"])
.page:has(.couple-room-head)
.couple-story-content
> span:not(.couple-story-marriage),

html:not([data-svoi-theme="dark"])
.page:has(.couple-room-head)
.couple-story-marriage em {
  color: #6d68ad !important;

  background:
    rgba(235,231,251,.58) !important;

  border:
    1px solid rgba(255,255,255,.66) !important;
}


html:not([data-svoi-theme="dark"])
.page:has(.couple-room-head)
.couple-story-marriage
.wedding-countdown {
  color: #6276bf !important;

  background:
    rgba(223,231,253,.66) !important;
}


/* =========================================================
   DARK STORY ROWS
   ========================================================= */

html[data-svoi-theme="dark"]
.page:has(.couple-room-head)
.couple-story-content
> span:not(.couple-story-marriage),

html[data-svoi-theme="dark"]
.page:has(.couple-room-head)
.couple-story-marriage em {
  color: #aaa3e9 !important;

  background:
    rgba(106,98,194,.10) !important;

  border:
    1px solid rgba(128,121,207,.10) !important;
}


html[data-svoi-theme="dark"]
.page:has(.couple-room-head)
.couple-story-marriage
.wedding-countdown {
  color: #9eaded !important;

  background:
    rgba(75,94,171,.13) !important;
}


/* =========================================================
   ABOUT SHEET — MORE COMPACT
   ========================================================= */

.couple-about-v2
.couple-about-summary {
  margin-bottom: 14px !important;
}


.couple-about-v2
.couple-about-form {
  gap: 9px !important;
}


.couple-about-v2
.couple-about-section-label {
  margin:
    5px 3px 1px !important;
}


.couple-about-v2
.couple-about-group.secondary {
  gap: 4px !important;
}


.couple-about-v2
.couple-about-group.secondary
.couple-date-row {
  min-height: 47px !important;

  padding-top: 4px !important;
  padding-bottom: 4px !important;
}


.couple-about-v2
.couple-marriage-card {
  min-height: 61px !important;

  padding:
    9px 11px !important;
}


.couple-about-v2
.couple-wedding-date {
  margin-top: -1px !important;
}


.couple-about-v2
.couple-about-save {
  min-height: 49px !important;

  margin-top: 2px !important;
}


/* =========================================================
   CORE FEATURE CARDS
   slightly more compact
   ========================================================= */

.page:has(.couple-room-head)
.couple-core-grid {
  gap: 9px !important;
}


.page:has(.couple-room-head)
.couple-feature-card {
  height: 116px !important;
  min-height: 116px !important;

  padding: 12px !important;

  border-radius: 21px !important;
}


.page:has(.couple-room-head)
.couple-feature-card
.couple-feature-icon {
  width: 36px !important;
  height: 36px !important;
}


.page:has(.couple-room-head)
.couple-feature-card b {
  font-size: 14px !important;
}


.page:has(.couple-room-head)
.couple-feature-card small {
  font-size: 9.5px !important;
}


/* =========================================================
   BOTTOM NAV SAFE AREA
   ========================================================= */

.page:has(.couple-room-head) {
  padding-bottom:
    calc(
      265px +
      env(safe-area-inset-bottom)
    ) !important;
}


.page:has(.couple-room-head)
.couple-upcoming-list {
  margin-bottom:
    75px !important;
}


/* =========================================================
   SMALL IPHONE
   ========================================================= */

@media (max-width: 380px) {

  .page:has(.couple-room-head)
  .couple-story-card {
    grid-template-columns:
      38px minmax(0,1fr) 18px !important;

    gap: 9px !important;

    padding: 12px !important;
  }

  .page:has(.couple-room-head)
  .couple-story-mark {
    width: 38px !important;
    height: 38px !important;
  }

  .page:has(.couple-room-head)
  .couple-story-content > b {
    font-size: 16px !important;
  }

  .page:has(.couple-room-head)
  .couple-feature-card {
    height: 110px !important;
    min-height: 110px !important;
  }

}


/* =========================================================
   NAMI — COUPLE OCCASIONS
   ========================================================= */

.couple-occasions {
  padding-bottom: 8px;
}

.occasion-hero {
  display: grid;

  grid-template-columns:
    44px minmax(0,1fr) auto;

  align-items: center;

  gap: 11px;

  padding: 12px;

  border-radius: 20px;
}

.occasion-hero-icon {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border-radius: 14px;

  color: #9f94ff;
}

.occasion-hero > span:nth-child(2) {
  min-width: 0;

  display: flex;
  flex-direction: column;
}

.occasion-hero b {
  color: var(--text);

  font-size: 15px;
  font-weight: 850;
}

.occasion-hero small {
  margin-top: 3px;

  color: var(--muted);

  font-size: 9.5px;
}

.occasion-add {
  min-height: 37px;

  display: inline-flex;
  align-items: center;

  gap: 5px;

  padding: 0 10px;

  border-radius: 12px;

  color: #a69cff;

  font-size: 10px;
  font-weight: 850;
}


.occasion-list {
  display: flex;
  flex-direction: column;

  gap: 8px;

  margin-top: 12px;
}


.occasion-row {
  display: grid;

  grid-template-columns:
    75px minmax(0,1fr) 30px;

  align-items: center;

  gap: 10px;

  min-height: 65px;

  padding: 9px 10px;

  border-radius: 18px;
}


.occasion-date-box {
  min-height: 43px;

  display: grid;
  place-items: center;

  padding: 5px 7px;

  border-radius: 12px;

  text-align: center;
}

.occasion-date-box b {
  font-size: 10px;
  line-height: 1.15;
}


.occasion-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;
}

.occasion-copy > b {
  color: var(--text);

  font-size: 13px;
  line-height: 1.15;

  font-weight: 850;
}

.occasion-copy small {
  margin-top: 5px;

  color: var(--muted);

  font-size: 9px;
  line-height: 1.2;
}


.occasion-lock,
.occasion-delete {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border-radius: 10px;
}

.occasion-lock {
  color: #9186ee;
}

.occasion-delete {
  color: var(--muted);

  font-size: 19px;
  font-weight: 400;
}


.occasion-empty {
  min-height: 150px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 22px;

  text-align: center;

  border-radius: 20px;
}

.occasion-empty > span {
  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  margin-bottom: 10px;

  border-radius: 14px;

  color: #998eff;
}

.occasion-empty b {
  color: var(--text);

  font-size: 14px;
}

.occasion-empty small {
  max-width: 230px;

  margin-top: 6px;

  color: var(--muted);

  font-size: 10px;
  line-height: 1.35;
}


/* FORM */

.occasion-form {
  display: flex;
  flex-direction: column;

  gap: 12px;
}

.occasion-yearly-row {
  min-height: 66px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 11px 13px;

  border-radius: 18px;
}

.occasion-yearly-row > span:first-child {
  display: flex;
  flex-direction: column;
}

.occasion-yearly-row b {
  color: var(--text);

  font-size: 13px;
  font-weight: 850;
}

.occasion-yearly-row small {
  margin-top: 4px;

  color: var(--muted);

  font-size: 9.5px;
}


/* LIGHT */

html:not([data-svoi-theme="dark"])
.occasion-hero,
html:not([data-svoi-theme="dark"])
.occasion-row,
html:not([data-svoi-theme="dark"])
.occasion-empty,
html:not([data-svoi-theme="dark"])
.occasion-yearly-row {
  background:
    rgba(255,255,255,.54);

  border:
    1px solid rgba(255,255,255,.78);
}

html:not([data-svoi-theme="dark"])
.occasion-hero-icon,
html:not([data-svoi-theme="dark"])
.occasion-date-box,
html:not([data-svoi-theme="dark"])
.occasion-empty > span {
  background:
    linear-gradient(
      145deg,
      rgba(232,220,253,.72),
      rgba(219,230,253,.72)
    );
}


/* DARK */

html[data-svoi-theme="dark"]
.occasion-hero,
html[data-svoi-theme="dark"]
.occasion-row,
html[data-svoi-theme="dark"]
.occasion-empty,
html[data-svoi-theme="dark"]
.occasion-yearly-row {
  background:
    linear-gradient(
      145deg,
      #1d253d,
      #181f35
    );

  border:
    1px solid rgba(119,126,211,.14);
}

html[data-svoi-theme="dark"]
.occasion-hero-icon,
html[data-svoi-theme="dark"]
.occasion-date-box,
html[data-svoi-theme="dark"]
.occasion-empty > span {
  background:
    rgba(107,97,207,.13);

  border:
    1px solid rgba(136,128,221,.12);
}


/* =========================================================
   NAMI — COUPLE PLACES
   ========================================================= */

.couple-places {
  padding-bottom: 8px;
}


/* HERO */

.couple-places-hero {
  display: grid;

  grid-template-columns:
    44px minmax(0,1fr) auto;

  align-items: center;

  gap: 11px;

  padding: 12px;

  border-radius: 20px;
}

.couple-places-mark {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border-radius: 14px;
}

.couple-places-mark svg {
  width: 29px !important;
  height: 21px !important;
}

.couple-places-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;
}

.couple-places-copy b {
  color: var(--text);

  font-size: 15px;
  font-weight: 850;
}

.couple-places-copy small {
  margin-top: 3px;

  color: var(--muted);

  font-size: 9.5px;
  line-height: 1.3;
}

.couple-places-add {
  min-height: 37px;

  display: inline-flex;
  align-items: center;

  gap: 5px;

  padding: 0 10px;

  border-radius: 12px;

  color: #a198ff;

  font-size: 10px;
  font-weight: 850;
}


/* SECTIONS */

.couple-places-section {
  margin-top: 16px;
}

.couple-places-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 3px 8px;
}

.couple-places-heading b {
  color: var(--text);

  font-size: 13px;
  font-weight: 850;
}

.couple-places-heading span {
  min-width: 24px;
  height: 24px;

  display: grid;
  place-items: center;

  padding: 0 7px;

  border-radius: 999px;

  color: #9e95f5;

  font-size: 9px;
  font-weight: 850;
}


/* LIST */

.couple-places-list {
  display: flex;
  flex-direction: column;

  gap: 8px;
}

.couple-place-row {
  padding: 12px;

  border-radius: 19px;
}

.couple-place-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;
}

.couple-place-kind {
  display: inline-flex;
  align-items: center;

  min-height: 23px;

  padding: 0 8px;

  border-radius: 999px;

  color: #9d93f5;

  font-size: 8.5px;
  font-weight: 850;

  text-transform: uppercase;
  letter-spacing: .06em;
}

.couple-place-delete {
  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  color: var(--muted);

  font-size: 18px;
  line-height: 1;
}

.couple-place-title {
  display: block;

  margin-top: 7px;

  color: var(--text);

  font-size: 15px;
  line-height: 1.15;

  font-weight: 850;
}

.couple-place-note {
  margin: 5px 0 0;

  color: var(--muted);

  font-size: 10px;
  line-height: 1.35;
}

.couple-place-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 7px;

  margin-top: 10px;
}

.couple-place-visited,
.couple-place-link {
  min-height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 10px;

  border-radius: 11px;

  font-size: 9.5px;
  font-weight: 800;

  text-decoration: none;
}

.couple-place-visited {
  color: #a69cff;
}

.couple-place-link {
  color: var(--muted);
}


/* VISITED */

.couple-place-row.visited {
  opacity: .72;
}

.couple-place-row.visited
.couple-place-title {
  opacity: .82;
}


/* EMPTY */

.couple-places-empty {
  min-height: 160px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  margin-top: 12px;

  padding: 22px;

  text-align: center;

  border-radius: 20px;
}

.couple-places-empty > span {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  margin-bottom: 10px;

  border-radius: 14px;

  color: #9f95ff;
}

.couple-places-empty b {
  color: var(--text);

  font-size: 14px;
}

.couple-places-empty small {
  max-width: 230px;

  margin-top: 5px;

  color: var(--muted);

  font-size: 10px;
  line-height: 1.35;
}

.couple-places-empty button {
  margin-top: 10px;
}


/* FORM */

.couple-place-form {
  display: flex;
  flex-direction: column;

  gap: 11px;
}

.couple-place-form-intro {
  display: grid;

  grid-template-columns:
    46px minmax(0,1fr);

  align-items: center;

  gap: 11px;

  margin-bottom: 3px;

  padding: 11px;

  border-radius: 18px;
}

.couple-place-form-intro > span {
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  border-radius: 14px;
}

.couple-place-form-intro > span svg {
  width: 30px !important;
  height: 22px !important;
}

.couple-place-form-intro div {
  min-width: 0;

  display: flex;
  flex-direction: column;
}

.couple-place-form-intro b {
  color: var(--text);

  font-size: 14px;
  font-weight: 850;
}

.couple-place-form-intro small {
  margin-top: 4px;

  color: var(--muted);

  font-size: 9.5px;
}

.couple-place-form textarea {
  resize: none;
}


/* LIGHT */

html:not([data-svoi-theme="dark"])
.couple-places-hero,
html:not([data-svoi-theme="dark"])
.couple-place-row,
html:not([data-svoi-theme="dark"])
.couple-places-empty,
html:not([data-svoi-theme="dark"])
.couple-place-form-intro {
  background:
    rgba(255,255,255,.53);

  border:
    1px solid rgba(255,255,255,.78);
}

html:not([data-svoi-theme="dark"])
.couple-places-mark,
html:not([data-svoi-theme="dark"])
.couple-place-form-intro > span,
html:not([data-svoi-theme="dark"])
.couple-places-empty > span {
  background:
    linear-gradient(
      145deg,
      rgba(237,220,252,.72),
      rgba(219,230,253,.75)
    );
}

html:not([data-svoi-theme="dark"])
.couple-place-kind,
html:not([data-svoi-theme="dark"])
.couple-places-heading span,
html:not([data-svoi-theme="dark"])
.couple-place-visited {
  background:
    rgba(229,221,252,.65);
}


/* DARK */

html[data-svoi-theme="dark"]
.couple-places-hero,
html[data-svoi-theme="dark"]
.couple-place-row,
html[data-svoi-theme="dark"]
.couple-places-empty,
html[data-svoi-theme="dark"]
.couple-place-form-intro {
  background:
    linear-gradient(
      145deg,
      #1d253d,
      #181f35
    );

  border:
    1px solid rgba(119,126,211,.14);
}

html[data-svoi-theme="dark"]
.couple-places-mark,
html[data-svoi-theme="dark"]
.couple-place-form-intro > span,
html[data-svoi-theme="dark"]
.couple-places-empty > span {
  background:
    rgba(107,97,207,.13);

  border:
    1px solid rgba(136,128,221,.12);
}

html[data-svoi-theme="dark"]
.couple-place-kind,
html[data-svoi-theme="dark"]
.couple-places-heading span,
html[data-svoi-theme="dark"]
.couple-place-visited {
  background:
    rgba(109,99,207,.12);
}


/* =========================================================
   NAMI — PLACE → PLAN
   ========================================================= */

.couple-place-plan {
  min-height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 5px;

  padding: 0 11px;

  border-radius: 11px;

  color: #fff;

  font-size: 9.5px;
  font-weight: 850;

  background:
    linear-gradient(
      135deg,
      #7a70df,
      #6884df
    );

  box-shadow:
    0 5px 14px
    rgba(90,91,196,.16);
}

.couple-place-plan svg {
  width: 14px !important;
  height: 14px !important;
}


/* visited становится вторичной */

.couple-place-visited {
  min-height: 34px !important;

  padding:
    0 10px !important;
}


/* LIGHT */

html:not([data-svoi-theme="dark"])
.couple-place-visited {
  color: #7169bd !important;

  background:
    rgba(232,225,251,.64) !important;
}


/* DARK */

html[data-svoi-theme="dark"]
.couple-place-visited {
  color: #a59cf4 !important;

  background:
    rgba(109,99,207,.12) !important;
}


/* удобно на узких экранах */

@media (max-width: 380px) {

  .couple-place-actions {
    gap: 6px !important;
  }

  .couple-place-plan,
  .couple-place-visited,
  .couple-place-link {
    font-size: 9px !important;

    padding-left: 9px !important;
    padding-right: 9px !important;
  }

}


/* =========================================================
   NAMI — SMART SURPRISE
   ========================================================= */

.couple-surprise-sheet {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 5px 4px 8px;

  text-align: center;
}

.couple-surprise-orb {
  width: 64px;
  height: 64px;

  display: grid;
  place-items: center;

  margin-top: 2px;

  border-radius: 21px;
}

.couple-surprise-orb svg {
  width: 33px !important;
  height: 25px !important;
}

.couple-surprise-eyebrow {
  margin-top: 15px;

  color: #958aed;

  font-size: 9px;
  line-height: 1;

  font-weight: 900;
  letter-spacing: .13em;

  text-transform: uppercase;
}

.couple-surprise-sheet h2 {
  max-width: 310px;

  margin: 9px auto 0;

  color: var(--text);

  font-size: 24px;
  line-height: 1.08;

  font-weight: 900;
  letter-spacing: -.035em;
}

.couple-surprise-sheet p {
  max-width: 275px;

  margin: 9px auto 18px;

  color: var(--muted);

  font-size: 10.5px;
  line-height: 1.4;
}

.couple-surprise-plan {
  width: 100%;

  min-height: 50px !important;

  display: flex !important;
  align-items: center;
  justify-content: center;

  gap: 7px;

  border-radius: 17px !important;
}

.couple-surprise-again {
  width: 100%;

  min-height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  margin-top: 8px;

  border-radius: 15px;

  color: #a096ef;

  font-size: 11px;
  font-weight: 850;
}


/* LIGHT */

html:not([data-svoi-theme="dark"])
.couple-surprise-orb {
  background:
    linear-gradient(
      145deg,
      rgba(247,215,224,.80),
      rgba(216,227,253,.82)
    );

  border:
    1px solid rgba(255,255,255,.84);

  box-shadow:
    0 10px 28px rgba(100,86,174,.08);
}

html:not([data-svoi-theme="dark"])
.couple-surprise-again {
  background:
    rgba(237,232,252,.66);

  border:
    1px solid rgba(255,255,255,.70);
}


/* DARK */

html[data-svoi-theme="dark"]
.couple-surprise-orb {
  background:
    linear-gradient(
      145deg,
      rgba(105,71,122,.27),
      rgba(65,73,151,.28)
    );

  border:
    1px solid rgba(137,129,220,.15);

  box-shadow:
    0 10px 28px rgba(0,0,0,.15);
}

html[data-svoi-theme="dark"]
.couple-surprise-again {
  background:
    rgba(107,98,201,.11);

  border:
    1px solid rgba(132,125,215,.11);
}


/* =========================================================
   NAMI — CHECK-IN V2
   ========================================================= */

.checkin-v2 {
  padding-bottom:
    calc(
      190px +
      env(safe-area-inset-bottom)
    );
}


/* HEADER */

.checkin-v2-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:14px;

  margin:
    18px 0 14px;
}

.checkin-v2-head small {
  display:block;

  margin-bottom:5px;

  color:#9489e8;

  font-size:8px;
  font-weight:900;
  letter-spacing:.15em;
}

.checkin-v2-head h1 {
  margin:0;

  color:var(--text);

  font-size:29px;
  line-height:1;

  font-weight:900;
  letter-spacing:-.04em;
}

.checkin-v2-add {
  height:38px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:6px;

  padding:0 11px;

  border-radius:13px;

  color:#9e94ef;

  font-size:10px;
  font-weight:850;
}


/* TODAY INSIGHT */

.checkin-insight {
  display:grid;

  grid-template-columns:
    43px minmax(0,1fr);

  gap:11px;

  padding:13px;

  border-radius:21px;
}

.checkin-insight-mark {
  width:43px;
  height:43px;

  display:grid;
  place-items:center;

  border-radius:14px;
}

.checkin-insight-mark svg {
  width:28px !important;
  height:20px !important;
}

.checkin-insight-copy small {
  color:#9489e8;

  font-size:7.5px;
  line-height:1;

  font-weight:900;
  letter-spacing:.14em;
}

.checkin-insight-copy h2 {
  margin:
    5px 0 0;

  color:var(--text);

  font-size:17px;
  line-height:1.1;

  font-weight:900;
  letter-spacing:-.025em;
}

.checkin-insight-copy p {
  margin:
    5px 0 0;

  color:var(--muted);

  font-size:9.5px;
  line-height:1.38;
}


/* TODAY CARDS */

.checkin-today-grid {
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:9px;

  margin-top:9px;
}

.checkin-today-person,
.checkin-waiting-card {
  min-height:145px;

  padding:11px;

  border-radius:20px;
}

.checkin-today-person {
  position:relative;
}

.checkin-today-person-head {
  display:grid;

  grid-template-columns:
    34px minmax(0,1fr);

  gap:8px;

  align-items:center;
}

.checkin-v2-avatar {
  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border-radius:11px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #e68c98,
      #7d78d8
    );

  font-size:13px;
  font-weight:900;
}

.checkin-v2-person-copy {
  min-width:0;

  display:flex;
  flex-direction:column;
}

.checkin-v2-person-copy b {
  overflow:hidden;

  color:var(--text);

  font-size:11px;
  font-weight:850;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.checkin-v2-person-copy small {
  margin-top:2px;

  color:var(--muted);

  font-size:8px;
}

/* =========================================================
   NAMI — CHECK-IN V2
   PART 1/3
   header + today
   ========================================================= */

.page:has(.checkin-v2-head) {
  padding-bottom:
    calc(
      180px +
      env(safe-area-inset-bottom)
    ) !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.checkin-v2-head {
  display: grid;

  grid-template-columns:
    42px minmax(0,1fr) 42px;

  align-items: center;

  gap: 10px;

  margin:
    17px 0 14px;
}

.checkin-v2-head > div {
  min-width: 0;
}

.checkin-v2-head small {
  color: #9389e9;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .14em;
}

.checkin-v2-head h1 {
  margin: 3px 0 0;

  color: var(--text);

  font-size: 25px;
  line-height: 1;

  font-weight: 900;

  letter-spacing: -.035em;
}


/* =========================================================
   TODAY
   ========================================================= */

.checkin-v2-today {
  display: grid;

  grid-template-columns:
    42px minmax(0,1fr);

  gap: 11px;

  padding: 13px;

  border-radius: 22px;
}

.checkin-v2-today-mark {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 14px;

  color: #9186ed;
}

.checkin-v2-today-copy {
  min-width: 0;
}

.checkin-v2-today-copy > small {
  color: #9389e9;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .13em;
}

.checkin-v2-today-copy h2 {
  margin: 5px 0 0;

  color: var(--text);

  font-size: 17px;
  line-height: 1.12;

  font-weight: 900;

  letter-spacing: -.025em;
}

.checkin-v2-today-copy p {
  margin: 5px 0 0;

  color: var(--muted);

  font-size: 9.5px;
  line-height: 1.35;
}


/* =========================================================
   TODAY PEOPLE
   ========================================================= */

.checkin-v2-today-people {
  grid-column:
    1 / -1;

  display: flex;
  flex-direction: column;

  gap: 6px;

  margin-top: 2px;
}

.checkin-v2-person-row {
  min-height: 38px;

  display: grid;

  grid-template-columns:
    minmax(75px,auto)
    8px
    auto
    minmax(0,1fr);

  align-items: center;

  gap: 7px;

  padding:
    7px 9px;

  border-radius: 12px;
}

.checkin-v2-person-name {
  color: var(--text);

  font-size: 10px;
  font-weight: 850;
}

.checkin-v2-person-row > b {
  color: var(--text);

  font-size: 9.5px;
  font-weight: 800;
}

.checkin-v2-person-row > small {
  overflow: hidden;

  color: var(--muted);

  font-size: 9px;

  text-align: right;

  white-space: nowrap;
  text-overflow: ellipsis;
}


/* =========================================================
   MOOD DOTS
   ========================================================= */

.checkin-v2-mood-dot,
.checkin-v2-history-mood i {
  width: 7px;
  height: 7px;

  display: inline-block;

  border-radius: 50%;
}

[data-mood-score="1"] {
  background: #c8899b;
}

[data-mood-score="2"] {
  background: #c49c9f;
}

[data-mood-score="3"] {
  background: #aaa0d7;
}

[data-mood-score="4"] {
  background: #879bd7;
}

[data-mood-score="5"] {
  background: #7b91df;
}


/* =========================================================
   MAIN BUTTON
   ========================================================= */

.checkin-v2-main-action {
  grid-column:
    1 / -1;

  min-height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  margin-top: 2px;

  border-radius: 14px;

  color: #fff;

  font-size: 10.5px;
  font-weight: 850;

  background:
    linear-gradient(
      135deg,
      #7a70df,
      #6884df
    );

  box-shadow:
    0 6px 16px
    rgba(89,90,190,.15);
}


/* LIGHT */

html:not([data-svoi-theme="dark"])
.checkin-v2-today {
  background:
    rgba(255,255,255,.53);

  border:
    1px solid
    rgba(255,255,255,.78);
}

html:not([data-svoi-theme="dark"])
.checkin-v2-today-mark {
  background:
    linear-gradient(
      145deg,
      rgba(239,221,252,.72),
      rgba(218,229,253,.76)
    );
}

html:not([data-svoi-theme="dark"])
.checkin-v2-person-row {
  background:
    rgba(236,232,251,.57);
}


/* DARK */

html[data-svoi-theme="dark"]
.checkin-v2-today {
  background:
    linear-gradient(
      145deg,
      #1d253d,
      #181f35
    );

  border:
    1px solid
    rgba(119,126,211,.14);
}

html[data-svoi-theme="dark"]
.checkin-v2-today-mark {
  background:
    rgba(108,98,207,.13);

  border:
    1px solid
    rgba(136,128,221,.12);
}

html[data-svoi-theme="dark"]
.checkin-v2-person-row {
  background:
    rgba(108,99,194,.10);
}


/* =========================================================
   NAMI — CHECK-IN V2
   PART 2/3
   history
   ========================================================= */


/* =========================================================
   SECTION HEAD
   ========================================================= */

.checkin-v2-section-head {
  margin:
    19px 3px 9px;
}

.checkin-v2-section-head small {
  color: var(--muted);

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .13em;
}

.checkin-v2-section-head h2 {
  margin: 3px 0 0;

  color: var(--text);

  font-size: 19px;
  line-height: 1;

  font-weight: 900;
}


/* =========================================================
   HISTORY LIST
   ========================================================= */

.checkin-v2-history {
  display: flex;
  flex-direction: column;

  gap: 8px;
}

.checkin-v2-history-card {
  position: relative;

  padding: 12px;

  border-radius: 18px;
}


/* =========================================================
   HISTORY HEAD
   ========================================================= */

.checkin-v2-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 10px;
}

.checkin-v2-history-head > div {
  display: flex;
  flex-direction: column;
}

.checkin-v2-history-head b {
  color: var(--text);

  font-size: 12px;
  font-weight: 850;
}

.checkin-v2-history-head small {
  margin-top: 3px;

  color: var(--muted);

  font-size: 8.5px;
}


/* mood badge */

.checkin-v2-history-mood {
  min-height: 27px;

  display: inline-flex;
  align-items: center;

  gap: 6px;

  padding: 0 8px;

  border-radius: 999px;

  color: var(--text);

  font-size: 9px;
  font-weight: 800;
}


/* =========================================================
   NEED
   ========================================================= */

.checkin-v2-need {
  display: flex;
  align-items: center;

  gap: 7px;

  margin-top: 9px;
}

.checkin-v2-need small {
  color: var(--muted);

  font-size: 8.5px;
}

.checkin-v2-need b {
  color: #9489e9;

  font-size: 9.5px;
  font-weight: 850;
}


/* =========================================================
   MESSAGE
   ========================================================= */

.checkin-v2-message {
  margin:
    9px 0 0;

  padding:
    9px 10px;

  border-radius: 12px;

  color: var(--text);

  font-size: 10px;
  line-height: 1.4;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.checkin-v2-actions {
  display: flex;
  justify-content: flex-end;

  gap: 5px;

  margin-top: 8px;
}

.checkin-v2-actions button {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  color: var(--muted);
}


/* =========================================================
   EMPTY
   ========================================================= */

.checkin-v2-history-empty {
  padding: 24px;

  border-radius: 18px;

  color: var(--muted);

  font-size: 10px;

  text-align: center;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
.checkin-v2-history-card,
html:not([data-svoi-theme="dark"])
.checkin-v2-history-empty {
  background:
    rgba(255,255,255,.53);

  border:
    1px solid
    rgba(255,255,255,.78);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.86);
}

html:not([data-svoi-theme="dark"])
.checkin-v2-history-mood,
html:not([data-svoi-theme="dark"])
.checkin-v2-message,
html:not([data-svoi-theme="dark"])
.checkin-v2-actions button {
  background:
    rgba(236,232,251,.57);
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
.checkin-v2-history-card,
html[data-svoi-theme="dark"]
.checkin-v2-history-empty {
  background:
    linear-gradient(
      145deg,
      #1d253d,
      #181f35
    );

  border:
    1px solid
    rgba(119,126,211,.14);
}

html[data-svoi-theme="dark"]
.checkin-v2-history-mood,
html[data-svoi-theme="dark"]
.checkin-v2-message,
html[data-svoi-theme="dark"]
.checkin-v2-actions button {
  background:
    rgba(108,99,194,.10);
}


/* =========================================================
   SMALL IPHONE
   ========================================================= */

@media (max-width: 380px) {

  .checkin-v2-history-card {
    padding: 11px;
  }

  .checkin-v2-history-head {
    gap: 7px;
  }

  .checkin-v2-history-mood {
    font-size: 8.5px;
  }

}


/* =========================================================
   NAMI — CHECK-IN V2
   PART 2/3
   history
   ========================================================= */


/* =========================================================
   SECTION HEADER
   ========================================================= */

.checkin-v2-section-head {
  margin:
    19px 3px 9px;
}

.checkin-v2-section-head small {
  color: var(--muted);

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .13em;
}

.checkin-v2-section-head h2 {
  margin: 3px 0 0;

  color: var(--text);

  font-size: 19px;
  line-height: 1;

  font-weight: 900;

  letter-spacing: -.025em;
}


/* =========================================================
   HISTORY LIST
   ========================================================= */

.checkin-v2-history {
  display: flex;
  flex-direction: column;

  gap: 8px;
}


/* =========================================================
   HISTORY CARD
   ========================================================= */

.checkin-v2-history-card {
  position: relative;

  padding: 12px;

  border-radius: 18px;
}


.checkin-v2-history-head {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 10px;
}


.checkin-v2-history-head > div {
  min-width: 0;

  display: flex;
  flex-direction: column;
}


.checkin-v2-history-head b {
  color: var(--text);

  font-size: 12px;
  line-height: 1.1;

  font-weight: 850;
}


.checkin-v2-history-head small {
  margin-top: 4px;

  color: var(--muted);

  font-size: 8.5px;
  line-height: 1;
}


/* =========================================================
   MOOD BADGE
   ========================================================= */

.checkin-v2-history-mood {
  min-height: 27px;

  display: inline-flex;
  align-items: center;

  gap: 6px;

  flex: 0 0 auto;

  padding: 0 8px;

  border-radius: 999px;

  color: var(--text);

  font-size: 9px;
  line-height: 1;

  font-weight: 800;
}


/* =========================================================
   NEED
   ========================================================= */

.checkin-v2-need {
  display: flex;
  align-items: center;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 10px;
}


.checkin-v2-need small {
  color: var(--muted);

  font-size: 8.5px;
  line-height: 1;
}


.checkin-v2-need b {
  min-height: 25px;

  display: inline-flex;
  align-items: center;

  padding: 0 8px;

  border-radius: 999px;

  color: #978ced;

  font-size: 9px;
  line-height: 1;

  font-weight: 850;
}


/* =========================================================
   MESSAGE
   ========================================================= */

.checkin-v2-message {
  margin:
    9px 0 0;

  padding:
    9px 10px;

  border-radius: 12px;

  color: var(--text);

  font-size: 10px;
  line-height: 1.4;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.checkin-v2-actions {
  display: flex;

  justify-content: flex-end;

  gap: 5px;

  margin-top: 8px;
}


.checkin-v2-actions button {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  padding: 0;

  border-radius: 9px;

  color: var(--muted);
}


/* delete slightly different */

.checkin-v2-actions button:last-child {
  color: #c17786;
}


/* =========================================================
   EMPTY HISTORY
   ========================================================= */

.checkin-v2-history-empty {
  min-height: 90px;

  display: grid;
  place-items: center;

  padding: 20px;

  border-radius: 18px;

  color: var(--muted);

  font-size: 10px;
  line-height: 1.35;

  text-align: center;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
.checkin-v2-history-card,
html:not([data-svoi-theme="dark"])
.checkin-v2-history-empty {
  background:
    rgba(255,255,255,.53);

  border:
    1px solid rgba(255,255,255,.78);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86);
}


html:not([data-svoi-theme="dark"])
.checkin-v2-history-mood {
  background:
    rgba(236,232,251,.62);
}


html:not([data-svoi-theme="dark"])
.checkin-v2-need b {
  background:
    rgba(231,224,252,.66);
}


html:not([data-svoi-theme="dark"])
.checkin-v2-message {
  background:
    rgba(247,246,253,.70);

  border:
    1px solid rgba(255,255,255,.67);
}


html:not([data-svoi-theme="dark"])
.checkin-v2-actions button {
  background:
    rgba(235,231,250,.62);
}


html:not([data-svoi-theme="dark"])
.checkin-v2-actions button:last-child {
  background:
    rgba(255,231,235,.72);
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
.checkin-v2-history-card,
html[data-svoi-theme="dark"]
.checkin-v2-history-empty {
  background:
    linear-gradient(
      145deg,
      #1d253d,
      #181f35
    );

  border:
    1px solid rgba(119,126,211,.14);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03);
}


html[data-svoi-theme="dark"]
.checkin-v2-history-mood {
  background:
    rgba(108,99,194,.11);
}


html[data-svoi-theme="dark"]
.checkin-v2-need b {
  color: #afa6ff;

  background:
    rgba(109,99,207,.13);
}


html[data-svoi-theme="dark"]
.checkin-v2-message {
  background:
    rgba(11,17,32,.28);

  border:
    1px solid rgba(119,126,211,.08);
}


html[data-svoi-theme="dark"]
.checkin-v2-actions button {
  background:
    rgba(108,99,194,.10);
}


html[data-svoi-theme="dark"]
.checkin-v2-actions button:last-child {
  background:
    rgba(123,58,72,.20);
}


/* =========================================================
   SMALL IPHONE
   ========================================================= */

@media (max-width: 380px) {

  .checkin-v2-history-card {
    padding: 11px;
  }

  .checkin-v2-history-mood {
    padding:
      0 7px;

    font-size: 8.5px;
  }

}


/* =========================================================
   NAMI — CHECK-IN V2
   PART 3/3
   form
   ========================================================= */

.checkin-v2-form {
  display: flex;
  flex-direction: column;

  gap: 14px;
}


/* INTRO */

.checkin-v2-form-intro,
.checkin-v2-form-label {
  display: flex;
  flex-direction: column;
}

.checkin-v2-form-intro b,
.checkin-v2-form-label b {
  color: var(--text);

  font-size: 13px;
  font-weight: 850;
}

.checkin-v2-form-intro small,
.checkin-v2-form-label small {
  margin-top: 4px;

  color: var(--muted);

  font-size: 9.5px;
  line-height: 1.35;
}


/* =========================================================
   MOOD 1–5
   ========================================================= */

.checkin-v2-mood-grid {
  display: grid;

  grid-template-columns:
    repeat(5,minmax(0,1fr));

  gap: 6px;
}

.checkin-v2-mood-choice {
  min-width: 0;
  height: 70px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 5px 2px;

  border-radius: 15px;

  transition:
    transform .14s ease,
    border-color .14s ease,
    background .14s ease;
}

.checkin-v2-mood-choice:active {
  transform: scale(.97);
}

.checkin-v2-mood-choice > span {
  width: 27px;
  height: 27px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: var(--text);

  font-size: 11px;
  font-weight: 900;
}

.checkin-v2-mood-choice small {
  width: 100%;

  overflow: hidden;

  color: var(--muted);

  font-size: 7.5px;
  font-weight: 750;

  white-space: nowrap;
  text-overflow: ellipsis;

  text-align: center;
}

.checkin-v2-mood-choice.selected {
  border-color:
    rgba(127,116,222,.45) !important;
}

.checkin-v2-mood-choice.selected > span {
  color: #fff;

  background:
    linear-gradient(
      135deg,
      #7a70df,
      #6884df
    ) !important;
}


/* =========================================================
   NEEDS
   ========================================================= */

.checkin-v2-form-section {
  display: flex;
  flex-direction: column;

  gap: 9px;
}

.checkin-v2-needs {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 7px;
}

.checkin-v2-needs button {
  min-height: 42px;

  padding: 0 9px;

  border-radius: 13px;

  color: var(--text);

  font-size: 9.5px;
  font-weight: 800;

  transition:
    transform .14s ease,
    background .14s ease,
    border-color .14s ease;
}

.checkin-v2-needs button:active {
  transform: scale(.98);
}

.checkin-v2-needs button.selected {
  color: #766bd8;

  border-color:
    rgba(127,116,222,.38) !important;
}


/* =========================================================
   NOTE
   ========================================================= */

.checkin-v2-note {
  margin: 0 !important;
}

.checkin-v2-note > span {
  display: block;

  margin:
    0 0 6px 3px !important;

  color: var(--muted);

  font-size: 10px;
  font-weight: 850;
}

.checkin-v2-note > span small {
  margin-left: 4px;

  font-size: 8.5px;
  font-weight: 650;

  opacity: .7;
}

.checkin-v2-note textarea {
  width: 100%;

  min-height: 80px !important;

  padding: 11px 12px !important;

  border-radius: 16px !important;

  resize: none !important;

  color: var(--text) !important;

  font-size: 12px !important;
  line-height: 1.4 !important;
}


/* =========================================================
   SAVE
   ========================================================= */

.checkin-v2-save {
  min-height: 50px !important;

  margin-top: 1px !important;

  border-radius: 16px !important;

  font-size: 13px !important;
  font-weight: 850 !important;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
.checkin-v2-mood-choice,
html:not([data-svoi-theme="dark"])
.checkin-v2-needs button {
  background:
    rgba(255,255,255,.55);

  border:
    1px solid rgba(255,255,255,.80);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88);
}

html:not([data-svoi-theme="dark"])
.checkin-v2-mood-choice > span {
  background:
    rgba(230,225,248,.68);
}

html:not([data-svoi-theme="dark"])
.checkin-v2-needs button.selected {
  background:
    rgba(229,222,252,.78);
}

html:not([data-svoi-theme="dark"])
.checkin-v2-note textarea {
  background:
    rgba(255,255,255,.60) !important;

  border:
    1px solid rgba(255,255,255,.82) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86) !important;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
.checkin-v2-mood-choice,
html[data-svoi-theme="dark"]
.checkin-v2-needs button {
  background:
    linear-gradient(
      145deg,
      #202841,
      #1a2137
    );

  border:
    1px solid rgba(119,126,211,.14);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03);
}

html[data-svoi-theme="dark"]
.checkin-v2-mood-choice > span {
  background:
    rgba(106,99,180,.16);
}

html[data-svoi-theme="dark"]
.checkin-v2-needs button.selected {
  color: #ada3ff;

  background:
    rgba(111,100,215,.17);
}

html[data-svoi-theme="dark"]
.checkin-v2-note textarea {
  background:
    #171e32 !important;

  border:
    1px solid rgba(119,126,211,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}


/* =========================================================
   SMALL IPHONE
   ========================================================= */

@media (max-width: 380px) {

  .checkin-v2-form {
    gap: 12px;
  }

  .checkin-v2-mood-grid {
    gap: 5px;
  }

  .checkin-v2-mood-choice {
    height: 64px;
  }

  .checkin-v2-mood-choice > span {
    width: 25px;
    height: 25px;
  }

  .checkin-v2-mood-choice small {
    font-size: 7px;
  }

  .checkin-v2-needs {
    gap: 6px;
  }

  .checkin-v2-needs button {
    min-height: 39px;
  }

}


/* =========================================================
   NAMI — CHECK-IN REAL LAYOUT FIX
   ========================================================= */

.checkin-v2 {
  width:100%;
}


/* HEADER */

.checkin-v2-head {
  width:100% !important;

  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;

  align-items:center !important;

  gap:12px !important;

  margin:18px 0 14px !important;
}

.checkin-v2-head > div {
  min-width:0 !important;
}

.checkin-v2-head small {
  display:block !important;

  margin:0 0 4px !important;

  color:#9389e9 !important;

  font-size:8px !important;
  line-height:1 !important;

  font-weight:900 !important;
  letter-spacing:.14em !important;
}

.checkin-v2-head h1 {
  margin:0 !important;

  color:var(--text) !important;

  font-size:28px !important;
  line-height:1 !important;

  font-weight:900 !important;
  letter-spacing:-.035em !important;

  white-space:nowrap !important;
}


/* ANSWER BUTTON */

.checkin-v2-add {
  width:auto !important;
  min-width:0 !important;

  height:42px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  gap:6px !important;

  flex:none !important;

  padding:0 13px !important;

  margin:0 !important;

  border-radius:14px !important;

  color:#9a90ed !important;

  font-size:10px !important;
  font-weight:850 !important;
}

.checkin-v2-add span {
  white-space:nowrap !important;
}


/* =========================================================
   FIRST CHECK-IN CARD
   ========================================================= */

.checkin-start-card {
  display:grid !important;

  grid-template-columns:48px minmax(0,1fr) !important;

  align-items:center !important;

  gap:12px !important;

  padding:14px !important;

  margin:0 !important;

  border-radius:22px !important;
}


.checkin-start-mark {
  width:48px !important;
  height:48px !important;

  display:grid !important;
  place-items:center !important;

  margin:0 !important;

  border-radius:16px !important;
}

.checkin-start-mark svg {
  width:31px !important;
  height:23px !important;
}


.checkin-start-card > div {
  min-width:0 !important;
}


.checkin-start-card small {
  display:block !important;

  margin:0 0 5px !important;

  color:#9389e9 !important;

  font-size:8px !important;
  line-height:1 !important;

  font-weight:900 !important;
  letter-spacing:.13em !important;
}


.checkin-start-card h2 {
  margin:0 !important;

  color:var(--text) !important;

  font-size:18px !important;
  line-height:1.1 !important;

  font-weight:900 !important;
  letter-spacing:-.025em !important;
}


.checkin-start-card p {
  margin:6px 0 0 !important;

  max-width:310px !important;

  color:var(--muted) !important;

  font-size:10px !important;
  line-height:1.35 !important;
}


/* main button inside card */

.checkin-start-card > .primary {
  grid-column:1 / -1 !important;

  width:100% !important;

  min-height:44px !important;

  margin:1px 0 0 !important;

  border-radius:14px !important;

  font-size:11px !important;
  font-weight:850 !important;
}


/* =========================================================
   INSIGHT — WHEN CHECK-IN EXISTS
   ========================================================= */

.checkin-insight {
  display:grid !important;

  grid-template-columns:46px minmax(0,1fr) !important;

  gap:11px !important;

  padding:13px !important;

  border-radius:22px !important;
}


.checkin-insight-mark {
  width:46px !important;
  height:46px !important;

  display:grid !important;
  place-items:center !important;

  border-radius:15px !important;
}


.checkin-insight-copy {
  min-width:0 !important;
}


.checkin-insight-copy > small {
  display:block !important;

  margin-bottom:5px !important;

  color:#9389e9 !important;

  font-size:8px !important;

  font-weight:900 !important;
  letter-spacing:.13em !important;
}


.checkin-insight-copy h2 {
  margin:0 !important;

  color:var(--text) !important;

  font-size:17px !important;
  line-height:1.12 !important;

  font-weight:900 !important;
}


.checkin-insight-copy p {
  margin:5px 0 0 !important;

  color:var(--muted) !important;

  font-size:9.5px !important;
  line-height:1.35 !important;
}


/* =========================================================
   HISTORY
   ========================================================= */

.checkin-history-head {
  margin:20px 3px 9px !important;
}

.checkin-history-head h2 {
  margin:0 !important;

  color:var(--text) !important;

  font-size:20px !important;
  line-height:1 !important;

  font-weight:900 !important;
  letter-spacing:-.025em !important;
}


.checkin-history-list {
  display:flex !important;
  flex-direction:column !important;

  gap:8px !important;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
.checkin-v2-add,
html:not([data-svoi-theme="dark"])
.checkin-start-card,
html:not([data-svoi-theme="dark"])
.checkin-insight {
  background:
    rgba(255,255,255,.55) !important;

  border:
    1px solid rgba(255,255,255,.80) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}


html:not([data-svoi-theme="dark"])
.checkin-start-mark,
html:not([data-svoi-theme="dark"])
.checkin-insight-mark {
  background:
    linear-gradient(
      145deg,
      rgba(246,218,226,.76),
      rgba(218,229,253,.80)
    ) !important;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
.checkin-v2-add,
html[data-svoi-theme="dark"]
.checkin-start-card,
html[data-svoi-theme="dark"]
.checkin-insight {
  background:
    linear-gradient(
      145deg,
      #1d253d,
      #181f35
    ) !important;

  border:
    1px solid rgba(119,126,211,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03) !important;
}


html[data-svoi-theme="dark"]
.checkin-start-mark,
html[data-svoi-theme="dark"]
.checkin-insight-mark {
  background:
    linear-gradient(
      145deg,
      rgba(108,72,122,.26),
      rgba(65,73,150,.27)
    ) !important;

  border:
    1px solid rgba(137,129,220,.13) !important;
}


/* SMALL IPHONE */

@media (max-width:380px) {

  .checkin-v2-head h1 {
    font-size:25px !important;
  }

  .checkin-v2-add {
    height:40px !important;

    padding:0 11px !important;
  }

  .checkin-start-card {
    grid-template-columns:
      44px minmax(0,1fr) !important;

    gap:10px !important;

    padding:12px !important;
  }

  .checkin-start-mark {
    width:44px !important;
    height:44px !important;
  }

}


/* NAMI_REMOVE_STORY_ICON_V1 */

html body #app
.page:has(.couple-room-head)
.couple-story-card {
  grid-template-columns:
    minmax(0, 1fr) 20px !important;

  gap: 12px !important;
}

html body #app
.page:has(.couple-room-head)
.couple-story-mark {
  display: none !important;
}

html body #app
.page:has(.couple-room-head)
.couple-story-content {
  grid-column: 1 !important;
  min-width: 0 !important;
}

html body #app
.page:has(.couple-room-head)
.couple-story-chevron {
  grid-column: 2 !important;
}


/* NAMI_REMOVE_STORY_ICON_V2 */

.couple-story-card {
  grid-template-columns: minmax(0, 1fr) 28px !important;
  gap: 12px !important;
}

.couple-story-card .couple-story-mark {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.couple-story-card .couple-story-content {
  grid-column: 1 !important;
  min-width: 0 !important;
}

.couple-story-card .couple-story-chevron {
  grid-column: 2 !important;
}


/* =========================================================
   NAMI — COUPLE STORY PREMIUM V5
   Только карточка "Наша история"
   ========================================================= */

#app .couple-story-card {
  position: relative !important;
  overflow: hidden !important;

  padding: 26px 54px 26px 28px !important;

  border-radius: 30px !important;
  border: 1px solid rgba(255,255,255,.82) !important;

  background:
    radial-gradient(
      circle at 92% 12%,
      rgba(113,161,255,.16),
      transparent 34%
    ),
    radial-gradient(
      circle at 8% 90%,
      rgba(224,126,218,.12),
      transparent 32%
    ),
    rgba(255,255,255,.58) !important;

  box-shadow:
    0 18px 42px rgba(95,91,160,.10),
    inset 0 1px 0 rgba(255,255,255,.96) !important;

  backdrop-filter:
    blur(24px)
    saturate(135%) !important;

  -webkit-backdrop-filter:
    blur(24px)
    saturate(135%) !important;
}


/* мягкая фирменная полоса слева */
#app .couple-story-card::before {
  content: "" !important;

  position: absolute !important;
  left: 0 !important;
  top: 34px !important;
  bottom: 34px !important;

  width: 4px !important;

  border-radius: 0 999px 999px 0 !important;

  background:
    linear-gradient(
      180deg,
      #ff8e9f 0%,
      #9a78ee 48%,
      #6398f1 100%
    ) !important;

  box-shadow:
    0 0 20px rgba(137,112,233,.30) !important;
}


/* лёгкое свечение */
#app .couple-story-card::after {
  content: "" !important;

  position: absolute !important;

  width: 170px !important;
  height: 170px !important;

  right: -70px !important;
  top: -80px !important;

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle,
      rgba(126,150,255,.18) 0%,
      rgba(205,122,225,.08) 40%,
      transparent 72%
    ) !important;

  pointer-events: none !important;
}


/* содержимое поверх декоративных слоёв */
#app .couple-story-card .couple-story-content {
  position: relative !important;
  z-index: 2 !important;

  display: flex !important;
  flex-direction: column !important;

  gap: 11px !important;

  width: 100% !important;
  max-width: none !important;
}


/* НАША ИСТОРИЯ */
#app .couple-story-card
.couple-story-content > :first-child {
  margin: 0 0 3px !important;

  font-size: 11px !important;
  line-height: 1 !important;

  font-weight: 800 !important;

  letter-spacing: .22em !important;

  color: #7f8092 !important;
}


/* Заголовок */
#app .couple-story-card strong {
  font-size: 23px !important;
  line-height: 1.12 !important;

  letter-spacing: -.035em !important;

  color: #141521 !important;
}


/* все информационные плашки */
#app .couple-story-card
.couple-story-content > span:not(:first-child) {
  position: relative !important;

  display: flex !important;
  align-items: center !important;

  min-height: 44px !important;

  padding: 11px 16px !important;

  border-radius: 17px !important;

  border:
    1px solid rgba(255,255,255,.74) !important;

  background:
    linear-gradient(
      135deg,
      rgba(236,228,255,.76),
      rgba(231,241,255,.70)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82) !important;

  font-size: 14px !important;
  line-height: 1.25 !important;

  font-weight: 700 !important;

  color: #6966aa !important;
}


/* чуть выделяем семейный статус */
#app .couple-story-card
.couple-story-marriage {
  background:
    linear-gradient(
      135deg,
      rgba(246,231,250,.82),
      rgba(230,237,255,.78)
    ) !important;
}


/* стрелка справа */
#app .couple-story-card
.couple-story-chevron {
  z-index: 3 !important;

  right: 19px !important;

  width: 32px !important;
  height: 32px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 50% !important;

  background:
    rgba(255,255,255,.48) !important;

  border:
    1px solid rgba(255,255,255,.68) !important;

  color: #9a91c9 !important;

  box-shadow:
    0 6px 16px rgba(91,87,143,.08) !important;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
#app .couple-story-card {

  border:
    1px solid rgba(143,158,224,.18) !important;

  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(73,108,212,.18),
      transparent 34%
    ),
    radial-gradient(
      circle at 5% 95%,
      rgba(166,81,199,.13),
      transparent 34%
    ),
    rgba(18,23,42,.76) !important;

  box-shadow:
    0 22px 50px rgba(0,0,0,.27),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}


html[data-svoi-theme="dark"]
#app .couple-story-card
.couple-story-content > :first-child {
  color: #9098ae !important;
}


html[data-svoi-theme="dark"]
#app .couple-story-card strong {
  color: #f5f6fb !important;
}


html[data-svoi-theme="dark"]
#app .couple-story-card
.couple-story-content > span:not(:first-child) {

  border:
    1px solid rgba(132,142,205,.13) !important;

  background:
    linear-gradient(
      135deg,
      rgba(77,66,139,.28),
      rgba(48,75,129,.24)
    ) !important;

  color: #b5afe9 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}


html[data-svoi-theme="dark"]
#app .couple-story-card
.couple-story-chevron {

  background:
    rgba(69,77,119,.22) !important;

  border:
    1px solid rgba(135,145,207,.16) !important;

  color: #aaa7d8 !important;
}


/* =========================================================
   NAMI — COUPLE HOME FINAL POLISH V6
   Главная пространства "Пара"
   ========================================================= */


/* ---------- НИЖНИЙ SAFE AREA ---------- */

#app .space-couple,
#app .page:has(.couple-room-head) {
  padding-bottom:
    calc(
      var(--nav-h, 96px)
      + env(safe-area-inset-bottom)
      + 115px
    ) !important;

  scroll-padding-bottom:
    calc(
      var(--nav-h, 96px)
      + env(safe-area-inset-bottom)
      + 115px
    ) !important;
}


/* =========================================================
   НАША ИСТОРИЯ — компактнее и чище
   ========================================================= */

#app .couple-story-card {
  min-height: 0 !important;

  padding:
    22px 52px 22px 26px !important;

  border-radius: 30px !important;
}


/* полоска слева чуть деликатнее */

#app .couple-story-card::before {
  top: 27px !important;
  bottom: 27px !important;

  width: 3px !important;
}


/* меньше лишнего воздуха */

#app .couple-story-card
.couple-story-content {
  gap: 8px !important;
}


/* НАША ИСТОРИЯ */

#app .couple-story-card
.couple-story-content > :first-child {
  margin-bottom: 4px !important;

  font-size: 10px !important;
  line-height: 1.1 !important;

  letter-spacing: .23em !important;
}


/* основной заголовок */

#app .couple-story-card strong {
  margin-bottom: 8px !important;

  font-size: 22px !important;
  line-height: 1.08 !important;
}


/* три строки истории */

#app .couple-story-card
.couple-story-content > span:not(:first-child) {
  min-height: 40px !important;

  padding:
    9px 14px !important;

  border-radius: 15px !important;

  font-size: 13.5px !important;
  line-height: 1.22 !important;
}


/* стрелка */

#app .couple-story-card
.couple-story-chevron {
  right: 16px !important;

  width: 34px !important;
  height: 34px !important;

  transition:
    transform .18s ease,
    background .18s ease !important;
}


#app .couple-story-card:active
.couple-story-chevron {
  transform:
    translateY(-50%)
    translateX(2px) !important;
}


/* =========================================================
   БЫСТРЫЕ ДЕЙСТВИЯ
   Свидание / Новая дата / Сюрприз
   ========================================================= */

#app .couple-quick-actions {
  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap: 10px !important;

  margin-top: 12px !important;
  margin-bottom: 14px !important;
}


#app .couple-quick-actions > * {
  min-width: 0 !important;
  min-height: 96px !important;

  padding:
    15px 8px 13px !important;

  border-radius: 25px !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 9px !important;

  border:
    1px solid rgba(255,255,255,.78) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.72),
      rgba(244,244,255,.52)
    ) !important;

  box-shadow:
    0 12px 28px rgba(85,83,145,.07),
    inset 0 1px 0 rgba(255,255,255,.90) !important;

  backdrop-filter:
    blur(20px)
    saturate(135%) !important;

  -webkit-backdrop-filter:
    blur(20px)
    saturate(135%) !important;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease !important;
}


#app .couple-quick-actions > *:active {
  transform:
    scale(.965)
    translateY(1px) !important;

  box-shadow:
    0 5px 16px rgba(85,83,145,.08),
    inset 0 1px 0 rgba(255,255,255,.82) !important;
}


#app .couple-quick-actions svg {
  width: 24px !important;
  height: 24px !important;

  color: #8173df !important;
}


#app .couple-quick-actions b {
  font-size: 14px !important;
  line-height: 1.15 !important;

  font-weight: 760 !important;

  text-align: center !important;

  letter-spacing: -.015em !important;
}


/* =========================================================
   ОСНОВНАЯ СЕТКА
   Хотелки / Чек-ин / Цели / Воспоминания / ...
   ========================================================= */

#app .couple-feature-grid.couple-core-grid {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 12px !important;

  align-items: stretch !important;
}


#app .couple-feature-card {
  position: relative !important;

  min-width: 0 !important;
  min-height: 154px !important;

  padding:
    18px 18px 17px !important;

  border-radius: 29px !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: flex-start !important;

  border:
    1px solid rgba(255,255,255,.80) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.72),
      rgba(243,246,255,.55)
    ) !important;

  box-shadow:
    0 14px 32px rgba(85,83,145,.075),
    inset 0 1px 0 rgba(255,255,255,.92) !important;

  backdrop-filter:
    blur(22px)
    saturate(135%) !important;

  -webkit-backdrop-filter:
    blur(22px)
    saturate(135%) !important;

  overflow: hidden !important;

  transition:
    transform .17s cubic-bezier(.2,.8,.2,1),
    box-shadow .17s ease,
    border-color .17s ease !important;
}


/* едва заметный свет */

#app .couple-feature-card::after {
  content: "" !important;

  position: absolute !important;

  width: 100px !important;
  height: 100px !important;

  right: -45px !important;
  top: -50px !important;

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle,
      rgba(128,153,255,.10),
      transparent 68%
    ) !important;

  pointer-events: none !important;
}


#app .couple-feature-card:active {
  transform:
    scale(.975)
    translateY(1px) !important;

  box-shadow:
    0 7px 19px rgba(85,83,145,.08),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
}


/* иконки */

#app .couple-feature-card svg {
  width: 24px !important;
  height: 24px !important;
}


/* заголовок */

#app .couple-feature-card b {
  margin-top: auto !important;

  position: relative !important;
  z-index: 2 !important;

  font-size: 18px !important;
  line-height: 1.12 !important;

  font-weight: 780 !important;

  letter-spacing: -.025em !important;
}


/* описание */

#app .couple-feature-card small {
  position: relative !important;
  z-index: 2 !important;

  margin-top: 5px !important;

  font-size: 12.5px !important;
  line-height: 1.25 !important;

  color: #858694 !important;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
#app .couple-quick-actions > * {

  border:
    1px solid rgba(132,146,211,.16) !important;

  background:
    linear-gradient(
      145deg,
      rgba(27,34,62,.82),
      rgba(20,27,49,.72)
    ) !important;

  box-shadow:
    0 14px 32px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}


html[data-svoi-theme="dark"]
#app .couple-quick-actions svg {
  color: #9584f2 !important;
}


html[data-svoi-theme="dark"]
#app .couple-feature-card {

  border:
    1px solid rgba(132,146,211,.15) !important;

  background:
    linear-gradient(
      145deg,
      rgba(27,34,61,.84),
      rgba(19,26,47,.76)
    ) !important;

  box-shadow:
    0 16px 36px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}


html[data-svoi-theme="dark"]
#app .couple-feature-card::after {
  background:
    radial-gradient(
      circle,
      rgba(116,107,236,.13),
      transparent 68%
    ) !important;
}


html[data-svoi-theme="dark"]
#app .couple-feature-card b {
  color: #f5f6fb !important;
}


html[data-svoi-theme="dark"]
#app .couple-feature-card small {
  color: #8f96ab !important;
}


/* =========================================================
   IPHONE — немного компактнее на узких экранах
   ========================================================= */

@media (max-width: 390px) {

  #app .couple-feature-grid.couple-core-grid {
    gap: 10px !important;
  }

  #app .couple-feature-card {
    min-height: 148px !important;

    padding:
      16px 15px !important;
  }

  #app .couple-feature-card b {
    font-size: 17px !important;
  }

  #app .couple-quick-actions {
    gap: 8px !important;
  }

  #app .couple-quick-actions > * {
    min-height: 90px !important;
  }
}


/* =========================================================
   NAMI — COUPLE HOME BOTTOM SPACE V7
   Последний ряд полностью выше нижней навигации
   ========================================================= */

#app .page:has(.couple-room-head)
.couple-feature-grid.couple-core-grid {
  margin-bottom:
    calc(
      var(--nav-h, 78px)
      + env(safe-area-inset-bottom)
      + 46px
    ) !important;
}


/* небольшой дополнительный запас для iPhone */
@media (max-width: 430px) {
  #app .page:has(.couple-room-head)
  .couple-feature-grid.couple-core-grid {
    margin-bottom:
      calc(
        var(--nav-h, 78px)
        + env(safe-area-inset-bottom)
        + 60px
      ) !important;
  }
}


/* =========================================================
   NAMI — OUR STORY PREMIUM V8
   ========================================================= */

#app .couple-story-card {
  position: relative !important;
  overflow: hidden !important;

  min-height: 0 !important;

  padding: 26px 24px 24px !important;

  border-radius: 32px !important;

  border:
    1px solid rgba(255,255,255,.88) !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(106,157,255,.17),
      transparent 39%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(238,137,195,.12),
      transparent 38%
    ),
    rgba(255,255,255,.60) !important;

  box-shadow:
    0 20px 50px rgba(86,82,142,.10),
    inset 0 1px 0 rgba(255,255,255,.96) !important;

  backdrop-filter:
    blur(26px)
    saturate(140%) !important;

  -webkit-backdrop-filter:
    blur(26px)
    saturate(140%) !important;
}


/* убираем старую вертикальную полоску */
#app .couple-story-card::before {
  content: none !important;
}


/* мягкое фирменное свечение */
#app .couple-story-card::after {
  content: "" !important;

  position: absolute !important;

  width: 220px !important;
  height: 220px !important;

  right: -100px !important;
  top: -120px !important;

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle,
      rgba(108,151,255,.19) 0%,
      rgba(157,117,235,.09) 42%,
      transparent 72%
    ) !important;

  pointer-events: none !important;
}


/* =========================================================
   CONTENT
   ========================================================= */

#app .couple-story-card
.couple-story-content {
  position: relative !important;
  z-index: 2 !important;

  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 10px !important;

  width: 100% !important;
}


/* НАША ИСТОРИЯ */
#app .couple-story-card
.couple-story-content > :first-child {
  grid-column: 1 / -1 !important;

  margin: 0 0 2px !important;

  font-size: 10px !important;
  line-height: 1 !important;

  font-weight: 850 !important;

  letter-spacing: .24em !important;

  text-transform: uppercase !important;

  color: #858897 !important;
}


/* 4 года вместе */
#app .couple-story-card strong {
  grid-column: 1 / -1 !important;

  margin: 4px 0 12px !important;

  font-size: 29px !important;
  line-height: 1.02 !important;

  font-weight: 820 !important;

  letter-spacing: -.045em !important;

  color: #141520 !important;
}


/* =========================================================
   ПЕРВАЯ ПЛАШКА — ГЛАВНЫЙ COUNTDOWN
   ========================================================= */

#app .couple-story-card
.couple-story-content > span:nth-of-type(2) {
  grid-column: 1 / -1 !important;

  min-height: 54px !important;

  padding:
    14px 48px 14px 16px !important;

  border-radius: 18px !important;

  display: flex !important;
  align-items: center !important;

  border:
    1px solid rgba(142,126,232,.15) !important;

  background:
    linear-gradient(
      110deg,
      rgba(239,231,255,.92),
      rgba(229,241,255,.86)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 8px 20px rgba(112,104,188,.06) !important;

  color: #6763a7 !important;

  font-size: 14px !important;
  line-height: 1.2 !important;

  font-weight: 760 !important;
}


/* фирменная точка */
#app .couple-story-card
.couple-story-content > span:nth-of-type(2)::before {
  content: "" !important;

  flex: 0 0 auto !important;

  width: 9px !important;
  height: 9px !important;

  margin-right: 10px !important;

  border-radius: 50% !important;

  background:
    linear-gradient(
      135deg,
      #f28cb0,
      #8d79ec 55%,
      #669bf2
    ) !important;

  box-shadow:
    0 0 0 5px rgba(139,119,232,.08) !important;
}


/* =========================================================
   ДВЕ НИЖНИЕ КАРТОЧКИ
   ========================================================= */

#app .couple-story-card
.couple-story-content > span:nth-of-type(3),

#app .couple-story-card
.couple-story-content > span:nth-of-type(4) {

  min-width: 0 !important;
  min-height: 74px !important;

  padding: 14px !important;

  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;

  flex-direction: column !important;

  border-radius: 20px !important;

  border:
    1px solid rgba(255,255,255,.80) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.68),
      rgba(238,241,255,.54)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88) !important;

  color: #6d6aa8 !important;

  font-size: 13px !important;
  line-height: 1.25 !important;

  font-weight: 720 !important;
}


/* =========================================================
   СТРЕЛКА
   ========================================================= */

#app .couple-story-card
.couple-story-chevron {
  position: absolute !important;

  top: 25px !important;
  right: 22px !important;

  transform: none !important;

  z-index: 4 !important;

  width: 38px !important;
  height: 38px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 50% !important;

  border:
    1px solid rgba(255,255,255,.78) !important;

  background:
    rgba(255,255,255,.54) !important;

  color: #8177c5 !important;

  box-shadow:
    0 8px 22px rgba(84,78,140,.08),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}


/* =========================================================
   DARK THEME
   ========================================================= */

html[data-svoi-theme="dark"]
#app .couple-story-card {

  border:
    1px solid rgba(122,139,207,.17) !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(63,97,198,.20),
      transparent 40%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(151,67,178,.11),
      transparent 38%
    ),
    rgba(19,25,45,.80) !important;

  box-shadow:
    0 22px 54px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}


html[data-svoi-theme="dark"]
#app .couple-story-card
.couple-story-content > :first-child {
  color: #8d95ab !important;
}


html[data-svoi-theme="dark"]
#app .couple-story-card strong {
  color: #f6f7fb !important;
}


html[data-svoi-theme="dark"]
#app .couple-story-card
.couple-story-content > span:nth-of-type(2) {

  border:
    1px solid rgba(125,119,219,.16) !important;

  background:
    linear-gradient(
      110deg,
      rgba(71,59,128,.34),
      rgba(43,67,120,.30)
    ) !important;

  color: #b8b1ef !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}


html[data-svoi-theme="dark"]
#app .couple-story-card
.couple-story-content > span:nth-of-type(3),

html[data-svoi-theme="dark"]
#app .couple-story-card
.couple-story-content > span:nth-of-type(4) {

  border:
    1px solid rgba(120,137,201,.13) !important;

  background:
    linear-gradient(
      145deg,
      rgba(34,42,72,.78),
      rgba(26,33,58,.74)
    ) !important;

  color: #a8add0 !important;
}


html[data-svoi-theme="dark"]
#app .couple-story-card
.couple-story-chevron {

  background:
    rgba(42,51,83,.66) !important;

  border:
    1px solid rgba(127,141,201,.16) !important;

  color: #9e98e4 !important;

  box-shadow:
    0 9px 24px rgba(0,0,0,.17),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}


/* =========================================================
   УЗКИЙ IPHONE
   ========================================================= */

@media (max-width: 380px) {

  #app .couple-story-card {
    padding:
      22px 20px 20px !important;
  }

  #app .couple-story-card strong {
    font-size: 26px !important;
  }

  #app .couple-story-card
  .couple-story-content > span:nth-of-type(3),

  #app .couple-story-card
  .couple-story-content > span:nth-of-type(4) {

    min-height: 68px !important;

    padding: 12px !important;

    font-size: 12px !important;
  }
}


/* NAMI_CHECKIN_BACK_FIX */
#app .checkin-v2-head{
  position:relative!important;
  grid-template-columns:46px minmax(0,1fr) auto!important;
  align-items:center!important;
}

#app .checkin-v2-head .checkin-v2-back{
  position:relative!important;
  z-index:50!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  grid-column:1!important;
}

#app .checkin-v2-head > div{
  grid-column:2!important;
}

#app .checkin-v2-head .checkin-v2-add{
  grid-column:3!important;
}

/* =========================================================
   NAMI — COUPLE OCCASION SHEET FINAL
   ========================================================= */

#coupleOccasionForm{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  display:grid!important;
  gap:18px!important;
  overflow:hidden!important;
}

#coupleOccasionForm .field{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  box-sizing:border-box!important;
}

#coupleOccasionForm .field > span{
  display:block!important;
  margin:0 0 9px 8px!important;

  font-size:13px!important;
  line-height:1.2!important;
  font-weight:800!important;

  color:var(--text)!important;
}

#coupleOccasionForm input[type="text"],
#coupleOccasionForm input:not([type]),
#coupleOccasionForm input[type="date"]{
  display:block!important;

  width:100%!important;
  min-width:0!important;
  max-width:100%!important;

  height:58px!important;

  margin:0!important;
  padding:0 16px!important;

  box-sizing:border-box!important;

  border-radius:19px!important;

  border:1px solid rgba(126,130,175,.16)!important;

  background:rgba(255,255,255,.62)!important;

  color:var(--text)!important;

  font-size:16px!important;
  line-height:1!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 7px 22px rgba(75,76,120,.05)!important;

  outline:none!important;
}

/* iPhone date field overflow fix */
#coupleOccasionForm input[type="date"]{
  -webkit-appearance:none!important;
  appearance:none!important;

  overflow:hidden!important;
}

#coupleOccasionForm input[type="date"]::-webkit-date-and-time-value{
  text-align:left!important;
  min-width:0!important;
}

#coupleOccasionForm input:focus{
  border-color:rgba(125,111,226,.38)!important;

  box-shadow:
    0 0 0 4px rgba(125,111,226,.08),
    inset 0 1px 0 rgba(255,255,255,.86)!important;
}


/* =========================================================
   YEARLY
   ========================================================= */

#coupleOccasionForm .occasion-yearly-row{
  width:100%!important;
  min-width:0!important;

  box-sizing:border-box!important;

  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;

  gap:14px!important;

  padding:17px 16px!important;

  border-radius:21px!important;

  border:1px solid rgba(126,130,175,.14)!important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.68),
      rgba(245,245,255,.58)
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 8px 24px rgba(75,76,120,.05)!important;
}

#coupleOccasionForm .occasion-yearly-row > span:first-child{
  min-width:0!important;
  flex:1 1 auto!important;
}

#coupleOccasionForm .occasion-yearly-row b{
  display:block!important;

  margin:0 0 5px!important;

  font-size:14px!important;
  line-height:1.2!important;
  font-weight:850!important;

  color:var(--text)!important;
}

#coupleOccasionForm .occasion-yearly-row small{
  display:block!important;

  font-size:11px!important;
  line-height:1.35!important;
  font-weight:600!important;

  color:var(--muted)!important;
}

#coupleOccasionForm .couple-marriage-switch{
  flex:0 0 auto!important;
}


/* =========================================================
   BUTTON
   ========================================================= */

#coupleOccasionForm > .primary.full{
  width:100%!important;
  min-width:0!important;

  min-height:56px!important;

  margin-top:2px!important;

  border-radius:19px!important;

  font-size:16px!important;
  font-weight:850!important;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
#coupleOccasionForm input[type="text"],

html[data-svoi-theme="dark"]
#coupleOccasionForm input:not([type]),

html[data-svoi-theme="dark"]
#coupleOccasionForm input[type="date"]{
  background:rgba(30,38,63,.82)!important;

  border-color:rgba(121,137,196,.17)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025)!important;
}

html[data-svoi-theme="dark"]
#coupleOccasionForm .occasion-yearly-row{
  background:
    linear-gradient(
      145deg,
      rgba(31,39,65,.88),
      rgba(25,32,55,.82)
    )!important;

  border-color:rgba(121,137,196,.15)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025)!important;
}


/* NAMI_OCCASION_DATE_IOS_FINAL */

#coupleOccasionForm
.field:has(input[name="occasion_date"]){
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;

  width:100%!important;
  min-width:0!important;
  max-width:100%!important;

  overflow:hidden!important;
  box-sizing:border-box!important;
}

#coupleOccasionForm
input[type="date"][name="occasion_date"]{
  display:block!important;

  width:100%!important;
  min-width:0!important;
  max-width:100%!important;

  inline-size:100%!important;
  min-inline-size:0!important;
  max-inline-size:100%!important;

  box-sizing:border-box!important;

  margin:0!important;

  position:relative!important;
  left:0!important;
  right:auto!important;

  transform:none!important;

  -webkit-appearance:none!important;
  appearance:none!important;
}

#coupleOccasionForm
input[type="date"][name="occasion_date"]
::-webkit-date-and-time-value{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;

  margin:0!important;
  padding:0!important;

  text-align:center!important;
}

#coupleOccasionForm
input[type="date"][name="occasion_date"]
::-webkit-datetime-edit,
#coupleOccasionForm
input[type="date"][name="occasion_date"]
::-webkit-datetime-edit-fields-wrapper{
  min-width:0!important;
  max-width:100%!important;

  margin:0!important;
  padding:0!important;
}



/* ===== SOURCE: room-settings-final.css ===== */

/* ==========================================================
   NAMI — ROOM SETTINGS FINAL V2
   ПАРА + КОМПАНИЯ
   ========================================================== */


/* ==========================================================
   HERO
   ========================================================== */

html[data-svoi-theme]
.room-settings-hero {
  position: relative !important;
  overflow: hidden !important;

  display: grid !important;

  grid-template-columns:
    74px minmax(0, 1fr) !important;

  grid-template-areas:
    "avatar title"
    "actions actions" !important;

  align-items: center !important;

  gap:
    0 15px !important;

  padding:
    17px !important;

  margin:
    4px 0 19px !important;

  text-align:
    left !important;

  border-radius:
    26px !important;

  isolation:
    isolate;
}


/* subtle glow */

html[data-svoi-theme]
.room-settings-hero::before {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  left: -85px;
  top: -95px;

  border-radius: 999px;

  background:
    radial-gradient(
      circle,
      rgba(255,137,132,.22),
      rgba(230,119,179,.10) 45%,
      transparent 70%
    );

  pointer-events: none;

  z-index: -1;
}


html[data-svoi-theme]
.room-settings-hero::after {
  content: "";

  position: absolute;

  width: 190px;
  height: 190px;

  right: -95px;
  top: -105px;

  border-radius: 999px;

  background:
    radial-gradient(
      circle,
      rgba(91,128,239,.22),
      rgba(124,96,229,.08) 48%,
      transparent 70%
    );

  pointer-events: none;

  z-index: -1;
}


/* ==========================================================
   AVATAR
   ========================================================== */

html[data-svoi-theme]
.room-settings-avatar {
  grid-area:
    avatar !important;

  width:
    74px !important;

  height:
    74px !important;

  min-width:
    74px !important;

  margin:
    0 !important;

  border-radius:
    23px !important;

  overflow:
    hidden !important;

  display:
    grid !important;

  place-items:
    center !important;

  position:
    relative !important;

  box-sizing:
    border-box !important;

  box-shadow:
    0 10px 28px rgba(91,80,178,.12),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
}


html[data-svoi-theme]
.room-settings-avatar img {
  width:
    100% !important;

  height:
    100% !important;

  object-fit:
    cover !important;

  display:
    block !important;
}


html[data-svoi-theme]
.room-settings-avatar
.nami-space-symbol {
  width:
    56px !important;

  height:
    56px !important;
}


/* ==========================================================
   TITLE
   ========================================================== */

html[data-svoi-theme]
.room-settings-title {
  grid-area:
    title !important;

  min-width:
    0 !important;
}


html[data-svoi-theme]
.room-settings-title small {
  display:
    block !important;

  margin:
    0 0 5px !important;

  color:
    #887ae7 !important;

  font-size:
    9px !important;

  line-height:
    1 !important;

  font-weight:
    850 !important;

  letter-spacing:
    .16em !important;
}


html[data-svoi-theme]
.room-settings-title h2 {
  overflow:
    hidden !important;

  margin:
    0 !important;

  color:
    var(--text) !important;

  font-size:
    22px !important;

  line-height:
    1.08 !important;

  font-weight:
    850 !important;

  letter-spacing:
    -.035em !important;

  white-space:
    nowrap !important;

  text-overflow:
    ellipsis !important;
}


html[data-svoi-theme]
.room-settings-title p {
  margin:
    5px 0 0 !important;

  color:
    var(--muted) !important;

  font-size:
    12px !important;

  line-height:
    1.25 !important;

  font-weight:
    500 !important;
}


/* ==========================================================
   PHOTO ACTIONS
   ========================================================== */

html[data-svoi-theme]
.room-settings-photo-actions {
  grid-area:
    actions !important;

  display:
    grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap:
    8px !important;

  margin:
    14px 0 0 !important;
}


html[data-svoi-theme]
.room-settings-photo-actions button {
  width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    42px !important;

  padding:
    0 12px !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    7px !important;

  border-radius:
    14px !important;

  font-size:
    12px !important;

  line-height:
    1.1 !important;

  font-weight:
    750 !important;

  white-space:
    nowrap !important;

  transition:
    transform .16s ease,
    background .16s ease !important;
}


html[data-svoi-theme]
.room-settings-photo-actions button:active {
  transform:
    scale(.975) !important;
}


/* if only one button exists */

html[data-svoi-theme]
.room-settings-photo-actions button:only-child {
  grid-column:
    1 / -1 !important;
}


html[data-svoi-theme]
.room-photo-remove {
  color:
    #ca727c !important;
}


/* ==========================================================
   SECTION TITLES
   ========================================================== */

html[data-svoi-theme]
.room-settings-section-title {
  margin:
    18px 6px 9px !important;

  color:
    var(--muted) !important;

  font-size:
    10px !important;

  line-height:
    1 !important;

  font-weight:
    850 !important;

  letter-spacing:
    .10em !important;

  text-transform:
    uppercase !important;
}


/* ==========================================================
   SETTINGS LIST
   ========================================================== */

html[data-svoi-theme]
.room-settings-list {
  display:
    grid !important;

  gap:
    8px !important;

  padding:
    0 !important;

  background:
    transparent !important;

  border:
    0 !important;

  box-shadow:
    none !important;

  overflow:
    visible !important;
}


html[data-svoi-theme]
.room-settings-list
.setting-row {
  position:
    relative !important;

  min-height:
    67px !important;

  display:
    grid !important;

  grid-template-columns:
    46px minmax(0,1fr) 24px !important;

  align-items:
    center !important;

  gap:
    12px !important;

  padding:
    10px 12px !important;

  margin:
    0 !important;

  text-align:
    left !important;

  border-radius:
    20px !important;

  border-bottom:
    0 !important;

  overflow:
    hidden !important;

  transition:
    transform .16s ease,
    background .16s ease,
    box-shadow .16s ease !important;
}


html[data-svoi-theme]
.room-settings-list
.setting-row:active {
  transform:
    scale(.985) !important;
}


/* icon */

html[data-svoi-theme]
.room-settings-list
.setting-icon {
  width:
    46px !important;

  height:
    46px !important;

  min-width:
    46px !important;

  display:
    grid !important;

  place-items:
    center !important;

  margin:
    0 !important;

  color:
    #7667dc !important;

  border-radius:
    15px !important;

  box-sizing:
    border-box !important;
}


html[data-svoi-theme]
.room-settings-list
.setting-icon .icon,
html[data-svoi-theme]
.room-settings-list
.setting-icon svg {
  width:
    21px !important;

  height:
    21px !important;
}


/* text */

html[data-svoi-theme]
.room-settings-list
.setting-row > span:nth-child(2) {
  min-width:
    0 !important;
}


html[data-svoi-theme]
.room-settings-list
.setting-row b {
  display:
    block !important;

  overflow:
    hidden !important;

  color:
    var(--text) !important;

  font-size:
    14px !important;

  line-height:
    1.18 !important;

  font-weight:
    800 !important;

  letter-spacing:
    -.015em !important;

  white-space:
    nowrap !important;

  text-overflow:
    ellipsis !important;
}


html[data-svoi-theme]
.room-settings-list
.setting-row small {
  display:
    block !important;

  overflow:
    hidden !important;

  margin:
    4px 0 0 !important;

  color:
    var(--muted) !important;

  font-size:
    11px !important;

  line-height:
    1.2 !important;

  font-weight:
    500 !important;

  white-space:
    nowrap !important;

  text-overflow:
    ellipsis !important;
}


/* chevron */

html[data-svoi-theme]
.room-settings-list
.setting-row > i {
  width:
    24px !important;

  height:
    24px !important;

  display:
    grid !important;

  place-items:
    center !important;

  margin:
    0 !important;

  color:
    var(--muted) !important;

  opacity:
    .60 !important;
}


/* ==========================================================
   INVITE — FEATURED ROW
   ========================================================== */

html[data-svoi-theme]
.room-settings-list
.setting-row[data-invite] {
  isolation:
    isolate !important;
}


html[data-svoi-theme]
.room-settings-list
.setting-row[data-invite]::before {
  content: "";

  position:
    absolute;

  inset:
    0 !important;

  z-index:
    -1 !important;

  pointer-events:
    none !important;

  border-radius:
    inherit !important;
}


html[data-svoi-theme]
.room-settings-list
.setting-row[data-invite]
.setting-icon {
  color:
    #fff !important;

  background:
    linear-gradient(
      135deg,
      #f18c9d,
      #9a73ea 54%,
      #6388e8
    ) !important;

  border:
    1px solid rgba(255,255,255,.22) !important;

  box-shadow:
    0 7px 19px rgba(104,93,219,.20),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
}


/* ==========================================================
   DANGER
   ========================================================== */

html[data-svoi-theme]
.room-settings-danger {
  width:
    100% !important;

  min-height:
    64px !important;

  display:
    grid !important;

  grid-template-columns:
    42px minmax(0,1fr) 22px !important;

  align-items:
    center !important;

  gap:
    11px !important;

  padding:
    10px 12px !important;

  text-align:
    left !important;

  border-radius:
    19px !important;

  box-sizing:
    border-box !important;

  transition:
    transform .16s ease !important;
}


html[data-svoi-theme]
.room-settings-danger:active {
  transform:
    scale(.985) !important;
}


html[data-svoi-theme]
.room-settings-danger > span {
  width:
    42px !important;

  height:
    42px !important;

  display:
    grid !important;

  place-items:
    center !important;

  border-radius:
    14px !important;
}


html[data-svoi-theme]
.room-settings-danger b {
  display:
    block !important;

  font-size:
    13px !important;

  line-height:
    1.15 !important;

  font-weight:
    800 !important;
}


html[data-svoi-theme]
.room-settings-danger small {
  display:
    block !important;

  margin-top:
    4px !important;

  font-size:
    10px !important;

  line-height:
    1.2 !important;
}


/* ==========================================================
   LIGHT
   ========================================================== */

html:not([data-svoi-theme="dark"])
.room-settings-hero {
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(255,154,144,.12),
      transparent 42%
    ),
    radial-gradient(
      circle at 100% 0%,
      rgba(104,143,241,.13),
      transparent 47%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.76),
      rgba(246,245,255,.63)
    ) !important;

  border:
    1px solid rgba(255,255,255,.88) !important;

  box-shadow:
    0 13px 36px rgba(83,76,151,.065),
    inset 0 1px 0 rgba(255,255,255,.96) !important;

  backdrop-filter:
    blur(24px) saturate(145%) !important;

  -webkit-backdrop-filter:
    blur(24px) saturate(145%) !important;
}


html:not([data-svoi-theme="dark"])
.room-settings-avatar {
  background:
    rgba(255,255,255,.70) !important;

  border:
    1px solid rgba(255,255,255,.92) !important;
}


html:not([data-svoi-theme="dark"])
.room-settings-photo-actions button {
  color:
    #292936 !important;

  background:
    rgba(255,255,255,.54) !important;

  border:
    1px solid rgba(255,255,255,.86) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 6px 17px rgba(74,66,133,.04) !important;
}


html:not([data-svoi-theme="dark"])
.room-settings-photo-actions
.room-photo-remove {
  color:
    #bf727d !important;
}


html:not([data-svoi-theme="dark"])
.room-settings-list
.setting-row {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.73),
      rgba(247,246,255,.58)
    ) !important;

  border:
    1px solid rgba(255,255,255,.88) !important;

  box-shadow:
    0 8px 24px rgba(74,65,137,.045),
    inset 0 1px 0 rgba(255,255,255,.96) !important;

  backdrop-filter:
    blur(22px) saturate(140%) !important;

  -webkit-backdrop-filter:
    blur(22px) saturate(140%) !important;
}


html:not([data-svoi-theme="dark"])
.room-settings-list
.setting-icon {
  background:
    linear-gradient(
      145deg,
      rgba(235,226,255,.86),
      rgba(224,233,255,.78)
    ) !important;

  border:
    1px solid rgba(255,255,255,.92) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}


html:not([data-svoi-theme="dark"])
.room-settings-list
.setting-row[data-invite] {
  border-color:
    rgba(164,138,236,.19) !important;
}


html:not([data-svoi-theme="dark"])
.room-settings-list
.setting-row[data-invite]::before {
  background:
    linear-gradient(
      115deg,
      rgba(255,145,150,.055),
      rgba(162,112,230,.06) 52%,
      rgba(91,136,235,.07)
    ) !important;
}


html:not([data-svoi-theme="dark"])
.room-settings-danger {
  color:
    #c66f7b !important;

  background:
    rgba(210,89,105,.045) !important;

  border:
    1px solid rgba(210,89,105,.12) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.60) !important;
}


html:not([data-svoi-theme="dark"])
.room-settings-danger > span {
  background:
    rgba(210,89,105,.075) !important;
}


/* ==========================================================
   DARK
   ========================================================== */

html[data-svoi-theme="dark"]
.room-settings-hero {
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(220,94,127,.09),
      transparent 42%
    ),
    radial-gradient(
      circle at 100% 0%,
      rgba(81,101,218,.15),
      transparent 47%
    ),
    linear-gradient(
      145deg,
      rgba(30,38,64,.90),
      rgba(20,26,46,.92)
    ) !important;

  border:
    1px solid rgba(119,126,211,.17) !important;

  box-shadow:
    0 14px 36px rgba(2,6,22,.22),
    inset 0 1px 0 rgba(255,255,255,.045) !important;

  backdrop-filter:
    blur(25px) saturate(125%) !important;

  -webkit-backdrop-filter:
    blur(25px) saturate(125%) !important;
}


html[data-svoi-theme="dark"]
.room-settings-avatar {
  background:
    #202842 !important;

  border:
    1px solid rgba(135,127,221,.18) !important;

  box-shadow:
    0 12px 30px rgba(0,3,18,.24),
    0 0 22px rgba(107,91,225,.06) !important;
}


html[data-svoi-theme="dark"]
.room-settings-photo-actions button {
  color:
    #e5e5f0 !important;

  background:
    rgba(31,38,63,.72) !important;

  border:
    1px solid rgba(121,127,209,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}


html[data-svoi-theme="dark"]
.room-settings-photo-actions
.room-photo-remove {
  color:
    #df8894 !important;
}


html[data-svoi-theme="dark"]
.room-settings-list
.setting-row {
  background:
    linear-gradient(
      145deg,
      rgba(31,39,66,.88),
      rgba(23,29,51,.90)
    ) !important;

  border:
    1px solid rgba(118,125,210,.15) !important;

  box-shadow:
    0 9px 25px rgba(1,4,18,.16),
    inset 0 1px 0 rgba(255,255,255,.035) !important;

  backdrop-filter:
    blur(22px) saturate(125%) !important;

  -webkit-backdrop-filter:
    blur(22px) saturate(125%) !important;
}


html[data-svoi-theme="dark"]
.room-settings-list
.setting-icon {
  color:
    #aaa0ff !important;

  background:
    rgba(107,98,211,.13) !important;

  border:
    1px solid rgba(135,127,221,.13) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}


html[data-svoi-theme="dark"]
.room-settings-list
.setting-row[data-invite] {
  border-color:
    rgba(137,123,230,.23) !important;
}


html[data-svoi-theme="dark"]
.room-settings-list
.setting-row[data-invite]::before {
  background:
    linear-gradient(
      115deg,
      rgba(210,90,123,.055),
      rgba(129,91,221,.075) 52%,
      rgba(74,112,222,.085)
    ) !important;
}


html[data-svoi-theme="dark"]
.room-settings-danger {
  color:
    #df8792 !important;

  background:
    rgba(206,78,94,.065) !important;

  border:
    1px solid rgba(214,93,108,.13) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}


html[data-svoi-theme="dark"]
.room-settings-danger > span {
  background:
    rgba(211,84,99,.09) !important;
}


html[data-svoi-theme="dark"]
.room-settings-danger small {
  color:
    #777f97 !important;
}


/* ==========================================================
   SMALL IPHONE
   ========================================================== */

@media (max-width: 380px) {

  html[data-svoi-theme]
  .room-settings-hero {
    grid-template-columns:
      66px minmax(0,1fr) !important;

    gap:
      0 12px !important;

    padding:
      14px !important;

    border-radius:
      23px !important;
  }


  html[data-svoi-theme]
  .room-settings-avatar {
    width:
      66px !important;

    height:
      66px !important;

    min-width:
      66px !important;

    border-radius:
      20px !important;
  }


  html[data-svoi-theme]
  .room-settings-title h2 {
    font-size:
      20px !important;
  }


  html[data-svoi-theme]
  .room-settings-list
  .setting-row {
    min-height:
      63px !important;

    grid-template-columns:
      43px minmax(0,1fr) 20px !important;

    gap:
      10px !important;
  }


  html[data-svoi-theme]
  .room-settings-list
  .setting-icon {
    width:
      43px !important;

    height:
      43px !important;

    min-width:
      43px !important;

    border-radius:
      14px !important;
  }

}



/* ==========================================================
   NAMI ROOM SETTINGS — POLISH V3
   ========================================================== */

/* overall tighter */
html[data-svoi-theme]
.room-settings-hero {
  margin: 2px 0 15px !important;
  padding: 15px !important;
}

html[data-svoi-theme]
.room-settings-section-title {
  margin: 14px 6px 8px !important;
}

html[data-svoi-theme]
.room-settings-list {
  gap: 7px !important;
}

html[data-svoi-theme]
.room-settings-danger {
  min-height: 61px !important;
}

html[data-svoi-theme]
.room-settings-list .setting-row {
  min-height: 64px !important;
}


/* title: no ugly one-line cut */
html[data-svoi-theme]
.room-settings-title h2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;

  white-space: normal !important;
  text-overflow: unset !important;
  overflow: hidden !important;

  max-height: 2.18em !important;
  font-size: 21px !important;
  line-height: 1.05 !important;
}

html[data-svoi-theme]
.room-settings-title p {
  margin-top: 4px !important;
  font-size: 11px !important;
}


/* smaller avatar + slightly tighter top block */
html[data-svoi-theme]
.room-settings-avatar {
  width: 70px !important;
  height: 70px !important;
  min-width: 70px !important;
  border-radius: 21px !important;
}

html[data-svoi-theme]
.room-settings-hero {
  grid-template-columns: 70px minmax(0,1fr) !important;
}


/* photo action buttons */
html[data-svoi-theme]
.room-settings-photo-actions {
  margin-top: 12px !important;
}

html[data-svoi-theme]
.room-settings-photo-actions button {
  min-height: 40px !important;
  border-radius: 13px !important;
  font-size: 11px !important;
  font-weight: 760 !important;
}

/* more premium invite row icon */
html[data-svoi-theme]
.room-settings-list .setting-row[data-invite] .setting-icon {
  box-shadow:
    0 8px 20px rgba(109,90,228,.20),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
}

/* calmer chevrons */
html[data-svoi-theme]
.room-settings-list .setting-row > i,
html[data-svoi-theme]
.room-settings-danger > svg,
html[data-svoi-theme]
.room-settings-danger > i {
  opacity: .48 !important;
}


/* =========================
   LIGHT THEME
   ========================= */

html:not([data-svoi-theme="dark"])
.room-settings-hero {
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(255,166,154,.10),
      transparent 40%
    ),
    radial-gradient(
      circle at 100% 0%,
      rgba(140,169,245,.10),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.82),
      rgba(247,245,255,.70)
    ) !important;

  box-shadow:
    0 10px 28px rgba(84,76,151,.05),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

html:not([data-svoi-theme="dark"])
.room-settings-avatar {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.95),
      rgba(247,245,255,.76)
    ) !important;
}

html:not([data-svoi-theme="dark"])
.room-settings-photo-actions button {
  color: #262736 !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.84),
      rgba(248,247,255,.72)
    ) !important;

  border:
    1px solid rgba(255,255,255,.92) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 5px 15px rgba(76,68,137,.035) !important;
}

/* primary-looking but still soft */
html:not([data-svoi-theme="dark"])
.room-settings-photo-actions button:first-child {
  color: #3d3f63 !important;

  background:
    linear-gradient(
      135deg,
      rgba(241,236,255,.92),
      rgba(229,238,255,.86)
    ) !important;

  border:
    1px solid rgba(222,226,255,.95) !important;
}

/* delete photo button calmer */
html:not([data-svoi-theme="dark"])
.room-settings-photo-actions .room-photo-remove {
  color: #ba7a87 !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,251,252,.92),
      rgba(255,245,247,.85)
    ) !important;

  border:
    1px solid rgba(244,220,225,.95) !important;
}

html:not([data-svoi-theme="dark"])
.room-settings-list .setting-row {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.79),
      rgba(248,246,255,.65)
    ) !important;
}

html:not([data-svoi-theme="dark"])
.room-settings-list .setting-icon {
  color: #7a6be1 !important;

  background:
    linear-gradient(
      145deg,
      rgba(237,229,255,.90),
      rgba(227,236,255,.84)
    ) !important;
}

html:not([data-svoi-theme="dark"])
.room-settings-list .setting-row[data-invite] {
  border-color: rgba(175,151,239,.24) !important;
  box-shadow:
    0 8px 22px rgba(88,80,167,.05),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

html:not([data-svoi-theme="dark"])
.room-settings-danger {
  color: #be6f7d !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,248,249,.88),
      rgba(255,241,244,.80)
    ) !important;

  border:
    1px solid rgba(235,197,206,.78) !important;
}

html:not([data-svoi-theme="dark"])
.room-settings-danger > span {
  background:
    linear-gradient(
      145deg,
      rgba(255,241,244,.92),
      rgba(252,231,236,.82)
    ) !important;
}


/* =========================
   DARK THEME
   ========================= */

html[data-svoi-theme="dark"]
.room-settings-hero {
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(209,86,121,.08),
      transparent 38%
    ),
    radial-gradient(
      circle at 100% 0%,
      rgba(81,97,196,.11),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(22,27,45,.94),
      rgba(15,20,35,.96)
    ) !important;

  border:
    1px solid rgba(103,112,188,.16) !important;

  box-shadow:
    0 12px 30px rgba(1,5,18,.24),
    inset 0 1px 0 rgba(255,255,255,.038) !important;
}

html[data-svoi-theme="dark"]
.room-settings-avatar {
  background:
    linear-gradient(
      145deg,
      rgba(34,41,69,.96),
      rgba(25,31,54,.96)
    ) !important;

  border:
    1px solid rgba(127,121,212,.16) !important;
}

html[data-svoi-theme="dark"]
.room-settings-photo-actions button {
  color: #eaebf5 !important;

  background:
    linear-gradient(
      145deg,
      rgba(29,35,59,.86),
      rgba(24,30,51,.90)
    ) !important;

  border:
    1px solid rgba(103,111,189,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 6px 16px rgba(1,4,18,.10) !important;
}

/* primary photo button a bit richer */
html[data-svoi-theme="dark"]
.room-settings-photo-actions button:first-child {
  color: #f0f1fb !important;

  background:
    linear-gradient(
      145deg,
      rgba(49,45,88,.88),
      rgba(31,43,77,.90)
    ) !important;

  border:
    1px solid rgba(122,124,220,.20) !important;
}

/* delete photo button less aggressive */
html[data-svoi-theme="dark"]
.room-settings-photo-actions .room-photo-remove {
  color: #d88a96 !important;

  background:
    linear-gradient(
      145deg,
      rgba(48,29,43,.76),
      rgba(40,26,36,.82)
    ) !important;

  border:
    1px solid rgba(176,95,110,.16) !important;
}

html[data-svoi-theme="dark"]
.room-settings-list .setting-row {
  background:
    linear-gradient(
      145deg,
      rgba(25,31,53,.90),
      rgba(19,24,41,.94)
    ) !important;

  border:
    1px solid rgba(103,111,189,.14) !important;
}

html[data-svoi-theme="dark"]
.room-settings-list .setting-icon {
  color: #a99fff !important;

  background:
    linear-gradient(
      145deg,
      rgba(79,71,164,.20),
      rgba(52,65,130,.18)
    ) !important;

  border:
    1px solid rgba(126,121,216,.12) !important;
}

html[data-svoi-theme="dark"]
.room-settings-list .setting-row[data-invite] {
  background:
    linear-gradient(
      145deg,
      rgba(33,38,67,.95),
      rgba(25,30,54,.96)
    ) !important;

  border:
    1px solid rgba(135,118,230,.22) !important;
}

html[data-svoi-theme="dark"]
.room-settings-danger {
  color: #df8994 !important;

  background:
    linear-gradient(
      145deg,
      rgba(52,25,38,.70),
      rgba(35,18,29,.78)
    ) !important;

  border:
    1px solid rgba(195,92,109,.15) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 8px 22px rgba(0,0,0,.12) !important;
}

html[data-svoi-theme="dark"]
.room-settings-danger > span {
  background:
    linear-gradient(
      145deg,
      rgba(90,40,57,.30),
      rgba(60,28,40,.28)
    ) !important;
}


/* =========================
   SMALL IPHONE
   ========================= */

@media (max-width: 380px) {
  html[data-svoi-theme] .room-settings-hero {
    padding: 13px !important;
    grid-template-columns: 64px minmax(0,1fr) !important;
  }

  html[data-svoi-theme] .room-settings-avatar {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    border-radius: 19px !important;
  }

  html[data-svoi-theme] .room-settings-title h2 {
    font-size: 19px !important;
  }

  html[data-svoi-theme] .room-settings-photo-actions button {
    min-height: 38px !important;
    font-size: 10.5px !important;
  }
}



/* ==========================================================
   NAMI — PHOTO BUTTONS SAME COLOR
   ========================================================== */

/* LIGHT */

html:not([data-svoi-theme="dark"])
.room-settings-photo-actions button,
html:not([data-svoi-theme="dark"])
.room-settings-photo-actions button:first-child,
html:not([data-svoi-theme="dark"])
.room-settings-photo-actions .room-photo-remove {

  color: #514a86 !important;

  background:
    linear-gradient(
      145deg,
      rgba(241,237,255,.94),
      rgba(230,237,255,.88)
    ) !important;

  border:
    1px solid rgba(221,222,251,.95) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 6px 16px rgba(82,73,151,.05) !important;
}


/* DARK */

html[data-svoi-theme="dark"]
.room-settings-photo-actions button,
html[data-svoi-theme="dark"]
.room-settings-photo-actions button:first-child,
html[data-svoi-theme="dark"]
.room-settings-photo-actions .room-photo-remove {

  color: #cbc6ff !important;

  background:
    linear-gradient(
      145deg,
      rgba(48,46,86,.88),
      rgba(31,40,72,.92)
    ) !important;

  border:
    1px solid rgba(122,121,213,.18) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 6px 17px rgba(0,0,0,.12) !important;
}


/* icons same color too */

html:not([data-svoi-theme="dark"])
.room-settings-photo-actions svg {
  color: #655ac3 !important;
}

html[data-svoi-theme="dark"]
.room-settings-photo-actions svg {
  color: #aaa0ff !important;
}



/* ==========================================================
   NAMI — PHOTO BUTTONS SAME COLOR
   ========================================================== */

/* LIGHT */

html:not([data-svoi-theme="dark"])
.room-settings-photo-actions button,
html:not([data-svoi-theme="dark"])
.room-settings-photo-actions button:first-child,
html:not([data-svoi-theme="dark"])
.room-settings-photo-actions .room-photo-remove {

  color: #514a86 !important;

  background:
    linear-gradient(
      145deg,
      rgba(241,237,255,.94),
      rgba(230,237,255,.88)
    ) !important;

  border:
    1px solid rgba(221,222,251,.95) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 6px 16px rgba(82,73,151,.05) !important;
}


/* DARK */

html[data-svoi-theme="dark"]
.room-settings-photo-actions button,
html[data-svoi-theme="dark"]
.room-settings-photo-actions button:first-child,
html[data-svoi-theme="dark"]
.room-settings-photo-actions .room-photo-remove {

  color: #cbc6ff !important;

  background:
    linear-gradient(
      145deg,
      rgba(48,46,86,.88),
      rgba(31,40,72,.92)
    ) !important;

  border:
    1px solid rgba(122,121,213,.18) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 6px 17px rgba(0,0,0,.12) !important;
}


/* icons same color too */

html:not([data-svoi-theme="dark"])
.room-settings-photo-actions svg {
  color: #655ac3 !important;
}

html[data-svoi-theme="dark"]
.room-settings-photo-actions svg {
  color: #aaa0ff !important;
}



/* ==========================================================
   NAMI SETTINGS — LIGHT THEME UNIFIED FINAL
   ========================================================== */


/* HERO — чуть компактнее */

html:not([data-svoi-theme="dark"])
.room-settings-hero {
  padding: 14px !important;
  margin-bottom: 14px !important;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(255,165,157,.08),
      transparent 42%
    ),
    radial-gradient(
      circle at 100% 0%,
      rgba(128,156,239,.09),
      transparent 46%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.84),
      rgba(247,246,255,.72)
    ) !important;

  border:
    1px solid rgba(255,255,255,.92) !important;

  box-shadow:
    0 10px 28px rgba(77,70,139,.045),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}


/* AVATAR */

html:not([data-svoi-theme="dark"])
.room-settings-avatar {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.94),
      rgba(241,240,255,.82)
    ) !important;

  border:
    1px solid rgba(224,222,250,.88) !important;

  box-shadow:
    0 8px 22px rgba(88,77,161,.07),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}


/* PHOTO BUTTONS — ОБЕ ОДИНАКОВЫЕ */

html:not([data-svoi-theme="dark"])
.room-settings-photo-actions button,
html:not([data-svoi-theme="dark"])
.room-settings-photo-actions button:first-child,
html:not([data-svoi-theme="dark"])
.room-settings-photo-actions .room-photo-remove {

  color:
    #5f57a6 !important;

  background:
    linear-gradient(
      145deg,
      rgba(239,235,255,.95),
      rgba(230,236,255,.92)
    ) !important;

  border:
    1px solid rgba(216,216,247,.92) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 6px 16px rgba(82,72,151,.045) !important;
}


html:not([data-svoi-theme="dark"])
.room-settings-photo-actions svg {
  color:
    #7164d6 !important;
}


/* ==========================================================
   ALL NORMAL SETTINGS ROWS
   ========================================================== */

html:not([data-svoi-theme="dark"])
.room-settings-list
.setting-row {

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.83),
      rgba(247,246,255,.70)
    ) !important;

  border:
    1px solid rgba(255,255,255,.94) !important;

  box-shadow:
    0 7px 21px rgba(77,68,137,.04),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}


/* ВСЕ ИКОНКИ ОДИНАКОВЫЕ */

html:not([data-svoi-theme="dark"])
.room-settings-list
.setting-icon,

html:not([data-svoi-theme="dark"])
.room-settings-list
.setting-row[data-invite]
.setting-icon {

  color:
    #7467d8 !important;

  background:
    linear-gradient(
      145deg,
      rgba(235,229,255,.94),
      rgba(226,234,255,.91)
    ) !important;

  border:
    1px solid rgba(218,218,249,.96) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 5px 14px rgba(87,76,160,.045) !important;
}


/* УБИРАЕМ ОСОБЫЙ ГРАДИЕНТ У ПРИГЛАШЕНИЯ */

html:not([data-svoi-theme="dark"])
.room-settings-list
.setting-row[data-invite] {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.83),
      rgba(247,246,255,.70)
    ) !important;

  border:
    1px solid rgba(255,255,255,.94) !important;

  box-shadow:
    0 7px 21px rgba(77,68,137,.04),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}


html:not([data-svoi-theme="dark"])
.room-settings-list
.setting-row[data-invite]::before {
  display:
    none !important;
}


/* TEXT */

html:not([data-svoi-theme="dark"])
.room-settings-list
.setting-row b {
  color:
    #181923 !important;
}


html:not([data-svoi-theme="dark"])
.room-settings-list
.setting-row small {
  color:
    #9294a3 !important;
}


/* CHEVRONS */

html:not([data-svoi-theme="dark"])
.room-settings-list
.setting-row > i {
  color:
    #a8a9b5 !important;

  opacity:
    .65 !important;
}


/* ==========================================================
   DANGER ONLY = RED
   ========================================================== */

html:not([data-svoi-theme="dark"])
.room-settings-danger {

  color:
    #bd6b79 !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,249,250,.94),
      rgba(255,241,244,.88)
    ) !important;

  border:
    1px solid rgba(237,202,210,.82) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 7px 20px rgba(169,77,93,.035) !important;
}


html:not([data-svoi-theme="dark"])
.room-settings-danger > span {

  color:
    #c66d7b !important;

  background:
    rgba(244,216,222,.48) !important;
}


/* немного плотнее */

html:not([data-svoi-theme="dark"])
.room-settings-list
.setting-row {
  min-height:
    62px !important;
}

html:not([data-svoi-theme="dark"])
.room-settings-section-title {
  margin-top:
    13px !important;
}



/* ==========================================================
   NAMI DARK — REMOVE PURPLE INVITE ACCENT
   ========================================================== */

html[data-svoi-theme="dark"]
.room-settings-list
.setting-row[data-invite] {

  background:
    linear-gradient(
      145deg,
      rgba(25,31,53,.90),
      rgba(19,24,41,.94)
    ) !important;

  border:
    1px solid rgba(103,111,189,.14) !important;

  box-shadow:
    0 9px 25px rgba(1,4,18,.16),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}


/* remove old colored overlay */

html[data-svoi-theme="dark"]
.room-settings-list
.setting-row[data-invite]::before {
  display: none !important;
}


/* invite icon = exactly same as other icons */

html[data-svoi-theme="dark"]
.room-settings-list
.setting-row[data-invite]
.setting-icon {

  color:
    #aaa0ff !important;

  background:
    linear-gradient(
      145deg,
      rgba(79,71,164,.20),
      rgba(52,65,130,.18)
    ) !important;

  border:
    1px solid rgba(126,121,216,.12) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}



/* ===== SOURCE: event-form-final.css ===== */

/* ==========================================================
   NAMI — EVENT FORM FINAL V2
   ========================================================== */

html[data-svoi-theme]
.event-form-v2 {
  gap: 16px !important;
}


/* ==========================================================
   BASE FIELDS
   ========================================================== */

html[data-svoi-theme]
.event-form-v2
.field {
  gap: 8px !important;
}

html[data-svoi-theme]
.event-form-v2
.field > span,
html[data-svoi-theme]
.event-range-title {
  color: var(--muted) !important;

  font-size: 12px !important;
  line-height: 1 !important;

  font-weight: 750 !important;
}

html[data-svoi-theme]
.event-form-v2
.field > input,
html[data-svoi-theme]
.event-form-v2
.field textarea,
html[data-svoi-theme]
.event-form-v2
.event-select-wrap select {
  border-radius: 18px !important;

  font-size: 16px !important;

  box-sizing: border-box !important;
}


/* ==========================================================
   SELECT
   ========================================================== */

html[data-svoi-theme]
.event-select-wrap {
  position: relative !important;
}

html[data-svoi-theme]
.event-select-wrap select {
  width: 100% !important;

  min-height: 56px !important;

  padding:
    0 48px
    0 16px !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}

html[data-svoi-theme]
.event-select-chevron {
  position: absolute !important;

  right: 17px !important;
  top: 50% !important;

  width: 20px !important;
  height: 20px !important;

  display: grid !important;
  place-items: center !important;

  transform:
    translateY(-50%)
    rotate(90deg) !important;

  pointer-events: none !important;

  color: var(--muted) !important;

  opacity: .72 !important;
}


/* ==========================================================
   DATE / TIME
   ========================================================== */

html[data-svoi-theme]
.event-time-range-v2 {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0,1fr)) !important;

  gap: 10px !important;
}


html[data-svoi-theme]
.event-datetime-block {
  min-width: 0 !important;
}


html[data-svoi-theme]
.event-range-title {
  display: block !important;

  margin:
    0 0 8px
    4px !important;
}


html[data-svoi-theme]
.event-datetime-card {
  display: grid !important;

  grid-template-columns:
    minmax(0,1fr)
    72px !important;

  overflow: hidden !important;

  border-radius:
    19px !important;
}


html[data-svoi-theme]
.event-picker-part {
  position: relative !important;

  min-width: 0 !important;
  min-height: 67px !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content:
    center !important;

  padding:
    10px 12px !important;

  box-sizing:
    border-box !important;

  overflow:
    hidden !important;

  cursor:
    pointer !important;
}


html[data-svoi-theme]
.event-picker-part + .event-picker-part {
  border-left:
    1px solid
    rgba(128,126,175,.10);
}


html[data-svoi-theme]
.event-picker-part small {
  display: block !important;

  margin:
    0 0 5px !important;

  color:
    var(--muted) !important;

  font-size:
    9px !important;

  line-height:
    1 !important;

  font-weight:
    700 !important;

  text-transform:
    uppercase !important;

  letter-spacing:
    .07em !important;
}


html[data-svoi-theme]
.event-picker-part b {
  display: block !important;

  overflow: hidden !important;

  color:
    var(--text) !important;

  font-size:
    15px !important;

  line-height:
    1.08 !important;

  font-weight:
    800 !important;

  white-space:
    nowrap !important;

  text-overflow:
    ellipsis !important;
}


html[data-svoi-theme]
.event-picker-time b {
  font-size:
    17px !important;

  font-variant-numeric:
    tabular-nums !important;
}


/* native picker remains clickable,
   but its ugly browser text is invisible */

html[data-svoi-theme]
.event-native-picker {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  opacity: 0 !important;

  cursor: pointer !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}


/* ==========================================================
   NOTE
   ========================================================== */

html[data-svoi-theme]
.event-note-field textarea {
  min-height:
    105px !important;

  resize:
    none !important;
}


/* ==========================================================
   SUBMIT
   ========================================================== */

html[data-svoi-theme]
.event-submit-v2 {
  min-height:
    56px !important;

  margin-top:
    1px !important;

  border-radius:
    18px !important;

  font-size:
    16px !important;

  font-weight:
    800 !important;

  gap:
    9px !important;
}


/* ==========================================================
   LIGHT
   ========================================================== */

html:not([data-svoi-theme="dark"])
.event-form-v2
.field > input,

html:not([data-svoi-theme="dark"])
.event-form-v2
.field textarea,

html:not([data-svoi-theme="dark"])
.event-select-wrap select,

html:not([data-svoi-theme="dark"])
.event-datetime-card {

  color:
    #181923 !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.83),
      rgba(247,246,255,.69)
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.94) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.98),
    0 7px 21px
      rgba(77,68,137,.04) !important;
}


html:not([data-svoi-theme="dark"])
.event-picker-part + .event-picker-part {
  border-left-color:
    rgba(122,118,173,.10) !important;
}


html:not([data-svoi-theme="dark"])
.event-submit-v2 {
  background:
    linear-gradient(
      105deg,
      #8b7be3 0%,
      #7880de 47%,
      #678fdc 100%
    ) !important;

  box-shadow:
    0 9px 22px
      rgba(104,100,204,.17),
    inset 0 1px 0
      rgba(255,255,255,.22) !important;
}


/* ==========================================================
   DARK
   ========================================================== */

html[data-svoi-theme="dark"]
.event-form-v2
.field > input,

html[data-svoi-theme="dark"]
.event-form-v2
.field textarea,

html[data-svoi-theme="dark"]
.event-select-wrap select,

html[data-svoi-theme="dark"]
.event-datetime-card {

  color:
    #f5f5fa !important;

  background:
    linear-gradient(
      145deg,
      rgba(24,30,51,.94),
      rgba(17,22,39,.96)
    ) !important;

  border:
    1px solid
    rgba(105,112,190,.14) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.03),
    0 8px 22px
      rgba(0,3,16,.13) !important;
}


html[data-svoi-theme="dark"]
.event-picker-part + .event-picker-part {
  border-left-color:
    rgba(112,119,197,.13) !important;
}


html[data-svoi-theme="dark"]
.event-submit-v2 {
  background:
    linear-gradient(
      105deg,
      #6761bd 0%,
      #5d69bd 50%,
      #5978bf 100%
    ) !important;

  box-shadow:
    0 9px 23px
      rgba(28,35,98,.25),
    inset 0 1px 0
      rgba(255,255,255,.08) !important;
}


/* ==========================================================
   SMALL IPHONE
   ========================================================== */

@media (max-width: 380px) {

  html[data-svoi-theme]
  .event-form-v2 {
    gap:
      14px !important;
  }

  html[data-svoi-theme]
  .event-time-range-v2 {
    gap:
      7px !important;
  }

  html[data-svoi-theme]
  .event-datetime-card {
    grid-template-columns:
      minmax(0,1fr)
      64px !important;
  }

  html[data-svoi-theme]
  .event-picker-part {
    min-height:
      62px !important;

    padding:
      9px 9px !important;
  }

  html[data-svoi-theme]
  .event-picker-part b {
    font-size:
      13px !important;
  }

  html[data-svoi-theme]
  .event-picker-time b {
    font-size:
      15px !important;
  }
}



/* ==========================================================
   NAMI EVENT — TIME WIDTH FIX + FINAL POLISH
   ========================================================== */

/* С / До одинаково */

html[data-svoi-theme]
.event-range-title {
  text-transform: none !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}


/* чуть больше места времени */

html[data-svoi-theme]
.event-datetime-card {
  grid-template-columns:
    minmax(0, 1fr) 74px !important;
}


/* дата */

html[data-svoi-theme]
.event-picker-date {
  padding:
    10px 9px 10px 11px !important;
}


/* время */

html[data-svoi-theme]
.event-picker-time {
  padding:
    10px 6px !important;
}


/* labels */

html[data-svoi-theme]
.event-picker-part small {
  margin-bottom:
    6px !important;

  font-size:
    8px !important;

  letter-spacing:
    .08em !important;
}


/* дата */

html[data-svoi-theme]
.event-picker-date b {
  font-size:
    14px !important;

  overflow:
    visible !important;

  text-overflow:
    clip !important;
}


/* ВРЕМЯ — БЕЗ ... */

html[data-svoi-theme]
.event-picker-time b {
  width:
    100% !important;

  overflow:
    visible !important;

  white-space:
    nowrap !important;

  text-overflow:
    clip !important;

  font-size:
    16px !important;

  line-height:
    1 !important;

  letter-spacing:
    -.02em !important;

  font-variant-numeric:
    tabular-nums !important;
}


/* чуть тоньше разделитель */

html[data-svoi-theme]
.event-picker-part + .event-picker-part {
  border-left-width:
    1px !important;
}


/* BUTTON — спокойнее */

html:not([data-svoi-theme="dark"])
.event-submit-v2 {
  background:
    linear-gradient(
      105deg,
      #8376d9,
      #727ed6 52%,
      #668ad5
    ) !important;

  box-shadow:
    0 8px 20px rgba(92,88,183,.15),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}


html[data-svoi-theme="dark"]
.event-submit-v2 {
  background:
    linear-gradient(
      105deg,
      #5f5aab,
      #5966ad 52%,
      #526fae
    ) !important;

  box-shadow:
    0 8px 20px rgba(9,13,49,.24),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}


/* very small iPhone */

@media (max-width: 380px) {

  html[data-svoi-theme]
  .event-datetime-card {
    grid-template-columns:
      minmax(0,1fr) 67px !important;
  }

  html[data-svoi-theme]
  .event-picker-date b {
    font-size:
      13px !important;
  }

  html[data-svoi-theme]
  .event-picker-time b {
    font-size:
      15px !important;
  }

}



/* ===== SOURCE: event-detail-final.css ===== */

/* ==========================================================
   NAMI — EVENT DETAIL V2
   LIGHT + DARK + AUTO
   ========================================================== */


html[data-svoi-theme]
.event-detail-v2 {
  display: grid !important;

  gap: 12px !important;

  padding-bottom: 2px !important;
}


/* ==========================================================
   HEADING
   ========================================================== */

html[data-svoi-theme]
.event-detail-heading {
  margin:
    2px 0
    7px !important;
}


html[data-svoi-theme]
.event-detail-context {
  width: fit-content !important;

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  padding:
    7px 11px !important;

  border-radius:
    999px !important;

  color:
    #7668d8 !important;

  font-size:
    11px !important;

  line-height:
    1 !important;

  font-weight:
    800 !important;
}


html[data-svoi-theme]
.event-detail-heading h2 {
  margin:
    15px 0 0 !important;

  color:
    var(--text) !important;

  font-size:
    clamp(
      27px,
      7.4vw,
      34px
    ) !important;

  line-height:
    1.03 !important;

  letter-spacing:
    -.045em !important;

  font-weight:
    850 !important;
}


/* ==========================================================
   DATE + TIME MAIN CARD
   ========================================================== */

html[data-svoi-theme]
.event-detail-main-card {
  display: grid !important;

  grid-template-columns:
    52px minmax(0,1fr) !important;

  align-items:
    center !important;

  gap:
    13px !important;

  min-height:
    92px !important;

  padding:
    14px !important;

  border-radius:
    23px !important;

  box-sizing:
    border-box !important;
}


html[data-svoi-theme]
.event-detail-main-icon {
  width:
    52px !important;

  height:
    52px !important;

  display:
    grid !important;

  place-items:
    center !important;

  border-radius:
    17px !important;

  color:
    #7667db !important;
}


html[data-svoi-theme]
.event-detail-main-copy {
  min-width:
    0 !important;
}


html[data-svoi-theme]
.event-detail-main-copy small,
html[data-svoi-theme]
.event-detail-space-card small,
html[data-svoi-theme]
.event-detail-note small {
  display:
    block !important;

  color:
    #887be2 !important;

  font-size:
    9px !important;

  line-height:
    1 !important;

  font-weight:
    850 !important;

  letter-spacing:
    .13em !important;
}


html[data-svoi-theme]
.event-detail-main-copy b {
  display:
    block !important;

  margin:
    6px 0 4px !important;

  color:
    var(--text) !important;

  font-size:
    20px !important;

  line-height:
    1.05 !important;

  font-weight:
    850 !important;

  letter-spacing:
    -.025em !important;
}


html[data-svoi-theme]
.event-detail-main-copy span {
  display:
    block !important;

  color:
    var(--muted) !important;

  font-size:
    12px !important;

  line-height:
    1.25 !important;

  font-weight:
    600 !important;

  font-variant-numeric:
    tabular-nums !important;
}


/* ==========================================================
   SPACE CARD
   ========================================================== */

html[data-svoi-theme]
.event-detail-space-card {
  display:
    grid !important;

  grid-template-columns:
    46px minmax(0,1fr) !important;

  align-items:
    center !important;

  gap:
    12px !important;

  min-height:
    70px !important;

  padding:
    11px 13px !important;

  border-radius:
    20px !important;

  box-sizing:
    border-box !important;
}


html[data-svoi-theme]
.event-detail-space-icon {
  width:
    46px !important;

  height:
    46px !important;

  display:
    grid !important;

  place-items:
    center !important;

  border-radius:
    15px !important;

  color:
    #7769dc !important;
}


html[data-svoi-theme]
.event-detail-space-card b {
  display:
    block !important;

  overflow:
    hidden !important;

  margin-top:
    5px !important;

  color:
    var(--text) !important;

  font-size:
    14px !important;

  line-height:
    1.15 !important;

  font-weight:
    800 !important;

  white-space:
    nowrap !important;

  text-overflow:
    ellipsis !important;
}


/* ==========================================================
   NOTE
   ========================================================== */

html[data-svoi-theme]
.event-detail-note {
  padding:
    15px !important;

  border-radius:
    20px !important;
}


html[data-svoi-theme]
.event-detail-note p {
  margin:
    9px 0 0 !important;

  color:
    var(--text) !important;

  font-size:
    13px !important;

  line-height:
    1.45 !important;

  font-weight:
    500 !important;

  white-space:
    pre-wrap !important;
}


/* ==========================================================
   ACTIONS
   ========================================================== */

html[data-svoi-theme]
.event-detail-actions {
  display:
    grid !important;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    ) !important;

  gap:
    8px !important;

  margin-top:
    2px !important;
}


html[data-svoi-theme]
.event-detail-actions
button {
  min-width:
    0 !important;

  min-height:
    50px !important;

  padding:
    0 9px !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    7px !important;

  border-radius:
    16px !important;

  font-size:
    12px !important;

  font-weight:
    800 !important;

  white-space:
    nowrap !important;
}


html[data-svoi-theme]
.event-detail-delete {
  width:
    100% !important;

  min-height:
    49px !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    8px !important;

  margin-top:
    1px !important;

  border-radius:
    16px !important;

  font-size:
    12px !important;

  font-weight:
    800 !important;
}


/* ==========================================================
   LIGHT
   ========================================================== */

html:not([data-svoi-theme="dark"])
.event-detail-context {
  background:
    linear-gradient(
      145deg,
      rgba(239,234,255,.91),
      rgba(231,237,255,.85)
    ) !important;

  border:
    1px solid
    rgba(216,215,247,.92) !important;
}


html:not([data-svoi-theme="dark"])
.event-detail-main-card,
html:not([data-svoi-theme="dark"])
.event-detail-space-card,
html:not([data-svoi-theme="dark"])
.event-detail-note {

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.83),
      rgba(247,246,255,.69)
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.94) !important;

  box-shadow:
    0 8px 23px
      rgba(79,70,142,.045),
    inset 0 1px 0
      rgba(255,255,255,.98) !important;
}


html:not([data-svoi-theme="dark"])
.event-detail-main-icon,
html:not([data-svoi-theme="dark"])
.event-detail-space-icon {

  background:
    linear-gradient(
      145deg,
      rgba(237,230,255,.94),
      rgba(227,235,255,.90)
    ) !important;

  border:
    1px solid
    rgba(218,218,248,.94) !important;
}


html:not([data-svoi-theme="dark"])
.event-detail-actions
button {

  color:
    #4f4b7d !important;

  background:
    linear-gradient(
      145deg,
      rgba(242,239,255,.94),
      rgba(232,238,255,.90)
    ) !important;

  border:
    1px solid
    rgba(219,220,248,.93) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.98) !important;
}


html:not([data-svoi-theme="dark"])
.event-detail-delete {
  color:
    #bd6c79 !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,249,250,.95),
      rgba(255,241,244,.88)
    ) !important;

  border:
    1px solid
    rgba(237,201,209,.82) !important;
}


/* ==========================================================
   DARK
   ========================================================== */

html[data-svoi-theme="dark"]
.event-detail-context {
  color:
    #aaa0ff !important;

  background:
    linear-gradient(
      145deg,
      rgba(69,62,139,.24),
      rgba(46,57,115,.20)
    ) !important;

  border:
    1px solid
    rgba(124,119,211,.14) !important;
}


html[data-svoi-theme="dark"]
.event-detail-main-card,
html[data-svoi-theme="dark"]
.event-detail-space-card,
html[data-svoi-theme="dark"]
.event-detail-note {

  background:
    linear-gradient(
      145deg,
      rgba(25,31,53,.92),
      rgba(18,23,40,.95)
    ) !important;

  border:
    1px solid
    rgba(103,111,189,.14) !important;

  box-shadow:
    0 9px 25px
      rgba(1,4,18,.16),
    inset 0 1px 0
      rgba(255,255,255,.03) !important;
}


html[data-svoi-theme="dark"]
.event-detail-main-icon,
html[data-svoi-theme="dark"]
.event-detail-space-icon {

  color:
    #aaa0ff !important;

  background:
    linear-gradient(
      145deg,
      rgba(79,71,164,.20),
      rgba(52,65,130,.18)
    ) !important;

  border:
    1px solid
    rgba(126,121,216,.12) !important;
}


html[data-svoi-theme="dark"]
.event-detail-actions
button {

  color:
    #d9d7f5 !important;

  background:
    linear-gradient(
      145deg,
      rgba(39,40,70,.88),
      rgba(28,36,62,.91)
    ) !important;

  border:
    1px solid
    rgba(111,115,199,.16) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.035) !important;
}


html[data-svoi-theme="dark"]
.event-detail-delete {

  color:
    #df8793 !important;

  background:
    linear-gradient(
      145deg,
      rgba(52,25,38,.70),
      rgba(35,18,29,.78)
    ) !important;

  border:
    1px solid
    rgba(195,92,109,.15) !important;
}


/* ==========================================================
   SMALL IPHONE
   ========================================================== */

@media (max-width: 380px) {

  html[data-svoi-theme]
  .event-detail-heading h2 {
    font-size:
      27px !important;
  }

  html[data-svoi-theme]
  .event-detail-main-card {
    grid-template-columns:
      48px minmax(0,1fr) !important;

    padding:
      12px !important;
  }

  html[data-svoi-theme]
  .event-detail-main-icon {
    width:
      48px !important;

    height:
      48px !important;
  }

  html[data-svoi-theme]
  .event-detail-actions button {
    font-size:
      11px !important;
  }

}



/* ===== SOURCE: event-delete-final.css ===== */

/* ==========================================================
   NAMI — DELETE EVENT CONFIRMATION
   LIGHT + DARK + AUTO
   ========================================================== */

html[data-svoi-theme]
.event-delete-confirm {
  display: grid !important;

  justify-items: center !important;

  padding:
    8px 0
    2px !important;

  text-align:
    center !important;
}


/* ICON */

html[data-svoi-theme]
.event-delete-symbol {
  width:
    72px !important;

  height:
    72px !important;

  display:
    grid !important;

  place-items:
    center !important;

  margin-bottom:
    17px !important;

  border-radius:
    23px !important;

  color:
    #cf7180 !important;
}


/* COPY */

html[data-svoi-theme]
.event-delete-copy {
  width:
    100% !important;

  max-width:
    330px !important;
}


html[data-svoi-theme]
.event-delete-eyebrow {
  display:
    block !important;

  margin-bottom:
    10px !important;

  color:
    #c97986 !important;

  font-size:
    9px !important;

  line-height:
    1 !important;

  font-weight:
    850 !important;

  letter-spacing:
    .16em !important;
}


html[data-svoi-theme]
.event-delete-copy h3 {
  margin:
    0 !important;

  color:
    var(--text) !important;

  font-size:
    24px !important;

  line-height:
    1.08 !important;

  font-weight:
    850 !important;

  letter-spacing:
    -.035em !important;
}


html[data-svoi-theme]
.event-delete-copy p {
  max-width:
    290px !important;

  margin:
    11px auto
    0 !important;

  color:
    var(--muted) !important;

  font-size:
    13px !important;

  line-height:
    1.45 !important;

  font-weight:
    500 !important;
}


/* ACTIONS */

html[data-svoi-theme]
.event-delete-actions {
  width:
    100% !important;

  display:
    grid !important;

  grid-template-columns:
    1fr 1fr !important;

  gap:
    9px !important;

  margin-top:
    24px !important;
}


html[data-svoi-theme]
.event-delete-actions button {
  min-height:
    52px !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    7px !important;

  padding:
    0 14px !important;

  border-radius:
    17px !important;

  font-size:
    13px !important;

  font-weight:
    800 !important;

  transition:
    transform .16s ease !important;
}


html[data-svoi-theme]
.event-delete-actions button:active {
  transform:
    scale(.975) !important;
}


/* ==========================================================
   LIGHT
   ========================================================== */

html:not([data-svoi-theme="dark"])
.event-delete-symbol {
  background:
    linear-gradient(
      145deg,
      rgba(255,241,244,.96),
      rgba(250,229,235,.88)
    ) !important;

  border:
    1px solid
    rgba(239,207,215,.88) !important;

  box-shadow:
    0 10px 25px
      rgba(166,77,94,.06),
    inset 0 1px 0
      rgba(255,255,255,.98) !important;
}


html:not([data-svoi-theme="dark"])
.event-delete-cancel {
  color:
    #514f70 !important;

  background:
    linear-gradient(
      145deg,
      rgba(244,241,255,.95),
      rgba(234,239,255,.91)
    ) !important;

  border:
    1px solid
    rgba(220,220,248,.94) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.98) !important;
}


html:not([data-svoi-theme="dark"])
.event-delete-confirm-button {
  color:
    #bf6575 !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,245,247,.98),
      rgba(255,232,237,.92)
    ) !important;

  border:
    1px solid
    rgba(238,195,204,.88) !important;

  box-shadow:
    0 7px 18px
      rgba(168,71,88,.06),
    inset 0 1px 0
      rgba(255,255,255,.96) !important;
}


/* ==========================================================
   DARK
   ========================================================== */

html[data-svoi-theme="dark"]
.event-delete-symbol {
  color:
    #e28b98 !important;

  background:
    linear-gradient(
      145deg,
      rgba(76,34,48,.72),
      rgba(48,25,37,.82)
    ) !important;

  border:
    1px solid
    rgba(190,90,106,.16) !important;

  box-shadow:
    0 10px 25px
      rgba(0,0,0,.16),
    inset 0 1px 0
      rgba(255,255,255,.025) !important;
}


html[data-svoi-theme="dark"]
.event-delete-cancel {
  color:
    #d8d6ef !important;

  background:
    linear-gradient(
      145deg,
      rgba(37,39,67,.92),
      rgba(27,34,58,.94)
    ) !important;

  border:
    1px solid
    rgba(108,113,195,.15) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.03) !important;
}


html[data-svoi-theme="dark"]
.event-delete-confirm-button {
  color:
    #e28a97 !important;

  background:
    linear-gradient(
      145deg,
      rgba(62,28,42,.82),
      rgba(41,21,32,.88)
    ) !important;

  border:
    1px solid
    rgba(192,87,104,.17) !important;

  box-shadow:
    0 8px 20px
      rgba(0,0,0,.14),
    inset 0 1px 0
      rgba(255,255,255,.025) !important;
}


/* SMALL IPHONE */

@media (max-width: 380px) {

  html[data-svoi-theme]
  .event-delete-symbol {
    width:
      66px !important;

    height:
      66px !important;

    border-radius:
      21px !important;
  }

  html[data-svoi-theme]
  .event-delete-copy h3 {
    font-size:
      22px !important;
  }

  html[data-svoi-theme]
  .event-delete-actions button {
    min-height:
      49px !important;
  }

}



/* ===== SOURCE: spaces-v2.css ===== */

/* ==========================================================
   NAMI SPACES V2
   LIGHT + DARK + AUTO
   ========================================================== */


.space-dashboard-v2 {
  display:
    block;

  padding-bottom:
    14px;
}


/* ==========================================================
   HEADER
   ========================================================== */

.space-dashboard-head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  margin:
    9px 0 12px;
}


.space-dashboard-title {
  min-width:
    0;
}


.space-dashboard-title small {
  display:
    block;

  margin-bottom:
    5px;

  color:
    #887be2;

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    .13em;
}


.space-dashboard-title h1 {
  overflow:
    hidden;

  margin:
    0;

  color:
    var(--text);

  font-size:
    30px;

  line-height:
    1.02;

  font-weight:
    870;

  letter-spacing:
    -.045em;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


/* ==========================================================
   MEMBERS
   ========================================================== */

.space-dashboard-people {
  display:
    grid;

  grid-template-columns:
    minmax(0,1fr) 46px;

  gap:
    8px;

  margin-bottom:
    25px;
}


.space-dashboard-members {
  min-width:
    0;

  min-height:
    61px;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  padding:
    9px 12px;

  border-radius:
    20px;

  text-align:
    left;
}


.space-dashboard-avatar-stack {
  display:
    flex;

  align-items:
    center;

  min-width:
    52px;
}


.space-dashboard-avatar {
  width:
    31px;

  height:
    31px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  margin-left:
    -9px;

  border-radius:
    50%;
}


.space-dashboard-avatar:first-child {
  margin-left:
    0;
}


.space-dashboard-avatar
.mini-avatar,
.space-dashboard-avatar
.avatar,
.space-dashboard-avatar
img {
  width:
    100% !important;

  height:
    100% !important;

  border-radius:
    50% !important;
}


.space-dashboard-member-copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.space-dashboard-member-copy b {
  color:
    var(--text);

  font-size:
    12px;

  font-weight:
    790;
}


.space-dashboard-member-copy small {
  overflow:
    hidden;

  color:
    var(--muted);

  font-size:
    10px;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


.space-dashboard-invite {
  width:
    46px;

  height:
    61px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    18px;

  color:
    #7669d9;
}


/* ==========================================================
   SECTION TITLES
   ========================================================== */

.space-section-head {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    12px;

  margin:
    0 1px 10px;
}


.space-section-head:not(:first-of-type) {
  margin-top:
    23px;
}


.space-section-head > div small {
  display:
    block;

  margin-bottom:
    4px;

  color:
    #9185df;

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    .13em;
}


.space-section-head h2 {
  margin:
    0;

  color:
    var(--text);

  font-size:
    19px;

  line-height:
    1.05;

  font-weight:
    840;

  letter-spacing:
    -.025em;
}


.space-section-add,
.space-section-link {
  min-height:
    31px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  padding:
    0 10px;

  border-radius:
    11px;

  color:
    #7569cf;

  font-size:
    10px;

  font-weight:
    800;
}


.space-section-content {
  width:
    100%;
}


/* ==========================================================
   EMPTY ACTION
   ========================================================== */

.space-empty-action {
  width:
    100%;

  min-height:
    76px;

  display:
    grid;

  grid-template-columns:
    45px minmax(0,1fr) 28px;

  align-items:
    center;

  gap:
    11px;

  padding:
    12px;

  border-radius:
    21px;

  text-align:
    left;
}


.space-empty-action.compact {
  min-height:
    70px;
}


.space-empty-icon {
  width:
    45px;

  height:
    45px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    15px;

  color:
    #7769d9;
}


.space-empty-action > span:nth-child(2) {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.space-empty-action b {
  color:
    var(--text);

  font-size:
    12px;

  line-height:
    1.15;

  font-weight:
    790;
}


.space-empty-action small {
  color:
    var(--muted);

  font-size:
    10px;

  line-height:
    1.3;
}


.space-empty-plus {
  width:
    28px;

  height:
    28px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    10px;

  color:
    #8679db;
}


/* ==========================================================
   POLL
   ========================================================== */

.space-decision-card {
  width:
    100%;

  min-height:
    77px;

  display:
    grid;

  grid-template-columns:
    46px minmax(0,1fr) 28px;

  align-items:
    center;

  gap:
    11px;

  padding:
    12px;

  border-radius:
    21px;

  text-align:
    left;
}


.space-decision-icon {
  width:
    46px;

  height:
    46px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    15px;

  color:
    #796bdd;
}


.space-decision-copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;
}


.space-decision-copy small {
  margin-bottom:
    4px;

  color:
    #9084df;

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    .1em;
}


.space-decision-copy b {
  overflow:
    hidden;

  color:
    var(--text);

  font-size:
    13px;

  line-height:
    1.15;

  font-weight:
    800;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


.space-decision-copy span {
  margin-top:
    4px;

  color:
    var(--muted);

  font-size:
    10px;
}


.space-decision-arrow {
  width:
    28px;

  height:
    28px;

  display:
    grid;

  place-items:
    center;

  opacity:
    .6;
}


/* ==========================================================
   TASKS
   ========================================================== */

.space-task-list {
  display:
    grid;

  gap:
    7px;
}


.space-task-row {
  width:
    100%;

  min-height:
    59px;

  display:
    grid;

  grid-template-columns:
    34px minmax(0,1fr) 30px;

  align-items:
    center;

  gap:
    8px;

  padding:
    8px 9px;

  border-radius:
    18px;
}


.space-task-check {
  width:
    30px;

  height:
    30px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    10px;

  color:
    #fff;
}


.space-task-main {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    4px;

  text-align:
    left;
}


.space-task-main b {
  width:
    100%;

  overflow:
    hidden;

  color:
    var(--text);

  font-size:
    12px;

  font-weight:
    790;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


.space-task-main span {
  color:
    var(--muted);

  font-size:
    9.5px;
}


.space-task-chevron {
  width:
    30px;

  height:
    30px;

  display:
    grid;

  place-items:
    center;

  opacity:
    .55;
}


.space-task-row.done
.space-task-main b {
  text-decoration:
    line-through;

  opacity:
    .55;
}


.space-task-row.done
.space-task-main span {
  opacity:
    .5;
}


.space-all-tasks-button {
  width:
    100%;

  min-height:
    40px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  margin-top:
    8px;

  border-radius:
    14px;

  color:
    #776bd0;

  font-size:
    10px;

  font-weight:
    800;
}


/* ==========================================================
   QUICK CREATE
   ========================================================== */

.quick-create-v2 {
  padding-top:
    2px;
}


.quick-create-room {
  margin-bottom:
    13px;
}


.quick-create-options {
  display:
    grid;

  gap:
    8px;
}


.quick-create-option {
  width:
    100%;

  min-height:
    72px;

  display:
    grid;

  grid-template-columns:
    46px minmax(0,1fr) 24px;

  align-items:
    center;

  gap:
    11px;

  padding:
    11px 12px;

  border-radius:
    20px;

  text-align:
    left;
}


.quick-create-option-icon {
  width:
    46px;

  height:
    46px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    15px;

  color:
    #7769da;
}


.quick-create-option > span:nth-child(2) {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.quick-create-option b {
  color:
    var(--text);

  font-size:
    13px;

  font-weight:
    800;
}


.quick-create-option small {
  color:
    var(--muted);

  font-size:
    10px;

  line-height:
    1.3;
}


.quick-create-empty {
  display:
    grid;

  justify-items:
    center;

  padding:
    10px 0 2px;

  text-align:
    center;
}


.quick-create-empty-icon {
  width:
    61px;

  height:
    61px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    14px;

  border-radius:
    20px;

  color:
    #786bd9;
}


.quick-create-empty h3 {
  margin:
    0;

  color:
    var(--text);

  font-size:
    19px;

  font-weight:
    830;
}


.quick-create-empty p {
  max-width:
    280px;

  margin:
    8px auto 18px;

  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.4;
}


/* ==========================================================
   TASK FORM + PAGE
   ========================================================== */

.task-form-v2
textarea {
  min-height:
    86px !important;
}


.task-save-button {
  margin-top:
    3px;
}


.task-delete-button {
  width:
    100%;

  min-height:
    47px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  border-radius:
    15px;

  color:
    #c8707e;

  font-size:
    11px;

  font-weight:
    800;
}


.tasks-page-v2 {
  display:
    grid;

  gap:
    8px;
}


.tasks-page-section-title {
  margin:
    12px 2px 2px;

  color:
    #8d80de;

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    .12em;
}


.tasks-page-section-title.completed {
  margin-top:
    22px;
}


/* ==========================================================
   BOTTOM NAV CREATE BUTTON
   ========================================================== */

#bottomNav {
  grid-template-columns:
    repeat(4,minmax(0,1fr)) !important;
}


#bottomNav
.nami-create-nav {
  position:
    relative;

  overflow:
    visible !important;
}


#bottomNav
.nami-create-nav-icon {
  width:
    45px;

  height:
    45px;

  display:
    grid;

  place-items:
    center;

  margin:
    -13px auto 3px;

  border-radius:
    15px;

  color:
    #fff;
}


#bottomNav
.nami-create-nav > svg {
  display:
    none !important;
}


/* ==========================================================
   LIGHT
   ========================================================== */

html:not([data-svoi-theme="dark"])
.space-dashboard-members,
html:not([data-svoi-theme="dark"])
.space-dashboard-invite,
html:not([data-svoi-theme="dark"])
.space-empty-action,
html:not([data-svoi-theme="dark"])
.space-decision-card,
html:not([data-svoi-theme="dark"])
.space-task-row,
html:not([data-svoi-theme="dark"])
.space-all-tasks-button,
html:not([data-svoi-theme="dark"])
.quick-create-option,
html:not([data-svoi-theme="dark"])
.task-delete-button {

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.86),
      rgba(246,245,255,.72)
    );

  border:
    1px solid
    rgba(255,255,255,.94);

  box-shadow:
    0 7px 21px
      rgba(82,73,148,.045),
    inset 0 1px 0
      rgba(255,255,255,.98);
}


html:not([data-svoi-theme="dark"])
.space-section-add,
html:not([data-svoi-theme="dark"])
.space-section-link {

  background:
    linear-gradient(
      145deg,
      rgba(240,235,255,.92),
      rgba(229,236,255,.90)
    );

  border:
    1px solid
    rgba(218,217,247,.92);
}


html:not([data-svoi-theme="dark"])
.space-dashboard-invite,
html:not([data-svoi-theme="dark"])
.space-empty-icon,
html:not([data-svoi-theme="dark"])
.space-empty-plus,
html:not([data-svoi-theme="dark"])
.space-decision-icon,
html:not([data-svoi-theme="dark"])
.quick-create-option-icon,
html:not([data-svoi-theme="dark"])
.quick-create-empty-icon {

  background:
    linear-gradient(
      145deg,
      rgba(238,231,255,.95),
      rgba(226,235,255,.91)
    );

  border:
    1px solid
    rgba(216,216,247,.93);
}


html:not([data-svoi-theme="dark"])
.space-dashboard-avatar {
  border:
    2px solid
    #f9f7fc;
}


html:not([data-svoi-theme="dark"])
.space-task-check {
  color:
    #8579d9;

  background:
    rgba(238,235,250,.88);

  border:
    1px solid
    rgba(210,207,237,.95);
}


html:not([data-svoi-theme="dark"])
.space-task-check.checked {
  color:
    #fff;

  background:
    linear-gradient(
      145deg,
      #887bdd,
      #7586dc
    );
}


html:not([data-svoi-theme="dark"])
#bottomNav
.nami-create-nav-icon {

  background:
    linear-gradient(
      145deg,
      #8274d9,
      #677fd6
    );

  box-shadow:
    0 7px 17px
      rgba(92,82,179,.24),
    inset 0 1px 0
      rgba(255,255,255,.25);
}


/* ==========================================================
   DARK
   ========================================================== */

html[data-svoi-theme="dark"]
.space-dashboard-members,
html[data-svoi-theme="dark"]
.space-dashboard-invite,
html[data-svoi-theme="dark"]
.space-empty-action,
html[data-svoi-theme="dark"]
.space-decision-card,
html[data-svoi-theme="dark"]
.space-task-row,
html[data-svoi-theme="dark"]
.space-all-tasks-button,
html[data-svoi-theme="dark"]
.quick-create-option,
html[data-svoi-theme="dark"]
.task-delete-button {

  background:
    linear-gradient(
      145deg,
      rgba(25,31,53,.91),
      rgba(18,23,40,.95)
    );

  border:
    1px solid
    rgba(103,111,189,.14);

  box-shadow:
    0 8px 24px
      rgba(1,4,18,.16),
    inset 0 1px 0
      rgba(255,255,255,.03);
}


html[data-svoi-theme="dark"]
.space-section-add,
html[data-svoi-theme="dark"]
.space-section-link {

  color:
    #b0a7ff;

  background:
    linear-gradient(
      145deg,
      rgba(64,59,119,.31),
      rgba(42,51,96,.27)
    );

  border:
    1px solid
    rgba(120,118,203,.13);
}


html[data-svoi-theme="dark"]
.space-dashboard-invite,
html[data-svoi-theme="dark"]
.space-empty-icon,
html[data-svoi-theme="dark"]
.space-empty-plus,
html[data-svoi-theme="dark"]
.space-decision-icon,
html[data-svoi-theme="dark"]
.quick-create-option-icon,
html[data-svoi-theme="dark"]
.quick-create-empty-icon {

  color:
    #aaa0ff;

  background:
    linear-gradient(
      145deg,
      rgba(79,71,164,.20),
      rgba(52,65,130,.18)
    );

  border:
    1px solid
    rgba(126,121,216,.12);
}


html[data-svoi-theme="dark"]
.space-dashboard-avatar {
  border:
    2px solid
    #111522;
}


html[data-svoi-theme="dark"]
.space-task-check {

  color:
    #aaa1f6;

  background:
    rgba(59,59,100,.42);

  border:
    1px solid
    rgba(119,117,195,.16);
}


html[data-svoi-theme="dark"]
.space-task-check.checked {

  color:
    #fff;

  background:
    linear-gradient(
      145deg,
      #655ead,
      #536bad
    );
}


html[data-svoi-theme="dark"]
#bottomNav
.nami-create-nav-icon {

  background:
    linear-gradient(
      145deg,
      #635dac,
      #526dad
    );

  box-shadow:
    0 8px 20px
      rgba(0,0,0,.24),
    inset 0 1px 0
      rgba(255,255,255,.08);
}


/* ==========================================================
   SMALL IPHONE
   ========================================================== */

@media (max-width: 380px) {

  .space-dashboard-title h1 {
    font-size:
      27px;
  }

  .space-dashboard-members {
    padding:
      8px 10px;
  }

  .space-dashboard-member-copy small {
    display:
      none;
  }

  .space-empty-action,
  .space-decision-card {
    grid-template-columns:
      42px minmax(0,1fr) 25px;
  }

  .space-empty-icon,
  .space-decision-icon {
    width:
      42px;

    height:
      42px;
  }

  .quick-create-option {
    grid-template-columns:
      43px minmax(0,1fr) 22px;
  }

  .quick-create-option-icon {
    width:
      43px;

    height:
      43px;
  }
}



/* ===== SOURCE: work-home-card.css ===== */
.profile-home .space-profile-card.work {
  min-height:166px !important;
  height:166px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  padding:18px 14px !important;
  border-radius:25px !important;
  text-align:center !important;
}

.profile-home .space-profile-card.work .space-profile-visual {
  width:64px !important;
  height:64px !important;
  min-height:64px !important;
  flex:0 0 64px !important;
  margin:0 auto 12px !important;
  border-radius:19px !important;
}

.profile-home .space-profile-card.work .space-profile-visual::before,
.profile-home .space-profile-card.work .space-profile-visual::after {
  display:none !important;
}

.profile-home .space-profile-card.work .space-profile-main-icon {
  width:64px !important;
  height:64px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:19px !important;
}

.profile-home .space-profile-card.work .space-profile-info {
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  padding:0 !important;
  text-align:center !important;
}

.profile-home .space-profile-card.work .space-profile-info small {
  margin-bottom:6px !important;
  font-size:8px !important;
  letter-spacing:.12em !important;
}

.profile-home .space-profile-card.work .space-profile-info b {
  font-size:15px !important;
}

.profile-home .space-profile-card.work .space-profile-info > span {
  margin-top:5px !important;
  font-size:9.5px !important;
}

html:not([data-svoi-theme="dark"])
.profile-home .space-profile-card.work .space-profile-main-icon {
  color:#667dcc !important;
  background:linear-gradient(145deg,#edf1ff,#e5e9fb) !important;
}

html[data-svoi-theme="dark"]
.profile-home .space-profile-card.work .space-profile-main-icon {
  color:#9eafff !important;
  background:linear-gradient(145deg,rgba(67,78,139,.45),rgba(45,53,94,.48)) !important;
}

/* WORK SCREEN */

.work-v1-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin:10px 0 14px;
}

.work-v1-head small,
.work-v1-section-head small {
  color:#7484cc;
  font-size:9px;
  font-weight:850;
  letter-spacing:.13em;
}

.work-v1-head h1 {
  margin:5px 0 5px;
  font-size:31px;
  line-height:1;
  color:var(--text);
}

.work-v1-head span {
  color:var(--muted);
  font-size:11px;
}

.work-v1-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.work-v1-actions button {
  min-height:72px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px;
  border-radius:20px;
  text-align:left;
}

.work-v1-actions button > span {
  display:flex;
  flex-direction:column;
  gap:3px;
}

.work-v1-actions b {
  color:var(--text);
  font-size:12px;
}

.work-v1-actions small {
  color:var(--muted);
  font-size:9px;
}

.work-v1-section {
  margin-top:23px;
}

.work-v1-section-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:9px;
}

.work-v1-section-head h2 {
  margin:4px 0 0;
  color:var(--text);
  font-size:19px;
}

.work-v1-section-head button {
  color:#7280ca;
  font-size:10px;
  font-weight:800;
}

.work-v1-list {
  display:grid;
  gap:7px;
}

.work-v1-task,
.work-v1-empty {
  width:100%;
  min-height:64px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 12px;
  border-radius:19px;
  text-align:left;
}

.work-v1-task > div,
.work-v1-empty > span {
  display:flex;
  flex-direction:column;
  gap:4px;
}

.work-v1-task b,
.work-v1-empty b {
  color:var(--text);
  font-size:12px;
}

.work-v1-task small,
.work-v1-empty small {
  color:var(--muted);
  font-size:9.5px;
}

.work-v1-check {
  width:27px;
  height:27px;
  flex:0 0 27px;
  border-radius:9px;
}

html:not([data-svoi-theme="dark"]) .work-v1-actions button,
html:not([data-svoi-theme="dark"]) .work-v1-task,
html:not([data-svoi-theme="dark"]) .work-v1-empty {
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);
}

html:not([data-svoi-theme="dark"]) .work-v1-check {
  background:#edf0fb;
  border:1px solid #d9dff3;
}

html[data-svoi-theme="dark"] .work-v1-actions button,
html[data-svoi-theme="dark"] .work-v1-task,
html[data-svoi-theme="dark"] .work-v1-empty {
  background:rgba(24,29,47,.86);
  border:1px solid rgba(118,128,190,.13);
}

html[data-svoi-theme="dark"] .work-v1-check {
  background:rgba(73,82,130,.35);
  border:1px solid rgba(126,137,202,.16);
}


.work-v1-actions {
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

@media(max-width:380px) {
  .work-v1-actions button {
    padding:10px 7px !important;
  }

  .work-v1-actions small {
    display:none;
  }
}


/* WORK TASK INTERACTIONS */

.work-v1-task {
  display:grid !important;

  grid-template-columns:
    32px minmax(0,1fr) 28px !important;

  gap:9px !important;
}

.work-v1-check {
  display:grid !important;
  place-items:center !important;

  padding:0 !important;
}

.work-v1-task-main {
  min-width:0;

  display:flex;
  flex-direction:column;

  align-items:flex-start;

  gap:4px;

  text-align:left;
}

.work-v1-task-main b {
  width:100%;

  overflow:hidden;

  color:var(--text);

  font-size:12px;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.work-v1-task-main small {
  color:var(--muted);

  font-size:9.5px;
}

.work-v1-task-arrow {
  width:28px;
  height:28px;

  display:grid;
  place-items:center;

  opacity:.55;
}


/* TASK DONE CONFIRM */

.work-task-confirm {
  display:flex;
  flex-direction:column;
  align-items:center;

  padding:8px 0 2px;

  text-align:center;
}

.work-task-confirm-icon {
  width:58px;
  height:58px;

  display:grid;
  place-items:center;

  margin-bottom:14px;

  border-radius:19px;

  color:#7380d1;
}

.work-task-confirm h3 {
  margin:0;

  color:var(--text);

  font-size:19px;
  font-weight:830;
}

.work-task-confirm p {
  margin:7px 0 18px;

  color:var(--muted);

  font-size:11px;
}

.work-task-confirm-actions {
  width:100%;

  display:grid;
  grid-template-columns:1fr 1fr;

  gap:8px;
}

.work-task-confirm-actions button {
  min-height:48px;
  border-radius:15px;
}

html:not([data-svoi-theme="dark"])
.work-task-confirm-icon {
  background:#edf0fb;
  border:1px solid #dde2f4;
}

html[data-svoi-theme="dark"]
.work-task-confirm-icon {
  background:rgba(68,77,128,.34);
  border:1px solid rgba(124,134,198,.15);
}


/* ALL WORK TASKS */

.work-all-tasks {
  display:grid;
  gap:8px;
}

.work-all-title {
  margin:15px 2px 1px;

  color:#7887d0;

  font-size:9px;
  font-weight:850;

  letter-spacing:.12em;
}

.work-all-title.done {
  margin-top:20px;
}

.work-all-task {
  min-height:58px;

  display:grid;

  grid-template-columns:
    32px minmax(0,1fr);

  align-items:center;

  gap:9px;

  padding:9px 10px;

  border-radius:18px;
}

.work-all-task.completed {
  grid-template-columns:
    32px minmax(0,1fr) auto;
}

.work-all-task-main {
  min-width:0;

  display:flex;
  flex-direction:column;

  align-items:flex-start;

  gap:4px;

  text-align:left;
}

.work-all-task-main b {
  max-width:100%;

  overflow:hidden;

  color:var(--text);

  font-size:12px;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.work-all-task-main small {
  color:var(--muted);

  font-size:9.5px;
}

.work-all-task.completed b {
  text-decoration:line-through;
  opacity:.55;
}

.work-v1-check.completed {
  display:grid;
  place-items:center;

  color:#fff;
  background:#7180cc;
}

.work-task-restore {
  padding:7px 9px;

  border-radius:10px;

  color:#7886cf;

  font-size:9px;
  font-weight:800;
}

.work-all-empty {
  padding:17px;

  color:var(--muted);

  font-size:11px;

  text-align:center;
}

html:not([data-svoi-theme="dark"])
.work-all-task {
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);
}

html[data-svoi-theme="dark"]
.work-all-task {
  background:rgba(24,29,47,.86);
  border:1px solid rgba(118,128,190,.13);
}


/* =========================================================
   WORK SCREEN — CLEAN BUTTONS
   ========================================================= */

.work-v1-task-main,
.work-v1-task-arrow {
  appearance:none !important;
  -webkit-appearance:none !important;

  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;

  padding:0 !important;
  margin:0 !important;
}


/* название задачи занимает всё место */

.work-v1-task-main {
  width:100% !important;
}


/* стрелка без отдельного серого квадрата */

.work-v1-task-arrow {
  width:28px !important;
  height:28px !important;

  display:grid !important;
  place-items:center !important;

  border-radius:9px !important;

  color:var(--muted) !important;
}


/* Все / Добавить / Опрос */

.work-v1-section-head > button {
  appearance:none !important;
  -webkit-appearance:none !important;

  min-height:30px !important;

  padding:0 10px !important;

  border:0 !important;
  border-radius:11px !important;

  box-shadow:none !important;

  font-size:10px !important;
  font-weight:800 !important;
}


/* LIGHT */

html:not([data-svoi-theme="dark"])
.work-v1-section-head > button {
  color:#7066c8 !important;

  background:
    rgba(239,237,252,.82) !important;
}


/* DARK */

html[data-svoi-theme="dark"]
.work-v1-section-head > button {
  color:#a8a4ef !important;

  background:
    rgba(69,70,112,.28) !important;
}


/* сама задача ровнее */

.work-v1-task {
  padding:10px 12px !important;

  grid-template-columns:
    32px minmax(0,1fr) 24px !important;
}


.work-v1-task-main b,
.work-v1-task-main small {
  background:transparent !important;
}


.work-v1-task-arrow svg {
  width:14px !important;
  height:14px !important;
}


/* =========================================================
   WORK SCREEN — CLEAN BUTTONS
   ========================================================= */

.work-v1-task-main,
.work-v1-task-arrow {
  appearance:none !important;
  -webkit-appearance:none !important;

  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;

  padding:0 !important;
  margin:0 !important;
}


/* название задачи занимает всё место */

.work-v1-task-main {
  width:100% !important;
}


/* стрелка без отдельного серого квадрата */

.work-v1-task-arrow {
  width:28px !important;
  height:28px !important;

  display:grid !important;
  place-items:center !important;

  border-radius:9px !important;

  color:var(--muted) !important;
}


/* Все / Добавить / Опрос */

.work-v1-section-head > button {
  appearance:none !important;
  -webkit-appearance:none !important;

  min-height:30px !important;

  padding:0 10px !important;

  border:0 !important;
  border-radius:11px !important;

  box-shadow:none !important;

  font-size:10px !important;
  font-weight:800 !important;
}


/* LIGHT */

html:not([data-svoi-theme="dark"])
.work-v1-section-head > button {
  color:#7066c8 !important;

  background:
    rgba(239,237,252,.82) !important;
}


/* DARK */

html[data-svoi-theme="dark"]
.work-v1-section-head > button {
  color:#a8a4ef !important;

  background:
    rgba(69,70,112,.28) !important;
}


/* сама задача ровнее */

.work-v1-task {
  padding:10px 12px !important;

  grid-template-columns:
    32px minmax(0,1fr) 24px !important;
}


.work-v1-task-main b,
.work-v1-task-main small {
  background:transparent !important;
}


.work-v1-task-arrow svg {
  width:14px !important;
  height:14px !important;
}


/* WORK CREATE */

.work-create-list {
  display:grid;
  gap:8px;
}

.work-create-list > button {
  width:100%;
  min-height:70px;

  display:grid;
  grid-template-columns:44px minmax(0,1fr) 22px;

  align-items:center;
  gap:11px;

  padding:11px 12px;

  border-radius:20px;

  text-align:left;
}

.work-create-list > button > span {
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  border-radius:14px;

  color:#7d86d8;
}

.work-create-list > button > div {
  display:flex;
  flex-direction:column;
  gap:4px;
}

.work-create-list b {
  color:var(--text);
  font-size:13px;
}

.work-create-list small {
  color:var(--muted);
  font-size:9.5px;
}

html:not([data-svoi-theme="dark"])
.work-create-list > button {
  background:rgba(255,255,255,.76);
  border:1px solid rgba(255,255,255,.92);
}

html:not([data-svoi-theme="dark"])
.work-create-list > button > span {
  background:#edf0fb;
}

html[data-svoi-theme="dark"]
.work-create-list > button {
  background:rgba(24,29,47,.88);
  border:1px solid rgba(118,128,190,.14);
}

html[data-svoi-theme="dark"]
.work-create-list > button > span {
  background:rgba(69,78,130,.34);
}

/* bottom create */

#bottomNav .work-create-nav svg {
  color:#969ff0 !important;
}


.dot.work {
  background:#7187d4 !important;
}

.event-mini.work .event-mini-icon,
.event-mini-icon.work {
  color:#91a3f4 !important;
}


/* ALL TASKS — CLEAN ROWS */

.work-all-task-main {
  appearance:none !important;
  -webkit-appearance:none !important;

  width:100% !important;

  padding:0 !important;
  margin:0 !important;

  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;

  border-radius:0 !important;
}

.work-all-task-main b,
.work-all-task-main small {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.work-all-task {
  overflow:hidden !important;
}

.work-task-restore {
  appearance:none !important;
  -webkit-appearance:none !important;

  border:0 !important;
  box-shadow:none !important;

  min-height:34px !important;

  padding:0 12px !important;

  border-radius:11px !important;
}

html:not([data-svoi-theme="dark"])
.work-task-restore {
  color:#7268c8 !important;
  background:#eeecfa !important;
}

html[data-svoi-theme="dark"]
.work-task-restore {
  color:#aaa6ef !important;
  background:rgba(70,71,112,.36) !important;
}

.work-all-task.completed
.work-all-task-main {
  opacity:.65 !important;
}


.work-task-delete {
  width:100%;

  min-height:46px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:7px;

  margin-top:2px;

  border:0 !important;
  border-radius:15px !important;

  box-shadow:none !important;

  color:#c66d7c !important;

  font-size:11px;
  font-weight:800;
}

html:not([data-svoi-theme="dark"])
.work-task-delete {
  background:#fff2f4 !important;
}

html[data-svoi-theme="dark"]
.work-task-delete {
  background:rgba(121,54,69,.22) !important;
}


/* =========================================================
   WORK DECISION
   ========================================================= */

.work-decision-card {
  width:100%;

  display:block;

  padding:13px !important;

  border-radius:17px !important;

  text-align:left;

  box-shadow:none !important;
}


.work-decision-card-top {
  display:grid;

  grid-template-columns:
    minmax(0,1fr) 18px;

  gap:10px;

  align-items:center;
}


.work-decision-card-top > div {
  display:flex;
  flex-direction:column;

  gap:4px;

  min-width:0;
}


.work-decision-card-top small {
  font-size:8px;
  font-weight:800;

  letter-spacing:.08em;

  color:var(--muted);
}


.work-decision-card-top b {
  overflow:hidden;

  font-size:12px;

  color:var(--text);

  white-space:nowrap;
  text-overflow:ellipsis;
}


.work-decision-options {
  display:grid;

  gap:8px;

  margin-top:12px;
}


.work-decision-option > div {
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;

  font-size:10px;
}


.work-decision-option span {
  color:var(--text);
}


.work-decision-option b {
  color:var(--muted);

  font-size:9px;
}


.work-decision-option i {
  display:block;

  height:4px;

  margin-top:5px;

  overflow:hidden;

  border-radius:999px;
}


.work-decision-option em {
  display:block;

  height:100%;

  border-radius:inherit;

  background:linear-gradient(
    90deg,
    #8e91df,
    #b99bd8
  );
}


.work-decision-footer {
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;

  margin-top:12px;

  padding-top:10px;

  border-top:1px solid
    rgba(128,128,160,.12);
}


.work-decision-footer span {
  color:var(--muted);

  font-size:9px;
}


.work-decision-footer strong {
  color:#8e8ddd;

  font-size:9px;
}


html:not([data-svoi-theme="dark"])
.work-decision-card {
  background:
    rgba(255,255,255,.72) !important;

  border:
    1px solid
    rgba(222,221,240,.8) !important;
}


html:not([data-svoi-theme="dark"])
.work-decision-option i {
  background:#ecebf5;
}


html[data-svoi-theme="dark"]
.work-decision-card {
  background:
    rgba(24,29,47,.78) !important;

  border:
    1px solid
    rgba(126,131,185,.13) !important;
}


html[data-svoi-theme="dark"]
.work-decision-option i {
  background:
    rgba(104,108,151,.22);
}


/* =========================================================
   POLL SCREEN — CLEAN / EVEN
   ========================================================= */

.page-header:has(+ .friend-poll-summary) {
  display:grid !important;

  grid-template-columns:
    58px minmax(0,1fr) !important;

  align-items:center !important;

  gap:12px !important;

  margin-bottom:10px !important;
}


.page-header:has(+ .friend-poll-summary)
.icon-btn {
  width:54px !important;
  height:54px !important;

  padding:0 !important;

  display:grid !important;
  place-items:center !important;

  border-radius:18px !important;
}


.page-header:has(+ .friend-poll-summary)
> div:not(.spacer) {
  min-width:0 !important;
}


.page-header:has(+ .friend-poll-summary)
.kicker {
  display:block !important;

  margin:0 0 3px !important;

  font-size:9px !important;
  letter-spacing:.08em !important;
}


.page-header:has(+ .friend-poll-summary)
h1 {
  margin:0 !important;

  overflow:hidden !important;

  font-size:25px !important;
  line-height:1.08 !important;

  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}


/* SUMMARY */

.friend-poll-summary {
  min-height:64px !important;

  display:flex !important;

  align-items:center !important;
  justify-content:space-between !important;

  gap:12px !important;

  padding:13px 16px !important;

  margin:0 0 12px !important;

  border-radius:20px !important;
}


.friend-poll-summary span,
.friend-poll-summary b {
  margin:0 !important;
}


/* OPTIONS */

.friend-poll-vote-options {
  display:grid !important;

  gap:10px !important;
}


.friend-poll-vote-option {
  width:100% !important;

  min-height:78px !important;

  display:grid !important;

  grid-template-columns:
    44px minmax(0,1fr) 40px !important;

  align-items:center !important;

  gap:11px !important;

  padding:11px 13px !important;

  border-radius:20px !important;

  text-align:left !important;
}


.friend-poll-choice {
  width:44px !important;
  height:44px !important;

  display:grid !important;
  place-items:center !important;

  margin:0 !important;

  border-radius:14px !important;
}


.friend-poll-option-copy {
  min-width:0 !important;

  display:flex !important;
  flex-direction:column !important;

  gap:4px !important;
}


.friend-poll-option-copy b {
  width:100% !important;

  overflow:hidden !important;

  font-size:13px !important;

  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}


.friend-poll-option-copy small {
  width:100% !important;

  overflow:hidden !important;

  font-size:10px !important;

  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}


.friend-poll-count {
  width:38px !important;
  height:38px !important;

  display:grid !important;
  place-items:center !important;

  padding:0 !important;

  border-radius:12px !important;

  font-size:12px !important;
}


/* ACTIONS */

.friend-poll-save,
.friend-poll-close,
.friend-poll-delete {
  width:100% !important;

  min-height:52px !important;

  margin-top:10px !important;

  border-radius:18px !important;
}


.friend-poll-save {
  margin-top:16px !important;
}


.friend-poll-delete {
  margin-top:12px !important;
}


/* LIGHT */

html:not([data-svoi-theme="dark"])
.friend-poll-vote-option {
  background:
    rgba(255,255,255,.74) !important;

  border:
    1px solid
    rgba(214,216,234,.74) !important;
}


html:not([data-svoi-theme="dark"])
.friend-poll-vote-option.selected {
  background:
    rgba(239,244,255,.86) !important;

  border-color:
    rgba(108,130,220,.42) !important;
}


/* DARK */

html[data-svoi-theme="dark"]
.friend-poll-vote-option {
  background:
    rgba(24,29,47,.80) !important;

  border:
    1px solid
    rgba(120,128,180,.15) !important;
}


html[data-svoi-theme="dark"]
.friend-poll-vote-option.selected {
  background:
    rgba(43,52,86,.82) !important;

  border-color:
    rgba(132,146,229,.38) !important;
}


/* SMALL IPHONE */

@media (max-width:380px) {

  .friend-poll-vote-option {
    min-height:72px !important;

    grid-template-columns:
      40px minmax(0,1fr) 36px !important;

    gap:9px !important;
  }

  .friend-poll-choice {
    width:40px !important;
    height:40px !important;
  }

}


/* =========================================================
   WORK POLL CREATE — CLEAN ALIGNMENT
   ========================================================= */

.work-poll-form {
  display:grid !important;
  gap:14px !important;
}

.work-poll-form .field {
  margin:0 !important;
}

.work-poll-form .field > span {
  display:block !important;
  margin:0 0 7px 4px !important;

  font-size:11px !important;
  font-weight:750 !important;
}

.work-poll-form .field input {
  width:100% !important;
  height:56px !important;

  box-sizing:border-box !important;

  margin:0 !important;
  padding:0 15px !important;

  border-radius:18px !important;
}


/* Один / несколько */

.work-poll-form .friend-poll-mode {
  width:100% !important;

  display:grid !important;
  grid-template-columns:1fr 1fr !important;

  gap:4px !important;

  box-sizing:border-box !important;

  margin:0 !important;
  padding:4px !important;

  border-radius:19px !important;
}

.work-poll-form .friend-poll-mode button {
  width:100% !important;
  height:48px !important;

  margin:0 !important;
  padding:0 8px !important;

  border:0 !important;
  border-radius:15px !important;

  box-shadow:none !important;
}


/* Заголовок вариантов */

.work-poll-form .friend-poll-options-head {
  width:100% !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  gap:10px !important;

  box-sizing:border-box !important;

  margin:2px 0 0 !important;
  padding:0 4px !important;
}

.work-poll-form .friend-poll-options-head .text-btn {
  width:auto !important;

  margin:0 !important;
  padding:5px 0 !important;

  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}


/* Варианты */

.work-poll-form .friend-poll-option-list {
  display:grid !important;
  gap:9px !important;
}

.work-poll-form .friend-poll-option-row {
  width:100% !important;

  display:grid !important;

  grid-template-columns:
    28px minmax(0,1fr) 42px !important;

  align-items:center !important;

  gap:8px !important;

  box-sizing:border-box !important;

  margin:0 !important;
  padding:0 !important;
}

.work-poll-form .friend-poll-option-row > span {
  width:28px !important;

  margin:0 !important;

  text-align:center !important;

  font-size:11px !important;
  color:var(--muted) !important;
}

.work-poll-form
.friend-poll-option-row input {
  width:100% !important;
  height:54px !important;

  min-width:0 !important;

  box-sizing:border-box !important;

  margin:0 !important;
  padding:0 14px !important;

  border-radius:17px !important;
}

.work-poll-form
[data-remove-poll-option] {
  width:42px !important;
  height:42px !important;

  display:grid !important;
  place-items:center !important;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  border-radius:13px !important;

  box-shadow:none !important;
}


/* Создать */

.work-poll-form > button[type="submit"] {
  width:100% !important;
  min-height:54px !important;

  margin:2px 0 0 !important;

  border-radius:18px !important;
}


/* LIGHT */

html:not([data-svoi-theme="dark"])
.work-poll-form .friend-poll-mode {
  background:rgba(255,255,255,.60) !important;
}

html:not([data-svoi-theme="dark"])
.work-poll-form [data-remove-poll-option] {
  background:rgba(245,246,252,.88) !important;
}


/* DARK */

html[data-svoi-theme="dark"]
.work-poll-form .friend-poll-mode {
  background:rgba(28,33,52,.82) !important;
}

html[data-svoi-theme="dark"]
.work-poll-form [data-remove-poll-option] {
  background:rgba(47,52,76,.76) !important;
}


/* =========================================================
   WORK TASK — MULTI ASSIGNEES
   ========================================================= */

.work-assignees-field {
  display:grid;
  gap:9px;
}

.work-assignees-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 3px;
}

.work-assignees-head > span {
  font-size:11px;
  font-weight:750;
}

.work-assignees-head > small {
  font-size:9px;
  color:var(--muted);
}

.work-assignee-list {
  display:grid;
  gap:7px;
}

.work-assignee-option {
  width:100% !important;
  min-height:52px !important;

  display:grid !important;
  grid-template-columns:36px minmax(0,1fr) 28px !important;

  align-items:center !important;
  gap:10px !important;

  padding:8px 11px !important;

  border-radius:16px !important;
  box-shadow:none !important;

  text-align:left !important;
}

.work-assignee-avatar {
  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  border-radius:12px;

  font-size:12px;
  font-weight:850;
}

.work-assignee-option > b {
  overflow:hidden;

  color:var(--text);

  font-size:12px;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.work-assignee-check {
  width:26px;
  height:26px;

  display:grid;
  place-items:center;

  border-radius:9px;

  opacity:.25;
}

.work-assignee-option.selected
.work-assignee-check {
  opacity:1;
}

.work-assignees-hint {
  padding-left:3px;

  color:var(--muted);

  font-size:9px;
}


/* LIGHT */

html:not([data-svoi-theme="dark"])
.work-assignee-option {
  background:rgba(255,255,255,.72) !important;
  border:1px solid rgba(218,219,236,.75) !important;
}

html:not([data-svoi-theme="dark"])
.work-assignee-avatar {
  background:#eef0fb;
  color:#747dcc;
}

html:not([data-svoi-theme="dark"])
.work-assignee-check {
  background:#ececf5;
  color:#777fd2;
}

html:not([data-svoi-theme="dark"])
.work-assignee-option.selected {
  background:#f2f4ff !important;
  border-color:rgba(117,128,214,.34) !important;
}


/* DARK */

html[data-svoi-theme="dark"]
.work-assignee-option {
  background:rgba(24,29,47,.82) !important;
  border:1px solid rgba(121,129,181,.14) !important;
}

html[data-svoi-theme="dark"]
.work-assignee-avatar {
  background:rgba(74,82,132,.38);
  color:#b1b9ff;
}

html[data-svoi-theme="dark"]
.work-assignee-check {
  background:rgba(77,84,129,.35);
  color:#b4baff;
}

html[data-svoi-theme="dark"]
.work-assignee-option.selected {
  background:rgba(43,51,83,.82) !important;
  border-color:rgba(132,143,225,.34) !important;
}


/* =========================================================
   WORK TASK — MULTI ASSIGNEES
   ========================================================= */

.work-assignees-field {
  display:grid;
  gap:9px;
}

.work-assignees-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 3px;
}

.work-assignees-head > span {
  font-size:11px;
  font-weight:750;
}

.work-assignees-head > small {
  font-size:9px;
  color:var(--muted);
}

.work-assignee-list {
  display:grid;
  gap:7px;
}

.work-assignee-option {
  width:100% !important;
  min-height:52px !important;

  display:grid !important;
  grid-template-columns:36px minmax(0,1fr) 28px !important;

  align-items:center !important;
  gap:10px !important;

  padding:8px 11px !important;

  border-radius:16px !important;
  box-shadow:none !important;

  text-align:left !important;
}

.work-assignee-avatar {
  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  border-radius:12px;

  font-size:12px;
  font-weight:850;
}

.work-assignee-option > b {
  overflow:hidden;

  color:var(--text);

  font-size:12px;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.work-assignee-check {
  width:26px;
  height:26px;

  display:grid;
  place-items:center;

  border-radius:9px;

  opacity:.25;
}

.work-assignee-option.selected
.work-assignee-check {
  opacity:1;
}

.work-assignees-hint {
  padding-left:3px;

  color:var(--muted);

  font-size:9px;
}


/* LIGHT */

html:not([data-svoi-theme="dark"])
.work-assignee-option {
  background:rgba(255,255,255,.72) !important;
  border:1px solid rgba(218,219,236,.75) !important;
}

html:not([data-svoi-theme="dark"])
.work-assignee-avatar {
  background:#eef0fb;
  color:#747dcc;
}

html:not([data-svoi-theme="dark"])
.work-assignee-check {
  background:#ececf5;
  color:#777fd2;
}

html:not([data-svoi-theme="dark"])
.work-assignee-option.selected {
  background:#f2f4ff !important;
  border-color:rgba(117,128,214,.34) !important;
}


/* DARK */

html[data-svoi-theme="dark"]
.work-assignee-option {
  background:rgba(24,29,47,.82) !important;
  border:1px solid rgba(121,129,181,.14) !important;
}

html[data-svoi-theme="dark"]
.work-assignee-avatar {
  background:rgba(74,82,132,.38);
  color:#b1b9ff;
}

html[data-svoi-theme="dark"]
.work-assignee-check {
  background:rgba(77,84,129,.35);
  color:#b4baff;
}

html[data-svoi-theme="dark"]
.work-assignee-option.selected {
  background:rgba(43,51,83,.82) !important;
  border-color:rgba(132,143,225,.34) !important;
}


/* WORK TASK — DATE + TIME */

.work-task-deadline-row {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:9px;
  align-items:end;
}

.work-task-deadline-row .field {
  min-width:0;
  margin:0 !important;
}

.work-task-deadline-row input {
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

@media (max-width:360px) {
  .work-task-deadline-row {
    grid-template-columns:1fr 1fr;
    gap:7px;
  }
}


/* =========================================================
   WORK TASK — DEADLINE V2
   ========================================================= */

.work-task-deadline {
  display:grid;
  gap:8px;
}

.work-task-deadline-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:0 3px;
}

.work-task-deadline-head > span {
  color:var(--text);
  font-size:11px;
  font-weight:800;
}

.work-task-clear-deadline {
  width:auto !important;
  min-height:28px !important;

  padding:0 8px !important;

  border:0 !important;
  border-radius:9px !important;

  background:transparent !important;
  box-shadow:none !important;

  color:var(--muted) !important;

  font-size:9px !important;
  font-weight:750 !important;
}


.work-task-deadline-row {
  display:grid !important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,.72fr) !important;

  gap:8px !important;

  width:100% !important;
}


.work-task-picker {
  position:relative;

  min-width:0;
  min-height:62px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  gap:5px;

  padding:10px 13px;

  overflow:hidden;

  border-radius:17px;
}


.work-task-picker small {
  color:var(--muted);

  font-size:8px;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.05em;
}


.work-task-picker strong {
  overflow:hidden;

  color:var(--text);

  font-size:13px;
  line-height:1.1;
  font-weight:800;

  white-space:nowrap;
  text-overflow:ellipsis;
}


/* Нативный picker остаётся кликабельным,
   но внешний вид рисуем сами */

.work-task-picker input {
  position:absolute !important;
  inset:0 !important;

  width:100% !important;
  height:100% !important;

  margin:0 !important;
  padding:0 !important;

  opacity:0 !important;

  cursor:pointer;
}


.work-task-picker:has(input:disabled) {
  opacity:.52;
}


/* LIGHT */

html:not([data-svoi-theme="dark"])
.work-task-picker {
  background:rgba(255,255,255,.72);

  border:
    1px solid rgba(218,219,236,.78);
}


/* DARK */

html[data-svoi-theme="dark"]
.work-task-picker {
  background:rgba(24,29,47,.82);

  border:
    1px solid rgba(121,129,181,.14);
}


/* SMALL IPHONE */

@media(max-width:380px) {

  .work-task-deadline-row {
    grid-template-columns:
      minmax(0,1fr)
      minmax(0,.78fr) !important;
  }

  .work-task-picker {
    min-height:58px;
    padding:9px 11px;
  }

}


/* WORK TASK DEADLINE — FINAL GEOMETRY */

.work-task-deadline-row {
  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr) !important;

  gap:9px !important;
}

.work-task-picker {
  width:100% !important;
  min-width:0 !important;
  min-height:66px !important;

  box-sizing:border-box !important;
}

.work-task-picker strong {
  font-size:14px !important;
}

.work-task-picker input {
  position:absolute !important;
  inset:0 !important;

  opacity:0 !important;

  appearance:none !important;
  -webkit-appearance:none !important;
}


/* =========================================================
   WORK TASK CARDS — ASSIGNEES + DEADLINE
   ========================================================= */

.work-task-meta {
  width:100% !important;

  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;

  gap:5px 7px !important;

  margin-top:2px !important;

  background:transparent !important;
}

.work-task-assignees {
  min-width:0;

  overflow:hidden;

  color:var(--muted);

  font-size:9.5px;

  white-space:nowrap;
  text-overflow:ellipsis;
}


.work-task-due {
  display:inline-flex;
  align-items:center;

  min-height:21px;

  padding:0 7px;

  border-radius:8px;

  font-size:8.5px;
  font-weight:800;

  white-space:nowrap;
}


/* обычный дедлайн */

html:not([data-svoi-theme="dark"])
.work-task-due {
  color:#676fae;

  background:
    rgba(232,234,249,.86);
}

html[data-svoi-theme="dark"]
.work-task-due {
  color:#abb2ed;

  background:
    rgba(75,83,133,.30);
}


/* просрочено */

.work-v1-task.overdue,
.work-all-task.overdue {
  position:relative;
}

html:not([data-svoi-theme="dark"])
.work-v1-task.overdue,
html:not([data-svoi-theme="dark"])
.work-all-task.overdue {
  border-color:
    rgba(206,106,123,.30) !important;
}

html[data-svoi-theme="dark"]
.work-v1-task.overdue,
html[data-svoi-theme="dark"]
.work-all-task.overdue {
  border-color:
    rgba(218,112,130,.30) !important;
}


.work-task-due.overdue {
  color:#d36f82 !important;
}

html:not([data-svoi-theme="dark"])
.work-task-due.overdue {
  background:
    rgba(255,235,239,.92) !important;
}

html[data-svoi-theme="dark"]
.work-task-due.overdue {
  background:
    rgba(139,59,76,.22) !important;
}


/* аккуратная полоска у просроченной */

.work-v1-task.overdue::before,
.work-all-task.overdue::before {
  content:"";

  position:absolute;

  left:0;
  top:14px;
  bottom:14px;

  width:3px;

  border-radius:0 4px 4px 0;

  background:#cf7182;
}



/* ===== SOURCE: checkin-final.css ===== */

/* =========================================================
   NAMI — CHECK-IN FINAL OVERRIDE
   ========================================================= */

html body #app .checkin-v2 {
  width:100% !important;
}


/* HEADER */

html body #app .checkin-v2 .checkin-v2-head {
  width:100% !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  gap:14px !important;

  margin:18px 0 14px !important;
}

html body #app .checkin-v2 .checkin-v2-head > div {
  flex:1 1 auto !important;

  width:auto !important;
  min-width:0 !important;
}

html body #app .checkin-v2 .checkin-v2-head small {
  display:block !important;

  margin:0 0 5px !important;

  font-size:8px !important;
  line-height:1 !important;

  font-weight:900 !important;
  letter-spacing:.14em !important;

  color:#9187df !important;
}

html body #app .checkin-v2 .checkin-v2-head h1 {
  display:block !important;

  width:auto !important;

  margin:0 !important;

  font-size:29px !important;
  line-height:1 !important;

  font-weight:900 !important;
  letter-spacing:-.035em !important;

  white-space:nowrap !important;

  color:var(--text) !important;
}


/* ANSWER */

html body #app .checkin-v2 .checkin-v2-add {
  flex:0 0 auto !important;

  width:auto !important;
  min-width:0 !important;
  max-width:none !important;

  height:42px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  gap:6px !important;

  margin:0 !important;
  padding:0 13px !important;

  border-radius:14px !important;

  font-size:10px !important;
  font-weight:850 !important;

  color:#9288e4 !important;
}

html body #app .checkin-v2 .checkin-v2-add span {
  width:auto !important;

  white-space:nowrap !important;
}


/* =========================================================
   START CARD
   ========================================================= */

html body #app .checkin-v2 .checkin-start-card {
  width:100% !important;

  display:grid !important;

  grid-template-columns:
    46px minmax(0,1fr) !important;

  align-items:center !important;

  gap:12px !important;

  margin:0 !important;
  padding:13px !important;

  border-radius:22px !important;
}


html body #app .checkin-v2 .checkin-start-mark {
  width:46px !important;
  height:46px !important;

  display:grid !important;
  place-items:center !important;

  margin:0 !important;
  padding:0 !important;

  border-radius:15px !important;
}

html body #app .checkin-v2 .checkin-start-mark svg {
  width:30px !important;
  height:22px !important;
}


html body #app .checkin-v2 .checkin-start-card > div {
  width:auto !important;
  min-width:0 !important;

  margin:0 !important;
}


html body #app .checkin-v2 .checkin-start-card small {
  display:block !important;

  margin:0 0 5px !important;

  font-size:8px !important;
  line-height:1 !important;

  font-weight:900 !important;
  letter-spacing:.13em !important;

  color:#9187df !important;
}


html body #app .checkin-v2 .checkin-start-card h2 {
  margin:0 !important;

  font-size:18px !important;
  line-height:1.1 !important;

  font-weight:900 !important;
  letter-spacing:-.025em !important;

  color:var(--text) !important;
}


html body #app .checkin-v2 .checkin-start-card p {
  max-width:310px !important;

  margin:6px 0 0 !important;

  font-size:10px !important;
  line-height:1.35 !important;

  color:var(--muted) !important;
}


html body #app .checkin-v2 .checkin-start-card > .primary {
  grid-column:1 / -1 !important;

  width:100% !important;

  min-height:44px !important;

  margin:1px 0 0 !important;

  border-radius:14px !important;

  font-size:11px !important;
}


/* HISTORY */

html body #app .checkin-v2 .checkin-history-head {
  margin:20px 3px 9px !important;
}

html body #app .checkin-v2 .checkin-history-head h2 {
  margin:0 !important;

  font-size:20px !important;
  line-height:1 !important;

  font-weight:900 !important;
  letter-spacing:-.025em !important;

  color:var(--text) !important;
}


/* LIGHT */

html:not([data-svoi-theme="dark"])
body #app .checkin-v2 .checkin-v2-add,
html:not([data-svoi-theme="dark"])
body #app .checkin-v2 .checkin-start-card {
  background:rgba(255,255,255,.58) !important;

  border:1px solid rgba(255,255,255,.82) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}

html:not([data-svoi-theme="dark"])
body #app .checkin-v2 .checkin-start-mark {
  background:
    linear-gradient(
      145deg,
      rgba(246,218,226,.78),
      rgba(218,229,253,.82)
    ) !important;
}


/* DARK */

html[data-svoi-theme="dark"]
body #app .checkin-v2 .checkin-v2-add,
html[data-svoi-theme="dark"]
body #app .checkin-v2 .checkin-start-card {
  background:
    linear-gradient(
      145deg,
      #1d253d,
      #181f35
    ) !important;

  border:
    1px solid rgba(119,126,211,.14) !important;
}

html[data-svoi-theme="dark"]
body #app .checkin-v2 .checkin-start-mark {
  background:
    linear-gradient(
      145deg,
      rgba(108,72,122,.27),
      rgba(65,73,150,.28)
    ) !important;
}


/* SMALL IPHONE */

@media (max-width:380px) {

  html body #app .checkin-v2 .checkin-v2-head h1 {
    font-size:26px !important;
  }

  html body #app .checkin-v2 .checkin-v2-add {
    height:40px !important;

    padding:0 11px !important;
  }

}


/* =========================================================
   NAMI — CHECK-IN FORM REAL FIX
   ========================================================= */

html body #sheetRoot
#coupleCheckinV2Form {
  display:flex !important;
  flex-direction:column !important;

  gap:17px !important;

  width:100% !important;
}


/* =========================================================
   SECTIONS
   ========================================================= */

html body #sheetRoot
.checkin-form-section {
  display:flex !important;
  flex-direction:column !important;

  gap:9px !important;

  margin:0 !important;
  padding:0 !important;
}

html body #sheetRoot
.checkin-form-label {
  display:block !important;

  margin:0 2px !important;

  color:var(--text) !important;

  font-size:12px !important;
  line-height:1.2 !important;

  font-weight:850 !important;
}


/* =========================================================
   MOOD — 5 EVEN BUTTONS
   ========================================================= */

html body #sheetRoot
.checkin-v2-moods {
  display:grid !important;

  grid-template-columns:
    repeat(5,minmax(0,1fr)) !important;

  gap:6px !important;

  width:100% !important;
}


html body #sheetRoot
.checkin-v2-mood-choice {
  appearance:none !important;
  -webkit-appearance:none !important;

  min-width:0 !important;
  height:67px !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;

  gap:7px !important;

  margin:0 !important;
  padding:6px 2px !important;

  border-radius:15px !important;

  font-family:inherit !important;

  transition:
    transform .14s ease,
    background .14s ease,
    border-color .14s ease !important;
}


html body #sheetRoot
.checkin-v2-mood-choice:active {
  transform:scale(.97);
}


html body #sheetRoot
.checkin-v2-mood-choice i {
  width:25px !important;
  height:25px !important;

  display:block !important;

  margin:0 !important;

  border-radius:50% !important;
}


html body #sheetRoot
.checkin-v2-mood-choice span {
  width:100% !important;

  overflow:hidden !important;

  color:var(--muted) !important;

  font-size:7.5px !important;
  line-height:1 !important;

  font-weight:750 !important;

  text-align:center !important;

  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}


/* mood colors */

html body #sheetRoot
.checkin-v2-mood-choice:nth-child(1) i {
  background:#c98b9c !important;
}

html body #sheetRoot
.checkin-v2-mood-choice:nth-child(2) i {
  background:#c3a09f !important;
}

html body #sheetRoot
.checkin-v2-mood-choice:nth-child(3) i {
  background:#aaa0d7 !important;
}

html body #sheetRoot
.checkin-v2-mood-choice:nth-child(4) i {
  background:#879bd7 !important;
}

html body #sheetRoot
.checkin-v2-mood-choice:nth-child(5) i {
  background:#778fdf !important;
}


/* ACTIVE */

html body #sheetRoot
.checkin-v2-mood-choice.active {
  transform:translateY(-1px) !important;

  border-color:
    rgba(126,115,221,.48) !important;
}

html body #sheetRoot
.checkin-v2-mood-choice.active span {
  color:var(--text) !important;

  font-weight:850 !important;
}


/* =========================================================
   NEEDS
   ========================================================= */

html body #sheetRoot
.checkin-v2-need-grid {
  display:grid !important;

  grid-template-columns:
    1fr 1fr !important;

  gap:7px !important;

  width:100% !important;
}


html body #sheetRoot
.checkin-v2-need {
  appearance:none !important;
  -webkit-appearance:none !important;

  min-width:0 !important;
  min-height:43px !important;

  display:flex !important;
  align-items:center !important;

  gap:8px !important;

  margin:0 !important;
  padding:0 10px !important;

  border-radius:13px !important;

  color:var(--text) !important;

  font-family:inherit !important;

  font-size:9.5px !important;
  line-height:1.15 !important;

  font-weight:800 !important;

  text-align:left !important;
}


html body #sheetRoot
.checkin-v2-need-check {
  width:22px !important;
  height:22px !important;

  flex:0 0 22px !important;

  display:grid !important;
  place-items:center !important;

  border-radius:8px !important;

  color:transparent !important;
}


html body #sheetRoot
.checkin-v2-need.active {
  color:#8579df !important;

  border-color:
    rgba(126,115,221,.40) !important;
}


html body #sheetRoot
.checkin-v2-need.active
.checkin-v2-need-check {
  color:#fff !important;

  background:
    linear-gradient(
      135deg,
      #7b70df,
      #6884df
    ) !important;
}


/* HINT */

html body #sheetRoot
.checkin-form-hint {
  display:block !important;

  margin:0 2px !important;

  color:var(--muted) !important;

  font-size:8.5px !important;
}


/* =========================================================
   MESSAGE
   ========================================================= */

html body #sheetRoot
.field.checkin-v2-message {
  display:flex !important;
  flex-direction:column !important;

  gap:6px !important;

  margin:0 !important;
  padding:0 !important;

  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}


html body #sheetRoot
.field.checkin-v2-message > span {
  margin:0 2px !important;

  color:var(--muted) !important;

  font-size:10px !important;

  font-weight:850 !important;
}


html body #sheetRoot
.field.checkin-v2-message textarea {
  width:100% !important;

  min-height:82px !important;

  margin:0 !important;
  padding:11px 12px !important;

  border-radius:16px !important;

  resize:none !important;

  color:var(--text) !important;

  font-family:inherit !important;

  font-size:12px !important;
  line-height:1.4 !important;
}


/* =========================================================
   SAVE
   ========================================================= */

html body #sheetRoot
.checkin-v2-save {
  width:100% !important;

  min-height:50px !important;

  margin:0 !important;

  border-radius:16px !important;

  font-size:13px !important;
  font-weight:850 !important;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
body #sheetRoot
.checkin-v2-mood-choice,

html:not([data-svoi-theme="dark"])
body #sheetRoot
.checkin-v2-need {
  background:
    rgba(255,255,255,.57) !important;

  border:
    1px solid rgba(255,255,255,.82) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.90) !important;
}


html:not([data-svoi-theme="dark"])
body #sheetRoot
.checkin-v2-mood-choice.active,

html:not([data-svoi-theme="dark"])
body #sheetRoot
.checkin-v2-need.active {
  background:
    linear-gradient(
      145deg,
      rgba(244,239,255,.92),
      rgba(229,235,255,.84)
    ) !important;
}


html:not([data-svoi-theme="dark"])
body #sheetRoot
.checkin-v2-need-check {
  background:
    rgba(229,225,247,.76) !important;
}


html:not([data-svoi-theme="dark"])
body #sheetRoot
.field.checkin-v2-message textarea {
  background:
    rgba(255,255,255,.62) !important;

  border:
    1px solid rgba(255,255,255,.84) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.88) !important;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
body #sheetRoot
.checkin-v2-mood-choice,

html[data-svoi-theme="dark"]
body #sheetRoot
.checkin-v2-need {
  background:
    linear-gradient(
      145deg,
      #202841,
      #1a2137
    ) !important;

  border:
    1px solid
    rgba(119,126,211,.14) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.03) !important;
}


html[data-svoi-theme="dark"]
body #sheetRoot
.checkin-v2-mood-choice.active,

html[data-svoi-theme="dark"]
body #sheetRoot
.checkin-v2-need.active {
  background:
    linear-gradient(
      145deg,
      #292f4d,
      #222a45
    ) !important;

  border-color:
    rgba(139,127,234,.34) !important;
}


html[data-svoi-theme="dark"]
body #sheetRoot
.checkin-v2-need-check {
  background:
    rgba(108,100,183,.16) !important;
}


html[data-svoi-theme="dark"]
body #sheetRoot
.field.checkin-v2-message textarea {
  background:
    #171e32 !important;

  border:
    1px solid
    rgba(119,126,211,.14) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025) !important;
}


/* =========================================================
   NAMI — CHECK-IN TODAY GRID FINAL
   ========================================================= */

html body #app
.checkin-today-grid {
  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap:9px !important;

  width:100% !important;

  margin-top:10px !important;
}


/* =========================================================
   PERSON CARD
   ========================================================= */

html body #app
.checkin-today-person {
  position:relative !important;

  min-width:0 !important;
  min-height:142px !important;

  display:flex !important;
  flex-direction:column !important;

  padding:11px !important;

  border-radius:20px !important;

  overflow:hidden !important;
}


html body #app
.checkin-today-person-head {
  display:grid !important;

  grid-template-columns:
    34px minmax(0,1fr) !important;

  align-items:center !important;

  gap:8px !important;

  padding-right:3px !important;
}


/* AVATAR */

html body #app
.checkin-v2-avatar {
  width:34px !important;
  height:34px !important;

  display:grid !important;
  place-items:center !important;

  margin:0 !important;

  border-radius:11px !important;

  color:#fff !important;

  font-size:11px !important;
  font-weight:900 !important;

  background:
    linear-gradient(
      145deg,
      #d57b9b,
      #8076df
    ) !important;
}


/* NAME */

html body #app
.checkin-v2-person-copy {
  min-width:0 !important;

  display:flex !important;
  flex-direction:column !important;
}

html body #app
.checkin-v2-person-copy b {
  overflow:hidden !important;

  color:var(--text) !important;

  font-size:11px !important;
  line-height:1.1 !important;

  font-weight:900 !important;

  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

html body #app
.checkin-v2-person-copy small {
  margin-top:3px !important;

  color:var(--muted) !important;

  font-size:8px !important;
  line-height:1 !important;
}


/* =========================================================
   MOOD
   ========================================================= */

html body #app
.checkin-today-person
.checkin-v2-mood {
  width:fit-content !important;

  min-height:24px !important;

  display:inline-flex !important;
  align-items:center !important;

  margin:9px 0 0 !important;
  padding:0 8px !important;

  border-radius:999px !important;

  color:#958aec !important;

  font-size:9px !important;
  line-height:1 !important;

  font-weight:850 !important;
}


/* =========================================================
   NEEDS
   ========================================================= */

html body #app
.checkin-today-person
.checkin-v2-needs {
  display:flex !important;
  flex-wrap:wrap !important;

  gap:5px !important;

  margin-top:7px !important;
}


html body #app
.checkin-today-person
.checkin-v2-needs span {
  min-height:23px !important;

  display:inline-flex !important;
  align-items:center !important;

  padding:0 7px !important;

  border-radius:999px !important;

  color:var(--text) !important;

  font-size:8px !important;
  line-height:1 !important;

  font-weight:750 !important;
}


/* =========================================================
   NOTE
   ========================================================= */

html body #app
.checkin-today-person
.checkin-v2-note {
  margin:7px 0 0 !important;
  padding:7px 8px !important;

  border-radius:10px !important;

  color:var(--muted) !important;

  font-size:8.5px !important;
  line-height:1.3 !important;
}


/* =========================================================
   EDIT
   ========================================================= */

html body #app
.checkin-v2-edit {
  width:100% !important;

  min-height:31px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  gap:5px !important;

  margin-top:auto !important;
  padding:0 7px !important;

  border-radius:10px !important;

  color:#998eed !important;

  font-size:8.5px !important;
  font-weight:800 !important;
}


/* =========================================================
   WAITING CARD
   ========================================================= */

html body #app
.checkin-waiting-card {
  appearance:none !important;
  -webkit-appearance:none !important;

  min-width:0 !important;
  min-height:142px !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;

  gap:7px !important;

  margin:0 !important;
  padding:12px !important;

  border-radius:20px !important;

  text-align:left !important;
}


html body #app
.checkin-waiting-card > span {
  width:34px !important;
  height:34px !important;

  display:grid !important;
  place-items:center !important;

  margin:0 !important;

  border-radius:11px !important;

  color:#958aec !important;
}


html body #app
.checkin-waiting-card > b {
  margin:0 !important;

  color:var(--text) !important;

  font-size:11px !important;
  line-height:1.15 !important;

  font-weight:900 !important;
}


html body #app
.checkin-waiting-card > small {
  margin:0 !important;

  color:var(--muted) !important;

  font-size:8.5px !important;
  line-height:1.3 !important;
}


/* =========================================================
   INSIGHT COMPACT
   ========================================================= */

html body #app
.checkin-insight {
  margin-bottom:0 !important;

  padding:12px !important;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
body #app
.checkin-today-person,

html:not([data-svoi-theme="dark"])
body #app
.checkin-waiting-card {
  background:
    rgba(255,255,255,.58) !important;

  border:
    1px solid rgba(255,255,255,.82) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.90) !important;
}


html:not([data-svoi-theme="dark"])
body #app
.checkin-today-person
.checkin-v2-mood,

html:not([data-svoi-theme="dark"])
body #app
.checkin-today-person
.checkin-v2-needs span,

html:not([data-svoi-theme="dark"])
body #app
.checkin-v2-edit {
  background:
    rgba(232,226,251,.66) !important;
}


html:not([data-svoi-theme="dark"])
body #app
.checkin-today-person
.checkin-v2-note {
  background:
    rgba(247,246,253,.72) !important;
}


html:not([data-svoi-theme="dark"])
body #app
.checkin-waiting-card > span {
  background:
    linear-gradient(
      145deg,
      rgba(239,221,252,.74),
      rgba(218,229,253,.78)
    ) !important;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
body #app
.checkin-today-person,

html[data-svoi-theme="dark"]
body #app
.checkin-waiting-card {
  background:
    linear-gradient(
      145deg,
      #1d253d,
      #181f35
    ) !important;

  border:
    1px solid
    rgba(119,126,211,.14) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.03) !important;
}


html[data-svoi-theme="dark"]
body #app
.checkin-today-person
.checkin-v2-mood,

html[data-svoi-theme="dark"]
body #app
.checkin-today-person
.checkin-v2-needs span,

html[data-svoi-theme="dark"]
body #app
.checkin-v2-edit {
  background:
    rgba(108,99,194,.12) !important;
}


html[data-svoi-theme="dark"]
body #app
.checkin-today-person
.checkin-v2-note {
  background:
    rgba(10,16,31,.25) !important;
}


html[data-svoi-theme="dark"]
body #app
.checkin-waiting-card > span {
  background:
    rgba(108,99,194,.13) !important;

  border:
    1px solid
    rgba(136,128,221,.11) !important;
}


/* =========================================================
   SMALL IPHONE
   ========================================================= */

@media (max-width:380px) {

  html body #app
  .checkin-today-grid {
    gap:7px !important;
  }

  html body #app
  .checkin-today-person,
  html body #app
  .checkin-waiting-card {
    min-height:136px !important;

    padding:10px !important;
  }

  html body #app
  .checkin-waiting-card > b {
    font-size:10px !important;
  }

}


/* =========================================================
   NAMI — CHECK-IN FINAL POLISH
   ========================================================= */


/* ---------------------------------------------------------
   INSIGHT
   --------------------------------------------------------- */

html body #app .checkin-v2 .checkin-insight {
  display:grid !important;

  grid-template-columns:
    42px minmax(0,1fr) !important;

  align-items:center !important;

  gap:11px !important;

  width:100% !important;

  margin:0 0 10px !important;
  padding:12px !important;

  border-radius:20px !important;
}

html body #app .checkin-v2
.checkin-insight-mark {
  width:42px !important;
  height:42px !important;

  display:grid !important;
  place-items:center !important;

  margin:0 !important;

  border-radius:14px !important;
}

html body #app .checkin-v2
.checkin-insight-mark svg {
  width:28px !important;
  height:21px !important;
}

html body #app .checkin-v2
.checkin-insight-copy {
  min-width:0 !important;
}

html body #app .checkin-v2
.checkin-insight-copy small {
  display:block !important;

  margin:0 0 5px !important;

  font-size:8px !important;
  line-height:1 !important;

  font-weight:900 !important;
  letter-spacing:.14em !important;
}

html body #app .checkin-v2
.checkin-insight-copy h2 {
  margin:0 !important;

  font-size:17px !important;
  line-height:1.08 !important;

  font-weight:900 !important;
  letter-spacing:-.025em !important;
}

html body #app .checkin-v2
.checkin-insight-copy p {
  margin:5px 0 0 !important;

  font-size:9.5px !important;
  line-height:1.35 !important;
}


/* ---------------------------------------------------------
   TWO CARDS GRID
   --------------------------------------------------------- */

html body #app .checkin-today-grid,
html body #app .nami-checkin-today-grid {
  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  align-items:stretch !important;

  gap:9px !important;

  width:100% !important;

  margin:0 !important;
}


/* ---------------------------------------------------------
   PERSON CARD
   --------------------------------------------------------- */

html body #app .checkin-today-person,
html body #app .nami-checkin-person-card {
  box-sizing:border-box !important;

  width:100% !important;
  min-width:0 !important;
  min-height:156px !important;

  display:flex !important;
  flex-direction:column !important;

  padding:11px !important;

  border-radius:20px !important;
}

html body #app .checkin-today-person-head,
html body #app .nami-checkin-person-head {
  display:grid !important;

  grid-template-columns:
    36px minmax(0,1fr) !important;

  align-items:center !important;

  gap:9px !important;

  width:100% !important;
}

html body #app .checkin-v2-avatar,
html body #app .nami-checkin-avatar {
  width:36px !important;
  height:36px !important;

  display:grid !important;
  place-items:center !important;

  flex:none !important;

  border-radius:12px !important;

  color:#fff !important;

  font-size:11px !important;
  font-weight:900 !important;
}

html body #app .checkin-v2-person-copy,
html body #app .nami-checkin-person-copy {
  min-width:0 !important;

  display:flex !important;
  flex-direction:column !important;
}

html body #app .checkin-v2-person-copy b,
html body #app .nami-checkin-person-copy b {
  overflow:hidden !important;

  color:var(--text) !important;

  font-size:11px !important;
  line-height:1.1 !important;

  font-weight:900 !important;

  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

html body #app .checkin-v2-person-copy small,
html body #app .nami-checkin-person-copy small {
  margin-top:3px !important;

  color:var(--muted) !important;

  font-size:8px !important;
}


/* ---------------------------------------------------------
   MOOD
   --------------------------------------------------------- */

html body #app .checkin-today-person
.checkin-v2-mood,
html body #app .nami-checkin-person-card
.nami-checkin-mood {
  width:fit-content !important;

  min-height:25px !important;

  display:inline-flex !important;
  align-items:center !important;

  margin:9px 0 0 !important;
  padding:0 8px !important;

  border-radius:999px !important;

  color:#8f84e4 !important;

  font-size:8.5px !important;
  line-height:1 !important;

  font-weight:850 !important;
}


/* ---------------------------------------------------------
   NEEDS
   --------------------------------------------------------- */

html body #app .checkin-today-person
.checkin-v2-needs,
html body #app .nami-checkin-person-card
.nami-checkin-needs {
  display:flex !important;
  flex-wrap:wrap !important;

  gap:5px !important;

  margin:6px 0 0 !important;
}

html body #app .checkin-today-person
.checkin-v2-needs span,
html body #app .nami-checkin-person-card
.nami-checkin-needs span {
  min-height:24px !important;

  display:inline-flex !important;
  align-items:center !important;

  padding:0 8px !important;

  border-radius:999px !important;

  color:var(--text) !important;

  font-size:8px !important;
  font-weight:800 !important;
}


/* ---------------------------------------------------------
   PERSON NOTE
   --------------------------------------------------------- */

html body #app .checkin-today-person
.checkin-v2-note,
html body #app .nami-checkin-person-card
.nami-checkin-note {
  margin:7px 0 0 !important;

  padding:7px 8px !important;

  border-radius:10px !important;

  color:var(--muted) !important;

  font-size:8.5px !important;
  line-height:1.3 !important;
}


/* ---------------------------------------------------------
   EDIT BUTTON
   --------------------------------------------------------- */

html body #app .checkin-v2-edit,
html body #app .nami-checkin-edit {
  width:100% !important;

  min-height:32px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  gap:5px !important;

  margin:auto 0 0 !important;
  padding:0 7px !important;

  border-radius:10px !important;

  color:#958ae8 !important;

  font-size:8.5px !important;
  font-weight:850 !important;
}


/* ---------------------------------------------------------
   WAITING CARD
   --------------------------------------------------------- */

html body #app .checkin-waiting-card,
html body #app .nami-checkin-waiting-card {
  box-sizing:border-box !important;

  width:100% !important;
  min-width:0 !important;
  min-height:156px !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;

  gap:0 !important;

  margin:0 !important;
  padding:11px !important;

  border-radius:20px !important;

  text-align:left !important;
}

html body #app .checkin-waiting-card > span,
html body #app .nami-checkin-waiting-card > span {
  width:36px !important;
  height:36px !important;

  display:grid !important;
  place-items:center !important;

  flex:none !important;

  margin:0 0 10px !important;

  border-radius:12px !important;

  color:#958ae8 !important;
}

html body #app .checkin-waiting-card > b,
html body #app .nami-checkin-waiting-card > b {
  margin:0 !important;

  color:var(--text) !important;

  font-size:11px !important;
  line-height:1.15 !important;

  font-weight:900 !important;
}

html body #app .checkin-waiting-card > small,
html body #app .nami-checkin-waiting-card > small {
  margin:6px 0 0 !important;

  color:var(--muted) !important;

  font-size:8.5px !important;
  line-height:1.32 !important;
}


/* ---------------------------------------------------------
   HISTORY CLOSER
   --------------------------------------------------------- */

html body #app .checkin-history-head {
  margin:18px 3px 8px !important;
}

html body #app .checkin-history-head h2 {
  font-size:20px !important;
}

html body #app .checkin-history-list {
  margin:0 !important;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-svoi-theme="dark"])
body #app .checkin-insight,
html:not([data-svoi-theme="dark"])
body #app .checkin-today-person,
html:not([data-svoi-theme="dark"])
body #app .nami-checkin-person-card,
html:not([data-svoi-theme="dark"])
body #app .checkin-waiting-card,
html:not([data-svoi-theme="dark"])
body #app .nami-checkin-waiting-card {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.63),
      rgba(240,244,255,.52)
    ) !important;

  border:
    1px solid rgba(255,255,255,.84) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

html:not([data-svoi-theme="dark"])
body #app .checkin-insight-mark,
html:not([data-svoi-theme="dark"])
body #app .checkin-waiting-card > span,
html:not([data-svoi-theme="dark"])
body #app .nami-checkin-waiting-card > span {
  background:
    linear-gradient(
      145deg,
      rgba(244,218,229,.78),
      rgba(219,229,253,.82)
    ) !important;
}

html:not([data-svoi-theme="dark"])
body #app .checkin-v2-edit,
html:not([data-svoi-theme="dark"])
body #app .nami-checkin-edit,
html:not([data-svoi-theme="dark"])
body #app .checkin-today-person
.checkin-v2-mood,
html:not([data-svoi-theme="dark"])
body #app .checkin-today-person
.checkin-v2-needs span {
  background:
    rgba(232,226,251,.68) !important;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
body #app .checkin-insight,
html[data-svoi-theme="dark"]
body #app .checkin-today-person,
html[data-svoi-theme="dark"]
body #app .nami-checkin-person-card,
html[data-svoi-theme="dark"]
body #app .checkin-waiting-card,
html[data-svoi-theme="dark"]
body #app .nami-checkin-waiting-card {
  background:
    linear-gradient(
      145deg,
      #1d253d,
      #181f35
    ) !important;

  border:
    1px solid rgba(119,126,211,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03) !important;
}

html[data-svoi-theme="dark"]
body #app .checkin-insight-mark,
html[data-svoi-theme="dark"]
body #app .checkin-waiting-card > span,
html[data-svoi-theme="dark"]
body #app .nami-checkin-waiting-card > span {
  background:
    rgba(108,99,194,.14) !important;
}

html[data-svoi-theme="dark"]
body #app .checkin-v2-edit,
html[data-svoi-theme="dark"]
body #app .nami-checkin-edit,
html[data-svoi-theme="dark"]
body #app .checkin-today-person
.checkin-v2-mood,
html[data-svoi-theme="dark"]
body #app .checkin-today-person
.checkin-v2-needs span {
  background:
    rgba(108,99,194,.12) !important;
}


/* SMALL IPHONE */

@media (max-width:380px) {

  html body #app .checkin-today-grid,
  html body #app .nami-checkin-today-grid {
    gap:7px !important;
  }

  html body #app .checkin-today-person,
  html body #app .nami-checkin-person-card,
  html body #app .checkin-waiting-card,
  html body #app .nami-checkin-waiting-card {
    min-height:150px !important;

    padding:10px !important;
  }

}


/* =========================================================
   NAMI — CHECK-IN ALIGNMENT FINAL
   only geometry / typography
   ========================================================= */


/* ---------------------------------------------------------
   WHOLE SCREEN
   --------------------------------------------------------- */

html body #app .checkin-v2 {
  width:100% !important;
  max-width:100% !important;

  box-sizing:border-box !important;
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

html body #app .checkin-v2-head {
  display:grid !important;

  grid-template-columns:
    minmax(0,1fr) auto !important;

  align-items:end !important;

  gap:14px !important;

  width:100% !important;

  margin:18px 0 22px !important;
}


html body #app .checkin-v2-head > div {
  min-width:0 !important;
}


html body #app .checkin-v2-head small {
  display:block !important;

  margin:0 0 6px !important;

  font-size:8px !important;
  line-height:1 !important;

  font-weight:900 !important;
  letter-spacing:.15em !important;
}


html body #app .checkin-v2-head h1 {
  margin:0 !important;

  font-size:29px !important;
  line-height:.98 !important;

  font-weight:900 !important;
  letter-spacing:-.04em !important;

  white-space:nowrap !important;
}


html body #app .checkin-v2-add {
  width:auto !important;
  height:42px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  gap:6px !important;

  margin:0 !important;
  padding:0 13px !important;

  border-radius:14px !important;

  white-space:nowrap !important;
}


/* ---------------------------------------------------------
   INSIGHT
   --------------------------------------------------------- */

html body #app .checkin-insight {
  display:grid !important;

  grid-template-columns:
    44px minmax(0,1fr) !important;

  align-items:center !important;

  gap:12px !important;

  width:100% !important;

  margin:0 0 10px !important;
  padding:13px !important;

  border-radius:21px !important;

  box-sizing:border-box !important;
}


html body #app .checkin-insight-mark {
  width:44px !important;
  height:44px !important;

  display:grid !important;
  place-items:center !important;

  margin:0 !important;

  border-radius:14px !important;
}


html body #app .checkin-insight-copy {
  min-width:0 !important;
}


html body #app .checkin-insight-copy small {
  display:block !important;

  margin:0 0 5px !important;

  font-size:8px !important;
  line-height:1 !important;

  font-weight:900 !important;
  letter-spacing:.14em !important;
}


html body #app .checkin-insight-copy h2 {
  margin:0 !important;

  font-size:17px !important;
  line-height:1.08 !important;

  font-weight:900 !important;
  letter-spacing:-.025em !important;
}


html body #app .checkin-insight-copy p {
  max-width:100% !important;

  margin:5px 0 0 !important;

  font-size:9.5px !important;
  line-height:1.35 !important;
}


/* ---------------------------------------------------------
   TWO CARDS
   support old + isolated classes
   --------------------------------------------------------- */

html body #app .checkin-today-grid,
html body #app .nami-checkin-today-grid {
  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  align-items:stretch !important;

  gap:9px !important;

  width:100% !important;

  margin:0 !important;
}


/* PERSON + WAITING SAME SIZE */

html body #app .checkin-today-person,
html body #app .nami-checkin-person-card,
html body #app .checkin-waiting-card,
html body #app .nami-checkin-waiting-card {
  width:100% !important;
  min-width:0 !important;

  min-height:170px !important;
  height:100% !important;

  box-sizing:border-box !important;

  margin:0 !important;
  padding:12px !important;

  border-radius:20px !important;
}


/* ---------------------------------------------------------
   PERSON CARD
   --------------------------------------------------------- */

html body #app .checkin-today-person,
html body #app .nami-checkin-person-card {
  display:flex !important;
  flex-direction:column !important;
}


html body #app .checkin-today-person-head,
html body #app .nami-checkin-person-head {
  display:grid !important;

  grid-template-columns:
    36px minmax(0,1fr) !important;

  align-items:center !important;

  gap:9px !important;

  width:100% !important;

  margin:0 !important;
}


html body #app .checkin-v2-avatar,
html body #app .nami-checkin-avatar {
  width:36px !important;
  height:36px !important;

  display:grid !important;
  place-items:center !important;

  margin:0 !important;

  border-radius:12px !important;

  font-size:11px !important;
  font-weight:900 !important;
}


html body #app .checkin-v2-person-copy,
html body #app .nami-checkin-person-copy {
  min-width:0 !important;

  display:flex !important;
  flex-direction:column !important;

  justify-content:center !important;
}


html body #app .checkin-v2-person-copy b,
html body #app .nami-checkin-person-copy b {
  overflow:hidden !important;

  margin:0 !important;

  font-size:11px !important;
  line-height:1.1 !important;

  font-weight:900 !important;

  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}


html body #app .checkin-v2-person-copy small,
html body #app .nami-checkin-person-copy small {
  margin:3px 0 0 !important;

  font-size:8px !important;
  line-height:1 !important;
}


/* MOOD */

html body #app .checkin-today-person .checkin-v2-mood,
html body #app .nami-checkin-person-card .nami-checkin-mood {
  width:fit-content !important;

  min-height:25px !important;

  display:inline-flex !important;
  align-items:center !important;

  margin:11px 0 0 !important;
  padding:0 8px !important;

  border-radius:999px !important;

  font-size:8.5px !important;
  line-height:1 !important;

  font-weight:850 !important;
}


/* NEEDS */

html body #app .checkin-today-person .checkin-v2-needs,
html body #app .nami-checkin-person-card .nami-checkin-needs {
  display:flex !important;
  flex-wrap:wrap !important;

  gap:5px !important;

  margin:7px 0 0 !important;
}


html body #app .checkin-today-person .checkin-v2-needs span,
html body #app .nami-checkin-person-card .nami-checkin-needs span {
  min-height:24px !important;

  display:inline-flex !important;
  align-items:center !important;

  padding:0 8px !important;

  border-radius:999px !important;

  font-size:8px !important;
  line-height:1 !important;

  font-weight:800 !important;
}


/* NOTE */

html body #app .checkin-today-person .checkin-v2-note,
html body #app .nami-checkin-person-card .nami-checkin-note {
  margin:7px 0 0 !important;
  padding:7px 8px !important;

  border-radius:10px !important;

  font-size:8.5px !important;
  line-height:1.3 !important;
}


/* EDIT ALWAYS AT BOTTOM */

html body #app .checkin-v2-edit,
html body #app .nami-checkin-edit {
  width:100% !important;

  min-height:32px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  gap:5px !important;

  margin:auto 0 0 !important;
  padding:0 8px !important;

  border-radius:10px !important;

  font-size:8.5px !important;
  font-weight:850 !important;
}


/* ---------------------------------------------------------
   WAITING CARD
   --------------------------------------------------------- */

html body #app .checkin-waiting-card,
html body #app .nami-checkin-waiting-card {
  display:flex !important;
  flex-direction:column !important;

  align-items:flex-start !important;
  justify-content:center !important;

  text-align:left !important;
}


html body #app .checkin-waiting-card > span,
html body #app .nami-checkin-waiting-card > span {
  width:38px !important;
  height:38px !important;

  display:grid !important;
  place-items:center !important;

  margin:0 0 10px !important;

  border-radius:12px !important;
}


html body #app .checkin-waiting-card > b,
html body #app .nami-checkin-waiting-card > b {
  width:100% !important;

  margin:0 !important;

  font-size:11px !important;
  line-height:1.18 !important;

  font-weight:900 !important;
}


html body #app .checkin-waiting-card > small,
html body #app .nami-checkin-waiting-card > small {
  width:100% !important;

  margin:6px 0 0 !important;

  font-size:8.5px !important;
  line-height:1.35 !important;
}


/* ---------------------------------------------------------
   HISTORY
   --------------------------------------------------------- */

html body #app .checkin-history-head {
  margin:20px 3px 8px !important;
}


html body #app .checkin-history-head h2 {
  margin:0 !important;

  font-size:20px !important;
  line-height:1 !important;

  font-weight:900 !important;
  letter-spacing:-.03em !important;
}


html body #app .checkin-history-list {
  width:100% !important;

  margin:0 !important;
}


/* ---------------------------------------------------------
   LIGHT
   --------------------------------------------------------- */

html:not([data-svoi-theme="dark"])
body #app .checkin-insight,
html:not([data-svoi-theme="dark"])
body #app .checkin-today-person,
html:not([data-svoi-theme="dark"])
body #app .nami-checkin-person-card,
html:not([data-svoi-theme="dark"])
body #app .checkin-waiting-card,
html:not([data-svoi-theme="dark"])
body #app .nami-checkin-waiting-card {
  background:
    rgba(255,255,255,.58) !important;

  border:
    1px solid rgba(255,255,255,.84) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.91) !important;
}


/* ---------------------------------------------------------
   DARK
   --------------------------------------------------------- */

html[data-svoi-theme="dark"]
body #app .checkin-insight,
html[data-svoi-theme="dark"]
body #app .checkin-today-person,
html[data-svoi-theme="dark"]
body #app .nami-checkin-person-card,
html[data-svoi-theme="dark"]
body #app .checkin-waiting-card,
html[data-svoi-theme="dark"]
body #app .nami-checkin-waiting-card {
  background:
    linear-gradient(
      145deg,
      #1d253d,
      #181f35
    ) !important;

  border:
    1px solid rgba(119,126,211,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03) !important;
}


/* ---------------------------------------------------------
   SMALL IPHONE
   --------------------------------------------------------- */

@media (max-width:380px) {

  html body #app .checkin-v2-head h1 {
    font-size:26px !important;
  }

  html body #app .checkin-today-grid,
  html body #app .nami-checkin-today-grid {
    gap:7px !important;
  }

  html body #app .checkin-today-person,
  html body #app .nami-checkin-person-card,
  html body #app .checkin-waiting-card,
  html body #app .nami-checkin-waiting-card {
    min-height:164px !important;

    padding:10px !important;
  }

}


/* =========================================================
   NAMI — CHECK-IN LAST POLISH
   ========================================================= */


/* ПРАВАЯ КАРТОЧКА — контент к верху, как слева */

html body #app
.checkin-waiting-card,
html body #app
.nami-checkin-waiting-card {
  justify-content:flex-start !important;

  padding:12px !important;
}

html body #app
.checkin-waiting-card > span,
html body #app
.nami-checkin-waiting-card > span {
  width:36px !important;
  height:36px !important;

  margin:0 0 12px !important;
}

html body #app
.checkin-waiting-card > b,
html body #app
.nami-checkin-waiting-card > b {
  max-width:135px !important;

  font-size:11px !important;
  line-height:1.18 !important;
}

html body #app
.checkin-waiting-card > small,
html body #app
.nami-checkin-waiting-card > small {
  max-width:140px !important;

  margin-top:7px !important;

  font-size:8.5px !important;
  line-height:1.35 !important;
}


/* ОБЕ КАРТОЧКИ ЧУТЬ КОМПАКТНЕЕ */

html body #app
.checkin-today-person,
html body #app
.nami-checkin-person-card,
html body #app
.checkin-waiting-card,
html body #app
.nami-checkin-waiting-card {
  min-height:164px !important;
}


/* КНОПКА ИЗМЕНИТЬ В ЛЕВОЙ КАРТОЧКЕ */

html body #app
.checkin-v2-edit,
html body #app
.nami-checkin-edit {
  min-height:30px !important;

  margin-top:auto !important;

  border-radius:10px !important;

  font-size:8.5px !important;
}


/* =========================================================
   LAST 7 DAYS
   ========================================================= */

html body #app
.checkin-history-head {
  margin:
    18px 3px 9px !important;
}

html body #app
.checkin-history-head h2 {
  margin:0 !important;

  font-size:19px !important;
  line-height:1 !important;

  letter-spacing:-.025em !important;
}


/* пустая история превращается в аккуратную карточку */

html body #app
.checkin-history-list:has(> :only-child) {
  width:100% !important;
}


/* если текст пустого состояния лежит напрямую */

html body #app
.checkin-history-list {
  color:var(--muted) !important;

  font-size:9.5px !important;
  line-height:1.35 !important;
}


/* старые варианты empty state */

html body #app
.checkin-history-empty,
html body #app
.checkin-v2-history-empty {
  min-height:64px !important;

  display:flex !important;
  align-items:center !important;

  margin:0 !important;
  padding:12px 14px !important;

  border-radius:16px !important;

  color:var(--muted) !important;

  font-size:9.5px !important;
  line-height:1.3 !important;

  text-align:left !important;
}


/* LIGHT */

html:not([data-svoi-theme="dark"])
body #app
.checkin-history-empty,

html:not([data-svoi-theme="dark"])
body #app
.checkin-v2-history-empty {
  background:
    rgba(255,255,255,.45) !important;

  border:
    1px solid rgba(255,255,255,.72) !important;
}


/* DARK */

html[data-svoi-theme="dark"]
body #app
.checkin-history-empty,

html[data-svoi-theme="dark"]
body #app
.checkin-v2-history-empty {
  background:
    rgba(24,31,51,.72) !important;

  border:
    1px solid rgba(119,126,211,.12) !important;
}


/* TOP EDIT BUTTON чуть легче */

html body #app
.checkin-v2-add {
  height:40px !important;

  padding:0 12px !important;

  border-radius:13px !important;

  font-size:9.5px !important;
}


/* SMALL IPHONE */

@media (max-width:380px) {

  html body #app
  .checkin-today-person,
  html body #app
  .nami-checkin-person-card,
  html body #app
  .checkin-waiting-card,
  html body #app
  .nami-checkin-waiting-card {
    min-height:158px !important;
  }

}


/* =========================================================
   NAMI — CHECK-IN CARDS GEOMETRY FIX
   ========================================================= */

/* две абсолютно равные колонки */

html body #app .checkin-today-grid,
html body #app .nami-checkin-today-grid {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  align-items:stretch !important;

  gap:10px !important;

  width:100% !important;
  margin:0 !important;
}


/* =========================================================
   ОБЕ КАРТОЧКИ
   ========================================================= */

html body #app .checkin-today-person,
html body #app .nami-checkin-person-card,
html body #app .checkin-waiting-card,
html body #app .nami-checkin-waiting-card {
  box-sizing:border-box !important;

  width:100% !important;
  min-width:0 !important;

  min-height:0 !important;
  height:auto !important;

  padding:13px !important;

  border-radius:20px !important;
}


/* =========================================================
   ЛЕВАЯ КАРТОЧКА
   ========================================================= */

html body #app .checkin-today-person,
html body #app .nami-checkin-person-card {
  display:flex !important;
  flex-direction:column !important;

  align-items:stretch !important;
  justify-content:flex-start !important;
}


/* avatar + name */

html body #app .checkin-today-person-head,
html body #app .nami-checkin-person-head {
  display:grid !important;

  grid-template-columns:38px minmax(0,1fr) !important;

  align-items:center !important;

  gap:9px !important;

  width:100% !important;

  margin:0 0 11px !important;
}


html body #app .checkin-v2-avatar,
html body #app .nami-checkin-avatar {
  width:38px !important;
  height:38px !important;

  display:grid !important;
  place-items:center !important;

  margin:0 !important;

  border-radius:12px !important;
}


html body #app .checkin-v2-person-copy b,
html body #app .nami-checkin-person-copy b {
  margin:0 !important;

  font-size:11px !important;
  line-height:1.1 !important;

  font-weight:900 !important;
}


html body #app .checkin-v2-person-copy small,
html body #app .nami-checkin-person-copy small {
  margin:3px 0 0 !important;

  font-size:8px !important;
  line-height:1 !important;
}


/* настроение */

html body #app .checkin-today-person .checkin-v2-mood,
html body #app .nami-checkin-person-card .nami-checkin-mood {
  width:fit-content !important;

  min-height:25px !important;

  display:inline-flex !important;
  align-items:center !important;

  margin:0 !important;
  padding:0 9px !important;

  border-radius:999px !important;

  font-size:8.5px !important;
  line-height:1 !important;

  font-weight:850 !important;
}


/* потребности */

html body #app .checkin-today-person .checkin-v2-needs,
html body #app .nami-checkin-person-card .nami-checkin-needs {
  display:flex !important;
  flex-wrap:wrap !important;

  gap:5px !important;

  width:100% !important;

  margin:7px 0 0 !important;
}


html body #app .checkin-today-person .checkin-v2-needs span,
html body #app .nami-checkin-person-card .nami-checkin-needs span {
  min-height:25px !important;

  display:inline-flex !important;
  align-items:center !important;

  padding:0 9px !important;

  border-radius:999px !important;

  font-size:8px !important;
  line-height:1 !important;

  font-weight:800 !important;
}


/* сообщение, если появится */

html body #app .checkin-today-person .checkin-v2-note,
html body #app .nami-checkin-person-card .nami-checkin-note {
  width:100% !important;

  margin:7px 0 0 !important;
  padding:7px 9px !important;

  border-radius:10px !important;

  font-size:8.5px !important;
  line-height:1.3 !important;
}


/* кнопка сразу после данных — без огромной пустоты */

html body #app .checkin-v2-edit,
html body #app .nami-checkin-edit {
  width:100% !important;

  min-height:32px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  gap:5px !important;

  margin:9px 0 0 !important;
  padding:0 8px !important;

  border-radius:10px !important;

  font-size:8.5px !important;
  line-height:1 !important;

  font-weight:850 !important;
}


/* =========================================================
   ПРАВАЯ КАРТОЧКА
   ========================================================= */

html body #app .checkin-waiting-card,
html body #app .nami-checkin-waiting-card {
  display:flex !important;
  flex-direction:column !important;

  align-items:flex-start !important;
  justify-content:flex-start !important;

  text-align:left !important;
}


html body #app .checkin-waiting-card > span,
html body #app .nami-checkin-waiting-card > span {
  width:38px !important;
  height:38px !important;

  display:grid !important;
  place-items:center !important;

  margin:0 0 11px !important;

  border-radius:12px !important;
}


html body #app .checkin-waiting-card > b,
html body #app .nami-checkin-waiting-card > b {
  width:100% !important;

  margin:0 !important;

  font-size:11px !important;
  line-height:1.18 !important;

  font-weight:900 !important;
}


html body #app .checkin-waiting-card > small,
html body #app .nami-checkin-waiting-card > small {
  width:100% !important;

  margin:6px 0 0 !important;

  font-size:8.5px !important;
  line-height:1.35 !important;
}


/* =========================================================
   ВАЖНО:
   grid сам делает обе карточки одинаковой высоты
   ========================================================= */

html body #app .checkin-today-grid > *,
html body #app .nami-checkin-today-grid > * {
  height:100% !important;
}


/* =========================================================
   ВЕРХНИЙ БЛОК
   ========================================================= */

html body #app .checkin-insight {
  min-height:0 !important;

  margin:0 0 11px !important;
  padding:12px 13px !important;
}


html body #app .checkin-insight-copy h2 {
  margin:0 !important;

  font-size:17px !important;
  line-height:1.08 !important;
}


html body #app .checkin-insight-copy p {
  margin:5px 0 0 !important;

  font-size:9.5px !important;
  line-height:1.32 !important;
}


/* =========================================================
   ИСТОРИЯ
   ========================================================= */

html body #app .checkin-history-head {
  margin:19px 3px 9px !important;
}


html body #app .checkin-history-head h2 {
  margin:0 !important;

  font-size:19px !important;
  line-height:1 !important;
}


/* =========================================================
   SMALL IPHONE
   ========================================================= */

@media (max-width:380px) {

  html body #app .checkin-today-grid,
  html body #app .nami-checkin-today-grid {
    gap:7px !important;
  }

  html body #app .checkin-today-person,
  html body #app .nami-checkin-person-card,
  html body #app .checkin-waiting-card,
  html body #app .nami-checkin-waiting-card {
    padding:11px !important;
  }

}


/* =========================================================
   NAMI — CHECK-IN PROFILE PHOTO
   ========================================================= */

html body #app
.checkin-v2-avatar,
html body #app
.nami-checkin-avatar {
  overflow:hidden !important;

  padding:0 !important;

  background:
    linear-gradient(
      145deg,
      #d9799d,
      #8176df
    ) !important;
}

html body #app
.checkin-v2-avatar img,
html body #app
.nami-checkin-avatar img {
  width:100% !important;
  height:100% !important;

  display:block !important;

  object-fit:cover !important;
  object-position:center !important;

  border-radius:inherit !important;
}


/* чуть крупнее, чтобы фото реально читалось */

html body #app
.checkin-v2-avatar,
html body #app
.nami-checkin-avatar {
  width:40px !important;
  height:40px !important;

  border-radius:13px !important;
}

html body #app
.checkin-today-person-head,
html body #app
.nami-checkin-person-head {
  grid-template-columns:
    40px minmax(0,1fr) !important;

  gap:10px !important;
}


/* =========================================================
   NAMI — CHECK-IN CHIPS + PHOTO POLISH
   ========================================================= */


/* PHOTO */

html body #app
.checkin-v2-avatar,
html body #app
.nami-checkin-avatar {
  width:42px !important;
  height:42px !important;

  overflow:hidden !important;

  padding:0 !important;

  border-radius:14px !important;
}

html body #app
.checkin-v2-avatar img,
html body #app
.nami-checkin-avatar img {
  width:100% !important;
  height:100% !important;

  display:block !important;

  object-fit:cover !important;
  object-position:center !important;
}

html body #app
.checkin-today-person-head,
html body #app
.nami-checkin-person-head {
  grid-template-columns:
    42px minmax(0,1fr) !important;

  gap:10px !important;
}


/* УСТАЛ(А) */

html body #app
.checkin-today-person
.checkin-v2-mood,

html body #app
.nami-checkin-person-card
.nami-checkin-mood {
  min-height:31px !important;

  padding:0 12px !important;

  margin-top:11px !important;

  border-radius:999px !important;

  font-size:9.5px !important;
  font-weight:850 !important;
}


/* ПОБЫТЬ ВМЕСТЕ */

html body #app
.checkin-today-person
.checkin-v2-needs span,

html body #app
.nami-checkin-person-card
.nami-checkin-needs span {
  min-height:32px !important;

  padding:0 12px !important;

  border-radius:999px !important;

  font-size:9.5px !important;
  font-weight:850 !important;
}


/* расстояние между плашками */

html body #app
.checkin-today-person
.checkin-v2-needs,

html body #app
.nami-checkin-person-card
.nami-checkin-needs {
  margin-top:8px !important;
}


/* кнопка Изменить тоже пропорциональнее */

html body #app
.checkin-v2-edit,
html body #app
.nami-checkin-edit {
  min-height:35px !important;

  margin-top:10px !important;

  font-size:9px !important;
}


/* DARK */

html[data-svoi-theme="dark"]
body #app
.checkin-today-person
.checkin-v2-mood,

html[data-svoi-theme="dark"]
body #app
.nami-checkin-person-card
.nami-checkin-mood,

html[data-svoi-theme="dark"]
body #app
.checkin-today-person
.checkin-v2-needs span,

html[data-svoi-theme="dark"]
body #app
.nami-checkin-person-card
.nami-checkin-needs span {
  background:
    rgba(112,101,209,.16) !important;
}


/* LIGHT */

html:not([data-svoi-theme="dark"])
body #app
.checkin-today-person
.checkin-v2-mood,

html:not([data-svoi-theme="dark"])
body #app
.nami-checkin-person-card
.nami-checkin-mood,

html:not([data-svoi-theme="dark"])
body #app
.checkin-today-person
.checkin-v2-needs span,

html:not([data-svoi-theme="dark"])
body #app
.nami-checkin-person-card
.nami-checkin-needs span {
  background:
    rgba(232,225,252,.78) !important;
}


/* =========================================================
   NAMI — CHECK-IN COMPACT FINAL
   ========================================================= */


/* =========================================================
   ВЕРХ ЭКРАНА
   ========================================================= */

html body #app .checkin-v2-head {
  margin:
    14px 0 16px !important;
}

html body #app .checkin-v2-head h1 {
  font-size:27px !important;
}

html body #app .checkin-v2-add {
  height:38px !important;

  padding:
    0 11px !important;

  border-radius:12px !important;
}


/* =========================================================
   ОБЩИЙ БЛОК
   ========================================================= */

html body #app .checkin-insight {
  grid-template-columns:
    38px minmax(0,1fr) !important;

  gap:10px !important;

  margin:
    0 0 8px !important;

  padding:10px 11px !important;

  border-radius:18px !important;
}

html body #app .checkin-insight-mark {
  width:38px !important;
  height:38px !important;

  border-radius:12px !important;
}

html body #app .checkin-insight-mark svg {
  width:25px !important;
  height:19px !important;
}

html body #app .checkin-insight-copy small {
  margin-bottom:4px !important;

  font-size:7.5px !important;
}

html body #app .checkin-insight-copy h2 {
  font-size:15.5px !important;
}

html body #app .checkin-insight-copy p {
  margin-top:4px !important;

  font-size:8.7px !important;
  line-height:1.28 !important;
}


/* =========================================================
   ДВЕ КАРТОЧКИ
   ========================================================= */

html body #app .checkin-today-grid,
html body #app .nami-checkin-today-grid {
  gap:8px !important;
}


html body #app .checkin-today-person,
html body #app .nami-checkin-person-card,
html body #app .checkin-waiting-card,
html body #app .nami-checkin-waiting-card {
  min-height:138px !important;

  padding:10px !important;

  border-radius:18px !important;
}


/* =========================================================
   ЛЕВАЯ КАРТОЧКА
   ========================================================= */

html body #app .checkin-today-person-head,
html body #app .nami-checkin-person-head {
  grid-template-columns:
    36px minmax(0,1fr) !important;

  gap:8px !important;

  margin:
    0 0 9px !important;
}

html body #app .checkin-v2-avatar,
html body #app .nami-checkin-avatar {
  width:36px !important;
  height:36px !important;

  border-radius:11px !important;
}

html body #app .checkin-v2-person-copy b,
html body #app .nami-checkin-person-copy b {
  font-size:10.5px !important;
}

html body #app .checkin-v2-person-copy small,
html body #app .nami-checkin-person-copy small {
  font-size:7.5px !important;
}


/* =========================================================
   УСТАЛ(А) + ПОБЫТЬ ВМЕСТЕ В ОДНУ СТРОКУ
   ========================================================= */

html body #app .checkin-today-person,
html body #app .nami-checkin-person-card {
  position:relative !important;
}


/* контейнер плашек */

html body #app .checkin-today-person
.checkin-v2-needs,

html body #app .nami-checkin-person-card
.nami-checkin-needs {
  display:inline-flex !important;

  flex-wrap:nowrap !important;

  gap:5px !important;

  width:auto !important;

  margin:0 !important;
}


/* настроение */

html body #app .checkin-today-person
.checkin-v2-mood,

html body #app .nami-checkin-person-card
.nami-checkin-mood {
  min-height:27px !important;

  display:inline-flex !important;

  margin:0 5px 0 0 !important;

  padding:
    0 9px !important;

  font-size:8.5px !important;

  vertical-align:middle !important;
}


/* делаем mood + needs одной визуальной строкой */

html body #app .checkin-today-person
.checkin-v2-mood,

html body #app .checkin-today-person
.checkin-v2-needs,

html body #app .nami-checkin-person-card
.nami-checkin-mood,

html body #app .nami-checkin-person-card
.nami-checkin-needs {
  float:left !important;
}


/* сброс после строки */

html body #app .checkin-v2-edit,
html body #app .nami-checkin-edit {
  clear:both !important;
}


/* сами потребности */

html body #app .checkin-today-person
.checkin-v2-needs span,

html body #app .nami-checkin-person-card
.nami-checkin-needs span {
  min-height:27px !important;

  padding:
    0 9px !important;

  font-size:8.5px !important;
}


/* кнопка компактнее */

html body #app .checkin-v2-edit,
html body #app .nami-checkin-edit {
  min-height:30px !important;

  margin:
    8px 0 0 !important;

  border-radius:9px !important;

  font-size:8px !important;
}


/* =========================================================
   ПРАВАЯ КАРТОЧКА
   ========================================================= */

html body #app .checkin-waiting-card,
html body #app .nami-checkin-waiting-card {
  justify-content:flex-start !important;
}

html body #app .checkin-waiting-card > span,
html body #app .nami-checkin-waiting-card > span {
  width:34px !important;
  height:34px !important;

  margin:
    0 0 9px !important;

  border-radius:10px !important;
}

html body #app .checkin-waiting-card > b,
html body #app .nami-checkin-waiting-card > b {
  font-size:10.5px !important;
  line-height:1.15 !important;
}

html body #app .checkin-waiting-card > small,
html body #app .nami-checkin-waiting-card > small {
  margin-top:5px !important;

  font-size:8px !important;
  line-height:1.3 !important;
}


/* =========================================================
   ПОСЛЕДНИЕ 7 ДНЕЙ
   ========================================================= */

html body #app .checkin-history-head {
  margin:
    15px 3px 7px !important;
}

html body #app .checkin-history-head h2 {
  font-size:18px !important;
}

html body #app .checkin-history-empty,
html body #app .checkin-v2-history-empty {
  min-height:52px !important;

  padding:
    10px 12px !important;

  border-radius:14px !important;

  font-size:8.7px !important;
}


/* =========================================================
   SMALL IPHONE
   ========================================================= */

@media (max-width:380px) {

  html body #app .checkin-v2-head h1 {
    font-size:25px !important;
  }

  html body #app .checkin-today-person,
  html body #app .nami-checkin-person-card,
  html body #app .checkin-waiting-card,
  html body #app .nami-checkin-waiting-card {
    min-height:134px !important;

    padding:9px !important;
  }

  html body #app .checkin-today-person
  .checkin-v2-mood,

  html body #app .nami-checkin-person-card
  .nami-checkin-mood,

  html body #app .checkin-today-person
  .checkin-v2-needs span,

  html body #app .nami-checkin-person-card
  .nami-checkin-needs span {
    padding:
      0 7px !important;

    font-size:7.8px !important;
  }

}


/* =========================================================
   NAMI — CHECK-IN CHIPS + PHOTO POLISH
   ========================================================= */


/* PHOTO */

html body #app
.checkin-v2-avatar,
html body #app
.nami-checkin-avatar {
  width:42px !important;
  height:42px !important;

  overflow:hidden !important;

  padding:0 !important;

  border-radius:14px !important;
}

html body #app
.checkin-v2-avatar img,
html body #app
.nami-checkin-avatar img {
  width:100% !important;
  height:100% !important;

  display:block !important;

  object-fit:cover !important;
  object-position:center !important;
}

html body #app
.checkin-today-person-head,
html body #app
.nami-checkin-person-head {
  grid-template-columns:
    42px minmax(0,1fr) !important;

  gap:10px !important;
}


/* УСТАЛ(А) */

html body #app
.checkin-today-person
.checkin-v2-mood,

html body #app
.nami-checkin-person-card
.nami-checkin-mood {
  min-height:31px !important;

  padding:0 12px !important;

  margin-top:11px !important;

  border-radius:999px !important;

  font-size:9.5px !important;
  font-weight:850 !important;
}


/* ПОБЫТЬ ВМЕСТЕ */

html body #app
.checkin-today-person
.checkin-v2-needs span,

html body #app
.nami-checkin-person-card
.nami-checkin-needs span {
  min-height:32px !important;

  padding:0 12px !important;

  border-radius:999px !important;

  font-size:9.5px !important;
  font-weight:850 !important;
}


/* расстояние между плашками */

html body #app
.checkin-today-person
.checkin-v2-needs,

html body #app
.nami-checkin-person-card
.nami-checkin-needs {
  margin-top:8px !important;
}


/* кнопка Изменить тоже пропорциональнее */

html body #app
.checkin-v2-edit,
html body #app
.nami-checkin-edit {
  min-height:35px !important;

  margin-top:10px !important;

  font-size:9px !important;
}


/* DARK */

html[data-svoi-theme="dark"]
body #app
.checkin-today-person
.checkin-v2-mood,

html[data-svoi-theme="dark"]
body #app
.nami-checkin-person-card
.nami-checkin-mood,

html[data-svoi-theme="dark"]
body #app
.checkin-today-person
.checkin-v2-needs span,

html[data-svoi-theme="dark"]
body #app
.nami-checkin-person-card
.nami-checkin-needs span {
  background:
    rgba(112,101,209,.16) !important;
}


/* LIGHT */

html:not([data-svoi-theme="dark"])
body #app
.checkin-today-person
.checkin-v2-mood,

html:not([data-svoi-theme="dark"])
body #app
.nami-checkin-person-card
.nami-checkin-mood,

html:not([data-svoi-theme="dark"])
body #app
.checkin-today-person
.checkin-v2-needs span,

html:not([data-svoi-theme="dark"])
body #app
.nami-checkin-person-card
.nami-checkin-needs span {
  background:
    rgba(232,225,252,.78) !important;
}


/* =========================================================
   NAMI — CHECK-IN COMPACT FINAL
   ========================================================= */


/* =========================================================
   ВЕРХ ЭКРАНА
   ========================================================= */

html body #app .checkin-v2-head {
  margin:
    14px 0 16px !important;
}

html body #app .checkin-v2-head h1 {
  font-size:27px !important;
}

html body #app .checkin-v2-add {
  height:38px !important;

  padding:
    0 11px !important;

  border-radius:12px !important;
}


/* =========================================================
   ОБЩИЙ БЛОК
   ========================================================= */

html body #app .checkin-insight {
  grid-template-columns:
    38px minmax(0,1fr) !important;

  gap:10px !important;

  margin:
    0 0 8px !important;

  padding:10px 11px !important;

  border-radius:18px !important;
}

html body #app .checkin-insight-mark {
  width:38px !important;
  height:38px !important;

  border-radius:12px !important;
}

html body #app .checkin-insight-mark svg {
  width:25px !important;
  height:19px !important;
}

html body #app .checkin-insight-copy small {
  margin-bottom:4px !important;

  font-size:7.5px !important;
}

html body #app .checkin-insight-copy h2 {
  font-size:15.5px !important;
}

html body #app .checkin-insight-copy p {
  margin-top:4px !important;

  font-size:8.7px !important;
  line-height:1.28 !important;
}


/* =========================================================
   ДВЕ КАРТОЧКИ
   ========================================================= */

html body #app .checkin-today-grid,
html body #app .nami-checkin-today-grid {
  gap:8px !important;
}


html body #app .checkin-today-person,
html body #app .nami-checkin-person-card,
html body #app .checkin-waiting-card,
html body #app .nami-checkin-waiting-card {
  min-height:138px !important;

  padding:10px !important;

  border-radius:18px !important;
}


/* =========================================================
   ЛЕВАЯ КАРТОЧКА
   ========================================================= */

html body #app .checkin-today-person-head,
html body #app .nami-checkin-person-head {
  grid-template-columns:
    36px minmax(0,1fr) !important;

  gap:8px !important;

  margin:
    0 0 9px !important;
}

html body #app .checkin-v2-avatar,
html body #app .nami-checkin-avatar {
  width:36px !important;
  height:36px !important;

  border-radius:11px !important;
}

html body #app .checkin-v2-person-copy b,
html body #app .nami-checkin-person-copy b {
  font-size:10.5px !important;
}

html body #app .checkin-v2-person-copy small,
html body #app .nami-checkin-person-copy small {
  font-size:7.5px !important;
}


/* =========================================================
   УСТАЛ(А) + ПОБЫТЬ ВМЕСТЕ В ОДНУ СТРОКУ
   ========================================================= */

html body #app .checkin-today-person,
html body #app .nami-checkin-person-card {
  position:relative !important;
}


/* контейнер плашек */

html body #app .checkin-today-person
.checkin-v2-needs,

html body #app .nami-checkin-person-card
.nami-checkin-needs {
  display:inline-flex !important;

  flex-wrap:nowrap !important;

  gap:5px !important;

  width:auto !important;

  margin:0 !important;
}


/* настроение */

html body #app .checkin-today-person
.checkin-v2-mood,

html body #app .nami-checkin-person-card
.nami-checkin-mood {
  min-height:27px !important;

  display:inline-flex !important;

  margin:0 5px 0 0 !important;

  padding:
    0 9px !important;

  font-size:8.5px !important;

  vertical-align:middle !important;
}


/* делаем mood + needs одной визуальной строкой */

html body #app .checkin-today-person
.checkin-v2-mood,

html body #app .checkin-today-person
.checkin-v2-needs,

html body #app .nami-checkin-person-card
.nami-checkin-mood,

html body #app .nami-checkin-person-card
.nami-checkin-needs {
  float:left !important;
}


/* сброс после строки */

html body #app .checkin-v2-edit,
html body #app .nami-checkin-edit {
  clear:both !important;
}


/* сами потребности */

html body #app .checkin-today-person
.checkin-v2-needs span,

html body #app .nami-checkin-person-card
.nami-checkin-needs span {
  min-height:27px !important;

  padding:
    0 9px !important;

  font-size:8.5px !important;
}


/* кнопка компактнее */

html body #app .checkin-v2-edit,
html body #app .nami-checkin-edit {
  min-height:30px !important;

  margin:
    8px 0 0 !important;

  border-radius:9px !important;

  font-size:8px !important;
}


/* =========================================================
   ПРАВАЯ КАРТОЧКА
   ========================================================= */

html body #app .checkin-waiting-card,
html body #app .nami-checkin-waiting-card {
  justify-content:flex-start !important;
}

html body #app .checkin-waiting-card > span,
html body #app .nami-checkin-waiting-card > span {
  width:34px !important;
  height:34px !important;

  margin:
    0 0 9px !important;

  border-radius:10px !important;
}

html body #app .checkin-waiting-card > b,
html body #app .nami-checkin-waiting-card > b {
  font-size:10.5px !important;
  line-height:1.15 !important;
}

html body #app .checkin-waiting-card > small,
html body #app .nami-checkin-waiting-card > small {
  margin-top:5px !important;

  font-size:8px !important;
  line-height:1.3 !important;
}


/* =========================================================
   ПОСЛЕДНИЕ 7 ДНЕЙ
   ========================================================= */

html body #app .checkin-history-head {
  margin:
    15px 3px 7px !important;
}

html body #app .checkin-history-head h2 {
  font-size:18px !important;
}

html body #app .checkin-history-empty,
html body #app .checkin-v2-history-empty {
  min-height:52px !important;

  padding:
    10px 12px !important;

  border-radius:14px !important;

  font-size:8.7px !important;
}


/* =========================================================
   SMALL IPHONE
   ========================================================= */

@media (max-width:380px) {

  html body #app .checkin-v2-head h1 {
    font-size:25px !important;
  }

  html body #app .checkin-today-person,
  html body #app .nami-checkin-person-card,
  html body #app .checkin-waiting-card,
  html body #app .nami-checkin-waiting-card {
    min-height:134px !important;

    padding:9px !important;
  }

  html body #app .checkin-today-person
  .checkin-v2-mood,

  html body #app .nami-checkin-person-card
  .nami-checkin-mood,

  html body #app .checkin-today-person
  .checkin-v2-needs span,

  html body #app .nami-checkin-person-card
  .nami-checkin-needs span {
    padding:
      0 7px !important;

    font-size:7.8px !important;
  }

}



/* ===== SOURCE: wishes-final.css ===== */

/* =========================================================
   NAMI — WISHES V2
   ========================================================= */

.page:has(.wishes-v2-head) {
  padding-bottom:
    calc(175px + env(safe-area-inset-bottom)) !important;
}


/* HEADER */

.wishes-v2-head {
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;

  gap:10px;

  margin:17px 0 13px;
}

.wishes-v2-head > div {
  min-width:0;
}

.wishes-v2-head small {
  display:block;

  margin-bottom:4px;

  color:#9389e9;

  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
}

.wishes-v2-head h1 {
  margin:0;

  color:var(--text);

  font-size:26px;
  line-height:1;

  font-weight:900;
  letter-spacing:-.035em;
}

.wishes-v2-add {
  height:40px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:6px;

  padding:0 12px;

  border-radius:13px;

  color:#9389e9;

  font-size:9.5px;
  font-weight:850;
}


/* OVERVIEW */

.wishes-v2-overview {
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:8px;

  margin-bottom:10px;
}

.wishes-v2-overview > div {
  min-height:83px;

  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto 1fr;
  align-items:end;

  column-gap:6px;

  padding:12px;

  border-radius:19px;
}

.wishes-v2-overview small {
  grid-column:1 / -1;

  align-self:start;

  color:var(--muted);

  font-size:7.5px;
  font-weight:900;
  letter-spacing:.12em;
}

.wishes-v2-overview strong {
  color:var(--text);

  font-size:28px;
  line-height:1;

  font-weight:900;
}

.wishes-v2-overview span {
  padding-bottom:2px;

  color:var(--muted);

  font-size:9px;
  font-weight:750;
}


/* FILTERS */

.wishes-v2-filters {
  display:flex;

  gap:6px;

  overflow-x:auto;

  margin:0 0 10px;
  padding:0 0 2px;

  scrollbar-width:none;
}

.wishes-v2-filters::-webkit-scrollbar {
  display:none;
}

.wishes-v2-filters button {
  flex:0 0 auto;

  min-height:34px;

  padding:0 11px;

  border-radius:999px;

  color:var(--muted);

  font-size:8.8px;
  font-weight:800;
}

.wishes-v2-filters button.active {
  color:#fff;

  background:
    linear-gradient(
      135deg,
      #7a70df,
      #6884df
    );
}


/* LIST */

.wishes-v2-list {
  display:flex;
  flex-direction:column;

  gap:9px;
}


/* CARD */

.wish-v2-card {
  display:grid;
  grid-template-columns:86px minmax(0,1fr);

  gap:11px;

  padding:10px;

  border-radius:21px;
}

.wish-v2-card.is-done {
  opacity:.72;
}


/* PHOTO */

.wish-v2-photo {
  width:86px;
  height:86px;

  overflow:hidden;

  display:grid;
  place-items:center;

  padding:0;

  border-radius:16px;
}

.wish-v2-photo img {
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
}

.wish-v2-placeholder {
  color:#968bea;
}


/* BODY */

.wish-v2-body {
  min-width:0;
}

.wish-v2-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:8px;

  margin-bottom:5px;
}

.wish-v2-meta span {
  overflow:hidden;

  color:var(--muted);

  font-size:8px;
  font-weight:750;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.wish-v2-meta b {
  flex:none;

  color:#8f85e5;

  font-size:7.5px;
  font-weight:850;
}

.wish-v2-body h3 {
  margin:0;

  color:var(--text);

  font-size:13px;
  line-height:1.2;

  font-weight:900;
}

.wish-v2-body p {
  display:-webkit-box;
  overflow:hidden;

  margin:5px 0 0;

  color:var(--muted);

  font-size:9px;
  line-height:1.35;

  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.wish-v2-tags {
  display:flex;
  flex-wrap:wrap;

  gap:5px;

  margin-top:7px;
}

.wish-v2-tags span {
  min-height:22px;

  display:inline-flex;
  align-items:center;

  padding:0 7px;

  border-radius:999px;

  color:#9489e8;

  font-size:7.5px;
  font-weight:800;
}


/* ACTIONS */

.wish-v2-actions {
  grid-column:1 / -1;

  display:flex;
  align-items:center;

  gap:6px;

  margin-top:1px;
}

.wish-v2-actions button,
.wish-v2-actions a {
  min-height:32px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:0 10px;

  border-radius:10px;

  text-decoration:none;

  font-size:8.5px;
  font-weight:800;
}

.wish-v2-check,
.wish-v2-icon {
  width:32px !important;

  flex:0 0 32px;

  padding:0 !important;
}

.wish-v2-action {
  color:#9389e9;
}

.wish-v2-check.active {
  color:#fff;

  background:
    linear-gradient(
      135deg,
      #7a70df,
      #6884df
    ) !important;
}

.wish-v2-icon {
  color:var(--muted);
}

.wish-v2-icon.danger {
  color:#c57786;
}


/* EMPTY */

.wishes-v2-empty {
  min-height:175px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:7px;

  padding:24px;

  border-radius:22px;

  text-align:center;
}

.wishes-v2-empty > span {
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  border-radius:14px;

  color:#9489e9;
}

.wishes-v2-empty b {
  color:var(--text);

  font-size:14px;
  font-weight:900;
}

.wishes-v2-empty small {
  max-width:240px;

  color:var(--muted);

  font-size:9px;
  line-height:1.4;
}


/* LIGHT */

html:not([data-svoi-theme="dark"])
.wishes-v2-add,
html:not([data-svoi-theme="dark"])
.wishes-v2-overview > div,
html:not([data-svoi-theme="dark"])
.wish-v2-card,
html:not([data-svoi-theme="dark"])
.wishes-v2-empty {
  background:rgba(255,255,255,.56);

  border:1px solid rgba(255,255,255,.80);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90);
}

html:not([data-svoi-theme="dark"])
.wishes-v2-filters button,
html:not([data-svoi-theme="dark"])
.wish-v2-tags span,
html:not([data-svoi-theme="dark"])
.wish-v2-actions button,
html:not([data-svoi-theme="dark"])
.wish-v2-actions a {
  background:rgba(234,228,251,.64);
}

html:not([data-svoi-theme="dark"])
.wish-v2-photo,
html:not([data-svoi-theme="dark"])
.wishes-v2-empty > span {
  background:
    linear-gradient(
      145deg,
      rgba(246,218,228,.75),
      rgba(219,229,253,.80)
    );
}


/* DARK */

html[data-svoi-theme="dark"]
.wishes-v2-add,
html[data-svoi-theme="dark"]
.wishes-v2-overview > div,
html[data-svoi-theme="dark"]
.wish-v2-card,
html[data-svoi-theme="dark"]
.wishes-v2-empty {
  background:
    linear-gradient(
      145deg,
      #1d253d,
      #181f35
    );

  border:
    1px solid rgba(119,126,211,.14);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03);
}

html[data-svoi-theme="dark"]
.wishes-v2-filters button,
html[data-svoi-theme="dark"]
.wish-v2-tags span,
html[data-svoi-theme="dark"]
.wish-v2-actions button,
html[data-svoi-theme="dark"]
.wish-v2-actions a {
  background:rgba(108,99,194,.11);
}

html[data-svoi-theme="dark"]
.wish-v2-photo,
html[data-svoi-theme="dark"]
.wishes-v2-empty > span {
  background:
    linear-gradient(
      145deg,
      rgba(108,72,122,.25),
      rgba(65,73,150,.27)
    );
}


/* SMALL IPHONE */

@media (max-width:380px) {

  .wish-v2-card {
    grid-template-columns:78px minmax(0,1fr);
  }

  .wish-v2-photo {
    width:78px;
    height:78px;
  }

  .wish-v2-actions {
    gap:5px;
  }

  .wish-v2-actions button,
  .wish-v2-actions a {
    padding:0 8px;
  }

}



/* =========================================================
   NAMI — WISHES PREMIUM POLISH
   ========================================================= */


/* ---------- HEADER ---------- */

.wishes-v2-head {
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:12px;
  margin-top:14px;
  margin-bottom:16px;
}

.wishes-v2-head > .icon-btn {
  width:38px !important;
  height:38px !important;
  min-width:38px !important;

  border-radius:14px !important;
}

.wishes-v2-head h1 {
  font-size:29px;
  letter-spacing:-.045em;
}

.wishes-v2-head small {
  margin-bottom:5px;
  font-size:7.5px;
  letter-spacing:.18em;
}

.wishes-v2-add {
  height:38px;
  padding:0 13px;

  border-radius:14px;

  gap:5px;

  font-size:9px;
  font-weight:850;

  transition:
    transform .16s ease,
    opacity .16s ease;
}

.wishes-v2-add:active {
  transform:scale(.96);
}


/* ---------- STATS ---------- */

.wishes-v2-overview {
  gap:10px;
  margin-bottom:13px;
}

.wishes-v2-overview > div {
  position:relative;

  min-height:102px;

  overflow:hidden;

  padding:14px 15px;

  border-radius:24px;
}

.wishes-v2-overview > div::after {
  content:"";

  position:absolute;
  right:-22px;
  bottom:-30px;

  width:90px;
  height:90px;

  border-radius:50%;

  filter:blur(2px);

  pointer-events:none;
}

.wishes-v2-overview > div:first-child::after {
  background:
    radial-gradient(
      circle,
      rgba(245,151,179,.20),
      rgba(142,127,225,.06) 60%,
      transparent 72%
    );
}

.wishes-v2-overview > div:last-child::after {
  background:
    radial-gradient(
      circle,
      rgba(122,164,246,.22),
      transparent 70%
    );
}

.wishes-v2-overview small {
  position:relative;
  z-index:1;

  font-size:7px;
  letter-spacing:.16em;
}

.wishes-v2-overview strong {
  position:relative;
  z-index:1;

  font-size:34px;
  letter-spacing:-.05em;
}

.wishes-v2-overview span {
  position:relative;
  z-index:1;

  font-size:9.5px;
}


/* ---------- FILTERS ---------- */

.wishes-v2-filters {
  gap:7px;

  margin-bottom:13px;
}

.wishes-v2-filters button {
  min-height:32px;

  padding:0 12px;

  border-radius:11px;

  font-size:8px;

  transition:
    transform .15s ease,
    background .15s ease;
}

.wishes-v2-filters button:active {
  transform:scale(.96);
}

.wishes-v2-filters button.active {
  box-shadow:
    0 7px 18px rgba(111,104,208,.16);
}


/* ---------- WISH CARD ---------- */

.wishes-v2-list {
  gap:11px;
}

.wish-v2-card {
  position:relative;

  grid-template-columns:100px minmax(0,1fr);

  gap:13px;

  padding:11px;

  border-radius:25px;

  overflow:hidden;

  transition:
    transform .18s ease,
    border-color .18s ease;
}

.wish-v2-card:active {
  transform:scale(.992);
}

.wish-v2-photo {
  width:100px;
  height:100px;

  border-radius:19px;
}

.wish-v2-photo img {
  transition:transform .3s ease;
}

.wish-v2-photo:active img {
  transform:scale(1.025);
}


/* ---------- TEXT ---------- */

.wish-v2-meta {
  margin-top:2px;
  margin-bottom:6px;
}

.wish-v2-meta span {
  font-size:8.5px;
  font-weight:800;
}

.wish-v2-meta b {
  padding:4px 7px;

  border-radius:999px;

  font-size:7px;
}

.wish-v2-body h3 {
  font-size:15px;
  line-height:1.15;

  letter-spacing:-.02em;
}

.wish-v2-body p {
  margin-top:6px;

  font-size:9.5px;
  line-height:1.4;
}

.wish-v2-tags {
  margin-top:9px;
}

.wish-v2-tags span {
  min-height:23px;

  padding:0 8px;

  border-radius:8px;

  font-size:7.3px;
}


/* ---------- ACTION BAR ---------- */

.wish-v2-actions {
  position:relative;

  grid-column:1 / -1;

  gap:7px;

  margin-top:3px;

  padding-top:10px;
}

.wish-v2-actions::before {
  content:"";

  position:absolute;
  left:2px;
  right:2px;
  top:0;

  height:1px;
}

.wish-v2-actions button,
.wish-v2-actions a {
  min-height:34px;

  border-radius:12px;

  padding:0 11px;

  font-size:8.5px;

  transition:
    transform .15s ease,
    opacity .15s ease;
}

.wish-v2-actions button:active,
.wish-v2-actions a:active {
  transform:scale(.95);
}

.wish-v2-check,
.wish-v2-icon {
  width:34px !important;
  min-width:34px !important;
  flex:0 0 34px;

  padding:0 !important;
}

.wish-v2-action[data-wish-to-plan] {
  color:#fff !important;

  background:
    linear-gradient(
      135deg,
      #8c78df,
      #687fd9
    ) !important;

  box-shadow:
    0 7px 15px rgba(101,99,195,.15);
}

.wish-v2-icon.danger {
  margin-left:auto;
}


/* ---------- LIGHT ---------- */

html:not([data-svoi-theme="dark"])
.wish-v2-card {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.74),
      rgba(246,247,255,.55)
    );

  border:
    1px solid rgba(255,255,255,.92);

  box-shadow:
    0 15px 38px rgba(98,101,151,.065),
    inset 0 1px 0 rgba(255,255,255,.96);
}

html:not([data-svoi-theme="dark"])
.wishes-v2-overview > div {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.72),
      rgba(245,246,255,.50)
    );

  border:
    1px solid rgba(255,255,255,.95);

  box-shadow:
    0 13px 30px rgba(102,103,150,.055),
    inset 0 1px 0 rgba(255,255,255,.98);
}

html:not([data-svoi-theme="dark"])
.wish-v2-actions::before {
  background:rgba(115,118,150,.08);
}

html:not([data-svoi-theme="dark"])
.wish-v2-meta b {
  background:rgba(136,123,215,.09);
}


/* ---------- DARK ---------- */

html[data-svoi-theme="dark"]
.wish-v2-card {
  background:
    linear-gradient(
      145deg,
      rgba(31,39,64,.96),
      rgba(23,30,51,.98)
    );

  border:
    1px solid rgba(134,139,225,.12);

  box-shadow:
    0 16px 34px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.025);
}

html[data-svoi-theme="dark"]
.wishes-v2-overview > div {
  background:
    linear-gradient(
      145deg,
      rgba(31,39,64,.92),
      rgba(24,31,52,.96)
    );

  border:
    1px solid rgba(131,136,219,.12);
}

html[data-svoi-theme="dark"]
.wish-v2-actions::before {
  background:rgba(255,255,255,.045);
}

html[data-svoi-theme="dark"]
.wish-v2-meta b {
  background:rgba(139,127,223,.12);
}


/* =========================================================
   EDIT / ADD WISH SHEET
   ========================================================= */

#sheetRoot #wishForm,
#sheetRoot #wishEditForm {
  gap:15px;
}

#sheetRoot #wishForm .field,
#sheetRoot #wishEditForm .field {
  gap:7px;
}

#sheetRoot #wishForm .field > span,
#sheetRoot #wishEditForm .field > span {
  padding-left:4px;

  font-size:10px;
  font-weight:850;
}

#sheetRoot #wishForm input,
#sheetRoot #wishForm textarea,
#sheetRoot #wishEditForm input,
#sheetRoot #wishEditForm textarea {
  border-radius:18px !important;

  font-size:15px !important;
}

#sheetRoot #wishForm input,
#sheetRoot #wishEditForm input {
  min-height:51px !important;
}

#sheetRoot #wishForm textarea,
#sheetRoot #wishEditForm textarea {
  min-height:94px !important;

  resize:none;
}

#sheetRoot .wish-photo-picker {
  display:flex;
  flex-direction:column;

  gap:10px;
}

#sheetRoot .wish-photo-picker > .secondary {
  min-height:50px;

  border-radius:18px;

  font-size:12px;
  font-weight:850;
}

#sheetRoot .wish-photo-preview {
  position:relative;

  overflow:hidden;

  border-radius:22px;
}

#sheetRoot .wish-photo-preview img {
  width:100%;
  max-height:280px;

  display:block;

  object-fit:cover;

  border-radius:22px;
}

#sheetRoot .wish-photo-preview > button {
  position:absolute;

  top:10px;
  right:10px;

  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  overflow:hidden;

  padding:0;

  border-radius:14px;

  font-size:0;

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

#sheetRoot #wishForm > .primary,
#sheetRoot #wishEditForm > .primary {
  min-height:52px;

  border-radius:18px;

  font-size:13px;
  font-weight:900;

  box-shadow:
    0 11px 26px rgba(94,91,191,.16);
}


/* small screens */

@media (max-width:380px) {

  .wish-v2-card {
    grid-template-columns:88px minmax(0,1fr);
  }

  .wish-v2-photo {
    width:88px;
    height:88px;
  }

  .wishes-v2-overview > div {
    min-height:94px;
  }

}


/* =========================================================
   NAMI — WISH FILTER ACTIVE FIX
   ========================================================= */

/* LIGHT */

html:not([data-svoi-theme="dark"])
.wishes-v2-filters button {
  color:#77798b !important;
}

html:not([data-svoi-theme="dark"])
.wishes-v2-filters button.active {
  color:#fff !important;

  background:
    linear-gradient(
      135deg,
      #8d79e7,
      #7187e1
    ) !important;

  box-shadow:
    0 8px 20px rgba(112,105,205,.22) !important;
}


/* DARK */

html[data-svoi-theme="dark"]
.wishes-v2-filters button {
  color:#aeb3c8 !important;
}

html[data-svoi-theme="dark"]
.wishes-v2-filters button.active {
  color:#fff !important;

  background:
    linear-gradient(
      135deg,
      #8071dc,
      #6279d5
    ) !important;

  box-shadow:
    0 8px 20px rgba(80,77,174,.25) !important;
}



/* =========================================================
   NAMI — COMPLETED WISHES
   ========================================================= */

.wishes-v2-done-stat {
  cursor:pointer;

  transition:
    transform .16s ease,
    border-color .16s ease;
}

.wishes-v2-done-stat:active {
  transform:scale(.975);
}

.wishes-v2-done-stat span {
  color:#8178d7 !important;
  font-weight:850 !important;
}


/* explicit undo */

.wish-v2-check.is-undo {
  width:auto !important;
  min-width:auto !important;
  flex:0 0 auto !important;

  gap:5px;

  padding:0 11px !important;

  color:#8178d7 !important;
}

.wish-v2-check.is-undo.active {
  background:rgba(125,113,213,.10) !important;

  box-shadow:none !important;
}

html[data-svoi-theme="dark"]
.wish-v2-check.is-undo.active {
  color:#aaa2f3 !important;

  background:rgba(131,118,222,.13) !important;
}



/* =========================================================
   NAMI — WISH CATEGORIES + WANT TOGETHER
   ========================================================= */

.wish-category-field {
  display:flex;
  flex-direction:column;
  gap:8px;
}

.wish-category-title {
  padding-left:4px;

  color:var(--muted);

  font-size:10px;
  font-weight:850;
}

.wish-category-picker {
  display:flex;

  gap:6px;

  overflow-x:auto;

  padding:1px 1px 3px;

  scrollbar-width:none;
}

.wish-category-picker::-webkit-scrollbar {
  display:none;
}

.wish-category-picker button {
  flex:0 0 auto;

  min-height:36px;

  padding:0 12px;

  border-radius:12px;

  color:var(--muted);

  font-size:9px;
  font-weight:850;

  transition:
    transform .15s ease,
    background .15s ease,
    color .15s ease;
}

.wish-category-picker button:active {
  transform:scale(.96);
}

.wish-category-picker button.active {
  color:#fff !important;

  background:
    linear-gradient(
      135deg,
      #8d79e7,
      #6e84de
    ) !important;

  box-shadow:
    0 7px 18px rgba(105,98,198,.18);
}


/* category on card */

.wish-v2-tags .wish-v2-category {
  color:#756cc7 !important;
  font-weight:900 !important;
}


/* together badge */

.wish-v2-tags .wish-v2-together {
  color:#bf698f !important;

  background:
    rgba(239,143,178,.12) !important;

  font-weight:900 !important;
}


/* WANT TOO BUTTON */

.wish-v2-want {
  min-height:34px !important;

  padding:0 11px !important;

  color:#8c77cf !important;

  white-space:nowrap;
}

.wish-v2-want.active {
  color:#fff !important;

  background:
    linear-gradient(
      135deg,
      #dc7ca4,
      #8a78dc
    ) !important;

  box-shadow:
    0 7px 16px rgba(172,105,166,.18);
}


/* LIGHT */

html:not([data-svoi-theme="dark"])
.wish-category-picker button {
  background:
    rgba(232,227,249,.72);
}


/* DARK */

html[data-svoi-theme="dark"]
.wish-category-picker button {
  background:
    rgba(113,103,192,.12);

  color:#aeb2c9;
}

html[data-svoi-theme="dark"]
.wish-v2-tags .wish-v2-category {
  color:#aaa0ef !important;
}

html[data-svoi-theme="dark"]
.wish-v2-tags .wish-v2-together {
  color:#efa2bd !important;

  background:
    rgba(225,120,160,.11) !important;
}



/* =========================================================
   NAMI — WISH MATCHES
   ========================================================= */

.wishes-match-card {
  width:100%;

  display:grid;
  grid-template-columns:46px minmax(0,1fr) 20px;
  align-items:center;

  gap:11px;

  margin:0 0 13px;
  padding:11px 12px;

  border-radius:20px;

  text-align:left;

  transition:
    transform .16s ease,
    border-color .16s ease;
}

.wishes-match-card:active {
  transform:scale(.98);
}

.wishes-match-icon {
  width:46px;
  height:46px;

  display:grid;
  place-items:center;

  border-radius:15px;

  color:#fff;

  font-size:18px;

  background:
    linear-gradient(
      145deg,
      #e685aa,
      #967be1
    );

  box-shadow:
    0 8px 18px rgba(192,105,161,.18);
}

.wishes-match-copy {
  min-width:0;

  display:flex;
  flex-direction:column;
}

.wishes-match-copy small {
  margin-bottom:3px;

  color:#bd6f9a;

  font-size:7px;
  font-weight:900;
  letter-spacing:.14em;
}

.wishes-match-copy b {
  color:var(--text);

  font-size:13px;
  font-weight:900;

  letter-spacing:-.015em;
}

.wishes-match-copy > span {
  margin-top:3px;

  color:var(--muted);

  font-size:8.5px;
  font-weight:650;
}

.wishes-match-arrow {
  color:#9a91c8;

  font-size:24px;
  font-weight:400;

  text-align:center;
}


/* LIGHT */

html:not([data-svoi-theme="dark"])
.wishes-match-card {
  background:
    linear-gradient(
      135deg,
      rgba(255,247,251,.88),
      rgba(244,241,255,.80)
    );

  border:
    1px solid rgba(255,255,255,.96);

  box-shadow:
    0 12px 28px rgba(131,94,142,.06),
    inset 0 1px 0 rgba(255,255,255,.98);
}


/* DARK */

html[data-svoi-theme="dark"]
.wishes-match-card {
  background:
    linear-gradient(
      135deg,
      rgba(55,35,63,.82),
      rgba(35,34,66,.88)
    );

  border:
    1px solid rgba(211,125,175,.14);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);
}

html[data-svoi-theme="dark"]
.wishes-match-copy small {
  color:#e49ab9;
}


/* selected together filter */

html:not([data-svoi-theme="dark"])
.wishes-v2-filters
button[data-wish-filter="together"].active {
  background:
    linear-gradient(
      135deg,
      #db7da5,
      #927de0
    ) !important;

  color:#fff !important;
}

html[data-svoi-theme="dark"]
.wishes-v2-filters
button[data-wish-filter="together"].active {
  background:
    linear-gradient(
      135deg,
      #c96f99,
      #8170d0
    ) !important;

  color:#fff !important;
}



/* =========================================================
   NAMI — TOGETHER PLAN CTA
   ========================================================= */

.wish-v2-plan-together {
  min-height:36px !important;

  padding:0 14px !important;

  color:#fff !important;

  background:
    linear-gradient(
      135deg,
      #dc7fa6,
      #9a78df 58%,
      #7487dd
    ) !important;

  border:
    1px solid rgba(255,255,255,.10) !important;

  box-shadow:
    0 9px 20px rgba(151,99,180,.20) !important;

  font-weight:900 !important;

  white-space:nowrap;

  transition:
    transform .15s ease,
    box-shadow .15s ease !important;
}

.wish-v2-plan-together:active {
  transform:scale(.95);

  box-shadow:
    0 4px 11px rgba(151,99,180,.15) !important;
}


/* dark */

html[data-svoi-theme="dark"]
.wish-v2-plan-together {
  background:
    linear-gradient(
      135deg,
      #c97099,
      #866fd0 58%,
      #6277c9
    ) !important;

  color:#fff !important;
}


/* completed items never show primary CTA */

.wish-v2-card.is-done
.wish-v2-plan-together {
  display:none !important;
}



/* =========================================================
   NAMI — TASK VIEW
   ========================================================= */

.task-view-card{
  position:relative;
  overflow:hidden;
  padding:22px;
  border-radius:28px;

  border:1px solid rgba(255,255,255,.72);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(111,100,255,.16),
      transparent 38%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(255,141,179,.12),
      transparent 38%
    ),
    rgba(255,255,255,.68);

  backdrop-filter:
    blur(28px)
    saturate(145%);

  -webkit-backdrop-filter:
    blur(28px)
    saturate(145%);

  box-shadow:
    0 22px 55px rgba(56,52,95,.14),
    inset 0 1px 0 rgba(255,255,255,.8);
}


.task-view-card::before{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  right:-55px;
  top:-65px;
  border-radius:50%;
  background:
    rgba(117,104,255,.16);
  filter:blur(4px);
  pointer-events:none;
}


.task-view-hero{
  position:relative;
  z-index:1;

  display:grid;
  grid-template-columns:
    52px
    minmax(0,1fr);

  gap:14px;

  align-items:start;
}


.task-view-icon{
  width:52px;
  height:52px;

  display:grid;
  place-items:center;

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      rgba(123,105,255,.95),
      rgba(91,131,235,.95)
    );

  color:#fff;

  box-shadow:
    0 12px 26px
    rgba(93,89,218,.28);
}


.task-view-heading{
  min-width:0;
  padding-top:2px;
}


.task-view-heading > span,
.task-view-info-label{
  display:block;

  margin-bottom:6px;

  font-size:11px;
  font-weight:800;

  letter-spacing:.08em;

  color:
    rgba(86,86,108,.62);
}


.task-view-heading h3{
  margin:0;

  font-size:23px;
  line-height:1.18;

  letter-spacing:-.025em;

  color:#171721;

  overflow-wrap:anywhere;
}


.task-view-status{
  grid-column:
    2 / 3;

  justify-self:start;

  margin-top:2px;

  padding:7px 11px;

  border-radius:999px;

  font-size:12px;
  font-weight:800;

  background:
    rgba(106,104,224,.09);

  color:#6864cb;
}


.task-view-status.done{
  background:
    rgba(52,170,120,.10);

  color:#26845e;
}


.task-view-status.overdue{
  background:
    rgba(225,90,112,.10);

  color:#c34b64;
}


.task-view-info-grid{
  position:relative;
  z-index:1;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);

  gap:12px;

  margin-top:20px;
}


.task-view-info-card,
.task-view-note{
  border-radius:20px;

  padding:16px;

  border:
    1px solid
    rgba(130,128,175,.12);

  background:
    rgba(255,255,255,.58);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.7);
}


.task-view-assignees{
  display:flex;
  flex-direction:column;
  gap:10px;
}


.task-view-person{
  display:flex;
  align-items:center;
  gap:9px;

  min-width:0;
}


.task-view-person strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:15px;

  color:#20202b;
}


.task-view-avatar{
  flex:0 0 auto;

  width:32px;
  height:32px;

  display:grid;
  place-items:center;

  border-radius:11px;

  font-size:13px;
  font-weight:850;

  color:#716fd2;

  background:
    linear-gradient(
      135deg,
      rgba(119,108,255,.13),
      rgba(93,142,237,.08)
    );
}


.task-view-deadline-value{
  font-size:17px;
  line-height:1.25;

  font-weight:850;

  color:#20202b;
}


.task-view-overdue
.task-view-deadline{
  border-color:
    rgba(220,90,112,.18);

  background:
    rgba(255,239,243,.55);
}


.task-view-note{
  position:relative;
  z-index:1;

  margin-top:12px;
}


.task-view-note-text{
  font-size:15px;
  line-height:1.5;

  color:#30303c;

  white-space:pre-wrap;
}


.task-view-footer{
  position:relative;
  z-index:1;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  margin-top:18px;

  padding-top:16px;

  border-top:
    1px solid
    rgba(110,108,145,.11);

  font-size:13px;
}


.task-view-footer span{
  color:
    rgba(85,85,105,.58);
}


.task-view-footer strong{
  color:#23232e;
}


/* DARK */

[data-theme="dark"] .task-view-card,
.theme-dark .task-view-card{
  border-color:
    rgba(255,255,255,.09);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(118,104,255,.22),
      transparent 40%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(255,113,170,.12),
      transparent 42%
    ),
    rgba(28,28,34,.78);

  box-shadow:
    0 22px 60px
    rgba(0,0,0,.34),
    inset 0 1px 0
    rgba(255,255,255,.06);
}


[data-theme="dark"] .task-view-heading h3,
[data-theme="dark"] .task-view-person strong,
[data-theme="dark"] .task-view-deadline-value,
[data-theme="dark"] .task-view-footer strong,
.theme-dark .task-view-heading h3,
.theme-dark .task-view-person strong,
.theme-dark .task-view-deadline-value,
.theme-dark .task-view-footer strong{
  color:#f7f7fb;
}


[data-theme="dark"] .task-view-info-label,
[data-theme="dark"] .task-view-heading > span,
[data-theme="dark"] .task-view-footer span,
.theme-dark .task-view-info-label,
.theme-dark .task-view-heading > span,
.theme-dark .task-view-footer span{
  color:
    rgba(225,225,240,.48);
}


[data-theme="dark"] .task-view-info-card,
[data-theme="dark"] .task-view-note,
.theme-dark .task-view-info-card,
.theme-dark .task-view-note{
  border-color:
    rgba(255,255,255,.07);

  background:
    rgba(255,255,255,.045);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.035);
}


[data-theme="dark"] .task-view-note-text,
.theme-dark .task-view-note-text{
  color:
    rgba(245,245,250,.88);
}


[data-theme="dark"]
.task-view-overdue
.task-view-deadline,
.theme-dark
.task-view-overdue
.task-view-deadline{
  background:
    rgba(186,65,88,.12);
}


@media (max-width:420px){
  .task-view-card{
    padding:18px;
    border-radius:24px;
  }

  .task-view-info-grid{
    grid-template-columns:1fr;
  }

  .task-view-heading h3{
    font-size:21px;
  }
}


/* NAMI QA: read-only wish deep-link sheet */
.wish-view-sheet {
  margin: 0;
  overflow: hidden;
}
.wish-view-sheet .wish-view-photo {
  width: 100%;
  min-height: 154px;
}
.wish-view-sheet .wish-view-body {
  padding: 18px;
}
.wish-view-sheet .wish-view-link {
  margin-top: 16px;
  text-decoration: none;
}
[data-theme="dark"] .wish-view-sheet,
.dark .wish-view-sheet {
  background: rgba(18, 23, 40, .88);
}


/* ===== SOURCE: nami-qa-polish.css ===== */
/* NAMI interaction polish: consistent touch targets without changing visual language */
.icon-btn,
.month-btn {
  min-width: 40px;
  min-height: 40px;
}

.calendar-today,
.text-btn {
  min-height: 34px;
}

.work-v1-check,
.work-v1-task-arrow,
.memory-delete,
.expense-delete-btn,
.couple-goals-list [data-edit-goal],
.couple-goals-list [data-delete-goal] {
  min-width: 34px;
  min-height: 34px;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid rgba(113, 103, 224, .72);
  outline-offset: 2px;
}

[data-theme="dark"] button:focus-visible,
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] [role="button"]:focus-visible {
  outline-color: rgba(166, 151, 255, .88);
}


/* NAMI_GOAL_DATE_IOS_FIX */

.goal-date-display {
  position: relative;
  overflow: hidden;
}

.goal-date-native-input {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;

  opacity: 0.001 !important;
  z-index: 20 !important;

  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;

  cursor: pointer;
  pointer-events: auto !important;

  -webkit-appearance: none;
  appearance: none;
}

.goal-date-native-input:disabled {
  pointer-events: none !important;
}


/* NAMI_GOAL_CUSTOM_CALENDAR_FINAL */

.nami-goal-calendar-overlay {
  position: fixed;
  inset: 0;

  z-index: 99999;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  padding:
    20px
    14px
    max(
      14px,
      env(safe-area-inset-bottom)
    );

  background:
    rgba(10, 10, 18, .34);

  backdrop-filter:
    blur(12px);
  -webkit-backdrop-filter:
    blur(12px);

  opacity: 0;

  transition:
    opacity .18s ease;
}

.nami-goal-calendar-overlay.is-open {
  opacity: 1;
}


.nami-goal-calendar-sheet {
  width: min(
    100%,
    430px
  );

  padding:
    10px
    16px
    16px;

  border-radius: 28px;

  background:
    rgba(
      250,
      250,
      252,
      .96
    );

  color: #18181b;

  box-shadow:
    0 24px 80px
    rgba(0,0,0,.22);

  border:
    1px solid
    rgba(255,255,255,.72);

  transform:
    translateY(18px);

  transition:
    transform .2s ease;
}

.nami-goal-calendar-overlay.is-open
.nami-goal-calendar-sheet {
  transform:
    translateY(0);
}


.nami-goal-calendar-grabber {
  width: 38px;
  height: 5px;

  margin:
    0 auto
    13px;

  border-radius: 999px;

  background:
    rgba(120,120,128,.25);
}


.nami-goal-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 14px;
}

.nami-goal-calendar-header small {
  display: block;

  margin-bottom: 3px;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .11em;

  opacity: .48;
}

.nami-goal-calendar-header h3 {
  margin: 0;

  font-size: 21px;
  line-height: 1.2;
}


.nami-goal-calendar-close {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background:
    rgba(120,120,128,.12);

  color: inherit;

  font-size: 25px;
  line-height: 1;
}


.nami-goal-calendar-nav {
  display: grid;

  grid-template-columns:
    42px
    1fr
    42px;

  align-items: center;

  margin-bottom: 14px;
}

.nami-goal-calendar-nav strong {
  text-align: center;

  font-size: 16px;
}

.nami-goal-calendar-nav button {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;
  border-radius: 14px;

  background:
    rgba(120,120,128,.10);

  color: inherit;

  font-size: 27px;
  line-height: 1;
}


.nami-goal-calendar-week,
.nami-goal-calendar-grid {
  display: grid;

  grid-template-columns:
    repeat(
      7,
      minmax(0, 1fr)
    );

  gap: 5px;
}


.nami-goal-calendar-week {
  margin-bottom: 5px;
}

.nami-goal-calendar-week span {
  text-align: center;

  font-size: 11px;
  font-weight: 700;

  opacity: .42;
}


.nami-goal-calendar-day,
.nami-goal-calendar-empty {
  aspect-ratio: 1;
}


.nami-goal-calendar-day {
  display: grid;
  place-items: center;

  padding: 0;

  border: 0;
  border-radius: 13px;

  background: transparent;
  color: inherit;

  font-size: 14px;
  font-weight: 650;

  transition:
    transform .12s ease,
    background .12s ease;
}

.nami-goal-calendar-day:active {
  transform:
    scale(.90);
}


.nami-goal-calendar-day.is-today {
  box-shadow:
    inset 0 0 0 1px
    rgba(123,108,246,.48);
}


.nami-goal-calendar-day.is-selected {
  color: #fff;

  background:
    linear-gradient(
      135deg,
      #ff8068,
      #7b6cf6
    );

  box-shadow:
    0 6px 18px
    rgba(123,108,246,.25);
}


.nami-goal-calendar-today {
  width: 100%;

  margin-top: 14px;
  padding: 13px 16px;

  border: 0;
  border-radius: 15px;

  background:
    rgba(123,108,246,.10);

  color:
    #6456df;

  font-size: 15px;
  font-weight: 750;
}


html[data-theme="dark"] .nami-goal-calendar-sheet {
  background: rgba(28,28,31,.96);
  color: #f5f5f7;
  border-color: rgba(255,255,255,.10);
}

html[data-theme="dark"] .nami-goal-calendar-today {
  color: #b9b0ff;
  background: rgba(123,108,246,.18);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .nami-goal-calendar-sheet {
    background: rgba(28,28,31,.96);
    color: #f5f5f7;
    border-color: rgba(255,255,255,.10);
  }

  html[data-theme="system"] .nami-goal-calendar-today {
    color: #b9b0ff;
    background: rgba(123,108,246,.18);
  }
}



/* ===== SOURCE: nami-couple-polish.css ===== */
/* =========================================================
   NAMI — COUPLE SPACE POLISH
   2026-09-29
   Scope: couple space only. Company/friends and work are untouched.
   ========================================================= */

html[data-svoi-theme] .space-couple,
html[data-svoi-theme] .sheet-couple {
  --nami-pair-violet: #776be0;
  --nami-pair-violet-2: #8d79e9;
  --nami-pair-blue: #5d83df;
  --nami-pair-pink: #ef8fa8;
  --nami-pair-ink: #151824;
  --nami-pair-muted: #7d8291;
  --nami-pair-line: rgba(107, 105, 148, .10);
  --nami-pair-glass: rgba(255, 255, 255, .66);
  --nami-pair-glass-strong: rgba(255, 255, 255, .84);
  --nami-pair-shadow: 0 18px 48px rgba(76, 69, 121, .10), inset 0 1px 0 rgba(255,255,255,.82);
  --nami-pair-shadow-soft: 0 10px 30px rgba(76, 69, 121, .07), inset 0 1px 0 rgba(255,255,255,.72);
}

html[data-svoi-theme="dark"] .space-couple,
html[data-svoi-theme="dark"] .sheet-couple {
  --nami-pair-ink: #f7f8fc;
  --nami-pair-muted: #9aa0b3;
  --nami-pair-line: rgba(164, 171, 222, .12);
  --nami-pair-glass: rgba(24, 30, 49, .80);
  --nami-pair-glass-strong: rgba(29, 36, 58, .94);
  --nami-pair-shadow: 0 20px 48px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035);
  --nami-pair-shadow-soft: 0 12px 28px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.025);
}

/* ---------- shared geometry ---------- */

html[data-svoi-theme] body #app .space-couple {
  width: 100%;
  max-width: 100%;
}

html[data-svoi-theme] body #app .space-couple button,
html[data-svoi-theme] .sheet-couple button,
html[data-svoi-theme] .sheet-couple a,
html[data-svoi-theme] body #app .space-couple [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

html[data-svoi-theme] body #app .space-couple .page-header {
  min-height: 56px;
  margin: 8px 0 18px;
  gap: 12px;
}

html[data-svoi-theme] body #app .space-couple .page-header h1 {
  font-size: 31px;
  line-height: 1;
  letter-spacing: -.045em;
  font-weight: 900;
}

html[data-svoi-theme] body #app .space-couple .icon-btn,
html[data-svoi-theme] .sheet-couple .close-btn {
  border: 1px solid rgba(255,255,255,.72) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.74), rgba(247,247,255,.48)) !important;
  box-shadow: var(--nami-pair-shadow-soft) !important;
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
}

html[data-svoi-theme="dark"] body #app .space-couple .icon-btn,
html[data-svoi-theme="dark"] .sheet-couple .close-btn {
  border-color: var(--nami-pair-line) !important;
  background: linear-gradient(145deg, rgba(36,43,68,.94), rgba(24,30,50,.90)) !important;
}

/* ---------- pair bottom sheets ---------- */

html[data-svoi-theme] .sheet-wrap.sheet-couple {
  background: rgba(20, 22, 36, .26);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
}

html[data-svoi-theme] .sheet.sheet-couple {
  width: min(100%, 720px);
  border-radius: 34px 34px 0 0;
  border: 1px solid rgba(255,255,255,.82);
  border-bottom: 0;
  padding: 0 20px calc(26px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 12% -8%, rgba(239,143,168,.12), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(93,131,223,.11), transparent 36%),
    rgba(249,248,252,.92) !important;
  box-shadow: 0 -24px 70px rgba(50,45,83,.18), inset 0 1px 0 rgba(255,255,255,.86);
}

html[data-svoi-theme="dark"] .sheet.sheet-couple {
  border-color: rgba(151,160,218,.11);
  background:
    radial-gradient(circle at 12% -8%, rgba(239,143,168,.08), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(93,131,223,.10), transparent 36%),
    rgba(13,17,29,.975) !important;
  box-shadow: 0 -24px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.03);
}

html[data-svoi-theme] .sheet-couple .sheet-handle {
  width: 38px;
  height: 4px;
  margin: 12px auto 4px;
  background: rgba(115,117,135,.22);
}

html[data-svoi-theme] .sheet-couple .sheet-head {
  min-height: 78px;
  margin: 0 0 14px;
  padding: 8px 0 4px;
  background: transparent !important;
}

html[data-svoi-theme] .sheet-couple .sheet-head h2 {
  font-size: 29px;
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -.045em;
}

html[data-svoi-theme] .sheet-couple .sheet-head p {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.35;
}

html[data-svoi-theme] .sheet-couple .close-btn {
  width: 48px;
  min-width: 48px;
  height: 48px;
  border-radius: 17px;
  font-size: 30px;
  line-height: 1;
}

/* ---------- inputs / forms ---------- */

html[data-svoi-theme] .sheet-couple .field {
  gap: 7px;
}

html[data-svoi-theme] .sheet-couple .field > span,
html[data-svoi-theme] .sheet-couple .field-title,
html[data-svoi-theme] .sheet-couple .checkin-form-label {
  padding-left: 4px;
  color: var(--nami-pair-ink) !important;
  font-size: 13px !important;
  line-height: 1.2;
  font-weight: 830 !important;
  letter-spacing: -.01em;
}

html[data-svoi-theme] .sheet-couple input:not([type="checkbox"]):not([type="file"]),
html[data-svoi-theme] .sheet-couple textarea,
html[data-svoi-theme] .sheet-couple select {
  width: 100%;
  min-height: 54px;
  border-radius: 19px !important;
  border: 1px solid rgba(255,255,255,.92) !important;
  color: var(--nami-pair-ink) !important;
  background: rgba(255,255,255,.62) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.80), 0 9px 24px rgba(80,74,121,.045) !important;
  font-size: 16px !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

html[data-svoi-theme] .sheet-couple textarea {
  min-height: 108px;
  padding-top: 15px !important;
  line-height: 1.45;
  resize: vertical;
}

html[data-svoi-theme="dark"] .sheet-couple input:not([type="checkbox"]):not([type="file"]),
html[data-svoi-theme="dark"] .sheet-couple textarea,
html[data-svoi-theme="dark"] .sheet-couple select {
  border-color: rgba(147,155,211,.11) !important;
  background: rgba(29,36,58,.74) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

html[data-svoi-theme] .sheet-couple input::placeholder,
html[data-svoi-theme] .sheet-couple textarea::placeholder {
  color: #9296a5 !important;
  opacity: 1;
}

html[data-svoi-theme="dark"] .sheet-couple input::placeholder,
html[data-svoi-theme="dark"] .sheet-couple textarea::placeholder {
  color: #858ca2 !important;
}

html[data-svoi-theme] .sheet-couple input:focus,
html[data-svoi-theme] .sheet-couple textarea:focus,
html[data-svoi-theme] .sheet-couple select:focus {
  outline: none !important;
  border-color: rgba(119,107,224,.38) !important;
  box-shadow: 0 0 0 4px rgba(119,107,224,.09), inset 0 1px 0 rgba(255,255,255,.74) !important;
}

html[data-svoi-theme] .sheet-couple .primary.full,
html[data-svoi-theme] .sheet-couple button.primary {
  min-height: 55px;
  border-radius: 19px;
  font-size: 16px;
  font-weight: 850;
  color: #fff !important;
  background: linear-gradient(105deg, #7d6ee1 0%, #7077df 48%, #5d83df 100%) !important;
  box-shadow: 0 13px 28px rgba(104,104,213,.22), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

html[data-svoi-theme] .sheet-couple .primary.full:active,
html[data-svoi-theme] .sheet-couple button.primary:active {
  transform: scale(.985);
}

/* Make native iOS date controls follow NAMI theme instead of device theme. */
html[data-svoi-theme="light"] .sheet-couple input[type="date"],
html[data-svoi-theme="light"] .space-couple input[type="date"] {
  color-scheme: light !important;
}

html[data-svoi-theme="dark"] .sheet-couple input[type="date"],
html[data-svoi-theme="dark"] .space-couple input[type="date"] {
  color-scheme: dark !important;
}

/* =========================================================
   GOALS
   ========================================================= */

html[data-svoi-theme] body #app .space-couple .goals-progress-card,
html[data-svoi-theme] body #app .space-couple .couple-goal-card,
html[data-svoi-theme] body #app .space-couple .goals-empty {
  border: 1px solid rgba(255,255,255,.88) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(247,247,254,.52)) !important;
  box-shadow: var(--nami-pair-shadow-soft) !important;
}

html[data-svoi-theme="dark"] body #app .space-couple .goals-progress-card,
html[data-svoi-theme="dark"] body #app .space-couple .couple-goal-card,
html[data-svoi-theme="dark"] body #app .space-couple .goals-empty {
  border-color: var(--nami-pair-line) !important;
  background: linear-gradient(145deg, rgba(30,37,60,.94), rgba(22,28,47,.96)) !important;
}

html[data-svoi-theme] body #app .space-couple .couple-goal-card {
  border-radius: 23px !important;
  padding: 15px !important;
}

html[data-svoi-theme] body #app .space-couple .goal-content h3 {
  font-size: 16px !important;
  line-height: 1.2 !important;
}

html[data-svoi-theme] body #app .space-couple .goal-content p,
html[data-svoi-theme] body #app .space-couple .goal-due {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

html[data-svoi-theme] .sheet-couple .couple-goal-form {
  gap: 16px;
}

html[data-svoi-theme] .sheet-couple .goal-deadline-section {
  margin-top: 3px;
}

html[data-svoi-theme] .sheet-couple .goal-date-switch {
  display: grid !important;
  grid-template-columns: 1fr 1.12fr !important;
  gap: 5px !important;
  padding: 5px !important;
  border: 1px solid rgba(255,255,255,.84) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.50) !important;
  box-shadow: var(--nami-pair-shadow-soft) !important;
}

html[data-svoi-theme="dark"] .sheet-couple .goal-date-switch {
  border-color: var(--nami-pair-line) !important;
  background: rgba(28,34,55,.72) !important;
}

html[data-svoi-theme] .sheet-couple .goal-date-chip {
  min-height: 48px !important;
  border-radius: 16px !important;
  color: #777b89 !important;
  font-size: 14px !important;
  font-weight: 830 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-svoi-theme] .sheet-couple .goal-date-chip.active {
  color: #fff !important;
  background: linear-gradient(105deg, #7d6ee1, #5d83df) !important;
  box-shadow: 0 9px 22px rgba(106,103,211,.20), inset 0 1px 0 rgba(255,255,255,.20) !important;
}

html[data-svoi-theme] .sheet-couple .goal-date-display {
  min-height: 66px !important;
  margin-top: 10px !important;
  padding: 12px 12px 12px 15px !important;
  border: 1px solid rgba(119,107,224,.18) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(245,243,255,.90), rgba(235,241,255,.75)) !important;
  box-shadow: 0 10px 28px rgba(94,89,157,.07), inset 0 1px 0 rgba(255,255,255,.90) !important;
}

html[data-svoi-theme="dark"] .sheet-couple .goal-date-display {
  border-color: rgba(132,125,224,.20) !important;
  background: linear-gradient(135deg, rgba(38,40,67,.94), rgba(29,38,65,.90)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

html[data-svoi-theme] .sheet-couple .goal-date-copy small {
  color: #74798a !important;
  font-size: 9px !important;
  letter-spacing: .16em !important;
  font-weight: 900 !important;
}

html[data-svoi-theme] .sheet-couple .goal-date-copy strong {
  margin-top: 5px !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  letter-spacing: -.025em !important;
}

html[data-svoi-theme] .sheet-couple .goal-date-display-icon {
  width: 43px !important;
  height: 43px !important;
  border-radius: 14px !important;
  color: #8175df !important;
  background: rgba(130,113,226,.10) !important;
  border: 1px solid rgba(130,113,226,.12) !important;
}

/* =========================================================
   CHECK-IN SCREEN + SHEET
   ========================================================= */

html[data-svoi-theme] body #app .space-couple .checkin-v2-head {
  margin: 18px 0 20px !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-v2-head small {
  font-size: 9px !important;
  letter-spacing: .17em !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-v2-head h1 {
  font-size: 31px !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-v2-add {
  min-height: 44px !important;
  padding: 0 15px !important;
  border-radius: 15px !important;
  color: #8174df !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  background: rgba(255,255,255,.60) !important;
  border: 1px solid rgba(255,255,255,.88) !important;
  box-shadow: var(--nami-pair-shadow-soft) !important;
}

html[data-svoi-theme="dark"] body #app .space-couple .checkin-v2-add {
  background: rgba(29,36,58,.78) !important;
  border-color: var(--nami-pair-line) !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-insight {
  grid-template-columns: 52px minmax(0,1fr) !important;
  gap: 13px !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.76), rgba(241,246,255,.56)) !important;
  border: 1px solid rgba(255,255,255,.90) !important;
  box-shadow: var(--nami-pair-shadow-soft) !important;
}

html[data-svoi-theme="dark"] body #app .space-couple .checkin-insight {
  background: linear-gradient(145deg, rgba(31,39,63,.94), rgba(22,29,48,.96)) !important;
  border-color: var(--nami-pair-line) !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-insight-mark {
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-insight-copy small {
  font-size: 9px !important;
  letter-spacing: .16em !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-insight-copy h2 {
  font-size: 19px !important;
  line-height: 1.12 !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-insight-copy p {
  margin-top: 6px !important;
  font-size: 12px !important;
  line-height: 1.42 !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-today-grid {
  gap: 10px !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-today-person,
html[data-svoi-theme] body #app .space-couple .checkin-waiting-card {
  min-height: 216px !important;
  padding: 14px !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.74), rgba(245,247,255,.54)) !important;
  border: 1px solid rgba(255,255,255,.90) !important;
  box-shadow: var(--nami-pair-shadow-soft) !important;
  overflow: hidden !important;
}

html[data-svoi-theme="dark"] body #app .space-couple .checkin-today-person,
html[data-svoi-theme="dark"] body #app .space-couple .checkin-waiting-card {
  background: linear-gradient(145deg, rgba(31,39,63,.94), rgba(22,29,48,.96)) !important;
  border-color: var(--nami-pair-line) !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-v2-avatar {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-v2-person-copy b {
  font-size: 13px !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-v2-person-copy small {
  margin-top: 4px !important;
  font-size: 9px !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-today-person .checkin-v2-mood {
  min-height: 28px !important;
  margin-top: 10px !important;
  padding: 0 10px !important;
  font-size: 10px !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-today-person .checkin-v2-needs {
  gap: 5px !important;
  margin-top: 8px !important;
  overflow: visible !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-today-person .checkin-v2-needs span {
  min-height: 27px !important;
  max-width: 100% !important;
  padding: 0 9px !important;
  font-size: 9px !important;
  white-space: normal !important;
  text-align: center !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-v2-edit {
  min-height: 36px !important;
  border-radius: 12px !important;
  font-size: 10px !important;
  color: #8174df !important;
  background: rgba(126,111,225,.08) !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-waiting-card > span {
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  color: #8174df !important;
  background: rgba(126,111,225,.09) !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-waiting-card > b {
  font-size: 13px !important;
  line-height: 1.22 !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-waiting-card > small {
  margin-top: 7px !important;
  font-size: 10px !important;
  line-height: 1.42 !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-history-head {
  margin: 24px 4px 10px !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-history-head h2 {
  font-size: 23px !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-history-list {
  display: grid !important;
  gap: 8px !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-history-row {
  display: grid !important;
  grid-template-columns: 78px minmax(0,1fr) 34px !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 58px !important;
  padding: 10px 11px !important;
  border-radius: 17px !important;
  background: rgba(255,255,255,.48) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 7px 20px rgba(72,68,110,.035) !important;
}

html[data-svoi-theme="dark"] body #app .space-couple .checkin-history-row {
  background: rgba(27,34,55,.66) !important;
  border-color: var(--nami-pair-line) !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-history-date {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--nami-pair-muted) !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-history-copy b {
  font-size: 12px !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-history-copy small {
  margin-top: 3px !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-history-delete {
  width: 32px !important;
  height: 32px !important;
  border-radius: 11px !important;
  color: #9b93a6 !important;
  background: rgba(125,125,143,.08) !important;
}

/* check-in editing sheet */
html[data-svoi-theme] .sheet-couple .checkin-v2-moods {
  gap: 8px !important;
}

html[data-svoi-theme] .sheet-couple .checkin-v2-mood-choice {
  min-height: 94px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.84) !important;
  background: rgba(255,255,255,.48) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
}

html[data-svoi-theme="dark"] .sheet-couple .checkin-v2-mood-choice {
  border-color: var(--nami-pair-line) !important;
  background: rgba(28,34,55,.66) !important;
}

html[data-svoi-theme] .sheet-couple .checkin-v2-mood-choice.active {
  border-color: rgba(119,107,224,.28) !important;
  background: linear-gradient(145deg, rgba(244,241,255,.92), rgba(235,241,255,.82)) !important;
  box-shadow: 0 9px 22px rgba(106,103,211,.08), inset 0 1px 0 rgba(255,255,255,.92) !important;
}

html[data-svoi-theme="dark"] .sheet-couple .checkin-v2-mood-choice.active {
  background: linear-gradient(145deg, rgba(51,49,84,.92), rgba(33,43,72,.92)) !important;
}

html[data-svoi-theme] .sheet-couple .checkin-v2-mood-choice span {
  font-size: 10px !important;
}

html[data-svoi-theme] .sheet-couple .checkin-v2-need-grid {
  gap: 9px !important;
}

html[data-svoi-theme] .sheet-couple .checkin-v2-need {
  min-height: 50px !important;
  padding: 0 12px !important;
  border-radius: 17px !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  background: rgba(255,255,255,.48) !important;
  color: #8178c9 !important;
  font-size: 12px !important;
  font-weight: 820 !important;
}

html[data-svoi-theme="dark"] .sheet-couple .checkin-v2-need {
  border-color: var(--nami-pair-line) !important;
  background: rgba(28,34,55,.66) !important;
}

html[data-svoi-theme] .sheet-couple .checkin-v2-need.active {
  border-color: rgba(119,107,224,.20) !important;
  background: linear-gradient(145deg, rgba(242,239,255,.95), rgba(232,239,255,.88)) !important;
}

html[data-svoi-theme="dark"] .sheet-couple .checkin-v2-need.active {
  background: linear-gradient(145deg, rgba(48,47,82,.94), rgba(32,42,70,.94)) !important;
}

html[data-svoi-theme] .sheet-couple .checkin-v2-need-check {
  background: linear-gradient(135deg, #8373e4, #5f83df) !important;
}

html[data-svoi-theme] .sheet-couple .checkin-form-hint {
  margin-top: 8px !important;
  padding-left: 4px !important;
  font-size: 11px !important;
}

/* =========================================================
   OCCASIONS + PLACES
   ========================================================= */

html[data-svoi-theme] .sheet-couple .occasion-hero,
html[data-svoi-theme] .sheet-couple .occasion-row,
html[data-svoi-theme] .sheet-couple .occasion-empty,
html[data-svoi-theme] .sheet-couple .couple-places-hero,
html[data-svoi-theme] .sheet-couple .couple-place-row,
html[data-svoi-theme] .sheet-couple .couple-places-empty,
html[data-svoi-theme] .sheet-couple .couple-place-form-intro {
  border: 1px solid rgba(255,255,255,.88) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(247,247,254,.54)) !important;
  box-shadow: var(--nami-pair-shadow-soft) !important;
}

html[data-svoi-theme="dark"] .sheet-couple .occasion-hero,
html[data-svoi-theme="dark"] .sheet-couple .occasion-row,
html[data-svoi-theme="dark"] .sheet-couple .occasion-empty,
html[data-svoi-theme="dark"] .sheet-couple .couple-places-hero,
html[data-svoi-theme="dark"] .sheet-couple .couple-place-row,
html[data-svoi-theme="dark"] .sheet-couple .couple-places-empty,
html[data-svoi-theme="dark"] .sheet-couple .couple-place-form-intro {
  border-color: var(--nami-pair-line) !important;
  background: linear-gradient(145deg, rgba(31,38,61,.94), rgba(23,29,48,.96)) !important;
}

html[data-svoi-theme] .sheet-couple .occasion-hero,
html[data-svoi-theme] .sheet-couple .couple-places-hero {
  border-radius: 23px !important;
  padding: 13px !important;
}

html[data-svoi-theme] .sheet-couple .occasion-add,
html[data-svoi-theme] .sheet-couple .couple-places-add {
  min-height: 42px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  color: #7568d8 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  background: linear-gradient(145deg, rgba(239,235,255,.94), rgba(229,237,255,.92)) !important;
  border: 1px solid rgba(126,112,222,.10) !important;
  box-shadow: 0 8px 18px rgba(106,100,184,.07) !important;
  opacity: 1 !important;
}

html[data-svoi-theme="dark"] .sheet-couple .occasion-add,
html[data-svoi-theme="dark"] .sheet-couple .couple-places-add {
  color: #b7abff !important;
  background: linear-gradient(145deg, rgba(49,46,82,.94), rgba(31,43,73,.90)) !important;
  border-color: rgba(137,127,231,.14) !important;
}

html[data-svoi-theme] .sheet-couple .occasion-row,
html[data-svoi-theme] .sheet-couple .couple-place-row {
  border-radius: 20px !important;
  padding: 13px !important;
}

html[data-svoi-theme] .sheet-couple .occasion-date-box,
html[data-svoi-theme] .sheet-couple .couple-place-kind,
html[data-svoi-theme] .sheet-couple .couple-places-heading span {
  background: linear-gradient(145deg, rgba(239,235,255,.95), rgba(230,238,255,.90)) !important;
  color: #786bdc !important;
}

html[data-svoi-theme="dark"] .sheet-couple .occasion-date-box,
html[data-svoi-theme="dark"] .sheet-couple .couple-place-kind,
html[data-svoi-theme="dark"] .sheet-couple .couple-places-heading span {
  background: rgba(126,111,225,.14) !important;
  color: #b6abff !important;
}

html[data-svoi-theme] .sheet-couple .occasion-delete,
html[data-svoi-theme] .sheet-couple .couple-place-delete {
  width: 38px !important;
  height: 38px !important;
  border-radius: 13px !important;
  color: #9899a5 !important;
  background: rgba(121,122,137,.10) !important;
}

html[data-svoi-theme] .sheet-couple .couple-place-plan {
  min-height: 40px !important;
  border-radius: 14px !important;
  color: #fff !important;
  background: linear-gradient(105deg, #7d6ee1, #5d83df) !important;
  box-shadow: 0 8px 20px rgba(104,104,213,.16) !important;
}

html[data-svoi-theme] .sheet-couple .couple-place-visited,
html[data-svoi-theme] .sheet-couple .couple-place-link {
  min-height: 40px !important;
  border-radius: 14px !important;
  background: rgba(126,111,225,.08) !important;
  color: #766bd1 !important;
}

html[data-svoi-theme="dark"] .sheet-couple .couple-place-visited,
html[data-svoi-theme="dark"] .sheet-couple .couple-place-link {
  background: rgba(126,111,225,.12) !important;
  color: #b7adff !important;
}

/* =========================================================
   WISHES
   ========================================================= */

html[data-svoi-theme] body #app .space-couple .wishes-v2-head {
  margin-top: 14px !important;
  margin-bottom: 17px !important;
}

html[data-svoi-theme] body #app .space-couple .wishes-v2-head h1 {
  font-size: 31px !important;
}

html[data-svoi-theme] body #app .space-couple .wishes-v2-add {
  min-height: 42px !important;
  padding: 0 14px !important;
  border-radius: 15px !important;
  color: #7568d8 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  background: rgba(255,255,255,.58) !important;
  border: 1px solid rgba(255,255,255,.88) !important;
  box-shadow: var(--nami-pair-shadow-soft) !important;
}

html[data-svoi-theme="dark"] body #app .space-couple .wishes-v2-add {
  color: #b8adff !important;
  background: rgba(29,36,58,.78) !important;
  border-color: var(--nami-pair-line) !important;
}

html[data-svoi-theme] body #app .space-couple .wishes-v2-overview > div,
html[data-svoi-theme] body #app .space-couple .wishes-match-card,
html[data-svoi-theme] body #app .space-couple .wish-v2-card,
html[data-svoi-theme] body #app .space-couple .wishes-v2-empty {
  border: 1px solid rgba(255,255,255,.90) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.74), rgba(246,247,255,.54)) !important;
  box-shadow: var(--nami-pair-shadow-soft) !important;
}

html[data-svoi-theme="dark"] body #app .space-couple .wishes-v2-overview > div,
html[data-svoi-theme="dark"] body #app .space-couple .wishes-match-card,
html[data-svoi-theme="dark"] body #app .space-couple .wish-v2-card,
html[data-svoi-theme="dark"] body #app .space-couple .wishes-v2-empty {
  border-color: var(--nami-pair-line) !important;
  background: linear-gradient(145deg, rgba(31,39,63,.94), rgba(22,29,48,.96)) !important;
}

html[data-svoi-theme] body #app .space-couple .wishes-v2-overview > div {
  min-height: 108px !important;
  border-radius: 24px !important;
}

html[data-svoi-theme] body #app .space-couple .wishes-match-card {
  min-height: 84px !important;
  padding: 13px 14px !important;
  border-radius: 22px !important;
}

html[data-svoi-theme] body #app .space-couple .wishes-v2-filters {
  gap: 7px !important;
  padding-bottom: 2px !important;
  scrollbar-width: none;
}

html[data-svoi-theme] body #app .space-couple .wishes-v2-filters button {
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  font-size: 9px !important;
  background: rgba(255,255,255,.45) !important;
  border: 1px solid rgba(255,255,255,.64) !important;
}

html[data-svoi-theme] body #app .space-couple .wishes-v2-filters button.active {
  color: #fff !important;
  background: linear-gradient(105deg, #7d6ee1, #5d83df) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 20px rgba(104,104,213,.16) !important;
}

html[data-svoi-theme="dark"] body #app .space-couple .wishes-v2-filters button {
  background: rgba(29,36,58,.68) !important;
  border-color: var(--nami-pair-line) !important;
}

html[data-svoi-theme] body #app .space-couple .wish-v2-card {
  grid-template-columns: 104px minmax(0,1fr) !important;
  gap: 13px !important;
  padding: 12px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}

html[data-svoi-theme] body #app .space-couple .wish-v2-photo {
  width: 104px !important;
  height: 104px !important;
  border-radius: 18px !important;
}

html[data-svoi-theme] body #app .space-couple .wish-v2-body h3 {
  font-size: 16px !important;
  line-height: 1.18 !important;
}

html[data-svoi-theme] body #app .space-couple .wish-v2-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

html[data-svoi-theme] body #app .space-couple .wish-v2-actions button,
html[data-svoi-theme] body #app .space-couple .wish-v2-actions a {
  min-height: 36px !important;
  max-width: 100% !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
}

html[data-svoi-theme] body #app .space-couple .wish-v2-action,
html[data-svoi-theme] body #app .space-couple .wish-v2-want,
html[data-svoi-theme] body #app .space-couple .wish-v2-plan-together {
  flex: 1 1 112px !important;
  min-width: 0 !important;
}

html[data-svoi-theme] body #app .space-couple .wish-v2-check,
html[data-svoi-theme] body #app .space-couple .wish-v2-icon {
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  margin-left: 0 !important;
}

/* =========================================================
   MEMORIES + ABOUT + COUPLE HOME
   ========================================================= */

html[data-svoi-theme] body #app .space-couple .memory-card,
html[data-svoi-theme] body #app .space-couple .memory-empty,
html[data-svoi-theme] body #app .space-couple .couple-story-card,
html[data-svoi-theme] body #app .space-couple .couple-feature-card,
html[data-svoi-theme] body #app .space-couple .couple-empty-plan {
  border: 1px solid rgba(255,255,255,.88) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(247,247,254,.54)) !important;
  box-shadow: var(--nami-pair-shadow-soft) !important;
}

html[data-svoi-theme="dark"] body #app .space-couple .memory-card,
html[data-svoi-theme="dark"] body #app .space-couple .memory-empty,
html[data-svoi-theme="dark"] body #app .space-couple .couple-story-card,
html[data-svoi-theme="dark"] body #app .space-couple .couple-feature-card,
html[data-svoi-theme="dark"] body #app .space-couple .couple-empty-plan {
  border-color: var(--nami-pair-line) !important;
  background: linear-gradient(145deg, rgba(31,38,61,.94), rgba(23,29,48,.96)) !important;
}

html[data-svoi-theme] body #app .space-couple .couple-feature-card {
  border-radius: 22px !important;
  transition: transform .16s ease, box-shadow .18s ease !important;
}

html[data-svoi-theme] body #app .space-couple .couple-feature-card:active {
  transform: scale(.985) !important;
}

html[data-svoi-theme] .sheet-couple .couple-about-summary,
html[data-svoi-theme] .sheet-couple .couple-about-group,
html[data-svoi-theme] .sheet-couple .couple-marriage-card {
  border-radius: 21px !important;
  border: 1px solid rgba(255,255,255,.84) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.70), rgba(246,247,255,.52)) !important;
  box-shadow: var(--nami-pair-shadow-soft) !important;
}

html[data-svoi-theme="dark"] .sheet-couple .couple-about-summary,
html[data-svoi-theme="dark"] .sheet-couple .couple-about-group,
html[data-svoi-theme="dark"] .sheet-couple .couple-marriage-card {
  border-color: var(--nami-pair-line) !important;
  background: linear-gradient(145deg, rgba(31,38,61,.92), rgba(23,29,48,.94)) !important;
}

html[data-svoi-theme] .sheet-couple .memory-photo-picker {
  min-height: 54px !important;
  border-radius: 18px !important;
  color: #766bd1 !important;
  background: rgba(126,111,225,.08) !important;
  border: 1px dashed rgba(126,111,225,.22) !important;
}

/* =========================================================
   SMALL IPHONES
   ========================================================= */

@media (max-width: 430px) {
  html[data-svoi-theme] .sheet.sheet-couple {
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 30px 30px 0 0;
  }

  html[data-svoi-theme] .sheet-couple .sheet-head h2 {
    font-size: 27px;
  }

  html[data-svoi-theme] body #app .space-couple .checkin-today-person,
  html[data-svoi-theme] body #app .space-couple .checkin-waiting-card {
    min-height: 205px !important;
    padding: 12px !important;
  }

  html[data-svoi-theme] body #app .space-couple .wish-v2-card {
    grid-template-columns: 92px minmax(0,1fr) !important;
    gap: 11px !important;
  }

  html[data-svoi-theme] body #app .space-couple .wish-v2-photo {
    width: 92px !important;
    height: 92px !important;
  }

  html[data-svoi-theme] body #app .space-couple .wish-v2-action,
  html[data-svoi-theme] body #app .space-couple .wish-v2-want,
  html[data-svoi-theme] body #app .space-couple .wish-v2-plan-together {
    flex-basis: 104px !important;
  }
}

@media (max-width: 370px) {
  html[data-svoi-theme] body #app .space-couple .checkin-today-grid {
    grid-template-columns: 1fr !important;
  }

  html[data-svoi-theme] body #app .space-couple .checkin-today-person,
  html[data-svoi-theme] body #app .space-couple .checkin-waiting-card {
    min-height: 170px !important;
  }
}


/* ===== SOURCE: nami-pair-fine-tune.css ===== */
/* =========================================================
   NAMI — PAIR FINE TUNE
   2026-09-29
   Couple space only. Loaded after nami-couple-polish.css.
   ========================================================= */

/* ---------- keep every pair form control inside its sheet ---------- */
html[data-svoi-theme] .sheet-couple input:not([type="checkbox"]):not([type="file"]),
html[data-svoi-theme] .sheet-couple textarea,
html[data-svoi-theme] .sheet-couple select,
html[data-svoi-theme] .sheet-couple button {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-svoi-theme] .sheet-couple .memory-form,
html[data-svoi-theme] .sheet-couple .memory-form .field {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html[data-svoi-theme] .sheet-couple .memory-form input[type="date"] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

html[data-svoi-theme] .sheet-couple .memory-photo-picker {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ---------- check-in: remove old float hack that causes clipped chips ---------- */
html[data-svoi-theme] body #app .space-couple .checkin-today-person .checkin-v2-mood,
html[data-svoi-theme] body #app .space-couple .checkin-today-person .checkin-v2-needs,
html[data-svoi-theme] body #app .space-couple .nami-checkin-person-card .nami-checkin-mood,
html[data-svoi-theme] body #app .space-couple .nami-checkin-person-card .nami-checkin-needs {
  float: none !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-today-person .checkin-v2-mood,
html[data-svoi-theme] body #app .space-couple .nami-checkin-person-card .nami-checkin-mood {
  width: fit-content !important;
  margin: 10px 0 0 !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-today-person .checkin-v2-needs,
html[data-svoi-theme] body #app .space-couple .nami-checkin-person-card .nami-checkin-needs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 5px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 8px 0 0 !important;
  overflow: hidden !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-today-person .checkin-v2-needs span,
html[data-svoi-theme] body #app .space-couple .nami-checkin-person-card .nami-checkin-needs span {
  flex: 0 0 auto !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-v2-edit,
html[data-svoi-theme] body #app .space-couple .nami-checkin-edit {
  clear: none !important;
  margin-top: auto !important;
}

/* right card: stop artificial 135/140px limits that split “чек-ин” awkwardly */
html[data-svoi-theme] body #app .space-couple .checkin-waiting-card > b,
html[data-svoi-theme] body #app .space-couple .nami-checkin-waiting-card > b,
html[data-svoi-theme] body #app .space-couple .checkin-waiting-card > small,
html[data-svoi-theme] body #app .space-couple .nami-checkin-waiting-card > small {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-waiting-card > b,
html[data-svoi-theme] body #app .space-couple .nami-checkin-waiting-card > b {
  font-size: 12px !important;
  line-height: 1.18 !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-waiting-card > small,
html[data-svoi-theme] body #app .space-couple .nami-checkin-waiting-card > small {
  font-size: 9px !important;
  line-height: 1.38 !important;
}

/* history: protect text from the delete control on narrow iPhones */
html[data-svoi-theme] body #app .space-couple .checkin-history-copy {
  min-width: 0 !important;
}

html[data-svoi-theme] body #app .space-couple .checkin-history-copy small {
  display: block !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

/* ---------- wishes: keep 5 filters clean without squeezing labels ---------- */
html[data-svoi-theme] body #app .space-couple .wishes-v2-filters {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-right: 4px !important;
  scroll-padding-inline: 4px !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none !important;
}

html[data-svoi-theme] body #app .space-couple .wishes-v2-filters::-webkit-scrollbar {
  display: none !important;
}

html[data-svoi-theme] body #app .space-couple .wishes-v2-filters button {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* ---------- micro rhythm for event detail, both themes ---------- */
html[data-svoi-theme] .sheet-couple .event-detail-v2 {
  gap: 10px !important;
}

html[data-svoi-theme] .sheet-couple .event-detail-heading {
  margin-bottom: 3px !important;
}

html[data-svoi-theme] .sheet-couple .event-detail-heading h2 {
  margin-top: 13px !important;
}

/* ---------- narrow iPhones ---------- */
@media (max-width: 430px) {
  html[data-svoi-theme] body #app .space-couple .checkin-today-person,
  html[data-svoi-theme] body #app .space-couple .checkin-waiting-card {
    min-height: 205px !important;
  }

  html[data-svoi-theme] body #app .space-couple .checkin-today-person .checkin-v2-needs span {
    min-height: 26px !important;
    padding: 0 8px !important;
    font-size: 8.5px !important;
  }
}


/* ===== SOURCE: nami-pair-about-fix.css ===== */
/* =========================================================
   NAMI — PAIR / "О НАС" CLEAN FORM FIX
   Fixes the accidental double-card styling introduced by the
   pair polish layer. Scoped only to couple-space sheets.
   ========================================================= */

/* The group is only a layout wrapper. It must never look like a card. */
html[data-svoi-theme] .sheet-couple .couple-about-v2 .couple-about-group {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html[data-svoi-theme="dark"] .sheet-couple .couple-about-v2 .couple-about-group {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Labels sit above the field instead of touching its border. */
html[data-svoi-theme] .sheet-couple .couple-about-v2 .couple-about-label {
  display: block !important;
  padding: 0 6px !important;
  margin: 0 0 7px !important;
  line-height: 1.15 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
}

html[data-svoi-theme] .sheet-couple .couple-about-v2 .couple-about-section-label {
  margin: 4px 6px 1px !important;
  line-height: 1.2 !important;
}

/* One clean field card per date. */
html[data-svoi-theme] .sheet-couple .couple-about-v2 .couple-date-row {
  width: 100% !important;
  min-height: 58px !important;
  box-sizing: border-box !important;
  grid-template-columns: 44px minmax(0,1fr) 22px !important;
  gap: 10px !important;
  padding: 7px 13px !important;
  border-radius: 20px !important;
}

html:not([data-svoi-theme="dark"]) .sheet-couple .couple-about-v2 .couple-date-row {
  border: 1px solid rgba(255,255,255,.88) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(248,248,255,.64)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 9px 24px rgba(74,67,130,.045) !important;
}

html[data-svoi-theme="dark"] .sheet-couple .couple-about-v2 .couple-date-row {
  border: 1px solid rgba(131,137,217,.16) !important;
  background: linear-gradient(145deg, rgba(31,39,64,.96), rgba(25,32,53,.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 10px 24px rgba(0,0,0,.12) !important;
}

html[data-svoi-theme] .sheet-couple .couple-about-v2 .couple-date-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
}

html[data-svoi-theme] .sheet-couple .couple-about-v2 .couple-date-row input[type="date"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  font-size: 16px !important;
  line-height: 42px !important;
  font-weight: 760 !important;
}

/* Make the empty iOS date field feel intentional instead of like a blank nested box. */
html:not([data-svoi-theme="dark"]) .sheet-couple .couple-about-v2 .couple-date-row input[type="date"] {
  color: #171827 !important;
}

html[data-svoi-theme="dark"] .sheet-couple .couple-about-v2 .couple-date-row input[type="date"] {
  color: #f4f5ff !important;
}

html[data-svoi-theme] .sheet-couple .couple-about-v2 .couple-date-chevron {
  opacity: .72 !important;
}

/* Keep the intro and marriage rows as the only full cards in this form. */
html[data-svoi-theme] .sheet-couple .couple-about-v2 .couple-about-summary,
html[data-svoi-theme] .sheet-couple .couple-about-v2 .couple-marriage-card {
  border-radius: 21px !important;
}

/* Slightly calmer vertical rhythm after removing the accidental wrappers. */
html[data-svoi-theme] .sheet-couple .couple-about-v2 .couple-about-form {
  gap: 14px !important;
}

html[data-svoi-theme] .sheet-couple .couple-about-v2 .couple-wedding-date {
  margin-top: 0 !important;
}

html[data-svoi-theme] .sheet-couple .couple-about-v2 .couple-about-save {
  margin-top: 4px !important;
}

@media (max-width: 380px) {
  html[data-svoi-theme] .sheet-couple .couple-about-v2 .couple-date-row {
    min-height: 55px !important;
    grid-template-columns: 40px minmax(0,1fr) 20px !important;
    gap: 9px !important;
    padding: 6px 11px !important;
  }

  html[data-svoi-theme] .sheet-couple .couple-about-v2 .couple-date-icon {
    width: 39px !important;
    height: 39px !important;
  }
}


/* ===== SOURCE: nami-calendar-pair-fix.css ===== */
/* NAMI — couple calendar compact/premium fix 2026-09-29
   Scoped to calendar states where couple availability is enabled. */

.page:has(.nami-couple-calendar-marker) {
  padding-bottom: calc(178px + env(safe-area-inset-bottom)) !important;
}

/* Four filters must stay on one row. */
.page:has(.nami-couple-calendar-marker) .calendar-filter {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 4px !important;
  min-height: 58px !important;
  margin: 0 0 14px !important;
  padding: 5px !important;
  border-radius: 21px !important;
}

.page:has(.nami-couple-calendar-marker) .calendar-filter button {
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 0 7px !important;
  border-radius: 16px !important;
  gap: 6px !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* Compact month card: the old aspect-ratio cells made the whole calendar too tall. */
.page:has(.nami-couple-calendar-marker) .calendar-card {
  padding: 15px 14px 16px !important;
  border-radius: 28px !important;
}

.page:has(.nami-couple-calendar-marker) .calendar-month-head {
  grid-template-columns: 44px minmax(0, 1fr) 44px !important;
  gap: 9px !important;
  margin-bottom: 12px !important;
}

.page:has(.nami-couple-calendar-marker) .calendar-month-head b {
  font-size: 18px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: -.025em !important;
}

.page:has(.nami-couple-calendar-marker) .calendar-today {
  margin-top: 5px !important;
  padding: 4px 11px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.page:has(.nami-couple-calendar-marker) .month-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 15px !important;
}

.page:has(.nami-couple-calendar-marker) .weekdays {
  margin-bottom: 5px !important;
}

.page:has(.nami-couple-calendar-marker) .weekdays span {
  padding: 4px 0 6px !important;
  font-size: 10px !important;
  font-weight: 850 !important;
}

.page:has(.nami-couple-calendar-marker) .calendar-grid {
  gap: 4px 3px !important;
}

.page:has(.nami-couple-calendar-marker) .calendar-day {
  aspect-ratio: auto !important;
  width: 100% !important;
  height: 43px !important;
  min-height: 43px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 780 !important;
}

.page:has(.nami-couple-calendar-marker) .calendar-day.today:not(.selected)::before {
  inset: 3px !important;
  border-radius: 12px !important;
}

.page:has(.nami-couple-calendar-marker) .calendar-day.selected {
  border-radius: 14px !important;
  transform: translateY(-1px) !important;
}

.page:has(.nami-couple-calendar-marker) .day-dots {
  bottom: 3px !important;
}

/* Availability card now sits as a deliberate card above the fixed nav, not hidden behind it. */
.page:has(.nami-couple-calendar-marker) .calendar-availability-card {
  margin: 12px 0 14px !important;
  padding: 13px !important;
  border-radius: 22px !important;
}

.page:has(.nami-couple-calendar-marker) .calendar-free-mark {
  width: 46px !important;
  height: 46px !important;
  border-radius: 15px !important;
}

.page:has(.nami-couple-calendar-marker) .calendar-free-copy > small {
  margin-bottom: 4px !important;
  font-size: 9px !important;
  letter-spacing: .14em !important;
}

.page:has(.nami-couple-calendar-marker) .calendar-free-copy h3 {
  font-size: 17px !important;
  line-height: 1.08 !important;
}

.page:has(.nami-couple-calendar-marker) .calendar-free-copy p {
  font-size: 10.5px !important;
  line-height: 1.4 !important;
}

.page:has(.nami-couple-calendar-marker) .calendar-free-actions {
  margin-top: 2px !important;
}

.page:has(.nami-couple-calendar-marker) .calendar-free-edit,
.page:has(.nami-couple-calendar-marker) .calendar-free-plan {
  min-height: 42px !important;
  border-radius: 15px !important;
}

/* Selected-day section keeps enough breathing room before the floating nav. */
.page:has(.nami-couple-calendar-marker) .calendar-day-summary {
  margin-top: 18px !important;
}

@media (max-width: 380px) {
  .page:has(.nami-couple-calendar-marker) .calendar-filter button {
    padding-inline: 5px !important;
    font-size: 11px !important;
    gap: 4px !important;
  }

  .page:has(.nami-couple-calendar-marker) .calendar-day {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 13px !important;
  }
}

/* NAMI_CALENDAR_FILTER_FINAL */
.page:has(.calendar-final-head) .calendar-filter{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;}
.page:has(.calendar-final-head) .calendar-filter button{min-width:0!important;white-space:nowrap!important;}

/* NAMI_CALENDAR_FILTER_HARD_FIX */
.nami-main-calendar-filter{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:3px!important;
}
.nami-main-calendar-filter>button{
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
  white-space:nowrap!important;
  padding-left:3px!important;
  padding-right:3px!important;
}


/* ===== SOURCE: NAMI_STORY_LAYOUT_FIX_V4 (formerly inline) ===== */
/* Наша история — без иконки и без старой сетки */

#app .couple-story-card {
  display: block !important;
  position: relative !important;

  grid-template-columns: none !important;
  grid-template-rows: none !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;

  padding: 22px 54px 22px 22px !important;
  box-sizing: border-box !important;
}

#app .couple-story-card .couple-story-mark {
  display: none !important;
}

#app .couple-story-card .couple-story-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  grid-column: auto !important;
  grid-row: auto !important;

  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  gap: 10px !important;
}

#app .couple-story-card .couple-story-content > * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#app .couple-story-card .couple-story-chevron {
  position: absolute !important;

  right: 18px !important;
  top: 50% !important;

  transform: translateY(-50%) !important;

  grid-column: auto !important;
  grid-row: auto !important;

  margin: 0 !important;
}

#app .couple-story-card .couple-story-marriage {
  width: 100% !important;
  max-width: none !important;
}

/* длинный текст больше не превращается в вертикальную колонку */
#app .couple-story-card span,
#app .couple-story-card div {
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* ===== SOURCE: nami-home-polish.css ===== */
/* =========================================================
   NAMI — HOME POLISH 2026-09-29
   Only the home screen:
   1) compact invite-code row
   2) consistent space icon scale
   3) full-width compact "Новая компания" action card
   Geometry-only overrides so light / dark / auto keep their current palette.
   ========================================================= */

/* ---------------------------------------------------------
   1. "Уже пригласили?" — quieter and more compact
   --------------------------------------------------------- */
#app .profile-home .home-join-code.home-join-code-v2 {
  min-height: 66px !important;
  padding: 9px 12px !important;
  column-gap: 11px !important;
  row-gap: 0 !important;
}

#app .profile-home .home-join-code-v2 .home-join-code-icon {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
}

#app .profile-home .home-join-code-v2 .home-join-code-icon img {
  width: 31px !important;
  height: 31px !important;
  object-fit: contain !important;
}

#app .profile-home .home-join-code-v2 .home-join-code-copy {
  min-width: 0 !important;
  gap: 2px !important;
}

#app .profile-home .home-join-code-v2 .home-join-code-copy b {
  line-height: 1.12 !important;
}

#app .profile-home .home-join-code-v2 .home-join-code-copy small {
  line-height: 1.18 !important;
}

#app .profile-home .home-join-code-v2 .home-join-code-cta {
  min-height: 40px !important;
  padding: 0 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* ---------------------------------------------------------
   2. Company / Work — equal visual weight for symbols
   --------------------------------------------------------- */
#app .profile-home .profile-space-list > .space-profile-card.friends:not(.new-friends),
#app .profile-home .profile-space-list > .space-profile-card.work {
  --nami-home-symbol-size: 52px;
}

#app .profile-home .profile-space-list > .space-profile-card.friends:not(.new-friends) .space-profile-main-icon,
#app .profile-home .profile-space-list > .space-profile-card.work .space-profile-main-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#app .profile-home .profile-space-list > .space-profile-card.friends:not(.new-friends) .space-profile-main-icon > svg,
#app .profile-home .profile-space-list > .space-profile-card.work .space-profile-main-icon > svg,
#app .profile-home .profile-space-list > .space-profile-card.work .space-profile-main-icon > img {
  width: var(--nami-home-symbol-size) !important;
  height: var(--nami-home-symbol-size) !important;
  max-width: var(--nami-home-symbol-size) !important;
  max-height: var(--nami-home-symbol-size) !important;
  object-fit: contain !important;
}

/* Keep the actual symbol centered even if an older stylesheet added offsets. */
#app .profile-home .profile-space-list > .space-profile-card.friends:not(.new-friends) .nami-space-symbol,
#app .profile-home .profile-space-list > .space-profile-card.work .nami-space-fallback img {
  transform: none !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------
   3. "Новая компания" — one premium full-width action row
   --------------------------------------------------------- */
#app .profile-home .profile-space-list > .space-profile-card.new-friends {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-height: 92px !important;
  padding: 13px 15px !important;

  display: grid !important;
  grid-template-columns: 60px minmax(0, 1fr) 30px !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  column-gap: 13px !important;

  text-align: left !important;
}

#app .profile-home .profile-space-list > .space-profile-card.new-friends .space-profile-visual {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  margin: 0 !important;
  align-self: center !important;
  justify-self: start !important;
}

#app .profile-home .profile-space-list > .space-profile-card.new-friends .space-profile-main-icon {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#app .profile-home .profile-space-list > .space-profile-card.new-friends .space-profile-main-icon > svg {
  width: 25px !important;
  height: 25px !important;
}

#app .profile-home .profile-space-list > .space-profile-card.new-friends .space-profile-info {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  align-items: flex-start !important;
  text-align: left !important;
}

#app .profile-home .profile-space-list > .space-profile-card.new-friends .space-profile-info small,
#app .profile-home .profile-space-list > .space-profile-card.new-friends .space-profile-info b,
#app .profile-home .profile-space-list > .space-profile-card.new-friends .space-profile-info > span {
  text-align: left !important;
}

#app .profile-home .profile-space-list > .space-profile-card.new-friends .space-profile-info b {
  line-height: 1.12 !important;
}

#app .profile-home .profile-space-list > .space-profile-card.new-friends .space-profile-info > span {
  line-height: 1.18 !important;
}

#app .profile-home .profile-space-list > .space-profile-card.new-friends .space-profile-enter {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: end !important;
  margin: 0 !important;
}

/* Small phones: preserve the same composition without squeezing the copy. */
@media (max-width: 370px) {
  #app .profile-home .home-join-code.home-join-code-v2 {
    padding-left: 10px !important;
    padding-right: 10px !important;
    column-gap: 9px !important;
  }

  #app .profile-home .home-join-code-v2 .home-join-code-icon {
    width: 43px !important;
    height: 43px !important;
    min-width: 43px !important;
    min-height: 43px !important;
  }

  #app .profile-home .home-join-code-v2 .home-join-code-cta {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #app .profile-home .profile-space-list > .space-profile-card.new-friends {
    grid-template-columns: 55px minmax(0, 1fr) 28px !important;
    column-gap: 11px !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  #app .profile-home .profile-space-list > .space-profile-card.new-friends .space-profile-visual,
  #app .profile-home .profile-space-list > .space-profile-card.new-friends .space-profile-main-icon {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
  }
}


/* NAMI_HOME_FINISH_V2_START */

/* =========================================================
   NAMI — HOME FINAL POLISH
   ========================================================= */


/* ---------------------------------------------------------
   1. Запас снизу — карточки больше не уходят под tabbar
   --------------------------------------------------------- */

#app .profile-home {
  padding-bottom:
    calc(150px + env(safe-area-inset-bottom)) !important;
}

#app .profile-home .profile-space-list {
  padding-bottom: 22px !important;
}


/* ---------------------------------------------------------
   2. НОВАЯ КОМПАНИЯ
   Компактная широкая action-card
   --------------------------------------------------------- */

#app .profile-home
.profile-space-list
> .space-profile-card.new-friends {

  grid-column: 1 / -1 !important;

  width: 100% !important;

  height: 88px !important;
  min-height: 88px !important;
  max-height: 88px !important;

  aspect-ratio: auto !important;

  padding: 12px 16px !important;

  display: grid !important;

  grid-template-columns:
    58px minmax(0,1fr) 26px !important;

  grid-template-rows:
    1fr !important;

  align-items: center !important;

  column-gap: 14px !important;

  overflow: hidden !important;

  text-align: left !important;
}


#app .profile-home
.profile-space-list
> .space-profile-card.new-friends
.space-profile-visual {

  grid-column: 1 !important;
  grid-row: 1 !important;

  width: 56px !important;
  height: 56px !important;

  min-width: 56px !important;
  min-height: 56px !important;

  margin: 0 !important;

  align-self: center !important;
  justify-self: start !important;
}


#app .profile-home
.profile-space-list
> .space-profile-card.new-friends
.space-profile-main-icon {

  width: 56px !important;
  height: 56px !important;

  min-width: 56px !important;
  min-height: 56px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;
}


#app .profile-home
.profile-space-list
> .space-profile-card.new-friends
.space-profile-main-icon svg {

  width: 25px !important;
  height: 25px !important;
}


#app .profile-home
.profile-space-list
> .space-profile-card.new-friends
.space-profile-info {

  grid-column: 2 !important;
  grid-row: 1 !important;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;

  align-items: flex-start !important;
  justify-content: center !important;

  text-align: left !important;
}


#app .profile-home
.profile-space-list
> .space-profile-card.new-friends
.space-profile-info b {

  margin: 0 0 3px !important;

  font-size: 17px !important;
  line-height: 1.08 !important;

  text-align: left !important;
}


#app .profile-home
.profile-space-list
> .space-profile-card.new-friends
.space-profile-info > span {

  font-size: 13px !important;
  line-height: 1.16 !important;

  text-align: left !important;
}


#app .profile-home
.profile-space-list
> .space-profile-card.new-friends
.space-profile-enter {

  grid-column: 3 !important;
  grid-row: 1 !important;

  margin: 0 !important;

  align-self: center !important;
  justify-self: end !important;
}


/* ---------------------------------------------------------
   3. ЕСЛИ ПОСЛЕДНЯЯ ОБЫЧНАЯ КАРТОЧКА ОСТАЛАСЬ ОДНА
   Растягиваем её на всю строку.
   
   На текущем экране это "Работа".
   --------------------------------------------------------- */

#app .profile-home
.profile-space-list
> .space-profile-card:nth-child(even):nth-last-child(2):not(.new-friends) {

  grid-column: 1 / -1 !important;

  width: 100% !important;

  height: 146px !important;
  min-height: 146px !important;

  aspect-ratio: auto !important;

  display: grid !important;

  grid-template-columns:
    112px minmax(0,1fr) !important;

  grid-template-rows:
    1fr !important;

  align-items: center !important;

  column-gap: 18px !important;

  padding: 17px 22px !important;

  text-align: left !important;
}


#app .profile-home
.profile-space-list
> .space-profile-card:nth-child(even):nth-last-child(2):not(.new-friends)
.space-profile-visual {

  grid-column: 1 !important;
  grid-row: 1 !important;

  width: 94px !important;
  height: 94px !important;

  min-width: 94px !important;
  min-height: 94px !important;

  margin: 0 !important;

  justify-self: center !important;
  align-self: center !important;
}


#app .profile-home
.profile-space-list
> .space-profile-card:nth-child(even):nth-last-child(2):not(.new-friends)
.space-profile-main-icon {

  width: 94px !important;
  height: 94px !important;

  min-width: 94px !important;
  min-height: 94px !important;
}


#app .profile-home
.profile-space-list
> .space-profile-card:nth-child(even):nth-last-child(2):not(.new-friends)
.space-profile-info {

  grid-column: 2 !important;
  grid-row: 1 !important;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;

  align-items: flex-start !important;
  justify-content: center !important;

  text-align: left !important;
}


#app .profile-home
.profile-space-list
> .space-profile-card:nth-child(even):nth-last-child(2):not(.new-friends)
.space-profile-info small,
#app .profile-home
.profile-space-list
> .space-profile-card:nth-child(even):nth-last-child(2):not(.new-friends)
.space-profile-info b,
#app .profile-home
.profile-space-list
> .space-profile-card:nth-child(even):nth-last-child(2):not(.new-friends)
.space-profile-info > span {

  text-align: left !important;
}


/* ---------------------------------------------------------
   4. Светлая тема — совсем немного больше отделяем стекло
   от фонового градиента
   --------------------------------------------------------- */

html[data-svoi-theme="light"]
body #app .profile-home
.profile-space-list
> .space-profile-card {

  border-color:
    rgba(255,255,255,.92) !important;

  box-shadow:
    0 16px 42px rgba(91,93,145,.07),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
}


html[data-svoi-theme="light"]
body #app .profile-home
.home-join-code-v2 {

  box-shadow:
    0 12px 34px rgba(91,93,145,.055),
    inset 0 1px 0 rgba(255,255,255,.74) !important;
}


/* AUTO + светлая системная тема */

@media (prefers-color-scheme: light) {

  html[data-svoi-theme="auto"]
  body #app .profile-home
  .profile-space-list
  > .space-profile-card {

    border-color:
      rgba(255,255,255,.92) !important;

    box-shadow:
      0 16px 42px rgba(91,93,145,.07),
      inset 0 1px 0 rgba(255,255,255,.72) !important;
  }

}


/* ---------------------------------------------------------
   5. Маленький iPhone
   --------------------------------------------------------- */

@media (max-width: 380px) {

  #app .profile-home
  .profile-space-list
  > .space-profile-card.new-friends {

    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;

    grid-template-columns:
      52px minmax(0,1fr) 22px !important;

    column-gap: 11px !important;

    padding: 10px 13px !important;
  }


  #app .profile-home
  .profile-space-list
  > .space-profile-card.new-friends
  .space-profile-visual,

  #app .profile-home
  .profile-space-list
  > .space-profile-card.new-friends
  .space-profile-main-icon {

    width: 50px !important;
    height: 50px !important;

    min-width: 50px !important;
    min-height: 50px !important;
  }


  #app .profile-home
  .profile-space-list
  > .space-profile-card:nth-child(even):nth-last-child(2):not(.new-friends) {

    height: 132px !important;
    min-height: 132px !important;

    grid-template-columns:
      92px minmax(0,1fr) !important;

    column-gap: 13px !important;

    padding: 14px 16px !important;
  }


  #app .profile-home
  .profile-space-list
  > .space-profile-card:nth-child(even):nth-last-child(2):not(.new-friends)
  .space-profile-visual,

  #app .profile-home
  .profile-space-list
  > .space-profile-card:nth-child(even):nth-last-child(2):not(.new-friends)
  .space-profile-main-icon {

    width: 80px !important;
    height: 80px !important;

    min-width: 80px !important;
    min-height: 80px !important;
  }

}

/* NAMI_HOME_FINISH_V2_END */


/* NAMI_HOME_FINAL_TOUCH_START */

/* =========================================================
   NAMI — HOME FINAL TOUCH
   ========================================================= */


/* ---------------------------------------------------------
   РАБОТА — чуть компактнее
   --------------------------------------------------------- */

#app .profile-home
.profile-space-list
> .space-profile-card:nth-child(even):nth-last-child(2):not(.new-friends) {

  height: 132px !important;
  min-height: 132px !important;

  grid-template-columns:
    94px minmax(0,1fr) !important;

  column-gap: 16px !important;

  padding: 15px 20px !important;
}


#app .profile-home
.profile-space-list
> .space-profile-card:nth-child(even):nth-last-child(2):not(.new-friends)
.space-profile-visual,

#app .profile-home
.profile-space-list
> .space-profile-card:nth-child(even):nth-last-child(2):not(.new-friends)
.space-profile-main-icon {

  width: 78px !important;
  height: 78px !important;

  min-width: 78px !important;
  min-height: 78px !important;
}


#app .profile-home
.profile-space-list
> .space-profile-card:nth-child(even):nth-last-child(2):not(.new-friends)
.space-profile-main-icon img,

#app .profile-home
.profile-space-list
> .space-profile-card:nth-child(even):nth-last-child(2):not(.new-friends)
.space-profile-main-icon svg {

  max-width: 70% !important;
  max-height: 70% !important;
}


/* ---------------------------------------------------------
   НОВАЯ КОМПАНИЯ — ниже и аккуратнее
   --------------------------------------------------------- */

#app .profile-home
.profile-space-list
> .space-profile-card.new-friends {

  height: 78px !important;
  min-height: 78px !important;
  max-height: 78px !important;

  grid-template-columns:
    52px minmax(0,1fr) !important;

  column-gap: 14px !important;

  padding: 10px 16px !important;
}


#app .profile-home
.profile-space-list
> .space-profile-card.new-friends
.space-profile-visual,

#app .profile-home
.profile-space-list
> .space-profile-card.new-friends
.space-profile-main-icon {

  width: 50px !important;
  height: 50px !important;

  min-width: 50px !important;
  min-height: 50px !important;
}


#app .profile-home
.profile-space-list
> .space-profile-card.new-friends
.space-profile-info {

  display: flex !important;
  flex-direction: column !important;

  align-items: flex-start !important;
  justify-content: center !important;

  text-align: left !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}


#app .profile-home
.profile-space-list
> .space-profile-card.new-friends
.space-profile-info b {

  display: block !important;

  width: 100% !important;

  margin: 0 0 4px !important;
  padding: 0 !important;

  font-size: 17px !important;
  line-height: 1.05 !important;

  text-align: left !important;
}


#app .profile-home
.profile-space-list
> .space-profile-card.new-friends
.space-profile-info > span {

  display: block !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 13px !important;
  line-height: 1.15 !important;

  text-align: left !important;
}


/* если осталась стрелка / служебный элемент справа */

#app .profile-home
.profile-space-list
> .space-profile-card.new-friends
.space-profile-enter {

  display: none !important;
}


/* ---------------------------------------------------------
   Маленький экран
   --------------------------------------------------------- */

@media (max-width: 380px) {

  #app .profile-home
  .profile-space-list
  > .space-profile-card:nth-child(even):nth-last-child(2):not(.new-friends) {

    height: 122px !important;
    min-height: 122px !important;

    grid-template-columns:
      82px minmax(0,1fr) !important;

    padding: 13px 15px !important;
  }


  #app .profile-home
  .profile-space-list
  > .space-profile-card:nth-child(even):nth-last-child(2):not(.new-friends)
  .space-profile-visual,

  #app .profile-home
  .profile-space-list
  > .space-profile-card:nth-child(even):nth-last-child(2):not(.new-friends)
  .space-profile-main-icon {

    width: 70px !important;
    height: 70px !important;

    min-width: 70px !important;
    min-height: 70px !important;
  }


  #app .profile-home
  .profile-space-list
  > .space-profile-card.new-friends {

    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;

    grid-template-columns:
      48px minmax(0,1fr) !important;

    padding: 9px 13px !important;
  }


  #app .profile-home
  .profile-space-list
  > .space-profile-card.new-friends
  .space-profile-visual,

  #app .profile-home
  .profile-space-list
  > .space-profile-card.new-friends
  .space-profile-main-icon {

    width: 46px !important;
    height: 46px !important;

    min-width: 46px !important;
    min-height: 46px !important;
  }

}

/* NAMI_HOME_FINAL_TOUCH_END */


/* NAMI_WORK_COMPANY_SAME_LOGO_START */

#app .profile-home
.space-profile-card.work
.space-profile-main-icon img {

  content:
    url("/static/nami-company-mark.svg?v=1790717001") !important;

  width: 72% !important;
  height: 72% !important;

  max-width: 72% !important;
  max-height: 72% !important;

  object-fit: contain !important;
}


/* если где-то работа выводится через fallback */

#app .profile-home
.space-profile-card.work
.nami-space-fallback img {

  content:
    url("/static/nami-company-mark.svg?v=1790717001") !important;
}

/* NAMI_WORK_COMPANY_SAME_LOGO_END */



/* ===== SOURCE: company-v2.css ===== */
/* =========================================================
   NAMI — COMPANY V2
   Premium group hub. Scoped to Company-specific classes.
   ========================================================= */

.company-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  margin:10px 0 20px;
}
.company-head-copy { min-width:0; }
.company-kicker {
  display:block; margin-bottom:6px; font-size:11px; line-height:1; font-weight:850;
  letter-spacing:.22em; color:#7c8190;
}
.company-head h1 {
  margin:0; font-size:clamp(32px,8vw,46px); line-height:.98; letter-spacing:-.05em;
}
.company-members-line { display:flex; align-items:center; gap:10px; margin-top:12px; color:#7d8190; font-size:13px; font-weight:700; }
.company-settings { flex:0 0 auto; margin-top:8px; }

.company-avatar-stack { display:flex; align-items:center; min-height:34px; }
.company-avatar-mini,.company-avatar-more {
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center; overflow:hidden;
  margin-left:-8px; border:2px solid rgba(255,255,255,.88);
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(231,234,255,.82));
  box-shadow:0 6px 16px rgba(63,67,130,.12); font-size:11px; font-style:normal;
}
.company-avatar-mini:first-child { margin-left:0; }
.company-avatar-mini img { width:100%;height:100%;object-fit:cover; }
.company-avatar-more { background:rgba(239,238,255,.96); color:#6f67b6; font-weight:800; }

.company-radar-card {
  position:relative; overflow:hidden; padding:24px; border-radius:32px;
  border:1px solid rgba(255,255,255,.84);
  background:
    radial-gradient(circle at 92% 8%,rgba(102,157,255,.22),transparent 34%),
    radial-gradient(circle at 8% 100%,rgba(220,113,211,.13),transparent 38%),
    rgba(255,255,255,.62);
  box-shadow:0 20px 48px rgba(87,83,149,.11),inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter:blur(26px) saturate(145%); -webkit-backdrop-filter:blur(26px) saturate(145%);
}
.company-radar-card::after {
  content:""; position:absolute; width:170px;height:170px; right:-78px;top:-88px;border-radius:50%;
  background:radial-gradient(circle,rgba(139,120,240,.16),transparent 70%); pointer-events:none;
}
.company-radar-top { position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px; }
.company-radar-badge { display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:850;letter-spacing:.18em;color:#7678a2; }
.company-activity-link { border:0;background:transparent;color:#7c72cf;font-size:12px;font-weight:800;padding:6px 0; }
.company-radar-card h2 { position:relative;z-index:1;margin:13px 0 7px;font-size:27px;line-height:1.05;letter-spacing:-.04em; }
.company-radar-card p { position:relative;z-index:1;margin:0;color:#7f8291;font-size:14px;line-height:1.45;max-width:560px; }
.company-radar-status { position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px; }
.company-radar-status span { padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.56);border:1px solid rgba(255,255,255,.76);color:#777b8c;font-size:12px;font-weight:750; }
.company-radar-status .yes { color:#6c62c2;background:rgba(237,232,255,.82); }
.company-radar-actions { position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px; }
.company-radar-actions button { min-height:52px;border-radius:18px; }

.company-quick-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 18px; }
.company-quick {
  min-width:0;min-height:112px;padding:15px 9px;border-radius:25px;border:1px solid rgba(255,255,255,.82);
  background:linear-gradient(145deg,rgba(255,255,255,.74),rgba(241,244,255,.56));
  box-shadow:0 12px 28px rgba(86,84,143,.07),inset 0 1px 0 rgba(255,255,255,.92);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;
  transition:transform .16s ease,box-shadow .16s ease;
}
.company-quick:active,.company-feature:active,.company-live-card:active { transform:scale(.97); }
.company-quick > span { width:38px;height:38px;border-radius:14px;display:grid;place-items:center;color:#7e72dd;background:linear-gradient(145deg,rgba(232,225,255,.9),rgba(228,239,255,.76)); }
.company-quick b { font-size:13px;line-height:1.1; }
.company-quick small { font-size:10px;line-height:1.15;color:#9194a3; }

.company-stats-strip { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px; }
.company-stats-strip button {
  border:1px solid rgba(255,255,255,.78);border-radius:22px;padding:14px 10px;background:rgba(255,255,255,.46);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86);text-align:left;
}
.company-stats-strip b { display:block;font-size:18px;line-height:1.1;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.company-stats-strip small { display:block;margin-top:4px;color:#8c8f9d;font-size:11px; }

.company-section-head { margin-top:18px; }
.company-section-head h2 { font-size:21px!important;letter-spacing:-.035em; }
.company-live-list { display:grid;gap:10px; }
.company-live-card {
  width:100%;display:grid;grid-template-columns:46px minmax(0,1fr) 20px;align-items:center;gap:12px;text-align:left;
  padding:13px 15px;border-radius:23px;border:1px solid rgba(255,255,255,.82);
  background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(241,244,255,.56));
  box-shadow:0 10px 24px rgba(84,82,142,.065),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .16s ease;
}
.company-live-icon { width:46px;height:46px;border-radius:16px;display:grid;place-items:center;color:#8173df;background:linear-gradient(145deg,rgba(235,227,255,.9),rgba(226,239,255,.82)); }
.company-live-copy { min-width:0;display:flex;flex-direction:column; }
.company-live-copy small { font-size:9px;font-weight:850;letter-spacing:.16em;color:#9193a4; }
.company-live-copy b { margin-top:3px;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.company-live-copy em { margin-top:4px;font-size:11px;color:#8d90a0;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

.company-feature-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.company-feature {
  position:relative;overflow:hidden;min-height:145px;padding:18px;border-radius:29px;text-align:left;
  border:1px solid rgba(255,255,255,.82);background:linear-gradient(145deg,rgba(255,255,255,.74),rgba(241,244,255,.55));
  box-shadow:0 14px 32px rgba(84,82,143,.07),inset 0 1px 0 rgba(255,255,255,.92);
  display:flex;flex-direction:column;align-items:flex-start;transition:transform .16s ease;
}
.company-feature::after { content:"";position:absolute;width:100px;height:100px;right:-45px;top:-50px;border-radius:50%;background:radial-gradient(circle,rgba(114,154,255,.11),transparent 68%);pointer-events:none; }
.company-feature > span:first-child { width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(234,226,255,.9),rgba(229,239,255,.8));color:#7e72dd;font-size:20px;font-weight:850; }
.company-feature b { margin-top:auto;font-size:18px;line-height:1.1;letter-spacing:-.03em; }
.company-feature small { margin-top:5px;font-size:12px;line-height:1.25;color:#8d90a0; }
.company-ruble { font-family:system-ui,sans-serif; }
.company-bottom-actions { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 calc(var(--nav-h,78px) + 82px + env(safe-area-inset-bottom)); }
.company-bottom-actions button { min-height:50px;border-radius:18px; }

.company-form { display:grid;gap:15px; }
.company-option-picks { display:flex;flex-wrap:wrap;gap:8px; }
.company-option-picks label { cursor:pointer; }
.company-option-picks input { position:absolute;opacity:0;pointer-events:none; }
.company-option-picks span { display:block;padding:10px 12px;border-radius:14px;background:rgba(236,232,255,.72);border:1px solid rgba(255,255,255,.78);color:#7772b5;font-size:12px;font-weight:760; }
.company-option-picks input:not(:checked)+span { opacity:.48;filter:saturate(.55); }
.company-list-intro { margin-bottom:14px;padding:20px;border-radius:28px;background:rgba(255,255,255,.48);border:1px solid rgba(255,255,255,.76); }
.company-list-intro h2 { margin:7px 0 0;font-size:23px;letter-spacing:-.035em; }

.company-detail { display:grid;gap:14px; }
.company-detail-status,.company-detail-note,.company-big-date,.company-challenge-status,.company-capsule-sealed {
  padding:18px;border-radius:23px;background:linear-gradient(145deg,rgba(246,243,255,.9),rgba(235,243,255,.76));border:1px solid rgba(255,255,255,.82);
}
.company-detail-status b,.company-big-date b,.company-challenge-status b { display:block;font-size:19px; }
.company-detail-status small,.company-big-date small,.company-challenge-status small { display:block;margin-top:5px;color:#8c8fa0; }
.company-response-row { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.company-response-row button { min-height:48px;border-radius:16px;border:1px solid rgba(255,255,255,.8);background:rgba(240,238,255,.72);font-size:12px;font-weight:780;color:#7774a8; }
.company-response-row button.active { color:white;background:linear-gradient(135deg,#806de4,#5f91ef);box-shadow:0 10px 24px rgba(105,102,214,.23); }
.company-response-summary { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.company-response-summary span { padding:12px;border-radius:16px;background:rgba(255,255,255,.52);text-align:center;color:#8b8e9d;font-size:11px; }
.company-response-summary b { display:block;font-size:19px;color:#1b1c29; }
.company-choice-list { display:grid;gap:8px; }
.company-choice { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.8);background:rgba(244,241,255,.72);text-align:left;color:#666a80; }
.company-choice.active { background:linear-gradient(135deg,rgba(218,203,255,.95),rgba(207,226,255,.92));color:#5f5a9e;box-shadow:0 9px 22px rgba(105,96,183,.10); }
.company-choice b { min-width:28px;text-align:center; }
.company-check-list { display:grid;gap:8px; }
.company-check-line { display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border-radius:17px;background:rgba(246,244,255,.76);border:1px solid rgba(255,255,255,.82); }
.company-check-line > button:first-child { width:34px;height:34px;border-radius:12px;border:1px solid rgba(126,117,217,.20);background:rgba(232,228,255,.82);color:#776bd4;display:grid;place-items:center; }
.company-check-line.done span { text-decoration:line-through;opacity:.5; }
.company-claim { border:0;border-radius:12px;padding:8px 10px;background:rgba(229,237,255,.8);color:#7278a9;font-size:11px;font-weight:760; }
.company-claim.mine { background:linear-gradient(135deg,#806de4,#648fea);color:white; }
.company-saving { padding:20px;border-radius:24px;background:linear-gradient(145deg,rgba(244,238,255,.92),rgba(231,241,255,.86));border:1px solid rgba(255,255,255,.84); }
.company-saving strong { display:block;font-size:28px;letter-spacing:-.04em; }
.company-saving small { color:#8c90a1; }
.company-saving > div { height:10px;margin:16px 0 7px;border-radius:999px;background:rgba(116,118,170,.12);overflow:hidden; }
.company-saving > div span { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#d97ac0,#876fe9,#6198ef); }
.company-saving em { font-style:normal;font-size:12px;color:#7774b6;font-weight:800; }
.company-capsule-sealed { text-align:center;padding:24px; }
.company-capsule-sealed > span { display:grid;width:54px;height:54px;border-radius:18px;margin:0 auto 12px;place-items:center;background:linear-gradient(145deg,#f1e7ff,#e3efff);color:#7f6de1;font-size:25px; }
.company-capsule-sealed b { display:block;font-size:20px; }
.company-capsule-sealed p { margin:7px 0 0;color:#878a9a;line-height:1.4; }
.company-capsule-open { display:grid;gap:9px; }
.company-capsule-open article { padding:15px;border-radius:18px;background:rgba(245,243,255,.75);border:1px solid rgba(255,255,255,.82); }
.company-capsule-open p { margin:6px 0 0;color:#76798a;line-height:1.45; }
.company-big-date { text-align:center; }
.company-big-date > span { font-size:36px;display:block;margin-bottom:8px; }
.company-delete-link { width:100%;margin-top:8px;padding:12px;border:0;background:transparent;color:#c66d7c;font-weight:760; }
.company-random-result { min-height:0;text-align:center; }
.company-random-result:not(:empty) { padding:20px;border-radius:22px;background:linear-gradient(145deg,rgba(242,232,255,.94),rgba(225,240,255,.88)); }
.company-random-result span { display:block;font-size:9px;letter-spacing:.18em;font-weight:850;color:#8885aa; }
.company-random-result b { display:block;margin-top:7px;font-size:24px; }

.company-history-hero { padding:24px;border-radius:31px;background:linear-gradient(145deg,rgba(255,255,255,.70),rgba(235,240,255,.58));border:1px solid rgba(255,255,255,.82);box-shadow:0 16px 36px rgba(88,84,145,.08); }
.company-history-hero h2 { margin:8px 0 5px;font-size:28px;letter-spacing:-.04em; }
.company-history-hero p { margin:0;color:#858897;line-height:1.42; }
.company-history-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px; }
.company-history-grid article { padding:18px;border-radius:24px;background:rgba(255,255,255,.56);border:1px solid rgba(255,255,255,.8); }
.company-history-grid b { display:block;font-size:22px;letter-spacing:-.04em; }
.company-history-grid small { display:block;margin-top:4px;color:#8e91a0; }
.company-last-event { margin-top:12px;padding:20px;border-radius:26px;background:linear-gradient(145deg,rgba(244,235,255,.86),rgba(229,242,255,.78));border:1px solid rgba(255,255,255,.82); }
.company-last-event > small { font-size:9px;letter-spacing:.18em;font-weight:850;color:#8886a5; }
.company-last-event h3 { margin:7px 0 3px;font-size:20px; }
.company-last-event p { margin:0 0 14px;color:#8a8d9d; }
.company-feed-list { display:grid;gap:9px;padding-bottom:calc(var(--nav-h,78px) + 70px + env(safe-area-inset-bottom)); }
.company-feed-list article { display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;padding:13px;border-radius:20px;background:rgba(255,255,255,.54);border:1px solid rgba(255,255,255,.78); }
.company-feed-list article > span { width:42px;height:42px;border-radius:14px;display:grid;place-items:center;overflow:hidden;background:rgba(235,231,255,.84);color:#7c70dc; }
.company-feed-list article img { width:100%;height:100%;object-fit:cover; }
.company-feed-list b { font-size:13px; }
.company-feed-list p { margin:3px 0;color:#777a8b;font-size:12px;line-height:1.35; }
.company-feed-list small { color:#999baa;font-size:10px; }

/* Dark */
html[data-svoi-theme="dark"] .company-kicker,
html[data-svoi-theme="dark"] .company-members-line { color:#8f97ac; }
html[data-svoi-theme="dark"] .company-avatar-mini { border-color:rgba(52,63,100,.92);background:#1d2744; }
html[data-svoi-theme="dark"] .company-avatar-more { border-color:rgba(52,63,100,.92);background:#273050;color:#aaa0f4; }
html[data-svoi-theme="dark"] .company-radar-card {
  border-color:rgba(126,143,207,.17);
  background:radial-gradient(circle at 92% 8%,rgba(58,96,199,.22),transparent 34%),radial-gradient(circle at 8% 100%,rgba(153,64,185,.12),transparent 38%),rgba(18,24,44,.82);
  box-shadow:0 22px 52px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.03);
}
html[data-svoi-theme="dark"] .company-radar-badge { color:#949bb2; }
html[data-svoi-theme="dark"] .company-activity-link { color:#9b8ff0; }
html[data-svoi-theme="dark"] .company-radar-card p { color:#9299ac; }
html[data-svoi-theme="dark"] .company-radar-status span { border-color:rgba(126,141,202,.13);background:rgba(37,45,76,.72);color:#a1a8ba; }
html[data-svoi-theme="dark"] .company-radar-status .yes { background:rgba(75,62,137,.52);color:#beb3fa; }
html[data-svoi-theme="dark"] .company-quick,
html[data-svoi-theme="dark"] .company-feature,
html[data-svoi-theme="dark"] .company-live-card,
html[data-svoi-theme="dark"] .company-stats-strip button,
html[data-svoi-theme="dark"] .company-list-intro,
html[data-svoi-theme="dark"] .company-history-hero,
html[data-svoi-theme="dark"] .company-history-grid article,
html[data-svoi-theme="dark"] .company-feed-list article {
  border-color:rgba(126,142,205,.15);background:linear-gradient(145deg,rgba(28,35,62,.86),rgba(19,26,47,.78));box-shadow:0 14px 32px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025);
}
html[data-svoi-theme="dark"] .company-quick > span,
html[data-svoi-theme="dark"] .company-feature > span:first-child,
html[data-svoi-theme="dark"] .company-live-icon,
html[data-svoi-theme="dark"] .company-feed-list article > span { background:rgba(63,58,119,.45);color:#9b88f1; }
html[data-svoi-theme="dark"] .company-quick small,
html[data-svoi-theme="dark"] .company-feature small,
html[data-svoi-theme="dark"] .company-live-copy em,
html[data-svoi-theme="dark"] .company-stats-strip small,
html[data-svoi-theme="dark"] .company-history-hero p,
html[data-svoi-theme="dark"] .company-history-grid small,
html[data-svoi-theme="dark"] .company-feed-list p { color:#8f97aa; }
html[data-svoi-theme="dark"] .company-detail-status,
html[data-svoi-theme="dark"] .company-detail-note,
html[data-svoi-theme="dark"] .company-big-date,
html[data-svoi-theme="dark"] .company-challenge-status,
html[data-svoi-theme="dark"] .company-capsule-sealed,
html[data-svoi-theme="dark"] .company-choice,
html[data-svoi-theme="dark"] .company-check-line,
html[data-svoi-theme="dark"] .company-saving,
html[data-svoi-theme="dark"] .company-capsule-open article,
html[data-svoi-theme="dark"] .company-last-event {
  border-color:rgba(125,141,202,.14);background:linear-gradient(145deg,rgba(31,39,68,.88),rgba(23,31,55,.80));color:#f4f5fa;
}
html[data-svoi-theme="dark"] .company-response-row button { border-color:rgba(124,137,199,.14);background:rgba(39,47,78,.78);color:#a9afc3; }
html[data-svoi-theme="dark"] .company-response-summary span { background:rgba(37,44,73,.72);color:#969daf; }
html[data-svoi-theme="dark"] .company-response-summary b { color:#f4f5fb; }
html[data-svoi-theme="dark"] .company-choice.active { background:linear-gradient(135deg,rgba(91,65,160,.78),rgba(52,87,157,.72));color:#fff; }
html[data-svoi-theme="dark"] .company-check-line > button:first-child { background:rgba(65,59,122,.5);color:#a590f5; }
html[data-svoi-theme="dark"] .company-claim { background:rgba(47,60,101,.75);color:#adb5d3; }
html[data-svoi-theme="dark"] .company-random-result:not(:empty) { background:linear-gradient(145deg,rgba(72,56,129,.54),rgba(40,68,119,.48)); }

@media (max-width:520px) {
  .company-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .company-quick { min-height:102px; }
  .company-radar-actions { grid-template-columns:1fr; }
}
@media (max-width:390px) {
  .company-feature-grid { gap:10px; }
  .company-feature { min-height:136px;padding:16px; }
  .company-feature b { font-size:17px; }
  .company-stats-strip { gap:7px; }
  .company-stats-strip button { padding:12px 8px; }
  .company-stats-strip b { font-size:16px; }
}

/* =========================================================
   NAMI COMPANY — PREMIUM HOME POLISH V3
   ========================================================= */


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

#app .company-kicker {
  margin-bottom: 8px !important;

  font-size: 10px !important;
  font-weight: 900 !important;

  letter-spacing: .25em !important;
}

#app .company-head h1 {
  line-height: .96 !important;

  letter-spacing: -.052em !important;
}

#app .company-members-line {
  margin-top: 14px !important;
}


/* ---------------------------------------------------------
   RADAR — главный premium-блок
   --------------------------------------------------------- */

#app .company-radar-card {
  background:
    radial-gradient(
      circle at 96% 4%,
      rgba(91,150,255,.25),
      transparent 38%
    ),
    radial-gradient(
      circle at 4% 100%,
      rgba(226,112,203,.15),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.72),
      rgba(246,247,255,.52)
    ) !important;

  box-shadow:
    0 22px 54px rgba(85,82,148,.11),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

#app .company-radar-badge {
  font-size: 10px !important;
  letter-spacing: .20em !important;
}

#app .company-activity-link {
  padding: 8px 12px !important;

  border-radius: 999px !important;

  background:
    rgba(255,255,255,.52) !important;

  border:
    1px solid rgba(255,255,255,.68) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82) !important;
}

#app .company-radar-card h2 {
  margin-top: 17px !important;

  line-height: 1.02 !important;

  letter-spacing: -.045em !important;
}

#app .company-radar-card p {
  margin-top: 8px !important;
}

#app .company-radar-status span {
  border-radius: 999px !important;
}

#app .company-radar-actions {
  grid-template-columns: 1fr !important;
}


/* ---------------------------------------------------------
   УБИРАЕМ ДУБЛИ
   Собираемся + Что делаем уже есть в радаре
   --------------------------------------------------------- */

#app .company-quick-grid {
  grid-template-columns:
    repeat(2, minmax(0,1fr)) !important;
}

#app .company-quick-grid
.company-quick:nth-child(1),

#app .company-quick-grid
.company-quick:nth-child(2) {
  display: none !important;
}





/* ---------------------------------------------------------
   СТАТИСТИКА
   --------------------------------------------------------- */

#app .company-stats-strip {
  gap: 9px !important;
}

#app .company-stats-strip b {
  font-size: 19px !important;
}

#app .company-stats-strip small {
  margin-top: 5px !important;
}


/* ---------------------------------------------------------
   СЕЙЧАС В КОМПАНИИ
   --------------------------------------------------------- */

#app .company-section-head {
  margin-top: 22px !important;
}

#app .company-section-head h2 {
  font-size: 22px !important;
}

#app .company-live-card {
  min-height: 82px !important;

  padding: 13px 15px !important;

  border-radius: 24px !important;
}


/* ---------------------------------------------------------
   ВСЁ ДЛЯ КОМПАНИИ
   Компактнее — меньше бесконечной прокрутки
   --------------------------------------------------------- */

#app .company-feature-grid {
  gap: 10px !important;
}

#app .company-feature {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.74),
      rgba(241,244,255,.53)
    ) !important;

  box-shadow:
    0 12px 28px rgba(84,82,143,.065),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

#app .company-feature > span:first-child {
  border-radius: 15px !important;
}

#app .company-feature b {
  line-height: 1.07 !important;
}

#app .company-feature small {
  margin-top: 4px !important;

  font-size: 11.5px !important;
}


/* ---------------------------------------------------------
   BOTTOM ACTIONS
   --------------------------------------------------------- */

#app .company-bottom-actions {
  gap: 10px !important;
}

#app .company-bottom-actions button {
  min-height: 54px !important;

  border-radius: 19px !important;

  font-size: 14px !important;
}


/* ---------------------------------------------------------
   НИЖНЕЕ МЕНЮ НЕ ПЕРЕКРЫВАЕТ ФИНАЛ
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   DARK
   --------------------------------------------------------- */

html[data-svoi-theme="dark"]
#app .company-radar-card {

  border:
    1px solid rgba(124,139,210,.18) !important;

  background:
    radial-gradient(
      circle at 96% 4%,
      rgba(65,103,211,.22),
      transparent 38%
    ),
    radial-gradient(
      circle at 4% 100%,
      rgba(154,68,185,.13),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      rgba(26,33,59,.88),
      rgba(18,25,45,.78)
    ) !important;

  box-shadow:
    0 24px 56px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

html[data-svoi-theme="dark"]
#app .company-activity-link {
  background:
    rgba(44,52,84,.58) !important;

  border:
    1px solid rgba(132,143,205,.14) !important;
}

html[data-svoi-theme="dark"]
#app .company-feature,

html[data-svoi-theme="dark"]
#app .company-quick {

  border:
    1px solid rgba(128,141,201,.14) !important;

  background:
    linear-gradient(
      145deg,
      rgba(28,35,61,.84),
      rgba(19,26,47,.76)
    ) !important;

  box-shadow:
    0 15px 34px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}


/* ---------------------------------------------------------
   PRESS
   --------------------------------------------------------- */

#app .company-radar-actions button,
#app .company-quick,
#app .company-feature,
#app .company-live-card,
#app .company-stats-strip button {

  -webkit-tap-highlight-color:
    transparent !important;

  transition:
    transform .16s cubic-bezier(.2,.8,.2,1),
    opacity .16s ease !important;
}

#app .company-radar-actions button:active,
#app .company-quick:active,
#app .company-feature:active,
#app .company-live-card:active,
#app .company-stats-strip button:active {

  transform:
    scale(.975) !important;
}


/* ---------------------------------------------------------
   SMALL IPHONE
   --------------------------------------------------------- */

@media (max-width: 380px) {

  #app .company-radar-card {
    padding:
      22px 19px 20px !important;
  }

  #app .company-radar-card h2 {
    font-size: 26px !important;
  }

  #app .company-feature {
    min-height: 120px !important;

    padding: 14px !important;
  }

  #app .company-feature b {
    font-size: 16px !important;
  }
}


/* =========================================================
   NAMI COMPANY — HOME BALANCE V4
   Компактнее радар + нормальный низ страницы
   ========================================================= */


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

#app .company-head {
  margin:
    10px 0
    17px !important;
}

#app .company-head h1 {
  font-size:
    clamp(34px, 8.4vw, 42px) !important;
}


/* ---------------------------------------------------------
   RADAR — компактнее без потери премиальности
   --------------------------------------------------------- */

#app .company-radar-card {
  padding:
    21px 20px
    20px !important;

  border-radius:
    31px !important;
}


#app .company-radar-top {
  margin-bottom:
    0 !important;
}


#app .company-radar-card h2 {
  margin:
    13px 0
    0 !important;

  font-size:
    27px !important;

  line-height:
    1.02 !important;
}


#app .company-radar-card p {
  margin:
    6px 0
    0 !important;

  font-size:
    13.5px !important;
}


#app .company-radar-status {
  margin-top:
    13px !important;

  gap:
    6px !important;
}


#app .company-radar-status span {
  padding:
    8px 11px !important;

  font-size:
    11.5px !important;
}


#app .company-radar-actions {
  margin-top:
    14px !important;

  gap:
    8px !important;
}


#app .company-radar-actions button {
  min-height:
    50px !important;

  height:
    50px !important;

  border-radius:
    18px !important;

  font-size:
    14.5px !important;
}


/* второй action чуть спокойнее */

#app .company-radar-actions button + button {
  min-height:
    48px !important;

  height:
    48px !important;
}


/* ---------------------------------------------------------
   КТО ЗА / ОБЩИЙ СПИСОК
   --------------------------------------------------------- */

#app .company-quick-grid {
  margin:
    11px 0
    16px !important;

  gap:
    10px !important;
}


#app .company-quick {
  min-height:
    98px !important;

  padding:
    13px 11px !important;

  border-radius:
    25px !important;
}


#app .company-quick > span {
  width:
    39px !important;

  height:
    39px !important;

  border-radius:
    14px !important;
}


#app .company-quick b {
  font-size:
    14.5px !important;

  margin-top:
    6px !important;
}


#app .company-quick small {
  margin-top:
    3px !important;

  font-size:
    10.5px !important;
}


/* ---------------------------------------------------------
   СТАТИСТИКА
   --------------------------------------------------------- */

#app .company-stats-strip {
  margin-bottom:
    20px !important;
}


#app .company-stats-strip button {
  min-height:
    66px !important;

  padding:
    11px 12px !important;

  border-radius:
    20px !important;
}


/* ---------------------------------------------------------
   ВСЁ ДЛЯ КОМПАНИИ
   --------------------------------------------------------- */

#app .company-feature {
  min-height:
    120px !important;

  padding:
    15px !important;

  border-radius:
    26px !important;
}


#app .company-feature > span:first-child {
  width:
    41px !important;

  height:
    41px !important;
}


#app .company-feature b {
  font-size:
    16.5px !important;
}


/* ---------------------------------------------------------
   КНОПКИ ВНИЗУ
   --------------------------------------------------------- */

#app .company-bottom-actions {
  margin:
    12px 0
    4px !important;
}


/* ---------------------------------------------------------
   ГЛАВНЫЙ FIX:
   глобальный app-shell УЖЕ резервирует место под nav.
   Не добавляем второй nav-height.
   --------------------------------------------------------- */

html body #app
.page:has(.company-head) {

  padding-bottom:
    28px !important;

  scroll-padding-bottom:
    calc(
      var(--nav-h, 78px)
      + env(safe-area-inset-bottom)
      + 30px
    ) !important;
}


/* ---------------------------------------------------------
   SMALL IPHONE
   --------------------------------------------------------- */

@media (max-width: 390px) {

  #app .company-radar-card {
    padding:
      19px 17px
      18px !important;
  }


  #app .company-radar-card h2 {
    font-size:
      25px !important;
  }


  #app .company-radar-status span {
    padding:
      7px 9px !important;

    font-size:
      10.5px !important;
  }


  #app .company-radar-actions button {
    height:
      48px !important;

    min-height:
      48px !important;
  }


  #app .company-quick {
    min-height:
      94px !important;
  }


  #app .company-feature {
    min-height:
      116px !important;
  }
}



/* =========================================================
   NAMI COMPANY — GATHERING PREMIUM V3
   ========================================================= */

:is(#app, #sheetRoot) .company-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}


/* HERO */

:is(#app, #sheetRoot) .company-gather-hero {

  padding:
    18px;

  border-radius:
    26px;

  border:
    1px solid
    rgba(255,255,255,.76);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.82),
      rgba(241,244,255,.62)
    );

  box-shadow:
    0 14px 34px
    rgba(80,83,145,.075),
    inset 0 1px 0
    rgba(255,255,255,.94);
}


:is(#app, #sheetRoot) .company-gather-date {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;
}


:is(#app, #sheetRoot) .company-gather-date > span {

  width:
    46px;

  height:
    46px;

  min-width:
    46px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    16px;

  color:
    #7169d9;

  background:
    linear-gradient(
      145deg,
      rgba(126,113,222,.15),
      rgba(101,148,240,.10)
    );
}


:is(#app, #sheetRoot) .company-gather-date div {

  min-width:
    0;
}


:is(#app, #sheetRoot) .company-gather-date small {

  display:
    block;

  margin-bottom:
    5px;

  color:
    rgba(67,69,90,.48);

  font-size:
    9px;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    .18em;
}


:is(#app, #sheetRoot) .company-gather-date b {

  display:
    block;

  font-size:
    17px;

  line-height:
    1.15;

  font-weight:
    850;

  letter-spacing:
    -.025em;
}


:is(#app, #sheetRoot) .company-gather-hero > p {

  margin:
    14px 0 0;

  color:
    rgba(48,50,71,.69);

  font-size:
    13px;

  line-height:
    1.42;
}


/* STATUS */

:is(#app, #sheetRoot) .company-gather-state {

  width:
    fit-content;

  max-width:
    100%;

  margin-top:
    15px;

  padding:
    8px 12px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  border-radius:
    999px;

  background:
    rgba(111,115,150,.075);
}


:is(#app, #sheetRoot) .company-gather-state > span {

  width:
    7px;

  height:
    7px;

  flex:
    0 0 7px;

  border-radius:
    50%;

  background:
    #a5a7b6;
}


:is(#app, #sheetRoot) .company-gather-state b {

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11px;

  line-height:
    1;

  font-weight:
    800;

  color:
    rgba(58,60,78,.72);
}


:is(#app, #sheetRoot) .company-gather-state.ready {

  background:
    rgba(90,181,135,.11);
}


:is(#app, #sheetRoot) .company-gather-state.ready > span {

  background:
    #64b48a;
}


:is(#app, #sheetRoot) .company-gather-state.ready b {

  color:
    #438064;
}


:is(#app, #sheetRoot) .company-gather-state.complete {

  background:
    rgba(119,107,220,.11);
}


:is(#app, #sheetRoot) .company-gather-state.complete > span {

  background:
    #8074df;
}


:is(#app, #sheetRoot) .company-gather-state.complete b {

  color:
    #665cc4;
}


/* ANSWER + PEOPLE */

:is(#app, #sheetRoot) .company-gather-answer,
:is(#app, #sheetRoot) .company-gather-people {

  padding:
    17px;

  border-radius:
    26px;

  border:
    1px solid
    rgba(255,255,255,.76);

  background:
    rgba(255,255,255,.62);

  box-shadow:
    0 12px 28px
    rgba(82,84,136,.055),
    inset 0 1px 0
    rgba(255,255,255,.88);
}


:is(#app, #sheetRoot) .company-gather-section-head {

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    13px;
}


:is(#app, #sheetRoot) .company-gather-section-head small {

  display:
    block;

  margin-bottom:
    5px;

  color:
    rgba(68,70,90,.46);

  font-size:
    9px;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    .18em;
}


:is(#app, #sheetRoot) .company-gather-section-head h3 {

  margin:
    0;

  font-size:
    18px;

  line-height:
    1.08;

  font-weight:
    850;

  letter-spacing:
    -.025em;
}


:is(#app, #sheetRoot) .company-gather-section-head > strong {

  color:
    #776cda;

  font-size:
    13px;

  line-height:
    1;

  font-weight:
    850;
}


/* RESPONSE BUTTONS */

:is(#app, #sheetRoot) .company-response-row {

  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap:
    7px;
}


:is(#app, #sheetRoot) .company-response-row > button {

  min-width:
    0;

  min-height:
    64px;

  padding:
    10px 6px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  border:
    1px solid
    rgba(116,116,153,.09);

  border-radius:
    18px;

  color:
    rgba(47,49,67,.72);

  background:
    rgba(245,246,251,.86);

  -webkit-tap-highlight-color:
    transparent;

  transition:
    transform .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}


:is(#app, #sheetRoot) .company-response-row > button:active {

  transform:
    scale(.965);
}


:is(#app, #sheetRoot) .company-response-row > button span {

  font-size:
    11.5px;

  line-height:
    1;

  font-weight:
    750;

  white-space:
    nowrap;
}


:is(#app, #sheetRoot) .company-response-row > button b {

  font-size:
    17px;

  line-height:
    1;

  font-weight:
    900;
}


:is(#app, #sheetRoot) .company-response-row > button.active {

  color:
    #655bc4;

  border-color:
    rgba(115,99,219,.20);

  background:
    linear-gradient(
      145deg,
      rgba(129,113,226,.16),
      rgba(107,151,235,.10)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.74);
}


/* summary */

:is(#app, #sheetRoot) .company-response-summary {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    13px;

  margin-top:
    11px;

  color:
    rgba(65,67,84,.50);

  font-size:
    10.5px;

  line-height:
    1.1;
}


:is(#app, #sheetRoot) .company-response-summary b {

  color:
    rgba(47,49,67,.72);

  font-weight:
    850;
}


/* MEMBERS */

:is(#app, #sheetRoot) .company-gather-members {

  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


:is(#app, #sheetRoot) .company-gather-member {

  min-height:
    55px;

  padding:
    7px 9px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  border-radius:
    18px;

  background:
    rgba(245,246,251,.73);
}


:is(#app, #sheetRoot) .company-gather-avatar {

  width:
    40px;

  height:
    40px;

  min-width:
    40px;

  overflow:
    hidden;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    14px;

  color:
    #7167d3;

  background:
    linear-gradient(
      145deg,
      rgba(124,110,221,.16),
      rgba(105,151,236,.11)
    );
}


:is(#app, #sheetRoot) .company-gather-avatar img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


:is(#app, #sheetRoot) .company-gather-avatar b {

  font-size:
    12px;

  font-weight:
    900;
}


:is(#app, #sheetRoot) .company-gather-member-copy {

  min-width:
    0;

  flex:
    1;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


:is(#app, #sheetRoot) .company-gather-member-copy > b {

  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    13.5px;

  line-height:
    1.1;

  font-weight:
    800;
}


:is(#app, #sheetRoot) .company-gather-member-copy > b small {

  margin-left:
    4px;

  color:
    rgba(72,73,91,.40);

  font-size:
    9px;

  font-weight:
    700;
}


:is(#app, #sheetRoot) .company-gather-member-status {

  flex:
    0 0 auto;

  padding:
    7px 9px;

  border-radius:
    999px;

  font-size:
    9.5px;

  line-height:
    1;

  font-style:
    normal;

  font-weight:
    800;
}


:is(#app, #sheetRoot) .company-gather-member-status.yes {

  color:
    #3d8060;

  background:
    rgba(85,176,130,.12);
}


:is(#app, #sheetRoot) .company-gather-member-status.maybe {

  color:
    #8d753c;

  background:
    rgba(210,174,79,.13);
}


:is(#app, #sheetRoot) .company-gather-member-status.no {

  color:
    #a25f68;

  background:
    rgba(210,104,119,.11);
}


:is(#app, #sheetRoot) .company-gather-member-status.waiting {

  color:
    rgba(62,64,81,.47);

  background:
    rgba(112,114,137,.08);
}


/* FINISH */

:is(#app, #sheetRoot) .company-gather-finish {

  width:
    100%;

  min-height:
    48px;

  margin-top:
    2px;

  border:
    0;

  border-radius:
    18px;

  color:
    rgba(167,72,83,.84);

  background:
    rgba(201,89,103,.075);

  font-size:
    12px;

  font-weight:
    800;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
:is(#app, #sheetRoot) .company-gather-hero,

html[data-svoi-theme="dark"]
:is(#app, #sheetRoot) .company-gather-answer,

html[data-svoi-theme="dark"]
:is(#app, #sheetRoot) .company-gather-people {

  border-color:
    rgba(130,139,195,.14);

  background:
    linear-gradient(
      145deg,
      rgba(30,37,63,.90),
      rgba(21,28,49,.82)
    );

  box-shadow:
    0 16px 36px
    rgba(0,0,0,.18),
    inset 0 1px 0
    rgba(255,255,255,.025);
}


html[data-svoi-theme="dark"]
:is(#app, #sheetRoot) .company-gather-date small,

html[data-svoi-theme="dark"]
:is(#app, #sheetRoot) .company-gather-section-head small {

  color:
    rgba(220,222,239,.45);
}


html[data-svoi-theme="dark"]
:is(#app, #sheetRoot) .company-gather-hero > p {

  color:
    rgba(225,226,239,.64);
}


html[data-svoi-theme="dark"]
:is(#app, #sheetRoot) .company-response-row > button,

html[data-svoi-theme="dark"]
:is(#app, #sheetRoot) .company-gather-member {

  color:
    rgba(235,236,247,.76);

  border-color:
    rgba(130,139,195,.10);

  background:
    rgba(41,48,75,.72);
}


html[data-svoi-theme="dark"]
:is(#app, #sheetRoot) .company-response-row > button.active {

  color:
    #b4aafa;

  border-color:
    rgba(158,144,239,.23);

  background:
    linear-gradient(
      145deg,
      rgba(111,94,203,.27),
      rgba(75,108,181,.17)
    );
}


html[data-svoi-theme="dark"]
:is(#app, #sheetRoot) .company-response-summary {

  color:
    rgba(220,222,239,.45);
}


html[data-svoi-theme="dark"]
:is(#app, #sheetRoot) .company-response-summary b {

  color:
    rgba(239,240,250,.75);
}


html[data-svoi-theme="dark"]
:is(#app, #sheetRoot) .company-gather-member-copy > b small {

  color:
    rgba(220,222,239,.38);
}


/* =========================================================
   AUTO DARK
   ========================================================= */

@media (prefers-color-scheme: dark) {

  html[data-svoi-theme="auto"]
  :is(#app, #sheetRoot) .company-gather-hero,

  html[data-svoi-theme="auto"]
  :is(#app, #sheetRoot) .company-gather-answer,

  html[data-svoi-theme="auto"]
  :is(#app, #sheetRoot) .company-gather-people {

    border-color:
      rgba(130,139,195,.14);

    background:
      linear-gradient(
        145deg,
        rgba(30,37,63,.90),
        rgba(21,28,49,.82)
      );

    box-shadow:
      0 16px 36px
      rgba(0,0,0,.18),
      inset 0 1px 0
      rgba(255,255,255,.025);
  }


  html[data-svoi-theme="auto"]
  :is(#app, #sheetRoot) .company-response-row > button,

  html[data-svoi-theme="auto"]
  :is(#app, #sheetRoot) .company-gather-member {

    color:
      rgba(235,236,247,.76);

    border-color:
      rgba(130,139,195,.10);

    background:
      rgba(41,48,75,.72);
  }


  html[data-svoi-theme="auto"]
  :is(#app, #sheetRoot) .company-response-row > button.active {

    color:
      #b4aafa;

    background:
      linear-gradient(
        145deg,
        rgba(111,94,203,.27),
        rgba(75,108,181,.17)
      );
  }
}


/* SMALL IPHONE */

@media (max-width:390px) {

  :is(#app, #sheetRoot) .company-gather-hero,
  :is(#app, #sheetRoot) .company-gather-answer,
  :is(#app, #sheetRoot) .company-gather-people {

    padding:
      15px;

    border-radius:
      23px;
  }


  :is(#app, #sheetRoot) .company-response-row {

    gap:
      5px;
  }


  :is(#app, #sheetRoot) .company-response-row > button {

    min-height:
      60px;

    padding:
      9px 4px;
  }


  :is(#app, #sheetRoot) .company-response-row > button span {

    font-size:
      10.5px;
  }


  :is(#app, #sheetRoot) .company-gather-member {

    padding:
      6px 8px;
  }

}



/* =========================================================
   NAMI COMPANY — DATE/TIME PICKER V4
   ========================================================= */

#app .company-datetime-picker {

  position: relative;

  min-height: 74px;

  padding:
    12px 15px;

  display: grid;

  grid-template-columns:
    44px minmax(0,1fr) 22px;

  align-items: center;

  gap: 11px;

  overflow: hidden;

  border:
    1px solid
    rgba(113,116,151,.10);

  border-radius:
    21px;

  background:
    rgba(247,248,252,.88);

  -webkit-tap-highlight-color:
    transparent;
}


#app .company-datetime-icon {

  width: 44px;
  height: 44px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 15px;

  color:
    #7066d9;

  background:
    linear-gradient(
      145deg,
      rgba(125,109,222,.17),
      rgba(102,148,239,.11)
    );
}


#app .company-datetime-copy {

  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 5px;
}


#app .company-datetime-copy small {

  color:
    rgba(70,72,92,.46);

  font-size:
    9px;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    .15em;
}


#app .company-datetime-copy b {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size:
    16px;

  line-height:
    1.1;

  font-weight:
    800;

  letter-spacing:
    -.015em;
}


#app .company-datetime-chevron {

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: .42;
}


/*
 * Сам datetime-local остаётся поверх карточки,
 * чтобы iPhone открывал родной удобный picker.
 * Но его текст больше не виден в интерфейсе NAMI.
 */

#app .company-datetime-native {

  position: absolute !important;

  inset: 0 !important;

  z-index: 5 !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  opacity: 0 !important;

  cursor: pointer !important;
}


/* DARK */

html[data-svoi-theme="dark"]
#app .company-datetime-picker {

  border-color:
    rgba(132,141,198,.14);

  background:
    rgba(21,26,43,.68);
}


html[data-svoi-theme="dark"]
#app .company-datetime-copy small {

  color:
    rgba(219,222,240,.43);
}


html[data-svoi-theme="dark"]
#app .company-datetime-copy b {

  color:
    rgba(246,247,253,.96);
}


/* AUTO DARK */

@media (prefers-color-scheme: dark) {

  html[data-svoi-theme="auto"]
  #app .company-datetime-picker {

    border-color:
      rgba(132,141,198,.14);

    background:
      rgba(21,26,43,.68);
  }


  html[data-svoi-theme="auto"]
  #app .company-datetime-copy small {

    color:
      rgba(219,222,240,.43);
  }


  html[data-svoi-theme="auto"]
  #app .company-datetime-copy b {

    color:
      rgba(246,247,253,.96);
  }

}


/* =========================================================
   NAMI COMPANY — IOS DATETIME DUPLICATE FIX V5
   ========================================================= */

#app .company-form
.field
.company-datetime-picker {

  position: relative !important;

  overflow: hidden !important;

  isolation: isolate !important;
}


/* Нативный iOS datetime остаётся кликабельным,
   но больше НЕ занимает место и НЕ рисует текст */

#app .company-form
.field
.company-datetime-picker
> input.company-datetime-native[type="datetime-local"] {

  position: absolute !important;

  inset: 0 !important;

  z-index: 20 !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 0 !important;
  min-height: 0 !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  outline: 0 !important;

  border-radius: 21px !important;

  background: transparent !important;

  box-shadow: none !important;

  color: transparent !important;

  -webkit-text-fill-color: transparent !important;

  opacity: 0 !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  font-size: 0 !important;

  cursor: pointer !important;

  pointer-events: auto !important;
}


/* Safari shadow parts */

#app .company-datetime-native
::-webkit-datetime-edit,

#app .company-datetime-native
::-webkit-datetime-edit-fields-wrapper,

#app .company-datetime-native
::-webkit-datetime-edit-text,

#app .company-datetime-native
::-webkit-datetime-edit-month-field,

#app .company-datetime-native
::-webkit-datetime-edit-day-field,

#app .company-datetime-native
::-webkit-datetime-edit-year-field,

#app .company-datetime-native
::-webkit-datetime-edit-hour-field,

#app .company-datetime-native
::-webkit-datetime-edit-minute-field,

#app .company-datetime-native
::-webkit-datetime-edit-ampm-field,

#app .company-datetime-native
::-webkit-calendar-picker-indicator {

  color: transparent !important;

  background: transparent !important;

  opacity: 0 !important;
}

/* =========================================================
   СОЗДАНИЕ ВЫБОРА — PRESET CHIPS
   ========================================================= */

#app .company-option-picks {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin:
    3px 0 15px;
}


#app .company-option-picks label {

  position: relative;
}


#app .company-option-picks input {

  position: absolute;

  opacity: 0;

  pointer-events: none;
}


#app .company-option-picks span {

  min-height: 38px;

  padding:
    0 13px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 14px;

  color:
    rgba(52,54,71,.62);

  background:
    rgba(116,118,148,.07);

  border:
    1px solid
    rgba(112,115,150,.07);

  font-size: 11px;

  font-weight: 750;

  transition:
    transform .15s ease,
    background .15s ease;
}


#app .company-option-picks input:checked + span {

  color: #665cc7;

  border-color:
    rgba(117,100,220,.16);

  background:
    linear-gradient(
      145deg,
      rgba(127,111,225,.14),
      rgba(104,150,238,.09)
    );
}


#app .company-option-picks label:active span {

  transform: scale(.965);
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
#app .company-activity-hero,

html[data-svoi-theme="dark"]
#app .company-activity-vote,

html[data-svoi-theme="dark"]
#app .company-activity-people {

  border-color:
    rgba(130,139,195,.14);

  background:
    linear-gradient(
      145deg,
      rgba(30,37,63,.90),
      rgba(21,28,49,.82)
    );

  box-shadow:
    0 16px 36px
    rgba(0,0,0,.18),
    inset 0 1px 0
    rgba(255,255,255,.025);
}


html[data-svoi-theme="dark"]
#app .company-choice,

html[data-svoi-theme="dark"]
#app .company-activity-member {

  color:
    rgba(238,239,248,.85);

  border-color:
    rgba(130,139,195,.10);

  background:
    rgba(41,48,75,.72);
}


html[data-svoi-theme="dark"]
#app .company-choice.active {

  color: #b7adfa;

  border-color:
    rgba(158,144,239,.22);

  background:
    linear-gradient(
      145deg,
      rgba(111,94,203,.27),
      rgba(75,108,181,.17)
    );
}


html[data-svoi-theme="dark"]
#app .company-option-picks span {

  color:
    rgba(229,231,243,.60);

  border-color:
    rgba(133,141,192,.10);

  background:
    rgba(42,48,72,.64);
}


html[data-svoi-theme="dark"]
#app .company-option-picks input:checked + span {

  color: #b6acfa;

  border-color:
    rgba(158,144,239,.20);

  background:
    rgba(111,94,203,.20);
}


/* AUTO DARK */

@media (prefers-color-scheme: dark) {

  html[data-svoi-theme="auto"]
  #app .company-activity-hero,

  html[data-svoi-theme="auto"]
  #app .company-activity-vote,

  html[data-svoi-theme="auto"]
  #app .company-activity-people {

    border-color:
      rgba(130,139,195,.14);

    background:
      linear-gradient(
        145deg,
        rgba(30,37,63,.90),
        rgba(21,28,49,.82)
      );
  }


  html[data-svoi-theme="auto"]
  #app .company-choice,

  html[data-svoi-theme="auto"]
  #app .company-activity-member {

    color:
      rgba(238,239,248,.85);

    background:
      rgba(41,48,75,.72);
  }


  html[data-svoi-theme="auto"]
  #app .company-choice.active {

    color: #b7adfa;

    background:
      linear-gradient(
        145deg,
        rgba(111,94,203,.27),
        rgba(75,108,181,.17)
      );
  }

}

/* =========================================================
   NAMI ACTIVITY 9 — ISOLATED
   Старые company-choice / company-activity стили
   этот экран больше не затрагивают.
   ========================================================= */

.nami-activity9 {

  width: 100%;

  display: flex;

  flex-direction: column;

  gap: 22px;

  padding-bottom: 4px;
}


/* STATUS */

.nami-activity9-status {

  width: fit-content;

  max-width: 100%;

  min-height: 38px;

  padding:
    7px 11px;

  display: flex;

  align-items: center;

  gap: 8px;

  border-radius: 14px;

  color:
    rgba(68,61,133,.82);

  background:
    rgba(114,99,213,.085);
}


.nami-activity9-status > span {

  width: 23px;
  height: 23px;

  display: flex;

  align-items: center;
  justify-content: center;

  color: #7367d7;
}


.nami-activity9-status > b {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 11.5px;

  line-height: 1;

  font-weight: 800;
}


/* TITLES */

.nami-activity9 h3 {

  margin:
    0 0 11px;

  font-size: 19px;

  line-height: 1.05;

  font-weight: 900;

  letter-spacing: -.03em;
}


/* =========================================================
   OPTIONS — единый список, не карточки
   ========================================================= */

.nami-activity9-list {

  overflow: hidden;

  border:
    1px solid
    rgba(95,97,124,.075);

  border-radius: 20px;

  background:
    rgba(255,255,255,.38);
}


.nami-activity9-option {

  position: relative;

  width: 100%;

  min-height: 52px;

  margin: 0;

  padding:
    0 14px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  border: 0;

  border-radius: 0;

  text-align: left;

  color:
    rgba(28,30,43,.90);

  background: transparent;

  -webkit-tap-highlight-color:
    transparent;

  transition:
    background .15s ease,
    transform .15s ease;
}


.nami-activity9-option:not(:last-child)::after {

  content: "";

  position: absolute;

  left: 14px;
  right: 14px;
  bottom: 0;

  height: 1px;

  background:
    rgba(88,90,116,.075);
}


.nami-activity9-option:active {

  transform:
    scale(.985);
}


.nami-activity9-option.active {

  background:
    linear-gradient(
      90deg,
      rgba(124,105,224,.15),
      rgba(94,148,239,.10)
    );
}


.nami-activity9-name {

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 13.5px;

  line-height: 1.1;

  font-weight: 760;
}


.nami-activity9-result {

  min-width: 46px;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 6px;

  color:
    rgba(48,50,66,.47);
}


.nami-activity9-result > b {

  font-size: 13px;

  line-height: 1;

  font-weight: 850;
}


.nami-activity9-option.active
.nami-activity9-result {

  color: #655bc6;
}


.nami-activity9-check {

  width: 19px;
  height: 19px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  color: #fff;

  background: #7165d6;
}


/* =========================================================
   PEOPLE
   ========================================================= */

.nami-activity9-people-head {

  margin-bottom: 9px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;
}


.nami-activity9-people-head h3 {

  margin: 0;
}


.nami-activity9-people-head > span {

  color:
    rgba(64,66,82,.42);

  font-size: 11px;

  font-weight: 800;
}


.nami-activity9-members {

  overflow: hidden;

  border:
    1px solid
    rgba(95,97,124,.065);

  border-radius: 19px;

  background:
    rgba(255,255,255,.24);
}


.nami-activity9-member {

  position: relative;

  min-height: 49px;

  padding:
    6px 12px;

  display: grid;

  grid-template-columns:
    34px minmax(0,1fr);

  align-items: center;

  gap: 10px;
}


.nami-activity9-member:not(:last-child)::after {

  content: "";

  position: absolute;

  left: 56px;
  right: 12px;
  bottom: 0;

  height: 1px;

  background:
    rgba(88,90,116,.065);
}


.nami-activity9-avatar {

  width: 34px;
  height: 34px;

  min-width: 34px;
  min-height: 34px;

  max-width: 34px;
  max-height: 34px;

  overflow: hidden;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 11px;

  color: #695fca;

  background:
    rgba(117,101,215,.09);
}


.nami-activity9-avatar img {

  position: static !important;

  width: 34px !important;
  height: 34px !important;

  min-width: 34px !important;
  min-height: 34px !important;

  max-width: 34px !important;
  max-height: 34px !important;

  object-fit: cover !important;

  border-radius: 11px !important;

  transform: none !important;
}


.nami-activity9-avatar > b {

  font-size: 10.5px;

  line-height: 1;

  font-weight: 900;
}


.nami-activity9-member-main {

  min-width: 0;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;
}


.nami-activity9-member-main > b {

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 12.5px;

  line-height: 1;

  font-weight: 800;
}


.nami-activity9-member-main > b small {

  margin-left: 4px;

  color:
    rgba(51,53,70,.36);

  font-size: 8px;

  font-weight: 700;
}


.nami-activity9-member-choice {

  max-width: 46%;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 10px;

  line-height: 1;

  font-style: normal;
}


.nami-activity9-member-choice.chosen {

  color: #6258bd;

  font-weight: 750;
}


.nami-activity9-member-choice.waiting {

  color:
    rgba(50,52,68,.36);
}


/* Удалить приглушаем только в этой шторке */

.sheet:has(.nami-activity9)
.company-delete-link {

  margin:
    3px auto 0 !important;

  background:
    transparent !important;

  font-weight:
    700 !important;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-svoi-theme="dark"]
.nami-activity9-status {

  color: #b4aafa;

  background:
    rgba(112,94,203,.16);
}


html[data-svoi-theme="dark"]
.nami-activity9-list,

html[data-svoi-theme="dark"]
.nami-activity9-members {

  border-color:
    rgba(139,145,191,.10);

  background:
    rgba(31,37,58,.42);
}


html[data-svoi-theme="dark"]
.nami-activity9-option {

  color:
    rgba(242,243,250,.90);
}


html[data-svoi-theme="dark"]
.nami-activity9-option:not(:last-child)::after,

html[data-svoi-theme="dark"]
.nami-activity9-member:not(:last-child)::after {

  background:
    rgba(142,147,191,.09);
}


html[data-svoi-theme="dark"]
.nami-activity9-option.active {

  background:
    linear-gradient(
      90deg,
      rgba(110,91,203,.25),
      rgba(71,104,177,.15)
    );
}


html[data-svoi-theme="dark"]
.nami-activity9-member-choice.waiting {

  color:
    rgba(226,228,240,.36);
}


/* AUTO DARK */

@media (prefers-color-scheme: dark) {

  html[data-svoi-theme="auto"]
  .nami-activity9-list,

  html[data-svoi-theme="auto"]
  .nami-activity9-members {

    border-color:
      rgba(139,145,191,.10);

    background:
      rgba(31,37,58,.42);
  }


  html[data-svoi-theme="auto"]
  .nami-activity9-option {

    color:
      rgba(242,243,250,.90);
  }

}



/* =========================================================
   NAMI_ACTIVITY_CREATE_FORM_CLEAN_V1
   Только форма создания выбора
   ========================================================= */

#companyActivityForm .company-option-picks {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin:
    4px 0 15px;
}


#companyActivityForm .company-option-picks label {

  position: relative;

  display: inline-flex;
}


#companyActivityForm .company-option-picks input {

  position: absolute;

  opacity: 0;

  pointer-events: none;
}


#companyActivityForm .company-option-picks span {

  min-height: 38px;

  padding:
    0 13px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  border-radius: 14px;

  border:
    1px solid
    rgba(105,107,137,.08);

  color:
    rgba(48,50,68,.60);

  background:
    rgba(111,113,145,.06);

  font-size: 11px;

  font-weight: 750;

  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease;
}


#companyActivityForm
.company-option-picks
input:checked + span {

  color: #665cc7;

  border-color:
    rgba(117,100,220,.16);

  background:
    linear-gradient(
      145deg,
      rgba(127,111,225,.14),
      rgba(104,150,238,.08)
    );
}


#companyActivityForm
.company-option-picks
label:active span {

  transform:
    scale(.965);
}


/* DARK */

html[data-svoi-theme="dark"]
#companyActivityForm
.company-option-picks span {

  color:
    rgba(229,231,243,.60);

  border-color:
    rgba(133,141,192,.10);

  background:
    rgba(42,48,72,.64);
}


html[data-svoi-theme="dark"]
#companyActivityForm
.company-option-picks
input:checked + span {

  color: #b6acfa;

  border-color:
    rgba(158,144,239,.20);

  background:
    rgba(111,94,203,.20);
}


/* AUTO DARK */

@media (prefers-color-scheme: dark) {

  html[data-svoi-theme="auto"]
  #companyActivityForm
  .company-option-picks span {

    color:
      rgba(229,231,243,.60);

    background:
      rgba(42,48,72,.64);
  }


  html[data-svoi-theme="auto"]
  #companyActivityForm
  .company-option-picks
  input:checked + span {

    color: #b6acfa;

    background:
      rgba(111,94,203,.20);
  }

}

/* =========================================================
   NAMI ACTIVITY 9 — FINAL POLISH V2
   ========================================================= */

.nami-activity9 {
  gap: 18px !important;
}


/* STATUS */

.nami-activity9-status {
  min-height: 36px !important;

  padding: 6px 10px !important;

  gap: 6px !important;

  border-radius: 13px !important;

  background:
    rgba(116,100,216,.07) !important;
}


.nami-activity9-status > span {
  width: 21px !important;
  height: 21px !important;
}


.nami-activity9-status > b {
  font-size: 11px !important;
  font-weight: 800 !important;
}


/* TITLES */

.nami-activity9 h3 {
  margin-bottom: 9px !important;

  font-size: 18px !important;

  letter-spacing: -.025em !important;
}


/* OPTIONS */

.nami-activity9-list {
  border-radius: 18px !important;

  background:
    rgba(255,255,255,.31) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.52) !important;
}


.nami-activity9-option {
  min-height: 50px !important;

  padding:
    0 13px !important;
}


.nami-activity9-option:not(:last-child)::after {
  left: 13px !important;
  right: 13px !important;

  opacity: .72 !important;
}


.nami-activity9-name {
  font-size: 13px !important;

  font-weight: 780 !important;
}


.nami-activity9-result {
  min-width: 42px !important;

  gap: 5px !important;
}


.nami-activity9-result > b {
  font-size: 12.5px !important;
}


.nami-activity9-check {
  width: 18px !important;
  height: 18px !important;
}


/* выбранный вариант */

.nami-activity9-option.active {
  background:
    linear-gradient(
      90deg,
      rgba(126,108,222,.12),
      rgba(103,150,239,.075)
    ) !important;
}


/* PARTICIPANTS */

.nami-activity9-people {
  margin-top: 1px !important;
}


.nami-activity9-people-head {
  margin-bottom: 8px !important;
}


/* верхний статус уже показывает 1 из 5 —
   второй счётчик здесь не нужен */

.nami-activity9-people-head > span {
  display: none !important;
}


.nami-activity9-members {
  border-radius: 18px !important;

  background:
    rgba(255,255,255,.20) !important;
}


.nami-activity9-member {
  min-height: 47px !important;

  padding:
    6px 11px !important;

  grid-template-columns:
    32px minmax(0,1fr) !important;

  gap: 9px !important;
}


.nami-activity9-member:not(:last-child)::after {
  left: 52px !important;
  right: 11px !important;
}


.nami-activity9-avatar,
.nami-activity9-avatar img {
  width: 32px !important;
  height: 32px !important;

  min-width: 32px !important;
  min-height: 32px !important;

  max-width: 32px !important;
  max-height: 32px !important;

  border-radius: 10px !important;
}


.nami-activity9-member-main > b {
  font-size: 12px !important;
}


.nami-activity9-member-choice {
  max-width: 43% !important;

  font-size: 9.5px !important;
}


.nami-activity9-member-choice.chosen {
  color: #655bc4 !important;

  font-weight: 800 !important;
}


/* DELETE */

.sheet:has(.nami-activity9)
.company-delete-link {
  margin-top: 0 !important;

  padding: 8px 14px !important;

  color:
    rgba(176,72,88,.32) !important;

  font-size: 9.5px !important;
}


/* DARK */

html[data-svoi-theme="dark"]
.nami-activity9-list,

html[data-svoi-theme="dark"]
.nami-activity9-members {
  background:
    rgba(31,37,58,.34) !important;
}


html[data-svoi-theme="dark"]
.nami-activity9-option.active {
  background:
    linear-gradient(
      90deg,
      rgba(110,91,203,.20),
      rgba(71,104,177,.12)
    ) !important;
}


/* AUTO DARK */

@media (prefers-color-scheme: dark) {

  html[data-svoi-theme="auto"]
  .nami-activity9-list,

  html[data-svoi-theme="auto"]
  .nami-activity9-members {
    background:
      rgba(31,37,58,.34) !important;
  }

}



/* ===== SOURCE: nami-work-polish.css ===== */

/* =========================================================
   NAMI — WORK SPACE POLISH
   Только пространство "Работа"
   ========================================================= */


/* ---------------------------------------------------------
   COLOR SYSTEM — LIGHT
   --------------------------------------------------------- */

html[data-svoi-theme="light"] {
  --nami-work-card: rgba(255,255,255,.60);
  --nami-work-card-soft: rgba(255,255,255,.48);
  --nami-work-line: rgba(255,255,255,.88);
  --nami-work-accent: #7f73df;
  --nami-work-muted: rgba(69,70,89,.58);
  --nami-work-shadow:
    0 14px 36px rgba(83,85,137,.055),
    inset 0 1px 0 rgba(255,255,255,.76);
}


/* ---------------------------------------------------------
   COLOR SYSTEM — DARK
   --------------------------------------------------------- */

html[data-svoi-theme="dark"] {
  --nami-work-card: rgba(29,36,61,.76);
  --nami-work-card-soft: rgba(27,34,57,.64);
  --nami-work-line: rgba(133,125,213,.18);
  --nami-work-accent: #a79af5;
  --nami-work-muted: rgba(220,222,238,.57);
  --nami-work-shadow:
    0 18px 42px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.035);
}


/* AUTO — LIGHT */

@media (prefers-color-scheme: light) {
  html[data-svoi-theme="auto"] {
    --nami-work-card: rgba(255,255,255,.60);
    --nami-work-card-soft: rgba(255,255,255,.48);
    --nami-work-line: rgba(255,255,255,.88);
    --nami-work-accent: #7f73df;
    --nami-work-muted: rgba(69,70,89,.58);
    --nami-work-shadow:
      0 14px 36px rgba(83,85,137,.055),
      inset 0 1px 0 rgba(255,255,255,.76);
  }
}


/* AUTO — DARK */

@media (prefers-color-scheme: dark) {
  html[data-svoi-theme="auto"] {
    --nami-work-card: rgba(29,36,61,.76);
    --nami-work-card-soft: rgba(27,34,57,.64);
    --nami-work-line: rgba(133,125,213,.18);
    --nami-work-accent: #a79af5;
    --nami-work-muted: rgba(220,222,238,.57);
    --nami-work-shadow:
      0 18px 42px rgba(0,0,0,.15),
      inset 0 1px 0 rgba(255,255,255,.035);
  }
}


/* =========================================================
   HEADER
   ========================================================= */

#app .work-v1-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 16px !important;

  margin:
    17px 0
    18px !important;
}


#app .work-v1-head > div {
  min-width: 0 !important;
}


#app .work-v1-head > div > small {
  display: block !important;

  margin: 0 0 7px !important;

  color: var(--nami-work-muted) !important;

  font-size: 10px !important;
  line-height: 1 !important;

  font-weight: 900 !important;
  letter-spacing: .18em !important;
}


#app .work-v1-head h1 {
  margin: 0 !important;

  font-size: 34px !important;
  line-height: 1.02 !important;

  font-weight: 900 !important;
  letter-spacing: -.045em !important;
}


#app .work-v1-head > div > span {
  display: block !important;

  margin-top: 8px !important;

  color: var(--nami-work-muted) !important;

  font-size: 14px !important;
  line-height: 1.2 !important;
}


#app .work-v1-head > .icon-btn {
  width: 54px !important;
  height: 54px !important;

  min-width: 54px !important;

  margin: 0 !important;

  border-radius: 18px !important;

  background: var(--nami-work-card) !important;
  border: 1px solid var(--nami-work-line) !important;

  box-shadow: var(--nami-work-shadow) !important;
  backdrop-filter: blur(20px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
}


/* =========================================================
   QUICK ACTIONS — ЗАДАЧА / ВСТРЕЧА / РЕШЕНИЕ
   ========================================================= */


#app .work-v1-actions > button {
  min-width: 0 !important;

  grid-template-columns:
    26px minmax(0,1fr) !important;

  -webkit-tap-highlight-color: transparent !important;
}


#app .work-v1-actions > button:active {
  transform: scale(.975) !important;
  opacity: .88 !important;
}



#app .work-v1-actions > button > span {
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: flex-start !important;

  gap: 4px !important;
}


#app .work-v1-actions b {
  font-size: 15px !important;
  line-height: 1.05 !important;

  font-weight: 850 !important;

  white-space: nowrap !important;
}


#app .work-v1-actions small {
  display: block !important;

  color: var(--nami-work-muted) !important;

  font-size: 11.5px !important;
  line-height: 1.18 !important;

  font-weight: 500 !important;
}


/* =========================================================
   SECTIONS
   ========================================================= */

#app .work-v1-section {
  margin: 0 0 27px !important;
}


#app .work-v1-section-head {
  min-height: 54px !important;

  margin: 0 0 10px !important;

  display: flex !important;

  align-items: flex-end !important;
  justify-content: space-between !important;

  gap: 14px !important;
}


#app .work-v1-section-head > div {
  min-width: 0 !important;
}


#app .work-v1-section-head small {
  display: block !important;

  margin: 0 0 7px !important;

  color: var(--nami-work-muted) !important;

  font-size: 9px !important;
  line-height: 1 !important;

  font-weight: 900 !important;
  letter-spacing: .20em !important;
}


#app .work-v1-section-head h2 {
  margin: 0 !important;

  font-size: 25px !important;
  line-height: 1.02 !important;

  font-weight: 900 !important;
  letter-spacing: -.035em !important;
}


/* Все / Добавить / Опрос */

#app .work-v1-section-head > button {
  height: 38px !important;
  min-height: 38px !important;

  min-width: 68px !important;

  margin: 0 !important;
  padding: 0 15px !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  border-radius: 14px !important;

  color: var(--nami-work-accent) !important;

  font-size: 12px !important;
  line-height: 1 !important;

  font-weight: 850 !important;

  background: var(--nami-work-card-soft) !important;
  border: 1px solid var(--nami-work-line) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10) !important;

  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}


/* =========================================================
   EMPTY STATES
   ========================================================= */

#app .work-v1-empty {
  width: 100% !important;

  min-height: 82px !important;

  padding: 14px 18px !important;

  display: grid !important;

  grid-template-columns:
    34px minmax(0,1fr) !important;

  align-items: center !important;

  gap: 12px !important;

  text-align: left !important;

  border-radius: 23px !important;

  background: var(--nami-work-card) !important;
  border: 1px solid var(--nami-work-line) !important;

  box-shadow: var(--nami-work-shadow) !important;

  backdrop-filter: blur(20px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%) !important;

  -webkit-tap-highlight-color: transparent !important;

  transition:
    transform .16s ease,
    opacity .16s ease !important;
}


#app .work-v1-empty:active {
  transform: scale(.985) !important;
  opacity: .9 !important;
}


#app .work-v1-empty > svg {
  width: 21px !important;
  height: 21px !important;

  justify-self: center !important;
}


#app .work-v1-empty > span {
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: flex-start !important;

  gap: 4px !important;
}


#app .work-v1-empty b {
  font-size: 15px !important;
  line-height: 1.1 !important;

  font-weight: 850 !important;
}


#app .work-v1-empty small {
  color: var(--nami-work-muted) !important;

  font-size: 12px !important;
  line-height: 1.18 !important;
}


/* =========================================================
   REAL TASKS
   Если задачи появятся — карточки тоже выглядят в новом стиле
   ========================================================= */

#app .work-v1-list {
  display: flex !important;

  flex-direction: column !important;

  gap: 9px !important;
}


#app .work-v1-task {
  min-height: 72px !important;

  padding: 10px 12px !important;

  display: grid !important;

  grid-template-columns:
    32px minmax(0,1fr) 32px !important;

  align-items: center !important;

  gap: 8px !important;

  border-radius: 21px !important;

  background: var(--nami-work-card) !important;
  border: 1px solid var(--nami-work-line) !important;

  box-shadow: var(--nami-work-shadow) !important;

  backdrop-filter: blur(20px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
}


#app .work-v1-task-main {
  min-width: 0 !important;

  padding: 4px 0 !important;

  text-align: left !important;
}


#app .work-v1-task-main b {
  display: block !important;

  margin-bottom: 5px !important;

  font-size: 14px !important;
  line-height: 1.12 !important;

  font-weight: 800 !important;
}


#app .work-v1-task-main small {
  color: var(--nami-work-muted) !important;

  font-size: 11px !important;
  line-height: 1.2 !important;
}


/* =========================================================
   SAFE BOTTOM SPACE
   ========================================================= */

#app:has(.work-v1-head) {
  padding-bottom:
    calc(128px + env(safe-area-inset-bottom)) !important;
}


/* =========================================================
   SMALL IPHONE
   ========================================================= */

@media (max-width: 380px) {

  #app .work-v1-head h1 {
    font-size: 31px !important;
  }


  #app .work-v1-actions {
    gap: 8px !important;
  }


  #app .work-v1-actions > button {
    min-height: 88px !important;

    padding: 13px 9px !important;

    grid-template-columns:
      22px minmax(0,1fr) !important;

    gap: 7px !important;

    border-radius: 20px !important;
  }


  #app .work-v1-actions b {
    font-size: 14px !important;
  }


  #app .work-v1-actions small {
    font-size: 10.5px !important;
  }


  #app .work-v1-section-head h2 {
    font-size: 23px !important;
  }


  #app .work-v1-empty {
    min-height: 78px !important;

    padding: 13px 15px !important;
  }

}


/* =========================================================
   NAMI WORK — PREMIUM ACTION CARDS FINAL
   ========================================================= */


/* ---------------------------------------------------------
   WRAPPER
   --------------------------------------------------------- */

#app .work-v1-actions {
  width: 100% !important;

  margin: 0 0 30px !important;
  padding: 0 !important;

  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0,1fr)) !important;

  gap: 10px !important;

  align-items: stretch !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  overflow: visible !important;
}


/* ---------------------------------------------------------
   THREE IDENTICAL CARDS
   --------------------------------------------------------- */

#app .work-v1-actions > button {
  position: relative !important;

  box-sizing: border-box !important;

  width: 100% !important;

  margin: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;
  justify-content: flex-start !important;

  gap: 0 !important;

  text-align: center !important;

  border-radius: 24px !important;

  background:
    rgba(255,255,255,.58) !important;

  border:
    1px solid rgba(255,255,255,.90) !important;

  box-shadow:
    0 14px 35px rgba(75,82,132,.055),
    inset 0 1px 0 rgba(255,255,255,.82) !important;

  backdrop-filter:
    blur(22px) saturate(145%) !important;

  -webkit-backdrop-filter:
    blur(22px) saturate(145%) !important;

  overflow: hidden !important;

  transform: none !important;

  transition:
    transform .16s ease,
    background .16s ease !important;
}


#app .work-v1-actions > button:active {
  transform:
    scale(.97) !important;
}


/* subtle premium highlight */

#app .work-v1-actions > button::before {
  content: "" !important;

  position: absolute !important;

  left: 12px !important;
  right: 12px !important;
  top: 0 !important;

  height: 1px !important;

  background:
    rgba(255,255,255,.92) !important;

  opacity: .75 !important;
}


/* ---------------------------------------------------------
   DARK
   --------------------------------------------------------- */

html[data-svoi-theme="dark"]
body #app .work-v1-actions > button {
  background:
    rgba(28,35,59,.78) !important;

  border-color:
    rgba(137,128,218,.18) !important;

  box-shadow:
    0 16px 38px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}


html[data-svoi-theme="dark"]
body #app .work-v1-actions > button::before {
  background:
    rgba(185,179,245,.20) !important;
}


/* AUTO DARK */

@media (prefers-color-scheme:dark) {

  html[data-svoi-theme="auto"]
  body #app .work-v1-actions > button {
    background:
      rgba(28,35,59,.78) !important;

    border-color:
      rgba(137,128,218,.18) !important;

    box-shadow:
      0 16px 38px rgba(0,0,0,.15),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

}


/* ---------------------------------------------------------
   ICON
   Маленький premium glass badge
   --------------------------------------------------------- */

#app .work-v1-actions > button > svg {
  box-sizing: border-box !important;

  flex: 0 0 auto !important;

  color:
    var(--text) !important;

  background:
    rgba(126,114,220,.08) !important;

  border:
    1px solid rgba(126,114,220,.08) !important;

  align-self:
    center !important;

  transform:
    none !important;
}


/* slightly different soft tint */

#app .work-v1-actions
> button:nth-child(1) > svg {
  background:
    rgba(242,132,151,.09) !important;
}

#app .work-v1-actions
> button:nth-child(2) > svg {
  background:
    rgba(103,156,232,.09) !important;
}

#app .work-v1-actions
> button:nth-child(3) > svg {
  background:
    rgba(139,119,226,.09) !important;
}


/* ---------------------------------------------------------
   TEXT WRAPPER
   --------------------------------------------------------- */

#app .work-v1-actions > button > span {
  box-sizing: border-box !important;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;

  grid-template-rows:
    21px 31px !important;

  row-gap: 3px !important;

  align-items: start !important;

  text-align: center !important;

  grid-column: auto !important;
  grid-row: auto !important;
}


/* ---------------------------------------------------------
   TITLE
   --------------------------------------------------------- */

#app .work-v1-actions
> button > span > b {
  box-sizing: border-box !important;

  width: 100% !important;
  height: 21px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  font-size:
    14.5px !important;

  line-height:
    21px !important;

  font-weight:
    850 !important;

  letter-spacing:
    -.015em !important;

  white-space:
    nowrap !important;

  text-align:
    center !important;
}


/* ---------------------------------------------------------
   SUBTITLE
   Зарезервированы одинаковые две строки
   --------------------------------------------------------- */

#app .work-v1-actions
> button > span > small {
  box-sizing: border-box !important;

  width: 100% !important;
  height: 31px !important;

  margin: 0 !important;
  padding: 0 1px !important;

  display: flex !important;

  align-items: flex-start !important;
  justify-content: center !important;

  color:
    var(--nami-work-muted) !important;

  font-size:
    10.5px !important;

  line-height:
    14px !important;

  font-weight:
    500 !important;

  letter-spacing:
    0 !important;

  text-align:
    center !important;
}


/* ---------------------------------------------------------
   SPACE AFTER ACTIONS
   --------------------------------------------------------- */

#app .work-v1-section:first-of-type {
  margin-top:
    0 !important;
}


/* ---------------------------------------------------------
   SMALL IPHONE
   --------------------------------------------------------- */

@media (max-width:380px) {

  #app .work-v1-actions {
    gap:
      8px !important;
  }


  #app .work-v1-actions > button {
    border-radius:
      21px !important;
  }




  #app .work-v1-actions
  > button > span > b {
    font-size:
      13.5px !important;
  }


  #app .work-v1-actions
  > button > span > small {
    font-size:
      9.7px !important;

    line-height:
      13px !important;
  }

}

/* =========================================================
   END PREMIUM ACTION CARDS
   ========================================================= */



/* =========================================================
   NAMI WORK — FINAL COMPACT TOUCH
   ========================================================= */

/* Карточки чуть ниже */

#app .work-v1-actions > button {
  height: 108px !important;
  min-height: 108px !important;
  max-height: 108px !important;

  padding: 11px 8px 9px !important;
}


/* Иконки чуть легче и компактнее */

#app .work-v1-actions > button > svg {
  width: 34px !important;
  height: 34px !important;

  min-width: 34px !important;
  min-height: 34px !important;

  padding: 7px !important;

  margin: 0 0 7px !important;

  border-radius: 12px !important;
}


/* На небольших iPhone */

@media (max-width:380px) {

  #app .work-v1-actions > button {
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;

    padding: 10px 6px 8px !important;
  }

  #app .work-v1-actions > button > svg {
    width: 32px !important;
    height: 32px !important;

    min-width: 32px !important;
    min-height: 32px !important;

    padding: 6px !important;

    margin-bottom: 6px !important;
  }
}


/* =========================================================
   NAMI WORK — BOTTOM SAFE AREA
   ========================================================= */

/* Запас под фиксированной нижней навигацией */

#app:has(.work-v1-head) {
  padding-bottom:
    calc(210px + env(safe-area-inset-bottom)) !important;
}


/* Последний раздел должен целиком выходить над tabbar */

#app .work-v1-section:last-of-type {
  margin-bottom:
    calc(125px + env(safe-area-inset-bottom)) !important;
}


/* На небольших iPhone чуть больше */

@media (max-width:380px) {

  #app:has(.work-v1-head) {
    padding-bottom:
      calc(225px + env(safe-area-inset-bottom)) !important;
  }

  #app .work-v1-section:last-of-type {
    margin-bottom:
      calc(140px + env(safe-area-inset-bottom)) !important;
  }
}




/* =========================================================
   NAMI COUPLE HOME — FINAL V1
   Главный экран пространства "Пара"
   ========================================================= */


/* ---------------------------------------------------------
   PAGE / BOTTOM SAFE AREA
   --------------------------------------------------------- */

#app .page:has(.couple-room-head) {
  padding-bottom:
    calc(128px + env(safe-area-inset-bottom)) !important;
}


/* ---------------------------------------------------------
   STORY
   --------------------------------------------------------- */

#app .page:has(.couple-room-head)
.couple-story-card {
  position: relative !important;

  height: auto !important;
  min-height: 0 !important;

  margin-bottom: 12px !important;

  padding: 15px 16px 14px !important;

  border-radius: 24px !important;
}


#app .page:has(.couple-room-head)
.couple-story-card
.couple-story-content {
  width: 100% !important;
  min-height: 0 !important;

  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  gap: 0 !important;
}


/* Наша история */

#app .page:has(.couple-room-head)
.couple-story-card
.couple-story-content > small {
  margin: 0 0 7px !important;

  font-size: 9.5px !important;
  line-height: 1 !important;

  letter-spacing: .22em !important;
}


/* 4 года вместе */

#app .page:has(.couple-room-head)
.couple-story-card
.couple-story-content > b {
  margin: 0 50px 11px 0 !important;

  font-size: 19px !important;
  line-height: 1.05 !important;

  letter-spacing: -.035em !important;
}


/* До годовщины */

#app .page:has(.couple-room-head)
.couple-story-card
.couple-story-content > span:not(.couple-story-marriage) {
  width: 100% !important;

  height: 40px !important;
  min-height: 40px !important;

  margin: 0 0 8px !important;
  padding: 0 12px !important;

  display: flex !important;
  align-items: center !important;

  border-radius: 15px !important;

  font-size: 12.5px !important;
  line-height: 1 !important;
}


/* Брак */

#app .page:has(.couple-room-head)
.couple-story-card
.couple-story-marriage {
  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 8px 10px !important;

  display: flex !important;
  flex-direction: column !important;

  gap: 6px !important;

  border-radius: 16px !important;
}


#app .page:has(.couple-room-head)
.couple-story-card
.couple-story-marriage em {
  height: 27px !important;
  min-height: 27px !important;

  margin: 0 !important;
  padding: 0 9px !important;

  display: flex !important;
  align-items: center !important;

  border-radius: 10px !important;

  font-size: 10px !important;
  line-height: 1 !important;
}


/* Убираем старый декоративный кружок */

#app .page:has(.couple-room-head)
.couple-story-card
.couple-story-marriage::before,

#app .page:has(.couple-room-head)
.couple-story-card
.couple-story-content > span:nth-of-type(2)::before {
  content: none !important;
  display: none !important;
}


/* Стрелка */

#app .page:has(.couple-room-head)
.couple-story-card
.couple-story-chevron {
  position: absolute !important;

  top: 20px !important;
  right: 12px !important;

  width: 32px !important;
  height: 32px !important;

  min-width: 32px !important;
  min-height: 32px !important;

  margin: 0 !important;

  border-radius: 50% !important;

  opacity: .72 !important;
}


/* ---------------------------------------------------------
   CORE FEATURE GRID
   --------------------------------------------------------- */

#app .page:has(.couple-room-head)
.couple-feature-grid.couple-core-grid {
  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;

  margin: 14px 0 0 !important;
  padding: 0 !important;

  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  grid-auto-rows: auto !important;

  gap: 10px !important;

  align-content: start !important;
}


/* Карточки */

#app .page:has(.couple-room-head)
.couple-feature-card {
  box-sizing: border-box !important;

  height: 132px !important;
  min-height: 132px !important;

  padding: 14px !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: flex-start !important;

  border-radius: 22px !important;

  overflow: hidden !important;
}


/* Иконки */

#app .page:has(.couple-room-head)
.couple-feature-card
.couple-feature-icon {
  width: 38px !important;
  height: 38px !important;

  min-width: 38px !important;
  min-height: 38px !important;

  margin: 0 0 11px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 13px !important;
}


#app .page:has(.couple-room-head)
.couple-feature-card
.couple-feature-icon svg {
  width: 18px !important;
  height: 18px !important;
}


/* Заголовки */

#app .page:has(.couple-room-head)
.couple-feature-card b {
  align-self: flex-start !important;

  width: 100% !important;

  margin: auto 0 0 !important;
  padding: 0 !important;

  font-size: 15.5px !important;
  line-height: 1.08 !important;

  letter-spacing: -.025em !important;

  text-align: left !important;
}


/* Подписи */

#app .page:has(.couple-room-head)
.couple-feature-card small {
  width: 100% !important;
  min-height: 0 !important;

  margin: 5px 0 0 !important;

  display: block !important;

  overflow: visible !important;

  font-size: 10.5px !important;
  line-height: 1.28 !important;

  text-align: left !important;
}


/* ---------------------------------------------------------
   UPCOMING
   --------------------------------------------------------- */

#app .page:has(.couple-room-head)
.couple-next-head {
  margin: 22px 3px 10px !important;
  padding: 0 !important;
}


#app .page:has(.couple-room-head)
.couple-next-head h2 {
  margin: 0 !important;

  font-size: 20px !important;
  line-height: 1.1 !important;

  letter-spacing: -.035em !important;
}


#app .page:has(.couple-room-head)
.couple-upcoming-list {
  margin: 0 0 18px !important;
  padding: 0 !important;
}


#app .page:has(.couple-room-head)
.couple-empty-plan {
  min-height: 76px !important;

  padding: 12px 14px !important;

  border-radius: 20px !important;
}


/* ---------------------------------------------------------
   SMALL IPHONE
   --------------------------------------------------------- */

@media (max-width: 380px) {

  #app .page:has(.couple-room-head) {
    padding-bottom:
      calc(122px + env(safe-area-inset-bottom)) !important;
  }


  #app .page:has(.couple-room-head)
  .couple-story-card {
    padding: 14px !important;
  }


  #app .page:has(.couple-room-head)
  .couple-story-card
  .couple-story-content > b {
    font-size: 18px !important;
  }


  #app .page:has(.couple-room-head)
  .couple-feature-grid.couple-core-grid {
    gap: 9px !important;
  }


  #app .page:has(.couple-room-head)
  .couple-feature-card {
    height: 124px !important;
    min-height: 124px !important;

    padding: 12px !important;

    border-radius: 21px !important;
  }


  #app .page:has(.couple-room-head)
  .couple-feature-card
  .couple-feature-icon {
    width: 36px !important;
    height: 36px !important;

    min-width: 36px !important;
    min-height: 36px !important;

    margin-bottom: 9px !important;
  }


  #app .page:has(.couple-room-head)
  .couple-feature-card b {
    font-size: 14.5px !important;
  }


  #app .page:has(.couple-room-head)
  .couple-feature-card small {
    font-size: 9.8px !important;
  }


  #app .page:has(.couple-room-head)
  .couple-next-head {
    margin-top: 19px !important;
  }

}


/* =========================================================
   END NAMI COUPLE HOME — FINAL V1
   ========================================================= */



/* =========================================================
   NAMI WISHES — FINAL V1
   ========================================================= */


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

#app .wishes-v2-head {
  margin-top: 12px !important;
  margin-bottom: 14px !important;
}

#app .wishes-v2-head h1 {
  font-size: 28px !important;
}

#app .wishes-v2-head > .icon-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;

  border-radius: 13px !important;
}

#app .wishes-v2-add {
  height: 36px !important;

  padding: 0 12px !important;

  border-radius: 13px !important;
}


/* ---------------------------------------------------------
   OVERVIEW
   --------------------------------------------------------- */

#app .wishes-v2-overview {
  gap: 8px !important;

  margin-bottom: 10px !important;
}

#app .wishes-v2-overview > div {
  height: 76px !important;
  min-height: 76px !important;

  padding: 10px 12px !important;

  border-radius: 20px !important;
}

#app .wishes-v2-overview > div > small {
  font-size: 8.5px !important;
  line-height: 1 !important;
}

#app .wishes-v2-overview strong {
  font-size: 27px !important;
  line-height: .95 !important;
}

#app .wishes-v2-overview span {
  font-size: 8.5px !important;
}


/* ---------------------------------------------------------
   FILTERS
   --------------------------------------------------------- */

#app .wishes-v2-filters {
  gap: 6px !important;

  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

#app .wishes-v2-filters button {
  min-height: 28px !important;

  padding: 0 9px !important;

  border-radius: 10px !important;

  font-size: 7.6px !important;
}


/* ---------------------------------------------------------
   LIST
   --------------------------------------------------------- */

#app .wishes-v2-list {
  gap: 10px !important;
}


/* ---------------------------------------------------------
   WISH CARD
   --------------------------------------------------------- */

#app .wish-v2-card {
  grid-template-columns:
    84px minmax(0,1fr) !important;

  gap: 10px !important;

  padding: 8px !important;

  border-radius: 20px !important;
}

#app .wish-v2-photo {
  width: 84px !important;
  height: 84px !important;

  border-radius: 16px !important;

  overflow: hidden !important;
}

#app .wish-v2-photo img {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
}

#app .wish-v2-meta {
  margin: 0 0 3px !important;

  font-size: 9px !important;
}

#app .wish-v2-body h3 {
  margin: 0 !important;

  font-size: 14.5px !important;
  line-height: 1.08 !important;
}

#app .wish-v2-body p {
  margin-top: 5px !important;
}

#app .wish-v2-tags {
  gap: 5px !important;

  margin-top: 6px !important;
}

#app .wish-v2-tags span {
  min-height: 19px !important;

  padding: 0 6px !important;

  border-radius: 7px !important;

  font-size: 7.5px !important;
}


/* ---------------------------------------------------------
   ACTIONS
   --------------------------------------------------------- */

#app .wish-v2-actions {
  display: flex !important;
  flex-wrap: wrap !important;

  align-items: center !important;

  gap: 5px !important;

  margin-top: 0 !important;
  padding-top: 6px !important;
}

#app .wish-v2-actions button,
#app .wish-v2-actions a {
  min-height: 30px !important;

  border-radius: 11px !important;
}

#app .wish-v2-actions
.wish-v2-action {
  flex: 1 1 84px !important;

  min-width: 0 !important;
  min-height: 32px !important;

  border-radius: 10px !important;

  font-size: 9px !important;
}

#app .wish-v2-want {
  order: 20 !important;

  flex: 1 0 100% !important;

  min-height: 26px !important;

  margin-top: 0 !important;

  border-radius: 9px !important;

  font-size: 8.5px !important;

  background:
    rgba(128,113,221,.045) !important;

  border:
    1px solid rgba(128,113,221,.08) !important;
}

#app .wish-v2-check,
#app .wish-v2-icon {
  width: 30px !important;
  height: 30px !important;

  min-width: 30px !important;

  flex: 0 0 30px !important;

  padding: 0 !important;

  border-radius: 10px !important;
}

#app .wish-v2-icon.danger {
  margin-left: 0 !important;
}


/* ---------------------------------------------------------
   PHOTO VIEWER
   --------------------------------------------------------- */

html[data-svoi-theme]
#sheetRoot
.sheet.wish-photo-lightbox {
  width: 100vw !important;
  max-width: none !important;

  height: 100dvh !important;
  max-height: 100dvh !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background:
    rgba(12,15,25,.72) !important;

  backdrop-filter:
    blur(24px) saturate(115%) !important;

  -webkit-backdrop-filter:
    blur(24px) saturate(115%) !important;

  box-shadow: none !important;

  overflow: hidden !important;
}


html[data-svoi-theme]
.wish-photo-viewer {
  box-sizing: border-box !important;

  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  padding:
    calc(52px + env(safe-area-inset-top))
    10px
    calc(18px + env(safe-area-inset-bottom))
    !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 10px !important;
}


html[data-svoi-theme]
.wish-photo-viewer > img {
  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width:
    min(95vw, 760px) !important;

  max-height:
    calc(
      100dvh -
      135px -
      env(safe-area-inset-top) -
      env(safe-area-inset-bottom)
    ) !important;

  object-fit: contain !important;

  border-radius: 20px !important;

  background:
    rgba(10,12,20,.38) !important;

  box-shadow:
    0 22px 60px rgba(0,0,0,.28) !important;
}


html[data-svoi-theme]
.wish-photo-viewer-close {
  position: absolute !important;

  top:
    calc(10px + env(safe-area-inset-top))
    !important;

  right: 12px !important;

  z-index: 10 !important;

  width: 38px !important;
  height: 38px !important;

  min-width: 38px !important;
  min-height: 38px !important;

  padding: 0 !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 13px !important;

  color: #fff !important;

  background:
    rgba(29,32,44,.70) !important;

  border:
    1px solid rgba(255,255,255,.15) !important;

  box-shadow:
    0 8px 24px rgba(0,0,0,.16) !important;

  backdrop-filter:
    blur(18px) !important;

  -webkit-backdrop-filter:
    blur(18px) !important;

  font-size: 21px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
}


html[data-svoi-theme]
.wish-photo-viewer-title {
  position: static !important;

  width: auto !important;
  max-width: 82vw !important;

  margin: 0 !important;
  padding: 7px 12px !important;

  border-radius: 999px !important;

  color:
    rgba(255,255,255,.92) !important;

  background:
    rgba(27,30,42,.56) !important;

  border:
    1px solid rgba(255,255,255,.10) !important;

  backdrop-filter:
    blur(14px) !important;

  -webkit-backdrop-filter:
    blur(14px) !important;

  text-align: center !important;

  font-size: 11px !important;
  line-height: 1.2 !important;

  font-weight: 700 !important;
}


/* ---------------------------------------------------------
   DARK / AUTO
   --------------------------------------------------------- */

html[data-svoi-theme="dark"]
#sheetRoot
.sheet.wish-photo-lightbox {
  background:
    rgba(5,8,15,.82) !important;
}

@media (prefers-color-scheme: dark) {

  html[data-svoi-theme="auto"]
  #sheetRoot
  .sheet.wish-photo-lightbox {
    background:
      rgba(5,8,15,.82) !important;
  }

}


/* ---------------------------------------------------------
   SMALL IPHONE
   --------------------------------------------------------- */

@media (max-width: 380px) {

  #app .wishes-v2-overview > div {
    height: 72px !important;
    min-height: 72px !important;
  }

  #app .wish-v2-card {
    grid-template-columns:
      78px minmax(0,1fr) !important;
  }

  #app .wish-v2-photo {
    width: 78px !important;
    height: 78px !important;
  }

  html[data-svoi-theme]
  .wish-photo-viewer > img {
    border-radius: 17px !important;
  }

}


/* =========================================================
   END NAMI WISHES — FINAL V1
   ========================================================= */


/* =========================================================
   NAMI COMPANY — GATHERING GEOMETRY HARD FIX V1
   ========================================================= */

.company-detail {
  box-sizing: border-box !important;

  width: 100% !important;
  max-width: 100% !important;

  min-width: 0 !important;

  overflow: hidden !important;
}


/* ---------------------------------------------------------
   SECTIONS
   --------------------------------------------------------- */

.company-detail .company-gather-hero,
.company-detail .company-gather-answer,
.company-detail .company-gather-people {
  box-sizing: border-box !important;

  width: 100% !important;
  max-width: 100% !important;

  min-width: 0 !important;

  overflow: hidden !important;
}


/* ---------------------------------------------------------
   RESPONSE — 3 КНОПКИ В ОДНУ СТРОКУ
   --------------------------------------------------------- */

.company-detail .company-response-row {
  box-sizing: border-box !important;

  width: 100% !important;
  max-width: 100% !important;

  min-width: 0 !important;

  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap: 7px !important;

  overflow: hidden !important;
}


.company-detail .company-response-row > button {
  box-sizing: border-box !important;

  position: relative !important;

  width: 100% !important;
  max-width: 100% !important;

  min-width: 0 !important;

  min-height: 62px !important;

  margin: 0 !important;

  padding: 9px 5px !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 5px !important;

  overflow: hidden !important;

  white-space: normal !important;
}


.company-detail .company-response-row > button span {
  max-width: 100% !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  white-space: nowrap !important;

  font-size: 11px !important;
}


.company-detail .company-response-row > button b {
  font-size: 17px !important;
  line-height: 1 !important;
}


/* ---------------------------------------------------------
   PEOPLE
   --------------------------------------------------------- */

.company-detail .company-gather-members {
  box-sizing: border-box !important;

  width: 100% !important;
  max-width: 100% !important;

  min-width: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 7px !important;

  overflow: hidden !important;
}


.company-detail .company-gather-member {
  box-sizing: border-box !important;

  width: 100% !important;
  max-width: 100% !important;

  min-width: 0 !important;
  min-height: 54px !important;

  margin: 0 !important;

  padding: 7px 9px !important;

  display: grid !important;

  grid-template-columns:
    40px minmax(0, 1fr) !important;

  align-items: center !important;

  column-gap: 10px !important;

  overflow: hidden !important;
}


/* ---------------------------------------------------------
   AVATAR — НИКОГДА НЕ МОЖЕТ РАЗДУТЬСЯ
   --------------------------------------------------------- */

.company-detail .company-gather-avatar {
  box-sizing: border-box !important;

  width: 40px !important;
  height: 40px !important;

  min-width: 40px !important;
  min-height: 40px !important;

  max-width: 40px !important;
  max-height: 40px !important;

  flex: 0 0 40px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;

  border-radius: 14px !important;
}


.company-detail .company-gather-avatar img {
  display: block !important;

  width: 40px !important;
  height: 40px !important;

  min-width: 40px !important;
  min-height: 40px !important;

  max-width: 40px !important;
  max-height: 40px !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover !important;

  border-radius: inherit !important;
}


/* ---------------------------------------------------------
   MEMBER COPY
   --------------------------------------------------------- */

.company-detail .company-gather-member-copy {
  box-sizing: border-box !important;

  width: 100% !important;

  min-width: 0 !important;

  display: flex !important;

  align-items: center !important;
  justify-content: space-between !important;

  gap: 8px !important;

  overflow: hidden !important;
}


.company-detail .company-gather-member-copy > b {
  min-width: 0 !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  white-space: nowrap !important;
}


.company-detail .company-gather-member-status {
  flex: 0 0 auto !important;

  max-width: 44% !important;

  white-space: nowrap !important;
}


/* ---------------------------------------------------------
   SMALL IPHONE
   --------------------------------------------------------- */

@media (max-width: 390px) {

  .company-detail .company-response-row {
    gap: 5px !important;
  }

  .company-detail .company-response-row > button {
    min-height: 58px !important;

    padding:
      8px 3px !important;
  }

  .company-detail .company-response-row > button span {
    font-size: 10px !important;
  }

}


/* =========================================================
   END NAMI COMPANY — GATHERING GEOMETRY HARD FIX V1
   ========================================================= */


/* =========================================================
   NAMI COMPANY — PREMIUM DETAIL SYSTEM V1
   Activity + Gathering
   ========================================================= */


/* ---------------------------------------------------------
   THEME TOKENS
   --------------------------------------------------------- */

#sheetRoot .sheet:has(.company-detail) {
  --company-sheet-text: #171925;
  --company-sheet-muted: rgba(66,69,88,.50);

  --company-sheet-card:
    rgba(255,255,255,.60);

  --company-sheet-card-strong:
    rgba(255,255,255,.76);

  --company-sheet-border:
    rgba(255,255,255,.82);

  --company-sheet-line:
    rgba(91,94,124,.08);

  --company-sheet-soft:
    rgba(118,105,218,.08);

  --company-sheet-active-a:
    rgba(122,105,224,.18);

  --company-sheet-active-b:
    rgba(100,145,235,.12);

  --company-sheet-accent:
    #7568dc;

  --company-sheet-danger:
    #c96673;
}


/* DARK */

html[data-svoi-theme="dark"]
#sheetRoot .sheet:has(.company-detail) {
  --company-sheet-text:
    rgba(246,247,253,.95);

  --company-sheet-muted:
    rgba(218,221,238,.50);

  --company-sheet-card:
    rgba(24,30,50,.68);

  --company-sheet-card-strong:
    rgba(29,36,60,.82);

  --company-sheet-border:
    rgba(139,148,202,.13);

  --company-sheet-line:
    rgba(142,149,192,.09);

  --company-sheet-soft:
    rgba(125,108,223,.10);

  --company-sheet-active-a:
    rgba(119,99,220,.28);

  --company-sheet-active-b:
    rgba(75,108,182,.18);

  --company-sheet-accent:
    #9b8cf2;

  --company-sheet-danger:
    #df7c88;
}


/* AUTO DARK */

@media (prefers-color-scheme: dark) {

  html[data-svoi-theme="auto"]
  #sheetRoot .sheet:has(.company-detail) {
    --company-sheet-text:
      rgba(246,247,253,.95);

    --company-sheet-muted:
      rgba(218,221,238,.50);

    --company-sheet-card:
      rgba(24,30,50,.68);

    --company-sheet-card-strong:
      rgba(29,36,60,.82);

    --company-sheet-border:
      rgba(139,148,202,.13);

    --company-sheet-line:
      rgba(142,149,192,.09);

    --company-sheet-soft:
      rgba(125,108,223,.10);

    --company-sheet-active-a:
      rgba(119,99,220,.28);

    --company-sheet-active-b:
      rgba(75,108,182,.18);

    --company-sheet-accent:
      #9b8cf2;

    --company-sheet-danger:
      #df7c88;
  }

}


/* ---------------------------------------------------------
   SHEET
   --------------------------------------------------------- */

#sheetRoot .sheet:has(.company-detail) {
  border-radius:
    30px 30px 0 0 !important;

  overflow-x:
    hidden !important;
}


#sheetRoot .sheet:has(.company-detail)
.company-detail {
  width: 100% !important;
  max-width: 100% !important;

  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  gap: 12px !important;

  color:
    var(--company-sheet-text) !important;
}


/* ---------------------------------------------------------
   COMMON GLASS SECTIONS
   --------------------------------------------------------- */

#sheetRoot .company-detail
.company-activity-vote,

#sheetRoot .company-detail
.company-activity-people,

#sheetRoot .company-detail
.company-gather-hero,

#sheetRoot .company-detail
.company-gather-answer,

#sheetRoot .company-detail
.company-gather-people {
  box-sizing: border-box !important;

  width: 100% !important;

  margin: 0 !important;

  padding: 15px !important;

  border:
    1px solid
    var(--company-sheet-border) !important;

  border-radius:
    22px !important;

  background:
    var(--company-sheet-card) !important;

  box-shadow:
    0 14px 36px
    rgba(32,38,76,.07),
    inset 0 1px 0
    rgba(255,255,255,.06) !important;

  backdrop-filter:
    blur(20px)
    saturate(135%) !important;

  -webkit-backdrop-filter:
    blur(20px)
    saturate(135%) !important;

  overflow:
    hidden !important;
}


/* ---------------------------------------------------------
   ACTIVITY STATUS HERO
   --------------------------------------------------------- */

#sheetRoot .company-detail
.company-activity-hero {
  min-height: 0 !important;

  margin: 0 0 2px !important;
  padding: 0 !important;

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  border: 0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;
}


#sheetRoot .company-detail
.company-activity-hero-icon {
  width: 34px !important;
  height: 34px !important;

  min-width: 34px !important;

  display: grid !important;

  place-items:
    center !important;

  border-radius:
    12px !important;

  color:
    var(--company-sheet-accent) !important;

  background:
    var(--company-sheet-soft) !important;
}


#sheetRoot .company-detail
.company-activity-hero-copy {
  min-width: 0 !important;
}


#sheetRoot .company-detail
.company-activity-hero-copy > small,

#sheetRoot .company-detail
.company-activity-hero-copy > h3 {
  display:
    none !important;
}


#sheetRoot .company-detail
.company-activity-hero-copy > p {
  margin: 0 !important;

  padding:
    8px 11px !important;

  border-radius:
    12px !important;

  color:
    var(--company-sheet-text) !important;

  background:
    var(--company-sheet-soft) !important;

  font-size:
    11px !important;

  line-height:
    1 !important;

  font-weight:
    800 !important;
}


/* ---------------------------------------------------------
   SECTION HEADINGS
   --------------------------------------------------------- */

#sheetRoot .company-detail
.company-activity-section-head,

#sheetRoot .company-detail
.company-gather-section-head {
  margin:
    0 0 11px !important;

  display: flex !important;

  align-items:
    flex-end !important;

  justify-content:
    space-between !important;

  gap:
    10px !important;
}


#sheetRoot .company-detail
.company-activity-section-head small,

#sheetRoot .company-detail
.company-gather-section-head small {
  display:
    block !important;

  margin:
    0 0 5px !important;

  color:
    var(--company-sheet-muted) !important;

  font-size:
    8px !important;

  line-height:
    1 !important;

  font-weight:
    850 !important;

  letter-spacing:
    .16em !important;
}


#sheetRoot .company-detail
.company-activity-section-head h3,

#sheetRoot .company-detail
.company-gather-section-head h3 {
  margin:
    0 !important;

  color:
    var(--company-sheet-text) !important;

  font-size:
    17px !important;

  line-height:
    1.08 !important;

  font-weight:
    850 !important;

  letter-spacing:
    -.025em !important;
}


#sheetRoot .company-detail
.company-activity-section-head > strong,

#sheetRoot .company-detail
.company-gather-section-head > strong {
  color:
    var(--company-sheet-accent) !important;

  font-size:
    12px !important;

  font-weight:
    850 !important;
}


/* ---------------------------------------------------------
   ACTIVITY OPTIONS
   --------------------------------------------------------- */

#sheetRoot .company-detail
.company-choice-list {
  width:
    100% !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  gap:
    6px !important;
}


#sheetRoot .company-detail
.company-choice {
  box-sizing:
    border-box !important;

  width:
    100% !important;

  min-height:
    52px !important;

  margin:
    0 !important;

  padding:
    9px 11px !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    10px !important;

  color:
    var(--company-sheet-text) !important;

  border:
    1px solid
    var(--company-sheet-line) !important;

  border-radius:
    15px !important;

  background:
    rgba(255,255,255,.035) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.035) !important;

  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease !important;
}


#sheetRoot .company-detail
.company-choice:active {
  transform:
    scale(.985) !important;
}


#sheetRoot .company-detail
.company-choice.active {
  color:
    var(--company-sheet-text) !important;

  border-color:
    rgba(133,115,230,.24) !important;

  background:
    linear-gradient(
      135deg,
      var(--company-sheet-active-a),
      var(--company-sheet-active-b)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.08),
    0 8px 20px
    rgba(66,55,140,.06) !important;
}


#sheetRoot .company-detail
.company-choice-copy {
  min-width:
    0 !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    flex-start !important;

  gap:
    4px !important;
}


#sheetRoot .company-detail
.company-choice-copy strong {
  max-width:
    100% !important;

  overflow:
    hidden !important;

  text-overflow:
    ellipsis !important;

  white-space:
    nowrap !important;

  font-size:
    13px !important;

  line-height:
    1.1 !important;

  font-weight:
    800 !important;
}


#sheetRoot .company-detail
.company-choice-copy small {
  color:
    var(--company-sheet-muted) !important;

  font-size:
    8.5px !important;

  font-weight:
    650 !important;
}


#sheetRoot .company-detail
.company-choice-count {
  flex:
    0 0 auto !important;

  min-width:
    38px !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    flex-end !important;

  gap:
    6px !important;
}


#sheetRoot .company-detail
.company-choice-count b {
  font-size:
    15px !important;

  line-height:
    1 !important;

  font-weight:
    900 !important;
}


#sheetRoot .company-detail
.company-choice-count svg {
  width:
    22px !important;

  height:
    22px !important;

  padding:
    5px !important;

  border-radius:
    50% !important;

  color:
    #fff !important;

  background:
    linear-gradient(
      145deg,
      #8374eb,
      #7164d9
    ) !important;
}


/* random */

#sheetRoot .company-detail
.company-activity-random {
  min-height:
    40px !important;

  margin:
    9px 0 0 !important;

  border-radius:
    13px !important;
}


/* ---------------------------------------------------------
   PARTICIPANTS — ACTIVITY + GATHERING
   --------------------------------------------------------- */

#sheetRoot .company-detail
.company-activity-members,

#sheetRoot .company-detail
.company-gather-members {
  width:
    100% !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  gap:
    6px !important;
}


#sheetRoot .company-detail
.company-activity-member,

#sheetRoot .company-detail
.company-gather-member {
  box-sizing:
    border-box !important;

  width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    50px !important;

  margin:
    0 !important;

  padding:
    6px 8px !important;

  display:
    grid !important;

  grid-template-columns:
    38px minmax(0,1fr) !important;

  align-items:
    center !important;

  gap:
    9px !important;

  border:
    1px solid
    var(--company-sheet-line) !important;

  border-radius:
    15px !important;

  background:
    rgba(255,255,255,.025) !important;
}


/* avatars */

#sheetRoot .company-detail
.company-activity-avatar,

#sheetRoot .company-detail
.company-gather-avatar {
  width:
    38px !important;

  height:
    38px !important;

  min-width:
    38px !important;

  min-height:
    38px !important;

  max-width:
    38px !important;

  max-height:
    38px !important;

  display:
    grid !important;

  place-items:
    center !important;

  overflow:
    hidden !important;

  border-radius:
    12px !important;

  background:
    var(--company-sheet-soft) !important;
}


#sheetRoot .company-detail
.company-activity-avatar img,

#sheetRoot .company-detail
.company-gather-avatar img {
  display:
    block !important;

  width:
    38px !important;

  height:
    38px !important;

  min-width:
    38px !important;

  min-height:
    38px !important;

  max-width:
    38px !important;

  max-height:
    38px !important;

  object-fit:
    cover !important;

  border-radius:
    inherit !important;
}


/* names + status */

#sheetRoot .company-detail
.company-activity-member-copy,

#sheetRoot .company-detail
.company-gather-member-copy {
  min-width:
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    8px !important;
}


#sheetRoot .company-detail
.company-activity-member-copy > b,

#sheetRoot .company-detail
.company-gather-member-copy > b {
  min-width:
    0 !important;

  overflow:
    hidden !important;

  text-overflow:
    ellipsis !important;

  white-space:
    nowrap !important;

  color:
    var(--company-sheet-text) !important;

  font-size:
    12.5px !important;

  font-weight:
    800 !important;
}


#sheetRoot .company-detail
.company-activity-member-copy > b small,

#sheetRoot .company-detail
.company-gather-member-copy > b small {
  margin-left:
    4px !important;

  color:
    var(--company-sheet-muted) !important;

  font-size:
    8px !important;
}


/* status pills */

#sheetRoot .company-detail
.company-activity-member-choice,

#sheetRoot .company-detail
.company-gather-member-status {
  flex:
    0 0 auto !important;

  max-width:
    47% !important;

  overflow:
    hidden !important;

  text-overflow:
    ellipsis !important;

  white-space:
    nowrap !important;

  padding:
    6px 8px !important;

  border-radius:
    999px !important;

  font-size:
    8.5px !important;

  line-height:
    1 !important;

  font-style:
    normal !important;

  font-weight:
    800 !important;
}


/* ---------------------------------------------------------
   GATHERING RESPONSE
   --------------------------------------------------------- */

#sheetRoot .company-detail
.company-response-row {
  width:
    100% !important;

  display:
    grid !important;

  grid-template-columns:
    repeat(3,minmax(0,1fr)) !important;

  gap:
    6px !important;
}


#sheetRoot .company-detail
.company-response-row > button {
  box-sizing:
    border-box !important;

  width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    58px !important;

  margin:
    0 !important;

  padding:
    8px 4px !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    5px !important;

  color:
    var(--company-sheet-text) !important;

  border:
    1px solid
    var(--company-sheet-line) !important;

  border-radius:
    15px !important;

  background:
    rgba(255,255,255,.025) !important;
}


#sheetRoot .company-detail
.company-response-row > button.active {
  color:
    var(--company-sheet-accent) !important;

  border-color:
    rgba(137,120,232,.24) !important;

  background:
    linear-gradient(
      145deg,
      var(--company-sheet-active-a),
      var(--company-sheet-active-b)
    ) !important;
}


#sheetRoot .company-detail
.company-response-row > button span {
  max-width:
    100% !important;

  overflow:
    hidden !important;

  text-overflow:
    ellipsis !important;

  white-space:
    nowrap !important;

  font-size:
    10px !important;

  font-weight:
    750 !important;
}


#sheetRoot .company-detail
.company-response-row > button b {
  font-size:
    16px !important;

  font-weight:
    900 !important;
}


/* ---------------------------------------------------------
   DELETE
   --------------------------------------------------------- */

#sheetRoot
.company-delete-link {
  width:
    auto !important;

  min-height:
    36px !important;

  margin:
    12px auto 6px !important;

  padding:
    0 14px !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  border:
    1px solid
    rgba(207,91,106,.10) !important;

  border-radius:
    12px !important;

  color:
    var(--company-sheet-danger) !important;

  background:
    rgba(200,84,99,.045) !important;

  font-size:
    10px !important;

  font-weight:
    800 !important;

  opacity:
    .82 !important;
}


/* ---------------------------------------------------------
   SMALL IPHONE
   --------------------------------------------------------- */

@media (max-width:390px) {

  #sheetRoot .company-detail
  .company-activity-vote,

  #sheetRoot .company-detail
  .company-activity-people,

  #sheetRoot .company-detail
  .company-gather-hero,

  #sheetRoot .company-detail
  .company-gather-answer,

  #sheetRoot .company-detail
  .company-gather-people {
    padding:
      13px !important;

    border-radius:
      20px !important;
  }


  #sheetRoot .company-detail
  .company-choice {
    min-height:
      49px !important;

    padding:
      8px 10px !important;
  }


  #sheetRoot .company-detail
  .company-response-row {
    gap:
      5px !important;
  }


  #sheetRoot .company-detail
  .company-response-row > button {
    min-height:
      54px !important;
  }

}


/* =========================================================
   END NAMI COMPANY — PREMIUM DETAIL SYSTEM V1
   ========================================================= */