/* ============================================================
PayBO — Iwakiri Whitelabel theme
Exact tokens lifted from p-style.css + style.bundle.css
- Primary brand accent: #2a3fd0 (was red #e2011a until Aug 2026)
- Orange CTA: #f39401
- Font: Poppins 13px
- Borders: #E4E6EF / #EBEDF3
- Panel bg: #ececec
Applied when (default).
============================================================ */
html[data-theme="iwakiri"] {
/* Primary = Iwakiri red */
--p-50: #eef0fd;
--p-100: #dbe0fa;
--p-200: #b8c1f5;
--p-300: #8e9bee;
--p-400: #5d6ee2;
--p-500: #2a3fd0;
--p-600: #2334ae;
--p-700: #1c298c;
--p-800: #141d69;
--p-900: #0d1246;
/* Keep semantic colors bootstrap-ish (matches Metronic bundle) */
--ok-50: #e1f8eb;
--ok-100: #bff0d2;
--ok-300: #4cbf7d;
--ok-500: #1BC5BD;
--ok-600: #0bb7af;
--ok-700: #0aa19a;
--warn-50: #fff4de;
--warn-100: #ffe5a3;
--warn-300: #ffce61;
--warn-500: #FFA800;
--warn-700: #c98300;
--err-50: #ffe2e5;
--err-100: #ffcdd3;
--err-300: #ff7683;
--err-500: #F64E60;
--err-700: #d2293a;
--info-50: #E1F0FF;
--info-100: #c6e2ff;
--info-300: #6aaeff;
--info-500: #3699FF;
/* Dark accents (Metronic header dark on hover) */
--n-700: #3F4254;
--n-800: #181C32;
--n-900: #0c0f1e;
/* Type — Poppins like real whitelabel */
--font-sans: "Poppins", Helvetica, "sans-serif";
--font-display: "Poppins", Helvetica, "sans-serif";
/* Corners — Metronic uses 0.42rem default */
--r-sm: 4px;
--r-md: 6px;
--r-lg: 6px;
--r-xl: 8px;
/* Surfaces */
--n-0: #ffffff;
--n-25: #fafbfc;
--n-50: #f3f6f9;
--n-75: #ececec; /* form-panel bg */
--border-default: #E4E6EF; /* Metronic default */
--border-subtle: #EBEDF3;
--border-strong: #d1d3e0;
--surface-canvas: #f2f3f8;
/* Focus ring — red */
--ring-focus: 0 0 0 3px rgba(226, 1, 26, 0.2);
/* Base font size — Metronic uses 13px */
--fs-xs: 11px;
--fs-sm: 12px;
--fs-md: 13px;
--fs-base: 13px;
--fs-lg: 14px;
}
/* ============ App-level look ============ */
html[data-theme="iwakiri"] .app { background: #f2f3f8; }
html[data-theme="iwakiri"] body { font-family: var(--font-sans); font-size: 13px; }
/* ============ TOPBAR — white with wordmark + centered stats ============ */
html[data-theme="iwakiri"] .topbar {
background: #ffffff;
border-bottom: 1px solid var(--border-default);
}
html[data-theme="iwakiri"] .topbar .brand-mark,
html[data-theme="iwakiri"] .topbar .brand__name { color: var(--p-500); }
/* ============ SUBNAV — the RED horizontal menu bar ============ */
html[data-theme="iwakiri"] .subnav {
background: var(--p-500);
border-bottom: 0;
padding: 0;
gap: 0;
}
html[data-theme="iwakiri"] .subnav button,
html[data-theme="iwakiri"] .subnav a,
html[data-theme="iwakiri"] .subnav .subnav__item {
background: var(--p-500);
color: #ffffff;
border: 0;
border-right: 1px solid rgba(255,255,255,0.14);
border-radius: 0;
padding: 10px 14px;
font-weight: 500;
font-size: 13px;
display: inline-flex;
align-items: center;
gap: 6px;
height: auto;
}
html[data-theme="iwakiri"] .subnav .subnav__item .icon { color: #fff; }
html[data-theme="iwakiri"] .subnav button:hover,
html[data-theme="iwakiri"] .subnav a:hover,
html[data-theme="iwakiri"] .subnav .subnav__item:hover {
background: var(--p-600);
color: #ffffff;
}
html[data-theme="iwakiri"] .subnav button.active,
html[data-theme="iwakiri"] .subnav a.active,
html[data-theme="iwakiri"] .subnav .subnav__item.active {
background: #3f3f3f;
color: #ffffff;
border-bottom: 0;
}
html[data-theme="iwakiri"] .subnav .badge,
html[data-theme="iwakiri"] .subnav .chip {
background: #ffffff;
color: var(--p-500);
font-weight: 700;
border-radius: 3px;
padding: 1px 6px;
margin-left: 4px;
}
/* ============ Panels / Cards ============ */
html[data-theme="iwakiri"] .panel {
border-radius: 6px;
border: 1px solid var(--border-default);
box-shadow: none;
background: #ffffff;
}
/* ============ Page titles ============ */
html[data-theme="iwakiri"] .page__title {
font-weight: 700;
font-size: 22px;
color: #212121;
}
html[data-theme="iwakiri"] .page__subtitle {
color: #6c757d;
font-size: 13px;
}
/* ============ Buttons ============ */
html[data-theme="iwakiri"] .btn {
font-family: var(--font-sans);
font-weight: 500;
border-radius: 4px;
font-size: 13px;
line-height: 1.35;
}
html[data-theme="iwakiri"] .btn {
border-radius: 10px;
font-weight: 600;
letter-spacing: .01em;
transition: background .12s ease, border-color .12s ease, box-shadow .15s ease, transform .08s ease;
}
html[data-theme="iwakiri"] .btn:active { transform: translateY(1px); }
html[data-theme="iwakiri"] .btn--primary {
background: linear-gradient(180deg, #3699FF, #187DE4);
border-color: #187DE4;
color: #fff;
box-shadow: 0 4px 10px -2px rgba(54,153,255,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
html[data-theme="iwakiri"] .btn--primary:hover {
background: linear-gradient(180deg, #2A8DF5, #146FCE);
border-color: #146FCE;
box-shadow: 0 6px 14px -2px rgba(54,153,255,.45), inset 0 1px 0 rgba(255,255,255,.18);
}
html[data-theme="iwakiri"] .btn--secondary {
background: linear-gradient(180deg, #4a4e63, #2f3346);
border-color: #2f3346;
color: #fff;
box-shadow: 0 3px 8px -2px rgba(15,20,32,.25), inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="iwakiri"] .btn--secondary:hover {
background: linear-gradient(180deg, #3a3e51, #1d2034);
border-color: #1d2034;
box-shadow: 0 5px 12px -2px rgba(15,20,32,.32), inset 0 1px 0 rgba(255,255,255,.08);
}
/* Orange CTA — used for "New method" type primary actions */
html[data-theme="iwakiri"] .btn--cta,
html[data-theme="iwakiri"] .btn--brand {
background: #f39401;
border-color: #f39401;
color: #fff;
box-shadow: 0 4px 10px -4px rgba(243, 148, 1, 0.5);
}
html[data-theme="iwakiri"] .btn--cta:hover,
html[data-theme="iwakiri"] .btn--brand:hover {
background: #eb8f01;
border-color: #eb8f01;
}
html[data-theme="iwakiri"] .btn--danger {
background: var(--p-500);
border-color: var(--p-500);
color: #fff;
}
html[data-theme="iwakiri"] .btn--ghost {
color: #3F4254;
background: transparent;
border: 0;
}
html[data-theme="iwakiri"] .btn--ghost:hover {
background: rgba(63, 66, 84, 0.06);
}
/* Links are red */
html[data-theme="iwakiri"] a:not(.btn) { color: var(--p-500); }
html[data-theme="iwakiri"] a:not(.btn):hover { color: var(--p-700); }
/* ============ Chips ============ */
html[data-theme="iwakiri"] .chip {
border-radius: 4px;
padding: 3px 8px;
font-weight: 500;
font-size: 11.5px;
}
html[data-theme="iwakiri"] .chip--ok { background: var(--ok-50); color: var(--ok-700); border-color: transparent; }
html[data-theme="iwakiri"] .chip--warn { background: var(--warn-50);color: var(--warn-700); border-color: transparent; }
html[data-theme="iwakiri"] .chip--err { background: var(--err-50); color: var(--err-700); border-color: transparent; }
html[data-theme="iwakiri"] .chip--info { background: var(--info-50);color: #0a69c7; border-color: transparent; }
html[data-theme="iwakiri"] .chip--neutral { background: #F3F6F9; color: #7E8299; border-color: transparent; }
/* Filter chip — modern 2026 pill */
html[data-theme="iwakiri"] .filter-chip {
background: #fff;
border: 1px solid var(--border-default);
border-radius: 999px;
padding: 6px 12px 6px 10px;
color: #3F4254;
font-weight: 500;
font-size: 12.5px;
display: inline-flex;
align-items: center;
gap: 7px;
transition: all .15s cubic-bezier(.4,0,.2,1);
box-shadow: 0 1px 2px rgba(15,20,32,.04);
cursor: pointer;
}
html[data-theme="iwakiri"] .filter-chip:hover {
border-color: var(--border-strong);
box-shadow: 0 2px 6px rgba(15,20,32,.08);
transform: translateY(-1px);
background: #fff;
color: #3F4254;
}
html[data-theme="iwakiri"] .filter-chip.active {
background: linear-gradient(180deg, var(--p-500), var(--p-600));
border-color: var(--p-600);
color: #fff;
box-shadow: 0 3px 10px -2px color-mix(in oklab, var(--p-500) 50%, transparent),
0 1px 2px rgba(15,20,32,.1),
inset 0 1px 0 rgba(255,255,255,.18);
font-weight: 600;
}
html[data-theme="iwakiri"] .filter-chip.active:hover {
transform: translateY(-1px);
box-shadow: 0 6px 14px -2px color-mix(in oklab, var(--p-500) 55%, transparent),
0 1px 2px rgba(15,20,32,.1),
inset 0 1px 0 rgba(255,255,255,.18);
}
/* ============ Data tables — Players-style ============
Light header strip with primary-blue uppercase labels (mirrors the
.paybo-v2__table look the operator likes on the Players page). */
html[data-theme="iwakiri"] .data-table {
font-size: 13px;
border-collapse: collapse;
}
/* One table-header treatment for the whole platform (Arbi, Aug 2026).
This was `#eef2f7` on `--p-700` text, while the Hrs report kit and the
Players/Users lists used the Metronic navy — so PayBO's tables, /vouchers and
a few other stragglers rendered light while 53 other routes rendered dark.
Flipping the base rule unifies them all; it also makes the three narrowly
scoped navy overrides further down this file redundant (kept, harmless). */
html[data-theme="iwakiri"] .data-table thead th {
background: #28387a;
color: #fff;
font-weight: 600;
letter-spacing: .05em;
font-size: 11px;
text-transform: uppercase;
border-bottom: 1px solid #e5e7eb;
padding: 10px 12px;
text-align: left;
}
html[data-theme="iwakiri"] .data-table tbody td {
border-bottom: 1px solid #e5e7eb;
padding: 10px 12px;
color: #1f2937;
background: #ffffff;
}
html[data-theme="iwakiri"] .data-table tbody tr:last-child td { border-bottom: 0; }
/* Copy-id button — small clickable affordance next to any monospaced ID. */
.copy-id {
display: inline-flex;
align-items: center;
gap: 5px;
cursor: pointer;
}
.copy-id__btn {
width: 18px; height: 18px;
display: inline-grid; place-items: center;
border: none; background: transparent;
color: var(--text-tertiary);
border-radius: 4px;
cursor: pointer;
opacity: 0;
transition: opacity .12s ease, background .12s ease, color .12s ease;
}
.copy-id:hover .copy-id__btn { opacity: 1; }
.copy-id__btn:hover { background: var(--p-50); color: var(--p-700); }
.copy-id__btn.copied { opacity: 1; color: var(--ok-600); }
/* ============ Forms ============ */
html[data-theme="iwakiri"] .input,
html[data-theme="iwakiri"] .select {
background: #ffffff;
border: 1px solid var(--border-default);
border-radius: 4px;
font-size: 13px;
color: #3F4254;
}
html[data-theme="iwakiri"] .input:focus,
html[data-theme="iwakiri"] .select:focus {
border-color: var(--p-300);
box-shadow: var(--ring-focus);
outline: 0;
}
html[data-theme="iwakiri"] .form-label {
color: var(--p-500);
font-weight: 600;
font-size: 12px;
text-transform: none;
}
/* Filter/search panel — gray inset like screenshot */
html[data-theme="iwakiri"] .filter-panel,
html[data-theme="iwakiri"] .panel--inset {
background: #ececec;
border: 0;
border-radius: 5px;
padding: 15px;
}
/* ============ KPIs ============ */
html[data-theme="iwakiri"] .kpi {
border-radius: 6px;
border: 1px solid var(--border-default);
box-shadow: none;
}
html[data-theme="iwakiri"] .kpi__value {
font-weight: 600;
color: #181C32;
}
html[data-theme="iwakiri"] .kpi__label {
color: var(--p-500);
font-weight: 600;
}
/* ============ Sidebar (dark mode when used) ============ */
html[data-theme="iwakiri"] .side {
background: #ffffff;
border-right: 1px solid var(--border-default);
}
html[data-theme="iwakiri"] .side__item {
color: #3F4254;
}
html[data-theme="iwakiri"] .side__item.active {
background: var(--p-50);
color: var(--p-600);
border-left: 3px solid var(--p-500);
}
/* ============ Modal ============ */
html[data-theme="iwakiri"] .modal-header,
html[data-theme="iwakiri"] .modal-footer {
background: #F3F6F9;
}
/* ============ Dashboard header stats row (Balance / Credits / Availability) ============ */
html[data-theme="iwakiri"] .stat-tri {
text-align: center;
padding: 0 18px;
}
html[data-theme="iwakiri"] .stat-tri__label {
color: var(--p-500);
font-weight: 600;
font-size: 13px;
}
html[data-theme="iwakiri"] .stat-tri__value {
color: #212121;
font-weight: 500;
font-size: 13px;
font-variant-numeric: tabular-nums;
}
/* Tabs within modals — red underline */
html[data-theme="iwakiri"] .tabs button.active {
color: var(--p-500);
border-bottom-color: var(--p-500);
}
/* ===================================================================
Operator reports (Bonus Retention, Conversion, …) — shared chrome
=================================================================== */
.report-page .page__title { margin-bottom: 4px; }
/* --- Filter panel (gray inset) --- */
.report-page .rpt-filters {
background: #eceef1;
border: 0;
border-radius: 6px;
padding: 18px 20px;
margin-bottom: 16px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 18px 26px;
}
.report-page .rpt-field { display: flex; flex-direction: column; gap: 6px; }
.report-page .rpt-field > label,
.report-page .rpt-label {
font-size: 13px; font-weight: 700; color: #3f4254; letter-spacing: 0;
}
.report-page .rpt-filters .input,
.report-page .rpt-filters .select {
height: 40px; background: #fff; border: 1px solid #e4e6ef; border-radius: 5px;
font-size: 13px; color: #3f4254; padding: 0 12px; min-width: 150px;
}
.report-page .rpt-filters .select { padding-right: 30px; }
.report-page .rpt-daterow { display: flex; gap: 10px; flex-wrap: wrap; }
.report-page .rpt-date { width: 150px; text-align: center; }
.report-page .rpt-time { width: 110px; text-align: center; }
.report-page .rpt-skin-wrap { position: relative; display: inline-flex; }
.report-page .rpt-skin-wrap .select { padding-right: 50px; }
.report-page .rpt-skin-clear {
position: absolute; right: 28px; top: 50%; transform: translateY(-50%);
border: 0; background: transparent; color: #b5b9c5; cursor: pointer;
display: grid; place-items: center; padding: 2px;
}
.report-page .rpt-skin-clear:hover { color: #e9484a; }
.report-page .rpt-toggle-field { gap: 8px; }
.report-page .rpt-note {
width: 100%; color: #a1a5b7; font-size: 12.5px; font-style: italic; margin-top: 2px;
}
.report-page .rpt-actions { display: flex; flex-direction: column; gap: 12px; margin-left: auto; }
.report-page .rpt-actions-row { display: flex; gap: 14px; }
.report-page .rpt-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
height: 44px; min-width: 178px; padding: 0 20px;
border: 0; border-radius: 5px; color: #fff;
font-size: 14px; font-weight: 600; cursor: pointer;
font-family: inherit; transition: background .12s;
}
.report-page .rpt-btn--search { background: #3a3f4b; }
.report-page .rpt-btn--search:hover { background: #2b2f3a; }
.report-page .rpt-btn--export { background: #1f9d57; }
.report-page .rpt-btn--export:hover { background: #178048; }
.report-page .rpt-btn--reset { background: #e9484a; }
.report-page .rpt-btn--reset:hover { background: #d23c3e; }
/* --- Clickable username cell --- */
.report-page .rpt-user {
display: inline-flex; align-items: center; gap: 10px;
background: #f4f5f8; border: 1px solid #e9ebf1; border-radius: 5px;
padding: 6px 10px; cursor: pointer; font-weight: 700; color: #2b2f3a;
font-size: 13px; font-family: inherit;
}
.report-page .rpt-user:hover { color: var(--p-600); border-color: var(--p-300); }
.report-page .rpt-user .chev { color: #9aa0ac; }
/* --- KPI summary box (Bonus Retention) --- */
.report-page .br-kpis {
padding: 22px 26px; margin-bottom: 8px;
background: linear-gradient(180deg, #f5f7f9, #eef1f5);
border: 0; border-radius: 6px;
}
.report-page .br-kpis__grid { display: flex; }
.report-page .br-kpis__col { flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.report-page .br-kpis__col:first-child { padding-right: 48px; }
.report-page .br-kpis__col:last-child { padding-left: 48px; border-left: 1px solid #dadee5; }
.report-page .br-kpi-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.report-page .br-kpi-row .k { font-size: 14px; font-weight: 700; color: #2b2f3a; }
.report-page .br-kpi-row .v { font-size: 14px; font-weight: 700; color: #2b2f3a; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* --- Summary strip (Conversion) — dark-header mini table --- */
.report-page .conv-summary { margin-bottom: 16px; border-radius: 6px; overflow: hidden; }
.report-page .conv-summary table { width: 100%; border-collapse: collapse; }
.report-page .conv-summary th {
background: #3a4047; color: #fff; font-size: 14px; font-weight: 700;
padding: 16px 18px; text-align: center; border-right: 1px solid rgba(255,255,255,.08);
}
.report-page .conv-summary th:last-child { border-right: 0; }
.report-page .conv-summary td {
background: #eef0f3; color: #2b2f3a; font-size: 14px; font-weight: 500;
padding: 16px 18px; text-align: center; border-right: 1px solid #dfe2e7;
font-variant-numeric: tabular-nums;
}
.report-page .conv-summary td:last-child { border-right: 0; }
/* --- Center-aligned report tables --- */
.report-page .data-table th,
.report-page .data-table td { text-align: center; }
.report-page .data-table th:first-child,
.report-page .data-table td:first-child { text-align: left; }
@media (max-width: 1100px) {
.report-page .rpt-actions { margin-left: 0; width: 100%; }
.report-page .rpt-actions-row { flex-wrap: wrap; }
.report-page .br-kpis__grid { flex-direction: column; gap: 16px; }
.report-page .br-kpis__col:first-child { padding-right: 0; }
.report-page .br-kpis__col:last-child { padding-left: 0; border-left: 0; border-top: 1px solid #dadee5; padding-top: 16px; }
}
/* Blue action button (Activations modal / Bonus Programs Filter) */
.report-page .rpt-btn--blue { background: #3b82f6; }
.report-page .rpt-btn--blue:hover { background: #2563eb; }
/* ---- Budget overview block (General Overview + per-report) ---- */
.report-page .bp-budget {
display: flex; flex-wrap: wrap; align-items: center; gap: 14px 40px;
background: linear-gradient(180deg, #f5f7f9, #eef1f5); border-radius: 6px;
padding: 16px 22px; margin-bottom: 16px; position: relative;
}
.report-page .bp-budget--overview { background: linear-gradient(180deg, #eef4ff, #e3edfb); }
.report-page .bp-budget__item { display: flex; flex-direction: column; gap: 2px; }
.report-page .bp-budget__item .lbl { font-size: 12.5px; font-weight: 700; color: #5a6172; }
.report-page .bp-budget__item .val { font-size: 18px; font-weight: 700; color: #181c32; font-variant-numeric: tabular-nums; }
.report-page .bp-budget__bar { flex: 1; min-width: 160px; height: 8px; border-radius: 999px; background: #dfe3ea; overflow: hidden; }
.report-page .bp-budget__bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1f9d57, #34c97a); }
/* ---- Bonus Programs table: actions + header colour ---- */
html[data-theme="iwakiri"] .bp-table thead th { background: #28387a; }
.report-page .bp-actions { display: inline-flex; gap: 6px; justify-content: center; }
.report-page .bp-act {
width: 30px; height: 30px; border-radius: 6px; border: 1px solid transparent;
background: transparent; color: #9aa0ac; cursor: pointer; display: grid; place-items: center;
transition: all .12s;
}
.report-page .bp-act:hover { background: #eef1f6; color: #3a3f4b; }
.report-page .bp-act--report:hover { background: #e6f4ec; color: #1f9d57; }
.report-page .bp-act--danger:hover { background: #fde8e8; color: #e9484a; }
/* ---- Activations modal ---- */
.bp-modal-scrim {
position: fixed; inset: 0; z-index: 200; background: rgba(15,20,32,.5);
backdrop-filter: blur(3px); display: grid; place-items: start center; padding: 28px 18px; overflow: auto;
}
.bp-modal {
width: min(1500px, 96vw); background: #fff; border-radius: 12px;
box-shadow: 0 30px 70px -15px rgba(15,20,32,.4); padding: 20px 24px 26px;
}
.bp-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.bp-modal__title { font-size: 22px; font-weight: 700; color: #2b2f3a; letter-spacing: -0.01em; }
/* ===================================================================
Host Players module (header → Players)
=================================================================== */
.host-players .hp-list thead th { background: #28387a; }
.host-players .hp-list td { text-align: center; }
.host-players .hp-list td:nth-child(5) { text-align: left; }
.host-players .hp-balcell { display: flex; align-items: center; gap: 12px; }
.host-players .hp-balcell__lines { font-size: 12.5px; line-height: 1.5; color: #5a6172; }
.host-players .hp-balcell__lines b { color: #181c32; }
.host-players .hp-balcell__lines b.ok { color: #1f9d57; }
.host-players .hp-balcell__btns { display: inline-flex; gap: 0; border-radius: 6px; overflow: hidden; }
.host-players .hp-balcell__btns button { width: 34px; height: 34px; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; }
.host-players .hp-balcell__btns button:first-child { background: #3b82f6; }
.host-players .hp-balcell__btns button:last-child { background: #28387a; }
.host-players .hp-list-actions { display: inline-flex; gap: 6px; justify-content: center; }
/* The base action chip. It used to be `color: #fff` with NO background — so
every button without a colour modifier (impersonate, credentials, 2FA
status, info) rendered white-on-white and read as disabled or absent. The
neutral state is now a visible slate chip; --edit and --danger keep their
colours, and buttons that set their own background inline (the 2FA status
blue/red) override cleanly. */
.host-players .hp-act { width: 32px; height: 32px; border: 1px solid var(--border-default, #e4e6ef); border-radius: 6px; cursor: pointer; display: grid; place-items: center; color: #475569; background: #fff; }
.host-players .hp-act:hover { background: var(--p-50); color: var(--p-600); border-color: color-mix(in oklab, var(--p-500) 30%, transparent); }
.host-players .hp-act:disabled { opacity: .4; cursor: not-allowed; }
.host-players .hp-act--danger { background: #e9484a; color: #fff; border-color: #e9484a; }
.host-players .hp-act--danger:hover { background: #d23c3e; color: #fff; border-color: #d23c3e; }
.host-players .hp-act--edit { background: #3b82f6; color: #fff; border-color: #3b82f6; }
.host-players .hp-act--edit:hover { background: #2563eb; color: #fff; border-color: #2563eb; }
/* Edit player */
.host-players .hp-edit-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.host-players .hp-back { width: 50px; height: 50px; border: 0; border-radius: 8px; background: #28387a; color: #fff; cursor: pointer; display: grid; place-items: center; }
.host-players .hp-back:hover { background: #1f2c63; }
.host-players .hp-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid #e4e6ef; margin-bottom: 18px; }
.host-players .hp-tab {
border: 0; background: #eceef2; color: #5a6172; cursor: pointer; font-family: inherit;
font-size: 13.5px; font-weight: 600; padding: 11px 18px; border-radius: 6px 6px 0 0; margin-bottom: -1px;
}
.host-players .hp-tab:hover { color: #28387a; }
.host-players .hp-tab.active { background: #fff; color: var(--p-600); border: 1px solid #e4e6ef; border-bottom-color: #fff; }
.host-players .hp-home { display: grid; grid-template-columns: 1.7fr 1fr; gap: 18px; align-items: start; }
.host-players .hp-home__main { display: flex; flex-direction: column; gap: 18px; }
.host-players .hp-home__side { display: flex; flex-direction: column; gap: 18px; }
.host-players .hp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.host-players .hp-card { border: 1px solid #e9ebf1; border-radius: 8px; padding: 18px 20px; background: #fff; }
.host-players .hp-card__title { font-size: 16px; font-weight: 700; color: #28387a; margin-bottom: 14px; }
.host-players .hp-form { display: flex; flex-direction: column; gap: 6px; }
.host-players .hp-form .input { margin-bottom: 6px; }
.host-players .hp-grid2 { display: grid; grid-template-columns: 110px 1fr; gap: 10px 14px; align-items: center; }
.host-players .hp-grid2 .form-label { margin: 0; }
.host-players .hp-pwd { position: relative; display: flex; }
.host-players .hp-pwd .input { flex: 1; padding-right: 44px; }
.host-players .hp-pwd .hp-eye { position: absolute; right: 0; top: 0; bottom: 0; width: 40px; border: 0; background: #28387a; color: #fff; border-radius: 0 4px 4px 0; cursor: pointer; }
.host-players .hp-info { background: #f5f7f9; }
.host-players .hp-info__row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid #e4e6ef; font-size: 13px; }
.host-players .hp-info__row:last-child { border-bottom: 0; }
.host-players .hp-info__row .k { color: #5a6172; font-weight: 500; }
.host-players .hp-info__row .v { color: #181c32; font-weight: 700; }
.host-players .hp-bal { display: flex; align-items: center; gap: 8px; padding: 11px 0; border-bottom: 1px solid #eef0f3; font-size: 13.5px; font-weight: 600; color: #3f4254; }
.host-players .hp-bal:last-child { border-bottom: 0; }
.host-players .hp-bal b { margin-left: auto; color: #181c32; }
.host-players .hp-bal .dot { width: 10px; height: 10px; border-radius: 999px; }
.host-players .hp-assign { background: #f0a020; color: #fff; border: 0; border-radius: 6px; padding: 13px 28px; font-size: 14px; font-weight: 700; letter-spacing: .03em; cursor: pointer; font-family: inherit; }
.host-players .hp-assign:hover { background: #db8e15; }
.host-players .hp-setting { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid #eef0f3; font-size: 13.5px; color: #3f4254; }
.host-players .hp-setting:last-child { border-bottom: 0; }
.host-players .hp-save { width: 100%; margin-top: 18px; background: #28387a; color: #fff; border: 0; border-radius: 6px; padding: 16px; font-size: 15px; font-weight: 700; letter-spacing: .05em; cursor: pointer; font-family: inherit; }
.host-players .hp-save:hover { background: #1f2c63; }
/* Transactions / History tabs */
.host-players .hp-txfilters .rpt-actions { margin-left: auto; }
.host-players .hp-in { color: #1f9d57; font-weight: 600; }
.host-players .hp-out { color: #e9484a; font-weight: 600; }
.host-players .hp-list tfoot .hp-total td { background: #3a1c91; color: #fff; font-weight: 700; font-size: 13px; }
.host-players .hp-entries { text-align: right; padding: 10px 4px; font-size: 12px; color: var(--text-tertiary); }
/* History tab — cell treatments (kept plain like the live platform, but tidy) */
.host-players .hp-history td { vertical-align: middle; padding-top: 11px; padding-bottom: 11px; }
.host-players .hp-history .hp-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px; color: #5a6172; }
.host-players .hp-history .hp-desc { text-align: left; font-size: 12px; color: #3f4254; max-width: 560px; }
.host-players .hp-history .hp-ref { text-align: left; letter-spacing: .01em; }
.host-players .hp-list.hp-history td.hp-amt { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.host-players .hp-list.hp-history td.hp-amt.pos { color: #1f9d57; }
.host-players .hp-list.hp-history td.hp-amt.neg { color: #e9484a; }
.host-players .hp-list.hp-history td.hp-bal { text-align: right; font-weight: 600; color: #181c32; font-variant-numeric: tabular-nums; white-space: nowrap; }
.host-players .hp-history .hp-date { white-space: nowrap; font-size: 12.5px; color: #5a6172; }
.host-players .hp-history thead th:nth-child(5), .host-players .hp-history thead th:nth-child(6) { text-align: right; }
/* Footer: Show N entries + numbered page switcher */
.host-players .hp-pager { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 4px; }
.host-players .hp-pager__show { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #5a6172; }
.host-players .hp-pager__show .select { width: auto; min-width: 72px; padding: 6px 10px; }
.host-players .hp-pager__range { margin-left: 8px; color: var(--text-tertiary); font-size: 12.5px; }
.host-players .hp-pager__pages { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.host-players .hp-pg-num, .host-players .hp-pg-arrow {
min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid #e4e6ef; background: #fff; color: #3f4254;
border-radius: 7px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600;
display: inline-grid; place-items: center; transition: background .12s, border-color .12s, color .12s;
}
.host-players .hp-pg-num:hover:not(.active), .host-players .hp-pg-arrow:hover:not(:disabled) { background: #eef1f7; border-color: #cfd4e4; }
.host-players .hp-pg-num.active { background: #28387a; border-color: #28387a; color: #fff; cursor: default; }
.host-players .hp-pg-arrow:disabled { opacity: .45; cursor: not-allowed; }
.host-players .hp-pg-ellipsis { padding: 0 4px; color: var(--text-tertiary); }
/* Deposit → Transfer */
.host-players .hp-transfer { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: start; }
.host-players .hp-transfer__bal { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #eef0f3; border-radius: 8px; overflow: hidden; }
.host-players .hp-transfer__bal > div { display: flex; justify-content: space-between; gap: 12px; padding: 13px 15px; border-bottom: 1px solid #eef0f3; font-size: 13px; }
.host-players .hp-transfer__bal > div:nth-child(odd) { border-right: 1px solid #eef0f3; }
.host-players .hp-transfer__bal span { color: #5a6172; }
.host-players .hp-transfer__bal b { color: var(--p-700); display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 1000px) {
.host-players .hp-home { grid-template-columns: 1fr; }
.host-players .hp-two { grid-template-columns: 1fr; }
.host-players .hp-transfer { grid-template-columns: 1fr; }
}
/* ===================================================================
Host Dashboard (header → Dashboard)
=================================================================== */
.host-dashboard .hd-kpis { display: flex; flex-direction: column; gap: 22px; margin-bottom: 22px; }
.host-dashboard .hd-row { display: flex; align-items: stretch; gap: 0; }
.host-dashboard .hd-conn { width: 26px; align-self: center; border-top: 3px solid #28387a; opacity: .85; }
.host-dashboard .hd-card {
flex: 1; border-radius: 10px; padding: 20px 22px; min-height: 96px;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
box-shadow: 0 6px 16px -8px rgba(15,20,32,.25);
}
.host-dashboard .hd-card--muted { background: #eef0f3; color: #28387a; }
.host-dashboard .hd-card--blue { background: #28387a; color: #fff; }
.host-dashboard .hd-card__head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; justify-content: center; }
.host-dashboard .hd-card--muted .hd-card__head { color: #28387a; }
.host-dashboard .hd-card__val { font-size: 30px; font-weight: 800; text-align: center; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.host-dashboard .hd-card--muted .hd-card__val { color: #28387a; }
.host-dashboard .hd-scope { border: 0; border-radius: 5px; padding: 4px 8px; font-size: 12px; font-weight: 600; background: #fff; color: #28387a; cursor: pointer; }
.host-dashboard .hd-promo { display: grid; grid-template-columns: 1fr 2.4fr; gap: 16px; margin-bottom: 22px; }
.host-dashboard .hd-promo__code, .host-dashboard .hd-promo__aff { border: 1px dashed #c9cdd8; border-radius: 8px; padding: 16px 18px; background: #fafbfc; }
.host-dashboard .hd-promo__aff { border-style: solid; border-color: #e9ebf1; }
.host-dashboard .hd-promo__label { color: var(--p-600); font-weight: 700; font-size: 14px; text-align: center; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; justify-content: center; }
.host-dashboard .hd-promo__toprow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.host-dashboard .hd-promo__toprow .hd-promo__label { margin: 0; }
.host-dashboard .hd-promo__linkrow { display: flex; gap: 8px; }
.host-dashboard .hd-promo__linkrow .input { flex: 1; }
.host-dashboard .hd-qr { background: #3a3f4b; color: #fff; border: 0; border-radius: 6px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.host-dashboard .hd-copy { width: 42px; border: 0; border-radius: 6px; background: #28387a; color: #fff; cursor: pointer; display: grid; place-items: center; }
.host-dashboard .hd-section { background: #fff; border: 1px solid #e9ebf1; border-radius: 8px; margin-bottom: 18px; overflow: hidden; }
.host-dashboard .hd-section__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: #f1f3f7; }
.host-dashboard .hd-section__head > span:first-child { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #28387a; }
.host-dashboard .hd-section__sub { font-size: 13px; color: #7a8194; }
.host-dashboard .hd-section__body { display: grid; grid-template-columns: 320px 1fr; gap: 20px; padding: 20px; align-items: center; }
.host-dashboard .hd-section__range { text-align: center; font-size: 12.5px; color: #7a8194; margin-bottom: 6px; }
.host-dashboard .hd-statbox { border: 1px solid #eef0f3; border-radius: 8px; box-shadow: 0 4px 14px -8px rgba(15,20,32,.2); overflow: hidden; }
.host-dashboard .hd-statbox__row { display: grid; grid-template-columns: 1fr 1fr; }
.host-dashboard .hd-statbox__row > div { padding: 18px 16px; text-align: center; border-bottom: 1px solid #eef0f3; }
.host-dashboard .hd-statbox__row:last-child > div { border-bottom: 0; }
.host-dashboard .hd-statbox__row > div:first-child { border-right: 1px solid #eef0f3; }
.host-dashboard .hd-statbox .l { font-size: 13px; color: #7a8194; margin-bottom: 6px; }
.host-dashboard .hd-statbox .v { font-size: 20px; font-weight: 700; color: #3f4254; }
.host-dashboard .hd-chart__x { display: flex; justify-content: space-between; padding: 4px 0 0 40px; font-size: 11px; color: #7a8194; }
.host-dashboard .hd-chart__legend { display: flex; gap: 18px; justify-content: center; margin-top: 10px; font-size: 12.5px; color: #5a6172; }
.host-dashboard .hd-chart__legend span { display: inline-flex; align-items: center; gap: 6px; }
.host-dashboard .hd-chart__legend i { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
@media (max-width: 1000px) {
.host-dashboard .hd-row { flex-direction: column; gap: 12px; }
.host-dashboard .hd-conn { display: none; }
.host-dashboard .hd-promo { grid-template-columns: 1fr; }
.host-dashboard .hd-section__body { grid-template-columns: 1fr; }
}
/* ===================================================================
Sport coupons (top-level + user editor tab)
=================================================================== */
.host-sc .sc-filters .rpt-field { min-width: 150px; }
.host-sc .hp-list thead th { background: #28387a; }
.host-sc .sc-bars { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; margin-top: 14px; position: sticky; bottom: 0; }
.host-sc .sc-bar { display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 18px; color: #fff; }
.host-sc .sc-bar .l { font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.host-sc .sc-bar .v { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.host-sc .sc-bar .s { font-size: 11px; opacity: .85; }
.host-sc .sc-bar--bet { background: #1f9d57; }
.host-sc .sc-bar--win { background: #e9484a; }
.host-sc .sc-bar--profit { background: #e6a82c; }
/* ===================================================================
Users — financial matrix + provider integration badge
=================================================================== */
.host-users .hu-fin thead th { text-align: center; }
.host-users .hu-fin thead th:first-child { text-align: left; background: #28387a; }
.host-users .hu-fin td { text-align: center; }
.host-users .hu-fin td:first-child { text-align: left; font-weight: 600; }
.host-users .hu-integ { display: inline-block; background: #4b1fb3; color: #fff; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 5px; }
.host-users .hp-list thead th { background: #28387a; }
/* ===================================================================
Deposit (top-level Transfer)
=================================================================== */
.host-deposit .hd-transfer { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; }
.host-deposit .hd-transfer__side { background: #f6f7f9; border: 1px solid #eef0f3; border-radius: 8px; padding: 16px; }
.host-deposit .hd-transfer__label { color: var(--p-600); font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.host-deposit .hd-transfer__sel { font-size: 13px; color: #3f4254; padding: 6px 0; border-bottom: 1px solid #e4e6ef; }
.host-deposit .hd-transfer__bal > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #eef0f3; font-size: 12.5px; }
.host-deposit .hd-transfer__bal > div:last-child { border-bottom: 0; }
.host-deposit .hd-transfer__bal span { color: #5a6172; }
.host-deposit .hd-transfer__bal b { color: var(--p-700); display: inline-flex; align-items: center; gap: 5px; }
.host-deposit .hd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1000px) { .host-deposit .hd-transfer { grid-template-columns: 1fr; } .host-sc .sc-bars { grid-template-columns: 1fr; } }
/* ===================================================================
Standard reports (Players Report, Betting, Bet type, Daily, etc.)
=================================================================== */
.host-report .hp-list thead th { background: #28387a; }
.host-report .rp-profit { color: #fff; font-weight: 700; }
.host-report .rp-profit.pos { background: #1f9d57; }
.host-report .rp-profit.neg { background: #e9484a; }
.host-report tfoot .rp-totals td { background: #3a4047; color: #fff; font-weight: 700; }
.host-report tfoot .rp-totals td.rp-profit.pos { background: #15803d; }
.host-report tfoot .rp-totals td.rp-profit.neg { background: #c0392b; }
.host-report .bt-badge { display: inline-grid; place-items: center; width: 26px; height: 20px; background: #4b1fb3; color: #fff; border-radius: 4px; font-weight: 700; font-size: 12px; }
.host-report .rp-page { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 5px; background: #eef0f3; color: #3f4254; font-weight: 600; cursor: pointer; }
.host-report .rp-page.active { background: #4b1fb3; color: #fff; }
/* ---- Dark network tables (Commissions / Cost / NetWin) ---- */
.cr-report .cr-table { background: #16233f; border-radius: 6px; overflow: hidden; padding-bottom: 6px; }
.cr-report .cr-period { background: #16233f; color: #cdd6e6; text-align: center; padding: 12px; font-size: 13px; }
.cr-report .cr-period b { color: #fff; }
.cr-report .cr-section { background: #16233f; color: #fff; font-weight: 700; padding: 12px 16px; font-size: 15px; }
.cr-report .cr-row { display: flex; align-items: stretch; gap: 6px; padding: 6px 10px; background: #16233f; }
.cr-report .cr-name { width: 190px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; color: #fff; padding: 6px 10px; }
.cr-report .cr-row--admin .cr-name { background: #0b1322; border-radius: 4px; }
.cr-report .cr-name small { display: block; font-size: 10px; color: #8a93a8; }
.cr-report .cr-name span { font-weight: 600; font-size: 13px; line-height: 1.2; }
.cr-report .cr-cell { flex: 1; min-width: 90px; background: #fff; border-radius: 3px; padding: 7px 8px; text-align: center; font-size: 12px; font-weight: 700; color: #2b2f3a; display: flex; flex-direction: column; justify-content: center; box-shadow: inset 0 -3px 0 rgba(0,0,0,.07); }
.cr-report .cr-cell small { font-size: 9px; color: #8a93a8; font-weight: 500; margin-bottom: 3px; }
.cr-report .cr-cell--profit, .cr-report .cr-cell--np { background: #3aa564; color: #fff; }
.cr-report .cr-cell--profit small, .cr-report .cr-cell--np small { color: rgba(255,255,255,.82); }
.cr-report .cr-cell--loss { background: #d6453f; color: #fff; }
.cr-report .cr-cell--loss small { color: rgba(255,255,255,.85); }
.cr-report .cr-costi { color: #e9484a; font-size: 10px; font-weight: 700; margin-top: 2px; }
.cr-report .cr-bizlink { background: none; border: 0; color: #2f6df0; font-weight: 600; cursor: pointer; font-size: 12px; }
.cr-report .cr-expand { width: 40px; flex-shrink: 0; border: 0; background: #2f6df0; color: #fff; border-radius: 3px; cursor: pointer; display: grid; place-items: center; }
/* ===================================================================
Settings / Commissions / CMS sub-pages
=================================================================== */
.host-settings .hp-list thead th, .host-comm .hp-list thead th, .host-cms .hp-list thead th { background: #28387a; }
/* Vendor group dual-list */
.vg-dual { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.vg-list { border: 1px solid #e4e6ef; border-radius: 6px; overflow: hidden; }
.vg-list .input { width: 100%; border: 0; border-bottom: 1px solid #e4e6ef; border-radius: 0; }
.vg-list__items { max-height: 240px; overflow: auto; }
.vg-item { padding: 9px 12px; font-size: 13px; cursor: pointer; border-bottom: 1px solid #f0f1f5; color: #3f4254; }
.vg-item:hover { background: var(--p-50); }
.vg-item--sel { background: #eef4ff; }
.vg-swap { color: #9aa0ac; }
/* Commission GGR tier cards */
.host-comm .cm-ggr { background: #fff; border: 1px solid #eef0f3; border-radius: 8px; padding: 16px; box-shadow: 0 4px 14px -8px rgba(15,20,32,.18); }
.host-comm .cm-ggr__title { font-size: 18px; font-weight: 700; color: var(--p-600); }
.host-comm .cm-ggr__sub { font-size: 13px; color: #7a8194; margin-bottom: 12px; }
.host-comm .cm-tier { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; background: #f6f7f9; border-radius: 6px; padding: 6px; }
.host-comm .cm-tier__lbl { background: #28387a; color: #fff; border-radius: 5px; padding: 8px 12px; font-size: 12px; font-weight: 700; }
.host-comm .cm-tier .input { width: 80px; }
.host-comm .cm-tier__pct { width: 70px !important; margin-left: auto; }
.host-comm .cm-tier__pctlbl { background: #28387a; color: #fff; border-radius: 5px; padding: 8px 12px; font-size: 12px; font-weight: 700; }
.host-comm .cm-eventi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; align-content: start; }
/* CMS modal/editor bits */
.host-cms .cb-sec, .bp-modal .cb-sec { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #9aa0ac; border-bottom: 1px solid #eef0f3; padding: 14px 0 8px; margin: 8px 0 12px; }
.cb-editor { border: 1px solid #e4e6ef; border-radius: 6px; overflow: hidden; }
.cb-editor__bar { display: flex; gap: 4px; padding: 8px 10px; border-bottom: 1px solid #e4e6ef; background: #f8f9fb; color: #5a6172; font-size: 13px; }
.cb-editor__bar span { padding: 2px 7px; border-radius: 4px; cursor: pointer; }
.cb-editor__bar span:hover { background: #e9ebf1; }
.cb-editor__area { width: 100%; border: 0; padding: 12px; font-family: inherit; font-size: 13px; resize: vertical; }
.cb-langs { display: flex; gap: 18px; flex-wrap: wrap; border-bottom: 1px solid #e4e6ef; }
.cb-langs span { padding: 8px 2px; font-size: 13px; color: #7a8194; cursor: pointer; border-bottom: 2px solid transparent; }
.cb-langs span.active { color: var(--p-700); font-weight: 600; border-bottom-color: var(--p-600); }
.bp-modal .cb-banner { border: 1px solid #eef0f3; border-radius: 8px; padding: 14px; margin-bottom: 12px; }
.bp-modal .cb-preview { width: 90px; height: 110px; border-radius: 8px; flex-shrink: 0; }
/* ---- Filter chrome polish (applies to all of today's report filters) ---- */
.report-page .rpt-filters { box-shadow: inset 0 0 0 1px #e4e6ef; }
.report-page .rpt-filters .input:focus,
.report-page .rpt-filters .select:focus { border-color: var(--p-400); box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-500) 14%, transparent); outline: 0; }
.report-page .rpt-filters .input:hover,
.report-page .rpt-filters .select:hover { border-color: #c9cdd8; }
.report-page .rpt-btn { box-shadow: 0 1px 2px rgba(15,20,32,.12); transition: background .12s, transform .04s; }
.report-page .rpt-btn:active { transform: translateY(1px); }
/* ---- Summary table: bonus + converted cells ---- */
.report-page .sm-table .sm-bonus { font-weight: 600; color: #7c3aed; }
.report-page .sm-table .sm-conv { color: #fff; font-weight: 700; text-align: center !important; }
.report-page .sm-table .sm-conv--pos { background: #1f9d57; }
.report-page .sm-table .sm-conv--neg { background: #e9484a; }
.report-page .sm-table tfoot .sm-totals td { position: sticky; bottom: 0; background: #f1f3f7; font-weight: 700; border-top: 2px solid #d7dbe3; }
.report-page .sm-table tfoot .sm-totals td.sm-conv { background: #15803d; }
/* ===== Host Skins — multi-tab "Edit skin" editor ===== */
.host-skins .sk-tabs { margin-bottom: 22px; }
.host-skins .sk-row { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 16px; margin-bottom: 14px; }
.host-skins .sk-row .form-label { margin: 0; font-weight: 600; font-size: 13px; }
.host-skins .sk-settings td { padding: 10px 14px; vertical-align: middle; }
.host-skins .sk-settings tbody tr:nth-child(even) { background: #fafbfd; }
.host-skins .sk-settings td:first-child { font-weight: 600; color: #3f4254; }
/* toolbar above tables (Add item, Select all, Remove/Apply) */
.host-skins .sk-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.report-page .rpt-btn--green { background: #1f9d57; }
.report-page .rpt-btn--green:hover { background: #178048; }
.report-page .rpt-btn--danger { background: #e9484a; }
.report-page .rpt-btn--danger:hover { background: #d23c3e; }
/* Sidebar tab */
.host-skins .sk-sidebar-row { display: grid; grid-template-columns: 1fr 1fr 140px 40px; gap: 10px; align-items: center; margin-bottom: 10px; }
.host-skins .sk-divider-row { display: flex; align-items: center; justify-content: space-between; background: #f1f3f7; border: 1px dashed #c7cde0; border-radius: 6px; padding: 10px 14px; margin-bottom: 10px; font-weight: 600; color: #7a8199; }
/* Games — label chip */
.host-skins .sk-label-chip { display: inline-block; background: #fde68a; color: #92400e; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
/* Subcategories — accordion + dropzone */
.host-skins .sk-accordion { border: 1px solid #e4e6ef; border-radius: 8px; overflow: hidden; }
.host-skins .sk-accordion-head { width: 100%; display: flex; align-items: center; gap: 8px; background: #f1f3f7; border: 0; padding: 14px 16px; font-size: 14px; font-weight: 700; color: #28387a; cursor: pointer; font-family: inherit; }
.host-skins .sk-accordion-body { padding: 16px; }
.host-skins .sk-dropzone { border: 2px dashed #c7cde0; border-radius: 8px; padding: 30px; text-align: center; color: #7a8199; cursor: pointer; margin-bottom: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: border-color .12s, background .12s; }
.host-skins .sk-dropzone:hover { border-color: #28387a; background: #f7f9ff; }
/* Graphic — image cards */
.host-skins .sk-img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.host-skins .sk-img-label { font-size: 13px; font-weight: 600; color: #3f4254; margin-bottom: 8px; }
.host-skins .sk-img-box { position: relative; width: 160px; height: 150px; background: #e9ecf3; border-radius: 6px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(15,20,32,.1); }
.host-skins .sk-img-edit { position: absolute; top: -10px; right: -10px; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1px solid #e4e6ef; box-shadow: 0 1px 4px rgba(15,20,32,.15); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #7a8199; }
.host-skins .sk-img-ph { width: 60px; height: 48px; background:
linear-gradient(135deg, transparent 45%, #8a90a3 45%, #8a90a3 60%, transparent 60%),
radial-gradient(circle at 72% 28%, #8a90a3 7px, transparent 8px);
border: 3px solid #8a90a3; border-radius: 4px; }
/* Domains tab */
.host-skins .sk-domain-row { display: grid; grid-template-columns: 1fr 1fr 44px 48px; gap: 14px; align-items: center; margin-bottom: 14px; }
.host-skins .sk-domain-chk { display: flex; justify-content: center; }
.host-skins .sk-domain-chk input { width: 22px; height: 22px; }
.host-skins .sk-domain-del { width: 44px; height: 40px; background: #e9484a; color: #fff; border: 0; border-radius: 6px; font-size: 20px; font-weight: 700; cursor: pointer; }
.host-skins .sk-domain-del:hover { background: #d23c3e; }
.host-skins .sk-domain-new { text-align: right; margin: 6px 92px 0 0; }
.host-skins .sk-domain-new button { background: none; border: 0; color: #3b82f6; font-weight: 600; cursor: pointer; font-family: inherit; font-size: 13px; }
.host-skins .hp-save--block { max-width: 760px; margin-left: auto; margin-right: auto; display: block; }
/* ===== Host Skins — extended tabs (methods, limits, financial, faq, footer, seo) ===== */
.host-skins .sk-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.host-skins .sk-field .form-label { margin: 0; font-weight: 600; font-size: 13px; color: var(--p-600); }
.host-skins .sk-hint { font-size: 11.5px; color: #9aa1b4; }
.host-skins .sk-hint code { background: #fdeaf1; color: #d6336c; padding: 1px 5px; border-radius: 4px; font-size: 11px; }
/* Deposit / Withdrawal methods + financial + limits tables: navy headers, centered */
.host-skins .sk-methods th, .host-skins .sk-fin th, .host-skins .sk-limits th { background: #28387a; color: #fff; }
.host-skins .sk-methods td, .host-skins .sk-fin td, .host-skins .sk-limits td { padding: 10px 12px; vertical-align: middle; }
.host-skins .sk-amt { width: 100%; max-width: 150px; text-align: center; margin: 0 auto; }
.host-skins .sk-amt--off { background: #f1f3f7; color: #aab; }
/* Limits +/- mini buttons */
.host-skins .sk-limit-btns { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.host-skins .sk-mini { width: 34px; height: 30px; border: 0; border-radius: 5px; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
.host-skins .sk-mini--add { background: #1f9d57; }
.host-skins .sk-mini--del { background: #e9484a; }
/* FAQ & FOOTER card */
.host-skins .sk-faq-card { border: 1px solid #e4e6ef; border-radius: 12px; padding: 28px; max-width: 1240px; }
.host-skins .sk-faq-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.host-skins .sk-faq-title { font-size: 22px; font-weight: 800; color: #1f2c5c; }
.host-skins .sk-seg { display: inline-flex; gap: 6px; background: #f1f3f7; padding: 4px; border-radius: 8px; }
.host-skins .sk-seg button { border: 0; background: none; padding: 8px 18px; border-radius: 6px; font-weight: 600; font-size: 13px; color: #5a6076; cursor: pointer; font-family: inherit; }
.host-skins .sk-seg button.active { background: #3b82f6; color: #fff; }
.host-skins .sk-faq-langs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.host-skins .sk-faq-lang { border: 1px solid #e4e6ef; background: #fff; border-radius: 7px; padding: 8px 14px; font-size: 12.5px; font-weight: 500; color: #5a6076; cursor: pointer; font-family: inherit; }
.host-skins .sk-faq-lang.active { border-color: #3b82f6; color: #2563eb; box-shadow: 0 0 0 1px #3b82f6 inset; }
.host-skins .sk-faq-qa { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; background: #f8f9fc; border: 1px solid #eceef4; border-radius: 10px; padding: 20px; }
/* FOOTER (API) nested groups */
.host-skins .sk-footer-group { margin-bottom: 16px; }
.host-skins .sk-footer-grouphead, .host-skins .sk-footer-item { display: flex; align-items: center; gap: 8px; border: 1px solid #e4e6ef; border-radius: 8px; padding: 12px 14px; background: #fff; box-shadow: 0 1px 3px rgba(15,20,32,.05); }
.host-skins .sk-footer-grouphead { font-size: 14px; }
.host-skins .sk-footer-items { margin: 10px 0 0 28px; display: flex; flex-direction: column; gap: 10px; }
.host-skins .sk-footer-actions { margin-left: auto; display: flex; gap: 6px; }
.host-skins .sk-drag { color: #aab; cursor: grab; }
.host-skins .sk-link-ic { color: #9aa1b4; }
.host-skins .sk-footer-path { color: #9aa1b4; font-size: 12.5px; }
.host-skins .sk-newitem { background: none; border: 0; color: #3b82f6; font-weight: 600; font-size: 12.5px; cursor: pointer; font-family: inherit; margin: 8px 0 0 4px; display: inline-flex; align-items: center; gap: 4px; }
/* SEO content blocks */
.host-skins .sk-seo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 36px; max-width: 1200px; }
.host-skins .sk-seo-trans { margin-top: 18px; border-top: 1px solid #eceef4; padding-top: 18px; }
.host-skins .sk-seo-trans-head { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #3f4254; margin-bottom: 14px; }
.host-skins .sk-rte { border: 1px solid #e4e6ef; border-radius: 8px; overflow: hidden; }
.host-skins .sk-rte-bar { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid #eceef4; background: #fafbfd; }
.host-skins .sk-rte-bar button { width: 30px; height: 28px; border: 0; background: none; border-radius: 5px; cursor: pointer; color: #5a6076; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.host-skins .sk-rte-bar button:hover { background: #eceef4; }
.host-skins .sk-rte-sep { width: 1px; height: 18px; background: #e4e6ef; margin: 0 4px; }
.host-skins .sk-rte-area { width: 100%; border: 0; padding: 14px; font-family: inherit; font-size: 13.5px; resize: vertical; outline: none; }
.host-skins .sk-chip-active { background: #1f9d57; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 10px; }
.host-skins .sk-chip-off { background: #adb5bd; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 10px; }
/* ===== Host CMS — Game categories / subcategories / labels / import / providers / oauth ===== */
.host-skins .cg-list th { background: #28387a; color: #fff; }
.host-skins .cg-list td { padding: 12px 14px; vertical-align: middle; }
.host-skins .cg-namebtn { background: none; border: 0; color: #2b3a78; font-weight: 700; cursor: pointer; font-family: inherit; font-size: 13.5px; display: inline-flex; align-items: center; gap: 4px; }
.host-skins .cg-namebtn:hover { color: #3b82f6; }
.host-skins .cg-acts { display: flex; gap: 6px; justify-content: center; }
.host-skins .cg-act { width: 36px; height: 30px; border: 0; border-radius: 5px; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.host-skins .cg-act--del { background: #e9484a; }
.host-skins .cg-act--edit { background: #3b82f6; }
.host-skins .cg-thumb { display: inline-block; width: 44px; height: 32px; border-radius: 4px; background: #e9ecf3; }
.host-skins .cg-logo { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 4px; background: #1b1f2a; color: #fff; font-weight: 800; font-size: 14px; }
.host-skins .cg-yes { color: #1f9d57; font-weight: 700; }
.host-skins .cg-pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 5px; }
.host-skins .cg-pill--green { background: #1f9d57; color: #fff; }
.host-skins .cg-chip-imported { background: #19b36b; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 4px; }
.host-skins .cg-link { background: none; border: 0; color: #5a6076; font-weight: 600; font-size: 12.5px; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; }
/* Game import integration grid */
.host-skins .cg-integ-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.host-skins .cg-integ { background: #4a5d97; color: #fff; border: 0; border-radius: 6px; padding: 26px; font-size: 18px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background .12s; }
.host-skins .cg-integ:hover { background: #3a4d87; }
/* OAuth chips */
.host-skins .cg-type-chip { background: #7c3aed; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 5px; }
.host-skins .cg-clientid { font-family: "JetBrains Mono", monospace; font-size: 12px; color: #d6336c; background: #fdeaf1; padding: 3px 8px; border-radius: 4px; }
.host-skins .cg-scope { background: #dbeafe; color: #1d4ed8; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 5px; }
/* CMS modal (Modifica …) */
.cg-modal { background: #fff; border-radius: 10px; width: 640px; max-width: calc(100vw - 32px); max-height: calc(100vh - 60px); display: flex; flex-direction: column; box-shadow: 0 18px 60px rgba(15,20,32,.4); }
.cg-modal--wide { width: 1080px; }
.cg-modal-title { font-size: 22px; font-weight: 800; color: #1f2c5c; padding: 24px 28px 6px; }
.cg-modal-body { padding: 6px 28px 12px; overflow-y: auto; }
.cg-modal-foot { display: flex; gap: 16px; padding: 16px 28px 22px; }
.cg-btn { flex: 1; border: 0; border-radius: 7px; padding: 15px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; color: #fff; }
.cg-btn--close { background: #d6322f; }
.cg-btn--save { background: #3b9cf6; }
.cg-section { font-size: 16px; font-weight: 700; color: #3f4254; margin: 12px 0 14px; }
.cg-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; }
/* dual list inside CMS modals */
.cg-dual { display: grid; grid-template-columns: 1fr 44px 1fr; align-items: center; gap: 8px; }
.cg-dual-box { border: 1px solid #d7dbe3; border-radius: 6px; height: 200px; overflow-y: auto; background: #fff; }
.cg-dual-row { padding: 8px 12px; font-size: 13px; cursor: pointer; border-bottom: 1px solid #f1f3f7; }
.cg-dual-row:hover { background: #eef3ff; }
.cg-dual-row--sel { background: #f7fbff; }
.cg-dual-mid { display: flex; justify-content: center; color: #9aa1b4; }
/* ===== Host header pages — Deposits / Withdrawals / Messages ===== */
.host-fm .fm-filters { background: #eef0f5; border-radius: 10px; padding: 18px 20px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 16px; }
.host-fm .fm-filt-grid { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 16px; align-items: end; }
.host-fm .fm-filters .rpt-field label { color: #2b3a78; font-weight: 700; font-size: 12.5px; margin-bottom: 6px; display: block; }
.host-fm .fm-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.host-fm .fm-filt-btns { display: flex; flex-direction: column; gap: 10px; }
.host-fm .fm-filt-btns .rpt-btn { height: 42px; }
.host-fm .fm-table td { vertical-align: middle; font-size: 12.5px; }
.host-fm .fm-date { white-space: nowrap; }
.host-fm .fm-status { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.host-fm .fm-chip { font-size: 11px; font-weight: 700; padding: 4px 14px; border-radius: 5px; color: #fff; }
.host-fm .fm-chip--approved { background: #1f9d57; }
.host-fm .fm-chip--rejected { background: #e9484a; }
.host-fm .fm-chip--pending { background: #f0a020; }
.host-fm .fm-status-sub { font-size: 10.5px; color: #9aa1b4; text-align: center; line-height: 1.4; }
.host-fm .fm-pd { display: flex; flex-direction: column; gap: 6px; min-width: 280px; }
.host-fm .fm-pd-row { display: grid; grid-template-columns: 1fr 1fr 32px; align-items: center; border: 1px solid #e4e6ef; border-radius: 6px; overflow: hidden; }
.host-fm .fm-pd-label { padding: 8px 10px; font-size: 11.5px; color: #5a6076; background: #f8f9fc; border-right: 1px solid #e4e6ef; }
.host-fm .fm-pd-val { padding: 8px 10px; font-size: 11.5px; font-weight: 600; color: #3f4254; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.host-fm .fm-copy { background: #f1f3f7; border: 0; border-left: 1px solid #e4e6ef; height: 100%; cursor: pointer; color: #5a6076; }
.host-fm .fm-last { white-space: nowrap; font-weight: 600; }
.host-fm .fm-last div { font-size: 10.5px; color: #9aa1b4; font-weight: 400; }
.host-fm .fm-decline { color: #e9484a; font-style: italic; max-width: 200px; }
.host-fm .fm-zoom { color: #9aa1b4; cursor: pointer; }
/* New message modal */
.host-fm .fm-seg2, .fm-seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 6px; overflow: hidden; border: 1px solid #d7dbe3; }
.fm-seg2 button { border: 0; background: #f1f3f7; padding: 12px; font-weight: 700; font-size: 13px; color: #5a6076; cursor: pointer; font-family: inherit; }
.fm-seg2 button.active { background: #28387a; color: #fff; }
.fm-checks { display: flex; gap: 32px; margin-top: 10px; }
.fm-checks label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #3f4254; }
/* ===== Bonus Retention — elevated KPI stat widgets + budget bar ===== */
.bonus-retention .br-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 4px 0 16px; }
.bonus-retention .br-stat { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #e9ecf3; border-radius: 12px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(15,20,32,.05); position: relative; overflow: hidden; transition: transform .12s, box-shadow .12s; }
.bonus-retention .br-stat:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,20,32,.10); }
.bonus-retention .br-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--br-accent, #3b82f6); }
.bonus-retention .br-stat-ic { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--br-accent, #3b82f6); flex-shrink: 0; }
.bonus-retention .br-stat-v { font-size: 22px; font-weight: 800; color: #1f2c5c; line-height: 1.1; letter-spacing: -.01em; }
.bonus-retention .br-stat-k { font-size: 11.5px; font-weight: 600; color: #8a90a3; margin-top: 3px; text-transform: uppercase; letter-spacing: .03em; }
.bonus-retention .br-stat--a { --br-accent: #3b82f6; }
.bonus-retention .br-stat--b { --br-accent: #6366f1; }
.bonus-retention .br-stat--c { --br-accent: #0ea5e9; }
.bonus-retention .br-stat--d { --br-accent: #14b8a6; }
.bonus-retention .br-stat--e { --br-accent: #1f9d57; }
.bonus-retention .br-stat--f { --br-accent: #f0a020; }
.bonus-retention .br-stat--g { --br-accent: #8b5cf6; }
.bonus-retention .br-budget { background: linear-gradient(180deg,#fff,#f8faff); border: 1px solid #e3e9f7; border-radius: 12px; padding: 18px 22px; margin-bottom: 14px; }
.bonus-retention .br-budget-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.bonus-retention .br-budget-k { font-size: 11.5px; font-weight: 600; color: #8a90a3; text-transform: uppercase; letter-spacing: .03em; }
.bonus-retention .br-budget-v { font-size: 20px; font-weight: 800; color: #1f2c5c; margin-top: 2px; }
.bonus-retention .br-budget-v--accent { color: #1f9d57; }
.bonus-retention .br-budget-bar { height: 12px; border-radius: 999px; background: #e6eaf2; overflow: hidden; }
.bonus-retention .br-budget-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg,#22c55e,#16a34a); transition: width .5s ease; }
.bonus-retention .br-budget-sub { font-size: 12px; color: #8a90a3; margin-top: 8px; }
/* ===== Conversion — elevated summary stat widgets + gauge ===== */
.conversion .cv-stats { display: grid; grid-template-columns: 1fr 1fr 1.1fr 1.6fr; gap: 14px; margin: 4px 0 18px; }
.conversion .cv-stat { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #e9ecf3; border-radius: 12px; padding: 18px; box-shadow: 0 1px 3px rgba(15,20,32,.05); position: relative; overflow: hidden; }
.conversion .cv-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cv-accent, #3b82f6); }
.conversion .cv-stat-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--cv-accent, #3b82f6); flex-shrink: 0; }
.conversion .cv-stat-v { font-size: 26px; font-weight: 800; color: #1f2c5c; line-height: 1.05; }
.conversion .cv-stat-k { font-size: 11.5px; font-weight: 600; color: #8a90a3; margin-top: 4px; text-transform: uppercase; letter-spacing: .03em; }
.conversion .cv-stat-sub { font-size: 12px; color: #8a90a3; margin-top: 4px; }
.conversion .cv-stat--a { --cv-accent: #3b82f6; }
.conversion .cv-stat--b { --cv-accent: #14b8a6; }
.conversion .cv-stat--rate { --cv-accent: #1f9d57; align-items: center; }
.conversion .cv-stat--details { --cv-accent: #8b5cf6; flex-direction: column; align-items: stretch; }
/* circular gauge */
.conversion .cv-gauge { width: 78px; height: 78px; border-radius: 50%; flex-shrink: 0; background: conic-gradient(#1f9d57 calc(var(--pct) * 1%), #e6eaf2 0); display: grid; place-items: center; }
.conversion .cv-gauge-hole { width: 58px; height: 58px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.conversion .cv-gauge-hole span { font-size: 14px; font-weight: 800; color: #1f9d57; }
/* origin breakdown */
.conversion .cv-origin { margin-bottom: 10px; }
.conversion .cv-origin:last-child { margin-bottom: 0; }
.conversion .cv-origin-top { display: flex; justify-content: space-between; font-size: 12.5px; color: #3f4254; margin-bottom: 4px; }
.conversion .cv-origin-top b { color: #1f2c5c; }
.conversion .cv-origin-bar { height: 8px; border-radius: 999px; background: #eef0f5; overflow: hidden; }
.conversion .cv-origin-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg,#8b5cf6,#6366f1); transition: width .5s ease; }
@media (max-width: 1100px) { .conversion .cv-stats { grid-template-columns: 1fr 1fr; } }
/* ===== Activations modal — totals + widget stats ===== */
.bp-modal .act-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 14px 0; }
.bp-modal .act-stat { background: #fff; border: 1px solid #e9ecf3; border-radius: 10px; padding: 14px; text-align: center; position: relative; overflow: hidden; }
.bp-modal .act-stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--act-c, #94a3b8); }
.bp-modal .act-stat-v { font-size: 24px; font-weight: 800; color: #1f2c5c; line-height: 1; }
.bp-modal .act-stat-k { font-size: 11px; font-weight: 600; color: #8a90a3; margin-top: 5px; text-transform: uppercase; letter-spacing: .03em; }
.bp-modal .act-stat--total { --act-c: #3b82f6; }
.bp-modal .act-stat--active { --act-c: #16a34a; }
.bp-modal .act-stat--redeemed { --act-c: #0ea5e9; }
.bp-modal .act-stat--canceled { --act-c: #f0a020; }
.bp-modal .act-stat--failed { --act-c: #e9484a; }
.bp-modal .act-stat--expired { --act-c: #94a3b8; }
.bp-modal .act-stats--money { grid-template-columns: repeat(4, 1fr); }
.bp-modal .act-mstat { display: flex; align-items: center; gap: 12px; background: #f8faff; border: 1px solid #e3e9f7; border-radius: 10px; padding: 14px; }
.bp-modal .act-mstat-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #28387a; color: #fff; flex-shrink: 0; }
.bp-modal .act-mstat-v { font-size: 16px; font-weight: 800; color: #1f2c5c; }
.bp-modal .act-mstat-k { font-size: 11px; font-weight: 600; color: #8a90a3; margin-top: 2px; text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 1000px) { .bp-modal .act-stats, .bp-modal .act-stats--money { grid-template-columns: repeat(3, 1fr); } }
/* ===== Player → Promotions tab — per-player promo stat widgets ===== */
.host-players .hp-promo-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
.host-players .hp-pstat { background: #fff; border: 1px solid #e9ecf3; border-radius: 10px; padding: 14px; text-align: center; position: relative; overflow: hidden; box-shadow: 0 1px 3px rgba(15,20,32,.05); }
.host-players .hp-pstat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ps-c, #94a3b8); }
.host-players .hp-pstat-v { font-size: 22px; font-weight: 800; color: #1f2c5c; line-height: 1; }
.host-players .hp-pstat-k { font-size: 11px; font-weight: 600; color: #8a90a3; margin-top: 5px; text-transform: uppercase; letter-spacing: .03em; }
.host-players .hp-pstat--total { --ps-c: #3b82f6; }
.host-players .hp-pstat--active { --ps-c: #16a34a; }
.host-players .hp-pstat--redeemed { --ps-c: #0ea5e9; }
.host-players .hp-pstat--canceled { --ps-c: #f0a020; }
.host-players .hp-pstat--failed { --ps-c: #e9484a; }
.host-players .hp-pstat--money { --ps-c: #8b5cf6; }
@media (max-width: 1000px) { .host-players .hp-promo-stats { grid-template-columns: repeat(3, 1fr); } }
/* ============ Bonus Program Wizard (Create New Bonus Program) ============ */
.bw-wizard .bw-layout { display: flex; align-items: flex-start; gap: 20px; margin-top: 2px; }
.bw-wizard .bw-main { flex: 1; min-width: 0; padding: 0; overflow: hidden; }
.bw-wizard .bw-side { width: 320px; flex: none; padding: 20px; position: sticky; top: 90px; }
.bw-wizard .bw-side-title { font-size: 15px; font-weight: 700; color: #212121; margin-bottom: 14px; }
.bw-wizard .bw-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--border-default); background: #fafbfc; border-radius: 6px 6px 0 0; }
.bw-wizard .bw-tab { padding: 13px 18px; font-size: 12.5px; font-weight: 600; color: #7E8299; background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; font-family: inherit; white-space: nowrap; transition: color .12s, border-color .12s, background .12s; }
.bw-wizard .bw-tab:hover { color: var(--p-600); background: rgba(24,125,228,.05); }
.bw-wizard .bw-tab.active { color: var(--p-700); background: #fff; border-bottom: 2px solid var(--p-500); }
.bw-wizard .bw-body { padding: 26px 28px; }
.bw-wizard .bw-row { display: grid; grid-template-columns: 250px 1fr; gap: 20px; padding: 15px 0; border-bottom: 1px solid #f1f3f6; align-items: start; }
.bw-wizard .bw-row:last-child { border-bottom: 0; }
.bw-wizard .bw-row-label { font-weight: 700; font-size: 13px; color: var(--p-700); padding-top: 8px; }
.bw-wizard .bw-row-field { min-width: 0; }
/* The Trigger Configuration sidebar is much narrower than the main step
panel — stack label-above-field there instead of reusing the wide
two-column grid (which would squeeze the field into a sliver). */
.bw-wizard .bw-side .bw-row { grid-template-columns: 1fr; gap: 6px; padding: 0 0 14px; border-bottom: 0; }
.bw-wizard .bw-side .bw-row-label { padding-top: 0; }
.bw-wizard .bw-help { font-size: 11.5px; color: #9aa1b4; margin-top: 6px; line-height: 1.5; }
.bw-wizard .bw-disabled-badge { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: #F3F6F9; color: #7E8299; font-size: 10px; font-weight: 700; vertical-align: middle; }
.bw-wizard .bw-checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #3F4254; }
.bw-wizard .bw-checkbox-row input { width: 16px; height: 16px; }
.bw-wizard .bw-unit-wrap { display: flex; align-items: center; gap: 10px; }
.bw-wizard .bw-unit-wrap .bw-unit { font-size: 12px; color: #7E8299; font-weight: 600; white-space: nowrap; }
.bw-wizard .bw-foot { display: flex; gap: 10px; align-items: center; padding: 18px 28px; border-top: 1px solid var(--border-default); background: #fafbfc; border-radius: 0 0 6px 6px; }
.bw-wizard .bw-foot .btn--primary { margin-left: auto; }
.bw-wizard .bw-dynamic-panel { background: #f6f8fb; border: 1px solid #e6eaf1; border-radius: 8px; padding: 16px 18px; margin-top: 12px; }
.bw-wizard .bw-dynamic-title { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--p-600); margin-bottom: 10px; }
.bw-wizard .bw-chip-input { display: flex; flex-wrap: wrap; gap: 6px; min-height: 38px; padding: 6px 10px; border: 1px solid var(--border-default); border-radius: 4px; background: #fff; cursor: pointer; align-items: center; }
.bw-wizard .bw-chip-input:hover { border-color: var(--p-300); }
.bw-wizard .bw-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--p-50); color: var(--p-700); font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; }
.bw-wizard .bw-chip button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0; display: inline-flex; }
.bw-wizard .bw-chip-placeholder { color: #9aa1b4; font-size: 13px; }
.bw-wizard .bw-popover { position: absolute; z-index: 60; background: #fff; border: 1px solid var(--border-default); border-radius: 8px; box-shadow: 0 8px 24px rgba(15,20,32,.16); padding: 6px; margin-top: 4px; max-height: 240px; overflow-y: auto; min-width: 240px; }
.bw-wizard .bw-popover label { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 5px; font-size: 12.5px; cursor: pointer; }
.bw-wizard .bw-popover label:hover { background: var(--p-50); }
@media (max-width: 1100px) {
.bw-wizard .bw-layout { flex-direction: column; }
.bw-wizard .bw-side { width: 100%; position: static; }
.bw-wizard .bw-row { grid-template-columns: 1fr; }
.bw-wizard .bw-row-label { padding-top: 0; }
}
/* ============ Launch URLs (CMS) ============ */
.lu-page .lu-table tbody tr:hover td { background: #fafbfc; }
.lu-page .lu-expand-btn { background: none; border: 0; color: #9aa1b4; cursor: pointer; padding: 4px; display: inline-flex; border-radius: 4px; }
.lu-page .lu-expand-btn:hover { background: var(--p-50); color: var(--p-600); }
.lu-page .lu-icon-btn { background: none; border: 1px solid var(--border-default); color: #7E8299; cursor: pointer; padding: 6px; border-radius: 4px; display: inline-flex; flex-shrink: 0; }
.lu-page .lu-icon-btn:hover { background: var(--p-50); border-color: var(--p-300); color: var(--p-600); }
.lu-page .lu-icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.lu-page .lu-icon-btn:disabled:hover { background: none; border-color: var(--border-default); color: #7E8299; }
.lu-page .lu-icon-btn--danger:hover { background: #fdeaea; border-color: #f3b4b4; color: #e2011a; }
.lu-page .lu-pending-row td { background: var(--p-50); }
.lu-page .lu-new-badge { color: var(--p-600); font-weight: 700; font-size: 10.5px; letter-spacing: .04em; }
.lu-page .lu-dirty-dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: #f0a020; margin-right: 5px; }
.lu-page .lu-save--dirty { color: var(--p-600); }
.lu-page .lu-expand-row td { background: #f8f9fb; border-bottom: 1px solid #e5e7eb; padding: 0 !important; }
.lu-page .lu-custom-panel { padding: 14px 16px 16px 44px; }
.lu-page .lu-custom-title { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--p-600); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.lu-page .lu-custom-row { display: grid; grid-template-columns: 220px 1fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
@media (max-width: 700px) {
.lu-page .lu-custom-row { grid-template-columns: 1fr; }
}
/* ---- Deposit (transfer) — HostDeposit.jsx (htf-) ---- */
.host-deposit .htf-note { margin-top: 6px; font-size: 11px; color: #7e8299; line-height: 1.45; }
.host-deposit .htf-search__hint { padding: 10px 12px; font-size: 12px; color: #7e8299; }
.host-deposit .htf-search__item { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; border: 0; background: #fff; padding: 9px 12px; font-size: 12.5px; cursor: pointer; text-align: left; }
.host-deposit .htf-search__item:hover { background: #f6f7f9; }
.host-deposit .htf-search__item + .htf-search__item { border-top: 1px solid #f2f3f7; }
.host-deposit .htf-flag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--warn-50, #fff4de); color: #b57e00; }
.host-deposit .htf-flag--on { background: var(--p-50, #eef0fd); color: var(--p-700, #1c298c); text-transform: none; font-size: 11.5px; letter-spacing: 0; padding: 3px 10px; }
.host-deposit .htf-balempty { display: flex; align-items: center; gap: 8px; padding: 18px 14px; border: 1px dashed #dcdfe6; border-radius: 8px; background: #fafbfc; font-size: 12.5px; color: #7e8299; }
.host-deposit .htf-balbox { border: 1px solid #eef0f3; background: #f6f7f9; border-radius: 8px; padding: 10px 12px; }
.host-deposit .htf-balbox__l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #7e8299; margin-bottom: 4px; }
.host-deposit .htf-balbox__v { font-size: 15px; font-weight: 700; color: #181c32; }
.host-deposit .htf-balbox--avail { background: var(--p-50, #eef0fd); border-color: rgba(42,63,208,.25); }
.host-deposit .htf-balbox--avail .htf-balbox__v { color: var(--p-700, #1c298c); }
.host-deposit .htf-refresh { border: 0; background: transparent; cursor: pointer; color: inherit; display: inline-flex; padding: 2px; margin-left: 4px; border-radius: 4px; }
.host-deposit .htf-refresh:hover { background: rgba(15,20,32,.08); }
.host-deposit .htf-spin { animation: htf-rot .8s linear infinite; }
@keyframes htf-rot { to { transform: rotate(360deg); } }
.host-deposit .htf-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #3f4254; cursor: pointer; }
.host-deposit .htf-check input { width: 16px; height: 16px; accent-color: var(--p-500, #2a3fd0); cursor: pointer; }
.host-deposit .htf-errs { display: flex; gap: 10px; margin-top: 14px; padding: 10px 14px; border-radius: 8px; border: 1px solid #ffcdd3; background: #ffe2e5; color: #d2293a; font-size: 12.5px; font-weight: 600; line-height: 1.7; }
.host-deposit .htf-modal { width: min(760px, 96vw); }
.host-deposit .htf-x { border: 0; background: transparent; cursor: pointer; color: #7e8299; display: inline-flex; padding: 6px; border-radius: 6px; }
.host-deposit .htf-x:hover { background: #f2f3f7; color: #3f4254; }
.host-deposit .htf-okdot { width: 26px; height: 26px; border-radius: 999px; background: #1f9d57; color: #fff; display: inline-grid; place-items: center; }
.host-deposit .htf-sum { border: 1px solid #eef0f3; border-radius: 8px; padding: 8px 10px; background: #fafbfc; }
.host-deposit .htf-sum .l { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #7e8299; margin-bottom: 3px; }
.host-deposit .htf-sum .v { font-size: 13px; font-weight: 700; color: #181c32; overflow-wrap: anywhere; }
.host-deposit .htf-sum .c, .host-deposit .htf-receipt__table .c { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; font-weight: 600; color: #7e8299; }
.host-deposit .htf-type { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 5px; background: #eef0f3; color: #3f4254; }
.host-deposit .htf-receipt__cap { font-size: 12px; font-weight: 700; color: #5a6172; margin-bottom: 8px; }
.host-deposit .htf-receipt__table td, .host-deposit .htf-receipt__table th { text-align: center; white-space: nowrap; }
.host-deposit .htf-receipt__notes { margin: 10px 0 0; padding-left: 18px; font-size: 12px; color: #5a6172; line-height: 1.7; }
@media (max-width: 720px) {
.host-deposit .htf-scrim { padding: 0; }
.host-deposit .htf-modal { width: 100vw; min-height: 100vh; border-radius: 0; }
.host-deposit .htf-modal__foot { flex-direction: column; }
.host-deposit .htf-modal__foot .rpt-btn { width: 100%; }
}
/* ============ Host Vouchers (HostVouchers.jsx) — hv- ============ */
.hv-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 14px; }
.hv-hero .filter-hero__card { position: relative; }
.hv-range { display: flex; gap: 4px; align-items: center; min-width: 0; }
.hv-range-sep { color: var(--text-tertiary); font-size: 11px; flex: none; }
.hv-code { font-family: var(--font-mono); font-weight: 700; letter-spacing: .06em; }
.hv-code-link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--p-600); font-size: inherit; display: inline-flex; align-items: center; gap: 5px; }
.hv-code-link:hover { color: var(--p-700); text-decoration: underline; }
.hv-role { color: var(--text-tertiary); font-size: 11.5px; }
.hv-date { font-size: 11.5px; color: var(--text-secondary); }
.hv-sort-th { cursor: pointer; user-select: none; }
.hv-sort-th:hover { color: var(--text-secondary); }
.hv-sort-arrow { margin-left: 4px; font-size: 8.5px; opacity: .75; }
.hv-pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: -4px 0 10px; }
.hv-pills__label { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-right: 4px; }
.hv-clear-all { font-size: 11.5px; color: var(--p-600); background: none; border: none; cursor: pointer; font-weight: 600; padding: 4px 8px; font-family: inherit; }
.hv-clear-all:hover { color: var(--p-700); }
.hv-foot { padding: 10px 14px; border-top: 1px solid var(--border-default); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--n-25); }
.hv-foot__info { font-size: 12px; color: var(--text-tertiary); }
.hv-foot__info strong { color: var(--text-primary); }
.hv-foot__size { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-tertiary); }
.hv-foot__select { height: 30px; padding: 2px 26px 2px 8px; font-size: 12px; }
.hv-foot__nav { margin-left: auto; display: flex; gap: 6px; }
.hv-x { width: 26px; height: 26px; border: none; border-radius: 6px; background: transparent; color: var(--text-tertiary); cursor: pointer; display: grid; place-items: center; }
.hv-x:hover { background: var(--n-75); color: var(--text-primary); }
/* Modals — compact on the shared .bp-modal chrome, full-screen on mobile */
.hv-modal { width: min(480px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.hv-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border-default); }
.hv-modal__title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.hv-modal__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.hv-modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border-default); background: var(--n-25); }
.hv-field-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.hv-req { color: var(--err-500); }
.hv-err { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--err-700); background: var(--err-50); border: 1px solid color-mix(in oklab, var(--err-500) 30%, transparent); border-radius: 6px; padding: 7px 10px; }
.hv-hint { font-size: 11.5px; line-height: 1.55; color: var(--text-tertiary); }
.hv-hint b { color: var(--text-secondary); }
/* Printable slip */
.hv-slip { border: 1px dashed var(--border-strong); border-radius: 8px; padding: 18px 20px; text-align: center; background: var(--n-0); }
.hv-slip__logo { font-size: 17px; font-weight: 800; letter-spacing: .02em; color: var(--p-600); margin-bottom: 12px; }
.hv-slip__row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--text-secondary); padding: 5px 0; border-bottom: 1px solid var(--border-subtle); }
.hv-slip__row b { color: var(--text-primary); }
.hv-slip__code { font-size: 30px; font-weight: 800; font-family: var(--font-mono); letter-spacing: .18em; color: var(--text-primary); margin-top: 14px; }
/* Mobile filters toggle + sheet */
.hv-filters-toggle { display: none; align-items: center; gap: 8px; width: 100%; margin-bottom: 12px; padding: 10px 14px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--n-0); font-size: 13px; font-weight: 600; color: var(--text-primary); cursor: pointer; font-family: inherit; }
.hv-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--p-600); color: #fff; font-size: 10.5px; font-weight: 700; display: inline-grid; place-items: center; }
.hv-toggle-results { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--text-tertiary); }
.hv-sheet-scrim { position: fixed; inset: 0; z-index: 220; background: rgba(15,20,32,.45); display: flex; justify-content: flex-end; }
.hv-sheet { width: min(420px, 100%); height: 100%; background: var(--n-0); display: flex; flex-direction: column; box-shadow: -12px 0 40px rgba(15,20,32,.25); }
.hv-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border-default); }
.hv-sheet__title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.hv-sheet__body { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.hv-sheet__foot { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border-default); background: var(--n-25); }
.hv-sheet__foot .btn { flex: 1; justify-content: center; }
/* Mobile stacked cards */
.hv-cards { display: none; flex-direction: column; }
.hv-card { border-bottom: 1px solid var(--border-subtle); }
.hv-card__head { display: grid; grid-template-columns: 1fr auto 16px; grid-template-areas: "code chip chev" "date amt chev"; align-items: center; gap: 3px 10px; width: 100%; padding: 11px 14px; border: 0; background: none; text-align: left; cursor: pointer; font-family: inherit; }
.hv-card__head:active { background: var(--n-25); }
.hv-card__code { grid-area: code; font-size: 14px; color: var(--text-primary); }
.hv-card__head .chip { grid-area: chip; justify-self: end; }
.hv-card__amt { grid-area: amt; justify-self: end; font-size: 13px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.hv-card__date { grid-area: date; font-size: 11px; color: var(--text-tertiary); }
.hv-card__chev { grid-area: chev; color: var(--text-tertiary); }
.hv-card__body { padding: 2px 14px 12px; }
.hv-card__row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 12.5px; border-bottom: 1px solid var(--border-subtle); }
.hv-card__row span { color: var(--text-tertiary); }
.hv-card__row b { color: var(--text-primary); font-weight: 600; text-align: right; }
@media (max-width: 860px) {
.hv-hero { display: none; }
.hv-filters-toggle { display: flex; }
.hv-table-wrap { display: none; }
.hv-cards { display: flex; }
.hv-header { flex-wrap: wrap; gap: 10px; }
.hv-actions { width: 100%; }
.hv-actions .btn { flex: 1; justify-content: center; }
.hv-foot__nav { margin-left: 0; width: 100%; }
.hv-foot__nav .btn { flex: 1; justify-content: center; }
}
@media (max-width: 640px) {
.hv-scrim { padding: 0; }
.hv-modal { width: 100vw; min-height: 100dvh; border-radius: 0; display: flex; flex-direction: column; }
.hv-modal__body { flex: 1; }
}
/* ===== Host Withdraws (HostWithdraws.jsx) ===== */
.hwd .hwd-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; }
.hwd .hwd-fcard { background: #fff; border: 1px solid var(--border-default); border-radius: 12px; padding: 10px 12px 9px; display: flex; flex-direction: column; gap: 5px; box-shadow: 0 1px 2px rgba(15,20,32,.04); min-width: 0; transition: border-color .12s, box-shadow .12s; }
.hwd .hwd-fcard:hover { border-color: var(--border-strong); box-shadow: 0 4px 10px -2px rgba(15,20,32,.08); }
.hwd .hwd-fcard:focus-within { border-color: var(--p-500); box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-500) 18%, transparent); }
.hwd .hwd-flab { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 5px; }
.hwd .hwd-fin, .hwd .hwd-fsel { width: 100%; height: 28px; border: none; background: transparent; padding: 0; font-size: 13px; font-weight: 500; color: var(--text-primary); font-family: inherit; outline: none; min-width: 0; }
.hwd .hwd-fin::placeholder { color: var(--text-tertiary); font-weight: 400; }
.hwd .hwd-fsel { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0 center; padding-right: 14px; }
.hwd .hwd-frange { display: flex; gap: 4px; align-items: center; }
.hwd .hwd-dash { color: var(--text-tertiary); font-size: 11px; }
.hwd .hwd-fcard--result { background: linear-gradient(180deg, var(--n-25), var(--n-50)); }
.hwd .hwd-fval { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--text-primary); font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 6px; }
.hwd .hwd-fval-sub { font-size: 11px; font-weight: 500; color: var(--text-tertiary); }
.hwd .hwd-pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: -2px 0 10px; }
.hwd .hwd-pills-lab { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-right: 4px; }
.hwd .hwd-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; background: var(--p-50); color: var(--p-700); border: 1px solid color-mix(in oklab, var(--p-500) 22%, transparent); border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.hwd .hwd-pill button { width: 16px; height: 16px; border-radius: 999px; border: none; background: color-mix(in oklab, var(--p-500) 18%, transparent); color: var(--p-700); cursor: pointer; display: inline-grid; place-items: center; }
.hwd .hwd-clearall { font-size: 11.5px; color: var(--p-600); background: none; border: none; cursor: pointer; font-weight: 600; padding: 4px 8px; font-family: inherit; }
.hwd .hwd-tablewrap { overflow: auto; }
.hwd .hwd-list { min-width: 1140px; }
.hwd .hwd-list thead th { background: #28387a; color: #fff; }
.hwd .hwd-list td { vertical-align: middle; font-size: 12.5px; }
.hwd .hwd-th-sort { border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 0; }
.hwd .hwd-user { font-weight: 700; color: #2b2f3a; }
.hwd .hwd-date { white-space: nowrap; }
.hwd .hwd-amt { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hwd .hwd-dim { color: #9aa1b4; }
.hwd .hwd-lasttx { white-space: nowrap; font-weight: 600; }
.hwd .hwd-lasttx div { font-size: 10.5px; color: #9aa1b4; font-weight: 400; }
.hwd .hwd-decline { color: #e9484a; font-style: italic; }
.hwd .hwd-declinecell { max-width: 200px; }
.hwd .hwd-empty { padding: 34px 20px; text-align: center; color: var(--text-tertiary); font-size: 13px; }
/* status badge (WithdrawRequestStatus) + row tint (getRichiestaPrelievoClass) */
.hwd .hwd-status { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hwd .hwd-chip { font-size: 11px; font-weight: 700; padding: 4px 14px; border-radius: 5px; color: #fff; display: inline-block; }
.hwd .hwd-chip--0 { background: #f0a020; }
.hwd .hwd-chip--1 { background: #1f9d57; }
.hwd .hwd-chip--2 { background: #e9484a; }
.hwd .hwd-chip--3 { background: #7f1d1d; }
.hwd .hwd-chip--4 { background: #64748b; }
.hwd .hwd-status-sub { font-size: 10.5px; color: #9aa1b4; text-align: center; line-height: 1.4; }
.hwd .hwd-status-sub b { color: #3f4254; }
.hwd tr.hwd-r--0 td:first-child { box-shadow: inset 3px 0 0 #f0a020; }
.hwd tr.hwd-r--1 td:first-child { box-shadow: inset 3px 0 0 #1f9d57; }
.hwd tr.hwd-r--2 td:first-child { box-shadow: inset 3px 0 0 #e9484a; }
.hwd tr.hwd-r--3 td:first-child { box-shadow: inset 3px 0 0 #7f1d1d; }
.hwd tr.hwd-r--4 td:first-child { box-shadow: inset 3px 0 0 #64748b; }
/* payment details copy rows (wire-argentina only) */
.hwd .hwd-pd { display: flex; flex-direction: column; gap: 6px; min-width: 260px; }
.hwd .hwd-pd-row { display: grid; grid-template-columns: 96px 1fr 32px; align-items: stretch; border: 1px solid #e4e6ef; border-radius: 6px; overflow: hidden; text-align: left; }
.hwd .hwd-pd-label { padding: 7px 10px; font-size: 11.5px; color: #5a6076; background: #f8f9fc; border-right: 1px solid #e4e6ef; }
.hwd .hwd-pd-val { padding: 7px 10px; font-size: 11.5px; font-weight: 600; color: #3f4254; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hwd .hwd-pd-copy { background: #f1f3f7; border: 0; border-left: 1px solid #e4e6ef; cursor: pointer; color: #5a6076; display: grid; place-items: center; }
.hwd .hwd-pd-copy:hover { background: #e4e8f0; color: var(--p-600); }
/* approve / reject actions */
.hwd .hwd-acts { display: inline-flex; gap: 6px; justify-content: center; }
.hwd .hwd-act { min-width: 32px; height: 32px; border: 0; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 0 6px; }
.hwd .hwd-act--approve { background: #1f9d57; }
.hwd .hwd-act--approve:hover { background: #178048; }
.hwd .hwd-act--reject { background: #e9484a; }
.hwd .hwd-act--reject:hover { background: #d23c3e; }
.hwd .hwd-acts--block { width: 100%; }
.hwd .hwd-acts--block .hwd-act { flex: 1; height: 40px; }
/* footer */
.hwd .hwd-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--border-default); background: var(--n-25); }
.hwd .hwd-foot-show { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #5a6172; }
.hwd .hwd-foot-show .select { width: auto; min-width: 68px; padding: 5px 26px 5px 10px; height: auto; }
.hwd .hwd-foot-range { font-size: 12px; color: var(--text-tertiary); }
.hwd .hwd-foot-range b { color: var(--text-primary); }
.hwd .hwd-foot-pages { margin-left: auto; display: flex; gap: 6px; }
/* mobile Filters trigger (hidden on desktop) */
.hwd .hwd-filters-btn { display: none; }
.hwd .hwd-filters-count { margin-left: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--p-500); color: #fff; font-size: 10px; font-weight: 700; display: inline-grid; place-items: center; }
/* mobile stacked cards (hidden on desktop) */
.hwd .hwd-cards { display: none; flex-direction: column; gap: 10px; padding: 12px; }
.hwd .hwd-mcard { border: 1px solid #e9ebf1; border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 0 1px 3px rgba(15,20,32,.05); }
.hwd .hwd-mcard-top { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0; background: none; cursor: pointer; font-family: inherit; text-align: left; }
.hwd .hwd-mcard-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hwd .hwd-mcard-user { font-weight: 700; font-size: 14px; color: #2b2f3a; }
.hwd .hwd-mcard-date { font-size: 11.5px; color: #9aa1b4; }
.hwd .hwd-mcard-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.hwd .hwd-mcard-amt { font-weight: 700; font-size: 14px; color: #181c32; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hwd .hwd-mcard-chev { color: #9aa1b4; flex-shrink: 0; }
.hwd .hwd-mcard-body { border-top: 1px solid #eef0f3; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.hwd .hwd-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.hwd .hwd-kv-k { color: #5a6172; font-weight: 500; flex-shrink: 0; }
.hwd .hwd-kv-v { color: #181c32; font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.hwd .hwd-mcard-pd .hwd-pd { min-width: 0; }
.hwd .hwd-mcard-acts { margin-top: 4px; }
/* mobile full-height filter sheet */
.hwd .hwd-sheet-scrim { position: fixed; inset: 0; z-index: 210; background: rgba(15,20,32,.5); backdrop-filter: blur(2px); display: flex; justify-content: flex-end; }
.hwd .hwd-sheet { width: min(400px, 100%); height: 100%; background: #fff; display: flex; flex-direction: column; box-shadow: -18px 0 50px rgba(15,20,32,.3); }
.hwd .hwd-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border-default); }
.hwd .hwd-sheet-head > span { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #2b2f3a; }
.hwd .hwd-sheet-body { flex: 1; overflow: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.hwd .hwd-sh-field { display: flex; flex-direction: column; gap: 6px; }
.hwd .hwd-sh-field > label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #2b3a78; }
.hwd .hwd-sh-field .input, .hwd .hwd-sh-field .select { width: 100%; }
.hwd .hwd-sh-field .hwd-frange .input { min-width: 0; }
.hwd .hwd-sheet-foot { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border-default); background: var(--n-25); }
.hwd .hwd-sheet-foot .rpt-btn { flex: 1; }
/* approve / decline / held modal */
.hwd .hwd-modal { background: #fff; border-radius: 12px; width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 60px); display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(15,20,32,.4); overflow: hidden; }
.hwd .hwd-modal-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border-subtle); }
.hwd .hwd-modal-ic { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.hwd .hwd-modal-ic--ok { background: #1f9d57; }
.hwd .hwd-modal-ic--err { background: #e9484a; }
.hwd .hwd-modal-ic--held { background: #f0a020; }
.hwd .hwd-modal-title { font-size: 15px; font-weight: 700; color: #2b2f3a; display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.hwd .hwd-modal-sub { font-size: 11.5px; font-weight: 500; color: #9aa1b4; }
.hwd .hwd-modal-x { width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: #9aa1b4; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.hwd .hwd-modal-x:hover { background: #f1f3f7; color: #3f4254; }
.hwd .hwd-modal-body { padding: 16px 18px; font-size: 13px; color: #3f4254; line-height: 1.55; overflow: auto; }
.hwd .hwd-modal-body p { margin: 0 0 10px; }
.hwd .hwd-modal-note { font-size: 12px; color: #7a8194; }
.hwd .hwd-modal-reason { width: 100%; resize: vertical; font-family: inherit; }
.hwd .hwd-modal-reason--err { border-color: #e9484a; }
.hwd .hwd-modal-err { color: #e9484a; font-size: 12px; margin-top: 6px; font-weight: 600; }
.hwd .hwd-modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--border-subtle); background: var(--n-25); }
.hwd .hwd-modal-btn { min-width: 0; height: 42px; }
.hwd .hwd-modal-btn--ghost { background: #fff; color: #3f4254; border: 1px solid var(--border-default); box-shadow: none; }
.hwd .hwd-modal-btn--ghost:hover { background: #f1f3f7; }
/* ---- responsive (brief §11): table→cards, hero→Filters sheet, modal full-screen ---- */
@media (max-width: 860px) {
.hwd .hwd-hero { display: none; }
.hwd .hwd-filters-btn { display: inline-flex; }
.hwd .hwd-tablewrap { display: none; }
.hwd .hwd-cards { display: flex; }
.hwd .hwd-foot { justify-content: center; }
.hwd .hwd-foot-pages { margin-left: 0; }
.hwd .hwd-modal { position: fixed; inset: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; }
}
/* ===== Host Messages (src/pages/HostMessages.jsx) ===== */
.hmg-page .hmg-headrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; flex-wrap: wrap; }
.hmg-page .hmg-msgtext { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 460px; color: #5a6172; line-height: 1.5; }
html[data-theme="iwakiri"] .hmg-page .hmg-unread td { background: #fffdf3; }
.hmg-page .hmg-unread .cg-namebtn { font-weight: 800; }
.hmg-page .hmg-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: #f0a020; margin-right: 7px; vertical-align: middle; }
.hmg-page .cg-list th.hmg-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.hmg-page .cg-list th.hmg-th-sort:hover { background: #33468f; }
.hmg-page .hmg-th-arrow { margin-left: 5px; font-size: 9px; opacity: .9; }
.hmg-page .hmg-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 14px; }
.hmg-page .hmg-filterbtn.rpt-btn { display: none; }
/* view/sent modal detail rows */
.hmg-modal .hmg-vrow { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid #f1f3f7; font-size: 13px; }
.hmg-modal .hmg-vrow .k { color: var(--p-600); font-weight: 700; }
.hmg-modal .hmg-vrow .v { color: #1f2937; }
.hmg-modal .hmg-imgrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f8f9fc; border: 1px solid #e4e6ef; border-radius: 8px; margin-bottom: 12px; }
.hmg-modal .hmg-imgthumb { width: 44px; height: 34px; border-radius: 5px; background: #e9ecf3; color: #8a90a3; display: inline-grid; place-items: center; flex-shrink: 0; }
/* sent modal — read-receipt filters */
.hmg-modal .hmg-recipfilters { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; background: #f6f7f9; border: 1px solid #eef0f3; border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.hmg-modal .hmg-recipfilters .rpt-field label { color: #2b3a78; font-weight: 700; }
.hmg-modal .hmg-recipbox { border: 1px solid #e4e6ef; border-radius: 8px; max-height: 132px; overflow: auto; background: #fff; }
.hmg-modal .hmg-recip-row { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 12.5px; color: #3f4254; border-bottom: 1px solid #f1f3f7; cursor: pointer; margin: 0; }
.hmg-modal .hmg-recip-row:last-child { border-bottom: 0; }
.hmg-modal .hmg-recip-row:hover { background: #f7f9ff; }
.hmg-modal .hmg-recipbtns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
/* compose — recipient chip picker */
.hmg-modal .hmg-dd { position: relative; }
.hmg-modal .hmg-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 42px; padding: 6px 10px; border: 1px solid #e4e6ef; border-radius: 6px; background: #fff; align-items: center; }
.hmg-modal .hmg-chips:focus-within { border-color: var(--p-300); box-shadow: var(--ring-focus); }
.hmg-modal .hmg-chip { display: inline-flex; align-items: center; gap: 5px; background: #eef2f7; color: #28387a; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; }
.hmg-modal .hmg-chip-role { color: #8a90a3; font-weight: 500; }
.hmg-modal .hmg-chip button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0; display: inline-flex; }
.hmg-modal .hmg-chip-input { flex: 1; min-width: 140px; border: 0; outline: 0; font: inherit; font-size: 13px; color: #3f4254; background: transparent; }
.hmg-modal .hmg-dd-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60; background: #fff; border: 1px solid #e4e6ef; border-radius: 8px; box-shadow: 0 8px 24px rgba(15,20,32,.16); max-height: 220px; overflow: auto; }
.hmg-modal .hmg-dd-item { display: flex; justify-content: space-between; gap: 10px; width: 100%; background: none; border: 0; padding: 9px 12px; font: inherit; font-size: 13px; color: #3f4254; cursor: pointer; text-align: left; }
.hmg-modal .hmg-dd-item:hover { background: #f7f9ff; }
.hmg-modal .hmg-dd-role { color: #9aa1b4; font-size: 11.5px; white-space: nowrap; }
.hmg-modal .hmg-dd-empty { padding: 10px 12px; font-size: 12.5px; color: #9aa1b4; font-style: italic; }
.hmg-modal .hmg-err, .hmg-page .hmg-err { color: #e2011a; font-size: 12px; font-weight: 600; margin-top: 4px; }
.hmg-modal .hmg-input-err { border-color: #e2011a !important; }
/* mobile stacked cards (hidden on desktop) */
.hmg-page .hmg-cards { display: none; }
.hmg-card { background: #fff; border: 1px solid #e9ecf3; border-radius: 10px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(15,20,32,.05); }
.hmg-card--unread { border-left: 4px solid #f0a020; }
.hmg-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hmg-card-obj { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: #2b3a78; text-align: left; cursor: pointer; font-size: 13.5px; }
.hmg-card-date { font-size: 11.5px; color: #9aa1b4; margin-top: 4px; }
.hmg-card-body { margin-top: 10px; border-top: 1px dashed #e4e6ef; padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.hmg-card-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.hmg-card-kv .k { color: #7a8194; font-weight: 600; flex-shrink: 0; }
.hmg-card-kv .v { color: #1f2937; text-align: right; }
.hmg-card-expand { background: none; border: 0; color: #9aa1b4; font-size: 12px; cursor: pointer; margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; font-family: inherit; }
/* mobile filter bottom sheet */
.hmg-sheet-scrim { position: fixed; inset: 0; z-index: 210; background: rgba(15,20,32,.5); }
.hmg-sheet { position: fixed; left: 0; right: 0; bottom: 0; top: 8vh; z-index: 211; background: #fff; border-radius: 14px 14px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); overflow: auto; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 -12px 40px rgba(15,20,32,.3); }
.hmg-sheet .rpt-field { width: 100%; }
.hmg-sheet .rpt-field label { font-size: 13px; font-weight: 700; color: #3f4254; }
.hmg-sheet .input, .hmg-sheet .select { width: 100%; height: 42px; border: 1px solid #e4e6ef; border-radius: 5px; padding: 0 12px; }
.hmg-sheet .rpt-daterow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hmg-sheet .rpt-daterow .input { width: 100%; }
.hmg-sheet-head { display: flex; align-items: center; justify-content: space-between; }
.hmg-sheet-title { font-size: 16px; font-weight: 800; color: #1f2c5c; }
@media (max-width: 860px) {
.hmg-page .hmg-tablewrap { display: none; }
.hmg-page .hmg-cards { display: flex; flex-direction: column; gap: 10px; }
.hmg-page .rpt-filters.hmg-deskfilters { display: none; }
.hmg-page .hmg-filterbtn.rpt-btn { display: inline-flex; }
.hmg-modal .hmg-vrow { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 640px) {
.bp-modal-scrim.hmg-scrim { padding: 0; }
.hmg-scrim .cg-modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
}
/* ===== Host Deposits queue (src/pages/HostDeposits.jsx) ===== */
/* Hero filter strip — own card class so tweaks-extras' .filter-hero__card:nth-child
hide rules can't swallow filters; reuses filter-hero__label/input/select styling. */
.hdp-hero { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr 1.35fr 1.7fr 1.25fr .8fr; gap: 10px; margin-bottom: 12px; }
.hdp-fcard { background: #fff; border: 1px solid var(--border-default); border-radius: 12px; padding: 10px 12px 9px; display: flex; flex-direction: column; gap: 6px; min-width: 0; box-shadow: 0 1px 2px rgba(15,20,32,.04); transition: border-color .12s, box-shadow .12s; }
.hdp-fcard:hover { border-color: var(--border-strong); box-shadow: 0 4px 10px -2px rgba(15,20,32,.08); }
.hdp-fcard:focus-within { border-color: var(--p-500); box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-500) 15%, transparent); }
.hdp-fcard--result { background: linear-gradient(180deg, var(--n-25), var(--n-50)); justify-content: center; }
.hdp-range { display: flex; gap: 6px; align-items: center; min-width: 0; }
.hdp-range span { color: var(--text-tertiary); font-size: 11px; }
.hdp-userrow { display: flex; flex-direction: column; gap: 4px; }
.hdp-stype { margin-top: 2px; border-top: 1px dashed var(--border-subtle); padding-top: 3px; }
/* Live pending-badge poll pill (3 s pulse) */
.hdp-poll { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: #5a6172; background: #fff; border: 1px solid var(--border-default); border-radius: 999px; padding: 6px 12px; }
.hdp-poll b { color: #181c32; font-variant-numeric: tabular-nums; }
.hdp-poll-sub { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #a1a5b7; border-left: 1px solid var(--border-subtle); padding-left: 7px; }
.hdp-poll-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--warn-500, #FFA800); animation: hdp-pulse 3s ease-out infinite; }
@keyframes hdp-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,168,0,.5); } 55% { box-shadow: 0 0 0 7px rgba(255,168,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,168,0,0); } }
/* Active filter pills */
.hdp-pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: -2px 0 12px; }
.hdp-pills-label { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-right: 2px; }
.hdp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; background: var(--p-50); color: var(--p-700); border: 1px solid color-mix(in oklab, var(--p-500) 22%, transparent); border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.hdp-pill button { width: 16px; height: 16px; border-radius: 999px; border: none; background: color-mix(in oklab, var(--p-500) 16%, transparent); color: var(--p-700); cursor: pointer; display: inline-grid; place-items: center; padding: 0; }
.hdp-clearall { font-size: 11.5px; color: var(--p-600); background: none; border: none; cursor: pointer; font-weight: 700; padding: 4px 8px; font-family: inherit; }
/* Mobile Filters button (hidden on desktop) */
.hdp-filters-btn { display: none; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 1px solid var(--border-default); border-radius: 7px; background: #fff; color: #3f4254; font-weight: 600; font-size: 13px; cursor: pointer; font-family: inherit; }
.hdp-fcount { background: var(--p-500); color: #fff; font-size: 10.5px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; display: inline-grid; place-items: center; padding: 0 5px; }
/* Table */
.hdp-tablewrap { overflow-x: auto; }
.hdp-page .hp-list.hdp-table td { vertical-align: middle; }
.hdp-th { cursor: pointer; user-select: none; white-space: nowrap; }
.hdp-page .hp-list thead th.hdp-th:hover { background: #1f2c63; }
.hdp-sort-ic { opacity: .35; margin-left: 5px; display: inline-flex; vertical-align: -1px; }
.hdp-th.active .hdp-sort-ic { opacity: 1; }
.hdp-page .hp-list thead th:nth-child(5) { text-align: right; }
.hdp-page .hp-list td.hdp-amt { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hdp-user { font-weight: 600; color: #181c32; }
.hdp-dim { color: #b5b9c5; }
.hdp-row--pending td:first-child { box-shadow: inset 3px 0 0 var(--warn-500, #FFA800); }
.hdp-page .fm-pd { min-width: 230px; }
.hdp-chip--unknown { background: #adb5bd; }
.hdp-acts { display: inline-flex; gap: 6px; justify-content: center; }
.hdp-act { width: 34px; height: 30px; border: 0; border-radius: 5px; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .12s; }
.hdp-act--ok { background: #1f9d57; } .hdp-act--ok:hover { background: #178048; }
.hdp-act--no { background: #e9484a; } .hdp-act--no:hover { background: #d23c3e; }
.hdp-act:disabled { opacity: .45; cursor: not-allowed; }
.hdp-empty { text-align: center; color: var(--text-tertiary); }
.hdp-page td.hdp-empty { padding: 40px 20px; }
.hdp-empty-t { font-size: 13.5px; font-weight: 600; color: var(--text-secondary); margin-top: 6px; }
.hdp-empty-s { font-size: 12px; margin-top: 2px; }
/* Pagination footer */
.hdp-pager { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--border-default); background: var(--n-25); font-size: 12.5px; color: #5a6172; }
.hdp-psize { width: auto; min-width: 70px; height: 30px; padding: 2px 8px; margin: 0 7px; }
.hdp-pager-range b { color: #181c32; font-variant-numeric: tabular-nums; }
.hdp-pager-btns { margin-left: auto; display: inline-flex; gap: 6px; }
/* Approve / Reject modal (full-screen on mobile) */
.hdp-scrim { place-items: center; }
.hdp-modal { background: #fff; border-radius: 12px; width: 540px; max-width: calc(100vw - 32px); max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 18px 60px rgba(15,20,32,.4); }
.hdp-modal-head { display: flex; gap: 12px; align-items: flex-start; padding: 20px 22px 12px; }
.hdp-modal-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.hdp-modal-ic.ok { background: #1f9d57; } .hdp-modal-ic.no { background: #e9484a; }
.hdp-modal-title { font-size: 17px; font-weight: 800; color: #1f2c5c; }
.hdp-modal-sub { font-size: 12px; color: #8a90a3; margin-top: 2px; }
.hdp-modal-body { padding: 4px 22px 8px; overflow-y: auto; }
.hdp-summary { border: 1px solid var(--border-subtle); border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.hdp-summary > div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 12px; font-size: 12.5px; border-bottom: 1px solid var(--border-subtle); }
.hdp-summary > div:last-child { border-bottom: 0; }
.hdp-summary > div:nth-child(even) { background: var(--n-25); }
.hdp-summary .k { color: #8a90a3; font-weight: 600; }
.hdp-summary .v { color: #181c32; font-weight: 700; }
.hdp-reason label { display: block; font-size: 12.5px; font-weight: 700; color: #3f4254; margin-bottom: 6px; }
.hdp-reason .req { color: #e9484a; font-weight: 600; font-size: 11px; }
.hdp-reason textarea { width: 100%; border: 1px solid var(--border-default); border-radius: 8px; padding: 10px 12px; font-family: inherit; font-size: 13px; resize: vertical; outline: none; }
.hdp-reason textarea:focus { border-color: var(--p-400); box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-500) 14%, transparent); }
.hdp-modal-note { font-size: 11.5px; color: #8a90a3; background: var(--n-25); border: 1px dashed var(--border-default); border-radius: 8px; padding: 10px 12px; }
.hdp-modal-foot { display: flex; gap: 10px; padding: 14px 22px 20px; }
.hdp-btn { flex: 1; border: 0; border-radius: 8px; padding: 12px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; color: #fff; transition: background .12s, opacity .12s; }
.hdp-btn:disabled { opacity: .55; cursor: not-allowed; }
.hdp-btn--ghost { background: #f1f3f7; color: #5a6076; }
.hdp-btn--ok { background: #1f9d57; } .hdp-btn--ok:hover:not(:disabled) { background: #178048; }
.hdp-btn--no { background: #e9484a; } .hdp-btn--no:hover:not(:disabled) { background: #d23c3e; }
/* Mobile filter sheet (full-height drawer) */
.hdp-sheet-scrim { position: fixed; inset: 0; z-index: 220; background: rgba(15,20,32,.45); display: flex; justify-content: flex-end; }
.hdp-sheet { width: min(420px, 100vw); height: 100%; background: #fff; display: flex; flex-direction: column; box-shadow: -18px 0 50px rgba(15,20,32,.3); animation: hdp-slidein .18s ease-out; }
@keyframes hdp-slidein { from { transform: translateX(28px); opacity: .5; } to { transform: none; opacity: 1; } }
.hdp-sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--border-default); font-size: 15px; font-weight: 800; color: #1f2c5c; }
.hdp-sheet-head span { display: inline-flex; align-items: center; gap: 8px; }
.hdp-sheet-x { width: 30px; height: 30px; border: 0; border-radius: 7px; background: #f1f3f7; color: #5a6076; cursor: pointer; display: grid; place-items: center; }
.hdp-sheet-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; }
.hdp-sheet-field { display: flex; flex-direction: column; gap: 7px; }
.hdp-sheet-field .filter-hero__input, .hdp-sheet-field .filter-hero__select { border: 1px solid var(--border-default); border-radius: 8px; height: 40px; padding: 0 12px; background-position: right 10px center; }
.hdp-sheet-foot { display: flex; gap: 10px; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-default); }
/* Mobile stacked cards (§11: player, amount, status, date scan-first) */
.hdp-cards { display: none; }
.hdp-mcard { background: #fff; border: 1px solid var(--border-default); border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(15,20,32,.04); }
.hdp-mcard--pending { border-left: 3px solid var(--warn-500, #FFA800); }
.hdp-mtop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hdp-muser { font-weight: 700; color: #181c32; font-size: 14px; }
.hdp-mamt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: #181c32; }
.hdp-msub { display: flex; align-items: center; gap: 10px; margin-top: 7px; flex-wrap: wrap; }
.hdp-mdate { font-size: 11.5px; color: #8a90a3; }
.hdp-mexpand { margin-left: auto; border: 0; background: none; color: var(--p-600); cursor: pointer; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; font-family: inherit; padding: 2px 4px; }
.hdp-mbody { margin-top: 10px; border-top: 1px dashed var(--border-default); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.hdp-mkv { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.hdp-mkv .k { color: #8a90a3; font-weight: 600; flex-shrink: 0; }
.hdp-mkv .v { color: #3f4254; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.hdp-mact { display: flex; gap: 10px; margin-top: 4px; }
.hdp-mact button { flex: 1; height: 42px; border: 0; border-radius: 8px; color: #fff; font-weight: 700; font-family: inherit; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.hdp-mact button:disabled { opacity: .5; }
.hdp-monline { font-size: 11.5px; color: #8a90a3; font-style: italic; background: var(--n-25); border-radius: 6px; padding: 8px 10px; }
.hdp-page .hdp-mcard .fm-pd { min-width: 0; }
/* Responsive breakpoints (§11) */
@media (max-width: 1400px) {
.hdp-hero { grid-template-columns: repeat(4, 1fr); }
.hdp-fcard--grow { grid-column: span 2; }
}
@media (max-width: 860px) {
.hdp-hero { display: none; }
.hdp-filters-btn { display: inline-flex; }
.hdp-tablewrap { display: none; }
.hdp-cards { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.hdp-pager { justify-content: center; }
.hdp-pager-btns { margin-left: 0; }
}
@media (max-width: 640px) {
.hdp-scrim { padding: 0; }
.hdp-modal { width: 100vw; height: 100dvh; max-width: none; max-height: none; border-radius: 0; }
.hdp-modal-body { flex: 1; }
.hdp-modal-foot { margin-top: auto; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
.hdp-sheet { width: 100vw; }
}
/* ===== Host Dashboard (HostDashboard.jsx rewrite) — Iwakiri red vocabulary ===== */
.host-dashboard { --hd-brand: var(--p-500); --hd-brand-600: var(--p-600); --hd-brand-700: var(--p-700); --hd-brand-50: var(--p-50); --hd-ink: #3F4254; }
.host-dashboard .hd-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.host-dashboard .hd-actionsrow { display: flex; align-items: center; gap: 10px; }
.host-dashboard .hd-actbtn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px; border: 0; border-radius: 6px; color: #fff; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s, transform .08s; }
.host-dashboard .hd-actbtn:active { transform: translateY(1px); }
.host-dashboard .hd-actbtn--dep { background: #1f9d57; }
.host-dashboard .hd-actbtn--dep:hover { background: #178048; }
.host-dashboard .hd-actbtn--wd { background: #e9484a; }
.host-dashboard .hd-actbtn--wd:hover { background: #d23c3e; }
.host-dashboard .hd-block { margin-bottom: 16px; }
.host-dashboard .hd-block__lbl { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #7a8194; }
.host-dashboard .hd-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.host-dashboard .hd-tile { position: relative; overflow: hidden; background: #fff; border: 1px solid #E4E6EF; border-radius: 8px; padding: 14px 16px 12px 18px; }
.host-dashboard .hd-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--hd-brand); }
.host-dashboard .hd-tile--ink::before { background: var(--hd-ink); }
.host-dashboard .hd-tile__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; min-height: 22px; }
.host-dashboard .hd-tile__k { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #7a8194; white-space: nowrap; }
.host-dashboard .hd-tile__k svg { color: var(--hd-brand-600); }
.host-dashboard .hd-tile--ink .hd-tile__k svg { color: var(--hd-ink); }
.host-dashboard .hd-tile__v { font-size: 26px; font-weight: 700; letter-spacing: -.01em; color: #212121; font-variant-numeric: tabular-nums; }
.host-dashboard .hd-tile__sub { margin-top: 4px; font-size: 11.5px; color: #9aa0ac; }
.host-dashboard .hd-tile__sub--empty { color: #c98300; font-weight: 600; }
.host-dashboard .hd-skinsel { border: 1px solid #E4E6EF; border-radius: 5px; background: #f7f8fa; color: #3F4254; font-family: inherit; font-size: 11.5px; font-weight: 600; padding: 3px 6px; max-width: 130px; cursor: pointer; }
.host-dashboard .hd-skinsel:focus { outline: none; border-color: var(--hd-brand); box-shadow: 0 0 0 3px rgba(226, 1, 26, .15); }
.host-dashboard .hd-shim { display: block; border-radius: 6px; background: linear-gradient(100deg, #eef0f4 40%, #f8f9fb 50%, #eef0f4 60%); background-size: 200% 100%; animation: hd-shimmer 1.1s linear infinite; }
@keyframes hd-shimmer { to { background-position: -200% 0; } }
/* Mobile-only quick menu (real view: hide-on-desktop) */
.host-dashboard .hd-quick { display: none; margin-bottom: 16px; }
.host-dashboard .hd-quick__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.host-dashboard .hd-quick__item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; background: #fff; border: 1px solid #E4E6EF; border-radius: 8px; font-family: inherit; font-size: 12px; font-weight: 600; color: #3F4254; cursor: pointer; }
.host-dashboard .hd-quick__item svg { color: var(--hd-brand-600); }
.host-dashboard .hd-quick__item:active { background: var(--hd-brand-50); }
/* Promoter / affiliation box */
.host-dashboard .hd-aff { display: grid; grid-template-columns: 1fr 2.2fr; gap: 12px; margin-bottom: 16px; }
.host-dashboard .hd-aff__code, .host-dashboard .hd-aff__linkbox { background: #fff; border: 1px solid #E4E6EF; border-radius: 8px; padding: 14px 16px; }
.host-dashboard .hd-aff__label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--hd-brand-700); margin-bottom: 10px; }
.host-dashboard .hd-aff__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.host-dashboard .hd-aff__row .hd-aff__label { margin-bottom: 0; }
.host-dashboard .hd-aff__inputrow { display: flex; gap: 8px; }
.host-dashboard .hd-aff__inputrow .input { flex: 1; min-width: 0; }
.host-dashboard .hd-qrbtn { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 6px; background: var(--hd-ink); color: #fff; padding: 8px 13px; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.host-dashboard .hd-qrbtn:hover { background: #2b2f3a; }
.host-dashboard .hd-copybtn { width: 40px; border: 0; border-radius: 6px; background: var(--hd-brand-600); color: #fff; cursor: pointer; display: grid; place-items: center; }
.host-dashboard .hd-copybtn:hover { background: var(--hd-brand-700); }
/* Bet/Win/Profit panels (Sport stats · Third parties) */
.host-dashboard .hd-widget { background: #fff; border: 1px solid #E4E6EF; border-radius: 8px; margin-bottom: 16px; overflow: hidden; }
.host-dashboard .hd-widget__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 13px 18px; border-bottom: 1px solid #EBEDF3; background: #fafbfc; }
.host-dashboard .hd-widget__title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #212121; }
.host-dashboard .hd-widget__title svg { color: var(--hd-brand-600); }
.host-dashboard .hd-widget__range { font-size: 12px; color: #7a8194; }
.host-dashboard .hd-widget__body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; padding: 18px; align-items: start; }
.host-dashboard .hd-stats4 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.host-dashboard .hd-stat { background: #fafbfc; border: 1px solid #EBEDF3; border-radius: 8px; padding: 14px 12px; text-align: center; }
.host-dashboard .hd-stat__k { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #7a8194; margin-bottom: 6px; }
.host-dashboard .hd-stat__v { font-size: 17px; font-weight: 700; color: #3F4254; font-variant-numeric: tabular-nums; }
.host-dashboard .hd-stat__v--pos { color: #178048; }
.host-dashboard .hd-stat__v--neg { color: #d2293a; }
.host-dashboard .hd-chartcol { min-width: 0; padding-top: 4px; }
.host-dashboard .hd-legend { display: flex; justify-content: flex-end; gap: 16px; margin-bottom: 8px; font-size: 12px; color: #5a6172; }
.host-dashboard .hd-legend span { display: inline-flex; align-items: center; gap: 6px; }
.host-dashboard .hd-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.host-dashboard .hd-xlabels { display: flex; justify-content: space-between; padding: 6px 0 0 36px; font-size: 10.5px; color: #9aa0ac; font-variant-numeric: tabular-nums; }
.host-dashboard .hd-empty { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 42px 18px; color: #9aa0ac; font-size: 13px; }
/* Responsive (brief §11): tiles stack, panel stats stack above the chart,
promoter box goes single-column, quick menu appears on phones. */
@media (max-width: 1100px) {
.host-dashboard .hd-widget__body { grid-template-columns: 1fr; }
.host-dashboard .hd-stats4 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
.host-dashboard .hd-tiles { grid-template-columns: 1fr 1fr; }
.host-dashboard .hd-aff { grid-template-columns: 1fr; }
.host-dashboard .hd-stats4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
.host-dashboard .hd-topbar { flex-direction: column; }
.host-dashboard .hd-actionsrow { width: 100%; }
.host-dashboard .hd-actbtn { flex: 1; justify-content: center; }
.host-dashboard .hd-tiles { grid-template-columns: 1fr; }
.host-dashboard .hd-quick { display: block; }
.host-dashboard .hd-xlabels span:nth-child(even) { display: none; }
}
/* ===================================================================
Users (HostUsers.jsx) — hero filters, tree chrome, modals, mobile
=================================================================== */
.host-users .hu-hero { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.host-users .hu-hero .hu-span2 { grid-column: span 2; }
.host-users .hu-modeswitch { display: inline-flex; align-items: center; border: 1px solid #e4e6ef; border-radius: 8px; overflow: hidden; background: #fff; }
.host-users .hu-modeswitch button { border: 0; background: #fff; color: #5a6172; font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 14px; cursor: pointer; }
.host-users .hu-modeswitch button.active { background: var(--p-500); color: #fff; }
.host-users .hu-newbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.hu-rolechip { display: inline-flex; align-items: center; gap: 5px; color: #fff; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 5px; white-space: nowrap; }
.hu-rolechip i { font-style: normal; opacity: .72; font-size: 10px; font-variant-numeric: tabular-nums; }
.hu-gate { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; background: #f4f5f8; border: 1px solid #e4e6ef; border-radius: 4px; padding: 1px 5px; color: var(--p-700); white-space: nowrap; }
.host-users .hu-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.host-users .hu-crumbs { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-tertiary); flex-wrap: wrap; }
.host-users .hu-crumbs button { background: #f4f5f8; border: 1px solid #e9ebf1; border-radius: 5px; padding: 4px 10px; font-family: inherit; font-size: 12.5px; font-weight: 700; color: #2b2f3a; cursor: pointer; }
.host-users .hu-crumbs button:hover:not(:disabled) { color: var(--p-600); border-color: var(--p-300); }
.host-users .hu-crumbs button.active { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); cursor: default; }
.host-users .hu-neg, .host-users .hp-balcell__lines b.hu-neg { color: #e9484a; }
.host-users .hu-subblock { display: inline-flex; background: #fde8e8; color: #e9484a; border: 1px solid #f6c6c6; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.host-users .hu-iconbtn { width: 24px; height: 24px; border: 0; border-radius: 5px; background: #eef1f6; color: #5a6172; cursor: pointer; display: inline-grid; place-items: center; vertical-align: middle; }
.host-users .hu-iconbtn:hover { background: #28387a; color: #fff; }
.host-users .hu-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.host-users .hu-cards { display: flex; flex-direction: column; gap: 10px; }
.host-users .hu-card { background: #fff; border: 1px solid #e4e6ef; border-radius: 10px; overflow: hidden; }
.host-users .hu-card__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 0; background: none; text-align: left; cursor: pointer; font-family: inherit; }
.host-users .hu-card__user { font-weight: 700; font-size: 14px; color: #181c32; word-break: break-all; }
.host-users .hu-card__bal { font-weight: 700; font-variant-numeric: tabular-nums; color: #1f9d57; }
.host-users .hu-card__bal.hu-neg { color: #e9484a; }
.host-users .hu-card__last { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.host-users .hu-card__chips { display: flex; gap: 6px; padding: 0 14px 10px; flex-wrap: wrap; }
.host-users .hu-card__body { border-top: 1px dashed #e4e6ef; padding: 10px 14px 14px; }
.host-users .hu-card__row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 12.5px; color: #5a6172; }
.host-users .hu-card__row b { color: #181c32; font-variant-numeric: tabular-nums; }
.host-users .hu-card__acts { display: flex; gap: 8px; margin-top: 10px; }
.host-users .hu-card__acts .rpt-btn { flex: 1; min-width: 0; height: 38px; font-size: 12.5px; padding: 0 10px; }
.host-users .hu-filters-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e4e6ef; border-radius: 12px; padding: 0 16px; height: 52px; font-family: inherit; font-weight: 600; font-size: 13.5px; color: #3f4254; cursor: pointer; }
.host-users .hu-filters-btn__n { background: var(--p-500); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; }
.hu-modal-scrim { position: fixed; inset: 0; z-index: 220; background: rgba(15, 20, 32, .5); backdrop-filter: blur(3px); display: grid; place-items: start center; padding: 26px 16px; overflow: auto; }
.hu-modal { width: min(680px, 96vw); background: #fff; border-radius: 12px; box-shadow: 0 30px 70px -15px rgba(15, 20, 32, .4); display: flex; flex-direction: column; max-height: calc(100vh - 52px); }
.hu-modal--wide { width: min(980px, 96vw); }
.hu-modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 22px 12px; border-bottom: 1px solid #eef0f3; }
.hu-modal__title { font-size: 19px; font-weight: 700; color: #2b2f3a; }
.hu-modal__sub { margin-top: 3px; font-size: 11.5px; color: #7a8194; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.hu-modal__x { width: 34px; height: 34px; border: 0; border-radius: 8px; background: #eef1f6; color: #3f4254; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.hu-modal__x:hover { background: #e9484a; color: #fff; }
.hu-modal__body { padding: 16px 22px; overflow: auto; }
.hu-modal__foot { display: flex; gap: 10px; align-items: center; padding: 14px 22px; border-top: 1px solid #eef0f3; background: #f8f9fb; border-radius: 0 0 12px 12px; }
.hu-modal__foot button:disabled { opacity: .5; cursor: not-allowed; }
.hu-errbox { display: flex; gap: 8px; align-items: center; background: #fde8e8; border: 1px solid #f6c6c6; color: #b02a37; border-radius: 8px; padding: 10px 12px; font-size: 12.5px; font-weight: 600; margin-bottom: 12px; }
.hu-formsec { font-size: 13.5px; font-weight: 700; color: #28387a; margin: 18px 0 10px; }
.hu-formsec__opt { font-weight: 500; font-size: 11.5px; color: #a1a5b7; margin-left: 8px; }
.hu-form3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.hu-form3 .hu-span2 { grid-column: span 2; }
.hu-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hu-field .input, .hu-field .select { width: 100%; }
.hu-field--err .input, .hu-field--err .select { border-color: #e9484a; box-shadow: 0 0 0 3px rgba(233, 72, 74, .15); }
.hu-field__err { font-size: 11.5px; color: #d23c3e; font-weight: 600; }
.hu-field__note { font-size: 11px; color: #a1a5b7; }
.hu-eye { position: absolute; right: 0; top: 0; bottom: 0; width: 38px; border: 0; background: #28387a; color: #fff; border-radius: 0 4px 4px 0; cursor: pointer; }
.hu-matrix .select { min-width: 170px; }
.host-users .hu-headstats { margin-left: auto; display: flex; align-items: center; border: 1px solid #e4e6ef; border-radius: 10px; padding: 10px 6px; background: #fff; }
.host-users .hu-tabgates { font-size: 11.5px; color: #a1a5b7; margin: -8px 0 16px; line-height: 1.9; }
.hu-sheet { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: #f7f8fa; display: flex; flex-direction: column; box-shadow: -20px 0 60px rgba(15, 20, 32, .35); }
.hu-sheet__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; background: #fff; border-bottom: 1px solid #e4e6ef; font-weight: 700; font-size: 15px; color: #2b2f3a; }
.hu-sheet__head > span { display: inline-flex; align-items: center; gap: 8px; }
.hu-sheet__body { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.hu-sheet__body .filter-hero__card { width: 100%; }
.hu-sheet__foot { display: flex; gap: 10px; padding: 12px 14px; background: #fff; border-top: 1px solid #e4e6ef; }
@media (max-width: 1280px) {
.host-users .hu-hero { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
.host-users .hu-hero { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.host-users .hu-headstats { display: none; }
}
@media (max-width: 860px) {
.host-users .hu-hero { display: none; } /* JS swaps to the Filters button + sheet */
.host-users .hu-table-wrap { display: none; } /* JS swaps to stacked cards */
.host-users .hu-newbtns { width: 100%; }
.host-users .hu-newbtns .rpt-btn { flex: 1 1 44%; }
.host-users .hu-toolbar { flex-direction: column; align-items: flex-start; }
.hu-modal, .hu-modal--wide { width: 100vw; }
.hu-modal--full { position: fixed; inset: 0; max-height: none; border-radius: 0; }
.hu-modal--full .hu-modal__foot { border-radius: 0; }
.hu-form3 { grid-template-columns: 1fr; }
.hu-form3 .hu-span2 { grid-column: auto; }
.host-users .hu-edittabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.host-users .hu-edittabs .hp-tab { white-space: nowrap; }
.host-users .hp-pager__pages { margin-left: 0; }
}
/* ===================================================================
Host Players — elevation pass (hpx-*)
=================================================================== */
/* Compact header buttons + count badge */
.host-players .hpx-headbtn { height: 38px; min-width: 0; padding: 0 14px; font-size: 13px; }
.host-players .hpx-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: rgba(255,255,255,.25); font-size: 10.5px; font-weight: 700; }
/* --- Hero filter strip (list) --- */
.host-players .hpx-hero-wrap { margin-bottom: 12px; }
.host-players .hpx-hero { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 10px; }
.host-players .hpx-fcard { background: #fff; border: 1px solid var(--border-default); border-radius: 10px; padding: 9px 11px 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0; box-shadow: 0 1px 2px rgba(15,20,32,.04); transition: border-color .12s, box-shadow .12s; }
.host-players .hpx-fcard:hover { border-color: var(--border-strong); box-shadow: 0 3px 8px -2px rgba(15,20,32,.08); }
.host-players .hpx-fcard:focus-within { border-color: var(--p-400); box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-500) 14%, transparent); }
.host-players .hpx-flabel { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #7a8194; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.host-players .hpx-finput, .host-players .hpx-fselect { width: 100%; height: 26px; border: 0; background: transparent; padding: 0; font-size: 13px; font-weight: 500; color: #1f2937; font-family: inherit; outline: none; min-width: 0; }
.host-players .hpx-finput::placeholder { color: #b0b6c6; font-weight: 400; }
.host-players .hpx-fselect { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0 center; padding-right: 14px; }
.host-players .hpx-fdates { display: flex; gap: 6px; }
.host-players .hpx-fcard--result { background: linear-gradient(180deg, #fff, color-mix(in oklab, var(--p-500) 4%, #fff)); border-color: color-mix(in oklab, var(--p-500) 22%, var(--border-default)); }
.host-players .hpx-fval { font-size: 18px; font-weight: 700; color: #181c32; font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 6px; }
.host-players .hpx-fval span { font-size: 11px; font-weight: 500; color: #9aa1b4; }
/* Mobile: strip collapses behind a Filters button opening a full-height sheet */
.host-players .hpx-filters-btn { display: none; }
.host-players .hpx-sheet-head, .host-players .hpx-sheet-foot { display: none; }
/* --- Active filter pills --- */
.host-players .hpx-pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 10px; }
.host-players .hpx-pills-label { font-size: 11px; color: #9aa1b4; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.host-players .hpx-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; background: var(--p-50); color: var(--p-700); border: 1px solid color-mix(in oklab, var(--p-500) 22%, transparent); border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.host-players .hpx-pill button { width: 16px; height: 16px; border-radius: 999px; border: 0; background: color-mix(in oklab, var(--p-500) 16%, transparent); color: var(--p-700); cursor: pointer; display: inline-grid; place-items: center; padding: 0; }
.host-players .hpx-clearall { font-size: 11.5px; color: var(--p-600); background: none; border: 0; cursor: pointer; font-weight: 600; padding: 4px 8px; font-family: inherit; }
/* --- Columns popover --- */
.host-players .hpx-cols-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 120; width: 260px; background: #fff; border: 1px solid var(--border-default); border-radius: 10px; box-shadow: 0 14px 40px -8px rgba(15,20,32,.25); overflow: hidden; }
.host-players .hpx-cols-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); font-size: 12.5px; font-weight: 700; color: #181c32; }
.host-players .hpx-cols-head span { margin-right: auto; }
.host-players .hpx-cols-reset { border: 0; background: none; color: var(--p-600); font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.host-players .hpx-cols-x { border: 0; background: none; color: #9aa1b4; cursor: pointer; display: inline-grid; place-items: center; padding: 2px; }
.host-players .hpx-cols-list { max-height: 300px; overflow-y: auto; padding: 6px; }
.host-players .hpx-cols-list label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; color: #3f4254; cursor: pointer; }
.host-players .hpx-cols-list label:hover { background: var(--p-50); }
.host-players .hpx-cols-list label span { margin-right: auto; }
.host-players .hpx-cols-req, .host-players .hpx-cols-pd { font-style: normal; font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; }
.host-players .hpx-cols-req { background: #f1f3f7; color: #7a8194; }
.host-players .hpx-cols-pd { background: #fdeaf1; color: #d6336c; }
.host-players .hpx-cols-foot { padding: 8px 12px; border-top: 1px solid var(--border-subtle); font-size: 10.5px; color: #9aa1b4; }
/* --- Table refinements --- */
.host-players .hpx-th { border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 0; font-family: inherit; }
.host-players .hpx-th:hover { color: var(--p-500); }
/* legacy rule left-aligns td:nth-child(5); with the real default-hidden set the 5th column is no longer Balance — recentre and let the Balance cell's inline style win */
.host-players .hpx-list td:nth-child(5) { text-align: center; }
.host-players .hpx-usercell { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.host-players .hpx-imp { width: 26px; height: 26px; border: 1px solid var(--border-default); border-radius: 6px; background: #fff; color: #7a8194; cursor: pointer; display: inline-grid; place-items: center; transition: all .12s; }
.host-players .hpx-imp:hover { border-color: var(--p-300); color: var(--p-600); background: var(--p-50); }
.host-players .hpx-testchip { font-size: 9.5px; }
.host-players .hpx-baltotal { font-size: 12.5px; }
.host-players .hpx-baltotal b { font-weight: 800; }
.host-players .hpx-regip { font-size: 10.5px; color: #9aa1b4; margin-top: 2px; }
.host-players .hpx-blockcell { display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.host-players .hpx-noteic { border: 0; background: none; color: #f0a020; cursor: pointer; display: inline-grid; place-items: center; padding: 2px; }
.host-players .hpx-subnet { color: #e9484a; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.host-players .hp-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px; color: #5a6172; }
/* --- Mobile stacked cards --- */
.host-players .hpx-cards { display: none; flex-direction: column; gap: 10px; }
.host-players .hpx-cards-empty { padding: 30px; text-align: center; color: #9aa1b4; background: #fff; border: 1px solid var(--border-default); border-radius: 10px; }
.host-players .hpx-card { background: #fff; border: 1px solid var(--border-default); border-radius: 10px; overflow: hidden; }
.host-players .hpx-card summary { list-style: none; cursor: pointer; padding: 12px 14px; }
.host-players .hpx-card summary::-webkit-details-marker { display: none; }
.host-players .hpx-card[open] summary { border-bottom: 1px solid var(--border-subtle); }
.host-players .hpx-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.host-players .hpx-card-user { font-weight: 700; color: #181c32; font-size: 13.5px; }
.host-players .hpx-card-bal { font-variant-numeric: tabular-nums; color: #1f9d57; font-size: 13px; }
.host-players .hpx-card-sub { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11px; color: #9aa1b4; flex-wrap: wrap; }
.host-players .hpx-card-body { padding: 10px 14px 12px; }
.host-players .hpx-card-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid #f1f3f7; font-size: 12.5px; }
.host-players .hpx-card-row span { color: #7a8194; }
.host-players .hpx-card-row b { color: #181c32; font-weight: 600; }
.host-players .hpx-card-acts { display: flex; gap: 8px; margin-top: 10px; }
.host-players .hpx-card-acts .rpt-btn { flex: 1; }
.host-players .hpx-mini-btn { height: 34px; min-width: 0; padding: 0 12px; font-size: 12px; }
/* --- Edit view: header + pill tabs --- */
.host-players .hpx-edit-head { flex-wrap: wrap; }
.host-players .hpx-avatar { width: 50px; height: 50px; border-radius: 10px; background: linear-gradient(135deg, var(--p-500), var(--p-700)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 16px; letter-spacing: .02em; box-shadow: 0 2px 8px -2px rgba(42,63,208,.4); flex-shrink: 0; }
.host-players .hpx-edit-id { min-width: 0; }
.host-players .hpx-edit-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: #3f4254; }
.host-players .hpx-edit-sub b { font-size: 15px; font-weight: 700; }
.host-players .hpx-edit-sub > span:not(.chip) { color: #9aa1b4; font-weight: 500; font-size: 12.5px; }
.host-players .hpx-head-bal { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
.host-players .hpx-head-bal > div { display: flex; flex-direction: column; gap: 2px; }
.host-players .hpx-head-bal span { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9aa1b4; }
.host-players .hpx-head-bal b { font-size: 14px; font-weight: 700; color: #181c32; font-variant-numeric: tabular-nums; }
.host-players .hpx-tabs { display: flex; gap: 4px; margin-bottom: 18px; padding: 6px 8px; background: #fff; border: 1px solid var(--border-default); border-radius: 10px; overflow-x: auto; }
.host-players .hpx-tab { border: 1px solid transparent; background: transparent; color: #5a6172; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 500; padding: 8px 12px; border-radius: 8px; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; }
.host-players .hpx-tab:hover { background: #f3f6f9; color: #181c32; }
.host-players .hpx-tab.active { background: var(--p-50); border-color: var(--p-200); color: var(--p-700); font-weight: 700; }
/* --- Edit view: gate notes, stats, empty states, doc links --- */
.host-players .hpx-gate-note { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #9aa1b4; margin-bottom: 14px; flex-wrap: wrap; }
.host-players .hpx-gate-note code { background: #fdeaf1; color: #d6336c; padding: 1px 5px; border-radius: 4px; font-size: 10.5px; }
.host-players .hpx-stat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.host-players .hpx-stat-panel .hp-info__row .v { font-variant-numeric: tabular-nums; }
.host-players .hpx-empty { padding: 48px 20px; text-align: center; color: #9aa1b4; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.host-players .hpx-empty-t { font-size: 13.5px; font-weight: 600; color: #5a6172; }
.host-players .hpx-empty-s { font-size: 12px; }
.host-players .hpx-empty-gate { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 11px; background: #f1f3f7; color: #7a8194; padding: 4px 10px; border-radius: 999px; }
.host-players .hpx-doclink { border: 0; background: #e6f4ec; color: #1f9d57; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-family: inherit; max-width: 100%; overflow: hidden; }
.host-players .hpx-doclink .hp-mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* KYC decision row — the reason box and the four decisions, wrapping on narrow
viewports rather than pushing Reject off the panel. */
.host-players .hpx-kyc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border, #e8eaf0); }
/* --- Modals (block / notes / new player) --- */
.hpx-scrim { position: fixed; inset: 0; z-index: 400; background: rgba(15,20,32,.5); backdrop-filter: blur(2px); display: grid; place-items: start center; padding: 30px 16px; overflow: auto; }
.hpx-modal { background: #fff; border-radius: 12px; box-shadow: 0 30px 70px -15px rgba(15,20,32,.4); display: flex; flex-direction: column; max-height: calc(100vh - 60px); width: 100%; }
.hpx-modal--sm { max-width: 480px; }
.hpx-modal--lg { max-width: 860px; }
.hpx-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); font-size: 16px; font-weight: 700; color: #181c32; }
.hpx-modal-x { border: 0; background: #f1f3f7; color: #5a6172; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; display: inline-grid; place-items: center; }
.hpx-modal-body { padding: 16px 20px; overflow-y: auto; }
.hpx-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border-subtle); background: #fafbfc; border-radius: 0 0 12px 12px; }
.hpx-modal-foot .rpt-btn { min-width: 0; height: 40px; padding: 0 18px; font-size: 13px; }
.hpx-modal-foot .rpt-btn:disabled { opacity: .5; cursor: not-allowed; }
.hpx-modal-p { font-size: 13px; color: #3f4254; line-height: 1.6; margin: 0 0 12px; }
.hpx-modal-p code { background: #fdeaf1; color: #d6336c; padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }
.hpx-modal-ta { width: 100%; resize: vertical; padding: 10px 12px; font-family: inherit; }
.hpx-note { border: 1px solid var(--border-subtle); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.hpx-note-top { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; margin-bottom: 4px; }
.hpx-note-top b { color: #e9484a; }
.hpx-note-top span { color: #9aa1b4; font-size: 11px; }
.hpx-note-txt { font-size: 12.5px; color: #3f4254; line-height: 1.5; }
.hpx-msec { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--p-600); border-bottom: 1px solid #f1f3f7; padding: 12px 0 6px; margin-bottom: 12px; }
.hpx-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
.hpx-nf { margin-bottom: 10px; min-width: 0; }
.hpx-nf .form-label { display: block; margin-bottom: 4px; }
.hpx-nf .input, .hpx-nf .select { width: 100%; }
.hpx-nf--err .input, .hpx-nf--err .select { border-color: #e9484a; }
.hpx-nf-err { font-size: 11px; color: #e9484a; margin-top: 4px; font-weight: 600; }
.hpx-nf-hint { font-size: 10.5px; color: #9aa1b4; margin-top: 4px; line-height: 1.45; }
.hpx-star { color: #e9484a; }
.hpx-checkrow { display: flex; gap: 20px; align-items: center; min-height: 38px; flex-wrap: wrap; }
.hpx-checkrow label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #3f4254; }
.hpx-dob { display: flex; gap: 8px; }
.hpx-dob .select, .hpx-dob .input { min-width: 0; flex: 1; }
/* --- Responsive breakpoints (§11) --- */
@media (max-width: 1000px) {
.host-players .hpx-stat-cols { grid-template-columns: 1fr; }
.host-players .hpx-head-bal { margin-left: 0; width: 100%; }
}
@media (max-width: 860px) {
.host-players .hpx-table-wrap { display: none; }
.host-players .hpx-cards { display: flex; }
.host-players .hpx-filters-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border: 1px solid var(--border-default); border-radius: 10px; background: #fff; color: #3f4254; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(15,20,32,.05); }
.host-players .hpx-filters-btn .hpx-count { background: var(--p-500); color: #fff; }
.host-players .hpx-hero-wrap { display: none; }
.host-players .hpx-hero-wrap.open { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 350; background: #f2f3f8; margin: 0; padding: 0 14px 14px; overflow-y: auto; }
.host-players .hpx-hero-wrap.open .hpx-hero { grid-template-columns: 1fr; }
.host-players .hpx-sheet-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: #f2f3f8; padding: 14px 2px 10px; font-size: 16px; font-weight: 700; color: #181c32; z-index: 2; }
.host-players .hpx-sheet-close { width: 34px; height: 34px; border: 1px solid var(--border-default); border-radius: 8px; background: #fff; color: #5a6172; cursor: pointer; display: grid; place-items: center; }
.host-players .hpx-sheet-foot { display: flex; gap: 10px; position: sticky; bottom: 0; background: #f2f3f8; padding: 12px 0 4px; }
.host-players .hpx-sheet-foot .rpt-btn { flex: 1; min-width: 0; }
.hpx-mgrid { grid-template-columns: 1fr; }
.hpx-scrim { padding: 0; }
.hpx-modal, .hpx-modal--sm, .hpx-modal--lg { max-width: none; min-height: 100vh; max-height: none; border-radius: 0; }
.hpx-modal-foot { border-radius: 0; position: sticky; bottom: 0; }
}
/* ===================================================================
Sport coupons (HostSportCoupons.jsx) — polish + responsive density.
Structural layout is inline in the page; these are hover/focus
states, the hero span rule and mobile compaction.
=================================================================== */
.hsc .rpt-btn { height: 40px; min-width: 0; padding: 0 16px; font-size: 13px; border-radius: 8px; }
.hsc .hsc-hero .hsc-fcard--range { grid-column: span 2; }
.hsc .hsc-dtin:focus { outline: none; border-color: var(--p-300); box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-500) 14%, transparent); }
.hsc .hsc-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.hsc .hsc-th-sort:hover { color: var(--p-300); }
.hsc .hsc-table td { white-space: nowrap; }
.hsc .hsc-table tbody tr:hover td { background: #f8fafc; }
.hsc .hsc-link:hover { text-decoration: underline; }
.hsc-colrow:hover { background: var(--n-25); }
.hsc .hsc-card { box-shadow: 0 1px 2px rgba(15, 20, 32, .05); }
.hsc .hsc-card--open { border-color: var(--p-200); box-shadow: 0 6px 16px -6px rgba(15, 20, 32, .14); }
.hsc-sheet { animation: hscSlideIn .18s ease-out; }
@keyframes hscSlideIn { from { transform: translateX(30px); opacity: .4; } to { transform: none; opacity: 1; } }
.hsc-sheet__body .filter-hero__card { box-shadow: none; }
@media (max-width: 860px) {
.host-sc.hsc .sc-bars { position: static; margin-top: 12px; }
.host-sc.hsc .sc-bar { padding: 12px; }
.host-sc.hsc .sc-bar .v { font-size: 18px; }
}
/* ===================================================================
HOST REPORT SHELL (src/report-shell.jsx) — hrs-* chrome
Shared by all Phase-B Report ▾ pages. Token-based; --p-* resolves to
the Iwakiri red ramp under html[data-theme="iwakiri"].
=================================================================== */
/* ---- Page chrome ---- */
.hrs-page .page__title.hrs-title { color: var(--p-700); display: inline-flex; align-items: center; gap: 6px; }
.hrs-headactions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
/* ---- KPI strip ---- */
.hrs-kpiblock { margin-bottom: 14px; }
.hrs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.hrs-kpi { position: relative; background: var(--n-0); border: 1px solid var(--border-default); border-radius: 8px; padding: 12px 14px 10px 17px; box-shadow: var(--shadow-xs); overflow: hidden; }
.hrs-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--n-200); }
.hrs-kpi--brand::before { background: var(--p-500); }
.hrs-kpi--ok::before { background: var(--ok-500); }
.hrs-kpi--warn::before { background: var(--warn-500); }
.hrs-kpi--err::before { background: var(--err-500); }
.hrs-kpi__l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 5px; }
.hrs-kpi__v { font-size: 20px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; margin-top: 3px; white-space: nowrap; }
.hrs-kpi--ok .hrs-kpi__v { color: var(--ok-600); }
.hrs-kpi--err .hrs-kpi__v { color: var(--err-500); }
.hrs-kpi--warn .hrs-kpi__v { color: var(--warn-700); }
.hrs-kpi--brand .hrs-kpi__v { color: var(--p-600); }
.hrs-kpi__s { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
.hrs-kpis-note { margin-top: 7px; font-size: 12.5px; font-style: italic; color: #a1a5b7; }
/* ---- Filters: hero card strip (desktop) ---- */
.hrs-filters { margin-bottom: 12px; }
.hrs-hero { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.hrs-fcard { background: var(--n-0); border: 1px solid var(--border-default); border-radius: 8px; padding: 8px 11px 9px; min-width: 158px; box-shadow: var(--shadow-xs); display: flex; flex-direction: column; gap: 6px; transition: border-color .12s, box-shadow .12s; }
.hrs-fcard:hover { border-color: var(--border-strong); }
.hrs-fcard:focus-within { border-color: var(--p-400); box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-500) 12%, transparent); }
.hrs-fcard--grow { flex: 1 1 220px; }
.hrs-fcard--toggle { justify-content: space-between; }
.hrs-fcard--result { margin-left: auto; min-width: 130px; border-style: dashed; background: var(--n-25); }
.hrs-flab { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.hrs-fresult { font-size: 16px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.hrs-fctl { font-family: inherit; font-size: 13px; color: #3f4254; background: var(--n-0); border: 1px solid var(--border-default); border-radius: 5px; height: 34px; padding: 0 10px; width: 100%; min-width: 0; }
select.hrs-fctl { padding-right: 26px; }
.hrs-fctl:focus { outline: none; border-color: var(--p-400); box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-500) 14%, transparent); }
.hrs-fctl:disabled { background: var(--n-50); color: var(--text-disabled); cursor: not-allowed; }
.hrs-fctl--date { width: 132px; }
.hrs-fctl--time { width: 96px; }
.hrs-rangerow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hrs-rangesep { color: var(--text-tertiary); font-size: 12px; }
.hrs-togglewrap { display: flex; align-items: center; min-height: 34px; }
/* Action buttons (Search dark / Reset red / Export green — rpt-btn look, token-safe) */
.hrs-fbtns { display: flex; gap: 10px; align-items: flex-end; margin-left: auto; }
.hrs-fcard--result + .hrs-fbtns { margin-left: 0; }
.hrs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; min-width: 120px; padding: 0 18px; border: 0; border-radius: 5px; color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 2px rgba(15,20,32,.12); transition: background .12s, transform .04s; white-space: nowrap; }
.hrs-btn:active { transform: translateY(1px); }
.hrs-btn--search { background: #3a3f4b; }
.hrs-btn--search:hover { background: #2b2f3a; }
.hrs-btn--export { background: var(--ok-500); }
.hrs-btn--export:hover { background: var(--ok-600); }
.hrs-btn--reset { background: #e9484a; }
.hrs-btn--reset:hover { background: #d23c3e; }
.hrs-btn--filters { background: var(--p-600); }
.hrs-btn--filters:hover { background: var(--p-700); }
/* ---- Multi-select popover ---- */
.hrs-multi { position: relative; }
.hrs-multi__btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; text-align: left; }
.hrs-multi__sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrs-multi__scrim { position: fixed; inset: 0; z-index: 60; }
.hrs-multi__pop { position: absolute; z-index: 61; top: calc(100% + 4px); left: 0; min-width: 220px; max-width: 300px; background: var(--n-0); border: 1px solid var(--border-default); border-radius: 8px; box-shadow: var(--shadow-popover); padding: 8px; }
.hrs-multi__search { margin-bottom: 6px; height: 30px; }
.hrs-multi__list { max-height: 230px; overflow: auto; display: flex; flex-direction: column; }
.hrs-multi__opt { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 5px; font-size: 13px; color: #3f4254; cursor: pointer; }
.hrs-multi__opt:hover { background: var(--n-50); }
.hrs-multi__opt input { accent-color: var(--p-500); }
.hrs-multi__none { padding: 10px 6px; font-size: 12.5px; color: var(--text-tertiary); text-align: center; }
.hrs-multi__foot { display: flex; justify-content: space-between; border-top: 1px solid var(--border-subtle); margin-top: 6px; padding-top: 6px; }
.hrs-multi__foot button { border: 0; background: none; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--p-600); cursor: pointer; padding: 3px 6px; }
/* ---- Mobile filter trigger row (hidden on desktop) ---- */
.hrs-filterbar { display: none; align-items: center; gap: 12px; }
.hrs-filterbar__result { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
/* ---- Active-filter pills ---- */
.hrs-pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.hrs-pills__lab { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-right: 2px; }
.hrs-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--p-50); color: var(--p-700); border: 1px solid var(--p-100); border-radius: 999px; padding: 3px 6px 3px 10px; font-size: 12px; font-weight: 600; }
.hrs-pill__x { display: grid; place-items: center; border: 0; background: transparent; color: var(--p-600); cursor: pointer; padding: 2px; border-radius: 999px; }
.hrs-pill__x:hover { background: var(--p-100); }
.hrs-clearall { border: 0; background: none; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--p-600); cursor: pointer; padding: 4px 8px; }
.hrs-clearall:hover { text-decoration: underline; }
/* ---- Mobile full-height filter sheet ---- */
.hrs-sheet-scrim { position: fixed; inset: 0; z-index: 230; background: rgba(15,20,32,.5); backdrop-filter: blur(2px); display: flex; justify-content: flex-end; }
.hrs-sheet { width: min(420px, 100%); height: 100%; background: #fff; display: flex; flex-direction: column; box-shadow: -18px 0 50px rgba(15,20,32,.3); }
.hrs-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border-default); }
.hrs-sheet__head > span { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #2b2f3a; }
.hrs-x { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 6px; background: var(--n-50); color: #3f4254; cursor: pointer; }
.hrs-x:hover { background: var(--n-100); }
.hrs-sheet__body { flex: 1; overflow: auto; padding: 16px 18px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; }
.hrs-sheet__field { display: flex; flex-direction: column; gap: 6px; }
.hrs-sheet__field > label { font-size: 13px; font-weight: 700; color: #3f4254; }
.hrs-sheet__field .hrs-fctl { height: 42px; }
.hrs-sheet__field .hrs-fctl--date, .hrs-sheet__field .hrs-fctl--time { flex: 1 1 40%; width: auto; }
.hrs-sheet__foot { display: flex; gap: 10px; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-default); background: var(--n-25); }
.hrs-sheet__foot .hrs-btn { flex: 1; min-width: 0; }
/* ---- Table (dark Metronic-style header) ---- */
.hrs-tenv { overflow: hidden; }
.hrs-tablewrap { overflow-x: auto; }
.hrs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.hrs-table thead th { position: sticky; top: 0; z-index: 2; background: #28387a; /* Phase F/F8: was var(--n-800) #181c32. The Host surface already had a settled dark header (#28387a) used by the legacy Host screens and by the protected BonusPrograms; the kit had introduced a second, near-identical navy. Unified onto the pre-existing one so the 40+ kit-based screens match what was already there. */ color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-align: left; padding: 10px 12px; white-space: nowrap; border-bottom: 1px solid var(--n-900); }
.hrs-table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; color: var(--text-primary); white-space: nowrap; }
.hrs-tenv--dense .hrs-table tbody td { padding: 6px 10px; }
.hrs-table tbody tr:hover td { background: var(--n-25); }
.hrs-trow--click { cursor: pointer; }
.hrs-trow--click:hover td { background: var(--p-50); }
.hrs-al-r { text-align: right !important; }
.hrs-al-c { text-align: center !important; }
.hrs-th-sort { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
.hrs-th-sort:hover { color: var(--p-200); }
.hrs-pos { background: color-mix(in oklab, var(--ok-500) 14%, transparent); color: var(--ok-700); font-weight: 700; }
.hrs-neg { background: color-mix(in oklab, var(--err-500) 12%, transparent); color: var(--err-700); font-weight: 700; }
.hrs-empty { padding: 40px 20px !important; text-align: center; color: var(--text-tertiary); font-size: 13px; }
.hrs-empty > div { margin-top: 6px; color: var(--text-secondary); font-weight: 500; }
.hrs-expandhead { width: 44px; }
.hrs-expandcell { width: 44px; text-align: center; }
.hrs-expand { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--border-default); border-radius: 5px; background: var(--n-0); color: #3f4254; cursor: pointer; }
.hrs-expand:hover { border-color: var(--p-300); color: var(--p-600); }
.hrs-detailrow > td { background: var(--n-50); padding: 12px 16px; border-bottom: 1px solid var(--border-default); white-space: normal; }
.hrs-table tfoot .hrs-totals td { padding: 10px 12px; font-weight: 700; white-space: nowrap; }
.hrs-totals--dark td { background: #3a4047; color: #fff; }
.hrs-totals--muted td { background: var(--n-100); color: var(--n-800); }
.hrs-totals--dark td.hrs-pos, .hrs-card--totals-dark .hrs-pos { background: #15803d; color: #fff; }
.hrs-totals--dark td.hrs-neg, .hrs-card--totals-dark .hrs-neg { background: #c0392b; color: #fff; }
/* ---- Mobile stacked cards (hidden on desktop) ---- */
.hrs-cards { display: none; padding: 10px; flex-direction: column; gap: 10px; }
.hrs-card { border: 1px solid var(--border-default); border-radius: 8px; background: var(--n-0); padding: 12px 14px; box-shadow: var(--shadow-xs); }
.hrs-card--click { cursor: pointer; }
.hrs-card--click:active { background: var(--p-50); }
.hrs-card__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; margin-bottom: 8px; }
.hrs-card__grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 12.5px; }
.hrs-card__grid > span { color: var(--text-tertiary); }
.hrs-card__grid > b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.hrs-card--totals-dark { background: #3a4047; border-color: #3a4047; color: #fff; }
.hrs-card--totals-dark .hrs-card__grid > span { color: rgba(255,255,255,.65); }
.hrs-card--totals-dark .hrs-card__grid > b { color: #fff; }
.hrs-card--totals-muted { background: var(--n-100); border-color: var(--n-150); }
/* ---- IN/OUT/NET summary bars ---- */
.hrs-bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 14px; }
.hrs-bar { border-radius: 8px; padding: 12px 16px; border: 1px solid var(--border-default); background: var(--n-0); border-left-width: 5px; }
.hrs-bar--ok { border-left-color: var(--ok-500); }
.hrs-bar--err { border-left-color: var(--err-500); }
.hrs-bar--warn { border-left-color: var(--warn-500); }
.hrs-bar--brand { border-left-color: var(--p-500); }
.hrs-bar--neutral { border-left-color: var(--n-300); }
.hrs-bar__l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 5px; }
.hrs-bar__v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap; }
.hrs-bar--ok .hrs-bar__v { color: var(--ok-600); }
.hrs-bar--err .hrs-bar__v { color: var(--err-500); }
.hrs-bar--warn .hrs-bar__v { color: var(--warn-700); }
.hrs-bar--brand .hrs-bar__v { color: var(--p-600); }
.hrs-bar__s { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
/* ---- Export block + audit line ---- */
.hrs-export { margin: 14px 0 4px; }
.hrs-export__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hrs-export__limit, .hrs-export__gate, .hrs-export__note { font-size: 12px; color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 5px; }
.hrs-export__gate code, .hrs-page .hrs-title code, .hrs-page .page__title code { background: var(--n-75); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 0 4px; font-family: var(--font-mono); font-size: 11px; color: var(--n-700); }
.hrs-audit { margin-top: 10px; border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--n-25); padding: 8px 12px; }
.hrs-audit__toggle { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; padding: 2px 0; }
.hrs-audit__toggle:hover { color: var(--text-primary); }
.hrs-audit__table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.hrs-audit__table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); padding: 4px 10px 4px 0; border-bottom: 1px solid var(--border-subtle); }
.hrs-audit__table td { padding: 5px 10px 5px 0; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); }
.hrs-audit__ok { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; background: var(--ok-50); color: var(--ok-700); border: 1px solid var(--ok-100); font-size: 11px; font-weight: 700; }
/* ---- Pager ---- */
.hrs-pager { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--border-default); background: var(--n-25); font-size: 12.5px; color: #5a6172; }
.hrs-tenv + .hrs-pager, .hrs-tenv .hrs-pager { border-radius: 0 0 8px 8px; }
.hrs-pager__show { display: flex; align-items: center; gap: 8px; }
.hrs-pager__select { width: auto; min-width: 66px; height: 30px; }
.hrs-pager__range b { color: var(--n-800); font-variant-numeric: tabular-nums; }
.hrs-pager__btns { margin-left: auto; display: inline-flex; gap: 6px; }
.hrs-pagebtn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: 5px; background: var(--n-0); color: #3f4254; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.hrs-pagebtn:hover:not(:disabled) { border-color: var(--p-300); color: var(--p-600); }
.hrs-pagebtn:disabled { opacity: .45; cursor: not-allowed; }
/* ---- Section wrapper ---- */
.hrs-section { margin: 18px 0 0; }
.hrs-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.hrs-section__title { font-size: 15px; font-weight: 700; color: var(--n-800); }
.hrs-section__sub { font-size: 12.5px; color: var(--text-tertiary); margin-top: 2px; }
.hrs-section__actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* ============ Responsive collapses (brief §11, ≤860px) ============ */
@media (max-width: 1100px) {
.hrs-fbtns { width: 100%; margin-left: 0; }
.hrs-fbtns .hrs-btn { flex: 1; }
}
@media (max-width: 860px) {
/* Filter strip → "Filters (n)" button + full-height sheet */
.hrs-hero { display: none; }
.hrs-filterbar { display: flex; }
/* Tables with renderCard → stacked cards */
.hrs-tenv--cards .hrs-tablewrap { display: none; }
.hrs-tenv--cards .hrs-cards { display: flex; }
/* KPI strip → horizontally scrollable, numbers stay legible */
.hrs-kpis { display: flex; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
.hrs-kpis .hrs-kpi { flex: 0 0 min(72vw, 230px); scroll-snap-align: start; }
/* Summary bars stack */
.hrs-bars { grid-template-columns: 1fr; }
/* Pager centers */
.hrs-pager { justify-content: center; }
.hrs-pager__btns { margin-left: 0; }
.hrs-pager__range { width: 100%; text-align: center; }
/* Header actions wrap under the title */
.hrs-page .page__header { flex-wrap: wrap; gap: 10px; }
.hrs-headactions { width: 100%; justify-content: flex-start; }
/* Multi popover fits narrow screens */
.hrs-multi__pop { max-width: calc(100vw - 48px); }
}
/* ===================================================================
Phase-B report page extras. The hrs-* shell owns page chrome; these
are the per-report structures it does not cover: drill-down subnet
rows, per-report modals, the Daily tab strip, and the mobile card
details each report renders through HrsTable's renderCard.
Prefixes: hrbet- (Bet report) · hrdy- (Daily) · hrcm- (Commissions)
hrpc- (Provider costs) · hrnw- (NetWin) · hrbz- (Business)
=================================================================== */
/* ---- shared primitives across the six report pages ---- */
.hrbet-modal-scrim, .hrcm-scrim, .hrnw-modal-scrim {
position: fixed; inset: 0; z-index: 240; background: rgba(15,20,32,.5);
backdrop-filter: blur(2px); display: grid; place-items: center; padding: 24px 16px;
}
.hrbet-modal, .hrcm-modal, .hrpc-modal, .hrnw-modal {
background: var(--n-0); border-radius: 12px; width: min(680px, 96vw);
max-height: calc(100vh - 56px); display: flex; flex-direction: column; overflow: hidden;
box-shadow: 0 26px 70px -14px rgba(15,20,32,.42);
}
.hrcm-modal--wide { width: min(940px, 96vw); }
.hrbet-modal__head, .hrcm-modal__head, .hrnw-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
}
.hrcm-modal__title, .hrnw-modal__title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.hrnw-modal__sub, .hrpc-modal__who { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.hrbet-modal__body, .hrcm-modal__body, .hrnw-modal__body { padding: 16px 20px; overflow: auto; }
.hrbet-modal__foot, .hrcm-mfoot, .hrnw-modal__foot {
display: flex; justify-content: flex-end; gap: 10px; padding: 13px 20px;
border-top: 1px solid var(--border-subtle); background: var(--n-25);
}
.hrcm-mnote, .hrnw-modal__note, .hrbz-drillnote, .hrbet-subnote, .hrpc-profile-note, .hrcm-subempty,
.hrbet-subempty, .hrnw-none, .hrpc-notcost, .hrbz-subnote, .hrpc-info, .hrpc-lastupd, .hrpc-periodline {
font-size: 11.5px; color: var(--text-tertiary); line-height: 1.55;
}
.hrnw-modal__note--warn { color: var(--warn-700); background: var(--warn-50);
border: 1px solid color-mix(in oklab, var(--warn-500) 30%, transparent);
border-radius: 7px; padding: 8px 11px; }
.hrcm-costlink, .hrpc-costlink, .hrpc-bizlink, .hrnw-biz {
border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600;
color: var(--p-600); cursor: pointer; padding: 2px 4px; border-radius: 4px;
}
.hrcm-costlink:hover, .hrpc-costlink:hover, .hrpc-bizlink:hover, .hrnw-biz:hover { text-decoration: underline; color: var(--p-700); }
.hrcm-ibtn, .hrnw-expand {
display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px;
border: 1px solid var(--border-default); background: var(--n-0); color: var(--text-secondary); cursor: pointer;
}
.hrcm-ibtn:hover, .hrnw-expand:hover { border-color: var(--p-300); color: var(--p-600); background: var(--p-50); }
.hrcm-sbadge, .hrnw-lvltag, .hrbz-basechip, .hrpc-user__badge, .hrpc-user__lvl, .hrbet-lvl, .hrnw-unique {
display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px;
background: var(--n-75); color: var(--n-700); border: 1px solid var(--border-subtle);
font-size: 10.5px; font-weight: 700; letter-spacing: .03em; white-space: nowrap;
}
.hrbz-basechip { background: var(--p-50); color: var(--p-700); border-color: var(--p-100); }
.hrbet-user, .hrpc-user, .hrcm-ucell, .hrnw-main, .hrbz-gname, .hrcm-subname {
font-weight: 600; color: var(--text-primary);
}
.hrbet-user__sub, .hrbet-sub, .hrnw-sub, .hrbz-gcount, .hrcm-subhead, .hrpc-user__u {
font-size: 11px; color: var(--text-tertiary); font-weight: 400;
}
.hrnw-cost, .hrnw-costval, .hrnw-noc, .hrcm-cell, .hrnw-cell {
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hrcm-cell--box, .hrnw-cell--info { background: var(--n-25); border-radius: 5px; }
/* ---- drill-down / subnet structures ---- */
.hrcm-subrows, .hrnw-rows, .hrbet-subcards, .hrpc-drill, .hrbz-drill, .hrcm-subnet, .hrnw-shopsblock {
display: flex; flex-direction: column; gap: 8px;
}
.hrcm-subrow, .hrnw-row, .hrbet-subcard, .hrpc-carddrill, .hrbz-carddrill {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
border: 1px solid var(--border-default); border-radius: 8px; padding: 10px 12px;
background: var(--n-0); box-shadow: var(--shadow-xs);
}
.hrcm-subnest, .hrnw-shopsblock { margin-left: 18px; padding-left: 12px; border-left: 2px solid var(--border-default); }
.hrcm-subname--main { font-weight: 700; color: var(--p-700); }
.hrbet-subcard__top, .hrbz-cardsub { display: flex; justify-content: space-between; gap: 10px; width: 100%; font-size: 13px; }
.hrbet-subcard__row, .hrbz-subname, .hrnw-modrow, .hrpc-drill__sub {
display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; padding: 3px 0;
}
.hrbet-carddet, .hrcm-cardacts, .hrcm-subacts, .hrpc-drill__empty, .hrbz-subtable, .hrnw-shopshead {
font-size: 12.5px; color: var(--text-secondary);
}
.hrcm-cardacts, .hrcm-subacts { display: flex; gap: 8px; flex-wrap: wrap; }
.hrbz-subtable { width: 100%; border-collapse: collapse; }
.hrbz-subtable th, .hrbz-subtable td { padding: 6px 10px; border-bottom: 1px solid var(--border-subtle); text-align: right; white-space: nowrap; }
.hrbz-subtable th:first-child, .hrbz-subtable td:first-child { text-align: left; }
.hrnw-empty, .hrbet-subempty, .hrcm-subempty, .hrpc-drill__empty { padding: 14px; text-align: center; }
/* ---- Commissions: period bar, step list, in-modal tabs ---- */
.hrcm-periodbar, .hrnw-period, .hrcm-commwrap, .hrcm-summary {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.hrcm-steps { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 0; padding: 0; list-style: none; }
.hrcm-step { font-size: 11.5px; color: var(--text-tertiary); background: var(--n-25);
border: 1px solid var(--border-subtle); border-radius: 6px; padding: 4px 9px; }
.hrcm-mtabs, .hrdy-tabs {
display: flex; gap: 4px; overflow-x: auto; padding: 5px; border: 1px solid var(--border-default);
border-radius: 9px; background: var(--n-0); margin-bottom: 14px;
}
.hrcm-mtab, .hrdy-tab {
border: 1px solid transparent; background: none; font-family: inherit; font-size: 12.5px; font-weight: 500;
color: var(--text-secondary); padding: 7px 13px; border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.hrcm-mtab:hover, .hrdy-tab:hover { background: var(--n-50); color: var(--text-primary); }
.hrcm-mtab--on, .hrdy-tab.active { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); font-weight: 700; }
.hrdy-tab--dead { opacity: .62; }
.hrdy-tab--dead.active { opacity: 1; }
.hrdy-deadtag { margin-left: 6px; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: var(--warn-700); background: var(--warn-50); border-radius: 999px; padding: 1px 6px; }
.hrdy-datecell { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hrdy-zero { color: var(--text-tertiary); }
.hrcm-mtable-wrap { overflow-x: auto; }
.hrnw-radio { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; }
.hrnw-radio input { accent-color: var(--p-500); }
.hrnw-id, .hrnw-shopuser, .hrpc-user__u { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-tertiary); }
.hrnw-headwrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hrnw-av { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
background: var(--p-50); color: var(--p-700); font-size: 11.5px; font-weight: 700; flex-shrink: 0; }
.hrnw-av--sm { width: 24px; height: 24px; font-size: 10px; }
/* ---- responsive (brief §11) ---- */
@media (max-width: 860px) {
.hrbet-modal, .hrcm-modal, .hrcm-modal--wide, .hrpc-modal, .hrnw-modal {
width: 100vw; max-height: none; height: 100dvh; border-radius: 0;
}
.hrbet-modal-scrim, .hrcm-scrim, .hrnw-modal-scrim { padding: 0; }
.hrcm-subrow, .hrnw-row, .hrbet-subcard, .hrpc-carddrill, .hrbz-carddrill { align-items: flex-start; flex-direction: column; gap: 6px; }
.hrcm-subnest, .hrnw-shopsblock { margin-left: 8px; padding-left: 8px; }
.hrbz-subtable { display: block; overflow-x: auto; }
}
/* ---- HostSetCurrencies ---- */
/* ===================================================================
CURRENCY EXCHANGE RATES (src/pages/HostSetCurrencies.jsx) — hsc2-*
Settings ▾ · admin.currencies.index · Admin/CurrencyController.
Page chrome, filters, table, pager come from the hrs-* shell; these
are the structures it does not cover: the EUR -> X pair cell, the
rate figure, the row Edit action, the two-field edit modal, the
automatic-sync documentation panel and the security finding card.
Token-based — --p-* resolves to the Iwakiri red ramp under
html[data-theme="iwakiri"]. No new hexes.
=================================================================== */
/* ---- Currency pair cell: computed 'EUR -> ' . currency (controller L78) ---- */
.hsc2-pair { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.hsc2-base { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--text-tertiary); }
.hsc2-arrow { color: var(--n-300); font-size: 12px; line-height: 1; }
.hsc2-code {
display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px;
background: var(--p-50); color: var(--p-700); border: 1px solid var(--p-100);
font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
}
/* ---- Rate figure: DECIMAL(15,4), rendered with all four decimals ---- */
.hsc2-rate { font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text-primary); }
/* ---- Row action (pencil) ---- */
.hsc2-editbtn {
display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px;
border: 1px solid var(--border-default); background: var(--n-0); color: var(--text-secondary);
cursor: pointer; transition: border-color .12s, color .12s, background .12s;
}
.hsc2-editbtn:hover { border-color: var(--p-300); color: var(--p-600); background: var(--p-50); }
.hsc2-editbtn:focus-visible { outline: none; border-color: var(--p-400); box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-500) 16%, transparent); }
.hsc2-editbtn--wide {
width: auto; height: 30px; padding: 0 12px; gap: 7px; grid-auto-flow: column;
font-family: inherit; font-size: 12.5px; font-weight: 600;
}
.hsc2-cardacts { display: flex; justify-content: flex-end; margin-top: 10px; }
/* ---- Edit modal (generics/models/currency.blade.php in the generic shell) ---- */
.hsc2-modal-scrim {
position: fixed; inset: 0; z-index: 240; background: rgba(15, 20, 32, .5);
backdrop-filter: blur(2px); display: grid; place-items: center; padding: 24px 16px;
}
.hsc2-modal {
background: var(--n-0); border-radius: 12px; width: min(520px, 96vw);
max-height: calc(100vh - 56px); display: flex; flex-direction: column; overflow: hidden;
box-shadow: 0 26px 70px -14px rgba(15, 20, 32, .42);
}
.hsc2-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
}
.hsc2-modal__title { font-size: 18px; font-weight: 700; color: var(--text-primary); letter-spacing: .02em; font-family: var(--font-mono); }
.hsc2-modal__sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 3px; }
.hsc2-modal__body { padding: 18px 20px; overflow: auto; display: flex; flex-direction: column; gap: 18px; }
.hsc2-modal__foot {
display: flex; justify-content: flex-end; gap: 10px; padding: 13px 20px;
border-top: 1px solid var(--border-subtle); background: var(--n-25);
}
/* ---- Form fields: rate (required|gt:0) + auto_update (in:on,off) ---- */
.hsc2-field { display: flex; flex-direction: column; gap: 7px; }
.hsc2-label { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; color: #3f4254; }
.hsc2-input {
font-family: var(--font-mono); font-size: 14px; color: #3f4254; background: var(--n-0);
border: 1px solid var(--border-default); border-radius: 6px; height: 40px; padding: 0 12px;
width: 100%; font-variant-numeric: tabular-nums;
}
.hsc2-input:focus { outline: none; border-color: var(--p-400); box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-500) 14%, transparent); }
.hsc2-input--err { border-color: var(--err-500); }
.hsc2-input--err:focus { border-color: var(--err-500); box-shadow: 0 0 0 3px color-mix(in oklab, var(--err-500) 16%, transparent); }
/* campierrati field error, painted under the input like the real modal */
.hsc2-err { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--err-700); }
.hsc2-hint { font-size: 11px; color: var(--text-tertiary); line-height: 1.5; }
.hsc2-note {
display: grid; grid-template-columns: 16px 1fr; gap: 9px; align-items: start;
font-size: 11.5px; line-height: 1.6; color: var(--text-secondary);
background: var(--n-25); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 11px 13px;
}
.hsc2-note code, .hsc2-hint code {
background: var(--n-75); border: 1px solid var(--border-subtle); border-radius: 4px;
padding: 0 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--n-700);
overflow-wrap: anywhere;
}
/* ---- Automatic rate sync: pipeline documentation + finding ---- */
.hsc2-sync { display: flex; flex-direction: column; gap: 12px; }
.hsc2-sync__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.hsc2-sync__item {
background: var(--n-0); border: 1px solid var(--border-default); border-radius: 10px;
padding: 13px 15px 14px; box-shadow: var(--shadow-xs);
}
.hsc2-sync__k {
font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 6px;
}
.hsc2-sync__v { font-size: 17px; font-weight: 700; color: var(--p-700); margin-top: 3px; }
.hsc2-sync__s { font-size: 11.5px; line-height: 1.6; color: var(--text-secondary); margin-top: 7px; }
.hsc2-sync__s code {
background: var(--n-75); border: 1px solid var(--border-subtle); border-radius: 4px;
padding: 0 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--n-700);
overflow-wrap: anywhere;
}
.hsc2-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.hsc2-step {
font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--n-700);
background: var(--n-25); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 3px 9px;
font-variant-numeric: tabular-nums;
}
/* Honest finding card — the Update button's endpoint has no auth (Kernel L66-70) */
.hsc2-finding {
display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start;
border-radius: 10px; padding: 13px 15px;
background: color-mix(in oklab, var(--err-500) 5%, var(--n-0));
border: 1px solid color-mix(in oklab, var(--err-500) 28%, transparent);
}
.hsc2-finding__ic {
width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
background: var(--err-500); color: #fff;
}
.hsc2-finding__t { font-size: 13px; font-weight: 700; color: var(--err-700); margin-bottom: 3px; }
.hsc2-finding__b { font-size: 11.5px; line-height: 1.65; color: var(--text-secondary); }
.hsc2-finding__b code {
background: color-mix(in oklab, var(--err-500) 9%, transparent);
border: 1px solid color-mix(in oklab, var(--err-500) 22%, transparent); border-radius: 4px;
padding: 0 4px; margin: 0 1px; font-family: var(--font-mono); font-size: 10.5px; color: var(--err-700);
overflow-wrap: anywhere;
}
/* ============ Responsive (brief §11) ============ */
@media (max-width: 860px) {
/* Forms/modals go full-screen instead of a fixed centered dialog */
.hsc2-modal-scrim { padding: 0; }
.hsc2-modal { width: 100vw; max-height: none; height: 100dvh; border-radius: 0; }
.hsc2-modal__body { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
.hsc2-modal__foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
.hsc2-modal__foot .hrs-btn { flex: 1; min-width: 0; }
.hsc2-input { height: 44px; font-size: 15px; } /* ≥16px-ish target, no iOS zoom jump */
/* Sync documentation stacks; finding keeps its icon rail */
.hsc2-sync__grid { grid-template-columns: 1fr; }
.hsc2-sync__item { padding: 12px 13px; }
}
@media (max-width: 600px) {
.hsc2-finding { grid-template-columns: 1fr; gap: 9px; }
.hsc2-finding__ic { width: 30px; height: 30px; }
.hsc2-editbtn--wide { width: 100%; justify-content: center; }
.hsc2-cardacts { justify-content: stretch; }
}
/* ---- Currency pair cell: computed 'EUR -> ' . currency (controller L78) ---- */
.hsc2-pair { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.hsc2-base { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--text-tertiary); }
.hsc2-arrow { color: var(--n-300); font-size: 12px; line-height: 1; }
.hsc2-code {
display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px;
background: var(--p-50); color: var(--p-700); border: 1px solid var(--p-100);
font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
}
/* ---- Rate figure: DECIMAL(15,4), rendered with all four decimals ---- */
.hsc2-rate { font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text-primary); }
/* ---- Row action (pencil) ---- */
.hsc2-editbtn {
display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px;
border: 1px solid var(--border-default); background: var(--n-0); color: var(--text-secondary);
cursor: pointer; transition: border-color .12s, color .12s, background .12s;
}
.hsc2-editbtn:hover { border-color: var(--p-300); color: var(--p-600); background: var(--p-50); }
.hsc2-editbtn:focus-visible { outline: none; border-color: var(--p-400); box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-500) 16%, transparent); }
.hsc2-editbtn--wide {
width: auto; height: 30px; padding: 0 12px; gap: 7px; grid-auto-flow: column;
font-family: inherit; font-size: 12.5px; font-weight: 600;
}
.hsc2-cardacts { display: flex; justify-content: flex-end; margin-top: 10px; }
/* ---- Edit modal (generics/models/currency.blade.php in the generic shell) ---- */
.hsc2-modal-scrim {
position: fixed; inset: 0; z-index: 240; background: rgba(15, 20, 32, .5);
backdrop-filter: blur(2px); display: grid; place-items: center; padding: 24px 16px;
}
.hsc2-modal {
background: var(--n-0); border-radius: 12px; width: min(520px, 96vw);
max-height: calc(100vh - 56px); display: flex; flex-direction: column; overflow: hidden;
box-shadow: 0 26px 70px -14px rgba(15, 20, 32, .42);
}
.hsc2-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
}
.hsc2-modal__title { font-size: 18px; font-weight: 700; color: var(--text-primary); letter-spacing: .02em; font-family: var(--font-mono); }
.hsc2-modal__sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 3px; }
.hsc2-modal__body { padding: 18px 20px; overflow: auto; display: flex; flex-direction: column; gap: 18px; }
.hsc2-modal__foot {
display: flex; justify-content: flex-end; gap: 10px; padding: 13px 20px;
border-top: 1px solid var(--border-subtle); background: var(--n-25);
}
/* ---- Form fields: rate (required|gt:0) + auto_update (in:on,off) ---- */
.hsc2-field { display: flex; flex-direction: column; gap: 7px; }
.hsc2-label { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; color: #3f4254; }
.hsc2-input {
font-family: var(--font-mono); font-size: 14px; color: #3f4254; background: var(--n-0);
border: 1px solid var(--border-default); border-radius: 6px; height: 40px; padding: 0 12px;
width: 100%; font-variant-numeric: tabular-nums;
}
.hsc2-input:focus { outline: none; border-color: var(--p-400); box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-500) 14%, transparent); }
.hsc2-input--err { border-color: var(--err-500); }
.hsc2-input--err:focus { border-color: var(--err-500); box-shadow: 0 0 0 3px color-mix(in oklab, var(--err-500) 16%, transparent); }
/* campierrati field error, painted under the input like the real modal */
.hsc2-err { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--err-700); }
.hsc2-hint { font-size: 11px; color: var(--text-tertiary); line-height: 1.5; }
.hsc2-note {
display: grid; grid-template-columns: 16px 1fr; gap: 9px; align-items: start;
font-size: 11.5px; line-height: 1.6; color: var(--text-secondary);
background: var(--n-25); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 11px 13px;
}
.hsc2-note code, .hsc2-hint code {
background: var(--n-75); border: 1px solid var(--border-subtle); border-radius: 4px;
padding: 0 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--n-700);
overflow-wrap: anywhere;
}
/* ---- Automatic rate sync: pipeline documentation + finding ---- */
.hsc2-sync { display: flex; flex-direction: column; gap: 12px; }
.hsc2-sync__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.hsc2-sync__item {
background: var(--n-0); border: 1px solid var(--border-default); border-radius: 10px;
padding: 13px 15px 14px; box-shadow: var(--shadow-xs);
}
.hsc2-sync__k {
font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 6px;
}
.hsc2-sync__v { font-size: 17px; font-weight: 700; color: var(--p-700); margin-top: 3px; }
.hsc2-sync__s { font-size: 11.5px; line-height: 1.6; color: var(--text-secondary); margin-top: 7px; }
.hsc2-sync__s code {
background: var(--n-75); border: 1px solid var(--border-subtle); border-radius: 4px;
padding: 0 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--n-700);
overflow-wrap: anywhere;
}
.hsc2-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.hsc2-step {
font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--n-700);
background: var(--n-25); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 3px 9px;
font-variant-numeric: tabular-nums;
}
/* Honest finding card — the Update button's endpoint has no auth (Kernel L66-70) */
.hsc2-finding {
display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start;
border-radius: 10px; padding: 13px 15px;
background: color-mix(in oklab, var(--err-500) 5%, var(--n-0));
border: 1px solid color-mix(in oklab, var(--err-500) 28%, transparent);
}
.hsc2-finding__ic {
width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
background: var(--err-500); color: #fff;
}
.hsc2-finding__t { font-size: 13px; font-weight: 700; color: var(--err-700); margin-bottom: 3px; }
.hsc2-finding__b { font-size: 11.5px; line-height: 1.65; color: var(--text-secondary); }
.hsc2-finding__b code {
background: color-mix(in oklab, var(--err-500) 9%, transparent);
border: 1px solid color-mix(in oklab, var(--err-500) 22%, transparent); border-radius: 4px;
padding: 0 4px; margin: 0 1px; font-family: var(--font-mono); font-size: 10.5px; color: var(--err-700);
overflow-wrap: anywhere;
}
/* ============ Responsive (brief §11) ============ */
@media (max-width: 860px) {
/* Forms/modals go full-screen instead of a fixed centered dialog */
.hsc2-modal-scrim { padding: 0; }
.hsc2-modal { width: 100vw; max-height: none; height: 100dvh; border-radius: 0; }
.hsc2-modal__body { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
.hsc2-modal__foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
.hsc2-modal__foot .hrs-btn { flex: 1; min-width: 0; }
.hsc2-input { height: 44px; font-size: 15px; } /* ≥16px-ish target, no iOS zoom jump */
/* Sync documentation stacks; finding keeps its icon rail */
.hsc2-sync__grid { grid-template-columns: 1fr; }
.hsc2-sync__item { padding: 12px 13px; }
}
@media (max-width: 600px) {
.hsc2-finding { grid-template-columns: 1fr; gap: 9px; }
.hsc2-finding__ic { width: 30px; height: 30px; }
.hsc2-editbtn--wide { width: 100%; justify-content: center; }
.hsc2-cardacts { justify-content: stretch; }
}
/* ---- HostSetLanguages ---- */
/* ============================================================
LANGUAGES (Settings ▾) — src/pages/HostSetLanguages.jsx
All classes prefixed `hsl-`. Builds on the Iwakiri red ramp
(--p-*) + neutral/semantic tokens; no new hexes, no indigo.
Append to styles/theme-iwakiri.css.
============================================================ */
/* ---- list: name / translate cells + row actions ---- */
.hsl-namelink, .hsl-tlink {
display: inline-flex; align-items: center; gap: 8px;
background: none; border: 0; padding: 3px 0; cursor: pointer;
font-family: inherit; font-size: 13px; font-weight: 600;
color: var(--p-700); text-align: left; max-width: 100%;
}
.hsl-namelink:hover, .hsl-tlink:hover { color: var(--p-500); }
.hsl-namelink code {
font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
color: var(--text-tertiary); background: var(--n-50);
border: 1px solid var(--border-subtle); border-radius: 4px; padding: 1px 5px;
}
.hsl-tlink { font-weight: 500; color: var(--text-secondary); }
.hsl-tlink:hover { color: var(--p-600); }
.hsl-acts { display: flex; gap: 6px; justify-content: center; }
.hsl-act {
display: inline-grid; place-items: center; width: 26px; height: 26px;
border: 1px solid var(--border-default); border-radius: 6px;
background: var(--n-0); color: var(--text-secondary); cursor: pointer;
}
.hsl-act:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hsl-act--danger:hover { background: var(--err-50); border-color: var(--err-100); color: var(--err-700); }
.hsl-cardcode {
font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary);
background: var(--n-50); border-radius: 4px; padding: 1px 6px;
}
.hsl-cardacts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* ---- drill-down sub-header (back + crumb) ---- */
.hsl-sub {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin: 0 0 12px;
}
.hsl-crumb { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.hsl-crumb b { color: var(--text-primary); }
.hsl-crumb code, .hsl-crumb__path {
font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary);
background: var(--n-50); border: 1px solid var(--border-subtle);
border-radius: 4px; padding: 1px 6px;
}
/* ---- tab rows (translate tabs + the 12 file tabs) ---- */
.hsl-tabs {
display: flex; gap: 4px; overflow-x: auto; padding: 5px;
border: 1px solid var(--border-default); border-radius: 9px;
background: var(--n-0); margin-bottom: 14px;
}
.hsl-tab {
display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
border: 1px solid transparent; background: none; font-family: inherit;
font-size: 12.5px; font-weight: 500; color: var(--text-secondary);
padding: 7px 13px; border-radius: 7px; cursor: pointer;
}
.hsl-tab:hover { background: var(--n-50); color: var(--text-primary); }
.hsl-tab--on { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); font-weight: 700; }
/* 12 file tabs — tighter, and it always scrolls rather than wrapping. */
.hsl-tabs--files { gap: 2px; scroll-snap-type: x proximity; }
.hsl-tabs--files .hsl-tab { padding: 6px 11px; scroll-snap-align: start; }
.hsl-tabfile { font-family: var(--font-mono); font-size: 10px; opacity: .7; }
.hsl-tabmark {
font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--ok-700); background: var(--ok-50); border-radius: 999px; padding: 1px 6px;
}
/* ---- sticky action bar over the translate grid ---- */
.hsl-bar {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
padding: 10px 14px; border: 1px solid var(--border-default);
border-radius: 9px; background: var(--n-0); box-shadow: var(--shadow-xs);
position: sticky; top: 0; z-index: 5;
}
.hsl-bar__stats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hsl-bar__acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hsl-stat {
font-size: 11.5px; color: var(--text-secondary); background: var(--n-25);
border: 1px solid var(--border-subtle); border-radius: 999px; padding: 3px 10px;
}
.hsl-stat b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.hsl-stat--ok { background: var(--ok-50); border-color: var(--ok-100); color: var(--ok-700); }
.hsl-stat--ok b { color: var(--ok-700); }
.hsl-stat--miss { background: var(--err-50); border-color: var(--err-100); color: var(--err-700); }
.hsl-stat--miss b { color: var(--err-700); }
.hsl-stat--warn { background: var(--warn-50); border-color: var(--warn-100); color: var(--warn-700); }
.hsl-stat--warn b { color: var(--warn-700); }
.hsl-stat--dirty { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); font-weight: 600; }
/* ---- notes / callouts ---- */
.hsl-note {
/* block, not flex — these notes are running prose with inline / */
display: block;
font-size: 12px; line-height: 1.55; color: var(--text-secondary);
background: var(--n-25); border: 1px solid var(--border-subtle);
border-left: 3px solid var(--border-strong); border-radius: 8px;
padding: 9px 12px; margin: 0 0 12px;
}
.hsl-note code {
font-family: var(--font-mono); font-size: 11px;
background: var(--n-50); border-radius: 3px; padding: 0 4px; overflow-wrap: anywhere;
}
.hsl-note--warn { background: var(--warn-50); border-color: var(--warn-100); border-left-color: var(--warn-500); color: var(--warn-700); }
.hsl-note--warn code { background: rgba(255, 255, 255, .55); }
.hsl-note--danger {
display: flex; align-items: flex-start; gap: 9px;
background: var(--err-50); border-color: var(--err-100);
border-left-color: var(--err-500); color: var(--err-700);
}
.hsl-note--danger code { background: rgba(255, 255, 255, .55); }
.hsl-note--danger > svg { flex-shrink: 0; margin-top: 2px; }
.hsl-p { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 12px; }
/* ---- translate grid ---- */
.hsl-grid { overflow: hidden; }
.hsl-grid__head, .hsl-row {
display: grid; grid-template-columns: minmax(150px, 220px) 1fr 1fr; gap: 12px;
padding: 10px 14px; align-items: start;
}
.hsl-grid__head {
background: var(--n-800); color: #fff; position: sticky; top: 0; z-index: 2;
font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.hsl-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hsl-h__f {
font-family: var(--font-mono); font-size: 10px; text-transform: none;
letter-spacing: 0; font-weight: 400; opacity: .68;
}
.hsl-row { border-bottom: 1px solid var(--border-subtle); }
.hsl-row:hover { background: var(--n-25); }
.hsl-row--sub { background: linear-gradient(90deg, var(--n-25) 0 3px, transparent 3px); }
.hsl-row--sub .hsl-cell--key { padding-left: 16px; }
.hsl-cell { min-width: 0; }
.hsl-cell--key { display: flex; align-items: center; gap: 7px; padding-top: 7px; }
.hsl-cell--key code {
font-family: var(--font-mono); font-size: 11.5px; color: var(--p-700);
overflow-wrap: anywhere;
}
.hsl-dot {
width: 6px; height: 6px; border-radius: 999px; background: var(--err-500); flex-shrink: 0;
}
.hsl-group {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 8px 14px; background: var(--n-50);
border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
font-size: 12px; color: var(--text-secondary);
}
.hsl-group code { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-primary); }
.hsl-group__n { font-size: 11.5px; color: var(--text-tertiary); }
.hsl-ta {
width: 100%; min-height: 34px; resize: vertical; font-family: inherit; font-size: 12.5px;
line-height: 1.45; color: var(--text-primary); background: var(--n-0);
border: 1px solid var(--border-default); border-radius: 6px; padding: 7px 9px;
field-sizing: content;
}
.hsl-ta:focus { outline: none; border-color: var(--p-300); box-shadow: 0 0 0 3px var(--p-50); }
.hsl-ta--src { background: var(--n-25); color: var(--text-secondary); cursor: default; }
.hsl-ta--empty { border-color: var(--err-300); background: var(--err-50); }
.hsl-ta--warn { border-color: var(--warn-300); background: var(--warn-50); }
.hsl-inlinewarn {
display: flex; align-items: flex-start; gap: 5px; margin-top: 4px;
font-size: 11px; line-height: 1.45; color: var(--warn-700);
}
.hsl-link {
display: inline-flex; align-items: center; gap: 5px; background: none; border: 0;
padding: 0; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 600;
color: var(--p-600); text-decoration: underline; text-underline-offset: 2px;
}
.hsl-grid__head .hsl-link { color: #fff; opacity: .85; text-transform: none; letter-spacing: 0; }
.hsl-grid__head .hsl-link:hover { opacity: 1; }
.hsl-link--row { margin-top: 5px; }
.hsl-link:hover { color: var(--p-500); }
/* ---- raw PHP editor ---- */
.hsl-editor { overflow: hidden; }
.hsl-editor__head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
flex-wrap: wrap; padding: 9px 14px; background: var(--n-25);
border-bottom: 1px solid var(--border-subtle);
}
.hsl-editor__file {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-primary);
}
.hsl-editor__meta { font-size: 11.5px; color: var(--text-tertiary); }
.hsl-editor__body { display: flex; align-items: stretch; background: var(--n-900, #12141c); }
.hsl-editor__gutter {
display: flex; flex-direction: column; flex-shrink: 0; padding: 12px 10px 12px 14px;
text-align: right; user-select: none;
font-family: var(--font-mono); font-size: 12px; line-height: 1.65;
color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .04);
max-height: 58vh; overflow: hidden;
}
.hsl-editor__ta {
flex: 1; min-width: 0; min-height: 320px; max-height: 58vh; resize: vertical;
border: 0; outline: none; padding: 12px 14px;
font-family: var(--font-mono); font-size: 12px; line-height: 1.65;
color: #e8ebf2; background: transparent; white-space: pre; overflow: auto; tab-size: 4;
}
.hsl-editor__ta::placeholder { color: rgba(255, 255, 255, .28); }
.hsl-editor__note {
padding: 10px 14px; font-size: 11.5px; line-height: 1.55; color: var(--text-tertiary);
background: var(--n-25); border-top: 1px solid var(--border-subtle);
}
.hsl-coderow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.hsl-codehint { flex: 1; min-width: 240px; font-size: 11.5px; line-height: 1.5; color: var(--text-tertiary); }
/* ---- empty states ---- */
.hsl-empty {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 40px 24px; text-align: center; color: var(--text-tertiary);
}
.hsl-empty svg { color: var(--warn-500); }
.hsl-empty__t { font-size: 14.5px; font-weight: 700; color: var(--text-primary); }
.hsl-empty__b { max-width: 620px; font-size: 12.5px; line-height: 1.6; }
/* ---- modal (on the shared .bp-modal chrome) ---- */
.hsl-modal {
background: var(--n-0); border-radius: 12px; width: min(620px, 96vw);
max-height: calc(100vh - 56px); display: flex; flex-direction: column; overflow: hidden;
padding: 0; box-shadow: 0 26px 70px -14px rgba(15, 20, 32, .42);
}
.hsl-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
}
.hsl-modal__title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.hsl-modal__sub { margin-top: 2px; font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.hsl-modal__body { padding: 16px 20px; overflow: auto; }
.hsl-modal__foot {
display: flex; justify-content: flex-end; gap: 10px; padding: 13px 20px;
border-top: 1px solid var(--border-subtle); background: var(--n-25);
}
.hsl-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.hsl-field { min-width: 0; }
.hsl-field .input { width: 100%; }
.hsl-field--switch { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.hsl-input--err { border-color: var(--err-500); }
.hsl-err { margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--err-700); }
/* ---- responsive (brief §11) ---- */
@media (max-width: 1000px) {
.hsl-grid__head, .hsl-row { grid-template-columns: minmax(130px, 180px) 1fr 1fr; }
}
@media (max-width: 860px) {
/* Translate rows stack: key, then EN source, then the target box. */
.hsl-grid__head { display: none; }
.hsl-row { grid-template-columns: 1fr; gap: 6px; padding: 12px 14px; }
.hsl-row--sub { background: none; border-left: 3px solid var(--border-strong); }
.hsl-row--sub .hsl-cell--key { padding-left: 0; }
.hsl-cell--key { padding-top: 0; }
.hsl-cell--tgt::before {
content: "Translation"; display: block; margin-bottom: 4px;
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .05em; color: var(--text-tertiary);
}
.hsl-cell:not(.hsl-cell--key):not(.hsl-cell--tgt)::before {
content: "English"; display: block; margin-bottom: 4px;
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .05em; color: var(--text-tertiary);
}
.hsl-bar { position: static; }
.hsl-bar__acts { width: 100%; }
.hsl-bar__acts .btn { flex: 1; justify-content: center; }
/* Editor: drop the gutter, keep the buffer readable rather than tiny. */
.hsl-editor__gutter { display: none; }
.hsl-editor__ta { min-height: 260px; max-height: 52vh; font-size: 11.5px; }
.hsl-codehint { min-width: 100%; }
/* Modals go full-screen. */
.hsl-scrim { padding: 0; }
.hsl-modal { width: 100vw; max-height: none; height: 100dvh; border-radius: 0; }
.hsl-form { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.hsl-sub { gap: 8px; }
.hsl-sub .btn { flex: 0 0 auto; }
.hsl-crumb { font-size: 12px; }
.hsl-tab { padding: 6px 10px; font-size: 12px; }
.hsl-tabfile { display: none; }
.hsl-cardacts .btn { flex: 1; justify-content: center; }
.hsl-coderow .btn { flex: 1; justify-content: center; }
}
/* ---- list: name / translate cells + row actions ---- */
.hsl-namelink, .hsl-tlink {
display: inline-flex; align-items: center; gap: 8px;
background: none; border: 0; padding: 3px 0; cursor: pointer;
font-family: inherit; font-size: 13px; font-weight: 600;
color: var(--p-700); text-align: left; max-width: 100%;
}
.hsl-namelink:hover, .hsl-tlink:hover { color: var(--p-500); }
.hsl-namelink code {
font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
color: var(--text-tertiary); background: var(--n-50);
border: 1px solid var(--border-subtle); border-radius: 4px; padding: 1px 5px;
}
.hsl-tlink { font-weight: 500; color: var(--text-secondary); }
.hsl-tlink:hover { color: var(--p-600); }
.hsl-acts { display: flex; gap: 6px; justify-content: center; }
.hsl-act {
display: inline-grid; place-items: center; width: 26px; height: 26px;
border: 1px solid var(--border-default); border-radius: 6px;
background: var(--n-0); color: var(--text-secondary); cursor: pointer;
}
.hsl-act:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hsl-act--danger:hover { background: var(--err-50); border-color: var(--err-100); color: var(--err-700); }
.hsl-cardcode {
font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary);
background: var(--n-50); border-radius: 4px; padding: 1px 6px;
}
.hsl-cardacts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* ---- drill-down sub-header (back + crumb) ---- */
.hsl-sub {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin: 0 0 12px;
}
.hsl-crumb { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.hsl-crumb b { color: var(--text-primary); }
.hsl-crumb code, .hsl-crumb__path {
font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary);
background: var(--n-50); border: 1px solid var(--border-subtle);
border-radius: 4px; padding: 1px 6px;
}
/* ---- tab rows (translate tabs + the 12 file tabs) ---- */
.hsl-tabs {
display: flex; gap: 4px; overflow-x: auto; padding: 5px;
border: 1px solid var(--border-default); border-radius: 9px;
background: var(--n-0); margin-bottom: 14px;
}
.hsl-tab {
display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
border: 1px solid transparent; background: none; font-family: inherit;
font-size: 12.5px; font-weight: 500; color: var(--text-secondary);
padding: 7px 13px; border-radius: 7px; cursor: pointer;
}
.hsl-tab:hover { background: var(--n-50); color: var(--text-primary); }
.hsl-tab--on { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); font-weight: 700; }
/* 12 file tabs — tighter, and it always scrolls rather than wrapping. */
.hsl-tabs--files { gap: 2px; scroll-snap-type: x proximity; }
.hsl-tabs--files .hsl-tab { padding: 6px 11px; scroll-snap-align: start; }
.hsl-tabfile { font-family: var(--font-mono); font-size: 10px; opacity: .7; }
.hsl-tabmark {
font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--ok-700); background: var(--ok-50); border-radius: 999px; padding: 1px 6px;
}
/* ---- sticky action bar over the translate grid ---- */
.hsl-bar {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
padding: 10px 14px; border: 1px solid var(--border-default);
border-radius: 9px; background: var(--n-0); box-shadow: var(--shadow-xs);
position: sticky; top: 0; z-index: 5;
}
.hsl-bar__stats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hsl-bar__acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hsl-stat {
font-size: 11.5px; color: var(--text-secondary); background: var(--n-25);
border: 1px solid var(--border-subtle); border-radius: 999px; padding: 3px 10px;
}
.hsl-stat b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.hsl-stat--ok { background: var(--ok-50); border-color: var(--ok-100); color: var(--ok-700); }
.hsl-stat--ok b { color: var(--ok-700); }
.hsl-stat--miss { background: var(--err-50); border-color: var(--err-100); color: var(--err-700); }
.hsl-stat--miss b { color: var(--err-700); }
.hsl-stat--warn { background: var(--warn-50); border-color: var(--warn-100); color: var(--warn-700); }
.hsl-stat--warn b { color: var(--warn-700); }
.hsl-stat--dirty { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); font-weight: 600; }
/* ---- notes / callouts ---- */
.hsl-note {
/* block, not flex — these notes are running prose with inline / */
display: block;
font-size: 12px; line-height: 1.55; color: var(--text-secondary);
background: var(--n-25); border: 1px solid var(--border-subtle);
border-left: 3px solid var(--border-strong); border-radius: 8px;
padding: 9px 12px; margin: 0 0 12px;
}
.hsl-note code {
font-family: var(--font-mono); font-size: 11px;
background: var(--n-50); border-radius: 3px; padding: 0 4px; overflow-wrap: anywhere;
}
.hsl-note--warn { background: var(--warn-50); border-color: var(--warn-100); border-left-color: var(--warn-500); color: var(--warn-700); }
.hsl-note--warn code { background: rgba(255, 255, 255, .55); }
.hsl-note--danger {
display: flex; align-items: flex-start; gap: 9px;
background: var(--err-50); border-color: var(--err-100);
border-left-color: var(--err-500); color: var(--err-700);
}
.hsl-note--danger code { background: rgba(255, 255, 255, .55); }
.hsl-note--danger > svg { flex-shrink: 0; margin-top: 2px; }
.hsl-p { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 12px; }
/* ---- translate grid ---- */
.hsl-grid { overflow: hidden; }
.hsl-grid__head, .hsl-row {
display: grid; grid-template-columns: minmax(150px, 220px) 1fr 1fr; gap: 12px;
padding: 10px 14px; align-items: start;
}
.hsl-grid__head {
background: var(--n-800); color: #fff; position: sticky; top: 0; z-index: 2;
font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.hsl-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hsl-h__f {
font-family: var(--font-mono); font-size: 10px; text-transform: none;
letter-spacing: 0; font-weight: 400; opacity: .68;
}
.hsl-row { border-bottom: 1px solid var(--border-subtle); }
.hsl-row:hover { background: var(--n-25); }
.hsl-row--sub { background: linear-gradient(90deg, var(--n-25) 0 3px, transparent 3px); }
.hsl-row--sub .hsl-cell--key { padding-left: 16px; }
.hsl-cell { min-width: 0; }
.hsl-cell--key { display: flex; align-items: center; gap: 7px; padding-top: 7px; }
.hsl-cell--key code {
font-family: var(--font-mono); font-size: 11.5px; color: var(--p-700);
overflow-wrap: anywhere;
}
.hsl-dot {
width: 6px; height: 6px; border-radius: 999px; background: var(--err-500); flex-shrink: 0;
}
.hsl-group {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 8px 14px; background: var(--n-50);
border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
font-size: 12px; color: var(--text-secondary);
}
.hsl-group code { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-primary); }
.hsl-group__n { font-size: 11.5px; color: var(--text-tertiary); }
.hsl-ta {
width: 100%; min-height: 34px; resize: vertical; font-family: inherit; font-size: 12.5px;
line-height: 1.45; color: var(--text-primary); background: var(--n-0);
border: 1px solid var(--border-default); border-radius: 6px; padding: 7px 9px;
field-sizing: content;
}
.hsl-ta:focus { outline: none; border-color: var(--p-300); box-shadow: 0 0 0 3px var(--p-50); }
.hsl-ta--src { background: var(--n-25); color: var(--text-secondary); cursor: default; }
.hsl-ta--empty { border-color: var(--err-300); background: var(--err-50); }
.hsl-ta--warn { border-color: var(--warn-300); background: var(--warn-50); }
.hsl-inlinewarn {
display: flex; align-items: flex-start; gap: 5px; margin-top: 4px;
font-size: 11px; line-height: 1.45; color: var(--warn-700);
}
.hsl-link {
display: inline-flex; align-items: center; gap: 5px; background: none; border: 0;
padding: 0; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 600;
color: var(--p-600); text-decoration: underline; text-underline-offset: 2px;
}
.hsl-grid__head .hsl-link { color: #fff; opacity: .85; text-transform: none; letter-spacing: 0; }
.hsl-grid__head .hsl-link:hover { opacity: 1; }
.hsl-link--row { margin-top: 5px; }
.hsl-link:hover { color: var(--p-500); }
/* ---- raw PHP editor ---- */
.hsl-editor { overflow: hidden; }
.hsl-editor__head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
flex-wrap: wrap; padding: 9px 14px; background: var(--n-25);
border-bottom: 1px solid var(--border-subtle);
}
.hsl-editor__file {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-primary);
}
.hsl-editor__meta { font-size: 11.5px; color: var(--text-tertiary); }
.hsl-editor__body { display: flex; align-items: stretch; background: var(--n-900, #12141c); }
.hsl-editor__gutter {
display: flex; flex-direction: column; flex-shrink: 0; padding: 12px 10px 12px 14px;
text-align: right; user-select: none;
font-family: var(--font-mono); font-size: 12px; line-height: 1.65;
color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .04);
max-height: 58vh; overflow: hidden;
}
.hsl-editor__ta {
flex: 1; min-width: 0; min-height: 320px; max-height: 58vh; resize: vertical;
border: 0; outline: none; padding: 12px 14px;
font-family: var(--font-mono); font-size: 12px; line-height: 1.65;
color: #e8ebf2; background: transparent; white-space: pre; overflow: auto; tab-size: 4;
}
.hsl-editor__ta::placeholder { color: rgba(255, 255, 255, .28); }
.hsl-editor__note {
padding: 10px 14px; font-size: 11.5px; line-height: 1.55; color: var(--text-tertiary);
background: var(--n-25); border-top: 1px solid var(--border-subtle);
}
.hsl-coderow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.hsl-codehint { flex: 1; min-width: 240px; font-size: 11.5px; line-height: 1.5; color: var(--text-tertiary); }
/* ---- empty states ---- */
.hsl-empty {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 40px 24px; text-align: center; color: var(--text-tertiary);
}
.hsl-empty svg { color: var(--warn-500); }
.hsl-empty__t { font-size: 14.5px; font-weight: 700; color: var(--text-primary); }
.hsl-empty__b { max-width: 620px; font-size: 12.5px; line-height: 1.6; }
/* ---- modal (on the shared .bp-modal chrome) ---- */
.hsl-modal {
background: var(--n-0); border-radius: 12px; width: min(620px, 96vw);
max-height: calc(100vh - 56px); display: flex; flex-direction: column; overflow: hidden;
padding: 0; box-shadow: 0 26px 70px -14px rgba(15, 20, 32, .42);
}
.hsl-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
}
.hsl-modal__title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.hsl-modal__sub { margin-top: 2px; font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.hsl-modal__body { padding: 16px 20px; overflow: auto; }
.hsl-modal__foot {
display: flex; justify-content: flex-end; gap: 10px; padding: 13px 20px;
border-top: 1px solid var(--border-subtle); background: var(--n-25);
}
.hsl-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.hsl-field { min-width: 0; }
.hsl-field .input { width: 100%; }
.hsl-field--switch { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.hsl-input--err { border-color: var(--err-500); }
.hsl-err { margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--err-700); }
/* ---- responsive (brief §11) ---- */
@media (max-width: 1000px) {
.hsl-grid__head, .hsl-row { grid-template-columns: minmax(130px, 180px) 1fr 1fr; }
}
@media (max-width: 860px) {
/* Translate rows stack: key, then EN source, then the target box. */
.hsl-grid__head { display: none; }
.hsl-row { grid-template-columns: 1fr; gap: 6px; padding: 12px 14px; }
.hsl-row--sub { background: none; border-left: 3px solid var(--border-strong); }
.hsl-row--sub .hsl-cell--key { padding-left: 0; }
.hsl-cell--key { padding-top: 0; }
.hsl-cell--tgt::before {
content: "Translation"; display: block; margin-bottom: 4px;
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .05em; color: var(--text-tertiary);
}
.hsl-cell:not(.hsl-cell--key):not(.hsl-cell--tgt)::before {
content: "English"; display: block; margin-bottom: 4px;
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .05em; color: var(--text-tertiary);
}
.hsl-bar { position: static; }
.hsl-bar__acts { width: 100%; }
.hsl-bar__acts .btn { flex: 1; justify-content: center; }
/* Editor: drop the gutter, keep the buffer readable rather than tiny. */
.hsl-editor__gutter { display: none; }
.hsl-editor__ta { min-height: 260px; max-height: 52vh; font-size: 11.5px; }
.hsl-codehint { min-width: 100%; }
/* Modals go full-screen. */
.hsl-scrim { padding: 0; }
.hsl-modal { width: 100vw; max-height: none; height: 100dvh; border-radius: 0; }
.hsl-form { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.hsl-sub { gap: 8px; }
.hsl-sub .btn { flex: 0 0 auto; }
.hsl-crumb { font-size: 12px; }
.hsl-tab { padding: 6px 10px; font-size: 12px; }
.hsl-tabfile { display: none; }
.hsl-cardacts .btn { flex: 1; justify-content: center; }
.hsl-coderow .btn { flex: 1; justify-content: center; }
}
/* ---- list: name / translate cells + row actions ---- */
.hsl-namelink, .hsl-tlink {
display: inline-flex; align-items: center; gap: 8px;
background: none; border: 0; padding: 3px 0; cursor: pointer;
font-family: inherit; font-size: 13px; font-weight: 600;
color: var(--p-700); text-align: left; max-width: 100%;
}
.hsl-namelink:hover, .hsl-tlink:hover { color: var(--p-500); }
.hsl-namelink code {
font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
color: var(--text-tertiary); background: var(--n-50);
border: 1px solid var(--border-subtle); border-radius: 4px; padding: 1px 5px;
}
.hsl-tlink { font-weight: 500; color: var(--text-secondary); }
.hsl-tlink:hover { color: var(--p-600); }
.hsl-acts { display: flex; gap: 6px; justify-content: center; }
.hsl-act {
display: inline-grid; place-items: center; width: 26px; height: 26px;
border: 1px solid var(--border-default); border-radius: 6px;
background: var(--n-0); color: var(--text-secondary); cursor: pointer;
}
.hsl-act:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hsl-act--danger:hover { background: var(--err-50); border-color: var(--err-100); color: var(--err-700); }
.hsl-cardcode {
font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary);
background: var(--n-50); border-radius: 4px; padding: 1px 6px;
}
.hsl-cardacts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* ---- drill-down sub-header (back + crumb) ---- */
.hsl-sub {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin: 0 0 12px;
}
.hsl-crumb { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.hsl-crumb b { color: var(--text-primary); }
.hsl-crumb code, .hsl-crumb__path {
font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary);
background: var(--n-50); border: 1px solid var(--border-subtle);
border-radius: 4px; padding: 1px 6px;
}
/* ---- tab rows (translate tabs + the 12 file tabs) ---- */
.hsl-tabs {
display: flex; gap: 4px; overflow-x: auto; padding: 5px;
border: 1px solid var(--border-default); border-radius: 9px;
background: var(--n-0); margin-bottom: 14px;
}
.hsl-tab {
display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
border: 1px solid transparent; background: none; font-family: inherit;
font-size: 12.5px; font-weight: 500; color: var(--text-secondary);
padding: 7px 13px; border-radius: 7px; cursor: pointer;
}
.hsl-tab:hover { background: var(--n-50); color: var(--text-primary); }
.hsl-tab--on { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); font-weight: 700; }
.hsl-tabfile { font-family: var(--font-mono); font-size: 10px; opacity: .7; }
.hsl-tabmark {
font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--ok-700); background: var(--ok-50); border-radius: 999px; padding: 1px 6px;
}
/* ---- sticky action bar over the translate grid ---- */
.hsl-bar {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
padding: 10px 14px; border: 1px solid var(--border-default);
border-radius: 9px; background: var(--n-0); box-shadow: var(--shadow-xs);
position: sticky; top: 0; z-index: 5;
}
.hsl-bar__stats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hsl-bar__acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hsl-stat {
font-size: 11.5px; color: var(--text-secondary); background: var(--n-25);
border: 1px solid var(--border-subtle); border-radius: 999px; padding: 3px 10px;
}
.hsl-stat b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.hsl-stat--ok { background: var(--ok-50); border-color: var(--ok-100); color: var(--ok-700); }
.hsl-stat--ok b { color: var(--ok-700); }
.hsl-stat--miss { background: var(--err-50); border-color: var(--err-100); color: var(--err-700); }
.hsl-stat--miss b { color: var(--err-700); }
.hsl-stat--warn { background: var(--warn-50); border-color: var(--warn-100); color: var(--warn-700); }
.hsl-stat--warn b { color: var(--warn-700); }
.hsl-stat--dirty { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); font-weight: 600; }
/* ---- notes / callouts ---- */
.hsl-note {
display: flex; align-items: flex-start; gap: 8px;
font-size: 12px; line-height: 1.55; color: var(--text-secondary);
background: var(--n-25); border: 1px solid var(--border-subtle);
border-left: 3px solid var(--border-strong); border-radius: 8px;
padding: 9px 12px; margin: 0 0 12px;
}
.hsl-note code { font-family: var(--font-mono); font-size: 11px; }
.hsl-note--warn { background: var(--warn-50); border-color: var(--warn-100); border-left-color: var(--warn-500); color: var(--warn-700); }
.hsl-note--danger { background: var(--err-50); border-color: var(--err-100); border-left-color: var(--err-500); color: var(--err-700); }
.hsl-note--danger svg { flex-shrink: 0; margin-top: 1px; }
.hsl-p { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 12px; }
/* ---- translate grid ---- */
.hsl-grid { overflow: hidden; }
.hsl-grid__head, .hsl-row {
display: grid; grid-template-columns: minmax(150px, 220px) 1fr 1fr; gap: 12px;
padding: 10px 14px; align-items: start;
}
.hsl-grid__head {
background: var(--n-800); color: #fff; position: sticky; top: 0; z-index: 2;
font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.hsl-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hsl-h__f {
font-family: var(--font-mono); font-size: 10px; text-transform: none;
letter-spacing: 0; font-weight: 400; opacity: .68;
}
.hsl-row { border-bottom: 1px solid var(--border-subtle); }
.hsl-row:hover { background: var(--n-25); }
.hsl-row--sub { background: linear-gradient(90deg, var(--n-25) 0 3px, transparent 3px); }
.hsl-row--sub .hsl-cell--key { padding-left: 16px; }
.hsl-cell { min-width: 0; }
.hsl-cell--key { display: flex; align-items: center; gap: 7px; padding-top: 7px; }
.hsl-cell--key code {
font-family: var(--font-mono); font-size: 11.5px; color: var(--p-700);
overflow-wrap: anywhere;
}
.hsl-dot {
width: 6px; height: 6px; border-radius: 999px; background: var(--err-500); flex-shrink: 0;
}
.hsl-group {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 8px 14px; background: var(--n-50);
border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
font-size: 12px; color: var(--text-secondary);
}
.hsl-group code { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-primary); }
.hsl-group__n { font-size: 11.5px; color: var(--text-tertiary); }
.hsl-ta {
width: 100%; min-height: 34px; resize: vertical; font-family: inherit; font-size: 12.5px;
line-height: 1.45; color: var(--text-primary); background: var(--n-0);
border: 1px solid var(--border-default); border-radius: 6px; padding: 7px 9px;
field-sizing: content;
}
.hsl-ta:focus { outline: none; border-color: var(--p-300); box-shadow: 0 0 0 3px var(--p-50); }
.hsl-ta--src { background: var(--n-25); color: var(--text-secondary); cursor: default; }
.hsl-ta--empty { border-color: var(--err-300); background: var(--err-50); }
.hsl-ta--warn { border-color: var(--warn-300); background: var(--warn-50); }
.hsl-inlinewarn {
display: flex; align-items: flex-start; gap: 5px; margin-top: 4px;
font-size: 11px; line-height: 1.45; color: var(--warn-700);
}
.hsl-link {
display: inline-flex; align-items: center; gap: 5px; background: none; border: 0;
padding: 0; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 600;
color: var(--p-600); text-decoration: underline; text-underline-offset: 2px;
}
.hsl-grid__head .hsl-link { color: #fff; opacity: .85; text-transform: none; letter-spacing: 0; }
.hsl-grid__head .hsl-link:hover { opacity: 1; }
.hsl-link--row { margin-top: 5px; }
.hsl-link:hover { color: var(--p-500); }
/* ---- raw PHP editor ---- */
.hsl-editor { overflow: hidden; }
.hsl-editor__head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
flex-wrap: wrap; padding: 9px 14px; background: var(--n-25);
border-bottom: 1px solid var(--border-subtle);
}
.hsl-editor__file {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-primary);
}
.hsl-editor__meta { font-size: 11.5px; color: var(--text-tertiary); }
.hsl-editor__body { display: flex; align-items: stretch; background: var(--n-900, #12141c); }
.hsl-editor__gutter {
display: flex; flex-direction: column; flex-shrink: 0; padding: 12px 10px 12px 14px;
text-align: right; user-select: none;
font-family: var(--font-mono); font-size: 12px; line-height: 1.65;
color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .04);
max-height: 58vh; overflow: hidden;
}
.hsl-editor__ta {
flex: 1; min-width: 0; min-height: 320px; max-height: 58vh; resize: vertical;
border: 0; outline: none; padding: 12px 14px;
font-family: var(--font-mono); font-size: 12px; line-height: 1.65;
color: #e8ebf2; background: transparent; white-space: pre; overflow: auto; tab-size: 4;
}
.hsl-editor__ta::placeholder { color: rgba(255, 255, 255, .28); }
.hsl-editor__note {
padding: 10px 14px; font-size: 11.5px; line-height: 1.55; color: var(--text-tertiary);
background: var(--n-25); border-top: 1px solid var(--border-subtle);
}
.hsl-coderow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.hsl-codehint { flex: 1; min-width: 240px; font-size: 11.5px; line-height: 1.5; color: var(--text-tertiary); }
/* ---- empty states ---- */
.hsl-empty {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 40px 24px; text-align: center; color: var(--text-tertiary);
}
.hsl-empty svg { color: var(--warn-500); }
.hsl-empty__t { font-size: 14.5px; font-weight: 700; color: var(--text-primary); }
.hsl-empty__b { max-width: 620px; font-size: 12.5px; line-height: 1.6; }
/* ---- modal (on the shared .bp-modal chrome) ---- */
.hsl-modal {
background: var(--n-0); border-radius: 12px; width: min(620px, 96vw);
max-height: calc(100vh - 56px); display: flex; flex-direction: column; overflow: hidden;
padding: 0; box-shadow: 0 26px 70px -14px rgba(15, 20, 32, .42);
}
.hsl-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
}
.hsl-modal__title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.hsl-modal__sub { margin-top: 2px; font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.hsl-modal__body { padding: 16px 20px; overflow: auto; }
.hsl-modal__foot {
display: flex; justify-content: flex-end; gap: 10px; padding: 13px 20px;
border-top: 1px solid var(--border-subtle); background: var(--n-25);
}
.hsl-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.hsl-field { min-width: 0; }
.hsl-field .input { width: 100%; }
.hsl-field--switch { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.hsl-input--err { border-color: var(--err-500); }
.hsl-err { margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--err-700); }
/* ---- responsive (brief §11) ---- */
@media (max-width: 1000px) {
.hsl-grid__head, .hsl-row { grid-template-columns: minmax(130px, 180px) 1fr 1fr; }
}
@media (max-width: 860px) {
/* Translate rows stack: key, then EN source, then the target box. */
.hsl-grid__head { display: none; }
.hsl-row { grid-template-columns: 1fr; gap: 6px; padding: 12px 14px; }
.hsl-row--sub { background: none; border-left: 3px solid var(--border-strong); }
.hsl-row--sub .hsl-cell--key { padding-left: 0; }
.hsl-cell--key { padding-top: 0; }
.hsl-cell--tgt::before {
content: "Translation"; display: block; margin-bottom: 4px;
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .05em; color: var(--text-tertiary);
}
.hsl-cell:not(.hsl-cell--key):not(.hsl-cell--tgt)::before {
content: "English"; display: block; margin-bottom: 4px;
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .05em; color: var(--text-tertiary);
}
.hsl-bar { position: static; }
.hsl-bar__acts { width: 100%; }
.hsl-bar__acts .btn { flex: 1; justify-content: center; }
/* Editor: drop the gutter, keep the buffer readable rather than tiny. */
.hsl-editor__gutter { display: none; }
.hsl-editor__ta { min-height: 260px; max-height: 52vh; font-size: 11.5px; }
.hsl-codehint { min-width: 100%; }
/* Modals go full-screen. */
.hsl-scrim { padding: 0; }
.hsl-modal { width: 100vw; max-height: none; height: 100dvh; border-radius: 0; }
.hsl-form { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.hsl-sub { gap: 8px; }
.hsl-sub .btn { flex: 0 0 auto; }
.hsl-crumb { font-size: 12px; }
.hsl-tab { padding: 6px 10px; font-size: 12px; }
.hsl-tabfile { display: none; }
.hsl-cardacts .btn { flex: 1; justify-content: center; }
.hsl-coderow .btn { flex: 1; justify-content: center; }
}
/* ---- HostSetDepositMethods ---- */
/* ===================================================================
DEPOSIT METHODS (src/pages/HostSetDepositMethods.jsx) — hsd-* chrome
Settings ▾ → Deposit methods. Global catalog (deposit_methods) +
per-skin enablement (skin_deposit_methods). Built on the hrs-* report
shell; token-based, so --p-* resolves to the Iwakiri red ramp under
html[data-theme="iwakiri"]. Never hardcode indigo.
Append after the hrs-* block in styles/theme-iwakiri.css.
=================================================================== */
/* ---- shared type helpers ---- */
.hsd-note {
margin-top: 10px; font-size: 12.5px; line-height: 1.6; color: var(--text-tertiary);
border-left: 3px solid var(--border-strong); padding-left: 10px;
}
.hsd-note code,
.hsd-hint code,
.hsd-bug__b code,
.hsd-detail__grid code { background: var(--n-75); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 0 4px; font-family: var(--font-mono); font-size: 11px; color: var(--n-700); }
.hsd-hint { margin-top: 5px; font-size: 11.5px; line-height: 1.5; color: var(--text-tertiary); }
.hsd-err { margin-top: 5px; font-size: 11.5px; font-weight: 600; color: var(--err-500); }
.hsd-muted { color: var(--text-tertiary); font-style: normal; }
.hsd-mono { font-family: var(--font-mono); }
.hsd-input--err { border-color: var(--err-300) !important; background: var(--err-50); }
/* ---- method_code chip (+ ° = inferred marker) ---- */
.hsd-code {
display: inline-flex; align-items: center; gap: 1px; font-family: var(--font-mono); font-size: 11px;
color: var(--n-700); background: var(--n-75); border: 1px solid var(--border-subtle);
border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}
.hsd-inf { text-decoration: none; cursor: help; color: var(--warn-500); font-weight: 700; }
/* ---- divergence / known-bug banner ---- */
.hsd-bug {
display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start;
border: 1px solid var(--warn-100); background: var(--warn-50); border-left: 4px solid var(--warn-500);
border-radius: 9px; padding: 11px 14px; margin-bottom: 14px;
}
.hsd-bug__ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--warn-500); color: #fff; }
.hsd-bug__t { font-size: 13px; font-weight: 700; color: var(--warn-700); margin-bottom: 3px; }
.hsd-bug__b { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.hsd-bug__b code { background: rgba(255,255,255,.7); border-color: var(--warn-100); }
.hsd-bug__b b { color: var(--warn-700); }
/* ---- catalog table: name link + row actions ---- */
.hsd-namelink {
display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 0;
font-family: inherit; font-size: 13px; font-weight: 600; color: var(--p-700); cursor: pointer; text-align: left;
}
.hsd-namelink:hover { color: var(--p-600); text-decoration: underline; }
.hsd-acts { display: inline-flex; gap: 6px; justify-content: center; }
.hsd-act { width: 30px; height: 30px; border: 0; border-radius: 6px; cursor: pointer; display: grid; place-items: center; color: #fff; }
.hsd-act--danger { background: var(--err-500); }
.hsd-act--danger:hover { background: var(--err-700); }
.hsd-act--edit { background: var(--p-600); }
.hsd-act--edit:hover { background: var(--p-700); }
/* delete blocked because skin_deposit_methods still references the method */
.hsd-act--blocked { background: var(--n-200); color: var(--n-500); cursor: not-allowed; }
.hsd-act--blocked:hover { background: var(--n-200); }
.hsd-acts--card { display: flex; gap: 10px; margin-top: 12px; }
.hsd-acts--card .hrs-btn { flex: 1; min-width: 0; height: 36px; }
.hsd-idtag { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-tertiary); }
/* ---- catalog row expander (fields only GET /depositmethods/form/ returns) ---- */
.hsd-detail { display: grid; grid-template-columns: 132px 1fr; gap: 18px; padding: 4px 2px 6px; }
.hsd-detail__logo { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.hsd-logo {
width: 68px; height: 68px; border-radius: 10px; display: grid; place-items: center;
background: var(--n-50); border: 1px dashed var(--border-strong); color: var(--text-tertiary);
}
.hsd-detail__file {
font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary);
max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
}
.hsd-detail__grid { display: grid; grid-template-columns: 148px 1fr; gap: 7px 16px; font-size: 12.5px; align-items: start; }
.hsd-detail__grid > span { color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 4px; }
.hsd-detail__grid > b { color: var(--text-primary); font-weight: 600; }
.hsd-detail__desc { font-weight: 400 !important; line-height: 1.55; color: var(--text-secondary) !important; white-space: normal; }
.hsd-pill {
display: inline-flex; align-items: center; margin: 0 5px 4px 0; padding: 1px 8px; border-radius: 999px;
background: var(--p-50); border: 1px solid var(--p-100); color: var(--p-700); font-size: 11px; font-weight: 600;
}
.hsd-cardmore { margin-top: 10px; }
.hsd-cardmore > summary {
cursor: pointer; font-size: 12px; font-weight: 600; color: var(--p-700);
list-style: none; padding: 5px 0;
}
.hsd-cardmore > summary::-webkit-details-marker { display: none; }
.hsd-cardmore > summary::before { content: "▸ "; }
.hsd-cardmore[open] > summary::before { content: "▾ "; }
/* ---- per-skin panel: header bar ---- */
.hsd-skinbar {
display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
background: var(--n-0); border: 1px solid var(--border-default); border-radius: 9px;
padding: 11px 14px; box-shadow: var(--shadow-xs); margin-bottom: 12px;
}
.hsd-skinbar__meta { font-size: 12.5px; color: var(--text-secondary); flex: 1; min-width: 200px; padding-bottom: 4px; }
.hsd-skinbar__act { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.hsd-dirty {
display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
color: var(--warn-700); background: var(--warn-50); border: 1px solid var(--warn-100);
border-radius: 999px; padding: 3px 10px;
}
/* ---- per-skin panel: one card per catalog method ---- */
.hsd-mlist { display: flex; flex-direction: column; gap: 10px; }
.hsd-mcard {
background: var(--n-0); border: 1px solid var(--border-default); border-radius: 9px;
padding: 12px 14px 13px; box-shadow: var(--shadow-xs); border-left: 4px solid var(--ok-500);
transition: border-color .12s, background .12s;
}
.hsd-mcard--off { border-left-color: var(--n-200); background: var(--n-25); }
.hsd-mcard__head { display: flex; align-items: center; gap: 12px; }
.hsd-mcard__id { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-tertiary); min-width: 34px; }
.hsd-mcard__title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.hsd-mcard__sw { margin-left: auto; }
.hsd-mgrid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px 14px;
margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--border-subtle);
}
.hsd-f { display: flex; flex-direction: column; min-width: 0; }
.hsd-f .form-label { display: inline-flex; align-items: center; gap: 4px; }
.hsd-f--sw { justify-content: flex-start; }
.hsd-f--sw > :last-child { margin-top: 5px; }
.hsd-f--skin { min-width: 230px; }
.hsd-mcard input:disabled { background: var(--n-50); color: var(--text-tertiary); cursor: not-allowed; }
/* ---- preserved-on-save strip (fee_pct / currency / agents / limit_year) ---- */
.hsd-pres {
margin-top: 11px; padding: 9px 11px; border-radius: 8px;
background: var(--n-25); border: 1px dashed var(--border-strong);
}
.hsd-pres__h {
display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); margin-bottom: 7px;
}
.hsd-pres__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px 16px; }
.hsd-pres__i { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hsd-pres__i > span { font-size: 11px; color: var(--text-tertiary); }
.hsd-pres__i > b {
font-size: 12.5px; font-weight: 600; color: var(--text-primary);
font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 3px;
overflow: hidden; text-overflow: ellipsis;
}
/* ---- create / edit modal ---- */
.hsd-scrim { z-index: 240; place-items: center; padding: 24px 16px; }
.hsd-modal {
width: min(620px, 96vw); max-height: calc(100vh - 56px); padding: 0;
display: flex; flex-direction: column; overflow: hidden;
}
.hsd-modal__head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 15px 20px; border-bottom: 1px solid var(--border-subtle);
}
.hsd-modal__title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.hsd-modal__body { padding: 16px 20px; overflow: auto; display: flex; flex-direction: column; gap: 15px; }
.hsd-modal__foot {
display: flex; justify-content: flex-end; gap: 10px; padding: 13px 20px;
border-top: 1px solid var(--border-subtle); background: var(--n-25);
}
.hsd-ta { min-height: 84px; resize: vertical; font-family: inherit; line-height: 1.5; }
.hsd-fileline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hsd-fileline .input { flex: 1; min-width: 180px; }
.hsd-filename { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsd-check {
display: inline-flex; align-items: center; gap: 7px; margin-top: 8px;
font-size: 12.5px; color: var(--text-secondary); cursor: pointer;
}
.hsd-check input { accent-color: var(--p-500); }
/* ============ Responsive (brief §11) ============ */
@media (max-width: 1100px) {
.hsd-skinbar__act { margin-left: 0; width: 100%; justify-content: space-between; }
.hsd-skinbar__act .hrs-btn { flex: 1; }
}
@media (max-width: 860px) {
/* filter bar + tables are handled by the hrs-* sheet/card collapses;
here: modals go full-screen and the dense grids reflow */
.hsd-scrim { padding: 0; }
.hsd-modal { width: 100vw; max-height: none; height: 100dvh; border-radius: 0; }
.hsd-detail { grid-template-columns: 1fr; gap: 12px; }
.hsd-detail__logo { flex-direction: row; align-items: center; justify-content: flex-start; }
.hsd-detail__file { text-align: left; max-width: none; }
.hsd-detail__grid { grid-template-columns: 1fr; gap: 2px 0; }
.hsd-detail__grid > b { margin-bottom: 8px; }
.hsd-mgrid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.hsd-skinbar { flex-direction: column; align-items: stretch; }
.hsd-skinbar__meta { min-width: 0; padding-bottom: 0; }
}
@media (max-width: 620px) {
.hsd-mcard { padding: 11px 12px 12px; }
.hsd-mcard__head { flex-wrap: wrap; }
.hsd-mcard__sw { margin-left: 0; width: 100%; }
.hsd-mgrid { grid-template-columns: 1fr 1fr; }
.hsd-pres__row { grid-template-columns: 1fr 1fr; }
.hsd-bug { grid-template-columns: 1fr; }
.hsd-bug__ic { display: none; }
.hsd-acts--card { flex-direction: column; }
}
/* ---- shared type helpers ---- */
.hsd-note {
margin-top: 10px; font-size: 12.5px; line-height: 1.6; color: var(--text-tertiary);
border-left: 3px solid var(--border-strong); padding-left: 10px;
}
.hsd-note code,
.hsd-hint code,
.hsd-bug__b code,
.hsd-detail__grid code { background: var(--n-75); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 0 4px; font-family: var(--font-mono); font-size: 11px; color: var(--n-700); }
.hsd-hint { margin-top: 5px; font-size: 11.5px; line-height: 1.5; color: var(--text-tertiary); }
.hsd-err { margin-top: 5px; font-size: 11.5px; font-weight: 600; color: var(--err-500); }
.hsd-muted { color: var(--text-tertiary); font-style: normal; }
.hsd-mono { font-family: var(--font-mono); }
.hsd-input--err { border-color: var(--err-300) !important; background: var(--err-50); }
/* ---- method_code chip (+ ° = inferred marker) ---- */
.hsd-code {
display: inline-flex; align-items: center; gap: 1px; font-family: var(--font-mono); font-size: 11px;
color: var(--n-700); background: var(--n-75); border: 1px solid var(--border-subtle);
border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}
.hsd-inf { text-decoration: none; cursor: help; color: var(--warn-500); font-weight: 700; }
/* ---- divergence / known-bug banner ---- */
.hsd-bug {
display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start;
border: 1px solid var(--warn-100); background: var(--warn-50); border-left: 4px solid var(--warn-500);
border-radius: 9px; padding: 11px 14px; margin-bottom: 14px;
}
.hsd-bug__ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--warn-500); color: #fff; }
.hsd-bug__t { font-size: 13px; font-weight: 700; color: var(--warn-700); margin-bottom: 3px; }
.hsd-bug__b { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.hsd-bug__b code { background: rgba(255,255,255,.7); border-color: var(--warn-100); }
.hsd-bug__b b { color: var(--warn-700); }
/* ---- catalog table: name link + row actions ---- */
.hsd-namelink {
display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 0;
font-family: inherit; font-size: 13px; font-weight: 600; color: var(--p-700); cursor: pointer; text-align: left;
}
.hsd-namelink:hover { color: var(--p-600); text-decoration: underline; }
.hsd-acts { display: inline-flex; gap: 6px; justify-content: center; }
.hsd-act { width: 30px; height: 30px; border: 0; border-radius: 6px; cursor: pointer; display: grid; place-items: center; color: #fff; }
.hsd-act--danger { background: var(--err-500); }
.hsd-act--danger:hover { background: var(--err-700); }
.hsd-act--edit { background: var(--p-600); }
.hsd-act--edit:hover { background: var(--p-700); }
/* delete blocked because skin_deposit_methods still references the method */
.hsd-act--blocked { background: var(--n-200); color: var(--n-500); cursor: not-allowed; }
.hsd-act--blocked:hover { background: var(--n-200); }
.hsd-acts--card { display: flex; gap: 10px; margin-top: 12px; }
.hsd-acts--card .hrs-btn { flex: 1; min-width: 0; height: 36px; }
.hsd-idtag { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-tertiary); }
/* ---- catalog row expander (fields only GET /depositmethods/form/ returns) ---- */
.hsd-detail { display: grid; grid-template-columns: 132px 1fr; gap: 18px; padding: 4px 2px 6px; }
.hsd-detail__logo { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.hsd-logo {
width: 68px; height: 68px; border-radius: 10px; display: grid; place-items: center;
background: var(--n-50); border: 1px dashed var(--border-strong); color: var(--text-tertiary);
}
.hsd-detail__file {
font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary);
max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
}
.hsd-detail__grid { display: grid; grid-template-columns: 148px 1fr; gap: 7px 16px; font-size: 12.5px; align-items: start; }
.hsd-detail__grid > span { color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 4px; }
.hsd-detail__grid > b { color: var(--text-primary); font-weight: 600; }
.hsd-detail__desc { font-weight: 400 !important; line-height: 1.55; color: var(--text-secondary) !important; white-space: normal; }
.hsd-pill {
display: inline-flex; align-items: center; margin: 0 5px 4px 0; padding: 1px 8px; border-radius: 999px;
background: var(--p-50); border: 1px solid var(--p-100); color: var(--p-700); font-size: 11px; font-weight: 600;
}
.hsd-cardmore { margin-top: 10px; }
.hsd-cardmore > summary {
cursor: pointer; font-size: 12px; font-weight: 600; color: var(--p-700);
list-style: none; padding: 5px 0;
}
.hsd-cardmore > summary::-webkit-details-marker { display: none; }
.hsd-cardmore > summary::before { content: "▸ "; }
.hsd-cardmore[open] > summary::before { content: "▾ "; }
/* ---- per-skin panel: header bar ---- */
.hsd-skinbar {
display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
background: var(--n-0); border: 1px solid var(--border-default); border-radius: 9px;
padding: 11px 14px; box-shadow: var(--shadow-xs); margin-bottom: 12px;
}
.hsd-skinbar__meta { font-size: 12.5px; color: var(--text-secondary); flex: 1; min-width: 200px; padding-bottom: 4px; }
.hsd-skinbar__act { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.hsd-dirty {
display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
color: var(--warn-700); background: var(--warn-50); border: 1px solid var(--warn-100);
border-radius: 999px; padding: 3px 10px;
}
/* ---- per-skin panel: one card per catalog method ---- */
.hsd-mlist { display: flex; flex-direction: column; gap: 10px; }
.hsd-mcard {
background: var(--n-0); border: 1px solid var(--border-default); border-radius: 9px;
padding: 12px 14px 13px; box-shadow: var(--shadow-xs); border-left: 4px solid var(--ok-500);
transition: border-color .12s, background .12s;
}
.hsd-mcard--off { border-left-color: var(--n-200); background: var(--n-25); }
.hsd-mcard__head { display: flex; align-items: center; gap: 12px; }
.hsd-mcard__id { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-tertiary); min-width: 34px; }
.hsd-mcard__title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.hsd-mcard__sw { margin-left: auto; }
.hsd-mgrid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px 14px;
margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--border-subtle);
}
.hsd-f { display: flex; flex-direction: column; min-width: 0; }
.hsd-f .form-label { display: inline-flex; align-items: center; gap: 4px; }
.hsd-f--sw { justify-content: flex-start; }
.hsd-f--sw > :last-child { margin-top: 5px; }
.hsd-f--skin { min-width: 230px; }
.hsd-mcard input:disabled { background: var(--n-50); color: var(--text-tertiary); cursor: not-allowed; }
/* ---- preserved-on-save strip (fee_pct / currency / agents / limit_year) ---- */
.hsd-pres {
margin-top: 11px; padding: 9px 11px; border-radius: 8px;
background: var(--n-25); border: 1px dashed var(--border-strong);
}
.hsd-pres__h {
display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); margin-bottom: 7px;
}
.hsd-pres__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px 16px; }
.hsd-pres__i { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hsd-pres__i > span { font-size: 11px; color: var(--text-tertiary); }
.hsd-pres__i > b {
font-size: 12.5px; font-weight: 600; color: var(--text-primary);
font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 3px;
overflow: hidden; text-overflow: ellipsis;
}
/* ---- create / edit modal ---- */
.hsd-scrim { z-index: 240; place-items: center; padding: 24px 16px; }
.hsd-modal {
width: min(620px, 96vw); max-height: calc(100vh - 56px); padding: 0;
display: flex; flex-direction: column; overflow: hidden;
}
.hsd-modal__head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 15px 20px; border-bottom: 1px solid var(--border-subtle);
}
.hsd-modal__title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.hsd-modal__body { padding: 16px 20px; overflow: auto; display: flex; flex-direction: column; gap: 15px; }
.hsd-modal__foot {
display: flex; justify-content: flex-end; gap: 10px; padding: 13px 20px;
border-top: 1px solid var(--border-subtle); background: var(--n-25);
}
.hsd-ta { min-height: 84px; resize: vertical; font-family: inherit; line-height: 1.5; }
.hsd-fileline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hsd-fileline .input { flex: 1; min-width: 180px; }
.hsd-filename { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsd-check {
display: inline-flex; align-items: center; gap: 7px; margin-top: 8px;
font-size: 12.5px; color: var(--text-secondary); cursor: pointer;
}
.hsd-check input { accent-color: var(--p-500); }
/* ============ Responsive (brief §11) ============ */
@media (max-width: 1100px) {
.hsd-skinbar__act { margin-left: 0; width: 100%; justify-content: space-between; }
.hsd-skinbar__act .hrs-btn { flex: 1; }
}
@media (max-width: 860px) {
/* filter bar + tables are handled by the hrs-* sheet/card collapses;
here: modals go full-screen and the dense grids reflow */
.hsd-scrim { padding: 0; }
.hsd-modal { width: 100vw; max-height: none; height: 100dvh; border-radius: 0; }
.hsd-detail { grid-template-columns: 1fr; gap: 12px; }
.hsd-detail__logo { flex-direction: row; align-items: center; justify-content: flex-start; }
.hsd-detail__file { text-align: left; max-width: none; }
.hsd-detail__grid { grid-template-columns: 1fr; gap: 2px 0; }
.hsd-detail__grid > b { margin-bottom: 8px; }
.hsd-mgrid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.hsd-skinbar { flex-direction: column; align-items: stretch; }
.hsd-skinbar__meta { min-width: 0; padding-bottom: 0; }
}
@media (max-width: 620px) {
.hsd-mcard { padding: 11px 12px 12px; }
.hsd-mcard__head { flex-wrap: wrap; }
.hsd-mcard__sw { margin-left: 0; width: 100%; }
.hsd-mgrid { grid-template-columns: 1fr 1fr; }
.hsd-pres__row { grid-template-columns: 1fr 1fr; }
.hsd-bug { grid-template-columns: 1fr; }
.hsd-bug__ic { display: none; }
.hsd-acts--card { flex-direction: column; }
}
/* ---- HostSetDeletedUsers ---- */
/* ===================================================================
Deleted Users (src/pages/HostSetDeletedUsers.jsx → SetDeletedUsers)
Settings ▾ leaf for GET /deleted_users (admin.users.deleted).
Page chrome comes from the Hrs* shell (.hrs-* block); the chips are the
shared /users vocabulary (.hu-rolechip / .hu-gate, already defined
above in this file). Everything below is only what those two do not
cover: the gate rail, the source line, the balance + id cells and the
mobile card extras. Prefix: hdu- · Iwakiri red = var(--p-*).
=================================================================== */
/* ---- permission rail (the three gate layers this screen passes) ---- */
.hrs-page .hdu-gaterail {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
margin: 0 0 14px; padding: 9px 12px;
border: 1px dashed var(--border-default); border-radius: 8px;
background: var(--n-25);
font-size: 11.5px; color: var(--text-secondary);
}
.hrs-page .hdu-gaterail__item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.hrs-page .hdu-gaterail__item b {
font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
color: var(--text-tertiary);
}
.hrs-page .hdu-gaterail__item > svg { color: var(--p-500); flex: none; }
.hrs-page .hdu-gaterail__item--muted { color: var(--text-tertiary); }
.hrs-page .hdu-gaterail__item--muted > svg { color: var(--text-tertiary); }
/* ---- source line above the table ---- */
.hrs-page .hdu-source {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
margin: 0 0 8px; font-size: 12.5px; color: var(--text-tertiary);
}
.hrs-page .hdu-source__main { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.hrs-page .hdu-source__main code {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 12px; font-weight: 700; color: #2b2f3a;
background: #f4f5f8; border: 1px solid #e4e6ef; border-radius: 4px; padding: 1px 6px;
}
.hrs-page .hdu-source__sub { color: var(--text-tertiary); }
.hrs-page .hdu-nores {
display: inline-flex; align-items: center; gap: 5px;
background: var(--p-50); color: var(--p-700); border: 1px solid var(--p-100);
border-radius: 999px; padding: 2px 10px;
font-size: 11px; font-weight: 700; white-space: nowrap;
}
.hrs-page .hdu-hint { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 11.5px; }
/* ---- table cells ---- */
.hrs-page .hdu-id { font-variant-numeric: tabular-nums; font-weight: 600; }
.hrs-page .hdu-muted { color: var(--text-tertiary); font-weight: 500; }
.hrs-page .hdu-user { font-weight: 700; color: #3f4254; word-break: break-word; }
.hrs-page .hdu-dash { color: var(--text-tertiary); }
.hrs-page .hdu-bal { display: flex; flex-direction: column; line-height: 1.35; }
.hrs-page .hdu-bal b { font-variant-numeric: tabular-nums; color: var(--ok-700, #1f9d57); }
.hrs-page .hdu-bal b.hdu-neg { color: #e9484a; }
.hrs-page .hdu-fido { font-size: 11px; color: var(--text-tertiary); }
/* ---- export row extras (PDF button + the divergence note) ---- */
.hrs-page .hdu-pdfbtn {
display: inline-flex; align-items: center; gap: 6px;
height: 32px; padding: 0 12px; margin-right: 10px;
border: 1px solid var(--border-default); border-radius: 6px; background: var(--n-0);
font-family: inherit; font-size: 12.5px; font-weight: 600; color: #3f4254; cursor: pointer;
transition: border-color .12s, color .12s;
}
.hrs-page .hdu-pdfbtn:hover { border-color: var(--p-300); color: var(--p-600); }
.hrs-page .hdu-exportnote { font-size: 11.5px; color: var(--text-tertiary); }
.hrs-page .hdu-exportnote code {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11px; color: var(--text-secondary);
}
/* ---- mobile stacked cards (rendered by HrsTable's renderCard) ----
The card head uses its own class rather than .hrs-card__top: the only
ancestor this page shares with the other Hrs screens is .hrs-page, so
restyling a shared card part here would leak into all of them. */
.hrs-page .hdu-cardtop {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
font-size: 13.5px; margin-bottom: 8px;
}
.hrs-page .hdu-when { font-size: 11.5px; color: var(--text-tertiary); white-space: nowrap; }
.hrs-page .hdu-cardchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.hrs-page .hdu-details > summary {
list-style: none; cursor: pointer;
font-size: 12px; font-weight: 600; color: var(--p-600);
padding: 6px 0 2px; border-top: 1px dashed var(--border-default);
}
.hrs-page .hdu-details > summary::-webkit-details-marker { display: none; }
.hrs-page .hdu-details > summary::after { content: " ▾"; opacity: .6; }
.hrs-page .hdu-details[open] > summary::after { content: " ▴"; }
.hrs-page .hdu-details .hrs-card__grid { padding-top: 6px; }
/* ============ Responsive (brief §11) ============ */
@media (max-width: 1100px) {
.hrs-page .hdu-gaterail { gap: 6px 12px; }
.hrs-page .hdu-source__sub { display: none; }
.hrs-page .hdu-hint { margin-left: 0; }
}
@media (max-width: 860px) {
/* Gate rail stacks — one permission layer per line, still legible. */
.hrs-page .hdu-gaterail { flex-direction: column; align-items: flex-start; gap: 7px; }
.hrs-page .hdu-gaterail__item { flex-wrap: wrap; }
/* Source line stacks; the "no restore" badge stays on its own row. */
.hrs-page .hdu-source { flex-direction: column; align-items: flex-start; gap: 6px; }
.hrs-page .hdu-hint { margin-left: 0; }
/* Export row: PDF button goes full width above the note. */
.hrs-page .hdu-pdfbtn { width: 100%; justify-content: center; margin: 0 0 8px; height: 38px; }
.hrs-page .hdu-exportnote { display: block; }
/* Card head: long usernames wrap instead of squeezing the timestamp. */
.hrs-page .hdu-cardtop { align-items: flex-start; }
.hrs-page .hdu-when { padding-top: 2px; }
}
/* ---- permission rail (the three gate layers this screen passes) ---- */
.hrs-page .hdu-gaterail {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
margin: 0 0 14px; padding: 9px 12px;
border: 1px dashed var(--border-default); border-radius: 8px;
background: var(--n-25);
font-size: 11.5px; color: var(--text-secondary);
}
.hrs-page .hdu-gaterail__item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.hrs-page .hdu-gaterail__item b {
font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
color: var(--text-tertiary);
}
.hrs-page .hdu-gaterail__item > svg { color: var(--p-500); flex: none; }
.hrs-page .hdu-gaterail__item--muted { color: var(--text-tertiary); }
.hrs-page .hdu-gaterail__item--muted > svg { color: var(--text-tertiary); }
/* ---- source line above the table ---- */
.hrs-page .hdu-source {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
margin: 0 0 8px; font-size: 12.5px; color: var(--text-tertiary);
}
.hrs-page .hdu-source__main { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.hrs-page .hdu-source__main code {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 12px; font-weight: 700; color: #2b2f3a;
background: #f4f5f8; border: 1px solid #e4e6ef; border-radius: 4px; padding: 1px 6px;
}
.hrs-page .hdu-source__sub { color: var(--text-tertiary); }
.hrs-page .hdu-nores {
display: inline-flex; align-items: center; gap: 5px;
background: var(--p-50); color: var(--p-700); border: 1px solid var(--p-100);
border-radius: 999px; padding: 2px 10px;
font-size: 11px; font-weight: 700; white-space: nowrap;
}
.hrs-page .hdu-hint { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 11.5px; }
/* ---- table cells ---- */
.hrs-page .hdu-id { font-variant-numeric: tabular-nums; font-weight: 600; }
.hrs-page .hdu-muted { color: var(--text-tertiary); font-weight: 500; }
.hrs-page .hdu-user { font-weight: 700; color: #3f4254; word-break: break-word; }
.hrs-page .hdu-dash { color: var(--text-tertiary); }
.hrs-page .hdu-bal { display: flex; flex-direction: column; line-height: 1.35; }
.hrs-page .hdu-bal b { font-variant-numeric: tabular-nums; color: var(--ok-700, #1f9d57); }
.hrs-page .hdu-bal b.hdu-neg { color: #e9484a; }
.hrs-page .hdu-fido { font-size: 11px; color: var(--text-tertiary); }
/* ---- export row extras (PDF button + the divergence note) ---- */
.hrs-page .hdu-pdfbtn {
display: inline-flex; align-items: center; gap: 6px;
height: 32px; padding: 0 12px; margin-right: 10px;
border: 1px solid var(--border-default); border-radius: 6px; background: var(--n-0);
font-family: inherit; font-size: 12.5px; font-weight: 600; color: #3f4254; cursor: pointer;
transition: border-color .12s, color .12s;
}
.hrs-page .hdu-pdfbtn:hover { border-color: var(--p-300); color: var(--p-600); }
.hrs-page .hdu-exportnote { font-size: 11.5px; color: var(--text-tertiary); }
.hrs-page .hdu-exportnote code {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11px; color: var(--text-secondary);
}
/* ---- mobile stacked cards (rendered by HrsTable's renderCard) ---- */
.hrs-page .hdu-when { font-size: 11.5px; color: var(--text-tertiary); white-space: nowrap; }
.hrs-page .hdu-cardchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.hrs-page .hdu-details > summary {
list-style: none; cursor: pointer;
font-size: 12px; font-weight: 600; color: var(--p-600);
padding: 6px 0 2px; border-top: 1px dashed var(--border-default);
}
.hrs-page .hdu-details > summary::-webkit-details-marker { display: none; }
.hrs-page .hdu-details > summary::after { content: " ▾"; opacity: .6; }
.hrs-page .hdu-details[open] > summary::after { content: " ▴"; }
.hrs-page .hdu-details .hrs-card__grid { padding-top: 6px; }
/* ============ Responsive (brief §11) ============ */
@media (max-width: 1100px) {
.hrs-page .hdu-gaterail { gap: 6px 12px; }
.hrs-page .hdu-source__sub { display: none; }
.hrs-page .hdu-hint { margin-left: 0; }
}
@media (max-width: 860px) {
/* Gate rail stacks — one permission layer per line, still legible. */
.hrs-page .hdu-gaterail { flex-direction: column; align-items: flex-start; gap: 7px; }
.hrs-page .hdu-gaterail__item { flex-wrap: wrap; }
/* Source line stacks; the "no restore" badge stays on its own row. */
.hrs-page .hdu-source { flex-direction: column; align-items: flex-start; gap: 6px; }
.hrs-page .hdu-hint { margin-left: 0; }
/* Export row: PDF button goes full width above the note. */
.hrs-page .hdu-pdfbtn { width: 100%; justify-content: center; margin: 0 0 8px; height: 38px; }
.hrs-page .hdu-exportnote { display: block; }
/* Card head: long usernames wrap instead of squeezing the timestamp. */
.hrs-page .hrs-card__top { align-items: flex-start; }
.hrs-page .hdu-when { padding-top: 2px; }
}
/* ---- HostSetJobs ---- */
/* ===== Jobs — Settings ▾ (src/pages/HostSetJobs.jsx) =====
Built on the Hrs* kit (HrsShell/HrsTable/HrsPager supply the chrome), so
this block only carries what is specific to the queue table: the class /
progress / params cells, the cooperative-kill modal, the honest-absence
strip and the row-detail payload dump. Iwakiri red ramp (--p-*) only —
no PayBO indigo. Scoped under `.hsj` (the page's own wrapper inside
HrsShell) except the kill modal, which renders at the page root. */
/* ---- header Search button (real label, reload semantics) ---- */
.hrs-page .hsj-reload { min-width: 0; height: 38px; }
/* ---- queue count line above the table ---- */
.hsj .hsj-queueline {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin: 0 0 10px; font-size: 12.5px; color: var(--text-secondary);
}
.hsj .hsj-queueline b { color: var(--n-800); font-variant-numeric: tabular-nums; font-weight: 700; }
.hsj .hsj-queueline code { font-size: 11.5px; background: var(--n-75); border-radius: 4px; padding: 1px 5px; color: var(--n-700); }
.hsj .hsj-queueline__sep { width: 1px; height: 12px; background: var(--border-default); }
/* ---- Class cell — namespace recedes, class name leads ---- */
.hsj .hsj-cls { display: inline-flex; align-items: baseline; gap: 0; max-width: 340px; }
.hsj .hsj-cls__ns { color: var(--text-tertiary); font-size: 11.5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.hsj .hsj-cls__n { font-size: 12.5px; font-weight: 700; color: var(--n-800); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.hsj .hsj-inferred {
margin-left: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
color: var(--warn-700); background: var(--warn-50); border: 1px solid var(--warn-100);
border-radius: 999px; padding: 1px 6px; cursor: help; white-space: nowrap;
}
/* ---- Reserved at / Attempts ---- */
.hsj .hsj-res { font-variant-numeric: tabular-nums; font-size: 12.5px; }
.hsj .hsj-none { color: var(--n-300); cursor: help; }
.hsj .hsj-att { font-variant-numeric: tabular-nums; font-weight: 600; }
.hsj .hsj-att--retry {
display: inline-block; min-width: 22px; border-radius: 999px; padding: 1px 7px;
background: var(--warn-50); color: var(--warn-700); border: 1px solid var(--warn-100);
}
/* ---- Progress — bar over round($progress, 2) . ' %' ---- */
.hsj .hsj-prog { display: flex; align-items: center; gap: 9px; }
.hsj .hsj-prog__track {
flex: 0 0 74px; height: 6px; border-radius: 999px; background: var(--n-100);
overflow: hidden; box-shadow: inset 0 0 0 1px rgba(15, 20, 32, .04);
}
.hsj .hsj-prog__track--idle { opacity: .5; }
.hsj .hsj-prog__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--p-400), var(--p-600)); transition: width .25s ease; }
.hsj .hsj-prog__t { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-secondary); white-space: nowrap; }
/* ---- Params — the whole command object as JSON, one line ---- */
.hsj .hsj-params { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.hsj .hsj-json {
display: inline-block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px;
color: var(--n-600); background: var(--n-50); border: 1px solid var(--border-subtle);
border-radius: 5px; padding: 2px 7px; vertical-align: middle;
}
.hsj .hsj-killflag {
display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; cursor: help;
font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
color: var(--p-700); background: var(--p-50); border: 1px solid var(--p-100);
border-radius: 999px; padding: 2px 7px;
}
/* ---- Kill row action ---- */
.hsj .hsj-kill {
display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 10px;
border: 1px solid var(--p-200); border-radius: 5px; background: var(--n-0);
color: var(--p-600); font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.hsj .hsj-kill:hover { background: var(--p-500); border-color: var(--p-500); color: #fff; }
.hsj .hsj-kill:focus-visible { outline: 2px solid var(--p-300); outline-offset: 1px; }
.hsj .hsj-kill--card { width: 100%; justify-content: center; height: 36px; margin-top: 10px; }
/* ---- row detail — pretty-printed payload ---- */
.hsj .hsj-detail { padding: 12px 14px; background: var(--n-25); }
.hsj .hsj-detail__h {
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
font-size: 12px; color: var(--text-secondary); margin-bottom: 8px;
}
.hsj .hsj-detail__meta { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--text-tertiary); }
.hsj .hsj-detail__h code,
.hsj .hsj-detail__env code { font-size: 11px; background: var(--n-75); border-radius: 4px; padding: 1px 5px; color: var(--n-700); }
.hsj .hsj-detail__json {
margin: 0; padding: 10px 12px; max-height: 260px; overflow: auto;
background: var(--n-800); color: #e8edf3; border-radius: 7px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.55;
white-space: pre; tab-size: 2;
}
.hsj .hsj-detail__env { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 11.5px; color: var(--text-tertiary); }
/* ---- honest-absence strip under the pager ---- */
.hsj .hsj-absence {
margin-top: 18px; padding: 13px 16px; border-radius: 10px;
border: 1px solid var(--border-default); background: var(--n-25);
}
.hsj .hsj-absence__h {
display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
font-size: 12.5px; font-weight: 700; color: var(--n-700);
}
.hsj .hsj-absence__l { margin: 0; padding-left: 20px; font-size: 12.5px; line-height: 1.65; color: var(--text-secondary); }
.hsj .hsj-absence__l li + li { margin-top: 5px; }
.hsj .hsj-absence__l b { color: var(--n-800); }
.hsj .hsj-absence__l code { font-size: 11.5px; background: var(--n-75); border-radius: 4px; padding: 1px 5px; color: var(--n-700); }
/* ---- mobile card extras (HrsTable supplies .hrs-card at <= 860px) ---- */
.hsj .hsj-card__id { font-weight: 700; color: var(--p-700); font-variant-numeric: tabular-nums; }
.hsj .hsj-card__cls { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 700; color: var(--n-800); text-align: right; }
.hsj .hsj-card__prog { margin-bottom: 10px; }
.hsj .hsj-card__prog .hsj-prog__track { flex: 1 1 auto; }
.hsj .hsj-card__more { margin-top: 10px; }
.hsj .hsj-card__more > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--p-700); list-style: none; }
.hsj .hsj-card__more > summary::-webkit-details-marker { display: none; }
.hsj .hsj-card__more > summary::before { content: "▸ "; }
.hsj .hsj-card__more[open] > summary::before { content: "▾ "; }
.hsj .hsj-card__more .hsj-detail__json { margin-top: 8px; max-height: 220px; }
/* ---- cooperative-kill confirmation modal ---- */
.bp-modal-scrim.hsj-scrim { place-items: center; }
.hsj-modal {
background: var(--n-0); border-radius: 12px; width: min(520px, calc(100vw - 32px));
max-height: calc(100vh - 60px); display: flex; flex-direction: column;
box-shadow: 0 24px 70px rgba(15, 20, 32, .4); overflow: hidden;
}
.hsj-modal__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border-subtle); }
.hsj-modal__ic { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--p-500); color: #fff; flex-shrink: 0; }
.hsj-modal__title { font-size: 15px; font-weight: 700; color: var(--n-800); display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.hsj-modal__sub { font-size: 11.5px; font-weight: 500; color: var(--text-tertiary); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.hsj-modal__x { width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--n-400); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.hsj-modal__x:hover { background: var(--n-75); color: var(--n-600); }
.hsj-modal__body { padding: 16px 18px; font-size: 13px; color: var(--text-primary); line-height: 1.55; overflow: auto; }
.hsj-modal__body p { margin: 0 0 10px; }
.hsj-modal__note { font-size: 12px; color: var(--text-secondary); }
.hsj-modal__note--last { margin: 12px 0 0; font-size: 11.5px; color: var(--text-tertiary); }
.hsj-modal__body code { font-size: 11.5px; background: var(--n-75); border-radius: 4px; padding: 1px 5px; color: var(--n-700); }
.hsj-modal__foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--border-subtle); background: var(--n-25); }
.hsj-btn { min-width: 0; height: 42px; }
.hsj-btn--ghost { background: var(--n-0); color: var(--n-600); border: 1px solid var(--border-default); box-shadow: none; }
.hsj-btn--ghost:hover { background: var(--n-75); }
/* verdict lines: does this class actually observe the flag? */
.hsj-verdict {
display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0;
padding: 9px 11px; border-radius: 8px; font-size: 12.5px; line-height: 1.5; border: 1px solid transparent;
}
.hsj-verdict svg { flex-shrink: 0; margin-top: 2px; }
.hsj-verdict--ok { background: var(--ok-50); border-color: var(--ok-100); color: var(--ok-700); }
.hsj-verdict--warn { background: var(--warn-50); border-color: var(--warn-100); color: var(--warn-700); }
.hsj-verdict--muted { background: var(--n-50); border-color: var(--border-subtle); color: var(--text-secondary); }
/* ---- responsive (brief §11) --------------------------------------
The Hrs kit already flips the table to stacked cards, wraps the header
actions and centres the pager at <= 860px. These rules cover the
page-specific pieces: the wide JSON cells, the dense progress cell and
the modal going full-screen. */
@media (max-width: 1200px) {
.hsj .hsj-json { max-width: 200px; }
.hsj .hsj-cls { max-width: 240px; }
}
@media (max-width: 860px) {
.hsj .hsj-queueline { gap: 8px; font-size: 12px; }
.hsj .hsj-queueline__sep { display: none; }
.hsj .hsj-queueline > span:not(.hsj-queueline__sep) { flex: 0 0 auto; }
.hsj .hsj-absence { margin-top: 14px; padding: 12px 13px; }
.hsj .hsj-absence__l { padding-left: 17px; font-size: 12px; }
.hsj .hsj-detail__json { max-height: 200px; }
}
@media (max-width: 640px) {
.bp-modal-scrim.hsj-scrim { padding: 0; }
.hsj-modal { position: fixed; inset: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; }
.hsj-modal__foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.hsj-modal__foot .hsj-btn { flex: 1; }
.hsj .hsj-card__cls { font-size: 11.5px; word-break: break-all; text-align: right; }
.hsj .hsj-detail__json,
.hsj .hsj-card__more .hsj-detail__json { font-size: 11px; }
}
/* ---- header Search button (real label, reload semantics) ---- */
.hrs-page .hsj-reload { min-width: 0; height: 38px; }
/* ---- queue count line above the table ---- */
.hsj .hsj-queueline {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin: 0 0 10px; font-size: 12.5px; color: var(--text-secondary);
}
.hsj .hsj-queueline b { color: var(--n-800); font-variant-numeric: tabular-nums; font-weight: 700; }
.hsj .hsj-queueline code { font-size: 11.5px; background: var(--n-75); border-radius: 4px; padding: 1px 5px; color: var(--n-700); }
.hsj .hsj-queueline__sep { width: 1px; height: 12px; background: var(--border-default); }
/* ---- Class cell — namespace recedes, class name leads ---- */
.hsj .hsj-cls { display: inline-flex; align-items: baseline; gap: 0; max-width: 340px; }
.hsj .hsj-cls__ns { color: var(--text-tertiary); font-size: 11.5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.hsj .hsj-cls__n { font-size: 12.5px; font-weight: 700; color: var(--n-800); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.hsj .hsj-inferred {
margin-left: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
color: var(--warn-700); background: var(--warn-50); border: 1px solid var(--warn-100);
border-radius: 999px; padding: 1px 6px; cursor: help; white-space: nowrap;
}
/* ---- Reserved at / Attempts ---- */
.hsj .hsj-res { font-variant-numeric: tabular-nums; font-size: 12.5px; }
.hsj .hsj-none { color: var(--n-300); cursor: help; }
.hsj .hsj-att { font-variant-numeric: tabular-nums; font-weight: 600; }
.hsj .hsj-att--retry {
display: inline-block; min-width: 22px; border-radius: 999px; padding: 1px 7px;
background: var(--warn-50); color: var(--warn-700); border: 1px solid var(--warn-100);
}
/* ---- Progress — bar over round($progress, 2) . ' %' ---- */
.hsj .hsj-prog { display: flex; align-items: center; gap: 9px; }
.hsj .hsj-prog__track {
flex: 0 0 74px; height: 6px; border-radius: 999px; background: var(--n-100);
overflow: hidden; box-shadow: inset 0 0 0 1px rgba(15, 20, 32, .04);
}
.hsj .hsj-prog__track--idle { opacity: .5; }
.hsj .hsj-prog__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--p-400), var(--p-600)); transition: width .25s ease; }
.hsj .hsj-prog__t { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-secondary); white-space: nowrap; }
/* ---- Params — the whole command object as JSON, one line ---- */
.hsj .hsj-params { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.hsj .hsj-json {
display: inline-block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px;
color: var(--n-600); background: var(--n-50); border: 1px solid var(--border-subtle);
border-radius: 5px; padding: 2px 7px; vertical-align: middle;
}
.hsj .hsj-killflag {
display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; cursor: help;
font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
color: var(--p-700); background: var(--p-50); border: 1px solid var(--p-100);
border-radius: 999px; padding: 2px 7px;
}
/* ---- Kill row action ---- */
.hsj .hsj-kill {
display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 10px;
border: 1px solid var(--p-200); border-radius: 5px; background: var(--n-0);
color: var(--p-600); font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.hsj .hsj-kill:hover { background: var(--p-500); border-color: var(--p-500); color: #fff; }
.hsj .hsj-kill:focus-visible { outline: 2px solid var(--p-300); outline-offset: 1px; }
.hsj .hsj-kill--card { width: 100%; justify-content: center; height: 36px; margin-top: 10px; }
/* ---- row detail — pretty-printed payload ---- */
.hsj .hsj-detail { padding: 12px 14px; background: var(--n-25); }
.hsj .hsj-detail__h {
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
font-size: 12px; color: var(--text-secondary); margin-bottom: 8px;
}
.hsj .hsj-detail__meta { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--text-tertiary); }
.hsj .hsj-detail__h code,
.hsj .hsj-detail__env code { font-size: 11px; background: var(--n-75); border-radius: 4px; padding: 1px 5px; color: var(--n-700); }
.hsj .hsj-detail__json {
margin: 0; padding: 10px 12px; max-height: 260px; overflow: auto;
background: var(--n-800); color: #e8edf3; border-radius: 7px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.55;
white-space: pre; tab-size: 2;
}
.hsj .hsj-detail__env { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 11.5px; color: var(--text-tertiary); }
/* ---- honest-absence strip under the pager ---- */
.hsj .hsj-absence {
margin-top: 18px; padding: 13px 16px; border-radius: 10px;
border: 1px solid var(--border-default); background: var(--n-25);
}
.hsj .hsj-absence__h {
display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
font-size: 12.5px; font-weight: 700; color: var(--n-700);
}
.hsj .hsj-absence__l { margin: 0; padding-left: 20px; font-size: 12.5px; line-height: 1.65; color: var(--text-secondary); }
.hsj .hsj-absence__l li + li { margin-top: 5px; }
.hsj .hsj-absence__l b { color: var(--n-800); }
.hsj .hsj-absence__l code { font-size: 11.5px; background: var(--n-75); border-radius: 4px; padding: 1px 5px; color: var(--n-700); }
/* ---- mobile card extras (HrsTable supplies .hrs-card at <= 860px) ---- */
.hsj .hsj-card__id { font-weight: 700; color: var(--p-700); font-variant-numeric: tabular-nums; }
.hsj .hsj-card__cls { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 700; color: var(--n-800); text-align: right; }
.hsj .hsj-card__prog { margin-bottom: 10px; }
.hsj .hsj-card__prog .hsj-prog__track { flex: 1 1 auto; }
.hsj .hsj-card__more { margin-top: 10px; }
.hsj .hsj-card__more > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--p-700); list-style: none; }
.hsj .hsj-card__more > summary::-webkit-details-marker { display: none; }
.hsj .hsj-card__more > summary::before { content: "▸ "; }
.hsj .hsj-card__more[open] > summary::before { content: "▾ "; }
.hsj .hsj-card__more .hsj-detail__json { margin-top: 8px; max-height: 220px; }
/* ---- cooperative-kill confirmation modal ---- */
.bp-modal-scrim.hsj-scrim { place-items: center; }
.hsj-modal {
background: var(--n-0); border-radius: 12px; width: min(520px, calc(100vw - 32px));
max-height: calc(100vh - 60px); display: flex; flex-direction: column;
box-shadow: 0 24px 70px rgba(15, 20, 32, .4); overflow: hidden;
}
.hsj-modal__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border-subtle); }
.hsj-modal__ic { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--p-500); color: #fff; flex-shrink: 0; }
.hsj-modal__title { font-size: 15px; font-weight: 700; color: var(--n-800); display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.hsj-modal__sub { font-size: 11.5px; font-weight: 500; color: var(--text-tertiary); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.hsj-modal__x { width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--n-400); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.hsj-modal__x:hover { background: var(--n-75); color: var(--n-600); }
.hsj-modal__body { padding: 16px 18px; font-size: 13px; color: var(--text-primary); line-height: 1.55; overflow: auto; }
.hsj-modal__body p { margin: 0 0 10px; }
.hsj-modal__note { font-size: 12px; color: var(--text-secondary); }
.hsj-modal__note--last { margin: 12px 0 0; font-size: 11.5px; color: var(--text-tertiary); }
.hsj-modal__body code { font-size: 11.5px; background: var(--n-75); border-radius: 4px; padding: 1px 5px; color: var(--n-700); }
.hsj-modal__foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--border-subtle); background: var(--n-25); }
.hsj-btn { min-width: 0; height: 42px; }
.hsj-btn--ghost { background: var(--n-0); color: var(--n-600); border: 1px solid var(--border-default); box-shadow: none; }
.hsj-btn--ghost:hover { background: var(--n-75); }
/* verdict lines: does this class actually observe the flag? */
.hsj-verdict {
display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0;
padding: 9px 11px; border-radius: 8px; font-size: 12.5px; line-height: 1.5; border: 1px solid transparent;
}
.hsj-verdict svg { flex-shrink: 0; margin-top: 2px; }
.hsj-verdict--ok { background: var(--ok-50); border-color: var(--ok-100); color: var(--ok-700); }
.hsj-verdict--warn { background: var(--warn-50); border-color: var(--warn-100); color: var(--warn-700); }
.hsj-verdict--muted { background: var(--n-50); border-color: var(--border-subtle); color: var(--text-secondary); }
/* ---- responsive (brief §11) --------------------------------------
The Hrs kit already flips the table to stacked cards, wraps the header
actions and centres the pager at <= 860px. These rules cover the
page-specific pieces: the wide JSON cells, the dense progress cell and
the modal going full-screen. */
@media (max-width: 1200px) {
.hsj .hsj-json { max-width: 200px; }
.hsj .hsj-cls { max-width: 240px; }
}
@media (max-width: 860px) {
.hsj .hsj-queueline { gap: 8px; font-size: 12px; }
.hsj .hsj-queueline__sep { display: none; }
.hsj .hsj-queueline > span:not(.hsj-queueline__sep) { flex: 0 0 auto; }
.hsj .hsj-absence { margin-top: 14px; padding: 12px 13px; }
.hsj .hsj-absence__l { padding-left: 17px; font-size: 12px; }
.hsj .hsj-detail__json { max-height: 200px; }
}
@media (max-width: 640px) {
.bp-modal-scrim.hsj-scrim { padding: 0; }
.hsj-modal { position: fixed; inset: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; }
.hsj-modal__foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.hsj-modal__foot .hsj-btn { flex: 1; }
.hsj .hsj-card__cls { font-size: 11.5px; word-break: break-all; text-align: right; }
.hsj .hsj-detail__json,
.hsj .hsj-card__more .hsj-detail__json { font-size: 11px; }
}
/* ---- HostSetWithdrawMethods ---- */
/* ===================================================================
Withdrawal methods (Settings ▾) — src/pages/HostSetWithdrawMethods.jsx
Global catalog `withdraw_methods` + read-only per-skin expander.
Append to styles/theme-iwakiri.css after the hrs-* block.
All colour comes from the Iwakiri red ramp (--p-*) + the semantic
tokens; no hardcoded brand hexes, never indigo.
=================================================================== */
/* ---- Name cell: title link + code / dependency meta row ---- */
.hsw-namecell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hsw-namebtn {
display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--p-700);
cursor: pointer; text-align: left; white-space: normal;
}
.hsw-namebtn:hover { color: var(--p-500); text-decoration: underline; text-underline-offset: 2px; }
.hsw-namebtn:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: 3px; }
.hsw-namebtn .icon { opacity: .55; }
.hsw-namemeta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* method_code chip — the join key every payment flow resolves */
.hsw-code {
display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 4px;
background: var(--n-75); border: 1px solid var(--border-subtle); color: var(--n-700);
font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .01em;
}
.hsw-code--voucher { background: var(--p-50); border-color: color-mix(in oklab, var(--p-500) 26%, transparent); color: var(--p-700); }
.hsw-code--dup { border-style: dashed; border-color: var(--warn-300); }
/* Dependency / defect badges next to the code */
.hsw-dep {
display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 7px; border-radius: 999px;
background: var(--p-50); color: var(--p-700); border: 1px solid color-mix(in oklab, var(--p-500) 22%, transparent);
font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
}
.hsw-dep--warn { background: var(--warn-50); color: var(--warn-700); border-color: var(--warn-100); }
.hsw-skins { font-size: 11px; color: var(--text-tertiary); font-weight: 500; }
.hsw-id { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.hsw-new {
display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border-radius: 3px;
background: var(--ok-500); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
}
/* ---- Row actions (trash + pencil, the two real ones) ---- */
.hsw-acts { display: inline-flex; gap: 6px; justify-content: center; }
.hsw-act {
display: grid; place-items: center; width: 28px; height: 28px; border-radius: 5px;
border: 1px solid var(--border-default); background: var(--n-0); color: #5a6172; cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
}
.hsw-act:hover { background: var(--n-50); }
.hsw-act--danger:hover { border-color: var(--err-300); background: var(--err-50); color: var(--err-700); }
.hsw-act--edit:hover { border-color: var(--p-300); background: var(--p-50); color: var(--p-700); }
.hsw-act:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* ---- Per-skin expander (read-only mirror of the Skins tab) ---- */
.hsw-detail { display: flex; flex-direction: column; gap: 10px; }
.hsw-detail__title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--n-800); }
.hsw-detail__title code,
.hsw-detail__sub code,
.hsw-detail__empty code,
.hsw-note code,
.hsw-danger code,
.hsw-killlist code,
.hsw-hint code,
.hsw-warnline code {
background: var(--n-75); border: 1px solid var(--border-subtle); border-radius: 3px;
padding: 0 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--n-700);
}
.hsw-detail__sub { font-size: 12px; color: var(--text-secondary); line-height: 1.6; max-width: 92ch; }
.hsw-detail__sub b { color: var(--n-800); }
.hsw-detail__empty {
font-size: 12.5px; color: var(--text-secondary); line-height: 1.6;
border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--n-0); padding: 12px 14px;
}
/* wide sub-table scrolls inside its own container (brief §11) */
.hsw-subwrap { overflow-x: auto; border: 1px solid var(--border-default); border-radius: 8px; background: var(--n-0); }
.hsw-sub { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.hsw-sub thead th {
background: var(--n-50); color: var(--text-tertiary); font-size: 10px; font-weight: 700;
letter-spacing: .05em; text-transform: uppercase; text-align: left; white-space: nowrap;
padding: 8px 12px; border-bottom: 1px solid var(--border-default);
}
.hsw-sub tbody td { padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; color: var(--text-primary); }
.hsw-sub tbody tr:last-child td { border-bottom: 0; }
.hsw-sub tbody tr:hover td { background: var(--n-25); }
.hsw-sub__skin { font-weight: 600; color: var(--n-800); }
.hsw-sub .hsw-r { text-align: right; }
.hsw-sub .hsw-c { text-align: center; }
.hsw-cur { font-size: 10.5px; color: var(--text-tertiary); font-weight: 500; }
.hsw-muted { color: var(--text-tertiary); }
/* the three columns the legacy skin-tab save silently wipes */
.hsw-sub .hsw-risk { background: color-mix(in oklab, var(--warn-500) 7%, transparent); }
.hsw-sub thead .hsw-risk { background: color-mix(in oklab, var(--warn-500) 14%, transparent); color: var(--warn-700); }
.hsw-sub tbody tr:hover td.hsw-risk { background: color-mix(in oklab, var(--warn-500) 12%, transparent); }
.hsw-flag {
display: inline-flex; align-items: center; height: 19px; padding: 0 8px; border-radius: 999px;
background: var(--n-75); color: var(--text-tertiary); font-size: 11px; font-weight: 700;
}
.hsw-flag--on { background: var(--ok-50); color: var(--ok-700); }
/* ---- Inline notes / callouts ---- */
.hsw-note {
display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-radius: 8px;
background: var(--n-25); border: 1px solid var(--border-default);
font-size: 12px; line-height: 1.6; color: var(--text-secondary);
}
.hsw-note .icon { flex: 0 0 auto; margin-top: 2px; opacity: .8; }
.hsw-note b { color: var(--n-800); }
.hsw-note--warn { background: var(--warn-50); border-color: var(--warn-100); color: var(--warn-700); }
.hsw-note--warn b, .hsw-note--warn code { color: var(--warn-700); }
.hsw-note--risk { background: var(--warn-50); border-color: var(--warn-100); color: var(--warn-700); }
.hsw-note--risk b { color: var(--warn-700); }
.hsw-note--voucher { background: var(--p-50); border-color: color-mix(in oklab, var(--p-500) 22%, transparent); color: var(--p-700); }
.hsw-note--voucher b, .hsw-note--voucher code { color: var(--p-700); }
.hsw-note--voucher i { font-style: italic; }
/* ---- Buttons ---- */
.hsw-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
height: 38px; padding: 0 16px; border: 1px solid transparent; border-radius: 5px;
font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
transition: background .12s, border-color .12s, color .12s;
}
.hsw-btn--primary { background: var(--p-500); color: #fff; box-shadow: 0 1px 2px rgba(15,20,32,.12); }
.hsw-btn--primary:hover { background: var(--p-600); }
.hsw-btn--ghost { background: var(--n-0); border-color: var(--border-default); color: #3f4254; }
.hsw-btn--ghost:hover { border-color: var(--border-strong); background: var(--n-25); }
.hsw-btn--danger { background: var(--err-500); color: #fff; }
.hsw-btn--danger:hover { background: var(--err-700); }
.hsw-btn--sm { height: 32px; padding: 0 12px; font-size: 12px; }
.hsw-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* ---- Modals (create / edit / delete) ---- */
.hsw-scrim { place-items: center center; }
.hsw-modal { width: min(620px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.hsw-modal--wide { width: min(920px, calc(100vw - 32px)); }
.hsw-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
padding: 15px 18px; border-bottom: 1px solid var(--border-default);
}
.hsw-modal__title { font-size: 17px; font-weight: 700; color: var(--text-primary); letter-spacing: -.01em; }
.hsw-modal__sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 3px; line-height: 1.5; }
.hsw-modal__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; max-height: min(70vh, 620px); overflow-y: auto; }
.hsw-modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border-default); background: var(--n-25); }
.hsw-x { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border: 0; border-radius: 6px; background: transparent; color: var(--text-tertiary); cursor: pointer; }
.hsw-x:hover { background: var(--n-50); color: var(--text-primary); }
/* ---- Form fields ---- */
.hsw-field { display: flex; flex-direction: column; gap: 6px; }
.hsw-label { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.hsw-req { color: var(--err-500); }
.hsw-opt { font-size: 10.5px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .05em; }
.hsw-input, .hsw-textarea {
width: 100%; font-family: inherit; font-size: 13px; color: var(--text-primary);
background: var(--n-0); border: 1px solid var(--border-default); border-radius: 5px; padding: 0 11px; height: 38px;
}
.hsw-textarea { height: auto; padding: 9px 11px; line-height: 1.55; resize: vertical; min-height: 88px; }
.hsw-input:focus, .hsw-textarea:focus { outline: none; border-color: var(--p-500); box-shadow: var(--ring-focus); }
.hsw-input--mono { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .01em; }
.hsw-input--err { border-color: var(--err-500); background: color-mix(in oklab, var(--err-500) 4%, var(--n-0)); }
.hsw-err { font-size: 11.5px; font-weight: 600; color: var(--err-700); }
.hsw-hint { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.55; }
.hsw-warnline {
display: flex; align-items: flex-start; gap: 7px; padding: 8px 10px; border-radius: 6px;
background: var(--warn-50); border: 1px solid var(--warn-100); color: var(--warn-700);
font-size: 11.5px; line-height: 1.55;
}
.hsw-warnline .icon { flex: 0 0 auto; margin-top: 1px; }
.hsw-warnline code { background: rgba(255,255,255,.6); border-color: var(--warn-100); color: var(--warn-700); }
.hsw-warnline--hard { background: var(--err-50); border-color: var(--err-100); color: var(--err-700); }
.hsw-warnline--hard code { border-color: var(--err-100); color: var(--err-700); }
.hsw-warnline i { font-style: italic; }
/* ---- Logo (KTImageInput stand-in) ---- */
.hsw-logo { display: flex; gap: 12px; align-items: flex-start; border: 1px dashed var(--border-strong); border-radius: 8px; padding: 12px; background: var(--n-25); }
.hsw-logo__thumb { display: grid; place-items: center; width: 54px; height: 54px; flex: 0 0 auto; border-radius: 6px; background: var(--n-0); border: 1px solid var(--border-default); color: var(--text-tertiary); }
.hsw-logo__body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.hsw-logo__name { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-primary); word-break: break-all; }
.hsw-logo__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.hsw-mini {
display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px;
border: 1px solid var(--border-default); border-radius: 5px; background: var(--n-0);
font-family: inherit; font-size: 11.5px; font-weight: 600; color: #3f4254; cursor: pointer;
}
.hsw-mini:hover { border-color: var(--p-300); color: var(--p-700); }
.hsw-mini--danger:hover { border-color: var(--err-300); color: var(--err-700); background: var(--err-50); }
/* ---- Delete dialog ---- */
.hsw-danger {
display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 8px;
background: var(--err-50); border: 1px solid var(--err-100); color: var(--err-700);
font-size: 12.5px; line-height: 1.6;
}
.hsw-danger .icon { flex: 0 0 auto; margin-top: 1px; }
.hsw-danger code { background: rgba(255,255,255,.65); border-color: var(--err-100); color: var(--err-700); }
.hsw-danger i { font-style: italic; }
.hsw-killlist { border: 1px solid var(--border-default); border-radius: 8px; padding: 12px 14px; background: var(--n-0); }
.hsw-killlist__t { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); margin-bottom: 6px; }
.hsw-killlist ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.7; }
.hsw-killlist b { color: var(--n-800); }
/* ---- Mobile card extras (rendered by HrsTable's renderCard) ---- */
.hsw-cardflag {
display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; padding: 3px 8px; border-radius: 999px;
background: var(--p-50); color: var(--p-700); border: 1px solid color-mix(in oklab, var(--p-500) 22%, transparent);
font-size: 11px; font-weight: 700;
}
.hsw-mdetails { margin-top: 10px; border-top: 1px solid var(--border-subtle); padding-top: 8px; }
.hsw-mdetails > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--p-700); list-style: none; display: flex; align-items: center; gap: 6px; }
.hsw-mdetails > summary::-webkit-details-marker { display: none; }
.hsw-mdetails > summary::before { content: "▸"; font-size: 10px; }
.hsw-mdetails[open] > summary::before { content: "▾"; }
.hsw-mdetails > *:not(summary) { margin-top: 10px; }
.hsw-mdesc { font-size: 12px; color: var(--text-secondary); line-height: 1.6; margin: 10px 0 0; }
.hsw-cardacts { display: flex; gap: 8px; margin-top: 12px; }
.hsw-cardacts .hsw-btn { flex: 1; }
/* ===================== Responsive (brief §11) ===================== */
@media (max-width: 1100px) {
/* the expander's 11-column table keeps its own scroll rather than
stretching the page */
.hsw-subwrap { max-width: 100%; }
.hsw-detail__sub { max-width: none; }
}
@media (max-width: 860px) {
/* Modals go full-screen instead of a fixed-width centred dialog */
.hsw-scrim { padding: 0; place-items: start center; }
.hsw-modal, .hsw-modal--wide { width: 100vw; min-height: 100dvh; border-radius: 0; display: flex; flex-direction: column; }
.hsw-modal__body { flex: 1; max-height: none; }
.hsw-modal__foot { position: sticky; bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.hsw-modal__foot .hsw-btn { flex: 1; }
/* Row action buttons get a comfortable tap target */
.hsw-act { width: 34px; height: 34px; }
/* Sub-table headers shrink but stay legible; the wrapper scrolls */
.hsw-sub thead th, .hsw-sub tbody td { padding: 7px 10px; }
.hsw-subwrap { -webkit-overflow-scrolling: touch; }
.hsw-note, .hsw-danger { font-size: 11.5px; }
}
@media (max-width: 520px) {
.hsw-namemeta { gap: 5px; }
.hsw-logo { flex-direction: column; }
.hsw-logo__thumb { width: 100%; height: 64px; }
.hsw-cardacts { flex-direction: column; }
.hsw-modal__title { font-size: 15.5px; }
}
/* ---- Name cell: title link + code / dependency meta row ---- */
.hsw-namecell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hsw-namebtn {
display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--p-700);
cursor: pointer; text-align: left; white-space: normal;
}
.hsw-namebtn:hover { color: var(--p-500); text-decoration: underline; text-underline-offset: 2px; }
.hsw-namebtn:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: 3px; }
.hsw-namebtn .icon { opacity: .55; }
.hsw-namemeta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* method_code chip — the join key every payment flow resolves */
.hsw-code {
display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 4px;
background: var(--n-75); border: 1px solid var(--border-subtle); color: var(--n-700);
font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .01em;
}
.hsw-code--voucher { background: var(--p-50); border-color: color-mix(in oklab, var(--p-500) 26%, transparent); color: var(--p-700); }
.hsw-code--dup { border-style: dashed; border-color: var(--warn-300); }
/* Dependency / defect badges next to the code */
.hsw-dep {
display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 7px; border-radius: 999px;
background: var(--p-50); color: var(--p-700); border: 1px solid color-mix(in oklab, var(--p-500) 22%, transparent);
font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
}
.hsw-dep--warn { background: var(--warn-50); color: var(--warn-700); border-color: var(--warn-100); }
.hsw-skins { font-size: 11px; color: var(--text-tertiary); font-weight: 500; }
.hsw-id { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.hsw-new {
display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border-radius: 3px;
background: var(--ok-500); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
}
/* ---- Row actions (trash + pencil, the two real ones) ---- */
.hsw-acts { display: inline-flex; gap: 6px; justify-content: center; }
.hsw-act {
display: grid; place-items: center; width: 28px; height: 28px; border-radius: 5px;
border: 1px solid var(--border-default); background: var(--n-0); color: #5a6172; cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
}
.hsw-act:hover { background: var(--n-50); }
.hsw-act--danger:hover { border-color: var(--err-300); background: var(--err-50); color: var(--err-700); }
.hsw-act--edit:hover { border-color: var(--p-300); background: var(--p-50); color: var(--p-700); }
.hsw-act:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* ---- Per-skin expander (read-only mirror of the Skins tab) ---- */
.hsw-detail { display: flex; flex-direction: column; gap: 10px; }
.hsw-detail__title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--n-800); }
.hsw-detail__title code,
.hsw-detail__sub code,
.hsw-detail__empty code,
.hsw-note code,
.hsw-danger code,
.hsw-killlist code,
.hsw-hint code,
.hsw-warnline code {
background: var(--n-75); border: 1px solid var(--border-subtle); border-radius: 3px;
padding: 0 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--n-700);
}
.hsw-detail__sub { font-size: 12px; color: var(--text-secondary); line-height: 1.6; max-width: 92ch; }
.hsw-detail__sub b { color: var(--n-800); }
.hsw-detail__empty {
font-size: 12.5px; color: var(--text-secondary); line-height: 1.6;
border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--n-0); padding: 12px 14px;
}
/* wide sub-table scrolls inside its own container (brief §11) */
.hsw-subwrap { overflow-x: auto; border: 1px solid var(--border-default); border-radius: 8px; background: var(--n-0); }
.hsw-sub { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.hsw-sub thead th {
background: var(--n-50); color: var(--text-tertiary); font-size: 10px; font-weight: 700;
letter-spacing: .05em; text-transform: uppercase; text-align: left; white-space: nowrap;
padding: 8px 12px; border-bottom: 1px solid var(--border-default);
}
.hsw-sub tbody td { padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; color: var(--text-primary); }
.hsw-sub tbody tr:last-child td { border-bottom: 0; }
.hsw-sub tbody tr:hover td { background: var(--n-25); }
.hsw-sub__skin { font-weight: 600; color: var(--n-800); }
.hsw-sub .hsw-r { text-align: right; }
.hsw-sub .hsw-c { text-align: center; }
.hsw-cur { font-size: 10.5px; color: var(--text-tertiary); font-weight: 500; }
.hsw-muted { color: var(--text-tertiary); }
/* the three columns the legacy skin-tab save silently wipes */
.hsw-sub .hsw-risk { background: color-mix(in oklab, var(--warn-500) 7%, transparent); }
.hsw-sub thead .hsw-risk { background: color-mix(in oklab, var(--warn-500) 14%, transparent); color: var(--warn-700); }
.hsw-sub tbody tr:hover td.hsw-risk { background: color-mix(in oklab, var(--warn-500) 12%, transparent); }
.hsw-flag {
display: inline-flex; align-items: center; height: 19px; padding: 0 8px; border-radius: 999px;
background: var(--n-75); color: var(--text-tertiary); font-size: 11px; font-weight: 700;
}
.hsw-flag--on { background: var(--ok-50); color: var(--ok-700); }
/* ---- Inline notes / callouts ---- */
.hsw-note {
display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-radius: 8px;
background: var(--n-25); border: 1px solid var(--border-default);
font-size: 12px; line-height: 1.6; color: var(--text-secondary);
}
.hsw-note .icon { flex: 0 0 auto; margin-top: 2px; opacity: .8; }
.hsw-note b { color: var(--n-800); }
.hsw-note--warn { background: var(--warn-50); border-color: var(--warn-100); color: var(--warn-700); }
.hsw-note--warn b, .hsw-note--warn code { color: var(--warn-700); }
.hsw-note--risk { background: var(--warn-50); border-color: var(--warn-100); color: var(--warn-700); }
.hsw-note--risk b { color: var(--warn-700); }
.hsw-note--voucher { background: var(--p-50); border-color: color-mix(in oklab, var(--p-500) 22%, transparent); color: var(--p-700); }
.hsw-note--voucher b, .hsw-note--voucher code { color: var(--p-700); }
.hsw-note--voucher i { font-style: italic; }
/* ---- Buttons ---- */
.hsw-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
height: 38px; padding: 0 16px; border: 1px solid transparent; border-radius: 5px;
font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
transition: background .12s, border-color .12s, color .12s;
}
.hsw-btn--primary { background: var(--p-500); color: #fff; box-shadow: 0 1px 2px rgba(15,20,32,.12); }
.hsw-btn--primary:hover { background: var(--p-600); }
.hsw-btn--ghost { background: var(--n-0); border-color: var(--border-default); color: #3f4254; }
.hsw-btn--ghost:hover { border-color: var(--border-strong); background: var(--n-25); }
.hsw-btn--danger { background: var(--err-500); color: #fff; }
.hsw-btn--danger:hover { background: var(--err-700); }
.hsw-btn--sm { height: 32px; padding: 0 12px; font-size: 12px; }
.hsw-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* ---- Modals (create / edit / delete) ---- */
.hsw-scrim { place-items: center center; }
.hsw-modal { width: min(620px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.hsw-modal--wide { width: min(920px, calc(100vw - 32px)); }
.hsw-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
padding: 15px 18px; border-bottom: 1px solid var(--border-default);
}
.hsw-modal__title { font-size: 17px; font-weight: 700; color: var(--text-primary); letter-spacing: -.01em; }
.hsw-modal__sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 3px; line-height: 1.5; }
.hsw-modal__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; max-height: min(70vh, 620px); overflow-y: auto; }
.hsw-modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border-default); background: var(--n-25); }
.hsw-x { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border: 0; border-radius: 6px; background: transparent; color: var(--text-tertiary); cursor: pointer; }
.hsw-x:hover { background: var(--n-50); color: var(--text-primary); }
/* ---- Form fields ---- */
.hsw-field { display: flex; flex-direction: column; gap: 6px; }
.hsw-label { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.hsw-req { color: var(--err-500); }
.hsw-opt { font-size: 10.5px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .05em; }
.hsw-input, .hsw-textarea {
width: 100%; font-family: inherit; font-size: 13px; color: var(--text-primary);
background: var(--n-0); border: 1px solid var(--border-default); border-radius: 5px; padding: 0 11px; height: 38px;
}
.hsw-textarea { height: auto; padding: 9px 11px; line-height: 1.55; resize: vertical; min-height: 88px; }
.hsw-input:focus, .hsw-textarea:focus { outline: none; border-color: var(--p-500); box-shadow: var(--ring-focus); }
.hsw-input--mono { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .01em; }
.hsw-input--err { border-color: var(--err-500); background: color-mix(in oklab, var(--err-500) 4%, var(--n-0)); }
.hsw-err { font-size: 11.5px; font-weight: 600; color: var(--err-700); }
.hsw-hint { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.55; }
.hsw-warnline {
display: flex; align-items: flex-start; gap: 7px; padding: 8px 10px; border-radius: 6px;
background: var(--warn-50); border: 1px solid var(--warn-100); color: var(--warn-700);
font-size: 11.5px; line-height: 1.55;
}
.hsw-warnline .icon { flex: 0 0 auto; margin-top: 1px; }
.hsw-warnline code { background: rgba(255,255,255,.6); border-color: var(--warn-100); color: var(--warn-700); }
.hsw-warnline--hard { background: var(--err-50); border-color: var(--err-100); color: var(--err-700); }
.hsw-warnline--hard code { border-color: var(--err-100); color: var(--err-700); }
.hsw-warnline i { font-style: italic; }
/* ---- Logo (KTImageInput stand-in) ---- */
.hsw-logo { display: flex; gap: 12px; align-items: flex-start; border: 1px dashed var(--border-strong); border-radius: 8px; padding: 12px; background: var(--n-25); }
.hsw-logo__thumb { display: grid; place-items: center; width: 54px; height: 54px; flex: 0 0 auto; border-radius: 6px; background: var(--n-0); border: 1px solid var(--border-default); color: var(--text-tertiary); }
.hsw-logo__body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.hsw-logo__name { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-primary); word-break: break-all; }
.hsw-logo__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.hsw-mini {
display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px;
border: 1px solid var(--border-default); border-radius: 5px; background: var(--n-0);
font-family: inherit; font-size: 11.5px; font-weight: 600; color: #3f4254; cursor: pointer;
}
.hsw-mini:hover { border-color: var(--p-300); color: var(--p-700); }
.hsw-mini--danger:hover { border-color: var(--err-300); color: var(--err-700); background: var(--err-50); }
/* ---- Delete dialog ---- */
.hsw-danger {
display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 8px;
background: var(--err-50); border: 1px solid var(--err-100); color: var(--err-700);
font-size: 12.5px; line-height: 1.6;
}
.hsw-danger .icon { flex: 0 0 auto; margin-top: 1px; }
.hsw-danger code { background: rgba(255,255,255,.65); border-color: var(--err-100); color: var(--err-700); }
.hsw-danger i { font-style: italic; }
.hsw-killlist { border: 1px solid var(--border-default); border-radius: 8px; padding: 12px 14px; background: var(--n-0); }
.hsw-killlist__t { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); margin-bottom: 6px; }
.hsw-killlist ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.7; }
.hsw-killlist b { color: var(--n-800); }
/* ---- Mobile card extras (rendered by HrsTable's renderCard) ---- */
.hsw-cardflag {
display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; padding: 3px 8px; border-radius: 999px;
background: var(--p-50); color: var(--p-700); border: 1px solid color-mix(in oklab, var(--p-500) 22%, transparent);
font-size: 11px; font-weight: 700;
}
.hsw-mdetails { margin-top: 10px; border-top: 1px solid var(--border-subtle); padding-top: 8px; }
.hsw-mdetails > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--p-700); list-style: none; display: flex; align-items: center; gap: 6px; }
.hsw-mdetails > summary::-webkit-details-marker { display: none; }
.hsw-mdetails > summary::before { content: "▸"; font-size: 10px; }
.hsw-mdetails[open] > summary::before { content: "▾"; }
.hsw-mdetails > *:not(summary) { margin-top: 10px; }
.hsw-mdesc { font-size: 12px; color: var(--text-secondary); line-height: 1.6; margin: 10px 0 0; }
.hsw-cardacts { display: flex; gap: 8px; margin-top: 12px; }
.hsw-cardacts .hsw-btn { flex: 1; }
/* ===================== Responsive (brief §11) ===================== */
@media (max-width: 1100px) {
/* the expander's 11-column table keeps its own scroll rather than
stretching the page */
.hsw-subwrap { max-width: 100%; }
.hsw-detail__sub { max-width: none; }
}
@media (max-width: 860px) {
/* Modals go full-screen instead of a fixed-width centred dialog */
.hsw-scrim { padding: 0; place-items: start center; }
.hsw-modal, .hsw-modal--wide { width: 100vw; min-height: 100dvh; border-radius: 0; display: flex; flex-direction: column; }
.hsw-modal__body { flex: 1; max-height: none; }
.hsw-modal__foot { position: sticky; bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.hsw-modal__foot .hsw-btn { flex: 1; }
/* Row action buttons get a comfortable tap target */
.hsw-act { width: 34px; height: 34px; }
/* Sub-table headers shrink but stay legible; the wrapper scrolls */
.hsw-sub thead th, .hsw-sub tbody td { padding: 7px 10px; }
.hsw-subwrap { -webkit-overflow-scrolling: touch; }
.hsw-note, .hsw-danger { font-size: 11.5px; }
}
@media (max-width: 520px) {
.hsw-namemeta { gap: 5px; }
.hsw-logo { flex-direction: column; }
.hsw-logo__thumb { width: 100%; height: 64px; }
.hsw-cardacts { flex-direction: column; }
.hsw-modal__title { font-size: 15.5px; }
}
/* ---- Fix: unscoped filter-hero card hiding (tweaks-extras.css:483-486) ----
That rule hides .filter-hero__card:nth-child(4) and (5) below 1280px for
EVERY page using the hero-filter vocabulary. On PayBO's Transactions it is
an intentional density trim, but Host screens that reuse the same element
classes lose two real, spec-mandated filters with no affordance to reach
them. Re-show them inside Host filter strips only; the PayBO rule is left
untouched (tweaks-extras.css is not ours to edit, and protected screens
depend on it). Host strips collapse to the §11 Filters sheet at <=860px,
so nothing is crowded in the 860-1280px band.
*/
@media (max-width: 1280px) {
.host-users .hu-hero .filter-hero__card:nth-child(4),
.host-users .hu-hero .filter-hero__card:nth-child(5),
.host-players .hpx-hero .filter-hero__card:nth-child(4),
.host-players .hpx-hero .filter-hero__card:nth-child(5),
.hv-hero .filter-hero__card:nth-child(4),
.hv-hero .filter-hero__card:nth-child(5) { display: flex; }
}
/* ---- HostSetVendorsGroups ---- */
/* ===================================================================
Settings ▾ → Vendors Groups (src/pages/HostSetVendorsGroups.jsx)
Page chrome comes from the hrs-* report shell; these are the
screen-local bits: the ID/name cells + row actions, the create/edit
modal, and the dual-list provider picker (loumultiselect stand-in).
Iwakiri red ramp only (--p-*), neutral/semantic tokens shared.
=================================================================== */
/* ---- table cells ---- */
.hvg-id {
font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hvg-namelink {
display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; min-width: 0; padding: 3px 6px 3px 0; border: 0; background: none;
font-family: inherit; font-size: 13px; font-weight: 600; color: var(--p-700);
text-align: left; cursor: pointer; border-radius: 6px;
}
.hvg-namelink span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hvg-namelink:hover { color: var(--p-500); background: var(--p-50); padding-left: 6px; }
.hvg-namelink:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hvg-acts { display: inline-flex; gap: 6px; justify-content: center; }
.hvg-act {
display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px;
border: 1px solid var(--border-default); background: var(--n-0); color: var(--text-tertiary);
cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.hvg-act:hover { background: var(--n-50); color: var(--text-primary); }
.hvg-act--edit:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hvg-act--danger:hover { background: var(--err-50); border-color: var(--err-100); color: var(--err-700); }
.hvg-act:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* mobile stacked-card actions (brief §11) */
.hvg-card__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hvg-card__del { color: var(--err-700); }
/* ---- modal (shared .bp-modal chrome, resized + sectioned) ---- */
.hvg-modal { width: min(560px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.hvg-modal--wide { width: min(920px, calc(100vw - 32px)); }
.hvg-modal__head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 14px 18px; border-bottom: 1px solid var(--border-default);
}
.hvg-modal__title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.hvg-modal__body {
padding: 16px 18px; display: flex; flex-direction: column; gap: 14px;
max-height: calc(100vh - 220px); overflow-y: auto;
}
.hvg-modal__foot {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 18px; border-top: 1px solid var(--border-default); background: var(--n-25);
}
.hvg-x {
display: inline-grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
border: 0; border-radius: 7px; background: none; color: var(--text-tertiary); cursor: pointer;
}
.hvg-x:hover { background: var(--n-50); color: var(--text-primary); }
/* ---- form ---- */
.hvg-sectitle {
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
color: var(--p-700); padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle);
}
.hvg-field { display: flex; flex-direction: column; gap: 7px; }
.hvg-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.hvg-req { color: var(--err-500); }
.hvg-hint { font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary); }
.hvg-hint b { color: var(--text-secondary); }
.hvg-hint code { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-secondary); }
.hvg-fielderr { font-size: 11.5px; font-weight: 600; color: var(--err-700); }
.hvg-invalid, .hvg-invalid:focus {
border-color: var(--err-500) !important;
box-shadow: 0 0 0 3px rgba(246, 78, 96, .14) !important;
}
.hvg-err {
display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; font-weight: 600;
color: var(--err-700); background: var(--err-50); border: 1px solid var(--err-100);
border-radius: 7px; padding: 9px 11px; line-height: 1.5;
}
.hvg-err code { font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.hvg-err--banner { font-weight: 700; }
.hvg-dlgq { font-size: 14px; color: var(--text-primary); }
.hvg-dlgq b { font-weight: 700; }
/* ---- dual-list provider picker ---- */
.hvg-dual {
display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch;
border: 1px solid var(--border-default); border-radius: 10px; padding: 12px; background: var(--n-25);
}
.hvg-dual--err { border-color: var(--err-300); background: var(--err-50); }
.hvg-pane { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hvg-pane__head {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--text-tertiary);
}
.hvg-count {
min-width: 22px; text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: 0;
color: var(--p-700); background: var(--p-50); border-radius: 999px; padding: 1px 7px;
}
.hvg-pane__search { width: 100%; height: 34px; font-size: 12.5px; }
.hvg-pane__list {
display: flex; flex-direction: column; gap: 3px; height: 232px; overflow-y: auto;
border: 1px solid var(--border-default); border-radius: 8px; background: var(--n-0); padding: 5px;
}
.hvg-pane__empty { padding: 14px 8px; text-align: center; font-size: 12px; color: var(--text-tertiary); }
.hvg-opt {
display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
padding: 7px 9px; border: 1px solid transparent; border-radius: 6px; background: none;
font-family: inherit; font-size: 12.5px; color: var(--text-secondary); text-align: left; cursor: pointer;
}
.hvg-opt:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hvg-opt__n { display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hvg-opt--sel { background: var(--n-25); border-color: var(--border-subtle); color: var(--text-primary); font-weight: 500; }
.hvg-opt--sel:hover { background: var(--err-50); border-color: var(--err-100); color: var(--err-700); }
.hvg-opt:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hvg-basechip {
font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--p-700); background: var(--p-50); border: 1px solid var(--p-100);
border-radius: 999px; padding: 1px 6px; flex-shrink: 0;
}
.hvg-bulk {
align-self: flex-start; border: 0; background: none; padding: 0; font-family: inherit;
font-size: 11.5px; font-weight: 600; color: var(--p-600); cursor: pointer; text-decoration: underline;
text-underline-offset: 2px;
}
.hvg-bulk:disabled { color: var(--text-tertiary); cursor: default; text-decoration: none; opacity: .7; }
.hvg-swap { display: grid; place-items: center; color: var(--text-tertiary); padding-top: 26px; }
/* ---- responsive (brief §11) ---- */
@media (max-width: 860px) {
/* forms/modals go full-screen instead of a fixed-width centred dialog */
.hvg-scrim { padding: 0; }
.hvg-modal, .hvg-modal--wide {
width: 100vw; height: 100dvh; max-height: none; border-radius: 0;
display: flex; flex-direction: column;
}
.hvg-modal__body { max-height: none; flex: 1; }
.hvg-modal__foot { position: sticky; bottom: 0; }
.hvg-modal__foot .btn { flex: 1; justify-content: center; }
/* dual list stacks; the swap arrow becomes a horizontal divider */
.hvg-dual { grid-template-columns: 1fr; gap: 10px; }
.hvg-swap { padding: 0; transform: rotate(90deg); }
.hvg-pane__list { height: 180px; }
.hvg-card__acts .btn { flex: 1; justify-content: center; }
}
@media (max-width: 520px) {
.hvg-modal__head { padding: 12px 14px; }
.hvg-modal__body { padding: 14px; }
.hvg-modal__foot { padding: 10px 14px; }
.hvg-modal__title { font-size: 15px; }
}
/* ---- table cells ---- */
.hvg-id {
font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hvg-namelink {
display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; min-width: 0; padding: 3px 6px 3px 0; border: 0; background: none;
font-family: inherit; font-size: 13px; font-weight: 600; color: var(--p-700);
text-align: left; cursor: pointer; border-radius: 6px;
}
.hvg-namelink span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hvg-namelink:hover { color: var(--p-500); background: var(--p-50); padding-left: 6px; }
.hvg-namelink:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hvg-acts { display: inline-flex; gap: 6px; justify-content: center; }
.hvg-act {
display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px;
border: 1px solid var(--border-default); background: var(--n-0); color: var(--text-tertiary);
cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.hvg-act:hover { background: var(--n-50); color: var(--text-primary); }
.hvg-act--edit:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hvg-act--danger:hover { background: var(--err-50); border-color: var(--err-100); color: var(--err-700); }
.hvg-act:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* mobile stacked-card actions (brief §11) */
.hvg-card__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hvg-card__del { color: var(--err-700); }
/* ---- modal (shared .bp-modal chrome, resized + sectioned) ---- */
.hvg-modal { width: min(560px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.hvg-modal--wide { width: min(920px, calc(100vw - 32px)); }
.hvg-modal__head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 14px 18px; border-bottom: 1px solid var(--border-default);
}
.hvg-modal__title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.hvg-modal__body {
padding: 16px 18px; display: flex; flex-direction: column; gap: 14px;
max-height: calc(100vh - 220px); overflow-y: auto;
}
.hvg-modal__foot {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 18px; border-top: 1px solid var(--border-default); background: var(--n-25);
}
.hvg-x {
display: inline-grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
border: 0; border-radius: 7px; background: none; color: var(--text-tertiary); cursor: pointer;
}
.hvg-x:hover { background: var(--n-50); color: var(--text-primary); }
/* ---- form ---- */
.hvg-sectitle {
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
color: var(--p-700); padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle);
}
.hvg-field { display: flex; flex-direction: column; gap: 7px; }
.hvg-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.hvg-req { color: var(--err-500); }
.hvg-hint { font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary); }
.hvg-hint b { color: var(--text-secondary); }
.hvg-hint code { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-secondary); }
.hvg-fielderr { font-size: 11.5px; font-weight: 600; color: var(--err-700); }
.hvg-invalid, .hvg-invalid:focus {
border-color: var(--err-500) !important;
box-shadow: 0 0 0 3px rgba(246, 78, 96, .14) !important;
}
.hvg-err {
display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; font-weight: 600;
color: var(--err-700); background: var(--err-50); border: 1px solid var(--err-100);
border-radius: 7px; padding: 9px 11px; line-height: 1.5;
}
.hvg-err code { font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.hvg-err--banner { font-weight: 700; }
.hvg-dlgq { font-size: 14px; color: var(--text-primary); }
.hvg-dlgq b { font-weight: 700; }
/* ---- dual-list provider picker ---- */
.hvg-dual {
display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch;
border: 1px solid var(--border-default); border-radius: 10px; padding: 12px; background: var(--n-25);
}
.hvg-dual--err { border-color: var(--err-300); background: var(--err-50); }
.hvg-pane { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hvg-pane__head {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--text-tertiary);
}
.hvg-count {
min-width: 22px; text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: 0;
color: var(--p-700); background: var(--p-50); border-radius: 999px; padding: 1px 7px;
}
.hvg-pane__search { width: 100%; height: 34px; font-size: 12.5px; }
.hvg-pane__list {
display: flex; flex-direction: column; gap: 3px; height: 232px; overflow-y: auto;
border: 1px solid var(--border-default); border-radius: 8px; background: var(--n-0); padding: 5px;
}
.hvg-pane__empty { padding: 14px 8px; text-align: center; font-size: 12px; color: var(--text-tertiary); }
.hvg-opt {
display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
padding: 7px 9px; border: 1px solid transparent; border-radius: 6px; background: none;
font-family: inherit; font-size: 12.5px; color: var(--text-secondary); text-align: left; cursor: pointer;
}
.hvg-opt:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hvg-opt__n { display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hvg-opt--sel { background: var(--n-25); border-color: var(--border-subtle); color: var(--text-primary); font-weight: 500; }
.hvg-opt--sel:hover { background: var(--err-50); border-color: var(--err-100); color: var(--err-700); }
.hvg-opt:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hvg-basechip {
font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--p-700); background: var(--p-50); border: 1px solid var(--p-100);
border-radius: 999px; padding: 1px 6px; flex-shrink: 0;
}
.hvg-bulk {
align-self: flex-start; border: 0; background: none; padding: 0; font-family: inherit;
font-size: 11.5px; font-weight: 600; color: var(--p-600); cursor: pointer; text-decoration: underline;
text-underline-offset: 2px;
}
.hvg-bulk:disabled { color: var(--text-tertiary); cursor: default; text-decoration: none; opacity: .7; }
.hvg-swap { display: grid; place-items: center; color: var(--text-tertiary); padding-top: 26px; }
/* ---- responsive (brief §11) ---- */
@media (max-width: 860px) {
/* forms/modals go full-screen instead of a fixed-width centred dialog */
.hvg-scrim { padding: 0; }
.hvg-modal, .hvg-modal--wide {
width: 100vw; height: 100dvh; max-height: none; border-radius: 0;
display: flex; flex-direction: column;
}
.hvg-modal__body { max-height: none; flex: 1; }
.hvg-modal__foot { position: sticky; bottom: 0; }
.hvg-modal__foot .btn { flex: 1; justify-content: center; }
/* dual list stacks; the swap arrow becomes a horizontal divider */
.hvg-dual { grid-template-columns: 1fr; gap: 10px; }
.hvg-swap { padding: 0; transform: rotate(90deg); }
.hvg-pane__list { height: 180px; }
.hvg-card__acts .btn { flex: 1; justify-content: center; }
}
@media (max-width: 520px) {
.hvg-modal__head { padding: 12px 14px; }
.hvg-modal__body { padding: 14px; }
.hvg-modal__foot { padding: 10px 14px; }
.hvg-modal__title { font-size: 15px; }
}
/* ---- HostSetSupportUsers ---- */
/* ===================================================================
SUPPORT USERS (OPERATORS) — src/pages/HostSetSupportUsers.jsx
GET /supportusers/ · UsersController. Prefix: hsu2-
Page chrome comes from the Hrs* shell (report-shell.jsx) on the list
and from the shared hp-* editor classes on the detail; everything
below is what those two do not cover — the permission tree, the
create/confirm modals, the form grid and the columns popover.
Token-based: --p-* resolves to the Iwakiri red ramp under
html[data-theme="iwakiri"]. No hardcoded brand hexes.
=================================================================== */
/* ---- shared small pieces ---- */
.hsu2-key {
background: var(--n-75); border: 1px solid var(--border-subtle); border-radius: 4px;
padding: 0 5px; font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 10.5px; color: var(--n-700); white-space: nowrap;
}
.hsu2-rolechip {
display: inline-flex; align-items: center; gap: 5px; border-radius: 999px;
padding: 2px 4px 2px 9px; color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap;
}
.hsu2-rolechip i {
font-style: normal; font-size: 9.5px; font-weight: 800; line-height: 1;
background: rgba(255, 255, 255, .22); border-radius: 999px; padding: 2px 5px;
}
.hsu2-inf {
font-style: normal; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: var(--warn-700); background: var(--warn-50);
border-radius: 3px; padding: 1px 4px; margin-left: 6px; white-space: nowrap;
}
.hsu2-note { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.55; }
.hsu2-note code, .hsu2-modaltext code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px; }
.hsu2-modaltext { margin: 0 0 12px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.hsu2-fbtn { min-width: 0; height: 38px; }
.hsu2-fbtn--danger { border-color: var(--err-300); color: var(--err-500); }
.hsu2-fbtn--danger:hover { background: var(--err-50); }
.hsu2-newbtn { min-width: 0; height: 38px; position: relative; }
.hsu2-badbadge {
margin-left: 7px; background: rgba(255, 255, 255, .22); border-radius: 4px;
padding: 1px 5px; font-size: 9.5px; font-weight: 800; letter-spacing: .03em;
}
/* ---- callouts ---- */
.hsu2-callout {
display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start;
border-radius: 8px; padding: 10px 12px; margin: 0 0 14px;
font-size: 12.5px; line-height: 1.6;
}
.hsu2-callout b { font-weight: 700; }
.hsu2-callout code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11.5px; }
.hsu2-callout--warn { background: var(--warn-50); color: #7a5200; border: 1px solid var(--warn-100); }
.hsu2-callout--err { background: var(--err-50); color: var(--err-700); border: 1px solid var(--err-100); }
.hsu2-callout--ok { background: var(--ok-50); color: var(--ok-700); border: 1px solid var(--ok-100); }
/* ---- list: columns popover in the filter strip ---- */
.hsu2-colcard { position: relative; }
.hsu2-colbtn { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; text-align: left; }
.hsu2-colscrim { position: fixed; inset: 0; z-index: 60; }
.hsu2-colpop {
position: absolute; z-index: 61; top: calc(100% + 6px); left: 0; min-width: 250px;
background: var(--n-0); border: 1px solid var(--border-default); border-radius: 8px;
box-shadow: 0 18px 40px -12px rgba(15, 20, 32, .3); padding: 8px;
}
.hsu2-colpop__head, .hsu2-colpop__foot {
font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--text-tertiary); padding: 4px 6px;
}
.hsu2-colpop__foot { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11px; border-top: 1px solid var(--border-subtle); margin-top: 5px; padding-top: 8px; }
.hsu2-colpop label { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 6px; font-size: 12.5px; cursor: pointer; }
.hsu2-colpop label:hover { background: var(--n-25); }
.hsu2-sortnote {
display: flex; align-items: flex-start; gap: 7px; margin: 0 0 10px;
font-size: 12px; color: var(--text-tertiary); line-height: 1.55;
}
.hsu2-sortnote code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px; }
/* ---- list: username / skin cells ---- */
.hsu2-unamecell { display: inline-flex; align-items: center; gap: 4px; }
.hsu2-imp {
width: 22px; height: 22px; border: 1px solid var(--border-default); border-radius: 5px;
background: var(--n-0); color: var(--text-tertiary); display: grid; place-items: center;
cursor: pointer; flex-shrink: 0;
}
.hsu2-imp:hover { border-color: var(--p-300); color: var(--p-600); background: var(--p-50); }
.hsu2-skincell { display: inline-flex; align-items: center; gap: 5px; }
.hsu2-skincell i {
font-style: normal; font-size: 10px; font-weight: 700; color: var(--p-700);
background: var(--p-50); border: 1px solid var(--p-100); border-radius: 999px; padding: 1px 6px; cursor: help;
}
/* mobile row cards (rendered by HrsTable's renderCard) */
.hsu2-cardmore { margin-top: 8px; }
.hsu2-cardmore summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--p-700); }
.hsu2-cardacts { display: flex; gap: 8px; margin-top: 10px; }
.hsu2-cardacts .hsu2-fbtn { flex: 1; height: 34px; }
/* ---- detail chrome ---- */
.hsu2 .page__title.hsu2-ptitle { color: var(--p-700); margin-bottom: 2px; }
.hsu2-idline {
display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
font-size: 15px; font-weight: 600; color: #3f4254;
}
.hsu2-idline__id { color: var(--text-tertiary); font-weight: 500; font-size: 13px; }
.hsu2-tabs { flex-wrap: wrap; }
.hsu2-tab--dead { opacity: .55; }
.hsu2-tab__dead {
margin-left: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .03em;
background: var(--err-50); color: var(--err-700); border-radius: 3px; padding: 1px 4px;
}
.hsu2-tabnote {
display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start;
margin: 10px 0 16px; padding: 9px 12px; border-radius: 8px;
background: var(--n-25); border: 1px solid var(--border-subtle);
font-size: 12px; color: var(--text-secondary); line-height: 1.6;
}
.hsu2-tabnote code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px; }
/* ---- detail: Home layout ---- */
.hsu2-home { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.hsu2-home__main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hsu2-home__side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 12px; }
/* ---- form grid ---- */
.hsu2-formsec {
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-subtle);
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--n-700);
}
.hsu2-formsec:first-child { margin-top: 0; }
.hsu2-formsec__opt { font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-tertiary); }
.hsu2-form2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.hsu2-form3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.hsu2-span2 { grid-column: span 2; }
.hsu2-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hsu2-field .input, .hsu2-field .select { width: 100%; }
.hsu2-field__err { font-size: 11.5px; font-weight: 600; color: var(--err-500); }
.hsu2-field__note { font-size: 11px; color: var(--text-tertiary); line-height: 1.5; }
.hsu2-field--err .input, .hsu2-field--err .select { border-color: var(--err-300); }
.hsu2-inline { display: flex; gap: 6px; min-width: 0; }
.hsu2-inline > .input, .hsu2-inline > .select { min-width: 0; }
.hsu2-prefix { width: 88px; flex: 0 0 88px; }
.hsu2-housenr { width: 108px; flex: 0 0 108px; }
.hsu2-calc { height: 36px; flex: 0 0 auto; }
.hsu2-credrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 11.5px; color: var(--text-tertiary); }
/* ---- skin picker ---- */
.hsu2-skins { border: 1px solid var(--border-default); border-radius: 8px; background: var(--n-0); overflow: hidden; }
.hsu2-skins__q { border: 0; border-bottom: 1px solid var(--border-subtle); border-radius: 0; width: 100%; }
.hsu2-skins__list { max-height: 168px; overflow-y: auto; padding: 5px; display: flex; flex-direction: column; gap: 1px; }
.hsu2-skins__opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; cursor: pointer; }
.hsu2-skins__opt:hover { background: var(--n-25); }
.hsu2-skins__opt.is-on { background: var(--p-50); color: var(--p-700); font-weight: 600; }
.hsu2-skins__none { padding: 10px; font-size: 12px; color: var(--text-tertiary); }
.hsu2-skins__foot { padding: 7px 10px; border-top: 1px solid var(--border-subtle); background: var(--n-25); font-size: 11px; color: var(--text-tertiary); }
/* ===================================================================
PERMISSION TREE
=================================================================== */
.hsu2-perm { display: flex; flex-direction: column; gap: 14px; }
.hsu2-permbar {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 8px;
background: var(--n-0); box-shadow: var(--shadow-xs);
position: sticky; top: 0; z-index: 12;
}
.hsu2-permbar__search { position: relative; display: flex; align-items: center; gap: 7px; flex: 1 1 280px; min-width: 220px; }
.hsu2-permbar__search > svg { position: absolute; left: 10px; color: var(--text-tertiary); pointer-events: none; }
.hsu2-permbar__search .input { width: 100%; padding-left: 30px; padding-right: 28px; }
.hsu2-permbar__x {
position: absolute; right: 7px; width: 18px; height: 18px; border: 0; border-radius: 999px;
background: var(--n-100); color: var(--n-700); display: grid; place-items: center; cursor: pointer;
}
.hsu2-permbar__x:hover { background: var(--err-100); color: var(--err-700); }
.hsu2-permbar__count { font-size: 12.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.hsu2-permbar__count b { color: var(--p-600); font-size: 15px; }
.hsu2-permbar__acts { display: flex; gap: 8px; margin-left: auto; }
.hsu2-permbar__acts .hsu2-fbtn { height: 32px; font-size: 12px; }
.hsu2-permgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 12px; align-items: start; }
.hsu2-pgroup {
border: 1px solid var(--border-default); border-radius: 9px; background: var(--n-0);
box-shadow: var(--shadow-xs); overflow: hidden;
}
.hsu2-pgroup__head {
display: flex; align-items: center; gap: 8px; padding: 9px 11px;
background: var(--n-25); border-bottom: 1px solid var(--border-subtle);
}
.hsu2-pgroup.is-collapsed .hsu2-pgroup__head { border-bottom: 0; }
.hsu2-pgroup__toggle {
width: 22px; height: 22px; border: 0; border-radius: 5px; background: transparent;
color: var(--n-700); display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
}
.hsu2-pgroup__toggle:hover:not(:disabled) { background: var(--n-100); }
.hsu2-pgroup__toggle:disabled { opacity: .35; cursor: default; }
.hsu2-pgroup__title {
display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px;
font-size: 13px; font-weight: 700; color: var(--n-800); min-width: 0;
}
.hsu2-pgroup__count {
font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
background: var(--n-100); color: var(--n-700); border-radius: 999px; padding: 2px 8px; margin-left: auto; flex-shrink: 0;
}
.hsu2-pgroup__count.is-full { background: var(--ok-50); color: var(--ok-700); }
.hsu2-pgroup__count.is-zero { background: transparent; color: var(--text-tertiary); }
.hsu2-pgroup__acts { display: flex; gap: 4px; flex-shrink: 0; }
.hsu2-pgroup__acts button {
border: 1px solid var(--border-default); border-radius: 5px; background: var(--n-0);
color: var(--n-700); font-family: inherit; font-size: 11px; font-weight: 600;
padding: 3px 9px; cursor: pointer;
}
.hsu2-pgroup__acts button:hover { border-color: var(--p-300); color: var(--p-600); background: var(--p-50); }
.hsu2-pgroup__body { padding: 6px; }
.hsu2-pnode + .hsu2-pnode { margin-top: 3px; border-top: 1px solid var(--border-subtle); padding-top: 3px; }
/* a permission row (leaf, parent or child) */
.hsu2-prow {
display: grid; grid-template-columns: 16px 1fr; gap: 9px; align-items: start;
padding: 7px 8px; border-radius: 6px; cursor: pointer; transition: background .1s;
}
.hsu2-prow:hover { background: var(--n-25); }
.hsu2-prow > input { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--p-500); cursor: pointer; }
.hsu2-prow--parent { font-weight: 600; }
.hsu2-prow.is-on { background: color-mix(in oklab, var(--p-500) 5%, transparent); }
.hsu2-prow.is-dimmed { opacity: .5; }
.hsu2-prow__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hsu2-prow__lab { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; font-size: 12.5px; color: var(--n-800); line-height: 1.4; }
.hsu2-prow--child .hsu2-prow__lab { font-size: 12px; font-weight: 500; }
.hsu2-prow__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.hsu2-kids { margin: 2px 0 2px 12px; padding-left: 12px; border-left: 2px solid var(--border-default); }
.hsu2-kidsnote {
display: flex; align-items: flex-start; gap: 6px; margin: 4px 2px 2px;
padding: 6px 9px; border-radius: 6px; background: var(--warn-50); color: #7a5200;
font-size: 11px; line-height: 1.5;
}
.hsu2-flag {
font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
border-radius: 3px; padding: 1px 5px; white-space: nowrap; cursor: help;
}
.hsu2-flag--deny { background: var(--err-50); color: var(--err-700); }
.hsu2-flag--master { background: var(--p-50); color: var(--p-700); }
.hsu2-flag--never { background: var(--n-100); color: var(--n-700); }
.hsu2-flag--duplicate { background: var(--warn-50); color: var(--warn-700); }
.hsu2-flag--sticky { background: var(--ok-50); color: var(--ok-700); }
.hsu2-permnone {
grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 34px; border: 1px dashed var(--border-default); border-radius: 9px;
color: var(--text-tertiary); font-size: 13px;
}
/* empty state for Affiliate / Administration rows */
.hsu2-permempty {
border: 1px solid var(--border-default); border-radius: 10px; background: var(--n-0);
padding: 26px 24px; box-shadow: var(--shadow-xs); max-width: 780px;
}
.hsu2-permempty > svg { color: var(--p-400); }
.hsu2-permempty h4 { margin: 10px 0 8px; font-size: 15px; font-weight: 700; color: var(--n-800); }
.hsu2-permempty p { margin: 0 0 10px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.65; }
.hsu2-permempty code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11.5px; background: var(--n-75); border-radius: 4px; padding: 0 4px; }
.hsu2-permempty__list { display: flex; flex-direction: column; gap: 5px; margin: 10px 0 14px; padding: 11px 13px; background: var(--n-25); border-radius: 8px; font-size: 12px; color: var(--text-secondary); }
.hsu2-permempty__sug { font-size: 11.5px; color: var(--text-tertiary); font-style: italic; }
.hsu2-unassign { border: 1px solid var(--border-default); border-radius: 9px; background: var(--n-0); padding: 10px 14px; }
.hsu2-unassign summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--p-700); }
.hsu2-unassign p { margin: 10px 0 8px; font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
.hsu2-unassign ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-secondary); line-height: 1.55; }
.hsu2-unassign code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px; }
/* ---- sticky save / diff bar ---- */
/* ---- enforced permissions (040) --------------------------------------
The set this platform actually checks, above the upstream reference tree.
Visually separated on purpose: the two are different vocabularies and only
one of them does anything, so they must not read as one list. */
.hsu2-enforced { margin: 0 0 14px; }
.hsu2-enfgroup { margin: 0 0 10px; border: 1px solid var(--border-default); border-radius: 9px; overflow: hidden; }
.hsu2-enfgroup__title {
padding: 7px 12px; font-size: 11px; font-weight: 600; letter-spacing: .04em;
text-transform: uppercase; color: var(--text-tertiary);
background: var(--n-50); border-bottom: 1px solid var(--border-default);
}
.hsu2-enfrow {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 8px 12px; font-size: 12.5px; cursor: pointer;
}
.hsu2-enfrow + .hsu2-enfrow { border-top: 1px solid var(--border-subtle, var(--border-default)); }
.hsu2-enfrow:hover { background: var(--n-25, var(--n-50)); }
.hsu2-enfrow input:disabled { cursor: progress; }
.hsu2-enfrow__label { font-weight: 500; }
.hsu2-enfrow__key { font-size: 11px; color: var(--text-tertiary); }
.hsu2-enfrow__note { flex: 1 1 100%; font-size: 11px; color: var(--text-tertiary); }
/* The banner over the read-only upstream tree. It has to be unmissable: the
tree below it looks exactly like a working control and is not one. */
.hsu2-refnote {
display: flex; align-items: flex-start; gap: 8px;
margin: 0 0 12px; padding: 9px 12px;
border: 1px dashed var(--border-default); border-radius: 9px;
background: var(--n-25, var(--n-50));
font-size: 11.5px; line-height: 1.5; color: var(--text-secondary);
}
.hsu2-savebar {
position: sticky; bottom: 0; z-index: 14;
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 11px 14px; border: 1px solid var(--border-default); border-radius: 9px;
background: var(--n-0); box-shadow: 0 -6px 22px -12px rgba(15, 20, 32, .35);
}
.hsu2-savebar--static { position: static; box-shadow: var(--shadow-xs); }
.hsu2-savebar > span { font-size: 11.5px; color: var(--text-tertiary); }
.hsu2-savebar .hsu2-fbtn:last-child { margin-left: auto; }
.hsu2-savebar--static .hsu2-fbtn { margin-left: auto; }
.hsu2-diff { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.hsu2-diff__add, .hsu2-diff__rem {
display: inline-flex; align-items: center; gap: 4px; border-radius: 999px;
padding: 3px 10px; font-weight: 700; font-size: 11.5px;
}
.hsu2-diff__add { background: var(--ok-50); color: var(--ok-700); }
.hsu2-diff__rem { background: var(--err-50); color: var(--err-700); }
.hsu2-diff__hint { color: var(--text-tertiary); }
/* ===================================================================
MODALS
=================================================================== */
.hsu2-scrim {
position: fixed; inset: 0; z-index: 230; background: rgba(15, 20, 32, .5);
backdrop-filter: blur(3px); display: grid; place-items: start center;
padding: 26px 16px; overflow: auto;
}
.hsu2-modal {
width: min(700px, 96vw); background: var(--n-0); border-radius: 12px;
box-shadow: 0 30px 70px -15px rgba(15, 20, 32, .42);
display: flex; flex-direction: column; max-height: calc(100vh - 52px);
}
.hsu2-modal--wide { width: min(1000px, 96vw); }
.hsu2-modal__head {
display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
padding: 18px 22px 12px; border-bottom: 1px solid var(--border-subtle);
}
.hsu2-modal__title { font-size: 19px; font-weight: 700; color: var(--n-800); }
.hsu2-modal__sub { margin-top: 3px; font-size: 11.5px; color: var(--text-tertiary); font-family: var(--font-mono, ui-monospace, Menlo, monospace); }
.hsu2-modal__x {
width: 34px; height: 34px; border: 0; border-radius: 8px; background: var(--n-75);
color: var(--n-700); cursor: pointer; display: grid; place-items: center; flex-shrink: 0;
}
.hsu2-modal__x:hover { background: var(--err-500); color: #fff; }
.hsu2-modal__body { padding: 16px 22px; overflow: auto; }
.hsu2-modal__foot {
display: flex; gap: 10px; align-items: center; padding: 14px 22px;
border-top: 1px solid var(--border-subtle); background: var(--n-25); border-radius: 0 0 12px 12px;
}
.hsu2-modal__foot button:last-child { margin-left: auto; }
.hsu2-modal__foot button:disabled { opacity: .5; cursor: not-allowed; }
/* ===================================================================
RESPONSIVE — brief §11
Tables collapse to cards through HrsTable's renderCard; the filter
strip collapses through the Hrs sheet. What is left is this screen's
own furniture: the permission tree, the two-column detail, the form
grids and the modals.
=================================================================== */
@media (max-width: 1180px) {
.hsu2-permgrid { grid-template-columns: 1fr; }
.hsu2-home { grid-template-columns: 1fr; }
.hsu2-home__side { position: static; }
}
@media (max-width: 900px) {
.hsu2-form3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
/* forms go single-column; nothing spans */
.hsu2-form2, .hsu2-form3 { grid-template-columns: 1fr; }
.hsu2-span2 { grid-column: auto; }
.hsu2-prefix, .hsu2-housenr { width: 84px; flex-basis: 84px; }
/* permission tree: bigger tap targets, key chip on its own line,
group header wraps instead of squeezing the All/None buttons out */
.hsu2-prow { padding: 10px 8px; gap: 11px; }
.hsu2-prow > input { width: 18px; height: 18px; }
.hsu2-prow__lab, .hsu2-prow--child .hsu2-prow__lab { font-size: 13px; }
.hsu2-kids { margin-left: 6px; padding-left: 10px; }
.hsu2-pgroup__head { flex-wrap: wrap; row-gap: 8px; }
.hsu2-pgroup__count { margin-left: auto; }
.hsu2-pgroup__acts { width: 100%; }
.hsu2-pgroup__acts button { flex: 1; padding: 7px 0; }
/* toolbar stacks; search first, actions full width */
.hsu2-permbar { position: static; }
.hsu2-permbar__search { flex: 1 1 100%; }
.hsu2-permbar__acts { margin-left: 0; width: 100%; }
.hsu2-permbar__acts .hsu2-fbtn { flex: 1; }
/* save bar pinned to the bottom of the viewport, buttons full width */
.hsu2-savebar { flex-direction: column; align-items: stretch; gap: 9px; border-radius: 9px 9px 0 0; }
.hsu2-savebar .hsu2-fbtn, .hsu2-savebar--static .hsu2-fbtn { margin-left: 0; width: 100%; }
.hsu2-diff { justify-content: center; }
/* detail header + tabs */
.hsu2-idline { font-size: 14px; }
.hsu2-tabs { overflow-x: auto; flex-wrap: nowrap; scroll-snap-type: x proximity; }
.hsu2-tabs .hp-tab { white-space: nowrap; scroll-snap-align: start; }
/* modals go full screen (brief §11) */
.hsu2-scrim { padding: 0; }
.hsu2-modal, .hsu2-modal--wide {
width: 100vw; max-width: 100vw; min-height: 100vh; max-height: 100vh; border-radius: 0;
}
.hsu2-modal__foot { border-radius: 0; flex-wrap: wrap; }
.hsu2-modal__foot button { flex: 1 1 45%; margin-left: 0 !important; }
/* columns popover anchors to the sheet, not the hidden desktop strip */
.hsu2-colpop { left: auto; right: 0; min-width: min(280px, calc(100vw - 40px)); }
.hsu2-permempty { padding: 20px 16px; }
.hsu2-newbtn { flex: 1 1 auto; }
}
@media (max-width: 420px) {
.hsu2-prow__meta { gap: 4px; }
.hsu2-key { font-size: 10px; }
.hsu2-pgroup__title { font-size: 12.5px; }
}
/* ---- shared small pieces ---- */
.hsu2-key {
background: var(--n-75); border: 1px solid var(--border-subtle); border-radius: 4px;
padding: 0 5px; font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 10.5px; color: var(--n-700); white-space: nowrap;
}
.hsu2-rolechip {
display: inline-flex; align-items: center; gap: 5px; border-radius: 999px;
padding: 2px 4px 2px 9px; color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap;
}
.hsu2-rolechip i {
font-style: normal; font-size: 9.5px; font-weight: 800; line-height: 1;
background: rgba(255, 255, 255, .22); border-radius: 999px; padding: 2px 5px;
}
.hsu2-inf {
font-style: normal; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: var(--warn-700); background: var(--warn-50);
border-radius: 3px; padding: 1px 4px; margin-left: 6px; white-space: nowrap;
}
.hsu2-note { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.55; }
.hsu2-note code, .hsu2-modaltext code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px; }
.hsu2-modaltext { margin: 0 0 12px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.hsu2-fbtn { min-width: 0; height: 38px; }
.hsu2-fbtn--danger { border-color: var(--err-300); color: var(--err-500); }
.hsu2-fbtn--danger:hover { background: var(--err-50); }
.hsu2-newbtn { min-width: 0; height: 38px; position: relative; }
.hsu2-badbadge {
margin-left: 7px; background: rgba(255, 255, 255, .22); border-radius: 4px;
padding: 1px 5px; font-size: 9.5px; font-weight: 800; letter-spacing: .03em;
}
/* ---- callouts ---- */
.hsu2-callout {
display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start;
border-radius: 8px; padding: 10px 12px; margin: 0 0 14px;
font-size: 12.5px; line-height: 1.6;
}
.hsu2-callout b { font-weight: 700; }
.hsu2-callout code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11.5px; }
.hsu2-callout--warn { background: var(--warn-50); color: #7a5200; border: 1px solid var(--warn-100); }
.hsu2-callout--err { background: var(--err-50); color: var(--err-700); border: 1px solid var(--err-100); }
.hsu2-callout--ok { background: var(--ok-50); color: var(--ok-700); border: 1px solid var(--ok-100); }
/* ---- list: columns popover in the filter strip ---- */
.hsu2-colcard { position: relative; }
.hsu2-colbtn { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; text-align: left; }
.hsu2-colscrim { position: fixed; inset: 0; z-index: 60; }
.hsu2-colpop {
position: absolute; z-index: 61; top: calc(100% + 6px); left: 0; min-width: 250px;
background: var(--n-0); border: 1px solid var(--border-default); border-radius: 8px;
box-shadow: 0 18px 40px -12px rgba(15, 20, 32, .3); padding: 8px;
}
.hsu2-colpop__head, .hsu2-colpop__foot {
font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--text-tertiary); padding: 4px 6px;
}
.hsu2-colpop__foot { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11px; border-top: 1px solid var(--border-subtle); margin-top: 5px; padding-top: 8px; }
.hsu2-colpop label { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 6px; font-size: 12.5px; cursor: pointer; }
.hsu2-colpop label:hover { background: var(--n-25); }
.hsu2-sortnote {
display: flex; align-items: flex-start; gap: 7px; margin: 0 0 10px;
font-size: 12px; color: var(--text-tertiary); line-height: 1.55;
}
.hsu2-sortnote code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px; }
/* ---- list: username / skin cells ---- */
.hsu2-unamecell { display: inline-flex; align-items: center; gap: 4px; }
.hsu2-imp {
width: 22px; height: 22px; border: 1px solid var(--border-default); border-radius: 5px;
background: var(--n-0); color: var(--text-tertiary); display: grid; place-items: center;
cursor: pointer; flex-shrink: 0;
}
.hsu2-imp:hover { border-color: var(--p-300); color: var(--p-600); background: var(--p-50); }
.hsu2-skincell { display: inline-flex; align-items: center; gap: 5px; }
.hsu2-skincell i {
font-style: normal; font-size: 10px; font-weight: 700; color: var(--p-700);
background: var(--p-50); border: 1px solid var(--p-100); border-radius: 999px; padding: 1px 6px; cursor: help;
}
/* mobile row cards (rendered by HrsTable's renderCard) */
.hsu2-cardmore { margin-top: 8px; }
.hsu2-cardmore summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--p-700); }
.hsu2-cardacts { display: flex; gap: 8px; margin-top: 10px; }
.hsu2-cardacts .hsu2-fbtn { flex: 1; height: 34px; }
/* ---- detail chrome ---- */
.hsu2 .page__title.hsu2-ptitle { color: var(--p-700); margin-bottom: 2px; }
.hsu2-idline {
display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
font-size: 15px; font-weight: 600; color: #3f4254;
}
.hsu2-idline__id { color: var(--text-tertiary); font-weight: 500; font-size: 13px; }
.hsu2-tabs { flex-wrap: wrap; }
.hsu2-tab--dead { opacity: .55; }
.hsu2-tab__dead {
margin-left: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .03em;
background: var(--err-50); color: var(--err-700); border-radius: 3px; padding: 1px 4px;
}
.hsu2-tabnote {
display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start;
margin: 10px 0 16px; padding: 9px 12px; border-radius: 8px;
background: var(--n-25); border: 1px solid var(--border-subtle);
font-size: 12px; color: var(--text-secondary); line-height: 1.6;
}
.hsu2-tabnote code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px; }
/* ---- detail: Home layout ---- */
.hsu2-home { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.hsu2-home__main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hsu2-home__side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 12px; }
/* ---- form grid ---- */
.hsu2-formsec {
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-subtle);
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--n-700);
}
.hsu2-formsec:first-child { margin-top: 0; }
.hsu2-formsec__opt { font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-tertiary); }
.hsu2-form2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.hsu2-form3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.hsu2-span2 { grid-column: span 2; }
.hsu2-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hsu2-field .input, .hsu2-field .select { width: 100%; }
.hsu2-field__err { font-size: 11.5px; font-weight: 600; color: var(--err-500); }
.hsu2-field__note { font-size: 11px; color: var(--text-tertiary); line-height: 1.5; }
.hsu2-field--err .input, .hsu2-field--err .select { border-color: var(--err-300); }
.hsu2-inline { display: flex; gap: 6px; min-width: 0; }
.hsu2-inline > .input, .hsu2-inline > .select { min-width: 0; }
.hsu2-prefix { width: 88px; flex: 0 0 88px; }
.hsu2-housenr { width: 108px; flex: 0 0 108px; }
.hsu2-calc { height: 36px; flex: 0 0 auto; }
.hsu2-credrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 11.5px; color: var(--text-tertiary); }
/* ---- skin picker ---- */
.hsu2-skins { border: 1px solid var(--border-default); border-radius: 8px; background: var(--n-0); overflow: hidden; }
.hsu2-skins__q { border: 0; border-bottom: 1px solid var(--border-subtle); border-radius: 0; width: 100%; }
.hsu2-skins__list { max-height: 168px; overflow-y: auto; padding: 5px; display: flex; flex-direction: column; gap: 1px; }
.hsu2-skins__opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; cursor: pointer; }
.hsu2-skins__opt:hover { background: var(--n-25); }
.hsu2-skins__opt.is-on { background: var(--p-50); color: var(--p-700); font-weight: 600; }
.hsu2-skins__none { padding: 10px; font-size: 12px; color: var(--text-tertiary); }
.hsu2-skins__foot { padding: 7px 10px; border-top: 1px solid var(--border-subtle); background: var(--n-25); font-size: 11px; color: var(--text-tertiary); }
/* ===================================================================
PERMISSION TREE
=================================================================== */
.hsu2-perm { display: flex; flex-direction: column; gap: 14px; }
.hsu2-permbar {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 8px;
background: var(--n-0); box-shadow: var(--shadow-xs);
position: sticky; top: 0; z-index: 12;
}
.hsu2-permbar__search { position: relative; display: flex; align-items: center; gap: 7px; flex: 1 1 280px; min-width: 220px; }
.hsu2-permbar__search > svg { position: absolute; left: 10px; color: var(--text-tertiary); pointer-events: none; }
.hsu2-permbar__search .input { width: 100%; padding-left: 30px; padding-right: 28px; }
.hsu2-permbar__x {
position: absolute; right: 7px; width: 18px; height: 18px; border: 0; border-radius: 999px;
background: var(--n-100); color: var(--n-700); display: grid; place-items: center; cursor: pointer;
}
.hsu2-permbar__x:hover { background: var(--err-100); color: var(--err-700); }
.hsu2-permbar__count { font-size: 12.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.hsu2-permbar__count b { color: var(--p-600); font-size: 15px; }
.hsu2-permbar__acts { display: flex; gap: 8px; margin-left: auto; }
.hsu2-permbar__acts .hsu2-fbtn { height: 32px; font-size: 12px; }
.hsu2-permgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 12px; align-items: start; }
.hsu2-pgroup {
border: 1px solid var(--border-default); border-radius: 9px; background: var(--n-0);
box-shadow: var(--shadow-xs); overflow: hidden;
}
.hsu2-pgroup__head {
display: flex; align-items: center; gap: 8px; padding: 9px 11px;
background: var(--n-25); border-bottom: 1px solid var(--border-subtle);
}
.hsu2-pgroup.is-collapsed .hsu2-pgroup__head { border-bottom: 0; }
.hsu2-pgroup__toggle {
width: 22px; height: 22px; border: 0; border-radius: 5px; background: transparent;
color: var(--n-700); display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
}
.hsu2-pgroup__toggle:hover:not(:disabled) { background: var(--n-100); }
.hsu2-pgroup__toggle:disabled { opacity: .35; cursor: default; }
.hsu2-pgroup__title {
display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px;
font-size: 13px; font-weight: 700; color: var(--n-800); min-width: 0;
}
.hsu2-pgroup__count {
font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
background: var(--n-100); color: var(--n-700); border-radius: 999px; padding: 2px 8px; margin-left: auto; flex-shrink: 0;
}
.hsu2-pgroup__count.is-full { background: var(--ok-50); color: var(--ok-700); }
.hsu2-pgroup__count.is-zero { background: transparent; color: var(--text-tertiary); }
.hsu2-pgroup__acts { display: flex; gap: 4px; flex-shrink: 0; }
.hsu2-pgroup__acts button {
border: 1px solid var(--border-default); border-radius: 5px; background: var(--n-0);
color: var(--n-700); font-family: inherit; font-size: 11px; font-weight: 600;
padding: 3px 9px; cursor: pointer;
}
.hsu2-pgroup__acts button:hover { border-color: var(--p-300); color: var(--p-600); background: var(--p-50); }
.hsu2-pgroup__body { padding: 6px; }
.hsu2-pnode + .hsu2-pnode { margin-top: 3px; border-top: 1px solid var(--border-subtle); padding-top: 3px; }
/* a permission row (leaf, parent or child) */
.hsu2-prow {
display: grid; grid-template-columns: 16px 1fr; gap: 9px; align-items: start;
padding: 7px 8px; border-radius: 6px; cursor: pointer; transition: background .1s;
}
.hsu2-prow:hover { background: var(--n-25); }
.hsu2-prow > input { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--p-500); cursor: pointer; }
.hsu2-prow--parent { font-weight: 600; }
.hsu2-prow.is-on { background: color-mix(in oklab, var(--p-500) 5%, transparent); }
.hsu2-prow.is-dimmed { opacity: .5; }
.hsu2-prow__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hsu2-prow__lab { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; font-size: 12.5px; color: var(--n-800); line-height: 1.4; }
.hsu2-prow--child .hsu2-prow__lab { font-size: 12px; font-weight: 500; }
.hsu2-prow__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.hsu2-kids { margin: 2px 0 2px 12px; padding-left: 12px; border-left: 2px solid var(--border-default); }
.hsu2-kidsnote {
display: flex; align-items: flex-start; gap: 6px; margin: 4px 2px 2px;
padding: 6px 9px; border-radius: 6px; background: var(--warn-50); color: #7a5200;
font-size: 11px; line-height: 1.5;
}
.hsu2-flag {
font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
border-radius: 3px; padding: 1px 5px; white-space: nowrap; cursor: help;
}
.hsu2-flag--deny { background: var(--err-50); color: var(--err-700); }
.hsu2-flag--master { background: var(--p-50); color: var(--p-700); }
.hsu2-flag--never { background: var(--n-100); color: var(--n-700); }
.hsu2-flag--duplicate { background: var(--warn-50); color: var(--warn-700); }
.hsu2-flag--sticky { background: var(--ok-50); color: var(--ok-700); }
.hsu2-permnone {
grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 34px; border: 1px dashed var(--border-default); border-radius: 9px;
color: var(--text-tertiary); font-size: 13px;
}
/* empty state for Affiliate / Administration rows */
.hsu2-permempty {
border: 1px solid var(--border-default); border-radius: 10px; background: var(--n-0);
padding: 26px 24px; box-shadow: var(--shadow-xs); max-width: 780px;
}
.hsu2-permempty > svg { color: var(--p-400); }
.hsu2-permempty h4 { margin: 10px 0 8px; font-size: 15px; font-weight: 700; color: var(--n-800); }
.hsu2-permempty p { margin: 0 0 10px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.65; }
.hsu2-permempty code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11.5px; background: var(--n-75); border-radius: 4px; padding: 0 4px; }
.hsu2-permempty__list { display: flex; flex-direction: column; gap: 5px; margin: 10px 0 14px; padding: 11px 13px; background: var(--n-25); border-radius: 8px; font-size: 12px; color: var(--text-secondary); }
.hsu2-permempty__sug { font-size: 11.5px; color: var(--text-tertiary); font-style: italic; }
.hsu2-unassign { border: 1px solid var(--border-default); border-radius: 9px; background: var(--n-0); padding: 10px 14px; }
.hsu2-unassign summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--p-700); }
.hsu2-unassign p { margin: 10px 0 8px; font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
.hsu2-unassign ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-secondary); line-height: 1.55; }
.hsu2-unassign code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px; }
/* ---- sticky save / diff bar ---- */
.hsu2-savebar {
position: sticky; bottom: 0; z-index: 14;
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 11px 14px; border: 1px solid var(--border-default); border-radius: 9px;
background: var(--n-0); box-shadow: 0 -6px 22px -12px rgba(15, 20, 32, .35);
}
.hsu2-savebar--static { position: static; box-shadow: var(--shadow-xs); }
.hsu2-savebar > span { font-size: 11.5px; color: var(--text-tertiary); }
.hsu2-savebar .hsu2-fbtn:last-child { margin-left: auto; }
.hsu2-savebar--static .hsu2-fbtn { margin-left: auto; }
.hsu2-diff { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.hsu2-diff__add, .hsu2-diff__rem {
display: inline-flex; align-items: center; gap: 4px; border-radius: 999px;
padding: 3px 10px; font-weight: 700; font-size: 11.5px;
}
.hsu2-diff__add { background: var(--ok-50); color: var(--ok-700); }
.hsu2-diff__rem { background: var(--err-50); color: var(--err-700); }
.hsu2-diff__hint { color: var(--text-tertiary); }
/* ===================================================================
MODALS
=================================================================== */
.hsu2-scrim {
position: fixed; inset: 0; z-index: 230; background: rgba(15, 20, 32, .5);
backdrop-filter: blur(3px); display: grid; place-items: start center;
padding: 26px 16px; overflow: auto;
}
.hsu2-modal {
width: min(700px, 96vw); background: var(--n-0); border-radius: 12px;
box-shadow: 0 30px 70px -15px rgba(15, 20, 32, .42);
display: flex; flex-direction: column; max-height: calc(100vh - 52px);
}
.hsu2-modal--wide { width: min(1000px, 96vw); }
.hsu2-modal__head {
display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
padding: 18px 22px 12px; border-bottom: 1px solid var(--border-subtle);
}
.hsu2-modal__title { font-size: 19px; font-weight: 700; color: var(--n-800); }
.hsu2-modal__sub { margin-top: 3px; font-size: 11.5px; color: var(--text-tertiary); font-family: var(--font-mono, ui-monospace, Menlo, monospace); }
.hsu2-modal__x {
width: 34px; height: 34px; border: 0; border-radius: 8px; background: var(--n-75);
color: var(--n-700); cursor: pointer; display: grid; place-items: center; flex-shrink: 0;
}
.hsu2-modal__x:hover { background: var(--err-500); color: #fff; }
.hsu2-modal__body { padding: 16px 22px; overflow: auto; }
.hsu2-modal__foot {
display: flex; gap: 10px; align-items: center; padding: 14px 22px;
border-top: 1px solid var(--border-subtle); background: var(--n-25); border-radius: 0 0 12px 12px;
}
.hsu2-modal__foot button:last-child { margin-left: auto; }
.hsu2-modal__foot button:disabled { opacity: .5; cursor: not-allowed; }
/* ===================================================================
RESPONSIVE — brief §11
Tables collapse to cards through HrsTable's renderCard; the filter
strip collapses through the Hrs sheet. What is left is this screen's
own furniture: the permission tree, the two-column detail, the form
grids and the modals.
=================================================================== */
@media (max-width: 1180px) {
.hsu2-permgrid { grid-template-columns: 1fr; }
.hsu2-home { grid-template-columns: 1fr; }
.hsu2-home__side { position: static; }
}
@media (max-width: 900px) {
.hsu2-form3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
/* forms go single-column; nothing spans */
.hsu2-form2, .hsu2-form3 { grid-template-columns: 1fr; }
.hsu2-span2 { grid-column: auto; }
.hsu2-prefix, .hsu2-housenr { width: 84px; flex-basis: 84px; }
/* permission tree: bigger tap targets, key chip on its own line,
group header wraps instead of squeezing the All/None buttons out */
.hsu2-prow { padding: 10px 8px; gap: 11px; }
.hsu2-prow > input { width: 18px; height: 18px; }
.hsu2-prow__lab, .hsu2-prow--child .hsu2-prow__lab { font-size: 13px; }
.hsu2-kids { margin-left: 6px; padding-left: 10px; }
.hsu2-pgroup__head { flex-wrap: wrap; row-gap: 8px; }
.hsu2-pgroup__count { margin-left: auto; }
.hsu2-pgroup__acts { width: 100%; }
.hsu2-pgroup__acts button { flex: 1; padding: 7px 0; }
/* toolbar stacks; search first, actions full width */
.hsu2-permbar { position: static; }
.hsu2-permbar__search { flex: 1 1 100%; }
.hsu2-permbar__acts { margin-left: 0; width: 100%; }
.hsu2-permbar__acts .hsu2-fbtn { flex: 1; }
/* save bar pinned to the bottom of the viewport, buttons full width */
.hsu2-savebar { flex-direction: column; align-items: stretch; gap: 9px; border-radius: 9px 9px 0 0; }
.hsu2-savebar .hsu2-fbtn, .hsu2-savebar--static .hsu2-fbtn { margin-left: 0; width: 100%; }
.hsu2-diff { justify-content: center; }
/* detail header + tabs */
.hsu2-idline { font-size: 14px; }
.hsu2-tabs { overflow-x: auto; flex-wrap: nowrap; scroll-snap-type: x proximity; }
.hsu2-tabs .hp-tab { white-space: nowrap; scroll-snap-align: start; }
/* modals go full screen (brief §11) */
.hsu2-scrim { padding: 0; }
.hsu2-modal, .hsu2-modal--wide {
width: 100vw; max-width: 100vw; min-height: 100vh; max-height: 100vh; border-radius: 0;
}
.hsu2-modal__foot { border-radius: 0; flex-wrap: wrap; }
.hsu2-modal__foot button { flex: 1 1 45%; margin-left: 0 !important; }
/* columns popover anchors to the sheet, not the hidden desktop strip */
.hsu2-colpop { left: auto; right: 0; min-width: min(280px, calc(100vw - 40px)); }
.hsu2-permempty { padding: 20px 16px; }
.hsu2-newbtn { flex: 1 1 auto; }
}
@media (max-width: 420px) {
.hsu2-prow__meta { gap: 4px; }
.hsu2-key { font-size: 10px; }
.hsu2-pgroup__title { font-size: 12.5px; }
}
/* ---- HostCommCashback ---- */
/* ===================================================================
COMMISSION CASHBACK — settings surface (src/pages/HostCommCashback.jsx) — hccb-*
Admin/CommissionCashbackController · docs/ISYSTEM_REFERENCE.md §Batch 4.
Appends to styles/theme-iwakiri.css. Iwakiri red ramp (--p-*) only —
never PayBO indigo. Responsive rules per brief §11 at the bottom.
=================================================================== */
/* ---- Settings / Payments tab bar (filters/commission_cashback.blade.php L13-18) ---- */
.hccb-tabs {
display: flex; align-items: stretch; gap: 4px; margin: 0 0 14px;
border-bottom: 1px solid var(--border-default); overflow-x: auto; scrollbar-width: none;
}
.hccb-tabs::-webkit-scrollbar { display: none; }
.hccb-tab {
display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
padding: 9px 16px 10px; margin-bottom: -1px;
border: 1px solid transparent; border-bottom: 0; border-radius: 7px 7px 0 0;
font-size: 13px; font-weight: 600; color: var(--text-secondary);
text-decoration: none; cursor: pointer; transition: background .12s, color .12s;
}
.hccb-tab:hover { background: var(--n-50); color: var(--p-700); }
.hccb-tab--on {
background: #fff; border-color: var(--border-default); color: var(--p-600);
cursor: default; box-shadow: inset 0 2px 0 var(--p-500);
}
.hccb-tab--on:hover { background: #fff; color: var(--p-600); }
/* ---- table cells ---- */
.hccb-id {
font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums;
color: var(--text-tertiary);
}
.hccb-namelink {
display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
border: 0; background: none; padding: 0; cursor: pointer;
font: inherit; font-weight: 600; color: var(--p-600); text-align: left;
}
.hccb-namelink:hover { color: var(--p-700); text-decoration: underline; }
.hccb-namelink:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-500) 18%, transparent); border-radius: 4px; }
.hccb-namelink span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hccb-date, .hccb-num {
font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums;
color: var(--text-primary); white-space: nowrap;
}
.hccb-days { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.hccb-muted { color: var(--n-300); }
.hccb-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.hccb-chip {
display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
background: var(--n-50); border: 1px solid var(--border-subtle);
font-size: 11px; font-weight: 600; color: var(--text-secondary); white-space: nowrap;
}
.hccb-chip--none { background: none; border-color: transparent; color: var(--n-300); }
.hccb-chip--auto { background: var(--warn-50); border-color: var(--warn-100); color: #8a5a00; }
.hccb-yn {
display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
background: var(--n-50); border: 1px solid var(--border-subtle);
font-size: 11px; font-weight: 700; color: var(--text-tertiary);
}
.hccb-yn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--n-300); }
.hccb-yn--on { background: var(--ok-50); border-color: var(--ok-100); color: var(--ok-700); }
.hccb-yn--on::before { background: var(--ok-500); }
/* ---- row actions ---- */
.hccb-acts { display: inline-flex; gap: 6px; justify-content: center; }
.hccb-act {
width: 30px; height: 30px; border: 0; border-radius: 6px; cursor: pointer;
display: grid; place-items: center; color: #fff; transition: background .12s;
}
.hccb-act--danger { background: var(--err-500); }
.hccb-act--danger:hover { background: var(--err-700); }
.hccb-act--edit { background: var(--p-500); }
.hccb-act--edit:hover { background: var(--p-700); }
.hccb-act:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-500) 26%, transparent); }
/* ---- mobile card extras (HrsTable renderCard) ---- */
.hccb-cardpct {
font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--p-600);
font-variant-numeric: tabular-nums;
}
.hccb-cardmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 10px; }
.hccb-more { margin-top: 8px; }
.hccb-more > summary {
cursor: pointer; font-size: 12px; font-weight: 600; color: var(--p-600);
list-style: none; padding: 4px 0;
}
.hccb-more > summary::-webkit-details-marker { display: none; }
.hccb-more > summary::before { content: "▸ "; }
.hccb-more[open] > summary::before { content: "▾ "; }
.hccb-card__acts { display: flex; gap: 8px; margin-top: 12px; }
.hccb-card__del { color: var(--err-700); }
/* ---- findings block ---- */
.hccb-findings { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
.hccb-finding {
display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start;
padding: 12px 14px; border-radius: 9px;
border: 1px solid var(--warn-100); background: color-mix(in oklab, var(--warn-500) 5%, #fff);
}
.hccb-finding--err { border-color: var(--err-100); background: color-mix(in oklab, var(--err-500) 5%, #fff); }
.hccb-finding__ic {
width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
background: var(--warn-500); color: #fff; flex-shrink: 0;
}
.hccb-finding--err .hccb-finding__ic { background: var(--err-500); }
.hccb-finding__t { font-size: 12.5px; font-weight: 700; color: #8a5a00; margin-bottom: 3px; }
.hccb-finding--err .hccb-finding__t { color: var(--err-700); }
.hccb-finding__b { font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
.hccb-finding__b code {
font-family: var(--font-mono); font-size: 11px; padding: 1px 5px; border-radius: 4px;
background: rgba(15, 20, 32, .06); color: var(--text-primary); word-break: break-word;
}
/* ===================================================================
Modal — create / edit + delete confirm (shared .bp-modal chrome)
=================================================================== */
.hccb-modal { width: min(620px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.hccb-modal--wide { width: min(900px, calc(100vw - 32px)); }
.hccb-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 14px 18px; border-bottom: 1px solid var(--border-default);
}
.hccb-modal__title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.hccb-modal__sub {
font-size: 11px; color: var(--text-tertiary); margin-top: 3px;
font-family: var(--font-mono); word-break: break-word;
}
.hccb-modal__body {
padding: 16px 18px; display: flex; flex-direction: column; gap: 12px;
max-height: calc(100vh - 220px); overflow-y: auto;
}
.hccb-modal__foot {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 18px; border-top: 1px solid var(--border-default); background: var(--n-25);
}
.hccb-x {
display: inline-grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
border: 0; border-radius: 7px; background: none; color: var(--text-tertiary); cursor: pointer;
}
.hccb-x:hover { background: var(--n-50); color: var(--text-primary); }
/* ---- form ---- */
.hccb-sectitle {
font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
color: var(--text-tertiary); border-bottom: 1px solid var(--border-subtle);
padding-bottom: 6px; margin-top: 4px;
}
.hccb-sectitle:first-child { margin-top: 0; }
.hccb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.hccb-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hccb-field--full { grid-column: 1 / -1; }
.hccb-label {
display: inline-flex; align-items: center; gap: 4px;
font-size: 12px; font-weight: 700; color: var(--text-secondary);
}
.hccb-req { color: var(--err-500); }
.hccb-hint { font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary); }
.hccb-hint b { color: var(--text-secondary); }
.hccb-hint code, .hccb-label code, .hccb-p code {
font-family: var(--font-mono); font-size: 10.5px; padding: 1px 5px; border-radius: 4px;
background: rgba(15, 20, 32, .06); color: var(--text-primary); word-break: break-word;
}
.hccb-fielderr { font-size: 11.5px; font-weight: 600; color: var(--err-700); }
.hccb-invalid, .hccb-invalid:focus {
border-color: var(--err-500) !important;
box-shadow: 0 0 0 3px rgba(246, 78, 96, .14) !important;
}
.hccb-banner {
display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px;
background: var(--err-50); border: 1px solid var(--err-100); color: var(--err-700);
font-size: 12.5px; font-weight: 600;
}
.hccb-p { font-size: 13px; line-height: 1.65; color: var(--text-secondary); margin: 0; }
.hccb-p--muted { font-size: 12px; color: var(--text-tertiary); }
/* number input with a trailing unit (% / day(s) / week(s) / month(s)) */
.hccb-suffixed { position: relative; display: flex; align-items: center; }
.hccb-suffixed .input { padding-right: 74px; width: 100%; }
.hccb-suffix {
position: absolute; right: 10px; pointer-events: none;
font-size: 11.5px; font-weight: 600; color: var(--text-tertiary);
}
/* multi-pick chip pickers: skins, game categories, weekdays, month days */
.hccb-picker {
display: flex; flex-wrap: wrap; gap: 6px; padding: 8px;
border: 1px solid var(--border-default); border-radius: var(--r-md); background: var(--n-25);
max-height: 168px; overflow-y: auto;
}
.hccb-picker--dense { max-height: 152px; }
.hccb-opt {
display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
border: 1px solid var(--border-default); border-radius: 999px; background: #fff;
font: inherit; font-size: 12px; font-weight: 500; color: var(--text-secondary); cursor: pointer;
transition: background .12s, border-color .12s, color .12s;
}
.hccb-opt:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hccb-opt--on {
background: var(--p-500); border-color: var(--p-500); color: #fff; font-weight: 600;
}
.hccb-opt--on:hover { background: var(--p-600); border-color: var(--p-600); color: #fff; }
.hccb-opt--num { min-width: 38px; justify-content: center; font-family: var(--font-mono); font-size: 11.5px; }
.hccb-opt:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-500) 20%, transparent); }
.hccb-optid {
font-family: var(--font-mono); font-size: 10px; opacity: .6; font-weight: 600;
}
/* active / auto_pay switches */
.hccb-switches { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.hccb-switch {
display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
border: 1px solid var(--border-default); border-radius: var(--r-md); background: var(--n-25);
cursor: pointer;
}
.hccb-switch b { display: block; font-size: 12.5px; color: var(--text-primary); }
.hccb-switch em {
display: block; font-style: normal; font-size: 11.5px; line-height: 1.55;
color: var(--text-tertiary); margin-top: 2px;
}
.hccb-switch code {
font-family: var(--font-mono); font-size: 10.5px; padding: 1px 4px; border-radius: 4px;
background: rgba(15, 20, 32, .06); color: var(--text-secondary);
}
/* next-payments preview (GET /commission_cashback/payment/info) */
.hccb-preview {
display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
border: 1px solid var(--border-default); border-radius: var(--r-md); background: var(--n-25);
}
.hccb-preview__head {
display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
font-size: 12px; font-weight: 700; color: var(--text-secondary);
}
.hccb-preview__src { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--text-tertiary); }
.hccb-preview__list { display: flex; flex-wrap: wrap; gap: 6px; }
.hccb-preview__d {
display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px;
background: #fff; border: 1px solid var(--p-100); color: var(--p-700);
font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums;
}
.hccb-preview__empty { font-size: 12px; color: var(--text-tertiary); }
/* ===================================================================
Responsive (brief §11)
=================================================================== */
@media (max-width: 860px) {
/* forms/modals go full-screen instead of a fixed-width centred dialog */
.hccb-scrim { padding: 0; }
.hccb-modal, .hccb-modal--wide {
width: 100vw; height: 100dvh; max-height: none; border-radius: 0;
display: flex; flex-direction: column;
}
.hccb-modal__body { max-height: none; flex: 1; }
.hccb-modal__foot { position: sticky; bottom: 0; }
.hccb-modal__foot .btn { flex: 1; justify-content: center; }
/* one field per row, so the labels + hints stay readable */
.hccb-grid, .hccb-switches { grid-template-columns: 1fr; }
.hccb-findings { grid-template-columns: 1fr; }
/* tabs become a scrollable pill row */
.hccb-tabs { gap: 6px; }
.hccb-picker { max-height: 200px; }
.hccb-card__acts .btn { flex: 1; justify-content: center; }
}
@media (max-width: 520px) {
.hccb-modal__head { padding: 12px 14px; }
.hccb-modal__body { padding: 14px; }
.hccb-modal__foot { padding: 10px 14px; }
.hccb-modal__title { font-size: 15px; }
.hccb-modal__sub { font-size: 10px; }
.hccb-tab { padding: 8px 12px 9px; font-size: 12.5px; }
.hccb-opt { font-size: 11.5px; padding: 5px 9px; }
.hccb-opt--num { min-width: 34px; }
.hccb-finding { grid-template-columns: 20px 1fr; padding: 10px 12px; }
.hccb-finding__ic { width: 20px; height: 20px; border-radius: 6px; }
.hccb-preview__head { flex-direction: column; gap: 2px; }
}
/* ---- Settings / Payments tab bar (filters/commission_cashback.blade.php L13-18) ---- */
.hccb-tabs {
display: flex; align-items: stretch; gap: 4px; margin: 0 0 14px;
border-bottom: 1px solid var(--border-default); overflow-x: auto; scrollbar-width: none;
}
.hccb-tabs::-webkit-scrollbar { display: none; }
.hccb-tab {
display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
padding: 9px 16px 10px; margin-bottom: -1px;
border: 1px solid transparent; border-bottom: 0; border-radius: 7px 7px 0 0;
font-size: 13px; font-weight: 600; color: var(--text-secondary);
text-decoration: none; cursor: pointer; transition: background .12s, color .12s;
}
.hccb-tab:hover { background: var(--n-50); color: var(--p-700); }
.hccb-tab--on {
background: #fff; border-color: var(--border-default); color: var(--p-600);
cursor: default; box-shadow: inset 0 2px 0 var(--p-500);
}
.hccb-tab--on:hover { background: #fff; color: var(--p-600); }
/* ---- table cells ---- */
.hccb-id {
font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums;
color: var(--text-tertiary);
}
.hccb-namelink {
display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
border: 0; background: none; padding: 0; cursor: pointer;
font: inherit; font-weight: 600; color: var(--p-600); text-align: left;
}
.hccb-namelink:hover { color: var(--p-700); text-decoration: underline; }
.hccb-namelink:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-500) 18%, transparent); border-radius: 4px; }
.hccb-namelink span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hccb-date, .hccb-num {
font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums;
color: var(--text-primary); white-space: nowrap;
}
.hccb-days { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.hccb-muted { color: var(--n-300); }
.hccb-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.hccb-chip {
display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
background: var(--n-50); border: 1px solid var(--border-subtle);
font-size: 11px; font-weight: 600; color: var(--text-secondary); white-space: nowrap;
}
.hccb-chip--none { background: none; border-color: transparent; color: var(--n-300); }
.hccb-chip--auto { background: var(--warn-50); border-color: var(--warn-100); color: #8a5a00; }
.hccb-yn {
display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
background: var(--n-50); border: 1px solid var(--border-subtle);
font-size: 11px; font-weight: 700; color: var(--text-tertiary);
}
.hccb-yn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--n-300); }
.hccb-yn--on { background: var(--ok-50); border-color: var(--ok-100); color: var(--ok-700); }
.hccb-yn--on::before { background: var(--ok-500); }
/* ---- row actions ---- */
.hccb-acts { display: inline-flex; gap: 6px; justify-content: center; }
.hccb-act {
width: 30px; height: 30px; border: 0; border-radius: 6px; cursor: pointer;
display: grid; place-items: center; color: #fff; transition: background .12s;
}
.hccb-act--danger { background: var(--err-500); }
.hccb-act--danger:hover { background: var(--err-700); }
.hccb-act--edit { background: var(--p-500); }
.hccb-act--edit:hover { background: var(--p-700); }
.hccb-act:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-500) 26%, transparent); }
/* ---- mobile card extras (HrsTable renderCard) ---- */
.hccb-cardpct {
font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--p-600);
font-variant-numeric: tabular-nums;
}
.hccb-cardmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 10px; }
.hccb-more { margin-top: 8px; }
.hccb-more > summary {
cursor: pointer; font-size: 12px; font-weight: 600; color: var(--p-600);
list-style: none; padding: 4px 0;
}
.hccb-more > summary::-webkit-details-marker { display: none; }
.hccb-more > summary::before { content: "▸ "; }
.hccb-more[open] > summary::before { content: "▾ "; }
.hccb-card__acts { display: flex; gap: 8px; margin-top: 12px; }
.hccb-card__del { color: var(--err-700); }
/* ---- findings block ---- */
.hccb-findings { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
.hccb-finding {
display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start;
padding: 12px 14px; border-radius: 9px;
border: 1px solid var(--warn-100); background: color-mix(in oklab, var(--warn-500) 5%, #fff);
}
.hccb-finding--err { border-color: var(--err-100); background: color-mix(in oklab, var(--err-500) 5%, #fff); }
.hccb-finding__ic {
width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
background: var(--warn-500); color: #fff; flex-shrink: 0;
}
.hccb-finding--err .hccb-finding__ic { background: var(--err-500); }
.hccb-finding__t { font-size: 12.5px; font-weight: 700; color: #8a5a00; margin-bottom: 3px; }
.hccb-finding--err .hccb-finding__t { color: var(--err-700); }
.hccb-finding__b { font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
.hccb-finding__b code {
font-family: var(--font-mono); font-size: 11px; padding: 1px 5px; border-radius: 4px;
background: rgba(15, 20, 32, .06); color: var(--text-primary); word-break: break-word;
}
/* ===================================================================
Modal — create / edit + delete confirm (shared .bp-modal chrome)
=================================================================== */
.hccb-modal { width: min(620px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.hccb-modal--wide { width: min(900px, calc(100vw - 32px)); }
.hccb-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 14px 18px; border-bottom: 1px solid var(--border-default);
}
.hccb-modal__title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.hccb-modal__sub {
font-size: 11px; color: var(--text-tertiary); margin-top: 3px;
font-family: var(--font-mono); word-break: break-word;
}
.hccb-modal__body {
padding: 16px 18px; display: flex; flex-direction: column; gap: 12px;
max-height: calc(100vh - 220px); overflow-y: auto;
}
.hccb-modal__foot {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 18px; border-top: 1px solid var(--border-default); background: var(--n-25);
}
.hccb-x {
display: inline-grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
border: 0; border-radius: 7px; background: none; color: var(--text-tertiary); cursor: pointer;
}
.hccb-x:hover { background: var(--n-50); color: var(--text-primary); }
/* ---- form ---- */
.hccb-sectitle {
font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
color: var(--text-tertiary); border-bottom: 1px solid var(--border-subtle);
padding-bottom: 6px; margin-top: 4px;
}
.hccb-sectitle:first-child { margin-top: 0; }
.hccb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.hccb-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hccb-field--full { grid-column: 1 / -1; }
.hccb-label {
display: inline-flex; align-items: center; gap: 4px;
font-size: 12px; font-weight: 700; color: var(--text-secondary);
}
.hccb-req { color: var(--err-500); }
.hccb-hint { font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary); }
.hccb-hint b { color: var(--text-secondary); }
.hccb-hint code, .hccb-label code, .hccb-p code {
font-family: var(--font-mono); font-size: 10.5px; padding: 1px 5px; border-radius: 4px;
background: rgba(15, 20, 32, .06); color: var(--text-primary); word-break: break-word;
}
.hccb-fielderr { font-size: 11.5px; font-weight: 600; color: var(--err-700); }
.hccb-invalid, .hccb-invalid:focus {
border-color: var(--err-500) !important;
box-shadow: 0 0 0 3px rgba(246, 78, 96, .14) !important;
}
.hccb-banner {
display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px;
background: var(--err-50); border: 1px solid var(--err-100); color: var(--err-700);
font-size: 12.5px; font-weight: 600;
}
.hccb-p { font-size: 13px; line-height: 1.65; color: var(--text-secondary); margin: 0; }
.hccb-p--muted { font-size: 12px; color: var(--text-tertiary); }
/* number input with a trailing unit (% / day(s) / week(s) / month(s)) */
.hccb-suffixed { position: relative; display: flex; align-items: center; }
.hccb-suffixed .input { padding-right: 74px; width: 100%; }
.hccb-suffix {
position: absolute; right: 10px; pointer-events: none;
font-size: 11.5px; font-weight: 600; color: var(--text-tertiary);
}
/* multi-pick chip pickers: skins, game categories, weekdays, month days */
.hccb-picker {
display: flex; flex-wrap: wrap; gap: 6px; padding: 8px;
border: 1px solid var(--border-default); border-radius: var(--r-md); background: var(--n-25);
max-height: 168px; overflow-y: auto;
}
.hccb-picker--dense { max-height: 152px; }
.hccb-opt {
display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
border: 1px solid var(--border-default); border-radius: 999px; background: #fff;
font: inherit; font-size: 12px; font-weight: 500; color: var(--text-secondary); cursor: pointer;
transition: background .12s, border-color .12s, color .12s;
}
.hccb-opt:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hccb-opt--on {
background: var(--p-500); border-color: var(--p-500); color: #fff; font-weight: 600;
}
.hccb-opt--on:hover { background: var(--p-600); border-color: var(--p-600); color: #fff; }
.hccb-opt--num { min-width: 38px; justify-content: center; font-family: var(--font-mono); font-size: 11.5px; }
.hccb-opt:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-500) 20%, transparent); }
.hccb-optid {
font-family: var(--font-mono); font-size: 10px; opacity: .6; font-weight: 600;
}
/* active / auto_pay switches */
.hccb-switches { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.hccb-switch {
display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
border: 1px solid var(--border-default); border-radius: var(--r-md); background: var(--n-25);
cursor: pointer;
}
.hccb-switch b { display: block; font-size: 12.5px; color: var(--text-primary); }
.hccb-switch em {
display: block; font-style: normal; font-size: 11.5px; line-height: 1.55;
color: var(--text-tertiary); margin-top: 2px;
}
.hccb-switch code {
font-family: var(--font-mono); font-size: 10.5px; padding: 1px 4px; border-radius: 4px;
background: rgba(15, 20, 32, .06); color: var(--text-secondary);
}
/* next-payments preview (GET /commission_cashback/payment/info) */
.hccb-preview {
display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
border: 1px solid var(--border-default); border-radius: var(--r-md); background: var(--n-25);
}
.hccb-preview__head {
display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
font-size: 12px; font-weight: 700; color: var(--text-secondary);
}
.hccb-preview__src { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--text-tertiary); }
.hccb-preview__list { display: flex; flex-wrap: wrap; gap: 6px; }
.hccb-preview__d {
display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px;
background: #fff; border: 1px solid var(--p-100); color: var(--p-700);
font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums;
}
.hccb-preview__empty { font-size: 12px; color: var(--text-tertiary); }
/* ===================================================================
Responsive (brief §11)
=================================================================== */
@media (max-width: 860px) {
/* forms/modals go full-screen instead of a fixed-width centred dialog */
.hccb-scrim { padding: 0; }
.hccb-modal, .hccb-modal--wide {
width: 100vw; height: 100dvh; max-height: none; border-radius: 0;
display: flex; flex-direction: column;
}
.hccb-modal__body { max-height: none; flex: 1; }
.hccb-modal__foot { position: sticky; bottom: 0; }
.hccb-modal__foot .btn { flex: 1; justify-content: center; }
/* one field per row, so the labels + hints stay readable */
.hccb-grid, .hccb-switches { grid-template-columns: 1fr; }
.hccb-findings { grid-template-columns: 1fr; }
/* tabs become a scrollable pill row */
.hccb-tabs { gap: 6px; }
.hccb-picker { max-height: 200px; }
.hccb-card__acts .btn { flex: 1; justify-content: center; }
}
@media (max-width: 520px) {
.hccb-modal__head { padding: 12px 14px; }
.hccb-modal__body { padding: 14px; }
.hccb-modal__foot { padding: 10px 14px; }
.hccb-modal__title { font-size: 15px; }
.hccb-modal__sub { font-size: 10px; }
.hccb-tab { padding: 8px 12px 9px; font-size: 12.5px; }
.hccb-opt { font-size: 11.5px; padding: 5px 9px; }
.hccb-opt--num { min-width: 34px; }
.hccb-finding { grid-template-columns: 20px 1fr; padding: 10px 12px; }
.hccb-finding__ic { width: 20px; height: 20px; border-radius: 6px; }
.hccb-preview__head { flex-direction: column; gap: 2px; }
}
/* ---- HostCommSportProfiles ---- */
/* ===================================================================
Sport profiles (src/pages/HostCommSportProfiles.jsx → SportProfiles)
Commissions ▾ leaf for GET /sportprofiles/ (SportProfilesController).
Page chrome comes from the Hrs* shell (.hrs-* block above); everything
here is only what that shell does not cover: the edit-window strip,
the typology chips, the tall sectioned form modal, the 30-rung ladder
editor and the GGR band grid. Prefix: hsp- · Iwakiri red = var(--p-*).
=================================================================== */
/* ---- edit-window strip (the client-side-only lock, stated up front) ---- */
.hrs-page .hsp-window {
display: flex; align-items: flex-start; gap: 10px;
margin: 0 0 12px; padding: 10px 13px;
border: 1px solid var(--border-default); border-left-width: 4px; border-radius: 8px;
background: var(--n-0); font-size: 12.5px; line-height: 1.5; color: var(--text-secondary);
}
.hrs-page .hsp-window > svg { flex: none; margin-top: 2px; }
.hrs-page .hsp-window b { color: var(--text-primary); }
.hrs-page .hsp-window code {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11.5px; background: #f4f5f8; border: 1px solid #e4e6ef; border-radius: 4px; padding: 0 4px;
}
.hrs-page .hsp-window--shut { border-left-color: var(--warn-500); background: var(--warn-50); }
.hrs-page .hsp-window--shut > svg { color: var(--warn-700); }
.hrs-page .hsp-window--open { border-left-color: var(--ok-500); }
.hrs-page .hsp-window--open > svg { color: var(--ok-600); }
.hrs-page .hsp-window__day {
margin-left: auto; flex: none; align-self: center;
font-size: 11px; font-weight: 700; white-space: nowrap;
color: var(--text-tertiary); border: 1px dashed var(--border-strong); border-radius: 999px; padding: 2px 9px;
}
/* ---- table cells ---- */
.hrs-page .hsp-id { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-secondary); }
.hrs-page .hsp-skin { font-weight: 600; color: #3f4254; }
.hrs-page .hsp-users {
display: inline-block; min-width: 34px; padding: 2px 9px; border-radius: 999px;
background: var(--p-50); border: 1px solid var(--p-100); color: var(--p-700);
font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.hrs-page .hsp-users--zero { background: var(--n-50); border-color: var(--border-default); color: var(--text-tertiary); }
.hrs-page .hsp-namelink {
display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
border: 0; background: none; padding: 0; cursor: pointer; text-align: left;
font-family: inherit; font-size: 13px; font-weight: 600; color: #3f4254;
}
.hrs-page .hsp-namelink:hover { color: var(--p-600); }
.hrs-page .hsp-namelink > svg { flex: none; opacity: .5; }
.hrs-page .hsp-namelink:hover > svg { opacity: 1; }
/* ---- typology chips ---- */
.hrs-page .hsp-tchip {
display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
padding: 3px 10px; border-radius: 6px; border: 1px solid var(--border-default); background: var(--n-50);
font-size: 12px; font-weight: 600; color: #3f4254; line-height: 1.35; text-align: left;
}
.hrs-page .hsp-tchip em { font-style: normal; font-size: 10.5px; font-weight: 500; opacity: .7; }
.hrs-page .hsp-tchip--t1 { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hrs-page .hsp-tchip--t3 { background: var(--warn-50); border-color: var(--warn-100); color: var(--warn-700); }
.hrs-page .hsp-tchip--t10 { background: var(--ok-50); border-color: var(--ok-100); color: var(--ok-700); }
/* ---- row actions ---- */
.hrs-page .hsp-acts { display: inline-flex; gap: 6px; justify-content: center; }
.hrs-page .hsp-act {
width: 30px; height: 30px; border: 0; border-radius: 6px; cursor: pointer;
display: grid; place-items: center; color: #fff;
}
.hrs-page .hsp-act--danger { background: #e9484a; }
.hrs-page .hsp-act--danger:hover { background: #d23c3e; }
.hrs-page .hsp-act--edit { background: var(--p-500); }
.hrs-page .hsp-act--edit:hover { background: var(--p-600); }
/* ---- mobile stacked cards (HrsTable renderCard) ---- */
.hrs-page .hsp-card__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 9px; }
.hrs-page .hsp-card__acts { display: flex; gap: 8px; border-top: 1px dashed var(--border-default); padding-top: 8px; }
.hrs-page .hsp-card__acts .btn { flex: 1; justify-content: center; }
.hrs-page .hsp-card__del { color: #d23c3e; }
/* ===================================================================
Form modal — tall sectioned editor, sticky footer, full screen ≤860px
=================================================================== */
.hrs-page .hsp-scrim { padding: 22px 16px; }
.hrs-page .hsp-modal {
width: min(760px, 96vw); max-height: calc(100vh - 44px);
display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
.hrs-page .hsp-modal--wide { width: min(1080px, 96vw); }
.hrs-page .hsp-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
padding: 16px 20px 13px; border-bottom: 1px solid var(--border-subtle); flex: none;
}
.hrs-page .hsp-modal__titles { min-width: 0; }
.hrs-page .hsp-modal__title { font-size: 18px; font-weight: 700; color: #2b2f3a; letter-spacing: -.01em; }
.hrs-page .hsp-modal__sub { margin-top: 3px; font-size: 12px; color: var(--text-tertiary); }
.hrs-page .hsp-modal__sub code, .hrs-page .hsp-modal__sub b { color: var(--text-secondary); }
.hrs-page .hsp-x {
flex: none; width: 30px; height: 30px; display: grid; place-items: center;
border: 1px solid var(--border-default); border-radius: 6px; background: var(--n-0);
color: var(--text-tertiary); cursor: pointer;
}
.hrs-page .hsp-x:hover { border-color: var(--p-300); color: var(--p-600); }
.hrs-page .hsp-modal__body { padding: 16px 20px 20px; overflow: auto; flex: 1 1 auto; }
.hrs-page .hsp-modal__foot {
display: flex; justify-content: flex-end; gap: 10px; flex: none;
padding: 12px 20px; border-top: 1px solid var(--border-subtle); background: var(--n-25);
}
.hrs-page .hsp-modal__foot .btn[disabled] { opacity: .55; cursor: not-allowed; }
/* ---- sections ---- */
.hrs-page .hsp-sec { border-top: 1px solid var(--border-subtle); padding: 14px 0 4px; }
.hrs-page .hsp-sec:first-of-type { border-top: 0; padding-top: 2px; }
.hrs-page .hsp-sec--muted { opacity: .92; }
.hrs-page .hsp-sec__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.hrs-page .hsp-sec__title {
font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--p-700);
}
.hrs-page .hsp-sec__note { font-size: 11.5px; color: var(--text-tertiary); }
/* ---- fields ---- */
.hrs-page .hsp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hrs-page .hsp-field { margin-bottom: 13px; min-width: 0; }
.hrs-page .hsp-label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: #3f4254; }
.hrs-page .hsp-req { color: var(--p-500); margin-left: 3px; }
.hrs-page .hsp-in {
font-family: inherit; font-size: 13px; color: #3f4254; background: var(--n-0);
border: 1px solid var(--border-default); border-radius: 5px; height: 34px; padding: 0 10px;
min-width: 0; font-variant-numeric: tabular-nums;
}
.hrs-page .hsp-in--full { width: 100%; }
.hrs-page .hsp-in:focus { outline: none; border-color: var(--p-400); box-shadow: var(--ring-focus); }
.hrs-page .hsp-in:disabled { background: var(--n-50); color: var(--text-tertiary); cursor: not-allowed; }
.hrs-page .hsp-in--ro { background: var(--n-50); color: var(--text-tertiary); text-align: center; }
.hrs-page .hsp-invalid { border-color: #e9484a; background: #fff7f7; }
.hrs-page .hsp-fielderr { margin-top: 4px; font-size: 11.5px; font-weight: 600; color: #d23c3e; }
.hrs-page .hsp-hint { margin-top: 6px; font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary); }
.hrs-page .hsp-hint code, .hrs-page .hsp-lock code, .hrs-page .hsp-thirdnote code,
.hrs-page .hsp-assigned code, .hrs-page .hsp-warn code {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11px; color: var(--text-secondary);
background: #f4f5f8; border: 1px solid #e9ebf1; border-radius: 4px; padding: 0 4px;
}
.hrs-page .hsp-hint--pin {
display: flex; align-items: flex-start; gap: 7px; margin: 0 0 12px;
padding: 8px 11px; border: 1px dashed var(--border-default); border-radius: 7px; background: var(--n-25);
}
.hrs-page .hsp-hint--pin > svg { flex: none; margin-top: 2px; color: var(--p-500); }
/* Every icon+prose callout on this page keeps its prose in ONE flex item, so inline /
inside it wrap as text instead of becoming flex items of their own. */
.hrs-page .hsp-hint--pin > div,
.hrs-page .hsp-warn > div,
.hrs-page .hsp-thirdnote > div { min-width: 0; }
/* ---- banners ---- */
.hrs-page .hsp-err {
display: flex; align-items: flex-start; gap: 8px;
font-size: 12.5px; font-weight: 600; color: #a3001b;
background: var(--err-50); border: 1px solid var(--err-100); border-radius: 7px; padding: 9px 12px;
}
.hrs-page .hsp-err--banner { margin-bottom: 14px; }
.hrs-page .hsp-err > svg { flex: none; margin-top: 1px; }
.hrs-page .hsp-lock {
margin-bottom: 16px; border: 1px solid var(--warn-100); border-left: 4px solid var(--warn-500);
border-radius: 8px; background: var(--warn-50); overflow: hidden;
}
.hrs-page .hsp-lock__head {
display: flex; align-items: center; gap: 8px; padding: 9px 13px;
font-size: 13px; font-weight: 700; color: #8a5a00; border-bottom: 1px solid var(--warn-100);
}
.hrs-page .hsp-lock__body { padding: 10px 13px 12px; font-size: 12.5px; line-height: 1.65; color: #6d5320; }
.hrs-page .hsp-lock__body ul { margin: 7px 0 7px 0; padding-left: 18px; }
.hrs-page .hsp-lock__body li { margin-bottom: 5px; }
.hrs-page .hsp-lock__body b { color: #4d3a12; }
.hrs-page .hsp-lock code { background: rgba(255,255,255,.7); border-color: #f0dcae; }
.hrs-page .hsp-warn {
display: flex; align-items: flex-start; gap: 7px; margin-top: 10px;
padding: 8px 11px; border-radius: 7px; line-height: 1.55;
background: var(--warn-50); border: 1px solid var(--warn-100); color: #8a5a00;
font-size: 11.5px; font-weight: 600;
}
.hrs-page .hsp-warn > svg { flex: none; margin-top: 1px; }
.hrs-page .hsp-warn b { color: #6b4400; }
.hrs-page .hsp-warn--soft { background: var(--n-25); border-color: var(--border-default); color: var(--text-secondary); }
.hrs-page .hsp-warn--soft > svg { color: var(--text-tertiary); }
/* ---- read-only "Users Assigned" footer of the edit form ---- */
.hrs-page .hsp-assigned {
display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
margin-top: 16px; padding: 10px 13px;
border: 1px solid var(--border-default); border-radius: 8px; background: var(--n-25);
font-size: 12.5px; color: var(--text-secondary);
}
.hrs-page .hsp-assigned > svg { color: var(--p-500); }
.hrs-page .hsp-assigned b { font-size: 15px; color: var(--p-700); }
.hrs-page .hsp-assigned span { font-size: 11.5px; color: var(--text-tertiary); }
/* ---- delete dialog ---- */
.hrs-page .hsp-dlgq { font-size: 14px; font-weight: 600; color: #2b2f3a; }
.hrs-page .hsp-dlgsub { margin-top: 5px; font-size: 12.5px; color: var(--text-tertiary); }
/* ===================================================================
30-rung ladder editor (misto_1 … misto_30, typology 1)
=================================================================== */
.hrs-page .hsp-lad { border: 1px solid var(--border-default); border-radius: 9px; padding: 12px; background: var(--n-25); }
.hrs-page .hsp-lad--ro { opacity: .8; }
.hrs-page .hsp-ladsum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-bottom: 11px; }
.hrs-page .hsp-ladsum__stat { display: flex; flex-direction: column; line-height: 1.3; }
.hrs-page .hsp-ladsum__stat span {
font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary);
}
.hrs-page .hsp-ladsum__stat b { font-size: 14px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.hrs-page .hsp-ladsum .hsp-warn { flex: 1 1 260px; margin-top: 0; }
/* rail — one column per rung, height ∝ percentage; click jumps to the input */
.hrs-page .hsp-rail {
display: flex; align-items: flex-end; gap: 2px; height: 92px;
padding: 6px 6px 0; background: var(--n-0);
border: 1px solid var(--border-default); border-bottom: 0; border-radius: 8px 8px 0 0;
}
.hrs-page .hsp-rail__rung {
flex: 1 1 0; min-width: 0; height: 100%; padding: 0; border: 0; background: none; cursor: pointer;
display: flex; align-items: flex-end; border-radius: 3px 3px 0 0;
}
.hrs-page .hsp-rail__rung:hover { background: var(--p-50); }
.hrs-page .hsp-rail__bar {
width: 100%; min-height: 2px; border-radius: 3px 3px 0 0;
background: linear-gradient(180deg, var(--p-400), var(--p-600));
transition: height .12s ease;
}
.hrs-page .hsp-rail__rung--zero { position: relative; }
.hrs-page .hsp-rail__rung--zero::after {
content: ""; position: absolute; left: 1px; right: 1px; bottom: 0; height: 2px;
background: repeating-linear-gradient(90deg, var(--border-strong) 0 2px, transparent 2px 4px);
}
.hrs-page .hsp-rail__rung--sel { background: var(--p-50); box-shadow: inset 0 0 0 1px var(--p-300); }
.hrs-page .hsp-rail__rung--sel .hsp-rail__bar { background: linear-gradient(180deg, var(--p-500), var(--p-800)); }
.hrs-page .hsp-railax {
position: relative; height: 17px; margin-bottom: 10px;
border: 1px solid var(--border-default); border-top: 0; border-radius: 0 0 8px 8px;
background: var(--n-0);
}
.hrs-page .hsp-railax span {
position: absolute; top: 2px; transform: translateX(-50%);
font-size: 9.5px; font-weight: 700; color: var(--text-tertiary); font-variant-numeric: tabular-nums;
}
/* rung grid — the 30 inputs themselves */
.hrs-page .hsp-rungs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.hrs-page .hsp-rung {
position: relative; padding: 5px 7px 6px; border-radius: 6px;
border: 1px solid var(--border-default); background: var(--n-0);
}
.hrs-page .hsp-rung--sel { border-color: var(--p-400); box-shadow: 0 0 0 2px color-mix(in oklab, var(--p-500) 14%, transparent); }
.hrs-page .hsp-rung--zero { background: var(--n-25); border-style: dashed; }
.hrs-page .hsp-rung__lab {
display: block; margin-bottom: 3px;
font-size: 10.5px; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.hrs-page .hsp-rung__lab em { font-style: normal; font-weight: 500; color: var(--text-tertiary); }
.hrs-page .hsp-rung__row { display: flex; align-items: center; gap: 3px; }
.hrs-page .hsp-rung__in {
width: 100%; min-width: 0; height: 27px; padding: 0 6px; text-align: right;
font-family: inherit; font-size: 12.5px; color: #3f4254; font-variant-numeric: tabular-nums;
border: 1px solid var(--border-default); border-radius: 4px; background: var(--n-0);
}
.hrs-page .hsp-rung__in:focus { outline: none; border-color: var(--p-400); box-shadow: var(--ring-focus); }
.hrs-page .hsp-rung__in:disabled { background: var(--n-50); cursor: not-allowed; }
.hrs-page .hsp-rung__pc { font-size: 10.5px; color: var(--text-tertiary); }
.hrs-page .hsp-rung__carry {
position: absolute; top: 3px; right: 4px; width: 18px; height: 16px;
display: grid; place-items: center; padding: 0; cursor: pointer;
border: 1px solid var(--border-default); border-radius: 4px; background: var(--n-0); color: var(--text-tertiary);
opacity: 0; transition: opacity .1s;
}
.hrs-page .hsp-rung:hover .hsp-rung__carry,
.hrs-page .hsp-rung:focus-within .hsp-rung__carry { opacity: 1; }
.hrs-page .hsp-rung__carry:hover { border-color: var(--p-300); color: var(--p-600); }
.hrs-page .hsp-rung__carry[disabled] { display: none; }
/* ===================================================================
GGR band ladder
=================================================================== */
.hrs-page .hsp-bands { border: 1px solid var(--border-default); border-radius: 9px; padding: 11px 12px 12px; background: var(--n-25); }
.hrs-page .hsp-bands__head,
.hrs-page .hsp-band { display: grid; grid-template-columns: 30px 1fr 1fr 132px; gap: 8px; align-items: center; }
.hrs-page .hsp-bands__head {
margin-bottom: 6px;
font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary);
}
.hrs-page .hsp-band { margin-bottom: 7px; }
.hrs-page .hsp-band--last { margin-bottom: 2px; }
.hrs-page .hsp-band__n {
display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
background: var(--p-50); border: 1px solid var(--p-100); color: var(--p-700);
font-size: 11.5px; font-weight: 700;
}
.hrs-page .hsp-band--err .hsp-in { border-color: #e9484a; background: #fff7f7; }
.hrs-page .hsp-band .hsp-in { width: 100%; }
.hrs-page .hsp-band__pc { display: flex; align-items: center; gap: 5px; }
.hrs-page .hsp-band__pc span { font-size: 12px; color: var(--text-tertiary); }
.hrs-page .hsp-band__pc--solo { max-width: 160px; }
.hrs-page .hsp-stored {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--border-default);
font-size: 11px; color: var(--text-tertiary);
}
.hrs-page .hsp-stored span { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.hrs-page .hsp-stored code {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11px; color: var(--text-secondary);
background: var(--n-0); border: 1px solid var(--border-default); border-radius: 4px; padding: 1px 6px;
}
.hrs-page .hsp-thirdnote {
display: flex; align-items: flex-start; gap: 7px; margin-top: 9px;
padding: 8px 11px; border-radius: 7px; line-height: 1.6;
background: var(--p-50); border: 1px solid var(--p-100); color: var(--p-700); font-size: 11.5px;
}
.hrs-page .hsp-thirdnote > svg { flex: none; margin-top: 2px; }
.hrs-page .hsp-thirdnote code { background: rgba(255,255,255,.75); border-color: var(--p-100); color: var(--p-700); }
/* ===================================================================
Responsive (brief §11)
=================================================================== */
@media (max-width: 1100px) {
/* Two-up fields stack before the modal itself has to shrink. */
.hrs-page .hsp-grid2 { grid-template-columns: 1fr; gap: 0; }
.hrs-page .hsp-rungs { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.hrs-page .hsp-window__day { margin-left: 0; }
}
@media (max-width: 860px) {
/* Modal goes full-screen; head and footer stay pinned, body scrolls. */
.hrs-page .hsp-scrim { padding: 0; place-items: stretch; }
.hrs-page .hsp-modal,
.hrs-page .hsp-modal--wide {
width: 100vw; max-width: 100vw; min-height: 100vh; max-height: 100vh; border-radius: 0;
}
.hrs-page .hsp-modal__head { padding: 13px 15px 11px; }
.hrs-page .hsp-modal__title { font-size: 16px; }
.hrs-page .hsp-modal__body { padding: 13px 15px 18px; -webkit-overflow-scrolling: touch; }
.hrs-page .hsp-modal__foot { padding: 11px 15px; }
.hrs-page .hsp-modal__foot .btn { flex: 1; justify-content: center; }
/* Edit-window strip stacks so the sentence stays readable. */
.hrs-page .hsp-window { flex-wrap: wrap; }
.hrs-page .hsp-window__day { margin-left: 22px; align-self: flex-start; }
/* Ladder: shorter rail (still shows the curve), fewer + wider rungs,
and the carry button is always visible because there is no hover. */
.hrs-page .hsp-rail { height: 68px; gap: 1px; }
.hrs-page .hsp-ladsum { gap: 8px 16px; }
.hrs-page .hsp-rungs { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.hrs-page .hsp-rung__carry { opacity: 1; }
/* GGR bands: label the columns per row instead of relying on the header. */
.hrs-page .hsp-bands__head { display: none; }
.hrs-page .hsp-band { grid-template-columns: 26px 1fr 1fr; grid-template-areas: "n from to" "n pc pc"; row-gap: 6px; }
.hrs-page .hsp-band__n { grid-area: n; align-self: start; }
.hrs-page .hsp-band__pc { grid-area: pc; max-width: none; }
.hrs-page .hsp-band__pc::before {
content: "Commission"; font-size: 10px; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; color: var(--text-tertiary);
}
.hrs-page .hsp-stored { flex-direction: column; align-items: flex-start; }
.hrs-page .hsp-stored code { max-width: 100%; overflow-x: auto; }
/* Typology chip goes back to one line inside the mobile card. */
.hrs-page .hsp-card__chips .hsp-tchip { flex-direction: row; align-items: center; gap: 6px; }
}
@media (max-width: 560px) {
.hrs-page .hsp-rail { height: 56px; }
.hrs-page .hsp-rungs { grid-template-columns: repeat(3, 1fr); }
.hrs-page .hsp-ladsum__stat { flex: 1 1 44%; }
.hrs-page .hsp-lock__body { font-size: 12px; }
.hrs-page .hsp-window { font-size: 12px; }
}
/* ---- edit-window strip (the client-side-only lock, stated up front) ---- */
.hrs-page .hsp-window {
display: flex; align-items: flex-start; gap: 10px;
margin: 0 0 12px; padding: 10px 13px;
border: 1px solid var(--border-default); border-left-width: 4px; border-radius: 8px;
background: var(--n-0); font-size: 12.5px; line-height: 1.5; color: var(--text-secondary);
}
.hrs-page .hsp-window > svg { flex: none; margin-top: 2px; }
.hrs-page .hsp-window b { color: var(--text-primary); }
.hrs-page .hsp-window code {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11.5px; background: #f4f5f8; border: 1px solid #e4e6ef; border-radius: 4px; padding: 0 4px;
}
.hrs-page .hsp-window--shut { border-left-color: var(--warn-500); background: var(--warn-50); }
.hrs-page .hsp-window--shut > svg { color: var(--warn-700); }
.hrs-page .hsp-window--open { border-left-color: var(--ok-500); }
.hrs-page .hsp-window--open > svg { color: var(--ok-600); }
.hrs-page .hsp-window__day {
margin-left: auto; flex: none; align-self: center;
font-size: 11px; font-weight: 700; white-space: nowrap;
color: var(--text-tertiary); border: 1px dashed var(--border-strong); border-radius: 999px; padding: 2px 9px;
}
/* ---- table cells ---- */
.hrs-page .hsp-id { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-secondary); }
.hrs-page .hsp-skin { font-weight: 600; color: #3f4254; }
.hrs-page .hsp-users {
display: inline-block; min-width: 34px; padding: 2px 9px; border-radius: 999px;
background: var(--p-50); border: 1px solid var(--p-100); color: var(--p-700);
font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.hrs-page .hsp-users--zero { background: var(--n-50); border-color: var(--border-default); color: var(--text-tertiary); }
.hrs-page .hsp-namelink {
display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
border: 0; background: none; padding: 0; cursor: pointer; text-align: left;
font-family: inherit; font-size: 13px; font-weight: 600; color: #3f4254;
}
.hrs-page .hsp-namelink:hover { color: var(--p-600); }
.hrs-page .hsp-namelink > svg { flex: none; opacity: .5; }
.hrs-page .hsp-namelink:hover > svg { opacity: 1; }
/* ---- typology chips ---- */
.hrs-page .hsp-tchip {
display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
padding: 3px 10px; border-radius: 6px; border: 1px solid var(--border-default); background: var(--n-50);
font-size: 12px; font-weight: 600; color: #3f4254; line-height: 1.35; text-align: left;
}
.hrs-page .hsp-tchip em { font-style: normal; font-size: 10.5px; font-weight: 500; opacity: .7; }
.hrs-page .hsp-tchip--t1 { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hrs-page .hsp-tchip--t3 { background: var(--warn-50); border-color: var(--warn-100); color: var(--warn-700); }
.hrs-page .hsp-tchip--t10 { background: var(--ok-50); border-color: var(--ok-100); color: var(--ok-700); }
/* ---- row actions ---- */
.hrs-page .hsp-acts { display: inline-flex; gap: 6px; justify-content: center; }
.hrs-page .hsp-act {
width: 30px; height: 30px; border: 0; border-radius: 6px; cursor: pointer;
display: grid; place-items: center; color: #fff;
}
.hrs-page .hsp-act--danger { background: #e9484a; }
.hrs-page .hsp-act--danger:hover { background: #d23c3e; }
.hrs-page .hsp-act--edit { background: var(--p-500); }
.hrs-page .hsp-act--edit:hover { background: var(--p-600); }
/* ---- mobile stacked cards (HrsTable renderCard) ---- */
.hrs-page .hsp-card__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 9px; }
.hrs-page .hsp-card__acts { display: flex; gap: 8px; border-top: 1px dashed var(--border-default); padding-top: 8px; }
.hrs-page .hsp-card__acts .btn { flex: 1; justify-content: center; }
.hrs-page .hsp-card__del { color: #d23c3e; }
/* ===================================================================
Form modal — tall sectioned editor, sticky footer, full screen ≤860px
=================================================================== */
.hrs-page .hsp-scrim { padding: 22px 16px; }
.hrs-page .hsp-modal {
width: min(760px, 96vw); max-height: calc(100vh - 44px);
display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
.hrs-page .hsp-modal--wide { width: min(1080px, 96vw); }
.hrs-page .hsp-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
padding: 16px 20px 13px; border-bottom: 1px solid var(--border-subtle); flex: none;
}
.hrs-page .hsp-modal__titles { min-width: 0; }
.hrs-page .hsp-modal__title { font-size: 18px; font-weight: 700; color: #2b2f3a; letter-spacing: -.01em; }
.hrs-page .hsp-modal__sub { margin-top: 3px; font-size: 12px; color: var(--text-tertiary); }
.hrs-page .hsp-modal__sub code, .hrs-page .hsp-modal__sub b { color: var(--text-secondary); }
.hrs-page .hsp-x {
flex: none; width: 30px; height: 30px; display: grid; place-items: center;
border: 1px solid var(--border-default); border-radius: 6px; background: var(--n-0);
color: var(--text-tertiary); cursor: pointer;
}
.hrs-page .hsp-x:hover { border-color: var(--p-300); color: var(--p-600); }
.hrs-page .hsp-modal__body { padding: 16px 20px 20px; overflow: auto; flex: 1 1 auto; }
.hrs-page .hsp-modal__foot {
display: flex; justify-content: flex-end; gap: 10px; flex: none;
padding: 12px 20px; border-top: 1px solid var(--border-subtle); background: var(--n-25);
}
.hrs-page .hsp-modal__foot .btn[disabled] { opacity: .55; cursor: not-allowed; }
/* ---- sections ---- */
.hrs-page .hsp-sec { border-top: 1px solid var(--border-subtle); padding: 14px 0 4px; }
.hrs-page .hsp-sec:first-of-type { border-top: 0; padding-top: 2px; }
.hrs-page .hsp-sec--muted { opacity: .92; }
.hrs-page .hsp-sec__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.hrs-page .hsp-sec__title {
font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--p-700);
}
.hrs-page .hsp-sec__note { font-size: 11.5px; color: var(--text-tertiary); }
/* ---- fields ---- */
.hrs-page .hsp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hrs-page .hsp-field { margin-bottom: 13px; min-width: 0; }
.hrs-page .hsp-label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: #3f4254; }
.hrs-page .hsp-req { color: var(--p-500); margin-left: 3px; }
.hrs-page .hsp-in {
font-family: inherit; font-size: 13px; color: #3f4254; background: var(--n-0);
border: 1px solid var(--border-default); border-radius: 5px; height: 34px; padding: 0 10px;
min-width: 0; font-variant-numeric: tabular-nums;
}
.hrs-page .hsp-in--full { width: 100%; }
.hrs-page .hsp-in:focus { outline: none; border-color: var(--p-400); box-shadow: var(--ring-focus); }
.hrs-page .hsp-in:disabled { background: var(--n-50); color: var(--text-tertiary); cursor: not-allowed; }
.hrs-page .hsp-in--ro { background: var(--n-50); color: var(--text-tertiary); text-align: center; }
.hrs-page .hsp-invalid { border-color: #e9484a; background: #fff7f7; }
.hrs-page .hsp-fielderr { margin-top: 4px; font-size: 11.5px; font-weight: 600; color: #d23c3e; }
.hrs-page .hsp-hint { margin-top: 6px; font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary); }
.hrs-page .hsp-hint code, .hrs-page .hsp-lock code, .hrs-page .hsp-thirdnote code,
.hrs-page .hsp-assigned code, .hrs-page .hsp-warn code {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11px; color: var(--text-secondary);
background: #f4f5f8; border: 1px solid #e9ebf1; border-radius: 4px; padding: 0 4px;
}
.hrs-page .hsp-hint--pin {
display: flex; align-items: flex-start; gap: 7px; margin: 0 0 12px;
padding: 8px 11px; border: 1px dashed var(--border-default); border-radius: 7px; background: var(--n-25);
}
.hrs-page .hsp-hint--pin > svg { flex: none; margin-top: 2px; color: var(--p-500); }
/* Every icon+prose callout on this page keeps its prose in ONE flex item, so inline /
inside it wrap as text instead of becoming flex items of their own. */
.hrs-page .hsp-hint--pin > div,
.hrs-page .hsp-warn > div,
.hrs-page .hsp-thirdnote > div { min-width: 0; }
/* ---- banners ---- */
.hrs-page .hsp-err {
display: flex; align-items: flex-start; gap: 8px;
font-size: 12.5px; font-weight: 600; color: #a3001b;
background: var(--err-50); border: 1px solid var(--err-100); border-radius: 7px; padding: 9px 12px;
}
.hrs-page .hsp-err--banner { margin-bottom: 14px; }
.hrs-page .hsp-err > svg { flex: none; margin-top: 1px; }
.hrs-page .hsp-lock {
margin-bottom: 16px; border: 1px solid var(--warn-100); border-left: 4px solid var(--warn-500);
border-radius: 8px; background: var(--warn-50); overflow: hidden;
}
.hrs-page .hsp-lock__head {
display: flex; align-items: center; gap: 8px; padding: 9px 13px;
font-size: 13px; font-weight: 700; color: #8a5a00; border-bottom: 1px solid var(--warn-100);
}
.hrs-page .hsp-lock__body { padding: 10px 13px 12px; font-size: 12.5px; line-height: 1.65; color: #6d5320; }
.hrs-page .hsp-lock__body ul { margin: 7px 0 7px 0; padding-left: 18px; }
.hrs-page .hsp-lock__body li { margin-bottom: 5px; }
.hrs-page .hsp-lock__body b { color: #4d3a12; }
.hrs-page .hsp-lock code { background: rgba(255,255,255,.7); border-color: #f0dcae; }
.hrs-page .hsp-warn {
display: flex; align-items: flex-start; gap: 7px; margin-top: 10px;
padding: 8px 11px; border-radius: 7px; line-height: 1.55;
background: var(--warn-50); border: 1px solid var(--warn-100); color: #8a5a00;
font-size: 11.5px; font-weight: 600;
}
.hrs-page .hsp-warn > svg { flex: none; margin-top: 1px; }
.hrs-page .hsp-warn b { color: #6b4400; }
.hrs-page .hsp-warn--soft { background: var(--n-25); border-color: var(--border-default); color: var(--text-secondary); }
.hrs-page .hsp-warn--soft > svg { color: var(--text-tertiary); }
/* ---- read-only "Users Assigned" footer of the edit form ---- */
.hrs-page .hsp-assigned {
display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
margin-top: 16px; padding: 10px 13px;
border: 1px solid var(--border-default); border-radius: 8px; background: var(--n-25);
font-size: 12.5px; color: var(--text-secondary);
}
.hrs-page .hsp-assigned > svg { color: var(--p-500); }
.hrs-page .hsp-assigned b { font-size: 15px; color: var(--p-700); }
.hrs-page .hsp-assigned span { font-size: 11.5px; color: var(--text-tertiary); }
/* ---- delete dialog ---- */
.hrs-page .hsp-dlgq { font-size: 14px; font-weight: 600; color: #2b2f3a; }
.hrs-page .hsp-dlgsub { margin-top: 5px; font-size: 12.5px; color: var(--text-tertiary); }
/* ===================================================================
30-rung ladder editor (misto_1 … misto_30, typology 1)
=================================================================== */
.hrs-page .hsp-lad { border: 1px solid var(--border-default); border-radius: 9px; padding: 12px; background: var(--n-25); }
.hrs-page .hsp-lad--ro { opacity: .8; }
.hrs-page .hsp-ladsum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-bottom: 11px; }
.hrs-page .hsp-ladsum__stat { display: flex; flex-direction: column; line-height: 1.3; }
.hrs-page .hsp-ladsum__stat span {
font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary);
}
.hrs-page .hsp-ladsum__stat b { font-size: 14px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.hrs-page .hsp-ladsum .hsp-warn { flex: 1 1 260px; margin-top: 0; }
/* rail — one column per rung, height ∝ percentage; click jumps to the input */
.hrs-page .hsp-rail {
display: flex; align-items: flex-end; gap: 2px; height: 92px;
padding: 6px 6px 0; background: var(--n-0);
border: 1px solid var(--border-default); border-bottom: 0; border-radius: 8px 8px 0 0;
}
.hrs-page .hsp-rail__rung {
flex: 1 1 0; min-width: 0; height: 100%; padding: 0; border: 0; background: none; cursor: pointer;
display: flex; align-items: flex-end; border-radius: 3px 3px 0 0;
}
.hrs-page .hsp-rail__rung:hover { background: var(--p-50); }
.hrs-page .hsp-rail__bar {
width: 100%; min-height: 2px; border-radius: 3px 3px 0 0;
background: linear-gradient(180deg, var(--p-400), var(--p-600));
transition: height .12s ease;
}
.hrs-page .hsp-rail__rung--zero { position: relative; }
.hrs-page .hsp-rail__rung--zero::after {
content: ""; position: absolute; left: 1px; right: 1px; bottom: 0; height: 2px;
background: repeating-linear-gradient(90deg, var(--border-strong) 0 2px, transparent 2px 4px);
}
.hrs-page .hsp-rail__rung--sel { background: var(--p-50); box-shadow: inset 0 0 0 1px var(--p-300); }
.hrs-page .hsp-rail__rung--sel .hsp-rail__bar { background: linear-gradient(180deg, var(--p-500), var(--p-800)); }
.hrs-page .hsp-railax {
position: relative; height: 17px; margin-bottom: 10px;
border: 1px solid var(--border-default); border-top: 0; border-radius: 0 0 8px 8px;
background: var(--n-0);
}
.hrs-page .hsp-railax span {
position: absolute; top: 2px; transform: translateX(-50%);
font-size: 9.5px; font-weight: 700; color: var(--text-tertiary); font-variant-numeric: tabular-nums;
}
/* rung grid — the 30 inputs themselves */
.hrs-page .hsp-rungs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.hrs-page .hsp-rung {
position: relative; padding: 5px 7px 6px; border-radius: 6px;
border: 1px solid var(--border-default); background: var(--n-0);
}
.hrs-page .hsp-rung--sel { border-color: var(--p-400); box-shadow: 0 0 0 2px color-mix(in oklab, var(--p-500) 14%, transparent); }
.hrs-page .hsp-rung--zero { background: var(--n-25); border-style: dashed; }
.hrs-page .hsp-rung__lab {
display: block; margin-bottom: 3px;
font-size: 10.5px; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.hrs-page .hsp-rung__lab em { font-style: normal; font-weight: 500; color: var(--text-tertiary); }
.hrs-page .hsp-rung__row { display: flex; align-items: center; gap: 3px; }
.hrs-page .hsp-rung__in {
width: 100%; min-width: 0; height: 27px; padding: 0 6px; text-align: right;
font-family: inherit; font-size: 12.5px; color: #3f4254; font-variant-numeric: tabular-nums;
border: 1px solid var(--border-default); border-radius: 4px; background: var(--n-0);
}
.hrs-page .hsp-rung__in:focus { outline: none; border-color: var(--p-400); box-shadow: var(--ring-focus); }
.hrs-page .hsp-rung__in:disabled { background: var(--n-50); cursor: not-allowed; }
.hrs-page .hsp-rung__pc { font-size: 10.5px; color: var(--text-tertiary); }
.hrs-page .hsp-rung__carry {
position: absolute; top: 3px; right: 4px; width: 18px; height: 16px;
display: grid; place-items: center; padding: 0; cursor: pointer;
border: 1px solid var(--border-default); border-radius: 4px; background: var(--n-0); color: var(--text-tertiary);
opacity: 0; transition: opacity .1s;
}
.hrs-page .hsp-rung:hover .hsp-rung__carry,
.hrs-page .hsp-rung:focus-within .hsp-rung__carry { opacity: 1; }
.hrs-page .hsp-rung__carry:hover { border-color: var(--p-300); color: var(--p-600); }
.hrs-page .hsp-rung__carry[disabled] { display: none; }
/* ===================================================================
GGR band ladder
=================================================================== */
.hrs-page .hsp-bands { border: 1px solid var(--border-default); border-radius: 9px; padding: 11px 12px 12px; background: var(--n-25); }
.hrs-page .hsp-bands__head,
.hrs-page .hsp-band { display: grid; grid-template-columns: 30px 1fr 1fr 132px; gap: 8px; align-items: center; }
.hrs-page .hsp-bands__head {
margin-bottom: 6px;
font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary);
}
.hrs-page .hsp-band { margin-bottom: 7px; }
.hrs-page .hsp-band--last { margin-bottom: 2px; }
.hrs-page .hsp-band__n {
display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
background: var(--p-50); border: 1px solid var(--p-100); color: var(--p-700);
font-size: 11.5px; font-weight: 700;
}
.hrs-page .hsp-band--err .hsp-in { border-color: #e9484a; background: #fff7f7; }
.hrs-page .hsp-band .hsp-in { width: 100%; }
.hrs-page .hsp-band__pc { display: flex; align-items: center; gap: 5px; }
.hrs-page .hsp-band__pc span { font-size: 12px; color: var(--text-tertiary); }
.hrs-page .hsp-band__pc--solo { max-width: 160px; }
.hrs-page .hsp-stored {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--border-default);
font-size: 11px; color: var(--text-tertiary);
}
.hrs-page .hsp-stored span { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.hrs-page .hsp-stored code {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11px; color: var(--text-secondary);
background: var(--n-0); border: 1px solid var(--border-default); border-radius: 4px; padding: 1px 6px;
}
.hrs-page .hsp-thirdnote {
display: flex; align-items: flex-start; gap: 7px; margin-top: 9px;
padding: 8px 11px; border-radius: 7px; line-height: 1.6;
background: var(--p-50); border: 1px solid var(--p-100); color: var(--p-700); font-size: 11.5px;
}
.hrs-page .hsp-thirdnote > svg { flex: none; margin-top: 2px; }
.hrs-page .hsp-thirdnote code { background: rgba(255,255,255,.75); border-color: var(--p-100); color: var(--p-700); }
/* ===================================================================
Responsive (brief §11)
=================================================================== */
@media (max-width: 1100px) {
/* Two-up fields stack before the modal itself has to shrink. */
.hrs-page .hsp-grid2 { grid-template-columns: 1fr; gap: 0; }
.hrs-page .hsp-rungs { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.hrs-page .hsp-window__day { margin-left: 0; }
}
@media (max-width: 860px) {
/* Modal goes full-screen; head and footer stay pinned, body scrolls. */
.hrs-page .hsp-scrim { padding: 0; place-items: stretch; }
.hrs-page .hsp-modal,
.hrs-page .hsp-modal--wide {
width: 100vw; max-width: 100vw; min-height: 100vh; max-height: 100vh; border-radius: 0;
}
.hrs-page .hsp-modal__head { padding: 13px 15px 11px; }
.hrs-page .hsp-modal__title { font-size: 16px; }
.hrs-page .hsp-modal__body { padding: 13px 15px 18px; -webkit-overflow-scrolling: touch; }
.hrs-page .hsp-modal__foot { padding: 11px 15px; }
.hrs-page .hsp-modal__foot .btn { flex: 1; justify-content: center; }
/* Edit-window strip stacks so the sentence stays readable. */
.hrs-page .hsp-window { flex-wrap: wrap; }
.hrs-page .hsp-window__day { margin-left: 22px; align-self: flex-start; }
/* Ladder: shorter rail (still shows the curve), fewer + wider rungs,
and the carry button is always visible because there is no hover. */
.hrs-page .hsp-rail { height: 68px; gap: 1px; }
.hrs-page .hsp-ladsum { gap: 8px 16px; }
.hrs-page .hsp-rungs { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.hrs-page .hsp-rung__carry { opacity: 1; }
/* GGR bands: label the columns per row instead of relying on the header. */
.hrs-page .hsp-bands__head { display: none; }
.hrs-page .hsp-band { grid-template-columns: 26px 1fr 1fr; grid-template-areas: "n from to" "n pc pc"; row-gap: 6px; }
.hrs-page .hsp-band__n { grid-area: n; align-self: start; }
.hrs-page .hsp-band__pc { grid-area: pc; max-width: none; }
.hrs-page .hsp-band__pc::before {
content: "Commission"; font-size: 10px; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; color: var(--text-tertiary);
}
.hrs-page .hsp-stored { flex-direction: column; align-items: flex-start; }
.hrs-page .hsp-stored code { max-width: 100%; overflow-x: auto; }
/* Typology chip goes back to one line inside the mobile card. */
.hrs-page .hsp-card__chips .hsp-tchip { flex-direction: row; align-items: center; gap: 6px; }
}
@media (max-width: 560px) {
.hrs-page .hsp-rail { height: 56px; }
.hrs-page .hsp-rungs { grid-template-columns: repeat(3, 1fr); }
.hrs-page .hsp-ladsum__stat { flex: 1 1 44%; }
.hrs-page .hsp-lock__body { font-size: 12px; }
.hrs-page .hsp-window { font-size: 12px; }
}
/* ---- edit-window strip (the client-side-only lock, stated up front) ---- */
.hrs-page .hsp-window {
display: flex; align-items: flex-start; gap: 10px;
margin: 0 0 12px; padding: 10px 13px;
border: 1px solid var(--border-default); border-left-width: 4px; border-radius: 8px;
background: var(--n-0); font-size: 12.5px; line-height: 1.5; color: var(--text-secondary);
}
.hrs-page .hsp-window > svg { flex: none; margin-top: 2px; }
.hrs-page .hsp-window b { color: var(--text-primary); }
.hrs-page .hsp-window code {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11.5px; background: #f4f5f8; border: 1px solid #e4e6ef; border-radius: 4px; padding: 0 4px;
}
.hrs-page .hsp-window--shut { border-left-color: var(--warn-500); background: var(--warn-50); }
.hrs-page .hsp-window--shut > svg { color: var(--warn-700); }
.hrs-page .hsp-window--open { border-left-color: var(--ok-500); }
.hrs-page .hsp-window--open > svg { color: var(--ok-600); }
.hrs-page .hsp-window__day {
margin-left: auto; flex: none; align-self: center;
font-size: 11px; font-weight: 700; white-space: nowrap;
color: var(--text-tertiary); border: 1px dashed var(--border-strong); border-radius: 999px; padding: 2px 9px;
}
/* ---- table cells ---- */
.hrs-page .hsp-id { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-secondary); }
.hrs-page .hsp-skin { font-weight: 600; color: #3f4254; }
.hrs-page .hsp-users {
display: inline-block; min-width: 34px; padding: 2px 9px; border-radius: 999px;
background: var(--p-50); border: 1px solid var(--p-100); color: var(--p-700);
font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.hrs-page .hsp-users--zero { background: var(--n-50); border-color: var(--border-default); color: var(--text-tertiary); }
.hrs-page .hsp-namelink {
display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
border: 0; background: none; padding: 0; cursor: pointer; text-align: left;
font-family: inherit; font-size: 13px; font-weight: 600; color: #3f4254;
}
.hrs-page .hsp-namelink:hover { color: var(--p-600); }
.hrs-page .hsp-namelink > svg { flex: none; opacity: .5; }
.hrs-page .hsp-namelink:hover > svg { opacity: 1; }
/* ---- typology chips ---- */
.hrs-page .hsp-tchip {
display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
padding: 3px 10px; border-radius: 6px; border: 1px solid var(--border-default); background: var(--n-50);
font-size: 12px; font-weight: 600; color: #3f4254; line-height: 1.35; text-align: left;
}
.hrs-page .hsp-tchip em { font-style: normal; font-size: 10.5px; font-weight: 500; opacity: .7; }
.hrs-page .hsp-tchip--t1 { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hrs-page .hsp-tchip--t3 { background: var(--warn-50); border-color: var(--warn-100); color: var(--warn-700); }
.hrs-page .hsp-tchip--t10 { background: var(--ok-50); border-color: var(--ok-100); color: var(--ok-700); }
/* ---- row actions ---- */
.hrs-page .hsp-acts { display: inline-flex; gap: 6px; justify-content: center; }
.hrs-page .hsp-act {
width: 30px; height: 30px; border: 0; border-radius: 6px; cursor: pointer;
display: grid; place-items: center; color: #fff;
}
.hrs-page .hsp-act--danger { background: #e9484a; }
.hrs-page .hsp-act--danger:hover { background: #d23c3e; }
.hrs-page .hsp-act--edit { background: var(--p-500); }
.hrs-page .hsp-act--edit:hover { background: var(--p-600); }
/* ---- mobile stacked cards (HrsTable renderCard) ---- */
.hrs-page .hsp-card__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 9px; }
.hrs-page .hsp-card__acts { display: flex; gap: 8px; border-top: 1px dashed var(--border-default); padding-top: 8px; }
.hrs-page .hsp-card__acts .btn { flex: 1; justify-content: center; }
.hrs-page .hsp-card__del { color: #d23c3e; }
/* ===================================================================
Form modal — tall sectioned editor, sticky footer, full screen ≤860px
=================================================================== */
.hrs-page .hsp-scrim { padding: 22px 16px; }
.hrs-page .hsp-modal {
width: min(760px, 96vw); max-height: calc(100vh - 44px);
display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
.hrs-page .hsp-modal--wide { width: min(1080px, 96vw); }
.hrs-page .hsp-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
padding: 16px 20px 13px; border-bottom: 1px solid var(--border-subtle); flex: none;
}
.hrs-page .hsp-modal__titles { min-width: 0; }
.hrs-page .hsp-modal__title { font-size: 18px; font-weight: 700; color: #2b2f3a; letter-spacing: -.01em; }
.hrs-page .hsp-modal__sub { margin-top: 3px; font-size: 12px; color: var(--text-tertiary); }
.hrs-page .hsp-modal__sub code, .hrs-page .hsp-modal__sub b { color: var(--text-secondary); }
.hrs-page .hsp-x {
flex: none; width: 30px; height: 30px; display: grid; place-items: center;
border: 1px solid var(--border-default); border-radius: 6px; background: var(--n-0);
color: var(--text-tertiary); cursor: pointer;
}
.hrs-page .hsp-x:hover { border-color: var(--p-300); color: var(--p-600); }
.hrs-page .hsp-modal__body { padding: 16px 20px 20px; overflow: auto; flex: 1 1 auto; }
.hrs-page .hsp-modal__foot {
display: flex; justify-content: flex-end; gap: 10px; flex: none;
padding: 12px 20px; border-top: 1px solid var(--border-subtle); background: var(--n-25);
}
.hrs-page .hsp-modal__foot .btn[disabled] { opacity: .55; cursor: not-allowed; }
/* ---- sections ---- */
.hrs-page .hsp-sec { border-top: 1px solid var(--border-subtle); padding: 14px 0 4px; }
.hrs-page .hsp-sec:first-of-type { border-top: 0; padding-top: 2px; }
.hrs-page .hsp-sec--muted { opacity: .92; }
.hrs-page .hsp-sec__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.hrs-page .hsp-sec__title {
font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--p-700);
}
.hrs-page .hsp-sec__note { font-size: 11.5px; color: var(--text-tertiary); }
/* ---- fields ---- */
.hrs-page .hsp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hrs-page .hsp-field { margin-bottom: 13px; min-width: 0; }
.hrs-page .hsp-label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: #3f4254; }
.hrs-page .hsp-req { color: var(--p-500); margin-left: 3px; }
.hrs-page .hsp-in {
font-family: inherit; font-size: 13px; color: #3f4254; background: var(--n-0);
border: 1px solid var(--border-default); border-radius: 5px; height: 34px; padding: 0 10px;
min-width: 0; font-variant-numeric: tabular-nums;
}
.hrs-page .hsp-in--full { width: 100%; }
.hrs-page .hsp-in:focus { outline: none; border-color: var(--p-400); box-shadow: var(--ring-focus); }
.hrs-page .hsp-in:disabled { background: var(--n-50); color: var(--text-tertiary); cursor: not-allowed; }
.hrs-page .hsp-in--ro { background: var(--n-50); color: var(--text-tertiary); text-align: center; }
.hrs-page .hsp-invalid { border-color: #e9484a; background: #fff7f7; }
.hrs-page .hsp-fielderr { margin-top: 4px; font-size: 11.5px; font-weight: 600; color: #d23c3e; }
.hrs-page .hsp-hint { margin-top: 6px; font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary); }
.hrs-page .hsp-hint code, .hrs-page .hsp-lock code, .hrs-page .hsp-thirdnote code,
.hrs-page .hsp-assigned code, .hrs-page .hsp-warn code {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11px; color: var(--text-secondary);
background: #f4f5f8; border: 1px solid #e9ebf1; border-radius: 4px; padding: 0 4px;
}
.hrs-page .hsp-hint--pin {
display: flex; align-items: flex-start; gap: 7px; margin: 0 0 12px;
padding: 8px 11px; border: 1px dashed var(--border-default); border-radius: 7px; background: var(--n-25);
}
.hrs-page .hsp-hint--pin > svg { flex: none; margin-top: 2px; color: var(--p-500); }
/* ---- banners ---- */
.hrs-page .hsp-err {
display: flex; align-items: flex-start; gap: 8px;
font-size: 12.5px; font-weight: 600; color: #a3001b;
background: var(--err-50); border: 1px solid var(--err-100); border-radius: 7px; padding: 9px 12px;
}
.hrs-page .hsp-err--banner { margin-bottom: 14px; }
.hrs-page .hsp-err > svg { flex: none; margin-top: 1px; }
.hrs-page .hsp-lock {
margin-bottom: 16px; border: 1px solid var(--warn-100); border-left: 4px solid var(--warn-500);
border-radius: 8px; background: var(--warn-50); overflow: hidden;
}
.hrs-page .hsp-lock__head {
display: flex; align-items: center; gap: 8px; padding: 9px 13px;
font-size: 13px; font-weight: 700; color: #8a5a00; border-bottom: 1px solid var(--warn-100);
}
.hrs-page .hsp-lock__body { padding: 10px 13px 12px; font-size: 12.5px; line-height: 1.65; color: #6d5320; }
.hrs-page .hsp-lock__body ul { margin: 7px 0 7px 0; padding-left: 18px; }
.hrs-page .hsp-lock__body li { margin-bottom: 5px; }
.hrs-page .hsp-lock__body b { color: #4d3a12; }
.hrs-page .hsp-lock code { background: rgba(255,255,255,.7); border-color: #f0dcae; }
.hrs-page .hsp-warn {
display: flex; align-items: flex-start; gap: 7px; margin-top: 10px;
padding: 8px 11px; border-radius: 7px; line-height: 1.55;
background: var(--warn-50); border: 1px solid var(--warn-100); color: #8a5a00;
font-size: 11.5px; font-weight: 600;
}
.hrs-page .hsp-warn > svg { flex: none; margin-top: 1px; }
.hrs-page .hsp-warn b { color: #6b4400; }
.hrs-page .hsp-warn--soft { background: var(--n-25); border-color: var(--border-default); color: var(--text-secondary); }
.hrs-page .hsp-warn--soft > svg { color: var(--text-tertiary); }
/* ---- read-only "Users Assigned" footer of the edit form ---- */
.hrs-page .hsp-assigned {
display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
margin-top: 16px; padding: 10px 13px;
border: 1px solid var(--border-default); border-radius: 8px; background: var(--n-25);
font-size: 12.5px; color: var(--text-secondary);
}
.hrs-page .hsp-assigned > svg { color: var(--p-500); }
.hrs-page .hsp-assigned b { font-size: 15px; color: var(--p-700); }
.hrs-page .hsp-assigned span { font-size: 11.5px; color: var(--text-tertiary); }
/* ---- delete dialog ---- */
.hrs-page .hsp-dlgq { font-size: 14px; font-weight: 600; color: #2b2f3a; }
.hrs-page .hsp-dlgsub { margin-top: 5px; font-size: 12.5px; color: var(--text-tertiary); }
/* ===================================================================
30-rung ladder editor (misto_1 … misto_30, typology 1)
=================================================================== */
.hrs-page .hsp-lad { border: 1px solid var(--border-default); border-radius: 9px; padding: 12px; background: var(--n-25); }
.hrs-page .hsp-lad--ro { opacity: .8; }
.hrs-page .hsp-ladsum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-bottom: 11px; }
.hrs-page .hsp-ladsum__stat { display: flex; flex-direction: column; line-height: 1.3; }
.hrs-page .hsp-ladsum__stat span {
font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary);
}
.hrs-page .hsp-ladsum__stat b { font-size: 14px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.hrs-page .hsp-ladsum .hsp-warn { flex: 1 1 260px; margin-top: 0; }
/* rail — one column per rung, height ∝ percentage; click jumps to the input */
.hrs-page .hsp-rail {
display: flex; align-items: flex-end; gap: 2px; height: 92px;
padding: 6px 6px 0; background: var(--n-0);
border: 1px solid var(--border-default); border-bottom: 0; border-radius: 8px 8px 0 0;
}
.hrs-page .hsp-rail__rung {
flex: 1 1 0; min-width: 0; height: 100%; padding: 0; border: 0; background: none; cursor: pointer;
display: flex; align-items: flex-end; border-radius: 3px 3px 0 0;
}
.hrs-page .hsp-rail__rung:hover { background: var(--p-50); }
.hrs-page .hsp-rail__bar {
width: 100%; min-height: 2px; border-radius: 3px 3px 0 0;
background: linear-gradient(180deg, var(--p-400), var(--p-600));
transition: height .12s ease;
}
.hrs-page .hsp-rail__rung--zero { position: relative; }
.hrs-page .hsp-rail__rung--zero::after {
content: ""; position: absolute; left: 1px; right: 1px; bottom: 0; height: 2px;
background: repeating-linear-gradient(90deg, var(--border-strong) 0 2px, transparent 2px 4px);
}
.hrs-page .hsp-rail__rung--sel { background: var(--p-50); box-shadow: inset 0 0 0 1px var(--p-300); }
.hrs-page .hsp-rail__rung--sel .hsp-rail__bar { background: linear-gradient(180deg, var(--p-500), var(--p-800)); }
.hrs-page .hsp-railax {
position: relative; height: 17px; margin-bottom: 10px;
border: 1px solid var(--border-default); border-top: 0; border-radius: 0 0 8px 8px;
background: var(--n-0);
}
.hrs-page .hsp-railax span {
position: absolute; top: 2px; transform: translateX(-50%);
font-size: 9.5px; font-weight: 700; color: var(--text-tertiary); font-variant-numeric: tabular-nums;
}
/* rung grid — the 30 inputs themselves */
.hrs-page .hsp-rungs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.hrs-page .hsp-rung {
position: relative; padding: 5px 7px 6px; border-radius: 6px;
border: 1px solid var(--border-default); background: var(--n-0);
}
.hrs-page .hsp-rung--sel { border-color: var(--p-400); box-shadow: 0 0 0 2px color-mix(in oklab, var(--p-500) 14%, transparent); }
.hrs-page .hsp-rung--zero { background: var(--n-25); border-style: dashed; }
.hrs-page .hsp-rung__lab {
display: block; margin-bottom: 3px;
font-size: 10.5px; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.hrs-page .hsp-rung__lab em { font-style: normal; font-weight: 500; color: var(--text-tertiary); }
.hrs-page .hsp-rung__row { display: flex; align-items: center; gap: 3px; }
.hrs-page .hsp-rung__in {
width: 100%; min-width: 0; height: 27px; padding: 0 6px; text-align: right;
font-family: inherit; font-size: 12.5px; color: #3f4254; font-variant-numeric: tabular-nums;
border: 1px solid var(--border-default); border-radius: 4px; background: var(--n-0);
}
.hrs-page .hsp-rung__in:focus { outline: none; border-color: var(--p-400); box-shadow: var(--ring-focus); }
.hrs-page .hsp-rung__in:disabled { background: var(--n-50); cursor: not-allowed; }
.hrs-page .hsp-rung__pc { font-size: 10.5px; color: var(--text-tertiary); }
.hrs-page .hsp-rung__carry {
position: absolute; top: 3px; right: 4px; width: 18px; height: 16px;
display: grid; place-items: center; padding: 0; cursor: pointer;
border: 1px solid var(--border-default); border-radius: 4px; background: var(--n-0); color: var(--text-tertiary);
opacity: 0; transition: opacity .1s;
}
.hrs-page .hsp-rung:hover .hsp-rung__carry,
.hrs-page .hsp-rung:focus-within .hsp-rung__carry { opacity: 1; }
.hrs-page .hsp-rung__carry:hover { border-color: var(--p-300); color: var(--p-600); }
.hrs-page .hsp-rung__carry[disabled] { display: none; }
/* ===================================================================
GGR band ladder
=================================================================== */
.hrs-page .hsp-bands { border: 1px solid var(--border-default); border-radius: 9px; padding: 11px 12px 12px; background: var(--n-25); }
.hrs-page .hsp-bands__head,
.hrs-page .hsp-band { display: grid; grid-template-columns: 30px 1fr 1fr 132px; gap: 8px; align-items: center; }
.hrs-page .hsp-bands__head {
margin-bottom: 6px;
font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary);
}
.hrs-page .hsp-band { margin-bottom: 7px; }
.hrs-page .hsp-band--last { margin-bottom: 2px; }
.hrs-page .hsp-band__n {
display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
background: var(--p-50); border: 1px solid var(--p-100); color: var(--p-700);
font-size: 11.5px; font-weight: 700;
}
.hrs-page .hsp-band--err .hsp-in { border-color: #e9484a; background: #fff7f7; }
.hrs-page .hsp-band .hsp-in { width: 100%; }
.hrs-page .hsp-band__pc { display: flex; align-items: center; gap: 5px; }
.hrs-page .hsp-band__pc span { font-size: 12px; color: var(--text-tertiary); }
.hrs-page .hsp-band__pc--solo { max-width: 160px; }
.hrs-page .hsp-stored {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--border-default);
font-size: 11px; color: var(--text-tertiary);
}
.hrs-page .hsp-stored span { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.hrs-page .hsp-stored code {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11px; color: var(--text-secondary);
background: var(--n-0); border: 1px solid var(--border-default); border-radius: 4px; padding: 1px 6px;
}
.hrs-page .hsp-thirdnote {
display: flex; align-items: flex-start; gap: 7px; margin-top: 9px;
padding: 8px 11px; border-radius: 7px; line-height: 1.6;
background: var(--p-50); border: 1px solid var(--p-100); color: var(--p-700); font-size: 11.5px;
}
.hrs-page .hsp-thirdnote > svg { flex: none; margin-top: 2px; }
.hrs-page .hsp-thirdnote code { background: rgba(255,255,255,.75); border-color: var(--p-100); color: var(--p-700); }
/* ===================================================================
Responsive (brief §11)
=================================================================== */
@media (max-width: 1100px) {
/* Two-up fields stack before the modal itself has to shrink. */
.hrs-page .hsp-grid2 { grid-template-columns: 1fr; gap: 0; }
.hrs-page .hsp-rungs { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.hrs-page .hsp-window__day { margin-left: 0; }
}
@media (max-width: 860px) {
/* Modal goes full-screen; head and footer stay pinned, body scrolls. */
.hrs-page .hsp-scrim { padding: 0; place-items: stretch; }
.hrs-page .hsp-modal,
.hrs-page .hsp-modal--wide {
width: 100vw; max-width: 100vw; min-height: 100vh; max-height: 100vh; border-radius: 0;
}
.hrs-page .hsp-modal__head { padding: 13px 15px 11px; }
.hrs-page .hsp-modal__title { font-size: 16px; }
.hrs-page .hsp-modal__body { padding: 13px 15px 18px; -webkit-overflow-scrolling: touch; }
.hrs-page .hsp-modal__foot { padding: 11px 15px; }
.hrs-page .hsp-modal__foot .btn { flex: 1; justify-content: center; }
/* Edit-window strip stacks so the sentence stays readable. */
.hrs-page .hsp-window { flex-wrap: wrap; }
.hrs-page .hsp-window__day { margin-left: 22px; align-self: flex-start; }
/* Ladder: shorter rail (still shows the curve), fewer + wider rungs,
and the carry button is always visible because there is no hover. */
.hrs-page .hsp-rail { height: 68px; gap: 1px; }
.hrs-page .hsp-ladsum { gap: 8px 16px; }
.hrs-page .hsp-rungs { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.hrs-page .hsp-rung__carry { opacity: 1; }
/* GGR bands: label the columns per row instead of relying on the header. */
.hrs-page .hsp-bands__head { display: none; }
.hrs-page .hsp-band { grid-template-columns: 26px 1fr 1fr; grid-template-areas: "n from to" "n pc pc"; row-gap: 6px; }
.hrs-page .hsp-band__n { grid-area: n; align-self: start; }
.hrs-page .hsp-band__pc { grid-area: pc; max-width: none; }
.hrs-page .hsp-band__pc::before {
content: "Commission"; font-size: 10px; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; color: var(--text-tertiary);
}
.hrs-page .hsp-stored { flex-direction: column; align-items: flex-start; }
.hrs-page .hsp-stored code { max-width: 100%; overflow-x: auto; }
/* Typology chip goes back to one line inside the mobile card. */
.hrs-page .hsp-card__chips .hsp-tchip { flex-direction: row; align-items: center; gap: 6px; }
}
@media (max-width: 560px) {
.hrs-page .hsp-rail { height: 56px; }
.hrs-page .hsp-rungs { grid-template-columns: repeat(3, 1fr); }
.hrs-page .hsp-ladsum__stat { flex: 1 1 44%; }
.hrs-page .hsp-lock__body { font-size: 12px; }
.hrs-page .hsp-window { font-size: 12px; }
}
/* ---- HostCmsOAuth ---- */
/* ===================================================================
OAuth Clients (src/pages/HostCmsOAuth.jsx → OAuthClients)
CMS ▾ leaf for GET /oauth-clients (admin.oauth-clients.index).
Page chrome comes from the Hrs* shell (.hrs-* block) and the hero
filter-card chrome (.hrs-fcard / .hrs-flab / .hrs-fresult) is reused
verbatim for the read-only context strip, so this screen sits in the
same visual family as Transactions.jsx without redefining any shared
class. Everything below is only what the shell does not cover: the
context strip, the table cells + chips, the sectioned editor panels
(Settings.jsx shape), the callouts and the credentials modal.
Prefix: hoa- · Iwakiri red = var(--p-*). No raw brand hexes.
=================================================================== */
/* ---- read-only context strip (Order / Filters / Page size / Audit) ---- */
.hrs-page .hoa-listbar {
display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch;
margin: 0 0 14px;
}
.hrs-page .hoa-fact { min-width: 148px; }
.hrs-page .hoa-fact__v {
display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.hrs-page .hoa-fact__v code {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 12px; font-weight: 700; color: #2b2f3a;
background: #f4f5f8; border: 1px solid #e4e6ef; border-radius: 4px; padding: 1px 6px;
}
.hrs-page .hoa-fact__x {
font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
color: var(--text-tertiary); border: 1px dashed var(--border-default);
border-radius: 999px; padding: 1px 7px;
}
/* The audit-trail card is a standing warning, not a neutral fact. */
.hrs-page .hoa-fact--warn { border-color: var(--warn-300, #f2c94c); background: var(--warn-50, #fff8e6); }
.hrs-page .hoa-fact--warn .hrs-flab { color: var(--warn-700, #9a6a00); }
.hrs-page .hoa-fact--warn .hrs-flab > svg { color: var(--warn-700, #9a6a00); }
/* Long unbreakable tokens (endpoint paths, UUIDs) inside prose — the shared
Explainer is a grid with no min-width, so an unbreakable 40-char token would
push the whole page sideways on a phone. */
.hrs-page .hoa-brk { overflow-wrap: anywhere; word-break: break-word; }
/* ---- table cells ---- */
.hrs-page .hoa-id { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-secondary); }
.hrs-page .hoa-dash { color: var(--text-tertiary); }
.hrs-page .hoa-when { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hrs-page .hoa-namelink {
display: inline-flex; align-items: center; gap: 6px;
background: none; border: 0; padding: 0; cursor: pointer;
font-family: inherit; font-size: 13px; font-weight: 700; color: var(--p-700);
text-align: left; word-break: break-word;
}
.hrs-page .hoa-namelink:hover { color: var(--p-800, var(--p-700)); text-decoration: underline; }
.hrs-page .hoa-namelink > svg { opacity: .5; flex: none; }
/* client_id — public half of the credential, monospace, never truncated.
No copy affordance here on purpose: index.blade documents copy buttons
only inside the one-time credentials modal. */
.hrs-page .hoa-cid {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11.5px; color: var(--text-secondary); word-break: break-all;
}
/* ---- type chip + affiliate_tag sub-line ---- */
.hrs-page .hoa-typechip {
display: inline-flex; align-items: center;
border-radius: 999px; padding: 2px 10px;
font-size: 11px; font-weight: 700; white-space: nowrap;
border: 1px solid transparent;
}
.hrs-page .hoa-typechip--affiliator { background: var(--p-50); color: var(--p-700); border-color: var(--p-100); }
.hrs-page .hoa-typechip--payment_provider{ background: #eaf3ff; color: #1d4fa3; border-color: #cfe1fb; }
.hrs-page .hoa-typechip--game_provider { background: #eefaf2; color: #1f7a4d; border-color: #cfeddd; }
.hrs-page .hoa-typechip--onaim { background: #f4eefc; color: #6b3fa0; border-color: #e3d6f5; }
.hrs-page .hoa-typechip--general { background: var(--n-75, #f2f3f7); color: #4a5064; border-color: var(--border-default); }
/* Sub-line UNDER the type chip, per index.blade — display:flex (not inline-flex)
so it always breaks to its own line inside the Type cell, with fit-content so
the --missing pill does not stretch across the column. */
.hrs-page .hoa-tag {
display: flex; width: fit-content; align-items: center; gap: 4px;
margin-top: 4px; font-size: 11px; color: var(--text-tertiary);
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
}
.hrs-page .hoa-tag--missing {
color: var(--warn-700, #9a6a00); background: var(--warn-50, #fff8e6);
border: 1px dashed var(--warn-300, #f2c94c); border-radius: 999px;
padding: 0 7px; font-weight: 700; font-family: inherit;
}
/* ---- scope chips ---- */
.hrs-page .hoa-scopes { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.hrs-page .hoa-scope {
display: inline-flex; align-items: center; gap: 2px;
border-radius: 5px; padding: 2px 8px;
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11px; font-weight: 700; white-space: nowrap;
border: 1px solid var(--border-default); background: var(--n-25); color: var(--text-secondary);
}
/* affiliator:read — the only scope any middleware reads. */
.hrs-page .hoa-scope--enforced { background: #eefaf2; border-color: #cfeddd; color: #1f7a4d; }
/* Stored, displayed, never checked. */
.hrs-page .hoa-scope--inert { border-style: dashed; color: var(--text-tertiary); }
/* scopes = null. Documented as "All", enforced as "none" — the chip has to
look like a claim under dispute, not like a green light. */
.hrs-page .hoa-scope--all {
background: var(--warn-50, #fff8e6); border-color: var(--warn-300, #f2c94c);
color: var(--warn-700, #9a6a00); font-family: inherit;
}
/* ---- status chip ---- */
.hrs-page .hoa-status {
display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 11px;
font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid transparent;
}
.hrs-page .hoa-status--on { background: #eefaf2; color: #1f7a4d; border-color: #cfeddd; }
.hrs-page .hoa-status--off { background: var(--n-75, #f2f3f7); color: #7a808f; border-color: var(--border-default); }
/* ---- row actions (Edit + Regenerate Secret; there is no delete) ---- */
.hrs-page .hoa-acts { display: inline-flex; gap: 6px; justify-content: center; }
.hrs-page .hoa-act {
width: 32px; height: 32px; border: 0; border-radius: 6px; cursor: pointer;
display: grid; place-items: center; color: #fff; transition: background .12s;
}
.hrs-page .hoa-act--edit { background: #3b82f6; }
.hrs-page .hoa-act--edit:hover { background: #2563eb; }
/* Regenerate is destructive (it revokes every live token) — red, not blue. */
.hrs-page .hoa-act--regen { background: #e9484a; }
.hrs-page .hoa-act--regen:hover { background: #d23c3e; }
/* ---- footer honesty line (no delete route) ---- */
.hrs-page .hoa-foot {
display: flex; align-items: flex-start; gap: 8px;
margin-top: 14px; padding: 10px 12px;
border: 1px dashed var(--border-default); border-radius: 8px; background: var(--n-25);
font-size: 11.5px; line-height: 1.6; color: var(--text-secondary);
}
.hrs-page .hoa-foot > svg { color: var(--text-tertiary); flex: none; margin-top: 2px; }
.hrs-page .hoa-foot code,
.hrs-page .hoa-hint code,
.hrs-page .hoa-callout code,
.hrs-page .hoa-once code {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11px; color: var(--text-primary);
background: rgba(15, 20, 32, .05); border-radius: 4px; padding: 0 4px;
}
/* ===================================================================
Editor — sectioned config panels (Settings.jsx shape)
=================================================================== */
.hrs-page .hoa-editor { display: flex; flex-direction: column; gap: 14px; }
.hrs-page .hoa-panel {
background: var(--n-0); border: 1px solid var(--border-default); border-radius: 10px;
box-shadow: var(--shadow-xs); overflow: hidden;
}
.hrs-page .hoa-panel__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 13px 18px; border-bottom: 1px solid var(--border-subtle);
background: var(--n-25);
}
.hrs-page .hoa-panel__title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.hrs-page .hoa-panel__sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; line-height: 1.5; }
.hrs-page .hoa-panel__sub code { font-size: 11px; }
.hrs-page .hoa-panel__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
/* Scopes is the security-critical panel — a red rail marks it. */
.hrs-page .hoa-panel--scopes { border-color: var(--p-200, var(--border-default)); }
.hrs-page .hoa-panel--scopes .hoa-panel__head {
background: var(--p-50); border-bottom-color: var(--p-100);
box-shadow: inset 3px 0 0 var(--p-500);
}
.hrs-page .hoa-grid { display: grid; gap: 14px; }
.hrs-page .hoa-grid--2 { grid-template-columns: 1fr 1fr; }
.hrs-page .hoa-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hrs-page .hoa-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.hrs-page .hoa-req { color: #e9484a; font-weight: 700; }
.hrs-page .hoa-hint { font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary); }
.hrs-page .hoa-hint--foot { text-align: center; padding-bottom: 6px; }
.hrs-page .hoa-fielderr { font-size: 11.5px; font-weight: 600; color: #e9484a; }
.hrs-page .hoa-invalid { border-color: #e9484a !important; box-shadow: 0 0 0 3px rgba(233, 72, 74, .12); }
/* read-only edit fields (Client ID / Created) */
.hrs-page .hoa-ro {
min-height: 36px; display: flex; align-items: center;
padding: 6px 10px; border: 1px dashed var(--border-default); border-radius: 6px;
background: var(--n-25); font-size: 12.5px; color: var(--text-secondary); word-break: break-all;
}
.hrs-page .hoa-switchrow { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.hrs-page .hoa-switchrow .hoa-hint { flex: 1 1 320px; }
.hrs-page .hoa-editfoot {
display: flex; justify-content: flex-end; gap: 10px;
padding-top: 2px;
}
/* ---- callouts (shared by editor + regenerate dialog) ---- */
.hrs-page .hoa-callout,
.hoa-modal .hoa-callout {
display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start;
padding: 11px 13px; border-radius: 8px; border: 1px solid;
font-size: 12px; line-height: 1.6;
}
.hrs-page .hoa-callout > svg,
.hoa-modal .hoa-callout > svg { margin-top: 1px; }
.hrs-page .hoa-callout__t,
.hoa-modal .hoa-callout__t { font-weight: 700; font-size: 12.5px; margin-bottom: 3px; }
.hrs-page .hoa-callout__b,
.hoa-modal .hoa-callout__b { min-width: 0; }
.hrs-page .hoa-callout--danger, .hoa-modal .hoa-callout--danger { background: #fdecec; border-color: #f6c9c9; color: #8f2426; }
.hrs-page .hoa-callout--warn, .hoa-modal .hoa-callout--warn { background: var(--warn-50, #fff8e6); border-color: var(--warn-300, #f2c94c); color: #7a5400; }
.hrs-page .hoa-callout--ok, .hoa-modal .hoa-callout--ok { background: #eefaf2; border-color: #cfeddd; color: #17603c; }
.hrs-page .hoa-callout--info, .hoa-modal .hoa-callout--info { background: var(--n-25); border-color: var(--border-default); color: var(--text-secondary); }
.hrs-page .hoa-callout--danger code { background: rgba(143, 36, 38, .09); color: #6f1b1d; }
.hrs-page .hoa-callout--warn code { background: rgba(122, 84, 0, .10); color: #6a4900; }
.hrs-page .hoa-callout--ok code { background: rgba(23, 96, 60, .09); color: #125232; }
.hrs-page .hoa-ul { margin: 6px 0 4px; padding-left: 18px; }
.hrs-page .hoa-ul li { margin: 2px 0; }
/* ===================================================================
Modals — regenerate confirm + one-time credentials
=================================================================== */
.hoa-scrim { place-items: center; }
.hoa-modal { width: min(680px, 96vw); padding: 0; }
.hoa-modal--creds { width: min(760px, 96vw); }
.hoa-modal__head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
}
.hoa-modal__title { font-size: 17px; font-weight: 700; color: #2b2f3a; letter-spacing: -0.01em; }
.hoa-x {
width: 30px; height: 30px; border: 0; border-radius: 6px; background: var(--n-50, #f2f3f7);
color: #6b7280; cursor: pointer; display: grid; place-items: center;
}
.hoa-x:hover { background: #e8eaef; color: #2b2f3a; }
.hoa-modal__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.hoa-modal__foot {
display: flex; justify-content: flex-end; gap: 10px;
padding: 14px 20px; border-top: 1px solid var(--border-subtle); background: var(--n-25);
}
.hoa-modal .hoa-hint { font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary); }
.hoa-modal .hoa-hint code,
.hoa-modal .hoa-once code,
.hoa-modal .hoa-flash code {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11px; background: rgba(15, 20, 32, .05); border-radius: 4px; padding: 0 4px;
}
.hoa-dlgq { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.5; }
.hoa-modal .mono { font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace); }
/* server flash after regenerateSecret */
.hoa-flash {
display: flex; align-items: center; gap: 8px;
padding: 10px 13px; border-radius: 8px;
background: #eefaf2; border: 1px solid #cfeddd; color: #17603c;
font-size: 12.5px; font-weight: 600;
}
/* "shown exactly once" band — the loudest thing in the modal */
.hoa-once {
display: grid; grid-template-columns: 20px 1fr; gap: 11px; align-items: start;
padding: 12px 14px; border-radius: 8px;
background: #fdecec; border: 1px solid #f6c9c9; color: #8f2426;
font-size: 12px; line-height: 1.6;
}
.hoa-once > svg { margin-top: 2px; }
.hoa-once code { background: rgba(143, 36, 38, .09) !important; color: #6f1b1d; }
/* credential rows */
.hoa-creds { display: flex; flex-direction: column; gap: 8px; }
.hoa-cred {
display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; align-items: center;
padding: 9px 12px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--n-0);
}
.hoa-cred__k { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
.hoa-cred__v { font-size: 12.5px; color: var(--text-primary); word-break: break-all; }
.hoa-cred__v.mono { font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace); font-size: 12px; }
.hoa-cred--secret { border-color: #f6c9c9; background: #fff7f7; }
.hoa-cred--secret .hoa-cred__k { color: #8f2426; }
.hoa-cred--secret .hoa-cred__v { font-weight: 700; color: #6f1b1d; }
.hoa-copy {
display: inline-flex; align-items: center; gap: 5px;
height: 28px; padding: 0 10px; border-radius: 6px; cursor: pointer;
border: 1px solid var(--border-default); background: var(--n-0);
font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
transition: border-color .12s, color .12s, background .12s;
}
.hoa-copy:hover { border-color: var(--p-300); color: var(--p-600); }
.hoa-copy--done { background: #eefaf2; border-color: #cfeddd; color: #1f7a4d; }
/* ===================================================================
Mobile stacked cards (rendered by HrsTable's renderCard)
Own classes — .hrs-card__* is shared with every other Hrs screen and
must not be restyled from here.
=================================================================== */
.hrs-page .hoa-cardtop {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
font-size: 13.5px; margin-bottom: 8px;
}
.hrs-page .hoa-cardchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.hrs-page .hoa-cardchips .hoa-tag { margin-top: 0; }
.hrs-page .hoa-cardscopes { margin-bottom: 8px; }
.hrs-page .hoa-details > summary {
list-style: none; cursor: pointer;
font-size: 12px; font-weight: 600; color: var(--p-600);
padding: 6px 0 2px; border-top: 1px dashed var(--border-default);
}
.hrs-page .hoa-details > summary::-webkit-details-marker { display: none; }
.hrs-page .hoa-details > summary::after { content: " ▾"; opacity: .6; }
.hrs-page .hoa-details[open] > summary::after { content: " ▴"; }
.hrs-page .hoa-details .hrs-card__grid { padding-top: 6px; }
.hrs-page .hoa-details .hoa-cid { text-align: right; font-weight: 600; }
.hrs-page .hoa-cardacts { display: flex; gap: 8px; margin-top: 10px; }
.hrs-page .hoa-cardacts .btn { flex: 1; justify-content: center; }
.hrs-page .hoa-cardregen { color: #e9484a; }
/* ===================================================================
Responsive (brief §11)
=================================================================== */
@media (max-width: 1100px) {
/* Editor drops to one column before the fields get too narrow to read. */
.hrs-page .hoa-grid--2 { grid-template-columns: 1fr; }
.hrs-page .hoa-listbar { gap: 8px; }
.hrs-page .hoa-fact { min-width: 132px; }
}
@media (max-width: 860px) {
/* Context strip: the fact cards stack two-up and the Results card stops
floating right, instead of squeezing five cards onto one line. There is
no filter sheet to collapse into — this screen has no filters. */
.hrs-page .hoa-listbar { display: grid; grid-template-columns: 1fr 1fr; }
.hrs-page .hoa-fact,
.hrs-page .hoa-listbar .hrs-fcard--result { min-width: 0; margin-left: 0; }
.hrs-page .hoa-listbar .hrs-fcard--result { grid-column: 1 / -1; }
/* Editor panels lose their side padding so the inputs get full width. */
.hrs-page .hoa-panel__head { padding: 12px 14px; }
.hrs-page .hoa-panel__body { padding: 14px; gap: 12px; }
.hrs-page .hoa-editfoot { flex-direction: column-reverse; gap: 8px; }
.hrs-page .hoa-editfoot .btn { width: 100%; justify-content: center; height: 40px; }
.hrs-page .hoa-switchrow { flex-direction: column; gap: 8px; }
/* Modals go full-screen (brief §11). */
.hoa-scrim { padding: 0; place-items: stretch; }
.hoa-modal, .hoa-modal--creds {
width: 100%; min-height: 100%; border-radius: 0;
display: flex; flex-direction: column;
}
.hoa-modal__body { flex: 1; overflow: auto; }
.hoa-modal__foot { position: sticky; bottom: 0; }
.hoa-modal__foot .btn { flex: 1; justify-content: center; height: 40px; }
/* Credential rows stack: label, value, then a full-width Copy button —
a 36-character UUID and a 48-character secret cannot share a line. */
.hoa-cred { grid-template-columns: 1fr; gap: 6px; }
.hoa-copy { width: 100%; justify-content: center; height: 34px; }
/* Card head: long client names wrap instead of crushing the status chip. */
.hrs-page .hoa-cardtop { align-items: flex-start; }
.hrs-page .hoa-cardacts { flex-direction: column; }
}
/* ---- read-only context strip (Order / Filters / Page size / Audit) ---- */
.hrs-page .hoa-listbar {
display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch;
margin: 0 0 14px;
}
.hrs-page .hoa-fact { min-width: 148px; }
.hrs-page .hoa-fact__v {
display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.hrs-page .hoa-fact__v code {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 12px; font-weight: 700; color: #2b2f3a;
background: #f4f5f8; border: 1px solid #e4e6ef; border-radius: 4px; padding: 1px 6px;
}
.hrs-page .hoa-fact__x {
font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
color: var(--text-tertiary); border: 1px dashed var(--border-default);
border-radius: 999px; padding: 1px 7px;
}
/* The audit-trail card is a standing warning, not a neutral fact. */
.hrs-page .hoa-fact--warn { border-color: var(--warn-300, #f2c94c); background: var(--warn-50, #fff8e6); }
.hrs-page .hoa-fact--warn .hrs-flab { color: var(--warn-700, #9a6a00); }
.hrs-page .hoa-fact--warn .hrs-flab > svg { color: var(--warn-700, #9a6a00); }
/* Long unbreakable tokens (endpoint paths, UUIDs) inside prose — the shared
Explainer is a grid with no min-width, so an unbreakable 40-char token would
push the whole page sideways on a phone. */
.hrs-page .hoa-brk { overflow-wrap: anywhere; word-break: break-word; }
/* ---- table cells ---- */
.hrs-page .hoa-id { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-secondary); }
.hrs-page .hoa-dash { color: var(--text-tertiary); }
.hrs-page .hoa-when { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hrs-page .hoa-namelink {
display: inline-flex; align-items: center; gap: 6px;
background: none; border: 0; padding: 0; cursor: pointer;
font-family: inherit; font-size: 13px; font-weight: 700; color: var(--p-700);
text-align: left; word-break: break-word;
}
.hrs-page .hoa-namelink:hover { color: var(--p-800, var(--p-700)); text-decoration: underline; }
.hrs-page .hoa-namelink > svg { opacity: .5; flex: none; }
/* client_id — public half of the credential, monospace, never truncated.
No copy affordance here on purpose: index.blade documents copy buttons
only inside the one-time credentials modal. */
.hrs-page .hoa-cid {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11.5px; color: var(--text-secondary); word-break: break-all;
}
/* ---- type chip + affiliate_tag sub-line ---- */
.hrs-page .hoa-typechip {
display: inline-flex; align-items: center;
border-radius: 999px; padding: 2px 10px;
font-size: 11px; font-weight: 700; white-space: nowrap;
border: 1px solid transparent;
}
.hrs-page .hoa-typechip--affiliator { background: var(--p-50); color: var(--p-700); border-color: var(--p-100); }
.hrs-page .hoa-typechip--payment_provider{ background: #eaf3ff; color: #1d4fa3; border-color: #cfe1fb; }
.hrs-page .hoa-typechip--game_provider { background: #eefaf2; color: #1f7a4d; border-color: #cfeddd; }
.hrs-page .hoa-typechip--onaim { background: #f4eefc; color: #6b3fa0; border-color: #e3d6f5; }
.hrs-page .hoa-typechip--general { background: var(--n-75, #f2f3f7); color: #4a5064; border-color: var(--border-default); }
/* Sub-line UNDER the type chip, per index.blade — display:flex (not inline-flex)
so it always breaks to its own line inside the Type cell, with fit-content so
the --missing pill does not stretch across the column. */
.hrs-page .hoa-tag {
display: flex; width: fit-content; align-items: center; gap: 4px;
margin-top: 4px; font-size: 11px; color: var(--text-tertiary);
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
}
.hrs-page .hoa-tag--missing {
color: var(--warn-700, #9a6a00); background: var(--warn-50, #fff8e6);
border: 1px dashed var(--warn-300, #f2c94c); border-radius: 999px;
padding: 0 7px; font-weight: 700; font-family: inherit;
}
/* ---- scope chips ---- */
.hrs-page .hoa-scopes { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.hrs-page .hoa-scope {
display: inline-flex; align-items: center; gap: 2px;
border-radius: 5px; padding: 2px 8px;
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11px; font-weight: 700; white-space: nowrap;
border: 1px solid var(--border-default); background: var(--n-25); color: var(--text-secondary);
}
/* affiliator:read — the only scope any middleware reads. */
.hrs-page .hoa-scope--enforced { background: #eefaf2; border-color: #cfeddd; color: #1f7a4d; }
/* Stored, displayed, never checked. */
.hrs-page .hoa-scope--inert { border-style: dashed; color: var(--text-tertiary); }
/* scopes = null. Documented as "All", enforced as "none" — the chip has to
look like a claim under dispute, not like a green light. */
.hrs-page .hoa-scope--all {
background: var(--warn-50, #fff8e6); border-color: var(--warn-300, #f2c94c);
color: var(--warn-700, #9a6a00); font-family: inherit;
}
/* ---- status chip ---- */
.hrs-page .hoa-status {
display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 11px;
font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid transparent;
}
.hrs-page .hoa-status--on { background: #eefaf2; color: #1f7a4d; border-color: #cfeddd; }
.hrs-page .hoa-status--off { background: var(--n-75, #f2f3f7); color: #7a808f; border-color: var(--border-default); }
/* ---- row actions (Edit + Regenerate Secret; there is no delete) ---- */
.hrs-page .hoa-acts { display: inline-flex; gap: 6px; justify-content: center; }
.hrs-page .hoa-act {
width: 32px; height: 32px; border: 0; border-radius: 6px; cursor: pointer;
display: grid; place-items: center; color: #fff; transition: background .12s;
}
.hrs-page .hoa-act--edit { background: #3b82f6; }
.hrs-page .hoa-act--edit:hover { background: #2563eb; }
/* Regenerate is destructive (it revokes every live token) — red, not blue. */
.hrs-page .hoa-act--regen { background: #e9484a; }
.hrs-page .hoa-act--regen:hover { background: #d23c3e; }
/* ---- footer honesty line (no delete route) ---- */
.hrs-page .hoa-foot {
display: flex; align-items: flex-start; gap: 8px;
margin-top: 14px; padding: 10px 12px;
border: 1px dashed var(--border-default); border-radius: 8px; background: var(--n-25);
font-size: 11.5px; line-height: 1.6; color: var(--text-secondary);
}
.hrs-page .hoa-foot > svg { color: var(--text-tertiary); flex: none; margin-top: 2px; }
.hrs-page .hoa-foot code,
.hrs-page .hoa-hint code,
.hrs-page .hoa-callout code,
.hrs-page .hoa-once code {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11px; color: var(--text-primary);
background: rgba(15, 20, 32, .05); border-radius: 4px; padding: 0 4px;
}
/* ===================================================================
Editor — sectioned config panels (Settings.jsx shape)
=================================================================== */
.hrs-page .hoa-editor { display: flex; flex-direction: column; gap: 14px; }
.hrs-page .hoa-panel {
background: var(--n-0); border: 1px solid var(--border-default); border-radius: 10px;
box-shadow: var(--shadow-xs); overflow: hidden;
}
.hrs-page .hoa-panel__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 13px 18px; border-bottom: 1px solid var(--border-subtle);
background: var(--n-25);
}
.hrs-page .hoa-panel__title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.hrs-page .hoa-panel__sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; line-height: 1.5; }
.hrs-page .hoa-panel__sub code { font-size: 11px; }
.hrs-page .hoa-panel__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
/* Scopes is the security-critical panel — a red rail marks it. */
.hrs-page .hoa-panel--scopes { border-color: var(--p-200, var(--border-default)); }
.hrs-page .hoa-panel--scopes .hoa-panel__head {
background: var(--p-50); border-bottom-color: var(--p-100);
box-shadow: inset 3px 0 0 var(--p-500);
}
.hrs-page .hoa-grid { display: grid; gap: 14px; }
.hrs-page .hoa-grid--2 { grid-template-columns: 1fr 1fr; }
.hrs-page .hoa-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hrs-page .hoa-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.hrs-page .hoa-req { color: #e9484a; font-weight: 700; }
.hrs-page .hoa-hint { font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary); }
.hrs-page .hoa-hint--foot { text-align: center; padding-bottom: 6px; }
.hrs-page .hoa-fielderr { font-size: 11.5px; font-weight: 600; color: #e9484a; }
.hrs-page .hoa-invalid { border-color: #e9484a !important; box-shadow: 0 0 0 3px rgba(233, 72, 74, .12); }
/* read-only edit fields (Client ID / Created) */
.hrs-page .hoa-ro {
min-height: 36px; display: flex; align-items: center;
padding: 6px 10px; border: 1px dashed var(--border-default); border-radius: 6px;
background: var(--n-25); font-size: 12.5px; color: var(--text-secondary); word-break: break-all;
}
.hrs-page .hoa-switchrow { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.hrs-page .hoa-switchrow .hoa-hint { flex: 1 1 320px; }
.hrs-page .hoa-editfoot {
display: flex; justify-content: flex-end; gap: 10px;
padding-top: 2px;
}
/* ---- callouts (shared by editor + regenerate dialog) ---- */
.hrs-page .hoa-callout,
.hoa-modal .hoa-callout {
display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start;
padding: 11px 13px; border-radius: 8px; border: 1px solid;
font-size: 12px; line-height: 1.6;
}
.hrs-page .hoa-callout > svg,
.hoa-modal .hoa-callout > svg { margin-top: 1px; }
.hrs-page .hoa-callout__t,
.hoa-modal .hoa-callout__t { font-weight: 700; font-size: 12.5px; margin-bottom: 3px; }
.hrs-page .hoa-callout__b,
.hoa-modal .hoa-callout__b { min-width: 0; }
.hrs-page .hoa-callout--danger, .hoa-modal .hoa-callout--danger { background: #fdecec; border-color: #f6c9c9; color: #8f2426; }
.hrs-page .hoa-callout--warn, .hoa-modal .hoa-callout--warn { background: var(--warn-50, #fff8e6); border-color: var(--warn-300, #f2c94c); color: #7a5400; }
.hrs-page .hoa-callout--ok, .hoa-modal .hoa-callout--ok { background: #eefaf2; border-color: #cfeddd; color: #17603c; }
.hrs-page .hoa-callout--info, .hoa-modal .hoa-callout--info { background: var(--n-25); border-color: var(--border-default); color: var(--text-secondary); }
.hrs-page .hoa-callout--danger code { background: rgba(143, 36, 38, .09); color: #6f1b1d; }
.hrs-page .hoa-callout--warn code { background: rgba(122, 84, 0, .10); color: #6a4900; }
.hrs-page .hoa-callout--ok code { background: rgba(23, 96, 60, .09); color: #125232; }
.hrs-page .hoa-ul { margin: 6px 0 4px; padding-left: 18px; }
.hrs-page .hoa-ul li { margin: 2px 0; }
/* ===================================================================
Modals — regenerate confirm + one-time credentials
=================================================================== */
.hoa-scrim { place-items: center; }
.hoa-modal { width: min(680px, 96vw); padding: 0; }
.hoa-modal--creds { width: min(760px, 96vw); }
.hoa-modal__head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
}
.hoa-modal__title { font-size: 17px; font-weight: 700; color: #2b2f3a; letter-spacing: -0.01em; }
.hoa-x {
width: 30px; height: 30px; border: 0; border-radius: 6px; background: var(--n-50, #f2f3f7);
color: #6b7280; cursor: pointer; display: grid; place-items: center;
}
.hoa-x:hover { background: #e8eaef; color: #2b2f3a; }
.hoa-modal__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.hoa-modal__foot {
display: flex; justify-content: flex-end; gap: 10px;
padding: 14px 20px; border-top: 1px solid var(--border-subtle); background: var(--n-25);
}
.hoa-modal .hoa-hint { font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary); }
.hoa-modal .hoa-hint code,
.hoa-modal .hoa-once code,
.hoa-modal .hoa-flash code {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11px; background: rgba(15, 20, 32, .05); border-radius: 4px; padding: 0 4px;
}
.hoa-dlgq { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.5; }
.hoa-modal .mono { font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace); }
/* server flash after regenerateSecret */
.hoa-flash {
display: flex; align-items: center; gap: 8px;
padding: 10px 13px; border-radius: 8px;
background: #eefaf2; border: 1px solid #cfeddd; color: #17603c;
font-size: 12.5px; font-weight: 600;
}
/* "shown exactly once" band — the loudest thing in the modal */
.hoa-once {
display: grid; grid-template-columns: 20px 1fr; gap: 11px; align-items: start;
padding: 12px 14px; border-radius: 8px;
background: #fdecec; border: 1px solid #f6c9c9; color: #8f2426;
font-size: 12px; line-height: 1.6;
}
.hoa-once > svg { margin-top: 2px; }
.hoa-once code { background: rgba(143, 36, 38, .09) !important; color: #6f1b1d; }
/* credential rows */
.hoa-creds { display: flex; flex-direction: column; gap: 8px; }
.hoa-cred {
display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; align-items: center;
padding: 9px 12px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--n-0);
}
.hoa-cred__k { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
.hoa-cred__v { font-size: 12.5px; color: var(--text-primary); word-break: break-all; }
.hoa-cred__v.mono { font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace); font-size: 12px; }
.hoa-cred--secret { border-color: #f6c9c9; background: #fff7f7; }
.hoa-cred--secret .hoa-cred__k { color: #8f2426; }
.hoa-cred--secret .hoa-cred__v { font-weight: 700; color: #6f1b1d; }
.hoa-copy {
display: inline-flex; align-items: center; gap: 5px;
height: 28px; padding: 0 10px; border-radius: 6px; cursor: pointer;
border: 1px solid var(--border-default); background: var(--n-0);
font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
transition: border-color .12s, color .12s, background .12s;
}
.hoa-copy:hover { border-color: var(--p-300); color: var(--p-600); }
.hoa-copy--done { background: #eefaf2; border-color: #cfeddd; color: #1f7a4d; }
/* ===================================================================
Mobile stacked cards (rendered by HrsTable's renderCard)
Own classes — .hrs-card__* is shared with every other Hrs screen and
must not be restyled from here.
=================================================================== */
.hrs-page .hoa-cardtop {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
font-size: 13.5px; margin-bottom: 8px;
}
.hrs-page .hoa-cardchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.hrs-page .hoa-cardchips .hoa-tag { margin-top: 0; }
.hrs-page .hoa-cardscopes { margin-bottom: 8px; }
.hrs-page .hoa-details > summary {
list-style: none; cursor: pointer;
font-size: 12px; font-weight: 600; color: var(--p-600);
padding: 6px 0 2px; border-top: 1px dashed var(--border-default);
}
.hrs-page .hoa-details > summary::-webkit-details-marker { display: none; }
.hrs-page .hoa-details > summary::after { content: " ▾"; opacity: .6; }
.hrs-page .hoa-details[open] > summary::after { content: " ▴"; }
.hrs-page .hoa-details .hrs-card__grid { padding-top: 6px; }
.hrs-page .hoa-details .hoa-cid { text-align: right; font-weight: 600; }
.hrs-page .hoa-cardacts { display: flex; gap: 8px; margin-top: 10px; }
.hrs-page .hoa-cardacts .btn { flex: 1; justify-content: center; }
.hrs-page .hoa-cardregen { color: #e9484a; }
/* ===================================================================
Responsive (brief §11)
=================================================================== */
@media (max-width: 1100px) {
/* Editor drops to one column before the fields get too narrow to read. */
.hrs-page .hoa-grid--2 { grid-template-columns: 1fr; }
.hrs-page .hoa-listbar { gap: 8px; }
.hrs-page .hoa-fact { min-width: 132px; }
}
@media (max-width: 860px) {
/* Context strip: the fact cards stack two-up and the Results card stops
floating right, instead of squeezing five cards onto one line. There is
no filter sheet to collapse into — this screen has no filters. */
.hrs-page .hoa-listbar { display: grid; grid-template-columns: 1fr 1fr; }
.hrs-page .hoa-fact,
.hrs-page .hoa-listbar .hrs-fcard--result { min-width: 0; margin-left: 0; }
.hrs-page .hoa-listbar .hrs-fcard--result { grid-column: 1 / -1; }
/* Editor panels lose their side padding so the inputs get full width. */
.hrs-page .hoa-panel__head { padding: 12px 14px; }
.hrs-page .hoa-panel__body { padding: 14px; gap: 12px; }
.hrs-page .hoa-editfoot { flex-direction: column-reverse; gap: 8px; }
.hrs-page .hoa-editfoot .btn { width: 100%; justify-content: center; height: 40px; }
.hrs-page .hoa-switchrow { flex-direction: column; gap: 8px; }
/* Modals go full-screen (brief §11). */
.hoa-scrim { padding: 0; place-items: stretch; }
.hoa-modal, .hoa-modal--creds {
width: 100%; min-height: 100%; border-radius: 0;
display: flex; flex-direction: column;
}
.hoa-modal__body { flex: 1; overflow: auto; }
.hoa-modal__foot { position: sticky; bottom: 0; }
.hoa-modal__foot .btn { flex: 1; justify-content: center; height: 40px; }
/* Credential rows stack: label, value, then a full-width Copy button —
a 36-character UUID and a 48-character secret cannot share a line. */
.hoa-cred { grid-template-columns: 1fr; gap: 6px; }
.hoa-copy { width: 100%; justify-content: center; height: 34px; }
/* Card head: long client names wrap instead of crushing the status chip. */
.hrs-page .hoa-cardtop { align-items: flex-start; }
.hrs-page .hoa-cardacts { flex-direction: column; }
}
/* ---- read-only context strip (Order / Filters / Page size / Audit) ---- */
.hrs-page .hoa-listbar {
display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch;
margin: 0 0 14px;
}
.hrs-page .hoa-fact { min-width: 148px; }
.hrs-page .hoa-fact__v {
display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.hrs-page .hoa-fact__v code {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 12px; font-weight: 700; color: #2b2f3a;
background: #f4f5f8; border: 1px solid #e4e6ef; border-radius: 4px; padding: 1px 6px;
}
.hrs-page .hoa-fact__x {
font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
color: var(--text-tertiary); border: 1px dashed var(--border-default);
border-radius: 999px; padding: 1px 7px;
}
/* The audit-trail card is a standing warning, not a neutral fact. */
.hrs-page .hoa-fact--warn { border-color: var(--warn-300, #f2c94c); background: var(--warn-50, #fff8e6); }
.hrs-page .hoa-fact--warn .hrs-flab { color: var(--warn-700, #9a6a00); }
.hrs-page .hoa-fact--warn .hrs-flab > svg { color: var(--warn-600, #c78d00); }
/* ---- table cells ---- */
.hrs-page .hoa-id { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-secondary); }
.hrs-page .hoa-dash { color: var(--text-tertiary); }
.hrs-page .hoa-when { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hrs-page .hoa-namelink {
display: inline-flex; align-items: center; gap: 6px;
background: none; border: 0; padding: 0; cursor: pointer;
font-family: inherit; font-size: 13px; font-weight: 700; color: var(--p-700);
text-align: left; word-break: break-word;
}
.hrs-page .hoa-namelink:hover { color: var(--p-800, var(--p-700)); text-decoration: underline; }
.hrs-page .hoa-namelink > svg { opacity: .5; flex: none; }
/* client_id — public half of the credential, monospace, never truncated.
No copy affordance here on purpose: index.blade documents copy buttons
only inside the one-time credentials modal. */
.hrs-page .hoa-cid {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11.5px; color: var(--text-secondary); word-break: break-all;
}
/* ---- type chip + affiliate_tag sub-line ---- */
.hrs-page .hoa-typechip {
display: inline-flex; align-items: center;
border-radius: 999px; padding: 2px 10px;
font-size: 11px; font-weight: 700; white-space: nowrap;
border: 1px solid transparent;
}
.hrs-page .hoa-typechip--affiliator { background: var(--p-50); color: var(--p-700); border-color: var(--p-100); }
.hrs-page .hoa-typechip--payment_provider{ background: #eaf3ff; color: #1d4fa3; border-color: #cfe1fb; }
.hrs-page .hoa-typechip--game_provider { background: #eefaf2; color: #1f7a4d; border-color: #cfeddd; }
.hrs-page .hoa-typechip--onaim { background: #f4eefc; color: #6b3fa0; border-color: #e3d6f5; }
.hrs-page .hoa-typechip--general { background: var(--n-75, #f2f3f7); color: #4a5064; border-color: var(--border-default); }
.hrs-page .hoa-tag {
display: inline-flex; align-items: center; gap: 4px;
margin-top: 4px; font-size: 11px; color: var(--text-tertiary);
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
}
.hrs-page .hoa-tag--missing {
color: var(--warn-700, #9a6a00); background: var(--warn-50, #fff8e6);
border: 1px dashed var(--warn-300, #f2c94c); border-radius: 999px;
padding: 0 7px; font-weight: 700; font-family: inherit;
}
/* ---- scope chips ---- */
.hrs-page .hoa-scopes { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.hrs-page .hoa-scope {
display: inline-flex; align-items: center; gap: 2px;
border-radius: 5px; padding: 2px 8px;
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11px; font-weight: 700; white-space: nowrap;
border: 1px solid var(--border-default); background: var(--n-25); color: var(--text-secondary);
}
/* affiliator:read — the only scope any middleware reads. */
.hrs-page .hoa-scope--enforced { background: #eefaf2; border-color: #cfeddd; color: #1f7a4d; }
/* Stored, displayed, never checked. */
.hrs-page .hoa-scope--inert { border-style: dashed; color: var(--text-tertiary); }
/* scopes = null. Documented as "All", enforced as "none" — the chip has to
look like a claim under dispute, not like a green light. */
.hrs-page .hoa-scope--all {
background: var(--warn-50, #fff8e6); border-color: var(--warn-300, #f2c94c);
color: var(--warn-700, #9a6a00); font-family: inherit;
}
/* ---- status chip ---- */
.hrs-page .hoa-status {
display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 11px;
font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid transparent;
}
.hrs-page .hoa-status--on { background: #eefaf2; color: #1f7a4d; border-color: #cfeddd; }
.hrs-page .hoa-status--off { background: var(--n-75, #f2f3f7); color: #7a808f; border-color: var(--border-default); }
/* ---- row actions (Edit + Regenerate Secret; there is no delete) ---- */
.hrs-page .hoa-acts { display: inline-flex; gap: 6px; justify-content: center; }
.hrs-page .hoa-act {
width: 32px; height: 32px; border: 0; border-radius: 6px; cursor: pointer;
display: grid; place-items: center; color: #fff; transition: background .12s;
}
.hrs-page .hoa-act--edit { background: #3b82f6; }
.hrs-page .hoa-act--edit:hover { background: #2563eb; }
/* Regenerate is destructive (it revokes every live token) — red, not blue. */
.hrs-page .hoa-act--regen { background: #e9484a; }
.hrs-page .hoa-act--regen:hover { background: #d23c3e; }
/* ---- footer honesty line (no delete route) ---- */
.hrs-page .hoa-foot {
display: flex; align-items: flex-start; gap: 8px;
margin-top: 14px; padding: 10px 12px;
border: 1px dashed var(--border-default); border-radius: 8px; background: var(--n-25);
font-size: 11.5px; line-height: 1.6; color: var(--text-secondary);
}
.hrs-page .hoa-foot > svg { color: var(--text-tertiary); flex: none; margin-top: 2px; }
.hrs-page .hoa-foot code,
.hrs-page .hoa-hint code,
.hrs-page .hoa-callout code,
.hrs-page .hoa-once code {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11px; color: var(--text-primary);
background: rgba(15, 20, 32, .05); border-radius: 4px; padding: 0 4px;
}
/* ===================================================================
Editor — sectioned config panels (Settings.jsx shape)
=================================================================== */
.hrs-page .hoa-editor { display: flex; flex-direction: column; gap: 14px; }
.hrs-page .hoa-panel {
background: var(--n-0); border: 1px solid var(--border-default); border-radius: 10px;
box-shadow: var(--shadow-xs); overflow: hidden;
}
.hrs-page .hoa-panel__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 13px 18px; border-bottom: 1px solid var(--border-subtle);
background: var(--n-25);
}
.hrs-page .hoa-panel__title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.hrs-page .hoa-panel__sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; line-height: 1.5; }
.hrs-page .hoa-panel__sub code { font-size: 11px; }
.hrs-page .hoa-panel__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
/* Scopes is the security-critical panel — a red rail marks it. */
.hrs-page .hoa-panel--scopes { border-color: var(--p-200, var(--border-default)); }
.hrs-page .hoa-panel--scopes .hoa-panel__head {
background: var(--p-50); border-bottom-color: var(--p-100);
box-shadow: inset 3px 0 0 var(--p-500);
}
.hrs-page .hoa-grid { display: grid; gap: 14px; }
.hrs-page .hoa-grid--2 { grid-template-columns: 1fr 1fr; }
.hrs-page .hoa-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hrs-page .hoa-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.hrs-page .hoa-req { color: #e9484a; font-weight: 700; }
.hrs-page .hoa-hint { font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary); }
.hrs-page .hoa-hint--foot { text-align: center; padding-bottom: 6px; }
.hrs-page .hoa-fielderr { font-size: 11.5px; font-weight: 600; color: #e9484a; }
.hrs-page .hoa-invalid { border-color: #e9484a !important; box-shadow: 0 0 0 3px rgba(233, 72, 74, .12); }
/* read-only edit fields (Client ID / Created) */
.hrs-page .hoa-ro {
min-height: 36px; display: flex; align-items: center;
padding: 6px 10px; border: 1px dashed var(--border-default); border-radius: 6px;
background: var(--n-25); font-size: 12.5px; color: var(--text-secondary); word-break: break-all;
}
.hrs-page .hoa-switchrow { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.hrs-page .hoa-switchrow .hoa-hint { flex: 1 1 320px; }
.hrs-page .hoa-editfoot {
display: flex; justify-content: flex-end; gap: 10px;
padding-top: 2px;
}
/* ---- callouts (shared by editor + regenerate dialog) ---- */
.hrs-page .hoa-callout,
.hoa-modal .hoa-callout {
display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start;
padding: 11px 13px; border-radius: 8px; border: 1px solid;
font-size: 12px; line-height: 1.6;
}
.hrs-page .hoa-callout > svg,
.hoa-modal .hoa-callout > svg { margin-top: 1px; }
.hrs-page .hoa-callout__t,
.hoa-modal .hoa-callout__t { font-weight: 700; font-size: 12.5px; margin-bottom: 3px; }
.hrs-page .hoa-callout--danger, .hoa-modal .hoa-callout--danger { background: #fdecec; border-color: #f6c9c9; color: #8f2426; }
.hrs-page .hoa-callout--warn, .hoa-modal .hoa-callout--warn { background: var(--warn-50, #fff8e6); border-color: var(--warn-300, #f2c94c); color: #7a5400; }
.hrs-page .hoa-callout--ok, .hoa-modal .hoa-callout--ok { background: #eefaf2; border-color: #cfeddd; color: #17603c; }
.hrs-page .hoa-callout--info, .hoa-modal .hoa-callout--info { background: var(--n-25); border-color: var(--border-default); color: var(--text-secondary); }
.hrs-page .hoa-callout--danger code { background: rgba(143, 36, 38, .09); color: #6f1b1d; }
.hrs-page .hoa-callout--warn code { background: rgba(122, 84, 0, .10); color: #6a4900; }
.hrs-page .hoa-callout--ok code { background: rgba(23, 96, 60, .09); color: #125232; }
.hrs-page .hoa-ul { margin: 6px 0 4px; padding-left: 18px; }
.hrs-page .hoa-ul li { margin: 2px 0; }
/* ===================================================================
Modals — regenerate confirm + one-time credentials
=================================================================== */
.hoa-scrim { place-items: center; }
.hoa-modal { width: min(680px, 96vw); padding: 0; }
.hoa-modal--creds { width: min(760px, 96vw); }
.hoa-modal__head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
}
.hoa-modal__title { font-size: 17px; font-weight: 700; color: #2b2f3a; letter-spacing: -0.01em; }
.hoa-x {
width: 30px; height: 30px; border: 0; border-radius: 6px; background: var(--n-50, #f2f3f7);
color: #6b7280; cursor: pointer; display: grid; place-items: center;
}
.hoa-x:hover { background: #e8eaef; color: #2b2f3a; }
.hoa-modal__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.hoa-modal__foot {
display: flex; justify-content: flex-end; gap: 10px;
padding: 14px 20px; border-top: 1px solid var(--border-subtle); background: var(--n-25);
}
.hoa-modal .hoa-hint { font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary); }
.hoa-modal .hoa-hint code,
.hoa-modal .hoa-once code,
.hoa-modal .hoa-flash code {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11px; background: rgba(15, 20, 32, .05); border-radius: 4px; padding: 0 4px;
}
.hoa-dlgq { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.5; }
.hoa-modal .mono { font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace); }
/* server flash after regenerateSecret */
.hoa-flash {
display: flex; align-items: center; gap: 8px;
padding: 10px 13px; border-radius: 8px;
background: #eefaf2; border: 1px solid #cfeddd; color: #17603c;
font-size: 12.5px; font-weight: 600;
}
/* "shown exactly once" band — the loudest thing in the modal */
.hoa-once {
display: grid; grid-template-columns: 20px 1fr; gap: 11px; align-items: start;
padding: 12px 14px; border-radius: 8px;
background: #fdecec; border: 1px solid #f6c9c9; color: #8f2426;
font-size: 12px; line-height: 1.6;
}
.hoa-once > svg { margin-top: 2px; }
.hoa-once code { background: rgba(143, 36, 38, .09) !important; color: #6f1b1d; }
/* credential rows */
.hoa-creds { display: flex; flex-direction: column; gap: 8px; }
.hoa-cred {
display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; align-items: center;
padding: 9px 12px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--n-0);
}
.hoa-cred__k { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
.hoa-cred__v { font-size: 12.5px; color: var(--text-primary); word-break: break-all; }
.hoa-cred__v.mono { font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace); font-size: 12px; }
.hoa-cred--secret { border-color: #f6c9c9; background: #fff7f7; }
.hoa-cred--secret .hoa-cred__k { color: #8f2426; }
.hoa-cred--secret .hoa-cred__v { font-weight: 700; color: #6f1b1d; }
.hoa-copy {
display: inline-flex; align-items: center; gap: 5px;
height: 28px; padding: 0 10px; border-radius: 6px; cursor: pointer;
border: 1px solid var(--border-default); background: var(--n-0);
font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
transition: border-color .12s, color .12s, background .12s;
}
.hoa-copy:hover { border-color: var(--p-300); color: var(--p-600); }
.hoa-copy--done { background: #eefaf2; border-color: #cfeddd; color: #1f7a4d; }
/* ===================================================================
Mobile stacked cards (rendered by HrsTable's renderCard)
Own classes — .hrs-card__* is shared with every other Hrs screen and
must not be restyled from here.
=================================================================== */
.hrs-page .hoa-cardtop {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
font-size: 13.5px; margin-bottom: 8px;
}
.hrs-page .hoa-cardchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.hrs-page .hoa-cardchips .hoa-tag { margin-top: 0; }
.hrs-page .hoa-cardscopes { margin-bottom: 8px; }
.hrs-page .hoa-details > summary {
list-style: none; cursor: pointer;
font-size: 12px; font-weight: 600; color: var(--p-600);
padding: 6px 0 2px; border-top: 1px dashed var(--border-default);
}
.hrs-page .hoa-details > summary::-webkit-details-marker { display: none; }
.hrs-page .hoa-details > summary::after { content: " ▾"; opacity: .6; }
.hrs-page .hoa-details[open] > summary::after { content: " ▴"; }
.hrs-page .hoa-details .hrs-card__grid { padding-top: 6px; }
.hrs-page .hoa-details .hoa-cid { text-align: right; font-weight: 600; }
.hrs-page .hoa-cardacts { display: flex; gap: 8px; margin-top: 10px; }
.hrs-page .hoa-cardacts .btn { flex: 1; justify-content: center; }
.hrs-page .hoa-cardregen { color: #e9484a; }
/* ===================================================================
Responsive (brief §11)
=================================================================== */
@media (max-width: 1100px) {
/* Editor drops to one column before the fields get too narrow to read. */
.hrs-page .hoa-grid--2 { grid-template-columns: 1fr; }
.hrs-page .hoa-listbar { gap: 8px; }
.hrs-page .hoa-fact { min-width: 132px; }
}
@media (max-width: 860px) {
/* Context strip: the fact cards stack two-up and the Results card stops
floating right, instead of squeezing five cards onto one line. There is
no filter sheet to collapse into — this screen has no filters. */
.hrs-page .hoa-listbar { display: grid; grid-template-columns: 1fr 1fr; }
.hrs-page .hoa-fact,
.hrs-page .hoa-listbar .hrs-fcard--result { min-width: 0; margin-left: 0; }
.hrs-page .hoa-listbar .hrs-fcard--result { grid-column: 1 / -1; }
/* Editor panels lose their side padding so the inputs get full width. */
.hrs-page .hoa-panel__head { padding: 12px 14px; }
.hrs-page .hoa-panel__body { padding: 14px; gap: 12px; }
.hrs-page .hoa-editfoot { flex-direction: column-reverse; gap: 8px; }
.hrs-page .hoa-editfoot .btn { width: 100%; justify-content: center; height: 40px; }
.hrs-page .hoa-switchrow { flex-direction: column; gap: 8px; }
/* Modals go full-screen (brief §11). */
.hoa-scrim { padding: 0; place-items: stretch; }
.hoa-modal, .hoa-modal--creds {
width: 100%; min-height: 100%; border-radius: 0;
display: flex; flex-direction: column;
}
.hoa-modal__body { flex: 1; overflow: auto; }
.hoa-modal__foot { position: sticky; bottom: 0; }
.hoa-modal__foot .btn { flex: 1; justify-content: center; height: 40px; }
/* Credential rows stack: label, value, then a full-width Copy button —
a 36-character UUID and a 48-character secret cannot share a line. */
.hoa-cred { grid-template-columns: 1fr; gap: 6px; }
.hoa-copy { width: 100%; justify-content: center; height: 34px; }
/* Card head: long client names wrap instead of crushing the status chip. */
.hrs-page .hoa-cardtop { align-items: flex-start; }
.hrs-page .hoa-cardacts { flex-direction: column; }
}
/* ---- HostCmsHelp ---- */
/* ===================================================================
CMS ▾ → Help categories + Help pages (src/pages/HostCmsHelp.jsx)
Page chrome (shell, filter hero, table, pager, mobile sheet/cards)
comes from the hrs-* report shell. These are the screen-local bits:
list cells and the footer-visibility flags, the create/edit modals,
the placeholder-tag palette and the source/preview body editor.
Iwakiri red ramp only (--p-*) + shared neutral/semantic tokens.
=================================================================== */
/* ---- header cross-link ("Help Pages" ⇄ "Categories") ----
Outlined so it never competes with the red primary next to it, but the
same height/shape as the hrs-btn family it sits beside. */
.hhp-linkbtn {
display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px;
border-radius: 8px; border: 1px solid var(--border-strong); background: var(--n-0);
font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
cursor: pointer; white-space: nowrap;
transition: background .12s, color .12s, border-color .12s;
}
.hhp-linkbtn:hover { background: var(--p-50); border-color: var(--p-200); color: var(--p-700); }
.hhp-linkbtn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* ---- list cells ---- */
.hhp-id {
font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hhp-namelink {
display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; min-width: 0; padding: 3px 6px 3px 0; border: 0; background: none;
font-family: inherit; font-size: 13px; font-weight: 600; color: var(--p-700);
text-align: left; cursor: pointer; border-radius: 6px;
}
.hhp-namelink span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hhp-namelink:hover { color: var(--p-500); background: var(--p-50); padding-left: 6px; }
.hhp-namelink:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hhp-sub {
display: block; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 12.5px; color: var(--text-secondary);
}
.hhp-dash { color: var(--text-tertiary); font-weight: 600; }
.hhp-count {
display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px;
border-radius: 999px; background: var(--n-75); border: 1px solid var(--border-subtle);
font-size: 11.5px; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.hhp-count--zero { color: var(--text-tertiary); font-weight: 500; background: transparent; }
.hhp-chip { font-size: 10.5px; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hhp-viscell { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
/* the "visible but unreachable / orphaned" markers */
.hhp-flag {
display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
color: var(--warn-500);
}
.hhp-flag--err { color: var(--err-500); }
/* ---- row actions ---- */
.hhp-acts { display: inline-flex; gap: 6px; justify-content: center; }
.hhp-act {
display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px;
border: 1px solid var(--border-default); background: var(--n-0); color: var(--text-tertiary);
cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.hhp-act:hover { background: var(--n-50); color: var(--text-primary); }
.hhp-act--edit:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hhp-act--danger:hover { background: var(--err-50); border-color: var(--err-100); color: var(--err-700); }
.hhp-act:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hhp-card__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hhp-card__del { color: var(--err-700); }
/* ---- modal chrome (shared .bp-modal, resized + sectioned) ---- */
.hhp-modal { width: min(600px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.hhp-modal--wide { width: min(940px, calc(100vw - 32px)); }
.hhp-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 14px 18px; border-bottom: 1px solid var(--border-default);
}
.hhp-modal__title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.hhp-modal__sub {
margin-top: 2px; font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary);
}
.hhp-modal__body {
padding: 16px 18px; display: flex; flex-direction: column; gap: 14px;
max-height: calc(100vh - 210px); overflow-y: auto;
}
.hhp-modal__foot {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 18px; border-top: 1px solid var(--border-default); background: var(--n-25);
}
.hhp-x {
display: inline-grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
border: 0; border-radius: 7px; background: none; color: var(--text-tertiary); cursor: pointer;
}
.hhp-x:hover { background: var(--n-50); color: var(--text-primary); }
/* ---- form ---- */
.hhp-sectitle {
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
color: var(--p-700); padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle);
}
.hhp-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.hhp-label {
display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
font-size: 12px; font-weight: 700; color: var(--text-secondary);
}
.hhp-req { color: var(--err-500); }
.hhp-col { font-weight: 500; color: var(--text-tertiary); font-size: 11px; }
.hhp-col code { font-size: 10.5px; }
.hhp-badge {
font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--warn-700); background: var(--warn-50); border: 1px solid var(--warn-100);
border-radius: 999px; padding: 1px 7px;
}
.hhp-hint { font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary); }
.hhp-hint b { color: var(--text-secondary); }
.hhp-hint code, .hhp-trap code, .hhp-dlgq code { font-family: var(--font-mono); font-size: 10.5px; }
.hhp-fielderr { font-size: 11.5px; font-weight: 600; color: var(--err-700); }
.hhp-invalid { border-color: var(--err-300) !important; background: var(--err-50); }
.hhp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hhp-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hhp-check {
display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer;
}
.hhp-check input { width: 15px; height: 15px; accent-color: var(--p-500); cursor: pointer; }
.hhp-err {
display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600;
color: var(--err-700);
}
.hhp-err--banner {
padding: 9px 12px; border-radius: 8px;
background: var(--err-50); border: 1px solid var(--err-100);
}
/* the footer-reachability callout, used in both forms and in the delete dialog */
.hhp-trap {
display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border-radius: 8px;
font-size: 11.5px; line-height: 1.6;
color: var(--warn-700); background: var(--warn-50); border: 1px solid var(--warn-100);
}
.hhp-trap--ok { color: var(--ok-700); background: var(--ok-50); border-color: var(--ok-100); }
.hhp-trap svg { flex-shrink: 0; margin-top: 2px; }
.hhp-trap b { font-weight: 700; }
.hhp-dlgq { font-size: 13.5px; color: var(--text-primary); }
/* ---- placeholder-tag palette ---- */
.hhp-tags {
border: 1px solid var(--border-default); border-radius: 10px; overflow: hidden;
background: var(--n-25);
}
.hhp-tags__head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); background: var(--n-0);
font-size: 11.5px; font-weight: 700; color: var(--p-700);
text-transform: uppercase; letter-spacing: .05em;
}
.hhp-tags__head > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.hhp-tags__count { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-tertiary); }
.hhp-tags__list {
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 6px; padding: 10px 12px;
}
.hhp-tag {
display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
padding: 6px 9px; border-radius: 7px; border: 1px solid var(--border-subtle);
background: var(--n-0); font-family: inherit; text-align: left; cursor: pointer;
transition: background .12s, border-color .12s;
}
.hhp-tag:hover:not(:disabled) { background: var(--p-50); border-color: var(--p-100); }
.hhp-tag:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hhp-tag:disabled { cursor: default; opacity: .62; }
.hhp-tag__code {
font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--p-700);
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hhp-tag__cap {
display: inline-flex; align-items: center; gap: 3px;
font-size: 10.5px; color: var(--text-tertiary);
}
.hhp-tag--dyn { border-style: dashed; }
.hhp-tags__note {
padding: 0 12px 10px; font-size: 11px; line-height: 1.6; color: var(--text-tertiary);
}
.hhp-tags__note b { color: var(--text-secondary); }
/* ---- language tab strip (EN / IT / PT / ES) ---- */
.hhp-langs {
display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px;
border-bottom: 1px solid var(--border-subtle);
scrollbar-width: thin;
}
.hhp-lang {
position: relative; display: inline-flex; align-items: baseline; gap: 6px; flex-shrink: 0;
padding: 7px 12px; border: 0; border-bottom: 2px solid transparent; background: none;
font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-tertiary);
cursor: pointer;
}
.hhp-lang:hover { color: var(--text-secondary); }
.hhp-lang--on { color: var(--p-700); border-bottom-color: var(--p-600); }
.hhp-lang--err { color: var(--err-700); }
.hhp-lang__full { font-size: 11px; font-weight: 500; opacity: .8; }
.hhp-lang__dot {
width: 6px; height: 6px; border-radius: 999px; background: var(--err-500); align-self: center;
}
.hhp-lang:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: 6px; }
/* ---- body editor (TinyMCE stand-in: documented Source view + preview) ---- */
.hhp-ed { border: 1px solid var(--border-default); border-radius: 9px; overflow: hidden; background: var(--n-0); }
.hhp-ed--err { border-color: var(--err-300); }
.hhp-ed__bar {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 6px 8px; background: var(--n-25); border-bottom: 1px solid var(--border-subtle);
}
.hhp-ed__modes { display: inline-flex; gap: 4px; }
.hhp-mode {
padding: 4px 10px; border-radius: 6px; border: 1px solid transparent; background: none;
font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-tertiary); cursor: pointer;
}
.hhp-mode:hover { color: var(--text-primary); background: var(--n-50); }
.hhp-mode--on { background: var(--n-0); border-color: var(--border-default); color: var(--p-700); }
.hhp-mode:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hhp-ed__count { font-size: 10.5px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.hhp-ed__ta {
display: block; width: 100%; min-height: 200px; resize: vertical; border: 0; padding: 11px 12px;
font-family: var(--font-mono); font-size: 12px; line-height: 1.65; color: var(--text-primary);
background: var(--n-0);
}
.hhp-ed__ta:focus { outline: none; box-shadow: inset 0 0 0 2px var(--p-100); }
.hhp-ed__prev {
min-height: 200px; max-height: 340px; overflow-y: auto; padding: 12px 14px;
font-size: 13px; line-height: 1.65; color: var(--text-primary);
}
.hhp-ed__prev h3 { font-size: 15px; font-weight: 700; margin: 0 0 8px; color: var(--p-700); }
.hhp-ed__prev p { margin: 0 0 9px; }
.hhp-ed__prev a { color: var(--text-link); }
.hhp-ph {
padding: 0 3px; border-radius: 4px; font-family: var(--font-mono); font-size: 11.5px;
color: var(--p-700); background: var(--p-50); border: 1px solid var(--p-100);
}
/* ---- responsive (brief §11) ---- */
@media (max-width: 860px) {
/* modals go full-screen instead of a fixed-width centred dialog */
.hhp-scrim { padding: 0; }
.hhp-modal, .hhp-modal--wide {
width: 100vw; height: 100dvh; max-height: none; border-radius: 0;
display: flex; flex-direction: column;
}
.hhp-modal__body { max-height: none; flex: 1; }
.hhp-modal__foot { position: sticky; bottom: 0; }
.hhp-modal__foot .btn { flex: 1; justify-content: center; }
/* name grids stack; the tag palette becomes a single scrollable column */
.hhp-grid3, .hhp-grid2 { grid-template-columns: 1fr; }
.hhp-tags__list { grid-template-columns: 1fr; max-height: 190px; overflow-y: auto; }
/* language pills stay a scrollable strip, full names drop off */
.hhp-lang__full { display: none; }
.hhp-ed__ta, .hhp-ed__prev { min-height: 170px; }
.hhp-sub { max-width: none; white-space: normal; }
.hhp-card__acts .btn { flex: 1; justify-content: center; }
}
@media (max-width: 520px) {
.hhp-modal__head { padding: 12px 14px; }
.hhp-modal__body { padding: 14px; }
.hhp-modal__foot { padding: 10px 14px; }
.hhp-modal__title { font-size: 15px; }
.hhp-tags__head { padding: 8px 10px; }
.hhp-tags__list { padding: 8px 10px; }
}
/* ---- header cross-link ("Help Pages" ⇄ "Categories") ----
Outlined so it never competes with the red primary next to it, but the
same height/shape as the hrs-btn family it sits beside. */
.hhp-linkbtn {
display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px;
border-radius: 8px; border: 1px solid var(--border-strong); background: var(--n-0);
font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
cursor: pointer; white-space: nowrap;
transition: background .12s, color .12s, border-color .12s;
}
.hhp-linkbtn:hover { background: var(--p-50); border-color: var(--p-200); color: var(--p-700); }
.hhp-linkbtn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* ---- list cells ---- */
.hhp-id {
font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hhp-namelink {
display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; min-width: 0; padding: 3px 6px 3px 0; border: 0; background: none;
font-family: inherit; font-size: 13px; font-weight: 600; color: var(--p-700);
text-align: left; cursor: pointer; border-radius: 6px;
}
.hhp-namelink span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hhp-namelink:hover { color: var(--p-500); background: var(--p-50); padding-left: 6px; }
.hhp-namelink:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hhp-sub {
display: block; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 12.5px; color: var(--text-secondary);
}
.hhp-dash { color: var(--text-tertiary); font-weight: 600; }
.hhp-count {
display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px;
border-radius: 999px; background: var(--n-75); border: 1px solid var(--border-subtle);
font-size: 11.5px; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.hhp-count--zero { color: var(--text-tertiary); font-weight: 500; background: transparent; }
.hhp-chip { font-size: 10.5px; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hhp-viscell { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
/* the "visible but unreachable / orphaned" markers */
.hhp-flag {
display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
color: var(--warn-500);
}
.hhp-flag--err { color: var(--err-500); }
/* ---- row actions ---- */
.hhp-acts { display: inline-flex; gap: 6px; justify-content: center; }
.hhp-act {
display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px;
border: 1px solid var(--border-default); background: var(--n-0); color: var(--text-tertiary);
cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.hhp-act:hover { background: var(--n-50); color: var(--text-primary); }
.hhp-act--edit:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hhp-act--danger:hover { background: var(--err-50); border-color: var(--err-100); color: var(--err-700); }
.hhp-act:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hhp-card__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hhp-card__del { color: var(--err-700); }
/* ---- modal chrome (shared .bp-modal, resized + sectioned) ---- */
.hhp-modal { width: min(600px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.hhp-modal--wide { width: min(940px, calc(100vw - 32px)); }
.hhp-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 14px 18px; border-bottom: 1px solid var(--border-default);
}
.hhp-modal__title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.hhp-modal__sub {
margin-top: 2px; font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary);
}
.hhp-modal__body {
padding: 16px 18px; display: flex; flex-direction: column; gap: 14px;
max-height: calc(100vh - 210px); overflow-y: auto;
}
.hhp-modal__foot {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 18px; border-top: 1px solid var(--border-default); background: var(--n-25);
}
.hhp-x {
display: inline-grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
border: 0; border-radius: 7px; background: none; color: var(--text-tertiary); cursor: pointer;
}
.hhp-x:hover { background: var(--n-50); color: var(--text-primary); }
/* ---- form ---- */
.hhp-sectitle {
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
color: var(--p-700); padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle);
}
.hhp-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.hhp-label {
display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
font-size: 12px; font-weight: 700; color: var(--text-secondary);
}
.hhp-req { color: var(--err-500); }
.hhp-col { font-weight: 500; color: var(--text-tertiary); font-size: 11px; }
.hhp-col code { font-size: 10.5px; }
.hhp-badge {
font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--warn-700); background: var(--warn-50); border: 1px solid var(--warn-100);
border-radius: 999px; padding: 1px 7px;
}
.hhp-hint { font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary); }
.hhp-hint b { color: var(--text-secondary); }
.hhp-hint code, .hhp-trap code, .hhp-dlgq code { font-family: var(--font-mono); font-size: 10.5px; }
.hhp-fielderr { font-size: 11.5px; font-weight: 600; color: var(--err-700); }
.hhp-invalid { border-color: var(--err-300) !important; background: var(--err-50); }
.hhp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hhp-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hhp-check {
display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer;
}
.hhp-check input { width: 15px; height: 15px; accent-color: var(--p-500); cursor: pointer; }
.hhp-err {
display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600;
color: var(--err-700);
}
.hhp-err--banner {
padding: 9px 12px; border-radius: 8px;
background: var(--err-50); border: 1px solid var(--err-100);
}
/* the footer-reachability callout, used in both forms and in the delete dialog */
.hhp-trap {
display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border-radius: 8px;
font-size: 11.5px; line-height: 1.6;
color: var(--warn-700); background: var(--warn-50); border: 1px solid var(--warn-100);
}
.hhp-trap--ok { color: var(--ok-700); background: var(--ok-50); border-color: var(--ok-100); }
.hhp-trap svg { flex-shrink: 0; margin-top: 2px; }
.hhp-trap b { font-weight: 700; }
.hhp-dlgq { font-size: 13.5px; color: var(--text-primary); }
/* ---- placeholder-tag palette ---- */
.hhp-tags {
border: 1px solid var(--border-default); border-radius: 10px; overflow: hidden;
background: var(--n-25);
}
.hhp-tags__head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); background: var(--n-0);
font-size: 11.5px; font-weight: 700; color: var(--p-700);
text-transform: uppercase; letter-spacing: .05em;
}
.hhp-tags__head > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.hhp-tags__count { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-tertiary); }
.hhp-tags__list {
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 6px; padding: 10px 12px;
}
.hhp-tag {
display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
padding: 6px 9px; border-radius: 7px; border: 1px solid var(--border-subtle);
background: var(--n-0); font-family: inherit; text-align: left; cursor: pointer;
transition: background .12s, border-color .12s;
}
.hhp-tag:hover:not(:disabled) { background: var(--p-50); border-color: var(--p-100); }
.hhp-tag:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hhp-tag:disabled { cursor: default; opacity: .62; }
.hhp-tag__code {
font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--p-700);
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hhp-tag__cap {
display: inline-flex; align-items: center; gap: 3px;
font-size: 10.5px; color: var(--text-tertiary);
}
.hhp-tag--dyn { border-style: dashed; }
.hhp-tags__note {
padding: 0 12px 10px; font-size: 11px; line-height: 1.6; color: var(--text-tertiary);
}
.hhp-tags__note b { color: var(--text-secondary); }
/* ---- language tab strip (EN / IT / PT / ES) ---- */
.hhp-langs {
display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px;
border-bottom: 1px solid var(--border-subtle);
scrollbar-width: thin;
}
.hhp-lang {
position: relative; display: inline-flex; align-items: baseline; gap: 6px; flex-shrink: 0;
padding: 7px 12px; border: 0; border-bottom: 2px solid transparent; background: none;
font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-tertiary);
cursor: pointer;
}
.hhp-lang:hover { color: var(--text-secondary); }
.hhp-lang--on { color: var(--p-700); border-bottom-color: var(--p-600); }
.hhp-lang--err { color: var(--err-700); }
.hhp-lang__full { font-size: 11px; font-weight: 500; opacity: .8; }
.hhp-lang__dot {
width: 6px; height: 6px; border-radius: 999px; background: var(--err-500); align-self: center;
}
.hhp-lang:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: 6px; }
/* ---- body editor (TinyMCE stand-in: documented Source view + preview) ---- */
.hhp-ed { border: 1px solid var(--border-default); border-radius: 9px; overflow: hidden; background: var(--n-0); }
.hhp-ed--err { border-color: var(--err-300); }
.hhp-ed__bar {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 6px 8px; background: var(--n-25); border-bottom: 1px solid var(--border-subtle);
}
.hhp-ed__modes { display: inline-flex; gap: 4px; }
.hhp-mode {
padding: 4px 10px; border-radius: 6px; border: 1px solid transparent; background: none;
font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-tertiary); cursor: pointer;
}
.hhp-mode:hover { color: var(--text-primary); background: var(--n-50); }
.hhp-mode--on { background: var(--n-0); border-color: var(--border-default); color: var(--p-700); }
.hhp-mode:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hhp-ed__count { font-size: 10.5px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.hhp-ed__ta {
display: block; width: 100%; min-height: 200px; resize: vertical; border: 0; padding: 11px 12px;
font-family: var(--font-mono); font-size: 12px; line-height: 1.65; color: var(--text-primary);
background: var(--n-0);
}
.hhp-ed__ta:focus { outline: none; box-shadow: inset 0 0 0 2px var(--p-100); }
.hhp-ed__prev {
min-height: 200px; max-height: 340px; overflow-y: auto; padding: 12px 14px;
font-size: 13px; line-height: 1.65; color: var(--text-primary);
}
.hhp-ed__prev h3 { font-size: 15px; font-weight: 700; margin: 0 0 8px; color: var(--p-700); }
.hhp-ed__prev p { margin: 0 0 9px; }
.hhp-ed__prev a { color: var(--text-link); }
.hhp-ph {
padding: 0 3px; border-radius: 4px; font-family: var(--font-mono); font-size: 11.5px;
color: var(--p-700); background: var(--p-50); border: 1px solid var(--p-100);
}
/* ---- responsive (brief §11) ---- */
@media (max-width: 860px) {
/* modals go full-screen instead of a fixed-width centred dialog */
.hhp-scrim { padding: 0; }
.hhp-modal, .hhp-modal--wide {
width: 100vw; height: 100dvh; max-height: none; border-radius: 0;
display: flex; flex-direction: column;
}
.hhp-modal__body { max-height: none; flex: 1; }
.hhp-modal__foot { position: sticky; bottom: 0; }
.hhp-modal__foot .btn { flex: 1; justify-content: center; }
/* name grids stack; the tag palette becomes a single scrollable column */
.hhp-grid3, .hhp-grid2 { grid-template-columns: 1fr; }
.hhp-tags__list { grid-template-columns: 1fr; max-height: 190px; overflow-y: auto; }
/* language pills stay a scrollable strip, full names drop off */
.hhp-lang__full { display: none; }
.hhp-ed__ta, .hhp-ed__prev { min-height: 170px; }
.hhp-sub { max-width: none; white-space: normal; }
.hhp-card__acts .btn { flex: 1; justify-content: center; }
}
@media (max-width: 520px) {
.hhp-modal__head { padding: 12px 14px; }
.hhp-modal__body { padding: 14px; }
.hhp-modal__foot { padding: 10px 14px; }
.hhp-modal__title { font-size: 15px; }
.hhp-tags__head { padding: 8px 10px; }
.hhp-tags__list { padding: 8px 10px; }
}
/* ---- list cells ---- */
.hhp-id {
font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hhp-namelink {
display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; min-width: 0; padding: 3px 6px 3px 0; border: 0; background: none;
font-family: inherit; font-size: 13px; font-weight: 600; color: var(--p-700);
text-align: left; cursor: pointer; border-radius: 6px;
}
.hhp-namelink span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hhp-namelink:hover { color: var(--p-500); background: var(--p-50); padding-left: 6px; }
.hhp-namelink:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hhp-sub {
display: block; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 12.5px; color: var(--text-secondary);
}
.hhp-dash { color: var(--text-tertiary); font-weight: 600; }
.hhp-count {
display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px;
border-radius: 999px; background: var(--n-75); border: 1px solid var(--border-subtle);
font-size: 11.5px; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.hhp-count--zero { color: var(--text-tertiary); font-weight: 500; background: transparent; }
.hhp-chip { font-size: 10.5px; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hhp-viscell { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
/* the "visible but unreachable / orphaned" markers */
.hhp-flag {
display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
color: var(--warn-500);
}
.hhp-flag--err { color: var(--err-500); }
/* ---- row actions ---- */
.hhp-acts { display: inline-flex; gap: 6px; justify-content: center; }
.hhp-act {
display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px;
border: 1px solid var(--border-default); background: var(--n-0); color: var(--text-tertiary);
cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.hhp-act:hover { background: var(--n-50); color: var(--text-primary); }
.hhp-act--edit:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hhp-act--danger:hover { background: var(--err-50); border-color: var(--err-100); color: var(--err-700); }
.hhp-act:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hhp-card__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hhp-card__del { color: var(--err-700); }
/* ---- modal chrome (shared .bp-modal, resized + sectioned) ---- */
.hhp-modal { width: min(600px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.hhp-modal--wide { width: min(940px, calc(100vw - 32px)); }
.hhp-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 14px 18px; border-bottom: 1px solid var(--border-default);
}
.hhp-modal__title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.hhp-modal__sub {
margin-top: 2px; font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary);
}
.hhp-modal__body {
padding: 16px 18px; display: flex; flex-direction: column; gap: 14px;
max-height: calc(100vh - 210px); overflow-y: auto;
}
.hhp-modal__foot {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 18px; border-top: 1px solid var(--border-default); background: var(--n-25);
}
.hhp-x {
display: inline-grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
border: 0; border-radius: 7px; background: none; color: var(--text-tertiary); cursor: pointer;
}
.hhp-x:hover { background: var(--n-50); color: var(--text-primary); }
/* ---- form ---- */
.hhp-sectitle {
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
color: var(--p-700); padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle);
}
.hhp-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.hhp-label {
display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
font-size: 12px; font-weight: 700; color: var(--text-secondary);
}
.hhp-req { color: var(--err-500); }
.hhp-col { font-weight: 500; color: var(--text-tertiary); font-size: 11px; }
.hhp-col code { font-size: 10.5px; }
.hhp-badge {
font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--warn-700); background: var(--warn-50); border: 1px solid var(--warn-100);
border-radius: 999px; padding: 1px 7px;
}
.hhp-hint { font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary); }
.hhp-hint b { color: var(--text-secondary); }
.hhp-hint code, .hhp-trap code, .hhp-dlgq code { font-family: var(--font-mono); font-size: 10.5px; }
.hhp-fielderr { font-size: 11.5px; font-weight: 600; color: var(--err-700); }
.hhp-invalid { border-color: var(--err-300) !important; background: var(--err-50); }
.hhp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hhp-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hhp-check {
display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer;
}
.hhp-check input { width: 15px; height: 15px; accent-color: var(--p-500); cursor: pointer; }
.hhp-err {
display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600;
color: var(--err-700);
}
.hhp-err--banner {
padding: 9px 12px; border-radius: 8px;
background: var(--err-50); border: 1px solid var(--err-100);
}
/* the footer-reachability callout, used in both forms and in the delete dialog */
.hhp-trap {
display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border-radius: 8px;
font-size: 11.5px; line-height: 1.6;
color: var(--warn-700); background: var(--warn-50); border: 1px solid var(--warn-100);
}
.hhp-trap--ok { color: var(--ok-700); background: var(--ok-50); border-color: var(--ok-100); }
.hhp-trap svg { flex-shrink: 0; margin-top: 2px; }
.hhp-trap b { font-weight: 700; }
.hhp-dlgq { font-size: 13.5px; color: var(--text-primary); }
/* ---- placeholder-tag palette ---- */
.hhp-tags {
border: 1px solid var(--border-default); border-radius: 10px; overflow: hidden;
background: var(--n-25);
}
.hhp-tags__head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); background: var(--n-0);
font-size: 11.5px; font-weight: 700; color: var(--p-700);
text-transform: uppercase; letter-spacing: .05em;
}
.hhp-tags__head > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.hhp-tags__count { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-tertiary); }
.hhp-tags__list {
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 6px; padding: 10px 12px;
}
.hhp-tag {
display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
padding: 6px 9px; border-radius: 7px; border: 1px solid var(--border-subtle);
background: var(--n-0); font-family: inherit; text-align: left; cursor: pointer;
transition: background .12s, border-color .12s;
}
.hhp-tag:hover:not(:disabled) { background: var(--p-50); border-color: var(--p-100); }
.hhp-tag:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hhp-tag:disabled { cursor: default; opacity: .62; }
.hhp-tag__code {
font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--p-700);
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hhp-tag__cap {
display: inline-flex; align-items: center; gap: 3px;
font-size: 10.5px; color: var(--text-tertiary);
}
.hhp-tag--dyn { border-style: dashed; }
.hhp-tags__note {
padding: 0 12px 10px; font-size: 11px; line-height: 1.6; color: var(--text-tertiary);
}
.hhp-tags__note b { color: var(--text-secondary); }
/* ---- language tab strip (EN / IT / PT / ES) ---- */
.hhp-langs {
display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px;
border-bottom: 1px solid var(--border-subtle);
scrollbar-width: thin;
}
.hhp-lang {
position: relative; display: inline-flex; align-items: baseline; gap: 6px; flex-shrink: 0;
padding: 7px 12px; border: 0; border-bottom: 2px solid transparent; background: none;
font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-tertiary);
cursor: pointer;
}
.hhp-lang:hover { color: var(--text-secondary); }
.hhp-lang--on { color: var(--p-700); border-bottom-color: var(--p-600); }
.hhp-lang--err { color: var(--err-700); }
.hhp-lang__full { font-size: 11px; font-weight: 500; opacity: .8; }
.hhp-lang__dot {
width: 6px; height: 6px; border-radius: 999px; background: var(--err-500); align-self: center;
}
.hhp-lang:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: 6px; }
/* ---- body editor (TinyMCE stand-in: documented Source view + preview) ---- */
.hhp-ed { border: 1px solid var(--border-default); border-radius: 9px; overflow: hidden; background: var(--n-0); }
.hhp-ed--err { border-color: var(--err-300); }
.hhp-ed__bar {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 6px 8px; background: var(--n-25); border-bottom: 1px solid var(--border-subtle);
}
.hhp-ed__modes { display: inline-flex; gap: 4px; }
.hhp-mode {
padding: 4px 10px; border-radius: 6px; border: 1px solid transparent; background: none;
font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-tertiary); cursor: pointer;
}
.hhp-mode:hover { color: var(--text-primary); background: var(--n-50); }
.hhp-mode--on { background: var(--n-0); border-color: var(--border-default); color: var(--p-700); }
.hhp-mode:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hhp-ed__count { font-size: 10.5px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.hhp-ed__ta {
display: block; width: 100%; min-height: 200px; resize: vertical; border: 0; padding: 11px 12px;
font-family: var(--font-mono); font-size: 12px; line-height: 1.65; color: var(--text-primary);
background: var(--n-0);
}
.hhp-ed__ta:focus { outline: none; box-shadow: inset 0 0 0 2px var(--p-100); }
.hhp-ed__prev {
min-height: 200px; max-height: 340px; overflow-y: auto; padding: 12px 14px;
font-size: 13px; line-height: 1.65; color: var(--text-primary);
}
.hhp-ed__prev h3 { font-size: 15px; font-weight: 700; margin: 0 0 8px; color: var(--p-700); }
.hhp-ed__prev p { margin: 0 0 9px; }
.hhp-ed__prev a { color: var(--text-link); }
.hhp-ph {
padding: 0 3px; border-radius: 4px; font-family: var(--font-mono); font-size: 11.5px;
color: var(--p-700); background: var(--p-50); border: 1px solid var(--p-100);
}
/* ---- responsive (brief §11) ---- */
@media (max-width: 860px) {
/* modals go full-screen instead of a fixed-width centred dialog */
.hhp-scrim { padding: 0; }
.hhp-modal, .hhp-modal--wide {
width: 100vw; height: 100dvh; max-height: none; border-radius: 0;
display: flex; flex-direction: column;
}
.hhp-modal__body { max-height: none; flex: 1; }
.hhp-modal__foot { position: sticky; bottom: 0; }
.hhp-modal__foot .btn { flex: 1; justify-content: center; }
/* name grids stack; the tag palette becomes a single scrollable column */
.hhp-grid3, .hhp-grid2 { grid-template-columns: 1fr; }
.hhp-tags__list { grid-template-columns: 1fr; max-height: 190px; overflow-y: auto; }
/* language pills stay a scrollable strip, full names drop off */
.hhp-lang__full { display: none; }
.hhp-ed__ta, .hhp-ed__prev { min-height: 170px; }
.hhp-sub { max-width: none; white-space: normal; }
.hhp-card__acts .btn { flex: 1; justify-content: center; }
}
@media (max-width: 520px) {
.hhp-modal__head { padding: 12px 14px; }
.hhp-modal__body { padding: 14px; }
.hhp-modal__foot { padding: 10px 14px; }
.hhp-modal__title { font-size: 15px; }
.hhp-tags__head { padding: 8px 10px; }
.hhp-tags__list { padding: 8px 10px; }
}
/* ---- HostSportBet ---- */
/* ============ Bet from backoffice (HostSportBet.jsx) — hsb- ============
Form/action screen on the Hrs shell. Layout mirrors HostDeposit.jsx's two-panel
transfer (aside + main) and reuses its balance-box / search-dropdown vocabulary so
the two counter screens read as one product. Iwakiri red ramp only (--p-*). */
.hsb-inferred { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--warn-50, #fff4de); color: #b57e00; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
/* ---- real-money banner ---- */
.hsb-risk { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; padding: 12px 14px; border: 1px solid color-mix(in oklab, var(--err, #dc2626) 28%, transparent); border-left: 4px solid var(--err, #dc2626); border-radius: 10px; background: var(--err-bg, #fee2e2); color: #7c1524; font-size: 12.5px; line-height: 1.6; }
.hsb-risk b { color: var(--p-700, #1c298c); }
.hsb-risk__ic { flex-shrink: 0; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--p-600, #c40017); color: #fff; }
/* ---- two-panel frame ---- */
.hsb-grid { display: grid; grid-template-columns: 360px 1fr; gap: 20px; align-items: start; }
.hsb-side { display: grid; gap: 14px; align-content: start; }
.hsb-main { display: grid; gap: 14px; align-content: start; min-width: 0; }
.hsb-card { background: #f6f7f9; border: 1px solid #eef0f3; border-radius: 10px; padding: 16px; }
.hsb-main .hsb-card { background: var(--surface-panel, #fff); border-color: var(--border-default, #e4e6ef); }
.hsb-card__h { display: flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: var(--p-600, #c40017); margin-bottom: 10px; }
/* ---- player search (select2 equivalent) ---- */
.hsb-search__ic, .hsb-search__caret { color: #7e8299; }
.hsb-search__in { background: #fff; }
.hsb-search__drop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; background: #fff; border: 1px solid #e4e6ef; border-radius: 8px; box-shadow: 0 14px 30px -12px rgba(15,20,32,.35); overflow: hidden auto; max-height: 292px; }
.hsb-search__hint { padding: 10px 12px; font-size: 11.5px; color: #7e8299; line-height: 1.5; }
.hsb-search__hint code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 10.5px; background: #f2f3f7; border-radius: 3px; padding: 0 3px; }
.hsb-search__item { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; border: 0; background: #fff; padding: 9px 12px; font-family: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
.hsb-search__item:hover { background: #f6f7f9; }
.hsb-search__item + .hsb-search__item { border-top: 1px solid #f2f3f7; }
.hsb-search__name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #3f4254; }
.hsb-search__meta { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px; color: #7e8299; }
.hsb-flag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--warn-50, #fff4de); color: #b57e00; }
.hsb-picked { margin-top: 12px; border-top: 1px solid #e4e6ef; padding-top: 8px; }
.hsb-picked__row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 12px; color: #5a6172; }
.hsb-picked__row b { color: #181c32; font-variant-numeric: tabular-nums; }
.hsb-picked__ca { display: flex; gap: 7px; align-items: flex-start; margin-top: 8px; padding: 8px 10px; border-radius: 7px; background: #fff; border: 1px dashed #dcdfe6; font-size: 11.5px; color: #5a6172; line-height: 1.55; }
.hsb-picked__ca code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 10.5px; }
/* ---- balance boxes (HostDeposit parity) ---- */
.hsb-empty { display: flex; align-items: center; gap: 8px; padding: 16px 14px; border: 1px dashed #dcdfe6; border-radius: 8px; background: #fff; font-size: 12.5px; color: #7e8299; }
.hsb-balboxes { display: grid; grid-template-columns: 1fr; gap: 10px; } /* stacked inside the narrow aside; side-by-side once it goes full width */
.hsb-balbox { border: 1px solid #eef0f3; background: #fff; border-radius: 8px; padding: 10px 12px; }
.hsb-balbox--main { background: var(--p-50, #eef0fd); border-color: rgba(42,63,208,.25); grid-column: 1 / -1; }
.hsb-balbox__l { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #7e8299; margin-bottom: 4px; }
.hsb-balbox__v { font-size: 17px; font-weight: 700; color: #181c32; font-variant-numeric: tabular-nums; }
.hsb-balbox--main .hsb-balbox__v { color: var(--p-700, #1c298c); }
.hsb-balbox__s { margin-top: 4px; font-size: 11px; color: #7e8299; line-height: 1.5; }
.hsb-balbox__s b { color: #5a6172; font-variant-numeric: tabular-nums; }
.hsb-refresh { border: 0; background: transparent; cursor: pointer; color: inherit; display: inline-flex; padding: 2px; border-radius: 4px; }
.hsb-refresh:hover { background: rgba(15,20,32,.08); }
.hsb-spin { animation: hsb-rot .8s linear infinite; }
@keyframes hsb-rot { to { transform: rotate(360deg); } }
.hsb-tlinkrow { display: flex; align-items: center; margin-top: 10px; }
.hsb-tlink { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--p-600, #c40017); text-decoration: none; }
.hsb-tlink:hover { color: var(--p-700, #1c298c); text-decoration: underline; }
/* ---- fast + custom deposit ---- */
.hsb-fast { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hsb-fastbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 52px; border: 1px solid #e4e6ef; border-radius: 8px; background: #fff; font-family: inherit; cursor: pointer; transition: border-color .12s, background .12s, transform .04s; }
.hsb-fastbtn b { font-size: 15px; font-weight: 700; color: #181c32; }
.hsb-fastbtn span { font-size: 10px; font-weight: 600; letter-spacing: .04em; color: #7e8299; }
.hsb-fastbtn:hover:not(:disabled) { border-color: var(--p-400, #5d6ee2); background: var(--p-50, #eef0fd); }
.hsb-fastbtn:hover:not(:disabled) b { color: var(--p-700, #1c298c); }
.hsb-fastbtn:active:not(:disabled) { transform: translateY(1px); }
.hsb-fastbtn:disabled { opacity: .45; cursor: not-allowed; }
.hsb-custom { display: flex; gap: 8px; }
.hsb-custom .input { flex: 1; min-width: 0; background: #fff; }
.hsb-cbtn { height: 38px; min-width: 0; padding: 0 14px; font-size: 12.5px; }
.hsb-cbtn:disabled { opacity: .5; cursor: not-allowed; }
.hsb-err { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid #ffcdd3; background: #ffe2e5; color: #d2293a; font-size: 12.5px; font-weight: 600; }
.hsb-hint { margin-top: 10px; font-size: 11px; color: #7e8299; line-height: 1.55; }
.hsb-hint code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 10.5px; background: #fff; border: 1px solid #e9ecf3; border-radius: 3px; padding: 0 3px; }
/* ---- sport type segmented control ---- */
.hsb-seg { display: inline-flex; gap: 6px; padding: 4px; border: 1px solid var(--border-default, #e4e6ef); border-radius: 9px; background: var(--n-50, #f6f8fa); }
.hsb-seg__b { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 118px; padding: 8px 16px; border: 0; border-radius: 6px; background: transparent; font-family: inherit; font-size: 13px; font-weight: 600; color: #5a6172; cursor: pointer; transition: background .12s, color .12s; }
.hsb-seg__b:hover { background: rgba(15,20,32,.05); }
.hsb-seg__b.is-on { background: var(--p-600, #c40017); color: #fff; box-shadow: 0 1px 2px rgba(15,20,32,.16); }
.hsb-seg__c { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 10px; opacity: .72; }
/* ---- session hand-off ---- */
.hsb-hand { margin-top: 14px; border: 1px solid var(--border-subtle, #eef0f3); border-radius: 9px; background: var(--n-25, #fbfcfd); padding: 12px 14px; }
.hsb-hand__h { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #7e8299; margin-bottom: 10px; }
.hsb-hand__grid { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; align-items: baseline; }
.hsb-k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #7e8299; }
.hsb-v { font-size: 12.5px; color: #181c32; overflow-wrap: anywhere; }
.hsb-v code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px; background: #f2f3f7; border: 1px solid #e9ecf3; border-radius: 4px; padding: 0 5px; color: #3f4254; }
.hsb-ok { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; background: var(--ok-50, #e6f8ee); color: var(--ok-600, #147a42); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.hsb-muted { color: #7e8299; font-size: 11.5px; }
.hsb-ipnote { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border: 1px solid #ffe0ae; border-radius: 8px; background: var(--warn-50, #fff6e5); color: #7a5300; font-size: 12px; line-height: 1.6; }
.hsb-ipnote b { color: #6a4700; }
.hsb-ipnote code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px; background: #fff; border: 1px solid #ffe0ae; border-radius: 3px; padding: 0 4px; }
.hsb-ipnote__ic { flex-shrink: 0; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: #d48806; color: #fff; }
/* ---- sportsbook frame placeholder ---- */
.hsb-frame { border: 1px solid var(--border-default, #e4e6ef); border-radius: 10px; overflow: hidden; background: var(--surface-panel, #fff); }
.hsb-frame__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle, #eef0f3); background: var(--n-50, #f6f8fa); }
.hsb-frame__chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--border-default, #e4e6ef); font-size: 11px; font-weight: 700; color: #3f4254; }
.hsb-frame__url { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px; color: #7e8299; overflow-wrap: anywhere; }
.hsb-frame__when { margin-left: auto; font-size: 11px; color: #7e8299; font-variant-numeric: tabular-nums; }
.hsb-frame__body { position: relative; min-height: clamp(320px, calc(100vh - 430px), 560px); display: grid; place-items: center; padding: 28px 22px;
background-color: var(--n-25, #fbfcfd);
background-image: repeating-linear-gradient(135deg, rgba(15,20,32,.028) 0 10px, transparent 10px 20px); }
.hsb-frame__body.is-loading { opacity: .62; }
.hsb-frame--empty .hsb-frame__mid { padding: 46px 22px; }
.hsb-frame__mid { max-width: 560px; text-align: center; }
.hsb-frame__ico { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 12px; background: var(--p-600, #c40017); color: #fff; }
.hsb-frame__t { font-size: 15px; font-weight: 700; color: #181c32; margin-bottom: 6px; }
.hsb-frame__p { font-size: 12.5px; color: #5a6172; line-height: 1.65; }
.hsb-frame__p code, .hsb-frame__fail code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px; background: #fff; border: 1px solid #e9ecf3; border-radius: 3px; padding: 0 4px; }
.hsb-frame__fail { margin-top: 14px; padding: 9px 12px; border-radius: 8px; border: 1px dashed #dcdfe6; background: #fff; font-size: 11.5px; color: #7e8299; line-height: 1.6; }
/* ---- deposit confirmation modal ---- */
.hsb-modal { width: min(600px, 96vw); }
.hsb-x { border: 0; background: transparent; cursor: pointer; color: #7e8299; display: inline-flex; padding: 6px; border-radius: 6px; }
.hsb-x:hover { background: #f2f3f7; color: #3f4254; }
.hsb-sumgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.hsb-sum { border: 1px solid #eef0f3; border-radius: 8px; padding: 8px 10px; background: #fafbfc; }
.hsb-sum .l { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #7e8299; margin-bottom: 3px; }
.hsb-sum .v { font-size: 13px; font-weight: 700; color: #181c32; overflow-wrap: anywhere; }
.hsb-sum .c { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 10.5px; font-weight: 600; color: #7e8299; }
.hsb-notes { margin: 0; padding-left: 18px; font-size: 12px; color: #5a6172; line-height: 1.7; }
.hsb-notes code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px; background: #f6f7f9; border: 1px solid #eef0f3; border-radius: 3px; padding: 0 4px; overflow-wrap: anywhere; }
.hsb-modal__foot { display: flex; gap: 10px; margin-top: 18px; justify-content: flex-end; }
.hsb-fbtn { min-width: 150px; }
.hsb-modal__foot .btn.hsb-fbtn { justify-content: center; }
/* ============ responsive (UIUX_ELEVATION_BRIEF §11) ============ */
@media (max-width: 1100px) {
/* two-panel collapses to one column — same breakpoint behaviour as HostDeposit's hd-transfer */
.hsb-grid { grid-template-columns: 1fr; }
.hsb-balboxes { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.hsb-frame__body { min-height: 340px; }
}
@media (max-width: 860px) {
.hsb-card { padding: 14px; }
.hsb-fast { grid-template-columns: repeat(2, 1fr); }
.hsb-seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.hsb-seg__b { min-width: 0; }
.hsb-hand__grid { grid-template-columns: 1fr; gap: 2px 0; }
.hsb-hand__grid .hsb-v { margin-bottom: 8px; }
.hsb-frame__when { margin-left: 0; width: 100%; }
.hsb-frame__body { min-height: 280px; padding: 22px 16px; }
}
@media (max-width: 620px) {
.hsb-risk { flex-direction: column; gap: 8px; }
.hsb-custom { flex-direction: column; }
.hsb-cbtn { width: 100%; height: 40px; }
/* modals go full-screen */
.hsb-scrim { padding: 0; }
.hsb-modal { width: 100vw; min-height: 100vh; border-radius: 0; }
.hsb-modal__foot { flex-direction: column-reverse; }
.hsb-modal__foot .hsb-fbtn { width: 100%; min-width: 0; }
}
/* ---- real-money banner ---- */
.hsb-risk { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; padding: 12px 14px; border: 1px solid color-mix(in oklab, var(--err, #dc2626) 28%, transparent); border-left: 4px solid var(--err, #dc2626); border-radius: 10px; background: var(--err-bg, #fee2e2); color: #7c1524; font-size: 12.5px; line-height: 1.6; }
.hsb-risk b { color: var(--p-700, #1c298c); }
.hsb-risk__ic { flex-shrink: 0; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--p-600, #c40017); color: #fff; }
/* ---- two-panel frame ---- */
.hsb-grid { display: grid; grid-template-columns: 360px 1fr; gap: 20px; align-items: start; }
.hsb-side { display: grid; gap: 14px; align-content: start; }
.hsb-main { display: grid; gap: 14px; align-content: start; min-width: 0; }
.hsb-card { background: #f6f7f9; border: 1px solid #eef0f3; border-radius: 10px; padding: 16px; }
.hsb-main .hsb-card { background: var(--surface-panel, #fff); border-color: var(--border-default, #e4e6ef); }
.hsb-card__h { display: flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: var(--p-600, #c40017); margin-bottom: 10px; }
/* ---- player search (select2 equivalent) ---- */
.hsb-search__ic, .hsb-search__caret { color: #7e8299; }
.hsb-search__in { background: #fff; }
.hsb-search__drop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; background: #fff; border: 1px solid #e4e6ef; border-radius: 8px; box-shadow: 0 14px 30px -12px rgba(15,20,32,.35); overflow: hidden auto; max-height: 292px; }
.hsb-search__hint { padding: 10px 12px; font-size: 11.5px; color: #7e8299; line-height: 1.5; }
.hsb-search__hint code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 10.5px; background: #f2f3f7; border-radius: 3px; padding: 0 3px; }
.hsb-search__item { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; border: 0; background: #fff; padding: 9px 12px; font-family: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
.hsb-search__item:hover { background: #f6f7f9; }
.hsb-search__item + .hsb-search__item { border-top: 1px solid #f2f3f7; }
.hsb-search__name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #3f4254; }
.hsb-search__meta { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px; color: #7e8299; }
.hsb-flag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--warn-50, #fff4de); color: #b57e00; }
.hsb-picked { margin-top: 12px; border-top: 1px solid #e4e6ef; padding-top: 8px; }
.hsb-picked__row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 12px; color: #5a6172; }
.hsb-picked__row b { color: #181c32; font-variant-numeric: tabular-nums; }
.hsb-picked__ca { display: flex; gap: 7px; align-items: flex-start; margin-top: 8px; padding: 8px 10px; border-radius: 7px; background: #fff; border: 1px dashed #dcdfe6; font-size: 11.5px; color: #5a6172; line-height: 1.55; }
.hsb-picked__ca code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 10.5px; }
/* ---- balance boxes (HostDeposit parity) ---- */
.hsb-empty { display: flex; align-items: center; gap: 8px; padding: 16px 14px; border: 1px dashed #dcdfe6; border-radius: 8px; background: #fff; font-size: 12.5px; color: #7e8299; }
.hsb-balboxes { display: grid; grid-template-columns: 1fr; gap: 10px; } /* stacked inside the narrow aside; side-by-side once it goes full width */
.hsb-balbox { border: 1px solid #eef0f3; background: #fff; border-radius: 8px; padding: 10px 12px; }
.hsb-balbox--main { background: var(--p-50, #eef0fd); border-color: rgba(42,63,208,.25); grid-column: 1 / -1; }
.hsb-balbox__l { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #7e8299; margin-bottom: 4px; }
.hsb-balbox__v { font-size: 17px; font-weight: 700; color: #181c32; font-variant-numeric: tabular-nums; }
.hsb-balbox--main .hsb-balbox__v { color: var(--p-700, #1c298c); }
.hsb-balbox__s { margin-top: 4px; font-size: 11px; color: #7e8299; line-height: 1.5; }
.hsb-balbox__s b { color: #5a6172; font-variant-numeric: tabular-nums; }
.hsb-refresh { border: 0; background: transparent; cursor: pointer; color: inherit; display: inline-flex; padding: 2px; border-radius: 4px; }
.hsb-refresh:hover { background: rgba(15,20,32,.08); }
.hsb-spin { animation: hsb-rot .8s linear infinite; }
@keyframes hsb-rot { to { transform: rotate(360deg); } }
.hsb-tlinkrow { display: flex; align-items: center; margin-top: 10px; }
.hsb-tlink { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--p-600, #c40017); text-decoration: none; }
.hsb-tlink:hover { color: var(--p-700, #1c298c); text-decoration: underline; }
/* ---- fast + custom deposit ---- */
.hsb-fast { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hsb-fastbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 52px; border: 1px solid #e4e6ef; border-radius: 8px; background: #fff; font-family: inherit; cursor: pointer; transition: border-color .12s, background .12s, transform .04s; }
.hsb-fastbtn b { font-size: 15px; font-weight: 700; color: #181c32; }
.hsb-fastbtn span { font-size: 10px; font-weight: 600; letter-spacing: .04em; color: #7e8299; }
.hsb-fastbtn:hover:not(:disabled) { border-color: var(--p-400, #5d6ee2); background: var(--p-50, #eef0fd); }
.hsb-fastbtn:hover:not(:disabled) b { color: var(--p-700, #1c298c); }
.hsb-fastbtn:active:not(:disabled) { transform: translateY(1px); }
.hsb-fastbtn:disabled { opacity: .45; cursor: not-allowed; }
.hsb-custom { display: flex; gap: 8px; }
.hsb-custom .input { flex: 1; min-width: 0; background: #fff; }
.hsb-cbtn { height: 38px; min-width: 0; padding: 0 14px; font-size: 12.5px; }
.hsb-cbtn:disabled { opacity: .5; cursor: not-allowed; }
.hsb-err { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid #ffcdd3; background: #ffe2e5; color: #d2293a; font-size: 12.5px; font-weight: 600; }
.hsb-hint { margin-top: 10px; font-size: 11px; color: #7e8299; line-height: 1.55; }
.hsb-hint code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 10.5px; background: #fff; border: 1px solid #e9ecf3; border-radius: 3px; padding: 0 3px; }
/* ---- sport type segmented control ---- */
.hsb-seg { display: inline-flex; gap: 6px; padding: 4px; border: 1px solid var(--border-default, #e4e6ef); border-radius: 9px; background: var(--n-50, #f6f8fa); }
.hsb-seg__b { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 118px; padding: 8px 16px; border: 0; border-radius: 6px; background: transparent; font-family: inherit; font-size: 13px; font-weight: 600; color: #5a6172; cursor: pointer; transition: background .12s, color .12s; }
.hsb-seg__b:hover { background: rgba(15,20,32,.05); }
.hsb-seg__b.is-on { background: var(--p-600, #c40017); color: #fff; box-shadow: 0 1px 2px rgba(15,20,32,.16); }
.hsb-seg__c { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 10px; opacity: .72; }
/* ---- session hand-off ---- */
.hsb-hand { margin-top: 14px; border: 1px solid var(--border-subtle, #eef0f3); border-radius: 9px; background: var(--n-25, #fbfcfd); padding: 12px 14px; }
.hsb-hand__h { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #7e8299; margin-bottom: 10px; }
.hsb-hand__grid { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; align-items: baseline; }
.hsb-k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #7e8299; }
.hsb-v { font-size: 12.5px; color: #181c32; overflow-wrap: anywhere; }
.hsb-v code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px; background: #f2f3f7; border: 1px solid #e9ecf3; border-radius: 4px; padding: 0 5px; color: #3f4254; }
.hsb-ok { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; background: var(--ok-50, #e6f8ee); color: var(--ok-600, #147a42); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.hsb-muted { color: #7e8299; font-size: 11.5px; }
.hsb-ipnote { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border: 1px solid #ffe0ae; border-radius: 8px; background: var(--warn-50, #fff6e5); color: #7a5300; font-size: 12px; line-height: 1.6; }
.hsb-ipnote b { color: #6a4700; }
.hsb-ipnote code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px; background: #fff; border: 1px solid #ffe0ae; border-radius: 3px; padding: 0 4px; }
.hsb-ipnote__ic { flex-shrink: 0; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: #d48806; color: #fff; }
/* ---- sportsbook frame placeholder ---- */
.hsb-frame { border: 1px solid var(--border-default, #e4e6ef); border-radius: 10px; overflow: hidden; background: var(--surface-panel, #fff); }
.hsb-frame__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle, #eef0f3); background: var(--n-50, #f6f8fa); }
.hsb-frame__chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--border-default, #e4e6ef); font-size: 11px; font-weight: 700; color: #3f4254; }
.hsb-frame__url { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px; color: #7e8299; overflow-wrap: anywhere; }
.hsb-frame__when { margin-left: auto; font-size: 11px; color: #7e8299; font-variant-numeric: tabular-nums; }
.hsb-frame__body { position: relative; min-height: clamp(320px, calc(100vh - 430px), 560px); display: grid; place-items: center; padding: 28px 22px;
background-color: var(--n-25, #fbfcfd);
background-image: repeating-linear-gradient(135deg, rgba(15,20,32,.028) 0 10px, transparent 10px 20px); }
.hsb-frame__body.is-loading { opacity: .62; }
.hsb-frame--empty .hsb-frame__mid { padding: 46px 22px; }
.hsb-frame__mid { max-width: 560px; text-align: center; }
.hsb-frame__ico { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 12px; background: var(--p-600, #c40017); color: #fff; }
.hsb-frame__t { font-size: 15px; font-weight: 700; color: #181c32; margin-bottom: 6px; }
.hsb-frame__p { font-size: 12.5px; color: #5a6172; line-height: 1.65; }
.hsb-frame__p code, .hsb-frame__fail code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px; background: #fff; border: 1px solid #e9ecf3; border-radius: 3px; padding: 0 4px; }
.hsb-frame__fail { margin-top: 14px; padding: 9px 12px; border-radius: 8px; border: 1px dashed #dcdfe6; background: #fff; font-size: 11.5px; color: #7e8299; line-height: 1.6; }
/* ---- deposit confirmation modal ---- */
.hsb-modal { width: min(600px, 96vw); }
.hsb-x { border: 0; background: transparent; cursor: pointer; color: #7e8299; display: inline-flex; padding: 6px; border-radius: 6px; }
.hsb-x:hover { background: #f2f3f7; color: #3f4254; }
.hsb-sumgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.hsb-sum { border: 1px solid #eef0f3; border-radius: 8px; padding: 8px 10px; background: #fafbfc; }
.hsb-sum .l { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #7e8299; margin-bottom: 3px; }
.hsb-sum .v { font-size: 13px; font-weight: 700; color: #181c32; overflow-wrap: anywhere; }
.hsb-sum .c { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 10.5px; font-weight: 600; color: #7e8299; }
.hsb-notes { margin: 0; padding-left: 18px; font-size: 12px; color: #5a6172; line-height: 1.7; }
.hsb-notes code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px; background: #f6f7f9; border: 1px solid #eef0f3; border-radius: 3px; padding: 0 4px; overflow-wrap: anywhere; }
.hsb-modal__foot { display: flex; gap: 10px; margin-top: 18px; justify-content: flex-end; }
.hsb-fbtn { min-width: 150px; }
.hsb-modal__foot .btn.hsb-fbtn { justify-content: center; }
/* ============ responsive (UIUX_ELEVATION_BRIEF §11) ============ */
@media (max-width: 1100px) {
/* two-panel collapses to one column — same breakpoint behaviour as HostDeposit's hd-transfer */
.hsb-grid { grid-template-columns: 1fr; }
.hsb-balboxes { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.hsb-frame__body { min-height: 340px; }
}
@media (max-width: 860px) {
.hsb-card { padding: 14px; }
.hsb-fast { grid-template-columns: repeat(2, 1fr); }
.hsb-seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.hsb-seg__b { min-width: 0; }
.hsb-hand__grid { grid-template-columns: 1fr; gap: 2px 0; }
.hsb-hand__grid .hsb-v { margin-bottom: 8px; }
.hsb-frame__when { margin-left: 0; width: 100%; }
.hsb-frame__body { min-height: 280px; padding: 22px 16px; }
}
@media (max-width: 620px) {
.hsb-risk { flex-direction: column; gap: 8px; }
.hsb-custom { flex-direction: column; }
.hsb-cbtn { width: 100%; height: 40px; }
/* modals go full-screen */
.hsb-scrim { padding: 0; }
.hsb-modal { width: 100vw; min-height: 100vh; border-radius: 0; }
.hsb-modal__foot { flex-direction: column-reverse; }
.hsb-modal__foot .hsb-fbtn { width: 100%; min-width: 0; }
}
/* ---- HostCommCashbackPayments ---- */
/* ===== Commission cashback — Payments (src/pages/HostCommCashbackPayments.jsx) =====
Built on the Hrs* kit (HrsShell/HrsFilters/HrsTable/HrsPager supply the
chrome), so this block only carries what is specific to a real-money
ledger: the Settings|Payments tab bar, the bulk-pay bar, the money cells,
the three confirmation modals and the honest-absence strip. Iwakiri red
ramp (--p-*) only — no PayBO indigo. Scoped under `.hccp` (the page's own
wrapper inside HrsShell) except the modals, which render at page root. */
/* ---- header Search button ---- */
.hrs-page .hccp-search { min-width: 0; height: 38px; }
/* ---- Settings | Payments tab bar (real — shared by both screens) ---- */
.hccp .hccp-tabs {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border-subtle);
}
.hccp .hccp-tab {
appearance: none; border: 1px solid var(--border-default); background: var(--n-0);
color: var(--text-secondary); font: inherit; font-size: 12.5px; font-weight: 600;
padding: 7px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hccp .hccp-tab:hover { background: var(--n-75); color: var(--n-700); }
.hccp .hccp-tab--on {
background: var(--p-500); border-color: var(--p-500); color: #fff; cursor: default;
box-shadow: 0 3px 10px -3px color-mix(in oklab, var(--p-500) 55%, transparent);
}
.hccp .hccp-tab--on:hover { background: var(--p-500); color: #fff; }
.hccp .hccp-tabs__note {
display: inline-flex; align-items: center; gap: 4px; margin-left: 6px;
font-size: 12px; color: var(--text-tertiary);
}
/* ---- bulk-pay bar (Select all / Pay selected / Pay all) ---- */
.hccp .hccp-bulk {
display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
margin: 14px 0 10px; padding: 11px 14px; border-radius: 10px;
background: var(--n-25); border: 1px solid var(--border-subtle);
}
.hccp .hccp-bulk__counts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-secondary); }
.hccp .hccp-bulk__c b { color: var(--n-800); font-weight: 700; font-variant-numeric: tabular-nums; }
.hccp .hccp-bulk__sep { width: 1px; height: 12px; background: var(--border-default); }
.hccp .hccp-bulk__btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hccp .hccp-btn { min-width: 0; height: 36px; }
.hccp .hccp-btn:disabled, .hccp-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
/* Shared ghost button (bar + modal feet) */
.hccp-btn--ghost { background: var(--n-0); color: var(--n-600); border: 1px solid var(--border-default); box-shadow: none; }
.hccp-btn--ghost:hover { background: var(--n-75); }
/* ---- ID cell: checkbox only on rows that can still be paid ---- */
.hccp .hccp-idcell { display: inline-flex; align-items: center; gap: 8px; }
.hccp .hccp-check { width: 14px; height: 14px; accent-color: var(--p-500); cursor: pointer; flex-shrink: 0; }
.hccp .hccp-check-gap { width: 14px; flex-shrink: 0; display: inline-block; }
.hccp .hccp-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--text-secondary); }
/* ---- commission cashback / skin / player cells ---- */
.hccp .hccp-cc { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--n-700); }
.hccp .hccp-auto {
font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; cursor: help;
color: var(--ok-700); background: var(--ok-50); border: 1px solid var(--ok-100);
border-radius: 999px; padding: 1px 6px; white-space: nowrap;
}
.hccp .hccp-na { color: var(--warn-700); font-size: 12px; font-style: italic; cursor: help; }
.hccp .hccp-none { color: var(--n-300); }
.hccp .hccp-player { color: var(--p-500); font-weight: 600; text-decoration: none; }
.hccp .hccp-player:hover { text-decoration: underline; }
/* ---- money cells ---- */
.hccp .hccp-amt { font-variant-numeric: tabular-nums; color: var(--n-700); }
.hccp .hccp-unit { color: var(--text-tertiary); font-size: 11px; font-weight: 500; margin-left: 2px; }
.hccp .hccp-calc { display: inline-flex; align-items: baseline; gap: 4px; justify-content: flex-end; }
.hccp .hccp-calc b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--n-800); }
.hccp .hccp-edited {
font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; cursor: help;
color: var(--warn-700); background: var(--warn-50); border: 1px solid var(--warn-100);
border-radius: 999px; padding: 1px 6px; margin-left: 4px; white-space: nowrap;
}
/* ---- paid / to-pay pills ---- */
.hccp .hccp-pill {
display: inline-flex; align-items: center; gap: 4px; border-radius: 999px;
padding: 2px 9px; font-size: 11px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.hccp .hccp-pill--paid { background: var(--ok-50); color: var(--ok-700); border: 1px solid var(--ok-100); }
.hccp .hccp-pill--topay { background: var(--warn-50); color: var(--warn-700); border: 1px solid var(--warn-100); }
.hccp .hccp-autopay { color: var(--ok-600); font-weight: 600; font-size: 12.5px; }
/* ---- row actions ---- */
.hccp .hccp-acts { display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.hccp .hccp-act {
display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border-default);
background: var(--n-0); color: var(--n-600); border-radius: 7px; padding: 4px 8px;
font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hccp .hccp-act:hover { background: var(--n-75); color: var(--n-800); }
.hccp .hccp-act--pay { border-color: var(--ok-100); color: var(--ok-700); background: var(--ok-50); }
.hccp .hccp-act--pay:hover { background: var(--ok-100); color: var(--ok-700); }
.hccp .hccp-act--del:hover { background: var(--err-50); color: var(--err-700); border-color: var(--err-100); }
/* ---- mobile cards (HrsTable renderCard) ---- */
.hccp .hccp-card__amt { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--n-800); }
.hccp .hccp-card__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 8px; font-size: 12px; color: var(--text-secondary); }
.hccp .hccp-card__more { margin-top: 8px; font-size: 12px; }
.hccp .hccp-card__more > summary { cursor: pointer; color: var(--p-500); font-weight: 600; list-style: none; }
.hccp .hccp-card__more > summary::-webkit-details-marker { display: none; }
.hccp .hccp-card__more > summary::before { content: "▸ "; }
.hccp .hccp-card__more[open] > summary::before { content: "▾ "; }
.hccp .hccp-card__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hccp .hccp-card__acts .hccp-btn { flex: 1 1 auto; height: 34px; }
/* ---- modals (pay confirm / edit / delete) ---- */
.bp-modal-scrim.hccp-scrim { place-items: center; }
.hccp-modal {
background: var(--n-0); border-radius: 12px; width: min(620px, calc(100vw - 32px));
max-height: calc(100vh - 60px); display: flex; flex-direction: column;
box-shadow: 0 24px 70px rgba(15, 20, 32, .4); overflow: hidden;
}
.hccp-modal--pay { width: min(720px, calc(100vw - 32px)); }
.hccp-modal--sm { width: min(480px, calc(100vw - 32px)); }
.hccp-modal__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border-subtle); }
.hccp-modal__ic { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--p-500); color: #fff; flex-shrink: 0; }
.hccp-modal__ic--money { background: var(--ok-500); }
.hccp-modal__ic--danger { background: var(--err-500); }
.hccp-modal__title { font-size: 15px; font-weight: 700; color: var(--n-800); display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.hccp-modal__sub { font-size: 11.5px; font-weight: 500; color: var(--text-tertiary); }
.hccp-modal__x { width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--n-400); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.hccp-modal__x:hover { background: var(--n-75); color: var(--n-600); }
.hccp-modal__body { padding: 16px 18px; font-size: 13px; color: var(--text-primary); line-height: 1.55; overflow: auto; }
.hccp-modal__body p { margin: 0 0 10px; }
.hccp-modal__body code { font-size: 11.5px; background: var(--n-75); border-radius: 4px; padding: 1px 5px; color: var(--n-700); }
.hccp-modal__note { font-size: 12px; color: var(--text-secondary); }
.hccp-modal__note--last { margin: 12px 0 0; font-size: 11.5px; color: var(--text-tertiary); }
.hccp-modal__foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--border-subtle); background: var(--n-25); }
.hccp-modal__foot .hccp-btn { min-width: 0; height: 42px; }
/* the amount hero — the one thing an operator must not misread */
.hccp-payhero {
border-radius: 10px; padding: 14px 16px; margin-bottom: 14px;
background: linear-gradient(180deg, var(--ok-50), var(--n-0));
border: 1px solid var(--ok-100);
}
.hccp-payhero__l { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ok-700); }
.hccp-payhero__v { font-size: 26px; font-weight: 800; color: var(--n-900); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 3px; line-height: 1.2; }
.hccp-payhero__c { font-size: 14px; font-weight: 700; color: var(--text-secondary); letter-spacing: 0; }
.hccp-payhero__tot { white-space: nowrap; }
.hccp-payhero__plus { color: var(--text-tertiary); font-weight: 600; margin: 0 8px; }
.hccp-payhero__to { margin-top: 6px; font-size: 12.5px; color: var(--text-secondary); }
.hccp-payhero__to b { color: var(--n-800); }
.hccp-payhero__to .hccp-mono { color: var(--text-tertiary); }
/* label/value grid shared by all three modals */
.hccp-kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 6px 16px; align-items: baseline; font-size: 12.5px; }
.hccp-kv > span { color: var(--text-tertiary); }
.hccp-kv > b { color: var(--n-800); font-weight: 600; font-variant-numeric: tabular-nums; }
/* bulk recipient preview */
.hccp-preview { margin-top: 14px; border: 1px solid var(--border-subtle); border-radius: 9px; overflow: hidden; }
.hccp-preview__cap { padding: 8px 12px; background: var(--n-50); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }
.hccp-preview__scroll { max-height: 230px; overflow: auto; }
.hccp-preview__t { width: 100%; border-collapse: collapse; font-size: 12px; }
.hccp-preview__t th { position: sticky; top: 0; background: var(--n-0); text-align: left; padding: 7px 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); border-bottom: 1px solid var(--border-subtle); }
.hccp-preview__t td { padding: 6px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--n-700); }
.hccp-preview__t tr:last-child td { border-bottom: 0; }
.hccp-preview__t .hccp-r, .hccp-r { text-align: right; font-variant-numeric: tabular-nums; }
.hccp-preview__more { padding: 7px 12px; font-size: 11.5px; color: var(--text-tertiary); background: var(--n-25); border-top: 1px solid var(--border-subtle); }
/* verdict lines (idempotency note, skipped rows, read-only notice) */
.hccp-verdict {
display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0;
padding: 9px 11px; border-radius: 8px; font-size: 12.5px; line-height: 1.5; border: 1px solid transparent;
}
.hccp-verdict svg { flex-shrink: 0; margin-top: 2px; }
.hccp-verdict--ok { background: var(--ok-50); border-color: var(--ok-100); color: var(--ok-700); }
.hccp-verdict--muted { background: var(--n-50); border-color: var(--border-subtle); color: var(--text-secondary); }
/* audit trail block inside the edit/view modal */
.hccp-audit { margin-top: 14px; padding: 11px 13px; border-radius: 9px; background: var(--warn-50); border: 1px solid var(--warn-100); }
.hccp-audit__h { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--warn-700); }
.hccp-audit__q { margin: 7px 0 6px !important; font-size: 12.5px; font-style: italic; color: var(--n-700); }
.hccp-audit__n { margin: 0 !important; font-size: 11.5px; color: var(--warn-700); line-height: 1.5; }
/* edit form */
.hccp-form { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.hccp-field { display: flex; flex-direction: column; gap: 5px; }
.hccp-field__l { font-size: 12px; font-weight: 700; color: var(--n-700); display: flex; align-items: baseline; gap: 6px; }
.hccp-field__l i { font-style: normal; font-weight: 500; color: var(--text-tertiary); }
.hccp-field__l em { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--err-500); }
.hccp-field__h { font-size: 11px; color: var(--text-tertiary); }
.hccp-input {
width: 100%; border: 1px solid var(--border-default); border-radius: 8px; padding: 9px 11px;
font: inherit; font-size: 13px; color: var(--n-800); background: var(--n-0);
}
.hccp-input:focus { outline: none; border-color: var(--p-500); box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-500) 16%, transparent); }
.hccp-input--area { resize: vertical; min-height: 68px; line-height: 1.5; }
.hccp-errs { display: flex; flex-direction: column; gap: 5px; padding: 9px 11px; border-radius: 8px; background: var(--err-50); border: 1px solid var(--err-100); }
.hccp-errs > div { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--err-700); }
/* ---- honest-absence strip ---- */
.hccp .hccp-absence { margin-top: 16px; padding: 13px 15px; border-radius: 10px; background: var(--n-25); border: 1px solid var(--border-subtle); }
.hccp .hccp-absence__h { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }
.hccp .hccp-absence__l { margin: 9px 0 0; padding-left: 19px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.6; }
.hccp .hccp-absence__l li { margin-bottom: 4px; }
.hccp .hccp-absence__l b { color: var(--n-700); }
.hccp .hccp-absence__l code { font-size: 11.5px; background: var(--n-75); border-radius: 4px; padding: 1px 5px; color: var(--n-700); }
/* ---- responsive (brief §11) --------------------------------------
The Hrs kit already flips the table to stacked cards, collapses the filter
strip into a sheet, wraps the header actions and centres the pager at
<= 860px. These rules cover the page-specific pieces: the tab bar becomes a
scrollable pill row, the bulk bar stacks with full-width buttons, and every
modal goes full-screen. */
@media (max-width: 1200px) {
.hccp .hccp-cc { max-width: 220px; }
}
@media (max-width: 860px) {
.hccp .hccp-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 12px; }
.hccp .hccp-tabs::-webkit-scrollbar { display: none; }
.hccp .hccp-tabs__note { display: none; }
.hccp .hccp-bulk { flex-direction: column; align-items: stretch; gap: 10px; }
.hccp .hccp-bulk__counts { justify-content: space-between; font-size: 12px; }
.hccp .hccp-bulk__sep { display: none; }
.hccp .hccp-bulk__btns { justify-content: stretch; }
.hccp .hccp-bulk__btns .hccp-btn { flex: 1 1 auto; }
.hccp .hccp-absence { margin-top: 14px; padding: 12px 13px; }
.hccp .hccp-absence__l { padding-left: 17px; font-size: 12px; }
}
@media (max-width: 640px) {
.bp-modal-scrim.hccp-scrim { padding: 0; }
.hccp-modal, .hccp-modal--pay, .hccp-modal--sm {
position: fixed; inset: 0; width: 100%; height: 100%; max-height: none; border-radius: 0;
}
.hccp-modal__foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.hccp-modal__foot .hccp-btn { flex: 1; }
.hccp-payhero__v { font-size: 22px; }
.hccp-kv { grid-template-columns: 1fr; gap: 2px 0; }
.hccp-kv > b { margin-bottom: 7px; }
.hccp-preview__scroll { max-height: none; }
.hccp-preview__t th, .hccp-preview__t td { padding: 6px 8px; }
.hccp .hccp-card__acts .hccp-btn { flex: 1 1 100%; }
}
/* ---- header Search button ---- */
.hrs-page .hccp-search { min-width: 0; height: 38px; }
/* ---- Settings | Payments tab bar (real — shared by both screens) ---- */
.hccp .hccp-tabs {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border-subtle);
}
.hccp .hccp-tab {
appearance: none; border: 1px solid var(--border-default); background: var(--n-0);
color: var(--text-secondary); font: inherit; font-size: 12.5px; font-weight: 600;
padding: 7px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hccp .hccp-tab:hover { background: var(--n-75); color: var(--n-700); }
.hccp .hccp-tab--on {
background: var(--p-500); border-color: var(--p-500); color: #fff; cursor: default;
box-shadow: 0 3px 10px -3px color-mix(in oklab, var(--p-500) 55%, transparent);
}
.hccp .hccp-tab--on:hover { background: var(--p-500); color: #fff; }
.hccp .hccp-tabs__note {
display: inline-flex; align-items: center; gap: 4px; margin-left: 6px;
font-size: 12px; color: var(--text-tertiary);
}
/* ---- bulk-pay bar (Select all / Pay selected / Pay all) ---- */
.hccp .hccp-bulk {
display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
margin: 14px 0 10px; padding: 11px 14px; border-radius: 10px;
background: var(--n-25); border: 1px solid var(--border-subtle);
}
.hccp .hccp-bulk__counts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-secondary); }
.hccp .hccp-bulk__c b { color: var(--n-800); font-weight: 700; font-variant-numeric: tabular-nums; }
.hccp .hccp-bulk__sep { width: 1px; height: 12px; background: var(--border-default); }
.hccp .hccp-bulk__btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hccp .hccp-btn { min-width: 0; height: 36px; }
.hccp .hccp-btn:disabled, .hccp-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
/* Shared ghost button (bar + modal feet) */
.hccp-btn--ghost { background: var(--n-0); color: var(--n-600); border: 1px solid var(--border-default); box-shadow: none; }
.hccp-btn--ghost:hover { background: var(--n-75); }
/* ---- ID cell: checkbox only on rows that can still be paid ---- */
.hccp .hccp-idcell { display: inline-flex; align-items: center; gap: 8px; }
.hccp .hccp-check { width: 14px; height: 14px; accent-color: var(--p-500); cursor: pointer; flex-shrink: 0; }
.hccp .hccp-check-gap { width: 14px; flex-shrink: 0; display: inline-block; }
.hccp .hccp-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--text-secondary); }
/* ---- commission cashback / skin / player cells ---- */
.hccp .hccp-cc { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--n-700); }
.hccp .hccp-auto {
font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; cursor: help;
color: var(--ok-700); background: var(--ok-50); border: 1px solid var(--ok-100);
border-radius: 999px; padding: 1px 6px; white-space: nowrap;
}
.hccp .hccp-na { color: var(--warn-700); font-size: 12px; font-style: italic; cursor: help; }
.hccp .hccp-none { color: var(--n-300); }
.hccp .hccp-player { color: var(--p-500); font-weight: 600; text-decoration: none; }
.hccp .hccp-player:hover { text-decoration: underline; }
/* ---- money cells ---- */
.hccp .hccp-amt { font-variant-numeric: tabular-nums; color: var(--n-700); }
.hccp .hccp-unit { color: var(--text-tertiary); font-size: 11px; font-weight: 500; margin-left: 2px; }
.hccp .hccp-calc { display: inline-flex; align-items: baseline; gap: 4px; justify-content: flex-end; }
.hccp .hccp-calc b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--n-800); }
.hccp .hccp-edited {
font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; cursor: help;
color: var(--warn-700); background: var(--warn-50); border: 1px solid var(--warn-100);
border-radius: 999px; padding: 1px 6px; margin-left: 4px; white-space: nowrap;
}
/* ---- paid / to-pay pills ---- */
.hccp .hccp-pill {
display: inline-flex; align-items: center; gap: 4px; border-radius: 999px;
padding: 2px 9px; font-size: 11px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.hccp .hccp-pill--paid { background: var(--ok-50); color: var(--ok-700); border: 1px solid var(--ok-100); }
.hccp .hccp-pill--topay { background: var(--warn-50); color: var(--warn-700); border: 1px solid var(--warn-100); }
.hccp .hccp-autopay { color: var(--ok-600); font-weight: 600; font-size: 12.5px; }
/* ---- row actions ---- */
.hccp .hccp-acts { display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.hccp .hccp-act {
display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border-default);
background: var(--n-0); color: var(--n-600); border-radius: 7px; padding: 4px 8px;
font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hccp .hccp-act:hover { background: var(--n-75); color: var(--n-800); }
.hccp .hccp-act--pay { border-color: var(--ok-100); color: var(--ok-700); background: var(--ok-50); }
.hccp .hccp-act--pay:hover { background: var(--ok-100); color: var(--ok-700); }
.hccp .hccp-act--del:hover { background: var(--err-50); color: var(--err-700); border-color: var(--err-100); }
/* ---- mobile cards (HrsTable renderCard) ---- */
.hccp .hccp-card__amt { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--n-800); }
.hccp .hccp-card__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 8px; font-size: 12px; color: var(--text-secondary); }
.hccp .hccp-card__more { margin-top: 8px; font-size: 12px; }
.hccp .hccp-card__more > summary { cursor: pointer; color: var(--p-500); font-weight: 600; list-style: none; }
.hccp .hccp-card__more > summary::-webkit-details-marker { display: none; }
.hccp .hccp-card__more > summary::before { content: "▸ "; }
.hccp .hccp-card__more[open] > summary::before { content: "▾ "; }
.hccp .hccp-card__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hccp .hccp-card__acts .hccp-btn { flex: 1 1 auto; height: 34px; }
/* ---- modals (pay confirm / edit / delete) ---- */
.bp-modal-scrim.hccp-scrim { place-items: center; }
.hccp-modal {
background: var(--n-0); border-radius: 12px; width: min(620px, calc(100vw - 32px));
max-height: calc(100vh - 60px); display: flex; flex-direction: column;
box-shadow: 0 24px 70px rgba(15, 20, 32, .4); overflow: hidden;
}
.hccp-modal--pay { width: min(720px, calc(100vw - 32px)); }
.hccp-modal--sm { width: min(480px, calc(100vw - 32px)); }
.hccp-modal__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border-subtle); }
.hccp-modal__ic { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--p-500); color: #fff; flex-shrink: 0; }
.hccp-modal__ic--money { background: var(--ok-500); }
.hccp-modal__ic--danger { background: var(--err-500); }
.hccp-modal__title { font-size: 15px; font-weight: 700; color: var(--n-800); display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.hccp-modal__sub { font-size: 11.5px; font-weight: 500; color: var(--text-tertiary); }
.hccp-modal__x { width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--n-400); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.hccp-modal__x:hover { background: var(--n-75); color: var(--n-600); }
.hccp-modal__body { padding: 16px 18px; font-size: 13px; color: var(--text-primary); line-height: 1.55; overflow: auto; }
.hccp-modal__body p { margin: 0 0 10px; }
.hccp-modal__body code { font-size: 11.5px; background: var(--n-75); border-radius: 4px; padding: 1px 5px; color: var(--n-700); }
.hccp-modal__note { font-size: 12px; color: var(--text-secondary); }
.hccp-modal__note--last { margin: 12px 0 0; font-size: 11.5px; color: var(--text-tertiary); }
.hccp-modal__foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--border-subtle); background: var(--n-25); }
.hccp-modal__foot .hccp-btn { min-width: 0; height: 42px; }
/* the amount hero — the one thing an operator must not misread */
.hccp-payhero {
border-radius: 10px; padding: 14px 16px; margin-bottom: 14px;
background: linear-gradient(180deg, var(--ok-50), var(--n-0));
border: 1px solid var(--ok-100);
}
.hccp-payhero__l { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ok-700); }
.hccp-payhero__v { font-size: 26px; font-weight: 800; color: var(--n-900); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 3px; line-height: 1.2; }
.hccp-payhero__c { font-size: 14px; font-weight: 700; color: var(--text-secondary); letter-spacing: 0; }
.hccp-payhero__tot { white-space: nowrap; }
.hccp-payhero__plus { color: var(--text-tertiary); font-weight: 600; margin: 0 8px; }
.hccp-payhero__to { margin-top: 6px; font-size: 12.5px; color: var(--text-secondary); }
.hccp-payhero__to b { color: var(--n-800); }
.hccp-payhero__to .hccp-mono { color: var(--text-tertiary); }
/* label/value grid shared by all three modals */
.hccp-kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 6px 16px; align-items: baseline; font-size: 12.5px; }
.hccp-kv > span { color: var(--text-tertiary); }
.hccp-kv > b { color: var(--n-800); font-weight: 600; font-variant-numeric: tabular-nums; }
/* bulk recipient preview */
.hccp-preview { margin-top: 14px; border: 1px solid var(--border-subtle); border-radius: 9px; overflow: hidden; }
.hccp-preview__cap { padding: 8px 12px; background: var(--n-50); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }
.hccp-preview__scroll { max-height: 230px; overflow: auto; }
.hccp-preview__t { width: 100%; border-collapse: collapse; font-size: 12px; }
.hccp-preview__t th { position: sticky; top: 0; background: var(--n-0); text-align: left; padding: 7px 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); border-bottom: 1px solid var(--border-subtle); }
.hccp-preview__t td { padding: 6px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--n-700); }
.hccp-preview__t tr:last-child td { border-bottom: 0; }
.hccp-preview__t .hccp-r, .hccp-r { text-align: right; font-variant-numeric: tabular-nums; }
.hccp-preview__more { padding: 7px 12px; font-size: 11.5px; color: var(--text-tertiary); background: var(--n-25); border-top: 1px solid var(--border-subtle); }
/* verdict lines (idempotency note, skipped rows, read-only notice) */
.hccp-verdict {
display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0;
padding: 9px 11px; border-radius: 8px; font-size: 12.5px; line-height: 1.5; border: 1px solid transparent;
}
.hccp-verdict svg { flex-shrink: 0; margin-top: 2px; }
.hccp-verdict--ok { background: var(--ok-50); border-color: var(--ok-100); color: var(--ok-700); }
.hccp-verdict--muted { background: var(--n-50); border-color: var(--border-subtle); color: var(--text-secondary); }
/* audit trail block inside the edit/view modal */
.hccp-audit { margin-top: 14px; padding: 11px 13px; border-radius: 9px; background: var(--warn-50); border: 1px solid var(--warn-100); }
.hccp-audit__h { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--warn-700); }
.hccp-audit__q { margin: 7px 0 6px !important; font-size: 12.5px; font-style: italic; color: var(--n-700); }
.hccp-audit__n { margin: 0 !important; font-size: 11.5px; color: var(--warn-700); line-height: 1.5; }
/* edit form */
.hccp-form { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.hccp-field { display: flex; flex-direction: column; gap: 5px; }
.hccp-field__l { font-size: 12px; font-weight: 700; color: var(--n-700); display: flex; align-items: baseline; gap: 6px; }
.hccp-field__l i { font-style: normal; font-weight: 500; color: var(--text-tertiary); }
.hccp-field__l em { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--err-500); }
.hccp-field__h { font-size: 11px; color: var(--text-tertiary); }
.hccp-input {
width: 100%; border: 1px solid var(--border-default); border-radius: 8px; padding: 9px 11px;
font: inherit; font-size: 13px; color: var(--n-800); background: var(--n-0);
}
.hccp-input:focus { outline: none; border-color: var(--p-500); box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-500) 16%, transparent); }
.hccp-input--area { resize: vertical; min-height: 68px; line-height: 1.5; }
.hccp-errs { display: flex; flex-direction: column; gap: 5px; padding: 9px 11px; border-radius: 8px; background: var(--err-50); border: 1px solid var(--err-100); }
.hccp-errs > div { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--err-700); }
/* ---- honest-absence strip ---- */
.hccp .hccp-absence { margin-top: 16px; padding: 13px 15px; border-radius: 10px; background: var(--n-25); border: 1px solid var(--border-subtle); }
.hccp .hccp-absence__h { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }
.hccp .hccp-absence__l { margin: 9px 0 0; padding-left: 19px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.6; }
.hccp .hccp-absence__l li { margin-bottom: 4px; }
.hccp .hccp-absence__l b { color: var(--n-700); }
.hccp .hccp-absence__l code { font-size: 11.5px; background: var(--n-75); border-radius: 4px; padding: 1px 5px; color: var(--n-700); }
/* ---- responsive (brief §11) --------------------------------------
The Hrs kit already flips the table to stacked cards, collapses the filter
strip into a sheet, wraps the header actions and centres the pager at
<= 860px. These rules cover the page-specific pieces: the tab bar becomes a
scrollable pill row, the bulk bar stacks with full-width buttons, and every
modal goes full-screen. */
@media (max-width: 1200px) {
.hccp .hccp-cc { max-width: 220px; }
}
@media (max-width: 860px) {
.hccp .hccp-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 12px; }
.hccp .hccp-tabs::-webkit-scrollbar { display: none; }
.hccp .hccp-tabs__note { display: none; }
.hccp .hccp-bulk { flex-direction: column; align-items: stretch; gap: 10px; }
.hccp .hccp-bulk__counts { justify-content: space-between; font-size: 12px; }
.hccp .hccp-bulk__sep { display: none; }
.hccp .hccp-bulk__btns { justify-content: stretch; }
.hccp .hccp-bulk__btns .hccp-btn { flex: 1 1 auto; }
.hccp .hccp-absence { margin-top: 14px; padding: 12px 13px; }
.hccp .hccp-absence__l { padding-left: 17px; font-size: 12px; }
}
@media (max-width: 640px) {
.bp-modal-scrim.hccp-scrim { padding: 0; }
.hccp-modal, .hccp-modal--pay, .hccp-modal--sm {
position: fixed; inset: 0; width: 100%; height: 100%; max-height: none; border-radius: 0;
}
.hccp-modal__foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.hccp-modal__foot .hccp-btn { flex: 1; }
.hccp-payhero__v { font-size: 22px; }
.hccp-kv { grid-template-columns: 1fr; gap: 2px 0; }
.hccp-kv > b { margin-bottom: 7px; }
.hccp-preview__scroll { max-height: none; }
.hccp-preview__t th, .hccp-preview__t td { padding: 6px 8px; }
.hccp .hccp-card__acts .hccp-btn { flex: 1 1 100%; }
}
/* ---- HostCmsBannersNew ---- */
/* ===================================================================
Banners / Slideshow (src/pages/HostCmsBannersNew.jsx → HostCmsBanners)
CMS ▾ leaf for GET /slideshow (SlideshowsController).
Page chrome — hero filter strip, table, mobile cards, sheet, pager —
comes from the Hrs* kit (.hrs-* block, already in this file). Modal
chrome reuses the shared .bp-modal-scrim / .bp-modal. Everything below
is only what those do not cover: the status chip strip, the list cells,
the sectioned form panels, the upload widget, the classic/grid/auth
banner cards, the language pill bar and the network picker.
Prefix: hcb- · Iwakiri red = var(--p-*). No raw brand hexes.
§11 media queries at 1100px / 860px / 560px at the bottom.
=================================================================== */
/* ---- status chip strip (alternate `stato` filter, summarizeStatus counts) ---- */
.hrs-page .hcb-tabs {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
margin: 0 0 12px; padding-bottom: 10px;
border-bottom: 1px solid var(--border-subtle);
}
.hrs-page .hcb-tab {
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 12px; border-radius: var(--r-pill, 999px);
border: 1px solid var(--border-default); background: var(--surface-panel, #fff);
font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.hrs-page .hcb-tab:hover { background: var(--n-25); color: var(--text-primary); }
.hrs-page .hcb-tab:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hrs-page .hcb-tab .hcb-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--n-400); flex: none; }
.hrs-page .hcb-tab--ok .hcb-dot { background: var(--ok-500, #16a34a); }
.hrs-page .hcb-tab--off .hcb-dot { background: var(--err-500, #e9484a); }
.hrs-page .hcb-tab__n {
min-width: 20px; padding: 1px 7px; border-radius: 999px;
background: var(--n-75); color: var(--text-secondary);
font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center;
}
.hrs-page .hcb-tab.is-on {
background: var(--p-50); border-color: var(--p-300); color: var(--p-700);
}
.hrs-page .hcb-tab.is-on .hcb-tab__n { background: var(--p-100); color: var(--p-700); }
/* ---- list cells ---- */
.hrs-page .hcb-id { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--p-700); }
.hrs-page .hcb-dash { color: var(--text-tertiary); }
.hrs-page .hcb-skin { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.hrs-page .hcb-skin__av {
width: 24px; height: 24px; flex: none; border-radius: 7px;
display: grid; place-items: center;
background: var(--p-50); color: var(--p-700);
border: 1px solid var(--p-100);
font-size: 10px; font-weight: 800; letter-spacing: .02em;
}
.hrs-page .hcb-skin__n { font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; }
.hrs-page .hcb-namelink {
display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
border: 0; background: none; padding: 0; cursor: pointer;
font: inherit; font-weight: 700; color: var(--p-700); text-align: left;
}
.hrs-page .hcb-namelink:hover { color: var(--p-500); }
.hrs-page .hcb-namelink:hover > svg { transform: translateX(2px); }
.hrs-page .hcb-namelink > svg { transition: transform .12s; opacity: .7; }
.hrs-page .hcb-namelink:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: 4px; }
.hrs-page .hcb-langchip {
display: inline-block; padding: 2px 8px; border-radius: 999px;
background: var(--n-50); border: 1px solid var(--border-subtle);
font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-secondary);
}
.hrs-page .hcb-typechip {
display: inline-block; padding: 2px 9px; border-radius: 6px;
font-size: 11.5px; font-weight: 600;
background: var(--n-50); border: 1px solid var(--border-subtle); color: var(--text-secondary);
}
.hrs-page .hcb-typechip--grid_view { background: var(--warn-50); border-color: var(--warn-100); color: var(--warn-700); }
.hrs-page .hcb-typechip--sign_in_sign_up { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hrs-page .hcb-typechip--slick { background: var(--info-50, #eef4ff); border-color: var(--info-300, #c7d8fb); color: #2b4a9c; }
.hrs-page .hcb-status {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.hrs-page .hcb-status .hcb-dot { width: 7px; height: 7px; border-radius: 999px; flex: none; }
.hrs-page .hcb-status--on { color: var(--ok-700, #1f9d57); }
.hrs-page .hcb-status--on .hcb-dot { background: var(--ok-500, #16a34a); }
.hrs-page .hcb-status--off { color: var(--text-tertiary); }
.hrs-page .hcb-status--off .hcb-dot { background: var(--n-400); }
.hrs-page .hcb-acts { display: flex; gap: 6px; justify-content: center; }
.hcb-act {
display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none;
border: 1px solid var(--border-default); border-radius: 7px;
background: var(--surface-panel, #fff); color: var(--text-secondary); cursor: pointer;
transition: background .12s, border-color .12s, color .12s;
}
.hcb-act:hover { background: var(--n-50); color: var(--text-primary); }
.hcb-act:disabled { opacity: .4; cursor: not-allowed; }
.hcb-act--edit:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hcb-act--danger:hover { background: var(--err-50); border-color: var(--err-100); color: var(--err-700); }
.hcb-act:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* mobile stacked cards (§11) */
.hrs-page .hcb-card__more { margin-top: 8px; font-size: 12px; }
.hrs-page .hcb-card__more > summary {
cursor: pointer; color: var(--p-700); font-weight: 600; list-style: none;
padding: 4px 0;
}
.hrs-page .hcb-card__more > summary::-webkit-details-marker { display: none; }
.hrs-page .hcb-card__more > summary::before { content: "▸ "; }
.hrs-page .hcb-card__more[open] > summary::before { content: "▾ "; }
.hrs-page .hcb-card__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hrs-page .hcb-card__del { color: var(--err-700); }
/* ===================================================================
Modal — shared .bp-modal chrome, resized + sectioned, full-screen ≤860px
=================================================================== */
.hcb-modal { width: min(640px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.hcb-modal--wide { width: min(1020px, calc(100vw - 32px)); }
.hcb-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 14px 18px; border-bottom: 1px solid var(--border-default);
}
.hcb-modal__title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.hcb-modal__sub { margin-top: 3px; font-size: 11.5px; color: var(--text-tertiary); }
.hcb-modal__sub code { font-size: 11px; }
.hcb-modal__body {
padding: 16px 18px; display: flex; flex-direction: column; gap: 16px;
max-height: calc(100vh - 210px); overflow-y: auto;
}
.hcb-modal__foot {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 18px; border-top: 1px solid var(--border-default); background: var(--n-25);
}
.hcb-x {
display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none;
border: 0; border-radius: 7px; background: none; color: var(--text-tertiary); cursor: pointer;
}
.hcb-x:hover { background: var(--n-50); color: var(--text-primary); }
.hcb-x:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* ---- sectioned panels (Settings.jsx shape) ---- */
.hcb-sec {
border: 1px solid var(--border-subtle); border-radius: 10px;
background: var(--surface-panel, #fff); overflow: hidden;
}
.hcb-sec__head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 14px; background: var(--n-25); border-bottom: 1px solid var(--border-subtle);
}
.hcb-sec__title {
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
color: var(--p-700);
}
.hcb-sec__count {
font-size: 11px; font-weight: 700; color: var(--text-tertiary);
background: var(--n-75); border-radius: 999px; padding: 2px 9px;
}
.hcb-sec__hint { padding: 12px 14px 0; font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
.hcb-sec__hint .explainer, .hcb-sec__hint > div { margin-bottom: 0; }
.hcb-sec__body { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.hcb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.hcb-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hcb-field--wide { grid-column: 1 / -1; }
.hcb-label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.hcb-req { color: var(--err-500); }
.hcb-hint { font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary); }
.hcb-hint b { color: var(--text-secondary); }
.hcb-hint code, .hcb-modal code, .hcb-sec code {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11px; background: var(--n-50); border: 1px solid var(--border-subtle);
border-radius: 4px; padding: 0 4px;
}
.hcb-fielderr { font-size: 11.5px; font-weight: 600; color: var(--err-700); }
.hcb-invalid { border-color: var(--err-500) !important; box-shadow: 0 0 0 3px var(--err-50); }
.hcb-readonly {
padding: 7px 10px; border: 1px dashed var(--border-default); border-radius: 7px;
background: var(--n-25); font-size: 11.5px; color: var(--text-tertiary);
}
.hcb-textarea { width: 100%; min-height: 76px; resize: vertical; }
.hcb-field .input, .hcb-field .select { width: 100%; }
.hcb-check { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-primary); cursor: pointer; }
.hcb-check input { accent-color: var(--p-600); width: 15px; height: 15px; cursor: pointer; }
.hcb-check--off { opacity: .6; cursor: not-allowed; }
.hcb-check--off input { cursor: not-allowed; }
.hcb-err {
display: flex; align-items: center; gap: 7px;
font-size: 12px; font-weight: 600; color: var(--err-700);
}
.hcb-err--banner {
padding: 9px 12px; border-radius: 8px;
background: var(--err-50); border: 1px solid var(--err-100);
}
.hcb-dlgq { font-size: 14px; color: var(--text-primary); margin-bottom: 6px; }
/* ===================================================================
Upload widget (_upload-meta.blade.php equivalent)
=================================================================== */
.hcb-up { display: flex; flex-direction: column; gap: 6px; }
.hcb-up__lab { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.hcb-up__row {
display: flex; align-items: flex-start; gap: 10px;
padding: 10px; border: 1px dashed var(--border-default); border-radius: 9px; background: var(--n-25);
}
.hcb-up--err .hcb-up__row { border-color: var(--err-500); background: var(--err-50); }
.hcb-up__thumb {
width: 38px; height: 38px; flex: none; border-radius: 8px;
display: grid; place-items: center;
background: var(--p-50); border: 1px solid var(--p-100); color: var(--p-600);
}
.hcb-up__main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.hcb-up__btn {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px; border-radius: 7px; cursor: pointer;
background: var(--surface-panel, #fff); border: 1px solid var(--border-default);
font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
}
.hcb-up__btn:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hcb-up__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hcb-up__name { font-size: 12px; color: var(--text-secondary); word-break: break-all; }
.hcb-up__name b { color: var(--text-primary); }
.hcb-up__none { color: var(--text-tertiary); font-style: italic; }
.hcb-up__new {
display: inline-block; margin-left: 5px; padding: 0 6px; border-radius: 999px;
background: var(--ok-50, #e8f6ee); color: var(--ok-700, #1f9d57);
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.hcb-up__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--text-tertiary); }
.hcb-up__softcap { display: inline-flex; align-items: center; gap: 3px; }
.hcb-up__note {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 600; color: var(--warn-700);
}
.hcb-up__clear {
display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none;
border: 0; border-radius: 6px; background: none; color: var(--text-tertiary); cursor: pointer;
}
.hcb-up__clear:hover { background: var(--err-50); color: var(--err-700); }
/* ===================================================================
Classic image cards (img_1 … img_6)
=================================================================== */
.hcb-imgcards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hcb-imgcard {
border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden;
background: var(--surface-panel, #fff);
}
.hcb-imgcard--off { background: var(--n-25); }
.hcb-imgcard--off .hcb-imgcard__body { opacity: .55; }
.hcb-imgcard__head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); background: var(--n-25);
}
.hcb-imgcard--off .hcb-imgcard__head { background: transparent; }
.hcb-imgcard__n { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.hcb-imgcard__body { padding: 12px; display: flex; flex-direction: column; gap: 11px; }
/* ===================================================================
Grid banners (grid_view)
=================================================================== */
.hcb-gridlist { display: flex; flex-direction: column; gap: 12px; }
.hcb-grid-b {
border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden;
background: var(--surface-panel, #fff);
}
.hcb-grid-b--off { opacity: .6; }
.hcb-grid-b__head {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); background: var(--n-25);
}
.hcb-grip { color: var(--text-tertiary); cursor: grab; display: inline-flex; transform: rotate(90deg); }
.hcb-grip:active { cursor: grabbing; }
.hcb-slotchip {
padding: 1px 8px; border-radius: 999px;
background: var(--n-75); color: var(--text-tertiary);
font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.hcb-forced {
padding: 1px 8px; border-radius: 999px;
background: var(--ok-50, #e8f6ee); color: var(--ok-700, #1f9d57);
font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.hcb-grid-b__acts { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hcb-grid-b__body { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.hcb-grid-b__tr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.hcb-addsec {
align-self: flex-start; margin-top: 12px;
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 13px; border-radius: 8px; cursor: pointer;
background: var(--p-50); border: 1px dashed var(--p-300); color: var(--p-700);
font-size: 12px; font-weight: 600;
}
.hcb-addsec:hover { background: var(--p-100); }
/* language pill bar (grid + sign-auth translations) */
.hcb-langbar {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle);
}
.hcb-langbar__lab {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--text-tertiary); margin-right: 2px;
}
.hcb-langpill {
padding: 3px 10px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--border-default); background: var(--surface-panel, #fff);
font-size: 11.5px; font-weight: 600; color: var(--text-secondary); white-space: nowrap;
}
.hcb-langpill:hover { background: var(--n-25); color: var(--text-primary); }
.hcb-langpill.has-val { border-color: var(--ok-300, #8bd3ab); }
.hcb-langpill.is-on { background: var(--p-600); border-color: var(--p-600); color: var(--text-on-primary, #fff); }
.hcb-langpill:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* ===================================================================
Sign In / Sign Up banners
=================================================================== */
.hcb-authlist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hcb-authb {
border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden;
background: var(--surface-panel, #fff);
}
.hcb-authb__head {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); background: var(--n-25);
}
.hcb-authb__body { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
/* ===================================================================
Network picker (select2 against GET /users2)
=================================================================== */
.hcb-net { position: relative; }
.hcb-net .input { width: 100%; }
.hcb-net--off .input { background: var(--n-25); }
.hcb-net--err .input { border-color: var(--err-500); }
.hcb-net__scrim { position: fixed; inset: 0; z-index: 10; }
.hcb-net__pop {
position: absolute; z-index: 11; top: calc(100% + 4px); left: 0; right: 0;
max-height: 240px; overflow-y: auto;
background: var(--surface-panel, #fff); border: 1px solid var(--border-default);
border-radius: 9px; box-shadow: var(--shadow-popover, 0 12px 30px -8px rgba(15,20,32,.28));
padding: 4px;
}
.hcb-net__opt, .hcb-net__chosen {
display: flex; align-items: center; gap: 9px; width: 100%;
padding: 7px 9px; border: 0; border-radius: 7px; background: none;
font: inherit; text-align: left; cursor: pointer;
}
.hcb-net__opt:hover { background: var(--p-50); }
.hcb-net__chosen {
cursor: default; background: var(--n-25); border: 1px solid var(--border-default);
}
.hcb-net__u { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.hcb-net__lvl {
padding: 1px 8px; border-radius: 999px; flex: none;
background: var(--p-50); border: 1px solid var(--p-100); color: var(--p-700);
font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.hcb-net__path { font-size: 10.5px; color: var(--text-tertiary); margin-left: auto; white-space: nowrap; }
.hcb-net__none { padding: 10px; font-size: 12px; color: var(--text-tertiary); }
.hcb-net__chosen .hcb-act { margin-left: 0; }
/* ===================================================================
§11 Responsive
=================================================================== */
@media (max-width: 1100px) {
.hcb-imgcards { grid-template-columns: 1fr; }
.hcb-authlist { grid-template-columns: 1fr; }
.hcb-grid-b__tr { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
/* full-screen modal */
.hcb-scrim { padding: 0; }
.hcb-modal, .hcb-modal--wide {
width: 100vw; max-width: none; min-height: 100vh; border-radius: 0;
display: flex; flex-direction: column;
}
.hcb-modal__body { max-height: none; flex: 1; }
.hcb-modal__foot { position: sticky; bottom: 0; }
.hcb-modal__foot .btn { flex: 1; justify-content: center; }
.hcb-grid2 { grid-template-columns: 1fr; }
/* status chips scroll horizontally instead of wrapping into three rows */
.hrs-page .hcb-tabs {
flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none; padding-bottom: 12px;
}
.hrs-page .hcb-tabs::-webkit-scrollbar { display: none; }
.hrs-page .hcb-tab { flex: none; }
/* language pills become a scrollable row */
.hcb-langbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.hcb-langbar::-webkit-scrollbar { display: none; }
.hcb-langpill { flex: none; }
.hcb-net__path { display: none; }
.hrs-page .hcb-card__acts .btn { flex: 1; justify-content: center; }
}
@media (max-width: 560px) {
.hcb-modal__head { padding: 12px 14px; }
.hcb-modal__body { padding: 14px; gap: 14px; }
.hcb-modal__foot { padding: 10px 14px; }
.hcb-modal__title { font-size: 15px; }
.hcb-sec__body { padding: 12px; }
.hcb-up__row { flex-wrap: wrap; }
.hcb-up__thumb { display: none; }
.hcb-grid-b__acts { margin-left: 0; width: 100%; }
}
/* ---- status chip strip (alternate `stato` filter, summarizeStatus counts) ---- */
.hrs-page .hcb-tabs {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
margin: 0 0 12px; padding-bottom: 10px;
border-bottom: 1px solid var(--border-subtle);
}
.hrs-page .hcb-tab {
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 12px; border-radius: var(--r-pill, 999px);
border: 1px solid var(--border-default); background: var(--surface-panel, #fff);
font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.hrs-page .hcb-tab:hover { background: var(--n-25); color: var(--text-primary); }
.hrs-page .hcb-tab:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hrs-page .hcb-tab .hcb-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--n-400); flex: none; }
.hrs-page .hcb-tab--ok .hcb-dot { background: var(--ok-500, #16a34a); }
.hrs-page .hcb-tab--off .hcb-dot { background: var(--err-500, #e9484a); }
.hrs-page .hcb-tab__n {
min-width: 20px; padding: 1px 7px; border-radius: 999px;
background: var(--n-75); color: var(--text-secondary);
font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center;
}
.hrs-page .hcb-tab.is-on {
background: var(--p-50); border-color: var(--p-300); color: var(--p-700);
}
.hrs-page .hcb-tab.is-on .hcb-tab__n { background: var(--p-100); color: var(--p-700); }
/* ---- list cells ---- */
.hrs-page .hcb-id { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--p-700); }
.hrs-page .hcb-dash { color: var(--text-tertiary); }
.hrs-page .hcb-skin { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.hrs-page .hcb-skin__av {
width: 24px; height: 24px; flex: none; border-radius: 7px;
display: grid; place-items: center;
background: var(--p-50); color: var(--p-700);
border: 1px solid var(--p-100);
font-size: 10px; font-weight: 800; letter-spacing: .02em;
}
.hrs-page .hcb-skin__n { font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; }
.hrs-page .hcb-namelink {
display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
border: 0; background: none; padding: 0; cursor: pointer;
font: inherit; font-weight: 700; color: var(--p-700); text-align: left;
}
.hrs-page .hcb-namelink:hover { color: var(--p-500); }
.hrs-page .hcb-namelink:hover > svg { transform: translateX(2px); }
.hrs-page .hcb-namelink > svg { transition: transform .12s; opacity: .7; }
.hrs-page .hcb-namelink:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: 4px; }
.hrs-page .hcb-langchip {
display: inline-block; padding: 2px 8px; border-radius: 999px;
background: var(--n-50); border: 1px solid var(--border-subtle);
font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-secondary);
}
.hrs-page .hcb-typechip {
display: inline-block; padding: 2px 9px; border-radius: 6px;
font-size: 11.5px; font-weight: 600;
background: var(--n-50); border: 1px solid var(--border-subtle); color: var(--text-secondary);
}
.hrs-page .hcb-typechip--grid_view { background: var(--warn-50); border-color: var(--warn-100); color: var(--warn-700); }
.hrs-page .hcb-typechip--sign_in_sign_up { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hrs-page .hcb-typechip--slick { background: var(--info-50, #eef4ff); border-color: var(--info-300, #c7d8fb); color: #2b4a9c; }
.hrs-page .hcb-status {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.hrs-page .hcb-status .hcb-dot { width: 7px; height: 7px; border-radius: 999px; flex: none; }
.hrs-page .hcb-status--on { color: var(--ok-700, #1f9d57); }
.hrs-page .hcb-status--on .hcb-dot { background: var(--ok-500, #16a34a); }
.hrs-page .hcb-status--off { color: var(--text-tertiary); }
.hrs-page .hcb-status--off .hcb-dot { background: var(--n-400); }
.hrs-page .hcb-acts { display: flex; gap: 6px; justify-content: center; }
.hcb-act {
display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none;
border: 1px solid var(--border-default); border-radius: 7px;
background: var(--surface-panel, #fff); color: var(--text-secondary); cursor: pointer;
transition: background .12s, border-color .12s, color .12s;
}
.hcb-act:hover { background: var(--n-50); color: var(--text-primary); }
.hcb-act:disabled { opacity: .4; cursor: not-allowed; }
.hcb-act--edit:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hcb-act--danger:hover { background: var(--err-50); border-color: var(--err-100); color: var(--err-700); }
.hcb-act:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* mobile stacked cards (§11) */
.hrs-page .hcb-card__more { margin-top: 8px; font-size: 12px; }
.hrs-page .hcb-card__more > summary {
cursor: pointer; color: var(--p-700); font-weight: 600; list-style: none;
padding: 4px 0;
}
.hrs-page .hcb-card__more > summary::-webkit-details-marker { display: none; }
.hrs-page .hcb-card__more > summary::before { content: "▸ "; }
.hrs-page .hcb-card__more[open] > summary::before { content: "▾ "; }
.hrs-page .hcb-card__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hrs-page .hcb-card__del { color: var(--err-700); }
/* ===================================================================
Modal — shared .bp-modal chrome, resized + sectioned, full-screen ≤860px
=================================================================== */
.hcb-modal { width: min(640px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.hcb-modal--wide { width: min(1020px, calc(100vw - 32px)); }
.hcb-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 14px 18px; border-bottom: 1px solid var(--border-default);
}
.hcb-modal__title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.hcb-modal__sub { margin-top: 3px; font-size: 11.5px; color: var(--text-tertiary); }
.hcb-modal__sub code { font-size: 11px; }
.hcb-modal__body {
padding: 16px 18px; display: flex; flex-direction: column; gap: 16px;
max-height: calc(100vh - 210px); overflow-y: auto;
}
.hcb-modal__foot {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 18px; border-top: 1px solid var(--border-default); background: var(--n-25);
}
.hcb-x {
display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none;
border: 0; border-radius: 7px; background: none; color: var(--text-tertiary); cursor: pointer;
}
.hcb-x:hover { background: var(--n-50); color: var(--text-primary); }
.hcb-x:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* ---- sectioned panels (Settings.jsx shape) ---- */
.hcb-sec {
border: 1px solid var(--border-subtle); border-radius: 10px;
background: var(--surface-panel, #fff); overflow: hidden;
}
.hcb-sec__head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 14px; background: var(--n-25); border-bottom: 1px solid var(--border-subtle);
}
.hcb-sec__title {
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
color: var(--p-700);
}
.hcb-sec__count {
font-size: 11px; font-weight: 700; color: var(--text-tertiary);
background: var(--n-75); border-radius: 999px; padding: 2px 9px;
}
.hcb-sec__hint { padding: 12px 14px 0; font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
.hcb-sec__hint .explainer, .hcb-sec__hint > div { margin-bottom: 0; }
.hcb-sec__body { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.hcb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.hcb-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hcb-field--wide { grid-column: 1 / -1; }
.hcb-label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.hcb-req { color: var(--err-500); }
.hcb-hint { font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary); }
.hcb-hint b { color: var(--text-secondary); }
.hcb-hint code, .hcb-modal code, .hcb-sec code {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11px; background: var(--n-50); border: 1px solid var(--border-subtle);
border-radius: 4px; padding: 0 4px;
}
.hcb-fielderr { font-size: 11.5px; font-weight: 600; color: var(--err-700); }
.hcb-invalid { border-color: var(--err-500) !important; box-shadow: 0 0 0 3px var(--err-50); }
.hcb-readonly {
padding: 7px 10px; border: 1px dashed var(--border-default); border-radius: 7px;
background: var(--n-25); font-size: 11.5px; color: var(--text-tertiary);
}
.hcb-textarea { width: 100%; min-height: 76px; resize: vertical; }
.hcb-field .input, .hcb-field .select { width: 100%; }
.hcb-check { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-primary); cursor: pointer; }
.hcb-check input { accent-color: var(--p-600); width: 15px; height: 15px; cursor: pointer; }
.hcb-check--off { opacity: .6; cursor: not-allowed; }
.hcb-check--off input { cursor: not-allowed; }
.hcb-err {
display: flex; align-items: center; gap: 7px;
font-size: 12px; font-weight: 600; color: var(--err-700);
}
.hcb-err--banner {
padding: 9px 12px; border-radius: 8px;
background: var(--err-50); border: 1px solid var(--err-100);
}
.hcb-dlgq { font-size: 14px; color: var(--text-primary); margin-bottom: 6px; }
/* ===================================================================
Upload widget (_upload-meta.blade.php equivalent)
=================================================================== */
.hcb-up { display: flex; flex-direction: column; gap: 6px; }
.hcb-up__lab { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.hcb-up__row {
display: flex; align-items: flex-start; gap: 10px;
padding: 10px; border: 1px dashed var(--border-default); border-radius: 9px; background: var(--n-25);
}
.hcb-up--err .hcb-up__row { border-color: var(--err-500); background: var(--err-50); }
.hcb-up__thumb {
width: 38px; height: 38px; flex: none; border-radius: 8px;
display: grid; place-items: center;
background: var(--p-50); border: 1px solid var(--p-100); color: var(--p-600);
}
.hcb-up__main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.hcb-up__btn {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px; border-radius: 7px; cursor: pointer;
background: var(--surface-panel, #fff); border: 1px solid var(--border-default);
font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
}
.hcb-up__btn:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hcb-up__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hcb-up__name { font-size: 12px; color: var(--text-secondary); word-break: break-all; }
.hcb-up__name b { color: var(--text-primary); }
.hcb-up__none { color: var(--text-tertiary); font-style: italic; }
.hcb-up__new {
display: inline-block; margin-left: 5px; padding: 0 6px; border-radius: 999px;
background: var(--ok-50, #e8f6ee); color: var(--ok-700, #1f9d57);
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.hcb-up__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--text-tertiary); }
.hcb-up__softcap { display: inline-flex; align-items: center; gap: 3px; }
.hcb-up__note {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 600; color: var(--warn-700);
}
.hcb-up__clear {
display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none;
border: 0; border-radius: 6px; background: none; color: var(--text-tertiary); cursor: pointer;
}
.hcb-up__clear:hover { background: var(--err-50); color: var(--err-700); }
/* ===================================================================
Classic image cards (img_1 … img_6)
=================================================================== */
.hcb-imgcards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hcb-imgcard {
border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden;
background: var(--surface-panel, #fff);
}
.hcb-imgcard--off { background: var(--n-25); }
.hcb-imgcard--off .hcb-imgcard__body { opacity: .55; }
.hcb-imgcard__head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); background: var(--n-25);
}
.hcb-imgcard--off .hcb-imgcard__head { background: transparent; }
.hcb-imgcard__n { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.hcb-imgcard__body { padding: 12px; display: flex; flex-direction: column; gap: 11px; }
/* ===================================================================
Grid banners (grid_view)
=================================================================== */
.hcb-gridlist { display: flex; flex-direction: column; gap: 12px; }
.hcb-grid-b {
border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden;
background: var(--surface-panel, #fff);
}
.hcb-grid-b--off { opacity: .6; }
.hcb-grid-b__head {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); background: var(--n-25);
}
.hcb-grip { color: var(--text-tertiary); cursor: grab; display: inline-flex; transform: rotate(90deg); }
.hcb-grip:active { cursor: grabbing; }
.hcb-slotchip {
padding: 1px 8px; border-radius: 999px;
background: var(--n-75); color: var(--text-tertiary);
font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.hcb-forced {
padding: 1px 8px; border-radius: 999px;
background: var(--ok-50, #e8f6ee); color: var(--ok-700, #1f9d57);
font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.hcb-grid-b__acts { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hcb-grid-b__body { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.hcb-grid-b__tr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.hcb-addsec {
align-self: flex-start; margin-top: 12px;
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 13px; border-radius: 8px; cursor: pointer;
background: var(--p-50); border: 1px dashed var(--p-300); color: var(--p-700);
font-size: 12px; font-weight: 600;
}
.hcb-addsec:hover { background: var(--p-100); }
/* language pill bar (grid + sign-auth translations) */
.hcb-langbar {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle);
}
.hcb-langbar__lab {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--text-tertiary); margin-right: 2px;
}
.hcb-langpill {
padding: 3px 10px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--border-default); background: var(--surface-panel, #fff);
font-size: 11.5px; font-weight: 600; color: var(--text-secondary); white-space: nowrap;
}
.hcb-langpill:hover { background: var(--n-25); color: var(--text-primary); }
.hcb-langpill.has-val { border-color: var(--ok-300, #8bd3ab); }
.hcb-langpill.is-on { background: var(--p-600); border-color: var(--p-600); color: var(--text-on-primary, #fff); }
.hcb-langpill:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* ===================================================================
Sign In / Sign Up banners
=================================================================== */
.hcb-authlist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hcb-authb {
border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden;
background: var(--surface-panel, #fff);
}
.hcb-authb__head {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); background: var(--n-25);
}
.hcb-authb__body { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
/* ===================================================================
Network picker (select2 against GET /users2)
=================================================================== */
.hcb-net { position: relative; }
.hcb-net .input { width: 100%; }
.hcb-net--off .input { background: var(--n-25); }
.hcb-net--err .input { border-color: var(--err-500); }
.hcb-net__scrim { position: fixed; inset: 0; z-index: 10; }
.hcb-net__pop {
position: absolute; z-index: 11; top: calc(100% + 4px); left: 0; right: 0;
max-height: 240px; overflow-y: auto;
background: var(--surface-panel, #fff); border: 1px solid var(--border-default);
border-radius: 9px; box-shadow: var(--shadow-popover, 0 12px 30px -8px rgba(15,20,32,.28));
padding: 4px;
}
.hcb-net__opt, .hcb-net__chosen {
display: flex; align-items: center; gap: 9px; width: 100%;
padding: 7px 9px; border: 0; border-radius: 7px; background: none;
font: inherit; text-align: left; cursor: pointer;
}
.hcb-net__opt:hover { background: var(--p-50); }
.hcb-net__chosen {
cursor: default; background: var(--n-25); border: 1px solid var(--border-default);
}
.hcb-net__u { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.hcb-net__lvl {
padding: 1px 8px; border-radius: 999px; flex: none;
background: var(--p-50); border: 1px solid var(--p-100); color: var(--p-700);
font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.hcb-net__path { font-size: 10.5px; color: var(--text-tertiary); margin-left: auto; white-space: nowrap; }
.hcb-net__none { padding: 10px; font-size: 12px; color: var(--text-tertiary); }
.hcb-net__chosen .hcb-act { margin-left: 0; }
/* ===================================================================
§11 Responsive
=================================================================== */
@media (max-width: 1100px) {
.hcb-imgcards { grid-template-columns: 1fr; }
.hcb-authlist { grid-template-columns: 1fr; }
.hcb-grid-b__tr { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
/* full-screen modal */
.hcb-scrim { padding: 0; }
.hcb-modal, .hcb-modal--wide {
width: 100vw; max-width: none; min-height: 100vh; border-radius: 0;
display: flex; flex-direction: column;
}
.hcb-modal__body { max-height: none; flex: 1; }
.hcb-modal__foot { position: sticky; bottom: 0; }
.hcb-modal__foot .btn { flex: 1; justify-content: center; }
.hcb-grid2 { grid-template-columns: 1fr; }
/* status chips scroll horizontally instead of wrapping into three rows */
.hrs-page .hcb-tabs {
flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none; padding-bottom: 12px;
}
.hrs-page .hcb-tabs::-webkit-scrollbar { display: none; }
.hrs-page .hcb-tab { flex: none; }
/* language pills become a scrollable row */
.hcb-langbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.hcb-langbar::-webkit-scrollbar { display: none; }
.hcb-langpill { flex: none; }
.hcb-net__path { display: none; }
.hrs-page .hcb-card__acts .btn { flex: 1; justify-content: center; }
}
@media (max-width: 560px) {
.hcb-modal__head { padding: 12px 14px; }
.hcb-modal__body { padding: 14px; gap: 14px; }
.hcb-modal__foot { padding: 10px 14px; }
.hcb-modal__title { font-size: 15px; }
.hcb-sec__body { padding: 12px; }
.hcb-up__row { flex-wrap: wrap; }
.hcb-up__thumb { display: none; }
.hcb-grid-b__acts { margin-left: 0; width: 100%; }
}
/* ---- status chip strip (alternate `stato` filter, summarizeStatus counts) ---- */
.hrs-page .hcb-tabs {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
margin: 0 0 12px; padding-bottom: 10px;
border-bottom: 1px solid var(--border-subtle);
}
.hrs-page .hcb-tab {
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 12px; border-radius: var(--r-pill, 999px);
border: 1px solid var(--border-default); background: var(--surface-panel, #fff);
font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.hrs-page .hcb-tab:hover { background: var(--n-25); color: var(--text-primary); }
.hrs-page .hcb-tab:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hrs-page .hcb-tab .hcb-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--n-400); flex: none; }
.hrs-page .hcb-tab--ok .hcb-dot { background: var(--ok-500, #16a34a); }
.hrs-page .hcb-tab--off .hcb-dot { background: var(--err-500, #e9484a); }
.hrs-page .hcb-tab__n {
min-width: 20px; padding: 1px 7px; border-radius: 999px;
background: var(--n-75); color: var(--text-secondary);
font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center;
}
.hrs-page .hcb-tab.is-on {
background: var(--p-50); border-color: var(--p-300); color: var(--p-700);
}
.hrs-page .hcb-tab.is-on .hcb-tab__n { background: var(--p-100); color: var(--p-700); }
/* ---- list cells ---- */
.hrs-page .hcb-id { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--p-700); }
.hrs-page .hcb-dash { color: var(--text-tertiary); }
.hrs-page .hcb-skin { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.hrs-page .hcb-skin__av {
width: 24px; height: 24px; flex: none; border-radius: 7px;
display: grid; place-items: center;
background: var(--p-50); color: var(--p-700);
border: 1px solid var(--p-100);
font-size: 10px; font-weight: 800; letter-spacing: .02em;
}
.hrs-page .hcb-skin__n { font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; }
.hrs-page .hcb-namelink {
display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
border: 0; background: none; padding: 0; cursor: pointer;
font: inherit; font-weight: 700; color: var(--p-700); text-align: left;
}
.hrs-page .hcb-namelink:hover { color: var(--p-500); }
.hrs-page .hcb-namelink:hover > svg { transform: translateX(2px); }
.hrs-page .hcb-namelink > svg { transition: transform .12s; opacity: .7; }
.hrs-page .hcb-namelink:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: 4px; }
.hrs-page .hcb-langchip {
display: inline-block; padding: 2px 8px; border-radius: 999px;
background: var(--n-50); border: 1px solid var(--border-subtle);
font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-secondary);
}
.hrs-page .hcb-typechip {
display: inline-block; padding: 2px 9px; border-radius: 6px;
font-size: 11.5px; font-weight: 600;
background: var(--n-50); border: 1px solid var(--border-subtle); color: var(--text-secondary);
}
.hrs-page .hcb-typechip--grid_view { background: var(--warn-50); border-color: var(--warn-100); color: var(--warn-700); }
.hrs-page .hcb-typechip--sign_in_sign_up { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hrs-page .hcb-typechip--slick { background: var(--info-50, #eef4ff); border-color: var(--info-300, #c7d8fb); color: #2b4a9c; }
.hrs-page .hcb-status {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.hrs-page .hcb-status .hcb-dot { width: 7px; height: 7px; border-radius: 999px; flex: none; }
.hrs-page .hcb-status--on { color: var(--ok-700, #1f9d57); }
.hrs-page .hcb-status--on .hcb-dot { background: var(--ok-500, #16a34a); }
.hrs-page .hcb-status--off { color: var(--text-tertiary); }
.hrs-page .hcb-status--off .hcb-dot { background: var(--n-400); }
.hrs-page .hcb-acts { display: flex; gap: 6px; justify-content: center; }
.hcb-act {
display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none;
border: 1px solid var(--border-default); border-radius: 7px;
background: var(--surface-panel, #fff); color: var(--text-secondary); cursor: pointer;
transition: background .12s, border-color .12s, color .12s;
}
.hcb-act:hover { background: var(--n-50); color: var(--text-primary); }
.hcb-act:disabled { opacity: .4; cursor: not-allowed; }
.hcb-act--edit:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hcb-act--danger:hover { background: var(--err-50); border-color: var(--err-100); color: var(--err-700); }
.hcb-act:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* mobile stacked cards (§11) */
.hrs-page .hcb-card__more { margin-top: 8px; font-size: 12px; }
.hrs-page .hcb-card__more > summary {
cursor: pointer; color: var(--p-700); font-weight: 600; list-style: none;
padding: 4px 0;
}
.hrs-page .hcb-card__more > summary::-webkit-details-marker { display: none; }
.hrs-page .hcb-card__more > summary::before { content: "▸ "; }
.hrs-page .hcb-card__more[open] > summary::before { content: "▾ "; }
.hrs-page .hcb-card__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hrs-page .hcb-card__del { color: var(--err-700); }
/* ===================================================================
Modal — shared .bp-modal chrome, resized + sectioned, full-screen ≤860px
=================================================================== */
.hcb-modal { width: min(640px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.hcb-modal--wide { width: min(1020px, calc(100vw - 32px)); }
.hcb-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 14px 18px; border-bottom: 1px solid var(--border-default);
}
.hcb-modal__title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.hcb-modal__sub { margin-top: 3px; font-size: 11.5px; color: var(--text-tertiary); }
.hcb-modal__sub code { font-size: 11px; }
.hcb-modal__body {
padding: 16px 18px; display: flex; flex-direction: column; gap: 16px;
max-height: calc(100vh - 210px); overflow-y: auto;
}
.hcb-modal__foot {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 18px; border-top: 1px solid var(--border-default); background: var(--n-25);
}
.hcb-x {
display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none;
border: 0; border-radius: 7px; background: none; color: var(--text-tertiary); cursor: pointer;
}
.hcb-x:hover { background: var(--n-50); color: var(--text-primary); }
.hcb-x:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* ---- sectioned panels (Settings.jsx shape) ---- */
.hcb-sec {
border: 1px solid var(--border-subtle); border-radius: 10px;
background: var(--surface-panel, #fff); overflow: hidden;
}
.hcb-sec__head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 14px; background: var(--n-25); border-bottom: 1px solid var(--border-subtle);
}
.hcb-sec__title {
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
color: var(--p-700);
}
.hcb-sec__count {
font-size: 11px; font-weight: 700; color: var(--text-tertiary);
background: var(--n-75); border-radius: 999px; padding: 2px 9px;
}
.hcb-sec__hint { padding: 12px 14px 0; font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
.hcb-sec__hint .explainer, .hcb-sec__hint > div { margin-bottom: 0; }
.hcb-sec__body { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.hcb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.hcb-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hcb-field--wide { grid-column: 1 / -1; }
.hcb-label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.hcb-req { color: var(--err-500); }
.hcb-hint { font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary); }
.hcb-hint b { color: var(--text-secondary); }
.hcb-hint code, .hcb-modal code, .hcb-sec code {
font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
font-size: 11px; background: var(--n-50); border: 1px solid var(--border-subtle);
border-radius: 4px; padding: 0 4px;
}
.hcb-fielderr { font-size: 11.5px; font-weight: 600; color: var(--err-700); }
.hcb-invalid { border-color: var(--err-500) !important; box-shadow: 0 0 0 3px var(--err-50); }
.hcb-readonly {
padding: 7px 10px; border: 1px dashed var(--border-default); border-radius: 7px;
background: var(--n-25); font-size: 11.5px; color: var(--text-tertiary);
}
.hcb-textarea { width: 100%; min-height: 76px; resize: vertical; }
.hcb-field .input, .hcb-field .select { width: 100%; }
.hcb-check { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-primary); cursor: pointer; }
.hcb-check input { accent-color: var(--p-600); width: 15px; height: 15px; cursor: pointer; }
.hcb-check--off { opacity: .6; cursor: not-allowed; }
.hcb-check--off input { cursor: not-allowed; }
.hcb-err {
display: flex; align-items: center; gap: 7px;
font-size: 12px; font-weight: 600; color: var(--err-700);
}
.hcb-err--banner {
padding: 9px 12px; border-radius: 8px;
background: var(--err-50); border: 1px solid var(--err-100);
}
.hcb-dlgq { font-size: 14px; color: var(--text-primary); margin-bottom: 6px; }
/* ===================================================================
Upload widget (_upload-meta.blade.php equivalent)
=================================================================== */
.hcb-up { display: flex; flex-direction: column; gap: 6px; }
.hcb-up__lab { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.hcb-up__row {
display: flex; align-items: flex-start; gap: 10px;
padding: 10px; border: 1px dashed var(--border-default); border-radius: 9px; background: var(--n-25);
}
.hcb-up--err .hcb-up__row { border-color: var(--err-500); background: var(--err-50); }
.hcb-up__thumb {
width: 38px; height: 38px; flex: none; border-radius: 8px;
display: grid; place-items: center;
background: var(--p-50); border: 1px solid var(--p-100); color: var(--p-600);
}
.hcb-up__main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.hcb-up__btn {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px; border-radius: 7px; cursor: pointer;
background: var(--surface-panel, #fff); border: 1px solid var(--border-default);
font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
}
.hcb-up__btn:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hcb-up__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hcb-up__name { font-size: 12px; color: var(--text-secondary); word-break: break-all; }
.hcb-up__name b { color: var(--text-primary); }
.hcb-up__none { color: var(--text-tertiary); font-style: italic; }
.hcb-up__new {
display: inline-block; margin-left: 5px; padding: 0 6px; border-radius: 999px;
background: var(--ok-50, #e8f6ee); color: var(--ok-700, #1f9d57);
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.hcb-up__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--text-tertiary); }
.hcb-up__softcap { display: inline-flex; align-items: center; gap: 3px; }
.hcb-up__note {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 600; color: var(--warn-700);
}
.hcb-up__clear {
display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none;
border: 0; border-radius: 6px; background: none; color: var(--text-tertiary); cursor: pointer;
}
.hcb-up__clear:hover { background: var(--err-50); color: var(--err-700); }
/* ===================================================================
Classic image cards (img_1 … img_6)
=================================================================== */
.hcb-imgcards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hcb-imgcard {
border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden;
background: var(--surface-panel, #fff);
}
.hcb-imgcard--off { background: var(--n-25); }
.hcb-imgcard--off .hcb-imgcard__body { opacity: .55; }
.hcb-imgcard__head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); background: var(--n-25);
}
.hcb-imgcard--off .hcb-imgcard__head { background: transparent; }
.hcb-imgcard__n { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.hcb-imgcard__body { padding: 12px; display: flex; flex-direction: column; gap: 11px; }
/* ===================================================================
Grid banners (grid_view)
=================================================================== */
.hcb-gridlist { display: flex; flex-direction: column; gap: 12px; }
.hcb-grid-b {
border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden;
background: var(--surface-panel, #fff);
}
.hcb-grid-b--off { opacity: .6; }
.hcb-grid-b__head {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); background: var(--n-25);
}
.hcb-grip { color: var(--text-tertiary); cursor: grab; display: inline-flex; transform: rotate(90deg); }
.hcb-grip:active { cursor: grabbing; }
.hcb-slotchip {
padding: 1px 8px; border-radius: 999px;
background: var(--n-75); color: var(--text-tertiary);
font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.hcb-forced {
padding: 1px 8px; border-radius: 999px;
background: var(--ok-50, #e8f6ee); color: var(--ok-700, #1f9d57);
font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.hcb-grid-b__acts { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hcb-grid-b__body { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.hcb-grid-b__tr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.hcb-addsec {
align-self: flex-start; margin-top: 12px;
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 13px; border-radius: 8px; cursor: pointer;
background: var(--p-50); border: 1px dashed var(--p-300); color: var(--p-700);
font-size: 12px; font-weight: 600;
}
.hcb-addsec:hover { background: var(--p-100); }
/* language pill bar (grid + sign-auth translations) */
.hcb-langbar {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle);
}
.hcb-langbar__lab {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--text-tertiary); margin-right: 2px;
}
.hcb-langpill {
padding: 3px 10px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--border-default); background: var(--surface-panel, #fff);
font-size: 11.5px; font-weight: 600; color: var(--text-secondary); white-space: nowrap;
}
.hcb-langpill:hover { background: var(--n-25); color: var(--text-primary); }
.hcb-langpill.has-val { border-color: var(--ok-300, #8bd3ab); }
.hcb-langpill.is-on { background: var(--p-600); border-color: var(--p-600); color: var(--text-on-primary, #fff); }
.hcb-langpill:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* ===================================================================
Sign In / Sign Up banners
=================================================================== */
.hcb-authlist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hcb-authb {
border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden;
background: var(--surface-panel, #fff);
}
.hcb-authb__head {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); background: var(--n-25);
}
.hcb-authb__body { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
/* ===================================================================
Network picker (select2 against GET /users2)
=================================================================== */
.hcb-net { position: relative; }
.hcb-net .input { width: 100%; }
.hcb-net--off .input { background: var(--n-25); }
.hcb-net--err .input { border-color: var(--err-500); }
.hcb-net__scrim { position: fixed; inset: 0; z-index: 10; }
.hcb-net__pop {
position: absolute; z-index: 11; top: calc(100% + 4px); left: 0; right: 0;
max-height: 240px; overflow-y: auto;
background: var(--surface-panel, #fff); border: 1px solid var(--border-default);
border-radius: 9px; box-shadow: var(--shadow-popover, 0 12px 30px -8px rgba(15,20,32,.28));
padding: 4px;
}
.hcb-net__opt, .hcb-net__chosen {
display: flex; align-items: center; gap: 9px; width: 100%;
padding: 7px 9px; border: 0; border-radius: 7px; background: none;
font: inherit; text-align: left; cursor: pointer;
}
.hcb-net__opt:hover { background: var(--p-50); }
.hcb-net__chosen {
cursor: default; background: var(--n-25); border: 1px solid var(--border-default);
}
.hcb-net__u { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.hcb-net__lvl {
padding: 1px 8px; border-radius: 999px; flex: none;
background: var(--p-50); border: 1px solid var(--p-100); color: var(--p-700);
font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.hcb-net__path { font-size: 10.5px; color: var(--text-tertiary); margin-left: auto; white-space: nowrap; }
.hcb-net__none { padding: 10px; font-size: 12px; color: var(--text-tertiary); }
.hcb-net__chosen .hcb-act { margin-left: 0; }
/* ===================================================================
§11 Responsive
=================================================================== */
@media (max-width: 1100px) {
.hcb-imgcards { grid-template-columns: 1fr; }
.hcb-authlist { grid-template-columns: 1fr; }
.hcb-grid-b__tr { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
/* full-screen modal */
.hcb-scrim { padding: 0; }
.hcb-modal, .hcb-modal--wide {
width: 100vw; max-width: none; min-height: 100vh; border-radius: 0;
display: flex; flex-direction: column;
}
.hcb-modal__body { max-height: none; flex: 1; }
.hcb-modal__foot { position: sticky; bottom: 0; }
.hcb-modal__foot .btn { flex: 1; justify-content: center; }
.hcb-grid2 { grid-template-columns: 1fr; }
/* status chips scroll horizontally instead of wrapping into three rows */
.hrs-page .hcb-tabs {
flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none; padding-bottom: 12px;
}
.hrs-page .hcb-tabs::-webkit-scrollbar { display: none; }
.hrs-page .hcb-tab { flex: none; }
/* language pills become a scrollable row */
.hcb-langbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.hcb-langbar::-webkit-scrollbar { display: none; }
.hcb-langpill { flex: none; }
.hcb-net__path { display: none; }
.hrs-page .hcb-card__acts .btn { flex: 1; justify-content: center; }
}
@media (max-width: 560px) {
.hcb-modal__head { padding: 12px 14px; }
.hcb-modal__body { padding: 14px; gap: 14px; }
.hcb-modal__foot { padding: 10px 14px; }
.hcb-modal__title { font-size: 15px; }
.hcb-sec__body { padding: 12px; }
.hcb-up__row { flex-wrap: wrap; }
.hcb-up__thumb { display: none; }
.hcb-grid-b__acts { margin-left: 0; width: 100%; }
}
/* ---- HostCmsProviderPromos ---- */
/* ===================================================================
PROVIDER + PROMOPLAY PROMOTIONS (src/pages/HostCmsProviderPromos.jsx)
CMS ▾ · admin.providerpromotions.index / admin.promoplaypromotions.index
→ HostCmsProviderPromotions + HostCmsPromoplayPromotions.
Page chrome (header, hero filter strip, table, mobile cards, pager)
comes from the shared hrs-* kit; everything below is only what that kit
does not cover: the hidden-by-default warning, the inverted Hidden
switch, the status chip strip, the two modal editors with their
sectioned panels, the provider/game pickers and the pp-api rail.
Prefix: hpp- · token-based only — --p-* resolves to the Iwakiri red
ramp under html[data-theme="iwakiri"]. No new hexes.
=================================================================== */
/* ---------- list cells ---------- */
.hpp-id { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text-tertiary); }
/* ---------- inverted Hidden switch (checked = visible) ---------- */
.hpp-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
/* Hidden rows read as "not live" at a glance — this is the whole point of the screen. */
.hrs-page .hrs-table tbody tr.hrs-trow:has(.hpp-switch input:not(:checked)) td { background: color-mix(in oklab, var(--warn-50) 55%, transparent); }
.hrs-page .hrs-card:has(.hpp-switch input:not(:checked)) { background: color-mix(in oklab, var(--warn-50) 45%, transparent); }
/* ---------- status chip strip (All / Visible / Hidden, an alternate hidden filter) ---------- */
.hpp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
/* ---------- row actions ---------- */
.hpp-acts { display: inline-flex; gap: 6px; justify-content: center; }
/* the expired-only delete guard, telegraphed before the click */
.hpp-act--guarded { opacity: .5; }
/* ---------- created-hidden banner above the table ---------- */
.hpp-created {
display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 11px 13px;
border: 1px solid var(--warn-300); border-left: 3px solid var(--warn-500); border-radius: 8px;
background: var(--warn-50); color: var(--warn-700); font-size: 12.5px; line-height: 1.5;
}
/* ---------- modal shell (full-screen on mobile, §11) ---------- */
.hpp-scrim { z-index: 240; }
/* ---------- THE gotcha: hidden-by-default warning at the top of every create form ---------- */
.hpp-hiddenwarn {
display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start;
padding: 13px 15px; border-radius: 10px;
border: 1px solid var(--warn-300); background: var(--warn-50);
box-shadow: inset 3px 0 0 var(--warn-500);
}
/* ---------- sectioned panels (Settings.jsx editor shape) ---------- */
.hpp-sec { border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden; background: var(--n-0); }
/* ---------- image field ---------- */
.hpp-img { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* ---------- provider picker + per-provider games accordion ---------- */
.hpp-picker { border: 1px solid var(--border-default); border-radius: 9px; overflow: hidden; background: var(--n-0); }
/* ---------- delete dialog bits ---------- */
.hpp-dlgq { font-size: 14px; font-weight: 700; color: var(--text-primary); }
/* ---------- pp-api rail (ungated proxy endpoints) ---------- */
.hpp-apirail {
margin-top: 16px; border: 1px solid var(--warn-300); border-radius: 10px; overflow: hidden;
background: var(--n-0);
}
/* ---------- mobile card extras (hrs-card body) ---------- */
.hpp-card__meta { font-size: 11.5px; color: var(--text-tertiary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
/* ===================================================================
Responsive (brief §11)
=================================================================== */
@media (max-width: 1100px) {
.hpp-api { grid-template-columns: 48px 1fr; row-gap: 4px; }
.hpp-api__c, .hpp-api__d { grid-column: 2; }
.hpp-api__risk { grid-column: 2; justify-self: start; }
}
@media (max-width: 860px) {
/* modals go full-screen instead of a fixed-width centred dialog */
.hpp-scrim { padding: 0; }
.hpp-modal__foot .btn { flex: 1; justify-content: center; }
/* the chip strip scrolls rather than wrapping into three rows */
.hpp-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 3px; }
.hpp-card__acts .btn { flex: 1; justify-content: center; }
}
/* mobile stacked-card actions (brief §11) */
.hpr-card__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* honest-absence footnote under the pager */
.hpr-foot {
margin: -2px 2px 4px; font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary);
}
/* ---- All / Visible / Hidden chip strip ---- */
.hpr-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 2px 10px; }
/* tone "n" (the All chip) intentionally has no override — the base rule below is the neutral look. */
.hpr-chipbtn .hpr-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--n-300); }
.hpr-chipbtn.is-on { background: var(--p-50); border-color: var(--p-200); color: var(--p-700); }
.hpr-chipbtn.is-on .hpr-chipbtn__c { background: var(--p-100); color: var(--p-700); }
/* ---- modal chrome (shared .bp-modal scrim, resized + sectioned) ---- */
.hpr-modal { width: min(600px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
/* ---- sectioned editor panels (Settings.jsx shape) ----
flex-shrink:0 throughout: the modal body is a scrolling flex column, and without it tall panels
are squashed to fit instead of scrolling. */
.hpr-modal__body > * { flex-shrink: 0; }
/* ---- Explainer-style callouts inside the panels ----
tone "info" is the default and uses the base rule; --warn / --err re-tint it. */
.hpr-callout {
display: grid; grid-template-columns: 16px 1fr; gap: 9px; align-items: start;
padding: 10px 12px; border-radius: 8px; font-size: 11.5px; line-height: 1.6;
border: 1px solid var(--p-100); background: var(--p-50); color: var(--text-secondary);
}
/* ---- fields ---- */
.hpr-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hpr-field .input, .hpr-field .select { width: 100%; }
.hpr-file .input { flex: 1; min-width: 160px; }
/* ---- multiselect (loumultiselect / select2 stand-in) ---- */
.hpr-multi {
display: flex; flex-direction: column; gap: 7px; padding: 8px;
border: 1px solid var(--border-default); border-radius: 9px; background: var(--n-25);
}
.hpr-multi__opt.is-on { background: var(--p-50); color: var(--p-700); font-weight: 600; }
/* per-provider game pickers */
.hpr-pergrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
/* ---- rich-text stand-in (TinyMCE) ---- */
.hpr-rt { border: 1px solid var(--border-default); border-radius: 8px; overflow: hidden; background: var(--n-0); }
/* ---- per-provider sport criteria ---- */
.hpr-crit { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
/* ===================================================================
Responsive — brief §11
=================================================================== */
@media (max-width: 860px) {
/* forms/modals go full-screen instead of a fixed-width centred dialog */
.hpr-scrim { padding: 0; }
.hpr-modal, .hpr-modal--wide {
width: 100vw; height: 100dvh; max-height: none; border-radius: 0;
display: flex; flex-direction: column;
}
.hpr-modal__body { max-height: none; flex: 1; }
.hpr-modal__foot { position: sticky; bottom: 0; flex-wrap: wrap; }
.hpr-foot__note { flex: 1 0 100%; order: -1; margin-bottom: 4px; }
.hpr-modal__foot .btn { flex: 1; justify-content: center; }
/* two-column field grids collapse */
.hpr-grid2 { grid-template-columns: 1fr; gap: 12px; }
.hpr-pergrid, .hpr-crit { grid-template-columns: 1fr; }
/* chip strip becomes a horizontally scrollable rail rather than wrapping */
.hpr-chips {
flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
scrollbar-width: none; -ms-overflow-style: none;
}
.hpr-chips::-webkit-scrollbar { display: none; }
.hpr-chipbtn { flex-shrink: 0; }
.hpr-card__acts .btn { flex: 1 1 44%; justify-content: center; }
}
/* ---- list cells ---- */
.hpr-id {
font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* mobile stacked-card actions (brief §11) */
.hpr-card__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* honest-absence footnote under the pager */
.hpr-foot {
margin: -2px 2px 4px; font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary);
}
/* ---- All / Visible / Hidden chip strip ---- */
.hpr-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 2px 10px; }
/* tone "n" (the All chip) intentionally has no override — the base rule below is the neutral look. */
.hpr-chipbtn .hpr-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--n-300); }
.hpr-chipbtn.is-on { background: var(--p-50); border-color: var(--p-200); color: var(--p-700); }
.hpr-chipbtn.is-on .hpr-chipbtn__c { background: var(--p-100); color: var(--p-700); }
/* ---- modal chrome (shared .bp-modal scrim, resized + sectioned) ---- */
.hpr-modal { width: min(600px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
/* ---- sectioned editor panels (Settings.jsx shape) ----
flex-shrink:0 throughout: the modal body is a scrolling flex column, and without it tall panels
are squashed to fit instead of scrolling. */
.hpr-modal__body > * { flex-shrink: 0; }
/* ---- Explainer-style callouts inside the panels ----
tone "info" is the default and uses the base rule; --warn / --err re-tint it. */
.hpr-callout {
display: grid; grid-template-columns: 16px 1fr; gap: 9px; align-items: start;
padding: 10px 12px; border-radius: 8px; font-size: 11.5px; line-height: 1.6;
border: 1px solid var(--p-100); background: var(--p-50); color: var(--text-secondary);
}
/* ---- fields ---- */
.hpr-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hpr-field .input, .hpr-field .select { width: 100%; }
.hpr-file .input { flex: 1; min-width: 160px; }
/* ---- multiselect (loumultiselect / select2 stand-in) ---- */
.hpr-multi {
display: flex; flex-direction: column; gap: 7px; padding: 8px;
border: 1px solid var(--border-default); border-radius: 9px; background: var(--n-25);
}
.hpr-multi__opt.is-on { background: var(--p-50); color: var(--p-700); font-weight: 600; }
/* per-provider game pickers */
.hpr-pergrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
/* ---- rich-text stand-in (TinyMCE) ---- */
.hpr-rt { border: 1px solid var(--border-default); border-radius: 8px; overflow: hidden; background: var(--n-0); }
/* ---- per-provider sport criteria ---- */
.hpr-crit { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
/* ===================================================================
Responsive — brief §11
=================================================================== */
@media (max-width: 860px) {
/* forms/modals go full-screen instead of a fixed-width centred dialog */
.hpr-scrim { padding: 0; }
.hpr-modal, .hpr-modal--wide {
width: 100vw; height: 100dvh; max-height: none; border-radius: 0;
display: flex; flex-direction: column;
}
.hpr-modal__body { max-height: none; flex: 1; }
.hpr-modal__foot { position: sticky; bottom: 0; flex-wrap: wrap; }
.hpr-foot__note { flex: 1 0 100%; order: -1; margin-bottom: 4px; }
.hpr-modal__foot .btn { flex: 1; justify-content: center; }
/* two-column field grids collapse */
.hpr-grid2 { grid-template-columns: 1fr; gap: 12px; }
.hpr-pergrid, .hpr-crit { grid-template-columns: 1fr; }
/* chip strip becomes a horizontally scrollable rail rather than wrapping */
.hpr-chips {
flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
scrollbar-width: none; -ms-overflow-style: none;
}
.hpr-chips::-webkit-scrollbar { display: none; }
.hpr-chipbtn { flex-shrink: 0; }
.hpr-card__acts .btn { flex: 1 1 44%; justify-content: center; }
}
/* ---- list cells ---- */
.hpr-id {
font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* mobile stacked-card actions (brief §11) */
.hpr-card__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* honest-absence footnote under the pager */
.hpr-foot {
margin: -2px 2px 4px; font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary);
}
/* ---- All / Visible / Hidden chip strip ---- */
.hpr-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 2px 10px; }
/* tone "n" (the All chip) intentionally has no override — the base rule below is the neutral look. */
.hpr-chipbtn .hpr-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--n-300); }
.hpr-chipbtn.is-on { background: var(--p-50); border-color: var(--p-200); color: var(--p-700); }
.hpr-chipbtn.is-on .hpr-chipbtn__c { background: var(--p-100); color: var(--p-700); }
/* ---- modal chrome (shared .bp-modal scrim, resized + sectioned) ---- */
.hpr-modal { width: min(600px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
/* ---- sectioned editor panels (Settings.jsx shape) ---- */
.hpr-panel {
background: var(--n-0); border: 1px solid var(--border-default); border-radius: 10px; overflow: hidden;
}
/* ---- Explainer-style callouts inside the panels ----
tone "info" is the default and uses the base rule; --warn / --err re-tint it. */
.hpr-callout {
display: grid; grid-template-columns: 16px 1fr; gap: 9px; align-items: start;
padding: 10px 12px; border-radius: 8px; font-size: 11.5px; line-height: 1.6;
border: 1px solid var(--p-100); background: var(--p-50); color: var(--text-secondary);
}
/* ---- fields ---- */
.hpr-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hpr-field .input, .hpr-field .select { width: 100%; }
.hpr-file .input { flex: 1; min-width: 160px; }
/* ---- multiselect (loumultiselect / select2 stand-in) ---- */
.hpr-multi {
display: flex; flex-direction: column; gap: 7px; padding: 8px;
border: 1px solid var(--border-default); border-radius: 9px; background: var(--n-25);
}
.hpr-multi__opt.is-on { background: var(--p-50); color: var(--p-700); font-weight: 600; }
/* per-provider game pickers */
.hpr-pergrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
/* ---- rich-text stand-in (TinyMCE) ---- */
.hpr-rt { border: 1px solid var(--border-default); border-radius: 8px; overflow: hidden; background: var(--n-0); }
/* ---- per-provider sport criteria ---- */
.hpr-crit { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
/* ===================================================================
Responsive — brief §11
=================================================================== */
@media (max-width: 860px) {
/* forms/modals go full-screen instead of a fixed-width centred dialog */
.hpr-scrim { padding: 0; }
.hpr-modal, .hpr-modal--wide {
width: 100vw; height: 100dvh; max-height: none; border-radius: 0;
display: flex; flex-direction: column;
}
.hpr-modal__body { max-height: none; flex: 1; }
.hpr-modal__foot { position: sticky; bottom: 0; flex-wrap: wrap; }
.hpr-foot__note { flex: 1 0 100%; order: -1; margin-bottom: 4px; }
.hpr-modal__foot .btn { flex: 1; justify-content: center; }
/* two-column field grids collapse */
.hpr-grid2 { grid-template-columns: 1fr; gap: 12px; }
.hpr-pergrid, .hpr-crit { grid-template-columns: 1fr; }
/* chip strip becomes a horizontally scrollable rail rather than wrapping */
.hpr-chips {
flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
scrollbar-width: none; -ms-overflow-style: none;
}
.hpr-chips::-webkit-scrollbar { display: none; }
.hpr-chipbtn { flex-shrink: 0; }
.hpr-card__acts .btn { flex: 1 1 44%; justify-content: center; }
}
/* ---- HostCmsPromoTriggers ---- */
/* ===================================================================
CMS ▾ → Promo Triggers (src/pages/HostCmsPromoTriggers.jsx)
Page chrome comes from the hrs-* report shell; these are the
screen-local bits: list cells + row actions, the Valid/Expired chip
row, the create/edit modal, the execution-logs modal, and the
deliberately loud treatment of GET /testTrigger.
Iwakiri red ramp (--p-*) for brand, semantic tokens for state.
NOTE ON THE DANGER RAMP: under html[data-theme="iwakiri"] the shared
.btn--danger resolves to the BRAND red (--p-500 #e2011a), i.e. it is
indistinguishable from a primary button. A screen whose worst button
moves real money cannot rely on hue alone here, so the destructive
affordances below re-point to the semantic error ramp (--err-700)
AND carry a hazard stripe, an alert glyph and a typed confirmation —
scoped to .hpt-* so nothing else on the platform changes.
=================================================================== */
/* ---- list cells ---- */
.hpt-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hpt-dim { color: var(--text-tertiary); font-size: 12px; white-space: nowrap; }
.hpt-skin { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.hpt-skin__av {
display: inline-grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0;
border-radius: 6px; background: var(--p-50); color: var(--p-700);
font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
}
.hpt-skin__n { font-size: 12.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hpt-namelink {
display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
width: 100%; min-width: 0; padding: 3px 6px 3px 0; border: 0; background: none;
font-family: inherit; font-size: 13px; font-weight: 600; color: var(--p-700);
text-align: left; cursor: pointer; border-radius: 6px;
}
.hpt-namelink > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hpt-namelink:hover { color: var(--p-500); background: var(--p-50); padding-left: 6px; }
.hpt-namelink:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hpt-hiddenchip {
flex-shrink: 0; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--n-700); background: var(--n-75); border: 1px solid var(--border-default);
border-radius: 999px; padding: 1px 6px;
}
.hpt-typechip { gap: 4px; }
.hpt-togglecell { display: inline-flex; }
.hpt-logsbtn {
display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
border: 1px solid var(--border-default); background: var(--n-0); color: var(--text-secondary);
font-family: inherit; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
}
.hpt-logsbtn:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hpt-logsbtn--empty { color: var(--text-tertiary); font-weight: 600; }
.hpt-logsbtn--bad { border-color: var(--err-100); background: var(--err-50); color: var(--err-700); }
.hpt-logsbtn--bad:hover { border-color: var(--err-300); background: var(--err-50); color: var(--err-700); }
.hpt-logsbtn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hpt-acts { display: inline-flex; gap: 6px; justify-content: center; }
.hpt-act {
display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px;
border: 1px solid var(--border-default); background: var(--n-0); color: var(--text-tertiary);
cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.hpt-act:hover { background: var(--n-50); color: var(--text-primary); }
.hpt-act--edit:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hpt-act--danger:hover { background: var(--err-50); border-color: var(--err-100); color: var(--err-700); }
.hpt-act:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* mobile stacked-card actions (brief §11) */
.hpt-card__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hpt-card__del { color: var(--err-700); }
/* ---- Valid / Expired chip row (the real index's filter shortcuts) ---- */
.hpt-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.hpt-chip {
display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px;
border: 1px solid var(--border-default); background: var(--n-0); color: var(--text-secondary);
font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
transition: border-color .12s, background .12s, color .12s;
}
.hpt-chip b { font-variant-numeric: tabular-nums; font-weight: 700; }
.hpt-chip__dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.hpt-chip--valid { color: var(--ok-700); }
.hpt-chip--expired { color: var(--text-tertiary); }
.hpt-chip:hover { border-color: var(--n-150, var(--border-default)); background: var(--n-25); }
.hpt-chip.hpt-on { border-color: var(--p-200); background: var(--p-50); color: var(--p-700); box-shadow: inset 0 0 0 1px var(--p-100); }
.hpt-chip:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hpt-chips__note { font-size: 11px; color: var(--text-tertiary); }
/* ---- shared modal chrome (.bp-modal scrim) ---- */
.hpt-modal { width: min(620px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.hpt-modal--wide { width: min(980px, calc(100vw - 32px)); }
.hpt-modal--danger { border-top: 4px solid var(--err-500); }
.hpt-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 14px 18px; border-bottom: 1px solid var(--border-default);
}
.hpt-modal__titles { min-width: 0; }
.hpt-modal__title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.hpt-modal--danger .hpt-modal__title { color: var(--err-700); }
.hpt-modal__sub { margin-top: 3px; font-size: 11.5px; color: var(--text-tertiary); }
.hpt-modal__body {
padding: 16px 18px; display: flex; flex-direction: column; gap: 14px;
max-height: calc(100vh - 220px); overflow-y: auto;
}
.hpt-modal__foot {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 18px; border-top: 1px solid var(--border-default); background: var(--n-25);
}
.hpt-x {
display: inline-grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
border: 0; border-radius: 7px; background: none; color: var(--text-tertiary); cursor: pointer;
}
.hpt-x:hover { background: var(--n-50); color: var(--text-primary); }
/* destructive buttons inside these modals leave the brand ramp — see the header note */
.hpt-modal .btn--danger { background: var(--err-500); border-color: var(--err-500); }
.hpt-modal .btn--danger:hover { background: var(--err-700); border-color: var(--err-700); }
.hpt-modal .btn--danger:disabled { background: var(--n-150, #d9dde5); border-color: var(--n-150, #d9dde5); color: var(--n-0); cursor: not-allowed; }
.hpt-modal--danger .btn--danger:not(:disabled) {
background: var(--err-700); border-color: var(--err-700);
box-shadow: 0 0 0 3px rgba(246, 78, 96, .18);
}
/* ---- form ---- */
.hpt-sectitle {
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
color: var(--p-700); padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle);
}
.hpt-sectitle--danger { color: var(--err-700); border-bottom-color: var(--err-100); }
.hpt-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.hpt-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.hpt-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.hpt-req { color: var(--err-500); }
.hpt-hint { font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary); }
.hpt-hint b { color: var(--text-secondary); }
.hpt-hint code, .hpt-what code, .hpt-danger__body code, .hpt-absence__l code {
font-family: var(--font-mono); font-size: 10.5px; color: var(--text-secondary);
}
.hpt-hint--tight { margin-top: -4px; }
.hpt-hint--warn {
display: flex; align-items: flex-start; gap: 7px; padding: 9px 11px; border-radius: 7px;
background: var(--warn-50); border: 1px solid var(--warn-100); color: var(--warn-700); font-weight: 600;
}
.hpt-fielderr { font-size: 11.5px; font-weight: 600; color: var(--err-700); }
.hpt-invalid, .hpt-invalid:focus {
border-color: var(--err-500) !important;
box-shadow: 0 0 0 3px rgba(246, 78, 96, .14) !important;
}
.hpt-err {
display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; font-weight: 600;
color: var(--err-700); background: var(--err-50); border: 1px solid var(--err-100);
border-radius: 7px; padding: 9px 11px; line-height: 1.5;
}
.hpt-err--banner { font-weight: 700; }
.hpt-dlgq { font-size: 14px; color: var(--text-primary); }
.hpt-promoq { margin-bottom: 2px; }
.hpt-amountrow { display: flex; align-items: center; gap: 8px; }
.hpt-curtag {
font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-secondary);
background: var(--n-75); border: 1px solid var(--border-default); border-radius: 6px; padding: 4px 8px;
}
/* real-money warning inside the editor */
.hpt-danger-note {
display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start;
padding: 11px 13px; border-radius: 8px; line-height: 1.6; font-size: 12px;
color: var(--err-700); background: var(--err-50); border: 1px solid var(--err-100);
border-left: 4px solid var(--err-500);
}
.hpt-danger-note b { font-weight: 700; }
.hpt-danger-note code { font-family: var(--font-mono); font-size: 10.5px; }
/* ---- execution-logs modal ---- */
.hpt-lf { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.hpt-lf__f { display: flex; flex-direction: column; gap: 5px; min-width: 140px; }
.hpt-lf__f--grow { flex: 1 1 200px; }
.hpt-lf__f label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); }
.hpt-lf__f .input, .hpt-lf__f .select { height: 34px; font-size: 12.5px; }
.hpt-lf__count {
margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--p-700);
background: var(--p-50); border-radius: 999px; padding: 5px 11px; font-variant-numeric: tabular-nums;
}
.hpt-modal .hrs-tenv { box-shadow: none; }
.hpt-json {
margin: 0; max-height: 108px; overflow: auto; white-space: pre;
font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5; color: var(--text-secondary);
background: var(--n-25); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 7px 9px;
}
.hpt-player { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.hpt-player__u { font-weight: 600; color: var(--p-700); border-bottom: 1px dotted var(--p-200); cursor: help; }
.hpt-player__id { font-size: 10.5px; }
.hpt-errtext { font-size: 11.5px; line-height: 1.5; color: var(--err-700); }
.hpt-errtext--card { margin-top: 8px; }
.hpt-cardmore { margin-top: 8px; }
.hpt-cardmore > summary { font-size: 11.5px; font-weight: 700; color: var(--p-700); cursor: pointer; }
.hpt-cardmore[open] > summary { margin-bottom: 6px; }
/* ---- honest-absence strip ---- */
.hpt-absence {
margin: 16px 0 0; padding: 12px 14px; border-radius: 10px;
background: var(--n-25); border: 1px solid var(--border-default);
}
.hpt-absence__h {
display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin-bottom: 8px;
}
.hpt-absence__l { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.hpt-absence__l li { font-size: 12px; line-height: 1.6; color: var(--text-tertiary); }
.hpt-absence__l b { color: var(--text-secondary); }
/* ===================================================================
GET /testTrigger — the destructive dev leftover.
Hazard stripe + error ramp + wide left rule, so it cannot be read as
"just another red brand panel" on a red-branded screen.
=================================================================== */
.hpt-danger {
margin: 16px 0 0; border-radius: 10px; overflow: hidden;
background: var(--err-50); border: 1px solid var(--err-100); border-left: 5px solid var(--err-500);
}
.hpt-danger__head {
display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px;
color: var(--err-700);
background: repeating-linear-gradient(135deg,
rgba(246, 78, 96, .10) 0 10px,
rgba(246, 78, 96, .02) 10px 20px);
border-bottom: 1px solid var(--err-100);
}
.hpt-danger__title { font-size: 13.5px; font-weight: 700; }
.hpt-danger__title .hpt-mono { font-size: 12.5px; }
.hpt-danger__sub { margin-top: 2px; font-size: 11px; color: var(--err-700); opacity: .8; }
.hpt-danger__body { padding: 12px 16px 4px; }
.hpt-danger__body p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.65; color: var(--text-secondary); }
.hpt-danger__body b { color: var(--text-primary); font-weight: 700; }
.hpt-danger__who { color: var(--err-700) !important; font-weight: 600; }
.hpt-danger__foot {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 12px 16px; border-top: 1px solid var(--err-100); background: rgba(255, 255, 255, .55);
}
.hpt-danger__hintline { font-size: 11.5px; color: var(--text-tertiary); }
.hpt-runbtn {
background: var(--err-700); border-color: var(--err-700); color: #fff; font-weight: 700;
box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
.hpt-runbtn:hover { background: #b41f2e; border-color: #b41f2e; }
.hpt-runbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(246, 78, 96, .32); }
/* "what this call actually does" list inside the confirm dialog */
.hpt-what { border: 1px solid var(--border-default); border-radius: 8px; padding: 11px 13px; background: var(--n-25); }
.hpt-what__h {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--text-secondary); margin-bottom: 7px;
}
.hpt-what ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.hpt-what li { font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
.hpt-what b { font-weight: 700; color: var(--text-primary); }
/* ---- responsive (brief §11) ---- */
@media (max-width: 860px) {
/* modals go full-screen instead of a fixed-width centred dialog */
.hpt-scrim { padding: 0; }
.hpt-modal, .hpt-modal--wide {
width: 100vw; height: 100dvh; max-height: none; border-radius: 0;
display: flex; flex-direction: column;
}
.hpt-modal__body { max-height: none; flex: 1; }
.hpt-modal__foot { position: sticky; bottom: 0; }
.hpt-modal__foot .btn { flex: 1; justify-content: center; }
.hpt-grid2 { grid-template-columns: 1fr; }
.hpt-lf { gap: 8px; }
.hpt-lf__f { min-width: 0; flex: 1 1 140px; }
.hpt-lf__count { margin-left: 0; flex-basis: 100%; text-align: center; }
.hpt-chips { gap: 6px; }
.hpt-chips__note { flex-basis: 100%; }
.hpt-card__acts .btn { flex: 1 1 auto; justify-content: center; }
.hpt-danger__foot { flex-direction: column; align-items: stretch; }
.hpt-runbtn { justify-content: center; }
.hpt-danger__hintline { text-align: center; }
/* the JSON payload is a desktop luxury — inside a mobile card it gets its own scroll box */
.hpt-json { max-height: 160px; }
}
@media (max-width: 520px) {
.hpt-modal__head { padding: 12px 14px; }
.hpt-modal__body { padding: 14px; }
.hpt-modal__foot { padding: 10px 14px; }
.hpt-modal__title { font-size: 15px; }
.hpt-danger__head, .hpt-danger__body, .hpt-danger__foot { padding-left: 12px; padding-right: 12px; }
.hpt-absence { padding: 10px 12px; }
}
/* ---- list cells ---- */
.hpt-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hpt-dim { color: var(--text-tertiary); font-size: 12px; white-space: nowrap; }
.hpt-skin { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.hpt-skin__av {
display: inline-grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0;
border-radius: 6px; background: var(--p-50); color: var(--p-700);
font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
}
.hpt-skin__n { font-size: 12.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hpt-namelink {
display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
width: 100%; min-width: 0; padding: 3px 6px 3px 0; border: 0; background: none;
font-family: inherit; font-size: 13px; font-weight: 600; color: var(--p-700);
text-align: left; cursor: pointer; border-radius: 6px;
}
.hpt-namelink > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hpt-namelink:hover { color: var(--p-500); background: var(--p-50); padding-left: 6px; }
.hpt-namelink:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hpt-hiddenchip {
flex-shrink: 0; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--n-700); background: var(--n-75); border: 1px solid var(--border-default);
border-radius: 999px; padding: 1px 6px;
}
.hpt-typechip { gap: 4px; }
.hpt-togglecell { display: inline-flex; }
.hpt-logsbtn {
display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
border: 1px solid var(--border-default); background: var(--n-0); color: var(--text-secondary);
font-family: inherit; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
}
.hpt-logsbtn:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hpt-logsbtn--empty { color: var(--text-tertiary); font-weight: 600; }
.hpt-logsbtn--bad { border-color: var(--err-100); background: var(--err-50); color: var(--err-700); }
.hpt-logsbtn--bad:hover { border-color: var(--err-300); background: var(--err-50); color: var(--err-700); }
.hpt-logsbtn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hpt-acts { display: inline-flex; gap: 6px; justify-content: center; }
.hpt-act {
display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px;
border: 1px solid var(--border-default); background: var(--n-0); color: var(--text-tertiary);
cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.hpt-act:hover { background: var(--n-50); color: var(--text-primary); }
.hpt-act--edit:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hpt-act--danger:hover { background: var(--err-50); border-color: var(--err-100); color: var(--err-700); }
.hpt-act:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* mobile stacked-card actions (brief §11) */
.hpt-card__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hpt-card__del { color: var(--err-700); }
/* ---- Valid / Expired chip row (the real index's filter shortcuts) ---- */
.hpt-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.hpt-chip {
display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px;
border: 1px solid var(--border-default); background: var(--n-0); color: var(--text-secondary);
font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
transition: border-color .12s, background .12s, color .12s;
}
.hpt-chip b { font-variant-numeric: tabular-nums; font-weight: 700; }
.hpt-chip__dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.hpt-chip--valid { color: var(--ok-700); }
.hpt-chip--expired { color: var(--text-tertiary); }
.hpt-chip:hover { border-color: var(--n-150, var(--border-default)); background: var(--n-25); }
.hpt-chip.hpt-on { border-color: var(--p-200); background: var(--p-50); color: var(--p-700); box-shadow: inset 0 0 0 1px var(--p-100); }
.hpt-chip:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hpt-chips__note { font-size: 11px; color: var(--text-tertiary); }
/* ---- shared modal chrome (.bp-modal scrim) ---- */
.hpt-modal { width: min(620px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.hpt-modal--wide { width: min(980px, calc(100vw - 32px)); }
.hpt-modal--danger { border-top: 4px solid var(--err-500); }
.hpt-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 14px 18px; border-bottom: 1px solid var(--border-default);
}
.hpt-modal__titles { min-width: 0; }
.hpt-modal__title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.hpt-modal--danger .hpt-modal__title { color: var(--err-700); }
.hpt-modal__sub { margin-top: 3px; font-size: 11.5px; color: var(--text-tertiary); }
.hpt-modal__body {
padding: 16px 18px; display: flex; flex-direction: column; gap: 14px;
max-height: calc(100vh - 220px); overflow-y: auto;
}
.hpt-modal__foot {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 18px; border-top: 1px solid var(--border-default); background: var(--n-25);
}
.hpt-x {
display: inline-grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
border: 0; border-radius: 7px; background: none; color: var(--text-tertiary); cursor: pointer;
}
.hpt-x:hover { background: var(--n-50); color: var(--text-primary); }
/* destructive buttons inside these modals leave the brand ramp — see the header note */
.hpt-modal .btn--danger { background: var(--err-500); border-color: var(--err-500); }
.hpt-modal .btn--danger:hover { background: var(--err-700); border-color: var(--err-700); }
.hpt-modal .btn--danger:disabled { background: var(--n-150, #d9dde5); border-color: var(--n-150, #d9dde5); color: var(--n-0); cursor: not-allowed; }
.hpt-modal--danger .btn--danger:not(:disabled) {
background: var(--err-700); border-color: var(--err-700);
box-shadow: 0 0 0 3px rgba(246, 78, 96, .18);
}
/* ---- form ---- */
.hpt-sectitle {
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
color: var(--p-700); padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle);
}
.hpt-sectitle--danger { color: var(--err-700); border-bottom-color: var(--err-100); }
.hpt-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.hpt-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.hpt-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.hpt-req { color: var(--err-500); }
.hpt-hint { font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary); }
.hpt-hint b { color: var(--text-secondary); }
.hpt-hint code, .hpt-what code, .hpt-danger__body code, .hpt-absence__l code {
font-family: var(--font-mono); font-size: 10.5px; color: var(--text-secondary);
}
.hpt-hint--tight { margin-top: -4px; }
.hpt-hint--warn {
display: flex; align-items: flex-start; gap: 7px; padding: 9px 11px; border-radius: 7px;
background: var(--warn-50); border: 1px solid var(--warn-100); color: var(--warn-700); font-weight: 600;
}
.hpt-fielderr { font-size: 11.5px; font-weight: 600; color: var(--err-700); }
.hpt-invalid, .hpt-invalid:focus {
border-color: var(--err-500) !important;
box-shadow: 0 0 0 3px rgba(246, 78, 96, .14) !important;
}
.hpt-err {
display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; font-weight: 600;
color: var(--err-700); background: var(--err-50); border: 1px solid var(--err-100);
border-radius: 7px; padding: 9px 11px; line-height: 1.5;
}
.hpt-err--banner { font-weight: 700; }
.hpt-dlgq { font-size: 14px; color: var(--text-primary); }
.hpt-promoq { margin-bottom: 2px; }
.hpt-amountrow { display: flex; align-items: center; gap: 8px; }
.hpt-curtag {
font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-secondary);
background: var(--n-75); border: 1px solid var(--border-default); border-radius: 6px; padding: 4px 8px;
}
/* real-money warning inside the editor */
.hpt-danger-note {
display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start;
padding: 11px 13px; border-radius: 8px; line-height: 1.6; font-size: 12px;
color: var(--err-700); background: var(--err-50); border: 1px solid var(--err-100);
border-left: 4px solid var(--err-500);
}
.hpt-danger-note b { font-weight: 700; }
.hpt-danger-note code { font-family: var(--font-mono); font-size: 10.5px; }
/* ---- execution-logs modal ---- */
.hpt-lf { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.hpt-lf__f { display: flex; flex-direction: column; gap: 5px; min-width: 140px; }
.hpt-lf__f--grow { flex: 1 1 200px; }
.hpt-lf__f label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); }
.hpt-lf__f .input, .hpt-lf__f .select { height: 34px; font-size: 12.5px; }
.hpt-lf__count {
margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--p-700);
background: var(--p-50); border-radius: 999px; padding: 5px 11px; font-variant-numeric: tabular-nums;
}
.hpt-modal .hrs-tenv { box-shadow: none; }
.hpt-json {
margin: 0; max-height: 108px; overflow: auto; white-space: pre;
font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5; color: var(--text-secondary);
background: var(--n-25); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 7px 9px;
}
.hpt-player { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.hpt-player__u { font-weight: 600; color: var(--p-700); border-bottom: 1px dotted var(--p-200); cursor: help; }
.hpt-player__id { font-size: 10.5px; }
.hpt-errtext { font-size: 11.5px; line-height: 1.5; color: var(--err-700); }
.hpt-errtext--card { margin-top: 8px; }
.hpt-cardmore { margin-top: 8px; }
.hpt-cardmore > summary { font-size: 11.5px; font-weight: 700; color: var(--p-700); cursor: pointer; }
.hpt-cardmore[open] > summary { margin-bottom: 6px; }
/* ---- honest-absence strip ---- */
.hpt-absence {
margin: 16px 0 0; padding: 12px 14px; border-radius: 10px;
background: var(--n-25); border: 1px solid var(--border-default);
}
.hpt-absence__h {
display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin-bottom: 8px;
}
.hpt-absence__l { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.hpt-absence__l li { font-size: 12px; line-height: 1.6; color: var(--text-tertiary); }
.hpt-absence__l b { color: var(--text-secondary); }
/* ===================================================================
GET /testTrigger — the destructive dev leftover.
Hazard stripe + error ramp + wide left rule, so it cannot be read as
"just another red brand panel" on a red-branded screen.
=================================================================== */
.hpt-danger {
margin: 16px 0 0; border-radius: 10px; overflow: hidden;
background: var(--err-50); border: 1px solid var(--err-100); border-left: 5px solid var(--err-500);
}
.hpt-danger__head {
display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px;
color: var(--err-700);
background: repeating-linear-gradient(135deg,
rgba(246, 78, 96, .10) 0 10px,
rgba(246, 78, 96, .02) 10px 20px);
border-bottom: 1px solid var(--err-100);
}
.hpt-danger__title { font-size: 13.5px; font-weight: 700; }
.hpt-danger__title .hpt-mono { font-size: 12.5px; }
.hpt-danger__sub { margin-top: 2px; font-size: 11px; color: var(--err-700); opacity: .8; }
.hpt-danger__body { padding: 12px 16px 4px; }
.hpt-danger__body p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.65; color: var(--text-secondary); }
.hpt-danger__body b { color: var(--text-primary); font-weight: 700; }
.hpt-danger__who { color: var(--err-700) !important; font-weight: 600; }
.hpt-danger__foot {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 12px 16px; border-top: 1px solid var(--err-100); background: rgba(255, 255, 255, .55);
}
.hpt-danger__hintline { font-size: 11.5px; color: var(--text-tertiary); }
.hpt-runbtn {
background: var(--err-700); border-color: var(--err-700); color: #fff; font-weight: 700;
box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
.hpt-runbtn:hover { background: #b41f2e; border-color: #b41f2e; }
.hpt-runbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(246, 78, 96, .32); }
/* "what this call actually does" list inside the confirm dialog */
.hpt-what { border: 1px solid var(--border-default); border-radius: 8px; padding: 11px 13px; background: var(--n-25); }
.hpt-what__h {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--text-secondary); margin-bottom: 7px;
}
.hpt-what ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.hpt-what li { font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
.hpt-what b { font-weight: 700; color: var(--text-primary); }
/* ---- responsive (brief §11) ---- */
@media (max-width: 860px) {
/* modals go full-screen instead of a fixed-width centred dialog */
.hpt-scrim { padding: 0; }
.hpt-modal, .hpt-modal--wide {
width: 100vw; height: 100dvh; max-height: none; border-radius: 0;
display: flex; flex-direction: column;
}
.hpt-modal__body { max-height: none; flex: 1; }
.hpt-modal__foot { position: sticky; bottom: 0; }
.hpt-modal__foot .btn { flex: 1; justify-content: center; }
.hpt-grid2 { grid-template-columns: 1fr; }
.hpt-lf { gap: 8px; }
.hpt-lf__f { min-width: 0; flex: 1 1 140px; }
.hpt-lf__count { margin-left: 0; flex-basis: 100%; text-align: center; }
.hpt-chips { gap: 6px; }
.hpt-chips__note { flex-basis: 100%; }
.hpt-card__acts .btn { flex: 1 1 auto; justify-content: center; }
.hpt-danger__foot { flex-direction: column; align-items: stretch; }
.hpt-runbtn { justify-content: center; }
.hpt-danger__hintline { text-align: center; }
/* the JSON payload is a desktop luxury — inside a mobile card it gets its own scroll box */
.hpt-json { max-height: 160px; }
}
@media (max-width: 520px) {
.hpt-modal__head { padding: 12px 14px; }
.hpt-modal__body { padding: 14px; }
.hpt-modal__foot { padding: 10px 14px; }
.hpt-modal__title { font-size: 15px; }
.hpt-danger__head, .hpt-danger__body, .hpt-danger__foot { padding-left: 12px; padding-right: 12px; }
.hpt-absence { padding: 10px 12px; }
}
/* ---- list cells ---- */
.hpt-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hpt-dim { color: var(--text-tertiary); font-size: 12px; white-space: nowrap; }
.hpt-skin { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.hpt-skin__av {
display: inline-grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0;
border-radius: 6px; background: var(--p-50); color: var(--p-700);
font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
}
.hpt-skin__n { font-size: 12.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hpt-namelink {
display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
width: 100%; min-width: 0; padding: 3px 6px 3px 0; border: 0; background: none;
font-family: inherit; font-size: 13px; font-weight: 600; color: var(--p-700);
text-align: left; cursor: pointer; border-radius: 6px;
}
.hpt-namelink > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hpt-namelink:hover { color: var(--p-500); background: var(--p-50); padding-left: 6px; }
.hpt-namelink:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hpt-hiddenchip {
flex-shrink: 0; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--n-700); background: var(--n-75); border: 1px solid var(--border-default);
border-radius: 999px; padding: 1px 6px;
}
.hpt-typechip { gap: 4px; }
.hpt-togglecell { display: inline-flex; }
.hpt-logsbtn {
display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
border: 1px solid var(--border-default); background: var(--n-0); color: var(--text-secondary);
font-family: inherit; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
}
.hpt-logsbtn:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hpt-logsbtn--empty { color: var(--text-tertiary); font-weight: 600; }
.hpt-logsbtn--bad { border-color: var(--err-100); background: var(--err-50); color: var(--err-700); }
.hpt-logsbtn--bad:hover { border-color: var(--err-300); background: var(--err-50); color: var(--err-700); }
.hpt-logsbtn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hpt-acts { display: inline-flex; gap: 6px; justify-content: center; }
.hpt-act {
display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px;
border: 1px solid var(--border-default); background: var(--n-0); color: var(--text-tertiary);
cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.hpt-act:hover { background: var(--n-50); color: var(--text-primary); }
.hpt-act--edit:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hpt-act--danger:hover { background: var(--err-50); border-color: var(--err-100); color: var(--err-700); }
.hpt-act:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* mobile stacked-card actions (brief §11) */
.hpt-card__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hpt-card__del { color: var(--err-700); }
/* ---- Valid / Expired chip row (the real index's filter shortcuts) ---- */
.hpt-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.hpt-chip {
display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px;
border: 1px solid var(--border-default); background: var(--n-0); color: var(--text-secondary);
font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
transition: border-color .12s, background .12s, color .12s;
}
.hpt-chip b { font-variant-numeric: tabular-nums; font-weight: 700; }
.hpt-chip__dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.hpt-chip--valid { color: var(--ok-700); }
.hpt-chip--expired { color: var(--text-tertiary); }
.hpt-chip:hover { border-color: var(--n-150, var(--border-default)); background: var(--n-25); }
.hpt-chip.hpt-on { border-color: var(--p-200); background: var(--p-50); color: var(--p-700); box-shadow: inset 0 0 0 1px var(--p-100); }
.hpt-chip:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hpt-chips__note { font-size: 11px; color: var(--text-tertiary); }
/* ---- shared modal chrome (.bp-modal scrim) ---- */
.hpt-modal { width: min(620px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.hpt-modal--wide { width: min(980px, calc(100vw - 32px)); }
.hpt-modal--danger { border-top: 4px solid var(--err-500); }
.hpt-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 14px 18px; border-bottom: 1px solid var(--border-default);
}
.hpt-modal__titles { min-width: 0; }
.hpt-modal__title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.hpt-modal--danger .hpt-modal__title { color: var(--err-700); }
.hpt-modal__sub { margin-top: 3px; font-size: 11.5px; color: var(--text-tertiary); }
.hpt-modal__body {
padding: 16px 18px; display: flex; flex-direction: column; gap: 14px;
max-height: calc(100vh - 220px); overflow-y: auto;
}
.hpt-modal__foot {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 18px; border-top: 1px solid var(--border-default); background: var(--n-25);
}
.hpt-x {
display: inline-grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
border: 0; border-radius: 7px; background: none; color: var(--text-tertiary); cursor: pointer;
}
.hpt-x:hover { background: var(--n-50); color: var(--text-primary); }
/* destructive buttons inside these modals leave the brand ramp — see the header note */
.hpt-modal .btn--danger { background: var(--err-500); border-color: var(--err-500); }
.hpt-modal .btn--danger:hover { background: var(--err-700); border-color: var(--err-700); }
.hpt-modal .btn--danger:disabled { background: var(--n-150, #d9dde5); border-color: var(--n-150, #d9dde5); color: var(--n-0); cursor: not-allowed; }
.hpt-modal--danger .btn--danger:not(:disabled) {
background: var(--err-700); border-color: var(--err-700);
box-shadow: 0 0 0 3px rgba(246, 78, 96, .18);
}
/* ---- form ---- */
.hpt-sectitle {
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
color: var(--p-700); padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle);
}
.hpt-sectitle--danger { color: var(--err-700); border-bottom-color: var(--err-100); }
.hpt-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.hpt-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.hpt-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.hpt-req { color: var(--err-500); }
.hpt-hint { font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary); }
.hpt-hint b { color: var(--text-secondary); }
.hpt-hint code, .hpt-what code, .hpt-danger__body code, .hpt-absence__l code {
font-family: var(--font-mono); font-size: 10.5px; color: var(--text-secondary);
}
.hpt-hint--tight { margin-top: -4px; }
.hpt-hint--warn {
display: flex; align-items: flex-start; gap: 7px; padding: 9px 11px; border-radius: 7px;
background: var(--warn-50); border: 1px solid var(--warn-100); color: var(--warn-700); font-weight: 600;
}
.hpt-fielderr { font-size: 11.5px; font-weight: 600; color: var(--err-700); }
.hpt-invalid, .hpt-invalid:focus {
border-color: var(--err-500) !important;
box-shadow: 0 0 0 3px rgba(246, 78, 96, .14) !important;
}
.hpt-err {
display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; font-weight: 600;
color: var(--err-700); background: var(--err-50); border: 1px solid var(--err-100);
border-radius: 7px; padding: 9px 11px; line-height: 1.5;
}
.hpt-err--banner { font-weight: 700; }
.hpt-dlgq { font-size: 14px; color: var(--text-primary); }
.hpt-promoq { margin-bottom: 2px; }
.hpt-amountrow { display: flex; align-items: center; gap: 8px; }
.hpt-curtag {
font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-secondary);
background: var(--n-75); border: 1px solid var(--border-default); border-radius: 6px; padding: 4px 8px;
}
/* real-money warning inside the editor */
.hpt-danger-note {
display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start;
padding: 11px 13px; border-radius: 8px; line-height: 1.6; font-size: 12px;
color: var(--err-700); background: var(--err-50); border: 1px solid var(--err-100);
border-left: 4px solid var(--err-500);
}
.hpt-danger-note b { font-weight: 700; }
.hpt-danger-note code { font-family: var(--font-mono); font-size: 10.5px; }
/* ---- execution-logs modal ---- */
.hpt-lf { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.hpt-lf__f { display: flex; flex-direction: column; gap: 5px; min-width: 140px; }
.hpt-lf__f--grow { flex: 1 1 200px; }
.hpt-lf__f label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); }
.hpt-lf__f .input, .hpt-lf__f .select { height: 34px; font-size: 12.5px; }
.hpt-lf__count {
margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--p-700);
background: var(--p-50); border-radius: 999px; padding: 5px 11px; font-variant-numeric: tabular-nums;
}
.hpt-modal .hrs-tenv { box-shadow: none; }
.hpt-json {
margin: 0; max-height: 108px; overflow: auto; white-space: pre;
font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5; color: var(--text-secondary);
background: var(--n-25); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 7px 9px;
}
.hpt-player { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.hpt-player__u { font-weight: 600; color: var(--p-700); border-bottom: 1px dotted var(--p-200); cursor: help; }
.hpt-player__id { font-size: 10.5px; }
.hpt-errtext { font-size: 11.5px; line-height: 1.5; color: var(--err-700); }
.hpt-errtext--card { margin-top: 8px; }
.hpt-cardmore { margin-top: 8px; }
.hpt-cardmore > summary { font-size: 11.5px; font-weight: 700; color: var(--p-700); cursor: pointer; }
.hpt-cardmore[open] > summary { margin-bottom: 6px; }
/* ---- honest-absence strip ---- */
.hpt-absence {
margin: 16px 0 0; padding: 12px 14px; border-radius: 10px;
background: var(--n-25); border: 1px solid var(--border-default);
}
.hpt-absence__h {
display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin-bottom: 8px;
}
.hpt-absence__l { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.hpt-absence__l li { font-size: 12px; line-height: 1.6; color: var(--text-tertiary); }
.hpt-absence__l b { color: var(--text-secondary); }
/* ===================================================================
GET /testTrigger — the destructive dev leftover.
Hazard stripe + error ramp + wide left rule, so it cannot be read as
"just another red brand panel" on a red-branded screen.
=================================================================== */
.hpt-danger {
margin: 16px 0 0; border-radius: 10px; overflow: hidden;
background: var(--err-50); border: 1px solid var(--err-100); border-left: 5px solid var(--err-500);
}
.hpt-danger__head {
display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px;
color: var(--err-700);
background: repeating-linear-gradient(135deg,
rgba(246, 78, 96, .10) 0 10px,
rgba(246, 78, 96, .02) 10px 20px);
border-bottom: 1px solid var(--err-100);
}
.hpt-danger__title { font-size: 13.5px; font-weight: 700; }
.hpt-danger__title .hpt-mono { font-size: 12.5px; }
.hpt-danger__sub { margin-top: 2px; font-size: 11px; color: var(--err-700); opacity: .8; }
.hpt-danger__body { padding: 12px 16px 4px; }
.hpt-danger__body p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.65; color: var(--text-secondary); }
.hpt-danger__body b { color: var(--text-primary); font-weight: 700; }
.hpt-danger__who { color: var(--err-700) !important; font-weight: 600; }
.hpt-danger__foot {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 12px 16px; border-top: 1px solid var(--err-100); background: rgba(255, 255, 255, .55);
}
.hpt-danger__hintline { font-size: 11.5px; color: var(--text-tertiary); }
.hpt-runbtn {
background: var(--err-700); border-color: var(--err-700); color: #fff; font-weight: 700;
box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
.hpt-runbtn:hover { background: #b41f2e; border-color: #b41f2e; }
.hpt-runbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(246, 78, 96, .32); }
/* "what this call actually does" list inside the confirm dialog */
.hpt-what { border: 1px solid var(--border-default); border-radius: 8px; padding: 11px 13px; background: var(--n-25); }
.hpt-what__h {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--text-secondary); margin-bottom: 7px;
}
.hpt-what ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.hpt-what li { font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
.hpt-what b { font-weight: 700; color: var(--text-primary); }
/* ---- responsive (brief §11) ---- */
@media (max-width: 860px) {
/* modals go full-screen instead of a fixed-width centred dialog */
.hpt-scrim { padding: 0; }
.hpt-modal, .hpt-modal--wide {
width: 100vw; height: 100dvh; max-height: none; border-radius: 0;
display: flex; flex-direction: column;
}
.hpt-modal__body { max-height: none; flex: 1; }
.hpt-modal__foot { position: sticky; bottom: 0; }
.hpt-modal__foot .btn { flex: 1; justify-content: center; }
.hpt-grid2 { grid-template-columns: 1fr; }
.hpt-lf { gap: 8px; }
.hpt-lf__f { min-width: 0; flex: 1 1 140px; }
.hpt-lf__count { margin-left: 0; flex-basis: 100%; text-align: center; }
.hpt-chips { gap: 6px; }
.hpt-chips__note { flex-basis: 100%; }
.hpt-card__acts .btn { flex: 1 1 auto; justify-content: center; }
.hpt-danger__foot { flex-direction: column; align-items: stretch; }
.hpt-runbtn { justify-content: center; }
.hpt-danger__hintline { text-align: center; }
/* the JSON payload is a desktop luxury — inside a mobile card it gets its own scroll box */
.hpt-json { max-height: 160px; }
}
@media (max-width: 520px) {
.hpt-modal__head { padding: 12px 14px; }
.hpt-modal__body { padding: 14px; }
.hpt-modal__foot { padding: 10px 14px; }
.hpt-modal__title { font-size: 15px; }
.hpt-danger__head, .hpt-danger__body, .hpt-danger__foot { padding-left: 12px; padding-right: 12px; }
.hpt-absence { padding: 10px 12px; }
}
/* ---- HostCmsGameTaxonomy ---- */
/* ===================================================================
CMS ▾ → Game categories / Game subcategories / Game Labels
(src/pages/HostCmsGameTaxonomy.jsx → GameCategories, GameSubcategories,
GameLabels — three screens, one modal-CRUD pattern, one CSS block.)
Page chrome comes from the hrs-* report shell (hero filter strip,
table→cards collapse, pager). Everything below is only what that does
not cover: the taxonomy cells, the sectioned modal, the loumultiselect
stand-in and — the reason this screen exists — the two honesty
surfaces: the "empty skin selection = ALL skins" banner/chip and the
orphan panel in the delete dialog.
Prefix: hgt- · Iwakiri red = var(--p-*) · no raw brand hexes.
Responsive per brief §11 at 1100 / 860 / 520px.
=================================================================== */
/* ---------- table cells ---------- */
.hgt-id {
font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hgt-num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-secondary); }
.hgt-muted { color: var(--text-tertiary); font-weight: 500; }
.hgt-namecell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hgt-namelink {
display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; min-width: 0; padding: 3px 6px 3px 0; border: 0; background: none;
font-family: inherit; font-size: 13px; font-weight: 600; color: var(--p-700);
text-align: left; cursor: pointer; border-radius: 6px;
}
.hgt-namelink span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hgt-namelink:hover { color: var(--p-500); background: var(--p-50); padding-left: 6px; }
.hgt-namelink:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hgt-pub { font-size: 12.5px; color: var(--text-secondary); }
.hgt-slug {
font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
background: var(--n-25); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 1px 6px;
}
/* subcategory image cell — asset_static() thumbnail, placeholder icon when empty */
.hgt-thumb {
display: inline-grid; place-items: center; width: 34px; height: 26px; border-radius: 5px;
background: var(--p-50); color: var(--p-600); border: 1px solid var(--p-100);
}
.hgt-thumb--ph {
background: repeating-linear-gradient(45deg, var(--n-50) 0 5px, var(--n-0) 5px 10px);
color: var(--text-tertiary); border-color: var(--border-subtle);
}
/* category chip + its dangling-FK variant (a category deleted without cascade) */
.hgt-catchip {
display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
background: var(--n-25); border: 1px solid var(--border-default); border-radius: 999px; padding: 2px 9px;
}
.hgt-catchip--dead {
color: var(--err-700); background: var(--err-50); border-color: var(--err-100);
font-family: var(--font-mono); font-size: 10.5px;
}
/* skins cell: count chip + names, or the ALL-skins warning chip */
.hgt-skincell { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.hgt-skinchip {
flex: none; min-width: 22px; text-align: center;
font-size: 10.5px; font-weight: 700; color: var(--p-700);
background: var(--p-50); border: 1px solid var(--p-100); border-radius: 999px; padding: 1px 7px;
}
.hgt-skinnames {
font-size: 11.5px; color: var(--text-tertiary); line-height: 1.35;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* The real column renders a flat `All` chip here. Tinted as a warning on purpose: zero rows in
skins_subcategories / skins_labels means "on every brand", not "hidden". */
.hgt-allchip {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 700; letter-spacing: .02em;
color: var(--warn-700); background: var(--warn-50);
border: 1px solid var(--warn-100); border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.hgt-allchip > svg { flex: none; }
.hgt-yes {
display: inline-flex; align-items: center; font-size: 11px; font-weight: 700;
color: var(--ok-700); background: var(--ok-50); border: 1px solid var(--ok-100);
border-radius: 999px; padding: 1px 9px;
}
.hgt-no {
display: inline-flex; align-items: center; font-size: 11px; font-weight: 600;
color: var(--text-tertiary); background: var(--n-25);
border: 1px solid var(--border-subtle); border-radius: 999px; padding: 1px 9px;
}
/* label "public name" reads as the badge players actually see on a game tile */
.hgt-badge {
display: inline-flex; align-items: center; font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em;
color: #fff; background: var(--p-600); border-radius: 4px; padding: 2px 8px;
}
/* TT tags under the internal name (index view splits the stored "a;b" string on ";") */
.hgt-tagline { display: flex; flex-wrap: wrap; gap: 4px; }
.hgt-tag {
display: inline-flex; align-items: center; gap: 5px;
font-size: 10.5px; font-weight: 600; color: var(--text-secondary);
background: var(--n-25); border: 1px solid var(--border-default); border-radius: 4px; padding: 1px 6px;
}
.hgt-tag--ro { color: var(--text-tertiary); }
.hgt-tag button {
display: inline-grid; place-items: center; border: 0; background: none; padding: 0;
color: var(--text-tertiary); cursor: pointer; line-height: 0;
}
.hgt-tag button:hover { color: var(--err-700); }
/* row actions */
.hgt-acts { display: inline-flex; gap: 6px; justify-content: center; }
.hgt-act {
display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px;
border: 1px solid var(--border-default); background: var(--n-0); color: var(--text-tertiary);
cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.hgt-act:hover { background: var(--n-50); color: var(--text-primary); }
.hgt-act--edit:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hgt-act--danger:hover { background: var(--err-50); border-color: var(--err-100); color: var(--err-700); }
.hgt-act:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* mobile stacked cards (brief §11) */
.hgt-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; }
.hgt-card__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hgt-card__del { color: var(--err-700); }
.hgt-details > summary {
cursor: pointer; font-size: 12px; font-weight: 600; color: var(--p-700);
list-style: none; padding: 2px 0;
}
.hgt-details > summary::-webkit-details-marker { display: none; }
.hgt-details > summary::before { content: "▸ "; }
.hgt-details[open] > summary::before { content: "▾ "; }
.hgt-details .hrs-card__grid { padding-top: 6px; }
/* ---------- modal (shared .bp-modal chrome, sectioned like Settings.jsx) ---------- */
.hgt-modal { width: min(600px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.hgt-modal--wide { width: min(940px, calc(100vw - 32px)); }
.hgt-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 14px 18px; border-bottom: 1px solid var(--border-default);
}
.hgt-modal__title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.hgt-modal__sub { margin-top: 3px; font-size: 11.5px; color: var(--text-tertiary); line-height: 1.5; }
.hgt-modal__sub code { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-secondary); }
.hgt-modal__body {
padding: 16px 18px; display: flex; flex-direction: column; gap: 16px;
max-height: calc(100vh - 220px); overflow-y: auto;
}
.hgt-modal__foot {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 18px; border-top: 1px solid var(--border-default); background: var(--n-25);
}
.hgt-x {
display: inline-grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
border: 0; border-radius: 7px; background: none; color: var(--text-tertiary); cursor: pointer;
}
.hgt-x:hover { background: var(--n-50); color: var(--text-primary); }
/* ---------- sectioned panels ---------- */
.hgt-sec { border: 1px solid var(--border-default); border-radius: 10px; overflow: hidden; background: var(--n-0); }
.hgt-sec__head { padding: 10px 14px; background: var(--n-25); border-bottom: 1px solid var(--border-subtle); }
.hgt-sec__title {
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--p-700);
}
.hgt-sec__sub { margin-top: 3px; font-size: 11.5px; color: var(--text-tertiary); line-height: 1.5; }
.hgt-sec__body { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.hgt-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hgt-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.hgt-label {
display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
font-size: 12px; font-weight: 700; color: var(--text-secondary);
}
.hgt-req { color: var(--err-500); }
.hgt-inf {
font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--text-tertiary); background: var(--n-50);
border: 1px dashed var(--border-default); border-radius: 999px; padding: 0 6px; cursor: help;
}
.hgt-hint { font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary); }
.hgt-hint b { color: var(--text-secondary); }
.hgt-hint code, .hgt-note code, .hgt-effect code, .hgt-allwarn code, .hgt-scoped code, .hgt-dlgq code {
font-family: var(--font-mono); font-size: 10.5px; color: var(--text-secondary);
}
.hgt-fielderr {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11.5px; font-weight: 600; color: var(--err-700);
}
.hgt-invalid, .hgt-invalid:focus {
border-color: var(--err-500) !important;
box-shadow: 0 0 0 3px rgba(208, 60, 60, .14) !important;
}
.hgt-err {
display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; font-weight: 600;
color: var(--err-700); background: var(--err-50); border: 1px solid var(--err-100);
border-radius: 7px; padding: 9px 11px; line-height: 1.5;
}
.hgt-err--banner { font-weight: 700; }
.hgt-note {
display: flex; align-items: flex-start; gap: 8px;
font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary);
background: var(--n-25); border: 1px dashed var(--border-default); border-radius: 8px; padding: 10px 12px;
}
.hgt-note > svg { flex: none; margin-top: 2px; color: var(--text-tertiary); }
/* read-only derived value (the server-generated slug) */
.hgt-ro {
font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary);
background: var(--n-25); border: 1px dashed var(--border-default); border-radius: 6px;
padding: 8px 10px; min-height: 36px; display: flex; align-items: center;
}
.hgt-togglerow { display: flex; align-items: flex-start; gap: 12px; }
.hgt-togglerow > div { min-width: 0; }
/* ---------- image field ---------- */
.hgt-imgrow { display: flex; gap: 14px; align-items: flex-start; }
.hgt-imgbox {
flex: none; width: 84px; height: 64px; border-radius: 8px;
display: grid; place-items: center;
border: 1px dashed var(--border-default); background: var(--n-25); color: var(--text-tertiary);
}
.hgt-imgbox--set { border-style: solid; border-color: var(--p-100); background: var(--p-50); color: var(--p-600); }
.hgt-imgbox__ph {
width: 26px; height: 26px; border-radius: 5px;
background: repeating-linear-gradient(45deg, var(--n-50) 0 5px, var(--n-0) 5px 10px);
border: 1px solid var(--border-subtle);
}
.hgt-imgmeta { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* ---------- tagify stand-in ---------- */
.hgt-tagify { display: flex; flex-direction: column; gap: 5px; }
.hgt-tagify__chips {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 38px;
border: 1px solid var(--border-default); border-radius: 7px; background: var(--n-0); padding: 6px 8px;
}
.hgt-tagify__chips:focus-within { border-color: var(--p-300, var(--p-500)); box-shadow: var(--ring-focus); }
.hgt-tagify__in {
flex: 1; min-width: 120px; border: 0; outline: none; background: none;
font-family: inherit; font-size: 12.5px; color: var(--text-primary);
}
.hgt-tagify__stored { font-size: 11px; color: var(--text-tertiary); }
/* ---------- skin picker (loumultiselect stand-in) ---------- */
.hgt-picker { display: flex; flex-direction: column; gap: 10px; }
/* THE footgun banner: an empty selection publishes to every brand. */
.hgt-allwarn {
display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start;
border: 1px solid var(--warn-300); border-left: 4px solid var(--warn-500);
background: var(--warn-50); border-radius: 9px; padding: 11px 13px;
}
.hgt-allwarn > svg { color: var(--warn-700); margin-top: 1px; }
.hgt-allwarn__t { font-size: 13px; font-weight: 800; color: var(--warn-700); letter-spacing: .01em; }
.hgt-allwarn__b { margin-top: 4px; font-size: 12px; line-height: 1.6; color: #6b4a06; }
.hgt-allwarn__b b { font-weight: 700; }
.hgt-allwarn__list {
margin-top: 7px; font-size: 10.5px; line-height: 1.6; color: var(--warn-700);
background: rgba(255, 255, 255, .55); border-radius: 6px; padding: 6px 8px; word-break: break-word;
}
.hgt-scoped {
display: flex; align-items: flex-start; gap: 7px; flex-wrap: wrap;
font-size: 12px; line-height: 1.6; color: var(--text-secondary);
background: var(--ok-50); border: 1px solid var(--ok-100); border-radius: 9px; padding: 9px 12px;
}
.hgt-scoped > svg { color: var(--ok-700); flex: none; margin-top: 2px; }
.hgt-scoped b { color: var(--text-primary); }
.hgt-dual {
display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch;
border: 1px solid var(--border-default); border-radius: 10px; padding: 12px; background: var(--n-25);
}
.hgt-pane { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hgt-pane__head {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--text-tertiary);
}
.hgt-count {
min-width: 22px; text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: 0;
color: var(--p-700); background: var(--p-50); border-radius: 999px; padding: 1px 7px;
}
.hgt-count--warn { color: var(--warn-700); background: var(--warn-50); border: 1px solid var(--warn-100); }
.hgt-pane__search { width: 100%; height: 34px; font-size: 12.5px; }
.hgt-pane__list {
display: flex; flex-direction: column; gap: 3px; height: 210px; overflow-y: auto;
border: 1px solid var(--border-default); border-radius: 8px; background: var(--n-0); padding: 5px;
}
.hgt-pane__empty { padding: 14px 8px; text-align: center; font-size: 12px; color: var(--text-tertiary); line-height: 1.5; }
.hgt-pane__empty--warn { color: var(--warn-700); font-weight: 600; }
.hgt-opt {
display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
padding: 7px 9px; border: 1px solid transparent; border-radius: 6px; background: none;
font-family: inherit; font-size: 12.5px; color: var(--text-secondary); text-align: left; cursor: pointer;
}
.hgt-opt:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hgt-opt__n { display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hgt-opt--sel { background: var(--n-25); border-color: var(--border-subtle); color: var(--text-primary); font-weight: 500; }
.hgt-opt--sel:hover { background: var(--err-50); border-color: var(--err-100); color: var(--err-700); }
.hgt-opt:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hgt-swap { display: grid; place-items: center; color: var(--text-tertiary); padding-top: 26px; }
/* ---------- delete dialog: what goes, what is left orphaned ---------- */
.hgt-dlgq { font-size: 14.5px; color: var(--text-primary); }
.hgt-dlgq b { font-weight: 700; }
.hgt-effect { border: 1px solid var(--border-default); border-radius: 9px; padding: 10px 12px; background: var(--n-25); }
.hgt-effect__h {
display: flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--text-tertiary);
}
.hgt-effect ul { margin: 7px 0 0; padding-left: 18px; }
.hgt-effect li { font-size: 12px; line-height: 1.65; color: var(--text-secondary); margin-bottom: 5px; }
.hgt-effect li:last-child { margin-bottom: 0; }
.hgt-effect--orph {
background: var(--warn-50); border-color: var(--warn-100); border-left: 4px solid var(--warn-500);
}
.hgt-effect--orph .hgt-effect__h { color: var(--warn-700); }
.hgt-effect--orph li { color: #6b4a06; }
.hgt-effect--orph .hgt-hint { margin-top: 8px; color: var(--warn-700); }
.hgt-orphlist { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.hgt-orphitem {
font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--warn-700);
background: rgba(255, 255, 255, .6); border: 1px solid var(--warn-100); border-radius: 4px; padding: 1px 6px;
}
/* ===================================================================
Responsive — brief §11
=================================================================== */
@media (max-width: 1100px) {
.hgt-skinnames { -webkit-line-clamp: 1; }
}
@media (max-width: 860px) {
/* forms/modals go full-screen instead of a fixed-width centred dialog */
.hgt-scrim { padding: 0; }
.hgt-modal, .hgt-modal--wide {
width: 100vw; height: 100dvh; max-height: none; border-radius: 0;
display: flex; flex-direction: column;
}
.hgt-modal__body { max-height: none; flex: 1; }
.hgt-modal__foot { position: sticky; bottom: 0; }
.hgt-modal__foot .btn { flex: 1; justify-content: center; }
/* two-column form rows stack */
.hgt-2col { grid-template-columns: 1fr; gap: 12px; }
/* dual list stacks; the swap arrow becomes a horizontal divider */
.hgt-dual { grid-template-columns: 1fr; gap: 10px; }
.hgt-swap { padding: 0; transform: rotate(90deg); }
.hgt-pane__list { height: 170px; }
/* card actions fill the row */
.hgt-card__acts .btn { flex: 1; justify-content: center; }
.hgt-skinnames { -webkit-line-clamp: 2; }
}
@media (max-width: 520px) {
.hgt-modal__head { padding: 12px 14px; }
.hgt-modal__body { padding: 14px; gap: 12px; }
.hgt-modal__foot { padding: 10px 14px; }
.hgt-modal__title { font-size: 15px; }
.hgt-sec__body { padding: 12px; }
.hgt-allwarn { grid-template-columns: 1fr; gap: 6px; }
.hgt-allwarn > svg { display: none; }
.hgt-imgrow { flex-direction: column; }
.hgt-togglerow { gap: 10px; }
}
/* ---- HostSkinsUnified ---- */
/* ===================================================================
CMS ▾ → Skins — the consolidated skin editor (src/pages/HostSkinsUnified.jsx)
§8.2 reconciliation. Shell shape ported from Skins.jsx's pill-tab editor,
re-expressed on the Iwakiri red ramp. Every class is hsk-prefixed; the list
view rides the Hrs kit and needs no chrome of its own.
Part 2 (HostSkinsUnifiedTabs.jsx) reuses .hsk-sec / .hsk-field / .hsk-note /
.hsk-savebar / .hsk-tabhead — those are the shared tab-body kit.
=================================================================== */
/* ---- editor page + header ---------------------------------------- */
.hsk-page .hsk-head { align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.hsk-ident { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hsk-back {
width: 38px; height: 38px; flex-shrink: 0; border-radius: 9px; cursor: pointer;
background: var(--p-50); border: 1px solid var(--p-100); color: var(--p-700);
display: grid; place-items: center; transition: background .12s, border-color .12s;
}
.hsk-back:hover { background: var(--p-100); border-color: var(--p-300); }
.hsk-back:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hsk-mark {
width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px;
background: linear-gradient(135deg, var(--p-500), var(--p-700));
color: #fff; font-weight: 800; font-size: 13.5px; letter-spacing: .02em;
display: grid; place-items: center;
box-shadow: 0 2px 6px -1px rgba(15,20,32,.18), inset 0 1px 0 rgba(255,255,255,.18);
}
.hsk-idtext { min-width: 0; }
.hsk-idtext .page__subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hsk-idtext .page__subtitle code {
font-family: var(--font-mono); font-size: 11.5px; background: var(--n-75);
border: 1px solid var(--border-subtle); border-radius: 4px; padding: 0 4px; color: var(--n-700);
}
.hsk-picker { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.hsk-picker label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); }
.hsk-picker select { min-width: 210px; }
/* ---- tab strip: pills (desktop/tablet) + select (phone) ----------- */
.hsk-tabsel { display: none; align-items: center; gap: 8px; margin-bottom: 12px; }
.hsk-tabsel label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); }
.hsk-tabsel select { flex: 1; }
.hsk-tabsbar { padding: 6px; margin-bottom: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hsk-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.hsk-tab {
display: inline-flex; align-items: center; gap: 6px; position: relative;
padding: 8px 12px; border-radius: 7px; white-space: nowrap; cursor: pointer;
background: transparent; border: 1px solid transparent; color: var(--text-secondary);
font-family: inherit; font-size: 12.5px; font-weight: 500;
transition: background .12s, color .12s, border-color .12s;
}
.hsk-tab:hover { background: var(--n-50); color: var(--text-primary); }
.hsk-tab.is-on { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); font-weight: 700; }
.hsk-tab:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hsk-tab.is-pending { color: var(--text-tertiary); }
.hsk-tab.is-pending:hover { color: var(--text-secondary); }
.hsk-dot { width: 5px; height: 5px; border-radius: 999px; background: var(--warn-500, #f59e0b); flex-shrink: 0; }
/* ---- tab body ---------------------------------------------------- */
.hsk-body { padding: 18px 22px 22px; }
.hsk-tabhead { padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--border-subtle); }
.hsk-tabhead__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hsk-tabhead__title { font-size: 16px; font-weight: 700; color: var(--n-800); }
.hsk-tabhead__sub { font-size: 12.5px; color: var(--text-tertiary); margin-top: 3px; max-width: 78ch; line-height: 1.5; }
.hsk-chip { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; }
.hsk-chip--scoped { background: var(--warn-50, #fef3c7); color: var(--warn-700, #92400e); border: 1px solid var(--warn-100, #fde68a); }
.hsk-trace { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 11px; color: var(--text-tertiary); }
.hsk-trace code {
font-family: var(--font-mono); font-size: 10.5px; background: var(--n-75);
border: 1px solid var(--border-subtle); border-radius: 4px; padding: 1px 5px; color: var(--n-700);
}
/* ---- shared kit: sections + fields -------------------------------- */
.hsk-sec { margin-bottom: 22px; }
.hsk-sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.hsk-sec__title { font-size: 14px; font-weight: 700; color: var(--n-800); }
.hsk-sec__sub { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; max-width: 82ch; line-height: 1.5; }
.hsk-sec__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.hsk-field {
display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 8px 18px;
align-items: start; padding: 11px 0; border-bottom: 1px solid var(--border-subtle);
}
.hsk-field--full { grid-template-columns: minmax(0, 1fr); }
.hsk-field__l { font-size: 13px; font-weight: 600; color: var(--text-primary); display: flex; flex-direction: column; gap: 3px; padding-top: 5px; }
.hsk-field__c { min-width: 0; }
.hsk-field__h { font-size: 11.5px; color: var(--text-tertiary); margin-top: 5px; line-height: 1.5; }
.hsk-field__err { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--err-600, #dc2626); margin-top: 5px; }
.hsk-field--err .hsk-input { border-color: var(--err-300, #fca5a5); }
.hsk-req { color: var(--err-600, #dc2626); margin-left: 3px; }
.hsk-name {
font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--n-600);
background: var(--n-50); border: 1px solid var(--border-subtle); border-radius: 4px;
padding: 1px 5px; align-self: flex-start; max-width: 100%; overflow-wrap: anywhere;
}
.hsk-input { width: 100%; max-width: 460px; }
.hsk-textarea { max-width: 620px; line-height: 1.5; resize: vertical; }
.hsk-mono { font-family: var(--font-mono); font-size: 12px; }
.hsk-p { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--text-primary); }
.hsk-empty {
padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: 8px;
font-size: 12.5px; color: var(--text-tertiary); background: var(--n-25);
}
/* ---- shared kit: notes ------------------------------------------- */
.hsk-note {
display: flex; align-items: flex-start; gap: 9px; margin: 12px 0;
padding: 10px 13px; border-radius: 8px; border: 1px solid transparent;
font-size: 12.5px; line-height: 1.55;
}
.hsk-note svg { flex-shrink: 0; margin-top: 2px; }
.hsk-note code {
font-family: var(--font-mono); font-size: 11px; background: rgba(255,255,255,.6);
border-radius: 4px; padding: 0 4px; margin: 0 2px;
}
.hsk-note--info { background: var(--n-50); border-color: var(--border-subtle); color: var(--text-secondary); }
.hsk-note--warn { background: var(--warn-50, #fef3c7); border-color: var(--warn-100, #fde68a); color: var(--warn-700, #92400e); }
.hsk-note--bug { background: var(--err-50, #fee2e2); border-color: var(--err-100, #fecaca); color: var(--err-700, #b91c1c); }
.hsk-note--ok { background: var(--ok-50, #d1fae5); border-color: var(--ok-100, #a7f3d0); color: var(--ok-700, #065f46); }
/* ---- shared kit: per-tab save row -------------------------------- */
.hsk-savebar {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-default);
}
.hsk-save { min-width: 0; }
.hsk-savebar__note { font-size: 11.5px; color: var(--text-tertiary); font-family: var(--font-mono); }
/* ---- pending tab + protected/pointer panels ---------------------- */
.hsk-pending, .hsk-pointer {
display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start;
padding: 18px 20px; border-radius: 10px;
}
.hsk-pending { border: 1px dashed var(--border-strong); background: var(--n-25); }
.hsk-pointer { border: 1px solid var(--p-100); background: color-mix(in oklab, var(--p-500) 4%, white); }
.hsk-pending__mark, .hsk-pointer__mark { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; }
.hsk-pending__mark { background: var(--n-100); color: var(--text-tertiary); }
.hsk-pointer__mark { background: var(--p-500); color: #fff; }
.hsk-pending__t, .hsk-pointer__t { font-size: 14px; font-weight: 700; color: var(--n-800); margin-bottom: 6px; }
.hsk-pending__d, .hsk-pointer__d { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 8px; max-width: 86ch; }
.hsk-pending__d code, .hsk-pointer__d code {
font-family: var(--font-mono); font-size: 11px; background: var(--n-75);
border: 1px solid var(--border-subtle); border-radius: 4px; padding: 0 4px; margin: 0 2px; color: var(--n-700);
}
/* ---- Settings tab: the registration row + the Setting/Value table -- */
.hsk-regrow {
display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
padding: 12px 14px; margin-bottom: 14px; border-radius: 9px;
border: 1px solid var(--border-default); background: var(--n-0); box-shadow: var(--shadow-xs);
}
.hsk-regrow__t { font-size: 13.5px; font-weight: 700; color: var(--n-800); }
.hsk-regrow__d { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; max-width: 80ch; line-height: 1.5; }
.hsk-settingswrap {
border: 1px solid var(--border-default); border-radius: 9px; overflow: auto;
max-height: 70vh; background: var(--n-0);
}
.hsk-kv { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.hsk-kv > thead th {
position: sticky; top: 0; z-index: 3; background: var(--n-800); color: #fff;
font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--n-900);
}
.hsk-kv > thead th:last-child { width: 42%; }
.hsk-kv__group th {
position: sticky; top: 34px; z-index: 2; text-align: left;
padding: 8px 14px; background: var(--p-50); color: var(--p-700);
font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
border-top: 1px solid var(--p-100); border-bottom: 1px solid var(--p-100);
}
.hsk-kv__group--sub th { background: var(--n-75); color: var(--n-700); border-color: var(--border-subtle); text-transform: none; letter-spacing: 0; font-size: 12px; }
.hsk-kv__group th code { background: rgba(255,255,255,.55); border-radius: 4px; padding: 0 4px; font-family: var(--font-mono); font-size: 10.5px; }
.hsk-kv tbody tr:hover > * { background: var(--n-25); }
.hsk-kv__k {
text-align: left; font-weight: 600; color: var(--text-primary); vertical-align: top;
padding: 10px 14px; border-bottom: 1px solid var(--border-subtle);
}
.hsk-kv__kin { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.hsk-kv__lbl { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.45; }
.hsk-kv__v { padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.hsk-kv__v .hsk-input { max-width: 100%; }
.hsk-kv__src { font-size: 10.5px; color: var(--text-tertiary); font-family: var(--font-mono); overflow-wrap: anywhere; }
.hsk-kv__bug {
font-size: 10.5px; font-weight: 700; color: var(--err-700, #b91c1c);
background: var(--err-50, #fee2e2); border: 1px solid var(--err-100, #fecaca);
border-radius: 999px; padding: 1px 7px;
}
.hsk-inferred {
font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
color: var(--warn-700, #92400e); background: var(--warn-50, #fef3c7);
border: 1px solid var(--warn-100, #fde68a); border-radius: 999px; padding: 1px 7px;
}
.hsk-tool { display: inline-block; margin-top: 5px; font-size: 11.5px; font-weight: 600; color: var(--p-600); text-decoration: none; }
.hsk-tool:hover { text-decoration: underline; }
/* ---- registration modal (and the list's small dialogs) ----------- */
.bp-modal-scrim.hsk-scrim { place-items: center; padding: 24px 18px; }
.hsk-modal {
padding: 0; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 56px);
display: flex; flex-direction: column; overflow: hidden;
}
.hsk-modal--wide { width: min(980px, calc(100vw - 32px)); }
.hsk-modal--sm { width: min(520px, calc(100vw - 32px)); }
.hsk-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
}
.hsk-modal__title { font-size: 17px; font-weight: 700; color: var(--n-800); }
.hsk-modal__sub { font-size: 11.5px; color: var(--text-tertiary); font-family: var(--font-mono); margin-top: 3px; overflow-wrap: anywhere; }
.hsk-modal__body { padding: 16px 20px; overflow: auto; }
.hsk-modal__foot {
display: flex; gap: 10px; justify-content: flex-end; align-items: center;
padding: 14px 20px; border-top: 1px solid var(--border-subtle); background: var(--n-25);
}
.hsk-x {
width: 28px; height: 28px; flex-shrink: 0; border: 0; border-radius: 6px;
background: transparent; color: var(--n-400); cursor: pointer; display: grid; place-items: center;
}
.hsk-x:hover { background: var(--n-75); color: var(--n-600); }
.hsk-modal__body code {
font-family: var(--font-mono); font-size: 11px; background: var(--n-75);
border: 1px solid var(--border-subtle); border-radius: 4px; padding: 0 4px; margin: 0 2px; color: var(--n-700);
}
.hsk-radios, .hsk-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.hsk-radio, .hsk-check { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-primary); cursor: pointer; }
.hsk-radio input, .hsk-check input { accent-color: var(--p-500); cursor: pointer; }
.hsk-countrybar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.hsk-search {
display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; flex: 1 1 220px;
border-radius: 7px; background: var(--n-25); border: 1px solid var(--border-default); color: var(--text-tertiary);
}
.hsk-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; font-family: inherit; font-size: 12.5px; color: var(--text-primary); }
.hsk-countbadge { font-size: 11.5px; font-weight: 700; color: var(--p-700); background: var(--p-50); border: 1px solid var(--p-100); border-radius: 999px; padding: 3px 10px; }
.hsk-countries {
display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px;
max-height: 260px; overflow: auto; padding: 4px; margin-bottom: 12px;
border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--n-25);
}
.hsk-country {
display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 6px; cursor: pointer;
font-size: 12.5px; background: var(--n-0); border: 1px solid var(--border-subtle); transition: border-color .12s, background .12s;
}
.hsk-country:hover { border-color: var(--border-strong); }
.hsk-country.is-on { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); font-weight: 600; }
.hsk-country input { accent-color: var(--p-500); cursor: pointer; }
.hsk-country span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsk-country code { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); }
.hsk-shoprow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.hsk-shoprow select { max-width: 240px; }
.hsk-minitable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.hsk-minitable th {
text-align: left; padding: 8px 10px; background: var(--n-75); color: var(--n-700);
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
border-bottom: 1px solid var(--border-subtle);
}
.hsk-minitable td { padding: 8px 10px; border-bottom: 1px solid var(--border-subtle); }
.hsk-minitable td code { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); }
.hsk-minitable__act { width: 48px; text-align: right; }
/* ---- list view (rides the Hrs kit) ------------------------------- */
.hsk-id { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.hsk-namelink {
display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
background: none; border: 0; padding: 2px 0; cursor: pointer; border-radius: 4px;
font-family: inherit; font-size: 13px; font-weight: 600; color: var(--p-700); transition: color .12s, background .12s, padding .12s;
}
.hsk-namelink span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsk-namelink:hover { color: var(--p-500); background: var(--p-50); padding-left: 6px; padding-right: 6px; }
.hsk-namelink:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hsk-acts { display: inline-flex; gap: 6px; justify-content: center; }
.hsk-act {
width: 30px; height: 30px; border-radius: 6px; cursor: pointer;
border: 1px solid var(--border-default); background: var(--n-0); color: #5a6172;
display: inline-grid; place-items: center; transition: background .12s, color .12s, border-color .12s;
}
.hsk-act:hover { background: var(--n-50); color: var(--text-primary); }
.hsk-act--edit:hover { background: var(--p-50); border-color: var(--p-100); color: var(--p-700); }
.hsk-act--danger:hover { background: var(--err-50, #fee2e2); border-color: var(--err-100, #fecaca); color: var(--err-700, #b91c1c); }
.hsk-card__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hsk-card__del { color: var(--err-600, #dc2626); }
.hsk-listnote {
display: flex; align-items: flex-start; gap: 8px; margin-top: 14px;
font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary);
}
.hsk-listnote svg { flex-shrink: 0; margin-top: 3px; }
.hsk-listnote code { font-family: var(--font-mono); font-size: 10.5px; background: var(--n-75); border-radius: 4px; padding: 0 4px; }
/* ===================================================================
Responsive (brief §11)
· multi-tab editor: pill row scrolls on tablet, becomes a