:root{
  --bg:#eef2f7;
  --panel:#fff;
  --ink:#172033;
  --muted:#64748b;
  --muted-on-tint:#475569;
  --line:#dbe3ed;
  --blue:#2563eb;

  --ok:#047857;
  --ok-bg:#ecfdf5;
  --bad:#b91c1c;
  --bad-bg:#fef2f2;
  --warn:#92400e;
  --warn-bg:#fffbeb;

  --mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
[hidden]{display:none !important}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.55 Inter,system-ui,sans-serif;
}

.app{max-width:1600px;margin:auto;padding:20px}

.back{
  display:inline-block;
  margin-bottom:12px;
  color:#475569;
  font-size:13px;
  font-weight:650;
  text-decoration:none;
}
.back:hover{color:var(--blue)}

header,.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:17px;
  box-shadow:0 8px 25px #0f172a10;
}

header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:15px 18px;
  margin-bottom:17px;
}
header h1{margin:0;font-size:21px}
header p{margin:1px 0;color:var(--muted);font-size:13px}

nav{display:flex;gap:8px;flex-wrap:wrap}

button,.button{
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  padding:9px 13px;
  font:inherit;
  font-weight:750;
  cursor:pointer;
  color:var(--ink);
}
button:hover{border-color:#93c5fd}
button:disabled{cursor:default;opacity:.45}
button:disabled:hover{border-color:var(--line)}
button.small{padding:5px 10px;font-size:13px;border-radius:8px}
.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.primary:hover{border-color:var(--blue)}
.linkish{
  border:0;background:none;padding:0;color:var(--blue);
  font:inherit;font-weight:750;text-decoration:underline;cursor:pointer;
}
.linkish:hover{border-color:transparent}

:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.hint{color:#475569;font-size:12.5px;margin:0}

/* ---------- Ablegefläche ---------- */
.drop{
  padding:26px 20px;
  margin-bottom:17px;
  text-align:center;
  border:2px dashed var(--line);
}
.drop.compact{padding:13px 16px;text-align:left}
.drop.compact .drop-big{font-size:14px;margin:0 0 2px}
.drop.compact .drop-or,.drop.compact .hint{display:inline;margin-right:10px}
.drop.over{border-color:var(--blue);background:#eff6ff}
.drop-big{margin:0 0 6px;font-size:18px;font-weight:750}
.drop-or{margin:0 0 8px;color:#475569;font-size:13.5px}

/* ---------- Einstellungen ---------- */
.options{
  display:flex;
  flex-wrap:wrap;
  gap:14px 22px;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  margin-bottom:17px;
}
.opt-group{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.opt-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
label.check{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;font-weight:650}
label.check input{margin:3px 0 0}
label.check .sub{display:block;font-weight:400;color:#475569;font-size:12px}

/* ---------- Spalten ---------- */
.cols{display:grid;grid-template-columns:minmax(320px,430px) 1fr;gap:17px;align-items:start}
@media (max-width:1000px){.cols{grid-template-columns:1fr}}

/* ---------- Dateiliste ---------- */
.files{padding:6px 0;overflow:hidden}
.file{border-top:1px solid var(--line);padding:12px 16px}
.file:first-child{border-top:0}
.file-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.fname{font-weight:750;word-break:break-all}
.fmeta{color:#475569;font-size:12.5px;flex:1 1 140px}
.file-head .small{flex:0 0 auto}
.badge{
  display:inline-block;border-radius:999px;padding:1px 8px;
  font-size:11.5px;font-weight:750;
}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.bad{background:var(--bad-bg);color:var(--bad)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.busy{background:#eff6ff;color:#1d4ed8}

.pwd{margin-top:10px;background:#eff6ff;border-radius:11px;padding:10px 12px}
.pwd form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pwd input{
  border:1px solid var(--line);border-radius:9px;padding:7px 10px;font:inherit;
  min-width:150px;flex:1 1 150px;
}
.pwd .hint{margin-top:6px;color:#475569}
.err{margin:8px 0 0;color:var(--bad);font-size:13px;font-weight:650}

.tree{list-style:none;margin:10px 0 0;padding:0}
.tree ul{list-style:none;margin:2px 0 6px 20px;padding:0}
.tree li{margin:2px 0}
.tree label{display:flex;gap:7px;align-items:baseline;font-size:13.5px;cursor:pointer}
.tree .sheetname{font-weight:700}
.tree .dims{color:#475569;font-size:12px}
.tree button.tsel{
  border:0;background:none;padding:0 0 0 4px;color:var(--blue);
  font:inherit;font-size:12px;font-weight:700;text-decoration:underline;cursor:pointer;
}
.tree li.is-current > label{background:#eff6ff;border-radius:7px}

.notes{margin-top:10px}
.notes h3{margin:0 0 4px;font-size:13px;color:var(--warn)}
.notes ul{margin:0;padding-left:17px}
.notes li{font-size:12.5px;color:#334155;margin:2px 0}
.notes .where{color:#475569}

/* ---------- Vorschau ---------- */
.preview{padding:12px 0 10px;overflow:hidden}
.pv-head{
  display:flex;gap:10px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;padding:0 16px 10px;border-bottom:1px solid var(--line);
}
.pv-head h2{margin:0;font-size:15px}
.pv-nav{display:flex;gap:6px;align-items:center}
.pv-scroll{overflow:auto;max-height:70vh;padding:0 16px}
.preview .hint{padding:8px 16px 0}

table.grid{border-collapse:separate;border-spacing:0;font-size:12.5px;table-layout:fixed}
table.grid th,table.grid td{
  border-right:1px solid #eef2f7;
  border-bottom:1px solid #eef2f7;
  padding:3px 6px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  vertical-align:top;
  max-width:320px;
}
table.grid th.corner,table.grid th.rowhead,table.grid th.colhead{
  background:#f1f5f9;color:#475569;font-weight:700;text-align:center;
  position:sticky;font-size:11.5px;
}
table.grid th.colhead{top:0;z-index:2}
table.grid th.corner{top:0;left:0;z-index:3}
table.grid th.rowhead{left:0;z-index:1}
table.grid td.is-num{text-align:right}
table.grid td.is-header{font-weight:700}
table.grid td.wrap{white-space:pre-wrap}
table.grid td.is-formula{position:relative}
table.grid td.is-formula::after{
  content:"";position:absolute;top:1px;right:1px;
  border:3px solid transparent;border-top-color:#2563eb;border-right-color:#2563eb;
}
table.grid td.merged{color:#94a3b8}

.foot{margin:17px 0 0;text-align:center}

@media (max-width:640px){
  header{flex-direction:column;align-items:stretch}
  .app{padding:13px}
  .options{flex-direction:column;align-items:stretch}
  .opt-actions{justify-content:space-between}
}