/* SLTC eMagazine — premium UI */
:root{
  --sltc-bg:#fafafa;
  --sltc-surface:#ffffff;
  --sltc-text:#0f172a;
  --sltc-muted:#64748b;
  --sltc-border:rgba(15,23,42,.08);
  --sltc-accent:#0f172a;
  --sltc-accent-2:#3b82f6;
  --sltc-radius:16px;
  --sltc-shadow:0 10px 30px -12px rgba(15,23,42,.15);
  --sltc-shadow-lg:0 30px 60px -20px rgba(15,23,42,.25);
}

.sltc-emag-archive,.sltc-viewer{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;color:var(--sltc-text);}

/* ---------- Archive ---------- */
.sltc-toolbar{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:24px;}
.sltc-search{position:relative;flex:1;min-width:240px;max-width:420px;}
.sltc-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--sltc-muted);}
.sltc-search-input{width:100%;padding:12px 16px 12px 42px;border:1px solid var(--sltc-border);border-radius:999px;background:var(--sltc-surface);font-size:14px;outline:none;transition:.2s;}
.sltc-search-input:focus{border-color:var(--sltc-accent-2);box-shadow:0 0 0 4px rgba(59,130,246,.12);}
.sltc-filters{display:flex;gap:8px;flex-wrap:wrap;}
.sltc-chip{padding:8px 14px;border:1px solid var(--sltc-border);background:var(--sltc-surface);border-radius:999px;font-size:13px;cursor:pointer;transition:.2s;color:var(--sltc-text);}
.sltc-chip:hover{border-color:var(--sltc-accent);}
.sltc-chip.is-active{background:var(--sltc-accent);color:#fff;border-color:var(--sltc-accent);}

.sltc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px;}
.sltc-card{display:block;background:var(--sltc-surface);border-radius:var(--sltc-radius);overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--sltc-shadow);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;position:relative;}
.sltc-card:hover{transform:translateY(-6px);box-shadow:var(--sltc-shadow-lg);}
.sltc-thumb{position:relative;aspect-ratio:3/4;background:linear-gradient(135deg,#e2e8f0,#f1f5f9);overflow:hidden;}
.sltc-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s;}
.sltc-card:hover .sltc-thumb img{transform:scale(1.05);}
.sltc-thumb-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:64px;font-weight:700;color:#94a3b8;}
.sltc-badge{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);padding:5px 10px;border-radius:999px;font-size:11px;font-weight:600;color:#b45309;}
.sltc-card-hover{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,23,42,.85),transparent 60%);display:flex;align-items:flex-end;justify-content:center;padding:20px;opacity:0;transition:.3s;color:#fff;font-weight:600;font-size:14px;}
.sltc-card:hover .sltc-card-hover{opacity:1;}
.sltc-meta{padding:16px;}
.sltc-cat{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--sltc-accent-2);font-weight:600;margin-bottom:6px;}
.sltc-title{font-size:16px;line-height:1.35;margin:0 0 6px;font-weight:600;}
.sltc-date{font-size:12px;color:var(--sltc-muted);}

.sltc-skeleton .sltc-thumb,.sltc-skeleton .sl{background:linear-gradient(90deg,#eef2f7 0%,#f8fafc 50%,#eef2f7 100%);background-size:200% 100%;animation:sltc-shimmer 1.4s infinite;}
.sltc-skeleton .sl{height:14px;border-radius:6px;margin-top:10px;}
.sltc-skeleton .sl.short{width:60%;}
@keyframes sltc-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

.sltc-pagination{text-align:center;margin-top:32px;}
.sltc-loadmore{padding:12px 28px;border:1px solid var(--sltc-border);background:var(--sltc-surface);border-radius:999px;font-size:14px;font-weight:500;cursor:pointer;transition:.2s;}
.sltc-loadmore:hover{background:var(--sltc-accent);color:#fff;border-color:var(--sltc-accent);}
.sltc-loadmore[disabled]{opacity:.5;cursor:default;}
.sltc-empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--sltc-muted);}

/* ---------- Viewer ---------- */
.sltc-viewer{background:var(--sltc-bg);border-radius:var(--sltc-radius);overflow:hidden;box-shadow:var(--sltc-shadow);margin:24px 0;display:flex;flex-direction:column;min-height:600px;position:relative;}
.sltc-viewer.is-dark{--sltc-bg:#0b0f19;--sltc-surface:#111827;--sltc-text:#e5e7eb;--sltc-muted:#94a3b8;--sltc-border:rgba(255,255,255,.08);background:var(--sltc-bg);color:var(--sltc-text);}
.sltc-viewer.is-fullscreen{position:fixed;inset:0;z-index:99999;border-radius:0;margin:0;}

.sltc-viewer-toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:rgba(255,255,255,.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--sltc-border);gap:12px;flex-wrap:wrap;z-index:2;}
.sltc-viewer.is-dark .sltc-viewer-toolbar{background:rgba(17,24,39,.7);}
.sltc-vt-left,.sltc-vt-center,.sltc-vt-right{display:flex;align-items:center;gap:6px;}
.sltc-vt-center{font-size:13px;color:var(--sltc-muted);}
.sltc-viewer-toolbar button,.sltc-viewer-toolbar a{appearance:none;border:1px solid transparent;background:transparent;color:var(--sltc-text);width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;cursor:pointer;transition:.2s;font-size:18px;text-decoration:none;}
.sltc-viewer-toolbar button:hover,.sltc-viewer-toolbar a:hover{background:rgba(15,23,42,.06);}
.sltc-viewer.is-dark .sltc-viewer-toolbar button:hover{background:rgba(255,255,255,.08);}
.sltc-viewer-toolbar svg{width:18px;height:18px;}
.sltc-pageind{padding:0 10px;font-variant-numeric:tabular-nums;}

.sltc-viewer-body{flex:1;display:flex;overflow:hidden;position:relative;min-height:500px;}
.sltc-thumbs{width:160px;border-right:1px solid var(--sltc-border);overflow-y:auto;padding:12px;background:var(--sltc-surface);}
.sltc-thumbs[hidden]{display:none;}
.sltc-thumbs .t{display:block;width:100%;margin-bottom:8px;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:.2s;background:#fff;}
.sltc-thumbs .t.is-active{border-color:var(--sltc-accent-2);}
.sltc-thumbs .t img{display:block;width:100%;border-radius:4px;}

.sltc-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto;position:relative;background:radial-gradient(ellipse at center,rgba(0,0,0,.04),transparent 70%);}
.sltc-viewer.is-dark .sltc-stage{background:radial-gradient(ellipse at center,rgba(0,0,0,.4),transparent 70%);}
.sltc-loading{display:flex;flex-direction:column;align-items:center;gap:16px;color:var(--sltc-muted);}
.sltc-spinner{width:48px;height:48px;border:3px solid var(--sltc-border);border-top-color:var(--sltc-accent-2);border-radius:50%;animation:sltc-spin 1s linear infinite;}
@keyframes sltc-spin{to{transform:rotate(360deg);}}

.sltc-flipbook{margin:0 auto;will-change:transform;}
.sltc-flipbook canvas{display:block;background:#fff;}

.sltc-search-bar{padding:12px 18px;background:var(--sltc-surface);border-top:1px solid var(--sltc-border);display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.sltc-search-bar input{flex:1;min-width:200px;padding:10px 14px;border:1px solid var(--sltc-border);border-radius:8px;background:var(--sltc-bg);color:var(--sltc-text);}
.sltc-search-bar button{padding:10px 18px;background:var(--sltc-accent);color:#fff;border:0;border-radius:8px;cursor:pointer;}
.sltc-search-results{width:100%;max-height:180px;overflow-y:auto;font-size:13px;color:var(--sltc-muted);}
.sltc-search-results .hit{padding:8px;border-radius:6px;cursor:pointer;}
.sltc-search-results .hit:hover{background:rgba(59,130,246,.08);}

.sltc-progress{height:3px;background:var(--sltc-border);position:relative;}
.sltc-progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--sltc-accent-2),#06b6d4);transition:width .3s;}

/* Mobile */
@media (max-width:768px){
  .sltc-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
  .sltc-viewer{min-height:500px;}
  .sltc-thumbs{position:absolute;left:0;top:0;bottom:0;z-index:3;box-shadow:var(--sltc-shadow-lg);}
  .sltc-stage{padding:8px;}
  .sltc-pageind{font-size:12px;}
}