/* 3omar.hs Mind Maps — site-shell tokens (dark + light). */
.mm-restore { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 6px 0 16px; border-color: color-mix(in srgb, var(--brand) 50%, transparent); }
.mm-restore[hidden] { display: none; }

.mm-app { display: grid; grid-template-columns: 240px minmax(0, 1fr); padding: 0; overflow: hidden; }
.mm-toolbar { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-inline-end: 1px solid var(--glass-border); background: var(--glass-bg-subtle); }
.mm-group__title { font-size: .78rem; font-weight: 800; color: var(--glass-text-muted); margin-bottom: 8px; letter-spacing: .04em; }
html[lang="en"] .mm-group__title { text-transform: uppercase; }
.mm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mm-grid--1 { grid-template-columns: 1fr; margin-top: 8px; }
.mm-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; padding: 8px 6px; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--control-bg); color: var(--glass-text-main); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; text-align: center; line-height: 1.25; }
.mm-btn:hover { background: var(--glass-bg-hover); }
.mm-btn--wide { grid-column: 1 / -1; flex-direction: row; min-height: 44px; }
.mm-btn__icon { font-size: 1.1rem; line-height: 1; }
.mm-btn--primary { background: var(--btn-gradient-primary); color: #fff; border-color: transparent; }
.mm-btn--primary:hover { background: var(--btn-gradient-hover); }
.mm-btn--danger { color: #b91c1c; border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.08); }
html:not(.light-mode) .mm-btn--danger { color: #fca5a5; }
.mm-select { min-height: 40px; font-size: .9rem; }
.mm-save { margin: 10px 0 0; font-size: .78rem; color: var(--glass-text-muted); min-height: 1.2em; }

.mm-stage { position: relative; min-width: 0; height: clamp(440px, 72vh, 820px);
  background-color: #f8fafc; background-image: radial-gradient(rgba(15,23,42,.16) 1px, transparent 1px); background-size: 20px 20px; }
html:not(.light-mode) .mm-stage { background-color: #111827; background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px); }
#network-canvas { position: absolute; inset: 0; direction: ltr; }
#network-canvas:focus-visible { box-shadow: inset var(--focus-ring); }
div.vis-network div.vis-manipulation, div.vis-network div.vis-edit-mode { display: none !important; }

.mm-color { width: 100%; height: 42px; padding: 0; border: 1px solid var(--control-border); border-radius: 10px; background: none; cursor: pointer; }

@media (max-width: 900px) {
  .mm-app { grid-template-columns: 1fr; }
  .mm-toolbar { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; gap: 14px; padding: 10px; border-inline-end: 0; border-bottom: 1px solid var(--glass-border); }
  .mm-group { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }
  .mm-group__title, .mm-save { display: none; }
  .mm-grid, .mm-grid--1 { display: flex; gap: 6px; margin: 0; }
  .mm-btn, .mm-btn--wide { min-width: 70px; min-height: 52px; flex-direction: column; font-size: .72rem; }
  .mm-select { width: 170px; }
  .mm-stage { height: clamp(380px, 62vh, 640px); }
}