/* =====================================================
   Micro Radar Round TFT
   Firmware Installer
   ===================================================== */

:root{

    --bg:#0f172a;
    --surface:#1e293b;
    --surface2:#273449;

    --primary:#2563eb;
    --primary2:#3b82f6;

    --text:#f8fafc;
    --muted:#cbd5e1;

    --border:#334155;

    --radius:14px;

    --shadow:0 10px 24px rgba(0,0,0,.18);

    --max-width:1050px;

}

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

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:
    Inter,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;

    line-height:1.65;

}

.container{

    width:min(92%,var(--max-width));

    margin:auto;

}

/* ===========================
   Hero
=========================== */

.hero{

    padding:70px 20px 45px;

    text-align:center;

    background:
    linear-gradient(180deg,
    #172554 0%,
    #0f172a 100%);

}

.hero h1{

    font-size:2.4rem;

    font-weight:700;

    margin-bottom:12px;

}

.subtitle{

    color:var(--muted);

    max-width:720px;

    margin:auto;

    font-size:1.08rem;

}

/* ===========================
   Main
=========================== */

main{

    padding:35px 0 60px;

}

/* ===========================
   Card
=========================== */

.card{

    background:var(--surface);

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

    border-radius:var(--radius);

    padding:28px;

    margin-bottom:24px;

    box-shadow:var(--shadow);

}

.card h2{

    margin-bottom:18px;

    font-size:1.45rem;

}

.card h3{

    margin-bottom:15px;

    font-size:1.18rem;

}

.card p{

    color:var(--muted);

    margin-bottom:18px;

}

/* ===========================
   Grid
=========================== */

.grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:24px;

    margin-bottom:24px;

}

/* ===========================
   Lists
=========================== */

ul,
ol{

    padding-left:22px;

}

li{

    margin:10px 0;

}

/* ===========================
   Links
=========================== */

a{

    color:#60a5fa;

    text-decoration:none;

}

a:hover{

    text-decoration:underline;

}

/* ===========================
   Install Area
=========================== */

.install-area{

    margin-top:24px;

    text-align:center;

}

/* ==========================================
   ESP Web Tools Button
   (Real Button - Fully Functional)
========================================== */

esp-web-install-button{

    display:inline-block;

}

/* Style the real slotted button */

esp-web-install-button button{

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--primary2));

    color:white;

    border:none;

    border-radius:12px;

    padding:15px 34px;

    font-size:1rem;

    font-weight:600;

    cursor:pointer;

    transition:
    background .2s,
    transform .15s,
    box-shadow .2s;

    box-shadow:
    0 8px 18px rgba(37,99,235,.25);

}

/* Hover */

esp-web-install-button button:hover{

    transform:translateY(-2px);

    box-shadow:
    0 12px 22px rgba(37,99,235,.35);

}

/* Click */

esp-web-install-button button:active{

    transform:translateY(0);

}

/* ===========================
   Secondary Button
=========================== */

.button{

    display:inline-block;

    padding:13px 24px;

    border-radius:12px;

    font-weight:600;

    transition:.2s;

}

.button.secondary{

    background:#334155;

    color:white;

}

.button.secondary:hover{

    background:#475569;

    text-decoration:none;

}

/* ===========================
   Warning Card
=========================== */

.warning{

    border-left:4px solid #f59e0b;

}
/* =====================================================
   Details / Troubleshooting
   ===================================================== */

details{

    background:var(--surface2);

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

    border-radius:10px;

    margin-bottom:14px;

    overflow:hidden;

}

summary{

    padding:16px 18px;

    cursor:pointer;

    font-weight:600;

    user-select:none;

    list-style:none;

}

summary::-webkit-details-marker{

    display:none;

}

summary::after{

    content:"+";

    float:right;

    font-size:1.2rem;

    transition:.2s;

}

details[open] summary::after{

    content:"−";

}

details ul,
details ol{

    padding:
    0 30px 18px 42px;

}

/* =====================================================
   Footer
   ===================================================== */

footer{

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

    background:#0b1220;

    padding:40px 20px;

    text-align:center;

}

footer p{

    color:var(--muted);

    margin:8px 0;

}

footer strong{

    color:white;

}

/* =====================================================
   Selection
   ===================================================== */

::selection{

    background:#2563eb;

    color:white;

}

/* =====================================================
   Focus
   ===================================================== */

button:focus,
a:focus,
summary:focus{

    outline:2px solid #60a5fa;

    outline-offset:3px;

}

/* =====================================================
   Images
   ===================================================== */

img{

    max-width:100%;

    height:auto;

}

/* =====================================================
   Responsive
   ===================================================== */

@media (max-width:768px){

.hero{

    padding:50px 18px 35px;

}

.hero h1{

    font-size:2rem;

}

.subtitle{

    font-size:1rem;

}

.card{

    padding:22px;

}

.card h2{

    font-size:1.3rem;

}

.card h3{

    font-size:1.1rem;

}

.install-area{

    margin-top:20px;

}

esp-web-install-button button{

    width:100%;

    max-width:320px;

}

.button{

    width:100%;

    text-align:center;

}

}

/* =====================================================
   Small Phones
   ===================================================== */

@media (max-width:480px){

.hero h1{

    font-size:1.7rem;

}

.subtitle{

    font-size:.95rem;

}

.card{

    padding:18px;

}

ul,
ol{

    padding-left:20px;

}

}

/* =====================================================
   Large Screens
   ===================================================== */

@media (min-width:1200px){

.hero h1{

    font-size:2.8rem;

}

.card{

    padding:32px;

}

}

/* =====================================================
   Disabled Install Button
   ===================================================== */

esp-web-install-button button:disabled{

    opacity:.6;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}

/* =====================================================
   Smooth Hover
   ===================================================== */

.card{

    transition:
    transform .18s ease,
    border-color .18s ease;

}

.card:hover{

    border-color:#475569;

    transform:translateY(-2px);

}

/* =====================================================
   End
   ===================================================== */