:root {
  --shell-orange: #f56b27;
  --shell-orange-dark: #d95418;
  --shell-ink: #292727;
  --shell-line: #e5e1de;
  --shell-muted: #6e6a68;
  --shell-topbar-height: 72px;
  --shell-sidebar-width: 244px;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.shell-topbar {
  box-sizing: border-box;
  height: var(--shell-topbar-height);
  background: var(--shell-ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  box-shadow: 0 2px 15px #0003;
}

.shell-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  text-decoration: none;
  min-width: 0;
}

.shell-brand img {
  display: block;
  width: 190px;
  max-width: 36vw;
  max-height: 43px;
}

.shell-brand small {
  display: block;
  color: #bbb;
  margin-top: 3px;
  white-space: nowrap;
}

.shell-user {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font: 14px Inter, "Segoe UI", Arial, sans-serif;
}

.shell-user > span {
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-user form {
  margin: 0;
}

.shell-user button {
  border: 1px solid #5b5755;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  padding: 8px 11px;
  font-weight: 700;
  cursor: pointer;
}

.shell-brand:link,
.shell-brand:visited,
.shell-user > a:link,
.shell-user > a:visited {
  color: #f7f5f4;
}

.shell-user > a {
  border-radius: 4px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
}

.shell-user > a:hover,
.shell-user > a:active {
  color: #fff;
  text-decoration-color: currentColor;
}

.shell-brand:focus-visible,
.shell-user > a:focus-visible,
.shell-user button:focus-visible,
.shell-module-switcher summary:focus-visible {
  outline: 3px solid #ffb188;
  outline-offset: 3px;
}

.shell-sidebar {
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: var(--shell-topbar-height);
  bottom: 0;
  width: var(--shell-sidebar-width);
  max-width: calc(100vw - 44px);
  background: #fff;
  border-right: 1px solid var(--shell-line);
  z-index: 900;
  padding: 18px 14px max(18px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

.shell-sidebar nav {
  display: grid;
  gap: 13px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.shell-nav-section {
  display: grid;
  gap: 4px;
}

.shell-nav-label {
  padding: 0 14px 3px;
  color: #aaa29e;
  font: 800 10px/1.2 Inter, "Segoe UI", Arial, sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.shell-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: 9px;
  color: #575250;
  text-decoration: none;
  font: 650 14px Inter, "Segoe UI", Arial, sans-serif;
}

.shell-nav-item span {
  width: 22px;
  flex: 0 0 22px;
  text-align: center;
  color: #9c9692;
}

.shell-nav-item:hover {
  background: #faf7f5;
}

.shell-nav-item.active {
  background: #fff2eb;
  color: var(--shell-orange-dark);
}

.shell-nav-item.active span {
  color: var(--shell-orange);
}

.shell-sidebar-foot {
  margin-top: auto;
  border-top: 1px solid var(--shell-line);
  padding: 16px 12px 0;
  color: #888;
  display: grid;
  gap: 4px;
}

.shell-sidebar-foot strong {
  font-size: 20px;
  letter-spacing: .09em;
  color: var(--shell-ink);
}

.shell-sidebar-foot span {
  font-size: 11px;
  line-height: 1.35;
}

.shell-menu-toggle {
  display: none;
  flex: 0 0 42px;
  border: 0;
  background: transparent;
  width: 42px;
  height: 42px;
  padding: 9px;
  cursor: pointer;
}

.shell-menu-toggle span {
  display: block;
  height: 2px;
  background: #fff;
  margin: 5px 0;
  border-radius: 2px;
}

.shell-page {
  margin-left: var(--shell-sidebar-width);
  padding-top: var(--shell-topbar-height);
  min-width: 0;
  max-width: 100%;
  min-height: 100vh;
}

.shell-page > * {
  min-width: 0;
}

.shell-backdrop {
  position: fixed;
  inset: var(--shell-topbar-height) 0 0;
  background: #0008;
  z-index: 850;
}

/* Shared server-operation feedback. */
.bp-toast-stack {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #292727;
  overflow: visible;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 2147483647;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  width: min(410px, calc(100vw - 36px));
  pointer-events: none;
  max-height: calc(100dvh - 36px);
}
.bp-toast-stack:empty { display: none; }
.bp-toast-stack::backdrop { background: transparent; pointer-events: none; }

.bp-toast {
  --toast-accent: #315f86;
  --toast-tint: #eef5fa;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 10px;
  align-items: start;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--toast-accent) 42%, white);
  border-left: 5px solid var(--toast-accent);
  border-radius: 12px;
  background: var(--toast-tint);
  color: #292727;
  box-shadow: 0 14px 38px #17131138;
  pointer-events: auto;
  animation: bp-toast-in .18s ease-out;
  max-height: min(60dvh, 520px);
  min-height: 0;
  overflow-y: auto;
  flex-shrink: 1;
  box-sizing: border-box;
}

.bp-toast.success { --toast-accent: #176b38; --toast-tint: #edf8f1; }
.bp-toast.info { --toast-accent: #315f86; --toast-tint: #eef5fa; }
.bp-toast.warning { --toast-accent: #8d5100; --toast-tint: #fff4dc; }
.bp-toast.error { --toast-accent: #a32d20; --toast-tint: #fff0ed; }
.bp-toast.leaving { animation: bp-toast-out .18s ease-in forwards; }
.bp-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--toast-accent);
  color: #fff;
  font-weight: 900;
}
.bp-toast-copy { min-width: 0; }
.bp-toast-copy strong,
.bp-toast-copy p,
.bp-toast-repeat { display: block; }
.bp-toast-copy strong { color: var(--toast-accent); font-size: 14px; }
.bp-toast-copy p { margin: 4px 0 0; line-height: 1.4; overflow-wrap: anywhere; }
.bp-toast-repeat { margin-top: 5px; color: #625b57; }
.bp-toast-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #292727;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.bp-toast-close:hover { background: #00000012; }
.bp-toast-close:focus-visible { outline: 3px solid var(--toast-accent); outline-offset: 2px; }
@keyframes bp-toast-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes bp-toast-out { to { opacity: 0; transform: translateX(20px); } }

@media (max-width: 520px) {
  .bp-toast-stack {
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    width: calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
  .bp-toast { grid-template-columns: 30px minmax(0, 1fr) 34px; padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .bp-toast,
  .bp-toast.leaving { animation: none; }
}

/* Platform home */
.platform-content {
  max-width: 1450px;
}

.platform-hero {
  background: linear-gradient(130deg, #292727 0, #3b3836 65%, #f56b27 180%);
  color: #fff;
  border-radius: 18px;
  padding: 30px;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  box-shadow: 0 14px 40px #29272722;
}

.platform-hero h1 {
  font-size: 34px;
  margin: 4px 0 8px;
}

.platform-hero p {
  margin: 0;
  color: #d7d2cf;
}

.platform-kicker {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .14em;
  color: #ff9a63;
}

.platform-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 22px;
  margin: 0 0 15px;
}

.platform-section-head h2 {
  margin: 4px 0 0;
  font-size: 25px;
}

.platform-section-head > p {
  max-width: 430px;
  margin: 0;
  color: var(--shell-muted);
  font-size: 13px;
  text-align: right;
}

.platform-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}

.platform-module-card {
  min-width: 0;
  min-height: 275px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 22px;
  border: 1px solid var(--shell-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 24px #2927270d;
  position: relative;
  overflow: hidden;
}

.platform-module-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--module-color, var(--shell-orange));
}

.platform-module-card.office-card { --module-color: #315f86; }
.platform-module-card.studio-card { --module-color: #f56b27; }
.platform-module-card.stage-card { --module-color: #237a4b; }
.platform-module-card.platform-card { --module-color: #5c4b8b; }

.module-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.module-symbol {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--module-color) 12%, white);
  color: var(--module-color);
  font-size: 24px;
  font-weight: 850;
}

.module-state {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.module-state.ready { background: #e9f6ef; color: #237a4b; }
.module-state.building { background: #eef4f8; color: #315f86; }
.module-state.admin { background: #f1edf8; color: #5c4b8b; }

.platform-module-card h3 {
  margin: 4px 0 8px;
  font-size: 22px;
}

.platform-module-card p:not(.eyebrow) {
  margin: 0;
  color: var(--shell-muted);
  font-size: 14px;
  line-height: 1.55;
}

.module-card-actions {
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 74px;
  margin: 0 -22px -22px;
  padding: 12px 22px 14px;
  border-top: 1px solid color-mix(in srgb, var(--module-color) 20%, white);
  background: color-mix(in srgb, var(--module-color) 12%, white);
}

.module-link,
.module-secondary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: var(--module-color);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
}

.module-link {
  min-height: 24px;
}

.module-secondary {
  justify-content: flex-start;
  font-size: 12px;
  color: color-mix(in srgb, var(--module-color) 70%, #292727);
}

.platform-metrics {
  margin-top: 0;
}

.platform-dashboard-grid {
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 18px;
}

.platform-next-card {
  padding: 24px;
}

.platform-next-card h2 {
  font-size: 26px;
  margin: 7px 0;
}

.platform-next-card .date {
  font-size: 18px;
  font-weight: 800;
  color: var(--shell-orange-dark);
}

.platform-next-card .place {
  color: var(--shell-muted);
  margin-top: 7px;
}

.platform-next-list{display:grid;gap:8px;margin:14px 0 18px}.platform-next-list a{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid #eee4dd;color:inherit;text-decoration:none}.platform-next-list a:last-child{border-bottom:0}.platform-next-list time{font-weight:800;color:#d94f0d}.platform-next-list span{display:grid;gap:3px}.platform-next-list small{color:var(--muted)}.platform-next-list b{color:#e95712}.platform-stat-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#e8ded7;border:1px solid #e8ded7;border-radius:12px;overflow:hidden}.platform-stat-list>div{display:grid;gap:2px;background:#fff;padding:15px}.platform-stat-list strong{font-size:1.55rem;line-height:1;color:#2d2927}.platform-stat-list span{font-size:.78rem;color:var(--muted)}

.platform-status-list {
  padding: 8px 20px;
}

.platform-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 14px 0;
  border-bottom: 1px solid #eeeae7;
}

.platform-status-row:last-child {
  border: 0;
}

.platform-status-row span {
  color: var(--shell-muted);
}

.platform-quick-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.platform-next-card{order:1}.platform-stat-panel{order:2}.platform-activity-panel{order:3}.platform-health-panel{order:4}

.platform-activity {
  padding: 0 20px;
}

.platform-activity-row {
  padding: 13px 0;
  border-bottom: 1px solid #eeeae7;
}

.platform-activity-row:last-child {
  border: 0;
}

.platform-activity-row strong,
.platform-activity-row small {
  display: block;
}

.platform-activity-row small {
  color: var(--shell-muted);
  margin-top: 4px;
}

/* Office v0.1 placeholder */
.office-placeholder {
  max-width: 1060px;
  margin: 28px auto;
  padding: clamp(28px, 5vw, 58px);
  text-align: center;
}

.office-placeholder-mark {
  width: 68px;
  height: 68px;
  margin: 0 auto 22px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef4f8;
  color: #315f86;
  font-size: 38px;
  font-weight: 850;
}

.office-placeholder h1 {
  max-width: 700px;
  margin: 7px auto 14px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
}

.office-placeholder > p:not(.eyebrow) {
  max-width: 760px;
  margin: 0 auto;
  color: var(--shell-muted);
  font-size: 16px;
  line-height: 1.65;
}

.office-scope {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 34px 0;
}

.office-scope span {
  padding: 9px 12px;
  border: 1px solid #dbe3e8;
  border-radius: 9px;
  background: #f7fafc;
  color: #315f86;
  font-size: 13px;
  font-weight: 750;
}

.office-scope b {
  color: #a6a09d;
}

.office-placeholder-foot {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--shell-muted);
  font-size: 12px;
}

@media (max-width: 980px) {
  .platform-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .platform-activity-panel{order:3}.platform-health-panel{order:4}
}

@media(max-width:650px){.platform-next-list a{grid-template-columns:1fr auto}.platform-next-list time{grid-column:1/-1}.platform-stat-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (max-width: 820px) {
  :root {
    --shell-topbar-height: 64px;
  }

  .shell-topbar {
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
    gap: 8px;
  }

  .shell-menu-toggle {
    display: block;
  }

  .shell-brand {
    margin-right: auto;
  }

  .shell-brand img {
    width: 150px;
    max-width: 42vw;
  }

  .shell-brand span,
  .shell-user > span {
    display: none;
  }

  .shell-user button {
    padding: 7px 9px;
  }

  .shell-sidebar {
    transform: translateX(-102%);
    transition: transform .2s ease;
    box-shadow: 14px 0 35px #0003;
  }

  .shell-sidebar.open {
    transform: none;
  }

  .shell-page {
    margin-left: 0;
  }

  body.shell-menu-open {
    overflow: hidden;
  }
}

@media (max-width: 650px) {
  .platform-hero {
    display: block;
    padding: 23px;
    margin-bottom: 24px;
  }

  .platform-hero h1 {
    font-size: 28px;
  }

  .platform-hero .button {
    margin-top: 20px;
    width: 100%;
  }

  .platform-section-head {
    display: block;
  }

  .platform-section-head > p {
    margin-top: 8px;
    text-align: left;
  }

  .platform-module-grid {
    grid-template-columns: 1fr;
  }

  .platform-module-card {
    min-height: 250px;
  }

  .platform-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .platform-status-row {
    align-items: flex-start;
  }
}

@media (max-width: 390px) {
  .shell-brand img {
    width: 126px;
  }

  .shell-user button {
    font-size: 12px;
  }

  .platform-content {
    padding-left: 10px;
    padding-right: 10px;
  }

  .platform-metrics {
    grid-template-columns: 1fr;
  }

  .platform-status-row {
    display: grid;
  }

  .office-scope {
    align-items: stretch;
    flex-direction: column;
  }

  .office-scope b {
    transform: rotate(90deg);
  }
}
.shell-module-switcher{position:relative;margin-left:auto}.shell-module-switcher summary{list-style:none;cursor:pointer;color:#fff;border:1px solid #ffffff40;border-radius:9px;padding:8px 11px;font-weight:800}.shell-module-switcher summary::-webkit-details-marker{display:none}.shell-module-menu{position:absolute;right:0;top:calc(100% + 9px);z-index:80;width:280px;padding:8px;border-radius:12px;background:#fff;box-shadow:0 18px 50px #0004;color:#292727}.shell-module{display:grid;gap:2px;padding:10px 11px;border-radius:8px;color:#292727;text-decoration:none}.shell-module:hover,.shell-module.active{background:#fff0e8}.shell-module small{color:#766e69}.shell-mobile-modules{display:none}
@media(max-width:760px){.shell-module-switcher{display:none}.shell-mobile-modules{display:block}.shell-mobile-modules .shell-module{margin:3px 8px}.shell-mobile-modules .shell-module small{font-size:10px}}

/* A modulváltás minden képernyőn a modulmenü végén is elérhető. */
.shell-mobile-modules{display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--shell-line)}
.shell-mobile-modules .shell-module{margin:3px 8px}
.shell-mobile-modules .shell-module.active{display:none}
.shell-mobile-modules .shell-module strong::after{content:" megnyitása"}
.shell-mobile-modules .shell-module small{font-size:10px}
/* Module identity applies to desktop and mobile; text stays readable without colour. */
.shell-module{margin-block:4px;border-left:4px solid var(--module-accent,#5c459d);background:var(--module-tint,#eee8f7);color:#171717}
.shell-module:hover,.shell-module.active{background:var(--module-tint,#eee8f7);box-shadow:inset 0 0 0 2px var(--module-accent,#5c459d)}
.shell-module:focus-visible{outline:3px solid #111;outline-offset:2px}
.shell-module small{color:#403a37}
.bp-atomic,[data-bp-atomic]{white-space:nowrap}

/* Quiet, delayed activity indication; success/error messages remain toasts. */
.bp-operation-slot{min-height:22px;display:flex;align-items:center}
.bp-operation-progress{display:flex;align-items:center;gap:8px;box-sizing:border-box;margin:0;padding:0;border:0;background:transparent;color:#68594f;pointer-events:none;font:500 12px/1.4 system-ui,sans-serif}
.bp-operation-progress[hidden]{display:none!important}
.bp-operation-progress .bp-operation-label{font-size:12px;line-height:1.4}
.bp-operation-spinner{display:inline-block;flex:0 0 14px;width:14px;height:14px;box-sizing:border-box;border:2px solid #ff6b182e;border-top-color:#d9560d;border-radius:50%;animation:bp-operation-spin .9s linear infinite}
.bp-operation-progress.floating{position:fixed;inset:auto;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));z-index:2147483646;padding:8px 12px;max-width:calc(100vw - 24px);border:1px solid #eadfd7;border-radius:20px;background:#fffaf5;box-shadow:0 2px 10px #29272712}
.bp-operation-progress.floating.with-topbar{top:calc(var(--shell-topbar-height,64px) + 10px)}
.bp-operation-progress::backdrop{background:transparent;pointer-events:none}
@keyframes bp-operation-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.bp-operation-spinner{animation:none}}