/* Timers and reminders, charts, and the code runner. Light mode is
   generated into light-theme.css. */

/* ---------- Timers and reminders (timers.js) ---------- */
.learny-timers {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 130;
  display: grid; gap: 10px; width: min(300px, calc(100vw - 36px)); pointer-events: none;
}
.learny-timer-card {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px;
  color: #fff; background: rgba(28, 30, 38, 0.96); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  pointer-events: auto; opacity: 0; transform: translateY(12px) scale(0.97);
  transition: opacity 320ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1), border-color 300ms ease;
}
.learny-timer-card.is-visible { opacity: 1; transform: none; }
.learny-timer-card.is-done { border-color: rgba(88, 161, 255, 0.6); animation: learnyTimerPulse 1.6s ease-in-out infinite; }
.learny-timer-card.is-reminder.is-done { border-color: rgba(242, 169, 59, 0.7); }
@keyframes learnyTimerPulse { 50% { box-shadow: 0 0 0 6px rgba(88, 161, 255, 0.16), 0 18px 44px rgba(0, 0, 0, 0.45); } }
.learny-timer-ring { width: 44px; height: 44px; transform: rotate(-90deg); }
.learny-timer-ring .track { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 4; }
.learny-timer-ring .progress { fill: none; stroke: #4f8cff; stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 900ms linear; }
.is-reminder .learny-timer-ring .progress { stroke: #f2a93b; }
.learny-timer-ring .bell { fill: #f2a93b; transform: rotate(90deg); transform-origin: 22px 22px; }
.learny-timer-copy { display: grid; gap: 2px; min-width: 0; }
.learny-timer-copy strong { font: 700 1.15rem/1.1 "Google Sans", "Google Sans Text", Arial, sans-serif; font-variant-numeric: tabular-nums; }
.learny-timer-copy span { overflow: hidden; color: rgba(224, 226, 234, 0.7); font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
.learny-timer-close {
  min-height: 30px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px;
  color: #fff; background: transparent; cursor: pointer; font: 600 0.78rem/1 "Google Sans", "Google Sans Text", Arial, sans-serif;
}
.learny-timer-close:hover { background: rgba(255, 255, 255, 0.08); }
@media (max-width: 760px) { .learny-timers { right: 12px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- Charts (charts.js) ---------- */
.learny-chart {
  --chart-surface: #17181d;
  position: relative; margin: 12px 0; padding: 14px 14px 10px; border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px; background: var(--chart-surface);
}
.learny-chart[data-chart-state="ready"] > pre { display: none; }
.learny-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.learny-chart.is-pie svg { max-width: 240px; margin: 0 auto; }
.learny-chart-title { margin: 0 2px 10px; font-weight: 650; font-size: 0.92rem; }
.learny-chart-grid { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.learny-chart-axis { fill: rgba(224, 226, 234, 0.6); font: 500 11px "Google Sans", "Google Sans Text", Arial, sans-serif; }
.learny-chart-mark { transform-origin: bottom; transform-box: fill-box; animation: learnyChartGrow 700ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: var(--delay, 0ms); cursor: pointer; }
.learny-chart-mark:hover, .learny-chart-slice:hover { opacity: 0.85; }
@keyframes learnyChartGrow { from { transform: scaleY(0); } }
.learny-chart-line { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: learnyChartDraw 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes learnyChartDraw { to { stroke-dashoffset: 0; } }
.learny-chart-slice { stroke: var(--chart-surface); stroke-width: 2; cursor: pointer; transition: opacity 160ms ease; }
.learny-chart-hole { fill: var(--chart-surface); }
.learny-chart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 2px 0; padding: 0; list-style: none; color: rgba(224, 226, 234, 0.78); font-size: 0.8rem; }
.learny-chart-legend li { display: flex; align-items: center; gap: 6px; }
.learny-chart-legend span { width: 10px; height: 10px; border-radius: 3px; }
.learny-chart-tip {
  position: absolute; z-index: 2; padding: 6px 9px; border-radius: 9px; color: #fff; background: rgba(10, 11, 15, 0.94);
  font-size: 0.78rem; white-space: nowrap; pointer-events: none; transform: translate(-50%, calc(-100% - 10px));
}
.learny-chart-tip[hidden] { display: none; }

/* ---------- Code runner (code-runner.js) ---------- */
.code-runner-frame { position: fixed; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; left: -10px; top: -10px; }
.code-runner-bar { display: flex; justify-content: flex-end; margin: -4px 0 6px; }
.code-runner-button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px;
  border: 1px solid rgba(54, 194, 168, 0.4); border-radius: 999px; color: #8ff0d9; background: rgba(54, 194, 168, 0.08);
  cursor: pointer; font: 600 0.78rem/1 "Google Sans", "Google Sans Text", Arial, sans-serif;
  transition: background 180ms ease, border-color 180ms ease;
}
.code-runner-button svg { width: 12px; height: 12px; fill: currentColor; }
.code-runner-button:hover { background: rgba(54, 194, 168, 0.16); border-color: rgba(54, 194, 168, 0.7); }
.code-runner-button:disabled { opacity: 0.7; cursor: default; }
.code-runner-output { margin: 0 0 12px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: rgba(0, 0, 0, 0.35); overflow: hidden; }
.code-runner-output[hidden] { display: none; }
.code-runner-output.is-error { border-color: rgba(229, 99, 122, 0.5); }
.code-runner-status { display: block; padding: 7px 12px; color: rgba(224, 226, 234, 0.6); font-size: 0.74rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.code-runner-output pre { margin: 0; padding: 10px 12px; max-height: 320px; overflow: auto; color: #e6e9f6; font: 0.82rem/1.5 ui-monospace, "Cascadia Code", Consolas, monospace; white-space: pre-wrap; }
.code-runner-output.is-error pre { color: #ffb4c0; }

@media (prefers-reduced-motion: reduce) {
  .learny-timer-card, .learny-chart-mark, .learny-chart-line { animation: none !important; transition: none !important; }
  .learny-chart-line { stroke-dashoffset: 0; }
}

/* ---------- Read aloud (read-aloud.js) ---------- */
.read-aloud-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.read-aloud-button .speaker { fill: currentColor; stroke: none; }
.read-aloud-button .stop { display: none; fill: currentColor; stroke: none; }
.read-aloud-button.is-playing .speaker, .read-aloud-button.is-playing .waves { display: none; }
.read-aloud-button.is-playing .stop { display: block; }
.read-aloud-button.is-loading .waves { animation: readAloudWave 900ms ease-in-out infinite; }
.read-aloud-button.is-playing { color: #4f8cff; }
@keyframes readAloudWave { 50% { opacity: 0.25; } }
/* Settings > General: voice with its preview, and the speed slider. */
.read-aloud-voice { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.read-aloud-speed { display: flex; align-items: center; gap: 10px; color: rgba(224, 226, 234, 0.6); font-size: 0.78rem; }
.read-aloud-speed input { width: 150px; accent-color: #58a1ff; }
.read-aloud-speed output { min-width: 3em; color: rgba(224, 226, 234, 0.85); font-variant-numeric: tabular-nums; text-align: right; }
.read-aloud-status { color: #ff9b9b !important; }
.read-aloud-status:empty { display: none; }
@media (max-width: 760px) {
  .read-aloud-voice { justify-content: flex-start; flex-wrap: wrap; }
  .read-aloud-speed { flex-wrap: wrap; }
}

/* ---------- Follow-up chips (followups.js) ---------- */
.followup-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.followup-chip {
  max-width: 100%; padding: 8px 14px; border: 1px solid rgba(88, 161, 255, 0.32); border-radius: 999px;
  color: #d8e6ff; background: rgba(88, 161, 255, 0.08); cursor: pointer; text-align: left;
  font: 550 0.84rem/1.3 "Google Sans", "Google Sans Text", Arial, sans-serif;
  opacity: 0; transform: translateY(6px);
  transition: opacity 360ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1), background 180ms ease, border-color 180ms ease;
  transition-delay: var(--chip-delay, 0ms), var(--chip-delay, 0ms), 0ms, 0ms;
}
.followup-chips.is-visible .followup-chip { opacity: 1; transform: none; }
.followup-chip:hover { background: rgba(88, 161, 255, 0.16); border-color: rgba(88, 161, 255, 0.6); }
.followup-chips { position: relative; align-items: center; }
.followup-chips.is-leaving { opacity: 0; transform: translateY(4px); transition: opacity 240ms ease, transform 240ms ease; }
/* The faint X: hide this time / for this chat */
.followup-hide {
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  color: rgba(224, 226, 234, 0.4); background: transparent; cursor: pointer;
  opacity: 0; transition: opacity 360ms ease var(--chip-delay, 0ms), color 180ms ease, background 180ms ease;
}
.followup-chips.is-visible .followup-hide { opacity: 1; }
.followup-hide:hover, .followup-hide[aria-expanded="true"] { color: rgba(240, 242, 248, 0.9); background: rgba(255, 255, 255, 0.07); }
.followup-hide svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.followup-menu {
  position: absolute; z-index: 30; right: 0; bottom: calc(100% + 6px); display: grid; min-width: 180px; padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: rgba(28, 30, 36, 0.98);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  opacity: 0; transform: translateY(4px) scale(0.98); transform-origin: bottom right;
  transition: opacity 200ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.followup-menu.is-open { opacity: 1; transform: none; }
.followup-menu.opens-down { bottom: auto; top: calc(100% + 6px); transform-origin: top right; }
.followup-menu button {
  padding: 9px 12px; border: 0; border-radius: 8px; color: #e6e8ee; background: transparent; text-align: left; cursor: pointer;
  font: 500 0.86rem/1.2 "Google Sans", "Google Sans Text", Arial, sans-serif;
}
.followup-menu button:hover, .followup-menu button:focus-visible { background: rgba(255, 255, 255, 0.07); outline: none; }

/* Passkeys: sign-in button and the list in Settings > Security */
.account-passkey-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; padding: 11px 14px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; background: rgba(255, 255, 255, 0.04); color: inherit; font: inherit; font-weight: 600; cursor: pointer; transition: background 220ms ease, border-color 220ms ease; }
.account-passkey-button:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.24); }
.account-passkey-button:disabled { opacity: 0.6; cursor: progress; }
.account-passkey-button[hidden] { display: none; }
.account-passkey-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.settings-passkey-item { align-items: center; }
.settings-passkey-item > div { flex: 1 1 auto; min-width: 0; }
.settings-passkey-remove { flex: none; padding: 6px 12px; border: 1px solid rgba(255, 99, 99, 0.35); border-radius: 999px; background: transparent; color: #ff8a8a; font: inherit; font-size: 0.82rem; cursor: pointer; transition: background 200ms ease; }
.settings-passkey-remove:hover { background: rgba(255, 99, 99, 0.1); }

/* "Creating image..." (setTypingCreatingImage): shiny bold blue label, and the
   stars form rotating 3D shapes (star-shapes.js). The shine is one seamless
   tile (same blue at both ends) moved exactly one tile width per loop, so it
   never snaps when it repeats or when the label is redrawn. */
.message.typing.creating-image .workspace-agent-phase,
.message.typing.creating-image .workspace-agent-phase.is-entering,
.message.typing.creating-image .workspace-agent-phase.is-current {
  font-weight: 800;
  color: transparent;
  background-image: linear-gradient(100deg, #3b86ff 0%, #3b86ff 30%, #8fc0ff 42%, #f2f8ff 50%, #8fc0ff 58%, #3b86ff 70%, #3b86ff 100%);
  background-size: 200% 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(80, 150, 255, 0.4));
  opacity: 1;
  transform: none;
  animation: creatingImageShine 2.2s linear infinite;
}
.message.typing.creating-image .workspace-agent-dots span { color: #5fa4ff; -webkit-text-fill-color: #5fa4ff; }
@keyframes creatingImageShine {
  from { background-position: 200% 0; }
  to { background-position: 0% 0; }
}
.star-field .star { transition: opacity 900ms ease, width 900ms ease, height 900ms ease, box-shadow 900ms ease; }
.star-field.is-shaping .star {
  width: 0.6px;
  height: 0.6px;
  opacity: 0.3;
  box-shadow: none;
}
.star-shapes { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .message.typing.creating-image .workspace-agent-phase { animation: none; background-position: 50% 0; }
}

/* Settings > Timers and reminders (timers.js) */
.settings-svg-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.timers-settings { display: grid; gap: 22px; }
.timers-settings-intro { margin: 0; color: rgba(224, 226, 234, 0.66); font-size: 0.88rem; line-height: 1.5; }
.timers-settings-group { display: grid; gap: 8px; }
.timers-settings-group h3 { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(224, 226, 234, 0.55); }
.timers-settings-list { display: grid; gap: 8px; }
.timers-settings-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; background: rgba(255, 255, 255, 0.03); }
.timers-settings-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: rgba(88, 161, 255, 0.12); color: #8fc0ff; }
.timers-settings-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.timers-settings-copy { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.timers-settings-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.94rem; }
.timers-settings-copy span { color: rgba(224, 226, 234, 0.6); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.timers-settings-cancel { flex: none; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 0.82rem; cursor: pointer; transition: background 200ms ease, border-color 200ms ease; }
.timers-settings-cancel:hover { background: rgba(255, 99, 99, 0.1); border-color: rgba(255, 99, 99, 0.4); color: #ff9a9a; }
.timers-settings-empty { margin: 0; padding: 14px; border: 1px dashed rgba(255, 255, 255, 0.1); border-radius: 14px; color: rgba(224, 226, 234, 0.5); font-size: 0.86rem; text-align: center; }

/* Learny Control (control.js): the Allow / Deny card and Settings */
.control-approval {
  position: fixed; left: 50%; bottom: calc(132px + env(safe-area-inset-bottom, 0px)); z-index: 140;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  width: min(560px, calc(100vw - 32px)); padding: 14px 16px; overflow: hidden;
  border: 1px solid rgba(92, 157, 255, 0.45); border-radius: 18px; background: rgba(22, 24, 32, 0.97); color: #fff;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(92, 157, 255, 0.08);
  opacity: 0; transform: translate(-50%, 16px) scale(0.98);
  transition: opacity 260ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.control-approval.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.control-approval.is-answered { opacity: 0.6; }
.control-approval-star { width: 30px; height: 30px; fill: #5c9dff; filter: drop-shadow(0 0 8px rgba(92, 157, 255, 0.6)); animation: controlStarPulse 1.6s ease-in-out infinite; }
@keyframes controlStarPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.control-approval-copy { display: grid; gap: 3px; min-width: 0; }
.control-approval-copy span { color: rgba(224, 226, 234, 0.6); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; }
.control-approval-copy strong { font-size: 0.96rem; line-height: 1.35; overflow-wrap: anywhere; }
.control-approval-actions { display: flex; gap: 8px; }
.control-approval-actions button { padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: transparent; color: #fff; font: 650 0.86rem/1 "Google Sans", Arial, sans-serif; cursor: pointer; transition: background 180ms ease, transform 160ms ease; }
.control-approval-actions button:hover { background: rgba(255, 255, 255, 0.08); }
.control-approval-actions button:active { transform: scale(0.96); }
.control-approval-actions .control-approval-allow { border-color: transparent; background: #4f8cff; }
.control-approval-actions .control-approval-allow:hover { background: #6a9eff; }
.control-approval-timer { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: linear-gradient(90deg, #4f8cff, #8fc0ff); transform-origin: left; animation: controlTimer 120s linear forwards; }
@keyframes controlTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 560px) {
  .control-approval { grid-template-columns: auto 1fr; }
  .control-approval-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
.control-settings { display: grid; gap: 18px; }
.control-settings [hidden] { display: none !important; }
.control-status { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; background: rgba(255, 255, 255, 0.03); }
.control-status-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #6b7280; box-shadow: 0 0 0 4px rgba(107, 114, 128, 0.15); transition: background 300ms ease, box-shadow 300ms ease; }
.control-status[data-tone="on"] .control-status-dot { background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18); animation: controlLive 2.4s ease-in-out infinite; }
.control-status[data-tone="wait"] .control-status-dot { background: #fbbf24; box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.18); }
@keyframes controlLive { 0%, 100% { box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18); } 50% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0.06); } }
.control-status-copy { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.control-status-copy strong { font-size: 0.95rem; }
.control-status-copy span { color: rgba(224, 226, 234, 0.62); font-size: 0.84rem; }
.control-install, .control-about { display: grid; gap: 10px; }
.control-install h3, .control-about h3 { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(224, 226, 234, 0.55); }
.control-install ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.control-install li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; background: rgba(255, 255, 255, 0.025); font-size: 0.9rem; line-height: 1.45; counter-increment: step; }
.control-install li::before { content: counter(step); display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: rgba(79, 140, 255, 0.16); color: #8fc0ff; font-weight: 700; font-size: 0.82rem; }
.control-install li span { flex: 1 1 auto; }
.control-install code { padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); font-size: 0.84em; }
.control-download { flex: none; text-decoration: none; }
.control-note, .control-try { margin: 0; color: rgba(224, 226, 234, 0.6); font-size: 0.84rem; line-height: 1.5; }
.control-about ul { display: grid; gap: 8px; margin: 0; padding-left: 18px; color: rgba(224, 226, 234, 0.82); font-size: 0.9rem; line-height: 1.5; }
.control-try em { color: #8fc0ff; font-style: normal; }

/* Learny Control settings: download button, permissions, steps, blocked sites */
.control-download {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 16px; flex: none;
  border: 0; border-radius: 999px; background: #4f8cff; color: #fff; font: 650 0.82rem/1 "Google Sans", Arial, sans-serif;
  text-decoration: none; cursor: pointer; transition: background 180ms ease, transform 160ms ease;
}
.control-download:hover { background: #6a9eff; }
.control-download:active { transform: scale(0.97); }
.control-group { display: grid; gap: 10px; }
.control-group h3 { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(224, 226, 234, 0.55); }
.control-modes { display: grid; gap: 8px; }
.control-mode {
  display: grid; gap: 4px; padding: 14px 16px 14px 44px; position: relative; text-align: left; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 14px; background: rgba(255, 255, 255, 0.025); color: inherit; font: inherit;
  transition: border-color 200ms ease, background 200ms ease;
}
.control-mode::before { content: ""; position: absolute; left: 16px; top: 17px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.3); transition: border-color 200ms ease, box-shadow 200ms ease; }
.control-mode:hover { background: rgba(255, 255, 255, 0.05); }
.control-mode.is-selected { border-color: rgba(79, 140, 255, 0.7); background: rgba(79, 140, 255, 0.09); }
.control-mode.is-selected::before { border-color: #4f8cff; box-shadow: inset 0 0 0 3px #16171b, inset 0 0 0 8px #4f8cff; }
.control-mode.is-danger.is-selected { border-color: rgba(255, 107, 107, 0.6); background: rgba(255, 107, 107, 0.08); }
.control-mode.is-danger.is-selected::before { border-color: #ff6b6b; box-shadow: inset 0 0 0 3px #16171b, inset 0 0 0 8px #ff6b6b; }
.control-mode strong { font-size: 0.94rem; }
.control-mode strong em { margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(79, 140, 255, 0.18); color: #8fc0ff; font-size: 0.7rem; font-style: normal; font-weight: 700; vertical-align: 1px; }
.control-mode span { color: rgba(224, 226, 234, 0.62); font-size: 0.84rem; line-height: 1.45; }
.control-mode:disabled { cursor: default; opacity: 0.6; }
.control-block-form { display: flex; gap: 8px; }
.control-block-form input { flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; background: rgba(255, 255, 255, 0.04); color: inherit; font: inherit; font-size: 0.9rem; outline: none; transition: border-color 200ms ease; }
.control-block-form input:focus { border-color: rgba(79, 140, 255, 0.7); }
.control-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.control-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: 999px; background: rgba(255, 107, 107, 0.12); color: #ffb3b3; font-size: 0.84rem; }
.control-chip button { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.control-chip button:hover { background: rgba(255, 255, 255, 0.1); }
.control-chip svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.control-chips-empty { color: rgba(224, 226, 234, 0.45); font-size: 0.84rem; }
.control-update { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; padding: 12px 14px; border: 1px solid rgba(251, 191, 36, 0.35); border-radius: 14px; background: rgba(251, 191, 36, 0.07); font-size: 0.9rem; }
.control-update small { grid-column: 1 / -1; color: rgba(224, 226, 234, 0.6); font-size: 0.8rem; }

/* Install steps: the unzip step and its zip → folder picture */
.control-install li small { display: block; margin-top: 3px; color: rgba(224, 226, 234, 0.55); font-size: 0.8rem; }
.control-install li > button, .control-install li > a { flex: none; }
.control-unzip { display: inline-flex; align-items: center; gap: 4px; flex: none; color: #8fc0ff; }
.control-unzip svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.control-unzip .control-unzip-arrow { width: 18px; height: 18px; opacity: 0.7; }
.control-install li.is-next { border-color: rgba(79, 140, 255, 0.75); background: rgba(79, 140, 255, 0.1); animation: controlNext 1.6s ease-out 2; }
@keyframes controlNext { 0% { box-shadow: 0 0 0 0 rgba(79, 140, 255, 0.5); } 100% { box-shadow: 0 0 0 10px rgba(79, 140, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .control-install li.is-next { animation: none; } }

/* Learny Control: page watches */
.control-watches { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.control-watch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; }
.control-watch > span { display: grid; gap: 2px; min-width: 0; }
.control-watch a { overflow: hidden; color: inherit; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.control-watch a:hover { text-decoration: underline; }
.control-watch small { color: rgba(224, 226, 234, 0.55); font-size: 0.8rem; }
.control-watch button { flex: none; }