:root{
  --bg:#f6f7f9; --card:#fff; --bd:#e5e7eb; --tx:#111; --muted:#6b7280;
  --accent:#111; --pill:#f2f4f7; --ok:#0ea5e9; --good:#10b981; --bad:#ef4444;
}
*{box-sizing:border-box}
body{font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0;background:var(--bg);color:var(--tx)}
.wrap{max-width:1100px;margin:32px auto;padding:0 16px}
.tabs{display:flex;gap:8px;margin-bottom:12px}
.btn{padding:.6rem 1rem;border:1px solid var(--accent);border-radius:8px;background:var(--accent);color:#fff;cursor:pointer}
.btn.secondary{background:#fff;color:#111;border-color:#ccc}
.btn.ghost{background:#fff;color:#111;border-color:var(--bd)}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.05);margin-bottom:16px}
.title{font-weight:600}
label{display:block;margin:.5rem 0 .25rem;font-weight:600}
input[type=file]{display:block;margin-bottom:1rem}
input[type=text],input[type=search],select.select{padding:.5rem .6rem;border:1px solid #d1d5db;border-radius:8px;min-width:220px;background:#fff}
pre{white-space:pre-wrap;background:#0b1020;color:#d6e1ff;padding:10px;border-radius:8px;overflow:auto}
a{color:#0a58ca}
.muted{color:var(--muted);font-size:.95rem}
.pill{display:inline-block;background:var(--pill);border:1px solid var(--bd);padding:2px 8px;border-radius:999px;font-size:12px}

/* Tile grid */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between;margin:8px 0 14px}
.search{flex:1;display:flex;gap:8px;align-items:center}
.search input{flex:1;min-width:220px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
/* === SCORM My Library Tile Visual Polish === */
.tile {
  position: relative;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);       /* light border for structure */
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);   /* soft base shadow */
  transition:
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

/* Hover effect – soft lift and color glow */
.tile:hover {
  border-color: rgba(22, 90, 120, 0.25);       /* Canvas teal accent tint */
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.12),
    0 0 0 3px rgba(22, 90, 120, 0.08);
  transform: translateY(-2px);
}

/* Focus ring (keyboard users) */
.tile:focus-within {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(22, 90, 120, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: rgba(22, 90, 120, 0.3);
}

/* Optional: Active/selected tile */
.tile.active {
  border-color: #165a78;                       /* strong Canvas teal */
  box-shadow:
    0 0 0 2px #165a78,
    0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Dark-mode friendly variant */
@media (prefers-color-scheme: dark) {
  .tile {
    background-color: #1e1e1e;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05);
  }
  .tile:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.07),
                0 0 0 3px rgba(22, 90, 120, 0.25);
  }
}
.thumb{aspect-ratio:16/9;background:#ddd;position:relative;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tile-body{padding:12px;display:flex;flex-direction:column;gap:8px}
.tile-title{font-weight:600;line-height:1.25}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}

/* Studio badge */
.badge{padding:4px 8px;border-radius:999px;border:1px solid var(--bd);font-size:12px}
.badge-on{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.badge-off{background:#fef2f2;color:#991b1b;border-color:#fecaca}


/* --- Modal --- */
.modal[hidden] { display: none !important; }
.modal { position: fixed; inset: 0; z-index: 1000; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.modal-dialog {
  position: relative;
  width: min(960px, 92vw);
  max-height: 92vh;
  margin: 4vh auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  padding: 16px 16px 20px;
  overflow: auto;
}
.modal-close {
  position: absolute; top: 8px; right: 10px;
  border: 1px solid #e5e7eb; background:#fff; border-radius: 999px;
  width: 32px; height: 32px; font-size: 18px; line-height: 30px; cursor: pointer;
}
.modal-title { margin: 0 0 10px; font-weight: 600; }

/* === Delete button (hard delete) === */
.btn-danger {
  background: #d43c2f;
  color: #fff;
  border: 0;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s ease;
}

.btn-danger:hover {
  background: #b92f24;
}

.btn-danger[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
/* === Import progress UI (non-duplicating additions) === */

/* Subtle disabled state for any button while importing */
.btn[disabled] {
  opacity: .6;
  cursor: not-allowed;
}

/* Tiny inline spinner you can prepend inside the button */
.spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #d1d5db;            /* light ring */
  border-top-color: var(--tx);           /* visible cap */
  animation: spin .8s linear infinite;
  flex: 0 0 16px;
}

/* Space the spinner from the button label when used inside .btn */
.btn .spinner { margin-right: 8px; }

@keyframes spin { to { transform: rotate(360deg); } }

/* Inline status text next to the button */
.import-status {
  font: 12px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--muted);
  margin-left: .5rem;
}

/* Success and error states use your existing palette */
.import-status.ok  { color: var(--good); }
.import-status.err { color: var(--bad); }

.loading-dot::after { content: '…'; animation: dots 1.2s steps(3,end) infinite; }
@keyframes dots { 0%{ content: '' } 33%{ content: '.' } 66%{ content: '..' } 100%{ content: '...' } }