/* ==========================================================================
   u4-site.css — Up-4ever public design system (Claude Design "Up4ever Landing"
   language). Light #FBF9FF canvas, deep-purple #271646 ink, purple→magenta→
   yellow brand gradient, Changa (display) + Poppins (body), Phosphor icons.
   Loaded on public pages flagged u4_layout (main.html). Self-contained — does
   NOT depend on Bootstrap/style.min.css. All classes are u4- prefixed to avoid
   collisions.
   ========================================================================== */
:root{
  --u4-ink:#271646; --u4-ink-2:#3D3458; --u4-muted:#6A6188; --u4-muted-2:#8B82A3; --u4-faint:#A49CBC;
  --u4-bg:#FBF9FF; --u4-soft:#F4EDFF; --u4-line:rgba(54,37,99,.08); --u4-line-2:rgba(54,37,99,.14);
  --u4-purple:#7A3FE0; --u4-purple-2:#6139B7; --u4-magenta:#C257E5; --u4-orange:#EA8E3B; --u4-gold:#FFCB3E;
  --u4-green:#2E9E59; --u4-danger:#D7344B;
  --u4-grad:linear-gradient(135deg,#7A3FE0,#C257E5);
  --u4-grad-3:linear-gradient(135deg,#6139B7,#C257E5 55%,#EA8E3B);
  --u4-grad-text:linear-gradient(120deg,#7A3FE0 5%,#C257E5 50%,#EA8E3B 95%);
}
body.u4site{ margin:0; font-family:'Poppins',sans-serif; background:var(--u4-bg); color:var(--u4-ink); -webkit-font-smoothing:antialiased; }
body.u4site *{ box-sizing:border-box; }
body.u4site ::selection{ background:#C257E5; color:#fff; }
.u4-x h1,.u4-x h2,.u4-x h3,.u4-x h4,.u4-display{ font-family:'Changa',sans-serif; }
.u4-x a{ text-decoration:none; }
.u4-wrap{ max-width:1280px; margin:0 auto; padding-inline:40px; }
.u4-grad-text{ background:var(--u4-grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
@keyframes u4-marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes u4-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

/* ---- buttons ---- */
.u4-btn{ display:inline-flex; align-items:center; gap:9px; font-family:inherit; font-size:15px; font-weight:700; cursor:pointer;
  padding:13px 26px; border-radius:13px; border:none; transition:transform .2s, border-color .2s, filter .2s; line-height:1; }
.u4-btn--primary{ color:#fff; background:var(--u4-grad); box-shadow:0 16px 34px -14px rgba(122,63,224,.75); }
.u4-btn--primary:hover{ color:#fff; transform:translateY(-2px); filter:brightness(1.04); }
.u4-btn--ghost{ color:var(--u4-ink); background:#fff; border:1px solid var(--u4-line-2); box-shadow:0 6px 18px -12px rgba(54,37,99,.18); }
.u4-btn--ghost:hover{ border-color:var(--u4-magenta); }
.u4-btn--white{ color:var(--u4-purple-2); background:#fff; }
.u4-btn--white:hover{ color:var(--u4-purple); transform:translateY(-2px); }
.u4-btn--lg{ font-size:16px; padding:16px 30px; border-radius:14px; }
.u4-btn--block{ width:100%; justify-content:center; }

/* ---- nav (header.html) ---- */
.u4-nav{ position:sticky; top:0; z-index:50; background:rgba(251,249,255,.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid rgba(54,37,99,.07); }
.u4-nav__row{ max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 40px; }
.u4-nav__logo img{ height:34px; width:auto; display:block; }
.u4-nav__links{ display:flex; align-items:center; gap:4px; padding:6px; border-radius:999px; background:#F1EBFC; border:1px solid rgba(54,37,99,.05); }
.u4-nav__links a{ color:#5A5175; font-size:14.5px; font-weight:500; padding:9px 18px; border-radius:999px; transition:.18s; white-space:nowrap; }
.u4-nav__links a:hover, .u4-nav__links a.active{ background:#fff; color:var(--u4-ink); }
.u4-nav__right{ display:flex; align-items:center; gap:14px; }
.u4-nav__lang{ display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:10px; cursor:pointer; color:#5A5175; }
.u4-nav__lang:hover{ background:#F1EBFC; }
.u4-nav__login{ color:var(--u4-ink); font-size:14.5px; font-weight:600; padding:10px 6px; }
.u4-nav__login:hover{ color:var(--u4-purple-2); }
.u4-nav__burger{ display:none; border:none; background:none; cursor:pointer; color:var(--u4-ink); font-size:26px; line-height:1; }
.u4-nav__mobile{ display:none; }

/* ---- page header (inner pages breadcrumb/hero) ---- */
.u4-pagehead{ position:relative; overflow:hidden; padding:clamp(3.5rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem); text-align:center;
  background:
    radial-gradient(46% 60% at 88% -10%, rgba(194,87,229,.18), transparent 62%),
    radial-gradient(40% 55% at 4% 120%, rgba(255,203,62,.16), transparent 60%),
    radial-gradient(130% 95% at 50% -25%, #F0E6FF 0%, var(--u4-bg) 58%); }
.u4-pagehead::after{ content:""; position:absolute; right:-90px; top:-70px; width:360px; height:360px; pointer-events:none;
  border-radius:50%; background:conic-gradient(from 200deg,#7A3FE0,#C257E5,#FFCB3E,#7A3FE0); opacity:.10; filter:blur(30px); }
.u4-pagehead > *{ position:relative; z-index:1; }
.u4-pagehead__eyebrow{ font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--u4-magenta); }
.u4-pagehead h1{ font-family:'Changa',sans-serif; font-weight:800; font-size:clamp(2.2rem,4.6vw,3.4rem); line-height:1.08; letter-spacing:-.02em; color:var(--u4-ink); margin:12px 0 0; }
.u4-pagehead p{ color:var(--u4-muted); font-size:18px; line-height:1.6; max-width:620px; margin:16px auto 0; }

/* ---- sections / typography ---- */
.u4-sec{ padding:clamp(3.5rem,7vw,6rem) 0; }
.u4-sec--soft{ background:linear-gradient(180deg,var(--u4-soft),var(--u4-bg)); }
.u4-sec--white{ background:#fff; }
.u4-eyebrow{ display:inline-block; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--u4-magenta); }
.u4-h2{ font-family:'Changa',sans-serif; font-weight:800; font-size:clamp(1.8rem,3.6vw,2.75rem); line-height:1.1; letter-spacing:-.02em; color:var(--u4-ink); margin-top:14px; }
.u4-lead{ color:var(--u4-muted); font-size:17px; line-height:1.6; max-width:620px; }
.u4-center{ text-align:center; } .u4-center .u4-lead{ margin-inline:auto; }

/* ---- cards ---- */
.u4-grid{ display:grid; gap:24px; } .u4-grid--2{ grid-template-columns:repeat(2,1fr); } .u4-grid--3{ grid-template-columns:repeat(3,1fr); } .u4-grid--4{ grid-template-columns:repeat(4,1fr); }
.u4-card{ background:#fff; border:1px solid var(--u4-line); border-radius:22px; padding:32px; box-shadow:0 14px 36px -22px rgba(54,37,99,.25); }
.u4-card--soft{ background:var(--u4-bg); box-shadow:none; }
.u4-card--hover{ transition:transform .25s, box-shadow .25s, border-color .25s; }
.u4-card--hover:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -30px rgba(54,37,99,.45); border-color:rgba(194,87,229,.35); }
.u4-ic{ width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center; }
.u4-ic--grad{ background:var(--u4-grad); color:#fff; box-shadow:0 12px 24px -12px rgba(138,73,253,.55); }
.u4-ic--soft{ background:rgba(138,73,253,.12); color:var(--u4-purple); }
.u4-card h3{ font-family:'Changa',sans-serif; font-weight:700; font-size:20px; color:var(--u4-ink); margin:16px 0 10px; }
.u4-card p{ font-size:14.5px; line-height:1.62; color:var(--u4-muted); margin:0; }

/* ---- forms ---- */
.u4-field{ margin-bottom:16px; }
.u4-field label{ display:block; font-size:13px; font-weight:600; color:var(--u4-ink-2); margin-bottom:7px; }
.u4-input, .u4-field input, .u4-field select, .u4-field textarea{ width:100%; font-family:inherit; font-size:15px; color:var(--u4-ink);
  padding:13px 15px; border-radius:12px; background:#fff; border:1px solid var(--u4-line-2); outline:none; transition:border-color .18s, box-shadow .18s; }
.u4-field input:focus, .u4-field select:focus, .u4-field textarea:focus, .u4-input:focus{ border-color:var(--u4-magenta); box-shadow:0 0 0 4px rgba(194,87,229,.14); }
.u4-alert{ font-size:14px; padding:12px 15px; border-radius:12px; margin-bottom:18px; }
.u4-alert--err{ background:rgba(255,107,107,.1); border:1px solid rgba(255,107,107,.3); color:var(--u4-danger); }
.u4-alert--ok{ background:rgba(63,184,106,.1); border:1px solid rgba(63,184,106,.25); color:var(--u4-green); }

/* ---- panel / box ---- */
.u4-panel{ background:#fff; border:1px solid var(--u4-line); border-radius:22px; box-shadow:0 30px 70px -40px rgba(54,37,99,.4); padding:clamp(1.4rem,3vw,2.2rem); }
.u4-chip{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px; font-size:12.5px; font-weight:700; }
.u4-chip--soft{ background:rgba(138,73,253,.1); color:var(--u4-purple); }
.u4-chip--ok{ background:rgba(63,184,106,.12); color:var(--u4-green); }

/* ---- table ---- */
.u4-table{ width:100%; border-collapse:collapse; }
.u4-table th{ text-align:left; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--u4-faint); padding:12px 14px; border-bottom:1px solid var(--u4-line); }
.u4-table td{ font-size:14.5px; color:var(--u4-ink-2); padding:14px; border-bottom:1px solid var(--u4-line); }
.u4-table tr:hover td{ background:var(--u4-soft); }

/* ---- footer (footer.html) ---- */
.u4-foot{ padding:72px 40px 40px; background:#1E1140; color:#fff; }
.u4-foot__grid{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px; margin-bottom:52px; }
.u4-foot__logo img{ height:32px; width:auto; margin-bottom:18px; }
.u4-foot p{ font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.5); max-width:280px; }
.u4-foot h4{ font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff; margin-bottom:18px; }
.u4-foot__col a{ display:block; font-size:14.5px; color:rgba(255,255,255,.55); margin-bottom:12px; transition:color .2s; }
.u4-foot__col a:hover{ color:#fff; }
.u4-foot__soc{ display:flex; gap:11px; margin-top:18px; }
.u4-foot__soc a{ width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; transition:.2s; }
.u4-foot__soc a:hover{ background:rgba(255,255,255,.13); }
.u4-foot__bottom{ max-width:1280px; margin:0 auto; padding-top:28px; border-top:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13.5px; color:rgba(255,255,255,.4); }

/* ---- CTA band ---- */
.u4-ctaband{ position:relative; overflow:hidden; border-radius:30px; color:#fff; text-align:center; padding:clamp(2.4rem,5vw,4rem) 1.5rem; background:var(--u4-grad-3); }
.u4-ctaband h2{ font-family:'Changa',sans-serif; font-weight:800; color:#fff; font-size:clamp(1.7rem,3.4vw,2.5rem); }

/* ---- prose (static legal/faq/doc pages) ---- */
.u4-prose{ max-width:820px; margin:0 auto; color:var(--u4-ink-2); font-size:16px; line-height:1.75; }
.u4-prose h1,.u4-prose h2,.u4-prose h3,.u4-prose h4{ font-family:'Changa',sans-serif; color:var(--u4-ink); margin:1.5em 0 .5em; line-height:1.25; }
.u4-prose h2{ font-size:1.5rem; } .u4-prose h3{ font-size:1.2rem; }
.u4-prose p{ margin:0 0 1em; } .u4-prose ul,.u4-prose ol{ margin:0 0 1em 1.3em; } .u4-prose li{ margin:.35em 0; }
.u4-prose a{ color:var(--u4-purple); } .u4-prose a:hover{ text-decoration:underline; }
.u4-prose table{ width:100%; border-collapse:collapse; margin:1em 0; }
.u4-prose th,.u4-prose td{ border:1px solid var(--u4-line); padding:10px 12px; text-align:left; }
.u4-prose img{ max-width:100%; height:auto; }

/* ---- premium comparison table (comparison.html) ---- */
.u4-cmp-wrap{ overflow-x:auto; border:1px solid var(--u4-line); border-radius:20px; background:#fff; box-shadow:0 18px 40px -26px rgba(54,37,99,.3); }
.u4-cmp{ width:100%; border-collapse:collapse; min-width:680px; }
.u4-cmp th,.u4-cmp td{ padding:15px 18px; text-align:center; border-bottom:1px solid var(--u4-line); font-size:14.5px; color:var(--u4-ink-2); }
.u4-cmp thead th{ font-family:'Changa',sans-serif; font-weight:700; font-size:15px; color:var(--u4-ink); background:var(--u4-soft); }
.u4-cmp tbody tr:last-child td{ border-bottom:none; }
.u4-cmp tbody tr:hover td{ background:rgba(122,63,224,.03); }
.u4-cmp__feat{ text-align:left !important; font-weight:600; color:var(--u4-ink); }
.u4-cmp__prem{ background:rgba(194,87,229,.06); }
.u4-cmp thead .u4-cmp__prem{ color:var(--u4-magenta); background:rgba(194,87,229,.12); }
.u4-cmp .u4-yes{ color:var(--u4-green); } .u4-cmp .u4-no{ color:#C9C2DB; }
.u4-cmp__dash{ color:var(--u4-faint); }
/* CTA footer row — one button per tier */
.u4-cmp tfoot td{ border-bottom:none; padding:18px 18px 22px; }
.u4-cmpbtn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; font-family:inherit; font-size:13.5px;
  font-weight:700; padding:11px 18px; border-radius:11px; text-decoration:none; white-space:nowrap; line-height:1; transition:transform .18s, filter .18s, border-color .18s; }
.u4-cmpbtn i{ font-size:16px; }
.u4-cmpbtn--free{ color:var(--u4-muted); background:var(--u4-soft); font-weight:600; cursor:default; }
.u4-cmpbtn--reg{ color:var(--u4-ink); background:#fff; border:1.5px solid var(--u4-line-2); }
.u4-cmpbtn--reg:hover{ border-color:var(--u4-magenta); transform:translateY(-2px); }
.u4-cmpbtn--prem{ color:#fff; background:var(--u4-grad); box-shadow:0 12px 26px -14px rgba(122,63,224,.7); }
.u4-cmpbtn--prem:hover{ transform:translateY(-2px); filter:brightness(1.05); }
/* Mobile: a 680px feature matrix can't fit a phone — instead of sideways-scroll
   ("too tight"), stack each feature into its own card with the tier value labelled.
   Column labels are positional (English now; revisit at i18n). */
@media (max-width:640px){
  .u4-cmp-wrap{ overflow-x:visible; border:0; background:transparent; box-shadow:none; }
  .u4-cmp{ min-width:0; display:block; }
  .u4-cmp thead{ display:none; }
  .u4-cmp tbody{ display:block; }
  .u4-cmp tbody tr{ display:block; background:#fff; border:1px solid var(--u4-line); border-radius:14px;
    margin-bottom:13px; overflow:hidden; box-shadow:0 12px 30px -22px rgba(54,37,99,.35); }
  .u4-cmp tbody tr:hover td{ background:transparent; }
  .u4-cmp td{ display:flex; align-items:center; justify-content:space-between; gap:14px; text-align:right;
    padding:11px 16px; border-bottom:1px solid var(--u4-line); font-size:14px; }
  .u4-cmp tbody tr td:last-child{ border-bottom:0; }
  .u4-cmp__feat{ display:block !important; text-align:left !important; background:var(--u4-soft);
    font-family:'Changa',sans-serif; font-weight:700; font-size:15px; color:var(--u4-ink); padding:12px 16px; }
  .u4-cmp td:not(.u4-cmp__feat)::before{ font-weight:600; color:var(--u4-ink-2); font-size:13px; margin-right:auto; text-align:left; }
  .u4-cmp tbody td:nth-child(2)::before{ content:"Free"; }
  .u4-cmp tbody td:nth-child(3)::before{ content:"Registered"; }
  .u4-cmp tbody td:nth-child(4)::before{ content:"Premium"; }
  .u4-cmp tbody td:nth-child(5)::before{ content:"Premium Pro"; }
  .u4-cmp__prem{ background:transparent; }
  /* CTA footer row → its own card with per-tier labels */
  .u4-cmp tfoot{ display:block; }
  .u4-cmp tfoot tr{ display:block; background:#fff; border:1px solid var(--u4-line); border-radius:14px; margin-top:4px;
    overflow:hidden; box-shadow:0 12px 30px -22px rgba(54,37,99,.35); }
  .u4-cmp tfoot td{ padding:12px 16px; border-bottom:1px solid var(--u4-line); }
  .u4-cmp tfoot tr td:last-child{ border-bottom:0; }
  .u4-cmp tfoot td.u4-cmp__feat{ display:none !important; }
  .u4-cmp tfoot td:nth-child(2)::before{ content:"Free"; }
  .u4-cmp tfoot td:nth-child(3)::before{ content:"Registered"; }
  .u4-cmp tfoot td:nth-child(4)::before{ content:"Premium"; }
  .u4-cmp tfoot td:nth-child(5)::before{ content:"Premium Pro"; }
}

/* ---- buy-premium packages (payment_buy_with.html, inside bootstrap modal) ---- */
.u4p-pkgsec{ padding:6px 0; }
.u4p-pkgtabs{ display:flex; flex-wrap:wrap; gap:8px; border:none; margin-bottom:18px; }
.u4p-pkgtab{ border:1px solid var(--u4-line-2); background:#fff; color:var(--u4-ink-2); font-weight:600; font-size:14px; padding:9px 18px; border-radius:999px; cursor:pointer; }
.u4p-pkgtab.active{ background:var(--u4-grad); color:#fff !important; border-color:transparent; }
.u4p-pkgs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; list-style:none; padding:0; }
.u4p-pkg{ border:1px solid var(--u4-line); border-radius:18px; padding:22px 18px; text-align:center; background:#fff; transition:border-color .2s, transform .2s; }
.u4p-pkg:hover{ border-color:var(--u4-magenta); transform:translateY(-3px); }
.u4p-pkg__term{ font-weight:700; color:var(--u4-ink); font-size:15px; }
.u4p-pkg__price{ font-family:'Changa',sans-serif; font-weight:800; font-size:1.9rem; color:var(--u4-ink); margin:6px 0; }
.u4p-pkg__note{ font-size:12.5px; color:var(--u4-muted); margin-bottom:14px; }
.u4p-paymodal{ border:none; border-radius:22px; overflow:hidden; }
.u4p-paymodal__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.u4p-paymodal__hint{ font-size:13px; color:var(--u4-muted); margin-top:14px; }

/* ---- responsive ---- */
@media (max-width:1024px){ .u4-grid--3,.u4-grid--4{ grid-template-columns:1fr 1fr; } .u4-grid--2{ grid-template-columns:1fr; } .u4-nav__links{ display:none; } .u4-nav__burger{ display:block; } }
@media (max-width:760px){ .u4-wrap{ padding-inline:20px; } .u4-grid--3,.u4-grid--4{ grid-template-columns:1fr; } .u4-foot__grid{ grid-template-columns:1fr 1fr; } .u4-nav__lang{ display:none; } }
@media (prefers-reduced-motion:reduce){ body.u4site *{ animation:none !important; transition:none !important; } }

/* ---- Ad placeholder ----------------------------------------------------------
   Shown when an ad slot has no configured ad (admin /admin/ads), so the ad
   positions are previewable. Real ad markup (e.g. AdSense) replaces it. */
.u4spot{ display:flex; align-items:center; justify-content:center; width:100%; min-height:110px;
  margin:0 auto; padding:18px; box-sizing:border-box; border:1.5px dashed #CBBEEA; border-radius:14px;
  background:repeating-linear-gradient(135deg,#F8F5FE,#F8F5FE 14px,#F1EAFB 14px,#F1EAFB 28px); }
.u4spot::after{ content:'Advertisement'; color:#8E7FB6; font-family:'Poppins',sans-serif; font-weight:700;
  font-size:13px; letter-spacing:.2em; text-transform:uppercase; }

/* AdSense size variants for the ad placeholders */
.u4spot--lb{ max-width:728px; min-height:90px; }     /* leaderboard 728x90 */
.u4spot--rect{ max-width:336px; min-height:280px; }  /* large rectangle 336x280 */
.u4spot--hp{ max-width:300px; min-height:600px; width:100%; }  /* half-page 300x600 (rail) */
.u4spot--lb::after{ content:'Advertisement · 728×90'; }
.u4spot--rect::after{ content:'Advertisement · 336×280'; }
.u4spot--hp::after{ content:'Advertisement · 300×600'; }

/* ---- Comments ----------------------------------------------------------------
   Shared comment list-item + reply form. Used by comment.html (single item,
   server-looped + AJAX-appended on download1) and comments.html (news list +
   reply form). Both render on bootstrap-free migrated pages, so self-contained
   here. Logical props (margin-inline/text-align:start) keep it RTL-safe. */
.u4cm-cardhead{ display:flex; align-items:center; gap:12px; margin:0 0 12px; }
.u4cm-cardhead .ic{ width:42px; height:42px; flex:none; border-radius:12px; display:flex; align-items:center;
  justify-content:center; color:var(--u4-purple); background:var(--u4-soft); }
.u4cm-cardhead h2{ font-family:'Changa',sans-serif; font-weight:800; font-size:1.15rem; color:var(--u4-ink); margin:0; }
.u4cm-list{ margin:0; }
.u4cm-item{ display:flex; gap:14px; padding:16px 2px; border-top:1px solid var(--u4-line); }
.u4cm-item:first-child{ border-top:0; }
.u4cm-av{ flex:none; width:42px; height:42px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-family:'Changa',sans-serif; font-weight:800; font-size:17px; color:#fff;
  background:var(--u4-grad); text-transform:uppercase; box-shadow:0 8px 18px -10px rgba(122,63,224,.65); }
.u4cm-main{ flex:1; min-width:0; }
.u4cm-head{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin-bottom:5px; }
.u4cm-name{ font-weight:700; color:var(--u4-ink); font-size:14.5px; text-decoration:none; }
a.u4cm-name:hover{ color:var(--u4-purple); }
.u4cm-date{ font-size:12px; color:var(--u4-faint); }
.u4cm-ip{ font-family:ui-monospace,'SF Mono',monospace; font-size:11.5px; color:var(--u4-muted-2);
  background:var(--u4-soft); padding:2px 8px; border-radius:6px; }
.u4cm-del{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px;
  border-radius:7px; color:var(--u4-danger); background:rgba(215,52,75,.09); margin-inline-start:auto; flex:none; }
.u4cm-del:hover{ background:rgba(215,52,75,.18); }
.u4cm-text{ font-size:14px; line-height:1.65; color:var(--u4-ink-2); word-wrap:break-word; overflow-wrap:anywhere; }
.u4cm-empty{ display:flex; align-items:center; gap:10px; padding:18px 2px 8px; font-size:14px; color:var(--u4-muted); }
.u4cm-empty svg{ color:var(--u4-faint); flex:none; }
/* reply form (comments.html, news version) */
.u4cm-form-row{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.u4cm-form-row .u4-input{ flex:1; min-width:200px; }
.u4cm-actions{ text-align:start; margin-top:12px; }
[dir="rtl"] .u4cm-del{ margin-inline-start:auto; }