/* ============================================================
   GLOBAL AGENDA — «ДОРОГА К ЗВЁЗДАМ»
   Советский космо-футуризм × MMO-web 2010
   ============================================================ */

:root {
    --bg0: #04060d;
    --bg1: #0b1428;
    --panel: rgba(10, 18, 36, .88);
    --line: rgba(64, 180, 255, .30);
    --cyan: #3fd6ff;
    --cyan-dim: #1e7fd9;
    --red: #ee2c24;
    --amber: #ffb347;
    --txt: #cfe4f5;
    --dim: #7f97ad;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
    font-family: "Segoe UI", Arial, "Arial Narrow", sans-serif;
    color: var(--txt);
    background:
        radial-gradient(1200px 700px at 70% -10%, rgba(30, 90, 180, .25), transparent 60%),
        radial-gradient(900px 500px at 15% 110%, rgba(30, 127, 217, .20), transparent 60%),
        linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 100%);
    background-attachment: fixed;
}

/* --- звёздное небо (два слоя точек) --- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 25px 35px, rgba(255,255,255,.9), transparent),
        radial-gradient(1px 1px at 120px 90px, rgba(200,230,255,.7), transparent),
        radial-gradient(2px 2px at 210px 160px, rgba(255,255,255,.8), transparent),
        radial-gradient(1px 1px at 300px 40px, rgba(160,220,255,.6), transparent),
        radial-gradient(1.5px 1.5px at 80px 200px, rgba(255,255,255,.5), transparent);
    background-size: 340px 260px;
    opacity: .5;
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 60px 20px, rgba(255,255,255,.55), transparent),
        radial-gradient(1px 1px at 180px 140px, rgba(140,200,255,.45), transparent),
        radial-gradient(2px 2px at 260px 60px, rgba(255,255,255,.4), transparent);
    background-size: 520px 380px;
    opacity: .35;
}

#bg { min-height: 100%; padding: 28px 14px 60px; position: relative; z-index: 1; }

#wrap {
    max-width: 1000px;
    margin: 0 auto;
}

/* ================= HEADER ================= */
#header {
    position: relative;
    text-align: center;
    padding: 34px 20px 18px;
}

/* орбитальное кольцо за заголовком */
#header::before {
    content: "";
    position: absolute;
    top: -46px;
    left: 50%;
    width: 300px;
    height: 300px;
    margin-left: -150px;
    border: 1px dashed rgba(63, 214, 255, .22);
    border-radius: 50%;
    animation: orbit 70s linear infinite;
    pointer-events: none;
}
#header::after {
    content: "";
    position: absolute;
    top: -14px;
    left: 50%;
    width: 190px;
    height: 190px;
    margin-left: -95px;
    border: 1px solid rgba(238, 44, 36, .18);
    border-radius: 50%;
    animation: orbit 45s linear infinite reverse;
    pointer-events: none;
}
@keyframes orbit { to { transform: rotate(360deg); } }

#header h1 {
    position: relative;
    font-size: 46px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    text-shadow:
        0 0 18px rgba(63, 214, 255, .55),
        0 0 42px rgba(30, 127, 217, .40),
        0 2px 0 rgba(0,0,0,.6);
}
#header h1::before { content: "★ "; color: #9fe9ff; text-shadow: 0 0 14px rgba(63,214,255,.95), 0 0 28px rgba(63,214,255,.5); }
#header h1::after  { content: " ★"; color: #9fe9ff; text-shadow: 0 0 14px rgba(63,214,255,.95), 0 0 28px rgba(63,214,255,.5); }

.tagline {
    position: relative;
    display: inline-block;
    margin-top: 10px;
    padding: 5px 26px;
    font-size: 11px;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--cyan);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(10, 20, 40, .5);
}

/* сигнальная полоса-лента под шапкой */
.hazard {
    height: 5px;
    max-width: 720px;
    margin: 16px auto 0;
    background: repeating-linear-gradient(
        -45deg,
        rgba(43, 177, 232, .80) 0 12px,
        rgba(4, 6, 13, .92) 12px 24px);
    border-radius: 3px;
    box-shadow: 0 0 14px rgba(43, 177, 232, .45), inset 0 0 4px rgba(120,220,255,.3);
}

/* ================= NAV ================= */
#nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 22px 0 26px;
}
#nav a {
    position: relative;
    padding: 9px 22px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--cyan);
    border: 1px solid var(--line);
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(30, 60, 110, .55), rgba(8, 16, 34, .85));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 8px rgba(0, 0, 0, .5);
    transition: all .18s ease;
}
#nav a:hover {
    color: #fff;
    border-color: var(--cyan);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 14px rgba(63, 214, 255, .45);
    text-shadow: 0 0 8px rgba(63, 214, 255, .8);
}

/* ================= PANELS ================= */
#panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
#panels > .panel.wide { grid-column: 1 / -1; }

.panel {
    position: relative;
    padding: 22px 24px 24px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow:
        inset 0 0 32px rgba(20, 50, 100, .25),
        0 4px 22px rgba(0, 0, 0, .55);
}
/* угловые скобки как на чертежах */
.panel::before, .panel::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    pointer-events: none;
}
.panel::before {
    top: -1px; left: -1px;
    border-top: 2px solid var(--cyan);
    border-left: 2px solid var(--cyan);
    filter: drop-shadow(0 0 4px rgba(63,214,255,.7));
}
.panel::after {
    bottom: -1px; right: -1px;
    border-bottom: 2px solid var(--cyan-dim);
    border-right: 2px solid var(--cyan-dim);
    filter: drop-shadow(0 0 4px rgba(30,127,217,.7));
}

.panel h2 {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cyan);
    text-shadow: 0 0 10px rgba(63, 214, 255, .5);
    border-bottom: 1px solid var(--line);
    padding-bottom: 9px;
    margin-bottom: 14px;
}
.panel h2 .star { color: var(--red); text-shadow: 0 0 10px rgba(238,44,36,.8); margin-right: 4px; }

.panel p, .panel td, .panel th, .panel li { line-height: 1.65; }
.panel p + p { margin-top: 10px; }

.hint { color: var(--dim); font-size: 12.5px; }
.code {
    font-family: Consolas, monospace;
    font-size: 12px;
    color: var(--amber);
    word-break: break-all;
    user-select: all;
}

/* ================= FORMS ================= */
label {
    display: block;
    margin: 14px 0 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dim);
}
input[type=text], input[type=password], input[type=email] {
    width: 100%;
    max-width: 380px;
    padding: 10px 12px;
    color: #fff;
    font-size: 15px;
    letter-spacing: .04em;
    background: rgba(3, 8, 18, .9);
    border: 1px solid var(--line);
    border-radius: 3px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 12px rgba(63, 214, 255, .35), inset 0 0 8px rgba(63, 214, 255, .08);
}
input[type=submit], button, .btn {
    display: inline-block;
    margin-top: 18px;
    padding: 11px 34px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #04121e;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #6fe0ff;
    border-radius: 3px;
    background: linear-gradient(180deg, #79e4ff 0%, #2bb1e8 48%, #0a6cae 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .65),
        inset 0 -6px 12px rgba(4, 60, 100, .55),
        0 0 18px rgba(63, 214, 255, .35);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
    transition: filter .15s, box-shadow .15s;
}
input[type=submit]:hover, button:hover, .btn:hover {
    filter: brightness(1.12);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.7),
        inset 0 -6px 12px rgba(4,60,100,.55),
        0 0 26px rgba(63, 214, 255, .65);
}
.btn.red {
    color: #fff;
    border-color: #ff6a61;
    background: linear-gradient(180deg, #ff7a70 0%, #e02a20 52%, #8c130c 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 18px rgba(238,44,36,.4);
    text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}

/* ================= TELEMETRY (статус сервера) ================= */
.telemetry .cells {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}
.cell {
    position: relative;
    padding: 14px 14px 12px;
    text-align: center;
    border: 1px solid rgba(64, 180, 255, .18);
    border-radius: 3px;
    background: rgba(4, 10, 22, .8);
    overflow: hidden;
}
/* развёртка-сканлайны */
.cell::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        180deg,
        transparent 0 2px,
        rgba(120, 190, 255, .045) 2px 3px);
}
.cell .lbl {
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--dim);
    margin-bottom: 8px;
}
.cell .val {
    font-family: Consolas, monospace;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #fff;
}
.num { color: var(--cyan); text-shadow: 0 0 10px rgba(63,214,255,.8); font-size: 22px; }

.led {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}
.led.on {
    background: #35e6ff;
    box-shadow: 0 0 8px #35e6ff, 0 0 20px rgba(53, 230, 255, .65);
    animation: pulse 1.6s ease-in-out infinite;
}
.led.off {
    background: var(--red);
    box-shadow: 0 0 8px rgba(238, 44, 36, .9);
}
@keyframes pulse { 50% { opacity: .45; } }

.meta {
    margin-top: 14px;
    font-size: 12px;
    color: var(--dim);
    letter-spacing: .05em;
}
.msg.ok {
    border-left: 3px solid var(--cyan);
    background: rgba(63, 214, 255, .08);
    padding: 10px 14px;
    border-radius: 2px;
}
.msg.err {
    border-left: 3px solid var(--red);
    background: rgba(238, 44, 36, .09);
    padding: 10px 14px;
    border-radius: 2px;
}

/* ================= TABLES (кабинет/лидеры) ================= */
.grid-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.grid-tbl th {
    font-size: 10.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--dim);
    text-align: left;
    border-bottom: 1px solid var(--line);
    padding: 8px 10px;
}
.grid-tbl td {
    padding: 9px 10px;
    border-bottom: 1px solid rgba(64, 180, 255, .10);
}
.grid-tbl tr:hover td { background: rgba(63, 214, 255, .05); }
.rank-gold { color: var(--amber); text-shadow: 0 0 8px rgba(255,179,71,.7); }
.rank-silver { color: #d7e3ef; }
.rank-bronze { color: #d98b4a; }

/* ================= FOOTER ================= */
#footer {
    margin-top: 34px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dim);
}
#footer .code { text-transform: none; letter-spacing: 0; }

a { color: var(--cyan); }

/* ================= МОБИЛЬНАЯ ВЕРСИЯ ================= */
@media (max-width: 760px) {
    #bg { padding: 14px 8px 40px; }
    #header { padding: 24px 8px 10px; }
    #header h1 { font-size: 27px; letter-spacing: .1em; }
    .tagline { font-size: 9.5px; letter-spacing: .2em; padding: 4px 12px; }

    /* меню сеткой 2 колонки — удобно пальцем */
    #nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    #nav a {
        text-align: center;
        padding: 13px 6px;
        font-size: 12px;
    }

    .panel { padding: 16px 14px 18px; }
    .panel h2 { font-size: 13.5px; letter-spacing: .12em; }

    /* телеметрия одной колонкой */
    .telemetry .cells { grid-template-columns: 1fr; }
    .cell .val { font-size: 15px; }
    .num { font-size: 20px; }

    /* инпуты 16px — iOS не зумит */
    input[type=text], input[type=password], input[type=email] {
        max-width: 100%;
        font-size: 16px;
        padding: 12px;
    }
    input[type=submit], button, .btn {
        width: 100%;
        max-width: 380px;
        padding: 13px 20px;
    }

    /* таблицы — горизонтальный скролл */
    .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .grid-tbl { min-width: 480px; }

    #footer { font-size: 10px; }
    #footer .code { font-size: 10.5px; }
}

@media (max-width: 380px) {
    #header h1 { font-size: 22px; }
    #nav { grid-template-columns: 1fr; }
}