.app-shell { max-width: 1600px; }
.tool-interface-card { overflow: hidden; box-shadow: 0 .6rem 1.75rem rgba(15, 23, 42, .08); }
.utility-bar, .properties-bar { background: #fff; }
.utility-bar { min-height: 3rem; padding: .4rem .65rem !important; gap: .2rem !important; }
.utility-bar .btn { min-height: 2.1rem; padding-block: .3rem; }
.utility-bar .btn-link { padding-inline: .55rem; font-weight: 600; }
.utility-bar .utility-link { color: #172033; }
.utility-bar .utility-link:hover, .utility-bar .utility-link:focus-visible { color: #000; background: #f1f3f5; }
.utility-bar .utility-link:disabled { color: #9aa3ae; }
.project-file-note { max-width: 15rem; white-space: normal; }
.drawing-toolbar { position: absolute; z-index: 8; top: .65rem; left: .65rem; display: flex; flex-direction: column; gap: .15rem; padding: .3rem; background: rgba(255,255,255,.97); border: 1px solid rgba(15,23,42,.1); border-radius: .6rem; box-shadow: 0 .3rem .9rem rgba(15,23,42,.14); }
.tool-button { display: grid; width: 2.45rem; height: 2.45rem; padding: 0; place-items: center; color: #334155; font-size: 1.2rem; line-height: 1; background: transparent; border: 0; border-radius: .4rem; }
.tool-button:hover { color: var(--bs-primary); background: #eef4ff; }
.tool-button:focus-visible { outline: 3px solid rgba(var(--bs-primary-rgb), .35); outline-offset: 1px; }
.tool-button.active { color: #fff; background: var(--bs-primary); box-shadow: 0 .15rem .35rem rgba(var(--bs-primary-rgb), .28); }
.whiteboard-tool-icon { display: inline-grid; width: 1.15rem; height: 1.15rem; margin: 0; place-items: center; color: inherit; background: transparent; border-radius: 0; }
.whiteboard-tool-icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.drawing-toolbar .dropdown.dropend .no-caret::after { display: none !important; margin: 0 !important; border: 0 !important; }
.shape-menu { min-width: 13rem; margin-left: .55rem !important; }
.shape-option { display: flex; gap: .75rem; align-items: center; }
.shape-option span { display: inline-grid; width: 1.3rem; place-items: center; font-size: 1.2rem; }
.properties-bar { min-height: 3.6rem; gap: .75rem; padding: .45rem .65rem; }
.property-control { display: flex; gap: .4rem; align-items: center; min-width: 0; }
.property-control label, .property-control > span { margin: 0; color: #475569; font-weight: 600; }
.properties-bar .form-select { width: auto; min-width: 4.25rem; height: 2.15rem; padding-block: .2rem; }
.properties-bar .form-control-color { flex: 0 0 1.8rem; width: 1.8rem; min-width: 1.8rem; height: 1.8rem; min-height: 1.8rem; padding: .16rem; border-color: #cbd3dc; border-radius: .3rem; }
.text-style-control { gap: .2rem; }
.compact-icon-button { width: 2.15rem; height: 2.15rem; color: #475569; font-weight: 700; background: #fff; border: 1px solid #d6dce3; border-radius: .4rem; }
.compact-icon-button[aria-pressed="true"] { color: #fff; background: var(--bs-primary); border-color: var(--bs-primary); }
.background-controls { display: flex; gap: .4rem; align-items: center; padding-left: .75rem; border-left: 1px solid #e2e8f0; }
.background-swatch { width: 1.55rem; height: 1.55rem; padding: 0; background: var(--swatch); border: 2px solid #b7c0ca; border-radius: .28rem; }
.background-swatch.selected { outline: 2px solid rgba(var(--bs-primary-rgb), .3); outline-offset: 1px; border-color: var(--bs-primary); }
.selected-actions { gap: .1rem; }
.object-controls { gap: .45rem; }
.history-controls { gap: .1rem; padding-right: .45rem; border-right: 1px solid #e2e8f0; }
.action-button { min-height: 2rem; padding: .25rem .45rem; color: #475569; font-size: .82rem; font-weight: 600; background: transparent; border: 0; border-radius: .35rem; }
.action-button:hover:not(:disabled) { color: var(--bs-primary); background: #eef4ff; }
.action-button:focus-visible { outline: 3px solid rgba(var(--bs-primary-rgb), .3); outline-offset: 1px; }
.action-button:disabled { color: #a0a8b2; }
.action-danger:not(:disabled) { color: var(--bs-danger); }
.canvas-viewport { position: relative; height: min(68vh, 760px); min-height: 420px; overflow: hidden; background: #dce1e7; outline-offset: -3px; touch-action: none; }
.canvas-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-shadow: 0 .25rem 1rem rgba(0,0,0,.18); }
.canvas-container { background: #fff; }
.empty-hint { position: absolute; z-index: 2; top: 1.25rem; left: 50%; transform: translateX(-50%); padding: .45rem .8rem; color: #495057; background: rgba(255,255,255,.9); border-radius: 2rem; pointer-events: none; transition: opacity .2s; }
.empty-hint.hidden { opacity: 0; }
.zoom-controls { position: absolute; z-index: 5; right: .75rem; bottom: .75rem; display: flex; align-items: center; gap: .25rem; padding: .25rem; background: rgba(255,255,255,.95); border-radius: .5rem; }
.zoom-controls output { min-width: 3.5rem; text-align: center; font-size: .875rem; }
.confirmation-dialog { max-width: 31rem; padding: 1.5rem; border: 0; border-radius: .75rem; box-shadow: 0 1rem 3rem rgba(0,0,0,.3); }
.confirmation-dialog::backdrop { background: rgba(15,23,42,.55); }
#whiteboard-app.is-maximized { position: fixed; z-index: 1080; inset: 0; width: 100vw; height: 100vh; border-radius: 0; }
#whiteboard-app.is-maximized .canvas-viewport { height: calc(100vh - 106px); min-height: 260px; }
#whiteboard-app:fullscreen { background: #fff; }
#whiteboard-app:fullscreen .canvas-viewport { height: calc(100vh - 106px); min-height: 260px; }
.supporting-section { position: relative; z-index: 0; max-width: 960px; padding: 4.5rem 0; margin: 0 auto; }
.supporting-section::before { position: absolute; z-index: -1; inset: 0 auto 0 50%; width: 100vw; background: var(--ojt-page); content: ""; transform: translateX(-50%); }
.supporting-section:nth-child(odd)::before { background: #fff; border-block: 1px solid var(--ojt-border); }
@media (max-width: 767.98px) {
  #whiteboard-page { padding-inline: 0 !important; }
  .tool-page-heading, .supporting-content { padding-inline: 1rem; }
  .canvas-viewport { height: 58vh; min-height: 360px; }
  .utility-bar { gap: .05rem !important; }
  .utility-bar .btn-link { padding-inline: .4rem; }
  .properties-bar { max-height: 8.5rem; gap: .5rem .65rem; overflow-y: auto; }
  .background-controls { order: 2; padding-left: 0; border-left: 0; }
  .object-controls { order: 3; width: 100%; margin-left: 0 !important; padding-top: .35rem; border-top: 1px solid #e9ecef; }
  .supporting-section { padding-block: 3.5rem; }
}