* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; background: #c3e0f8; color: #0d1e27; transition: background 0.3s, color 0.3s; }
body.dark { background: #2b2b2b; color: #ddd; }
.container { max-width: 600px; margin: 2rem auto; padding: 1rem; background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: background 0.3s; }
body.dark .container { background: #3c3c3c; }
h1 { text-align: center; margin-bottom: 1rem; color: #6bfaff; }
body.dark h1 { color: #6bfaff; }
nav { margin-bottom: 1rem; text-align: center; }
nav a, nav button { margin: 0 0.5rem; color: #6bfaff; text-decoration: none; background: none; border: none; cursor: pointer; font-size: 1rem; font-weight: bold; }
nav a:hover, nav button:hover { text-decoration: underline; }
.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
.tools a button { width: 100%; padding: 0.75rem; border: none; border-radius: 8px; background: #51c5c9; color: #fff; font-size: 1rem; cursor: pointer; transition: background 0.3s; }
.tools a button:hover { background: #43afaf; }
input, select, button { margin-top: 0.5rem; padding: 0.5rem; width: 100%; font-size: 1rem; border: 1px solid #ccc; border-radius: 4px; background: #fff; color: #333; transition: background 0.3s, color 0.3s; }
body.dark input, body.dark select, body.dark button { background: #555; color: #ddd; border-color: #777; }
button.copy-btn { width: auto; padding: 0.5rem 1rem; margin-left: 0.5rem; background: #28a745; border: none; border-radius: 4px; color: #fff; }
button.copy-btn:hover { background: #1e7e34; }
.level-container { position: relative; width: 200px; height: 200px; margin: 1rem auto; background: #e0f7fa; border-radius: 50%; }
.level-container .circle { position: absolute; border: 2px dashed #007BFF; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.circle1 { width: 160px; height: 160px; }
.circle2 { width: 120px; height: 120px; }
.circle3 { width: 80px; height: 80px; }
.bubble { position: absolute; width: 30px; height: 30px; background: #3777ac; border: 2px solid #6bfaff; border-radius: 50%; top: 85px; left: 85px; transition: transform 0.1s; }
.progress-bar { position: relative; width: 100%; background: #2f7072; border-radius: 4px; overflow: hidden; margin-top: 1rem; height: 24px; }
.progress-bar div { height: 100%; background: #6bfaff; width: 0%; transition: width 0.5s; }
.progress-bar span { position: absolute; width: 100%; text-align: center; top: 0; left: 0; line-height: 24px; font-weight: bold; color: #fff; }
.calculator { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.calculator button { padding: 1rem; font-size: 1.2rem; background: #e7e7e7; border: none; border-radius: 6px; cursor: pointer; }
.calculator button.operator { background: #30607c; color: #6bfaff; }
.calculator-screen { grid-column: span 4; background: #000; color: rgb(34, 240, 240); padding: 1rem; font-size: 1.5rem; text-align: right; border-radius: 6px; overflow-x: auto; }
.calculator-history { margin-top: 1rem; max-height: 120px; overflow-y: auto; border-top: 1px solid #5bd4e9; padding-top: 0.5rem; }
.calculator-history li { list-style: none; padding: 0.25rem 0; border-bottom: 1px solid #53c5c9; }

/* Quotes under tools */
.quote { font-style: italic; color: #439ea1; margin-top: 0.5rem; text-align: center; font-size: 0.9rem; }
/* Compass styles */
.compass-container { position: relative; width: 200px; height: 200px; margin: 1rem auto; }
.compass-circle { width: 100%; height: 100%; border: 2px solid #6bfaff; border-radius: 50%; }
.compass-needle { position: absolute; width: 4px; height: 80px; background: red; top: 10px; left: 50%; transform-origin: bottom center; }
#compass, #turnAngle { text-align: center; margin: 0.5rem 0; }
#measureBtn { display: block; margin: 0.5rem auto; padding: 0.5rem 1rem; }