/* Uygulama arayüzü: nerdesin/ui/app.css dosyasından otomatik üretildi.
   Elle düzenleme; tools/sync_site_ui.py ile yeniden üret. */
.ui { font-family: "Manrope", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; user-select: none; }
.ui *, .ui *::before, .ui *::after { box-sizing: border-box; }
.ui button { font: inherit; color: inherit; border: 0; background: none; outline: none; padding: 0; cursor: default; }
.ui input { font: inherit; color: inherit; }
.ui {
  --navy-950: #040c22;
  --navy-900: #071330;
  --navy-800: #0b1b3f;
  --navy-700: #13285a;
  --blue-500: #1f5bff;
  --blue-400: #3d74ff;
  --blue-300: #7aa2ff;
  --blue-50: #eef3ff;
  --ink: #0b1b3f;
  --ink-2: #4a5878;
  --ink-3: #8a96b0;
  --line: #e6eaf3;
  --surface: #ffffff;
  --surface-2: #f5f7fc;
  --green: #12b76a;
  --amber: #f79009;
  --red: #f04438;
  --radius: 18px;
  --shadow-lg: 0 24px 60px -18px rgba(7, 19, 48, .35), 0 8px 20px -10px rgba(7, 19, 48, .2);
  --shadow-md: 0 10px 30px -12px rgba(7, 19, 48, .28);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --titlebar: 44px;
}
.ui button {font: inherit; color: inherit; cursor: pointer; border: 0; background: none; outline: none;}
.ui button:focus-visible {box-shadow: 0 0 0 3px rgba(31,91,255,.35);}
.ui input {font: inherit; color: inherit;}
.ui svg {width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none;}
.ui .hidden {display: none !important;}
.ui kbd {font: 600 11px/1 "Manrope", sans-serif; padding: 4px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); border-bottom-width: 2px; color: var(--ink-2);}
@keyframes ui-gridMove { to { background-position: 0 480px, 0 0; } }
@keyframes ui-ring { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(4.2); opacity: 0; } }
@keyframes ui-reveal { to { clip-path: inset(0 0 0 0); } }
@keyframes ui-load { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes ui-fadeUp { to { opacity: 1; transform: none; } }
.ui .ui-titlebar {position: fixed; top: 0; left: 0; right: 0; height: var(--titlebar); z-index: 1000; display: flex; align-items: center; padding-left: 18px; background: var(--navy-900); color: #fff; border-bottom: 1px solid rgba(255,255,255,.06);}
.ui .tb-brand img {height: 20px; display: block; margin-top: 2px;}
.ui .tb-status {flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; color: #a8b6d9;}
.ui .tb-status .dot {width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3);}
.ui .tb-status .dot.on {background: var(--green); box-shadow: 0 0 0 4px rgba(18,183,106,.18);}
.ui .tb-actions {display: flex; align-items: center; height: 100%;}
.ui .tb-btn {width: 36px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #a8b6d9; margin-right: 6px;}
.ui .tb-btn:hover {background: rgba(255,255,255,.08); color: #fff;}
.ui .tb-sep {width: 1px; height: 18px; background: rgba(255,255,255,.1); margin: 0 6px 0 2px;}
.ui .tb-win {width: 46px; height: 100%; display: grid; place-items: center; color: #c5d0ec;}
.ui .tb-win svg {width: 12px; height: 12px; stroke-width: 1.3;}
.ui .tb-win:hover {background: rgba(255,255,255,.08);}
.ui .tb-close:hover {background: #e81123; color: #fff;}
.ui .glass {background: rgba(255,255,255,.88); backdrop-filter: blur(16px) saturate(1.6); border: 1px solid rgba(255,255,255,.7); box-shadow: var(--shadow-md);}
.ui .ui-searchBox {position: absolute; z-index: 600; top: 18px; left: calc(400px + (100% - 400px) / 2); transform: translateX(-50%); width: min(520px, calc(100% - 460px)); height: 52px; border-radius: 16px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px;}
.ui .ui-searchBox .ic {color: var(--ink-3);}
.ui .ui-searchBox input {flex: 1; border: 0; outline: 0; background: none; font-size: 14.5px; font-weight: 500; user-select: text;}
.ui .ui-searchBox input::placeholder {color: var(--ink-3); font-weight: 400;}
.ui .ui-searchBox:focus-within {box-shadow: var(--shadow-md), 0 0 0 3px rgba(31,91,255,.18);}
.ui .ui-searchResults {position: absolute; top: 60px; left: 0; right: 0; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--shadow-lg); display: none;}
.ui .ui-searchResults.open {display: block; animation: ui-pop .18s var(--ease);}
.ui .sr-item {display: flex; gap: 12px; align-items: center; padding: 10px 16px; cursor: pointer; font-size: 13.5px;}
.ui .sr-item + .sr-item {border-top: 1px solid var(--line);}
.ui .sr-item:hover, .ui .sr-item.active {background: var(--blue-50);}
.ui .sr-ic {width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; font-size: 16px; flex: none;}
.ui .sr-item.active .sr-ic {background: #fff;}
.ui .sr-txt {flex: 1; min-width: 0; display: flex; flex-direction: column;}
.ui .sr-txt b {font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ui .sr-txt b mark {background: none; color: var(--blue-500); font-weight: 800;}
.ui .sr-txt small {font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;}
.ui .sr-item em {font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ink-2); background: var(--surface-2); padding: 3px 8px; border-radius: 20px; white-space: nowrap;}
.ui .ui-searchBox.loading .ic {animation: ui-blink .8s infinite; color: var(--blue-500);}
.ui .sr-empty {padding: 14px 16px; color: var(--ink-3); font-size: 13px;}
@keyframes ui-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.ui .ui-mapTools {position: absolute; z-index: 600; right: 18px; top: 18px; border-radius: 14px; padding: 5px; display: flex; flex-direction: column; gap: 2px;}
.ui .ui-mapTools button {width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--ink);}
.ui .ui-mapTools button:hover {background: var(--blue-50); color: var(--blue-500);}
.ui .ui-mapTools button.on {background: var(--blue-500); color: #fff;}
.ui .ui-mapTools span {height: 1px; background: var(--line); margin: 3px 6px;}
.ui .ui-coordReadout {position: absolute; z-index: 600; left: 418px; bottom: 18px; height: 38px; padding: 0 14px 0 11px; border-radius: 12px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; cursor: pointer;}
.ui .ui-coordReadout svg {width: 16px; height: 16px; color: var(--blue-500);}
.ui .ui-coordReadout:hover {color: var(--ink);}
.ui .ui-trialBadge {position: absolute; z-index: 600; right: 18px; bottom: 18px; height: 56px; padding: 0 8px 0 10px; border-radius: 16px; display: flex; align-items: center; gap: 10px; text-align: left;}
.ui .ui-trialBadge.licensed .tb-cta {display: none;}
.ui .tb-ring svg {width: 36px; height: 36px; transform: rotate(-90deg);}
.ui .tb-ring circle {stroke-width: 3.2; fill: none;}
.ui .tb-ring .bg {stroke: var(--line);}
.ui .tb-ring .fg {stroke: var(--blue-500); stroke-dasharray: 97.4; transition: stroke-dashoffset .6s var(--ease);}
.ui .ui-trialBadge.low .tb-ring .fg {stroke: var(--amber);}
.ui .ui-trialBadge.out .tb-ring .fg {stroke: var(--red);}
.ui .tb-text {display: flex; flex-direction: column; line-height: 1.15;}
.ui .tb-text small {font-size: 11px; color: var(--ink-3); font-weight: 600;}
.ui .tb-text b {font-size: 16px; font-variant-numeric: tabular-nums;}
.ui .tb-cta {margin-left: 4px; padding: 9px 14px; border-radius: 11px; color: #fff; font-size: 13px; font-weight: 700; background: linear-gradient(135deg, var(--blue-400), var(--blue-500)); box-shadow: 0 6px 16px -6px rgba(31,91,255,.7);}
.ui .ui-trialBadge:hover .tb-cta {filter: brightness(1.08);}
.ui.joy .ui-trialBadge {bottom: 18px; right: 236px;}
.ui .ui-panel {position: absolute; z-index: 700; top: 18px; left: 18px; bottom: 18px; width: 382px; background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden;}
.ui .p-section {padding: 18px 20px;}
.ui .p-section + .p-section {border-top: 1px solid var(--line);}
.ui .p-grow {flex: 1; overflow-y: auto;}
.ui .p-grow::-webkit-scrollbar {width: 8px;}
.ui .p-grow::-webkit-scrollbar-thumb {background: #dfe4ef; border-radius: 8px; border: 2px solid #fff;}
.ui .p-head {display: flex; align-items: center; gap: 8px; margin-bottom: 12px;}
.ui .p-head h3 {margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 700;}
.ui .p-count {font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--ink-2); padding: 2px 8px; border-radius: 20px;}
.ui .p-foot {padding: 14px 20px 18px; border-top: 1px solid var(--line);}
.ui .dev {display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1.5px solid var(--line); cursor: pointer; transition: border-color .2s, background .2s;}
.ui .dev + .dev {margin-top: 8px;}
.ui .dev.sel {border-color: var(--blue-500); background: var(--blue-50);}
.ui .dev-ic {width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; position: relative; background: linear-gradient(160deg, var(--navy-700), var(--navy-900)); color: #fff;}
.ui .dev-ic svg {width: 20px; height: 20px;}
.ui .dev-ic i {position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid #fff; background: var(--ink-3);}
.ui .dev[data-status="ready"] .dev-ic i {background: var(--green);}
.ui .dev[data-status="connecting"] .dev-ic i {background: var(--amber); animation: ui-blink 1s infinite;}
.ui .dev[data-status="error"] .dev-ic i {background: var(--red);}
@keyframes ui-blink { 50% { opacity: .35; } }
.ui .dev-body {flex: 1; min-width: 0;}
.ui .dev-name {font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px;}
.ui .dev-name em {font-style: normal; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2);}
.ui .dev-sub {font-size: 12px; color: var(--ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ui .dev-sub.warn {color: var(--red); white-space: normal;}
.ui .dev-check {width: 22px; height: 22px; border-radius: 7px; border: 1.8px solid #cfd6e6; display: grid; place-items: center; flex: none; color: #fff;}
.ui .dev.sel .dev-check {background: var(--blue-500); border-color: var(--blue-500);}
.ui .dev-check svg {width: 14px; height: 14px; stroke-width: 2.6; opacity: 0;}
.ui .dev.sel .dev-check svg {opacity: 1;}
.ui .dev-retry {margin-top: 8px;}
.ui .dev-swatch {width: 8px; height: 8px; border-radius: 50%; display: inline-block;}
.ui .empty {text-align: center; padding: 18px 12px 10px; border: 1.5px dashed #d7deec; border-radius: 16px; color: var(--ink-2);}
.ui .empty .phone {width: 46px; height: 76px; margin: 0 auto 14px; border-radius: 12px; border: 2.5px solid var(--navy-800); position: relative;}
.ui .empty .phone::before {content: ""; position: absolute; top: 6px; left: 50%; width: 14px; height: 3px; margin-left: -7px; border-radius: 3px; background: var(--navy-800);}
.ui .empty .phone::after {content: ""; position: absolute; bottom: -24px; left: 50%; width: 2.5px; height: 20px; margin-left: -1.25px; background: var(--blue-500); animation: ui-cable 1.6s ease-in-out infinite;}
@keyframes ui-cable { 50% { transform: translateY(5px); } }
.ui .empty b {display: block; font-size: 14px; color: var(--ink); margin: 18px 0 4px;}
.ui .empty p {margin: 0 0 12px; font-size: 12.5px; line-height: 1.5;}
.ui .empty.alert {border-color: #fecdca; background: #fffbfa;}
.ui .empty.alert b {margin-top: 0;}
.ui .seg {display: flex; padding: 4px; background: var(--surface-2); border-radius: 14px; gap: 4px;}
.ui .seg button {flex: 1; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 7px; font-weight: 600; font-size: 13.5px; color: var(--ink-2); transition: background .2s, color .2s, box-shadow .2s;}
.ui .seg button:hover {color: var(--ink);}
.ui .seg button.active {background: #fff; color: var(--blue-500); box-shadow: 0 2px 8px -2px rgba(7,19,48,.15);}
.ui .seg-sm button {height: 34px; font-size: 12.5px;}
.ui .mode-pane {margin-top: 16px; animation: ui-paneIn .25s var(--ease);}
@keyframes ui-paneIn { from { opacity: 0; transform: translateY(4px); } }
.ui .hint {margin: 0 0 14px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2);}
.ui .field-label {display: block; font-size: 12px; font-weight: 700; color: var(--ink-2); margin: 18px 0 8px;}
.ui .row {display: flex; align-items: center;}
.ui .gap {gap: 8px;}
.ui .grow {flex: 1;}
.ui .muted {color: var(--ink-3);}
.ui .small {display: block; font-size: 12px; margin-top: 4px;}
.ui .target-card {border-radius: 16px; overflow: hidden; margin-bottom: 12px; background: linear-gradient(140deg, var(--navy-800), var(--navy-700)); color: #fff; min-height: 92px; position: relative;}
.ui .target-card::after {content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(61,116,255,.45), transparent 70%);}
.ui .tc-empty {height: 92px; display: flex; align-items: center; gap: 14px; padding: 0 18px; color: #a8b6d9; font-size: 13px;}
.ui .tc-pin {width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px dashed #5d74ad;}
.ui .tc-full {padding: 16px 18px; position: relative; z-index: 1;}
.ui .tc-full small {font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-300);}
.ui .tc-full h4 {margin: 4px 0 6px; font-size: 16px; line-height: 1.3; font-weight: 700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.ui .tc-full code {font: 600 12px/1 "Manrope", monospace; color: #a8b6d9; font-variant-numeric: tabular-nums;}
.ui .tc-dist {margin-left: 8px; color: var(--blue-300); font-size: 12px; font-weight: 600;}
.ui .btn {height: 40px; padding: 0 16px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 13.5px; transition: transform .15s var(--ease), filter .2s, background .2s, box-shadow .2s; white-space: nowrap;}
.ui .btn:active:not(:disabled) {transform: scale(.97);}
.ui .btn:disabled {opacity: .45; cursor: not-allowed;}
.ui .btn-lg {height: 50px; font-size: 15px; border-radius: 14px; width: 100%;}
.ui .row .btn-lg {width: auto;}
.ui .row .btn-lg.btn-soft {width: 50px; padding: 0;}
.ui .btn.sm {height: 34px; padding: 0 11px; font-size: 12.5px; border-radius: 10px;}
.ui .btn.sm svg {width: 15px; height: 15px;}
.ui .icon-only {padding: 0 !important; width: 34px; margin-left: auto;}
.ui .btn-primary {color: #fff; background: linear-gradient(135deg, var(--blue-400), var(--blue-500)); box-shadow: 0 10px 22px -10px rgba(31,91,255,.8);}
.ui .btn-primary:hover:not(:disabled) {filter: brightness(1.07);}
.ui .btn-primary svg {fill: currentColor; stroke: none;}
.ui .btn-soft {background: var(--blue-50); color: var(--blue-500);}
.ui .btn-soft:hover {background: #e2eaff;}
.ui .btn-ghost {background: var(--surface-2); color: var(--ink-2);}
.ui .btn-ghost:hover {background: #ebeff8; color: var(--ink);}
.ui .btn-reset {width: 100%; height: 44px; border-radius: 13px; color: var(--ink-2); background: var(--surface-2);}
.ui .btn-reset:hover {background: #fdeceb; color: var(--red);}
.ui .link {color: var(--blue-500); font-weight: 700; font-size: 12.5px;}
.ui .link:disabled {color: var(--ink-3); cursor: default;}
.ui .list-head {display: flex; align-items: center; justify-content: space-between; margin: 22px 0 8px;}
.ui .list-head h4 {margin: 0; font-size: 12px; font-weight: 700; color: var(--ink-2);}
.ui .place-list {display: flex; flex-direction: column; gap: 2px;}
.ui .place {display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 12px; cursor: pointer;}
.ui .place:hover {background: var(--surface-2);}
.ui .place-ic {width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); flex: none;}
.ui .place.fav .place-ic {background: #fff4e5; color: var(--amber);}
.ui .place-ic svg {width: 16px; height: 16px;}
.ui .place-body {flex: 1; min-width: 0;}
.ui .place-body b {display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ui .place-body small {font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums;}
.ui .place-x {opacity: 0; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-3);}
.ui .place:hover .place-x {opacity: 1;}
.ui .place-x:hover {background: #fff; color: var(--red);}
.ui .place-x svg {width: 14px; height: 14px;}
.ui .places-empty {font-size: 12.5px; color: var(--ink-3); padding: 8px 2px;}
.ui .wp-list {display: flex; flex-direction: column; gap: 0; margin-bottom: 12px; position: relative;}
.ui .wp {display: flex; align-items: center; gap: 10px; padding: 7px 4px; position: relative; font-size: 13px;}
.ui .wp:not(:last-child)::after {content: ""; position: absolute; left: 15px; top: 30px; bottom: -8px; border-left: 2px dotted #c7d0e4;}
.ui .wp-n {width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; background: var(--blue-50); color: var(--blue-500); margin-left: 3px; position: relative; z-index: 1;}
.ui .wp:first-child .wp-n {background: var(--blue-500); color: #fff;}
.ui .wp:last-child .wp-n {background: var(--navy-800); color: #fff;}
.ui .wp span {flex: 1; color: var(--ink-2); font-variant-numeric: tabular-nums; font-weight: 600;}
.ui .wp button {width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-3); opacity: 0;}
.ui .wp:hover button {opacity: 1;}
.ui .wp button:hover {background: var(--surface-2); color: var(--red);}
.ui .wp button svg {width: 14px; height: 14px;}
.ui .wp-empty {font-size: 12.5px; color: var(--ink-3); padding: 14px; border-radius: 12px; background: var(--surface-2); text-align: center;}
.ui .wp-sum {display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); font-weight: 600; padding: 6px 4px 0;}
.ui .chips {display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;}
.ui .chips button {height: 36px; border-radius: 10px; border: 1.5px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink-2); transition: all .15s;}
.ui .chips button:hover {border-color: #c9d3ea;}
.ui .chips button.active {border-color: var(--blue-500); background: var(--blue-50); color: var(--blue-500);}
.ui .slider-row {display: flex; align-items: center; gap: 14px; margin-top: 12px;}
.ui .slider-row input {flex: 1;}
.ui .slider-val {font-size: 12.5px; color: var(--ink-3); white-space: nowrap; min-width: 74px; text-align: right;}
.ui .slider-val b {color: var(--ink); font-size: 15px;}
.ui input[type=range] {-webkit-appearance: none; height: 6px; border-radius: 6px; background: var(--line); outline: none;}
.ui input[type=range]::-webkit-slider-thumb {-webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 5px solid var(--blue-500); box-shadow: 0 2px 8px rgba(31,91,255,.4); cursor: pointer;}
.ui .toggles {display: flex; flex-direction: column; gap: 10px; margin: 18px 0;}
.ui .toggle {display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer;}
.ui .toggle input {display: none;}
.ui .toggle span {width: 38px; height: 22px; border-radius: 22px; background: #d6dcea; position: relative; transition: background .2s; flex: none;}
.ui .toggle span::after {content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s var(--ease);}
.ui .toggle input:checked + span {background: var(--blue-500);}
.ui .toggle input:checked + span::after {transform: translateX(16px);}
.ui .route-progress {margin-bottom: 14px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2);}
.ui .rp-bar {height: 6px; border-radius: 6px; background: #dfe5f2; overflow: hidden;}
.ui .rp-bar i {display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--blue-400), var(--blue-500)); transition: width .5s linear;}
.ui .rp-meta {display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums;}
.ui .sticky-actions {position: sticky; bottom: -18px; margin: 0 -20px -18px; padding: 12px 20px 18px; background: linear-gradient(transparent, #fff 14px); z-index: 2;}
.ui .kbd-help {margin-top: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--ink-2);}
.ui .kbd-help kbd {margin-right: 4px;}
.ui .ui-joystick {position: absolute; z-index: 650; right: 22px; bottom: 22px; text-align: center;}
.ui .joy-ring {width: 190px; height: 190px; border-radius: 50%; position: relative; touch-action: none; background: radial-gradient(circle at 50% 40%, rgba(19,40,90,.92), rgba(7,19,48,.95)); box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 0 26px rgba(255,255,255,.025);}
.ui .joy-ring > span {position: absolute; font-size: 11px; font-weight: 800; color: #6f82b4;}
.ui .joy-n {top: 10px; left: 50%; transform: translateX(-50%); color: #fff !important;}
.ui .joy-s {bottom: 10px; left: 50%; transform: translateX(-50%);}
.ui .joy-e {right: 12px; top: 50%; transform: translateY(-50%);}
.ui .joy-w {left: 12px; top: 50%; transform: translateY(-50%);}
.ui .joy-knob {position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; margin: -37px; border-radius: 50%; cursor: grab; background: radial-gradient(circle at 35% 30%, #6d97ff, var(--blue-500) 60%, #1645cc); box-shadow: 0 10px 24px -6px rgba(31,91,255,.8), inset 0 2px 0 rgba(255,255,255,.3); transition: transform .25s var(--ease);}
.ui .joy-knob.drag {transition: none; cursor: grabbing;}
.ui .joy-hint {margin: 10px 0 0; font-size: 11.5px; color: var(--ink-2); background: rgba(255,255,255,.9); padding: 5px 10px; border-radius: 8px; display: inline-block;}
.ui .nd-dev {position: relative;}
.ui .nd-dev .pulse {position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: var(--c); opacity: .35; animation: ui-pulse 2s ease-out infinite;}
.ui .nd-dev .core {position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: var(--c); border: 3.5px solid #fff; box-shadow: 0 4px 12px rgba(7,19,48,.35);}
.ui .nd-dev .label {position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); white-space: nowrap; background: var(--navy-900); color: #fff; font: 700 11.5px/1 "Manrope", sans-serif; padding: 6px 9px; border-radius: 8px; box-shadow: 0 6px 16px -6px rgba(7,19,48,.6);}
.ui .nd-dev .label::after {content: ""; position: absolute; left: 50%; bottom: -4px; margin-left: -4px; border: 4px solid transparent; border-bottom: 0; border-top-color: var(--navy-900);}
@keyframes ui-pulse { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(3.4); opacity: 0; } }
.ui .nd-dev .heading {position: absolute; left: 50%; top: 50%; width: 0; height: 0;}
.ui .nd-dev .heading::before {content: ""; position: absolute; left: -9px; top: -34px; border: 9px solid transparent; border-bottom: 16px solid var(--c); border-top: 0; opacity: .85;}
.ui .nd-target {position: relative;}
.ui .nd-target svg {width: 40px; height: 52px; position: absolute; left: -20px; top: -50px; filter: drop-shadow(0 8px 10px rgba(7,19,48,.35)); stroke: none; animation: ui-drop .45s var(--ease);}
.ui .nd-target::after {content: ""; position: absolute; left: -8px; top: -3px; width: 16px; height: 6px; border-radius: 50%; background: rgba(7,19,48,.25);}
@keyframes ui-drop { from { transform: translateY(-24px); opacity: 0; } 60% { transform: translateY(2px); } }
.ui .nd-wp {width: 26px; height: 26px; margin: -13px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--blue-500); border: 2.5px solid var(--blue-500); font: 800 11px/1 "Manrope", sans-serif; box-shadow: 0 4px 10px rgba(7,19,48,.25); cursor: grab;}
.ui .nd-wp.first {background: var(--blue-500); color: #fff;}
.ui .nd-wp.last {background: var(--navy-800); border-color: var(--navy-800); color: #fff;}
.ui .toast {display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 13px; font-size: 13px; font-weight: 600; background: var(--navy-900); color: #fff; box-shadow: var(--shadow-lg); animation: ui-toastIn .3s var(--ease);}
.ui .toast i {width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none;}
.ui .toast.err i {background: var(--red);}
.ui .toast.warn i {background: var(--amber);}
.ui .toast.out {opacity: 0; transform: translateY(-6px); transition: all .3s;}
@keyframes ui-toastIn { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
@keyframes ui-fade { from { opacity: 0; } }
.ui .modal {background: #fff; border-radius: 24px; box-shadow: var(--shadow-lg); position: relative; max-height: calc(100vh - 80px); overflow: auto; animation: ui-modalIn .35s var(--ease);}
@keyframes ui-modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.ui .modal-x {position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 10px; font-size: 22px; line-height: 1; color: var(--ink-3); z-index: 2;}
.ui .modal-x:hover {background: var(--surface-2); color: var(--ink);}
.ui .paywall {width: 560px;}
.ui .paywall .modal-x {color: #a8b6d9;}
.ui .paywall .modal-x:hover {background: rgba(255,255,255,.1); color: #fff;}
.ui .pw-hero {text-align: center; padding: 34px 40px 28px; color: #fff; position: relative; overflow: hidden; background: radial-gradient(90% 120% at 50% 0%, #1d47b8 0%, var(--navy-800) 60%, var(--navy-900));}
.ui .pw-hero img {height: 54px; filter: drop-shadow(0 8px 20px rgba(61,116,255,.6));}
.ui .pw-hero h2 {margin: 14px 0 6px; font-size: 24px; font-weight: 800;}
.ui .pw-hero p {margin: 0; color: #b8c6ec; font-size: 14px;}
.ui .pw-plans {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 22px 28px 6px;}
.ui .plan {border: 1.5px solid var(--line); border-radius: 16px; padding: 16px 14px; text-align: center; cursor: pointer; position: relative; transition: all .2s;}
.ui .plan:hover {border-color: #c9d3ea;}
.ui .plan.sel {border-color: var(--blue-500); background: var(--blue-50);}
.ui .plan small {font-size: 12px; font-weight: 700; color: var(--ink-2);}
.ui .plan b {display: block; font-size: 22px; font-weight: 800; margin: 6px 0 2px;}
.ui .plan span {font-size: 11.5px; color: var(--ink-3);}
.ui .plan .tag {position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--blue-500); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 20px; white-space: nowrap;}
.ui .pw-features {list-style: none; padding: 12px 28px 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: 13px; color: var(--ink-2);}
.ui .pw-features li::before {content: "✓"; color: var(--green); font-weight: 800; margin-right: 8px;}
.ui .pw-license {margin: 20px 28px 26px; padding: 16px; border-radius: 16px; background: var(--surface-2);}
.ui .pw-license .field-label {margin-top: 0;}
.ui .pw-license input {flex: 1; height: 40px; border-radius: 11px; border: 1.5px solid var(--line); padding: 0 12px; outline: none; font-weight: 600; font-size: 13px; background: #fff; user-select: text;}
.ui .pw-license input:focus {border-color: var(--blue-500);}
.ui .pw-msg {margin: 8px 0 0; font-size: 12.5px; font-weight: 600; min-height: 1em;}
.ui .pw-msg.err {color: var(--red);}
.ui .pw-msg.ok {color: var(--green);}
.ui .pw-buy {margin: 14px 28px 0;}
.ui .help {width: 600px; padding: 30px 34px;}
.ui .help h2 {margin: 0; font-size: 22px;}
.ui .help > p {margin: 4px 0 18px;}
.ui .steps {margin: 0; padding: 0; list-style: none; counter-reset: s;}
.ui .steps li {counter-increment: s; position: relative; padding: 0 0 18px 46px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2);}
.ui .steps li b {color: var(--ink);}
.ui .steps li::before {content: counter(s); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 10px; background: var(--blue-50); color: var(--blue-500); font-weight: 800; display: grid; place-items: center;}
.ui .steps li:not(:last-child)::after {content: ""; position: absolute; left: 14px; top: 34px; bottom: 6px; width: 2px; background: var(--line);}
.ui .steps .btn {margin-top: 8px; display: flex; width: max-content;}
.ui .note {margin-top: 4px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); font-size: 12.5px; line-height: 1.6; color: var(--ink-2);}
.ui .toggle small {font-weight: 500; color: var(--ink-3); font-size: 11.5px;}
.ui .toggle.drift {margin: 14px 0 2px; align-items: flex-start; line-height: 1.35;}
.ui .toggle.drift span {margin-top: 2px;}
.ui .toggle.drift small {display: block; margin-top: 2px;}
.ui .rp-speed {margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--blue-500); background: var(--blue-50); padding: 4px 10px; border-radius: 20px; font-variant-numeric: tabular-nums;}
.ui .rp-speed::before {content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: ui-blink 1.2s infinite;}
.ui .rp-speed.wait {color: #b54708; background: #fff4e5;}
.ui .dev {align-items: flex-start;}
.ui .dev-ic, .ui .dev-check {margin-top: 2px;}
.ui .dev-model {font-size: 12px; color: var(--ink-2); font-weight: 600; margin-top: 1px;}
.ui .dev-meta {display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 2px;}
.ui .chip {display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 20px; background: var(--surface-2); color: var(--ink-2); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;}
.ui .dev.sel .chip {background: #fff;}
.ui .chip svg {width: 13px; height: 13px; stroke-width: 2.2;}
.ui .bat-ic {position: relative; width: 20px; height: 10px; border: 1.6px solid currentColor; border-radius: 3px; padding: 1px; display: inline-block;}
.ui .bat-ic::after {content: ""; position: absolute; right: -4px; top: 2px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: currentColor;}
.ui .bat-ic b {display: block; height: 100%; border-radius: 1px; background: currentColor;}
.ui .chip.bat.ok {color: #067647;}
.ui .chip.bat.mid {color: #b54708;}
.ui .chip.bat.low {color: var(--red);}
.ui .chip.bat.chg {color: #067647;}
.ui .chip.bat svg {fill: currentColor; stroke: none;}
.ui .lic-modal {width: 420px; padding: 0 0 24px; overflow: hidden;}
.ui .lic-modal .modal-x {color: #a8b6d9;}
.ui .lm-head {display: flex; align-items: center; gap: 16px; padding: 26px 28px; color: #fff; background: radial-gradient(90% 140% at 0% 0%, #1d47b8, var(--navy-800) 60%, var(--navy-900));}
.ui .lm-head img {height: 46px;}
.ui .lm-head small {color: var(--blue-300); font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;}
.ui .lm-head h2 {margin: 2px 0 0; font-size: 22px;}
.ui .lm-info {display: grid; grid-template-columns: 90px 1fr; gap: 10px; margin: 22px 28px 0; font-size: 14px;}
.ui .lm-info dt {color: var(--ink-3); font-weight: 700; font-size: 12px;}
.ui .lm-info dd {margin: 0; font-weight: 700;}
.ui .lm-note {margin: 18px 28px; font-size: 12.5px; line-height: 1.5;}
.ui .lic-modal .btn-reset {margin: 0 28px; width: calc(100% - 56px);}
.ui .pw-buy {margin: 18px 28px 0; text-align: center;}
.ui .btn-wa {width: 100%; color: #fff; background: linear-gradient(135deg, #2bd46a, #1fae55); box-shadow: 0 10px 22px -10px rgba(31,174,85,.8);}
.ui .btn-wa:hover {filter: brightness(1.05);}
.ui .btn-wa svg {width: 22px; height: 22px; fill: currentColor; stroke: none;}
.ui .pw-buy-note {margin: 8px 0 0; font-size: 12px; color: var(--ink-3);}