:root{
  --bg-primary:#f5f7fa;--bg-secondary:#fff;--text-primary:#333;--text-secondary:#444;
  --border:#ccc;--shadow:rgba(0,0,0,.08);--accent:#1a5bb8;--accent-light:#e6f0ff;
  --accent-border:#a0c4ff;--error:#e63946;--error-hover:#b32d38;--hover:#f9fbfd;
}
[data-theme="dark"]{
  --bg-primary:#1a1a1a;--bg-secondary:#2a2a2a;--text-primary:#e0e0e0;--text-secondary:#b0b0b0;
  --border:#444;--shadow:rgba(0,0,0,.3);--accent:#4a90e2;--accent-light:#1a3a5a;
  --accent-border:#6aa8ff;--error:#ff6b6b;--error-hover:#ff5252;--hover:#3a3a3a;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:var(--bg-primary);
     color:var(--text-primary);line-height:1.6;padding:20px;display:flex;justify-content:center;
     transition:background .3s,color .3s}
.container{background:var(--bg-secondary);padding:30px;border-radius:12px;
           box-shadow:0 4px 20px var(--shadow);max-width:600px;width:100%;position:relative;
           transition:background .3s,box-shadow .3s}
h1,h2{color:var(--accent);text-align:center;margin-bottom:24px;font-size:1.8rem}
h2{font-size:1.3rem;margin:20px 0 12px}

.input-group{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}
.input-group label{font-weight:600;color:var(--text-secondary);font-size:.95rem}
.input-group input,.input-group select{padding:12px;font-size:1rem;border:1px solid var(--border);
                              border-radius:6px;width:100%;background:var(--bg-secondary);
                              color:var(--text-primary);transition:border .2s,background .3s}
.input-group input:focus,.input-group select:focus{outline:2px solid var(--accent);
                                                  outline-offset:2px;border-color:var(--accent)}
.input-group input::placeholder{color:#999;font-style:italic}

/* Wind Toggle + Input */
.wind-group{display:flex;gap:8px;align-items:center}
#windToggle{min-width:48px;height:48px;border:1px solid var(--border);border-radius:6px;
            background:var(--bg-secondary);color:var(--text-primary);font-weight:bold;
            font-size:1.4rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;
            justify-content:center}
#windToggle:hover{background:var(--accent-light);border-color:var(--accent)}
#windToggle.negative{background:var(--error);color:white;border-color:var(--error)}
#windComponent{flex:1}

/* Results */
.results{background:var(--accent-light);padding:16px;border-radius:8px;text-align:center;
         margin:24px 0;font-size:1.1rem;font-weight:500;transition:background .3s}
.results strong{color:var(--accent)}

/* Theme Toggle */
.theme-toggle{position:absolute;top:20px;right:20px;width:44px;height:44px;background:var(--accent);
               color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;
               justify-content:center;z-index:10;transition:background .2s,transform .2s}
.theme-toggle:hover{background:#0f4a99;transform:scale(1.05)}
.theme-toggle .icon{position:absolute;transition:opacity .2s,transform .2s}
.theme-toggle .sun{display:inline}
.theme-toggle .moon{display:none;opacity:0}
[data-theme="dark"] .theme-toggle .sun{display:none;opacity:0}
[data-theme="dark"] .theme-toggle .moon{display:inline;opacity:1}

/* Buttons */
#exportPdf,#clearAll{display:block;margin:16px auto 0;padding:12px 24px;background:var(--accent);
           color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;
           font-size:1rem;transition:background .2s}
#exportPdf:hover,#clearAll:hover{background:#0f4a99}

#defaultDistances{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px 0}
.dist-btn{padding:10px 14px;background:var(--accent-light);color:var(--accent);
          border:1px solid var(--accent-border);border-radius:6px;font-size:.9rem;
          font-weight:600;cursor:pointer;transition:all .2s}
.dist-btn:hover,.dist-btn:focus{background:var(--accent-border);color:#fff;
                               outline:2px solid var(--accent);outline-offset:2px}

.custom-input{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.custom-input input{flex:1 1 150px;padding:12px;font-size:1rem;border:1px solid var(--border);
                    border-radius:6px;background:var(--bg-secondary);color:var(--text-primary)}
.custom-input button{padding:12px 16px;background:var(--accent);color:#fff;border:none;
                     border-radius:6px;font-weight:600;cursor:pointer;transition:background .2s}
.custom-input button:hover{background:#0f4a99}

.table-actions{text-align:center;margin:12px 0}
#clearAll{margin:0 auto 12px;display:inline-block}

/* Table */
#heightsTable{width:100%;border-collapse:collapse;margin-top:16px;font-size:.95rem}
#heightsTable th{background:var(--accent-light);padding:12px;font-weight:600;color:var(--accent);
                 border:1px solid var(--border)}
#heightsTable td{padding:10px;text-align:center;border:1px solid var(--border);
                 background:var(--bg-secondary);color:var(--text-primary)}
#heightsTable tbody tr:hover{background:var(--hover)}
.delete-btn{background:var(--error);color:#fff;border:none;padding:6px 10px;
            border-radius:4px;font-size:.8rem;cursor:pointer;transition:background .2s}
.delete-btn:hover{background:var(--error-hover)}

/* Print */
@media print{
  body{background:#fff !important;padding:0}
  .container{box-shadow:none;padding:10px;max-width:none}
  #themeToggle,#exportPdf,.input-group,.custom-input,#defaultDistances,.table-actions,#clearAll{display:none !important}
  .results,#heightsTable{background:#fff !important;color:#000 !important;border:1px solid #666}
  h1,h2{color:#000 !important}
  #heightsTable th,#heightsTable td{border:1px solid #666;font-size:12pt}
  .results{font-size:14pt;padding:12px}
}

/* Responsive */
@media (max-width:480px){
  .container{padding:20px}
  h1{font-size:1.5rem}
  .dist-btn{padding:8px 12px;font-size:.85rem}
  .custom-input input{flex:1 1 120px}
  .theme-toggle{top:10px;right:10px;width:40px;height:40px}
  .wind-group{flex-direction:column}
  #windToggle{width:100%;height:48px;font-size:1.6rem}
}

@media (min-width:768px) and (max-width:1024px){
  .container{max-width:700px}
  .input-group label{font-size:1rem}
}