body{background:linear-gradient(180deg,#f8fbff 0%,#eef4ff 100%)}

/* ===== NAVHEAD: burger drawer with the page list (all screen sizes) ===== */
.head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.navhead-lead{display:flex;align-items:center;gap:12px;min-width:0}
.navhead-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;border:1px solid #e5e7eb;border-radius:14px;background:#fff;cursor:pointer;padding:0 12px;flex-shrink:0;box-shadow:0 8px 20px rgba(0,0,0,.05);transition:box-shadow .15s ease,transform .15s ease}
.navhead-burger:hover{box-shadow:0 10px 26px rgba(0,0,0,.10);transform:translateY(-1px)}
.navhead-burger span{display:block;height:2.5px;width:100%;border-radius:3px;background:#0f172a}
.navhead-page-title{font-size:20px;font-weight:1000;color:#0f172a;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.navhead-links{position:fixed;top:0;left:0;bottom:0;width:min(300px,86vw);background:#fff;border-right:1px solid #e5e7eb;box-shadow:0 0 60px rgba(0,0,0,.22);display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;padding:18px 12px;overflow-y:auto;z-index:99998;transform:translateX(-102%);transition:transform .22s ease}
.navhead-links.open{transform:translateX(0)}
.navhead-link{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;text-decoration:none;color:#334155;font-size:14px;font-weight:800;white-space:nowrap;transition:background .15s ease,color .15s ease}
.navhead-link:hover{background:#f1f5f9;color:#0f172a}
.navhead-link.active{background:linear-gradient(135deg,#1e3a8a,#2563eb);color:#fff}
.navhead-ico{font-size:17px;line-height:1}
.navhead-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:99997;opacity:0;pointer-events:none;transition:opacity .22s ease}
.navhead-backdrop.open{opacity:1;pointer-events:auto}
@media(max-width:640px){.navhead-page-title{font-size:17px}.navhead-lead{gap:9px}}

.ti-shell{padding:18px 0 130px}
.menu-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px}
.menu-card{background:#fff;border:1px solid #e5e7eb;border-radius:22px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.desktop-category-card{position:sticky;top:10px;align-self:start}
.category-list{display:flex;flex-direction:column;gap:10px}
.category-btn{width:100%;text-align:left;border:0;border-radius:16px;padding:14px 16px;background:#f3f4f6;cursor:pointer;font-weight:900;color:#0f172a}
.category-btn.active{background:#111827!important;color:#fff!important}

.mobile-category-bar{display:none;margin-bottom:12px}
.mobile-category-dropdown{position:relative}
.mobile-category-trigger{width:100%;border:0;border-radius:24px;padding:15px 16px;font:inherit;cursor:pointer;color:#fff;background:linear-gradient(135deg,#0f172a 0%,#2563eb 45%,#7c3aed 100%);box-shadow:0 16px 38px rgba(37,99,235,.30);display:flex;align-items:center;justify-content:space-between;gap:12px}
.mobile-category-copy{display:grid;text-align:left}
.mobile-category-label{font-size:11px;text-transform:uppercase;letter-spacing:.9px;opacity:.85;font-weight:900}
.mobile-category-current{font-size:16px;font-weight:1000}
.mobile-category-menu{display:none;position:absolute;z-index:20;left:0;right:0;top:calc(100% + 9px);background:#fff;border:1px solid #dbeafe;border-radius:22px;padding:10px;box-shadow:0 20px 44px rgba(15,23,42,.17);max-height:60vh;overflow:auto}
.mobile-category-menu.open{display:grid;gap:9px}
.mobile-category-option{border:0;border-radius:16px;padding:13px 14px;text-align:left;font-weight:1000;cursor:pointer;background:#f8fafc;color:#0f172a}
.mobile-category-option.active{background:#111827!important;color:#fff!important}

.search-wrap{margin-bottom:14px}
.search-input{width:100%;border:1px solid #d1d5db;border-radius:18px;padding:13px 14px;font-weight:850;background:#fff}
.item-list{display:grid;gap:13px}
.ti-card{border:1px solid #e5e7eb;border-radius:24px;background:linear-gradient(180deg,#fff,#fbfdff);overflow:hidden;box-shadow:0 10px 26px rgba(15,23,42,.05);transition:.15s ease}
.ti-card.selected{border-color:#2563eb;box-shadow:0 18px 38px rgba(37,99,235,.16);background:#eff6ff}
.ti-card-top{padding:13px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ti-card-title{display:flex;align-items:center;gap:12px;min-width:0}
.item-image,.item-image-fallback{width:56px;height:56px;border-radius:16px;object-fit:cover;background:linear-gradient(135deg,#facc15,#f97316);display:grid;place-items:center;color:#fff;font-weight:1000;flex-shrink:0}
.item-name{margin:0;font-size:16px;color:#0f172a;font-weight:800}
.ti-select-btn{border:0;border-radius:999px;background:#e5e7eb;color:#0f172a;padding:10px 16px;font-weight:1000;cursor:pointer;white-space:nowrap;flex-shrink:0}
.ti-select-btn.active{background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff}

.ti-preview{display:none;padding:0 13px 15px;align-items:center;gap:14px;border-top:1px dashed #e5e7eb;margin-top:2px;padding-top:13px}
.ti-thumb-wrap{width:96px;height:96px;border-radius:16px;border:1px solid #e5e7eb;background:#fff;display:grid;place-items:center;overflow:hidden;flex-shrink:0}
.ti-thumb{width:100%;height:100%;object-fit:cover;display:none}
.ti-spinner{width:26px;height:26px;border-radius:50%;border:3px solid #dbeafe;border-top-color:#2563eb;animation:ti-spin 0.8s linear infinite}
@keyframes ti-spin{to{transform:rotate(360deg)}}
.ti-download-btn{border:0;border-radius:999px;background:linear-gradient(135deg,#0f172a,#2563eb);color:#fff;padding:9px 15px;font-weight:1000;font-size:13px;text-decoration:none;display:none}

.ti-bottom-bar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid #e5e7eb;box-shadow:0 -10px 30px rgba(15,23,42,.08)}
.ti-bottom-inner{max-width:1180px;margin:0 auto;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ti-bottom-inner strong{color:#0f172a}
.ti-btn{border:0;border-radius:999px;min-height:44px;padding:0 20px;font-weight:1000;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;white-space:nowrap}
.ti-btn.ghost{background:#e5e7eb;color:#0f172a}
.ti-btn.primary{background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff}
.ti-btn.green{background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff}
.ti-btn.orange{background:linear-gradient(135deg,#f97316,#facc15);color:#111827}
.ti-btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.4)}
.ti-status-line{margin-top:4px;font-size:12.5px;font-weight:800;color:#64748b;max-width:420px}
.ti-status-line.success{color:#166534}
.ti-status-line.error{color:#991b1b}

.ti-wait-card{text-align:center;max-width:360px}
.ti-wait-spinner{width:52px;height:52px;border-radius:50%;border:5px solid #dbeafe;border-top-color:#2563eb;margin:4px auto 16px;animation:ti-spin 0.9s linear infinite}
.ti-wait-card h3{margin:0 0 8px}
.ti-wait-card p{margin:0;color:#64748b;font-weight:700}

.empty-box{border:1px dashed #cbd5e1;border-radius:22px;background:#f8fafc;color:#64748b;font-weight:900;text-align:center;padding:26px}

@media(max-width:960px){.menu-layout{grid-template-columns:1fr}.desktop-category-card{display:none}.mobile-category-bar{display:block}}
@media(max-width:640px){.ti-card-top{align-items:flex-start}.ti-select-btn{width:100%}}