* { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --bg: #101418;
    --bg2: #141b23;
    --card: #1a2129;
    --border: #2a3540;
    --border2: #3a4a58;
    --text: #e8eef4;
    --muted: #8b98a5;
    --accent: #7fd1a0;   /* gold */
    --accent2: #ffb86c;  /* thb */
    --up: #7fd1a0;
    --down: #ff7b72;
    --warn: #f0c674;
  }
  body {
    font-family: 'Segoe UI', 'Sarabun', 'Noto Sans Thai', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    padding: 20px 16px 40px;
    background-image:
      radial-gradient(1200px 500px at 80% -10%, rgba(255,184,108,.07), transparent 60%),
      radial-gradient(900px 400px at -10% 110%, rgba(127,209,160,.06), transparent 60%);
  }
  .wrap { max-width: 980px; margin: 0 auto; }

  /* ---------- header ---------- */
  header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
  .logo {
    width: 44px; height: 44px; border-radius: 12px; flex: none;
    background: linear-gradient(135deg, #f5c06e, #b8860b);
    display: grid; place-items: center; font-size: 22px;
    box-shadow: 0 4px 14px rgba(184,134,11,.35);
  }
  header h1 { font-size: 20px; font-weight: 700; line-height: 1.2; }
  header .sub { color: var(--muted); font-size: 12.5px; }
  .live {
    margin-left: auto; display: flex; align-items: center; gap: 8px;
    background: rgba(127,209,160,.1); border: 1px solid rgba(127,209,160,.3);
    color: var(--accent); font-size: 12.5px; font-weight: 600;
    padding: 7px 14px; border-radius: 30px;
  }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
  .dot.off { background: var(--muted); animation: none; }
  @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(127,209,160,.5);} 50% { box-shadow: 0 0 0 6px rgba(127,209,160,0);} }

  /* ---------- hero ---------- */
  .hero {
    background: linear-gradient(160deg, #1c2530, #141b23);
    border: 1px solid var(--border2); border-radius: 16px;
    padding: 22px 24px; margin-bottom: 16px; position: relative; overflow: hidden;
  }
  .hero::after {
    content: "🥇"; position: absolute; right: -14px; top: -26px; font-size: 120px;
    opacity: .06; transform: rotate(-12deg);
  }
  .hero .label { color: var(--muted); font-size: 13px; margin-bottom: 2px; display:flex; align-items:center; gap:8px; }
  .hero .big {
    font-size: clamp(34px, 6vw, 52px); font-weight: 800; letter-spacing: .5px;
    font-variant-numeric: tabular-nums; line-height: 1.1;
  }
  .hero .big small { font-size: .42em; color: var(--muted); font-weight: 600; margin-left: 8px; }
  .hero .meta { margin-top: 10px; display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; }
  .hero .meta b { color: var(--text); font-variant-numeric: tabular-nums; }

  .badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 20px;
  }
  .badge.up   { background: rgba(127,209,160,.12); color: var(--up); }
  .badge.down { background: rgba(255,123,114,.12); color: var(--down); }
  .badge.flat { background: rgba(139,152,165,.15); color: var(--muted); }

  /* ---------- cards ---------- */
  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 16px; }
  .card {
    background: var(--card); border: 1px solid var(--border); border-radius: 14px;
    padding: 16px 18px; position: relative;
  }
  .card .t { color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
  .card .v { font-size: 23px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .3px; }
  .card .v small { font-size: .6em; color: var(--muted); font-weight: 600; margin-left: 4px; }
  .card .d { margin-top: 7px; font-size: 12px; color: var(--muted); }
  .card .d b { font-variant-numeric: tabular-nums; }
  .card.note { border-style: dashed; }
  .tag { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: .3px; }
  .tag.gold { background: rgba(255,184,108,.15); color: var(--accent2); }

  /* ---------- chart ---------- */
  .panel {
    background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px;
  }
  .panel-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
  .panel-head h2 { font-size: 15px; }
  .panel-head .hint { color: var(--muted); font-size: 12px; }
  .ind-row { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; flex-wrap: wrap; }
  .seg-label { font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .4px; }
  .icon-btn {
    background: var(--bg2); border: 1px solid var(--border2); color: var(--muted);
    border-radius: 10px; width: 34px; height: 34px; font-size: 15px; cursor: pointer; flex: none;
  }
  .icon-btn:hover, .icon-btn.active { border-color: var(--accent); color: var(--accent); }
  .ind-settings {
    background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
    padding: 14px 16px; margin-bottom: 10px;
  }
  .ind-settings[hidden] { display: none; }
  .set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
  .set-group { display: flex; flex-direction: column; gap: 8px; }
  .set-title { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
  .set-group label {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 12px; color: var(--muted);
  }
  .set-group input {
    width: 72px; background: var(--card); border: 1px solid var(--border2); color: var(--text);
    border-radius: 8px; padding: 6px 8px; font-size: 13px; font-family: inherit; font-variant-numeric: tabular-nums;
  }
  .set-group input:focus { outline: none; border-color: var(--accent); }
  .set-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

  /* ---- จำลองพอร์ตลงทุน ---- */
  .sim-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
  .sim-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
  .sim-form input, .sim-form select {
    background: var(--card); border: 1px solid var(--border2); color: var(--text);
    border-radius: 8px; padding: 8px 10px; font-size: 13.5px; font-family: inherit;
    font-variant-numeric: tabular-nums; width: 100%;
  }
  .sim-form select { cursor: pointer; }
  .sim-form input:focus, .sim-form select:focus { outline: none; border-color: var(--accent); }
  .sim-form .slider-label { grid-column: 1 / -1; align-items: center; }
  .sim-form .slider-label b { color: var(--accent); font-variant-numeric: tabular-nums; }
  .sim-form input[type="range"] { padding: 0; accent-color: var(--accent); cursor: pointer; }
  .sim-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 14px; }
  .sim-results .card .v { font-size: 21px; }
  .sim-goal { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
  .sim-goal-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
  .sim-goal-head b { color: var(--text); font-variant-numeric: tabular-nums; }
  #simGoalStatus { color: var(--accent); font-weight: 700; }
  #simGoalStatus.no { color: var(--down); }
  .progress { height: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
  .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #7fd1a0, #4fae7f); border-radius: 6px; transition: width .4s ease; }
  .sim-alloc { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
  .alloc-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
  .alloc-head .seg { margin-left: 0; }
  .comp-toggle { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; margin-left: auto; }
  .comp-toggle input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
  .alloc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 8px; margin-bottom: 10px; }
  .asset-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--card); border: 1px solid var(--border2); border-radius: 10px; padding: 7px 10px;
    transition: border-color .2s ease;
  }
  .asset-row:hover { border-color: var(--border); }
  .asset-name {
    flex: 1 1 64px; min-width: 56px;
    background: transparent; border: 1px solid transparent; color: var(--text);
    border-radius: 8px; padding: 5px 7px; font-size: 14px; font-weight: 700; font-family: inherit;
  }
  .asset-name:hover, .asset-name:focus { background: var(--bg2); border-color: var(--border2); outline: none; }
  .asset-meta {
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    font-size: 10.5px; color: var(--muted);
    background: var(--bg2); border: 1px solid var(--border2); border-radius: 8px; padding: 3px 7px;
  }
  .asset-meta em { font-style: normal; }
  .asset-meta input {
    width: 46px; background: transparent; border: none; color: var(--text);
    padding: 2px 0; font-size: 12.5px; font-weight: 700; font-family: inherit; font-variant-numeric: tabular-nums;
  }
  .asset-meta input:focus { outline: none; }
  .asset-meta span { color: var(--muted); }
  .asset-pct { flex: 1 1 56px; min-width: 56px; accent-color: var(--accent); cursor: pointer; }
  .alloc-num, .asset-pct-num { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
  .alloc-num input[type="number"], .asset-pct-num input[type="number"] {
    width: 54px; background: var(--bg2); border: 1px solid var(--border2); color: var(--accent);
    border-radius: 8px; padding: 4px 6px; font-size: 13px; font-weight: 700; font-family: inherit; font-variant-numeric: tabular-nums;
  }
  .alloc-num input[type="number"]:focus, .asset-pct-num input[type="number"]:focus { outline: none; border-color: var(--accent); }
  .alloc-num i, .asset-pct-num i { font-style: normal; font-size: 12px; color: var(--accent); font-weight: 700; }
  .asset-del {
    background: transparent; border: 1px solid var(--border2); color: var(--muted);
    border-radius: 8px; width: 26px; height: 26px; cursor: pointer; font-size: 12px; flex: none; line-height: 1;
  }
  .asset-del:hover:not(:disabled) { border-color: var(--down); color: var(--down); }
  .asset-del:disabled { opacity: .35; cursor: not-allowed; }
  @media (max-width: 720px) { .alloc-row { grid-template-columns: 1fr; } }
  .alloc-add { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
  .etf-lib { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; padding: 8px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; }
  .etf-lib-title { font-size: 12px; color: var(--muted); font-weight: 700; }
  .etf-chips { display: flex; gap: 6px; flex-wrap: wrap; }
  .etf-chip {
    background: var(--card); border: 1px solid var(--border2); color: var(--text);
    border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer; font-family: inherit;
  }
  .etf-chip:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
  .etf-chip:disabled { opacity: .45; cursor: default; border-color: var(--accent); color: var(--accent); }
  .contrib-custom { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
  .contrib-custom[hidden] { display: none; }
  .contrib-custom label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
  .contrib-custom textarea {
    background: var(--card); border: 1px solid var(--border2); color: var(--text);
    border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; font-variant-numeric: tabular-nums; resize: vertical;
  }
  .contrib-custom textarea:focus { outline: none; border-color: var(--accent); }
  .goal-need { margin-top: 10px; font-size: 13px; color: var(--accent); font-weight: 700; line-height: 1.5; }
  .goal-need .muted { color: var(--muted); font-weight: 400; }
  .alloc-rate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
  .alloc-rate label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); }
  .alloc-rate input {
    width: 84px; background: var(--card); border: 1px solid var(--border2); color: var(--accent);
    border-radius: 8px; padding: 6px 8px; font-size: 14px; font-weight: 700; font-family: inherit; font-variant-numeric: tabular-nums;
  }
  .alloc-rate input:focus { outline: none; border-color: var(--accent); }
  .sim-gpf { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
  .gpf-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
  .gpf-top label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); }
  .gpf-top input {
    width: 140px; background: var(--card); border: 1px solid var(--border2); color: var(--accent);
    border-radius: 8px; padding: 6px 8px; font-size: 14px; font-weight: 700; font-family: inherit; font-variant-numeric: tabular-nums;
  }
  .gpf-top input:focus { outline: none; border-color: var(--accent); }
  .gpf-summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
  .gpf-summary b { color: var(--accent); font-variant-numeric: tabular-nums; font-size: 15px; }
  .gpf-stack { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--card); border: 1px solid var(--border); margin-bottom: 10px; }
  .gpf-stack span { height: 100%; transition: flex .3s ease; }
  .gpf-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
  .gpf-table { border: 1px solid var(--border); border-radius: 10px; }
  .gpf-table .sim-table td:first-child { text-align: left; }
  .gpf-bars { margin-top: 4px; }
  .gpf-bars-title { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
  .gpf-bars-inner { display: flex; align-items: flex-end; gap: 2px; height: 120px; }
  .gpf-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 3px; }
  .gpf-bar-stack { display: flex; flex-direction: column; width: 100%; border-radius: 3px 3px 0 0; overflow: hidden; background: var(--card); transition: height .3s ease; }
  .gpf-bar-stack span { width: 100%; }
  .gpf-bar-val { font-size: 9.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; }
  .gpf-bar-label { font-size: 9.5px; color: var(--muted); margin-top: 1px; }
  .goal-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; font-size: 12.5px; }
  .goal-line .goal-name { color: var(--muted); min-width: 88px; }
  .goal-status { color: var(--accent); font-weight: 700; }
  .goal-status.no { color: var(--down); }
  .sim-table-head { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
  .sim-table-head h3 { font-size: 14px; }
  .sim-table-wrap { border: 1px solid var(--border); border-radius: 10px; margin-top: 10px; }
  .sim-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
  .sim-table th, .sim-table td { padding: 7px 12px; text-align: right; white-space: nowrap; }
  .sim-table th {
    position: sticky; top: 0; background: var(--bg2); color: var(--muted); font-size: 11.5px;
    border-bottom: 1px solid var(--border); z-index: 1;
  }
  .sim-table th:first-child, .sim-table td:first-child { text-align: left; color: var(--muted); }
  .sim-table tbody tr:nth-child(odd) { background: rgba(138,152,165,.04); }
  .sim-table tbody tr.goal-row { background: rgba(127,209,160,.09); }
  .sim-table td { color: var(--text); }
  .div-panel { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
  .div-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
  .div-head h3 { font-size: 14px; }
  .div-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
  .div-grid .card { padding: 12px 14px; }
  .div-grid .card .v { font-size: 17px; }
  .div-grid .card .d { font-size: 11px; }
  .div-retire { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
  .retire-years { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); }
  .retire-years input {
    width: 70px; background: var(--card); border: 1px solid var(--border2); color: var(--accent);
    border-radius: 8px; padding: 5px 8px; font-size: 13px; font-weight: 700; font-family: inherit; font-variant-numeric: tabular-nums;
  }
  .retire-years input:focus { outline: none; border-color: var(--accent); }
  .div-retire-grid { margin-top: 6px; }
  .div-retire-grid[hidden] { display: none; }
  .retire-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 10px; }
  .retire-cards .card { padding: 12px 14px; }
  .retire-cards .card .v { font-size: 17px; }
  .retire-cards .card .d { font-size: 11px; }
  .retire-table { border: 1px solid var(--border); border-radius: 10px; }
  .retire-table .sim-table td:first-child { text-align: left; }
  .retire-note { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.6; }
  .gold-summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
  .gold-summary b { color: var(--accent); font-variant-numeric: tabular-nums; font-size: 15px; }
  .gold-summary .gup { color: var(--up); }
  .gold-summary .gdown { color: var(--down); }
  .seg { display: inline-flex; gap: 4px; margin-left: auto; }
  .seg button {
    background: transparent; border: 1px solid var(--border2); color: var(--muted);
    border-radius: 8px; padding: 6px 14px; font-size: 12.5px; cursor: pointer; font-family: inherit;
  }
  .seg button.active { background: rgba(127,209,160,.14); border-color: var(--accent); color: var(--accent); font-weight: 700; }
  .seg button:disabled { opacity: .45; cursor: default; }
  .chart-asset {
    background: var(--card); border: 1px solid var(--border2); color: var(--text);
    border-radius: 8px; padding: 5px 8px; font-size: 12.5px; font-family: inherit; cursor: pointer;
  }
  .chart-asset:focus { outline: none; border-color: var(--accent); }
  .sim-chart-head { display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; }
  .chart-box { position: relative; height: 300px; }
  canvas { width: 100%; height: 100%; display: block; }
  .chart-empty {
    position: absolute; inset: 0; display: grid; place-items: center;
    color: var(--muted); font-size: 13px; text-align: center; line-height: 1.8;
  }
  .chart-legend { display: flex; gap: 16px; color: var(--muted); font-size: 12px; margin-top: 8px; flex-wrap: wrap; }
  .chart-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
  .hist-summary {
    display: flex; gap: 16px; flex-wrap: wrap;
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: 10px; padding: 10px 14px; margin-bottom: 10px;
    font-size: 12.5px; color: var(--muted);
  }
  .hist-summary b { color: var(--text); font-variant-numeric: tabular-nums; }
  .hist-summary .hchg { font-weight: 700; }
  .hist-summary .hchg.up { color: var(--up); }
  .hist-summary .hchg.down { color: var(--down); }
  .hist-summary .hchg.flat { color: var(--muted); }

  /* ---------- status / footer ---------- */
  .statusbar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 16px; color: var(--muted); font-size: 12.5px;
  }
  .refresh-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--bg2); border: 1px solid var(--border2); color: var(--text);
    border-radius: 10px; padding: 8px 16px; font-size: 13px; cursor: pointer; font-family: inherit;
  }
  .refresh-btn:hover { border-color: var(--accent); color: var(--accent); }
  .refresh-btn:disabled { opacity: .5; cursor: wait; }
  .count { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 700; }
  .banner {
    display: none; margin-top: 14px; background: rgba(240,198,116,.1);
    border: 1px solid rgba(240,198,116,.35); color: var(--warn);
    border-radius: 12px; padding: 10px 14px; font-size: 13px; line-height: 1.6;
  }
  .banner.show { display: block; }
  footer { margin-top: 22px; color: var(--muted); font-size: 11.5px; line-height: 1.8; }
  footer a { color: var(--accent); text-decoration: none; }
  .skeleton {
    background: linear-gradient(90deg, #1a2129 25%, #222c37 50%, #1a2129 75%);
    background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 6px; height: 26px; width: 60%;
  }
  @keyframes sk { to { background-position: -200% 0; } }

  @media (max-width: 560px) {
    .hero { padding: 18px; }
    .grid { grid-template-columns: 1fr 1fr; }
    .card .v { font-size: 19px; }
    .chart-box { height: 240px; }
  }


/* Gport customer/PWA additions */
.task-nav { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px; }
.task-nav button { flex:1 1 150px; min-height:44px; background:var(--bg2); border:1px solid var(--border2); color:var(--text); border-radius:10px; font:inherit; font-size:13px; cursor:pointer; }
.task-nav button:hover, .task-nav button:focus-visible { border-color:var(--accent); color:var(--accent); outline:none; }
.plan-tools { margin-top:16px; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px 16px; }
.plan-tools > div:first-child { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.save-status { color:var(--accent); font-size:12px; }
.save-status.error { color:var(--down); }
.plan-tool-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.plan-tool-actions .danger { border-color:rgba(255,123,114,.4); }
.plan-tool-actions .danger:hover { color:var(--down); border-color:var(--down); }
.device-note { margin-top:10px; color:var(--muted); font-size:11.5px; line-height:1.6; }
.print-summary { display:none; }
@media (max-width:560px) {
  .grid { grid-template-columns:1fr; }
  .plan-tool-actions .refresh-btn { flex:1 1 calc(50% - 8px); min-height:44px; }
  .statusbar { align-items:flex-start; }
}
@media print {
  body { background:#fff !important; color:#111 !important; padding:0; }
  body > .wrap > * { display:none !important; }
  body > .wrap > .print-summary { display:block !important; color:#111; padding:20px; }
  .print-summary h1, .print-summary h2 { margin:0 0 10px; color:#111; }
  .print-summary h2 { margin-top:18px; font-size:16px; }
  .print-summary p { margin:6px 0; line-height:1.55; }
}

.install-help { margin-top:10px; border-top:1px solid var(--border); padding-top:9px; color:var(--muted); font-size:12px; }
.install-help summary { color:var(--text); cursor:pointer; font-weight:700; min-height:32px; display:flex; align-items:center; }
.install-help p { margin:7px 0 0; line-height:1.6; }