:root {
      --hn-orange: #ff6600;
      --hn-bg: #f6f6ef;
      --hn-text: #111111;
      --hn-subtext: #757575;
      --hn-border: #d5d5cb;
      --hn-panel: #ffffff;
      --hn-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    }

    html, body {
      height: 100%;
    }

    body {
      margin: 0;
      background:
        radial-gradient(circle at top left, rgba(255, 102, 0, 0.10), transparent 25%),
        linear-gradient(180deg, #faf9f5 0%, var(--hn-bg) 100%);
      color: var(--hn-text);
      font-family: Verdana, Geneva, sans-serif;
      -webkit-tap-highlight-color: transparent;
      overflow: hidden;
    }

    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: #d0d0c7;
      border-radius: 999px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #b9b9ae;
    }

    .hn-header {
      background: linear-gradient(180deg, #ff740f 0%, var(--hn-orange) 100%);
      color: #111;
    }

    .text-xs-hn {
      font-size: 0.75rem;
      line-height: 1.1rem;
    }

    .text-sm-hn {
      font-size: 0.875rem;
      line-height: 1.3rem;
    }

    .drawer-open {
      transform: translateX(0%);
    }

    .drawer-closed-left {
      transform: translateX(-100%);
    }

    .mic-active {
      background-color: var(--hn-orange);
      color: white;
      border-color: var(--hn-orange) !important;
    }

    .markdown-body pre {
      background: #1e1e1e;
      color: #d4d4d4;
      padding: 12px;
      border-radius: 6px;
      overflow-x: auto;
      margin: 10px 0;
      font-size: 0.8rem;
    }

    .markdown-body p {
      margin-bottom: 0.5rem;
      word-wrap: break-word;
    }

    .markdown-body ul,
    .markdown-body ol {
      margin-left: 1.5rem;
      margin-bottom: 0.5rem;
    }

    .markdown-body ul {
      list-style-type: disc;
    }

    .markdown-body ol {
      list-style-type: decimal;
    }

    .markdown-body strong {
      font-weight: 700;
    }

    .markdown-body code:not(.hljs) {
      font-family: Consolas, Monaco, monospace;
      word-break: break-all;
      background: rgba(31, 41, 55, 0.06);
      padding: 0.1rem 0.35rem;
      border-radius: 0.25rem;
    }

    .mermaid {
      display: flex;
      justify-content: center;
      overflow-x: auto;
      margin: 10px 0;
    }

    .diagram-card {
      border: 1px solid var(--hn-border);
      background: #fff;
      margin: 10px 0;
    }

    .diagram-toolbar {
      display: flex;
      justify-content: flex-end;
      padding: 0.3rem 0.45rem;
      border-bottom: 1px solid #ecece5;
      background: #fafaf6;
    }

    .diagram-zoom-btn {
      border: 1px solid var(--hn-border);
      background: #fff;
      color: #333;
      font-size: 0.68rem;
      font-weight: 700;
      padding: 0.12rem 0.45rem;
    }

    .diagram-scroll {
      overflow: auto;
      max-height: 420px;
      padding: 0.25rem;
    }

    .diagram-scroll .mermaid {
      min-width: 540px;
    }

    .diagram-modal-svg {
      transform-origin: 0 0;
      display: inline-block;
      transition: transform 0.12s ease-out;
    }

    .install-disabled {
      opacity: 0.65;
      cursor: default;
    }

    .panel-shadow {
      box-shadow: var(--hn-shadow);
    }

    .safe-focus:focus {
      outline: 2px solid rgba(255, 102, 0, 0.35);
      outline-offset: 1px;
    }

    .auth-progress {
      position: fixed;
      right: 0.75rem;
      bottom: 5.2rem;
      z-index: 60;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.45rem 0.7rem;
      border: 1px solid #c9c9bf;
      background: rgba(255, 255, 255, 0.96);
      color: #222;
      font-size: 0.72rem;
      font-weight: 700;
      box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.12);
    }

    .auth-progress-spinner {
      width: 0.8rem;
      height: 0.8rem;
      border-radius: 999px;
      border: 2px solid #ffd8bf;
      border-top-color: var(--hn-orange);
      animation: auth-spin 0.8s linear infinite;
    }

    #streamModeBtn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2rem;
    }

    #signedInEmail {
      max-width: 120px;
      font-size: 0.66rem;
      line-height: 1.05;
    }

    @media (max-width: 460px) {
      #headerActions {
        gap: 0.1rem;
      }

      #headerStats {
        display: none !important;
      }

      #signInBtnToggle,
      #streamModeBtn,
      #meetingModeBtn,
      #settingsBtn {
        padding-left: 0.2rem;
        padding-right: 0.2rem;
      }

      #signedInEmail {
        max-width: 78px;
        font-size: 0.58rem;
      }
    }

    @media (max-width: 360px) {
      #signedInEmail {
        display: none !important;
      }
    }

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