:root{ --navy:#14224A; --beige:#F6F1E3; --navy-deep:#0d1633; }

html,body{height:100%}
body{
  margin:0; font-family:'Space Grotesk',Arial,sans-serif;
  background-color:var(--navy); color:var(--beige);
  display:flex; flex-direction:column; min-height:100vh;
}
header{padding:20px;text-align:center;font-size:2rem;font-weight:bold;letter-spacing:-2px}
main{flex:1;padding:20px;text-align:center}
footer{text-align:center;padding:10px;font-size:.8rem;background-color:var(--navy-deep)}

.button{display:inline-block;padding:12px 20px;margin-top:20px;border:2px solid var(--beige);color:var(--beige);text-decoration:none;font-weight:800;border-radius:8px}
.button:hover{background-color:var(--beige);color:var(--navy)}

/* Panel / Tabs / Listen */
.filter-panel{display:none;margin:12px auto 0;max-width:680px;background:#fff;color:#1b233d;border:1px solid #e6e6ea;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.1)}
.filter-panel.open{display:block}
.filter-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #efeff2}
.filter-close{border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:#6b7280}

.panel-tabs{display:flex;gap:8px;padding:8px 16px;border-bottom:1px solid #efeff2;flex-wrap:wrap}
.panel-tab{border:1.5px solid #d8dbe1;background:#fafafa;color:#1c243d;padding:8px 12px;border-radius:999px;font-weight:700;cursor:pointer;font-size:14px}
.panel-tab.active{background:var(--navy);color:var(--beige);border-color:var(--navy)}

.filter-search{padding:12px 16px}
.filter-search input{width:100%;padding:12px 14px;border:1.5px solid #d8dbe1;border-radius:8px}

/* Listen */
.tab-panel{display:none}
.tab-panel.active{display:block}
.filter-list{max-height:48vh;overflow:auto;padding:6px 16px 10px}
.filter-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #f3f4f6}
.filter-item:last-child{border-bottom:0}
.filter-item input{width:18px;height:18px}
.filter-item span{flex:1}
.filter-item em{font-style:normal;color:#9aa0ab;font-size:13px}

.filter-actions{display:flex;gap:10px;justify-content:flex-end;padding:12px 16px;border-top:1px solid #efeff2;background:#fafafa}
.btn{padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer}
.btn.primary{background:var(--navy);color:#fff;border:0}
.btn.ghost{background:transparent;color:var(--navy);border:1.5px solid #ccd1db}