/* แยกออกจาก views/Download.php เมื่อ 2026-08-19 */
#dl-list { display:flex; flex-direction:column; gap:10px; margin-top:12px; }

    .dl-item {
        display:flex; align-items:center; gap:14px;
        padding:13px 16px;
        border:1px solid #ebebeb;
        border-radius:10px;
        background:#fff;
        transition:box-shadow .15s, border-color .15s;
    }
    .dl-item:hover { border-color:#ccc; box-shadow:0 2px 10px rgba(0,0,0,.06); }

    /* PDF thumbnail */
    .dl-thumb {
        flex-shrink:0; width:58px; height:76px;
        border-radius:6px; overflow:hidden;
        background:#f5f5f5; border:1px solid #e8e8e8;
        display:flex; align-items:center; justify-content:center;
        position:relative;
    }
    .dl-thumb canvas { width:100%; height:100%; display:block; pointer-events:none; }
    .thumb-loader { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#f5f5f5; }
    .thumb-spinner {
        width:16px; height:16px; border:2px solid #e0e0e0;
        border-top-color:#c62828; border-radius:50%;
        animation:tspin .7s linear infinite;
    }
    @keyframes tspin { to { transform:rotate(360deg); } }

    /* file icon (non-PDF) */
    .dl-icon {
        flex-shrink:0; width:58px; height:58px;
        border-radius:9px;
        display:flex; flex-direction:column; align-items:center; justify-content:center;
        gap:2px; color:#fff; font-size:11px; font-weight:700;
    }
    .dl-icon i { font-size:22px; }

    /* info */
    .dl-info { flex:1; min-width:0; }
    .dl-fname { font-size:14px; font-weight:600; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .dl-fmeta { font-size:12px; color:#aaa; margin-top:3px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .ext-tag {
        font-size:10px; font-weight:600; padding:1px 6px;
        border-radius:4px; text-transform:uppercase; letter-spacing:.04em;
    }

    /* button */
    .btn-dl {
        flex-shrink:0;
        display:inline-flex; align-items:center; gap:6px;
        padding:8px 18px; border-radius:8px;
        font-size:13px; font-weight:600;
        border:1.5px solid #222; background:#fff; color:#222;
        cursor:pointer; transition:all .15s; white-space:nowrap;
    }
    .btn-dl:hover  { background:#222; color:#fff; }
    .btn-dl:disabled { opacity:.5; cursor:not-allowed; }
    .btn-dl:disabled:hover { background:#fff; color:#222; }

    /* empty */
    .dl-empty { padding:40px 0; text-align:center; color:#ccc; }
    .dl-empty i { font-size:32px; display:block; margin-bottom:8px; }

    /* toast */
    #dl-toast {
        position:fixed; bottom:24px; left:50%;
        transform:translateX(-50%) translateY(80px);
        z-index:9999; background:#1a1a1a; color:#fff;
        border-radius:10px; padding:13px 20px;
        display:flex; align-items:center; gap:12px;
        font-size:13.5px; box-shadow:0 8px 32px rgba(0,0,0,.25);
        opacity:0; pointer-events:none;
        transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s;
        min-width:280px; max-width:92vw;
    }
    #dl-toast.show { transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto; }
    #dl-toast .ti { color:#ffc107; font-size:18px; flex-shrink:0; }
    #dl-toast .tb { flex:1; }
    #dl-toast .tb strong { display:block; }
    #dl-toast .tb small  { color:#999; font-size:11.5px; }
    #dl-toast .t-login {
        background:#fff; color:#1a1a1a; border:none;
        border-radius:6px; padding:6px 14px;
        font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap;
    }
    #dl-toast .t-login:hover { background:#ffe082; }
    #dl-toast .t-close { background:none; border:none; color:#666; font-size:16px; cursor:pointer; line-height:1; padding:0; flex-shrink:0; }
    #dl-toast .t-close:hover { color:#fff; }

    @media (max-width:540px) {
        .dl-item { gap:10px; padding:11px 12px; }
        .dl-thumb { width:46px; height:60px; }
        .dl-icon { width:46px; height:46px; }
        .btn-dl { padding:7px 12px; font-size:12px; }
    }