.route-preset-field { display:flex; align-items:center; gap:6px; min-width:0; }
.route-preset-field > .input { flex:1 1 0; min-width:0; width:0; }
.route-preset-button { flex:0 0 38px; width:38px; height:38px; padding:8px; border:1px solid #334155; border-radius:6px; background:#172335; cursor:pointer; }
.route-preset-button:hover { background:#24364d; }
.route-preset-button img { width:20px; height:20px; filter:brightness(0) invert(1); }
.route-presets-dialog { box-sizing:border-box; width:min(680px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid #334155; border-radius:8px; background:#0b111b; color:#ecf3ff; overflow:hidden; font:inherit; }
.route-presets-dialog::backdrop { background:rgb(0 0 0 / 65%); }
.route-presets-layout { display:flex; flex-direction:column; max-height:calc(100dvh - 36px); }
.route-presets-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px 10px; }
.route-presets-header h2 { margin:0; font-size:20px; letter-spacing:0; }
.route-presets-close { border:0; background:transparent; color:inherit; width:32px; height:32px; padding:6px; cursor:pointer; flex:none; }
.route-presets-close img { width:20px; height:20px; filter:brightness(0) invert(1); }
.route-presets-tools { padding:0 20px 12px; }
.route-presets-tools input { width:100%; box-sizing:border-box; }
.route-presets-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:10px; font-size:13px; color:#a6bbd4; }
.route-presets-toolbar > label { display:flex; align-items:center; gap:8px; font-size:13px; text-transform:none; letter-spacing:0; }
.route-presets-toolbar input { width:17px; height:17px; margin:0; accent-color:#2563eb; }
.route-presets-list { overflow-y:auto; min-height:96px; max-height:43vh; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; padding:0 20px; gap:0 16px; }
.route-presets-option { display:flex; align-items:center; gap:10px; min-width:0; padding:11px 0; border-bottom:1px solid #243044; cursor:pointer; font-size:14px; text-transform:none; letter-spacing:0; }
.route-presets-option input { width:17px; height:17px; flex:none; accent-color:#2563eb; }
.route-presets-option span { display:flex; flex-direction:column; min-width:0; overflow-wrap:anywhere; line-height:1.4; }
.route-presets-option small { font-size:12px; color:#91a7c2; text-transform:none; }
.route-presets-empty { grid-column:1/-1; color:#91a7c2; padding:16px 0; }
.route-presets-add { margin:12px 20px 0; border-top:1px solid #334155; padding:12px 0 0; }
.route-presets-add summary { cursor:pointer; color:#c6d9f3; font-size:14px; }
.route-presets-add form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding-top:12px; max-height:26vh; overflow:auto; }
.route-presets-add label { display:flex; flex-direction:column; gap:5px; min-width:0; color:#a6bbd4; font-size:12px; text-transform:none; }
.route-presets-add [hidden] { display:none; }
.route-presets-add input { min-width:0; width:100%; box-sizing:border-box; }
.route-presets-add button { justify-self:start; align-self:end; }
.route-presets-status { padding:8px 20px; margin:0; min-height:20px; color:#a6bbd4; font-size:13px; overflow-wrap:anywhere; }
.route-presets-status[data-error="true"] { color:#fca5a5; }
.route-presets-footer { display:flex; justify-content:flex-end; gap:8px; padding:12px 20px 18px; border-top:1px solid #243044; }
.route-presets-dialog button:focus-visible,.route-presets-dialog summary:focus-visible,.route-preset-button:focus-visible { outline:2px solid #60a5fa; outline-offset:3px; }
@media(max-width:540px) {
  .route-presets-list { grid-template-columns:minmax(0,1fr); max-height:38vh; }
  .route-presets-add form { grid-template-columns:minmax(0,1fr); }
  .route-presets-header,.route-presets-tools,.route-presets-list,.route-presets-footer { padding-left:14px; padding-right:14px; }
}