/* Het palet van de winkel. De opmaak hieronder komt uit het goedgekeurde ontwerp en verwijst naar
   deze namen; zonder deze regel valt elke tint stil weg en staan de sterren, de chips en de
   soort-plaatjes kleurloos in beeld. Het accent is dat van het dashboard, zodat de winkel
   meekleurt met het thema; de overige tinten zijn die van het ontwerp. */
.cst-front, .cst-dlg {
    --acc: var(--mud-palette-primary, #F5A623);
    --blue: #60A5FA;
    --green: #34D399;
    --red: #F87171;
    --purple: #a78bfa;
    --amber: #FBBF24;
    --teal: #2DD4BF;
    --pink: #F472B6;
}

/* De aandachtstrook van de winkel staat onder elkaar en niet naast elkaar zoals bij de facturen:
   elke regel draagt een hele zin met een naam en een reden erin, en die wordt in een derde van de
   breedte onleesbaar. */
.cst-attn { grid-template-columns:1fr; }

/* Currently Store, hostkant. Alleen wat host-invoices.css nog niet heeft: de tegels, de
   aandachtstrook, de tabbladen en de tabellen komen daarvandaan (hsi-), zodat de twee
   verkoopkanalen ook op het oog bij elkaar horen. Wat hier staat is eigen aan de winkel: het
   soort-plaatje, het sterrencijfer, de schakelaar in een rij, de resterende tijd en de
   taalstippen. */

.cst-kind { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:9px; font-size:0.65rem; font-weight:600; white-space:nowrap; }
/* De tintkiezer in de itemdialoog: een rij bolletjes waarvan het eerste terugvalt op de tint van
   de soort. De gekozen tint krijgt een ring, zodat de keuze zichtbaar is zonder een label. */
.cst-accents { display:flex; gap:8px; flex-wrap:wrap; }
.cst-accent { width:26px; height:26px; border-radius:50%; border:2px solid transparent; background:var(--tint); cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; color:rgba(0,0,0,0.55); }
.cst-accent .mud-icon-root { font-size:0.9rem; }
.cst-accent:hover { border-color:rgba(255,255,255,0.35); }
.cst-accent.on { border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,0.18); }

/* De tekentjeskiezer: een raster met het teken zelf op de knop, want een naam zegt minder dan het
   teken. Het eerste vakje valt terug op het teken van de soort. */
/* De eigen invoer staat achter de snelle keuzes en heeft dezelfde maat, zodat de rij niet
   verspringt waar de keuze ophoudt en de vrije invoer begint. */
.cst-accent.kind { border-style:dashed; border-color:rgba(255,255,255,0.45); }
.cst-glyph.kind { border-style:dashed; }

.cst-accent-own { width:26px; height:26px; border-radius:50%; border:2px dashed rgba(255,255,255,0.35); background:transparent; padding:0; cursor:pointer; }
.cst-accent-own::-webkit-color-swatch-wrapper { padding:0; }
.cst-accent-own::-webkit-color-swatch { border:0; border-radius:50%; }
.cst-glyph-own { width:52px; border-style:dashed; font-size:0.8rem; text-align:center; color:rgba(255,255,255,0.85); }
.cst-glyph-own::placeholder { color:rgba(255,255,255,0.3); font-size:0.62rem; }

.cst-glyphs { display:flex; gap:6px; flex-wrap:wrap; }
.cst-glyph { width:30px; height:30px; border-radius:8px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); cursor:pointer; padding:0; font-size:0.95rem; line-height:1; display:flex; align-items:center; justify-content:center; }
.cst-glyph:hover { border-color:rgba(255,255,255,0.3); }
.cst-glyph.on { border-color:var(--mud-palette-primary); background:rgba(245,166,35,0.12); }

.cst-kind .mud-icon-root { font-size:0.85rem; }

.cst-slug { display:block; font-size:0.69rem; color:rgba(255,255,255,0.42); font-family:Consolas, monospace; }
.cst-target { font-family:Consolas, monospace; font-size:0.72rem; color:rgba(255,255,255,0.7); }
.cst-target.gone { color:#F87171; text-decoration:line-through; }
.cst-target-note { display:block; font-size:0.66rem; color:#F87171; }

.cst-opts { font-size:0.69rem; color:rgba(255,255,255,0.5); white-space:nowrap; }
.cst-from { font-size:0.68rem; color:rgba(255,255,255,0.45); }

.cst-promo { display:inline-flex; align-items:center; gap:5px; font-size:0.69rem; font-weight:600; color:#F87171; white-space:nowrap; }
.cst-promo .mud-icon-root { font-size:0.95rem; }
/* Alleen de cel die ook echt een dialoog opent wijst zichzelf aan als knop. Een lege cel krijgt
   een streepjesrand, want een grijs woord in een tabel ziet niemand als de enige ingang naar
   de kortingen aan. */
.cst-promo.act { cursor:pointer; }
.cst-promo.act:hover { color:#fff; }
.cst-promo.none { color:rgba(255,255,255,0.4); font-weight:400; border:1px dashed rgba(255,255,255,0.2); border-radius:8px; padding:2px 8px; }
.cst-promo.none.act:hover { color:rgba(255,255,255,0.85); border-color:rgba(245,166,35,0.55); background:rgba(245,166,35,0.08); }
.cst-promo.queued { color:rgba(255,255,255,0.55); font-weight:400; }

.cst-stars { display:inline-flex; align-items:center; gap:4px; font-size:0.7rem; color:rgba(255,255,255,0.55); white-space:nowrap; }
.cst-stars .s { color:#FBBF24; letter-spacing:-1px; font-size:0.76rem; }
.cst-stars .s i { font-style:normal; opacity:0.25; }
.cst-stars b { color:rgba(255,255,255,0.8); font-weight:600; }
.cst-stars.low b { color:var(--mud-palette-primary); }
.cst-stars.none { color:rgba(255,255,255,0.28); }

.cst-sw { display:inline-flex; align-items:center; gap:6px; font-size:0.69rem; font-weight:600; background:none; border:0; padding:0; cursor:pointer; font-family:inherit; }
.cst-sw i { width:28px; height:16px; border-radius:8px; background:rgba(255,255,255,0.15); position:relative; display:inline-block; font-style:normal; flex:none; transition:background 0.15s; }
.cst-sw i::after { content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:#fff; transition:left 0.15s; }
.cst-sw.on { color:#34D399; }
.cst-sw.on i { background:rgba(52,211,153,0.6); }
.cst-sw.on i::after { left:14px; }
.cst-sw.off { color:rgba(255,255,255,0.4); }
.cst-sw:disabled { cursor:default; opacity:0.55; }

.cst-drag { color:rgba(255,255,255,0.25); cursor:grab; user-select:none; }
.cst-row-off td { opacity:0.55; }

.cst-left .t { font-size:0.74rem; font-weight:600; color:rgba(255,255,255,0.8); white-space:nowrap; }
.cst-left .bar { height:4px; border-radius:3px; background:rgba(255,255,255,0.1); margin-top:5px; overflow:hidden; }
.cst-left .bar i { display:block; height:100%; border-radius:3px; background:#34D399; }
.cst-left.warn .t { color:var(--mud-palette-primary); }
.cst-left.warn .bar i { background:var(--mud-palette-primary); }
.cst-left.crit .t { color:#F87171; }
.cst-left.crit .bar i { background:#F87171; }
.cst-left.none .t { color:rgba(255,255,255,0.45); font-weight:400; }

.cst-renew { font-size:0.69rem; color:rgba(255,255,255,0.45); white-space:nowrap; }
.cst-renew.ready { color:#60A5FA; }

.cst-langs { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cst-lg { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.12); font-size:0.76rem; color:rgba(255,255,255,0.62); cursor:pointer; background:none; font-family:inherit; }
.cst-lg.on { border-color:rgba(245,166,35,0.5); background:rgba(245,166,35,0.12); color:var(--mud-palette-primary); font-weight:600; }
.cst-lg .dot { width:7px; height:7px; border-radius:50%; background:#34D399; flex:none; }
.cst-lg .dot.empty { background:rgba(255,255,255,0.2); }
.cst-lg .dot.part { background:#FBBF24; }
.cst-lg .req { font-style:normal; font-size:0.63rem; padding:1px 6px; border-radius:7px; background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.5); }
.cst-langhint { display:flex; align-items:center; gap:10px; font-size:0.71rem; color:rgba(255,255,255,0.45); line-height:1.5; }
.cst-langhint .sp { flex:1; }

.cst-kinds { display:flex; gap:6px; flex-wrap:wrap; }
.cst-k { padding:6px 11px; border-radius:9px; border:1px solid rgba(255,255,255,0.12); font-size:0.75rem; color:rgba(255,255,255,0.62); display:inline-flex; gap:6px; align-items:center; background:none; cursor:pointer; font-family:inherit; }
.cst-k.on { font-weight:600; }
.cst-k:disabled { cursor:default; opacity:0.4; }

.cst-sect { border-top:1px solid rgba(255,255,255,0.07); padding-top:14px; }
.cst-sect-h { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:rgba(255,255,255,0.5); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.cst-sect-h .c { font-weight:400; text-transform:none; letter-spacing:0; color:rgba(255,255,255,0.35); font-size:0.7rem; }

.cst-opt { display:grid; grid-template-columns:1.4fr 0.8fr 0.8fr 1fr 30px; gap:10px; align-items:end; padding-bottom:10px; }
.cst-part { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.05); font-size:0.78rem; }
.cst-part:last-child { border-bottom:0; }
.cst-part .nm { flex:1; }
.cst-part .nm b { display:block; font-weight:600; }
.cst-part .nm span { font-size:0.69rem; color:rgba(255,255,255,0.42); }
.cst-part .amt { font-variant-numeric:tabular-nums; white-space:nowrap; }
.cst-partsum { display:flex; justify-content:space-between; font-size:0.78rem; padding-top:10px; border-top:1px solid rgba(255,255,255,0.1); margin-top:4px; }
.cst-partsum b { font-variant-numeric:tabular-nums; }
.cst-partsum .adv { color:#34D399; }

.cst-review { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.06); }
.cst-review:last-child { border-bottom:0; }
.cst-review .body { flex:1; }
.cst-review .body b { display:block; font-weight:600; }
.cst-review .body p { margin:5px 0 0; font-size:0.78rem; color:rgba(255,255,255,0.72); line-height:1.55; }
.cst-review.hidden { opacity:0.5; }
.cst-reply { margin-top:8px; padding:9px 12px; border-radius:9px; background:rgba(245,166,35,0.07); border-left:2px solid var(--mud-palette-primary); font-size:0.76rem; }
.cst-reply span { display:block; font-size:0.67rem; color:rgba(255,255,255,0.4); margin-top:3px; }

/* ── De winkelvoorkant ──────────────────────────────────────────────────────────────────────────
   Overgenomen uit curr/mockups/currently-store-v6.html, met twee bereiken per regel: .cst-front
   voor de pagina en .cst-dlg voor de inhoud van de winkeldialogen. Die dialogen worden door de
   gedeelde schil naar document.body verplaatst en vallen dus buiten de pagina.

   Overgenomen en niet overgetypt, zodat de pagina echt gelijk is aan het goedgekeurde ontwerp. Wat
   er niet in staat: de eigen paginachrome van de mockup en de generieke knoppen, want die komen uit
   de paginaschil en uit PageActionButton. */
.cst-front .cnt, .cst-dlg .cnt { font-style:normal; font-size:0.64rem; padding:1px 7px; border-radius:9px; background:rgba(255,255,255,0.12); }
.cst-front /* ── Hero ── */ .hero, .cst-dlg /* ── Hero ── */ .hero { position:relative; overflow:hidden; border-radius:16px; border:1px solid rgba(245,166,35,0.28); background:linear-gradient(135deg, rgba(245,166,35,0.14), rgba(245,166,35,0.03) 55%, rgba(96,165,250,0.06)); padding:26px 32px 24px; margin-bottom:20px; }
.cst-front .hero::after, .cst-dlg .hero::after { content:""; position:absolute; right:-80px; top:-120px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, rgba(245,166,35,0.28), transparent 65%); }
.cst-front .hero .row, .cst-dlg .hero .row { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; position:relative; }
.cst-front .hero .ttl, .cst-dlg .hero .ttl { display:flex; align-items:center; gap:14px; }
.cst-front .hero .ico, .cst-dlg .hero .ico { width:46px; height:46px; border-radius:12px; background:rgba(245,166,35,0.18); color:var(--acc); display:flex; align-items:center; justify-content:center; font-size:22px; }
.cst-front .hero h4, .cst-dlg .hero h4 { font-size:1.7rem; font-weight:600; margin:0 0 4px; letter-spacing:-0.3px; }
.cst-front .hero .sub, .cst-dlg .hero .sub { font-size:0.86rem; opacity:0.6; max-width:600px; line-height:1.6; }
.cst-front .hero .side, .cst-dlg .hero .side { display:flex; gap:8px; align-items:center; }
.cst-front .searchbox, .cst-dlg .searchbox { position:relative; display:flex; align-items:center; }
.cst-front .searchbox .mag, .cst-dlg .searchbox .mag { position:absolute; left:11px; font-size:0.8rem; opacity:0.5; pointer-events:none; }
.cst-front .searchbox .search, .cst-dlg .searchbox .search { padding-left:32px; }
.cst-front .search, .cst-dlg .search { display:flex; align-items:center; gap:8px; background:rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.12); border-radius:10px; padding:9px 12px; width:250px; color:rgba(255,255,255,0.45); font-size:0.8rem; }
.cst-front /* ── Kolommen ── */ .cols, .cst-dlg /* ── Kolommen ── */ .cols { display:grid; grid-template-columns:230px 1fr; gap:18px; align-items:start; }
/* De balk links plakt onder de balk bovenaan het scherm, niet onder de bovenkant van het venster:
   die balk staat vast, dus met alleen een marge schuift de eerste regel eronder door. Past de
   balk niet in beeld, dan scrollt 'ie zelf, zodat de onderste categorie bereikbaar blijft. */
.cst-front .rail, .cst-dlg .rail { position:sticky; top:calc(var(--mud-appbar-height, 64px) + 16px); max-height:calc(100vh - var(--mud-appbar-height, 64px) - 32px); overflow-y:auto; background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:10px; }
.cst-front .nav, .cst-dlg .nav { display:flex; flex-direction:column; gap:2px; }
.cst-front .nav a, .cst-dlg .nav a { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; font-size:0.82rem; color:rgba(255,255,255,0.72); cursor:pointer; }
.cst-front .nav a .i, .cst-dlg .nav a .i { width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:13px; }
.cst-front .nav a i, .cst-dlg .nav a i { font-style:normal; margin-left:auto; font-size:0.64rem; padding:1px 7px; border-radius:9px; background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.5); }
.cst-front .nav a.on, .cst-dlg .nav a.on { background:rgba(245,166,35,0.14); color:var(--acc); font-weight:600; }
.cst-front .nav a.on i, .cst-dlg .nav a.on i { background:rgba(245,166,35,0.25); color:var(--acc); }
.cst-front .i.documenttemplate, .cst-dlg .i.documenttemplate { background:rgba(167,139,250,0.18); color:var(--purple); }
.cst-front .i.formtemplate, .cst-dlg .i.formtemplate { background:rgba(96,165,250,0.16); color:var(--blue); }
.cst-front .i.service, .cst-dlg .i.service { background:rgba(245,166,35,0.16); color:var(--acc); }
.cst-front .i.edition, .cst-dlg .i.edition { background:rgba(251,191,36,0.16); color:var(--amber); }
.cst-front .i.bundle, .cst-dlg .i.bundle { background:rgba(45,212,191,0.16); color:var(--teal); }
.cst-front .i.articlepack, .cst-dlg .i.articlepack { background:rgba(244,114,182,0.16); color:#F472B6; }
.cst-front .i.all, .cst-dlg .i.all { background:rgba(255,255,255,0.08); }
.cst-front .i.feature, .cst-dlg .i.feature { background:rgba(52,211,153,0.16); color:var(--green); }
.cst-front .i.sale, .cst-dlg .i.sale { background:rgba(248,113,113,0.16); color:var(--red); }
.cst-front .nav .sep, .cst-dlg .nav .sep { height:1px; background:rgba(255,255,255,0.06); margin:8px 4px; }
/* De producten binnen de gekozen soort: een trapje dieper, kleiner, en met een stipje in de kleur
   van die soort zodat de balk en de chip op de tegel dezelfde taal spreken. */
.cst-front .nav .sub, .cst-dlg .nav .sub { margin:2px 0 6px 12px; padding-left:10px; border-left:1px solid rgba(255,255,255,0.08); display:flex; flex-direction:column; gap:1px; }
.cst-front .nav .sub a, .cst-dlg .nav .sub a { padding:6px 9px; font-size:0.76rem; gap:8px; }
.cst-front .nav .sub .dot, .cst-dlg .nav .sub .dot { width:8px; height:8px; border-radius:2px; flex:none; }
/* Het gekozen product licht net zo op als de gekozen soort erboven, met een streepje links erbij
   zodat in een uitgeklapte lijst van acht in één blik te zien is waar je staat. De regel is een
   trapje specifieker dan die van de soort, want anders wint de maatvoering van .sub a ervan. */
.cst-front .nav .sub a.on, .cst-dlg .nav .sub a.on { background:rgba(245,166,35,0.14); color:var(--acc); font-weight:600; box-shadow:inset 2px 0 0 var(--acc); }
.cst-front .nav .sub a.on i, .cst-dlg .nav .sub a.on i { background:rgba(245,166,35,0.25); color:var(--acc); }
.cst-front .tog, .cst-dlg .tog { display:flex; align-items:center; gap:8px; padding:9px 10px; font-size:0.76rem; color:rgba(255,255,255,0.6); }
.cst-front .tog i, .cst-dlg .tog i { width:28px; height:16px; border-radius:8px; background:rgba(255,255,255,0.15); position:relative; display:inline-block; font-style:normal; flex:none; }
.cst-front .tog i::after, .cst-dlg .tog i::after { content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:#fff; }
.cst-front /* ── Uitgelicht ── */ .feat, .cst-dlg /* ── Uitgelicht ── */ .feat { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:12px; margin-bottom:26px; }
.cst-front .card, .cst-dlg .card { position:relative; border-radius:14px; border:1px solid rgba(255,255,255,0.09); overflow:hidden; padding:18px; display:flex; flex-direction:column; justify-content:flex-end; min-height:200px; transition:transform .12s, border-color .12s; }
/* Een uitgelichte kaart en een bundelkaart lichten op in hun eigen tint en niet in de huisstijlkleur
   zoals een tegel of een regel. Die twee dragen hun kleur al in het verloop, en een gele rand om een
   groene kaart leest als een tweede accent in plaats van als aanwijzen waar je muis staat. */
.cst-front .card:hover, .cst-dlg .card:hover { border-color:color-mix(in srgb, var(--tint, #F5A623) 55%, transparent); transform:translateY(-2px); }
/* De kleur van een uitgelichte kaart komt uit --tint, die het component zet: de eigen tint van het
   item, en anders die van zijn soort. De drie percentages zijn de oude vaste waarden, dus een item
   zonder eigen tint ziet er precies zo uit als altijd; wie er wel een invult ziet hem nu ook hier
   terug in plaats van alleen op de gewone tegel. De roze tweede stop van de grote kaart blijft
   staan: dat is de uitstraling van het uitgelichte blok en geen tint. */
.cst-front .card.big, .cst-dlg .card.big { background:linear-gradient(120deg, color-mix(in srgb, var(--tint) 28%, transparent), rgba(244,114,182,0.14) 60%, rgba(0,0,0,0.2)); }
.cst-front .card.p, .cst-dlg .card.p { background:linear-gradient(135deg, color-mix(in srgb, var(--tint) 28%, transparent), rgba(0,0,0,0.15)); }
.cst-front .card.o, .cst-dlg .card.o { background:linear-gradient(135deg, color-mix(in srgb, var(--tint) 26%, transparent), rgba(0,0,0,0.15)); }
.cst-front .card .k, .cst-dlg .card .k { font-size:0.64rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:rgba(255,255,255,0.7); }
.cst-front .card b, .cst-dlg .card b { font-size:1.15rem; font-weight:600; display:block; margin:6px 0 4px; }
.cst-front .card.big b, .cst-dlg .card.big b { font-size:1.45rem; }
.cst-front .card p, .cst-dlg .card p { margin:0 0 12px; font-size:0.78rem; color:rgba(255,255,255,0.7); line-height:1.5; max-width:420px; }
/* De voet van een uitgelichte kaart: het bedrag met de voorwaarde eronder, de beoordeling
   ernaast, en de knop tegen de rechterrand. Op een regel achter elkaar leest het als een
   opsomming en niet als een prijs met een knop erbij. De knop wordt door de knoppenschil van het
   dashboard getekend en draagt dus niet de klasse uit het ontwerp; daarom schuift hier het laatste
   kind naar rechts en niet een klasse. */
.cst-front .card .foot, .cst-dlg .card .foot { display:flex; align-items:flex-end; gap:14px; }
.cst-front .card .foot > *:last-child, .cst-dlg .card .foot > *:last-child { margin-left:auto; }
.cst-front .card .pr, .cst-dlg .card .pr { display:flex; flex-direction:column; line-height:1.3; font-size:1rem; font-weight:700; font-variant-numeric:tabular-nums; }
.cst-front .card .pr small, .cst-dlg .card .pr small { font-size:0.66rem; font-weight:400; color:rgba(255,255,255,0.55); }

.cst-front .card .pr s, .cst-dlg .card .pr s { font-weight:400; color:rgba(255,255,255,0.4); margin-right:6px; font-size:0.78rem; }
.cst-front .card .glyph, .cst-dlg .card .glyph { position:absolute; right:16px; top:12px; font-size:56px; opacity:0.35; }

.cst-front .badge, .cst-dlg .badge { position:absolute; top:10px; left:10px; font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; padding:3px 8px; border-radius:8px; background:rgba(0,0,0,0.45); color:#fff; z-index:2; }
.cst-front .badge.new, .cst-dlg .badge.new { background:var(--acc); color:#2b1e05; }
.cst-front .badge.pop, .cst-dlg .badge.pop { background:var(--pink); color:#2b0a1a; }
.cst-front .badge.owned, .cst-dlg .badge.owned { background:var(--green); color:#04321f; }
.cst-front .badge.sale, .cst-dlg .badge.sale { background:var(--red); color:#2b0505; }
.cst-front /* ── Secties ── */ .sec, .cst-dlg /* ── Secties ── */ .sec { margin-bottom:28px; }
.cst-front .sh, .cst-dlg .sh { display:flex; align-items:baseline; gap:12px; margin-bottom:12px; }
.cst-front .sh h3, .cst-dlg .sh h3 { font-size:1.02rem; font-weight:600; margin:0; display:flex; align-items:center; gap:9px; }
.cst-front .sh h3 .i, .cst-dlg .sh h3 .i { color:var(--acc); }
.cst-front .sh .sub, .cst-dlg .sh .sub { font-size:0.74rem; color:rgba(255,255,255,0.4); }
.cst-front .sh .all, .cst-dlg .sh .all { margin-left:auto; font-size:0.75rem; color:var(--acc); cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.cst-front .kind, .cst-dlg .kind { display:inline-flex; align-items:center; gap:5px; font-size:0.64rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; }
.cst-front .kind.documenttemplate, .cst-dlg .kind.documenttemplate { color:var(--purple); }
.cst-front .kind.formtemplate, .cst-dlg .kind.formtemplate { color:var(--blue); }
.cst-front .kind.service, .cst-dlg .kind.service { color:var(--acc); }
.cst-front .kind.feature, .cst-dlg .kind.feature { color:var(--green); }
.cst-front .kind.edition, .cst-dlg .kind.edition { color:var(--amber); }
.cst-front .kind.bundle, .cst-dlg .kind.bundle { color:var(--teal); }
.cst-front .price, .cst-dlg .price { display:flex; flex-direction:column; }
.cst-front .price b, .cst-dlg .price b { font-size:1.02rem; font-variant-numeric:tabular-nums; color:rgba(255,255,255,0.92); }
.cst-front .price span, .cst-dlg .price span { font-size:0.66rem; color:rgba(255,255,255,0.42); }
.cst-front .price s, .cst-dlg .price s { font-size:0.72rem; color:rgba(255,255,255,0.35); margin-right:6px; font-weight:400; }
/* ── Beoordeling: sterren plus aantal, alleen vanaf drie beoordelingen ── */
.cst-front .stars, .cst-dlg .stars { display:inline-flex; align-items:center; gap:5px; font-size:0.72rem; color:rgba(255,255,255,0.55); }
.cst-front .stars .s, .cst-dlg .stars .s { color:var(--amber); letter-spacing:-1px; font-size:0.78rem; }
.cst-front .stars .s i, .cst-dlg .stars .s i { font-style:normal; opacity:0.25; }
.cst-front .stars b, .cst-dlg .stars b { color:rgba(255,255,255,0.8); font-weight:600; font-variant-numeric:tabular-nums; }
.cst-front .stars.none, .cst-dlg .stars.none { color:rgba(255,255,255,0.3); font-size:0.7rem; }
.cst-front /* ── Tijdelijke actie ── */ .cdown, .cst-dlg /* ── Tijdelijke actie ── */ .cdown { display:inline-flex; align-items:center; gap:5px; font-size:0.68rem; font-weight:600; color:var(--red); }
.cst-front .cdown::before, .cst-dlg .cdown::before { content:"\23F1"; }
.cst-front /* Tegels */ .grid, .cst-dlg /* Tegels */ .grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.cst-front .tile, .cst-dlg .tile { position:relative; background:rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.09); border-radius:14px; padding:14px 14px 12px; display:flex; flex-direction:column; gap:9px; min-height:236px; transition:transform .12s; }
.cst-front .tile:hover, .cst-dlg .tile:hover { border-color:rgba(245,166,35,0.35); transform:translateY(-2px); }
.cst-front .tile .art, .cst-dlg .tile .art { height:112px; border-radius:10px; position:relative; overflow:hidden; background:linear-gradient(135deg, rgba(167,139,250,0.24), rgba(167,139,250,0.05)); }
.cst-front .tile .art .sheet, .cst-dlg .tile .art .sheet { position:absolute; left:18px; right:18px; top:14px; bottom:-10px; background:#fff; border-radius:4px 4px 0 0; box-shadow:0 4px 14px rgba(0,0,0,0.4); padding:10px; }
.cst-front .tile .art .sheet i, .cst-dlg .tile .art .sheet i { display:block; height:5px; border-radius:2px; background:#ddd; margin-bottom:5px; }
.cst-front .tile .art .sheet i.t, .cst-dlg .tile .art .sheet i.t { width:55%; height:8px; background:var(--tint, #a78bfa); margin-bottom:8px; }
.cst-front .tile .art .sheet i.s, .cst-dlg .tile .art .sheet i.s { width:80%; }
.cst-front .tile .art .sheet i.m, .cst-dlg .tile .art .sheet i.m { width:65%; }
.cst-front .tile .art .sheet .blk, .cst-dlg .tile .art .sheet .blk { height:26px; border-radius:3px; background:color-mix(in srgb, var(--tint, #a78bfa) 16%, #fff); margin-top:8px; }
.cst-front .tile .nm, .cst-dlg .tile .nm { font-size:0.92rem; font-weight:600; color:rgba(255,255,255,0.92); }
.cst-front .tile .tl, .cst-dlg .tile .tl { font-size:0.73rem; color:rgba(255,255,255,0.5); line-height:1.45; flex:1; }
.cst-front .tile .foot, .cst-dlg .tile .foot { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cst-front .tile.svc .art, .cst-dlg .tile.svc .art { background:linear-gradient(135deg, rgba(245,166,35,0.22), rgba(245,166,35,0.04)); display:flex; align-items:center; justify-content:center; font-size:36px; color:var(--acc); height:92px; }
.cst-front .tile.svc .promise, .cst-dlg .tile.svc .promise { display:flex; align-items:center; gap:6px; font-size:0.68rem; color:rgba(255,255,255,0.5); }
.cst-front .tile.svc .promise::before, .cst-dlg .tile.svc .promise::before { content:"\23F1"; }
.cst-front /* Lijst */ .rows, .cst-dlg /* Lijst */ .rows { display:flex; flex-direction:column; gap:8px; }
.cst-front .item, .cst-dlg .item { display:grid; grid-template-columns:44px 1fr auto auto; gap:14px; align-items:center; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:10px 14px; }
.cst-front .item:hover, .cst-dlg .item:hover { border-color:rgba(245,166,35,0.35); }
/* Het plaatje links in een regel draagt de kleur van het item zelf, net als de tegels en de
   uitgelichte kaarten. Met alleen de kleur van de soort zagen dertig formulieren er allemaal
   hetzelfde uit, en dan helpt het niet meer om er een te vinden. */
.cst-front .item .th, .cst-dlg .item .th { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:21px; flex-shrink:0; color:var(--tint, #F5A623); background:linear-gradient(140deg, color-mix(in srgb, var(--tint, #F5A623) 26%, transparent), color-mix(in srgb, var(--tint, #F5A623) 7%, transparent)); border:1px solid color-mix(in srgb, var(--tint, #F5A623) 32%, transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,0.07); transition:border-color .12s; }
.cst-front .item:hover .th, .cst-dlg .item:hover .th { border-color:color-mix(in srgb, var(--tint, #F5A623) 55%, transparent); }
.cst-front .item .th .mud-icon-root, .cst-dlg .item .th .mud-icon-root { font-size:21px; }
.cst-front .item .nm, .cst-dlg .item .nm { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cst-front .item .nm b, .cst-dlg .item .nm b { font-size:0.88rem; color:rgba(255,255,255,0.92); }
.cst-front .item .nm span.d, .cst-dlg .item .nm span.d { font-size:0.73rem; color:rgba(255,255,255,0.48); line-height:1.45; }
.cst-front .item .meta, .cst-dlg .item .meta { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:3px; }
/* De kop van de koopdialoog. Deze drie staan bewust buiten .cst-dlg: die klasse zit op de body van
   de dialoog en de kop wordt door de gedeelde schil getekend, dus de regels eronder bereiken 'm niet. */
.cst-head-tile { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; }
.cst-head-chips { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.cst-head-kind { display:inline-flex; align-items:center; padding:3px 9px; border-radius:8px; font-size:0.64rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; white-space:nowrap; }

/* De onderdelen van een bundel onder elkaar met lucht ertussen. Zonder dat plakken vier namen
   aan elkaar tot een grijze lap en lees je niet meer waar de een ophoudt. */
.cst-parts { display:flex; flex-wrap:wrap; gap:6px; }
.cst-parts .pill { font-size:0.68rem; padding:3px 9px; }
.cst-parts .pill .mud-icon-root { font-size:0.85rem; }

.cst-front .pill, .cst-dlg .pill { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:8px; font-size:0.62rem; font-weight:600; background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.55); }
.cst-front .pill.ok, .cst-dlg .pill.ok { background:rgba(52,211,153,0.14); color:var(--green); }
.cst-front .pill.wait, .cst-dlg .pill.wait { background:rgba(96,165,250,0.12); color:var(--blue); }
/* Een bestelling die is misgelopen of maar half geleverd is draagt deze. Zonder deze regel viel 'ie
   terug op het neutrale grijs en las een mislukte levering als een gewone mededeling. */
.cst-front .pill.warn, .cst-dlg .pill.warn { background:rgba(245,166,35,0.14); color:var(--acc); }
.cst-front .pill.cat, .cst-dlg .pill.cat { background:rgba(96,165,250,0.12); color:var(--blue); }
.cst-front .item .price, .cst-dlg .item .price { text-align:right; }
/* Mijn aankopen: vaste kolommen. Het bedrag en de knoppen krijgen allebei een eigen breedte, zodat
   een regel met een knop meer de rest niet naar links duwt. De knoppenkolom is zo breed als de
   breedste regel; wat er ontbreekt laat ruimte open in plaats van alles te verschuiven. */
.cst-purchases .item { grid-template-columns:44px 1fr 120px 480px; }
.cst-purchases .item .price { width:120px; }
.cst-purchases .item .acts { width:480px; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
/* Een aankoop waarvan het item niet meer bestaat. De rij zakt in z'n geheel naar achteren: het
   plaatje wordt grijs, de naam, het bedrag en de merkjes worden zachter. Alleen de ondertitel blijft
   staan, in rood, en die draagt de reden in plaats van de soort. Dat is bewust de enige kleur op de
   regel: dempt die mee, dan is er niets meer wat de rij onderscheidt van een gewone aankoop, en dan
   leest de mededeling als een ondertitel. Geen rand in kleur en geen streepje links, want dan
   schreeuwt een afgesloten aankoop harder dan een lopende. */
.cst-purchases .item.gone { background:rgba(255,255,255,0.015); border-color:rgba(255,255,255,0.06); }
.cst-purchases .item.gone .th { opacity:0.3; filter:grayscale(1); }
.cst-purchases .item.gone .nm > b { color:rgba(255,255,255,0.55); }
.cst-purchases .item.gone .nm > span.d { color:var(--red); }
.cst-purchases .item.gone .meta { opacity:0.6; }
.cst-purchases .item.gone .price { opacity:0.4; }
.cst-front .item .price b, .cst-dlg .item .price b { display:block; }
.cst-front /* Bundelkaarten */ .bundles, .cst-dlg /* Bundelkaarten */ .bundles { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
/* De tint van een kaart komt uit --tint, dat het item zelf meegeeft en dat terugvalt op de tint
   van zijn soort. Zo bepaalt een item zijn kleur op elke vorm waarin het getekend wordt, en staat
   er nergens een kleur in de opmaak die aan een bepaalde bundel vastzit. */
.cst-front .bcard, .cst-dlg .bcard { position:relative; border-radius:14px; padding:16px 18px; display:grid; grid-template-columns:1fr auto; gap:14px; border:1px solid color-mix(in srgb, var(--tint, #2DD4BF) 28%, transparent); background:linear-gradient(120deg, color-mix(in srgb, var(--tint, #2DD4BF) 16%, transparent), rgba(255,255,255,0.02)); transition:transform .12s, border-color .12s; }
.cst-front .bcard:hover, .cst-dlg .bcard:hover { border-color:color-mix(in srgb, var(--tint, #2DD4BF) 60%, transparent); transform:translateY(-2px); }
.cst-front .bcard .nm b, .cst-dlg .bcard .nm b { font-size:1rem; display:block; margin:4px 0 4px; }
.cst-front .bcard .nm span.d, .cst-dlg .bcard .nm span.d { font-size:0.74rem; color:rgba(255,255,255,0.55); line-height:1.45; display:block; }
.cst-front .bcard .side, .cst-dlg .bcard .side { display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:10px; }
.cst-front .bcard .price, .cst-dlg .bcard .price { text-align:right; }
.cst-front .bcard .price b, .cst-dlg .bcard .price b { display:block; }
.cst-front .incl, .cst-dlg .incl { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.cst-front .incl span, .cst-dlg .incl span { font-size:0.66rem; padding:2px 8px; border-radius:8px; background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.65); }
.cst-front .incl span.own, .cst-dlg .incl span.own { background:rgba(52,211,153,0.16); color:var(--green); }
.cst-front /* Edities */ .compare, .cst-dlg /* Edities */ .compare { display:grid; grid-template-columns:1fr repeat(3, 160px); border:1px solid rgba(255,255,255,0.08); border-radius:12px; overflow:hidden; font-size:0.78rem; background:rgba(255,255,255,0.02); }
.cst-front .compare > div, .cst-dlg .compare > div { padding:10px 14px; border-bottom:1px solid rgba(255,255,255,0.05); display:flex; align-items:center; }
.cst-front .compare .h, .cst-dlg .compare .h { background:rgba(255,255,255,0.04); font-size:0.66rem; text-transform:uppercase; letter-spacing:0.05em; color:rgba(255,255,255,0.45); font-weight:700; justify-content:center; }
.cst-front .compare .h.first, .cst-dlg .compare .h.first { justify-content:flex-start; }
.cst-front .compare .h.cur, .cst-dlg .compare .h.cur { color:var(--green); }
.cst-front .compare .c, .cst-dlg .compare .c { justify-content:center; color:rgba(255,255,255,0.55); }
.cst-front .compare .c.y, .cst-dlg .compare .c.y { color:var(--green); font-weight:700; }
.cst-front .compare .pr, .cst-dlg .compare .pr { justify-content:center; font-weight:700; font-variant-numeric:tabular-nums; color:rgba(255,255,255,0.9); }
.cst-front .compare .pr small, .cst-dlg .compare .pr small { font-weight:400; color:rgba(255,255,255,0.45); margin-left:4px; font-size:0.64rem; }
.cst-front /* Dialogen */ .stage, .cst-dlg /* Dialogen */ .stage { background:rgba(0,0,0,0.35); border-radius:14px; padding:30px 24px; display:flex; gap:20px; justify-content:center; align-items:flex-start; flex-wrap:wrap; }
.cst-front .hl, .cst-dlg .hl { list-style:none; padding:0; margin:0 0 14px; display:flex; flex-direction:column; gap:7px; }
.cst-front .hl li, .cst-dlg .hl li { font-size:0.8rem; color:rgba(255,255,255,0.75); display:flex; gap:9px; align-items:flex-start; }
.cst-front .hl li::before, .cst-dlg .hl li::before { content:"\2713"; color:var(--green); font-weight:700; }
/* De 140px hoort bij de tegel. De dialoog had dezelfde regel en kwam daardoor als een
   strookje open: de regel eronder zet alleen een max-height, en die overschrijft een
   height niet. Dialoogmaten staan nu compleet in hun eigen regel. */
.cst-front .prev { border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,0.1); background:#fff; height:140px; display:flex; align-items:center; justify-content:center; color:#999; font-size:0.72rem; }
.cst-front .sum, .cst-dlg .sum { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:14px 16px; }
.cst-front .sum .r, .cst-dlg .sum .r { display:flex; justify-content:space-between; font-size:0.8rem; padding:6px 0; color:rgba(255,255,255,0.7); font-variant-numeric:tabular-nums; }
.cst-front .sum .r.sale, .cst-dlg .sum .r.sale { color:var(--red); }
/* Een regel die er geld af haalt staat groen: het bundelvoordeel en de aanbieding zijn de enige
   bedragen in de opbouw die de koper minder laten betalen, en dat hoort in één oogopslag te
   zien te zijn tussen de regels die optellen. */
.cst-front .sum .r b.best, .cst-dlg .sum .r b.best { color:var(--green); }
.cst-front .sum .r.t, .cst-dlg .sum .r.t { border-top:1px solid rgba(255,255,255,0.12); margin-top:6px; padding-top:10px; font-weight:700; color:rgba(255,255,255,0.92); font-size:0.92rem; }
.cst-front .sum .m, .cst-dlg .sum .m { font-size:0.7rem; color:rgba(255,255,255,0.42); line-height:1.5; margin-top:10px; }
.cst-front .sum .to, .cst-dlg .sum .to { display:flex; gap:9px; align-items:flex-start; font-size:0.76rem; color:rgba(255,255,255,0.65); margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.08); }
.cst-front .notice, .cst-dlg .notice { display:flex; gap:10px; padding:10px 12px; border-radius:9px; font-size:0.78rem; line-height:1.5; margin-bottom:14px; }
.cst-front .notice.info, .cst-dlg .notice.info { background:rgba(96,165,250,0.08); border:1px solid rgba(96,165,250,0.2); color:rgba(255,255,255,0.75); }
.cst-front .notice.warn, .cst-dlg .notice.warn { background:rgba(245,166,35,0.07); border:1px solid rgba(245,166,35,0.22); color:rgba(255,255,255,0.75); }
/* ── Keuzekaartjes voor de looptijd ── */
.cst-front .optgrid, .cst-dlg .optgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
/* Elk onderdeel op een eigen regel, zodat de naam, de prijs en de toelichting van de drie kaartjes
   naast elkaar op dezelfde hoogte staan. Rechts blijft ruimte vrij voor het keuzerondje, ook bij een
   naam die over twee regels loopt. */
.cst-front .optcard, .cst-dlg .optcard { position:relative; display:flex; flex-direction:column; border:1px solid rgba(255,255,255,0.14); border-radius:12px; padding:13px 36px 12px 14px; cursor:pointer; background:rgba(255,255,255,0.03); }
.cst-front .optcard > b, .cst-dlg .optcard > b { display:block; font-size:0.82rem; font-weight:600; line-height:1.35; }
.cst-front .optcard:hover, .cst-dlg .optcard:hover { border-color:rgba(255,255,255,0.28); }
.cst-front .optcard.on, .cst-dlg .optcard.on { border-color:var(--acc); background:rgba(245,166,35,0.09); box-shadow:0 0 0 1px rgba(245,166,35,0.35) inset; }
/* Het rondje staat rechtsboven in de hoek en kost daarmee geen eigen regel: de naam begint meteen
   bovenaan. De vrije ruimte rechts in het kaartje is voor hem gereserveerd. */
.cst-front .optcard .rad, .cst-dlg .optcard .rad { position:absolute; top:13px; right:13px; width:15px; height:15px; border-radius:50%; border:1px solid rgba(255,255,255,0.3); }
.cst-front .optcard.on .rad, .cst-dlg .optcard.on .rad { border-color:var(--acc); }
.cst-front .optcard.on .rad::after, .cst-dlg .optcard.on .rad::after { content:""; position:absolute; inset:3px; border-radius:50%; background:var(--acc); }
.cst-front .optcard .lb, .cst-dlg .optcard .lb { font-size:0.82rem; font-weight:600; color:rgba(255,255,255,0.9); }
.cst-front .optcard .pr, .cst-dlg .optcard .pr { display:block; font-size:1.18rem; font-weight:700; font-variant-numeric:tabular-nums; margin-top:7px; letter-spacing:-0.3px; }
.cst-front .optcard .pr s, .cst-dlg .optcard .pr s { font-size:0.8rem; font-weight:400; color:rgba(255,255,255,0.35); margin-right:6px; }
.cst-front .optcard .per, .cst-dlg .optcard .per { display:block; font-size:0.68rem; color:rgba(255,255,255,0.45); margin-top:2px; }
.cst-front .optcard .until, .cst-dlg .optcard .until { display:block; font-size:0.68rem; color:rgba(255,255,255,0.5); margin-top:auto; padding-top:8px; border-top:1px solid rgba(255,255,255,0.08); }
.cst-front .optcard.on .until, .cst-dlg .optcard.on .until { color:rgba(245,166,35,0.85); }
.cst-front .optcard .best, .cst-dlg .optcard .best { position:absolute; top:-8px; left:12px; font-size:0.58rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; padding:2px 7px; border-radius:7px; background:var(--green); color:#04321f; }
.cst-front .optcard.sale .pr, .cst-dlg .optcard.sale .pr { color:var(--red); }
/* Het akkoord op de voorwaarden: een regel om aan te vinken, met de tekst leesbaar naast het
   vakje en het vakje op de eerste regel uitgelijnd zodat een tekst van twee regels niet om het
   vakje heen zakt. */
.cst-front .agree, .cst-dlg .agree { display:flex; gap:9px; align-items:flex-start; font-size:0.78rem; line-height:1.5; color:rgba(255,255,255,0.72); cursor:pointer; }
.cst-front .agree input, .cst-dlg .agree input { margin:3px 0 0; flex:none; accent-color:var(--acc); }
.cst-front .lbl, .cst-dlg .lbl { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.05em; color:rgba(255,255,255,0.45); font-weight:600; margin-bottom:6px; display:block; }
.cst-front .inp, .cst-dlg .inp { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:6px; padding:9px 11px; font-size:0.82rem; color:rgba(255,255,255,0.85); }
.cst-front .g2, .cst-dlg .g2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cst-front .g3, .cst-dlg .g3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.cst-front .revlist, .cst-dlg .revlist { display:flex; flex-direction:column; gap:10px; }
.cst-front .rev, .cst-dlg .rev { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:11px 13px; }
.cst-front .rev .top, .cst-dlg .rev .top { display:flex; align-items:center; gap:9px; margin-bottom:5px; }
.cst-front .rev .top b, .cst-dlg .rev .top b { font-size:0.8rem; }
.cst-front .rev .top .when, .cst-dlg .rev .top .when { margin-left:auto; font-size:0.68rem; color:rgba(255,255,255,0.35); }
.cst-front .stars.open, .cst-dlg .stars.open { cursor:pointer; }
.cst-front .stars.open:hover b, .cst-dlg .stars.open:hover b { color:#fff; text-decoration:underline; }
.cst-front .rev .reply, .cst-dlg .rev .reply { margin-top:8px; padding-left:11px; border-left:2px solid rgba(245,166,35,0.4); }
.cst-front .rev .reply .who, .cst-dlg .rev .reply .who { display:block; font-size:0.66rem; font-weight:600; color:var(--acc); margin-bottom:3px; }

.cst-front .rev p, .cst-dlg .rev p { margin:0; font-size:0.78rem; color:rgba(255,255,255,0.62); line-height:1.5; }

/* De sterren in de beoordeel-dialoog en het scrollvenster van het voorbeeld: twee dingen die de
   winkelvoorkant zelf niet heeft, want ze zitten in een dialoog. */
.cst-star { background:none; border:0; padding:2px; cursor:pointer; color:rgba(255,255,255,0.3); }
.cst-star.on { color:#FBBF24; }
.cst-star .mud-icon-root { font-size:1.7rem; }

/* Het venster is een kijkvlak met een grijze ondergrond, niet de plaat zelf: de pagina staat
   er kleiner in dan het vlak breed is, met lucht eromheen. Dat is de hele truc om meer van
   het document tegelijk te zien -- op volle breedte vul je het vlak met een halve pagina.
   De grijstint maakt de papierrand zichtbaar, zoals in een pdf-lezer. */
.cst-dlg .prev { height:80vh; overflow:auto; border:1px solid rgba(255,255,255,0.1); border-radius:10px; background:#E8E8EA; padding:18px 0; }
.cst-dlg .prev img { display:block; width:66%; height:auto; margin:0 auto; background:#fff; box-shadow:0 2px 14px rgba(0,0,0,0.28); }

/* Zolang de server de plaat nog tekent staat het venster er al op volle hoogte, met de
   wachtmelding in het midden. Zo springt de dialoog niet van klein naar groot zodra de
   afbeelding binnenkomt. */
.cst-dlg .prev.is-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; overflow:hidden; color:#555; font-size:0.82rem; }

/* De catalogus als tekst: het vak links, het rapport rechts. Naast elkaar omdat je bij een
   afgekeurde regel de melding wil lezen terwijl je naar de tekst kijkt die 'm veroorzaakt.
   Onder de 1200px valt het terug op onder elkaar, want twee kolommen van 400px leest niemand. */
.cst-json-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.cst-json-pane { display:flex; flex-direction:column; gap:8px; min-width:0; }
.cst-json-box { height:64vh; resize:vertical; font-family:ui-monospace, "Cascadia Mono", "Consolas", monospace; font-size:0.76rem; line-height:1.45; white-space:pre; overflow:auto; }
.cst-json-lines { max-height:76vh; overflow:auto; }
.cst-json-tag { display:inline-block; padding:3px 9px; border-radius:999px; font-size:0.68rem; font-weight:600; white-space:nowrap; }
.cst-json-caret { vertical-align:-3px; margin-right:2px; opacity:0.55; }

/* De verschillen onder de regel. Het pad staat als code omdat het letterlijk de veldnaam uit het
   bestand is: zo zoek je 'm terug in het tekstvak ernaast zonder te hoeven vertalen. */
.cst-json-diff { background:rgba(255,255,255,0.02); padding:4px 10px 8px; }
.cst-json-change { display:flex; align-items:baseline; gap:8px; padding:3px 0; font-size:0.74rem; line-height:1.4; flex-wrap:wrap; }
.cst-json-change code { color:var(--mud-palette-primary); font-size:0.72rem; min-width:150px; }
.cst-json-change .was { color:rgba(255,255,255,0.4); text-decoration:line-through; }
.cst-json-change .now { color:rgba(255,255,255,0.85); }
.cst-json-change .mud-icon-root { font-size:0.9rem; opacity:0.4; }

@media (max-width: 1200px) {
    .cst-json-grid { grid-template-columns:1fr; }
    .cst-json-box { height:38vh; }
}

/* Merktekens naast de naam in de hostlijst. Uitzonderingen horen op te vallen zonder een eigen
   kolom te kosten die bij de meeste rijen leeg blijft: een ster voor uitgelicht, een chip voor
   het eigen label. */
.cst-mark { display:inline-flex; align-items:center; gap:3px; margin-left:6px; vertical-align:1px; }
.cst-mark.feat { color:#FBBF24; }
.cst-mark.feat .mud-icon-root { font-size:0.95rem; }
.cst-mark.label { padding:1px 7px; border-radius:999px; font-size:0.64rem; font-weight:600; letter-spacing:0.02em; text-transform:uppercase; color:#2DD4BF; background:rgba(45,212,191,0.14); }

/* De keuze tussen aanvullen en vervangen. Onopvallend zolang 'ie uit staat, en zodra het eerste
   vinkje aan gaat kleurt het blok rood: dit is de enige plek in de dialoog waar iets verdwijnt. */
.cst-json-mode { display:flex; flex-direction:column; gap:6px; padding:9px 11px; border-radius:10px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); font-size:0.76rem; }
.cst-json-mode.armed { border-color:rgba(248,113,113,0.45); background:rgba(248,113,113,0.07); }
.cst-json-mode label { display:flex; align-items:flex-start; gap:8px; cursor:pointer; color:rgba(255,255,255,0.75); }
.cst-json-mode label.confirm { color:#F87171; font-weight:600; padding-left:22px; }
.cst-json-mode input { margin-top:2px; }