:root {
    --pg-bg: #07070a;
    --pg-bg-2: #101018;
    --pg-panel: rgba(18, 18, 28, 0.88);
    --pg-line: rgba(255, 255, 255, 0.12);
    --pg-text: #eef3ff;
    --pg-muted: #9aa3b8;
    --pg-cyan: #22d3ee;
    --pg-blue: #38bdf8;
    --pg-purple: #a855f7;
    --pg-fail: #fb7185;
    --pg-ok: #34d399;
    --ink: var(--pg-text);
    --ink-soft: #c7d0e0;
    --mist: var(--pg-bg);
    --paper: var(--pg-panel);
    --line: var(--pg-line);
    --teal: var(--pg-cyan);
    --teal-deep: #0891b2;
    --signal: var(--pg-purple);
    --ok: var(--pg-ok);
    --fail: var(--pg-fail);
    --muted: var(--pg-muted);
    --mono: "IBM Plex Mono", ui-monospace, monospace;
    --sans: "IBM Plex Sans", sans-serif;
    --display: "Syne", sans-serif;
}

body {
    color: var(--pg-text);
    background:
        radial-gradient(900px 520px at 12% -10%, rgba(34, 211, 238, 0.18), transparent 55%),
        radial-gradient(800px 480px at 100% 0%, rgba(168, 85, 247, 0.20), transparent 50%),
        linear-gradient(180deg, #050508 0%, #0b0b12 45%, #09090f 100%) !important;
}

body::before {
    opacity: 0.22 !important;
    background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px) !important;
}

.pg-logo {
    display: block;
    width: min(220px, 55vw);
    height: auto;
    margin: 0 auto 0.75rem;
    filter: drop-shadow(0 8px 24px rgba(34, 211, 238, 0.25));
}

.pg-logo-nav {
    height: 36px;
    width: auto;
    display: block;
}

.pg-brand-lockup {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pg-brand-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.pg-company {
    font-family: var(--display);
    font-weight: 800;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    background: linear-gradient(90deg, var(--pg-cyan), var(--pg-purple));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pg-tool {
    font-size: 0.82rem;
    color: var(--pg-muted);
    font-weight: 500;
}

.pg-tagline {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: linear-gradient(90deg, var(--pg-cyan), var(--pg-purple));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 600;
}

.panel, .card, .cal-box, input, select, .cal-cell:not(.empty):not(:disabled) {
    background: rgba(16, 16, 26, 0.9) !important;
    color: var(--pg-text) !important;
    border-color: var(--pg-line) !important;
}

input::placeholder { color: #6b7388; }

#submit-btn, .btn-view, .dl-btn, .cal-btn.primary, button[type="submit"] {
    background: linear-gradient(90deg, #0891b2, #7c3aed) !important;
    border: none !important;
    color: #fff !important;
}

#submit-btn:hover:not(:disabled),
.btn-view:hover:not(:disabled),
.dl-btn:hover,
.cal-btn.primary:hover:not(:disabled),
button[type="submit"]:hover {
    filter: brightness(1.08);
}

#log-box {
    background: #050508 !important;
    color: #d7e3de !important;
    border: 1px solid var(--pg-line);
}

.result-box {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(52, 211, 153, 0.35) !important;
    color: var(--pg-text) !important;
}

.result-box.error-result {
    background: rgba(251, 113, 133, 0.12) !important;
    border-color: rgba(251, 113, 133, 0.4) !important;
    color: #fecdd3 !important;
}

.progress-bar {
    background: linear-gradient(90deg, var(--pg-cyan), var(--pg-purple)) !important;
}

.progress-bar-wrap {
    background: rgba(255,255,255,0.08) !important;
}

.step.active {
    background: rgba(34, 211, 238, 0.1) !important;
    border-color: rgba(34, 211, 238, 0.3) !important;
    color: var(--pg-cyan) !important;
}

a { color: var(--pg-cyan); }
a:hover { color: #67e8f9; }

.nav-link, a.link {
    color: var(--pg-muted) !important;
}
.nav-link:hover, a.link:hover {
    color: var(--pg-cyan) !important;
    border-color: var(--pg-cyan) !important;
}

.brand::after {
    background: linear-gradient(90deg, var(--pg-cyan), var(--pg-purple)) !important;
}

.hint code {
    background: rgba(34, 211, 238, 0.12) !important;
    color: #a5f3fc;
}

.cal-selected {
    background: rgba(34, 211, 238, 0.08) !important;
    border-color: rgba(34, 211, 238, 0.25) !important;
}

.cal-cell.active {
    background: linear-gradient(135deg, #0891b2, #7c3aed) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.badge-running {
    background: rgba(34, 211, 238, 0.12) !important;
    color: var(--pg-cyan) !important;
    border-color: rgba(34, 211, 238, 0.3) !important;
}

table th { color: var(--pg-muted) !important; }
table td { border-color: var(--pg-line) !important; }
tr:hover td { background: rgba(34, 211, 238, 0.05) !important; }

.toast {
    background: #12121c !important;
    border-color: var(--pg-line) !important;
    color: var(--pg-text) !important;
}

.pg-footer {
    margin-top: 2rem;
    text-align: center;
    color: var(--pg-muted);
    font-size: 0.8rem;
}
.pg-footer strong {
    background: linear-gradient(90deg, var(--pg-cyan), var(--pg-purple));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}