/* ============================================================================
   Личный кабинет LineageTwo.

   Палитра снята пипеткой со старого сайта adenland.ru (сам домен уже не
   резолвится, взято со скриншота владельца):
     фон страницы                #61c5de  насыщенная бирюза
     небо в шапке                #81c0eb -> #f6fbff
     весь текст и заголовки      #3d235c  тёмно-фиолетовый
     текст меню на белом         #593f79
   Тёмные поля по краям и каменные колонны пробовали — владелец забраковал,
   остались только цвета и небесная шапка.

   Веб-шрифты намеренно не подключаются — из России они тянутся долго,
   а системный серифный стек даёт ровно ту же «старую» фактуру.

   Кабинет мультисерверный: у каждого мира свой акцентный цвет, он приходит
   в --accent на <body> и подкрашивает активные элементы страницы.
   ========================================================================= */

:root {
    --ink:        #3d235c;   /* фирменный тёмно-фиолетовый adenland */
    --ink-soft:   #574079;
    --ink-faint:  #6f5b8e;
    --line:       #9fd9e8;
    --line-soft:  #c4e8f1;
    --panel:      #eaf8fc;
    --panel-tint: #dcf2f8;
    --cyan:       #61c5de;   /* фон контента */
    --cyan-dark:  #3fa9c6;
    --cyan-lite:  #7acfe4;
    --sky-1:      #81c0eb;
    --sky-2:      #f6fbff;
    --coal:       #2a2424;   /* поля по краям */
    --violet:     #4f4776;
    --ok:         #1f6b45;
    --err:        #8c2f2a;
    --accent:     #3d235c;

    /* Имена из прежней сине-голубой темы: оставлены, чтобы не переписывать
       каждое правило, но указывают уже на фиолетово-бирюзовую палитру. */
    --blue:       #3d235c;
    --blue-deep:  #2e1a46;
    --blue-mid:   #4a2b6e;
    --blue-lite:  #7acfe4;
    --radius:     10px;
    --serif:      Georgia, "Times New Roman", "PT Serif", serif;
    --sans:       "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --shadow:     0 10px 30px rgba(24, 12, 40, .22);
    --shadow-sm:  0 4px 14px rgba(24, 12, 40, .16);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    -webkit-text-size-adjust: 100%;
    /* Цвета с adenland.ru: небо сверху плавно уходит в бирюзу. Во всю ширину
       окна — без тёмных полей и каменных колонн, их владелец забраковал. */
    background:
        linear-gradient(180deg,
            var(--sky-1) 0px,
            #a9dcf0 120px,
            #d7eff8 300px,
            var(--cyan) 620px) no-repeat,
        var(--cyan);
    background-attachment: fixed;
}

/* ------------------------------------------------------------- каркас */

.page { max-width: 1140px; margin: 0 auto; padding: 0 16px 48px; }

/* --------------------------------------------------------------- шапка */

.masthead {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    padding: 24px 0 16px; position: relative;
}
.masthead::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 7px; opacity: .7;
    background:
        radial-gradient(circle at 50% 0, rgba(61,35,92,.45) 0 1.5px, rgba(61,35,92,0) 2px) 50% 0 / 14px 7px repeat-x,
        linear-gradient(90deg, rgba(61,35,92,0), rgba(61,35,92,.5) 18%, rgba(61,35,92,.5) 82%, rgba(61,35,92,0)) 0 100% / 100% 1px no-repeat;
}

/* Знак кабинета: лепестки по бокам (как было), между ними набранное серифом
   название и мелкая подпись. Название — текст, а не картинка: остаётся
   чётким на ретине и само подхватывает фирменный фиолетовый. */
.brand {
    display: flex; align-items: center; gap: 14px;
    text-decoration: none; margin-right: auto;
}
.brand__wing {
    width: 54px; height: 16px; flex: none;
    background: no-repeat center / contain
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 16'><path d='M53 8c-9-6-18-7-27-3C18 8 9 9 1 5c6 7 15 9 25 6 9-3 18-3 27-3z' fill='%233d235c' opacity='.55'/></svg>");
}
.brand__wing--r { transform: scaleX(-1); }
.brand__text { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.brand__name {
    font-family: var(--serif); font-size: 33px; line-height: 1.04;
    color: var(--ink); white-space: nowrap; letter-spacing: .005em;
    /* Лёгкий «выдавленный» рельеф как на старой вывеске: светлый блик снизу
       и мягкая тень — без этого крупный сериф на бирюзе смотрится плоско. */
    text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(24,12,40,.16);
}
.brand__name b { font-weight: normal; }
.brand__sub {
    font-family: var(--serif); font-size: 12px; color: var(--ink-faint);
    letter-spacing: .05em; white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav a, .nav .linkish {
    font-family: var(--serif); font-size: 15px; color: var(--blue);
    text-decoration: none; padding: 8px 13px; border-radius: 8px;
    border: 1px solid transparent; background: none; cursor: pointer;
}
.nav a:hover, .nav .linkish:hover { background: rgba(255,255,255,.8); border-color: var(--line); }
.nav a.is-active { background: #fff; border-color: var(--line); color: var(--ink); box-shadow: var(--shadow-sm); }
.nav__logout { margin: 0; }
.nav__back { color: var(--ink-faint); font-size: 13px; }
.nav__cta {
    background: linear-gradient(180deg, #5b4383, var(--blue-mid));
    border-color: #2e1a46 !important; color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), var(--shadow-sm);
}
.nav__cta:hover { background: linear-gradient(180deg, #6b4f99, #4a2b6e); }
.navtoggle, .burger { display: none; }

/* ------------------------------------------------- переключатель миров */

.worldbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 14px 0 20px;
}
.worldbar__label {
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-faint); margin-right: 4px;
}
.wchip {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 14px; border-radius: 22px; text-decoration: none;
    border: 1px solid var(--line); background: rgba(255,255,255,.75);
    color: var(--ink-soft); font-size: 14px; transition: .15s;
}
.wchip:hover { background: #fff; border-color: var(--chip, var(--blue-lite)); color: var(--ink); }
.wchip.is-active {
    background: #fff; color: var(--ink); font-weight: 600;
    border-color: var(--chip); box-shadow: inset 0 0 0 1px var(--chip), var(--shadow-sm);
}
.wchip__dot {
    width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: #46ab76; box-shadow: 0 0 0 3px rgba(70,171,118,.18);
}
.wchip__dot.is-off { background: #b9a0a0; box-shadow: 0 0 0 3px rgba(185,160,160,.18); }
.wchip__name { font-family: var(--serif); }
.wchip__online {
    font-size: 12px; color: var(--ink-faint);
    border-left: 1px solid var(--line-soft); padding-left: 9px;
}

@media (max-width: 760px) {
    .masthead { padding: 16px 0 10px; }
    .brand { gap: 9px; }
    .brand__name { font-size: 23px; }
    .brand__wing { width: 30px; height: 13px; }
    .brand__sub { font-size: 11px; }
    .burger {
        display: block; width: 42px; height: 38px; border: 1px solid var(--line);
        border-radius: 10px; background: rgba(255,255,255,.85); position: relative; cursor: pointer;
    }
    .burger span, .burger span::before, .burger span::after {
        position: absolute; left: 11px; width: 18px; height: 2px; background: var(--blue); content: '';
    }
    .burger span { top: 18px; }
    .burger span::before { top: -6px; left: 0; }
    .burger span::after  { top:  6px; left: 0; }
    .nav {
        display: none; width: 100%; flex-direction: column; align-items: stretch;
        background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px;
    }
    .nav a, .nav .linkish { width: 100%; text-align: left; }
    .navtoggle:checked ~ .nav { display: flex; }
    .worldbar { gap: 6px; margin: 10px 0 16px; }
    .worldbar__label { width: 100%; margin: 0 0 2px; }
    .wchip { padding: 7px 11px; font-size: 13px; flex: 1 1 auto; justify-content: center; }
    .wchip__name { font-size: 13px; }
}

/* ---------------------------------------------------------------- герой */

.hero {
    position: relative; overflow: hidden; margin-bottom: 22px;
    border: 1px solid #8fd0e2; border-radius: var(--radius);
    background: linear-gradient(180deg, #f2fbfd 0%, #dcf2f8 100%);
    box-shadow: inset 0 1px 0 #fff, var(--shadow);
    min-height: 266px; display: flex; align-items: center;
}
.hero__art {
    position: absolute; inset: 0 0 0 36%;
    background: url("/template/lineagetwo/img/ratebg.png") no-repeat right center / cover;
    filter: saturate(.45) hue-rotate(165deg) brightness(1.12);
    opacity: .5;
}
/* Фигура — арт с главной сайта: он уже в холодной стальной гамме, достаточно
   слегка приглушить, не перекрашивая. */
.hero__fig {
    position: absolute; right: 3%; bottom: 0; width: 380px; height: 106%;
    background: var(--fig, url("/template/lineagetwo/img/slider1.png")) no-repeat bottom right / contain;
    filter: saturate(.8) drop-shadow(0 6px 16px rgba(21,56,77,.22));
}
.hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, #eef9fc 0%, rgba(238,249,252,.9) 34%, rgba(238,249,252,0) 70%);
}
.hero__text { position: relative; z-index: 2; padding: 32px; max-width: 620px; }
.hero__kicker {
    margin: 0 0 8px; font-size: 12px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--ink-faint);
}
.hero__title {
    margin: 0 0 10px; font-family: var(--serif); font-weight: normal;
    font-size: 40px; line-height: 1.08; color: var(--blue); text-shadow: 0 1px 0 #fff;
}
.hero__lede { margin: 0 0 18px; color: var(--ink-soft); max-width: 470px; }

@media (max-width: 760px) {
    .hero { min-height: 0; }
    .hero__text { padding: 22px 20px; }
    .hero__title { font-size: 28px; }
    .hero__fig { display: none; }
    .hero__art { inset: 0; opacity: .28; }
    .hero::after { background: linear-gradient(180deg, rgba(255,255,255,.93), rgba(255,255,255,.86)); }
}

/* --------------------------------------------------------------- панели */

.panel {
    background: #eef9fc;
    border: 1px solid #8fd0e2;
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 1px 0 rgba(255,255,255,.9), var(--shadow);
    margin-bottom: 22px;
    overflow: hidden;
}
.panel__head {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 13px 20px;
    background: linear-gradient(180deg, #a9dfee 0%, #cdeef5 55%, #e9f8fb 100%);
    border-bottom: 1px solid #8fd0e2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.panel__head h1, .panel__head h2 {
    margin: 0; font-family: var(--serif); font-size: 19px; font-weight: normal;
    color: var(--blue); display: flex; align-items: center; gap: 9px;
}
/* Ромбик-маркер перед заголовком панели. */
.panel__head h1::before, .panel__head h2::before {
    content: ''; width: 7px; height: 7px; flex: none; transform: rotate(45deg);
    background: linear-gradient(135deg, var(--blue-lite), var(--accent));
    box-shadow: 0 0 0 1px rgba(255,255,255,.8);
}
.panel__head .spacer { margin-left: auto; }
/* Уголки-засечки: мелкая резьба по краям панели, как в старых шаблонах. */
.panel { position: relative; }
.panel::before, .panel::after {
    content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none;
    border-color: rgba(61,35,92,.45); border-style: solid; border-width: 0;
}
.panel::before { left: 5px;  bottom: 5px; border-left-width: 2px;  border-bottom-width: 2px;  border-bottom-left-radius: 5px; }
.panel::after  { right: 5px; bottom: 5px; border-right-width: 2px; border-bottom-width: 2px; border-bottom-right-radius: 5px; }
.panel__body { padding: 20px; }
.panel__body > :first-child { margin-top: 0; }
.panel__body > :last-child  { margin-bottom: 0; }

.lede { color: var(--ink-soft); }

.ornate {
    font-family: var(--serif); font-size: 21px; font-weight: normal;
    color: var(--blue); margin: 0 0 14px; display: flex; align-items: center; gap: 12px;
}
.ornate::after {
    content: ''; flex: 1; height: 5px;
    background: radial-gradient(circle at 50% 50%, rgba(61,35,92,.3) 0 1.2px, rgba(61,35,92,0) 1.6px) 0 50% / 10px 5px repeat-x;
}

/* --------------------------------------------------------------- сетка */

.grid { display: grid; gap: 18px; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); }

/* ------------------------------------------------------- карточки миров */

.world {
    position: relative; overflow: hidden;
    border: 1px solid #8fd0e2; border-radius: var(--radius);
    background: linear-gradient(180deg, #f2fbfd, #daf0f7);
    box-shadow: inset 0 1px 0 #fff, var(--shadow-sm);
    padding: 18px 18px 16px;
    display: flex; flex-direction: column; gap: 10px;
    transition: .18s;
}
/* Цветная кромка сверху — быстрый способ отличить мир с одного взгляда. */
.world::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--wc, var(--blue-mid)), rgba(255,255,255,0));
}
.world:hover { box-shadow: inset 0 1px 0 #fff, var(--shadow); transform: translateY(-1px); }
.world--off { background: linear-gradient(180deg, #fbfcfd, #f1f4f6); }
.world__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.world__name { font-family: var(--serif); font-size: 19px; color: var(--blue); }
.world__chr {
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-faint); border: 1px solid var(--line); border-radius: 20px; padding: 2px 9px;
}
.world__desc { font-size: 13px; color: var(--ink-soft); margin: 0; min-height: 36px; }
.world__nums { display: flex; gap: 18px; flex-wrap: wrap; margin-top: auto; }
.world__num b { font-family: var(--serif); font-size: 22px; color: var(--ink); display: block; }
.world__num span { font-size: 12px; color: var(--ink-faint); }

.badge {
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 20px; border: 1px solid; white-space: nowrap;
}
.badge--on  { color: #1c6b45; border-color: #9fd3b8; background: #e8f7ef; }
.badge--off { color: #7a5050; border-color: #ddc1c1; background: #faeeee; }
.badge--neutral { color: var(--ink-soft); border-color: var(--line); background: var(--panel-tint); }

.bar { height: 6px; border-radius: 4px; background: #bce4ee; overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue-lite), var(--wc, var(--blue-mid))); }

/* ---------------------------------------------------------- показатели */

.stat {
    border: 1px solid #8fd0e2; border-radius: var(--radius);
    background: linear-gradient(180deg, #f2fbfd 0%, #daf0f7 100%);
    box-shadow: inset 0 1px 0 #fff, var(--shadow-sm);
    padding: 15px 16px; text-align: center;
}
.stat b { display: block; font-family: var(--serif); font-size: 27px; color: var(--blue); text-shadow: 0 1px 0 #fff; }
.stat span { font-size: 12px; color: var(--ink-soft); }

/* --------------------------------------------------------------- формы */

.form { max-width: 460px; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 5px; }
.field .hint { font-size: 12px; color: var(--ink-faint); margin-top: 5px; }

input[type=text], input[type=email], input[type=password], select {
    width: 100%; padding: 11px 13px; font: inherit; color: var(--ink); background: #fff;
    border: 1px solid var(--line); border-radius: 9px;
    box-shadow: inset 0 1px 3px rgba(24,12,40,.07);
}
input:focus, select:focus {
    outline: none; border-color: var(--blue-lite); box-shadow: 0 0 0 3px rgba(61,35,92,.18);
}

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font: inherit; font-family: var(--serif); padding: 11px 21px; color: #fff;
    background: linear-gradient(180deg, #5b4383, var(--blue-mid));
    border: 1px solid #2e1a46; border-radius: 9px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 5px rgba(24,12,40,.2);
    cursor: pointer; text-decoration: none;
}
.btn:hover { background: linear-gradient(180deg, #6b4f99, #4a2b6e); }
.btn:active { box-shadow: inset 0 2px 4px rgba(0,0,0,.18); }
.btn--ghost {
    color: var(--blue); background: linear-gradient(180deg, #f6fcfe, #dcf2f8);
    border-color: var(--line); box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { background: #fff; border-color: var(--blue-lite); }
.btn--danger { background: linear-gradient(180deg, #b06a62, #8c2f2a); border-color: #6f241f; }
.btn--sm { padding: 7px 13px; font-size: 14px; }
.btn[disabled], .btn--off { opacity: .5; pointer-events: none; }

.linkish {
    font: inherit; color: var(--blue); background: none; border: none; padding: 0;
    cursor: pointer; text-decoration: underline;
}
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ----------------------------------------------------------- сообщения */

.flash { border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; border: 1px solid; }
.flash--ok  { color: var(--ok);  border-color: #a9d8bf; background: #eef9f3; }
.flash--err { color: var(--err); border-color: #e3bcb7; background: #fdf1ef; }

.note {
    border-left: 3px solid var(--blue-lite); background: var(--panel-tint);
    padding: 11px 15px; border-radius: 0 9px 9px 0; color: var(--ink-soft); font-size: 14px;
}

/* -------------------------------------------------------------- таблицы */

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th, table.t td {
    padding: 10px 12px; text-align: left;
    border-bottom: 1px solid var(--line-soft); white-space: nowrap;
}
table.t th {
    font-family: var(--serif); font-weight: normal; color: var(--blue);
    background: var(--panel-tint); border-bottom: 1px solid var(--line);
}
table.t tbody tr:hover { background: #f4fcfe; }
table.t td.wide { white-space: normal; }
table.t .num { text-align: right; font-variant-numeric: tabular-nums; }
.rank {
    display: inline-flex; align-items: center; justify-content: center;
    width: 25px; height: 25px; border-radius: 50%;
    background: var(--panel-tint); border: 1px solid var(--line);
    font-size: 12px; color: var(--ink-soft);
}
.rank--1 { background: linear-gradient(180deg,#fdf6e2,#f6e3b4); border-color: #e0c279; color: #7d5a0e; }
.rank--2 { background: linear-gradient(180deg,#f7f9fa,#e6ebee); border-color: #c6d1d7; color: #56646d; }
.rank--3 { background: linear-gradient(180deg,#fbf0e6,#efd9c4); border-color: #d9b694; color: #7d5634; }

.crest { width: 16px; height: 16px; image-rendering: pixelated; vertical-align: -3px; margin-right: 6px; }

/* --------------------------------------------------------------- табы */

.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs a {
    font-family: var(--serif); font-size: 14px; text-decoration: none; color: var(--blue);
    padding: 7px 14px; border: 1px solid var(--line); border-radius: 20px;
    background: rgba(255,255,255,.75);
}
.tabs a:hover { background: #fff; }
.tabs a.is-active {
    background: linear-gradient(180deg, #5b4383, var(--accent));
    color: #fff; border-color: rgba(0,0,0,.12);
}

/* ---------------------------------------------------------- персонажи */

.chars { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.charcard {
    display: flex; gap: 14px; align-items: center;
    border: 1px solid #8fd0e2; border-radius: var(--radius);
    background: linear-gradient(180deg, #f2fbfd, #daf0f7);
    box-shadow: inset 0 1px 0 #fff, var(--shadow-sm);
    padding: 14px 16px; text-decoration: none; color: inherit; transition: .16s;
}
.charcard:hover { border-color: var(--blue-lite); box-shadow: inset 0 1px 0 #fff, var(--shadow); transform: translateY(-1px); }
/* Портрет расы + значок уровня. Картинки берём из набора, который уже лежит
   на хостинге (/uploads/images/race). */
/* Обрезка по кругу живёт на внутреннем .charcard__pic, а не на самой рамке:
   иначе overflow:hidden срезает значок уровня, который должен лежать
   «бабблом» поверх портрета и круга. */
.charcard__face { position: relative; flex: none; width: 62px; height: 62px; }
.charcard__pic {
    display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
    background: linear-gradient(180deg, #7acfe4, var(--blue));
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.8), 0 2px 7px rgba(24,12,40,.28);
}
.charcard__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.charcard__face.is-blank img { display: none; }
.charcard__face b {
    position: absolute; right: -7px; bottom: -3px; z-index: 2;
    min-width: 26px; padding: 0 6px;
    font-family: var(--serif); font-size: 13px; line-height: 20px; text-align: center;
    color: #fff; background: linear-gradient(180deg, #5b4383, #3d235c);
    border: 1px solid rgba(255,255,255,.85); border-radius: 11px;
    box-shadow: 0 2px 6px rgba(24,12,40,.35);
}
.charcard__name { font-family: var(--serif); font-size: 17px; color: var(--blue); display: block; }
.charcard__meta { font-size: 13px; color: var(--ink-soft); display: block; }
.charcard__state { margin-left: auto; text-align: right; }

/* ------------------------------------------------------------ предметы */

.items { display: flex; flex-wrap: wrap; gap: 8px; }
.item {
    position: relative; width: 48px; height: 48px; border-radius: 8px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #e9f8fb, #dff3f9);
    display: grid; place-items: center;
}
.item img { width: 32px; height: 32px; }
.item--d { border-color: #b7c9e8; box-shadow: inset 0 0 0 1px #dde6f7; }
.item--c { border-color: #a9d8c0; box-shadow: inset 0 0 0 1px #d8efe4; }
.item--b { border-color: #c3c0e4; box-shadow: inset 0 0 0 1px #e3e2f4; }
.item--a { border-color: #e2c08f; box-shadow: inset 0 0 0 1px #f3e4c9; }
.item--s { border-color: #e2a08f; box-shadow: inset 0 0 0 1px #f5d9d1; }
.item__n {
    position: absolute; right: 2px; bottom: 1px; font-size: 10px; color: #fff;
    background: rgba(22,58,77,.78); border-radius: 3px; padding: 0 3px; line-height: 13px;
}
.item__e {
    position: absolute; left: 3px; top: 1px; font-size: 10px; color: #fff5cf;
    text-shadow: 0 1px 2px rgba(0,0,0,.85); font-weight: 700;
}
.slotgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.slot { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.slot__label { color: var(--ink-faint); font-size: 11px; display: block; }
.slot__name { color: var(--ink); }

.empty { color: var(--ink-faint); font-style: italic; }

/* ---------------------------------------------------------- подвал */

.foot {
    margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line);
    font-size: 12px; color: var(--ink-faint); text-align: center;
}
.foot p { margin: 4px 0; }
.foot a { color: var(--ink-soft); }

.arrows { list-style: none; margin: 0; padding: 0; }
.arrows li { padding-left: 18px; position: relative; margin: 6px 0; }
.arrows li::before { content: '›'; position: absolute; left: 4px; top: -1px; color: var(--blue-lite); font-size: 16px; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; font-size: 14px; }
.kv dt { color: var(--ink-faint); }
.kv dd { margin: 0; }


/* ------------------------------------------- онбординг на странице аккаунта */

.panel--accent { border-color: var(--ink); }
.panel--accent .panel__head { background: linear-gradient(180deg, #8ed4e6 0%, #bfe8f2 60%, #ddf4f9 100%); }

.step { display: flex; gap: 14px; align-items: flex-start; }
.step__num {
    flex: none; width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--serif); font-size: 19px; color: #fff;
    background: linear-gradient(180deg, #5b4383, var(--ink));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.step__title { margin: 2px 0 6px; font-family: var(--serif); font-weight: normal; font-size: 17px; color: var(--ink); }
.step .lede { margin: 0 0 10px; }