/* ==========================================================================
   Emcube portal design system
   Brand derived from the Emcube logo: coral icing, amber glaze, plum outline.
   Bootstrap is the grid/utility/JS substrate; everything visual is defined here.
   Light theme only for now — every value is a custom property, so adding a
   dark theme later is a second :root block, not a rewrite.
   ========================================================================== */

/* --- Typeface (self-hosted; same family as the POS app) ------------------ */
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/urbanist-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/urbanist-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/urbanist-600.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/urbanist-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* --- Tokens ------------------------------------------------------------- */
:root {
    /* Brand — coral. 500 is the logo colour (display only, 3.1:1).
       700 is the interactive step: 4.63:1 both as text on white and as a
       fill under white text, so buttons/links/focus all use it. */
    --coral-50:  #fff1f0;
    --coral-100: #ffe0dd;
    --coral-200: #ffc2bc;
    --coral-300: #ff9a92;
    --coral-400: #fe7068;
    --coral-500: #fe5656;
    --coral-600: #e4483f;
    --coral-700: #d33f38;
    --coral-800: #b53430;
    --coral-900: #8e2926;

    /* Brand — amber (logo glaze). 700 is the readable step. */
    --amber-50:  #fdf8ed;
    --amber-100: #faf1db;
    --amber-200: #f5e3b7;
    --amber-300: #efd18b;
    --amber-400: #eac367;
    --amber-500: #e7bc54;
    --amber-600: #dda51f;
    --amber-700: #ab8018;
    --amber-800: #7c5d11;

    /* Brand — plum (logo outline). The dark chrome. */
    --plum-500: #6b2f68;
    --plum-700: #431540;
    --plum-800: #350f33;
    --plum-900: #2b0d2a;

    /* Neutrals */
    --gray-25:  #fcfcfd;
    --gray-50:  #f7f7f9;
    --gray-100: #f1f0f4;
    --gray-200: #e6e4ea;
    --gray-300: #d3d0da;
    --gray-400: #a9a4b3;
    --gray-500: #7a7280;
    --gray-600: #5e5566;
    --gray-700: #453e4d;
    --gray-800: #2e2935;
    --gray-900: #1a1420;

    /* Status — reserved; never reused as a chart series */
    --good:     #0f7a3d;
    --good-bg:  #e6f4ec;
    --warning:  #9a6700;
    --warning-bg: #fdf3d7;
    --serious:  #b45309;
    --serious-bg: #fdeddc;
    --critical: #c02626;
    --critical-bg: #fce9e9;
    --info:     #1e5aa8;
    --info-bg:  #e7f0fb;

    /* Semantic surfaces & ink */
    --surface:        #ffffff;
    --surface-sunken: var(--gray-50);
    --page-bg:        var(--gray-50);
    --border:         var(--gray-200);
    --border-strong:  var(--gray-300);

    --text-primary:   var(--gray-900);   /* 18.0:1 on white */
    --text-secondary: var(--gray-600);   /*  7.1:1 */
    --text-muted:     var(--gray-500);   /*  4.6:1 */
    --text-inverse:   #ffffff;

    --accent:         var(--coral-700);
    --accent-hover:   var(--coral-800);
    --accent-subtle:  var(--coral-50);

    /* Sidebar (plum chrome) — muted step clears 7.9:1, fixing the old 3.4:1 */
    --sidebar-bg:       var(--plum-900);
    --sidebar-text:     #ede8ef;
    --sidebar-muted:    #b8a9be;
    --sidebar-hover-bg: rgba(255, 255, 255, .07);
    --sidebar-active-bg: rgba(254, 86, 86, .16);

    /* Spacing — 4px base */
    --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
    --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;  --sp-10: 2.5rem;
    --sp-12: 3rem;

    /* Type scale */
    --font-sans: 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fs-xs: .75rem;   --fs-sm: .8125rem; --fs-base: .9375rem;
    --fs-md: 1.0625rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem;
    --fs-2xl: 1.875rem; --fs-hero: 2.75rem;
    --lh-tight: 1.2; --lh-normal: 1.5;

    /* Radius */
    --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

    /* Elevation */
    --shadow-1: 0 1px 2px rgba(26, 20, 32, .06), 0 1px 3px rgba(26, 20, 32, .04);
    --shadow-2: 0 2px 4px rgba(26, 20, 32, .05), 0 4px 12px rgba(26, 20, 32, .07);
    --shadow-3: 0 8px 24px rgba(26, 20, 32, .12), 0 2px 6px rgba(26, 20, 32, .06);

    --focus-ring: 0 0 0 3px rgba(211, 63, 56, .35);

    --dur-fast: .12s; --dur: .2s;
    --sidebar-w: 248px;

    /* Bootstrap bridge — its components pick up the brand automatically */
    --bs-primary: var(--coral-700);
    --bs-primary-rgb: 211, 63, 56;
    --bs-body-bg: var(--page-bg);
    --bs-body-color: var(--text-primary);
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: var(--fs-base);
    --bs-border-color: var(--border);
    --bs-border-radius: var(--r-md);
    --bs-link-color: var(--accent);
    --bs-link-hover-color: var(--accent-hover);
}

@media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 0s; --dur: 0s; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Base --------------------------------------------------------------- */
body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--text-primary);
    background: var(--page-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: var(--lh-tight); color: var(--text-primary); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--accent);
}

/* Skip link — first tab stop */
.skip-link {
    position: absolute; left: var(--sp-2); top: -3rem;
    z-index: 2000; padding: var(--sp-2) var(--sp-4);
    background: var(--surface); color: var(--accent);
    border-radius: var(--r-md); box-shadow: var(--shadow-2);
    font-weight: 600; transition: top var(--dur);
}
.skip-link:focus { top: var(--sp-2); }

/* --- Shell -------------------------------------------------------------- */
.em-shell { display: flex; min-height: 100vh; }

.em-sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.em-brand {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
    color: #fff; font-weight: 700; font-size: var(--fs-md);
    letter-spacing: .02em;
}
.em-brand img { width: 34px; height: 34px; object-fit: contain; }
.em-brand:hover { color: #fff; text-decoration: none; }
.em-brand small {
    display: block; font-size: var(--fs-xs); font-weight: 500;
    color: var(--sidebar-muted); letter-spacing: .06em; text-transform: uppercase;
}

.em-nav { padding: 0 var(--sp-3) var(--sp-6); flex: 1; }
.em-nav-section {
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: .09em;
    text-transform: uppercase; color: var(--sidebar-muted);
    padding: var(--sp-5) var(--sp-3) var(--sp-2);
}
.em-nav a {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: .5rem var(--sp-3); margin-bottom: 2px;
    color: var(--sidebar-text); border-radius: var(--r-md);
    font-size: var(--fs-base); font-weight: 500;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.em-nav a:hover { background: var(--sidebar-hover-bg); color: #fff; text-decoration: none; }
.em-nav a.active {
    background: var(--sidebar-active-bg); color: #fff; font-weight: 600;
    box-shadow: inset 3px 0 0 var(--coral-500);
}
.em-nav a i { font-size: 1.05rem; width: 1.25rem; text-align: center; opacity: .9; }

.em-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.em-topbar {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-6);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 100;
}
.em-topbar h1 { font-size: var(--fs-lg); font-weight: 600; margin: 0; }
.em-content { padding: var(--sp-6); flex: 1; }
@media (max-width: 575px) { .em-content, .em-topbar { padding-left: var(--sp-4); padding-right: var(--sp-4); } }

/* --- Cards -------------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: var(--sp-4) var(--sp-5);
    font-weight: 600;
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.card-header h2, .card-header h3 { font-size: var(--fs-md); margin: 0; }
.card-body { padding: var(--sp-5); }
.card-footer { background: transparent; border-top: 1px solid var(--border); padding: var(--sp-3) var(--sp-5); }

.em-card-sub { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 400; }

/* --- Page header -------------------------------------------------------- */
.em-page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5);
}
.em-page-head .lead-text { color: var(--text-secondary); font-size: var(--fs-base); margin: 0; }

/* --- Stat tiles --------------------------------------------------------- */
.em-stats { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.em-stat {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: var(--sp-5);
    box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: var(--sp-2);
}
.em-stat-label {
    font-size: var(--fs-sm); color: var(--text-secondary);
    font-weight: 500; letter-spacing: .01em;
}
.em-stat-value {
    font-size: var(--fs-2xl); font-weight: 600; line-height: 1.1;
    color: var(--text-primary);
    /* proportional figures on purpose: tabular-nums makes big numbers look loose */
}
.em-stat-foot { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.em-delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.em-delta.up { color: var(--good); }
.em-delta.down { color: var(--critical); }
.em-delta.flat { color: var(--text-muted); }
.em-stat-note { color: var(--text-muted); }

.em-hero {
    font-size: var(--fs-hero); font-weight: 700; line-height: 1.05;
    color: var(--text-primary); letter-spacing: -.02em;
}

/* --- Tables ------------------------------------------------------------- */
.em-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table {
    --bs-table-bg: transparent;
    margin: 0; font-size: var(--fs-base); color: var(--text-primary);
}
.table > thead > tr > th {
    font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-muted);
    background: var(--gray-50); border-bottom: 1px solid var(--border);
    padding: var(--sp-3) var(--sp-4); white-space: nowrap;
}
.table > tbody > tr > td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table > tbody > tr:hover > td { background: var(--gray-25); }
.table tfoot td {
    font-weight: 600; border-top: 2px solid var(--border);
    background: var(--gray-50); padding: var(--sp-3) var(--sp-4);
}
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .em-row-title { font-weight: 600; }

/* --- Badges ------------------------------------------------------------- */
.em-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px .5rem; border-radius: var(--r-pill);
    font-size: var(--fs-xs); font-weight: 600; line-height: 1.5;
    white-space: nowrap;
}
.em-badge.good     { background: var(--good-bg);     color: var(--good); }
.em-badge.warning  { background: var(--warning-bg);  color: var(--warning); }
.em-badge.critical { background: var(--critical-bg); color: var(--critical); }
.em-badge.info     { background: var(--info-bg);     color: var(--info); }
.em-badge.neutral  { background: var(--gray-100);    color: var(--text-secondary); }
.em-badge.brand    { background: var(--coral-50);    color: var(--coral-800); }
.em-badge.code     { background: var(--plum-900); color: #fff; font-family: ui-monospace, SFMono-Regular, monospace; letter-spacing: .03em; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
    font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-base);
    border-radius: var(--r-md); padding: .45rem .9rem;
    transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-outline-secondary { color: var(--text-secondary); border-color: var(--border-strong); background: var(--surface); }
.btn-outline-secondary:hover { background: var(--gray-100); color: var(--text-primary); border-color: var(--border-strong); }
.btn-outline-primary { color: var(--accent); border-color: var(--coral-200); background: var(--surface); }
.btn-outline-primary:hover { background: var(--coral-50); color: var(--accent-hover); border-color: var(--coral-300); }
.btn-light { background: var(--gray-100); border-color: transparent; color: var(--text-secondary); }
.btn-light:hover { background: var(--gray-200); color: var(--text-primary); }
.btn-sm { padding: .3rem .65rem; font-size: var(--fs-sm); }
.btn-icon { padding: .35rem .5rem; line-height: 1; }

/* --- Forms -------------------------------------------------------------- */
.form-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--sp-1); }
.form-control, .form-select {
    font-family: var(--font-sans); font-size: var(--fs-base);
    border: 1px solid var(--border-strong); border-radius: var(--r-md);
    padding: .45rem .7rem; color: var(--text-primary); background-color: var(--surface);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
/* Keep room for the chevron — the padding shorthand above would otherwise let
   the selected text run underneath it. */
.form-select { padding-right: 2.25rem; }
.form-select-sm { padding-right: 2rem; }
.form-control::placeholder { color: var(--gray-400); }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--critical); }
.em-field-error { font-size: var(--fs-sm); color: var(--critical); margin-top: var(--sp-1); }
.em-field-help { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-1); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { box-shadow: var(--focus-ring); border-color: var(--accent); }

/* --- Filter bar --------------------------------------------------------- */
.em-filters {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-5); box-shadow: var(--shadow-1);
}

/* --- Empty state -------------------------------------------------------- */
.em-empty { text-align: center; padding: var(--sp-10) var(--sp-5); color: var(--text-muted); }
.em-empty i { font-size: 2rem; color: var(--gray-300); display: block; margin-bottom: var(--sp-3); }
.em-empty-title { font-weight: 600; color: var(--text-secondary); margin-bottom: var(--sp-1); }
.em-empty p { margin: 0; font-size: var(--fs-sm); }

/* --- Toasts ------------------------------------------------------------- */
.em-toasts {
    position: fixed; top: var(--sp-5); right: var(--sp-5); z-index: 1080;
    display: flex; flex-direction: column; gap: var(--sp-2); max-width: min(420px, calc(100vw - 2rem));
}
.em-toast {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid var(--gray-400);
    border-radius: var(--r-md); box-shadow: var(--shadow-3);
    padding: var(--sp-3) var(--sp-4); font-size: var(--fs-base);
    animation: em-toast-in var(--dur) ease-out;
}
.em-toast.success  { border-left-color: var(--good); }
.em-toast.error    { border-left-color: var(--critical); }
.em-toast.warning  { border-left-color: var(--warning); }
.em-toast .bi { font-size: 1.1rem; line-height: 1.35; }
.em-toast.success .bi { color: var(--good); }
.em-toast.error .bi   { color: var(--critical); }
.em-toast.warning .bi { color: var(--warning); }
.em-toast-body { flex: 1; }
.em-toast-close { background: none; border: 0; color: var(--text-muted); padding: 0 2px; line-height: 1; }
@keyframes em-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --- Modals ------------------------------------------------------------- */
.modal-content { border: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-3); }
.modal-header { border-bottom: 1px solid var(--border); padding: var(--sp-5) var(--sp-5) var(--sp-4); }
.modal-title { font-size: var(--fs-md); font-weight: 600; }
.modal-body { padding: var(--sp-5); }
.modal-footer { border-top: 1px solid var(--border); padding: var(--sp-4) var(--sp-5); gap: var(--sp-2); }

/* --- Charts ------------------------------------------------------------- */
.em-chart { position: relative; }
.em-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.em-chart .grid line { stroke: var(--gray-200); stroke-width: 1; }
.em-chart .axis line, .em-chart .axis path { stroke: var(--gray-300); stroke-width: 1; }
.em-chart .tick-label { font-size: 11px; fill: var(--text-muted); font-variant-numeric: tabular-nums; }
.em-chart .series-label { font-size: 11px; fill: var(--text-secondary); font-weight: 600; }
.em-chart .hit { fill: transparent; cursor: pointer; }
.em-chart .mark { transition: opacity var(--dur-fast); }
.em-chart .bar-group:hover .mark { opacity: .85; }

.em-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-3); }
.em-legend-item { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-secondary); }
.em-legend-key { width: 12px; height: 3px; border-radius: 2px; flex: 0 0 auto; }
.em-legend-key.rect { height: 10px; width: 10px; border-radius: 3px; }

.em-tooltip {
    position: absolute; pointer-events: none; z-index: 20;
    background: var(--gray-900); color: #fff;
    border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm); box-shadow: var(--shadow-3);
    opacity: 0; transition: opacity var(--dur-fast); white-space: nowrap;
    transform: translate(-50%, -100%);
}
.em-tooltip.show { opacity: 1; }
.em-tooltip .tt-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.em-tooltip .tt-label { color: var(--gray-300); font-size: var(--fs-xs); }
.em-tooltip .tt-row { display: flex; align-items: center; gap: var(--sp-2); }
.em-tooltip .tt-key { width: 10px; height: 2px; border-radius: 1px; flex: 0 0 auto; }

.em-chart-toggle {
    background: none; border: 0; color: var(--text-muted);
    font-size: var(--fs-sm); font-weight: 600; padding: 2px 6px; border-radius: var(--r-sm);
}
.em-chart-toggle:hover { color: var(--accent); background: var(--coral-50); }

/* --- Meter / progress --------------------------------------------------- */
.em-meter { height: 6px; border-radius: var(--r-pill); background: var(--gray-200); overflow: hidden; }
.em-meter > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent); }

/* --- Auth (login) ------------------------------------------------------- */
.em-auth {
    min-height: 100vh; display: grid; place-items: center;
    padding: var(--sp-6);
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(254, 86, 86, .18), transparent 60%),
        radial-gradient(900px 500px at 100% 110%, rgba(231, 188, 84, .16), transparent 55%),
        var(--plum-900);
}
.em-auth-card {
    width: 100%; max-width: 400px;
    background: var(--surface); border-radius: var(--r-xl);
    box-shadow: var(--shadow-3); padding: var(--sp-8);
}
.em-auth-logo { display: block; width: 92px; height: auto; margin: 0 auto var(--sp-4); }
.em-auth h1 { font-size: var(--fs-xl); text-align: center; margin-bottom: var(--sp-1); }
.em-auth .sub { text-align: center; color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }
.em-auth-foot { text-align: center; margin-top: var(--sp-6); color: rgba(255,255,255,.6); font-size: var(--fs-sm); }

.em-pw-wrap { position: relative; }
.em-pw-wrap .form-control { padding-right: 2.5rem; }
.em-pw-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: var(--text-muted); padding: .25rem .4rem; border-radius: var(--r-sm);
}
.em-pw-toggle:hover { color: var(--text-primary); }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 991.98px) {
    .em-sidebar {
        position: fixed; left: 0; top: 0; z-index: 1045;
        transform: translateX(-100%); transition: transform var(--dur);
        box-shadow: var(--shadow-3);
    }
    .em-sidebar.open { transform: none; }
    .em-backdrop {
        position: fixed; inset: 0; background: rgba(26, 20, 32, .5);
        z-index: 1040; opacity: 0; pointer-events: none; transition: opacity var(--dur);
    }
    .em-backdrop.show { opacity: 1; pointer-events: auto; }
    body.em-locked { overflow: hidden; }
}
@media (min-width: 992px) { .em-backdrop { display: none; } }

/* --- Print -------------------------------------------------------------- */
@media print {
    .em-sidebar, .em-topbar, .em-toasts, .em-filters, .btn, .em-chart-toggle { display: none !important; }
    .em-shell { display: block; }
    .em-content { padding: 0; }
    .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
    body { background: #fff; }
}