/* =======================
   Nexus Market — styles.css
   ======================= */

:root{
    --bg:#0b0b0b;         /* solid dark background */
    --card:#121212;       /* panel surface */
    --muted:#8d8d8d;      /* subdued text */
    --ink:#eaeaea;        /* primary text */
    --accent:#ff7a00;     /* orange accent */
    --ok:#3bd268;         /* green chip */
    --warn:#ffcc00;       /* yellow chip */
    --bad:#ff4d4f;        /* red chip */
    --xl:clamp(28px,4vw,42px);
    --lg:clamp(22px,3vw,30px);
    --md:clamp(16px,2vw,18px);
    --sm:13px;
    --radius:16px;
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font:400 16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
}

/* Links */
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent)}

/* Layout */
.wrap{max-width:1080px;margin:0 auto;padding:18px}

/* Header */
header{position:sticky;top:0;background:rgba(11,11,11,.7);backdrop-filter:blur(8px);z-index:10;border-bottom:1px solid #191919}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.06em}
.badge{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
nav a{margin:0 10px;color:#bfbfbf}
nav a.cta{padding:10px 14px;border:1px solid #2a2a2a;border-radius:12px;background:#151515;color:#fff}
nav a.cta:hover{border-color:#3a3a3a}

/* Hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:36px 0}
.hero h1{margin:0 0 10px;font-size:50px;line-height: 60px}
.eyebrow{color:var(--muted);text-transform:uppercase;letter-spacing:.2em;font-size:12px}
.lead{color:#d7d7d7;font-size:20px;color: var(--muted)}
.mast{font-weight:900;opacity:.06;letter-spacing:.18em;text-align:right;font-size: 45px}
.accent{color:var(--accent)}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,Menlo,Monaco,Consolas,monospace}

/* Panels — depth */
.panel{
    background:var(--card);
    border:1px solid #1a1a1a;
    border-radius:var(--radius);
    padding:20px;
    box-shadow:
            0 0 25px rgba(0,0,0,0.45),      /* outer soft */
            inset 0 0 10px rgba(255,255,255,0.02); /* gentle inner */
    transition:transform .3s ease, box-shadow .3s ease;
}
.panel:hover{transform:translateY(-2px);box-shadow:0 0 35px rgba(0,0,0,0.6), inset 0 0 20px rgba(255,255,255,0.03)}
.section{margin:26px 0}
h2{font-size:var(--lg);margin:0 0 8px}

/* Tickets */
.tickets{display:flex;flex-direction: column;minmax(280px,1fr));gap:14px}
.ticket{background:#0f0f0f;border:1px dashed #2a2a2a;border-radius:14px;padding:14px;box-shadow:inset 0 0 8px rgba(255,255,255,0.02)}
.t-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.meta{color:var(--muted);font-size:12px}
.chip{border:1px solid #2f2f2f;border-radius:20px;padding:4px 10px;font-size:12px;color:#cfcfcf}
.chip.ok{border-color:#204b2e;color:#a8f0bf;background:linear-gradient(180deg,#0f1d14,#0b1710)}
.chip.backup{border-color:#4b3a20;color:#ffd48c;background:linear-gradient(180deg,#1d1a0f,#17140b)}
textarea.code{width:100%;background:#0b0b0b;border:1px solid #1e1e1e;color:#dcdcdc;border-radius:10px;padding:10px;resize:none;font-size: 16px; color: #ffbc73
}

/* Grids */
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.tile{background:#101010;border:1px solid #1b1b1b;border-radius:14px;padding:14px;box-shadow:inset 0 0 8px rgba(255,255,255,0.02)}

/* Timeline */
.timeline{display:grid;gap:8px}
.step{background:#0f0f0f;border:1px solid #202020;border-radius:12px;padding:10px;box-shadow:inset 0 0 8px rgba(255,255,255,0.02)}

/* Status */
.state{display:grid;grid-template-columns:320px 1fr;gap:16px}
.rail{background:#0f0f0f;border:1px solid #1d1d1d;border-radius:14px;padding:14px;box-shadow:inset 0 0 10px rgba(255,255,255,0.02)}
.row{display:flex;justify-content:space-between;border-bottom:1px dashed #1f1f1f;padding:8px 0}
.row:last-child{border-bottom:0}
.bar{height:8px;background:#141414;border:1px solid #1d1d1d;border-radius:999px;overflow:hidden;margin-top:8px}
.fill{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#ffaa55)}
.kpis{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 6px}
.flex{display:flex;justify-content:space-between}

/* Details */
.details{background:#101010;border:1px solid #202020;border-radius:12px;padding:10px;margin:8px 0;box-shadow:inset 0 0 8px rgba(255,255,255,0.02)}
.details>summary{cursor:pointer}

/* Footer */
footer{border-top:1px solid #191919;margin-top:28px;padding:20px 0;color:#b8b8b8}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
.list-plain{list-style:none;padding:0;margin:0}
.copyright{text-align:center;margin:22px 0;color:#8d8d8d}

/* Responsive */
@media (max-width:880px){
    .hero{grid-template-columns:1fr}
    .mast{text-align:left;font-size:44px}
    .state{grid-template-columns:1fr}
    nav{
        display:none;
    }
}