:root{
    --bg:#05070a;
    --bg2:#080d13;
    --panel:#0f1720;
    --panel2:#141f2b;
    --line:rgba(255,255,255,.10);
    --line-strong:rgba(255,123,0,.30);
    --accent:#ff7b00;
    --accent2:#ffb366;
    --green:#24d366;
    --purple:#b989ff;
    --cyan:#65d9ff;
    --danger:#ff6b6b;
    --text:#f4f6f8;
    --muted:#98a5b1;
    --shadow:0 18px 45px rgba(0,0,0,.32);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
    background:
        linear-gradient(90deg,rgba(255,123,0,.055) 1px,transparent 1px),
        linear-gradient(180deg,rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(180deg,var(--bg),var(--bg2) 48%,var(--bg));
    background-size:52px 52px,52px 52px,auto;
    color:var(--text);
    font-family:Inter,Segoe UI,Arial,sans-serif;
}

.container,
.wrap{
    max-width:1500px;
    margin-left:auto;
    margin-right:auto;
}

.prototrack-hero,
.agent-hero{
    max-width:1500px;
    margin:0 auto 18px;
    border-radius:18px;
    border:1px solid var(--line-strong);
    box-shadow:var(--shadow),0 0 34px rgba(255,123,0,.14);
    overflow:hidden;
    aspect-ratio:1494 / 522;
    background:#05070a;
}

.prototrack-hero img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    filter:saturate(1.04) contrast(1.02);
    background:#05070a;
}

h1{
    color:#fff;
    letter-spacing:0;
    overflow-wrap:anywhere;
}

h2,
h3{
    color:#fff;
    letter-spacing:0;
}

.card,
.panel,
.statbox{
    border-radius:14px;
    border:1px solid var(--line);
    background:linear-gradient(180deg,rgba(16,24,32,.96),rgba(8,13,19,.98));
    box-shadow:var(--shadow);
}

.card:hover,
.panel:hover,
.statbox:hover{
    border-color:rgba(255,123,0,.24);
}

.statbox:before,
.card::before{
    background:linear-gradient(180deg,var(--accent),var(--accent2));
}

.value,
.statbox h3{
    font-family:Bahnschrift,Segoe UI,Arial,sans-serif;
    letter-spacing:0;
}

.muted,
.subtitle,
label{
    color:var(--muted);
}

.btn,
.button,
.pt-button,
button{
    border-radius:6px;
    transition:transform .16s ease,opacity .16s ease,border-color .16s ease,filter .16s ease;
}

.btn,
.button,
.pt-button,
button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:11px 14px;
    color:#05070a;
    text-decoration:none;
    background:
        linear-gradient(180deg,rgba(255,179,102,.18),rgba(255,123,0,.08)),
        linear-gradient(135deg,#ff7b00,#ff9f1c);
    border:1px solid rgba(255,123,0,.42);
    font-weight:950;
    box-shadow:0 10px 24px rgba(255,123,0,.18), inset 0 1px 0 rgba(255,255,255,.24);
}

.pt-actions{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}

.pt-userline{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.btn:hover,
.button:hover,
.pt-button:hover,
button:hover{
    transform:translateY(-1px);
    border-color:rgba(255,179,102,.72);
    filter:saturate(1.08);
}

button.secondary,
.btn.secondary,
.button.secondary,
.pt-button.secondary{
    background:
        linear-gradient(180deg,rgba(255,123,0,.12),rgba(255,123,0,.04)),
        rgba(8,13,19,.96);
    border-color:rgba(255,123,0,.30);
    color:#ffd1a3;
    box-shadow:inset 3px 0 0 #ff7b00,0 10px 22px rgba(0,0,0,.18);
}

button.danger,
.btn.danger,
.button.danger,
.delete-btn,
.pt-button.danger{
    background:linear-gradient(135deg,#9d2b22,#c0392b);
    border-color:rgba(255,107,107,.38);
    color:#fff;
    box-shadow:0 10px 22px rgba(0,0,0,.20);
}

button.success,
.btn.success,
.button.success,
.pt-button.success{
    background:linear-gradient(135deg,#159947,#24d366);
    border-color:rgba(36,211,102,.36);
    color:#041009;
    box-shadow:0 10px 22px rgba(36,211,102,.14), inset 0 1px 0 rgba(255,255,255,.20);
}

input,
select,
textarea{
    border-radius:10px;
    background:rgba(7,11,16,.94);
    color:var(--text);
}

.tabs{
    border-radius:14px;
    background:rgba(8,13,19,.78);
}

.tab{
    border-radius:10px;
}

.table-wrap{
    border-radius:14px;
    border:1px solid var(--line);
    overflow-x:auto;
}

.cyan{color:var(--cyan)}
.green{color:var(--green)}
.purple{color:var(--purple)}
.orange{color:var(--accent2)}

.focus-title{
    margin:7px 0 4px;
    color:#fff;
    font-size:1.35rem;
    font-weight:900;
    overflow-wrap:anywhere;
}

.insight-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-bottom:18px;
}

.insight-card{
    position:relative;
    overflow:hidden;
    min-height:150px;
    padding:18px;
    border:1px solid var(--line);
    border-radius:14px;
    background:
        radial-gradient(circle at top right,rgba(255,123,0,.16),transparent 38%),
        linear-gradient(180deg,rgba(16,24,32,.96),rgba(8,13,19,.98));
    box-shadow:var(--shadow);
}

.insight-card:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:4px;
    height:100%;
    background:linear-gradient(180deg,var(--accent),var(--accent2));
}

.insight-title{
    margin-top:9px;
    color:#fff;
    font-size:1.08rem;
    font-weight:900;
    overflow-wrap:anywhere;
}

.insight-metrics{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:13px;
}

.metric-pill{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:6px 9px;
    border-radius:999px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.10);
    color:#dfe7ef;
    font-size:.82rem;
    font-weight:800;
}

.trend-panel{
    display:grid;
    grid-template-columns:minmax(260px,.65fr) minmax(0,1.35fr);
    gap:14px;
    margin-bottom:18px;
}

.trend-summary{
    padding:18px;
    border:1px solid var(--line);
    border-radius:14px;
    background:linear-gradient(180deg,rgba(20,32,43,.96),rgba(8,13,19,.98));
    box-shadow:var(--shadow);
}

.trend-bars{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    align-items:end;
    gap:10px;
    min-height:190px;
    padding:18px;
    border:1px solid var(--line);
    border-radius:14px;
    background:linear-gradient(180deg,rgba(16,24,32,.96),rgba(8,13,19,.98));
    box-shadow:var(--shadow);
}

.trend-day{
    display:grid;
    grid-template-rows:1fr auto auto;
    gap:8px;
    min-width:0;
    height:154px;
}

.trend-bar{
    align-self:end;
    min-height:6px;
    border-radius:8px 8px 3px 3px;
    background:linear-gradient(180deg,var(--green),rgba(36,211,102,.34));
    box-shadow:0 0 18px rgba(36,211,102,.16);
}

.trend-count{
    color:#fff;
    font-weight:900;
    text-align:center;
    font-size:.9rem;
}

.trend-label{
    color:var(--muted);
    text-align:center;
    font-size:.78rem;
    font-weight:800;
    text-transform:uppercase;
}

table{
    background:rgba(6,10,15,.54);
}

th{
    background:rgba(255,255,255,.035);
    color:var(--muted);
}

td{
    color:#e9eef3;
}

tr:hover td{
    background:rgba(255,123,0,.045);
}

.pill,
.badge{
    border-radius:999px;
    background:rgba(255,123,0,.12);
    color:var(--accent2);
    border:1px solid rgba(255,123,0,.22);
}

.site-footer{
    color:var(--muted);
}

.site-footer strong{
    color:var(--accent2);
}

@media(max-width:900px){
    body{padding:14px}
    .container,
    .wrap{width:100%}
    .insight-grid,
    .trend-panel{grid-template-columns:1fr}
}