:root {
    --ninja-bg: #050708;
    --ninja-panel: rgba(8,13,14,.88);
    --ninja-border-soft: rgba(255,204,36,.22);
    --ninja-gold: #ffd12d;
    --ninja-green: #4be6a8;
    --ninja-red: #ff5f55;
    --ninja-text: #f4f7f8;
    --ninja-muted: #9aa8b2;
    --ninja-muted-2: #6f7d85;
    --ninja-shadow: 0 14px 40px rgba(0,0,0,.28);
}

html,
body {
    margin: 0;
    min-height: 100%;
    color: var(--ninja-text);
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background:
        linear-gradient(180deg, rgba(3,6,7,.72), rgba(3,6,7,.92)),
        radial-gradient(circle at 78% 6%, rgba(255,171,0,.18), transparent 22%),
        url('/images/ninja/ninja-bg.jpg') center top / cover fixed no-repeat,
        var(--ninja-bg);
}

body {
    overflow-x: hidden;
}

a,
.btn-link {
    color: var(--ninja-gold);
}

a:hover,
.btn-link:hover {
    color: #ffe471;
}

::selection {
    color: #111;
    background: var(--ninja-gold);
}

.ninja-content {
    color: var(--ninja-text);
}

.ninja-content h1,
.ninja-content h2,
.ninja-content h3,
.ninja-content h4,
.ninja-content h5,
.ninja-content h6 {
    color: #fff;
}

.ninja-content h1 {
    font-weight: 700;
    letter-spacing: -.02em;
    text-shadow: 0 2px 22px rgba(0,0,0,.35);
}

.ninja-content p,
.ninja-content .text-muted,
.ninja-content small {
    color: var(--ninja-muted) !important;
}

.ninja-content .card,
.ninja-content .status-card,
.ninja-content .tool-panel,
.ninja-content .server-card,
.ninja-content .traffic-card {
    color: var(--ninja-text);
    background: linear-gradient(180deg, rgba(13,19,20,.92), rgba(6,10,11,.92));
    border: 1px solid var(--ninja-border-soft);
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.015), var(--ninja-shadow);
}

.ninja-content table,
.ninja-content .table {
    color: var(--ninja-text);
    --bs-table-color: var(--ninja-text);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255,255,255,.018);
    --bs-table-border-color: rgba(255,205,39,.11);
}

.ninja-content table thead th,
.ninja-content .table thead th {
    color: var(--ninja-gold);
    font-weight: 700;
    border-bottom-color: rgba(255,205,39,.28);
    background: rgba(5,10,11,.74);
}

.ninja-content table tbody td,
.ninja-content .table tbody td {
    color: #eef3f5;
    border-color: rgba(255,205,39,.1);
    background: rgba(6,11,12,.56);
}

.ninja-content table tbody tr:hover td,
.ninja-content .table tbody tr:hover td {
    background: rgba(255,193,0,.055);
}

.ninja-content .form-control,
.ninja-content .form-select {
    color: #eef3f5;
    background-color: rgba(5,10,11,.92);
    border-color: rgba(255,205,39,.28);
    border-radius: 8px;
}

.ninja-content .form-control::placeholder {
    color: #66757f;
}

.ninja-content .form-control:focus,
.ninja-content .form-select:focus {
    color: #fff;
    background-color: rgba(5,10,11,.96);
    border-color: var(--ninja-gold);
    box-shadow: 0 0 0 3px rgba(255,209,45,.1);
}

.ninja-content .form-select option {
    background: #0a0e10;
    color: #fff;
}

.btn {
    border-radius: 8px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    color: #131313;
    background: linear-gradient(180deg, #ffe052, #ffc21d);
    border-color: #ffd12a;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(255,185,0,.18);
}

.btn-primary:hover,
.btn-primary:focus {
    color: #111;
    background: linear-gradient(180deg, #ffe978, #ffca2c);
    border-color: #ffe066;
    box-shadow: 0 8px 24px rgba(255,190,0,.24);
}

.btn-outline-primary {
    color: var(--ninja-gold);
    border-color: rgba(255,206,39,.7);
    background: rgba(255,204,36,.025);
}

.btn-outline-primary:hover {
    color: #111;
    border-color: var(--ninja-gold);
    background: var(--ninja-gold);
}

.btn-outline-danger {
    color: #ff7b70;
    border-color: rgba(255,87,76,.7);
    background: rgba(255,77,65,.025);
}

.btn-outline-danger:hover {
    color: #fff;
    border-color: #ff5a50;
    background: rgba(255,70,60,.15);
}

.text-success {
    color: var(--ninja-green) !important;
}

.text-danger {
    color: var(--ninja-red) !important;
}

.alert {
    color: #edf3f5;
    background: rgba(12,17,18,.94);
    border-radius: 10px;
}

.alert-success {
    border-color: rgba(55,224,157,.45);
    background: rgba(19,94,65,.32);
}

.alert-danger {
    border-color: rgba(255,92,80,.5);
    background: rgba(107,35,30,.38);
}

.alert-secondary {
    border-color: rgba(255,205,40,.18);
    background: rgba(255,255,255,.025);
}

.ninja-content .position-absolute.bg-white {
    color: var(--ninja-text) !important;
    background: #0a0f10 !important;
    border-color: rgba(255,204,36,.28) !important;
    box-shadow: 0 15px 34px rgba(0,0,0,.45) !important;
}

.ninja-content .btn-link.text-dark,
.ninja-content .text-dark {
    color: var(--ninja-gold) !important;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 .18rem rgba(255,205,38,.13);
}

* {
    scrollbar-width: thin;
    scrollbar-color: #6f5310 #080b0c;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: #080b0c;
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(#806117, #5a4210);
    border: 2px solid #080b0c;
    border-radius: 20px;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #ff7167;
}

.blazor-error-boundary {
    background: #641f1a;
    border: 1px solid #ff6156;
    padding: 1rem;
    color: white;
    border-radius: 10px;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
    border-color: #6f7880;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--ninja-muted-2);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}