:root {
  --primary: #1a0a2e;
  --secondary: #e63946;
  --accent: #f4a261;
  --gold: #ffd700;
  --bg-dark: #0f0518;
  --bg-card: #1e1035;
  --text-light: #ffffff;
  --text-muted: #a0a0c0;
  --success: #2ecc71;
  --header-h: 81px;
  --nav-h: 52px;
  --search-h: 56px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg-dark);color:var(--text-light)}

.header{background:linear-gradient(135deg,var(--primary) 0%,#2d1b4e 50%,var(--primary) 100%);border-bottom:3px solid var(--gold);padding:16px 20px;position:sticky;top:0;z-index:100}
.header-content{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px}
.logo-icon{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--gold),var(--accent));color:#2d1b4e;font-size:22px;font-weight:900}
.logo-text h1{margin:0;font-size:32px;font-weight:900;line-height:1;background:linear-gradient(135deg,var(--gold),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-text span{font-size:12px;color:var(--text-muted);font-weight:600}
.header-stats{display:flex;gap:12px;align-items:center}
.sync-status{font-size:12px;font-weight:700;border:1px solid rgba(255,255,255,.2);padding:6px 10px;border-radius:999px;color:#cdd3ff;background:rgba(255,255,255,.06)}
.install-app-btn{border:1px solid rgba(255,215,0,.6);background:linear-gradient(135deg,rgba(255,215,0,.18),rgba(244,162,97,.16));color:#ffeaa7;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:800;cursor:pointer}
.install-app-btn:hover{background:linear-gradient(135deg,rgba(255,215,0,.28),rgba(244,162,97,.22))}
.logout-top-form{margin:0}
.logout-top-btn{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:800;cursor:pointer}
.logout-top-btn:hover{background:rgba(255,255,255,.14)}
.clear-cache-btn{border:1px solid rgba(255,130,130,.55);background:rgba(255,70,70,.12);color:#ffc9c9;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:800;cursor:pointer}
.clear-cache-btn:hover{background:rgba(255,70,70,.2)}
.sync-status.offline{color:#ffb703;border-color:#ffb703;background:rgba(255,183,3,.15)}
.sync-status.pending{color:#ffd166;border-color:#ffd166;background:rgba(255,209,102,.15)}
.sync-status.synced{color:#80ed99;border-color:#80ed99;background:rgba(128,237,153,.15)}

.app-loader{position:fixed;inset:0;background:rgba(8,2,18,.55);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:2000}
.app-loader.show{display:flex}
.loader-box{background:linear-gradient(170deg,#251246,#1a0d32);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:16px 18px;display:flex;align-items:center;gap:10px;box-shadow:0 16px 36px rgba(0,0,0,.35)}
.loader-spinner{width:22px;height:22px;border:3px solid rgba(255,255,255,.2);border-top-color:var(--gold);border-radius:50%;animation:spin .9s linear infinite}
.loader-text{font-size:13px;font-weight:700;color:#ddd2ff}
@keyframes spin{to{transform:rotate(360deg)}}
.stat-badge{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:8px 14px;min-width:86px;text-align:center}
.stat-badge .number{font-size:34px;font-weight:900;color:var(--gold);line-height:1}
.stat-badge .label{font-size:11px;color:var(--text-muted);text-transform:uppercase}

.main-nav-wrap{background:rgba(15,5,24,.95);border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:var(--header-h);z-index:115}
.main-nav{max-width:1200px;margin:0 auto;display:flex;gap:4px;align-items:center;padding:0 20px;overflow:auto}
.nav-link-item{background:none;border:none;color:var(--text-muted);padding:14px 18px;text-decoration:none;font-weight:700;white-space:nowrap}
.nav-link-item.active{color:var(--gold);border-bottom:3px solid var(--gold)}
.logout-inline{margin-left:auto}

.main-content{max-width:1200px;margin:0 auto;padding:20px}
.search-dock{
  position:fixed;
  top:calc(var(--header-h) + var(--nav-h) + 6px);
  left:50%;
  transform:translateX(-50%);
  width:min(1200px,calc(100% - 24px));
  z-index:110;
  padding:8px 0;
  background:linear-gradient(180deg,rgba(15,5,24,.98),rgba(15,5,24,.86));
  backdrop-filter:blur(6px);
}
.search-dock .search-input{
  width:100%;
  box-shadow:0 8px 18px rgba(0,0,0,.26);
}
.search-row{position:relative;display:flex;align-items:center;width:100%}
.search-row .search-input{display:block;width:100%;padding-right:42px}
.search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:none;border-radius:50%;background:rgba(255,255,255,.12);color:#d9d1f8;font-size:18px;line-height:1;display:none;align-items:center;justify-content:center;cursor:pointer;appearance:none;-webkit-appearance:none;padding:0}
.search-clear:hover{background:rgba(255,255,255,.2);color:#fff}
.search-row.has-value .search-clear{display:flex}
.main-content{padding-top:calc(var(--search-h) + 54px)}
.progress-section{background:linear-gradient(135deg,rgba(30,16,53,.9),rgba(45,27,78,.9));border:1px solid rgba(255,215,0,.2);border-radius:16px;padding:20px;margin-bottom:20px}
.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.progress-header h2{margin:0;font-size:30px}
.progress-header span{font-size:30px;font-weight:900;color:var(--gold)}
.progress-bar{width:100%;height:20px;background:rgba(255,255,255,.11);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--accent));width:0;transition:width .4s}
.progress-details{display:flex;gap:20px;flex-wrap:wrap;margin-top:10px;color:var(--text-muted)}

.filter-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.search-input,.filter-select{background:#1a1231;border:1px solid rgba(255,255,255,.12);color:var(--text-light);border-radius:10px;padding:10px 12px}

.stickers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,132px));gap:14px;justify-content:start}
.stickers-grid.grouped-view{display:block!important;width:100%!important}
.sections-wrap{display:flex;flex-direction:column;gap:20px;width:100%}
.section-block{padding-top:4px;width:100%}
.section-title{font-size:22px;font-weight:800;line-height:1.2;margin:0 0 6px;padding-left:10px;border-left:4px solid var(--gold);background:linear-gradient(90deg,rgba(244,162,97,.16),transparent);border-radius:2px}
.section-subtitle{font-size:14px;color:#b7abd8;font-weight:600;margin:0 0 10px 12px}
.section-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(132px,132px))!important;gap:14px;width:100%!important;justify-content:start}
.sticker-card{position:relative;background:linear-gradient(160deg,#1a0d34,#130729);border:2px solid #4d3a78;border-radius:14px;cursor:pointer;min-height:210px;transition:.2s;padding:10px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.sticker-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.35);border-color:#7b62b8}
.sticker-card.have{border-color:var(--gold)}
.sticker-card.dup{border-color:var(--accent)}
.sticker-card::after{content:'';position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:#4b97ff;box-shadow:0 0 10px rgba(75,151,255,.7)}
.sticker-card.dup::after{background:#b06cff;box-shadow:0 0 10px rgba(176,108,255,.7)}
.sticker-card.have::after{background:var(--success);box-shadow:0 0 10px rgba(46,204,113,.7)}
.sticker-number{font-size:46px;font-weight:900;line-height:1;color:rgba(255,255,255,.14);text-align:center;margin-top:22px;letter-spacing:1px}
.sticker-qmark{text-align:center;color:rgba(255,255,255,.22);font-size:26px;line-height:1;margin-top:4px}
.sticker-code{font-weight:800;font-size:15px;letter-spacing:.3px}
.sticker-name{font-size:13px;font-weight:700;line-height:1.3;margin:4px 0 0}
.sticker-meta{font-size:11px;color:#b7abd8;line-height:1.3;margin-top:3px}
.sticker-qty{margin-top:8px;font-size:13px;font-weight:700}
.badge-dup{display:inline-block;background:var(--secondary);font-size:10px;border-radius:999px;padding:2px 7px;margin-left:6px}

.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.auth-card{background:var(--bg-card);border:1px solid rgba(255,255,255,.12);padding:20px;border-radius:16px;max-width:430px;width:100%}
.auth-card h1{font-size:32px;margin:0 0 8px}

.stats-mobile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.stat-card{background:linear-gradient(165deg,#1f0f38,#1a0d32);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px}
.stat-title{font-size:12px;color:#c6b7e8;font-weight:700;margin-bottom:4px}
.stat-value{font-size:24px;font-weight:900;line-height:1}
.stat-sub{font-size:11px;color:#a898cc;margin-top:3px}

.insights-wrap{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.insight-card{background:linear-gradient(170deg,#2a163f,#1b0f2f);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px}
.insight-label{font-size:12px;color:#c6b7e8;font-weight:700}
.insight-value{font-size:16px;font-weight:800;margin-top:4px}

.section-progress .item{background:linear-gradient(170deg,#1e1035,#190c2d);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px;margin-top:8px}
.sp-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sp-name{font-size:14px;font-weight:800}
.sp-percent{font-size:13px;font-weight:900;color:var(--gold)}
.sp-meta{font-size:12px;color:#bcaee0;margin-top:4px}
.sp-bar{height:8px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden;margin-top:8px}
.sp-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--accent));width:0}

.qty-input{max-width:90px}

.sticker-modal-content{border:2px solid rgba(255,215,0,.65);border-radius:22px;background:linear-gradient(170deg,#2a1450,#231042)!important}
.sticker-modal-content .modal-header{border-bottom:0;padding-bottom:0}
.sticker-modal-content .modal-title{font-weight:800;color:#d8cbff}
.sticker-hero{text-align:center;padding:6px 0 4px}
.sticker-hero-code{font-size:64px;font-weight:900;line-height:1;color:#f1edff;letter-spacing:1px}
.sticker-hero-country{font-size:38px;font-weight:800;margin-top:6px}
.sticker-hero-number{font-size:31px;font-weight:900;color:var(--gold);margin-top:4px}
.sticker-hero-group{font-size:25px;color:#bcaee0;margin-top:6px}
.sticker-status-pill{display:inline-block;margin-top:12px;padding:6px 14px;border-radius:999px;font-size:21px;font-weight:800;background:#2a2f8f;color:#6ab1ff}
.sticker-status-pill.have{background:rgba(46,204,113,.2);color:#95f0b6}
.sticker-status-pill.dup{background:rgba(176,108,255,.22);color:#d4b2ff}
.sticker-line{margin-top:10px;font-size:27px;color:#bcaee0;text-align:center}
.sticker-line strong{color:#fff}
.sticker-line .warn{color:#f4a261;font-weight:900}
.sticker-modal-actions{border-top:0;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
.sticker-modal-actions .btn{font-weight:700}
.load-more-wrap{text-align:center;margin:14px 0 6px;display:none}

@media (max-width:768px){
  .header{padding:12px}
  .logo-text h1{font-size:24px}
  .main-nav-wrap{position:static;top:auto}
  .search-dock{
    top:auto;
    bottom:76px;
    width:calc(100% - 16px);
    padding:6px 0;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(21,10,37,.96);
  }
  .main-content{padding:12px 12px 148px}
  .filter-row{grid-template-columns:1fr}
  .search-clear{right:7px;width:24px;height:24px;font-size:16px}
  .stickers-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;justify-content:stretch}
  .section-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px;justify-content:stretch}
  .sticker-card{min-height:170px}
  .sticker-number{font-size:34px;margin-top:12px}
  .sticker-qmark{font-size:20px}
  .sticker-code{font-size:13px}
  .sticker-name{font-size:12px}
  .sticker-meta{font-size:10px}
  .sticker-qty{font-size:12px}
  .main-nav{position:fixed;bottom:0;left:0;right:0;top:auto;background:#120922;padding:10px 8px;z-index:999}
  .logout-inline{margin-left:0}
  .install-app-btn{padding:6px 10px;font-size:11px}
  .logout-top-btn{padding:6px 10px;font-size:11px}
  .clear-cache-btn{padding:6px 10px;font-size:11px}
  .stats-mobile-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stat-card{padding:10px}
  .stat-value{font-size:20px}
  .insights-wrap{grid-template-columns:1fr;gap:8px}
  .section-title{font-size:20px}
  .sticker-hero-code{font-size:52px}
  .sticker-hero-country{font-size:31px}
  .sticker-hero-number{font-size:24px}
  .sticker-hero-group{font-size:20px}
  .sticker-status-pill{font-size:17px}
  .sticker-line{font-size:20px}
}

@media (max-width:420px){
  .stats-mobile-grid{grid-template-columns:1fr 1fr}
  .stat-title{font-size:11px}
  .stat-value{font-size:18px}
  .sp-name{font-size:13px}
  .section-title{font-size:18px}
  .stickers-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .section-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px}
}