:root {
        --ink: #111111;
        --muted: #7a7a7a;
        --line: #e1e5ea;
        --soft: #f3f5f6;
        --brand: #073b4c;
        --paper: #ffffff;
        --shortcut-bg: #2f6f8f;
        --shortcut-bg-hover: #285f7a;
        --shortcut-bg-active: #214f66;
        --shortcut-text: #ffffff;
        --ui-scale: 1.2;
        --dashboard-width: 1120px;
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        width: 100%;
        min-height: 100%;
        margin: 0;
        padding: 0;
      }

      body {
        min-height: 100vh;
        overflow-x: auto;
        overflow-y: auto;
        background: var(--paper);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        color: var(--ink);
        font-family:
          Arial,
          "Segoe UI",
          sans-serif;
        letter-spacing: 0;
      }

      body.bg-white {
        background-color: #fff;
        background-image: none;
      }

      body.bg-charcoal {
        --ink: rgba(255, 255, 255, 0.92);
        --muted: rgba(255, 255, 255, 0.65);
        --line: rgba(255, 255, 255, 0.06);
        --soft: rgba(255, 255, 255, 0.08);
        --brand: #82b8cf;
        --paper: #1f2937;
        background-color: #1f2937;
        background-image: none;
        color: var(--ink);
        color-scheme: dark;
      }

      body.bg-light-blue {
        background-color: #eaf6ff;
        background-image: none;
      }

      body.bg-pink {
        background-color: #fbeef3;
        background-image: none;
      }

      body.bg-orange {
        background-color: #fdf1e4;
        background-image: none;
      }

      body.bg-velvet {
        background-color: #f2edfa;
        background-image: none;
      }

      body.bg-green {
        background-color: #ebf5ee;
        background-image: none;
      }

      body.bg-charcoal.bg-scene-ocean,
      body.bg-charcoal.bg-scene-night,
      body.bg-charcoal.bg-scene-clouds,
      body.bg-charcoal.bg-scene-aurora {
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: top center;
        background-attachment: scroll;
      }

      body.bg-charcoal.bg-scene-ocean {
        background-color: #03101d;
        background-image: url("bg/ocean.svg");
      }

      body.bg-charcoal.bg-scene-night {
        background-color: #05070f;
        background-image: url("bg/night.svg?v=4");
      }

      body.bg-charcoal.bg-scene-clouds {
        background-color: #0f1421;
        background-image: url("bg/clouds.svg");
      }

      body.bg-charcoal.bg-scene-aurora {
        background-color: #040a12;
        background-image: url("bg/aurora.svg?v=2");
      }

      body.bg-custom-image {
        background-color: #fff;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
      }

      .dashboard-scale,
      .page,
      main {
        background: transparent;
      }

      body.bg-custom-image .zone-title {
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95);
      }

      .dashboard-scale {
        width: calc(var(--dashboard-width) * var(--ui-scale));
        min-height: calc(var(--dashboard-width) * var(--ui-scale));
        margin: 0 auto;
      }

      button,
      input {
        font: inherit;
      }

      button {
        cursor: pointer;
      }

      .page {
        width: var(--dashboard-width);
        min-height: 100vh;
        margin: 0;
        padding: 0 48px 72px;
        direction: ltr;
        transform: scale(var(--ui-scale));
        transform-origin: top left;
      }

      .top-bar {
        position: relative;
        left: 50%;
        width: 1180px;
        min-height: 62px;
        margin: 14px 0 104px;
        padding: 0;
        transform: translateX(-50%);
        display: flex;
        align-items: flex-start;
        gap: 22px;
        z-index: 40;
      }

      .site-logo {
        position: absolute;
        top: 9px;
        left: 50%;
        transform: translateX(-50%);
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        opacity: 0.92;
        transition: opacity 130ms ease;
      }

      .site-logo svg {
        width: auto;
        height: 40px;
        border-radius: 11px;
      }

      .site-logo:hover {
        opacity: 1;
      }

      .weather-card {
        justify-self: start;
        width: 154px;
        height: 58px;
        display: grid;
        grid-template-columns: 1fr 22px;
        grid-template-rows: 14px 24px 14px;
        column-gap: 6px;
        align-items: center;
        padding: 7px 8px 6px 10px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
      }

      .weather-title {
        grid-column: 1 / 3;
        color: var(--muted);
        font-size: 8px;
        font-weight: 700;
        line-height: 1;
      }

      .weather-main {
        display: flex;
        align-items: baseline;
        gap: 5px;
        min-width: 0;
      }

      .weather-city {
        font-size: 12px;
        font-weight: 700;
      }

      .weather-temp {
        font-size: 14px;
        font-weight: 700;
      }

      .sun {
        position: relative;
        justify-self: end;
        width: 18px;
        height: 18px;
        border-radius: 999px;
        background: #ffd166;
        box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.23);
      }

      .weather-bottom {
        grid-column: 1 / 3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 4px;
        color: var(--muted);
        font-size: 8px;
        line-height: 1;
      }

      .refresh-dot {
        width: 17px;
        height: 17px;
        display: inline-grid;
        place-items: center;
        flex: 0 0 auto;
        color: var(--brand);
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 6px;
        font-size: 12px;
        line-height: 1;
      }

      .time-card {
        width: 178px;
        height: 60px;
        justify-self: center;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: 21px 1fr;
        column-gap: 8px;
        align-items: center;
        padding: 9px 13px;
        background: var(--soft);
        border-radius: 14px;
      }

      .day {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        overflow: hidden;
        color: var(--muted);
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .date {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
        overflow: hidden;
        color: var(--muted);
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
        text-overflow: ellipsis;
        align-self: start;
      }

      .clock {
        grid-column: 2;
        grid-row: 1 / 3;
        justify-self: end;
        color: var(--ink);
        font-size: 26px;
        font-weight: 800;
        line-height: 1;
      }

      .actions {
        margin-left: auto;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 5px;
        margin-top: 7px;
        white-space: nowrap;
      }

      .header-primary-actions {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
      }

      .tiny-btn {
        height: 24px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 0 8px;
        color: #334047;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 7px;
        font-size: 10px;
      }

      .tiny-btn svg {
        width: 12px;
        height: 12px;
        stroke-width: 2;
      }

      .icon-btn {
        width: 24px;
        padding: 0;
        justify-content: center;
      }

      .start-page-btn {
        height: 30px;
        padding: 0 16px;
        gap: 6px;
        color: #fff;
        background: linear-gradient(135deg, #10617f, #073b4c);
        border: 0;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.2px;
        box-shadow: 0 3px 10px rgba(7, 59, 76, 0.28);
        transition:
          transform 130ms ease,
          box-shadow 130ms ease,
          filter 130ms ease;
      }

      .start-page-btn svg {
        width: 13px;
        height: 13px;
        stroke-width: 2.4;
      }

      .start-page-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 15px rgba(7, 59, 76, 0.38);
        filter: brightness(1.08);
      }

      .start-page-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(7, 59, 76, 0.3);
      }

      .upgrade-btn {
        min-height: 26px;
        padding: 0 14px;
        color: #4a3305;
        background: linear-gradient(135deg, #ffd166, #f2b83c);
        border: 0;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 800;
        cursor: pointer;
        box-shadow: 0 3px 10px rgba(242, 184, 60, 0.35);
        transition:
          transform 130ms ease,
          box-shadow 130ms ease,
          filter 130ms ease;
      }

      .upgrade-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 15px rgba(242, 184, 60, 0.5);
        filter: brightness(1.04);
      }

      .upgrade-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(242, 184, 60, 0.4);
      }

      .upgrade-btn.ad-free-badge {
        color: #347a55;
        background: rgba(80, 150, 110, 0.1);
        border: 1px solid rgba(80, 150, 110, 0.35);
        box-shadow: none;
        cursor: default;
      }

      .upgrade-btn.ad-free-badge:disabled {
        opacity: 1;
      }

      .home-stage {
        position: relative;
        left: 50%;
        width: 1180px;
        margin: 0;
        display: grid;
        grid-template-columns: 248px 470px 248px;
        column-gap: 107px;
        row-gap: 0;
        align-items: start;
        transform: translateX(-50%);
      }

      .hero {
        width: 470px;
        max-width: 470px;
        margin: 0 auto;
        text-align: center;
      }

      .content-zone {
        width: 248px;
        padding: 18px 16px;
        border: 1px solid rgba(180, 195, 205, 0.14);
        border-radius: 18px;
      }

      .side-column {
        width: 248px;
        display: flex;
        flex-direction: column;
        gap: 18px;
      }

      .side-column-work .content-zone {
        background: rgba(238, 244, 247, 0.12);
        border-color: rgba(180, 195, 205, 0.06);
      }

      .side-column-fun .content-zone {
        background: rgba(238, 248, 250, 0.12);
        border-color: rgba(180, 195, 205, 0.06);
      }

      .zone-heading,
      .zone-foot {
        display: flex;
        align-items: center;
        gap: 9px;
      }

      .zone-heading {
        width: 100%;
      }

      .zone-title {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
        color: #111b20;
        font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI Condensed", Arial, sans-serif;
        font-stretch: condensed;
        font-size: 13px;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
      }

      .zone-title svg {
        width: 14px;
        height: 14px;
        color: var(--brand);
        stroke-width: 2.2;
      }

      .zone-line {
        height: 1px;
        flex: 1 1 auto;
        background: var(--line);
      }

      .zone-add {
        height: 21px;
        padding: 0 8px;
        color: var(--brand);
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 7px;
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        direction: ltr;
        white-space: nowrap;
      }

      .zone-manage {
        color: rgba(17, 27, 32, 0.55);
        background: transparent;
        border-color: transparent;
      }

      .zone-manage:hover {
        color: var(--brand);
        background: #fff;
        border-color: var(--line);
      }

      .zone-grid {
        display: grid;
        grid-template-columns: repeat(4, 46px);
        gap: 12px 8px;
        justify-content: center;
        margin-top: 33px;
      }

      .side-column .zone-grid {
        grid-template-columns: repeat(4, 46px);
        justify-content: center;
        gap: 12px 8px;
        padding: 1px 0 3px;
      }

      .side-column .service-btn {
        width: 46px;
        height: 48px;
      }

      .service-btn {
        width: 46px;
        height: 48px;
        display: inline-flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding: 5px 4px 4px;
        overflow: hidden;
        color: #1f3e4d;
        background: rgba(47, 111, 143, 0.1);
        border: 1px solid rgba(47, 111, 143, 0.16);
        border-radius: 10px;
        font-size: 8px;
        font-weight: 700;
        line-height: 1.1;
        text-decoration: none;
        white-space: normal;
      }

      .service-btn:hover,
      .google-shortcut:hover {
        background: rgba(47, 111, 143, 0.16);
        border-color: rgba(47, 111, 143, 0.24);
      }

      .service-btn:active,
      .google-shortcut:active {
        background: rgba(47, 111, 143, 0.22);
      }

      .service-btn svg {
        width: 10px;
        height: 10px;
        flex: 0 0 auto;
        stroke-width: 2.2;
      }

      .shortcut-item {
        position: relative;
        width: 46px;
        height: 48px;
      }

      .side-column .shortcut-item {
        width: 46px;
        height: 48px;
      }

      .shortcut-item.is-reorderable,
      .shortcut-item.is-reorderable .service-btn {
        cursor: grab;
      }

      .shortcut-item.is-dragging,
      .shortcut-item.is-dragging .service-btn {
        cursor: grabbing;
      }

      .shortcut-item.is-dragging {
        opacity: 0.55;
        z-index: 5;
      }

      .shortcut-item.is-reorderable::after {
        content: "Drag to reorder";
        position: absolute;
        left: 50%;
        bottom: calc(100% + 5px);
        z-index: 12;
        width: max-content;
        max-width: 92px;
        padding: 4px 6px;
        color: #536168;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(180, 190, 200, 0.55);
        border-radius: 7px;
        font-size: 8px;
        line-height: 1;
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, 2px);
        transition:
          opacity 120ms ease,
          transform 120ms ease;
        white-space: nowrap;
      }

      .shortcut-item.is-reorderable:hover::after {
        opacity: 1;
        transform: translate(-50%, 0);
      }

      .google-row .shortcut-item {
        width: 48px;
        height: 50px;
      }

      .ai-zone .shortcut-item {
        width: 48px;
        height: 50px;
      }

      .shortcut-item .service-btn,
      .shortcut-item .google-shortcut {
        width: 100%;
        height: 100%;
      }

      .shortcut-actions {
        position: absolute;
        top: -8px;
        right: -7px;
        display: flex;
        gap: 2px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 120ms ease;
      }

      .shortcut-item:hover .shortcut-actions,
      .shortcut-item:focus-within .shortcut-actions {
        opacity: 1;
        pointer-events: auto;
      }

      .shortcut-action {
        width: 13px;
        height: 13px;
        display: grid;
        place-items: center;
        padding: 0;
        color: #073b4c;
        background: #fff;
        border: 1px solid #e1e5ea;
        border-radius: 999px;
        font-size: 8px;
        line-height: 1;
      }

      .shortcut-icon-wrap {
        width: 18px;
        height: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 18px;
        line-height: 1;
        overflow: hidden;
        vertical-align: middle;
      }

      .shortcut-icon {
        width: 17px;
        height: 17px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 9px;
        line-height: 1;
        text-align: center;
      }

      .shortcut-logo {
        width: 17px;
        height: 17px;
        max-width: 17px;
        max-height: 17px;
        flex: 0 0 auto;
        display: block;
        object-fit: contain;
        border-radius: 3px;
        vertical-align: middle;
      }

      .ai-zone .shortcut-logo {
        width: 17px;
        height: 17px;
        max-width: 17px;
        max-height: 17px;
      }

      .shortcut-item[data-title="chatgpt"] .shortcut-logo {
        width: 16px;
        height: 16px;
        max-width: 16px;
        max-height: 16px;
      }

      .shortcut-title {
        min-width: 0;
        width: 100%;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-align: center;
      }

      .zone-foot {
        justify-content: flex-end;
        margin-top: 24px;
      }

      .zone-foot .zone-line {
        flex: 0 0 82px;
      }

      .ad-slot {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        color: #8a96a3;
        background: rgba(255, 255, 255, 0.78);
        border: 1px solid rgba(180, 190, 200, 0.45);
        border-radius: 12px;
        font-size: 9px;
        line-height: 1;
        user-select: none;
      }

      /* Fixed, clipped boxes so a misbehaving/oversized ins (or Auto-ads
         interference) can never blow out the layout with an empty tall gap. */
      .center-ad-slot {
        width: 322px;
        max-width: 100%;
        height: 102px;
        min-height: 0;
        padding: 0;
        margin: 8px auto;
        overflow: hidden;
      }

      .side-ad-slot {
        width: 236px;
        max-width: 100%;
        height: 62px;
        min-height: 0;
        padding: 0;
        margin-top: 0;
        overflow: hidden;
      }

      /* Lock each ad unit to its fixed size so AdSense (or Auto ads) can't
         inflate the ins to something like 174x600 — a stylesheet !important
         overrides the inline style AdSense sets on the element. */
      .center-ad-slot .adsbygoogle {
        width: 320px !important;
        height: 100px !important;
      }

      .side-ad-slot .adsbygoogle {
        width: 234px !important;
        height: 60px !important;
      }

      .bottom-ad-slot {
        width: 1000px;
        max-width: calc(100% - 32px);
        min-height: 90px;
        margin: 18px auto 16px;
      }

      .affiliate-banner {
        width: fit-content;
        max-width: calc(100% - 32px);
        min-height: 0;
        flex-direction: column;
        gap: 5px;
        padding: 9px 11px;
      }

      .affiliate-label {
        align-self: flex-start;
        color: #97a2ad;
        font-size: 8px;
        letter-spacing: 0.6px;
        text-transform: uppercase;
      }

      .affiliate-row {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        justify-content: center;
        align-items: center;
        width: 100%;
      }

      .affiliate-ad img {
        display: block;
        max-width: 100%;
        height: auto;
        border-radius: 8px;
      }

      body.bg-charcoal .affiliate-label {
        color: rgba(255, 255, 255, 0.5);
      }

      .promo-banner {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        justify-content: stretch;
        overflow: hidden;
        background: rgba(47, 111, 143, 0.045);
      }

      .promo-banner-label {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #536168;
        border-right: 1px solid rgba(180, 190, 200, 0.35);
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
      }

      .promo-banner-copy {
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        padding: 12px 18px;
        text-align: left;
      }

      .promo-banner-copy strong {
        color: #334047;
        font-size: 11px;
        line-height: 1.2;
      }

      .promo-banner-copy span {
        color: #7a858b;
        font-size: 9px;
        line-height: 1.35;
      }

      .bottom-ad-slot + .bottom-bars {
        margin-top: 0;
      }

      body.ad-free .ad-slot {
        display: none !important;
      }

      body.ad-free .ai-zone {
        margin-top: 18px;
      }

      body.ad-free .bottom-ad-slot + .bottom-bars {
        margin-top: 28px;
      }

      .search-shell {
        width: 460px;
        max-width: 90vw;
        height: 43px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        overflow: hidden;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
      }

      .search-btn {
        width: 43px;
        height: 100%;
        flex: 0 0 43px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        color: inherit;
        background: transparent;
        border: 0;
        cursor: pointer;
      }

      .search-btn:hover {
        background: #f5f7f8;
      }

      .search-btn:active {
        background: #edf1f3;
      }

      .search-btn:focus-visible {
        outline: 2px solid #4285f4;
        outline-offset: -3px;
      }

      .search-btn img {
        display: block;
        width: 24px;
        height: 24px;
        object-fit: contain;
      }

      .search-field {
        position: relative;
        flex: 1;
      }

      .search-field svg {
        position: absolute;
        left: 13px;
        top: 50%;
        width: 16px;
        height: 16px;
        transform: translateY(-50%);
        color: #8a969c;
      }

      .search-field input {
        width: 100%;
        height: 100%;
        padding: 0 16px 0 38px;
        color: var(--ink);
        background: transparent;
        border: 0;
        outline: 0;
        direction: ltr;
        font-size: 13px;
      }

      .search-field input::placeholder {
        color: #9aa4a9;
      }

      .google-area {
        position: relative;
        width: 338px;
        max-width: 338px;
        margin: 28px auto 0;
        padding-bottom: 28px;
      }

      .google-row {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(6, 48px);
        column-gap: 10px;
        row-gap: 12px;
        justify-content: start;
        padding-left: 0;
        margin-left: 0;
      }

      .google-shortcut {
        width: 48px;
        height: 50px;
        display: inline-flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding: 5px 4px 4px;
        overflow: hidden;
        color: #1f3e4d;
        background: rgba(47, 111, 143, 0.1);
        border: 1px solid rgba(47, 111, 143, 0.16);
        border-radius: 10px;
        font-size: 8px;
        font-weight: 700;
        line-height: 1.1;
        text-decoration: none;
      }

      .google-shortcut svg {
        width: 10px;
        height: 10px;
        flex: 0 0 auto;
      }

      .add-wrap {
        position: absolute;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .add-line {
        width: 96px;
        height: 1px;
        background: var(--line);
      }

      .add-btn {
        height: 21px;
        padding: 0 8px;
        color: var(--brand);
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 7px;
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        direction: ltr;
        white-space: nowrap;
      }

      .background-control {
        position: relative;
      }

      .location-toggle.is-active {
        color: #073b4c;
        border-color: #b8c9d1;
        background: #f3f7f9;
      }

      .background-menu {
        position: absolute;
        top: 30px;
        right: 0;
        width: 158px;
        max-height: 250px;
        padding: 8px;
        overflow-y: auto;
        z-index: 50;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 8px;
        box-shadow: 0 10px 26px rgba(17, 34, 43, 0.16);
      }

      .background-options {
        display: grid;
        gap: 4px;
      }

      .background-option,
      .background-upload,
      .background-reset,
      .profile-option {
        width: 100%;
        min-height: 24px;
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 0 7px;
        color: #334047;
        background: #fff;
        border: 1px solid transparent;
        border-radius: 5px;
        font-size: 9px;
        text-align: left;
        white-space: nowrap;
      }

      .background-option:hover,
      .background-upload:hover,
      .background-reset:hover,
      .profile-option:hover,
      .background-option.is-active,
      .profile-option.is-active {
        background: #f3f5f6;
        border-color: var(--line);
      }

      .background-swatch {
        width: 12px;
        height: 12px;
        flex: 0 0 auto;
        border: 1px solid #cfd6da;
        border-radius: 3px;
      }

      .swatch-white {
        background: #fff;
      }

      .swatch-black {
        background: #111827;
        border-color: #111827;
      }

      .swatch-light-blue {
        background: #eaf6ff;
      }

      .swatch-pink {
        background: #fbeef3;
      }

      .swatch-orange {
        background: #fdf1e4;
      }

      .swatch-velvet {
        background: #f2edfa;
      }

      .swatch-green {
        background: #ebf5ee;
      }

      .swatch-scene-ocean {
        background: url("bg/ocean.svg") center / cover;
      }

      .swatch-scene-night {
        background: url("bg/night.svg?v=4") center / cover;
      }

      .swatch-scene-clouds {
        background: url("bg/clouds.svg") center / cover;
      }

      .swatch-scene-aurora {
        background: url("bg/aurora.svg?v=2") center / cover;
      }

      .pro-badge {
        margin-left: auto;
        padding: 1px 5px;
        color: #4a3305;
        background: #ffd166;
        border-radius: 999px;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 0.4px;
      }

      body.ad-free .pro-badge {
        display: none;
      }

      .menu-section-label {
        margin: 9px 2px 4px;
        color: #8a96a3;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.5px;
        text-transform: uppercase;
      }

      .profile-options {
        display: grid;
        gap: 4px;
      }

      .profile-dot {
        width: 8px;
        height: 8px;
        flex: 0 0 auto;
        border: 1px solid #9fb0ba;
        border-radius: 999px;
      }

      .profile-option.is-active .profile-dot {
        background: #1d8a52;
        border-color: #1d8a52;
      }

      body.bg-charcoal .menu-section-label {
        color: rgba(255, 255, 255, 0.45);
      }

      body.bg-charcoal .profile-dot {
        border-color: rgba(255, 255, 255, 0.35);
      }

      body.bg-charcoal .profile-option.is-active .profile-dot {
        background: #8fd9ac;
        border-color: #8fd9ac;
      }

      .background-upload {
        margin-top: 5px;
        cursor: pointer;
        border-color: var(--line);
      }

      .background-file {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
      }

      .background-reset {
        margin-top: 5px;
        color: #6b7479;
        border-color: var(--line);
      }

      .ai-zone {
        width: 338px;
        max-width: 338px;
        margin: 0 auto;
      }

      .ai-zone .zone-grid {
        width: 100%;
        grid-template-columns: repeat(6, 48px);
        column-gap: 10px;
        row-gap: 12px;
        justify-content: start;
        padding-left: 0;
        margin-left: 0;
        margin-top: 28px;
      }

      .ai-zone .service-btn {
        width: 48px;
        height: 50px;
        font-size: 8px;
      }

      .ai-zone .zone-foot {
        margin-top: 25px;
      }

      .ai-zone .zone-foot .zone-line {
        flex-basis: 112px;
      }

      .dashboard {
        width: 760px;
        margin: 84px auto 0;
        display: grid;
        grid-template-columns: 220px 1fr 170px;
        gap: 46px;
        align-items: start;
      }

      .panel {
        min-height: 96px;
      }

      .panel-title {
        margin: 0 0 16px;
        color: #536168;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0;
        text-transform: uppercase;
      }

      .shortcut-grid {
        display: grid;
        grid-template-columns: repeat(3, 42px);
        gap: 14px 18px;
      }

      .shortcut-tile {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        color: var(--brand);
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 9px;
      }

      .shortcut-tile svg {
        width: 17px;
        height: 17px;
      }

      .tool-list,
      .news-list {
        display: grid;
        gap: 12px;
      }

      .tool-row,
      .news-row {
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        color: #2b383e;
        border-bottom: 1px solid #eef2f4;
        font-size: 11px;
      }

      .tool-row span,
      .news-row span {
        color: var(--muted);
        font-size: 9px;
      }

      .mini-stack {
        display: grid;
        gap: 14px;
      }

      .mini-card {
        height: 64px;
        padding: 11px 12px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
      }

      .mini-label {
        color: var(--muted);
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase;
      }

      .mini-value {
        margin-top: 9px;
        color: var(--ink);
        font-size: 17px;
        font-weight: 800;
      }

      .widget-area {
        width: 100%;
        max-width: 100%;
        margin: 96px auto 0;
      }

      .widget-toolbar {
        width: 456px;
        margin: 0 auto 10px;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .add-widget-btn {
        height: 21px;
        padding: 0 8px;
        flex: 0 0 auto;
        color: var(--brand);
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 7px;
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
      }

      .add-widget-btn.is-disabled {
        opacity: 0.58;
        cursor: not-allowed;
      }

      .tool-cards {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 8px;
      }

      .micro-card {
        position: relative;
        width: 136px;
        height: 156px;
        flex: 0 0 136px;
        padding: 8px;
        overflow: hidden;
        background: #fff;
        border: 1px solid #e1e5ea;
        border-radius: 10px;
        color: #111;
      }

      .micro-title,
      .bar-title,
      .modal-title {
        font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI Condensed", Arial, sans-serif;
        font-stretch: condensed;
        letter-spacing: 0;
        text-transform: uppercase;
      }

      .micro-title {
        margin-bottom: 6px;
        padding-right: 62px;
        font-size: 9px;
        font-weight: 900;
        line-height: 1.2;
        white-space: nowrap;
      }

      .widget-actions {
        position: absolute;
        top: 4px;
        right: 4px;
        display: flex;
        gap: 2px;
        opacity: 0;
        transition: opacity 120ms ease;
        z-index: 2;
      }

      .micro-card:hover .widget-actions,
      .micro-card:focus-within .widget-actions {
        opacity: 1;
      }

      .widget-action {
        width: 13px;
        height: 13px;
        display: inline-grid;
        place-items: center;
        padding: 0;
        color: #4f5c62;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(17, 17, 17, 0.16);
        border-radius: 4px;
        font-size: 8px;
        line-height: 1;
      }

      .widget-drag-handle {
        cursor: grab;
      }

      .widget-drag-handle:active {
        cursor: grabbing;
      }

      .micro-card.is-widget-dragging {
        opacity: 0.55;
      }

      .calendar-card .micro-title,
      .currency-card .micro-title {
        margin-bottom: 4px;
        line-height: 1.2;
        white-space: normal;
      }

      .todo-card {
        background: #8bc34a;
      }

      .calculator-card {
        background: #d8c4e8;
      }

      .todo-add {
        display: grid;
        grid-template-columns: 1fr 29px;
        gap: 4px;
      }

      .todo-add input,
      .currency-card input,
      .currency-card select,
      .modal-panel input,
      .modal-panel select {
        min-width: 0;
        height: 18px;
        padding: 0 4px;
        border: 1px solid rgba(17, 17, 17, 0.2);
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.88);
        color: #111;
        font-size: 8px;
      }

      .todo-add button,
      .modal-save,
      .modal-close {
        border: 1px solid rgba(17, 17, 17, 0.22);
        border-radius: 4px;
        background: #fff;
        color: #111;
        font-size: 7px;
        font-weight: 800;
      }

      .todo-list {
        margin: 7px 0 0;
        padding: 0 0 0 12px;
        font-size: 8px;
        line-height: 1.5;
      }

      .todo-list li {
        position: relative;
        cursor: pointer;
      }

      .todo-list li.is-complete {
        text-decoration: line-through;
        opacity: 0.58;
      }

      .todo-delete {
        margin-left: 4px;
        padding: 0;
        color: rgba(17, 17, 17, 0.62);
        background: transparent;
        border: 0;
        font-size: 7px;
      }

      .calc-display {
        height: 18px;
        margin-bottom: 5px;
        padding: 2px 4px;
        background: rgba(255, 255, 255, 0.75);
        border: 1px solid rgba(17, 17, 17, 0.16);
        border-radius: 4px;
        font-size: 8px;
        text-align: right;
      }

      .calc-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
      }

      .calc-grid button {
        height: 16px;
        padding: 0;
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(17, 17, 17, 0.15);
        border-radius: 4px;
        color: #111;
        font-size: 7px;
        line-height: 1;
      }

      .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
        font-size: 7px;
        text-align: center;
      }

      .calendar-month {
        margin-bottom: 3px;
        color: var(--muted);
        font-size: 7px;
        font-weight: 700;
        line-height: 1;
      }

      .calendar-grid span {
        height: 11px;
        line-height: 11px;
        border-radius: 3px;
        color: #555;
      }

      .calendar-grid .active-day {
        background: #073b4c;
        color: #fff;
        font-weight: 800;
      }

      .currency-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 18px 18px 18px 1fr;
        gap: 4px;
      }

      .currency-result {
        align-self: end;
        font-size: 10px;
        font-weight: 900;
        color: #073b4c;
      }

      .widget-textarea {
        width: 100%;
        height: 91px;
        resize: none;
        padding: 5px;
        color: #26343a;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 5px;
        font-family: inherit;
        font-size: 8px;
        line-height: 1.35;
      }

      .widget-clock {
        display: grid;
        place-items: center;
        height: 91px;
        color: var(--brand);
        font-size: 22px;
        font-weight: 800;
      }

      .widget-weather {
        display: grid;
        gap: 7px;
        font-size: 8px;
      }

      .widget-weather-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
        font-weight: 800;
      }

      .widget-refresh {
        height: 18px;
        padding: 0 5px;
        color: var(--brand);
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 4px;
        font-size: 7px;
      }

      .time-widget-card .micro-title {
        margin-bottom: 4px;
        line-height: 1.2;
        white-space: normal;
      }

      .time-widget-card input,
      .time-widget-card select {
        min-width: 0;
        width: 100%;
        height: 18px;
        padding: 0 3px;
        color: #26343a;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 4px;
        font-size: 7px;
      }

      .time-inputs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3px;
        margin-bottom: 4px;
      }

      .countdown-duration,
      .pomodoro-inputs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .time-display,
      .countdown-value {
        height: 25px;
        display: grid;
        place-items: center;
        margin-bottom: 4px;
        color: var(--brand);
        background: #f7fafb;
        border: 1px solid var(--line);
        border-radius: 5px;
        font-size: 13px;
        font-weight: 800;
        line-height: 1;
        text-align: center;
      }

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

      .time-actions.two-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .time-actions button {
        height: 18px;
        padding: 0 2px;
        color: #334047;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 4px;
        font-size: 6px;
        font-weight: 700;
        line-height: 1;
      }

      .alarm-time,
      .alarm-label {
        margin-bottom: 4px;
      }

      .alarm-status {
        min-height: 24px;
        display: grid;
        place-items: center;
        margin-bottom: 4px;
        color: var(--muted);
        font-size: 7px;
        font-weight: 700;
        text-align: center;
      }

      .countdown-config {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 50px;
        gap: 3px;
        margin-bottom: 4px;
      }

      .countdown-target {
        margin-bottom: 4px;
      }

      .pomodoro-mode {
        margin-bottom: 4px;
        color: var(--muted);
        font-size: 7px;
        font-weight: 900;
        text-align: center;
      }

      .time-widget-card.is-alerting {
        border-color: #e2a400;
        box-shadow: inset 0 0 0 1px rgba(226, 164, 0, 0.24);
      }

      body.widget-expanded {
        overflow: hidden;
      }

      .expanded-widget-backdrop {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: rgba(0, 0, 0, 0.35);
        backdrop-filter: blur(2px);
      }

      .expanded-widget-backdrop.is-open {
        display: flex;
      }

      .expanded-widget-shell {
        position: relative;
        width: min(680px, 90vw);
        min-height: 420px;
        max-height: 85vh;
        outline: none;
      }

      .expanded-widget-host {
        width: 100%;
        max-height: 85vh;
      }

      .expanded-widget-close {
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 5;
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        padding: 0;
        color: #334047;
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid var(--line);
        border-radius: 8px;
        font-size: 20px;
        line-height: 1;
      }

      .expanded-widget-card {
        width: 100%;
        min-height: 420px;
        height: auto;
        max-height: 85vh;
        display: block;
        flex: none;
        padding: 24px;
        overflow: auto;
        border-radius: 20px;
        box-shadow: 0 8px 24px rgba(17, 17, 17, 0.12);
        cursor: default;
      }

      .expanded-widget-card .micro-title {
        margin-bottom: 22px;
        padding-right: 48px;
        font-size: 18px;
        line-height: 1.2;
        white-space: normal;
      }

      .expanded-widget-card .widget-actions {
        display: none;
      }

      .expanded-widget-card input,
      .expanded-widget-card select,
      .expanded-widget-card textarea {
        min-height: 38px;
        padding: 7px 10px;
        font-size: 14px;
      }

      .expanded-widget-card button {
        min-height: 38px;
        font-size: 13px;
      }

      .expanded-widget-card .todo-add {
        grid-template-columns: minmax(0, 1fr) 84px;
        gap: 8px;
      }

      .expanded-widget-card .todo-list {
        margin-top: 18px;
        padding-left: 24px;
        font-size: 15px;
        line-height: 1.8;
      }

      .expanded-widget-card .todo-delete {
        min-height: 20px;
        margin-left: 8px;
        font-size: 13px;
      }

      .expanded-widget-card .calc-display {
        height: 52px;
        margin-bottom: 12px;
        padding: 10px 14px;
        font-size: 22px;
      }

      .expanded-widget-card .calc-grid {
        gap: 8px;
      }

      .expanded-widget-card .calc-grid button {
        height: 48px;
        font-size: 16px;
      }

      .expanded-widget-card .calendar-month {
        margin-bottom: 14px;
        font-size: 14px;
      }

      .expanded-widget-card .calendar-grid {
        gap: 6px;
        font-size: 14px;
      }

      .expanded-widget-card .calendar-grid span {
        height: 36px;
        line-height: 36px;
        border-radius: 6px;
      }

      .expanded-widget-card.currency-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 42px 42px 42px 1fr;
        gap: 12px;
      }

      .expanded-widget-card .currency-result {
        font-size: 28px;
      }

      .expanded-widget-card .widget-textarea {
        width: 100%;
        height: 300px;
        resize: vertical;
        font-size: 15px;
        line-height: 1.5;
      }

      .expanded-widget-card .widget-clock {
        height: 300px;
        font-size: 54px;
      }

      .expanded-widget-card .widget-weather {
        gap: 18px;
        font-size: 15px;
      }

      .expanded-widget-card .widget-weather-main {
        font-size: 30px;
      }

      .expanded-widget-card.time-widget-card {
        width: 100%;
        min-height: 420px;
        height: auto;
        flex-basis: auto;
      }

      .expanded-widget-card .time-inputs {
        gap: 10px;
        margin-bottom: 14px;
      }

      .expanded-widget-card .time-display,
      .expanded-widget-card .countdown-value {
        height: 76px;
        margin-bottom: 14px;
        font-size: 34px;
      }

      .expanded-widget-card .time-actions {
        gap: 10px;
      }

      .expanded-widget-card .time-actions button {
        height: 42px;
        font-size: 13px;
      }

      .expanded-widget-card .alarm-time,
      .expanded-widget-card .alarm-label,
      .expanded-widget-card .countdown-config,
      .expanded-widget-card .countdown-target,
      .expanded-widget-card .pomodoro-mode {
        margin-bottom: 14px;
      }

      .expanded-widget-card .alarm-status {
        min-height: 58px;
        margin-bottom: 14px;
        font-size: 14px;
      }

      .expanded-widget-card .countdown-config {
        grid-template-columns: minmax(0, 1fr) 150px;
        gap: 10px;
      }

      .expanded-widget-card .pomodoro-mode {
        font-size: 16px;
      }

      @media (max-width: 620px) {
        .expanded-widget-backdrop {
          padding: 14px;
        }

        .expanded-widget-shell,
        .expanded-widget-card {
          min-height: min(420px, 82vh);
        }

        .expanded-widget-card {
          padding: 20px;
        }
      }

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

      /* Accessibility (WCAG 2.1 AA): skip link */
      .skip-link {
        position: fixed;
        top: -60px;
        left: 12px;
        z-index: 9999;
        padding: 10px 16px;
        color: #fff;
        background: #073b4c;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        transition: top 140ms ease;
      }

      .skip-link:focus {
        top: 12px;
        outline: 3px solid #ffd166;
        outline-offset: 2px;
      }

      /* Accessibility: visible keyboard focus for every interactive element */
      a:focus-visible,
      button:focus-visible,
      input:focus-visible,
      select:focus-visible,
      textarea:focus-visible,
      [tabindex]:focus-visible,
      [role="button"]:focus-visible,
      .info-bar:focus-visible,
      .service-btn:focus-visible,
      .google-shortcut:focus-visible {
        outline: 3px solid #1f6fd6;
        outline-offset: 2px;
        border-radius: 6px;
      }

      .search-shell:focus-within {
        outline: 3px solid #1f6fd6;
        outline-offset: 2px;
      }

      body.bg-charcoal a:focus-visible,
      body.bg-charcoal button:focus-visible,
      body.bg-charcoal input:focus-visible,
      body.bg-charcoal select:focus-visible,
      body.bg-charcoal textarea:focus-visible,
      body.bg-charcoal [tabindex]:focus-visible,
      body.bg-charcoal [role="button"]:focus-visible,
      body.bg-charcoal .info-bar:focus-visible,
      body.bg-charcoal .service-btn:focus-visible,
      body.bg-charcoal .search-shell:focus-within {
        outline-color: #ffd166;
      }

      /* Accessibility: respect reduced-motion preference */
      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.001ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.001ms !important;
          scroll-behavior: auto !important;
        }
      }

      .site-footer {
        width: 1000px;
        max-width: 100%;
        margin: 34px auto 0;
        text-align: center;
      }

      .site-footer-tagline {
        margin: 0 0 10px;
        color: #7d8a93;
        font-size: 10px;
        line-height: 1.6;
      }

      .site-footer-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 22px;
      }

      .site-footer-links a {
        color: #66757f;
        font-size: 10px;
        font-weight: 700;
        text-decoration: none;
      }

      .site-footer-links a:hover {
        color: var(--brand);
        text-decoration: underline;
      }

      body.bg-charcoal .site-footer-tagline {
        color: rgba(255, 255, 255, 0.42);
      }

      body.bg-charcoal .site-footer-links a {
        color: rgba(255, 255, 255, 0.55);
      }

      body.bg-charcoal .site-footer-links a:hover {
        color: rgba(255, 255, 255, 0.85);
      }

      .bottom-bars {
        position: relative;
        left: 50%;
        width: 1180px;
        margin: 28px 0 0;
        transform: translateX(-50%);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
      }

      .info-bar {
        min-height: 74px;
        display: grid;
        grid-template-columns: 90px 1fr;
        overflow: hidden;
        color: #2e3c44;
        background: rgba(255, 255, 255, 0.74);
        border: 1px solid var(--line);
        border-radius: 16px;
        cursor: pointer;
        transition:
          background 140ms ease,
          border-color 140ms ease;
      }

      .info-bar:hover,
      .info-bar:focus-visible {
        background: rgba(255, 255, 255, 0.94);
        border-color: #d4dbe1;
        outline: 0;
      }

      .info-bar[data-tracker="news"] {
        background: linear-gradient(120deg, rgba(214, 228, 252, 0.6), rgba(230, 224, 250, 0.5));
        border-color: rgba(150, 170, 222, 0.4);
      }

      .info-bar[data-tracker="markets"] {
        background: linear-gradient(120deg, rgba(228, 221, 250, 0.6), rgba(212, 226, 251, 0.5));
        border-color: rgba(168, 156, 224, 0.4);
      }

      .info-bar[data-tracker="news"]:hover,
      .info-bar[data-tracker="news"]:focus-visible {
        background: linear-gradient(120deg, rgba(214, 228, 252, 0.82), rgba(230, 224, 250, 0.72));
        border-color: rgba(150, 170, 222, 0.6);
      }

      .info-bar[data-tracker="markets"]:hover,
      .info-bar[data-tracker="markets"]:focus-visible {
        background: linear-gradient(120deg, rgba(228, 221, 250, 0.82), rgba(212, 226, 251, 0.72));
        border-color: rgba(168, 156, 224, 0.6);
      }

      .bar-title {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border-right: 1px solid var(--line);
        color: var(--brand);
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
      }

      .bar-title svg {
        width: 13px;
        height: 13px;
      }

      .bar-fill {
        display: flex;
        align-items: center;
        min-width: 0;
        overflow: hidden;
        padding: 0 18px;
        color: #3a4750;
        font-size: 12px;
        font-weight: 700;
      }

      .bar-rows {
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        padding: 9px 18px;
      }

      .bar-row {
        min-width: 0;
        display: flex;
        align-items: center;
        height: 27px;
        overflow: hidden;
      }

      .bar-row + .bar-row {
        border-top: 1px solid rgba(190, 200, 210, 0.3);
      }

      .bar-indices-row {
        gap: 18px;
        white-space: nowrap;
      }

      .index-chip {
        display: inline-flex;
        align-items: baseline;
        gap: 5px;
        font-size: 11.5px;
        font-weight: 700;
      }

      .tick-move {
        font-size: 10.5px;
        font-weight: 800;
        color: #6b7880;
      }

      .tick-up {
        color: #1d8a52;
      }

      .tick-down {
        color: #c2453a;
      }

      .bar-econews-row {
        font-size: 11.5px;
        font-weight: 600;
        color: #55636c;
      }

      .ticker-text {
        white-space: nowrap;
      }

      .news-headline {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 7px;
        white-space: nowrap;
      }

      .news-category {
        flex: 0 0 auto;
        color: rgba(46, 60, 68, 0.55);
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase;
      }

      .news-headline-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .tracker-open-cue {
        flex: 0 0 auto;
        margin-left: auto;
        padding-left: 10px;
        color: rgba(46, 60, 68, 0.6);
        font-size: 10px;
        font-weight: 800;
      }

      .economic-ticker {
        display: inline-flex;
        align-items: center;
        gap: 34px;
        min-width: max-content;
        white-space: nowrap;
        animation: economic-ticker-scroll 70s linear infinite;
      }

      .economic-ticker-copy {
        white-space: nowrap;
      }

      .indices-copy {
        display: inline-flex;
        align-items: center;
        gap: 22px;
      }

      .info-bar:hover .economic-ticker {
        animation-play-state: paused;
      }

      @keyframes economic-ticker-scroll {
        from { transform: translateX(0); }
        to { transform: translateX(calc(-50% - 17px)); }
      }

      @media (prefers-reduced-motion: reduce) {
        .economic-ticker {
          animation: none;
        }

        .economic-ticker-copy[aria-hidden="true"] {
          display: none;
        }
      }

      .modal-backdrop {
        position: fixed;
        inset: 0;
        display: none;
        place-items: center;
        background: rgba(255, 255, 255, 0.56);
        z-index: 20;
      }

      .modal-backdrop.is-open {
        display: grid;
      }

      .modal-panel {
        width: 238px;
        padding: 16px;
        background: #fff;
        border: 1px solid #e1e5ea;
        border-radius: 12px;
      }

      .tracker-modal-panel {
        position: relative;
        width: min(680px, 92vw);
        max-height: 82vh;
        overflow: auto;
        padding: 20px;
      }

      .tracker-modal-close {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
        padding: 0;
        color: #4f5c62;
        background: #fff;
        border: 1px solid #e1e5ea;
        border-radius: 7px;
        font-size: 14px;
        line-height: 1;
      }

      .tracker-details-list {
        display: grid;
        gap: 10px;
      }

      .tracker-detail-item {
        padding: 12px;
        background: rgba(248, 250, 249, 0.94);
        border: 1px solid rgba(155, 185, 150, 0.24);
        border-radius: 12px;
      }

      .tracker-detail-item h3 {
        margin: 0 0 6px;
        color: #1f3e34;
        font-size: 13px;
        line-height: 1.3;
      }

      .tracker-detail-item p {
        margin: 0 0 7px;
        color: #31433a;
        font-size: 11px;
        line-height: 1.45;
      }

      .tracker-detail-meta {
        color: rgba(49, 67, 58, 0.68);
        font-size: 9px;
        font-weight: 700;
      }

      .tracker-detail-link {
        display: inline-flex;
        margin-top: 9px;
        color: #2f6f8f;
        font-size: 10px;
        font-weight: 800;
        text-decoration: none;
      }

      .tracker-detail-link:hover {
        text-decoration: underline;
      }

      .tracker-empty {
        margin: 0;
        color: #31433a;
        font-size: 12px;
      }

      .modal-title {
        margin: 0 0 14px;
        color: #111;
        font-size: 13px;
        font-weight: 900;
      }

      .modal-panel label {
        display: grid;
        gap: 5px;
        margin-bottom: 10px;
        color: #7a7a7a;
        font-size: 9px;
        font-weight: 700;
      }

      .location-modal-panel {
        width: 252px;
      }

      .location-note {
        margin: 2px 0 0;
        color: #7a7a7a;
        font-size: 8px;
        line-height: 1.45;
      }

      .upgrade-modal-panel {
        width: 292px;
      }

      .upgrade-subtitle {
        margin: 0 0 13px;
        color: #58656c;
        font-size: 10px;
        line-height: 1.5;
      }

      .upgrade-benefits {
        display: grid;
        gap: 6px;
        margin: 0 0 14px;
        padding-left: 17px;
        color: #334047;
        font-size: 9px;
        line-height: 1.35;
      }

      .upgrade-purchase-btn {
        width: 100%;
        min-height: 30px;
        color: #fff;
        background: #2f6f8f;
        border: 1px solid #2f6f8f;
        border-radius: 8px;
        font-size: 10px;
        font-weight: 800;
        cursor: pointer;
      }

      .upgrade-purchase-btn:hover {
        background: #285f7a;
      }

      .upgrade-restore-btn {
        display: block;
        margin: 10px auto 0;
        padding: 0;
        color: #2f6f8f;
        background: transparent;
        border: 0;
        font-size: 9px;
        text-decoration: underline;
        cursor: pointer;
      }

      .upgrade-note {
        margin: 10px 0 0;
        color: #8a969c;
        font-size: 8px;
        text-align: center;
      }

      .modal-actions {
        display: flex;
        justify-content: flex-end;
        gap: 7px;
        margin-top: 13px;
      }

      .modal-save {
        color: #fff;
        background: #073b4c;
        border-color: #073b4c;
      }

      .modal-save,
      .modal-close {
        height: 23px;
        padding: 0 10px;
      }

      .persistence-banner {
        position: fixed;
        right: 22px;
        bottom: 22px;
        width: 344px;
        padding: 16px 18px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: #fff;
        border: 1px solid rgba(242, 184, 60, 0.55);
        border-left: 5px solid #f2b83c;
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(17, 34, 43, 0.22);
        z-index: 90;
      }

      .persistence-banner[hidden] {
        display: none;
      }

      .persistence-banner-copy {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .persistence-banner-copy strong {
        color: #1d2b33;
        font-size: 14px;
      }

      .persistence-banner-copy span {
        color: #4a5860;
        font-size: 12.5px;
        line-height: 1.55;
      }

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

      .persistence-account-btn {
        padding: 8px 15px;
        color: #fff;
        background: linear-gradient(135deg, #10617f, #073b4c);
        border: 0;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
      }

      .persistence-account-btn:hover {
        filter: brightness(1.08);
      }

      .persistence-backup-btn {
        padding: 8px 13px;
        color: #10617f;
        background: transparent;
        border: 1px solid rgba(16, 97, 127, 0.4);
        border-radius: 8px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
      }

      .persistence-backup-btn:hover {
        background: rgba(16, 97, 127, 0.07);
      }

      .persistence-dismiss-btn {
        padding: 8px 13px;
        color: #5c6b74;
        background: transparent;
        border: 1px solid var(--line);
        border-radius: 8px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
      }

      body.bg-charcoal .persistence-banner {
        background: #262c35;
        border-color: rgba(242, 184, 60, 0.45);
        border-left-color: #f2b83c;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
      }

      body.bg-charcoal .persistence-banner-copy strong {
        color: rgba(255, 255, 255, 0.92);
      }

      body.bg-charcoal .persistence-banner-copy span {
        color: rgba(255, 255, 255, 0.66);
      }

      body.bg-charcoal .persistence-dismiss-btn {
        color: rgba(255, 255, 255, 0.66);
        border-color: rgba(255, 255, 255, 0.14);
      }

      body.bg-charcoal .persistence-backup-btn {
        color: #8fc6dd;
        border-color: rgba(143, 198, 221, 0.4);
      }

      .account-toggle.is-signed-in {
        color: #1d8a52;
        border-color: rgba(29, 138, 82, 0.45);
        background: rgba(29, 138, 82, 0.07);
      }

      body.bg-charcoal .account-toggle.is-signed-in {
        color: #8fd9ac;
        border-color: rgba(143, 217, 172, 0.35);
        background: rgba(143, 217, 172, 0.1);
      }

      .account-modal-panel {
        position: relative;
        width: 380px;
        max-width: calc(100vw - 40px);
      }

      .account-note {
        margin: 12px 0 0;
        color: #4a5860;
        font-size: 13px;
        line-height: 1.55;
      }

      .account-form {
        display: flex;
        gap: 8px;
        margin-top: 14px;
      }

      .account-form .account-email {
        flex: 1 1 auto;
        min-width: 0;
        height: 34px;
        padding: 0 10px;
        font-size: 13px;
        border: 1px solid var(--line);
        border-radius: 8px;
      }

      .account-send-btn {
        flex: 0 0 auto;
        padding: 0 14px;
        height: 34px;
        color: #fff;
        background: linear-gradient(135deg, #10617f, #073b4c);
        border: 0;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
      }

      .account-send-btn:hover {
        filter: brightness(1.08);
      }

      .account-send-btn:disabled {
        opacity: 0.6;
        cursor: wait;
      }

      .account-status {
        min-height: 18px;
        margin: 10px 0 0;
        color: #1d8a52;
        font-size: 12.5px;
        font-weight: 700;
      }

      .account-status.is-error {
        color: #c2453a;
      }

      .account-sync-status {
        margin: 8px 0 0;
        color: #5c6b74;
        font-size: 12.5px;
      }

      .account-actions-row {
        display: flex;
        gap: 8px;
        margin-top: 14px;
      }

      .account-sync-btn,
      .account-signout-btn {
        padding: 7px 13px;
        color: #10617f;
        background: transparent;
        border: 1px solid rgba(16, 97, 127, 0.4);
        border-radius: 8px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
      }

      .account-sync-btn:hover,
      .account-signout-btn:hover {
        background: rgba(16, 97, 127, 0.07);
      }

      .account-google-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        margin-top: 14px;
        padding: 10px 14px;
        color: #17242b;
        background: #fff;
        border: 1px solid #dadce0;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
      }

      .account-google-btn:hover {
        background: #f7f8f9;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
      }

      .account-or {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 12px 0 2px;
        color: #93a1a9;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .account-or::before,
      .account-or::after {
        content: "";
        flex: 1;
        height: 1px;
        background: rgba(16, 97, 127, 0.18);
      }

      .account-history {
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px solid rgba(16, 97, 127, 0.16);
      }

      .account-history-label {
        display: block;
        font-size: 12px;
        font-weight: 800;
        color: #10617f;
        margin-bottom: 7px;
      }

      .account-history-row {
        display: flex;
        gap: 8px;
      }

      .account-history-select {
        flex: 1 1 auto;
        min-width: 0;
        height: 34px;
        padding: 0 8px;
        border: 1px solid rgba(16, 97, 127, 0.35);
        border-radius: 8px;
        font-size: 12.5px;
        background: #fff;
        color: #17242b;
      }

      .account-history-restore {
        flex: 0 0 auto;
        padding: 0 14px;
        height: 34px;
        color: #fff;
        background: linear-gradient(135deg, #10617f, #073b4c);
        border: 0;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
      }

      .account-history-restore:disabled {
        opacity: 0.5;
        cursor: default;
      }

      .account-history-status {
        min-height: 16px;
        margin: 7px 0 0;
        font-size: 12px;
        color: #10617f;
      }

      .account-history-hint {
        margin: 4px 0 0;
        font-size: 11.5px;
        color: #7d8a92;
        line-height: 1.5;
      }

      body.bg-charcoal .account-google-btn {
        color: #17242b;
        background: #fff;
      }

      body.bg-charcoal .account-history-select {
        color: rgba(255, 255, 255, 0.88);
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.14);
      }

      body.bg-charcoal .account-history-label {
        color: #8fc6dd;
      }

      body.bg-charcoal .account-note,
      body.bg-charcoal .account-sync-status {
        color: rgba(255, 255, 255, 0.66);
      }

      body.bg-charcoal .account-form .account-email {
        color: rgba(255, 255, 255, 0.88);
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.14);
      }

      body.bg-charcoal .account-sync-btn,
      body.bg-charcoal .account-signout-btn,
      body.bg-charcoal .persistence-backup-btn {
        color: #8fc6dd;
        border-color: rgba(143, 198, 221, 0.4);
      }

      .toast {
        position: fixed;
        right: 24px;
        bottom: 24px;
        min-width: 156px;
        padding: 10px 13px;
        opacity: 0;
        pointer-events: none;
        transform: translateY(8px);
        transition: opacity 160ms ease, transform 160ms ease;
        background: #073b4c;
        color: #fff;
        border-radius: 9px;
        font-size: 11px;
        z-index: 30;
      }

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

      body.bg-charcoal .weather-card,
      body.bg-charcoal .time-card,
      body.bg-charcoal .search-shell,
      body.bg-charcoal .content-zone,
      body.bg-charcoal .mini-card,
      body.bg-charcoal .shortcut-tile,
      body.bg-charcoal .micro-card,
      body.bg-charcoal .background-menu,
      body.bg-charcoal .modal-panel,
      body.bg-charcoal .expanded-widget-card {
        color: var(--ink);
        background: rgba(255, 255, 255, 0.075);
        border-color: rgba(255, 255, 255, 0.06);
      }

      body.bg-charcoal .background-menu {
        background: #272d36;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
      }

      body.bg-charcoal .side-column-work .content-zone,
      body.bg-charcoal .side-column-fun .content-zone {
        background: rgba(255, 255, 255, 0.012);
        border-color: rgba(255, 255, 255, 0.015);
      }

      body.bg-charcoal .todo-card {
        background: rgba(139, 195, 74, 0.14);
      }

      body.bg-charcoal .calculator-card {
        background: rgba(216, 196, 232, 0.12);
      }

      body.bg-charcoal .zone-title,
      body.bg-charcoal .weather-city,
      body.bg-charcoal .weather-temp,
      body.bg-charcoal .clock,
      body.bg-charcoal .micro-title,
      body.bg-charcoal .mini-value,
      body.bg-charcoal .modal-title,
      body.bg-charcoal .tracker-detail-item h3 {
        color: rgba(255, 255, 255, 0.92);
      }

      body.bg-charcoal .weather-title,
      body.bg-charcoal .weather-bottom,
      body.bg-charcoal .day,
      body.bg-charcoal .date,
      body.bg-charcoal .updated-text,
      body.bg-charcoal .panel-title,
      body.bg-charcoal .mini-label,
      body.bg-charcoal .calendar-month,
      body.bg-charcoal .alarm-status,
      body.bg-charcoal .pomodoro-mode,
      body.bg-charcoal .modal-panel label,
      body.bg-charcoal .location-note,
      body.bg-charcoal .upgrade-note,
      body.bg-charcoal .tracker-detail-meta {
        color: rgba(255, 255, 255, 0.62);
      }

      body.bg-charcoal .tiny-btn,
      body.bg-charcoal .refresh-dot,
      body.bg-charcoal .zone-add,
      body.bg-charcoal .add-btn,
      body.bg-charcoal .add-widget-btn,
      body.bg-charcoal .widget-refresh,
      body.bg-charcoal .time-actions button,
      body.bg-charcoal .tracker-modal-close,
      body.bg-charcoal .expanded-widget-close {
        color: rgba(255, 255, 255, 0.82);
        background: rgba(255, 255, 255, 0.07);
        border-color: rgba(255, 255, 255, 0.07);
      }

      body.bg-charcoal .tiny-btn:hover,
      body.bg-charcoal .zone-add:hover,
      body.bg-charcoal .add-btn:hover,
      body.bg-charcoal .add-widget-btn:hover,
      body.bg-charcoal .time-actions button:hover {
        background: rgba(255, 255, 255, 0.11);
      }

      body.bg-charcoal .site-logo svg {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
      }

      body.bg-charcoal .start-page-btn,
      body.bg-charcoal .start-page-btn:hover {
        color: #fff;
        background: linear-gradient(135deg, #1a7ba0, #0f5b76);
        border-color: transparent;
      }

      body.bg-charcoal .upgrade-btn {
        color: #4a3305;
        background: linear-gradient(135deg, #ffd166, #f2b83c);
      }

      body.bg-charcoal .zone-manage {
        color: rgba(255, 255, 255, 0.55);
        background: transparent;
        border-color: transparent;
      }

      body.bg-charcoal .zone-manage:hover {
        color: rgba(255, 255, 255, 0.85);
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.08);
      }

      body.bg-charcoal .service-btn,
      body.bg-charcoal .google-shortcut {
        color: rgba(255, 255, 255, 0.84);
        background: rgba(88, 151, 181, 0.16);
        border-color: rgba(130, 184, 207, 0.12);
      }

      body.bg-charcoal .service-btn:hover,
      body.bg-charcoal .google-shortcut:hover {
        background: rgba(88, 151, 181, 0.23);
        border-color: rgba(130, 184, 207, 0.2);
      }

      body.bg-charcoal .shortcut-action,
      body.bg-charcoal .widget-action {
        color: rgba(255, 255, 255, 0.78);
        background: #20242b;
        border-color: rgba(255, 255, 255, 0.08);
      }

      body.bg-charcoal .shortcut-item.is-reorderable::after {
        color: rgba(255, 255, 255, 0.7);
        background: rgba(28, 32, 39, 0.97);
        border-color: rgba(255, 255, 255, 0.08);
      }

      body.bg-charcoal .search-btn:hover,
      body.bg-charcoal .background-option:hover,
      body.bg-charcoal .background-upload:hover,
      body.bg-charcoal .background-reset:hover,
      body.bg-charcoal .profile-option:hover,
      body.bg-charcoal .background-option.is-active,
      body.bg-charcoal .profile-option.is-active {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.07);
      }

      body.bg-charcoal .search-field input,
      body.bg-charcoal .background-option,
      body.bg-charcoal .background-upload,
      body.bg-charcoal .background-reset,
      body.bg-charcoal .profile-option {
        color: rgba(255, 255, 255, 0.86);
      }

      body.bg-charcoal .background-option,
      body.bg-charcoal .background-upload,
      body.bg-charcoal .background-reset,
      body.bg-charcoal .profile-option {
        background: transparent;
        border-color: rgba(255, 255, 255, 0.06);
      }

      body.bg-charcoal .search-field input::placeholder {
        color: rgba(255, 255, 255, 0.45);
      }

      body.bg-charcoal input::placeholder,
      body.bg-charcoal textarea::placeholder {
        color: rgba(255, 255, 255, 0.45);
      }

      body.bg-charcoal .location-toggle.is-active {
        color: rgba(255, 255, 255, 0.88);
        background: rgba(130, 184, 207, 0.12);
        border-color: rgba(130, 184, 207, 0.2);
      }

      body.bg-charcoal .swatch-black {
        background: #1f2937;
        border-color: rgba(255, 255, 255, 0.16);
      }

      body.bg-charcoal .ad-slot {
        color: rgba(255, 255, 255, 0.45);
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.06);
      }

      body.bg-charcoal .promo-banner {
        background: rgba(255, 255, 255, 0.07);
      }

      body.bg-charcoal .promo-banner-label {
        color: rgba(255, 255, 255, 0.62);
        border-color: rgba(255, 255, 255, 0.06);
      }

      body.bg-charcoal .promo-banner-copy strong {
        color: rgba(255, 255, 255, 0.9);
      }

      body.bg-charcoal .promo-banner-copy span {
        color: rgba(255, 255, 255, 0.62);
      }

      body.bg-charcoal .info-bar {
        color: rgba(255, 255, 255, 0.86);
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.07);
      }

      body.bg-charcoal .info-bar:hover,
      body.bg-charcoal .info-bar:focus-visible {
        background: rgba(255, 255, 255, 0.085);
        border-color: rgba(255, 255, 255, 0.12);
      }

      body.bg-charcoal .info-bar[data-tracker="news"] {
        background: linear-gradient(120deg, rgba(120, 150, 224, 0.12), rgba(150, 130, 224, 0.09));
        border-color: rgba(150, 165, 224, 0.16);
      }

      body.bg-charcoal .info-bar[data-tracker="markets"] {
        background: linear-gradient(120deg, rgba(150, 130, 224, 0.12), rgba(120, 150, 224, 0.09));
        border-color: rgba(165, 150, 224, 0.16);
      }

      body.bg-charcoal .info-bar[data-tracker="news"]:hover,
      body.bg-charcoal .info-bar[data-tracker="markets"]:hover {
        background: linear-gradient(120deg, rgba(140, 160, 230, 0.18), rgba(160, 145, 230, 0.14));
      }

      body.bg-charcoal .bar-title {
        color: rgba(255, 255, 255, 0.86);
        border-color: rgba(255, 255, 255, 0.07);
      }

      body.bg-charcoal .bar-fill,
      body.bg-charcoal .tracker-open-cue,
      body.bg-charcoal .news-category {
        color: rgba(255, 255, 255, 0.66);
      }

      body.bg-charcoal .bar-row + .bar-row {
        border-color: rgba(255, 255, 255, 0.09);
      }

      body.bg-charcoal .tick-up {
        color: #8fd9ac;
      }

      body.bg-charcoal .tick-down {
        color: #f09c93;
      }

      body.bg-charcoal .bar-econews-row {
        color: rgba(255, 255, 255, 0.6);
      }

      body.bg-charcoal .todo-add input,
      body.bg-charcoal .currency-card input,
      body.bg-charcoal .currency-card select,
      body.bg-charcoal .modal-panel input,
      body.bg-charcoal .modal-panel select,
      body.bg-charcoal .widget-textarea,
      body.bg-charcoal .time-widget-card input,
      body.bg-charcoal .time-widget-card select,
      body.bg-charcoal .calc-display,
      body.bg-charcoal .time-display,
      body.bg-charcoal .countdown-value {
        color: rgba(255, 255, 255, 0.9);
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.07);
      }

      body.bg-charcoal .todo-add button,
      body.bg-charcoal .calc-grid button,
      body.bg-charcoal .modal-close {
        color: rgba(255, 255, 255, 0.84);
        background: rgba(255, 255, 255, 0.09);
        border-color: rgba(255, 255, 255, 0.07);
      }

      body.bg-charcoal .calendar-grid span,
      body.bg-charcoal .tool-row,
      body.bg-charcoal .news-row,
      body.bg-charcoal .tracker-detail-item p,
      body.bg-charcoal .tracker-empty,
      body.bg-charcoal .upgrade-subtitle,
      body.bg-charcoal .upgrade-benefits {
        color: rgba(255, 255, 255, 0.68);
      }

      body.bg-charcoal .tool-row,
      body.bg-charcoal .news-row {
        border-bottom-color: rgba(255, 255, 255, 0.06);
      }

      body.bg-charcoal .todo-delete {
        color: rgba(255, 255, 255, 0.58);
      }

      body.bg-charcoal .currency-result,
      body.bg-charcoal .widget-clock,
      body.bg-charcoal .time-display,
      body.bg-charcoal .countdown-value,
      body.bg-charcoal .tracker-detail-link,
      body.bg-charcoal .upgrade-restore-btn {
        color: #8fc4d8;
      }

      body.bg-charcoal .calendar-grid .active-day {
        color: rgba(255, 255, 255, 0.94);
        background: #2f6f8f;
      }

      body.bg-charcoal .tracker-detail-item {
        background: rgba(255, 255, 255, 0.055);
        border-color: rgba(255, 255, 255, 0.06);
      }

      body.bg-charcoal .modal-backdrop {
        background: rgba(0, 0, 0, 0.58);
      }

      body.bg-charcoal .modal-panel,
      body.bg-charcoal .expanded-widget-card {
        background: rgba(24, 28, 34, 0.97);
      }

      @media (max-width: 900px) {
        .dashboard-scale {
          width: calc(var(--dashboard-width) * var(--ui-scale));
          min-height: calc(var(--dashboard-width) * var(--ui-scale));
          margin: 0;
        }

        .page {
          padding: 8px 22px 56px;
        }

        .top-bar {
          position: static;
          left: auto;
          width: 100%;
          min-height: 150px;
          margin: 10px auto 96px;
          padding: 0;
          transform: none;
          flex-wrap: wrap;
          row-gap: 14px;
        }

        .site-logo {
          position: static;
          order: -1;
          width: 100%;
          justify-content: center;
          transform: none;
        }

        .weather-card {
          justify-self: start;
        }

        .time-card {
          justify-self: center;
        }

        .actions {
          justify-self: start;
          margin-top: 0;
          flex-wrap: wrap;
        }

        .home-stage {
          position: static;
          left: auto;
          width: min(100%, 470px);
          margin: 0 auto;
          display: flex;
          flex-direction: column;
          align-items: center;
          transform: none;
        }

        .hero {
          width: 100%;
          order: 1;
        }

        .content-zone {
          width: 100%;
          margin: 0;
        }

        .side-column {
          width: min(100%, 248px);
          margin-top: 46px;
          order: 2;
        }

        .search-shell,
        .google-area,
        .ai-zone,
        .widget-area,
        .tool-cards,
        .bottom-bars,
        .dashboard {
          width: min(100%, 420px);
        }

        .tool-cards {
          gap: 12px;
        }

        .widget-toolbar {
          width: min(100%, 420px);
        }

        .bottom-bars {
          position: static;
          left: auto;
          margin: 28px auto 0;
          transform: none;
          grid-template-columns: 1fr;
        }

        .info-bar {
          width: 100%;
        }

        .ai-zone .zone-grid {
          grid-template-columns: repeat(3, 48px);
          justify-content: start;
        }

        .dashboard {
          grid-template-columns: 1fr;
          gap: 38px;
        }
      }