*{box-sizing:border-box;margin:0;padding:0;font-family:Segoe UI, Roboto, Arial, sans-serif}

:root{
  --safe-area-top:env(safe-area-inset-top);
  --safe-area-bottom:env(safe-area-inset-bottom);
  --safe-area-left:env(safe-area-inset-left);
  --safe-area-right:env(safe-area-inset-right);
}

html,body{height:100%;height:var(--actual-vh, 100vh);overflow:hidden;overscroll-behavior:none}
#app{display:none;flex-direction:column;width:100vw;height:var(--actual-vh, 100vh)}
#app.visible{display:flex}
body{background:#100C5C;color:#000;overflow:hidden}

/* Title Screen */
#title-screen{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:#100C5C;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  animation:fadeIn 0.5s ease;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.title-content{
  text-align:center;
  color:#fff;
  max-width:600px;
  padding:20px;
}
.title-logo{
  width:auto;
  height:auto;
  margin-bottom:20px;
}
@keyframes pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.05)}
}
.title-content h1{
  font-size:3rem;
  margin-bottom:10px;
  color:#8af;
}
.subtitle{
  font-size:1.2rem;
  color:#aaa;
  margin-bottom:15px;
}
.equation{
  font-size:1.5rem;
  color:#8af;
  font-family:'Times New Roman', serif;
  margin-bottom:40px;
}
.title-buttons{
  display:flex;
  gap:15px;
  justify-content:center;
  margin-bottom:15px;
}
.controls-overlay{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.8);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1001;
  animation:fadeIn 0.2s ease;
}
.controls-overlay.hidden{
  display:none;
}
.controls-content{
  background:rgba(21,21,38,0.95);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:10px;
  padding:30px;
  max-width:500px;
  max-height:80vh;
  overflow-y:auto;
  text-align:left;
  color:#fff;
}
.controls-content h2{
  text-align:center;
  margin-bottom:20px;
  color:#8af;
  font-size:1.4rem;
}
.control-group{
  margin-bottom:20px;
}
.control-group:last-child{
  margin-bottom:0;
}
.control-group strong{
  color:#f8a;
  font-size:1.1rem;
  display:block;
  margin-bottom:8px;
}
.control-group ul{
  list-style:none;
  padding-left:0;
}
.control-group li{
  color:#ccc;
  padding:4px 0;
  padding-left:20px;
  position:relative;
}
.control-group li:before{
  content:"→";
  position:absolute;
  left:0;
  color:#8af;
}
.start-button,.controls-button{
  background:rgba(102,126,234,0.2);
  color:#ddd;
  border:1px solid rgba(102,126,234,0.4);
  padding:15px 40px;
  font-size:1.2rem;
  border-radius:4px;
  cursor:pointer;
  transition:background 0.2s;
}
.start-button:hover,.controls-button:hover{
  background:rgba(102,126,234,0.35);
  border-color:rgba(102,126,234,0.6);
}
.close-button{
  background:#667eea;
  color:#fff;
  border:none;
  padding:10px 30px;
  font-size:1rem;
  border-radius:6px;
  cursor:pointer;
  margin-top:20px;
  display:block;
  margin-left:auto;
  margin-right:auto;
}
.close-button:hover{
  background:#764ba2;
}
.hint{
  margin-top:15px;
  color:#888;
  font-size:0.9rem;
}
.hint a{
  color:#888;
  text-decoration:underline;
}
.hint a:visited{
  color:#888;
}
.hint a:hover{
  color:#aaa;
}
#title-screen.hidden{
  animation:fadeOut 0.3s ease forwards;
}
@keyframes fadeOut{to{opacity:0;visibility:hidden}}
header{position:absolute;top:env(safe-area-inset-top);left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;padding-left:max(14px, env(safe-area-inset-left));padding-right:max(14px, env(safe-area-inset-right));background:transparent;color:#eee;z-index:50;pointer-events:none}
header h1{font-size:1.1rem;display:flex;align-items:center;gap:8px;color:#8af;text-shadow:0 0 4px rgba(0,0,0,1),0 0 8px rgba(0,0,0,1),0 0 12px rgba(0,0,0,0.9),0 2px 8px rgba(0,0,0,0.8);filter:drop-shadow(0 0 6px rgba(0,0,0,0.9))}
header button{pointer-events:auto}
.logo{width:28px;height:28px;vertical-align:middle}

/* Hamburger Menu */
.menu-toggle{background:rgba(0,0,0,0.6);border:none;cursor:pointer;padding:8px;display:flex;flex-direction:column;gap:4px;width:32px;height:32px;justify-content:center;align-items:center;border-radius:4px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.menu-toggle span{display:block;width:20px;height:2px;background:#8af;transition:all 0.3s;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,0.8)}
.menu-toggle:hover span{background:#adf}
.menu-toggle.active span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Settings Panel */
.settings-panel{position:absolute;top:calc(env(safe-area-inset-top) + 50px);right:max(12px, env(safe-area-inset-right));background:rgba(0,0,0,0.95);border:1px solid rgba(255,255,255,0.3);border-radius:8px;padding:0;min-width:280px;z-index:1000;box-shadow:0 4px 20px rgba(0,0,0,0.7);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.settings-content{padding:16px}
.settings-content h3{color:#8af;margin-bottom:16px;font-size:1.1rem;border-bottom:1px solid rgba(138,170,255,0.3);padding-bottom:8px}
.setting-group{margin-bottom:16px}
.setting-group:last-child{margin-bottom:0}
.setting-group label{color:#eee;display:block;margin-bottom:6px;font-size:0.9rem}
.setting-group input[type=checkbox]{cursor:pointer;width:16px;height:16px;margin-right:8px;vertical-align:middle}
.setting-group input[type=range]{width:100%;cursor:pointer}
.setting-group input[type=range]:disabled{opacity:0.5;cursor:not-allowed}
.reset-btn{width:100%;background:#667eea;color:#fff;border:none;padding:8px;border-radius:4px;cursor:pointer;font-size:0.9rem;transition:background 0.2s}
.reset-btn:hover{background:#764ba2}
main{position:relative;flex:1;display:flex}
#canvas-wrap{flex:1;position:relative}
.canvas-layer{position:absolute;width:100%;height:100%;display:block;cursor:crosshair}
#canvas-wrap canvas{width:100%;height:100%}
#canvas{flex:1;display:block;width:100%;height:100%;cursor:crosshair}
#zoom-info{position:absolute;top:calc(env(safe-area-inset-top) + 42px);left:max(12px, env(safe-area-inset-left));background:rgba(0,0,0,0.85);padding:10px 14px;border-radius:6px;font-size:0.9rem;color:#eee;font-family:monospace;line-height:1.6;pointer-events:none;z-index:10;border:1px solid rgba(255,255,255,0.2);opacity:1;transition:opacity 0.5s ease;width:170px;box-sizing:border-box}
#zoom-info.fade-out{opacity:0}
#zoom-info div{white-space:nowrap;display:flex;justify-content:space-between;align-items:center}
#zoom-level{color:#8af;font-weight:bold}
#scale-value{color:#f8a;font-weight:bold}
#orbit-quality-info{position:absolute;bottom:max(12px, env(safe-area-inset-bottom));right:max(12px, env(safe-area-inset-right));background:rgba(0,0,0,0.85);padding:10px 14px;border-radius:6px;font-size:0.9rem;color:#eee;font-family:monospace;line-height:1.6;pointer-events:none;z-index:10;border:1px solid rgba(255,255,255,0.2);width:170px;box-sizing:border-box}
#orbit-quality-info div{white-space:nowrap;display:flex;justify-content:space-between;align-items:center}
#optimization-status{position:absolute;bottom:max(56px, calc(env(safe-area-inset-bottom) + 44px));right:max(12px, env(safe-area-inset-right));background:rgba(0,0,0,0.9);padding:10px 14px;border-radius:6px;font-size:0.9rem;color:#ef4444;font-family:monospace;line-height:1.6;pointer-events:none;z-index:11;border:1px solid rgba(239,68,68,0.4);animation:pulse 1.5s ease-in-out infinite;width:170px;box-sizing:border-box}
#optimization-status div{display:flex;justify-content:space-between;align-items:center}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}
#orbit-quality-value{font-weight:bold;transition:color 0.3s ease}
#orbit-quality-value.quality-good{color:#4ade80}
#orbit-quality-value.quality-medium{color:#fbbf24}
#orbit-quality-value.quality-poor{color:#f87171}
#julia-set-button-wrap{position:absolute;bottom:max(12px, env(safe-area-inset-bottom));left:max(12px, env(safe-area-inset-left));z-index:10;pointer-events:auto}
.julia-set-btn{background:linear-gradient(135deg,#f59e0b 0%,#ef4444 100%) !important;color:#fff;border:none;padding:10px 16px;border-radius:6px;cursor:pointer;font-size:0.9rem;font-weight:600;box-shadow:0 3px 10px rgba(245,158,11,0.4);transition:all 0.2s;display:flex;align-items:center;gap:6px;width:190px;justify-content:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.julia-set-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(245,158,11,0.6)}
.julia-set-btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(245,158,11,0.4)}
#julia-info{position:absolute;bottom:max(12px, env(safe-area-inset-bottom));left:max(12px, env(safe-area-inset-left));z-index:10;pointer-events:auto}
.back-btn-inline{background:linear-gradient(135deg,#f59e0b 0%,#ef4444 100%) !important;color:#fff;border:none;padding:10px 16px;border-radius:6px;cursor:pointer;font-size:0.9rem;font-weight:600;box-shadow:0 3px 10px rgba(245,158,11,0.4);transition:all 0.2s;display:flex;align-items:center;gap:6px;width:190px;justify-content:center;box-sizing:border-box}
.back-btn-inline:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(245,158,11,0.6)}
.back-btn-inline:active{transform:translateY(0);box-shadow:0 2px 8px rgba(245,158,11,0.4)}
.mode-btn{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;padding:6px 12px;font-weight:bold;transition:transform 0.1s,box-shadow 0.2s;box-shadow:0 2px 8px rgba(102,126,234,0.3)}
.mode-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(102,126,234,0.5)}
.mode-btn.active{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);box-shadow:0 2px 8px rgba(245,87,108,0.3)}
.hidden{display:none!important}
#hud{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,0.45);padding:8px 10px;border-radius:6px;font-size:0.85rem}
footer{padding:8px 14px;background:linear-gradient(90deg,#0f0f12,#0b0b0f);font-size:0.9rem;color:#9aa}
button{background:rgba(102,126,234,0.2);border:1px solid rgba(102,126,234,0.4);color:#ddd;padding:6px 10px;border-radius:4px;cursor:pointer;transition:background 0.2s}
button:hover{background:rgba(102,126,234,0.35);border-color:rgba(102,126,234,0.6)}
.zoom-rect{position:absolute;border:2px dashed #8af;pointer-events:none}

/* Context Menu */
.context-menu{position:absolute;background:rgba(0,0,0,0.95);border:1px solid rgba(255,255,255,0.3);border-radius:6px;padding:4px 0;min-width:180px;z-index:1000;box-shadow:0 4px 12px rgba(0,0,0,0.5)}
.context-menu-item{padding:10px 16px;color:#eee;cursor:pointer;transition:background 0.15s;font-size:0.9rem}
.context-menu-item:hover{background:rgba(102,126,234,0.4);color:#fff}
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.modal-content{background:#1a1a2e;border:1px solid var(--border-color);border-radius:8px;padding:24px;min-width:300px;max-width:400px;max-height:90vh;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,0.8);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.modal-content h3{margin:0 0 16px 0;color:#ffffff;font-size:1.2rem}
.modal-content input[type="text"]{width:100%;padding:10px;background:#2a2a3e;color:#ffffff;border:1px solid var(--border-color);border-radius:4px;font-size:1rem;margin-bottom:16px;box-sizing:border-box}
.modal-content input[type="text"]:focus{outline:none;border-color:var(--accent-color)}
.modal-buttons{display:flex;gap:10px;justify-content:center}
.modal-btn{padding:10px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:white;border:none;border-radius:6px;cursor:pointer;font-size:1rem;font-weight:600;transition:all 0.2s;box-shadow:0 2px 8px rgba(102,126,234,0.3);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.modal-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(102,126,234,0.5)}
.modal-btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(102,126,234,0.4)}
.modal-btn.cancel{background:rgba(255,255,255,0.1);box-shadow:none}
.modal-btn.cancel:hover{background:rgba(255,255,255,0.2);transform:none}
.manage-modal{max-width:500px}
.deep-zoom-info{max-width:600px;line-height:1.6}
.deep-zoom-info h4{color:#7a93ee;font-size:1rem;margin:16px 0 8px 0}
.deep-zoom-info ul{margin:8px 0;padding-left:24px;color:rgba(255,255,255,0.9)}
.deep-zoom-info li{margin:6px 0}
.deep-zoom-info p{color:rgba(255,255,255,0.85);margin:12px 0}
.deep-zoom-info em{color:#7a93ee;font-style:italic}
.location-item{display:flex;align-items:center;justify-content:space-between;padding:10px;background:rgba(255,255,255,0.05);border-radius:4px;margin-bottom:8px}
.location-item:hover{background:rgba(255,255,255,0.08)}
.location-name{color:#ffffff;font-size:0.95rem;flex:1}
.location-coords{color:rgba(255,255,255,0.5);font-size:0.8rem;margin-left:10px}
.delete-location-btn{padding:6px 12px;background:#d94545;color:white;border:none;border-radius:4px;cursor:pointer;font-size:0.85rem;transition:background 0.2s}
.delete-location-btn:hover{background:#c03030}
#manage-locations-list{max-height:400px;overflow-y:auto;margin-bottom:16px}
#manage-locations-list:empty::after{content:"No saved locations yet";color:rgba(255,255,255,0.5);display:block;text-align:center;padding:20px}
@media (max-width: 600px){
  header{padding:8px 10px}
  header h1{font-size:1rem}
  .controls{gap:8px}
  .controls label{font-size:0.85rem}
  .controls input[type=range]{width:120px;min-width:80px}
  button{padding:5px 8px;font-size:0.85rem}
  .modal-content{min-width:auto;width:90%;max-width:90vw;padding:20px}
  .deep-zoom-info{max-width:100%}
  .title-buttons{flex-direction:column;gap:12px;padding:0 20px}
}
@media (max-height: 500px) and (orientation: landscape){
  .title-content{padding:10px}
  .title-content h1{font-size:1.8rem;margin-bottom:5px}
  .subtitle{font-size:0.9rem;margin-bottom:8px}
  .equation{font-size:1.1rem;margin-bottom:15px}
  .title-logo{max-height:80px!important;max-width:100%!important;width:auto!important;height:auto!important;margin-bottom:10px}
  .title-buttons{gap:8px;margin-bottom:8px}
  .start-button{padding:8px 16px;font-size:0.9rem}
  .hint{font-size:0.75rem;margin-top:8px}
  .settings-panel{max-height:calc(100vh - 60px);overflow-y:auto;top:calc(env(safe-area-inset-top) + 10px)}
}