/* Colour direction inspired by the collector's reference: pearl, navy,
   violet, electric blue and turquoise. Shared by both display modes. */
:root{
 --brand-violet:#a957b1;--brand-blue:#2075ce;--brand-turquoise:#45c7ca;
 --brand-gradient:linear-gradient(110deg,#a957b1 0%,#2777d6 53%,#45c7ca 100%);
 --action-gradient:linear-gradient(110deg,#7751b5 0%,#2269c1 55%,#087b88 100%);
}
html[data-theme="light"]{
 --bg:#fff;--panel:#fff;--surface:#f2f7fb;--text:#123554;
 --line:#dce7ef;--muted:#526b80;--subtle:#526b80;--red:#2169b1;
 --hero-base:#f8fcff;--hero-ghost:#193f6312;--image-base:#f1f6fa;
 --soft-accent:#eef3fc;--soft-accent-text:#335b83;
}
html[data-theme="dark"]{
 --bg:#0a1525;--panel:#102238;--surface:#102238;--text:#eaf4ff;
 --line:#26415a;--muted:#a4bfd5;--subtle:#a4bfd5;--red:#62d3de;
 --hero-base:#dfeef5;--hero-ghost:#193f6315;--image-base:#e9f1f6;
 --soft-accent:#152e48;--soft-accent-text:#afd9f4;
}
body{background:var(--bg);color:var(--text)}
.announcement{background:var(--action-gradient);color:#fff}
.preferencebar{background:var(--surface);border-color:var(--line)}
.language-switch{border-color:var(--line)}
.language-switch button[aria-pressed="true"]{background:var(--action-gradient);color:#fff}
header,html[data-theme="light"] header{background:var(--panel);border-color:var(--line)}
.mark,html[data-theme="light"] .mark{border-color:var(--line)}
.mark span{color:var(--brand-blue)}
.logo{color:var(--text)}
.logo small{color:var(--muted)}
.tools sup{background:var(--brand-blue);color:white}
nav i{background:var(--soft-accent);color:var(--soft-accent-text)}
.previewbar,html[data-theme="light"] .previewbar{background:var(--soft-accent);color:var(--muted)}
.previewbar b,html[data-theme="light"] .previewbar b{color:var(--soft-accent-text)}
.previewbar a,html[data-theme="light"] .previewbar a{color:var(--text)}
.hero{background:var(--bg)}
html[data-theme="light"] .hero-copy{
 background:radial-gradient(ellipse at 0 0,#bda3dd35 0,transparent 43%),radial-gradient(ellipse at 100% 100%,#64d8e524 0,transparent 50%),#fff;
}
html[data-theme="dark"] .hero-copy{
 background:radial-gradient(ellipse at 0 0,#8b58c72c 0,transparent 50%),radial-gradient(ellipse at 100% 100%,#39c7cd18 0,transparent 50%),var(--bg);
}
.hero h1 em{background:var(--brand-gradient);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero-copy p,html[data-theme="light"] .hero-copy p{color:var(--muted)}
.hero-foot,html[data-theme="light"] .hero-foot,.hero-foot span:first-child,html[data-theme="light"] .hero-foot span:first-child{color:var(--muted)}
.hero-art,html[data-theme="light"] .hero-art{
 background:radial-gradient(ellipse at 100% 100%,#c6a0de55 0,transparent 44%),radial-gradient(ellipse at 100% 0,#53cbdc44 0,transparent 48%),var(--hero-base);
}
.hero-art:before{color:var(--hero-ghost)}
.scale{color:#214864;border-color:#b9d0de;background:#ffffff77}
.feature-label{color:#183f5d;border-color:#b7cddc}
.feature-label span{color:#526e82}.feature-label a{border-color:#7298b0}
.eyebrow{color:var(--red)}.eyebrow:before{background:var(--brand-gradient)}
.btn{background:var(--action-gradient);border-color:transparent;color:#fff;box-shadow:0 5px 16px #246fc51a}
.btn:hover{box-shadow:0 7px 22px #2777d631;transform:translateY(-2px)}
.btn.secondary,html[data-theme="light"] .btn.secondary{background:transparent;border-color:var(--line);color:var(--text);box-shadow:none}
.dot{background:var(--brand-turquoise)}
.benefits{background:var(--panel);border-color:var(--line)}
.benefits b,html[data-theme="light"] .benefits b{color:var(--brand-blue)}
.benefits small,html[data-theme="light"] .benefits small{color:var(--muted)}
.brands,html[data-theme="light"] .brands{background:var(--surface);border-color:var(--line)}
.brands>span,html[data-theme="light"] .brands>span{color:var(--muted)}
.brands button,html[data-theme="light"] .brands button{color:var(--text);opacity:.72}
.brands button:hover,html[data-theme="light"] .brands button:hover{color:var(--red);opacity:1}
.product-image,html[data-theme="light"] .product-image{background:var(--image-base)}
.card-meta,html[data-theme="light"] .card-meta,.card-sub,html[data-theme="light"] .card-sub,.price small,html[data-theme="light"] .price small{color:var(--muted)}
.price{color:var(--text)}
.add,html[data-theme="light"] .add{border-color:var(--line);color:var(--red)}
.add:hover,html[data-theme="light"] .add:hover{background:var(--action-gradient);color:white}
.wish.selected{color:#8453ad}
.badge.red{background:var(--action-gradient);color:#fff}
.badge.green{background:#def4f3;color:#176771}
.auction-section,html[data-theme="light"] .auction-section{background:var(--surface);border-color:var(--line);position:relative}
.auction-section:before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--brand-gradient)}
.auction-img{background:var(--image-base)}
.live,html[data-theme="light"] .live{color:var(--red)}
.live .dot{background:var(--brand-turquoise);box-shadow:0 0 0 4px #45c7ca24}
.auction-copy .live span[style],html[data-theme="light"] .auction-copy .live span[style]{color:var(--muted)!important}
.bid-info,html[data-theme="light"] .bid-info{border-color:var(--line)}
.bid-info small,html[data-theme="light"] .bid-info small,.count-label,html[data-theme="light"] .count-label,.bid-bottom small,html[data-theme="light"] .bid-bottom small{color:var(--muted)}
.countdown span,html[data-theme="light"] .countdown span{background:var(--panel);border-color:var(--line);color:var(--text)}
.countdown small,html[data-theme="light"] .countdown small{color:var(--muted)}
.po-card,html[data-theme="light"] .po-card{background:var(--panel);border-color:var(--line)}
.po-card img{background:var(--image-base)}
.po-card p,html[data-theme="light"] .po-card p{color:var(--muted)}
.community,html[data-theme="light"] .community{background:var(--brand-gradient);color:#fff}
.community p{color:#fff}
.community .btn,html[data-theme="light"] .community .btn{background:#123554;border-color:#123554;color:white}
footer,html[data-theme="light"] footer{background:var(--surface);border-color:var(--line)}
footer p,html[data-theme="light"] footer p,footer>div>a:not(.logo),html[data-theme="light"] footer>div>a:not(.logo),footer button,html[data-theme="light"] footer button,.footer-note>span,html[data-theme="light"] .footer-note>span,.footer-note small,html[data-theme="light"] .footer-note small,.copyright,html[data-theme="light"] .copyright{color:var(--muted)}
.copyright{border-color:var(--line)}
input,select,html[data-theme="light"] input,html[data-theme="light"] select{background:var(--panel);color:var(--text);border-color:var(--line)}
input::placeholder,html[data-theme="light"] input::placeholder{color:var(--muted)}
input:focus,select:focus{outline:2px solid var(--brand-blue);outline-offset:2px}
.stat,.panel,html[data-theme="light"] .stat,html[data-theme="light"] .panel{background:var(--panel);border-color:var(--line)}
.stat small,html[data-theme="light"] .stat small,.side button,html[data-theme="light"] .side button,th,html[data-theme="light"] th{color:var(--muted)}
th,td,.side,.detail-spec,.cart-line,html[data-theme="light"] th,html[data-theme="light"] td,html[data-theme="light"] .side,html[data-theme="light"] .detail-spec,html[data-theme="light"] .cart-line{border-color:var(--line)}
.side button.active,html[data-theme="light"] .side button.active{color:var(--red)}
.pill,html[data-theme="light"] .pill{background:var(--soft-accent);color:var(--soft-accent-text)}
dialog,html[data-theme="light"] dialog{background:var(--bg);color:var(--text);border-color:var(--line)}
dialog p,.cart-line small,html[data-theme="light"] dialog p,html[data-theme="light"] .cart-line small{color:var(--muted)}
.demo-note,html[data-theme="light"] .demo-note{background:var(--soft-accent);color:var(--soft-accent-text)!important;border-left:2px solid var(--brand-blue)}
.cart-line button,html[data-theme="light"] .cart-line button{border-color:var(--line)}
.close,html[data-theme="light"] .close{color:var(--muted)}
.empty,html[data-theme="light"] .empty{color:var(--muted);border-color:var(--line)}
.textlink,html[data-theme="light"] .textlink{border-color:var(--line)}
.tabs button,html[data-theme="light"] .tabs button{color:var(--muted);border-color:var(--line)}
.tabs button.active,html[data-theme="light"] .tabs button.active{background:var(--action-gradient);color:white}
nav.open,html[data-theme="light"] nav.open{background:var(--panel);border-color:var(--line)}
#toast{background:var(--panel);color:var(--text);border:1px solid var(--line);border-top:3px solid var(--brand-blue)}
/* Keep prominent text readable over the pale reference-inspired surfaces. */
html[data-theme="light"] .hero h1 em{background-image:linear-gradient(110deg,#9b4ea8,#226cc0 55%,#127e89)}
.community,html[data-theme="light"] .community{background:var(--action-gradient)}
/* Official supplied Al Ikhlas Diecast logo, displayed in full. */
.logo{display:inline-flex;flex-shrink:0;gap:0;line-height:0}
.brand-logo-frame{display:flex;align-items:center;justify-content:center;width:200px;height:80px;padding:4px;background:#fff;border-radius:5px}
.brand-logo,footer .brand-logo{display:block;position:static;width:100%;height:auto;max-width:100%;object-fit:contain}
header{min-height:104px;height:auto}
footer .brand-logo-frame{width:190px;height:78px}
@media(max-width:700px){header{min-height:88px;height:88px}.brand-logo-frame,footer .brand-logo-frame{width:150px;height:64px}}