/* HKswap: red and white brand, neon city, clear trading surfaces. */
:root{color-scheme:light;--bg:#f5f6fa;--panel:#fff;--inner:#f4f6fa;--line:#e1e6ee;--text:#172338;--muted:#8190a4;--soft:#56667d;--gold:#dd2444;--green:#09815e;--red:#da3554;--font:'DM Sans','Segoe UI','Microsoft JhengHei','Microsoft YaHei',sans-serif}
body{background:radial-gradient(ellipse at 94% 9%,#dae6ff66,transparent 40%),var(--bg)}button:hover:enabled{color:#d82343}.site-header{height:82px;background:#ffffffed;border-bottom-color:#e2e7ef}.header-inner{gap:55px}.brand{gap:11px}.brand-mark{width:40px;height:40px;border-radius:50%;box-shadow:0 2px 7px #ef183828}.brand strong{font:700 28px var(--numbers);letter-spacing:-1.5px;color:#18202c}.brand strong>span{font:500 26px var(--numbers);letter-spacing:-1.2px;color:#18202c;margin-left:0}.main-nav button{color:#65738a;font-size:14px}.main-nav .nav-active{color:#d82343}.nav-line{background:#ed2644}.preview-tag{color:#9b7080;background:#fff5f7;border-color:#f6d9e1}.network-button{color:#3b4d66}.wallet-button{border-color:#e52b49;background:#e82c49;color:#fff;box-shadow:0 4px 14px #db2a4920;font-weight:550}.wallet-button:hover{background:#ce1e3b!important;color:white!important}.ticker-bar{background:#fff;border-bottom-color:#e7ebf2}.ticker-label{color:#5c6f86}.ticker-label span{color:#8a96a7}.ticker-end{color:#8090ab}.ticker-item b{color:#34465e}.ticker-item>span{color:#52647c}.ticker-item small{color:#09815e}
.workspace{padding-top:24px}.workspace-heading{display:block;position:relative;margin-bottom:25px}.hero-artwork{position:relative;border-radius:13px;overflow:hidden;background:#14214b;box-shadow:0 10px 35px #26348b13}.harbour-art{width:100%;height:auto;aspect-ratio:3.2;max-height:370px;display:block;object-fit:cover;object-position:center 53%}.hero-artwork:after{content:'';position:absolute;inset:0;pointer-events:none;border:1px solid #19286826;border-radius:13px}.hero-identity{display:flex;align-items:center;justify-content:space-between;padding:21px 2px 0;gap:20px}.hero-brand{display:flex;align-items:center;gap:15px}.hero-brand>img{height:53px;width:53px;border-radius:50%;border:4px solid white;box-shadow:0 0 0 1px #e4e8f1}.hero-copy h1{font:650 25px var(--numbers);letter-spacing:-1px;margin:0;color:#172234;line-height:1.1}.hero-copy h1 span{font:400 13px var(--font);letter-spacing:1px;color:#64758c;margin-left:14px;vertical-align:middle}.hero-caption{color:#76869b;font-size:12px;margin:7px 0 0;letter-spacing:.4px}.hero-note{font:10px var(--numbers);letter-spacing:2px;color:#a34c68;display:flex;align-items:center;gap:8px}.hero-note:before{content:'';width:6px;height:6px;background:#e9294a;border-radius:50%;box-shadow:0 0 0 4px #ec254710}
.trading-layout{gap:24px;grid-template-columns:minmax(0,1fr) 410px}.panel{border-color:#dfe5ef;background:#fff;box-shadow:0 3px 15px #23395d03}.chart-panel{background:linear-gradient(135deg,#fff 60%,#f8faff)}.pair-title strong{color:#23324a}.pair-title strong span{color:#8794a9}.pair-title small{color:#8997aa}.chart-type{border-color:#e2e8f2;background:#fafbfe}.chart-type button{color:#8796ac}.chart-type button.active{color:#4d6ac8;background:#e8efff}.main-price strong{color:#17243b}.main-price>span:first-child{color:#8797ae}.main-price .price-live-label{color:#8998ad}.price-change small{color:#8997ac}.chart-period button{color:#8594a9}.chart-period button.active{color:#4566c3;background:#edf2ff;border-color:#d4dfff}.chart-svg text{fill:#8293ab}.chart-tooltip{background:#fff;border-color:#ccd6e9;color:#304568;box-shadow:0 5px 20px #193b7820}.chart-metrics{border-top-color:#e8edf4}.chart-metrics>div>span{color:#8290a4}.chart-metrics strong{color:#34465e;font-size:14px}.metric-last strong{color:#7d8da4}.outline-dot{border-color:#92a5bc}.section-tabs button{color:#8a96a9}.section-tabs button.active{color:#25364f}.section-note{color:#8897ab}.market-table th{color:#8a99ad;font-size:12px}.market-table td{border-top-color:#e9edf4;color:#35465e}.market-token small{color:#8b99ad;font-size:11px}.market-token strong{font-size:14px;color:#293b54}.table-trade{border-color:#e2e7f0;color:#657990;font-size:12px;background:#fafbfe}.table-trade:hover{border-color:#eaa4b2;color:#d32b48!important;background:#fff3f6}.market-table tbody tr:hover{background:#f6f8fd}.empty-table{color:#8798af}.coin{box-shadow:inset 0 0 0 1px #00000005}
.swap-panel{border-color:#d8dfed;background:linear-gradient(140deg,#fff 45%,#fcfcff);box-shadow:0 10px 38px #2847840b}.swap-panel:before{left:0;right:0;background:linear-gradient(90deg,#ed315569,#795fd86b,#438bea66)}.swap-title h2{font-size:20px;letter-spacing:1px;color:#27354b}.icon-button{color:#8798b0}.icon-button:hover{color:#344a68!important;background:#f0f4fa}.direction-tabs{background:#f2f5fa;border-color:#e3e9f2}.direction-tabs button{color:#8c9aad}.direction-tabs .buy.active{color:#0b8e65;background:#e2f4ed;border-color:#bde3d1}.direction-tabs .sell.active{color:#d52d4c;background:#ffe8ef;border-color:#f6bdca}.amount-box{border-color:#e0e6f0;background:#f7f9fc}.receive-box{background:#f3f7fd;border-color:#e1e8f3}.field-label{font-size:13px;color:#677d97}.field-label>span:last-child{font-size:12px;color:#899bb1}.amount-main input,.amount-main output{font-size:34px;color:#1e314e}.amount-bottom{font-size:12px;color:#97a5b7}.amount-shortcuts button{font-size:11px;color:#c2526a}.token-select{background:white;border-color:#e0e7f0;box-shadow:0 2px 5px #23456a05;color:#31425c}.token-select:hover{background:#f2f5fb;color:#243652!important}.reverse-row button{background:#fff;border-color:#dee6f1;box-shadow:0 0 0 5px white;color:#7790ab}.reverse-row button:hover{background:#eaf0fb;color:#406b9e!important}.quote-tag{border-color:#dce5f0;color:#9aabc0;background:#fafcff}.exchange-rate{color:#7489a2;font-size:12px;flex-wrap:wrap}.text-button{font-size:12px;color:#91a1b6}.text-button b{color:#bc5870}.swap-details{border-top-color:#e8edf4;font-size:13px}.swap-details>div>span{color:#7b8ea7}.swap-details>div>span>span{color:#adbbcc}.swap-details strong{font-size:12px;color:#3f5572}.gas-note{color:#9cacbf}.swap-submit{background:#e82c4d;border-color:#e82c4d;color:white!important;box-shadow:0 5px 20px #dc305320}.swap-submit:hover:enabled{background:#d22040;box-shadow:0 5px 20px #dc30532a}.swap-submit.buy-ready{background:#0d946b;border-color:#0d946b;color:white!important;box-shadow:0 4px 18px #12957320}.swap-submit.buy-ready:hover:enabled{background:#07865f}.swap-submit.sell-ready{background:#e52d50;border-color:#e52d50;color:white!important}.swap-submit.sell-ready:hover:enabled{background:#cb1e41}.preview-note{color:#8ba0bb;font-size:11px}.route-panel{background:#fff}.route-badge{background:#edf6f2;border-color:#d4e8df;color:#648e7a;font-size:11px}.route-path .route-venue{color:#7f719f;border-color:#e4dcf0;background:#f7f3ff}.route-venue>span{color:#967dd2}.route-connector{background:#d5dce8}.route-connector:after{border-color:#a8b7cc}.route-path>span:not(.route-connector){color:#5f7089}.route-footer{border-top-color:#e9edf5;color:#8fa0b4}.route-footer .tiny-label{color:#a3b2c5}.powered-by{color:#9ba8bc;letter-spacing:1.6px}.powered-icon{color:#dc718c}.site-footer{border-color:#e0e7ef;color:#8798ad}.footer-brand{font-size:20px;font-style:normal;color:#3c4c63;letter-spacing:-.7px}.footer-brand>span{font:500 18px var(--numbers);color:#3c4c63;margin-left:0;letter-spacing:-.5px}.site-footer button{color:#8498ae}.site-footer p{font-size:12px}.footer-brand small{color:#9eabbd}.toast{background:white;border-color:#d4deef;color:#405873;box-shadow:0 8px 30px #23487520}.toast .icon{color:#08956b}
dialog{background:#fff;border-color:#d7e0ef;border-radius:13px;color:#24354c;box-shadow:0 25px 100px #14285126}dialog::backdrop{background:#0d1f4266;backdrop-filter:blur(8px)}.modal-heading .eyebrow{color:#c7778a}.modal-heading h2{letter-spacing:.5px}.search-field{background:#f6f8fc;border-color:#dbe4f0;color:#91a2b9}.search-field input{color:#2c415f}.token-option:hover{background:#f0f5fd;color:#253954!important}.token-option small,.modal-footnote{color:#90a0b4}.token-option .token-option-balance{color:#7b8ea9}.token-network{color:#6f839f}.token-network span:last-child{color:#9cabc0}.modal-primary{background:#e83151;color:white!important}.modal-primary:hover{background:#d51e40}.modal-primary.buy-confirm{background:#0b966c}.modal-primary.sell-confirm{background:#e82e51}.setting-label span,.setting-hint{color:#879bb4}.slippage-options>button{background:#f4f7fc;border-color:#dde5f1;color:#768aa5}.slippage-options>button.active{background:#fff0f4;border-color:#e9a1b2;color:#d4284a}.slippage-options>div{background:#f9fbff;border-color:#d7e1f0}.slippage-options input{color:#3e587d}.settings-line,.confirm-amount,.history-item{border-color:#e6ebf3}.settings-line>span{color:#8a9eb7}.settings-line strong{color:#405d7e}.wallet-visual{border-color:#edb8c7;background:linear-gradient(140deg,#fff0f4,#f3f6ff);box-shadow:none;color:#e64162}.wallet-description{color:#7d92ad}.confirm-preview{color:#c35474}.confirm-amount>span,.confirm-row{color:#879bb5}.confirm-row b{color:#456285}.history-empty{color:#8fa1b9}.history-item small{color:#97a9bd}.disconnect-button{color:#d52a4e}.history-item>span{color:#098c65}
@media(min-width:1550px){.workspace{padding-top:26px}.workspace-heading{margin-bottom:27px}.harbour-art{max-height:380px}}
@media(max-width:1250px){.header-inner{gap:32px}.trading-layout{grid-template-columns:minmax(0,1fr) 375px}.header-actions{gap:15px}.hero-copy h1{font-size:24px}}
@media(max-width:960px){.trading-layout{grid-template-columns:minmax(0,1fr) 350px}.header-inner{gap:24px}.main-nav{gap:20px}.hero-note{display:none}.amount-main input,.amount-main output{font-size:30px}.harbour-art{aspect-ratio:2.9}.hero-copy h1 span{font-size:12px}}
@media(max-width:760px){.site-header{height:74px}.header-inner{gap:12px}.brand{gap:9px}.brand-mark{width:34px;height:34px}.brand strong{font-size:25px}.brand strong>span{font-size:24px}.workspace{padding-top:16px}.workspace-heading{margin-bottom:20px}.hero-artwork{border-radius:10px}.harbour-art{aspect-ratio:1.9;object-position:45% 48%}.hero-identity{padding-top:16px;gap:8px}.hero-brand{gap:10px}.hero-brand>img{height:46px;width:46px}.hero-copy h1{font-size:23px}.hero-copy h1 span{font-size:10px;margin-left:9px;letter-spacing:0}.hero-caption{font-size:10px;margin-top:6px;letter-spacing:0}.trading-layout{display:flex;gap:20px}.swap-panel{padding:23px}.amount-main input,.amount-main output{font-size:32px}.amount-shortcuts button{font-size:12px}.chart-header{padding-left:20px;padding-right:20px}.swap-details strong{font-size:13px}.price-change small{font-size:10px}.site-footer p{font-size:11px}.route-path .route-venue{font-size:11px!important}.wallet-button{padding:10px;font-size:12px}.main-price strong{font-size:40px}}
@media(max-width:380px){.brand strong>span{display:inline}.brand strong{font-size:23px}.brand strong>span{font-size:22px}.brand-mark{width:31px;height:31px}.swap-panel{padding:18px}.amount-main input,.amount-main output{font-size:29px}.main-price strong{font-size:35px}.hero-copy h1 span{font-size:9px;margin-left:6px}.hero-copy h1{font-size:21px}}