/* myRacket — Liquid Glass design system (web port of
"myRacket Liquid Glass Dashboard.html"). Pink accent, translucent blurred
glass cards over a soft pastel wallpaper, Inter / Inter Tight. */
:root {
--accent: #e6285f;
--accent-2: #ff5a8a;
--error: #a83232;
--field-border: rgba(20, 16, 26, 0.28); /* visible border for all text inputs */
--ink: #14101a;
--ink2: #14101a;
--muted: rgba(20, 16, 26, 0.80);
--muted2: rgba(20, 16, 26, 0.60);
--glass-bg: rgba(255, 255, 255, 0.86);
--glass-bg-strong: rgba(255, 255, 255, 0.94);
--glass-border: rgba(255, 255, 255, 0.92);
--glass-shadow: 0 8px 26px rgba(60, 24, 48, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);
--radius: 22px;
--wallpaper:
radial-gradient(70% 60% at 16% 28%, #ffd6e2 0%, transparent 62%),
radial-gradient(62% 68% at 88% 22%, #ffe7cf 0%, transparent 58%),
radial-gradient(78% 76% at 78% 92%, #ddd6ff 0%, transparent 62%),
linear-gradient(135deg, #f6eef2 0%, #ece4ef 100%);
}
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0; min-height: 100%;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--ink2);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background:
radial-gradient(1200px 800px at 20% 80%, rgba(255, 46, 108, 0.07), transparent 60%),
radial-gradient(900px 600px at 85% 15%, rgba(180, 140, 200, 0.10), transparent 55%),
var(--wallpaper);
background-attachment: fixed;
}
h1, h2, h3, .display { font-family: 'Inter Tight', 'Inter', sans-serif; }
a { color: inherit; text-decoration: none; }
/* ---- App shell ---------------------------------------------------------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
flex: 0 0 232px;
margin: 14px 8px 14px 14px;
border-radius: 28px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
-webkit-backdrop-filter: blur(40px) saturate(180%);
backdrop-filter: blur(40px) saturate(180%);
box-shadow: var(--glass-shadow);
padding: 18px 14px;
display: flex; flex-direction: column;
position: sticky; top: 14px; height: calc(100vh - 28px);
}
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 0 6px; }
.logo-tile {
width: 40px; height: 40px; border-radius: 12px;
background: linear-gradient(135deg, #ff2e6c 0%, #ff5a4d 50%, #ff8a3d 100%);
display: flex; align-items: center; justify-content: center;
color: #fff; box-shadow: 0 6px 20px rgba(255, 46, 108, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.brand .name { font-weight: 800; font-size: 18px; letter-spacing: -0.5px; line-height: 1; }
.brand .sub { font-size: 9px; letter-spacing: 1.5px; color: var(--muted2); font-weight: 700; }
.nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.nav-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px; border-radius: 12px;
color: var(--muted); font-size: 14px; font-weight: 500;
border-left: 3px solid transparent; transition: all 0.15s;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.55); color: var(--ink2); }
.nav-item.active {
background: rgba(255, 255, 255, 0.85); color: var(--ink2); font-weight: 700;
border-left-color: var(--accent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 14px rgba(80, 30, 60, 0.10);
}
.nav-item .ic {
width: 20px; height: 20px; flex: 0 0 20px;
display: inline-flex; align-items: center; justify-content: center;
opacity: 0.7;
}
.nav-item .ic svg { width: 19px; height: 19px; display: block; }
.nav-item:hover .ic { opacity: 0.95; }
.nav-item.active .ic { opacity: 1; color: var(--accent); }
.sidebar-user {
border-top: 1px solid rgba(20, 16, 26, 0.10); padding-top: 12px;
display: flex; align-items: center; gap: 10px;
}
.sidebar-user .meta { flex: 1; min-width: 0; }
.sidebar-user .meta .n { font-size: 13px; font-weight: 600; line-height: 1.2; }
.sidebar-user .meta .r { font-size: 9px; letter-spacing: 1px; color: var(--muted2); font-weight: 700; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
display: flex; align-items: center; gap: 12px;
padding: 18px 26px 6px;
}
.breadcrumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted2); flex: 1; }
.breadcrumbs .crumb:last-child { color: var(--ink2); font-weight: 600; }
.breadcrumbs .sep { color: var(--muted2); }
.crumb-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.crumb-link:hover { text-decoration: underline; }
/* Mobile menu button — only shown when the sidebar collapses (<900px). */
.menu-btn { display: none; align-items: center; justify-content: center; width: 40px; height: 40px;
border: 1px solid var(--glass-border); border-radius: 12px; background: var(--glass-bg-strong);
font-size: 20px; cursor: pointer; color: var(--ink2); flex: 0 0 auto; }
.search-pill, .hdr-btn {
height: 38px; border-radius: 19px;
background: var(--glass-bg); border: 1px solid var(--glass-border);
-webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
display: inline-flex; align-items: center; gap: 8px; padding: 0 14px;
font-size: 13px; color: var(--muted); box-shadow: var(--glass-shadow); cursor: pointer;
}
.search-pill { width: 220px; }
.hdr-btn { color: var(--ink2); font-weight: 500; }
.hdr-btn.primary {
background: linear-gradient(135deg, var(--accent), #ff4d8a); border-color: transparent;
color: #fff; font-weight: 600;
box-shadow: 0 6px 18px rgba(255, 46, 108, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.hdr-btn.primary:hover { filter: brightness(1.08); }
.content { padding: 12px 26px 40px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.page-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.8px; margin: 0; }
.page-head .lead { font-size: 13px; color: var(--muted); margin-top: 4px; }
.page-head .accent { color: var(--accent); }
/* ---- Glass card --------------------------------------------------------- */
.glass {
position: relative;
background: var(--glass-bg); border: 1px solid var(--glass-border);
-webkit-backdrop-filter: blur(40px) saturate(125%); backdrop-filter: blur(40px) saturate(125%);
border-radius: var(--radius); box-shadow: var(--glass-shadow);
overflow: hidden;
}
.glass::before {
content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 35%);
}
.glass > * { position: relative; }
.pad { padding: 18px 20px; }
.card-title { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; margin: 0; }
.card-sub { font-size: 11px; color: var(--muted); letter-spacing: 0.3px; text-transform: uppercase; font-weight: 600; margin: 2px 0 12px; }
.accent-card { border-color: var(--accent); border-left: 4px solid var(--accent); background: var(--glass-bg-strong); }
/* ---- KPI grid ----------------------------------------------------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.kpi { padding: 16px 18px; }
.kpi .label { font-size: 9px; letter-spacing: 1px; color: var(--muted2); font-weight: 700; text-transform: uppercase; }
.kpi .value { font-size: 40px; font-weight: 800; color: var(--accent); line-height: 1; margin-top: 4px; letter-spacing: -1.5px; }
.kpi .detail { font-size: 11px; color: var(--muted); margin-top: 4px; }
.lbl { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin: 0 0 4px; }
.table-search {
width: 100%; max-width: 420px; display: block; margin: 0 0 14px;
padding: 11px 16px; font-size: 14px; font-family: inherit; color: var(--ink);
background: #fff;
border: 1.5px solid var(--field-border); border-radius: 14px; outline: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 4px 14px rgba(80,30,60,0.06);
}
.table-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(230,40,95,0.14); }
.table-search::placeholder { color: var(--muted2); }
.lang-switch { display: inline-flex; gap: 2px; background: rgba(20,16,26,0.06); border-radius: 999px; padding: 3px; }
.lang-switch a { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; padding: 4px 10px; border-radius: 999px; color: var(--muted); text-decoration: none; }
.lang-switch a.active { background: var(--accent); color: #fff; }
/* Questionnaire translation editor */
.tr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(20,16,26,0.06); }
.tr-row .ctx { grid-column: 1 / -1; font-size: 11px; color: var(--muted2); font-weight: 600; }
.tr-row textarea { width: 100%; min-height: 38px; resize: vertical; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid rgba(20,16,26,0.12); border-radius: 10px; background: #fff; }
.tr-row textarea:focus { outline: none; border-color: var(--accent); }
/* Questionnaire structure editor. */
.form-admin-head { align-items: flex-start; }
.form-preview-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.form-admin-success { color: #18794e; background: rgba(24,121,78,.10); border-color: rgba(24,121,78,.24); }
.form-admin-section { scroll-margin-top: 16px; }
.form-language-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px;
padding: 13px 16px; margin: 0 0 12px; background: rgba(255,255,255,.68);
border: 1px solid rgba(20,16,26,.10); border-radius: 10px; }
.form-language-panel-copy { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.form-language-panel-copy > div { display: grid; gap: 2px; }
.form-language-panel-copy strong { font-size: 13px; }
.form-language-panel-copy span { color: var(--muted2); font-size: 11px; }
.form-section-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
width: 36px; height: 36px; border-radius: 8px; color: var(--accent); background: rgba(230,40,95,.08); }
.form-admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px;
padding: 16px 18px; margin-bottom: 12px; border-radius: 12px; }
.form-admin-toolbar .section-label { margin: 0 0 3px; }
.form-admin-toolbar .lead { margin: 0; font-size: 13px; }
.form-admin-toolbar .btn { flex: 0 0 auto; }
.form-admin-section [data-questionnaire-save]:disabled { opacity: .42; cursor: not-allowed;
box-shadow: none; filter: saturate(.25); }
.form-page-builder { display: grid; gap: 12px; }
.form-builder-intro { margin-bottom: 12px; background: rgba(255,255,255,.72);
border: 1px solid rgba(20,16,26,.10); border-radius: 10px; overflow: hidden; }
.form-builder-intro-head { display: grid; grid-template-columns: 44px minmax(0,1fr) auto;
align-items: center; gap: 8px; min-height: 66px; padding: 10px 14px; }
.form-builder-intro-head > div { display: grid; gap: 3px; }
.form-builder-intro-head strong { font-size: 14px; }
.form-builder-intro-head span { color: var(--muted2); font-size: 11px; }
.form-builder-page { background: rgba(255,255,255,.58); border: 1px solid rgba(20,16,26,.11);
border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(43,25,49,.06); }
.form-builder-page-head { display: grid; grid-template-columns: 36px 28px minmax(0,1fr) auto; align-items: center;
gap: 6px; min-height: 66px; padding: 10px 14px; background: rgba(255,255,255,.76);
border-bottom: 1px solid rgba(20,16,26,.09); }
.form-page-position, .form-question-position { color: var(--muted2); font-size: 12px; font-weight: 700;
font-variant-numeric: tabular-nums; text-align: center; }
.form-builder-page-title, .form-question-title { min-width: 0; display: grid; gap: 3px; }
.form-builder-page-title strong { font: 750 17px/1.2 'Inter Tight','Inter',sans-serif; }
.form-builder-page-title span, .form-question-title span { color: var(--muted2); font-size: 11px; }
.form-question-title code { color: var(--muted); font-size: 10px; }
.form-question-dropzone { min-height: 58px; padding: 8px; display: grid; gap: 6px; }
.form-question-editor { background: rgba(255,255,255,.82); border: 1px solid rgba(20,16,26,.10);
border-radius: 8px; transition: border-color .14s, box-shadow .14s, opacity .14s; }
.form-question-editor.is-open { border-color: rgba(230,40,95,.32); box-shadow: 0 0 0 1px rgba(230,40,95,.08); }
.form-question-summary { display: grid; grid-template-columns: 36px 28px minmax(220px,1fr) 230px 126px;
align-items: center; gap: 7px; min-height: 60px; padding: 7px 10px; }
.form-question-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 13px; line-height: 1.3; }
.form-page-select-label { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 7px; }
.form-page-select-label > span { color: var(--muted2); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.form-page-select-label select.field { height: 36px; min-width: 0; padding: 0 32px 0 10px; font-size: 12px;
background-position: right 10px center; }
.form-drag-handle, .form-icon-button, .form-question-toggle, .form-content-toggle { display: inline-flex; align-items: center;
justify-content: center; border: 0; background: transparent; color: var(--muted2); cursor: pointer; }
.form-drag-handle { width: 34px; height: 34px; border-radius: 8px; cursor: grab; touch-action: none; user-select: none; }
.form-drag-handle:hover, .form-icon-button:hover { color: var(--accent); background: rgba(230,40,95,.09); }
.form-drag-handle:focus-visible, .form-icon-button:focus-visible, .form-question-toggle:focus-visible,
.form-content-toggle:focus-visible {
outline: 2px solid var(--accent); outline-offset: 2px; }
.form-question-toggle, .form-content-toggle { min-height: 36px; gap: 6px; padding: 0 10px; border-radius: 8px;
border: 1px solid rgba(20,16,26,.14); font: 650 12px/1 'Inter',sans-serif; color: var(--ink2); }
.form-question-toggle:hover, .form-question-toggle[aria-expanded="true"],
.form-content-toggle:hover, .form-content-toggle[aria-expanded="true"] { border-color: var(--accent);
color: var(--accent); background: rgba(230,40,95,.06); }
.form-reordering, .form-reordering * { cursor: grabbing !important; }
.form-builder-page.is-dragging, .form-question-editor.is-dragging { opacity: .58; border-color: var(--accent);
box-shadow: inset 3px 0 0 var(--accent); }
.form-question-config { padding: 0 10px 12px; }
.form-question-config[hidden] { display: none; }
.form-content-config { padding: 14px; background: rgba(246,242,248,.68);
border-top: 1px solid rgba(20,16,26,.08); }
.form-content-config[hidden] { display: none; }
.form-page-config { padding-left: 81px; padding-right: 150px; }
.form-config-block { padding: 14px; background: rgba(246,242,248,.72);
border: 1px solid rgba(20,16,26,.07); border-radius: 8px; }
.form-config-block + .form-config-block { margin-top: 8px; }
.form-config-block.has-error { box-shadow: inset 3px 0 0 var(--error); }
.form-config-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.form-config-heading > div, .form-image-config > div:first-child { display: grid; gap: 2px; }
.form-config-heading strong, .form-image-config strong { font-size: 13px; }
.form-config-heading span, .form-image-config span { color: var(--muted2); font-size: 11px; }
.form-localized-fields { display: grid; gap: 12px; }
.form-localized-field { display: grid; gap: 6px; }
.form-localized-field + .form-localized-field { padding-top: 12px; border-top: 1px solid rgba(20,16,26,.07); }
.form-localized-field-label { color: var(--ink2); font-size: 11px; font-weight: 750; }
.form-language-grid, .form-option-language-grid { display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 8px; }
.form-language-field { display: grid; gap: 4px; min-width: 0; }
.form-language-field > span, .form-option-language > div { color: var(--muted2);
font-size: 9px; font-weight: 700; text-transform: uppercase; }
.form-language-field b, .form-option-language b { color: var(--accent); }
.form-language-field input.field { height: 40px; border-radius: 8px; font-size: 12px; }
.form-language-field textarea.field { min-height: 64px; padding: 10px 12px; border-radius: 8px; font-size: 12px; }
.form-add-option.btn { min-height: 34px; padding: 0 11px; }
.form-option-list { display: grid; gap: 6px; }
.form-option-row { display: grid; grid-template-columns: 26px minmax(0,1fr) 36px;
gap: 9px; align-items: center; padding: 9px; background: rgba(255,255,255,.72);
border: 1px solid rgba(20,16,26,.08); border-radius: 8px; }
.form-option-number { color: var(--muted2); font-size: 11px; font-weight: 750; text-align: center; }
.form-option-language { display: grid; grid-template-columns: minmax(0,1fr);
gap: 5px; min-width: 0; }
.form-option-language > div { grid-column: auto; }
.form-option-language label { min-width: 0; display: grid; gap: 3px; }
.form-option-language label > span { color: var(--muted2); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.form-option-row input.field { height: 38px; font-size: 13px; }
.form-icon-button { width: 36px; height: 38px; border-radius: 8px; }
.form-image-config { display: grid; grid-template-columns: minmax(160px,.7fr) minmax(220px,1fr) minmax(220px,1fr);
align-items: center; gap: 14px; }
.form-current-image { display: flex; align-items: center; gap: 10px; min-width: 0; }
.form-current-image img { width: 72px; height: 54px; object-fit: cover; border-radius: 6px;
border: 1px solid rgba(20,16,26,.12); background: #fff; }
.form-current-image .scope-option { margin: 0; }
.form-image-upload { margin: 0; height: 44px; border-radius: 8px; }
.form-image-upload input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; }
.form-image-upload.is-disabled { cursor: not-allowed; opacity: .55; }
.form-admin-submit-row { display: flex; justify-content: flex-end; margin: 14px 0 28px; }
.form-language-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-items: center; }
.form-language-chip { display: inline-flex; align-items: center; gap: 6px; }
.form-language-chip .mono { opacity: .6; }
.form-language-chip form { display: inline; }
.form-language-remove { border: 0; background: none; cursor: pointer; color: var(--accent);
font-weight: 800; padding: 0 2px; }
.form-language-add { display: flex; gap: 6px; align-items: center; margin-left: 4px; }
.form-language-add .editor-box { width: 150px; padding: 7px 10px; }
.form-language-add .editor-box[name="label"] { width: 190px; }
@media (max-width: 1120px) {
.form-question-summary { grid-template-columns: 36px 28px minmax(180px,1fr) 205px; }
.form-question-toggle { grid-column: 4; justify-self: end; }
.form-question-config { padding-left: 14px; }
.form-page-config { padding-left: 14px; padding-right: 14px; }
.form-image-config { grid-template-columns: 1fr 1fr; }
.form-image-config > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
.form-admin-head { display: grid; }
.form-preview-links { justify-content: flex-start; }
.form-language-panel { align-items: flex-start; flex-direction: column; }
.form-language-list { justify-content: flex-start; }
.form-admin-toolbar { align-items: flex-start; }
.form-admin-toolbar .lead { display: none; }
.form-question-summary { grid-template-columns: 36px 24px minmax(0,1fr) 42px; }
.form-page-select-label { grid-column: 3 / -1; }
.form-question-toggle { grid-column: 4; grid-row: 1; width: 36px; padding: 0; }
.form-question-toggle span { display: none; }
.form-builder-page-head { grid-template-columns: 36px 24px minmax(0,1fr) 42px; }
.form-page-toggle { width: 36px; padding: 0; }
.form-page-toggle span { display: none; }
.form-builder-intro-head { grid-template-columns: 40px minmax(0,1fr) 42px; }
.form-builder-intro-head .form-content-toggle { width: 36px; padding: 0; }
.form-builder-intro-head .form-content-toggle span { display: none; }
.form-option-row { grid-template-columns: 24px minmax(0,1fr) 36px; }
.form-image-config { grid-template-columns: 1fr; }
.form-image-config > div:first-child { grid-column: auto; }
.form-language-add { width: 100%; margin: 4px 0 0; flex-wrap: wrap; }
.form-language-add .editor-box, .form-language-add .editor-box[name="label"] { flex: 1; width: auto; min-width: 130px; }
}
/* Questionnaire help images + info blocks (public form) */
.q-img { display: block; width: auto; max-width: calc(100% - 4px); height: auto; margin: 12px 0 8px;
border-radius: 12px; background: #fff; }
.q.info-block { background: rgba(230,40,95,0.05); border: 1px solid rgba(230,40,95,0.12);
border-radius: 14px; padding: 14px 16px; }
.info-body p { margin: 6px 0; color: var(--ink2, #2a2330); font-size: 13px; line-height: 1.5; }
/* Coming-soon / parked KPI: grayed out, not pink. */
.kpi.muted { opacity: 0.55; }
.kpi.muted .value { color: var(--muted2); }
.kpi.muted .detail { font-style: italic; }
.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.recommendation-editor { margin-top: 14px; border-top: 1px solid rgba(20,16,26,.08); padding-top: 12px; }
.recommendation-editor > summary { display: inline-flex; list-style: none; cursor: pointer; }
.recommendation-editor > summary::-webkit-details-marker { display: none; }
.recommendation-editor > form { display: grid; gap: 12px; margin-top: 12px; }
.recommendation-form-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 10px; }
/* ---- Bars / chart ------------------------------------------------------- */
.chart { display: flex; align-items: stretch; gap: 8px; margin-top: 12px; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between;
height: 180px; width: 22px; text-align: right; font-size: 10px; color: var(--muted2);
font-variant-numeric: tabular-nums; }
.bars { flex: 1; display: flex; align-items: flex-end; gap: 4px; height: 180px; padding: 0 4px; border-bottom: 1px solid rgba(20,16,26,0.1); }
.bars i { flex: 1; min-height: 2px; background: rgba(20, 16, 26, 0.35); border-radius: 3px 3px 0 0; }
.bars i.hi { background: var(--accent); box-shadow: 0 0 8px rgba(255, 46, 108, 0.5); }
.axis { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 1px; color: var(--muted2); margin-top: 6px; }
/* ---- Tables ------------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; }
.table th {
text-align: left; font-size: 9px; letter-spacing: 1px; color: var(--muted2);
font-weight: 700; text-transform: uppercase; padding: 10px 14px;
border-bottom: 1px solid rgba(20, 16, 26, 0.08); background: rgba(255, 255, 255, 0.4);
}
.table td { padding: 11px 14px; border-bottom: 1px solid rgba(20, 16, 26, 0.06); font-size: 13px; vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background 0.12s; }
.table tbody tr:hover { background: rgba(255, 255, 255, 0.5); cursor: pointer; }
.row-link { color: var(--accent); font-weight: 700; }
/* Wide tables (test rackets, the test x racket matrix) scroll horizontally once
a few parameters are enabled. Pinning the identifying first column keeps the
rows readable — without it the racket number scrolls out of sight and the
ticks can no longer be attributed to a frame. Needs an opaque background:
.glass is translucent, so the scrolled cells would show through. */
.table.pin-first th:first-child,
.table.pin-first td:first-child { position: sticky; left: 0; z-index: 1; }
.table.pin-first td:first-child { background: #faf7fb; }
.table.pin-first th:first-child { background: #f4eff5; z-index: 2; }
.table.pin-first tbody tr:hover td:first-child { background: #fff; }
/* The assignment matrix: its rows are identified by the TEST name in column 3,
so the first three columns travel together. Fixed widths, because the sticky
offsets have to be known up front. */
.table.pin-matrix th:nth-child(-n+3),
.table.pin-matrix td:nth-child(-n+3) { position: sticky; z-index: 1; box-sizing: border-box; }
.table.pin-matrix th:nth-child(-n+3) { z-index: 2; background: #f4eff5; }
.table.pin-matrix td:nth-child(-n+3) { background: #faf7fb; }
.table.pin-matrix tbody tr:hover td:nth-child(-n+3) { background: #fff; }
.table.pin-matrix th:nth-child(1), .table.pin-matrix td:nth-child(1) { left: 0; width: 84px; min-width: 84px; }
.table.pin-matrix th:nth-child(2), .table.pin-matrix td:nth-child(2) { left: 84px; width: 74px; min-width: 74px; }
.table.pin-matrix th:nth-child(3), .table.pin-matrix td:nth-child(3) { left: 158px; width: 210px; min-width: 210px; }
.matrix-order { display: flex; align-items: center; gap: 7px; }
.matrix-position { min-width: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.matrix-drag-handle {
display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted2);
cursor: grab; touch-action: none; user-select: none;
}
.matrix-drag-handle:hover { color: var(--accent); background: rgba(230,40,95,0.09); }
.matrix-drag-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.matrix-reordering, .matrix-reordering * { cursor: grabbing !important; }
.table.pin-matrix .mtx-row.is-dragging td { background: #fff0f5; }
.table.pin-matrix .mtx-row.is-dragging td:first-child {
box-shadow: inset 3px 0 0 var(--accent);
}
/* Keep one long value (a string name) from stretching a whole matrix column. */
.table.pin-matrix td .mono { display: block; max-width: 92px; margin: 2px auto 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono { font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 11px; color: var(--muted); }
/* ---- Avatars / pills / chips ------------------------------------------- */
.avatar {
width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
font-family: 'Inter Tight'; font-weight: 700; font-size: 11px; color: #fff;
border: 1px solid rgba(255, 255, 255, 0.7);
}
.avatar.lg { width: 52px; height: 52px; font-size: 17px; }
.name-cell { display: flex; align-items: center; gap: 10px; }
.tags { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.tag { font-size: 10px; color: var(--muted); border: 1px solid rgba(20,16,26,0.15); padding: 1px 7px; border-radius: 8px; }
.pill { font-size: 10px; font-weight: 700; letter-spacing: 0.4px; padding: 4px 9px; border-radius: 9px; text-transform: uppercase; display: inline-block; }
.pill.now, .pill.accent { background: var(--accent); color: #fff; box-shadow: 0 0 12px rgba(255, 46, 108, 0.4); }
.pill.soft { background: rgba(230, 40, 95, 0.12); color: var(--accent); }
.pill.muted { background: rgba(20, 16, 26, 0.06); color: var(--muted); }
.pill.lapsed { background: rgba(20, 16, 26, 0.06); color: var(--muted); opacity: 0.7; }
.pill.green { background: rgba(10, 125, 74, 0.14); color: #0a7d4a; }
.pill.amber { background: rgba(180, 103, 10, 0.14); color: #a9670a; }
/* customer form: responsive field rows */
.form-card .frow { display: flex; gap: 12px; flex-wrap: wrap; }
.form-card .frow > div { flex: 1; min-width: 150px; }
.pill.warn { background: rgba(168, 50, 50, 0.12); color: #a83232; }
.chip {
display: inline-flex; align-items: center; gap: 6px;
height: 30px; padding: 0 12px; border-radius: 15px;
background: rgba(255, 255, 255, 0.7); border: 1px solid var(--glass-border);
font-size: 12px; color: var(--ink2); font-weight: 500; cursor: pointer;
-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.chip:hover { background: rgba(255, 255, 255, 0.95); }
.chip.active { background: var(--accent); color: #fff; border-color: transparent; }
.chip.soft { background: rgba(230, 40, 95, 0.10); color: var(--accent); }
.chip .count { color: var(--muted2); }
.chip.active .count { color: rgba(255,255,255,0.8); }
.filter-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
/* ---- Buttons ------------------------------------------------------------ */
.btn {
display: inline-flex; align-items: center; gap: 8px; justify-content: center;
height: 38px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--glass-border);
background: rgba(255, 255, 255, 0.8); color: var(--ink2); font-weight: 600; font-size: 13px;
cursor: pointer; font-family: inherit;
}
.btn.primary { background: linear-gradient(135deg, var(--accent), #ff4d8a); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(255, 46, 108, 0.35); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.block { width: 100%; }
/* ---- Documents ---------------------------------------------------------- */
.document-layout { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 14px; align-items: start; }
.document-upload { position: sticky; top: 12px; }
.document-upload .section-label { margin: 14px 0 8px; }
.document-upload textarea.field { min-height: 72px; }
.document-folder-nav { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; padding: 1px; }
.document-folder { display: flex; align-items: center; gap: 10px; min-width: 156px; padding: 11px 13px;
border: 1px solid var(--glass-border); border-radius: 8px; background: rgba(255,255,255,.62);
color: var(--ink2); }
.document-folder:hover { background: rgba(255,255,255,.9); }
.document-folder.active { border-color: var(--accent); background: rgba(230,40,95,.09); color: var(--accent); }
.document-folder-icon { display: inline-flex; flex: 0 0 auto; }
.document-folder span:last-child { min-width: 0; }
.document-folder b, .document-folder small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-folder b { font-size: 12px; }
.document-folder small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.field-help { color: var(--muted); font-size: 11px; margin-top: 6px; }
.error-text { color: #a83232; }
.scope-fieldset { border: 0; padding: 0; margin: 16px 0; min-width: 0; }
.scope-fieldset > .section-label { padding: 0; margin-bottom: 8px; }
.scope-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.scope-columns.disabled { opacity: .45; }
.scope-heading { font-size: 10px; font-weight: 700; color: var(--muted2); text-transform: uppercase; margin: 8px 0 5px; }
.scope-option { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; font-size: 12px; color: var(--ink2); }
.scope-option input { margin-top: 1px; accent-color: var(--accent); }
.scope-all { border-bottom: 1px solid rgba(20,16,26,.08); padding-bottom: 10px; }
.document-table-wrap { overflow-x: auto; }
.document-table-wrap .table { min-width: 780px; }
.document-name { display: flex; align-items: flex-start; gap: 10px; min-width: 220px; }
.document-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 8px; background: rgba(230,40,95,.10); color: var(--accent); }
.document-meta, .document-description { color: var(--muted); font-size: 11px; margin-top: 3px; }
.document-description { max-width: 340px; white-space: normal; line-height: 1.35; }
.document-scope { display: block; max-width: 260px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.document-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; white-space: nowrap; }
.document-actions form { display: inline-flex; }
.btn.icon-only { width: 38px; padding: 0; }
.btn.danger { color: #a83232; }
.document-empty, .search-none { text-align: center; color: var(--muted); padding: 28px !important; }
.document-edit-card { max-width: 620px; }
@media (max-width: 1180px) {
.document-layout { grid-template-columns: 1fr; }
.document-upload { position: static; }
}
@media (max-width: 620px) {
.scope-columns { grid-template-columns: 1fr; }
}
/* ---- Inventory grid ----------------------------------------------------- */
.racket-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.racket-card { padding: 14px; cursor: pointer; }
.racket-card .rn { font-size: 14px; font-weight: 600; line-height: 1.2; margin-top: 8px; }
.racket-card .specs { font-size: 11px; color: var(--muted); margin-top: 4px; }
.racket-card .foot { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; color: var(--muted); }
.racket-card.top { border-color: var(--accent); }
.racket-card .badge-top { position: absolute; top: 8px; right: 10px; font-size: 9px; letter-spacing: 1px; color: var(--accent); font-weight: 700; }
.racket-svg { display: flex; justify-content: center; }
/* ---- Two-pane (emails) -------------------------------------------------- */
.split { display: grid; grid-template-columns: 320px 1fr; gap: 14px; align-items: start; }
.list-item { display: block; padding: 12px 14px; border-radius: 14px; cursor: pointer; }
.list-item:hover { background: rgba(255,255,255,0.5); }
/* Selected row: subtle on-brand pink fill (full-width pill now that
.list-item is display:block) + accent title. */
.list-item.active { background: rgba(230,40,95,0.10); }
.list-item.active .li-title { color: var(--accent); font-weight: 700; }
.list-item .li-title { font-size: 13px; font-weight: 600; }
.list-item .li-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.token { background: rgba(230,40,95,0.12); color: var(--accent); font-weight: 600; padding: 0 4px; border-radius: 4px; }
.editor-box { background: #fff; border: 1.5px solid var(--field-border); border-radius: 12px; padding: 12px 14px; }
textarea.editor-box, input.editor-box { width: 100%; font-family: inherit; font-size: 13px; color: var(--ink2); resize: vertical; }
textarea.editor-box:focus, input.editor-box:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(230, 40, 95, 0.18); }
.var-chip { cursor: pointer; transition: background 0.12s; }
.var-chip:hover { background: rgba(230, 40, 95, 0.20); }
.var-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* ---- Forms / questionnaire --------------------------------------------- */
.form-wrap { max-width: 760px; margin: 0 auto; padding: 28px 16px 60px; }
.progress { display: flex; gap: 4px; margin: 12px 0 18px; }
.progress i { flex: 1; height: 10px; border-radius: 5px; background: rgba(20, 16, 26, 0.16);
transition: background 0.2s ease; }
.progress i.done { background: var(--accent); }
.q { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(20,16,26,0.08); }
.q:last-of-type { border-bottom: none; }
.q .label { font-size: 15px; font-weight: 600; line-height: 1.35; }
.q .req { color: var(--accent); font-size: 16px; font-weight: 700; }
.q .hint { font-size: 12px; color: var(--muted2); margin: 4px 0 0; line-height: 1.4; }
/* Inline validation (CSS hooks for required-field errors) */
.q.error .label { color: var(--error); }
.q.error input.field, .q.error textarea.field { border-color: var(--error); }
.error-msg { font-size: 12px; font-weight: 600; color: var(--error); margin-top: 6px; }
.opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 10px; }
/* Compact wrapping grid for many short checkbox rows (e.g. studio pickers). */
.checkbox-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.opt { display: flex; align-items: flex-start; gap: 10px; border: 1.5px solid rgba(20,16,26,0.16);
background: rgba(255,255,255,0.72); border-radius: 12px; padding: 12px 14px; cursor: pointer;
min-height: 48px; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; }
.opt:hover { border-color: rgba(20,16,26,0.30); background: rgba(255,255,255,0.85); }
.opt input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
/* Stack label over description in a column so long text wraps instead of
overflowing the tile (min-width:0 lets it shrink within the grid cell). */
.opt .opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.opt .ol { font-size: 14px; font-weight: 600; line-height: 1.3; }
.opt .od { font-size: 12px; color: var(--muted2); margin-top: 3px; line-height: 1.35; }
.opt:has(input:checked) { border-color: var(--accent); border-width: 1.5px;
background: rgba(230,40,95,0.10); box-shadow: 0 0 0 1px var(--accent) inset; }
.opt:has(input:checked) .ol { color: var(--accent); font-weight: 700; }
.opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.scale { display: flex; gap: 8px; }
.scale .opt { flex: 1; min-width: 48px; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: 10px 4px; gap: 4px; }
.scale .opt input { margin: 0; }
.scale .opt .ol { font-size: 16px; font-weight: 600; }
.scale .opt:has(input:checked) { background: rgba(230,40,95,0.14); padding: 9px 3px; }
.scale-ends { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.5px; color: var(--muted2); margin-bottom: 6px; }
input.field, textarea.field, select.field { width: 100%; height: 44px; padding: 0 14px; border-radius: 12px;
border: 1.5px solid var(--field-border); background: #fff; font-family: inherit;
font-size: 16px; color: var(--ink2); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
input.field:hover, textarea.field:hover, select.field:hover { border-color: rgba(20,16,26,0.45); }
select.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(230,40,95,0.16); }
input.field:focus, textarea.field:focus { outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(230,40,95,0.16); }
textarea.field { height: auto; min-height: 110px; padding: 12px 14px; line-height: 1.45; resize: vertical; }
/* Custom dropdown chrome so selects match the app (no native OS look). */
select.field { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; }
/* Location rows (studio edit): name + address + remove. */
.loc-row { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 6px; margin-bottom: 6px; align-items: center; }
.loc-row .btn.loc-del { height: 44px; width: 44px; padding: 0; color: var(--muted2); }
.loc-row .btn.loc-del:hover { color: var(--accent); border-color: var(--accent); }
/* Styled file picker — replaces the old-school native input. */
.file-drop { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px;
border: 1.5px dashed var(--field-border); border-radius: 12px; background: rgba(255,255,255,0.6);
cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; color: var(--ink2); }
.file-drop:hover { border-color: var(--accent); background: rgba(230,40,95,0.05); }
.file-drop .fd-icon { font-size: 18px; color: var(--accent); }
.file-drop .fd-text { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-actions { display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(20,16,26,0.08); padding-top: 16px; margin-top: 4px; }
.form-actions .privacy { font-size: 11px; color: var(--muted2); }
.form-actions .btn { min-height: 44px; }
/* ---- Public questionnaire — header + page-scoped tweaks ----------------- */
.form-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.form-head-brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.form-head-brand img { width: 34px; height: 34px; flex: 0 0 auto; }
.form-head-title { font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 800; font-size: 20px;
line-height: 1.15; min-width: 0; }
.form-head-meta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.lang-switch a { padding: 6px 12px; }
/* Scoped: the public form uses bare .section-label inside the glass card; bump
legibility without touching backoffice .form-card .section-label. */
.form-page .section-label { font-size: 11px; letter-spacing: 0.8px; }
@media (max-width: 640px) {
.scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.scale .opt { min-width: 0; min-height: 48px; padding: 8px 2px; }
.scale .opt:has(input:checked) { padding: 7px 1px; }
}
/* ---- Public questionnaire — phones ------------------------------------- */
@media (max-width: 480px) {
.form-wrap { padding: 18px 12px 80px; }
.form-head { flex-direction: column; align-items: stretch; gap: 8px; }
.form-head-brand { flex: none; }
.form-head-title { font-size: 18px; }
.form-head-meta { justify-content: space-between; }
.glass.pad h1 { font-size: 21px; }
.opts { grid-template-columns: 1fr; }
.form-actions { flex-direction: column; align-items: stretch; gap: 8px;
position: sticky; bottom: 0; background: var(--glass-bg-strong);
margin: 4px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
border-top: 1px solid rgba(20,16,26,0.10); }
.form-actions .btn { min-height: 48px; width: 100%; order: 2; }
.form-actions .btn.primary { order: 1; }
.form-actions .privacy { order: 3; text-align: center; }
.form-actions > div { display: none; }
/* Outdoor legibility: firmer glass + label shadow on phones. */
.form-page .glass { background: rgba(255,255,255,0.93); }
.form-page .q .label { text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
.form-page .stub-hero { padding: 56px 18px; }
}
/* ---- Login -------------------------------------------------------------- */
.login-wrap { min-height: 100vh; display: flex; }
.login-brand { flex: 0 0 46%; display: flex; flex-direction: column; justify-content: space-between; padding: 56px; }
.login-brand h2 { font-size: 40px; letter-spacing: -1px; margin: 20px 0 10px; }
.login-form { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; }
.login-card { width: 360px; }
.dev-user { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; margin-bottom: 8px;
border-radius: 12px; border: 1px solid var(--glass-border); background: rgba(255,255,255,0.6); cursor: pointer; font-family: inherit; text-align: left; }
.dev-user:hover { background: rgba(255,255,255,0.95); }
.dev-user .meta { flex: 1; }
.dev-user .meta .n { font-size: 14px; font-weight: 600; }
.dev-user .meta .r { font-size: 10px; letter-spacing: 1px; color: var(--muted2); font-weight: 700; }
/* ---- Misc --------------------------------------------------------------- */
.banner { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 12px;
background: rgba(255, 200, 70, 0.18); border: 1px solid rgba(200, 150, 30, 0.3);
font-size: 12px; color: #6a5212; margin: 0 26px; }
/* The banner is a flex row, so its icon is a flex ITEM: without this it is
squeezed to 0px whenever the text wraps to more than one line. */
.banner > svg { flex: 0 0 auto; }
/* Multi-line banners only — a global align-items:flex-start would shift every
existing single-line banner's icon off-centre. */
.banner.multiline { align-items: flex-start; }
.banner.multiline > svg { margin-top: 1px; }
/* In-content notices (page body, not the top-of-main strip). */
.banner.note { margin: 0 0 12px; }
.banner.error { margin: 0 0 12px; background: rgba(168,50,50,0.12);
border-color: rgba(168,50,50,0.3); color: var(--error); }
/* Tighten label rhythm inside compact create/edit forms. */
.form-card .section-label { margin: 14px 0 8px; }
.form-card .section-label:first-of-type { margin-top: 0; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(20,16,26,0.08); border-radius: 12px; overflow: hidden; }
.kv > div { background: rgba(255,255,255,0.75); padding: 10px 12px; }
.kv .k { font-size: 9px; letter-spacing: 1px; color: var(--muted2); font-weight: 700; text-transform: uppercase; }
.kv .v { font-size: 14px; margin-top: 2px; }
.section-label { font-size: 9px; letter-spacing: 1px; color: var(--muted2); font-weight: 700; text-transform: uppercase; margin: 18px 0 6px; }
.bar-track { height: 6px; background: rgba(20,16,26,0.12); border-radius: 3px; position: relative; overflow: hidden; }
.bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 3px; }
.stub-hero { text-align: center; padding: 80px 20px; }
.stub-hero .icon { font-size: 48px; }
.stub-hero h1 { margin: 12px 0 6px; }
.stub-hero p { color: var(--muted); }
@media (max-width: 900px) {
.kpi-grid, .racket-grid { grid-template-columns: repeat(2, 1fr); }
.two-col, .split { grid-template-columns: 1fr; }
.login-brand { display: none; }
.menu-btn { display: inline-flex; }
/* Sidebar becomes a slide-in overlay toggled by the ☰ button. */
.sidebar {
position: fixed; top: 0; left: 0; height: 100vh; margin: 0; width: 240px; flex-basis: 240px;
border-radius: 0 24px 24px 0; z-index: 60;
transform: translateX(-108%); transition: transform 0.22s ease;
}
.shell.nav-open .sidebar { transform: translateX(0); }
.shell.nav-open::before {
content: ''; position: fixed; inset: 0; background: rgba(20,16,26,0.38); z-index: 55;
}
}
/* ---- Inventory club-search omni-box -------------------------------------- */
.omni { position: relative; margin-bottom: 14px; z-index: 30; }
.omni-bar {
display: flex; align-items: center; gap: 10px; padding: 5px 8px 5px 14px;
background: var(--glass-bg-strong); border: 1.5px solid var(--field-border);
border-radius: 16px; box-shadow: var(--glass-shadow);
-webkit-backdrop-filter: blur(40px) saturate(160%); backdrop-filter: blur(40px) saturate(160%);
transition: border-color .15s ease, box-shadow .15s ease;
}
.omni-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(230,40,95,.16), var(--glass-shadow); }
.omni-ic { color: var(--accent); opacity: .8; flex: 0 0 auto; display: inline-flex; }
.omni-input {
flex: 1; min-width: 0; height: 48px; border: 0; background: transparent; outline: none;
font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 20px; font-weight: 700;
letter-spacing: -.3px; color: var(--ink2);
}
.omni-input::placeholder { color: var(--muted2); font-weight: 500; font-size: 16px; letter-spacing: 0; }
.omni-input::-webkit-search-decoration,
.omni-input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* scope toggle — "alles durchsuchen" */
.omni-scope { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
user-select: none; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.omni-scope input { position: absolute; opacity: 0; width: 0; height: 0; }
.omni-scope-track { position: relative; width: 38px; height: 22px; border-radius: 999px;
background: rgba(20,16,26,.18); transition: background .18s ease; flex: 0 0 auto; }
.omni-scope-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s ease; }
.omni-scope input:checked + .omni-scope-track { background: var(--accent); }
.omni-scope input:checked + .omni-scope-track .omni-scope-thumb { transform: translateX(16px); }
.omni-scope input:focus-visible + .omni-scope-track { box-shadow: 0 0 0 3px rgba(230,40,95,.28); }
.omni-scope input:checked ~ .omni-scope-txt { color: var(--accent); }
/* results panel */
.omni-panel {
position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
max-height: min(62vh, 460px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px;
background: var(--glass-bg-strong); border: 1px solid var(--glass-border); border-radius: 16px;
box-shadow: 0 16px 40px rgba(60,24,48,.22), var(--glass-shadow);
-webkit-backdrop-filter: blur(40px) saturate(160%); backdrop-filter: blur(40px) saturate(160%);
}
.omni-state { padding: 20px 16px; text-align: center; font-size: 13px; color: var(--muted); }
.omni-state::before { content: ''; display: none; }
.omni-more { padding: 8px 12px 4px; text-align: center; font-size: 11px; color: var(--muted2); }
.omni-result {
display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px;
min-height: 52px; cursor: pointer; text-decoration: none; color: var(--ink2);
transition: background .12s ease;
}
.omni-result:hover, .omni-result.active { background: rgba(230,40,95,.10); }
.omni-result.active { box-shadow: inset 0 0 0 1.5px var(--accent); }
.omni-num { flex: 0 0 auto; min-width: 72px; font-size: 19px; font-weight: 800;
letter-spacing: -.5px; color: var(--ink2); }
.omni-result:hover .omni-num, .omni-result.active .omni-num { color: var(--accent); }
.omni-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.omni-cust { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omni-cust.omni-free { color: var(--muted2); font-weight: 500; font-style: italic; }
.omni-field { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omni-tail { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.omni-hl { background: rgba(230,40,95,.22); color: var(--accent); font-weight: 800; border-radius: 3px; padding: 0 1px; }
/* touch: bigger rows + tighter chrome on phones */
@media (max-width: 640px) {
.omni-scope-txt { display: none; }
.omni-input { font-size: 18px; }
.omni-num { min-width: 60px; font-size: 17px; }
.omni-field { display: none; }
.omni-result { min-height: 58px; }
}
/* No dark-scheme block on purpose: the rest of the app is light-only, so the
omni stays light to match (a dark omni on the otherwise-light page looked
disjointed on dark-OS browsers). Re-add omni dark styles only when the whole
app gains dark mode. */
/* ---- Inventory chip filters + sortable headers -------------------------- */
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-filter {
display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
font-size: 13px; font-weight: 600; text-decoration: none; color: var(--ink2);
background: var(--glass-bg); border: 1.5px solid var(--field-border); transition: all .12s ease;
}
.chip-filter:hover { border-color: var(--accent); }
.chip-filter.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.chip-n { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
background: rgba(20, 16, 26, .08); color: var(--muted); }
.chip-filter.active .chip-n { background: rgba(255, 255, 255, .25); color: #fff; }
.inv-type-filter { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.inv-type-filter > .section-label { margin: 0; }
.inv-type-segment { display: inline-grid; grid-template-columns: repeat(3, minmax(92px, auto));
padding: 3px; border: 1px solid var(--field-border); border-radius: 8px;
background: rgba(255, 255, 255, .55); }
.inv-type-segment a { min-height: 34px; display: inline-flex; align-items: center;
justify-content: center; padding: 5px 12px; border-radius: 6px; color: var(--ink2);
text-decoration: none; font-size: 13px; font-weight: 650; }
.inv-type-segment a:hover { color: var(--accent); }
.inv-type-segment a.active { background: var(--accent); color: #fff; box-shadow: 0 3px 10px rgba(230, 40, 95, .18); }
.sort-h { color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
.sort-h:hover { color: var(--accent); }
.sort-h.active { color: var(--accent); font-weight: 700; }
.sort-ar { font-size: 10px; }
/* the "Ausgeblendet" chip reads as a separate, secondary section */
.chip-hidden { color: var(--muted); border-style: dashed; }
.chip-hidden.active { background: var(--muted); color: #fff; border-color: var(--muted); border-style: solid; }
.chip-hidden.active .chip-n { background: rgba(255, 255, 255, .25); color: #fff; }
/* the "Rückläufer / defekt" chip — a warning-tinted secondary section */
.chip-defect { color: #c8254e; border-style: dashed; border-color: rgba(200, 37, 78, .4); }
.chip-defect.active { background: #c8254e; color: #fff; border-color: #c8254e; border-style: solid; }
.chip-defect.active .chip-n { background: rgba(255, 255, 255, .25); color: #fff; }
@media (max-width: 640px) {
.inv-type-filter { align-items: stretch; }
.inv-type-filter > .section-label { width: 100%; }
.inv-type-segment { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inv-type-segment a { padding-inline: 6px; }
}
/* ==========================================================================
Inventory club editor — ONE partial (_inv_item.html) rendered two ways:
.inv-pg the full page /inventory/item/
.inv-drw inside the right-side drawer (.drw, below)
These grid/flex classes REPLACE the old inline style="display:grid…"
attributes: an inline style beats every media query, which is why the item
page was unusable at 375px before.
========================================================================== */
.inv-wrap.inv-pg {
display: grid; gap: 14px; max-width: 1100px; align-items: start;
grid-template-columns: 1fr 360px;
grid-template-areas:
"head head"
"editor cust"
"primary cust"
"more cust"
"hist hist";
}
.inv-head { grid-area: head; }
.inv-editor { grid-area: editor; }
.inv-cust { grid-area: cust; align-self: start; }
.inv-act-primary { grid-area: primary; }
.inv-act-more { grid-area: more; }
.inv-hist { grid-area: hist; }
.inv-pg .inv-head { margin-bottom: 2px; }
.inv-title { margin: 0; font-family: 'Inter Tight', 'Inter', sans-serif; }
.inv-pg .inv-title { font-size: 30px; font-weight: 800; letter-spacing: -0.8px; }
.inv-head .inv-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.inv-head .lead { font-size: 13px; color: var(--muted); margin-top: 6px; }
.inv-head .banner { margin: 10px 0 0; }
.pill.pill-defect { background: #fde7ee; color: #c8254e; }
.inv-grid2 { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.inv-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: start; }
.inv-editor .inv-grid3 { margin-top: 10px; }
.inv-cm-label { margin-top: 16px; }
.inv-fc-label { color: var(--accent); margin-top: 20px; }
.inv-editor textarea.field { min-height: 70px; }
.inv-cust-name { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.inv-cust-btns { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.inv-assign-form { margin-top: 12px; }
input.field.field-nomatch { border-color: var(--accent); }
.inv-act-primary, .inv-act-more { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inv-act-more .inv-del { color: #c8254e; margin-left: auto; }
.inv-act-more input.field[name="note"] { max-width: 190px; }
.inv-hist > summary { cursor: pointer; list-style: none; }
.inv-hist > summary::-webkit-details-marker { display: none; }
.inv-hist > summary .card-title { margin: 0; }
.inv-hist-n {
font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
background: rgba(20, 16, 26, .08); color: var(--muted); margin-left: 2px;
}
.inv-hist-row { display: flex; gap: 14px; padding: 10px 0; border-top: 1px solid rgba(20, 16, 26, 0.08); }
.inv-hist-meta { min-width: 160px; color: var(--muted); font-size: 12px; }
.inv-hist-old { color: var(--muted2); text-decoration: line-through; }
.inv-hist-new { color: var(--accent); font-weight: 600; }
@media (max-width: 900px) {
.inv-wrap.inv-pg {
grid-template-columns: 1fr;
grid-template-areas: "head" "editor" "cust" "primary" "more" "hist";
}
.inv-grid3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.inv-grid2, .inv-grid3 { grid-template-columns: 1fr; }
.inv-pg .inv-title { font-size: 22px; }
.inv-act-primary .hdr-btn { min-height: 46px; flex: 1 1 100%; justify-content: center; }
.inv-act-more .hdr-btn { min-height: 44px; }
.inv-act-more .inv-del { margin-left: 0; }
.inv-act-more input.field[name="note"] { max-width: none; flex: 1 1 100%; }
}
/* ---- drawer flavour of the same partial ---------------------------------- */
/* The drawer IS the glass, so nested cards drop their chrome and become
border-separated sections (glass-on-glass is muddy at phone width).
overflow:visible matters — .glass sets overflow:hidden, which would clip
the sticky save bar. min-height:100% makes the bar sit at the bottom even
when the content is shorter than the scrollport. */
.inv-wrap.inv-drw { display: flex; flex-direction: column; gap: 0; min-height: 100%; }
.inv-drw .inv-head { order: 1; }
.inv-drw .inv-cust { order: 2; }
.inv-drw .inv-editor { order: 3; }
.inv-drw .inv-act-more { order: 4; }
.inv-drw .inv-hist { order: 5; }
.inv-drw .inv-act-primary { order: 6; margin-top: auto; }
.inv-drw .inv-title { font-size: 21px; font-weight: 800; letter-spacing: -0.5px; }
.inv-drw > .glass, .inv-drw > details.glass {
background: transparent; border: 0; border-radius: 0; box-shadow: none;
-webkit-backdrop-filter: none; backdrop-filter: none;
overflow: visible; padding: 14px 0;
border-top: 1px solid rgba(20, 16, 26, .09);
}
.inv-drw > .glass::before { display: none; }
.inv-drw .inv-act-more { padding: 14px 0; border-top: 1px solid rgba(20, 16, 26, .09); }
.inv-drw .inv-grid3, .inv-drw .inv-grid2 { grid-template-columns: 1fr 1fr; }
.inv-drw .inv-act-primary {
position: sticky; bottom: 0; z-index: 3;
margin: 0 -20px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
background: var(--glass-bg-strong);
border-top: 1px solid rgba(20, 16, 26, .10);
box-shadow: 0 -8px 20px rgba(60, 24, 48, .08);
}
.inv-drw .inv-act-primary .hdr-btn { flex: 1 1 auto; min-height: 46px; justify-content: center; }
@media (max-width: 640px) {
.inv-drw .inv-grid3, .inv-drw .inv-grid2 { grid-template-columns: 1fr; }
.inv-drw .inv-act-primary { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
}
/* ==========================================================================
Right-side club drawer. Mirrors the .sidebar slide-in precedent but at
z-index 70/71/72 so it always stacks above the mobile nav overlay (55/60).
========================================================================== */
/* MUST come first: .drw{display:flex} would otherwise beat the UA [hidden]
rule and leave the closed drawer's fields in the tab order. */
.drw[hidden], .drw-scrim[hidden] { display: none !important; }
/* NON-MODAL on desktop: the drawer is a side panel, the list keeps working.
The scrim only exists <=900px, where the sheet covers the whole screen. */
:root { --drw-w: min(560px, 92vw); }
@media (min-width: 1700px) { :root { --drw-w: 720px; } }
.drw-scrim { display: none; }
/* Wide screens (sidebar + panel + a usable ~720px list): reflow the content so
the panel covers nothing at all. Narrower desktops keep their full table
layout and the panel floats over its right edge instead — squeezing a
~960px table into ~400px is worse than overlapping it. Either way there is
no scrim, so the list and the filters stay scrollable and clickable. */
@media (min-width: 901px) {
/* Reflow, always: the panel must never cover the list or the filter chips.
The table wrapper already scrolls horizontally, and the two lowest-value
columns collapse below 1700px to buy back the room. */
html.drw-open .main { margin-right: var(--drw-w); }
.main { transition: margin-right .26s cubic-bezier(.22, .61, .36, 1); }
}
@media (min-width: 901px) and (max-width: 1699px) {
html.drw-open .col-import, html.drw-open .col-comment { display: none; }
}
@media (max-width: 900px) {
:root { --drw-w: 100vw; }
.drw-scrim {
display: block; position: fixed; inset: 0; z-index: 70;
background: rgba(20, 16, 26, .42);
opacity: 0; transition: opacity .22s ease;
}
.drw-scrim.open { opacity: 1; }
}
.drw {
position: fixed; top: 0; right: 0; z-index: 71;
height: 100vh; /* pre-Safari-15.4 fallback */
height: 100dvh;
height: var(--drw-h, 100dvh); /* visualViewport: soft keyboard aware */
width: var(--drw-w);
display: flex; flex-direction: column;
background: var(--glass-bg-strong);
border-left: 1px solid var(--glass-border);
border-radius: 24px 0 0 24px;
-webkit-backdrop-filter: blur(40px) saturate(170%);
backdrop-filter: blur(40px) saturate(170%);
box-shadow: -18px 0 48px rgba(60, 24, 48, .22), inset 1px 0 0 rgba(255, 255, 255, .9);
transform: translateX(102%);
transition: transform .26s cubic-bezier(.22, .61, .36, 1);
}
.drw.open { transform: translateX(0); }
.drw-top {
flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
padding: calc(12px + env(safe-area-inset-top)) 16px 10px;
border-bottom: 1px solid rgba(20, 16, 26, .08);
}
.drw-num {
flex: 1 1 auto; min-width: 0; font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: 15px; font-weight: 800; letter-spacing: -0.3px; color: var(--muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drw-ic {
width: 40px; height: 40px; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 12px; border: 1px solid var(--glass-border);
background: rgba(255, 255, 255, .78); color: var(--muted);
cursor: pointer; font-family: inherit;
}
.drw-ic:hover { color: var(--accent); border-color: var(--accent); background: #fff; }
.drw-ic:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.drw-body {
flex: 1 1 auto; min-height: 0; overflow-y: auto;
-webkit-overflow-scrolling: touch; overscroll-behavior: contain;
padding: 14px 20px 0; /* 0 bottom: the sticky bar carries it */
}
.drw-body:focus { outline: none; }
.drw-body.is-busy { pointer-events: none; opacity: .6; }
.drw-skel { padding: 8px 0; }
.drw-skel i {
display: block; height: 14px; border-radius: 7px; margin-bottom: 11px;
background: linear-gradient(90deg, rgba(20,16,26,.07), rgba(20,16,26,.14), rgba(20,16,26,.07));
background-size: 200% 100%; animation: drwShim 1.1s linear infinite;
}
.drw-skel i:nth-child(1) { width: 45%; height: 24px; }
.drw-skel i:nth-child(3) { width: 90%; height: 44px; }
.drw-skel i:nth-child(4) { width: 90%; height: 44px; }
.drw-skel i:nth-child(5) { width: 60%; }
@keyframes drwShim { to { background-position: -200% 0; } }
.drw-toast {
position: fixed; z-index: 72; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom));
transform: translateX(-50%) translateY(18px);
max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 14px;
font-size: 13px; font-weight: 600; color: #fff; background: rgba(20, 16, 26, .90);
box-shadow: var(--glass-shadow);
opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.drw-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.drw-toast.err { background: #a83232; }
.drw-toast a { color: #fff; text-decoration: underline; margin-left: 10px; }
/* Scroll lock. Desktop: overflow only (body carries a fixed wallpaper, so
position:fixed there would shift it). <=900px additionally position:fixed
with a saved offset — the only reliable iOS rubber-band lock. */
html.drw-lock, html.drw-lock body { overflow: hidden; }
html.drw-lock-fixed body { position: fixed; left: 0; right: 0; width: 100%; }
/* the club currently open in the drawer */
#inv-tbody tr.inv-row-active > td { background: rgba(230, 40, 95, .07); }
#inv-tbody tr.inv-row-active > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
/* List-row feedback after a drawer mutation */
#inv-tbody tr.inv-row-flash > td { animation: invRowFlash 1.2s ease-out; }
@keyframes invRowFlash { from { background: rgba(230, 40, 95, .18); } to { background: transparent; } }
#inv-tbody tr.inv-row-leaving { opacity: 0; transition: opacity .18s ease; }
@media (max-width: 900px) {
.drw { border-radius: 0; border-left: 0; }
.drw-body { padding: 14px 16px 0; }
}
@media (prefers-reduced-motion: reduce) {
.drw, .drw-scrim, .drw-toast { transition-duration: .01ms; }
.drw-skel i, #inv-tbody tr.inv-row-flash > td { animation: none; }
}
/* ---- Fitting V2: recommendation-first detail layout ---------------------- */
/* The editable nine-field specification is the work; the read-only test result
is reference. So the form gets the wide column and its fields sit in a grid
instead of one very tall stack. */
.fit-two { display: grid; grid-template-columns: 1fr 420px; gap: 14px; }
.rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 12px; }
.rec-grid .section-label { margin-top: 0; }
@media (max-width: 1100px) { .fit-two { grid-template-columns: 1fr; } }
/* Production review: paired values stay next to their labels at every width. */
.review-filters, .review-actions, .review-card-head { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.review-filters { margin-bottom:18px; align-items:flex-end; }
.review-filters label { display:grid; gap:6px; font-size:12px; color:var(--muted); }
.review-actions { justify-content:space-between; margin:16px 0; font-size:13px; }
.review-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); gap:16px; }
.review-card { min-width:0; }
.review-card-head { justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.review-card-head h2 { font-size:19px; margin:0 0 5px; }
.review-identity, .review-help { color:var(--muted); font-size:12px; line-height:1.6; }
.review-identity { margin-bottom:6px; }
.review-comparison { width:100%; table-layout:fixed; border-collapse:collapse; font-size:13px; }
.review-comparison th, .review-comparison td { text-align:left; padding:10px 8px; vertical-align:top; overflow-wrap:anywhere; border-bottom:1px solid rgba(20,16,26,.12); }
.review-comparison thead th { font-size:11px; color:var(--muted); }
.review-comparison tbody th { font-weight:500; }
.review-comparison small { display:block; font-size:10px; margin-top:3px; color:#955014; }
.review-difference { background:rgba(222,151,38,.12); }
.review-note { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; margin-top:12px; padding:10px; background:rgba(230,40,95,.05); border-radius:10px; }
.review-blocked { font-size:12px; color:#955014; }
.profile-sections { display:grid; gap:12px; margin-top:16px; }
.profile-section { border:1px solid rgba(20,16,26,.12); border-radius:14px; background:rgba(255,255,255,.3); padding:14px; }
.profile-section summary { cursor:pointer; font-weight:600; font-size:14px; }
.profile-answers { margin:12px 0 0; display:grid; gap:0; }
.profile-answer { padding:10px 0; border-top:1px solid rgba(20,16,26,.12); }
.profile-answer dt { color:var(--muted); font-size:12px; line-height:1.5; margin-bottom:4px; }
.profile-answer dd { margin:0; font-size:14px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.inv-copy-dialog { border:1px solid var(--glass-border); border-radius:var(--radius); background:var(--glass-bg-strong); color:var(--ink); box-shadow:var(--glass-shadow); padding:24px; width: min(560px, calc(100vw - 24px)); max-height:calc(100dvh - 32px); overflow:auto; }
.inv-copy-dialog::backdrop { background:rgba(34,20,32,.32); backdrop-filter:blur(5px); }
.inv-copy-dialog h2 { font-size:24px; margin:8px 0 12px; }
.inv-copy-dialog p { font-size:13px; line-height:1.6; color:var(--muted); }
.inv-copy-fields { display:grid; gap:10px; margin:18px 0; }
.inv-copy-field { display:flex; align-items:center; gap:12px; padding:12px; background:color-mix(in srgb, var(--accent) 6%, transparent); border:1px solid color-mix(in srgb, var(--accent) 15%, transparent); border-radius:14px; }
.inv-copy-field input { accent-color:var(--accent); width:18px; height:18px; }
.inv-copy-field span { flex:1; font-size:13px; }
.inv-copy-field b { font-size:14px; min-width:0; overflow-wrap:anywhere; }
.inv-copy-items { list-style:none; padding:0; margin:8px 0 16px; }
.inv-copy-items li { border-bottom:1px solid rgba(20,16,26,.08); padding:10px 0; font-size:13px; }
.inv-copy-items small { display:block; color:var(--muted2); margin-top:4px; }
.inv-copy-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:20px; }
.inv-copy-message { color:var(--error); font-size:13px; margin:8px 0; }
@media(max-width:600px) { .inv-copy-dialog { padding:18px; } .inv-copy-actions .hdr-btn { flex:1 1 100%; justify-content:center; } }