:root{--bg:#0a0d14;--panel:#111722;--panel2:#151d2a;--line:#253044;--text:#f4f7fb;--muted:#8592a6;--accent:#7c5cff;--cyan:#27d7e7;--green:#36d399;--red:#fb6b78;--yellow:#f6c85f}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 80% 0,#17152d 0,transparent 30%),var(--bg);color:var(--text);font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}.shell{min-height:100vh;display:flex}.sidebar{position:fixed;inset:0 auto 0 0;width:250px;background:#0c111a;border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:12px;padding:0 8px 22px}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--cyan));color:white;box-shadow:0 0 28px #7c5cff55}.brand b{display:block;letter-spacing:.08em}.brand small{display:block;color:var(--muted);font-size:10px;letter-spacing:.13em}.sidebar nav{display:grid;gap:6px}.nav-link{padding:11px 12px;border-radius:10px;color:#b9c2d0}.nav-link:hover,.nav-link.active{background:#171e2b;color:white}.nav-link.active{box-shadow:inset 3px 0 var(--accent)}.nav-link span{float:right;font-size:10px;color:var(--muted)}.nav-link.disabled{opacity:.5;cursor:default}.sidebar-foot{margin-top:auto;border-top:1px solid var(--line);padding:16px 10px 0}.link-btn{padding:6px 0;border:0;background:none;color:var(--muted);cursor:pointer}.main{margin-left:250px;width:calc(100% - 250px);min-height:100vh}.main-login{margin:0;width:100%}.topbar{height:58px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#0a0e16cc;backdrop-filter:blur(14px);position:sticky;top:0;z-index:3}.online-dot,.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 14px #36d39999;margin-right:7px}.status-dot.offline{background:var(--red);box-shadow:0 0 14px #fb6b7899}.status-dot.pending,.status-dot.unknown{background:var(--yellow);box-shadow:0 0 14px #f6c85f77}.content{padding:30px;max-width:1500px;margin:auto}.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px}.page-head h1{font-size:30px;margin:0 0 4px}.page-head p{margin:0;color:var(--muted)}.crumb{font-size:12px;color:var(--muted);margin-bottom:7px}.crumb a{color:var(--cyan)}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.stat,.panel{background:linear-gradient(180deg,#121925,#0f151f);border:1px solid var(--line);border-radius:15px;box-shadow:0 14px 40px #0003}.stat{padding:18px}.stat span{display:block;color:var(--muted);font-size:11px;letter-spacing:.1em}.stat strong{display:block;font-size:30px;margin:4px 0}.stat small{color:var(--muted)}.stat.good strong{color:var(--green)}.stat.bad strong{color:var(--red)}.stat.warn strong{color:var(--yellow)}.grid-2{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;margin-bottom:18px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:18px}.panel{padding:18px}.panel h2{margin:0 0 12px;font-size:17px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.panel-head h2{margin:0}.panel-head a{font-size:12px;color:var(--cyan)}.node-list{display:grid}.node-row{display:flex;align-items:center;gap:10px;padding:12px 4px;border-top:1px solid #222c3d}.node-row:first-child{border-top:0}.node-row:hover{background:#151d28}.grow{flex:1}.node-row b,.node-row small{display:block}.node-row small{color:var(--muted)}.badge,.pill,.big-status{display:inline-block;border:1px solid var(--line);background:#171f2c;border-radius:999px;padding:4px 9px;font-size:10px;letter-spacing:.07em}.badge.pending,.big-status.pending{border-color:#65562b;color:var(--yellow)}.badge.approved{border-color:#275846;color:var(--green)}.badge.rejected{border-color:#6a3439;color:var(--red)}.badge.role{color:#cfc8ff;border-color:#433b70}.big-status{font-size:11px;padding:7px 11px}.big-status.online{color:var(--green);border-color:#275846}.big-status.offline{color:var(--red);border-color:#6a3439}.gateway-card{padding:17px;border:1px solid #302b51;background:#15152a;border-radius:12px;display:flex;justify-content:space-between;margin:10px 0 14px}.gateway-card small,.hero-gateway small{color:var(--muted);display:block;font-size:10px;letter-spacing:.1em}.gateway-card strong{font-size:18px}.mono,code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.service-line{display:flex;justify-content:space-between;border-top:1px solid #222c3d;padding:10px 2px}.muted{color:var(--muted)}.roadmap{margin-top:18px}.roadmap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.road{border:1px solid var(--line);border-radius:12px;padding:13px;display:flex;gap:12px}.road>b{color:var(--accent)}.road.done{border-color:#2c6650}.road.done>b{color:var(--green)}.road strong,.road small{display:block}.road small{color:var(--muted)}.table-wrap{overflow:auto;padding:0}table{width:100%;border-collapse:collapse;min-width:850px}th,td{text-align:left;padding:13px 15px;border-bottom:1px solid #222c3d}th{font-size:10px;letter-spacing:.08em;color:var(--muted);background:#121925;position:sticky;top:0}td small{display:block;color:var(--muted)}tr.clickable{cursor:pointer}tr.clickable:hover td{background:#151d28}.empty{padding:24px;text-align:center;color:var(--muted)}.enroll-help{margin-top:18px}.enroll-help code{display:inline-block;background:#090d14;border:1px solid var(--line);padding:8px 10px;border-radius:8px;color:var(--cyan)}.approval-box{border:1px solid #6b5a2a;background:#211d12;border-radius:14px;padding:18px;display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:18px}.approval-box h2{margin:0 0 4px}.approval-box p{margin:0;color:#b8ac86}.actions{display:flex;gap:9px}.btn{border:1px solid #354159;background:#182130;color:white;border-radius:10px;padding:9px 13px;cursor:pointer}.btn:hover{filter:brightness(1.12)}.btn.primary{background:linear-gradient(135deg,#7256eb,#4d82f0);border-color:#7256eb}.btn.danger{background:#3a1c23;border-color:#71333d;color:#ffb5bd}.btn.small{padding:6px 9px}.details{display:grid;grid-template-columns:140px 1fr;gap:0;margin:0}.details dt,.details dd{padding:9px 0;border-bottom:1px solid #222c3d;margin:0}.details dt{color:var(--muted)}.audit-list>div{padding:9px 0;border-bottom:1px solid #222c3d}.audit-list b,.audit-list span,.audit-list small{display:block}.audit-list span,.audit-list small{color:var(--muted);font-size:12px}.hero-gateway{display:flex;align-items:center;justify-content:center;gap:50px;border:1px solid #3c3564;background:linear-gradient(120deg,#17152d,#10212a);border-radius:16px;padding:25px;margin-bottom:18px}.hero-gateway strong{font-size:24px}.arrow{font-size:24px;color:var(--cyan)}.port{font-family:ui-monospace,monospace;color:var(--cyan);border-top:1px solid #222c3d;border-bottom:1px solid #222c3d;padding:10px 0;margin:10px 0}.flash{padding:11px 14px;border-radius:10px;margin-bottom:15px;border:1px solid var(--line)}.flash.success{border-color:#2c6650;background:#10251d}.flash.danger{border-color:#71333d;background:#2b161b}.flash.warning{border-color:#6b5a2a;background:#211d12}.login-wrap{min-height:100vh;display:grid;place-items:center}.login-card{width:min(420px,calc(100vw - 32px));background:#111722;border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:0 30px 80px #0008}.brand-login{padding:0 0 20px}.login-card h1{margin:8px 0 4px}.form-stack{display:grid;gap:14px;margin-top:22px}.form-stack label{display:grid;gap:6px;color:#c9d1dd}.form-stack input{background:#0b1018;border:1px solid #303b50;color:white;border-radius:10px;padding:11px 12px;outline:none}.form-stack input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #7c5cff22}
@media(max-width:1050px){.stats-grid{grid-template-columns:repeat(2,1fr)}.grid-2,.grid-3{grid-template-columns:1fr}.roadmap-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.sidebar{width:74px;padding:18px 10px}.brand span:last-child,.sidebar .nav-link{font-size:0}.sidebar .nav-link::first-letter{font-size:16px}.sidebar-foot{display:none}.main{margin-left:74px;width:calc(100% - 74px)}.content{padding:18px}.topbar{padding:0 18px}.stats-grid{grid-template-columns:1fr 1fr}.page-head{align-items:center}.roadmap-grid{grid-template-columns:1fr}.approval-box{display:block}.actions{margin-top:14px}.hero-gateway{gap:20px;flex-direction:column}.sidebar .brand{padding-left:7px}}

/* v0.2 Security Center + automatic roadmap */
.sidebar-foot small{display:block;color:var(--muted);margin-top:2px}.security-banner{border:1px solid #493e72;background:linear-gradient(120deg,#17152d,#151c28);border-radius:15px;padding:18px;display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:18px}.security-banner p{margin:5px 0 0;color:#b8c1d0}.approver-list{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.approver-list small{color:var(--muted);letter-spacing:.08em}.approver-list span{border:1px solid #51457d;background:#1d1932;border-radius:999px;padding:5px 9px;font-size:11px}.form-stack select,.form-stack textarea,.reject-form input,.approve-form input{background:#0b1018;border:1px solid #303b50;color:white;border-radius:10px;padding:11px 12px;outline:none;min-width:0}.form-stack select:focus,.form-stack textarea:focus,.reject-form input:focus,.approve-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #7c5cff22}.security-state{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid #222c3d}.security-state .ok{color:var(--green)}.pending-text{color:var(--yellow);font-size:11px}.mini-note{font-size:12px;color:var(--muted);margin:15px 0 0}.request-list{display:grid;gap:12px}.request-card{border:1px solid var(--line);background:#0d131d;border-radius:13px;padding:14px}.request-card.critical{border-color:#51457d}.request-main{display:flex;gap:13px;align-items:flex-start}.request-id{font-family:ui-monospace,monospace;color:var(--cyan);font-weight:700}.request-main small{display:block;color:var(--muted);margin-top:2px}.request-main p{margin:8px 0 0;color:#c5ceda}.approval-actions{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;border-top:1px solid #222c3d;margin-top:12px;padding-top:12px}.approve-form,.reject-form{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.approve-form label{display:grid;gap:5px;color:var(--muted);font-size:11px}.reject-form{justify-content:flex-end}.badge.security-approved{border-color:#275846;color:var(--green)}.badge.security-rejected{border-color:#6a3439;color:var(--red)}.badge.security-expired{border-color:#4d5664;color:var(--muted)}.panel-title-pad{padding:15px 16px 2px}.panel-title-pad h2{margin:0}.progress-number{text-align:right}.progress-number strong{display:block;font-size:30px}.progress-number small{color:var(--muted)}.progress-track{height:10px;border:1px solid var(--line);background:#0d121a;border-radius:999px;overflow:hidden;margin:-10px 0 12px}.progress-track span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--cyan));border-radius:inherit}.roadmap-legend{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin-bottom:18px}.legend{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:#495264}.legend.done{background:var(--green)}.legend.progress{background:var(--yellow)}.roadmap-section{margin-bottom:16px}.roadmap-list{display:grid}.task-row{display:flex;align-items:center;gap:12px;padding:13px 3px;border-top:1px solid #222c3d}.task-row:first-child{border-top:0}.task-check{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid #485366;color:var(--muted);flex:0 0 auto}.task-row.done .task-check{border-color:#2c6650;background:#10251d;color:var(--green)}.task-row.in_progress .task-check{border-color:#6b5a2a;background:#211d12;color:var(--yellow)}.task-row b,.task-row small{display:block}.task-row small{color:var(--muted)}.task-status{font-size:10px;letter-spacing:.08em;color:var(--muted)}.task-row.done .task-status{color:var(--green)}.task-row.in_progress .task-status{color:var(--yellow)}.info-panel code{display:inline-block;margin-top:8px;background:#090d14;border:1px solid var(--line);padding:7px 9px;border-radius:8px;color:var(--cyan)}.action-panel{display:flex;align-items:center;justify-content:space-between;gap:18px;transition:border-color .15s ease}.action-panel:hover{border-color:#51457d}.action-panel small{color:var(--muted);letter-spacing:.09em}.action-panel h2{margin:5px 0}.action-panel p{margin:0;color:var(--muted)}.action-arrow{font-size:26px;color:var(--cyan)}.road.in_progress{border-color:#6b5a2a}.road.in_progress>b{color:var(--yellow)}
@media(max-width:760px){.security-banner{align-items:flex-start;flex-direction:column}.approver-list{justify-content:flex-start}.approval-actions{grid-template-columns:1fr}.approve-form,.reject-form{align-items:stretch;flex-direction:column}.progress-number{text-align:left}.task-status{display:none}}
.node-toolbar{display:flex;justify-content:flex-end;margin:-8px 0 16px}
/* v0.3 External Infrastructure */
.form-pair{display:grid;grid-template-columns:1fr 150px;gap:10px}.external-info{margin-bottom:18px}.external-flow{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}.external-flow>div:not(.arrow){border:1px solid #2b374a;background:#0d131d;border-radius:12px;padding:14px}.external-flow b,.external-flow small{display:block}.external-flow small{color:var(--muted);margin-top:5px}.external-table-gap{margin-top:18px}.external-info .arrow{color:var(--cyan);font-size:24px}.form-stack textarea{resize:vertical}
@media(max-width:760px){.form-pair,.external-flow{grid-template-columns:1fr}.external-flow .arrow{transform:rotate(90deg);text-align:center}}


/* ===== PLAY-ARENA UI REFRESH ===== */

/*
   Play-Arena Control Center
   Układ HTML pozostaje bez zmian.
*/

:root {
    --bg: #080b12;
    --panel: #101722;
    --panel2: #141c29;
    --line: #263145;
    --text: #f5f7fb;
    --muted: #8996aa;

    --accent: #8064ff;
    --cyan: #32cfe0;
    --green: #3dd6a0;
    --red: #ff6878;
    --yellow: #f4c768;
}

body {
    background:
        radial-gradient(circle at 82% -10%,
            rgba(128,100,255,.14),
            transparent 31%),
        radial-gradient(circle at 12% 110%,
            rgba(50,207,224,.055),
            transparent 30%),
        linear-gradient(180deg,#090c13,#070a10);
}

/* SIDEBAR */

.sidebar {
    background: linear-gradient(180deg,#0f141f,#090d14);
    border-right: 1px solid #202a39;
    box-shadow: 10px 0 40px rgba(0,0,0,.14);
}

.brand-mark {
    background: linear-gradient(135deg,#916fff,#7054eb 55%,#32cfe0 140%);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 8px 25px rgba(128,100,255,.28);
}

.nav-link {
    color: #a8b3c4;
    border: 1px solid transparent;
    transition: .16s ease;
}

.nav-link:hover {
    background: #141c29;
    border-color: #202b3b;
    color: #f5f7fb;
}

.nav-link.active {
    background: linear-gradient(
        90deg,
        rgba(128,100,255,.17),
        rgba(128,100,255,.05)
    );
    border-color: rgba(128,100,255,.22);
    color: #fff;
    box-shadow: inset 3px 0 #8064ff;
}

/* TOPBAR */

.topbar {
    background: rgba(9,13,20,.84);
    border-bottom: 1px solid #252f40;
    box-shadow: 0 5px 25px rgba(0,0,0,.10);
    backdrop-filter: blur(18px) saturate(130%);
}

/* TYPOGRAFIA */

.page-head h1 {
    color: #f8f9fc;
    font-weight: 700;
    letter-spacing: -.025em;
}

.page-head p,
.muted {
    color: #8996aa;
}

/* PANELE */

.panel,
.stat {
    background: linear-gradient(
        180deg,
        rgba(19,27,40,.98),
        rgba(14,20,30,.98)
    );

    border: 1px solid #263145;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.panel {
    transition: border-color .16s ease,
                box-shadow .16s ease;
}

.panel:hover {
    border-color: #344157;
}

.stat {
    position: relative;
    overflow: hidden;
}

.stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(128,100,255,.35),
        transparent
    );
}

.stat strong {
    letter-spacing: -.035em;
}

/* TABELE */

th {
    background: #0f1621;
    color: #7f8da2;
    border-color: #29354a;
}

td {
    border-color: #202a39;
    color: #dce2eb;
}

tbody tr:hover td,
tr.clickable:hover td {
    background: rgba(128,100,255,.045);
}

/* BUTTONS */

.btn {
    background: linear-gradient(180deg,#1d2736,#17202d);
    border-color: #35435a;
    box-shadow: 0 5px 13px rgba(0,0,0,.13);
    transition: .14s ease;
}

.btn:hover {
    filter: none;
    transform: translateY(-1px);
    border-color: #4b5971;
}

.btn.primary {
    background: linear-gradient(135deg,#876bff,#7055eb 60%,#607af0);
    border-color: #8a70ff;
    box-shadow: 0 8px 22px rgba(112,85,235,.20);
}

.btn.danger {
    background: #321b22;
    border-color: #693440;
    color: #ffb7bf;
}

/* STATUSY */

.badge,
.pill,
.big-status {
    background: rgba(22,30,43,.94);
    border-color: #354158;
}

.badge.role {
    background: rgba(128,100,255,.09);
    border-color: rgba(128,100,255,.38);
    color: #d2caff;
}

.big-status.online,
.badge.approved {
    background: rgba(61,214,160,.07);
    border-color: rgba(61,214,160,.30);
}

.big-status.offline,
.badge.rejected {
    background: rgba(255,104,120,.07);
    border-color: rgba(255,104,120,.30);
}

.big-status.pending,
.badge.pending {
    background: rgba(244,199,104,.07);
    border-color: rgba(244,199,104,.30);
}

/* FORMULARZE */

.form-stack input,
.form-stack select,
.form-stack textarea,
.reject-form input,
.approve-form input {
    background: #0b111a;
    border-color: #303d52;
    color: #eef2f7;
}

.form-stack input:focus,
.form-stack select:focus,
.form-stack textarea:focus,
.reject-form input:focus,
.approve-form input:focus {
    border-color: #8064ff;
    box-shadow: 0 0 0 3px rgba(128,100,255,.10);
}

/* SECURITY */

.security-banner {
    background: linear-gradient(
        120deg,
        rgba(128,100,255,.11),
        rgba(17,24,36,.96)
    );
    border-color: rgba(128,100,255,.28);
}

.request-card {
    background: #0d141e;
    border-color: #273247;
}

/* GATEWAY */

.gateway-card {
    background: linear-gradient(
        120deg,
        rgba(128,100,255,.09),
        rgba(17,29,38,.85)
    );
    border-color: rgba(128,100,255,.25);
}

.hero-gateway {
    background:
        radial-gradient(circle at 20% 0,
            rgba(128,100,255,.15),
            transparent 40%),
        linear-gradient(120deg,#121726,#0e1c24);

    border-color: rgba(128,100,255,.28);
}

/* ROADMAP */

.road {
    background: rgba(15,22,33,.62);
    border-color: #293448;
}

.road:hover {
    background: rgba(20,28,41,.86);
    border-color: #39465d;
}

.progress-track span {
    background: linear-gradient(90deg,#8064ff,#746eff,#32cfe0);
}

/* EXTERNAL */

.external-flow > div:not(.arrow) {
    background: #0d141e;
    border-color: #283448;
}

/* LOGIN */

.login-card {
    background: linear-gradient(180deg,#121925,#0e141e);
    border-color: #2b374b;
    box-shadow: 0 35px 100px rgba(0,0,0,.5);
}

/* TECHNICAL ACCENTS */

.panel-head a,
.action-arrow,
.request-id,
.external-info .arrow,
code,
.enroll-help code,
.info-panel code {
    color: #55d7e4;
}

/* SCROLLBAR */

* {
    scrollbar-width: thin;
    scrollbar-color: #354157 #0c1119;
}

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

::-webkit-scrollbar-track {
    background: #0b1017;
}

::-webkit-scrollbar-thumb {
    background: #354157;
    border: 2px solid #0b1017;
    border-radius: 999px;
}