:root {
            color-scheme: light;
            --bg: #eff4ff;
            --bg-deep: #dfe9ff;
            --panel: rgba(255, 255, 255, 0.95);
            --panel-strong: #ffffff;
            --ink: #081534;
            --muted: #526280;
            --line: rgba(12, 32, 78, 0.1);
            --accent: #1664ff;
            --accent-strong: #7252ff;
            --accent-soft: rgba(22, 100, 255, 0.08);
            --accent-ink: #14346f;
            --accent-dark: #07132e;
            --ok: #1b7f5c;
            --ok-soft: rgba(27, 127, 92, 0.12);
            --error: #b42318;
            --error-soft: rgba(180, 35, 24, 0.12);
            --shadow: 0 24px 64px rgba(17, 52, 122, 0.12);
            --font-display: Georgia, "Times New Roman", serif;
            --font-body: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
          }

          * {
            box-sizing: border-box;
          }

          body {
            margin: 0;
            min-height: 100vh;
            color: var(--ink);
            font-family: var(--font-body);
            background:
              radial-gradient(circle at top left, rgba(22, 100, 255, 0.16), transparent 26%),
              radial-gradient(circle at top right, rgba(114, 82, 255, 0.14), transparent 24%),
              radial-gradient(circle at bottom left, rgba(114, 82, 255, 0.08), transparent 22%),
              linear-gradient(180deg, #fbfdff 0%, var(--bg) 50%, var(--bg-deep) 100%);
          }

          a {
            color: inherit;
            text-decoration: none;
          }

          .page-shell {
            max-width: 1180px;
            margin: 0 auto;
            padding: 24px 20px 56px;
          }

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

          .brand {
            display: inline-flex;
            align-items: center;
            min-width: 0;
          }

          .brand-logo {
            display: block;
            width: min(280px, 64vw);
            height: auto;
            max-width: 100%;
            object-fit: contain;
            object-position: left center;
          }

          .brand-logo-tagline {
            width: min(280px, 64vw);
          }

          .topnav {
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
            font-weight: 600;
            justify-content: flex-end;
          }

          .topbar-account {
            display: grid;
            justify-items: end;
            gap: 10px;
            min-width: 0;
          }

          .account-row {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 12px;
            min-width: 0;
          }

          .topnav-user {
            color: var(--muted);
            font-size: 0.95rem;
            font-weight: 600;
            overflow-wrap: anywhere;
            text-decoration: none;
          }

          .topnav-user:hover {
            color: var(--accent-ink);
          }

          .topnav form {
            margin: 0;
          }

          .hero {
            display: grid;
            grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.78fr);
            gap: 34px;
            align-items: start;
          }

          .seo-page {
            display: grid;
            gap: 28px;
          }

          .seo-hero {
            max-width: 860px;
          }

          .seo-hero h1 {
            max-width: 780px;
          }

          .seo-section {
            display: grid;
            gap: 16px;
          }

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

          .site-footer {
            display: flex;
            flex-wrap: wrap;
            gap: 18px;
            margin-top: 40px;
            padding-top: 18px;
            border-top: 1px solid var(--line);
            font-size: 0.85rem;
            color: var(--muted);
          }

          .site-footer a:hover {
            color: var(--ink);
          }

          .legal-page {
            max-width: 760px;
            line-height: 1.6;
          }

          .legal-page h2 {
            margin: 24px 0 6px;
            font-size: 1.15rem;
          }

          .legal-page a {
            text-decoration: underline;
          }

          .pricing-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 16px;
          }

          .plan-card {
            display: grid;
            gap: 10px;
            align-content: start;
          }

          .plan-card h2 {
            margin: 0;
          }

          .plan-price {
            margin: 0;
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--ink);
          }

          .plan-price span {
            font-size: 1rem;
            font-weight: 500;
            color: var(--muted);
          }

          .plan-quota {
            margin: 0;
            font-weight: 600;
          }

          .plan-meta {
            margin: 0 0 8px;
            font-size: 0.88rem;
            color: var(--muted);
          }

          .dashboard-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
            gap: 24px;
            align-items: start;
          }

          .dashboard-shell {
            display: grid;
            gap: 24px;
          }

          .dashboard-top {
            display: grid;
            gap: 24px;
            align-items: start;
          }

          .dashboard-main-column {
            display: grid;
            gap: 24px;
            min-width: 0;
          }

          .dashboard-section-grid {
            display: grid;
            grid-template-columns: minmax(0, 0.78fr) minmax(380px, 1.22fr);
            gap: 18px;
            align-items: start;
          }

          .dashboard-section-grid.analytics-layout {
            grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.18fr);
          }

          .analytics-layout {
            display: grid;
            gap: 24px;
          }

          .integration-usage,
          .analytics-account,
          .analytics-breakdowns {
            display: grid;
            gap: 14px;
            min-width: 0;
          }

          .analytics-breakdowns {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
          }

          .analytics-page .analytics-summary {
            grid-template-columns: repeat(4, minmax(0, 1fr));
          }

          .analytics-page .helper-list {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }

          .analytics-page .metric strong {
            overflow-wrap: anywhere;
          }

          .analytics-panel {
            padding: 18px;
            border: 1px solid var(--line);
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.82);
            min-width: 0;
          }

          .analytics-panel-header {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
          }

          .analytics-panel-header h3 {
            margin: 0;
            font-size: 1.05rem;
          }

          .analytics-panel-header span {
            color: var(--muted);
            font-size: 0.82rem;
            font-weight: 700;
          }

          .daily-chart {
            display: flex;
            align-items: stretch;
            gap: 6px;
            min-width: 720px;
            height: 144px;
            padding: 0 4px;
            border-bottom: 1px solid rgba(28, 36, 48, 0.08);
          }

          .daily-chart-scroll {
            overflow-x: auto;
            padding: 4px 0 2px;
          }

          .daily-chart-empty {
            display: grid;
            place-items: center;
            min-height: 144px;
            color: var(--muted);
            font-size: 0.9rem;
            border: 1px dashed var(--line);
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.54);
          }

          .daily-bar {
            position: relative;
            display: flex;
            flex: 1 0 18px;
            flex-direction: column;
            align-items: end;
            justify-content: end;
            min-width: 0;
            height: 144px;
            font-size: 0.68rem;
          }

          .daily-bar-track {
            display: flex;
            align-items: end;
            justify-content: center;
            width: 100%;
            height: 120px;
          }

          .daily-bar-fill {
            width: 100%;
            max-width: 18px;
            min-height: 2px;
            border-radius: 999px 999px 4px 4px;
            background: linear-gradient(180deg, var(--accent-strong), var(--accent));
          }

          .daily-bar-fill.is-empty {
            opacity: 0.22;
          }

          .daily-bar-label {
            display: block;
            width: 100%;
            height: 24px;
            padding-top: 6px;
            color: var(--muted);
            font-size: 0.64rem;
            text-align: center;
            white-space: nowrap;
          }

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

          .ranked-item {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            gap: 12px;
            padding: 11px 12px;
            border: 1px solid rgba(22, 100, 255, 0.08);
            border-radius: 12px;
            background: rgba(245, 248, 255, 0.74);
          }

          .ranked-number {
            width: 24px;
            height: 24px;
            display: inline-grid;
            place-items: center;
            border-radius: 999px;
            background: rgba(22, 100, 255, 0.1);
            color: var(--accent-ink);
            font-size: 0.76rem;
            font-weight: 800;
          }

          .ranked-value {
            color: var(--ink);
            font-weight: 800;
          }

          .item-primary {
            display: block;
            color: var(--ink);
            font-weight: 800;
            overflow-wrap: anywhere;
          }

          .item-secondary {
            display: block;
            margin-top: 3px;
            color: var(--muted);
            font-size: 0.78rem;
            font-weight: 600;
            overflow-wrap: anywhere;
          }

          .section-actions {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 16px;
          }

          .access-card {
            display: grid;
            grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.4fr) auto;
            gap: 18px;
            align-items: center;
            padding: 16px 18px;
          }

          .access-card .card-header,
          .access-card .section-actions {
            margin: 0;
          }

          .access-card h2 {
            font-size: clamp(1.2rem, 1.7vw, 1.55rem);
          }

          .access-card p {
            font-size: 0.86rem;
            line-height: 1.4;
          }

          .access-card .metric {
            padding: 12px 14px;
            border-radius: 18px;
          }

          .create-link-card form {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-items: start;
          }

          .create-link-card label:first-child,
          .create-link-card .button-row,
          .create-link-card .status,
          .create-link-card .result-card {
            grid-column: 1 / -1;
          }

          .stack {
            display: grid;
            gap: 18px;
            min-width: 0;
          }

          .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 999px;
            background: rgba(22, 100, 255, 0.08);
            color: var(--accent-ink);
            font-size: 0.88rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: uppercase;
          }

          h1,
          h2,
          h3 {
            font-family: var(--font-display);
            line-height: 1.02;
            margin: 0;
            letter-spacing: -0.04em;
          }

          h1 {
            font-size: clamp(1.45rem, 2.3vw, 2.2rem);
            max-width: 22ch;
            margin-top: 0;
            font-weight: 800;
            letter-spacing: -0.025em;
          }

          h2 {
            font-size: clamp(1.65rem, 2.5vw, 2.25rem);
            font-weight: 800;
          }

          p {
            margin: 0;
            color: var(--muted);
            line-height: 1.65;
          }

          .lede {
            max-width: 58ch;
            margin-top: 14px;
            font-size: 0.96rem;
          }

          .mini-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 14px;
            margin-top: 8px;
          }

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

          .metric,
          .card,
          .auth-shell {
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: 26px;
            box-shadow: var(--shadow);
            backdrop-filter: blur(14px);
          }

          .metric {
            padding: 18px;
            min-width: 0;
            overflow: hidden;
          }

          .metric strong {
            display: block;
            margin-top: 8px;
            font-size: clamp(1.25rem, 1.85vw, 1.75rem);
            font-family: var(--font-display);
            color: var(--ink);
            line-height: 1.08;
            overflow-wrap: anywhere;
          }

          .metric span {
            color: var(--ink);
            font-size: 0.83rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-weight: 700;
          }

          .metric.metric-compact strong {
            font-size: clamp(0.92rem, 1.25vw, 1.2rem);
            line-height: 1.08;
            letter-spacing: -0.025em;
          }

          .access-card .metric.metric-compact strong,
          .analytics-page .metric.metric-compact strong {
            font-size: clamp(0.68rem, 0.8vw, 0.9rem);
            font-family: var(--font-body);
            letter-spacing: 0;
            font-weight: 500;
          }

          .mini-grid .metric strong {
            font-size: clamp(0.95rem, 1.35vw, 1.2rem);
            line-height: 1.02;
            letter-spacing: -0.03em;
          }

          .metric-note {
            display: block;
            margin-top: 8px;
            color: var(--muted);
            font-size: 0.82rem;
            line-height: 1.35;
          }

          .card {
            padding: 24px;
            min-width: 0;
          }

          .card-header {
            display: grid;
            gap: 10px;
            margin-bottom: 18px;
          }

          .auth-shell {
            max-width: 560px;
            margin: 56px auto 0;
            padding: 28px;
          }

          .auth-shell .button {
            width: 100%;
          }

          form {
            display: grid;
            gap: 14px;
          }

          .pagination-controls,
          .pagination-controls label,
          .pagination-controls input {
            min-width: 0;
          }

          .pagination-controls form {
            grid-template-columns: minmax(0, 1fr);
          }

          label {
            display: grid;
            gap: 8px;
            font-size: 0.95rem;
            color: var(--ink);
            font-weight: 600;
          }

          .field-help {
            color: var(--muted);
            font-size: 0.88rem;
            font-weight: 500;
          }

          input,
          select,
          textarea {
            width: 100%;
            padding: 14px 15px;
            border-radius: 16px;
            border: 1px solid rgba(17, 34, 78, 0.12);
            background: rgba(247, 250, 255, 0.98);
            font: inherit;
            color: var(--ink);
          }

          textarea {
            resize: vertical;
          }

          input:focus,
          select:focus,
          textarea:focus {
            outline: 2px solid rgba(22, 100, 255, 0.18);
            border-color: rgba(22, 100, 255, 0.45);
          }

          .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 13px 18px;
            border: none;
            border-radius: 16px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
            color: #f8fbff;
            font: inherit;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 16px 32px rgba(54, 90, 255, 0.2);
          }

          .button:hover {
            filter: brightness(1.03);
          }

          .button:disabled {
            cursor: not-allowed;
            opacity: 0.55;
            filter: none;
          }

          .button-ghost {
            background: rgba(22, 100, 255, 0.09);
            color: var(--accent-ink);
            box-shadow: none;
          }

          .button-row {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            align-items: center;
          }

          .result-card {
            display: grid;
            gap: 12px;
            margin-top: 18px;
            padding: 16px;
            border-radius: 18px;
            border: 1px solid rgba(22, 100, 255, 0.12);
            background: rgba(246, 249, 255, 0.92);
            min-width: 0;
          }

          .result-row {
            display: grid;
            gap: 6px;
          }

          .result-label {
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #5870a6;
          }

          .result-link,
          .result-value {
            overflow-wrap: anywhere;
            color: var(--ink);
            min-width: 0;
          }

          .status {
            min-height: 1.2rem;
            color: var(--muted);
            font-size: 0.92rem;
          }

          .status.error {
            color: var(--error);
          }

          .status.success {
            color: var(--ok);
          }

          .state-stack {
            display: grid;
            gap: 7px;
          }

          .state-pill {
            display: inline-flex;
            align-items: center;
            width: max-content;
            border-radius: 999px;
            border: 1px solid var(--line);
            padding: 5px 9px;
            color: var(--muted);
            background: #fff;
            font-size: 0.76rem;
            font-weight: 800;
            line-height: 1;
            white-space: nowrap;
          }

          .state-pill.on {
            color: var(--ok);
            background: var(--ok-soft);
            border-color: rgba(27, 127, 92, 0.18);
          }

          .state-pill.warn {
            color: var(--error);
            background: var(--error-soft);
            border-color: rgba(180, 35, 24, 0.18);
          }

          .admin-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            align-items: center;
          }

          .row-status {
            display: block;
            flex-basis: 100%;
            min-height: 1rem;
            color: var(--muted);
            font-size: 0.76rem;
          }

          .ticket-row.closed {
            display: none;
            opacity: 0.62;
          }

          .show-closed-tickets .ticket-row.closed {
            display: table-row;
          }

          .notice {
            margin-bottom: 20px;
            padding: 14px 16px;
            border-radius: 16px;
            border: 1px solid transparent;
            font-size: 0.95rem;
          }

          .notice.error {
            color: var(--error);
            background: var(--error-soft);
            border-color: rgba(180, 35, 24, 0.16);
          }

          .notice.success {
            color: var(--ok);
            background: var(--ok-soft);
            border-color: rgba(27, 127, 92, 0.16);
          }

          .account-alert {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 16px 18px;
            border-radius: 18px;
            border: 1px solid rgba(180, 35, 24, 0.16);
            background: rgba(255, 248, 235, 0.94);
            color: var(--ink);
            box-shadow: 0 14px 34px rgba(17, 52, 122, 0.08);
          }

          .account-alert strong {
            display: block;
            margin-bottom: 4px;
            color: var(--ink);
            font-weight: 800;
          }

          .account-alert p {
            margin: 0;
            color: var(--muted);
            line-height: 1.45;
          }

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

          .helper-list {
            display: grid;
            gap: 12px;
            margin-top: 18px;
          }

          .value-strip {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 14px;
          }

          .value-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.86);
            border: 1px solid rgba(22, 100, 255, 0.1);
            color: var(--accent-ink);
            font-size: 0.92rem;
            font-weight: 700;
          }

          .switch-row {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 12px 14px;
            border: 1px solid rgba(22, 100, 255, 0.1);
            border-radius: 14px;
            background: rgba(245, 248, 255, 0.76);
            color: var(--ink);
            font-weight: 700;
          }

          .switch-row input {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            border: 0;
            opacity: 0;
            pointer-events: none;
          }

          .switch-row input:focus-visible + .switch-control {
            outline: 3px solid var(--accent);
            outline-offset: 3px;
          }

          .switch-control {
            position: relative;
            width: 44px;
            height: 24px;
            flex: 0 0 auto;
            border-radius: 999px;
            background: rgba(100, 116, 139, 0.28);
            transition: background 0.18s ease;
          }

          .switch-control::after {
            content: "";
            position: absolute;
            top: 3px;
            left: 3px;
            width: 18px;
            height: 18px;
            border-radius: 999px;
            background: #ffffff;
            box-shadow: 0 2px 6px rgba(17, 52, 122, 0.18);
            transition: transform 0.18s ease;
          }

          .switch-row input:checked + .switch-control {
            background: var(--accent);
          }

          .switch-row input:checked + .switch-control::after {
            transform: translateX(20px);
          }

          .field-disabled {
            opacity: 0.58;
          }

          .cta-panel {
            position: relative;
            overflow: hidden;
          }

          .cta-panel::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
              radial-gradient(circle at top right, rgba(114, 82, 255, 0.18), transparent 28%),
              radial-gradient(circle at left center, rgba(22, 100, 255, 0.12), transparent 30%),
              linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
            pointer-events: none;
          }

          .cta-panel > * {
            position: relative;
          }

          .cta-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 999px;
            background: rgba(22, 100, 255, 0.08);
            color: var(--accent-ink);
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
          }

          .checklist {
            display: grid;
            gap: 18px;
            margin-top: 24px;
          }

          .check {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            color: var(--ink);
          }

          .check-mark {
            flex: 0 0 auto;
            width: 22px;
            height: 22px;
            border-radius: 999px;
            display: inline-grid;
            place-items: center;
            background: rgba(22, 100, 255, 0.12);
            color: var(--accent);
            font-size: 0.9rem;
            font-weight: 800;
            margin-top: 1px;
          }

          .check p {
            color: var(--muted);
            line-height: 1.5;
          }

          .micro-note {
            display: block;
            margin-top: 22px;
            font-size: 0.88rem;
            color: var(--muted);
            line-height: 1.55;
          }

          .helper-item {
            padding: 16px 18px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.82);
            border: 1px solid rgba(22, 100, 255, 0.08);
            min-width: 0;
          }

          .helper-item strong {
            display: block;
            margin-bottom: 6px;
            font-size: 1rem;
            overflow-wrap: anywhere;
          }

          .helper-item p,
          .card-header p,
          td a {
            overflow-wrap: anywhere;
          }

          .table-shell {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
          }

          table {
            width: 100%;
            border-collapse: collapse;
          }

          .links-table {
            font-size: 0.86rem;
            min-width: 720px;
          }

          .links-table code,
          .links-table a {
            font-size: 0.82rem;
            line-height: 1.35;
          }

          table .button {
            min-height: 0;
            padding: 7px 10px;
            border-radius: 10px;
            font-size: 0.78rem;
            line-height: 1;
            box-shadow: none;
            white-space: nowrap;
          }

          th,
          td {
            padding: 14px 8px;
            border-bottom: 1px solid rgba(28, 36, 48, 0.08);
            text-align: left;
            vertical-align: top;
          }

          th {
            font-size: 0.8rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--ink);
          }

          code {
            font-family: "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", monospace;
            font-size: 0.94em;
            color: #1d4ed8;
            overflow-wrap: anywhere;
            word-break: break-word;
          }

          pre {
            margin: 10px 0 0;
            padding: 12px 14px;
            border-radius: 14px;
            border: 1px solid rgba(22, 100, 255, 0.1);
            background: rgba(245, 248, 255, 0.96);
            overflow-x: auto;
            white-space: pre;
            word-break: normal;
            overflow-wrap: normal;
            max-width: 100%;
          }

          pre code {
            display: block;
            white-space: inherit;
            word-break: inherit;
            overflow-wrap: inherit;
          }

          .empty-state {
            padding: 22px;
            border-radius: 18px;
            background: rgba(245, 248, 255, 0.9);
            border: 1px dashed rgba(22, 100, 255, 0.18);
            color: var(--muted);
          }

          .support-launcher {
            position: fixed;
            right: 20px;
            bottom: 20px;
            z-index: 20;
            box-shadow: 0 16px 32px rgba(17, 52, 122, 0.22);
          }

          .support-drawer {
            position: fixed;
            right: 20px;
            bottom: 78px;
            z-index: 20;
            width: min(390px, calc(100vw - 32px));
            display: grid;
            gap: 14px;
            padding: 18px;
            border-radius: 18px;
            border: 1px solid var(--line);
            background: var(--panel-strong);
            box-shadow: var(--shadow);
          }

          .support-drawer-close {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 34px;
            height: 34px;
            border: 1px solid rgba(22, 100, 255, 0.12);
            border-radius: 999px;
            background: rgba(245, 248, 255, 0.92);
            color: var(--ink);
            cursor: pointer;
            font-size: 1.2rem;
            font-weight: 800;
            line-height: 1;
          }

          .support-drawer-close:hover {
            background: #ffffff;
          }

          .support-drawer[hidden] {
            display: none;
          }

          .support-drawer .card-header {
            gap: 6px;
          }

          .support-drawer textarea {
            min-height: 108px;
          }

          .qr-modal {
            position: fixed;
            inset: 0;
            z-index: 40;
            display: grid;
            place-items: center;
            padding: 20px;
            background: rgba(0, 0, 0, 0.5);
          }

          .qr-modal[hidden] {
            display: none;
          }

          .qr-modal-panel {
            position: relative;
            width: min(90vw, 320px);
            max-width: 320px;
            padding: 32px;
            border-radius: 16px;
            background: #ffffff;
            box-shadow: var(--shadow);
          }

          .qr-modal-panel .card-header {
            gap: 6px;
          }

          .qr-modal-panel .card-header p {
            overflow-wrap: anywhere;
          }

          .qr-modal-close {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 34px;
            height: 34px;
            border: 1px solid rgba(22, 100, 255, 0.12);
            border-radius: 999px;
            background: rgba(245, 248, 255, 0.92);
            color: var(--ink);
            cursor: pointer;
            font-size: 1.2rem;
            font-weight: 800;
            line-height: 1;
          }

          .qr-modal-image {
            display: block;
            width: 100%;
            max-width: 220px;
            margin: 16px auto;
          }

          .analytics-summary {
            margin-top: 0;
          }

          @media (max-width: 900px) {
            .hero,
            .dashboard-grid,
            .seo-grid,
            .dashboard-top,
            .dashboard-section-grid,
            .dashboard-main-column,
            .dashboard-section-grid.analytics-layout,
            .access-card,
            .create-link-card form {
              grid-template-columns: 1fr;
            }

            .page-shell {
              padding: 20px 16px 44px;
            }

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

            .topnav {
              width: 100%;
              justify-content: flex-start;
            }

            .topbar-account {
              width: 100%;
              justify-items: start;
            }

            .account-alert {
              align-items: stretch;
              flex-direction: column;
            }

            .account-row {
              width: 100%;
              justify-content: space-between;
            }

            h1 {
              max-width: none;
            }

            .brand {
              max-width: 100%;
            }

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

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

            .analytics-page .helper-list {
              grid-template-columns: 1fr;
            }

            .analytics-breakdowns {
              grid-template-columns: 1fr;
            }
          }

          @media (max-width: 640px) {
            .page-shell {
              padding-bottom: 116px;
            }

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

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

            .brand-logo {
              width: min(240px, 72vw);
              height: auto;
            }

            .brand-logo-tagline {
              width: min(240px, 72vw);
            }

            .topnav-user {
              width: 100%;
            }

            .account-row {
              align-items: flex-start;
              flex-direction: column;
            }

            .support-launcher {
              right: 16px;
              bottom: 16px;
            }

            .support-drawer {
              right: 16px;
              bottom: 72px;
            }

            .links-table {
              min-width: 0;
            }

            .links-table,
            .links-table thead,
            .links-table tbody,
            .links-table tr,
            .links-table td {
              display: block;
              width: 100%;
            }

            .links-table thead {
              display: none;
            }

            .links-table tr {
              margin-bottom: 14px;
              padding: 14px 16px;
              border: 1px solid rgba(22, 100, 255, 0.12);
              border-radius: 18px;
              background: rgba(255, 255, 255, 0.88);
              box-shadow: 0 12px 28px rgba(17, 52, 122, 0.08);
            }

            .links-table td {
              display: grid;
              grid-template-columns: minmax(84px, 34%) minmax(0, 1fr);
              gap: 12px;
              align-items: start;
              padding: 9px 0;
              border-bottom: 1px solid rgba(28, 36, 48, 0.08);
            }

            .links-table td::before {
              content: attr(data-label);
              color: var(--ink);
              font-size: 0.72rem;
              font-weight: 800;
              letter-spacing: 0.07em;
              line-height: 1.25;
              text-transform: uppercase;
            }

            .links-table td:last-child {
              border-bottom: 0;
              padding-bottom: 0;
            }

            .links-table td[data-label="Shared URL"] a,
            .links-table td code {
              overflow-wrap: anywhere;
              word-break: break-word;
            }

            .links-table td[data-label="Controls"] {
              display: block;
            }

            .links-table td[data-label="Controls"]::before {
              display: none;
            }

            .links-table td[data-label="Controls"] .button {
              width: 100%;
              justify-content: center;
            }
          }

          @media (max-width: 480px) {
            .daily-chart {
              min-width: 336px;
            }

            .daily-bar.is-mobile-hidden {
              display: none;
            }
          }

          @media (max-width: 400px) {
            .daily-bar-label {
              display: none;
            }
          }