@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&family=Silkscreen:wght@400;700&display=swap');

:root {
    --sq-bg: #020506;
    --sq-bg-raised: #061011;
    --sq-panel: rgba(5, 15, 16, .82);
    --sq-panel-heavy: rgba(4, 12, 13, .95);

    --sq-primary: #78f4d0;
    --sq-primary-2: #45ad95;
    --sq-primary-dim: #1d5c51;
    --sq-primary-faint: rgba(120, 244, 208, .08);

    --sq-accent: #ffc36b;
    --sq-danger: #ff7272;
    --sq-info: #70c9ff;
    --sq-text: #c7e8df;
    --sq-muted: #64827a;

    --sq-border: rgba(120, 244, 208, .20);
    --sq-border-strong: rgba(120, 244, 208, .38);
    --sq-shadow: 0 0 30px rgba(120, 244, 208, .06);
    --sq-font: "Pixelify Sans", "Consolas", monospace;
    --sq-font-display: "Silkscreen", "Pixelify Sans", "Consolas", monospace;
}

* { box-sizing: border-box; }

html {
    min-width: 320px;
    min-height: 100%;
    background: var(--sq-bg);
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--sq-text);
    background:
        radial-gradient(circle at 55% 10%, rgba(29, 87, 76, .13), transparent 36rem),
        linear-gradient(180deg, #05090a 0%, var(--sq-bg) 60%, #010303 100%);
    font-family: var(--sq-font);
    font-weight: 400;
    font-optical-sizing: auto;
    text-rendering: geometricPrecision;
    animation: sqPageIn .34s ease both;
    transition: opacity .18s ease, transform .18s ease, filter .18s ease;
}

body.sq-leaving {
    opacity: 0;
    transform: scale(.994);
    filter: brightness(.72) blur(.8px);
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }

body,
button,
input,
textarea,
select {
    font-family: var(--sq-font);
}

/* Pixel-display font is reserved for headings and system chrome so longer
   mission copy and forms stay easy to read. */
.sq-title,
.main-menu__intro h1,
.completion-overlay strong {
    font-family: var(--sq-font-display);
    letter-spacing: 0;
}

.sq-topbar,
.sq-eyebrow,
.sq-panel__head {
    font-family: var(--sq-font-display);
}

::selection { color: var(--sq-bg); background: var(--sq-primary); }

.sq-app {
    position: relative;
    isolation: isolate;
    min-height: 100dvh;
    overflow: hidden;
}

.sq-app::before {
    content: "";
    position: fixed;
    z-index: -2;
    inset: 0;
    background-image:
        linear-gradient(rgba(120, 244, 208, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 244, 208, .035) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,.12));
}

.sq-crt,
.sq-vignette {
    position: fixed;
    z-index: 100;
    inset: 0;
    pointer-events: none;
}

.sq-crt {
    opacity: var(--sq-scanline-opacity, .28);
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,.016) 0,
        rgba(255,255,255,.016) 1px,
        rgba(0,0,0,.12) 2px,
        rgba(0,0,0,.12) 4px
    );
}

.sq-vignette {
    background: radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.36) 80%, rgba(0,0,0,.78) 100%);
    box-shadow: inset 0 0 85px rgba(0,0,0,.72);
}

.sq-frame {
    position: fixed;
    z-index: 90;
    inset: 16px;
    pointer-events: none;
}

.sq-frame::before,
.sq-frame::after {
    content: "";
    position: absolute;
    width: 34px;
    height: 34px;
    opacity: .5;
}

.sq-frame::before {
    top: 0;
    left: 0;
    border-top: 1px solid var(--sq-primary);
    border-left: 1px solid var(--sq-primary);
}

.sq-frame::after {
    right: 0;
    bottom: 0;
    border-right: 1px solid var(--sq-primary);
    border-bottom: 1px solid var(--sq-primary);
}

.sq-shell {
    width: min(1380px, calc(100% - 3rem));
    margin: 0 auto;
    padding: 1.35rem 0 3rem;
}

.sq-topbar {
    position: sticky;
    z-index: 20;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    margin-bottom: clamp(2rem, 4vw, 4rem);
    padding: 0 .25rem;
    color: var(--sq-muted);
    border-bottom: 1px solid rgba(120, 244, 208, .10);
    background: linear-gradient(to bottom, rgba(2,5,6,.96), rgba(2,5,6,.80));
    backdrop-filter: blur(12px);
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sq-brand,
.sq-topbar__meta,
.sq-breadcrumb,
.sq-actions,
.sq-inline {
    display: flex;
    align-items: center;
}

.sq-brand { gap: .65rem; }
.sq-topbar__meta { gap: .8rem; }

.sq-led {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sq-primary);
    box-shadow: 0 0 10px rgba(120,244,208,.75);
    animation: sqPulse 2s ease-in-out infinite;
}

.sq-page-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: end;
    margin-bottom: 2rem;
}

.sq-eyebrow {
    display: block;
    margin-bottom: .65rem;
    color: var(--sq-accent);
    font-size: .64rem;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.sq-title {
    margin: 0;
    color: var(--sq-primary);
    font-size: clamp(2rem, 4.8vw, 4.7rem);
    line-height: .95;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: 0 0 16px rgba(120,244,208,.12);
}

.sq-subtitle {
    max-width: 760px;
    margin: .9rem 0 0;
    color: #76968d;
    line-height: 1.7;
    font-size: .84rem;
}

.sq-panel {
    position: relative;
    border: 1px solid var(--sq-border);
    background:
        linear-gradient(135deg, rgba(120,244,208,.035), transparent 28%),
        var(--sq-panel);
    box-shadow: var(--sq-shadow), inset 0 0 35px rgba(120,244,208,.012);
}

.sq-panel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 44px;
    height: 2px;
    background: var(--sq-primary);
    box-shadow: 0 0 9px rgba(120,244,208,.35);
}

.sq-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(120,244,208,.09);
    color: var(--sq-muted);
    font-size: .63rem;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.sq-panel__body { padding: 1.15rem; }

.sq-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.sq-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.sq-grid-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 1rem;
}

.sq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 42px;
    padding: .72rem 1rem;
    border: 1px solid var(--sq-border);
    outline: none;
    background: rgba(120,244,208,.035);
    color: #94bbb0;
    cursor: pointer;
    font-size: .68rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    transition: .14s ease;
}

.sq-btn:hover,
.sq-btn:focus-visible {
    color: var(--sq-primary);
    border-color: var(--sq-border-strong);
    background: rgba(120,244,208,.08);
    transform: translateY(-1px);
    box-shadow: 0 0 15px rgba(120,244,208,.08);
}

.sq-btn--primary {
    color: #04110e;
    border-color: var(--sq-primary);
    background: var(--sq-primary);
    font-weight: 800;
}

.sq-btn--primary:hover,
.sq-btn--primary:focus-visible {
    color: #020807;
    background: #9affdf;
}

.sq-btn--danger {
    color: #ff9a9a;
    border-color: rgba(255,114,114,.25);
}

.sq-btn--ghost { background: transparent; }

.sq-actions { flex-wrap: wrap; gap: .55rem; }

.sq-tag {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: .2rem .5rem;
    border: 1px solid var(--sq-border);
    color: #779b91;
    background: rgba(120,244,208,.025);
    font-size: .56rem;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.sq-tag--amber {
    color: var(--sq-accent);
    border-color: rgba(255,195,107,.24);
}

.sq-tag--danger {
    color: #ff9292;
    border-color: rgba(255,114,114,.25);
}

.sq-progress {
    height: 6px;
    overflow: hidden;
    border: 1px solid rgba(120,244,208,.14);
    background: rgba(0,0,0,.28);
}

.sq-progress > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--sq-primary-dim), var(--sq-primary));
    box-shadow: 0 0 10px rgba(120,244,208,.34);
}

.sq-field {
    display: grid;
    gap: .45rem;
}

.sq-field label {
    color: var(--sq-muted);
    font-size: .61rem;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.sq-input,
.sq-select,
.sq-textarea {
    width: 100%;
    border: 1px solid var(--sq-border);
    outline: none;
    background: rgba(0,0,0,.28);
    color: var(--sq-text);
    padding: .78rem .85rem;
    caret-color: var(--sq-primary);
    transition: .14s ease;
}

.sq-input:focus,
.sq-select:focus,
.sq-textarea:focus {
    border-color: var(--sq-border-strong);
    box-shadow: 0 0 15px rgba(120,244,208,.07);
}

.sq-select option { background: #061011; }

.sq-textarea {
    min-height: 130px;
    resize: vertical;
    line-height: 1.55;
}

.sq-terminal {
    color: #54756d;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(120,244,208,.09);
    padding: .9rem;
    font-size: .62rem;
    line-height: 1.7;
    letter-spacing: .035em;
}

.sq-terminal strong { color: var(--sq-primary); font-weight: 500; }

.sq-empty {
    display: grid;
    place-items: center;
    min-height: 220px;
    padding: 2rem;
    color: var(--sq-muted);
    text-align: center;
}

.sq-mobile-nav {
    display: none;
}

.sq-toast {
    position: fixed;
    z-index: 130;
    right: 1.5rem;
    bottom: 1.5rem;
    width: min(390px, calc(100% - 3rem));
    padding: 1rem 1.1rem;
    color: var(--sq-primary);
    border: 1px solid var(--sq-border-strong);
    background: rgba(3,11,12,.96);
    box-shadow: 0 0 30px rgba(120,244,208,.12);
    font-size: .68rem;
    letter-spacing: .04em;
    transform: translateY(16px);
    opacity: 0;
    pointer-events: none;
    transition: .2s ease;
}

.sq-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.sq-divider {
    height: 1px;
    background: linear-gradient(90deg, var(--sq-border), transparent);
}

.sq-kbd {
    display: inline-grid;
    min-width: 23px;
    height: 23px;
    place-items: center;
    padding-inline: .3rem;
    border: 1px solid var(--sq-border);
    color: var(--sq-primary-2);
    background: rgba(120,244,208,.03);
    font-size: .58rem;
}

@keyframes sqPageIn {
    from { opacity: 0; transform: translateY(5px); filter: brightness(.55); }
    to { opacity: 1; transform: translateY(0); filter: brightness(1); }
}

@keyframes sqPulse {
    0%,100% { opacity: .45; }
    50% { opacity: 1; }
}

@media (max-width: 920px) {
    .sq-shell { width: min(100% - 1.5rem, 760px); }
    .sq-grid-sidebar, .sq-grid-3, .sq-grid-2 { grid-template-columns: 1fr; }
    .sq-page-head { grid-template-columns: 1fr; align-items: start; }
    .sq-topbar__meta span:not(:last-child) { display: none; }
}

@media (max-width: 560px) {
    .sq-frame { inset: 9px; }
    .sq-topbar { min-height: 56px; margin-bottom: 2rem; }
    .sq-brand { font-size: .56rem; }
    .sq-title { font-size: clamp(2rem, 12vw, 3.4rem); }
    .sq-actions { width: 100%; }
    .sq-actions .sq-btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}


/* Runtime profile themes */
html[data-sq-theme="amber"] {
    --sq-primary:#ffc36b;
    --sq-primary-2:#c48e3d;
    --sq-primary-dim:#6d4d22;
    --sq-border:rgba(255,195,107,.20);
    --sq-border-strong:rgba(255,195,107,.40);
    --sq-accent:#78f4d0;
}
html[data-sq-theme="iceblue"] {
    --sq-primary:#70c9ff;
    --sq-primary-2:#4a92bd;
    --sq-primary-dim:#23526d;
    --sq-border:rgba(112,201,255,.20);
    --sq-border-strong:rgba(112,201,255,.40);
    --sq-accent:#ffc36b;
}
html[data-sq-theme="redalert"] {
    --sq-primary:#ff7272;
    --sq-primary-2:#b94c4c;
    --sq-primary-dim:#652626;
    --sq-border:rgba(255,114,114,.20);
    --sq-border-strong:rgba(255,114,114,.42);
    --sq-accent:#ffc36b;
}

html[data-sq-flicker="true"] .sq-app {
    animation: sqFlicker 7s steps(1) infinite;
}

html[data-sq-reduced-motion="true"] *,
html[data-sq-reduced-motion="true"] *::before,
html[data-sq-reduced-motion="true"] *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
}

@keyframes sqFlicker {
    0%, 97%, 100% { filter: brightness(1); }
    98% { filter: brightness(.93); }
    99% { filter: brightness(1.04); }
}