:root {
  --font-main: 'Inter', sans-serif;
  --font-num: 'Archivo Black', sans-serif;
  --font-label: 'Space Mono', monospace;

  /* DEFAULT THEME (FOREST - matching the image) */
  --bg-display: #1C2B1E;
  --bg-controls: #0A0F0A;
  --text-primary: #7EC850;
  --text-muted: rgba(126, 200, 80, 0.4);
  --accent: #7EC850;
  --border: #2A3B2A;
  --btn-bg: #7EC850;
  --btn-text: #1C2B1E;
  --inp-bg: #141e15;
}

/* THEME MAPPING - PORTING ORIGINAL THEMES TO NEW LAYOUT */
[data-theme="kinetic"] {
  --bg-display: #FF4D00;
  --bg-controls: #CC3D00;
  --text-primary: #000;
  --text-muted: rgba(0, 0, 0, 0.6);
  --accent: #000;
  --border: rgba(0, 0, 0, 0.2);
  --btn-bg: #000;
  --btn-text: #fff;
  --inp-bg: #FF5E1A;
}

[data-theme="void"] {
  --bg-display: #000;
  --bg-controls: #111;
  --text-primary: #fff;
  --text-muted: rgba(255, 255, 255, 0.6);
  --accent: #fff;
  --border: #333;
  --btn-bg: #fff;
  --btn-text: #000;
  --inp-bg: #1a1a1a;
}

[data-theme="chalk"] {
  --bg-display: #F5F0E8;
  --bg-controls: #E8E2D8;
  --text-primary: #111;
  --text-muted: rgba(0, 0, 0, 0.6);
  --accent: #000;
  --border: rgba(0, 0, 0, 0.15);
  --btn-bg: #111;
  --btn-text: #F5F0E8;
  --inp-bg: #fff;
}

[data-theme="midnight"] {
  --bg-display: #0D1117;
  --bg-controls: #010409;
  --text-primary: #79B8FF;
  --text-muted: rgba(121, 184, 255, 0.6);
  --accent: #79B8FF;
  --border: #30363D;
  --btn-bg: #79B8FF;
  --btn-text: #0D1117;
  --inp-bg: #161B22;
}

[data-theme="matcha"] {
  --bg-display: #E8EDD8;
  --bg-controls: #D8DDC8;
  --text-primary: #2C3D1A;
  --text-muted: rgba(44, 61, 26, 0.6);
  --accent: #2C3D1A;
  --border: rgba(44, 61, 26, 0.2);
  --btn-bg: #2C3D1A;
  --btn-text: #E8EDD8;
  --inp-bg: #F0F4E8;
}

[data-theme="sakura"] {
  --bg-display: #FAF0F3;
  --bg-controls: #EAE0E3;
  --text-primary: #9E4059;
  --text-muted: rgba(158, 64, 89, 0.6);
  --accent: #9E4059;
  --border: rgba(158, 64, 89, 0.2);
  --btn-bg: #9E4059;
  --btn-text: #FAF0F3;
  --inp-bg: #FEF8F9;
}

[data-theme="lavender"] {
  --bg-display: #EDE8F5;
  --bg-controls: #DDD8E5;
  --text-primary: #523B8E;
  --text-muted: rgba(82, 59, 142, 0.6);
  --accent: #523B8E;
  --border: rgba(82, 59, 142, 0.2);
  --btn-bg: #523B8E;
  --btn-text: #EDE8F5;
  --inp-bg: #F5F2F9;
}

[data-theme="forest"] {
  --bg-display: #1C2B1E;
  --bg-controls: #0A0F0A;
  --text-primary: #9BE86E;
  --text-muted: rgba(155, 232, 110, 0.6);
  --accent: #9BE86E;
  --border: #2A3B2A;
  --btn-bg: #9BE86E;
  --btn-text: #1C2B1E;
  --inp-bg: #141e15;
}

[data-theme="sand"] {
  --bg-display: #F2E8D5;
  --bg-controls: #E2D8C5;
  --text-primary: #965E26;
  --text-muted: rgba(150, 94, 38, 0.6);
  --accent: #965E26;
  --border: rgba(150, 94, 38, 0.2);
  --btn-bg: #965E26;
  --btn-text: #F2E8D5;
  --inp-bg: #F8F4EA;
}

[data-theme="cyber"] {
  --bg-display: #0A0E27;
  --bg-controls: #050714;
  --text-primary: #E8FF00;
  --text-muted: rgba(232, 255, 0, 0.6);
  --accent: #E8FF00;
  --border: rgba(232, 255, 0, 0.3);
  --btn-bg: #E8FF00;
  --btn-text: #0A0E27;
  --inp-bg: #12172E;
}

[data-theme="ocean"] {
  --bg-display: #071828;
  --bg-controls: #030C14;
  --text-primary: #00DFFF;
  --text-muted: rgba(0, 223, 255, 0.6);
  --accent: #00DFFF;
  --border: rgba(0, 223, 255, 0.3);
  --btn-bg: #00DFFF;
  --btn-text: #071828;
  --inp-bg: #0D2030;
}

[data-theme="coffee"] {
  --bg-display: #1A0D08;
  --bg-controls: #0D0604;
  --text-primary: #F2D8B3;
  --text-muted: rgba(242, 216, 179, 0.6);
  --accent: #F2D8B3;
  --border: rgba(242, 216, 179, 0.2);
  --btn-bg: #F2D8B3;
  --btn-text: #1A0D08;
  --inp-bg: #2A180F;
}

[data-theme="arctic"] {
  --bg-display: #EBF5FF;
  --bg-controls: #DBE5EF;
  --text-primary: #1E4B7A;
  --text-muted: rgba(30, 75, 122, 0.6);
  --accent: #1E4B7A;
  --border: rgba(30, 75, 122, 0.2);
  --btn-bg: #1E4B7A;
  --btn-text: #EBF5FF;
  --inp-bg: #F5FAFF;
}

[data-theme="rose"] {
  --bg-display: #160410;
  --bg-controls: #0B0208;
  --text-primary: #FFC4D9;
  --text-muted: rgba(255, 196, 217, 0.6);
  --accent: #FFC4D9;
  --border: rgba(255, 196, 217, 0.2);
  --btn-bg: #FFC4D9;
  --btn-text: #160410;
  --inp-bg: #26081C;
}

[data-theme="electric"] {
  --bg-display: #FF0080;
  --bg-controls: #D6006B;
  --text-primary: #000;
  --text-muted: rgba(0, 0, 0, 0.6);
  --accent: #000;
  --border: rgba(0, 0, 0, 0.2);
  --btn-bg: #000;
  --btn-text: #FF0080;
  --inp-bg: #FF3399;
}

/* NEW TRENDING THEMES */
[data-theme="teal-forest"] {
  --bg-display: #35858E;
  --bg-controls: #2A6A72;
  --text-primary: #F5F9E6;
  --text-muted: rgba(245, 249, 230, 0.6);
  --accent: #D1DEAB;
  --border: rgba(245, 249, 230, 0.2);
  --btn-bg: #F5F9E6;
  --btn-text: #35858E;
  --inp-bg: #3E9BA6;
}

[data-theme="sunset"] {
  --bg-display: #1E104E;
  --bg-controls: #0F0827;
  --text-primary: #FFD98A;
  --text-muted: rgba(255, 217, 138, 0.6);
  --accent: #FF8566;
  --border: rgba(255, 217, 138, 0.2);
  --btn-bg: #FF8566;
  --btn-text: #1E104E;
  --inp-bg: #2A186D;
}

[data-theme="mint"] {
  --bg-display: #ACCFA3;
  --bg-controls: #84C5B1;
  --text-primary: #522D54;
  --text-muted: rgba(82, 45, 84, 0.6);
  --accent: #F5F0CF;
  --border: rgba(82, 45, 84, 0.2);
  --btn-bg: #522D54;
  --btn-text: #ACCFA3;
  --inp-bg: #BCE2B3;
}

[data-theme="candy"] {
  --bg-display: #E13F7C;
  --bg-controls: #B03262;
  --text-primary: #FFF2B3;
  --text-muted: rgba(255, 242, 179, 0.6);
  --accent: #FF7D9B;
  --border: rgba(255, 242, 179, 0.2);
  --btn-bg: #FFF2B3;
  --btn-text: #E13F7C;
  --inp-bg: #F14B8B;
}

[data-theme="plum"] {
  --bg-display: #934761;
  --bg-controls: #72364B;
  --text-primary: #E6F2D3;
  --text-muted: rgba(230, 242, 211, 0.6);
  --accent: #8FD1C2;
  --border: rgba(230, 242, 211, 0.2);
  --btn-bg: #E6F2D3;
  --btn-text: #934761;
  --inp-bg: #A6506E;
}

[data-theme="slate"] {
  --bg-display: #202940;
  --bg-controls: #161C2C;
  --text-primary: #E1C9BD;
  --text-muted: rgba(225, 201, 189, 0.6);
  --accent: #B09D8F;
  --border: rgba(225, 201, 189, 0.2);
  --btn-bg: #E1C9BD;
  --btn-text: #202940;
  --inp-bg: #2A3654;
}

[data-theme="nordic"] {
  --bg-display: #2B4865;
  --bg-controls: #256D85;
  --text-primary: #FFFFFF;
  --text-muted: rgba(255, 255, 255, 0.7);
  --accent: #A8F0DF;
  --border: rgba(255, 255, 255, 0.3);
  --btn-bg: #A8F0DF;
  --btn-text: #2B4865;
  --inp-bg: #355A7D;
}

[data-theme="neon"] {
  --bg-display: #252A34;
  --bg-controls: #1A1E25;
  --text-primary: #0FF2F0;
  --text-muted: rgba(15, 242, 240, 0.6);
  --accent: #FF4D7D;
  --border: rgba(15, 242, 240, 0.3);
  --btn-bg: #FF4D7D;
  --btn-text: #252A34;
  --inp-bg: #323946;
}

[data-theme="peach"] {
  --bg-display: #0C1844;
  --bg-controls: #060C22;
  --text-primary: #FFF8EB;
  --text-muted: rgba(255, 248, 235, 0.6);
  --accent: #FF8585;
  --border: rgba(255, 248, 235, 0.2);
  --btn-bg: #E6003E;
  --btn-text: #FFF8EB;
  --inp-bg: #162A75;
}

[data-theme="ocean-vibe"] {
  --bg-display: #0077B6;
  --bg-controls: #00B4D8;
  --text-primary: #E0F8FD;
  --text-muted: rgba(224, 248, 253, 0.6);
  --accent: #A9E9F5;
  --border: rgba(224, 248, 253, 0.2);
  --btn-bg: #E0F8FD;
  --btn-text: #0077B6;
  --inp-bg: #008AD3;
}

/* CITY THEMES */
[data-theme="new-york"] {
  --bg-display: #1A1A2E;
  --bg-controls: #0F0F1A;
  --text-primary: #F5C518;
  --text-muted: rgba(245, 197, 24, 0.5);
  --accent: #F5C518;
  --border: rgba(245, 197, 24, 0.25);
  --btn-bg: #F5C518;
  --btn-text: #1A1A2E;
  --inp-bg: #25253E;
}

[data-theme="miami"] {
  --bg-display: #061B2A;
  --bg-controls: #030E16;
  --text-primary: #FF2D78;
  --text-muted: rgba(255, 45, 120, 0.5);
  --accent: #FF2D78;
  --border: rgba(255, 45, 120, 0.25);
  --btn-bg: #FF2D78;
  --btn-text: #061B2A;
  --inp-bg: #0C2D42;
}

[data-theme="tokyo"] {
  --bg-display: #0D001A;
  --bg-controls: #060010;
  --text-primary: #C77DFF;
  --text-muted: rgba(199, 125, 255, 0.5);
  --accent: #C77DFF;
  --border: rgba(199, 125, 255, 0.25);
  --btn-bg: #C77DFF;
  --btn-text: #0D001A;
  --inp-bg: #1A0030;
}

[data-theme="london"] {
  --bg-display: #1F2B3E;
  --bg-controls: #131B26;
  --text-primary: #E8E8E8;
  --text-muted: rgba(232, 232, 232, 0.5);
  --accent: #CF0A0A;
  --border: rgba(207, 10, 10, 0.3);
  --btn-bg: #CF0A0A;
  --btn-text: #E8E8E8;
  --inp-bg: #28384F;
}


/* FONT STYLES (MATCHING ORIGINAL) */
[data-style="archivo"] {
  --font-num: 'Archivo Black', sans-serif;
  --font-label: 'Space Mono', monospace;
  --font-main: 'Inter', sans-serif;
}

[data-style="bebas"] {
  --font-num: 'Bebas Neue', sans-serif;
  --font-label: 'Space Mono', monospace;
  --font-main: 'Inter', sans-serif;
}

[data-style="anton"] {
  --font-num: 'Anton', sans-serif;
  --font-label: 'Space Mono', monospace;
  --font-main: 'Inter', sans-serif;
}

[data-style="impact"] {
  --font-num: Impact, sans-serif;
  --font-label: 'Space Mono', monospace;
  --font-main: 'Inter', sans-serif;
}

[data-style="oswald"] {
  --font-num: 'Oswald', sans-serif;
  --font-label: 'Space Mono', monospace;
  --font-main: 'Inter', sans-serif;
}

[data-style="rubik"] {
  --font-num: 'Rubik', sans-serif;
  --font-label: 'Space Mono', monospace;
  --font-main: 'Inter', sans-serif;
}

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

html,
body {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: var(--font-main);
  background: var(--bg-controls);
  color: var(--text-primary);
  transition: background 0.4s, color 0.4s;
}

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* DISPLAY SECTION */
.display-section {
  flex: 3.5;
  background: var(--bg-display);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  transition: background 0.4s;
  position: relative;
}

.top-label {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.main-title {
  font-family: var(--font-num);
  font-size: clamp(24px, 4vw, 48px);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: 30px;
}

.countdown-display {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.num-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.num-large {
  font-family: var(--font-num);
  font-size: clamp(80px, 28vh, 360px);
  line-height: 0.82;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
}

.colon-large {
  font-family: var(--font-num);
  font-size: clamp(60px, 20vh, 280px);
  opacity: 0.2;
  transform: translateY(-0.05em);
}

.unit-label {
  font-family: var(--font-label);
  font-size: clamp(9px, 1.2vh, 12px);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 15px;
  letter-spacing: 0.15em;
}

/* MID BAR */
.mid-bar {
  display: flex;
  justify-content: center;
  padding: 24px 40px;
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.bar-content {
  width: 100%;
  max-width: 1000px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.clock-wrap {
  font-family: var(--font-label);
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.bar-actions {
  display: flex;
  gap: 10px;
}

.bar-btn {
  background: transparent;
  border: 1.5px solid var(--accent);
  color: var(--text-primary);
  font-family: var(--font-label);
  font-size: 11px;
  padding: 8px 18px;
  border-radius: 99px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.2s;
  opacity: 0.8;
}

.bar-btn:hover {
  opacity: 1;
  background: var(--btn-bg);
  color: var(--btn-text);
}

/* CONTROLS SECTION */
.controls-section {
  flex: 2;
  background: var(--bg-controls);
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  transition: background 0.4s;
}

.inputs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  max-width: 1000px;
  border: 2px solid var(--accent);
  border-radius: 6px;
  overflow: hidden;
  background: var(--inp-bg);
}

.input-block {
  padding: 18px 24px;
  border-right: 2px solid var(--accent);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.3s;
}

.input-block:last-child {
  border-right: none;
}

.input-block label {
  font-family: var(--font-label);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.input-block input {
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-num);
  font-size: clamp(24px, 3.5vw, 42px);
  color: var(--text-primary) !important;
  width: 100%;
}

.input-block input::placeholder {
  color: var(--text-primary);
  opacity: 0.3;
}

/* Remove number arrows */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.action-btns {
  display: flex;
  gap: 12px;
}

.main-btn {
  background: var(--btn-bg);
  color: var(--btn-text);
  border: none;
  padding: 16px 50px;
  font-family: var(--font-num);
  font-size: 22px;
  border-radius: 99px;
  cursor: pointer;
  text-transform: uppercase;
  transition: transform 0.2s, background 0.2s;
}

.main-btn:hover {
  transform: scale(1.05);
}

.sec-btn {
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--text-primary);
  padding: 16px 35px;
  font-family: var(--font-num);
  font-size: 18px;
  border-radius: 99px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.2s;
}

.sec-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* PANELS */
.panel {
  position: fixed;
  bottom: 85px;
  right: 24px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 14px;
  border-radius: 12px;
  display: none;
  z-index: 100;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8);
  min-width: 260px;
}

.panel.open {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.p-head {
  font-family: var(--font-label);
  font-size: 9px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
  letter-spacing: 0.1em;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid transparent;
  transition: all 0.2s;
}

.opt:hover {
  background: rgba(255, 255, 255, 0.08);
}

.opt.active {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
}

.opt-name {
  font-family: var(--font-num);
  font-size: 11px;
  color: #eee;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* FULLSCREEN MODE */
:fullscreen .mid-bar,
:fullscreen .controls-section,
:fullscreen .service-section,
:fullscreen .faq-section,
:fullscreen .main-footer {
  display: none;
}

:fullscreen .display-section {
  height: 100vh;
  width: 100vw;
  flex: 1;
  padding: 0;
}

:fullscreen .top-label {
  display: none;
}

:fullscreen .main-title {
  display: block;
  margin-bottom: 20px;
  font-size: 5vh;
}

:fullscreen .num-large {
  font-size: 35vh;
}

:fullscreen .colon-large {
  font-size: 30vh;
}

/* Also support prefixed fullscreen for older browsers */
:-webkit-full-screen .mid-bar,
:-webkit-full-screen .controls-section,
:-webkit-full-screen .service-section,
:-webkit-full-screen .faq-section,
:-webkit-full-screen .main-footer {
  display: none;
}

:-webkit-full-screen .display-section {
  height: 100vh;
  width: 100vw;
  flex: 1;
  padding: 0;
}

:-webkit-full-screen .main-title {
  display: block;
  margin-bottom: 20px;
  font-size: 5vh;
}

:-webkit-full-screen .num-large {
  font-size: 35vh;
}

/* DONE OVERLAY */
.done {
  position: fixed;
  inset: 0;
  background: var(--bg-display);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: background 0.4s;
}

.done.on {
  display: flex;
}

.done-txt {
  font-family: var(--font-num);
  font-size: 12vw;
  text-align: center;
  color: var(--text-primary);
  line-height: 0.9;
  animation: blink 0.9s step-end infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }
}

.done-btn {
  margin-top: 40px;
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--text-primary);
  padding: 12px 30px;
  border-radius: 99px;
  cursor: pointer;
  font-family: var(--font-label);
  font-size: 11px;
  text-transform: uppercase;
}

/* SERVICE LIST SECTION */
.service-section {
  width: 100%;
  background: var(--bg-controls);
  border-top: 2px solid var(--accent);
}

.service-list {
  display: flex;
  flex-direction: column;
}

.service-item {
  display: flex;
  align-items: center;
  padding: 30px 40px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.1s;
  position: relative;
  cursor: pointer;
}

.service-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.service-index {
  font-family: var(--font-label);
  font-size: 11px;
  width: 40px;
  letter-spacing: -0.05em;
  opacity: 0.6;
}

.service-main {
  flex: 1;
  transition: transform 0.15s;
}

.service-item:hover .service-main {
  transform: translateX(16px);
}

.service-title {
  font-family: var(--font-num);
  font-size: clamp(32px, 6vw, 84px);
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.tag-row {
  display: flex;
  gap: 8px;
}

.tag-pill {
  font-family: var(--font-label);
  font-size: 9px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.service-arrow {
  font-size: 42px;
  opacity: 0;
  transform: rotate(0deg);
  transition: all 0.15s;
}

.service-item:hover .service-arrow {
  opacity: 1;
  transform: rotate(45deg);
}

/* FAQ SECTION */
.faq-section {
  padding: 80px 40px;
  background: var(--bg-display);
  display: flex;
  justify-content: center;
  border-top: 2px solid var(--accent);
}

.faq-content {
  width: 100%;
  max-width: 1000px;
}

.faq-title {
  font-family: var(--font-num);
  font-size: clamp(24px, 4vw, 36px);
  text-transform: uppercase;
  margin-bottom: 40px;
  letter-spacing: -0.02em;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item summary {
  padding: 20px 0;
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-num);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  transition: opacity 0.2s;
}

.faq-item summary:hover {
  opacity: 0.7;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item[open] summary {
  opacity: 0.5;
}

.faq-item[open] .arrow {
  transform: rotate(180deg);
}

.arrow {
  font-size: 14px;
  transition: transform 0.3s;
  opacity: 0.6;
}

.faq-answer {
  padding-bottom: 25px;
  font-family: var(--font-main);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 800px;
}

/* MAIN FOOTER */
.main-footer {
  padding: 80px 40px 40px;
  background: var(--bg-display);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background 0.4s;
}

.footer-grid {
  width: 100%;
  max-width: 1000px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 80px;
}

.footer-col.about {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.f-logo {
  font-family: var(--font-num);
  font-size: 28px;
  letter-spacing: -0.05em;
  color: var(--text-primary);
}

.f-desc {
  font-family: var(--font-main);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 400px;
}

.f-head {
  font-family: var(--font-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-primary);
  margin-bottom: 25px;
}

.f-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.f-links a {
  text-decoration: none;
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--text-primary);
  opacity: 0.6;
  transition: all 0.2s;
}

.f-links a:hover {
  opacity: 1;
  text-decoration: underline;
}

.f-socials {
  display: flex;
  gap: 24px;
  margin-top: 15px;
}

.social-link {
  text-decoration: none;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  transition: all 0.2s;
}

.social-link:hover {
  color: var(--text-primary);
  transform: translateY(-2px);
}

.footer-bottom {
  width: 100%;
  max-width: 1000px;
  border-top: 1px solid var(--border);
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-label);
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.6;
}

/* ANIMATIONS */
@keyframes pop {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.02);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.pop-anim {
  animation: pop 0.4s cubic-bezier(0.17, 0.67, 0.83, 0.67);
}

@keyframes flash {
  0% {
    opacity: 0.7;
  }

  100% {
    opacity: 1;
  }
}

.flash-anim {
  animation: flash 0.6s ease-out;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 40px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .faq-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .inputs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .input-block:nth-child(2) {
    border-right: none;
  }

  .input-block:nth-child(1),
  .input-block:nth-child(2) {
    border-bottom: 2px solid var(--accent);
  }

  .num-large {
    font-size: 18vw;
  }

  .colon-large {
    font-size: 15vw;
  }
}

@media (max-width: 600px) {
  .display-section {
    padding: 30px 10px;
  }

  .main-title {
    font-size: 24px;
    margin-bottom: 15px;
    text-align: center;
  }

  .mid-bar {
    padding: 12px 15px;
  }

  .bar-content {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .clock-wrap {
    order: 2;
    font-size: 10px;
  }

  .bar-actions {
    order: 1;
    width: 100%;
    justify-content: center;
    gap: 6px;
  }

  .bar-btn {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    font-size: 9px;
    min-width: 0;
  }

  .controls-section {
    padding: 25px 15px;
  }

  .action-btns {
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }

  .main-btn,
  .sec-btn {
    width: 100%;
    padding: 14px;
    font-size: 18px;
  }

  .num-large {
    font-size: 12.5vw;
  }

  .colon-large {
    font-size: 10vw;
  }

  .countdown-display {
    gap: 1px;
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 400px) {
  .num-large {
    font-size: 13vw;
  }

  .colon-large {
    font-size: 10vw;
    transform: translateY(-0.02em);
  }

  .countdown-display {
    gap: 1px;
  }

  .unit-label {
    font-size: 8px;
    margin-top: 8px;
  }

  .inputs-grid {
    grid-template-columns: 1fr;
  }

  .input-block {
    border-right: none;
    border-bottom: 2px solid var(--accent);
    padding: 12px 15px;
  }

  .input-block:last-child {
    border-bottom: none;
  }

  .input-block input {
    font-size: 28px;
  }
}

/* MOBILE FULLSCREEN FIX */
@media (max-width: 600px) {
  :fullscreen .main-title {
    font-size: 4vh;
  }

  :fullscreen .num-large {
    font-size: 18vw;
  }

  :fullscreen .colon-large {
    font-size: 15vw;
  }

  :-webkit-full-screen .main-title {
    font-size: 4vh;
  }

  :-webkit-full-screen .num-large {
    font-size: 18vw;
  }
}