/* =====================================================================
   MGBot Hub — единый вход в сервисы платформы.
   Auth-провайдер: IoT Platform (JWT + Яндекс OAuth). Токен хранится в
   localStorage['token'] и передаётся сервисам через query-параметр.
   ===================================================================== */
:root {
    --bg:#f1f2f1; --surface:#ffffff; --surface-2:#f2f3f2;
    --border:rgba(44,44,44,.12); --border-strong:rgba(44,44,44,.24);
    --text:#2c2c2c; --muted:rgba(44,44,44,.62); --faint:rgba(44,44,44,.45);
    --accent:#008736; --accent-hover:#13a650; --accent-dim:rgba(0,135,54,.10);
    --accent-line:rgba(0,135,54,.32); --on-accent:#ffffff;
    --danger:#d92c2c; --danger-dim:rgba(217,44,44,.10);
    /* Предупреждение: мягче «опасности», заметнее акцента. Для пометок вроде
       «бета» — сервис работает, но ещё обкатывается. */
    --warn:#b8791b; --warn-dim:rgba(184,121,27,.12);
    --r:22px; --r-md:15px; --r-sm:9px;
    --shadow:0 1px 2px rgba(44,44,44,.07);
    /* Внешние шрифты запрещены CSP (default-src 'self'), поэтому Roboto только
       из системы — тот же стек, что в MGBot AI. */
    --font:Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;
    color-scheme:light;
}
:root[data-theme="dark"] {
    --bg:#1a1a1a; --surface:#232323; --surface-2:#2c2c2c;
    --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.18);
    --text:#f0efeb; --muted:rgba(240,239,235,.62); --faint:rgba(240,239,235,.45);
    --accent:#13a650; --accent-hover:#3fd17b; --accent-dim:rgba(63,209,123,.14);
    --accent-line:rgba(63,209,123,.32); --on-accent:#0f1a12;
    --danger:#ff5c5c; --danger-dim:rgba(255,92,92,.12);
    --warn:#e0a84a; --warn-dim:rgba(224,168,74,.14);
    --shadow:0 1px 2px rgba(0,0,0,.4);
    color-scheme:dark;
}
* { box-sizing:border-box; }
body {
    margin:0; min-height:100vh; background:var(--bg);
    color:var(--text); font-family:var(--font); line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
a { color:var(--accent); text-decoration:none; }
.wrap { max-width:1120px; margin:0 auto; padding:24px; }

/* ---- Шапка ---- */
header {
    display:flex; align-items:center; gap:12px; padding:18px 0 6px;
}
.brand { display:flex; align-items:center; gap:10px; font-size:20px; font-weight:700; }
.brand .mark { width:40px; height:40px; display:block; flex:none; }
.brand em { font-style:normal; color:var(--accent); }
.spacer { flex:1; }
.icon-btn {
    width:40px; height:40px; border-radius:var(--r-sm); border:1px solid var(--border);
    background:var(--surface); color:var(--text); cursor:pointer; font-size:16px;
}
.icon-btn:hover { border-color:var(--accent); color:var(--accent); }

/* ---- Герой ---- */
.hero { padding:40px 0 28px; max-width:640px; }
.hero h1 { font-size:28px; margin:0 0 10px; line-height:1.2; font-weight:600; }
.hero p { color:var(--muted); font-size:16px; margin:0; }

.layout { display:grid; grid-template-columns:1fr 380px; gap:24px; align-items:start; }
@media (max-width:900px){ .layout{ grid-template-columns:1fr; } }

/* ---- Карточки сервисов ---- */
.section-title { font-size:15px; color:var(--text); font-weight:600; margin:0 0 12px; }

.cloud-link {
    display:flex; align-items:center; gap:14px; margin:0 0 28px; padding:14px 18px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
    color:var(--text); text-decoration:none;
}
.cloud-link:hover { border-color:var(--accent-line); }
.cloud-ico { width:46px; height:46px; flex-shrink:0; display:block; }
.cloud-text { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; font-size:13px; color:var(--muted); }
.cloud-text b { font-size:15px; color:var(--text); font-weight:600; }
.cloud-go { font-size:14px; font-weight:600; color:var(--accent); white-space:nowrap; }
@media (max-width:600px) { .cloud-link { flex-wrap:wrap } .cloud-go { width:100%; } }
.services { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .services{ grid-template-columns:1fr; } }
.svc {
    display:flex; flex-direction:column; gap:10px; padding:20px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
    box-shadow:var(--shadow); transition:border-color .15s;
}
.svc:hover { border-color:var(--border-strong); }
.svc.soon { background:transparent; box-shadow:none; }
.svc.pending { border-color:var(--accent); }
/* Сервисы, которые только что открыл ключ: после активации человек не
   понимал, куда нажимать, — теперь нужные кнопки видно сразу. */
.svc.fresh { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.svc.fresh .btn-primary { box-shadow:0 0 0 4px var(--accent-dim); }
.svc-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.svc-ico {
    width:40px; height:40px; border-radius:var(--r-sm); display:grid; place-items:center;
    background:var(--accent-dim); color:var(--accent);
}
.svc.soon .svc-ico { background:var(--surface-2); color:var(--faint); }
.svc-ico:has(> img) { width:44px; height:44px; background:none; }
.svc-ico img { width:44px; height:44px; display:block; }
.svc h3 { margin:0; font-size:16px; }
.svc .desc { color:var(--muted); font-size:13px; flex:1; }
.svc-actions { display:flex; gap:8px; margin-top:2px; flex-wrap:wrap; }

/* ---- Превью сервиса ----
   До входа карточка не предлагает никаких действий: вместо кнопки
   «войти, чтобы открыть» на каждой карточке — картинка того, что внутри,
   и один общий вход в шапке. Клик по карточке увеличивает картинку. */
.svc.preview { cursor:zoom-in; padding:0; overflow:hidden; gap:0; }
.svc.preview:hover { border-color:var(--accent-line); }
.svc-shot {
    display:block; width:100%; aspect-ratio:16/9; background:var(--surface-2);
    border-bottom:1px solid var(--border);
}
.svc-body { padding:16px; display:flex; flex-direction:column; gap:8px; }
.svc.preview .svc-hint {
    font-size:12px; color:var(--faint); display:flex; align-items:center; gap:6px;
}

/* ---- Просмотр превью во весь экран ---- */
.shot-modal {
    position:fixed; inset:0; background:rgba(0,0,0,.72); display:none;
    place-items:center; padding:24px; z-index:120;
}
.shot-modal.open { display:grid; }
.shot-box {
    background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
    padding:18px; width:100%; max-width:820px; display:flex; flex-direction:column; gap:12px;
}
.shot-box svg { width:100%; height:auto; border-radius:var(--r-md); border:1px solid var(--border); }
.shot-head { display:flex; align-items:center; gap:10px; }
.shot-head h3 { margin:0; font-size:17px; flex:1; }

/* ---- Публичные материалы: загрузки и энциклопедия ---- */
.dl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.dl {
    display:flex; align-items:flex-start; gap:12px; padding:14px 16px;
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--r-md); box-shadow:var(--shadow); color:var(--text);
}
.dl:hover { border-color:var(--accent-line); }
.dl-ico {
    width:38px; height:38px; flex:none; display:grid; place-items:center;
    border-radius:var(--r-sm); background:var(--accent-dim); color:var(--accent);
}
.dl-name { font-size:14px; font-weight:600; }
.dl-meta { font-size:12px; color:var(--muted); }
.dl-empty {
    padding:14px 16px; border:1px dashed var(--border-strong); border-radius:var(--r-md);
    color:var(--muted); font-size:13px;
}
.sso-badge {
    display:inline-block; font-size:10px; padding:3px 8px;
    border-radius:999px; background:var(--accent-dim); color:var(--accent);
    font-weight:600; white-space:nowrap;
}
.sso-badge.muted {
    background:transparent; border:1px solid var(--border); color:var(--faint);
}
/* Бета — предупреждение, а не возможность, поэтому цвет не акцентный. */
.sso-badge.beta { background:var(--warn-dim); color:var(--warn); }
.svc-top .sso-badge + .sso-badge { margin-left:6px; }
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:9px 14px; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer;
    font-family:inherit; font-size:13px; font-weight:600; background:var(--surface-2); color:var(--text);
    text-decoration:none;
}
.btn:hover { background:var(--border); }
.btn-primary { background:var(--accent); color:var(--on-accent); }
.btn-primary:hover { background:var(--accent-hover); }
.btn-sm { padding:7px 12px; font-size:12px; }
.btn.block { width:100%; }
.btn[disabled] { opacity:.55; cursor:not-allowed; }

/* ---- Панель входа / профиль ---- */
.side {
    background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
    padding:22px; position:sticky; top:24px;
}
.tabs { display:flex; gap:4px; background:var(--surface-2); border-radius:var(--r-sm); padding:4px; margin-bottom:18px; }
.tabs button {
    flex:1; padding:8px; border:none; background:transparent; color:var(--muted);
    font-family:inherit; font-size:14px; font-weight:600; border-radius:7px; cursor:pointer;
}
.tabs button.active { background:var(--accent-dim); color:var(--accent); }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label { font-size:13px; font-weight:600; }
.field input, .field select {
    padding:10px 12px; border:1px solid var(--border); border-radius:var(--r-sm);
    background:var(--bg); color:var(--text); font-family:inherit; font-size:14px;
}
.field input:focus, .field select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.hint { font-size:11px; color:var(--muted); }
.yandex {
    width:100%; padding:11px; border-radius:var(--r-sm); border:1px solid var(--border-strong);
    background:transparent; color:var(--text); font-family:inherit; font-weight:600; font-size:14px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;
}
.yandex:hover { border-color:var(--accent); }
.yandex .yid { background:#fc3f1d; color:#fff; width:20px; height:20px; border-radius:5px; display:grid; place-items:center; font-weight:800; font-size:13px; }
.divider { display:flex; align-items:center; gap:10px; color:var(--faint); font-size:12px; margin:16px 0; }
.divider::before, .divider::after { content:""; flex:1; height:1px; background:var(--border); }

/* Профиль (виден когда авторизован) */
.profile-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.avatar {
    width:44px; height:44px; border-radius:50%; background:var(--accent);
    color:var(--on-accent); display:grid; place-items:center; font-weight:700; font-size:18px;
}
.profile-info { flex:1; min-width:0; }
.profile-info .name { font-weight:600; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-info .role { font-size:12px; color:var(--muted); }

/* Уведомления */
.alert {
    margin-bottom:12px; padding:11px 13px; border-radius:var(--r-sm);
    font-size:12px; line-height:1.5;
}
.alert-info { background:var(--accent-dim); color:var(--text); }
.alert-info b { color:var(--accent); }
.alert-error { background:var(--danger-dim); color:var(--danger); }

.hidden { display:none !important; }

footer { color:var(--faint); font-size:12px; text-align:center; padding:34px 0 20px; }
footer .about-open { margin-bottom:14px; color:var(--muted); font-weight:500; }

/* ---- О платформе ---- */
.about {
    width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 48px); padding:0;
    background:var(--surface); color:var(--text); border:1px solid var(--border);
    border-radius:var(--r); box-shadow:0 16px 48px rgba(0,0,0,.22);
}
.about::backdrop { background:rgba(0,0,0,.6); }
.about-body { padding:24px; display:flex; flex-direction:column; gap:18px; }
.about-logo { display:block; width:200px; max-width:60%; height:auto; margin:0 auto 4px; }
.about h2 { margin:0; font-size:19px; font-weight:600; }
.about h3 { margin:0 0 6px; font-size:14px; font-weight:600; }
.about p { margin:0; color:var(--muted); font-size:14px; }
.about-goal { padding:14px 16px; border-radius:var(--r-md); background:var(--accent-dim); }
.about-goal h3 { color:var(--accent); }
.about-goal p { color:var(--text); }
.authors { display:flex; flex-direction:column; gap:10px; }
.author {
    display:flex; align-items:center; gap:12px; padding:12px 14px;
    border:1px solid var(--border); border-radius:var(--r-md);
}
.author .avatar { width:38px; height:38px; font-size:14px; flex:none; }
.author-info { flex:1; min-width:0; }
.author-name { font-weight:600; font-size:14px; }
.author-role { font-size:12px; color:var(--muted); }
.author a { font-size:12px; font-weight:600; white-space:nowrap; }
@media (max-width:480px) {
    .author { flex-wrap:wrap; row-gap:4px; }
    .author-info { flex-basis:calc(100% - 50px); }
    .author a { margin-left:50px; }
}
.about-foot { display:flex; justify-content:flex-end; }