:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #f1f3f7;
  --text: #1a1d24;
  --text-soft: #4b5563;
  --muted: #8a94a6;
  --accent: #4f46e5;
  --accent-soft: #eef0ff;
  --danger: #dc2626;
  --border: #e5e7eb;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
  --shadow-md: 0 4px 14px rgba(16,24,40,.08);
  --shadow-lg: 0 20px 40px rgba(16,24,40,.12);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.error { background:#fef2f2;color:#991b1b;padding:10px 14px;border-radius:10px;margin:10px 0;border:1px solid #fecaca;font-size:.9em; }
.hidden { display:none !important; }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 16px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); cursor:pointer;
  font:500 .92em inherit; text-decoration:none;
  transition:all .15s ease; box-shadow:var(--shadow-sm); white-space:nowrap;
}
.btn:hover { border-color:var(--accent); color:var(--accent); text-decoration:none; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { background:#4338ca; border-color:#4338ca; color:#fff; }
.btn.danger { color:var(--danger); border-color:#fecaca; }
.btn.danger:hover { background:#fef2f2; border-color:var(--danger); }
.btn.big { padding:14px 26px; font-size:1em; }

input, textarea, select {
  font:inherit; background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:10px 12px; border-radius:10px; transition:border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}

/* Nav */
.topnav {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:14px 24px; background:var(--surface); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:20; flex-wrap:wrap;
}
.topnav > div { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.brand { font-weight:700; font-size:1.25em; letter-spacing:-0.02em; color:var(--text); }
.brand a { color:inherit; }

/* Auth */
.auth-body {
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding:20px;
  background:linear-gradient(180deg,#f7f8fa 0%,#eef0ff 100%);
}
.auth-card {
  background:var(--surface); padding:36px 32px; border-radius:16px;
  width:100%; max-width:400px; border:1px solid var(--border); box-shadow:var(--shadow-lg);
}
.auth-card h1 { margin:0 0 4px; font-size:1.6em; }
.auth-card form { display:flex; flex-direction:column; gap:14px; margin:22px 0 16px; }
.auth-card label { display:flex; flex-direction:column; gap:6px; font-size:.88em; color:var(--text-soft); font-weight:500; }

/* Landing */
.landing .hero { text-align:center; padding:90px 20px 60px; max-width:820px; margin:0 auto; }
.landing .hero h1 { font-size:clamp(2em,6vw,3.4em); margin:0 0 18px; letter-spacing:-.03em; line-height:1.1; }
.landing .hero p { font-size:1.1em; margin-bottom:28px; color:var(--text-soft); }
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; padding:20px 20px 80px; max-width:1040px; margin:0 auto; }
.feature { background:var(--surface); padding:28px 24px; border-radius:14px; border:1px solid var(--border); box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; }
.feature:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.feature h3 { margin:0 0 8px; font-size:1.1em; }
.feature p { margin:0; color:var(--text-soft); font-size:.95em; }

/* Dashboard */
.container { max-width:1140px; margin:30px auto; padding:0 20px; }
.row-between { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.row { display:flex; gap:8px; align-items:center; margin:10px 0; flex-wrap:wrap; }
.deck-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; margin-top:22px; }
.deck-card { background:var(--surface); border:1px solid var(--border); padding:16px; border-radius:14px; box-shadow:var(--shadow-sm); transition:transform .15s, box-shadow .15s; }
.deck-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.deck-card h4 { margin:12px 0 4px; font-size:1em; }
.deck-card .row-between { gap:6px; margin-top:12px; }
.deck-card .btn { padding:7px 12px; font-size:.85em; }
.deck-thumb {
  height:130px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:14px; font-weight:600; font-size:.95em; color:#fff;
  background:linear-gradient(135deg,#6366f1,#8b5cf6); overflow:hidden;
}

/* Editor */
.editor-body { overflow:hidden; }
.title-input {
  background:transparent; border:1px solid transparent; color:var(--text);
  font-size:.95em; font-weight:500; padding:8px 12px; border-radius:8px;
  width:min(280px,40vw);
}
.title-input:hover { border-color:var(--border); }
.title-input:focus { background:var(--surface); border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

.editor-layout { display:grid; grid-template-columns:220px 1fr; height:calc(100vh - 64px); }
.slide-list { background:var(--surface); border-right:1px solid var(--border); overflow-y:auto; padding:14px; }
.slide-thumb {
  background:var(--surface-2); border:2px solid transparent; border-radius:10px;
  padding:12px; margin-bottom:10px; cursor:pointer;
  display:flex; gap:10px; align-items:center; font-size:.85em; transition:all .15s;
}
.slide-thumb:hover { background:var(--accent-soft); }
.slide-thumb.active { border-color:var(--accent); background:var(--accent-soft); }
.slide-thumb .num {
  background:var(--surface); padding:2px 9px; border-radius:20px;
  font-size:.8em; font-weight:600; color:var(--text-soft); border:1px solid var(--border);
}
.slide-thumb .ht { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }

.canvas-wrap { display:flex; flex-direction:column; padding:24px 20px; gap:18px; overflow-y:auto; background:var(--bg); }
.slide-canvas {
  aspect-ratio:16/9; width:100%; max-width:920px; margin:0 auto;
  border-radius:14px; overflow:hidden; position:relative;
  box-shadow:var(--shadow-lg); border:1px solid var(--border);
}
.slide-canvas .slide-content {
  position:relative; z-index:2; padding:8% 10%; height:100%;
  display:flex; flex-direction:column; justify-content:center;
}
.slide-canvas h1 { margin:0 0 .4em; font-size:clamp(1.4em,3.6vw,2.6em); line-height:1.15; }
.slide-canvas p { margin:0; font-size:clamp(.95em,1.6vw,1.2em); white-space:pre-wrap; }
.bg-dim { position:absolute; inset:0; background:rgba(0,0,0,.4); z-index:1; }
.overlay-img {
  position:absolute; right:4%; bottom:4%; max-width:28%; max-height:38%;
  border-radius:10px; z-index:3; box-shadow:0 8px 22px rgba(0,0,0,.25);
}

.edit-panel {
  max-width:920px; margin:0 auto; width:100%;
  background:var(--surface); padding:20px; border-radius:14px;
  border:1px solid var(--border); box-shadow:var(--shadow-sm);
}
.edit-panel label { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; font-size:.85em; color:var(--text-soft); font-weight:500; }
.edit-panel textarea { resize:vertical; min-height:80px; }

/* Modal */
.modal { position:fixed; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:100; padding:16px; }
.modal-card { background:var(--surface); padding:22px; border-radius:16px; width:100%; max-width:740px; max-height:85vh; overflow-y:auto; border:1px solid var(--border); box-shadow:var(--shadow-lg); }
.modal-card h3 { margin:0; }
.modal-card .row input { flex:1; min-width:0; }
.img-results { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin-top:16px; }
.img-results img { width:100%; height:100px; object-fit:cover; border-radius:8px; cursor:pointer; border:2px solid transparent; transition:all .15s; }
.img-results img:hover { border-color:var(--accent); transform:scale(1.02); }

/* Presenter */
.present-body { background:#000; overflow:hidden; margin:0; }
.stage { position:fixed; inset:0; }
.p-slide { position:absolute; inset:0; display:none; background-size:cover; background-position:center; }
.p-slide.active { display:flex; align-items:center; justify-content:center; }
.p-slide .slide-content { position:relative; z-index:2; max-width:82%; text-align:center; padding:40px; }
.p-slide h1 { font-size:clamp(2em,5.5vw,5em); margin:0 0 .5em; line-height:1.1; }
.p-slide p { font-size:clamp(1.1em,2.4vw,2.2em); margin:0; }
.present-ctl {
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,.95); padding:10px 18px; border-radius:40px;
  display:flex; gap:12px; align-items:center; z-index:10; box-shadow:var(--shadow-lg);
}
.present-ctl button, .present-ctl a { background:transparent; border:none; color:var(--text); cursor:pointer; font:500 .92em inherit; padding:4px 10px; text-decoration:none; }
.present-ctl button:hover, .present-ctl a:hover { color:var(--accent); }

/* Themes */
.theme-midnight { background:linear-gradient(135deg,#1e293b,#334155); color:#f1f5f9; }
.theme-midnight h1 { color:#fff; }
.theme-paper { background:#fdfaf3; color:#2a2418; }
.theme-paper h1 { color:#5a3e1b; font-family:Georgia,"Times New Roman",serif; }
.theme-paper p { font-family:Georgia,"Times New Roman",serif; }
.theme-sunrise { background:linear-gradient(135deg,#fef3c7,#fde68a); color:#78350f; }
.theme-sunrise h1 { color:#92400e; }
.theme-forest { background:linear-gradient(135deg,#ecfdf5,#d1fae5); color:#064e3b; }
.theme-forest h1 { color:#065f46; }
.theme-ocean { background:linear-gradient(135deg,#eff6ff,#dbeafe); color:#1e3a8a; }
.theme-ocean h1 { color:#1e40af; }
.theme-mono { background:#fafafa; color:#111; }
.theme-mono h1 { color:#000; font-family:"SF Mono","Courier New",monospace; text-transform:uppercase; letter-spacing:2px; }
.theme-mono p { font-family:"SF Mono","Courier New",monospace; }

.deck-card.theme-paper .deck-thumb { background:linear-gradient(135deg,#fdfaf3,#f5e6c8); color:#5a3e1b; }
.deck-card.theme-sunrise .deck-thumb { background:linear-gradient(135deg,#fef3c7,#fde68a); color:#92400e; }
.deck-card.theme-forest .deck-thumb { background:linear-gradient(135deg,#ecfdf5,#6ee7b7); color:#065f46; }
.deck-card.theme-ocean .deck-thumb { background:linear-gradient(135deg,#dbeafe,#93c5fd); color:#1e40af; }
.deck-card.theme-mono .deck-thumb { background:#fafafa; color:#000; font-family:"SF Mono","Courier New",monospace; border:1px solid #e5e7eb; }
.deck-card.theme-midnight .deck-thumb { background:linear-gradient(135deg,#1e293b,#334155); color:#fff; }

/* PDF export helper frame (hidden off-screen, sized to 16:9 pages) */
.pdf-stage { position:fixed; left:-10000px; top:0; width:1280px; }
.pdf-stage .p-slide {
  position:relative; inset:auto; display:flex !important;
  width:1280px; height:720px; page-break-after:always;
  align-items:center; justify-content:center;
  background-size:cover; background-position:center;
}

/* MOBILE */
@media (max-width: 860px) {
  .topnav { padding:12px 16px; }
  .topnav > div { gap:6px; }
  .btn { padding:8px 12px; font-size:.85em; }
  .title-input { width:100%; order:3; flex:1 1 100%; }

  .editor-layout { grid-template-columns:1fr; height:auto; min-height:calc(100vh - 64px); }
  .slide-list {
    border-right:none; border-bottom:1px solid var(--border);
    max-height:130px; display:flex; gap:10px;
    overflow-x:auto; overflow-y:hidden; padding:12px;
  }
  .slide-thumb { margin-bottom:0; min-width:160px; flex-shrink:0; }
  .canvas-wrap { padding:16px 12px; gap:14px; }
  .edit-panel { padding:16px; }

  .container { margin:20px auto; }
  .deck-grid { grid-template-columns:1fr; gap:14px; }
  .deck-thumb { height:110px; }

  .auth-card { padding:28px 22px; }
  .landing .hero { padding:60px 18px 40px; }
  .features { padding:10px 16px 60px; }

  .modal { padding:10px; }
  .modal-card { padding:18px; max-height:90vh; }
  .img-results { grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); }
  .img-results img { height:80px; }

  .present-ctl { bottom:10px; padding:8px 12px; gap:6px; }
  .present-ctl button, .present-ctl a { padding:4px 6px; }
}
@media (max-width: 480px) {
  .topnav { padding:10px 12px; }
  .brand { font-size:1.1em; }
  .btn { padding:7px 10px; font-size:.8em; }
  .landing .hero h1 { font-size:1.9em; }
  .auth-card { padding:24px 18px; border-radius:14px; }
}
@media (hover:none) {
  .btn, .slide-thumb, .img-results img { -webkit-tap-highlight-color:transparent; }
}