/* Engineer Underground Grid Dashboard. Site tokens: accent #0369A1, headings #0F172A, body #334155,
   borders #E2E8F0, surfaces #F1F5F9, highlight #E0F2FE. Font Inter, numbers JetBrains Mono. */
.eug { box-sizing: border-box; color: var(--eu-text,#334155); font-family: inherit; }
.eug *, .eug *::before, .eug *::after { box-sizing: border-box; }
.eug button, .eug input { font-family: inherit; }
.eug :focus-visible { outline: 3px solid var(--eu-accent,#0369A1); outline-offset: 2px; }

/* Members-only gate */
.eug-gate { max-width: 560px; margin: 24px auto; padding: 32px; text-align: center; background: var(--eu-card,#FFFFFF); border: 1px solid var(--eu-border,#E2E8F0); border-radius: 12px; }
.eug-gate h2 { margin: 0 0 8px; color: var(--eu-ink,#0F172A); }
.eug-gate p { margin: 0 0 14px; color: var(--eu-text,#334155); }
.eug-gate-btn { display: inline-block; padding: 12px 20px; border-radius: 8px; background: var(--eu-accent-fill,#0369A1); color: var(--eu-on-accent,#FFFFFF); font-weight: 600; text-decoration: none; }
.eug-gate-btn:hover { background: var(--eu-accent-fill-hover,#075985); color: var(--eu-on-accent,#FFFFFF); }

/* Toolbar */
.eug-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding: 10px 12px; background: var(--eu-card,#FFFFFF); border: 1px solid var(--eu-border,#E2E8F0); border-radius: 12px; }
.eug-bar-left { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; min-width: 0; }
.eug-bar-title { color: var(--eu-ink,#0F172A); font-size: 17px; }
.eug-status { font-size: 13px; color: var(--eu-muted,#64748B); }
.eug-status.is-ok::before { content: "\2713\00a0"; color: var(--eu-accent,#0369A1); }
.eug-status.is-bad { color: var(--eu-danger,#B91C1C); }
.eug-bar-right { display: flex; flex-wrap: wrap; gap: 8px; }
.eug-btn { appearance: none; padding: 9px 14px; border: 1px solid var(--eu-border-2,#CBD5E1); border-radius: 8px; background: var(--eu-card,#FFFFFF); color: var(--eu-ink,#0F172A); font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; }
.eug-btn:hover { border-color: var(--eu-accent,#0369A1); color: var(--eu-accent,#0369A1); }
.eug-btn[aria-pressed="true"]:not(.eug-primary) { background: var(--eu-accent-soft,#E0F2FE); border-color: var(--eu-accent,#0369A1); color: var(--eu-accent-hover,#075985); }
.eug-primary { background: var(--eu-accent-fill,#0369A1); border-color: var(--eu-accent,#0369A1); color: var(--eu-on-accent,#FFFFFF); }
.eug-primary:hover { background: var(--eu-accent-fill-hover,#075985); border-color: var(--eu-accent-hover,#075985); color: var(--eu-on-accent,#FFFFFF); }
.eug-danger { color: var(--eu-danger,#B91C1C); }
.eug-danger:hover { border-color: var(--eu-danger,#B91C1C); color: var(--eu-danger,#B91C1C); }
.eug-edit-only { display: none; }
.eug-edit .eug-edit-only { display: inline-block; }
.eug-stacked .eug-wide-only { display: none; }
.eug-hint { margin: 0 0 12px; padding: 8px 12px; font-size: 14px; color: var(--eu-text-2,#475569); background: var(--eu-surface,#F1F5F9); border-radius: 8px; }
.eug-hint[hidden] { display: none; }

/* Add-widget palette */
.eug-palette { margin-bottom: 12px; padding: 14px; background: var(--eu-card,#FFFFFF); border: 1px solid var(--eu-border,#E2E8F0); border-radius: 12px; }
.eug-palette[hidden] { display: none; }
.eug-pal-title { margin: 0 0 10px; font-weight: 700; color: var(--eu-ink,#0F172A); }
.eug-pal-list { display: grid; gap: 10px; }
.eug-pal-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--eu-surface-2,#F8FAFC); border: 1px solid var(--eu-border,#E2E8F0); border-radius: 8px; }
.eug-pal-text strong { display: block; color: var(--eu-ink,#0F172A); }
.eug-pal-text span { display: block; font-size: 14px; color: var(--eu-text-2,#475569); }
.eug-pal-note { margin: 10px 0 0; font-size: 13px; color: var(--eu-muted,#64748B); }

/* Stage and grid */
.eug-stage { padding: 12px; background: var(--eu-surface,#F1F5F9); border: 1px solid var(--eu-border,#E2E8F0); border-radius: 16px; }
.eug-canvas { position: relative; margin: 0 -6px; }
.eug-edit .eug-canvas {
  background-image:
    linear-gradient(to right, rgba(3, 105, 161, 0.13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(3, 105, 161, 0.13) 1px, transparent 1px);
  background-size: var(--eug-col, 80px) var(--eug-row, 64px);
}
.eug-edit.eug-nogrid .eug-canvas { background-image: none; }
.eug-empty { margin-top: 12px; padding: 24px; text-align: center; color: var(--eu-text-2,#475569); background: var(--eu-card,#FFFFFF); border: 1px dashed var(--eu-border-2,#CBD5E1); border-radius: 12px; }
.eug-empty[hidden] { display: none; }

/* Widgets */
.eug-item { position: absolute; padding: 6px; transition: left 0.18s ease, top 0.18s ease, width 0.18s ease, height 0.18s ease; }
.eug-item.is-active { z-index: 20; transition: none; }
.eug-item.is-active .eug-card { box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22); }
.eug-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--eu-card,#FFFFFF); border: 1px solid var(--eu-border,#E2E8F0); border-radius: 12px; }
.eug-edit .eug-card { border-color: var(--eu-accent,#0369A1); border-style: dashed; }
.eug-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--eu-surface-2,#F8FAFC); border-bottom: 1px solid var(--eu-border,#E2E8F0); color: var(--eu-ink,#0F172A); font-size: 15px; font-weight: 600; user-select: none; }
.eug-edit .eug-head { cursor: grab; touch-action: none; }
.eug-edit .eug-item.is-active .eug-head { cursor: grabbing; }
.eug-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eug-grip { display: none; flex: 0 0 14px; height: 14px; background-image: radial-gradient(circle, var(--eu-faint,#94A3B8) 1.5px, transparent 1.6px); background-size: 7px 7px; }
.eug-edit .eug-grip { display: block; }
.eug-gear { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; color: var(--eu-text-2,#475569);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 18px; }
.eug-gear:hover { background-color: var(--eu-accent-soft,#E0F2FE); }
.eug-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px; }
.eug-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.eug-f { display: block; }
.eug-sym { display: block; margin-bottom: 4px; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 600; color: var(--eu-text-2,#475569); }
.eug-f input { width: 100%; padding: 9px 10px; border: 1px solid var(--eu-border-2,#CBD5E1); border-radius: 8px; background: var(--eu-card,#FFFFFF); color: var(--eu-ink,#0F172A); font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 15px; }
.eug-f input:focus { outline: 2px solid var(--eu-accent,#0369A1); outline-offset: 1px; border-color: var(--eu-accent,#0369A1); }
.eug-foot { margin-top: 10px; }
.eug-link { padding: 0; border: 0; background: none; color: var(--eu-accent,#0369A1); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; }

/* Widget settings view */
.eug-set-title { margin: 0 0 8px; font-weight: 600; color: var(--eu-ink,#0F172A); font-size: 14px; }
.eug-units { display: grid; gap: 4px; }
.eug-check { display: flex; align-items: baseline; gap: 8px; padding: 4px 2px; font-size: 14px; cursor: pointer; }
.eug-check input { flex: 0 0 auto; }
.eug-check-sym { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-weight: 600; color: var(--eu-ink,#0F172A); min-width: 64px; }
.eug-check-name { color: var(--eu-text-2,#475569); }
.eug-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Drag and resize helpers */
.eug-ph { position: absolute; z-index: 1; margin: 6px; border: 2px dashed var(--eu-accent,#0369A1); border-radius: 12px; background: rgba(3, 105, 161, 0.10); pointer-events: none; }
.eug-rs { display: none; position: absolute; right: 8px; bottom: 8px; z-index: 3; width: 26px; height: 26px; cursor: nwse-resize; touch-action: none; border-radius: 6px;
  background: linear-gradient(135deg, transparent 0 45%, var(--eu-accent,#0369A1) 45% 52%, transparent 52% 62%, var(--eu-accent,#0369A1) 62% 69%, transparent 69% 79%, var(--eu-accent,#0369A1) 79% 86%, transparent 86%); }
.eug-edit .eug-rs { display: block; }

/* One column on narrow screens: widgets stack and layout editing is off */
.eug-stacked .eug-stage { padding: 8px; }
.eug-stacked .eug-canvas { margin: 0; }
.eug-stacked .eug-item { position: relative; display: block; width: 100%; padding: 0 0 12px; }
.eug-stacked .eug-fields { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.eug-stacked .eug-bar-right .eug-btn { flex: 1 1 auto; }

@media (prefers-reduced-motion: reduce) { .eug-item { transition: none; } }

/* ---------- Palette (grouped, scrolls) ---------- */
.eug-palette { max-height: 70vh; overflow: auto; }
.eug-pal-group { margin: 16px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--eu-border,#E2E8F0); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--eu-text-2,#475569); }
.eug-pal-title + .eug-pal-group { margin-top: 4px; }
.eug-pal-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.eug-pal-row .eug-btn { flex: 0 0 auto; min-width: 84px; }

/* ---------- Shared bits inside widgets ---------- */
.eug-note { margin: 0 0 8px; font-size: 13px; line-height: 1.45; color: var(--eu-text-2,#475569); }
.eug-setbox { display: grid; gap: 10px; }
.eug-sf { display: block; }
.eug-sf-label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--eu-text,#334155); }
.eug-sf select, .eug-bunit { width: 100%; padding: 8px 10px; border: 1px solid var(--eu-border-2,#CBD5E1); border-radius: 8px; background: var(--eu-card,#FFFFFF); color: var(--eu-ink,#0F172A); font-size: 14px; }
.eug-btn:disabled { opacity: 0.45; cursor: default; }
.eug-btn:disabled:hover { border-color: var(--eu-border-2,#CBD5E1); color: var(--eu-ink,#0F172A); }

/* ---------- Clocks ---------- */
.eug-body-analog, .eug-body-digital { padding: 6px; }
.eug-clockwrap { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.eug-analog { display: block; width: 100%; height: 100%; }
.eug-body-digital { container-type: size; }
.eug-digital { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; }
.eug-dtime { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-weight: 700; color: var(--eu-ink,#0F172A); line-height: 1.1; font-size: 32px; font-size: clamp(20px, min(13cqw, 40cqh), 120px); white-space: nowrap; }
.eug-ddate { margin-top: 4px; color: var(--eu-text-2,#475569); font-size: 14px; font-size: clamp(12px, min(4.6cqw, 14cqh), 28px); }
.eug-dzone { margin-top: 2px; color: var(--eu-muted,#64748B); font-size: 12px; font-size: clamp(11px, min(3.6cqw, 11cqh), 20px); }

/* ---------- Timer and stopwatch ---------- */
.eug-seg { display: inline-flex; margin-bottom: 10px; border: 1px solid var(--eu-border-2,#CBD5E1); border-radius: 8px; overflow: hidden; }
.eug-seg-btn { padding: 7px 14px; border: 0; background: var(--eu-card,#FFFFFF); color: var(--eu-text,#334155); font-size: 14px; font-weight: 600; cursor: pointer; }
.eug-seg-btn + .eug-seg-btn { border-left: 1px solid var(--eu-border-2,#CBD5E1); }
.eug-seg-btn.is-on { background: var(--eu-accent-fill,#0369A1); color: var(--eu-on-accent,#FFFFFF); }
.eug-timer { text-align: center; }
.eug-tdisp { margin: 4px 0 10px; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 38px; font-weight: 700; color: var(--eu-ink,#0F172A); line-height: 1.1; white-space: nowrap; }
.eug-tdisp.is-done { color: #EB6834; }
.eug-tbtns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.eug-tset { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; }
.eug-tin { display: block; text-align: center; font-size: 12px; color: var(--eu-muted,#64748B); }
.eug-tin input { display: block; width: 64px; margin-bottom: 2px; padding: 8px 6px; border: 1px solid var(--eu-border-2,#CBD5E1); border-radius: 8px; text-align: center; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 16px; color: var(--eu-ink,#0F172A); background: var(--eu-card,#FFFFFF); }
.eug-laps { margin-top: 12px; text-align: left; }
.eug-lap { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; padding: 5px 2px; border-top: 1px solid var(--eu-border,#E2E8F0); font-size: 13px; color: var(--eu-text-2,#475569); }
.eug-lap-t { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; color: var(--eu-ink,#0F172A); }

/* ---------- Weather ---------- */
.eug-wxplace { margin-bottom: 6px; font-weight: 600; color: var(--eu-ink,#0F172A); font-size: 15px; }
.eug-wxtop { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.eug-wxbig { color: var(--eu-accent,#0369A1); }
.eug-wxbig .eug-wxicon { width: 56px; height: 56px; }
.eug-wxdeg { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 34px; font-weight: 700; color: var(--eu-ink,#0F172A); line-height: 1.1; }
.eug-wxdesc { color: var(--eu-text-2,#475569); font-size: 14px; }
.eug-wxdet { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 10px; }
.eug-wxcell { padding: 8px 10px; background: var(--eu-surface,#F1F5F9); border-radius: 8px; }
.eug-wxk { display: block; font-size: 12px; color: var(--eu-muted,#64748B); }
.eug-wxv { display: block; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 14px; font-weight: 600; color: var(--eu-ink,#0F172A); }
.eug-wxfc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.eug-wxday { padding: 8px 6px; text-align: center; border: 1px solid var(--eu-border,#E2E8F0); border-radius: 8px; }
.eug-wxsmall { display: block; color: var(--eu-accent,#0369A1); }
.eug-wxsmall .eug-wxicon { width: 28px; height: 28px; margin: 2px auto; display: block; }
.eug-wxday .eug-wxv { font-size: 12px; }
.eug-wxfoot { margin-top: 10px; }
.eug-wxsearch { display: flex; gap: 8px; margin-bottom: 8px; }
.eug-wxsearch input { flex: 1 1 auto; min-width: 0; padding: 9px 10px; border: 1px solid var(--eu-border-2,#CBD5E1); border-radius: 8px; font-size: 15px; color: var(--eu-ink,#0F172A); background: var(--eu-card,#FFFFFF); }
.eug-wxresults { display: grid; gap: 6px; margin-top: 8px; }
.eug-wxpick { padding: 9px 10px; text-align: left; border: 1px solid var(--eu-border,#E2E8F0); border-radius: 8px; background: var(--eu-surface-2,#F8FAFC); color: var(--eu-ink,#0F172A); font-size: 14px; cursor: pointer; }
.eug-wxpick:hover { border-color: var(--eu-accent,#0369A1); background: var(--eu-accent-soft,#E0F2FE); }
.eug-wxsetup .eug-btn { margin-bottom: 4px; white-space: nowrap; flex: 0 0 auto; }

/* ---------- Barometric pressure and density altitude ---------- */
.eug-bform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.eug-bftop { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.eug-bftop .eug-sf-label { margin: 0; }
.eug-bunit { width: auto; padding: 3px 6px; font-size: 13px; }
.eug-bf input { width: 100%; padding: 9px 10px; border: 1px solid var(--eu-border-2,#CBD5E1); border-radius: 8px; background: var(--eu-card,#FFFFFF); color: var(--eu-ink,#0F172A); font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 15px; }
.eug-bf input:focus { outline: 2px solid var(--eu-accent,#0369A1); outline-offset: 1px; border-color: var(--eu-accent,#0369A1); }
.eug-bout { margin-top: 12px; padding: 4px 12px; background: var(--eu-accent-soft,#E0F2FE); border-radius: 10px; }
.eug-bout:empty { display: none; }
.eug-brow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 7px 0; border-bottom: 1px solid rgba(3, 105, 161, 0.18); }
.eug-brow:last-child { border-bottom: 0; }
.eug-bk { font-size: 13px; color: var(--eu-text,#334155); }
.eug-bv { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 14px; font-weight: 600; color: var(--eu-ink,#0F172A); }
.eug-bnote { margin-top: 10px; }

/* ---------- Notes ---------- */
.eug-body-notes { padding: 0; display: flex; flex-direction: column; }
.eug-notes { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.eug-notearea { flex: 1 1 auto; width: 100%; min-height: 0; padding: 12px; border: 0; background: var(--eu-card,#FFFFFF); color: var(--eu-ink,#0F172A); font-family: inherit; font-size: 15px; line-height: 1.5; resize: none; }
.eug-notearea:focus { outline: 2px solid var(--eu-accent,#0369A1); outline-offset: -2px; }
.eug-pal-btns { display: flex; flex-direction: column; gap: 6px; align-items: stretch; flex: none; }
.eug-pal-btns [hidden] { display: none !important; }
.eug-noteedit { box-sizing: border-box; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.eug-noteedit:empty::before { content: attr(data-placeholder); opacity: .55; pointer-events: none; }
.eug-noteedit a.eug-notelink { cursor: pointer; }
.eug-noteview { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.eug-noteview[hidden] { display: none; }
.eug-noteview:focus { outline: 2px solid var(--eu-accent,#0369A1); outline-offset: -2px; }
.eug-notelink { text-decoration: underline; cursor: pointer; }
.eug-notecount { padding: 4px 12px 6px; text-align: right; font-size: 12px; color: var(--eu-muted,#64748B); border-top: 1px solid var(--eu-border,#E2E8F0); background: var(--eu-surface-2,#F8FAFC); }

/* ---------- Reference table ---------- */
.eug-body-table { padding: 0; }
.eug-tablewrap { overflow: auto; max-height: 100%; }
.eug-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.eug-table th, .eug-table td { padding: 8px 10px; border-bottom: 1px solid var(--eu-border,#E2E8F0); text-align: left; vertical-align: top; color: var(--eu-ink,#0F172A); background: transparent; }
.eug-table thead th { position: sticky; top: 0; background: var(--eu-surface,#F1F5F9); color: var(--eu-text,#334155); font-weight: 600; z-index: 1; }
.eug-table tbody th { font-weight: 600; }
.eug-table td { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; white-space: nowrap; }

@media (max-width: 782px) { .eug-bform { grid-template-columns: 1fr 1fr; } .eug-pal-list { grid-template-columns: 1fr; } }

/* Theme paragraph margins are larger than the palette needs */
.eug .eug-palette p { margin-top: 0; }
.eug .eug-pal-title { margin-bottom: 4px; }
.eug .eug-pal-group { margin: 14px 0 8px; line-height: 1.3; }
.eug .eug-pal-text strong, .eug .eug-pal-text span { margin: 0; line-height: 1.35; }
.eug .eug-pal-note { margin: 12px 0 0; }

/* One-column layout: tall widgets need a little more room than their grid height */
.eug-stacked .eug-k-timer { min-height: 360px; }
.eug-stacked .eug-k-weather { min-height: 400px; }
.eug-stacked .eug-k-baro { min-height: 500px; }

/* ---------- Lock a widget in place (edit mode) ---------- */
.eug-lock { display: none; flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; cursor: pointer; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7.5-2'/%3E%3C/svg%3E"); }
.eug-lock:hover { background-color: var(--eu-accent-soft,#E0F2FE); }
.eug-edit .eug-lock { display: block; }
.eug-lock[aria-pressed="true"] { background-color: var(--eu-accent-soft,#E0F2FE);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369A1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2' fill='%230369A1' fill-opacity='0.15'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
.eug-edit .eug-item.is-locked .eug-card { border-style: solid; border-color: var(--eu-faint,#94A3B8); background: #FBFCFD; }
.eug-edit .eug-item.is-locked .eug-head { cursor: default; background: var(--eu-surface,#F1F5F9); }
.eug-edit .eug-item.is-locked .eug-grip { visibility: hidden; }
.eug-item.is-locked .eug-rs { display: none; }
.eug-edit .eug-item.is-locked .eug-rs { display: none; }

/* ---------- Palette: widgets already on the workspace ---------- */
.eug-pal-row .eug-btn.is-added { background: var(--eu-accent-soft,#E0F2FE); border-color: var(--eu-accent,#0369A1); color: var(--eu-accent-hover,#075985); }

/* ---------- Notes colour choices ---------- */
.eug-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.eug-swatch { width: 30px; height: 30px; padding: 0; border: 1px solid var(--eu-faint,#94A3B8); border-radius: 8px; cursor: pointer; }
.eug-swatch.is-on { outline: 3px solid var(--eu-accent,#0369A1); outline-offset: 2px; }
.eug-check input[type="color"] { width: 36px; height: 28px; padding: 0; border: 1px solid var(--eu-border-2,#CBD5E1); border-radius: 6px; background: var(--eu-card,#FFFFFF); cursor: pointer; }

/* ---------- Tap drill and thread lookup ---------- */
.eug-tdform { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.eug-tdform select, .eug-tdform input { width: 100%; padding: 8px 10px; border: 1px solid var(--eu-border-2,#CBD5E1); border-radius: 8px; background: var(--eu-card,#FFFFFF); color: var(--eu-ink,#0F172A); font-size: 14px; }
.eug-tdout { margin-top: 12px; padding: 4px 12px; background: var(--eu-accent-soft,#E0F2FE); border-radius: 10px; }
.eug-tddims { margin-top: 10px; padding: 0 2px; }
.eug-tdrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding: 7px 0; border-bottom: 1px solid rgba(3, 105, 161, 0.18); }
.eug-tddims .eug-tdrow { border-bottom-color: var(--eu-border,#E2E8F0); }
.eug-tdrow:last-child { border-bottom: 0; }
.eug-tdbig { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 22px; font-weight: 700; color: var(--eu-ink,#0F172A); }
.eug-td .eug-note { margin-top: 10px; }

/* ---------- Header icon buttons: icons live in ::before so theme button styles cannot remove them ---------- */
.eug .eug-gear, .eug .eug-lock {
  position: relative; background: transparent !important; background-image: none !important; box-shadow: none; color: inherit;
}
.eug .eug-gear::before, .eug .eug-lock::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background-repeat: no-repeat; background-position: center; background-size: 18px;
}
.eug .eug-gear::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E");
}
.eug .eug-gear.is-open::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369A1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E");
}
.eug .eug-lock::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7.5-2'/%3E%3C/svg%3E");
}
.eug .eug-lock[aria-pressed="true"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369A1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2' fill='%230369A1' fill-opacity='0.15'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}
/* Background by state: hover or open or locked is light blue; clicking away returns to plain */
.eug .eug-gear:hover, .eug .eug-lock:hover, .eug .eug-gear.is-open, .eug .eug-lock[aria-pressed="true"] { background: var(--eu-accent-soft,#E0F2FE) !important; }
.eug .eug-gear:focus, .eug .eug-lock:focus, .eug .eug-gear:active, .eug .eug-lock:active { background: transparent !important; }
.eug .eug-gear:focus:hover, .eug .eug-lock:focus:hover, .eug .eug-gear.is-open:focus, .eug .eug-lock[aria-pressed="true"]:focus { background: var(--eu-accent-soft,#E0F2FE) !important; }

/* Other widget buttons: keep their look when clicked (the theme restyles focused buttons) */
.eug .eug-btn:focus, .eug .eug-btn:active { background: var(--eu-card,#FFFFFF); color: var(--eu-ink,#0F172A); border-color: var(--eu-border-2,#CBD5E1); box-shadow: none; }
.eug .eug-btn:focus:hover, .eug .eug-btn:hover { border-color: var(--eu-accent,#0369A1); color: var(--eu-accent,#0369A1); }
.eug .eug-btn.eug-primary, .eug .eug-btn.eug-primary:focus, .eug .eug-btn.eug-primary:active { background: var(--eu-accent-fill,#0369A1); color: var(--eu-on-accent,#FFFFFF); border-color: var(--eu-accent,#0369A1); }
.eug .eug-btn.eug-primary:hover { background: var(--eu-accent-fill-hover,#075985); border-color: var(--eu-accent-hover,#075985); color: var(--eu-on-accent,#FFFFFF); }
.eug .eug-pal-row .eug-btn.is-added, .eug .eug-pal-row .eug-btn.is-added:focus { background: var(--eu-accent-soft,#E0F2FE); border-color: var(--eu-accent,#0369A1); color: var(--eu-accent-hover,#075985); }
.eug .eug-btn[aria-pressed="true"]:not(.eug-primary), .eug .eug-btn[aria-pressed="true"]:not(.eug-primary):focus { background: var(--eu-accent-soft,#E0F2FE); border-color: var(--eu-accent,#0369A1); color: var(--eu-accent-hover,#075985); }
.eug .eug-danger, .eug .eug-danger:focus { color: var(--eu-danger,#B91C1C); }
.eug .eug-seg-btn, .eug .eug-seg-btn:focus, .eug .eug-seg-btn:active { background: var(--eu-card,#FFFFFF); color: var(--eu-text,#334155); box-shadow: none; }
.eug .eug-seg-btn.is-on, .eug .eug-seg-btn.is-on:focus { background: var(--eu-accent-fill,#0369A1); color: var(--eu-on-accent,#FFFFFF); }
.eug .eug-link, .eug .eug-link:focus, .eug .eug-link:hover { background: none; box-shadow: none; }
.eug .eug-wxpick, .eug .eug-wxpick:focus { background: var(--eu-surface-2,#F8FAFC); color: var(--eu-ink,#0F172A); }
.eug .eug-wxpick:hover { background: var(--eu-accent-soft,#E0F2FE); }

/* ---------- Visitor preview: the tool is visible, locked, and covered by a fog ---------- */
.eug-holder { position: relative; }
.eug-preview .eug-stage { pointer-events: none; user-select: none; -webkit-user-select: none; }
.eug-preview .eug-gear, .eug-preview .eug-lock, .eug-preview .eug-rs { display: none !important; }
.eug-preview .eug-bar { margin-bottom: 12px; }
.eug-fog {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center; padding: 16px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(241, 245, 249, 0.40), rgba(241, 245, 249, 0.82));
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.eug-fogcard { width: 100%; max-width: 460px; padding: 28px 26px; text-align: center; background: var(--eu-card,#FFFFFF); border: 1px solid var(--eu-border,#E2E8F0); border-radius: 14px; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16); }
.eug-fogicon { display: block; width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 50%; background-color: var(--eu-accent-soft,#E0F2FE); background-repeat: no-repeat; background-position: center; background-size: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369A1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
.eug .eug-fogtitle { margin: 0 0 8px; color: var(--eu-ink,#0F172A); font-size: 24px; line-height: 1.2; }
.eug .eug-fogtext { margin: 0 0 16px; color: var(--eu-text,#334155); font-size: 16px; line-height: 1.5; }
.eug .eug-fogsmall { margin: 12px 0 0; color: var(--eu-muted,#64748B); font-size: 13px; }
.eug .eug-fogcard .eug-gate-btn { color: var(--eu-on-accent,#FFFFFF); }
.eug-preview.eug-stacked .eug-fog { align-items: flex-start; }
.eug-preview.eug-stacked .eug-fogcard { position: sticky; top: 84px; }
.eug-preview.eug-stacked .eug-item:nth-child(n+4) { display: none; }

/* Lighter fog so the widgets underneath can still be recognised */
.eug-fog { background: linear-gradient(180deg, rgba(241, 245, 249, 0.22), rgba(241, 245, 249, 0.62)); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* Weather: the forecast row sits directly under the temperature, with the details below it */
.eug-wxfc { margin-bottom: 10px; }

/* ---------- Edit mode: the tile size (columns x rows) in the middle of each widget ---------- */
.eug-size {
  display: none; position: absolute; top: 50%; left: 50%; z-index: 4; transform: translate(-50%, -50%);
  padding: 6px 14px; border-radius: 999px; background: rgba(15, 23, 42, 0.78); color: var(--eu-on-accent,#FFFFFF);
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 18px; font-weight: 700; line-height: 1.2;
  white-space: nowrap; pointer-events: none; user-select: none; -webkit-user-select: none;
}
.eug-edit .eug-size { display: block; }
.eug-item.is-active .eug-size { background: rgba(3, 105, 161, 0.92); }

/* ---------- Weather: a little more compact so the forecast days fit when the widget is 4 rows high ---------- */
.eug-body-weather { padding: 8px 12px 10px; }
.eug .eug-wxplace { margin: 0 0 4px; font-size: 14px; line-height: 1.3; }
.eug-wxtop { gap: 12px; margin-bottom: 8px; }
.eug-wxbig .eug-wxicon { width: 44px; height: 44px; }
.eug-wxdeg { font-size: 30px; }
.eug-wxdesc { font-size: 13px; }
.eug-wxfc { gap: 6px; margin-bottom: 8px; }
.eug-wxday { padding: 6px 4px; }
.eug-wxday .eug-wxk { font-size: 11px; line-height: 1.3; }
.eug-wxsmall .eug-wxicon { width: 22px; height: 22px; margin: 1px auto; }
.eug-wxday .eug-wxv { font-size: 12px; line-height: 1.3; }

/* Forecast high/low never wraps: its size follows the width of the forecast row */
.eug-wxfc { container-type: inline-size; }
.eug-wxday .eug-wxv { font-size: 11px; font-size: clamp(11px, 4.4cqw, 13px); white-space: nowrap; }
.eug-wxday .eug-wxk { white-space: nowrap; }

/* ---------- Workspace background colour ---------- */
.eug-bgpanel { max-height: none; }
.eug-bgpanel .eug-note { margin: 0 0 10px; }
.eug-stage { transition: background-color 0.2s ease; }
.eug-stage.eug-dark { border-color: rgba(255, 255, 255, 0.18); }
.eug-edit .eug-stage.eug-dark .eug-canvas {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
}
.eug-edit.eug-nogrid .eug-stage.eug-dark .eug-canvas { background-image: none; }
@media (prefers-reduced-motion: reduce) { .eug-stage { transition: none; } }

/* ---------- Text encoding converter ---------- */
.eug-body-encoder { padding: 10px 12px 12px; }
.eug-encgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 10px 12px; }
.eug-eftop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.eug-eftop .eug-sf-label { margin: 0; }
.eug-ef textarea {
  display: block; width: 100%; padding: 8px 10px; resize: vertical;
  border: 1px solid var(--eu-border-2,#CBD5E1); border-radius: 8px; background: var(--eu-card,#FFFFFF); color: var(--eu-ink,#0F172A);
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.45;
}
.eug-ef textarea:focus { outline: 2px solid var(--eu-accent,#0369A1); outline-offset: 1px; border-color: var(--eu-accent,#0369A1); }
.eug-ef textarea[aria-invalid="true"] { border-color: var(--eu-danger,#B91C1C); background: var(--eu-danger-soft,#FEF2F2); }
.eug-encnote { margin: 8px 0 0; min-height: 1.2em; }

/* One-column layout: the encoder stacks five boxes, so it needs more height than its grid size */
.eug-stacked .eug-k-encoder { min-height: 700px; }

/* ---------- Drill bit size finder ---------- */
.eug-body-drillfinder { padding: 10px 12px 12px; }
.eug-dfform { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
.eug-dfform input { width: 100%; padding: 9px 10px; border: 1px solid var(--eu-border-2,#CBD5E1); border-radius: 8px; background: var(--eu-card,#FFFFFF); color: var(--eu-ink,#0F172A); font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 15px; }
.eug-dfform input:focus { outline: 2px solid var(--eu-accent,#0369A1); outline-offset: 1px; border-color: var(--eu-accent,#0369A1); }
.eug-dfout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 12px; margin-top: 12px; }
.eug-dftitle { margin: 0 0 6px; font-weight: 700; color: var(--eu-ink,#0F172A); font-size: 14px; }
.eug-dfscroll { overflow-x: auto; border: 1px solid var(--eu-border,#E2E8F0); border-radius: 8px; }
.eug-dftable { width: 100%; border-collapse: collapse; font-size: 13px; }
.eug-dftable th, .eug-dftable td { padding: 6px 8px; border: 0; border-bottom: 1px solid var(--eu-border,#E2E8F0); text-align: left; vertical-align: top; color: var(--eu-ink,#0F172A); background: transparent; }
.eug-dftable thead th { background: var(--eu-surface,#F1F5F9); color: var(--eu-text,#334155); font-weight: 600; font-size: 12px; }
.eug-dftable tr:last-child td { border-bottom: 0; }
.eug-dfname { font-weight: 700; white-space: nowrap; }
.eug-dfsize, .eug-dfdiff { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 12px; }
.eug-dfdiff { white-space: nowrap; }
.eug-dftable tr.is-below .eug-dfdiff { color: var(--eu-warn-text,#B45309); }
.eug-dftable tr.is-above .eug-dfdiff { color: var(--eu-accent,#0369A1); }
.eug-dftable tr.is-you td { background: var(--eu-accent-soft,#E0F2FE); font-weight: 700; }
.eug-dftable tr.is-exact td { background: var(--eu-success-soft,#DCFCE7); }

/* ---------- Wire size selector ---------- */
.eug-body-wiresize { padding: 10px 12px 12px; }
.eug-ws .eug-bform { grid-template-columns: repeat(auto-fit, minmax(min(112px, 100%), 1fr)); }
.eug-bsel { width: 100%; padding: 9px 10px; border: 1px solid var(--eu-border-2,#CBD5E1); border-radius: 8px; background: var(--eu-card,#FFFFFF); color: var(--eu-ink,#0F172A); font-size: 14px; }
.eug-wscont { margin-top: 10px; }
.eug-wsbest { background: rgba(255, 255, 255, 0.7); border-radius: 6px; padding-left: 8px; padding-right: 8px; margin: 2px -8px; }
.eug-wsbest .eug-bv { color: var(--eu-accent-hover,#075985); font-size: 16px; }
/* One-column layout: these two grow to fit their content instead of scrolling inside the widget */
.eug-stacked .eug-k-drillfinder, .eug-stacked .eug-k-wiresize { height: auto !important; min-height: 0; }
.eug-stacked .eug-k-drillfinder .eug-body, .eug-stacked .eug-k-wiresize .eug-body { overflow: visible; }
.eug-stacked .eug-k-wiresize { min-height: 900px; }

.eug-dfsize span, .eug-dfdiff span { display: block; }
.eug-dfsub { color: var(--eu-muted,#64748B); font-size: 11px; font-weight: 400; }
.eug-dftable tr.is-you .eug-dfsub { color: var(--eu-text,#334155); }
.eug-dftable tr.is-exact .eug-dfdiff span { font-family: inherit; font-weight: 700; color: var(--eu-success,#166534); }
.eug-ws .eug-bf { display: flex; flex-direction: column; justify-content: flex-end; }

/* ---------- Image widget ---------- */
.eug-body-image { padding: 0; display: flex; flex-direction: column; background: var(--eu-card,#FFFFFF); }
.eug-img { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.eug-imgpic { display: block; width: 100%; flex: 1 1 0; min-height: 0; height: 100%; object-position: center; user-select: none; -webkit-user-select: none; }
.eug-fit-contain { object-fit: contain; }
.eug-fit-cover { object-fit: cover; }
.eug-imgzone { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin: 12px; padding: 16px 14px; text-align: center; border: 2px dashed var(--eu-border-2,#CBD5E1); border-radius: 12px; }
.eug-imgzone .eug-note { margin: 0; max-width: 28em; }
.eug-imgtitle { margin: 0; font-weight: 700; color: var(--eu-ink,#0F172A); font-size: 16px; }
.eug-img.is-over .eug-imgzone { border-color: var(--eu-accent,#0369A1); background: var(--eu-accent-soft,#E0F2FE); }
.eug-img.is-over .eug-imgpic { outline: 3px dashed var(--eu-accent,#0369A1); outline-offset: -6px; }
.eug-imgstatus { margin: 0; padding: 6px 10px; font-size: 13px; background: var(--eu-surface-2,#F8FAFC); border-top: 1px solid var(--eu-border,#E2E8F0); }
.eug-setbox .eug-imgstatus { margin: 4px 0 0; border: 0; background: none; padding: 0; }
.eug-imgstatus:empty { display: none; }
.eug-imgstatus.is-bad { color: var(--eu-danger,#B91C1C); }

/* ---------- Intro popup (My Dashboard) ---------- */
.eug-modal-open { overflow: hidden; }
.eug-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, 0.55); }
.eug-modal-box { position: relative; box-sizing: border-box; width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow: auto; padding: 28px 28px 22px; background: var(--eu-card,#FFFFFF); border-radius: 14px; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35); color: var(--eu-text,#334155); font-family: Inter, system-ui, sans-serif; }
.eug-modal-title { margin: 0 32px 10px 0; font-size: 24px; line-height: 1.2; color: var(--eu-ink,#0F172A); }
.eug-modal-lead { margin: 0 0 16px; font-size: 16px; line-height: 1.55; color: var(--eu-text,#334155); }
.eug-modal-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.eug-modal-chips li { margin: 0; padding: 5px 12px; background: var(--eu-accent-soft,#E0F2FE); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--eu-accent-hover,#075985); }
.eug-modal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--eu-border,#E2E8F0); }
.eug-modal-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.eug-modal-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--eu-accent,#0369A1); }
.eug-modal .eug-modal-x, .eug-modal .eug-modal-x:focus { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--eu-text-2,#475569); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: none; }
.eug-modal .eug-modal-x:hover { background: var(--eu-surface,#F1F5F9); color: var(--eu-ink,#0F172A); }
.eug-modal .eug-btn, .eug-modal .eug-btn:focus { background: var(--eu-card,#FFFFFF); color: var(--eu-ink,#0F172A); border-color: var(--eu-border-2,#CBD5E1); }
.eug-modal .eug-btn.eug-primary, .eug-modal .eug-btn.eug-primary:focus { background: var(--eu-accent-fill,#0369A1); color: var(--eu-on-accent,#FFFFFF); border-color: var(--eu-accent,#0369A1); }
.eug-modal .eug-btn.eug-primary:hover { background: var(--eu-accent-fill-hover,#075985); border-color: var(--eu-accent-hover,#075985); }
.eug-modal button:focus-visible, .eug-modal input:focus-visible { outline: 2px solid var(--eu-accent,#0369A1); outline-offset: 2px; }
@media (max-width: 480px) { .eug-modal-box { padding: 22px 18px 18px; } .eug-modal-foot { flex-direction: column; align-items: stretch; } .eug-modal-go { width: 100%; } }

/* ---------- Calculator widget ---------- */
.eug-body-calc { overflow: auto; }
.eug-calc { display: flex; flex-direction: column; gap: 8px; min-height: 100%; box-sizing: border-box; padding: 2px; outline: none; }
.eug-calc:focus-visible { outline: 2px solid var(--eu-accent,#0369A1); outline-offset: 2px; border-radius: 10px; }
.eug-cscreen { position: relative; padding: 8px 12px; background: var(--eu-surface,#F1F5F9); border-radius: 10px; text-align: right; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; }
.eug-chist { min-height: 16px; color: var(--eu-muted,#64748B); font-size: 12px; word-break: break-all; padding-left: 52px; }
.eug-cmain { min-height: 34px; color: var(--eu-ink,#0F172A); font-size: 26px; font-weight: 600; line-height: 1.25; word-break: break-all; }
.eug-clive { min-height: 16px; color: var(--eu-accent,#0369A1); font-size: 13px; word-break: break-all; }
.eug-ccopy { position: absolute; top: 6px; left: 10px; font-family: Inter, system-ui, sans-serif; font-size: 12px; }
.eug-cpad { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.eug-crow { display: grid; gap: 6px; flex: 1 1 0; min-height: 34px; }
.eug .eug-ckey, .eug .eug-ckey:focus, .eug .eug-ckey:active { appearance: none; min-height: 34px; padding: 0; border: 1px solid var(--eu-border,#E2E8F0); border-radius: 8px; background: var(--eu-card,#FFFFFF); color: var(--eu-ink,#0F172A); font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: none; }
.eug .eug-ckey:hover { border-color: var(--eu-accent,#0369A1); color: var(--eu-accent,#0369A1); }
.eug .eug-ckey:focus-visible { outline: 2px solid var(--eu-accent,#0369A1); outline-offset: 1px; }
.eug .eug-ckey.is-op, .eug .eug-ckey.is-op:focus { background: var(--eu-accent-soft,#E0F2FE); color: var(--eu-accent-hover,#075985); }
.eug .eug-ckey.is-fn, .eug .eug-ckey.is-fn:focus, .eug .eug-ckey.is-mem, .eug .eug-ckey.is-mem:focus { background: var(--eu-surface,#F1F5F9); color: var(--eu-text,#334155); font-size: 13px; }
.eug .eug-ckey.is-mem, .eug .eug-ckey.is-mem:focus { font-size: 12px; }
.eug .eug-ckey.is-mem.is-lit { color: var(--eu-accent,#0369A1); border-color: var(--eu-accent,#0369A1); }
.eug .eug-ckey.is-hex, .eug .eug-ckey.is-hex:focus { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; background: var(--eu-surface-2,#F8FAFC); }
.eug .eug-ckey.is-clear, .eug .eug-ckey.is-clear:focus { color: var(--eu-danger,#B91C1C); }
.eug .eug-ckey.is-eq, .eug .eug-ckey.is-eq:focus { background: var(--eu-accent-fill,#0369A1); border-color: var(--eu-accent,#0369A1); color: var(--eu-on-accent,#FFFFFF); }
.eug .eug-ckey.is-eq:hover { background: var(--eu-accent-fill-hover,#075985); border-color: var(--eu-accent-hover,#075985); color: var(--eu-on-accent,#FFFFFF); }
.eug .eug-ckey:disabled { opacity: 0.35; cursor: default; }
.eug .eug-ckey:disabled:hover { border-color: var(--eu-border,#E2E8F0); color: var(--eu-ink,#0F172A); }
.eug-creads { display: grid; gap: 4px; }
.eug .eug-cread, .eug .eug-cread:focus { display: flex; align-items: baseline; gap: 10px; width: 100%; box-sizing: border-box; padding: 4px 10px; border: 1px solid var(--eu-border,#E2E8F0); border-radius: 8px; background: var(--eu-card,#FFFFFF); color: var(--eu-ink,#0F172A); text-align: left; cursor: pointer; box-shadow: none; }
.eug .eug-cread.is-on, .eug .eug-cread.is-on:focus { border-color: var(--eu-accent,#0369A1); background: var(--eu-accent-soft,#E0F2FE); }
.eug-cbase { flex: 0 0 34px; color: var(--eu-text-2,#475569); font-size: 12px; font-weight: 700; }
.eug-cval { min-width: 0; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 13px; word-break: break-all; }
.eug-stacked .eug-k-calc { height: auto !important; }
.eug-stacked .eug-calc { min-height: 480px; }
.eug-stacked .eug .eug-ckey, .eug-stacked .eug-ckey { min-height: 44px; }