:root { font-family: Tahoma, Arial, sans-serif; background: #101c2d; color: #f4f6fa; }
* { box-sizing: border-box; }
body { margin: 0; }
.shell { min-height: 100vh; display: grid; place-items: start center; padding: 32px 16px; }
.panel { width: min(100%, 880px); background: #1b2b40; padding: 32px; border-radius: 18px; border: 1px solid #44546a; }
.topbar,.section-heading,.search-row,.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { color: #e1c482; font-weight: bold; font-size: 24px; }
.brand span { font-size: 11px; }
h1 { font-size: 23px; margin-bottom: 12px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
.subtitle,.breadcrumbs { color: #bac7d6; }
.breadcrumbs { margin: 12px 0 20px; font-size: 13px; }
form { display: grid; gap: 12px; margin-top: 20px; }
label { font-size: 14px; }
input { width: 100%; min-width: 0; padding: 12px; border-radius: 8px; border: 1px solid #73849b; background: #111e30; color: white; font: inherit; }
button { padding: 12px; border-radius: 8px; border: 0; background: #e1c482; color: #172337; font: inherit; font-weight: bold; cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.secondary { background: transparent; color: #e1c482; border: 1px solid #e1c482; }
button.compact { width: auto; }
.menu-grid,.item-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 14px; }
.menu-card { text-align: right; padding: 24px; font-size: 18px; }
.menu-card small { display: block; font-size: 13px; font-weight: normal; margin-top: 10px; }
.world-card { border: 1px solid #44546a; background: #132239; border-radius: 12px; padding: 16px; overflow-wrap: anywhere; }
.world-card p { color: #d2dce8; line-height: 1.8; }
.world-card button { width: 100%; }
.search-row input { flex: 1; }
.pagination { margin-top: 18px; justify-content: center; }
.back-bar { margin-top: 26px; border-top: 1px solid #44546a; padding-top: 18px; }
.message { min-height: 22px; color: #ffd39b; }
#logout { margin-top: 20px; }
[hidden] { display: none !important; }
@media (max-width: 480px) { .panel { padding: 20px; } h1 { font-size: 19px; } .topbar { align-items: flex-start; flex-direction: column; } }