/* X1 Design System v1 — base components for stacks without React (static site, PHP/Twig panels, WHMCS, simple server pages).
   Requires dist/css/x1-tokens.css. Class prefix: x1-. Dark only in v1 (Cinematic V9 is a dark brand). */

.x1-page { margin: 0; min-height: 100vh; color: var(--x1-color-body); font: 16px/1.6 var(--x1-font-sans);
           background: var(--x1-gradient-canvas-light), var(--x1-color-canvas); -webkit-font-smoothing: antialiased; }
.x1-page * { box-sizing: border-box; }

/* Scrollbar */
.x1-page, .x1-page * { scrollbar-width: thin; scrollbar-color: var(--x1-color-scroll-thumb-from) var(--x1-color-scroll-track); }
.x1-page ::-webkit-scrollbar { width: 8px; height: 8px; }
.x1-page ::-webkit-scrollbar-track { background: var(--x1-color-scroll-track); }
.x1-page ::-webkit-scrollbar-thumb { border-radius: 999px; background: linear-gradient(180deg, var(--x1-color-scroll-thumb-from), var(--x1-color-scroll-thumb-to)); }
.x1-page ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--x1-color-scroll-hover-from), var(--x1-color-scroll-hover-to)); }

/* Brand header: the real neon logo image + product name. Never a text-only "X1". */
.x1-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--x1-color-text); text-decoration: none; }
.x1-brand img { height: 38px; width: auto; filter: drop-shadow(0 0 12px rgba(50,202,255,0.35)); }
.x1-brand span { padding-left: 12px; border-left: 1px solid var(--x1-color-hairline); font-size: 12px; font-weight: 800;
                 letter-spacing: 0.2em; text-transform: uppercase; }

/* Type */
.x1-display { margin: 0; color: var(--x1-color-text); font-size: var(--x1-type-display-size); line-height: var(--x1-type-display-line);
              font-weight: var(--x1-type-display-weight); letter-spacing: var(--x1-type-display-tracking); }
.x1-display .x1-accent { background: var(--x1-gradient-headline-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.x1-h1 { margin: 0; color: var(--x1-color-text); font-size: var(--x1-type-h1-size); line-height: var(--x1-type-h1-line); font-weight: var(--x1-type-h1-weight); letter-spacing: var(--x1-type-h1-tracking); }
.x1-h2 { margin: 0; color: var(--x1-color-text); font-size: var(--x1-type-h2-size); line-height: var(--x1-type-h2-line); font-weight: var(--x1-type-h2-weight); letter-spacing: var(--x1-type-h2-tracking); }
.x1-h3 { margin: 0; color: var(--x1-color-text); font-size: var(--x1-type-h3-size); line-height: var(--x1-type-h3-line); font-weight: var(--x1-type-h3-weight); letter-spacing: var(--x1-type-h3-tracking); }
.x1-muted { color: var(--x1-color-muted); }
.x1-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid rgba(95,187,250,0.35); border-radius: 999px;
              background: rgba(19,126,255,0.08); color: var(--x1-color-eyebrow); font-size: var(--x1-type-eyebrow-size); font-weight: 800;
              letter-spacing: var(--x1-type-eyebrow-tracking); text-transform: uppercase; }
.x1-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--x1-color-cyan); box-shadow: 0 0 10px rgba(50,202,255,0.9); }
.x1-label { display: block; margin-bottom: 8px; color: var(--x1-color-muted); font-size: var(--x1-type-label-size); font-weight: 700;
            letter-spacing: var(--x1-type-label-tracking); text-transform: uppercase; }

/* Surfaces */
.x1-card { padding: 24px; border: 1px solid var(--x1-color-hairline); border-radius: var(--x1-radius-xl); background: var(--x1-gradient-glass-soft); box-shadow: var(--x1-shadow-card); }
.x1-card--featured { border-color: var(--x1-color-edge); background: var(--x1-gradient-glass); box-shadow: 0 0 60px -20px rgba(50,202,255,0.45), var(--x1-shadow-elevated); }
.x1-panel { border: 1px solid var(--x1-color-line); border-radius: var(--x1-radius-lg); background: var(--x1-color-surface); }

/* Buttons */
.x1-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border: 1px solid var(--x1-color-hairline);
          border-radius: var(--x1-radius-md); background: transparent; color: var(--x1-color-text); font: 700 15px/1 var(--x1-font-sans); text-decoration: none; cursor: pointer;
          transition: filter var(--x1-motion-base) var(--x1-motion-ease-out), box-shadow var(--x1-motion-base) var(--x1-motion-ease-out), border-color var(--x1-motion-fast); }
.x1-btn:hover { border-color: var(--x1-color-cyan); }
.x1-btn:focus-visible { outline: 2px solid var(--x1-color-cyan); outline-offset: 3px; }
.x1-btn--primary { border-color: var(--x1-color-primary-border); background: var(--x1-gradient-primary); color: var(--x1-color-on-primary); font-weight: 800;
                  box-shadow: var(--x1-shadow-primary-highlight), var(--x1-shadow-glow-primary); }
.x1-btn--primary:hover { filter: brightness(1.1); border-color: var(--x1-color-primary-border); }
.x1-btn--gold { border-color: var(--x1-color-gold); color: var(--x1-color-gold-bright); }
.x1-btn--danger { border-color: rgba(239,68,68,0.4); color: var(--x1-color-danger-soft); }
.x1-btn--block { display: flex; width: 100%; }
.x1-btn[disabled], .x1-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; filter: saturate(0.6); }

/* Inputs */
.x1-input { width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid rgba(50,202,255,0.42); border-radius: var(--x1-radius-md); background: var(--x1-color-field);
            color: var(--x1-color-text); font: 15px var(--x1-font-sans); outline: none; transition: border-color var(--x1-motion-base), box-shadow var(--x1-motion-base); }
.x1-input::placeholder { color: var(--x1-color-subtle); }
.x1-input:focus { border-color: var(--x1-color-cyan); box-shadow: var(--x1-shadow-focus-ring); }
.x1-input[aria-invalid="true"] { border-color: var(--x1-color-danger-soft); }
.x1-help { margin: 8px 0 0; color: var(--x1-color-muted); font-size: var(--x1-type-small-size); }

/* Feedback */
.x1-alert { padding: 12px 14px; border: 1px solid var(--x1-color-hairline); border-radius: var(--x1-radius-md); font-size: 15px; }
.x1-alert--error { border-color: rgba(255,138,128,0.35); background: rgba(255,138,128,0.08); color: var(--x1-color-danger-soft); }
.x1-alert--warning { border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.08); color: var(--x1-color-warning-soft); }
.x1-alert--success { border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.08); color: var(--x1-color-success-soft); }
.x1-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid; border-radius: 999px; font-size: 11px; font-weight: 800;
           letter-spacing: 0.08em; text-transform: uppercase; }
.x1-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.x1-pill--ok { color: var(--x1-color-success-soft); border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.08); }
.x1-pill--warn { color: var(--x1-color-warning-soft); border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.08); }
.x1-pill--bad { color: var(--x1-color-danger-soft); border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.08); }

/* Lists */
.x1-check, .x1-cross { list-style: none; margin: 0; padding: 0; }
.x1-check li, .x1-cross li { position: relative; margin: 8px 0; padding-left: 26px; }
.x1-check li::before { content: "\2713"; position: absolute; left: 0; color: var(--x1-color-cyan); font-weight: 800; }
.x1-cross li { color: var(--x1-color-muted); }
.x1-cross li::before { content: "\2715"; position: absolute; left: 0; color: var(--x1-color-subtle); font-weight: 800; }
.x1-steps { list-style: none; counter-reset: x1s; margin: 0; padding: 0; }
.x1-steps li { counter-increment: x1s; position: relative; margin: 12px 0; padding-left: 40px; }
.x1-steps li::before { content: counter(x1s); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px;
                       border: 1px solid rgba(50,202,255,0.35); border-radius: 8px; background: rgba(50,202,255,0.12); color: var(--x1-color-cyan); font-size: 13px; font-weight: 800; }

/* Tables */
.x1-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.x1-table th { padding: 10px 14px; border-bottom: 1px solid var(--x1-color-line); color: var(--x1-color-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-align: left; text-transform: uppercase; }
.x1-table td { padding: 12px 14px; border-bottom: 1px solid rgba(31,51,82,0.6); color: var(--x1-color-body); }
.x1-table tr:hover td { background: var(--x1-color-hover); }

/* Empty / loading states: always say what it is and what to do next */
.x1-empty { padding: 40px 24px; border: 1px dashed var(--x1-color-hairline); border-radius: var(--x1-radius-xl); text-align: center; color: var(--x1-color-muted); }
.x1-empty strong { display: block; margin-bottom: 6px; color: var(--x1-color-text); font-size: 16px; }
.x1-skeleton { border-radius: var(--x1-radius-sm); background: linear-gradient(90deg, var(--x1-color-surface), var(--x1-color-elevated), var(--x1-color-surface)); background-size: 200% 100%;
               animation: x1-shimmer 1.6s var(--x1-motion-ease-in-out) infinite; }
@keyframes x1-shimmer { to { background-position: -200% 0; } }

/* Watermark: the logo, faint, bottom-right of hero/footer bands */
.x1-watermark { position: absolute; right: -80px; bottom: -80px; width: 520px; opacity: 0.05; pointer-events: none; user-select: none; }

@media (prefers-reduced-motion: reduce) {
  .x1-page *, .x1-page *::before, .x1-page *::after { animation: none !important; transition: none !important; }
}