/* ===== slimdoc — Terminal Slim theme =====
   Standalone token values (the design HTML relied on the aria-studio rail to
   inject --ds-*; here we bake them in so the page renders on its own). */
:root{
  --ds-bg: radial-gradient(circle at 50% -10%, #11161F 0%, #0A0D12 62%);
  --ds-surface: #0F141B;
  --ds-text: #C3CBD6;
  --ds-heading: #EDF1F7;
  --ds-muted: #6B7585;
  --ds-accent: #34D399;
  --ds-on-accent: #052016;
  --ds-border: rgba(122,133,149,.18);
  --ds-font-heading: 'IBM Plex Mono';
  --ds-font-body: 'IBM Plex Sans';
  --ds-radius: 12px;
  --amber: #FBBF24;
}

html{ scroll-behavior:smooth; }
body{
  background: var(--ds-bg);
  background-attachment: fixed;
  color: var(--ds-text);
  font-family: var(--ds-font-body), 'IBM Plex Sans KR','Apple SD Gothic Neo',sans-serif;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right, rgba(122,133,149,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(122,133,149,.045) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(circle at 50% -5%, #000 0%, transparent 65%);
  mask-image: radial-gradient(circle at 50% -5%, #000 0%, transparent 65%);
}

.glow{ text-shadow: 0 0 26px rgba(52,211,153,.5); }
.tint-accent{ background: rgba(52,211,153,.10); }
.tint-amber{ background: rgba(251,191,36,.12); }
.ring-accent-soft{ box-shadow: 0 0 0 1px rgba(52,211,153,.35), 0 0 30px rgba(52,211,153,.10); }

.bar{ transition: width .9s cubic-bezier(.22,1,.36,1); }
.rise{ opacity:0; transform: translateY(16px); animation: rise .7s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes rise{ to{ opacity:1; transform:none; } }
.caret::after{ content:"_"; color: var(--ds-accent); animation: blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.drop.drag{ border-color: var(--ds-accent); background: rgba(52,211,153,.06); }
.drop.busy{ pointer-events:none; opacity:.7; }

.seg{ transition: background .18s ease, color .18s ease; }
.seg-active{ background: var(--ds-accent); color: var(--ds-on-accent); }

/* ----- added (MVP glue) ----- */

/* markdown preview (collapsible, post-conversion) */
#preview{ max-height: 22rem; overflow:auto; white-space:pre-wrap; word-break:break-word; }
#preview::-webkit-scrollbar{ width:10px; }
#preview::-webkit-scrollbar-thumb{ background: rgba(122,133,149,.25); border-radius:6px; }

/* drop-box advice overlay */
#dropOverlay{
  background: rgba(10,13,18,.94);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-radius: var(--ds-radius);
}
#dropOverlay.warn{ box-shadow: inset 0 0 0 2px var(--amber); }
#dropOverlay.warn #dropOverlayMsg{ color: var(--amber); }
#dropOverlay.info{ box-shadow: inset 0 0 0 2px var(--ds-accent); }

/* spinner */
.spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(52,211,153,.25); border-top-color: var(--ds-accent);
  animation: spin .7s linear infinite; display:inline-block;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* toast */
#toast{
  position:fixed; left:50%; bottom:28px; transform: translateX(-50%) translateY(20px);
  background: var(--ds-surface); color: var(--ds-heading);
  border:1px solid var(--ds-border); border-radius: var(--ds-radius);
  padding:10px 18px; font-size:13px; box-shadow:0 10px 40px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition: opacity .25s ease, transform .25s ease; z-index:50;
}
#toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }
#toast.err{ border-color: var(--amber); color: var(--amber); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .rise{ animation:none; opacity:1; transform:none; }
  .bar{ transition:none; }
  .caret::after{ animation:none; }
  .spinner{ animation-duration: 1.4s; }
}