:root{

--bg:#0f141b;
--surface:#151c25;
--surface-2:#1d2632;

--text:#e7edf6;
--muted:#9aa6b2;

--brand:#dd9300;
--brand-strong:#f0ab25;
--brand-soft:rgba(221,147,0,.16);

--danger:#ff6b6b;

--border:#263140;

--radius:12px;

}

/* LIGHT MODE */

[data-theme="light"]{

--bg:#eef3f8;
--surface:#ffffff;
--surface-2:#f5f8fc;

--text:#18212d;
--muted:#5f6c7b;

--brand:#dd9300;
--brand-strong:#b77500;
--brand-soft:rgba(221,147,0,.12);

--danger:#dc4c64;

--border:#d8e0ea;

}


/* BODY */

body.bg-app{

background:
radial-gradient(1200px 600px at 10% 10%,rgba(148,163,184,.08)0%,var(--bg)55%),
radial-gradient(800px 400px at 90% 0%,rgba(107,114,128,.08)0%,var(--bg)50%);

color:var(--text);
min-height:100vh;

}

[data-theme="light"] body.bg-app{

background:
radial-gradient(1100px 580px at 10% 10%,rgba(148,163,184,.12)0%,rgba(255,255,255,0)52%),
radial-gradient(780px 420px at 88% 4%,rgba(100,116,139,.08)0%,rgba(255,255,255,0)48%),
linear-gradient(180deg,#f8fafc,#eef2f7);

}


/* GLOBAL */

a{color:inherit;}

.card,
.modal-content,
.offcanvas,
.dropdown-menu{

background:var(--surface);
border:1px solid var(--border);
color:var(--text);

}


/* BRAND MARK */

.brand-mark{

width:12px;
height:12px;
border-radius:4px;

background:
linear-gradient(135deg,var(--brand),var(--brand-strong));

display:inline-block;

}


/* TABLES */

.table{

--bs-table-bg:transparent;
--bs-table-color:var(--text);
--bs-table-border-color:var(--border);

}

.table-hover tbody tr:hover{
background:color-mix(in srgb,var(--brand)10%,transparent);
}

.table-break td,
.table-break th{

white-space:normal;
word-break:break-word;

}


/* ========================= */
/* BUTTON SYSTEM (REBUILT) */
/* ========================= */

.btn{

font-weight:500;
border-radius:8px;
transition:
background .15s ease,
border-color .15s ease,
color .15s ease,
box-shadow .15s ease;

}

/* PRIMARY / ACCENT */

.btn-accent{

background:var(--brand);
border:1px solid var(--brand);
color:#111;

font-weight:600;

}

.btn-accent:hover{

background:var(--brand-strong);
border-color:var(--brand-strong);
color:#111;

box-shadow:
0 0 0 .2rem color-mix(in srgb,var(--brand)25%,transparent);

}


/* LIGHT / WHITE BUTTON */

.btn-light{

background:var(--surface);
border:1px solid var(--border);
color:var(--text);

}

.btn-light:hover{

background:color-mix(in srgb,var(--brand)8%,var(--surface));
border-color:color-mix(in srgb,var(--brand)40%,var(--border));
color:var(--text);

}


/* OUTLINE BUTTON */

.btn-outline-light{

background:transparent;
border:1px solid var(--border);
color:var(--text);

}

.btn-outline-light:hover{

background:color-mix(in srgb,var(--brand)8%,var(--surface));
border-color:color-mix(in srgb,var(--brand)40%,var(--border));
color:var(--text);

}


/* TOPBAR BUTTON FIX */

.topbar .btn{

background:var(--surface);
border:1px solid var(--border);
color:var(--text);

}

.topbar .btn:hover{

background:color-mix(in srgb,var(--brand)8%,var(--surface));
border-color:color-mix(in srgb,var(--brand)45%,var(--border));
color:var(--text);

}


/* BADGES */

.badge-soft{

background:color-mix(in srgb,var(--brand)15%,transparent);
color:var(--brand);
border:1px solid color-mix(in srgb,var(--brand)30%,transparent);

}


/* SIDEBAR */

.sidebar{

width:238px;
flex:0 0 238px;

background:
linear-gradient(
180deg,
color-mix(in srgb,var(--surface-2)96%,transparent),
color-mix(in srgb,var(--surface-2)88%,#1a1f27)
);

border-right:1px solid var(--border);
min-height:100vh;

}

.sidebar .nav-link{

color:var(--muted);
padding:.65rem .9rem;
border-radius:var(--radius);
border:1px solid transparent;
transition:all .15s ease;

}

.sidebar .nav-link:hover,
.sidebar .nav-link.active{

color:var(--text);

background:
linear-gradient(
90deg,
color-mix(in srgb,var(--brand)8%,transparent),
rgba(255,255,255,.02)
);

border-color:
color-mix(in srgb,var(--brand)60%,transparent);

}


/* TOPBAR */

.topbar{

background:var(--surface);
border-bottom:1px solid var(--border);

box-shadow:
inset 0 -1px 0
color-mix(in srgb,var(--brand)10%,transparent);

}


/* KPI */

.kpi-card{

background:
linear-gradient(
135deg,
rgba(148,163,184,.12),
rgba(100,116,139,.08)
);

border:1px solid var(--border);
border-radius:16px;
padding:.5rem;

}

.kpi-value{

font-size:1.5rem;
font-weight:700;

}


/* METRICS */

.metric-pill{

display:inline-flex;
align-items:center;
gap:.45rem;

padding:.38rem .72rem;

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

background:
color-mix(in srgb,var(--surface)90%,transparent);

}

.metric-pill-label{

font-size:.78rem;
color:var(--muted);

}

.metric-pill-value{

font-size:.84rem;
font-weight:600;
color:var(--text);

}


/* FORMS */

.form-control,
.form-select,
.form-check-input{

background-color:#121822;
border-color:var(--border);
color:var(--text);

}

[data-theme="light"] 
.form-control,
[data-theme="light"]
.form-select,
[data-theme="light"]
.form-check-input{

background-color:#fff;

}

.form-check-input:checked{
background-color:#dd9300;
border-color:#dd9300;
}

.form-control:focus,
.form-select:focus{

border-color:var(--brand);

box-shadow:
0 0 0 .2rem
color-mix(in srgb,var(--brand)24%,transparent);

}

.password-toggle-btn{
width:3rem;
border-color:var(--border);
}


/* EMPTY STATE */

.hero-empty{

border:1px dashed var(--border);
border-radius:16px;
padding:2rem;
text-align:center;

}


/* CODE / DEV OUTPUT */

.pixel-code-field,
.json-output{

font-family:
ui-monospace,
SFMono-Regular,
Menlo,
Monaco,
Consolas,
"Liberation Mono",
"Courier New",
monospace;

font-size:.8rem;

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

padding:.75rem;

background:#0b1118;
color:#d6e6ff;

overflow:auto;

}


/* WEBHOOK URL */

.webhook-url{

display:block;
margin-top:.4rem;

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

color:var(--brand);

}


/* MOBILE */

@media (max-width:991px){

.sidebar{
display:none;
}

}


/* NAV */

.nav-link-toggle{

display:flex;
align-items:center;
justify-content:space-between;
width:100%;
background:none;

}

.nav-link-toggle > span{

display:inline-flex;
align-items:center;

}

.nav-toggle-icon{

font-size:.85rem;
transition:transform .15s ease;

}

.nav-link-toggle[aria-expanded="true"] .nav-toggle-icon{
transform:rotate(90deg);
}

.nav-submenu{

display:none;
padding-left:.8rem;
margin:.1rem 0 .35rem;

}

.nav-submenu.is-open{
display:block;
}

.nav-submenu .nav-sublink{

font-size:.96rem;
padding-top:.5rem;
padding-bottom:.5rem;

}