/* =========================================================
   Lucent Code — stylesheet
   Palette: stone (deep teal-blue) + mist (soft blue-grey)
   ========================================================= */

:root{
  --stone: #336B87;
  --stone-deep: #234A5F;
  --mist: #90AFC5;
  --mist-soft: #D9E6EC;

  --bg: #F6F3EC;
  --bg-raise: #FFFFFF;
  --bg-sunk: #ECE7DC;
  --ink: #262A2E;
  --ink-soft: #6B6F76;
  --line: rgba(38,42,46,.12);

  --radius-l: 26px;
  --radius-m: 18px;
  --radius-s: 12px;
  --shadow: 0 20px 44px -26px rgba(35,74,95,.35);
  --font-display: "Baloo 2", "Plus Jakarta Sans", sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

body[data-theme="night"]{
  --bg: #12161B;
  --bg-raise: #1B2028;
  --bg-sunk: #0D1013;
  --ink: #ECEEF1;
  --ink-soft: #9AA5AF;
  --line: rgba(236,238,241,.12);
  --mist-soft: #223140;
  --shadow: 0 22px 46px -24px rgba(0,0,0,.6);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease, color .3s ease;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
.hide{ display:none !important; }

/* ---------- ambient background blobs ---------- */
.bg-blobs{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.blob{
  position:absolute; border-radius:50%;
  filter:blur(70px); opacity:.35;
}
.b1{ width:360px; height:360px; background:var(--mist); top:-120px; left:-100px; }
.b2{ width:300px; height:300px; background:var(--stone); top:280px; right:-140px; opacity:.22; }
.b3{ width:260px; height:260px; background:var(--mist); bottom:-100px; left:20%; opacity:.25; }
body[data-theme="night"] .blob{ opacity:.16; }

/* ---------- glass utility ---------- */
.glass{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.6);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
body[data-theme="night"] .glass{
  background:rgba(27,32,40,.6);
  border:1px solid rgba(236,238,241,.1);
}

/* ---------- navbar ---------- */
.navbar{
  position:sticky; top:0; z-index:50;
  background:rgba(246,243,236,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
body[data-theme="night"] .navbar{ background:rgba(18,22,27,.75); }
.navbar-inner{
  max-width:1120px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1.25rem;
}
.brand{ display:flex; align-items:center; gap:.5rem; }
.brand-mark{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--stone), var(--mist));
  color:#fff;
}
.brand-mark svg{ width:18px; height:18px; }
.brand-text{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--ink); }
.brand-text em{ font-style:normal; color:var(--stone); }
body[data-theme="night"] .brand-text em{ color:var(--mist); }

.navbar-links{ display:none; align-items:center; gap:1.6rem; }
.navbar-links a{
  display:flex; align-items:center; gap:.4rem;
  font-size:.88rem; font-weight:600; color:var(--ink-soft);
  transition:color .18s ease;
}
.navbar-links a svg{ width:16px; height:16px; }
.navbar-links a:hover{ color:var(--stone); }
body[data-theme="night"] .navbar-links a:hover{ color:var(--mist); }
.nav-upload-link{ color:var(--stone) !important; }
body[data-theme="night"] .nav-upload-link{ color:var(--mist) !important; }

.nav-admin-btn{
  display:flex; align-items:center; gap:.4rem;
  background:none; border:none; padding:0;
  font-size:.88rem; font-weight:600; color:var(--ink-soft);
}
.nav-admin-btn svg{ width:16px; height:16px; }
.nav-admin-btn:hover{ color:var(--stone); }
body[data-theme="night"] .nav-admin-btn:hover{ color:var(--mist); }
.nav-admin-btn.active{ color:#C6484A; }

.navbar-mobile-admin{
  margin-top:.2rem; text-align:left;
  padding:.7rem .4rem; border-radius:var(--radius-s);
  font-weight:600; font-size:.94rem; color:var(--ink-soft);
  background:none; border:none;
}
.navbar-mobile-admin:active{ background:var(--bg-sunk); }
.navbar-mobile-admin.active{ color:#C6484A; }

/* ---------- profile / google login ---------- */
.nav-profile-btn{
  display:flex; align-items:center; gap:.45rem;
  background:none; border:none; padding:0;
  font-size:.88rem; font-weight:600; color:var(--ink-soft);
}
.nav-profile-btn:hover{ color:var(--stone); }
body[data-theme="night"] .nav-profile-btn:hover{ color:var(--mist); }
.nav-profile-avatar{
  width:24px; height:24px; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-sunk); color:var(--ink-soft); flex-shrink:0;
}
.nav-profile-avatar svg{ width:15px; height:15px; }
.nav-profile-avatar img{ width:100%; height:100%; object-fit:cover; }

.profile-note{ font-size:.78rem; color:var(--ink-soft); margin-top:.8rem; }
.profile-card{
  display:flex; align-items:center; gap:.8rem;
  padding:.8rem; border-radius:var(--radius-m);
  background:var(--bg-sunk); margin-bottom:1.1rem;
}
.profile-card img{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.profile-card strong{ display:block; font-size:.94rem; }
.profile-card span{ display:block; font-size:.78rem; color:var(--ink-soft); }
.profile-logout-btn{ width:100%; text-align:center; margin-top:.7rem; }

.upload-as-chip{
  display:flex; align-items:center; gap:.5rem;
  padding:.55em .8em; border-radius:var(--radius-s);
  background:var(--bg-sunk); border:1px solid var(--line);
}
.upload-as-chip img{ width:22px; height:22px; border-radius:50%; object-fit:cover; }
.upload-as-chip span{ font-size:.86rem; font-weight:600; }

.card-author{
  display:flex; align-items:center; gap:.4rem; margin-top:-.2rem;
}
.card-author img{ width:18px; height:18px; border-radius:50%; object-fit:cover; }
.card-author span{ font-size:.72rem; color:var(--ink-soft); font-weight:600; }

.detail-meta{ display:flex; align-items:center; gap:.5rem; margin:1.1rem 0 0; font-size:.78rem; color:var(--ink-soft); }
.detail-meta-avatar{ width:20px; height:20px; border-radius:50%; object-fit:cover; }

/* ---------- photo banner inside the hamburger dropdown (16:9) ---------- */
.navbar-mobile-banner{
  position:relative;
  aspect-ratio:16/9;
  margin:.4rem 0 .6rem;
  border-radius:var(--radius-m);
  overflow:hidden;
  background-image:
    linear-gradient(180deg, rgba(18,22,27,.1) 0%, rgba(18,22,27,.75) 100%),
    url("https://linkup.rakku.cc.cd/image/udcv.jpg");
  background-size:cover;
  background-position:center 35%;
  display:flex; align-items:flex-end; padding:.7rem .9rem;
}
.navbar-mobile-banner-caption{
  font-family:var(--font-display); font-weight:700; font-size:.9rem;
  letter-spacing:.02em; color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}

.navbar-actions{ display:flex; align-items:center; gap:.5rem; }
.icon-btn{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-raise); border:1px solid var(--line);
  color:var(--ink-soft);
}
.icon-btn svg{ width:18px; height:18px; }
.icon-btn .ic-moon{ display:none; }
body[data-theme="night"] .icon-btn .ic-sun{ display:none; }
body[data-theme="night"] .icon-btn .ic-moon{ display:block; }
.menu-btn{ display:flex; }

.navbar-mobile{
  display:none; flex-direction:column; gap:.2rem;
  padding:.4rem 1.25rem 1rem;
  border-top:1px solid var(--line);
}
.navbar-mobile.open{ display:flex; }
.navbar-mobile a{
  padding:.7rem .4rem; border-radius:var(--radius-s);
  font-weight:600; font-size:.94rem; color:var(--ink);
}
.navbar-mobile a:active{ background:var(--bg-sunk); }

@media (min-width:860px){
  .navbar-links{ display:flex; }
  .menu-btn{ display:none; }
  .navbar-mobile{ display:none !important; }
}

/* ---------- layout shells ---------- */
main{ position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:0 1.25rem 4rem; }

/* ---------- hero ---------- */
.hero{
  display:flex; flex-direction:column-reverse; gap:2rem;
  padding:2.4rem 0 2.2rem;
}
.eyebrow-pill{
  display:inline-flex; align-items:center;
  padding:.35em .9em; border-radius:999px;
  font-size:.76rem; font-weight:700; letter-spacing:.01em;
  color:var(--stone-deep);
  background:var(--mist-soft);
  margin-bottom:1rem;
}
body[data-theme="night"] .eyebrow-pill{ color:var(--mist); }
.hero h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2rem, 6vw, 2.9rem); line-height:1.14; margin:0 0 .9rem;
}
.hero h1 .accent{ color:var(--stone); }
body[data-theme="night"] .hero h1 .accent{ color:var(--mist); }
.hero-desc{ color:var(--ink-soft); font-size:1rem; max-width:46ch; margin:0 0 1.4rem; }
.hero-stats{ display:flex; gap:1.8rem; }
.stat strong{ display:block; font-family:var(--font-display); font-size:1.6rem; color:var(--stone); }
body[data-theme="night"] .stat strong{ color:var(--mist); }
.stat span{ font-size:.78rem; color:var(--ink-soft); }

.hero-visual{ display:flex; justify-content:center; }
.hero-visual svg{ width:100%; max-width:320px; height:auto; }

@media (min-width:860px){
  .hero{ flex-direction:row; align-items:center; justify-content:space-between; padding:3.2rem 0; }
  .hero-copy{ flex:1; }
  .hero-visual{ flex:0 0 340px; }
}

/* ---------- modal (shared) ---------- */
.modal-backdrop{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  background:rgba(18,22,27,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.modal-box{
  position:relative; max-width:min(380px, 92vw); width:100%;
  border-radius:var(--radius-l); overflow:hidden;
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.55);
}
.modal-close{
  position:absolute; top:.7rem; right:.7rem;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(18,22,27,.12); color:var(--ink); border:none;
  z-index:2;
}
.modal-close svg{ width:16px; height:16px; }

.admin-modal-box{
  background:var(--bg-raise);
  padding:1.6rem 1.5rem;
  text-align:left;
}
.admin-modal-box h2{ font-family:var(--font-display); font-size:1.2rem; margin:0 0 .4rem; padding-right:1.5rem; }
.admin-modal-box p{ margin:0 0 1rem; font-size:.86rem; color:var(--ink-soft); }
.admin-modal-box form{ display:flex; flex-direction:column; gap:.7rem; }
.admin-modal-box input{
  font:inherit; font-size:.92rem; color:var(--ink);
  background:var(--bg); border:1px solid var(--line);
  border-radius:var(--radius-s); padding:.7em .9em; outline:none;
}
.admin-modal-box input:focus{ border-color:var(--stone); box-shadow:0 0 0 3px rgba(144,175,197,.28); }
.admin-modal-msg{ font-size:.82rem; min-height:0; }
.admin-modal-msg.err{ color:#C6484A; font-weight:600; }
.admin-modal-box .btn-primary{ width:100%; text-align:center; }

/* ---------- delete controls ---------- */
.card-delete-btn{
  position:absolute; top:.9rem; right:.9rem;
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(198,72,74,.12); color:#C6484A; border:1px solid rgba(198,72,74,.3);
}
.card-delete-btn svg{ width:15px; height:15px; }
.card-delete-btn:hover{ background:#C6484A; color:#fff; }
.snippet-card{ position:relative; }

.detail-head-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
.delete-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4em .9em; border-radius:999px;
  font-size:.78rem; font-weight:700;
  background:rgba(198,72,74,.12); color:#C6484A; border:1px solid rgba(198,72,74,.3);
}
.delete-btn svg{ width:14px; height:14px; }
.delete-btn:hover{ background:#C6484A; color:#fff; }

/* ---------- hero upload cta ---------- */
.hero-upload-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:1.2rem; padding:.75em 1.4em;
  border-radius:999px; font-weight:700; font-size:.9rem;
  color:#fff;
  background:linear-gradient(135deg, var(--stone), var(--mist));
  box-shadow:0 14px 28px -16px rgba(35,74,95,.55);
  transition:transform .18s ease, box-shadow .18s ease;
}
.hero-upload-btn:hover{ transform:translateY(-2px); box-shadow:0 18px 32px -14px rgba(35,74,95,.6); }
.hero-upload-btn svg{ width:16px; height:16px; }
.toolbar{ display:flex; flex-direction:column; gap:.9rem; margin-bottom:1.6rem; }
.search-box{
  display:flex; align-items:center; gap:.6rem;
  padding:.75rem 1rem; border-radius:999px;
  background:var(--bg-raise); border:1px solid var(--line);
}
.search-box svg{ width:18px; height:18px; color:var(--ink-soft); flex-shrink:0; }
.search-box input{
  border:none; outline:none; background:transparent;
  font:inherit; font-size:.92rem; color:var(--ink); width:100%;
}
.search-box input::placeholder{ color:var(--ink-soft); }

.filter-pills{ display:flex; flex-wrap:wrap; gap:.5rem; }
.filter-pill{
  padding:.4em 1em; border-radius:999px;
  font-size:.78rem; font-weight:700;
  background:var(--bg-raise); border:1px solid var(--line);
  color:var(--ink-soft);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.filter-pill.active{
  background:linear-gradient(135deg, var(--stone), var(--mist));
  border-color:transparent; color:#fff;
}
.toolbar-hint{ margin:0; font-size:.78rem; color:var(--ink-soft); }

/* ---------- snippet grid & cards ---------- */
.grid{
  display:grid; grid-template-columns:1fr; gap:1.1rem;
}
@media (min-width:640px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .grid{ grid-template-columns:repeat(3,1fr); } }

.snippet-card{
  display:flex; flex-direction:column; gap:.7rem;
  padding:1.25rem;
  border-radius:var(--radius-m);
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 16px 32px -26px rgba(35,74,95,.4);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body[data-theme="night"] .snippet-card{
  background:rgba(27,32,40,.6);
  border-color:rgba(236,238,241,.1);
}
.snippet-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--mist); }

.card-top{ display:flex; align-items:center; justify-content:space-between; }
.lang-badge{
  display:inline-flex; align-items:center;
  padding:.24em .7em; border-radius:999px;
  font-family:var(--font-mono); font-size:.68rem; font-weight:600;
  color:var(--stone-deep); background:var(--mist-soft);
}
body[data-theme="night"] .lang-badge{ color:var(--mist); background:rgba(144,175,197,.16); }
.card-date{ font-size:.72rem; color:var(--ink-soft); }

.snippet-card h3{ margin:0; font-family:var(--font-display); font-size:1.12rem; }
.snippet-card p{ margin:0; font-size:.86rem; color:var(--ink-soft); flex:1; }

.card-tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
.card-tags span{
  font-size:.68rem; font-weight:600; color:var(--ink-soft);
  background:var(--bg-sunk); padding:.2em .6em; border-radius:999px;
}

.card-open{
  display:inline-flex; align-items:center; gap:.35rem;
  margin-top:.2rem; font-size:.84rem; font-weight:700; color:var(--stone);
}
body[data-theme="night"] .card-open{ color:var(--mist); }
.card-open svg{ width:14px; height:14px; transition:transform .18s ease; }
.snippet-card:hover .card-open svg{ transform:translateX(3px); }

.empty-state{ text-align:center; color:var(--ink-soft); padding:3rem 1rem; }
.loading-state{ text-align:center; color:var(--ink-soft); padding:2.2rem 1rem; font-size:.9rem; }

/* ---------- detail view ---------- */
.view-detail{ padding-top:2rem; }
.back-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  background:none; border:none; color:var(--ink-soft);
  font-weight:600; font-size:.88rem; margin-bottom:1.2rem; padding:.3rem 0;
}
.back-btn svg{ width:16px; height:16px; }
.back-btn:hover{ color:var(--stone); }
body[data-theme="night"] .back-btn:hover{ color:var(--mist); }

.detail-card{
  padding:1.6rem;
  border-radius:var(--radius-l);
  background:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow);
}
body[data-theme="night"] .detail-card{
  background:rgba(27,32,40,.65);
  border-color:rgba(236,238,241,.1);
}
.detail-head h1{
  font-family:var(--font-display); font-size:clamp(1.5rem,4vw,2rem);
  margin:.6rem 0 .5rem;
}
.detail-desc{ color:var(--ink-soft); margin:0 0 1.2rem; max-width:60ch; }

.detail-info{
  padding:1rem 0; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line);
  margin-bottom:1.3rem;
}
.info-label{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.02em; color:var(--ink-soft); margin-bottom:.5rem; }
.tag-row{ display:flex; flex-wrap:wrap; gap:.4rem; }
.tag-row span{
  font-size:.72rem; font-weight:600; color:var(--stone-deep);
  background:var(--mist-soft); padding:.24em .7em; border-radius:999px;
}
body[data-theme="night"] .tag-row span{ color:var(--mist); background:rgba(144,175,197,.16); }

.code-panel{
  border-radius:var(--radius-m); overflow:hidden;
  border:1px solid var(--line);
}
.code-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem 1rem;
  background:var(--stone-deep); color:#fff;
  font-family:var(--font-mono); font-size:.76rem;
}
.code-actions{ display:flex; gap:.5rem; }
.chip-btn{
  padding:.35em .85em; border-radius:999px; border:none;
  font-size:.72rem; font-weight:700;
  background:rgba(255,255,255,.92); color:var(--stone-deep);
}
.chip-btn.ghost{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.3); }
.code-panel pre{
  margin:0; padding:1.1rem 1.2rem; overflow-x:auto;
  background:#1C2128;
}
.code-panel code{
  font-family:var(--font-mono); font-size:.84rem; line-height:1.65;
  background:transparent !important;
}

/* ---------- syntax highlighting palette (self-hosted, brand-matched) ----------
   highlight.js normalizes every language grammar (JS, PHP, Lua, CSS, Bash, dst)
   to this same set of scope names, jadi satu mapping ini otomatis berlaku benar
   ke semua bahasa yang didukung, bukan cuma yang mirip JavaScript. */
.hljs{ color:#D6DCE3; }

/* kata kunci bahasa: function/local/end (Lua), <?php/echo (PHP), if/const/return (JS) */
.hljs-keyword, .hljs-selector-tag, .hljs-name, .hljs-tag{ color:#7FB2D3; font-weight:600; }

/* fungsi/library bawaan: string.format (Lua), array_map (PHP), Math.max (JS) */
.hljs-built_in, .hljs-type, .hljs-class .hljs-title{ color:#90AFC5; }

/* literal teks: "..." / '...' / `...` */
.hljs-string, .hljs-regexp, .hljs-addition{ color:#B7D9A8; }

/* angka & literal tetap: true/false/null/nil */
.hljs-number, .hljs-literal{ color:#E3B778; }

/* key/atribut: JSON key, CSS property, HTML attribute name */
.hljs-attr, .hljs-attribute, .hljs-property, .hljs-symbol,
.hljs-selector-attr, .hljs-selector-pseudo{ color:#7FC6B6; }

/* komentar: // -- # /* */
.hljs-comment, .hljs-quote{ color:#7B8794; font-style:italic; }
.hljs-doctag{ color:#93A2AF; font-weight:600; }

/* definisi: nama function/class yang dideklarasikan, judul section markdown */
.hljs-title, .hljs-title.function_, .hljs-title.class_,
.hljs-function .hljs-title, .hljs-section{ color:#E0A9D9; font-weight:600; }

/* variabel & parameter — dibiarkan netral biar gak terlalu ramai */
.hljs-variable, .hljs-template-variable, .hljs-params{ color:#D6DCE3; }

/* meta/directive: <?php ?>, @media, #include, front-matter YAML */
.hljs-meta, .hljs-meta .hljs-keyword{ color:#8FA3B0; }

/* selector CSS: #id .class */
.hljs-selector-id, .hljs-selector-class{ color:#E3B778; }

/* markdown & diff */
.hljs-bullet{ color:#8FA3B0; }
.hljs-deletion{ color:#D98C8C; }
.hljs-emphasis{ font-style:italic; }
.hljs-strong{ font-weight:700; }
.hljs-link{ color:#7FB2D3; text-decoration:underline; }

.not-found{ text-align:center; color:var(--ink-soft); padding:3rem 1rem; }
.not-found a{ color:var(--stone); font-weight:700; }
body[data-theme="night"] .not-found a{ color:var(--mist); }

/* ---------- upload view ---------- */
.view-upload{ padding-top:2rem; max-width:760px; margin:0 auto; }
.upload-head{ margin-bottom:1.6rem; }
.upload-head h1{
  font-family:var(--font-display); font-size:clamp(1.6rem,4vw,2.1rem);
  margin:.5rem 0 .5rem;
}

.upload-form{
  display:flex; flex-direction:column; gap:1.1rem;
  padding:1.6rem;
  border-radius:var(--radius-l);
  box-shadow:var(--shadow);
}

.field-row{ display:grid; grid-template-columns:1fr; gap:1.1rem; }
@media (min-width:640px){ .field-row{ grid-template-columns:1fr 1fr; } }

.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{ font-size:.82rem; font-weight:700; color:var(--ink); }
.field label span{ font-weight:500; color:var(--ink-soft); }

.field input, .field textarea, .field select{
  font:inherit; font-size:.9rem; color:var(--ink);
  background:var(--bg-raise); border:1px solid var(--line);
  border-radius:var(--radius-s); padding:.7em .9em;
  outline:none; resize:vertical;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6F76' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right .8em center; background-size:16px;
  padding-right:2.2em;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-soft); opacity:.75; }
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--stone);
  box-shadow:0 0 0 3px rgba(144,175,197,.28);
}
.field .code-input{
  font-family:var(--font-mono); font-size:.84rem;
  background:#1C2128; color:#E8EAED; border-color:transparent;
}
.field .code-input::placeholder{ color:#7C8792; }
.field .code-input:focus{ box-shadow:0 0 0 3px rgba(144,175,197,.35); }

.upload-msg{ font-size:.86rem; min-height:0; }
.upload-msg.err{ color:#C6484A; font-weight:600; }

.upload-actions{ display:flex; justify-content:flex-end; gap:.7rem; margin-top:.2rem; }
.btn-ghost, .btn-primary{
  padding:.7em 1.4em; border-radius:999px; font-weight:700; font-size:.88rem; border:none;
}
.btn-ghost{ background:var(--bg-sunk); color:var(--ink-soft); }
.btn-primary{
  color:#fff; background:linear-gradient(135deg, var(--stone), var(--mist));
  box-shadow:0 14px 26px -16px rgba(35,74,95,.55);
}
.btn-primary:disabled{ opacity:.6; cursor:wait; }
.site-footer{
  position:relative; z-index:1;
  text-align:center; padding:2.2rem 1.25rem 2.6rem;
  border-top:1px solid var(--line);
  color:var(--ink-soft); font-size:.84rem;
}
.footer-tagline{ max-width:44ch; margin:0 auto .6rem; font-size:.82rem; }
.site-footer a{ color:var(--stone); font-weight:600; }
body[data-theme="night"] .site-footer a{ color:var(--mist); }
.footer-links{ display:flex; justify-content:center; gap:1.2rem; margin-top:.6rem; flex-wrap:wrap; }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:1.4rem; transform:translate(-50%, 16px);
  padding:.6em 1.2em; border-radius:999px;
  background:var(--stone-deep); color:#fff; font-size:.84rem; font-weight:600;
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  z-index:100;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}