@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg:           #1c2333;
  --surface:      #161b22;
  --surface-2:    #21262d;
  --border:       #30363d;
  --text:         #e6edf3;
  --text-muted:   #8b949e;
  --blue:         #58a6ff;
  --green:        #3fb950;
  --red:          #f85149;
  --amber:        #d29922;
  --btn-hover-bg: #2d333b;
  --btn-hover-bd: #444c56;
  --r-sm: 6px; --r-lg: 10px;
}

/* ── Skin : Midnight Blue ── */
html.skin-midnight {
  --bg:           #0f172a;
  --surface:      #1e293b;
  --surface-2:    #293548;
  --border:       #334155;
  --text:         #f1f5f9;
  --text-muted:   #64748b;
  --blue:         #38bdf8;
  --green:        #4ade80;
  --red:          #f87171;
  --amber:        #fbbf24;
  --btn-hover-bg: #334155;
  --btn-hover-bd: #4a5a70;
}

/* ── Skin : Catppuccin Latte ── */
html.skin-catppuccin {
  --bg:           #faf7f2;
  --surface:      #ffffff;
  --surface-2:    #f0ece4;
  --border:       #ddd6c8;
  --text:         #2e3048;
  --text-muted:   #636578;
  --blue:         #b5607a;
  --green:        #40a02b;
  --red:          #d20f39;
  --amber:        #df8e1d;
  --btn-hover-bg: #e8e2d8;
  --btn-hover-bd: #c8bfb0;
}

/* ── Skin : Cotton ── */
html.skin-cotton {
  --bg:           #ffffff;
  --surface:      #ffffff;
  --surface-2:    #fdf8fa;
  --border:       #f1e8ec;
  --text:         #1a1018;
  --text-muted:   #b0a8ae;
  --blue:         #db2777;
  --green:        #16a34a;
  --red:          #e11d48;
  --amber:        #d97706;
  --btn-hover-bg: #f5eef1;
  --btn-hover-bd: #e0c8d0;
}

/* ── Skin : Lilas ── */
html.skin-lilas {
  --bg:           #f7f3ff;
  --surface:      #ffffff;
  --surface-2:    #ede5ff;
  --border:       #d8cdf5;
  --text:         #2e1f4a;
  --text-muted:   #9080b8;
  --blue:         #7c5abf;
  --green:        #5a9060;
  --red:          #c04878;
  --amber:        #b07830;
  --btn-hover-bg: #e5daf8;
  --btn-hover-bd: #c8b8e8;
}

/* ── Skin : Menthe ── */
html.skin-menthe {
  --bg:           #f0faf5;
  --surface:      #ffffff;
  --surface-2:    #e0f5ea;
  --border:       #c0e5d0;
  --text:         #183828;
  --text-muted:   #70a088;
  --blue:         #2a8858;
  --green:        #28a050;
  --red:          #c85060;
  --amber:        #c08820;
  --btn-hover-bg: #cceedd;
  --btn-hover-bd: #a0d8b8;
}

/* ── Skin : Pêche ── */
html.skin-peche {
  --bg:           #fff8f3;
  --surface:      #ffffff;
  --surface-2:    #ffede0;
  --border:       #f5d5c0;
  --text:         #3d2015;
  --text-muted:   #b88870;
  --blue:         #d06838;
  --green:        #5a9048;
  --red:          #c84038;
  --amber:        #c07828;
  --btn-hover-bg: #ffe0ce;
  --btn-hover-bd: #f0c0a0;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 16px;
}

.container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
  width: 100%; max-width: 520px;
}

.eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: .65rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted);
  margin-bottom: 6px;
}

h1 {
  font-size: 1.25rem; font-weight: 600; color: var(--text);
  margin-bottom: 24px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

form { display: flex; flex-direction: column; gap: 8px; }

.btn {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: 'JetBrains Mono', monospace; font-size: .72rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text);
  cursor: pointer; text-align: left; position: relative; text-decoration: none;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-bd); }
.btn:active { background: var(--surface); }
.btn::after {
  content: '→'; position: absolute; right: 14px;
  font-size: .9rem; color: var(--text-muted);
  opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s;
}
.btn:hover::after { opacity: 1; transform: translateX(0); }

.btn-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.btn-stop    { border-left: 2px solid var(--red); }
.btn-stop    .btn-dot { background: var(--red); }
.btn-start   { border-left: 2px solid var(--green); }
.btn-start   .btn-dot { background: var(--green); animation: pulse-dot 2s ease infinite; }
.btn-restart { border-left: 2px solid var(--amber); }
.btn-restart .btn-dot { background: var(--amber); }
.btn-status  { border-left: 2px solid var(--blue); }
.btn-status  .btn-dot { background: var(--blue); }

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(63,185,80,.4); }
  50%       { box-shadow: 0 0 0 5px rgba(63,185,80,0); }
}

@media (max-width: 520px) {
  body { padding: 0; align-items: flex-start; }
  .container { max-width: 100%; border-radius: 0; border-left: none; border-right: none; padding: 24px 16px; }
}