*{box-sizing:border-box}
:root{--bg:#07101e;--panel:#101d30;--border:rgba(255,255,255,.08);--text:#eef4ff;--muted:#8fa0b8;--accent:#62d9ff;--accent2:#5f7cff;--green:#2dd881;--greenSoft:rgba(45,216,129,.12);--red:#ff6474;--redSoft:rgba(255,100,116,.12);--shadow:0 18px 45px rgba(0,0,0,.22)}
body{margin:0;min-height:100vh;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at top right,rgba(95,124,255,.16),transparent 28rem),radial-gradient(circle at top left,rgba(98,217,255,.10),transparent 24rem),var(--bg);color:var(--text)}
button{font:inherit}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:78px;padding:14px 18px;background:rgba(7,16,30,.84);backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:linear-gradient(145deg,rgba(98,217,255,.22),rgba(95,124,255,.18));border:1px solid rgba(98,217,255,.35);box-shadow:inset 0 0 20px rgba(98,217,255,.08)}
.brand-mark span{font-size:13px;font-weight:900;color:#fff;letter-spacing:-.8px}
.brand-copy h1{margin:0;font-size:17px}
.brand-copy p{margin:4px 0 0;color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.connection-badge{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:999px;border:1px solid var(--border);font-size:11px;font-weight:800;letter-spacing:.05em}
.connection-badge.online{color:var(--green);background:var(--greenSoft);border-color:rgba(45,216,129,.24)}
.connection-badge.offline{color:var(--red);background:var(--redSoft);border-color:rgba(255,100,116,.24)}
.connection-dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor}
.page{width:min(1180px,100%);margin:auto;padding:20px 16px 42px}
.hero-card,.section-block{background:rgba(16,29,48,.9);border:1px solid var(--border);box-shadow:var(--shadow)}
.hero-card{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;padding:22px;border-radius:22px}
.eyebrow{display:inline-block;margin-bottom:7px;color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.14em}
.hero-card h2,.section-heading h2{margin:0}
.hero-card h2{font-size:clamp(23px,5vw,34px)}
.hero-card p,.section-heading p{margin:7px 0 0;color:var(--muted);line-height:1.5}
.hero-card p{font-size:13px}
.hero-meta{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:10px}
.meta-item{min-width:128px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--border)}
.meta-label{display:block;margin-bottom:5px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.meta-item strong{font-size:13px}
.section-block{margin-top:22px;padding:18px;border-radius:22px}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:16px}
.section-heading h2{font-size:20px}
.section-heading p{font-size:12px}
.master-actions{display:flex;gap:8px}
.master-btn{min-height:42px;padding:0 14px;border:1px solid transparent;border-radius:12px;color:var(--text);font-size:12px;font-weight:800;cursor:pointer}
.master-on{color:var(--green);background:var(--greenSoft);border-color:rgba(45,216,129,.20)}
.master-off{color:var(--red);background:var(--redSoft);border-color:rgba(255,100,116,.20)}
.cards-grid,.adc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.output,.input,.adc-card{border:1px solid var(--border);background:rgba(255,255,255,.025);border-radius:16px}
.output,.input{min-height:116px;padding:14px}
.output-header,.input-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.output-name,.input-name{font-size:13px;font-weight:850}
.state{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:10px;font-weight:800}
.dot{width:8px;height:8px;border-radius:50%;background:#526175}
.dot.on,.dot.active{background:var(--green);box-shadow:0 0 12px rgba(45,216,129,.75)}
.output button{width:100%;min-height:40px;margin-top:19px;border:1px solid transparent;border-radius:11px;font-size:11px;font-weight:850;cursor:pointer}
.btn-on{color:var(--green);background:var(--greenSoft);border-color:rgba(45,216,129,.20)!important}
.btn-off{color:var(--red);background:var(--redSoft);border-color:rgba(255,100,116,.20)!important}
.input.active{background:linear-gradient(145deg,rgba(45,216,129,.08),transparent),rgba(255,255,255,.025);border-color:rgba(45,216,129,.30)}
.adc-card{padding:15px}
.adc-top{display:flex;justify-content:space-between;align-items:center}
.adc-name{font-size:12px;font-weight:850}
.adc-badge{color:var(--accent);font-size:9px;font-weight:900;letter-spacing:.06em}
.adc-value-row{display:flex;align-items:baseline;gap:5px;margin-top:10px}
.adc-value{font-size:28px;line-height:1;font-weight:900;letter-spacing:-1px}
.adc-unit{color:var(--muted);font-size:10px}
.adc-bar{height:7px;margin-top:13px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.06)}
.adc-bar-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .25s ease}
.footer{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:22px;padding:16px 4px;color:var(--muted)}
.footer-brand{display:flex;align-items:center;gap:10px}
.mini-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:var(--accent);background:rgba(98,217,255,.08);border:1px solid rgba(98,217,255,.18);font-size:10px;font-weight:900}
.footer-brand strong,.footer-brand span{display:block}
.footer-brand strong{color:var(--text);font-size:11px}
.footer-brand span,.footer-device{font-size:9px}
.toast{position:fixed;left:50%;bottom:18px;z-index:50;transform:translate(-50%,20px);min-width:190px;max-width:calc(100vw - 32px);padding:11px 14px;border-radius:12px;color:var(--text);background:#142238;border:1px solid var(--border);box-shadow:var(--shadow);font-size:11px;font-weight:700;text-align:center;opacity:0;pointer-events:none;transition:.2s ease}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:720px){.page{padding:28px 24px 54px}.cards-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.adc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.section-block{padding:22px}}
@media(max-width:640px){.hero-card{grid-template-columns:1fr}.hero-meta{grid-template-columns:1fr 1fr}.section-heading{align-items:flex-start;flex-direction:column}.master-actions{width:100%}.master-btn{flex:1}}
@media(max-width:390px){.brand-copy p{display:none}.hero-meta{grid-template-columns:1fr}.cards-grid,.adc-grid{grid-template-columns:1fr}}
/* ======================================================
   FOOTER CC-AUTOMATIONS
   ====================================================== */

.footer {
    margin-top: 24px;
    padding: 20px;

    border-radius: 20px;

    background: rgba(16, 29, 48, 0.75);

    border: 1px solid var(--border);

    color: var(--muted);
}


.footer-main {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.footer-brand {
    display: flex;
    align-items: center;

    gap: 11px;
}


.mini-mark {
    display: grid;
    place-items: center;

    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    border-radius: 12px;

    color: var(--accent);

    background: rgba(98, 217, 255, 0.08);

    border: 1px solid rgba(98, 217, 255, 0.20);

    font-size: 11px;
    font-weight: 900;
}


.footer-brand strong {
    display: block;

    color: var(--text);

    font-size: 13px;
}


.footer-brand span {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 10px;
}


.footer-contacts {
    display: flex;
    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 8px;
}


.footer-contacts a {
    display: inline-flex;
    align-items: center;

    min-height: 34px;

    padding: 0 11px;

    border-radius: 10px;

    color: var(--muted);

    background: rgba(255, 255, 255, 0.035);

    border: 1px solid var(--border);

    text-decoration: none;

    font-size: 10px;
    font-weight: 700;

    transition: 0.18s ease;
}


.footer-contacts a:hover {
    color: var(--accent);

    border-color: rgba(98, 217, 255, 0.30);

    background: rgba(98, 217, 255, 0.07);
}


.footer-bottom {
    display: flex;
    justify-content: space-between;

    gap: 12px;

    margin-top: 17px;
    padding-top: 14px;

    border-top: 1px solid var(--border);

    color: #65758c;

    font-size: 9px;
}


/* SMARTPHONE */

@media (max-width: 640px) {

    .footer-main {
        flex-direction: column;
        align-items: flex-start;
    }


    .footer-contacts {
        width: 100%;

        display: grid;

        grid-template-columns: 1fr 1fr;
    }


    .footer-contacts a {
        justify-content: center;
    }


    .footer-bottom {
        flex-direction: column;

        text-align: center;

        line-height: 1.5;
    }
}
.nav-automations {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    padding: 0 14px;

    border-radius: 11px;

    color: var(--accent);
    background: rgba(98, 217, 255, 0.08);
    border: 1px solid rgba(98, 217, 255, 0.18);

    text-decoration: none;
    font-size: 11px;
    font-weight: 850;
}