@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800;900&display=swap');

*{
box-sizing:border-box;
}

:root{
--bg-1:#220d27;
--bg-2:#0c1830;
--bg-3:#44123a;
--panel:rgba(17,31,54,0.88);
--panel-2:rgba(14,25,44,0.94);
--line:rgba(116,191,255,0.18);
--line-strong:rgba(116,191,255,0.34);
--text:#eaf6ff;
--muted:#9ec3df;
--cyan:#82e9ff;
--blue:#70b8ff;
--pink:#ff87d8;
--shadow:0 18px 40px rgba(0,0,0,0.28);
--radius-xl:24px;
--radius-lg:18px;
--radius-md:14px;
--sidebar-width:270px;
}

html,
body{
margin:0;
padding:0;
height:100%;
min-height:100%;
font-family:"Inter","Segoe UI",sans-serif;
color:var(--text);
background:
linear-gradient(rgba(116,191,255,0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(116,191,255,0.08) 1px, transparent 1px),
radial-gradient(circle at top center, rgba(105,191,255,0.16), transparent 32%),
linear-gradient(180deg, var(--bg-2), var(--bg-1) 45%, var(--bg-3));
background-size:38px 38px,38px 38px,auto,auto;
overflow:hidden;
}

body{
overflow:hidden;
}

a{
color:inherit;
text-decoration:none;
}

.app-shell{
display:grid;
grid-template-columns:var(--sidebar-width) minmax(0,1fr);
height:100vh;
min-height:100vh;
overflow:hidden;
}

.sidebar{
position:sticky;
top:0;
height:100vh;
padding:18px 16px;
border-right:1px solid var(--line);
background:linear-gradient(180deg, rgba(7,14,27,0.96), rgba(9,18,34,0.94));
backdrop-filter:blur(10px);
overflow:hidden;
}

.sidebar-top{
margin-bottom:18px;
}

.brand-block{
padding:8px 6px 16px 6px;
}

.brand-title{
font-size:20px;
font-weight:900;
line-height:0.95;
letter-spacing:0.04em;
color:var(--pink);
text-transform:uppercase;
font-family:"Orbitron","Inter",sans-serif;
}

.brand-subtitle{
margin-top:6px;
font-size:11px;
color:var(--muted);
text-transform:uppercase;
letter-spacing:0.08em;
font-family:"Orbitron","Inter",sans-serif;
}

.sidebar-nav{
display:grid;
gap:10px;
}

.sidebar-link{
display:flex;
align-items:center;
gap:12px;
padding:14px 14px;
border:1px solid var(--line);
border-radius:16px;
background:rgba(255,255,255,0.02);
color:var(--text);
font-weight:700;
transition:0.18s ease;
font-family:"Orbitron","Inter",sans-serif;
}

.sidebar-link i{
width:18px;
text-align:center;
color:var(--pink);
}

.sidebar-link:hover,
.sidebar-link.active{
border-color:var(--line-strong);
background:linear-gradient(180deg, rgba(95,174,255,0.18), rgba(255,255,255,0.03));
box-shadow:0 0 18px rgba(93,191,255,0.12);
}

.main-area{
position:relative;
min-width:0;
height:100vh;
padding:28px;
overflow-y:auto;
overflow-x:hidden;
scroll-behavior:smooth;
}

.control-section{
display:none;
width:100%;
margin:0;
padding:0;
}

.control-section.active-section{
display:block;
}

.hidden-section{
display:none !important;
}

.control-section h2{
margin:0 0 18px;
font-size:20px;
font-weight:800;
letter-spacing:-0.02em;
color:#f2fbff;
font-family:"Orbitron","Inter",sans-serif;
}

.hero-panel{
margin:0 0 28px 0;
padding:28px;
border-radius:26px;
border:1px solid rgba(120,180,255,0.25);
background:linear-gradient(180deg, rgba(55,125,210,0.35), rgba(14,30,55,0.92));
box-shadow:0 20px 40px rgba(0,0,0,0.35);
}

.hero-badge{
display:inline-block;
padding:6px 14px;
border-radius:999px;
border:1px solid rgba(120,180,255,0.35);
font-size:11px;
font-weight:800;
letter-spacing:0.1em;
text-transform:uppercase;
color:#d8ecff;
background:rgba(255,255,255,0.03);
margin-bottom:18px;
font-family:"Orbitron","Inter",sans-serif;
}

.hero-title{
font-size:44px;
font-weight:900;
letter-spacing:-0.03em;
margin:0 0 18px 0;
color:#ffffff;
font-family:"Orbitron","Inter",sans-serif;
}

.hero-subtitle{
font-size:16px;
font-weight:700;
letter-spacing:0.02em;
color:#aee9ff;
margin-bottom:16px;
font-family:"Orbitron","Inter",sans-serif;
}

.hero-text{
font-size:16px;
line-height:1.7;
max-width:760px;
color:#dcf2ff;
margin:0;
}

.hero-panel-2col{
display:grid;
grid-template-columns:minmax(0,1.1fr) 540px;
gap:28px;
align-items:center;
padding:38px;
border-radius:30px;
background:
linear-gradient(180deg, rgba(50,120,210,0.24), rgba(9,19,37,0.92)),
radial-gradient(circle at top center, rgba(117,220,255,0.18), transparent 38%);
border:1px solid rgba(130,190,255,0.18);
box-shadow:0 26px 54px rgba(0,0,0,0.30);
}

.hero-left{
display:flex;
flex-direction:column;
justify-content:center;
}

.hero-stack-title{
display:flex;
flex-direction:column;
line-height:0.84;
font-weight:900;
letter-spacing:-0.055em;
margin-bottom:18px;
text-transform:uppercase;
}

.hero-stack-title span{
font-size:98px;
color:#f3fbff;
text-shadow:0 4px 22px rgba(0,0,0,0.16);
font-family:"Orbitron","Inter",sans-serif;
}

.hero-stack-title span:nth-child(2){
color:var(--pink);
}

.hero-monitor-card{
background:linear-gradient(180deg, rgba(6,12,22,0.95), rgba(16,26,46,0.96));
border:1px solid rgba(123,190,255,0.14);
border-radius:28px;
padding:22px 22px 18px;
box-shadow:0 24px 40px rgba(0,0,0,0.34);
min-height:390px;
display:flex;
flex-direction:column;
justify-content:flex-start;
position:relative;
overflow:hidden;
}

.hero-monitor-card::after{
content:"";
position:absolute;
left:50%;
bottom:18px;
transform:translateX(-50%);
width:120px;
height:10px;
border-radius:999px;
background:linear-gradient(90deg, rgba(255,135,216,0.85), rgba(114,198,255,0.18));
opacity:0.95;
}

.hero-monitor-top{
display:flex;
align-items:center;
gap:8px;
margin-bottom:24px;
}

.monitor-dot{
width:10px;
height:10px;
border-radius:50%;
background:#d7f8ff;
box-shadow:0 0 10px rgba(180,245,255,0.5);
}

.hero-monitor-label{
margin-left:auto;
font-size:14px;
font-weight:800;
letter-spacing:0.08em;
color:#92ecff;
text-transform:uppercase;
font-family:"Orbitron","Inter",sans-serif;
}

.monitor-line-group{
margin-bottom:20px;
}

.monitor-line-label{
font-size:15px;
color:#dbf7ff;
margin-bottom:4px;
font-family:"Orbitron","Inter",sans-serif;
}

.monitor-line-value{
font-size:18px;
font-weight:900;
color:#f7ffff;
margin-bottom:10px;
text-transform:uppercase;
font-family:"Orbitron","Inter",sans-serif;
}

.monitor-bar{
height:8px;
border-radius:999px;
background:rgba(255,255,255,0.08);
overflow:hidden;
box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03);
}

.monitor-bar-fill{
display:block;
height:100%;
border-radius:999px;
background:linear-gradient(90deg, #ff8add, #ff6bd6);
box-shadow:0 0 16px rgba(255,135,216,0.28);
}

.fill-1{width:100%;}
.fill-2{width:94%;}
.fill-3{width:14%;}
.fill-4{width:12%;}

.stats-grid{
display:grid;
grid-template-columns:repeat(3, minmax(180px,1fr));
gap:18px;
margin-bottom:20px;
}

.stat-card{
min-height:170px;
padding:22px;
border-radius:24px;
background:linear-gradient(180deg, rgba(50,110,190,0.34), rgba(16,28,48,0.92));
border:1px solid rgba(130,190,255,0.16);
box-shadow:0 16px 34px rgba(0,0,0,0.22);
display:flex;
flex-direction:column;
justify-content:space-between;
}

.stat-label{
font-size:16px;
font-weight:800;
color:#ecf8ff;
font-family:"Orbitron","Inter",sans-serif;
}

.stat-value{
font-size:72px;
line-height:0.95;
font-weight:900;
color:#ffffff;
font-family:"Orbitron","Inter",sans-serif;
text-shadow:0 2px 12px rgba(0,0,0,0.12);
}

.panel{
margin-top:18px;
padding:18px;
border-radius:24px;
background:linear-gradient(180deg, rgba(48,102,173,0.22), rgba(14,25,43,0.9));
border:1px solid rgba(130,190,255,0.15);
box-shadow:0 16px 30px rgba(0,0,0,0.18);
overflow:hidden;
}

.panel h3{
margin:0 0 16px;
font-size:20px;
font-weight:900;
font-family:"Orbitron","Inter",sans-serif;
color:#f3fbff;
}

table{
width:100%;
border-collapse:collapse;
table-layout:fixed;
}

thead tr{
background:rgba(255,255,255,0.04);
}

th,
td{
padding:12px 10px;
text-align:left;
border-bottom:1px solid rgba(255,255,255,0.06);
vertical-align:top;
word-break:break-word;
}

th{
font-size:12px;
font-weight:900;
letter-spacing:0.08em;
font-family:"Orbitron","Inter",sans-serif;
color:#d7f2ff;
text-transform:uppercase;
}

td{
font-size:14px;
color:#eef8ff;
line-height:1.5;
}

form{
display:grid;
gap:12px;
}

input,
textarea,
button{
font:inherit;
}

input,
textarea{
width:100%;
padding:13px 14px;
border:1px solid rgba(255,255,255,0.08);
border-radius:14px;
background:rgba(7,13,24,0.88);
color:var(--text);
outline:none;
box-shadow:none;
appearance:none;
-webkit-appearance:none;
}

input::placeholder,
textarea::placeholder{
color:rgba(234,246,255,0.45);
}

input:focus,
textarea:focus{
border-color:var(--line-strong);
box-shadow:0 0 0 3px rgba(114,184,255,0.12);
}

textarea{
min-height:120px;
resize:vertical;
}

button{
padding:12px 16px;
border:1px solid var(--line);
border-radius:14px;
background:linear-gradient(90deg, rgba(255,135,216,0.18), rgba(112,184,255,0.18));
color:var(--text);
font-weight:700;
cursor:pointer;
appearance:none;
-webkit-appearance:none;
}

button:hover{
border-color:var(--line-strong);
}

.button-row{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-top:10px;
}

.action-btn{
padding:10px 12px;
border-radius:12px;
border:1px solid var(--line);
background:rgba(255,255,255,0.04);
color:var(--text);
font-size:13px;
font-weight:700;
}

.action-btn.success{
border-color:rgba(111,237,190,0.28);
background:rgba(26,80,62,0.32);
}

.action-btn.danger{
border-color:rgba(255,110,160,0.28);
background:rgba(92,24,48,0.34);
}

.log-item{
padding:14px;
border:1px solid rgba(255,255,255,0.06);
border-radius:14px;
background:rgba(7,12,22,0.72);
margin-bottom:12px;
}

.log-item.danger{
border-color:rgba(255,110,160,0.3);
background:rgba(85,17,36,0.32);
}

.vault-shell{
padding-bottom:22px;
}

.vault-title{
margin-bottom:18px;
}

.vault-split{
display:grid;
grid-template-columns:1fr 1.15fr;
gap:18px;
margin-bottom:18px;
}

.vault-control-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 16px;
border-radius:16px;
background:rgba(8,18,35,0.62);
border:1px solid rgba(255,255,255,0.08);
font-size:14px;
margin-top:10px;
}

.vault-control-row strong{
color:#ffffff;
font-weight:800;
}

.vault-reveal-header{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
margin-bottom:14px;
}

.vault-trigger-card{
cursor:pointer;
}

.vault-trigger-text{
color:#dceeff;
margin-bottom:12px;
font-size:14px;
}

#vaultForm{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:12px;
align-items:start;
}

#vaultForm textarea{
grid-column:1 / -1;
}

#vaultForm button{
grid-column:1 / -1;
}

#notebookForm{
display:grid;
grid-template-columns:1fr;
gap:12px;
}

#notebookForm button{
justify-self:start;
}

#notebookFeed,
#launchpadGrid{
width:100%;
}

.launchpad-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
gap:16px;
margin-top:18px;
}

.launchpad-tile{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-height:160px;
padding:18px;
border-radius:22px;
border:1px solid rgba(120,180,255,0.2);
background:linear-gradient(180deg, rgba(36,77,128,0.35), rgba(10,19,35,0.86));
box-shadow:0 16px 30px rgba(0,0,0,0.22);
text-align:center;
transition:0.18s ease;
}

.launchpad-tile:hover{
transform:translateY(-3px);
border-color:rgba(120,180,255,0.38);
box-shadow:0 18px 35px rgba(0,0,0,0.28);
}

.launchpad-icon{
display:flex;
align-items:center;
justify-content:center;
width:58px;
height:58px;
border-radius:18px;
background:linear-gradient(180deg, rgba(130,233,255,0.22), rgba(255,135,216,0.16));
color:#8ce7ff;
font-size:22px;
margin-bottom:12px;
}

.launchpad-name{
font-size:15px;
font-weight:800;
color:#fff;
}

.is-hidden{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
pointer-events:none !important;
}

#vaultEntriesTable td,
#activeUsersTable td,
#userIpHistoryTable td,
#backroomUsersTable td{
min-height:44px;
}

@media (max-width:1280px){
.hero-panel-2col{
grid-template-columns:1fr;
}

.hero-stack-title span{
font-size:72px;
}

.hero-monitor-card{
min-height:auto;
}
}

@media (max-width:1100px){
.app-shell{
grid-template-columns:1fr;
}

.sidebar{
position:relative;
height:auto;
border-right:none;
border-bottom:1px solid var(--line);
}

.main-area{
height:auto;
padding:18px;
overflow-y:auto;
}

.stats-grid{
grid-template-columns:repeat(2, minmax(160px,1fr));
}

.vault-split{
grid-template-columns:1fr;
}
}

@media (max-width:760px){
.hero-panel-2col{
padding:24px;
}

.hero-stack-title span{
font-size:52px;
}

.stat-value{
font-size:56px;
}
}

@media (max-width:680px){
.stats-grid{
grid-template-columns:1fr;
}

.sidebar-link{
font-size:14px;
}

.main-area{
padding:14px;
}

#vaultForm{
grid-template-columns:1fr;
}

#vaultForm textarea,
#vaultForm button{
grid-column:auto;
}
}

@media (max-width:768px){

.hero-stack-title span{
font-size:42px !important;
line-height:0.9;
}

.hero-title{
font-size:26px !important;
}

.hero-subtitle{
font-size:14px !important;
}

.hero-text{
font-size:14px !important;
}

.hero-panel,
.hero-panel-2col{
padding:16px !important;
}

.sidebar-link{
padding:12px 14px !important;
}

.launchpad-grid{
grid-template-columns:1fr 1fr !important;
}

}