/* Hallmark · system: Extremo cabinet (design.md) · genre: atmospheric · contrast: pass (40–41)
 * Детали экранов кабинета. Удостоверение, знаки и блок блокировки перенесены с утверждённой главной как есть. */

/* фон страницы: свет цвета фракции одним слоем на весь экран, каждое пятно гаснет до нуля внутри себя, поэтому краёв нет */
.page-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(1100px 760px at calc(var(--side-w) + 22%) -6%, color-mix(in srgb, var(--fc) 24%, transparent) 0%, color-mix(in srgb, var(--fc) 9%, transparent) 45%, transparent 75%), /* taste-skill-ignore: свет цвета фракции выбран заказчиком */
  radial-gradient(900px 700px at 100% 18%, color-mix(in srgb, var(--fc) 8%, transparent) 0%, transparent 70%), /* taste-skill-ignore: свет цвета фракции выбран заказчиком */
  var(--bg); } /* taste-skill-ignore: свет цвета фракции выбран заказчиком */
.page-bg::after { content: ""; position: absolute; inset: 0; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* обложка: главный предмет слева, рабочая часть справа */
.cover { position: relative; padding: 104px 0 64px; }
.stage .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 56px; align-items: center; margin: 0 auto; }
main.wrap { position: relative; z-index: 3; padding-bottom: 64px; display: grid; gap: 16px; }
.page-title { padding: 104px 0 28px; }
.page-title h1 { font: 800 32px/1.1 var(--display); letter-spacing: -.01em; }
.page-title .lede { margin-top: 10px; max-width: 64ch; color: var(--muted); font-size: 16px; }

/* знак VIP: один на всех экранах, цвет уровня — рамка, корона и буквы */
.vipb { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 10px; border-radius: var(--r-badge); border: 1px solid color-mix(in srgb, var(--tier) 55%, transparent); background: color-mix(in srgb, var(--tier) 9%, var(--shade-soft)); color: var(--tier); font: 700 13px/1 var(--display); letter-spacing: .04em; white-space: nowrap; flex: none; }
.vipb .crown { width: 16px; height: 16px; flex: none; }
.vipb-until { font: 500 13px/1 var(--body); letter-spacing: 0; color: color-mix(in srgb, var(--white) 72%, transparent); margin-left: 3px; }
.vipb[data-t="1"] { --tier: var(--tier-1); } .vipb[data-t="2"] { --tier: var(--tier-2); } .vipb[data-t="3"] { --tier: var(--tier-3); }
/* знак блокировки: того же вида, что знак VIP, цвет блокировки */
.banb { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border-radius: var(--r-badge); border: 1px solid color-mix(in srgb, var(--ban-ink) 60%, transparent); background: color-mix(in srgb, var(--ban-line) 18%, var(--shade)); color: var(--ban-ink); font: 700 13px/1 var(--display); white-space: nowrap; flex: none; }
:root[data-faction="ems"] .idcard .banb, [data-faction="ems"] .idcard .banb { color: var(--white); border-color: color-mix(in srgb, var(--white) 60%, transparent); background: var(--shade); }
.banb svg { width: 15px; height: 15px; flex: none; }
.novip { height: 30px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: var(--r-badge); border: 1px solid color-mix(in srgb, var(--white) 22%, transparent); color: color-mix(in srgb, var(--white) 70%, transparent); font: 600 12px/1 var(--body); white-space: nowrap; flex: none; }

/* удостоверение жителя Everon */
.idcard { position: relative; width: 500px; aspect-ratio: 1.586; border-radius: var(--r-idcard); padding: 22px 24px 40px; color: var(--white);
  background: linear-gradient(135deg, color-mix(in srgb, var(--fc) 62%, var(--fc-deep)) 0%, var(--fc-deep) 60%, color-mix(in srgb, var(--fc-deep) 78%, #000) 100%); /* taste-skill-ignore: материал карты */
  box-shadow: var(--shadow-card); } /* taste-skill-ignore: карта лежит над фоном */
.idcard::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: url("img/map-everon.168286286417.jpg") 60% 45% / 540px auto no-repeat; opacity: .24; mix-blend-mode: luminosity; filter: brightness(2.4); pointer-events: none; }
.idcard > :not(.mrz) { position: relative; z-index: 1; }
.idcard > .mrz { z-index: 1; }
.id-head { display: flex; align-items: center; gap: 12px; }
.id-head .logo { width: 40px; height: 40px; object-fit: contain; flex: none; }
.id-head .t { font: 600 12px/1.3 var(--body); color: color-mix(in srgb, var(--white) 78%, transparent); }
.id-head .t b { display: block; font: 800 15px/1.2 var(--display); letter-spacing: .06em; color: var(--white); }
.id-head .banb, .id-head .vipb, .id-head .novip { margin-left: auto; }
.id-head .banb:not([hidden]) ~ .vipb, .id-head .banb:not([hidden]) ~ .novip { margin-left: 8px; }
.id-body { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; margin-top: 18px; }
.photo { height: 118px; border-radius: 12px; display: grid; place-items: center; background: var(--shade); border: 2px solid var(--fc-ink); font: 800 28px/1 var(--display); color: var(--fc-ink); }
:root[data-online="0"] .photo { border-color: color-mix(in srgb, var(--white) 25%, transparent); }
.fld { min-width: 0; }
.fld .k { font-size: 11px; color: color-mix(in srgb, var(--white) 64%, transparent); }
.fld .v { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.id-name { font: 800 24px/1.1 var(--display); overflow-wrap: anywhere; margin: 2px 0 10px; }
:root[data-long="1"] .id-name { font-size: 18px; }
.id-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.fld.wide { grid-column: 1 / -1; }
.v.uid { display: flex; align-items: center; gap: 4px; font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.v.uid span { min-width: 0; overflow-wrap: anywhere; }
.idcard .copy { color: color-mix(in srgb, var(--white) 72%, transparent); margin-left: 2px; }
.idcard .copy:hover { color: var(--white); background: color-mix(in srgb, var(--white) 12%, transparent); }
.idcard .copy[data-done="true"] { color: var(--plus); }
.mrz { position: absolute; left: 24px; right: 24px; bottom: 14px; font: 500 12px/1 var(--mono); letter-spacing: .12em; color: color-mix(in srgb, var(--white) 50%, transparent); white-space: nowrap; overflow: hidden; } /* taste-skill-ignore: строка документа моноширинная, как на настоящем удостоверении */

/* бланк: то же удостоверение до привязки — поля ещё не заполнены, на месте фото пустой слот */
.idcard.blank { background: linear-gradient(135deg, color-mix(in srgb, var(--fc) 34%, var(--fc-deep)) 0%, color-mix(in srgb, var(--fc-deep) 70%, var(--panel)) 60%, color-mix(in srgb, var(--fc-deep) 50%, #000) 100%); } /* taste-skill-ignore: материал карты, бланк бледнее выданной */
.idcard.blank::before { opacity: .16; }
.blank .photo { border: 2px dashed color-mix(in srgb, var(--white) 28%, transparent); color: color-mix(in srgb, var(--white) 55%, transparent); font: 500 12px/1.3 var(--body); text-align: center; padding: 8px; }
.blank .photo.ava { border-style: solid; border-color: var(--fc-ink); color: var(--fc-ink); font: 800 28px/1 var(--display); }
.blank .line { display: block; height: 18px; margin-top: 4px; border-bottom: 1px solid color-mix(in srgb, var(--white) 26%, transparent); } /* taste-skill-ignore: строка бланка, место для записи */
.blank .id-name.line { height: 26px; margin: 2px 0 12px; }
.blank .v.wait { font-weight: 500; color: var(--fc-ink); }

/* блок блокировки (под обложкой) */
.banbox { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 40px; padding: 26px 28px; border-radius: var(--r-card); background: color-mix(in srgb, var(--ban-line) 7%, var(--panel)); border: 1px solid color-mix(in srgb, var(--ban-line) 32%, transparent); }
.bb-head { display: flex; align-items: center; gap: 14px; }
.bb-head svg { width: 30px; height: 30px; flex: none; color: var(--ban-ink); }
.bb-head h2 { font: 700 20px/1.2 var(--display); }
.bb-term { margin-top: 4px; color: var(--muted); }
.bb-why { margin: 20px 0 0; }
.bb-why figcaption { color: var(--muted); font-size: 13px; }
.bb-why blockquote { margin: 6px 0 0; font: 500 18px/1.45 var(--body); color: var(--text); max-width: 60ch; }
.bb-why blockquote::before { content: "«"; color: var(--ban-ink); }
.bb-why blockquote::after { content: "»"; color: var(--ban-ink); }
.bb-side { display: flex; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; }
.bb-track { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--white) 8%, transparent); overflow: hidden; }
.bb-track i { display: block; height: 100%; width: var(--p, 0%); border-radius: 3px; background: var(--ban-ink); }
.bb-ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--muted); font-size: 13px; }
.bb-note { color: var(--muted); font-size: 14px; }
.bb-appeal { align-self: flex-start; }

/* поле кода: длинная пилюля, кнопка внутри справа */
.codebar { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 6px 0 22px; border-radius: var(--r-ctl); background: color-mix(in srgb, var(--white) 6%, var(--panel)); border: 1px solid var(--line-strong); outline: 2px solid transparent; outline-offset: 1px; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); max-width: 520px; }
.codebar:hover { border-color: color-mix(in srgb, var(--white) 22%, transparent); }
.codebar:focus-within { outline-color: var(--fc); }
.codebar input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: 0; color: var(--white); font: 700 20px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.codebar input::placeholder { color: var(--faint); font: 500 15px/1 var(--body); letter-spacing: 0; text-transform: none; }
.codebar input:disabled { cursor: not-allowed; }
.codebar .btn { flex: none; }
.codebar[data-state="error"] { border-color: color-mix(in srgb, var(--ban-line) 70%, transparent); background: color-mix(in srgb, var(--ban-line) 6%, var(--panel)); }
.codebar[data-state="ok"] { border-color: color-mix(in srgb, var(--plus) 60%, transparent); }
.codebar[data-state="disabled"] { opacity: .55; }
.field-label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px; }
.field-help { min-height: 1lh; margin-top: 8px; color: var(--muted); font-size: 14px; max-width: 60ch; }
.field-help.err { color: var(--ban-ink); }
.field-help.ok { color: var(--plus); }

/* блок состояния: ждём, готово, отказ, сведения; без цветной полосы сбоку */
.notice { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 14px; padding: 18px 20px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line-strong); }
.notice > svg { width: 22px; height: 22px; margin-top: 1px; }
.notice h2, .notice h3 { font: 700 17px/1.3 var(--display); }
.notice p { grid-column: 2; color: var(--muted); max-width: 64ch; }
.notice .acts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.notice.wait { background: color-mix(in srgb, var(--fc) 9%, var(--panel)); border-color: color-mix(in srgb, var(--fc) 22%, transparent); }
.notice.wait > svg { color: var(--fc-ink); }
.notice.ok { background: color-mix(in srgb, var(--plus) 7%, var(--panel)); border-color: color-mix(in srgb, var(--plus) 22%, transparent); }
.notice.ok > svg { color: var(--plus); }
.notice.deny { background: color-mix(in srgb, var(--ban-line) 7%, var(--panel)); border-color: color-mix(in srgb, var(--ban-line) 24%, transparent); }
.notice.deny > svg { color: var(--ban-ink); }
.notice.info > svg { color: var(--fc-ink); }

/* ожидание с ограниченным сроком: полоса оставшегося времени цветом фракции */
.timer { grid-column: 2; margin-top: 12px; }
.timer .track { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--white) 8%, transparent); overflow: hidden; }
.timer .track i { display: block; height: 100%; width: var(--p, 100%); border-radius: 3px; background: var(--fc); }
.timer .ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--muted); font-size: 13px; }
.timer .ends b { color: var(--text); font-weight: 600; }

/* шаги: настоящий нумерованный список, номер обычным размером */
.steps { margin: 0; padding: 0 0 0 1.4em; display: grid; gap: 8px; color: var(--muted); }
.steps li { padding-left: 4px; }
.steps li::marker { color: var(--fc-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.steps b { color: var(--text); font-weight: 600; }
.kbd { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 6px; border-radius: 6px; background: color-mix(in srgb, var(--white) 12%, transparent); border: 1px solid color-mix(in srgb, var(--white) 18%, transparent); color: var(--white); font: 700 13px/1 var(--display); vertical-align: 1px; }
.ingame { color: var(--text); font-weight: 600; white-space: nowrap; }

.cta { display: flex; flex-wrap: wrap; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

@media (max-width: 1240px) { .stage .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 1100px) { .banbox { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) { .cover, .page-title { padding-top: 84px; } }
@media (max-width: 560px) {
  .idcard { width: 100%; aspect-ratio: auto; padding: 16px 16px 36px; border-radius: 18px; }
  .idcard::before { background-size: 420px auto; }
  .id-head .logo { width: 34px; height: 34px; }
  .id-body { grid-template-columns: 70px minmax(0, 1fr); gap: 12px; margin-top: 12px; }
  .photo { height: 86px; font-size: 22px; }
  .blank .photo { font-size: 11px; padding: 4px; }
  .id-name { font-size: 18px; margin-bottom: 6px; }
  .id-grid { gap: 4px 10px; }
  .v.uid { font-size: 12px; }
  .id-head .vipb, .id-head .banb, .id-head .novip { height: 26px; padding: 0 9px 0 8px; font-size: 12px; }
  :root[data-ban="1"] .id-head .vipb, :root[data-ban="1"] .id-head .novip { display: none; }
  .mrz { left: 16px; right: 16px; bottom: 10px; font-size: 10px; }
  .banbox { padding: 20px; }
  .bb-why blockquote { font-size: 16px; }
  .bb-appeal { align-self: stretch; }
  .page-title h1 { font-size: 26px; }
  .codebar { height: 52px; padding-left: 16px; }
  .codebar input { font-size: 17px; letter-spacing: .08em; }
  .codebar .btn { padding: 0 16px; }
  .notice { padding: 16px; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 12px; }
  .notice .acts .btn { flex: 1; }
  .cta .btn { flex: 1; }
}