/* BemBox — theme v2 (warm modern concierge). Активируется только когда на есть класс `theme-v2`. Один шрифт — Nunito (latin+cyrillic, variable). */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('/core/fonts/nunito-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('/core/fonts/nunito-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } body.theme-v2 { --v2-bg: #FFFFFF; --v2-bg-soft: #FBF8F1; --v2-paper: #F0EEE9; --v2-text: #1F1A0E; --v2-text-dim: #6B5A3A; --v2-text-mute: #A89466; --v2-hairline: #E8D9B5; --v2-hairline-soft: #F1E6CA; --v2-accent: #D8521E; --v2-accent-hi: #B8311A; --v2-accent-warm: #C28415; --v2-success: #3F6B5B; --v2-warn: #C28415; --v2-danger: #B8311A; --v2-radius-sm: 8px; --v2-radius: 12px; --v2-radius-lg: 16px; --v2-font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--v2-bg); color: var(--v2-text); font-family: var(--v2-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.theme-v2 a { color: var(--v2-accent); text-decoration: none; } body.theme-v2 a:hover { color: var(--v2-accent-hi); } /* ───────── Header ───────── */ body.theme-v2 .app-header { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; padding: 16px 20px; background: var(--v2-bg); border-bottom: 1px solid var(--v2-hairline); } body.theme-v2 .app-header__brand { grid-column: 1; grid-row: 1; display: inline-flex; align-items: center; gap: 10px; font-family: var(--v2-font); font-weight: 900; font-size: 18px; letter-spacing: -0.4px; color: var(--v2-text); } body.theme-v2 .app-header__brand:hover { color: var(--v2-text); text-decoration: none; } body.theme-v2 .app-header__brand::before { content: "BB"; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1.5px solid var(--v2-text); border-left: 4px solid var(--v2-accent); border-radius: 4px; font-size: 12px; font-weight: 900; letter-spacing: 0.5px; color: var(--v2-text); padding-left: 1px; } body.theme-v2 .app-header__user { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; margin: 0; min-width: 0; } body.theme-v2 .app-header__desktop { align-items: flex-end; gap: 4px; } body.theme-v2 .app-header__nav, body.theme-v2 .app-header__actions { flex-wrap: wrap; justify-content: flex-end; gap: 6px; } body.theme-v2 .app-header__identity { font-family: var(--v2-font); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--v2-text-mute); } body.theme-v2 .app-header .btn { font-family: var(--v2-font); font-weight: 700; font-size: 14px; border-radius: var(--v2-radius-sm); border: 1px solid var(--v2-hairline); background: var(--v2-bg); color: var(--v2-text); min-height: 38px; padding: 6px 14px; box-shadow: none; } body.theme-v2 .app-header .btn:hover { background: var(--v2-bg-soft); border-color: var(--v2-text); } body.theme-v2 .app-header .btn--ghost { border-color: transparent; background: transparent; } body.theme-v2 .app-header .btn--ghost:hover { background: var(--v2-bg-soft); color: var(--v2-text); border-color: transparent; } body.theme-v2 .app-header__menu-toggle { border: 1px solid var(--v2-hairline); border-radius: var(--v2-radius-sm); background: var(--v2-bg); color: var(--v2-text); font-weight: 700; font-family: var(--v2-font); box-shadow: none; min-height: 38px; padding: 6px 12px; } body.theme-v2 .app-header__menu-toggle[aria-expanded="true"] { border-color: var(--v2-text); background: var(--v2-bg-soft); } body.theme-v2 .app-header__menu-panel { border: 1px solid var(--v2-hairline); border-radius: var(--v2-radius); background: var(--v2-bg); box-shadow: 0 16px 40px rgba(31,26,14,.10); } body.theme-v2 .app-header__menu-meta { font-family: var(--v2-font); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--v2-text-mute); } @media (max-width: 640px) { body.theme-v2 .app-header { padding: 14px 16px; gap: 8px; } } /* В shared-ui под max-width:520 меню прижимается к left:0 (наследие старой мобильной раскладки, где toggle был слева). У v2 шапка grid-based и toggle справа — left:0 уводит панель за правый край и даёт горизонтальный скролл. Возвращаем правое выравнивание на всех ширинах. */ body.theme-v2 .app-header__menu-panel { left: auto !important; right: 0 !important; } /* Подстраховка: страховка от случайного горизонтального скролла. */ body.theme-v2 { overflow-x: hidden; } /* ───────── App main width ───────── */ body.theme-v2 .app-main { max-width: 720px; padding: 32px 24px 64px; } @media (max-width: 640px) { body.theme-v2 .app-main { padding: 20px 16px 48px; } } /* ───────── Eyebrow / caps label ───────── */ .v2x-eyebrow { display: inline-block; font-family: var(--v2-font); font-weight: 800; font-size: 12px; line-height: 1.2; letter-spacing: 1.2px; text-transform: uppercase; color: var(--v2-text-mute); } .v2x-eyebrow--accent { color: var(--v2-accent); } .v2x-eyebrow--warm { color: var(--v2-accent-warm); } /* ───────── Display heading ───────── */ .v2x-display { font-family: var(--v2-font); font-weight: 800; font-size: clamp(28px, 6vw, 36px); line-height: 1.05; letter-spacing: -0.6px; color: var(--v2-text); margin: 12px 0 16px; } .v2x-display .v2x-accent { color: var(--v2-accent); } /* ───────── Counter (01 / из ОДНОЙ) ───────── */ .v2x-counter { display: inline-flex; align-items: baseline; gap: 8px; text-align: right; } .v2x-counter__num { font-family: var(--v2-font); font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: -0.4px; color: var(--v2-text); font-variant-numeric: tabular-nums; } .v2x-counter__total { font-family: var(--v2-font); font-weight: 700; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--v2-text-mute); white-space: nowrap; } /* ───────── Intro section ───────── */ .v2x-intro { margin-bottom: 24px; } .v2x-intro__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 4px; } .v2x-intro__lead { margin: 0 0 20px; font-family: var(--v2-font); font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--v2-text-dim); max-width: 56ch; } .v2x-intro__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .v2x-intro__hours { display: inline-flex; align-items: center; gap: 8px; font-family: var(--v2-font); font-size: 13px; font-weight: 600; color: var(--v2-text-dim); } .v2x-intro__hours::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--v2-accent); } /* ───────── Section heads ───────── */ .v2x-section { margin-top: 32px; } .v2x-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--v2-hairline); } .v2x-section__title { margin: 0; font-family: var(--v2-font); font-weight: 800; font-size: clamp(20px, 3.5vw, 24px); line-height: 1.1; letter-spacing: -0.4px; color: var(--v2-text); } .v2x-section__link { font-family: var(--v2-font); font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--v2-accent); white-space: nowrap; } .v2x-section__link:hover { color: var(--v2-accent-hi); } /* ───────── Editorial card with orange left bar ───────── */ .v2x-card { display: block; position: relative; background: var(--v2-bg); border: 1px solid var(--v2-hairline); border-radius: var(--v2-radius); padding: 18px 20px 20px; text-decoration: none; color: inherit; transition: transform .12s, border-color .12s, box-shadow .12s; margin-bottom: 12px; overflow: hidden; } .v2x-card:hover { border-color: var(--v2-text); text-decoration: none; color: inherit; box-shadow: 0 4px 16px rgba(31,26,14,.06); } .v2x-card--accent { position: relative; padding-left: 22px; } .v2x-card--accent::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--v2-accent); } .v2x-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .v2x-card__eyebrow { font-family: var(--v2-font); font-weight: 800; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--v2-text-mute); } .v2x-card__tag { font-family: var(--v2-font); font-weight: 800; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--v2-accent); } .v2x-card__title { font-family: var(--v2-font); font-weight: 700; font-size: clamp(22px, 4vw, 28px); line-height: 1.05; letter-spacing: -0.4px; color: var(--v2-text); margin: 2px 0 6px; } .v2x-card__text { font-family: var(--v2-font); font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--v2-text-dim); margin: 0; } .v2x-card__meta { display: inline-block; margin-top: 10px; font-family: var(--v2-font); font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--v2-text-mute); } /* Top-right open arrow box (↗) */ .v2x-card__arrow { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: 1px solid var(--v2-hairline); border-radius: var(--v2-radius-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--v2-bg); color: var(--v2-text); font-family: var(--v2-font); font-weight: 700; font-size: 14px; line-height: 1; pointer-events: none; transition: background-color .12s, border-color .12s, color .12s, transform .12s; } .v2x-card:hover .v2x-card__arrow { background: var(--v2-text); color: var(--v2-bg); border-color: var(--v2-text); transform: translate(2px, -2px); } /* Smaller card variant for the secondary action grid */ .v2x-card--compact { padding: 14px 16px; margin-bottom: 0; } .v2x-card--compact .v2x-card__title { font-size: 18px; margin: 0; } .v2x-card--compact .v2x-card__text { font-size: 13px; margin-top: 4px; } .v2x-card--compact .v2x-card__arrow { top: 12px; right: 12px; width: 28px; height: 28px; font-size: 13px; } /* ───────── Tile grids ───────── */ .v2x-cards { display: grid; grid-template-columns: 1fr; gap: 10px; } @media (min-width: 640px) { .v2x-cards--2 { grid-template-columns: repeat(2, 1fr); } } /* ───────── Ticket row ───────── */ .v2x-ticket { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; background: var(--v2-bg); border: 1px solid var(--v2-hairline); border-radius: var(--v2-radius); padding: 14px 18px 14px 22px; text-decoration: none; color: inherit; margin-bottom: 8px; transition: border-color .12s, transform .12s, box-shadow .12s; overflow: hidden; } .v2x-ticket::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--v2-accent); } .v2x-ticket:hover { border-color: var(--v2-text); color: inherit; text-decoration: none; box-shadow: 0 4px 16px rgba(31,26,14,.06); } .v2x-ticket__main { min-width: 0; } .v2x-ticket__title { font-family: var(--v2-font); font-weight: 700; font-size: 17px; line-height: 1.15; letter-spacing: -0.3px; color: var(--v2-text); margin: 0 0 3px; } .v2x-ticket__meta { font-family: var(--v2-font); font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--v2-text-mute); } /* ───────── Status pill ───────── */ .v2x-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: 999px; background: var(--v2-bg); border: 1px solid var(--v2-hairline); font-family: var(--v2-font); font-size: 12px; font-weight: 700; color: var(--v2-text); white-space: nowrap; letter-spacing: -0.2px; } .v2x-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--v2-text-dim); } .v2x-status--queued::before { background: var(--v2-accent-warm); } .v2x-status--assigned::before { background: #4F8FB8; } .v2x-status--in_progress::before { background: var(--v2-accent); } .v2x-status--awaiting_client::before { background: #B8961A; } .v2x-status--done::before { background: var(--v2-success); } .v2x-status--cancelled::before, .v2x-status--rejected::before { background: var(--v2-danger); } /* ───────── Buttons ───────── */ .v2x-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--v2-radius-sm); border: 1px solid var(--v2-hairline); background: var(--v2-bg); color: var(--v2-text); font-family: var(--v2-font); font-weight: 800; font-size: 14px; letter-spacing: 0.2px; line-height: 1; cursor: pointer; text-decoration: none; transition: background-color .12s, border-color .12s, color .12s, transform .05s; } .v2x-btn:hover { background: var(--v2-bg-soft); border-color: var(--v2-text); text-decoration: none; } .v2x-btn:active { transform: translateY(1px); } .v2x-btn:disabled { opacity: .5; cursor: not-allowed; } .v2x-btn--primary { background: var(--v2-accent); border-color: var(--v2-accent); color: #fff; } .v2x-btn--primary:hover { background: var(--v2-accent-hi); border-color: var(--v2-accent-hi); color: #fff; } .v2x-btn--ghost { border-color: transparent; background: transparent; color: var(--v2-text); } .v2x-btn--ghost:hover { background: var(--v2-bg-soft); border-color: transparent; } /* ───────── Footer note ───────── */ .v2x-note { margin: 24px 0 0; font-family: var(--v2-font); font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--v2-text-dim); } /* ───────── State blocks ───────── */ .v2x-state { padding: 24px 18px; text-align: center; border: 1px dashed var(--v2-hairline); border-radius: var(--v2-radius); background: var(--v2-bg-soft); font-family: var(--v2-font); font-size: 14px; font-weight: 500; color: var(--v2-text-dim); } .v2x-state--error { border-color: rgba(184,49,26,.40); color: var(--v2-danger); } /* ───────── Tabs (плоский разделитель сверху/снизу + подчёркивание акцентом) ───────── */ .v2x-tabs { display: flex; border-top: 1px solid var(--v2-hairline-soft); border-bottom: 1px solid var(--v2-hairline-soft); margin: 0 0 14px; } .v2x-tab { flex: 1; position: relative; padding: 14px 0 12px; background: transparent; border: 0; cursor: pointer; font: inherit; display: inline-flex; align-items: baseline; justify-content: center; gap: 8px; } .v2x-tab__label { font-family: var(--v2-font); font-weight: 600; font-size: 17px; letter-spacing: -0.2px; color: var(--v2-text-mute); } .v2x-tab__count { font-family: var(--v2-font); font-weight: 700; font-size: 12px; letter-spacing: 0.4px; color: var(--v2-text-mute); font-variant-numeric: tabular-nums; } .v2x-tab--active .v2x-tab__label { color: var(--v2-text); font-weight: 800; } .v2x-tab--active .v2x-tab__count { color: var(--v2-accent); } .v2x-tab--active::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; background: var(--v2-accent); } .v2x-tabdiv { width: 1px; background: var(--v2-hairline-soft); margin: 8px 0; flex-shrink: 0; } /* ───────── Flat card (прямоугольная карточка с оранжевой полосой) ───────── */ .v2x-flatcard { position: relative; border: 1px solid var(--v2-hairline); background: var(--v2-bg); padding: 12px 14px; margin: 14px 0 0; overflow: hidden; } .v2x-flatcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--v2-accent); } .v2x-flatcard__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .v2x-flatcard__eyebrow { font-family: var(--v2-font); font-weight: 700; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--v2-text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; } .v2x-flatcard__tag { font-family: var(--v2-font); font-weight: 700; font-size: 12px; letter-spacing: -0.1px; color: var(--v2-accent); white-space: nowrap; flex-shrink: 0; } .v2x-flatcard__tag--neutral { color: var(--v2-text-dim); } .v2x-flatcard__tag-link { font-family: var(--v2-font); font-weight: 700; font-size: 12px; letter-spacing: -0.1px; color: var(--v2-accent-warm); background: transparent; border: 0; padding: 0; cursor: pointer; white-space: nowrap; flex-shrink: 0; } .v2x-flatcard__tag-link:hover { text-decoration: underline; } .v2x-flatcard__body { font-family: var(--v2-font); font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--v2-text); margin: 0 0 4px; } .v2x-flatcard__meta { font-family: var(--v2-font); font-size: 12px; font-weight: 500; color: var(--v2-text-dim); margin: 6px 0 0; } /* Внутренний sub-block: разделён hairline сверху, тянется во всю ширину карточки */ .v2x-flatcard__inner { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px -14px 0; padding: 10px 14px; border-top: 1px solid var(--v2-hairline); background: transparent; border-left: 0; border-right: 0; border-bottom: 0; width: calc(100% + 28px); cursor: pointer; font: inherit; text-align: left; color: inherit; } .v2x-flatcard__inner:hover { background: var(--v2-bg-soft); } .v2x-flatcard__inner-main { min-width: 0; flex: 1; } .v2x-flatcard__inner-eyebrow { font-family: var(--v2-font); font-weight: 700; font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--v2-text-mute); margin-bottom: 1px; } .v2x-flatcard__inner-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--v2-font); font-weight: 600; font-size: 14px; color: var(--v2-text); } .v2x-flatcard__chip { display: inline-flex; align-items: center; gap: 3px; color: var(--v2-text-mute); font-weight: 700; font-size: 12px; } .v2x-flatcard__chip svg { display: block; } .v2x-flatcard__inner-arrow { width: 28px; height: 28px; border: 1px solid var(--v2-hairline); background: transparent; display: grid; place-items: center; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--v2-text); flex-shrink: 0; } .v2x-flatcard__inner-arrow:hover { background: var(--v2-bg-soft); } /* Ряд действий, продолжающий карточку (общая граница) */ .v2x-flat-actions { display: grid; border: 1px solid var(--v2-hairline); border-top: 0; background: var(--v2-bg); margin: 0; } .v2x-flat-actions--two { grid-template-columns: 1.4fr 1fr; } .v2x-flat-actions--three { grid-template-columns: 1fr 1fr 1fr; } .v2x-flat-action { padding: 11px 6px; background: transparent; border: 0; border-right: 1px solid var(--v2-hairline); font-family: var(--v2-font); font-weight: 800; font-size: 13px; letter-spacing: 0.2px; color: var(--v2-text); cursor: pointer; text-align: center; } .v2x-flat-action:last-child { border-right: 0; } .v2x-flat-action:hover { background: var(--v2-bg-soft); } .v2x-flat-action--warm { color: var(--v2-accent-warm); } .v2x-flat-action--accent { color: var(--v2-accent); } .v2x-flat-action--danger { color: var(--v2-danger); } /* Dashed "+ Добавить ..." с иконкой в квадратике */ .v2x-flat-add { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 14px 0 0; padding: 16px 18px; background: transparent; border: 1px dashed var(--v2-hairline); cursor: pointer; font-family: var(--v2-font); } .v2x-flat-add:hover { border-color: var(--v2-text); } .v2x-flat-add__main { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--v2-text); } .v2x-flat-add__plus { width: 22px; height: 22px; border: 1px solid var(--v2-hairline); display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--v2-text); } .v2x-flat-add__hint { font-family: var(--v2-font); font-weight: 600; font-size: 13px; color: var(--v2-text-mute); } /* ───────── Form fields ───────── */ .v2x-form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .v2x-form-row__label { font-family: var(--v2-font); font-weight: 700; font-size: 12px; letter-spacing: 1.0px; text-transform: uppercase; color: var(--v2-text-mute); } .v2x-form-row__hint { margin-top: 2px; font-family: var(--v2-font); font-size: 12px; font-weight: 500; color: var(--v2-text-dim); line-height: 1.4; } .v2x-input, .v2x-textarea, .v2x-select { width: 100%; min-height: 48px; padding: 12px 14px; background: var(--v2-bg); border: 1px solid var(--v2-hairline); border-radius: 0; color: var(--v2-text); font-family: var(--v2-font); font-size: 15px; font-weight: 500; line-height: 1.4; outline: none; transition: border-color .12s, box-shadow .12s; appearance: none; -webkit-appearance: none; } .v2x-textarea { min-height: 96px; resize: vertical; } .v2x-input:focus, .v2x-textarea:focus, .v2x-select:focus { border-color: var(--v2-accent); box-shadow: 0 0 0 1px var(--v2-accent); } .v2x-input::placeholder, .v2x-textarea::placeholder { color: var(--v2-text-mute); font-weight: 500; } .v2x-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%231F1A0E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-position: right 14px center; background-repeat: no-repeat; background-size: 12px 8px; padding-right: 38px; } /* ───────── Inline tabs (мелкие табы внутри страницы, например Профиль) ───────── */ .v2x-tabs--inline { margin: 0 0 16px; } .v2x-tabs--inline .v2x-tab { padding: 11px 0 9px; } .v2x-tabs--inline .v2x-tab__label { font-size: 14px; } .v2x-tabs--inline .v2x-tab__count { font-size: 11px; } .v2x-tabs--inline .v2x-tab--active::after { left: 12px; right: 12px; } /* ───────── Banner (предупреждения, например out-of-hours) ───────── */ .v2x-banner { display: flex; align-items: flex-start; gap: 10px; background: var(--v2-bg); border: 1px solid var(--v2-hairline); border-left: 3px solid var(--v2-warn); padding: 12px 14px; margin: 0 0 16px; } .v2x-banner__title { font-family: var(--v2-font); font-weight: 800; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--v2-warn); margin-bottom: 4px; } .v2x-banner__text { font-family: var(--v2-font); font-size: 13px; font-weight: 500; color: var(--v2-text); line-height: 1.45; margin: 0; } .v2x-banner--danger { border-left-color: var(--v2-danger); } .v2x-banner--danger .v2x-banner__title { color: var(--v2-danger); } /* ───────── Detail rows (Детали заявки) ───────── */ .v2x-details { border: 1px solid var(--v2-hairline); background: var(--v2-bg); margin: 14px 0 0; } .v2x-details__row { display: grid; grid-template-columns: 140px 1fr; gap: 14px; padding: 11px 14px; border-bottom: 1px solid var(--v2-hairline-soft); } .v2x-details__row:last-child { border-bottom: 0; } .v2x-details__label { font-family: var(--v2-font); font-weight: 700; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--v2-text-mute); align-self: center; } .v2x-details__value { font-family: var(--v2-font); font-size: 14px; font-weight: 500; color: var(--v2-text); line-height: 1.4; word-break: break-word; } @media (max-width: 520px) { .v2x-details__row { grid-template-columns: 1fr; gap: 2px; } } /* ───────── Attachment tiles (фото/видео) ───────── */ .v2x-attach-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; } @media (min-width: 640px) { .v2x-attach-list { grid-template-columns: repeat(6, 1fr); } } .v2x-attach-tile { position: relative; aspect-ratio: 1 / 1; background: var(--v2-paper); border: 1px solid var(--v2-hairline); display: flex; align-items: center; justify-content: center; color: var(--v2-text-mute); font-size: 12px; overflow: hidden; } .v2x-attach-tile img, .v2x-attach-tile video { width: 100%; height: 100%; object-fit: cover; display: block; } .v2x-attach-tile--clickable { cursor: pointer; } .v2x-attach-tile__fallback { padding: 8px; text-align: center; word-break: break-word; } .v2x-attach-tile__del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; background: rgba(31,26,14,.7); color: #fff; cursor: pointer; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; } .v2x-attach-tile__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 28px; text-shadow: 0 2px 6px rgba(0,0,0,.5); pointer-events: none; } .v2x-attach-tile__progress { position: absolute; inset: 0; background: rgba(31,26,14,.45); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff; font-size: 12px; font-weight: 700; } .v2x-attach-tile__progress-bar { width: 70%; height: 4px; background: rgba(255,255,255,.3); overflow: hidden; } .v2x-attach-tile__progress-bar > span { display: block; height: 100%; width: 0%; background: #fff; transition: width .15s linear; } /* Кнопка-добавить файл (плитка с +) */ .v2x-attach-add { aspect-ratio: 1 / 1; border: 1px dashed var(--v2-hairline); background: transparent; color: var(--v2-text); font-family: var(--v2-font); font-weight: 700; font-size: 22px; cursor: pointer; transition: border-color .12s; } .v2x-attach-add:hover { border-color: var(--v2-text); } /* ───────── Rating stars ───────── */ .v2x-rating { display: inline-flex; gap: 6px; } .v2x-rating__star { width: 36px; height: 36px; background: transparent; border: 0; cursor: pointer; padding: 0; font-size: 28px; line-height: 1; color: var(--v2-hairline); transition: color .12s, transform .08s; } .v2x-rating__star:hover { transform: scale(1.05); } .v2x-rating__star--active { color: var(--v2-accent-warm); } /* ───────── Checkbox row ───────── */ .v2x-checkbox-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 8px 0; font-family: var(--v2-font); font-size: 14px; font-weight: 500; color: var(--v2-text); line-height: 1.4; } .v2x-checkbox-row input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border: 1.5px solid var(--v2-hairline); background: var(--v2-bg); cursor: pointer; position: relative; flex-shrink: 0; margin: 0; margin-top: 1px; border-radius: 0; } .v2x-checkbox-row input[type="checkbox"]:checked { background: var(--v2-accent); border-color: var(--v2-accent); } .v2x-checkbox-row input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .v2x-checkbox-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; } /* ───────── Inline link ───────── */ .v2x-link { background: transparent; border: 0; padding: 0; font-family: var(--v2-font); font-weight: 700; font-size: 13px; color: var(--v2-accent); cursor: pointer; } .v2x-link:hover { color: var(--v2-accent-hi); text-decoration: underline; } /* ───────────────────────────────────────────────────────────────────── ПЕРЕОПРЕДЕЛЕНИЯ shared-ui для модалок адресной книги и пр. Структура (классы, разметка) остаётся; меняем только палитру/шрифт/ радиусы/границы, чтобы модалки выглядели в стиле v2. ───────────────────────────────────────────────────────────────────── */ /* base modal */ body.theme-v2 .modal-overlay { background: rgba(31,26,14,.45); } body.theme-v2 .modal { background: var(--v2-bg); border: 1px solid var(--v2-hairline); border-radius: 0; font-family: var(--v2-font); } body.theme-v2 .modal__title { font-family: var(--v2-font); font-weight: 800; font-size: 22px; letter-spacing: -0.4px; color: var(--v2-text); } body.theme-v2 .modal__close { border: 1px solid var(--v2-hairline); border-radius: 0; background: var(--v2-bg); } body.theme-v2 .modal__close:hover { background: var(--v2-bg-soft); } body.theme-v2 .modal__close-icon::before, body.theme-v2 .modal__close-icon::after { background: var(--v2-text); } /* address-label-modal (визард: лейбл / детали / медиа / т.п.) */ body.theme-v2 .address-label-modal__overlay { /* Центрируем по вертикали и оставляем зазор для системного статус-бара и нижней безопасной зоны (viewport-fit=cover в index.html). */ align-items: center; padding-top: max(16px, calc(env(safe-area-inset-top, 0px) + 12px)); padding-bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px)); } @media (max-width: 520px) { body.theme-v2 .address-label-modal__overlay { padding-top: max(12px, calc(env(safe-area-inset-top, 0px) + 8px)); padding-bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 8px)); } } body.theme-v2 .address-label-modal { background: var(--v2-bg); border: 1px solid var(--v2-hairline); border-radius: 0; } /* Визарды (адрес/инструкция) — фиксированная высота, чтобы не прыгало между шагами. Тело визарда внутри скроллится, шапка sticky. */ body.theme-v2 .address-label-modal--wizard { width: min(540px, calc(100vw - 24px)); height: min( 80vh, calc(var(--address-modal-viewport-height, 100vh) - max(48px, calc(env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 32px))) ); max-height: none; } @media (max-width: 520px) { body.theme-v2 .address-label-modal--wizard { width: calc(100vw - 16px); height: min( 85vh, calc(var(--address-modal-viewport-height, 100vh) - max(32px, calc(env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 20px))) ); } } /* Закрывающий крестик в верхнем правом углу — не должен прятаться при скролле тела */ body.theme-v2 .address-label-modal__titlebar { position: sticky; top: 0; z-index: 2; background: var(--v2-bg); padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--v2-hairline-soft); } body.theme-v2 .address-label-modal__title { font-family: var(--v2-font); font-weight: 800; font-size: 20px; letter-spacing: -0.4px; color: var(--v2-text); } body.theme-v2 .address-label-modal--tabbed .address-label-modal__title { font-size: 17px; } body.theme-v2 .address-label-modal__subtitle { font-family: var(--v2-font); font-size: 13px; font-weight: 500; color: var(--v2-text-dim); } body.theme-v2 .address-label-modal__address { background: var(--v2-paper); border-radius: 0; border: 1px solid var(--v2-hairline); font-family: var(--v2-font); color: var(--v2-text); font-size: 13px; font-weight: 500; } body.theme-v2 .address-label-modal__section-title { font-family: var(--v2-font); font-weight: 800; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--v2-text-mute); } body.theme-v2 .address-label-modal__panel-hint { font-family: var(--v2-font); font-size: 13px; font-weight: 500; color: var(--v2-text-dim); } /* steps wizard */ body.theme-v2 .address-label-modal__step { border: 1px solid var(--v2-hairline); border-radius: 0; background: var(--v2-bg); font-family: var(--v2-font); color: var(--v2-text); } body.theme-v2 .address-label-modal__step-num { background: var(--v2-paper); color: var(--v2-text-mute); border-radius: 0; font-family: var(--v2-font); font-weight: 800; } body.theme-v2 .address-label-modal__step-label { font-family: var(--v2-font); font-weight: 700; font-size: 13px; } body.theme-v2 .address-label-modal__step--current { border-color: var(--v2-accent); background: var(--v2-bg); } body.theme-v2 .address-label-modal__step--current .address-label-modal__step-num { background: var(--v2-accent); color: #fff; } body.theme-v2 .address-label-modal__step--done .address-label-modal__step-num { background: rgba(216,82,30,.16); color: var(--v2-accent); } body.theme-v2 .address-label-modal__step--done .address-label-modal__step-label { color: var(--v2-accent); } body.theme-v2 .address-label-modal__step-counter { font-family: var(--v2-font); font-weight: 800; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--v2-text-mute); } /* form fields inside modals */ body.theme-v2 .modal .form-row label, body.theme-v2 .address-label-modal .form-row label { font-family: var(--v2-font); font-weight: 700; font-size: 12px; letter-spacing: 1.0px; text-transform: uppercase; color: var(--v2-text-mute); } body.theme-v2 .modal .input, body.theme-v2 .modal .textarea, body.theme-v2 .modal .select, body.theme-v2 .address-label-modal .input, body.theme-v2 .address-label-modal .textarea, body.theme-v2 .address-label-modal .select { background: var(--v2-bg); border: 1px solid var(--v2-hairline); border-radius: 0; font-family: var(--v2-font); font-weight: 500; color: var(--v2-text); } /* Описание инструкции / multi-line поля внутри модалки — выше и тянущиеся */ body.theme-v2 .address-label-modal .textarea { min-height: 220px; line-height: 1.5; } body.theme-v2 .modal .input:focus, body.theme-v2 .modal .textarea:focus, body.theme-v2 .modal .select:focus, body.theme-v2 .address-label-modal .input:focus, body.theme-v2 .address-label-modal .textarea:focus, body.theme-v2 .address-label-modal .select:focus { border-color: var(--v2-accent); box-shadow: 0 0 0 1px var(--v2-accent); outline: none; } /* buttons inside modals */ body.theme-v2 .modal .btn, body.theme-v2 .address-label-modal .btn { font-family: var(--v2-font); font-weight: 800; font-size: 14px; letter-spacing: 0.2px; border-radius: 0; border: 1px solid var(--v2-hairline); background: var(--v2-bg); color: var(--v2-text); box-shadow: none; } body.theme-v2 .modal .btn:hover, body.theme-v2 .address-label-modal .btn:hover { background: var(--v2-bg-soft); border-color: var(--v2-text); } body.theme-v2 .modal .btn--primary, body.theme-v2 .address-label-modal .btn--primary { background: var(--v2-accent); border-color: var(--v2-accent); color: #fff; } body.theme-v2 .modal .btn--primary:hover, body.theme-v2 .address-label-modal .btn--primary:hover { background: var(--v2-accent-hi); border-color: var(--v2-accent-hi); color: #fff; } body.theme-v2 .modal .btn--ghost, body.theme-v2 .address-label-modal .btn--ghost { border-color: transparent; background: transparent; color: var(--v2-text); } /* Чёткое визуальное состояние disabled — иначе primary-orange выглядит почти активным даже при opacity .5. */ body.theme-v2 .modal .btn:disabled, body.theme-v2 .address-label-modal .btn:disabled, body.theme-v2 .modal .btn--primary:disabled, body.theme-v2 .address-label-modal .btn--primary:disabled { background: var(--v2-paper); border-color: var(--v2-hairline); color: var(--v2-text-mute); opacity: 1; cursor: not-allowed; } body.theme-v2 .modal .btn--ghost:hover, body.theme-v2 .address-label-modal .btn--ghost:hover { background: var(--v2-bg-soft); border-color: transparent; } body.theme-v2 .modal .btn--danger, body.theme-v2 .address-label-modal .btn--danger { background: var(--v2-danger); border-color: var(--v2-danger); color: #fff; } /* choice chips (Дом / Работа / Другое) */ body.theme-v2 .choice-chip { border: 1px solid var(--v2-hairline); border-radius: 0; background: var(--v2-bg); color: var(--v2-text); font-family: var(--v2-font); font-weight: 700; font-size: 13px; } body.theme-v2 .choice-chip:hover { background: var(--v2-bg-soft); border-color: var(--v2-text); } /* segmented control (Дом / Квартира) */ body.theme-v2 .segmented-control { border: 1px solid var(--v2-hairline); border-radius: 0; background: var(--v2-paper); } body.theme-v2 .segmented-control__option { border-radius: 0; font-family: var(--v2-font); font-weight: 800; font-size: 13px; color: var(--v2-text-mute); } body.theme-v2 .segmented-control__option--active { background: var(--v2-bg); color: var(--v2-accent); box-shadow: 0 1px 3px rgba(31,26,14,.10); } body.theme-v2 .segmented-control__option:focus-visible { outline: 2px solid var(--v2-accent); } /* attach tiles (фото/видео внутри модалки) */ body.theme-v2 .attach-tile { background: var(--v2-paper); border: 1px solid var(--v2-hairline); border-radius: 0; color: var(--v2-text-mute); font-family: var(--v2-font); } body.theme-v2 .attach-tile__del { border-radius: 0; background: rgba(31,26,14,.7); } /* address-picker (карта в модалке выбора адреса) */ body.theme-v2 .modal--address-book { background: var(--v2-text); border-radius: 0; border: 1px solid var(--v2-text); } body.theme-v2 .address-picker { background: var(--v2-text); } body.theme-v2 .address-picker__current-panel { background: rgba(31,26,14,.78); border-radius: 0; font-family: var(--v2-font); } body.theme-v2 .address-picker__current-label { font-family: var(--v2-font); font-weight: 800; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; } body.theme-v2 .address-picker__current-value { font-family: var(--v2-font); font-weight: 700; } body.theme-v2 .address-picker__current-meta { font-family: var(--v2-font); font-weight: 500; } body.theme-v2 .address-picker__icon-btn { border-radius: 0; box-shadow: 0 8px 24px rgba(31,26,14,.30); } body.theme-v2 .address-picker__icon-btn--dark { background: rgba(31,26,14,.86); } body.theme-v2 .address-picker__icon-btn--light { background: var(--v2-bg); } body.theme-v2 .address-picker__sheet-actions .btn--primary { border-radius: 0; font-family: var(--v2-font); font-weight: 800; background: var(--v2-accent); border-color: var(--v2-accent); box-shadow: 0 14px 30px rgba(31,26,14,.30); } body.theme-v2 .address-search { background: var(--v2-bg); font-family: var(--v2-font); } body.theme-v2 .address-search__field .input { border-radius: 0; font-family: var(--v2-font); font-weight: 500; border: 1px solid var(--v2-hairline); background: var(--v2-bg); box-shadow: none; } body.theme-v2 .address-search__back-btn.btn--ghost { border-radius: 0; border: 1px solid var(--v2-hairline); background: var(--v2-bg); font-family: var(--v2-font); font-weight: 800; box-shadow: none; } body.theme-v2 .address-search__current { background: var(--v2-paper); border: 1px solid var(--v2-hairline); border-radius: 0; font-family: var(--v2-font); } body.theme-v2 .address-search__meta { font-family: var(--v2-font); color: var(--v2-text-dim); } /* address suggest dropdown */ body.theme-v2 .addr-suggest { border: 1px solid var(--v2-hairline); border-radius: 0; background: var(--v2-bg); font-family: var(--v2-font); } body.theme-v2 .addr-suggest__item { font-family: var(--v2-font); font-weight: 500; color: var(--v2-text); border-bottom: 1px solid var(--v2-hairline-soft); } body.theme-v2 .addr-suggest__item:hover, body.theme-v2 .addr-suggest__item--active { background: var(--v2-bg-soft); } body.theme-v2 .addr-suggest__status { font-family: var(--v2-font); color: var(--v2-text-dim); } /* saved-address-card (в списках внутри модалок: picker инструкции, attach-modal, delete-confirm) */ body.theme-v2 .saved-address-card { border: 1px solid var(--v2-hairline); border-radius: 0; background: var(--v2-bg); font-family: var(--v2-font); padding: 12px 14px; box-shadow: none; } body.theme-v2 .saved-address-card__title { font-family: var(--v2-font); font-weight: 800; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--v2-text-mute); } body.theme-v2 .saved-address-card__value { font-family: var(--v2-font); font-weight: 500; color: var(--v2-text); } body.theme-v2 .saved-address-card__meta { font-family: var(--v2-font); color: var(--v2-text-dim); } body.theme-v2 .saved-address-card--active { border-color: var(--v2-accent); box-shadow: 0 0 0 2px rgba(216,82,30,.14); } /* badges */ body.theme-v2 .badge { border-radius: 0; font-family: var(--v2-font); font-weight: 800; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; background: var(--v2-paper); color: var(--v2-text); } body.theme-v2 .badge--ok { background: var(--v2-bg); color: var(--v2-success); border: 1px solid var(--v2-success); } body.theme-v2 .badge--danger { background: var(--v2-bg); color: var(--v2-danger); border: 1px solid var(--v2-danger); } /* delete-address-modal options */ body.theme-v2 .delete-address-modal__opt { border: 1px solid var(--v2-hairline); border-radius: 0; font-family: var(--v2-font); font-weight: 500; background: var(--v2-bg); } body.theme-v2 .delete-address-modal__opt:hover { border-color: var(--v2-text); } /* training cards (визард обучения, если используется) */ body.theme-v2 .training-card { border: 1px solid var(--v2-hairline); border-radius: 0; background: var(--v2-bg); font-family: var(--v2-font); } body.theme-v2 .training-card__title { font-family: var(--v2-font); font-weight: 700; font-size: 14px; } body.theme-v2 .training-card__hint { font-family: var(--v2-font); color: var(--v2-text-dim); } body.theme-v2 .training-card--checked { border-color: var(--v2-accent); background: rgba(216,82,30,.05); } body.theme-v2 .training-card--checked .training-card__indicator { background: var(--v2-accent); border-color: var(--v2-accent); } body.theme-v2 .training-card__help { border-radius: 0; border: 1px solid var(--v2-hairline); font-family: var(--v2-font); font-weight: 800; } /* voice recorder */ body.theme-v2 .voice-recorder__tile { border: 1px solid var(--v2-hairline); border-radius: 0; background: var(--v2-bg); font-family: var(--v2-font); } body.theme-v2 .voice-recorder__btn { border-radius: 0; border: 1px solid var(--v2-hairline); background: var(--v2-bg); font-family: var(--v2-font); font-weight: 800; } body.theme-v2 .voice-recorder__btn--record { border-color: var(--v2-accent); color: var(--v2-accent); } body.theme-v2 .voice-recorder__btn--stop { background: var(--v2-danger); border-color: var(--v2-danger); color: #fff; } /* toast */ body.theme-v2 .toast { font-family: var(--v2-font); font-weight: 700; border-radius: 0; background: var(--v2-text); color: var(--v2-bg); } body.theme-v2 .toast--error { background: var(--v2-danger); } body.theme-v2 .toast--ok { background: var(--v2-success); } /* lightbox */ body.theme-v2 .lightbox-overlay { background: rgba(31,26,14,.92); } body.theme-v2 .lightbox__close { border-radius: 0; background: rgba(31,26,14,.7); font-family: var(--v2-font); } /* leaflet zoom — выровнять под тему */ body.theme-v2 .modal--address-book .leaflet-control-zoom { border-radius: 0; box-shadow: 0 10px 26px rgba(31,26,14,.30); } body.theme-v2 .modal--address-book .leaflet-control-zoom a { background: var(--v2-bg); color: var(--v2-text); border-color: var(--v2-hairline); } /* Простой H1 для табочной страницы */ .v2x-pagetitle { margin: 14px 0 16px; font-family: var(--v2-font); font-weight: 700; font-size: 26px; letter-spacing: -0.6px; line-height: 1.1; color: var(--v2-text); } /* ───────── Sub-card (вложенная карточка инструкции внутри карточки адреса) ───────── */ .v2x-subcard { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; width: 100%; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--v2-hairline); border-radius: var(--v2-radius-sm); background: var(--v2-bg); color: inherit; text-align: left; font: inherit; cursor: pointer; transition: border-color .12s, background-color .12s; } .v2x-subcard:hover { border-color: var(--v2-text); background: var(--v2-bg-soft); } .v2x-subcard__main { min-width: 0; } .v2x-subcard__eyebrow { display: block; font-family: var(--v2-font); font-weight: 800; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--v2-text-mute); margin-bottom: 2px; } .v2x-subcard__title { display: block; font-family: var(--v2-font); font-weight: 700; font-size: 14px; letter-spacing: -0.2px; color: var(--v2-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v2x-subcard__arrow { width: 30px; height: 30px; border: 1px solid var(--v2-hairline); border-radius: var(--v2-radius-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--v2-bg); color: var(--v2-text); font-size: 13px; font-weight: 700; flex-shrink: 0; } /* ───────── Card actions row (Изменить / Удалить ...) ───────── */ .v2x-card__actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 14px; border: 1px solid var(--v2-hairline); border-radius: var(--v2-radius-sm); overflow: hidden; background: var(--v2-bg); } .v2x-card-action { padding: 11px 8px; background: transparent; border: 0; border-right: 1px solid var(--v2-hairline); font-family: var(--v2-font); font-weight: 800; font-size: 13px; letter-spacing: 0.2px; color: var(--v2-text); cursor: pointer; transition: background-color .12s; } .v2x-card-action:last-child { border-right: 0; } .v2x-card-action:hover { background: var(--v2-bg-soft); } .v2x-card-action--accent { color: var(--v2-accent); } .v2x-card-action--accent:hover { background: rgba(216,82,30,.06); } .v2x-card-action--danger { color: var(--v2-danger); } .v2x-card-action--danger:hover { background: rgba(184,49,26,.06); } /* ───────── Instruction row (с буквенной монограммой) ───────── */ .v2x-instr { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; background: var(--v2-bg); border: 1px solid var(--v2-hairline); border-radius: var(--v2-radius); padding: 14px 18px 14px 14px; text-decoration: none; color: inherit; margin-bottom: 8px; cursor: pointer; transition: border-color .12s, box-shadow .12s; width: 100%; text-align: left; font: inherit; } .v2x-instr:hover { border-color: var(--v2-text); text-decoration: none; color: inherit; box-shadow: 0 4px 16px rgba(31,26,14,.06); } .v2x-instr__monogram { width: 40px; height: 40px; border: 1.5px solid var(--v2-text); border-left: 4px solid var(--v2-accent); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: var(--v2-font); font-weight: 900; font-size: 14px; color: var(--v2-text); flex-shrink: 0; padding-left: 1px; } .v2x-instr__main { min-width: 0; } .v2x-instr__title { font-family: var(--v2-font); font-weight: 700; font-size: 16px; letter-spacing: -0.3px; color: var(--v2-text); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2x-instr__meta { font-family: var(--v2-font); font-size: 12px; font-weight: 600; color: var(--v2-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2x-instr__arrow { width: 32px; height: 32px; border: 1px solid var(--v2-hairline); border-radius: var(--v2-radius-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--v2-bg); color: var(--v2-text); font-size: 14px; font-weight: 700; flex-shrink: 0; } /* ───────── Inline orange "+ ..." ссылка ───────── */ .v2x-add-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 4px; background: transparent; border: 0; font-family: var(--v2-font); font-weight: 800; font-size: 14px; letter-spacing: 0.2px; color: var(--v2-accent); cursor: pointer; } .v2x-add-link:hover { color: var(--v2-accent-hi); } /* ───────── Add-card (dashed CTA) ───────── */ .v2x-add-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border: 1px dashed var(--v2-hairline); border-radius: var(--v2-radius); background: transparent; color: var(--v2-text); text-decoration: none; font-family: var(--v2-font); font-size: 14px; font-weight: 800; cursor: pointer; } .v2x-add-card:hover { border-color: var(--v2-text); color: var(--v2-text); text-decoration: none; } .v2x-add-card__hint { font-family: var(--v2-font); font-weight: 600; font-size: 12px; color: var(--v2-text-mute); }