/* =========================================================================
Razium — тема поверх Bootstrap 5 (миграция с Bulma, 2026-05-30)
Плоский data-first каркас (как hit/PayPhoto): белый фон, hairline-панели,
зелёно-золотая палитра как тонкий слой. Родная сетка/отступы Bootstrap.
========================================================================= */
:root {
--rz-green: #2f8a6a; --rz-green-dark: #246b52; --rz-green-light: #eef5f1;
--rz-gold: #c9a227; --rz-gold-dark: #a8841a; --rz-gold-light: #faf3da;
--rz-blue: #3273dc; --rz-blue-dark: #2366d1;
--rz-red: #e0524f;
--rz-border: #cbd5e1; --rz-title: #363636; --rz-text: #4a4a4a; --rz-grey: #7a7a7a;
/* Bootstrap-переменные темы */
--bs-body-bg: #ffffff;
--bs-body-color: #4a4a4a;
--bs-border-color: #e2e8f0;
--bs-border-radius: .35rem;
--bs-link-color: var(--rz-blue);
--bs-link-hover-color: var(--rz-blue-dark);
}
body { font-family: 'Segoe UI', Roboto, system-ui, sans-serif; font-size: 1rem; }
main { flex: 1 0 auto; }
/* Ссылки без подчёркивания (как было в Bulma; Bootstrap 5 подчёркивает по умолчанию) */
a { text-decoration: none; }
/* Таблицы — строки повыше/комфортнее (даже при table-sm) */
.table > :not(caption) > * > * { padding-top: .6rem; padding-bottom: .6rem; vertical-align: middle; }
/* ===== Типографика — размеры ТОЧНО как в текущей Bulma-теме Razium =====
Bulma $size-scale: is-1=3, is-2=2.5, is-3=2, is-4=1.5, is-5=1.25, is-6=1rem;
.title weight = 600; база = 16px (1rem). Переносим 1:1. */
h1, .h1 { font-size: 2rem; font-weight: 600; color: var(--rz-title); } /* = title.is-3 */
h2, .h2 { font-size: 1.5rem; font-weight: 600; color: var(--rz-title); } /* = title.is-4 */
h3, .h3 { font-size: 1.25rem; font-weight: 600; color: var(--rz-title); } /* = title.is-5 */
h4, .h4 { font-size: 1rem; font-weight: 600; color: var(--rz-title); } /* = title.is-6 */
.page-title { font-size: 2rem; font-weight: 600; color: var(--rz-title); }
.section-title { font-size: 1.25rem; font-weight: 600; color: var(--rz-title); }
.section-title i { color: var(--rz-gold); margin-right: .4rem; }
/* Compat: классы .title/.subtitle Bulma с теми же размерами (если где-то остались несконвертированными) */
.title { font-size: 2rem; font-weight: 600; color: var(--rz-title); line-height: 1.125; margin-bottom: .5rem; }
.title.is-1 { font-size: 3rem; } .title.is-2 { font-size: 2.5rem; } .title.is-3 { font-size: 2rem; }
.title.is-4 { font-size: 1.5rem; } .title.is-5 { font-size: 1.25rem; } .title.is-6 { font-size: 1rem; }
.subtitle { font-size: 1.25rem; font-weight: 400; color: var(--rz-text); }
.subtitle.is-5 { font-size: 1.25rem; } .subtitle.is-6 { font-size: 1rem; } .subtitle.is-7 { font-size: .875rem; }
/* ===== Навбар — плоский белый бар с нижней кромкой (метрики как Bulma) ===== */
.navbar.app-navbar { background: #fff; border-bottom: 1px solid var(--rz-border); min-height: 52px; }
.navbar.app-navbar .navbar-brand { font-size: 1rem; font-weight: 700; color: var(--rz-title); padding: .5rem .75rem; }
.navbar.app-navbar .navbar-brand .fa-camera-retro { color: var(--rz-gold); }
.navbar.app-navbar .nav-link { font-size: 1rem; font-weight: 400; color: var(--rz-title); padding: .5rem .75rem; }
.navbar.app-navbar .nav-link.active,
.navbar.app-navbar .nav-link:hover { color: var(--rz-green-dark); }
.navbar.app-navbar .nav-link.active { background: var(--rz-green-light); border-radius: .3rem; }
.navbar.app-navbar .user-chip { font-size: .82rem; color: var(--rz-grey); background: #f1f3f5; padding: .2rem .6rem; border-radius: .3rem; }
.public-navbar { background: #fff; border-bottom: 1px solid var(--rz-border); min-height: 52px; }
.public-navbar .navbar-brand { font-weight: 700; color: var(--rz-title); }
.public-navbar .navbar-brand .fa-camera-retro { color: var(--rz-gold); }
/* ===== Плоские панели (.box оставлен как утилита-панель; .card — плоский) ===== */
.box {
background: #fff;
border: 1px solid var(--rz-border);
border-radius: 5px;
padding: 1.1rem 1.25rem;
margin-bottom: 1.25rem;
}
.card { border: 1px solid var(--rz-border); box-shadow: none; border-radius: 5px; }
.card .card-header { background: #f7f8fa; border-bottom: 1px solid var(--rz-border); font-weight: 600; }
/* ===== Кнопки — фирменные варианты поверх Bootstrap .btn ===== */
.btn { font-weight: 500; }
.btn-brand { background: rgba(50,118,219,.12); border-color: rgba(50,118,219,.32); color: #2366d1; font-weight:600; }
.btn-brand:hover { background: rgba(50,118,219,.20); border-color: rgba(50,118,219,.45); color: #1b56b8; }
.btn-gold { background: var(--rz-gold); border-color: var(--rz-gold); color: #3a2f06; font-weight: 600; }
.btn-gold:hover { background: var(--rz-gold-dark); border-color: var(--rz-gold-dark); color: #fff; }
.btn-create { background: rgba(50,118,219,.12); border-color: rgba(50,118,219,.32); color: #2366d1; font-weight: 600; }
.btn-create:hover { background: rgba(50,118,219,.20); border-color: rgba(50,118,219,.45); color: #1b56b8; }
.btn-outline-brand { color: var(--rz-green-dark); border-color: var(--rz-green); }
.btn-outline-brand:hover { background: var(--rz-green); color: #fff; }
/* ===== Формы ===== */
.form-control:focus, .form-select:focus {
border-color: var(--rz-green);
box-shadow: 0 0 0 .2rem rgba(47,138,106,.15);
}
.form-label { font-weight: 600; color: var(--rz-title); margin-bottom: .25rem; }
/* Группы полей в форме (бывшие Bulma .columns → .row) без нижнего отступа слипались с кнопкой/след. группой */
form .row:not(:last-child) { margin-bottom: 1rem; }
/* убрать стрелки-степперы у числовых полей */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* ===== Бейджи статусов / прогресс ===== */
.stats-card { background:#fff; border:1px solid var(--rz-border); border-radius:8px; padding:1.2rem 1rem; text-align:center; }
.stats-card .stats-number { font-size:2rem; font-weight:700; color:var(--rz-green); }
.stats-card .stats-label { font-size:.8rem; color:var(--rz-grey); margin-top:.3rem; }
.status-badge { display:inline-block; font-size:.82rem; font-weight:600; border-radius:6px; padding:.25rem .7rem; }
.status-badge.sb-active { background: var(--rz-green); color:#fff; }
.status-badge.sb-done { background: var(--rz-green-dark); color:#fff; }
.status-badge.sb-expired { background:#fc8181; color:#fff; }
.status-badge.sb-count { background:#edf2f7; color:var(--rz-grey); }
/* ===== Карточка проекта/портретчика (плоская) ===== */
.project-card { background:#fff; border:1px solid var(--rz-border); border-radius:5px; overflow:hidden; }
.project-card .card-header { background:#f7f8fa; border-bottom:1px solid var(--rz-border); padding:.7rem 1rem; }
.project-card .card-header.is-completed { background:#eef7f1; }
.project-card .card-header-title { color:var(--rz-title); font-weight:700; font-size:1.05rem; }
.project-card.is-completed { border-color: var(--rz-green); box-shadow: 0 0 0 1px var(--rz-green) inset; }
.project-card.is-open { border-color: var(--rz-blue); box-shadow: 0 0 0 1px var(--rz-blue) inset; }
.project-card .fields-tag { display:inline-block; background:var(--rz-green-light); color:var(--rz-green-dark); border:1px solid #c5e3d6; border-radius:6px; font-size:.82rem; padding:.18rem .55rem; margin:0 .2rem .25rem 0; }
.pc-title { font-weight:700; font-size:1.1rem; }
.pc-title a { color:var(--rz-title); } .pc-title a:hover { color:var(--rz-green-dark); }
.pc-date { font-weight:700; color:#1a202c; white-space:nowrap; }
.project-card .pc-top { display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; padding:.9rem 1.1rem .5rem; }
.project-card .pc-body { padding:0 1.1rem .9rem; }
.pc-badges { display:flex; flex-wrap:wrap; gap:.4rem; }
/* ===== Compat: мелкие Bulma-хелперы (чтобы не плодить правки по шаблонам) ===== */
.is-size-7 { font-size:.82rem !important; }
.is-size-6 { font-size:1rem !important; }
.has-text-grey { color: var(--rz-grey) !important; }
.has-text-grey-light { color:#b5bcc4 !important; }
.has-text-link, .has-text-info { color: var(--rz-blue) !important; }
.has-text-success { color: var(--rz-green) !important; }
.has-text-warning, .has-text-gold { color: var(--rz-gold-dark) !important; }
.has-text-danger { color: var(--rz-red) !important; }
.has-text-weight-bold { font-weight:700 !important; }
.has-text-weight-semibold { font-weight:600 !important; }
.has-text-centered { text-align:center !important; }
.mr-1 { margin-right:.25rem !important; } .mr-2 { margin-right:.5rem !important; } .mr-3 { margin-right:.75rem !important; }
.ml-1 { margin-left:.25rem !important; } .ml-2 { margin-left:.5rem !important; } .ml-3 { margin-left:.75rem !important; }
.icon { display:inline-flex; align-items:center; justify-content:center; }
.icon.is-large { font-size:2rem; }
/* Иконка перед текстом (паттерн Bulma ..текст) — отступ, чтобы не слипалось */
.icon:not(:last-child) { margin-right: .35rem; }
/* ВАЖНО: .is-hidden — JS-переключатель видимости по всему проекту (скрипты тоглят его). Постоянная утилита. */
.is-hidden { display:none !important; }
.is-invisible { visibility:hidden !important; }
/* ===== Upload zone (Photoshoot/Templates) ===== */
.upload-zone { border:2px dashed #c4cdd6; border-radius:10px; cursor:pointer; background:#fafbfc; transition:border-color .2s, background-color .2s; }
.upload-zone:hover, .upload-zone.is-dragover { border-color:var(--rz-green); background:var(--rz-green-light); }
/* ===== Toast ===== */
.notification-toast { position:fixed; top:1rem; right:1rem; z-index:9999; min-width:300px; max-width:500px; animation:slideIn .3s ease; }
@keyframes slideIn { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }
/* ===== Footer ===== */
.rz-foot { background:#edf0f3; color:var(--rz-grey); }
/* ===== Тумблер (вместо галочки) ===== */
.toggle { position:relative; display:inline-block; width:42px; height:22px; vertical-align:middle; flex:0 0 auto; }
.toggle input { opacity:0; width:0; height:0; position:absolute; }
.toggle .slider { position:absolute; cursor:pointer; inset:0; background:#cbd5e0; border-radius:22px; transition:background-color .2s; }
.toggle .slider::before { content:""; position:absolute; height:16px; width:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .2s; }
.toggle input:checked + .slider { background:var(--rz-green); }
.toggle input:checked + .slider::before { transform:translateX(20px); }
.toggle-row { display:flex; align-items:center; gap:.6rem; }
/* ===== Превью фото-строк (view/public) ===== */
.photo-row { background:#fff; border:1px solid var(--rz-border); border-radius:10px; padding:.6rem .8rem; }
.photo-row img { object-fit:cover; border-radius:6px; }
.photo-row .photo-index { color:var(--rz-green); font-weight:600; font-size:.85rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.photo-row .photo-thumb, .photo-row .photo-placeholder { width:min(200px,25vw); height:min(200px,25vw); min-width:80px; min-height:80px; object-fit:cover; border-radius:8px; cursor:pointer; }
.photo-row .photo-placeholder { display:flex; align-items:center; justify-content:center; background:#edf2f7; }
@media screen and (max-width:768px){ .photo-row .photo-thumb, .photo-row .photo-placeholder { width:100px !important; height:100px !important; } }
/* ===== Карусель макета (инлайн, разворотами) ===== */
#layoutCarousel .lc-stage { display:flex; align-items:center; gap:.5rem; }
#layoutCarousel .lc-figure { flex:1 1 auto; margin:0; text-align:center; }
#layoutCarousel .lc-img { max-width:100%; max-height:62vh; border-radius:8px; object-fit:contain; cursor:zoom-in; }
#layoutCarousel .lc-nav { flex:0 0 auto; background:none; border:none; font-size:2rem; line-height:1; color:var(--rz-grey); cursor:pointer; padding:.4rem .6rem; border-radius:8px; }
#layoutCarousel .lc-nav:hover { color:var(--rz-green); background:var(--rz-green-light); }
@media screen and (max-width:600px){ #layoutCarousel .lc-nav { font-size:1.5rem; padding:.2rem .3rem; } }
/* ===== Результат согласования (шаг 3) ===== */
.result-meta { display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; align-items:center; font-size:.92rem; }
.result-meta span { white-space:nowrap; }
.result-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.6rem; }
.result-item { margin:0; }
/* Без letterbox-полос: контейнер = пропорция самой фотографии (2026-07-04). */
.result-item img { width:100%; height:auto; border:1px solid var(--rz-border); border-radius:8px; cursor:zoom-in; display:block; }
.result-item img:hover { border-color:var(--rz-green); }
.result-item figcaption { margin-top:.25rem; text-align:center; font-size:.78rem; color:var(--rz-grey); }
/* ===== Рабочий список фото фотографа (клик = копировать имя) ===== */
.pick-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.8rem; }
.pick-item { margin:0; cursor:pointer; }
.pick-item img { width:100%; height:auto; display:block; background:#fff; border-radius:4px; }
.pick-item:hover img { outline:2px solid var(--rz-green); outline-offset:1px; }
.pick-item.is-copied img { outline:3px solid var(--rz-green); outline-offset:1px; }
.pick-item figcaption { margin-top:.25rem; text-align:center; font-size:.8rem; font-weight:600; color:var(--rz-title); overflow-wrap:anywhere; }
/* ===== Мини-прогресс согласования в списке ===== */
.ac-progress { font-size:.9rem; line-height:1.2; display:inline-block; min-width:90px; }
.ac-bar { height:5px; background:var(--rz-border); border-radius:3px; margin-top:3px; overflow:hidden; }
.ac-bar > span { display:block; height:100%; background:var(--rz-green); border-radius:3px; }
/* ===== Кнопки мессенджеров рядом с телефоном (Telegram/MAX) ===== */
.contact-btn { display:inline-flex; align-items:center; justify-content:center; height:28px; min-width:28px; padding:0 .5rem; margin-left:.4rem; border:1px solid var(--rz-border); border-radius:14px; background:#fff; color:var(--rz-grey); cursor:pointer; font-size:.82rem; font-weight:700; vertical-align:middle; line-height:1; text-decoration:none; }
.contact-btn:hover { border-color:var(--rz-green); color:var(--rz-green-dark); }
.contact-btn.is-tg:hover { color:#229ED9; border-color:#229ED9; }
.contact-btn.is-copied { border-color:var(--rz-green); color:var(--rz-green-dark); }
/* ===== Lightbox (большая перелистываемая галерея) ===== */
.lb { display:none; position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:10050; align-items:center; justify-content:center; user-select:none; touch-action:pan-y; }
.lb.is-open { display:flex; }
.lb-img { max-width:92vw; max-height:88vh; border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,.5); object-fit:contain; }
.lb-btn { position:absolute; color:#fff; cursor:pointer; user-select:none; z-index:10051; opacity:.85; transition:opacity .15s; }
.lb-btn:hover { opacity:1; }
.lb-close { top:.6rem; right:1.1rem; font-size:2.6rem; line-height:1; }
.lb-prev, .lb-next { top:50%; transform:translateY(-50%); font-size:3rem; padding:1rem; }
.lb-prev { left:.4rem; } .lb-next { right:.4rem; }
.lb-counter { position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); color:#fff; font-size:.9rem; background:rgba(0,0,0,.45); border-radius:20px; padding:.25rem .9rem; }
@media screen and (max-width:768px){ .lb-prev,.lb-next { font-size:2.2rem; padding:.5rem; } .lb-close { font-size:2.2rem; } }
/* ===== Шаг 2 мастера: выбор варианта + блоки замены фото ===== */
.option-row { display:flex; align-items:center; gap:.8rem; padding:.7rem 0; border-bottom:1px solid var(--rz-border); }
.option-row:last-of-type { border-bottom:none; }
.option-num { flex:0 0 auto; width:28px; height:28px; border-radius:50%; border:1.5px solid var(--rz-green); color:var(--rz-green-dark); font-weight:700; display:flex; align-items:center; justify-content:center; font-size:.85rem; }
.option-row .option-text { flex:1 1 auto; }
.cp-optionhead { display:flex; align-items:center; justify-content:space-between; gap:.8rem; font-weight:600; }
.cp-grid { display:flex; flex-wrap:wrap; gap:.6rem; }
.cp-block { flex:0 0 auto; width:calc(25% - .45rem); min-width:150px; border:1px solid var(--rz-border); border-radius:8px; padding:.6rem; text-align:center; background:#fff; display:flex; flex-direction:column; gap:.4rem; }
.cp-head { display:flex; flex-direction:column; gap:.1rem; }
.cp-label { font-weight:700; font-size:.85rem; }
.cp-status { font-style:italic; color:var(--rz-grey); font-size:.75rem; }
.cp-preview { display:flex; align-items:center; justify-content:center; }
.cp-img { max-width:100%; max-height:150px; border-radius:6px; object-fit:contain; }
.cp-heic { width:100%; height:120px; background:#a0aec0; color:#fff; border-radius:6px; display:flex; align-items:center; justify-content:center; font-weight:700; }
.cp-actions { display:flex; flex-wrap:wrap; gap:.3rem; justify-content:center; }
@media screen and (max-width:768px){ .cp-block { width:calc(50% - .3rem); min-width:0; } }
/* ===== Пикер фотосессии (модал выбора фото) ===== */
.picker { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:10040; align-items:center; justify-content:center; padding:1rem; }
.picker.is-open { display:flex; }
.picker-card { background:#fff; border-radius:12px; width:min(960px,100%); max-height:88vh; display:flex; flex-direction:column; overflow:hidden; }
.picker-head { display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.2rem; border-bottom:1px solid var(--rz-border); }
.picker-title { font-weight:700; }
.picker-body { padding:1rem 1.2rem; overflow-y:auto; }
.picker-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:.75rem; align-items:start; }
.picker-thumb { margin:0; cursor:pointer; border:3px solid transparent; border-radius:8px; overflow:hidden; background:#f8f6f2; display:flex; align-items:center; justify-content:center; min-height:72px; }
.picker-thumb img { display:block; max-width:100%; width:auto; height:auto; max-height:190px; object-fit:contain; }
.picker-thumb:hover { border-color:var(--rz-green); }
/* Крестик закрытия пикера: тап-зона ≥40px и собственный ✕ (не зависим от Bootstrap .btn-close,
у которого ~24px — мелко для пальца на мобайле). Покрывает пикер согласования и отбора. */
.picker-close { width:40px; height:40px; min-width:40px; padding:0; display:grid; place-items:center;
border:0; background:transparent; border-radius:8px; color:var(--muted); opacity:1; cursor:pointer; }
.picker-close::before { content:'\2715'; font-size:20px; line-height:1; }
.picker-close:hover { background:var(--surface-2, #f3f1ec); color:var(--ink, #1c1a17); }
.selection-picker .picker-head { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:12px; align-items:center; }
.selection-picker .picker-close { justify-self:end; }
.selection-picker .picker-position { color:var(--brand); font-size:13px; font-weight:600; white-space:nowrap; }
.selection-picker .picker-card { width:min(1140px,100%); }
.selection-picker .picker-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.selection-picker .picker-photo-card { display:block; min-height:0; padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--surface); box-shadow:0 2px 8px oklch(0.24 0.04 64 / .06); cursor:default; }
.selection-picker .picker-photo-card:hover { border-color:var(--brand); }
.selection-picker .picker-photo-preview { width:100%; min-height:86px; display:flex; align-items:center; justify-content:center; padding:0; border:0; background:var(--surface-2); border-radius:6px; cursor:zoom-in; overflow:hidden; }
.selection-picker .picker-photo-preview img { display:block; width:auto; max-width:100%; height:auto; max-height:168px; object-fit:contain; }
.selection-picker .picker-photo-name { margin-top:8px; color:var(--ink); font-size:14px; text-align:center; overflow-wrap:anywhere; }
.selection-picker .picker-select { width:100%; margin-top:7px; }
@media screen and (max-width:768px){
.selection-picker .picker-grid { grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:10px; }
.selection-picker .picker-photo-preview img { max-height:142px; }
}
/* ===== Модал одиночного фото (зум) ===== */
.photo-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:10000; align-items:center; justify-content:center; cursor:pointer; }
.photo-modal.is-active { display:flex; }
.photo-modal img { max-width:90vw; max-height:90vh; border-radius:8px; }
/* ===== Save-кнопка (публичный портретчик/мастер) ===== */
.save-btn { background:var(--rz-green); color:#fff; border:none; border-radius:10px; font-weight:700; font-size:1.1rem; padding:.8rem 3rem; }
.save-btn:hover { background:var(--rz-green-dark); color:#fff; }
/* =========================================================================
BULMA COMPAT (переходный слой). Чтобы несконвертированные / вне-таблицы
Bulma-структуры рендерились прилично во время постраничной докрутки.
УДАЛИТЬ после полной зачистки шаблонов на нативный Bootstrap.
========================================================================= */
/* --- Grid --- */
.columns { display:flex; flex-wrap:wrap; margin-left:-.75rem; margin-right:-.75rem; }
.column { flex:1 1 0; padding:.75rem; }
.column.is-narrow { flex:none; }
.column.is-half,.column.is-6 { flex:none; width:50%; }
.column.is-one-third,.column.is-4 { flex:none; width:33.3333%; }
.column.is-two-thirds,.column.is-8 { flex:none; width:66.6666%; }
.column.is-one-quarter,.column.is-3 { flex:none; width:25%; }
.column.is-three-quarters,.column.is-9 { flex:none; width:75%; }
.column.is-5 { flex:none; width:41.6666%; } .column.is-7 { flex:none; width:58.3333%; }
.column.is-full,.column.is-12 { flex:none; width:100%; }
@media (max-width:768px){ .column[class*="is-"]:not(.is-narrow){ width:100%; } }
/* --- Buttons --- */
.button { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.45rem .9rem; border:1px solid var(--rz-border); border-radius:.35rem; background:#fff; color:var(--rz-text); font-weight:500; cursor:pointer; text-decoration:none; line-height:1.2; }
.button:hover { background:#f5f6f8; color:var(--rz-title); }
.button.is-small { font-size:.82rem; padding:.3rem .6rem; } .button.is-fullwidth { width:100%; }
.button.is-primary,.button.is-success { background:var(--rz-green); border-color:var(--rz-green); color:#fff; }
.button.is-link,.button.is-info { background:var(--rz-blue); border-color:var(--rz-blue); color:#fff; }
.button.is-danger { background:var(--rz-red); border-color:var(--rz-red); color:#fff; }
.button.is-warning,.button.is-gold { background:var(--rz-gold); border-color:var(--rz-gold); color:#3a2f06; }
.button.is-light { background:#f0f1f3; color:var(--rz-title); }
.button[disabled],.button.is-static { opacity:.6; pointer-events:none; }
/* JS-состояния, навешиваемые на .btn (тоглы выполнен/вернуть, album-toggle и т.п.) */
.btn.is-success { background:var(--rz-green); border-color:var(--rz-green); color:#fff; }
.btn.is-danger { background:var(--rz-red); border-color:var(--rz-red); color:#fff; }
.btn.is-warning,.btn.is-gold { background:var(--rz-gold); border-color:var(--rz-gold); color:#3a2f06; }
.btn.is-link,.btn.is-info,.btn.is-primary { background:var(--rz-blue); border-color:var(--rz-blue); color:#fff; }
.btn.is-light { background:#f0f1f3; border-color:var(--rz-border); color:var(--rz-title); }
/* --- Forms --- */
.field:not(:last-child) { margin-bottom:1rem; }
.field.is-grouped { display:flex; gap:.5rem; flex-wrap:wrap; }
.field.has-addons { display:flex; }
.label { display:block; font-weight:600; color:var(--rz-title); margin-bottom:.25rem; }
.control.is-expanded { flex:1 1 auto; }
.input,.textarea { display:block; width:100%; padding:.45rem .75rem; border:1px solid #cbd5e0; border-radius:.35rem; background:#fff; color:var(--rz-text); font-size:1rem; line-height:1.4; }
.input:focus,.textarea:focus { outline:none; border-color:var(--rz-green); box-shadow:0 0 0 .2rem rgba(47,138,106,.15); }
.textarea { min-height:6rem; }
.select { display:inline-block; position:relative; } .select.is-fullwidth,.select.is-fullwidth select { width:100%; }
.select select { appearance:none; padding:.45rem 2rem .45rem .75rem; border:1px solid #cbd5e0; border-radius:.35rem; background:#fff; font-size:1rem; width:100%; }
.help { font-size:.82rem; color:var(--rz-grey); margin-top:.2rem; } .help.is-danger { color:var(--rz-red); }
/* --- Tag / notification --- */
.tag:not(.badge) { display:inline-flex; align-items:center; padding:.25em .6em; font-size:.82rem; border-radius:4px; background:#f0f1f3; color:#4a4a4a; }
.tag.is-success { background:#e7f5ee; color:var(--rz-green-dark); } .tag.is-warning { background:var(--rz-gold-light); color:var(--rz-gold-dark); }
.tag.is-danger { background:#fdecec; color:#b53b3b; } .tag.is-info,.tag.is-link { background:#e9f0fb; color:var(--rz-blue-dark); }
.notification { padding:1rem 1.25rem; border-radius:.4rem; background:#f0f1f3; margin-bottom:1rem; }
.notification.is-success { background:#e7f5ee; color:var(--rz-green-dark); } .notification.is-danger { background:#fdecec; color:#b53b3b; }
.notification.is-warning { background:var(--rz-gold-light); color:var(--rz-gold-dark); } .notification.is-info { background:#e9f0fb; color:var(--rz-blue-dark); }
/* --- Level --- */
.level { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; }
.level-left,.level-right { display:flex; align-items:center; gap:.6rem; } .level.is-mobile { flex-wrap:nowrap; }
/* --- Card (Bulma sub-parts поверх Bootstrap .card) --- */
.card-content { padding:1.25rem; }
.card-header-title { padding:.7rem 1rem; font-weight:700; flex-grow:1; display:flex; align-items:center; }
.card-header-icon { padding:.7rem 1rem; }
.card-footer { display:flex; border-top:1px solid var(--rz-border); }
.card-footer-item { flex:1; display:flex; align-items:center; justify-content:center; padding:.6rem; }
.card-footer-item:not(:last-child) { border-right:1px solid var(--rz-border); }
/* --- Breadcrumb (Bulma) --- */
.breadcrumb { font-size:.95rem; margin-bottom:1rem; }
.breadcrumb ul { display:flex; flex-wrap:wrap; list-style:none; padding:0; margin:0; }
.breadcrumb li + li::before { content:"/"; color:#b5bcc4; padding:0 .5rem; }
.breadcrumb a { color:var(--rz-blue); text-decoration:none; } .breadcrumb li.is-active a { color:var(--rz-grey); pointer-events:none; }
/* --- Panel (Bulma) --- */
.panel { border:1px solid var(--rz-border); border-radius:5px; background:#fff; margin-bottom:1.25rem; }
.panel-heading { padding:.6rem 1rem; font-weight:600; background:#f7f8fa; border-bottom:1px solid var(--rz-border); }
.panel-block { display:flex; align-items:center; padding:.5rem 1rem; border-bottom:1px solid var(--rz-border); }
.panel-block:last-child { border-bottom:none; }
/* --- Hero (Bulma) --- */
.hero.is-fullheight { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.hero-body { width:100%; padding:1.5rem; }
/* --- Menu (Bulma) --- */
.menu-label { font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--rz-grey); margin:.8rem 0 .4rem; }
.menu-list { list-style:none; padding:0; margin:0; }
.menu-list a { display:block; padding:.4rem .6rem; border-radius:.3rem; color:var(--rz-text); text-decoration:none; }
.menu-list a:hover { background:#f5f6f8; } .menu-list a.is-active { background:var(--rz-green-light); color:var(--rz-green-dark); }
/* --- has-background-* (Bulma) --- */
.has-background-success { background-color:var(--rz-green) !important; }
.has-background-link,.has-background-info { background-color:var(--rz-blue) !important; }
.has-background-warning { background-color:var(--rz-gold) !important; }
.has-background-danger { background-color:var(--rz-red) !important; }
.has-background-light { background-color:#f5f6f8 !important; }
.has-background-grey-lighter { background-color:#edf0f3 !important; }
.has-text-white { color:#fff !important; }
/* --- Нативный