:root {
  --lc-app-bg: #050a12;
  --lc-app-deep: #07101c;
  --lc-panel: #0b1522;
  --lc-panel-raised: #101c2b;
  --lc-panel-hover: #13243a;
  --lc-border: #203653;
  --lc-border-soft: #16283d;
  --lc-blue: #2f7cff;
  --lc-blue-bright: #65a4ff;
  --lc-blue-soft: #102d55;
  --lc-text: #f4f7fb;
  --lc-muted: #91a4bd;
  --lc-muted-strong: #bdc9d8;
  --lc-danger: #ff766f;
  --lc-danger-bg: #32191f;
  --lc-focus: 0 0 0 3px rgba(47, 124, 255, .3);
  --lc-shadow: 0 18px 48px rgba(0, 0, 0, .34);
}

/* Authenticated project library */
body.portal-active {
  overflow: auto;
  color: var(--lc-text);
  background:
    radial-gradient(circle at 18% 0%, rgba(47, 124, 255, .13), transparent 28rem),
    radial-gradient(circle at 92% 20%, rgba(25, 78, 153, .09), transparent 24rem),
    var(--lc-app-bg);
}

.portal-root {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  color: var(--lc-text);
  background-image:
    linear-gradient(rgba(56, 91, 137, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 91, 137, .045) 1px, transparent 1px);
  background-size: 32px 32px;
}

.portal-root::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 72px 0 auto;
  height: 180px;
  pointer-events: none;
  opacity: .34;
  background:
    linear-gradient(90deg, transparent 7%, var(--lc-border) 7% 18%, transparent 18% 31%, var(--lc-border) 31% 52%, transparent 52%),
    radial-gradient(circle at 18% 50%, var(--lc-blue) 0 2px, transparent 3px),
    radial-gradient(circle at 52% 50%, var(--lc-blue) 0 2px, transparent 3px);
  background-size: 100% 1px, 100% 100%, 100% 100%;
  background-position: center 96px, 0 0, 0 0;
  background-repeat: no-repeat;
  mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
}

.portal-nav {
  position: sticky;
  z-index: 20;
  top: 0;
  height: 72px;
  padding: 0 max(24px, calc((100vw - 1240px) / 2));
  gap: 28px;
  color: var(--lc-text);
  background: rgba(5, 10, 18, .91);
  border-bottom: 1px solid var(--lc-border-soft);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  backdrop-filter: blur(18px);
}

.portal-brand { flex: 0 0 auto; }
.portal-nav-links { gap: 4px; margin-left: 18px; }
.portal-nav-links button,
.account-menu button {
  min-height: 38px;
  padding: 0 12px;
  color: var(--lc-muted);
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
}

.portal-nav-links button:hover,
.portal-nav-links button.active,
.account-menu button:hover {
  color: var(--lc-text);
  border-color: var(--lc-border);
  background: var(--lc-panel-raised);
}

.portal-nav-links button.active { color: var(--lc-blue-bright); }
.account-menu { gap: 9px; }
.account-label {
  max-width: 210px;
  overflow: hidden;
  color: var(--lc-muted-strong);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-chip {
  padding: 4px 7px;
  color: var(--lc-blue-bright);
  border: 1px solid #265593;
  border-radius: 999px;
  background: rgba(47, 124, 255, .1);
  font: 600 8px/1 "IBM Plex Mono", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.account-chip {
  width: 36px;
  height: 36px;
  color: var(--lc-text);
  border: 1px solid #3d79cf;
  background: linear-gradient(145deg, #245aa5, #102a50);
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 0 18px rgba(47, 124, 255, .17);
}

.portal-main {
  width: min(1240px, 100%);
  max-width: none;
  margin: 0 auto;
  padding: 46px 28px 84px;
}

.portal-heading {
  position: relative;
  overflow: hidden;
  align-items: center;
  min-height: 184px;
  margin-bottom: 22px;
  padding: 34px 38px;
  border: 1px solid var(--lc-border);
  border-radius: 16px;
  background:
    radial-gradient(circle at 84% 18%, rgba(47, 124, 255, .2), transparent 17rem),
    linear-gradient(135deg, rgba(16, 28, 43, .97), rgba(8, 18, 30, .97));
  box-shadow: var(--lc-shadow), inset 0 1px rgba(255, 255, 255, .03);
}

.portal-heading::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: 25px;
  width: 340px;
  height: 90px;
  opacity: .35;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 9%, var(--lc-blue) 9% 37%, transparent 37% 48%, var(--lc-blue) 48% 76%, transparent 76%) center / 100% 1px no-repeat,
    radial-gradient(circle at 9% 50%, var(--lc-blue-bright) 0 2px, transparent 3px),
    radial-gradient(circle at 48% 50%, var(--lc-blue-bright) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 50%, var(--lc-blue-bright) 0 2px, transparent 3px);
}

.portal-heading > * { position: relative; z-index: 1; }
.portal-heading .eyebrow,
.section-kicker {
  display: block;
  color: var(--lc-blue-bright);
  font: 600 9px/1.4 "IBM Plex Mono", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.portal-heading h1 {
  margin: 8px 0 6px;
  color: var(--lc-text);
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -.035em;
}

.portal-heading p { max-width: 560px; color: var(--lc-muted); font-size: 13px; }
.portal-actions { gap: 10px; }
.portal-btn {
  min-height: 40px;
  padding: 0 15px;
  color: var(--lc-muted-strong);
  border: 1px solid var(--lc-border);
  border-radius: 8px;
  background: #0d1826;
  font-size: 11px;
  font-weight: 700;
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.portal-btn:hover { color: var(--lc-text); border-color: #315e99; background: #122237; }
.portal-btn.primary {
  color: white;
  border-color: #3b88ff;
  background: linear-gradient(135deg, #347fff, #1f63cd);
  box-shadow: 0 8px 24px rgba(47, 124, 255, .22), inset 0 1px rgba(255, 255, 255, .18);
}
.portal-btn.primary:hover { background: linear-gradient(135deg, #4a8dff, #286fdc); }
.portal-btn.danger { color: #ff9b95; border-color: #6c3437; background: var(--lc-danger-bg); }

.stat-grid { gap: 12px; margin-bottom: 34px; }
.stat-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  min-height: 104px;
  padding: 16px 18px;
  color: var(--lc-text);
  border: 1px solid var(--lc-border-soft);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(16, 28, 43, .96), rgba(9, 19, 31, .96));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
}

.stat-card:first-child { border-color: #28558e; }
.stat-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--lc-blue-bright);
  border: 1px solid #295a98;
  border-radius: 8px;
  background: rgba(47, 124, 255, .08);
  font: 500 17px/1 "IBM Plex Mono", monospace;
}

.stat-card strong { display: block; margin: 0; color: var(--lc-text); font-size: 24px; line-height: 1; }
.stat-card div > span { display: block; margin-top: 5px; color: var(--lc-muted-strong); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.stat-card small { display: block; margin-top: 2px; color: var(--lc-muted); font-size: 9px; }
.portal-section { margin-top: 34px; }
.section-row { margin-bottom: 14px; }
.section-row h2 { margin-top: 4px; color: var(--lc-text); font-size: 18px; }
.section-row button { color: var(--lc-blue-bright); }
.project-grid,
.schematic-grid { gap: 13px; }

.project-card,
.schematic-card {
  color: var(--lc-text);
  border: 1px solid var(--lc-border-soft);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(15, 27, 42, .98), rgba(9, 18, 29, .98));
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
}

.project-card:hover,
.project-card:focus-within,
.schematic-card:hover,
.schematic-card:focus-within {
  border-color: #356bb0;
  box-shadow: 0 15px 34px rgba(0, 0, 0, .22), 0 0 0 1px rgba(47, 124, 255, .09);
  transform: translateY(-2px);
}

.project-card-body { min-height: 126px; padding: 16px; }
.project-record-heading { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; }
.project-record-icon { color: var(--lc-blue-bright); font: 500 16px/1 "IBM Plex Mono", monospace; }
.project-record-type { color: var(--lc-muted); font: 600 8px/1 "IBM Plex Mono", monospace; letter-spacing: .13em; text-transform: uppercase; }
.project-card h3,
.schematic-card h3 { color: var(--lc-text); font-size: 14px; }
.project-card p,
.schematic-card p { color: var(--lc-muted); font-size: 10px; line-height: 1.5; }
.project-card-body small { display: block; margin-top: 7px; color: #71869f; font-size: 9px; }
.project-meta {
  padding: 10px 16px;
  color: var(--lc-muted);
  border-top: 1px solid var(--lc-border-soft);
  font-size: 9px;
}
.project-meta strong { color: var(--lc-blue-bright); }
.card-actions { padding: 8px 10px; border-top: 1px solid var(--lc-border-soft); }
.card-actions button {
  min-height: 32px;
  color: var(--lc-muted-strong);
  border: 1px solid transparent;
  background: #101d2c;
}
.card-actions button:hover { color: var(--lc-text); border-color: #2d5c98; background: #14263d; }
.card-actions button.danger { color: #ff938d; background: transparent; }
.schematic-thumb { height: 122px; background: #dfe5e9; border-bottom: 1px solid var(--lc-border-soft); }
.thumb-placeholder { color: #47698d; }
.schematic-card-body { padding: 13px 14px; }
.schematic-labels span { color: #9fc2f5; background: #102849; }
.empty-state {
  color: var(--lc-text);
  border-color: #2a476d;
  background: rgba(12, 23, 37, .82);
}
.empty-state .empty-icon { color: var(--lc-blue-bright); background: #102a50; }
.empty-state p,
.loading-state { color: var(--lc-muted); }
.breadcrumbs { color: var(--lc-muted); }
.breadcrumbs a { color: var(--lc-blue-bright); }
.project-hero { border: 1px solid var(--lc-border); background: linear-gradient(135deg, #0f2138, #09131f); box-shadow: var(--lc-shadow); }
.project-hero p { color: var(--lc-muted); }
.project-facts { color: var(--lc-muted-strong); }

/* Editor shell */
body.editor-active {
  min-width: 0;
  overflow: hidden;
  color: var(--lc-text);
  background: var(--lc-app-bg);
}

.editor-active .topbar {
  height: 68px;
  padding: 0 14px;
  gap: 14px;
  color: var(--lc-text);
  border-bottom: 1px solid var(--lc-border);
  background: linear-gradient(180deg, #091321, #060d17);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .24);
}

.editor-active .brand { width: 188px; flex: 0 0 188px; }
.editor-active .doc-title { min-width: 180px; gap: 8px; }
.editor-active .status-dot { background: var(--lc-blue); box-shadow: 0 0 10px rgba(47, 124, 255, .7); }
.editor-active .doc-title input {
  width: 100%;
  color: var(--lc-text);
  font-size: 12px;
  font-weight: 600;
}
.editor-active .doc-title input:focus { outline: 0; box-shadow: inset 0 -1px var(--lc-blue); }
.editor-active .top-actions { gap: 7px; }
.top-action-group { display: flex; align-items: center; gap: 5px; }
.top-action-group + .top-action-group { margin-left: 3px; padding-left: 9px; border-left: 1px solid var(--lc-border); }
.editor-active .btn,
.editor-active .icon-btn,
.editor-active .mini-btn {
  color: var(--lc-muted-strong);
  border-color: var(--lc-border);
  background: #0d1826;
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}
.editor-active .btn { min-height: 34px; padding: 0 10px; border-radius: 7px; font-size: 9px; }
.editor-active .btn:hover,
.editor-active .icon-btn:hover,
.editor-active .mini-btn:hover { color: var(--lc-text); border-color: #376eaf; background: #14263b; }
.editor-active .btn.primary { color: #fff; border-color: #3a82ec; background: #246cd8; }
.editor-active .btn.primary:hover { background: #317cf0; }
.editor-active .cloud-action { color: #bcd6ff; border-color: #2d609f; background: #102849; }
.editor-active .revision-button { color: var(--lc-blue-bright); border-color: #315b90; background: #10233d; }
.editor-active .avatar {
  flex: 0 0 34px;
  color: #fff;
  border: 1px solid #3b76c4;
  background: linear-gradient(145deg, #245da8, #102a50);
  box-shadow: 0 0 16px rgba(47, 124, 255, .16);
}

.editor-active .app-shell {
  grid-template-columns: 62px 264px minmax(0, 1fr) 292px;
  height: calc(100dvh - 68px);
  background: var(--lc-app-bg);
}
.editor-active .tool-rail {
  padding: 10px 7px;
  gap: 5px;
  border-color: var(--lc-border);
  background: #07111c;
}
.editor-active .tool {
  width: 46px;
  min-height: 47px;
  color: #8194ac;
  border: 1px solid transparent;
  border-radius: 8px;
}
.editor-active .tool small { font-size: 8px; }
.editor-active .tool:hover,
.editor-active .tool.active { color: var(--lc-blue-bright); border-color: #284e7d; background: #10243e; }
.editor-active .tool:focus-visible { color: var(--lc-text); border-color: var(--lc-blue); outline: 0; box-shadow: var(--lc-focus); }
.editor-active .tool[data-tool="wire"].active { color: #9fc4ff; border-color: #376db3; background: #13305a; }
.editor-active .rail-divider { background: var(--lc-border); }

.editor-active .library-panel,
.editor-active .properties-panel {
  color: var(--lc-text);
  scrollbar-color: #2a4d78 #08121e;
  background: #09131f;
}
.editor-active .library-panel { padding: 15px 13px 24px; border-color: var(--lc-border); }
.editor-active .properties-panel { border-color: var(--lc-border); }
.editor-active .panel-heading { margin-bottom: 12px; }
.editor-active .panel-heading h2 { margin-top: 3px; color: var(--lc-text); font-size: 16px; }
.editor-active .eyebrow { color: var(--lc-blue-bright); }
.editor-active .search {
  height: 38px;
  color: #6f88a7;
  border-color: var(--lc-border);
  background: #0d1928;
}
.editor-active .search:focus-within { border-color: var(--lc-blue); box-shadow: var(--lc-focus); }
.editor-active .search input { color: var(--lc-text); background: transparent; }
.editor-active .search input::placeholder { color: #687c95; }
.editor-active .library-section { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--lc-border-soft); }
.editor-active .section-title {
  min-height: 30px;
  padding: 0 3px;
  color: var(--lc-muted-strong);
  font: 600 9px/1.2 "IBM Plex Mono", monospace;
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
}
.editor-active .section-title span { color: var(--lc-blue-bright); }
.editor-active .section-title:hover { color: var(--lc-text); }
.editor-active .component-grid { grid-template-columns: 1fr 1fr; gap: 5px; }
.editor-active .component-card {
  display: grid;
  grid-template-columns: 33px minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  align-items: center;
  column-gap: 6px;
  height: 57px;
  min-height: 57px;
  padding: 6px;
  color: var(--lc-text);
  border-color: #1b304a;
  border-radius: 7px;
  background: #0d1928;
  text-align: left;
}
.editor-active .component-card:hover,
.editor-active .component-card:focus-visible { border-color: #3975be; background: #12243a; box-shadow: 0 0 0 1px rgba(47, 124, 255, .1); transform: none; }
.editor-active .component-card .symbol-preview { grid-row: 1 / 3; width: 31px; height: 28px; color: #9ec4ff; }
.editor-active .component-card .symbol-preview .wire { stroke: #9ec4ff; }
.editor-active .component-card .symbol-preview .label { fill: #9ec4ff; }
.editor-active .component-card > span:nth-child(2) { align-self: end; margin: 0; overflow: hidden; color: var(--lc-text); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.editor-active .component-card small { align-self: start; overflow: hidden; color: #71859d; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.editor-active .template-card {
  color: var(--lc-text);
  border-color: #31547d;
  background: #0e1c2d;
}
.editor-active .template-icon { color: white; background: #246fdc; }
.editor-active .template-card small,
.editor-active .standards small { color: var(--lc-muted); }
.editor-active .standards,
.editor-active .validation { border-color: #27476e; background: #0e2138; }
.editor-active .standards > span,
.editor-active .validation > span { color: var(--lc-blue-bright); background: #143663; }

.editor-active .workspace { min-width: 0; background: var(--lc-app-bg); }
.editor-active .workspace-toolbar {
  height: 50px;
  padding: 0 12px;
  border-color: var(--lc-border);
  background: #091522;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .13);
}
.editor-active .crumb { color: #71869f; }
.editor-active .crumb strong { color: var(--lc-muted-strong); }
.editor-active .view-actions { gap: 5px; }
.editor-active .zoom-control { height: 31px; border-color: var(--lc-border); background: #0d1928; }
.editor-active .zoom-control button { color: var(--lc-muted-strong); }
.editor-active .zoom-control button:hover { color: white; background: #152a43; }
.editor-active .zoom-control span { color: var(--lc-blue-bright); border-color: var(--lc-border); }
.editor-active .zoom-slider { accent-color: var(--lc-blue); }
.editor-active .inspector-toggle { color: var(--lc-muted-strong) !important; border-color: var(--lc-border) !important; background: #0d1928 !important; }
.editor-active .canvas-wrap {
  padding: 38px;
  background-color: #07111d;
  background-image:
    linear-gradient(rgba(55, 89, 132, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 89, 132, .12) 1px, transparent 1px),
    radial-gradient(circle at 50% 15%, rgba(47, 124, 255, .09), transparent 30rem);
  background-size: 24px 24px, 24px 24px, 100% 100%;
}
.editor-active .canvas-wrap.grid-off { background-image: radial-gradient(circle at 50% 15%, rgba(47, 124, 255, .09), transparent 30rem); }
.editor-active .page {
  background: #fff;
  border: 1px solid #aab6c0;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .48), 0 0 0 1px rgba(129, 172, 225, .13);
}
.editor-active .canvas-hint { color: #c3d0df; border: 1px solid #263f5f; background: rgba(7, 16, 28, .92); box-shadow: 0 8px 20px rgba(0, 0, 0, .22); }

.editor-active .props-heading { padding: 15px 14px 0; }
.editor-active .prop-section { padding: 13px 14px; border-color: var(--lc-border-soft); }
.editor-active .prop-section h3 { color: #86a4c8; }
.editor-active .prop-section label,
.editor-active .field-label { color: var(--lc-muted); }
.editor-active .prop-section input,
.editor-active .prop-section textarea,
.editor-active .prop-section select,
.editor-active .revision-form input,
.editor-active .revision-form textarea {
  color: var(--lc-text);
  border-color: #213b5c;
  background: #0d1928;
}
.editor-active .prop-section input:focus,
.editor-active .prop-section textarea:focus,
.editor-active .prop-section select:focus,
.editor-active .revision-form input:focus,
.editor-active .revision-form textarea:focus { border-color: var(--lc-blue); box-shadow: var(--lc-focus); }
.editor-active .toggle-row i { background: #28384b; }
.editor-active .toggle-row input:checked + i { background: var(--lc-blue); }
.editor-active .summary-symbol { color: var(--lc-blue-bright); background: #102849; }
.editor-active .danger-zone button { color: var(--lc-muted-strong); border-color: var(--lc-border); background: #0e1a29; }
.editor-active .danger-zone button:last-child { color: #ff938d; border-color: #663338; background: #25151a; }
.editor-active .logo-uploader { border-color: #2b4b73; background: #0b1725; }
.editor-active .logo-preview { border-color: var(--lc-border); background: #eef2f5; }
.editor-active .logo-actions button { color: #c0d9ff; background: #12325b; }
.editor-active .logo-actions small { color: #71869f; }
.editor-active .logo-uploader.dragging { border-color: var(--lc-blue); background: #102849; }

/* Authenticated dialogs, menus, messages and revision surfaces */
.editor-active .modal-backdrop,
.library-dialog-backdrop { background: rgba(2, 7, 13, .78); backdrop-filter: blur(8px); }
.editor-active .template-modal,
.library-dialog {
  color: var(--lc-text);
  border: 1px solid var(--lc-border);
  background: #0b1624;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .58);
}
.editor-active .modal-heading p,
.library-dialog > p { color: var(--lc-muted); }
.editor-active .template-save-panel { border-color: #284e7b; background: #0e2138; }
.editor-active .template-save-panel small { color: var(--lc-muted); }
.editor-active .template-save-actions input,
.dialog-form input,
.dialog-form textarea,
.dialog-form select {
  color: var(--lc-text);
  border-color: #274463;
  background: #0d1928;
}
.dialog-form label { color: var(--lc-muted); }
.editor-active .gallery-card,
.editor-active .revision-form,
.editor-active .revision-row { color: var(--lc-text); border-color: var(--lc-border); background: #0d1928; }
.editor-active .gallery-card:hover { border-color: #3975be; box-shadow: 0 8px 24px rgba(0, 0, 0, .24); }
.editor-active .gallery-card small,
.editor-active .revision-form label,
.editor-active .revision-copy small,
.editor-active .history-heading span { color: var(--lc-muted); }
.editor-active .revision-copy p { color: var(--lc-muted-strong); }
.editor-active .gallery-preview { color: var(--lc-blue-bright); border-color: #294667; background: #e9eef2; }
.editor-active .revision-mark { color: #dbe9ff; background: #17498a; }
.editor-active .revision-row.current { border-color: #3779c8; background: #10243e; }
.editor-active .restore-revision { color: var(--lc-muted-strong); border-color: var(--lc-border); background: #0d1928; }
.editor-active .current-pill { color: var(--lc-blue-bright); }
.editor-active .revision-empty,
.editor-active .custom-template-empty { color: var(--lc-muted); border-color: #2b4b73; background: #091522; }
.portal-toast,
.editor-active .toast { color: var(--lc-text); border: 1px solid #315e99; background: #0b1c31; box-shadow: 0 12px 32px rgba(0, 0, 0, .34); }
.portal-active > .environment-badge { display: none; }
.editor-active > .environment-badge {
  top: auto;
  right: 10px;
  bottom: 78px;
  color: #dceaff;
  border-color: #356fba;
  background: #102849;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .32), 0 0 18px rgba(47, 124, 255, .16);
}
.portal-active .form-error,
.editor-active .form-error { color: #ffc0bc; border-color: #6d363a; background: #30191e; }

.portal-active :is(button, a, input, textarea, select):focus-visible,
.editor-active :is(button, a, input, textarea, select):focus-visible {
  outline: 2px solid var(--lc-blue-bright);
  outline-offset: 2px;
}

@media (max-width: 1180px) {
  .editor-active .brand { width: 42px; flex-basis: 42px; }
  .editor-active .brand .linecraft-wordmark { display: none; }
  .editor-active .topbar { gap: 9px; }
  .editor-active .top-action-group + .top-action-group { margin-left: 0; padding-left: 5px; }
  .editor-active .btn { padding-inline: 8px; }
  .editor-active .app-shell { grid-template-columns: 58px 238px minmax(0, 1fr) 258px; }
}

@media (max-width: 900px) {
  .editor-active .topbar { height: 58px; padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); }
  .editor-active .brand { width: 34px; flex-basis: 34px; }
  .editor-active .top-actions { align-self: stretch; max-width: none; }
  .top-action-group { flex: 0 0 auto; }
  .top-action-group + .top-action-group { padding-left: 6px; }
  .editor-active .cloud-actions { order: 1; }
  .editor-active .transfer-actions { order: 2; }
  .editor-active .project-file-actions { order: 3; }
  .editor-active .edit-actions { order: 4; }
  .editor-active .top-actions .btn,
  .editor-active .top-actions .icon-btn { min-height: 38px; }
  .editor-active .app-shell { height: calc(100dvh - 58px); }
  .editor-active .workspace-toolbar { min-height: 52px; height: auto; padding: 6px 9px; }
  .editor-active .mobile-drawer-actions button {
    min-height: 40px;
    color: #c8dcfa;
    border: 1px solid #2a4b73;
    background: #0d1b2c;
  }
  .editor-active .mobile-drawer-actions button[aria-expanded="true"] { color: white; border-color: var(--lc-blue); background: #14305a; }
  .editor-active .tool-rail {
    border-color: #29486d;
    background: rgba(7, 17, 28, .96);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .44);
  }
  .editor-active .library-panel,
  .editor-active .properties-panel { box-shadow: 0 0 48px rgba(0, 0, 0, .56); }
  .editor-active .library-panel .panel-heading,
  .editor-active .properties-panel .panel-heading { background: #09131f; }
  .editor-active .component-card { min-height: 58px; height: 58px; }
  .editor-active .section-title { min-height: 44px; }
  .editor-active .canvas-wrap { padding: 16px; padding-bottom: 90px; }
  .editor-active .mobile-panel-backdrop { background: rgba(1, 6, 12, .72); backdrop-filter: blur(4px); }
  .portal-nav { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .portal-main { padding: 28px 18px max(64px, env(safe-area-inset-bottom)); }
  .portal-heading { min-height: 0; padding: 26px 24px; }
  .portal-heading::after { opacity: .18; }
  .portal-actions { width: 100%; }
  .portal-actions .portal-btn { min-height: 44px; }
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .stat-card { grid-template-columns: 34px 1fr; padding: 13px; }
}

@media (max-width: 700px) {
  .portal-nav { gap: 8px; }
  .portal-brand .linecraft-brand-stage { display: none; }
  .account-label,
  .role-chip { display: none; }
  .portal-heading { align-items: flex-start; gap: 22px; }
  .portal-heading h1 { font-size: 31px; }
  .stat-grid { grid-template-columns: 1fr; gap: 8px; }
  .stat-card { min-height: 84px; }
  .project-grid,
  .schematic-grid { grid-template-columns: 1fr; }
  .project-card-body { min-height: 0; }
}

@media (max-width: 430px) {
  .portal-nav { height: 62px; }
  .portal-brand { min-width: 0; }
  .portal-brand .linecraft-wordmark { display: none; }
  .account-menu button { min-height: 40px; padding-inline: 8px; }
  .portal-main { padding-inline: 12px; }
  .portal-heading { padding: 22px 18px; border-radius: 13px; }
  .portal-heading p { font-size: 12px; line-height: 1.55; }
  .portal-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .project-meta { gap: 8px; }
  .editor-active .top-actions #undoBtn,
  .editor-active .top-actions #importFileBtn { display: none; }
  .editor-active .zoom-slider { display: none; }
  .editor-active .view-actions .pan-pad { display: none; }
  .editor-active .component-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 340px) {
  .account-chip { display: none; }
  .portal-actions { grid-template-columns: 1fr; }
  .editor-active .top-actions #templatesBtn,
  .editor-active .top-actions #downloadFileBtn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-active *,
  .editor-active * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}