/* v16.38 Plans & speeds + FUP (mockups plans-fup). Logical properties only, so Arabic mirrors without overrides. */
.pl17 { --pl17-c0: var(--color-brand); --pl17-c1: #c77a12; --pl17-c2: #c2410c; --pl17-c3: #9f1239; display: flex; flex-direction: column; gap: 14px; min-inline-size: 0; }
.pl17 [hidden] { display: none !important; }
.pl17-ltr { unicode-bidi: isolate; }
.pl17-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl17-head h2 { margin: 0; font-size: 22px; }
.pl17-head .sub { color: var(--color-text-muted); font-size: 13px; }
.pl17-head .sp, .pl17-bar .sp, .pl17-apply .sp, .ft .sp { flex: 1; }
.pl17-tabs { padding-inline: 0; margin: 0; }
.pl17-ban { align-items: center; }
.pl17-ban .fn-banner__body { flex: 1; }
.pl17-card { border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); min-inline-size: 0; overflow: hidden; }
.pl17-pad { padding: 12px 14px; margin: 0; }
.pl17-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; }
#pl17 .pl17-bar select, #pl17 .pl17-bar input:not([type=checkbox]):not([type=radio]) { min-block-size: 36px; block-size: 36px; inline-size: auto; max-inline-size: 220px; padding-block: 0; font-size: 14px; }
.pl17-search { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border-control); border-radius: 10px; padding-inline: 10px; background: var(--color-surface); }
#pl17 .pl17-search input { border: 0 !important; box-shadow: none !important; outline: 0; inline-size: 190px; padding-inline: 0; }
.pl17-search:focus-within { outline: var(--focus-outline, 2px solid var(--color-focus)); }
.pl17-tog { display: inline-flex; align-items: center; gap: 6px; min-block-size: 36px; padding-inline: 10px; border: 1px solid var(--color-border-control); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 14px; cursor: pointer; }
.pl17-tog.on { border-color: var(--color-warn-fg); background: var(--color-warn-bg); color: var(--color-warn-on); font-weight: 600; }
.pl17-views label { gap: 6px; font-size: 14px; }

/* table */
.pl17-tw { overflow-x: auto; }
.pl17-t { inline-size: 100%; border-collapse: collapse; font-size: 14px; }
.pl17-t th { text-align: start; font-size: 12.5px; font-weight: 600; color: var(--color-text-secondary); padding: 10px 12px; border-block-end: 1px solid var(--color-border); background: var(--color-surface-sunken); white-space: nowrap; }
.pl17-t td { padding: 10px 12px; border-block-end: 1px solid var(--color-border); vertical-align: middle; }
.pl17-t .n { text-align: end; font-variant-numeric: tabular-nums; }
.pl17-t tr.warn > td { background: color-mix(in srgb, var(--color-warn-bg) 70%, transparent); }
.pl17-t tr.bad > td { background: color-mix(in srgb, var(--color-bad-bg) 75%, transparent); }
.pl17-t tr.off > td { opacity: .6; }
.pl17-t tbody tr:hover > td { background: var(--color-surface-hover); }
.pl17-name { font-weight: 700; color: var(--color-brand-text); text-decoration: none; }
.pl17-name:hover { text-decoration: underline; }
.pl17-speed { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--color-brand-soft, var(--color-blue-50)); color: var(--color-brand-text); font-weight: 700; font-size: 13px; white-space: nowrap; }
.pl17-prof { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; background: var(--color-surface-sunken); font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; white-space: nowrap; }
.pl17-prof.ok { color: var(--color-ok-fg); }
.pl17-prof.bad { background: var(--color-bad-bg); color: var(--color-bad-fg); }
.pl17-m { color: var(--color-text-muted); }
.pl17-m.warn, .pl17-wtxt { color: var(--color-warn-fg); }
.pl17-m.bad, .pl17-btxt { color: var(--color-bad-fg); }
.pl17-ok { color: var(--color-ok-fg); }
.pl17-wtxt .fn-icon, .pl17-btxt .fn-icon { inline-size: 14px; block-size: 14px; vertical-align: -2px; }
.pl17-ubar { position: relative; block-size: 5px; border-radius: 99px; background: var(--color-surface-sunken); margin-block-start: 5px; inline-size: 110px; overflow: hidden; }
.pl17-ubar i { position: absolute; inset-block: 0; inset-inline-start: 0; background: color-mix(in srgb, var(--color-ok-fg) 35%, transparent); border-radius: 99px; }
.pl17-ubar i.o { background: var(--color-ok-fg); }
.pl17-fup { display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.45; }
.pl17-fup b { font-size: 13px; }
.pl17-rule { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 6px; background: var(--color-surface-sunken); font-size: 12.5px; font-weight: 600; line-height: 1.3; max-inline-size: 170px; }
.pl17-rule.up { background: var(--color-cyan-50, #ecfeff); color: var(--color-cyan-800, #155e75); }
.pl17-rule.min { background: var(--color-violet-bg); color: var(--color-violet-fg); }
.pl17-rule.bad { background: var(--color-bad-bg); color: var(--color-bad-fg); }
.pl17-tier { display: inline-flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--color-text-muted); }
.pl17-tier .bars { display: inline-flex; align-items: flex-end; gap: 2px; block-size: 18px; }
.pl17-tier .bars i { inline-size: 5px; border-radius: 2px; background: var(--color-border-strong, #cbd5e1); }
.pl17-tier .bars i.on { background: var(--color-brand); }
.pl17-acts { display: flex; gap: 2px; justify-content: flex-end; }
.pl17-legend { padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pl17-mlist { display: none; }

/* cards */
.pl17-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 14px; }
.pl17-pc { border: 1px solid var(--color-border); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--color-surface); }
.pl17-pc.warn { border-color: var(--color-warn-fg); }
.pl17-pc.bad { border-color: var(--color-bad-fg); }
.pl17-pc .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pl17-pc .top b { font-size: 16px; }
.pl17-pc .sp b { font-size: 30px; line-height: 1; }
.pl17-pc .pr { font-size: 22px; font-weight: 800; }
.pl17-pc .pr small { font-size: 13px; font-weight: 500; color: var(--color-text-muted); }
.pl17-pc ul { margin: 0; padding-inline-start: 18px; font-size: 13px; }
.pl17-pc .ft { display: flex; align-items: center; gap: 8px; margin-block-start: auto; }
.pl17-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pl17-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--color-surface-sunken); }
.pl17-chip .fn-icon { inline-size: 13px; block-size: 13px; }
.pl17-chip.n { background: var(--color-warn-bg); color: var(--color-warn-on); }
.pl17-chip.a { background: var(--color-ok-bg); color: var(--color-ok-on, var(--color-ok-fg)); }
.pl17-chip.s { background: var(--color-bad-bg); color: var(--color-bad-fg); }
.pl17-chip.b { background: var(--color-brand-soft, var(--color-blue-50)); color: var(--color-brand-text); }
.pl17-chip button { all: unset; cursor: pointer; padding-inline: 2px; }
.pl17-cmpbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 12px 14px; }
.pl17-pick { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--color-border-control); border-radius: 999px; font-size: 13px; cursor: pointer; }
.pl17-pick.on { border-color: var(--color-brand); background: var(--color-brand-soft, var(--color-blue-50)); color: var(--color-brand-text); }
.pl17-pick input { margin: 0; }
.pl17-cmp th[scope=row] { background: var(--color-surface-sunken); white-space: nowrap; }
.pl17-cmp td { text-align: center; }
.pl17-yes { color: var(--color-ok-fg); font-weight: 600; }

/* editor */
.pl17-ed { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.pl17-edf { display: flex; flex-direction: column; gap: 12px; min-inline-size: 0; }
.pl17-edh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl17-edh h2 { margin: 0; font-size: 19px; }
.pl17-sec { border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.pl17-sec h3 { margin: 0 0 4px; font-size: 16px; display: flex; align-items: center; gap: 6px; }
.pl17-sec h3 .n { display: inline-grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--color-surface-sunken); font-size: 12px; }
.pl17-sec p { margin: 0; }
.pl17-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
.pl17-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pl17-g4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; align-items: start; }
.pl17-span2 { grid-column: span 2; }
.pl17-adv summary { cursor: pointer; font-weight: 600; font-size: 14px; padding-block: 4px; }
.pl17-say { padding: 10px 12px; border-radius: 10px; background: var(--color-info-bg, var(--color-blue-50)); font-size: 14px; display: flex; gap: 6px; align-items: flex-start; }
.pl17-fupmini { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.pl17-fupmini svg { inline-size: 360px; max-inline-size: 100%; }
.pl17-fupmini > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pl17-side { position: sticky; inset-block-start: 12px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); padding: 14px; }
.pl17-ccard { border-radius: 14px; padding: 16px; color: #fff; background: linear-gradient(135deg, #1d4fbf, #2563eb 60%, #3b82f6); }
.pl17-ccard .nm { font-size: 19px; font-weight: 700; }
.pl17-ccard .spd { opacity: .9; font-size: 14px; }
.pl17-ccard .pr { font-size: 26px; font-weight: 800; margin-block-start: 6px; }
.pl17-ccard .pr small { font-size: 13px; font-weight: 500; }
.pl17-ccard .ln { font-size: 12.5px; opacity: .9; margin-block-start: 4px; }
.pl17-sum dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 0; font-size: 13.5px; }
.pl17-sum dt { color: var(--color-text-muted); }
.pl17-sum dd { margin: 0; text-align: end; }
.pl17-iss { margin-block-start: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.pl17-iss.bad { background: var(--color-bad-bg); color: var(--color-bad-fg); }
.pl17-iss.warn { background: var(--color-warn-bg); color: var(--color-warn-on); }
.pl17-iss.ok { background: var(--color-ok-bg); color: var(--color-ok-fg); }
.pl17-iss .fn-icon { inline-size: 14px; block-size: 14px; vertical-align: -2px; }
.pl17-sbtn { display: flex; gap: 8px; justify-content: flex-end; }
.pl17-sbtn .fn-btn--primary { flex: 1; }

/* FUP */
.pl17-fupw { display: grid; grid-template-columns: 230px minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.pl17-pols { display: flex; flex-direction: column; gap: 8px; }
.pl17-pols .h { display: flex; flex-direction: column; }
.pl17-pol { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); color: var(--color-text); text-decoration: none; font-size: 13px; }
.pl17-pol:hover { border-color: var(--color-brand); }
.pl17-pol.on { border: 2px solid var(--color-brand); background: var(--color-brand-soft, var(--color-blue-50)); }
.pl17-pol .l { color: var(--color-text-secondary); }
.pl17-pol .pp { font-weight: 600; }
.pl17-fupc { display: flex; flex-direction: column; gap: 12px; min-inline-size: 0; }
.pl17-box { border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); padding: 14px; display: flex; flex-direction: column; gap: 8px; min-inline-size: 0; }
.pl17-box h4 { margin: 0; font-size: 15px; display: flex; gap: 6px; align-items: center; }
.pl17-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl17-lbl { font-weight: 600; font-size: 14px; min-inline-size: 80px; }
#pl17 .pl17-row select { inline-size: auto; min-block-size: 38px; }
.pl17-stair { inline-size: 100%; block-size: auto; color: var(--color-text); }
.pl17-st { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 10px; }
.pl17-st.first { background: var(--color-surface-sunken); }
.pl17-st .d { display: inline-grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 50%; background: var(--c); color: #fff; font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.pl17-st label { display: inline-flex; align-items: center; gap: 6px; }
#pl17 .pl17-st input[type=number] { inline-size: 90px; min-block-size: 36px; block-size: 36px; padding-block: 0; }
#pl17 .pl17-st select, #pl17 .pl17-st .pl17-sp { inline-size: auto; min-inline-size: 140px; min-block-size: 36px; block-size: 36px; padding-block: 0; }
.pl17-ao { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.pl17-ao > div { display: flex; flex-direction: column; min-inline-size: 0; }
#pl17 .pl17-ao select { inline-size: 120px; min-block-size: 34px; block-size: 34px; padding-block: 0; font-size: 13px; }
.pl17-rgs { display: flex; flex-wrap: wrap; gap: 6px; }
.pl17-rgc { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid var(--color-border-control); border-radius: 999px; font-size: 13px; cursor: pointer; }
.pl17-rgc:has(input:checked) { background: var(--color-ok-bg); border-color: var(--color-ok-fg); color: var(--color-ok-fg); font-weight: 600; }
.pl17-rgc input { margin: 0; }
.pl17-apply { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); box-shadow: var(--shadow-2, 0 -2px 10px rgba(0,0,0,.06)); z-index: 2; }
.pl17-apply > div { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pl17-prev { position: sticky; inset-block-start: 12px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pl17-prev h4 { margin: 0; font-size: 15px; display: flex; gap: 6px; align-items: center; }
.pl17-prev p { margin: 0; }
.pl17-wi { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
#pl17 .pl17-wi input[type=number] { inline-size: 80px; min-block-size: 32px; block-size: 32px; padding-block: 0; }
.pl17-wi input[type=range] { inline-size: 100%; accent-color: var(--color-brand); }
.pl17-mon { inline-size: 100%; block-size: auto; color: var(--color-text); }
.pl17-tl { display: flex; flex-direction: column; font-size: 13px; }
.pl17-tl .r { display: grid; grid-template-columns: 80px 1fr; gap: 8px; padding-block: 6px; border-block-end: 1px solid var(--color-border); }
.pl17-tl .r b { color: var(--color-brand-text); }
.pl17-tl .r.warn b { color: var(--color-warn-fg); }
.pl17-tl .r.step b { color: #c2410c; }
.pl17-tl .r.bad b { color: var(--color-bad-fg); }
.pl17-shares { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.pl17-shares > div { display: flex; justify-content: space-between; gap: 8px; }
.pl17-wa { border: 1px solid var(--color-ok-fg); background: var(--color-ok-bg); border-radius: 12px; padding: 10px 12px; }
.pl17-wa p { margin: 4px 0 0; font-size: 13px; }
.pl17-pickl { display: flex; flex-direction: column; gap: 6px; max-block-size: 50vh; overflow: auto; margin-block-end: 12px; }

/* add-ons, IPs, BNG */
.pl17-type { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.pl17-hol { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; padding: 0 14px 4px; }
.pl17-hd { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 12px; }
.pl17-hd > div:nth-child(2) { flex: 1; }
.pl17-hd.past { opacity: .55; }
.pl17-hd .dt { display: flex; flex-direction: column; align-items: center; inline-size: 46px; padding: 4px; border-radius: 10px; background: var(--color-brand-soft, var(--color-blue-50)); color: var(--color-brand-text); }
.pl17-hd .dt b { font-size: 20px; line-height: 1; }
.pl17-hd .dt span { font-size: 11px; }
.pl17-capk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-block-end: 10px; }
.pl17-capk div { display: flex; flex-direction: column; padding: 10px; border-radius: 10px; background: var(--color-surface-sunken); }
.pl17-capk b { font-size: 22px; }
.pl17-capk .ok b { color: var(--color-ok-fg); } .pl17-capk .b b { color: var(--color-brand-text); } .pl17-capk .warn b { color: var(--color-warn-fg); }
.pl17-capbar { display: flex; block-size: 12px; border-radius: 99px; background: color-mix(in srgb, var(--color-ok-fg) 30%, transparent); overflow: hidden; }
.pl17-capbar i.b { background: var(--color-brand); } .pl17-capbar i.warn { background: var(--color-warn-fg); } .pl17-capbar i.mut { background: var(--color-gray-450, #94a3b8); }
.pl17-st-ok { color: var(--color-ok-fg); font-weight: 600; } .pl17-st-bad { color: var(--color-bad-fg); font-weight: 600; } .pl17-st-warn { color: var(--color-warn-fg); font-weight: 600; } .pl17-st-mut { color: var(--color-text-muted); }
.pl17-grp { border: 0; border-block-start: 1px solid var(--color-border); margin: 0; padding: 12px 14px; }
.pl17-grp legend { font-weight: 700; font-size: 15px; display: flex; gap: 6px; align-items: center; padding: 0; }
.pl17-grp > p { margin: 4px 0 8px; }
.pl17-sf { display: flex; flex-direction: column; gap: 2px; }
.pl17-pre { background: var(--color-surface-sunken); padding: 10px 12px; border-radius: 10px; font-size: 13px; text-align: start; }
#pl17 textarea, #modal #pl17tx { inline-size: 100%; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; }

@media (max-width: 1280px) {
  .pl17-fupw { grid-template-columns: minmax(0, 1fr) 300px; }
  .pl17-pols { grid-column: 1 / -1; flex-direction: row; overflow-x: auto; }
  .pl17-pols .h { min-inline-size: 140px; }
  .pl17-pol { min-inline-size: 200px; }
}
@media (max-width: 980px) {
  .pl17-ed, .pl17-fupw { grid-template-columns: 1fr; }
  .pl17-side, .pl17-prev { position: static; }
  .pl17-g3, .pl17-g2 { grid-template-columns: 1fr; }
  .pl17-span2 { grid-column: auto; }
}
@media (max-width: 760px) {
  .pl17-head h2 { font-size: 19px; }
  .pl17-list-hide, #pl17list .pl17-tw:has(> .pl17-t:not(.pl17-cmp)) { display: none; }
  .pl17-mlist { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
  .pl17-mc { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--color-border); border-radius: 12px; color: var(--color-text); text-decoration: none; }
  .pl17-mc.warn { border-color: var(--color-warn-fg); background: color-mix(in srgb, var(--color-warn-bg) 60%, transparent); }
  .pl17-mc.bad { border-color: var(--color-bad-fg); background: color-mix(in srgb, var(--color-bad-bg) 60%, transparent); }
  .pl17-mc .h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 16px; }
  .pl17-mc .p { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; }
  .pl17-views { inline-size: 100%; }
  .pl17-views label { flex: 1; }
  #pl17 .pl17-search input { inline-size: 130px; }
  .pl17-capk { grid-template-columns: 1fr 1fr; }
  .pl17-apply { position: static; }
  .pl17-tl .r { grid-template-columns: 70px 1fr; }
}