*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
         background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.6; }

  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; }

  /* Верхняя панель закреплена и идёт во всю ширину, вместе с маркой портала:
     раньше «Data Center» стоял в самом меню и уезжал вверх при прокрутке. */
  .navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    background: #0E1A2B; color: #fff; padding: 0 1.5rem 0 0;
    display: flex; align-items: center; height: 52px; gap: 8px;
  }
  body{ padding-top: 52px; }
  .navbar .brand { font-size: 15px; font-weight: 600; color: #E8FF47; letter-spacing: 0.02em; white-space: nowrap; }
  /* Марка занимает ту же колонку, что и меню, — шапка и меню читаются одним углом. */
  .nav-brand{display:flex;align-items:center;gap:7px;height:52px;flex:0 0 auto;
    padding:0 6px 0 0;color:#E8FF47;font-size:15px;font-weight:600;letter-spacing:.02em;
    white-space:nowrap;text-decoration:none;}
  /* Кнопка-бургер сворачивает меню — она в шапке, а не внизу списка:
     сворачивают меню часто, а мотать список до низа ради этого незачем. */
  .nav-burger{width:38px;height:38px;flex:0 0 38px;margin-left:6px;border:0;background:none;
    cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
    border-radius:9px;padding:0;}
  .nav-burger:hover{background:rgba(255,255,255,.10);}
  /* Три полоски рисуем сами: в облегчённом наборе значков «меню» нет, и кнопка
     оказывалась пустым местом. */
  .nav-burger span{position:relative;display:block;width:18px;height:2px;border-radius:2px;
    background:#fff;}
  .nav-burger span::before,.nav-burger span::after{content:'';position:absolute;left:0;
    width:18px;height:2px;border-radius:2px;background:#fff;}
  .nav-burger span::before{top:-6px;}
  .nav-burger span::after{top:6px;}
  .nav-brand:hover{text-decoration:none;color:#E8FF47;}
  /* Знак и слово — два отдельных файла: в узком окне слово прячется, знак остаётся. */
  .nav-brand .mark{width:20px;flex:0 0 20px;display:flex;align-items:center;}
  .nav-brand .lbl{display:flex;align-items:center;}
  .nav-brand img{display:block;}
  @media(max-width:820px){ .nav-brand .lbl{display:none;} }
  /* Всё в правой части шапки — на одной линии. Обёртки значков были
     строчными блоками и «висли» на базовой линии текста, из-за чего колокольчик
     и звёздочка стояли выше кнопки. */
  .navbar .nav-links { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; }
  .navbar .nav-links > div { display: flex; align-items: center; }
  .navbar .nav-links a { color: rgba(255,255,255,0.7); font-size: 13px; }
  .navbar .nav-links a:hover, .navbar .nav-links a.active { color: #fff; text-decoration: none; }
  .navbar .user-badge {
    font-size: 12px; color: rgba(255,255,255,0.5);
    border-left: 1px solid rgba(255,255,255,0.15); padding-left: 1.25rem; white-space: nowrap;
    cursor: pointer; user-select: none;
  }
  .navbar .user-badge:hover { color: rgba(255,255,255,0.8); }
  @keyframes srvPulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }
  .um-wrap { position: relative; }
  .um-caret { font-size: 9px; margin-left: 3px; opacity: 0.7; }
  .um-drop {
    display: none; position: absolute; top: calc(100% + 10px); right: 0;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
    min-width: 250px;
    box-shadow: var(--shadow-pop); padding: 8px; z-index: 200; color: var(--ink);
  }
  .um-drop.open { display: block; }
  .um-head { font-size: 13.5px; font-weight: 700; padding: 8px 10px 6px; color: var(--ink); }
  .um-label { font-size: 10.5px; text-transform: uppercase; color: var(--mut); padding: 6px 10px 3px; letter-spacing: .04em; }
  /* Выбор темы: кружок с самой темой вместо названия — так понятнее, чем
     слова «мягкий» и «песок». */
  .um-themes{display:flex;gap:6px;padding:4px 10px 8px;flex-wrap:wrap;}
  .um-th{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;
    cursor:pointer;font:inherit;font-size:10px;color:#8b93a0;padding:0;width:46px;}
  .um-th i{width:28px;height:28px;border-radius:50%;border:2px solid transparent;display:block;
    box-shadow:0 0 0 1px #e2e2da inset;}
  .um-th[data-bg="none"] i{background:#f5f5f0;}
  .um-th[data-bg="mesh"] i{background:linear-gradient(140deg,#dff0e6,#e7edf5 60%,#f6f7d9);}
  .um-th[data-bg="field"] i{background:repeating-linear-gradient(100deg,#dbe9d8 0 6px,#cfe0cb 6px 12px);}
  .um-th[data-bg="sand"] i{background:linear-gradient(140deg,#efe6d6,#f7f2e8);}
  .um-th[data-bg="night"] i{background:linear-gradient(140deg,#16222e,#26404f);}
  .um-th[data-bg="stadium"] i{background:url("/static/img/bg/stadium.webp") center/cover;}
  .um-th.on i{border-color:#185FA5;}
  .um-th.on{color:#1a1a1a;font-weight:600;}
  .um-status {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    background: none; border: 0; padding: 8px 10px; border-radius: var(--r-s);
    cursor: pointer; font-size: 13px; color: var(--ink-2);
  }
  .um-status:hover { background: var(--panel-2); }
  .um-status .um-sub { color: #999; font-size: 11.5px; }
  .um-sdot { width: 9px; height: 9px; border-radius: 50%; background: #c9ccc9; flex: 0 0 auto; }
  .um-sdot.on { background: #2bbf6a; }
  .um-snds { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 12px 8px; }
  .um-snd { border: 1px solid var(--line); background: var(--panel); border-radius: 20px; font: inherit;
    font-size: 11.5px; color: var(--ink-2); padding: 4px 10px; cursor: pointer; }
  .um-snd:hover { background: var(--accent-soft); border-color: var(--accent); }
  .um-snd.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
  .um-status .um-check { margin-left: auto; color: #185FA5; font-weight: 700; opacity: 0; }
  .um-status.sel .um-check { opacity: 1; }
  .um-div { height: 1px; background: var(--line-soft); margin: 6px 4px; }
  .um-item {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    background: none; border: 0; padding: 9px 10px; border-radius: var(--r-s);
    cursor: pointer; font-size: 13px; color: var(--ink-2); text-decoration: none;
  }
  .um-item:hover { background: var(--panel-2); text-decoration: none; }
  .um-eaddr { margin-left: auto; font-size: 11px; color: #2bbf6a; overflow: hidden; text-overflow: ellipsis; max-width: 130px; white-space: nowrap; }

  .section-nav {
    background: var(--panel); border-bottom: 1px solid var(--line);
    display: flex; gap: 0; padding: 0 1.5rem;
  }
  .section-nav a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 16px; font-size: 13px; color: #666;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
  }
  .section-nav a:hover { color: var(--ink); text-decoration: none; }
  .section-nav a.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

  /* Ширина меню — переменная: на неё опираются и отступ страницы, и блоки
     «во всю ширину», иначе они уезжали бы под меню. */
  :root{ --side: 228px; }
  body.side-off{ --side: 56px; }

  .sidenav{position:fixed;left:0;top:52px;bottom:0;width:var(--side);background:#0E1A2B;
    display:flex;flex-direction:column;padding:0 0 10px;overflow-y:auto;overflow-x:hidden;
    z-index:41;transition:width .15s;}
  .sidenav{padding-top:6px;}
  .sidenav::-webkit-scrollbar{width:6px;} .sidenav::-webkit-scrollbar-thumb{background:#2b3a48;border-radius:3px;}
  .sidenav .sn-g{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#5d6b78;
    font-weight:700;padding:12px 16px 5px;white-space:nowrap;}
  .sidenav a{display:flex;align-items:center;gap:10px;padding:8px 16px;color:#b8c4cf;
    font-size:13px;text-decoration:none;white-space:nowrap;position:relative;}
  .sidenav a:hover{background:#1b2c3a;color:#fff;text-decoration:none;}
  .sidenav a.active{background:#1b2c3a;color:#fff;box-shadow:inset 3px 0 0 #E8FF47;}
  .sidenav a i,.sidenav a .ico{width:18px;flex:0 0 18px;text-align:center;font-size:15px;}
  .sidenav .lbl{overflow:hidden;text-overflow:ellipsis;}
  .sidenav .dot{position:absolute;left:26px;top:7px;min-width:15px;height:15px;padding:0 4px;
    background:#e5484d;color:#fff;border-radius:8px;font-size:9.5px;font-weight:700;
    display:none;align-items:center;justify-content:center;line-height:1;}
  body.side-off .sidenav .lbl,body.side-off .sidenav .sn-g{display:none;}
  body.side-off .sidenav a{justify-content:center;padding:9px 0;}
  .sn-foot{margin-top:auto;flex:0 0 auto;}
  .sn-toggle{border:0;background:none;color:#5d6b78;cursor:pointer;width:100%;
    display:flex;align-items:center;gap:10px;padding:10px 16px;font:inherit;font-size:12px;}
  .sn-toggle:hover{color:#b8c4cf;}
  body.side-off .sn-toggle{justify-content:center;padding:10px 0;}
  /* Режим настройки: пункты берутся мышкой, переходы на это время отключаем —
     иначе первое же перетаскивание уводит со страницы. */
  body.sn-edit .sidenav a{cursor:grab;background:#182936;padding-right:26px;}
  body.sn-edit .sidenav a:active{cursor:grabbing;}
  /* Точки-ручка: по ним сразу видно, что пункт можно взять и потащить.
     Рисуем сеткой из градиента, а не символом, — знак ⠿ есть не в каждом шрифте. */
  body.sn-edit .sidenav a[data-k]::after{content:'';position:absolute;right:9px;top:50%;
    width:7px;height:15px;transform:translateY(-50%);opacity:.6;
    background-image:radial-gradient(#8fa3b5 1.1px, transparent 1.3px);background-size:4px 4px;}
  body.sn-edit .sidenav a:hover::after{opacity:1;}
  /* В свёрнутом меню пункт — одна иконка, точкам там места нет. */
  body.side-off.sn-edit .sidenav a{padding-right:0;}
  body.side-off.sn-edit .sidenav a[data-k]::after{display:none;}
  /* Взятый пункт переезжает вместе с курсором и по дороге выглядит как место,
     которое он займёт: пунктирная рамка на своей будущей строке. Раньше он
     оставался на старом месте, а под соседом загоралась полоска — и куда
     именно он встанет, было ясно только после того, как отпустишь. */
  body.sn-edit .sidenav a.sn-drag{opacity:.5;background:#1d3242;
    outline:1px dashed #E8FF47;outline-offset:-2px;}
  body.sn-edit .sidenav a.sn-to{box-shadow:inset 0 2px 0 #E8FF47;}
  /* Приземлился: короткая вспышка подтверждает, что перестановка принята. */
  .sidenav a.sn-land{animation:snLand .5s ease;}
  @keyframes snLand{ from{background:#2b4b23;box-shadow:inset 2px 0 0 #E8FF47;} }
  @media(prefers-reduced-motion:reduce){ .sidenav a.sn-land{animation:none;} }
  body.sn-edit #snCfg{color:#E8FF47;}
  .sn-tip{font-size:10.5px;color:#5d6b78;line-height:1.4;padding:2px 16px 8px;display:none;}
  body.sn-edit .sn-tip{display:block;}
  body.side-off .sn-tip{display:none;}
  .sn-tip a{display:inline!important;padding:0!important;color:#8fa3b5;text-decoration:underline;
    background:none!important;}

  /* Отступ под меню — только когда меню есть. На входе и других страницах без
     сайдбара он сдвигал всю страницу вправо на пустое место. */
  body.has-side{padding-left:var(--side);}
  @media(max-width:820px){ :root{ --side: 56px; } .sidenav .lbl,.sidenav .sn-g{display:none;}
    .sidenav a{justify-content:center;padding:9px 0;}
    /* На узком экране меню и так одни иконки — подсказке и точкам там не поместиться. */
    body.sn-edit .sn-tip{display:none;}
    body.sn-edit .sidenav a{padding-right:0;}
    body.sn-edit .sidenav a[data-k]::after{display:none;} }

  .container { max-width: 860px; margin: 0 auto; padding: 2rem 1rem; }

  .card {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--r); padding: 1.25rem 1.5rem; margin-bottom: 1rem;
    box-shadow: var(--shadow);
  }
  .card-title {
    font-size: 11px; font-weight: 700; color: var(--mut); text-transform: uppercase;
    letter-spacing: 0.06em; margin-bottom: 1rem;
  }

  .btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 17px; border-radius: var(--r-s); font-size: 14px; cursor: pointer;
    border: 1px solid var(--line); background: var(--panel); color: var(--ink);
    transition: background var(--speed), border-color var(--speed),
                box-shadow var(--speed), transform var(--speed);
  }
  .btn:hover { background: var(--panel-2); border-color: #d7dde7; text-decoration: none; }
  /* Кнопка отвечает на курсор: без отклика непонятно, нажалась она или нет. */
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .btn-primary:hover { background: #1a62d2; border-color: #1a62d2;
    box-shadow: 0 6px 16px rgba(29,111,235,.25); }
  .btn-success { background: #1A6B3C; color: #fff; border-color: #1A6B3C; }
  .btn-success:hover { background: #155c33; }
  .btn-block { width: 100%; justify-content: center; }

  .form-group { margin-bottom: 1rem; }
  .form-label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 4px; }
  .form-control {
    width: 100%; padding: 9px 12px; border: 1px solid var(--line);
    border-radius: var(--r-s); font-size: 14px; outline: none;
    background: var(--panel); color: var(--ink);
    transition: border-color var(--speed), box-shadow var(--speed);
  }
  .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

  .alert { padding: 10px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 1rem; }
  .alert-danger { background: #fef2f2; border: 0.5px solid #fca5a5; color: #991b1b; }
  .alert-success { background: #f0fdf4; border: 0.5px solid #86efac; color: #166534; }
  .alert-info { background: #eff6ff; border: 0.5px solid #93c5fd; color: #1e40af; }

  .badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }
  .badge-blue { background: #dbeafe; color: #1e40af; }
  .badge-green { background: #dcfce7; color: #166534; }
  .badge-gray { background: #f1f0e8; color: #555; }

  .table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .table th { text-align: left; padding: 8px 10px; color: var(--mut); font-weight: 600;
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid var(--line); }
  .table td { padding: 10px; border-bottom: 1px solid var(--line-soft); }
  .table tr:last-child td { border-bottom: none; }
  .table tr:hover td { background: var(--panel-2); }

  .upload-zone {
    border: 1.5px dashed #ccc; border-radius: 10px;
    padding: 2.5rem 1rem; text-align: center;
    background: #fafaf5; cursor: pointer; transition: border-color 0.2s;
  }
  .upload-zone:hover, .upload-zone.dragover { border-color: #185FA5; background: #eff6ff; }
  .upload-zone .icon { font-size: 36px; margin-bottom: 8px; }
  .upload-zone p { color: #666; font-size: 14px; margin-bottom: 12px; }

  .stat-row { display: flex; gap: 12px; margin-top: 12px; }
  .stat { flex: 1; background: var(--panel-2); border-radius: var(--r-s); padding: 12px 14px; }
  .stat .val { font-size: 24px; font-weight: 700; color: var(--ink);
    font-variant-numeric: tabular-nums; }
  .stat .lbl { font-size: 11px; color: var(--mut); margin-top: 2px; }

  .spinner {
    width: 32px; height: 32px; border: 3px solid #e0e0d8;
    border-top-color: #185FA5; border-radius: 50%;
    animation: spin 0.8s linear infinite; margin: 0 auto 12px;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  .mapping-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .mapping-grid .form-group { margin-bottom: 0; }

  /* футер — общий компонент templates/_footer.html (стили внутри include) */

  /* Полоса «нет сети». Держится поверх всего и не даёт принять вчерашние
     данные за сегодняшние: человек видит переписку, но знает, что она
     последняя загруженная, а не свежая. */
  .off-bar{position:fixed;left:0;right:0;bottom:0;z-index:9000;
    background:#3A2E14;color:#FFE7A8;font-size:12.5px;line-height:1.5;
    padding:9px 16px;text-align:center;box-shadow:0 -4px 14px rgba(0,0,0,.22);}
  .off-bar b{color:#FFD166;}

  /* ── Кнопки портала (система «сегменты + кнопки», выбор владельца 24.08.2026).
     Кнопка ДЕЛАЕТ действие, сегмент МЕНЯЕТ вид. Разные роли — разная форма:
     до этого каждая страница рисовала своё, и рядом стояли три несхожих стиля. */
  /* Ровно 32 пикселя высоты у кнопки и у сегмента: высота задана явно, а не
     набегает из паддингов — иначе рядом стоящие элементы всегда чуть разные. */
  .pbtn{font:inherit;font-size:12.5px;font-weight:600;height:32px;padding:0 14px;
    display:inline-flex;align-items:center;gap:6px;border-radius:9px;
    border:1px solid var(--line);background:var(--panel);color:var(--ink-2);cursor:pointer;
    white-space:nowrap;box-sizing:border-box;}
  .pbtn:hover{border-color:#c9d3e2;}
  .pbtn.pri{background:var(--accent);border-color:var(--accent);color:#fff;}
  .pbtn.pri:hover{filter:brightness(1.06);}
  .pbtn.danger{color:#B03050;}
  .pbtn[disabled]{opacity:.55;cursor:default;}
  .pseg{display:inline-flex;background:#e3e8ef;border-radius:9px;padding:3px;gap:2px;
    height:32px;box-sizing:border-box;align-items:center;}
  .pseg button{font:inherit;font-size:12.5px;font-weight:600;border:0;background:transparent;
    border-radius:7px;height:26px;padding:0 12px;display:inline-flex;align-items:center;
    color:#5a6577;cursor:pointer;white-space:nowrap;box-sizing:border-box;}
  .pseg button.on{background:var(--accent);color:#fff;box-shadow:0 1px 3px rgba(15,23,42,.18);}

  /* ── Селекторы (стандарт №1 + поисковый №7, выбор владельца 24.08.2026).
     .psel — нативный select в виде кнопки: та же высота и рамка, свой шеврон.
     .psx — раскрывающийся список с поиском для длинных перечней: снаружи
     неотличим от .psel, внутри — строка поиска и свой список вместо
     системного меню. */
  .psel{font:inherit;font-size:12.5px;font-weight:600;height:32px;padding:0 30px 0 12px;
    border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);
    cursor:pointer;box-sizing:border-box;appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='%238a94a8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat;background-position:right 9px center;max-width:100%;}
  .psel:hover{border-color:#c9d3e2;}
  .psx{position:relative;display:inline-block;}
  .psx-b{min-width:150px;text-align:left;}
  .psx-p{position:absolute;top:36px;left:0;z-index:120;width:max(230px,100%);
    background:var(--panel);border:1px solid var(--line);border-radius:11px;
    box-shadow:0 10px 30px rgba(15,23,42,.14);overflow:hidden;}
  .psx-q{display:flex;align-items:center;gap:7px;padding:8px 12px;border-bottom:1px solid var(--line);}
  .psx-q input{border:0;outline:0;font:inherit;font-size:12.5px;flex:1;background:transparent;color:var(--ink);}
  .psx-l{max-height:260px;overflow-y:auto;padding:4px;}
  .psx-o{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;
    font-size:12.5px;font-weight:600;color:#3b4453;cursor:pointer;}
  .psx-o:hover{background:#f1f4f8;}
  .psx-o.on{background:#e7f0fe;color:#155ac6;}
  .psx-o .av{width:20px;height:20px;border-radius:50%;background:#dbe3ee;color:#5a6577;
    font-size:9.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none;}
  .psx-none{padding:10px 12px;font-size:12.5px;color:var(--mut);}

  /* ── Переключатель как в iOS (выбор владельца 25.08.2026). Класс ptog на
     обычном checkbox: серые квадратики настроек читались плохо, «вкл/выкл»
     привычнее ползунком. Чек-листы и множественный выбор остаются квадратиками
     — там отмечают пункты, а не включают режим. */
  input[type="checkbox"].ptog{appearance:none;-webkit-appearance:none;width:34px;height:19px;
    border-radius:10px;background:#d5dbe4;position:relative;cursor:pointer;outline:0;
    transition:background .18s;flex:0 0 auto;vertical-align:middle;margin:0;}
  input[type="checkbox"].ptog::after{content:'';position:absolute;top:2px;left:2px;
    width:15px;height:15px;border-radius:50%;background:#fff;
    box-shadow:0 1px 3px rgba(15,23,42,.25);transition:left .18s;}
  input[type="checkbox"].ptog:checked{background:var(--accent);}
  input[type="checkbox"].ptog:checked::after{left:17px;}
  input[type="checkbox"].ptog:focus-visible{box-shadow:0 0 0 3px var(--accent-soft);}

  /* ── Кнопка «назад» (вариант 2, выбор владельца 25.08.2026). Единая на весь
     портал: тот же радиус и высота, что у остальных кнопок, поэтому спокойно
     встаёт в один ряд с действиями раздела и не спорит с синей главной. */
  .pback{width:32px;height:32px;flex:0 0 32px;border-radius:9px;border:1px solid var(--line);
    background:var(--panel);color:#3b4453;display:inline-flex;align-items:center;
    justify-content:center;cursor:pointer;padding:0;box-sizing:border-box;}
  .pback:hover{border-color:#c9d3e2;background:#f7f9fc;}
  .pback:active{transform:translateY(1px);}
  .pback svg{width:18px;height:18px;}