:root{
  --bg: radial-gradient(1000px 600px at 30% 20%, #e8f0ff 0%, #f4f6f8 55%, #f4f6f8 100%);
  --primary1:#2c3e50;
  --primary2:#4b6cb7;
  --card:#ffffff;
  --border:#eef1f6;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --shadow2:0 2px 10px rgba(0,0,0,.06);
  --text:#111;
  --muted:#667085;
  --danger:#ff4757;
  --warnbg:#fff3cd;
  --warnbd:#ffeeba;
  --warntx:#856404;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Tahoma, Arial;
  background:var(--bg);
  color:var(--text);
}

/* Layout */
.sidebar{
  position:fixed; right:0; top:0;
  width:240px; height:100vh;
  padding:16px;
  background:linear-gradient(135deg,var(--primary1),var(--primary2));
  color:#fff;
  box-shadow:var(--shadow);
}
.brand{display:flex;align-items:center;gap:10px;padding:10px 8px 14px;border-bottom:1px solid rgba(255,255,255,.15);margin-bottom:10px}
.logo{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.18);
  font-weight:bold;
}
.brand h3{margin:0;font-size:16px}
.brand small{display:block;color:rgba(255,255,255,.85);margin-top:2px}

.sidebar a{
  display:flex; align-items:center; justify-content:space-between;
  color:#fff; text-decoration:none;
  padding:10px 10px;
  border-radius:14px;
  margin:6px 0;
  background:rgba(255,255,255,.08);
  transition:.15s;
}
.sidebar a:hover{background:rgba(255,255,255,.16)}
.sidebar a.active{background:rgba(255,255,255,.22)}
.sidebar a.logout{background:rgba(255,71,87,.18); color:#ffe6ea}

.content{
  margin-right:260px;
  padding:20px;
  display:flex;
  justify-content:center;
}
.container{width:100%; max-width:920px}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow2);
  padding:16px;
  margin-bottom:12px;
}
.center{text-align:center; line-height:1.9}
.title{margin:0;font-size:18px}
.sub{color:var(--muted);font-size:13px;margin-top:6px;line-height:1.8}

/* Buttons/Inputs */
input,select,textarea{
  width:100%;
  padding:12px 12px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  outline:none;
  background:#fbfcff;
  font-size:14px;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--primary2);
  box-shadow:0 0 0 4px rgba(75,108,183,.12);
  background:#fff;
}
.btn{
  width:100%;
  margin-top:12px;
  padding:12px 12px;
  border:0;
  border-radius:14px;
  cursor:pointer;
  font-weight:bold;
  color:#fff;
  background:linear-gradient(135deg,var(--primary1),var(--primary2));
  box-shadow:0 10px 18px rgba(75,108,183,.18);
}
.btn:hover{filter:brightness(1.03)}

/* Note */
.note{
  background:var(--warnbg);
  border:1px solid var(--warnbd);
  padding:12px;
  border-radius:14px;
  text-align:center;
  font-weight:bold;
  color:var(--warntx);
  line-height:1.8;
}

/* Tables */
table{width:100%;border-collapse:collapse;margin-top:10px;background:#fff}
th,td{border:1px solid #eaeaea;padding:10px;text-align:right;vertical-align:top}
th{background:#f6f7fb}
.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  background:#eee;
  font-size:12px;
}
.ok{color:green}
.bad{color:#b42318}