:root {
    --flq-orange: #ff6600;
    --flq-black: #0d0d0d;
    --flq-surface: #111111;
    --flq-surface-2: #171717;
    --flq-border: #292929;
    --flq-white: #ffffff;
    --flq-muted: #999999;

    --flq-radius: 10px;
    --flq-transition: 180ms ease;
}

/* ===== FAULTLINQ SHARED BRAND ===== */

.logo-img {
    width: clamp(190px, 22vw, 280px);
    height: auto;
    display: block;
}
/* Smaller FaultLinQ mark when used inside equipment/QR tags */
.tag .logo-img {
    width: 140px;
    max-width: 100%;
    height: auto;
}
/* =========================================================
   FAULTLINQ DESIGN SYSTEM — INDUSTRIAL FOUNDATION
   ========================================================= */

html {
    color-scheme: dark;
}

body {
    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(255, 102, 0, 0.07),
            transparent 32rem
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        ),
        #0d0d0d;

    background-size:
        auto,
        32px 32px,
        auto;

    color: var(--flq-white);
}

/* Subtle industrial edge across the top */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--flq-orange) 30%,
        var(--flq-orange) 70%,
        transparent
    );
    opacity: 0.8;
    pointer-events: none;
    z-index: 9999;
}

/* Canonical FaultLinQ wordmark */
.logo-img {
    width: clamp(190px, 22vw, 280px);
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
}

/* Controls */
button,
input,
select,
textarea {
    font: inherit;
}

button {
    transition:
        transform var(--flq-transition),
        border-color var(--flq-transition),
        background-color var(--flq-transition),
        box-shadow var(--flq-transition);
}

input,
select,
textarea {
    border-color: var(--flq-border);
    outline: none;
    transition:
        border-color var(--flq-transition),
        box-shadow var(--flq-transition),
        background-color var(--flq-transition);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--flq-orange);
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.12);
}

/* FaultLinQ orange gets a little physical depth */
button.primary,
.primary {
    box-shadow:
        0 8px 24px rgba(255, 102, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

@media (hover: hover) {
    button:hover {
        transform: translateY(-1px);
    }

    button.primary:hover,
    .primary:hover {
        box-shadow:
            0 10px 30px rgba(255, 102, 0, 0.20),
            inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }
}

button:active {
    transform: translateY(0);
}

/* Selection stays on-brand */
::selection {
    background: var(--flq-orange);
    color: #ffffff;
}

/* Industrial scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #0d0d0d;
}

::-webkit-scrollbar-thumb {
    background: #333333;
    border: 2px solid #0d0d0d;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ff6600;
}
/* Standard page branding */
.page-brand {
    margin-bottom: 28px;
}

.page-brand .logo-img {
    width: 240px;
    max-width: 100%;
}
/* =========================================================
   FAULTLINQ DIAGNOSTIC COMMAND PANEL
   ========================================================= */

.problem-box {
    position: relative;
    margin: 34px 0;
    padding: 30px;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(255, 102, 0, 0.08),
            rgba(255, 102, 0, 0.015) 45%,
            rgba(255, 255, 255, 0.015)
        ),
        #151515;

    border: 1px solid #383838;
    border-left: 4px solid #ff6600;
    border-radius: 12px;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.problem-box small {
    display: block;
    margin-bottom: 8px;

    color: #ff6600;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.problem-box h2 {
    margin: 0 0 12px;

    color: #ffffff;
    font-size: clamp(28px, 4vw, 38px);
    line-height: 1.05;
}

.problem-box p {
    max-width: 700px;
    margin: 0 0 24px;

    color: #bcbcbc;
    font-size: 16px;
    line-height: 1.65;
}

/* Primary field action */
.problem-box .diagnose-button {
    width: 100%;
    min-height: 64px;

    border: 1px solid #ff7a22;
    border-radius: 8px;

    background: #ff6600;
    color: #ffffff;

    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.7px;

    cursor: pointer;

    box-shadow:
        0 10px 30px rgba(255, 102, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

@media (hover: hover) {
    .problem-box .diagnose-button:hover {
        background: #ff7417;
        border-color: #ff8a3d;

        box-shadow:
            0 14px 36px rgba(255, 102, 0, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.22);

        transform: translateY(-1px);
    }
}

.problem-box .diagnose-button:active {
    transform: translateY(0);
}

@media (max-width: 600px) {
    .problem-box {
        margin: 24px 0;
        padding: 24px 20px;
    }

    .problem-box .diagnose-button {
        min-height: 60px;
    }
}
/* =========================================================
   FAULTLINQ ASSET QR UTILITY
   ========================================================= */

.qr-section {
    display: grid;
    grid-template-columns: 170px 1fr;
    grid-template-areas:
        "title title"
        "qr brand"
        "qr machine"
        "qr description"
        "qr asset"
        "qr button";

    column-gap: 28px;
    row-gap: 6px;

    margin: 28px 0;
    padding: 24px;

    background: #141414;
    border: 1px solid #333333;
    border-radius: 12px;

    align-items: center;
}

.qr-section h2 {
    grid-area: title;

    margin: 0 0 14px;

    color: #ffffff;
    font-size: 20px;
}

/* QR itself */
#equipment-qr {
    grid-area: qr;

    width: 160px;
    height: 160px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 8px;
    background: #ffffff;
    border-radius: 8px;
}

#equipment-qr img,
#equipment-qr canvas {
    width: 144px !important;
    height: 144px !important;
    max-width: 100%;
    display: block;
}

.qr-section .print-brand {
    grid-area: brand;

    color: #ff6600;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.qr-section .print-machine-type {
    grid-area: machine;

    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.qr-section > p:not(#equipment-qr-id) {
    grid-area: description;

    margin: 4px 0;

    color: #a9a9a9;
    line-height: 1.5;
}

#equipment-qr-id {
    grid-area: asset;

    margin: 2px 0 10px;

    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

#print-label-button {
    grid-area: button;

    width: fit-content;
    min-width: 150px;

    padding: 11px 18px;

    background: transparent;
    color: #ffffff;

    border: 1px solid #555555;
    border-radius: 7px;

    font-weight: 700;
    cursor: pointer;
}

@media (hover: hover) {
    #print-label-button:hover {
        border-color: #ff6600;
        background: rgba(255, 102, 0, 0.08);
    }
}

/* Phone / rugged-screen layout */
@media (max-width: 600px) {
    .qr-section {
        grid-template-columns: 130px 1fr;
        grid-template-areas:
            "title title"
            "qr brand"
            "qr machine"
            "qr asset"
            "description description"
            "button button";

        column-gap: 18px;
        padding: 20px;
    }

    #equipment-qr {
        width: 125px;
        height: 125px;
    }

    #equipment-qr img,
    #equipment-qr canvas {
        width: 109px !important;
        height: 109px !important;
    }

    #print-label-button {
        width: 100%;
        margin-top: 10px;
        min-height: 48px;
    }
}
/* =========================================================
   FAULTLINQ DIAGNOSTIC TEST / EVIDENCE CARD
   ========================================================= */

.service-test-card {
    position: relative;

    margin: 22px 0;
    padding: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 102, 0, 0.055),
            transparent 45%
        ),
        #141414;

    border: 1px solid #343434;
    border-left: 4px solid #ff6600;
    border-radius: 10px;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.20);

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}

/* Highlight the test currently being worked */
.service-test-card:focus-within {
    border-color: #555555;
    border-left-color: #ff6600;

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 102, 0, 0.08);
}

/* TEST 01 / TEST 02 / etc. */
.service-test-card > strong {
    display: block;

    margin-bottom: 22px;
    padding-bottom: 14px;

    color: #ff6600;

    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2.2px;

    border-bottom: 1px solid #303030;
}

/* Field labels */
.service-test-card label {
    display: block;

    margin: 18px 0 7px;

    color: #d8d8d8;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* Diagnostic evidence inputs */
.service-test-card input,
.service-test-card select,
.service-test-card textarea {
    display: block;
    width: 100%;

    padding: 13px 14px;

    background: #0d0d0d;
    color: #ffffff;

    border: 1px solid #3b3b3b;
    border-radius: 7px;

    font-size: 16px;
    line-height: 1.4;
}

.service-test-card textarea {
    min-height: 90px;
    resize: vertical;
}

.service-test-card input::placeholder,
.service-test-card textarea::placeholder {
    color: #737373;
}

/* Active evidence field */
.service-test-card input:focus,
.service-test-card select:focus,
.service-test-card textarea:focus {
    border-color: #ff6600;
    outline: none;

    box-shadow:
        0 0 0 3px rgba(255, 102, 0, 0.10);
}

/* Make result selection feel deliberate */
.service-test-card select {
    cursor: pointer;
}

/* Rugged/mobile */
@media (max-width: 600px) {
    .service-test-card {
        padding: 20px 16px;
        margin: 18px 0;
    }

    .service-test-card input,
    .service-test-card select,
    .service-test-card textarea {
        min-height: 50px;
        font-size: 16px;
    }
}
/* =========================================================
   FAULTLINQ MACHINE MEMORY
   ========================================================= */

.history-entry {
    position: relative;

    margin: 18px 0 24px;
    padding: 22px 24px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 102, 0, 0.045),
            transparent 42%
        ),
        #141414;

    border: 1px solid #303030;
    border-left: 4px solid #ff6600;
    border-radius: 10px;

    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

/* Date / record type / status */
.history-entry .history-date {
    margin-bottom: 9px;

    color: #858585;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* Reported symptom */
.history-entry h3 {
    margin: 0 0 16px;

    color: #ffffff;

    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
}

/* Cause / Resolution / Technician */
.history-entry p {
    margin: 8px 0;

    color: #c2c2c2;

    font-size: 16px;
    line-height: 1.5;
}

/* Technician becomes secondary metadata */
.history-entry p:last-of-type {
    margin-top: 18px;
    padding-top: 14px;

    color: #858585;

    font-size: 13px;

    border-top: 1px solid #2d2d2d;
}

/* Mobile / rugged screen */
@media (max-width: 600px) {
    .history-entry {
        padding: 19px 17px;
    }

    .history-entry h3 {
        font-size: 20px;
    }

    .history-entry p {
        font-size: 15px;
    }
}
/* =========================================================
   FAULTLINQ SESSION RESOLUTION
   ========================================================= */

.resolution-panel {
    position: relative;

    margin-top: 30px;
    padding: 26px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 102, 0, 0.065),
            transparent 45%
        ),
        #141414;

    border: 1px solid #353535;
    border-top: 3px solid #ff6600;
    border-radius: 10px;

    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.resolution-header {
    margin-bottom: 26px;
    padding-bottom: 20px;

    border-bottom: 1px solid #303030;
}

.resolution-eyebrow {
    margin-bottom: 9px;

    color: #ff6600;

    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
}

.resolution-header h3 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 26px;
    font-weight: 800;
}

.resolution-header p {
    max-width: 700px;
    margin: 0;

    color: #999999;

    font-size: 14px;
    line-height: 1.55;
}

/* Resolution field labels */
.resolution-panel > label {
    display: block;

    margin: 20px 0 8px;

    color: #d8d8d8;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* Resolution fields */
.resolution-panel textarea {
    display: block;
    width: 100%;

    padding: 14px;

    background: #0d0d0d;
    color: #ffffff;

    border: 1px solid #3b3b3b;
    border-radius: 7px;

    font-size: 16px;
    line-height: 1.45;

    resize: vertical;
}

.resolution-panel textarea::placeholder {
    color: #737373;
}

.resolution-panel textarea:focus {
    outline: none;
    border-color: #ff6600;

    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.10);
}

/* Save vs Resolve */
.resolution-actions {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 12px;

    margin-top: 26px;
}

#save-progress {
    min-height: 54px;

    background: #292929;
    color: #ffffff;

    border: 1px solid #454545;
    border-radius: 7px;

    font-weight: 800;
}

#resolve-session {
    min-height: 54px;

    background: #ff6600;
    color: #ffffff;

    border: 1px solid #ff6600;
    border-radius: 7px;

    font-weight: 900;
    letter-spacing: 0.4px;
}

#save-progress:hover {
    background: #333333;
}

#resolve-session:hover {
    filter: brightness(1.08);
}

/* Navigation is intentionally separated from resolution */
.session-navigation {
    margin-top: 14px;
}

#choose-session {
    width: 100%;
    min-height: 48px;

    background: transparent;
    color: #999999;

    border: 1px solid #333333;
    border-radius: 7px;

    font-weight: 700;
}

#choose-session:hover {
    color: #ffffff;
    border-color: #555555;
}

/* Rugged/mobile */
@media (max-width: 600px) {

    .resolution-panel {
        padding: 21px 16px;
    }

    .resolution-header h3 {
        font-size: 23px;
    }

    .resolution-actions {
        grid-template-columns: 1fr;
    }

    #resolve-session {
        min-height: 58px;
    }
}
.add-subsystem-button {
  margin-top: 14px;
  padding: 10px 14px;
  background: transparent;
  color: #ff6a00;
  border: 1px solid rgba(255, 106, 0, 0.65);
  border-radius: 7px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
}

.add-subsystem-button:hover {
  background: rgba(255, 106, 0, 0.08);
}

.add-subsystem-button:active {
  transform: translateY(1px);
}
#add-system-button {
  width: 100%;
  margin-top: 24px;
  padding: 14px 20px;
  background: transparent;
  color: #ff6a00;
  border: 1px solid #ff6a00;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.4px;
  cursor: pointer;
}

#add-system-button:hover {
  background: rgba(255, 106, 0, 0.08);
}

#add-system-button:active {
  transform: translateY(1px);
}
#add-component-button {
  width: 100%;
  margin-top: 24px;
  padding: 16px 20px;

  background: #ff6a00;
  color: #111;

  border: none;
  border-radius: 8px;

  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.4px;

  cursor: pointer;
}

#add-component-button:hover {
  filter: brightness(1.08);
}

#add-component-button:active {
  transform: translateY(1px);
}
#add-component-panel {
  margin-top: 24px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 106, 0, 0.45);
  border-radius: 10px;
}

#add-component-panel h3 {
  margin: 0 0 24px;
  font-size: 24px;
}

#add-component-panel label {
  display: block;
  margin: 18px 0 8px;
  font-size: 15px;
  font-weight: 700;
}

#add-component-panel input,
#add-component-panel select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 12px;

  background: #171717;
  color: #fff;

  border: 1px solid #555;
  border-radius: 6px;

  font: inherit;
}

#add-component-panel input:focus,
#add-component-panel select:focus {
  outline: none;
  border-color: #ff6a00;
}

.component-form-actions {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
  margin-top: 26px;
}

.component-form-actions button {
  min-height: 52px;
  border: none;
  border-radius: 7px;

  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

#cancel-component-button {
  background: #333;
  color: #fff;
}

#save-component-button {
  background: #ff6a00;
  color: #111;
}
#add-document-button {
  width: 100%;
  margin-top: 24px;
  padding: 16px 20px;
  background: #ff6a00;
  color: #111;
  border: none;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.4px;
  cursor: pointer;
}

#add-document-button:hover {
  filter: brightness(1.06);
}

#add-document-button:active {
  transform: translateY(1px);
}
#add-document-panel {
  margin-top: 24px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 106, 0, 0.45);
  border-radius: 10px;
}

#add-document-panel h3 {
  margin: 0 0 24px;
  font-size: 24px;
}

#add-document-panel label {
  display: block;
  margin: 18px 0 8px;
  font-weight: 700;
}

#add-document-panel input,
#add-document-panel select,
#add-document-panel textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  background: #171717;
  color: #fff;
  border: 1px solid #555;
  border-radius: 8px;
  font: inherit;
}

#add-document-panel input:focus,
#add-document-panel select:focus,
#add-document-panel textarea:focus {
  outline: none;
  border-color: #ff6a00;
}

#add-document-panel textarea {
  resize: vertical;
}

.document-form-actions {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
  margin-top: 24px;
}

.document-form-actions button {
  padding: 15px 16px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

#cancel-document-button {
  background: #333;
  color: #fff;
}

#upload-document-button {
  background: #ff6a00;
  color: #111;
}

@media (max-width: 600px) {
  .document-form-actions {
    grid-template-columns: 1fr;
  }
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-actions .secondary {
  padding: 9px 14px;
  border: 1px solid #444;
  border-radius: 8px;
  background: #222;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
#add-system-button:hover,
#add-component-button:hover,
.save-button:hover {
  background: #ff761f;
  color: white;
  border-color: #ff761f;
}
/* Keep primary action buttons readable over shared stylesheet */
#add-system-button,
#add-component-button,
.save-button {
  background: #ff6600 !important;
  color: #ffffff !important;
  border-color: #ff6600 !important;
}

#add-system-button:hover,
#add-component-button:hover,
.save-button:hover {
  background: #ff761f !important;
  color: #ffffff !important;
  border-color: #ff761f !important;
}
/* HARD BARRIER BETWEEN ACTIVE DIAGNOSIS AND FINAL RESOLUTION */

.resolution-gate {
  margin-top: 42px;
  padding-top: 34px;
  border-top: 3px solid #ff6600;
}

.resolution-gate-card {
  background: #17120f;
  border: 1px solid #ff6600;
  border-radius: 10px;
  padding: 24px;
}

.resolution-gate-eyebrow {
  color: #ff6600;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
}

.resolution-gate-card h3 {
  font-size: 26px;
  margin-top: 10px;
}

.resolution-gate-card p {
  color: #aaa;
  line-height: 1.6;
  margin-top: 10px;
}

#begin-resolution {
  width: 100%;
  margin-top: 20px;
  background: #ff6600;
  border-color: #ff6600;
  color: #fff;
  text-align: center;
}

#begin-resolution:hover {
  background: #ff761f;
}

#begin-resolution:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.resolution-panel {
  margin-top: 18px;
  padding: 24px;
  background: #101010;
  border: 1px solid #444;
  border-radius: 10px;
}

.resolution-panel h3 {
  font-size: 25px;
  margin-top: 8px;
}

.resolution-panel > p {
  color: #aaa;
  line-height: 1.6;
  margin-top: 8px;
}

.service-form .resolution-confirmation {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 24px 0 0;
  padding: 16px;
  background: #181818;
  border: 1px solid #444;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1.5;
}

.service-form .resolution-confirmation input {
  display: block;
  width: 18px !important;
  min-width: 18px;
  height: 18px;
  padding: 0;
  margin: 3px 0 0;
  accent-color: #ff6600;
}

.resolution-confirmation strong {
  color: #fff;
}

.resolution-confirmation span {
  color: #aaa;
}

#resolve-session:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.faultlinq-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(8, 8, 8, 0.88);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.faultlinq-loader.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.faultlinq-loader-card {
  width: min(420px, 92vw);
  text-align: center;
  padding: 34px 28px;
  border: 1px solid #2d2d2d;
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      #161616,
      #0e0e0e
    );
  box-shadow:
    0 0 50px rgba(255, 102, 0, 0.08);
}

.faultlinq-loader-mark {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 102, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 900;
  color: #ff6600;
  animation:
    faultlinq-loader-pulse 1.35s ease-in-out infinite;
}

.faultlinq-loader-status {
  color: #ff6600;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.faultlinq-loader-message {
  margin-top: 10px;
  color: #aaa;
  font-size: 15px;
  line-height: 1.5;
}

@keyframes faultlinq-loader-pulse {
  0%,
  100% {
    color: #ff6600;
    border-color: rgba(255, 102, 0, 0.35);
    box-shadow:
      0 0 0 rgba(255, 102, 0, 0);
    transform: scale(1);
  }

  50% {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow:
      0 0 28px rgba(255, 102, 0, 0.28);
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faultlinq-loader,
  .faultlinq-loader-mark {
    animation: none;
    transition: none;
  }
}