.app-shell.draw-active { grid-template-columns: 3.5rem minmax(0, 1fr); }
.app-shell.draw-active .sidebar,
.app-shell.draw-active .context-panel { display: none; }
.app-shell.draw-active .workspace { grid-column: 2; }

.draw-view:not([hidden]) {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .7rem;
  overflow: hidden;
  background: radial-gradient(ellipse at 55% -24%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 42%), var(--bg);
  padding: clamp(.65rem, 1.6vw, 1.15rem);
}
.draw-head { display: flex; min-height: 2.8rem; flex: 0 0 auto; align-items: center; gap: .9rem; }
.draw-brand { display: flex; min-width: 0; align-items: center; gap: .58rem; }
.draw-brand-mark { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in srgb,var(--accent) 46%,var(--line)); border-radius: .65rem; background: linear-gradient(145deg,color-mix(in srgb,var(--accent) 19%,var(--panel)),var(--panel)); color: var(--accent); font: 700 .92rem Georgia,serif; box-shadow: inset 0 1px #ffffff26,0 3px 10px #0002; }
.draw-brand .eyebrow { color: var(--accent); font-size: .52rem; }
.draw-brand h1 { margin: .08rem 0 0; font: 580 1.12rem/1.05 Georgia,"Times New Roman",serif; letter-spacing: -.025em; }
.draw-head-note { margin: 0 auto 0 0; color: var(--muted); font-size: .68rem; }
.draw-workspace-picker { display: flex; align-items: center; gap: .42rem; color: var(--muted); font-size: .62rem; font-weight: 700; }
.draw-workspace-picker select,.draw-background-control select { min-height: 2.1rem; min-width: 7rem; max-width: 12rem; border: 1px solid var(--line); border-radius: .58rem; outline: none; background: var(--panel); padding: 0 .62rem; color: var(--text); font: 650 .67rem var(--font-ui,Inter,system-ui,sans-serif); }
.draw-workspace-picker select:focus-visible,.draw-background-control select:focus-visible,.draw-title-control input:focus-visible,.draw-view button:focus-visible,.draw-view input:focus-visible,.draw-view select:focus-visible { outline: 2px solid color-mix(in srgb,var(--accent) 75%,white); outline-offset: 2px; }
.draw-new-button { display: inline-flex; min-height: 2.25rem; flex: 0 0 auto; align-items: center; justify-content: center; gap: .28rem; border: 1px solid color-mix(in srgb,var(--accent) 52%,var(--line)); border-radius: .64rem; background: linear-gradient(165deg,color-mix(in srgb,var(--accent) 20%,var(--panel)),var(--panel)); padding: 0 .75rem; color: var(--text); font: 720 .68rem var(--font-ui,Inter,system-ui,sans-serif); box-shadow: inset 0 1px #ffffff17; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.draw-new-button:hover { border-color: var(--accent); background: color-mix(in srgb,var(--accent) 16%,var(--panel)); transform: translateY(-1px); }
.draw-new-button span { color: var(--accent); font-size: 1rem; }
.draw-layout { display: grid; min-height: 0; flex: 1 1 auto; grid-template-columns: minmax(11.2rem, 14rem) minmax(0,1fr); gap: .68rem; }
.draw-library-panel,.draw-main { min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: .82rem; background: color-mix(in srgb,var(--panel) 96%,transparent); }
.draw-library-panel { display: flex; flex-direction: column; }
.draw-library-panel > header { display: flex; min-height: 3.65rem; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: .5rem; border-bottom: 1px solid var(--line); padding: .55rem .7rem; }
.draw-library-panel .eyebrow { color: var(--accent); font-size: .49rem; }
.draw-library-panel h2 { margin: .15rem 0 0; font: 560 .94rem Georgia,serif; }
.draw-library-list { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; gap: .4rem; overflow: auto; padding: .5rem; overscroll-behavior: contain; scrollbar-width: thin; }
.draw-library-card { display: grid; min-width: 0; grid-template-columns: 4.5rem minmax(0,1fr); align-items: center; gap: .58rem; border: 1px solid transparent; border-radius: .62rem; background: transparent; padding: .42rem; color: var(--text); text-align: left; transition: background .14s ease,border-color .14s ease; }
.draw-library-card:hover { border-color: var(--line); background: var(--panel2); }
.draw-library-card[aria-current="true"] { border-color: color-mix(in srgb,var(--accent) 42%,var(--line)); background: color-mix(in srgb,var(--accent) 9%,var(--panel2)); }
.draw-thumbnail { display: block; width: 4.5rem; height: 2.88rem; border: 1px solid var(--line); border-radius: .42rem; background: #111019; }
.draw-library-copy { display: grid; min-width: 0; gap: .22rem; }
.draw-library-copy strong { overflow: hidden; font-size: .65rem; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.draw-library-copy small { color: var(--muted); font-size: .55rem; }
.draw-main { display: flex; flex-direction: column; gap: .45rem; padding: .48rem; }
.draw-document-bar { display: flex; min-height: 2.4rem; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: .55rem; }
.draw-title-control { min-width: 0; flex: 1 1 auto; }
.draw-title-control input { width: min(100%, 26rem); min-height: 2rem; border: 1px solid transparent; border-radius: .5rem; outline: none; background: transparent; padding: .25rem .45rem; color: var(--text); font: 550 .91rem Georgia,"Times New Roman",serif; }
.draw-title-control input:hover { border-color: var(--line); background: var(--panel2); }
.draw-title-control input:focus { border-color: color-mix(in srgb,var(--accent) 45%,var(--line)); background: var(--panel2); }
.draw-title-control input:disabled { opacity: .5; }
.draw-management { display: flex; flex: 0 0 auto; align-items: center; gap: .15rem; }
.draw-toolbar { display: flex; min-height: 2.9rem; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: .4rem; border: 1px solid var(--line); border-radius: .66rem; background: color-mix(in srgb,var(--panel2) 70%,var(--panel)); padding: .32rem .38rem; }
.draw-tool-set,.draw-color-controls,.draw-actions-group { display: flex; align-items: center; gap: .2rem; }
.draw-tool-button,.draw-icon-button,.draw-quiet-button,.draw-color-custom { display: inline-flex; min-height: 2.12rem; align-items: center; justify-content: center; gap: .28rem; border: 1px solid transparent; border-radius: .48rem; background: transparent; padding: 0 .48rem; color: var(--muted); font: 680 .61rem var(--font-ui,Inter,system-ui,sans-serif); white-space: nowrap; transition: color .14s ease,background .14s ease,border-color .14s ease,transform .14s ease; }
.draw-tool-button svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.draw-tool-button:hover,.draw-icon-button:hover,.draw-quiet-button:hover,.draw-color-custom:hover { border-color: var(--line2); background: var(--panel); color: var(--text); }
.draw-tool-button.active { border-color: color-mix(in srgb,var(--accent) 40%,var(--line)); background: color-mix(in srgb,var(--accent) 15%,var(--panel)); color: var(--accent); box-shadow: inset 0 1px #ffffff16; }
.draw-icon-button { min-width: 2.12rem; padding: 0; font-size: 1.15rem; line-height: 1; }
.draw-icon-button:disabled,.draw-quiet-button:disabled,.draw-tool-button:disabled { cursor: not-allowed; opacity: .4; }
.draw-quiet-button { min-height: 1.92rem; padding-inline: .48rem; }
.draw-danger-button { color: color-mix(in srgb,var(--danger) 76%,var(--muted)); }
.draw-danger-button:hover { border-color: color-mix(in srgb,var(--danger) 30%,var(--line)); background: color-mix(in srgb,var(--danger) 9%,var(--panel)); color: var(--danger); }
.draw-control-divider { width: 1px; height: 1.45rem; flex: 0 0 auto; background: var(--line); }
.draw-color-controls { gap: .18rem; }
.draw-palette { display: flex; align-items: center; gap: .19rem; }
.draw-swatch { width: 1.12rem; height: 1.12rem; flex: 0 0 auto; border: 2px solid color-mix(in srgb,var(--draw-color) 38%,var(--line)); border-radius: 50%; background: var(--draw-color); box-shadow: inset 0 1px #ffffff32; }
.draw-swatch:hover { transform: scale(1.12); }
.draw-swatch[aria-pressed="true"] { outline: 2px solid var(--draw-color); outline-offset: 2px; }
.draw-color-custom { position: relative; width: 1.75rem; min-height: 1.75rem; padding: 0; border: 1px dashed var(--line2); border-radius: 50%; font-size: .9rem; }
.draw-color-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.draw-size-control { display: grid; min-width: 5.7rem; flex: 1 1 5.7rem; gap: .12rem; color: var(--muted); font-size: .53rem; font-weight: 740; }
.draw-size-control span { display: flex; align-items: center; justify-content: space-between; }
.draw-size-control output { color: var(--text); font-variant-numeric: tabular-nums; }
.draw-size-control input { width: 100%; height: .75rem; accent-color: var(--accent); }
.draw-background-control select { min-width: 4.25rem; min-height: 1.92rem; padding-inline: .4rem; font-size: .59rem; }
.draw-actions-group { margin-left: auto; }
.draw-stage { position: relative; min-height: 0; flex: 1 1 auto; overflow: hidden; border: 1px solid var(--line); border-radius: .66rem; background-color: #111019; overscroll-behavior: contain; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.draw-stage.draw-background-dots { background-image: radial-gradient(#b7abc723 .8px,transparent .9px); background-size: 22px 22px; }
.draw-stage.draw-background-grid { background-image: linear-gradient(#b7abc714 1px,transparent 1px),linear-gradient(90deg,#b7abc714 1px,transparent 1px); background-size: 28px 28px; }
.draw-stage.draw-background-plain { background-image: none; }
#drawSurface { position: absolute; inset: 0; display: block; width: 100%; height: 100%; outline: none; touch-action: none; overscroll-behavior: contain; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: crosshair; }
.draw-stage[data-tool="pan"] #drawSurface { cursor: grab; }
.draw-stage[data-tool="pan"] #drawSurface:active { cursor: grabbing; }
.draw-keyboard-cursor { position: absolute; z-index: 2; display: none; width: 1.15rem; height: 1.15rem; translate: -50% -50%; border: 1px solid #fff; border-radius: 50%; background: color-mix(in srgb, var(--accent) 20%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 72%, transparent), 0 0 13px color-mix(in srgb, var(--accent) 65%, transparent); pointer-events: none; }
.draw-keyboard-cursor::after { position: absolute; inset: .36rem; border-radius: 50%; background: var(--accent); content: ""; }
.draw-stage.has-keyboard-cursor .draw-keyboard-cursor { display: block; }
.draw-stage:has(#drawSurface:focus-visible) { border-color: color-mix(in srgb, var(--accent) 64%, var(--line2)); }
.draw-keyboard-help { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.draw-canvas-status { position: absolute; right: .5rem; bottom: .48rem; z-index: 1; border: 1px solid #ffffff15; border-radius: 999px; background: #17141dcc; padding: .25rem .48rem; color: #b7afc4; font-size: .52rem; pointer-events: none; backdrop-filter: blur(8px); }
.draw-empty-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .45rem; padding: 1rem; text-align: center; }
.draw-empty-state[hidden] { display: none; }
.draw-empty-mark { display: grid; width: 3.2rem; height: 3.2rem; place-items: center; border: 1px solid color-mix(in srgb,var(--accent) 34%,var(--line)); border-radius: 1.1rem; background: color-mix(in srgb,var(--accent) 10%,var(--panel)); color: var(--accent); font-size: 1.45rem; }
.draw-empty-state strong { margin-top: .15rem; color: var(--text); font: 550 1rem Georgia,serif; }
.draw-empty-state p { max-width: 21rem; margin: 0 0 .3rem; color: var(--muted); font-size: .65rem; line-height: 1.5; }
.draw-view [hidden] { display: none !important; }

@media (max-width: 900px) {
  .draw-layout { grid-template-columns: minmax(9.5rem, 11.5rem) minmax(0,1fr); }
  .draw-head-note { display: none; }
  .draw-toolbar { gap: .3rem; }
  .draw-tool-button { padding-inline: .4rem; }
  .draw-palette { gap: .14rem; }
  .draw-swatch { width: 1rem; height: 1rem; }
  .draw-actions-group { gap: .08rem; }
}

@media (max-width: 700px) {
  .app-shell.draw-active { grid-template-columns: 3rem minmax(0,1fr); }
  .draw-view:not([hidden]) { gap: .38rem; padding: .42rem; }
  .draw-head { min-height: 2.25rem; gap: .42rem; }
  .draw-brand { gap: .38rem; }
  .draw-brand-mark { width: 1.65rem; height: 1.65rem; border-radius: .52rem; font-size: .77rem; }
  .draw-brand .eyebrow { display: none; }
  .draw-brand h1 { font-size: .95rem; }
  .draw-workspace-picker { gap: .25rem; margin-left: auto; font-size: .52rem; }
  .draw-workspace-picker select { width: min(31vw, 8.5rem); min-width: 0; max-width: none; min-height: 1.9rem; padding-inline: .38rem; font-size: .59rem; }
  .draw-head > .draw-new-button { min-height: 1.92rem; padding-inline: .48rem; font-size: .58rem; }
  .draw-layout { display: flex; flex: 1 1 auto; }
  .draw-library-panel { display: none; }
  .draw-main { gap: .25rem; border: 0; border-radius: .45rem; background: transparent; padding: 0; }
  .draw-document-bar { min-height: 1.9rem; }
  .draw-title-control input { min-height: 1.75rem; width: min(100%, 16rem); padding-inline: .35rem; font-size: .8rem; }
  .draw-management { gap: 0; }
  .draw-management .draw-quiet-button { min-height: 1.7rem; padding-inline: .35rem; font-size: .55rem; }
  .draw-toolbar { gap: .22rem; border-radius: .5rem; padding: .22rem; }
  .draw-tool-set { flex: 0 0 auto; gap: .08rem; }
  .draw-tool-button { min-height: 1.88rem; gap: .18rem; padding-inline: .31rem; font-size: .53rem; }
  .draw-tool-button svg { width: .86rem; height: .86rem; }
  .draw-control-divider { height: 1.2rem; }
  .draw-color-controls { gap: .08rem; }
  .draw-palette { gap: .13rem; }
  .draw-swatch { width: .82rem; height: .82rem; border-width: 1px; }
  .draw-color-custom { width: 1.45rem; min-height: 1.45rem; }
  .draw-size-control { min-width: 4.2rem; flex: 1 1 4.2rem; font-size: .49rem; }
  .draw-size-control input { height: .62rem; }
  .draw-background-control select { min-width: 3.6rem; min-height: 1.72rem; font-size: .54rem; }
  .draw-actions-group { width: 100%; justify-content: flex-end; }
  .draw-icon-button { min-height: 1.72rem; min-width: 1.72rem; font-size: 1rem; }
  .draw-quiet-button { min-height: 1.72rem; padding-inline: .4rem; font-size: .54rem; }
  .draw-stage { min-height: 0; flex: 1 1 auto; border-radius: .55rem; }
  .draw-canvas-status { right: .35rem; bottom: .35rem; font-size: .48rem; }
}

@media (max-width: 390px) {
  .draw-head > .draw-new-button { max-width: 2rem; overflow: hidden; gap: 0; white-space: nowrap; }
  .draw-head > .draw-new-button span { font-size: 1.15rem; }
  .draw-head > .draw-new-button { font-size: 0; }
  .draw-toolbar { row-gap: .2rem; }
  .draw-tool-button span { display: none; }
  .draw-tool-button { width: 1.8rem; padding: 0; }
  .draw-size-control { min-width: 3.8rem; }
  .draw-background-control select { min-width: 3.3rem; }
}

@media (max-height: 560px) and (max-width: 700px) {
  .draw-view:not([hidden]) { gap: .22rem; padding-block: .25rem; }
  .draw-head { min-height: 1.8rem; }
  .draw-brand-mark { width: 1.4rem; height: 1.4rem; }
  .draw-toolbar { padding: .16rem; }
  .draw-tool-button { min-height: 1.6rem; }
  .draw-actions-group { width: auto; margin-left: auto; }
}

@media (max-height: 560px) and (min-width: 701px) {
  .draw-view:not([hidden]) { gap: .2rem; padding-block: .2rem; }
  .draw-head { min-height: 1.65rem; }
  .draw-brand-mark { width: 1.4rem; height: 1.4rem; }
  .draw-brand .eyebrow { display: none; }
  .draw-brand h1 { font-size: .88rem; }
  .draw-workspace-picker select,.draw-head > .draw-new-button { min-height: 1.7rem; }
  .draw-layout { grid-template-columns: minmax(0,1fr); }
  .draw-library-panel { display: none; }
  .draw-main { gap: .15rem; padding: .24rem; }
  .draw-document-bar { min-height: 1.55rem; }
  .draw-title-control input { min-height: 1.45rem; font-size: .8rem; }
  .draw-management .draw-quiet-button { min-height: 1.5rem; }
  .draw-toolbar { min-height: 2rem; flex-wrap: nowrap; gap: .08rem; overflow-x: auto; padding: .16rem .25rem; scrollbar-width: none; }
  .draw-toolbar::-webkit-scrollbar { display: none; }
  .draw-tool-set,.draw-color-controls,.draw-actions-group { flex: 0 0 auto; }
  .draw-size-control { min-width: 4.7rem; flex: 0 0 4.7rem; }
  .draw-actions-group { width: auto; margin-left: auto; }
  .draw-stage { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .draw-view *, .draw-view *::before, .draw-view *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}