:root{--app-bg:#fff;--body-bg:#f0f0f0;--surface:#f9f9f9;--surface-border:#ddd;--surface-alt:#f0f7ff;--surface-alt-border:#b3d9f7;--text-primary:#333;--text-secondary:#888;--text-heading:#1a3a5c;--border-color:#ccc;--border-light:#eee;--input-bg:#fff;--input-color:#333;--btn-secondary-bg:#e0e0e0;--btn-secondary-color:#333;--stat-blue-bg:#f0f7ff;--stat-blue-border:#b3d9f7;--stat-red-bg:#fff0f0;--stat-red-border:#ffb3b3;--stat-green-bg:#f0fff0;--stat-green-border:#b3f7b3;--selected-zone-bg:#fff3e0;--roster-editing-bg:#fff8e1;--table-row-alt:#f9f9f9;--table-row:#fff}[data-theme=dark]{--app-bg:#1e1e1e;--body-bg:#121212;--surface:#2c2c2c;--surface-border:#444;--surface-alt:#1e2d3d;--surface-alt-border:#2a4a6a;--text-primary:#e0e0e0;--text-secondary:#aaa;--text-heading:#7ab3d4;--border-color:#555;--border-light:#444;--input-bg:#2c2c2c;--input-color:#e0e0e0;--btn-secondary-bg:#3a3a3a;--btn-secondary-color:#e0e0e0;--stat-blue-bg:#1a2a3a;--stat-blue-border:#2a4a6a;--stat-red-bg:#2a1a1a;--stat-red-border:#6a2a2a;--stat-green-bg:#1a2a1a;--stat-green-border:#2a5a2a;--selected-zone-bg:#3a2a1a;--roster-editing-bg:#2a2a1a;--table-row-alt:#2c2c2c;--table-row:#1e1e1e}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--body-bg);font-family:Arial,sans-serif}.App{background-color:var(--app-bg);max-width:480px;color:var(--text-primary);flex-direction:column;min-height:100vh;margin:0 auto;display:flex}.nav-bar{background-color:#1a3a5c;align-items:center;gap:20px;padding:12px 16px;display:flex}.nav-bar a{color:#fff;font-size:16px;font-weight:700;text-decoration:none}.nav-bar a:first-child{margin-right:auto}.dark-mode-toggle{color:#fff;cursor:pointer;background:0 0;border:1px solid #fff6;border-radius:6px;margin-left:auto;padding:4px 8px;font-size:16px;line-height:1}.dark-mode-toggle:hover{background:#ffffff26}.page{padding:16px}h1{color:var(--text-heading);margin-bottom:16px;font-size:22px}h2{color:var(--text-heading);margin-bottom:12px;font-size:18px}button{cursor:pointer;border:none;border-radius:6px;padding:10px 16px;font-size:16px}.btn-primary{color:#fff;background-color:#1a3a5c;border-radius:8px;width:100%;padding:14px;font-size:18px}.btn-secondary{background-color:var(--btn-secondary-bg);color:var(--btn-secondary-color)}.btn-danger{color:#fff;background-color:#c00}input,select{border:1px solid var(--border-color);background-color:var(--input-bg);width:100%;color:var(--input-color);border-radius:6px;margin-bottom:12px;padding:10px;font-size:16px}label{color:var(--text-primary);margin-bottom:4px;font-size:14px;font-weight:700;display:block}