/* ===== Numi Tech · Digital ===== */
.dpass{display:flex;flex-direction:column;gap:10px}
.dwarn{margin:0;background:#FFF8E1;border:2px solid #F7D27A;border-radius:14px;padding:10px 12px;font-weight:700;font-size:14.5px;color:#6B4E00}
.dpin input{width:100%;font:800 22px ui-monospace,Menlo,Consolas,monospace;padding:14px 16px;border-radius:16px;border:3px solid var(--line);background:#fff;letter-spacing:.04em}
.dpin input:focus{border-color:var(--pri);outline:none}
.dmeter{height:16px;border-radius:99px;background:#EEF1F8;overflow:hidden}.dmeter i{display:block;height:100%;border-radius:99px;transition:width .3s,background .3s}
.dlv{font-weight:800;color:var(--mut)}.dlv b{font-size:20px}
.dwhy{margin:0;padding-left:20px;display:grid;gap:4px;font-weight:600}
.dart{border-radius:20px;overflow:hidden;box-shadow:0 10px 30px rgba(20,32,74,.14)}
.dart [data-clue]{cursor:pointer;border-radius:5px;transition:background .2s,box-shadow .2s}
.dart [data-clue]:hover{background:rgba(255,197,49,.25)}
.dart [data-clue].found{background:rgba(255,197,49,.55);box-shadow:0 0 0 3px #FFC531}
.dart.still [data-clue]{cursor:default}.dart.still [data-clue]:hover{background:none}
.nope{animation:tshake .35s}
.dmail{background:#fff;border:2px solid var(--line);border-radius:20px}
.dmh{background:#F3F6FF;padding:12px 14px;border-bottom:2px solid var(--line)}.dmh p{margin:2px 0}.dmh small{color:var(--mut);font-weight:800;margin-right:4px}
.dbody{padding:14px;line-height:1.5}
.dphone{max-width:380px;margin:0 auto;background:#fff;border:8px solid #1B1F2E;border-radius:30px;overflow:hidden}
.dphh{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#F3F6FF;border-bottom:2px solid var(--line)}.dphh small{margin-left:auto;color:var(--mut);font-size:12px}
.dav{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#E3E8F6;font-size:20px}
.dmsgs{display:flex;flex-direction:column;gap:8px;padding:12px;min-height:180px;max-height:46vh;overflow-y:auto;background:linear-gradient(180deg,#F8FAFF,#EEF2FD)}
.dm{max-width:84%;padding:9px 12px;border-radius:18px;font-size:15px;line-height:1.4;animation:dmin .25s ease-out}
@keyframes dmin{from{opacity:0;transform:translateY(8px)}}
.dm.them{align-self:flex-start;background:#fff;border:2px solid var(--line);border-bottom-left-radius:6px}
.dm.me{align-self:flex-end;background:var(--pri);color:#fff;border-bottom-right-radius:6px}
.dm.fb{align-self:center;max-width:92%;font-size:13.5px;font-weight:700;border-radius:12px}.dm.fb.ok{background:#E7F7EE;color:#0E6B3A}.dm.fb.ko{background:#FDEBEB;color:#9E2E1E}
.dopts{display:grid;gap:6px;padding:10px;border-top:2px solid var(--line);background:#fff}
.dopts button{text-align:left;padding:10px 12px;border-radius:14px;background:#F3F6FF;border:2px solid var(--line);font-weight:700;font-size:14.5px}
.dweb{background:#fff;border:2px solid var(--line);border-radius:20px}.dwebb{padding:14px}
.dpost{background:#fff;border:2px solid var(--line);border-radius:20px}
.dcnt{margin:10px 0 4px;font-weight:700;color:var(--mut)}
.dclues{display:grid;gap:8px}.dclue{display:flex;gap:10px;align-items:flex-start;background:#FFF8E1;border-radius:14px;padding:10px 12px;font-weight:600;animation:dmin .25s}
.dai{display:flex;flex-direction:column;gap:10px}.dstep{margin:0;font-weight:700}.dstep b{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--pri);color:#fff;margin-right:6px}
.dtrain,.dtest{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.dex{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border:2px solid var(--line);border-radius:16px;padding:10px}
.dex .de{font-size:40px;line-height:1}.dex>div{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.dex button{padding:5px 10px;border-radius:10px;background:#F3F6FF;border:2px solid var(--line);font-weight:800;font-size:13px}.dex button.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.dex.t.ok{border-color:#A8E0C0;background:#F2FBF5}.dex.t.ko{border-color:#F4B7B7;background:#FDF3F3}.dex small{color:var(--mut);font-weight:700}
.dprof{background:#fff;border:2px solid var(--line);border-radius:20px;overflow:hidden}.dprh{display:flex;align-items:center;gap:10px;padding:12px;background:#F3F6FF}
.dpf{padding:10px 12px;border-top:2px solid var(--line)}.dpf>div:first-child{display:flex;flex-direction:column}.dpf small{color:var(--mut);font-weight:800;font-size:12px}
.dpw{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.dpw button{flex:1;min-width:90px;padding:7px 8px;border-radius:12px;background:#F3F6FF;border:2px solid var(--line);font-weight:800;font-size:13px}.dpw button.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.dpf.ok{background:#F2FBF5}.dpf.ko{background:#FDF3F3}.dpx{margin:6px 0 0;font-size:13.5px;font-weight:700;color:#9E2E1E}
.dart.big{font-size:22px}

/* ---------- Classificar arrossegant (dsort) ---------- */
.dsortw .dprog{position:relative;height:26px;border-radius:13px;background:#EEF1FB;overflow:hidden;margin:4px 0 14px}
.dsortw .dprog span{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#7C9BFF,#3D5AFE);border-radius:13px;transition:width .35s cubic-bezier(.3,1.4,.5,1)}
.dsortw .dprog b{position:relative;display:block;text-align:center;font:800 13px/26px Lexend,system-ui,sans-serif;color:#1B2B6B;mix-blend-mode:normal}
.dpool{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;min-height:64px;padding:14px;margin-bottom:14px;border-radius:22px;background:repeating-linear-gradient(135deg,#F6F8FF 0 14px,#EEF2FD 14px 28px);border:2px solid #E3E8F8}
.dpool.empty{min-height:48px;background:#F4FBF7;border-color:#CDEEDB}
.dcard{position:relative;display:flex;align-items:center;gap:10px;max-width:100%;padding:12px 16px;border-radius:16px;background:#fff;border:2px solid #DCE3F7;box-shadow:0 4px 0 #D3DBF3,0 8px 18px rgba(27,43,107,.08);font:700 15.5px/1.3 Lexend,system-ui,sans-serif;color:#14204A;text-align:left;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;transition:transform .15s,box-shadow .15s,border-color .15s}
.dcard:hover{transform:translateY(-2px);box-shadow:0 6px 0 #D3DBF3,0 12px 22px rgba(27,43,107,.12)}
.dcard .dci{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#F1F4FF;font-size:24px}.dcard .dci img.ic{width:30px;height:30px}
.dcard.on{border-color:#3D5AFE;box-shadow:0 4px 0 #3D5AFE,0 10px 22px rgba(61,90,254,.25);transform:translateY(-3px)}
.dcard.lift{opacity:.35}
.dcard.ghost{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;cursor:grabbing;box-shadow:0 18px 40px rgba(27,43,107,.3);border-color:#3D5AFE;opacity:.97}
.dcard.sm{width:100%;padding:9px 12px;font-size:14px;box-shadow:0 3px 0 #D3DBF3}.dcard.sm .dci{width:32px;height:32px;font-size:19px}.dcard.sm .dci img.ic{width:24px;height:24px}
.dcard .dcm{margin-left:auto;flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font:900 14px/1 system-ui;font-style:normal;color:#fff}
.dcard.ok{border-color:#22A06B;background:#ECF9F2;box-shadow:0 3px 0 #9ADBB9}.dcard.ok .dcm{background:#22A06B}
.dcard.ko{border-color:#E5484D;background:#FDEEEE;box-shadow:0 3px 0 #F2A9AB}.dcard.ko .dcm{background:#E5484D}
.dcard.drop{animation:ddrop .4s cubic-bezier(.3,1.6,.5,1)}.dcard.shake{animation:dshake .5s}
@keyframes ddrop{0%{transform:scale(.7)}100%{transform:scale(1)}}
@keyframes dshake{0%,100%{transform:none}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.dbins{display:grid;gap:12px}.dbins.b2{grid-template-columns:1fr 1fr}.dbins.b3{grid-template-columns:repeat(3,1fr)}.dbins.b4{grid-template-columns:repeat(2,1fr)}
.dbin{--bc:#3D7BF4;display:flex;flex-direction:column;min-height:170px;border-radius:22px;background:#fff;border:3px solid color-mix(in srgb,var(--bc) 35%,#fff);box-shadow:0 6px 0 color-mix(in srgb,var(--bc) 25%,#fff);overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s}
.dbin .dbh{display:flex;align-items:center;gap:8px;padding:10px 12px;background:color-mix(in srgb,var(--bc) 14%,#fff);border-bottom:2px dashed color-mix(in srgb,var(--bc) 35%,#fff)}
.dbin .dbh b{flex:1;font:800 15px/1.2 Lexend,system-ui,sans-serif;color:color-mix(in srgb,var(--bc) 70%,#14204A)}
.dbin .dbh em{flex:none;min-width:26px;height:26px;border-radius:13px;display:grid;place-items:center;background:var(--bc);color:#fff;font:800 13px/1 Lexend,system-ui,sans-serif;font-style:normal}
.dbin .dbi{font-size:24px}.dbin .dbi img.ic{width:28px;height:28px}
.dbin .dbl{flex:1;display:flex;flex-direction:column;gap:8px;padding:10px;background:repeating-linear-gradient(0deg,transparent 0 22px,color-mix(in srgb,var(--bc) 5%,transparent) 22px 23px)}
.dbin .dbe{margin:auto;color:color-mix(in srgb,var(--bc) 55%,#8A93B5);font:700 13px/1.3 Lexend,system-ui,sans-serif;text-align:center;opacity:.8}
.dbin.over{transform:scale(1.02);border-color:var(--bc);box-shadow:0 0 0 6px color-mix(in srgb,var(--bc) 18%,transparent),0 8px 0 color-mix(in srgb,var(--bc) 30%,#fff)}
@media (max-width:560px){.dbins.b3,.dbins.b4{grid-template-columns:1fr}.dbin{min-height:120px}.dcard{font-size:14.5px;padding:10px 12px}}
@media (prefers-reduced-motion:reduce){.dcard,.dbin,.dsortw .dprog span{transition:none}.dcard.drop,.dcard.shake{animation:none}}
.dsortw .dhint{margin:0 0 8px;text-align:center;font:600 13.5px/1.35 Lexend,system-ui,sans-serif;color:#5A6488}.dsortw #tfb:empty{display:none}.dsortw #tfb{margin-bottom:12px}
/* textos llargs sense espais (contrasenyes) i dos calaixos a mòbil */
.dcard{overflow-wrap:anywhere;min-width:0}
.dbin .dbh{flex-wrap:wrap}.dbin .dbh b{min-width:0;overflow-wrap:anywhere}
@media (max-width:520px){.dbins.b2 .dcard.sm .dci{display:none}.dbins.b2 .dcard.sm{padding:8px 10px;font-size:13.5px}.dbins.b2 .dbin .dbl{padding:8px 6px}}