/* App layout: แถบบนพร้อมแท็บ (เดสก์ท็อป) / แถบล่าง 3 ปุ่ม (มือถือ ≤ 700px) */
.app-top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s5);
  padding-top: calc(var(--s3) + env(safe-area-inset-top, 0px));
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { font-family: var(--f-display); font-weight: 700; font-size: 17px; display: flex; gap: 8px; align-items: center; color: var(--fg); text-decoration: none; }
.brand .mk { width: 22px; height: 22px; border-radius: 6px; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; font-family: var(--f-num); font-size: 12px; }
.top-right { display: flex; align-items: center; gap: var(--s2); }

.app-tabs { display: flex; gap: 2px; }
.app-tabs a, .app-bottom a { text-decoration: none; }
.app-tabs a { font-size: 14px; color: var(--muted); padding: 8px 14px; border-radius: var(--r-sm); display: flex; gap: 6px; align-items: center; }
.app-tabs a:hover { background: var(--sunk); color: var(--fg); }
.app-tabs a[aria-current="page"] { color: var(--ink); background: var(--ink-soft); font-weight: 600; }
.app-tabs svg { width: 16px; height: 16px; }

.app-bottom { display: none; }

.app-main { max-width: 1240px; margin-inline: auto; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.view { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.view-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; }
.view-head h3 { font-size: 22px; }
.view-head .actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.plan-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--s5); align-items: start; }
.plan-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); position: sticky; top: 76px; }
.plan-out { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }

.box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.box-head { display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.chart-box svg { width: 100%; height: auto; display: block; }
.chart-box svg text { font-family: var(--f-num); font-size: 11px; fill: var(--faint); }
.chart-box svg text.tgt { fill: var(--c-target); font-weight: 600; }
.chart-box svg text.end { fill: var(--fg); font-weight: 600; }

.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--s4); align-items: start; }
.app-list { display: flex; flex-direction: column; gap: var(--s2); }
.app-item { display: flex; gap: var(--s2); align-items: center; padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.app-item:last-child { border-bottom: 0; }
.app-item .nm { flex: 1; display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.app-item .inp { flex: 1; }

.loading { display: grid; place-items: center; min-height: 50vh; color: var(--muted); }

.disclaimer { font-size: 12.5px; color: var(--faint); text-align: center; padding-block: var(--s4); }

@media (max-width: 900px) {
  .plan-layout { grid-template-columns: minmax(0, 1fr); }
  .plan-form { position: static; }
}

@media (max-width: 700px) {
  .app-top { padding-inline: var(--s4); }
  .app-tabs { display: none; }
  .app-bottom {
    display: grid; grid-template-columns: repeat(3, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    border-top: 1px solid var(--line); background: var(--surface);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .app-bottom a { font-size: 11.5px; color: var(--muted); padding: 8px 4px 10px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
  .app-bottom a[aria-current="page"] { color: var(--ink); font-weight: 600; }
  .app-bottom svg { width: 20px; height: 20px; }
  .app-main { padding: var(--s4); padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .wide-only { display: none !important; }
  .cards-list { display: flex; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi .v { font-size: 18px; }
  .toasts { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .stamp.top-stamp { display: none; }
}
.app-item .swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }
#portKpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.disclaimer { margin-inline: auto; }
@media (max-width: 700px) { #portKpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.type-item { flex-wrap: wrap; }
.type-item .inp:first-of-type { flex: 1 1 140px; }
.type-item .inp-sm { flex: 0 0 auto; }
.type-item .inp-sm select { padding-inline: 8px; font-size: 13px; }
@media (min-width: 1100px) { .settings-grid .span2 { grid-column: span 2; } }