.cityGateOverlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:var(--spacing-4);background-color:color-mix(in srgb,var(--color-background-default) 88%,transparent);backdrop-filter:blur(2px);border-radius:var(--radius-modal)}.cityGateCard,.cityGatePopoverCard{position:relative;display:flex;flex-direction:column;gap:var(--spacing-2);width:100%;max-width:380px;padding:var(--spacing-5);background-color:var(--color-background-default);border:1px solid var(--color-border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}.cityGateClose{position:absolute;top:var(--spacing-2);right:var(--spacing-2);display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;font-size:var(--font-size-lg);line-height:1;color:var(--color-text-light);background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-fast)}.cityGateClose:hover{color:var(--color-text-primary);background-color:var(--color-background-darker)}.cityGateTitle{margin:0;padding-right:var(--spacing-6);font-size:var(--font-size-lg);font-weight:var(--font-weight-semi-bold);color:var(--color-text-primary)}.cityGateNote{margin:0;font-size:var(--font-size-sm);line-height:1.4;color:var(--color-text-light)}.cityGateQuick{display:flex;flex-wrap:wrap;gap:var(--spacing-2);margin-top:var(--spacing-1)}.cityGateQuickBtn{padding:var(--spacing-1) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-text-primary);background-color:var(--color-background-darker);border:1px solid var(--color-border-light);border-radius:var(--radius-full);cursor:pointer;transition:var(--transition-fast)}.cityGateQuickBtn:hover{border-color:var(--color-primary);color:var(--color-primary)}.cityGateInput{width:100%;padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-base);color:var(--color-text-primary);background-color:var(--color-background-default);border:1px solid var(--color-border);border-radius:var(--radius-md)}.cityGateInput:focus{outline:none;border-color:var(--color-primary)}.cityGateHint{margin:0;font-size:var(--font-size-sm);color:var(--color-text-light)}.cityGateList{display:flex;flex-direction:column;gap:2px;max-height:220px;margin:0;padding:0;overflow-y:auto;list-style:none}.cityGateOption{display:block;width:100%;padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);text-align:left;color:var(--color-text-primary);background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-fast)}.cityGateOption:hover{background-color:var(--color-background-darker)}.cityBadgeWrap{position:relative;flex:0 0 auto}.cityBadge{display:inline-flex;align-items:center;gap:var(--spacing-1);padding:0;font-size:var(--font-size-sm);font-weight:var(--font-weight-semi-bold);line-height:1.2;color:var(--color-text-primary);white-space:nowrap;background:none;border:none;cursor:pointer;transition:var(--transition-fast)}.cityBadgeIcon{width:1em;height:1em;flex:0 0 auto}.cityBadge:hover{color:var(--color-primary)}.cityBadge:hover .cityBadgeLabel{text-decoration:underline}.cityGatePopover{position:absolute;top:calc(100% + var(--spacing-2));left:0;z-index:10;width:340px;max-width:calc(100vw - 2 * var(--spacing-4))}@media (max-width:640px){.cityGateCard,.cityGatePopoverCard{max-width:100%;padding:var(--spacing-4)}.cityGatePopover{position:fixed;top:auto;right:var(--spacing-4);bottom:var(--spacing-4);left:var(--spacing-4);width:auto}.cityGateList{max-height:40vh}}