/* ====== Font ====== */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

/* ====== Variables ====== */
:root{
  --bg:#0b0c10;
  --panel:#111722;
  --panel-2:#0f1522;
  --line:#222a3a;
  --txt:#ffffff;
  --muted:#97a1b1;

  --primary:#78a0ff;
  --success:#19c37d;
  --danger:#ff5a5a;

  --radius:16px;
  --radius-sm:12px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* ====== Reset & Base ====== */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, #121a2a 0%, #0b0c10 60%);
  color:var(--txt);
  line-height:1.45;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* ====== Layout ====== */
.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:22px;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.hero{
  padding:36px 0 18px;
  display:grid;
  gap:12px;
}

.sep{
  height:1px;
  background:var(--line);
  margin:16px 0;
}

.footer{
  padding:20px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
}

/* ====== Cards ====== */
.card{
  background: linear-gradient(180deg, #121826, #0f1522);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: var(--shadow);
}

/* ====== Badges ====== */
.badge{
  display:inline-block;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#0f1522;
  color:var(--muted);
  letter-spacing:.2px;
}

/* ====== Text ====== */
h1,h2,h3,h4{
  margin:0;
  letter-spacing:-.2px;
}
h1{ font-size:34px; }
h2{ font-size:22px; }
h3{ font-size:18px; }
.muted{ color:var(--muted); font-size:12px; }

/* ====== Buttons ====== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#1f2430;
  border:1px solid var(--line);
  color:var(--txt);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  transition: all .15s ease;
}
.btn:hover{
  transform: translateY(-1px);
  background:#232a3a;
}
.btn:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
}
.btn.small{
  padding:8px 10px;
  font-size:12px;
  border-radius:10px;
}
.btn.ok{
  border-color: rgba(25,195,125,.45);
  background: rgba(25,195,125,.18);
}
.btn.ok:hover{ background: rgba(25,195,125,.28); }
.btn.danger{
  border-color: rgba(255,90,90,.45);
  background: rgba(255,90,90,.18);
}
.btn.danger:hover{ background: rgba(255,90,90,.28); }

/* ====== Inputs ====== */
input[type="text"], input[type="number"], textarea{
  width:100%;
  background:var(--panel-2);
  border:1px solid var(--line);
  color:var(--txt);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
textarea{ min-height:80px; resize:vertical; }

input:focus, textarea:focus{
  border-color: rgba(120,160,255,.6);
  box-shadow: 0 0 0 3px rgba(120,160,255,.15);
}

label{
  font-size:12px;
  color:var(--muted);
  display:block;
  margin-bottom:6px;
}

/* ====== Tables (Admin) ====== */
.table{
  width:100%;
  border-collapse:collapse;
  margin-top:12px;
}
.table th,.table td{
  border-bottom:1px solid var(--line);
  padding:10px;
  text-align:left;
}
.table th{
  font-size:12px;
  color:var(--muted);
  font-weight:600;
}

/* ====== Grid (Home biblio B) ====== */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap:16px;
}

.demoCard{
  display:grid;
  gap:10px;
}
.demoTitle{
  font-size:16px;
}
.demoDesc{
  color:#cfd6e6;
  font-size:13px;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.demoActions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

/* ====== Editor Layout ====== */
.editorGrid{
  display:grid;
  grid-template-columns: minmax(640px, 3fr) 2fr;
  gap:16px;
  align-items:start;
}
@media (max-width:1100px){
  .editorGrid{ grid-template-columns:1fr; }
}

/* ====== Upload zone ====== */
.dropZone{
  border:1px dashed rgba(255,255,255,.25);
  border-radius:16px;
  padding:18px;
  text-align:center;
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition:all .15s ease;
}
.dropZone:hover{ background:rgba(255,255,255,.06); }
.dropZone.drag{
  background:rgba(25,195,125,.12);
  border-color:rgba(25,195,125,.6);
}

/* ====== Preview ====== */
.previewWrap{
  display:grid;
  gap:12px;
}
.previewFrame{
  width:100%;
  max-height:70vh;
  overflow:auto;
  position:relative;
  border-radius:16px;
  border:1px solid var(--line);
  background:#0b1020;
}
.previewFrame img{ width:100%; user-select:none; }

.marker{
  position:absolute;
  width:22px;
  height:22px;
  border-radius:999px;
  transform:translate(-50%,-50%);
  background:#fff;
  box-shadow:0 0 0 6px rgba(255,255,255,.25), 0 0 20px rgba(255,255,255,.6);
  pointer-events:none;
}

/* ====== Steps list ====== */
.stepsList{ display:grid; gap:10px; }

.stepRow{
  display:grid;
  grid-template-columns:96px 1fr auto;
  gap:12px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px;
  background:var(--panel-2);
  transition: background .15s ease, border-color .15s ease;
}
.stepRow:hover{
  background:#141b2b;
  border-color:#2a3550;
}

.thumb{
  width:96px;
  height:64px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--line);
}

.stepTitle{ font-size:13px; }
.stepMeta{ font-size:12px; color:var(--muted); margin-top:4px; }

.stepActions{
  display:flex;
  gap:8px;
  align-items:center;
}
.handle{ cursor:grab; opacity:.7; user-select:none; }

/* ====== Code blocks (Share) ====== */
.code{
  width:100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:12px;
  padding:10px 12px;
  background:#0b1020;
  border:1px solid var(--line);
  border-radius:12px;
  color:#dbe6ff;
  white-space:pre;
  overflow:auto;
}

/* ====== Player ====== */
.playerWrap{
  max-width:980px;
  margin:0 auto;
  padding:18px;
}
.player{
  display:grid;
  gap:12px;
}

.frame{
  position:relative;
  background:#111;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
}
.slide{
  width:100%;
  height:auto;
  display:block;
  transform-origin:center center;
  transition:transform .25s ease;
}
.caption{
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  background:rgba(0,0,0,.55);
  padding:10px 12px;
  border-radius:12px;
  backdrop-filter: blur(6px);
}
.hotspot{
  position:absolute;
  width:22px;
  height:22px;
  border-radius:999px;
  transform:translate(-50%,-50%);
  background:rgba(255,255,255,.95);
  box-shadow:0 0 0 6px rgba(255,255,255,.25);
  cursor:pointer;
}

.progress{
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;
  background:rgba(255,255,255,.15);
}
.progress .bar{
  height:100%;
  width:0%;
  background:rgba(255,255,255,.9);
  transition:width .05s linear;
}

.controls{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.controls .spacer{ flex:1; }

/* ====== Toast ====== */
.toast{
  position:fixed;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  background:#0f1522;
  border:1px solid var(--line);
  color:#fff;
  padding:10px 14px;
  border-radius:12px;
  opacity:0;
  pointer-events:none;
  transition:.2s;
  box-shadow: var(--shadow);
}
.toast.show{ opacity:1; }

/* ====== Modal ====== */
dialog.modal{
  border:1px solid var(--line);
  border-radius:16px;
  padding:0;
  background:var(--panel);
  color:var(--txt);
  width:min(720px, 92vw);
}
dialog::backdrop{ background:rgba(0,0,0,.6); }

.modalHead{
  padding:14px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.modalBody{ padding:14px; display:grid; gap:10px; }
.modalFoot{
  padding:14px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:flex-end;
  gap:10px;
}