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

    body {
      font-family: 'Segoe UI', system-ui, sans-serif;
      background: #e8e8e8;
      min-height: 100vh;
    }

    /* ── HEADER ─────────────────────────────────────────── */
    header {
      background: #8b1a1a;
      color: #fff;
      height: 56px;
      display: flex;
      align-items: center;
      padding: 0 24px;
      gap: 32px;
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0 2px 8px rgba(0,0,0,.35);
    }

    header .logo {
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: .5px;
      white-space: nowrap;
    }

    header nav {
      display: flex;
      gap: 4px;
      flex: 1;
    }

    header nav a {
      color: rgba(255,255,255,.8);
      text-decoration: none;
      padding: 6px 14px;
      border-radius: 4px;
      font-size: .9rem;
      transition: background .15s, color .15s;
    }

    header nav a:hover,
    header nav a.active {
      background: rgba(255,255,255,.18);
      color: #fff;
    }

    .sim-control {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: 16px;
      padding-left: 16px;
      border-left: 1px solid rgba(255,255,255,.2);
    }

    .sim-label {
      font-size: .78rem;
      font-weight: 600;
      color: rgba(255,255,255,.7);
      white-space: nowrap;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .sim-select {
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.25);
      border-radius: 6px;
      padding: 4px 26px 4px 8px;
      font-size: .8rem;
      color: #fff;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.7)'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 8px center;
      transition: background .15s, border-color .15s;
      min-width: 220px;
    }

    .sim-select:hover  { background-color: rgba(255,255,255,.2); }
    .sim-select:focus  { outline: none; border-color: rgba(255,255,255,.6); }
    .sim-select option,
    .sim-select optgroup { background: #8b1a1a; color: #fff; }

    /* ── SIMULATION NOTIFICATION BANNER ─────────────────── */
    .sim-notification {
      position: relative;
      display: flex;
      align-items: center;
      gap: 16px;
      background: #fffbe6;
      border: 1px solid #f0c040;
      border-left: 4px solid #f0a000;
      border-radius: 8px;
      margin: 12px 24px 0;
      padding: 12px 32px 12px 16px;
      font-size: .88rem;
      color: #7a5a00;
    }

    .sim-notification-icon {
      font-size: 1.3rem;
      flex-shrink: 0;
    }

    .sim-notification-text {
      flex: 1;
      line-height: 1.4;
    }

    .sim-notification-btn {
      flex-shrink: 0;
      background: #f0a000;
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 7px 14px;
      font-size: .8rem;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
    }
    .sim-notification-btn:hover { background: #d08800; }

    .sim-notification-close {
      position: absolute;
      top: 6px;
      right: 8px;
      background: none;
      border: none;
      font-size: 1.1rem;
      line-height: 1;
      color: #a07820;
      cursor: pointer;
      padding: 0 2px;
    }
    .sim-notification-close:hover { color: #7a5a00; }

    header .header-right {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: .85rem;
      opacity: .85;
    }

    header .avatar {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: rgba(255,255,255,.25);
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: .85rem;
    }

    .lang-selector {
      position: relative;
    }

    .lang-current {
      display: flex;
      align-items: center;
      gap: 5px;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 6px;
      padding: 4px 8px;
      cursor: pointer;
      color: #fff;
      font-size: .82rem;
      font-weight: 600;
      transition: background .15s;
    }

    .lang-current:hover { background: rgba(255,255,255,.22); }

    .lang-flag { font-size: 1rem; line-height: 1; }

    .lang-arrow {
      width: 8px; height: 5px;
      opacity: .7;
      transition: transform .2s;
    }

    .lang-selector.open .lang-arrow { transform: rotate(180deg); }

    .lang-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      box-shadow: 0 4px 16px rgba(0,0,0,.14);
      list-style: none;
      min-width: 90px;
      overflow: hidden;
      z-index: 2000;
    }

    .lang-selector.open .lang-dropdown { display: block; }

    .lang-option {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      cursor: pointer;
      font-size: .85rem;
      font-weight: 600;
      color: #333;
      transition: background .12s;
    }

    .lang-option:hover { background: #f5f5f5; }

    .lang-option.lang-active { background: #fdf0f0; color: #8b1a1a; }

    /* ── GRID LAYOUT ─────────────────────────────────────── */
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      padding: 24px;
      max-width: 1200px;
      margin: 0 auto;
    }

    @media (max-width: 768px) {
      .grid { grid-template-columns: 1fr; padding: 14px; gap: 14px; }
      .person-card { flex-wrap: wrap; }
      .person-info { flex: 1; min-width: 0; }
      .person-status { width: 100%; border-left: none; border-right: none; border-top: 1px solid #efefef; padding: 10px 0 0; flex-direction: row; flex-wrap: wrap; justify-content: center; }
    }

    /* ── TILE BASE ───────────────────────────────────────── */
    .tile {
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,.09);
      overflow: hidden;
    }

    .tile-header {
      background: #f5f5f5;
      border-bottom: 1px solid #e0e0e0;
      padding: 10px 16px;
      font-size: .78rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .6px;
      color: #666;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .tile-settings {
      background: none;
      border: none;
      cursor: pointer;
      padding: 2px;
      color: #aaa;
      display: flex;
      align-items: center;
      border-radius: 4px;
      transition: color .15s, background .15s;
      flex-shrink: 0;
    }

    .tile-settings:hover {
      color: #555;
      background: #e8e8e8;
    }

    .tile-settings svg {
      width: 15px;
      height: 15px;
      transition: transform .4s ease;
    }

    .tile-settings:hover svg {
      transform: rotate(60deg);
    }


    .tile-add {
      background: none;
      border: none;
      cursor: pointer;
      padding: 2px 5px;
      color: #aaa;
      display: flex;
      align-items: center;
      border-radius: 4px;
      transition: color .15s, background .15s;
      flex-shrink: 0;
      font-size: 1.2rem;
      line-height: 1;
      font-weight: 400;
    }

    .tile-add:hover {
      color: #555;
      background: #e8e8e8;
    }

    .tile-add svg {
      width: 15px;
      height: 15px;
      transition: transform .4s ease;
    }



    .tile-body {
      padding: 20px;
    }

    .tile-wide {
      grid-column: 1 / -1;
    }

    /* ── TILE : DEVICES ──────────────────────────────────── */
    .device-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .device-row {
      display: flex;
      align-items: center;
      gap: 24px;
    }

    .device-row-settings {
      margin-left: auto;
      flex-shrink: 0;
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
      color: #bbb;
      display: flex;
      align-items: center;
    }
    .device-row-settings svg { width: 16px; height: 16px; }
    .device-row-settings:hover { color: #888; }

    .device-icon-wrap {
      flex-shrink: 0;
      width: 72px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .watch-img {
      width: 46px;
      height: 70px;
      display: block;
    }

    .tablet-img {
      width: 72px;
      height: 54px;
      display: block;
    }

    .device-name {
      font-size: .72rem;
      font-weight: 600;
      color: #555;
      text-align: center;
      line-height: 1.3;
    }

    .device-divider {
      height: 1px;
      background: #efefef;
    }

    .device-stats {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .device-stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
    }

    .device-stat-icon {
      width: 42px;
      height: 42px;
      background: #f4f4f6;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #8b1a1a;
    }

    .device-stat-icon svg {
      width: 22px;
      height: 22px;
    }

    .device-stat-label {
      font-size: .68rem;
      color: #aaa;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .device-stat-value {
      font-size: .82rem;
      font-weight: 700;
      color: #333;
    }

    /* ── TILE 1 : PERSON ─────────────────────────────────── */
    .person-card {
      display: flex;
      gap: 20px;
      align-items: flex-start;
    }

    .person-photo {
      width: 90px; height: 90px;
      border-radius: 8px;
      object-fit: cover;
      flex-shrink: 0;
      background: #ddd;
    }

    .person-info h2 {
      font-size: 1.1rem;
      font-weight: 700;
      color: #222;
      margin-bottom: 8px;
    }

    .person-info dl {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 4px 10px;
      font-size: .85rem;
    }

    .person-info dt {
      color: #888;
      font-weight: 600;
      white-space: nowrap;
    }

    .person-info dd {
      color: #333;
    }

    .person-status {
      display: flex;
      flex-direction: row;
      gap: 6px;
      align-items: stretch;
      flex: 1;
      padding: 0 16px;
      border-left: 1px solid #efefef;
    }

    .uv-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      flex: 1;
      padding: 8px 4px;
      border-radius: 8px;
      background: #f9f9f9;
      min-width: 0;
    }

    .uv-icon {
      width: 28px; height: 28px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: #fff;
      flex-shrink: 0;
    }

    .uv-icon svg { width: 14px; height: 14px; }
    .uv-icon.steps-icon    { background: #8b1a1a; }
    .uv-icon.pulse-icon    { background: #c0392b; }
    .uv-icon.spo2-icon     { background: #1565c0; }
    .uv-icon.temp-icon     { background: #e06030; }
    .uv-icon.sleep-icon    { background: #2a4a9e; }
    .uv-icon.wellbeing-icon { background: #5a8a3f; }
    .uv-icon.location-icon  { background: #546e7a; }

    .uv-value {
      font-size: .78rem;
      font-weight: 700;
      color: #222;
      text-align: center;
      line-height: 1.1;
    }

    .uv-label {
      font-size: .62rem;
      color: #aaa;
      text-transform: uppercase;
      letter-spacing: .03em;
      text-align: center;
    }

    .uv-extra {
      font-size: .55rem;
      color: #8b1a1a;
      text-align: center;
      line-height: 1.1;
    }

    .uv-quality {
      font-size: .62rem;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 20px;
    }
    .uv-quality.good     { background: #e6f4ea; color: #2d7a3f; }
    .uv-quality.moderate { background: #fff3e0; color: #c25e00; }
    .uv-quality.bad      { background: #fde8e8; color: #c62828; }

    .status-label {
      font-size: .68rem;
      font-weight: 600;
      color: #aaa;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .status-indicator {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .status-dot {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 0 4px rgba(34,197,94,.18);
    }

    .status-text {
      font-size: .8rem;
      font-weight: 700;
      color: #22c55e;
    }

    /* ── TILE 2 : MAP ────────────────────────────────────── */
    #map {
      height: 260px;
      width: 100%;
      border-radius: 0 0 10px 10px;
    }

    /* ── TILE 3 : VITAL ──────────────────────────────────── */
    .vital-selects {
      display: flex;
      gap: 6px;
      margin-left: 10px;
    }

    .vital-selects select {
      background: rgba(255,255,255,.18);
      border: 1px solid rgba(0,0,0,.15);
      border-radius: 4px;
      padding: 2px 20px 2px 7px;
      font-size: .75rem;
      font-weight: 600;
      color: #444;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 6px center;
      background-color: #fff;
      transition: border-color .15s;
    }

    .vital-selects select:hover { border-color: #8b1a1a; }
    .vital-selects select:focus { outline: none; border-color: #8b1a1a; }

    .chart-container {
      position: relative;
      height: 200px;
    }

    /* ── ALL VIEW ─────────────────────────────────────────── */
    #vital-all-view {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    /* ── WELLBEING VIEW ───────────────────────────────────── */
    #vital-wellbeing-view {
      overflow-y: auto;
      max-height: 220px;
    }

    .wb-today {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 24px;
      padding: 16px 0;
    }

    .wb-today-slot {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .wb-today-slot svg { width: 52px; height: 52px; }
    .wb-today-slot .wb-slot-lbl {
      font-size: .72rem;
      color: #666;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .wb-week {
      display: flex;
      gap: 4px;
      align-items: flex-start;
    }

    .wb-day {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
    }

    .wb-dayhdr {
      font-size: .68rem;
      font-weight: 700;
      color: #555;
      text-align: center;
      line-height: 1.3;
      border-bottom: 1px solid #eee;
      width: 100%;
      padding-bottom: 3px;
      margin-bottom: 2px;
    }

    .wb-slot {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1px;
    }

    .wb-slot svg { width: 22px; height: 22px; }

    .wb-slot-lbl {
      font-size: .58rem;
      color: #aaa;
      text-transform: uppercase;
      letter-spacing: .3px;
    }

    .wb-month {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 3px;
    }

    .wb-month-day {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1px;
      padding: 3px 1px;
      border-radius: 4px;
    }

    .wb-month-day:hover { background: #f5f5f5; }

    .wb-month-dnum {
      font-size: .65rem;
      font-weight: 600;
      color: #777;
      margin-bottom: 1px;
    }

    .wb-month-day svg { width: 13px; height: 13px; }

    .wb-good     { color: #2d7a3f; }
    .wb-medium   { color: #c25e00; }
    .wb-bad      { color: #c62828; }

    .vital-card {
      flex: 1;
      background: #f7f7f7;
      border: 1px solid #e8e8e8;
      border-radius: 10px;
      padding: 16px 10px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7px;
      min-width: 0;
      cursor: pointer;
      transition: background .15s, border-color .15s, transform .1s;
      user-select: none;
    }

    .vital-card:hover {
      background: #f0f0f0;
      border-color: #8b1a1a;
    }

    .vital-card:active {
      transform: scale(.97);
    }

    .vital-card-icon {
      width: 40px; height: 40px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: #fff;
    }
    .vital-card-icon.steps-icon { background: #8b1a1a; }
    .vital-card-icon.pulse-icon { background: #c0392b; }
    .vital-card-icon.spo2-icon  { background: #1565c0; }
    .vital-card-icon.temp-icon  { background: #e06030; }
    .vital-card-icon.sleep-icon     { background: #2a4a9e; }
    .vital-card-icon.wellbeing-icon { background: #5a8a3f; }

    .vital-card-icon svg { width: 20px; height: 20px; }

    .vital-card-value {
      font-size: 1.35rem;
      font-weight: 700;
      color: #222;
      text-align: center;
      line-height: 1.1;
    }

    .vital-card-label {
      font-size: .72rem;
      color: #999;
      text-align: center;
      line-height: 1.3;
    }

    .vital-quality {
      font-size: .72rem;
      font-weight: 700;
      padding: 2px 10px;
      border-radius: 20px;
      margin-top: 2px;
    }
    .vital-quality.good     { background: #e6f4ea; color: #2d7a3f; }
    .vital-quality.moderate { background: #fff3e0; color: #c25e00; }
    .vital-quality.bad      { background: #fde8e8; color: #c62828; }

    /* ── TILE 4 : CALENDAR ───────────────────────────────── */
    .calendar {
      width: 100%;
      font-size: .85rem;
    }

    .cal-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .cal-nav button {
      background: none;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 4px 10px;
      cursor: pointer;
      font-size: .8rem;
      color: #555;
      transition: background .15s;
    }

    .cal-nav button:hover { background: #f0f0f0; }

    .cal-month-title {
      font-weight: 700;
      font-size: .95rem;
      color: #222;
    }

    .cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
    }

    .cal-dow {
      text-align: center;
      font-weight: 600;
      color: #888;
      font-size: .75rem;
      padding: 4px 0 6px;
    }

    .cal-day {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 5px 2px 4px;
      border-radius: 6px;
      cursor: default;
      min-height: 38px;
      transition: background .12s;
    }

    .cal-day:hover { background: #f5f5f5; }

    .cal-day.today {
      background: #8b1a1a;
      color: #fff;
      font-weight: 700;
    }

    .cal-day.today .dot { background: rgba(255,255,255,.7); }

    .cal-day.other-month { color: #ccc; }

    .cal-day .day-num {
      font-size: .85rem;
      line-height: 1;
    }

    .dot {
      width: 5px; height: 5px;
      border-radius: 50%;
      background: #8b1a1a;
      margin-top: 3px;
    }

    .cal-day.other-month .dot { background: #ccc; }

    .cal-day.has-reminder { cursor: pointer; }
    .cal-day.has-reminder:hover { background: #f0e8e8; }
    .cal-day.today.has-reminder:hover { background: #7a1515; }

    .cal-day.selected { outline: 2px solid #8b1a1a; outline-offset: -2px; }
    .cal-day.today.selected { outline-color: rgba(255,255,255,.8); }

    .reminder-list {
      margin-top: 12px;
      border-top: 1px solid #e8e8e8;
      padding-top: 10px;
    }

    .reminder-list-title {
      font-size: .8rem;
      font-weight: 700;
      color: #8b1a1a;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .reminder-item {
      display: grid;
      grid-template-columns: 48px 1fr 68px;
      align-items: start;
      gap: 6px 10px;
      padding: 6px 0;
      border-bottom: 1px solid #f2f2f2;
      font-size: .8rem;
    }

    .reminder-item:last-child { border-bottom: none; }

    .reminder-time {
      font-weight: 600;
      color: #333;
      white-space: nowrap;
    }

    .reminder-title {
      color: #222;
    }

    .reminder-confirmed {
      font-size: .72rem;
      color: #888;
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 3px;
    }

    .double-tick {
      width: 16px;
      height: 9px;
      color: #4caf50;
      flex-shrink: 0;
    }

    /* ── REMINDER VIEW TOGGLE ────────────────────────────── */
    .rem-view-toggle {
      display: flex;
      gap: 2px;
      background: #e8e8e8;
      border-radius: 6px;
      padding: 2px;
    }

    .rem-view-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 3px 5px;
      border-radius: 4px;
      color: #999;
      display: flex;
      align-items: center;
    }
    .rem-view-btn svg { width: 13px; height: 13px; }
    .rem-view-btn:hover { color: #555; }
    .rem-view-btn.rem-view-active { background: #fff; color: #8b1a1a; box-shadow: 0 1px 3px rgba(0,0,0,.12); }

    /* ── REMINDER LIST VIEW ──────────────────────────────── */
    .rem-list-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 0 10px;
      border-bottom: 1px solid #efefef;
      margin-bottom: 4px;
    }

    .rem-list-nav button {
      background: none;
      border: none;
      font-size: 1.3rem;
      cursor: pointer;
      color: #8b1a1a;
      padding: 0 8px;
      line-height: 1;
    }
    .rem-list-nav button:hover { color: #5a1010; }

    .rem-list-title {
      font-size: .85rem;
      font-weight: 700;
      color: #333;
    }

    .rem-list-body {
      overflow-y: auto;
      max-height: 340px;
    }

    .rem-list-day {
      margin-bottom: 10px;
    }

    .rem-list-day-header {
      font-size: .72rem;
      font-weight: 700;
      color: #8b1a1a;
      text-transform: uppercase;
      letter-spacing: .05em;
      padding: 4px 0 4px;
      border-bottom: 1px solid #f0e8e8;
      margin-bottom: 4px;
    }

    .rem-list-empty {
      text-align: center;
      color: #bbb;
      font-size: .82rem;
      padding: 24px 0;
    }