/* ==========================================================================
ARC-方舟｜全站樣式（styles.css）
- 目標：GitHub Pages 靜態站點、深色科幻質感、可維護的設計系統
- 說明：各頁面已自帶 fallback style；本檔提供全站統一與後續擴充基底
========================================================================== */

/* -----------------------------
0) CSS Reset (lightweight)
----------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
margin: 0;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas {
display: block;
max-width: 100%;
}

a { color: inherit; }

button, input, textarea, select {
font: inherit;
}

/* -----------------------------
1) Design Tokens (CSS Vars)
----------------------------- */
:root {
--bg: #05070d;
--panel: #0b1020;
--panel2: rgba(0,0,0,.18);
--text: #e9eef7;
--muted: #a9b3c7;

--accent: #4de2ff;
--accent2: #ffd36a;
--danger: #ff5a5a;

--border: rgba(255,255,255,.10);
--border2: rgba(255,255,255,.14);

--shadow-lg: 0 18px 60px rgba(0,0,0,.55);
--shadow-md: 0 10px 40px rgba(0,0,0,.35);

--radius-lg: 22px;
--radius-md: 18px;
--radius-sm: 12px;

--pad-lg: 22px;
--pad-md: 16px;
--pad-sm: 12px;

--max-w: 1120px;
--max-w-article: 1040px;

--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
"PingFang TC","Noto Sans TC","Microsoft JhengHei", Arial, sans-serif;

--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", monospace;

--trans: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}

/* -----------------------------
2) Page Base
----------------------------- */
body {
font-family: var(--font-sans);
color: var(--text);
background:
radial-gradient(1200px 700px at 20% 15%, rgba(77,226,255,.15), transparent 55%),
radial-gradient(900px 520px at 80% 25%, rgba(255,211,106,.10), transparent 50%),
radial-gradient(1200px 800px at 50% 120%, rgba(110,140,255,.08), transparent 55%),
var(--bg);
}

/* If you later remove per-page fallback stars, you can use this utility.
(Current pages implement their own stars layer.) */
.arc-stars {
position: fixed;
inset: 0;
pointer-events: none;
opacity: .55;
filter: blur(.2px);
background-image:
radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.8) 50%, transparent 51%),
radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,.55) 50%, transparent 51%),
radial-gradient(1px 1px at 55% 40%, rgba(255,255,255,.65) 50%, transparent 51%),
radial-gradient(2px 2px at 70% 15%, rgba(255,255,255,.50) 50%, transparent 51%),
radial-gradient(1px 1px at 82% 62%, rgba(255,255,255,.70) 50%, transparent 51%),
radial-gradient(1px 1px at 15% 85%, rgba(255,255,255,.45) 50%, transparent 51%);
animation: arc-drift 18s linear infinite;
}

@keyframes arc-drift {
from { transform: translate3d(0,0,0); }
to { transform: translate3d(-40px, 20px, 0); }
}

.container {
width: min(var(--max-w), 100%);
margin: 0 auto;
padding: 24px;
position: relative;
z-index: 1;
}

/* -----------------------------
3) Common Components
----------------------------- */
.card {
border: 1px solid rgba(255,255,255,.10);
border-radius: var(--radius-md);
background: var(--panel2);
padding: var(--pad-md);
box-shadow: var(--shadow-md);
}

.panel {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: linear-gradient(180deg, rgba(11,16,32,.78), rgba(11,16,32,.52));
backdrop-filter: blur(10px);
box-shadow: var(--shadow-lg);
}

.badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border: 1px solid rgba(77,226,255,.25);
border-radius: 999px;
color: var(--accent);
background: rgba(77,226,255,.06);
font-weight: 700;
letter-spacing: .3px;
width: max-content;
}

.dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 18px rgba(77,226,255,.65);
}

.pill {
padding: 4px 8px;
border-radius: 999px;
font-size: 12px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
color: #dbe7ff;
white-space: nowrap;
}

.pill-accent {
border-color: rgba(77,226,255,.28);
background: rgba(77,226,255,.08);
color: #e6fbff;
}

.pill-warn {
border-color: rgba(255,211,106,.35);
background: rgba(255,211,106,.12);
color: #fff3d3;
}

.pill-danger {
border-color: rgba(255,90,90,.35);
background: rgba(255,90,90,.10);
color: #ffd6d6;
}

.mono {
font-family: var(--font-mono);
}

.btn {
appearance: none;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
color: var(--text);
padding: 10px 14px;
border-radius: var(--radius-sm);
text-decoration: none;
font-weight: 750;
letter-spacing: .2px;
transition: var(--trans);
display: inline-flex;
align-items: center;
gap: 10px;
}

.btn:hover {
transform: translateY(-1px);
background: rgba(255,255,255,.09);
border-color: rgba(255,255,255,.22);
}

.btn-primary {
background: rgba(77,226,255,.12);
border-color: rgba(77,226,255,.35);
color: #eaffff;
}

.btn-primary:hover {
background: rgba(77,226,255,.16);
border-color: rgba(77,226,255,.45);
}

.btn-warn {
background: rgba(255,211,106,.10);
border-color: rgba(255,211,106,.35);
color: #fff6dd;
}

.btn-warn:hover {
background: rgba(255,211,106,.14);
border-color: rgba(255,211,106,.45);
}

/* Inputs */
.input,
input[type="text"],
input[type="search"],
input[type="email"],
textarea,
select {
width: 100%;
padding: 10px 12px;
border-radius: var(--radius-sm);
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
color: var(--text);
outline: none;
}

input[type="search"]::-webkit-search-cancel-button {
filter: invert(1);
opacity: .6;
}

input:focus,
textarea:focus,
select:focus {
border-color: rgba(77,226,255,.45);
box-shadow: 0 0 0 3px rgba(77,226,255,.10);
}

/* -----------------------------
4) Typography helpers
----------------------------- */
h1, h2, h3, h4, h5, h6 {
margin: 0;
letter-spacing: .2px;
}

p {
margin: 0;
color: var(--muted);
line-height: 1.7;
}

small, .hint {
color: rgba(255,255,255,.55);
font-size: 12.5px;
}

/* Article content helpers */
.content {
color: rgba(233,238,247,.94);
line-height: 1.95;
font-size: 16px;
}

.content p {
margin: 10px 0;
color: rgba(233,238,247,.92);
}

.content h3 {
margin: 18px 0 10px;
font-size: 18px;
}

.content ul {
margin: 10px 0 10px 18px;
}

.content li {
margin: 6px 0;
}

.content blockquote {
margin: 12px 0;
padding: 12px 14px;
border-left: 3px solid rgba(77,226,255,.55);
border-radius: 12px;
background: rgba(77,226,255,.06);
color: rgba(233,238,247,.92);
}

/* -----------------------------
5) Layout helpers
----------------------------- */
.grid-12 {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 14px;
}

.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

@media (max-width: 980px) {
.span-4, .span-6, .span-8, .span-12 { grid-column: span 12; }
}

/* -----------------------------
6) Footer
----------------------------- */
footer {
margin: 18px 0 10px;
color: rgba(255,255,255,.42);
font-size: 12.5px;
text-align: center;
}

/* -----------------------------
7) Reduced motion
----------------------------- */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}