:root{--bg:#0b1120;--accent:#a855f7;--lg-red:#a50034;--success:#10b981;--border:rgba(255,255,255,.08);--text:#f1f5f9;--muted:#94a3b8}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',-apple-system,sans-serif}
body{background:var(--bg);color:var(--text);height:100vh;overflow:hidden;background-image:radial-gradient(at 0% 0%,rgba(168,85,247,.12),transparent 50%)}
.app-container{display:flex;height:100vh;gap:0}
.mobile-toggle{display:none;position:fixed;bottom:1.5rem;right:1.5rem;z-index:500;background:var(--accent);color:#fff;border:none;padding:.75rem 1.25rem;border-radius:99px;font-weight:700;font-size:.85rem;cursor:pointer;box-shadow:0 4px 20px rgba(168,85,247,.4)}
.admin-pane{width:340px;flex-shrink:0;background:rgba(15,23,42,.97);border-right:1px solid var(--border);display:flex;flex-direction:column}
.admin-header{padding:1rem 1.25rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.logo{font-size:1rem;font-weight:800;display:flex;align-items:center;gap:.5rem}.logo span{color:var(--accent)}
.status-badge{display:flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:600;color:var(--success);background:rgba(16,185,129,.1);padding:.15rem .6rem;border-radius:99px}
.pulse-dot{width:6px;height:6px;border-radius:50%;background:var(--success);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.chat-container{flex:1;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem}
.message{display:flex;gap:.6rem;max-width:92%;animation:fadeUp .25s ease}
.message.user-message{align-self:flex-end;flex-direction:row-reverse}
.avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#38bdf8);display:flex;align-items:center;justify-content:center;font-size:.7rem;flex-shrink:0}
.user-message .avatar{background:#475569}
.bubble{background:rgba(255,255,255,.04);padding:.75rem;border-radius:10px;font-size:.85rem;line-height:1.55;border:1px solid var(--border)}
.user-message .bubble{background:var(--accent);border-color:var(--accent);color:#fff}
.suggestion-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem}
.chip{background:rgba(168,85,247,.15);color:var(--accent);border:1px solid rgba(168,85,247,.3);padding:.3rem .6rem;border-radius:99px;font-size:.72rem;font-weight:600;cursor:pointer;transition:.2s}
.chip:hover{background:var(--accent);color:#fff}

.rollout-steps{margin-top:.5rem}
.rollout-step{padding:.25rem 0;font-size:.78rem;animation:fadeUp .3s ease;border-bottom:1px solid rgba(255,255,255,.05)}
.ai-card{background:rgba(0,0,0,.4);border:1px solid var(--accent);border-radius:8px;padding:.85rem;margin-top:.6rem}
.ai-card-title{font-weight:700;font-size:.82rem;color:#e2e8f0;margin-bottom:.4rem}
.ai-card-details{font-size:.75rem;color:var(--muted);line-height:1.7;margin-bottom:.6rem}
.btn{padding:.35rem .7rem;border-radius:6px;border:none;font-weight:600;font-size:.75rem;cursor:pointer;transition:.15s}
.btn-approve{background:var(--success);color:#fff;margin-right:.4rem}.btn-reject{background:#475569;color:#fff}
.chat-input-area{padding:.8rem;border-top:1px solid var(--border);display:flex;gap:.5rem}
#chatInput{flex:1;background:rgba(0,0,0,.3);border:1px solid var(--border);padding:.65rem 1rem;border-radius:99px;color:#fff;font-size:.85rem;outline:none}
#chatInput:focus{border-color:var(--accent)}
#sendBtn{background:var(--accent);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;color:#fff;cursor:pointer;font-size:.85rem}
.store-pane{flex:1;background:#fff;overflow-y:auto;overflow-x:hidden;color:#111;scroll-behavior:smooth}
.lg-topbar{background:#333;color:#ccc;padding:.35rem 2rem;display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:500}
.topbar-right{display:flex;align-items:center;gap:1rem}
.region-pill{background:rgba(255,255,255,.15);padding:2px 10px;border-radius:4px;font-weight:700;color:#fff;transition:.3s}
.lg-gnb{display:flex;justify-content:space-between;align-items:center;padding:.9rem 2rem;border-bottom:1px solid #eee;position:sticky;top:0;background:#fff;z-index:100}
.gnb-left{display:flex;align-items:center;gap:2rem}.lg-wordmark{font-size:2rem;font-weight:900;color:var(--lg-red);font-family:Arial,Helvetica,sans-serif;letter-spacing:-2px}
.gnb-link{text-decoration:none;color:#555;font-weight:600;font-size:13px;padding:.3rem 0;border-bottom:2px solid transparent;transition:.2s}
.gnb-link:hover,.gnb-link.active{color:#000;border-bottom-color:var(--lg-red)}
.gnb-right{display:flex;gap:1.2rem;font-size:1.15rem;color:#333;cursor:pointer;align-items:center}
.cart-icon-wrap{position:relative;cursor:pointer}
.cart-badge{position:absolute;top:-8px;right:-10px;background:var(--lg-red);color:#fff;font-size:.6rem;font-weight:800;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.3s}
.cart-badge.bump{animation:cartBump .4s ease}
@keyframes cartBump{0%{transform:scale(1)}50%{transform:scale(1.5)}100%{transform:scale(1)}}
.hero-section{position:relative;height:480px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;animation:heroZoom 20s ease infinite alternate}
@keyframes heroZoom{0%{transform:scale(1)}100%{transform:scale(1.08)}}
.hero-shade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.35) 50%,transparent 100%)}
.hero-text{position:relative;z-index:2;padding:5rem 3rem;color:#fff;max-width:550px}
.hero-label{font-size:.8rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;margin-bottom:.75rem;color:rgba(255,255,255,.7)}
.hero-text h1{font-size:2.8rem;font-weight:900;line-height:1.1;margin-bottom:1rem;letter-spacing:-1px}
.hero-desc{font-size:1.05rem;line-height:1.6;margin-bottom:2rem;font-weight:300;opacity:.85}
.hero-cta{display:inline-block;background:var(--lg-red);color:#fff;text-decoration:none;padding:.85rem 2.25rem;border-radius:99px;font-weight:700;font-size:.95rem;transition:.25s;border:none;cursor:pointer}
.hero-cta:hover{background:#8a002b;transform:translateY(-2px)}
.promo-ribbon{display:flex;justify-content:center;gap:3rem;padding:.8rem 2rem;background:#f7f7f7;border-bottom:1px solid #eee;font-size:12px;color:#555;font-weight:600}
.promo-item{display:flex;align-items:center;gap:.4rem}
.product-section{padding:3rem 2rem 2rem}
.section-heading{font-size:1.8rem;font-weight:800;margin-bottom:1.5rem;letter-spacing:-1px}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.product-card{border:1px solid #eee;border-radius:12px;overflow:hidden;cursor:pointer;transition:.3s;position:relative}
.product-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.07)}
.product-card:hover .pc-img img{transform:scale(1.05)}
.pc-img{background:#f8f8f8;height:220px;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative}
.pc-img img{max-width:85%;max-height:85%;object-fit:contain;transition:.5s}
.pc-badge{position:absolute;top:.75rem;left:.75rem;background:var(--lg-red);color:#fff;padding:.2rem .5rem;border-radius:4px;font-size:.7rem;font-weight:700;z-index:2;animation:popIn .4s cubic-bezier(.175,.885,.32,1.275)}
.pc-body{padding:1rem 1.25rem 1.25rem}
.pc-cat{font-size:.7rem;color:#999;text-transform:uppercase;font-weight:600;margin-bottom:.3rem}
.pc-name{font-weight:700;font-size:1rem;margin-bottom:.5rem;line-height:1.3}
.pc-prices{display:flex;align-items:baseline;gap:.4rem;margin-bottom:.75rem}
.pc-price{font-weight:800;font-size:1.2rem}.pc-orig{text-decoration:line-through;color:#bbb;font-size:.85rem}
.pc-buy{width:100%;background:#111;color:#fff;border:none;padding:.65rem;border-radius:8px;font-weight:600;font-size:.85rem;cursor:pointer;transition:.15s}
.pc-buy:hover{background:#333}

/* Bundle card */
.bundle-card{border:2px solid var(--lg-red);background:linear-gradient(145deg,#fff 0%,#fff5f7 100%)}
.bundle-card .pc-badge{position:absolute;top:.75rem;left:.75rem;z-index:3}
.bundle-img-grid{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;background:#f8f8f8;min-height:200px;flex-wrap:wrap}
.bundle-thumb{display:flex;flex-direction:column;align-items:center;gap:.25rem;flex:1;min-width:0}
.bundle-thumb img{width:100%;max-width:100px;height:80px;object-fit:contain}
.bundle-thumb-name{font-size:.6rem;color:#777;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}
.bundle-plus{font-size:1.5rem;font-weight:900;color:var(--lg-red);flex-shrink:0}
.bundle-composition{font-size:.72rem;color:#888;margin-bottom:.4rem;line-height:1.4}
.bundle-savings{background:linear-gradient(90deg,#fff0f3,#ffe0e6);color:var(--lg-red);font-weight:700;font-size:.8rem;padding:.4rem .6rem;border-radius:6px;margin-bottom:.5rem;text-align:center}

/* Modal bundle */
.modal-img-wrap{flex:1;background:#f8f8f8;border-radius:12px;display:flex;align-items:center;justify-content:center;min-height:250px;flex-wrap:wrap;gap:.5rem;padding:1rem}
.modal-bundle-item{display:flex;flex-direction:column;align-items:center;gap:.4rem;flex:1;min-width:80px}
.modal-bundle-item img{max-width:120px;max-height:100px;object-fit:contain}
.modal-bundle-item span{font-size:.7rem;font-weight:600;color:#555;text-align:center}
.modal-bundle-plus{font-size:2rem;font-weight:900;color:var(--lg-red)}
.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);background:#111;color:#fff;padding:.75rem 1.5rem;border-radius:99px;font-size:.85rem;font-weight:600;z-index:600;animation:toastIn .3s ease,toastOut .3s ease 1.5s forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes toastOut{from{opacity:1}to{opacity:0}}
.store-footer{background:#f2f2f2;padding:3rem 2rem 1rem;display:flex;flex-wrap:wrap;gap:2rem;border-top:1px solid #ddd}
.footer-col{min-width:140px}.footer-col h4{font-size:.9rem;margin-bottom:1rem;font-weight:700}
.footer-col p{font-size:.8rem;color:#666;margin-bottom:.5rem;cursor:pointer}.footer-col p:hover{color:#000}
.footer-bottom{width:100%;text-align:center;padding-top:2rem;font-size:.75rem;color:#999;border-top:1px solid #ddd;margin-top:1rem}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:999;display:none;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal-content{background:#fff;border-radius:16px;width:90%;max-width:900px;max-height:90vh;overflow-y:auto;position:relative;color:#111;animation:fadeUp .3s ease}
.modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.3rem;cursor:pointer;z-index:10;color:#555}
.modal-body{display:flex;gap:2rem;padding:2.5rem}
.modal-img-wrap{flex:1;background:#f8f8f8;border-radius:12px;display:flex;align-items:center;justify-content:center;min-height:250px}
.modal-img-wrap img{max-width:90%;max-height:300px;object-fit:contain}
.modal-info{flex:1;display:flex;flex-direction:column;gap:.75rem}
.modal-cat{font-size:.75rem;color:#999;text-transform:uppercase;font-weight:700;letter-spacing:1px}
.modal-info h2{font-size:1.6rem;font-weight:800;line-height:1.2}
.modal-desc{font-size:.9rem;color:#666;line-height:1.6}
.modal-price-wrap{display:flex;align-items:baseline;gap:.5rem}.modal-price{font-size:1.6rem;font-weight:800}.modal-orig{text-decoration:line-through;color:#bbb;font-size:1rem}
.modal-badge-area .coupon-tag{display:inline-block;background:var(--lg-red);color:#fff;padding:.25rem .6rem;border-radius:4px;font-size:.75rem;font-weight:700}
.modal-actions{display:flex;gap:.5rem;margin-top:.5rem}
.modal-buy-btn{flex:1;background:var(--lg-red);color:#fff;border:none;padding:.85rem;border-radius:10px;font-weight:700;font-size:1rem;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center;gap:.5rem}
.modal-buy-btn:hover{background:#8a002b}
.modal-wish-btn{width:50px;background:#f1f5f9;border:none;border-radius:10px;font-size:1.1rem;cursor:pointer;color:#555}
.modal-specs{border-top:1px solid #eee;padding-top:.75rem;margin-top:.5rem}
.spec-row{display:flex;justify-content:space-between;padding:.4rem 0;font-size:.85rem;border-bottom:1px solid #f5f5f5}
.spec-row span:first-child{color:#999;font-weight:500}
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:998;display:none}
.cart-overlay.open{display:block}
.cart-drawer{position:fixed;top:0;right:0;width:400px;max-width:90vw;height:100vh;background:#fff;color:#111;z-index:999;display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(0,0,0,.15);animation:slideRight .3s ease}
@keyframes slideRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
.cart-drawer-header{padding:1.25rem 1.5rem;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}
.cart-drawer-header h3{font-size:1.1rem;font-weight:800;display:flex;align-items:center;gap:.5rem}
.cart-items{flex:1;overflow-y:auto;padding:1rem 1.5rem}
.cart-empty{text-align:center;color:#999;padding:3rem 0;font-size:.9rem}
.cart-item{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid #f0f0f0;align-items:center}
.cart-item-img{width:70px;height:70px;background:#f8f8f8;border-radius:8px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.cart-item-img img{max-width:90%;max-height:90%;object-fit:contain}
.cart-item-info{flex:1}.cart-item-name{font-weight:700;font-size:.9rem;margin-bottom:.25rem}
.cart-item-price{font-weight:800;font-size:.95rem;color:var(--lg-red)}
.cart-item-qty{display:flex;align-items:center;gap:.5rem;margin-top:.3rem}
.qty-btn{width:26px;height:26px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-weight:700;font-size:.9rem}
.cart-item-remove{background:none;border:none;color:#999;cursor:pointer;font-size:1rem;padding:.25rem}.cart-item-remove:hover{color:var(--lg-red)}
.cart-footer{padding:1.25rem 1.5rem;border-top:1px solid #eee}
.cart-total{display:flex;justify-content:space-between;font-size:1.1rem;font-weight:800;margin-bottom:1rem}
.checkout-btn{width:100%;background:var(--lg-red);color:#fff;border:none;padding:1rem;border-radius:10px;font-weight:700;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:.2s}
.checkout-btn:hover{background:#8a002b}
.checkout-modal{max-width:600px}
.checkout-body{padding:2.5rem}.checkout-body h2{font-size:1.6rem;font-weight:800;margin-bottom:1.5rem}
.checkout-body h3{font-size:1rem;font-weight:700;margin:1.25rem 0 .75rem;color:#333}
.checkout-summary{border:1px solid #eee;border-radius:8px;padding:1rem;margin-bottom:1rem;background:#fafafa;font-size:.85rem;max-height:150px;overflow-y:auto}
.checkout-summary .cs-row{display:flex;justify-content:space-between;padding:.3rem 0;border-bottom:1px solid #f5f5f5}
.checkout-summary .cs-total{display:flex;justify-content:space-between;padding:.5rem 0 0;font-weight:800;font-size:1rem}
.checkout-form input{width:100%;padding:.75rem 1rem;border:1px solid #ddd;border-radius:8px;font-size:.9rem;margin-bottom:.6rem;outline:none}
.checkout-form input:focus{border-color:var(--lg-red)}
.form-row{display:flex;gap:.6rem}.form-row input{flex:1}
.payment-methods{display:flex;gap:.5rem;margin-bottom:1rem}
.pay-option{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.6rem;border:2px solid #eee;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;transition:.2s}
.pay-option:has(input:checked){border-color:var(--lg-red);background:rgba(165,0,52,.05)}
.pay-option input{display:none}
.place-order-btn{width:100%;background:var(--lg-red);color:#fff;border:none;padding:1rem;border-radius:10px;font-weight:700;font-size:1rem;cursor:pointer;margin-top:1rem;display:flex;align-items:center;justify-content:center;gap:.5rem}
.place-order-btn:hover{background:#8a002b}
.order-complete{text-align:center;padding:4rem 2rem}
.order-check{font-size:5rem;color:var(--success);margin-bottom:1.5rem;animation:fadeUp .5s ease}
.order-complete h2{font-size:1.8rem;font-weight:800;margin-bottom:.5rem}
.order-complete p{color:#666;margin-bottom:1rem}
.order-number{background:#f1f5f9;display:inline-block;padding:.5rem 1.5rem;border-radius:8px;font-weight:800;font-size:1.1rem;color:#333}
@keyframes fadeUp{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}

/* ===== CS CHATBOT ===== */
.cs-fab{position:fixed;bottom:2rem;right:2rem;width:56px;height:56px;border-radius:50%;background:var(--lg-red);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;cursor:pointer;z-index:200;
  box-shadow:0 4px 20px rgba(165,0,52,.4);transition:.3s}
.cs-fab:hover{transform:scale(1.1)}
.cs-chat-window{position:fixed;bottom:6rem;right:2rem;width:360px;max-width:90vw;height:450px;background:#fff;color:#111;
  border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.2);z-index:201;display:none;flex-direction:column;overflow:hidden;animation:fadeUp .3s ease}
.cs-chat-window.open{display:flex}
.cs-chat-header{background:var(--lg-red);color:#fff;padding:1rem 1.25rem;display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:.9rem}
.cs-chat-messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}
.cs-msg{max-width:85%;animation:fadeUp .2s ease}
.cs-msg.cs-bot{align-self:flex-start}.cs-msg.cs-user{align-self:flex-end}
.cs-bubble{padding:.7rem 1rem;border-radius:12px;font-size:.85rem;line-height:1.5}
.cs-bot .cs-bubble{background:#f1f5f9;color:#333}
.cs-user .cs-bubble{background:var(--lg-red);color:#fff}
.cs-chat-input{padding:.75rem;border-top:1px solid #eee;display:flex;gap:.5rem}
.cs-chat-input input{flex:1;padding:.6rem .8rem;border:1px solid #ddd;border-radius:99px;font-size:.85rem;outline:none}
.cs-chat-input input:focus{border-color:var(--lg-red)}
.cs-chat-input button{width:36px;height:36px;border-radius:50%;background:var(--lg-red);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.8rem}
@media(max-width:768px){
  .mobile-toggle{display:flex;align-items:center;gap:.4rem}
  .app-container{flex-direction:column}.admin-pane{display:none;width:100%;height:100vh;position:fixed;top:0;left:0;z-index:400}
  .admin-pane.show{display:flex}.store-pane{width:100%}
  .lg-gnb{padding:.7rem 1rem}.gnb-left{gap:1rem;overflow-x:auto;flex-wrap:nowrap}
  .gnb-link{font-size:11px;white-space:nowrap}.lg-wordmark{font-size:1.5rem}
  .hero-section{height:300px}.hero-text{padding:2.5rem 1.5rem}.hero-text h1{font-size:1.8rem}.hero-desc{font-size:.85rem}
  .promo-ribbon{gap:1rem;font-size:10px;padding:.6rem 1rem}
  .product-section{padding:1.5rem 1rem}.product-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}
  .pc-img{height:160px}.pc-body{padding:.75rem}.pc-name{font-size:.85rem}.pc-price{font-size:1rem}.pc-buy{padding:.5rem;font-size:.75rem}
  .store-footer{padding:2rem 1rem;gap:1rem}
  .modal-body{flex-direction:column;padding:1.5rem}.modal-img-wrap{min-height:200px}
  .cart-drawer{width:100%;max-width:100%}.checkout-modal{width:95%}.section-heading{font-size:1.3rem}
}