/* assets/style.css */
:root{
  --card: rgba(8, 18, 40, 0.62);
  --card2: rgba(8, 18, 40, 0.38);
  --text:#e9f3ff;
  --border: rgba(120, 210, 255, 0.18);
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 900px at 50% 45%, rgba(30,107,255,0.18), rgba(2,7,19,1) 60%);
  overflow:hidden;
}
#portal{position:fixed; inset:0; width:100%; height:100%; display:block;}
.overlay{position:fixed; inset:0; background: radial-gradient(900px 700px at 50% 45%, rgba(0,214,255,0.10), rgba(0,0,0,0) 55%); pointer-events:none;}
.wrap{position:relative; height:100%; display:grid; place-items:center; padding:24px;}
.brand{position:absolute; top:50%; left:50%; transform:translate(-50%,-140%); text-align:center; pointer-events:none; user-select:none;}
.brand h1{margin:0; font-size:clamp(42px,6vw,82px); letter-spacing:0.04em; font-weight:800; color: rgba(200, 226, 245, 0.78); text-shadow:0 0 8px rgba(74,214,255,0.18), 0 0 22px rgba(30,107,255,0.14);}
.brand .sub{margin-top:10px; font-size:14px; color:rgba(169,198,232,0.88); letter-spacing:0.06em;}
.panel{width:min(980px,96vw); border:1px solid var(--border); background:linear-gradient(180deg,var(--card),var(--card2)); backdrop-filter:blur(10px); box-shadow:var(--shadow); border-radius:22px; overflow:hidden;}
.panelHeader{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 18px 14px; border-bottom:1px solid rgba(120,210,255,0.10);}
.panelHeader .left{display:flex; flex-direction:column; gap:4px;}
.panelHeader .title{font-weight:700;}
.panelHeader .hint{font-size:12px; color:rgba(169,198,232,0.9);}
.panelHeader .right{display:flex; gap:10px; align-items:center;}
.content{padding:16px 18px 18px;}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
.btn{border:1px solid rgba(74,214,255,0.22); background:rgba(6,18,44,0.55); color:var(--text); padding:10px 12px; border-radius:12px; cursor:pointer; text-decoration:none; font-size:14px;}
input,select{padding:12px 12px; border-radius:12px; border:1px solid rgba(120,210,255,0.18); background:rgba(2,7,19,0.55); color:var(--text); outline:none;}
input[type="text"]{width:min(420px,100%);}
.error{color:rgba(255,180,180,0.95); font-size:13px;}
.warn{color:rgba(255,232,180,0.95); font-size:13px;}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-top:12px;}
.card{border:1px solid rgba(120,210,255,0.14); background:rgba(2,7,19,0.36); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:8px; min-height:108px;}
.cardTop{display:flex; justify-content:space-between; align-items:flex-start; gap:8px;}
.name{font-weight:650;}
.badges{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end;}
.badge{font-size:11px; padding:5px 8px; border-radius:999px; border:1px solid rgba(74,214,255,0.25); background:rgba(30,107,255,0.10);}
.badgeAdmin{border-color:rgba(255,180,180,0.30); background:rgba(255,120,120,0.10);}
.note{font-size:12px; color:rgba(169,198,232,0.90); line-height:1.35;}
.link{margin-top:auto; display:flex; gap:10px; flex-wrap:wrap;}
.small{font-size:12px; padding:8px 10px;}
.dim{color:rgba(169,198,232,0.65);}
.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size:12px; padding:2px 6px; border:1px solid rgba(120,210,255,0.18); border-radius:8px; background:rgba(2,7,19,0.45);}
.footer{margin-top:10px; font-size:12px; color:rgba(169,198,232,0.78); display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; border-top:1px solid rgba(120,210,255,0.10); padding-top:12px;}

/* Login block in top-right */
.loginCorner{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 5;
  border: 1px solid rgba(120,210,255,0.18);
  background: rgba(2, 7, 19, 0.42);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 12px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  max-width: min(92vw, 760px);
}
.loginCorner input[type="text"],
.loginCorner input[type="password"]{
  width: 170px;
}
@media (max-width: 520px){
  .loginCorner{
    left: 18px;
    right: 18px;
  }
  .loginCorner input[type="text"],
  .loginCorner input[type="password"]{
    width: min(100%, 220px);
  }
}


/* Admin UI helpers */
.ok{ color: rgba(190, 255, 210, 0.95); font-size: 13px; margin-bottom: 10px; }
.subpanel{
  border: 1px solid rgba(120,210,255,0.12);
  background: rgba(2, 7, 19, 0.22);
  border-radius: 16px;
  padding: 12px;
}
.subtitle{ font-weight: 650; margin-bottom: 10px; }
.tableWrap{ overflow:auto; border-radius: 14px; border: 1px solid rgba(120,210,255,0.10); }
.table{
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
}
.table th, .table td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(120,210,255,0.10);
  text-align: left;
  vertical-align: top;
  font-size: 12px;
}
.table th{ color: rgba(233,243,255,0.85); font-weight: 650; }
.table td .btn{ margin-left: 0; }


body.staticBg{
  background: #020713;
  overflow: auto;
}
body.staticBg #portal,
body.staticBg .overlay{
  display: none !important;
}