/* Arctic Executor — Core Palette */
:root {
    --arc-void: #050a12;
    --arc-ink: #0a1220;
    --arc-shelf: #0e1826;
    --arc-ridge: #142131;
    --arc-frost: #ffffff;
    --arc-mist: #8ba3bf;
    --arc-glass: rgba(255, 255, 255, 0.06);
    --arc-line: rgba(140, 180, 220, 0.12);
    --arc-chill: #4a9eff;
    --arc-chill-soft: rgba(74, 158, 255, 0.18);
}

body {
    background-color: var(--arc-void);
    color: var(--arc-frost);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Surface panels */
.arc-surface {
    background: linear-gradient(180deg, #11202f 0%, #0a131f 100%);
    border: 1px solid var(--arc-line);
}

/* Action buttons */
.arc-btn-solid {
    background-color: var(--arc-frost);
    color: var(--arc-void);
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}
.arc-btn-solid:hover {
    opacity: 0.92;
    transform: scale(1.02);
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.18);
}
.arc-btn-ghost {
    background-color: transparent;
    color: var(--arc-frost);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.arc-btn-ghost:hover {
    background-color: var(--arc-frost);
    color: var(--arc-void);
    box-shadow: inset 0 0 0 1px var(--arc-frost);
}

/* Hero backdrop */
.arc-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.arc-hero-shine {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 85vw;
    height: 62vh;
    background: radial-gradient(ellipse at top center, #19314c 0%, transparent 62%);
}
.arc-hero-mesh {
    position: absolute;
    inset: 0;
    background-size: 120px 120px;
    background-image:
        linear-gradient(to right, rgba(140, 180, 220, 0.09) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(140, 180, 220, 0.09) 1px, transparent 1px);
    mask-image: radial-gradient(ellipse 90% 100% at 50% 0%, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 90% 100% at 50% 0%, black 30%, transparent 80%);
}

/* Headline shear effect */
.arc-shear {
    position: relative;
    display: inline-block;
}
.arc-shear::before, .arc-shear::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--arc-void);
    color: var(--arc-frost);
    overflow: hidden;
}
.arc-shear::before {
    left: 2px;
    animation: arc-shear-slice 3s infinite linear alternate-reverse;
}
.arc-shear::after {
    left: -2px;
    animation: arc-shear-slice 2.5s infinite linear alternate-reverse;
    animation-delay: 0.2s;
}
@keyframes arc-shear-slice {
    0%   { clip-path: inset(10% 0 80% 0); transform: translate(-2px, 1px); }
    5%   { clip-path: inset(40% 0 10% 0); transform: translate(2px, -1px); }
    10%  { clip-path: inset(80% 0 5% 0); transform: translate(-1px, 0); }
    15%  { clip-path: inset(100% 0 0% 0); transform: translate(0); }
    100% { clip-path: inset(100% 0 0% 0); transform: translate(0); }
}

/* Scroll-in reveal */
.arc-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.arc-reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Idle drift */
.arc-drift {
    animation: arc-drift-anim 4s ease-in-out infinite;
}
@keyframes arc-drift-anim {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* Tile cards */
.arc-tile {
    background: linear-gradient(180deg, #11202f 0%, #080f1a 100%);
    border: 1px solid var(--arc-line);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease;
}
.arc-tile:hover {
    border-color: rgba(140, 180, 220, 0.28);
}

/* Rotational dash */
@keyframes arc-rotate-slow {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.arc-spin-dash {
    animation: arc-rotate-slow 4s linear infinite;
}

#live-chart-path, #live-chart-fill {
    transition: d 0.15s linear;
}
.js-bar {
    transition: height 0.3s ease-out;
}

/* Hidden scroll */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Changelog navigation */
.cl-nav-btn {
    color: rgba(255, 255, 255, 0.45);
    background: transparent;
    border: 1px solid transparent;
}
.cl-nav-btn:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(140, 180, 220, 0.04);
}
.cl-nav-btn.active {
    color: var(--arc-frost);
    background: linear-gradient(90deg, rgba(140, 180, 220, 0.09) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid var(--arc-line);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.cl-nav-btn.active .cl-dot {
    background: var(--arc-frost);
    box-shadow: 0 0 8px #fff;
}

.cl-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(140, 180, 220, 0.04);
}
.cl-item:last-child { border-bottom: none; }

.cl-item-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cl-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid;
    height: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.cl-item-icon.added, .cl-badge-added {
    color: #a8d5ff;
    background: rgba(168, 213, 255, 0.08);
    border-color: rgba(168, 213, 255, 0.22);
}
.cl-item-icon.fixed, .cl-badge-fixed {
    color: #d7e4f0;
    background: rgba(215, 228, 240, 0.06);
    border-color: rgba(215, 228, 240, 0.22);
}
.cl-badge-fixed { margin-left: 30px; }

.cl-item-icon.removed, .cl-badge-removed {
    color: #8ba3bf;
    background: rgba(139, 163, 191, 0.08);
    border-color: rgba(139, 163, 191, 0.22);
}
.cl-item-icon.improved, .cl-badge-improved {
    color: var(--arc-chill);
    background: rgba(74, 158, 255, 0.10);
    border-color: rgba(74, 158, 255, 0.25);
}

#cl-content > div { animation: cl-fade-in 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes cl-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.faq-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-panel.open { grid-template-rows: 1fr; }
.faq-chevron { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.faq-toggle[aria-expanded="true"] .faq-chevron {
    transform: rotate(180deg);
    color: var(--arc-frost);
}

.issue-body { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.issue-btn[aria-expanded="true"] .issue-chevron { transform: rotate(180deg); }
.issue-filter.active { background: rgba(140, 180, 220, 0.09); border-color: rgba(140, 180, 220, 0.22); }