:root{--bg-color: #ecf0f1;--device-body-color: #34495e;--screen-bg: #ffffff;--text-color: #2c3e50;--primary-accent: #3498db;--secondary-accent: #2ecc71;--warning-accent: #e74c3c;--subtle-gray: #bdc3c7;--warn-yellow: #f1c40f;--tabbar-bg: #f4f6f7;--tabbar-border: #cfd6db;--chip-bg: #ffffff;--chip-shadow: 0 10px 24px rgba(0, 0, 0, .12);--chip-border: #e5ebf0;--chip-icon: #101921;--chip-text: #101921;--chip-icon-bg: #EAF1F7;--page-header-bg: #f4f6f7;--map-data-bg: rgba(255, 255, 255, .85);--center-line-bg: rgba(255, 255, 255, .95);--cdi-scale-bg: rgba(255, 255, 255, .95);--progress-bar-bg: #f4f6f7;--center-line-color: #1d2a33;--zoom-btn-bg: #f4f6f7;--metric-label-color: #5b6773;--metric-value-color: #1d2a33;--recenter-btn-bg: #fff;--hint-color: #6c7884}:root.dark{--bg-color: #1e1e2e;--device-body-color: #2c3e50;--screen-bg: #0f1419;--text-color: #c0c0c0;--primary-accent: #3498db;--secondary-accent: #2ecc71;--warning-accent: #e74c3c;--subtle-gray: #7f8c8d;--warn-yellow: #f1c40f;--tabbar-bg: #2c3e50;--tabbar-border: #1e1e2e;--chip-bg: #2c3e50;--chip-shadow: 0 10px 24px rgba(0, 0, 0, .5);--chip-border: #1e1e2e;--chip-icon: #c0c0c0;--chip-text: #c0c0c0;--chip-icon-bg: #2c3e50;--page-header-bg: #2c3e50;--map-data-bg: rgba(0, 0, 0, .85);--center-line-bg: rgba(0, 0, 0, .95);--cdi-scale-bg: rgba(0, 0, 0, .95);--progress-bar-bg: #2c3e50;--center-line-color: #c0c0c0;--zoom-btn-bg: #2c3e50;--metric-label-color: #bdc3c7;--metric-value-color: #c0c0c0;--recenter-btn-bg: #2c3e50;--hint-color: #bdc3c7}.dark-mode-toggle{background:none;border:none;cursor:pointer;width:24px;height:24px;padding:0}.dark-mode-toggle svg{width:100%;height:100%;fill:var(--text-color)}.dark-mode-toggle #sun-icon{fill:#f1c40f}.dark-mode-toggle #moon-icon{fill:#7f8c8d}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:var(--bg-color);display:flex;justify-content:center;align-items:center;height:100vh;margin:0;color:var(--text-color);overscroll-behavior:contain}.device-container{width:360px;height:640px;background:var(--device-body-color);border-radius:20px;padding:15px;box-shadow:0 10px 30px #0000004d;display:flex;flex-direction:column}.screen{flex:1;background:var(--screen-bg);border:1px solid var(--subtle-gray);border-radius:4px;position:relative;overflow:hidden;display:flex;flex-direction:column}.page{display:none;width:100%;height:100%;flex-direction:column}.page.active{display:flex}.page-header{padding:8px 5px;background:var(--page-header-bg);border-bottom:1px solid var(--subtle-gray);display:flex;justify-content:space-between;align-items:center}.header-left,.header-right{flex:1}.header-center{flex:2;text-align:center}.header-left{display:flex;justify-content:flex-start}.header-right{display:flex;justify-content:flex-end}.location-indicator{width:12px;height:12px;border-radius:50%;background-color:#e74c3c;box-shadow:0 0 6px #e74c3c;transition:background-color .3s,box-shadow .3s}.location-indicator.yellow{background-color:#f1c40f;box-shadow:0 0 6px #f1c40f}.location-indicator.green{background-color:#2ecc71;box-shadow:0 0 6px #2ecc71}.page-content{flex:1;padding:10px;overflow-y:auto}#import-location-textarea{width:95%;height:150px;margin-bottom:10px}#map-page-content{padding:0;position:relative}#map{width:100%;height:100%;cursor:crosshair;position:relative}.header-map-data{display:inline-flex;gap:16px;white-space:nowrap}.header-map-data{display:inline-flex;gap:24px;white-space:nowrap;font-weight:400}.metric-label{font-size:.78em;color:#5b6773}.metric-value{font-weight:700;font-size:1.05em;color:#1d2a33}.nav-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;width:100%;margin-top:2px}.metric{text-align:center}.metric-label{font-size:.78em;color:var(--metric-label-color)}.metric-value{font-weight:700;font-size:1.05em;color:var(--metric-value-color)}.nav-bottom{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-top:8px}.compass-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}.center-line{background:var(--center-line-bg);border:1px solid var(--subtle-gray);border-radius:12px;padding:2px 10px;font-size:.9em;font-weight:800;color:var(--center-line-color);letter-spacing:.02em;text-align:center;transition:color .3s}.center-line.hdg-source-mag{color:var(--warn-yellow);font-weight:800}#map-heading.hdg-source-mag{color:var(--warn-yellow)}.route-context{display:flex;justify-content:space-between;align-items:center;font-size:.8em;color:#5b6773;width:100%;max-width:280px;margin:0 auto -4px}.route-context .prev-wp,.route-context .next-wp{max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:none;border:none;padding:4px 8px;margin:0;font:inherit;color:var(--primary-accent);cursor:pointer;text-align:center;border-radius:4px;font-weight:600}.route-context .prev-wp:hover,.route-context .next-wp:hover{background-color:#eaf1f7}.route-context .prev-wp:empty,.route-context .next-wp:empty{visibility:hidden}.compass-badges{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;gap:8px;pointer-events:none}.badge{background:rgba(255,255,255,.9);border:1px solid var(--subtle-gray);border-radius:12px;padding:2px 8px;font-size:.82em;font-weight:700;color:#1d2a33}.destination-info h3{margin:6px 0 4px}#recenter-button{position:absolute;top:10px;left:10px;z-index:1000;background:var(--recenter-btn-bg);border:2px solid var(--subtle-gray);border-radius:5px;width:32px;height:32px;cursor:pointer;box-shadow:0 1px 5px #0006;display:flex;justify-content:center;align-items:center}#recenter-button svg{width:20px;height:20px}#nav-page-content{display:flex;flex-direction:column;align-items:center;gap:8px}.destination-info{text-align:center}.destination-info p{margin:4px 0}.compass{width:230px;height:230px;border:2px solid var(--text-color);border-radius:50%;position:relative;background:var(--screen-bg);display:grid;place-items:center;margin-top:2px;overflow:visible}.dial{position:absolute;top:12px;right:12px;bottom:12px;left:12px;transform-origin:50% 50%}.tick,.tick-long{position:absolute;left:50%;top:50%;width:2px;background:#98a0a6}.tick{height:6px}.tick-long{height:10px;background:#2c3e50}.dial-label{position:absolute;left:50%;top:50%;transform-origin:50% 50%;color:#98a0a6;font-weight:600}.dial-label.cardinal{font-size:1.05em;color:#8a96a1}.dial-label.number{font-size:.9em}.cdi-scale-label{position:absolute;bottom:6px;right:1px;z-index:3;background:var(--cdi-scale-bg);border:1px solid var(--subtle-gray);border-radius:6px;font-size:.78em;padding:2px 7px;pointer-events:none}.arrow-piece{position:absolute;left:50%;top:50%;transform-origin:50% 50%;transition:transform .15s linear}.arrow-head{width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:24px solid #e74c3c;transform:translate(-50%,-50%) rotate(0) translateY(-75px)}.arrow-body{width:128px;height:3px;background:#e74c3c;transform:translate(-50%,-50%) rotate(90deg)}.arrow-tail{position:absolute;left:50%;top:50%;width:22px;height:28px;background:#e74c3c;clip-path:polygon(50% 0%,100% 100%,50% 70%,0% 100%);transform:translate(-50%,-50%) rotate(0) translateY(75px)}.zoom-controls{display:flex;align-items:center;gap:8px}.zoom-btn{width:28px;height:28px;border-radius:6px;border:1px solid var(--subtle-gray);background:var(--zoom-btn-bg);cursor:pointer;font-weight:800}.progress-container{width:85%;display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:6px}.progress-bar{width:100%;height:12px;border:1px solid #2d3540;background:var(--progress-bar-bg);position:relative;border-radius:6px;overflow:hidden}.progress-fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:#2ecc71}.progress-label{font-size:.85em;color:#5b6773}.nav-data-fields{display:flex;flex-wrap:wrap;width:100%;justify-content:space-around;margin-top:5px;font-size:.9em}.nav-data-fields div{width:45%;text-align:center}#menu-page-content{padding:12px;display:flex;flex-direction:column;gap:14px}.setting-group{border:1px solid var(--subtle-gray);border-radius:8px;padding:12px}.setting-title{font-weight:700;margin-bottom:8px}.setting-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.setting-row label{display:flex;align-items:center;gap:6px;cursor:pointer}.setting-row .popup-button{margin-top:0;padding:8px 12px;width:auto}.modal{display:none;position:absolute;top:0;right:0;bottom:0;left:0;background:var(--screen-bg);z-index:2000;flex-direction:column}.modal-content{padding:15px;flex:1;overflow:auto}.modal-content input,.modal-content select{width:calc(100% - 12px);padding:8px;margin-bottom:10px;border:1px solid var(--subtle-gray);border-radius:4px}.rb-row{display:grid;grid-template-columns:1fr;gap:8px}.inline{display:flex;gap:8px;align-items:center}.hint{font-size:.82em;color:var(--hint-color);margin:-6px 0 8px}#associated-routes-container ul{margin:4px 0;padding-left:20px}#associated-routes-container p{margin:4px 0}.modal-footer{display:flex;justify-content:space-around;padding:10px;border-top:1px solid var(--subtle-gray)}.modal-footer button{padding:8px 16px;border-radius:5px;border:1px solid transparent;font-weight:600;cursor:pointer}#btn-save-waypoint,#btn-import-location{background:var(--primary-accent);color:#fff}#btn-delete-waypoint{background:var(--warning-accent);color:#fff}#btn-cancel-waypoint,#btn-close-waypoint-list,#btn-cancel-import-location{background:#f4f6f7;border-color:var(--subtle-gray)}.list-item,.waypoint-list-item{display:flex;justify-content:space-between;align-items:flex-start;padding:12px 8px;border-bottom:1px solid var(--subtle-gray)}.list-item button,.waypoint-list-item button{margin-left:5px;font-size:.8em;padding:4px 8px;border-radius:4px;border:1px solid var(--subtle-gray);background:#fff;cursor:pointer}.list-item-name{cursor:pointer;flex:1}.wp-meta{display:block;font-size:.8em;color:#6a7785;margin-top:2px}.popup-button{width:100%;margin-top:8px;padding:6px;border-radius:4px;border:1px solid var(--subtle-gray);background:#f4f6f7;cursor:pointer;text-align:center}.popup-button.delete{background:var(--warning-accent);color:#fff;border-color:var(--warning-accent)}.adjust-controls{text-align:center}.adjust-arrows{display:inline-grid;grid-template-columns:1fr 1fr 1fr;gap:2px}.adjust-arrows button{width:30px;height:30px}.adjust-footer{display:flex;justify-content:space-between;margin-top:8px}.tabbar{height:50px;background:var(--tabbar-bg);border-top:1px solid var(--tabbar-border);display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;justify-items:center;border-radius:0 0 14px 14px}.tab-item{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.78em;color:#4b5b68;cursor:pointer;-webkit-user-select:none;user-select:none}.tab-item svg{width:20px;height:20px;margin-bottom:2px;fill:#789}.tab-item.active{color:#1d2a33;font-weight:700}.tab-item.active svg{fill:#1d2a33}.fab{position:absolute;right:16px;bottom:36px;width:56px;height:56px;border-radius:50%;background:#3498db;color:var(--text-color);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px #00000040;cursor:pointer;border:none;transition:transform .08s ease-in-out,background .15s ease-in-out;z-index:1300}.fab:active{transform:scale(.96)}.fab svg{width:28px;height:28px;fill:var(--text-color)}.speed-dial{position:absolute;right:16px;bottom:98px;display:flex;flex-direction:column;gap:14px;z-index:1299;pointer-events:none}.speed-dial.open{pointer-events:auto}.chip{display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:999px;background:var(--chip-bg);color:var(--chip-text);box-shadow:var(--chip-shadow);border:1px solid var(--chip-border);min-width:210px;justify-content:flex-start;opacity:0;transform:translateY(10px) scale(.98);transition:opacity .15s ease,transform .15s ease}.speed-dial.open .chip{opacity:1;transform:translateY(0) scale(1)}.chip .icon{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--chip-icon-bg)}.chip .icon svg{width:18px;height:18px;fill:var(--chip-icon)}.chip .label{font-size:1rem;font-weight:600;white-space:nowrap}.chip:active{transform:scale(.98)}.route-sequence-marker{background-color:#fffc;border:1px solid #333;border-radius:50%;width:20px;height:20px;text-align:center;line-height:18px;font-weight:700;font-size:12px}@media (max-width: 768px){body{justify-content:flex-start;align-items:flex-start}.device-container{width:100vw;height:100vh;border-radius:0;padding:0;background:none}}