/* Download Manager — ilustrasi tetingkap aplikasi (hero) sahaja. Susun atur, menu, changelog, lesen & admin: /shared/desktop-app.css */
.da-main { --dm: var(--app, #2563eb); --dm-2: var(--app-2, #4338ca); --dm-ink: var(--app-ink, #1d4ed8); --dm-soft: color-mix(in srgb, var(--dm) 10%, transparent); }
/* Tetingkap aplikasi (pratonton) */
.dm-window { margin: 0; border-radius: 18px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 40px 80px -40px rgba(15, 23, 42, .45), 0 2px 6px rgba(15, 23, 42, .06); overflow: hidden; font-size: 12.5px; }
.dm-window__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: light-dark(#f1f5f9, #0f172a); border-bottom: 1px solid var(--border); }
.dm-window__bar span { width: 11px; height: 11px; border-radius: 50%; background: #f87171; }
.dm-window__bar span:nth-child(2) { background: #fbbf24; } .dm-window__bar span:nth-child(3) { background: #34d399; }
.dm-window__bar b { margin-left: 10px; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.dm-window__tools { display: flex; gap: 2px; padding: 10px 12px; border-bottom: 1px solid var(--border); overflow: hidden; }
.dm-tool { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 66px; padding: 6px 4px; border-radius: 10px; color: var(--text); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.dm-tool i { width: 22px; height: 22px; display: block; background: currentColor; -webkit-mask: var(--g) center / 22px no-repeat; mask: var(--g) center / 22px no-repeat; }
.dm-tool--main { color: var(--dm-ink); }
.dm-tool--main i { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--dm), var(--dm-2)); -webkit-mask: none; mask: none; position: relative; }
.dm-tool--main i::after { content: ""; position: absolute; inset: 0; background: #fff; -webkit-mask: var(--g) center / 18px no-repeat; mask: var(--g) center / 18px no-repeat; }
.g-add { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.g-play { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5l11 7-11 7z'/%3E%3C/svg%3E"); }
.g-pause { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5h3.6v14H7zM13.4 5H17v14h-3.6z'/%3E%3C/svg%3E"); }
.g-stop { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6h12v12H6z'/%3E%3C/svg%3E"); }
.g-del { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M6 7l1 13h10l1-13M9 7V4h6v3M10 11v5M14 11v5'/%3E%3C/svg%3E"); }
.g-gear { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 2.8v2.7M12 18.5v2.7M2.8 12h2.7M18.5 12h2.7M5.5 5.5l1.9 1.9M16.6 16.6l1.9 1.9M5.5 18.5l1.9-1.9M16.6 7.4l1.9-1.9'/%3E%3C/svg%3E"); }
.dm-window__body { display: grid; grid-template-columns: 138px minmax(0, 1fr); min-height: 252px; }
.dm-cats { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; background: light-dark(#f8fafc, #0b1220); border-right: 1px solid var(--border); }
.dm-cats b { font-size: 10px; letter-spacing: .08em; color: var(--text-faint); padding: 0 8px 6px; }
.dm-cats span { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; color: var(--text-muted); }
.dm-cats span.on { background: var(--surface); color: var(--text); font-weight: 700; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.dm-cats i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.k-blue { background: #2563eb; } .k-amber { background: #d97706; } .k-green { background: #16a34a; } .k-fuchsia { background: #c026d3; } .k-red { background: #dc2626; }
.dm-cats em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--text-faint); font-weight: 700; }
.dm-rows { display: flex; flex-direction: column; }
.dm-row { display: grid; grid-template-columns: minmax(0, 1.7fr) 58px auto minmax(56px, .8fr) 58px; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--border); }
.dm-row:first-child { background: var(--dm-soft); }
.dm-file { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dm-file b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 650; }
.dm-file i { flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font: 800 8px/1 var(--font-body, sans-serif); font-style: normal; }
.c-zip { color: #b45309; background: rgba(217, 119, 6, .12); } .c-doc { color: #1d4ed8; background: rgba(37, 99, 235, .12); }
.c-mus { color: #a21caf; background: rgba(192, 38, 211, .12); } .c-vid { color: #b91c1c; background: rgba(220, 38, 38, .12); }
.dm-size, .dm-speed { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dm-st { font-weight: 700; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.dm-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dm-row--dl .dm-st { color: var(--dm-ink); } .dm-row--ok .dm-st { color: #16a34a; } .dm-row--pa .dm-st { color: var(--text-faint); }
.dm-bar { height: 7px; border-radius: 99px; background: var(--border); overflow: hidden; }
.dm-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--dm), var(--dm-2)); }
.dm-row--ok .dm-bar span { background: linear-gradient(90deg, #16a34a, #0d9488); }
.dm-p12 { width: 12%; } .dm-p35 { width: 35%; animation: dm-grow 6s ease-in-out infinite alternate; } .dm-p66 { width: 66%; animation: dm-grow2 5s ease-in-out infinite alternate; } .dm-p100 { width: 100%; }
@keyframes dm-grow { to { width: 58%; } } @keyframes dm-grow2 { to { width: 92%; } }
.dm-window__status { display: flex; justify-content: space-between; gap: 10px; padding: 8px 14px; background: light-dark(#f8fafc, #0b1220); border-top: 1px solid var(--border); color: var(--text-muted); font-size: 11.5px; }
.dm-window__status b { color: var(--text); }
@media (max-width: 680px) {
  .dm-window__body { grid-template-columns: 1fr; }
  .dm-cats { display: none; }
  .dm-row { grid-template-columns: minmax(0, 1fr) 80px; }
  .dm-size, .dm-speed, .dm-st { display: none; }
  .dm-hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dm-bar span { animation: none !important; } }