/* Header & Topbar */
.topbar {
  height: 68px;
  padding: 0 max(24px, 4vw);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand {
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  border-radius: 50%;
  font-family: Georgia, serif;
  font-style: italic;
}

.topbar nav {
  display: flex;
  gap: 26px;
  margin-left: 7vw;
}

.topbar nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
}

.topbar nav a.active, .topbar nav a:hover {
  color: var(--ink);
}

.session-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 12px;
}

.session-user form {
  margin: 0;
}

/* Mobile Bottom Tab Bar */
.mobile-bottom-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 68px;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--line);
  z-index: 30;
  align-items: stretch;
  padding: 5px 6px max(5px, env(safe-area-inset-bottom, 0px));
  transition: transform .28s ease, box-shadow .28s ease;
  box-shadow: 0 -12px 32px rgba(0, 0, 0, .28);
}

.mobile-nav-toggle { display: none; }

.mobile-nav-items {
  display: flex;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav-items::-webkit-scrollbar { display: none; }

.mobile-bottom-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  text-decoration: none;
  font-size: 11px;
  font-weight: 650;
  flex: 0 0 78px;
  scroll-snap-align: center;
  min-height: 55px;
  padding: 7px 3px 5px;
  border-radius: 9px;
  transition: all 0.2s;
}

.mobile-bottom-bar a i {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.mobile-bottom-bar a.active {
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 11%, transparent);
}

.mobile-bottom-bar a.active i {
  filter: drop-shadow(0 0 6px var(--cyan));
}

/* Icons */
.icon-lage { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M2 12h4l2-9 5 18 2-9h5"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M2 12h4l2-9 5 18 2-9h5"/></svg>'); }
.icon-system { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>'); }
.icon-sms { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>'); }
.icon-email { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>'); }
.icon-users { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>'); }
.icon-zellen, .icon-weather { -webkit-mask-image: radial-gradient(circle at center, transparent 25%, #000 27% 42%, transparent 44% 56%, #000 58% 68%, transparent 70%); mask-image: radial-gradient(circle at center, transparent 25%, #000 27% 42%, transparent 44% 56%, #000 58% 68%, transparent 70%); }
.icon-services { -webkit-mask-image: linear-gradient(#000 0 0); mask-image: linear-gradient(#000 0 0); border-radius: 3px; clip-path: polygon(0 8%,100% 8%,100% 30%,0 30%,0 40%,100% 40%,100% 62%,0 62%,0 72%,100% 72%,100% 94%,0 94%); }
.icon-security, .icon-access { -webkit-mask-image: radial-gradient(ellipse at 50% 28%,#000 0 18%,transparent 20%),linear-gradient(#000 0 0); mask-image: radial-gradient(ellipse at 50% 28%,#000 0 18%,transparent 20%),linear-gradient(#000 0 0); clip-path: polygon(12% 36%,88% 36%,88% 100%,12% 100%); border-radius: 5px; }
.icon-templates { -webkit-mask-image: linear-gradient(#000 0 0); mask-image: linear-gradient(#000 0 0); clip-path: polygon(12% 0,70% 0,100% 30%,100% 100%,12% 100%,12% 0,65% 0,65% 35%,100% 35%); }


/* Main Layout */
main {
  width: min(1500px, 92vw);
  margin: auto;
}

.settings-main {
  width: min(1180px, 92vw);
  margin: auto;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(290px, 0.8fr);
  gap: 18px;
  margin-top: 18px;
}

.settings-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 18px;
}

.system-grid {
  margin-top: 0;
}

.lower {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}

/* Media Queries */
@media (max-width: 1100px) and (min-width: 901px) {
  .workspace { grid-template-columns: minmax(0, 2fr) minmax(270px, 1fr); }
}

@media (max-width: 900px) {
  .workspace, .lower, .settings-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .topbar nav { display: none; }
  .mobile-bottom-bar { display: block; }
  .session-user > span { display: none; }
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  .mobile-bottom-bar.is-collapsed {
    transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px)));
    box-shadow: none;
  }
  .mobile-nav-toggle {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    left: 50%;
    top: -35px;
    min-width: 116px;
    min-height: 36px;
    padding: 7px 13px;
    transform: translateX(-50%);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    color: var(--ink);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    box-shadow: 0 -8px 20px rgba(0, 0, 0, .2);
    font: 650 11px/1 system-ui, sans-serif;
    cursor: pointer;
  }
  .mobile-nav-toggle-icon {
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: rotate(225deg) translateY(2px);
    transition: transform .2s ease;
  }
  .mobile-bottom-bar.is-collapsed .mobile-nav-toggle-icon {
    transform: rotate(45deg) translate(2px, 2px);
  }
  .mobile-bottom-bar.is-collapsed .mobile-nav-toggle-label::after { content: ''; }
}

@media (max-width: 380px) {
  .mobile-bottom-bar a { font-size: 10px; }
  .mobile-bottom-bar a i { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-bar, .mobile-nav-toggle-icon { transition: none; }
}

@media (max-width: 520px) {
  main { width: 94vw; }
}