/* Generated from the existing versioned styles. */

/* styles.v2.css */
:root {
  --background: #f2f5fa;
  --card: #ffffff;
  --text: #202124;
  --muted: #666b73;
  --border: #c8cdd3;
  --blue: #0b7fc3;
  --blue-soft: #eef5fb;
  --drive: #e8a2a5;
  --drive-dark: #c77d81;
  --work: #e1c57c;
  --work-dark: #c3a75e;
  --rest: #a8c7f0;
  --rest-dark: #7fa7dc;
  --track: #e1e5eb;
  --danger: #db2e2e;
  --warning: #f5bd2e;
  --success: #2f9e44;
  --shadow: 0 9px 22px rgba(31, 41, 55, 0.07);
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: var(--background);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--background);
  scroll-behavior: smooth;
}

body {
  min-width: 300px;
  margin: 0;
  color: var(--text);
  background: var(--background);
}

button,
input,
select {
  font: inherit;
}

button,
label,
select,
input {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(11, 127, 195, 0.28);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 10px 14px;
  color: white;
  background: #111827;
  border-radius: 9px;
}

.skip-link:focus {
  top: 12px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.matlab-shell {
  width: min(1840px, 100%);
  margin: 0 auto;
  padding: 22px;
}

.matlab-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 124px;
  padding: 18px 22px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(238, 244, 251, 0.96));
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(31, 41, 55, 0.08);
}

.matlab-hero h1 {
  margin: 0;
  font-size: clamp(27px, 3vw, 36px);
  letter-spacing: 0.2px;
}

.matlab-hero p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.35;
}

.install-button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  color: #1d4ed8;
  font-weight: 800;
  background: #dbeafe;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.control-panel {
  display: grid;
  grid-template-columns: minmax(210px, 1.35fr) 150px 145px minmax(240px, 1.4fr) 130px auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  margin: 0 0 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.field > span,
.file-field > span,
.timer-inputs label > span {
  display: block;
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.field input,
.field select,
.timer-inputs input {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  color: #111827;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.file-field {
  min-width: 0;
  cursor: pointer;
}

.file-field input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.file-field strong {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 11px;
  overflow: hidden;
  color: #111827;
  background: #f8fafc;
  border: 1px dashed #9aa8b5;
  border-radius: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-field strong::before {
  content: "↑";
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  color: white;
  background: var(--blue);
  border-radius: 8px;
  font-weight: 900;
}

.form-actions {
  display: flex;
  gap: 8px;
}

.form-actions button {
  min-height: 42px;
  padding: 0 14px;
  color: #111827;
  font-weight: 800;
  white-space: nowrap;
  background: var(--blue-soft);
  border: 1px solid var(--border);
  border-radius: 11px;
  cursor: pointer;
}

.form-actions .primary-action {
  color: white;
  background: var(--blue);
  border-color: var(--blue);
}

.form-actions button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.info-line {
  grid-column: 1 / -1;
  min-height: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.info-line.error {
  color: #b42318;
  font-weight: 700;
}

.tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px;
  margin: 0 0 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.tab {
  min-height: 45px;
  padding: 0 18px;
  color: var(--text);
  font-weight: 800;
  background: var(--blue-soft);
  border: 1px solid var(--border);
  border-radius: 13px;
  cursor: pointer;
}

.tab.active {
  color: white;
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 7px 18px rgba(11, 127, 195, 0.2);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.segment {
  margin: 18px 0 27px;
}

.segment h2 {
  margin: 0 0 10px 4px;
  font-size: 23px;
}

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

.dashboard-card {
  --accent: var(--rest);
  --accent-dark: var(--rest-dark);
  position: relative;
  min-width: 0;
  min-height: 245px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.accent-driving {
  --accent: var(--drive);
  --accent-dark: var(--drive-dark);
}

.accent-work {
  --accent: var(--work);
  --accent-dark: var(--work-dark);
}

.accent-rest {
  --accent: var(--rest);
  --accent-dark: var(--rest-dark);
}

.dashboard-card.severity-warning {
  background: #fff7c7;
  border-color: var(--warning);
}

.dashboard-card.severity-danger,
.dashboard-card.severity-overdue {
  background: #ffdddd;
  border-color: var(--danger);
}

.title-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, var(--accent) 22%, white));
}

.section-card-title {
  padding: 18px;
  color: color-mix(in srgb, var(--accent-dark) 72%, #5a4550);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(35px, 3.3vw, 48px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 2px;
  text-align: center;
  text-shadow: 1px 1px 0 white;
}

.favorite-box {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
}

.favorite-input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #111827;
  cursor: pointer;
}

.gauge-card {
  padding: 0 13px 13px;
}

.gauge-title {
  min-height: 48px;
  margin: 17px 28px 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 800;
  line-height: 1.18;
  text-align: center;
}

.semi-gauge {
  display: block;
  width: 88%;
  max-width: 340px;
  height: 145px;
  margin: -2px auto 0;
}

.gauge-track,
.gauge-progress {
  fill: none;
  stroke-width: 36;
  stroke-linecap: butt;
}

.gauge-track {
  stroke: var(--track);
}

.gauge-progress {
  stroke: var(--accent);
}

.gauge-labels {
  display: flex;
  justify-content: space-between;
  margin: -23px 30px 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 800;
}

.gauge-value {
  margin-top: -75px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.gauge-scale {
  margin-top: 7px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.gauge-note {
  min-height: 34px;
  margin: 8px 8px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
}

.satisfied-gauge {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  margin: 28px auto 14px;
  color: var(--success);
  font-size: 50px;
  font-weight: 900;
  border: 7px solid var(--success);
  border-radius: 50%;
}

.severity-satisfied .gauge-value {
  margin-top: 0;
  font-size: 24px;
}

.info-card {
  padding: 20px 24px;
  font-family: Georgia, "Times New Roman", serif;
}

.info-accent {
  height: 7px;
  margin-bottom: 14px;
  background: var(--accent);
  border-radius: 999px;
}

.info-card h3 {
  margin: 0 0 12px;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 19px;
}

.info-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
}

.check-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  text-align: center;
}

.check-mark {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 15px;
  color: var(--success);
  font-size: 46px;
  font-weight: 900;
  border: 7px solid var(--success);
  border-radius: 50%;
}

.check-card h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
}

.check-card p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.empty-favorites {
  padding: 24px;
  color: var(--muted);
  font-weight: 700;
}

.tool-card {
  min-height: 380px;
  padding: 30px;
  text-align: center;
  background: linear-gradient(135deg, white, #eef7ff);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.tool-card h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
}

.tool-time {
  margin: 14px 0 22px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(45px, 7vw, 72px);
  font-weight: 900;
  letter-spacing: 2px;
}

.tool-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.tool-actions button,
.mini-reset {
  min-height: 44px;
  padding: 0 22px;
  color: #111827;
  font-weight: 900;
  background: var(--blue-soft);
  border: 1px solid var(--border);
  border-radius: 13px;
  cursor: pointer;
}

.tool-actions .tool-primary,
.tool-actions .running {
  color: white;
  background: var(--blue);
  border-color: var(--blue);
}

.tool-card > p {
  color: var(--muted);
  font-size: 13px;
}

.mini-timeline {
  width: min(100%, 1100px);
  margin: 28px auto 0;
}

.timeline-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.timeline-track {
  position: relative;
  display: block;
  width: 100%;
  height: 38px;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(90deg, #d9efff 0 25%, #ffd7d7 25% 75%, #d9efff 75% 100%);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}

.timeline-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(90deg, #79c9ff, var(--blue));
  border-radius: 999px;
  transition: width 0.1s linear;
  opacity: 0.8;
}

.timeline-ticks {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.timeline-ticks span:first-child {
  text-align: left;
}

.timeline-ticks span:last-child {
  text-align: right;
}

.mini-reset {
  margin-top: 10px;
  min-height: 36px;
  padding: 0 15px;
}

.timer-inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 620px);
  margin: 18px auto 0;
}

.timer-inputs label {
  text-align: left;
}

.timer-inputs input {
  font-size: 17px;
  font-weight: 800;
  text-align: center;
}

.timer-message {
  min-height: 20px;
  color: #b42318 !important;
  font-size: 15px !important;
  font-weight: 900;
}

.legal-note {
  display: flex;
  gap: 8px;
  padding: 15px 18px;
  margin-top: 28px;
  color: #6d5938;
  background: #fff8e9;
  border: 1px solid #f0d8a9;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 1420px) {
  .control-panel {
    grid-template-columns: minmax(220px, 1.3fr) 145px 140px minmax(220px, 1fr) 120px;
  }

  .form-actions {
    grid-column: span 2;
  }
}

@media (max-width: 1100px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .control-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-actions {
    grid-column: auto;
  }

  .file-field,
  .zone-field {
    grid-column: span 2;
  }
}

@media (max-width: 680px) {
  .matlab-shell {
    padding: 10px;
  }

  .matlab-hero {
    align-items: flex-start;
    flex-direction: column;
    min-height: 0;
    padding: 16px;
    border-radius: 16px;
  }

  .install-button {
    width: 100%;
  }

  .control-panel {
    gap: 9px;
    padding: 12px;
    border-radius: 15px;
  }

  .file-field,
  .zone-field,
  .mode-field,
  .form-actions {
    grid-column: span 2;
  }

  .form-actions button {
    flex: 1;
  }

  .tabs {
    flex-wrap: nowrap;
    gap: 7px;
    margin-inline: -1px;
    overflow-x: auto;
    border-radius: 14px;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tab {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 14px;
    font-size: 13px;
  }

  .segment {
    margin-top: 15px;
  }

  .segment h2 {
    font-size: 20px;
  }

  .dashboard-grid {
    gap: 8px;
  }

  .dashboard-card {
    min-height: 220px;
    border-radius: 14px;
  }

  .section-card-title {
    padding: 9px;
    font-size: clamp(23px, 8vw, 34px);
    letter-spacing: 0.8px;
  }

  .favorite-box {
    left: 7px;
    top: 7px;
  }

  .favorite-input {
    width: 18px;
    height: 18px;
  }

  .gauge-card {
    padding: 0 5px 9px;
  }

  .gauge-title {
    min-height: 48px;
    margin: 14px 21px 0;
    font-size: clamp(13px, 4.2vw, 17px);
  }

  .semi-gauge {
    width: 100%;
    height: 116px;
    margin-top: -3px;
  }

  .gauge-track,
  .gauge-progress {
    stroke-width: 31;
  }

  .gauge-labels {
    margin: -21px 10px 0;
    font-size: 11px;
  }

  .gauge-value {
    margin-top: -58px;
    font-size: clamp(24px, 8vw, 33px);
  }

  .gauge-scale {
    margin-top: 5px;
    font-size: 11px;
  }

  .gauge-note {
    min-height: 32px;
    margin: 6px 3px 0;
    font-size: 10px;
    line-height: 1.2;
  }

  .info-card {
    padding: 15px 12px;
  }

  .info-card h3 {
    padding-left: 16px;
    font-size: 15px;
  }

  .info-card p {
    font-size: 11px;
  }

  .check-card {
    padding: 18px 8px;
  }

  .check-mark,
  .satisfied-gauge {
    width: 58px;
    height: 58px;
    border-width: 5px;
    font-size: 36px;
  }

  .check-card h3 {
    font-size: 15px;
  }

  .check-card p {
    font-size: 11px;
  }

  .tool-card {
    padding: 22px 12px;
  }

  .tool-time {
    font-size: clamp(39px, 14vw, 58px);
  }

  .timeline-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .legal-note {
    flex-direction: column;
  }
}

@media (max-width: 380px) {
  .matlab-shell {
    padding-inline: 6px;
  }

  .dashboard-grid {
    gap: 6px;
  }

  .dashboard-card {
    min-height: 205px;
  }

  .gauge-title {
    font-size: 12px;
  }

  .semi-gauge {
    height: 108px;
  }

  .gauge-note {
    font-size: 9.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}


/* styles.v3.css */
/* Dodatni izvori kartice */
.enhanced-file-field {
  gap: 12px;
}

.file-source-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.file-source-button {
  appearance: none;
  border: 1px solid #aebbc8;
  border-radius: 12px;
  background: #f5f8fb;
  color: #172131;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  min-height: 46px;
  padding: 10px 16px;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.file-source-button:hover,
.file-source-button:focus-visible {
  border-color: #0c83c6;
  background: #eaf6fd;
  outline: none;
  transform: translateY(-1px);
}

.file-source-button.primary {
  border-color: #0c83c6;
  background: #0c83c6;
  color: #fff;
}

.reader-note {
  color: #5e6873;
  font-size: 13px;
  line-height: 1.45;
  margin: 8px 0 0;
  width: 100%;
}

/* Ručni unos aktivnosti */
.manual-activity-panel {
  border: 1px solid #c6cdd4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(33, 48, 64, 0.06);
  margin-top: 16px;
  overflow: hidden;
}

.manual-activity-panel > summary {
  cursor: pointer;
  font-weight: 900;
  list-style: none;
  padding: 18px 20px;
  position: relative;
}

.manual-activity-panel > summary::-webkit-details-marker {
  display: none;
}

.manual-activity-panel > summary::after {
  content: '+';
  color: #0c83c6;
  font-size: 25px;
  line-height: 1;
  position: absolute;
  right: 20px;
  top: 14px;
}

.manual-activity-panel[open] > summary::after {
  content: '\2212';
}

.manual-activity-content {
  border-top: 1px solid #e1e5e9;
  padding: 18px 20px 20px;
}

.manual-activity-intro,
.manual-empty,
.manual-summary {
  color: #5e6873;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 14px;
}

.manual-summary {
  border-radius: 10px;
  background: #eef7fc;
  color: #145678;
  font-weight: 750;
  padding: 10px 12px;
}

.manual-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.manual-action-button,
.manual-delete-button {
  appearance: none;
  border: 1px solid #b9c3cd;
  border-radius: 10px;
  background: #f7f9fb;
  color: #172131;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  min-height: 40px;
  padding: 8px 12px;
}

.manual-action-button:hover,
.manual-action-button:focus-visible {
  border-color: #0c83c6;
  background: #eaf6fd;
  outline: none;
}

.manual-action-button.danger {
  color: #a02f2f;
}

.manual-entry {
  align-items: end;
  border: 1px solid #d5dbe0;
  border-radius: 13px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(150px, .8fr) minmax(190px, 1fr) minmax(190px, 1fr) auto;
  margin-bottom: 10px;
  padding: 12px;
}

.manual-entry label {
  color: #46515c;
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
}

.manual-entry select,
.manual-entry input {
  border: 1px solid #b9c3cd;
  border-radius: 9px;
  background: #fff;
  color: #172131;
  font: inherit;
  min-height: 42px;
  padding: 8px 10px;
  width: 100%;
}

.manual-delete-button {
  border-color: #e2baba;
  color: #a02f2f;
  min-width: 42px;
  padding: 8px;
}

/* iPhone inspirisana štoperica */
.iphone-stopwatch-card,
.smart-minute-card,
.flip-timer-card {
  background: #fff;
  border: 1px solid #c6cdd4;
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(29, 44, 60, 0.08);
  margin: 0 auto;
  max-width: 760px;
  padding: clamp(18px, 4vw, 34px);
}

.iphone-stopwatch-card {
  background: linear-gradient(155deg, #17191c 0%, #08090a 72%);
  color: #fff;
  text-align: center;
}

.stopwatch-dial {
  aspect-ratio: 1;
  border: 2px solid #51545a;
  border-radius: 50%;
  box-shadow: inset 0 0 0 8px #111315, inset 0 0 30px rgba(255,255,255,.04);
  margin: 4px auto 24px;
  max-width: 330px;
  position: relative;
  width: min(74vw, 330px);
}

.dial-ticks,
.dial-ticks i {
  inset: 0;
  position: absolute;
}

.dial-ticks i {
  transform: rotate(calc(var(--tick) * 6deg));
}

.dial-ticks i::before {
  background: #c7c9cd;
  border-radius: 1px;
  content: '';
  height: 7px;
  left: 50%;
  position: absolute;
  top: 11px;
  transform: translateX(-50%);
  width: 1px;
}

.dial-ticks i:nth-child(5n + 1)::before {
  background: #fff;
  height: 14px;
  width: 2px;
}

.dial-number {
  color: #e7e8e9;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  position: absolute;
  transform: translate(-50%, -50%);
}

.dial-number.n60 { left: 50%; top: 15%; }
.dial-number.n15 { left: 85%; top: 50%; }
.dial-number.n30 { left: 50%; top: 85%; }
.dial-number.n45 { left: 15%; top: 50%; }

.stopwatch-hand {
  background: #ff3b30;
  border-radius: 4px;
  bottom: 50%;
  height: 37%;
  left: calc(50% - 1px);
  position: absolute;
  transform-origin: 50% 100%;
  transition: transform 80ms linear;
  width: 2px;
}

.stopwatch-hand::after {
  background: #ff3b30;
  border: 3px solid #f1f2f3;
  border-radius: 50%;
  bottom: -7px;
  content: '';
  height: 10px;
  left: -7px;
  position: absolute;
  width: 10px;
}

.stopwatch-digital {
  color: #fff;
  font-size: clamp(42px, 9vw, 72px);
  font-variant-numeric: tabular-nums;
  font-weight: 300;
  letter-spacing: -.04em;
  margin-bottom: 24px;
}

.iphone-actions {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 9vw, 74px);
}

.round-action {
  align-items: center;
  appearance: none;
  background: #113d22;
  border: 4px solid #0b0d0f;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #194d2d;
  color: #36d66b;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  height: 76px;
  justify-content: center;
  width: 76px;
}

.round-action.secondary {
  background: #2b2d31;
  box-shadow: 0 0 0 2px #484b50;
  color: #e8e8e9;
}

.round-action.stop {
  background: #481414;
  box-shadow: 0 0 0 2px #6b1d1d;
  color: #ff453a;
}

/* Pametna minuta */
.smart-minute-head {
  align-items: baseline;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 28px;
}

.smart-minute-head h3 {
  margin: 0;
}

.smart-minute-time {
  color: #0c83c6;
  font-size: clamp(30px, 6vw, 52px);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.smart-track-wrap {
  padding: 22px 5px 38px;
}

.smart-track {
  background: linear-gradient(90deg, #dff4e6 0 25%, #fff2c4 25% 50%, #fde0df 50% 100%);
  border: 1px solid #c9d0d7;
  border-radius: 999px;
  height: 30px;
  overflow: visible;
  position: relative;
}

.smart-track-fill {
  background: linear-gradient(90deg, #1688c8, #19a2dd);
  border-radius: inherit;
  height: 100%;
  left: 0;
  max-width: 100%;
  position: absolute;
  top: 0;
  transition: width 100ms linear;
}

.smart-tick {
  color: #59636c;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  left: calc(var(--pos) * 12.5%);
  padding-top: 16px;
  position: absolute;
  top: 22px;
  transform: translateX(-50%);
}

.smart-tick::before {
  background: #68737c;
  content: '';
  height: 10px;
  left: 50%;
  position: absolute;
  top: 2px;
  width: 1px;
}

.smart-minute-legend {
  display: grid;
  font-size: 12px;
  gap: 7px;
  grid-template-columns: repeat(3, 1fr);
  margin: 12px 0 24px;
  text-align: center;
}

.smart-minute-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* Flip countdown */
.flip-timer-card {
  background: radial-gradient(circle at 50% -10%, #343536, #101112 62%);
  color: #fff;
  max-width: 880px;
}

.flip-timer-card h3 {
  font-size: clamp(22px, 4vw, 34px);
  letter-spacing: .04em;
  margin: 0 0 22px;
  text-align: center;
}

.compact-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 24px;
}

.compact-inputs label,
.timer-sound-row label {
  color: #c8c9ca;
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 5px;
}

.compact-inputs input,
.timer-sound-row select {
  border: 1px solid #55585b;
  border-radius: 9px;
  background: #222426;
  color: #fff;
  font: inherit;
  min-height: 42px;
  padding: 8px 10px;
}

.compact-inputs input {
  width: 86px;
}

.flip-clock {
  display: flex;
  gap: clamp(7px, 2.2vw, 20px);
  justify-content: center;
  margin: 10px auto 22px;
}

.flip-unit {
  min-width: 0;
  text-align: center;
  width: min(25vw, 170px);
}

.flip-tile {
  aspect-ratio: .82;
  background: #242526;
  border-radius: clamp(8px, 1.4vw, 15px);
  box-shadow: 0 8px 13px rgba(0, 0, 0, .55), inset 0 1px rgba(255,255,255,.11);
  color: #f0f0f0;
  font-size: clamp(44px, 12vw, 104px);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
  perspective: 500px;
  position: relative;
  text-shadow: 0 2px 0 #000;
}

.flip-tile::after {
  background: rgba(0,0,0,.7);
  box-shadow: 0 1px rgba(255,255,255,.09);
  content: '';
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
  top: calc(50% - 1px);
  z-index: 6;
}

.flip-half {
  align-items: center;
  display: flex;
  height: 50%;
  justify-content: center;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
}

.flip-half.top {
  border-radius: inherit inherit 0 0;
  top: 0;
}

.flip-half.bottom {
  align-items: flex-end;
  border-radius: 0 0 inherit inherit;
  bottom: 0;
}

.flip-half span {
  align-items: center;
  display: flex;
  height: 200%;
  justify-content: center;
  position: absolute;
  width: 100%;
}

.flip-half.top span { top: 0; }
.flip-half.bottom span { bottom: 0; }

.flip-flap {
  backface-visibility: hidden;
  background: linear-gradient(#343536, #222324);
  transform-origin: 50% 100%;
  z-index: 5;
}

.flip-tile.flipping .flip-flap {
  animation: tile-fall 420ms cubic-bezier(.32,.72,.3,1);
}

@keyframes tile-fall {
  0% { filter: brightness(1.1); transform: rotateX(0deg); }
  49% { filter: brightness(.72); transform: rotateX(-88deg); }
  50% { transform-origin: 50% 0%; transform: rotateX(88deg); }
  100% { filter: brightness(1); transform-origin: 50% 0%; transform: rotateX(0deg); }
}

.flip-unit-label {
  color: #e4a632;
  font-size: clamp(10px, 2vw, 14px);
  font-weight: 800;
  letter-spacing: .08em;
  margin-top: 12px;
}

.timer-sound-row {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 18px 0;
}

.timer-sound-row select {
  min-width: 210px;
}

.custom-sound-button {
  align-items: center;
  border: 1px solid #5a5e62;
  border-radius: 9px;
  background: #282a2c;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  min-height: 42px;
  padding: 8px 13px;
}

.flip-timer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

@media (max-width: 900px) {
  .manual-entry {
    grid-template-columns: 1fr 1fr;
  }

  .manual-delete-button {
    min-width: 110px;
  }
}

@media (max-width: 620px) {
  .file-source-buttons > * {
    flex: 1 1 150px;
  }

  .manual-activity-panel > summary,
  .manual-activity-content {
    padding-left: 14px;
    padding-right: 14px;
  }

  .manual-entry {
    grid-template-columns: 1fr;
  }

  .manual-delete-button {
    width: 100%;
  }

  .iphone-stopwatch-card,
  .smart-minute-card,
  .flip-timer-card {
    border-radius: 16px;
    padding: 16px 12px;
  }

  .smart-minute-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .smart-minute-legend {
    font-size: 10px;
  }

  .flip-clock {
    gap: 6px;
  }

  .flip-unit {
    width: 28vw;
  }

  .flip-tile {
    font-size: clamp(38px, 16vw, 70px);
  }

  .timer-sound-row label,
  .timer-sound-row select,
  .custom-sound-button {
    width: 100%;
  }
}


/* styles.v4.css */
/* Povezivanje novih kontrola sa postojećim imenima iz aplikacije. */
.manual-panel-body {
  border-top: 1px solid #e1e5e9;
  padding: 18px 20px 20px;
}

.manual-panel-body > p,
.manual-help {
  color: #5e6873;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 14px;
}

.manual-quick-actions button {
  appearance: none;
  border: 1px solid #b9c3cd;
  border-radius: 10px;
  background: #f7f9fb;
  color: #172131;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  min-height: 40px;
  padding: 8px 12px;
}

.manual-quick-actions button:hover,
.manual-quick-actions button:focus-visible {
  border-color: #0c83c6;
  background: #eaf6fd;
  outline: none;
}

.manual-quick-actions button:last-child {
  color: #a02f2f;
}

.manual-order {
  align-self: center;
  background: #eaf6fd;
  border-radius: 50%;
  color: #0874ad;
  font-size: 12px;
  font-weight: 900;
  grid-column: 1 / -1;
  height: 25px;
  line-height: 25px;
  text-align: center;
  width: 25px;
}

.remove-manual {
  align-self: end;
  appearance: none;
  background: #fff7f7;
  border: 1px solid #e2baba;
  border-radius: 10px;
  color: #a02f2f;
  cursor: pointer;
  font-size: 22px;
  height: 42px;
  width: 42px;
}

.round-action.reset {
  background: #2b2d31;
  box-shadow: 0 0 0 2px #484b50;
  color: #e8e8e9;
}

.round-action.running {
  background: #481414;
  box-shadow: 0 0 0 2px #6b1d1d;
  color: #ff453a;
}

.smart-minute-head > div {
  display: grid;
  gap: 6px;
}

.smart-minute-head strong {
  color: #0c83c6;
  font-size: clamp(28px, 6vw, 48px);
  font-variant-numeric: tabular-nums;
}

.smart-minute-head button {
  appearance: none;
  border: 1px solid #adb9c4;
  border-radius: 10px;
  background: #f5f8fb;
  color: #172131;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  min-height: 42px;
  padding: 8px 14px;
}

.smart-track {
  width: 100%;
}

.smart-fill {
  background: linear-gradient(90deg, #1688c8, #19a2dd);
  border-radius: inherit;
  height: 100%;
  left: 0;
  max-width: 100%;
  position: absolute;
  top: 0;
  transition: width 100ms linear;
}

.smart-track > i {
  background: #68737c;
  height: 42px;
  left: calc(var(--mark) * 12.5%);
  pointer-events: none;
  position: absolute;
  top: -6px;
  width: 1px;
  z-index: 4;
}

.smart-ticks {
  color: #59636c;
  display: grid;
  font-size: 11px;
  grid-template-columns: repeat(9, 1fr);
  margin: 12px -12px 22px;
  text-align: center;
}

.smart-ticks span:first-child { text-align: left; }
.smart-ticks span:last-child { text-align: right; }

.flip-tile > .flip-static,
.flip-tile > .flip-flap {
  align-items: center;
  border-radius: inherit;
  display: flex;
  inset: 0;
  justify-content: center;
  overflow: hidden;
  position: absolute;
}

.flip-tile > .flip-static {
  background: linear-gradient(#363738 0 50%, #232425 50% 100%);
}

.flip-tile > .flip-flap {
  backface-visibility: hidden;
  background: linear-gradient(#3d3e3f 0 50%, #202122 50% 100%);
  clip-path: inset(0 0 50% 0);
  transform-origin: 50% 50%;
  z-index: 5;
}

.flip-label {
  color: #e4a632;
  display: block;
  font-size: clamp(10px, 2vw, 14px);
  font-weight: 800;
  letter-spacing: .08em;
  margin-top: 12px;
}

.flip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.flip-actions button {
  appearance: none;
  border: 1px solid #5a5e62;
  border-radius: 10px;
  background: #282a2c;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  min-height: 44px;
  min-width: 116px;
  padding: 9px 16px;
}

.flip-actions .tool-primary {
  border-color: #0c83c6;
  background: #0c83c6;
}

.custom-sound-button input {
  display: none;
}

#customSoundName {
  align-self: center;
  color: #aeb1b4;
  font-size: 12px;
}

@media (max-width: 620px) {
  .manual-panel-body {
    padding-left: 14px;
    padding-right: 14px;
  }
}


/* styles.v5.css */

.sequential-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.sequential-actions button {
  appearance: none;
  border: 1px solid #aebbc8;
  border-radius: 10px;
  background: #f5f8fb;
  color: #172131;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  min-height: 42px;
  padding: 9px 14px;
}

.sequential-actions #sequentialAdd {
  border-color: #0c83c6;
  background: #0c83c6;
  color: #fff;
}

.sequential-actions .danger {
  color: #a02f2f;
}

.sequential-manual-list {
  display: grid;
  gap: 12px;
}

.sequential-entry {
  align-items: end;
  border: 1px solid #d5dbe0;
  border-radius: 14px;
  display: grid;
  gap: 11px;
  grid-template-columns: auto minmax(150px, .8fr) minmax(170px, 1fr) minmax(190px, 1.1fr) auto;
  padding: 13px;
}

.sequential-entry .manual-order {
  grid-column: auto;
  margin-bottom: 8px;
}

.sequential-start,
.sequential-entry label {
  color: #46515c;
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
}

.sequential-start strong {
  align-items: center;
  border-radius: 9px;
  background: #eef7fc;
  color: #145678;
  display: flex;
  min-height: 42px;
  padding: 8px 10px;
}

.sequential-entry select,
.sequential-entry input {
  border: 1px solid #b9c3cd;
  border-radius: 9px;
  background: #fff;
  color: #172131;
  font: inherit;
  min-height: 42px;
  padding: 8px 10px;
  width: 100%;
}

@media (max-width: 900px) {
  .sequential-entry {
    grid-template-columns: auto 1fr 1fr;
  }

  .sequential-entry .manual-order {
    grid-row: span 2;
  }
}

@media (max-width: 620px) {
  .sequential-entry {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .sequential-entry .manual-order {
    grid-row: auto;
  }

  .sequential-entry .remove-manual {
    width: 100%;
  }
}


/* styles.v6.css */

/* Ručni unos mora da zauzme celu širinu kontrolnog panela, a ne samo jednu
   kolonu mreže. Tako su i početak i polje „Trajala do“ uvek vidljivi. */
.control-panel > .manual-activity-panel {
  grid-column: 1 / -1;
  max-width: none;
  min-width: 0;
  width: 100%;
}

.sequential-entry > * {
  min-width: 0;
}

@media (max-width: 900px) {
  .sequential-entry {
    grid-template-columns: minmax(34px, auto) minmax(0, 1fr) minmax(0, 1fr);
  }

  .sequential-start {
    grid-column: 2 / -1;
  }

  .sequential-entry .remove-manual {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .sequential-entry {
    grid-template-columns: 1fr;
  }

  .sequential-start {
    grid-column: auto;
  }
}


/* styles.v7.css */

/* Mehanička štoperica inspirisana dostavljenim tamnim metalnim primerom. */
.iphone-stopwatch-card {
  background:
    radial-gradient(circle at 50% 33%, rgba(55, 74, 95, .44), transparent 38%),
    radial-gradient(circle at 50% 65%, #15202c 0%, #080d13 62%, #03070b 100%);
  border: 1px solid #26394c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -30px 70px rgba(0, 0, 0, .58),
    0 20px 45px rgba(6, 14, 23, .28);
  max-width: 880px;
  overflow: hidden;
  padding-top: clamp(128px, 18vw, 174px);
  position: relative;
}

/* Gornji prsten i nazubljena krunica. */
.iphone-stopwatch-card::before {
  background: radial-gradient(
    circle,
    transparent 0 43%,
    #070b10 44% 51%,
    #313b46 52% 59%,
    #a8b2bc 60% 63%,
    #202832 64% 72%,
    #070b10 73% 100%
  );
  border-radius: 50%;
  box-shadow:
    inset 8px 5px 16px rgba(255, 255, 255, .18),
    inset -9px -8px 15px rgba(0, 0, 0, .9),
    0 8px 18px rgba(0, 0, 0, .65),
    0 0 12px rgba(35, 147, 255, .18);
  content: '';
  height: clamp(112px, 15vw, 148px);
  left: 50%;
  position: absolute;
  top: 12px;
  transform: translateX(-50%);
  width: clamp(112px, 15vw, 148px);
  z-index: 1;
}

.iphone-stopwatch-card::after {
  background:
    repeating-linear-gradient(90deg, #20262d 0 4px, #6f7983 4px 6px, #151a20 6px 10px),
    linear-gradient(#919aa3, #14191f 54%, #05080b);
  border: 2px solid #05080c;
  border-radius: 10px 10px 7px 7px;
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .32),
    0 0 0 4px #121820,
    0 4px 0 #238dec,
    0 10px 16px rgba(0, 0, 0, .7);
  content: '';
  height: clamp(34px, 5vw, 46px);
  left: 50%;
  position: absolute;
  top: clamp(102px, 14vw, 136px);
  transform: translateX(-50%);
  width: clamp(62px, 9vw, 86px);
  z-index: 2;
}

.stopwatch-dial {
  background:
    radial-gradient(circle at 35% 25%, rgba(129, 151, 175, .22), transparent 30%),
    radial-gradient(circle at 50% 48%, #172330 0 13%, #0b121a 54%, #02070c 100%);
  border: clamp(13px, 2.4vw, 23px) solid #303a45;
  box-shadow:
    0 0 0 3px #080b0f,
    0 0 0 6px #8e99a3,
    0 0 0 9px #1a222b,
    0 0 0 11px #05080b,
    inset 0 0 0 3px #2c9cf5,
    inset 0 0 0 7px #07111b,
    inset 13px 16px 24px rgba(255, 255, 255, .08),
    inset -20px -24px 35px rgba(0, 0, 0, .78),
    0 22px 35px rgba(0, 0, 0, .6),
    0 0 24px rgba(25, 137, 239, .18);
  margin-bottom: 34px;
  max-width: 520px;
  overflow: visible;
  width: min(76vw, 520px);
  z-index: 4;
}

/* Bočni mehanički tasteri. */
.stopwatch-dial::before,
.stopwatch-dial::after {
  background:
    linear-gradient(90deg, transparent 0 10%, rgba(255,255,255,.22) 12%, transparent 25%),
    linear-gradient(#268fea 0 8%, #121820 9% 27%, #68737e 28% 35%, #11171e 36% 72%, #020509 73%);
  border: 2px solid #030609;
  border-radius: 12px 12px 7px 7px;
  box-shadow: 0 0 0 3px #151e27, 0 8px 13px rgba(0, 0, 0, .65);
  content: '';
  height: clamp(61px, 10vw, 88px);
  position: absolute;
  top: 3%;
  width: clamp(30px, 5vw, 44px);
  z-index: -1;
}

.stopwatch-dial::before {
  left: 2%;
  transform: translate(-62%, -46%) rotate(-43deg);
}

.stopwatch-dial::after {
  right: 2%;
  transform: translate(62%, -46%) rotate(43deg);
}

.stopwatch-dial .dial-ticks {
  border: 2px solid rgba(41, 145, 235, .72);
  border-radius: 50%;
  box-shadow: inset 0 0 18px rgba(27, 133, 229, .16);
  inset: 5px;
}

.stopwatch-dial .dial-ticks i::before {
  background: rgba(222, 230, 237, .72);
  height: clamp(8px, 1.7vw, 14px);
  top: clamp(12px, 2.6vw, 22px);
  width: 1px;
}

.stopwatch-dial .dial-ticks i:nth-child(5n + 1)::before {
  background: #e8eef3;
  box-shadow: 0 0 3px rgba(255,255,255,.55);
  height: clamp(18px, 3.4vw, 30px);
  width: 3px;
}

.stopwatch-dial .dial-ticks i:nth-child(15n + 1)::before {
  background: #299cfb;
  box-shadow: 0 0 8px rgba(32, 151, 255, .75);
  width: 4px;
}

.stopwatch-dial .dial-number {
  color: #dce3e9;
  font-size: clamp(24px, 5vw, 43px);
  font-weight: 400;
  text-shadow: 0 2px 2px #000, 0 0 8px rgba(255,255,255,.08);
}

.stopwatch-dial .dial-number.n60 {
  color: #56b6ff;
  text-shadow: 0 0 10px rgba(44, 157, 255, .55), 0 2px 2px #000;
}

.stopwatch-hand {
  background: linear-gradient(90deg, #147bd8, #69c2ff 45%, #1688ec 100%);
  bottom: calc(50% - 3px);
  box-shadow: 0 0 7px rgba(37, 154, 255, .8), 2px 0 1px rgba(255,255,255,.35);
  height: 37%;
  width: 3px;
}

.stopwatch-hand::after {
  background: radial-gradient(circle, #06101a 0 28%, #309ffb 30% 48%, #07111b 51% 67%, #8acfff 69% 77%, #0b1721 79%);
  border: 0;
  bottom: -15px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, .7), 0 0 8px rgba(39, 155, 255, .6);
  height: 28px;
  left: -13px;
  width: 28px;
}

.dial-center::before {
  border: 2px dotted rgba(225, 233, 239, .7);
  border-radius: 50%;
  content: '';
  height: 43%;
  left: 28.5%;
  opacity: .8;
  pointer-events: none;
  position: absolute;
  top: 28.5%;
  width: 43%;
}

.stopwatch-digital {
  background: linear-gradient(180deg, rgba(33, 49, 64, .88), rgba(7, 13, 20, .94));
  border: 1px solid #334b60;
  border-radius: 16px;
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 10px 22px rgba(0,0,0,.3);
  color: #62bbff;
  display: inline-block;
  font-size: clamp(38px, 7vw, 61px);
  font-weight: 350;
  letter-spacing: .01em;
  padding: 9px 22px 11px;
  text-shadow: 0 0 13px rgba(32, 147, 255, .48);
}

.iphone-stopwatch-card .round-action {
  background: linear-gradient(#202c37, #0b1118);
  border-color: #03070b;
  box-shadow: 0 0 0 2px #425465, inset 0 1px rgba(255,255,255,.15), 0 7px 15px rgba(0,0,0,.45);
  color: #dce6ee;
}

.iphone-stopwatch-card .round-action.start {
  box-shadow: 0 0 0 2px #1c76bc, inset 0 1px rgba(255,255,255,.15), 0 0 14px rgba(30,141,236,.28);
  color: #5ab7ff;
}

.iphone-stopwatch-card .round-action.running {
  box-shadow: 0 0 0 2px #77292b, inset 0 1px rgba(255,255,255,.1), 0 0 12px rgba(255,69,58,.18);
  color: #ff6b64;
}

.iphone-stopwatch-card > p {
  color: #8595a4;
}

@media (max-width: 620px) {
  .iphone-stopwatch-card {
    padding-top: 118px;
  }

  .iphone-stopwatch-card::before {
    height: 100px;
    width: 100px;
  }

  .iphone-stopwatch-card::after {
    top: 91px;
  }

  .stopwatch-dial {
    width: min(76vw, 390px);
  }

  .stopwatch-dial::before,
  .stopwatch-dial::after {
    height: 58px;
    width: 28px;
  }

  .stopwatch-digital {
    padding-inline: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stopwatch-hand {
    transition: none;
  }
}


/* styles.v8.css */

/* Kompaktniji sklop koji staje u vidljivu visinu ekrana. */
.iphone-stopwatch-card {
  max-width: 740px;
  padding: clamp(100px, 12dvh, 122px) clamp(14px, 3vw, 28px) 24px;
}

.iphone-stopwatch-card::before {
  height: clamp(88px, 10dvh, 108px);
  top: 8px;
  width: clamp(88px, 10dvh, 108px);
}

.iphone-stopwatch-card::after {
  height: clamp(31px, 4dvh, 39px);
  top: clamp(78px, 9dvh, 94px);
  width: clamp(57px, 7dvh, 72px);
}

.stopwatch-dial {
  background:
    radial-gradient(circle at 36% 24%, rgba(154, 181, 207, .24), transparent 28%) padding-box,
    radial-gradient(circle at 48% 48%, #1b2a38 0 10%, #0a121b 56%, #02060a 100%) padding-box,
    repeating-conic-gradient(
      from 12deg,
      #dbe2e8 0deg 2deg,
      #66727d 3deg 5deg,
      #1a222a 6deg 9deg,
      #8f9aa4 10deg 12deg,
      #252e37 13deg 17deg
    ) border-box;
  border: clamp(14px, 2.2vw, 22px) solid transparent;
  box-shadow:
    0 0 0 2px #05080b,
    0 0 0 5px #9ba6b0,
    0 0 0 8px #242d36,
    0 0 0 11px #05080b,
    inset 0 0 0 3px #208ee9,
    inset 0 0 0 7px #050c13,
    inset 14px 15px 18px rgba(255, 255, 255, .12),
    inset -22px -25px 34px rgba(0, 0, 0, .82),
    0 26px 30px rgba(0, 0, 0, .66),
    0 42px 60px rgba(0, 0, 0, .28),
    -14px 7px 25px rgba(83, 118, 147, .16),
    10px -5px 20px rgba(36, 151, 248, .12);
  margin: 8px auto 24px;
  max-width: 420px;
  transform: perspective(900px) rotateX(1.5deg);
  transform-style: preserve-3d;
  width: min(68vw, 45dvh, 420px);
}

.stopwatch-dial .dial-ticks {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 72%, rgba(0,0,0,.2) 83%, rgba(255,255,255,.07) 84%, transparent 86%);
  box-shadow:
    inset 0 0 0 2px rgba(42, 153, 247, .72),
    inset 0 0 0 5px rgba(0, 0, 0, .72),
    inset 0 0 28px rgba(31, 139, 232, .17),
    inset 18px 16px 28px rgba(255,255,255,.035),
    inset -20px -23px 34px rgba(0,0,0,.66);
}

.stopwatch-dial .dial-ticks::before {
  border: 1px solid rgba(200, 218, 232, .25);
  border-radius: 50%;
  box-shadow:
    0 0 0 3px rgba(0,0,0,.68),
    inset 0 1px 2px rgba(255,255,255,.24);
  content: '';
  inset: clamp(28px, 5.5vw, 48px);
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.stopwatch-dial .dial-ticks::after {
  background:
    linear-gradient(128deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.045) 23%, transparent 41%),
    radial-gradient(ellipse at 64% 83%, transparent 48%, rgba(0,0,0,.38) 78%);
  border-radius: 50%;
  content: '';
  inset: 7px;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.stopwatch-dial .dial-ticks i {
  z-index: 2;
}

/* Inline CSS promenljive su blokirane CSP pravilom, zato svaki podeok dobija
   eksplicitnu rotaciju u bezbednom eksternom stilu. */
+.stopwatch-dial .dial-ticks i:nth-child(1) { transform: rotate(0deg); }
.stopwatch-dial .dial-ticks i:nth-child(2) { transform: rotate(6deg); }
.stopwatch-dial .dial-ticks i:nth-child(3) { transform: rotate(12deg); }
.stopwatch-dial .dial-ticks i:nth-child(4) { transform: rotate(18deg); }
.stopwatch-dial .dial-ticks i:nth-child(5) { transform: rotate(24deg); }
.stopwatch-dial .dial-ticks i:nth-child(6) { transform: rotate(30deg); }
.stopwatch-dial .dial-ticks i:nth-child(7) { transform: rotate(36deg); }
.stopwatch-dial .dial-ticks i:nth-child(8) { transform: rotate(42deg); }
.stopwatch-dial .dial-ticks i:nth-child(9) { transform: rotate(48deg); }
.stopwatch-dial .dial-ticks i:nth-child(10) { transform: rotate(54deg); }
.stopwatch-dial .dial-ticks i:nth-child(11) { transform: rotate(60deg); }
.stopwatch-dial .dial-ticks i:nth-child(12) { transform: rotate(66deg); }
.stopwatch-dial .dial-ticks i:nth-child(13) { transform: rotate(72deg); }
.stopwatch-dial .dial-ticks i:nth-child(14) { transform: rotate(78deg); }
.stopwatch-dial .dial-ticks i:nth-child(15) { transform: rotate(84deg); }
.stopwatch-dial .dial-ticks i:nth-child(16) { transform: rotate(90deg); }
.stopwatch-dial .dial-ticks i:nth-child(17) { transform: rotate(96deg); }
.stopwatch-dial .dial-ticks i:nth-child(18) { transform: rotate(102deg); }
.stopwatch-dial .dial-ticks i:nth-child(19) { transform: rotate(108deg); }
.stopwatch-dial .dial-ticks i:nth-child(20) { transform: rotate(114deg); }
.stopwatch-dial .dial-ticks i:nth-child(21) { transform: rotate(120deg); }
.stopwatch-dial .dial-ticks i:nth-child(22) { transform: rotate(126deg); }
.stopwatch-dial .dial-ticks i:nth-child(23) { transform: rotate(132deg); }
.stopwatch-dial .dial-ticks i:nth-child(24) { transform: rotate(138deg); }
.stopwatch-dial .dial-ticks i:nth-child(25) { transform: rotate(144deg); }
.stopwatch-dial .dial-ticks i:nth-child(26) { transform: rotate(150deg); }
.stopwatch-dial .dial-ticks i:nth-child(27) { transform: rotate(156deg); }
.stopwatch-dial .dial-ticks i:nth-child(28) { transform: rotate(162deg); }
.stopwatch-dial .dial-ticks i:nth-child(29) { transform: rotate(168deg); }
.stopwatch-dial .dial-ticks i:nth-child(30) { transform: rotate(174deg); }
.stopwatch-dial .dial-ticks i:nth-child(31) { transform: rotate(180deg); }
.stopwatch-dial .dial-ticks i:nth-child(32) { transform: rotate(186deg); }
.stopwatch-dial .dial-ticks i:nth-child(33) { transform: rotate(192deg); }
.stopwatch-dial .dial-ticks i:nth-child(34) { transform: rotate(198deg); }
.stopwatch-dial .dial-ticks i:nth-child(35) { transform: rotate(204deg); }
.stopwatch-dial .dial-ticks i:nth-child(36) { transform: rotate(210deg); }
.stopwatch-dial .dial-ticks i:nth-child(37) { transform: rotate(216deg); }
.stopwatch-dial .dial-ticks i:nth-child(38) { transform: rotate(222deg); }
.stopwatch-dial .dial-ticks i:nth-child(39) { transform: rotate(228deg); }
.stopwatch-dial .dial-ticks i:nth-child(40) { transform: rotate(234deg); }
.stopwatch-dial .dial-ticks i:nth-child(41) { transform: rotate(240deg); }
.stopwatch-dial .dial-ticks i:nth-child(42) { transform: rotate(246deg); }
.stopwatch-dial .dial-ticks i:nth-child(43) { transform: rotate(252deg); }
.stopwatch-dial .dial-ticks i:nth-child(44) { transform: rotate(258deg); }
.stopwatch-dial .dial-ticks i:nth-child(45) { transform: rotate(264deg); }
.stopwatch-dial .dial-ticks i:nth-child(46) { transform: rotate(270deg); }
.stopwatch-dial .dial-ticks i:nth-child(47) { transform: rotate(276deg); }
.stopwatch-dial .dial-ticks i:nth-child(48) { transform: rotate(282deg); }
.stopwatch-dial .dial-ticks i:nth-child(49) { transform: rotate(288deg); }
.stopwatch-dial .dial-ticks i:nth-child(50) { transform: rotate(294deg); }
.stopwatch-dial .dial-ticks i:nth-child(51) { transform: rotate(300deg); }
.stopwatch-dial .dial-ticks i:nth-child(52) { transform: rotate(306deg); }
.stopwatch-dial .dial-ticks i:nth-child(53) { transform: rotate(312deg); }
.stopwatch-dial .dial-ticks i:nth-child(54) { transform: rotate(318deg); }
.stopwatch-dial .dial-ticks i:nth-child(55) { transform: rotate(324deg); }
.stopwatch-dial .dial-ticks i:nth-child(56) { transform: rotate(330deg); }
.stopwatch-dial .dial-ticks i:nth-child(57) { transform: rotate(336deg); }
.stopwatch-dial .dial-ticks i:nth-child(58) { transform: rotate(342deg); }
.stopwatch-dial .dial-ticks i:nth-child(59) { transform: rotate(348deg); }
.stopwatch-dial .dial-ticks i:nth-child(60) { transform: rotate(354deg); }

.stopwatch-dial .dial-ticks i::before {
  background: #adb8c2;
  box-shadow: 0 1px 1px rgba(0,0,0,.8);
  height: clamp(7px, 1.3vw, 11px);
  top: clamp(11px, 2vw, 18px);
}

.stopwatch-dial .dial-ticks i:nth-child(5n + 1)::before {
  background: linear-gradient(90deg, #77838e, #f4f7f9 45%, #8b96a0);
  box-shadow: 0 0 4px rgba(255,255,255,.48), 0 2px 2px rgba(0,0,0,.8);
  height: clamp(16px, 2.8vw, 24px);
}

.stopwatch-dial .dial-ticks i:nth-child(15n + 1)::before {
  background: linear-gradient(90deg, #0878d3, #70c5ff 48%, #0878d3);
  box-shadow: 0 0 8px rgba(43, 159, 255, .78);
}

.stopwatch-dial .dial-number {
  z-index: 4;
}

.stopwatch-hand {
  filter: drop-shadow(0 2px 2px #000);
  transform-style: preserve-3d;
  z-index: 6;
}

.dial-center::before {
  box-shadow: inset 0 0 18px rgba(0,0,0,.48);
  z-index: 3;
}

.stopwatch-digital {
  font-size: clamp(34px, 5dvh, 50px);
  margin-bottom: 18px;
  padding-block: 7px 9px;
}

.iphone-actions {
  gap: clamp(28px, 7vw, 56px);
}

.iphone-stopwatch-card .round-action {
  height: 66px;
  width: 66px;
}

.iphone-stopwatch-card > p {
  margin: 18px 0 0;
}

@media (max-height: 780px) and (min-width: 621px) {
  .iphone-stopwatch-card {
    padding-top: 82px;
  }

  .iphone-stopwatch-card::before {
    height: 76px;
    width: 76px;
  }

  .iphone-stopwatch-card::after {
    top: 66px;
  }

  .stopwatch-dial {
    width: min(62vw, 39dvh, 360px);
  }

  .iphone-stopwatch-card > p {
    display: none;
  }
}

@media (max-width: 620px) {
  .iphone-stopwatch-card {
    padding-top: 92px;
  }

  .stopwatch-dial {
    width: min(75vw, 42dvh, 360px);
  }

  .stopwatch-dial::before,
  .stopwatch-dial::after {
    height: 50px;
    width: 25px;
  }

  .stopwatch-digital {
    font-size: clamp(31px, 11vw, 43px);
  }
}


/* styles.v9.css */

/* Premium automotive dashboard + modern SaaS + mechanical flip clock. */
.premium-timer-segment {
  margin-inline: auto;
  max-width: 1120px;
}

.premium-countdown-card {
  --timer-accent: #2da9e9;
  --timer-accent-soft: rgba(45, 169, 233, .18);
  background:
    radial-gradient(circle at 50% -20%, rgba(55, 111, 151, .26), transparent 42%),
    linear-gradient(155deg, #111b26 0%, #09111a 54%, #060b11 100%);
  border: 1px solid #263a4c;
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -30px 60px rgba(0,0,0,.28),
    0 18px 40px rgba(9, 24, 38, .18);
  color: #eaf1f6;
  margin: 0 auto;
  max-width: 960px;
  overflow: hidden;
  padding: clamp(20px, 4vw, 38px);
  position: relative;
}

.premium-countdown-card::before {
  background: linear-gradient(90deg, transparent, rgba(67, 178, 238, .58), transparent);
  content: '';
  height: 1px;
  left: 12%;
  position: absolute;
  right: 12%;
  top: 0;
}

.premium-timer-header {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: clamp(24px, 4vw, 38px);
}

.premium-eyebrow {
  color: #75a7c5;
  display: block;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .19em;
  margin-bottom: 7px;
}

.premium-timer-header h3 {
  color: #f0f5f8;
  font-size: clamp(19px, 3vw, 27px);
  letter-spacing: -.015em;
  margin: 0;
}

.timer-state {
  background: rgba(103, 124, 141, .12);
  border: 1px solid #3c4c59;
  border-radius: 999px;
  color: #9eafbc;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
  padding: 8px 11px;
}

.premium-countdown-card[data-state="RUNNING"] .timer-state {
  background: rgba(45, 169, 233, .12);
  border-color: rgba(45, 169, 233, .52);
  color: #71c9f7;
}

.premium-countdown-card[data-state="PAUSED"] .timer-state {
  background: rgba(197, 159, 74, .1);
  border-color: rgba(197, 159, 74, .38);
  color: #d8bc7d;
}

.premium-countdown-card[data-state="FINISHED"] .timer-state {
  background: rgba(53, 180, 237, .14);
  border-color: rgba(74, 190, 242, .62);
  color: #a0ddf8;
}

.premium-flip-clock {
  display: grid;
  gap: clamp(9px, 2.5vw, 26px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 auto clamp(24px, 4vw, 38px);
  max-width: 800px;
}

.premium-flip-unit {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  min-width: 0;
  padding: 0;
  text-align: center;
}

.premium-flip-unit:disabled,
.premium-countdown-card.is-running .premium-flip-unit {
  cursor: default;
}

.premium-flip-tile {
  aspect-ratio: 1.08;
  background: #0a1119;
  border: 1px solid rgba(55, 170, 225, .56);
  border-radius: clamp(11px, 1.8vw, 18px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.85),
    0 0 0 1px rgba(2, 9, 14, .76),
    0 13px 20px rgba(0,0,0,.39),
    0 0 18px rgba(28, 139, 199, .08);
  container-type: inline-size;
  display: block;
  overflow: hidden;
  perspective: 800px;
  position: relative;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.premium-flip-unit:hover .premium-flip-tile,
.premium-flip-unit:focus-visible .premium-flip-tile,
.premium-flip-unit.is-editing .premium-flip-tile {
  border-color: rgba(71, 190, 244, .88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 0 2px rgba(45,169,233,.16),
    0 14px 22px rgba(0,0,0,.44),
    0 0 22px rgba(45,169,233,.19);
  outline: none;
  transform: translateY(-2px);
}

.premium-flip-unit:focus-visible {
  outline: none;
}

.premium-countdown-card.is-running .premium-flip-tile {
  border-color: rgba(55, 174, 229, .72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 0 0 1px rgba(2,9,14,.8),
    0 14px 22px rgba(0,0,0,.44),
    0 0 20px rgba(45,169,233,.13);
}

.premium-flip-half {
  align-items: center;
  display: flex;
  height: 50%;
  justify-content: center;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
}

.premium-flip-half.premium-top {
  background: linear-gradient(180deg, #1b2631 0%, #141e28 100%);
  border-radius: inherit inherit 0 0;
  top: 0;
}

.premium-flip-half.premium-bottom {
  align-items: flex-end;
  background: linear-gradient(180deg, #101923 0%, #0a121a 100%);
  border-radius: 0 0 inherit inherit;
  bottom: 0;
}

.premium-flip-digit {
  align-items: center;
  background: linear-gradient(180deg, #ffffff 7%, #dce4e9 48%, #aab7c0 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: flex;
  font-size: clamp(47px, 11vw, 105px);
  font-variant-numeric: tabular-nums;
  font-weight: 720;
  height: 200%;
  justify-content: center;
  letter-spacing: -.055em;
  line-height: 1;
  position: absolute;
  text-shadow: 0 2px 2px rgba(0,0,0,.35);
  width: 100%;
}

.premium-top .premium-flip-digit { top: 0; }
.premium-bottom .premium-flip-digit { bottom: 0; }

.premium-flip-unit.has-long-value .premium-flip-digit {
  font-size: clamp(37px, 8vw, 78px);
  letter-spacing: -.075em;
}

.premium-flip-unit.has-very-long-value .premium-flip-digit {
  font-size: clamp(27px, 5.6vw, 58px);
}

.premium-flip-tile::after {
  background: rgba(0, 0, 0, .78);
  box-shadow:
    0 -1px 0 rgba(255,255,255,.045),
    0 1px 0 rgba(72, 160, 205, .13);
  content: '';
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
  top: calc(50% - 1px);
  z-index: 9;
}

.folding-top,
.folding-bottom {
  backface-visibility: hidden;
  display: none;
  z-index: 7;
}

.folding-top {
  transform-origin: 50% 100%;
}

.folding-bottom {
  transform: rotateX(90deg);
  transform-origin: 50% 0%;
}

.premium-flip-tile.is-flipping .folding-top,
.premium-flip-tile.is-flipping .folding-bottom {
  display: flex;
}

.premium-flip-tile.is-flipping .folding-top {
  animation: premium-fold-top 190ms cubic-bezier(.37,.01,.68,.98) forwards;
}

.premium-flip-tile.is-flipping .folding-bottom {
  animation: premium-fold-bottom 190ms 190ms cubic-bezier(.22,.61,.36,1) forwards;
}

@keyframes premium-fold-top {
  0% { filter: brightness(1); transform: rotateX(0deg); }
  100% { filter: brightness(.63); transform: rotateX(-90deg); }
}

@keyframes premium-fold-bottom {
  0% { filter: brightness(.68); transform: rotateX(90deg); }
  100% { filter: brightness(1); transform: rotateX(0deg); }
}

.premium-flip-label {
  color: #6f8ba0;
  display: block;
  font-size: clamp(9px, 1.6vw, 12px);
  font-weight: 850;
  letter-spacing: clamp(.12em, .4vw, .22em);
  margin-top: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.premium-time-settings {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 110px));
  justify-content: center;
  margin: 0 auto 22px;
}

.premium-time-settings label {
  color: #8295a5;
  display: grid;
  font-size: 10px;
  font-weight: 800;
  gap: 5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.premium-time-settings input {
  appearance: textfield;
  background: #0c151e;
  border: 1px solid #304353;
  border-radius: 9px;
  color: #e5edf2;
  font: inherit;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  min-height: 40px;
  padding: 8px 10px;
  text-align: center;
  width: 100%;
}

.premium-time-settings input::-webkit-inner-spin-button {
  opacity: .6;
}

.premium-time-settings input:focus {
  border-color: #36a7df;
  box-shadow: 0 0 0 3px rgba(45,169,233,.13);
  outline: none;
}

.premium-time-settings input:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.premium-timer-actions {
  margin-bottom: 12px;
}

.premium-timer-actions button {
  background: #121e29;
  border-color: #344a5c;
  border-radius: 9px;
  color: #becbd4;
  font-size: 12px;
  letter-spacing: .08em;
  min-height: 41px;
  min-width: 112px;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.premium-timer-actions .tool-primary {
  background: linear-gradient(180deg, #168dca, #0878b6);
  border-color: #30a6df;
  box-shadow: 0 5px 13px rgba(8,119,179,.22), inset 0 1px rgba(255,255,255,.14);
  color: #fff;
}

.premium-timer-actions .tool-primary:hover,
.premium-timer-actions .tool-primary:focus-visible {
  background: linear-gradient(180deg, #1a9bdc, #087cb9);
  outline: none;
}

.premium-timer-actions .tool-primary.running {
  background: linear-gradient(180deg, #274052, #192b38);
  border-color: #557489;
  color: #d7e4ec;
}

.premium-timer-message {
  color: #72899b;
  font-size: 12px;
  min-height: 18px;
  text-align: center;
}

.premium-sound-row {
  border-top: 1px solid rgba(102,132,153,.17);
  margin: 24px 0 0;
  padding-top: 20px;
}

.premium-countdown-card.is-finished .premium-flip-tile {
  animation: premium-finish-pulse 900ms ease-out 1;
}

@keyframes premium-finish-pulse {
  0%, 100% { border-color: rgba(55,170,225,.56); box-shadow: 0 13px 20px rgba(0,0,0,.39); }
  48% { border-color: rgba(92,205,255,.95); box-shadow: 0 13px 20px rgba(0,0,0,.39), 0 0 25px rgba(53,180,237,.35); }
}

@media (max-width: 620px) {
  .premium-countdown-card {
    border-radius: 16px;
    padding: 18px 11px 20px;
  }

  .premium-timer-header {
    align-items: flex-start;
    margin-bottom: 24px;
  }

  .premium-timer-header h3 {
    font-size: 18px;
  }

  .premium-flip-clock {
    gap: 6px;
  }

  .premium-flip-tile {
    border-radius: 9px;
  }

  .premium-flip-digit {
    font-size: clamp(36px, 17vw, 60px);
  }

  .premium-flip-label {
    font-size: 8px;
    letter-spacing: .09em;
    margin-top: 9px;
  }

  .premium-time-settings {
    gap: 7px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .premium-timer-actions button {
    flex: 1 1 120px;
  }

  .premium-sound-row {
    margin-top: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .premium-flip-tile.is-flipping .folding-top,
  .premium-flip-tile.is-flipping .folding-bottom,
  .premium-countdown-card.is-finished .premium-flip-tile {
    animation-duration: 1ms;
  }
}


/* styles.v10.css */

.premium-stopwatch-segment {
  margin-inline: auto;
  max-width: 980px;
}

.premium-stopwatch-card {
  max-width: 760px;
}

.premium-stopwatch-header {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  left: clamp(16px, 4vw, 32px);
  pointer-events: none;
  position: absolute;
  right: clamp(16px, 4vw, 32px);
  text-align: left;
  top: 20px;
  z-index: 8;
}

.premium-stopwatch-header > div {
  display: grid;
  gap: 5px;
}

.premium-stopwatch-header > div > span {
  color: #6f9bbb;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .17em;
}

.premium-stopwatch-header strong {
  color: #dbe5ec;
  font-size: clamp(13px, 2.2vw, 17px);
}

.stopwatch-state {
  background: rgba(95, 117, 134, .13);
  border: 1px solid #3a4a57;
  border-radius: 999px;
  color: #9caeba;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  padding: 7px 9px;
}

.premium-stopwatch-card[data-state="RUNNING"] .stopwatch-state {
  background: rgba(35, 151, 234, .12);
  border-color: rgba(55, 171, 244, .53);
  color: #68bffc;
}

.premium-stopwatch-card[data-state="PAUSED"] .stopwatch-state {
  background: rgba(191, 157, 82, .1);
  border-color: rgba(191, 157, 82, .35);
  color: #d3b878;
}

.stopwatch-instrument {
  display: grid;
  margin: 0 auto;
  place-items: center;
  position: relative;
  width: fit-content;
}

/* Stari dekorativni tasteri se zamenjuju stvarnim interaktivnim elementima. */
.premium-stopwatch-card .stopwatch-dial::before,
.premium-stopwatch-card .stopwatch-dial::after {
  content: none;
}

.physical-pusher {
  appearance: none;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(255,255,255,.2) 14%, transparent 28%),
    linear-gradient(#258edc 0 7%, #141c24 8% 25%, #6d7882 26% 34%, #10171e 35% 73%, #03070a 74%);
  border: 2px solid #030609;
  border-radius: 12px 12px 7px 7px;
  box-shadow:
    0 0 0 3px #17212a,
    inset 0 1px rgba(255,255,255,.15),
    0 8px 13px rgba(0,0,0,.65);
  cursor: pointer;
  height: clamp(52px, 7dvh, 76px);
  padding: 0;
  position: absolute;
  top: 5%;
  transition: filter 100ms ease, transform 100ms ease;
  width: clamp(27px, 4dvh, 39px);
  z-index: 12;
}

.physical-pusher span {
  background: repeating-linear-gradient(90deg, #161d24 0 3px, #54616c 3px 5px, #0b1015 5px 8px);
  border-radius: 7px;
  box-shadow: inset 0 1px rgba(255,255,255,.18);
  display: block;
  height: 31%;
  margin: 18% 10% 0;
}

.physical-start {
  left: 4%;
  transform: translate(-62%, -45%) rotate(-43deg);
}

.physical-reset {
  right: 4%;
  transform: translate(62%, -45%) rotate(43deg);
}

.physical-pusher:hover,
.physical-pusher:focus-visible {
  filter: brightness(1.16);
  outline: 2px solid rgba(64, 178, 246, .46);
  outline-offset: 4px;
}

.physical-start:active {
  transform: translate(-58%, -38%) rotate(-43deg);
}

.physical-reset:active {
  transform: translate(58%, -38%) rotate(43deg);
}

.inner-scale {
  border: 1px solid rgba(174, 195, 211, .22);
  border-radius: 50%;
  height: 43%;
  left: 28.5%;
  pointer-events: none;
  position: absolute;
  top: 28.5%;
  width: 43%;
  z-index: 4;
}

.inner-scale i {
  inset: 0;
  position: absolute;
}

.inner-scale i::before {
  background: rgba(203, 218, 228, .68);
  border-radius: 50%;
  content: '';
  height: 2px;
  left: calc(50% - 1px);
  position: absolute;
  top: 6px;
  width: 2px;
}

.inner-scale i:nth-child(5n + 1)::before {
  background: #5eaee4;
  box-shadow: 0 0 4px rgba(47,155,229,.45);
  height: 4px;
  top: 5px;
  width: 2px;
}

+.inner-scale i:nth-child(1) { transform: rotate(0deg); }
.inner-scale i:nth-child(2) { transform: rotate(12deg); }
.inner-scale i:nth-child(3) { transform: rotate(24deg); }
.inner-scale i:nth-child(4) { transform: rotate(36deg); }
.inner-scale i:nth-child(5) { transform: rotate(48deg); }
.inner-scale i:nth-child(6) { transform: rotate(60deg); }
.inner-scale i:nth-child(7) { transform: rotate(72deg); }
.inner-scale i:nth-child(8) { transform: rotate(84deg); }
.inner-scale i:nth-child(9) { transform: rotate(96deg); }
.inner-scale i:nth-child(10) { transform: rotate(108deg); }
.inner-scale i:nth-child(11) { transform: rotate(120deg); }
.inner-scale i:nth-child(12) { transform: rotate(132deg); }
.inner-scale i:nth-child(13) { transform: rotate(144deg); }
.inner-scale i:nth-child(14) { transform: rotate(156deg); }
.inner-scale i:nth-child(15) { transform: rotate(168deg); }
.inner-scale i:nth-child(16) { transform: rotate(180deg); }
.inner-scale i:nth-child(17) { transform: rotate(192deg); }
.inner-scale i:nth-child(18) { transform: rotate(204deg); }
.inner-scale i:nth-child(19) { transform: rotate(216deg); }
.inner-scale i:nth-child(20) { transform: rotate(228deg); }
.inner-scale i:nth-child(21) { transform: rotate(240deg); }
.inner-scale i:nth-child(22) { transform: rotate(252deg); }
.inner-scale i:nth-child(23) { transform: rotate(264deg); }
.inner-scale i:nth-child(24) { transform: rotate(276deg); }
.inner-scale i:nth-child(25) { transform: rotate(288deg); }
.inner-scale i:nth-child(26) { transform: rotate(300deg); }
.inner-scale i:nth-child(27) { transform: rotate(312deg); }
.inner-scale i:nth-child(28) { transform: rotate(324deg); }
.inner-scale i:nth-child(29) { transform: rotate(336deg); }
.inner-scale i:nth-child(30) { transform: rotate(348deg); }

.minute-progress-hand {
  background: linear-gradient(#73bff0, #2b82ba);
  border-radius: 2px;
  bottom: 50%;
  box-shadow: 0 0 4px rgba(51,157,226,.35);
  height: 31%;
  left: calc(50% - 1px);
  position: absolute;
  transform: translateX(-50%) rotate(0deg);
  transform-origin: 50% 100%;
  width: 2px;
  z-index: 3;
}

.premium-stopwatch-card .dial-center::before {
  content: none;
}

.precise-stopwatch-time {
  color: #d6e0e7;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: clamp(25px, 4dvh, 38px);
  font-variant-numeric: tabular-nums;
  font-weight: 450;
  letter-spacing: -.04em;
  min-width: min(92%, 370px);
  padding-inline: 18px;
}

.stopwatch-milliseconds {
  color: #4aa7e5;
  font-size: .66em;
  letter-spacing: -.02em;
  text-shadow: 0 0 7px rgba(43,144,213,.25);
}

.stopwatch-software-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.stopwatch-software-actions button {
  appearance: none;
  background: #121d27;
  border: 1px solid #3a4e5d;
  border-radius: 9px;
  color: #c4d0d8;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .07em;
  min-height: 41px;
  min-width: 115px;
  padding: 8px 14px;
}

.stopwatch-software-actions .stopwatch-primary {
  background: linear-gradient(#168dcc, #0877b3);
  border-color: #2ea5df;
  box-shadow: 0 5px 13px rgba(8,119,179,.2), inset 0 1px rgba(255,255,255,.13);
  color: #fff;
}

.premium-stopwatch-card.is-running .stopwatch-software-actions .stopwatch-primary {
  background: linear-gradient(#293e4d, #182832);
  border-color: #526e80;
  color: #d9e5ec;
}

.stopwatch-software-actions button:hover,
.stopwatch-software-actions button:focus-visible {
  border-color: #45a8db;
  outline: none;
}

/* Ispravna prva oznaka, jer prethodni CSP-safe sloj sadrži tipografsku grešku. */
.stopwatch-dial .dial-ticks i:nth-child(1) {
  transform: rotate(0deg);
}

+.smart-track > i:nth-of-type(1) { left: 0%; }
.smart-track > i:nth-of-type(2) { left: 12.5%; }
.smart-track > i:nth-of-type(3) { left: 25%; }
.smart-track > i:nth-of-type(4) { left: 37.5%; }
.smart-track > i:nth-of-type(5) { left: 50%; }
.smart-track > i:nth-of-type(6) { left: 62.5%; }
.smart-track > i:nth-of-type(7) { left: 75%; }
.smart-track > i:nth-of-type(8) { left: 87.5%; }
.smart-track > i:nth-of-type(9) { left: 100%; }

@media (max-width: 620px) {
  .premium-stopwatch-header > div {
    visibility: hidden;
  }

  .physical-pusher {
    height: 48px;
    width: 25px;
  }

  .precise-stopwatch-time {
    font-size: clamp(23px, 8vw, 32px);
    padding-inline: 11px;
  }

  .stopwatch-software-actions button {
    flex: 1 1 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .physical-pusher {
    transition: none;
  }
}


/* styles.v11.css */

/* Prve CSP-safe pozicije iz generisanih skala. */
.inner-scale i:nth-child(1) {
  transform: rotate(0deg);
}

.smart-track > i:nth-of-type(1) {
  left: 0%;
}


/* styles.v12.css */

/* --------------------------------------------------------------------------
   PREMIUM MECHANICAL FLIP CLOCK
   -------------------------------------------------------------------------- */

.premium-countdown-card {
  --flip-blue: #3ba9df;
  --flip-silver: #e8edf1;
  background:
    radial-gradient(circle at 50% -16%, rgba(78, 103, 123, .18), transparent 38%),
    linear-gradient(152deg, #111922, #080e14 58%, #05090d);
  border-color: #26323c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    inset 0 -34px 70px rgba(0, 0, 0, .26),
    0 20px 44px rgba(5, 12, 18, .2);
  max-width: 940px;
}

.premium-flip-clock {
  gap: clamp(10px, 1.7vw, 17px);
  max-width: 790px;
}

.premium-flip-unit {
  isolation: isolate;
  position: relative;
}

.premium-flip-tile {
  aspect-ratio: 1.18;
  background:
    radial-gradient(circle at 10% 5%, rgba(106, 183, 221, .18), transparent 15%),
    radial-gradient(circle at 90% 5%, rgba(106, 183, 221, .13), transparent 15%),
    linear-gradient(180deg, transparent 0 94%, rgba(48, 156, 207, .22) 99%, transparent),
    linear-gradient(145deg, #44505b 0%, #1b252e 17%, #080e14 50%, #29343d 82%, #111820 100%);
  border: 1px solid #05090d;
  border-radius: clamp(18px, 2vw, 23px);
  box-shadow:
    inset 0 0 0 1px rgba(218, 227, 234, .16),
    inset 0 0 0 3px rgba(75, 87, 97, .48),
    inset 0 0 0 5px #080d12,
    inset 0 0 0 7px rgba(93, 115, 130, .25),
    inset 0 -12px 21px rgba(0, 0, 0, .3),
    0 1px 0 rgba(255, 255, 255, .08),
    0 15px 25px rgba(0, 0, 0, .46),
    0 0 18px rgba(38, 137, 188, .055);
  overflow: visible;
  perspective: 920px;
}

.premium-flip-tile::before {
  border: 1px solid rgba(75, 173, 217, .18);
  border-radius: clamp(12px, 1.55vw, 17px);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, .045),
    inset 0 0 10px rgba(0, 0, 0, .56),
    0 0 0 1px rgba(0, 0, 0, .62);
  content: '';
  inset: 7px;
  pointer-events: none;
  position: absolute;
  z-index: 10;
}

.premium-flip-half {
  left: 8px;
  right: 8px;
  width: auto;
}

.premium-flip-half.premium-top {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .032), transparent 34%),
    linear-gradient(180deg, #1b2838 0%, #14202d 100%);
  border-radius: clamp(11px, 1.4vw, 16px) clamp(11px, 1.4vw, 16px) 1px 1px;
  height: calc(50% - 9px);
  top: 8px;
}

.premium-flip-half.premium-bottom {
  background:
    linear-gradient(90deg, transparent 4%, rgba(55, 142, 187, .035) 50%, transparent 96%),
    linear-gradient(180deg, #101a25 0%, #0a121b 100%);
  border-radius: 1px 1px clamp(11px, 1.4vw, 16px) clamp(11px, 1.4vw, 16px);
  bottom: 8px;
  height: calc(50% - 9px);
}

.premium-flip-tile::after {
  background: linear-gradient(90deg, #05080b, #111820 9%, #030609 50%, #111820 91%, #05080b);
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, .035),
    0 1px 1px rgba(0, 0, 0, .94);
  height: 3px;
  left: 8px;
  right: 8px;
  top: calc(50% - 1px);
  z-index: 13;
}

.flip-pivot {
  background:
    linear-gradient(180deg, #35414b 0%, #111820 31%, #05090d 64%, #222c34 100%);
  border: 1px solid #020406;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -1px 1px rgba(0, 0, 0, .8),
    0 0 0 1px rgba(72, 84, 94, .42),
    0 2px 5px rgba(0, 0, 0, .62);
  height: clamp(18px, 2.6vw, 25px);
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(8px, 1.15vw, 12px);
  z-index: 15;
}

.flip-pivot::after {
  background: #080d12;
  border: 1px solid rgba(154, 167, 176, .2);
  border-radius: 50%;
  box-shadow: inset 0 0 2px #000;
  content: '';
  height: 4px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
}

.flip-pivot-left {
  border-radius: 4px 2px 2px 4px;
  left: clamp(-6px, -.65vw, -4px);
}

.flip-pivot-right {
  border-radius: 2px 4px 4px 2px;
  right: clamp(-6px, -.65vw, -4px);
}

.premium-flip-digit {
  background: linear-gradient(180deg, #ffffff 8%, #eef2f4 48%, #cbd3d8 96%);
  -webkit-background-clip: text;
  background-clip: text;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: clamp(68px, 10.3vw, 116px);
  font-weight: 560;
  letter-spacing: -.065em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .32);
}

.premium-flip-unit.has-long-value .premium-flip-digit {
  font-size: clamp(49px, 7.8vw, 86px);
  letter-spacing: -.075em;
}

.premium-flip-unit.has-very-long-value .premium-flip-digit {
  font-size: clamp(34px, 5.6vw, 61px);
}

.premium-flip-label {
  color: #8299a9;
  font-size: clamp(9px, 1.4vw, 11px);
  font-weight: 560;
  letter-spacing: .22em;
  margin-top: clamp(20px, 2.5vw, 25px);
}

.premium-flip-unit:hover .premium-flip-tile,
.premium-flip-unit:focus-visible .premium-flip-tile,
.premium-flip-unit.is-editing .premium-flip-tile,
.premium-countdown-card.is-running .premium-flip-tile {
  border-color: #080d12;
  box-shadow:
    inset 0 0 0 1px rgba(218, 227, 234, .18),
    inset 0 0 0 3px rgba(75, 87, 97, .5),
    inset 0 0 0 5px #080d12,
    inset 0 0 0 7px rgba(80, 151, 184, .26),
    inset 0 -12px 21px rgba(0, 0, 0, .3),
    0 1px 0 rgba(255, 255, 255, .08),
    0 16px 27px rgba(0, 0, 0, .49),
    0 0 20px rgba(43, 154, 209, .085);
}

.premium-flip-unit:hover .premium-flip-tile,
.premium-flip-unit:focus-visible .premium-flip-tile,
.premium-flip-unit.is-editing .premium-flip-tile {
  transform: translateY(-1px);
}

.premium-flip-tile.is-flipping .folding-top {
  animation-duration: 165ms;
}

.premium-flip-tile.is-flipping .folding-bottom {
  animation-delay: 165ms;
  animation-duration: 165ms;
}

/* --------------------------------------------------------------------------
   PREMIUM SWISS / AUTOMOTIVE STOPWATCH — styling only, timing stays unchanged
   -------------------------------------------------------------------------- */

.iphone-stopwatch-card.premium-stopwatch-card {
  background:
    radial-gradient(circle at 50% 34%, rgba(83, 98, 111, .16), transparent 36%),
    linear-gradient(155deg, #111922, #070c12 62%, #04070b);
  border-color: #27333d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    inset 0 -32px 72px rgba(0, 0, 0, .32),
    0 19px 42px rgba(4, 11, 18, .24);
  max-width: 720px;
  padding-top: clamp(92px, 11dvh, 112px);
}

/* Tanja alka od tamnog brušenog metala. */
.iphone-stopwatch-card.premium-stopwatch-card::before {
  background:
    radial-gradient(circle, transparent 0 53%, #080c10 54% 58%, #303941 59% 66%, #11171d 67% 73%, transparent 74%),
    linear-gradient(135deg, rgba(255, 255, 255, .18), transparent 38% 64%, rgba(0, 0, 0, .42));
  box-shadow:
    inset 3px 2px 5px rgba(255, 255, 255, .12),
    inset -4px -4px 7px rgba(0, 0, 0, .7),
    0 6px 12px rgba(0, 0, 0, .48);
  height: clamp(67px, 8.4dvh, 82px);
  top: 10px;
  width: clamp(67px, 8.4dvh, 82px);
}

/* Krunica sa finim, niskokontrastnim žlebovima. */
.iphone-stopwatch-card.premium-stopwatch-card::after {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .055) 0 2px, rgba(0, 0, 0, .07) 2px 4px),
    linear-gradient(180deg, #59636c, #252d34 36%, #11171d 72%, #070b0f);
  border: 1px solid #070a0d;
  border-radius: 7px 7px 5px 5px;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .16),
    0 0 0 2px #151c22,
    0 6px 10px rgba(0, 0, 0, .5);
  height: clamp(27px, 3.5dvh, 34px);
  top: clamp(66px, 7.9dvh, 78px);
  width: clamp(51px, 6.4dvh, 64px);
}

.premium-stopwatch-card .stopwatch-dial {
  background:
    linear-gradient(126deg, rgba(255, 255, 255, .052) 0%, transparent 24% 76%, rgba(0, 0, 0, .22) 100%) padding-box,
    radial-gradient(circle at 47% 44%, #111a24 0%, #0d151e 48%, #0a1118 76%, #070c12 100%) padding-box,
    linear-gradient(135deg, #68727a 0%, #343c43 19%, #171d22 47%, #080c10 64%, #30383f 84%, #11161b 100%) border-box;
  border: clamp(10px, 1.8vw, 15px) solid transparent;
  box-shadow:
    0 0 0 2px #06090c,
    0 0 0 4px #232a30,
    inset 0 0 0 1px rgba(53, 166, 226, .48),
    inset 0 0 0 3px rgba(0, 0, 0, .65),
    inset 10px 12px 20px rgba(255, 255, 255, .018),
    inset -16px -19px 28px rgba(0, 0, 0, .44),
    0 22px 35px rgba(0, 0, 0, .46);
  margin: 5px auto 22px;
  transform: none;
}

.premium-stopwatch-card .stopwatch-dial .dial-ticks {
  background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .012), transparent 67%);
  border: 1px solid rgba(51, 164, 225, .48);
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, .52),
    inset 0 0 18px rgba(0, 0, 0, .28);
  inset: 3px;
}

.premium-stopwatch-card .stopwatch-dial .dial-ticks::before {
  background: linear-gradient(132deg, rgba(255, 255, 255, .07), transparent 28% 100%);
  border: 0;
  box-shadow: none;
  inset: 1px;
}

.premium-stopwatch-card .stopwatch-dial .dial-ticks::after {
  background:
    radial-gradient(ellipse at 30% 17%, rgba(255, 255, 255, .052), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, .018), transparent 45%);
  inset: 4px;
}

.premium-stopwatch-card .stopwatch-dial .dial-ticks i::before {
  background: rgba(211, 219, 225, .57);
  box-shadow: none;
  height: clamp(6px, 1vw, 9px);
  top: clamp(11px, 1.7vw, 15px);
  width: 1px;
}

.premium-stopwatch-card .stopwatch-dial .dial-ticks i:nth-child(5n + 1)::before {
  background: #d9e0e5;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .68);
  height: clamp(13px, 2vw, 18px);
  width: 2px;
}

.premium-stopwatch-card .stopwatch-dial .dial-ticks i:nth-child(15n + 1)::before {
  background: #edf1f4;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .72);
  width: 2px;
}

.premium-stopwatch-card .stopwatch-dial .dial-number {
  color: #d7dde2;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: clamp(18px, 3.5vw, 29px);
  font-weight: 430;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .78);
}

.premium-stopwatch-card .stopwatch-dial .dial-number.n60 {
  color: #d7dde2;
  font-size: clamp(17px, 3.2vw, 27px);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .78);
}

.premium-stopwatch-card .stopwatch-hand {
  background: linear-gradient(90deg, #167bc1, #46b4f1 58%, #218ed0);
  bottom: calc(50% - 2px);
  box-shadow: 0 0 4px rgba(43, 158, 224, .42);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .72));
  height: 36%;
  width: 2px;
}

.premium-stopwatch-card .stopwatch-hand::after {
  background: radial-gradient(circle, #319edc 0 22%, #111820 25% 48%, #66727a 51% 63%, #080c10 66%);
  bottom: -8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .65);
  height: 16px;
  left: -7px;
  width: 16px;
}

.premium-stopwatch-card .inner-scale {
  border: 1px solid rgba(177, 190, 199, .09);
  height: 39%;
  left: 30.5%;
  width: 39%;
}

.premium-stopwatch-card .inner-scale i::before {
  background: rgba(197, 207, 214, .25);
  box-shadow: none;
  height: 1px;
  top: 6px;
  width: 1px;
}

.premium-stopwatch-card .inner-scale i:nth-child(5n + 1)::before {
  background: rgba(221, 228, 233, .42);
  box-shadow: none;
  height: 3px;
  width: 1px;
}

.premium-stopwatch-card .minute-progress-hand {
  background: linear-gradient(#aeb8bf, #444f58);
  box-shadow: none;
  height: 28%;
  opacity: .52;
  width: 1px;
}

.premium-stopwatch-card .physical-pusher {
  background: linear-gradient(110deg, #4d5861 0%, #1e262d 25%, #0b1015 63%, #303a42 100%);
  border: 1px solid #04070a;
  border-radius: 8px 8px 5px 5px;
  box-shadow:
    inset 1px 1px 1px rgba(255, 255, 255, .14),
    inset -2px -2px 3px rgba(0, 0, 0, .48),
    0 0 0 2px #182027,
    0 7px 11px rgba(0, 0, 0, .55);
  height: clamp(43px, 5.8dvh, 58px);
  top: 7%;
  width: clamp(24px, 3.1dvh, 31px);
}

.premium-stopwatch-card .physical-pusher::after {
  background: linear-gradient(90deg, #11171c, #555f67 48%, #0c1116);
  border: 1px solid #06090c;
  bottom: -13px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .09);
  content: '';
  height: 14px;
  left: 29%;
  position: absolute;
  width: 42%;
  z-index: -1;
}

.premium-stopwatch-card .physical-pusher span {
  background: linear-gradient(90deg, #171e24, #56616a 48%, #11171c);
  border-radius: 4px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .1);
  height: 24%;
  margin: 15% 12% 0;
}

.premium-stopwatch-card .physical-start {
  box-shadow:
    inset 1px 1px 1px rgba(255, 255, 255, .14),
    inset -2px -2px 3px rgba(0, 0, 0, .48),
    0 0 0 2px #182027,
    0 -2px 0 rgba(43, 158, 222, .7),
    0 7px 11px rgba(0, 0, 0, .55);
}

.premium-stopwatch-card .precise-stopwatch-time {
  background: linear-gradient(180deg, rgba(18, 27, 36, .92), rgba(7, 12, 17, .96));
  border: 1px solid #2a3741;
  border-radius: 11px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    inset 0 0 14px rgba(0, 0, 0, .3),
    0 8px 15px rgba(0, 0, 0, .2);
  color: #d5dde2;
  text-shadow: none;
}

.premium-stopwatch-card .stopwatch-milliseconds {
  color: #3c9fd8;
  text-shadow: 0 0 4px rgba(50, 153, 211, .14);
}

@media (max-width: 620px) {
  .premium-flip-clock {
    gap: 7px;
  }

  .premium-flip-tile {
    border-radius: 12px;
  }

  .premium-flip-digit {
    font-size: clamp(37px, 16.5vw, 64px);
  }

  .premium-flip-label {
    letter-spacing: .13em;
    margin-top: 14px;
  }

  .flip-pivot {
    height: 15px;
    width: 7px;
  }

  .iphone-stopwatch-card.premium-stopwatch-card {
    padding-top: 84px;
  }

  .premium-stopwatch-card .physical-pusher {
    height: 40px;
    width: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .premium-flip-tile.is-flipping .folding-top,
  .premium-flip-tile.is-flipping .folding-bottom {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}


/* styles.v13.css */

/* Premium automotive prikaz, strogo ograničen na karticu „Predstojeći isteci“. */
[data-panel="upcoming"] .segment {
  background:
    radial-gradient(circle at 50% -18%, rgba(50, 91, 119, .11), transparent 35%),
    linear-gradient(155deg, #101821, #080e14 64%, #060a0f);
  border: 1px solid #25313b;
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  padding: clamp(18px, 2.4vw, 28px);
}

[data-panel="upcoming"] .segment > h2 {
  color: #e2e9ee;
  font-family: inherit;
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 600;
  letter-spacing: -.015em;
  margin: 0 0 16px 2px;
}

[data-panel="upcoming"] .dashboard-grid {
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

[data-panel="upcoming"] .upcoming-gauge-card {
  --gauge-start: color-mix(in srgb, var(--accent-dark) 76%, #092236);
  --gauge-end: color-mix(in srgb, var(--accent) 74%, #8bdcff);
  --gauge-highlight: color-mix(in srgb, var(--accent) 86%, white);
  align-items: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(59, 98, 126, .105), transparent 46%),
    linear-gradient(155deg, #151f29 0%, #0d151d 57%, #091017 100%);
  border: 1px solid #2b3945;
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .038),
    inset 0 -16px 34px rgba(0, 0, 0, .13);
  display: flex;
  flex-direction: column;
  font-family: inherit;
  min-height: 324px;
  overflow: hidden;
  padding: 0 15px 15px;
}

[data-panel="upcoming"] .upcoming-gauge-card::after {
  background: linear-gradient(90deg, transparent, var(--gauge-end), transparent);
  bottom: 0;
  content: '';
  height: 1px;
  left: 18%;
  opacity: .22;
  position: absolute;
  right: 18%;
}

[data-panel="upcoming"] .upcoming-gauge-card.severity-warning {
  --gauge-start: #86540e;
  --gauge-end: #e7a234;
  --gauge-highlight: #ffc365;
  background:
    radial-gradient(circle at 50% 30%, rgba(207, 141, 42, .085), transparent 46%),
    linear-gradient(155deg, #191d20, #111517 58%, #0b0e10);
  border-color: rgba(207, 149, 55, .34);
}

[data-panel="upcoming"] .upcoming-gauge-card.severity-danger,
[data-panel="upcoming"] .upcoming-gauge-card.severity-overdue {
  --gauge-start: #842f37;
  --gauge-end: #e25a62;
  --gauge-highlight: #ff7b81;
  background:
    radial-gradient(circle at 50% 30%, rgba(205, 71, 82, .09), transparent 46%),
    linear-gradient(155deg, #1b191d, #131115 58%, #0d0b0e);
  border-color: rgba(205, 77, 87, .35);
}

[data-panel="upcoming"] .upcoming-gauge-card.severity-satisfied {
  --gauge-start: #28755f;
  --gauge-end: #51b995;
  --gauge-highlight: #78d3b3;
  border-color: rgba(77, 174, 142, .32);
}

[data-panel="upcoming"] .gauge-title {
  color: #dce4e9;
  font-family: inherit;
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 590;
  letter-spacing: -.01em;
  line-height: 1.22;
  margin: 17px 38px 0;
  min-height: 42px;
  text-align: center;
}

[data-panel="upcoming"] .upcoming-status-badge {
  background: color-mix(in srgb, var(--gauge-end) 8%, rgba(8, 14, 20, .82));
  border: 1px solid color-mix(in srgb, var(--gauge-end) 24%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--gauge-end) 72%, #bdcbd5);
  display: inline-flex;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .14em;
  line-height: 1;
  margin-top: 4px;
  padding: 6px 9px 5px;
}

[data-panel="upcoming"] .upcoming-gauge-shell {
  flex: 1 0 auto;
  height: 198px;
  margin: 1px auto 0;
  max-width: 360px;
  position: relative;
  width: 100%;
}

[data-panel="upcoming"] .semi-gauge {
  height: 170px;
  left: 0;
  margin: 0;
  max-width: none;
  overflow: visible;
  position: absolute;
  top: 0;
  width: 100%;
}

[data-panel="upcoming"] .gauge-track,
[data-panel="upcoming"] .gauge-progress {
  fill: none;
  stroke-linecap: round;
  stroke-width: 10;
}

[data-panel="upcoming"] .gauge-track {
  stroke: #26343f;
}

[data-panel="upcoming"] .gauge-progress {
  animation: upcoming-gauge-reveal 460ms cubic-bezier(.2, .7, .25, 1) both;
  filter: drop-shadow(0 0 2.5px color-mix(in srgb, var(--gauge-end) 36%, transparent));
}

[data-panel="upcoming"] .gauge-gradient-start {
  stop-color: var(--gauge-start);
}

[data-panel="upcoming"] .gauge-gradient-end {
  stop-color: var(--gauge-end);
}

[data-panel="upcoming"] .upcoming-gauge-ticks line {
  stroke: rgba(171, 192, 207, .34);
  stroke-linecap: round;
  stroke-width: 1;
}

[data-panel="upcoming"] .upcoming-gauge-ticks .major-tick {
  stroke: rgba(205, 219, 228, .56);
  stroke-width: 1.35;
}

[data-panel="upcoming"] .upcoming-gauge-marker {
  fill: var(--gauge-highlight);
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--gauge-end) 62%, transparent));
  stroke: #111a21;
  stroke-width: 1.4;
}

[data-panel="upcoming"] .gauge-value {
  color: #eef2f4;
  font-family: inherit;
  font-size: clamp(31px, 3vw, 41px);
  font-variant-numeric: tabular-nums;
  font-weight: 570;
  left: 0;
  letter-spacing: -.035em;
  line-height: 1;
  margin: 0;
  position: absolute;
  right: 0;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .42);
  top: 88px;
}

[data-panel="upcoming"] .gauge-scale {
  color: #8296a5;
  font-family: inherit;
  font-size: 11px;
  font-weight: 480;
  left: 0;
  letter-spacing: .02em;
  margin: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 127px;
}

[data-panel="upcoming"] .gauge-labels {
  color: #718695;
  display: flex;
  font-family: inherit;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 540;
  justify-content: space-between;
  left: 24px;
  margin: 0;
  position: absolute;
  right: 24px;
  top: 151px;
}

[data-panel="upcoming"] .gauge-note {
  align-items: center;
  align-self: center;
  background: rgba(8, 14, 20, .5);
  border: 1px solid rgba(120, 148, 168, .16);
  border-radius: 999px;
  color: #8da0ae;
  display: inline-flex;
  font-family: inherit;
  font-size: 10px;
  justify-content: center;
  line-height: 1.25;
  margin: 1px 6px 0;
  min-height: 29px;
  padding: 5px 10px;
  text-align: center;
}

[data-panel="upcoming"] .gauge-note:empty {
  background: transparent;
  border-color: transparent;
  min-height: 16px;
  padding-block: 0;
}

[data-panel="upcoming"] .favorite-box {
  align-items: center;
  background: rgba(8, 14, 20, .58);
  border: 1px solid rgba(134, 158, 176, .24);
  border-radius: 8px;
  color: #728796;
  display: flex;
  height: 28px;
  justify-content: center;
  left: 11px;
  top: 11px;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
  width: 28px;
}

[data-panel="upcoming"] .favorite-box::before {
  content: '☆';
  font-family: "Segoe UI Symbol", sans-serif;
  font-size: 17px;
  line-height: 1;
  pointer-events: none;
}

[data-panel="upcoming"] .favorite-box:has(.favorite-input:checked) {
  background: color-mix(in srgb, var(--gauge-end) 9%, rgba(8, 14, 20, .72));
  border-color: color-mix(in srgb, var(--gauge-end) 38%, transparent);
  color: var(--gauge-end);
}

[data-panel="upcoming"] .favorite-box:has(.favorite-input:checked)::before {
  content: '★';
}

[data-panel="upcoming"] .favorite-box:has(.favorite-input:focus-visible) {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gauge-end) 22%, transparent);
  outline: none;
}

[data-panel="upcoming"] .favorite-input {
  cursor: pointer;
  height: 100%;
  inset: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
}

[data-panel="upcoming"] .satisfied-gauge {
  border-color: var(--gauge-end);
  color: var(--gauge-end);
  left: 50%;
  margin: 0;
  position: absolute;
  top: 39px;
  transform: translateX(-50%);
}

[data-panel="upcoming"] .severity-satisfied .gauge-value {
  font-size: 23px;
  top: 137px;
}

@keyframes upcoming-gauge-reveal {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

@media (max-width: 1120px) {
  [data-panel="upcoming"] .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 660px) {
  [data-panel="upcoming"] .segment {
    border-radius: 16px;
    padding: 14px 10px;
  }

  [data-panel="upcoming"] .dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-panel="upcoming"] .upcoming-gauge-card {
    min-height: 316px;
  }

  [data-panel="upcoming"] .gauge-title {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-panel="upcoming"] .gauge-progress {
    animation-duration: 1ms;
  }
}


/* styles.v15.css */

[data-panel="smart_minute"] .segment { margin-inline: auto; max-width: 1040px; }
[data-panel="smart_minute"] .segment > h2 {
  color: #202b35; font-family: inherit; font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 650; letter-spacing: -.02em; margin-bottom: 14px;
}

[data-panel="smart_minute"] .premium-smart-minute-card {
  background: radial-gradient(circle at 50% -20%, rgba(55,112,151,.16), transparent 42%),
    linear-gradient(154deg, #151f29 0%, #0c151e 54%, #070d13 100%);
  border: 1px solid #2a3945; border-radius: clamp(18px, 2vw, 22px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), inset 0 -22px 45px rgba(0,0,0,.13);
  color: #dce6ed; font-family: inherit; margin-inline: auto; max-width: 920px;
  overflow: hidden; padding: clamp(19px, 3vw, 30px);
}

[data-panel="smart_minute"] .premium-smart-minute-head {
  align-items: center; border-bottom: 1px solid rgba(122,151,171,.13); gap: 20px;
  margin: 0 0 23px; padding: 0 0 20px;
}
[data-panel="smart_minute"] .smart-minute-heading { gap: 9px; min-width: 0; }
[data-panel="smart_minute"] .smart-minute-heading > span {
  align-items: center; color: #bdcbd5; display: flex; font-size: clamp(13px,1.7vw,16px);
  font-weight: 580; letter-spacing: .015em;
}
[data-panel="smart_minute"] .smart-minute-heading > span::before {
  background: linear-gradient(90deg,transparent 47%,#66bdf0 48% 52%,transparent 53%),
    linear-gradient(#66bdf0 47%,transparent 48%);
  border: 1px solid #478db8; border-radius: 50%; box-shadow: 0 0 5px rgba(58,157,218,.18);
  content: ''; height: 15px; margin-right: 8px; width: 15px;
}
[data-panel="smart_minute"] .premium-smart-minute-head #miniLabel {
  color: #68bcf2; display: block; font-family: ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size: clamp(28px,5vw,47px); font-variant-numeric: tabular-nums; font-weight: 540;
  letter-spacing: -.055em; line-height: 1.12; text-shadow: 0 0 9px rgba(45,151,220,.18);
  white-space: nowrap;
}

[data-panel="smart_minute"] .smart-minute-restart {
  align-items: center; appearance: none;
  background: linear-gradient(180deg,rgba(28,45,58,.88),rgba(12,23,32,.92));
  border: 1px solid #356985; border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  color: #c8d6df; display: inline-flex; font-size: 11px; font-weight: 720; gap: 7px;
  letter-spacing: .07em; min-height: 42px; padding: 9px 14px;
  transition: background 150ms ease,border-color 150ms ease,transform 90ms ease;
}
[data-panel="smart_minute"] .smart-minute-restart span:first-child {
  color: #54b4ec; font-size: 20px; font-weight: 500; line-height: .7;
}
[data-panel="smart_minute"] .smart-minute-restart:hover,
[data-panel="smart_minute"] .smart-minute-restart:focus-visible {
  background: linear-gradient(180deg,rgba(33,57,72,.96),rgba(15,29,39,.98));
  border-color: #4c9bc5; outline: none;
}
[data-panel="smart_minute"] .smart-minute-restart:active { transform: translateY(1px) scale(.985); }

[data-panel="smart_minute"] .smart-track-shell {
  animation: smart-minute-svg-reveal 320ms cubic-bezier(.2,.7,.25,1) both;
  background: radial-gradient(ellipse at 50% 45%,rgba(38,84,113,.13),transparent 72%),
    linear-gradient(180deg,rgba(4,9,14,.72),rgba(14,24,32,.58));
  border: 1px solid #273641; border-radius: 17px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.68), inset 0 1px 0 rgba(255,255,255,.02);
  margin: 0; padding: 10px 18px 7px; position: relative;
}
[data-panel="smart_minute"] .smart-svg-track-button {
  appearance: none; background: transparent; border: 0; border-radius: 13px;
  box-shadow: none; cursor: pointer; display: block; height: 110px; overflow: visible;
  padding: 0; position: relative; width: 100%;
}
[data-panel="smart_minute"] .smart-svg-track-button:focus-visible {
  outline: 2px solid rgba(83,181,236,.7); outline-offset: 4px;
}
[data-panel="smart_minute"] .smart-svg-track-button > .smart-zone,
[data-panel="smart_minute"] .smart-svg-track-button > .smart-fill,
[data-panel="smart_minute"] .smart-svg-track-button > i,
[data-panel="smart_minute"] .smart-ticks { display: none; }
[data-panel="smart_minute"] .smart-minute-svg {
  display: block; height: 110px; overflow: visible; width: 100%;
}

[data-panel="smart_minute"] .smart-svg-track-housing {
  fill: #071019; filter: drop-shadow(0 1px 4px rgba(0,0,0,.76));
  stroke: #354a58; stroke-width: 1; vector-effect: non-scaling-stroke;
}
[data-panel="smart_minute"] .smart-blue-start { stop-color: #0b4b75; }
[data-panel="smart_minute"] .smart-blue-end { stop-color: #2b92cc; }
[data-panel="smart_minute"] .smart-red-start { stop-color: #b94b58; }
[data-panel="smart_minute"] .smart-red-end { stop-color: #ee7b83; }
[data-panel="smart_minute"] .smart-svg-zone-blue {
  fill: url(#smartMinuteBlue); filter: drop-shadow(0 0 2px rgba(36,137,198,.2));
}
[data-panel="smart_minute"] .smart-svg-zone-red {
  fill: url(#smartMinuteRed); filter: drop-shadow(0 0 2px rgba(233,107,117,.22));
}
[data-panel="smart_minute"] .smart-svg-progress {
  fill: rgba(235,249,255,.13); stroke: rgba(214,241,255,.2); stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

[data-panel="smart_minute"] .smart-svg-tick {
  stroke: rgba(205,223,234,.38); stroke-linecap: round; stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
[data-panel="smart_minute"] .smart-svg-tick.is-major { stroke: rgba(232,242,248,.72); }
[data-panel="smart_minute"] .smart-svg-tick.is-minute {
  filter: drop-shadow(0 0 2px rgba(72,173,232,.42)); stroke: #a8dfff; stroke-width: 1.5;
}
[data-panel="smart_minute"] .smart-svg-tick-label,
[data-panel="smart_minute"] .smart-svg-boundary-label,
[data-panel="smart_minute"] .smart-svg-minute-label {
  dominant-baseline: middle; font-family: ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-variant-numeric: tabular-nums; pointer-events: none; text-anchor: middle;
}
[data-panel="smart_minute"] .smart-svg-tick-label { fill: #8095a4; font-size: 10px; }
[data-panel="smart_minute"] .smart-svg-tick-label.is-start { text-anchor: start; }
[data-panel="smart_minute"] .smart-svg-tick-label.is-end { text-anchor: end; }
[data-panel="smart_minute"] .smart-svg-tick-label.is-minute { fill: #b8d8ea; font-weight: 650; }
[data-panel="smart_minute"] .smart-svg-boundary {
  stroke-width: 2; vector-effect: non-scaling-stroke;
}
[data-panel="smart_minute"] .smart-svg-boundary-blue {
  filter: drop-shadow(0 0 2px rgba(66,176,238,.43)); stroke: #71c8fa;
}
[data-panel="smart_minute"] .smart-svg-boundary-red {
  filter: drop-shadow(0 0 2px rgba(233,107,117,.4)); stroke: #f08a91;
}
[data-panel="smart_minute"] .smart-svg-boundary-label {
  font-size: 10px; font-weight: 650; paint-order: stroke; stroke: #09131b; stroke-width: 4px;
}
[data-panel="smart_minute"] .smart-svg-boundary-label-blue { fill: #78cfff; }
[data-panel="smart_minute"] .smart-svg-boundary-label-red { fill: #f0959b; }
[data-panel="smart_minute"] .smart-svg-minute-label {
  fill: #687d8d; font-family: inherit; font-size: 9px; font-weight: 620; letter-spacing: 1px;
  text-transform: uppercase;
}

[data-panel="smart_minute"] .smart-svg-playhead-halo {
  fill: rgba(65,175,235,.12); stroke: rgba(87,193,248,.22); stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
[data-panel="smart_minute"] .smart-svg-playhead {
  fill: #278fca; filter: drop-shadow(0 0 3px rgba(70,179,239,.5));
  stroke: #a8e1ff; stroke-width: 1.2; vector-effect: non-scaling-stroke;
}
[data-panel="smart_minute"] .smart-svg-playhead-core { fill: #f6fcff; }

[data-panel="smart_minute"] .smart-minute-information {
  align-items: flex-start; background: rgba(7,15,22,.54); border: 1px solid rgba(103,139,162,.2);
  border-radius: 11px; color: #8fa3b1; display: flex; font-family: inherit; font-size: 12px;
  gap: 9px; line-height: 1.45; margin: 15px 0 0; padding: 11px 13px; text-align: left;
}
[data-panel="smart_minute"] .smart-minute-information::before {
  align-items: center; border: 1px solid #397ca4; border-radius: 50%; color: #65b9e9;
  content: 'i'; display: inline-flex; flex: 0 0 16px; font-size: 10px; font-weight: 750;
  height: 16px; justify-content: center; margin-top: 1px;
}

@keyframes smart-minute-svg-reveal {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 620px) {
  [data-panel="smart_minute"] .premium-smart-minute-card { border-radius: 17px; padding: 17px 12px; }
  [data-panel="smart_minute"] .premium-smart-minute-head {
    align-items: stretch; flex-direction: column; gap: 13px;
  }
  [data-panel="smart_minute"] .premium-smart-minute-head #miniLabel {
    font-size: clamp(24px,8.2vw,34px);
  }
  [data-panel="smart_minute"] .smart-minute-restart { align-self: flex-start; }
  [data-panel="smart_minute"] .smart-track-shell { padding-inline: 9px; }
  [data-panel="smart_minute"] .smart-svg-tick-label { font-size: 8px; }
  [data-panel="smart_minute"] .smart-svg-boundary-label { font-size: 9px; }
  [data-panel="smart_minute"] .smart-svg-minute-label { font-size: 8px; letter-spacing: .5px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-panel="smart_minute"] .smart-track-shell { animation-duration: 1ms; }
  [data-panel="smart_minute"] .smart-minute-restart { transition: none; }
}


/* styles.v16.css */

/* Isti premium instrument dizajn sada važi za sve dashboard sekcije. */
.tab-panel:not([data-panel="upcoming"]) .dashboard-grid {
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.premium-dashboard-gauge-card {
  --gauge-start: #145a88;
  --gauge-end: #45ace7;
  --gauge-highlight: #8bd8ff;
  align-items: center;
  background: radial-gradient(circle at 50% 30%, rgba(59,98,126,.105), transparent 46%),
    linear-gradient(155deg, #151f29 0%, #0d151d 57%, #091017 100%);
  border: 1px solid #2b3945;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.038), inset 0 -16px 34px rgba(0,0,0,.13);
  display: flex;
  flex-direction: column;
  font-family: inherit;
  min-height: 324px;
  overflow: hidden;
  padding: 0 15px 15px;
}

.premium-dashboard-gauge-card::after {
  background: linear-gradient(90deg,transparent,var(--gauge-end),transparent);
  bottom: 0;
  content: '';
  height: 1px;
  left: 18%;
  opacity: .22;
  position: absolute;
  right: 18%;
}

.premium-dashboard-gauge-card.severity-warning {
  --gauge-start: #86540e;
  --gauge-end: #e7a234;
  --gauge-highlight: #ffc365;
  background: radial-gradient(circle at 50% 30%,rgba(207,141,42,.085),transparent 46%),
    linear-gradient(155deg,#191d20,#111517 58%,#0b0e10);
  border-color: rgba(207,149,55,.34);
}

.premium-dashboard-gauge-card.severity-danger,
.premium-dashboard-gauge-card.severity-overdue {
  --gauge-start: #842f37;
  --gauge-end: #e25a62;
  --gauge-highlight: #ff7b81;
  background: radial-gradient(circle at 50% 30%,rgba(205,71,82,.09),transparent 46%),
    linear-gradient(155deg,#1b191d,#131115 58%,#0d0b0e);
  border-color: rgba(205,77,87,.35);
}

.premium-dashboard-gauge-card.severity-satisfied {
  --gauge-start: #28755f;
  --gauge-end: #51b995;
  --gauge-highlight: #78d3b3;
  border-color: rgba(77,174,142,.32);
}

.premium-dashboard-gauge-card .gauge-title {
  color: #dce4e9;
  font-family: inherit;
  font-size: clamp(15px,1.35vw,18px);
  font-weight: 590;
  letter-spacing: -.01em;
  line-height: 1.22;
  margin: 17px 38px 0;
  min-height: 42px;
  text-align: center;
}

.premium-gauge-status-badge {
  background: color-mix(in srgb,var(--gauge-end) 8%,rgba(8,14,20,.82));
  border: 1px solid color-mix(in srgb,var(--gauge-end) 24%,transparent);
  border-radius: 999px;
  color: color-mix(in srgb,var(--gauge-end) 72%,#bdcbd5);
  display: inline-flex;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .14em;
  line-height: 1;
  margin-top: 4px;
  padding: 6px 9px 5px;
}

.premium-dashboard-gauge-shell {
  flex: 1 0 auto;
  height: 198px;
  margin: 1px auto 0;
  max-width: 360px;
  position: relative;
  width: 100%;
}

.premium-dashboard-gauge-card .semi-gauge {
  height: 170px;
  left: 0;
  margin: 0;
  max-width: none;
  overflow: visible;
  position: absolute;
  top: 0;
  width: 100%;
}

.premium-dashboard-gauge-card .gauge-track,
.premium-dashboard-gauge-card .gauge-progress {
  fill: none;
  stroke-linecap: round;
  stroke-width: 10;
}

.premium-dashboard-gauge-card .gauge-track { stroke: #26343f; }
.premium-dashboard-gauge-card .gauge-progress {
  animation: dashboard-gauge-reveal 460ms cubic-bezier(.2,.7,.25,1) both;
  filter: drop-shadow(0 0 2.5px color-mix(in srgb,var(--gauge-end) 36%,transparent));
}
.premium-dashboard-gauge-card .dashboard-gauge-gradient-start { stop-color: var(--gauge-start); }
.premium-dashboard-gauge-card .dashboard-gauge-gradient-end { stop-color: var(--gauge-end); }

.premium-dashboard-gauge-card .dashboard-gauge-ticks line {
  stroke: rgba(171,192,207,.34);
  stroke-linecap: round;
  stroke-width: 1;
}
.premium-dashboard-gauge-card .dashboard-gauge-ticks .major-tick {
  stroke: rgba(205,219,228,.56);
  stroke-width: 1.35;
}
.premium-dashboard-gauge-card .dashboard-gauge-marker {
  fill: var(--gauge-highlight);
  filter: drop-shadow(0 0 3px color-mix(in srgb,var(--gauge-end) 62%,transparent));
  stroke: #111a21;
  stroke-width: 1.4;
}

.premium-dashboard-gauge-card .gauge-value {
  color: #eef2f4;
  font-family: inherit;
  font-size: clamp(31px,3vw,41px);
  font-variant-numeric: tabular-nums;
  font-weight: 570;
  left: 0;
  letter-spacing: -.035em;
  line-height: 1;
  margin: 0;
  position: absolute;
  right: 0;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0,0,0,.42);
  top: 88px;
}

.premium-dashboard-gauge-card .gauge-scale {
  color: #8296a5;
  font-family: inherit;
  font-size: 11px;
  font-weight: 480;
  left: 0;
  letter-spacing: .02em;
  margin: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 127px;
}

.premium-dashboard-gauge-card .gauge-labels {
  color: #718695;
  display: flex;
  font-family: inherit;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 540;
  justify-content: space-between;
  left: 24px;
  margin: 0;
  position: absolute;
  right: 24px;
  top: 151px;
}

.premium-dashboard-gauge-card .gauge-note {
  align-items: center;
  align-self: center;
  background: rgba(8,14,20,.5);
  border: 1px solid rgba(120,148,168,.16);
  border-radius: 999px;
  color: #8da0ae;
  display: inline-flex;
  font-family: inherit;
  font-size: 10px;
  justify-content: center;
  line-height: 1.25;
  margin: 1px 6px 0;
  min-height: 29px;
  padding: 5px 10px;
  text-align: center;
}

.premium-dashboard-gauge-card .gauge-note:empty {
  background: transparent;
  border-color: transparent;
  min-height: 16px;
  padding-block: 0;
}

.premium-dashboard-gauge-card .favorite-box {
  align-items: center;
  background: rgba(8,14,20,.58);
  border: 1px solid rgba(134,158,176,.24);
  border-radius: 8px;
  color: #728796;
  display: flex;
  height: 28px;
  justify-content: center;
  left: 11px;
  top: 11px;
  transition: border-color 150ms ease,color 150ms ease,background 150ms ease;
  width: 28px;
}
.premium-dashboard-gauge-card .favorite-box::before {
  content: '☆';
  font-family: "Segoe UI Symbol",sans-serif;
  font-size: 17px;
  line-height: 1;
  pointer-events: none;
}
.premium-dashboard-gauge-card .favorite-box:has(.favorite-input:checked) {
  background: color-mix(in srgb,var(--gauge-end) 9%,rgba(8,14,20,.72));
  border-color: color-mix(in srgb,var(--gauge-end) 38%,transparent);
  color: var(--gauge-end);
}
.premium-dashboard-gauge-card .favorite-box:has(.favorite-input:checked)::before { content: '★'; }
.premium-dashboard-gauge-card .favorite-box:has(.favorite-input:focus-visible) {
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--gauge-end) 22%,transparent);
  outline: none;
}
.premium-dashboard-gauge-card .favorite-input {
  cursor: pointer;
  height: 100%;
  inset: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
}

.premium-dashboard-gauge-card .satisfied-gauge {
  border-color: var(--gauge-end);
  color: var(--gauge-end);
  left: 50%;
  margin: 0;
  position: absolute;
  top: 39px;
  transform: translateX(-50%);
}
.premium-dashboard-gauge-card.severity-satisfied .gauge-value { font-size: 23px; top: 137px; }

/* Naslovna, info i check kartica prate isti sistem bez menjanja sadržaja. */
.tab-panel:not([data-panel="upcoming"]) .title-card,
.tab-panel:not([data-panel="upcoming"]) .info-card,
.tab-panel:not([data-panel="upcoming"]) .check-card {
  background: radial-gradient(circle at 50% 15%,rgba(54,98,128,.12),transparent 48%),
    linear-gradient(155deg,#151f29,#0b131b 68%,#080e14);
  border: 1px solid #2b3945;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  color: #dce4e9;
}
.tab-panel:not([data-panel="upcoming"]) .title-card .section-card-title {
  color: color-mix(in srgb,var(--accent) 52%,#d8e3ea);
  font-family: inherit;
  font-size: clamp(30px,3vw,43px);
  font-weight: 620;
  letter-spacing: -.025em;
  text-shadow: none;
}
.tab-panel:not([data-panel="upcoming"]) .info-card h3,
.tab-panel:not([data-panel="upcoming"]) .check-card h3 { color: #dce4e9; font-family: inherit; }
.tab-panel:not([data-panel="upcoming"]) .info-card p,
.tab-panel:not([data-panel="upcoming"]) .check-card p { color: #8fa3b1; }

@keyframes dashboard-gauge-reveal {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

@media (max-width: 1120px) {
  .tab-panel:not([data-panel="upcoming"]) .dashboard-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 660px) {
  .tab-panel:not([data-panel="upcoming"]) .dashboard-grid {
    grid-template-columns: minmax(0,1fr);
  }
  .premium-dashboard-gauge-card { min-height: 316px; }
  .premium-dashboard-gauge-card .gauge-title { font-size: 16px; }
  .tab-panel:not([data-panel="upcoming"]) .title-card { min-height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  .premium-dashboard-gauge-card .gauge-progress { animation-duration: 1ms; }
}


/* styles.v17.css */

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --background: #eef3f8;
  --card: #ffffff;
  --text: #17212b;
  --muted: #667784;
  --border: #cbd6df;
  --blue-soft: #eaf4fb;
  --track: #dce5ec;
  --shadow: 0 9px 22px rgba(31,45,58,.07);
  --theme-surface: #ffffff;
  --theme-surface-raised: #f7fafc;
  --theme-field: #ffffff;
  --theme-field-alt: #f3f7fa;
  --theme-border: #cbd6df;
  --theme-text: #17212b;
  --theme-muted: #667784;
  --theme-soft-blue: #e8f3fa;
  --theme-shadow: 0 9px 22px rgba(31,45,58,.07);
  --theme-hero: linear-gradient(135deg,#ffffff,#edf4f9);
  --theme-tabs: rgba(255,255,255,.94);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #071019;
  --card: #101a23;
  --text: #e2ebf1;
  --muted: #91a4b2;
  --border: #2b3b47;
  --blue-soft: #132838;
  --track: #273641;
  --shadow: 0 10px 24px rgba(0,0,0,.22);
  --theme-surface: #101a23;
  --theme-surface-raised: #151f29;
  --theme-field: #111d27;
  --theme-field-alt: #0d1821;
  --theme-border: #2b3b47;
  --theme-text: #e2ebf1;
  --theme-muted: #91a4b2;
  --theme-soft-blue: #132838;
  --theme-shadow: 0 10px 24px rgba(0,0,0,.22);
  --theme-hero: linear-gradient(135deg,#111c26,#0b141d);
  --theme-tabs: rgba(12,22,31,.94);
}

html,
body {
  background: var(--background);
  color: var(--theme-text);
  transition: background-color 180ms ease,color 180ms ease;
}

.matlab-hero {
  background: var(--theme-hero);
  border-color: var(--theme-border);
  box-shadow: var(--theme-shadow);
  color: var(--theme-text);
}
.matlab-hero p { color: var(--theme-muted); }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.theme-toggle {
  align-items: center;
  appearance: none;
  background: var(--theme-field-alt);
  border: 1px solid var(--theme-border);
  border-radius: 999px;
  color: var(--theme-text);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  transition: background 150ms ease,border-color 150ms ease,transform 90ms ease;
}
.theme-toggle:hover,
.theme-toggle:focus-visible { background: var(--theme-soft-blue); border-color: #4a9bc7; outline: none; }
.theme-toggle:active { transform: translateY(1px); }
.theme-toggle-icon { color: #2895d1; font-size: 18px; line-height: 1; }

.control-panel,
.tabs,
.legal-note,
.manual-activity-panel,
.manual-activity-content,
.manual-entry,
.sequential-entry {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  box-shadow: var(--theme-shadow);
  color: var(--theme-text);
}

.tabs { background: var(--theme-tabs); }
.tab,
.form-actions button,
.manual-action-button,
.manual-delete-button,
.manual-quick-actions button,
.remove-manual,
.sequential-actions button,
.file-source-button {
  background: var(--theme-field-alt);
  border-color: var(--theme-border);
  color: var(--theme-text);
}
.tab:hover,
.form-actions button:hover,
.manual-action-button:hover,
.manual-quick-actions button:hover,
.sequential-actions button:hover { background: var(--theme-soft-blue); border-color: #4a9bc7; }
.tab.active,
.form-actions .primary-action,
.sequential-actions #sequentialAdd,
.file-source-button.primary { background: var(--blue); border-color: var(--blue); color: #fff; }

.field > span,
.file-field > span,
.timer-inputs label > span,
.manual-entry label,
.sequential-entry label,
.sequential-start,
.manual-activity-intro,
.manual-empty,
.manual-summary,
.manual-panel-body > p,
.manual-help,
.reader-note,
.info-line,
.empty-favorites { color: var(--theme-muted); }

.field input,
.field select,
.timer-inputs input,
.manual-entry select,
.manual-entry input,
.sequential-entry select,
.sequential-entry input,
.timer-set {
  background: var(--theme-field);
  border-color: var(--theme-border);
  color: var(--theme-text);
}
.file-field strong,
.sequential-start strong,
.manual-summary {
  background: var(--theme-field-alt);
  border-color: var(--theme-border);
  color: var(--theme-text);
}
.manual-activity-content { border-top-color: var(--theme-border); box-shadow: none; }
.manual-panel-body { border-top-color: var(--theme-border); }
.manual-activity-panel > summary { color: var(--theme-text); }
.manual-order { background: var(--theme-soft-blue); color: #258fc9; }
.remove-manual { background: color-mix(in srgb,#a02f2f 7%,var(--theme-field)); }
.segment > h2,
.segment h2 { color: var(--theme-text); }
.legal-note { color: var(--theme-muted); }

/* Gauge kartice i ostala polja sa vremenima dele istu površinu teme. */
:root[data-theme="light"] .premium-dashboard-gauge-card,
:root[data-theme="light"] [data-panel="upcoming"] .upcoming-gauge-card {
  background: radial-gradient(circle at 50% 28%,rgba(47,135,190,.065),transparent 47%),
    linear-gradient(155deg,#ffffff,#f5f9fc 62%,#eef4f8);
  border-color: #cbd7df;
  box-shadow: inset 0 1px 0 #fff,inset 0 -16px 30px rgba(44,74,94,.035);
}
:root[data-theme="light"] .premium-dashboard-gauge-card.severity-warning,
:root[data-theme="light"] [data-panel="upcoming"] .upcoming-gauge-card.severity-warning {
  background: linear-gradient(155deg,#fffdf7,#faf5e9);
  border-color: #dfc995;
}
:root[data-theme="light"] .premium-dashboard-gauge-card.severity-danger,
:root[data-theme="light"] .premium-dashboard-gauge-card.severity-overdue,
:root[data-theme="light"] [data-panel="upcoming"] .upcoming-gauge-card.severity-danger,
:root[data-theme="light"] [data-panel="upcoming"] .upcoming-gauge-card.severity-overdue {
  background: linear-gradient(155deg,#fffafa,#f9eeee);
  border-color: #dfb1b5;
}
:root[data-theme="light"] :is(.premium-dashboard-gauge-card,[data-panel="upcoming"] .upcoming-gauge-card) .gauge-title,
:root[data-theme="light"] :is(.premium-dashboard-gauge-card,[data-panel="upcoming"] .upcoming-gauge-card) .gauge-value { color: #1c2933; }
:root[data-theme="light"] :is(.premium-dashboard-gauge-card,[data-panel="upcoming"] .upcoming-gauge-card) .gauge-track { stroke: #d8e2e9; }
:root[data-theme="light"] :is(.premium-dashboard-gauge-card,[data-panel="upcoming"] .upcoming-gauge-card) .gauge-scale,
:root[data-theme="light"] :is(.premium-dashboard-gauge-card,[data-panel="upcoming"] .upcoming-gauge-card) .gauge-labels { color: #6d808e; }
:root[data-theme="light"] :is(.premium-dashboard-gauge-card,[data-panel="upcoming"] .upcoming-gauge-card) .gauge-note {
  background: #f3f7fa; border-color: #d8e2e9; color: #647885;
}
:root[data-theme="light"] :is(.premium-dashboard-gauge-card,[data-panel="upcoming"] .upcoming-gauge-card) .favorite-box {
  background: #f5f8fa; border-color: #c8d4dc; color: #6d818e;
}

:root[data-theme="dark"] [data-panel="upcoming"] .segment {
  background: linear-gradient(155deg,#101821,#080e14 64%,#060a0f);
  border-color: #25313b;
}
:root[data-theme="light"] [data-panel="upcoming"] .segment {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  box-shadow: var(--theme-shadow);
}
:root[data-theme="light"] [data-panel="upcoming"] .segment > h2 { color: var(--theme-text); }

:root[data-theme="light"] .tab-panel:not([data-panel="upcoming"]) :is(.title-card,.info-card,.check-card) {
  background: linear-gradient(155deg,#ffffff,#f2f7fa 68%,#edf3f7);
  border-color: var(--theme-border);
  color: var(--theme-text);
}
:root[data-theme="light"] .tab-panel:not([data-panel="upcoming"]) .title-card .section-card-title {
  color: color-mix(in srgb,var(--accent) 48%,#273843);
}
:root[data-theme="light"] .tab-panel:not([data-panel="upcoming"]) :is(.info-card,.check-card) h3 { color: var(--theme-text); }
:root[data-theme="light"] .tab-panel:not([data-panel="upcoming"]) :is(.info-card,.check-card) p { color: var(--theme-muted); }

/* Štoperica: ista komponenta dobija pravi svetli i tamni instrument panel. */
:root[data-theme="light"] .iphone-stopwatch-card.premium-stopwatch-card {
  background: radial-gradient(circle at 50% 34%,rgba(67,131,168,.08),transparent 38%),
    linear-gradient(155deg,#ffffff,#edf3f7 66%,#e5edf2);
  border-color: #c6d2da;
  box-shadow: inset 0 1px 0 #fff,inset 0 -24px 52px rgba(50,74,90,.05),0 14px 32px rgba(37,58,72,.1);
  color: #1d2a34;
}
:root[data-theme="light"] .premium-stopwatch-header strong,
:root[data-theme="light"] .premium-stopwatch-card > p { color: #586d7b; }
:root[data-theme="light"] .premium-stopwatch-card .stopwatch-dial {
  background: linear-gradient(126deg,rgba(255,255,255,.72),transparent 25% 75%,rgba(61,84,99,.11)) padding-box,
    radial-gradient(circle at 47% 44%,#fbfdfe,#eef3f6 51%,#dde6ec 78%,#ced9e0) padding-box,
    linear-gradient(135deg,#f4f7f9,#9caab4 20%,#e6edf1 48%,#86949f 67%,#f5f8fa) border-box;
  box-shadow: 0 0 0 2px #7e8d98,0 0 0 4px #dce4e9,
    inset 0 0 0 1px rgba(38,146,207,.44),inset 0 0 0 3px rgba(72,91,104,.15),
    inset 10px 12px 20px rgba(255,255,255,.45),inset -14px -17px 25px rgba(76,96,110,.11),
    0 18px 30px rgba(43,61,74,.16);
}
:root[data-theme="light"] .premium-stopwatch-card .stopwatch-dial .dial-ticks {
  background: radial-gradient(circle at 50% 46%,rgba(255,255,255,.4),transparent 68%);
  border-color: rgba(35,143,203,.42);
  box-shadow: inset 0 0 0 2px rgba(89,109,122,.12),inset 0 0 18px rgba(81,103,117,.08);
}
:root[data-theme="light"] .premium-stopwatch-card .stopwatch-dial .dial-ticks i::before { background: rgba(42,57,67,.5); }
:root[data-theme="light"] .premium-stopwatch-card .stopwatch-dial .dial-ticks i:nth-child(5n + 1)::before,
:root[data-theme="light"] .premium-stopwatch-card .stopwatch-dial .dial-ticks i:nth-child(15n + 1)::before { background: #283842; box-shadow: none; }
:root[data-theme="light"] .premium-stopwatch-card .stopwatch-dial .dial-number,
:root[data-theme="light"] .premium-stopwatch-card .stopwatch-dial .dial-number.n60 { color: #263640; text-shadow: none; }
:root[data-theme="light"] .premium-stopwatch-card .inner-scale { border-color: rgba(60,80,94,.16); }
:root[data-theme="light"] .premium-stopwatch-card .inner-scale i::before { background: rgba(41,58,69,.32); }
:root[data-theme="light"] .premium-stopwatch-card .precise-stopwatch-time {
  background: linear-gradient(#ffffff,#edf3f6); border-color: #c5d1d9;
  box-shadow: inset 0 1px #fff,inset 0 0 12px rgba(62,89,106,.05),0 7px 14px rgba(41,64,79,.08);
  color: #23333d;
}
:root[data-theme="light"] .premium-stopwatch-card .stopwatch-software-actions button {
  background: #edf3f7; border-color: #bdccd5; color: #263842;
}

/* Tajmer: kućište i flip pločice prate temu, bez promene countdown logike. */
:root[data-theme="light"] .premium-countdown-card {
  background: radial-gradient(circle at 50% -16%,rgba(58,128,168,.09),transparent 40%),
    linear-gradient(152deg,#ffffff,#eef4f7 62%,#e7eef3);
  border-color: #c7d3db;
  box-shadow: inset 0 1px #fff,inset 0 -28px 55px rgba(51,78,96,.05),0 16px 34px rgba(39,60,74,.1);
  color: #1d2a34;
}
:root[data-theme="light"] .premium-flip-tile {
  background: radial-gradient(circle at 10% 5%,rgba(75,159,205,.12),transparent 15%),
    radial-gradient(circle at 90% 5%,rgba(75,159,205,.08),transparent 15%),
    linear-gradient(145deg,#f7fafc,#cdd8df 18%,#edf3f6 50%,#bac8d1 82%,#e5edf2);
  border-color: #9eacb6;
  box-shadow: inset 0 0 0 1px #fff,inset 0 0 0 3px rgba(132,148,159,.35),
    inset 0 0 0 5px #d8e1e7,inset 0 0 0 7px rgba(91,126,148,.12),
    inset 0 -10px 18px rgba(67,87,100,.08),0 12px 22px rgba(50,70,84,.15);
}
:root[data-theme="light"] .premium-flip-half.premium-top { background: linear-gradient(#ffffff,#eef3f6); }
:root[data-theme="light"] .premium-flip-half.premium-bottom { background: linear-gradient(#e7eef2,#d9e3e9); }
:root[data-theme="light"] .premium-flip-digit {
  background: linear-gradient(#15232d,#405766);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 1px 0 #fff;
}
:root[data-theme="light"] .premium-flip-label { color: #637987; }
:root[data-theme="light"] .flip-actions button {
  background: #edf3f7; border-color: #bdcad3; color: #23343e;
}
:root[data-theme="light"] #customSoundName { color: #667b88; }

/* Pametna minuta koristi identične površine i kontrast kao ostali instrumenti. */
:root[data-theme="light"] [data-panel="smart_minute"] .premium-smart-minute-card {
  background: radial-gradient(circle at 50% -20%,rgba(55,128,171,.09),transparent 42%),
    linear-gradient(154deg,#ffffff,#f0f5f8 58%,#e8f0f4);
  border-color: #c7d3db;
  box-shadow: inset 0 1px #fff,inset 0 -18px 38px rgba(55,80,96,.045);
  color: #23333d;
}
:root[data-theme="light"] [data-panel="smart_minute"] .premium-smart-minute-head { border-bottom-color: #d5e0e7; }
:root[data-theme="light"] [data-panel="smart_minute"] .smart-minute-heading > span { color: #4c6372; }
:root[data-theme="light"] [data-panel="smart_minute"] .smart-minute-restart {
  background: linear-gradient(#ffffff,#e9f0f4); border-color: #94b8cc; color: #29404e;
}
:root[data-theme="light"] [data-panel="smart_minute"] .smart-track-shell {
  background: radial-gradient(ellipse at 50% 45%,rgba(38,119,169,.07),transparent 72%),
    linear-gradient(#e8eff3,#f7fafb);
  border-color: #bdcad3;
  box-shadow: inset 0 2px 7px rgba(68,91,105,.16),inset 0 1px #fff;
}
:root[data-theme="light"] [data-panel="smart_minute"] .smart-svg-track-housing { fill: #dce6ec; stroke: #a9bac5; }
:root[data-theme="light"] [data-panel="smart_minute"] .smart-svg-tick { stroke: rgba(50,70,83,.43); }
:root[data-theme="light"] [data-panel="smart_minute"] .smart-svg-tick.is-major { stroke: rgba(34,51,62,.72); }
:root[data-theme="light"] [data-panel="smart_minute"] .smart-svg-tick-label { fill: #607684; }
:root[data-theme="light"] [data-panel="smart_minute"] .smart-svg-tick-label.is-minute { fill: #244b63; }
:root[data-theme="light"] [data-panel="smart_minute"] .smart-svg-boundary-label { stroke: #edf3f6; }
:root[data-theme="light"] [data-panel="smart_minute"] .smart-svg-minute-label { fill: #627784; }
:root[data-theme="light"] [data-panel="smart_minute"] .smart-minute-information {
  background: #f2f7fa; border-color: #d0dce4; color: #607582;
}

@media (max-width: 660px) {
  .matlab-hero { align-items: stretch; flex-direction: column; }
  .hero-actions { justify-content: flex-start; width: 100%; }
  .theme-toggle-label { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  .theme-toggle { transition: none; }
}


/* styles.v18.css */

/* Veći polukružni instrumenti bez promene postojećeg SVG progress podatka. */
.premium-dashboard-gauge-card,
[data-panel="upcoming"] .upcoming-gauge-card {
  min-height: 410px;
}

.premium-dashboard-gauge-shell,
[data-panel="upcoming"] .upcoming-gauge-shell {
  height: 285px;
  max-width: 500px;
}

.premium-dashboard-gauge-card .semi-gauge,
[data-panel="upcoming"] .semi-gauge {
  height: 245px;
}

.premium-dashboard-gauge-card .gauge-value,
[data-panel="upcoming"] .gauge-value {
  font-size: clamp(35px,3.4vw,48px);
  top: 132px;
}

.premium-dashboard-gauge-card .gauge-scale,
[data-panel="upcoming"] .gauge-scale {
  top: 177px;
}

.premium-dashboard-gauge-card .gauge-labels,
[data-panel="upcoming"] .gauge-labels {
  left: 25px;
  right: 25px;
  top: 215px;
}

/* Luk zadržava postojeću accent boju kategorije; marker koristi identičnu boju. */
.premium-dashboard-gauge-card .gauge-progress,
[data-panel="upcoming"] .gauge-progress {
  stroke: var(--accent);
}

.premium-dashboard-gauge-card .dashboard-gauge-marker,
[data-panel="upcoming"] .upcoming-gauge-marker {
  fill: var(--accent);
  filter: drop-shadow(0 0 3px color-mix(in srgb,var(--accent) 62%,transparent));
  stroke: color-mix(in srgb,var(--accent-dark) 72%,#101820);
}

.premium-dashboard-gauge-card.severity-satisfied .gauge-value,
[data-panel="upcoming"] .severity-satisfied .gauge-value {
  top: 197px;
}

@media (max-width: 430px) {
  .premium-dashboard-gauge-card,
  [data-panel="upcoming"] .upcoming-gauge-card {
    min-height: 350px;
  }

  .premium-dashboard-gauge-shell,
  [data-panel="upcoming"] .upcoming-gauge-shell {
    height: 225px;
  }

  .premium-dashboard-gauge-card .semi-gauge,
  [data-panel="upcoming"] .semi-gauge {
    height: 195px;
  }

  .premium-dashboard-gauge-card .gauge-value,
  [data-panel="upcoming"] .gauge-value {
    font-size: clamp(32px,11vw,42px);
    top: 101px;
  }

  .premium-dashboard-gauge-card .gauge-scale,
  [data-panel="upcoming"] .gauge-scale {
    top: 140px;
  }

  .premium-dashboard-gauge-card .gauge-labels,
  [data-panel="upcoming"] .gauge-labels {
    top: 171px;
  }

  .premium-dashboard-gauge-card.severity-satisfied .gauge-value,
  [data-panel="upcoming"] .severity-satisfied .gauge-value {
    top: 151px;
  }
}


/* styles.v19.css */

/* Krajnje vremenske oznake dobijaju čitljiv font i zaseban red ispod luka. */
.premium-dashboard-gauge-card,
[data-panel="upcoming"] .upcoming-gauge-card {
  min-height: 435px;
}

.premium-dashboard-gauge-shell,
[data-panel="upcoming"] .upcoming-gauge-shell {
  height: 310px;
}

.premium-dashboard-gauge-card .gauge-labels,
[data-panel="upcoming"] .gauge-labels {
  color: color-mix(in srgb,var(--theme-text) 70%,var(--theme-muted));
  font-size: clamp(12px,1.05vw,14px);
  font-weight: 680;
  left: 0;
  letter-spacing: .01em;
  line-height: 1.2;
  padding-inline: 7px;
  right: 0;
  top: 246px;
}

@media (max-width: 430px) {
  .premium-dashboard-gauge-card,
  [data-panel="upcoming"] .upcoming-gauge-card {
    min-height: 380px;
  }

  .premium-dashboard-gauge-shell,
  [data-panel="upcoming"] .upcoming-gauge-shell {
    height: 255px;
  }

  .premium-dashboard-gauge-card .gauge-labels,
  [data-panel="upcoming"] .gauge-labels {
    font-size: 12px;
    padding-inline: 3px;
    top: 203px;
  }
}


/* styles.v20.css */

/* Oznake su sada deo SVG instrumenta i tačno prate krajeve putanje x=30 i x=230. */
.gauge-labels-source {
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.premium-dashboard-gauge-card,
[data-panel="upcoming"] .upcoming-gauge-card {
  min-height: 410px;
}

.premium-dashboard-gauge-shell,
[data-panel="upcoming"] .upcoming-gauge-shell {
  height: 285px;
}

.gauge-endpoint-labels {
  color: color-mix(in srgb,var(--theme-text) 78%,var(--theme-muted));
  font-family: inherit;
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 720;
  letter-spacing: .01em;
  pointer-events: none;
}

.gauge-endpoint-labels text {
  fill: currentColor;
  paint-order: stroke;
  stroke: color-mix(in srgb,var(--theme-surface) 92%,transparent);
  stroke-linejoin: round;
  stroke-width: 2px;
}

@media (max-width: 430px) {
  .premium-dashboard-gauge-card,
  [data-panel="upcoming"] .upcoming-gauge-card {
    min-height: 350px;
  }

  .premium-dashboard-gauge-shell,
  [data-panel="upcoming"] .upcoming-gauge-shell {
    height: 225px;
  }

  .gauge-endpoint-labels {
    font-size: 9px;
  }
}


/* styles.v21.css */

/* Čitljive steel-blue cifre tajmera samo u svetloj temi. */
:root[data-theme="light"] .premium-flip-digit {
  -webkit-background-clip: initial;
  -webkit-text-fill-color: #238fc4;
  background: none;
  background-clip: initial;
  color: #238fc4;
  text-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 0 7px rgba(35,143,196,.16);
}

:root[data-theme="light"] .premium-flip-unit:hover .premium-flip-digit,
:root[data-theme="light"] .premium-flip-unit:focus-visible .premium-flip-digit,
:root[data-theme="light"] .premium-flip-unit.is-editing .premium-flip-digit,
:root[data-theme="light"] .premium-countdown-card.is-running .premium-flip-digit {
  -webkit-text-fill-color: #167daf;
  color: #167daf;
}


/* styles.v22.css */

[data-panel="smart_minute"] .smart-svg-playhead-halo,
[data-panel="smart_minute"] .smart-svg-playhead,
[data-panel="smart_minute"] .smart-svg-playhead-core {
  transition: fill 140ms ease, stroke 140ms ease, filter 140ms ease;
}

[data-panel="smart_minute"] .smart-minute-in-red-zone .smart-svg-playhead-halo {
  fill: rgba(238, 85, 98, .18);
  stroke: rgba(255, 123, 133, .42);
}

[data-panel="smart_minute"] .smart-minute-in-red-zone .smart-svg-playhead {
  fill: #e85d68;
  filter: drop-shadow(0 0 4px rgba(232, 93, 104, .72));
  stroke: #ffd1d5;
}

[data-panel="smart_minute"] .smart-minute-in-red-zone .smart-svg-playhead-core {
  fill: #fff1f2;
}

@media (prefers-reduced-motion: reduce) {
  [data-panel="smart_minute"] .smart-svg-playhead-halo,
  [data-panel="smart_minute"] .smart-svg-playhead,
  [data-panel="smart_minute"] .smart-svg-playhead-core {
    transition: none;
  }
}


/* styles.v23.css */


/* styles.v24.css */
:root { --review-compatibility-marker: "styles.v3.css"; }

.review-tab-panel {
  --review-red: #df4850;
  --review-red-soft: #fff0f1;
  --review-green: #1f9d62;
  --review-green-soft: #e9f8f0;
  --review-orange: #ed963d;
  --review-purple: #8a63d2;
  color: var(--ink);
}
.review-segment {
  display: grid;
  gap: 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.review-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.review-heading h2 {
  margin: 2px 0 5px;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
}
.review-heading p { margin: 0; color: var(--muted); }
.review-eyebrow {
  color: var(--accent) !important;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.review-status-summary {
  display: grid;
  min-width: 150px;
  padding: 12px 16px;
  text-align: right;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel-strong);
}
.review-status-summary span {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
}
.review-status-summary strong { margin-top: 3px; font-size: 1.1rem; }
.review-status-summary .has-violation { color: var(--review-red); }
.review-status-summary .clear { color: var(--review-green); }

.review-range {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(150px, 210px) max-content max-content 1fr;
  align-items: end;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--panel-strong);
}
.review-range label, .violation-search { display: grid; gap: 6px; }
.review-range label span, .violation-search span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.review-range input, .violation-search input {
  width: 100%;
  min-height: 46px;
  padding: 9px 12px;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  font: inherit;
  font-weight: 750;
}
.review-range button { min-height: 46px; }
.review-range-message {
  align-self: center;
  margin: 0;
  color: var(--danger);
  font-size: .85rem;
  font-weight: 750;
}
.activity-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 16px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
}
.activity-legend span { display: inline-flex; align-items: center; gap: 7px; }
.activity-legend span::before {
  width: 18px;
  height: 8px;
  border-radius: 3px;
  background: currentColor;
  content: "";
}
.legend-driving { color: #e5999e; }
.legend-work { color: var(--review-orange); }
.legend-availability { color: var(--review-purple); }
.legend-rest { color: #82bae7; }
.legend-violation { color: var(--review-red); }

.daily-review-list { display: grid; gap: 18px; }
.daily-review-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--panel-strong);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 7%, transparent);
}
.daily-review-card.has-violation {
  border-color: color-mix(in srgb, var(--review-red) 48%, var(--border));
}
.daily-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 10px;
}
.daily-card-header h3 { margin: 3px 0 0; font-size: 1.25rem; }
.daily-week {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.day-statuses { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.day-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .71rem;
  font-weight: 950;
  letter-spacing: .08em;
}
.day-status.violation { color: var(--review-red); background: var(--review-red-soft); }
.day-status.clear { color: var(--review-green); background: var(--review-green-soft); }
.day-status.no-record { color: var(--muted); background: var(--panel); }

.daily-totals { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 12px; }
.daily-total {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 7px 8px;
  border-left: 4px solid;
  border-radius: 8px;
  background: var(--panel);
}
.daily-total-icon {
  display: block;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  object-fit: contain;
  background: #fff;
  border-radius: 3px;
}
.daily-total strong { font-size: .95rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.total-driving { border-color: #e5999e; }
.total-work { border-color: var(--review-orange); }
.total-availability { border-color: var(--review-purple); }
.total-rest { border-color: #82bae7; }
.total-unknown { border-color: #e02020; }

.activity-chart-scroll {
  overflow-x: auto;
  margin: 0 12px;
  padding: 4px 0 10px;
  scrollbar-color: var(--accent) var(--panel);
}
.daily-activity-chart {
  display: block;
  width: 100%;
  min-width: 930px;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--panel);
}
.chart-day-band {
  fill: color-mix(in srgb, var(--accent) 23%, var(--panel));
  stroke: color-mix(in srgb, var(--accent) 58%, var(--border));
}
.chart-day-title { fill: var(--ink); font-size: 14px; font-weight: 900; }
.hour-grid {
  stroke: color-mix(in srgb, var(--muted) 24%, transparent);
  stroke-width: 1;
}
.hour-grid.major {
  stroke: color-mix(in srgb, var(--muted) 44%, transparent);
  stroke-width: 1.4;
}
.chart-baseline {
  stroke: color-mix(in srgb, var(--accent) 68%, var(--border));
  stroke-width: 3;
}
.hour-label { fill: var(--ink); font-size: 13px; font-weight: 850; }
.activity-block rect {
  stroke: color-mix(in srgb, var(--panel) 76%, transparent);
  stroke-width: 1;
}
.activity-block.activity-driving rect { fill: #e99ca2; }
.activity-block.activity-work rect { fill: #ed963d; }
.activity-block.activity-availability rect { fill: #8a63d2; }
.activity-block.activity-rest rect { fill: #82bae7; }
.activity-block.activity-unknown rect { fill: #f4d8db; stroke: var(--review-red); }
.segment-duration {
  fill: #13202a;
  font-size: 11px;
  font-weight: 950;
  paint-order: stroke;
  stroke: rgba(255,255,255,.62);
  stroke-width: 2px;
}
.violation-marker line { stroke: var(--review-red); stroke-width: 3; }
.violation-marker circle { fill: var(--review-red); stroke: var(--panel); stroke-width: 3; }
.violation-marker text { fill: var(--review-red); font-size: 13px; font-weight: 950; }

.daily-violation-details {
  display: grid;
  gap: 8px;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--border);
}
.daily-violation-details h4 { margin: 0 0 3px; font-size: 1.125rem; line-height: 1.4; }
.daily-violation-item {
  display: grid;
  grid-template-columns: 2rem minmax(0,1fr) max-content;
  gap: 11px;
  align-items: start;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--review-red) 25%, var(--border));
  border-radius: 13px;
  background: color-mix(in srgb, var(--review-red-soft) 65%, var(--panel));
}
.daily-violation-item > .violation-index {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: #fff;
  border-radius: 50%;
  background: var(--review-red);
  font-size: 1rem;
  line-height: 1;
  font-weight: 950;
}
.daily-violation-item > div {
  display: grid;
  min-width: 0;
  gap: .25rem;
  font-size: 1.125rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.daily-violation-item > div > strong { color: var(--ink); font-size: 1.1875rem; }
.daily-violation-item > div > span,
.daily-violation-item > div > small,
.daily-violation-item > div > p { color: var(--muted); }
.daily-violation-item > div > small { font-size: 1rem; }
.daily-violation-item > div > p { margin: .25rem 0 0; font-size: 1rem; }
.violation-penalty { color: var(--review-red); white-space: nowrap; }
.daily-clear-note {
  margin: 12px 18px 18px;
  padding: 11px 13px;
  color: var(--review-green);
  border: 1px solid color-mix(in srgb, var(--review-green) 35%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--review-green-soft) 72%, var(--panel));
  font-weight: 800;
}
.daily-clear-note span { margin-right: 7px; }

.violation-summary-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(160px,1fr));
  gap: 11px;
}
.violation-summary-grid article {
  display: grid;
  min-height: 105px;
  align-content: center;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel-strong);
}
.violation-summary-grid span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.violation-summary-grid strong { margin: 2px 0; color: var(--ink); font-size: 1.75rem; }
.violation-summary-grid small { color: var(--muted); }
.violation-summary-grid .penalty-total strong { color: var(--review-red); }

.violation-workspace {
  display: grid;
  grid-template-columns: minmax(260px,340px) minmax(0,1fr);
  gap: 14px;
  min-height: 460px;
}
.violation-group-list {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--panel-strong);
}
.violation-group-button {
  display: grid;
  gap: 7px;
  width: 100%;
  padding: 13px;
  color: var(--ink);
  text-align: left;
  border: 1px solid var(--border);
  border-left: 5px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 12px;
  background: var(--panel);
}
.violation-group-button:hover, .violation-group-button.active {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
}
.violation-group-button strong { line-height: 1.2; }
.violation-group-button span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: .77rem;
}
.violation-group-button span b:last-child { color: var(--review-red); }
.violation-main { display: grid; align-content: start; gap: 10px; min-width: 0; }

.violation-table-heading {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-strong);
}
.violation-table-heading h3, .violation-table-heading p { margin: 0; }
.violation-table-heading h3 { font-size: 1.25rem; }
.violation-table-heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 750;
}
.violation-table-heading > div:last-child {
  display: grid;
  min-width: 135px;
  text-align: right;
}
.violation-table-heading span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.violation-table-heading > div:last-child strong { color: var(--review-red); font-size: 1.4rem; }
.violation-table-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 750;
}
.violation-table-scroll {
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
}
.violation-table {
  width: 100%;
  min-width: 1230px;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ink);
  font-size: .78rem;
}
.violation-table th, .violation-table td {
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.violation-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-strong));
  font-size: .75rem;
  font-weight: 950;
  white-space: nowrap;
}
.violation-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--accent) 4%, var(--panel));
}
.violation-table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
}
.money-cell { color: var(--review-red); font-weight: 900; white-space: nowrap; }
.excess-label {
  display: block;
  color: var(--muted);
  font-size: .63rem;
  font-weight: 850;
  text-transform: uppercase;
}
.review-empty {
  display: grid;
  place-items: center;
  min-height: 210px;
  padding: 28px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 16px;
  background: var(--panel-strong);
}
.review-empty strong { color: var(--ink); font-size: 1.1rem; }
.review-empty.compact { min-height: 120px; }

[data-theme="dark"] .review-tab-panel {
  --review-red-soft: #30191d;
  --review-green-soft: #122c22;
}
[data-theme="dark"] .segment-duration {
  fill: #eef7ff;
  stroke: rgba(3,13,22,.78);
}

@media (max-width: 900px) {
  .review-range { grid-template-columns: 1fr 1fr; }
  .review-range-message { grid-column: 1 / -1; }
  .violation-workspace { grid-template-columns: 1fr; }
  .violation-group-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .review-heading, .daily-card-header, .violation-table-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .review-status-summary { text-align: left; }
  .review-range { grid-template-columns: 1fr; }
  .review-range button { width: 100%; }
  .violation-summary-grid { grid-template-columns: 1fr; }
  .violation-group-list { grid-template-columns: 1fr; }
  .daily-card-header { padding-bottom: 8px; }
  .day-statuses { justify-content: flex-start; }
  .daily-totals { gap: 4px; padding: 0 12px 12px; }
  .daily-total { flex: 0 0 auto; flex-direction: column; gap: 4px; padding: 6px 3px; border-left-width: 0; border-top-width: 3px; border-top-style: solid; }
  .daily-total strong { font-size: .875rem; }
  .daily-violation-item { grid-template-columns: 2rem minmax(0,1fr); }
  .violation-penalty { grid-column: 2; }
}


/* styles.v25.css */
/* MATLAB timeline palette is theme-aware and shared by every daily chart. */
.review-tab-panel {
  --timeline-canvas: #ffffff;
  --timeline-frame: #59636f;
  --timeline-grid: #c9d0d8;
  --timeline-grid-major: #9fa9b5;
  --timeline-text: #111827;
  --timeline-muted: #526276;
  --timeline-vehicle: #b8d7ff;
  --timeline-vehicle-edge: #5085c8;
  --timeline-place: #159b7f;
  --timeline-daily-rest: #8a63d2;
  --timeline-daily-rest-reduced: #24923b;
  --timeline-drive-line: #e32626;
  --timeline-work-line: #f09a45;
}
[data-theme="dark"] .review-tab-panel {
  --timeline-canvas: #0b1620;
  --timeline-frame: #52687a;
  --timeline-grid: #263947;
  --timeline-grid-major: #456071;
  --timeline-text: #edf7ff;
  --timeline-muted: #a8bdcc;
  --timeline-vehicle: #163d5d;
  --timeline-vehicle-edge: #5aa9e8;
  --timeline-place: #54d9ba;
  --timeline-daily-rest: #b89af1;
  --timeline-daily-rest-reduced: #68d47d;
  --timeline-drive-line: #ff6d73;
  --timeline-work-line: #ffb66c;
}

.matlab-daily-timeline {
  min-width: 960px;
  border-radius: 14px;
  background: var(--timeline-canvas);
  touch-action: pan-x pan-y;
}
.matlab-chart-frame {
  fill: var(--timeline-canvas);
  stroke: var(--timeline-frame);
  stroke-width: 1.4;
}
.matlab-rest-band { opacity: .96; }
.rest-band-a { stop-color: #eaf7ff; }
.rest-band-b { stop-color: #bdddf3; }
.drive-a { stop-color: #e99198; }
.drive-b { stop-color: #f4acb2; }
.drive-c { stop-color: #fde0e3; }
.work-a { stop-color: #df8836; }
.work-b { stop-color: #f3aa5b; }
.work-c { stop-color: #ffe2bd; }
.avail-a { stop-color: #84d98d; }
.avail-b { stop-color: #a9e8ae; }
.avail-c { stop-color: #ddf8df; }
.rest-a { stop-color: #82b9ef; }
.rest-b { stop-color: #acd0f7; }
.rest-c { stop-color: #e2f0ff; }
.unknown-a { stop-color: #ffffff; }
.unknown-b { stop-color: #fff3f3; }
.unknown-c { stop-color: #ffe1e1; }
.weekly-full-a { stop-color: #f0e7ff; }
.weekly-full-b { stop-color: #8d65d8; }
.weekly-reduced-a { stop-color: #def6df; }
.weekly-reduced-b { stop-color: #5fb867; }

[data-theme="dark"] .rest-band-a { stop-color: #18364e; }
[data-theme="dark"] .rest-band-b { stop-color: #10283b; }
[data-theme="dark"] .drive-a { stop-color: #df7881; }
[data-theme="dark"] .drive-b { stop-color: #b94c57; }
[data-theme="dark"] .drive-c { stop-color: #592b34; }
[data-theme="dark"] .work-a { stop-color: #e49a4f; }
[data-theme="dark"] .work-b { stop-color: #aa652c; }
[data-theme="dark"] .work-c { stop-color: #55371f; }
[data-theme="dark"] .avail-a { stop-color: #6fc77a; }
[data-theme="dark"] .avail-b { stop-color: #3c854c; }
[data-theme="dark"] .avail-c { stop-color: #24482d; }
[data-theme="dark"] .rest-a { stop-color: #70abe4; }
[data-theme="dark"] .rest-b { stop-color: #3e78af; }
[data-theme="dark"] .rest-c { stop-color: #213f5b; }
[data-theme="dark"] .unknown-a { stop-color: #4e2630; }
[data-theme="dark"] .unknown-b { stop-color: #372028; }
[data-theme="dark"] .unknown-c { stop-color: #271b22; }

.matlab-hour-grid {
  stroke: var(--timeline-grid);
  stroke-width: 1;
}
.matlab-hour-grid.major {
  stroke: var(--timeline-grid-major);
  stroke-width: 1.35;
}
.matlab-hour-label {
  fill: var(--timeline-text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 900;
}
.matlab-activity rect {
  stroke: color-mix(in srgb, var(--timeline-canvas) 88%, transparent);
  stroke-width: 1.2;
}
.matlab-activity.activity-unknown rect {
  stroke: var(--review-red);
  stroke-width: 2;
}
.matlab-segment-duration {
  fill: #111827;
  stroke: rgba(255,255,255,.72);
  stroke-width: 2px;
  paint-order: stroke;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 950;
}
.activity-symbol {
  fill: #101418;
  stroke: rgba(255,255,255,.45);
  stroke-width: .8px;
  paint-order: stroke;
  font-family: "Segoe UI Symbol", Georgia, serif;
  font-size: 27px;
  font-weight: 950;
}
.symbol-work, .symbol-availability { font-size: 21px; }
.symbol-rest { font-family: Georgia, serif; font-size: 24px; }

.vehicle-band {
  fill: var(--timeline-vehicle);
  stroke: var(--timeline-vehicle-edge);
  stroke-width: 1;
}
.vehicle-band.warning {
  fill: color-mix(in srgb, var(--review-red) 24%, var(--timeline-canvas));
  stroke: var(--review-red);
}
.vehicle-band.empty {
  fill: color-mix(in srgb, var(--timeline-muted) 9%, var(--timeline-canvas));
  stroke: color-mix(in srgb, var(--timeline-muted) 45%, transparent);
}
.vehicle-label, .vehicle-edge {
  fill: color-mix(in srgb, var(--timeline-text) 75%, #245f94);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 900;
}
.vehicle-label.muted { fill: var(--timeline-muted); }
.vehicle-edge { font-size: 11px; }

.matlab-bracket path {
  fill: none;
  stroke-width: 3;
  stroke-linecap: square;
  stroke-linejoin: round;
}
.matlab-bracket text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 950;
  paint-order: stroke;
  stroke: var(--timeline-canvas);
  stroke-width: 3px;
}
.bracket-work path { stroke: var(--timeline-work-line); }
.bracket-work text { fill: var(--timeline-work-line); }
.bracket-drive path { stroke: var(--timeline-drive-line); }
.bracket-drive text { fill: var(--timeline-drive-line); }
.drive-pause-label {
  fill: var(--timeline-drive-line);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 950;
  paint-order: stroke;
  stroke: var(--timeline-canvas);
  stroke-width: 3px;
}

.daily-rest-line {
  fill: none;
  stroke: var(--timeline-daily-rest);
  stroke-width: 3;
}
.daily-rest-line.dashed { stroke-dasharray: 9 7; }
.daily-rest-arrow { fill: var(--timeline-daily-rest); }
.daily-rest-window.daily-rest-reduced .daily-rest-line { stroke: var(--timeline-daily-rest-reduced); }
.daily-rest-window.daily-rest-reduced .daily-rest-arrow { fill: var(--timeline-daily-rest-reduced); }
.daily-rest-window.daily-rest-reduced .daily-rest-label { fill: var(--timeline-daily-rest-reduced); }
.daily-rest-window.daily-rest-end .daily-rest-label { display: none; }
.daily-rest-label {
  fill: var(--timeline-daily-rest);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: 950;
  paint-order: stroke;
  stroke: var(--timeline-canvas);
  stroke-width: 3px;
}
.weekly-rest-window rect {
  stroke: color-mix(in srgb, var(--timeline-daily-rest) 75%, var(--timeline-frame));
  stroke-width: 1.5;
}
.weekly-rest-label {
  fill: var(--timeline-text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 900;
}

.place-event line {
  stroke: var(--timeline-place);
  stroke-width: 2.4;
}
.place-event ellipse {
  fill: var(--timeline-canvas);
  stroke: var(--timeline-text);
  stroke-width: 1.5;
}
.place-event text {
  fill: var(--timeline-text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 950;
}
.card-event {
  stroke: #101418;
  stroke-width: 1.3;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.28));
}
.card-event.inserted { fill: #13ae48; }
.card-event.removed { fill: #e33232; }

.matlab-violation line {
  stroke: var(--review-red);
  stroke-width: 3;
}
.matlab-violation circle {
  fill: var(--review-red);
  stroke: var(--timeline-canvas);
  stroke-width: 2;
}
.matlab-violation text {
  fill: #fff;
  font-size: 10px;
  font-weight: 950;
}

.timeline-hit { cursor: pointer; }
.timeline-hit:focus { outline: none; }
.timeline-hit:focus > rect,
.timeline-hit:focus > ellipse,
.timeline-hit:focus > polygon,
.timeline-hit:focus > path {
  stroke: var(--accent) !important;
  stroke-width: 3px !important;
}
.timeline-hit:hover { filter: brightness(1.04); }

.timeline-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: min(100%, 930px);
  padding: 10px 2px 2px;
}
.timeline-fact {
  display: inline-grid;
  gap: 2px;
  min-height: 44px;
  padding: 7px 10px;
  color: var(--ink);
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-strong);
}
.timeline-fact:hover, .timeline-fact:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-strong));
}
.timeline-fact span {
  color: var(--muted);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.timeline-fact strong { font-size: .78rem; }
.timeline-detail-live {
  min-height: 38px;
  margin: 6px 2px 2px;
  padding: 8px 11px;
  color: var(--muted);
  border-left: 3px solid var(--accent);
  border-radius: 0 9px 9px 0;
  background: color-mix(in srgb, var(--accent) 6%, var(--panel-strong));
  font-size: .78rem;
  font-weight: 750;
}

@media (max-width: 760px) {
  .activity-chart-scroll {
    margin-inline: 6px;
    padding-bottom: 7px;
    -webkit-overflow-scrolling: touch;
  }
  .matlab-daily-timeline { min-width: 780px; }
  .timeline-facts {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: 2px;
  }
  .timeline-fact { min-width: 0; }
  .timeline-fact strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (max-width: 430px) {
  .matlab-daily-timeline { min-width: 720px; }
  .timeline-facts { grid-template-columns: 1fr; }
}


/* styles.v26.css */
:root { --latest-compatibility-marker: "styles.v3.css"; }


/* styles.v27.css */
:root { --latest-compatibility-marker: "styles.v3.css"; }
.review-tab-panel { --review-availability: #84c98d; }
.legend-availability { color: var(--review-availability); }
.total-availability { border-color: var(--review-availability); }


/* styles.v28.css */
:root { --latest-compatibility-marker: "styles.v3.css"; }

/* The timeline itself contains the useful information; keep the mobile card compact. */
.timeline-facts,
.timeline-detail-live {
  display: none !important;
}

.activity-symbol-image {
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .55));
}

html[data-theme="dark"] .activity-symbol-image {
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .28));
}


/* styles.v29.css */
:root { --latest-compatibility-marker: "styles.v3.css"; }

.card-event-image {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .24));
}


/* styles.v30.css */
:root { --latest-compatibility-marker: "styles.v3.css"; }

.matlab-violation-viewer .review-segment {
  display: grid;
  gap: 12px;
}

.matlab-violation-viewer .review-heading {
  padding: 15px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-strong);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 7%, transparent);
}

.matlab-violation-viewer .review-heading h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
}

.matlab-violation-workspace {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 12px;
  min-height: 590px;
}

.matlab-violation-sidebar,
.matlab-violation-viewer .violation-main {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-strong);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 6%, transparent);
}

.matlab-violation-sidebar {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
  gap: 10px;
}

.matlab-violation-sidebar .violation-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.matlab-violation-sidebar .violation-summary-grid article {
  min-height: 80px;
  padding: 11px 12px;
  border-radius: 9px;
  box-shadow: none;
}

.matlab-violation-sidebar .violation-summary-grid article:last-child {
  grid-column: 1 / -1;
}

.matlab-violation-sidebar .violation-summary-grid strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.65rem;
}

.matlab-violation-sidebar .violation-summary-grid small {
  display: none;
}

.violation-group-search,
.matlab-violation-viewer .violation-search input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel);
  font: inherit;
  font-weight: 750;
}

.matlab-violation-sidebar .violation-group-list {
  min-height: 0;
  max-height: 620px;
  overflow: auto;
  padding: 0 2px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.matlab-violation-sidebar .violation-group-button {
  padding: 13px 12px;
  border-radius: 9px;
}

.matlab-violation-viewer .violation-main {
  display: grid;
  align-content: start;
  gap: 10px;
}

.matlab-violation-viewer .violation-main.matlab-table-ready {
  grid-template-columns: minmax(260px, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.matlab-table-ready #violationTable {
  display: contents;
}

.matlab-violation-viewer .violation-table-heading {
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: 86px;
  padding: 13px 15px;
  border-radius: 9px;
}

.matlab-violation-viewer .violation-table-heading h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
}

.matlab-violation-viewer .violation-table-heading > div:last-child {
  min-width: 170px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel);
}

.matlab-violation-viewer .violation-table-heading > div:last-child strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.65rem;
}

.matlab-violation-viewer .violation-search {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
}

.matlab-violation-viewer .violation-search > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.matlab-violation-viewer .violation-table-meta {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-content: end;
  min-width: 100px;
  font-weight: 900;
  white-space: nowrap;
}

.matlab-violation-viewer .violation-table-meta span:last-child {
  display: none;
}

.matlab-violation-viewer .violation-table-scroll {
  grid-column: 1 / -1;
  grid-row: 3;
  min-height: 430px;
  max-height: 68vh;
  border-radius: 9px;
}

.matlab-violation-viewer .violation-table {
  min-width: 1290px;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

.matlab-violation-viewer .violation-table th,
.matlab-violation-viewer .violation-table td {
  padding: 10px 11px;
  vertical-align: middle;
  white-space: nowrap;
}

.matlab-violation-viewer .violation-table th {
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-strong));
}

.matlab-violation-viewer .violation-table th:first-child,
.matlab-violation-viewer .violation-table td:first-child {
  width: 42px;
  text-align: center;
}

.vehicle-cell {
  min-width: 145px;
}

.violation-date-link {
  padding: 0;
  color: var(--accent);
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 900;
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 1050px) {
  .matlab-violation-workspace {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .matlab-violation-sidebar {
    grid-template-columns: minmax(260px, 340px) minmax(220px, 1fr);
    grid-template-rows: auto auto;
  }

  .matlab-violation-sidebar .violation-summary-grid {
    grid-row: 1 / 3;
  }

  .matlab-violation-sidebar .violation-group-list {
    display: flex;
    max-height: none;
    overflow-x: auto;
  }

  .matlab-violation-sidebar .violation-group-button {
    min-width: 250px;
  }
}

@media (max-width: 680px) {
  .matlab-violation-viewer .review-heading,
  .matlab-violation-sidebar,
  .matlab-violation-viewer .violation-main {
    padding: 10px;
  }

  .matlab-violation-sidebar {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .matlab-violation-sidebar .violation-summary-grid {
    grid-row: auto;
  }

  .matlab-violation-viewer .violation-main.matlab-table-ready {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto minmax(0, 1fr);
  }

  .matlab-violation-viewer .violation-table-heading {
    grid-column: 1;
    grid-row: 1;
  }

  .matlab-violation-viewer .violation-search {
    grid-column: 1;
    grid-row: 2;
  }

  .matlab-violation-viewer .violation-table-meta {
    grid-column: 1;
    grid-row: 3;
    justify-content: flex-start;
  }

  .matlab-violation-viewer .violation-table-scroll {
    grid-column: 1;
    grid-row: 4;
    min-height: 380px;
  }
}


/* styles.v31.css */
:root { --latest-compatibility-marker: "styles.v3.css"; }

body.navigation-open,
body.analysis-is-loading {
  overflow: hidden;
}

.menu-toggle {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 999px;
  background: var(--theme-surface-raised, var(--card));
  color: var(--theme-text, var(--text));
  box-shadow: var(--theme-shadow, 0 8px 24px rgba(15, 23, 42, .08));
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

.menu-toggle:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.menu-toggle-icon {
  width: 22px;
  display: grid;
  gap: 4px;
}

.menu-toggle-icon i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.navigation-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1190;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(2, 8, 18, .56);
  backdrop-filter: blur(3px);
  opacity: 0;
  cursor: default;
  transition: opacity .24s ease;
}

.navigation-backdrop[hidden] {
  display: none;
}

body.navigation-open .navigation-backdrop {
  opacity: 1;
}

.navigation-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1200;
  width: min(360px, 88vw);
  padding: 22px 18px max(24px, env(safe-area-inset-bottom));
  border-right: 1px solid var(--theme-border, var(--border));
  background: var(--theme-surface, var(--card));
  color: var(--theme-text, var(--text));
  box-shadow: 22px 0 60px rgba(2, 8, 18, .28);
  overflow-y: auto;
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform .26s cubic-bezier(.22, 1, .36, 1), visibility .26s;
}

body.navigation-open .navigation-drawer {
  transform: translateX(0);
  visibility: visible;
}

.navigation-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 2px 17px;
  border-bottom: 1px solid var(--theme-border, var(--border));
}

.navigation-eyebrow,
.download-kicker,
.analysis-loading-kicker {
  display: block;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .13em;
}

.navigation-drawer-header h2,
.download-info-heading h2,
.analysis-loading-card h2 {
  margin: 4px 0 0;
  color: var(--theme-text, var(--text));
}

.navigation-close {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 50%;
  background: var(--theme-field, transparent);
  color: var(--theme-text, var(--text));
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
}

.navigation-current-label {
  margin: 16px 2px 10px;
  color: var(--theme-muted, var(--muted));
  font-size: .83rem;
}

.navigation-current-label strong {
  color: var(--theme-text, var(--text));
}

.navigation-drawer .side-navigation-list {
  position: static;
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.navigation-drawer .side-navigation-list .tab {
  position: relative;
  width: 100%;
  min-height: 50px;
  justify-content: flex-start;
  padding: 11px 16px 11px 20px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--theme-muted, var(--muted));
  text-align: left;
  box-shadow: none;
}

.navigation-drawer .side-navigation-list .tab::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 5px;
  width: 4px;
  border-radius: 4px;
  background: transparent;
}

.navigation-drawer .side-navigation-list .tab:hover {
  border-color: var(--theme-border, var(--border));
  background: var(--theme-field, rgba(125, 160, 190, .08));
  color: var(--theme-text, var(--text));
}

.navigation-drawer .side-navigation-list .tab.active {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--theme-border, var(--border)));
  background: var(--theme-soft-blue, rgba(15, 139, 214, .12));
  color: var(--accent);
  box-shadow: none;
}

.navigation-drawer .side-navigation-list .tab.active::before {
  background: var(--accent);
}

.download-info-card {
  margin-top: 18px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 22px;
  background: var(--theme-surface, var(--card));
  color: var(--theme-text, var(--text));
  box-shadow: var(--theme-shadow, 0 16px 38px rgba(15, 23, 42, .08));
}

.download-info-card[hidden] {
  display: none;
}

.download-info-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.download-limit-badge {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--theme-border, var(--border)));
  border-radius: 999px;
  background: var(--theme-soft-blue, rgba(15, 139, 214, .1));
  color: var(--accent);
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

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

.download-info-item {
  min-width: 0;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 16px;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 16px;
  background: var(--theme-field, var(--theme-surface-raised, var(--card)));
}

.download-info-item > span {
  color: var(--theme-muted, var(--muted));
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.download-info-item strong {
  color: var(--theme-text, var(--text));
  font-size: clamp(1.02rem, 2vw, 1.28rem);
  line-height: 1.25;
}

.download-info-item small {
  color: var(--theme-muted, var(--muted));
  font-weight: 750;
}

.download-status-ok { border-color: rgba(29, 174, 112, .5); }
.download-status-ok strong { color: #21b77c; }
.download-status-due { border-color: rgba(241, 171, 55, .62); }
.download-status-due strong { color: #dc941b; }
.download-status-overdue { border-color: rgba(225, 79, 90, .62); }
.download-status-overdue strong { color: #e14f5a; }

.download-info-source,
.download-info-empty {
  margin: 14px 2px 0;
  color: var(--theme-muted, var(--muted));
  font-size: .86rem;
  line-height: 1.5;
}

.analysis-loading {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: color-mix(in srgb, var(--background) 72%, transparent);
  backdrop-filter: blur(9px);
}

.analysis-loading[hidden] {
  display: none;
}

.analysis-loading-card {
  width: min(440px, 100%);
  padding: 30px;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 24px;
  background: var(--theme-surface-raised, var(--card));
  color: var(--theme-text, var(--text));
  text-align: center;
  box-shadow: 0 28px 80px rgba(2, 8, 18, .3);
}

.loading-tachograph {
  position: relative;
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  border: 5px solid var(--theme-border, var(--border));
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: analysis-spin 1s linear infinite;
}

.loading-tachograph span {
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 60%, transparent);
}

.analysis-loading-card p {
  min-height: 1.5em;
  margin: 9px 0 18px;
  color: var(--theme-muted, var(--muted));
}

.analysis-progress-track {
  width: 100%;
  height: 11px;
  overflow: hidden;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 999px;
  background: var(--theme-field, rgba(125, 160, 190, .12));
}

.analysis-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #61c8ff);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 48%, transparent);
  transition: width .28s ease;
}

#analysisProgressValue {
  display: block;
  margin-top: 9px;
  color: var(--accent);
  font-size: .9rem;
}

@keyframes analysis-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 780px) {
  .menu-toggle {
    min-height: 44px;
    padding: 0 14px;
  }

  .download-info-grid {
    grid-template-columns: 1fr;
  }

  .download-info-item {
    min-height: 88px;
  }
}

@media (max-width: 520px) {
  .navigation-drawer {
    width: min(330px, 92vw);
    padding-inline: 14px;
  }

  .download-info-heading {
    align-items: flex-start;
  }

  .download-info-heading h2 {
    font-size: 1.3rem;
  }

  .download-limit-badge {
    padding: 7px 9px;
    font-size: .67rem;
  }

  .analysis-loading-card {
    padding: 25px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navigation-drawer,
  .navigation-backdrop,
  .analysis-progress-track span {
    transition: none;
  }

  .loading-tachograph {
    animation-duration: 2.4s;
  }
}


/* styles.v32.css */
:root { --latest-compatibility-marker: "styles.v3.css"; }

#results.transport-planner-mode > :not(#panels) {
  display: none !important;
}

.transport-planner-panel {
  color: var(--theme-text, var(--text));
}

.transport-planner-panel.active {
  display: grid;
  gap: 18px;
}

.transport-planner-hero {
  position: relative;
  min-height: 170px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--theme-border, var(--border)));
  border-radius: 24px;
  background:
    radial-gradient(circle at 84% 20%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--theme-surface-raised, var(--card)) 88%, var(--accent)), var(--theme-surface, var(--card)));
  box-shadow: var(--theme-shadow, 0 18px 45px rgba(15, 23, 42, .1));
}

.transport-planner-hero h2 {
  margin: 4px 0 7px;
  color: var(--theme-text, var(--text));
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1;
}

.transport-planner-hero p:not(.transport-eyebrow) {
  max-width: 720px;
  margin: 0;
  color: var(--theme-muted, var(--muted));
  font-size: clamp(.95rem, 1.7vw, 1.1rem);
  line-height: 1.55;
}

.transport-eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: .75rem;
  font-weight: 950;
  letter-spacing: .14em;
}

.transport-hero-mark {
  position: relative;
  width: 116px;
  height: 116px;
  flex: 0 0 116px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--theme-border, var(--border)));
  border-radius: 28px;
  background: color-mix(in srgb, var(--accent) 11%, var(--theme-field, transparent));
  transform: rotate(8deg);
}

.transport-hero-mark::before,
.transport-hero-mark::after,
.transport-hero-mark span {
  content: "";
  position: absolute;
  border-radius: 999px;
}

.transport-hero-mark::before {
  inset: 25px;
  border: 4px solid var(--accent);
}

.transport-hero-mark::after {
  width: 56px;
  height: 4px;
  top: 57px;
  left: 30px;
  background: var(--accent);
  transform: rotate(-32deg);
}

.transport-hero-mark span {
  width: 13px;
  height: 13px;
  top: 52px;
  left: 51px;
  background: var(--theme-surface-raised, var(--card));
  border: 3px solid var(--accent);
}

.transport-workspace {
  overflow: hidden;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 24px;
  background: var(--theme-surface, var(--card));
  box-shadow: var(--theme-shadow, 0 18px 45px rgba(15, 23, 42, .08));
}

.transport-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px clamp(18px, 3vw, 28px);
  border-bottom: 1px solid var(--theme-border, var(--border));
  background: var(--theme-surface-raised, var(--card));
}

.transport-section-heading > div {
  display: flex;
  align-items: center;
  gap: 13px;
}

.transport-section-heading h3,
.transport-column-heading h3,
.transport-map-heading h3 {
  margin: 0 0 4px;
  color: var(--theme-text, var(--text));
}

.transport-section-heading p,
.transport-column-heading p,
.transport-map-heading p {
  margin: 0;
  color: var(--theme-muted, var(--muted));
  line-height: 1.5;
}

.transport-step-badge {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 13px;
  background: var(--theme-soft-blue, rgba(15, 139, 214, .12));
  color: var(--accent);
  font-size: 1.35rem;
  font-weight: 950;
}

.transport-place-limit {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 999px;
  color: var(--theme-muted, var(--muted));
  font-size: .72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.transport-meta-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(170px, .75fr) minmax(180px, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 18px clamp(18px, 3vw, 28px) 0;
}

.transport-meta-grid label {
  display: grid;
  gap: 7px;
}

.transport-meta-grid label > span {
  color: var(--theme-muted, var(--muted));
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.transport-meta-grid input,
.transport-city-table input,
.transport-activity-item select,
.transport-activity-item input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 11px;
  background: var(--theme-field, var(--theme-surface-raised, var(--card)));
  color: var(--theme-text, var(--text));
  font: inherit;
  outline: none;
}

.transport-meta-grid input {
  min-height: 47px;
  padding: 0 13px;
}

.transport-meta-grid input:focus,
.transport-city-table input:focus,
.transport-activity-item select:focus,
.transport-activity-item input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.transport-autosave {
  min-height: 47px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid rgba(29, 174, 112, .38);
  border-radius: 12px;
  background: color-mix(in srgb, #1dae70 10%, var(--theme-field, transparent));
  color: #1aa56b;
  font-size: .77rem;
  font-weight: 850;
  text-align: center;
}

.transport-autosave i {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #1dae70;
  color: #fff;
  font-style: normal;
}

.transport-layout {
  display: grid;
  grid-template-columns: minmax(390px, 480px) minmax(0, 1fr);
  gap: 18px;
  padding: 18px clamp(18px, 3vw, 28px);
}

.transport-editor,
.transport-map-panel {
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 18px;
  background: var(--theme-field-alt, var(--theme-field, var(--card)));
}

.transport-column-heading,
.transport-map-heading {
  margin-bottom: 13px;
}

.transport-city-table-wrap {
  overflow-x: auto;
}

.transport-city-table {
  width: 100%;
  border-collapse: collapse;
}

.transport-city-table th {
  padding: 8px 5px;
  color: var(--theme-muted, var(--muted));
  font-size: .68rem;
  letter-spacing: .05em;
  text-align: left;
  text-transform: uppercase;
}

.transport-city-table td {
  padding: 7px 4px;
  border-top: 1px solid var(--theme-border, var(--border));
}

.transport-city-table .transport-city-index {
  width: 30px;
  color: var(--theme-muted, var(--muted));
  font-size: .78rem;
  text-align: center;
}

.transport-city-table input {
  height: 42px;
  padding: 0 11px;
}

.transport-city-actions {
  width: 108px;
  white-space: nowrap;
}

.transport-city-actions button,
.transport-remove-activity {
  width: 31px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 9px;
  background: var(--theme-surface-raised, var(--card));
  color: var(--theme-muted, var(--muted));
  font-weight: 900;
  cursor: pointer;
}

.transport-city-actions button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.transport-city-actions button.remove,
.transport-remove-activity {
  color: #df4b59;
}

.transport-activity-detail > td {
  padding: 0 4px 10px;
  border-top: 0;
  background: color-mix(in srgb, var(--theme-field, transparent) 65%, transparent);
}

.transport-activity-editor {
  margin-left: 3px;
  padding: 8px 9px 4px;
  border-left: 3px solid color-mix(in srgb, var(--accent) 45%, var(--theme-border, var(--border)));
}

.transport-activity-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.transport-activity-editor-head strong {
  color: var(--theme-muted, var(--muted));
  font-size: .66rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.transport-activity-editor-head button {
  padding: 5px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: .7rem;
  font-weight: 900;
  cursor: pointer;
}

.transport-activity-list {
  display: grid;
  gap: 6px;
}

.transport-activity-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px 31px;
  gap: 6px;
}

.transport-activity-item select,
.transport-activity-item input {
  height: 38px;
  padding: 0 8px;
  font-size: .78rem;
}

.transport-activity-item input.is-invalid {
  border-color: #df4b59;
  background: color-mix(in srgb, #df4b59 9%, var(--theme-field, var(--card)));
}

.transport-no-activities {
  padding: 4px 0;
  color: var(--theme-muted, var(--muted));
  font-size: .72rem;
}

.transport-editor-actions {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 9px;
  margin-top: 14px;
}

.transport-editor-actions button,
.transport-task-action button {
  min-height: 46px;
  padding: 10px 15px;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 12px;
  background: var(--theme-surface-raised, var(--card));
  color: var(--theme-text, var(--text));
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.transport-editor-actions .transport-primary,
.transport-task-action button {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 9px 22px color-mix(in srgb, var(--accent) 25%, transparent);
}

.transport-editor-actions button:disabled,
.transport-task-action button:disabled {
  opacity: .65;
  cursor: wait;
}

.transport-policy-note {
  margin-top: 13px;
  padding: 12px 13px;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 12px;
  background: var(--theme-soft-blue, rgba(15, 139, 214, .08));
  color: var(--theme-muted, var(--muted));
  font-size: .75rem;
  line-height: 1.55;
}

.transport-policy-note strong {
  color: var(--theme-text, var(--text));
}

.transport-map-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 13px;
}

.transport-map-heading > span {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid rgba(29, 174, 112, .38);
  border-radius: 999px;
  background: color-mix(in srgb, #1dae70 9%, var(--theme-field, transparent));
  color: #1aa56b;
  font-size: .68rem;
  font-weight: 900;
}

.transport-map-wrap {
  position: relative;
  height: 450px;
  overflow: hidden;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 15px;
  background: #dfeaf3;
}

#transportMap {
  width: 100%;
  height: 100%;
  background: #dfeaf3;
}

#transportMap .leaflet-tile {
  width: 256px !important;
  height: 256px !important;
  max-width: none !important;
  max-height: none !important;
}

#transportMap .leaflet-overlay-pane svg {
  max-width: none !important;
  max-height: none !important;
}

#transportMapEmpty {
  position: absolute;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 32px;
  background: linear-gradient(145deg, rgba(237, 244, 250, .95), rgba(220, 234, 246, .95));
  color: #526c87;
  text-align: center;
  line-height: 1.55;
}

#transportMapEmpty[hidden] {
  display: none;
}

.transport-message {
  margin: 0 clamp(18px, 3vw, 28px) 18px;
  padding: 13px 15px;
  border: 1px solid transparent;
  border-radius: 13px;
  font-size: .86rem;
  line-height: 1.5;
}

.transport-message[hidden] { display: none; }
.transport-message.info,
.transport-message.loading { border-color: rgba(15, 139, 214, .3); background: color-mix(in srgb, var(--accent) 9%, var(--theme-field, transparent)); color: var(--accent); }
.transport-message.success { border-color: rgba(29, 174, 112, .38); background: color-mix(in srgb, #1dae70 9%, var(--theme-field, transparent)); color: #1aa56b; }
.transport-message.error { border-color: rgba(223, 75, 89, .4); background: color-mix(in srgb, #df4b59 9%, var(--theme-field, transparent)); color: #df4b59; }

.transport-route-result,
.transport-task-result {
  padding: 20px clamp(18px, 3vw, 28px) 26px;
  border-top: 1px solid var(--theme-border, var(--border));
}

.transport-route-result[hidden],
.transport-task-result[hidden] { display: none; }

.transport-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin-bottom: 15px;
}

.transport-summary article {
  min-width: 0;
  padding: 15px 17px;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 15px;
  background: var(--theme-field, var(--theme-surface-raised, var(--card)));
}

.transport-summary span,
.transport-task-result-heading > div > span {
  display: block;
  color: var(--theme-muted, var(--muted));
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.transport-summary strong {
  display: block;
  margin-top: 5px;
  color: var(--theme-text, var(--text));
  font-size: clamp(1.35rem, 3vw, 1.8rem);
}

.transport-summary small {
  display: block;
  margin-top: 4px;
  color: var(--theme-muted, var(--muted));
  font-size: .7rem;
}

.transport-route-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 14px;
}

.transport-route-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: .84rem;
}

.transport-route-table th {
  padding: 11px;
  background: var(--theme-field-alt, var(--theme-field, var(--card)));
  color: var(--theme-muted, var(--muted));
  font-size: .7rem;
  text-align: left;
  text-transform: uppercase;
}

.transport-route-table td {
  padding: 12px 11px;
  border-top: 1px solid var(--theme-border, var(--border));
  background: var(--theme-surface-raised, var(--card));
}

.transport-route-table td:nth-child(2) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.transport-route-table td:nth-child(2) small {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(245, 166, 35, .14);
  color: #d48a10;
  font-size: .64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.transport-route-table tr.transport-border-leg td {
  background: color-mix(in srgb, #f5a623 6%, var(--theme-surface-raised, var(--card)));
}

.transport-route-time strong,
.transport-route-time small {
  display: block;
}

.transport-route-time small {
  margin-top: 3px;
  color: var(--theme-muted, var(--muted));
  font-size: .68rem;
}

.transport-route-notices {
  margin: 13px 0 0;
  padding: 11px 13px 11px 30px;
  border: 1px solid rgba(245, 166, 35, .35);
  border-radius: 12px;
  background: color-mix(in srgb, #f5a623 8%, var(--theme-field, transparent));
  color: #b8770c;
  font-size: .78rem;
  line-height: 1.5;
}

.transport-task-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 15px;
  padding: 15px;
  border: 1px solid rgba(29, 174, 112, .35);
  border-radius: 15px;
  background: color-mix(in srgb, #1dae70 8%, var(--theme-field, transparent));
}

.transport-task-action strong,
.transport-task-action span {
  display: block;
}

.transport-task-action span {
  margin-top: 3px;
  color: var(--theme-muted, var(--muted));
  font-size: .8rem;
}

.transport-task-action button {
  flex: 0 0 auto;
}

.transport-task-result {
  background: color-mix(in srgb, var(--accent) 3%, var(--theme-surface, var(--card)));
}

.transport-task-result-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.transport-task-result-heading h3 {
  margin: 4px 0 3px;
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.transport-task-result-heading p {
  margin: 0;
  color: var(--theme-muted, var(--muted));
}

.transport-task-result-heading > strong {
  padding: 12px 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--theme-border, var(--border)));
  border-radius: 14px;
  color: var(--accent);
  font-size: 1.5rem;
}

.transport-itinerary {
  display: grid;
  gap: 8px;
}

.transport-itinerary-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--theme-border, var(--border));
  border-left: 4px solid var(--accent);
  border-radius: 13px;
  background: var(--theme-surface-raised, var(--card));
}

.transport-itinerary-activity {
  border-left-color: #ee9a2c;
}

.transport-itinerary-number {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--theme-field, rgba(125, 160, 190, .1));
  color: var(--theme-muted, var(--muted));
  font-size: .75rem;
  font-weight: 900;
}

.transport-itinerary-row div small,
.transport-itinerary-row div strong,
.transport-itinerary-row div span {
  display: block;
}

.transport-itinerary-row div small {
  color: var(--accent);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .06em;
}

.transport-itinerary-activity div small {
  color: #df8b1d;
}

.transport-itinerary-row div strong {
  margin-top: 2px;
}

.transport-itinerary-row div span {
  margin-top: 2px;
  color: var(--theme-muted, var(--muted));
  font-size: .75rem;
}

.transport-itinerary-row time {
  color: var(--theme-text, var(--text));
  font-size: 1.1rem;
  font-weight: 950;
}

@media (max-width: 1180px) {
  .transport-meta-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  .transport-autosave {
    grid-column: 1 / -1;
    justify-self: start;
    min-height: 38px;
  }

  .transport-layout {
    grid-template-columns: 420px minmax(0, 1fr);
  }

  .transport-map-wrap {
    height: 410px;
  }
}

@media (max-width: 960px) {
  .transport-layout {
    grid-template-columns: 1fr;
  }

  .transport-map-wrap {
    height: 390px;
  }
}

@media (max-width: 700px) {
  .transport-hero-mark {
    display: none;
  }

  .transport-section-heading {
    align-items: flex-start;
  }

  .transport-section-heading > div {
    align-items: flex-start;
  }

  .transport-place-limit {
    display: none;
  }

  .transport-meta-grid {
    grid-template-columns: 1fr;
  }

  .transport-autosave {
    grid-column: auto;
    justify-self: stretch;
  }

  .transport-summary {
    grid-template-columns: 1fr;
  }

  .transport-task-action {
    align-items: stretch;
    flex-direction: column;
  }

  .transport-task-action button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .transport-planner-hero {
    min-height: auto;
    padding: 22px 18px;
    border-radius: 18px;
  }

  .transport-planner-hero h2 {
    font-size: 2rem;
  }

  .transport-section-heading,
  .transport-meta-grid,
  .transport-layout {
    padding-left: 11px;
    padding-right: 11px;
  }

  .transport-editor,
  .transport-map-panel {
    padding: 12px;
    border-radius: 14px;
  }

  .transport-map-heading {
    display: block;
  }

  .transport-map-heading > span {
    display: inline-block;
    margin-top: 9px;
  }

  .transport-map-wrap {
    height: 300px;
  }

  .transport-city-actions {
    width: 86px;
  }

  .transport-city-actions button {
    width: 25px;
  }

  .transport-activity-item {
    grid-template-columns: minmax(0, 1fr) 82px 29px;
  }

  .transport-editor-actions {
    grid-template-columns: 1fr;
  }

  .transport-route-result,
  .transport-task-result {
    padding: 15px 11px 20px;
  }

  .transport-message {
    margin-inline: 11px;
  }

  .transport-task-result-heading {
    align-items: flex-start;
  }

  .transport-task-result-heading > strong {
    padding: 9px 11px;
    font-size: 1.1rem;
  }

  .transport-itinerary-row {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px;
  }
}


/* styles.v33.css */
/* Nasleđuje "styles.v3.css" kroz postojeći lanac tema. */

.transport-planner-panel .transport-editor-actions #calculateTransportRoute,
.transport-planner-panel .transport-editor-actions #calculateTransportRoute.transport-primary {
  border-color: #0879bd !important;
  background: linear-gradient(135deg, #139bd8 0%, #0879bd 55%, #075f9c 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(8, 121, 189, .28) !important;
  font-weight: 850;
}

.transport-planner-panel .transport-editor-actions #calculateTransportRoute:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.transport-planner-panel .transport-editor-actions #calculateTransportRoute:disabled {
  border-color: #579bbb !important;
  background: linear-gradient(135deg, #65b6d7, #438eaf) !important;
  color: #f7fcff !important;
  opacity: .78;
}

.transport-planner-panel #buildTransportTask {
  border-color: #0879bd !important;
  background: linear-gradient(135deg, #10a5df, #0877b9) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(8, 121, 189, .28) !important;
  font-weight: 900;
}

.transport-planner-panel #buildTransportTask:disabled {
  opacity: .72;
  cursor: progress;
}

.transport-meta-grid {
  grid-template-columns: minmax(190px, 1.45fr) minmax(145px, .8fr) minmax(130px, .7fr) minmax(170px, 1fr) auto;
}

.transport-border-stop > td {
  padding: 4px 10px 15px !important;
}

.transport-border-card {
  display: grid;
  grid-template-columns: minmax(230px, 1.4fr) minmax(155px, .7fr) minmax(190px, .9fr);
  gap: 14px;
  align-items: end;
  padding: 15px 16px;
  border: 1px solid color-mix(in srgb, var(--accent, #0b8dcc) 48%, var(--border, #b8c8d3));
  border-left: 5px solid var(--accent, #0b8dcc);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel, #fff) 88%, var(--accent, #0b8dcc) 12%);
  box-shadow: 0 10px 24px rgba(8, 76, 112, .09);
}

.transport-border-place {
  display: grid;
  gap: 4px;
}

.transport-border-badge {
  width: max-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent, #0b8dcc);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .11em;
}

.transport-border-place strong {
  font-size: 17px;
}

.transport-border-place small {
  color: var(--muted, #647585);
}

.transport-border-card label {
  display: grid;
  gap: 6px;
  margin: 0;
}

.transport-border-card label > span {
  color: var(--muted, #647585);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.transport-border-card label > strong,
.transport-border-card input {
  min-height: 46px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border, #b8c8d3);
  border-radius: 11px;
  background: var(--input-bg, var(--panel, #fff));
  color: var(--text, #11202e);
  font: inherit;
  font-weight: 800;
}

.organized-schedule-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel, #fff) 90%, var(--accent, #0b8dcc) 10%);
}

.organized-schedule-heading strong {
  color: var(--accent, #0b8dcc);
  letter-spacing: .08em;
}

.organized-schedule-heading span {
  color: var(--muted, #647585);
  font-size: 13px;
}

.organized-schedule-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border, #b8c8d3);
  border-radius: 14px;
}

.organized-schedule-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.organized-schedule-table th,
.organized-schedule-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border, #d2dde5);
  text-align: left;
}

.organized-schedule-table th {
  background: color-mix(in srgb, var(--panel, #fff) 82%, var(--accent, #0b8dcc) 18%);
  color: var(--text, #11202e);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.organized-schedule-table tbody tr:last-child td { border-bottom: 0; }
.organized-schedule-table .organized-drive td:last-child { color: #dc6678; font-weight: 850; }
.organized-schedule-table .organized-work td:last-child { color: #e88d25; font-weight: 850; }
.organized-schedule-table .organized-availability td:last-child { color: #8766db; font-weight: 850; }
.organized-schedule-table .organized-rest td:last-child { color: #388ec2; font-weight: 850; }

@media (max-width: 1050px) {
  .transport-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .transport-meta-grid .transport-autosave { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .transport-meta-grid { grid-template-columns: 1fr; }
  .transport-meta-grid .transport-autosave { grid-column: auto; }
  .transport-border-card { grid-template-columns: 1fr; }
  .transport-border-stop > td { padding-inline: 4px !important; }
  .organized-schedule-heading { align-items: flex-start; flex-direction: column; }
  .transport-task-action { align-items: stretch; }
  .transport-planner-panel #buildTransportTask { width: 100%; }
}


/* styles.v34.css */
/* Nasleđuje "styles.v3.css" kroz postojeći lanac tema. */

.transport-city-table {
  table-layout: fixed;
}

.transport-city-table th:first-child { width: 34px; }
.transport-city-table th:last-child { width: 104px; }

.transport-activity-item {
  grid-template-columns: minmax(0, 1fr) minmax(112px, .48fr) 34px;
  align-items: end;
  width: 100%;
}

.transport-activity-field {
  display: grid;
  min-width: 0;
  gap: 5px;
  margin: 0;
}

.transport-activity-field > span {
  color: var(--theme-muted, var(--muted));
  font-size: .63rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.transport-activity-item .transport-activity-field select,
.transport-activity-item .transport-activity-field input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.transport-remove-activity {
  margin-bottom: 0;
}

.transport-border-card {
  grid-template-columns: minmax(180px, 1.25fr) minmax(125px, .65fr) minmax(145px, .8fr);
  border-color: color-mix(in srgb, #f2b300 70%, var(--theme-border, var(--border)));
  border-left-color: #f2b300;
  background: color-mix(in srgb, var(--theme-surface-raised, var(--card)) 82%, #ffd95a 18%);
  box-shadow: 0 10px 24px rgba(192, 132, 0, .15);
}

.transport-border-badge {
  background: linear-gradient(135deg, #ffd75a, #f2b300);
  color: #3c2b00;
  box-shadow: 0 4px 12px rgba(190, 129, 0, .22);
}

.transport-border-card input:focus {
  border-color: #d99c00;
  box-shadow: 0 0 0 3px rgba(242, 179, 0, .19);
}

@media (max-width: 720px) {
  .transport-city-table-wrap { overflow-x: hidden; }
  .transport-city-table th:last-child { width: 88px; }
  .transport-city-actions { width: auto; }
  .transport-activity-detail > td { padding-right: 2px; }
  .transport-activity-editor { margin-left: 0; padding-inline: 6px 2px; }
  .transport-activity-item {
    grid-template-columns: minmax(0, 1fr) minmax(100px, .48fr) 32px;
    gap: 7px;
  }
  .transport-border-card { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .transport-city-table th:first-child { width: 28px; }
  .transport-city-table th:last-child { width: 76px; }
  .transport-activity-item {
    grid-template-columns: minmax(0, 1fr) 96px 30px;
    gap: 5px;
  }
  .transport-activity-field > span { font-size: .59rem; }
  .transport-activity-item select,
  .transport-activity-item input { padding-inline: 6px; font-size: .72rem; }
}


/* styles.v35.css */
/* Nasleđuje "styles.v3.css" kroz postojeći lanac tema. */

.transport-border-stop,
.transport-border-stop-guaranteed {
  display: table-row !important;
  visibility: visible !important;
}

.transport-border-stop > td,
.transport-border-stop-guaranteed > td {
  display: table-cell !important;
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
}

.transport-border-duration-field {
  display: grid !important;
  min-width: 0;
  gap: 5px;
}

.transport-border-duration-field input[data-border-availability-duration] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.transport-border-duration-field > small {
  color: var(--theme-muted, var(--muted));
  font-size: .68rem;
  line-height: 1.35;
}

@media (max-width: 720px) {
  .transport-border-stop,
  .transport-border-stop-guaranteed,
  .transport-border-stop > td,
  .transport-border-stop-guaranteed > td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }
}


/* styles.v36.css */
/* Nasleđuje "styles.v3.css" kroz postojeći lanac tema. */

.transport-border-stop > td,
.transport-border-stop-guaranteed > td {
  box-sizing: border-box !important;
  max-width: 100% !important;
  overflow: hidden !important;
  padding-right: 5px !important;
}

.transport-border-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1.15fr) minmax(130px, .85fr);
  gap: 10px 13px;
  padding: 13px 14px;
}

.transport-border-place {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-width: 0;
  align-content: center;
}

.transport-border-card > label {
  grid-column: 2;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.transport-border-card > label > strong,
.transport-border-card > label > input,
.transport-border-card input[data-border-availability-duration] {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.transport-border-card > label > span {
  overflow-wrap: anywhere;
}

@media (max-width: 470px) {
  .transport-border-card {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .transport-border-place,
  .transport-border-card > label {
    grid-column: 1;
    grid-row: auto;
  }
}


/* styles.v37.css */
/* Nasleđuje "styles.v3.css" kroz postojeći lanac tema. */

.transport-border-card[data-multi-border-editor="1"] {
  display: block;
  padding: 10px 11px;
}

.transport-border-compact-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.transport-border-compact-head .transport-border-place {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 9px;
  min-width: 0;
}

.transport-border-compact-head .transport-border-place strong {
  font-size: .95rem;
  line-height: 1.2;
}

.transport-border-compact-head button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid #e2ad18;
  border-radius: 9px;
  background: color-mix(in srgb, #ffd75a 28%, var(--theme-surface-raised, var(--card)));
  color: var(--theme-text, var(--text));
  font-size: .72rem;
  font-weight: 850;
  cursor: pointer;
}

.transport-border-activity-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.transport-border-activity-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 102px 30px;
  gap: 6px;
  align-items: end;
}

.transport-border-activity-item label {
  display: grid;
  min-width: 0;
  gap: 3px;
  margin: 0;
  overflow: visible;
}

.transport-border-activity-item label > span {
  color: var(--theme-muted, var(--muted));
  font-size: .58rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.transport-border-activity-item select,
.transport-border-activity-item input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 35px;
  padding: 0 8px;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 9px;
  background: var(--theme-field, var(--card));
  color: var(--theme-text, var(--text));
  font: inherit;
  font-size: .76rem;
  font-weight: 750;
}

.transport-border-activity-item input.is-invalid {
  border-color: #df4b59;
  background: color-mix(in srgb, #df4b59 9%, var(--theme-field, var(--card)));
}

.transport-border-remove-activity {
  width: 30px;
  height: 35px;
  padding: 0;
  border: 1px solid color-mix(in srgb, #df4b59 45%, var(--theme-border, var(--border)));
  border-radius: 9px;
  background: var(--theme-surface-raised, var(--card));
  color: #df4b59;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
}

.transport-border-remove-activity:disabled {
  opacity: .28;
  cursor: not-allowed;
}

@media (max-width: 470px) {
  .transport-border-compact-head { align-items: flex-start; }
  .transport-border-compact-head .transport-border-place { display: grid; gap: 4px; }
  .transport-border-compact-head button { padding-inline: 7px; font-size: .67rem; }
  .transport-border-activity-item { grid-template-columns: minmax(0, 1fr) 88px 28px; gap: 5px; }
  .transport-border-remove-activity { width: 28px; }
}


/* styles.v38.css */
.transport-stop-recommendations {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--theme-surface-raised, var(--card)) 92%, #1599d8 8%);
}

.transport-stop-heading,
.transport-stop-card-head,
.transport-stop-loading,
.transport-stop-empty,
.transport-stop-error {
  display: flex;
  align-items: center;
  gap: 12px;
}

.transport-stop-heading { justify-content: space-between; }
.transport-stop-heading span {
  color: #168dcc;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .13em;
}
.transport-stop-heading h4 { margin: 3px 0 0; font-size: 1.25rem; }
.transport-stop-heading > small {
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, #168dcc 12%, transparent);
  color: var(--theme-muted, var(--muted));
  font-weight: 800;
}
.transport-stop-notice,
.transport-stop-privacy {
  color: var(--theme-muted, var(--muted));
  font-size: .78rem;
  line-height: 1.45;
}
.transport-stop-notice { margin: 10px 0 14px; }
.transport-stop-privacy { margin: 12px 0 0; }

.transport-stop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.transport-stop-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 14px;
  background: var(--theme-field, var(--card));
}
.transport-stop-number {
  display: grid;
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 50%;
  background: #ffd24c;
  color: #392800;
  font-weight: 950;
}
.transport-stop-card-head div { display: grid; min-width: 0; gap: 2px; }
.transport-stop-card-head strong { font-size: .94rem; }
.transport-stop-card-head small { color: var(--theme-muted, var(--muted)); font-size: .72rem; }
.transport-stop-card ul { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.transport-stop-card li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.transport-stop-card li div { display: grid; min-width: 0; gap: 1px; }
.transport-stop-card li strong { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.transport-stop-card li small,
.transport-stop-card li em { color: var(--theme-muted, var(--muted)); font-size: .68rem; font-style: normal; line-height: 1.35; }
.transport-facility-dot { flex: 0 0 9px; width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: #d99a00; }
.transport-facility-dot.kind-parking { background: #1d88ce; }
.transport-facility-dot.kind-fuel { background: #df4b59; }
.transport-facility-dot.kind-hotel { background: #8e5ad7; }
.transport-stop-none { margin: 12px 0 0; color: var(--theme-muted, var(--muted)); font-size: .75rem; }

.transport-stop-loading,
.transport-stop-empty,
.transport-stop-error { min-height: 58px; }
.transport-stop-loading > span {
  width: 26px;
  height: 26px;
  border: 3px solid color-mix(in srgb, #168dcc 24%, transparent);
  border-top-color: #168dcc;
  border-radius: 50%;
  animation: transport-stop-spin .75s linear infinite;
}
.transport-stop-loading div,
.transport-stop-empty,
.transport-stop-error { display: grid; gap: 3px; }
.transport-stop-loading small,
.transport-stop-empty span,
.transport-stop-error span { color: var(--theme-muted, var(--muted)); font-size: .76rem; }
.transport-stop-error { color: #c03948; }
@keyframes transport-stop-spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .transport-stop-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .transport-stop-recommendations { margin-top: 12px; padding: 12px; border-radius: 14px; }
  .transport-stop-heading { align-items: flex-start; }
  .transport-stop-heading h4 { font-size: 1.04rem; }
  .transport-stop-heading > small { padding: 5px 8px; font-size: .66rem; }
  .transport-stop-card { padding: 11px; }
}


/* styles.v39.css */
/* Kompletan nasleđeni lanac i dalje uključuje "styles.v3.css". */


/* styles.v40.css */
/* Kompletan tematski lanac i dalje uključuje "styles.v3.css". */

.transport-stop-card li small {
  line-height: 1.45;
}

.transport-stop-card li small:first-of-type {
  font-weight: 700;
}


/* styles.v41.css */
.transport-driver-state {
  display: grid;
  gap: .3rem;
  margin: .75rem 0 1rem;
  padding: .85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--border, #b9cad8) 80%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel, #fff) 88%, #168dcc 12%);
}
.transport-driver-state strong { color: var(--text, #152231); }
.transport-driver-state span,
.transport-driver-state small { color: var(--muted, #607487); }
.transport-driver-state small { display: block; }
.transport-driver-state.is-linked { border-left: 5px solid #149b62; }
.transport-driver-state.is-default { border-left: 5px solid #e5a51a; }

@media (max-width: 680px) {
  .transport-driver-state { margin-inline: 0; padding: .75rem; }
}


/* styles.v42.css */
/* Kompletan lanac završava u styles.v3.css; ovaj sloj samo učitava DDD planer. */


/* styles.v43.css */
/* Kompaktna Napredna postavka; teme i postojeći mobilni raspored ostaju nasleđeni. */

.transport-departure-source,
.transport-start-source-label,
.transport-initial-destination-placeholder {
  display: none !important;
}

#transportTaskDateTime {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.transport-task-action > div > span[hidden] {
  display: none !important;
}

/* Rezervni, stariji prikaz granice mora ostati kompaktan dok ga JS editor nadograđuje. */
.transport-border-card:not([data-multi-border-editor="1"]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(104px, 132px) !important;
  grid-template-rows: auto auto !important;
  gap: 5px 9px !important;
  align-items: end !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 9px 10px !important;
  overflow: hidden !important;
}

.transport-border-card:not([data-multi-border-editor="1"]) .transport-border-place {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  min-width: 0 !important;
  align-self: center !important;
}

.transport-border-card:not([data-multi-border-editor="1"]) .transport-border-place strong {
  font-size: .88rem !important;
  line-height: 1.18 !important;
}

.transport-border-card:not([data-multi-border-editor="1"]) > label {
  grid-column: 2 !important;
  grid-row: auto !important;
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
}

.transport-border-card:not([data-multi-border-editor="1"]) > label > span {
  font-size: .56rem !important;
  line-height: 1.1 !important;
}

.transport-border-card:not([data-multi-border-editor="1"]) > label > strong,
.transport-border-card:not([data-multi-border-editor="1"]) > label > input,
.transport-border-card:not([data-multi-border-editor="1"]) input[data-border-availability-duration] {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 132px !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 8px !important;
  border-radius: 9px !important;
  font-size: .74rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.transport-border-card[data-multi-border-editor="1"] {
  max-width: 100% !important;
  overflow: hidden !important;
}

.transport-border-card[data-multi-border-editor="1"] .transport-border-activity-item select,
.transport-border-card[data-multi-border-editor="1"] .transport-border-activity-item input {
  font-size: .74rem !important;
  min-height: 34px !important;
  height: 34px !important;
}

@media (max-width: 470px) {
  .transport-border-card:not([data-multi-border-editor="1"]) {
    grid-template-columns: minmax(0, 1fr) minmax(100px, 122px) !important;
    padding: 8px 9px !important;
  }

  .transport-border-card:not([data-multi-border-editor="1"]) > label > strong,
  .transport-border-card:not([data-multi-border-editor="1"]) > label > input,
  .transport-border-card:not([data-multi-border-editor="1"]) input[data-border-availability-duration] {
    max-width: 122px !important;
    font-size: .7rem !important;
  }
}


/* styles.v44.css */
/* Kompletan lanac teme nastavlja se do styles.v3.css. */


/* styles.v45.css */
.transport-limit-mode-note {
  display: flex;
  align-items: center;
  gap: 9px 14px;
  margin: 0 22px 14px;
  padding: 10px 13px;
  border: 1px solid color-mix(in srgb, #0b8bd6 38%, var(--theme-border, var(--border)));
  border-radius: 12px;
  background: color-mix(in srgb, #0b8bd6 10%, var(--theme-surface-raised, var(--card)));
  color: var(--theme-text, var(--text));
}

.transport-limit-mode-note strong {
  flex: 0 0 auto;
  color: #0b8bd6;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .045em;
}

.transport-limit-mode-note span {
  color: var(--theme-muted, var(--muted));
  font-size: .78rem;
}

.transport-limit-mode-note.is-analysis {
  border-color: color-mix(in srgb, #19a86b 42%, var(--theme-border, var(--border)));
  background: color-mix(in srgb, #19a86b 10%, var(--theme-surface-raised, var(--card)));
}

.transport-limit-mode-note.is-analysis strong { color: #15955e; }

@media (max-width: 620px) {
  .transport-limit-mode-note {
    display: grid;
    gap: 3px;
    margin: 0 10px 10px;
    padding: 9px 10px;
  }
}


/* styles.v46.css */
#transportMap .leaflet-tile-pane,
#transportMap .leaflet-tile-container,
#transportMap .leaflet-tile {
  opacity: 1 !important;
  visibility: visible !important;
}

#transportMap .leaflet-tile {
  display: block !important;
  filter: none !important;
}


/* styles.v47.css */
.reader-note,
.copy-cleanup-hidden,
.driver-line-hidden,
.download-info-moved {
  display: none !important;
}

.matlab-hero > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.matlab-hero h1 {
  max-width: none;
}

.matlab-hero #statusLine.hero-driver-name {
  margin: 8px 0 0;
  color: var(--theme-text, var(--text));
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 900;
  line-height: 1.2;
}

.header-download-info {
  width: min(980px, 100%);
  margin-top: 14px;
}

.header-download-info[hidden] {
  display: none !important;
}

.header-download-info .download-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.header-download-info .download-info-item {
  min-width: 0;
  min-height: 78px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--theme-field, var(--theme-surface-raised, var(--card)));
}

.header-download-info .download-info-item > span {
  font-size: .7rem;
}

.header-download-info .download-info-item strong {
  font-size: clamp(.92rem, 1.5vw, 1.08rem);
}

.header-download-info .download-info-item small {
  font-size: .76rem;
}

@media (max-width: 720px) {
  .header-download-info .download-info-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .header-download-info .download-info-item {
    min-height: 0;
    padding: 9px 11px;
  }
}


/* styles.v48.css */
.daily-date-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin: -5px 0 -5px -8px;
  padding: 5px 8px;
  color: var(--theme-text, var(--ink));
  border: 0;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  font-weight: inherit;
  text-align: left;
  cursor: pointer;
}

.daily-date-button:hover,
.daily-date-button:focus-visible {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: 1px;
}

.daily-date-chevron {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--theme-border, var(--border)));
  border-radius: 50%;
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 160ms ease;
}

.daily-date-button[aria-expanded="true"] .daily-date-chevron {
  transform: rotate(180deg);
}

.daily-activity-table-panel {
  margin: 0 12px 14px;
  overflow: hidden;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 14px;
  background: var(--theme-surface-raised, var(--panel));
}

.daily-activity-table-panel[hidden] {
  display: none !important;
}

.daily-activity-table-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--theme-border, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--theme-surface-raised, var(--panel)));
}

.daily-activity-table-heading > div {
  display: grid;
  gap: 3px;
}

.daily-activity-table-heading > div > span,
.daily-activity-table-heading > span {
  color: var(--theme-muted, var(--muted));
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.daily-activity-table-heading strong {
  color: var(--theme-text, var(--ink));
  font-size: 1rem;
}

.daily-activity-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.daily-activity-table {
  width: 100%;
  min-width: 570px;
  border-collapse: collapse;
  color: var(--theme-text, var(--ink));
  font-size: .9rem;
}

.daily-activity-table th,
.daily-activity-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--theme-border, var(--border));
  text-align: left;
  white-space: nowrap;
}

.daily-activity-table th {
  color: var(--theme-muted, var(--muted));
  background: var(--theme-field-alt, var(--panel));
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.daily-activity-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--theme-muted, var(--muted)) 4%, transparent);
}

.daily-activity-table tbody tr:last-child td {
  border-bottom: 0;
}

.daily-table-activity {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-left: 4px solid currentColor;
  border-radius: 7px;
  font-weight: 850;
}

.daily-table-activity.activity-driving { color: #df6873; background: color-mix(in srgb, #df6873 10%, transparent); }
.daily-table-activity.activity-work { color: #d98413; background: color-mix(in srgb, #d98413 10%, transparent); }
.daily-table-activity.activity-availability { color: #875cda; background: color-mix(in srgb, #875cda 10%, transparent); }
.daily-table-activity.activity-rest { color: #318bc5; background: color-mix(in srgb, #318bc5 10%, transparent); }
.daily-table-activity.activity-unknown { color: #d34754; background: color-mix(in srgb, #d34754 10%, transparent); }

.daily-activity-table-empty {
  padding: 22px !important;
  color: var(--theme-muted, var(--muted));
  text-align: center !important;
}

@media (max-width: 620px) {
  .daily-activity-table-panel { margin-inline: 8px; }
  .daily-activity-table-heading { align-items: flex-start; flex-direction: column; }
  .daily-activity-table th, .daily-activity-table td { padding: 9px 10px; }
}


/* styles.v49.css */
.daily-card-header h3 {
  cursor: pointer;
}

.daily-card-header h3 .daily-date-button {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.daily-review-card.activity-table-open .daily-card-header {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.daily-activity-table-panel {
  position: relative;
  z-index: 1;
}


/* styles.v50.css */
.activity-chart-frame {
  position: relative;
  min-width: 0;
}

.activity-zoom-controls {
  position: absolute;
  z-index: 8;
  top: 13px;
  right: 22px;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--theme-border, var(--border)) 82%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--theme-surface-raised, var(--panel-strong)) 92%, transparent);
  box-shadow: 0 5px 16px color-mix(in srgb, #000 14%, transparent);
  backdrop-filter: blur(6px);
}

.activity-zoom-controls button {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--theme-text, var(--ink));
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 7px;
  background: var(--theme-field, var(--panel));
  font: 900 1rem/1 system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}

.activity-zoom-controls button:hover,
.activity-zoom-controls button:focus-visible {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
  outline: none;
}

.activity-zoom-controls button:active {
  transform: translateY(1px);
}

.activity-zoom-controls button:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.activity-chart-frame .daily-activity-chart {
  transform-origin: left top;
  transition: width 160ms ease, min-width 160ms ease;
}

@media (max-width: 620px) {
  .activity-zoom-controls {
    top: 10px;
    right: 16px;
  }

  .activity-zoom-controls button {
    width: 32px;
    height: 32px;
  }
}


/* styles.v51.css */
.file-source-buttons,
.reader-note,
#readerFileInput,
.legacy-navigation-tabs,
.legacy-navigation-current,
.compact-app-header h1 {
  display: none !important;
}

.matlab-hero.compact-app-header {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: start !important;
  gap: 8px 14px;
  min-height: 0;
  padding: 14px 16px;
}

.compact-app-header > #menuToggle {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}

.compact-app-header > .hero-driver-content {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  text-align: center;
}

.compact-app-header > .header-theme-actions {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.compact-app-header .header-download-info {
  margin-inline: auto;
  text-align: left;
}

.compact-app-header .menu-toggle {
  min-height: 44px;
  padding: 0 14px;
}

.compact-app-header .theme-toggle {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  justify-content: center;
}

.compact-app-header .theme-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.single-file-upload {
  position: relative;
}

.single-file-upload.has-ddd-file #fileLabel {
  padding-right: 48px;
}

.clear-ddd-file {
  position: absolute;
  z-index: 4;
  right: 7px;
  bottom: 6px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: #d43e4d;
  border: 1px solid color-mix(in srgb, #d43e4d 48%, var(--theme-border, var(--border)));
  border-radius: 9px;
  background: var(--theme-field, var(--panel));
  font: 800 1.35rem/1 system-ui, sans-serif;
  cursor: pointer;
}

.clear-ddd-file:hover,
.clear-ddd-file:focus-visible {
  color: #fff;
  border-color: #d43e4d;
  background: #d43e4d;
  outline: none;
}

.clear-ddd-file[hidden] {
  display: none !important;
}

.navigation-eyebrow {
  display: none !important;
}

.structured-navigation {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.structured-menu-group {
  display: grid;
  gap: 5px;
}

.structured-menu-parent-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 5px;
}

.structured-menu-link,
.structured-menu-arrow {
  position: relative;
  min-height: 50px;
  padding: 11px 15px 11px 20px;
  color: var(--theme-muted, var(--muted));
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  font: inherit;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.structured-menu-link::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 5px;
  width: 4px;
  border-radius: 4px;
  background: transparent;
}

.structured-menu-link:hover,
.structured-menu-link:focus-visible,
.structured-menu-arrow:hover,
.structured-menu-arrow:focus-visible {
  color: var(--theme-text, var(--text));
  border-color: var(--theme-border, var(--border));
  background: var(--theme-field, rgba(125, 160, 190, .08));
  outline: none;
}

.structured-menu-link.active,
.structured-menu-group.has-active-child > .structured-menu-parent-row .structured-menu-parent,
.structured-menu-group.has-active-child > .structured-addon-toggle {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--theme-border, var(--border)));
  background: var(--theme-soft-blue, rgba(15, 139, 214, .12));
}

.structured-menu-link.active::before {
  background: var(--accent);
}

.structured-menu-arrow {
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 1.25rem;
  text-align: center;
}

.structured-menu-arrow span:first-child,
.structured-inline-arrow {
  display: inline-block;
  transition: transform 160ms ease;
}

.structured-menu-group.is-open .structured-menu-arrow span:first-child,
.structured-menu-group.is-open .structured-inline-arrow {
  transform: rotate(180deg);
}

.structured-addon-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.structured-submenu {
  display: grid;
  gap: 4px;
  margin-left: 17px;
  padding-left: 10px;
  border-left: 1px solid var(--theme-border, var(--border));
}

.structured-submenu[hidden] {
  display: none !important;
}

.structured-submenu .structured-menu-link {
  min-height: 44px;
  padding-block: 8px;
  font-size: .9rem;
}

@media (max-width: 620px) {
  .matlab-hero.compact-app-header {
    display: grid !important;
    padding: 12px;
  }

  .compact-app-header .menu-toggle > span:last-child {
    display: none;
  }

  .compact-app-header .menu-toggle {
    width: 44px;
    padding: 0 10px;
  }
}


/* styles.v52.css */
.matlab-violation-viewer .violation-table {
  min-width: 1130px;
}

.matlab-violation-viewer .violation-table th:nth-child(2),
.matlab-violation-viewer .violation-table td:nth-child(2) {
  min-width: 172px;
}

.violation-datetime-cell,
.violation-datetime-cell .violation-date-link {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}


/* styles.v53.css */
.matlab-hero.compact-app-header.settings-app-header {
  grid-template-columns: auto auto minmax(280px, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center !important;
  gap: 10px 12px;
}

.settings-app-header > #menuToggle {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

.header-file-upload {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

.header-upload-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 13px;
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: 13px;
  background: var(--accent);
  font: inherit;
  cursor: pointer;
}

.header-upload-button:hover,
.header-upload-button:focus-visible {
  filter: brightness(1.08);
  outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 2px;
}

.header-upload-button > span { font-size: 1.15rem; line-height: 1; }
.header-upload-button strong { white-space: nowrap; }

.header-upload-clear {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: -7px;
  padding: 0;
  color: #d43e4d;
  border: 1px solid color-mix(in srgb, #d43e4d 45%, var(--theme-border, var(--border)));
  border-radius: 50%;
  background: var(--theme-field, var(--panel));
  font: 900 1.15rem/1 system-ui, sans-serif;
  cursor: pointer;
}

.header-upload-clear[hidden] { display: none !important; }

.header-analysis-summary {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  min-width: 0;
  color: var(--theme-text, var(--text));
  font-variant-numeric: tabular-nums;
}

.header-analysis-summary > span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.header-analysis-summary small {
  color: var(--theme-muted, var(--muted));
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .045em;
}

.header-analysis-summary strong { font-size: .93rem; }
.header-zone-text { color: var(--theme-muted, var(--muted)); font-size: .82rem; }
.header-control-text { padding-left: 12px; border-left: 1px solid var(--theme-border, var(--border)); }

.settings-app-header > .header-theme-actions {
  grid-column: 4;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
}

.settings-toggle,
.settings-close {
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  color: var(--theme-text, var(--text));
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 50%;
  background: var(--theme-field-alt, var(--panel));
  font: 800 1.2rem/1 system-ui, sans-serif;
  cursor: pointer;
}

.settings-toggle:hover,
.settings-toggle:focus-visible,
.settings-close:hover,
.settings-close:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--theme-soft-blue, rgba(15, 139, 214, .12));
  outline: none;
}

.settings-app-header > .hero-driver-content {
  display: none;
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
}

.settings-app-header.has-driver-data > .hero-driver-content { display: block; }

.header-native-file-field,
.header-hidden-native-field {
  display: none !important;
}

.header-controls-condensed {
  grid-template-columns: 1fr;
}

.settings-backdrop {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  background: rgba(3, 14, 25, .52);
  backdrop-filter: blur(3px);
}

.settings-backdrop[hidden] { display: none !important; }

.settings-panel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: min(440px, 100%);
  height: 100%;
  padding: 20px;
  overflow: auto;
  color: var(--theme-text, var(--text));
  border-left: 1px solid var(--theme-border, var(--border));
  background: var(--theme-surface, var(--panel));
  box-shadow: -20px 0 50px rgba(2, 12, 24, .22);
}

.settings-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--theme-border, var(--border));
}

.settings-panel h2 { margin: 3px 0 0; font-size: 1.55rem; }
.settings-eyebrow { color: var(--accent); font-size: .72rem; font-weight: 950; letter-spacing: .14em; }
.settings-close { font-size: 1.45rem; }

.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  align-content: start;
  gap: 15px;
  padding-block: 20px;
}

/* Moved form fields must not create implicit columns with their old spans. */
.settings-grid > * { grid-column: 1 / -1; min-width: 0; align-self: start; }
.settings-field { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 7px; }
.settings-field > span {
  color: var(--theme-muted, var(--muted));
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.settings-field select {
  width: 100%;
  min-height: 48px;
  color: var(--theme-text, var(--text));
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 12px;
  background: var(--theme-field, var(--panel));
}

.settings-actions {
  display: grid;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--theme-border, var(--border));
}

.settings-actions .form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.settings-actions .form-actions > * { width: 100%; }
.settings-actions .info-line { grid-column: auto; margin: 0; }
body.settings-open { overflow: hidden; }

@media (max-width: 1120px) {
  .matlab-hero.compact-app-header.settings-app-header {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
  }

  .header-analysis-summary {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    padding-top: 8px;
    border-top: 1px solid var(--theme-border, var(--border));
  }

  .settings-app-header.has-driver-data > .hero-driver-content { grid-row: 3; }
}

@media (max-width: 620px) {
  .matlab-hero.compact-app-header.settings-app-header {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    padding: 10px;
  }

  .header-file-upload { grid-column: 2; }
  .header-upload-button { width: 100%; justify-content: center; }
  .settings-app-header > .header-theme-actions { grid-column: 3; }
  .settings-app-header .install-button { display: none !important; }
  .header-analysis-summary { gap: 7px 11px; }
  .header-analysis-summary small { display: none; }
  .header-control-text { padding-left: 8px; }
  .compact-app-header .theme-toggle { display: none; }
  .settings-panel { padding: 16px; }
}