*{box-sizing:border-box}
:root{
  --ink:#1e1a17;
  --bg:#0c1014;
  --wood1:#6b4b2a;
  --wood2:#4a331c;
  --panel:#141c24;
  --panel2:#0f172a;
  --edge:#1f2937;
  --gold:#d1a35a;
  --leaf:#86a86d;
  --fur:#b7926a;
  --paper:#efe7da;
}
body{
  margin:0;
  font-family:"Trebuchet MS", "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(1200px 500px at 50% -100px, rgba(255,255,255,0.08), transparent 65%),
    linear-gradient(180deg, #0b0f14 0%, #0c1014 100%);
  color:#f1ede6;
  font-size:18px;
}
.scene{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  display:none;
}
.desk-edge{
  position:absolute;
  left:0; right:0; bottom:0;
  height:120px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 30%),
    repeating-linear-gradient(90deg, var(--wood1), var(--wood1) 20px, var(--wood2) 20px, var(--wood2) 40px);
  border-top:2px solid #2a1d11;
  box-shadow:0 -12px 30px rgba(0,0,0,0.4);
}
.board{
  display:none;
  position:absolute;
  top:90px;
  width:190px;
  height:260px;
  background:linear-gradient(180deg,#1b2836,#111927);
  border:2px solid #2b3a4c;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
.board::after{
  content:"";
  position:absolute; inset:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.10);
  border-radius:12px;
}
.board-left{left:20px; transform:rotate(-2deg);}
.board-right{right:20px; transform:rotate(2deg);}
.cabinet{
  display:none;
  position:absolute;
  bottom:140px;
  width:160px;
  height:220px;
  background:linear-gradient(180deg,#1b242d,#121820);
  border:1px solid #2b3745;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
}
.cabinet::before,.cabinet::after{
  content:"";
  position:absolute; left:16px; right:16px;
  height:44px;
  border:1px solid #2b3745;
  border-radius:10px;
  background:linear-gradient(180deg,#0f141b,#0b1016);
}
.cabinet::before{top:24px;}
.cabinet::after{top:92px;}
.cab-left{left:18px;}
.cab-right{right:18px;}

.topbar{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px 14px 10px;
  border-bottom:1px solid rgba(209,163,90,0.18);
  background:
    linear-gradient(180deg, rgba(18,24,32,0.95), rgba(15,23,42,0.92)),
    radial-gradient(600px 120px at 20% -30px, rgba(134,168,109,0.25), transparent 70%);
  backdrop-filter:blur(6px);
}
.brand{
  font-weight:800;
  font-size:24px;
  display:flex;
  gap:10px;
  align-items:center;
  letter-spacing:0.3px;
}
.mark{
  display:inline-flex;
  width:34px; height:34px;
  align-items:center; justify-content:center;
  background:linear-gradient(180deg,#2c3a28,#182018);
  border:1px solid #33413a;
  border-radius:10px;
  box-shadow:0 6px 12px rgba(0,0,0,0.25);
}
.topnav{display:flex;flex-wrap:wrap;gap:10px}
.navbtn{
  padding:12px 16px;
  border:1px solid #3a2e20;
  background:linear-gradient(180deg,#2b1e14,#1a120b);
  color:#f5e9d6;
  border-radius:12px;
  cursor:pointer;
  font-size:16px;
  box-shadow:0 4px 10px rgba(0,0,0,0.25);
}
.navbtn.active{
  background:linear-gradient(180deg,#8a6b3a,#6d4f24);
  border-color:#8a6b3a;
}
.wrap{padding:16px;max-width:1100px;margin:0 auto;position:relative;z-index:1}
.view{display:block}
.hidden{display:none}
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid #2a2f3a;
  border-radius:16px;
  padding:14px;
  box-shadow:0 8px 26px rgba(0,0,0,.25);
}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.syncrow{margin-top:6px}
.list{display:grid;gap:10px}
input,select,textarea,button{
  font-size:16px;
  padding:12px;
  border-radius:12px;
  border:1px solid #3a2e20;
  background:linear-gradient(180deg,#131b24,#0f1620);
  color:#f5e9d6;
}
button{cursor:pointer}
.primary{background:linear-gradient(180deg,#2f7d4a,#1f5a34);border-color:#2f7d4a}
.small{font-size:14px;color:#cfc4b3}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kpis div{
  background:linear-gradient(180deg,#151d26,#111827);
  border:1px solid #2a2f3a;
  border-radius:14px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.kpis span{font-size:28px;font-weight:800;color:#f0d7a4}
.link{text-decoration:none;color:inherit;text-align:center;font-weight:700}
.dlg form{display:grid;gap:8px;padding:10px}
@media (min-width:900px){
  .topbar{flex-direction:row;justify-content:space-between;align-items:center}
  .syncrow{margin-top:0}
}