/* Shared look for XPARO's server-rendered app pages (devices, plugin store,
   ads center): the site's default animated background (style.css's
   .header--bg), filling the whole window, with semi-dark glass cards on
   top, orange accent.
   Used through templates/layouts/xp_page.html. The profile page carries its
   own (equivalent) inline styles. */

/* Document scrolling (style.css makes <body> the scroller, which ended the
   gradient part-way down long pages); the default gradient itself is kept
   as-is and just pinned to the viewport. body's min-height is in vh on
   purpose: short pages must still fill the window even when <html> gets
   painted itself (e.g. by a dark-mode extension), or the rest goes dark. */
html { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; scroll-behavior: auto; }
body.header--bg { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; background-attachment: fixed; }

.xp-page {
  --xp-text: #f5f5f4;
  --xp-muted: rgba(245, 245, 244, 0.68);
  --xp-line: rgba(255, 255, 255, 0.14);
  --xp-card: rgba(10, 10, 14, 0.45);
  --xp-accent: #ff7722;
  --xp-link: #ffb27d;
  max-width: 1160px;
  margin: 0 auto;
  padding: 44px 16px 140px;
  color: var(--xp-text);
  font-size: 15px;
}
.xp-page *, .xp-page *::before, .xp-page *::after { box-sizing: border-box; }
.xp-page a { color: var(--xp-link); }
.xp-page a:hover { color: #ffd0ae; }
/* style.css centers every h3 site-wide; app pages are left-aligned */
.xp-page h1, .xp-page h2, .xp-page h3, .xp-page h4 { color: var(--xp-text); margin: 0; font-family: inherit; text-align: left; line-height: 1.25; }
.xp-page h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; }
.xp-page h1 span, .xp-page h2 span.xp-accent { color: var(--xp-accent); }
.xp-page h2 { font-size: 20px; font-weight: 700; }
.xp-page h3 { font-size: 17px; font-weight: 700; }
.xp-page p { margin: 0; }
.xp-page code, .xp-page kbd, .xp-page pre {
  font-family: "Ubuntu Mono", "DejaVu Sans Mono", ui-monospace, monospace;
  background: rgba(255, 255, 255, 0.07); border-radius: 6px; color: #fde7d6;
}
.xp-page code, .xp-page kbd { padding: 1px 6px; font-size: 0.92em; }
.xp-page pre { padding: 14px 16px; overflow-x: auto; white-space: pre; font-size: 13.5px; line-height: 1.55; border: 1px solid var(--xp-line); }

.xp-muted { color: var(--xp-muted); }
.xp-small { font-size: 13px; }
.xp-mt { margin-top: 20px; }
.xp-stack > * + * { margin-top: 12px; }

/* header */
.xp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.xp-head p { margin-top: 8px; color: var(--xp-muted); max-width: 64ch; line-height: 1.55; }
.xp-crumbs { margin-bottom: 10px; font-size: 13px; color: var(--xp-muted); }
.xp-crumbs a { color: var(--xp-muted); }

/* cards + layout */
.xp-card {
  background: var(--xp-card); border: 1px solid var(--xp-line); border-radius: 18px;
  padding: 24px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
@media (min-width: 991px) { .xp-card { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } }
.xp-card > h2 + p, .xp-card > h2 + .xp-sub { margin-top: 4px; }
.xp-sub { color: var(--xp-muted); font-size: 14px; }
.xp-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.xp-split { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 992px) { .xp-split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }
.xp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.xp-row--between { justify-content: space-between; }

/* alerts */
.xp-alert { margin: 0 0 18px; padding: 13px 16px; border-radius: 14px; font-weight: 600; border: 1px solid; }
.xp-alert--success { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.45); color: #86efac; }
.xp-alert--error, .xp-alert--warning { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.45); color: #fca5a5; }
.xp-alert--info { background: rgba(23, 179, 201, 0.12); border-color: rgba(23, 179, 201, 0.45); color: #a5f3fc; }

/* buttons */
.xp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 9px 18px; border-radius: 12px; border: 1px solid var(--xp-line);
  background: rgba(255, 255, 255, 0.06); color: var(--xp-text) !important;
  font-size: 14.5px; font-weight: 600; line-height: 1.2; text-decoration: none !important; cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.xp-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); }
.xp-btn:focus-visible { outline: 3px solid var(--xp-accent); outline-offset: 2px; }
.xp-btn--primary { background: var(--xp-accent); border-color: var(--xp-accent); color: #1c1917 !important; }
.xp-btn--primary:hover { background: #ff8a3d; border-color: #ff8a3d; }
.xp-btn--danger { color: #fca5a5 !important; }
.xp-btn--danger:hover { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.5); }
.xp-btn--sm { min-height: 34px; padding: 6px 12px; font-size: 13.5px; border-radius: 10px; }
.xp-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
button.xp-link-btn { background: none; border: 0; padding: 0; color: var(--xp-link); cursor: pointer; font: inherit; }

/* forms */
.xp-form { display: grid; gap: 16px; }
.xp-form--2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .xp-form--2 { grid-template-columns: 1fr 1fr; } .xp-full { grid-column: 1 / -1; } }
.xp-field label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--xp-text); }
.xp-field .xp-hint { font-weight: 400; color: var(--xp-muted); }
.xp-help { margin-top: 6px; font-size: 13px; color: var(--xp-muted); }
.xp-page .xp-input,
.xp-page select.xp-input,
.xp-page textarea.xp-input {
  display: block; width: 100%; margin: 0; padding: 10px 13px; border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.06) !important; color: var(--xp-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.16); font-size: 15px; line-height: 1.4;
}
.xp-page select.xp-input option { color: #111; }
.xp-page textarea.xp-input { min-height: 96px; resize: vertical; }
.xp-page .xp-input::placeholder { color: rgba(245, 245, 244, 0.42); }
.xp-page .xp-input:focus { outline: none; border-color: var(--xp-accent); box-shadow: 0 0 0 3px rgba(255, 119, 34, 0.25); }
.xp-page .xp-input[aria-invalid="true"] { border-color: #f87171; }
.xp-page input[type="file"].xp-input { padding: 8px; }
.xp-error, .xp-page .errorlist { margin: 6px 0 0; padding: 0; list-style: none; color: #fca5a5; font-size: 13px; }
.xp-check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.xp-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }

/* badges, stats, tables */
.xp-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.xp-badge--ok { background: rgba(34, 197, 94, 0.15); color: #86efac; }
.xp-badge--warn { background: rgba(250, 204, 21, 0.15); color: #fde68a; }
.xp-badge--bad { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.xp-badge--info { background: rgba(23, 179, 201, 0.16); color: #a5f3fc; }
.xp-badge--muted { background: rgba(255, 255, 255, 0.08); color: var(--xp-muted); }
.xp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #71717a; margin-right: 6px; vertical-align: middle; }
.xp-dot--on { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.xp-stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.xp-stat { padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--xp-line); }
.xp-stat strong { display: block; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.xp-stat span { color: var(--xp-muted); font-size: 13px; }
.xp-table-wrap { overflow-x: auto; }
.xp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.xp-table th { text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--xp-muted); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--xp-line); }
.xp-table td { padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); vertical-align: middle; }
.xp-table tr:last-child td { border-bottom: 0; }

/* tabs (links) */
.xp-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.xp-tabs a { padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--xp-muted); text-decoration: none; border: 1px solid transparent; }
.xp-tabs a:hover { color: var(--xp-text); background: rgba(255, 255, 255, 0.06); }
.xp-tabs a[aria-current="page"] { color: #1c1917; background: var(--xp-accent); }

.xp-empty { text-align: center; padding: 36px 20px; color: var(--xp-muted); }
.xp-empty .xp-btn { margin-top: 14px; }

@media (max-width: 480px) {
  .xp-page { padding-top: 24px; }
  .xp-card { padding: 18px; border-radius: 16px; }
}

/* phone tables: drop secondary columns, repeat their facts under the first cell */
.xp-show-sm { display: none; }
@media (max-width: 640px) {
  .xp-hide-sm { display: none; }
  .xp-show-sm { display: block; }
}