/* ===== RESET ===== */

*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:Inter,Arial,sans-serif;
}

/* ===== VARIABLES ===== */

:root{
    --bg:#0b0f1f;
    --card:#151a33;
    --text:#ffffff;
    --muted:#9aa3c7;

    --blue:#1565c0;
    --blue-hover:#1976d2;

    --green:#2e7d32;
    --red:#c62828;
}

/* ===== BUTTONS (общие) ===== */

.btn{
    border:none;
    padding:10px 14px;
    border-radius:10px;
    color:#fff;
    cursor:pointer;
    font-weight:600;
    font-size:14px;
}

.btn-blue{background:var(--blue);}
.btn-blue:hover{background:var(--blue-hover);}
.btn-red{background:var(--red);}
.btn-green{background:var(--green);}

/* ===================================================== */
/* ===================== LIVE =========================== */
/* ===================================================== */

.live-body{
    background:var(--bg);
    color:var(--text);
}

.live-header-centered{
    text-align:center;
    padding:20px 10px 10px;
    background:linear-gradient(180deg,#0f1530,#0b0f1f);
}

.live-title-big{
    font-size:28px;
    font-weight:700;
}

.live-guest{
    font-size:18px;
    color:var(--muted);
}

.live-contacts{
    font-size:16px;
    margin-top:8px;
}

.live-clock-big{
    font-size:34px;
    font-weight:700;
}

.live-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(420px,1fr));
    gap:16px;
    padding:20px;
}

.live-card{
    background:var(--card);
    border-radius:14px;
    padding:16px;
}

.live-meta{
    font-size:12px;
    color:#888;
}

.live-text{
    font-size:26px;
    margin:10px 0;
}

.live-author{
    font-size:14px;
    color:#aaa;
}

/* ===================================================== */
/* ===================== EDITOR ========================= */
/* ===================================================== */

.editor-body{
    background:var(--bg);
    color:var(--text);
}

.editor-header{
    padding:20px;
    text-align:center;
    background:linear-gradient(180deg,#0f1530,#0b0f1f);
}

.editor-title{
    font-size:24px;
    font-weight:700;
}

.editor-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(420px,1fr));
    gap:16px;
    padding:20px;
}

.editor-card{
    background:var(--card);
    padding:16px;
    border-radius:14px;
}

.editor-card.dim{
    opacity:0.4;
}

.editor-meta{
    font-size:12px;
    color:#888;
}

.editor-text{
    font-size:22px;
    margin:10px 0;
}

.editor-author{
    font-size:14px;
    color:#aaa;
}

.editor-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.editor-deleted{
    padding:20px;
}

.editor-deleted summary{
    cursor:pointer;
    color:#aaa;
}

/* ===================================================== */
/* ===================== ASK (ИЗОЛИРОВАНО) ============== */
/* ===================================================== */

.ask-page{
    background:#f4f6fb;
    color:#111;
}

.ask-wrap{
    max-width:640px;
    margin:auto;
    padding:20px;
}

/* HEADER */

.ask-head{
    text-align:center;
    margin-bottom:20px;
}

.ask-h1{
    font-size:28px;
    font-weight:700;
}

.ask-h2{
    font-size:14px;
    color:#6b7280;
}

/* PHONES */

.ask-phones{
    display:flex;
    gap:10px;
    margin-bottom:16px;
}

.ask-phone{
    flex:1;
    background:#fff;
    border-radius:10px;
    padding:10px;
    text-align:center;
}

.ask-city{
    font-size:12px;
    color:#6b7280;
}

.ask-number{
    font-size:14px;
    font-weight:600;
    color:#1565c0;
}

.ask-days{
    font-size:11px;
    color:#9ca3af;
}

/* TG */

.ask-tg{
    display:block;
    background:#e3f2fd;
    padding:12px;
    border-radius:10px;
    text-align:center;
    margin-bottom:16px;
    text-decoration:none;
}

.ask-tg-title{
    font-weight:600;
    color:#1565c0;
}

.ask-tg-sub{
    font-size:12px;
    color:#555;
}

/* FORM */

.ask-box{
    background:#fff;
    padding:16px;
    border-radius:12px;
}

.ask-box input,
.ask-box textarea{
    width:100%;
    padding:10px;
    margin-bottom:10px;
    border-radius:8px;
    border:1px solid #ddd;
}

.ask-box button{
    width:100%;
    padding:12px;
    border:none;
    border-radius:10px;
    background:#1565c0;
    color:#fff;
}

/* SUCCESS */

.ask-ok{
    background:#e6f4ea;
    color:#1b5e20;
    padding:10px;
    border-radius:8px;
    margin-bottom:10px;
    text-align:center;
}

/* ===================================================== */
/* ================= MOBILE ============================= */
/* ===================================================== */

@media (max-width:700px){

    .live-grid,
    .editor-grid{
        grid-template-columns:1fr;
    }

    .ask-phones{
        flex-direction:column;
    }

    .live-text,
    .editor-text{
        font-size:20px;
    }
}
/* ===== LIVE DOT ===== */

.live-dot{
    display:inline-block;
    width:10px;
    height:10px;
    background:#e53935;
    border-radius:50%;
    margin-right:6px;
    animation:blink 1s infinite;
}

@keyframes blink{
    0%{opacity:1;}
    50%{opacity:0.3;}
    100%{opacity:1;}
}

/* ===== ACTIVE PHONE ===== */

.ask-phone.active{
    border:2px solid #1565c0;
    background:#eef4ff;
}
/* ===== EXTRA BLOCKS ===== */

.ask-extra{
    display:block;
    background:#ffffff;
    border-radius:12px;
    padding:14px;
    margin-top:14px;
    text-decoration:none;
    box-shadow:0 2px 6px rgba(0,0,0,0.05);
    transition:0.2s;
}

.ask-extra:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 12px rgba(0,0,0,0.08);
}

.extra-title{
    font-weight:600;
    color:#1565c0;
}

.extra-sub{
    font-size:13px;
    color:#666;
}

.ask-extra.support{
    background:#fff3e0;
}

.ask-extra.support .extra-title{
    color:#e65100;
}
/* ===== CTA (TG + MAX одинаковые) ===== */

.ask-cta{
    display:block;
    border-radius:12px;
    padding:14px;
    margin-bottom:14px;
    text-decoration:none;
    text-align:center;
    transition:0.2s;
}

/* telegram */

.ask-cta.tg{
    background:#e3f2fd;
}

.ask-cta.tg:hover{
    background:#d6ebff;
}

/* max */

.ask-cta.max{
    background:#f0f4ff;
}

.ask-cta.max:hover{
    background:#e3eaff;
}

/* текст */

.cta-title{
    font-weight:600;
    color:#1565c0;
}

.cta-sub{
    font-size:13px;
    color:#555;
}