.widget-picker { position:fixed; width:350px; padding:12px; border-radius:14px; }
.widget-picker-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.widget-choice {
  display:flex; align-items:center; gap:8px; min-width:0; min-height:46px; padding:7px;
  border:1px solid var(--line); border-radius:9px; color:var(--ink); background:white;
  text-align:left; font-size:12px; font-weight:600; cursor:grab; touch-action:none; user-select:none;
}
.widget-choice:hover { border-color:#b6acf4; background:var(--accent-soft); }
.widget-choice:active, .board-widget-handle:active { cursor:grabbing; }
.widget-choice img, .board-widget-handle img { width:22px; height:22px; flex:none; }
.widget-drag-preview {
  position:fixed; z-index:60; transform:translate(-50%,-50%); pointer-events:none;
  padding:9px 12px; border:1px dashed var(--accent); border-radius:10px;
  color:var(--accent); background:var(--accent-soft); font-size:13px;
}
.board-widgets { position:absolute; inset:0 0 30px; z-index:6; pointer-events:none; }
body[data-bar=top] .board-widgets { inset:30px 0 0; }
.board-widget {
  --widget-scale:1;
  position:absolute; pointer-events:auto; display:flex; flex-direction:column; min-height:0;
  width:min(calc(var(--widget-width) * var(--widget-scale)), calc(100% - 16px)); max-height:calc(100% - 16px);
  overflow:hidden; border:1px solid #cdd4e3; border-radius:12px;
  background:var(--surface); box-shadow:0 3px 16px #2632472b; cursor:default;
}
.board-widget header {
  display:flex; align-items:center; gap:4px; flex:none; min-height:35px;
  padding:2px 4px 2px 7px; border-bottom:1px solid var(--line); background:#f6f7fc;
}
.board-widget-handle {
  display:flex; align-items:center; flex:1; gap:6px; min-width:0; padding:4px;
  border:0; border-radius:5px; color:var(--ink); background:transparent;
  font-size:calc(11px * var(--widget-scale)); font-weight:700; text-align:left; cursor:grab; touch-action:none; user-select:none;
}
.board-widget-handle img { width:18px; height:18px; }
.board-widget-handle svg { width:15px; height:15px; margin-left:auto; flex:none; color:var(--muted); }
.board-widget header .icon-button { width:30px; min-width:30px; height:30px; padding:6px; border-radius:6px; }
.board-widget header .icon-button svg { width:16px; height:16px; }
.board-widget footer { display:flex; justify-content:flex-end; flex:none; }
.board-widget-resize {
  display:grid; place-items:center; width:28px; height:26px; padding:4px;
  border:0; border-radius:7px 0 0 0; color:var(--muted); background:transparent;
  cursor:nwse-resize; touch-action:none; user-select:none;
}
.board-widget-resize:hover, .board-widget-resize:active { color:var(--accent); background:var(--accent-soft); }
.board-widget-resize:focus-visible { outline-offset:-3px; }
.board-widget-resize svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.board-widget-content {
  display:grid; gap:calc(8px * var(--widget-scale)); min-height:0; overflow:auto;
  padding:calc(8px * var(--widget-scale)) calc(10px * var(--widget-scale)) 0;
  color:var(--ink); font-size:calc(12px * var(--widget-scale)); touch-action:pan-y;
}
.widget-fields { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:5px; }
.widget-fields label { display:inline-flex; align-items:center; gap:4px; }
.widget-fields :is(input,select,button) {
  min-height:max(30px, calc(30px * var(--widget-scale))); min-width:0; padding:.3em .5em; border:1px solid var(--line); border-radius:6px;
  color:var(--ink); background:white; font:inherit;
}
.widget-fields input { width:5.1em; }
.widget-fields .widget-primary { color:white; background:var(--accent); border-color:var(--accent); font-weight:700; }
.widget-fields button:disabled { opacity:.5; cursor:default; }
.widget-fields .widget-reset:hover { background:var(--accent-soft); }
.widget-time {
  display:block; text-align:center; color:var(--ink);
  font:700 calc(29px * var(--widget-scale))/1.25 'Chabe Sans', Arial, sans-serif; font-variant-numeric:tabular-nums;
}
.widget-status { text-align:center; color:var(--muted); font-size:calc(11px * var(--widget-scale)); }
.widget-status:empty { display:none; }
.widget-clock { display:flex; align-items:center; justify-content:center; gap:8px; }
.widget-clock svg { width:calc(49px * var(--widget-scale)); flex:none; color:var(--accent); }
.widget-clock .widget-time { font-size:calc(22px * var(--widget-scale)); }
.widget-clock-second { color:#c94758; stroke-width:1; }
.widget-die-stage { --text:var(--ink); }
.widget-die-stage .dice-board[data-count="1"] .dice-stage { width:min(100%, calc(112px * var(--widget-scale))); }
.widget-die-stage .dice-card { padding:0; }
.widget-die-stage .dice-caption { display:none; }
.widget-die-stage .dice-fallback-number {
  position:absolute; top:55%; left:50%; transform:translate(-50%,-50%);
  color:#182b48; font:bold calc(24px * var(--widget-scale))/1 system-ui,sans-serif;
}
.widget-die-result {
  display:grid; place-items:center; min-width:2ch; color:var(--accent);
  font-size:1.5em; font-weight:700; font-variant-numeric:tabular-nums;
}
.board-widget-content meter { width:100%; height:calc(20px * var(--widget-scale)); }
.widget-products {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px 8px; margin:0; padding:0; list-style:none;
}
.widget-products li {
  display:flex; justify-content:space-between; gap:4px; padding:4px 5px;
  border-radius:4px; background:#f5f6fa; font-variant-numeric:tabular-nums;
}
.widget-products strong { color:var(--accent); }
.widget-conversion-controls, .widget-unit-pair { gap:.35em; }
.widget-conversion-controls input { width:4.4em; }
.widget-unit-pair { display:flex; align-items:center; }
.widget-conversion-result {
  flex:1 1 auto; min-width:0; max-width:100%; color:var(--accent);
  font-weight:700; text-align:center; overflow-wrap:anywhere;
}
.widget-conversion-result:empty { display:none; }
.widget-unit-table { width:100%; table-layout:fixed; border-collapse:collapse; text-align:center; font-size:calc(14px * var(--widget-scale)); }
.widget-unit-table :is(th,td) { padding:.45em .08em; border:1px solid var(--line); }
.widget-unit-table th { background:#f5f6fa; }
.widget-unit-table .is-target { color:var(--accent); background:var(--accent-soft); }
@media (max-width:383px) {
  .view-actions .icon-button { width:28px; min-width:28px; padding:4px; }
}