/* Small integration rules only. The template's caogen.css is unchanged. */
:root{--mint:var(--grass);--red:var(--coral)}
[hidden],.hidden{display:none!important}
body[data-auth-pending] .app{visibility:hidden}
.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
.card,.grid-main>*,.grid-2>*,.grid-3>*{min-width:0}
.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.custom-opt{grid-template-columns:auto 1fr auto;align-items:center;gap:10px!important}
.custom-opt span{font-family:var(--f-body)!important}
.icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor}
.btn .icon{width:15px;height:15px}
.panel.card{min-width:0}
.panel.card>form,.panel.card>.fine,.panel.card>p,.panel.card>.quote-meta,.panel.card>.revenue-value,.panel.card>.guide-list{margin:16px}
.panel.card>form{display:grid;gap:12px}
.card-head h2{font-size:15px;display:flex;align-items:center;gap:8px}
.card-head h2>.icon{display:none}
.card-head{flex-wrap:wrap}
.panel.card .table-wrap{margin:0}
.fine{overflow-wrap:anywhere}
.pricing-note{display:flex;align-items:baseline;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:13px}
.pricing-note .link{flex:none;white-space:nowrap}
.table-empty{padding:28px!important;text-align:center;color:var(--muted)}
.error-cell{max-width:230px;white-space:normal;overflow-wrap:anywhere;color:var(--coral)}
.table input.input{height:30px;min-width:70px}
#pricing-table input[data-f="cpu"],#pricing-table input[data-f="minutes"]{width:60px}
#pricing-table input[data-f="mem_mb"],#pricing-table input[data-f="price"]{width:90px}
#pricing-table input[data-f="ports"],#pricing-table input[data-f="name"]{width:130px}
.search-field{position:relative;display:flex;align-items:center;gap:8px;max-width:260px}
.search-field .icon{position:absolute;left:10px;color:var(--muted)}
.search-field .input{padding-left:33px;height:32px}
.credential{display:block;margin:0;min-width:0;border:1px solid var(--line);border-radius:var(--r);background:#071012;padding:12px;font:12px/1.8 var(--f-mono);white-space:pre-wrap;overflow-wrap:anywhere;max-height:440px;overflow:auto}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal-box{max-height:calc(100dvh - 32px);overflow:auto;width:min(620px,100%)}
.modal-box form{display:grid;gap:10px}
.modal-box .card-head{padding:0 0 12px}
.modal-box .card-body{padding:12px 0 0}
.modal-box .server-detail{min-width:0}
.modal-box .grid-2{grid-template-columns:1fr}
.modal-box .note{font-size:13px}
.modal-actions{flex-wrap:wrap}
.policy-keys{display:grid;gap:8px;max-height:200px;overflow:auto}
.policy-key{display:flex;gap:8px;padding:10px;border:1px solid var(--line);border-radius:8px}
.policy-key span{display:grid}.policy-key small{color:var(--muted)}
.policy-toggle{display:flex;align-items:center;gap:8px}
.payment-networks{display:flex;gap:12px;flex-wrap:wrap}
.payment-networks label{display:flex;align-items:center;gap:6px;font-size:12px}
.payment-id{max-width:175px;word-break:break-all;white-space:normal}
.table td.payment-id{white-space:normal;word-break:break-all;min-width:145px}
.quote-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px}
.payment-total{font-size:24px;color:var(--sun);font-weight:600}
.quick{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);padding:12px}
.quick span{flex:1;font-weight:600}.quick small{display:block;font:11px var(--f-mono);color:var(--muted);margin-top:4px}
.quick b{font-size:12px;color:var(--grass)}
.instance-meta{display:flex;gap:10px;flex-wrap:wrap;font:12px var(--f-mono);color:var(--muted)}
.instance-manage-cell{display:flex;gap:6px;flex-wrap:wrap;min-width:180px}
.source-link{display:inline-block;margin:0 16px 16px;font-size:12px;color:var(--sky)}
.catalog-note{font-size:12px;color:var(--muted);margin:16px}
.guide-list{padding-left:18px;display:grid;gap:12px;color:var(--muted);font-size:13px}
.guide-list b{display:block;color:var(--fg)}
.spinner{width:20px;height:20px;border:2px solid var(--line-2);border-top-color:var(--accent);border-radius:50%;animation:spin .75s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.member-strip{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;background:var(--card);border:1px solid var(--line);margin-bottom:16px}
.member-strip div{flex:1}.member-strip span{display:block;font-size:12px;color:var(--muted)}
.api-secret{user-select:all}
.revenue{font:600 25px/1.8 var(--f-mono);color:var(--grape)}
.member-summary{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.member-summary .sticker{width:48px;height:48px;flex:none}
.member-title{font-size:20px;color:var(--sky)}
.compact-tiers{grid-template-columns:repeat(3,minmax(0,1fr))}
.compact-tiers .tier{min-height:120px}
.note.info{margin:16px}
.loading-error{max-width:600px;margin:40px auto}
.api-guide{padding-block:36px;display:grid;gap:18px;max-width:960px}
.api-guide h1{font-size:28px}.api-guide h2{font-size:20px;margin-top:16px}
.api-guide p{color:var(--fg-2);line-height:1.85}
.api-guide pre{background:#071012;border:1px solid var(--line);border-radius:var(--r);padding:16px;overflow:auto;font:13px/1.85 var(--f-mono);margin:0}
.api-guide a.btn{justify-self:start}
.svg-sprite{display:none}
@media(max-width:640px){.custom-opt{grid-template-columns:1fr!important;gap:2px!important}.card-head .search-field{max-width:none;width:100%}.modal-box{padding:16px}.member-strip{flex-wrap:wrap}.ssh{flex-wrap:wrap}.ssh code{white-space:normal;overflow-wrap:anywhere}.quick{flex-wrap:wrap}.actions .select{max-width:100%}.status-pill{max-width:110px}.card-head .fine{max-width:100%}}
@media(max-width:640px){.compact-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}.pricing-note{align-items:flex-start}}
@media(max-width:380px){body[data-page="index"] .topbar .wrap{gap:8px}body[data-page="index"] .topbar-actions{gap:6px}body[data-page="index"] .topbar-actions .btn-grass{padding-inline:9px}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}}

body[data-page="index"] .section[id]{scroll-margin-top:calc(64px + env(safe-area-inset-top,0px))}