* { box-sizing: border-box; font-family: Arial, sans-serif; }
body { margin: 0; background: #eef4f8; color: #18202a; }
a { text-decoration: none; color: inherit; }
.layout { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
aside { background: #14213d; color: white; padding: 22px; }
aside h2 { color: #fca311; margin-top: 0; }
.menu a { display: block; padding: 13px; margin: 10px 0; background: #243657; border-radius: 12px; color: white; font-weight: bold; }
.menu a:hover { background: #fca311; color: #14213d; }
main { padding: 25px; }
.card { background: white; border-radius: 18px; padding: 20px; box-shadow: 0 8px 20px rgba(0,0,0,.08); margin-bottom: 18px; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.stat { text-align: center; }
.num { font-size: 34px; color: #1f7a8c; font-weight: bold; }
input, textarea, select { width: 100%; padding: 12px; border: 1px solid #ccd5df; border-radius: 12px; margin: 7px 0 12px; font-size: 15px; }
textarea { min-height: 90px; font-family: Consolas, monospace; }
button, .btn { display: inline-block; padding: 12px 16px; border: 0; border-radius: 12px; font-weight: bold; cursor: pointer; margin: 4px; }
.primary { background: #fca311; color: #14213d; }
.secondary { background: #1f7a8c; color: white; }
.danger { background: #e63946; color: white; }
.light { background: #eaf6f8; color: #14213d; }
table { width: 100%; border-collapse: collapse; background: white; }
th, td { border: 1px solid #e1e8ef; padding: 11px; text-align: center; }
th { background: #14213d; color: white; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.editor { min-height: 230px; background: #101828; color: #d7e7ff; border: 0; border-radius: 14px; padding: 16px; font-size: 15px; direction: ltr; text-align: left; }
pre { background: #101828; color: #eaf6f8; border-radius: 14px; padding: 16px; overflow: auto; min-height: 80px; }
.option { display: block; padding: 11px; background: #fbfdff; border: 1px solid #dbe3eb; border-radius: 11px; margin: 8px 0; cursor: pointer; }
.success { color: #16803c; font-weight: bold; }
.fail { color: #d62828; font-weight: bold; }
.progress-wrap { background: #dce8ef; height: 14px; border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; background: #1f7a8c; }
@media(max-width:900px){ .layout,.cards,.grid-2,.grid-3{ grid-template-columns:1fr; } }