/* iDroo v4 — scoped adaptation of the saved original component CSS.
   Sources: docs/design-review-v4-idroo/assets/original-css/{index,
   base-components,BoardUI,ModularBoard,ToolbarFontMenu,PenPresets,BoardCard}.
   Values below use the original dark theme. App IDs and SVG engine are retained. */
:root {
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  color: #dfdfdf;
  background: #22232b;
  --header-height: 41px;
  --strip-height: 58px;
  --bar: #22232b;
  --active: #8ea3ba;
  --idroo-main: #8ea3ba;
  --idroo-blue: rgb(59.8097,165.8337,214.9903);
  --idroo-main-light: rgba(59.8097,165.8337,214.9903,.26);
  --idroo-main-lighter: rgba(59.8097,165.8337,214.9903,.14);
  --idroo-controls: rgba(0,0,0,.45);
  --idroo-panel: rgba(0,0,0,.8);
  --idroo-border: rgba(255,255,255,.15);
  --idroo-shadow: rgba(0,0,0,.4);
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
button, input { font: inherit; }
button { margin: 0; border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; }
button:disabled { color: rgba(255,255,255,.2); cursor: default; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--idroo-blue); outline-offset: 1px; }
input { min-width: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 5px; background: #000; color: #dfdfdf; }
svg { display: block; }
[hidden] { display: none !important; }
/* BoardUI .board-toolbars: original graphite and 40px bottom gradient. */
.topbar, .toolstrip { position: absolute; left: 0; right: 0; background: #22232b; padding: 5px; }
.topbar { top: 0; height: var(--header-height); padding-bottom: 0; display: flex; align-items: center; gap: 8px; z-index: 8; }
.back-button { height: 36px; display: flex; align-items: center; gap: 5px; padding: 0 8px; border-radius: 7px; color: var(--idroo-main); white-space: nowrap; }
.history-tools, .board-name, .topbar > .icon-button { background: var(--idroo-controls); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.05); border-radius: 7px; }
.history-tools { display: flex; flex-shrink: 0; padding: 3px; gap: 2px; }
.icon-button, .tool, .shape-toggle, .width-control, .stroke-control, .selection-more {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  flex-shrink: 0; height: 30px; min-width: 36px; padding: 0 3px; line-height: 30px;
  border: 0; border-radius: 4px; color: var(--idroo-main); white-space: nowrap;
  transition: background-color .3s ease,box-shadow .3s ease,color .3s ease;
}
.icon-button { width: 36px; }
.topbar > .icon-button { width: 42px; height: 36px; }
button:is(.tool,.icon-button,.shape-toggle,.width-control,.stroke-control,.selection-more,.back-button):hover:not(:disabled) { box-shadow: inset 0 0 0 100px var(--idroo-main-light); }
.tool.active, .shape-toggle.active, .width-control.active, .stroke-control.active { color: #000; background: var(--idroo-main); }
.board-name { height: 36px; flex: 1; min-width: 50px; position: relative; }
.board-name input { width: 100%; height: 100%; padding: 0 22px 0 10px; background: transparent; border: 0; font-weight: 600; font-size: 15px; }
#connection { position: absolute; width: 5px; height: 5px; border-radius: 50%; right: 10px; top: 16px; background: #8ea3ba; }
#connection[data-state=saved] { background: #2aa35d; }
#connection[data-state=saving] { background: #d39f11; }
#connection[data-state=offline] { background: #cf5868; }
.toolstrip { top: var(--header-height); min-height: 61px; padding-top: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; z-index: 7; background: linear-gradient(0deg,rgba(255,255,255,.12) 0%,transparent 40px),#22232b; }
/* base-components .toolbar-group .controls: 3px padding, 2px column gap,
   7px radius and original thin inset edges, without a new panel colour. */
.tool-group, .preset-row, .contour-row, .management > div, .zoom-bar {
  display: flex; align-items: center; gap: 2px; padding: 3px;
  background: linear-gradient(0deg,rgba(255,255,255,.12) 1px,transparent 1px),var(--idroo-controls);
  background-size: 100% 37px,100%; border: 0; border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.05);
}
.tool-group { flex-shrink: 0; margin-top: 20px; }
.tool { width: 36px; }
.tool-divider { width: 8px; height: 36px; align-self: stretch; margin: -3px 1px; background: rgba(255,255,255,.07); box-shadow: inset 1px 0 rgba(255,255,255,.05),inset -1px 0 rgba(255,255,255,.05); }
.shape-pair { display: flex; align-items: center; }
.shape-tool { border-radius: 4px 0 0 4px; }
.shape-tool img { width: 24px; height: 24px; display: block; object-fit: contain; }
.shape-toggle { width: 20px; min-width: 20px; border-radius: 0 4px 4px 0; }
.tool-properties { min-width: 0; display: flex; align-items: flex-end; gap: 8px; }
.tool-properties:empty { display: none; }
.property-block, .management { display: flex; flex-direction: column; flex-shrink: 0; align-items: flex-start; max-width: 100%; }
.group-label { display: block; width: 100%; height: 20px; padding: 0 3px; line-height: 20px; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #b3b3b3; text-shadow: 1px 1px rgba(0,0,0,.5); white-space: nowrap; }
.management { margin-left: auto; }
.management .group-label { text-align: center; }
.preset-row, .contour-row { min-height: 36px; }
/* BoardUI .preset-button: actual SVG sits on the original 16px checkerboard. */
.pen-preset { position: relative; display: block; width: 36px; height: 30px; flex-shrink: 0; padding: 0; overflow: hidden; border-radius: 4px; outline: 1px solid rgba(255,255,255,.2); outline-offset: -1px; background-color: #000; background-image: linear-gradient(45deg,rgba(255,255,255,.18) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.18) 75%),linear-gradient(45deg,rgba(255,255,255,.18) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.18) 75%),linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)); background-position: 0 0,8px 8px,0 0; background-size: 16px 16px; transition: all .1s ease; }
.pen-preset img, .pen-preset > svg { display: block; width: 36px; height: 30px; border-radius: inherit; }
.pen-preset:hover, .pen-preset.chosen { outline: 3px solid var(--idroo-main); outline-offset: 0; z-index: 1; }
/* BoardUI contour current .preset-button uses the original wider 50px slot. */
.current-color { display: inline-flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; width: 50px; height: 30px; padding: 0; overflow: hidden; border-radius: 4px; outline: 1px solid rgba(255,255,255,.2); outline-offset: -1px; background-color: #000; background-image: linear-gradient(45deg,rgba(255,255,255,.18) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.18) 75%),linear-gradient(45deg,rgba(255,255,255,.18) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.18) 75%),linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)); background-position: 0 0,8px 8px,0 0; background-size: 16px 16px; }
.current-color > svg, .current-color > img { display: block; width: 36px; height: 30px; }
.current-color:hover { outline: 3px solid var(--idroo-main); outline-offset: 0; z-index: 1; }
.current-color.symbol { width: 36px; background: transparent; outline: none; color: var(--idroo-main); overflow: visible; }
.current-color.symbol:hover { background: var(--idroo-main-light); }
.current-color.symbol .color-button { position: absolute; width: 22px; height: 4px; bottom: 2px; left: 7px; border-radius: 1px; background: var(--ink,#000); }
.current-color.symbol .color-preview { width: 100%; height: 100%; border-radius: inherit; }
#popover.color-menu { width: auto; padding: 3px; }
.color-menu .preset-row { padding: 0; background: transparent; box-shadow: none; }

.width-control { min-width: 54px; gap: 3px; font-weight: 600; }
.width-control .value-number { display: inline-block; width: 2ch; text-align: right; }
.stroke-control { width: 66px; }
.stroke-control svg { width: 60px; height: 30px; overflow: hidden; }
#stage { position: absolute; top: calc(var(--header-height) + var(--strip-height)); left: 0; right: 0; bottom: 0; overflow: hidden; background: #fff; }
#canvas { width: 100%; height: 100%; background: #fff; touch-action: none; user-select: none; outline: none; }
#canvas[data-tool=select] { cursor: grab; }
#canvas[data-tool=hand] { cursor: move; }
#canvas[data-tool=pen] { cursor: var(--pen-cursor,url('/assets/idroo/cursors/stylus_note.svg') 7 26,auto); }
#canvas[data-tool=eraser] { cursor: url('/assets/idroo/cursors/ink_eraser.svg') 13 13,auto; }
#canvas[data-tool=line], #canvas[data-tool=shape], #canvas[data-tool=laser] { cursor: crosshair; }
/* BoardUI navigation panel, base-components .panel and controls. */
.zoom-bar { position: absolute; right: 5px; bottom: 5px; padding: 5px; border-radius: 8px; background: #22232be6; box-shadow: 4px 4px 5px -2px var(--idroo-shadow),0 0 0 1px rgba(255,255,255,.2); backdrop-filter: blur(4px); }
.zoom-bar button { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 30px; border-radius: 4px; color: var(--idroo-main); font-size: 24px; line-height: 30px; }
.zoom-bar button:hover { background: var(--idroo-main-light); }
.zoom-bar #zoom-value { min-width: 57px; padding-left: 5px; font-size: 15px; font-weight: 600; color: #b3b3b3; }
/* ModularBoard .selection-toolbar; the drawing engine owns its node colours. */
.selection-properties { position: absolute; display: flex; align-items: flex-end; gap: 4px; padding: 4px; width: max-content; max-width: calc(100vw - 12px); border-radius: 10px; z-index: 20; background: linear-gradient(to bottom,rgba(0,0,0,.45),transparent 20px),linear-gradient(to top,rgba(255,255,255,.12),transparent 30px),rgba(0,0,0,.7); box-shadow: 0 5px 8px var(--idroo-shadow),0 2px 4px var(--idroo-shadow),0 0 0 1px rgba(255,255,255,.2),inset 0 0 0 1px rgba(0,0,0,.25); backdrop-filter: blur(4px); }
.selection-properties .contour-row { flex-wrap: wrap; }
.selection-properties .preset-row { background: transparent; box-shadow: none; padding: 0; }
.selection-more { margin-bottom: 3px; }
/* base-components .dropdown-content/.option-list. All menus scroll in viewport. */
#popover { position: absolute; z-index: 80; padding: 3px; max-width: calc(100vw - 12px); max-height: calc(100dvh - 12px); overflow-x: hidden; overflow-y: auto; color: #dfdfdf; border: 0; border-radius: 8px; background: var(--idroo-panel); box-shadow: 0 5px 16px var(--idroo-shadow),0 2px 8px var(--idroo-shadow),0 0 0 1px var(--idroo-border); backdrop-filter: blur(8px); user-select: none; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
#popover::-webkit-scrollbar { width: 12px; }
#popover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border: 3px solid transparent; border-left-width: 0; border-radius: 5px 8px 8px 5px/8px; background-clip: padding-box; }
#popover.shape-menu { width: 267px; padding: 4px 0 0; }
.shape-category { margin: 10px 0 0; padding: 4px 8px 0; line-height: 1.5; font-size: 13px; font-weight: 600; text-transform: uppercase; color: #b3b3b3; }
.shape-category:first-child { margin-top: 0; }
.shape-options { display: grid; grid-template-columns: repeat(4,60px); gap: 3px; padding: 3px; align-items: center; justify-items: center; justify-content: start; }
.shape-option { display: grid; place-items: center; padding: 5px; width: 60px; height: 60px; border: 0; border-radius: 6px; background-clip: padding-box; transition: background-color .15s; }
.shape-option img { width: 50px; height: 50px; object-fit: contain; pointer-events: none; user-select: none; }
.shape-option:hover, .shape-option.active { background-color: var(--idroo-main-light); }
.shape-options:hover .shape-option.active:not(:hover) { background-color: var(--idroo-main-lighter); }
/* ToolbarFontMenu: 70px sample, original full thickness (including 50px).
   The range follows the eleven original stops; geometry is app-owned. */
.width-layout { display: flex; align-items: stretch; width: 158px; min-height: 333px; }
.width-options { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.width-slider { appearance: none; -webkit-appearance: none; writing-mode: vertical-lr; direction: ltr; align-self: stretch; width: 28px; min-width: 28px; height: auto; margin: 15.5px 10px 31px 6px; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: none; accent-color: #dfdfdf; }
.width-slider::-webkit-slider-runnable-track { width: 6px; height: 100%; border-radius: 999px; background: rgba(255,255,255,.3); }
.width-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border: 0; border-radius: 50%; background: #dfdfdf; margin-left: -4px; }
.width-slider::-moz-range-track { width: 6px; height: 100%; border: 0; border-radius: 999px; background: rgba(255,255,255,.3); }
.width-slider::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #dfdfdf; }
.width-option { display: flex; align-items: center; flex-shrink: 0; gap: 0; width: 100%; min-height: 25px; padding: 2px 10px; border-radius: 6px; color: #dfdfdf; text-align: left; line-height: 21px; background-clip: padding-box; }
.width-option > span:first-child { box-sizing: content-box; display: inline-block; flex-shrink: 0; width: 2ch; padding-right: 7px; text-align: right; }
.width-option .stroke-box { display: inline-block; width: 70px; flex-shrink: 0; text-align: left; }
.width-option .stroke { display: block; width: 100%; margin: 2px 0; background: currentColor; }
.width-option + .width-option { border-top: 2px solid transparent; border-radius: 6px/8px 8px 6px 6px; }
.width-option.active, .width-option:hover, .stroke-option.active, .stroke-option:hover { background-color: var(--idroo-main-light); }
.width-option svg { width: 70px; min-height: 23px; overflow: visible; }
.stroke-option { display: grid; place-items: center; width: 80px; min-height: 40px; padding: 5px 10px; border-radius: 6px; color: #dfdfdf; }
.stroke-option + .stroke-option { border-top: 2px solid transparent; }
.stroke-option svg { width: 60px; height: 30px; overflow: hidden; }
.context-option { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 170px; padding: 5px 15px 5px 10px; border-radius: 5px; font-size: 15px; line-height: 25px; text-align: left; white-space: nowrap; color: #dfdfdf; }
.context-option:hover { background: var(--idroo-main-light); }
.context-option.danger { color: #cf5868; }
/* index .modal and BoardUI sharing fields adapted to existing modal markup. */
.modal-backdrop { position: fixed; inset: 0; z-index: 60; padding: 20px; background: #7f7f7f66; display: flex; align-items: center; justify-content: center; }
.modal { width: 580px; max-width: 100%; max-height: 100%; overflow: auto; position: relative; padding: 30px 40px; border: 0; border-radius: 15px; color: #dfdfdf; background: var(--idroo-panel); box-shadow: 4px 4px 10px -2px var(--idroo-shadow),inset 0 0 0 1px rgba(0,0,0,.5); backdrop-filter: blur(8px); }
.modal h2 { font-family: Acme,Oswald,sans-serif; font-size: 30px; font-weight: 500; line-height: 1.2; margin: 0 0 20px; color: #f7f7f7; }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.modal-heading h2 { min-width: 0; margin: 0; }

.modal label { display: block; margin: 16px 0 8px; font-size: 15px; font-weight: 600; }
.modal .link-row { display: flex; gap: 5px; align-items: center; }
.modal input { width: 100%; flex: 1; height: 36px; padding: 6px 10px; font-size: 15px; }
.modal button { display: inline-flex; justify-content: center; align-items: center; gap: 5px; min-height: 36px; padding: 5px 12px; border-radius: 5px; background: var(--idroo-blue); color: #fff; font-weight: 600; white-space: nowrap; }
.modal button:hover { box-shadow: inset 0 0 0 100px rgba(255,255,255,.18); }
.modal .modal-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; min-width: 36px; height: 30px; min-height: 30px; flex-shrink: 0; padding: 0 3px; border: 0; border-radius: 4px; background: transparent; color: var(--idroo-main); box-shadow: none; }
.modal .modal-close:hover { background: var(--idroo-main-light); box-shadow: none; }

.modal .actions { display: flex; justify-content: flex-end; margin-top: 25px; }
.modal p { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: #b3b3b3; }
.modal .error { color: #cf5868; }
#notice { position: fixed; z-index: 90; left: 50%; bottom: 22px; transform: translateX(-50%); padding: 10px 16px; width: max-content; max-width: min(550px,90vw); border-radius: 8px; background: var(--idroo-panel); color: #dfdfdf; box-shadow: 0 5px 16px var(--idroo-shadow),0 0 0 1px var(--idroo-border); backdrop-filter: blur(8px); font-size: 14px; line-height: 1.5; }
#view-note { position: absolute; top: 10px; left: 10px; padding: 6px 10px; border-radius: 5px; background: var(--idroo-panel); color: #dfdfdf; font-size: 13px; }
#drop-target { position: absolute; inset: 10px; z-index: 5; display: grid; place-items: center; color: #0b79ac; background: #e3e8eeee; border: 2px dashed #8ea3ba; font-size: 24px; pointer-events: none; }
/* index headings, base-components grid-card and original BoardCard details. */
.dashboard-bar { display: flex; align-items: center; height: 52px; padding: 0 30px; background: rgba(0,0,0,.45); box-shadow: 0 0 0 1px rgba(255,255,255,.1),0 0 5px var(--idroo-shadow),0 0 10px rgba(0,0,0,.2); }
.dashboard-tab { padding: 4px 12px; border-radius: 4px; color: #000; background: var(--idroo-main); font-weight: 600; }
.boards-main { max-width: 1400px; height: calc(100dvh - 52px); margin: 0 auto; padding: 30px; overflow: auto; }
.boards-main h1 { font-family: Acme,Oswald,sans-serif; font-size: 40px; line-height: 1.2; font-weight: 500; color: var(--idroo-blue); margin: 0 0 20px; }
.new-board { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 3px; margin: 0 0 20px; border-radius: 4px; font-weight: 600; color: #000; background: var(--idroo-blue); }
.new-board:hover { box-shadow: inset 0 0 0 100px rgba(255,255,255,.18); }
.recent-group { margin-bottom: 30px; }
.recent-group h2 { font-family: Acme,Oswald,sans-serif; font-size: 30px; font-weight: 500; line-height: 1.2; color: #f7f7f7; margin: 0 0 20px; }
.board-cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(255px,1fr)); gap: 20px; }
.board-card { display: block; min-width: 0; padding: 0; color: #dfdfdf; text-align: left; }
.board-thumbnail { display: flex; position: relative; width: 100%; aspect-ratio: 1.618; min-height: 155px; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 1px 2px 8px rgba(255,255,255,.1); transition: all .15s; }
.board-thumbnail::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); pointer-events: none; transition: box-shadow .15s; }
.board-card:hover .board-thumbnail::after { box-shadow: 0 0 0 4px rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.2); }
.board-thumbnail svg { width: 100%; height: 100%; filter: saturate(.88) brightness(.72); }
.board-thumbnail::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(8,11,16,.18); pointer-events: none; }
.board-card-title { display: block; padding: 7px 12px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.board-empty, .loading-dot { color: #b3b3b3; font-size: 15px; line-height: 1.5; margin-top: 15px; }
.gallery-loading { opacity: .6; }
/* The original compact toolbar uses 26px controls. Wrapping keeps 390px safe. */
@media (max-width: 1024px) {
  .toolstrip { gap: 6px; }
  .boards-main { padding: 25px; }
}
@media (max-width: 768px) {
  :root { --header-height: 42px; }
  .topbar { gap: 5px; }
  .back-button { padding: 0 5px; font-size: 13px; }
  .history-tools .icon-button { width: 26px; min-width: 26px; height: 26px; }
  .board-name, .topbar > .icon-button { height: 32px; }
  .board-name input { font-size: 13px; padding-left: 6px; }
  .topbar > .icon-button { width: 32px; min-width: 32px; }
  #connection { top: 14px; right: 7px; }
  .toolstrip { gap: 6px; padding: 4px; }
  .tool { width: 31.2px; min-width: 31.2px; height: 26px; line-height: 26px; }
  .shape-toggle { height: 26px; width: 18px; min-width: 18px; }
  .tool-divider { height: 32px; width: 6px; }
  .tool-properties { flex-wrap: wrap; gap: 6px; }
  .management { order: 2; }
  .tool-properties { order: 3; }
  .zoom-bar button { height: 26px; min-width: 31px; }
  .selection-properties .pen-preset, .selection-properties .pen-preset > svg, .selection-properties .pen-preset img { width: 31px; }
  .selection-properties .width-control { min-width: 46px; }
  .selection-properties .stroke-control { width: 60px; }
  .selection-properties { gap: 2px; }
  .modal-backdrop { padding: 10px; }
  .modal { padding: 20px 25px; }
  .boards-main { padding: 24px 18px; }
  .dashboard-bar { padding: 0 18px; }
}
@media (max-width: 430px) {
  .board-name { min-width: 40px; }
  .history-tools { gap: 0; }
  .tool-group { flex-shrink: 1; }
  .management { margin-left: auto; }
  .management .tool { width: 26px; min-width: 26px; }
  .management .group-label { font-size: 9px; letter-spacing: 0; padding: 0; }
  .board-cards { grid-template-columns: minmax(0,1fr); }
  .modal { padding: 20px; }
  .modal .link-row { flex-wrap: wrap; }
  .modal .link-row input { flex-basis: 100%; }
  .selection-properties .preset-row { max-width: 128px; }
  .selection-properties .contour-row { gap: 0; }
  .selection-properties .stroke-control { width: 51px; min-width: 51px; }
  .selection-properties .stroke-control svg { width: 45px; }
}
/* Original Material Symbols font: ligatures must outrank global font resets.
   Asset font-face is supplied by /assets/idroo/native-font.css. */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: 400 !important; font-style: normal !important; font-size: 24px;
  display: inline-block; width: 1em; height: 1em; overflow: hidden;
  text-transform: none !important; letter-spacing: normal !important;
  white-space: nowrap !important; word-wrap: normal;
  direction: ltr; -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 1, 'opsz' 24;
  font-feature-settings: 'liga' !important; -webkit-font-feature-settings: 'liga' !important;
  line-height: 1 !important;
}