:root{
  --brand:#0e7490;          /* teal-700 vibe to match modern palette */
  --brand-2:#0ea5b7;        /* lighter accent */
  --bg:#ffffff;             /* dark header bg */
  --text:#0f172a;           /* slate-900 */
  --muted:#64748b;          /* slate-500 */
  --panel:#ffffff;
  --border:#e5e7eb;
  --radius:14px;
  --shadow:0 10px 30px rgba(2,8,23,.12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text); background:#f3f6fb;
}

/* Header */
.mw-header{background:var(--bg); color:#e2e8f0; position:sticky; top:0; z-index:50}
.mw-header-inner{
  max-width:1120px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:16px; justify-content:space-between;
}
.mw-brand{display:flex; align-items:center; gap:10px}
.mw-logo {
  height: 48px;
  width: auto;
  display: block;
}

@media (max-width: 640px) {
  .mw-logo {
    height: 36px; /* slightly smaller on mobile */
  }
}

.mw-brand-text{font-weight:800; letter-spacing:.06em; display:none}
@media (min-width:640px){ .mw-brand-text{display:inline-block} }

.mw-nav{display:none; gap:18px; align-items:center}
@media (min-width:900px){ .mw-nav{display:flex} }
.mw-nav-link{
  color:#cbd5e1; text-decoration:none; font-weight:600; font-size:14px;
}
.mw-nav-link:hover{color:#fff}

.mw-actions{display:flex; gap:10px; align-items:center}
.mw-btn{
  padding:10px 14px; border-radius:999px; text-decoration:none; font-weight:700; font-size:14px;
  border:1px solid rgba(255,255,255,.25);
}
.mw-btn.ghost{color:#e2e8f0}
.mw-btn.ghost:hover{background:rgba(255,255,255,.08)}
.mw-btn.solid{background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff; border:none}
.mw-btn.solid:hover{filter:brightness(1.05)}

/* Main area */
.mw-main{max-width:920px; margin:28px auto; padding:0 20px}
.mw-card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px;
}
h1{margin:0 0 6px 0; font-size:28px}
.mw-subt{margin:0 0 18px 0; color:var(--muted)}

.searchbox{ position:relative; }
.input{
  width:100%; padding:14px 16px; border:1px solid #d0d7de; border-radius:12px; outline:none;
  background:#fff; transition:border .15s, box-shadow .15s; font-size:15px;
}
.input:focus{ border-color:var(--brand-2); box-shadow:0 0 0 4px rgba(14,165,183,.2); }

.dropdown{
  position:absolute; top:calc(100% + 8px); left:0; right:0;
  background:#fff; border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); max-height:380px; overflow-y:auto; z-index:30;
}

.item{ padding:12px; cursor:pointer; display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
.item .name{ font-weight:700; }
.item .meta{ font-size:12px; color:#64748b; }
.item:hover, .item[aria-selected="true"]{ background:#f1f5f9; }

.empty, .hint, .error, .loading{ padding:12px 0; color:#64748b; font-size:14px; }
.loading{ font-style:italic; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Footer */
.mw-footer{ color:#64748b; font-size:13px; text-align:center; padding:14px 0; }