:root {
    --cyber-bg: #050608;
    --cyber-panel: #0a0c10;
    --cyber-cyan: #00f0ff;
    --cyber-magenta: #ff003c;
    --cyber-yellow: #fcee0a;
    --text-main: #d1d5db;
    --text-bright: #ffffff;
    --text-dim: #6b7280;
    
    --font-head: 'Syncopate', sans-serif;
    --font-title: 'Chakra Petch', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 10pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

body {
    background-color: var(--cyber-bg);
    color: var(--text-main);
    font-family: var(--font-mono); /* Default to mono for that terminal feel */
    line-height: 1.5;
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 30 0 L 0 0 0 30' fill='none' stroke='%2300f0ff' stroke-opacity='0.03' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 30px 30px;
    overflow-x: hidden;
    width: 210mm;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 0 20px rgba(0,0,0,0.5); /* Just for screen view to see the paper edges */
}

/* Helpers */
.text-glow { color: var(--text-bright); text-shadow: 0 0 5px rgba(255,255,255,0.5); }
.text-white { color: var(--text-bright); }
.accent-cyan { color: var(--cyber-cyan); text-shadow: 0 0 8px rgba(0,240,255,0.4); }
.accent-magenta { color: var(--cyber-magenta); text-shadow: 0 0 8px rgba(255,0,60,0.4); }
.font-mono { font-family: var(--font-mono); }
.text-sm { font-size: 0.85em; }

/* Print Tools */
.print-tools {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #000;
    border-bottom: 2px solid var(--cyber-yellow);
    padding: 10px 20px;
}
.tools-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tools-text {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cyber-yellow);
    font-size: 0.8rem;
    text-transform: uppercase;
}
.pulse-dot {
    width: 8px; height: 8px;
    background: var(--cyber-yellow);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--cyber-yellow);
    animation: blink 1s infinite;
}
@keyframes blink { 50% { opacity: 0.3; } }
.print-tools button {
    background: transparent;
    border: 1px solid var(--cyber-cyan);
    color: var(--cyber-cyan);
    padding: 6px 12px;
    font-family: var(--font-mono);
    font-weight: 700;
    cursor: pointer;
}
.print-tools button:hover {
    background: var(--cyber-cyan);
    color: #000;
    box-shadow: 0 0 15px var(--cyber-cyan);
}

/* Vertical Marquee Edge */
.vertical-marquee {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 40px;
    background: var(--cyber-yellow);
    color: #000;
    display: flex;
    justify-content: center;
    overflow: hidden;
    z-index: 10;
}
.marquee-text {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    white-space: nowrap;
}

/* Layout */
.schematic-core {
    margin: 0;
    padding: 30px;
    padding-left: 70px; /* 40px for marquee + 30px padding */
    width: 100%;
    box-sizing: border-box;
}

/* Header Node */
.node-header {
    position: relative;
    padding: 30px;
    border: 2px solid var(--cyber-cyan);
    background: rgba(0, 240, 255, 0.02);
    clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 40px 100%, 0 calc(100% - 40px));
    margin-bottom: 30px;
}
.header-glitch-bg {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='10' height='2' y='2' fill='%2300f0ff' fill-opacity='0.05'/%3E%3C/svg%3E");
    background-size: 10px 4px;
    z-index: -1;
}

.sys-badge {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}
.barcode {
    display: inline-block;
    width: 60px; height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0 v20 M3,0 v20 M8,0 v20 M10,0 v20 M15,0 v20 M18,0 v20 M21,0 v20 M23,0 v20 M28,0 v20 M31,0 v20 M36,0 v20 M38,0 v20 M43,0 v20 M46,0 v20 M51,0 v20 M53,0 v20 M58,0 v20 M60,0 v20' stroke='%2300f0ff' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 60px 20px;
}
.id-tag {
    color: var(--cyber-cyan);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
}

.cyber-title {
    font-family: var(--font-head);
    font-size: 3rem;
    color: var(--text-bright);
    letter-spacing: -2px;
    line-height: 1;
    margin-bottom: 10px;
    text-shadow: 3px 0 var(--cyber-magenta), -3px 0 var(--cyber-cyan);
    position: relative;
}
.cyber-subtitle {
    font-family: var(--font-title);
    font-size: 1.5rem;
    color: var(--cyber-yellow);
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 25px;
}

.hud-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}
.hud-stat {
    border-left: 3px solid var(--cyber-magenta);
    padding-left: 10px;
}
.stat-val {
    font-family: var(--font-head);
    font-size: 1.5rem;
    color: var(--text-bright);
    line-height: 1;
}
.stat-lbl {
    font-size: 0.65rem;
    color: var(--text-dim);
    letter-spacing: 1px;
}

.core-skill-banner {
    display: inline-block;
    background-color: rgba(252, 238, 10, 0.05); /* very light solid fallback */
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-5,25 L25,-5 M5,35 L35,5' stroke='%23fcee0a' stroke-opacity='0.1' stroke-width='10'/%3E%3C/svg%3E");
    border: 1px solid var(--cyber-yellow);
    border-left: 4px solid var(--cyber-yellow);
    padding: 6px 12px;
    margin-bottom: 25px;
    box-shadow: 0 0 15px rgba(252, 238, 10, 0.15);
}
.core-skill-text {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-bright);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.core-skill-text svg {
    color: var(--cyber-yellow);
}
.core-skill-text .highlight {
    color: var(--cyber-yellow);
    font-weight: 800;
    text-shadow: 0 0 8px var(--cyber-yellow);
}

.contact-array {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 30px;
    border-top: 1px dashed rgba(255,255,255,0.2);
    padding-top: 15px;
}
.c-node {
    font-size: 0.85rem;
    color: var(--text-main);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.c-icon {
    color: var(--cyber-magenta);
    font-weight: 700;
}

/* Grid Layout */
.grid-masonry {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}

.grid-col-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.grid-row-split {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Cyber Panels */
.cyber-panel {
    position: relative;
    background: var(--cyber-panel);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 25px;
    min-width: 0; /* Fix CSS grid blowout */
}
.panel-decorator {
    position: absolute;
    width: 15px; height: 15px;
}
.top-left { top: -1px; left: -1px; border-top: 2px solid var(--cyber-cyan); border-left: 2px solid var(--cyber-cyan); }
.bottom-right { bottom: -1px; right: -1px; border-bottom: 2px solid var(--cyber-cyan); border-right: 2px solid var(--cyber-cyan); }

.panel-title {
    font-family: var(--font-title);
    font-size: 1.2rem;
    color: var(--text-bright);
    letter-spacing: 2px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.panel-title span {
    font-family: var(--font-head);
    font-size: 1.5rem;
    color: rgba(255,255,255,0.1);
    line-height: 1;
}

/* Typography elements */
.terminal-text {
    font-size: 0.85rem;
    color: var(--text-main);
    margin-bottom: 10px;
}
.terminal-text:last-child { margin-bottom: 0; }
.cursor {
    display: inline-block;
    width: 8px;
    background: var(--cyber-cyan);
    animation: blink 1s infinite;
}

/* AI Skills Special */
.panel-ai {
    border-color: rgba(204, 255, 0, 0.3);
    background: linear-gradient(135deg, rgba(204, 255, 0, 0.05), rgba(204, 255, 0, 0));
}
.panel-ai .top-left, .panel-ai .bottom-right { border-color: #ccff00; }
.ai-warning-tape {
    background-color: #000;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-5,25 L25,-5 M5,35 L35,5' stroke='%23ccff00' stroke-width='10'/%3E%3C/svg%3E");
    color: #fff;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 5px;
    text-align: center;
    margin-bottom: 15px;
}
.ai-glow-text {
    color: #e0f2fe;
    text-shadow: 0 0 8px rgba(204, 255, 0, 0.2);
}

/* Blueprint / Tech Tree */
.skill-blueprint {
    column-count: 2;
    column-gap: 15px;
    display: block;
}
.blueprint-node {
    border: 1px dashed rgba(0, 240, 255, 0.3);
    padding: 12px;
    background: rgba(0, 240, 255, 0.02);
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 15px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}
.main-node {
    border-style: solid;
    border-color: var(--cyber-cyan);
    box-shadow: inset 0 0 15px rgba(0, 240, 255, 0.05);
}
.node-title {
    font-family: var(--font-title);
    color: var(--cyber-cyan);
    font-weight: 600;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.main-node .node-title { color: var(--cyber-yellow); }
.node-desc {
    font-size: 0.75rem;
    color: var(--text-dim);
}

/* Quest Log (Experience) */
.quest-log {
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    padding-left: 20px;
    margin-left: 10px;
}
.quest {
    position: relative;
    margin-bottom: 35px;
}
.quest:last-child { margin-bottom: 0; }
.quest::before {
    content: '';
    position: absolute;
    left: -27px; top: 0;
    width: 12px; height: 12px;
    background: var(--cyber-bg);
    border: 2px solid var(--text-dim);
    transform: rotate(45deg);
}

.active-quest::before {
    background: var(--cyber-magenta);
    border-color: var(--cyber-magenta);
    box-shadow: 0 0 10px var(--cyber-magenta);
}

.quest-status {
    position: absolute;
    top: -10px; right: 0;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--cyber-magenta);
    border: 1px solid var(--cyber-magenta);
    padding: 2px 6px;
    background: rgba(255, 0, 60, 0.1);
}
.completed {
    color: var(--cyber-cyan);
    border-color: var(--cyber-cyan);
    background: rgba(0, 240, 255, 0.1);
}

.quest-head { margin-bottom: 15px; padding-right: 120px; }
.q-title {
    font-family: var(--font-title);
    font-size: 1.2rem;
    color: var(--text-bright);
}
.q-corp { color: var(--cyber-cyan); }
.active-quest .q-corp { color: var(--cyber-yellow); }
.q-time {
    font-size: 0.75rem;
    color: var(--text-dim);
}

.crosshair-list { list-style: none; }
.crosshair-list li {
    position: relative;
    padding-left: 15px;
    font-size: 0.85rem;
    margin-bottom: 8px;
    color: var(--text-main);
}
.crosshair-list li::before {
    content: '+';
    position: absolute;
    left: 0; top: 0;
    color: var(--cyber-cyan);
    font-weight: 800;
}

.loot-drop {
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid var(--cyber-yellow);
    font-size: 0.8rem;
    color: var(--text-bright);
}
.loot-icon { color: var(--cyber-yellow); }

/* Education Data Blocks */
.data-block {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed rgba(255,255,255,0.1);
}
.data-block:last-child { margin-bottom:0; padding-bottom:0; border:none; }
.db-title {
    font-family: var(--font-title);
    color: var(--text-bright);
    font-weight: 600;
}
.db-sub {
    font-size: 0.75rem;
    color: var(--cyber-cyan);
    margin-bottom: 5px;
}
.db-desc { font-size: 0.8rem; color: var(--text-dim); }

/* Language Matrix */
.lang-matrix {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}
.lm-item {
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.8rem;
    color: var(--text-bright);
}
.lm-item span { color: var(--cyber-magenta); font-size: 0.7rem; }

/* Footer */
.cyber-footer {
    margin-top: 40px;
    border-top: 2px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.foot-barcode {
    width: 100px; height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0 v15 M3,0 v15 M6,0 v15 M8,0 v15 M11,0 v15 M15,0 v15 M18,0 v15 M21,0 v15 M25,0 v15 M29,0 v15 M32,0 v15 M34,0 v15 M37,0 v15 M41,0 v15 M44,0 v15 M46,0 v15 M50,0 v15 M55,0 v15 M58,0 v15 M62,0 v15 M65,0 v15 M68,0 v15 M72,0 v15 M76,0 v15 M79,0 v15 M83,0 v15 M86,0 v15 M89,0 v15 M94,0 v15 M97,0 v15 M100,0 v15' stroke='%236b7280' stroke-width='1.5'/%3E%3C/svg%3E");
    background-size: 100px 15px;
}
.foot-text {
    font-size: 0.7rem;
    color: var(--text-dim);
}

/* Responsive Overrides */
@media screen and (max-width: 900px) {
    .schematic-core { margin-left: 0; padding: 20px; }
    .vertical-marquee { display: none; }
    .node-header { clip-path: none; border-radius: 8px; }
    .grid-col-split { grid-template-columns: 1fr; }
    .hud-stats { flex-wrap: wrap; }
    .quest-head { padding-right: 0; }
    .quest-status { position: relative; display: inline-block; top: 0; margin-bottom: 10px; }
}

/* Print Specific */
@media print {
    @page { size: A4; margin: 0; }

    .print-tools { display: none !important; }
    
    html, body {
        background-color: var(--cyber-bg) !important;
        width: 100%; height: 100%; margin: 0; padding: 0;
    }
    
    /* Keep vertical marquee in print if they want 100% exact look */
    .vertical-marquee { display: flex !important; }
    
    .schematic-core { 
        margin: 0; 
        padding: 30px; 
        padding-left: 70px; 
        width: 100%; 
        box-sizing: border-box;
    }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    .cyber-panel, .quest, .blueprint-node, .data-block {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .node-header {
        break-after: avoid;
        page-break-after: avoid;
    }
}

@page { size: A4; margin: 0; }