.qsdl { min-height: calc(100vh - 250px); display: grid; grid-template-rows: auto auto auto auto minmax(520px, 1fr) auto auto; gap: 10px; color: #18334d; }
.qsdl * { box-sizing: border-box; }
.qsdl-heading, .qsdl-filters, .qsdl-upload, .qsdl-list, .qsdl-detail, .qsdl-preflight, .qsdl-status { border: 1px solid #c8d8e8; border-radius: 12px; background: #fff; box-shadow: 0 7px 22px rgba(37, 77, 112, .07); }
.qsdl-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; background: linear-gradient(120deg, #f7fbff 0%, #eff7ff 58%, #f7fbf5 100%); }
.qsdl-heading h2 { margin: 2px 0 3px; font-size: 24px; color: #103a5f; }
.qsdl-heading p { margin: 0; color: #5c7288; }
.qsdl-kicker { font-size: 11px; letter-spacing: .14em; font-weight: 800; color: #287c73; }
.qsdl button { border: 1px solid #b8cadb; border-radius: 8px; padding: 8px 12px; background: #f7fbff; color: #183b5b; font-weight: 750; cursor: pointer; }
.qsdl button:hover:not(:disabled) { border-color: #337fb6; transform: translateY(-1px); }
.qsdl button.primary { color: #fff; border-color: #176ca8; background: linear-gradient(135deg, #1974b5, #2159b7); }
.qsdl button.danger { color: #fff; border-color: #9f2f35; background: #b5363d; }
.qsdl button.danger.subtle { margin-left: auto; color: #9e3037; border-color: #e0a6aa; background: #fff7f7; }
.qsdl button.danger.subtle:hover:not(:disabled) { color: #fff; border-color: #a72e36; background: #b5363d; }
.qsdl button:disabled { opacity: .5; cursor: not-allowed; }
.qsdl-filters { display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(6, minmax(125px, 1fr)) auto; gap: 8px; align-items: end; padding: 10px; }
.qsdl label { display: grid; gap: 4px; color: #547089; font-size: 12px; font-weight: 700; }
.qsdl input, .qsdl select, .qsdl textarea { width: 100%; min-height: 36px; border: 1px solid #b9cbdc; border-radius: 7px; padding: 7px 9px; color: #173550; background: #fff; font: inherit; }
.qsdl input:focus, .qsdl select:focus, .qsdl textarea:focus { outline: 3px solid rgba(31, 123, 178, .14); border-color: #2b80b4; }
.qsdl-count { min-width: 62px; padding: 8px 10px; border-radius: 8px; text-align: center; color: #fff; background: #24796f; font-weight: 800; }
.qsdl-upload, .qsdl-preflight { padding: 0; overflow: hidden; }
.qsdl-upload summary, .qsdl-preflight summary { padding: 11px 14px; cursor: pointer; color: #18496e; font-weight: 800; background: #f2f8fd; }
.qsdl-upload-grid { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 9px; padding: 12px; border-top: 1px solid #dce6ef; }
.qsdl-upload-grid .wide { grid-column: span 2; }
.qsdl-upload-grid .file { align-content: end; }
.qsdl-upload-grid button { align-self: end; min-height: 38px; }
.qsdl-main { display: grid; grid-template-columns: minmax(420px, .9fr) minmax(620px, 1.35fr); gap: 10px; min-height: 680px; }
.qsdl-main.full-detail { grid-template-columns: minmax(0, 1fr); min-height: 740px; }
.qsdl-main.full-detail .qsdl-detail { overflow: visible; }
.qsdl-list, .qsdl-detail { padding: 12px; min-height: 0; }
.qsdl-list { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.qsdl-section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.qsdl-section-title h3 { margin: 0; font-size: 16px; color: #153f61; }
.qsdl-section-title span { color: #6b8195; font-size: 12px; }
.qsdl-table { min-height: 0; overflow: auto; border: 1px solid #d9e4ee; border-radius: 8px; }
.qsdl table { width: 100%; border-collapse: collapse; font-size: 12px; }
.qsdl th { position: sticky; top: 0; z-index: 1; padding: 9px; text-align: left; color: #37566f; background: #edf4f9; border-bottom: 1px solid #cbd9e5; white-space: nowrap; }
.qsdl td { padding: 9px; border-bottom: 1px solid #e6edf3; vertical-align: top; }
.qsdl td span { display: block; margin-top: 3px; color: #71879a; font-size: 11px; }
.qsdl tbody tr[data-qsdl-row] { cursor: pointer; }
.qsdl tbody tr[data-qsdl-row]:hover, .qsdl tbody tr.selected { background: #eaf6ff; }
.qsdl-empty { padding: 28px !important; text-align: center; color: #74899c; }
.qsdl-empty.detail { border: 1px dashed #c9d7e4; border-radius: 8px; }
.qsdl-detail { min-width: 0; overflow: auto; }
.qsdl-detail dl { display: grid; grid-template-columns: 90px 1fr; gap: 6px 9px; margin: 0; }
.qsdl-detail dt { color: #6a8195; font-size: 12px; font-weight: 750; }
.qsdl-detail dd { margin: 0; overflow-wrap: anywhere; }
.qsdl-detail .mono { font: 11px Consolas, monospace; }
.qsdl-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.qsdl-detail h4 { margin: 14px 0 7px; }
.qsdl-versions { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.qsdl-versions li { display: grid; gap: 2px; padding: 8px; border-radius: 7px; background: #f5f8fb; }
.qsdl-versions li span, .qsdl-versions li.muted { color: #6d8295; font-size: 11px; }
.qsdl-error { display: grid; gap: 3px; padding: 9px 12px; border: 1px solid #e7b4b4; border-radius: 8px; color: #922c2c; background: #fff3f3; }
.qsdl-error span { font-size: 12px; }
.qsdl-preflight-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; padding: 12px 12px 4px; }
.qsdl-preflight-actions label { min-width: 250px; }
.qsdl-preflight > p { margin: 6px 12px 10px; color: #60778c; font-size: 12px; }
.qsdl-preflight-table { max-height: 300px; overflow: auto; margin: 0 12px 12px; border: 1px solid #dbe5ed; border-radius: 8px; }
.qsdl-note { margin: -4px 12px 12px; color: #6c8193; font-size: 12px; }
.qsdl-status { padding: 9px 12px; color: #375a75; background: #f4f9fd; }
.qsdl-modal-backdrop { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 24px; background: rgba(10, 28, 43, .58); backdrop-filter: blur(3px); }
.qsdl-delete-dialog { width: min(610px, 100%); display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 16px; padding: 22px; border: 1px solid #e1a3a6; border-radius: 16px; background: #fffdfc; box-shadow: 0 24px 70px rgba(7, 24, 39, .3); }
.qsdl-delete-dialog h3 { margin: 3px 0 8px; color: #7f242c; font-size: 21px; }
.qsdl-delete-mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: #b5363d; font: 900 30px/1 Georgia, serif; box-shadow: 0 9px 22px rgba(181, 54, 61, .25); }
.qsdl-delete-warning { margin: 0 0 14px; color: #6e3c40; line-height: 1.55; }
.qsdl-delete-dialog dl { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 7px 10px; margin: 0; padding: 12px; border: 1px solid #edd2d4; border-radius: 10px; background: #fff7f7; }
.qsdl-delete-dialog dt { color: #8e5d61; font-size: 12px; font-weight: 800; }
.qsdl-delete-dialog dd { margin: 0; overflow-wrap: anywhere; color: #3d2a2c; }
.qsdl-delete-phrase { margin-top: 14px; color: #7f242c; }
.qsdl-delete-phrase input { border-color: #d49398; }
.qsdl-modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 16px; }
@media (max-width: 1450px) { .qsdl-filters { grid-template-columns: repeat(4, minmax(135px, 1fr)); } .qsdl-upload-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); } .qsdl-main { grid-template-columns: minmax(360px, .75fr) minmax(560px, 1.25fr); } }
@media (max-width: 1220px) { .qsdl-main { grid-template-columns: 1fr; } .qsdl-list { min-height: 430px; } }
@media (max-width: 980px) { .qsdl-main { grid-template-columns: 1fr; } .qsdl-list { min-height: 430px; } .qsdl-filters, .qsdl-upload-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); } .qsdl-delete-dialog { grid-template-columns: 1fr; } }