@clanwolf/ui-kit 1.0.2 → 2.0.0

package/styles/aux-theme/_aux-theme.scss

@@ -0,0 +1,1492 @@
+/*
+ * AUXILIARY FIGHTS — Master Theme
+ * File: _aux-theme.scss
+ *
+ * Dark military / industrial sci-fi theme.
+ * Designed as the global visual foundation for the Auxiliary Fights Angular app.
+ *
+ * Usage:
+ *   @use 'styles/aux-theme' as aux;
+ *
+ * Or import globally:
+ *   @use './styles/aux-theme';
+ */
+
+/* ============================================================
+   01. DESIGN TOKENS
+   ============================================================ */
+
+:root {
+  /* --- Core surfaces --- */
+  --aux-bg: #080d0d;
+  --aux-bg-raised: #0c1313;
+  --aux-bg-panel: #101919;
+  --aux-bg-panel-hover: #151f1f;
+  --aux-bg-inset: #060a0a;
+
+  /* --- Borders --- */
+  --aux-border: #293636;
+  --aux-border-strong: #3c4d4b;
+  --aux-border-soft: rgba(180, 195, 184, 0.14);
+  --aux-border-active: #aeb79a;
+
+  /* --- Text --- */
+  --aux-text: #e4e7dc;
+  --aux-text-secondary: #aab2a8;
+  --aux-text-muted: #6e7974;
+  --aux-text-disabled: #4b5552;
+
+  /* --- Brand / accent --- */
+  --aux-accent: #c9d09f;
+  --aux-accent-bright: #e0e5bd;
+  --aux-accent-dark: #788266;
+  --aux-accent-glow: rgba(201, 208, 159, 0.18);
+
+  /* --- Status --- */
+  --aux-success: #62d48b;
+  --aux-success-bright: #82f1a7;
+  --aux-success-dark: #286f47;
+  --aux-success-glow: rgba(98, 212, 139, 0.16);
+
+  --aux-danger: #ef4d42;
+  --aux-danger-bright: #ff756b;
+  --aux-danger-dark: #7c2925;
+  --aux-danger-glow: rgba(239, 77, 66, 0.15);
+
+  --aux-warning: #e59b42;
+  --aux-warning-bright: #ffba61;
+  --aux-warning-glow: rgba(229, 155, 66, 0.15);
+
+  /* --- Factions --- */
+  --aux-faction-sp1: #e0443b;
+  --aux-faction-sp1-bright: #ff5c51;
+  --aux-faction-sp1-dark: #7f2824;
+
+  --aux-faction-sp2: #4e9be8;
+  --aux-faction-sp2-bright: #73b7ff;
+  --aux-faction-sp2-dark: #285984;
+
+  /* --- Technical lines --- */
+  --aux-grid: rgba(150, 165, 155, 0.055);
+  --aux-grid-strong: rgba(150, 165, 155, 0.09);
+  --aux-scanline: rgba(255, 255, 255, 0.018);
+
+  /* --- Typography --- */
+  --aux-font-display: 'Rajdhani', 'Arial Narrow', sans-serif;
+  --aux-font-body: Inter, 'Segoe UI', Arial, sans-serif;
+  --aux-font-mono: 'JetBrains Mono', 'Roboto Mono', monospace;
+
+  /* --- Type scale --- */
+  --aux-text-xs: 0.65rem;
+  --aux-text-sm: 0.75rem;
+  --aux-text-md: 0.875rem;
+  --aux-text-lg: 1rem;
+  --aux-text-xl: 1.25rem;
+  --aux-text-2xl: 1.65rem;
+  --aux-text-3xl: 2.2rem;
+
+  /* --- Spacing --- */
+  --aux-space-1: 0.25rem;
+  --aux-space-2: 0.5rem;
+  --aux-space-3: 0.75rem;
+  --aux-space-4: 1rem;
+  --aux-space-5: 1.25rem;
+  --aux-space-6: 1.5rem;
+  --aux-space-8: 2rem;
+  --aux-space-10: 2.5rem;
+
+  /* --- Shape --- */
+  --aux-radius-sm: 3px;
+  --aux-radius-md: 5px;
+  --aux-radius-lg: 8px;
+
+  /* --- Shadows / glow --- */
+  --aux-shadow-panel:
+    0 10px 30px rgba(0, 0, 0, 0.32);
+
+  --aux-shadow-active:
+    0 0 18px var(--aux-accent-glow);
+
+  --aux-shadow-success:
+    0 0 18px var(--aux-success-glow);
+
+  /* --- Transitions --- */
+  --aux-transition-fast: 120ms ease;
+  --aux-transition: 180ms ease;
+  --aux-transition-slow: 280ms ease;
+}
+
+
+/* ============================================================
+   02. SCSS CONFIGURATION
+   ============================================================ */
+
+$aux-bg: #080d0d;
+$aux-bg-panel: #101919;
+$aux-accent: #c9d09f;
+$aux-success: #62d48b;
+$aux-danger: #ef4d42;
+$aux-warning: #e59b42;
+$aux-sp1: #e0443b;
+$aux-sp2: #4e9be8;
+
+
+/* ============================================================
+   03. MIXINS
+   ============================================================ */
+
+/*
+ * Technical angular border.
+ *
+ * Use:
+ *   @include aux-tech-border;
+ */
+@mixin aux-tech-border($color: var(--aux-border)) {
+  border: 1px solid $color;
+  clip-path: polygon(
+    0 7px,
+    7px 0,
+    calc(100% - 7px) 0,
+    100% 7px,
+    100% calc(100% - 7px),
+    calc(100% - 7px) 100%,
+    7px 100%,
+    0 calc(100% - 7px)
+  );
+}
+
+
+/*
+ * Small corner brackets.
+ */
+@mixin aux-corners(
+  $color: var(--aux-border-strong),
+  $size: 10px
+) {
+  position: relative;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    width: $size;
+    height: $size;
+    pointer-events: none;
+  }
+
+  &::before {
+    top: 0;
+    left: 0;
+    border-top: 1px solid $color;
+    border-left: 1px solid $color;
+  }
+
+  &::after {
+    right: 0;
+    bottom: 0;
+    border-right: 1px solid $color;
+    border-bottom: 1px solid $color;
+  }
+}
+
+
+/*
+ * Technical panel background.
+ */
+@mixin aux-panel {
+  position: relative;
+  background:
+    linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0.018),
+      transparent 35%
+    ),
+    var(--aux-bg-panel);
+
+  border: 1px solid var(--aux-border);
+  box-shadow: var(--aux-shadow-panel);
+}
+
+
+/*
+ * Subtle technical grid.
+ */
+@mixin aux-grid {
+  background-image:
+    linear-gradient(
+      var(--aux-grid) 1px,
+      transparent 1px
+    ),
+    linear-gradient(
+      90deg,
+      var(--aux-grid) 1px,
+      transparent 1px
+    );
+
+  background-size: 24px 24px;
+}
+
+
+/*
+ * Display / military heading.
+ */
+@mixin aux-display($size: var(--aux-text-xl)) {
+  font-family: var(--aux-font-display);
+  font-size: $size;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+
+/*
+ * Monospace technical data.
+ */
+@mixin aux-mono {
+  font-family: var(--aux-font-mono);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.03em;
+}
+
+/*
+ * Illuminated icon filter.
+ */
+@mixin aux-icon-illuminate($color: #00ff00) {
+  filter:
+    brightness(.1)
+    drop-shadow(0 0 1px $color)
+    drop-shadow(0 0 1px $color);
+}
+
+
+/* ============================================================
+   04. GLOBAL FOUNDATION
+   ============================================================ */
+
+html,
+body {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  background:
+    radial-gradient(
+      circle at 50% 0%,
+      rgba(91, 110, 95, 0.08),
+      transparent 42%
+    ),
+    var(--aux-bg);
+
+  color: var(--aux-text);
+  font-family: var(--aux-font-body);
+  font-size: 16px;
+  line-height: 1.45;
+
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+button {
+  color: inherit;
+}
+
+::selection {
+  background: var(--aux-accent);
+  color: var(--aux-bg);
+}
+
+
+/* ============================================================
+   05. TYPOGRAPHY
+   ============================================================ */
+
+.aux-title,
+.aux-heading,
+.aux-label,
+.aux-button,
+.aux-nav,
+.aux-status,
+.aux-kicker {
+  font-family: var(--aux-font-display);
+  text-transform: uppercase;
+}
+
+.aux-title {
+  @include aux-display(var(--aux-text-3xl));
+  margin: 0;
+  line-height: 0.95;
+}
+
+.aux-heading {
+  @include aux-display(var(--aux-text-xl));
+  margin: 0;
+}
+
+.aux-kicker {
+  @include aux-display(var(--aux-text-xs));
+  color: var(--aux-text-muted);
+  letter-spacing: 0.18em;
+}
+
+.aux-label {
+  @include aux-display(var(--aux-text-sm));
+  color: var(--aux-text-secondary);
+  letter-spacing: 0.12em;
+}
+
+.aux-data {
+  @include aux-mono;
+  font-size: var(--aux-text-sm);
+}
+
+.aux-muted {
+  color: var(--aux-text-muted);
+}
+
+.aux-secondary {
+  color: var(--aux-text-secondary);
+}
+
+
+/* ============================================================
+   06. APP SHELL
+   ============================================================ */
+
+.aux-app {
+  min-height: 100dvh;
+  background:
+    linear-gradient(
+      rgba(255, 255, 255, 0.012) 50%,
+      transparent 50%
+    ),
+    var(--aux-bg);
+
+  background-size: 100% 4px;
+}
+
+.aux-shell {
+  width: min(100%, 480px);
+  min-height: 100dvh;
+  margin: 0 auto;
+  padding:
+    env(safe-area-inset-top)
+    var(--aux-space-4)
+    env(safe-area-inset-bottom);
+
+  position: relative;
+  overflow: hidden;
+}
+
+.aux-grid-background {
+  @include aux-grid;
+}
+
+.aux-content {
+  position: relative;
+  z-index: 1;
+}
+
+
+/* ============================================================
+   07. HEADER / NAVIGATION
+   ============================================================ */
+
+.aux-header {
+  display: flex;
+  align-items: center;
+  gap: var(--aux-space-3);
+
+  min-height: 58px;
+  border-bottom: 1px solid var(--aux-border);
+
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    width: 42px;
+    height: 1px;
+    background: var(--aux-accent);
+  }
+}
+
+.aux-header__back,
+.aux-header__action {
+  display: grid;
+  place-items: center;
+
+  width: 38px;
+  height: 38px;
+
+  border: 0;
+  background: transparent;
+  color: var(--aux-text-secondary);
+
+  cursor: pointer;
+
+  transition:
+    color var(--aux-transition),
+    background var(--aux-transition);
+
+  &:hover {
+    color: var(--aux-text);
+    background: var(--aux-bg-panel);
+  }
+}
+
+.aux-header__brand {
+  display: flex;
+  align-items: center;
+  gap: var(--aux-space-2);
+
+  flex: 1;
+
+  @include aux-display(var(--aux-text-sm));
+}
+
+.aux-header__logo {
+  width: 28px;
+  height: 28px;
+  object-fit: contain;
+}
+
+.aux-header__meta {
+  @include aux-mono;
+  color: var(--aux-text-muted);
+  font-size: 0.6rem;
+}
+
+
+/* ============================================================
+   08. TECHNICAL CARDS
+   ============================================================ */
+
+.aux-card {
+  @include aux-panel;
+  @include aux-corners;
+
+  padding: var(--aux-space-4);
+}
+
+.aux-card--inset {
+  background: var(--aux-bg-inset);
+  box-shadow: none;
+}
+
+.aux-card--active {
+  border-color: var(--aux-accent);
+  box-shadow: var(--aux-shadow-active);
+}
+
+.aux-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  margin-bottom: var(--aux-space-3);
+}
+
+.aux-card__title {
+  @include aux-display(var(--aux-text-md));
+}
+
+.aux-card__body {
+  color: var(--aux-text-secondary);
+  font-size: var(--aux-text-sm);
+}
+
+
+/* ============================================================
+   09. BUTTON SYSTEM
+   ============================================================ */
+
+.aux-button {
+  @include aux-display(var(--aux-text-md));
+
+  min-height: 48px;
+  padding: 0 var(--aux-space-5);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--aux-space-3);
+
+  border: 1px solid var(--aux-border-strong);
+  background: var(--aux-bg-panel);
+
+  color: var(--aux-text);
+  letter-spacing: 0.1em;
+
+  cursor: pointer;
+
+  position: relative;
+  overflow: hidden;
+
+  transition:
+    border-color var(--aux-transition),
+    background var(--aux-transition),
+    color var(--aux-transition),
+    box-shadow var(--aux-transition),
+    transform var(--aux-transition-fast);
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+
+    background:
+      linear-gradient(
+        90deg,
+        transparent,
+        rgba(255, 255, 255, 0.05),
+        transparent
+      );
+
+    transform: translateX(-100%);
+    transition: transform 350ms ease;
+  }
+
+  &:hover::before {
+    transform: translateX(100%);
+  }
+
+  &:active {
+    transform: translateY(1px);
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+.aux-button--primary {
+  color: var(--aux-bg);
+  background: var(--aux-accent);
+  border-color: var(--aux-accent-bright);
+
+  &:hover {
+    background: var(--aux-accent-bright);
+    box-shadow: var(--aux-shadow-active);
+  }
+}
+
+.aux-button--success {
+  color: var(--aux-bg);
+  background: var(--aux-success);
+  border-color: var(--aux-success-bright);
+
+  &:hover {
+    box-shadow: var(--aux-shadow-success);
+  }
+}
+
+.aux-button--danger {
+  color: var(--aux-danger-bright);
+  border-color: var(--aux-danger);
+
+  &:hover {
+    background: var(--aux-danger-glow);
+  }
+}
+
+.aux-button--ghost {
+  background: transparent;
+  border-color: var(--aux-border);
+
+  &:hover {
+    border-color: var(--aux-border-strong);
+    background: var(--aux-bg-panel);
+  }
+}
+
+.aux-button--full {
+  width: 100%;
+}
+
+.aux-button__icon {
+  display: inline-grid;
+  place-items: center;
+}
+
+
+/* ============================================================
+   10. FORM CONTROLS
+   ============================================================ */
+
+.aux-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aux-space-2);
+}
+
+.aux-field__label {
+  @include aux-display(var(--aux-text-xs));
+  color: var(--aux-text-secondary);
+  letter-spacing: 0.12em;
+}
+
+.aux-input {
+  width: 100%;
+  min-height: 48px;
+
+  padding: 0 var(--aux-space-3);
+
+  color: var(--aux-text);
+  background: var(--aux-bg-inset);
+
+  border: 1px solid var(--aux-border);
+  border-radius: var(--aux-radius-sm);
+
+  outline: none;
+
+  @include aux-mono;
+
+  transition:
+    border-color var(--aux-transition),
+    box-shadow var(--aux-transition);
+
+  &::placeholder {
+    color: var(--aux-text-disabled);
+  }
+
+  &:hover {
+    border-color: var(--aux-border-strong);
+  }
+
+  &:focus {
+    border-color: var(--aux-accent);
+    box-shadow:
+      0 0 0 1px var(--aux-accent),
+      0 0 16px var(--aux-accent-glow);
+  }
+
+  &.ng-invalid.ng-touched {
+    border-color: var(--aux-danger);
+  }
+}
+
+
+/* ============================================================
+   11. STATUS SYSTEM
+   ============================================================ */
+
+.aux-status {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--aux-space-2);
+
+  font-size: var(--aux-text-xs);
+  letter-spacing: 0.1em;
+}
+
+.aux-status::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  box-shadow: 0 0 8px currentColor;
+}
+
+.aux-status--active {
+  color: var(--aux-success);
+}
+
+.aux-status--warning {
+  color: var(--aux-warning);
+}
+
+.aux-status--danger {
+  color: var(--aux-danger);
+}
+
+.aux-status--offline {
+  color: var(--aux-text-muted);
+}
+
+
+/* ============================================================
+   12. FACTION CARDS
+   ============================================================ */
+
+.aux-factions {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--aux-space-3);
+}
+
+.aux-faction {
+  @include aux-panel;
+
+  min-height: 190px;
+  padding: var(--aux-space-4);
+
+  display: flex;
+  flex-direction: column;
+
+  cursor: pointer;
+
+  border: 1px solid var(--aux-border);
+
+  transition:
+    border-color var(--aux-transition),
+    box-shadow var(--aux-transition),
+    transform var(--aux-transition-fast);
+
+  &:hover {
+    transform: translateY(-1px);
+  }
+}
+
+.aux-faction--sp1 {
+  --aux-faction-color: var(--aux-faction-sp1);
+  --aux-faction-bright: var(--aux-faction-sp1-bright);
+
+  border-color: var(--aux-faction-color);
+
+  &:hover,
+  &.is-selected {
+    box-shadow: 0 0 20px rgba(224, 68, 59, 0.15);
+  }
+}
+
+.aux-faction--sp2 {
+  --aux-faction-color: var(--aux-faction-sp2);
+  --aux-faction-bright: var(--aux-faction-sp2-bright);
+
+  border-color: var(--aux-faction-color);
+
+  &:hover,
+  &.is-selected {
+    box-shadow: 0 0 20px rgba(78, 155, 232, 0.15);
+  }
+}
+
+.aux-faction__icon {
+  margin-bottom: var(--aux-space-4);
+  @include aux-icon-illuminate(var(--aux-faction-color));
+  color: var(--aux-faction-color);
+}
+
+.aux-faction__code {
+  @include aux-mono;
+
+  color: var(--aux-faction-bright);
+  font-size: var(--aux-text-sm);
+}
+
+.aux-faction__name {
+  @include aux-display(var(--aux-text-md));
+
+  margin-top: var(--aux-space-1);
+}
+
+.aux-faction__description {
+  margin-top: auto;
+
+  color: var(--aux-text-muted);
+  font-size: var(--aux-text-xs);
+}
+
+.aux-faction__radio {
+  width: 14px;
+  height: 14px;
+
+  margin-top: var(--aux-space-3);
+
+  border: 1px solid var(--aux-faction-color);
+  border-radius: 50%;
+
+  &.is-selected {
+    background: var(--aux-faction-color);
+    box-shadow: 0 0 8px var(--aux-faction-color);
+  }
+}
+
+
+/* ============================================================
+   13. MATCH / TIMER
+   ============================================================ */
+
+.aux-match {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aux-space-5);
+}
+
+.aux-timer {
+  position: relative;
+
+  width: 190px;
+  height: 190px;
+
+  margin: var(--aux-space-4) auto;
+
+  display: grid;
+  place-items: center;
+
+  border: 1px solid var(--aux-border-strong);
+  border-radius: 50%;
+
+  background:
+    radial-gradient(
+      circle,
+      var(--aux-bg-panel),
+      var(--aux-bg-inset)
+    );
+
+  box-shadow:
+    inset 0 0 30px rgba(0, 0, 0, 0.45),
+    0 0 20px rgba(201, 208, 159, 0.05);
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 10px;
+
+    border: 1px solid var(--aux-border-soft);
+    border-radius: 50%;
+  }
+
+  &::after {
+    inset: 22px;
+    border-style: dashed;
+  }
+}
+
+.aux-timer__value {
+  @include aux-mono;
+
+  font-size: 1.7rem;
+  color: var(--aux-accent);
+}
+
+.aux-timer__label {
+  @include aux-display(var(--aux-text-xs));
+
+  color: var(--aux-text-muted);
+}
+
+
+/* ============================================================
+   14. RESULT / VERIFICATION
+   ============================================================ */
+
+.aux-result {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: var(--aux-space-2);
+}
+
+.aux-result__vs {
+  @include aux-mono;
+
+  color: var(--aux-text-muted);
+  font-size: var(--aux-text-xs);
+}
+
+.aux-result__winner {
+  @include aux-panel;
+
+  padding: var(--aux-space-4);
+  text-align: center;
+
+  border-color: var(--aux-success);
+}
+
+.aux-result__icon {
+  width: 52px;
+  height: 52px;
+  margin: 0 auto var(--aux-space-3);
+}
+
+
+/* ============================================================
+   15. ID SCANNER
+   ============================================================ */
+
+.aux-scanner {
+  position: relative;
+
+  aspect-ratio: 1 / 1;
+
+  background: var(--aux-bg-inset);
+  border: 1px solid var(--aux-border);
+
+  overflow: hidden;
+}
+
+.aux-scanner__frame {
+  position: absolute;
+  inset: 14%;
+
+  border: 1px solid var(--aux-accent);
+
+  background:
+    linear-gradient(
+      90deg,
+      transparent 48%,
+      var(--aux-grid-strong) 50%,
+      transparent 52%
+    ),
+    linear-gradient(
+      transparent 48%,
+      var(--aux-grid-strong) 50%,
+      transparent 52%
+    );
+
+  background-size: 100% 100%;
+}
+
+.aux-scanner__line {
+  position: absolute;
+
+  left: 14%;
+  right: 14%;
+  top: 50%;
+
+  height: 1px;
+
+  background: var(--aux-accent);
+  box-shadow: 0 0 12px var(--aux-accent);
+
+  animation: aux-scan 2.2s ease-in-out infinite;
+}
+
+@keyframes aux-scan {
+  0%,
+  100% {
+    transform: translateY(-55px);
+    opacity: 0.4;
+  }
+
+  50% {
+    transform: translateY(55px);
+    opacity: 1;
+  }
+}
+
+
+/* ============================================================
+   16. VERIFICATION STATE
+   ============================================================ */
+
+.aux-verification {
+  text-align: center;
+}
+
+.aux-verification__icon {
+  width: 110px;
+  height: 110px;
+
+  margin: var(--aux-space-8) auto;
+
+  display: grid;
+  place-items: center;
+
+  border: 1px solid var(--aux-success);
+  border-radius: 50%;
+
+  color: var(--aux-success);
+  font-size: 3rem;
+
+  box-shadow: var(--aux-shadow-success);
+}
+
+.aux-verification__title {
+  @include aux-display(var(--aux-text-2xl));
+}
+
+.aux-verification__title strong {
+  color: var(--aux-success);
+}
+
+
+/* ============================================================
+   17. HISTORY
+   ============================================================ */
+
+.aux-history {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+
+  border: 1px solid var(--aux-border);
+}
+
+.aux-history__item {
+  display: grid;
+  grid-template-columns: 40px 1fr auto;
+  align-items: center;
+  gap: var(--aux-space-3);
+
+  min-height: 68px;
+  padding: var(--aux-space-3);
+
+  background: var(--aux-bg-panel);
+
+  transition: background var(--aux-transition);
+
+  &:hover {
+    background: var(--aux-bg-panel-hover);
+  }
+}
+
+.aux-history__icon {
+  width: 32px;
+  height: 32px;
+}
+
+.aux-history__date {
+  @include aux-mono;
+
+  color: var(--aux-text-muted);
+  font-size: 0.6rem;
+}
+
+.aux-history__result {
+  @include aux-display(var(--aux-text-sm));
+}
+
+.aux-history__result--win {
+  color: var(--aux-success);
+}
+
+.aux-history__result--loss {
+  color: var(--aux-danger);
+}
+
+
+/* ============================================================
+   18. ACCOUNT
+   ============================================================ */
+
+.aux-account {
+  @include aux-panel;
+  padding: var(--aux-space-4);
+}
+
+.aux-account__row {
+  display: grid;
+  grid-template-columns: 100px 1fr;
+  gap: var(--aux-space-3);
+
+  padding: var(--aux-space-2) 0;
+
+  border-bottom: 1px solid var(--aux-border-soft);
+
+  &:last-child {
+    border-bottom: 0;
+  }
+}
+
+.aux-account__label {
+  @include aux-display(var(--aux-text-xs));
+
+  color: var(--aux-text-muted);
+}
+
+.aux-account__value {
+  @include aux-mono;
+
+  font-size: var(--aux-text-sm);
+}
+
+
+/* ============================================================
+   19. SPACING UTILITIES
+   ============================================================ */
+
+.aux-stack {
+  display: flex;
+  flex-direction: column;
+}
+
+.aux-stack--2 {
+  gap: var(--aux-space-2);
+}
+
+.aux-stack--3 {
+  gap: var(--aux-space-3);
+}
+
+.aux-stack--4 {
+  gap: var(--aux-space-4);
+}
+
+.aux-stack--6 {
+  gap: var(--aux-space-6);
+}
+
+.aux-stack--8 {
+  gap: var(--aux-space-8);
+}
+
+.aux-row {
+  display: flex;
+  align-items: center;
+}
+
+.aux-row--between {
+  justify-content: space-between;
+}
+
+.aux-row--gap {
+  gap: var(--aux-space-3);
+}
+
+
+/* ============================================================
+   20. RESPONSIVE
+   ============================================================ */
+
+@media (min-width: 600px) {
+  .aux-shell {
+    width: min(100%, 520px);
+    padding-left: var(--aux-space-6);
+    padding-right: var(--aux-space-6);
+  }
+}
+
+
+/* ============================================================
+   21. ACCESSIBILITY
+   ============================================================ */
+
+:focus-visible {
+  outline: 1px solid var(--aux-accent);
+  outline-offset: 3px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ============================================================
+   22. PROGRESS / LOADING BAR
+   ============================================================ */
+
+.aux-progress {
+  width: 100%;
+}
+
+.aux-progress__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  margin-bottom: var(--aux-space-2);
+}
+
+.aux-progress__label {
+  @include aux-display(var(--aux-text-xs));
+
+  color: var(--aux-text-secondary);
+  letter-spacing: 0.14em;
+}
+
+.aux-progress__value {
+  @include aux-mono;
+
+  color: var(--aux-accent);
+  font-size: var(--aux-text-xs);
+}
+
+
+/* ------------------------------------------------------------
+   Progress Track
+   ------------------------------------------------------------ */
+
+.aux-progress__track {
+  position: relative;
+
+  width: 100%;
+  height: 12px;
+
+  padding: 2px;
+
+  background: var(--aux-bg-inset);
+  border: 1px solid var(--aux-border);
+
+  clip-path: polygon(
+    0 4px,
+    4px 0,
+    100% 0,
+    100% calc(100% - 4px),
+    calc(100% - 4px) 100%,
+    0 100%
+  );
+
+  overflow: hidden;
+}
+
+
+/* ------------------------------------------------------------
+   Progress Fill
+   ------------------------------------------------------------ */
+
+.aux-progress__bar {
+  height: 100%;
+  width: var(--aux-progress, 0%);
+
+  background:
+    linear-gradient(
+      90deg,
+      var(--aux-accent-dark),
+      var(--aux-accent)
+    );
+
+  box-shadow:
+    0 0 8px var(--aux-accent-glow);
+
+  transition: width 300ms ease;
+
+  position: relative;
+}
+
+
+/* ------------------------------------------------------------
+   Technical Highlight
+   ------------------------------------------------------------ */
+
+.aux-progress__bar::after {
+  content: '';
+
+  position: absolute;
+  inset: 0;
+
+  background:
+    linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.25) 50%,
+      transparent 100%
+    );
+
+  transform: translateX(-100%);
+}
+
+
+/* ------------------------------------------------------------
+   Animated Loading State
+   ------------------------------------------------------------ */
+
+.aux-progress--loading {
+  .aux-progress__bar::after {
+    animation: aux-progress-scan 1.6s ease-in-out infinite;
+  }
+}
+
+@keyframes aux-progress-scan {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+
+/* ------------------------------------------------------------
+   Segmented Variant
+   ------------------------------------------------------------ */
+
+.aux-progress--segmented {
+  .aux-progress__track {
+    padding: 3px;
+
+    background:
+      repeating-linear-gradient(
+        90deg,
+        var(--aux-bg-inset) 0,
+        var(--aux-bg-inset) 8px,
+        transparent 8px,
+        transparent 10px
+      );
+  }
+
+  .aux-progress__bar {
+    background:
+      repeating-linear-gradient(
+        90deg,
+        var(--aux-accent) 0,
+        var(--aux-accent) 8px,
+        transparent 8px,
+        transparent 10px
+      );
+
+    box-shadow: none;
+  }
+}
+
+
+/* ------------------------------------------------------------
+   Status Variants
+   ------------------------------------------------------------ */
+
+.aux-progress--success {
+  .aux-progress__value {
+    color: var(--aux-success);
+  }
+
+  .aux-progress__bar {
+    background:
+      linear-gradient(
+        90deg,
+        var(--aux-success-dark),
+        var(--aux-success)
+      );
+
+    box-shadow:
+      0 0 8px var(--aux-success-glow);
+  }
+}
+
+.aux-progress--danger {
+  .aux-progress__value {
+    color: var(--aux-danger);
+  }
+
+  .aux-progress__bar {
+    background:
+      linear-gradient(
+        90deg,
+        var(--aux-danger-dark),
+        var(--aux-danger)
+      );
+  }
+}
+
+/* ------------------------------------------------------------
+   Automatic / Indeterminate Loading
+   ------------------------------------------------------------ */
+
+.aux-progress--indeterminate {
+  .aux-progress__bar {
+    width: 35%;
+    animation: aux-progress-indeterminate 1.8s
+    cubic-bezier(0.65, 0, 0.35, 1) infinite;
+  }
+
+  .aux-progress__value {
+    animation: aux-progress-blink 1.8s ease-in-out infinite;
+  }
+}
+
+@keyframes aux-progress-indeterminate {
+  0% {
+    transform: translateX(-120%);
+  }
+
+  50% {
+    transform: translateX(180%);
+  }
+
+  100% {
+    transform: translateX(320%);
+  }
+}
+
+@keyframes aux-progress-blink {
+  0%,
+  100% {
+    opacity: 0.45;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+/* ============================================================
+   23. BACKGROUND SCAN LINE
+   Subtle tactical display scan effect
+   ============================================================ */
+
+.aux-scan-background {
+  position: relative;
+  overflow: hidden;
+}
+
+/* Scan line */
+
+.aux-scan-background::after {
+  content: '';
+
+  position: absolute;
+  left: -10%;
+  right: -10%;
+  top: -15%;
+
+  height: 80px;
+
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    var(--aux-accent-glow),
+    rgba(201, 208, 159, 0.04),
+    transparent
+  );
+
+  border-top: 1px solid var(--aux-accent);
+
+  opacity: 0.14;
+
+  filter: blur(0.2px);
+
+  pointer-events: none;
+
+  animation: aux-background-scan 8s
+  cubic-bezier(0.45, 0, 0.55, 1)
+  infinite;
+}
+
+
+@keyframes aux-background-scan {
+
+  0% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+
+  8% {
+    opacity: 0.18;
+  }
+
+  50% {
+    opacity: 0.18;
+  }
+
+  92% {
+    opacity: 0.18;
+  }
+
+  100% {
+    transform: translateY(120vh);
+    opacity: 0;
+  }
+}