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

html, body {
  min-height: 100%;
  background: #f2f5f4;
  color: #3d4342;
  font-family: Figtree, -apple-system, BlinkMacSystemFont, sans-serif;
}

button, input, textarea {
  font-family: inherit;
}

button:hover { opacity: 0.96; }

.inline-form { display: contents; }

.btn-primary:hover { background: #3d7475 !important; }
.btn-ghost:hover { border-color: #4f9192 !important; color: #3d7475 !important; }
.btn-danger:hover { border-color: #d9a3a3 !important; }

input[type="range"] { accent-color: #4f9192; }

textarea { width: 100%; }

.mono { font-family: "Space Grotesk", ui-monospace, monospace; }

summary::-webkit-details-marker { display: none; }
summary { list-style: none; }

.notes-col {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 30;
  width: 340px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-left: 1px solid #e3e8e7;
  box-shadow: -8px 0 24px rgba(61, 67, 66, 0.06);
}

body.notes-open { padding-right: 340px; }

.notes-col-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid #e3e8e7;
}

.notes-col-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #3d4342;
}

.notes-col-meta {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: #a3adac;
}

.notes-col-close {
  border: 0;
  background: transparent;
  color: #8b9695;
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}

.notes-col textarea {
  flex: 1;
  min-height: 0;
  border: 0;
  outline: none;
  resize: none;
  padding: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #3d4342;
  background: #ffffff;
}

.notes-col-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px 12px;
}

.notes-save {
  border: 0;
  background: #4f9192;
  color: #ffffff;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
}

.notes-dirty {
  font-size: 11.5px;
  color: #8b9695;
  text-align: center;
}

.notes-col-tools {
  display: flex;
  gap: 8px;
  padding: 12px 16px 16px;
  border-top: 1px solid #f0f3f2;
}

.notes-col-tools form { flex: 1; display: flex; }
.notes-col-tools button {
  flex: 1;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.notes-col-tools .btn-ghost {
  border: 1px solid #dfe5e4;
  background: #ffffff;
  color: #3d4342;
}
.notes-col-tools .btn-danger {
  border: 1px solid #f0dede;
  background: #ffffff;
  color: #a06a6a;
}

@media (max-width: 1100px) {
  .config-grid {
    grid-template-columns: 1fr !important;
  }
  .aside-sticky {
    position: static !important;
  }
}

@media print {
  header, .notes-col, .no-print { display: none !important; }
  body.notes-open { padding-right: 0 !important; }
  body { background: #fff; }
}