:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #1a1a1a;
  color: #eee;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #1a1a1a; color: #eee; }
button, input { font: inherit; }
a { color: #64b5f6; }

.main-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: #111;
  border-bottom: 1px solid #333;
}

.nav-logo { color: #fff; font-size: 1.1rem; font-weight: 800; text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-links a { color: #aaa; font-size: .9rem; font-weight: 500; text-decoration: none; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: #fff; }
.menu-toggle { display: none; border: 0; background: none; color: #fff; cursor: pointer; font-size: 1.5rem; }

.app-layout {
  display: flex;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
  padding-top: 20px;
}

.main-content { display: flex; width: 100%; flex-direction: column; align-items: center; padding-bottom: 50px; }
.full-width { width: 100%; }
.hidden { display: none !important; }

.user-bar { display: flex; width: 100%; align-items: center; gap: 10px; margin-bottom: 20px; padding: 10px 0; }
.btn-feedback { display: flex; align-items: center; margin-right: auto; padding: 6px 14px; border: 1px solid #444; border-radius: 20px; color: #aaa; font-size: .9rem; text-decoration: none; }
.btn-icon-round { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #444; border-radius: 50%; background: transparent; color: #ccc; cursor: pointer; }
.btn-icon-round.active { border-color: #1976d2; background: #2196f3; color: white; }

h1 { margin: 0 0 5px; text-align: center; font-size: 1.5rem; font-weight: 800; }
h2 { margin: 0 0 25px; color: #888; text-align: center; font-size: 1rem; font-weight: 400; }
h3 { margin: 0; color: #aaa; font-size: .95rem; text-transform: uppercase; letter-spacing: .03em; }
h4 { margin: 18px 0 10px; color: #aaa; }

.box { width: 100%; margin-bottom: 20px; padding: 20px; border-radius: 16px; background: #2a2a2a; }
.share-box { border: 1px solid #555; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.help-btn { display: grid; width: 26px; height: 26px; place-items: center; border: 0; border-radius: 50%; background: #444; color: #bbb; cursor: pointer; }
.help-content { display: none; margin: 0 0 12px; padding: 15px; border-left: 3px solid #2196f3; border-radius: 8px; background: #333; color: #ccc; font-size: .9rem; line-height: 1.5; }
.help-content.open { display: block; }

.row, .smart-inputs, .share-actions { display: flex; gap: 10px; }
.row { margin-bottom: 10px; align-items: center; }
.smart-inputs { padding-top: 10px; border-top: 1px dashed #444; }
.share-actions { margin-top: 10px; }
input { width: 100%; padding: 12px; border: 1px solid #444; border-radius: 8px; background: #333; color: white; }
input:focus { outline: 2px solid #2196f3; outline-offset: 1px; }
input[type="checkbox"] { width: 20px; height: 20px; accent-color: #2196f3; }
.time-input { width: 32%; min-width: 100px; }
.short-number { width: 76px; text-align: center; }
.check-label, .rounds-label { display: flex; align-items: center; gap: 10px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 10px; border-radius: 8px; background: #333; }
.top-gap { margin-top: 15px; }

.btn { width: 100%; padding: 12px; border: 0; border-radius: 8px; color: white; cursor: pointer; font-weight: 700; }
.btn:disabled { cursor: wait; opacity: .65; }
.btn-blue { background: #1976d2; }
.btn-green { margin-top: 10px; background: #388e3c; font-size: 1.1rem; }
.btn-red { background: #d32f2f; }
.btn-purple { background: #7b1fa2; }
.btn-teal { background: #00695c; }
.btn-small { width: auto; padding: 10px 16px; background: #444; color: #eee; }

ul { margin: 0; padding: 0; list-style: none; }
li { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding: 10px 15px; border-radius: 8px; background: #333; }
.draft-main { min-width: 0; overflow-wrap: anywhere; }
.status-item { justify-content: center; color: #aaa; }
.cloud-item { width: 100%; border: 0; border-left: 4px solid #9c27b0; background: #333; color: #eee; cursor: pointer; text-align: left; }
.cloud-item:hover { background: #3b3b3b; }
.cloud-name { min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.cloud-action { color: #bbb; font-size: .8rem; }
.sequence-controls { margin-top: 15px; padding-top: 15px; border-top: 1px solid #444; }

#roadmapColumn, #statsColumn { display: none; }
#roadmapColumn { height: 90vh; overflow: hidden; }
#statsColumn { align-self: start; flex-direction: column; gap: 20px; }
.stat-box { display: flex; min-height: 130px; flex-direction: column; justify-content: center; padding: 24px 16px; border: 1px solid #333; border-radius: 16px; background: #222; text-align: center; }
.stat-val { color: #fff; font-size: 3rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -2px; line-height: 1; }
.stat-label { margin-top: 10px; color: #777; font-size: .9rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
#roadmapListContainer { flex: 1; padding: 15px; overflow-y: auto; border: 1px solid #333; border-radius: 16px; background: #222; }
.roadmap-header { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #444; font-weight: 700; text-transform: uppercase; }
.rm-item { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 10px; margin-bottom: 8px; padding: 15px; border-radius: 8px; background: #333; opacity: .6; }
.rm-item.active { border-left: 6px solid #4caf50; background: #2c2c2c; box-shadow: 0 4px 20px rgb(0 0 0 / 50%); opacity: 1; transform: scale(1.02); }
.rm-item.done { opacity: .35; }
.rm-desc { overflow-wrap: anywhere; }
.rm-rpm { padding: 2px 6px; border-radius: 4px; background: #444; color: #ddd; font-size: .8rem; white-space: nowrap; }

body.focus-mode .main-nav, body.focus-mode .seo-container, body.focus-mode h1, body.focus-mode h2, body.focus-mode footer, body.focus-mode .user-bar { display: none !important; }
body.focus-mode .app-layout { display: grid; min-height: 98vh; max-width: 1500px; grid-template-columns: minmax(360px, 440px) minmax(0, 1fr) 210px; align-items: center; gap: 24px; padding: 1vh 2vw; }
body.focus-mode #roadmapColumn, body.focus-mode #statsColumn { display: flex; }
.timer-box { padding: 0; border: 0; background: transparent; text-align: center; }
.round-display { margin-bottom: 10px; color: #888; letter-spacing: 2px; text-transform: uppercase; }
.task-name { margin-bottom: 10px; color: #2196f3; font-size: 3.5rem; font-weight: 800; line-height: 1; overflow-wrap: anywhere; text-transform: uppercase; }
.target-container { display: flex; align-items: center; justify-content: center; min-height: 62px; margin-bottom: 10px; }
.target-badge { display: flex; padding: 10px 20px; border-radius: 12px; color: white; font-size: 1.8rem; font-weight: 700; }
.bg-rpm { background: #ad1457; }
.timer-display { margin: 10px 0; color: #fff; font-size: clamp(7rem, 13vw, 16rem); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.05em; line-height: .85; text-shadow: 0 0 30px rgb(0 0 0 / 50%); }
.progress-bar { width: 100%; height: 12px; margin-top: 40px; overflow: hidden; border-radius: 6px; background: #333; }
.progress-fill { width: 0; height: 100%; background: #4caf50; }
.next-display { margin-top: 18px; color: #aaa; text-transform: uppercase; }
.stop-btn { width: auto; margin-top: 40px; padding: 10px 40px; }
.seo-container { width: 100%; margin-top: 60px; padding: 20px; color: #bbb; line-height: 1.7; }

footer { padding: 20px; color: #777; font-size: .8rem; text-align: center; }

@media (max-width: 1100px) {
  body.focus-mode .app-layout { display: flex; height: auto; flex-direction: column; gap: 20px; }
  #statsColumn { width: 100%; flex-direction: row; order: 2; }
  #statsColumn .stat-box { flex: 1; }
  #roadmapColumn { order: 3; width: 100%; height: auto; max-height: 400px; }
  .stat-box { min-height: auto; padding: 20px; }
  .stat-val { font-size: 3rem; }
}

@media (max-width: 700px) {
  .main-nav { padding: 10px 14px; }
  .nav-links { position: absolute; top: 100%; right: 0; left: 0; display: none; flex-direction: column; padding: 20px; border-bottom: 1px solid #333; background: #1a1a1a; text-align: center; }
  .nav-links.active { display: flex; }
  .menu-toggle { display: block; }
  .app-layout { width: 100%; padding: 14px; }
  .row, .share-actions { flex-direction: column; }
  .time-input { width: 100%; }
  .task-name { font-size: 2.4rem; }
  .timer-display { font-size: 28vw; letter-spacing: -3px; }
}