.city-page{min-height:100vh;padding:16px 16px 32px;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif}.city-page--intro,.city-page--quiz{background:linear-gradient(180deg,#f0f9ff,#e0f2fe 35%,#bae6fd);color:#0c4a6e}.city-page--result{background:linear-gradient(180deg,#f0f9ff,#e0f2fe 25%,#bae6fd 60%,#7dd3fc);color:#0c4a6e}.city-intro-card{max-width:360px;margin:0 auto;padding:24px 20px;background:#ffffffeb;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:24px;border:1px solid rgba(125,211,252,.5);box-shadow:0 8px 32px #38bdf81a,0 2px 12px #0000000a}.city-intro-title{margin:0 0 8px;font-size:1.4rem;font-weight:800;color:#0369a1;letter-spacing:.02em;text-align:center}.city-intro-subtitle{margin:0 0 12px;font-size:.8rem;color:#0e7490;text-align:center}.city-intro-tagline{margin:0 0 20px;font-size:.9rem;line-height:1.5;color:#0c4a6e;text-align:center}.city-intro-dimensions{display:grid;gap:10px;margin-bottom:20px}.city-dimension-item{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:10px 14px;background:#e0f2fe99;border-radius:12px;border:1px solid rgba(125,211,252,.4)}.city-dimension-name{font-weight:700;color:#0369a1;font-size:.95rem}.city-dimension-desc{font-size:.8rem;color:#0e7490}.city-intro-rules{margin-bottom:24px}.city-intro-rules-title{font-size:.85rem;font-weight:700;color:#0369a1;margin:0 0 10px}.city-intro-rule{margin:0 0 6px;font-size:.82rem;line-height:1.5;color:#0c4a6e}.city-btn-start{display:block;width:100%;padding:16px 24px;border-radius:16px;border:none;font-size:1rem;font-weight:700;font-family:inherit;cursor:pointer;background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff;box-shadow:0 4px 24px #0ea5e966;transition:transform .15s,box-shadow .2s}.city-btn-start:hover{transform:translateY(-2px);box-shadow:0 6px 28px #0ea5e973}.city-global-footer{margin-top:28px;padding-top:20px;border-top:1px solid rgba(125,211,252,.4);text-align:center;font-size:.75rem;color:#0e7490}.city-global-footer p{margin:0 0 4px}.city-global-footer--quiz{margin-top:20px;padding-top:16px}.city-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:12px 4px 0}.city-title{font-size:1.1rem;font-weight:700;color:#0369a1}.city-progress{font-size:.9rem;color:#0e7490;font-variant-numeric:tabular-nums}.city-quiz-progress-bar-wrap{height:6px;border-radius:999px;background:#fffc;overflow:hidden;margin-bottom:16px}.city-quiz-progress-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#38bdf8,#0ea5e9);transition:width .35s ease-out}.city-quiz-card{background:#fffffff2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:20px;padding:20px 18px;margin-bottom:16px;border:1px solid rgba(125,211,252,.5);box-shadow:0 4px 24px #38bdf814,0 2px 10px #00000008}.city-quiz-dimension{font-size:.78rem;color:#0e7490;margin:0 0 12px}.city-quiz-card-title{font-weight:700;font-size:1.05rem;margin-bottom:16px;line-height:1.45;color:#0c4a6e}.city-options{display:flex;flex-direction:column;gap:10px}.city-option{display:block;width:100%;text-align:left;padding:14px 16px;border-radius:14px;border:1.5px solid rgba(186,230,253,.8);background:#ffffffe6;color:#0c4a6e;font-size:.95rem;font-family:inherit;cursor:pointer;transition:border-color .2s,background .2s}.city-option:hover{background:#e0f2fecc;border-color:#38bdf880}.city-option.selected{border:2px solid #0ea5e9;background:#e0f2fef2;color:#0369a1;font-weight:600;box-shadow:0 2px 12px #0ea5e926}.city-quiz-hint{margin:16px 0 0;font-size:.78rem;color:#0e7490;text-align:center}.city-nav{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:20px;flex-wrap:wrap}.city-btn-nav{padding:14px 22px;border-radius:14px;border:1.5px solid rgba(125,211,252,.6);background:#fffffff2;color:#0369a1;font-size:.95rem;font-weight:600;font-family:inherit;cursor:pointer;transition:background .2s,border-color .2s}.city-btn-nav:hover:not(:disabled){background:#e0f2fef2;border-color:#38bdf880}.city-btn-nav:disabled{opacity:.5;cursor:not-allowed}.city-btn-nav--next{background:linear-gradient(135deg,#7dd3fc,#38bdf8);border-color:transparent;color:#fff}.city-btn-nav--next:hover:not(:disabled){box-shadow:0 4px 20px #0ea5e959}.city-btn-primary{padding:14px 28px;border-radius:14px;border:none;font-size:1rem;font-weight:700;font-family:inherit;cursor:pointer;background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff;box-shadow:0 4px 24px #0ea5e966;transition:opacity .2s,transform .15s}.city-btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 28px #0ea5e973}.city-btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.city-btn-ghost{padding:12px 20px;border-radius:14px;border:1.5px solid rgba(56,189,248,.6);background:#ffffffe6;color:#0369a1;font-size:.88rem;font-weight:600;font-family:inherit;cursor:pointer;transition:background .2s}.city-btn-ghost:hover{background:#e0f2fef2}.city-result-wrap{margin-top:8px;padding-bottom:24px}.city-result-header{text-align:center;margin-bottom:24px}.city-result-emoji{font-size:2.5rem;display:block;margin-bottom:8px}.city-result-main-title{font-size:1.4rem;font-weight:800;margin:0 0 6px;color:#0369a1}.city-result-subtitle{font-size:.8rem;color:#0e7490;margin:0 0 20px}.city-result-type-block{background:#fffffff2;border:1px solid rgba(125,211,252,.5);border-radius:20px;padding:20px;position:relative;box-shadow:0 4px 24px #38bdf814}.city-result-type-name{font-size:1.35rem;font-weight:800;color:#0369a1;margin:0 0 4px}.city-result-type-en{font-size:.9rem;color:#0e7490;margin:0 0 8px}.city-result-type-label{font-size:.7rem;color:#0e7490;display:block;margin-bottom:8px}.city-result-match-big{font-size:2.8rem;font-weight:800;background:linear-gradient(135deg,#0284c7,#0ea5e9,#38bdf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2}.city-result-match-label{font-size:.75rem;color:#0e7490;display:block;margin-top:2px}.city-result-section-title{font-size:1rem;font-weight:700;color:#0369a1;margin:0 0 8px}.city-result-section-desc{font-size:.8rem;color:#0e7490;margin:0 0 14px}.city-result-distribution{background:#ffffffe6;border-radius:16px;padding:18px;margin-bottom:20px;border:1px solid rgba(125,211,252,.5);box-shadow:0 4px 20px #38bdf80f}.city-distribution-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(186,230,253,.6);font-size:.9rem}.city-distribution-row:last-child{border-bottom:none}.city-distribution-emoji{font-size:1.1rem}.city-distribution-name{flex:1;color:#0c4a6e;font-weight:500}.city-distribution-count{font-size:.8rem;color:#0e7490}.city-distribution-pct{font-weight:700;color:#0284c7;min-width:2.5em;text-align:right}.city-result-portrait{background:#ffffffe6;border-radius:16px;padding:18px;margin-bottom:20px;border:1px solid rgba(125,211,252,.5);box-shadow:0 4px 20px #38bdf80f}.city-result-core-label,.city-result-portrait-label,.city-result-avoid-label{font-size:.78rem;font-weight:700;color:#0369a1;margin:0 0 10px}.city-result-core-traits{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.city-core-tag{font-size:.8rem;padding:6px 12px;border-radius:999px;background:#e0f2fef2;border:1px solid rgba(56,189,248,.35);color:#0369a1}.city-result-portrait-desc,.city-result-avoid-desc{font-size:.9rem;line-height:1.6;color:#0c4a6e;margin:0 0 14px}.city-result-avoid-desc{margin-bottom:0}.city-result-cities-section{margin-bottom:24px}.city-result-cities-section .city-result-section-title{margin-bottom:14px}.city-carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:8px 0 16px;margin:0 -4px;scrollbar-width:none}.city-carousel::-webkit-scrollbar{display:none}.city-card{flex:0 0 calc(100% - 24px);min-width:calc(100% - 24px);scroll-snap-align:center;scroll-snap-stop:always;background:#fffffff2;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(125,211,252,.5);border-radius:20px;padding:20px;box-shadow:0 8px 32px #38bdf81a,0 2px 12px #0000000a;position:relative}.city-card--swipe{flex:0 0 calc(100% - 28px);min-width:calc(100% - 28px)}.city-card-badge{position:absolute;top:12px;right:12px;font-size:.62rem;font-weight:700;letter-spacing:.05em;padding:5px 10px;border-radius:8px}.city-card-badge.best{background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff}.city-card-badge.high{background:#bae6fde6;color:#0369a1}.city-card-badge.alt{background:#e0f2fef2;color:#0369a1;border:1px solid rgba(56,189,248,.35)}.city-card-page-hint{font-size:.7rem;color:#0e7490;margin-bottom:8px}.city-card-title{font-size:1.22rem;font-weight:800;margin:0 0 4px;color:#0369a1}.city-card-subtitle{font-size:.85rem;color:#0e7490;margin:0 0 10px}.city-card-match{font-size:1.05rem;font-weight:700;color:#0284c7;margin-bottom:10px}.city-card-desc{font-size:.88rem;line-height:1.55;color:#0c4a6e;margin:0 0 14px}.city-tags{display:flex;flex-wrap:wrap;gap:8px}.city-tag{font-size:.72rem;padding:6px 10px;border-radius:999px;background:#e0f2fef2;border:1px solid rgba(56,189,248,.3);color:#0369a1}.city-result-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:24px}@media(min-width:480px){.city-page{padding:24px;max-width:420px;margin:0 auto}.city-intro-card{padding:28px 24px}.city-card--swipe{flex:0 0 calc(100% - 36px);min-width:calc(100% - 36px)}}@supports (padding: env(safe-area-inset-bottom)){.city-page{padding-bottom:calc(32px + env(safe-area-inset-bottom))}}:root{font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;line-height:1.5;font-weight:400;color:#0c4a6e;background-color:#f0f9ff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}#root{min-height:100vh}.not-found-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;background:linear-gradient(180deg,#f0f9ff,#e0f2fe);color:#0c4a6e}.not-found-page h2{font-size:3rem;margin:0 0 12px;color:#0284c7}.not-found-page p{margin:0;color:#0e7490}.not-found-page a{display:inline-block;margin-top:24px;padding:12px 24px;border-radius:14px;background:linear-gradient(135deg,#38bdf8,#0ea5e9);border:none;color:#fff;text-decoration:none;font-weight:600;box-shadow:0 4px 16px #0ea5e959}.not-found-page a:hover{box-shadow:0 6px 20px #0ea5e973}