/* Shared colourful interface. Original brand artwork stays in assets/brands. */
.ui-modern {
  --bg:#eff5fc; --panel:#fff; --ink:#203453; --muted:#566b85;
  --line:#d5e3f1; --accent:#1766c3; --accent-dark:#124f98;
  --tint:#e9f2ff; --tint-end:#e5f8f4; --shadow:0 10px 30px #214e8410;
  background:linear-gradient(135deg,#edf3ff 0%,#f2f9fb 55%,#eef9f3 100%) !important;
  color:var(--ink); font:14px/1.6 "Segoe UI","Microsoft YaHei",Arial,sans-serif !important;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
.ui-modern[data-brand="arcteryx"] { --accent:#087d77; --accent-dark:#05615d; --tint:#ddf6ee; --tint-end:#eaf7ff; }
.ui-modern[data-brand="thegearshop"] { --accent:#6950b5; --accent-dark:#4d378e; --tint:#eee9ff; --tint-end:#eaf3ff; }
.ui-modern[data-brand="ssaka"] { --accent:#a83766; --accent-dark:#86294f; --tint:#ffeaf2; --tint-end:#f3ecff; }
.ui-modern[data-brand="capo"] { --accent:#a65b16; --accent-dark:#82430b; --tint:#fff0dc; --tint-end:#fff8e9; }
.ui-modern :is(.shell,.app-shell,.container-fluid) { width:min(1200px,calc(100% - 48px)); padding:22px 0 44px !important; margin:auto; }
.ui-modern :is(.nav,.app-topbar,.nike-topbar) { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:0 0 18px; }
.ui-modern :is(.nav-links,.user,.top-actions,.nike-user) { gap:10px; }
.ui-modern :is(.back,.back-link,.nike-back,.ghost-button,.nike-logout,[data-logout]) { min-height:40px; height:auto; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:#ffffffbd; color:var(--accent); font-size:13px; font-weight:600; text-decoration:none; }
.ui-modern .brand-logo { background:linear-gradient(135deg,#2375d9,#078b86); border-radius:12px; }
.ui-modern :is(.hero,.hero-card,.header.nike-hero) { position:relative; display:block; padding:26px !important; margin:0 0 20px !important; border:1px solid var(--line) !important; border-radius:20px !important; background:linear-gradient(115deg,var(--tint),var(--tint-end)) !important; box-shadow:var(--shadow) !important; }
.ui-modern :is(h1,.hero h1,.header.nike-hero h1) { color:var(--ink) !important; font-size:30px; font-weight:750; line-height:1.35; letter-spacing:-.5px; }
.ui-modern :is(.hero p,.subtitle,.header.nike-hero p) { color:var(--muted) !important; margin:10px 0 0; font-size:14px; }
.ui-modern :is(.eyebrow,.nike-eyebrow,.brand-mark) { color:var(--accent) !important; font-weight:700; font-size:12px; letter-spacing:.8px; }
.ui-modern[data-brand] :is(.hero,.hero-card,.nike-hero) h1 { padding-right:0; }
.ui-modern[data-brand] :is(.hero,.hero-card,.nike-hero)::after { content:""; display:table; clear:both; }
.ui-modern :is(.panel,.control-panel,.group,.summary,.table-container,.status-bar,.login-card) { border:1px solid var(--line) !important; border-radius:16px !important; background:var(--panel) !important; box-shadow:var(--shadow) !important; }
.ui-modern :is(.panel,.control-panel) { padding:20px !important; margin-bottom:18px; }
.ui-modern :is(button,.btn) { border-radius:10px !important; min-height:44px; font-size:14px; font-weight:650; transition:background .15s,box-shadow .15s; }
.ui-modern button:not(.secondary):not(.ghost-button):not([data-logout]):not([role="option"]):not(#colorToggle):not(.btn):not(.nike-logout) { background:var(--accent); color:white; border:1px solid var(--accent); }
.ui-modern :is(.btn-primary-custom,.btn-success-custom) { background:var(--accent) !important; border:1px solid var(--accent) !important; color:white !important; box-shadow:none !important; }
.ui-modern .btn-success-custom { background:#07847d !important; border-color:#07847d !important; }
.ui-modern :is(button.secondary,.btn-warning-custom,.ghost-button) { background:var(--tint) !important; border:1px solid var(--line) !important; color:var(--accent-dark) !important; }
.ui-modern button:not(:disabled):hover { filter:brightness(.96); transform:none !important; }
.ui-modern button:disabled { opacity:.45; cursor:not-allowed; }
.ui-modern :is(input,select,.form-control,.form-select) { min-width:0; border-radius:10px !important; border-color:var(--line) !important; background:#fbfdff; color:var(--ink); min-height:44px; }
.ui-modern input[type=checkbox] { min-height:18px; accent-color:var(--accent); }
.ui-modern :is(a,button,input,select,summary):focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.ui-modern .settings-row label { background:var(--tint); border-color:var(--line); border-radius:10px; }
.ui-modern :is(.group-title,.table thead th,thead th) { background:var(--tint) !important; color:var(--accent-dark) !important; border-color:var(--line) !important; }
.ui-modern .group-title { flex-wrap:wrap; }
.ui-modern .candidate { border-color:var(--line); border-radius:13px; background:#fff; }
.ui-modern .candidate:hover { border-color:var(--accent); }
.ui-modern .candidate strong { font-weight:650; }
.ui-modern .candidate > div > span { color:var(--accent-dark); }
.ui-modern .stats-grid { gap:12px; background:transparent; border:0; }
.ui-modern .stats-grid > div { padding:16px; border:1px solid #cce2f4; border-radius:13px; background:#eaf4ff; box-shadow:none; }
.ui-modern .stats-grid > div:nth-child(4n+2) { background:#e5f6ed; border-color:#c5e9d5; }
.ui-modern .stats-grid > div:nth-child(4n+3) { background:#f2ecff; border-color:#ddd2f3; }
.ui-modern .stats-grid > div:nth-child(4n+4) { background:#fff1df; border-color:#f2daba; }
.ui-modern .stats-grid strong { color:#1d568b; font-size:25px; }
.ui-modern .stats-grid > div:nth-child(4n+2) strong { color:#166744; }
.ui-modern .stats-grid > div:nth-child(4n+3) strong { color:#65419b; }
.ui-modern .stats-grid > div:nth-child(4n+4) strong { color:#955317; }
.ui-modern .message { border:1px solid var(--line); border-radius:12px; background:#eef5ff; color:#315577; }
.ui-modern .message.error { background:#fff0f2; color:#a52d47; border-color:#f1cbd2; }
.ui-modern .message.warning { background:#fff6df; color:#835314; border-color:#f1dfad; }
.ui-modern .selected-product { background:var(--tint); }
.ui-modern .plan-secondary { background:var(--tint); border:1px solid var(--line); }
.ui-modern #colorToggle { border-color:var(--line); border-radius:10px; }
.ui-modern #colorList { border-radius:12px; box-shadow:0 12px 30px #18365526; }
.ui-modern #colorList button[aria-selected=true] { background:var(--tint); }
.ui-modern .directory-heading { display:flex; justify-content:space-between; align-items:center; margin:24px 0 14px; }
.ui-modern .directory-heading h2 { margin:0; font-size:17px; }
.ui-modern .directory-heading > span { background:#dfedff; color:#24598b; padding:3px 10px; border-radius:20px; font-size:12px; }
.ui-modern .tool-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; border:0; }
.ui-modern .tool-card { --card:#ecf3ff; display:grid; grid-template-columns:72px minmax(0,1fr); align-items:center; gap:16px; min-height:148px; padding:22px; background:var(--card); border:1px solid #d7e5f3; border-radius:18px; box-shadow:var(--shadow); }
.ui-modern .tool-card.arc { --card:#e6f6ee; }
.ui-modern .tool-card.gear { --card:#f0eaff; }
.ui-modern .tool-card.ssaka { --card:#ffedf2; }
.ui-modern .tool-card.capo { --card:#fff2e1; }
.ui-modern .tool-card.browser { --card:#e7f5fa; }
.ui-modern .tool-card::after { content:none; }
.ui-modern .tool-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.ui-modern .tool-card strong { font-size:17px; margin:0 0 5px; color:#203453; }
.ui-modern .tool-card small { font-size:13px; line-height:1.6; color:#526780; }
.ui-modern .tool-card .tool-icon,.brand-emblem { display:flex; align-items:center; justify-content:center; position:relative; width:72px; height:72px; padding:5px; margin:0; overflow:hidden; border:0; border-radius:14px; background:#050607 !important; flex-shrink:0; }
.tool-icon img,.brand-emblem img { width:100%; height:100%; object-fit:contain; }
.brand-remote img,.brand-ssaka img { filter:invert(1); }
.brand-ssaka img { transform:scale(1.12); }
.brand-thegearshop img { filter:grayscale(1) contrast(5) invert(1); transform:scale(1.15); }
.brand-emblem { position:relative; float:right; margin:0 0 10px 16px; }
.ui-modern .login-card { padding:32px; border-top:5px solid var(--accent) !important; }
.ui-modern .login-card h1 { font-size:27px; }
.ui-modern .modal-header { background:var(--accent) !important; }
.ui-modern .modal-content { border-radius:16px; }
.mobile-hint { display:none; }
.price-label { display:none; }
.price-value { white-space:nowrap; }
.ui-modern .ok,.ui-modern .stock-available { color:#137448; }
.ui-modern .no,.ui-modern .stock-unavailable { color:#a83650; }
@media (max-width:1000px) { .ui-modern .tool-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) {
  .ui-modern :is(.shell,.app-shell,.container-fluid) { width:calc(100% - 24px); padding:12px 0 28px !important; }
  .ui-modern :is(.nav,.app-topbar,.nike-topbar) { gap:8px; margin-bottom:12px; }
  .ui-modern :is(.user,.top-actions,.nike-user) { font-size:12px; margin-left:auto; }
  .ui-modern :is(.back,.back-link,.nike-back,.ghost-button,[data-logout]) { font-size:12px; padding:8px; min-height:40px; }
  .ui-modern :is(.hero,.hero-card,.header.nike-hero) { padding:18px !important; border-radius:16px !important; margin-bottom:14px !important; }
  .ui-modern :is(h1,.hero h1,.header.nike-hero h1) { font-size:23px; }
  .ui-modern[data-brand] :is(.hero,.hero-card,.nike-hero) h1 { padding-right:0; }
  .brand-emblem { width:48px; height:48px; border-radius:10px; padding:3px; margin-left:12px; }
  .ui-modern :is(.hero p,.subtitle,.header.nike-hero p) { font-size:13px; }
  .ui-modern :is(.panel,.control-panel) { padding:14px !important; }
  .ui-modern :is(input,select,.form-control,.form-select) { font-size:16px; }
  .ui-modern .tool-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
  .ui-modern .tool-card { grid-template-columns:64px minmax(0,1fr); padding:16px; gap:14px; min-height:106px; border-radius:15px; }
  .ui-modern .tool-card .tool-icon { width:64px; height:64px; }
  .ui-modern .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .ui-modern .stats-grid > div { padding:12px; }
  .ui-modern .stats-grid strong { font-size:22px; }
  .ui-modern .candidate > button { min-height:44px; }
  .ui-modern .table-scroll { overscroll-behavior-x:contain; }
  .ui-modern .desktop-hint { display:none; }
  .ui-modern .mobile-hint { display:inline; }
  .ui-modern .plan-table-scroll { padding:0 10px 10px; overflow:visible; }
  .ui-modern .plan-table-scroll .plan-table { display:block; width:100%; min-width:0; background:transparent; }
  .ui-modern .plan-table thead { display:none; }
  .ui-modern .plan-table tbody { display:grid; gap:12px; }
  .ui-modern .plan-table tbody tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:white; }
  .ui-modern .plan-table tbody td { position:static; display:block; width:auto !important; min-width:0; white-space:normal; padding:10px !important; text-align:left; box-shadow:none; border:0; border-bottom:1px solid #e5edf5; background:transparent !important; overflow-wrap:anywhere; }
  .ui-modern .plan-table tbody td::before { content:attr(data-label); display:block; color:var(--muted); font-size:11px; margin-bottom:4px; font-weight:400; }
  .ui-modern .plan-table tbody td.price-cell::before { display:none; }
  .ui-modern .plan-table .price-label { display:block; color:var(--muted); font-size:12px; font-weight:500; margin-bottom:4px; }
  .ui-modern .plan-table tbody td:nth-child(3) { order:-1; grid-column:1/-1; background:var(--tint) !important; font-weight:650; }
  .ui-modern .plan-table tbody td:nth-child(n+5):nth-child(-n+8) { color:var(--accent-dark); font-weight:700; }
  .ui-modern .plan-table tbody td:last-child,.ui-modern .plan-table tbody td[colspan] { grid-column:1/-1; }
  .ui-modern .plan-table tbody td:last-child a { display:inline-flex; min-height:40px; align-items:center; justify-content:center; min-width:88px; padding:4px 12px; border-radius:8px; background:var(--tint); color:var(--accent-dark); text-decoration:none; }
  .ui-modern .plan-controls label { flex:1 1 120px; }
  .ui-modern .plan-controls .category-field,.ui-modern .plan-actions { flex:1 1 100%; }
  .ui-modern .plan-actions button { flex:1; }
  .ui-modern .login-card { padding:24px; }
}
@media (prefers-reduced-motion:reduce) { .ui-modern * { transition:none !important; } }
.ui-modern .plan-product { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ui-modern .plan-thumbnail { display: flex; align-items: center; justify-content: center; flex: 0 0 56px; width: 56px; height: 64px; overflow: hidden; border: 1px solid #dce7ef; border-radius: 10px; background: #fff; color: #698097; font-size: 10px; line-height: 1.4; text-align: center; padding: 3px; box-sizing: border-box; }
.ui-modern .plan-thumbnail img { width: 100%; height: 100%; object-fit: contain; }
.ui-modern .plan-product-name { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .ui-modern .plan-product { gap: 10px; } .ui-modern .plan-thumbnail { flex-basis: 50px; width: 50px; height: 58px; } }