:root{
  --app-bg:#f6f7f9;
  --bar-bg:#ededf0;
  --accent:#2ea6ff;
  --text:#1f2328;
  --muted:#6a6f76;
  --shadow:0 1px 2px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:linear-gradient(#fff,#fafafa 40%, #f4f4f4 100%);
}

/* Top app bar */
.app-bar{
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  background:#fff;
  border-bottom:1px solid #ddd;
  box-shadow:var(--shadow);
  position:sticky;
  top:0;
  z-index:5;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:600}
.brand .title{font-size:20px}
.icon-btn{
  background:transparent;border:0;cursor:pointer;font-size:20px;padding:8px;border-radius:8px;
}
.icon-btn:hover{background:#f0f2f4}
.actions{display:flex;gap:4px}

/* Tabs */
.tab-bar{
  display:flex;gap:12px;align-items:flex-end;
  padding:8px 12px 0 12px;background:#fff;border-bottom:1px solid #ddd;position:sticky;top:56px;z-index:4
}
.tab{
  appearance:none;border:0;background:transparent;cursor:pointer;padding:10px 14px;border-radius:10px 10px 0 0;
  display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:700;letter-spacing:.4px
}
.tab.active{color:var(--text);background:linear-gradient(#fff,#f7f7f7);border:1px solid #ddd;border-bottom-color:#fff}
.tab .tab-icon{font-size:20px}

main{padding:0 0 32px 0}
.tab-panel{display:none;padding:12px}
.tab-panel.active{display:block}

/* Lists */
.list-toolbar{display:flex;gap:8px;margin:8px 4px}
.list-toolbar input{flex:1;min-height:40px;padding:8px 10px;border:1px solid #cfd3d7;border-radius:8px;font-size:14px}
.primary{background:var(--accent);color:#fff;border:0;padding:10px 14px;border-radius:8px;cursor:pointer;font-weight:600}
.primary:hover{filter:brightness(0.95)}

.selectable-list{list-style:none;margin:12px 4px;padding:0;border-radius:10px;overflow:hidden;border:1px solid #e2e4e8}
.selectable-list li{display:flex;align-items:center;justify-content:space-between;padding:18px 14px;font-size:18px;background:#fff;border-top:1px solid #eee}
.selectable-list li:first-child{border-top:0}
.selectable-list .right{display:flex;align-items:center;gap:8px}
/* Selected state (iOS-safe) */
.selectable-list li.selected{background:#007aff !important;color:#fff !important;-webkit-text-fill-color:#fff !important}
.selectable-list li.selected *{color:#fff !important;-webkit-text-fill-color:#fff !important}
.radio{width:22px;height:22px;border:2px solid #9aa1a8;border-radius:50%;display:inline-grid;place-items:center}
.radio.checked{border-color:var(--accent)}
.radio.checked::after{content:"";width:12px;height:12px;background:var(--accent);border-radius:50%}
.list-btn{background:transparent;border:0;cursor:pointer;font-size:18px;padding:6px;border-radius:6px;color:#a23}
.list-btn:hover{background:#fff0f3}

/* Setup form */
.setup-form{max-width:720px;margin:8px auto;background:#fff;border:1px solid #e2e4e8;border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.form-row{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.form-row label{font-weight:600;color:#4a5056}
.form-row input[type="text"],
.form-row input[type="url"],
.form-row input[type="password"],
.form-row select,
.form-row input[type="number"]{min-height:42px;padding:10px;border:1px solid #cfd3d7;border-radius:8px;font-size:15px;background:#fff}
.switch-row{flex-direction:row;align-items:center;justify-content:space-between}
.inline-info{color:#555;padding:6px 2px;border-top:1px dashed #e5e7ea;border-bottom:1px dashed #e5e7ea}
.form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.form-actions.right{justify-content:flex-end}

/* Footer spacer to mimic mobile navbar space */
.nav-spacer{height:24px}

/* Responsive tweaks */
@media (max-width:560px){
  .selectable-list li{font-size:16px;padding:16px 12px}
  .brand .title{font-size:18px}
}