*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#2563EB;--primary-dark:#1D4ED8;--primary-light:#60A5FA;
  --primary-lighter:#93C5FD;--primary-bg:#EFF6FF;
  --accent:#3B82F6;--accent-light:#DBEAFE;
  --bg:#FFFFFF;--bg-secondary:#F8FAFC;--bg-tertiary:#F1F5F9;
  --text:#0F172A;--text-secondary:#475569;--text-muted:#94A3B8;
  --border:#E2E8F0;--border-light:#F1F5F9;
  --success:#10B981;--warning:#F59E0B;--error:#EF4444;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.05);
  --shadow:0 4px 6px -1px rgba(0,0,0,0.07),0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-md:0 10px 15px -3px rgba(0,0,0,0.08),0 4px 6px -4px rgba(0,0,0,0.05);
  --shadow-lg:0 20px 25px -5px rgba(0,0,0,0.1),0 8px 10px -6px rgba(0,0,0,0.05);
  --shadow-xl:0 25px 50px -12px rgba(0,0,0,0.15);
  --radius-sm:8px;--radius:12px;--radius-lg:16px;--radius-xl:20px;
  --transition:0.2s cubic-bezier(0.4,0,0.2,1);
}
html{scroll-behavior:smooth}

/* ===== Dark Mode ===== */
[data-theme="dark"]{
  --primary:#3B82F6;--primary-dark:#2563EB;--primary-light:#60A5FA;
  --primary-lighter:#93C5FD;--primary-bg:rgba(59,130,246,0.15);
  --accent:#3B82F6;--accent-light:rgba(59,130,246,0.2);
  --bg:#0F172A;--bg-secondary:#1E293B;--bg-tertiary:#334155;
  --text:#F1F5F9;--text-secondary:#94A3B8;--text-muted:#64748B;
  --border:#334155;--border-light:#1E293B;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.3);
  --shadow:0 4px 6px -1px rgba(0,0,0,0.4),0 2px 4px -2px rgba(0,0,0,0.3);
  --shadow-md:0 10px 15px -3px rgba(0,0,0,0.5),0 4px 6px -4px rgba(0,0,0,0.3);
  --shadow-lg:0 20px 25px -5px rgba(0,0,0,0.5),0 8px 10px -6px rgba(0,0,0,0.3);
  --shadow-xl:0 25px 50px -12px rgba(0,0,0,0.5);
  color-scheme:dark;
}

/* Dark mode — navbar & surfaces */
[data-theme="dark"] .navbar{
  background:rgba(15,23,42,0.88);border-bottom-color:rgba(51,65,85,0.6);
}
[data-theme="dark"] .navbar::after{
  background:linear-gradient(90deg,transparent,rgba(59,130,246,0.15),transparent);
}
[data-theme="dark"] .navbar.scrolled{background:rgba(15,23,42,0.95);box-shadow:0 4px 20px rgba(0,0,0,0.3)}
[data-theme="dark"] .nav-logo{color:#F1F5F9}
[data-theme="dark"] .nav-links a{color:#94A3B8}
[data-theme="dark"] .nav-links a:hover{color:#3B82F6}
[data-theme="dark"] .nav-links a.active{color:#60A5FA;background:rgba(59,130,246,0.15);box-shadow:0 2px 8px rgba(59,130,246,0.15)}
[data-theme="dark"] .nav-user{background:rgba(51,65,85,0.6)!important;border-color:rgba(51,65,85,0.8)!important}
[data-theme="dark"] .nav-user:hover,
[data-theme="dark"] .nav-user.active{background:rgba(59,130,246,0.12)!important;border-color:rgba(59,130,246,0.3)!important}
[data-theme="dark"] .nav-dropdown{background:#1E293B;border-color:rgba(51,65,85,0.9);box-shadow:0 16px 48px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.05)}
[data-theme="dark"] .nav-dropdown a{color:#CBD5E1!important}
[data-theme="dark"] .nav-dropdown a:hover{background:#334155!important;color:#F1F5F9!important}
[data-theme="dark"] .nav-dropdown .nav-logout{color:#FCA5A5!important}
[data-theme="dark"] .nav-dropdown .nav-logout:hover{background:rgba(239,68,68,0.15)!important;color:#FCA5A5!important}
[data-theme="dark"] .nav-dropdown-divider{background:#334155}
[data-theme="dark"] .nav-points-badge{background:rgba(59,130,246,0.2);color:#93C5FD;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08)}
[data-theme="dark"] .nav-recharge-btn{color:#93C5FD;background:rgba(59,130,246,0.1);border-color:rgba(59,130,246,0.25)!important}

/* Dark mode — hero */
[data-theme="dark"] .hero{background:linear-gradient(180deg,#1E293B 0%,#0F172A 100%)}
[data-theme="dark"] .hero-badge{background:var(--bg-secondary);border-color:var(--border);color:var(--text-secondary)}

/* Dark mode — upload */
[data-theme="dark"] .upload-card{background:var(--bg-secondary);border-color:var(--border)}
[data-theme="dark"] .upload-area{background:var(--primary-bg);border-color:var(--primary-lighter)}
[data-theme="dark"] .upload-area:hover,
[data-theme="dark"] .upload-area.drag-over{background:var(--accent-light)}
[data-theme="dark"] .upload-area.has-file{background:var(--bg-secondary)}
[data-theme="dark"] .points-display-card{border-color:rgba(59,130,246,0.25);background:rgba(30,58,138,0.2);box-shadow:0 10px 26px rgba(0,0,0,0.2)}
[data-theme="dark"] .points-display-card .points-label{color:#94A3B8}
[data-theme="dark"] .points-display-card .points-value{color:#F1F5F9}
[data-theme="dark"] .points-display-card .points-hint{color:#64748B}
[data-theme="dark"] .points-display-card.muted{border-color:#334155;background:rgba(30,41,59,0.5);box-shadow:0 10px 24px rgba(0,0,0,0.2)}

/* Dark mode — cards, gallery */
[data-theme="dark"] .card-content{background:var(--bg-secondary)}
[data-theme="dark"] .card-content:hover{border-color:var(--primary-lighter)}
[data-theme="dark"] .card-title{color:var(--text)}
[data-theme="dark"] .option-card input:checked+.card-content{background:var(--primary-bg)}

/* Dark mode — result, progress */
[data-theme="dark"] .progress-status{background:linear-gradient(135deg,#F1F5F9,#3B82F6);-webkit-background-clip:text;background-clip:text}
[data-theme="dark"] .progress-hint{color:#94A3B8}
[data-theme="dark"] .ai-loader-inner{background:linear-gradient(145deg,#1E293B,#0F172A);box-shadow:0 12px 48px rgba(59,130,246,0.25),inset 0 1px 0 rgba(255,255,255,0.08)}

/* Dark mode — gallery, images, status badges */
[data-theme="dark"] .gallery-item{background:var(--bg-secondary);border-color:var(--border)}
[data-theme="dark"] .gallery-item .gi-image{background:var(--bg-tertiary)}
[data-theme="dark"] .gallery-item .gi-meta{color:var(--text-muted)}
[data-theme="dark"] .gallery-empty h3{color:var(--text)}

/* Dark mode — modals */
[data-theme="dark"] .modal-content{background:var(--bg-secondary)}
[data-theme="dark"] .modal-divider{background:var(--border)}
[data-theme="dark"] .modal-actions{border-top-color:var(--border)}
[data-theme="dark"] .modal-compare .compare-side h3{color:var(--text-muted)}

/* Dark mode — glass */
[data-theme="dark"] .glass-pane{background:rgba(15,23,42,0.8)}

/* Dark mode — footer */
[data-theme="dark"] .footer{background:var(--bg-secondary);border-top-color:var(--border)}
[data-theme="dark"] .footer-bottom{border-top-color:var(--border)}

/* Dark mode — toast */
[data-theme="dark"] .toast{background:#F1F5F9;color:#0F172A}
[data-theme="dark"] .toast.error{background:var(--error);color:#fff}
[data-theme="dark"] .toast.success{background:var(--success);color:#fff}

/* Dark mode — theme toggle button */
.theme-toggle{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;
  background:transparent;border:1px solid transparent;
  color:var(--text-secondary);cursor:pointer;font-size:18px;
  transition:all .22s ease;position:relative;overflow:hidden;
}
.theme-toggle:hover{color:var(--primary);background:var(--primary-bg);border-color:var(--border)}
.theme-toggle:active{transform:scale(0.92)}
.theme-toggle .icon-sun,.theme-toggle .icon-moon{position:absolute;transition:all .3s cubic-bezier(.4,0,.2,1)}
[data-theme="dark"] .theme-toggle .icon-sun{opacity:1;transform:rotate(0deg) scale(1)}
[data-theme="dark"] .theme-toggle .icon-moon{opacity:0;transform:rotate(90deg) scale(0.5)}
.theme-toggle .icon-sun{opacity:0;transform:rotate(-90deg) scale(0.5)}
.theme-toggle .icon-moon{opacity:1;transform:rotate(0deg) scale(1)}

/* Dark mode — no filter on images */
[data-theme="dark"] img:not([src*=".svg"]){opacity:1}
[data-theme="dark"] .compare-item img{border-color:var(--border)}
body{font-family:'Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.gradient-text{background:linear-gradient(135deg,#2563EB,#60A5FA,#818CF8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ===== Unified Premium Navbar ===== */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,0.88);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border-bottom:1px solid rgba(226,232,240,0.6);transition:all .35s cubic-bezier(.4,0,.2,1)}
.navbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(37,99,235,0.15),transparent)}
.nav-container{max-width:1200px;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;height:66px}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:17px;color:#0F172A;transition:all .25s ease;position:relative}
.nav-logo:hover{transform:translateY(-1px)}
.nav-logo svg{filter:drop-shadow(0 2px 6px rgba(37,99,235,0.2));transition:all .25s ease}
.nav-logo:hover svg{filter:drop-shadow(0 4px 12px rgba(37,99,235,0.35))}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{text-decoration:none;color:#475569;font-size:14px;font-weight:500;padding:8px 16px;border-radius:10px;transition:all .22s ease;position:relative}
.nav-links a::before{content:'';position:absolute;inset:0;border-radius:10px;background:transparent;transition:all .2s ease}
.nav-links a:hover{color:#2563EB}
.nav-links a:hover::before{background:rgba(37,99,235,0.06)}
.nav-links a.active{color:#2563EB;background:linear-gradient(135deg,rgba(37,99,235,0.08),rgba(96,165,250,0.06));font-weight:600;box-shadow:0 2px 8px rgba(37,99,235,0.08)}

/* Recharge button in nav */
.nav-recharge-btn{display:inline-flex!important;align-items:center;gap:6px;color:#2563EB;font-weight:600;font-size:13px;padding:8px 16px!important;border-radius:10px!important;background:linear-gradient(135deg,rgba(37,99,235,0.06),rgba(96,165,250,0.04));border:1px solid rgba(191,219,254,0.6)!important;transition:all .25s ease;text-decoration:none;position:relative;overflow:hidden}
.nav-recharge-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#2563EB,#3b82f6);opacity:0;transition:opacity .25s ease}
.nav-recharge-btn:hover{color:#fff!important;border-color:#2563EB!important;box-shadow:0 4px 16px rgba(37,99,235,0.28);transform:translateY(-1px)}
.nav-recharge-btn:hover::before{opacity:1}
.nav-recharge-btn svg,.nav-recharge-btn span{position:relative;z-index:1}

/* User pill */
.nav-user{display:flex!important;align-items:center;gap:10px;padding:5px 12px 5px 6px!important;background:linear-gradient(135deg,#F8FAFC,#F1F5F9);border:1px solid rgba(226,232,240,0.8)!important;border-radius:14px;box-shadow:0 2px 8px rgba(15,23,42,0.04);transition:all .25s ease;text-decoration:none;position:relative;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.nav-user:hover,.nav-user.active{background:linear-gradient(135deg,#F0F9FF,#E0F2FE)!important;border-color:rgba(186,230,253,0.8)!important;box-shadow:0 4px 16px rgba(37,99,235,0.1);transform:translateY(-1px)}
.nav-avatar{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#2563EB,#3b82f6);color:white;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;box-shadow:0 3px 10px rgba(37,99,235,0.25);transition:all .25s ease}
.nav-user:hover .nav-avatar{box-shadow:0 4px 14px rgba(37,99,235,0.35)}
.nav-user-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.nav-points-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:linear-gradient(135deg,#EFF6FF,#DBEAFE);color:#1D4ED8;font-size:11px;font-weight:700;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);transition:all .2s ease}
.nav-points-badge:hover{background:linear-gradient(135deg,#DBEAFE,#BFDBFE);box-shadow:0 2px 8px rgba(37,99,235,0.12)}
.nav-diamond{flex-shrink:0;filter:drop-shadow(0 1px 2px rgba(37,99,235,0.2))}

/* User dropdown */
.nav-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:160px;background:#fff;border:1px solid rgba(226,232,240,0.9);border-radius:12px;box-shadow:0 16px 48px rgba(15,23,42,0.12),0 0 0 1px rgba(15,23,42,0.02);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .22s cubic-bezier(.4,0,.2,1);z-index:1001}
.nav-user.open .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown a{display:flex!important;align-items:center;gap:10px;padding:10px 14px!important;border-radius:8px!important;font-size:13px!important;font-weight:500!important;color:#334155!important;text-decoration:none!important;background:transparent!important;border:none!important;box-shadow:none!important;transition:all .18s ease}
.nav-dropdown a::before{display:none!important}
.nav-dropdown a:hover{background:#F1F5F9!important;color:#0F172A!important}
.nav-dropdown .nav-logout{color:#EF4444!important}
.nav-dropdown .nav-logout:hover{background:#FEF2F2!important;color:#DC2626!important}
.nav-dropdown-divider{height:1px;background:#F1F5F9;margin:4px 10px}

/* Nav scroll effect */
.navbar.scrolled{background:rgba(255,255,255,0.95);box-shadow:0 4px 20px rgba(0,0,0,0.06)}
.navbar.scrolled::after{opacity:0.5}
.nav-hidden{transform:translateY(-100%)}
@media(min-width:769px){
  .nav-hidden{transform:none}
}

/* Mobile nav */
@media(max-width:768px){
  .navbar{position:fixed!important}
  .nav-container{padding:10px 16px 8px;height:auto;min-height:58px;align-items:center;flex-wrap:wrap;gap:8px}
  .nav-logo{font-size:15px;gap:8px;flex:1 1 auto;min-width:0}
  .nav-logo svg{width:26px;height:26px}
  .nav-logo span{font-size:15px}
  .nav-links{order:3;width:100%;gap:4px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{white-space:nowrap;flex-shrink:0;padding:7px 12px;font-size:13px;border-radius:8px}
  .nav-recharge-btn{padding:7px 12px!important;font-size:12px}
  .nav-user{padding:4px 8px 4px 4px!important;gap:6px;border-radius:12px}
  .nav-avatar{width:28px;height:28px;font-size:12px;border-radius:8px}
  .nav-points-badge{padding:3px 8px;font-size:10px}
  .nav-user-meta{flex-direction:row!important;align-items:center!important;gap:6px!important}
  .hero{padding:124px 16px 40px}
  .gallery-page{padding:118px 12px 60px}
}
@media(max-width:480px){
  .nav-container{padding:8px 10px 7px;min-height:52px;gap:7px}
  .nav-logo svg{width:24px;height:24px}
  .nav-logo span{font-size:14px}
  .nav-links{gap:2px}
  .nav-links a{padding:5px 8px;font-size:12px;border-radius:7px}
  .nav-recharge-btn{padding:5px 9px!important;font-size:11px}
  .nav-recharge-btn svg{width:14px!important;height:14px!important}
  .nav-user{padding:4px 6px 4px 4px!important;gap:4px}
  .nav-avatar{width:26px;height:26px;font-size:11px;border-radius:7px}
  .nav-points-badge{padding:2px 6px;font-size:10px;gap:3px}
  .nav-diamond{width:12px!important;height:12px!important}
  .nav-user-meta{gap:4px!important}
  .hero{padding:112px 12px 32px}
  .gallery-page{padding:106px 6px 50px}
}
@media(max-width:380px){
  .nav-container{padding:7px 8px 6px;min-height:48px;gap:6px}
  .nav-logo{gap:4px}
  .nav-logo svg{width:22px;height:22px}
  .nav-logo span{display:none}
  .nav-links a{padding:5px 7px;font-size:11px;border-radius:6px}
  .nav-recharge-btn{padding:5px 7px!important;font-size:10px}
  .nav-recharge-btn span{display:none}
  .nav-recharge-btn svg{width:13px!important;height:13px!important}
  .nav-user{padding:3px 5px 3px 3px!important;gap:3px}
  .nav-avatar{width:24px;height:24px;font-size:10px;border-radius:6px}
  .nav-points-badge{display:none}
}

/* Hero */
.hero{position:relative;padding:140px 24px 80px;overflow:hidden;background:linear-gradient(180deg,#EFF6FF 0%,#FFFFFF 100%)}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.6;animation:float 8s ease-in-out infinite}
.orb-1{width:400px;height:400px;background:radial-gradient(circle,rgba(37,99,235,0.2),transparent);top:-100px;left:-100px;animation-delay:0s}
.orb-2{width:300px;height:300px;background:radial-gradient(circle,rgba(96,165,250,0.2),transparent);bottom:-50px;right:-80px;animation-delay:-3s}
.orb-3{width:250px;height:250px;background:radial-gradient(circle,rgba(129,140,248,0.15),transparent);top:50%;left:60%;animation-delay:-6s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-30px) scale(1.05)}66%{transform:translate(-20px,20px) scale(0.95)}}
.hero-content{position:relative;z-index:1;text-align:center;max-width:800px;margin:0 auto}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:50px;padding:6px 20px;font-size:13px;font-weight:500;color:var(--text-secondary);margin-bottom:28px;box-shadow:var(--shadow-sm)}
.badge-dot{width:8px;height:8px;border-radius:50%;background:var(--success);animation:pulse-dot 2s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(16,185,129,0.4)}50%{opacity:0.7;box-shadow:0 0 0 6px rgba(16,185,129,0)}}
.hero h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:700;line-height:1.25;margin-bottom:20px;letter-spacing:-0.02em}
.hero-sub{font-size:clamp(1rem,2vw,1.15rem);color:var(--text-secondary);line-height:1.7;max-width:600px;margin-left:auto;margin-right:auto}

/* Upload Section */
.upload-section{padding:40px 24px 80px}
.upload-card{max-width:720px;margin:0 auto;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden}
.upload-header{padding:32px 32px 0;text-align:center}
.upload-header h2{font-size:24px;font-weight:700;margin-bottom:8px}
.upload-header>p{color:var(--text-muted);font-size:14px}
.upload-points-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.points-display-card{position:relative;overflow:hidden;text-align:left;padding:14px 16px;border-radius:16px;border:1px solid #DBEAFE;background:linear-gradient(135deg,#F8FBFF 0%,#EFF6FF 100%);box-shadow:0 10px 26px rgba(37,99,235,0.06)}
.points-display-card::after{content:'';position:absolute;right:-24px;top:-24px;width:84px;height:84px;border-radius:50%;background:radial-gradient(circle,rgba(96,165,250,0.18),transparent 70%)}
.points-display-card.muted{border-color:#E2E8F0;background:linear-gradient(135deg,#FFFFFF 0%,#F8FAFC 100%);box-shadow:0 10px 24px rgba(15,23,42,0.05)}
.points-display-card .points-label{position:relative;z-index:1;display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#64748B;margin-bottom:8px}
.points-display-card .points-value{position:relative;z-index:1;display:flex;align-items:baseline;gap:6px;font-size:24px;font-weight:700;color:#0F172A;line-height:1}
.points-display-card .points-unit{font-size:12px;font-weight:600;color:#64748B}
.points-display-card .points-hint{position:relative;z-index:1;display:block;margin-top:8px;font-size:12px;color:#94A3B8}
.quota-warning{background:#FEF3C7;color:#92400E;padding:10px 16px;border-radius:var(--radius-sm);margin-top:16px;font-size:13px}
.quota-exhausted{background:#FEE2E2;color:#991B1B;padding:10px 16px;border-radius:var(--radius-sm);margin-top:16px;font-size:13px;font-weight:500}

.upload-area{margin:24px 32px;border:2px dashed var(--primary-lighter);border-radius:var(--radius-lg);padding:48px 24px;text-align:center;cursor:pointer;transition:all 0.3s ease;background:var(--primary-bg);position:relative;min-height:220px;display:flex;align-items:center;justify-content:center}
.upload-area:hover,.upload-area.drag-over{border-color:var(--primary);background:var(--accent-light);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.upload-area.has-file{border-style:solid;border-color:var(--primary);background:var(--bg);padding:0}
.upload-icon{margin-bottom:16px;transition:transform 0.3s ease}
.upload-area:hover .upload-icon{transform:translateY(-4px)}
.upload-text{font-size:16px;color:var(--text-secondary);margin-bottom:6px}
.upload-link{color:var(--primary);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.upload-hint{font-size:12px;color:var(--text-muted)}
.upload-preview{width:100%;height:100%;min-height:300px;display:flex;align-items:center;justify-content:center;position:relative}
.upload-preview img{max-width:100%;max-height:360px;object-fit:contain;border-radius:var(--radius)}
.upload-preview.preview-accepting img{animation:preview-photo-arrive .72s cubic-bezier(.18,.88,.22,1)}
.preview-remove{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,0.6);color:white;border:none;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.preview-remove:hover{background:var(--error)}

.upload-options{padding:0 32px 32px;display:none}
.option-group{margin-bottom:24px}
.option-label{display:block;font-size:13px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:12px}
.option-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.option-card{cursor:pointer}
.option-card input:checked+.card-content{border-color:var(--primary);background:var(--primary-bg);box-shadow:0 0 0 3px rgba(37,99,235,0.1)}
.option-card input:checked+.card-content .card-title{color:var(--primary)}
.card-content{border:1.5px solid var(--border);border-radius:var(--radius);padding:14px 12px;text-align:center;transition:var(--transition);background:var(--bg)}
.card-content:hover{border-color:var(--primary-lighter)}
.card-icon{display:block;font-size:22px;margin-bottom:6px}
.card-title{display:block;font-size:14px;font-weight:600;color:var(--text);margin-bottom:2px}
.card-desc{display:block;font-size:11px;color:var(--text-muted)}

.btn-restore{width:100%;padding:16px 24px;background:linear-gradient(135deg,#2563EB,#1D4ED8);color:white;border:none;border-radius:var(--radius);font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all 0.3s ease;box-shadow:0 4px 14px rgba(37,99,235,0.35)}
.btn-restore:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(37,99,235,0.45)}
.btn-restore:active{transform:translateY(0)}
.btn-restore:disabled{opacity:0.6;cursor:not-allowed;transform:none}

/* Result */
.result-section{padding:32px;display:none}
.result-compare{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.compare-item{flex:1;min-width:200px;max-width:320px}
.compare-label{text-align:center;font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:10px}
.compare-item img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);cursor:pointer;transition:transform 0.2s ease,box-shadow 0.2s ease}
.compare-item img:hover{transform:scale(1.03);box-shadow:var(--shadow-lg)}
.compare-arrow{flex-shrink:0;display:flex;align-items:center}
.result-actions{display:flex;gap:12px;margin-top:28px;justify-content:center;flex-wrap:wrap}
.btn-download,.btn-retry{padding:12px 24px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:var(--transition);text-decoration:none}
.btn-download{background:var(--primary);color:white;border:none;box-shadow:0 4px 12px rgba(37,99,235,0.3)}
.btn-download:hover{background:var(--primary-dark);transform:translateY(-1px)}
.btn-retry{background:var(--bg);color:var(--text-secondary);border:1.5px solid var(--border)}
.btn-retry:hover{background:var(--bg-secondary);border-color:var(--text-muted)}

/* Progress — AI Loading */
.progress-section{padding:56px 32px;display:none;text-align:center}
.ai-loading{display:flex;flex-direction:column;align-items:center;position:relative}
.ai-loader{position:relative;width:150px;height:150px;margin-bottom:36px;perspective:1000px}
.ai-loader-ring{position:absolute;inset:0;border-radius:50%;border:3px solid transparent;border-top-color:#2563EB;border-right-color:#60A5FA;border-left-color:#93C5FD;animation:spin 1.6s cubic-bezier(0.4,0.1,0.2,0.9) infinite;filter:drop-shadow(0 0 12px rgba(37,99,235,0.25))}
.ai-loader-ring::before{content:'';position:absolute;inset:10px;border-radius:50%;border:2px solid transparent;border-top-color:#60A5FA;border-bottom-color:#3B82F6;animation:spin 2.8s cubic-bezier(0.5,0.2,0.5,0.8) infinite reverse}
.ai-loader-ring::after{content:'';position:absolute;inset:-12px;border-radius:50%;border:2px solid transparent;border-bottom-color:#BFDBFE;border-right-color:#93C5FD;animation:spin 4.2s cubic-bezier(0.3,0.1,0.7,0.9) infinite}
.ai-loader-inner{position:absolute;inset:20px;border-radius:50%;background:linear-gradient(145deg,#F8FAFC,#EFF6FF);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 48px rgba(37,99,235,0.18),inset 0 1px 0 rgba(255,255,255,0.8)}
.ai-loader-inner::before{content:'';width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#1D4ED8,#2563EB,#60A5FA);box-shadow:0 0 24px rgba(37,99,235,0.45);animation:core-pulse 2.8s ease-in-out infinite}
.ai-loader-inner::after{content:'';position:absolute;width:28px;height:28px;border-radius:50%;background:conic-gradient(from 0deg,#60A5FA,#2563EB,#60A5FA);mask:radial-gradient(transparent 55%,black 56%);-webkit-mask:radial-gradient(transparent 55%,black 56%);animation:spin 1.8s linear infinite}
.ai-particles{position:absolute;top:50%;left:50%;width:0;height:0;z-index:10}
.ai-particle{position:absolute;width:8px;height:8px;border-radius:50%;opacity:0;animation:particle-orbit 4.2s ease-in-out infinite}
.ai-particle::before{content:'';position:absolute;inset:0;border-radius:50%;background:inherit;filter:blur(3px);opacity:0.6}
.p1{background:linear-gradient(135deg,#2563EB,#60A5FA);animation-delay:0s;--radius:72px}
.p2{background:linear-gradient(135deg,#60A5FA,#93C5FD);animation-delay:0.5s;--radius:64px}
.p3{background:linear-gradient(135deg,#3B82F6,#2563EB);animation-delay:1s;--radius:68px}
.p4{background:linear-gradient(135deg,#93C5FD,#60A5FA);animation-delay:1.5s;--radius:76px}
.p5{background:linear-gradient(135deg,#2563EB,#3B82F6);animation-delay:2s;--radius:60px}
.p6{background:linear-gradient(135deg,#60A5FA,#2563EB);animation-delay:2.5s;--radius:80px}
.progress-status{font-size:17px;font-weight:800;background:linear-gradient(135deg,#0F172A,#2563EB);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px;letter-spacing:-.02em}
.progress-hint{font-size:13.5px;color:#64748B;font-weight:500}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes core-pulse{0%,100%{transform:scale(0.78);opacity:0.65;filter:drop-shadow(0 0 16px rgba(37,99,235,0.35))}50%{transform:scale(1.15);opacity:1;filter:drop-shadow(0 0 36px rgba(37,99,235,0.65))}}
@keyframes particle-orbit{0%{opacity:0;transform:rotate(0deg) translateX(calc(var(--radius)*0.6)) rotate(0deg) scale(0)}12%{opacity:1;transform:rotate(60deg) translateX(calc(var(--radius)*0.85)) rotate(-60deg) scale(0.9)}25%{opacity:1;transform:rotate(120deg) translateX(var(--radius)) rotate(-120deg) scale(1)}50%{opacity:0.85;transform:rotate(240deg) translateX(calc(var(--radius)*0.95)) rotate(-240deg) scale(0.95)}75%{opacity:0.4;transform:rotate(320deg) translateX(calc(var(--radius)*0.7)) rotate(-320deg) scale(0.7)}100%{opacity:0;transform:rotate(360deg) translateX(calc(var(--radius)*0.5)) rotate(-360deg) scale(0)}}

/* Lock icon & hero btn */
.lock-icon-wrap{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#2563EB,#60A5FA);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;box-shadow:0 8px 30px rgba(37,99,235,0.25)}
.btn-hero{display:inline-block;padding:14px 40px;background:linear-gradient(135deg,#2563EB,#1D4ED8);color:white;border-radius:10px;text-decoration:none;font-weight:600;font-size:15px;box-shadow:0 4px 14px rgba(37,99,235,0.35);transition:all 0.2s}
.btn-hero:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(37,99,235,0.45)}

/* Footer */
.footer{background:var(--bg-secondary);border-top:1px solid var(--border);padding:48px 24px 24px}
.footer-content{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px;margin-bottom:32px}
.footer-brand .footer-logo{font-size:18px;font-weight:700;color:var(--text)}
.footer-brand p{color:var(--text-muted);font-size:13px;margin-top:6px}
.footer-links{display:flex;gap:24px}
.footer-links a{color:var(--text-secondary);text-decoration:none;font-size:14px;transition:var(--transition)}
.footer-links a:hover{color:var(--primary)}
.footer-bottom{border-top:1px solid var(--border);padding-top:20px;text-align:center}
.footer-bottom p{color:var(--text-muted);font-size:13px}

/* Toast */
.toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);background:var(--text);color:white;padding:12px 24px;border-radius:50px;font-size:14px;font-weight:500;z-index:9999;opacity:0;pointer-events:none;transition:all 0.3s ease;box-shadow:var(--shadow-lg)}
.toast.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(-8px)}
.toast.error{background:var(--error)}
.toast.success{background:var(--success)}

/* Gallery */
.gallery-page{padding:100px 24px 80px}
.gallery-page .page-title{text-align:center;margin-bottom:40px}
.gallery-page .page-title h1{font-size:28px;font-weight:700;margin-bottom:8px}
.gallery-page .page-title p{color:var(--text-muted)}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.gallery-item{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all 0.3s ease}
.gallery-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.gallery-item .gi-image{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-tertiary);cursor:pointer}
.gallery-item .gi-image img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease}
.gallery-item:hover .gi-image img{transform:scale(1.05)}
.gallery-item .gi-status{position:absolute;top:10px;right:10px;padding:4px 12px;border-radius:50px;font-size:11px;font-weight:600;backdrop-filter:blur(8px)}
.gallery-item .gi-info{padding:16px}
.gallery-item .gi-name{font-size:14px;font-weight:500;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gallery-item .gi-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted)}
.status-completed{background:rgba(16,185,129,0.15);color:#065F46}
.status-processing{background:rgba(245,158,11,0.15);color:#92400E}
.status-pending{background:rgba(148,163,184,0.15);color:#475569}
.status-failed{background:rgba(239,68,68,0.15);color:#991B1B}
.gallery-empty{text-align:center;padding:80px 24px;color:var(--text-muted)}
.gallery-empty svg{margin-bottom:16px;opacity:0.3}
.gallery-empty h3{font-size:18px;color:var(--text);margin-bottom:8px}

/* Image Modal */
.modal-overlay{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,0.75);display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeIn 0.2s ease;backdrop-filter:blur(4px)}
.modal-content{background:var(--bg);border-radius:var(--radius-xl);max-width:900px;width:100%;max-height:90vh;overflow:auto;position:relative;box-shadow:var(--shadow-xl);animation:scaleIn 0.25s ease}
.modal-close{position:absolute;top:16px;right:16px;z-index:1;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,0.5);color:white;border:none;cursor:pointer;font-size:18px;transition:var(--transition)}
.modal-close:hover{background:rgba(0,0,0,0.7)}
.modal-compare{display:flex;gap:0}
.modal-compare .compare-side{flex:1;padding:32px;text-align:center}
.modal-compare .compare-side h3{font-size:14px;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);margin-bottom:16px}
.modal-compare .compare-side img{max-width:100%;max-height:60vh;border-radius:var(--radius);border:1px solid var(--border)}
.modal-divider{width:1px;background:var(--border)}
.modal-actions{padding:24px 32px;border-top:1px solid var(--border);display:flex;justify-content:center;gap:12px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}

/* Glass pane effect for preview comparison */
.glass-pane{background:rgba(255,255,255,0.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.5)}

/* Lightbox */
.lightbox-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.25s ease;padding:24px}
.lightbox-overlay.show{opacity:1;pointer-events:auto}
.lightbox-overlay img{max-width:95vw;max-height:95vh;object-fit:contain;border-radius:4px;box-shadow:0 0 60px rgba(0,0,0,0.5);animation:zoomIn 0.25s ease}
.lightbox-close{position:absolute;top:20px;right:24px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.15);color:white;border:none;cursor:pointer;font-size:22px;display:flex;align-items:center;justify-content:center;transition:background 0.15s;z-index:1}
.lightbox-close:hover{background:rgba(255,255,255,0.25)}
@keyframes zoomIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}

/* Upload Courier */
.upload-courier{
  --courier-x:0px;--courier-y:0px;position:fixed;left:22px;bottom:18px;width:198px;height:244px;z-index:650;
  pointer-events:none;transform:translate3d(var(--courier-x),var(--courier-y),0);
  transition:transform var(--walk-duration,1.5s) cubic-bezier(.22,.78,.22,1),opacity .45s ease;
  transform-style:preserve-3d;opacity:1
}
.courier-ground{
  position:absolute;left:14px;right:18px;bottom:6px;height:28px;border-radius:999px;
  background:radial-gradient(circle,rgba(15,23,42,.24) 0%,rgba(15,23,42,.14) 42%,transparent 74%);
  filter:blur(9px);transform:translateZ(-40px)
}
.courier-figure{
  position:absolute;left:42px;bottom:18px;width:114px;height:184px;transform-style:preserve-3d;
  animation:courier-idle 4.5s ease-in-out infinite
}
.courier-head,.courier-torso,.courier-arm,.courier-leg,.courier-photo,.courier-hand,.courier-shoe,.courier-neck{
  position:absolute;box-shadow:0 16px 28px rgba(15,23,42,.12)
}
.courier-head{
  left:36px;top:2px;width:40px;height:44px;border-radius:48% 48% 46% 46%;
  background:linear-gradient(180deg,#f3c7a8 0%,#eab38d 100%);
  transform:translateZ(28px);
  box-shadow:0 10px 20px rgba(96,58,34,.16)
}
.courier-hair{
  position:absolute;left:-2px;top:-4px;width:44px;height:24px;border-radius:18px 18px 10px 10px;
  background:linear-gradient(180deg,#1e293b 0%,#334155 100%)
}
.courier-face{
  position:absolute;inset:6px 4px 4px;border-radius:42% 42% 46% 46%;
  background:radial-gradient(circle at 35% 25%,#ffd7bd 0%,#efc0a2 58%,#e1aa80 100%)
}
.courier-eye,.courier-mouth{
  position:absolute;z-index:1
}
.courier-eye{
  top:19px;width:4px;height:4px;border-radius:50%;background:#0f172a
}
.courier-eye.eye-left{left:12px}
.courier-eye.eye-right{right:12px}
.courier-ear{
  position:absolute;top:18px;width:6px;height:12px;border-radius:3px;
  background:linear-gradient(180deg,#eab38d,#d99870);z-index:-1
}
.courier-ear.ear-left{left:-3px}
.courier-ear.ear-right{right:-3px}
.courier-nose{
  position:absolute;left:50%;top:24px;width:6px;height:4px;
  transform:translateX(-50%);border-radius:3px;background:#c27c59
}
.courier-mouth{
  left:50%;bottom:8px;width:11px;height:5px;transform:translateX(-50%);
  border-bottom:2px solid #9a3412;border-radius:0 0 10px 10px
}
.courier-neck{
  left:48px;top:40px;width:16px;height:16px;border-radius:8px;
  background:linear-gradient(180deg,#efbc99,#dfa27a);transform:translateZ(14px)
}
.courier-torso{
  left:24px;top:50px;width:64px;height:72px;border-radius:20px 20px 18px 18px;
  background:linear-gradient(180deg,#1d4ed8 0%,#1e40af 60%,#1e3a8a 100%);
  transform:translateZ(14px)
}
.courier-collar{
  position:absolute;left:50%;top:0;width:30px;height:8px;
  transform:translateX(-50%);border-radius:0 0 12px 12px;
  background:#1e40af;border-bottom:1px solid #1e3a8a;z-index:2
}
.courier-shirt{
  position:absolute;left:50%;top:6px;width:34px;height:28px;transform:translateX(-50%);
  border-radius:0 0 16px 16px;background:linear-gradient(180deg,#60a5fa,#dbeafe)
}
.courier-belt{
  position:absolute;left:8px;right:8px;bottom:10px;height:8px;border-radius:999px;
  background:linear-gradient(180deg,#334155,#0f172a)
}
.courier-arm{
  top:56px;width:18px;height:60px;border-radius:12px 12px 10px 10px;
  background:linear-gradient(180deg,#efbc99 0%,#d99870 100%)
}
.courier-arm::before{
  content:'';position:absolute;left:-2px;right:-2px;top:-2px;height:24px;
  border-radius:10px 10px 6px 6px;
  background:linear-gradient(180deg,#1d4ed8 0%,#1e40af 100%);
  box-shadow:0 4px 6px rgba(15,23,42,.12)
}
.courier-arm-left{left:18px;transform-origin:top center;transform:rotate(16deg) translateZ(20px)}
.courier-arm-right{left:78px;transform-origin:top center;transform:rotate(-32deg) translateZ(26px)}
.courier-hand{
  top:108px;width:16px;height:16px;border-radius:50%;
  background:linear-gradient(180deg,#f1c4a5,#dd9f78)
}
.courier-hand-left{left:18px;transform:translateZ(18px)}
.courier-hand-right{left:80px;transform:translateZ(30px)}
.courier-leg{
  top:118px;width:20px;height:60px;border-radius:6px 6px 12px 12px;
  background:linear-gradient(180deg,#334155 0%,#0f172a 100%)
}
.courier-leg-left{left:34px;transform-origin:top center;transform:translateZ(10px)}
.courier-leg-right{left:60px;transform-origin:top center;transform:translateZ(10px)}
.courier-shoe{
  top:171px;width:27px;height:12px;border-radius:12px 12px 9px 9px;
  background:linear-gradient(180deg,#020617,#1e293b 100%)
}
.courier-shoe-left{left:29px;transform-origin:10px 2px;transform:translateZ(14px) rotate(-4deg)}
.courier-shoe-right{left:57px;transform-origin:14px 2px;transform:translateZ(14px) rotate(4deg)}
.courier-photo{
  left:72px;top:60px;width:72px;height:94px;padding:4px;border-radius:10px;
  background:linear-gradient(135deg,#1e3a8a 0%,#172554 100%);overflow:hidden;
  border:2px solid #3b82f6;display:flex;align-items:center;justify-content:center;
  transform:translate3d(0,0,46px) rotate(7deg);
  transition:all .3s ease, transform .82s cubic-bezier(.18,.72,.16,1), opacity .72s ease, filter .72s ease
}
.courier-photo.has-image{
  background:linear-gradient(180deg,#ffffff 0%,#e2e8f0 100%);
  border:1px solid rgba(148,163,184,.55);
}
.courier-photo-text{
  color:#ffffff;font-size:18px;font-weight:700;letter-spacing:3px;
  text-shadow:0 2px 4px rgba(0,0,0,.5);transform:rotate(-6deg);
  transition:opacity .25s ease;z-index:2
}
.courier-photo.has-image .courier-photo-text{opacity:0}
.courier-photo img{
  position:absolute;left:4px;top:4px;width:calc(100% - 8px);height:calc(100% - 8px);
  object-fit:cover;border-radius:6px;display:block;opacity:0;
  transition:opacity .25s ease;background:linear-gradient(135deg,#F8FAFC,#DBEAFE);z-index:3
}
.courier-photo.has-image img{opacity:1}
.courier-photo-trail{
  position:absolute;left:50%;top:50%;width:42px;height:14px;border-radius:999px;
  background:linear-gradient(90deg,rgba(96,165,250,0),rgba(96,165,250,.38),rgba(255,255,255,0));
  filter:blur(4px);opacity:0;pointer-events:none;transform:translate(-50%,-50%) rotate(-16deg)
}
.courier-photo-trail.trail-b{
  width:30px;height:10px;transform:translate(-60%,-45%) rotate(10deg)
}
.courier-photo-shine{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.9),transparent 30%,transparent 70%,rgba(255,255,255,.45));
  mix-blend-mode:screen
}
.upload-courier.is-active .courier-figure{animation:courier-walk-body var(--step-duration,.42s) ease-in-out infinite}
.upload-courier.is-active .courier-ground{animation:courier-ground-walk var(--step-duration,.42s) ease-in-out infinite}
.upload-courier.is-active .courier-head{animation:courier-head-walk var(--step-duration,.42s) ease-in-out infinite}
.upload-courier.is-active .courier-torso{animation:courier-torso-walk var(--step-duration,.42s) ease-in-out infinite}
.upload-courier.is-active .courier-arm-left{animation:courier-arm-left-walk var(--step-duration,.42s) ease-in-out infinite}
.upload-courier.is-active .courier-arm-right{animation:courier-arm-right-walk var(--step-duration,.42s) ease-in-out infinite}
.upload-courier.is-active .courier-hand-left{animation:courier-hand-left-walk var(--step-duration,.42s) ease-in-out infinite}
.upload-courier.is-active .courier-hand-right{animation:courier-hand-right-walk var(--step-duration,.42s) ease-in-out infinite}
.upload-courier.is-active .courier-leg-left{animation:courier-leg-left-walk var(--step-duration,.42s) ease-in-out infinite}
.upload-courier.is-active .courier-leg-right{animation:courier-leg-right-walk var(--step-duration,.42s) ease-in-out infinite}
.upload-courier.is-active .courier-shoe-left{animation:courier-shoe-left-walk var(--step-duration,.42s) ease-in-out infinite}
.upload-courier.is-active .courier-shoe-right{animation:courier-shoe-right-walk var(--step-duration,.42s) ease-in-out infinite}
.upload-courier.is-arriving .courier-figure,
.upload-courier.is-arriving .courier-ground,
.upload-courier.is-arriving .courier-head,
.upload-courier.is-arriving .courier-torso,
.upload-courier.is-arriving .courier-arm-left,
.upload-courier.is-arriving .courier-arm-right,
.upload-courier.is-arriving .courier-hand-left,
.upload-courier.is-arriving .courier-hand-right,
.upload-courier.is-arriving .courier-leg-left,
.upload-courier.is-arriving .courier-leg-right,
.upload-courier.is-arriving .courier-shoe-left,
.upload-courier.is-arriving .courier-shoe-right{
  animation-play-state:paused
}
.upload-courier.is-pre-throw .courier-figure{animation:courier-pre-throw .26s ease forwards}
.upload-courier.is-pre-throw .courier-arm-right{transform:rotate(-86deg) translateZ(26px)}
.upload-courier.is-pre-throw .courier-hand-right{transform:translate3d(2px,-12px,30px)}
.upload-courier.is-pre-throw .courier-arm-left{transform:rotate(8deg) translateZ(20px)}
.upload-courier.is-pre-throw .courier-photo{
  transform:translate3d(-4px,-12px,58px) rotate(-6deg) scale(1.02);
  box-shadow:0 24px 42px rgba(37,99,235,.18)
}
.upload-courier.is-throwing .courier-photo{
  transform:translate3d(var(--photo-drop-x,0px),var(--photo-drop-y,0px),82px) rotate(42deg) scale(.6);
  opacity:0;filter:blur(1.4px)
}
.upload-courier.is-throwing .courier-arm-right{transform:rotate(-64deg) translateZ(26px)}
.upload-courier.is-throwing .courier-hand-right{transform:translate3d(4px,-9px,30px)}
.upload-courier.is-throwing .courier-photo-trail{
  opacity:1;animation:courier-photo-trail .44s ease-out forwards
}
.upload-courier.is-resetting{opacity:.55}
.upload-area.delivery-hit{
  animation:upload-delivery-hit .86s cubic-bezier(.2,.9,.22,1);
  box-shadow:0 0 0 6px rgba(96,165,250,.18),0 18px 44px rgba(37,99,235,.16)
}
.upload-area.preview-accepting{
  box-shadow:0 0 0 8px rgba(147,197,253,.16),0 22px 52px rgba(37,99,235,.14)
}
.upload-mouth{
  position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);
  width:0;height:0;background-color:#0f172a;border-radius:50%;
  opacity:0;z-index:50;pointer-events:none;
  transition:all .35s cubic-bezier(.34,1.56,.64,1);
  box-shadow:inset 0 8px 16px rgba(0,0,0,.6);
  display:flex;align-items:flex-end;justify-content:center;overflow:hidden
}
.upload-mouth::after{
  content:'';width:60%;height:40%;background-color:#ef4444;
  border-radius:50% 50% 0 0;transform:translateY(100%);
  transition:transform .3s ease
}
.upload-area.is-hungry .upload-mouth{
  opacity:1;width:90px;height:100px;border-radius:40px 40px 60px 60px
}
.upload-area.is-hungry .upload-mouth::after{
  transform:translateY(20%)
}
.upload-area.is-eating .upload-mouth{
  opacity:1;width:90px;height:100px;border-radius:40px 40px 60px 60px;
  animation:upload-mouth-chew .35s alternate 2 ease-in-out
}
.upload-area.delivery-hit::after{
  content:'';position:absolute;left:50%;top:50%;width:110px;height:110px;border-radius:50%;
  border:2px solid rgba(96,165,250,.28);transform:translate(-50%,-50%);
  animation:upload-delivery-ripple .86s ease-out
}
.courier-photo-flight{
  position:fixed;z-index:760;pointer-events:none;padding:4px;border-radius:12px;
  background:linear-gradient(180deg,#fff 0%,#e2e8f0 100%);
  border:1px solid rgba(148,163,184,.48);
  box-shadow:0 28px 52px rgba(37,99,235,.18),0 18px 30px rgba(15,23,42,.16);
  overflow:visible;transform-origin:center center
}
.courier-photo-flight img{
  width:100%;height:100%;display:block;object-fit:cover;border-radius:9px
}
.courier-photo-flight .flight-trail{
  position:absolute;left:50%;top:50%;border-radius:999px;pointer-events:none;opacity:.72;
  background:linear-gradient(90deg,rgba(96,165,250,0),rgba(96,165,250,.52),rgba(255,255,255,.92),rgba(96,165,250,0));
  filter:blur(5px)
}
.courier-photo-flight .flight-trail.trail-a{
  width:84px;height:16px;transform:translate(-116%,-50%) rotate(-18deg)
}
.courier-photo-flight .flight-trail.trail-b{
  width:58px;height:10px;transform:translate(-102%,-5%) rotate(10deg);opacity:.5
}
@keyframes courier-idle{
  0%,100%{transform:translateY(0) rotateX(0) rotateY(-8deg)}
  50%{transform:translateY(-4px) rotateX(1deg) rotateY(-10deg)}
}
@keyframes courier-walk-body{
  0%{transform:translateY(0) rotateY(-8deg)}
  25%{transform:translateY(-4px) rotateY(-9deg)}
  50%{transform:translateY(0) rotateY(-10deg)}
  75%{transform:translateY(-5px) rotateY(-9deg)}
  100%{transform:translateY(0) rotateY(-8deg)}
}
@keyframes courier-ground-walk{
  0%,100%{transform:translateZ(-40px) scaleX(1);opacity:.82}
  25%{transform:translateZ(-40px) scaleX(1.08);opacity:1}
  50%{transform:translateZ(-40px) scaleX(1.03);opacity:.86}
  75%{transform:translateZ(-40px) scaleX(1.1);opacity:1}
}
@keyframes courier-head-walk{
  0%,100%{transform:translateZ(28px) rotate(-1deg)}
  50%{transform:translate3d(0,-2px,28px) rotate(1.5deg)}
}
@keyframes courier-torso-walk{
  0%,100%{transform:translateZ(14px) rotate(0deg)}
  50%{transform:translate3d(0,-1px,14px) rotate(-1.5deg)}
}
@keyframes courier-arm-left-walk{
  0%,100%{transform:rotate(28deg) translateZ(20px)}
  50%{transform:rotate(-2deg) translateZ(20px)}
}
@keyframes courier-arm-right-walk{
  0%,100%{transform:rotate(-42deg) translateZ(26px)}
  50%{transform:rotate(-10deg) translateZ(26px)}
}
@keyframes courier-hand-left-walk{
  0%,100%{transform:translate3d(-1px,2px,18px)}
  50%{transform:translate3d(2px,-4px,18px)}
}
@keyframes courier-hand-right-walk{
  0%,100%{transform:translate3d(1px,-4px,30px)}
  50%{transform:translate3d(-2px,3px,30px)}
}
@keyframes courier-leg-left-walk{
  0%,100%{transform:translateZ(10px) rotate(18deg)}
  50%{transform:translate3d(0,2px,10px) rotate(-14deg)}
}
@keyframes courier-leg-right-walk{
  0%,100%{transform:translate3d(0,2px,10px) rotate(-14deg)}
  50%{transform:translateZ(10px) rotate(18deg)}
}
@keyframes courier-shoe-left-walk{
  0%,100%{transform:translate3d(0,0,14px) rotate(10deg);box-shadow:0 14px 16px rgba(2,6,23,.16)}
  15%{transform:translate3d(0,3px,14px) rotate(2deg);box-shadow:0 8px 8px rgba(2,6,23,.26)}
  50%{transform:translate3d(0,-1px,14px) rotate(-10deg);box-shadow:0 18px 18px rgba(2,6,23,.14)}
}
@keyframes courier-shoe-right-walk{
  0%,100%{transform:translate3d(0,-1px,14px) rotate(-10deg);box-shadow:0 18px 18px rgba(2,6,23,.14)}
  50%{transform:translate3d(0,3px,14px) rotate(8deg);box-shadow:0 8px 8px rgba(2,6,23,.26)}
  65%{transform:translate3d(0,0,14px) rotate(12deg);box-shadow:0 14px 16px rgba(2,6,23,.16)}
}
@keyframes upload-delivery-hit{
  0%{transform:scale(1)}
  24%{transform:scale(1.02)}
  52%{transform:scale(.992)}
  100%{transform:scale(1)}
}
@keyframes preview-photo-arrive{
  0%{transform:scale(.72) translateY(22px);opacity:.22;filter:blur(4px)}
  58%{transform:scale(1.04) translateY(-8px);opacity:1;filter:blur(0)}
  76%{transform:scale(.985) translateY(4px)}
  100%{transform:scale(1) translateY(0);opacity:1}
}
@keyframes upload-delivery-ripple{
  0%{opacity:.55;transform:translate(-50%,-50%) scale(.34)}
  70%{opacity:.18;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.18)}
}
@keyframes upload-mouth-chew{
  0%{width:90px;height:100px;border-radius:40px 40px 60px 60px}
  100%{width:110px;height:20px;border-radius:20px}
}
@keyframes courier-pre-throw{
  0%{transform:translateY(0) rotateY(-8deg)}
  100%{transform:translateY(-2px) rotateY(-14deg)}
}
@keyframes courier-photo-trail{
  0%{opacity:.62;transform:translate(-46%,-50%) scale(1) rotate(-16deg)}
  100%{opacity:0;transform:translate(-110%,-82%) scale(1.7) rotate(-22deg)}
}

/* ========== Responsive ========== */

/* Tablet & Mobile (<=1024px) */
@media(max-width:1024px){
  .container{padding:0 16px}
  .hero{padding:120px 20px 60px}
  .upload-section{padding:24px 16px 60px}
  .upload-header{padding:24px 20px 0}
  .upload-header h2{font-size:20px}
  .upload-area{margin:18px}
  .upload-area{padding:36px 18px;min-height:180px}
  .upload-options{padding:0 20px 24px}
  .result-section{padding:20px}
  .progress-section{padding:40px 20px}
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
  .footer{padding:36px 16px 20px}
  .footer-content{flex-direction:column;gap:16px;margin-bottom:20px}
  .footer-links{gap:16px}
  .upload-courier{width:170px;height:212px;left:10px;bottom:14px}
  .courier-figure{left:32px;bottom:18px;transform:scale(.88);transform-origin:bottom left}
}

/* Mobile (<=768px) */
@media(max-width:768px){
  .hero{padding:80px 16px 40px}
  .hero .hero-badge{font-size:11px;padding:5px 14px;margin-bottom:20px}
  .hero h1{font-size:1.8rem;margin-bottom:14px}
  .hero-sub{font-size:.9rem}
  .hero-orb{filter:blur(50px)}

  .upload-section{padding:16px 10px 48px}
  .upload-card{border-radius:var(--radius-lg)}
  .upload-header{padding:20px 16px 0}
  .upload-header h2{font-size:18px}
  .upload-header>p{font-size:12px}
  .upload-points-panel{grid-template-columns:1fr;gap:10px}
  .points-display-card{padding:12px 14px;border-radius:14px}
  .points-display-card .points-value{font-size:20px}
  .points-display-card .points-hint{font-size:11px}
  .upload-area{margin:14px 16px;padding:28px 14px;min-height:150px;border-radius:var(--radius)}
  .upload-text{font-size:14px}
  .upload-hint{font-size:11px}
  .upload-icon{width:48px;height:48px;margin-bottom:10px}
  .upload-preview img{max-height:240px}
  .upload-options{padding:0 16px 20px}
  .btn-restore{padding:14px 20px;font-size:14px;border-radius:var(--radius-sm)}
  .quota-warning,.quota-exhausted{font-size:11px;padding:8px 12px}

  .result-section{padding:16px}
  .result-compare{flex-direction:column;gap:10px}
  .compare-item{max-width:100%}
  .compare-arrow svg{width:32px;height:32px}
  .compare-label{font-size:11px}
  .result-actions{flex-direction:column;gap:8px;margin-top:20px}
  .btn-download,.btn-retry{width:100%;justify-content:center;padding:12px 20px;font-size:13px}

  .progress-section{padding:36px 16px}
  .ai-loader{width:90px;height:90px;margin-bottom:24px}
  .ai-loader-ring{border-width:2px}
  .ai-loader-inner{inset:11px}
  .ai-loader-inner::before{width:28px;height:28px}
  .ai-particle{width:4px;height:4px}
  .p1{--dx:-36px;--dy:-26px}
  .p2{--dx:36px;--dy:-20px}
  .p3{--dx:-30px;--dy:26px}
  .p4{--dx:32px;--dy:24px}
  .p5{--dx:-38px;--dy:-2px}
  .p6{--dx:38px;--dy:-6px}
  .progress-status{font-size:14px}
  .progress-hint{font-size:12px}

  .gallery-page{padding:80px 12px 60px}
  .gallery-page .page-title h1{font-size:22px}
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
  .gallery-item .gi-info{padding:10px}
  .gallery-item .gi-name{font-size:12px}
  .gallery-item .gi-meta{font-size:11px}
  .gallery-item .gi-status{font-size:10px;padding:3px 10px;top:6px;right:6px}
  .gallery-empty{padding:50px 16px}
  .gallery-empty h3{font-size:16px}
  .gallery-pagination a,.gallery-pagination span{padding:6px 12px;font-size:12px}

  .modal-overlay{padding:12px}
  .modal-content{border-radius:var(--radius-lg);max-height:95vh}
  .modal-compare{flex-direction:column}
  .modal-compare .compare-side{padding:16px}
  .modal-compare .compare-side img{max-height:30vh}
  .modal-divider{width:100%;height:1px;margin:0}
  .modal-actions{flex-direction:column;padding:16px;gap:8px}
  .modal-close{top:10px;right:10px;width:32px;height:32px;font-size:16px}

  .toast{width:90%;max-width:400px;font-size:13px;padding:10px 20px;bottom:20px}

  .lock-icon-wrap{width:60px;height:60px}
  .lock-icon-wrap svg{width:28px;height:28px}
  .btn-hero{padding:12px 32px;font-size:14px}
  .upload-courier{width:116px;height:152px;left:6px;bottom:10px;opacity:.94}
  .courier-figure{left:18px;bottom:8px;transform:scale(.60);transform-origin:bottom left}

  .footer{padding:28px 14px 18px}
  .footer-links{gap:12px;flex-wrap:wrap}
  .footer-links a{font-size:12px}
  .footer-bottom p{font-size:11px}
}

/* Small Mobile (<=480px) */
@media(max-width:480px){
  .container{padding:0 10px}
  .hero{padding:70px 12px 32px}
  .hero h1{font-size:1.5rem}
  .hero-sub{font-size:.82rem}
  .upload-section{padding:10px 4px 40px}
  .upload-card{border-radius:12px}
  .upload-header{padding:18px 12px 0}
  .upload-header h2{font-size:17px}
  .upload-area{margin:10px 12px;padding:22px 10px;min-height:130px}
  .upload-options{padding:0 12px 16px}
  .btn-restore{padding:12px 16px;font-size:13px}
  .result-section{padding:12px}
  .result-actions{gap:6px;margin-top:16px}
  .progress-section{padding:28px 12px}
  .ai-loader{width:70px;height:70px;margin-bottom:20px}
  .gallery-page{padding:70px 6px 50px}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .gallery-item .gi-name{font-size:11px}
  .gallery-item .gi-info{padding:8px}
  .footer{padding:20px 10px 14px}
  .footer-content{text-align:center}
  .footer-links{justify-content:center}
  .toast{width:calc(100% - 24px);border-radius:10px;font-size:12px}
  .lightbox-close{top:12px;right:12px;width:36px;height:36px;font-size:18px}
  .upload-courier{width:102px;height:136px;left:4px;bottom:8px}
  .courier-figure{left:16px;bottom:6px;transform:scale(.54);transform-origin:bottom left}
}