:root{
  --uiScale: 1;

  --paper: #f2ecdf;
  --paper2:#efe7d7;
  --ink: #2b2a26;
  --muted: rgba(43,42,38,.65);
  --line: rgba(43,42,38,.12);

  --btnGreen: #7fbf86;
  --btnGreen2:#2d6b3f;

  --shadow: rgba(0,0,0,.18);
  --danger:#7b3a2f;

  /* Paper styles */
  --lineColor: rgba(43,42,38,.16);
  --gridColor: rgba(43,42,38,.13);

  /* === Regel: Linien-/Rastermaß in "Einheiten" (ohne px), damit wir skalieren können === */
  --ruleStep: 28;     /* Abstand der Notizlinien */
  --gridStep: 24;     /* Abstand des Karos */
  --ruleOffset: 18;   /* Start-Offset von oben, damit Text nicht "zwischen" Linien beginnt */
}

html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: radial-gradient(1200px 900px at 40% 20%, rgba(255,255,255,.05), transparent 60%),
              linear-gradient(#0f1713, #0e1511);
}

/* Layout Shell */
#appShell{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap: 16px;
  padding: 18px;
  box-sizing:border-box;
  height:100%;
}

#rings{
  width: 76px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 22px;
  padding: 18px 0;
  box-sizing:border-box;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.12));
  border-radius: 28px;
}
.ring{
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: inset 0 10px 18px rgba(0,0,0,.25), 0 10px 18px rgba(0,0,0,.18);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), rgba(255,255,255,.02));
}

/* Paper */
#paper{
  flex: 1;
  max-width: 820px;
  min-width: 320px;
  background: linear-gradient(180deg, var(--paper), var(--paper2));
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

#topbar{
  padding: calc(16px * var(--uiScale));
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom: 1px solid var(--line);
}
.titleWrap{ display:flex; align-items:baseline; gap: 12px; }
.title{ font-size: calc(34px * var(--uiScale)); font-weight: 900; }
.version{ font-weight: 900; color: rgba(43,42,38,.50); }

.hdrBtns{ display:flex; gap: 10px; }
.hdrBtn{
  width: calc(44px * var(--uiScale));
  height: calc(44px * var(--uiScale));
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.45);
  box-shadow: 0 8px 16px rgba(0,0,0,.10);
  font-weight: 900;
  cursor:pointer;
}

#content{
  padding: calc(12px * var(--uiScale));
  overflow:auto;
  flex:1;
}

/* In Notizbuch: kein Scroll-Container, Fläche soll „Seite“ sein */
body.mode-notebook #content{
  overflow:hidden;
  padding: 0;
}

/* Status */
#statusbar{
  padding: calc(12px * var(--uiScale)) calc(16px * var(--uiScale));
  border-top: 1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap: 10px;
  font-size: calc(13px * var(--uiScale));
  color: rgba(43,42,38,.75);
}

/* Tabs (Reiter) – schmal, nur Icons */
#tabs{
  width: 74px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  padding: 10px 6px;
}
.tab{
  user-select:none;
  cursor:pointer;
  border-radius: 22px;
  padding: 14px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.10));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 28px rgba(0,0,0,.22);
  display:grid;
  place-items:center;
}
.tab .ico{
  width: 38px; height: 38px;
  display:grid; place-items:center;
  border-radius: 16px;
  background: rgba(0,0,0,.14);
  font-size: 18px;
}
.tab.active{ outline: 2px solid rgba(127,191,134,.55); }

/* Modal */
#modalBackdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.45);
  display:grid; place-items:center;
  padding: 18px;
  z-index: 999;
}
#modalBackdrop.hidden{ display:none; }
#modal{
  width: min(720px, 92vw);
  max-height: 86vh;
  overflow:auto;
  border-radius: 26px;
  background: linear-gradient(180deg, var(--paper), var(--paper2));
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
#modalHead{
  padding: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom: 1px solid var(--line);
}
#modalTitle{ font-weight: 900; font-size: 18px; }
#modalBody{ padding: 16px; }
#modalFoot{
  padding: 14px 16px 18px;
  display:flex; gap: 10px;
  justify-content:flex-end;
  border-top: 1px solid var(--line);
}
#modalFoot:empty{ display:none; }

/* UI helpers */
.card{
  background: rgba(255,255,255,.55);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: calc(16px * var(--uiScale));
  box-shadow: 0 12px 22px rgba(0,0,0,.10);
  margin-bottom: calc(14px * var(--uiScale));
}
.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.45);
  font-weight: 900;
}
label{ display:block; font-weight: 900; margin-bottom: 6px; }
input, textarea, select{
  width: 100%;
  box-sizing:border-box;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.70);
  padding: 12px 12px;
  font-size: calc(15px * var(--uiScale));
}
textarea{ resize: none; }
.row{ display:flex; gap: 12px; flex-wrap:wrap; align-items:flex-end; }
button.primary, button.ghost{
  border-radius: 16px;
  padding: 12px 14px;
  font-weight: 900;
  border: 1px solid rgba(0,0,0,.12);
  cursor:pointer;
}
button.primary{
  background: linear-gradient(180deg, var(--btnGreen), var(--btnGreen2));
  color: rgba(255,255,255,.95);
  box-shadow: 0 10px 20px rgba(0,0,0,.16);
}
button.ghost{ background: rgba(255,255,255,.45); }
.small{ padding: 10px 12px; border-radius: 14px; }

/* ===== Notizbuch „Seite“ ===== */
.nbPageWrap{
  height: 100%;
  display:flex;
  flex-direction:column;
  padding: calc(16px * var(--uiScale));
  box-sizing:border-box;
  gap: calc(10px * var(--uiScale));
}

/* Seite groß, papierartig */
.nbSheet{
  flex: 1;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.10);
  background:
    radial-gradient(800px 500px at 40% 10%, rgba(255,255,255,.55), rgba(255,255,255,.05)),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.20));
  box-shadow: inset 0 14px 30px rgba(0,0,0,.06);
  overflow:hidden;
  display:flex;
}

/* Textfläche: Linien exakt an Line-Height gekoppelt */
.nbText{
  flex:1;
  border: none;
  outline: none;
  border-radius: 0;
  background-color: transparent;

  /* Wichtig: Zeilenhöhe = Linienabstand */
  font-size: calc(16px * var(--uiScale));
  line-height: calc(var(--ruleStep) * 1px * var(--uiScale));

  padding-left: calc(18px * var(--uiScale));
  padding-right: calc(18px * var(--uiScale));
  padding-top: calc(var(--ruleOffset) * 1px * var(--uiScale));
  padding-bottom: calc(18px * var(--uiScale));

  color: var(--ink);

  /* verhindert „Springen“ beim Tippen */
  overflow:auto;
}

/* Linien / Karo / Blanko */
:root[data-paper="blank"] .nbText{
  background-image: none;
  background-position: 0 0;
  background-size: auto;
}
:root[data-paper="lines"] .nbText{
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) calc(var(--ruleStep) * 1px * var(--uiScale) - 1px),
      var(--lineColor) calc(var(--ruleStep) * 1px * var(--uiScale))
    );
  background-size: 100% calc(var(--ruleStep) * 1px * var(--uiScale));
  background-position: 0 calc(var(--ruleOffset) * 1px * var(--uiScale));
}
:root[data-paper="grid"] .nbText{
  background-image:
    repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) calc(var(--gridStep) * 1px * var(--uiScale) - 1px), var(--gridColor) calc(var(--gridStep) * 1px * var(--uiScale))),
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) calc(var(--gridStep) * 1px * var(--uiScale) - 1px), var(--gridColor) calc(var(--gridStep) * 1px * var(--uiScale)));
  background-size: calc(var(--gridStep) * 1px * var(--uiScale)) calc(var(--gridStep) * 1px * var(--uiScale));
  background-position: 0 calc(var(--ruleOffset) * 1px * var(--uiScale));
}

/* Navigation unten */
.nbNav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.nbNavBtn{
  width: calc(64px * var(--uiScale));
  height: calc(52px * var(--uiScale));
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.45);
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
  font-weight: 900;
  cursor:pointer;
}
.nbNavMid{
  flex:1;
  text-align:center;
  font-weight: 900;
  color: rgba(43,42,38,.65);
}

/* Mobile tweaks */
@media (max-width: 860px){
  #tabs{ width: 66px; }
  #rings{ width: 64px; }
  .title{ font-size: calc(30px * var(--uiScale)); }
}