@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap";:root{--color-bg-primary:#0a0a0f;--color-bg-secondary:#12121a;--color-bg-card:#ffffff0a;--color-bg-card-hover:#ffffff12;--color-bg-input:#ffffff0f;--color-bg-input-focus:#ffffff17;--color-border:#ffffff14;--color-border-hover:#ffffff26;--color-border-focus:#ee4d2d80;--color-text-primary:#f0f0f5;--color-text-secondary:#9494a8;--color-text-muted:#5c5c72;--color-text-link:#ff6b3d;--gradient-shopee:linear-gradient(135deg, #ee4d2d 0%, #f63 50%, #ff8a3d 100%);--gradient-shopee-soft:linear-gradient(135deg, #ee4d2d26 0%, #ff8a3d14 100%);--gradient-shopee-glow:radial-gradient(ellipse at 50% 0%, #ee4d2d1f 0%, transparent 60%);--gradient-success:linear-gradient(135deg, #10b981 0%, #34d399 100%);--gradient-danger:linear-gradient(135deg, #ef4444 0%, #f87171 100%);--color-shopee:#ee4d2d;--color-shopee-light:#f63;--color-shopee-dark:#d44426;--color-success:#10b981;--color-danger:#ef4444;--color-warning:#f59e0b;--glass-bg:#12121abf;--glass-border:#ffffff0f;--glass-blur:20px;--shadow-sm:0 1px 3px #0000004d;--shadow-md:0 4px 12px #0006;--shadow-lg:0 8px 30px #00000080;--shadow-glow:0 0 40px #ee4d2d26;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-full:9999px;--font-sans:"Inter", "Noto Sans Thai", -apple-system, system-ui, sans-serif;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-normal:.25s cubic-bezier(.4, 0, .2, 1);--transition-slow:.4s cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-sans);background:var(--color-bg-primary);color:var(--color-text-primary);min-height:100vh;line-height:1.6;overflow-x:hidden}body:before{content:"";background:var(--gradient-shopee-glow);pointer-events:none;z-index:0;width:800px;height:600px;position:fixed;top:-200px;left:50%;transform:translate(-50%)}#root{z-index:1;min-height:100vh;position:relative}a{color:var(--color-text-link);text-decoration:none}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#fff3}.app-container{max-width:900px;padding:var(--space-md);padding-bottom:var(--space-2xl);margin:0 auto}@media (width>=768px){.app-container{padding:var(--space-xl) var(--space-lg)}}.header{text-align:center;padding:var(--space-2xl) 0 var(--space-xl);position:relative}.header__admin-btn{top:var(--space-lg);border-radius:var(--radius-sm);padding:var(--space-xs) var(--space-sm);cursor:pointer;opacity:.25;transition:all var(--transition-normal);filter:grayscale();background:0 0;border:1px solid #0000;font-size:1rem;position:absolute;right:0}.header__admin-btn:hover{opacity:.8;filter:grayscale(0);border-color:var(--color-border-hover);background:#ffffff0a}.header__logo-wrapper{border-radius:var(--radius-xl);background:var(--gradient-shopee);width:72px;height:72px;box-shadow:var(--shadow-glow);margin-bottom:var(--space-md);justify-content:center;align-items:center;animation:3s ease-in-out infinite logo-pulse;display:inline-flex}@keyframes logo-pulse{0%,to{box-shadow:0 0 30px #ee4d2d33}50%{box-shadow:0 0 50px #ee4d2d59}}.header__logo{filter:drop-shadow(0 2px 4px #0000004d);font-size:32px}.header__title{letter-spacing:-.03em;background:var(--gradient-shopee);-webkit-text-fill-color:transparent;margin-bottom:var(--space-xs);-webkit-background-clip:text;background-clip:text;font-size:1.75rem;font-weight:800}.header__subtitle{color:var(--color-text-secondary);font-size:.9rem;font-weight:400}.tabs{gap:var(--space-xs);padding:var(--space-xs);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:var(--space-xl);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));display:flex;overflow-x:auto}.tabs__item{justify-content:center;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);color:var(--color-text-secondary);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-normal);white-space:nowrap;background:0 0;border:none;flex:1;font-size:.85rem;font-weight:500;display:flex;position:relative}.tabs__item:hover{color:var(--color-text-primary);background:#ffffff0a}.tabs__item--active{color:#fff;background:var(--gradient-shopee);box-shadow:var(--shadow-sm), 0 0 20px #ee4d2d33}.tabs__item--active:hover{background:var(--gradient-shopee)}.tabs__icon{font-size:1.1rem}.tabs__badge{border-radius:var(--radius-full);background:#fff3;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 5px;font-size:.7rem;font-weight:600;display:inline-flex}.tabs__item--active .tabs__badge{background:#ffffff40}.card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));transition:border-color var(--transition-normal)}.card:hover{border-color:var(--color-border-hover)}.card__title{margin-bottom:var(--space-md);align-items:center;gap:var(--space-sm);font-size:1.1rem;font-weight:700;display:flex}.card__description{color:var(--color-text-secondary);margin-bottom:var(--space-lg);font-size:.85rem;line-height:1.7}.input-group{margin-bottom:var(--space-md)}.input-group__label{color:var(--color-text-secondary);margin-bottom:var(--space-sm);text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;font-weight:600;display:block}.input-group__input{width:100%;padding:var(--space-md);background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-family:var(--font-sans);transition:all var(--transition-fast);outline:none;font-size:.95rem}.input-group__input:focus{background:var(--color-bg-input-focus);border-color:var(--color-border-focus);box-shadow:0 0 0 3px #ee4d2d1a}.input-group__input::placeholder{color:var(--color-text-muted)}.input-group__hint{color:var(--color-text-muted);margin-top:var(--space-xs);font-size:.75rem}textarea.input-group__input{resize:vertical;min-height:140px;line-height:1.8}.btn{justify-content:center;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;border:none;font-size:.9rem;font-weight:600;display:inline-flex}.btn:disabled{opacity:.4;cursor:not-allowed}.btn--primary{background:var(--gradient-shopee);color:#fff;box-shadow:var(--shadow-sm), 0 0 20px #ee4d2d26}.btn--primary:hover:not(:disabled){box-shadow:var(--shadow-md), 0 0 30px #ee4d2d40;transform:translateY(-1px)}.btn--primary:active:not(:disabled){transform:translateY(0)}.btn--secondary{background:var(--color-bg-input);color:var(--color-text-primary);border:1px solid var(--color-border)}.btn--secondary:hover:not(:disabled){background:var(--color-bg-input-focus);border-color:var(--color-border-hover)}.btn--ghost{color:var(--color-text-secondary);padding:var(--space-sm) var(--space-md);background:0 0}.btn--ghost:hover:not(:disabled){color:var(--color-text-primary);background:#ffffff0d}.btn--danger{color:var(--color-danger);background:0 0;border:1px solid #ef444433}.btn--danger:hover:not(:disabled){background:#ef44441a;border-color:#ef444466}.btn--sm{padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:.8rem}.btn--full{width:100%}.btn__icon{font-size:1.1em}.result-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-md);margin-bottom:var(--space-sm);transition:border-color var(--transition-fast);animation:.3s ease-out result-slide-in}.result-card:hover{border-color:var(--color-border-hover)}@keyframes result-slide-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.result-card--error{background:#ef44440d;border-color:#ef44444d}.result-card__header{justify-content:space-between;align-items:flex-start;gap:var(--space-sm);margin-bottom:var(--space-sm);display:flex}.result-card__status{border-radius:var(--radius-full);align-items:center;gap:4px;padding:2px 8px;font-size:.75rem;font-weight:600;display:inline-flex}.result-card__status--success{color:var(--color-success);background:#10b98126}.result-card__status--error{color:var(--color-danger);background:#ef444426}.result-card__original{color:var(--color-text-muted);word-break:break-all;margin-bottom:var(--space-sm);align-items:flex-start;gap:var(--space-sm);font-size:.8rem;display:flex}.result-card__original-label{color:var(--color-text-secondary);flex-shrink:0;font-weight:600}.result-card__product-name{color:var(--color-text-secondary);margin-bottom:var(--space-sm);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.85rem;display:-webkit-box;overflow:hidden}.result-card__link-wrapper{align-items:center;gap:var(--space-sm);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);background:#ee4d2d0f;border:1px solid #ee4d2d26;display:flex}.result-card__link{color:var(--color-shopee-light);word-break:break-all;font-size:.82rem;font-family:"SF Mono", "Cascadia Code", monospace, var(--font-sans);flex:1}.result-card__error{color:var(--color-danger);align-items:center;gap:var(--space-sm);font-size:.85rem;display:flex}.result-card__time{color:var(--color-text-muted);font-size:.72rem}.result-card__ip{color:var(--color-text-secondary);border-radius:var(--radius-sm);background:#ffffff0f;padding:2px 6px;font-family:monospace;font-size:.72rem}.result-card__actions{align-items:center;gap:var(--space-xs);display:flex}.settings-status{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-full);margin-bottom:var(--space-lg);font-size:.8rem;font-weight:600;display:inline-flex}.settings-status--configured{color:var(--color-success);background:#10b9811a;border:1px solid #10b98133}.settings-status--not-configured{color:var(--color-warning);background:#f59e0b1a;border:1px solid #f59e0b33}.settings-status__dot{border-radius:50%;width:8px;height:8px}.settings-status--configured .settings-status__dot{background:var(--color-success);box-shadow:0 0 8px var(--color-success)}.settings-status--not-configured .settings-status__dot{background:var(--color-warning);box-shadow:0 0 8px var(--color-warning)}.history-toolbar{justify-content:space-between;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md);flex-wrap:wrap;display:flex}.history-toolbar__search{flex:1;min-width:200px}.history-empty{text-align:center;padding:var(--space-2xl) var(--space-lg);color:var(--color-text-muted)}.history-empty__icon{margin-bottom:var(--space-md);opacity:.5;font-size:3rem}.history-empty__text{font-size:.9rem}.batch-stats{gap:var(--space-md);margin-bottom:var(--space-md);display:flex}.batch-stats__item{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;display:flex}.batch-stats__item--success{color:var(--color-success);background:#10b9811a}.batch-stats__item--error{color:var(--color-danger);background:#ef44441a}.toast-container{bottom:var(--space-lg);right:var(--space-lg);z-index:1000;gap:var(--space-sm);flex-direction:column-reverse;display:flex;position:fixed}.toast{align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));box-shadow:var(--shadow-lg);color:var(--color-text-primary);font-size:.85rem;font-weight:500;animation:.3s ease-out toast-in;display:flex}.toast--success{border-color:#10b9814d}.toast__icon{font-size:1.1rem}@keyframes toast-in{0%{opacity:0;transform:translateY(12px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(12px)scale(.95)}}.warning-banner{align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);margin-bottom:var(--space-lg);color:var(--color-warning);background:#f59e0b14;border:1px solid #f59e0b33;font-size:.85rem;display:flex}.warning-banner__icon{flex-shrink:0;font-size:1.2rem}.warning-banner__action{flex-shrink:0;margin-left:auto}.converter-input-area{gap:var(--space-sm);display:flex}.converter-input-area .input-group{flex:1;margin-bottom:0}.converter-subid{margin-top:var(--space-md)}.converter-actions{gap:var(--space-sm);margin-top:var(--space-md);display:flex}.copy-all-bar{padding:var(--space-md);background:var(--gradient-shopee-soft);border-radius:var(--radius-md);margin-bottom:var(--space-md);border:1px solid #ee4d2d26;justify-content:space-between;align-items:center;display:flex}.copy-all-bar__text{color:var(--color-text-secondary);font-size:.85rem;font-weight:500}.fade-in{animation:.3s ease-out fade-in}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media (width<=640px){.header__title{font-size:1.4rem}.tabs__item{padding:var(--space-sm);gap:4px;font-size:.78rem}.tabs__icon{font-size:1rem}.card{padding:var(--space-md)}.converter-input-area,.batch-stats{flex-direction:column}.history-toolbar{flex-direction:column;align-items:stretch}.toast-container{left:var(--space-md);right:var(--space-md);bottom:var(--space-md)}}.admin-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2000;padding:var(--space-md);background:#0009;justify-content:center;align-items:center;animation:.2s ease-out fade-in;display:flex;position:fixed;inset:0}.admin-modal{background:var(--color-bg-secondary);border:1px solid var(--color-border-hover);border-radius:var(--radius-xl);padding:var(--space-xl);width:100%;max-width:420px;box-shadow:var(--shadow-lg), 0 0 60px #ee4d2d1a;animation:.3s ease-out result-slide-in}.admin-modal__header{text-align:center;margin-bottom:var(--space-lg)}.admin-modal__icon{margin-bottom:var(--space-sm);font-size:2.5rem}.admin-modal__title{margin-bottom:var(--space-xs);font-size:1.3rem;font-weight:700}.admin-modal__subtitle{color:var(--color-text-secondary);font-size:.85rem}.admin-modal__body{margin-bottom:var(--space-lg)}.admin-modal__error{color:var(--color-danger);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);margin-top:var(--space-sm);background:#ef444414;border:1px solid #ef444426;font-size:.85rem}.admin-modal__footer{justify-content:flex-end;gap:var(--space-sm);display:flex}.admin-pin-input{text-align:center;letter-spacing:.3em;font-weight:700;font-size:1.3rem!important}.admin-bar{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);margin-bottom:var(--space-md);color:var(--color-shopee-light);background:#ee4d2d14;border:1px solid #ee4d2d33;justify-content:space-between;align-items:center;font-size:.85rem;font-weight:600;display:flex}.admin-bar__info{align-items:center;gap:var(--space-sm);display:flex}.tabs__item--admin{border:1px solid #ee4d2d33}.tabs__item--admin:not(.tabs__item--active){color:var(--color-shopee-light)}:root{--color-lazada:#0f146d;--color-lazada-light:#3b82f6;--color-lazada-gradient:linear-gradient(135deg, #0f146d 0%, #164396 100%)}.badge-inline{border-radius:var(--radius-full);align-items:center;gap:4px;padding:2px 8px;font-size:.78rem;font-weight:600;display:inline-flex}.badge-inline--shopee{color:#ff6b4a;background:#ee4d2d26;border:1px solid #ee4d2d40}.badge-inline--lazada{color:#60a5fa;background:#3b82f626;border:1px solid #3b82f640}.platform-badge{border-radius:var(--radius-full);letter-spacing:.02em;align-items:center;gap:4px;padding:3px 10px;font-size:.75rem;font-weight:700;display:inline-flex}.platform-badge--shopee{color:#ff6b4a;background:#ee4d2d26;border:1px solid #ee4d2d4d}.platform-badge--lazada{color:#60a5fa;background:#3b82f626;border:1px solid #3b82f64d}.btn--lazada{color:#fff;background:linear-gradient(135deg,#164396 0%,#2563eb 100%);box-shadow:0 4px 12px #2563eb40}.btn--lazada:hover{background:linear-gradient(135deg,#1e40af 0%,#1d4ed8 100%);transform:translateY(-1px);box-shadow:0 6px 16px #2563eb59}.warning-banner--shopee{border-left-color:#ee4d2d}.warning-banner--lazada{border-left-color:#2563eb}.platform-filter-tabs{margin-bottom:var(--space-md)}.platform-filter-btn{border-radius:var(--radius-full);color:var(--color-text-secondary);border:1px solid var(--color-border);cursor:pointer;transition:all var(--transition-fast);background:#ffffff0a;padding:6px 14px;font-size:.8rem;font-weight:600}.platform-filter-btn:hover{color:var(--color-text-primary);background:#ffffff14}.platform-filter-btn--active{background:var(--color-primary);color:var(--color-text-primary);border-color:var(--color-primary);box-shadow:0 2px 8px #ee4d2d4d}.platform-filter-btn--shopee.platform-filter-btn--active{background:#ee4d2d;border-color:#ee4d2d}.platform-filter-btn--lazada.platform-filter-btn--active{background:#2563eb;border-color:#2563eb;box-shadow:0 2px 8px #2563eb4d}.settings-section{border-radius:var(--radius-md);padding:var(--space-md);background:#ffffff05;border:1px solid #ffffff0d}.settings-section__header{align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md);display:flex}.settings-section__icon{font-size:1.2rem}.settings-section__title{color:var(--color-text-primary);font-size:.95rem;font-weight:700}.settings-divider{background:var(--color-border);height:1px;margin:var(--space-lg) 0;border:0}