:root {
      --forest: #073b32;
      --forest-2: #0d4d40;
      --leaf: #69b445;
      --leaf-dark: #397d28;
      --leaf-soft: #edf7e9;
      --page: #f3f6f4;
      --surface: #ffffff;
      --ink: #17322c;
      --muted: #62756f;
      --line: #dbe5e0;
      --line-dark: #c8d7d0;
      --amber: #c9820a;
      --amber-soft: #fff4dc;
      --red: #bf4439;
      --red-soft: #fdecea;
      --shadow: 0 10px 28px rgba(7, 59, 50, .07);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--page);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    button, input, select, summary { font: inherit; }
    button, summary { -webkit-tap-highlight-color: transparent; }
    [hidden] { display: none !important; }

    .accent-line {
      height: 4px;
      background: linear-gradient(90deg, var(--leaf), #a7d36e 62%, #e6ba35);
    }

    .app {
      width: min(1160px, calc(100% - 36px));
      margin: 0 auto;
      padding: 28px 0 44px;
    }

    .page-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 18px;
    }
    .eyebrow {
      margin-bottom: 7px;
      color: var(--leaf-dark);
      font-size: 11px;
      font-weight: 850;
      letter-spacing: .13em;
      text-transform: uppercase;
    }
    h1 {
      margin: 0;
      font-size: clamp(27px, 4vw, 40px);
      line-height: 1.12;
      letter-spacing: -.032em;
    }
    .intro {
      max-width: 720px;
      margin: 9px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.65;
    }
    .header-side {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 10px;
      padding-top: 5px;
    }
    .refresh {
      min-height: 42px;
      padding: 0 15px;
      border: 1px solid var(--forest);
      border-radius: 10px;
      background: var(--forest);
      color: #fff;
      font-weight: 800;
      cursor: pointer;
      transition: .18s ease;
    }
    .refresh:hover { background: var(--forest-2); transform: translateY(-1px); }
    .refresh:disabled { opacity: .62; cursor: wait; transform: none; }

    .meta-line {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 14px;
      margin-bottom: 15px;
      color: var(--muted);
      font-size: 12px;
    }
    .meta-item {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }
    .meta-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--leaf);
    }

    .status-summary {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 18px;
      min-height: 48px;
      margin-bottom: 16px;
      padding: 11px 15px;
      border: 1px solid #d8e8d2;
      border-radius: 12px;
      background: var(--leaf-soft);
      color: #2f6d22;
      font-size: 13px;
      font-weight: 750;
    }
    .status-summary.has-warning {
      border-color: #ead9ae;
      background: #fff9ea;
      color: #77520d;
    }
    .status-summary.has-cancellation {
      border-color: #efc9c5;
      background: #fff4f2;
      color: #8b3029;
    }
    .summary-item { display: inline-flex; align-items: center; gap: 7px; }
    .summary-icon {
      width: 19px;
      height: 19px;
      border-radius: 50%;
      display: inline-grid;
      place-items: center;
      background: var(--forest);
      color: #fff;
      font-size: 11px;
      line-height: 1;
    }

    .workspace {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    .view-tabs {
      display: flex;
      gap: 3px;
      padding: 6px;
      border-bottom: 1px solid var(--line);
      background: #f7f9f8;
    }
    .view-tab {
      flex: 1 1 0;
      min-height: 46px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: var(--muted);
      font-weight: 800;
      cursor: pointer;
      transition: .18s ease;
    }
    .view-tab:hover { color: var(--forest); background: #edf2ef; }
    .view-tab.active {
      background: var(--forest);
      color: #fff;
      box-shadow: 0 5px 14px rgba(7,59,50,.17);
    }

    .view-panel { padding: 20px; }
    .section-heading {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 15px;
    }
    .section-heading h2 { margin: 0; font-size: 20px; letter-spacing: -.015em; }
    .section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
    .text-button {
      flex: 0 0 auto;
      min-height: 38px;
      padding: 0 13px;
      border: 1px solid var(--line-dark);
      border-radius: 9px;
      background: #fff;
      color: var(--forest);
      font-size: 12px;
      font-weight: 850;
      cursor: pointer;
    }
    .text-button:hover { border-color: var(--forest); background: #f5f8f6; }

    .toolbar {
      display: grid;
      grid-template-columns: minmax(240px, 1.4fr) minmax(170px, .75fr) minmax(170px, .75fr);
      gap: 10px;
      margin-bottom: 14px;
    }
    .control { position: relative; }
    .control label {
      position: absolute;
      left: 12px;
      top: 7px;
      z-index: 1;
      color: var(--muted);
      font-size: 9px;
      font-weight: 850;
      letter-spacing: .08em;
      text-transform: uppercase;
      pointer-events: none;
    }
    input, select {
      width: 100%;
      height: 50px;
      padding: 20px 12px 6px;
      border: 1px solid var(--line);
      border-radius: 10px;
      outline: none;
      background: #fafcfb;
      color: var(--ink);
      transition: .18s ease;
    }
    input:focus, select:focus {
      border-color: var(--leaf);
      background: #fff;
      box-shadow: 0 0 0 4px rgba(105,180,69,.12);
    }

    .list-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 5px 2px 10px;
      color: var(--muted);
      font-size: 12px;
    }

    .service-list {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
    }
    .service-row {
      position: relative;
      display: grid;
      grid-template-columns: 90px minmax(0, 1fr) auto;
      align-items: center;
      gap: 16px;
      min-height: 82px;
      padding: 14px 16px 14px 19px;
      border-bottom: 1px solid var(--line);
    }
    .service-row:last-child { border-bottom: 0; }
    .service-row:before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: var(--leaf);
    }
    .service-row.monitoring:before { background: var(--amber); }
    .service-row.cancelled:before { background: var(--red); }
    .departure-time { font-size: 21px; font-weight: 900; letter-spacing: -.025em; }
    .departure-label { margin-top: 2px; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
    .route { font-size: 18px; font-weight: 850; line-height: 1.35; }
    .service-meta { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 6px; color: var(--muted); font-size: 11px; }
    .service-meta strong { color: var(--ink); }
    .service-number { font-size: 14px; }
    .service-number strong { font-size: 16px; font-weight: 850; }
    .trip-status strong { font-size: 16px; font-weight: 850; color: var(--ink); }
    .sector-heading { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 850; line-height: 1.4; color: var(--forest); }
    .sector-kk { background: #e4efdc; }
    .sector-beaufort { background: #e2ebed; }
    .sector-tenom { background: #e0ebf7; }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 9px;
      border-radius: 999px;
      background: var(--leaf-soft);
      color: var(--leaf-dark);
      font-size: 10px;
      font-weight: 850;
      white-space: nowrap;
    }
    .badge.monitoring { background: var(--amber-soft); color: #895800; }
    .badge.cancelled { background: var(--red-soft); color: #96362f; }
    .badge-icon {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--leaf);
      color: #fff;
      line-height: 1;
    }
    .badge.monitoring .badge-icon { background: var(--amber); }
    .badge.cancelled .badge-icon { background: var(--red); }

    .empty {
      padding: 48px 20px;
      text-align: center;
      color: var(--muted);
    }
    .empty strong { color: var(--ink); }

    .timetable-tools {
      display: grid;
      grid-template-columns: minmax(300px, 1fr) minmax(230px, .65fr);
      gap: 12px;
      margin-bottom: 12px;
    }
    .direction-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px;
      padding: 4px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: #f5f8f6;
    }
    .direction-tab {
      min-height: 42px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
      cursor: pointer;
    }
    .direction-tab.active { background: var(--forest); color: #fff; }

    .schedule-selection {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
      padding: 10px 12px;
      border-radius: 9px;
      background: #f5f8f6;
      color: var(--muted);
      font-size: 12px;
    }
    .schedule-selection strong { color: var(--ink); }
    .swipe-hint { white-space: nowrap; }

    .detailed-schedules { display: grid; gap: 12px; }
    .trip-card {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
    }
    .trip-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 13px 15px;
      border-bottom: 1px solid var(--line);
      background: #fbfcfb;
    }
    .trip-route { font-size: 14px; font-weight: 850; }
    .trip-subtitle { margin-top: 3px; color: var(--muted); font-size: 10px; }
    .trip-clock { text-align: right; }
    .trip-clock span { display: block; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
    .trip-clock strong { display: block; margin-top: 2px; font-size: 18px; }

    .stop-scroll { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
    .stop-grid {
      --stop-count: 6;
      display: grid;
      grid-template-columns: repeat(var(--stop-count), minmax(118px, 1fr));
      min-width: max(100%, calc(var(--stop-count) * 118px));
      padding: 16px 8px 15px;
    }
    .stop { position: relative; min-width: 0; padding: 0 8px; text-align: center; }
    .stop:after {
      content: "";
      position: absolute;
      left: 50%;
      right: -50%;
      top: 38px;
      height: 2px;
      background: #cfddd6;
    }
    .stop:last-child:after { display: none; }
    .stop-time { min-height: 23px; font-size: 14px; font-weight: 900; }
    .stop-dot {
      position: relative;
      z-index: 1;
      width: 11px;
      height: 11px;
      margin: 5px auto 8px;
      border: 3px solid #fff;
      border-radius: 50%;
      background: var(--forest);
      box-shadow: 0 0 0 2px var(--forest);
    }
    .stop-name { color: var(--muted); font-size: 10px; line-height: 1.3; }

    .info-details {
      margin-top: 16px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
    }
    .info-details summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 50px;
      padding: 0 15px;
      color: var(--forest);
      font-size: 13px;
      font-weight: 850;
      cursor: pointer;
      list-style: none;
    }
    .info-details summary::-webkit-details-marker { display: none; }
    .info-details summary:after { content: "+"; font-size: 20px; font-weight: 500; }
    .info-details[open] summary:after { content: "−"; }
    .info-details p {
      margin: 0;
      padding: 0 15px 15px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.7;
    }

    .error {
      display: none;
      margin-bottom: 14px;
      padding: 11px 13px;
      border: 1px solid #efc9c5;
      border-radius: 9px;
      background: var(--red-soft);
      color: #8c3029;
      font-size: 12px;
    }

    @media (max-width: 760px) {
      .app { width: min(100% - 24px, 1160px); padding-top: 21px; }
      .page-header { display: block; }
      .header-side { margin-top: 15px; padding-top: 0; }
      .refresh { width: 100%; }
      .view-panel { padding: 15px; }
      .section-heading { display: block; }
      .text-button { width: 100%; margin-top: 12px; }
      .toolbar, .timetable-tools { grid-template-columns: 1fr; }
      .service-row { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 13px 12px 13px 16px; }
      .service-status { grid-column: 2; justify-self: start; margin-top: -2px; }
      .departure-time { font-size: 18px; }
      .schedule-selection { align-items: flex-start; }
      .swipe-hint { display: none; }
    }

    @media (max-width: 440px) {
      .view-tabs { display: grid; grid-template-columns: 1fr; }
      .view-tab { min-height: 42px; }
      .direction-tabs { grid-template-columns: 1fr; }
      .meta-line { display: grid; gap: 5px; }
      h1 { font-size: 28px; }
    }
  
#dateChip{font-size:clamp(22px,3vw,30px);font-weight:850;color:var(--forest);line-height:1.3}.today-label{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;font-weight:800}.timetable-tools .control{padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#fafcfb}.trip-summary.cancelled{background:var(--red-soft)}.operation-note{padding:10px 15px;background:var(--amber-soft);color:#77520d;font-size:13px;white-space:pre-wrap}.trip-status{display:inline-block;margin-left:8px;color:var(--muted);font-size:12px}.service-meta .operation-note{padding:4px 8px}.badge.delayed{background:var(--amber-soft);color:#895800}.service-row.delayed:before{background:var(--amber)}.badge.delayed .badge-icon{background:var(--amber)}.service-row{min-width:0}.route{overflow-wrap:anywhere}#publicNotice{white-space:pre-wrap}@media(max-width:590px){.page-header{flex-wrap:wrap}.section-heading{flex-wrap:wrap}.timetable-tools{grid-template-columns:1fr}.schedule-selection{flex-wrap:wrap}}

body { font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
body.is-embedded { background: transparent; }
html.jkns-rail-embedded, html.jkns-rail-embedded body { height: auto; min-height: 0; }
html.jkns-rail-embedded body { display: flow-root; }
@media(max-width:760px) { .route { font-size: 16px; } .service-number strong { font-size: 15px; } }