*{box-sizing:border-box}body{font-family:system-ui,Segoe UI,Tahoma,Arial;line-height:1.5;margin:0;background:#f6f7fb;color:#222}a{color:#0a6}
.container{max-width:1100px;margin:70px auto 60px;padding:0 12px}
.topbar{position:fixed;top:0;left:0;right:0;height:56px;background:#111;color:#fff;display:flex;align-items:center;gap:10px;padding:0 12px;z-index:10}
.topbar .brand{font-weight:700}
.topbar .nav{display:flex;gap:8px;flex-wrap:wrap}
.topbar .nav a{color:#fff;text-decoration:none;padding:6px 8px;border-radius:8px}
.topbar .nav a:hover,.btn{background:#09c;color:#fff}
.userbox{margin-right:auto}
.card{background:#fff;border-radius:14px;box-shadow:0 6px 16px rgba(0,0,0,0.06);padding:14px;margin:12px 0}
.grid{display:grid;gap:12px}.grid-2{grid-template-columns:1fr 1fr}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}}
label{display:block;margin:.3rem 0 .2rem}.form-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
input,select,button{padding:9px;border:1px solid #ddd;border-radius:10px;font:inherit}
button{cursor:pointer}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:8px;border-bottom:1px solid #eee;text-align:right}
.alert{background:#fee;border:1px solid #fbb;color:#700;padding:8px;border-radius:10px;margin:8px 0}
.alert.success{background:#eefbf1;border-color:#bfecc8;color:#065}
.small{font-size:.9rem;color:#666}
.footer{position:fixed;bottom:0;left:0;right:0;background:#f2f3f7;padding:8px 12px;border-top:1px solid #e5e6eb}
.menu-toggle{display:none}@media(max-width:900px){.menu-toggle{display:inline-flex}.nav{display:none}.nav-open .nav{display:flex;position:fixed;top:56px;left:0;right:0;background:#222;padding:10px}.nav a{padding:10px}.nav a:hover{background:#09c}}

.card--full {
  grid-column: 1 / -1 !important; /* span all columns in .grid grid-2 */
  width: 100%;
}