:root {
  --bg: #07090d;
  --panel: #12161d;
  --panel-2: #1a2029;
  --line: rgba(255,255,255,.12);
  --text: #f4f7fa;
  --muted: #98a3af;
  --accent: #91bbd4;
  --danger: #ff716b;
  --status-h: clamp(42px, 10.4vw, 74px);
  --sysnav-h: clamp(48px, 8vh, 62px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; color: var(--text); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.screen { position: fixed; inset: 0; display: none; overflow: hidden; }
.screen.active { display: block; }

.menu-screen {
  background: radial-gradient(circle at 50% 18%, rgba(67, 94, 128, .28), transparent 40%), linear-gradient(#06080c, #020305);
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
.menu-brand { text-align: center; margin-top: 5vh; }
.menu-brand h1 { margin: 0; font-size: clamp(52px, 15vw, 92px); letter-spacing: .08em; line-height: .9; }
.menu-subtitle { margin-top: 14px; font-size: clamp(21px, 6vw, 32px); letter-spacing: .18em; color: rgba(255,255,255,.72); }
.menu-version { margin-top: 7px; color: rgba(255,255,255,.34); font-size: 11px; letter-spacing: .12em; }
.profile-strip { width: min(420px, 100%); margin: 7vh auto 0; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 15px; color: var(--muted); }
.profile-strip select { width: 100%; }
.menu-actions { width: min(420px, 100%); margin: 3vh auto 0; display: grid; gap: 14px; }
.menu-action-with-status { display: grid; place-items: center; align-content: center; gap: 2px; line-height: 1.15; }
.menu-action-with-status small { color: var(--muted); font-size: 11px; font-weight: 600; }
.primary-action, .secondary-action, .save-button, .mini-button {
  border: 1px solid var(--line); border-radius: 18px; min-height: 56px; padding: 0 22px; color: #fff; background: var(--panel-2); font-weight: 680;
}
.primary-action { background: var(--accent); font-size: 21px; border-color: rgba(255,255,255,.36); }
.secondary-action.compact { min-height: 44px; border-radius: 14px; }
.menu-status { width: min(420px,100%); margin: 18px auto 0; min-height: 22px; text-align: center; color: var(--muted); font-size: 13px; }

.settings-screen, .instructions-screen, .custom-stack-editor-screen { background: var(--bg); overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
.panel-header { position: sticky; z-index: 20; top: 0; min-height: 78px; display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) 14px 10px; background: rgba(7,9,13,.94); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.panel-header h2 { margin: 0; font-size: 23px; }
.panel-header p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.icon-button { width: 46px; height: 46px; border: 0; border-radius: 50%; color: #fff; background: var(--panel-2); font-size: 38px; line-height: 1; }
.save-button { min-height: 44px; border-radius: 14px; background: var(--accent); }
.settings-content { width: min(780px, 100%); margin: 0 auto; padding: 16px 16px 80px; }
details { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; margin-bottom: 14px; overflow: hidden; }
summary { padding: 17px 18px; font-weight: 720; cursor: pointer; }
details[open] summary { border-bottom: 1px solid var(--line); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; }
.field, .switch-field { display: grid; gap: 8px; color: var(--muted); font-size: 13px; }
.field.full, .switch-field { grid-column: 1 / -1; }
.switch-field { grid-template-columns: 24px 1fr; align-items: center; color: var(--text); }
input, select { width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 12px; background: #090c11; color: #fff; padding: 0 13px; }
input[type="checkbox"] { width: 20px; min-height: 20px; accent-color: var(--accent); }
input[type="range"] { padding: 0; }
input[type="file"] { padding: 10px; }
.unit-input { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.time-input-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; }
.button-row { display: flex; gap: 12px; padding: 16px; }
.file-button { display: grid; place-items: center; position: relative; overflow: hidden; }
.file-button input { position: absolute; inset: 0; opacity: 0; }
.instructions-screen article { width: min(720px,100%); margin: 0 auto; padding: 22px 24px 80px; line-height: 1.62; color: #d8dee5; }
.instructions-screen h3 { margin-top: 28px; color: #fff; }
kbd { background: #242a33; border: 1px solid #49515d; border-radius: 5px; padding: 2px 6px; }

.performance-screen { background: #000; user-select: none; touch-action: manipulation; }
#sleepScreen { cursor: pointer; }
.fake-status { position: absolute; z-index: 50; top: 0; left: 0; right: 0; height: var(--status-h); background: #000 url("assets/header-template.png") left top / 100% auto no-repeat; }
.status-time { position: absolute; left: 2.7vw; top: 2.4vw; font-size: 4.1vw; font-weight: 680; font-variant-numeric: tabular-nums; }
.battery-pill { --fill: 45%; position: absolute; right: 3.25vw; top: 2.72vw; width: 6.1vw; height: 3.7vw; border-radius: 999px; display: grid; place-items: center; color: #252525; background: linear-gradient(to right,#efefef 0,#efefef var(--fill),#787a7d var(--fill),#787a7d 100%); overflow: hidden; }
.battery-number { font-size: 2.25vw; font-weight: 760; line-height: 1; }
.system-nav { position: absolute; z-index: 60; left: 0; right: 0; bottom: 0; height: var(--sysnav-h); display: grid; grid-template-columns: repeat(3,1fr); align-items: center; pointer-events: none; }
.recent-lines { justify-self: center; width: 20px; height: 23px; border-left: 2.5px solid #fff; border-right: 2.5px solid #fff; }
.home-ring { justify-self: center; width: 28px; height: 28px; border: 2.5px solid #fff; border-radius: 50%; background: transparent; pointer-events: auto; }
.back-chevron { justify-self: center; width: 18px; height: 18px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(45deg); }

.pin-screen { transition: filter .32s ease; }
.pin-screen.dimmed { filter: brightness(.27); }
.pin-content { position: absolute; inset: var(--status-h) 0 var(--sysnav-h); display: flex; flex-direction: column; align-items: center; background: radial-gradient(circle at 50% 25%, rgba(35,40,50,.25), transparent 43%), #000; }
.lock-clock { text-align: center; margin-top: clamp(25px,6vh,60px); }
.lock-clock > div { font-size: clamp(62px,18vw,96px); font-weight: 300; letter-spacing: -.06em; line-height: 1; }
.lock-clock small { display: block; margin-top: 8px; font-size: 18px; color: rgba(255,255,255,.82); }
.pin-panel { width: min(440px,100%); margin-top: auto; padding: 0 25px 20px; text-align: center; }
.pin-panel h2 { font-size: 19px; font-weight: 520; margin: 0 0 14px; }
.pin-dots { min-height: 22px; display: flex; justify-content: center; gap: 14px; margin-bottom: 13px; }
.pin-dots i { width: 12px; height: 12px; border: 1.6px solid #fff; border-radius: 50%; }
.pin-dots i.filled { background: #fff; }
.keypad { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px 26px; justify-items: center; }
.key { width: clamp(66px,18vw,82px); height: clamp(66px,18vw,82px); border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; font-size: 31px; }
.key:active { background: rgba(255,255,255,.23); }
.key.blank { visibility: hidden; }
.key.delete { background: transparent; font-size: 25px; }
.pin-footer { display: flex; justify-content: space-between; margin-top: 10px; font-size: 14px; color: rgba(255,255,255,.84); }

.fake-home-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.home-photo-exit { position: absolute; z-index: 80; left: 35%; right: 35%; bottom: 0; height: var(--sysnav-h); border: 0; background: transparent; }
.peek { position: absolute; z-index: 55; top: calc(var(--status-h) + 12px); right: 12px; min-width: 56px; min-height: 26px; padding: 5px 8px; border-radius: 8px; background: rgba(255,0,0,.16); color: rgba(255,255,255,.62); font-size: 11px; text-align: center; pointer-events: none; }

.stopwatch-screen { background: radial-gradient(ellipse 90% 58% at 50% 48%, rgba(14,39,78,.68), rgba(10,25,50,.54) 37%, rgba(15,14,42,.42) 62%, rgba(0,0,0,0) 82%), #000; }
.chrono-shell { position: absolute; inset: var(--status-h) 0 var(--sysnav-h); }
.chrono-menu-dots { position: absolute; right: 28px; top: 14px; display: grid; gap: 5px; }
.chrono-menu-dots i { width: 5px; height: 5px; border-radius: 50%; background: #bad0df; }
.time-display { position: absolute; top: 30%; left: 50%; transform: translate(-50%,-50%); white-space: nowrap; font-size: clamp(58px,13vw,92px); font-weight: 400; letter-spacing: -.04em; color: #d9e8f3; font-variant-numeric: tabular-nums; }
.laps { position: absolute; top: 42%; left: 8%; right: 8%; max-height: 25%; overflow-y: auto; }
.lap-row { display: grid; grid-template-columns: 1fr 1fr; padding: 9px 4px; border-bottom: 1px solid rgba(255,255,255,.08); color: rgba(225,230,235,.78); font-variant-numeric: tabular-nums; }
.lap-row span:last-child { text-align: right; }
.pager { position: absolute; left: 0; right: 0; bottom: 30%; display: flex; justify-content: center; gap: 20px; }
.pager i { width: 12px; height: 12px; border-radius: 50%; background: #67686d; }
.pager i.active { background: #a3a3a8; }
.chrono-controls { position: absolute; left: 0; right: 0; bottom: 12%; display: flex; justify-content: space-between; padding: 0 9.9vw; }
.round-button { width: 25.4vw; height: 25.4vw; border: 0; border-radius: 50%; background: transparent center/100% 100% no-repeat; color: #fff; font-size: 4.1vw; font-weight: 680; }
.left-button { background-image: url("assets/button-left-active.png"); }
.left-button:disabled { background-image: url("assets/button-left-disabled.png"); color: #aaa9ab; opacity: 1; }
.right-button { background-image: url("assets/button-right.png"); }
.clock-dock { position: absolute; left: 4%; right: 4%; bottom: 0; height: 76px; border-radius: 38px; background: rgba(48,49,51,.97); display: grid; grid-template-columns: repeat(4,1fr); place-items: center; color: #e8e8e8; font-size: 28px; }
.clock-dock .active { width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; }
.invisible-zone { position: absolute; z-index: 70; border: 0; background: transparent; }
.top-right-zone { top: var(--status-h); right: 0; width: 23vw; height: 15vh; }

.toast { position: fixed; z-index: 200; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translate(-50%, 20px); padding: 12px 18px; border-radius: 24px; background: rgba(50,54,61,.97); color: #fff; opacity: 0; pointer-events: none; transition: .2s ease; max-width: 90%; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
.hidden { display: none !important; }

@media (max-width: 560px) {
  .field-grid { grid-template-columns: 1fr; }
  .field.full, .switch-field { grid-column: auto; }
  .save-button { padding: 0 12px; }
}
@media (max-height: 760px) {
  .menu-brand { margin-top: 2vh; }
  .profile-strip { margin-top: 3vh; }
  .menu-actions { margin-top: 2vh; }
  .lock-clock { margin-top: 12px; }
  .pin-panel { padding-bottom: 4px; }
  .key { width: 59px; height: 59px; font-size: 27px; }
  .keypad { gap: 4px 28px; }
  .time-display { top: 26%; }
  .chrono-controls { bottom: 11%; }
  .clock-dock { height: 62px; }
}


/* Composants historiques du menu et des réglages */
.method-note, .field-help {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.image-settings {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.image-settings h4 { margin: 0; color: var(--text); }
.danger-button { color: #ffaaa5; }
.history-list {
  max-height: 260px;
  overflow-y: auto;
  margin: 0 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.history-empty { padding: 18px; color: var(--muted); text-align: center; }
.history-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.history-row:last-child { border-bottom: 0; }
.history-row small { color: var(--muted); }
.history-row strong { font-variant-numeric: tabular-nums; }

.pin-screen.invalid-pin .pin-dots i {
  border-color: #ff6f69;
  background: rgba(255, 60, 55, .32);
}
.pin-content {
  background-size: cover;
  background-position: center;
}

.stopwatch-screen {
  --time-scale: 1;
  --time-top: 30%;
  --button-scale: 1;
  --lap-scale: 1;
  background-size: cover;
  background-position: center;
}
.time-display {
  top: var(--time-top);
  transform: translate(-50%, -50%) scale(var(--time-scale));
}
.laps { transform: scale(var(--lap-scale)); transform-origin: top center; }
.round-button {
  transform: scale(var(--button-scale));
}
.round-button:active {
  transform: scale(calc(var(--button-scale) * .98));
}

.peek.peek-top-left { left: 12px; right: auto; top: calc(var(--status-h) + 12px); bottom: auto; }
.peek.peek-top-right { right: 12px; left: auto; top: calc(var(--status-h) + 12px); bottom: auto; }
.peek.peek-bottom-left { left: 12px; right: auto; top: auto; bottom: calc(var(--sysnav-h) + 92px); }
.peek.peek-bottom-right { right: 12px; left: auto; top: auto; bottom: calc(var(--sysnav-h) + 92px); }
.peek.peek-center { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); }

.bottom-left-zone {
  left: 0;
  bottom: var(--sysnav-h);
  width: 28vw;
  height: 25vh;
}
.bottom-right-zone {
  right: 0;
  bottom: var(--sysnav-h);
  width: 28vw;
  height: 25vh;
}
.invisible-zone.zones-disabled { pointer-events: none; }

.fake-notification {
  position: fixed;
  z-index: 180;
  left: 14px;
  right: 14px;
  top: calc(env(safe-area-inset-top) + 12px);
  min-height: 62px;
  padding: 13px 18px;
  border-radius: 20px;
  background: rgba(48, 51, 57, .96);
  color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.38);
  display: flex;
  align-items: center;
  font-size: 15px;
  transform: translateY(-130%);
  opacity: 0;
  pointer-events: none;
  transition: .24s ease;
}
.fake-notification.show {
  transform: translateY(0);
  opacity: 1;
}


/* Zones tactiles éditables */
.round-button,
.key,
.home-ring,
.home-photo-exit {
  pointer-events: none !important;
}

.runtime-zone {
  position: absolute;
  z-index: 92;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  opacity: 0;
  touch-action: manipulation;
}
.runtime-zone[hidden] { display: none !important; }

.zone-settings-callout {
  display: grid;
  gap: 14px;
  padding: 16px;
}
.zone-settings-callout p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
.primary-action.compact {
  min-height: 48px;
  border-radius: 15px;
}

.zone-editor-screen {
  background: var(--bg);
  overflow-y: auto;
}
.zone-editor-content {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 16px 16px 80px;
}
.zone-editor-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
  margin-bottom: 18px;
}
.zone-editor-layout {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(250px, 320px);
  gap: 22px;
  align-items: start;
}
.zone-preview-column {
  display: grid;
  justify-items: center;
}
.zone-preview-frame {
  position: relative;
  width: min(360px, 86vw);
  aspect-ratio: 709 / 1536;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.28);
  border-radius: 28px;
  background: #000;
  box-shadow: 0 22px 55px rgba(0,0,0,.45);
  touch-action: none;
  user-select: none;
}
.zone-preview-visual,
.zone-editor-layer {
  position: absolute;
  inset: 0;
}
.zone-preview-visual {
  overflow: hidden;
  background: #000;
  pointer-events: none;
}
.zone-preview-visual img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.zone-editor-layer { z-index: 8; }

.editor-zone-box {
  position: absolute;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 5px 7px;
  border: 2px solid #3fe1ff;
  border-radius: 8px;
  background: rgba(27, 174, 211, .18);
  color: #fff;
  font-size: 10px;
  font-weight: 760;
  line-height: 1.15;
  text-shadow: 0 1px 2px #000;
  cursor: grab;
  overflow: visible;
  touch-action: none;
}
.editor-zone-box.selected {
  z-index: 20;
  border-color: #ffd34f;
  background: rgba(255, 190, 32, .24);
}
.editor-zone-box.disabled {
  border-style: dashed;
  opacity: .48;
}
.editor-zone-box:active { cursor: grabbing; }
.zone-resize-handle {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #168ca8;
  cursor: nwse-resize;
}
.editor-zone-box.selected .zone-resize-handle {
  background: #d59c00;
}

.zone-editor-hint {
  max-width: 520px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  line-height: 1.45;
}
.zone-editor-sidebar {
  display: grid;
  gap: 16px;
}
.zone-editor-sidebar h3 {
  margin: 0;
  font-size: 16px;
}
.zone-list {
  display: grid;
  gap: 8px;
}
.zone-list-button {
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
}
.zone-list-button.selected {
  border-color: var(--accent);
  background: rgba(145, 187, 212, .17);
}
.zone-list-button small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}
.zone-inspector {
  display: grid;
  gap: 13px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.zone-number-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* Prévisualisations décoratives de l’éditeur */
.editor-fake-status {
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 4.9%;
  background: #030303;
}
.editor-fake-status::before {
  content: "12:34";
  position: absolute;
  left: 3%;
  top: 23%;
  font-size: 2.25cqw;
  font-weight: 700;
}
.editor-fake-status::after {
  content: "45";
  position: absolute;
  right: 4%;
  top: 24%;
  padding: 1px 4px;
  border-radius: 8px;
  background: #e8e8e8;
  color: #222;
  font-size: 1.8cqw;
  font-weight: 800;
}
.editor-stopwatch-visual {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 58% at 50% 48%, rgba(14,39,78,.68), rgba(10,25,50,.54) 37%, rgba(15,14,42,.42) 62%, rgba(0,0,0,0) 82%),
    #000;
  background-position: center;
  background-size: cover;
}
.editor-stopwatch-time {
  position: absolute;
  top: 29%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #d9e8f3;
  font-size: 7.7cqw;
  white-space: nowrap;
}
.editor-stopwatch-button {
  position: absolute;
  top: 70%;
  width: 25.4%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-position: center;
  background-size: 100% 100%;
}
.editor-stopwatch-button.left {
  left: 10%;
  background-image: url("assets/button-left-active.png");
}
.editor-stopwatch-button.right {
  right: 10%;
  background-image: url("assets/button-right.png");
}
.editor-stopwatch-dock {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 4.2%;
  height: 5.1%;
  border-radius: 999px;
  background: rgba(48,49,51,.97);
}
.editor-stopwatch-home {
  position: absolute;
  left: 50%;
  bottom: 1.15%;
  width: 4.2%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border: 1px solid #fff;
  border-radius: 50%;
}
.editor-pin-visual {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 25%, rgba(35,40,50,.25), transparent 43%), #000;
  background-position: center;
  background-size: cover;
}
.editor-pin-clock {
  position: absolute;
  top: 8%;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-size: 10cqw;
  font-weight: 300;
}
.editor-pin-caption {
  position: absolute;
  top: 43%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 2.6cqw;
}
.editor-pin-key {
  position: absolute;
  width: 18%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  font-size: 4.5cqw;
}
.editor-pin-home {
  position: absolute;
  left: 50%;
  bottom: 1.15%;
  width: 4.2%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border: 1px solid #fff;
  border-radius: 50%;
}

@media (max-width: 760px) {
  .zone-editor-layout { grid-template-columns: 1fr; }
  .zone-editor-sidebar { width: min(520px, 100%); margin: 0 auto; }
  .zone-editor-toolbar { grid-template-columns: 1fr; }
}

/* ACAAT mini 0.4.0 — skins */
.stopwatch-screen {
  --skin-time-left: 50%;
  --skin-time-top: 28.7%;
  --skin-secondary-time-top: 36.4%;
  --skin-time-color: #d9e8f3;
  --skin-secondary-color: #d9e8f3;
  --skin-laps-top: 41.8%;
  --skin-laps-left: 5.2%;
  --skin-laps-right: 5.2%;
  --skin-laps-max-height: 34%;
  --skin-button-top: 70.8%;
  --skin-button-side: 9.9vw;
  --skin-button-width: 25.4vw;
  --skin-button-font-size: 4.1vw;
  --skin-button-text-color: #fff;
  --skin-dock-left: 4%;
  --skin-dock-right: 4%;
  --skin-dock-bottom: 4%;
  --skin-dock-height: 7%;
  --skin-pager-bottom: 29.2%;
  --skin-pager-gap: 20px;
  --skin-pager-dot-size: 12px;
  --skin-menu-top: 14px;
  --skin-menu-right: 28px;
  --skin-menu-color: #bad0df;
}

.time-display {
  left: var(--skin-time-left);
  top: var(--skin-time-top);
  color: var(--skin-time-color);
}
.secondary-time-display {
  position: absolute;
  left: 50%;
  top: var(--skin-secondary-time-top);
  transform: translate(-50%, -50%) scale(var(--skin-secondary-time-scale, 1));
  color: var(--skin-secondary-color);
  white-space: nowrap;
  font-size: clamp(26px, 7vw, 54px);
  font-weight: 400;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.laps {
  top: var(--skin-laps-top);
  left: var(--skin-laps-left);
  right: var(--skin-laps-right);
  max-height: var(--skin-laps-max-height);
}
.chrono-menu-dots {
  top: var(--skin-menu-top);
  right: var(--skin-menu-right);
}
.chrono-menu-dots i {
  background: var(--skin-menu-color);
}
.pager {
  bottom: var(--skin-pager-bottom);
  gap: var(--skin-pager-gap);
}
.pager i {
  width: var(--skin-pager-dot-size);
  height: var(--skin-pager-dot-size);
}
.chrono-controls {
  top: var(--skin-button-top);
  bottom: auto;
  padding: 0 var(--skin-button-side);
}
.round-button {
  width: var(--skin-button-width);
  height: var(--skin-button-width);
  font-size: var(--skin-button-font-size);
  color: var(--skin-button-text-color);
}
.clock-dock {
  left: var(--skin-dock-left);
  right: var(--skin-dock-right);
  bottom: var(--skin-dock-bottom);
  height: var(--skin-dock-height);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
}
.clock-dock.use-image {
  background-color: transparent;
}
.clock-dock.use-image span {
  opacity: 0;
}
.laps.samsung-laps {
  color: rgba(225,230,235,.78);
  overflow: hidden auto;
}
.samsung-laps-header,
.samsung-lap-row {
  display: grid;
  grid-template-columns: 22% 39% 39%;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.samsung-laps-header {
  padding: 0 4px 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.16);
  color: rgba(225,230,235,.82);
  font-size: clamp(12px, 3.1vw, 22px);
  font-weight: 650;
}
.samsung-lap-row {
  padding: 4px;
  color: rgba(209,219,227,.74);
  font-size: clamp(15px, 3.55vw, 28px);
}
.samsung-lap-row span {
  text-align: center;
}
.samsung-lap-row.accent {
  color: #ff7b78;
}
.skin-button-row {
  padding: 0;
}

/* ACAAT mini 0.5.0 — éditeur visuel de skin */
.skin-editor-screen {
  background: var(--bg);
  overflow-y: auto;
}
.skin-editor-content {
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 16px 16px 80px;
}
.skin-editor-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 18px;
}
.skin-editor-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(260px, 330px);
  gap: 24px;
  align-items: start;
}
.skin-preview-column {
  display: grid;
  justify-items: center;
}
.skin-preview-frame {
  position: relative;
  width: min(390px, 88vw);
  aspect-ratio: 709 / 1536;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 28px;
  background: #000;
  box-shadow: 0 22px 58px rgba(0,0,0,.48);
  touch-action: none;
  user-select: none;
  container-type: size;
}
.skin-preview-stage,
.skin-editor-layer {
  position: absolute;
  inset: 0;
}
.skin-preview-stage {
  overflow: hidden;
  background: #000;
  pointer-events: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.skin-editor-layer { z-index: 30; }
.skin-editor-hint {
  max-width: 560px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.48;
  text-align: center;
}
.skin-editor-sidebar {
  display: grid;
  gap: 16px;
}
.skin-editor-sidebar h3 {
  margin: 0;
  font-size: 16px;
}
.skin-element-list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
}
.skin-element-list-button {
  min-height: 46px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
}
.skin-element-list-button.selected {
  border-color: #ffd34f;
  background: rgba(255,190,32,.13);
}
.skin-element-list-button small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}
.skin-inspector {
  display: grid;
  gap: 13px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.skin-number-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.skin-editor-box {
  position: absolute;
  display: flex;
  align-items: flex-start;
  padding: 5px 7px;
  border: 2px solid #41dcff;
  border-radius: 8px;
  background: rgba(35,178,216,.16);
  color: #fff;
  font-size: 10px;
  font-weight: 760;
  line-height: 1.15;
  text-shadow: 0 1px 2px #000;
  cursor: grab;
  touch-action: none;
  overflow: visible;
}
.skin-editor-box.selected {
  z-index: 40;
  border-color: #ffd34f;
  background: rgba(255,190,32,.22);
}
.skin-editor-box.disabled {
  border-style: dashed;
  opacity: .46;
}
.skin-editor-box:active { cursor: grabbing; }
.skin-editor-resize-handle {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #168ca8;
  cursor: nwse-resize;
}
.skin-editor-box.selected .skin-editor-resize-handle { background: #d59c00; }

/* Stage de prévisualisation : mêmes éléments que le chrono réel */
.skin-preview-element {
  position: absolute;
  overflow: hidden;
}
.skin-preview-status {
  background: #000 url("assets/header-template.png") left top / 100% auto no-repeat;
}
.skin-preview-status::before {
  content: "17:34";
  position: absolute;
  left: 3%;
  top: 24%;
  color: #fff;
  font-size: 3.2cqw;
  font-weight: 700;
}
.skin-preview-time,
.skin-preview-secondary-time {
  display: grid;
  place-items: center;
  color: #d9e8f3;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.skin-preview-time span,
.skin-preview-secondary-time span {
  display: block;
  transform-origin: center;
}
.skin-preview-menu-dots {
  display: grid;
  place-items: center;
}
.skin-preview-menu-dots span {
  display: grid;
  gap: 8%;
}
.skin-preview-menu-dots i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #bad0df;
}
.skin-preview-button img,
.skin-preview-dock img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.skin-preview-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18%;
}
.skin-preview-pager i {
  display: block;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #67686d;
}
.skin-preview-pager i:last-child { background: #a3a3a8; }
.skin-preview-system-nav {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  align-items: center;
}
.skin-preview-system-nav .recent {
  justify-self: center;
  width: 10%;
  height: 42%;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
}
.skin-preview-system-nav .home {
  justify-self: center;
  width: 12%;
  aspect-ratio: 1;
  border: 2px solid #fff;
  border-radius: 50%;
}
.skin-preview-system-nav .back {
  justify-self: center;
  width: 8%;
  aspect-ratio: 1;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.skin-preview-laps {
  color: rgba(209,219,227,.76);
  font-variant-numeric: tabular-nums;
}
.skin-preview-laps .preview-laps-header,
.skin-preview-laps .preview-lap-row {
  display: grid;
  grid-template-columns: 22% 39% 39%;
  align-items: center;
  text-align: center;
}
.skin-preview-laps .preview-laps-header {
  height: 15%;
  border-bottom: 1px solid rgba(255,255,255,.16);
  font-weight: 650;
}
.skin-preview-laps .preview-lap-row { height: 10.5%; }
.skin-preview-laps .preview-lap-row.accent { color: #ff7b78; }

/* Le chrono réel est positionné sur l'écran complet par le skin */
.stopwatch-screen .chrono-shell { inset: 0; }
.stopwatch-screen .fake-status,
.stopwatch-screen .chrono-menu-dots,
.stopwatch-screen .time-display,
.stopwatch-screen .secondary-time-display,
.stopwatch-screen .laps,
.stopwatch-screen .pager,
.stopwatch-screen .chrono-controls,
.stopwatch-screen .clock-dock,
.stopwatch-screen .system-nav {
  position: absolute;
}
.stopwatch-screen .time-display,
.stopwatch-screen .secondary-time-display {
  display: grid;
  place-items: center;
  transform: none !important;
}
.stopwatch-screen .time-display.hidden-skin-element,
.stopwatch-screen .secondary-time-display.hidden-skin-element,
.stopwatch-screen .laps.hidden-skin-element,
.stopwatch-screen .pager.hidden-skin-element,
.stopwatch-screen .chrono-controls.hidden-skin-element,
.stopwatch-screen .clock-dock.hidden-skin-element,
.stopwatch-screen .chrono-menu-dots.hidden-skin-element,
.stopwatch-screen .fake-status.hidden-skin-element,
.stopwatch-screen .system-nav.hidden-skin-element {
  display: none !important;
}
.stopwatch-screen .time-display {
  font-size: clamp(28px, 13vw, 96px);
}
.stopwatch-screen .secondary-time-display {
  font-size: clamp(22px, 7vw, 56px);
}
.stopwatch-screen .chrono-controls {
  display: block;
  padding: 0;
}
.stopwatch-screen .round-button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none !important;
  background-size: contain;
  background-position: center;
}
.stopwatch-screen .clock-dock { border-radius: 999px; }
.stopwatch-screen .system-nav { z-index: 60; }

@media (max-width: 800px) {
  .skin-editor-toolbar { grid-template-columns: 1fr; }
  .skin-editor-layout { grid-template-columns: 1fr; }
  .skin-editor-sidebar { width: min(540px, 100%); margin: 0 auto; }
}
.hidden-skin-element { display: none !important; }
.preview-button-label { pointer-events: none; }
#stopwatchStatusBar .status-time {
  left: 3%;
  top: 22%;
  font-size: var(--skin-status-time-size, 4.1vw);
}
#stopwatchStatusBar .battery-pill {
  right: 3.2%;
  top: 24%;
  width: 6.1%;
  height: 50%;
}
#stopwatchStatusBar .battery-number {
  font-size: min(2.25vw, 42%);
}
#stopwatchSystemNav .recent-lines {
  width: 8%;
  height: 42%;
}
#stopwatchSystemNav .home-ring {
  width: 12%;
  height: auto;
  aspect-ratio: 1;
}
#stopwatchSystemNav .back-chevron {
  width: 8%;
  height: auto;
  aspect-ratio: 1;
}
#chronoMenuDots {
  place-items: center;
  align-content: center;
}

/* ACAAT mini 0.5.2 — boutons préchargés et commutation instantanée */
#leftChronoButton,
#rightChronoButton {
  transition: none !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  will-change: background-image;
}
#leftChronoButton {
  background-image: var(--skin-left-active-image, none) !important;
}
#leftChronoButton:disabled {
  background-image: var(--skin-left-disabled-image, none) !important;
}
#rightChronoButton[data-chrono-state="idle"] {
  background-image: var(--skin-right-start-image, none) !important;
}
#rightChronoButton[data-chrono-state="running"] {
  background-image: var(--skin-right-stop-image, none) !important;
}
#rightChronoButton[data-chrono-state="stopped"] {
  background-image: var(--skin-right-resume-image, none) !important;
}

/* ACAAT mini 0.5.3 — référence visuelle et taille de l’heure du header */
.skin-reference-panel {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin: -4px 0 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.skin-reference-panel .full { grid-column: 1 / -1; margin: 0; }
.skin-reference-panel output,
.skin-status-time-options output {
  float: right;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.skin-reference-file input { padding: 9px; }

.skin-reference-image,
.skin-preview-background,
.skin-preview-stage,
.skin-editor-layer {
  position: absolute;
  inset: 0;
}
.skin-reference-image {
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: grayscale(1) contrast(.96) brightness(.94);
  pointer-events: none;
}
.skin-reference-image.hidden-reference { display: none; }
.skin-preview-background {
  z-index: 1;
  background: #000;
  pointer-events: none;
}
.skin-preview-stage {
  z-index: 2;
  background: transparent !important;
}
.skin-editor-layer { z-index: 30; }
.skin-status-time-options {
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.skin-preview-status::before {
  font-size: var(--preview-status-time-size, 4.1cqw);
}
.stopwatch-screen .status-time {
  font-size: var(--skin-status-time-size, 4.1vw);
}

@media (max-width: 860px) {
  .skin-reference-panel { grid-template-columns: 1fr 1fr; }
  .skin-reference-panel .skin-reference-file,
  .skin-reference-panel .full { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .skin-reference-panel { grid-template-columns: 1fr; }
  .skin-reference-panel .skin-reference-file,
  .skin-reference-panel .full { grid-column: auto; }
}


/* Acaat mini 0.5.5 — skin iPhone */
.stopwatch-screen[data-skin-id="iphone"],
.skin-preview-stage[data-skin-id="iphone"] {
  background: #000 !important;
}

.stopwatch-screen[data-skin-id="iphone"] #stopwatchStatusBar,
.skin-preview-stage[data-skin-id="iphone"] .skin-preview-status {
  background-color: #000;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.stopwatch-screen[data-skin-id="iphone"] #stopwatchStatusBar .status-time {
  left: 4.8%;
  top: 24%;
  font-weight: 650;
  letter-spacing: -.025em;
}

.stopwatch-screen[data-skin-id="iphone"] #stopwatchStatusBar .battery-pill {
  right: 3.4%;
  top: 30%;
  width: 7.4%;
  height: 38%;
  border: 1.5px solid rgba(255,255,255,.92);
  border-radius: 3px;
  color: #fff;
  background: rgba(255,255,255,.16);
  overflow: visible;
}

.stopwatch-screen[data-skin-id="iphone"] #stopwatchStatusBar .battery-pill::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 28%;
  width: 2px;
  height: 44%;
  border-radius: 0 2px 2px 0;
  background: rgba(255,255,255,.7);
}

.stopwatch-screen[data-skin-id="iphone"] #stopwatchStatusBar .battery-number {
  font-size: min(2.05vw, 48%);
  color: #fff;
}

.stopwatch-screen[data-skin-id="iphone"] .time-display,
.skin-preview-stage[data-skin-id="iphone"] .skin-preview-time {
  font-weight: 300;
  letter-spacing: -.045em;
  color: #fff;
}

.stopwatch-screen[data-skin-id="iphone"] #leftChronoButton,
.stopwatch-screen[data-skin-id="iphone"] #rightChronoButton {
  font-weight: 520;
}

.stopwatch-screen[data-skin-id="iphone"] #leftChronoButton:disabled {
  color: #8e8e93;
}

.stopwatch-screen[data-skin-id="iphone"] #leftChronoButton:not(:disabled) {
  color: #fff;
}

.stopwatch-screen[data-skin-id="iphone"] #rightChronoButton[data-chrono-state="idle"],
.stopwatch-screen[data-skin-id="iphone"] #rightChronoButton[data-chrono-state="stopped"] {
  color: #30d158;
}

.stopwatch-screen[data-skin-id="iphone"] #rightChronoButton[data-chrono-state="running"] {
  color: #ff453a;
}

.skin-preview-stage[data-skin-id="iphone"][data-skin-state="idle"] [data-preview-element="rightButton"] .preview-button-label,
.skin-preview-stage[data-skin-id="iphone"][data-skin-state="stopped"] [data-preview-element="rightButton"] .preview-button-label {
  color: #30d158 !important;
}

.skin-preview-stage[data-skin-id="iphone"][data-skin-state="running"] [data-preview-element="rightButton"] .preview-button-label,
.skin-preview-stage[data-skin-id="iphone"][data-skin-state="laps"] [data-preview-element="rightButton"] .preview-button-label {
  color: #ff453a !important;
}

.skin-preview-stage[data-skin-id="iphone"][data-skin-state="idle"] [data-preview-element="leftButton"] .preview-button-label {
  color: #8e8e93 !important;
}

.stopwatch-screen[data-skin-id="iphone"] #stopwatchSystemNav .recent-lines,
.stopwatch-screen[data-skin-id="iphone"] #stopwatchSystemNav .back-chevron,
.skin-preview-stage[data-skin-id="iphone"] .skin-preview-system-nav .recent,
.skin-preview-stage[data-skin-id="iphone"] .skin-preview-system-nav .back {
  display: none !important;
}

.stopwatch-screen[data-skin-id="iphone"] #stopwatchSystemNav,
.skin-preview-stage[data-skin-id="iphone"] .skin-preview-system-nav {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
}

.stopwatch-screen[data-skin-id="iphone"] #stopwatchSystemNav .home-ring {
  width: min(36vw, 150px);
  height: 5px;
  border: 0;
  border-radius: 999px;
  background: #fff;
}

.skin-preview-stage[data-skin-id="iphone"] .skin-preview-system-nav .home {
  width: 37%;
  height: 9%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 999px;
  background: #fff;
}

.stopwatch-screen[data-skin-id="iphone"] .clock-dock {
  border-radius: 0;
}

.iphone-laps {
  display: block;
  overflow-y: auto;
  border-top: 1px solid rgba(84,84,88,.55);
  font-variant-numeric: tabular-nums;
}

.iphone-lap-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 52px;
  padding: 0 3%;
  border-bottom: 1px solid rgba(84,84,88,.55);
  color: #fff;
}

.iphone-lap-row span:last-child {
  text-align: right;
}

.skin-preview-stage[data-skin-id="iphone"] .skin-preview-laps {
  overflow: hidden;
  border-top: 1px solid rgba(84,84,88,.65);
  color: #fff;
}

.preview-iphone-lap-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  height: 21%;
  padding: 0 4%;
  border-bottom: 1px solid rgba(84,84,88,.65);
}


/* ACAAT mini 0.5.6 — iPhone skin fidelity pass */
.stopwatch-screen[data-skin-id="iphone"],
.skin-preview-stage[data-skin-id="iphone"] {
  background: #000 !important;
}
.stopwatch-screen[data-skin-id="iphone"] #stopwatchStatusBar,
.skin-preview-stage[data-skin-id="iphone"] .skin-preview-status {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.stopwatch-screen[data-skin-id="iphone"] #stopwatchStatusBar .status-time,
.stopwatch-screen[data-skin-id="iphone"] #stopwatchStatusBar .battery-pill,
.skin-preview-stage[data-skin-id="iphone"] .skin-preview-status .status-time,
.skin-preview-stage[data-skin-id="iphone"] .skin-preview-status .battery-pill {
  display: none !important;
}
.stopwatch-screen[data-skin-id="iphone"] #chronoMenuDots {
  display: none !important;
}
.stopwatch-screen[data-skin-id="iphone"] .time-display,
.skin-preview-stage[data-skin-id="iphone"] .skin-preview-time {
  color: #fff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 200;
  letter-spacing: -0.055em;
  line-height: 1;
}
.stopwatch-screen[data-skin-id="iphone"] .time-display {
  font-size: clamp(84px, 22vw, 176px);
}
.stopwatch-screen[data-skin-id="iphone"] .secondary-time-display,
.skin-preview-stage[data-skin-id="iphone"] .skin-preview-secondary-time {
  display: none !important;
}
.stopwatch-screen[data-skin-id="iphone"] #leftChronoButton,
.stopwatch-screen[data-skin-id="iphone"] #rightChronoButton,
.skin-preview-stage[data-skin-id="iphone"] .preview-button-label {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: clamp(16px, 2.05vw, 22px);
  font-weight: 400;
}
.stopwatch-screen[data-skin-id="iphone"] #leftChronoButton { color: #f1f1f1; }
.stopwatch-screen[data-skin-id="iphone"] #leftChronoButton:disabled { color: #c8c8cd; }
.stopwatch-screen[data-skin-id="iphone"] #rightChronoButton[data-chrono-state="idle"],
.stopwatch-screen[data-skin-id="iphone"] #rightChronoButton[data-chrono-state="stopped"] { color: #33d74b; }
.stopwatch-screen[data-skin-id="iphone"] #rightChronoButton[data-chrono-state="running"] { color: #ff453a; }
.skin-preview-stage[data-skin-id="iphone"] [data-preview-element="leftButton"] .preview-button-label { color: #f1f1f1; }
.skin-preview-stage[data-skin-id="iphone"][data-skin-state="idle"] [data-preview-element="leftButton"] .preview-button-label { color: #c8c8cd; }
.skin-preview-stage[data-skin-id="iphone"][data-skin-state="idle"] [data-preview-element="rightButton"] .preview-button-label,
.skin-preview-stage[data-skin-id="iphone"][data-skin-state="stopped"] [data-preview-element="rightButton"] .preview-button-label { color: #33d74b !important; }
.skin-preview-stage[data-skin-id="iphone"][data-skin-state="running"] [data-preview-element="rightButton"] .preview-button-label,
.skin-preview-stage[data-skin-id="iphone"][data-skin-state="laps"] [data-preview-element="rightButton"] .preview-button-label { color: #ff453a !important; }
.stopwatch-screen[data-skin-id="iphone"] .pager i,
.skin-preview-stage[data-skin-id="iphone"] .skin-preview-pager i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
}
.stopwatch-screen[data-skin-id="iphone"] .pager i:first-child,
.skin-preview-stage[data-skin-id="iphone"] .skin-preview-pager i:first-child {
  background: rgba(255,255,255,.95);
}
.stopwatch-screen[data-skin-id="iphone"] .clock-dock {
  border-radius: 0;
}
.stopwatch-screen[data-skin-id="iphone"] #stopwatchSystemNav,
.skin-preview-stage[data-skin-id="iphone"] .skin-preview-system-nav {
  display: none !important;
}
.stopwatch-screen[data-skin-id="iphone"] .laps,
.skin-preview-stage[data-skin-id="iphone"] .skin-preview-laps {
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
.iphone-laps {
  display: block;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.10);
  font-variant-numeric: tabular-nums;
}
.iphone-laps .iphone-lap-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0 0.35rem;
  min-height: 60px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  color: #fff;
  font-size: clamp(18px, 2.5vw, 24px);
}
.iphone-laps .iphone-lap-row span:last-child { text-align: right; }
.iphone-laps .iphone-lap-row.best { color: #32d74b; }
.iphone-laps .iphone-lap-row.worst { color: #ff375f; }
.skin-preview-stage[data-skin-id="iphone"] .skin-preview-laps {
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.10);
}
.preview-iphone-lap-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  height: 24%;
  padding: 0 3%;
  border-bottom: 1px solid rgba(255,255,255,.10);
  color: #fff;
}
.preview-iphone-lap-row.best { color: #32d74b; }
.preview-iphone-lap-row.worst { color: #ff375f; }


/* Acaat mini 0.6.0 — analyse de cinq captures */
.capture-builder-screen {
  background: var(--bg);
  overflow-y: auto;
}
.capture-builder-content {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 18px 16px 90px;
}
.capture-builder-card,
.capture-analysis-results {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
}
.capture-builder-card h3,
.capture-analysis-results h3 {
  margin: 0 0 16px;
}
.capture-upload-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.capture-upload-card {
  position: relative;
  display: grid;
  gap: 9px;
  min-height: 250px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #090c11;
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
}
.capture-upload-card input {
  min-height: 42px;
  padding: 7px;
}
.capture-upload-card img {
  width: 100%;
  height: 155px;
  object-fit: contain;
  border-radius: 10px;
  background: #000;
}
.capture-upload-card img:not([src]) {
  visibility: hidden;
}
.capture-upload-card small {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
#captureAnalysisProgress {
  width: 100%;
  height: 12px;
  margin-top: 16px;
}
.capture-analysis-status {
  min-height: 22px;
  margin: 10px 0 0;
  color: var(--muted);
}
.capture-analysis-results {
  margin-top: 18px;
}
.capture-analysis-header {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(190px, 260px) auto;
  gap: 14px;
  align-items: end;
  margin-bottom: 18px;
}
.capture-analysis-header p {
  margin: 4px 0 0;
  color: var(--muted);
}
.compact-switch {
  grid-column: auto;
  align-self: center;
}
.capture-analysis-layout {
  display: grid;
  grid-template-columns: minmax(330px, 1fr) minmax(280px, 360px);
  gap: 22px;
  align-items: start;
}
.capture-analysis-preview-column {
  display: grid;
  justify-items: center;
}
.capture-analysis-frame {
  position: relative;
  width: min(430px, 88vw);
  aspect-ratio: 709 / 1536;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.28);
  border-radius: 28px;
  background: #000;
  box-shadow: 0 22px 55px rgba(0,0,0,.4);
}
.capture-analysis-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.capture-analysis-frame.grayscale > img {
  filter: grayscale(1) contrast(.96) brightness(.94);
}
.capture-analysis-overlay {
  position: absolute;
  z-index: 4;
  inset: 0;
}
.capture-cut-box {
  position: absolute;
  border: 2px solid #41d9ff;
  border-radius: 6px;
  background: rgba(35,184,222,.15);
  color: #fff;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.1;
  padding: 4px;
  text-shadow: 0 1px 2px #000;
  overflow: hidden;
}
.capture-cut-box.selected {
  z-index: 8;
  border-color: #ffd34f;
  background: rgba(255,190,32,.22);
}
.capture-cut-box.low-confidence {
  border-style: dashed;
}
.capture-analysis-sidebar {
  display: grid;
  gap: 14px;
}
.capture-cut-list {
  display: grid;
  gap: 7px;
  max-height: 340px;
  overflow-y: auto;
}
.capture-cut-list-button {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  min-height: 48px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0b0e13;
  color: var(--text);
  text-align: left;
}
.capture-cut-list-button.selected {
  border-color: var(--accent);
  background: rgba(145,187,212,.15);
}
.capture-cut-list-button small {
  grid-column: 1 / -1;
  color: var(--muted);
}
.capture-cut-inspector {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0b0e13;
}
.capture-cut-inspector h3,
.capture-cut-inspector p {
  margin: 0;
}
.capture-cut-inspector > img {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #000;
}
.precision-arrows {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  grid-template-areas:
    ". up ."
    "left . right"
    ". down .";
  justify-content: center;
  gap: 7px;
}
.precision-arrows button {
  width: 52px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-2);
  color: #fff;
  font-size: 23px;
}
.precision-arrows button:nth-child(1) { grid-area: up; }
.precision-arrows button:nth-child(2) { grid-area: left; }
.precision-arrows button:nth-child(3) { grid-area: right; }
.precision-arrows button:nth-child(4) { grid-area: down; }
.capture-size-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}
.capture-size-controls button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  color: #fff;
}
#captureCutGeometryOutput,
#skinPixelPositionOutput {
  display: block;
  color: var(--muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.capture-validation-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
}
.skin-arrow-position-panel {
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(145,187,212,.35);
  border-radius: 14px;
  background: rgba(145,187,212,.08);
}
.skin-arrow-position-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.skin-editor-screen.arrow-position-mode .skin-editor-box {
  cursor: pointer;
}
.skin-editor-screen.arrow-position-mode .skin-editor-resize-handle {
  display: none;
}
.skin-editor-screen.arrow-position-mode #skinElementWInput,
.skin-editor-screen.arrow-position-mode #skinElementHInput {
  opacity: .55;
  pointer-events: none;
}
.stopwatch-screen[data-button-text-mode="asset"] .round-button {
  color: transparent !important;
  text-shadow: none !important;
}
.skin-preview-stage[data-button-text-mode="asset"] .preview-button-label {
  display: none !important;
}

@media (max-width: 960px) {
  .capture-upload-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
  .capture-analysis-layout {
    grid-template-columns: 1fr;
  }
  .capture-analysis-sidebar {
    width: min(560px, 100%);
    margin: 0 auto;
  }
}
@media (max-width: 620px) {
  .capture-upload-grid,
  .capture-analysis-header {
    grid-template-columns: 1fr;
  }
  .capture-validation-actions {
    flex-direction: column;
  }
}

.capture-background-proposal {
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0b0e13;
}
.capture-background-proposal h3 { margin: 0; }
.capture-background-proposal img {
  width: 100%;
  max-height: 210px;
  object-fit: contain;
  border-radius: 12px;
  background: #000;
}
.capture-background-proposal small { color: var(--muted); line-height: 1.4; }


/* Acaat mini 0.6.1 — analyse guidée par rectangles manuels */
.capture-calibration-stage { margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.capture-calibration-layout { display: grid; grid-template-columns: minmax(330px,1fr) minmax(280px,360px); gap: 22px; align-items: start; }
.capture-calibration-overlay { position: absolute; inset: 0; z-index: 5; touch-action: none; cursor: crosshair; }
.capture-guide-box { position: absolute; border: 3px solid #46ddff; border-radius: 8px; background: rgba(18,182,225,.16); color: #fff; font-size: 10px; font-weight: 800; padding: 5px; text-shadow: 0 1px 2px #000; pointer-events: none; }
.capture-guide-box.selected { border-color: #ffd34f; background: rgba(255,190,32,.18); }
.capture-guide-zone-list { display: grid; gap: 9px; }
.capture-guide-zone-list button { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 52px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px; background: #0b0e13; color: var(--text); text-align: left; }
.capture-guide-zone-list button.selected { border-color: #ffd34f; background: rgba(255,190,32,.12); }
.capture-guide-zone-list button.ready small { color: #56df8b; }
.capture-guide-zone-list small { color: var(--muted); }
.capture-extraction-preview-grid { display: grid; grid-template-columns: minmax(280px,1fr) minmax(320px,1.4fr); gap: 18px; margin-bottom: 22px; }
.capture-extraction-preview-grid > article { padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #0b0e13; }
.capture-extraction-preview-grid h3 { margin: 0 0 12px; }
.capture-background-proposal img { width: min(230px,100%); max-height: 390px; object-fit: contain; display: block; margin: 0 auto; border-radius: 14px; background: #000; }
.capture-extracted-asset-grid { display: grid; grid-template-columns: repeat(3,minmax(85px,1fr)); gap: 10px; }
.capture-extracted-asset { min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: conic-gradient(#252a32 25%,#11151b 0 50%,#252a32 0 75%,#11151b 0) 0 0 / 18px 18px; text-align: center; }
.capture-extracted-asset img { width: 100%; height: 105px; object-fit: contain; }
.capture-extracted-asset strong { display: block; margin-top: 6px; padding: 3px; border-radius: 6px; background: rgba(0,0,0,.65); color: #fff; font-size: 11px; }
#captureCutPreview { background: conic-gradient(#252a32 25%,#11151b 0 50%,#252a32 0 75%,#11151b 0) 0 0 / 18px 18px; }
#captureAnalysisProgress { width: 100%; margin-top: 16px; }
@media (max-width: 960px) { .capture-calibration-layout,.capture-extraction-preview-grid { grid-template-columns: 1fr; } }
#leftChronoButton[data-chrono-state="running"] { background-image: var(--skin-left-active-image, none) !important; }
#leftChronoButton[data-chrono-state="stopped"] { background-image: var(--skin-left-stopped-image, var(--skin-left-active-image, none)) !important; }

#captureCalibrationProgress { width: 100%; height: 12px; margin: 10px 0; }


/* Acaat mini 0.6.2 — faux accueil optionnel */
.switch-field.is-disabled {
  opacity: .48;
}
.switch-field.is-disabled span {
  color: var(--muted);
}
.fake-home-image-field {
  gap: 10px;
}
.fake-home-image-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.fake-home-thumbnail {
  position: relative;
  display: grid;
  place-items: center;
  width: min(210px, 100%);
  aspect-ratio: 9 / 19.5;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,0)),
    #05070a;
}
.fake-home-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fake-home-thumbnail img:not([src]),
.fake-home-thumbnail img.hidden {
  display: none;
}
.fake-home-thumbnail span {
  max-width: 145px;
  padding: 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}
.fake-home-image-field small {
  color: var(--muted);
  line-height: 1.45;
}
.editor-empty-fake-home {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: rgba(255,255,255,.6);
  background: #05070a;
  text-align: center;
}

/* Acaat mini 0.7.0 — Flitch */
.flitch-action-row {
  justify-content: flex-start;
}
.flitch-status {
  margin: 14px 0;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  color: var(--muted);
}
.flitch-status[data-state="loading"] {
  border-color: rgba(145,187,212,.55);
  color: #dceef8;
}
.flitch-status[data-state="success"] {
  border-color: rgba(64,205,133,.55);
  color: #9ce7bd;
}
.flitch-status[data-state="error"] {
  border-color: rgba(255,91,91,.55);
  color: #ffaaaa;
}
.flitch-selected-effect {
  margin-bottom: 14px;
}
.flitch-selected-card,
.flitch-effect-card {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 78px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #090c11;
  color: var(--text);
  text-align: left;
}
.flitch-selected-card {
  border-color: rgba(145,187,212,.55);
  background: rgba(145,187,212,.08);
}
.flitch-effect-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.flitch-effect-thumb {
  width: 68px;
  height: 58px;
  object-fit: cover;
  border-radius: 9px;
  background: #000;
}
.flitch-effect-thumb-placeholder {
  display: grid;
  place-items: center;
  width: 68px;
  height: 58px;
  border-radius: 9px;
  background: #151922;
  color: var(--muted);
  font-size: 11px;
}
.flitch-effect-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.flitch-effect-copy strong,
.flitch-effect-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flitch-effect-copy span {
  color: var(--muted);
  font-size: 12px;
}
.flitch-effect-check {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #001018;
  font-weight: 900;
}
.flitch-effects-list {
  display: grid;
  gap: 9px;
  max-height: 420px;
  overflow-y: auto;
}
.flitch-selected-placeholder,
.flitch-effects-empty {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 13px;
  color: var(--muted);
  text-align: center;
}
.flitch-diagnostics {
  display: grid;
  gap: 5px;
  margin-top: 16px;
  padding: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.flitch-diagnostics strong {
  color: var(--text);
}


/* Acaat mini 0.7.2 — diagnostic de démarrage */
.startup-error-panel {
  width: min(460px, 100%);
  margin: 18px auto 0;
  padding: 16px;
  border: 1px solid rgba(255, 113, 107, .5);
  border-radius: 16px;
  background: rgba(110, 24, 24, .28);
  color: var(--text);
}
.startup-error-panel strong {
  display: block;
  margin-bottom: 8px;
}
.startup-error-panel p {
  margin: 7px 0;
  color: rgba(255, 255, 255, .78);
  line-height: 1.45;
}


/* Acaat mini 0.7.3 — activation visible du faux accueil */
.fake-home-enable-switch {
  width: min(520px, 100%);
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(145, 187, 212, .35);
  border-radius: 14px;
  background: rgba(145, 187, 212, .08);
}
.fake-home-enable-switch:not(.is-disabled) {
  border-color: rgba(145, 187, 212, .7);
}
.fake-home-image-field > .field-help {
  margin: -2px 0 0;
}
.fake-home-image-field.is-active .fake-home-thumbnail {
  border-color: rgba(111, 219, 156, .7);
  box-shadow: 0 0 0 2px rgba(111, 219, 156, .12);
}
.fake-home-image-field.is-active .fake-home-enable-switch {
  border-color: rgba(111, 219, 156, .6);
  background: rgba(45, 126, 79, .14);
}

/* ACAAT Mini 0.8.0 — bibliothèque de skins séparée des réglages */
.profile-strip {
  width: min(620px, 100%);
}
.profile-strip-title {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.profile-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.profile-choice {
  min-height: 62px;
  padding: 9px 7px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
}
.profile-choice span,
.profile-choice small {
  display: block;
}
.profile-choice small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}
.profile-choice.active {
  border-color: var(--accent);
  background: rgba(145,187,212,.17);
  box-shadow: inset 0 0 0 1px rgba(145,187,212,.25);
}
.menu-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.skin-manager-screen {
  overflow-y: auto;
  background: var(--bg);
}
.skin-manager-content {
  display: grid;
  gap: 18px;
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 18px 16px 90px;
}
.skin-manager-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
}
.skin-manager-card h3,
.skin-manager-card p {
  margin-top: 0;
}
.skin-manager-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}
.skin-manager-heading p {
  margin-bottom: 0;
  color: var(--muted);
}
.skin-count {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 12px;
}
.skin-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.skin-library-card {
  position: relative;
  display: grid;
  gap: 9px;
  min-height: 250px;
  padding: 10px;
  border: 2px solid transparent;
  border-radius: 17px;
  background: #080a0e;
  color: var(--text);
  text-align: left;
  overflow: hidden;
}
.skin-library-card img {
  width: 100%;
  height: 178px;
  object-fit: cover;
  object-position: top center;
  border-radius: 11px;
  background: #000;
}
.skin-library-card strong,
.skin-library-card small {
  display: block;
}
.skin-library-card small {
  color: var(--muted);
}
.skin-library-card.selected {
  border-color: #ffd34f;
}
.skin-library-card.active {
  box-shadow: inset 0 0 0 2px rgba(84,225,149,.55);
}
.skin-library-card .skin-card-badges {
  position: absolute;
  top: 18px;
  left: 18px;
  display: flex;
  gap: 6px;
}
.skin-card-badge {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.75);
  color: #fff;
  font-size: 10px;
  font-weight: 750;
}
.skin-card-badge.active {
  background: rgba(29,126,73,.9);
}
.skin-selection-actions,
.skin-create-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.skin-create-card {
  display: grid;
  gap: 14px;
}
.file-action {
  position: relative;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
.file-action input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.skin-editor-name-field {
  min-width: min(300px, 100%);
}
.skin-assets-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.skin-assets-panel h3 {
  margin: 0;
}
.skin-assets-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 760px) {
  .profile-list {
    grid-template-columns: repeat(5, minmax(58px, 1fr));
    overflow-x: auto;
  }
  .profile-choice {
    min-width: 72px;
  }
  .skin-assets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .skin-selection-actions,
  .skin-create-actions {
    flex-direction: column;
  }
}


/* ACAAT Mini 0.8.1 — menu principal vertical */
.menu-screen .profile-strip {
  width: min(420px, 100%);
  margin: 7vh auto 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 15px;
}
.menu-screen .profile-strip-title {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}
.menu-screen #profileSelect {
  display: block;
  width: 100%;
}
.menu-screen .profile-list {
  display: none !important;
}
.menu-screen .menu-actions {
  width: min(420px, 100%);
  margin: 3vh auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.menu-screen .menu-actions > button {
  width: 100%;
}


/* Un bouton HTML remplace l'ancien conteneur visuel, sans modifier les skins existants. */
.chrono-menu-dots {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

/* ACAAT Mini 0.9.24 — miniatures Standalone au rendu proportionnel réel */
.skin-card-css-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 390 / 844;
  overflow: hidden;
  border-radius: 12px;
  container-type: size;
  background:
    radial-gradient(circle at 50% 34%, rgba(31, 96, 137, .45), transparent 36%),
    linear-gradient(180deg, #08131e 0%, #03080d 55%, #000 100%);
}
.skin-card-css-time {
  position: absolute;
  display: grid;
  place-items: center;
  color: #eef7ff;
  font-variant-numeric: tabular-nums;
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
}
.skin-card-css-button {
  position: absolute;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border-radius: 50%;
  color: #fff;
  font-weight: 680;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.16);
}
.skin-card-css-button.right { background: rgba(74, 166, 225, .34); }

.standalone-display {
  background: #000;
}
.standalone-display .pin-screen .runtime-zone,
.standalone-display .stopwatch-screen .runtime-zone {
  display: none !important;
  pointer-events: none !important;
}

/* Faux accueil : toute la surface reste cliquable, sauf Home. */
.standalone-display .fake-home-screen [data-zone-screen="fakeHome"] {
  display: block !important;
  pointer-events: auto !important;
  touch-action: manipulation;
  border: 0;
  background: transparent;
}
.standalone-display .fake-home-screen [data-zone-id="openStopwatch"] {
  position: absolute;
  z-index: 90;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.standalone-display .fake-home-screen [data-zone-id="home"] {
  position: absolute;
  z-index: 91;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(4px, env(safe-area-inset-bottom)) !important;
  width: min(42vw, 180px) !important;
  height: max(40px, 7vh) !important;
  transform: translateX(-50%) !important;
}

.standalone-display .performance-header {
  background: linear-gradient(180deg, rgba(8,12,18,.98), rgba(3,5,8,.96));
  border-bottom: 1px solid rgba(255,255,255,.055);
}
.standalone-display .status-time {
  left: max(14px, env(safe-area-inset-left));
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
}
.standalone-display .battery-pill {
  right: max(14px, env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 24px;
}
.standalone-display .battery-number { font-size: 12px; }

/* L’emplacement est calculé en pixels par standalone-layout.js. */
.standalone-display .pin-content,
.standalone-display .lock-clock,
.standalone-display .pin-panel,
.standalone-display .keypad,
.standalone-display .stopwatch-screen .fake-status,
.standalone-display .chrono-menu-dots,
.standalone-display .time-display,
.standalone-display .secondary-time-display,
.standalone-display .laps,
.standalone-display .pager,
.standalone-display .chrono-controls,
.standalone-display .round-button,
.standalone-display .clock-dock,
.standalone-display .system-nav {
  box-sizing: border-box;
}
.standalone-display .lock-clock { margin: 0; padding: 0; }
.standalone-display .lock-clock > div {
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.standalone-display .lock-clock small { margin-top: 6px; }
.standalone-display .pin-panel h2 {
  font-size: 17px;
  font-weight: 500;
  text-align: center;
}
.standalone-display .pin-dots { gap: 12px; }
.standalone-display .pin-dots i {
  width: 11px;
  height: 11px;
}
.standalone-display .key {
  border: 1px solid rgba(255,255,255,.035);
  border-radius: 50%;
  background: rgba(255,255,255,.105);
  color: #fff;
  pointer-events: auto !important;
  touch-action: manipulation;
}
.standalone-display .key:active {
  background: rgba(255,255,255,.25);
  transform: scale(.96);
}
.standalone-display .key.delete { background: transparent; }
.standalone-display .pin-footer {
  color: rgba(255,255,255,.8);
  font-size: 13px;
}
.standalone-display .home-ring {
  pointer-events: auto !important;
  touch-action: manipulation;
}

.standalone-display .stopwatch-screen {
  background-position: center;
  background-size: cover;
}
.standalone-display .chrono-shell {
  position: absolute;
  inset: 0;
}
.standalone-display .chrono-menu-dots {
  z-index: 12;
  display: grid;
  place-content: center;
  gap: 5px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  pointer-events: auto !important;
  touch-action: manipulation;
}
.standalone-display .chrono-menu-dots:active { background: rgba(255,255,255,.08); }

/* Standalone 1.4.0 : menu invisible, zone tactile conservée. */
.standalone-display .chrono-menu-dots.standalone-invisible-hitbox {
  display: grid !important;
  opacity: 0 !important;
  pointer-events: auto !important;
}
.standalone-display .time-display,
.standalone-display .secondary-time-display {
  color: #eef7ff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
  line-height: 1;
}
.standalone-display .secondary-time-display { color: rgba(238,247,255,.78); }
.standalone-display .laps { color: rgba(238,247,255,.78); }
.standalone-display .pager { gap: 20px; }
.standalone-display .pager i {
  width: 11px;
  height: 11px;
}
.standalone-display .round-button {
  border: 1px solid rgba(255,255,255,.11);
  background-image: none !important;
  background-color: rgba(255,255,255,.105);
  color: #f5f8fb !important;
  font-weight: 680;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
  touch-action: manipulation;
}
.standalone-display .round-button:active {
  transform: scale(.97) !important;
  background-color: rgba(255,255,255,.2);
}
.standalone-display .left-button:disabled {
  background-image: none !important;
  background-color: rgba(255,255,255,.045);
  color: rgba(255,255,255,.34) !important;
  opacity: 1;
}
.standalone-display .right-button {
  background-image: none !important;
  background-color: rgba(47,142,202,.34);
  border-color: rgba(126,202,248,.25);
}
.standalone-display .right-button[data-chrono-state="running"] {
  background-color: rgba(208,69,71,.32);
  border-color: rgba(255,125,126,.25);
}
.standalone-display .clock-dock {
  border-radius: 999px;
  background-image: none !important;
  background-color: rgba(48,49,51,.97);
  pointer-events: none;
}
.standalone-display .clock-dock .active {
  width: min(58px, 22%);
  height: calc(100% - 4px);
}
.standalone-display .system-nav { z-index: 60; }

/* ACAAT Mini 0.8.5 — choix d’utilisation dans Réglages uniquement */
.skin-selection-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 720px) {
  .skin-selection-actions {
    grid-template-columns: 1fr;
  }
}


/* ACAAT Mini 0.8.5 — faux accueil réellement indépendant du skin */
.fake-home-screen.active {
  cursor: pointer;
}
.fake-home-screen > img {
  pointer-events: none;
}
.fake-home-screen > .fake-status,
.fake-home-screen > .peek {
  pointer-events: none;
}
.standalone-display .fake-home-screen [data-zone-id="openStopwatch"] {
  position: absolute;
  z-index: 90;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.standalone-display .fake-home-screen [data-zone-id="home"] {
  z-index: 91;
}

/* Ajustements visuels Standalone hérités de la base validée */
/* Le faux PIN et le chronomètre partagent exactement le même en-tête. */
.standalone-display .pin-screen .performance-header,
.standalone-display #stopwatchStatusBar {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Les trois symboles Android sont réduits visuellement de moitié.
   Home conserve une cible tactile de 42 × 42 px. */
.standalone-display .system-nav .recent-lines {
  width: 10px !important;
  height: 12px !important;
  border-left-width: 1.25px !important;
  border-right-width: 1.25px !important;
}
.standalone-display .system-nav .home-ring {
  position: relative !important;
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  background: transparent !important;
}
.standalone-display .system-nav .home-ring::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 1.25px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}
.standalone-display .system-nav .back-chevron {
  width: 9px !important;
  height: 9px !important;
  border-left-width: 1.25px !important;
  border-bottom-width: 1.25px !important;
}

/* ACAAT Mini 0.9.24 — Standalone 1.4.0 */
.status-network { display: none; }
.standalone-display .performance-header {
  background: #000 !important;
  border-bottom: 0 !important;
}
.standalone-display .status-time {
  color: rgba(245,245,247,.96) !important;
  font-variant-numeric: tabular-nums;
}
.flitch-ready-indicator {
  position: absolute;
  display: none;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.96;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.18));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20' fill='none'%3E%3Crect x='2.2' y='2.2' width='19.6' height='15.6' rx='1.8' stroke='%23F2F2F2' stroke-width='2.2'/%3E%3Cpath d='M7.2 10V7.2h4.1' stroke='%23F2F2F2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.8 10.2v2.6h-4' stroke='%23F2F2F2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.standalone-display .status-network {
  color: rgba(245,245,247,.96);
  line-height: 1;
  gap: var(--status-network-gap, 3px);
  pointer-events: none;
}
.standalone-display .status-network-type {
  position: relative;
  display: grid;
  align-self: stretch;
  align-content: start;
  justify-items: center;
  min-width: calc(var(--status-network-font-size, 9px) * 1.65);
  font-size: var(--status-network-font-size, 9px);
  font-weight: 700;
  line-height: 1;
}
.standalone-display .status-traffic {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: flex;
  gap: 1px;
  transform: translateX(-50%);
}
.standalone-display .status-traffic i {
  position: relative;
  width: calc(var(--status-traffic-size, 7px) * .46);
  height: var(--status-traffic-size, 7px);
}
.standalone-display .status-traffic i::before,
.standalone-display .status-traffic i::after {
  content: "";
  position: absolute;
  left: 50%;
  background: currentColor;
  transform: translateX(-50%);
}
.standalone-display .status-traffic i::before {
  top: 1px;
  width: 1.2px;
  height: calc(100% - 2px);
}
.standalone-display .status-traffic i::after {
  width: 4px;
  height: 4px;
  border-left: 1.2px solid currentColor;
  border-bottom: 1.2px solid currentColor;
  background: transparent;
}
.standalone-display .status-traffic i:first-child::after {
  top: 0;
  transform: translateX(-50%) rotate(135deg);
}
.standalone-display .status-traffic i:last-child::after {
  bottom: 0;
  transform: translateX(-50%) rotate(-45deg);
}
.standalone-display .status-signal {
  width: var(--status-signal-width, 12px);
  height: var(--status-signal-height, 14px);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: max(1px, calc(var(--status-signal-width, 12px) * .06));
}
.standalone-display .status-signal i {
  width: var(--status-signal-stroke, 2px);
  min-width: var(--status-signal-stroke, 2px);
  border-radius: 2px 2px 0 0;
  background: currentColor;
}
.standalone-display .status-signal i:nth-child(1) { height: 28%; }
.standalone-display .status-signal i:nth-child(2) { height: 50%; }
.standalone-display .status-signal i:nth-child(3) { height: 74%; }
.standalone-display .status-signal i:nth-child(4) { height: 100%; }
.standalone-display .battery-pill { color: #303033 !important; }

.standalone-display .clock-dock {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  place-items: stretch !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.03) !important;
  border-radius: 999px !important;
  background: rgba(43,43,45,.96) !important;
  color: rgba(245,245,247,.94) !important;
  overflow: hidden;
}
.standalone-display .clock-dock .dock-tab {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  justify-self: center;
  align-self: center;
  border-radius: 999px;
}
.standalone-display .clock-dock .dock-tab.active {
  width: 92% !important;
  height: 92% !important;
  border-radius: 999px !important;
  background: rgba(67,67,70,.96) !important;
  color: #d8efff !important;
}
.standalone-display .dock-icon {
  display: block;
  width: min(43%, 31px);
  aspect-ratio: 1;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.standalone-display .dock-icon-alarm {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='6.8'/%3E%3Cpath d='M9.5 13h2.8V9.6M7 3.8 3.8 7M17 3.8 20.2 7M7.5 19 5.8 21M16.5 19l1.7 2'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='6.8'/%3E%3Cpath d='M9.5 13h2.8V9.6M7 3.8 3.8 7M17 3.8 20.2 7M7.5 19 5.8 21M16.5 19l1.7 2'/%3E%3C/g%3E%3C/svg%3E");
}
.standalone-display .dock-icon-world {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='11.5' r='7.5'/%3E%3Cpath d='M3.4 11.5h14.2M10.5 4c2 2 3 4.5 3 7.5s-1 5.5-3 7.5c-2-2-3-4.5-3-7.5s1-5.5 3-7.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='4.2' fill='black' stroke='none'/%3E%3Cpath d='M17.5 15v2.7l1.8 1' stroke='white'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='11.5' r='7.5'/%3E%3Cpath d='M3.4 11.5h14.2M10.5 4c2 2 3 4.5 3 7.5s-1 5.5-3 7.5c-2-2-3-4.5-3-7.5s1-5.5 3-7.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='4.2' fill='black' stroke='none'/%3E%3Cpath d='M17.5 15v2.7l1.8 1' stroke='white'/%3E%3C/g%3E%3C/svg%3E");
}
.standalone-display .dock-icon-stopwatch {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M12 3v2.2M17.5 6.2l1.4-1.4'/%3E%3Ccircle cx='12' cy='13.5' r='7'/%3E%3Cpath d='M12 9.2v4.5l3 1.8'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M12 3v2.2M17.5 6.2l1.4-1.4'/%3E%3Ccircle cx='12' cy='13.5' r='7'/%3E%3Cpath d='M12 9.2v4.5l3 1.8'/%3E%3C/g%3E%3C/svg%3E");
}
.standalone-display .dock-icon-timer {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12M6 21h12M7 3c0 4.8 2.4 6 5 8.2 2.6-2.2 5-3.4 5-8.2M7 21c0-4.8 2.4-6 5-8.2 2.6 2.2 5 3.4 5 8.2'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12M6 21h12M7 3c0 4.8 2.4 6 5 8.2 2.6-2.2 5-3.4 5-8.2M7 21c0-4.8 2.4-6 5-8.2 2.6 2.2 5 3.4 5 8.2'/%3E%3C/g%3E%3C/svg%3E");
}

.standalone-display .system-nav {
  grid-template-columns: repeat(3, 1fr) !important;
  align-items: center !important;
  color: var(--standalone-nav-color, rgba(255,255,255,.94));
}
.standalone-display .system-nav .recent-lines {
  position: relative;
  width: var(--standalone-recent-width, 10px) !important;
  height: var(--standalone-recent-height, 11.5px) !important;
  border-left: var(--standalone-nav-stroke, 1.25px) solid currentColor !important;
  border-right: var(--standalone-nav-stroke, 1.25px) solid currentColor !important;
  border-radius: 2px;
  box-sizing: border-box;
}
.standalone-display .system-nav .recent-lines::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--standalone-nav-stroke, 1.25px);
  height: 100%;
  border-radius: 2px;
  background: currentColor;
  transform: translateX(-50%);
}
.standalone-display .system-nav .home-ring {
  position: relative !important;
  width: var(--standalone-home-touch-size, 42px) !important;
  height: var(--standalone-home-touch-size, 42px) !important;
  border: 0 !important;
  background: transparent !important;
}
.standalone-display .system-nav .home-ring::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--standalone-home-size, 14px);
  height: var(--standalone-home-size, 14px);
  border: var(--standalone-nav-stroke, 1.25px) solid currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}
.standalone-display .system-nav .back-chevron {
  width: var(--standalone-back-width, 9px) !important;
  height: var(--standalone-back-height, 9px) !important;
  border-left: var(--standalone-nav-stroke, 1.25px) solid currentColor !important;
  border-bottom: var(--standalone-nav-stroke, 1.25px) solid currentColor !important;
}

/* Correctifs de rendu Standalone 1.4.0 */
.standalone-display .system-nav .home-ring { color: inherit !important; }
.standalone-display .dock-icon-world {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='11.5' r='7.5'/%3E%3Cpath d='M3.4 11.5h14.2M10.5 4c2 2 3 4.5 3 7.5s-1 5.5-3 7.5c-2-2-3-4.5-3-7.5s1-5.5 3-7.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='4.1'/%3E%3Cpath d='M17.5 15.3v2.4l1.6.9'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='11.5' r='7.5'/%3E%3Cpath d='M3.4 11.5h14.2M10.5 4c2 2 3 4.5 3 7.5s-1 5.5-3 7.5c-2-2-3-4.5-3-7.5s1-5.5 3-7.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='4.1'/%3E%3Cpath d='M17.5 15.3v2.4l1.6.9'/%3E%3C/g%3E%3C/svg%3E");
}

/* ACAAT Mini 0.9.24 — Standalone 1.4.0 : faux PIN Samsung */
.standalone-pin-camera,
.standalone-pin-lock,
.standalone-pin-subtitle {
  display: none;
}

.standalone-display .pin-screen {
  background: #000;
}
.standalone-display .pin-screen .performance-header {
  display: none !important;
}
.standalone-display .pin-screen .pin-content {
  background:
    radial-gradient(ellipse 72% 54% at 50% 43%, rgba(36,43,50,.22), transparent 74%),
    linear-gradient(180deg, #070a0d 0%, #05080b 56%, #010203 100%);
}
.standalone-display .pin-screen .lock-clock {
  display: none !important;
}
.standalone-display .standalone-pin-camera {
  display: block;
  z-index: 4;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #020305 0 42%, #0b1118 46% 61%, #020305 66% 100%);
  box-shadow: 0 0 0 1px rgba(135,164,184,.2), inset 0 0 7px rgba(41,99,135,.25);
}
.standalone-display .standalone-pin-lock {
  display: block;
  z-index: 4;
  background: rgba(231,238,255,.96);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10V7a5 5 0 0 1 10 0v3h1.2A1.8 1.8 0 0 1 20 11.8v8.4a1.8 1.8 0 0 1-1.8 1.8H5.8A1.8 1.8 0 0 1 4 20.2v-8.4A1.8 1.8 0 0 1 5.8 10H7Zm2.2 0h5.6V7a2.8 2.8 0 1 0-5.6 0v3Zm2.8 3.2a1.7 1.7 0 0 0-.8 3.2V19h1.6v-2.6a1.7 1.7 0 0 0-.8-3.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10V7a5 5 0 0 1 10 0v3h1.2A1.8 1.8 0 0 1 20 11.8v8.4a1.8 1.8 0 0 1-1.8 1.8H5.8A1.8 1.8 0 0 1 4 20.2v-8.4A1.8 1.8 0 0 1 5.8 10H7Zm2.2 0h5.6V7a2.8 2.8 0 1 0-5.6 0v3Zm2.8 3.2a1.7 1.7 0 0 0-.8 3.2V19h1.6v-2.6a1.7 1.7 0 0 0-.8-3.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.standalone-display .pin-panel h2 {
  color: #f4f6fb;
  font-weight: 650;
  line-height: 1.15;
  text-align: center;
}
.standalone-display .standalone-pin-subtitle {
  display: grid;
  place-items: center;
  color: rgba(244,246,251,.9);
  font-weight: 560;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}
.standalone-display .pin-dots {
  gap: 9px;
}
.standalone-display .pin-dots i {
  display: none;
  width: 8px;
  height: 8px;
  border: 0;
  background: rgba(245,248,255,.94);
}
.standalone-display .pin-dots i.filled {
  display: block;
}
.standalone-display .key {
  position: relative;
  display: grid !important;
  place-content: center;
  gap: 0;
  border: 0 !important;
  border-radius: 50%;
  background: rgba(105,119,135,.9) !important;
  color: #fff;
  font-weight: 450;
  line-height: .86;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
  transition: background-color 90ms ease, box-shadow 90ms ease;
  -webkit-tap-highlight-color: transparent;
}
.standalone-display .key.pin-key-flash {
  background: rgba(190,202,214,.98) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.46),
    0 0 16px rgba(205,224,242,.2) !important;
}
.standalone-display .key::after {
  min-height: .9em;
  margin-top: .18em;
  font-size: .34em;
  font-weight: 720;
  line-height: 1;
  letter-spacing: .015em;
}
.standalone-display .key[data-letters]::after { content: attr(data-letters); }
.standalone-display .key[data-key="0"] {
  grid-column: 2;
  grid-row: 4;
}
.standalone-display .key.delete {
  grid-column: 1;
  grid-row: 4;
  background: rgba(105,119,135,.9) !important;
  font-size: 0 !important;
}
.standalone-display .key.delete::before {
  content: "";
  width: 31%;
  height: 25%;
  background: rgba(255,255,255,.96);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath fill='black' d='M10.2 2h17.3A2.5 2.5 0 0 1 30 4.5v15a2.5 2.5 0 0 1-2.5 2.5H10.2L2 12 10.2 2Zm4.1 5.2-1.5 1.5 3.3 3.3-3.3 3.3 1.5 1.5 3.3-3.3 3.3 3.3 1.5-1.5-3.3-3.3 3.3-3.3-1.5-1.5-3.3 3.3-3.3-3.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath fill='black' d='M10.2 2h17.3A2.5 2.5 0 0 1 30 4.5v15a2.5 2.5 0 0 1-2.5 2.5H10.2L2 12 10.2 2Zm4.1 5.2-1.5 1.5 3.3 3.3-3.3 3.3 1.5 1.5 3.3-3.3 3.3 3.3 1.5-1.5-3.3-3.3 3.3-3.3-1.5-1.5-3.3 3.3-3.3-3.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.standalone-display .key.blank {
  visibility: visible !important;
  grid-column: 3;
  grid-row: 4;
  background: rgba(105,119,135,.9) !important;
  pointer-events: none;
}
.standalone-display .key.blank::before {
  content: attr(data-label);
  font-size: .72em;
  font-weight: 450;
  line-height: 1;
}
.standalone-display .pin-footer {
  color: #fff;
  font-size: 13px;
}
.standalone-display .pin-footer span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(93,111,128,.92);
  color: #fff;
  font-weight: 650;
  line-height: 1;
  box-sizing: border-box;
  white-space: nowrap;
}
.standalone-display .pin-footer span:last-child {
  display: none;
}

/* Le PIN de référence n’affiche qu’un retour à droite. Le bouton reste réel. */
.standalone-display .pin-screen .system-nav .recent-lines,
.standalone-display .pin-screen .system-nav > .back-chevron {
  visibility: hidden !important;
}
.standalone-display .pin-screen .system-nav .home-ring {
  grid-column: 3;
  color: rgba(245,248,255,.96) !important;
}
.standalone-display .pin-screen .system-nav .home-ring::after {
  width: var(--pin-back-size, 11px);
  height: var(--pin-back-size, 11px);
  border: 0;
  border-left: var(--pin-back-stroke, 1.5px) solid currentColor;
  border-bottom: var(--pin-back-stroke, 1.5px) solid currentColor;
  border-radius: 0;
  transform: translate(-50%, -50%) rotate(45deg);
}


/* ACAAT Mini 0.9.24 — édition des textes du Standalone */
.skin-texts-panel {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}
.skin-texts-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.skin-texts-heading h3, .skin-texts-heading p { margin: 0; }
.skin-texts-heading p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.skin-text-groups { display: grid; gap: 14px; }
.skin-text-groups fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin: 0;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 13px;
}
.skin-text-groups legend { padding: 0 7px; font-weight: 750; }
.skin-key-letters-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.standalone-display .round-button,
.standalone-display .pin-footer span:first-child,
.standalone-display .pin-panel h2,
.standalone-display .standalone-pin-subtitle {
  overflow: hidden;
  text-overflow: clip;
}
@media (max-width: 720px) {
  .skin-texts-heading { flex-direction: column; }
  .skin-text-groups fieldset { grid-template-columns: 1fr; }
  .skin-key-letters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ACAAT Mini 0.9.24 — éditeur de skin à sélection et réglages précis */
.skin-editor-content {
  width: min(1040px, 100%);
}
.skin-editor-layout {
  grid-template-columns: minmax(300px, 420px) minmax(230px, 310px);
  justify-content: center;
  gap: 22px;
}
.skin-preview-column {
  width: 100%;
}
.skin-preview-frame {
  width: min(280px, 74vw);
  border-radius: 22px;
  touch-action: manipulation;
}
.skin-editor-hint {
  max-width: 440px;
  margin-top: 10px;
}
.skin-editor-sidebar {
  align-self: start;
}
.skin-element-list {
  max-height: 610px;
}
.skin-inspector {
  width: min(440px, 100%);
  margin-top: 14px;
  gap: 12px;
}
.skin-element-adjustments {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(130px, .8fr);
  gap: 12px;
  align-items: end;
}
.skin-element-scale-field small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.skin-percentage-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.skin-percentage-input > span {
  color: var(--muted);
  font-weight: 700;
}
.skin-position-arrows {
  grid-column: 1 / -1;
  justify-self: center;
}
.skin-position-arrows button {
  width: 48px;
  height: 44px;
  font-size: 22px;
}
#skinPixelPositionOutput {
  grid-column: 1 / -1;
}
.skin-editor-box,
.skin-editor-screen.arrow-position-mode .skin-editor-box {
  cursor: pointer;
  touch-action: manipulation;
  background: rgba(35,178,216,.1);
}
.skin-editor-box > span {
  display: none;
}
.skin-editor-box.selected > span {
  display: block;
  position: absolute;
  left: 4px;
  top: 4px;
  max-width: calc(100% - 8px);
  padding: 2px 4px;
  border-radius: 5px;
  background: rgba(0,0,0,.72);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skin-editor-resize-handle {
  display: none !important;
}
.skin-preview-stage.standalone-editor-preview-stage {
  overflow: hidden;
}
.standalone-editor-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 390px;
  height: 844px;
  transform-origin: left top;
  background: #000;
  overflow: hidden;
  pointer-events: none;
}
.standalone-editor-canvas .standalone-editor-stopwatch {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: transparent;
}
.standalone-editor-canvas .chrono-shell {
  position: absolute;
  inset: 0;
}
.standalone-editor-canvas .chrono-menu-dots {
  opacity: 0;
}
.standalone-editor-canvas .round-button {
  pointer-events: none !important;
}
.standalone-editor-canvas .laps {
  overflow: hidden !important;
}
.standalone-editor-canvas .preview-laps-header,
.standalone-editor-canvas .preview-lap-row {
  display: grid;
  grid-template-columns: 22% 39% 39%;
  align-items: center;
  text-align: center;
}
.standalone-editor-canvas .preview-laps-header {
  min-height: 18px;
  border-bottom: 1px solid rgba(255,255,255,.16);
  font-weight: 650;
}
.standalone-editor-canvas .preview-lap-row {
  min-height: 17px;
}
.standalone-editor-canvas .preview-lap-row.accent {
  color: var(--lap-accent-color, #7fc8ff);
}
@media (max-width: 800px) {
  .skin-editor-layout {
    grid-template-columns: 1fr;
  }
  .skin-editor-sidebar {
    width: min(440px, 100%);
    margin: 0 auto;
  }
}
@media (max-width: 520px) {
  .skin-element-adjustments {
    grid-template-columns: 1fr;
  }
  .skin-position-arrows,
  #skinPixelPositionOutput {
    grid-column: 1;
  }
}

/* ACAAT Mini 0.9.24 — aperçu mobile compact : aperçu et commandes visibles ensemble */
@media (max-width: 800px) {
  .skin-preview-frame {
    width: min(220px, 54vw);
    border-radius: 17px;
  }
  .skin-editor-hint {
    max-width: 340px;
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.28;
  }
  .skin-inspector {
    width: min(380px, 100%);
    margin-top: 7px;
    padding: 11px;
    gap: 8px;
  }
  .skin-inspector h3 {
    margin: 0;
    font-size: 16px;
  }
  .skin-element-adjustments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .skin-position-arrows {
    grid-template-columns: repeat(3, 42px);
    gap: 5px;
  }
  .skin-position-arrows button {
    width: 42px;
    height: 38px;
    font-size: 19px;
  }
  #skinPixelPositionOutput {
    font-size: 11px;
    line-height: 1.25;
  }
}
@media (max-width: 520px) {
  .skin-preview-frame {
    width: min(170px, 44vw);
    border-width: 1px;
    border-radius: 14px;
  }
  .skin-editor-hint {
    max-width: 330px;
    font-size: 10.5px;
  }
  .skin-element-adjustments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .skin-position-arrows,
  #skinPixelPositionOutput {
    grid-column: 1 / -1;
  }
}


/* L’aperçu mobile reste sous l’en-tête fixe lors du recentrage automatique. */
@media (max-width: 800px) {
  .skin-preview-frame { scroll-margin-top: 96px; }
}

/* Écrans très courts : priorité à l’aperçu et aux quatre flèches. */
@media (max-width: 520px) and (max-height: 700px) {
  .skin-preview-frame {
    width: min(110px, 34vw);
    scroll-margin-top: 68px;
    border-radius: 10px;
  }
  .skin-editor-hint { display: none; }
  .skin-inspector {
    margin-top: 4px;
    padding: 7px;
    gap: 5px;
    border-radius: 12px;
  }
  .skin-inspector h3 { font-size: 14px; }
  .skin-element-adjustments { gap: 5px; }
  .skin-element-scale-field small { display: none; }
  .skin-position-arrows {
    grid-template-columns: repeat(3, 34px);
    gap: 3px;
  }
  .skin-position-arrows button {
    width: 34px;
    height: 30px;
    font-size: 16px;
    border-radius: 8px;
  }
  #skinPixelPositionOutput { display: none; }
}

/* ACAAT Mini 0.9.24 — ajustement plein écran avec palette flottante */
#openSkinAdjustButton {
  white-space: nowrap;
}
.skin-adjustment-active {
  overflow: hidden !important;
  overscroll-behavior: none;
}
.skin-adjust-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: #000;
  touch-action: none;
  overscroll-behavior: none;
}
.skin-adjust-overlay.hidden {
  display: none !important;
}
.skin-adjust-frame-slot {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}
.skin-adjust-overlay .skin-preview-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #000;
  touch-action: none;
}
.skin-adjust-overlay .skin-reference-image,
.skin-adjust-overlay .skin-preview-background,
.skin-adjust-overlay .skin-preview-stage,
.skin-adjust-overlay .skin-editor-layer {
  position: absolute;
  inset: 0;
}
.skin-adjust-overlay .skin-editor-layer {
  pointer-events: auto;
}
.skin-adjust-overlay .skin-editor-box,
.skin-adjust-overlay .skin-editor-screen.arrow-position-mode .skin-editor-box {
  padding: 0;
  border-width: 1.5px;
  border-radius: 7px;
  background: rgba(35,178,216,.07);
  cursor: pointer;
  touch-action: manipulation;
}
.skin-adjust-overlay .skin-editor-box.selected {
  border-color: #ffd34f;
  background: rgba(255,190,32,.13);
}
.skin-adjust-overlay .skin-editor-box.selected > span {
  display: none;
}
.skin-adjust-palette {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 10020;
  width: min(226px, calc(100vw - 18px));
  padding: 7px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 14px;
  background: rgba(18,22,28,.88);
  box-shadow: 0 10px 34px rgba(0,0,0,.52);
  color: #fff;
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  transform: translate(-50%, -50%);
  user-select: none;
  touch-action: none;
}
.skin-adjust-drag-handle {
  width: 100%;
  min-height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 3px 6px 5px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: #fff;
  cursor: move;
  touch-action: none;
}
.skin-adjust-drag-handle > span {
  color: rgba(255,255,255,.62);
  font-size: 16px;
  line-height: 1;
}
.skin-adjust-drag-handle strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 750;
}
.skin-adjust-compact-controls {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 7px;
  align-items: center;
  padding: 7px 1px 6px;
}
.skin-adjust-scale-label {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: rgba(255,255,255,.72);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}
.skin-adjust-scale-label.active {
  border-color: rgba(255,211,79,.92);
  background: rgba(255,190,32,.15);
  color: #fff3bd;
}
.skin-adjust-scale-label.active .skin-adjust-scale-value {
  border-color: rgba(255,211,79,.72);
  background: rgba(255,190,32,.12);
}
.skin-adjust-scale-value {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px;
  height: 29px;
  padding: 0 5px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  background: rgba(0,0,0,.28);
}
.skin-adjust-scale-value output {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 13px;
  font-weight: 760;
  text-align: right;
  user-select: none;
  pointer-events: none;
}
.skin-adjust-scale-value b {
  font-size: 10px;
  color: rgba(255,255,255,.64);
}
.skin-adjust-arrows {
  display: grid;
  grid-template-columns: repeat(3, 34px);
  grid-template-rows: repeat(2, 30px);
  justify-content: center;
  gap: 3px;
}
.skin-adjust-arrows button {
  width: 34px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 17px;
  line-height: 1;
}
.skin-adjust-arrows button:nth-child(1) { grid-column: 2; grid-row: 1; }
.skin-adjust-arrows button:nth-child(2) { grid-column: 1; grid-row: 2; }
.skin-adjust-arrows button:nth-child(3) { grid-column: 3; grid-row: 2; }
.skin-adjust-arrows button:nth-child(4) { grid-column: 2; grid-row: 2; }
.skin-adjust-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.skin-adjust-actions button {
  min-height: 31px;
  padding: 5px 8px;
  border-radius: 9px;
  font-size: 11px;
}
@media (max-width: 360px), (max-height: 620px) {
  .skin-adjust-palette {
    width: min(204px, calc(100vw - 12px));
    padding: 5px;
    border-radius: 12px;
  }
  .skin-adjust-drag-handle { min-height: 24px; padding-bottom: 3px; }
  .skin-adjust-compact-controls { grid-template-columns: 62px 1fr; gap: 5px; padding: 5px 0; }
  .skin-adjust-arrows { grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(2, 27px); }
  .skin-adjust-arrows button { width: 30px; height: 27px; font-size: 15px; }
  .skin-adjust-actions button { min-height: 28px; font-size: 10px; }
}

/* L’ancien aperçu réduit n’est plus affiché : l’ajustement se fait uniquement en plein écran. */
.skin-editor-layout[hidden] {
  display: none !important;
}

/* ACAAT Mini 0.9.24 — les flèches pilotent le placement par défaut, le zoom après sélection de la zone Taille. */
.skin-adjust-palette:not(.scale-mode) .skin-adjust-arrows button {
  background: rgba(35,178,216,.14);
}
.skin-adjust-palette.scale-mode .skin-adjust-arrows button {
  background: rgba(255,190,32,.14);
  border-color: rgba(255,211,79,.32);
}

/* ACAAT Mini 0.9.24 — récupération et sauvegarde des images Flitch */
.flitch-directory-panel {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.035);
}
.flitch-directory-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.flitch-directory-copy span {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.flitch-directory-panel.is-disabled {
  opacity: .58;
}
.flitch-pending-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.flitch-pending-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.flitch-pending-heading span {
  display: grid;
  place-items: center;
  min-width: 25px;
  height: 25px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--muted);
  font-size: 12px;
}
.flitch-pending-list {
  display: grid;
  gap: 10px;
}
.flitch-pending-empty {
  padding: 15px;
  border: 1px dashed var(--line);
  border-radius: 13px;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
}
.flitch-pending-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #090c11;
}
.flitch-pending-card img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 10px;
  background: #000;
}
.flitch-pending-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.flitch-pending-copy strong,
.flitch-pending-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flitch-pending-copy span {
  color: var(--muted);
  font-size: 12px;
}
.flitch-pending-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 5px;
}
.flitch-pending-actions button {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
}
@media (max-width: 520px) {
  .flitch-directory-panel {
    align-items: stretch;
    flex-direction: column;
  }
  .flitch-directory-panel button {
    width: 100%;
  }
  .flitch-pending-card {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .flitch-pending-card img {
    width: 64px;
    height: 64px;
  }
}

/* --- Chapelet personnel --- */
.settings-link-card {
  margin: 0 16px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.035);
}
.settings-link-button {
  width: 100%;
  min-height: 68px;
  padding: 14px 16px;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--text);
  background: transparent;
  text-align: left;
  font: inherit;
}
.settings-link-button > span:first-child { display: grid; gap: 4px; }
.settings-link-button strong { font-size: 15px; }
.settings-link-button small { color: var(--muted); font-size: 13px; }
.settings-link-button > span:last-child { color: var(--muted); font-size: 28px; line-height: 1; }

.custom-stack-editor-screen { background: #07090d; touch-action: pan-y; }
.custom-stack-editor-content {
  padding: 12px 10px calc(28px + env(safe-area-inset-bottom));
  display: grid;
  gap: 12px;
}
.custom-stack-summary-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
}
.custom-stack-summary-card > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.custom-stack-summary-card strong { font-size: 19px; }
.custom-stack-summary-card span { color: #8ed9a4; font-weight: 700; font-size: 13px; }
.custom-stack-summary-card[data-valid="false"] span { color: #8fc7ff; }
.custom-stack-summary-card p,
.custom-stack-help { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.custom-stack-help { margin: 0 3px; }
.custom-stack-list { display: grid; gap: 14px; }
.custom-stack-suit-group {
  display: grid;
  gap: 7px;
  padding: 9px 7px 8px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(255,255,255,.028);
}
.custom-stack-suit-title {
  margin: 0 3px;
  color: #f1f3f5;
  font-size: 14px;
  line-height: 1.1;
}
.custom-stack-suit-title.red { color: #ff6674; }
.custom-stack-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
  gap: 6px 5px;
  width: 100%;
}
.custom-stack-card-button {
  min-width: 0;
  min-height: 76px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  display: grid;
  grid-template-rows: 56px 18px;
  justify-items: stretch;
  align-items: center;
  touch-action: manipulation;
}
.custom-stack-card-button:disabled { opacity: 1; }
.custom-stack-card-visual {
  width: 100%;
  height: 54px;
  display: grid;
  place-content: center;
  gap: 2px;
  border: 2px solid transparent;
  border-radius: 11px;
  background: #f4f4f1;
  color: #111;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.custom-stack-card-visual strong {
  font-size: clamp(15px, 4.3vw, 19px);
  line-height: 1;
  white-space: nowrap;
}
.custom-stack-card-visual small {
  color: #626262;
  font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.custom-stack-card-visual.red { color: #d92e3c; }
.custom-stack-card-button.selected .custom-stack-card-visual {
  border-color: #7fc8ff;
  background: #e9f5ff;
  box-shadow: 0 0 0 2px rgba(127,200,255,.2), 0 2px 8px rgba(0,0,0,.2);
}
.custom-stack-order-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: inline-grid;
  place-items: center;
  justify-self: center;
  border-radius: 999px;
  background: transparent;
  color: transparent;
  font: 800 11px/1 system-ui, sans-serif;
}
.custom-stack-order-badge.visible {
  background: #7fc8ff;
  color: #06121d;
}
.custom-stack-actions { display: grid; gap: 9px; padding-top: 4px; }
.custom-stack-actions .menu-stack-editor-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.menu-stack-editor-button small {
  display: inline-block;
  margin-left: auto;
  font-size: 0.78em;
  opacity: 0.8;
}

.secondary-action { width: 100%; }

@media (max-width: 370px) {
  .custom-stack-editor-content { padding-inline: 7px; }
  .custom-stack-suit-group { padding-inline: 5px; }
  .custom-stack-card-grid { grid-template-columns: repeat(auto-fit, minmax(43px, 1fr)); gap: 5px 4px; }
  .custom-stack-card-button { min-height: 72px; grid-template-rows: 53px 17px; }
  .custom-stack-card-visual { height: 51px; }
}

/* ACAAT Mini 0.9.24 — état du chapelet, cible fixe et commandes de précision */
.menu-stack-editor-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.custom-stack-menu-check {
  display: none;
  flex: 0 0 auto;
  min-width: 24px;
  color: #57d57b;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 10px rgba(87, 213, 123, .28);
}

.custom-stack-menu-check.visible {
  display: inline-grid;
  place-items: center;
}

.fixed-target-field.field-disabled {
  color: rgba(149, 157, 168, .48);
}

.fixed-target-field.field-disabled > span {
  color: rgba(149, 157, 168, .48);
}

.fixed-target-field input:disabled {
  color: rgba(255,255,255,.62);
  background: #11151b;
  border-color: rgba(255,255,255,.08);
  cursor: not-allowed;
  opacity: .72;
}

.custom-stack-editor-header {
  grid-template-columns: 54px minmax(0, 1fr) 22px;
}

.custom-stack-editor-header h2 {
  line-height: 1.08;
}

.custom-stack-top-actions {
  display: grid;
  grid-template-columns: .85fr 1.55fr 1fr;
  gap: 7px;
}

.custom-stack-top-actions button {
  min-width: 0;
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 13px;
  font-size: 11px;
  line-height: 1.18;
  white-space: normal;
}

.skin-adjust-arrows button {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.skin-adjust-arrows button.pressed {
  background: rgba(127, 200, 255, .24);
  border-color: rgba(127, 200, 255, .55);
  transform: scale(.96);
}

@media (max-width: 370px) {
  .custom-stack-top-actions {
    gap: 5px;
  }
  .custom-stack-top-actions button {
    padding-inline: 5px;
    font-size: 10px;
  }
  .custom-stack-editor-header h2 {
    font-size: 20px;
  }
}

/* ACAAT Mini 0.9.24 — centrage du chapelet et champs inutiles pour le temps complet */
.menu-stack-editor-button {
  position: relative;
  justify-content: center;
  text-align: center;
}
.menu-stack-editor-button > span:first-child {
  width: 100%;
  text-align: center;
}
.menu-stack-editor-button .custom-stack-menu-check {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}
.custom-stack-editor-header {
  grid-template-columns: 54px minmax(0, 1fr) 54px;
}
.custom-stack-editor-header > div {
  text-align: center;
}
#targetSourceField.field-disabled {
  color: rgba(149, 157, 168, .48);
}
#targetSourceField.field-disabled > span {
  color: rgba(149, 157, 168, .48);
}
#targetSourceField select:disabled {
  color: rgba(255,255,255,.62);
  background: #11151b;
  border-color: rgba(255,255,255,.08);
  cursor: not-allowed;
  opacity: .72;
}

/* ACAAT Mini 0.9.24 — assistant guidé de création d’un skin */
.skin-wizard-step-count {
  min-width: 58px;
  text-align: right;
  font-size: .82rem;
  color: var(--muted);
}

.skin-wizard-content {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}

.skin-wizard-intro,
.skin-wizard-workspace,
.skin-wizard-review {
  display: grid;
  gap: 14px;
}

.skin-wizard-upload-button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.skin-wizard-upload-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.skin-wizard-upload-preview,
.skin-wizard-result img,
.skin-wizard-review-grid img {
  width: 100%;
  max-height: 58vh;
  object-fit: contain;
  border-radius: 14px;
  background: #000;
  border: 1px solid rgba(255,255,255,.1);
}

.skin-wizard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 250px);
  gap: 16px;
  align-items: start;
}

.skin-wizard-image-column {
  min-width: 0;
}

.skin-wizard-image-frame {
  position: relative;
  width: min(100%, 520px);
  margin-inline: auto;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
  border: 1px solid rgba(255,255,255,.14);
  touch-action: none;
}

.skin-wizard-image-frame > img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.skin-wizard-overlay {
  position: absolute;
  inset: 0;
  touch-action: none;
  cursor: crosshair;
}

.skin-wizard-floating-arrows {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(3, 40px);
  grid-template-rows: repeat(2, 38px);
  gap: 5px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(5, 8, 12, .82);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}
.skin-wizard-floating-arrows button {
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.13);
  color: inherit;
  font-size: 1.12rem;
  min-width: 0;
  min-height: 0;
}
.skin-wizard-floating-arrows button[data-wizard-nudge="up"] { grid-column: 2; grid-row: 1; }
.skin-wizard-floating-arrows button[data-wizard-nudge="left"] { grid-column: 1; grid-row: 2; }
.skin-wizard-floating-arrows button[data-wizard-nudge="down"] { grid-column: 2; grid-row: 2; }
.skin-wizard-floating-arrows button[data-wizard-nudge="right"] { grid-column: 3; grid-row: 2; }

.skin-wizard-rect {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #7fd4ff;
  background: rgba(46, 166, 255, .14);
  cursor: move;
  touch-action: none;
}

.skin-wizard-rect.target {
  border-color: #ff6961;
  background: rgba(255, 70, 70, .15);
}

.skin-wizard-rect.source {
  border-color: #59df8c;
  background: rgba(65, 220, 120, .16);
}

.skin-wizard-rect.active {
  box-shadow: 0 0 0 2px rgba(255,255,255,.82), 0 0 0 4px rgba(0,0,0,.4);
}

.skin-wizard-rect > span {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 100%;
  padding: 2px 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: clamp(9px, 2.4vw, 12px);
  color: #fff;
  background: rgba(0,0,0,.72);
  pointer-events: none;
}

.skin-wizard-rect i {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #111;
  touch-action: none;
}

.skin-wizard-rect i[data-wizard-handle="nw"] { left: -10px; top: -10px; cursor: nwse-resize; }
.skin-wizard-rect i[data-wizard-handle="ne"] { right: -10px; top: -10px; cursor: nesw-resize; }
.skin-wizard-rect i[data-wizard-handle="sw"] { left: -10px; bottom: -10px; cursor: nesw-resize; }
.skin-wizard-rect i[data-wizard-handle="se"] { right: -10px; bottom: -10px; cursor: nwse-resize; }

.skin-wizard-controls {
  display: grid;
  gap: 12px;
  position: sticky;
  top: 8px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
}

.skin-wizard-fill-controls {
  display: grid;
  gap: 9px;
}

.skin-wizard-fill-controls label {
  display: flex;
  gap: 8px;
  align-items: center;
}

.skin-wizard-selection-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.skin-wizard-selection-tabs button {
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: inherit;
}

.skin-wizard-selection-tabs button.active {
  border-color: var(--accent);
  background: rgba(70, 160, 255, .18);
}

.skin-wizard-geometry {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: .86rem;
}

.skin-wizard-result {
  display: grid;
  gap: 8px;
}

.skin-wizard-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.skin-wizard-review-grid article {
  min-width: 0;
}

.skin-wizard-review-grid h4 {
  margin: 0 0 7px;
}

.skin-wizard-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: 12px 0 max(8px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--background) 25%);
}

@media (max-width: 720px) {
  .skin-wizard-layout {
    grid-template-columns: 1fr;
  }

  .skin-wizard-controls {
    position: static;
  }

  .skin-wizard-review-grid {
    grid-template-columns: 1fr;
  }

  .skin-wizard-upload-preview,
  .skin-wizard-result img,
  .skin-wizard-review-grid img {
    max-height: 68vh;
  }
}


/* ACAAT Mini 0.9.24 — assistant de skin scrollable et bibliothèque personnalisée */
.capture-builder-screen.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.capture-builder-screen > .panel-header {
  position: relative;
  top: auto;
  flex: 0 0 auto;
}

.capture-builder-screen > .skin-wizard-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: 110px;
}

.skin-wizard-footer {
  bottom: -1px;
  padding-top: 18px;
  background: linear-gradient(to bottom, transparent, var(--bg) 28%, var(--bg));
}

.skin-library-empty {
  grid-column: 1 / -1;
  padding: 24px 18px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  color: var(--muted);
  text-align: center;
}

/* ACAAT Mini 0.9.24 — skins créés depuis captures : les contrôles sont déjà dessinés dans le fond. */
.stopwatch-screen[data-capture-controls="true"] .round-button,
.stopwatch-screen[data-capture-controls="true"] .pager,
.stopwatch-screen[data-capture-controls="true"] .clock-dock,
.stopwatch-screen[data-capture-controls="true"] .system-nav,
.stopwatch-screen[data-capture-controls="true"] .chrono-menu-dots {
  display: none !important;
}

/* ACAAT Mini 0.9.24 — assistant de création de skin en quatre états */
.skin-wizard-dynamic-controls {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
}
.skin-wizard-arrow-pad {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  grid-template-rows: repeat(2, 42px);
  justify-content: center;
  gap: 6px;
}
.skin-wizard-arrow-pad button {
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  color: inherit;
  font-size: 1.2rem;
  touch-action: manipulation;
}
.skin-wizard-arrow-pad button[data-wizard-nudge="up"] { grid-column: 2; grid-row: 1; }
.skin-wizard-arrow-pad button[data-wizard-nudge="left"] { grid-column: 1; grid-row: 2; }
.skin-wizard-arrow-pad button[data-wizard-nudge="down"] { grid-column: 2; grid-row: 2; }
.skin-wizard-arrow-pad button[data-wizard-nudge="right"] { grid-column: 3; grid-row: 2; }
.skin-wizard-color-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.skin-wizard-color-row button,
.skin-wizard-color-row label {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,.07);
  color: inherit;
}
.skin-wizard-color-row input[type="color"] { width: 34px; height: 26px; padding: 0; border: 0; vertical-align: middle; }
.skin-wizard-rect.dynamic-zone { border-color: #53d769; background: rgba(83,215,105,.11); }
.skin-wizard-dynamic-sample {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  line-height: 1;
}
.skin-wizard-dynamic-sample.network { font-weight: 650; }
.skin-wizard-dynamic-sample.battery {
  justify-self: stretch;
  align-self: stretch;
  border: 1.6px solid currentColor;
  border-radius: 999px;
  margin: 8%;
  font-weight: 700;
}
.skin-wizard-footer { flex-wrap: wrap; }

@media (max-width: 720px) {
  .skin-wizard-floating-arrows { right: 8px; bottom: 8px; transform: scale(.96); transform-origin: right bottom; }
}