/* ── Reset & base ─────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  background:#f0f4f8;color:#1a1a1a;min-height:100vh;
  /* Copy protection */
  user-select:none;-webkit-user-select:none;
}
input,textarea,select{user-select:text;-webkit-user-select:text}

/* ── Top bar ──────────────────────────────────────────────── */
.top-bar{background:#1f5c99;padding:11px 16px;display:flex;align-items:center;justify-content:space-between}
.top-bar .logo{color:#fff;font-size:17px;font-weight:700}
.top-bar .sub{color:#a8cce8;font-size:12px}
.top-bar .user-info{display:flex;align-items:center;gap:10px;color:#a8cce8;font-size:12px}
.top-bar .logout-btn{color:#c8e0f5;text-decoration:none;font-size:12px;padding:4px 8px;border:1px solid #3d7ab5;border-radius:5px}

/* ── Main layout ──────────────────────────────────────────── */
.main{padding:10px 12px;max-width:720px;margin:0 auto}

/* ── Sections ────────────────────────────────────────────── */
.sec{background:#fff;border-radius:11px;border:1px solid #ddd;margin-bottom:9px;overflow:hidden}
.sec-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;cursor:pointer;user-select:none;transition:background .15s;border-left:4px solid transparent}
.sec-hdr:hover{background:#f0f5fb;border-left-color:#1f5c99}
.sec-hdr.is-open{border-bottom:1px solid #eee;border-left-color:#1f5c99}
.sec-ttl{display:flex;align-items:center;gap:7px}
.sec-ico{font-size:15px}
.sec-lbl{font-size:13px;font-weight:600;color:#1a1a1a}
.sec-tag{font-size:11px;padding:2px 7px;border-radius:10px;font-weight:500}
.tag-blue{background:#e8f0fb;color:#0c447c}
.tag-green{background:#eaf3de;color:#27500a}
.tag-orange{background:#fff3e0;color:#854f0b}
.sec-arr{font-size:11px;color:#fff;background:#1f5c99;padding:3px 8px;border-radius:5px;font-weight:600;white-space:nowrap;letter-spacing:.02em}
.sec-body{display:none;padding:13px 15px}
.sec-body.is-open{display:block}

/* ── Step cards ───────────────────────────────────────────── */
.step-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:8px;margin-bottom:11px}
.step-card{background:#f8f9fa;border-radius:9px;border:1px solid #eee;padding:11px 13px}
.step-q{font-size:15px;font-weight:600;color:#1a1a1a;line-height:1.5;margin-bottom:9px;background:#fff3e0;border-left:3px solid #e8a000;padding:8px 11px;border-radius:0 6px 6px 0}
.btn-row{display:flex;gap:6px}
.btn-c{flex:1;padding:7px 5px;border-radius:7px;border:1.5px solid #ddd;background:#fff;font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;text-align:center}
.btn-c.sel-g{background:#eaf3de;border-color:#639922;color:#27500a}
.btn-c.sel-b{background:#e8f0fb;border-color:#1f5c99;color:#0c447c}
.btn-c.sel-o{background:#fff3e0;border-color:#e8a000;color:#854f0b}

/* ── Advice boxes ─────────────────────────────────────────── */
.advice{border-radius:8px;padding:9px 12px;margin-top:8px;font-size:13px;line-height:1.55}
.adv-g{background:#eaf3de;border-left:3px solid #639922}
.adv-b{background:#e8f0fb;border-left:3px solid #1f5c99}
.adv-o{background:#fff3e0;border-left:3px solid #e8a000}

/* ── Q cards (needs) ──────────────────────────────────────── */
.q-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:6px}
.q-card{background:#e8f0fb;border-radius:8px;padding:9px 11px;border-left:3px solid #1f5c99}
.q-lbl{display:inline-block;font-size:10px;font-weight:700;color:#1f5c99;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.q-txt{font-size:13px;color:#1a1a1a;font-style:italic;line-height:1.5}

/* ── Search ───────────────────────────────────────────────── */
.search-lbl{font-size:13px;color:#666;margin-bottom:7px;font-weight:500}
.search-row{display:flex;gap:7px}
.search-row input{flex:1;padding:10px 13px;border:1.5px solid #ddd;border-radius:8px;font-size:15px;outline:none;transition:border .15s}
.search-row input:focus{border-color:#1f5c99}
.search-row .clear-btn{padding:10px 13px;background:#f0f0ee;border:1px solid #ddd;border-radius:8px;font-size:13px;cursor:pointer;color:#555;white-space:nowrap}
.sugg{background:#fff;border:1px solid #ddd;border-radius:8px;margin-top:4px;display:none;max-height:280px;overflow-y:auto}
.sugg-item{padding:10px 13px;font-size:14px;cursor:pointer;border-bottom:.5px solid #eee;display:flex;align-items:center;gap:8px}
.sugg-item:hover,.sugg-item.hi{background:#e8f0fb}
.sugg-cat{font-size:11px;color:#999;margin-left:auto}

/* ── Found card ───────────────────────────────────────────── */
.found-card{background:#f8f9fa;border-radius:9px;padding:12px 13px;margin-bottom:11px}
.found-row{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.found-ico{width:37px;height:37px;border-radius:8px;background:#e8f0fb;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.found-name{font-size:15px;font-weight:600}
.found-cat{font-size:12px;color:#888;margin-top:1px}
.hint-box{font-size:13px;color:#0c447c;background:#e8f0fb;border-radius:6px;padding:8px 11px;line-height:1.5;margin-bottom:7px}
.script-box{font-size:13px;color:#27500a;background:#eaf3de;border-radius:6px;padding:8px 11px;line-height:1.5;border-left:3px solid #639922}
.sc-lbl{font-size:10px;font-weight:700;color:#639922;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.stitle{font-size:11px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.05em;margin:13px 0 7px}

/* ── Item grids ───────────────────────────────────────────── */
.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:8px}
.icard{background:#fff;border-radius:9px;border:1px solid #ddd;padding:10px 11px;cursor:pointer;transition:border .15s}
.icard:hover{border-color:#1f5c99}
.icard.pri{border-color:#e8a000;border-width:1.5px}
.i-ico{font-size:18px;margin-bottom:4px}
.i-name{font-size:13px;font-weight:500;line-height:1.3;margin-bottom:2px}
.i-why{font-size:11px;color:#888;line-height:1.4;margin-bottom:3px}
.i-sc{font-size:11px;color:#3b6d11;font-style:italic;line-height:1.4;border-top:.5px solid #eee;padding-top:3px;margin-top:2px}
.badge{display:inline-block;font-size:10px;padding:2px 6px;border-radius:4px;font-weight:600;margin-bottom:3px}
.bm{background:#e8f0fb;color:#0c447c}
.bh{background:#fff3e0;color:#854f0b}

/* ── Brands ───────────────────────────────────────────────── */
.brand-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px}
.btab{padding:9px 11px;border-radius:7px;border:1.5px solid #b0b8c8;background:#e8edf5;font-size:12px;cursor:pointer;transition:all .15s;font-weight:600;text-align:center;line-height:1.3;color:#2a3a52}
.btab.on{background:#1f5c99;border-color:#1f5c99;color:#fff}
.fact-row{display:flex;gap:7px;padding:5px 0;border-bottom:.5px solid #f0f0ee;font-size:13px}
.fact-ok{color:#1f5c99;flex-shrink:0}
.obj{margin-bottom:7px;border:.5px solid #eee;border-radius:8px;overflow:hidden}
.obj-q{background:#fff3e0;padding:7px 10px;font-size:12px;font-weight:700;color:#854f0b;display:flex;align-items:center;gap:6px}
.obj-a{background:#fff;padding:7px 10px;font-size:13px;border-left:3px solid #e8a000;font-style:italic}

/* ── Seasonal tabs ────────────────────────────────────────── */
.sea-tabs{display:flex;gap:8px;margin-bottom:11px;flex-wrap:wrap}
.sea-tab{flex:1;min-width:80px;padding:10px 8px;border-radius:7px;border:1.5px solid #ddd;background:#f5f5f3;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;text-align:center}
.sea-tab .tap-hint{display:block;font-size:10px;font-weight:400;color:#aaa;margin-top:2px}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:8px}
.scard{border-radius:9px;border:1px solid #ddd;padding:10px 11px}
.s-ico{font-size:18px;margin-bottom:4px}
.s-name{font-size:13px;font-weight:500;line-height:1.3;margin-bottom:3px}
.s-sc{font-size:11px;font-style:italic;line-height:1.4;border-top:.5px solid rgba(0,0,0,.08);padding-top:3px;margin-top:2px;color:#444}

/* ── Close section ────────────────────────────────────────── */
.cl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:8px;margin-bottom:9px}
.cl-card{background:#f8f9fa;border-radius:9px;border:1px solid #eee;padding:11px 13px}
.cl-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.cl-body{font-size:13px;line-height:1.6;margin-bottom:6px}
.cl-sc{font-size:12px;font-style:italic;border-top:.5px solid #ddd;padding-top:5px;line-height:1.5}
.loy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:6px}
.loy-card{background:#e8f0fb;border-radius:8px;padding:9px 11px;border-left:3px solid #1f5c99}
.loy-lbl{display:inline-block;font-size:10px;font-weight:700;color:#1f5c99;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.loy-txt{font-size:13px;color:#1a1a1a;font-style:italic;line-height:1.5}

/* ── Misc ─────────────────────────────────────────────────── */
.empty{text-align:center;padding:24px;color:#aaa;font-size:14px}
.loader{text-align:center;padding:16px;color:#888;font-size:13px}

@keyframes pulse-dot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.6}}
.pulse-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff4444;animation:pulse-dot 1.2s ease-in-out infinite;flex-shrink:0}

/* ── Login screen ─────────────────────────────────────────── */
.login-wrap{position:fixed;top:0;left:0;width:100%;height:100%;background:#1f5c99;display:flex;align-items:center;justify-content:center;z-index:999}
.login-box{background:#fff;border-radius:16px;padding:32px 28px;width:310px;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.2)}
.login-logo{font-size:26px;font-weight:700;color:#1f5c99;margin-bottom:4px}
.login-sub{font-size:13px;color:#888;margin-bottom:20px}
.login-label{font-size:13px;color:#555;text-align:left;margin-bottom:6px;font-weight:500}
.login-input{width:100%;padding:10px 14px;border:1.5px solid #ddd;border-radius:8px;font-size:15px;outline:none;box-sizing:border-box;margin-bottom:8px;transition:border .15s}
.login-input:focus{border-color:#1f5c99}
.login-err{font-size:13px;color:#e24b4a;min-height:18px;margin-bottom:6px}
.login-btn{width:100%;padding:11px;background:#1f5c99;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;margin-bottom:10px;transition:background .15s}
.login-btn:hover{background:#1a5090}
.login-note{font-size:11px;color:#bbb}
.login-footer{font-size:10px;color:#d0d8e4;margin-top:10px}

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:480px){
  .igrid,.sgrid{grid-template-columns:repeat(2,1fr)}
  .main{padding:8px}
  .login-box{width:calc(100% - 32px)}
}