:root{
  --fg:#e8e1d6;
  --muted:#b9b0a3;
  --panel:rgba(20,18,16,.84);
  --panel2:rgba(28,25,22,.78);
  --line:rgba(255,255,255,.08);
  --accent:#d2a24c;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  color:var(--fg);
  background:#0b0a09;
}
.bg{
  position:fixed; inset:0;
  background:url("../background.jpg") center/cover no-repeat fixed;
  filter:saturate(.9) contrast(1.15) brightness(.5);
  z-index:-2;
}
.bg:after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.2), rgba(0,0,0,.75));
}
.top{position:sticky; top:0; z-index:10; backdrop-filter: blur(6px);}
.banner{border-bottom:1px solid var(--line); background:rgba(0,0,0,.72);}
.banner img{display:block; width:100%; height:clamp(200px, 16vw, 280px); object-fit:cover; object-position:center; background:rgba(0,0,0,.75);}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
  background:linear-gradient(180deg, rgba(15,13,12,.92), rgba(10,9,8,.72));
  border-bottom:1px solid var(--line);
}
.nav-left{display:flex; gap:12px; flex-wrap:wrap}
.nav-item{
  color:var(--fg); text-decoration:none;
  padding:8px 12px; border-radius:10px;
  border:1px solid transparent;
}
.nav-item:hover{border-color:var(--line); background:rgba(255,255,255,.04)}
.lang select{
  background:rgba(0,0,0,.35);
  border:1px solid var(--line);
  color:var(--fg);
  padding:8px 10px;
  border-radius:10px;
}
.wrap{max-width:960px; margin:18px auto; padding:0 16px 40px;}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.h1{font-size:32px; margin:0 0 8px}
.p{color:var(--muted); margin:0 0 14px; line-height:1.5}
.grid{display:grid; grid-template-columns:1.2fr .8fr; gap:14px}
@media(max-width:980px){.grid{grid-template-columns:1fr}}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
label{font-size:13px; color:var(--muted)}
input[type=text], textarea, select{
  width:100%;
  background:rgba(0,0,0,.35);
  border:1px solid var(--line);
  color:var(--fg);
  padding:10px 12px;
  border-radius:12px;
  outline:none;
}
textarea{min-height:120px; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}
.btn{
  background:linear-gradient(180deg, rgba(210,162,76,.95), rgba(170,122,42,.92));
  border:1px solid rgba(255,255,255,.08);
  color:#1b140a;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
}
.btn.secondary{
  background:rgba(255,255,255,.06);
  color:var(--fg);
}
.btn:disabled{opacity:.6; cursor:not-allowed}
.table{width:100%; border-collapse:collapse; overflow:hidden; border-radius:14px; border:1px solid var(--line); background:var(--panel2)}
.table th,.table td{padding:10px; border-bottom:1px solid var(--line); vertical-align:top}
.table th{color:var(--muted); font-weight:600; text-align:left; font-size:13px; background:rgba(0,0,0,.25)}
.badge{display:inline-block; font-size:12px; padding:3px 8px; border:1px solid var(--line); border-radius:999px; color:var(--muted)}
.kit{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
@media(max-width:720px){.kit{grid-template-columns:1fr}}
.item{
  background:linear-gradient(180deg, rgba(35,30,26,.85), rgba(18,16,14,.85));
  border:1px solid rgba(210,162,76,.22);
  border-radius:16px;
  padding:12px;
  position:relative;
  overflow:hidden;
}
.item:before{
  content:"";
  position:absolute; inset:-40px -40px auto auto;
  width:120px; height:120px;
  background:radial-gradient(circle, rgba(210,162,76,.22), transparent 60%);
}
.item h3{margin:0 0 6px; font-size:16px}
.item p{margin:0; color:var(--muted); font-size:13px; line-height:1.4}
.codebar{display:flex; gap:6px; flex-wrap:wrap}
.codebar button{
  background:rgba(0,0,0,.35);
  border:1px solid var(--line);
  color:var(--fg);
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}
.footer{
  text-align:center;
  padding:16px;
  color:rgba(255,255,255,.6);
  border-top:1px solid var(--line);
  background:rgba(0,0,0,.4);
}
.small{font-size:12px; color:var(--muted)}

/* Map rotation drag & drop */
.map-list{ list-style:none; padding:0; margin:10px 0 0; display:flex; flex-direction:column; gap:8px; }
.map-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.10); }
.map-item.dragging{ opacity:.6; }
.map-handle{ cursor:grab; user-select:none; font-size:14px; padding:2px 6px; border-radius:8px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); }
.map-name{ flex:1; }
.map-actions{ display:flex; gap:8px; }
.map-actions button{ padding:6px 10px; border-radius:10px; }

/* --- Rotation planner (campaign/maps) --- */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 980px){.grid2{grid-template-columns:1fr}}
.ww2-card{padding:12px; border-radius:14px; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.10); box-shadow: 0 12px 30px rgba(0,0,0,.25); position:relative; overflow:hidden}
.ww2-card:before{content:""; position:absolute; inset:-40px; background:radial-gradient(circle at 15% 20%, rgba(255,180,60,.18), transparent 45%), radial-gradient(circle at 85% 70%, rgba(70,160,255,.10), transparent 50%); pointer-events:none}
.plan-list{list-style:none; padding:0; margin:10px 0 0; display:flex; flex-direction:column; gap:8px}
.plan-item{display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:12px; background:rgba(0,0,0,.32); border:1px solid rgba(255,255,255,.12)}
.plan-item.dragging{opacity:.6}
.plan-handle{cursor:grab; user-select:none; opacity:.8}
.plan-actions{margin-left:auto; display:flex; gap:6px}
.plan-sublist{list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:8px}
.campaign-block{border-radius:14px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.12); padding:10px}
.campaign-block.active{outline:2px solid rgba(255,200,80,.35)}
.campaign-head{cursor:pointer; padding:8px 10px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10)}
.campaign-body{padding:10px 6px 6px}

/* --- Modal --- */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; z-index:9999; padding:18px}
.modal-inner{width:min(980px, 96vw); background:rgba(20,20,22,.95); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:16px; box-shadow:0 30px 80px rgba(0,0,0,.55)}
.lib-row{display:block; padding:10px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.25); margin-bottom:8px}
.lib-row input{margin-right:8px}

/* --- MOTD 1:1 preview (approx) --- */
.motd-screen{border-radius:14px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12); padding:10px}
.motd-title{font-size:12px; opacity:.8; margin-bottom:6px}
.motd-body{min-height:40px; line-height:1.25}
.box{max-width:960px; margin:0 auto; padding:0 16px;}

/* Boxed header like parazit.ro */
.banner{border-bottom:0; background:transparent;}
.banner .box{padding:0;}
.banner .box-inner{
  border:1px solid var(--line);
  background:rgba(0,0,0,.72);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.55);
}
.nav{background:transparent; border-bottom:0; padding:0; margin:10px 0 16px;}
.nav .box-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  background:linear-gradient(180deg, rgba(15,13,12,.92), rgba(10,9,8,.72));
  border:1px solid var(--line);
  border-radius:12px;
}
.nav-left{display:flex; gap:0; flex-wrap:wrap;}
.nav-item{padding:9px 12px; border-radius:0; border-right:1px solid var(--line); font-size:13px;}
.nav-item:last-child{border-right:0;}
@media (max-width:720px){
  .nav-item{padding:10px 10px;}
}