/* ============================================================ RegMaster · Design System v3 ───────────────────────────────────────────────── Deep navy + electric blue + warm cream Light & Dark equal-priority ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+TC:wght@300;400;500;600;700;800;900&family=Inter+Tight:wght@400;500;600;700;800;900&display=swap'); :root { /* === BRAND === */ --navy-900: #060B1C; --navy-800: #0A1432; --navy-700: #0E1C42; --navy-600: #14275A; --navy-500: #1E3470; --navy-400: #2B4685; --navy-300: #4F6CA8; --navy-200: #8FA3C9; --navy-100: #C4CFE3; --navy-50: #EBEFF7; --blue-600: #2952E3; --blue-500: #3D6BFF; --blue-400: #5B82FF; --blue-300: #94AEFF; --blue-100: #E2EAFF; --blue-50: #F1F5FF; /* warm accent — used sparingly */ --amber-600: #C2410C; --amber-500: #EA580C; --amber-400: #FB923C; --amber-300: #FDBA74; --amber-100: #FED7AA; --cream: #FBF7EE; --cream-2: #F5EFE0; /* semantic */ --ok-700: #047857; --ok-500: #10B981; --ok-100: #D1FAE5; --warn-700: #B45309; --warn-500: #F59E0B; --warn-100: #FEF3C7; --err-700: #B91C1C; --err-500: #EF4444; --err-100: #FEE2E2; /* surfaces — LIGHT mode default */ --bg: #FAFAF7; --surface: #FFFFFF; --surface-2:#F5F4EE; --surface-3:#EDECE3; --line: rgba(11,28,61,.10); --line-2: rgba(11,28,61,.06); --hairline: rgba(11,28,61,.04); --ink: #060B1C; --ink-2: #1E2A4A; --ink-3: #4A5878; --muted: #6B7898; --muted-2: #9AA4BD; --pri: var(--navy-800); --pri-2: var(--navy-700); --acc: var(--blue-500); --acc-2: var(--blue-600); --acc-soft: var(--blue-50); /* radius / shadow */ --r-xs: 4px; --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --sh-xs: 0 1px 2px rgba(11,28,61,.04); --sh-sm: 0 1px 2px rgba(11,28,61,.04), 0 1px 3px rgba(11,28,61,.06); --sh: 0 2px 4px rgba(11,28,61,.04), 0 4px 12px rgba(11,28,61,.06); --sh-md: 0 4px 8px rgba(11,28,61,.04), 0 10px 24px rgba(11,28,61,.08); --sh-lg: 0 8px 16px rgba(11,28,61,.05), 0 24px 56px rgba(11,28,61,.12); --sh-xl: 0 12px 24px rgba(11,28,61,.06), 0 40px 80px rgba(11,28,61,.18); --ring: 0 0 0 3px rgba(61,107,255,.16); /* fonts */ --f-display: 'Inter Tight', 'IBM Plex Sans', 'Noto Sans TC', system-ui, sans-serif; --f-sans: 'IBM Plex Sans', 'Noto Sans TC', system-ui, sans-serif; --f-tc: 'Noto Sans TC', 'IBM Plex Sans', system-ui, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace; --easing: cubic-bezier(.2,.8,.2,1); } /* === DARK MODE === */ [data-theme="dark"] { --bg: #060B1C; --surface: #0B1432; --surface-2:#101A3D; --surface-3:#162449; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.05); --hairline: rgba(255,255,255,.03); --ink: #F8FAFE; --ink-2: #DDE3F2; --ink-3: #A6B0CC; --muted: #7C88A8; --muted-2: #5A6585; --pri: #FFFFFF; --pri-2: var(--navy-100); --acc: var(--blue-400); --acc-2: var(--blue-300); --acc-soft: rgba(61,107,255,.14); --sh-xs: 0 1px 2px rgba(0,0,0,.3); --sh-sm: 0 1px 3px rgba(0,0,0,.3); --sh: 0 2px 8px rgba(0,0,0,.3); --sh-md: 0 8px 24px rgba(0,0,0,.4); --sh-lg: 0 24px 56px rgba(0,0,0,.5); --sh-xl: 0 40px 80px rgba(0,0,0,.6); } /* === FONT SIZE TOGGLE TOKENS (RegMaster addition) === Default base = 16px. User can switch via: --> 14px (compact, admin mode) --> 16px (default) --> 18px (老師端 / 大字模式) Persisted via app-state.js to localStorage('regmaster_font_size'). */ :root { --font-base: 16px; } html[data-font="sm"] { --font-base: 14px; } html[data-font="md"] { --font-base: 16px; } html[data-font="lg"] { --font-base: 18px; } /* === RESET === */ * { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: var(--font-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--f-tc); background: var(--bg); color: var(--ink); line-height: 1.5; font-feature-settings: "ss01", "cv11"; font-variant-numeric: tabular-nums; -webkit-text-size-adjust: 100%; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } ::selection { background: var(--acc); color: white; } /* === TYPE === */ .f-display { font-family: var(--f-display); letter-spacing: -.022em; } .f-mono { font-family: var(--f-mono); } .f-tc { font-family: var(--f-tc); } .t-eyebrow { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .t-display { font-family: var(--f-display); font-weight: 700; letter-spacing: -.028em; line-height: 1.02; } .t-h1 { font: 800 56px/1.04 var(--f-display); letter-spacing: -.028em; } .t-h2 { font: 700 40px/1.08 var(--f-display); letter-spacing: -.024em; } .t-h3 { font: 700 28px/1.18 var(--f-display); letter-spacing: -.018em; } .t-h4 { font: 700 20px/1.3 var(--f-display); letter-spacing: -.012em; } .t-h5 { font: 600 16px/1.4 var(--f-display); letter-spacing: -.006em; } .t-body { font: 400 16px/1.6 var(--f-tc); } .t-body-sm { font: 400 14px/1.55 var(--f-tc); color: var(--ink-3); } .t-caption { font: 500 12px/1.5 var(--f-tc); color: var(--muted); letter-spacing: .01em; } /* === BUTTONS === */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: var(--r); font: 500 14px/1 var(--f-tc); letter-spacing: -.005em; cursor: pointer; transition: all .18s var(--easing); white-space: nowrap; border: 1px solid transparent; } .btn:focus-visible { outline: 0; box-shadow: var(--ring); } .btn .ic { width: 16px; height: 16px; flex-shrink: 0; } .btn-primary { background: var(--ink); color: var(--surface); border-color: var(--ink); } .btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); transform: translateY(-1px); box-shadow: var(--sh-md); } .btn-accent { background: var(--acc); color: white; border-color: var(--acc); } .btn-accent:hover { background: var(--acc-2); border-color: var(--acc-2); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(61,107,255,.32); } .btn-ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line); } .btn-ghost:hover { background: var(--surface-2); border-color: var(--ink-3); } .btn-quiet { background: transparent; color: var(--ink-2); border-color: transparent; } .btn-quiet:hover { background: var(--surface-2); } .btn-sm { padding: 7px 12px; font-size: 13px; border-radius: var(--r-sm); } .btn-md { padding: 10px 18px; font-size: 14px; } .btn-lg { padding: 14px 22px; font-size: 15px; border-radius: var(--r-lg); } .btn-xl { padding: 16px 28px; font-size: 16px; border-radius: var(--r-lg); } .btn-block { width: 100%; } .btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; } /* === INPUT === */ .input, .select, .textarea { width: 100%; padding: 10px 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); font: 400 14px/1.5 var(--f-tc); transition: border-color .15s var(--easing), box-shadow .15s var(--easing); } .input::placeholder { color: var(--muted-2); } .input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); } .input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--acc); box-shadow: var(--ring); } .label { display: block; font: 500 13px/1.4 var(--f-tc); color: var(--ink-2); margin-bottom: 6px; } .help { font: 400 12px/1.5 var(--f-tc); color: var(--muted); margin-top: 6px; } /* === CARDS === */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } .card-pad { padding: 24px; } .card-pad-sm { padding: 16px; } .card-hover { transition: all .2s var(--easing); } .card-hover:hover { border-color: var(--ink-3); box-shadow: var(--sh-md); transform: translateY(-2px); } .divider { height: 1px; background: var(--line-2); } /* === BADGES / CHIPS === */ .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font: 500 11px/1 var(--f-mono); letter-spacing: .04em; background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line); } .chip-ok { background: rgba(16,185,129,.10); color: var(--ok-700); border-color: rgba(16,185,129,.2); } .chip-warn { background: rgba(245,158,11,.10); color: var(--warn-700); border-color: rgba(245,158,11,.2); } .chip-err { background: rgba(239,68,68,.08); color: var(--err-700); border-color: rgba(239,68,68,.2); } .chip-acc { background: var(--acc-soft); color: var(--acc-2); border-color: rgba(61,107,255,.2); } .chip-amber { background: rgba(234,88,12,.08); color: var(--amber-600); border-color: rgba(234,88,12,.2); } .chip-dot::before { content:''; width:6px; height:6px; border-radius:50%; background: currentColor; flex-shrink:0; } /* === SHELL: SIDEBAR + MAIN === */ .app-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; } .sidebar { background: var(--surface); border-right: 1px solid var(--line); padding: 18px 14px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; border-bottom: 1px solid var(--line-2); margin-bottom: 12px; } .sidebar .brand .logo { width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: var(--surface); display: grid; place-items: center; font: 800 14px/1 var(--f-display); letter-spacing: -.02em; } .sidebar .brand .name { font: 700 15px/1 var(--f-display); letter-spacing: -.01em; } .sidebar .brand .name span { display: block; font: 500 11px/1.4 var(--f-mono); color: var(--muted); margin-top: 3px; letter-spacing: .04em; } .sidebar .group { padding: 12px 4px 6px; } .sidebar .group-label { font: 500 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); padding: 0 8px 6px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); font: 500 13.5px/1 var(--f-tc); color: var(--ink-2); cursor: pointer; transition: all .12s var(--easing); } .nav-item:hover { background: var(--surface-2); color: var(--ink); } .nav-item.active { background: var(--ink); color: var(--surface); } .nav-item.active .ic { color: var(--surface); } .nav-item .ic { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; } .nav-item:hover .ic { color: var(--ink-2); } .nav-item .count { margin-left: auto; font: 500 11px/1 var(--f-mono); color: var(--muted); } .nav-item.active .count { color: var(--surface); opacity: .7; } .main { display: flex; flex-direction: column; min-width: 0; } .topbar { height: 60px; border-bottom: 1px solid var(--line); background: var(--bg); padding: 0 28px; display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 30; backdrop-filter: saturate(1.4) blur(8px); background: color-mix(in srgb, var(--bg) 88%, transparent); } .crumb { display: flex; align-items: center; gap: 8px; font: 500 13.5px/1 var(--f-tc); color: var(--muted); } .crumb b { color: var(--ink); font-weight: 600; } .crumb .sep { color: var(--muted-2); } .content { padding: 32px; min-height: calc(100vh - 60px); } .container { max-width: 1280px; margin: 0 auto; } .container-sm { max-width: 720px; margin: 0 auto; } .container-md { max-width: 980px; margin: 0 auto; } /* === PAGE HEADER === */ .page-head { margin-bottom: 28px; } .page-head h1 { font: 700 28px/1.2 var(--f-display); letter-spacing: -.018em; margin-bottom: 6px; } .page-head .sub { font: 400 14px/1.5 var(--f-tc); color: var(--muted); } .page-head .row { display: flex; align-items: flex-end; gap: 16px; } .page-head .row > div:first-child { flex: 1; } /* === KPI CARDS === */ .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; position: relative; overflow: hidden; } .kpi .label { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .kpi .value { font: 700 32px/1 var(--f-display); letter-spacing: -.02em; margin-bottom: 6px; color: var(--ink); font-variant-numeric: tabular-nums; } .kpi .delta { display: inline-flex; align-items: center; gap: 4px; font: 500 12px/1 var(--f-mono); color: var(--ok-700); } .kpi .delta.down { color: var(--err-700); } /* === TABLE === */ .tbl { width: 100%; border-collapse: collapse; font: 400 13.5px/1.4 var(--f-tc); } .tbl thead th { text-align: left; padding: 10px 16px; font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--surface-2); position: sticky; top: 0; } .tbl tbody td { padding: 14px 16px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); vertical-align: middle; } .tbl tbody tr { transition: background .12s; } .tbl tbody tr:hover { background: var(--surface-2); } /* === COMMAND BAR / SEARCH === */ .cmd { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); flex: 1; max-width: 480px; cursor: text; transition: all .12s; } .cmd:hover { border-color: var(--ink-3); } .cmd:focus-within { border-color: var(--acc); box-shadow: var(--ring); } .cmd .ic { width: 16px; height: 16px; color: var(--muted); } .cmd input { flex: 1; border: 0; outline: 0; background: transparent; font: 400 14px/1 var(--f-tc); } .cmd kbd { font: 500 11px/1 var(--f-mono); padding: 3px 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-xs); color: var(--muted); } /* === AVATAR === */ .av { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; font: 600 13px/1 var(--f-display); color: var(--ink-2); flex-shrink: 0; border: 1px solid var(--line-2); } .av-sm { width: 24px; height: 24px; font-size: 10px; } .av-lg { width: 40px; height: 40px; font-size: 15px; } .av-xl { width: 56px; height: 56px; font-size: 18px; } .av-grad-1 { background: linear-gradient(135deg,#3D6BFF,#94AEFF); color:white; } .av-grad-2 { background: linear-gradient(135deg,#0E1C42,#4F6CA8); color:white; } .av-grad-3 { background: linear-gradient(135deg,#EA580C,#FDBA74); color:white; } .av-grad-4 { background: linear-gradient(135deg,#10B981,#6EE7B7); color:white; } .av-grad-5 { background: linear-gradient(135deg,#7C3AED,#C4B5FD); color:white; } /* === MISC === */ .spark { display: inline-block; vertical-align: middle; } .toggle { width: 36px; height: 20px; background: var(--surface-3); border-radius: 999px; position: relative; cursor: pointer; transition: background .15s; } .toggle::after { content:''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; background: var(--surface); border-radius: 50%; box-shadow: var(--sh-sm); transition: left .15s var(--easing); } .toggle.on { background: var(--acc); } .toggle.on::after { left: 18px; } .skeleton { background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: shimmer 1.6s infinite; border-radius: var(--r-sm); } @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} } /* progress */ .bar { height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--acc); border-radius: inherit; transition: width .4s var(--easing); } .bar.bar-ok > i { background: var(--ok-500); } .bar.bar-warn > i { background: var(--warn-500); } .bar.bar-err > i { background: var(--err-500); } /* tabs */ .tabs { display: inline-flex; gap: 0; border-bottom: 1px solid var(--line); } .tab { padding: 10px 14px; font: 500 13.5px/1 var(--f-tc); color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: all .12s; } .tab:hover { color: var(--ink-2); } .tab.active { color: var(--ink); border-bottom-color: var(--ink); } /* segmented */ .seg { display: inline-flex; background: var(--surface-2); padding: 3px; border-radius: var(--r); border: 1px solid var(--line-2); } .seg button { padding: 6px 12px; font: 500 13px/1 var(--f-tc); color: var(--muted); border-radius: var(--r-sm); transition: all .12s; } .seg button:hover { color: var(--ink-2); } .seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); } /* alert */ .alert { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); font: 400 13.5px/1.5 var(--f-tc); } .alert .ic { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; } .alert b { font-weight: 600; color: var(--ink); } .alert-info { background: var(--acc-soft); border-color: rgba(61,107,255,.2); color: var(--ink-2); } .alert-info .ic { color: var(--acc); } .alert-warn { background: rgba(245,158,11,.06); border-color: rgba(245,158,11,.25); color: var(--warn-700); } .alert-ok { background: rgba(16,185,129,.06); border-color: rgba(16,185,129,.2); color: var(--ok-700); } /* utility */ .flex { display: flex; } .fcol { flex-direction: column; } .aic { align-items: center; } .ais { align-items: flex-start; } .aie { align-items: flex-end; } .jcb { justify-content: space-between; } .jcc { justify-content: center; } .jce { justify-content: flex-end; } .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; } .flex1 { flex: 1; } .flex-wrap { flex-wrap: wrap; } .grid { display: grid; } .gtc-2 { grid-template-columns: repeat(2,1fr); } .gtc-3 { grid-template-columns: repeat(3,1fr); } .gtc-4 { grid-template-columns: repeat(4,1fr); } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 20px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mute { color: var(--muted); } .mute-2 { color: var(--muted-2); } .ink { color: var(--ink); } .ink-2 { color: var(--ink-2); } .acc { color: var(--acc); } .ok { color: var(--ok-700); } .warn { color: var(--warn-700); } .err { color: var(--err-700); } .mono { font-family: var(--f-mono); } .tabnums { font-variant-numeric: tabular-nums; } .text-c { text-align: center; } .text-r { text-align: right; } .w-full { width: 100%; } .h-full { height: 100%; } .rad { border-radius: var(--r); } .rad-lg { border-radius: var(--r-lg); } .rad-full { border-radius: 999px; } .bdr { border: 1px solid var(--line); } .bdr-b { border-bottom: 1px solid var(--line); } .bdr-t { border-top: 1px solid var(--line); } /* hide scrollbar but keep scroll */ .no-sb { scrollbar-width: none; } .no-sb::-webkit-scrollbar { display: none; } /* preview ribbon — for nav between pages during review */ .preview-bar { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 14px; background: var(--ink); color: var(--surface); border-radius: 999px; box-shadow: var(--sh-xl); font: 500 12.5px/1 var(--f-tc); z-index: 100; border: 1px solid rgba(255,255,255,.08); } .preview-bar a { color: var(--blue-300); font-weight: 600; } .preview-bar select { padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: white; font: 500 12px/1 var(--f-tc); cursor: pointer; } .preview-bar .dot { width:6px;height:6px;border-radius:50%;background:var(--ok-500); } .preview-bar button { padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: white; font: 500 12px/1 var(--f-tc); cursor: pointer; } .preview-bar button:hover { background: rgba(255,255,255,.12); } /* ===== HEROICONS-STYLE INLINE SVG SIZING ===== */ [data-hero] { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* ============================================================ MOBILE RWD SAFETY NET (rev. 2026-06-07b · loaded on every page) ───────────────────────────────────────────────── Root cause of the "畫面寬度被鎖、雙指縮放縮不了" report: 1. CSS grid/flex items (esp.

in the .admin grid) default to min-width:auto, so they REFUSE to shrink below their content's intrinsic width →

blows out to ~700–990px on a 390 phone. 2. The previous fix put overflow-x:clip on , which on iOS Safari (a) DISABLES pinch-zoom — overflow on the root captures the gesture — and (b) just HID the blow-out (right side clipped off) instead of fixing it. This rev fixes the cause: let the content columns shrink (min-width:0) and let genuinely-wide blocks (tables, etc.) SCROLL inside their own box. NOTHING sets overflow on /, so pinch-zoom works again. Desktop (>768px) is untouched. ============================================================ */ @media (max-width: 768px) { /* (1) kill the min-width:auto blow-out so grid/flex columns fit the phone. Without this, one wide descendant drags the whole column off-screen. */ .admin, main, .main-c, .shell, .builder, .body-3, .mc-wrap, .center-c, .container, .container-sm, .container-md, .page, header, footer, nav, section, article { min-width: 0; } main, .main-c { max-width: 100%; } /* media + code never push the page wider than the screen */ img, svg, video, canvas, iframe, pre { max-width: 100%; height: auto; } /* (2) wide data tables SCROLL inside their wrapper (columns stay readable) instead of widening the page. .tbl keeps a min-width only WHEN it sits in a scroll wrapper; a bare .tbl falls back to fluid so it can't overflow. */ .tbl-wrap, .b-tbl-wrap, [class*="tbl-wrap"] { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* :not(.reg-cards) — tables that switch to a stacked CARD view on phones (registrations) must stay fluid; only real scrolling tables get min-width. */ .tbl-wrap > .tbl:not(.reg-cards), .b-tbl-wrap > .tbl:not(.reg-cards), [class*="tbl-wrap"] > .tbl:not(.reg-cards) { min-width: 600px; } }