body{font-family:Inter,Arial,sans-serif;background:#eef3fb;margin:0;color:#1f2937}

/* App layout */
.app-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,#0f172a,#111827);color:#fff;padding:18px 14px;display:flex;flex-direction:column;gap:14px;position:sticky;top:0;height:100vh}
.brand{font-size:22px;font-weight:800;letter-spacing:.5px;color:#dbeafe;padding:8px 10px;border-bottom:1px solid #23314f}
.side-nav{display:flex;flex-direction:column;gap:6px;overflow:auto}
.side-nav a{color:#c7d2fe;text-decoration:none;padding:9px 10px;border-radius:10px;transition:.15s;background:transparent}
.side-nav a:hover{background:#1e293b;color:#fff}
.lang-switch a{color:#93c5fd;text-decoration:none}
.user-meta{font-size:12px;color:#475569}

.app-content{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:12px;justify-content:flex-end;padding:12px 16px;background:#ffffffd9;backdrop-filter:blur(6px);border-bottom:1px solid #dbe3f0;position:sticky;top:0;z-index:5}
.top-link{color:#2563eb;text-decoration:none;font-weight:600}
.topbar form{margin:0}

.app-main{max-width:1180px;width:calc(100% - 32px);margin:16px auto;background:#fff;padding:20px;border-radius:14px;box-shadow:0 8px 24px rgba(15,23,42,.08)}
.auth-main{max-width:1100px;margin:20px auto;background:#fff;padding:20px;border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,.08)}

h1{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.card{background:#eef2ff;padding:16px;border-radius:10px}
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid #e5e7eb;padding:8px;text-align:left}
input,select,textarea,button{padding:8px;border:1px solid #d1d5db;border-radius:8px}
form.inline{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.danger{background:#ef4444;color:#fff;border:0}
.primary{background:#2563eb;color:#fff;border:0}
.muted{color:#6b7280;font-size:12px}
pre{white-space:pre-wrap;background:#111827;color:#f9fafb;padding:10px;border-radius:8px}

.login-page{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:center}
.login-visual img{width:100%;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.login-box{padding:8px}
.login-form{display:grid;grid-template-columns:1fr;max-width:340px}

@media (max-width:1000px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{position:static;height:auto}
  .app-main{width:auto;margin:10px}
  .grid{grid-template-columns:1fr}
}
@media (max-width:900px){.login-page{grid-template-columns:1fr}.login-form{max-width:none}}