:root {
      color-scheme: light;
      --bg: #f4f7fb;
      --surface: #ffffff;
      --surface-soft: #f8fafc;
      --text: #172033;
      --muted: #64748b;
      --border: #e2e8f0;
      --border-strong: #cbd5e1;
      --primary: #111827;
      --primary-soft: #eef2ff;
      --shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 14px 34px rgba(15, 23, 42, 0.07);
      --radius: 22px;
      --hour-height: 64px;

      --daniel: #7c3aed;
      --daniel-soft: #f3e8ff;

      --matthew: #0284c7;
      --matthew-soft: #e0f2fe;

      --iker: #d97706;
      --iker-soft: #fef3c7;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-height: 100vh;
      overflow-x: hidden;
      color: var(--text);
      background:
        radial-gradient(circle at 0 0, rgba(124, 58, 237, 0.09), transparent 26rem),
        radial-gradient(circle at 100% 8rem, rgba(2, 132, 199, 0.09), transparent 28rem),
        var(--bg);
      font-family:
        Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
    }

    button,
    input {
      font: inherit;
    }

    button {
      color: inherit;
    }

    button:focus-visible,
    input:focus-visible,
    summary:focus-visible {
      outline: 3px solid rgba(99, 102, 241, 0.25);
      outline-offset: 2px;
    }

    .app-shell {
      width: min(1600px, calc(100% - 32px));
      margin: 0 auto;
      padding: 24px 0 48px;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 26px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 13px;
      min-width: 0;
    }

    .brand-mark {
      display: grid;
      flex: 0 0 auto;
      grid-template-columns: repeat(2, 10px);
      gap: 4px;
      width: 42px;
      height: 42px;
      place-content: center;
      color: #ffffff;
      border-radius: 14px;
      background: var(--primary);
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
    }

    .brand-mark span {
      width: 10px;
      height: 10px;
      border-radius: 3px;
      background: currentColor;
    }

    .brand-mark span:nth-child(2) {
      opacity: 0.55;
    }

    .brand-mark span:nth-child(3) {
      opacity: 0.72;
    }

    .brand-copy {
      min-width: 0;
    }

    .brand-copy strong {
      display: block;
      font-size: 0.98rem;
      letter-spacing: -0.01em;
    }

    .brand-copy span {
      display: block;
      margin-top: 2px;
      overflow: hidden;
      color: var(--muted);
      font-size: 0.78rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .top-actions {
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .button {
      display: inline-flex;
      min-height: 42px;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 9px 14px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface);
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
      cursor: pointer;
      transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        background 0.16s ease;
    }

    .button:hover:not(:disabled) {
      border-color: var(--border-strong);
      box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
      transform: translateY(-1px);
    }

    .button:active:not(:disabled) {
      transform: translateY(0);
    }

    .button:disabled {
      opacity: 0.42;
      cursor: not-allowed;
    }

    .button.primary {
      color: #ffffff;
      border-color: var(--primary);
      background: var(--primary);
    }

    .button.icon-only {
      width: 42px;
      padding: 0;
      font-size: 1.15rem;
    }

    .hero {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
      gap: 28px;
      overflow: hidden;
      margin-bottom: 18px;
      padding: 34px;
      color: #ffffff;
      border-radius: 28px;
      background:
        linear-gradient(125deg, #111827 0%, #1e293b 58%, #312e81 100%);
      box-shadow: var(--shadow);
    }

    .hero::after {
      position: absolute;
      top: -90px;
      right: -70px;
      width: 300px;
      height: 300px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.04);
      content: "";
    }

    .hero-copy {
      position: relative;
      z-index: 1;
    }

    .eyebrow {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 10px;
      color: #c7d2fe;
      font-size: 0.76rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      width: 22px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      content: "";
    }

    .hero h1 {
      max-width: 720px;
      margin: 0;
      font-size: clamp(2rem, 4vw, 3.6rem);
      line-height: 1;
      letter-spacing: -0.055em;
    }

    .hero p {
      max-width: 700px;
      margin: 18px 0 0;
      color: #cbd5e1;
      font-size: clamp(0.94rem, 1.5vw, 1.05rem);
      line-height: 1.7;
    }

    .hero-period {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
    }

    .period-card {
      width: min(100%, 330px);
      padding: 21px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(14px);
    }

    .period-card small {
      display: block;
      margin-bottom: 8px;
      color: #cbd5e1;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .period-card strong {
      display: block;
      font-size: 1.12rem;
    }

    .period-card span {
      display: block;
      margin-top: 7px;
      color: #c7d2fe;
      font-size: 0.85rem;
    }

    .controls-card,
    .calendar-card,
    .assumptions {
      border: 1px solid rgba(226, 232, 240, 0.9);
      background: rgba(255, 255, 255, 0.93);
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px);
    }

    .controls-card {
      margin-bottom: 18px;
      padding: 22px;
      border-radius: var(--radius);
    }

    .control-section + .control-section {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid var(--border);
    }

    .control-label {
      display: block;
      margin: 0 0 10px;
      color: var(--muted);
      font-size: 0.74rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .people-row,
    .navigation-row,
    .navigation-left,
    .navigation-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .people-row {
      flex-wrap: wrap;
    }

    .person-chip {
      display: inline-flex;
      min-height: 46px;
      align-items: center;
      gap: 10px;
      padding: 6px 14px 6px 7px;
      color: var(--muted);
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--surface);
      cursor: pointer;
      transition: 0.16s ease;
    }

    .person-chip:hover {
      border-color: var(--border-strong);
      transform: translateY(-1px);
    }

    .person-chip[aria-pressed="true"] {
      color: var(--text);
      border-color: var(--chip-color);
      background: var(--chip-soft);
      box-shadow: 0 5px 15px color-mix(in srgb, var(--chip-color) 14%, transparent);
    }

    .person-avatar {
      display: grid;
      width: 32px;
      height: 32px;
      place-items: center;
      color: #ffffff;
      border-radius: 50%;
      background: var(--chip-color);
      font-size: 0.67rem;
      font-weight: 900;
      letter-spacing: 0.03em;
    }

    .person-chip strong {
      font-size: 0.88rem;
    }

    .all-chip {
      min-height: 46px;
      padding: 8px 16px;
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--surface);
      font-size: 0.86rem;
      font-weight: 750;
      cursor: pointer;
    }

    .all-chip.is-active {
      color: #ffffff;
      border-color: var(--primary);
      background: var(--primary);
    }

    .navigation-row {
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .navigation-left,
    .navigation-right {
      flex-wrap: wrap;
    }

    .date-input {
      min-height: 42px;
      padding: 8px 11px;
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface);
      cursor: pointer;
    }

    .view-switch {
      display: inline-flex;
      gap: 4px;
      padding: 4px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--surface-soft);
    }

    .view-button {
      min-height: 34px;
      padding: 6px 13px;
      color: var(--muted);
      border: 0;
      border-radius: 10px;
      background: transparent;
      font-size: 0.82rem;
      font-weight: 750;
      cursor: pointer;
    }

    .view-button.is-active {
      color: var(--text);
      background: #ffffff;
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.09);
    }

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

    .summary-card {
      position: relative;
      overflow: hidden;
      min-height: 118px;
      padding: 20px;
      border: 1px solid var(--border);
      border-radius: 18px;
      background: var(--surface);
      box-shadow: 0 8px 25px rgba(15, 23, 42, 0.05);
    }

    .summary-card::after {
      position: absolute;
      right: -22px;
      bottom: -36px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: var(--summary-color, #e0e7ff);
      content: "";
      opacity: 0.56;
    }

    .summary-card span,
    .summary-card strong {
      position: relative;
      z-index: 1;
      display: block;
    }

    .summary-card span {
      color: var(--muted);
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.065em;
      text-transform: uppercase;
    }

    .summary-card strong {
      margin-top: 8px;
      font-size: clamp(1.55rem, 3vw, 2.25rem);
      letter-spacing: -0.04em;
    }

    .summary-card small {
      position: relative;
      z-index: 1;
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 0.76rem;
    }

    .calendar-card {
      overflow: hidden;
      border-radius: var(--radius);
    }

    .calendar-heading {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 22px;
      padding: 22px 24px;
      border-bottom: 1px solid var(--border);
    }

    .calendar-heading h2 {
      margin: 0;
      font-size: clamp(1.12rem, 2vw, 1.42rem);
      letter-spacing: -0.025em;
    }

    .calendar-heading p {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 0.84rem;
    }

    .legend {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
    }

    .legend-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--muted);
      font-size: 0.76rem;
      font-weight: 700;
    }

    .legend-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--dot);
    }

    .calendar-scroll {
      max-height: min(76vh, 930px);
      overflow: auto;
      background: #ffffff;
      overscroll-behavior: contain;
    }

    .timeline-grid {
      position: relative;
      display: grid;
      background: #ffffff;
    }

    .calendar-corner,
    .day-head {
      position: sticky;
      top: 0;
      z-index: 20;
      height: 72px;
      border-bottom: 1px solid var(--border);
      background: rgba(255, 255, 255, 0.97);
      backdrop-filter: blur(12px);
    }

    .calendar-corner {
      left: 0;
      z-index: 30;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      border-right: 1px solid var(--border);
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .day-head {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      text-align: left;
      border: 0;
      border-right: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      cursor: pointer;
    }

    .day-head:hover,
    .day-head.is-selected {
      background: #f8fafc;
    }

    .day-head.is-today {
      background: #eef2ff;
    }

    .day-number {
      display: grid;
      width: 39px;
      height: 39px;
      place-items: center;
      border-radius: 13px;
      background: var(--surface-soft);
      font-size: 1.05rem;
      font-weight: 850;
    }

    .day-head.is-selected .day-number,
    .day-head.is-today .day-number {
      color: #ffffff;
      background: var(--primary);
    }

    .day-copy {
      min-width: 0;
    }

    .day-copy strong,
    .day-copy span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .day-copy strong {
      font-size: 0.82rem;
      text-transform: capitalize;
    }

    .day-copy span {
      margin-top: 3px;
      color: var(--muted);
      font-size: 0.7rem;
      text-transform: uppercase;
    }

    .day-count {
      min-width: 25px;
      padding: 4px 7px;
      color: var(--muted);
      border: 1px solid var(--border);
      border-radius: 999px;
      background: #ffffff;
      font-size: 0.66rem;
      font-weight: 800;
      text-align: center;
    }

    .time-axis {
      position: sticky;
      left: 0;
      z-index: 12;
      border-right: 1px solid var(--border);
      background: #ffffff;
    }

    .time-label {
      position: absolute;
      right: 11px;
      color: var(--muted);
      font-size: 0.68rem;
      font-weight: 700;
      transform: translateY(-50%);
    }

    .time-label.is-first {
      transform: translateY(7px);
    }

    .time-label.is-last {
      transform: translateY(-100%);
    }

    .day-column {
      position: relative;
      overflow: hidden;
      border-right: 1px solid var(--border);
      background: #ffffff;
    }

    .hour-line,
    .half-hour-line {
      position: absolute;
      right: 0;
      left: 0;
      z-index: 0;
      pointer-events: none;
    }

    .hour-line {
      border-top: 1px solid #e7edf4;
    }

    .half-hour-line {
      border-top: 1px dashed #f1f5f9;
    }

    .column-empty {
      position: absolute;
      top: 25px;
      right: 14px;
      left: 14px;
      z-index: 1;
      padding: 12px;
      color: #94a3b8;
      border: 1px dashed var(--border);
      border-radius: 12px;
      background: rgba(248, 250, 252, 0.76);
      font-size: 0.74rem;
      text-align: center;
    }

    .event-card {
      position: absolute;
      z-index: 4;
      display: block;
      overflow: hidden;
      padding: 8px 9px;
      text-align: left;
      border: 1px solid color-mix(in srgb, var(--accent) 30%, white);
      border-left: 4px solid var(--accent);
      border-radius: 10px;
      background: var(--soft);
      box-shadow: 0 5px 13px rgba(15, 23, 42, 0.08);
      cursor: pointer;
      transition:
        z-index 0s,
        transform 0.15s ease,
        box-shadow 0.15s ease;
    }

    .event-card:hover,
    .event-card:focus-visible {
      z-index: 8;
      box-shadow: 0 12px 27px rgba(15, 23, 42, 0.15);
      transform: translateY(-1px);
    }

    .event-person {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-bottom: 4px;
      color: var(--accent);
      font-size: 0.61rem;
      font-weight: 900;
      letter-spacing: 0.055em;
      text-transform: uppercase;
    }

    .event-person::before {
      width: 6px;
      height: 6px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--accent);
      content: "";
    }

    .event-title {
      display: -webkit-box;
      overflow: hidden;
      color: #172033;
      font-size: 0.75rem;
      font-weight: 850;
      line-height: 1.25;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .event-time {
      display: block;
      margin-top: 5px;
      color: #334155;
      font-size: 0.67rem;
      font-weight: 800;
    }

    .event-location {
      display: block;
      overflow: hidden;
      margin-top: 3px;
      color: #64748b;
      font-size: 0.62rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .event-card.is-compact {
      padding: 7px 6px;
      border-left-width: 3px;
    }

    .event-card.is-compact .event-person {
      font-size: 0.55rem;
    }

    .event-card.is-compact .event-title {
      font-size: 0.66rem;
      -webkit-line-clamp: 3;
    }

    .event-card.is-compact .event-location {
      display: none;
    }

    .now-line {
      position: absolute;
      right: 0;
      left: 0;
      z-index: 7;
      border-top: 2px solid #ef4444;
      pointer-events: none;
    }

    .now-line::before {
      position: absolute;
      top: -5px;
      left: -1px;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #ef4444;
      content: "";
    }

    .agenda-view {
      display: grid;
      gap: 16px;
      padding: 20px;
      background: #f8fafc;
    }

    .agenda-day {
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 18px;
      background: #ffffff;
    }

    .agenda-day-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 15px 17px;
      text-align: left;
      border: 0;
      border-bottom: 1px solid var(--border);
      background: #ffffff;
      cursor: pointer;
    }

    .agenda-day-heading:hover {
      background: #f8fafc;
    }

    .agenda-day-heading strong {
      display: block;
      font-size: 0.9rem;
      text-transform: capitalize;
    }

    .agenda-day-heading span {
      color: var(--muted);
      font-size: 0.75rem;
    }

    .agenda-list {
      display: grid;
      gap: 10px;
      padding: 12px;
    }

    .agenda-event {
      display: grid;
      grid-template-columns: 8px minmax(100px, 0.35fr) minmax(180px, 1fr) auto;
      gap: 13px;
      align-items: center;
      width: 100%;
      padding: 12px;
      text-align: left;
      border: 1px solid var(--border);
      border-radius: 13px;
      background: #ffffff;
      cursor: pointer;
      transition: 0.15s ease;
    }

    .agenda-event:hover {
      border-color: color-mix(in srgb, var(--accent) 45%, white);
      background: var(--soft);
      transform: translateY(-1px);
    }

    .agenda-accent {
      align-self: stretch;
      min-height: 44px;
      border-radius: 999px;
      background: var(--accent);
    }

    .agenda-time strong,
    .agenda-main strong,
    .agenda-main span,
    .agenda-side span {
      display: block;
    }

    .agenda-time strong {
      font-size: 0.8rem;
    }

    .agenda-time span,
    .agenda-main span,
    .agenda-side span {
      margin-top: 3px;
      color: var(--muted);
      font-size: 0.72rem;
    }

    .agenda-main strong {
      font-size: 0.86rem;
    }

    .agenda-side {
      min-width: 120px;
      text-align: right;
    }

    .agenda-person {
      color: var(--accent) !important;
      font-weight: 850;
    }

    .agenda-empty {
      padding: 22px;
      color: var(--muted);
      font-size: 0.82rem;
      text-align: center;
    }

    .assumptions {
      margin-top: 18px;
      padding: 0;
      border-radius: 18px;
    }

    .assumptions summary {
      padding: 17px 20px;
      font-size: 0.84rem;
      font-weight: 800;
      cursor: pointer;
    }

    .assumptions-content {
      padding: 0 22px 19px;
      color: var(--muted);
      font-size: 0.79rem;
      line-height: 1.65;
    }

    .assumptions-content ul {
      margin: 0;
      padding-left: 19px;
    }

    .page-footer {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding: 22px 4px 0;
      color: var(--muted);
      font-size: 0.74rem;
    }

    dialog {
      width: min(550px, calc(100% - 28px));
      max-height: min(88vh, 760px);
      overflow: auto;
      padding: 0;
      color: var(--text);
      border: 0;
      border-radius: 24px;
      background: #ffffff;
      box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
    }

    dialog::backdrop {
      background: rgba(15, 23, 42, 0.58);
      backdrop-filter: blur(4px);
    }

    .dialog-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      padding: 23px 24px 18px;
      border-bottom: 1px solid var(--border);
    }

    .dialog-person {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 8px;
      color: var(--dialog-accent);
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .dialog-person::before {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: currentColor;
      content: "";
    }

    .dialog-header h3 {
      margin: 0;
      font-size: 1.35rem;
      letter-spacing: -0.025em;
    }

    .dialog-close {
      display: grid;
      width: 38px;
      height: 38px;
      flex: 0 0 auto;
      place-items: center;
      color: var(--muted);
      border: 1px solid var(--border);
      border-radius: 11px;
      background: #ffffff;
      font-size: 1.25rem;
      cursor: pointer;
    }

    .dialog-body {
      padding: 22px 24px 25px;
    }

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

    .detail-item {
      padding: 13px;
      border: 1px solid var(--border);
      border-radius: 13px;
      background: #f8fafc;
    }

    .detail-item.full {
      grid-column: 1 / -1;
    }

    .detail-item small,
    .detail-item strong {
      display: block;
    }

    .detail-item small {
      margin-bottom: 5px;
      color: var(--muted);
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .detail-item strong {
      font-size: 0.83rem;
      line-height: 1.45;
    }

    .dialog-note {
      margin: 16px 0 0;
      padding: 13px 14px;
      color: #6b4f00;
      border: 1px solid #fde68a;
      border-radius: 13px;
      background: #fffbeb;
      font-size: 0.78rem;
      line-height: 1.55;
    }

    .toast {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 100;
      max-width: min(390px, calc(100% - 44px));
      padding: 13px 16px;
      color: #ffffff;
      border-radius: 13px;
      background: #111827;
      box-shadow: 0 18px 45px rgba(15, 23, 42, 0.22);
      font-size: 0.8rem;
      font-weight: 700;
      opacity: 0;
      pointer-events: none;
      transform: translateY(12px);
      transition: 0.2s ease;
    }

    .toast.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

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

      .hero-period {
        justify-content: flex-start;
      }

      .period-card {
        width: 100%;
      }

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

      .summary-card {
        min-height: 102px;
      }

      .calendar-heading {
        flex-direction: column;
      }

      .legend {
        justify-content: flex-start;
      }

      .agenda-event {
        grid-template-columns: 7px 100px 1fr;
      }

      .agenda-side {
        display: none;
      }
    }

    @media (max-width: 680px) {
      .app-shell {
        width: min(100% - 20px, 1600px);
        padding-top: 13px;
      }

      .topbar {
        align-items: flex-start;
      }

      .brand-copy span {
        max-width: 170px;
      }

      .top-actions .button span {
        display: none;
      }

      .top-actions .button {
        width: 42px;
        padding: 0;
      }

      .hero {
        padding: 25px 21px;
        border-radius: 22px;
      }

      .controls-card {
        padding: 17px;
      }

      .navigation-row,
      .navigation-left,
      .navigation-right {
        width: 100%;
      }

      .navigation-row {
        align-items: stretch;
      }

      .navigation-left {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) 42px;
      }

      .navigation-left .date-input {
        width: 100%;
        min-width: 0;
      }

      .navigation-right {
        justify-content: space-between;
      }

      .view-switch {
        width: 100%;
      }

      .view-button {
        flex: 1;
      }

      .calendar-heading {
        padding: 18px;
      }

      .calendar-scroll {
        max-height: 72vh;
      }

      .agenda-view {
        padding: 11px;
      }

      .agenda-event {
        grid-template-columns: 7px 82px 1fr;
        gap: 9px;
        padding: 10px;
      }

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

      .detail-item.full {
        grid-column: auto;
      }

      .page-footer {
        flex-direction: column;
        gap: 6px;
      }
    }

    @media print {
      body {
        background: #ffffff;
      }

      .app-shell {
        width: 100%;
        padding: 0;
      }

      .topbar,
      .hero,
      .controls-card,
      .summary-grid,
      .assumptions,
      .page-footer,
      .calendar-heading .legend {
        display: none !important;
      }

      .calendar-card {
        border: 0;
        box-shadow: none;
      }

      .calendar-heading {
        padding: 0 0 14px;
      }

      .calendar-scroll {
        max-height: none;
        overflow: visible;
      }

      .timeline-grid {
        min-width: 1200px !important;
        transform-origin: top left;
      }

      .event-card {
        box-shadow: none;
      }
    }


/* ===== App 2.0 / smart + mobile layer ===== */
:root {
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
}

body { padding-bottom: 0; }
.brand-link { color: inherit; text-decoration: none; }
.app-topbar { position: sticky; top: 0; z-index: 70; margin: 0 -8px 18px; padding: 10px 8px; background: rgba(244,247,251,.84); backdrop-filter: blur(18px); }
.top-clock { display:flex; align-items:center; gap:8px; min-height:42px; padding:8px 12px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.88); }
.top-clock span { color:var(--muted); font-size:.65rem; font-weight:900; letter-spacing:.08em; }
.top-clock strong { font-variant-numeric: tabular-nums; font-size:.85rem; }

.smart-hero { position:relative; overflow:hidden; margin-bottom:18px; padding:30px; color:white; border-radius:28px; background:linear-gradient(135deg,#0b1220 0%,#18243a 55%,#312e81 100%); box-shadow:var(--shadow); }
.smart-hero::before { content:""; position:absolute; width:360px; height:360px; right:-150px; top:-180px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
.smart-hero-head { position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:22px; }
.smart-hero h1 { margin:0; font-size:clamp(2rem,4vw,3.65rem); letter-spacing:-.055em; line-height:1; }
.smart-hero h1[data-tone="live"]::after { content:""; display:inline-block; width:11px; height:11px; margin-left:12px; border-radius:50%; background:#34d399; box-shadow:0 0 0 7px rgba(52,211,153,.13); vertical-align:middle; }
.smart-hero h1[data-tone="free"] { color:#e2e8f0; }
.smart-date { margin:13px 0 0; color:#cbd5e1; font-size:.9rem; }
.device-time { margin:7px 0 0; color:#a5b4fc; font-size:.76rem; }
.smart-actions { display:flex; gap:9px; flex:0 0 auto; }
.ghost-on-dark { color:white; border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.07); box-shadow:none; }
.light-on-dark { color:#111827; border-color:white; background:white; }
.smart-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:14px; margin-top:26px; }
.smart-panel { min-width:0; padding:16px; border:1px solid rgba(255,255,255,.12); border-radius:20px; background:rgba(255,255,255,.075); backdrop-filter:blur(14px); }
.smart-panel-main { background:rgba(255,255,255,.10); }
.smart-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px; color:#cbd5e1; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.smart-panel-heading strong { color:#fff; font-size:.74rem; letter-spacing:0; text-transform:none; }
.smart-panel-heading small { color:#a5b4fc; text-transform:none; letter-spacing:0; }
.smart-event-list { display:grid; gap:9px; }
.smart-event { display:grid; grid-template-columns:4px minmax(0,1fr) auto; align-items:center; gap:11px; width:100%; padding:12px 13px; color:#172033; text-align:left; border:1px solid rgba(255,255,255,.38); border-radius:14px; background:rgba(255,255,255,.96); cursor:pointer; transition:.15s ease; }
.smart-event:hover { transform:translateY(-1px); box-shadow:0 12px 30px rgba(0,0,0,.16); }
.smart-event-accent { align-self:stretch; min-height:48px; border-radius:999px; background:var(--accent); }
.smart-event-copy { min-width:0; }
.smart-event-copy small,.smart-event-copy strong,.smart-event-copy span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.smart-event-copy small { color:var(--accent); font-size:.64rem; font-weight:900; letter-spacing:.055em; text-transform:uppercase; }
.smart-event-copy strong { margin-top:4px; font-size:.9rem; }
.smart-event-copy span { margin-top:4px; color:#64748b; font-size:.72rem; }
.smart-event-arrow { color:#94a3b8; font-size:1.5rem; }
.smart-empty { padding:13px 4px; }
.smart-empty strong,.smart-empty span { display:block; }
.smart-empty strong { font-size:.92rem; }
.smart-empty span { margin-top:5px; color:#cbd5e1; font-size:.76rem; line-height:1.45; }
.smart-free strong { color:#e2e8f0; }

.filter-topline { margin-top:0 !important; padding-top:0 !important; border-top:0 !important; }
.event-card.is-live { outline:2px solid var(--accent); outline-offset:1px; box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 24%,transparent); }
.event-card.is-live::after { content:"AHORA"; position:absolute; right:6px; top:5px; padding:2px 5px; border-radius:999px; color:white; background:var(--accent); font-size:.48rem; font-weight:950; letter-spacing:.05em; }
.install-button { border-color:#c7d2fe; background:#eef2ff; }
.mobile-nav { display:none; }

@media (max-width: 900px) {
  .smart-grid { grid-template-columns:1fr; }
  .smart-hero-head { flex-direction:column; }
  .smart-actions { width:100%; }
  .smart-actions .button { flex:1; }
}

@media (max-width: 680px) {
  body { padding-bottom:calc(78px + var(--app-safe-bottom)); background:#f6f7fb; }
  .app-shell { width:100%; padding:0 12px 24px; }
  .app-topbar { margin:0 -12px 10px; padding:9px 12px; border-bottom:1px solid rgba(226,232,240,.82); }
  .brand-mark { width:38px; height:38px; border-radius:12px; }
  .brand-copy strong { font-size:.88rem; }
  .brand-copy span { max-width:135px; font-size:.69rem; }
  .top-clock { min-height:38px; padding:6px 9px; border-radius:11px; }
  .top-clock span { display:none; }
  .top-clock strong { font-size:.78rem; }
  .desktop-action { display:none !important; }
  .install-button { width:38px !important; min-height:38px !important; }
  .install-button span:last-child { display:none; }

  .smart-hero { margin:0 0 12px; padding:22px 17px; border-radius:22px; }
  .smart-hero h1 { font-size:clamp(1.85rem,10vw,2.65rem); }
  .smart-date { font-size:.79rem; line-height:1.45; }
  .smart-actions { display:none; }
  .smart-grid { margin-top:19px; gap:10px; }
  .smart-panel { padding:12px; border-radius:16px; }
  .smart-event { padding:11px; border-radius:13px; }
  .smart-event-copy strong { font-size:.84rem; }

  .controls-card { margin-bottom:12px; padding:15px; border-radius:18px; }
  .people-row { gap:7px; }
  .all-chip,.person-chip { min-height:42px; }
  .person-chip { padding-right:11px; }
  .person-avatar { width:29px; height:29px; }
  .summary-grid { gap:8px; margin-bottom:12px; }
  .summary-card { min-height:88px; padding:15px; border-radius:15px; }
  .summary-card strong { font-size:1.65rem; }
  .calendar-card { border-radius:18px; }
  .calendar-heading { padding:15px; }
  .calendar-heading .legend { display:none; }
  .calendar-scroll { max-height:68vh; }
  .agenda-view { padding:8px; gap:10px; }
  .agenda-day { border-radius:15px; }
  .agenda-event { grid-template-columns:6px 72px 1fr; }
  .page-footer { padding-bottom:8px; }
  dialog { width:calc(100% - 18px); max-height:85vh; border-radius:20px; }

  .mobile-nav { position:fixed; z-index:100; right:10px; bottom:calc(8px + var(--app-safe-bottom)); left:10px; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; padding:7px; border:1px solid rgba(226,232,240,.95); border-radius:20px; background:rgba(255,255,255,.94); box-shadow:0 18px 50px rgba(15,23,42,.16); backdrop-filter:blur(18px); }
  .mobile-nav button { display:grid; place-items:center; gap:3px; min-height:54px; color:#64748b; border:0; border-radius:14px; background:transparent; cursor:pointer; }
  .mobile-nav button:active { background:#f1f5f9; transform:scale(.98); }
  .mobile-nav span { font-size:1.05rem; line-height:1; }
  .mobile-nav strong { font-size:.61rem; }
}

@media (display-mode: standalone) {
  .install-button { display:none !important; }
  .app-topbar { padding-top:calc(9px + env(safe-area-inset-top,0px)); }
}