/* Dermosa — از کمد شما · frontend styles (identical to approved prototype) */
    .drm-closet{
      --c-primary: var(--drm-primary, #6c1410);
      --c-primary-700: var(--drm-primary-700, #561009);
      --c-primary-050: var(--drm-primary-050, #fff2ea);
      --c-text: var(--drm-text, #4d4d4d);
      --c-text-strong: var(--drm-text-strong, #1e1e1e);
      --c-muted: var(--drm-text-muted, #9e8c88);
      --c-bg: var(--drm-bg, #ffffff);
      --c-surface: var(--drm-surface, #ffffff);
      --c-surface-2: var(--drm-surface-2, #f4f8fb);
      --c-hair: var(--drm-hairline, #efe7e4);
      --c-danger: var(--drm-danger, #c0392b);
      --r-sm: var(--drm-r-sm, 10px);
      --r-md: var(--drm-r-md, 16px);
      --r-lg: var(--drm-r-lg, 22px);
      --r-pill: var(--drm-r-pill, 999px);
      --sp-2: var(--drm-sp-2, 8px);
      --sp-3: var(--drm-sp-3, 12px);
      --sp-4: var(--drm-sp-4, 16px);
      --sp-5: var(--drm-sp-5, 20px);
      --sp-6: var(--drm-sp-6, 24px);
      --gutter: var(--drm-mobile-gutter, 15px);
      --container: var(--drm-container, 1180px);
      --ease: var(--drm-ease, cubic-bezier(.22,.61,.36,1));
      --fast: var(--drm-fast, .16s);
      --base: var(--drm-base, .28s);
      --font: var(--drm-font, "Dermosa", -apple-system, "Segoe UI", Tahoma, sans-serif);
      font-family: var(--font); color: var(--c-text); background: var(--c-bg);
      box-sizing: border-box; direction: rtl;
      touch-action: manipulation; /* disable double-tap zoom within the module */
    }
    .drm-closet *, .drm-closet *::before, .drm-closet *::after{ box-sizing: border-box; }
    /* verified (admin) badge */
    .drm-verified{ display:inline-flex; align-items:center; justify-content:center;
      width:14px; height:14px; margin-inline-start:3px; color:var(--c-primary);
      vertical-align:-2px; flex-shrink:0; }
    .drm-verified svg{ width:100%; height:100%; display:block; }
    /* no mobile tap-highlight; text buttons never get a button-like bg */
    .drm-closet button{ -webkit-tap-highlight-color: transparent; }
    .drm-cl__seeall, .drm-cl__seeall:hover, .drm-cl__seeall:focus,
    .drm-cl__seeall:active, .drm-cl__seeall:focus-visible{ background:none; outline:none; }
    .drm-act, .drm-act:hover, .drm-act:focus, .drm-act:active{ background:none; }

    .drm-closet.drm-module{ max-width: var(--container); margin-inline: auto; padding-inline: 0; }
    @media (max-width: 980px){
      .drm-closet.drm-module{ padding-inline: calc(var(--gutter) - 5px); }
    }

    /* ---------------- section head ---------------- */
    .drm-cl__head{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap: var(--sp-3); margin-bottom: 18px; /* +10px breathing room */
    }
    .drm-cl__title{
      font-size: clamp(15px, 1.7vw, 18px); font-weight: 800;
      color: var(--c-text-strong); margin:0; letter-spacing:-.01em; line-height:1.2;
    }
    .drm-cl__title-hl{ color:var(--c-primary); }
    .drm-cl__seeall{
      background:none; border:none; cursor:pointer; font-family:inherit;
      color: var(--c-primary); font-weight:600; font-size:12px; /* one weight heavier, same size */
      display:inline-flex; align-items:center; gap:4px;
      padding:4px 2px; border-radius: var(--r-sm);
      transition: opacity var(--fast) var(--ease); flex-shrink:0;
    }
    .drm-cl__seeall:hover{ opacity:.65; }
    .drm-cl__seeall svg{ width:12px; height:12px; }

    /* ---------------- slider ---------------- */
    .drm-cl__sliderwrap{ position:relative; }
    .drm-cl__slider{
      display:flex; gap: var(--sp-3);
      overflow-x:auto; scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch; scrollbar-width:none;
      padding-bottom: 4px; scroll-padding-inline-start: 2px;
    }
    /* slider edge effect removed per request (no blur / no white veil) */
    @media (max-width:560px){ }
    .drm-cl__slider::-webkit-scrollbar{ display:none; }

    /* card: app-like, NO hover lift / shadow / transform */
    .drm-cl__card{
      scroll-snap-align:start; flex:0 0 auto;
      width: 300px; height: 330px; cursor:pointer;
      background: #faf8f7; /* slightly lighter, mellower neutral-warm */
      border:1px solid transparent;
      border-radius: var(--r-lg);
      overflow:hidden; display:flex; flex-direction:column;
      padding: var(--sp-4);
    }
    /* desktop: show 4.5 across the boxed container (half card hints scrollability) */
    @media (min-width:981px){
      .drm-cl__card{ width: calc((var(--container) - (4 * var(--sp-3))) / 4.5); min-width:220px; height:330px; }
    }
    @media (max-width:560px){ .drm-cl__card{ width: 286px; height: 322px; } }

    .drm-cl__user{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
    .drm-cl__avatar{
      width:36px; height:36px; border-radius: var(--r-pill);
      display:grid; place-items:center; color:#fff; font-weight:800; font-size:15px; flex-shrink:0;
    }
    .drm-cl__meta{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
    .drm-cl__name{ font-size:13.5px; font-weight:700; color:var(--c-text-strong);
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    /* mood tag now sits at the far (left) end, facing name */
    .drm-cl__moodmini{
      display:inline-flex; align-items:center; gap:3px; flex-shrink:0; align-self:center;
      background:#6c1410; border-radius:var(--r-pill);
      padding:4px 9px; font-size:11px; font-weight:700; color:#f4f8fb;
    }
    .drm-cl__moodmini .e{ font-size:12px; line-height:1; }

    .drm-cl__text{
      font-size:13.5px; line-height:1.75; color:var(--c-text); margin:0 0 10px;
      display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    }
    .drm-cl__media{
      position:relative; border-radius: var(--r-md); overflow:hidden;
      background: var(--c-surface-2); flex:1; min-height:0;
    }
    .drm-cl__media img{ width:100%; height:100%; object-fit:cover; display:block; }
    .drm-cl__media--none{
      display:grid; place-items:center; font-size:34px;
      background:var(--c-primary-050); color:var(--c-primary);
    }
    /* slider card icon row: tighter so the 5 items (incl. time) always fit */
    .drm-cl__card .drm-actions{ gap:11px; }
    .drm-cl__card .drm-act{ min-width:0; }

    /* icon row (Twitter style: small thin icon + number) — 30% smaller, evenly laid out */
    .drm-actions{
      display:flex; align-items:center; gap:14px;
      padding-top:11px; margin-top:11px; border-top:1px solid var(--c-hair);
    }
    .drm-act{
      background:none; border:none; cursor:pointer; font-family:inherit;
      display:inline-flex; align-items:center; gap:4px;
      font-size:11px; font-weight:600; color:var(--c-muted);
      padding:0; border-radius: var(--r-sm); transition: color var(--fast) var(--ease);
      flex:0 0 auto; line-height:1;
    }
    .drm-act svg{ width:13px; height:13px; transition: transform var(--fast) var(--ease); flex-shrink:0; }
    .drm-act:hover{ color:var(--c-primary); }
    .drm-act .drm-num{ font-variant-numeric: tabular-nums; }
    .drm-act.is-liked{ color:var(--c-primary); }
    .drm-act.is-liked svg{ fill:var(--c-primary); transform:scale(1.1); }
    .drm-act--end{ justify-content:flex-end; }
    /* the time sits at the far (left) end, never overflows the card */
    .drm-act--time{ color:var(--c-muted); font-weight:500; font-size:10.5px;
      cursor:default; gap:0; margin-inline-start:auto; white-space:nowrap; }
    .drm-act--time:hover{ color:var(--c-muted); }

    /* ---------------- panels (fade + scale) ---------------- */
    .drm-cl__overlay{
      position:fixed; inset:0; z-index:99990;
      background: rgba(30,30,30,.40);
      -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
      opacity:0; visibility:hidden; transition: opacity var(--base) var(--ease), visibility var(--base);
    }
    .drm-cl__overlay.is-open{ opacity:1; visibility:visible; }

    .drm-cl__sheet{
      position:fixed; inset-block:0; inset-inline:0; margin-inline:auto;
      width:min(560px, 100%); background:var(--c-bg);
      display:flex; flex-direction:column;
      opacity:0; transform: scale(.96) translateY(10px); transform-origin:center bottom;
      transition: opacity var(--base) var(--ease), transform var(--base) var(--ease);
      box-shadow:0 0 60px rgba(30,30,30,.18);
    }
    .drm-cl__overlay.is-open .drm-cl__sheet{ opacity:1; transform: scale(1) translateY(0); }
    /* desktop: more top/bottom clearance from the monitor edges */
    @media (min-width:561px){ .drm-cl__sheet{ inset-block:48px; border-radius:var(--r-lg); overflow:hidden; } }

    /* narrower header */
    .drm-cl__sheethead{
      display:grid; grid-template-columns:34px 1fr 40px; align-items:center;
      padding:7px var(--sp-4); border-bottom:1px solid var(--c-hair);
      flex-shrink:0; background:#fff; position:sticky; inset-block-start:0; z-index:3;
    }
    .drm-cl__sheethead--feed{ grid-template-columns:40px 1fr 34px; }
    /* start-aligned header: title hugs the header start (right in RTL), back at the end */
    .drm-cl__sheethead--start{ display:flex; align-items:center; justify-content:space-between; }
    /* close = plain icon, no circle bg */
    .drm-cl__close{
      width:34px; height:34px; border:none; background:none; cursor:pointer;
      display:grid; place-items:center; color:var(--c-text-strong); padding:0;
      transition: color var(--fast) var(--ease);
    }
    .drm-cl__close:hover{ color:var(--c-primary); }
    .drm-cl__close svg{ width:21px; height:21px; }
    .drm-cl__brand{ text-align:center; }
    .drm-cl__brand b{ font-size:16px; font-weight:900; color:var(--c-primary); letter-spacing:.01em; }
    .drm-cl__brand span{ display:block; font-size:10.5px; color:var(--c-muted); font-weight:500; }
    .drm-cl__brandimg{ width:auto; max-width:min(72vw,260px); object-fit:contain; display:inline-block; vertical-align:middle; }
    /* notification bell (feed header, right) */
    .drm-cl__bell{
      position:relative; width:34px; height:34px; border:none; background:none; cursor:pointer;
      display:grid; place-items:center; color:var(--c-text-strong); padding:0;
      transition: color var(--fast) var(--ease);
    }
    .drm-cl__bell:hover{ color:var(--c-primary); }
    .drm-cl__bell svg{ width:21px; height:21px; }
    .drm-cl__belldot{
      position:absolute; inset-block-start:4px; inset-inline-start:4px;
      width:9px; height:9px; border-radius:var(--r-pill);
      background:var(--c-primary); border:2px solid #fff; display:none;
    }
    .drm-cl__belldot.is-on{ display:block; }
    /* composer/notif header title: bullet + label, flush to start */
    .drm-cl__headtitle{ display:flex; align-items:center; gap:8px; justify-content:flex-start; }
    .drm-cl__headtitle b{ font-size:15px; font-weight:600; color:var(--c-text-strong); }
    .drm-cl__headtitle .bul{ width:8px; height:8px; border-radius:var(--r-pill); background:var(--c-primary); flex-shrink:0; }
    .drm-cl__headtitle .sub{ font-size:12px; color:var(--c-muted); font-weight:500; }

    .drm-cl__sheetbody{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; position:relative; }

    /* ---- chat-box composer, docked to the bottom edge (Telegram-style) ---- */
    .drm-feed__bottomspace{ height:84px; } /* room so last post clears the bottom bar */
    .drm-cl__composer{
      display:flex; align-items:center; gap:11px;
      padding:14px var(--sp-4); cursor:pointer;
    }
    .drm-cl__composer--bar{
      position:absolute; inset-block-end:0; inset-inline:0; z-index:6;
      background:#fff; border-top:1px solid var(--c-hair);
      padding:10px var(--sp-4);
    }
    .drm-cl__composer-av{ width:42px; height:42px; font-size:16px; flex-shrink:0; }
    .drm-cl__composer-box{
      flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between;
      gap:10px; background:var(--c-surface-2); border:1px solid var(--c-hair);
      border-radius:var(--r-pill); padding:0; min-height:48px; overflow:hidden;
      transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
    }
    .drm-cl__composer:hover .drm-cl__composer-box{ border-color:var(--c-primary); }
    .drm-cl__composer-ph{ color:var(--c-muted); font-size:14px; white-space:nowrap;
      overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; padding-inline-start:18px; }
    .drm-cl__composer-tools{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
    .drm-cl__composer-tool{ display:grid; place-items:center; color:var(--c-muted); font-size:16px; line-height:1; }
    .drm-cl__composer-tool svg{ width:18px; height:18px; }
    /* + button: fills the box height AND sits flush at the very end (no gap) */
    .drm-cl__composer-add{
      width:48px; height:48px; flex-shrink:0; border-radius:var(--r-pill);
      background:var(--c-primary); color:#fff; display:grid; place-items:center;
      transition: background var(--fast) var(--ease);
    }
    .drm-cl__composer:hover .drm-cl__composer-add{ background:var(--c-primary-700); }
    .drm-cl__composer-add svg{ width:22px; height:22px; }

    /* feed post */
    .drm-feed__post{ padding:var(--sp-4); border-bottom:1px solid var(--c-hair); }
    .drm-feed__top{ display:flex; align-items:flex-start; gap:11px; }
    .drm-feed__top .drm-cl__avatar{ width:42px; height:42px; font-size:16px; }
    .drm-feed__namerow{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
    .drm-feed__name{ font-size:14.5px; font-weight:700; color:var(--c-text-strong); }
    .drm-feed__dot{ color:var(--c-muted); font-size:10px; }
    .drm-feed__time{ font-size:11px; color:var(--c-muted); font-weight:400; } /* smaller, lighter */
    .drm-feed__moodtag{
      display:inline-flex; align-items:center; gap:4px; margin-inline-start:auto;
      background:#6c1410; border-radius:var(--r-pill);
      padding:4px 10px; font-size:12px; font-weight:700; color:#f4f8fb;
    }
    .drm-feed__text{ font-size:12.5px; line-height:1.85; color:var(--c-text); margin:9px 0 0; }
    .drm-feed__media{
      margin-top:var(--sp-3); border-radius:var(--r-md); overflow:hidden;
      border:1px solid var(--c-hair); background:var(--c-surface-2);
    }
    .drm-feed__media img{ width:100%; display:block; max-height:440px; object-fit:cover; }

    .drm-feed__product{
      margin-top:var(--sp-3); display:flex; align-items:center; gap:11px;
      padding:10px; border:1px solid var(--c-hair); border-radius:var(--r-md);
      background:var(--c-surface); text-decoration:none; transition: border-color var(--fast) var(--ease);
    }
    .drm-feed__product:hover{ border-color:var(--c-primary); }
    .drm-feed__product img{ width:46px; height:46px; border-radius:var(--r-sm); object-fit:cover; flex-shrink:0; }
    .drm-feed__pinfo{ display:flex; flex-direction:column; gap:2px; min-width:0; }
    .drm-feed__plabel{ font-size:11px; color:var(--c-muted); display:flex; align-items:center; gap:4px; }
    .drm-feed__pname{ font-size:13px; font-weight:700; color:var(--c-text-strong);
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .drm-feed__pprice{ font-size:12.5px; color:var(--c-primary); font-weight:700; margin-inline-start:auto; flex-shrink:0; }

    /* feed action row — same small icon set as slider */
    .drm-feed__actions{ display:flex; align-items:center; gap:18px; margin-top:13px; }
    .drm-feed__actions .drm-act{ font-size:11.5px; }
    .drm-feed__actions .drm-act svg{ width:15px; height:15px; }
    .drm-feed__actions .drm-act--end{ margin-inline-start:auto; }

    .drm-feed__replies{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--c-hair); display:none; }
    .drm-feed__replies.is-open{ display:block; }
    .drm-reply{ display:flex; gap:9px; margin-bottom:12px; align-items:flex-start; }
    .drm-reply .drm-cl__avatar{ width:30px; height:30px; font-size:12px; flex-shrink:0; }
    .drm-reply__bubble{ background:var(--c-surface-2); border-radius:var(--r-md); padding:9px 12px; flex:1; }
    .drm-reply__name{ font-size:12.5px; font-weight:700; color:var(--c-text-strong); }
    .drm-reply__text{ font-size:13px; line-height:1.6; color:var(--c-text); margin-top:2px; }
    .drm-reply__time{ font-size:10px; color:var(--c-muted); font-weight:400; margin-top:5px;
      text-align:left; opacity:.85; }
    /* per-comment actions */
    .drm-reply__meta{ display:flex; align-items:center; gap:12px; margin-top:5px; }
    .drm-reply__meta .drm-reply__time{ margin-top:0; }
    .drm-reply__replybtn{ background:none; border:none; cursor:pointer; font-family:inherit;
      font-size:11px; font-weight:700; color:var(--c-muted); padding:0;
      transition:color var(--fast) var(--ease); }
    .drm-reply__replybtn:hover{ color:var(--c-primary); }
    /* Telegram-style "in reply to" quote inside a nested bubble */
    .drm-reply__quote{ display:flex; align-items:center; gap:6px; margin:4px 0 4px;
      font-size:11px; color:var(--c-muted); }
    .drm-reply__quote b{ color:var(--c-primary); font-weight:700; }
    .drm-reply__quotebar{ width:3px; height:13px; border-radius:2px; background:var(--c-primary); flex-shrink:0; }
    /* collapsible "view N replies" / "hide" toggle */
    .drm-reply__seemore{ display:flex; align-items:center; gap:8px; margin:2px 0 12px 39px;
      background:none; border:none; cursor:pointer; font-family:inherit; padding:0; }
    .drm-reply__seeline{ width:24px; height:1px; background:var(--c-hair); }
    .drm-reply__seetxt{ font-size:11.5px; font-weight:700; color:var(--c-muted);
      transition:color var(--fast) var(--ease); }
    .drm-reply__seemore:hover .drm-reply__seetxt{ color:var(--c-primary); }
    .drm-reply__thread{ display:none; }
    .drm-reply__thread.is-open{ display:block; }
    /* nested replies are the SAME size and width as top-level — Telegram style:
       distinguished only by the "in reply to" quote, not by indentation */
    .drm-reply__thread .drm-reply{ margin-inline-start:0; }
    /* "replying to" banner above the post comment input (Telegram style) */
    .drm-reply__replyingto{ display:none; align-items:center; gap:8px;
      margin-top:10px; padding:8px 12px; background:var(--c-surface-2);
      border-radius:var(--r-md); font-size:12px; color:var(--c-muted); }
    .drm-reply__replyingto.is-open{ display:flex; }
    .drm-reply__replyingtxt{ flex:1; min-width:0; }
    .drm-reply__replyingtxt b{ color:var(--c-text-strong); font-weight:700; }
    .drm-reply__cancelreply{ width:24px; height:24px; flex-shrink:0; border:none; background:none;
      cursor:pointer; color:var(--c-muted); display:grid; place-items:center; padding:0; }
    .drm-reply__cancelreply:hover{ color:var(--c-primary); }
    .drm-reply__cancelreply svg{ width:15px; height:15px; }
    .drm-reply__form{ display:flex; align-items:center; gap:8px; margin-top:6px; }
    .drm-reply__form input{
      flex:1; height:44px; font-family:inherit; font-size:16px;
      border:1px solid var(--c-hair); border-radius:var(--r-pill);
      padding:0 16px; background:var(--c-surface-2); color:var(--c-text-strong);
      outline:none; transition: border-color var(--fast) var(--ease);
    }
    .drm-reply__form input:focus-visible{ border-color:var(--c-primary); }
    .drm-reply__send{
      width:44px; height:44px; flex-shrink:0; border:none; cursor:pointer;
      border-radius:var(--r-pill); background:var(--c-primary); color:#fff; display:grid; place-items:center;
    }
    .drm-reply__send svg{ width:18px; height:18px; }

    /* ---------------- notifications (Instagram-style) ---------------- */
    .drm-notif__group{ padding:var(--sp-4) var(--sp-4) 4px; }
    .drm-notif__gtitle{ font-size:15px; font-weight:800; color:var(--c-text-strong); margin:0 0 6px; }
    .drm-notif__row{
      display:flex; align-items:center; gap:11px; padding:10px 0; cursor:pointer;
      border-radius:var(--r-md); transition: background var(--fast) var(--ease);
    }
    .drm-notif__row:hover{ background:var(--c-surface-2); }
    .drm-notif__av{ width:44px; height:44px; border-radius:var(--r-pill); flex-shrink:0;
      display:grid; place-items:center; color:#fff; font-weight:800; font-size:16px; }
    .drm-notif__txt{ flex:1; min-width:0; font-size:13.5px; line-height:1.6; color:var(--c-text); }
    .drm-notif__txt b{ color:var(--c-text-strong); font-weight:700; font-size:12.5px; } /* smaller names */
    .drm-notif__time{ color:var(--c-muted); font-size:12px; }
    .drm-notif__thumb{ width:38px; height:38px; border-radius:10px;
      flex-shrink:0; background:var(--c-surface-2); overflow:hidden; display:block;
      -webkit-mask-image:-webkit-radial-gradient(#fff, #000); /* forces clip on iOS Safari */ }
    .drm-notif__thumb img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
    .drm-notif__empty{ display:flex; flex-direction:column; align-items:center; justify-content:center;
      text-align:center; padding:70px var(--sp-5); color:var(--c-muted); min-height:50vh; }
    .drm-notif__empty svg{ width:54px; height:54px; opacity:.45; margin:0 0 14px; display:block; }
    .drm-notif__empty p{ margin:0; font-size:14.5px; font-weight:600; color:var(--c-muted); }

    /* ---------------- composer ---------------- */
    .drm-comp{ display:flex; flex-direction:column; height:100%; }
    .drm-comp__body{ flex:1; overflow-y:auto; padding:var(--sp-4); }
    .drm-comp__row{ display:flex; gap:11px; }
    .drm-comp__row .drm-cl__avatar{ width:42px; height:42px; font-size:16px; }
    .drm-comp__field{
      width:100%; min-height:96px; resize:none; font-family:inherit;
      font-size:16px; line-height:1.8; color:var(--c-text-strong);
      border:none; outline:none; background:transparent; padding:14px 16px;
    }
    .drm-comp__field::placeholder{ color:var(--c-muted); }

    .drm-comp__sec{ margin-top:var(--sp-5); }
    .drm-comp__label{ font-size:13px; font-weight:700; color:var(--c-text-strong);
      margin:0 0 12px; display:flex; align-items:center; gap:6px; }
    .drm-comp__label .opt{ font-weight:400; color:var(--c-muted); font-size:12px; }

    .drm-comp__moods{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
    .drm-mood-opt{
      display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer;
      border:1px solid var(--c-hair); background:#fff; border-radius:var(--r-md);
      padding:11px 8px; font-family:inherit; font-size:12.5px; font-weight:700;
      color:var(--c-text); transition: all var(--fast) var(--ease); min-width:0;
    }
    .drm-mood-opt .e{ font-size:15px; line-height:1; }
    .drm-mood-opt span:last-child{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .drm-mood-opt:hover{ border-color:var(--c-primary); }
    .drm-mood-opt.is-active{ background:var(--c-primary-050); border-color:var(--c-primary); color:var(--c-primary); }

    .drm-comp__chips{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .drm-comp__chip{
      display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
      border:1px dashed var(--c-muted); background:#fff; border-radius:var(--r-md);
      padding:14px 12px; font-family:inherit; font-size:13px; font-weight:600;
      color:var(--c-text); transition: all var(--fast) var(--ease);
    }
    .drm-comp__chip:hover{ border-color:var(--c-primary); color:var(--c-primary); background:var(--c-primary-050); }
    .drm-comp__chip svg{ width:18px; height:18px; flex-shrink:0; }
    /* upload-status note under the attach buttons */
    .drm-comp__note{ margin-top:8px; font-size:12px; line-height:1.6; min-height:1em;
      color:var(--c-muted); display:flex; align-items:center; gap:6px; }
    .drm-comp__note.is-err{ color:var(--c-danger); font-weight:600; }
    .drm-comp__note.is-ok{ color:var(--c-primary); }
    .drm-comp__note svg{ width:14px; height:14px; flex-shrink:0; }

    /* tagged-product card inside the composer */
    .drm-comp__product{ margin-top:12px; position:relative; display:flex; align-items:center; gap:12px;
      background:var(--c-surface-2); border:1px solid var(--c-hair); border-radius:var(--r-md); padding:10px 12px; }
    .drm-comp__product img{ width:52px; height:52px; border-radius:var(--r-sm); object-fit:cover; flex-shrink:0; background:#fff; }
    .drm-comp__pbody{ flex:1; min-width:0; }
    .drm-comp__plabel{ display:block; font-size:11px; color:var(--c-primary); font-weight:700; margin-bottom:2px; }
    .drm-comp__pname{ display:block; font-size:13px; color:var(--c-text-strong); font-weight:600;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .drm-comp__pprice{ display:block; font-size:12px; color:var(--c-text); margin-top:2px; }
    .drm-comp__premove{ width:30px; height:30px; flex-shrink:0; border:none; background:#fff; cursor:pointer;
      border-radius:var(--r-pill); color:var(--c-muted); display:grid; place-items:center;
      transition:color var(--fast) var(--ease), background var(--fast) var(--ease); }
    .drm-comp__premove:hover{ color:var(--c-danger); background:#fdecea; }
    .drm-comp__premove svg{ width:15px; height:15px; }

    .drm-comp__preview{ margin-top:12px; position:relative; display:none; }
    .drm-comp__preview.is-shown{ display:block; }
    .drm-comp__preview img{ width:100%; max-height:240px; object-fit:cover;
      border-radius:var(--r-md); border:1px solid var(--c-hair); }
    .drm-comp__rm{
      position:absolute; inset-block-start:8px; inset-inline-end:8px;
      width:30px; height:30px; border-radius:var(--r-pill); border:none; cursor:pointer;
      background:rgba(30,30,30,.6); color:#fff; display:grid; place-items:center;
    }

    .drm-comp__foot{
      flex-shrink:0; padding:var(--sp-3) var(--sp-4);
      border-top:1px solid var(--c-hair); display:flex; align-items:center;
      justify-content:space-between; gap:var(--sp-3); background:#fff;
    }
    .drm-comp__count{ font-size:12.5px; color:var(--c-muted); }
    .drm-comp__count.is-over{ color:var(--c-primary); font-weight:700; }
    .drm-comp__submit{
      border:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:15px;
      color:#fff; background:var(--c-primary); border-radius:var(--r-pill);
      padding:12px 30px; transition: background var(--fast) var(--ease), opacity var(--fast) var(--ease);
    }
    .drm-comp__submit:hover{ background:var(--c-primary-700); }
    .drm-comp__submit:disabled{ opacity:.4; cursor:not-allowed; }

    /* ---- small confirm dialog (report) ---- */
    .drm-confirm{
      position:fixed; inset:0; z-index:99995; display:grid; place-items:center;
      background:rgba(30,30,30,.40);
      -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
      opacity:0; visibility:hidden; transition: opacity var(--base) var(--ease), visibility var(--base);
    }
    .drm-confirm.is-open{ opacity:1; visibility:visible; }
    .drm-confirm__card{
      width:min(360px,90%); background:#fff; border-radius:var(--r-lg);
      padding:var(--sp-5); text-align:center;
      transform:scale(.94); transition:transform var(--base) var(--ease);
    }
    .drm-confirm.is-open .drm-confirm__card{ transform:scale(1); }
    .drm-confirm__ic{ width:48px; height:48px; border-radius:var(--r-pill);
      background:var(--c-primary-050); color:var(--c-primary);
      display:grid; place-items:center; margin:0 auto 14px; }
    .drm-confirm__ic svg{ width:24px; height:24px; }
    .drm-confirm__t{ font-size:16px; font-weight:800; color:var(--c-text-strong); margin:0 0 6px; }
    .drm-confirm__d{ font-size:13.5px; line-height:1.7; color:var(--c-text); margin:0 0 18px; }
    .drm-confirm__btns{ display:flex; gap:10px; }
    .drm-confirm__btn{ flex:1; border:none; cursor:pointer; font-family:inherit; font-weight:700;
      font-size:14px; padding:11px; border-radius:var(--r-pill); transition:opacity var(--fast) var(--ease); }
    .drm-confirm__btn:hover{ opacity:.85; }
    .drm-confirm__btn--ghost{ background:var(--c-surface-2); color:var(--c-text-strong); }
    .drm-confirm__btn--primary{ background:var(--c-primary); color:#fff; }
    .drm-confirm__btn--danger{ background:var(--c-danger); color:#fff; }

    .drm-cl__toast{
      position:fixed; inset-block-end:24px; inset-inline-start:20px; /* bottom-left, clear of FAB */
      width:max-content; max-width:calc(100% - 90px); z-index:99999;
      background:var(--c-text-strong); color:#fff; font-size:14px; font-weight:600;
      padding:13px 22px; border-radius:var(--r-pill); box-shadow:0 8px 24px rgba(30,30,30,.25);
      opacity:0; transform:translateY(12px); pointer-events:none;
      transition: opacity var(--base) var(--ease), transform var(--base) var(--ease);
      display:inline-flex; align-items:center; gap:8px;
    }
    .drm-cl__toast.is-shown{ opacity:1; transform:translateY(0); }
    .drm-cl__toast.is-success{ background:#1e9e57; color:#fff; box-shadow:0 8px 24px rgba(30,158,87,.32); }
    .drm-cl__toast svg{ width:17px; height:17px; flex-shrink:0; }

    .drm-skel{ background:var(--c-surface-2); border-radius:var(--r-sm); position:relative; overflow:hidden; }
    .drm-skel::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
      animation: drm-shimmer 1.3s infinite; }
    @keyframes drm-shimmer{ 100%{ transform:translateX(100%); } }
    .drm-lazy{ opacity:0; transition:opacity var(--base) var(--ease); }
    .drm-lazy.is-loaded{ opacity:1; }
    /* feed skeleton (progressive loading placeholder) */
    .drm-feed__skelpost{ padding:16px var(--sp-4); border-bottom:8px solid var(--c-surface-2); }
    .drm-feed__skelrow{ display:flex; gap:11px; align-items:center; margin-bottom:12px; }
    .drm-skel--av{ width:44px; height:44px; border-radius:var(--r-pill); flex-shrink:0; }
    .drm-skel--name{ width:120px; height:13px; border-radius:var(--r-sm); }
    .drm-skel--line{ width:100%; height:11px; border-radius:var(--r-sm); margin-bottom:8px; }
    .drm-skel--line.short{ width:70%; }
    .drm-skel--media{ width:100%; height:190px; border-radius:var(--r-md); margin-top:10px; }

    @media (prefers-reduced-motion: reduce){
      .drm-closet *{ transition:none !important; animation:none !important; }
      .drm-cl__overlay.is-open .drm-cl__sheet,
      .drm-confirm.is-open .drm-confirm__card{ transform:none; }
      .drm-lazy{ opacity:1; }
    }