/* ── RESET & TOKENS ── */
:root {
  --red:        #e8102a;
  --red-2:      #c00b22;
  --red-3:      #8a0618;
  --red-glow:   rgba(232,16,42,0.22);
  --red-faint:  rgba(232,16,42,0.07);
  --bg:         #110a0d;
  --bg-2:       #1a0e12;
  --bg-card:    #2a1720;
  --bg-card-2:  #321d26;
  --border:     rgba(232,16,42,0.22);
  --border-h:   rgba(232,16,42,0.5);
  --text:       #f2e8ea;
  --text-2:     #b89298;
  --text-3:     #7a5a60;
  --mono:       'DM Mono', monospace;
  --sans:       'DM Sans', sans-serif;
  --display:    'Barlow Condensed', sans-serif;
  --display-2:  'Bebas Neue', sans-serif;
  --bnav-h:     64px;
  --nav-h:      58px;
  --radius:     14px;
  --radius-sm:  8px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; }
body {
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  min-height:100vh;
  overflow-x:hidden;
  padding-bottom:var(--bnav-h);
}

/* ── NOISE ── */
.noise {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:0.03; mix-blend-mode:overlay;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:rgba(232,16,42,0.25); border-radius:99px; }

/* ══════════ NAVBAR ══════════ */
#nav {
  position:sticky; top:0; z-index:200;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.5rem;
  background:rgba(17,10,13,0.92);
  backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--border);
  transition:border-color .3s;
}
#nav.scrolled { border-color:rgba(232,16,42,0.35); }

.logo { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text); }
.logo-mark {
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(135deg,var(--red-2),var(--red));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800; font-size:1rem; color:#fff;
  box-shadow:0 0 18px rgba(232,16,42,0.45);
}
.logo-text { font-family:var(--display); font-weight:800; font-size:1.1rem; letter-spacing:-.02em; }
.logo-text em { font-style:normal; color:var(--red); }

.nav-right { display:flex; align-items:center; gap:.35rem; }
.nav-link {
  display:flex; align-items:center; gap:.4rem;
  text-decoration:none; color:var(--text-2); font-size:.8rem; font-weight:500;
  padding:.4rem .8rem; border-radius:7px; border:1px solid transparent;
  transition:all .2s;
}
.nav-link i { font-size:.75rem; }
.nav-link:hover { color:var(--text); border-color:var(--border-h); background:var(--red-faint); }
.nav-link.active { color:var(--red); border-color:var(--border); background:var(--red-faint); }
.nav-wa {
  display:flex; align-items:center; gap:.4rem;
  text-decoration:none; color:#25d366; font-size:.8rem; font-weight:600;
  padding:.4rem .8rem; border-radius:7px;
  border:1px solid rgba(37,211,102,0.2); background:rgba(37,211,102,0.05);
  transition:all .2s;
}
.nav-wa:hover { background:rgba(37,211,102,0.1); border-color:rgba(37,211,102,0.38); }
.nav-wa i { font-size:.82rem; }

/* ── ADMIN BAR ── */
#adminBar {
  display:none; align-items:center; gap:1rem;
  padding:.5rem 1.5rem;
  background:rgba(232,16,42,0.05);
  border-bottom:1px solid rgba(232,16,42,0.12);
  position:relative; z-index:100;
  font-size:.78rem; color:var(--text-3); font-family:var(--mono);
}

/* ══════════ VIEW STATES ══════════ */
#viewList   { display:block; }
#viewDetail { display:none; }
#view404    { display:none; }

/* ══════════ HERO ══════════ */
.hero {
  position:relative;
  min-height:clamp(460px, 70vw, 620px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero-video-wrap {
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
#heroBgVideo {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.hero-video-overlay {
  position:absolute; inset:0;
  background:linear-gradient(
    to bottom,
    rgba(17,10,13,0.45) 0%,
    rgba(17,10,13,0.3) 40%,
    rgba(17,10,13,0.72) 80%,
    var(--bg) 100%
  );
}

.hero-content {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  padding:3.5rem 1.5rem 2.5rem;
  width:100%; max-width:700px; margin:0 auto;
  gap:1.5rem;
}

.hero-pill {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.3rem .95rem; border-radius:99px;
  border:1px solid rgba(232,16,42,0.35);
  background:rgba(232,16,42,0.1);
  backdrop-filter:blur(8px);
  font-size:.72rem; color:#ff6070; font-weight:500;
  font-family:var(--mono); letter-spacing:.04em;
  animation:fadeUp .6s ease both;
}
.pill-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--red); box-shadow:0 0 6px var(--red);
  animation:blink 2s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }

.hero-box {
  backdrop-filter:blur(10px);
  background:rgba(17,10,13,0.25);
  border:1px solid rgba(232,16,42,0.18);
  border-radius:20px;
  padding:2rem 2rem 1.75rem;
  animation:fadeUp .6s ease .1s both;
}
.hero-box h1 {
  font-family:var(--display-2); font-size:clamp(3rem,9vw,5.5rem);
  font-weight:400; letter-spacing:.02em; line-height:1.0;
  margin-bottom:.75rem; text-transform:uppercase;
}
.hero-accent {
  background:linear-gradient(135deg,#ff2840 0%,#e8102a 50%,#ff7885 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-box p { color:var(--text-2); font-size:.9rem; line-height:1.75; max-width:480px; margin:0 auto; }

.hero-stats {
  display:flex; align-items:center; justify-content:center; gap:1.5rem;
  background:rgba(17,10,13,0.55);
  backdrop-filter:blur(16px);
  border:1px solid rgba(232,16,42,0.2);
  border-radius:14px; padding:.9rem 2rem;
  animation:fadeUp .6s ease .2s both;
}
.hero-stat { text-align:center; }
.hero-stat-num { font-family:var(--display-2); font-size:2.2rem; font-weight:400; color:var(--red); line-height:1; letter-spacing:.03em; }
.hero-stat-label { font-size:.65rem; color:var(--text-3); margin-top:.15rem; font-weight:500; text-transform:uppercase; letter-spacing:.06em; }
.stat-div { width:1px; height:28px; background:rgba(232,16,42,0.2); }

@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ══════════ FILTERS ══════════ */
.filter-section {
  position:relative; z-index:1;
  max-width:1100px; margin:0 auto;
  padding:1.5rem 1.25rem 1rem;
  display:flex; flex-direction:column; gap:1rem;
}

.search-wrap { position:relative; }
.search-icon {
  position:absolute; left:1.1rem; top:50%; transform:translateY(-50%);
  color:var(--text-3); font-size:.85rem; pointer-events:none;
}
.search-input {
  width:100%; background:var(--bg-card);
  border:1px solid var(--border); border-radius:11px;
  padding:.85rem 2.75rem .85rem 2.9rem;
  color:var(--text); font-family:var(--sans); font-size:.88rem;
  outline:none; transition:border-color .25s, box-shadow .25s;
}
.search-input:focus { border-color:rgba(232,16,42,0.45); box-shadow:0 0 0 3px rgba(232,16,42,0.08); }
.search-input::placeholder { color:var(--text-3); }
.search-clear {
  position:absolute; right:1rem; top:50%; transform:translateY(-50%);
  color:var(--text-3); font-size:.8rem; cursor:pointer;
  display:none; width:22px; height:22px;
  align-items:center; justify-content:center;
  border-radius:50%; background:rgba(255,255,255,0.05);
  transition:all .2s;
}
.search-clear:hover { background:rgba(232,16,42,0.15); color:var(--red); }
.search-clear.visible { display:flex; }

.filter-scroll {
  display:flex; gap:.55rem; overflow-x:auto;
  scrollbar-width:none; padding-bottom:2px;
}
.filter-scroll::-webkit-scrollbar { display:none; }

.filter-chip {
  display:inline-flex; align-items:center; gap:.4rem; flex-shrink:0;
  padding:.38rem .9rem; border-radius:99px;
  border:1px solid var(--border); background:transparent;
  color:var(--text-2); font-size:.75rem; font-weight:600;
  font-family:var(--sans); cursor:pointer; transition:all .2s; white-space:nowrap;
}
.filter-chip i { font-size:.7rem; }
.filter-chip:hover { border-color:var(--border-h); color:var(--text); }
.filter-chip.active { background:rgba(232,16,42,0.1); border-color:rgba(232,16,42,0.4); color:#ff6070; }
.chip-count {
  font-size:.65rem; padding:.08rem .38rem; border-radius:99px;
  background:rgba(232,16,42,0.15); color:#ff6070;
}

.lang-scroll {
  display:flex; gap:.45rem; overflow-x:auto;
  scrollbar-width:none; padding-bottom:2px;
}
.lang-scroll::-webkit-scrollbar { display:none; }
.lang-pill {
  flex-shrink:0; padding:.28rem .7rem; border-radius:7px;
  border:1px solid var(--border); background:transparent;
  color:var(--text-3); font-size:.7rem; font-weight:500;
  font-family:var(--mono); cursor:pointer; transition:all .2s; white-space:nowrap;
}
.lang-pill:hover { color:var(--text-2); border-color:var(--border-h); }
.lang-pill.active { background:rgba(232,16,42,0.09); border-color:rgba(232,16,42,0.3); color:#ff8090; }

/* ══════════ GRID ══════════ */
.grid-section {
  position:relative; z-index:1;
  max-width:1100px; margin:0 auto;
  padding:0 1.25rem 5rem;
}
.results-bar { font-size:.72rem; color:var(--text-3); font-family:var(--mono); margin-bottom:1rem; }

.snippets-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1rem;
}

/* ── SNIPPET CARD ── */
.snippet-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  display:flex; flex-direction:column;
  cursor:pointer; overflow:hidden;
  transition:border-color .25s, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
  opacity:0; transform:translateY(16px);
  animation:cardIn .4s ease forwards;
}
@keyframes cardIn { to{opacity:1;transform:translateY(0)} }
.snippet-card:hover {
  border-color:rgba(232,16,42,0.38);
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(232,16,42,0.1),0 4px 14px rgba(0,0,0,0.3);
}
.snippet-card:hover .card-top-bar { transform:scaleX(1); }
.card-top-bar {
  height:2px;
  background:linear-gradient(90deg,var(--red-2),var(--red),transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
  flex-shrink:0;
}

.card-body { padding:1.1rem; display:flex; flex-direction:column; gap:.75rem; flex:1; }
.card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.65rem; }

.card-title {
  font-family:var(--display); font-size:.92rem; font-weight:700;
  color:var(--text); line-height:1.3; display:flex; align-items:center; gap:.45rem;
}
.new-badge {
  font-size:.6rem; padding:.1rem .4rem; border-radius:99px;
  background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.22);
  color:#4ade80; font-family:var(--mono); font-weight:500; flex-shrink:0;
}
.card-desc { font-size:.78rem; color:var(--text-2); line-height:1.65; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.lang-badge {
  width:36px; height:36px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.58rem; font-weight:600; line-height:1.1; text-align:center;
}
.lb-js  { background:rgba(247,223,30,.08);  color:#f7df1e; border:1px solid rgba(247,223,30,.18); }
.lb-py  { background:rgba(55,118,171,.1);   color:#61a6d3; border:1px solid rgba(55,118,171,.18); }
.lb-php { background:rgba(119,123,180,.1);  color:#9da0d0; border:1px solid rgba(119,123,180,.18);}
.lb-ts  { background:rgba(49,120,198,.1);   color:#5b9bd5; border:1px solid rgba(49,120,198,.18); }
.lb-sh  { background:rgba(137,224,81,.1);   color:#89e051; border:1px solid rgba(137,224,81,.18); }
.lb-def { background:rgba(232,16,42,.08);   color:#ff6070; border:1px solid rgba(232,16,42,.18);  }

.card-tags { display:flex; gap:.35rem; flex-wrap:wrap; }
.tag {
  font-size:.64rem; padding:.18rem .5rem; border-radius:99px;
  background:rgba(232,16,42,.06); border:1px solid rgba(232,16,42,.13);
  color:var(--text-3); font-family:var(--mono);
}
.tag-cat { background:rgba(232,16,42,.1); border-color:rgba(232,16,42,.22); color:#ff7080; }

.code-preview {
  background:#241318; border:1px solid rgba(232,16,42,.18); border-radius:8px;
  padding:.75rem .9rem; font-family:var(--mono); font-size:.7rem; line-height:1.75;
  color:#9a7880; overflow:hidden; max-height:80px;
  position:relative; white-space:pre;
}
.code-preview::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:28px;
  background:linear-gradient(transparent,#241318);
}

.card-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem 1.1rem; border-top:1px solid rgba(232,16,42,.15);
  background:rgba(232,16,42,.03); flex-shrink:0;
}
.card-lang { font-family:var(--mono); font-size:.68rem; color:var(--text-3); display:flex; align-items:center; gap:.35rem; text-transform:uppercase; letter-spacing:.05em; }
.card-lang i { font-size:.6rem; color:var(--red); }
.card-date { font-size:.68rem; color:var(--text-3); }

/* ── SKELETON ── */
.skel-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.1rem; display:flex; flex-direction:column; gap:.6rem;
}
.skeleton, .skel-line, .skel-badge, .skel-tag, .skel-code {
  background:linear-gradient(90deg,var(--bg-card) 25%,rgba(232,16,42,.05) 50%,var(--bg-card) 75%);
  background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:6px;
}
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }
.skel-top { display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.skel-line { height:11px; width:100%; }
.w30 { width:30% !important; }
.w40 { width:40% !important; }
.w60 { width:60% !important; }
.w70 { width:70% !important; }
.w75 { width:75% !important; }
.w80 { width:80% !important; }
.w85 { width:85% !important; }
.w90 { width:90% !important; }
.mt4 { margin-top:4px !important; }
.mt8 { margin-top:8px !important; }
.mt10 { margin-top:10px !important; }
.mt12 { margin-top:12px !important; }
.skel-badge { width:36px; height:36px; border-radius:8px; flex-shrink:0; }
.skel-tags { display:flex; gap:.35rem; }
.skel-tag { height:18px; width:60px; border-radius:99px; }
.skel-code { height:72px; border-radius:8px; }
.skel-foot { display:flex; justify-content:space-between; margin-top:6px; }

/* ── EMPTY ── */
.empty {
  grid-column:1/-1; text-align:center; padding:4rem 2rem;
  display:flex; flex-direction:column; align-items:center; gap:1rem; color:var(--text-3);
}
.empty i { font-size:2.5rem; opacity:.3; }
.empty p { font-size:.85rem; }

/* ══════════ DETAIL ══════════ */
#viewDetail { position:relative; z-index:1; animation:fadeUp .4s ease both; }
.detail-wrap { max-width:860px; margin:0 auto; padding:2rem 1.25rem 6rem; }

.breadcrumb {
  display:flex; align-items:center; gap:.45rem;
  font-size:.72rem; color:var(--text-3); font-family:var(--mono);
  margin-bottom:1.5rem; flex-wrap:wrap;
}
.breadcrumb a { color:var(--text-3); text-decoration:none; transition:color .2s; }
.breadcrumb a:hover { color:var(--red); }
.bc-sep { font-size:.6rem; opacity:.4; }
.bc-item { color:var(--text-2); }
.bc-item.active { color:var(--text); }

.detail-url-bar {
  display:flex; align-items:center; gap:.6rem;
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06);
  border-radius:9px; padding:.5rem .9rem; font-family:var(--mono);
  font-size:.72rem; color:var(--text-3); cursor:pointer;
  transition:border-color .2s; max-width:100%; margin-bottom:1.75rem;
  overflow:hidden;
}
.detail-url-bar:hover { border-color:rgba(232,16,42,.22); }
.url-icon { flex-shrink:0; opacity:.4; font-size:.7rem; }
.url-text { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.url-copy-btn { flex-shrink:0; opacity:.4; font-size:.7rem; }

.detail-header { margin-bottom:1.75rem; }
.detail-badges { display:flex; align-items:center; gap:.5rem; margin-bottom:.9rem; flex-wrap:wrap; }
.d-lang-badge {
  font-family:var(--mono); font-size:.72rem; color:var(--text-2);
  background:rgba(232,16,42,.09); border:1px solid rgba(232,16,42,.22);
  padding:.18rem .6rem; border-radius:6px;
}
.d-cat-badge {
  font-family:var(--mono); font-size:.72rem; color:var(--text-3);
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  padding:.18rem .6rem; border-radius:6px;
}
.detail-title {
  font-family:var(--display); font-size:clamp(1.5rem,4vw,2.2rem);
  font-weight:800; letter-spacing:-.03em; line-height:1.15; margin-bottom:.7rem;
}
.detail-desc { color:var(--text-2); font-size:.88rem; line-height:1.8; margin-bottom:.9rem; }
.detail-meta { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.meta-item { font-size:.72rem; color:var(--text-3); font-family:var(--mono); display:flex; align-items:center; gap:.35rem; }
.detail-tags { display:flex; gap:.4rem; flex-wrap:wrap; }
.detail-tag {
  font-size:.68rem; padding:.22rem .65rem; border-radius:99px;
  background:rgba(232,16,42,.08); border:1px solid rgba(232,16,42,.16);
  color:#ff8090; font-family:var(--mono);
}

/* code card */
.code-card {
  background:#2a1519; border:1px solid rgba(232,16,42,.28); border-radius:var(--radius);
  overflow:visible;
  position:relative;
  box-shadow:
    0 0 0 1px rgba(232,16,42,.10),
    0 2px 4px rgba(0,0,0,.4),
    0 8px 16px rgba(0,0,0,.5),
    0 20px 40px rgba(0,0,0,.55),
    0 40px 80px rgba(0,0,0,.4),
    0 8px 32px rgba(232,16,42,.12),
    0 24px 64px rgba(232,16,42,.07);
}
/* red glow shadow blur di bawah card */
.code-card::before {
  content:'';
  position:absolute;
  bottom:-20px; left:10%; right:10%;
  height:30px;
  background:radial-gradient(ellipse at center, rgba(232,16,42,.3) 0%, transparent 72%);
  filter:blur(12px);
  z-index:-1;
  pointer-events:none;
}
/* clip overflow dari konten di dalam */
.code-card > * { border-radius:inherit; }
.code-card-header, .code-card-body, .code-toolbar {
  border-radius:0;
}
.code-card-header { border-radius:var(--radius) var(--radius) 0 0; overflow:hidden; }
.code-toolbar     { border-radius:0 0 var(--radius) var(--radius); overflow:hidden; }

/* ── CARBON HEADER ── */
.code-card-header {
  display:flex; align-items:center; gap:.7rem;
  padding:.7rem 1.1rem;
  border-bottom:2px solid rgba(232,16,42,.45);
  background:linear-gradient(180deg,#4a2530 0%,#3a1d25 100%);
}

/* macOS dots */
.macos-dots { display:flex; align-items:center; gap:.42rem; flex-shrink:0; }
.macos-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.dot-red    { background:#ff5f57; box-shadow:0 0 6px rgba(255,95,87,.6); }
.dot-yellow { background:#febc2e; box-shadow:0 0 6px rgba(254,188,46,.5); }
.dot-green  { background:#28c840; box-shadow:0 0 6px rgba(40,200,64,.5); }

.code-filename {
  font-family:var(--mono); font-size:.74rem; color:var(--text-2);
  display:flex; align-items:center; gap:.5rem;
  flex:1; min-width:0; overflow:hidden;
  white-space:nowrap; text-overflow:ellipsis;
}
.code-filename span:last-child { overflow:hidden; text-overflow:ellipsis; }
.ext-chip {
  background:rgba(232,16,42,.12); border:1px solid rgba(232,16,42,.25);
  color:#ff7080; padding:.12rem .5rem; border-radius:5px; font-size:.64rem; flex-shrink:0;
}
.lang-chip {
  font-family:var(--mono); font-size:.62rem; font-weight:600; flex-shrink:0;
  padding:.15rem .6rem; border-radius:99px; text-transform:uppercase; letter-spacing:.04em;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); color:var(--text-3);
}

/* ── CODE BODY ── */
.code-card-body {
  display:flex;
  overflow-x:auto;
  overflow-y:auto;
  max-height:560px;
  background:#261419;
  scrollbar-width:thin;
  scrollbar-color:rgba(232,16,42,.25) transparent;
}
.code-card-body::-webkit-scrollbar { height:6px; width:6px; }
.code-card-body::-webkit-scrollbar-track { background:transparent; }
.code-card-body::-webkit-scrollbar-thumb { background:rgba(232,16,42,.3); border-radius:99px; }

.line-nums {
  padding:1.1rem .75rem 1.1rem 1rem;
  font-family:var(--mono); font-size:.74rem;
  line-height:1.85; color:rgba(200,120,130,.6); user-select:none;
  text-align:right; flex-shrink:0; min-width:3rem;
  white-space:pre; letter-spacing:0;
  display:block !important;
  position:sticky; left:0; z-index:2;
  background:#261419;
}
.code-pre {
  padding:1.1rem 1.5rem 1.1rem 1.2rem;
  font-family:var(--mono); font-size:.74rem;
  line-height:1.85;
  white-space:pre;            /* jangan wrap */
  flex:1;
  min-width:0;
  overflow:visible;           /* scroll handled by parent */
}
.code-pre code.hljs {
  background:transparent !important; padding:0 !important;
  font-family:var(--mono) !important; font-size:.74rem !important; line-height:1.85 !important;
  white-space:pre !important;
}

/* ── TOOLBAR BAWAH ── */
.code-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 1.1rem;
  border-top:1px solid rgba(232,16,42,.14);
  background:linear-gradient(180deg,#2a1519 0%,#341c23 100%);
  gap:.5rem; flex-wrap:wrap;
}
.toolbar-info {
  display:flex; align-items:center; gap:.4rem;
  font-family:var(--mono); font-size:.66rem; color:rgba(180,100,110,.5);
}
.toolbar-info i { font-size:.58rem; color:var(--red); opacity:.5; }
.toolbar-actions { display:flex; gap:.4rem; flex-shrink:0; }
.act-btn {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .85rem; border-radius:7px; font-size:.74rem; font-weight:600;
  border:1px solid var(--border); background:transparent; color:var(--text-2);
  cursor:pointer; font-family:var(--sans); transition:all .2s; white-space:nowrap;
}
.act-btn i { font-size:.68rem; }
.act-btn:hover { background:rgba(232,16,42,.09); border-color:var(--border-h); color:var(--text); }
.act-btn.primary { background:var(--red); border-color:var(--red); color:#fff; }
.act-btn.primary:hover { background:var(--red-2); box-shadow:0 0 12px rgba(232,16,42,.4); }

/* ══════════ 404 ══════════ */
#view404 {
  position:relative; z-index:1; min-height:calc(100vh - var(--nav-h) - var(--bnav-h));
  display:flex; align-items:center; justify-content:center;
  padding:3rem 1.5rem; text-align:center;
}
.err-inner { display:flex; flex-direction:column; align-items:center; gap:.75rem; max-width:400px; }
.err-icon { font-size:2.8rem; color:rgba(232,16,42,.35); animation:fadeUp .5s ease both; }
.err-num {
  font-family:var(--display); font-size:clamp(5rem,18vw,9rem); font-weight:900;
  letter-spacing:-.05em; line-height:1;
  background:linear-gradient(135deg,#3a0a10 0%,#7a0615 40%,#e8102a 70%,#ff7882 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter:drop-shadow(0 0 30px rgba(232,16,42,.3));
  animation:fadeUp .5s ease .05s both;
}
.err-title {
  font-family:var(--display); font-size:clamp(1.1rem,3vw,1.6rem);
  font-weight:800; color:var(--text); animation:fadeUp .5s ease .1s both;
}
.err-msg { color:var(--text-2); font-size:.86rem; line-height:1.8; animation:fadeUp .5s ease .15s both; }
.err-path {
  font-family:var(--mono); font-size:.72rem; color:var(--red);
  background:rgba(232,16,42,.07); border:1px solid rgba(232,16,42,.16);
  border-radius:6px; padding:.25rem .7rem;
  max-width:90%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  animation:fadeUp .5s ease .2s both;
}
.err-btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.7rem 1.75rem; border-radius:10px; font-size:.86rem; font-weight:700;
  background:var(--red); color:#fff; border:none; cursor:pointer;
  font-family:var(--sans); transition:all .2s; box-shadow:0 8px 24px rgba(232,16,42,.35);
  animation:fadeUp .5s ease .25s both;
}
.err-btn:hover { background:var(--red-2); transform:translateY(-2px); }

/* ══════════ TOAST ══════════ */
#toastWrap {
  position:fixed; bottom:calc(var(--bnav-h) + .9rem); right:1.1rem;
  z-index:500; display:flex; flex-direction:column; gap:.4rem; pointer-events:none;
}
.toast {
  background:var(--bg-card-2); border:1px solid rgba(232,16,42,.2);
  border-radius:10px; padding:.65rem 1rem; font-size:.78rem; color:var(--text);
  font-weight:500; box-shadow:0 8px 24px rgba(0,0,0,.4);
  display:flex; align-items:center; gap:.5rem;
  opacity:0; transform:translateX(16px);
  transition:all .3s cubic-bezier(.16,1,.3,1); pointer-events:none;
}
.toast.show { opacity:1; transform:translateX(0); }
.toast i { font-size:.72rem; }
.toast-ok i { color:#22c55e; }
.toast-err i { color:#ff6070; }

/* ══════════ BOTTOM NAV ══════════ */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:200;
  height:var(--bnav-h);
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:0 1.25rem;
  background:rgba(17,10,13,.97);
  backdrop-filter:blur(24px) saturate(180%);
  border-top:1px solid var(--border);
}
.bnav-item {
  display:flex; flex-direction:column; align-items:center; gap:.18rem;
  text-decoration:none; color:var(--text-3); font-size:.58rem;
  font-family:var(--mono); font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:.3rem 1.3rem; border-radius:9px; border:1px solid transparent;
  transition:all .2s; min-width:72px;
}
.bnav-item i { font-size:1rem; display:block; }
.bnav-item:hover { color:var(--text-2); }
.bnav-item.active { color:#ff6070; background:rgba(232,16,42,.09); border-color:rgba(232,16,42,.22); }

/* ══════════ FOOTER ══════════ */
footer {
  position:relative; z-index:1; text-align:center;
  padding:1.25rem; border-top:1px solid var(--border);
  color:var(--text-3); font-size:.75rem;
  margin-bottom:var(--bnav-h);
  display:flex; align-items:center; justify-content:center; gap:.4rem;
}
footer i { color:var(--red); font-size:.7rem; }

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:640px) {
  #nav { padding:0 1rem; }
  .nav-link span, .nav-link { font-size:.75rem; }
  .hero-box { padding:1.5rem 1.25rem; }
  .hero-stats { gap:1rem; padding:.75rem 1.25rem; }
  .snippets-grid { grid-template-columns:1fr; }
  .hero-content { padding:2.5rem 1rem 2rem; }
  .code-toolbar { flex-direction:column; align-items:stretch; }
  .toolbar-actions { justify-content:stretch; }
  .toolbar-actions .act-btn { flex:1; justify-content:center; }
}
@media (min-width:641px) and (max-width:900px) {
  .snippets-grid { grid-template-columns:repeat(2,1fr); }
}