:root {
	--bg: #05050a; --card: #101018; --accent: #00d2ff;
	--rep: #2ed573; --trans-ext: #1e90ff; --trans-int: #ffa502; --n-metal: #ff4757; --nobre: #a55eea;
	--arrow-angle: -40.5deg;
	--arrow-opacity: 0.5;
	--arrow-color: #fcd8f2;
}


.app-card { background: var(--card); padding: 1.5rem; border-radius: 20px; width: 100%; max-width: 850px; border: 1px solid #222; }

header { text-align: center; margin-bottom: 20px; }
.input-group { text-align: center; margin-bottom: 20px; }
input { background: #000; border: 2px solid var(--accent); color: #fff; padding: 12px; border-radius: 10px; font-size: 1.5rem; width: 180px; text-align: center; font-family: 'JetBrains Mono', monospace; outline: none; }

.diagram-wrapper { position: relative; width: 100%; max-width: 500px; margin: 0 auto; aspect-ratio: 4 / 6; }

.arrows-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.arrow-line { position: absolute; height: 2px; background: var(--arrow-color); transform-origin: left center; opacity: var(--arrow-opacity); transform: rotate(var(--arrow-angle)); }

/* Ajuste das setas conforme seu modelo */
.arrow-1 { top: 10%; left: 5%; width: 120px; } 
.arrow-2 { top: 25%; left: 5%; width: 120px; }
.arrow-3 { top: 40%; left: 5%; width: 320px; }
.arrow-4 { top: 55%; left: 5%; width: 320px; }
.arrow-5 { top: 69%; left: 5%; width: 450px; }
.arrow-6 { top: 83%; left: 5%; width: 450px; }
.arrow-7 { top: 98%; left: 5%; width: 620px; }    
.arrow-8 { top: 98%; left: 30%; width: 450px; }            

.diagram-container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(7, 1fr); gap: 15px; height: 100%; position: relative; z-index: 2; }

.orbital { width: 50px; height: 50px; margin: auto; border: 1px solid #333; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: bold; color: #444; background: var(--card); transition: all 0.3s; }

.active { color: #fff !important; transform: scale(1.1); border-width: 2px !important; }
.s.active { background: #ff4757 !important; border-color: #fff; }
.p.active { background: #2ed573 !important; border-color: #fff; }
.d.active { background: #1e90ff !important; border-color: #fff; }
.f.active { background: #ffa502 !important; border-color: #fff; }

.report { margin-top: 25px; padding: 20px; background: rgba(255,255,255,0.02); border-radius: 15px; border-left: 10px solid #333; }
.type-bar { height: 6px; width: 100%; border-radius: 3px; margin: 10px 0; }
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; font-size: 0.9rem; }
.valence-box { grid-column: 1 / -1; background: rgba(0, 210, 255, 0.1); padding: 10px; border-radius: 8px; margin: 10px 0; border: 1px solid var(--accent); color: var(--accent); font-weight: bold; text-align: center;}
.full-dist { grid-column: 1 / -1; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: #aaa; background: #000; padding: 10px; border-radius: 5px; word-break: break-all;}

.bg-rep { background: var(--rep); }
.bg-ext { background: var(--trans-ext); }
.bg-int { background: var(--trans-int); }
.bg-nmet { background: var(--n-metal); }
.bg-nobre { background: var(--nobre); }