:root {
    --brutal-black: #000;
    --brutal-white: #fff;
    --brutal-pink: #ff00ff;
    --brutal-cyan: #00ffff;
    --brutal-yellow: #ffff00;
    --brutal-border: 6px;
    --brutal-shadow: 10px 10px 0px var(--brutal-black);
    
    /* Technical Colors */
    --brutal-red: #ff0000;
}

body {
    background: linear-gradient(45deg, var(--brutal-pink), var(--brutal-cyan), var(--brutal-yellow));
    background-attachment: fixed;
    font-family: 'Courier New', Courier, monospace;
    margin: 0; padding: 0; color: var(--brutal-black);
    min-height: 100vh; overflow-x: hidden;
}

/* Nav */
#brutal-nav {
    display: flex; justify-content: center; gap: 15px;
    padding: 20px; background: var(--brutal-black);
    position: sticky; top: 0; z-index: 2000;
}
.brutal-btn-nav {
    background: var(--brutal-white); border: 4px solid var(--brutal-black);
    padding: 8px 20px; font-weight: 900; cursor: pointer; text-transform: uppercase;
}
.brutal-btn-nav:hover { background: var(--brutal-yellow); transform: translate(-2px, -2px); box-shadow: 4px 4px 0px var(--brutal-white); }

/* Main Views */
.view { padding: 40px; min-height: 80vh; display: flex; flex-direction: column; align-items: center; }
.hidden { display: none !important; }

/* Brutal Cards */
.brutal-card {
    background: var(--brutal-white); border: 8px solid var(--brutal-black);
    padding: 60px; max-width: 900px; box-shadow: 25px 25px 0px var(--brutal-black);
    text-align: center; position: relative;
}

/* Logos */
.landing-logo { width: 220px; filter: drop-shadow(10px 10px 0px black); margin-bottom: 20px; }
.header-logo { width: 90px; margin-bottom: 10px; }

/* Typography */
.glitch { font-size: 5.5rem; font-weight: 900; margin: 0; letter-spacing: -6px; line-height: 0.9; }
.subtitle { font-size: 1.6rem; font-weight: bold; background: var(--brutal-black); color: var(--brutal-white); display: inline-block; padding: 5px 20px; margin: 30px 0; }
.warning { color: red; font-weight: 900; border: 6px dashed red; padding: 30px; margin: 30px 0; font-size: 1.2rem; }

/* BUTTON STANDARDIZATION */
.brutal-btn-main {
    background: var(--brutal-yellow); border: 8px solid var(--brutal-black);
    padding: 25px 50px; font-size: 2.2rem; font-weight: 900; cursor: pointer;
    box-shadow: 12px 12px 0px var(--brutal-black); transition: 0.1s;
}
.brutal-btn-main:hover { transform: translate(-4px, -4px); box-shadow: 16px 16px 0px var(--brutal-black); background: var(--brutal-cyan); }
.brutal-btn-main:active { transform: translate(4px, 4px); box-shadow: 4px 4px 0px var(--brutal-black); }

/* Small buttons for Header */
.brutal-btn-yellow { background: var(--brutal-yellow); border: 4px solid var(--brutal-black); padding: 12px 20px; font-weight: 900; cursor: pointer; box-shadow: 6px 6px 0px var(--brutal-black); }
.brutal-btn-cyan { background: var(--brutal-cyan); border: 4px solid var(--brutal-black); padding: 12px 20px; font-weight: 900; cursor: pointer; box-shadow: 6px 6px 0px var(--brutal-black); }
.brutal-btn-pink { background: var(--brutal-pink); border: 4px solid var(--brutal-black); padding: 12px 20px; font-weight: 900; cursor: pointer; box-shadow: 6px 6px 0px var(--brutal-black); color: white; }
.brutal-btn-standard { background: var(--brutal-white); border: 4px solid var(--brutal-black); padding: 12px 20px; font-weight: 900; cursor: pointer; box-shadow: 6px 6px 0px var(--brutal-black); }

/* Modal Action Buttons */
.modal-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }
.btn-reveal { background: var(--brutal-yellow); border: 5px solid black; padding: 15px 25px; font-weight: 900; cursor: pointer; box-shadow: 5px 5px 0px black; font-size: 1.1rem; }
.btn-expand { background: var(--brutal-pink); color: white; border: 5px solid black; padding: 15px 25px; font-weight: 900; cursor: pointer; box-shadow: 5px 5px 0px black; font-size: 1.1rem; }
.btn-clear { background: var(--brutal-white); border: 5px solid black; padding: 15px 25px; font-weight: 900; cursor: pointer; box-shadow: 5px 5px 0px black; font-size: 1.1rem; }
.btn-edit { background: var(--brutal-cyan); border: 5px solid black; padding: 15px 25px; font-weight: 900; cursor: pointer; box-shadow: 5px 5px 0px black; font-size: 1.1rem; }
.btn-delete { background: var(--brutal-red); color: white; border: 5px solid black; padding: 15px 25px; font-weight: 900; cursor: pointer; box-shadow: 5px 5px 0px black; font-size: 1.1rem; }

/* EXIT BUTTONS */
.brutal-exit-huge {
    background: var(--brutal-red); color: white; border: 6px solid black;
    padding: 10px 25px; font-size: 1.4rem; font-weight: 900; cursor: pointer;
    box-shadow: 6px 6px 0px black; position: absolute; top: -20px; right: -20px;
    z-index: 3000; transition: transform 0.1s;
}
.brutal-exit-huge:hover { transform: scale(1.1); box-shadow: 10px 10px 0px black; }

/* Mindmap Content - Full Screen Mode */
#mindmap-page { 
    padding: 0; 
    height: 100vh; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden;
}

#mindmap-page .brutal-card { 
    max-width: none; border: none; 
    width: 100%; box-shadow: none; padding: 15px;
    flex-shrink: 0;
    border-bottom: 8px solid var(--brutal-black);
}

#mindmap-wrapper { 
    flex-grow: 1;
    position: relative; 
    width: 100%; 
    background: radial-gradient(circle, rgba(0,0,0,0.1) 1px, transparent 1px);
    background-size: 30px 30px;
    overflow: auto; cursor: grab;
}
#mindmap-wrapper:active { cursor: grabbing; }

#mindmap-svg { position: absolute; top: 0; left: 0; width: 5000px; height: 5000px; pointer-events: none; z-index: 5; }
#mindmap-container { position: absolute; top: 0; left: 0; width: 5000px; height: 5000px; }

.mindmap-line { fill: none; stroke: var(--brutal-black); stroke-linecap: round; opacity: 0.9; }

.node-item {
    position: absolute; background: var(--brutal-white); border: 5px solid var(--brutal-black);
    padding: 20px; cursor: move; font-weight: 900; text-transform: uppercase;
    box-shadow: 8px 8px 0px var(--brutal-black); z-index: 10; user-select: none;
    min-width: 160px; text-align: center; font-size: 1rem;
}
.node-item:hover { background: var(--brutal-yellow); }

.node-difficulty {
    font-size: 0.8rem; color: var(--brutal-red); margin-top: 5px;
    background: var(--brutal-black); color: var(--brutal-yellow);
    padding: 2px 5px; display: inline-block;
}

.difficulty-meter {
    color: var(--brutal-red); font-size: 1.5rem; letter-spacing: 5px;
}

/* GLOBAL NOTIFICATIONS */
#notification-area {
    position: fixed; top: 100px; right: 20px; z-index: 4000;
    display: flex; flex-direction: column; gap: 15px; pointer-events: none;
}
.brutal-notification {
    background: var(--brutal-white); border: 6px solid var(--brutal-black);
    padding: 20px 40px; font-weight: 900; box-shadow: 10px 10px 0px var(--brutal-black);
    pointer-events: auto; animation: slideIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    min-width: 300px; text-transform: uppercase;
}
.notification-error { background: var(--brutal-red); color: white; }
.notification-success { background: var(--brutal-cyan); color: black; }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeOut {
    to { opacity: 0; transform: translateY(-20px); }
}

/* Credits - Full Brutal Redesign */
.credits-container { width: 100%; max-width: 1100px; display: flex; flex-direction: column; gap: 40px; }
.credits-header { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.credits-header h1 { font-size: 4rem; font-weight: 900; letter-spacing: -4px; margin: 0; }
.credits-grid { display: grid; grid-template-cols: 1fr 1fr; gap: 50px; }

.brutal-panel {
    background: var(--brutal-white); border: 8px solid var(--brutal-black);
    padding: 40px; box-shadow: 15px 15px 0px var(--brutal-black);
    display: flex; flex-direction: column; align-items: center;
}
.brutal-panel h2 { background: var(--brutal-black); color: var(--brutal-white); padding: 10px 20px; font-size: 2rem; width: 100%; box-sizing: border-box; }
.brutal-panel p { font-size: 1.2rem; font-weight: bold; line-height: 1.4; }

.badges-row { display: flex; gap: 20px; margin: 30px 0; flex-wrap: wrap; justify-content: center; }
.badge-icon { width: 64px; height: 64px; background: black; border: 4px solid black; padding: 5px; transition: 0.2s; }
.badge-icon:hover { transform: scale(1.2) rotate(5deg); background: var(--brutal-cyan); }

.crypto-row { background: var(--brutal-black); color: var(--brutal-white); padding: 20px; width: 100%; border: 4px solid var(--brutal-black); margin-top: 20px; }
.crypto-addr { font-family: monospace; font-size: 0.9rem; color: var(--brutal-cyan); word-break: break-all; }

.credits-footer { margin-top: 80px; padding: 40px; background: black; color: white; width: 100%; text-align: center; }

/* Modals */
#modal-overlay, #editor-overlay, #add-node-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255,255,255,0.7); backdrop-filter: blur(5px);
    display: flex; justify-content: center; align-items: center; z-index: 2500;
}
.brutal-window {
    background: var(--brutal-white); border: 10px solid var(--brutal-black);
    width: 85%; max-width: 850px; padding: 50px; box-shadow: 30px 30px 0px var(--brutal-black);
    position: relative; max-height: 90vh; overflow-y: auto;
}

.brutal-input, .brutal-textarea {
    width: 100%; border: 6px solid var(--brutal-black); padding: 15px; margin: 15px 0;
    font-family: inherit; font-weight: 900; box-sizing: border-box; font-size: 1.1rem;
}
.brutal-textarea { height: 250px; }