@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap";
:root{--bg:#f0fdfa;--bg-gradient-start:#ccfbf1;--paper:#fff;--ink:#164e63;--muted:#5b7c8a;--line:#ccfbf1;--brand:#0891b2;--brand-dark:#0e7490;--brand-light:#22d3ee;--brand-soft:#ecfeff;--cta:#22c55e;--cta-dark:#16a34a;--cta-light:#86efac;--cta-soft:#dcfce7;--danger:#ef4444;--danger-soft:#fee2e2;--warning:#f59e0b;--warning-soft:#fef3c7;--space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:24px;--space-2xl:32px;--space-3xl:48px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--transition-fast:.15s ease-out;--transition-normal:.2s ease-out;--transition-slow:.3s ease-out}*{box-sizing:border-box}html,body{background:linear-gradient(135deg,var(--bg-gradient-start)0%,var(--bg)50%);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-attachment:fixed;margin:0;padding:0;font-family:Inter,Noto Sans SC,PingFang SC,system-ui,-apple-system,sans-serif;line-height:1.6}:focus-visible{outline:2px solid var(--brand);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.page{max-width:860px;padding:var(--space-lg)var(--space-md)var(--space-2xl);margin:0 auto}.header{margin-bottom:var(--space-lg)}.header-top{justify-content:space-between;align-items:flex-start;gap:var(--space-md);margin-bottom:var(--space-sm);display:flex}.cart-link{align-items:center;gap:var(--space-xs);padding:var(--space-sm)var(--space-md);background:var(--cta);color:#fff;border-radius:var(--radius-full);transition:all var(--transition-normal);box-shadow:var(--shadow-md);white-space:nowrap;font-size:14px;font-weight:600;text-decoration:none;display:flex}.cart-link:hover{background:var(--cta-dark);box-shadow:var(--shadow-lg);transform:translateY(-1px)}.cart-icon{width:18px;height:18px}.header h1{margin:0 0 var(--space-sm);background:linear-gradient(135deg,var(--brand-dark)0%,var(--brand)100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:28px;font-weight:700}.header p{margin:var(--space-xs)0 0;color:var(--muted);font-size:14px}.search{gap:var(--space-sm);margin:var(--space-lg)0;grid-template-columns:1fr auto;display:grid}.search-input-wrapper{align-items:center;display:flex;position:relative}.search-icon{left:var(--space-md);width:20px;height:20px;color:var(--muted);pointer-events:none;position:absolute}.search input{width:100%;height:48px;padding-left:calc(var(--space-md) + 28px);border-radius:var(--radius-lg);border:2px solid var(--line);transition:all var(--transition-normal);background:var(--paper);color:var(--ink);font-size:15px}.search input:hover{border-color:var(--brand-light)}.search input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);outline:none}.search button{justify-content:center;align-items:center;gap:var(--space-xs);height:48px;padding:0 var(--space-lg);border-color:var(--brand);color:#fff;background:linear-gradient(135deg,var(--brand)0%,var(--brand-dark)100%);cursor:pointer;box-shadow:var(--shadow-md);transition:all var(--transition-normal);font-size:15px;font-weight:600;display:flex}.button-icon{width:18px;height:18px}.search button:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}.search button:active{box-shadow:var(--shadow-sm);transform:translateY(0)}.list{gap:var(--space-md);display:grid}.card{gap:var(--space-md);color:inherit;background:var(--paper);border:2px solid var(--line);border-radius:var(--radius-xl);padding:var(--space-md);transition:all var(--transition-normal);cursor:pointer;grid-template-columns:100px 1fr;text-decoration:none;display:grid;position:relative;overflow:hidden}.card:before{content:"";background:linear-gradient(135deg,var(--brand-soft)0%,transparent 100%);opacity:0;transition:opacity var(--transition-normal);pointer-events:none;position:absolute;inset:0}.card:hover{border-color:var(--brand);box-shadow:var(--shadow-xl);transform:translateY(-2px)}.card:hover:before{opacity:.5}.card:active{transform:translateY(0)}.thumb-wrap{z-index:1;width:100px;height:100px;position:relative}.thumb{object-fit:cover;border-radius:var(--radius-md);border:2px solid var(--line);width:100%;height:100%;transition:border-color var(--transition-normal)}.card:hover .thumb{border-color:var(--brand)}.thumb.empty{justify-content:center;align-items:center;gap:var(--space-xs);background:var(--brand-soft);color:var(--muted);flex-direction:column;font-size:12px;font-weight:500;display:flex}.placeholder-icon{opacity:.5;width:32px;height:32px}.card-body h2{margin:0 0 var(--space-sm);color:var(--ink);z-index:1;font-size:17px;font-weight:600;line-height:1.4;position:relative}.muted{margin:var(--space-xs)0 0;color:var(--muted);z-index:1;font-size:13px;position:relative}.small{font-size:12px}.price-row{margin-top:var(--space-md);align-items:center;gap:var(--space-sm);z-index:1;flex-wrap:wrap;display:flex;position:relative}.price{color:var(--danger);font-size:20px;font-weight:700}.market{color:var(--muted);opacity:.7;font-size:13px;text-decoration:line-through}.pager{margin-top:var(--space-xl);justify-content:space-between;align-items:center;font-size:14px;font-weight:500;display:flex}.pager a{color:var(--brand);border:2px solid var(--line);border-radius:var(--radius-full);padding:var(--space-sm)var(--space-lg);background:var(--paper);transition:all var(--transition-normal);cursor:pointer;font-weight:600;text-decoration:none}.pager a:hover:not([aria-disabled=true]){border-color:var(--brand);background:var(--brand-soft);transform:translateY(-1px)}.pager a:active:not([aria-disabled=true]){transform:translateY(0)}.pager a[aria-disabled=true]{pointer-events:none;color:var(--muted);opacity:.5;border-color:var(--line)}.pager span{color:var(--ink);font-weight:600}.detail-page{padding-top:var(--space-sm)}.back-link{align-items:center;gap:var(--space-xs);color:var(--brand);padding:var(--space-xs)var(--space-sm);border-radius:var(--radius-md);transition:all var(--transition-normal);margin-bottom:var(--space-md);cursor:pointer;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex}.back-link:hover{background:var(--brand-soft);transform:translate(-2px)}.detail-header h1{margin:var(--space-md)0 var(--space-sm);color:var(--ink);font-size:24px;font-weight:700;line-height:1.3}.detail-header p{margin:var(--space-xs)0 0;color:var(--muted);font-size:14px}.image-viewer{margin-top:var(--space-md)}.gallery-main{border:2px solid var(--line);border-radius:var(--radius-xl);background:var(--paper);cursor:zoom-in;width:100%;transition:border-color var(--transition-normal);box-shadow:var(--shadow-md);margin:0;padding:0;overflow:hidden}.gallery-main:hover{border-color:var(--brand)}.gallery-main img{aspect-ratio:4/3;object-fit:contain;background:var(--paper);width:100%;display:block}.thumb-carousel{margin-top:var(--space-md);gap:var(--space-sm);grid-template-columns:36px 1fr 36px;align-items:center;display:grid}.thumb-track{gap:var(--space-sm);scroll-behavior:smooth;padding:var(--space-xs)0;scrollbar-width:none;-ms-overflow-style:none;display:flex;overflow-x:auto}.thumb-track::-webkit-scrollbar{display:none}.thumb-item{border-radius:var(--radius-md);border:2px solid var(--line);background:var(--paper);cursor:pointer;width:80px;height:80px;transition:all var(--transition-normal);flex:0 0 80px;margin:0;padding:0;overflow:hidden}.thumb-item:hover{border-color:var(--brand-light);transform:scale(1.05)}.thumb-item.active{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}.thumb-item img{object-fit:cover;width:100%;height:100%;display:block}.thumb-arrow{border:2px solid var(--line);border-radius:var(--radius-full);background:var(--paper);width:36px;height:36px;color:var(--ink);cursor:pointer;transition:all var(--transition-normal);flex-shrink:0;justify-content:center;align-items:center;font-size:20px;line-height:1;display:inline-flex}.thumb-arrow:hover:not(:disabled){border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}.thumb-arrow:active:not(:disabled){transform:scale(.95)}.thumb-arrow:disabled{opacity:.4;cursor:not-allowed}.panel{margin-top:var(--space-md);background:var(--paper);border:2px solid var(--line);border-radius:var(--radius-xl);padding:var(--space-lg);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-normal)}.panel:hover{box-shadow:var(--shadow-md)}.panel h2{margin:0 0 var(--space-md);color:var(--ink);align-items:center;gap:var(--space-sm);font-size:18px;font-weight:700;display:flex}.panel h2:before{content:"";background:linear-gradient(180deg,var(--brand)0%,var(--brand-dark)100%);border-radius:2px;width:4px;height:20px}.row{gap:var(--space-md);border-top:1px dashed var(--line);padding:var(--space-md)0;grid-template-columns:100px 1fr;align-items:start;display:grid}.row:first-of-type{border-top:none}.row span{color:var(--muted);font-size:13px;font-weight:500}.row strong{word-break:break-word;color:var(--ink);font-size:15px;line-height:1.5}.tags{gap:var(--space-sm);flex-wrap:wrap;display:flex}.tags span{background:var(--brand-soft);color:var(--brand-dark);border-radius:var(--radius-full);padding:var(--space-xs)var(--space-md);border:1px solid var(--brand-light);transition:all var(--transition-normal);font-size:12px;font-weight:600}.tags span:hover{background:var(--brand);color:#fff;border-color:var(--brand);transform:translateY(-1px)}.content-text{white-space:pre-wrap;word-break:break-word;color:var(--ink);margin:0;font-size:14px;line-height:1.7}.cart-panel h2{margin-bottom:var(--space-md)}.buy-section{gap:var(--space-md);flex-direction:column;display:flex}.price-display{padding:var(--space-md);background:var(--brand-soft);border-radius:var(--radius-lg);justify-content:space-between;align-items:center;display:flex}.price-label{color:var(--muted);font-size:14px;font-weight:500}.price-value{color:var(--danger);font-size:24px;font-weight:700}.quantity-control{gap:var(--space-sm);flex-direction:column;display:flex}.quantity-label{color:var(--muted);font-size:14px;font-weight:500}.quantity-buttons{align-items:center;gap:var(--space-sm);display:flex}.quantity-btn{border:2px solid var(--line);border-radius:var(--radius-md);background:var(--paper);width:40px;height:40px;color:var(--ink);cursor:pointer;transition:all var(--transition-normal);justify-content:center;align-items:center;display:flex}.quantity-btn:hover:not(:disabled){border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}.quantity-btn:active:not(:disabled){transform:scale(.95)}.quantity-btn:disabled{opacity:.4;cursor:not-allowed}.quantity-icon{width:18px;height:18px}.quantity-input{text-align:center;border:2px solid var(--line);border-radius:var(--radius-md);width:80px;height:40px;transition:all var(--transition-normal);font-size:16px;font-weight:600}.quantity-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);outline:none}.unit-name{color:var(--muted);font-size:13px}.total-display{padding:var(--space-md);background:var(--cta-soft);border-radius:var(--radius-lg);justify-content:space-between;align-items:center;display:flex}.total-label{color:var(--muted);font-size:14px;font-weight:500}.total-value{color:var(--cta-dark);font-size:24px;font-weight:700}.action-buttons{gap:var(--space-sm);flex-direction:column;display:flex}.cart-btn{border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--cta)0%,var(--cta-dark)100%);color:#fff;height:48px;padding:0 var(--space-lg);cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-md);justify-content:center;align-items:center;gap:var(--space-sm);border:none;font-size:16px;font-weight:600;display:flex}.cart-btn:hover:not(:disabled){box-shadow:var(--shadow-lg);transform:translateY(-2px)}.cart-btn:active:not(:disabled){box-shadow:var(--shadow-sm);transform:translateY(0)}.cart-btn:disabled{opacity:.6;cursor:not-allowed}.cart-btn.success{background:linear-gradient(135deg,var(--cta-dark)0%,var(--cta)100%)}.btn-icon{width:20px;height:20px}.cart-row{gap:var(--space-sm);flex-wrap:wrap;align-items:center;display:flex}.buy-row label,.cart-item-actions label,.checkout-form label{gap:var(--space-xs);color:var(--muted);font-size:13px;font-weight:500;display:grid}.buy-row input,.cart-item-actions input,.checkout-form input{border-radius:var(--radius-md);border:2px solid var(--line);height:40px;padding:0 var(--space-md);transition:all var(--transition-normal);background:var(--paper);color:var(--ink);font-size:14px}.buy-row input:focus,.cart-item-actions input:focus,.checkout-form input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);outline:none}.buy-row input,.cart-item-actions input{width:90px}.cart-notice,.cart-success{margin:var(--space-sm)0 0;color:var(--cta-dark);padding:var(--space-sm)var(--space-md);background:var(--cta-soft);border-radius:var(--radius-md);border:1px solid var(--cta-light);font-size:14px}.cart-success{align-items:center;gap:var(--space-xs);display:flex}.cart-items-panel{gap:var(--space-sm);display:grid}.cart-item{gap:var(--space-md);padding:var(--space-md);background:var(--brand-soft);border-radius:var(--radius-lg);border:2px solid var(--line);transition:all var(--transition-normal);grid-template-columns:80px 1fr;align-items:start;display:grid}.cart-item:hover{border-color:var(--brand-light)}.cart-item-body h3{margin:var(--space-xs)0 0;color:var(--ink);font-size:16px;font-weight:600}.cart-item-actions{margin-top:var(--space-md);align-items:center;gap:var(--space-md);flex-wrap:wrap;display:flex}.cart-item-actions button{height:36px;padding:0 var(--space-md);border:2px solid var(--danger);border-radius:var(--radius-full);background:var(--paper);color:var(--danger);cursor:pointer;transition:all var(--transition-normal);font-size:13px;font-weight:600}.cart-item-actions button:hover{background:var(--danger);color:#fff;transform:translateY(-1px)}.checkout-form{gap:var(--space-md);display:grid}.checkout-summary{margin-top:var(--space-md);padding-top:var(--space-md);border-top:2px dashed var(--line);justify-content:space-between;align-items:center;gap:var(--space-md);flex-wrap:wrap;display:flex}.checkout-summary strong{color:var(--danger);font-size:20px;font-weight:700}.empty-cart{text-align:center;padding:var(--space-3xl)var(--space-lg)}.empty-cart-content{align-items:center;gap:var(--space-lg);flex-direction:column;display:flex}.continue-shopping{padding:var(--space-sm)var(--space-lg);background:var(--brand);color:#fff;border-radius:var(--radius-full);transition:all var(--transition-normal);align-items:center;font-weight:600;text-decoration:none;display:inline-flex}.continue-shopping:hover{background:var(--brand-dark);transform:translateY(-1px)}.item-price{color:var(--danger);margin:var(--space-xs)0;font-size:15px;font-weight:600}.item-subtotal{margin-top:var(--space-sm);color:var(--brand-dark);font-size:14px;font-weight:600}.delete-btn{height:36px;padding:0 var(--space-md);border:2px solid var(--danger);border-radius:var(--radius-full);background:var(--paper);color:var(--danger);cursor:pointer;transition:all var(--transition-normal);align-items:center;gap:var(--space-xs);font-size:13px;font-weight:600;display:flex}.delete-btn:hover{background:var(--danger);color:#fff;transform:translateY(-1px)}.delete-icon{width:16px;height:16px}.order-summary{gap:var(--space-md);flex-direction:column;display:flex}.summary-row{padding:var(--space-sm)0;justify-content:space-between;align-items:center;font-size:15px;display:flex}.summary-row.total{border-top:2px solid var(--line);padding-top:var(--space-md);margin-top:var(--space-xs)}.total-amount{color:var(--danger);font-size:28px;font-weight:700}.success-message{align-items:flex-start;gap:var(--space-md);padding:var(--space-lg);background:var(--cta-soft);border-radius:var(--radius-lg);border:2px solid var(--cta-light);display:flex}.success-icon{width:32px;height:32px;color:var(--cta-dark);flex-shrink:0}.success-title{color:var(--cta-dark);margin:0 0 var(--space-xs);font-size:18px;font-weight:700}.success-text{color:var(--muted);margin:0 0 var(--space-md);font-size:14px}.auth-page{max-width:520px}.auth-form{gap:var(--space-md);background:var(--paper);border:2px solid var(--line);border-radius:var(--radius-xl);padding:var(--space-xl);box-shadow:var(--shadow-lg);display:grid}.auth-form label{gap:var(--space-xs);color:var(--muted);font-size:13px;font-weight:500;display:grid}.auth-form input{border-radius:var(--radius-md);border:2px solid var(--line);height:44px;padding:0 var(--space-md);transition:all var(--transition-normal);font-size:15px}.auth-form input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);outline:none}.auth-form button{border-radius:var(--radius-md);background:linear-gradient(135deg,var(--brand)0%,var(--brand-dark)100%);color:#fff;cursor:pointer;height:44px;transition:all var(--transition-normal);box-shadow:var(--shadow-md);border:none;font-size:15px;font-weight:700}.auth-form button:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}.auth-form button:active{transform:translateY(0)}.auth-error{color:var(--danger);padding:var(--space-sm)var(--space-md);background:var(--danger-soft);border-radius:var(--radius-md);border:1px solid #fecaca;margin:0;font-size:14px}.admin-header{justify-content:space-between;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg);display:flex}.logout-btn{border:2px solid var(--line);border-radius:var(--radius-full);background:var(--paper);height:38px;padding:0 var(--space-md);color:var(--ink);cursor:pointer;transition:all var(--transition-normal);font-weight:600}.logout-btn:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}.admin-card{grid-template-columns:80px minmax(0,1fr)}.admin-card .thumb-wrap{width:80px;height:80px}.admin-card .card-body{min-width:0}.admin-card .card-body h2{word-break:break-word}.admin-actions{margin-top:var(--space-md);gap:var(--space-sm);flex-wrap:wrap;align-items:center;display:flex}.publish-badge{border-radius:var(--radius-full);padding:var(--space-xs)var(--space-md);font-size:12px;font-weight:600}.publish-badge.on{color:var(--cta-dark);background:var(--cta-soft);border:1px solid var(--cta-light)}.publish-badge.off{color:var(--warning);background:var(--warning-soft);border:1px solid #fde68a}.publish-btn,.view-link{border:2px solid var(--line);border-radius:var(--radius-full);height:32px;padding:0 var(--space-md);background:var(--paper);color:var(--ink);cursor:pointer;transition:all var(--transition-normal);justify-content:center;align-items:center;font-size:12px;font-weight:600;text-decoration:none;display:inline-flex}.publish-btn:hover,.view-link:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand);transform:translateY(-1px)}.publish-btn{gap:var(--space-xs)}.publish-btn:disabled{opacity:.7;cursor:not-allowed}.btn-spinner{border:2px solid #0891b233;border-top-color:var(--brand);border-radius:50%;width:14px;height:14px;animation:.75s linear infinite btn-spin}@keyframes btn-spin{to{transform:rotate(360deg)}}@media (min-width:768px){.page{padding:var(--space-2xl)var(--space-lg)var(--space-3xl)}.search{grid-template-columns:1fr 140px}.gallery-main img{max-height:600px}.card{padding:var(--space-lg);grid-template-columns:120px 1fr}.thumb-wrap{width:120px;height:120px}}@media (min-width:1024px){.list{gap:var(--space-lg);grid-template-columns:repeat(2,1fr)}.card{grid-template-rows:auto 1fr;grid-template-columns:1fr}.card .thumb-wrap{width:100%;height:200px}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes spin{to{transform:rotate(360deg)}}.skeleton{background:linear-gradient(90deg,var(--line)25%,var(--bg-gradient-start)50%,var(--line)75%);border-radius:var(--radius-md);background-size:200% 100%;animation:1.5s infinite shimmer}.skeleton-card{pointer-events:none;border:2px solid var(--line)}.loading-spinner{border:3px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:.8s linear infinite spin}@media (prefers-reduced-motion:reduce){.skeleton,.loading-spinner{animation:none}.skeleton{background:var(--line)}}html{scroll-behavior:smooth}::selection{background:var(--brand-soft);color:var(--brand-dark)}::selection{background:var(--brand-soft);color:var(--brand-dark)}