*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f6f3f7;color:#242124}
a{color:#4b0048;text-decoration:none}
.app{display:flex;min-height:100vh}
.sidebar{width:255px;background:#3d0039;color:#fff;padding:18px;position:fixed;left:0;top:0;bottom:0}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:25px}
.logo{width:42px;height:42px;border-radius:12px;background:#fff;color:#3d0039;display:flex;align-items:center;justify-content:center;font-weight:700}
.brand small{display:block;color:#d8c6d8}
.sidebar nav a{display:block;color:#fff;padding:12px 10px;border-radius:10px;margin:4px 0}
.sidebar nav a:hover{background:rgba(255,255,255,.12)}
.main{margin-left:255px;width:calc(100% - 255px);padding:20px}
.topbar{height:62px;background:#fff;border-radius:16px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 4px 18px rgba(61,0,57,.08);margin-bottom:20px}
.muted{color:#777;font-size:13px;margin-left:8px}
.userbox{font-size:14px}
.card{background:#fff;border-radius:16px;padding:18px;box-shadow:0 4px 18px rgba(61,0,57,.08);margin-bottom:18px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{background:#fff;border-radius:16px;padding:18px;box-shadow:0 4px 18px rgba(61,0,57,.08)}
.tile h3{margin:0;color:#3d0039;font-size:26px}
.tile p{margin:6px 0 0;color:#777}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
label{display:block;font-weight:600;margin-bottom:6px}
input,select,textarea{width:100%;padding:11px;border:1px solid #ddd;border-radius:10px;font-size:14px}
textarea{min-height:90px}
.btn{background:#3d0039;color:#fff;border:0;border-radius:10px;padding:11px 16px;cursor:pointer;display:inline-block}
.btn.secondary{background:#6d566b}
.table{width:100%;border-collapse:collapse;background:#fff}
.table th,.table td{border-bottom:1px solid #eee;padding:10px;text-align:left}
.table th{background:#faf7fa;color:#3d0039}
.alert{padding:12px 14px;border-radius:10px;margin-bottom:14px}
.alert-success{background:#e8f7ee;color:#176b36}
.alert-error{background:#fdebea;color:#9b1c1c}
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#3d0039,#7c3375)}
.login-box{width:390px;background:#fff;border-radius:20px;padding:28px;box-shadow:0 8px 30px rgba(0,0,0,.2)}
.login-box h1{margin-top:0;color:#3d0039}
@media(max-width:900px){
  .sidebar{position:relative;width:100%;bottom:auto}
  .app{display:block}
  .main{margin-left:0;width:100%}
  .grid,.form-grid{grid-template-columns:1fr}
}