:root {
  color-scheme: light;
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-strong: #ffffff;
  --panel-soft: #f6f8fa;
  --border: #d0d7de;
  --border-strong: #afb8c1;
  --text: #1f2328;
  --muted: #59636e;
  --accent: #396f9f;
  --accent-hover: #2f5f88;
  --danger: #b4232f;
  --success: #24733f;
  --shadow: 0 8px 30px rgba(31, 35, 40, 0.1);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, textarea { font: inherit; }
button { cursor: pointer; }

.shell { min-height: 100dvh; display: grid; place-items: center; padding: 28px; }
.card, .editor-card, .history-card, .drop-zone, .file-row, .image-card {
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.compact { width: min(100%, 430px); border-radius: 24px; padding: 38px; }
.hidden { display: none !important; }
.eyebrow { color: var(--accent); font-size: .72rem; font-weight: 750; letter-spacing: .16em; }
h1 { margin: 8px 0 10px; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.045em; }
h2 { margin: 0 0 6px; font-size: 1.45rem; letter-spacing: -.025em; }
h3 { margin: 0; font-size: 1rem; }
p { margin: 0; }
.muted, .section-heading p, .aside-heading p, .operation-status { color: var(--muted); }

form { margin-top: 28px; }
label[for="password"] { display: block; margin-bottom: 9px; color: var(--text); font-size: .9rem; }
.password-row { display: flex; gap: 8px; }
input[type="password"], input[type="text"] {
  min-width: 0; width: 100%; border: 1px solid var(--border); border-radius: 12px;
  background: #ffffff; color: var(--text); padding: 13px 14px; outline: none;
}
input:focus, textarea:focus { border-color: var(--accent); }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button, .button-link {
  border: 0; border-radius: 11px; padding: 10px 14px; font-weight: 700;
  text-decoration: none; line-height: 1.2;
}
button:disabled { cursor: wait; opacity: .6; }
button:active, .button-link:active { transform: scale(.98); }
.primary { width: 100%; margin-top: 8px; background: var(--accent); color: white; }
.primary:hover { background: var(--accent-hover); }
.secondary, .button-link {
  border: 1px solid var(--border); background: var(--panel-soft); color: var(--text);
}
.secondary:hover, .button-link:hover { background: #eef1f4; }
.danger-button { border: 1px solid #e4a1a7; background: #fff5f5; color: var(--danger); }
.danger-button:hover { background: #ffe9eb; }
.text-button { padding: 4px; border-radius: 6px; background: transparent; color: var(--muted); font-size: .82rem; }
.text-button:hover { color: var(--text); background: var(--panel-soft); }
.danger-text, .text-button.danger-text:hover { color: var(--danger); }
.icon-button { flex: 0 0 auto; }
.error { min-height: 22px; margin: 9px 0 0; color: var(--danger); font-size: .88rem; }

.spinner { width: 30px; height: 30px; margin: 0 auto 14px; border: 3px solid #d8dee4; border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
#loading { text-align: center; color: var(--muted); }
@keyframes spin { to { transform: rotate(360deg); } }

.workspace { width: min(1240px, 100%); align-self: start; margin: 18px 0 40px; }
.topbar, .section-heading, .aside-heading, .file-row, .card-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.topbar { margin-bottom: 18px; }
.topbar h1 { margin-bottom: 0; }
.top-actions, .button-row { display: flex; align-items: center; gap: 10px; }
.status { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .85rem; white-space: nowrap; }
.status b { font-weight: 600; }
.status span { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 4px rgba(180, 35, 47, .1); }
.status.online { color: var(--success); }
.status.online span { background: var(--success); box-shadow: 0 0 0 4px rgba(36, 115, 63, .1); }

.tabs { display: flex; gap: 6px; margin-bottom: 20px; padding: 5px; width: fit-content; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-soft); }
.tab { display: inline-flex; align-items: center; gap: 7px; background: transparent; color: var(--muted); }
.tab:hover { color: var(--text); }
.tab.active { background: var(--panel-strong); color: var(--text); box-shadow: 0 1px 3px rgba(31, 35, 40, .12); }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #dceaf6; color: var(--accent); font-size: .72rem; }

.panel { display: none; }
.panel.active { display: block; }
.section-heading { margin-bottom: 16px; }
.section-heading p { font-size: .9rem; }
.text-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: stretch; }
.editor-card, .history-card { overflow: hidden; border-radius: 18px; }
textarea { display: block; width: 100%; min-height: min(64vh, 700px); resize: vertical; border: 0; background: var(--panel-strong); color: var(--text); padding: clamp(20px, 4vw, 36px); font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: clamp(1rem, 1.7vw, 1.1rem); line-height: 1.75; outline: none; }
textarea:disabled { opacity: .62; }
.editor-card footer { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; border-top: 1px solid var(--border); padding: 11px 16px; color: var(--muted); font-size: .78rem; }
.editor-card footer span:last-child { text-align: right; }

.history-card { box-shadow: none; min-height: 400px; }
.aside-heading { padding: 16px; border-bottom: 1px solid var(--border); }
.aside-heading p { margin-top: 3px; font-size: .75rem; }
.history-list { max-height: min(64vh, 700px); overflow: auto; }
.history-item { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.history-item:last-child { border-bottom: 0; }
.history-preview { display: -webkit-box; margin: 7px 0 10px; overflow: hidden; color: #32383f; font-family: "SFMono-Regular", Consolas, monospace; font-size: .82rem; line-height: 1.45; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: pre-wrap; overflow-wrap: anywhere; }
.history-meta, .file-meta { color: var(--muted); font-size: .72rem; }
.mini-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mini-actions button, .mini-actions a { padding: 0; border: 0; background: transparent; color: var(--muted); font-size: .78rem; text-decoration: none; }
.mini-actions button:hover, .mini-actions a:hover { color: var(--text); }
.mini-actions .danger-text { color: var(--danger); }

.drop-zone { display: grid; place-items: center; min-height: 150px; padding: 28px; border-style: dashed; border-radius: 18px; box-shadow: none; color: var(--text); text-align: center; transition: border-color .18s, background .18s, transform .18s; }
.drop-zone strong { margin-bottom: 6px; font-size: 1.05rem; }
.drop-zone span { color: var(--muted); font-size: .85rem; }
.drop-zone:hover, .drop-zone.dragging { border-color: var(--accent); background: #f3f8fc; transform: translateY(-1px); }
.compact-drop { min-height: 112px; }
.operation-status { min-height: 24px; padding: 9px 2px 0; font-size: .82rem; }

.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 12px; }
.image-card { overflow: hidden; border-radius: 16px; box-shadow: none; }
.image-frame { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--panel-soft); overflow: hidden; }
.image-frame img { width: 100%; height: 100%; object-fit: contain; }
.image-info { padding: 12px; }
.image-name, .file-name { overflow: hidden; color: var(--text); font-size: .88rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.image-info .file-meta { margin: 4px 0 10px; }

.file-list { display: grid; gap: 10px; margin-top: 12px; }
.file-row { border-radius: 14px; padding: 14px 16px; box-shadow: none; }
.file-main { min-width: 0; }
.file-meta { margin-top: 4px; }
.card-actions { justify-content: flex-end; flex: 0 0 auto; gap: 8px; }
.card-actions button, .card-actions .button-link { padding: 8px 11px; font-size: .78rem; }

.empty { display: grid; place-items: center; min-height: 140px; padding: 24px; color: var(--muted); text-align: center; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 10; max-width: min(420px, calc(100vw - 48px)); padding: 12px 16px; border: 1px solid var(--border-strong); border-radius: 12px; background: #ffffff; box-shadow: var(--shadow); color: var(--text); font-size: .88rem; }
.toast.error-toast { border-color: #e4a1a7; background: #fff5f5; color: var(--danger); }

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

@media (max-width: 930px) {
  .text-layout { grid-template-columns: 1fr; }
  .history-list { max-height: 420px; }
  textarea { min-height: 54vh; }
}

@media (max-width: 620px) {
  .shell { padding: 16px; }
  .compact { padding: 28px 22px; }
  .topbar, .section-heading { align-items: flex-start; flex-direction: column; }
  .top-actions, .button-row { width: 100%; justify-content: space-between; }
  .tabs { width: 100%; }
  .tab { flex: 1; justify-content: center; }
  .editor-card footer { grid-template-columns: 1fr 1fr; }
  #save-status { display: none; }
  .file-row { align-items: flex-start; flex-direction: column; }
  .card-actions { width: 100%; }
}