:root {
      font-family: Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
      color: #172033;
      --blue: #4f6df5;
      --panel: rgba(255,255,255,.92);
      --line: #dfe5ee;
    }
    * { box-sizing: border-box; }
    html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
    body { background: #edf1f7; }

    .app { height: 100%; display: grid; grid-template-rows: auto auto 1fr; }
    .toolbar {
      z-index: 20;
      display: grid;
      gap: 0;
      padding: 0 16px;
      border-bottom: 1px solid var(--line);
      background: var(--panel);
      box-shadow: 0 5px 22px rgba(28,43,70,.08);
      backdrop-filter: blur(16px);
    }
    .toolbar-row {
      min-height: 52px;
      display: flex;
      align-items: center;
      gap: 10px;
      white-space: nowrap;
    }
    .toolbar-row + .toolbar-row {
      min-height: 48px;
      border-top: 1px solid #edf0f5;
    }
    .ribbon-tabs { min-height: 43px; display: flex; align-items: end; gap: 3px; padding-top: 5px; }
    .ribbon-tab { height: 34px; padding: 0 14px; border: 0; border-bottom: 3px solid transparent; color: #5f6b80; background: transparent; font-size: 13px; font-weight: 750; cursor: pointer; }
    .ribbon-tab:hover { color: #304dcd; background: #f1f4fb; }
    .ribbon-tab.active { color: #3154df; border-bottom-color: #4f6df5; background: #eef2ff; }
    .ribbon-content { min-height: 52px; }
    .ribbon-content .brand, .ribbon-content .group { display: none; }
    .ribbon-content .group.ribbon-active { display: flex; }
    .ribbon-content[hidden] { display: none; }
    .brand { display: flex; align-items: center; gap: 9px; margin-right: 8px; white-space: nowrap; font-weight: 800; }
    .brand-mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: white; background: var(--blue); }
    .group { display: flex; align-items: center; gap: 6px; padding-right: 9px; border-right: 1px solid var(--line); }
    .group:last-child { border: 0; padding-right: 0; }
    button, select, input { font: inherit; }
    select.library {
      height: 38px; max-width: 150px; padding: 0 30px 0 10px; border: 1px solid var(--line);
      border-radius: 10px; color: #43506a; background: white; cursor: pointer;
    }
    .board-actions { display: inline-flex; align-items: center; gap: 0; }
    .board-actions > * { position: relative; margin: 0; }
    .board-actions .board-save {
      border: 1px solid #bfcaff; border-radius: 9px 0 0 9px; color: #3654dd; background: #eef2ff;
    }
    .board-actions .board-delete {
      margin-left: -1px; border: 1px solid #ccd3df; border-radius: 0 9px 9px 0; color: #b23b50; background: #fff;
    }
    .board-library-wrap { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
    .board-library-wrap select { min-width: 180px; }
    .board-actions button svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
    button.tool, button.action {
      height: 38px;
      min-width: 38px;
      padding: 0 10px;
      border: 1px solid transparent;
      border-radius: 10px;
      color: #43506a;
      background: transparent;
      cursor: pointer;
      white-space: nowrap;
      font-size: 19px;
      font-weight: 700;
      position: relative;
    }
    button.tool:hover, button.action:hover { background: #f0f3f9; }
    button.tool.active, button.action.active { color: #3654dd; border-color: #ccd6ff; background: #eaf0ff; }
    button.action.text-action { min-width: auto; padding: 0 14px; font-size: 13px; font-weight: 800; }
    button:disabled { opacity: .35; cursor: default; }
    .color-wrap { width: 36px; height: 36px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: white; }
    input[type="color"] { width: 100%; height: 100%; padding: 0; border: 0; border-radius: 7px; cursor: pointer; }
    input[type="range"] { width: 85px; accent-color: var(--blue); }
    .size-label { min-width: 22px; color: #6d7890; font-size: 12px; }
    #fontSize { width: 58px; height: 30px; padding: 0 5px; border: 1px solid var(--line); border-radius: 7px; color: #344159; background: white; font-weight: 700; }
    .save { color: white !important; background: var(--blue) !important; }
    .danger:hover { color: #cb3c55 !important; background: #fff0f3 !important; }
    [data-tooltip] { position: relative; }
    [data-tooltip]::after {
      content: attr(data-tooltip);
      position: absolute;
      z-index: 100;
      left: 50%; top: calc(100% + 8px);
      transform: translate(-50%, -4px);
      padding: 6px 9px;
      border-radius: 7px;
      color: white;
      background: #202a3d;
      box-shadow: 0 5px 16px rgba(18,28,46,.2);
      font-size: 12px;
      font-weight: 650;
      line-height: 1;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .14s, transform .14s, visibility .14s;
    }
    [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after {
      opacity: 1; visibility: visible; transform: translate(-50%, 0);
    }
    .row-label {
      margin-right: 3px; padding: 5px 7px; border-radius: 6px;
      color: #67738a; background: #f0f3f8;
      font-size: 11px; font-weight: 850; letter-spacing: .05em;
    }
    .format-button { font-family: Georgia, serif !important; font-size: 16px !important; }
    #zoomReset { min-width: 52px; font-size: 12px; }
    .sheetbar {
      z-index: 12; min-height: 42px; display: flex; align-items: center; gap: 6px;
      padding: 5px 14px; overflow-x: auto; background: #f6f8fb; border-bottom: 1px solid var(--line);
    }
    #sheetTabs { display: flex; align-items: center; gap: 5px; }
    .sheet-tab {
      height: 31px; max-width: 180px; padding: 0 13px; overflow: hidden; text-overflow: ellipsis;
      border: 1px solid transparent; border-radius: 8px; color: #657188; background: transparent;
      font-size: 13px; font-weight: 750; white-space: nowrap; cursor: pointer;
    }
    .sheet-tab:hover { background: #e9edf5; }
    .sheet-tab.active { color: #3154df; border-color: #cbd5ff; background: white; box-shadow: 0 2px 8px rgba(30,50,90,.08); }
    .sheet-add, .sheet-delete {
      width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 8px;
      color: #57647b; background: white; cursor: pointer; font-size: 17px;
    }
    .sheet-delete:disabled { opacity: .35; }

    .workspace { position: relative; min-height: 0; overflow: auto; touch-action: pan-x pan-y; background: #d9dee7; }
    #pageScrollArea { position: relative; min-width: 100%; min-height: 100%; }
    #board { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; background-color: #fff; touch-action: none; }
    #stage { position: absolute; left: 0; top: 0; width: 794px; height: 1123px; transform-origin: 0 0; background: white; box-shadow: 0 8px 30px rgba(28,38,58,.22); }
    #selectionBox { position: absolute; z-index: 30; display: none; border: 2px dashed #315be8; background: rgba(79,109,245,.08); pointer-events: auto; cursor: move; }
    .object-selected { outline: 3px solid #4f6df5; outline-offset: 2px; }
    .board-chart.active-chart { outline: 1px dashed #4f6df5; outline-offset: 3px; }
    .board-chart.active-chart.partial-chart-selection { outline: none; }
    .board-table.active-table { outline: none; }
    .board-table.active-table > table { outline: 1px dashed #4f6df5; outline-offset: 3px; }
    .resize-handle { position: absolute; z-index: 70; width: 8px; height: 8px; border: 0; background: transparent; clip-path: none; box-shadow:none; opacity: 0; pointer-events: auto; touch-action: none; }
    article:hover > .resize-handle, article:focus-within > .resize-handle { opacity: 0; }
    .resize-handle.nw { left:-8px; top:-8px; cursor:nwse-resize; }.resize-handle.ne { right:-8px; top:-8px; cursor:nesw-resize; transform:none; }
    .resize-handle.sw { left:-8px; bottom:-8px; cursor:nesw-resize; transform:none; }.resize-handle.se { right:-8px; bottom:-8px; cursor:nwse-resize; transform:none; }
    .resize-handle.n,.resize-handle.s { left:8px; right:8px; width:auto; height:7px; transform:none; }
    .resize-handle.n { top:-7px; cursor:ns-resize; }.resize-handle.s { bottom:-7px; cursor:ns-resize; }
    .resize-handle.e,.resize-handle.w { top:8px; bottom:8px; width:7px; height:auto; transform:none; }
    .resize-handle.e { right:-7px; cursor:ew-resize; }.resize-handle.w { left:-7px; cursor:ew-resize; }
    #eraserPreview { position: fixed; z-index: 100; display: none; border: 2px solid #e34d68; border-radius: 50%; background: rgba(227,77,104,.12); pointer-events: none; transform: translate(-50%,-50%); }
    .workspace.palm-guard { touch-action: none; }
    #pageEditor { position:absolute; z-index:0; inset:0; box-sizing:border-box; padding:52px 58px; outline:0; color:#253858; background:transparent; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; pointer-events:none; }
    #pageEditor.editing { pointer-events:auto; cursor:text; }
    #drawSizeNumber { width:54px; height:30px; padding:0 5px; border:1px solid var(--line); border-radius:7px; color:#344159; background:white; }
    .grid {
      background-image: linear-gradient(#e9edf3 1px, transparent 1px), linear-gradient(90deg, #e9edf3 1px, transparent 1px);
      background-size: 24px 24px;
    }
    #notes, #tables, #charts { position: absolute; inset: 0; pointer-events: none; }
    .note {
      position: absolute;
      width: 260px;
      min-height: 54px;
      padding: 25px 7px 6px;
      border: 1px solid transparent;
      border-radius: 7px;
      background: transparent;
      box-shadow: none;
      pointer-events: auto;
      resize: none;
      overflow: hidden;
    }
    .note:hover, .note:focus-within { border-color: #a9bafc; background: rgba(255,255,255,.72); }
    .note-editor {
      width: 100%; height: 100%; min-height: 24px; resize: none; border: 0; outline: 0;
      color: #253858; background: transparent; line-height: 1.5;
      overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
    }
    .note-editor:empty::before { content: attr(data-placeholder); color: #9aa5b7; pointer-events: none; }
    .note-editor a { color: #315bd6; text-decoration: underline; cursor: pointer; }
    .note-editor img { display: block; max-width: 100%; height: auto; margin: 7px 0; border-radius: 6px; }
    .note-handle {
      position: absolute; inset: 0 0 auto 0; height: 30px; padding: 5px 8px;
      display: flex; justify-content: space-between; align-items: center;
      cursor: move; color: #7180a0; font-size: 12px; font-weight: 800;
      touch-action: none; user-select: none;
      opacity: 0; transition: opacity .15s;
    }
    .note:hover .note-handle, .note:focus-within .note-handle { opacity: 1; }
    .delete-note { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
    .delete-note:hover { background: rgba(0,0,0,.08); }
    .board-image { position:absolute; pointer-events:auto; touch-action:none; cursor:move; user-select:none; }
    .board-image img { display:block; width:100%; height:100%; object-fit:contain; pointer-events:auto; }
    #stage img.image-click-selected { outline:3px solid #7a8ff2 !important; outline-offset:2px; }
    .board-image.image-selected,.board-image.active-image { z-index:35; outline:3px solid #7a8ff2 !important; outline-offset:2px; box-shadow:0 0 0 1px rgba(255,255,255,.95),0 0 0 5px rgba(79,109,245,.16); }
    .policy-dialog { width:min(760px,calc(100vw - 32px)); padding:0; border:0; border-radius:14px; color:#dfeaf3; background:#0b1929; box-shadow:0 28px 90px rgba(0,0,0,.6); }
    .policy-dialog::backdrop { background:rgba(2,8,14,.74); backdrop-filter:blur(5px); }
    .policy-shell { max-height:calc(100vh - 48px); display:grid; grid-template-rows:auto auto 1fr auto; }
    .policy-header { display:flex; align-items:center; justify-content:space-between; padding:20px 22px 12px; }
    .policy-header h2 { margin:0; font-size:20px; }.policy-close{border:0;color:#a9bdcf;background:transparent;font-size:24px;cursor:pointer}
    .policy-tabs { display:flex; gap:6px; padding:0 22px 14px; border-bottom:1px solid rgba(130,162,190,.14); }
    .policy-tab { height:34px; padding:0 12px; border:1px solid rgba(130,162,190,.18); border-radius:999px; color:#9eb1c3; background:#102238; cursor:pointer; }
    .policy-tab.active { color:#07151f; border-color:#78e1d1; background:#78e1d1; }
    .policy-content { padding:20px 24px 28px; overflow:auto; line-height:1.7; color:#b9c9d8; }
    .policy-panel { display:none; }.policy-panel.active{display:block}.policy-panel h3{margin:18px 0 7px;color:#e5f0f8;font-size:15px}.policy-panel h3:first-child{margin-top:0}.policy-panel p,.policy-panel ul{margin:6px 0}.policy-notice{padding:10px 12px;border-radius:8px;background:rgba(101,213,220,.08);color:#9edbd9;font-size:12px}
    .board-table {
      position: absolute; width: 420px; min-width: 100px; min-height: 64px;
      border: 0; border-radius: 0;
      background: transparent; box-shadow: none;
      pointer-events: auto; resize: none; overflow: visible;
    }
    .table-handle {
      position: absolute; inset: 0 0 auto 0; height: 20px; display: flex; align-items: center;
      gap: 3px; padding: 1px 4px 1px 7px; color: #66738b; background: #f3f6fa;
      border-bottom: 1px solid #d7deea; cursor: move; user-select: none; touch-action: none;
      font-size: 9px; font-weight: 800;
    }
    .table-handle span { margin-right: auto; }
    .table-control { height: 17px; padding: 0 5px; border: 0; border-radius: 4px; color: #526078; background: transparent; cursor: pointer; font-size: 10px; }
    .table-control:hover { background: #e2e8f2; }
    .table-control.active { color: #3654dd; background: #dfe8ff; }
    .table-control.delete-table:hover { color: #bf304a; background: #ffe9ee; }
    .table-menu { position: absolute; z-index: 60; display: none; width: 184px; max-height: min(300px, calc(100vh - 80px)); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color:#8b96a6 #eef1f5; padding: 5px; border: 1px solid #cbd4e1; border-radius: 9px; background: white; box-shadow: 0 10px 25px rgba(25,38,62,.2); cursor: default; }
    .table-menu.open { display: grid; grid-template-columns: 1fr; gap: 1px; }
    .table-menu .table-control { width: 100%; height: 25px; padding:0 7px; text-align: left; font-size:11px; }
    .table-menu .delete-table { margin-top: 4px; border-top: 1px solid #e1e6ee; border-radius: 0 0 6px 6px; }
    .table-menu-title { margin: 4px 5px 1px; color: #6b778c; font-size: 10px; font-weight: 800; }
    .table-format-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
    .text-color-palette { position:fixed; z-index:300; width:226px; padding:10px; border:1px solid rgba(130,162,190,.28); border-radius:11px; color:#dce8f1; background:#0d1c2d; box-shadow:0 16px 38px rgba(0,0,0,.45); }
    .text-color-palette[hidden] { display:none !important; }
    .color-palette-title { margin:2px 1px 6px; color:#8fa6ba; font-size:10px; font-weight:800; }
    .color-swatch-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-bottom:9px; }
    .color-swatch { width:27px; height:27px; padding:0; border:2px solid rgba(255,255,255,.28); border-radius:6px; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); }
    .color-swatch:hover,.color-swatch.active { border-color:#76ddff; transform:scale(1.07); }
    .color-palette-more { width:100%; height:30px; border:1px solid rgba(130,162,190,.22); border-radius:7px; color:#b7c8d6; background:#102238; cursor:pointer; font-size:11px; font-weight:750; }
    .chart-color-control { display:flex; align-items:center; justify-content:space-between; height:29px; padding:0 7px; color:#526078; font-size:11px; font-weight:700; }
    .chart-color-control[hidden], .table-menu [data-marker][hidden] { display:none !important; }
    .chart-color-control input { width:34px; height:22px; padding:1px; border:1px solid #cbd4e1; border-radius:5px; background:white; }
    .board-table table { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; }
    .board-table td { box-sizing:border-box; min-width: 0; height: 36px; padding: 7px 8px; border: 1px solid #aeb9cc; outline: 0; color:#000; vertical-align: top; overflow-wrap: anywhere; }
    .board-table th { box-sizing:border-box; height: 24px; padding: 2px 5px; border: 1px solid #b8c2d2; color: #5f6c81; background: #edf1f6; font-size: 11px; text-align: center; user-select: none; }
    .board-table thead th:first-child, .board-table tbody th { width: 34px; }
    .board-table td:focus { background: #eef3ff; box-shadow: inset 0 0 0 2px #6d86f7; }
    .board-table td.cell-selected { background: #dfe8ff; box-shadow: inset 0 0 0 2px #6682f2; }
    .board-table td { cursor: cell; }
    .board-chart {
      position: absolute; width: 460px; height: 300px; min-width: 180px; min-height: 120px;
      border: 1px solid #aeb9cc; border-radius: 8px; background: rgba(255,255,255,.97);
      box-shadow: 0 5px 18px rgba(31,45,70,.12); pointer-events: auto; resize: none; overflow: visible;
    }
    .chart-body { width: 100%; height: 100%; overflow:hidden; border-radius:inherit; }
    .chart-body svg { display: block; width: 100%; height: 100%; }
    .chart-label-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
    .trend-label { position: absolute; max-width: 240px; padding: 3px 6px; border: 1px solid currentColor; border-radius: 5px; background: rgba(255,255,255,.9); font-size: 10px; line-height: 1.35; white-space: pre-line; cursor: move; pointer-events: auto; user-select: none; touch-action: none; }
    .chart-text-selected { paint-order:normal; stroke:none; text-decoration:underline; text-decoration-color:#4f6df5; text-decoration-thickness:1.5px; text-underline-offset:2px; }
    .trend-label.trend-label-selected { box-shadow:0 0 0 3px rgba(79,109,245,.25); }
    .chart-dialog { width: min(520px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 14px; box-shadow: 0 20px 70px rgba(20,31,54,.28); }
    .board-loading { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; background:rgba(5,14,24,.48); backdrop-filter:blur(3px); }
    .board-loading[hidden] { display:none !important; }
    .board-loading-card { width:min(390px,calc(100vw - 36px)); padding:20px; border:1px solid rgba(143,181,211,.25); border-radius:14px; color:#e6f0f7; background:#0b1929; box-shadow:0 20px 65px rgba(0,0,0,.45); }
    .board-loading-card strong { display:block; margin-bottom:13px; font-size:14px; }
    .board-loading-track { height:9px; overflow:hidden; border-radius:999px; background:#1d3044; }
    .board-loading-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#65d5dc,#73a9ff); transition:width .18s ease; }
    #boardLoadingPercent { display:block; margin-top:8px; color:#9eb3c5; text-align:right; font-size:11px; }
    .chart-dialog::backdrop { background: rgba(24,32,48,.38); backdrop-filter: blur(2px); }
    .chart-dialog form { max-height: min(760px, calc(100vh - 40px)); padding: 22px; overflow-y: auto; }
    .chart-dialog h2 { margin: 0 0 18px; font-size: 20px; }
    .chart-dialog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .chart-section-title { grid-column:1/-1; margin-top:6px; padding:9px 10px; border-radius:8px; color:#dce9f6; background:rgba(101,213,220,.09); font-size:13px; font-weight:850; }
    .chart-field.wide, .series-picker { grid-column:1/-1; }
    .trend-options { grid-column:2; display:grid; gap:14px; align-content:start; padding-top:24px; }
    .chart-field { display: grid; gap: 6px; color: #59657a; font-size: 12px; font-weight: 750; }
    .chart-field select { width: 100%; height: 38px; padding: 0 9px; border: 1px solid #ccd4e0; border-radius: 8px; background: white; color: #26344e; }
    .chart-field input[type="text"], .chart-field input[type="number"] { width: 100%; height: 38px; padding: 0 9px; border: 1px solid #ccd4e0; border-radius: 8px; background: white; color: #26344e; }
    .series-picker { grid-column: 1 / -1; min-height: 76px; max-height: 150px; padding: 9px; overflow: auto; border: 1px solid #d9e0ea; border-radius: 9px; }
    .series-picker label { display: inline-flex; align-items: center; gap: 5px; margin: 4px 12px 4px 0; color: #36445d; font-size: 13px; }
    .chart-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
    .chart-dialog-actions button { height: 38px; padding: 0 15px; border: 1px solid #d2d9e4; border-radius: 9px; background: white; cursor: pointer; }
    .chart-dialog-actions button[value="save"] { border-color: #4f6df5; color: white; background: #4f6df5; }
    .table-dialog { width: min(390px, calc(100vw - 32px)); }
    .dimension-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .dimension-inputs input { width: 100%; height: 42px; padding: 0 10px; border: 1px solid #ccd4e0; border-radius: 8px; }
    .empty-tip {
      position: absolute; left: 50%; top: 48%; transform: translate(-50%,-50%);
      color: #a3acba; text-align: center; pointer-events: none; user-select: none;
    }
    .empty-tip strong { display: block; margin-bottom: 8px; color: #8c97a8; font-size: 19px; }
    .status {
      position: absolute; right: 16px; bottom: 14px; padding: 7px 11px; border-radius: 999px;
      color: #667188; background: rgba(255,255,255,.88); box-shadow: 0 3px 12px rgba(20,30,50,.08);
      display: none; font-size: 12px; pointer-events: none;
    }
    .palm-floating { margin-left: auto; height: 34px; padding: 0 12px; border: 1px solid #bfc9d8; border-radius: 9px; color: #536078; background: white; cursor: pointer; font-size: 12px; font-weight: 800; }
    .mode-shortcuts { margin-left:auto; display:flex; align-items:center; gap:4px; }
    .mode-shortcuts .tool { width:auto; height:34px; padding:0 12px; border:1px solid #bfc9d8; border-radius:9px; color:#536078; background:white; font-family:inherit; font-size:12px; font-weight:800; }
    .mode-shortcuts .tool.active { color:#3154df; border-color:#9eb0fa; background:#eaf0ff; }
    .mode-shortcuts + .palm-floating { margin-left:4px; }
    .palm-floating.active { color: #3154df; border-color: #9eb0fa; background: #eaf0ff; }

    @media (max-width: 700px) {
      .toolbar { padding: 0 9px; overflow-x: auto; }
      .toolbar-row { width: max-content; }
      .brand span:last-child { display: none; }
      button.tool, button.action { padding: 0 9px; }
      input[type="range"] { width: 65px; }
      .note { width: 210px; }
    }

  
    /* ChemMagician product UI */
    :root {
      --blue:#59c7ff; --panel:rgba(8,17,29,.96); --line:rgba(148,177,204,.16);
      --chem-bg:#06101c; --chem-panel:#0a1726; --chem-panel-2:#0f2033;
      --chem-text:#e8f2fb; --chem-muted:#8195aa; --chem-accent:#59c7ff;
      --chem-accent-2:#77e2cf; --chem-danger:#ff7f98;
    }
    body { color:var(--chem-text); background:#06101c; }
    .app { background:#06101c; }
    .toolbar {
      padding:0 22px; border-bottom:1px solid rgba(120,160,194,.14);
      background:linear-gradient(180deg,rgba(8,18,31,.985),rgba(7,16,28,.965));
      box-shadow:0 12px 40px rgba(0,0,0,.28); backdrop-filter:blur(20px);
    }
    .ribbon-tabs { min-height:58px; align-items:center; gap:4px; padding:0; }
    .brand { min-width:210px; gap:11px; margin-right:18px; color:#f4f9fd; }
    .brand-mark { width:34px; height:34px; border-radius:10px; color:#77e2cf; background:linear-gradient(145deg,rgba(89,199,255,.14),rgba(119,226,207,.07)); border:1px solid rgba(89,199,255,.28); box-shadow:inset 0 0 18px rgba(89,199,255,.06),0 0 22px rgba(89,199,255,.08); }
    .brand-mark svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
    .brand-copy { display:grid; gap:1px; line-height:1; }
    .brand-copy strong { font-size:13px; letter-spacing:.16em; font-weight:850; }
    .brand-copy small { color:#688198; font-size:8px; letter-spacing:.28em; font-weight:800; }
    .ribbon-tab { height:34px; padding:0 13px; border:1px solid transparent; border-radius:9px; color:#8195aa; font-size:12px; font-weight:760; }
    .ribbon-tab:hover { color:#d8edf9; background:rgba(89,199,255,.065); }
    .ribbon-tab.active { color:#8de7dc; border-color:rgba(119,226,207,.18); background:rgba(119,226,207,.075); box-shadow:inset 0 0 0 1px rgba(255,255,255,.012); }
    .palm-floating { margin-left:auto; height:32px; padding:0 12px; border-color:rgba(132,164,192,.18); border-radius:999px; color:#8da1b5; background:rgba(255,255,255,.025); font-size:11px; }
    .mode-shortcuts .tool { height:32px; padding:0 12px; border-color:rgba(132,164,192,.18); border-radius:999px; color:#8da1b5; background:rgba(255,255,255,.025); font-size:11px; }
    .mode-shortcuts .tool.active { color:#82ded2; border-color:rgba(119,226,207,.24); background:rgba(119,226,207,.07); }
    .palm-floating.active { color:#82ded2; border-color:rgba(119,226,207,.24); background:rgba(119,226,207,.07); }
    .toolbar-row { min-height:52px; gap:8px; }
    .toolbar-row + .toolbar-row { min-height:48px; border-top:1px solid rgba(126,159,187,.09); }
    .ribbon-content .brand { display:none; }
    .group { gap:5px; padding-right:12px; border-right:1px solid rgba(126,159,187,.12); }
    .row-label { margin-right:4px; padding:4px 7px; color:#667f96; background:rgba(117,151,181,.06); border:1px solid rgba(117,151,181,.07); font-size:9px; letter-spacing:.10em; }
    button.tool, button.action { height:34px; min-width:34px; padding:0 9px; border-radius:8px; color:#91a6ba; font-size:17px; }
    button.tool:hover, button.action:hover { color:#e8f7ff; background:rgba(89,199,255,.075); }
    button.tool.active, button.action.active { color:#76ddff; border-color:rgba(89,199,255,.25); background:rgba(89,199,255,.105); }
    button.action.text-action { height:34px; padding:0 13px; border:1px solid rgba(130,162,190,.14); color:#9db0c2; background:rgba(255,255,255,.025); font-size:11px; }
    button.action.text-action:hover { border-color:rgba(89,199,255,.22); color:#e7f8ff; background:rgba(89,199,255,.07); }
    .save { border-color:rgba(89,199,255,.45)!important; color:#04111b!important; background:linear-gradient(135deg,#78e1d1,#59c7ff)!important; box-shadow:0 5px 18px rgba(89,199,255,.14); }
    .board-actions .board-save { color:#07131d; border-color:rgba(89,199,255,.46); background:linear-gradient(135deg,#78e1d1,#59c7ff); }
    .board-actions .board-delete { color:#ff91a5; border-color:rgba(255,127,152,.18); background:rgba(255,127,152,.045); }
    select.library,.color-wrap { border-color:rgba(130,162,190,.17); color:#a9bdcf; background:#0d1c2d; color-scheme:dark; }
    input[type="range"] { accent-color:#59c7ff; }
    .size-label { color:#6f879d; }
    [data-tooltip]::after { color:#dcecf7; background:#12263a; border:1px solid rgba(132,166,194,.16); box-shadow:0 10px 28px rgba(0,0,0,.38); }
    .sheetbar { min-height:43px; padding:6px 20px; border-bottom:1px solid rgba(126,159,187,.11); background:#081522; }
    .sheet-tab { height:30px; color:#71879c; font-size:11px; }
    .sheet-tab:hover { color:#cce0ed; background:rgba(89,199,255,.055); }
    .sheet-tab.active { color:#84e0d5; border-color:rgba(119,226,207,.18); background:rgba(119,226,207,.07); box-shadow:none; }
    .sheet-add,.sheet-delete { width:29px; height:29px; border-color:rgba(130,162,190,.16); color:#8ba0b3; background:#0d1c2d; }
    .workspace { background-color:#06101c; background-image:linear-gradient(rgba(90,131,162,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(90,131,162,.045) 1px,transparent 1px),radial-gradient(circle at 50% 0%,rgba(40,132,174,.12),transparent 44%); background-size:32px 32px,32px 32px,100% 100%; }
    #stage { background:#fcfdfe; border:1px solid rgba(136,174,201,.2); box-shadow:0 28px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.025); }
    #board { background-color:#fcfdfe; }
    .status { color:#9fc8d7; background:rgba(10,27,43,.92); border:1px solid rgba(89,199,255,.12); box-shadow:0 6px 20px rgba(0,0,0,.3); }
    .chart-dialog { color:#dfeaf3; background:#0b1929; border:1px solid rgba(130,162,190,.14); box-shadow:0 28px 90px rgba(0,0,0,.6); }
    .chart-dialog::backdrop { background:rgba(2,8,14,.74); backdrop-filter:blur(5px); }
    .chart-field { color:#879db1; }
    .chart-field select,.chart-field input[type="text"],.chart-field input[type="number"],.dimension-inputs input { color:#dce8f1; border-color:rgba(130,162,190,.18); background:#102238; color-scheme:dark; }
    .series-picker { border-color:rgba(130,162,190,.15); background:rgba(4,14,24,.36); }
    .series-picker label { color:#a9bdcf; }
    .chart-dialog-actions button { color:#a9bdcf; border-color:rgba(130,162,190,.18); background:#102238; }
    .chart-dialog-actions button[value="save"] { color:#05121b; border-color:#65d5dc; background:linear-gradient(135deg,#78e1d1,#59c7ff); }
    @media (max-width:700px) { .toolbar{padding:0 10px}.brand{min-width:auto;margin-right:8px}.brand-copy small{display:none}.brand-copy strong{font-size:11px}.ribbon-tabs{min-height:52px} }