/* components.css: the DN Edit component layer (owner DS, PRODUCT_V2 2.3 + 11.3). Every UI module builds with these
   classes (or the builders in components.js); no module styles its own buttons, chips, tiles, sheets or file rows.
   Needs tokens.css (base.css @imports both). All classes start with "ds-". Layout uses logical properties, so the
   Arabic pages mirror by themselves; media controls stay left-to-right (R-AR §4). States are attributes, not classes:
   aria-pressed / aria-selected / aria-checked / aria-invalid / aria-busy / aria-disabled / data-tone / data-status.
   Catalogue with markup: docs/v2/design-system.md. Screens: docs/v2/screens/. */

/* ============ 0. helpers ============ */
.ds-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ds-container{width:min(var(--w-page),100%);margin-inline:auto;padding-inline:var(--pad)}
.ds-stack{display:flex;flex-direction:column;gap:var(--gap,var(--s-4))}
.ds-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap,var(--s-3))}
.ds-grid{display:grid;gap:var(--gap,var(--s-4));grid-template-columns:repeat(auto-fill,minmax(min(var(--min,260px),100%),1fr))}
.ds-divider{height:1px;margin:var(--s-6) 0;border:0;background:var(--line)}
.ds-nw,.ds-size{white-space:nowrap}
[class^="ds-"]:focus-visible,[class*=" ds-"]:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-o)}

/* ============ 1. type ============ */
.ds-hero{margin:0;font:var(--fw-hero) var(--fs-hero)/var(--lh-hero) var(--font-display);letter-spacing:var(--track-hero);text-wrap:balance}
.ds-h1{margin:0;font:var(--fw-h1) var(--fs-h1)/var(--lh-h1) var(--font-display);letter-spacing:var(--track-h1);text-wrap:balance}
.ds-h2{margin:0;font:var(--fw-h2) var(--fs-h2)/var(--lh-h2) var(--font-display);letter-spacing:var(--track-h2);text-wrap:balance}
.ds-h3{margin:0;font:var(--fw-h3) var(--fs-h3)/var(--lh-h3) var(--font-title);letter-spacing:var(--track-h3)}
.ds-lede{margin:0;max-width:var(--measure);color:var(--fg-2);font-size:var(--fs-lede);line-height:var(--lh-lede);text-wrap:pretty}
.ds-body{margin:0;max-width:var(--measure);color:var(--fg-2);font-size:var(--fs-body);line-height:var(--lh-body);text-wrap:pretty}
.ds-small{margin:0;color:var(--fg-3);font-size:var(--fs-sm);line-height:var(--lh-sm)}
.ds-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;margin:0;color:var(--fg-3);font-size:var(--fs-xs);line-height:var(--lh-xs)}
.ds-meta>*+*::before{content:"·";margin-inline:8px;color:var(--fg-3)}
.ds-meta--stack{flex-direction:column;align-items:flex-start;gap:2px}
.ds-meta--stack>*+*::before{content:none}
.ds-label{margin:0;color:var(--fg-3);font:500 var(--fs-label)/var(--lh-label) var(--font-label);letter-spacing:var(--track-label);text-transform:var(--case-label)}
.ds-kicker{display:inline-flex;align-items:center;gap:10px;margin:0;padding:8px 14px;border-radius:var(--r-pill);background:var(--glass-2);box-shadow:var(--edge);color:var(--fg-2);
  font:500 var(--fs-label)/var(--lh-label) var(--font-label);letter-spacing:var(--track-label);text-transform:var(--case-label)}
.ds-kicker>i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--red-2);box-shadow:0 0 10px var(--red-2);animation:ds-pulse 1.6s var(--ease-io) 3}
.ds-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.ds-num{font-variant-numeric:tabular-nums}
.ds-price{font:800 var(--fs-price)/var(--lh-price) var(--font-num);letter-spacing:var(--track-price);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.ds-price--sm{font-size:24px}
.ds-link{color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--line-strong);text-underline-offset:.22em;transition:text-decoration-color var(--dur-2)}
.ds-link:hover{text-decoration-color:var(--red-2)}
/* a link that stands alone (back, side nav, "Delete this kit"), not inside a sentence: a real target, 24 px / 44 px on touch */
.ds-link--solo{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--tap-min)}
@media (pointer:coarse){.ds-link--solo{min-height:var(--tap)}}
.ds-kbd{display:inline-block;min-width:22px;padding:2px 6px;border-radius:var(--r-xs);background:var(--ink-1);box-shadow:var(--edge-2);color:var(--fg-2);font:500 12px/1.4 var(--font-mono);text-align:center;direction:ltr}

/* ============ 2. icons (sprite: /assets/ds/icons.svg; builder: icon()) ============ */
.ds-icon{width:var(--icon,20px);height:var(--icon,20px);flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;overflow:visible}
.ds-icon--sm{--icon:16px}.ds-icon--lg{--icon:24px}
html[dir=rtl] .ds-icon--mirror{transform:scaleX(-1)}

/* ============ 3. buttons ============ */
.ds-btn{--_h:var(--h-control);--_px:22px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--_h);margin:0;padding:0 var(--_px);
  border:0;border-radius:var(--r-md);background:var(--ink-3);color:var(--fg);box-shadow:var(--edge-field),var(--sheen);
  font:var(--fw-ui) var(--fs-ui)/var(--lh-btn) var(--font-text);text-decoration:none;white-space:nowrap;max-width:100%;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),color var(--dur-2) var(--ease),transform var(--dur-1) var(--ease)}
.ds-btn:hover{background:var(--ink-4);box-shadow:var(--edge-strong),var(--sheen)}
.ds-btn:active{transform:scale(.98)}
.ds-btn--primary{background:var(--red);color:var(--fg-on-red);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.2)}
.ds-btn--primary:hover{background:var(--red-hover);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.2),var(--glow)}
.ds-btn--secondary{background:var(--ink-3)}
.ds-btn--ghost{background:transparent;color:var(--fg-2);box-shadow:none}
.ds-btn--ghost:hover{background:var(--glass-2);color:var(--fg);box-shadow:var(--edge)}
.ds-btn--danger{background:transparent;color:var(--red-2);box-shadow:inset 0 0 0 1px var(--red-edge)}
.ds-btn--danger:hover{background:var(--red-wash);box-shadow:inset 0 0 0 1px var(--red-2)}
.ds-btn--sm{--_h:var(--h-control-sm);--_px:14px;gap:8px;border-radius:var(--r-sm);font-size:var(--fs-sm)}
.ds-btn--lg{--_h:56px;--_px:28px;font-size:16px}
.ds-btn--block{display:flex;width:100%;white-space:normal;text-align:center;text-wrap:balance;overflow-wrap:anywhere;padding-block:10px}
.ds-btn .ds-icon{--icon:18px}
.ds-btn[disabled],.ds-btn[aria-disabled=true]:not([aria-busy=true]){cursor:not-allowed;background:var(--ink-2);color:var(--fg-disabled);box-shadow:var(--edge);transform:none}
.ds-btn--primary[disabled],.ds-btn--primary[aria-disabled=true]:not([aria-busy=true]){background:#3a1311;color:rgba(255,255,255,.45);box-shadow:none}
.ds-btn[aria-busy=true]{color:transparent!important;cursor:progress}
.ds-btn[aria-busy=true]>*{visibility:hidden}
.ds-btn[aria-busy=true]::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:ds-spin .8s linear infinite}
@media (pointer:coarse){.ds-btn--sm{--_h:var(--tap)}}
.ds-iconbtn{display:inline-grid;place-items:center;flex:none;width:var(--tap);height:var(--tap);margin:0;padding:0;border:0;border-radius:var(--r-md);background:transparent;color:var(--fg-2);
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.ds-iconbtn:hover{background:rgba(255,255,255,.07);color:var(--fg)}
.ds-iconbtn--edge{box-shadow:var(--edge-field)}
.ds-iconbtn--edge:hover{box-shadow:var(--edge-strong)}
.ds-iconbtn--sm{width:36px;height:36px;border-radius:var(--r-sm)}
.ds-iconbtn[disabled]{color:var(--fg-disabled);cursor:not-allowed;background:transparent}
@media (pointer:coarse){.ds-iconbtn--sm{width:var(--tap);height:var(--tap)}}

/* ============ 4. chips, tags, segmented, tabs ============ */
.ds-chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0;padding:0;list-style:none}
.ds-chip{display:inline-flex;align-items:center;gap:8px;min-height:var(--h-chip);margin:0;padding:0 16px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--fg-2);box-shadow:var(--edge-field);
  font:500 var(--fs-sm)/1.2 var(--font-text);white-space:normal;max-width:100%;text-align:center;overflow-wrap:anywhere;padding-block:6px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.ds-chip:hover{background:var(--glass-2);color:var(--fg);box-shadow:var(--edge-strong)}
.ds-chip::before{content:"";flex:none;width:0;height:14px;margin-inline-end:-8px;background:currentColor;opacity:0;transition:width var(--dur-3) var(--ease),opacity var(--dur-3) var(--ease),margin var(--dur-3) var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.ds-chip[aria-pressed=true],.ds-chip[aria-checked=true],.ds-chip[aria-selected=true]{background:var(--ink-5);color:var(--fg);box-shadow:var(--edge-on)}
.ds-chip[aria-pressed=true]::before,.ds-chip[aria-checked=true]::before,.ds-chip[aria-selected=true]::before{width:14px;margin-inline-end:0;opacity:1}
.ds-chip--more::before{display:none}
.ds-chip--more .ds-icon{--icon:16px;margin-inline-start:-4px}
.ds-chip small{color:var(--fg-3);font-size:var(--fs-ctl-xs);font-weight:400;white-space:nowrap}
.ds-chip[aria-pressed=true] small{color:var(--fg-2)}
.ds-chip--sm{--h-chip:32px;padding:4px 12px;font-size:var(--fs-ctl-xs)}
.ds-chip[disabled]{cursor:not-allowed;color:var(--fg-disabled);box-shadow:var(--edge)}
@media (pointer:coarse){.ds-chip--sm{--h-chip:var(--tap)}}

.ds-status{display:inline-flex;align-items:center;gap:7px;min-height:26px;padding:0 10px;border-radius:var(--r-pill);background:var(--glass-2);box-shadow:var(--edge-2);color:var(--fg-2);
  font:500 var(--fs-xs)/1.2 var(--font-text);white-space:nowrap}
.ds-status::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--fg-3)}
.ds-status[data-tone=ok]::before{background:var(--ok)}
.ds-status[data-tone=warn]::before{background:var(--warn)}
.ds-status[data-tone=red]{color:var(--red-2)}
.ds-status[data-tone=red]::before{background:var(--red-2)}
.ds-status[data-tone=live]{color:var(--fg)}
.ds-status[data-tone=live]::before{background:var(--red-2);box-shadow:0 0 0 0 var(--red-glow);animation:ds-ping 1.6s var(--ease-io) 3}
.ds-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--red);color:var(--fg-on-red);font:600 12px/1 var(--font-text);font-variant-numeric:tabular-nums}

.ds-seg{display:inline-flex;gap:4px;max-width:100%;padding:4px;border-radius:var(--r-md);background:var(--ink-1);box-shadow:var(--edge-field)}
.ds-seg>button{min-height:36px;min-width:0;max-width:100%;margin:0;padding:6px 14px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--fg-3);font:500 var(--fs-sm)/1.2 var(--font-text);cursor:pointer;white-space:normal;text-align:center;overflow-wrap:anywhere;
  transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.ds-seg>button:hover{color:var(--fg)}
.ds-seg>button[aria-pressed=true],.ds-seg>button[aria-checked=true]{background:var(--ink-5);color:var(--fg);box-shadow:var(--edge-2)}
.ds-seg--block{display:flex}.ds-seg--block>button{flex:1}
@media (pointer:coarse){.ds-seg>button{min-height:var(--tap);min-width:var(--tap)}}

.ds-tabs{display:flex;gap:var(--s-1);margin:0;padding:0 0 1px;box-shadow:inset 0 -1px 0 var(--line);overflow-x:auto;scrollbar-width:none}
.ds-tabs::-webkit-scrollbar{display:none}
.ds-tab{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);margin:0;padding:0 14px;border:0;background:none;color:var(--fg-3);
  font:500 var(--fs-ui)/1.2 var(--font-text);white-space:nowrap;cursor:pointer;transition:color var(--dur-2) var(--ease)}
.ds-tab:hover{color:var(--fg)}
.ds-tab::after{content:"";position:absolute;inset-inline:14px;bottom:-1px;height:2px;border-radius:var(--r-pill);background:var(--fg);transform:scaleX(0);transition:transform var(--dur-3) var(--ease)}
.ds-tab[aria-selected=true]{color:var(--fg)}
.ds-tab[aria-selected=true]::after{transform:scaleX(1)}
.ds-tab:focus-visible{outline-offset:-2px;border-radius:var(--r-sm)}
.ds-tabpanel{padding-top:var(--s-6)}
.ds-tabpanel:focus-visible{outline-offset:6px;border-radius:var(--r-sm)}

/* ============ 5. tiles and cards ============ */
.ds-tiles{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(min(var(--min,220px),100%),1fr));margin:0;padding:0;list-style:none}
.ds-tiles>li{display:grid;min-width:0;margin:0;padding:0}
.ds-tiles>li>.ds-tile,.ds-tiles>.ds-tile{width:100%;height:100%;min-width:0}
.ds-tile{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:6px;min-height:112px;margin:0;padding:var(--s-5);border:0;border-radius:var(--r-lg);background:var(--ink-2);color:var(--fg);
  box-shadow:var(--edge-field),var(--sheen);font:inherit;text-align:start;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.ds-tile:hover{background:var(--ink-3);box-shadow:var(--edge-strong),var(--sheen)}
.ds-tile:active{transform:scale(.99)}
.ds-tile__media{position:relative;display:block;margin:calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) var(--s-3);aspect-ratio:16/10;overflow:hidden;background:var(--ink-1);
  border-start-start-radius:var(--r-lg);border-start-end-radius:var(--r-lg)}
.ds-tile__media>img,.ds-tile__media>video{display:block;width:100%;height:100%;object-fit:cover}
.ds-tile__icon{display:grid;place-items:center;width:40px;height:40px;margin-bottom:var(--s-2);border-radius:var(--r-sm);background:var(--glass-2);box-shadow:var(--edge-2);color:var(--fg)}
.ds-tile__title{margin:0;font:var(--fw-h3) 17px/1.3 var(--font-title);letter-spacing:var(--track-h3);padding-inline-end:28px}
.ds-tile__body{margin:0;color:var(--fg-3);font-size:var(--fs-sm);line-height:var(--lh-sm)}
.ds-tile__meta{margin-top:auto;padding-top:var(--s-2);color:var(--fg-2);font-size:var(--fs-ctl-xs)}
.ds-tile[aria-pressed=true],.ds-tile[aria-checked=true]{background:var(--ink-3);box-shadow:var(--edge-on),var(--sheen)}
.ds-tile::after{content:"";position:absolute;top:14px;inset-inline-end:14px;width:22px;height:22px;border-radius:50%;box-shadow:var(--edge-field);transition:background var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease)}
.ds-tile[aria-pressed=true]::after,.ds-tile[aria-checked=true]::after{box-shadow:none;background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.ds-tile:has(.ds-tile__media)::after{top:12px;z-index:1;background-color:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8)}
.ds-tile[aria-pressed=true]:has(.ds-tile__media)::after,.ds-tile[aria-checked=true]:has(.ds-tile__media)::after{background-color:var(--red);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.ds-tile--plain::after{display:none}
.ds-tile[disabled]{cursor:not-allowed;opacity:.5}

.ds-card{position:relative;margin:0;padding:var(--s-6);border-radius:var(--r-lg);background:var(--ink-2);box-shadow:var(--edge),var(--sheen)}
.ds-card--glass{background:var(--glass);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
.ds-card--raised{background:var(--ink-3);box-shadow:var(--edge-2),var(--sheen),var(--shadow-2)}
.ds-card--flush{padding:0;overflow:hidden}
.ds-card--link{display:block;color:inherit;text-decoration:none;transition:box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),background var(--dur-2) var(--ease)}
.ds-card--link:hover{background:var(--ink-3);box-shadow:var(--edge-2),var(--sheen),var(--shadow-2);transform:translateY(-2px)}
.ds-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-4)}
.ds-card__title{margin:0;font:var(--fw-h3) var(--fs-h3)/var(--lh-h3) var(--font-title);letter-spacing:var(--track-h3)}
.ds-card__meta{margin:4px 0 0;color:var(--fg-3);font-size:var(--fs-sm);line-height:var(--lh-sm)}
.ds-card__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);margin-top:var(--s-6);padding-top:var(--s-5);box-shadow:inset 0 1px 0 var(--line)}

.ds-mcard{display:flex;flex-direction:column;gap:var(--s-3);min-width:0;color:inherit;text-decoration:none}
.ds-poster{position:relative;display:block;aspect-ratio:var(--ar,16/9);overflow:hidden;border-radius:var(--r-md);background:var(--ink-1);box-shadow:var(--edge)}
.ds-poster>img,.ds-poster>video{display:block;width:100%;height:100%;object-fit:cover}
.ds-poster::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--edge);pointer-events:none}
.ds-poster__tl{position:absolute;top:10px;inset-inline-start:10px;z-index:1}
.ds-poster__br{position:absolute;bottom:10px;inset-inline-end:10px;z-index:1;padding:3px 7px;border-radius:var(--r-xs);background:rgba(0,0,0,.66);color:var(--fg);font:500 12px/1.3 var(--font-mono);direction:ltr}
.ds-poster__tl .ds-status{background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ds-mcard__title{margin:0;font:var(--fw-h3) 16px/1.35 var(--font-title);letter-spacing:var(--track-h3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:var(--clip-pad)}
.ds-mcard__title+.ds-meta{margin-top:-6px}
.ds-mcard:hover .ds-poster{box-shadow:var(--edge-2),var(--shadow-2)}

/* ============ 6. lists: rows, ledger, notes ============ */
.ds-rows{margin:0;padding:0;list-style:none;border-radius:var(--r-lg);background:var(--ink-2);box-shadow:var(--edge),var(--sheen)}
.ds-row{display:flex;align-items:center;gap:var(--s-4);min-height:64px;padding:12px var(--s-4)}
.ds-row+.ds-row{box-shadow:inset 0 1px 0 var(--line)}
.ds-row__icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--r-sm);background:var(--glass-2);box-shadow:var(--edge-2);color:var(--fg)}
.ds-row__main{flex:1;min-width:0;display:grid;gap:2px}
.ds-row__title{margin:0;color:var(--fg);font:500 var(--fs-ui)/1.35 var(--font-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:var(--clip-pad)}
.ds-row__meta{margin:0;color:var(--fg-3);font-size:var(--fs-xs);line-height:var(--lh-xs)}
.ds-row__end{display:flex;align-items:center;gap:var(--s-2);flex:none}
@media (max-width:520px){.ds-row--wrap{flex-wrap:wrap}.ds-row--wrap .ds-row__end{width:100%;justify-content:flex-end}}

.ds-ledger{display:grid;gap:10px;margin:0;padding:0}
.ds-ledger__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);margin:0;color:var(--fg-2);font-size:var(--fs-sm);line-height:var(--lh-sm)}
.ds-ledger__row dd,.ds-ledger__amt{margin:0;color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap}
.ds-ledger__row dt{margin:0}
.ds-ledger__row--free .ds-ledger__amt,.ds-ledger__row--free dd{color:var(--ok)}
.ds-ledger__row--total{margin-top:6px;padding-top:var(--s-4);box-shadow:inset 0 1px 0 var(--line-2);color:var(--fg);font-size:var(--fs-ui);font-weight:600}
.ds-ledger__row--total .ds-ledger__amt,.ds-ledger__row--total dd{font:800 28px/1 var(--font-num);letter-spacing:var(--track-price)}

.ds-notes{display:grid;gap:var(--s-2);margin:0;padding:0;list-style:none}
.ds-note{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:4px var(--s-3);padding:14px var(--s-4);border-radius:var(--r-md);background:var(--ink-2);box-shadow:var(--edge)}
.ds-note__time{display:inline-flex;align-items:center;min-height:28px;padding:0 9px;border:0;border-radius:var(--r-xs);background:var(--ink-5);color:var(--fg);font:500 13px/1 var(--font-mono);direction:ltr;cursor:pointer}
.ds-note__time:hover{background:var(--red);color:var(--fg-on-red)}
@media (pointer:coarse){.ds-note__time{min-height:var(--tap);min-width:var(--tap);justify-content:center}}
.ds-note__text{margin:0;color:var(--fg);font-size:var(--fs-sm);line-height:var(--lh-sm);overflow-wrap:anywhere}
.ds-note__meta{grid-column:2;margin:0;color:var(--fg-3);font-size:var(--fs-xs)}
.ds-note__end{grid-row:1/span 2;grid-column:3}
.ds-note[data-state=done] .ds-note__text{color:var(--fg-3)}
.ds-note[data-state=done] .ds-note__time{background:var(--ink-3);color:var(--fg-3)}
.ds-note[data-state=changing]{box-shadow:inset 0 0 0 1px var(--line-2),inset 3px 0 0 var(--red-2)}
html[dir=rtl] .ds-note[data-state=changing]{box-shadow:inset 0 0 0 1px var(--line-2),inset -3px 0 0 var(--red-2)}

/* ============ 7. forms ============ */
.ds-field{display:grid;gap:8px;min-width:0;margin:0;padding:0;border:0}
.ds-field__label{color:var(--fg);font:500 var(--fs-sm)/1.4 var(--font-text)}
.ds-field__label small{margin-inline-start:6px;color:var(--fg-3);font-weight:400}
.ds-field__hint{margin:0;color:var(--fg-3);font-size:var(--fs-xs);line-height:var(--lh-xs)}
.ds-field__error{display:flex;align-items:flex-start;gap:6px;margin:0;color:var(--red-2);font-size:var(--fs-sm);line-height:var(--lh-sm)}
.ds-field__error:empty{display:none}
.ds-field__error .ds-icon{--icon:16px;margin-top:.15em}
.ds-input,.ds-textarea,.ds-select{display:block;width:100%;min-height:var(--h-control);margin:0;padding:0 16px;border:0;border-radius:var(--r-md);background:var(--ink-1);color:var(--fg);
  box-shadow:var(--edge-field);font:400 16px/1.4 var(--font-text);transition:box-shadow var(--dur-2) var(--ease),background var(--dur-2) var(--ease);-webkit-appearance:none;appearance:none}
.ds-input:hover,.ds-textarea:hover,.ds-select:hover{box-shadow:var(--edge-strong)}
.ds-input:focus,.ds-textarea:focus,.ds-select:focus{background:var(--ink-2);box-shadow:var(--edge-strong)}
.ds-input::placeholder,.ds-textarea::placeholder{color:var(--fg-3);opacity:1}
.ds-input[aria-invalid=true],.ds-textarea[aria-invalid=true],.ds-select[aria-invalid=true]{box-shadow:inset 0 0 0 1px var(--red-2);background:rgba(225,37,27,.06)}
.ds-input[disabled],.ds-textarea[disabled],.ds-select[disabled]{color:var(--fg-disabled);box-shadow:var(--edge);cursor:not-allowed}
.ds-textarea{min-height:120px;padding:12px 16px;line-height:var(--lh-body);resize:vertical}
html[dir=rtl] .ds-input[dir=ltr]::placeholder{direction:rtl;text-align:right}
.ds-select{padding-inline-end:44px;cursor:pointer;
  background:var(--ink-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5l6 6 6-6' fill='none' stroke='%23c4c4c4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/18px}
html[dir=rtl] .ds-select{background-position:left 14px center}
.ds-select option{background:var(--ink-3);color:var(--fg)}
.ds-otp{max-width:300px;font:500 28px/1 var(--font-mono);letter-spacing:.42em;text-align:center;text-indent:.42em;font-variant-numeric:tabular-nums;direction:ltr;min-height:64px}
.ds-check,.ds-radio{position:relative;display:inline-flex;align-items:flex-start;gap:12px;min-height:var(--tap-min);color:var(--fg-2);font-size:var(--fs-sm);line-height:var(--lh-sm);cursor:pointer}
.ds-check>input,.ds-radio>input{flex:none;width:20px;height:20px;margin:1px 0 0;border:0;border-radius:var(--r-xs);background:var(--ink-1);box-shadow:var(--edge-field);-webkit-appearance:none;appearance:none;cursor:pointer;
  transition:background var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.ds-radio>input{border-radius:50%}
.ds-check>input:hover,.ds-radio>input:hover{box-shadow:var(--edge-strong)}
.ds-check>input:checked{background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:none}
.ds-radio>input:checked{background:radial-gradient(circle,#fff 0 4px,var(--red) 4.5px);box-shadow:none}
.ds-check>input[aria-invalid=true]{box-shadow:inset 0 0 0 1px var(--red-2)}
.ds-check>input:focus-visible,.ds-radio>input:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-o)}
.ds-check a{color:var(--fg)}
.ds-check,.ds-radio{min-width:var(--tap-min)}
@media (pointer:coarse){.ds-check,.ds-radio{min-height:var(--tap);min-width:var(--tap);padding-block:10px}.ds-switch{min-height:var(--tap)}}
.ds-switch{display:inline-flex;align-items:center;gap:12px;color:var(--fg-2);font-size:var(--fs-sm);cursor:pointer}
.ds-switch>input{position:relative;flex:none;width:44px;height:26px;margin:0;border:0;border-radius:var(--r-pill);background:var(--ink-5);box-shadow:var(--edge-field);-webkit-appearance:none;appearance:none;cursor:pointer;transition:background var(--dur-3) var(--ease)}
.ds-switch>input::before{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--fg-2);box-shadow:0 1px 3px rgba(0,0,0,.5);transition:transform var(--dur-3) var(--ease),background var(--dur-3) var(--ease)}
.ds-switch>input:checked{background:var(--red);box-shadow:none}
.ds-switch>input:checked::before{transform:translateX(18px);background:#fff}
html[dir=rtl] .ds-switch>input::before{left:auto;right:3px}
html[dir=rtl] .ds-switch>input:checked::before{transform:translateX(-18px)}
.ds-switch>input:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-o)}
.ds-swatches{display:flex;flex-wrap:wrap;gap:var(--s-3);margin:0;padding:0;list-style:none}
.ds-swatch{display:inline-flex;align-items:center;gap:10px;color:var(--fg-2);font:500 13px/1.2 var(--font-mono);direction:ltr}
.ds-swatch__chip{flex:none;width:36px;height:36px;border-radius:var(--r-sm);background:var(--c,#333);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 -8px 16px -10px rgba(0,0,0,.4)}
.ds-dropzone{position:relative;display:grid;place-items:center;align-content:center;gap:var(--s-3);min-height:220px;padding:var(--s-8) var(--s-6);border-radius:var(--r-xl);text-align:center;cursor:pointer;
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.05),transparent 60%),var(--glass);box-shadow:var(--edge-field),var(--sheen);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  transition:box-shadow var(--dur-2) var(--ease),background var(--dur-2) var(--ease)}
.ds-dropzone:hover,.ds-dropzone[data-over]{box-shadow:var(--edge-strong),var(--sheen),inset 0 0 80px -30px var(--red-glow)}
.ds-dropzone:focus-within{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-o)}
.ds-dropzone__orb{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 50% 30%,rgba(225,37,27,.35),rgba(225,37,27,.08));box-shadow:inset 0 0 0 1px var(--red-edge);color:var(--fg)}
.ds-dropzone__orb .ds-icon{--icon:24px}
.ds-dropzone__title{margin:0;font:500 22px/1.25 var(--font-title);letter-spacing:var(--track-h3)}
.ds-dropzone__hint{margin:0;color:var(--fg-3);font-size:var(--fs-sm)}
.ds-dropzone input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}

/* ============ 8. banners, toasts ============ */
.ds-banner{display:flex;align-items:flex-start;gap:var(--s-3);margin:0;padding:14px var(--s-4);border-radius:var(--r-md);background:var(--glass-2);box-shadow:var(--edge-2);color:var(--fg-2);font-size:var(--fs-sm);line-height:var(--lh-sm)}
.ds-banner>.ds-icon{margin-top:.1em;color:var(--fg)}
.ds-banner__body{flex:1;min-width:0;display:grid;gap:2px}
.ds-banner__title{margin:0;color:var(--fg);font-weight:600}
.ds-banner__text{margin:0}
.ds-banner__actions{display:flex;flex-wrap:wrap;gap:var(--s-2);align-self:center}
.ds-banner[data-tone=ok]{background:var(--ok-wash);box-shadow:inset 0 0 0 1px rgba(62,207,142,.35)}
.ds-banner[data-tone=ok]>.ds-icon{color:var(--ok)}
.ds-banner[data-tone=warn]{background:var(--warn-wash);box-shadow:inset 0 0 0 1px rgba(242,201,76,.35)}
.ds-banner[data-tone=warn]>.ds-icon{color:var(--warn)}
.ds-banner[data-tone=error]{background:var(--red-wash);box-shadow:inset 0 0 0 1px var(--red-edge)}
.ds-banner[data-tone=error]>.ds-icon{color:var(--red-2)}
.ds-banner[data-tone=gift]{background:linear-gradient(90deg,rgba(225,37,27,.11),transparent 55%),var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2),inset 3px 0 0 var(--red)}
html[dir=rtl] .ds-banner[data-tone=gift]{background:linear-gradient(270deg,rgba(225,37,27,.11),transparent 55%),var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2),inset -3px 0 0 var(--red)}
.ds-banner[data-tone=gift]>.ds-icon{color:var(--red-2)}
@media (max-width:520px){.ds-banner{flex-wrap:wrap}.ds-banner__actions{width:100%;padding-inline-start:32px}}

.ds-toasts{position:fixed;z-index:var(--z-toast);inset-inline:0;bottom:calc(16px + env(safe-area-inset-bottom));display:grid;justify-items:center;gap:var(--s-2);margin:0;padding:0 var(--s-4);pointer-events:none;list-style:none}
body:has(.ds-bar) .ds-toasts{bottom:calc(16px + var(--h-bar) + env(safe-area-inset-bottom))}
.ds-toast{display:flex;align-items:center;gap:var(--s-3);width:max-content;max-width:min(520px,100%);min-height:48px;padding:8px;padding-inline-start:var(--s-4);border-radius:var(--r-md);
  background:rgba(30,30,30,.94);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));box-shadow:var(--edge-2),var(--shadow-2);color:var(--fg);font-size:var(--fs-sm);line-height:var(--lh-sm);
  pointer-events:auto;animation:ds-toast-in var(--dur-3) var(--ease) both}
.ds-toast>.ds-icon{color:var(--fg-2)}
.ds-toast[data-tone=ok]>.ds-icon{color:var(--ok)}
.ds-toast[data-tone=error]{box-shadow:inset 0 0 0 1px var(--red-edge),var(--shadow-2)}
.ds-toast[data-tone=error]>.ds-icon{color:var(--red-2)}
.ds-toast__text{flex:1;margin:0;padding-block:6px}
.ds-toast[data-leaving]{animation:ds-toast-out var(--dur-3) var(--ease) both}

/* ============ 9. file rows ============ */
.ds-files{display:grid;gap:var(--s-2);margin:0;padding:0;list-style:none}
.ds-file{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:var(--s-3);padding:10px;padding-inline-start:12px;border-radius:var(--r-md);background:var(--ink-2);box-shadow:var(--edge),var(--sheen);
  transition:box-shadow var(--dur-2) var(--ease)}
.ds-file__thumb{position:relative;display:grid;place-items:center;width:44px;height:44px;overflow:hidden;border-radius:var(--r-sm);background:var(--ink-1) center/cover no-repeat;box-shadow:var(--edge-2);color:var(--fg-3)}
.ds-file__thumb>img{width:100%;height:100%;object-fit:cover}
.ds-file__main{display:grid;gap:5px;min-width:0}
.ds-file__name{margin:0;overflow:hidden;color:var(--fg);font:500 var(--fs-sm)/1.35 var(--font-text);white-space:nowrap;text-overflow:ellipsis;unicode-bidi:plaintext;padding-block:var(--clip-pad)}
.ds-file__meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;margin:0;color:var(--fg-3);font-size:var(--fs-xs);line-height:var(--lh-xs)}
.ds-file__meta>*+*::before{content:"·";margin-inline:7px}
.ds-file__role{color:var(--fg-2)}
.ds-file__bar{display:block;width:100%;height:3px;margin:2px 0 0;border:0;border-radius:var(--r-pill);background:var(--ink-5);overflow:hidden;-webkit-appearance:none;appearance:none}
.ds-file__bar::-webkit-progress-bar{background:var(--ink-5);border-radius:var(--r-pill)}
.ds-file__bar::-webkit-progress-value{background:var(--fg);border-radius:var(--r-pill);transition:width var(--dur-3) var(--ease)}
.ds-file__bar::-moz-progress-bar{background:var(--fg);border-radius:var(--r-pill)}
.ds-file__msg{display:flex;align-items:flex-start;gap:6px;margin:0;font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--fg-2)}
.ds-file__msg .ds-icon{--icon:15px;margin-top:.1em}
.ds-file__actions{display:flex;align-items:center;gap:2px}
.ds-file[data-status=done] .ds-file__thumb::after{content:"";position:absolute;inset-inline-end:3px;bottom:3px;width:14px;height:14px;border-radius:50%;
  background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23062016' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;box-shadow:0 0 0 2px var(--ink-2)}
.ds-file[data-status=warning] .ds-file__msg{color:var(--warn)}
.ds-file[data-status=error]{box-shadow:inset 0 0 0 1px var(--red-edge),var(--sheen)}
.ds-file[data-status=error] .ds-file__msg{color:var(--red-2)}
.ds-file[data-status=error] .ds-file__name{color:var(--fg-2)}
.ds-file[data-status=paused] .ds-file__bar::-webkit-progress-value{background:var(--fg-3)}
.ds-file[data-status=queued] .ds-file__name{color:var(--fg-2)}
.ds-files__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-2) var(--s-4);margin-bottom:var(--s-3)}
@media (max-width:520px){.ds-file{grid-template-columns:40px minmax(0,1fr) auto;gap:10px}.ds-file__thumb{width:40px;height:40px}}

/* ============ 10. progress, steps, spinner, skeleton ============ */
.ds-progress{display:grid;gap:var(--s-2)}
.ds-progress__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);color:var(--fg-2);font-size:var(--fs-sm);line-height:var(--lh-sm)}
.ds-progress__value{color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap}
.ds-progress progress{display:block;width:100%;height:6px;margin:0;border:0;border-radius:var(--r-pill);background:var(--ink-5);overflow:hidden;color:var(--red);-webkit-appearance:none;appearance:none}
.ds-progress progress::-webkit-progress-bar{background:var(--ink-5);border-radius:var(--r-pill)}
.ds-progress progress::-webkit-progress-value{background:linear-gradient(90deg,var(--red),var(--red-2));border-radius:var(--r-pill);transition:width var(--dur-4) var(--ease)}
.ds-progress progress::-moz-progress-bar{background:linear-gradient(90deg,var(--red),var(--red-2));border-radius:var(--r-pill)}
html[dir=rtl] .ds-progress progress::-webkit-progress-value{background:linear-gradient(270deg,var(--red),var(--red-2))}
.ds-progress progress:indeterminate{background:linear-gradient(90deg,var(--ink-5) 0 35%,rgba(255,74,61,.7) 50%,var(--ink-5) 65% 100%) 0 0/300% 100%;animation:ds-shimmer 1.6s linear infinite}
.ds-progress progress:indeterminate::-webkit-progress-bar{background:transparent}
.ds-progress[data-tone=ok] progress::-webkit-progress-value{background:var(--ok)}
.ds-progress[data-tone=ok] progress::-moz-progress-bar{background:var(--ok)}

.ds-steps{display:grid;margin:0;padding:0;list-style:none}
.ds-step{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:var(--s-4);padding-bottom:var(--s-6)}
.ds-step:last-child{padding-bottom:0}
.ds-step:not(:last-child)::before{content:"";position:absolute;inset-inline-start:13px;top:32px;bottom:4px;width:2px;border-radius:var(--r-pill);background:var(--line-2)}
.ds-step[data-state=done]:not(:last-child)::before{background:linear-gradient(var(--fg-3),var(--line-2))}
.ds-step__dot{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;box-shadow:var(--edge-field);color:var(--fg-3);font:600 12px/1 var(--font-text);font-variant-numeric:tabular-nums}
.ds-step[data-state=done] .ds-step__dot{background:var(--fg);box-shadow:none;color:var(--bg)}
.ds-step[data-state=current] .ds-step__dot{box-shadow:inset 0 0 0 2px var(--red-2)}
.ds-step[data-state=current] .ds-step__dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--red-2);box-shadow:0 0 12px var(--red-2);animation:ds-pulse 1.6s var(--ease-io) 3}
.ds-step[data-state=current] .ds-step__dot>*{display:none}
.ds-step__main{min-width:0;padding-top:3px}
.ds-step__title{margin:0;color:var(--fg-3);font:500 var(--fs-ui)/1.4 var(--font-text)}
.ds-step[data-state=done] .ds-step__title{color:var(--fg-2)}
.ds-step[data-state=current] .ds-step__title{color:var(--fg)}
.ds-step__meta{margin:2px 0 0;color:var(--fg-3);font-size:var(--fs-xs);line-height:var(--lh-xs)}
.ds-step__body{margin-top:var(--s-3)}

.ds-spinner{display:inline-block;flex:none;width:var(--icon,18px);height:var(--icon,18px);border-radius:50%;border:2px solid rgba(255,255,255,.22);border-top-color:var(--fg);animation:ds-spin .8s linear infinite;vertical-align:middle}

.ds-skel{display:block;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--ink-3) 0 40%,var(--ink-4) 50%,var(--ink-3) 60% 100%) 0 0/300% 100%;animation:ds-shimmer 1.6s linear 3}
.ds-skel--line{height:12px;margin:6px 0}
.ds-skel--title{height:20px;width:60%}
.ds-skel--poster{aspect-ratio:var(--ar,16/9);border-radius:var(--r-md)}
.ds-skel--circle{width:40px;height:40px;border-radius:50%}
.ds-skel--row{height:64px;border-radius:var(--r-md)}

/* ============ 11. player chrome (timelines and controls stay left-to-right in Arabic) ============ */
.ds-player{position:relative;overflow:hidden;border-radius:var(--r-lg);background:#000;box-shadow:var(--edge),var(--shadow-2);isolation:isolate}
.ds-player>video{display:block;width:100%;height:auto;max-height:78vh;aspect-ratio:var(--ar,16/9);background:#000;object-fit:contain}
.ds-player__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ds-player__big{position:absolute;inset:0;margin:auto;display:grid;place-items:center;width:76px;height:76px;padding:0;border:0;border-radius:50%;background:rgba(10,10,10,.5);color:#fff;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),var(--shadow-2);cursor:pointer;transition:transform var(--dur-2) var(--ease),background var(--dur-2)}
.ds-player__big:hover{transform:scale(1.05);background:rgba(225,37,27,.85)}
.ds-player__big .ds-icon{--icon:28px;margin-left:4px}
.ds-player[data-playing] .ds-player__big{opacity:0;pointer-events:none}
.ds-player__controls{position:absolute;inset-inline:0;bottom:0;z-index:2;display:flex;align-items:center;gap:6px;padding:40px 10px 8px;direction:ltr;
  background:linear-gradient(transparent,rgba(0,0,0,.78));transition:opacity var(--dur-3) var(--ease)}
.ds-player[data-playing]:not(:hover):not(:focus-within) .ds-player__controls{opacity:0}
.ds-player__btn{display:grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:var(--r-sm);background:transparent;color:#fff;cursor:pointer}
.ds-player__btn:hover{background:rgba(255,255,255,.12)}
@media (pointer:coarse){.ds-player__btn{width:var(--tap);height:var(--tap)}}
.ds-player__btn[aria-pressed=true]{background:rgba(255,255,255,.18)}
.ds-player__time{flex:none;min-width:92px;color:rgba(255,255,255,.86);font:500 12px/1 var(--font-mono);font-variant-numeric:tabular-nums;text-align:center;direction:ltr}
.ds-player__scrub{position:relative;flex:1;min-width:60px;height:40px;display:flex;align-items:center;direction:ltr}
.ds-player__range{--pct:0%;width:100%;height:20px;margin:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;direction:ltr}
.ds-player__range::-webkit-slider-runnable-track{height:4px;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--red-2) var(--pct),rgba(255,255,255,.28) var(--pct))}
.ds-player__range::-moz-range-track{height:4px;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--red-2) var(--pct),rgba(255,255,255,.28) var(--pct))}
.ds-player__range::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18);-webkit-appearance:none;appearance:none}
.ds-player__range::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff}
.ds-player__range:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:2px;border-radius:var(--r-xs)}
.ds-player__marks{position:absolute;inset-inline:7px;top:50%;height:0;pointer-events:none}
.ds-player__mark{position:absolute;left:calc(var(--at,0) * 100%);top:-11px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--red)}
.ds-player__nudge{display:none;gap:var(--s-2);margin-top:var(--s-3);direction:ltr}
.ds-player__nudge .ds-btn{flex:1}
.ds-player__comment{position:absolute;top:12px;inset-inline-end:12px;z-index:2}
.ds-player__comment .ds-btn{background:rgba(10,10,10,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
@media (pointer:coarse),(max-width:640px){
  .ds-player__nudge{display:flex}
  .ds-player__big{width:56px;height:56px}.ds-player__big .ds-icon{--icon:22px}
  .ds-player__controls .ds-player__vol{display:none}
  .ds-player__time{min-width:84px}
}

/* ============ 12. sheets and dialogs (bottom sheet on phones, dialog on desktop) ============ */
dialog.ds-sheet{position:fixed;inset:auto 0 0 0;width:100%;max-width:none;max-height:min(88dvh,calc(100% - 24px));margin:0;padding:0;border:0;border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:var(--ink-3);color:var(--fg);box-shadow:var(--edge-2),var(--shadow-3);overflow:hidden}
dialog.ds-sheet[open]{display:flex;flex-direction:column;animation:ds-sheet-up var(--dur-4) var(--ease) both}
dialog.ds-sheet[data-leaving]{animation:ds-sheet-down var(--dur-3) var(--ease-io) both}
dialog.ds-sheet::backdrop{background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:ds-fade var(--dur-3) var(--ease) both}
.ds-sheet__grab{flex:none;width:36px;height:4px;margin:10px auto 0;border-radius:var(--r-pill);background:var(--line-strong)}
.ds-sheet__head{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-3) var(--s-2);padding-inline-start:var(--s-5)}
.ds-sheet__title{flex:1;margin:0;font:var(--fw-h3) var(--fs-h3)/var(--lh-h3) var(--font-title);letter-spacing:var(--track-h3)}
.ds-sheet__title:focus{outline:none}
.ds-sheet__title:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-o);border-radius:var(--r-xs)}
.ds-sheet__body{flex:1;min-height:0;padding:var(--s-2) var(--s-5) var(--s-5);overflow:auto;overscroll-behavior:contain}
.ds-sheet__foot{flex:none;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--s-2);padding:var(--s-3) var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom));box-shadow:inset 0 1px 0 var(--line)}
@media (max-width:719px){.ds-sheet__foot .ds-btn{flex:1}}
@media (min-width:720px){
  dialog.ds-sheet{inset:0;width:min(560px,calc(100% - 48px));max-height:min(80vh,760px);margin:auto;border-radius:var(--r-xl)}
  dialog.ds-sheet[open]{animation-name:ds-pop}
  dialog.ds-sheet[data-leaving]{animation-name:ds-pop-out}
  dialog.ds-sheet--wide{width:min(820px,calc(100% - 48px))}
  .ds-sheet__grab{display:none}
  .ds-sheet__head{padding-top:var(--s-5)}
}
html:has(dialog.ds-sheet[open]){overflow:hidden}

/* ============ 13. menu, avatar ============ */
.ds-menu{min-width:220px;margin:0;padding:4px;border:0;border-radius:var(--r-md);background:var(--ink-3);color:var(--fg);box-shadow:var(--edge-2),var(--shadow-2);list-style:none}
.ds-menu__item{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;margin:0;padding:0 10px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--fg-2);
  font:500 var(--fs-sm)/1.3 var(--font-text);text-align:start;text-decoration:none;cursor:pointer}
.ds-menu__item:hover,.ds-menu__item:focus-visible{background:var(--ink-4);color:var(--fg)}
.ds-menu__item:focus-visible{outline-offset:-2px}
.ds-menu__item[aria-checked=true]{color:var(--fg)}
.ds-menu__item--danger{color:var(--red-2)}
.ds-menu__sep{height:1px;margin:4px 6px;background:var(--line)}
@media (pointer:coarse){.ds-menu__item{min-height:var(--tap)}}
.ds-avatar{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--ink-5);box-shadow:var(--edge-2);color:var(--fg);font:600 13px/1 var(--font-text);text-transform:uppercase}
button.ds-avatar{width:var(--tap-min);height:var(--tap-min);min-width:36px;min-height:36px;border:0;padding:0;cursor:pointer}
button.ds-avatar:hover{box-shadow:var(--edge-strong)}
.ds-navlink{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:var(--r-pill);color:var(--fg-2);font:500 var(--fs-sm)/1.2 var(--font-text);text-decoration:none;white-space:nowrap;
  transition:color var(--dur-2) var(--ease),background var(--dur-2) var(--ease)}
.ds-navlink:hover{color:var(--fg);background:var(--glass-2)}
.ds-navlink[aria-current=page]{color:var(--fg);background:var(--glass-2);box-shadow:var(--edge)}
@media (max-width:720px){.ds-navlinks{display:none}}
@media (pointer:coarse){.ds-navlink{min-height:var(--tap)}button.ds-avatar{width:var(--tap);height:var(--tap)}}

/* ============ 14. empty, error and loading states ============ */
.ds-empty{display:grid;justify-items:center;gap:var(--s-4);padding:var(--s-10) var(--s-6);border-radius:var(--r-lg);text-align:center;
  background:radial-gradient(70% 60% at 50% 0%,rgba(255,255,255,.035),transparent 70%),var(--ink-1);box-shadow:var(--edge)}
.ds-empty__art{display:block;width:min(184px,56%);height:auto;margin-bottom:var(--s-2)}
.ds-empty__line{max-width:44ch;margin:0;color:var(--fg-2);font-size:var(--fs-body);line-height:var(--lh-body);text-wrap:pretty}
.ds-empty__title{margin:0;font:var(--fw-h3) var(--fs-h3)/var(--lh-h3) var(--font-title);letter-spacing:var(--track-h3)}
.ds-empty--compact{padding:var(--s-8) var(--s-5)}
.ds-empty--compact .ds-empty__art{width:min(132px,48%)}
.ds-empty[data-tone=error] .ds-empty__line{color:var(--fg)}

/* ============ 15. sticky price bar (phones: one column, price + the main button) ============ */
.ds-bar{position:sticky;bottom:0;z-index:var(--z-bar);display:flex;align-items:center;gap:var(--s-4);min-height:var(--h-bar-min);margin:0;padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background:rgba(10,10,10,.88);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));box-shadow:inset 0 1px 0 var(--line-2)}
.ds-bar__price{display:grid;gap:2px;min-width:0;flex:1}
.ds-bar__price .ds-price{font-size:26px}
.ds-bar__label{display:-webkit-box;margin:0;color:var(--fg-3);font-size:var(--fs-xs);line-height:var(--lh-xs);white-space:normal;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding-block:var(--clip-pad)}
.ds-bar>.ds-btn{margin-inline-start:auto}
@media (min-width:921px){
  .ds-bar--float{bottom:var(--s-4);width:min(880px,calc(100% - 2 * var(--pad)));margin-inline:auto;padding:12px 12px 12px var(--s-6);padding-inline:var(--s-6) 12px;border-radius:var(--r-xl);
    background:rgba(16,16,16,.86);box-shadow:var(--edge-2),var(--shadow-3)}
}
html:has(.ds-bar){scroll-padding-bottom:calc(var(--h-bar) + env(safe-area-inset-bottom) + 16px)}

/* ============ 16. motion ============ */
@keyframes ds-spin{to{transform:rotate(360deg)}}
@keyframes ds-pulse{50%{opacity:.35;transform:scale(.8)}}
@keyframes ds-ping{0%{box-shadow:0 0 0 0 rgba(255,74,61,.55)}70%{box-shadow:0 0 0 8px rgba(255,74,61,0)}100%{box-shadow:0 0 0 0 rgba(255,74,61,0)}}
@keyframes ds-shimmer{to{background-position:-150% 0}}
@keyframes ds-fade{from{opacity:0}}
@keyframes ds-rise{from{opacity:0;transform:translateY(10px)}}
@keyframes ds-sheet-up{from{transform:translateY(100%)}}
@keyframes ds-sheet-down{to{transform:translateY(100%)}}
@keyframes ds-pop{from{opacity:0;transform:translateY(12px) scale(.98)}}
@keyframes ds-pop-out{to{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes ds-toast-in{from{opacity:0;transform:translateY(12px) scale(.98)}}
@keyframes ds-toast-out{to{opacity:0;transform:translateY(8px)}}
.ds-reveal{animation:ds-rise var(--dur-5) var(--ease) both;animation-delay:calc(var(--i,0) * 70ms)}
@media (prefers-reduced-motion:reduce){
  .ds-reveal,.ds-kicker>i,.ds-status::before,.ds-step__dot::after,.ds-skel{animation:none}
  .ds-progress progress:indeterminate{animation:none;background:var(--ink-5)}
  .ds-spinner,.ds-btn[aria-busy=true]::after{animation:ds-pulse 1.2s linear infinite}
  .ds-card--link:hover,.ds-player__big:hover{transform:none}
}