@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin-700-normal.woff2") format("woff2");
}

:root {
  --bg-main: #0f1115;
  --bg-side: #09090b;
  --panel: #18181b;
  --border: #27272a;
  --border-light: rgba(39, 39, 42, 0.5);
  --accent: #22c55e;
  --accent-hover: #4ade80;
  --text-primary: #f3f4f6; /* gray-100 */
  --text-secondary: #9ca3af; /* gray-400 */
  --text-muted: #6b7280; /* gray-500 */
  --error: #ef4444; /* red-500 */
  --warning: #eab308; /* yellow-500 */
  --font-sans: "Space Grotesk", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-side);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 768px) {
  body {
    flex-direction: row;
    height: 100vh;
    overflow: hidden;
  }
}

/* Scrollbars */
::selection { background: rgba(34, 197, 94, 0.2); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3f3f46; }

/* Typography */
a { text-decoration: none; color: inherit; }
button { background: none; border: none; font-family: inherit; cursor: pointer; color: inherit; }
input, textarea, select { font-family: inherit; }
textarea:focus, select:focus, button:focus, input:focus { outline: none; }

/* Utilities */
.hidden { display: none !important; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.text-accent { color: var(--accent); }
.text-center { text-align: center; }

/* Sidebar */
.sidebar {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-side);
  border-right: 1px solid var(--border-light);
  padding: 1.5rem;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .sidebar { width: 16rem; height: 100vh; }
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: bold;
  font-size: 1.25rem;
  color: #fff;
  margin-bottom: 1rem;
  transition: opacity 0.2s;
}
@media (min-width: 768px) { .logo { margin-bottom: 2.5rem; } }
.logo:hover { opacity: 0.8; }
.logo-icon { background: rgba(34, 197, 94, 0.2); padding: 0.375rem; border-radius: 0.5rem; }
.logo-icon svg { width: 1.25rem; height: 1.25rem; color: var(--accent); }

.nav-menu {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}
@media (min-width: 768px) {
  .nav-menu { flex-direction: column; overflow-x: visible; padding-bottom: 0; }
}
.nav-menu::-webkit-scrollbar { display: none; } /* Hide scrollbar for mobile nav */

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  white-space: nowrap;
  transition: all 0.2s;
}
.nav-item.active { background-color: var(--panel); border: 1px solid var(--border-light); color: #fff; font-weight: 500; }
.nav-item.default { color: var(--text-secondary); text-align: left; width: 100%; }
.nav-item.default:hover { color: #fff; background-color: rgba(39, 39, 42, 0.3); }
.nav-item svg { width: 1rem; height: 1rem; }
.nav-item.active svg { color: var(--accent); }
.nav-item.default:hover svg { color: var(--text-primary); }

.sidebar-footer {
  margin-top: auto;
  padding-top: 2rem;
  border-top: 1px solid var(--border-light);
  display: none;
}
@media (min-width: 768px) { .sidebar-footer { display: block; } }

.promo-box {
  background: rgba(24, 24, 27, 0.4);
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border-light);
}
.promo-title { color: #fff; font-weight: bold; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.promo-title svg { width: 1rem; height: 1rem; color: var(--accent); fill: rgba(34, 197, 94, 0.2); }
.promo-text { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.6; }

.copyright-box { margin-top: 1.5rem; font-size: 0.75rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 0.375rem; }

/* Main Content Area */
.main-area {
  flex: 1;
  overflow-y: auto;
  background-color: var(--bg-main);
  position: relative;
  display: flex;
  flex-direction: column;
}

.content-container {
  max-width: 56rem; /* max-w-4xl */
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) { .content-container { padding: 2rem; } }

.header-section { margin-bottom: 2.5rem; }
.page-title { font-size: 2.25rem; font-weight: 800; color: #fff; letter-spacing: -0.025em; }
@media (min-width: 768px) { .page-title { font-size: 3rem; } }
.page-subtitle { color: var(--text-secondary); margin-top: 0.75rem; font-size: 0.875rem; }
@media (min-width: 768px) { .page-subtitle { font-size: 1rem; } }

/* Create/View Panel */
.card-panel {
  background-color: var(--panel);
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  transition: border-color 0.2s;
  flex: 1;
}
.card-panel:focus-within { border-color: #52525b; }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(24, 24, 27, 0.3);
}
.card-title { display: flex; align-items: center; gap: 0.5rem; color: #d1d5db; font-weight: 500; font-size: 0.875rem; }
.e2e-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.5rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background-color: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.e2e-badge svg { width: 0.8em; height: 0.8em; }
.lang-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.25rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background-color: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.25);
  color: #60a5fa;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.card-title svg { width: 1rem; height: 1rem; color: var(--text-secondary); }
.char-count { font-size: 0.75rem; color: var(--text-muted); font-family: var(--font-mono); }

.textarea-content {
  width: 100%;
  height: 16rem;
  background: transparent;
  padding: 1.25rem;
  font-size: 0.875rem;
  color: var(--text-primary);
  resize: vertical;
  font-family: var(--font-mono);
  line-height: 1.625;
  border: none;
}
@media (min-width: 768px) { .textarea-content { height: 20rem; font-size: 1rem; } }
.textarea-content::placeholder { color: #52525b; }
.textarea-content.drag-over {
  border: 2px dashed var(--accent);
  background-color: rgba(34, 197, 94, 0.05);
}

.code-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.line-numbers {
  padding: 1.5rem 1rem 1.5rem 1.5rem;
  text-align: right;
  color: var(--text-muted);
  user-select: none;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.625;
  border-right: 1px solid var(--border);
  background: rgba(0,0,0,0.2);
  white-space: pre;
}

.view-content-pre {
  flex: 1;
  width: 100%;
  background: transparent;
  padding: 1.5rem;
  font-size: 0.875rem;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  font-family: var(--font-mono);
  line-height: 1.625;
}

/* Password protection (create view) */
.password-section {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background-color: rgba(24, 24, 27, 0.4);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}
.password-toggle-row { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; }
.password-toggle-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--text-primary);
  font-weight: 500;
}
.password-toggle-label svg { width: 1rem; height: 1rem; color: var(--text-secondary); }
.optional-tag { font-weight: 400; color: var(--text-muted); text-transform: none; letter-spacing: normal; }

.switch { position: relative; display: inline-block; width: 2.5rem; height: 1.4rem; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute;
  inset: 0;
  background-color: #3f3f46;
  border-radius: 999px;
  transition: background-color 0.2s;
}
.switch-slider::before {
  content: "";
  position: absolute;
  height: 1.05rem;
  width: 1.05rem;
  left: 0.175rem;
  bottom: 0.175rem;
  background-color: #e4e4e7;
  border-radius: 50%;
  transition: transform 0.2s;
}
.switch input:checked + .switch-slider { background-color: var(--accent); }
.switch input:checked + .switch-slider::before { transform: translateX(1.1rem); background-color: #000; }
.switch input:focus-visible + .switch-slider { box-shadow: 0 0 0 2px var(--bg-main), 0 0 0 4px var(--accent); }

.password-input-wrap { margin-top: 0.9rem; }
.password-input-wrap .select-input { width: 100%; cursor: text; }
.protected-note { color: var(--accent); }

/* Password prompt (view mode) */
.password-prompt {
  max-width: 26rem;
  margin: 2.5rem auto;
  text-align: center;
  background-color: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 2rem 1.75rem;
}
.password-prompt-icon { color: var(--accent); margin-bottom: 0.75rem; }
.password-prompt-icon svg { width: 2rem; height: 2rem; }
.password-prompt h3 { font-size: 1.05rem; color: #fff; margin-bottom: 0.4rem; }
.password-prompt p { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 1.25rem; line-height: 1.5; }
.password-prompt-row { display: flex; gap: 0.6rem; }
.password-prompt-row .select-input { flex: 1; text-align: left; }
.password-prompt-row .btn-primary { width: auto; flex-shrink: 0; }
.password-prompt .alert-error { text-align: left; }

/* Language badge (view mode) */
.lang-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background-color: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: var(--font-mono);
  text-transform: lowercase;
}

/* Controls */
.controls-section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
@media (min-width: 768px) { .controls-section { flex-direction: row; align-items: flex-end; } }

.control-group { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
@media (min-width: 768px) { .control-group { width: auto; } }
.control-label { font-size: 0.75rem; color: var(--text-secondary); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }

.select-wrapper { position: relative; }
.select-input {
  appearance: none;
  background-color: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--text-primary);
  width: 100%;
  transition: all 0.2s;
  cursor: pointer;
}
@media (min-width: 768px) { .select-input { min-width: 14rem; } }
.select-input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.select-icon { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--text-muted); pointer-events: none; }

.control-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }
.control-hint span { color: var(--text-secondary); }

.action-group { display: flex; align-items: center; gap: 1rem; }

.password-wrapper {
  position: relative;
  width: 100%;
}

.password-eye-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
.password-eye-btn:hover { color: var(--text-primary); }
.password-eye-btn svg { width: 1.25rem; height: 1.25rem; }

.shortcut-hint {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background-color: var(--bg-side);
  font-size: 0.75rem;
  color: var(--text-secondary);
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}
@media (min-width: 768px) { .shortcut-hint { display: flex; } }
.key-badge { padding: 0.125rem 0.375rem; background-color: #27272a; border-radius: 0.25rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); color: #d1d5db; }

.btn-primary {
  width: 100%;
  background-color: var(--accent);
  color: #000;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s;
  box-shadow: 0 10px 15px -3px rgba(34, 197, 94, 0.2);
}
@media (min-width: 768px) { .btn-primary { width: auto; } }
.btn-primary:hover { background-color: var(--accent-hover); box-shadow: 0 10px 15px -3px rgba(34, 197, 94, 0.4); transform: translateY(-2px); }
.btn-primary svg { width: 1rem; height: 1rem; }

.btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--panel);
  color: #fff;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.375rem;
  transition: background-color 0.2s;
  border: 1px solid var(--border);
}
.btn-secondary:hover { background-color: #3f3f46; }
.btn-secondary svg { width: 1rem; height: 1rem; }

.btn-outline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--bg-side);
  color: var(--text-primary);
  border: 1px solid var(--border);
  font-size: 0.75rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: all 0.2s;
}
.btn-outline:hover { background-color: #3f3f46; color: #fff; }
.btn-outline svg { width: 0.875rem; height: 0.875rem; }

/* Result Panel */
.result-panel {
  margin-top: 2rem;
  background-color: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}
.result-glow { position: absolute; top: 0; right: 0; width: 8rem; height: 8rem; background: rgba(34, 197, 94, 0.05); border-radius: 9999px; filter: blur(24px); margin-right: -2.5rem; margin-top: -2.5rem; pointer-events: none; }
.result-title { display: flex; align-items: center; gap: 0.5rem; color: #fff; font-weight: 500; margin-bottom: 1.25rem; }
.result-title svg { width: 1.25rem; height: 1.25rem; color: var(--accent); }

.url-box {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background-color: var(--bg-main);
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
}
@media (min-width: 768px) {
  .url-box { flex-direction: row; align-items: center; }
}
.url-icon { display: none; padding: 0.5rem; background: rgba(34, 197, 94, 0.1); border-radius: 0.375rem; color: var(--accent); margin-left: 0.25rem; flex-shrink: 0; }
@media (min-width: 768px) { .url-icon { display: flex; } }
.url-icon svg { width: 1.25rem; height: 1.25rem; }
.url-input { flex: 1; min-width: 0; padding: 0.25rem 0.5rem; background: transparent; border: none; color: var(--text-primary); font-family: var(--font-mono); font-size: 0.875rem; }
.url-input::selection { background: rgba(34, 197, 94, 0.3); }

.note-text { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.75rem; margin-left: 0.25rem; }
.note-icon { width: 0.9em; height: 0.9em; display: inline-block; vertical-align: -0.1em; margin-right: 0.25em; }

/* File Info Metadata List */
.card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.file-meta-list {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0.75rem 1rem;
  padding: 1rem;
  background-color: var(--surface-hover);
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
  font-size: 0.875rem;
}
.file-meta-list dt {
  color: var(--text-secondary);
  font-weight: 500;
}
.file-meta-list dd {
  margin: 0;
  color: var(--text-primary);
  word-break: break-all;
  font-family: var(--font-mono);
}

/* Alerts / States */
.alert-error {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: #f87171;
  background-color: rgba(248, 113, 113, 0.1);
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(248, 113, 113, 0.2);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.alert-error svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.alert-warning {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: rgba(234, 179, 8, 0.9);
  background-color: rgba(234, 179, 8, 0.1);
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(234, 179, 8, 0.2);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.alert-warning svg { width: 1.25rem; height: 1.25rem; }

.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  padding: 2.5rem 0;
}
.loading-state svg { width: 1.25rem; height: 1.25rem; animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.link-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--accent);
  transition: color 0.2s;
  align-self: flex-start;
}
.link-back:hover { color: var(--accent-hover); }
.link-back svg { width: 1rem; height: 1rem; }

/* Features Footer */
.features-footer {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}
@media (min-width: 640px) { .features-footer { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .features-footer { grid-template-columns: repeat(3, 1fr); } }

.feature-item { display: flex; align-items: flex-start; gap: 1rem; }
.feature-icon { padding: 0.5rem; background-color: #18181b; border: 1px solid #27272a; border-radius: 0.5rem; flex-shrink: 0; }
.feature-icon svg { width: 1.25rem; height: 1.25rem; color: var(--text-secondary); }
.feature-content h4 { color: #fff; font-size: 0.875rem; font-weight: bold; }
.feature-content p { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.375rem; line-height: 1.6; }

.bottom-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  margin-bottom: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
  gap: 1rem;
}
@media (min-width: 768px) { .bottom-footer { flex-direction: row; } }
.bottom-footer a:hover { color: var(--text-primary); transition: color 0.2s; }
.footer-links { display: flex; gap: 1.5rem; }

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  transition: opacity 0.3s;
}
.modal-overlay.hidden { display: none; }
.modal-overlay.opacity-0 { opacity: 0; pointer-events: none; }

.modal-content {
  background-color: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-width: 28rem;
  width: 100%;
  padding: 1.5rem;
  position: relative;
  transition: transform 0.3s;
}
.scale-95 { transform: scale(0.95); }

.modal-close { position: absolute; top: 1rem; right: 1rem; color: var(--text-muted); transition: color 0.2s; }
.modal-close:hover { color: #fff; }
.modal-close svg { width: 1.25rem; height: 1.25rem; }

.modal-header { display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; font-weight: bold; color: #fff; margin-bottom: 1rem; }
.modal-header svg { width: 1.25rem; height: 1.25rem; color: var(--accent); }

.modal-body { font-size: 0.875rem; color: #d1d5db; line-height: 1.5; }
.modal-list { list-style-type: decimal; list-style-position: inside; margin-top: 0.5rem; color: var(--text-secondary); display: flex; flex-direction: column; gap: 0.5rem; }
.modal-list strong { color: #e5e7eb; }

.modal-highlight {
  background-color: rgba(24, 24, 27, 0.5);
  border: 1px solid #27272a;
  padding: 0.75rem;
  border-radius: 0.5rem;
  margin-top: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.modal-highlight svg { width: 1.25rem; height: 1.25rem; color: var(--warning); flex-shrink: 0; margin-top: 0.125rem; }
.modal-highlight p { font-size: 0.75rem; color: var(--text-secondary); }
.modal-highlight strong { color: #d1d5db; display: block; margin-bottom: 0.25rem; }

.modal-footer { margin-top: 1.5rem; }
.modal-btn {
  width: 100%;
  background-color: #27272a;
  color: #fff;
  font-weight: 500;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
  text-align: center;
}
.modal-btn:hover { background-color: #3f3f46; }

/* QR Code Section */
.qr-container { display: flex; flex-direction: column; align-items: center; margin-top: 1.5rem; margin-bottom: 0.5rem; padding: 1rem; background: rgba(255,255,255,0.02); border-radius: 0.75rem; border: 1px dashed rgba(34, 197, 94, 0.3); }
#qr-code { background: #fff; padding: 0.5rem; border-radius: 0.5rem; margin-bottom: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); width: 160px; height: 160px; }
.qr-hint { font-size: 0.75rem; color: var(--text-secondary); text-align: center; margin: 0; }

/* Legal Modals & Links */
.legal-links { display: flex; gap: 0.75rem; margin-top: 0.75rem; }
.legal-link, .legal-link-btn { font-size: 0.75rem; color: var(--text-muted); transition: color 0.2s; padding: 0; }
.legal-link:hover, .legal-link-btn:hover { color: var(--accent); }
.prose p { color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 1rem; line-height: 1.5; }
.prose ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.5rem; }
.prose li { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; position: relative; padding-left: 1.25rem; }
.prose li::before { content: "•"; position: absolute; left: 0; color: var(--accent); }
.prose strong { color: #d1d5db; font-weight: 600; }
.contact-card { display: flex; align-items: center; gap: 0.75rem; background: rgba(24, 24, 27, 0.5); padding: 0.75rem 1rem; border-radius: 0.5rem; border: 1px solid var(--border-light); margin-top: 1rem; }
.contact-card svg { width: 1.25rem; height: 1.25rem; color: var(--accent); }
.contact-card a { color: #fff; font-size: 0.875rem; font-weight: 500; }
.contact-card a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   Syntax highlighting theme (for highlight.js output inside #view-code)
   Custom palette matched to this site's dark/green theme instead of a
   stock hljs theme, so it doesn't visually clash with the rest of the UI.
--------------------------------------------------------------------- */
.hljs {
  color: var(--text-primary);
  background: transparent;
}
.hljs-comment,
.hljs-quote {
  color: var(--text-muted);
  font-style: italic;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-subst,
.hljs-doctag,
.hljs-name {
  color: #c084fc; /* violet-400 */
}
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string {
  color: var(--accent-hover); /* green-400 */
}
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-symbol,
.hljs-bullet,
.hljs-template-variable {
  color: #fbbf24; /* amber-400 */
}
.hljs-title,
.hljs-title.function_,
.hljs-title.class_,
.hljs-section {
  color: #60a5fa; /* blue-400 */
}
.hljs-attr,
.hljs-variable,
.hljs-template-tag,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #f472b6; /* pink-400 */
}
.hljs-tag {
  color: var(--text-secondary);
}
.hljs-tag .hljs-name {
  color: #f472b6;
}
.hljs-tag .hljs-attr {
  color: #60a5fa;
}
.hljs-deletion,
.hljs-meta {
  color: #f87171; /* red-400 */
}
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* Feedback Form */
.feedback-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.feedback-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.feedback-form .file-input {
  padding: 0.75rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.feedback-form .file-input::file-selector-button {
  background-color: #27272a;
  color: #fff;
  border: 1px solid #3f3f46;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  margin-right: 1rem;
  cursor: pointer;
  transition: background-color 0.15s;
}
.feedback-form .file-input::file-selector-button:hover {
  background-color: #3f3f46;
}


/* ---------------------------------------------------------------------
   Encrypted file sharing (/file, /f/:id)
--------------------------------------------------------------------- */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 2.5rem 1.5rem;
  border: 2px dashed var(--border);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.dropzone:hover { border-color: var(--accent); background-color: rgba(34, 197, 94, 0.04); }
.dropzone:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25); }
.dropzone.drag-over { border-color: var(--accent); background-color: rgba(34, 197, 94, 0.08); }
.dropzone-icon { width: 2.5rem; height: 2.5rem; color: var(--text-muted); }
.dropzone-title { font-size: 0.95rem; font-weight: 500; color: var(--text-primary); margin: 0; }
.dropzone-hint { font-size: 0.8rem; color: var(--text-muted); margin: 0; }

.file-picked-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  background-color: rgba(24, 24, 27, 0.4);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}
.file-picked-icon { color: var(--accent); flex-shrink: 0; }
.file-picked-icon svg { width: 1.75rem; height: 1.75rem; }
.file-picked-info { flex: 1; min-width: 0; }
.file-picked-name { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-picked-size { font-size: 0.75rem; color: var(--text-muted); margin: 0.15rem 0 0; }

.file-status { min-height: 1rem; }

.progress-bar-wrap { margin-top: 0.75rem; }
.progress-bar { width: 100%; height: 0.5rem; border-radius: 999px; background-color: #27272a; overflow: hidden; }
.progress-bar-fill { height: 100%; width: 0%; background-color: var(--accent); transition: width 0.15s ease-out; border-radius: 999px; }

.file-meta-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  font-size: 0.875rem;
  margin: 1.25rem 0;
}
.file-meta-list dt { color: var(--text-muted); }
.file-meta-list dd { margin: 0; color: var(--text-primary); font-weight: 500; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .progress-bar-fill { transition: none; }
  svg[style*="animation"] { animation: none !important; }
}