/* The refreshed treatment is intentionally limited to the proxy marketplace. */ #page-shop{padding:24px clamp(16px,2vw,30px) 65px} #page-shop .legal-notice{margin-bottom:16px;padding:11px 14px;border:1px solid #e5d1b2;border-radius:10px;color:#80502c;background:#fff4e5;box-shadow:0 5px 14px rgba(117,79,41,.05)} #page-shop .legal-notice span{width:27px;height:27px;display:grid;place-items:center;border-radius:9px;background:#ffe1bd;color:#9b5425} #page-shop .purchase-layout{grid-template-columns:minmax(0,1fr) 245px;gap:15px} #page-shop .purchase-main,#page-shop .market-feed{border:1px solid var(--line);border-radius:17px;background:var(--card);box-shadow:0 7px 20px rgba(34,49,43,.045)} #page-shop .purchase-title{position:relative;min-height:108px;padding:19px 23px;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(circle at 92% 20%,rgba(186,214,111,.22),transparent 34%),linear-gradient(135deg,#fffdf7,#f2f0e6)} #page-shop .purchase-title::after{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(var(--orange),var(--lime))} #page-shop .purchase-title>div{position:relative;z-index:1} #page-shop .soft-icon{width:58px;height:58px;border-radius:15px 7px 15px 7px;background:#fff0e5;transform:rotate(-3deg);font-size:22px} #page-shop .purchase-title p{color:var(--orange);font-size:9px;letter-spacing:.13em} #page-shop .purchase-title h2{color:var(--ink);font-family:var(--font-display);font-size:clamp(24px,2.7vw,34px);font-weight:750;letter-spacing:-.05em} #page-shop .purchase-title small{color:var(--muted);font-size:10px} #page-shop .inline-buy-grid{padding:14px;gap:14px} #page-shop .inline-buy-card{position:relative;padding:17px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(145deg,#fffefb,#faf9f2);box-shadow:0 7px 20px rgba(34,49,43,.045);overflow:hidden;transition:.25s} #page-shop .inline-buy-card:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(34,49,43,.1)} #page-shop .inline-buy-card::before{content:"";position:absolute;inset:0 100% auto 0;height:4px;background:var(--orange);transition:.25s} #page-shop .inline-buy-card:hover::before{right:0} #page-shop .inline-buy-card h3{color:var(--ink);font-family:var(--font-display);font-size:18px;font-weight:750} #page-shop .inline-buy-card .benefits{color:var(--muted);font-size:10px} #page-shop .inline-buy-card .benefits li::before{color:var(--orange)} #page-shop .market-field{grid-template-columns:92px 1fr;color:var(--muted);font-size:10px} #page-shop .market-field input,#page-shop .market-field select{height:34px;border:1px solid var(--line);border-radius:8px;background:#fffefb;color:var(--ink);font-size:11px} #page-shop .market-field input:focus,#page-shop .market-field select:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(233,101,45,.1)} #page-shop .card-total{border-top:1px solid #e7e4d9} #page-shop .card-total small{color:var(--muted)} #page-shop .card-total b{color:var(--orange);font-family:var(--font-display);font-size:20px} #page-shop .inline-buy-button{border-radius:9px;background:var(--orange);box-shadow:0 8px 18px rgba(233,101,45,.22);font-size:11px} #page-shop .inline-buy-button:hover{background:#d55322} #page-shop .rotating-area{border-top:1px solid var(--line);background:#f7f6ef} #page-shop .subhead b{color:var(--ink);font-family:var(--font-display);font-size:17px} #page-shop .subhead small{color:var(--muted)} #page-shop .rotate-card{border:1px solid var(--line);border-radius:12px;background:var(--card)} #page-shop .rotate-card h3{color:var(--ink);font-family:var(--font-display)} #page-shop .rotate-card p{color:var(--muted)} #page-shop .rotate-fields input{border-color:var(--line);background:#fffefb} #page-shop .rotate-card .inline-buy-button{background:var(--forest-2);box-shadow:0 7px 14px rgba(31,92,78,.18)} #page-shop .market-feed{background:linear-gradient(145deg,#fffefb,#f7f6ed);overflow:hidden} #page-shop .feed-head{height:47px;background:var(--forest);font-size:10px} #page-shop .feed-head span{color:var(--lime)} #page-shop .feed-group{border-color:var(--line)} #page-shop .feed-group h3{color:var(--forest);font-family:var(--font-display);font-size:13px} #page-shop .feed-group div{border-color:#d7dfcf} #page-shop .feed-group div::before{background:var(--lime)} #page-shop .feed-group b{color:var(--ink)} #page-shop .feed-group strong{color:var(--orange)} #page-shop .feed-group span{color:var(--muted)} #page-shop .purchase-title{min-height:74px;padding-top:15px;padding-bottom:15px} #page-shop .purchase-title h2,#page-shop .purchase-title small{display:none} #page-shop .purchase-title>div{align-items:center;min-height:42px} #page-shop .purchase-title .soft-icon{width:42px;height:42px;font-size:17px} #page-shop .purchase-title{min-height:82px;border-bottom-color:#e3dfd5;background:#fffdf8} #page-shop .purchase-title::after,#page-shop .inline-buy-card::before{display:none} #page-shop .purchase-title p{margin:0;color:var(--forest);font-size:16px;font-weight:800;letter-spacing:.11em;line-height:1.15} #page-shop .purchase-main,#page-shop .market-feed{border-color:#ddd9cf;box-shadow:0 5px 16px rgba(34,49,43,.035)} #page-shop .inline-buy-card,#page-shop .rotate-card{border-color:#e1ded5;background:#fffefb;box-shadow:none} #page-shop .inline-buy-card:hover{transform:none;border-color:#d4d1c8;box-shadow:0 5px 15px rgba(34,49,43,.05)} #page-shop .market-field input,#page-shop .market-field select,#page-shop .rotate-fields input{border-color:#dedbd2;box-shadow:none} #page-shop .market-field input:focus,#page-shop .market-field select:focus{border-color:#9aa79d;box-shadow:0 0 0 3px rgba(31,92,78,.08)} #page-shop .card-total{border-top-color:#ece9e0} #page-shop .card-total b{font-size:clamp(16px,1.3vw,18px);line-height:1.1;white-space:nowrap} #page-shop .card-total small{font-size:9px} #page-shop .rotating-area{border-top-color:#e7e3da;background:#fbfaf6} #page-shop .feed-group{border-color:#e7e3da} @media(max-width:1100px){#page-shop .purchase-layout{grid-template-columns:1fr}#page-shop .market-feed{display:grid;grid-template-columns:repeat(3,1fr)}#page-shop .feed-head{grid-column:1/-1}#page-shop .feed-group{border-bottom:0;border-right:1px solid var(--line)}#page-shop .feed-group:last-child{border-right:0}} @media(max-width:760px){#page-shop{padding:15px 12px 76px}#page-shop .legal-notice{font-size:10px}#page-shop .purchase-title h2{font-size:19px}#page-shop .soft-icon{width:45px;height:45px;font-size:17px}#page-shop .inline-buy-grid,#page-shop .inline-rotate-grid{grid-template-columns:1fr}#page-shop .inline-buy-card{padding:14px}#page-shop .market-feed{display:block}#page-shop .feed-group{border-right:0;border-bottom:1px solid var(--line)}} /* Compact, high-contrast account modals. */ .auth-modal,.account-dialog{width:min(380px,calc(100% - 28px));max-width:380px;border:1px solid #dfd4c5;border-radius:14px;background:transparent;box-shadow:none;overflow:visible} .auth-card,.password-modal,.forgot-modal{border:1px solid #e4d9cc;border-radius:14px;background:#fffdf8;color:#24362f;box-shadow:0 18px 48px rgba(45,35,24,.2)} .auth-card{padding:20px 22px 17px} .auth-heading{gap:10px;margin-bottom:15px;padding-right:22px} .auth-logo{width:38px;height:38px;flex-basis:38px;padding:6px;border-radius:10px;background:#ffeadb;border:1px solid #f2c9ad} .auth-kicker{margin-bottom:3px;color:#e9652d;font-size:9px;letter-spacing:.14em} .auth-heading h2{color:#193b31;font-size:22px;line-height:1.12;letter-spacing:-.025em} .auth-modal .auth-form{gap:10px} .auth-modal .auth-form label,.password-modal label,.forgot-modal label{color:#40564c;font-size:10px;line-height:1.25;letter-spacing:.02em} .auth-modal .auth-form input,.password-modal input,.forgot-modal input{height:41px;margin-top:5px;padding:0 11px;border:1px solid #d7d8cf;border-radius:8px;background:#fff;color:#20362e;font:600 12px var(--font-ui);transition:border-color .15s,box-shadow .15s} .auth-modal .auth-form input:focus,.password-modal input:focus,.forgot-modal input:focus{border-color:#e9652d;box-shadow:0 0 0 3px rgba(233,101,45,.12)} .auth-modal .button,.password-modal footer .button,.forgot-modal footer .button{min-height:40px;border-radius:8px;font-size:11px} .auth-modal .auth-form .button{margin-top:3px} .forgot-password{margin:9px 0 0;color:#b15427;font-size:10px} .auth-secondary{gap:5px;margin-top:10px;padding-top:10px;color:#718078;font-size:10px} .auth-switch{font-size:10px;color:#e9652d} .login-hint{margin:10px 0 0;color:#718078;font-size:9px;line-height:1.4} .password-modal>header,.forgot-modal>header{padding:16px 18px 7px} .password-modal h3,.forgot-modal h3{color:#193b31;font-size:20px;line-height:1.1} .password-modal .eyebrow,.forgot-modal .eyebrow{color:#e9652d;font-size:8px;letter-spacing:.16em} .icon-button,.auth-modal .modal-close{width:29px;height:29px;min-height:29px;border:1px solid #e6d8ca;color:#6b746b;background:#fff8ef;font-size:20px;line-height:1} .password-modal form,.forgot-modal form{gap:8px;padding:8px 18px 17px} .reset-note{padding:7px 9px;border:1px solid #f0dfca;border-radius:7px;background:#fff5e8;color:#8a684d;font-size:9px;line-height:1.35} .password-modal footer,.forgot-modal footer{gap:7px;margin-top:2px} .button-subtle{border:1px solid #d8ded7!important;color:#53675d;background:#f5f7f2} .button-subtle:hover{background:#eaf0e9} @media(max-width:760px){.auth-modal,.account-dialog{width:min(350px,calc(100% - 20px))}.auth-card{padding:18px 16px 15px}.auth-heading{margin-bottom:13px}.auth-heading h2{font-size:20px}.password-modal>header,.forgot-modal>header{padding:14px 15px 6px}.password-modal form,.forgot-modal form{padding:7px 15px 14px}.auth-modal .auth-form input,.password-modal input,.forgot-modal input{height:39px;font-size:11px}} /* Let the account forms follow the reduced visual viewport in mobile WebViews. */ @media (max-width: 760px) { :root { --mobile-visual-height: 100vh; --mobile-visual-height: 100svh; --mobile-visual-height: 100dvh; --mobile-keyboard-inset: 0px; } html.keyboard-focus #authDialog[open] { width: 100%; max-width: none; height: var(--mobile-visual-height); min-height: var(--mobile-visual-height); max-height: var(--mobile-visual-height); margin: 0; padding: 8px 10px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: grid; align-content: start; } html.keyboard-focus #authDialog .auth-card { width: min(350px, 100%); margin: 0 auto; } html.keyboard-focus #passwordDialog[open], html.keyboard-focus #forgotDialog[open] { max-height: calc(var(--mobile-visual-height) - 16px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } html.keyboard-focus #passwordDialog .password-modal, html.keyboard-focus #forgotDialog .forgot-modal { max-height: calc(var(--mobile-visual-height) - 16px); overflow-y: auto; -webkit-overflow-scrolling: touch; } html.keyboard-focus #authDialog::backdrop, html.keyboard-focus #passwordDialog::backdrop, html.keyboard-focus #forgotDialog::backdrop { height: var(--mobile-visual-height); } html.keyboard-focus #authDialog input, html.keyboard-focus #authDialog textarea, html.keyboard-focus #authDialog select, html.keyboard-focus #passwordDialog input, html.keyboard-focus #passwordDialog textarea, html.keyboard-focus #passwordDialog select, html.keyboard-focus #forgotDialog input, html.keyboard-focus #forgotDialog textarea, html.keyboard-focus #forgotDialog select { scroll-margin-block: 20px; } } /* CloudSale VPS marketplace */ .support-fab{position:relative;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:#b96835;color:#fff;box-shadow:0 8px 18px rgba(101,57,28,.24);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}.support-fab:hover,.support-fab:focus-visible{transform:translateY(-2px);box-shadow:0 12px 24px rgba(101,57,28,.3);outline:3px solid rgba(185,104,53,.2)}.support-bubble-icon{position:relative;display:block;width:22px;height:17px;border:2px solid currentColor;border-radius:10px}.support-bubble-icon:before{content:"";position:absolute;left:2px;bottom:-6px;width:7px;height:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:skewY(-34deg);background:#b96835}.support-bubble-icon:after{content:"•••";position:absolute;left:3px;top:-8px;font-size:13px;letter-spacing:0}.support-fab .support-badge{position:absolute;right:-2px;top:-2px;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#263f3a;color:#fff;font-size:10px;line-height:1} .support-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#b95f2b;color:#fff;font-size:10px;line-height:1;margin-left:auto}.support-shell{display:grid;grid-template-columns:330px minmax(0,1fr);min-height:560px;border:1px solid var(--line,#d8d3c7);border-radius:18px;background:rgba(255,255,255,.66);box-shadow:0 18px 40px rgba(48,42,29,.08);overflow:hidden}.support-conversations{border-right:1px solid var(--line,#d8d3c7);background:#f7f3ea}.support-conversations>header,.support-thread-head{display:flex;align-items:center;gap:12px;padding:20px 22px;border-bottom:1px solid var(--line,#d8d3c7)}.support-conversations h2{font-size:18px;margin:0;flex:1}.support-conversation-list{padding:10px}.support-conversation{position:relative;width:100%;display:flex;align-items:center;gap:10px;padding:14px 12px;border:1px solid transparent;border-radius:12px;background:transparent;color:inherit;text-align:left;cursor:pointer}.support-conversation:hover,.support-conversation:focus-visible{background:#eee8dc;border-color:#d4c8b6;outline:none}.support-conversation.active{background:#fff;border-color:#c9824c;box-shadow:0 6px 16px rgba(93,58,29,.08)}.support-conversation.unread strong{font-weight:800}.support-conversation-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#e6d9c6;color:#8a4c27}.support-conversation span:nth-child(2){display:grid;min-width:0;gap:3px;flex:1}.support-conversation strong,.support-conversation small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.support-conversation small{font-size:11px;color:#857e73}.support-conversation i{font-size:9px;font-style:normal;color:#958b7d}.support-dot{position:absolute;right:10px;bottom:8px;min-width:17px;padding:3px 5px;border-radius:999px;background:#b95f2b;color:white;font-size:10px;text-align:center}.support-thread{display:flex;flex-direction:column;min-width:0;background:#fffdf9}.support-thread-head{padding:18px 24px}.support-thread-head h2{margin:2px 0;font-size:19px}.support-thread-head small{color:#8b8479}.support-thread-head select{margin-left:auto}.support-back{display:none;border:0;background:transparent;font-size:22px;color:#8a4c27}.support-messages{display:flex;flex:1;flex-direction:column;gap:12px;padding:24px;overflow:auto;background:linear-gradient(180deg,#fffdf9,#f7f2e9)}.support-message{display:flex;flex-direction:column;max-width:min(78%,560px);gap:5px}.support-message.user{align-self:flex-end;align-items:flex-end}.support-message.staff{align-self:flex-start;align-items:flex-start}.support-message article{}.support-message>div{padding:11px 14px;border-radius:14px;background:#eee8dc;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}.support-message.user>div{background:#b96835;color:#fff;border-bottom-right-radius:4px}.support-message.staff>div{border-bottom-left-radius:4px}.support-message time{font-size:10px;color:#958c7d}.support-compose{display:flex;gap:10px;padding:16px 20px;border-top:1px solid var(--line,#d8d3c7);background:#fff}.support-compose textarea{flex:1;resize:none;border:1px solid #d5cabb;border-radius:12px;padding:11px 13px;font:inherit;min-height:44px}.support-compose textarea:focus{outline:2px solid rgba(185,95,43,.25);border-color:#b96835}.support-thread-empty,.support-empty-list{display:grid;place-items:center;text-align:center;align-content:center;gap:8px;color:#8c8376;min-height:220px;padding:30px}.support-thread-empty span,.support-empty-list span{font-size:32px;color:#bb8a62}.support-thread-empty h2,.support-thread-empty p,.support-empty-list p{margin:0}.support-empty-list small{font-size:12px}.support-new-dialog textarea{width:100%;resize:vertical;border:1px solid #d5cabb;border-radius:10px;padding:10px;font:inherit} @media(max-width:760px){.support-shell{display:block;min-height:calc(100vh - 190px);border-radius:14px}.support-conversations{border-right:0}.support-thread{display:none;min-height:calc(100vh - 190px)}.support-thread.is-open{display:flex}.support-thread.is-open~*{}.support-shell:has(.support-thread.is-open) .support-conversations{display:none}.support-back{display:block}.support-message{max-width:88%}.support-compose{padding:12px}.support-compose button{padding-inline:14px}.support-thread-head{padding:14px 16px}} /* Same glass mobile taskbar treatment as AVT3X Web Fishing. */ @media(max-width:760px){.page{padding-bottom:calc(96px + env(safe-area-inset-bottom))}.mobile-nav{position:fixed;z-index:100;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(7px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:auto;min-height:54px;padding:4px;border:1px solid rgba(113,126,116,.34);border-radius:15px;background:rgba(255,253,247,.92);box-shadow:0 12px 30px rgba(26,43,35,.22),0 2px 6px rgba(26,43,35,.1);backdrop-filter:blur(14px) saturate(1.15)}.mobile-nav button{position:relative;display:grid;grid-template-rows:18px auto;place-items:center;align-content:center;gap:2px;min-width:0;min-height:44px;padding:3px 5px;border:0;border-radius:10px;background:transparent;color:#3973a4;font:700 8px/1.05 "Segoe UI",Tahoma,sans-serif;white-space:normal}.mobile-nav button span,.mobile-nav button svg{display:block;width:18px;height:18px;font-size:18px;fill:currentColor}.mobile-nav button small{display:block;overflow:hidden;max-width:100%;color:inherit;font-size:8px;white-space:nowrap;text-overflow:ellipsis}.mobile-nav button.active{background:#1682da;color:#fff;box-shadow:0 5px 12px rgba(22,130,218,.27)}.mobile-nav .support-badge{position:absolute;right:4px;top:2px;min-width:17px;height:17px;margin:0;border:2px solid #f4f1e7;background:#d84f25;color:#fff;font-size:8px}.sidebar .support-fab{display:none}} .vps-page .page-heading{align-items:flex-end}.vps-toolbar{display:flex;gap:12px;align-items:center;margin:24px 0}.vps-toolbar select{min-width:260px}.vps-api-status{font-size:.82rem;color:var(--muted,#74808d)}.vps-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px}.vps-plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}.vps-plan-card,.vps-orders-panel{background:var(--surface,#fff);border:1px solid var(--line,#e6e8eb);border-radius:18px;padding:20px;box-shadow:0 10px 28px rgba(35,42,50,.06)}.vps-plan-card h3{margin:10px 0 6px}.vps-plan-card p{min-height:42px;color:var(--muted,#74808d);font-size:.9rem}.vps-plan-card dl{display:flex;gap:12px;margin:18px 0}.vps-plan-card dt{font-size:.68rem;color:var(--muted,#74808d);text-transform:uppercase}.vps-plan-card dd{margin:2px 0 0;font-weight:700}.vps-card-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px}.vps-card-bottom strong{font-size:1.05rem}.vps-card-bottom small{display:block;font-size:.7rem;color:var(--muted,#74808d);font-weight:400}.vps-orders-panel header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.vps-orders-panel h2{margin:2px 0}.vps-order-list{display:grid;gap:10px}.vps-order-card{border:1px solid var(--line,#e6e8eb);border-radius:12px;padding:12px}.vps-order-card>div:first-child{display:flex;justify-content:space-between;gap:8px}.vps-order-card p{margin:7px 0 3px;font-size:.84rem}.vps-order-card small{color:var(--muted,#74808d);font-size:.75rem}.status-pill{font-size:.68rem;padding:3px 7px;border-radius:20px;background:#e7f7ef;color:#147a4b}.vps-order-actions{display:flex;gap:6px;margin-top:10px}.vps-order-actions button{border:1px solid var(--line,#e6e8eb);background:transparent;border-radius:8px;padding:6px 8px;font-size:.72rem;cursor:pointer}.vps-order-actions button:hover{border-color:#e99545;color:#c56610}.check-row{display:flex;align-items:center;gap:8px}.warning-note{color:#a95720;background:#fff4e9;padding:10px;border-radius:8px;font-size:.85rem} .desktop-chat-fab{position:fixed;z-index:50;right:24px;bottom:24px;width:58px;height:58px;display:grid;place-items:center;padding:0;border:3px solid rgba(255,255,255,.9);border-radius:50%;color:#fff;background:linear-gradient(145deg,#df8849,#bd572e);box-shadow:0 16px 34px rgba(50,58,53,.25),0 5px 12px rgba(126,62,30,.25);cursor:pointer}.desktop-chat-fab svg{width:27px;height:27px;fill:currentColor}.desktop-chat-fab .support-badge{position:absolute;right:-6px;top:-6px;min-width:18px;height:18px;display:grid;place-items:center;border:2px solid #f4f1e7;border-radius:999px;background:#d84f25;color:#fff;font-size:9px}.sidebar .support-fab{display:none}.upnl-nav .hidden{display:none!important} .support-page{display:none!important}.support-page.support-widget-open{position:fixed;z-index:140;display:block!important;inset:5vh 5vw;padding:28px;max-width:none;margin:0;border:1px solid var(--market-line,#d8d5ca);border-radius:18px;background:var(--market-bg,#f3f1e9);box-shadow:0 26px 70px rgba(20,35,28,.3);overflow:auto}.support-page.support-widget-open:before{content:"";position:fixed;z-index:-1;inset:0;background:rgba(12,28,23,.42)}.support-widget-actions{display:flex;align-items:center;gap:8px}.support-widget-actions .icon-button{width:38px;height:38px} @media(max-width:760px){.upnl-nav{display:none!important}.desktop-chat-fab{display:none!important}.mobile-nav{display:grid!important;position:fixed!important;z-index:100!important;left:8px!important;right:8px!important;bottom:max(7px,env(safe-area-inset-bottom))!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;min-height:58px!important;padding:4px!important;border:1px solid #b8c5d1!important;border-radius:15px!important;background:rgba(255,255,255,.96)!important;box-shadow:0 12px 30px rgba(26,43,35,.22)!important}.mobile-nav button{display:grid!important;visibility:visible!important;opacity:1!important}.mobile-nav button.active{background:#1682da!important;color:#fff!important}.mobile-nav .support-badge{display:grid!important}} @media(max-width:760px){.support-page.support-widget-open{inset:8px;padding:14px;border-radius:16px}.support-page.support-widget-open .page-heading{display:flex!important;margin-bottom:12px;padding-bottom:12px}.support-page.support-widget-open .page-heading h1{font-size:27px!important}.support-page.support-widget-open .support-shell{min-height:calc(100dvh - 118px)}} /* Widget mode mirrors the compact AVT3X chat window. */ .support-page.support-widget-open{inset:auto;right:24px;bottom:92px;top:auto;left:auto;width:min(390px,calc(100vw - 24px));height:min(570px,calc(100dvh - 110px));padding:0;border:1px solid #bfc5bb;border-radius:18px;background:#fffdf7;box-shadow:0 26px 70px rgba(36,51,45,.3);overflow:hidden}.support-page.support-widget-open:before{display:none}.support-page.support-widget-open .page-heading{display:none!important}.support-page.support-widget-open .support-shell{display:block;height:100%;min-height:0;border:0;border-radius:0;box-shadow:none;background:#fffdf7}.support-page.support-widget-open .support-conversations{display:none}.support-page.support-widget-open .support-thread{display:flex;height:100%;min-height:0}.support-page.support-widget-open .support-thread-head{min-height:68px;display:grid;grid-template-columns:40px minmax(0,1fr) 34px;gap:10px;padding:10px 12px;border-bottom:1px solid #d9d7cd;background:#f3f0e6}.support-page.support-widget-open .support-thread-head:before{content:"4U";width:40px;height:40px;display:grid;place-items:center;border-radius:7px;color:#fff;background:#d96c35;font-size:12px;font-weight:900}.support-page.support-widget-open .support-thread-head h2{margin:0;font:800 14px Bahnschrift,"Segoe UI",sans-serif}.support-page.support-widget-open .support-thread-head h2:after{content:"Trò chuyện với quản trị viên";display:block;margin-top:3px;color:#68726c;font:600 10px Bahnschrift,"Segoe UI",sans-serif}.support-page.support-widget-open .support-thread-head .eyebrow,.support-page.support-widget-open .support-thread-head small{display:none}.support-page.support-widget-open .support-thread-head:after{content:"×";grid-column:3;grid-row:1;width:34px;height:34px;display:grid;place-items:center;border:1px solid #cfcdc2;border-radius:7px;color:#526059;background:#fffdf7;font:22px Arial;cursor:pointer}.support-page.support-widget-open .support-back,.support-page.support-widget-open .support-thread-head select{display:none}.support-page.support-widget-open .support-messages{padding:14px 12px;gap:8px;background:linear-gradient(rgba(255,253,247,.93),rgba(248,246,238,.94))}.support-page.support-widget-open .support-message{max-width:82%;gap:3px}.support-page.support-widget-open .support-message>div{padding:9px 11px;border:1px solid #d8d6cc;border-radius:8px 8px 8px 2px;color:#34433c;background:#fff;font-size:12px;line-height:1.45}.support-page.support-widget-open .support-message.user>div{border-color:#bd592a;border-radius:8px 8px 2px 8px;color:#fff;background:#d96c35}.support-page.support-widget-open .support-compose{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:6px;padding:8px 10px;border-top:1px solid #d9d7cd;background:#fffdf7}.support-page.support-widget-open .support-compose textarea{height:42px;min-height:42px;padding:0 12px;border:1px solid #c8c8bd;border-radius:8px;background:#fff;font:650 12px/42px Bahnschrift,"Segoe UI",sans-serif}.support-page.support-widget-open .support-compose button{width:42px;height:42px;padding:0;border:1px solid #b64c1d;border-radius:8px;background:#d96c35;font-size:0}.support-page.support-widget-open .support-compose button:after{content:"➤";font-size:18px;color:#fff}.support-page.support-widget-open .support-thread-head:after{pointer-events:auto}.support-page.support-widget-open .support-thread-head:after{position:relative} .support-widget-iframe{display:none}.support-page.support-widget-open .support-widget-iframe{display:block;width:100%;height:100%}.support-page.support-widget-open .support-widget-iframe iframe{display:block;width:100%;height:100%;border:0;background:#fffdf7}.support-page.support-widget-open .support-shell{display:none!important} @media(max-width:760px){ .support-page.support-widget-open{top:0;right:0;bottom:0;left:0;width:auto;height:auto;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none} .support-page.support-widget-open .support-widget-iframe{height:100%;min-height:0} .support-page.support-widget-open .support-widget-iframe iframe{height:100%;min-height:0} .support-page.support-widget-open .support-shell{height:100%;min-height:0} } @media(max-width:900px){.vps-layout{grid-template-columns:1fr}.vps-orders-panel{order:-1}.vps-toolbar{flex-wrap:wrap}} /* AVT3X authentication forms: keep all account flows on the same warm surface. */ #authDialog[open],#passwordDialog[open],#forgotDialog[open]{border:0;padding:0;background:transparent;overflow:visible} #authDialog[open]{position:fixed;inset:0;width:100vw;max-width:none;height:100vh;max-height:none;margin:0;display:grid;place-items:center} #authDialog::backdrop,#passwordDialog::backdrop,#forgotDialog::backdrop{background:rgba(24,35,29,.56);backdrop-filter:blur(3px)} #authDialog .auth-card{position:relative;width:min(410px,calc(100vw - 28px));padding:25px;border:1px solid rgba(112,80,34,.28);border-radius:17px;background:#fff8e8;color:#2f3028;box-shadow:0 26px 65px rgba(40,49,35,.28),0 3px 8px rgba(61,49,27,.12)} #authDialog .auth-card:before{content:"";position:absolute;inset:0 15% auto;height:3px;border-radius:0 0 5px 5px;background:linear-gradient(90deg,transparent,#d66b2c 20%,#e8a159 80%,transparent)} #authDialog .auth-card .modal-close{position:absolute;z-index:2;top:10px;right:10px;width:30px;height:30px;border:1px solid rgba(112,80,34,.18);border-radius:8px;color:#61533d;background:rgba(255,255,255,.5);font-size:20px;line-height:1;cursor:pointer} #authDialog .auth-heading{gap:11px;margin-bottom:18px} #authDialog .auth-logo{width:45px;height:45px;flex-basis:45px;padding:4px;border:1px solid #c99d59;border-radius:12px;background:#f1dfad;box-shadow:0 5px 12px rgba(103,72,24,.16)} #authDialog .auth-kicker{color:#a45524;font-size:9px;letter-spacing:.15em} #authDialog .auth-heading h2{color:#3b372b;font-size:24px;letter-spacing:-.03em} #authDialog .auth-form{gap:12px} #authDialog .auth-form label{color:#514c3c;font-size:11px} #authDialog .auth-form input{height:45px;margin-top:5px;border:1px solid #c9b992;border-radius:9px;color:#34342b;background:#fffdf8;box-shadow:inset 0 1px 2px rgba(94,73,36,.06)} #authDialog .auth-form input:focus{border-color:#d66b2c;box-shadow:0 0 0 3px rgba(214,107,44,.13)} #authDialog .auth-form .button-primary,.password-modal .button-primary,.forgot-modal .button-primary{min-height:44px;border:1px solid #b9511f;border-radius:9px;color:#fff;background:linear-gradient(180deg,#df7a3d,#c55b24);box-shadow:0 8px 17px rgba(174,73,27,.22)} #authDialog .forgot-password,#authDialog .auth-switch{color:#945020} #authDialog .auth-secondary{border-top-color:rgba(110,85,42,.18);color:#67604d} #passwordDialog[open],#forgotDialog[open]{display:grid;place-items:center;min-width:100vw;min-height:100vh} #passwordDialog .password-modal,#forgotDialog .forgot-modal{width:min(390px,calc(100vw - 28px));border:1px solid rgba(112,80,34,.28);border-radius:16px;color:#2f3028;background:#fff8e8;box-shadow:0 26px 65px rgba(40,49,35,.28),0 3px 8px rgba(61,49,27,.12);overflow:hidden} #passwordDialog .password-modal>header,#forgotDialog .forgot-modal>header{padding:16px 18px 13px;border-bottom:1px solid #e0cca1;background:#f1dfad} #passwordDialog .eyebrow,#forgotDialog .eyebrow{color:#a45524;font-size:9px;letter-spacing:.13em} #passwordDialog h3,#forgotDialog h3{margin-top:3px;color:#3b372b;font-size:21px} #passwordDialog .icon-button,#forgotDialog .icon-button{width:31px;height:31px;min-height:31px;border:1px solid rgba(112,80,34,.18);border-radius:8px;color:#61533d;background:rgba(255,255,255,.5);font-size:19px} #passwordDialog form,#forgotDialog form{gap:9px;padding:16px 18px 18px} #passwordDialog label,#forgotDialog label{color:#514c3c;font-size:11px} #passwordDialog input,#forgotDialog input{height:42px;margin-top:5px;border:1px solid #c9b992;border-radius:9px;color:#34342b;background:#fffdf8} #passwordDialog input:focus,#forgotDialog input:focus{border-color:#d66b2c;outline:0;box-shadow:0 0 0 3px rgba(214,107,44,.13)} #passwordDialog footer,#forgotDialog footer{gap:8px;margin-top:4px} #passwordDialog .button-subtle,#forgotDialog .button-subtle,#forgotDialog #sendResetCode{border:1px solid #d0bd98;border-radius:9px;color:#765b35;background:#f5ead3;box-shadow:inset 0 1px 0 rgba(255,255,255,.72)} #passwordDialog .button-subtle:hover,#forgotDialog .button-subtle:hover,#forgotDialog #sendResetCode:hover{border-color:#bd9c65;background:#eddbb7} #forgotDialog .reset-note{margin:1px 0 2px;padding:8px 10px;border:1px solid #d8d7cf;border-radius:8px;color:#59665f;background:#eef2ed;font-size:10px;line-height:1.35} @media(max-width:520px){#authDialog .auth-card{width:calc(100vw - 20px);padding:21px 17px}#authDialog .auth-heading h2{font-size:21px}#passwordDialog .password-modal,#forgotDialog .forgot-modal{width:calc(100vw - 20px)}#passwordDialog .password-modal>header,#forgotDialog .forgot-modal>header{padding:13px 15px 11px}#passwordDialog form,#forgotDialog form{padding:13px 15px 15px}#passwordDialog input,#forgotDialog input{height:39px;font-size:12px}#passwordDialog footer,#forgotDialog footer{grid-template-columns:.8fr 1.35fr}#forgotDialog #sendResetCode{min-height:39px;font-size:11px}} /* Four mobile actions after the VPS tab was removed: one even 4 x 1 row. */ @media(max-width:760px){.mobile-nav{grid-template-columns:repeat(4,minmax(0,1fr))!important}} /* Match AVT3X field grouping and header treatment in every auth flow. */ #passwordDialog .password-modal-heading{display:flex;align-items:center;gap:11px;margin:0;padding:0} #passwordDialog .password-modal-heading .auth-logo{width:42px;height:42px;flex:0 0 42px;padding:4px;border:1px solid #c99d59;border-radius:11px;background:#f1dfad} #passwordDialog .password-modal-heading .auth-kicker{display:block;margin-bottom:3px} #passwordDialog .password-modal-heading h3{margin:0} #passwordDialog .password-modal>header{display:flex;align-items:center;justify-content:space-between;gap:12px} #passwordDialog .auth-field span,#forgotDialog label>span{display:block} #forgotDialog .reset-email-row{display:grid;grid-template-columns:minmax(0,1fr) 82px;align-items:end;gap:7px} #forgotDialog .reset-email-row input{margin-top:5px} #forgotDialog .reset-email-row .button{height:42px;min-height:42px;margin-top:5px;padding:0 6px;font-size:11px} @media(max-width:520px){#passwordDialog .password-modal-heading .auth-logo{width:38px;height:38px;flex-basis:38px}#forgotDialog .reset-email-row{grid-template-columns:minmax(0,1fr) 76px}#forgotDialog .reset-email-row .button{height:39px;min-height:39px;font-size:10px}} /* Native dialogs have their own top-layer placement; explicitly center them. */ #authDialog.auth-modal[open],#passwordDialog.account-dialog[open],#forgotDialog.account-dialog[open]{position:fixed!important;inset:auto!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;margin:0!important;padding:0!important;width:min(410px,calc(100vw - 28px))!important;min-width:0!important;height:auto!important;min-height:0!important;max-width:calc(100vw - 28px)!important;max-height:calc(100dvh - 24px)!important;display:block!important;overflow:visible!important} #authDialog.auth-modal[open] .auth-card{width:100%;margin:0!important} #passwordDialog.account-dialog[open],#forgotDialog.account-dialog[open]{width:min(390px,calc(100vw - 28px))!important} @media(max-width:520px){#authDialog.auth-modal[open],#passwordDialog.account-dialog[open],#forgotDialog.account-dialog[open]{width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 16px)!important}} /* Dim and blur the page consistently behind every account modal. */ #authDialog::backdrop,#passwordDialog::backdrop,#forgotDialog::backdrop{background:rgba(15,24,20,.58)!important;-webkit-backdrop-filter:blur(9px) saturate(.82)!important;backdrop-filter:blur(9px) saturate(.82)!important}