/* ══ VIEW: SETTLE ══ */
#view-settle { background: var(--blue-ice); }
.settle-tab-bar { background: var(--blue-deep); display: flex; overflow-x: auto; flex-shrink: 0; scrollbar-width: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
.settle-tab-bar::-webkit-scrollbar { display: none; }
.settle-tab { flex-shrink: 0; padding: 10px 14px; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,0.35); cursor: pointer; border-bottom: 3px solid transparent; transition: color 0.15s, border-color 0.15s; white-space: nowrap; }
.settle-tab:hover { color: rgba(255,255,255,0.65); }
.settle-tab.active { color: var(--blue-pale); border-bottom-color: var(--blue-pale); }
.settle-pane { display: none; flex: 1; overflow-y: auto; padding: 16px; flex-direction: column; gap: 12px; }
.settle-pane.active { display: flex; }
/* Landing state: hide tabs+panes, show landing */
#view-settle.settle-on-landing #settle-landing { display: flex; }
#view-settle.settle-on-landing .settle-tab-bar,
#view-settle.settle-on-landing .settle-pane { display: none !important; }
/* Content state: hide landing, show tabs+panes */
#view-settle:not(.settle-on-landing) #settle-landing { display: none; }

/* ── SETTLE LANDING ── */
#settle-landing { display: flex; flex-direction: column; flex: 1; overflow-y: auto; }
#settle-landing.hidden { display: none; }
.settle-landing-hero {
  background: linear-gradient(160deg, var(--blue-deep), var(--blue-mid));
  padding: 24px 20px 20px; flex-shrink: 0;
}
.settle-landing-hero h2 { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.02em; margin-bottom: 4px; }
.settle-landing-hero p { font-size: 13px; color: rgba(255,255,255,0.55); font-weight: 500; line-height: 1.4; }
.settle-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
.settle-cat-card {
  background: #fff; border-radius: var(--r-md);
  box-shadow: var(--shadow-sm); border: 1px solid rgba(0,60,120,0.06);
  padding: 16px 14px; display: flex; flex-direction: column; gap: 8px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, box-shadow 0.15s;
}
.settle-cat-card:active { transform: scale(0.97); }
.settle-cat-icon { font-size: 28px; line-height: 1; }
.settle-cat-name { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.2; }
.settle-cat-sub { font-size: 11px; color: var(--text-light); font-weight: 500; line-height: 1.4; }
.settle-cat-arrow { font-size: 14px; color: var(--blue-main); font-weight: 700; margin-top: auto; }
.step-card { background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; border: 1px solid rgba(0,60,120,0.06); flex-shrink: 0; }
.step-head { padding: 13px 14px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(0,60,120,0.06); }
.step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--blue-main); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step-title { font-size: 13px; font-weight: 700; color: var(--text); flex: 1; }
.badge-easy { background: #E8F5E9; color: #2E7D32; font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 20px; }
.badge-medium { background: #FFF8E1; color: #F57F17; font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 20px; }
.badge-hard { background: #FFEBEE; color: #C62828; font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 20px; }
.step-body { padding: 12px 14px; font-size: 12px; color: var(--text-mid); line-height: 1.65; font-weight: 500; }
.step-body ul { padding-left: 16px; margin-top: 6px; }
.step-body li { margin-bottom: 4px; }
.step-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 11px; font-weight: 700; color: var(--blue-main); text-decoration: none; background: var(--blue-ice); padding: 5px 10px; border-radius: 20px; border: 1px solid var(--blue-wash); }
.tip-block { background: #FFF8E1; border-left: 3px solid #F4A261; border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 10px 12px; font-size: 11.5px; color: #5D4037; line-height: 1.6; font-weight: 500; font-style: italic; }