* {
      box-sizing: border-box;
    }

    :root {
      --background: #f6f7f9;
      --surface: #ffffff;
      --text: #171717;
      --muted: #5b5f68;
      --border: #dbe0e7;
      --input-border: #cfd4dc;
      --primary: #111827;
      --primary-hover: #263244;
      --secondary: #e5e7eb;
      --secondary-hover: #d1d5db;
      --danger: #dc2626;
      --danger-hover: #b91c1c;
      --success: #16a34a;
      --badge-bg: #eef2ff;
      --badge-text: #3730a3;
      --danger-badge-bg: #fee2e2;
      --danger-badge-text: #991b1b;
      --warning-badge-bg: #fef3c7;
      --warning-badge-text: #92400e;
      --success-badge-bg: #dcfce7;
      --success-badge-text: #166534;
    }

    body.dark {
      --background: #111827;
      --surface: #1f2937;
      --text: #f9fafb;
      --muted: #c9d1dd;
      --border: #374151;
      --input-border: #4b5563;
      --primary: #2563eb;
      --primary-hover: #1d4ed8;
      --secondary: #374151;
      --secondary-hover: #4b5563;
      --badge-bg: #312e81;
      --badge-text: #e0e7ff;
      --danger-badge-bg: #7f1d1d;
      --danger-badge-text: #fee2e2;
      --warning-badge-bg: #78350f;
      --warning-badge-text: #fef3c7;
      --success-badge-bg: #14532d;
      --success-badge-text: #dcfce7;
    }

    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: var(--background);
      color: var(--text);
    }

    [hidden] {
      display: none !important;
    }

    .auth-screen {
      display: grid;
      min-height: 100vh;
      place-items: center;
      padding: 32px;
      background: var(--background);
    }

    .auth-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
      gap: 28px;
      align-items: stretch;
      width: min(980px, 100%);
    }

    .auth-intro,
    .auth-card {
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      box-shadow: 0 18px 45px rgba(17, 24, 39, 0.08);
    }

    .auth-intro {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 430px;
      padding: 34px;
    }

    .auth-logo {
      width: min(340px, 100%);
      height: 92px;
      object-fit: cover;
      object-position: 50% 50%;
    }

    .auth-card-logo {
      width: 74px;
      height: 74px;
      border-radius: 18px;
      object-fit: cover;
    }

    .auth-kicker,
    .auth-card-label {
      width: fit-content;
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 6px 10px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0;
    }

    .auth-intro h1 {
      max-width: 560px;
      margin: 40px 0 14px;
      font-size: 54px;
      line-height: 1;
    }

    .auth-intro p {
      max-width: 520px;
      margin: 0;
      font-size: 17px;
      line-height: 1.6;
    }

    .auth-highlights {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 32px;
    }

    .auth-highlights span {
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 8px 12px;
      color: var(--text);
      background: var(--background);
      font-size: 14px;
    }

    .auth-preview-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 18px;
    }

    .auth-preview-grid article {
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px;
      background: var(--background);
    }

    .auth-preview-grid strong,
    .auth-preview-grid span {
      display: block;
    }

    .auth-preview-grid strong {
      margin-bottom: 6px;
      font-size: 14px;
    }

    .auth-preview-grid span {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }

    .auth-card {
      display: grid;
      align-content: center;
      grid-template-columns: 1fr;
      gap: 14px;
      padding: 34px;
    }

    .auth-card h2 {
      margin: 12px 0 0;
      font-size: 30px;
      line-height: 1.1;
    }

    .auth-card p {
      margin: 0 0 8px;
      line-height: 1.5;
    }

    .google-button {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      width: 100%;
      min-height: 52px;
      margin-top: 6px;
      font-weight: 700;
    }

    .google-button:disabled,
    button:disabled {
      cursor: wait;
      opacity: 0.72;
    }

    .google-mark {
      display: grid;
      width: 26px;
      height: 26px;
      place-items: center;
      border-radius: 50%;
      background: white;
      color: #1f2937;
      font-weight: 800;
    }

    .button-spinner {
      width: 18px;
      height: 18px;
      border: 2px solid rgba(255, 255, 255, 0.45);
      border-top-color: white;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

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

    .auth-message {
      min-height: 22px;
      color: var(--danger);
      font-size: 14px;
    }

    .auth-legal-links {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      font-size: 14px;
    }

    .auth-legal-links a {
      color: var(--muted);
      font-weight: 700;
      text-decoration: none;
    }

    .auth-legal-links a:hover {
      color: var(--text);
      text-decoration: underline;
    }

    main {
      width: min(1180px, calc(100% - 32px));
      margin: 40px auto;
    }

    .app-header {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 20px;
      align-items: end;
      margin-bottom: 24px;
    }

    .header-logo {
      display: block;
      width: min(240px, 100%);
      height: 56px;
      margin-bottom: 10px;
      object-fit: cover;
      object-position: 50% 50%;
    }

    h1 {
      margin: 0 0 8px;
      font-size: 32px;
    }

    p {
      margin: 0 0 24px;
      color: var(--muted);
    }

    .feature-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }

    .nav-button {
      min-height: 40px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
    }

    .nav-button:hover,
    .nav-button.active {
      background: var(--primary);
      color: white;
    }

    .feature-section {
      display: none;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 18px;
      background: color-mix(in srgb, var(--surface) 65%, transparent);
    }

    .feature-section.active {
      display: block;
    }

    .onboarding-panel,
    .editing-banner {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 18px;
      background: var(--surface);
    }

    .onboarding-panel h2 {
      margin: 0 0 6px;
      font-size: 20px;
    }

    .onboarding-panel p {
      margin: 0;
    }

    .onboarding-panel[hidden],
    .editing-banner[hidden] {
      display: none;
    }

    .editing-banner {
      justify-content: flex-start;
      color: var(--muted);
    }

    form,
    .notes-row,
    .controls,
    .list-controls,
    .settings-grid,
    .settings-groups,
    .budget-row,
    .filter-row {
      display: grid;
      gap: 10px;
      margin-bottom: 14px;
    }

form {
      grid-template-columns: 1.3fr 120px 120px 140px 140px 130px 160px auto;
    }

    .notes-row {
      grid-template-columns: 1fr 150px 160px auto auto;
    }

    .controls {
      grid-template-columns: 1fr 180px 130px repeat(5, auto);
      align-items: center;
    }

    .list-controls {
      grid-template-columns: 1fr 180px 220px;
      align-items: center;
    }

    .settings-grid {
      grid-template-columns: 160px repeat(5, auto);
      align-items: center;
    }

    .settings-groups {
      grid-template-columns: 1fr;
    }

    .settings-card {
      display: grid;
      gap: 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 16px;
      background: var(--surface);
    }

    .settings-card h3 {
      margin: 0;
      font-size: 18px;
    }

    .settings-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    .settings-actions select {
      max-width: 180px;
    }

    .budget-row {
      grid-template-columns: 220px 220px 1fr;
      align-items: center;
      margin-bottom: 22px;
    }

    .filter-row {
      display: flex;
      flex-wrap: wrap;
    }

    input,
    select,
    button {
      min-height: 44px;
      border-radius: 8px;
      font: inherit;
    }

    input,
    select {
      width: 100%;
      border: 1px solid var(--input-border);
      padding: 0 12px;
      background: var(--surface);
      color: var(--text);
    }

    input:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }

    label {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      color: var(--muted);
      font-size: 14px;
      white-space: nowrap;
    }

    input[type="checkbox"] {
      width: 18px;
      min-height: 18px;
    }

    button {
      border: 0;
      padding: 0 16px;
      background: var(--primary);
      color: white;
      cursor: pointer;
      white-space: nowrap;
    }

    button:hover {
      background: var(--primary-hover);
    }

    .secondary-button {
      background: var(--secondary);
      color: var(--text);
    }

    .secondary-button:hover,
    .filter-button.active {
      background: var(--secondary-hover);
    }

    .delete-button {
      background: var(--danger);
      color: white;
    }

    .delete-button:hover {
      background: var(--danger-hover);
    }

    .summary {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 12px;
      margin-bottom: 22px;
    }

    .stat,
    .chart-card,
    .category-card {
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 16px;
      background: var(--surface);
    }

    .stat-button {
      display: block;
      min-height: auto;
      width: 100%;
      color: var(--text);
      text-align: left;
      cursor: pointer;
    }

    .stat-button:hover {
      background: var(--secondary);
    }

    .stat span,
    .category-card span {
      display: block;
      color: var(--muted);
      font-size: 14px;
      margin-bottom: 6px;
    }

    .stat strong,
    .category-card strong {
      font-size: 26px;
    }

    .budget-meter {
      height: 14px;
      border-radius: 999px;
      overflow: hidden;
      background: var(--secondary);
    }

    .budget-fill {
      width: 0;
      height: 100%;
      background: var(--success);
    }

    .budget-fill.over {
      background: var(--danger);
    }

    .section-title {
      margin: 0 0 10px;
      font-size: 20px;
    }

    .sync-banner {
      display: flex;
      gap: 10px;
      align-items: center;
      border: 1px solid var(--warning-badge-text);
      border-radius: 8px;
      padding: 12px 14px;
      margin-bottom: 16px;
      background: var(--warning-badge-bg);
      color: var(--warning-badge-text);
    }

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

    .subsection-title {
      margin: 18px 0 10px;
      font-size: 16px;
      color: var(--muted);
    }

    .section-toolbar {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-bottom: 4px;
    }

    .toolbar-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .alert-summary {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin: 14px 0 8px;
    }

    .alert-card {
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 14px;
      background: var(--surface);
    }

    .alert-card span {
      display: block;
      margin-bottom: 6px;
      color: var(--muted);
      font-size: 14px;
    }

    .alert-card strong {
      font-size: 24px;
    }

    .dashboard-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 12px;
      margin-bottom: 24px;
    }

    .insights-list,
    .chart-bars,
    .category-grid,
    .renewals,
    .overdue,
    .trials,
    .renewal-calendar,
    .list {
      display: grid;
      gap: 10px;
      margin-bottom: 24px;
    }

    .calendar-month {
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 14px;
      background: var(--surface);
    }

    .calendar-heading {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-top: 18px;
    }

    .renewal-calendar {
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .calendar-weekday {
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      text-align: center;
    }

    .calendar-day {
      display: flex;
      min-height: 112px;
      flex-direction: column;
      gap: 6px;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px;
      background: var(--surface);
    }

    .calendar-day.today {
      border-color: var(--primary);
      box-shadow: inset 0 0 0 1px var(--primary);
    }

    .muted-day {
      background: transparent;
      border-style: dashed;
    }

    .calendar-pill {
      display: block;
      overflow: hidden;
      border-radius: 6px;
      padding: 5px 7px;
      background: var(--badge-bg);
      color: var(--badge-text);
      font-size: 12px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .calendar-empty-note {
      grid-column: 1 / -1;
      border: 1px dashed var(--input-border);
      border-radius: 8px;
      padding: 14px;
      color: var(--muted);
      text-align: center;
      background: var(--surface);
    }

    .insights-card {
      grid-column: 1 / -1;
    }

    .insight-item {
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px;
      background: var(--background);
      line-height: 1.4;
    }

    .calendar-month h4 {
      margin: 0 0 10px;
      font-size: 16px;
    }

    .calendar-item {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      border-top: 1px solid var(--border);
      padding: 10px 0 0;
      margin-top: 10px;
      color: var(--muted);
      font-size: 14px;
    }

    .chart-row {
      display: grid;
      grid-template-columns: 130px 1fr auto;
      gap: 10px;
      align-items: center;
    }

    .chart-track {
      height: 18px;
      border-radius: 999px;
      overflow: hidden;
      background: var(--secondary);
    }

    .chart-fill {
      width: 0;
      height: 100%;
      background: var(--primary);
    }

    .category-grid {
      grid-template-columns: repeat(3, 1fr);
    }

    .subscription {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 14px;
      background: var(--surface);
    }

    .subscription h3 {
      margin: 0 0 4px;
      font-size: 18px;
    }

    .subscription p {
      margin: 0;
      font-size: 14px;
    }

    .note {
      margin-top: 8px;
      color: var(--muted);
    }

    .actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .badge {
      display: inline-block;
      width: fit-content;
      margin: 0 6px 8px 0;
      border-radius: 999px;
      padding: 4px 9px;
      background: var(--badge-bg);
      color: var(--badge-text);
      font-size: 13px;
    }

    .danger-badge {
      background: var(--danger-badge-bg);
      color: var(--danger-badge-text);
    }

    .warning-badge {
      background: var(--warning-badge-bg);
      color: var(--warning-badge-text);
    }

    .success-badge {
      background: var(--success-badge-bg);
      color: var(--success-badge-text);
    }

    .empty {
      border: 1px dashed var(--input-border);
      border-radius: 8px;
      padding: 22px;
      text-align: center;
      color: var(--muted);
      background: var(--surface);
    }

    .empty p {
      margin: 0 0 12px;
    }

    .empty-action-button {
      min-width: 160px;
    }

    .account-panel {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 14px;
      align-items: center;
    }

    .account-avatar {
      display: grid;
      width: 52px;
      height: 52px;
      place-items: center;
      border-radius: 50%;
      background: var(--primary);
      color: white;
      font-weight: 800;
    }

    .account-panel h3,
    .account-panel p {
      margin: 0;
    }

    .account-panel h3 {
      margin-bottom: 4px;
      font-size: 18px;
    }

    .account-panel p + p {
      margin-top: 4px;
      font-size: 14px;
    }

.hidden-file-input {
      display: none;
    }

    .undo-toast {
      position: fixed;
      right: 20px;
      bottom: 20px;
      display: flex;
      gap: 12px;
      align-items: center;
      max-width: calc(100% - 40px);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px;
      background: var(--surface);
      box-shadow: 0 12px 30px rgba(17, 24, 39, 0.18);
      color: var(--text);
    }

    .undo-toast[hidden] {
      display: none;
    }

    .app-footer {
      margin-top: 24px;
      color: var(--muted);
      font-size: 14px;
      text-align: center;
    }

    .app-footer nav {
      display: flex;
      justify-content: center;
      gap: 14px;
      margin-top: 8px;
      flex-wrap: wrap;
    }

    .app-footer a,
    .legal-page a {
      color: var(--primary);
      font-weight: 700;
      text-decoration: none;
    }

    .app-footer a:hover,
    .legal-page a:hover {
      text-decoration: underline;
    }

    .legal-page {
      width: min(880px, calc(100% - 32px));
      margin: 32px auto;
    }

    .legal-header {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      align-items: center;
      margin-bottom: 24px;
    }

    .legal-logo {
      width: min(220px, 70%);
      height: 54px;
      object-fit: cover;
      object-position: 50% 50%;
    }

    .legal-card {
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 28px;
      background: var(--surface);
      line-height: 1.6;
    }

    .legal-card h1 {
      margin-bottom: 8px;
    }

    .legal-card h2 {
      margin: 24px 0 8px;
      font-size: 20px;
    }

    .legal-card p,
    .legal-card li {
      color: var(--muted);
    }

    .legal-card ul {
      padding-left: 22px;
    }

    @media (max-width: 1060px) {
      .auth-layout {
        grid-template-columns: 1fr;
        max-width: 620px;
      }

      .auth-preview-grid {
        grid-template-columns: 1fr;
      }

      .auth-intro {
        min-height: auto;
      }

      .app-header,
      form,
      .notes-row,
      .controls,
      .list-controls,
      .settings-grid,
      .account-panel,
      .alert-summary,
      .budget-row,
      .summary,
      .dashboard-grid,
      .category-grid,
      .subscription {
        grid-template-columns: 1fr;
      }

      .chart-row {
        grid-template-columns: 1fr;
      }

      .actions {
        justify-content: stretch;
      }

      .actions button,
      .filter-button,
      .nav-button {
        flex: 1;
      }

      .feature-nav,
      .section-toolbar,
      .toolbar-actions,
      .onboarding-panel {
        justify-content: stretch;
      }

      .section-toolbar,
      .calendar-heading,
      .onboarding-panel {
        align-items: stretch;
        flex-direction: column;
      }
    }

    @media (max-width: 720px) {
      .auth-screen {
        padding: 16px;
        place-items: start center;
      }

      .auth-layout {
        gap: 12px;
      }

      .auth-intro,
      .auth-card {
        padding: 22px;
      }

      .auth-intro h1 {
        margin: 34px 0 12px;
        font-size: 38px;
        line-height: 1.05;
      }

      .auth-logo {
        width: min(280px, 100%);
        height: 78px;
      }

      .header-logo {
        width: min(220px, 100%);
        height: 52px;
      }

      .auth-intro p {
        font-size: 16px;
      }

      .auth-card h2 {
        font-size: 26px;
      }

      main {
        width: min(100% - 20px, 720px);
        margin: 16px auto 24px;
      }

      .app-header {
        gap: 14px;
        margin-bottom: 14px;
      }

      h1 {
        font-size: 28px;
      }

      p {
        margin-bottom: 14px;
        line-height: 1.45;
      }

      .feature-nav {
        position: sticky;
        top: 0;
        z-index: 10;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding: 8px 0;
        background: var(--background);
        scrollbar-width: thin;
      }

      .nav-button {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 0 12px;
      }

      .feature-section {
        padding: 12px;
      }

      .onboarding-panel,
      .editing-banner,
      .chart-card,
      .calendar-month,
      .subscription,
      .stat,
      .category-card,
      .alert-card {
        padding: 12px;
      }

      form,
      .notes-row,
      .list-controls,
      .settings-grid,
      .settings-groups,
      .budget-row {
        gap: 8px;
      }

      .settings-actions,
      .sync-banner {
        align-items: stretch;
        flex-direction: column;
      }

      .settings-actions select,
      .settings-actions button {
        max-width: none;
        width: 100%;
      }

      input,
      select,
      button {
        min-height: 46px;
      }

      label {
        min-height: 40px;
      }

      .summary,
      .alert-summary,
      .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      .stat strong,
      .category-card strong {
        font-size: 22px;
        overflow-wrap: anywhere;
      }

      .dashboard-grid,
      .chart-bars,
      .insights-list,
      .renewals,
      .overdue,
      .trials,
      .renewal-calendar,
      .list {
        gap: 10px;
        margin-bottom: 18px;
      }

      .subscription {
        gap: 14px;
      }

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

      .actions button {
        width: 100%;
        min-width: 0;
        padding: 0 10px;
      }

      .filter-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .toolbar-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .calendar-item {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
      }

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

      .calendar-weekday {
        display: none;
      }

      .calendar-day {
        min-height: 92px;
      }

      .muted-day {
        display: none;
      }

      .undo-toast {
        right: 10px;
        bottom: 10px;
        left: 10px;
        max-width: none;
        justify-content: space-between;
      }

      .legal-header {
        align-items: flex-start;
        flex-direction: column;
      }

      .legal-card {
        padding: 20px;
      }
    }

    @media (max-width: 430px) {
      .summary,
      .alert-summary,
      .category-grid,
      .filter-row,
      .actions {
        grid-template-columns: 1fr;
      }
    }