:root {
  --acc: #86c232;
  --acc-dark: #5a8a1e;
  --bg: #131313;
  --card: #1d1d1d;
  --card-border: #2b2b2b;
  --text: #efefef;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
body { background: var(--bg); color: var(--text); min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
[hidden] { display: none !important; }

.page { width: min(1290px, 94vw); margin: 0 auto; padding: 27px 0 0; }

/* topbar */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 6px 3px 18px; font-size: 16.5px; color: #bbb; }
.topbar-back { display: inline-flex; align-items: center; gap: 10.5px; transition: color .15s; }
.topbar-back:hover { color: #fff; }
.topbar nav { display: flex; align-items: center; gap: 27px; }
.topbar nav .nav-home { display: inline-flex; align-items: center; gap: 7px; }
.topbar nav .nav-home i { color: var(--acc); font-size: 13px; }
.topbar nav a { transition: color .15s; }
.topbar nav a:hover { color: #fff; }
.nav-more { position: relative; }
.nav-more-btn i { font-size: 11px; margin-left: 5px; transition: transform .2s; }
.nav-more:hover .nav-more-btn { color: #fff; }
.nav-more:hover .nav-more-btn i { transform: rotate(180deg); }
.nav-drop { position: absolute; top: 100%; right: 0; z-index: 60; min-width: 190px; padding: 8px; border: 1.5px solid #2b2b2b; border-radius: 0; background: #1a1a1a; box-shadow: 0 16px 40px rgba(0,0,0,.6); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s, transform .18s, visibility .18s; }
.nav-more:hover .nav-drop, .nav-more:focus-within .nav-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-drop a { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 0; font-size: 14.5px; color: #ccc; }
.nav-drop a i { width: 16px; text-align: center; color: var(--acc); font-size: 14px; }
.nav-drop a:hover { background: #242424; color: #fff; }

/* shared card + accent bar */
.card { position: relative; border: 3px solid #333; border-radius: 12px; background: var(--card); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.card-accent { position: absolute; left: 50%; bottom: -6px; width: 93px; height: 7.5px; border-radius: 6px; background: var(--acc); transform: translateX(-50%); }

/* header card — short, compact */
.headbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; margin-top: 18px; margin-bottom: 6px; padding: 22px 32px; }
.headbar-side { display: flex; align-items: center; gap: 15px; min-width: 0; }
.copy-ip { flex-shrink: 0; display: grid; place-items: center; width: 60px; height: 60px; border: none; border-radius: 50%; background: rgba(134,194,50,.16); color: var(--acc); font-size: 20px; transition: background .15s, transform .15s; }
.copy-ip:hover { background: rgba(134,194,50,.32); transform: scale(1.05); }
.headbar-side strong { display: block; font-size: 25px; font-weight: 700; }
.headbar-side small { display: block; color: var(--acc); font-size: 16px; font-weight: 600; }
.headbar-logo { display: grid; place-items: center; overflow: visible; }
.headbar-logo img { height: 200px; max-width: 720px; margin: -100px 0; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0,0,0,.55)); position: relative; z-index: 3; }
#logo-fallback { font-size: 76px; font-weight: 800; color: var(--acc); letter-spacing: .04em; }
.headbar-actions { display: flex; justify-content: flex-end; gap: 13.5px; }

.btn { display: inline-flex; align-items: center; gap: 12px; padding: 15px 25.5px; border: 1.5px solid transparent; border-radius: 10.5px; font-size: 16.5px; font-weight: 600; transition: filter .15s, transform .15s; }
.headbar .btn { padding: 11px 27px; font-size: 18px; }
.btn:hover { filter: brightness(1.12); transform: translateY(-1.5px); }
.btn-red, .btn-acc { background: var(--acc); color: #fff; }
.btn-ghost { border-color: #3a3a3a; background: #232323; color: #ddd; }

/* sale banner — slim strip */
.salebar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; margin-top: 24px; margin-bottom: 8px; padding: 34px 30px; }
.sale-badge { position: relative; padding: 20px 48px; border-radius: 10px; background: #57d94a; color: #14532d; font-size: 32px; font-weight: 800; }
.sale-title { text-align: center; font-size: 31px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.sale-timer { display: flex; gap: 12px; padding: 13px 18px; border-radius: 10px; background: #2c2c2c; }
.sale-timer span { display: flex; flex-direction: column; align-items: center; min-width: 68px; padding: 5px 7px; }
.sale-timer b { font-size: 29px; }
.sale-timer small { color: #666; font-size: 11px; font-weight: 700; letter-spacing: .08em; }

/* category grid — ref ratio ~0.41 height/width */
.catgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; }
.cat-loading { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 13.5px; padding: 120px 0; color: #666; font-size: 19.5px; }
.cat-card { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 21px; min-height: 258px; padding: 36px 45px; overflow: hidden; border: 4.5px solid #86c232; border-radius: 13.5px; background: linear-gradient(135deg, #4f771d 0%, #446617 40%, #3a5812 100%); text-align: left; transition: transform .18s, box-shadow .18s; }
.cat-card:hover { transform: translateY(-6px) scale(1.01); }
.cat-card::before { content: ''; position: absolute; top: 50%; left: 20%; width: 62%; aspect-ratio: 1; border-radius: 50%; background: #5f8a24; transform: translate(-50%, -50%); }
.cat-card > div { position: relative; z-index: 1; }
.cat-card strong { display: block; color: #fff; font-size: 37px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.cat-card small { display: block; margin-top: 9px; color: rgba(255,255,255,.92); font-size: 23px; font-weight: 600; }
.cat-card img { position: relative; z-index: 1; width: 156px; height: 156px; object-fit: contain; filter: drop-shadow(0 12px 21px rgba(0,0,0,.35)); transition: transform .25s; }
.cat-card:hover img { transform: scale(1.08) rotate(-3deg); }
.cat-card .cat-icon { position: relative; z-index: 1; color: rgba(255,255,255,.9); font-size: 90px; }

/* info cards */
.infogrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 36px; }
.info-card { padding: 36px 39px 42px; text-align: center; }
.info-card h3 { margin-bottom: 18px; font-size: 22.5px; font-weight: 700; }
.info-card p { color: #b5b5b5; font-size: 15.8px; line-height: 1.9; }

/* footer sections */
.footgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 78px; padding: 42px 6px; border-top: 1.5px solid #232323; }
.footgrid h4 { margin-bottom: 13.5px; font-size: 21px; font-weight: 700; }
.footgrid p { margin-bottom: 24px; color: #9a9a9a; font-size: 15.8px; line-height: 1.8; }
.socials { display: flex; gap: 13.5px; }
.socials a { display: grid; place-items: center; width: 60px; height: 60px; border: 1.5px solid #3a3a3a; border-radius: 10.5px; background: #1d1d1d; color: #ccc; font-size: 22.5px; transition: color .15s, border-color .15s, transform .15s; }
.socials a:hover { color: var(--acc); border-color: var(--acc); transform: translateY(-3px); }

/* bottom footer */
.footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 33px 6px 45px; border-top: 1.5px solid #232323; }
.footer strong { display: block; font-size: 15.8px; }
.footer small { display: block; margin-top: 6px; color: #777; font-size: 13.5px; }
.footer-credit { flex-shrink: 0; color: #999; font-size: 14.2px; }
.footer-credit i { color: var(--acc); font-size: 14.2px; }

@media (max-width: 642.8px) {
  .page { width: calc(100% - 24px); padding-top: 14px; }
  .topbar { font-size: 13px; padding-bottom: 12px; }
  .topbar nav { gap: 16px; }

  /* slim headbar — no logo, name left, actions right */
  .headbar { grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 14px 16px; margin-top: 10px; }
  .headbar-side { gap: 11px; }
  .headbar-side strong { font-size: 19px; }
  .headbar-side small { display: none; }
  .copy-ip { width: 42px; height: 42px; border-radius: 10px; font-size: 16px; }
  .headbar-logo { display: none; }
  .headbar .btn { font-size: 0; gap: 6px; padding: 10px 13px; }
  .headbar .btn i { font-size: 17px; }
  .headbar .cart-count { font-size: 11px; }
  #user-area .btn i { font-size: 17px; }
  .user-chip strong { display: none; }
  .user-chip img { width: 28px; height: 28px; }

  /* stacked sale card like the reference */
  .salebar { grid-template-columns: 1fr; justify-items: center; gap: 15px; padding: 22px 16px; margin-top: 14px; }
  .sale-badge { display: none; }
  .sale-title { font-size: 20px; letter-spacing: .06em; }
  .sale-timer { width: 100%; justify-content: space-evenly; gap: 6px; padding: 12px 10px; }
  .sale-timer span { min-width: 0; flex: 1; }
  .sale-timer b { font-size: 24px; }
  .sale-timer small { font-size: 9.5px; }

  /* category cards — image on top, centered */
  .catgrid, .infogrid, .footgrid { grid-template-columns: 1fr; }
  .cat-card { flex-direction: column-reverse; justify-content: flex-end; text-align: center; gap: 14px; min-height: 0; padding: 40px 20px 30px; }
  .cat-card::before { top: 34%; left: 50%; width: 58%; }
  .cat-card img { width: 150px; height: 150px; }
  .cat-card .cat-icon { font-size: 74px; }
  .cat-card strong { font-size: 29px; }
  .cat-card small { font-size: 15px; }

  .footer { flex-direction: column; text-align: center; }
}

/* breadcrumbs */
.crumbs { display: inline-flex; align-items: center; gap: 10px; margin: 8px 3px 20px; color: #999; font-size: 14px; }
.crumbs a { color: #999; transition: color .15s; }
.crumbs a:hover { color: #fff; }
.crumbs i { font-size: 10px; color: #555; }

/* product grid — old-theme horizontal cards with shine streaks */
.prodgrid { margin-bottom: 40px; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.product-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 32px; min-height: 280px; padding: 36px; border: 5px solid #2b2b2b; border-radius: 10px; background: #222; }
.product-card::before { content: ''; position: absolute; z-index: 0; top: -35%; bottom: -35%; left: 37%; width: 42%; transform: skewX(-28deg); background: rgba(255,255,255,.014); pointer-events: none; }
.product-card::after { content: ''; position: absolute; z-index: 0; top: -25%; bottom: -25%; left: 50%; width: 27%; transform: skewX(-28deg); background: rgba(0,0,0,.055); pointer-events: none; }
.product-art { position: relative; z-index: 1; display: grid; place-items: center; width: 190px; height: 190px; overflow: hidden; border-radius: 10px; background: #2b2b2b; font-size: 56px; color: #4a4a4a; }
.product-art img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 8px 5px rgba(0,0,0,.22)); }
.product-details { position: relative; z-index: 1; min-width: 0; align-self: center; }
.product-details h3 { color: #fff; font-size: 22px; line-height: 1.25; font-weight: 800; overflow-wrap: anywhere; }
.product-details > strong { display: block; margin-top: 20px; color: var(--acc); font-size: 17px; font-weight: 800; }
.product-details > strong s { color: #777; font-weight: 500; }
.product-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 20px; }
.product-actions a, .product-actions button { display: grid; place-items: center; height: 48px; border: none; border-radius: 8px; color: #fff; font-size: 16px; transition: transform .16s, filter .16s; }
.product-actions a:hover, .product-actions button:hover { transform: translateY(-2px); filter: brightness(1.1); }
.product-info-button { background: var(--acc); }
.product-cart-button { background: #0054c2; }
.empty-category { grid-column: 1 / -1; padding: 55px 20px; border: 1.5px dashed #333; color: #777; text-align: center; font-size: 14px; }

/* forum pages */
.forum-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; padding: 24px 28px; }
.forum-head h1 { font-size: 27px; font-weight: 800; }
.forum-head h1 i { color: var(--acc); margin-right: 10px; }
.forum-head p { margin-top: 6px; color: #999; font-size: 13.5px; }
.fcat-grid { display: grid; gap: 14px; margin-top: 20px; }
.fcat-card { display: flex; align-items: center; gap: 20px; padding: 20px 24px; transition: transform .15s, border-color .15s; }
.fcat-card:hover { transform: translateY(-3px); border-color: var(--acc); }
.fcat-icon { flex-shrink: 0; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(134,194,50,.16); color: var(--acc); font-size: 22px; }
.fcat-info { flex: 1; min-width: 0; }
.fcat-info strong { display: block; font-size: 18px; font-weight: 700; }
.fcat-info strong i { color: #777; font-size: 13px; margin-left: 7px; }
.fcat-info p { margin-top: 4px; color: #999; font-size: 12.5px; }
.fcat-meta { flex-shrink: 0; text-align: right; color: #777; }
.fcat-meta b { display: block; color: #fff; font-size: 19px; }
.fcat-meta small { display: block; font-size: 10.5px; }
.fthread-list { display: grid; gap: 10px; margin-top: 4px; }
.fthread { display: flex; align-items: center; gap: 16px; padding: 15px 20px; transition: transform .15s, border-color .15s; }
.fthread:hover { transform: translateY(-2px); border-color: var(--acc); }
.fava { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.fava-i { display: grid; place-items: center; background: rgba(134,194,50,.16); color: var(--acc); font-size: 18px; }
.fthread-info { flex: 1; min-width: 0; }
.fthread-info strong { display: block; font-size: 16px; font-weight: 700; }
.fthread-info small { display: block; margin-top: 3px; color: #888; font-size: 11.5px; }

/* thread view */
.fpost { padding: 24px 28px; margin-bottom: 14px; }
.fpost-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.fpost-who strong { display: flex; align-items: center; gap: 7px; font-size: 16.5px; font-weight: 700; }
.fpost-who small { display: block; margin-top: 3px; color: #888; font-size: 12px; }
.fbadge { width: 19px; height: 19px; object-fit: contain; vertical-align: -3px; }
.fbadge-wrap { position: relative; display: inline-block; }
.fbadge-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); padding: 5px 11px; border: 1.5px solid var(--card-border); border-radius: 7px; background: #262626; color: #eee; font-size: 11.5px; font-weight: 600; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s, transform .15s, visibility .15s; z-index: 50; }
.fbadge-wrap:hover .fbadge-tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.fedited { color: #777; font-size: 10px; font-style: normal; letter-spacing: .06em; }
.fpost-title { margin-bottom: 12px; font-size: 24px; font-weight: 800; }
.fpost-body { color: #ccc; font-size: 14.5px; line-height: 1.8; white-space: pre-wrap; }
.freply-head { margin: 26px 4px 16px; color: #aaa; font-size: 15px; font-weight: 700; }
.freply-head i { color: var(--acc); margin-right: 8px; }
.fpost-signin { padding: 20px 24px; color: #999; font-size: 13.5px; text-align: center; }
.fpost-signin i { color: var(--acc); margin-right: 8px; }
.fpost-signin a { color: var(--acc); font-weight: 700; }

/* news feed */
.news-list { display: grid; gap: 16px; margin-top: 20px; }
.news-card { padding: 26px 30px; }
.news-pinned { border-color: #333; }
.pin-chip { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 4px 12px; border-radius: 99px; background: rgba(134,194,50,.16); color: var(--acc); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.news-type { color: var(--acc); font-weight: 600; text-transform: capitalize; }
.news-img { display: block; max-width: 100%; max-height: 380px; margin-top: 16px; border: 1.5px solid #333; border-radius: 12px; object-fit: cover; }

/* static content pages — big boxed sections */
.page-body { display: grid; gap: 16px; margin-top: 20px; margin-bottom: 40px; }
.page-sec { display: flex; align-items: center; gap: 22px; padding: 26px 30px; transition: transform .15s, border-color .15s; }
.page-sec:hover { transform: translateY(-2px); border-color: var(--acc); }
.page-sec-icon { flex-shrink: 0; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: rgba(134,194,50,.16); color: var(--acc); font-size: 22px; }
.page-sec h3 { margin-bottom: 6px; color: #fff; font-size: 18px; font-weight: 700; }
.page-sec p { color: #aaa; font-size: 13.5px; line-height: 1.7; }
.page-sec p .btn { margin-top: 4px; }
.page-single { padding: 34px 38px; }
.page-single h3 { margin: 26px 0 10px; color: var(--acc); font-size: 17px; font-weight: 700; }
.page-single h3 i { margin-right: 10px; }
.page-single h3:first-child { margin-top: 0; }
.page-single p { color: #bbb; font-size: 14px; line-height: 1.8; }

@media (max-width: 900px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-card { grid-template-columns: 150px 1fr; gap: 22px; min-height: 230px; padding: 24px; }
  .product-art { width: 150px; height: 150px; }
}
@media (max-width: 560px) {
  .product-card { grid-template-columns: 1fr; text-align: center; }
  .product-art { margin: 0 auto; }
  .fcat-meta { display: none; }
}

/* product info dialog */
.pd-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.82); backdrop-filter: blur(8px); animation: pd-in .18s ease; }
@keyframes pd-in { from { opacity: 0 } to { opacity: 1 } }
.pd-dialog { position: relative; width: min(600px, 100%); padding: 34px 36px 30px; border: 4px solid #303030; border-radius: 10px; background: #222; box-shadow: 0 24px 70px rgba(0,0,0,.75); animation: pd-up .22s cubic-bezier(.2,1.4,.4,1); }
@keyframes pd-up { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
.pd-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 32px; height: 32px; border: none; border-radius: 6px; background: var(--acc); color: #fff; font-size: 20px; font-weight: 700; transition: filter .15s, transform .15s; }
.pd-close:hover { filter: brightness(1.15); transform: rotate(90deg); }
.pd-head { display: flex; align-items: center; gap: 24px; }
.pd-art { flex-shrink: 0; width: 150px; height: 150px; }
.pd-head h2 { color: #fff; font-size: 24px; font-weight: 800; line-height: 1.25; }
.pd-price { display: block; margin-top: 12px; color: var(--acc); font-size: 19px; font-weight: 800; }
.pd-price s { color: #777; font-weight: 500; }
.pd-desc { margin-top: 26px; color: #ddd; font-size: 14px; line-height: 1.8; }
.pd-divider { height: 3px; margin-top: 24px; background: #2c2c2c; }
.pd-foot { display: flex; justify-content: flex-end; padding-top: 20px; }
@media (max-width: 560px) {
  .pd-head { flex-direction: column; text-align: center; }
}

/* admin */
.adm-login { width: min(460px, 94vw); margin: 60px auto 80px; padding: 38px 40px 42px; text-align: center; }
.adm-login h1 { font-size: 26px; font-weight: 800; }
.adm-login h1 i { color: var(--acc); margin-right: 10px; }
.adm-login > p { margin-top: 8px; color: #999; font-size: 13px; }
.adm-login form { display: grid; gap: 14px; margin-top: 26px; }
.adm-login input { height: 50px; padding: 0 18px; border: 1.5px solid #333; border-radius: 8px; background: #171717; color: #fff; font-size: 14px; font-family: inherit; outline: 0; }
.adm-login input:focus { border-color: var(--acc); }
.adm-error { color: #f66; font-size: 13px; }
.adm-tabs { display: flex; gap: 10px; margin-top: 18px; }
.adm-tab { padding: 12px 22px; border: 1.5px solid #333; border-radius: 8px; background: #1d1d1d; color: #ccc; font-size: 14px; font-weight: 600; transition: all .15s; }
.adm-tab i { margin-right: 8px; }
.adm-tab:hover { color: #fff; }
.adm-tab.active { background: var(--acc); border-color: var(--acc); color: #fff; }
.adm-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; }
.adm-stat { display: flex; align-items: center; gap: 18px; padding: 22px 24px; }
.adm-stat i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(134,194,50,.16); color: var(--acc); font-size: 20px; }
.adm-stat small { display: block; color: #888; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.adm-stat b { display: block; margin-top: 3px; color: #fff; font-size: 22px; font-weight: 800; }
.adm-h { margin: 28px 2px 14px; font-size: 17px; font-weight: 700; }
.adm-table { padding: 6px 0; overflow-x: auto; }
.adm-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.adm-table th { padding: 14px 20px; color: #888; font-size: 11px; font-weight: 700; text-align: left; text-transform: uppercase; letter-spacing: .07em; border-bottom: 1.5px solid #2b2b2b; }
.adm-table td { padding: 14px 20px; color: #ddd; border-bottom: 1px solid #242424; }
.adm-table tr:last-child td { border-bottom: none; }
.adm-status { padding: 4px 12px; border-radius: 99px; background: rgba(134,194,50,.16); color: var(--acc); font-size: 11px; font-weight: 700; text-transform: capitalize; }
.adm-sub { margin-top: 10px; color: #888; font-size: 12px; }
.adm-note { margin-top: 26px; color: #777; font-size: 12.5px; }
.adm-note a { color: var(--acc); font-weight: 600; }
@media (max-width: 900px) { .adm-cards { grid-template-columns: 1fr 1fr; } }

/* ---- auth / user / cart ---- */
.cart-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-left: 8px; padding: 0 6px; border-radius: 99px; background: #fff; color: var(--acc-dark); font-size: 12px; font-weight: 800; }
.cur-drop { min-width: 130px; }
.cur-drop a { display: flex; align-items: center; justify-content: space-between; }
.cur-drop a i { margin-left: 10px; }
.cur-drop a.cur-on { color: #fff; font-weight: 700; }
.cur-drop a.cur-on i { color: var(--acc); }
.co-inr-note { display: block; width: 100%; margin-top: 8px; text-align: right; color: #9a9a9a; font-size: 12px; }
.user-chip { display: flex; align-items: center; gap: 9px; padding: 8px 14px; border: 2px solid var(--card-border); border-radius: 10px; background: #161616; }
.user-chip img, .user-chip .fava { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; }
.user-chip strong { font-size: 14px; }
.user-logout { border: none; background: none; color: #888; font-size: 15px; cursor: pointer; padding: 4px; }
.user-logout:hover { color: #ff5c5c; }
a.user-admin { color: #888; font-size: 15px; padding: 4px; transition: color .15s; }
a.user-admin:hover { color: var(--acc); }

.auth-dialog { max-width: 420px; }
.auth-dialog h2 { margin: 0 0 4px; font-size: 22px; }
.auth-dialog h2 i { color: var(--acc); margin-right: 8px; }
.auth-sub { margin: 0 0 14px; color: #9a9a9a; font-size: 13px; }
.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-form input, .auth-form textarea { width: 100%; padding: 13px 15px; border: 2px solid var(--card-border); border-radius: 9px; background: #161616; color: #eee; font: inherit; font-size: 14px; }
.auth-form input:focus, .auth-form textarea:focus { outline: none; border-color: var(--acc); }
.auth-form input:-webkit-autofill, .auth-form textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0 60px #161616 inset; -webkit-text-fill-color: #eee; caret-color: #eee; }
.auth-error { margin: 0; color: #ff5c5c; font-size: 13px; font-weight: 600; }
.auth-form .btn { margin-top: 14px; padding: 12px 18px; font-size: 14px; }
.auth-switch { border: none; background: none; color: #8a8a8a; font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; padding: 4px; }
.auth-switch b { color: var(--acc); font-weight: 700; }
.auth-switch:hover b { text-decoration: underline; }
.auth-wrap { display: flex; justify-content: center; margin-top: 21px; }
.auth-card { position: relative; width: 100%; max-width: 480px; padding: 36px 40px; overflow: hidden; }
.auth-card-head { padding-bottom: 18px; border-bottom: 2px solid var(--card-border); }
.auth-card-head h2 { margin: 0; font-size: 24px; }
.auth-card-head p { margin: 6px 0 0; color: #8a8a8a; font-size: 13.5px; }
.auth-ava { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 0; border: none; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.auth-ava-ring { display: grid; place-items: center; width: 64px; height: 64px; border: 2px dashed var(--card-border); border-radius: 50%; color: #555; font-size: 22px; overflow: hidden; transition: border-color .15s, color .15s; }
.auth-ava:hover .auth-ava-ring { border-color: var(--acc); color: var(--acc); }
.auth-ava-ring img { width: 100%; height: 100%; object-fit: cover; }
.auth-ava-text { font-size: 13.5px; font-weight: 600; color: #ccc; }
.auth-ava-text small { display: block; font-size: 11px; font-weight: 500; color: #777; }
.auth-submit { justify-content: center; width: 100%; margin-top: 4px; padding: 12px 18px; font-size: 14.5px; }
.auth-card .auth-switch { display: block; margin: 18px auto 0; }
.auth-card label em { color: #666; font-style: normal; text-transform: none; letter-spacing: 0; }

/* ---- basket / checkout ---- */
.basket-dialog { max-width: 520px; }
.basket-tag { display: block; color: #9a9a9a; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.basket-dialog h2 { margin: 4px 0 14px; }
.basket-list { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; }
.basket-list article { display: flex; align-items: center; gap: 12px; padding: 10px; border: 2px solid var(--card-border); border-radius: 10px; background: #161616; }
.basket-art { display: grid; place-items: center; width: 52px; height: 52px; flex-shrink: 0; border-radius: 8px; background: #0d0d0d; overflow: hidden; }
.basket-art img { width: 44px; height: 44px; object-fit: contain; }
.basket-art i { color: #555; font-size: 20px; }
.basket-list article div:nth-child(2) { flex: 1; }
.basket-list article strong { display: block; font-size: 14px; }
.basket-list article span { color: var(--acc); font-size: 13px; font-weight: 700; }
.basket-list article button { border: none; background: none; color: #888; font-size: 15px; cursor: pointer; padding: 6px; }
.basket-list article button:hover { color: #ff5c5c; }
.basket-total { display: flex; justify-content: space-between; margin: 14px 0; padding-top: 12px; border-top: 2px solid var(--card-border); font-size: 15px; }
.basket-total strong { color: var(--acc); font-size: 18px; }
.basket-go { width: 100%; padding: 13px 18px; font-size: 14px; font-weight: 800; letter-spacing: .04em; }
.empty-basket { padding: 30px 0; text-align: center; color: #9a9a9a; }
.empty-basket > i { display: block; font-size: 34px; margin-bottom: 10px; opacity: .5; }
.checkout-fields { display: flex; flex-direction: column; gap: 10px; }
.checkout-fields p { margin: 0 0 4px; font-size: 14px; color: #bbb; }
.checkout-fields input { width: 100%; padding: 13px 15px; border: 2px solid var(--card-border); border-radius: 9px; background: #161616; color: #eee; font: inherit; font-size: 14px; }
.checkout-fields input:focus { outline: none; border-color: var(--acc); }
.checkout-fields input:-webkit-autofill { -webkit-box-shadow: 0 0 0 60px #161616 inset; -webkit-text-fill-color: #eee; caret-color: #eee; }

/* ---- forum posting ---- */
.forum-head-actions { display: flex; align-items: center; gap: 10px; }
.post-menu-btn { border: none; background: none; color: #888; font-size: 16px; cursor: pointer; padding: 6px 10px; border-radius: 6px; }
.post-menu-btn:hover { color: #fff; background: rgba(255,255,255,.06); }
.post-menu { position: absolute; top: 44px; right: 16px; z-index: 20; display: flex; flex-direction: column; min-width: 150px; padding: 6px; border: 2px solid var(--card-border); border-radius: 10px; background: #232323; box-shadow: 0 14px 30px rgba(0,0,0,.5); }
.fstaff { display: inline-block; margin-left: 5px; padding: 2px 7px; border-radius: 5px; background: var(--acc); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .08em; vertical-align: 2px; }
.fpin { display: inline-block; margin-right: 9px; padding: 4px 10px; border-radius: 6px; background: rgba(134,194,50,.14); color: var(--acc); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: 3px; }
.fpin i { margin-right: 5px; }
.fpin-i { color: var(--acc); }
.flock-i { color: #f59e0b; }
.flock { background: rgba(245,158,11,.14); color: #f59e0b; }
.post-menu button { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: none; border-radius: 7px; background: none; color: #ddd; font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.post-menu button:hover { background: rgba(255,255,255,.07); }
.post-menu button.danger { color: #ff5c5c; }
.fpost { position: relative; }
.fpost-head { display: flex; align-items: center; gap: 12px; }
.fpost-head .post-menu-btn { margin-left: auto; }
.fedit-area { width: 100%; padding: 12px; border: 2px solid var(--card-border); border-radius: 9px; background: #161616; color: #eee; font: inherit; font-size: 14px; resize: vertical; }
.fedit-area:focus { outline: none; border-color: var(--acc); }
.fedit-actions { display: flex; gap: 8px; margin-top: 10px; }
.fedit-actions .btn { padding: 9px 16px; font-size: 13px; }
.freply-box { margin-top: 18px; padding: 20px; }
.freply-box textarea { width: 100%; margin: 14px 0 12px; padding: 12px; border: 2px solid var(--card-border); border-radius: 9px; background: #161616; color: #eee; font: inherit; font-size: 14px; resize: vertical; }
.freply-box textarea:focus { outline: none; border-color: var(--acc); }
.linklike { border: none; background: none; padding: 0; color: var(--acc); font: inherit; font-weight: 700; cursor: pointer; }
.linklike:hover { text-decoration: underline; }
.cart-count[hidden] { display: none; }

/* ---- checkout dialog (ref style) ---- */
.co-dialog { max-width: 760px; width: 94vw; }
.co-page { margin-top: 21px; padding: 34px 38px; }
.nt-page { margin-top: 21px; padding: 34px 38px; }
.nt-head { padding-bottom: 16px; border-bottom: 2px solid var(--card-border); }
.nt-head h2 { margin: 0; font-size: 24px; }
.nt-head p { margin: 6px 0 0; color: #8a8a8a; font-size: 13px; }
.nt-form { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.nt-form label { display: flex; flex-direction: column; gap: 7px; }
.nt-form label span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a8a8a; }
.nt-form input, .nt-form textarea { padding: 13px 15px; border: 1.5px solid var(--card-border); border-radius: 10px; background: #161616; color: #eee; font: 500 15px 'Poppins', sans-serif; resize: vertical; }
.nt-form input:focus, .nt-form textarea:focus { outline: none; border-color: var(--acc); }
.nt-error { margin: 0; color: #ff5c5c; font-size: 13px; font-weight: 600; }
.nt-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; }
.nt-actions .btn { padding: 11px 22px; font-size: 14.5px; }
.nt-actions .btn[disabled] { opacity: .55; cursor: default; }
.empty-basket .btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 11px 18px; font-size: 14px; }
.co-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 2px solid var(--card-border); }
.co-head h2 { margin: 0; font-size: 24px; }
.co-total { color: #22c55e; font-size: 20px; font-weight: 800; }
.co-table { margin-top: 16px; }
.co-row { display: grid; grid-template-columns: 1.6fr .8fr .9fr auto; align-items: center; gap: 14px; padding: 14px 4px; }
.co-row-head { padding: 8px 4px; border-bottom: 2px solid var(--card-border); color: #8a8a8a; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.co-name { font-size: 15px; font-weight: 700; }
.co-price { color: var(--acc); font-size: 14px; font-weight: 800; }
.co-qty { display: inline-flex; align-items: center; gap: 0; border: 2px solid var(--card-border); border-radius: 8px; overflow: hidden; }
.co-qty b { min-width: 34px; text-align: center; font-size: 14px; }
.co-qty button { width: 30px; height: 32px; border: none; background: #161616; color: #ccc; font-size: 16px; font-weight: 800; cursor: pointer; }
.co-qty button:hover { background: var(--acc); color: #fff; }
.co-actions { display: flex; gap: 8px; }
.co-actions button { width: 36px; height: 36px; border: none; border-radius: 8px; color: #fff; font-size: 14px; cursor: pointer; }
.co-info { background: var(--acc); }
.co-trash { background: #ef4444; }
.co-sub { margin: 22px 0 0; padding-top: 16px; border-top: 2px solid var(--card-border); font-size: 19px; }
.co-checks { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.co-checks label { display: flex; align-items: flex-start; gap: 10px; color: #c9c9c9; font-size: 13px; cursor: pointer; }
.co-checks input { margin-top: 2px; accent-color: var(--acc); }
.co-checks a { color: var(--acc); font-weight: 600; }
.co-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; padding-top: 16px; border-top: 2px solid var(--card-border); }
.checkout-fields .co-foot { border-top: none; margin-top: 10px; padding-top: 0; }
.checkout-fields .btn { padding: 11px 20px; font-size: 14.5px; gap: 9px; }
.co-back { border: none; background: none; color: #888; padding-left: 0 !important; }
.co-back:hover { color: #fff; filter: none; transform: none; }
.co-pay-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.co-checkout { background: var(--acc); color: #fff; font-weight: 800; }
.co-checkout:disabled { opacity: .4; cursor: not-allowed; }
.co-checkout:not(:disabled):hover { filter: brightness(1.12); }
@media (max-width: 640px) { .co-row { grid-template-columns: 1fr auto; } .co-row-head { display: none; } .co-qty { grid-column: 1; } }

/* sale pricing */
.product-card { position: relative; }
.product-sale-tag { position: absolute; top: 0; right: 0; z-index: 3; padding: 8px 15px; border-radius: 0 0 0 10px; background: #57d94a; color: #14532d; font-size: 12.5px; font-weight: 900; letter-spacing: .05em; box-shadow: -3px 3px 10px rgba(0,0,0,.35); }
.product-details .product-sale-tag { border-radius: 0 10px 0 10px; }
.price-old { margin-right: 8px; color: #8a8a8a; font-size: .82em; font-weight: 600; text-decoration: line-through; }
.price-new { color: #57d94a; }
.product-details .price-old, .co-price .price-old { font-size: 15px; }
.product-details .price-new, .co-price .price-new { font-size: 23px; font-weight: 800; }
.co-price .price-old { font-size: 13px; } .co-price .price-new { font-size: 16px; }

/* preorder notice */
.preorder-note { grid-column: 1 / -1; padding: 18px 24px; border: 2px dashed #3d3d3d; border-radius: 12px; background: rgba(255,255,255,.02); color: #999; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-align: center; }

/* soon badge on sale bar */
.sale-soon { position: absolute; top: -11px; right: -12px; padding: 5px 12px; border-radius: 999px; background: linear-gradient(135deg, #38bdf8 0%, #2563eb 55%, #1e3a8a 100%); color: #fff; font-size: 10.5px; font-weight: 900; letter-spacing: .12em; box-shadow: 0 4px 14px rgba(37,99,235,.5), inset 0 1px 0 rgba(255,255,255,.3); }

/* no accent strip on the welcome box */
.headbar .card-accent { display: none; }

/* floating logo animation */
@keyframes logoFloat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.headbar-logo img { animation: logoFloat 6.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .headbar-logo img { animation: none; } }