
:root{color-scheme:dark;--bg:#151110;--panel:#271d19;--panel2:#32241d;--line:#70503a;--text:#f3dfc2;--muted:#c7b2a1;--gold:#ebc28b;--good:#afd2ae;--warn:#eac29b}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 85% 8%,#64372c4c,transparent 44%),linear-gradient(165deg,#211714,#131112 72%);color:var(--text);font:14px/1.55 Segoe UI,system-ui,sans-serif}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:500;line-height:1.17}h1{font-size:clamp(34px,4vw,52px);margin:10px 0 18px}h2{font-size:clamp(23px,3vw,32px);margin:8px 0 18px}h3{font-size:21px;margin:8px 0}
a{color:#edd0aa}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #f6d5a1;outline-offset:3px}
button,input,select{font:inherit}button{cursor:pointer;min-height:43px}input,select{background:#1c1614;color:#f3dfc6;border:1px solid #79563c;border-radius:7px;padding:11px 12px;max-width:100%}
[hidden]{display:none!important}.hidden{display:none!important}
header{position:sticky;top:0;z-index:10;background:#211916ef;border-bottom:1px solid #73523d;backdrop-filter:blur(13px)}
header>div{max-width:1250px;padding:11px 24px;margin:auto;min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{text-decoration:none;display:flex;gap:10px;align-items:center;font:22px Georgia,serif;color:#f3d5a9}
.brand-mark{display:grid;place-items:center;width:42px;height:46px;border:2px solid #dfb57a;clip-path:polygon(50% 0,96% 22%,96% 79%,50% 100%,4% 79%,4% 22%);background:#78392d;color:#f9ddb3}
nav{display:flex;align-items:center;flex-wrap:wrap;gap:16px;font-size:12px}nav a{text-decoration:none;color:#ceb9a2}nav a:hover{color:#ffe0b9}
nav .nav-cta{padding:10px 13px;border:1px solid #9e7654;background:#3b291f;border-radius:7px;color:#eed0a3}
main{max-width:1250px;margin:auto;padding:35px 24px 65px;min-height:65vh}
.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:750;color:#d8a977;text-transform:uppercase}
.lead{max-width:770px;color:var(--muted);font-size:15px;line-height:1.7}
.hero{display:grid;grid-template-columns:1.3fr .7fr;gap:22px;min-height:250px;border:1px solid #8d6342;border-radius:13px;background:linear-gradient(110deg,#36221c,#1e1817);padding:31px;align-items:center;box-shadow:inset 0 1px #d8a56f35}
.hero p{max-width:730px;color:#d2bda9;line-height:1.7}.hero-art{height:195px;display:grid;place-items:center;background:radial-gradient(ellipse,#89503934,transparent 60%);font:52px Georgia,serif;color:#d4a46c}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:18px}.btn,.btn-quiet{border-radius:8px;display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;text-decoration:none;font-weight:700;border:1px solid #b68a5c;min-height:43px}
.btn{background:linear-gradient(125deg,#edcb96,#c9955c);color:#271810}.btn:hover{filter:brightness(1.1)}
.btn-quiet{background:#39281f;color:#f0d0a1}.btn-quiet:hover{background:#513223}
.section{margin-top:35px}.section-head{margin:0 0 18px}.section-head p{color:var(--muted);max-width:700px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.card{min-width:0;display:flex;flex-direction:column;background:linear-gradient(155deg,#2d211c,#201916);border:1px solid #624532;border-radius:12px;padding:22px;box-shadow:inset 0 1px #ba926f24}
.card p{color:var(--muted);line-height:1.6;flex:1}.card .price{display:block;color:#f3d19d;font:31px Georgia,serif;margin:18px 0 9px}
.card .detail{font-size:12px;color:#bfaa91}.card>button{width:100%;margin-top:12px}
.cover{display:block;width:100%;height:auto;aspect-ratio:640/240;object-fit:cover;border:1px solid #795238;border-radius:8px;margin:0 0 15px}
.badge{display:inline-block;width:max-content;max-width:100%;font-size:10px;border:1px solid #a17a51;border-radius:25px;padding:5px 9px;color:#ecc28c;background:#3c2b1f;margin:5px 0}
.badge.good{border-color:#607c65;background:#263b2b;color:#c5e4c9}.badge.locked{border-color:#966549;color:#e6bc9c}
.meter{height:12px;background:#56402c;border-radius:99px;overflow:hidden;margin:16px 0 8px}.meter span{display:block;height:100%;max-width:100%;background:linear-gradient(90deg,#a97b4b,#f0c27e);border-radius:99px}
.notice,.error,.success{padding:14px 16px;border-radius:9px;border:1px solid #946c47;background:#37281e;color:#ead1b0;margin:15px 0;font-size:13px;line-height:1.6}
.error{border-color:#a06459;background:#412520;color:#ffd1c8}.success{border-color:#67826a;background:#203428;color:#d1edd3}
.form{max-width:550px;display:grid;gap:16px}.form label{display:grid;gap:7px;color:#e9c9a1}.form input{width:100%}
.table-wrap{overflow-x:auto;max-width:100%}table{width:100%;border-collapse:collapse;font-size:12px;min-width:650px}
th,td{text-align:left;padding:13px;border-bottom:1px solid #604633;vertical-align:top;overflow-wrap:anywhere}th{color:#ecc598;font-size:10px;letter-spacing:1px;text-transform:uppercase}
.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.admin-card{background:#281d19;border:1px solid #715039;border-radius:10px;padding:17px;margin:12px 0}
.admin-card .inline{display:flex;align-items:end;gap:8px;flex-wrap:wrap}.admin-card input{width:100%}.admin-card .field{flex:1 1 150px;min-width:0}
.admin-card .field label{display:grid;gap:6px;font-size:12px}.admin-card h3{margin:0 0 12px}
footer{max-width:1250px;padding:25px 24px 45px;margin:auto;display:flex;justify-content:space-between;gap:25px;color:#bba890;font-size:12px;border-top:1px solid #553b2b}
footer a{color:#eac08b}.empty{padding:25px;border:1px dashed #705541;border-radius:8px;color:#cbb8a3}
@media(max-width:980px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{grid-template-columns:1fr}.hero-art{display:none}}
@media(max-width:650px){header>div{flex-wrap:wrap;padding:13px 16px}nav{width:100%;gap:8px;justify-content:space-between}nav a{font-size:11px}main{padding:20px 16px 40px}.hero{padding:21px}.cards,.grid-two{grid-template-columns:1fr}.card{padding:18px}footer{padding:25px 16px;flex-direction:column}.admin-card .field{flex-basis:100%}.actions>*{flex:1 1 auto;text-align:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{scroll-behavior:auto!important}}

.admin-card input[type=checkbox]{width:auto;min-width:20px;height:20px;vertical-align:middle;margin-left:12px}.admin-card{margin:12px 0}.cards>.card .price{font-size:23px;font-weight:650;color:#eac18a}.cards>.card>.btn,.cards>.card>.btn-quiet{display:inline-flex;margin:10px 8px 0 0}.section .notice{margin-top:16px}


/* Dragon Desk Commerce 0.17.8 — responsive commercial design system */
:root{--bg:#100e0d;--panel:#211a16;--panel2:#2b221c;--line:#76583e;--text:#f5ead8;--muted:#cfbeaa;--gold:#e6be82;--good:#bcd9b7;--radius:15px}
body{background:radial-gradient(ellipse 78% 45% at 93% 0%,#62392544,transparent 68%),linear-gradient(#211712,#100e0d 70%);color:var(--text)}
header{background:#1b1512f5;box-shadow:0 12px 30px #08060440}
.brand{font-size:20px;line-height:1.13}
.brand-crest{width:43px;height:48px;flex-shrink:0;filter:drop-shadow(0 5px 7px #05040466)}
main{max-width:1270px;margin:auto}
nav a{font-size:13px!important;color:#dbcbb4!important}
nav .nav-cta{border-color:#c39a62!important;color:#fff1d8!important}
h1,h2,h3{letter-spacing:-.02em}
h1{font-size:clamp(38px,5vw,62px);line-height:1.12}
h2{font-size:clamp(23px,2.6vw,34px)}
.hero{border-color:#75533a;border-radius:20px;background:radial-gradient(circle at 90% 10%,#ae714022,transparent 52%),linear-gradient(118deg,#3a271e,#201815 79%);box-shadow:inset 0 1px #fff2d519,0 18px 55px #0005;padding:clamp(25px,3.5vw,49px)}
.hero .eyebrow{color:#f1c890}
.hero p{font-size:16px;line-height:1.75}
.hero-art{font-family:Georgia,serif;font-size:clamp(38px,5vw,65px);letter-spacing:-.06em;line-height:.9;text-align:center;color:#f2c995;text-shadow:0 6px 30px #0008;position:relative}
.hero-art span{display:block;font:12px system-ui;letter-spacing:.18em;color:#bb9a79;margin-top:16px;text-shadow:none}
.btn,.btn-quiet{border-radius:10px;transition:filter .15s,transform .15s,border-color .15s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn{background:linear-gradient(135deg,#efd09d,#d3a16a);color:#21150f!important;font-weight:750;border:1px solid #ffe0ab}
.btn:hover:not(:disabled),.btn-quiet:hover:not(:disabled){filter:brightness(1.12);transform:translateY(-1px)}
.btn-quiet{border:1px solid #94714d;background:#30231c;color:#f0d1a6!important}
.btn:focus-visible,.btn-quiet:focus-visible,summary:focus-visible{outline:3px solid #f4dcaa;outline-offset:4px}
.section-head{margin-bottom:19px}
#plans-list{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:14px}
.pricing-card{padding:24px 19px;display:flex;flex-direction:column;min-width:0;border-color:#715239;position:relative;box-shadow:0 14px 38px #0003}
.pricing-card.recommended{border-color:#d3a268;box-shadow:inset 0 0 0 1px #d3a26875,0 16px 45px #0005;background:linear-gradient(155deg,#423024,#231a16)}
.plan-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.plan-head .eyebrow{font-size:9px}
.pricing-card h3{font-size:25px;margin:17px 0 8px}
.plan-description{color:#cdbca8;min-height:60px;font-size:13px;line-height:1.5}
.plan-amount{display:flex;gap:5px;align-items:baseline;margin:17px 0 4px}
.plan-amount strong{font-size:clamp(25px,2.5vw,35px);font-weight:750;letter-spacing:-.05em;color:#f0cea0}
.plan-amount small{font-size:12px;color:#ddc5aa}
.plan-quota{font-size:14px;font-weight:700;color:#fff0d6;margin:9px 0 2px}
.limits{font-size:11px;color:#c6b19c;border-bottom:1px solid #665039;padding-bottom:14px}
.features{margin:10px 0 18px;padding:0;list-style:none;display:grid;gap:11px;flex:1}
.features li{font-size:12px;line-height:1.48;color:#e4d2b8;position:relative;padding-left:23px}
.features li::before{content:"✓";position:absolute;left:1px;top:0;color:#b9d0a0;font-weight:800}
.plan-cta{width:100%;min-height:45px;text-align:center;white-space:normal}
.billing-note{margin-top:17px}
.three-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.three-steps article{padding:24px;background:#271e19;border:1px solid #70523e;border-radius:15px}
.three-steps b{font-size:32px;font-family:Georgia,serif;color:#ecc38d}
.three-steps p{color:#cbb9a3;line-height:1.65}
.faq{max-width:990px}
.faq details{border-bottom:1px solid #75533f;padding:16px 7px}
.faq summary{cursor:pointer;font-size:15px;font-weight:700;color:#f2ddbd;list-style-position:outside}
.faq details p{padding-top:9px;line-height:1.7;color:#ccb8a2}
.store-controls{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:20px 0}
.store-controls label{flex:2 1 280px;display:grid;gap:8px;font-size:12px;color:#dbc4a8}
.store-controls label:last-child{flex:1 1 190px}
.store-controls input,.store-controls select{width:100%;min-height:45px;background:#251c17;border:1px solid #866447;color:#f4e0bd}
.product-item{display:flex;flex-direction:column;gap:9px}
.product-item img.cover{width:100%;aspect-ratio:640/240;object-fit:cover;border-radius:9px}
.product-item h3{margin:6px 0}
.product-item>.price{font-size:21px;color:#eccc9c;font-weight:700}
.product-item>p{line-height:1.58}
.product-item .actions.compact{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.product-item .actions.compact>*{flex:1 1 auto;font-size:12px}
.fineprint{font-size:12px;line-height:1.55;color:#bfae9d}
.product-dialog{width:min(540px,calc(100vw - 24px));border:1px solid #c39864;border-radius:15px;background:#291f1b;color:#f4e4d0;padding:27px;box-shadow:0 22px 80px #0008}
.product-dialog::backdrop{background:#080807b9}
.product-dialog h2{margin-top:0}
.product-dialog button,.product-dialog a{margin:10px 8px 0 0}
.commercial-metrics{margin-bottom:20px;border-color:#8a6842}
.commercial-metrics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.commercial-metrics-grid p{margin:0;border:1px solid #674c36;border-radius:8px;padding:12px;font-size:12px}
.notice.good{border-color:#588760;background:#1b3323;color:#d1f1d2}
@media(max-width:1170px){#plans-list{grid-template-columns:repeat(2,minmax(0,1fr))}.pricing-card{padding:22px}}
@media(max-width:720px){h1{font-size:36px}.hero-art{font-size:42px}.hero-art span{font-size:10px}
#plans-list{grid-template-columns:1fr;gap:12px}
.pricing-card{min-height:0}.plan-description{min-height:0}
.plan-amount strong{font-size:34px}.three-steps,.commercial-metrics-grid{grid-template-columns:1fr}
.product-item{min-width:0}.store-controls{gap:9px}.store-controls label{flex:1 1 100%}
nav{gap:8px!important}nav a{font-size:11px!important}
}
@media(prefers-reduced-motion:reduce){.btn,.btn-quiet{transition:none}.btn:hover:not(:disabled),.btn-quiet:hover:not(:disabled){transform:none}}

.sso-entry{max-width:700px;margin:18px 0;background:linear-gradient(115deg,#3b2b21,#241a16);border-color:#ba8552}.sso-entry h2{margin-bottom:10px}.sso-entry p{color:#e1c9aa;line-height:1.65}.sso-entry .btn{margin-top:7px;min-height:46px}.storefront-preview{border-top:1px solid #74543d}.store-preview-action{display:flex;justify-content:center;margin-top:22px}.store-preview-action a{min-height:46px;display:inline-flex;align-items:center}.auth-card .sso-entry{margin-bottom:22px}

:root{--bg:#101920;--panel:#1d2931;--panel2:#25343b;--line:#43545a;--text:#f4f2ec;--muted:#bfc9cb;--gold:#ecc08c}
body{background:radial-gradient(ellipse at 80% 0,#75513933,transparent 42%),linear-gradient(160deg,#141e24,#0e161b 74%);color:var(--text);font:15px/1.62 system-ui,"Segoe UI",sans-serif}
h1,h2,h3{font-family:system-ui,"Segoe UI",sans-serif;letter-spacing:-.034em;color:#faf5ec;font-weight:720}
h1{font-size:clamp(34px,4.4vw,58px);line-height:1.08}h2{font-size:clamp(25px,3vw,35px)}
header{background:#111c20ef;border-bottom:1px solid #42525a}header>div{max-width:1260px;min-height:76px;gap:22px}
header .brand{font:800 18px/1.1 system-ui,sans-serif;color:#f8f2e9;letter-spacing:-.03em}
header .brand small{display:block;font:700 9px system-ui,sans-serif;letter-spacing:.14em;color:#e5bd97;margin-top:6px}
header nav{display:flex;gap:16px;font-size:13px;align-items:center}
header nav a{color:#d5dfe0}header nav a:hover{color:#f0bf90}
header .nav-cta{background:#ebbd87!important;color:#1d1b1a!important;border-color:#f5cd9d!important;font-weight:800}
main{max-width:1260px;padding-top:29px}.eyebrow{font-size:11px;color:#efb77e;letter-spacing:.14em}
.hero.ux-hero{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(320px,.86fr);gap:30px;align-items:center;min-height:410px;padding:clamp(24px,4vw,53px);background:linear-gradient(125deg,#1d3038,#152228);border:1px solid #53636a;border-radius:19px;box-shadow:0 22px 72px #0006}
.ux-hero h1{max-width:760px;margin:16px 0}.ux-hero p{color:#c0cdcf;font-size:15px;line-height:1.68}
.ux-hero .actions{margin-top:25px;gap:12px}.ux-trust{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:25px;font-size:12px;color:#b6d0c7}
.btn,.btn-quiet{min-height:46px;border-radius:9px;padding:11px 18px;transition:transform .18s ease,background .18s ease}
.btn{background:#e9bc88;color:#1d1915;border-color:#f4c897}.btn:hover:not(:disabled){background:#f7cb9d;transform:translateY(-2px)}
.btn-quiet{color:#f0d3b3;background:#26353e;border-color:#5a696e}.btn-quiet:hover:not(:disabled){background:#33444d;transform:translateY(-2px)}
.ux-preview{margin:0;min-width:0;background:#1a2931;border-radius:15px;overflow:hidden;border:1px solid #52636b;box-shadow:0 22px 65px #0008;animation:uxEnter .6s ease both}
.ux-windowbar{padding:11px 16px;display:flex;justify-content:space-between;align-items:center;background:#111f25;border-bottom:1px solid #4c6066}
.ux-windowbar small{color:#d6ad8e}.ux-windowbar strong{font:800 11px system-ui,sans-serif;letter-spacing:.1em;color:#f4d6af}
.ux-preview img{width:100%;height:auto;display:block;object-fit:cover;min-height:160px}
.ux-preview figcaption{padding:15px 7px;display:flex;justify-content:center;align-items:center;gap:12px;color:#ebc49e}
.ux-preview figcaption span{font:700 11px system-ui,sans-serif;letter-spacing:.08em;border:1px solid #586a72;border-radius:8px;background:#2a3b43;padding:8px 12px}
.ux-preview>p{text-align:center;font-size:11px;margin:0;padding:0 10px 14px}
.ux-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:17px 0 45px}
.ux-features article{display:flex;align-items:flex-start;gap:14px;padding:18px;background:#1d2b33;border:1px solid #40535c;border-radius:14px}
.ux-features article>b{flex:0 0 34px;display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:#314049;color:#f0ba86}
.ux-features strong{font-size:14px;color:#fff3e5}.ux-features p{font-size:12px;color:#b8c7c9;margin:5px 0 0}
.card{background:linear-gradient(160deg,#24323a,#19252d);border:1px solid #455761;border-radius:15px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-3px);border-color:#b78a67;box-shadow:0 14px 30px #0005}
.card p,.lead{color:#bbc8cc}
.product-item img.cover{background:#1e2c33;border:1px solid #4d6169}
input,select,.store-controls input,.store-controls select{background:#18262d;border-color:#53656d;color:#f7f0e7}
.ux-footer{display:flex;justify-content:space-between;gap:27px;max-width:1260px;margin:auto;padding:35px 24px;border-top:1px solid #455860;color:#b7c5c7}
.ux-footer strong{color:#fff;font-size:17px}.ux-footer p{margin:6px 0 2px;font-size:13px}.ux-footer small{font-size:11px}
.ux-footer nav{display:flex;justify-content:flex-end;align-content:flex-start;flex-wrap:wrap;gap:13px 18px;max-width:520px;font-size:12px}
.ux-footer a{text-decoration:none;color:#c6d1d2}.ux-footer a:hover{color:#f1bd89}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #f4c18a;outline-offset:3px}
@keyframes uxEnter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:980px){header>div{flex-wrap:wrap}header nav{width:100%;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;padding-bottom:6px}.hero.ux-hero{grid-template-columns:1fr}.ux-preview{max-width:570px}.ux-features{grid-template-columns:1fr}}
@media(max-width:650px){main{padding:19px 15px 35px}.hero.ux-hero{padding:24px 19px}.ux-hero h1{font-size:clamp(32px,9vw,42px)}.ux-hero .actions>*{width:100%}.ux-footer{display:block;padding:26px 15px}.ux-footer nav{justify-content:flex-start;margin-top:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.card:hover,.btn:hover,.btn-quiet:hover{transform:none}}
