/* ========================================================================== */
/* DEMO ELEMENTS — КАРТА СЕКЦІЙ                                                */
/* 01. Базова область сторінки та доступність                                  */
/* 02. Hero реєстру додаткових полів                                           */
/* 03. Реєстр полів: вкладки, панелі та заголовки                              */
/* 04. Картки додаткових полів                                                  */
/* 05. Порожній стан реєстру                                                    */
/* 06. Hero керування переадресаціями                                           */
/* 07. Картка конфігурації переадресацій                                        */
/* 08. Панель груп користувачів                                                 */
/* 09. Картка основних налаштувань                                              */
/* 10. Warning-картка параметрів виводу                                         */
/* 11. Адаптивність і зменшення руху                                            */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 01. БАЗОВА ОБЛАСТЬ СТОРІНКИ ТА ДОСТУПНІСТЬ                                  */
/* -------------------------------------------------------------------------- */
.fields-demo {color: var(--text);}
.fields-demo :where(a, button):focus-visible {outline: 2px solid var(--c-biruz); outline-offset: 3px; box-shadow: 0 0 0 4px var(--accent-glow);}
.fields-demo__intro {margin-bottom: var(--gap);}
.fields-demo__intro .page-desc {margin-bottom: 0;}

/* -------------------------------------------------------------------------- */
/* 02. HERO РЕЄСТРУ ДОДАТКОВИХ ПОЛІВ                                           */
/* -------------------------------------------------------------------------- */
.fields-hero {position: relative; display: flex; align-items: center; gap: var(--gap); margin-bottom: var(--gap); padding: var(--gapb1) var(--gap); overflow: hidden; border: 1px solid var(--br-biruz); border-left: 4px solid var(--c-biruz); border-radius: 16px 0 16px 0; corner-shape: bevel; background: var(--bg-glass-white); box-shadow: var(--shadow-big);}
.fields-hero::after {content: ""; position: absolute; top: 0; right: 0; width: 100px; height: 2px; background: var(--c-biruz); box-shadow: 0 0 14px var(--accent-glow);}
.fields-hero > * {position: relative; z-index: 1;}
.fields-hero__corner {position: absolute; right: 8px; bottom: 8px; width: 18px; height: 18px; border-right: 2px solid var(--br-blue); border-bottom: 2px solid var(--br-blue); pointer-events: none;}
.fields-hero__mark {position: relative; display: flex; flex: 0 0 64px; width: 64px; height: 64px; align-items: center; justify-content: center; border: 1px solid var(--br-biruz); border-radius: 10px 0; corner-shape: bevel; background: var(--bg-glass-biruz); box-shadow: inset 0 0 18px var(--accent-glow), 0 0 20px var(--accent-glow);}
.fields-hero__mark::before {content: ""; position: absolute; inset: 7px; border: 1px dashed var(--br-biruz); border-radius: 7px 0;}
.fields-hero__mark .icon {width: 30px; height: 30px; color: var(--c-biruz); filter: drop-shadow(0 0 7px var(--accent-glow));}
.fields-status-dot {position: absolute; right: 5px; bottom: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 9px var(--c-green);}
.fields-hero__copy {display: flex; flex: 1 1 330px; min-width: 220px; flex-direction: column; gap: var(--gapm5);}
.fields-eyebrow {color: var(--c-biruz); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;}
.fields-hero__copy h1 {margin: 0; font-size: clamp(24px, 3vw, 38px); line-height: 1.08; letter-spacing: .5px; text-transform: uppercase;}
.fields-hero__copy p {max-width: 650px; margin: 0; color: var(--text-dark); font-size: 13px; line-height: 1.55;}
.fields-hero__metrics {flex: 0 1 300px; gap: var(--gapm3);}
.fields-metric {display: flex; min-width: 80px; flex-direction: column; gap: var(--gapm6); padding: var(--gapm3) var(--gapm2); border: 1px solid var(--br-biruz); border-radius: 6px 0; corner-shape: bevel; background: var(--bg-glass-biruz);}
.fields-metric small {color: var(--text-dark); font-size: 11px; letter-spacing: 1px;}
.fields-metric strong {color: var(--c-biruz); font-size: 18px; line-height: 1; text-shadow: 0 0 8px var(--accent-glow);}
.fields-metric--purple {border-color: var(--c-purple-40); background: var(--c-purple-10);}
.fields-metric--purple strong {color: var(--c-purple);}
.fields-hero__actions {display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: var(--gapm3);}
.fields-online {display: inline-flex; align-items: center; gap: var(--gapm4); color: var(--c-green); font-size: 11px; font-weight: 700; letter-spacing: 1px;}
.fields-online::before {content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 8px var(--c-green);}
.fields-create-btn {display: inline-flex; min-height: 42px; align-items: center; gap: var(--gapm3); padding: var(--gapm3) var(--gapm2); border: 1px solid var(--c-green-60); border-radius: 6px 0; corner-shape: bevel; background: var(--c-green-10); color: var(--c-green); font-size: 11px; font-weight: 700; letter-spacing: 1px; cursor: pointer; text-decoration: none; text-transform: uppercase; transition: transform .2s, box-shadow .2s, background .2s;}
.fields-create-btn:hover {background: var(--c-green-20); box-shadow: 0 0 18px var(--c-green-20); transform: translateY(-1px);}
.fields-create-btn .icon {width: 17px; height: 17px;}
.fields-create-btn b {display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-left: 1px solid var(--c-green-40); font-size: 18px;}

/* -------------------------------------------------------------------------- */
/* 03. РЕЄСТР ПОЛІВ: ВКЛАДКИ, ПАНЕЛІ ТА ЗАГОЛОВКИ                              */
/* -------------------------------------------------------------------------- */
.fields-registry {position: relative; overflow: hidden; margin-bottom: var(--gap); border: 1px solid var(--br-gray); border-left: 3px solid var(--c-biruz); border-radius: 14px 0; corner-shape: bevel; background: var(--bg-glass-white); box-shadow: var(--shadow-2);}
.fields-tabs__list {gap: 0; border-bottom: 1px solid var(--br-biruz); background: var(--bg-glass-biruz);}
.fields-tab {position: relative; display: flex; min-height: 64px; align-items: center; gap: var(--gapm2); padding: var(--gapm2) var(--gap); border: 0; border-right: 1px solid var(--br-biruz); border-bottom: 2px solid transparent; background: transparent; color: var(--text-dark); text-align: left; cursor: pointer;}
.fields-tab::after {content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--c-biruz); box-shadow: 0 0 10px var(--accent-glow); opacity: 0; transform: scaleX(.35); transition: opacity .2s, transform .2s;}
.fields-tab:hover {background: var(--bg-glass-blue); color: var(--c-blue);}
.fields-tab[aria-selected="true"] {background: var(--bg-glass-biruz); color: var(--c-biruz);}
.fields-tab[aria-selected="true"]::after {opacity: 1; transform: scaleX(1);}
.fields-tab > .icon {flex: 0 0 22px; width: 22px; height: 22px; filter: drop-shadow(0 0 5px var(--accent-glow));}
.fields-tab__copy {display: flex; flex: 1; min-width: 0; flex-direction: column; gap: var(--gapm6);}
.fields-tab__copy small {color: var(--text-dark); font-size: 11px; letter-spacing: 1px;}
.fields-tab__copy strong {overflow: hidden; font-size: 12px; letter-spacing: .7px; text-overflow: ellipsis; white-space: nowrap;}
.fields-tab__count {display: inline-flex; min-width: 30px; height: 24px; align-items: center; justify-content: center; padding: 0 var(--gapm4); border: 1px solid var(--br-biruz); border-radius: 4px 0; background: var(--bg-glass-biruz); color: var(--c-biruz); font-size: 11px;}
.fields-tab-panel {padding: var(--gap);}
.fields-tab-panel[hidden] {display: none;}
.fields-panel-heading {display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap); margin-bottom: var(--gapm1); padding: 0 0 var(--gapm2); border-bottom: 1px dashed var(--br-biruz);}
.fields-panel-heading__title {display: flex; flex-direction: column; gap: var(--gapm6);}
.fields-panel-heading span {color: var(--c-biruz); font-size: 11px; letter-spacing: 1.6px;}
.fields-panel-heading h2 {margin: 0; font-size: 19px; letter-spacing: .6px; text-transform: uppercase;}
.fields-panel-heading p {max-width: 460px; margin: 0; color: var(--text-dark); font-size: 12px; text-align: right;}

/* -------------------------------------------------------------------------- */
/* 04. КАРТКИ ДОДАТКОВИХ ПОЛІВ                                                 */
/* -------------------------------------------------------------------------- */
.field-list {display: flex; flex-direction: column; gap: var(--gapm1);}
.field-item {position: relative; display: flex; min-height: 112px; align-items: stretch; overflow: hidden; border: 1px solid var(--br-gray); border-left: 3px solid var(--br-biruz); border-radius: 9px 0; corner-shape: bevel; background: var(--panel-bg); box-shadow: var(--shadow-1); transition: transform .2s, border-color .2s, box-shadow .2s;}
.field-item::after {content: ""; position: absolute; top: 0; left: 0; width: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--c-biruz), transparent); box-shadow: 0 0 7px var(--c-biruz); transition: width .3s;}
.field-item:hover {border-color: var(--br-biruz); box-shadow: var(--shadow-2); transform: translateY(-2px);}
.field-item:hover::after {width: 100%;}
.field-item > * {position: relative; z-index: 1;}
.field-index {display: flex; flex: 0 0 74px; flex-direction: column; align-items: center; justify-content: center; gap: var(--gapm5); border-right: 1px solid var(--br-biruz); background: var(--bg-glass-biruz);}
.field-index span {color: var(--text-dark); font-size: 11px; letter-spacing: 1px;}
.field-index strong {color: var(--c-biruz); font-size: 13px;}
.field-main {display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; justify-content: center; gap: var(--gapm1); padding: var(--gapm1) var(--gap);}
.field-header {display: flex; align-items: center; gap: var(--gapm2); flex-wrap: wrap;}
.field-symbol {display: inline-flex; flex: 0 0 38px; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid var(--br-biruz); border-radius: 6px 0; background: var(--bg-glass-biruz);}
.field-symbol .icon {width: 18px; height: 18px; color: var(--c-biruz);}
.field-heading {display: flex; flex: 1 1 230px; min-width: 180px; flex-direction: column; gap: var(--gapm7);}
.field-kicker {color: var(--text-dark); font-size: 11px; letter-spacing: 1px;}
.field-title {overflow: hidden; color: var(--text); font-size: 15px; font-weight: 700; line-height: 1.35; text-decoration: none; text-overflow: ellipsis;}
.field-title:hover {color: var(--c-biruz); text-shadow: 0 0 8px var(--accent-glow);}
.field-badges {display: flex; align-items: center; justify-content: flex-end; gap: var(--gapm4); flex-wrap: wrap;}
.field-badge {display: inline-flex; min-height: 23px; align-items: center; padding: var(--gapm6) var(--gapm4); border: 1px solid var(--br-biruz); border-radius: 4px 0; background: var(--bg-glass-biruz); color: var(--c-biruz); font-size: 11px; text-transform: uppercase; white-space: nowrap;}
.field-badge--category {border-color: var(--c-yellow-40); background: var(--c-yellow-10); color: var(--c-yellow);}
.field-badge--all {border-color: var(--c-purple-40); background: var(--c-purple-10); color: var(--c-purple);}
.field-badge--user {border-color: var(--c-blue-40); background: var(--c-blue-10); color: var(--c-blue);}
.field-badge--translated {border-color: var(--c-green-40); background: var(--c-green-10); color: var(--c-green);}
.field-badge--shared {border-color: var(--br-gray); background: var(--bg-glass-gray); color: var(--text-dark);}
.field-meta {justify-content: flex-start; gap: var(--gapm4);}
.meta-item {display: inline-flex; min-width: 148px; align-items: center; gap: var(--gapm4); padding: var(--gapm5) var(--gapm3); border: 1px solid var(--br-gray); border-radius: 4px 0; background: var(--bg-glass-gray); color: var(--text-dark); font-size: 11px;}
.meta-label {display: inline-flex; align-items: center; gap: var(--gapm5); color: var(--text-dark); font-size: 11px; letter-spacing: .5px;}
.meta-label .icon {width: 12px; height: 12px; color: var(--c-biruz);}
.meta-item code,.meta-item strong {overflow: hidden; color: var(--c-biruz); font-size: 11px; text-overflow: ellipsis; white-space: nowrap;}
.field-controls {display: flex; flex: 0 0 90px; flex-direction: column; align-items: center; justify-content: center; gap: var(--gapm4); padding: var(--gapm2); border-left: 1px solid var(--br-biruz); background: var(--bg-glass-biruz);}
.field-controls > span {color: var(--text-dark); font-size: 11px; letter-spacing: 1px;}
.field-actions {display: flex; gap: var(--gapm4);}
.field-action {display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--br-blue); border-radius: 5px 0; background: var(--bg-glass-blue); color: var(--c-blue); cursor: pointer; transition: transform .2s, box-shadow .2s;}
.field-action:hover {box-shadow: 0 0 12px var(--accent-glow); transform: translateY(-1px);}
.field-action--delete {border-color: var(--c-red-40); background: var(--c-red-10); color: var(--c-red);}
.field-action .icon {width: 15px; height: 15px;}

/* -------------------------------------------------------------------------- */
/* 05. ПОРОЖНІЙ СТАН РЕЄСТРУ                                                   */
/* -------------------------------------------------------------------------- */
.empty-state {position: relative; display: flex; min-height: 230px; flex-direction: column; align-items: center; justify-content: center; gap: var(--gapm1); overflow: hidden; padding: var(--gapb2) var(--gap); border: 1px solid var(--br-biruz); border-radius: 12px 0; background: var(--bg-glass-white); text-align: center; box-shadow: var(--shadow-2);}
.empty-state__code {color: var(--c-biruz); font-size: 11px; letter-spacing: 2px;}
.empty-state__icon {display: inline-flex; width: 58px; height: 58px; align-items: center; justify-content: center; border: 1px solid var(--br-biruz); border-radius: 9px 0; background: var(--bg-glass-biruz); color: var(--c-biruz); box-shadow: 0 0 18px var(--accent-glow);}
.empty-state__icon .icon {width: 27px; height: 27px;}
.empty-state h3 {margin: 0; font-size: 18px; text-transform: uppercase;}
.empty-state p {max-width: 540px; margin: 0; color: var(--text-dark); font-size: 13px; line-height: 1.55;}

/* -------------------------------------------------------------------------- */
/* 06. HERO КЕРУВАННЯ ПЕРЕАДРЕСАЦІЯМИ                                         */
/* -------------------------------------------------------------------------- */
.route-hero-demo {margin-top: var(--gap);}
.route-hero-demo .redirect-hero {position: relative; display: flex; align-items: stretch; justify-content: space-between; gap: var(--gapb2); width: 100%; padding: var(--gapb2); overflow: hidden; border: 1px solid var(--br-biruz); border-top: 3px solid var(--c-biruz); border-radius: 24px 4px; corner-shape: bevel; background: linear-gradient(120deg, var(--bg-glass-biruz), transparent 43%), linear-gradient(300deg, var(--c-purple-10), transparent 48%), var(--panel-bg); box-shadow: var(--shadow-big), inset 0 0 38px var(--bg-glass-white);}
.route-hero-demo .redirect-hero::before {content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .42; background-image: linear-gradient(color-mix(in srgb, var(--c-biruz) 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--c-biruz) 10%, transparent) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(90deg, #000, transparent 75%);}
.route-hero-demo .redirect-hero::after {content: "HTTP_CONTROL / REV.03"; position: absolute; right: 27px; bottom: 11px; color: var(--c-biruz-40); font-size: 11px; font-weight: 700; letter-spacing: 1.5px;}
.route-hero-demo .redirect-hero > * {position: relative; z-index: 1;}
.route-hero-demo .redirect-hero-copy {display: flex; flex: 1 1 700px; min-width: 0; flex-direction: column; align-items: flex-start;}
.route-hero-demo .redirect-system-label {display: inline-flex; align-items: center; gap: var(--gapm3); margin-bottom: var(--gapm1); color: var(--c-biruz); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;}
.route-hero-demo .redirect-system-label i {width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 0 4px var(--c-green-10), 0 0 12px var(--c-green-60); animation: route-demo-pulse 2.2s ease-in-out infinite;}
.route-hero-demo .redirect-hero h2 {margin: 0; color: var(--text); font-size: clamp(31px, 4.7vw, 60px); line-height: .98; letter-spacing: -.04em;}
.route-hero-demo .redirect-hero-copy > p {max-width: 700px; margin: var(--gapm1) 0 var(--gap); color: var(--text-dark); font-size: 14px; line-height: 1.65;}
.route-hero-demo .redirect-stats {justify-content: flex-start; gap: var(--gapm3);}
.route-hero-demo .redirect-stat {display: inline-flex; min-width: 130px; align-items: center; gap: var(--gapm1); padding: var(--gapm3) var(--gapm1); border: 1px solid var(--br-gray); border-radius: 9px 2px; corner-shape: bevel; background: var(--bg-glass-white);}
.route-hero-demo .redirect-stat small {color: var(--text-dark); font-size: 11px; font-weight: 700; letter-spacing: .8px;}
.route-hero-demo .redirect-stat strong {margin-left: auto; color: var(--c-biruz); font-size: 18px; line-height: 1;}
.route-hero-demo .redirect-stat-danger strong {color: var(--c-red);}
.route-hero-demo .redirect-stat-secure strong {color: var(--c-green);}
.route-hero-demo .redirect-route-visual {position: relative; display: flex; flex: 0 1 390px; min-height: 126px; align-items: center; justify-content: center; padding: var(--gapm1); border: 1px solid var(--br-biruz); border-radius: 18px 3px; corner-shape: bevel; background: var(--bg-glass-biruz);}
.route-hero-demo .route-node {display: inline-flex; min-width: 79px; min-height: 35px; align-items: center; justify-content: center; padding: var(--gapm4) var(--gapm3); border-radius: 8px 2px; corner-shape: bevel; font-size: 11px; font-weight: 700; letter-spacing: .8px;}
.route-hero-demo .route-node-source {border: 1px solid var(--c-purple-40); background: var(--c-purple-10); color: var(--c-purple);}
.route-hero-demo .route-node-target {border: 1px solid var(--br-biruz); background: var(--bg-glass-biruz); color: var(--c-biruz);}
.route-hero-demo .route-line {position: relative; flex: 1 1 72px; max-width: 116px; height: 1px; margin: 0 var(--gapm3); background: linear-gradient(90deg, var(--c-purple), var(--c-biruz)); box-shadow: 0 0 8px var(--accent-glow);}
.route-hero-demo .route-line::after {content: ""; position: absolute; right: -1px; top: -4px; width: 7px; height: 7px; border-top: 1px solid var(--c-biruz); border-right: 1px solid var(--c-biruz); transform: rotate(45deg);}
.route-hero-demo .route-line i {position: absolute; top: -2px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--bg-color); box-shadow: 0 0 10px var(--c-biruz); animation: route-demo-flow 2.4s linear infinite;}
.route-hero-demo .redirect-route-visual > small {position: absolute; right: 13px; bottom: 10px; color: var(--c-biruz-60); font-size: 11px; font-weight: 700; letter-spacing: 1px;}
.route-hero-demo .redirect-scanline {width: 94%; height: 1px; margin: var(--gap) auto 0; background: linear-gradient(90deg, transparent, var(--c-biruz-60) 17%, var(--c-purple-40) 84%, transparent); box-shadow: 0 0 13px var(--accent-glow);}
@keyframes route-demo-pulse {0%,100% {opacity: 1; transform: scale(1);} 50% {opacity: .55; transform: scale(.82);}}
@keyframes route-demo-flow {0% {left: 0; opacity: 0;} 15%,85% {opacity: 1;} 100% {left: calc(100% - 5px); opacity: 0;}}

/* -------------------------------------------------------------------------- */
/* 07. КАРТКА КОНФІГУРАЦІЇ ПЕРЕАДРЕСАЦІЙ                                      */
/* -------------------------------------------------------------------------- */
.redirect-demo {margin-top: var(--gap);}
.redirect-demo__heading {margin-bottom: var(--gapm1);}
.redirect-demo .settings-layout {display: flex; flex-direction: column; padding: var(--gap); border: 1px solid var(--br-gray); border-radius: 18px 2px; corner-shape: bevel; background: var(--bg-glass-darck); box-shadow: var(--shadow-2);}
.redirect-demo .config-card {position: relative; display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--br-gray); border-radius: 15px 3px; corner-shape: bevel; background: var(--bg-glass-white); box-shadow: var(--shadow-1);}
.redirect-demo .config-card::after {content: "ROUTE / CONFIG_01"; position: absolute; right: 12px; bottom: 9px; color: var(--c-biruz-20); font-size: 11px; font-weight: 700; letter-spacing: 1px; pointer-events: none;}
.redirect-demo .config-card-header {display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: var(--gap); padding: var(--gapm1) var(--gap); border-bottom: 1px solid var(--br-biruz); background: linear-gradient(90deg, var(--bg-glass-biruz), transparent 67%);}
.redirect-demo .config-card-heading {display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: var(--gapm1);}
.redirect-demo .config-card-heading > div {display: flex; min-width: 0; flex-direction: column; gap: var(--gapm5);}
.redirect-demo .config-card-heading small {color: var(--c-biruz); font-size: 11px; font-weight: 700; letter-spacing: 1px;}
.redirect-demo .config-card-heading h3 {margin: 0; color: var(--text); font-size: 16px; line-height: 1.25;}
.redirect-demo .config-card-icon {display: inline-flex; flex: 0 0 40px; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--br-biruz); border-radius: 11px 2px; corner-shape: bevel; background: var(--bg-glass-biruz); color: var(--c-biruz); box-shadow: inset 0 0 12px var(--accent-glow);}
.redirect-demo .config-card-icon .icon {width: 18px; height: 18px;}
.redirect-demo .section-tag {padding: var(--gapm5) var(--gapm3); border: 1px solid var(--c-purple-40); border-radius: 6px 1px; corner-shape: bevel; background: var(--c-purple-10); color: var(--c-purple); font-size: 11px; font-weight: 700; letter-spacing: 1px;}
.redirect-demo .config-card-body {display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--gapm1); padding: var(--gap);}
.redirect-demo .redirect-switch {position: relative; display: flex; min-height: 72px; align-items: center; gap: var(--gapm1); padding: var(--gapm1); border: 1px solid var(--br-gray); border-radius: 11px 2px; corner-shape: bevel; background: var(--panel-bg); cursor: pointer; transition: border-color .2s, background .2s, transform .2s;}
.redirect-demo .redirect-switch:hover {border-color: var(--br-biruz); background: var(--bg-glass-biruz); transform: translateX(2px);}
.redirect-demo .redirect-switch input {position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none;}
.redirect-demo .redirect-switch-control {position: relative; display: inline-flex; flex: 0 0 45px; width: 45px; height: 23px; align-items: center; padding: var(--gapm7); border: 1px solid var(--br-gray); border-radius: 12px 3px; corner-shape: bevel; background: var(--bg-glass-gray); transition: border-color .2s, background .2s, box-shadow .2s;}
.redirect-demo .redirect-switch-control i {display: block; width: 15px; height: 15px; border-radius: 6px 2px; corner-shape: bevel; background: var(--text-dark); transition: transform .2s, background .2s;}
.redirect-demo .redirect-switch input:checked + .redirect-switch-control {border-color: var(--br-biruz); background: var(--bg-glass-biruz); box-shadow: 0 0 13px var(--accent-glow);}
.redirect-demo .redirect-switch input:checked + .redirect-switch-control i {background: var(--c-biruz); box-shadow: 0 0 9px var(--accent-glow); transform: translateX(21px);}
.redirect-demo .redirect-switch input:focus-visible + .redirect-switch-control {outline: 2px solid var(--c-purple); outline-offset: 3px;}
.redirect-demo .redirect-switch-copy {display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: var(--gapm5);}
.redirect-demo .redirect-switch-copy strong {color: var(--text); font-size: 12px;}
.redirect-demo .redirect-switch-copy small {color: var(--text-dark); font-size: 11px; line-height: 1.4;}
.redirect-demo .redirect-switch-state {padding: var(--gapm5) var(--gapm4); border: 1px solid var(--br-gray); border-radius: 5px 1px; color: var(--text-dark); font-size: 11px; font-weight: 700; letter-spacing: .6px;}
.redirect-demo .redirect-switch input:checked ~ .redirect-switch-state {border-color: var(--br-biruz); color: var(--c-biruz);}
.redirect-demo .redirect-error-field {display: flex; align-items: center; justify-content: space-between; gap: var(--gap); margin-top: var(--gapm3); padding: var(--gapm1); border: 1px dashed var(--c-purple-40); border-radius: 11px 2px; corner-shape: bevel; background: var(--c-purple-10);}
.redirect-demo .redirect-field-copy {display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: var(--gapm5);}
.redirect-demo .redirect-field-copy label {color: var(--c-purple); font-size: 11px; font-weight: 700;}
.redirect-demo .redirect-field-copy p {margin: 0; color: var(--text-dark); font-size: 11px; line-height: 1.45;}
.redirect-demo .redirect-file-input {display: flex; flex: 0 1 320px; align-items: stretch; overflow: hidden; border: 1px solid var(--br-gray); border-radius: 9px 2px; corner-shape: bevel; background: var(--bg-input); transition: border-color .2s, box-shadow .2s;}
.redirect-demo .redirect-file-input:focus-within {border-color: var(--c-purple); box-shadow: 0 0 0 3px var(--c-purple-10);}
.redirect-demo .redirect-file-input span {display: inline-flex; align-items: center; padding: 0 var(--gapm3); border-right: 1px solid var(--br-gray); background: var(--c-purple-10); color: var(--c-purple); font-size: 11px; font-weight: 700; white-space: nowrap;}
.redirect-demo .redirect-file-input input {flex: 1 1 auto; min-width: 0; padding: var(--gapm2) var(--gapm1); border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12px;}

/* -------------------------------------------------------------------------- */
/* 08. ПАНЕЛЬ ГРУП КОРИСТУВАЧІВ                                                */
/* -------------------------------------------------------------------------- */
.groups-demo {margin-top: var(--gap);}
.groups-demo .groups-panel {width: 100%; min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--br-gray); border-radius: 19px 3px; corner-shape: bevel; background: var(--bg-glass-white); box-shadow: var(--shadow-big);}
.groups-demo .groups-panel-header {display: flex; align-items: center; justify-content: space-between; gap: var(--gap); padding: var(--gap) var(--gapb1); border-bottom: 1px solid var(--br-biruz); background: linear-gradient(90deg, var(--bg-glass-biruz), transparent 66%);}
.groups-demo .groups-panel-header > div {display: flex; flex-direction: column; gap: var(--gapm5);}
.groups-demo .groups-panel-header span {color: var(--c-biruz); font-size: 11px; font-weight: 700; letter-spacing: 1.3px;}
.groups-demo .groups-panel-header h2 {margin: 0; color: var(--text); font-size: 18px; line-height: 1.25;}
.groups-demo .groups-panel-header > small {padding: var(--gapm5) var(--gapm3); border: 1px solid var(--c-purple-40); border-radius: 6px 1px; corner-shape: bevel; background: var(--c-purple-10); color: var(--c-purple); font-size: 11px; font-weight: 700; text-align: right;}
.groups-demo .group-list {display: flex; flex-direction: column; padding: 0;}
.groups-demo .group-item {position: relative; display: flex; min-width: 0; align-items: stretch; border-bottom: 1px solid var(--br-gray); background: transparent; transition: background .2s;}
.groups-demo .group-item:last-child {border-bottom: 0;}
.groups-demo .group-item::after {content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--c-biruz); opacity: 0; box-shadow: 0 0 12px var(--accent-glow); transition: opacity .2s;}
.groups-demo .group-item:hover {background: linear-gradient(90deg, var(--bg-glass-biruz), var(--c-purple-10) 75%, transparent);}
.groups-demo .group-item:hover::after {opacity: 1;}
.groups-demo .group-item.is-custom::after {background: var(--c-purple);}
.groups-demo .group-sequence {display: flex; flex: 0 0 66px; flex-direction: column; align-items: center; justify-content: center; gap: var(--gapm5); border-right: 1px dashed var(--br-gray); background: var(--bg-glass-biruz);}
.groups-demo .group-sequence small {color: var(--text-dark); font-size: 11px; font-weight: 700; letter-spacing: 1px;}
.groups-demo .group-sequence strong {color: var(--c-biruz); font-size: 15px;}
.groups-demo .group-identity {display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: var(--gapm1); padding: var(--gap);}
.groups-demo .group-emblem {position: relative; display: inline-flex; flex: 0 0 52px; width: 52px; height: 52px; align-items: center; justify-content: center; border: 1px solid var(--br-biruz); border-radius: 16px 3px; corner-shape: bevel; background: var(--bg-glass-biruz); color: var(--c-biruz); box-shadow: inset 0 0 15px var(--accent-glow);}
.groups-demo .group-emblem::before {content: ""; position: absolute; inset: 5px; border: 1px dashed var(--br-biruz); border-radius: 11px 2px;}
.groups-demo .group-emblem span {position: relative; z-index: 1; color: currentColor; font-size: 19px; font-weight: 700;}
.groups-demo .group-emblem i {position: absolute; right: -3px; bottom: -3px; width: 9px; height: 9px; border: 2px solid var(--panel-bg); border-radius: 50%; background: var(--c-green); box-shadow: 0 0 8px var(--c-green-60);}
.groups-demo .is-custom .group-emblem {border-color: var(--c-purple-40); background: var(--c-purple-10); color: var(--c-purple);}
.groups-demo .is-custom .group-emblem::before {border-color: var(--c-purple-40);}
.groups-demo .is-custom .group-emblem i {background: var(--c-yellow); box-shadow: 0 0 8px var(--c-yellow-60);}
.groups-demo .group-main {display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: var(--gapm1);}
.groups-demo .group-header {display: flex; align-items: center; gap: var(--gapm4); flex-wrap: wrap;}
.groups-demo .group-title {max-width: 100%; color: var(--text); font-size: 15px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; text-decoration: none;}
.groups-demo .group-title:hover {color: var(--c-biruz);}
.groups-demo .group-role-badge {padding: var(--gapm6) var(--gapm4); border: 1px solid var(--c-yellow-40); border-radius: 6px 1px; corner-shape: bevel; background: var(--c-yellow-10); color: var(--c-yellow); font-size: 11px; font-weight: 700; text-transform: uppercase;}
.groups-demo .is-custom .group-role-badge {border-color: var(--c-purple-40); background: var(--c-purple-10); color: var(--c-purple);}
.groups-demo .group-origin {display: inline-flex; align-items: center; gap: var(--gapm5); margin-left: auto; color: var(--c-yellow); font-size: 11px; font-weight: 700; letter-spacing: .8px;}
.groups-demo .group-origin i {width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor;}
.groups-demo .group-origin.is-locked {color: var(--c-green);}
.groups-demo .group-meta {justify-content: flex-start; gap: var(--gapm4); margin: 0;}
.groups-demo .group-meta .meta-item {display: inline-flex; min-width: 0; align-items: center; gap: var(--gapm4); padding: var(--gapm5) var(--gapm3); border: 1px solid var(--br-gray); border-radius: 5px 1px; background: var(--bg-glass-gray); color: var(--text-dark); font-size: 11px;}
.groups-demo .group-meta .meta-item small {color: var(--c-biruz); font-size: 11px; font-weight: 700; letter-spacing: .6px;}
.groups-demo .group-meta .meta-item code,.groups-demo .group-meta .meta-item strong,.groups-demo .group-meta .meta-item > span {max-width: 250px; overflow: hidden; color: var(--text-dark); font-size: 11px; text-overflow: ellipsis; white-space: nowrap;}
.groups-demo .group-meta .icon {width: 12px; height: 12px; color: var(--c-biruz);}
.groups-demo .group-item-actions {display: flex; flex: 0 0 190px; flex-direction: column; align-items: flex-end; justify-content: center; gap: var(--gapm4); padding: var(--gap); border-left: 1px dashed var(--br-gray);}
.groups-demo .group-controls-label {color: var(--c-purple); font-size: 11px; font-weight: 700; letter-spacing: 1px;}
.groups-demo .group-actions {display: flex; align-items: center; justify-content: flex-end; gap: var(--gapm4); flex-wrap: wrap;}
.groups-demo .group-action {display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: var(--gapm4); padding: 0 var(--gapm3); border: 1px solid var(--c-purple-40); border-radius: 8px 2px; corner-shape: bevel; background: var(--c-purple-10); color: var(--c-purple); font-size: 11px; font-weight: 700; cursor: pointer; text-decoration: none; transition: transform .2s, border-color .2s, background .2s;}
.groups-demo .group-action:hover {border-color: var(--c-purple); background: var(--c-purple-20); transform: translateY(-2px);}
.groups-demo .group-action .icon {width: 14px; height: 14px;}
.groups-demo .group-action-delete {width: 34px; padding: 0; border-color: var(--c-red-40); background: var(--c-red-10); color: var(--c-red);}
.groups-demo .group-action-delete:hover {border-color: var(--c-red); background: var(--c-red-20);}
.groups-demo .group-protected {display: inline-flex; align-items: center; gap: var(--gapm5); padding: var(--gapm5) var(--gapm4); border: 1px solid var(--c-green-20); border-radius: 5px 1px; background: var(--c-green-10); color: var(--c-green); font-size: 11px; font-weight: 700; letter-spacing: .6px;}
.groups-demo .group-protected i {width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor;}

/* -------------------------------------------------------------------------- */
/* 09. КАРТКА ОСНОВНИХ НАЛАШТУВАНЬ                                            */
/* -------------------------------------------------------------------------- */
.settings-card-demo {margin-top: var(--gap);}
.settings-card-demo .settings-grid {display: flex; flex-wrap: wrap; gap: var(--gap); padding: 0; counter-reset: demo-settings-card;}
.settings-card-demo .config-card {position: relative; display: flex; flex: 1 1 430px; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--br-gray); border-radius: 15px 3px; corner-shape: bevel; background: var(--bg-glass-white); box-shadow: var(--shadow-2); counter-increment: demo-settings-card;}
.settings-card-demo .config-card::after {content: "MODULE / " counter(demo-settings-card, decimal-leading-zero); position: absolute; right: 12px; bottom: 9px; color: var(--c-biruz-20); font-size: 11px; font-weight: 700; letter-spacing: 1px; pointer-events: none;}
.settings-card-demo .config-card-header {display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: var(--gapm1); padding: var(--gapm1) var(--gap); border-bottom: 1px solid var(--br-biruz); background: linear-gradient(90deg, var(--bg-glass-biruz), transparent 68%);}
.settings-card-demo .config-card-header h3 {display: flex; min-width: 0; align-items: center; gap: var(--gapm3); margin: 0; color: var(--text); font-size: 13px; line-height: 1.35;}
.settings-card-demo .config-card-header h3 .icon {flex: 0 0 17px; width: 17px; height: 17px; color: var(--c-biruz);}
.settings-card-demo .section-tag {flex: 0 0 auto; padding: var(--gapm5) var(--gapm3); border: 1px solid var(--c-purple-40); border-radius: 6px 1px; corner-shape: bevel; background: var(--c-purple-10); color: var(--c-purple); font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;}
.settings-card-demo .config-card-body {display: flex; flex: 1 1 auto; flex-direction: column; padding: var(--gap);}
.settings-card-demo .form-group {display: flex; min-width: 0; flex-direction: column; gap: var(--gapm4); margin-bottom: var(--gapm1);}
.settings-card-demo .form-group label {display: block; margin: 0; color: var(--text-dark); font-size: 11px; font-weight: 700; line-height: 1.35;}
.settings-card-demo .field-help {color: var(--text-dark); font-size: 11px; font-weight: 500;}
.settings-card-demo .form-control {width: 100%; min-width: 0; padding: var(--gapm2) var(--gapm1); border: 1px solid var(--br-gray); border-radius: 8px 2px; corner-shape: bevel; outline: none; background: var(--bg-input); color: var(--text); font-size: 12px; transition: border-color .2s, box-shadow .2s, background .2s;}
.settings-card-demo .form-control:focus {border-color: var(--c-biruz); background: var(--bg-input); box-shadow: 0 0 0 3px var(--accent-glow);}
.settings-card-demo select.form-control {cursor: pointer;}
.settings-card-demo .form-row {gap: var(--gapm1);}
.settings-card-demo .form-row > .form-group {flex: 1 1 190px;}

/* -------------------------------------------------------------------------- */
/* 10. WARNING-КАРТКА ПАРАМЕТРІВ ВИВОДУ                                       */
/* -------------------------------------------------------------------------- */
.cmd-card-demo {margin-top: var(--gap);}
.cmd-card-demo .settings-grid {display: flex; flex-wrap: wrap; gap: var(--gap); padding: 0;}
.cmd-card-demo .cmd-card {position: relative; display: flex; flex: 1 1 430px; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--br-gray); border-radius: 15px 3px; corner-shape: bevel; background: var(--bg-glass-white); box-shadow: var(--shadow-2);}
.cmd-card-demo .cmd-card::before,.cmd-card-demo .cmd-card::after {content: ""; position: absolute; z-index: 2; width: 18px; height: 18px; pointer-events: none;}
.cmd-card-demo .cmd-card::before {top: 7px; right: 7px; border-top: 1px solid var(--c-yellow-60); border-right: 1px solid var(--c-yellow-60);}
.cmd-card-demo .cmd-card::after {right: 7px; bottom: 7px; border-right: 1px solid var(--c-yellow-20); border-bottom: 1px solid var(--c-yellow-20);}
.cmd-card-demo .cmd-card.warning {border-top: 2px solid var(--c-yellow);}
.cmd-card-demo .cmd-card-head {display: flex; min-height: 62px; align-items: center; gap: var(--gapm1); padding: var(--gapm1) var(--gap); border-bottom: 1px solid var(--br-gray); background: linear-gradient(90deg, var(--c-yellow-10), transparent 72%);}
.cmd-card-demo .cmd-card-icon {display: inline-flex; flex: 0 0 36px; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid var(--c-yellow-40); border-radius: 10px 2px; corner-shape: bevel; background: var(--c-yellow-10); color: var(--c-yellow); box-shadow: 0 0 14px var(--c-yellow-10);}
.cmd-card-demo .cmd-card-icon .icon {width: 17px; height: 17px;}
.cmd-card-demo .cmd-card-title {display: flex; min-width: 0; flex-direction: column; gap: var(--gapm6); color: var(--text); font-size: 13px; font-weight: 700; line-height: 1.3;}
.cmd-card-demo .cmd-card-title small {color: var(--c-yellow); font-size: 11px; font-weight: 700; letter-spacing: 1px;}
.cmd-card-demo .cmd-card-body {display: flex; flex-direction: column; gap: var(--gapm3); padding: var(--gapm1);}
.cmd-card-demo .dl-v1 {display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--gap); margin: 0; padding: var(--gapm2) var(--gapm1); border: 1px solid var(--br-gray); border-radius: 8px 2px; corner-shape: bevel; background: var(--bg-glass-gray);}
.cmd-card-demo .dl-v1 dt {flex: 1 1 auto; min-width: 0; color: var(--text-dark); font-size: 11px; font-weight: 700; line-height: 1.45;}
.cmd-card-demo .dl-v1 dd {flex: 0 1 210px; min-width: 150px; margin: 0;}
.cmd-card-demo .form-control {width: 100%; min-width: 0; padding: var(--gapm2) var(--gapm1); border: 1px solid var(--br-gray); border-radius: 7px 2px; corner-shape: bevel; outline: none; background: var(--bg-input); color: var(--text); font-size: 12px; transition: border-color .2s, box-shadow .2s, background .2s;}
.cmd-card-demo select.form-control {cursor: pointer;}
.cmd-card-demo .form-control.status-yes {border-color: var(--c-green-60); background: var(--c-green-10); color: var(--c-green); font-weight: 700;}
.cmd-card-demo .form-control:focus-visible {border-color: var(--c-yellow); box-shadow: 0 0 0 3px var(--accent-glow);}

/* -------------------------------------------------------------------------- */
/* 11. АДАПТИВНІСТЬ І ЗМЕНШЕННЯ РУХУ                                          */
/* -------------------------------------------------------------------------- */

/* Планшети та вузькі настільні екрани */
@media (max-width: 1050px) {.fields-hero {align-items: flex-start; flex-wrap: wrap;}
.fields-hero__metrics {order: 3; flex-basis: 100%;}
.fields-hero__actions {margin-left: auto;}
.route-hero-demo
.redirect-hero {align-items: flex-start; flex-direction: column;}
.route-hero-demo
.redirect-route-visual {width: 100%; flex-basis: auto;}}
@media (max-width: 1050px) {.groups-demo
.group-item {flex-wrap: wrap;}
.groups-demo
.group-item-actions {flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; padding: var(--gapm3) var(--gap) var(--gapm1); border-top: 1px dashed var(--br-gray); border-left: 0;}}

/* Планшети у портретній орієнтації */
@media (max-width: 760px) {.fields-hero {padding: var(--gap);}
.fields-hero__actions {width: 100%; flex-direction: row; align-items: center; justify-content: space-between;}
.fields-tabs__list {flex-direction: column;}
.fields-tab {width: 100%; border-right: 0; border-bottom: 1px solid var(--br-biruz);}
.fields-panel-heading {align-items: flex-start; flex-direction: column;}
.fields-panel-heading p {text-align: left;}
.field-item {flex-wrap: wrap;}
.field-main {width: calc(100% - 74px); padding: var(--gapm1);}
.field-controls {width: 100%; flex-basis: 100%; flex-direction: row; justify-content: flex-end; padding: var(--gapm3) var(--gapm2); border-top: 1px solid var(--br-biruz); border-left: 0;}
.field-actions {margin-left: auto;}
.meta-item {width: 100%;}
.redirect-demo
.config-card-header,.redirect-demo
.redirect-error-field {align-items: flex-start; flex-direction: column;}
.redirect-demo
.redirect-file-input {width: 100%; flex-basis: auto;}
.groups-demo
.groups-panel-header {align-items: flex-start; flex-direction: column;}
.groups-demo
.groups-panel-header > small {text-align: left;}
.groups-demo
.group-sequence {flex-basis: 48px;}
.groups-demo
.group-identity {align-items: flex-start; padding: var(--gapm1);}}

/* Мобільні екрани */
@media (max-width: 500px) {.fields-hero__mark,.fields-online,.field-index,.field-symbol {display: none;}
.fields-hero__copy {min-width: 100%;}
.fields-create-btn {width: 100%; justify-content: center;}
.fields-tab-panel {padding: var(--gapm1);}
.field-main {width: 100%;}
.field-heading {min-width: 100%;}
.redirect-demo
.settings-layout,.redirect-demo
.config-card-body {padding: var(--gapm1);}
.redirect-demo
.redirect-switch {align-items: flex-start; flex-wrap: wrap;}
.redirect-demo
.redirect-switch-copy {flex-basis: calc(100% - 62px);}
.redirect-demo
.redirect-switch-state {margin-left: 0;}
.groups-demo
.group-emblem {flex-basis: 43px; width: 43px; height: 43px;}
.groups-demo
.group-identity {gap: var(--gapm3);}
.groups-demo
.group-origin {margin-left: 0;}
.groups-demo
.group-meta
.meta-item {width: 100%; flex-basis: 100%;}
.groups-demo
.group-item-actions {align-items: flex-start; flex-direction: column;}
.groups-demo
.group-actions {justify-content: flex-start;}
.settings-card-demo
.config-card-header {align-items: flex-start; flex-direction: column;}
.settings-card-demo
.section-tag {align-self: flex-start;}
.settings-card-demo
.config-card-body {padding: var(--gapm1);}
.settings-card-demo
.form-row {flex-direction: column; gap: 0;}
.settings-card-demo
.form-row >
.form-group {flex-basis: auto;}
.cmd-card-demo
.cmd-card-head {align-items: flex-start;}
.cmd-card-demo
.dl-v1 {align-items: stretch; flex-direction: column;}
.cmd-card-demo
.dl-v1 dd {width: 100%; min-width: 0; flex-basis: auto;}}

/* Користувацьке налаштування: мінімум анімації */
@media (prefers-reduced-motion: reduce) {.fields-demo * {scroll-behavior: auto !important; transition-duration:.01ms !important;}
.route-hero-demo
.redirect-system-label i,.route-hero-demo
.route-line i {animation: none;}
}