:root{--bg:#0e1116;--surface:#171c24;--surface-2:#212936;--border:#2c3542;--text:#eaeff5;--text-dim:#9aa7b5;--accent:#2fb4ff;--accent-ink:#04283f;--danger:#ff6161;--radius:14px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);overscroll-behavior:none;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Noto Naskh Arabic,sans-serif}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none;padding:0}img{max-width:100%;display:block}.btn{border:1px solid var(--border);background:var(--surface-2);color:var(--text);-webkit-user-select:none;user-select:none;border-radius:999px;justify-content:center;align-items:center;gap:.5rem;padding:.7rem 1.3rem;font-size:.95rem;font-weight:600;display:inline-flex}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn:active{transform:scale(.97)}.app-loading,.app-error{text-align:center;height:100%;color:var(--text-dim);flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:2rem;display:flex}.catalog{min-height:100%;padding:calc(var(--safe-top) + .8rem) calc(var(--safe-right) + 1rem) calc(var(--safe-bottom) + 1.5rem) calc(var(--safe-left) + 1rem);flex-direction:column;max-width:720px;margin-inline:auto;display:flex}.catalog-header{justify-content:space-between;align-items:center;gap:1rem;padding-block:.4rem 1rem;display:flex}.brand{letter-spacing:.02em;margin:0;font-size:1.35rem;font-weight:800}.brand span{color:var(--accent)}.catalog-tagline{color:var(--text-dim);margin:0 0 1.2rem;font-size:.95rem}.lang-switcher{background:var(--surface);border:1px solid var(--border);border-radius:999px;gap:.25rem;padding:.2rem;display:flex}.lang-btn{color:var(--text-dim);border-radius:999px;padding:.35rem .7rem;font-size:.85rem;font-weight:600}.lang-btn.active{background:var(--surface-2);color:var(--text)}.catalog-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.9rem;display:grid}.glasses-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);text-align:start;flex-direction:column;gap:.6rem;padding:.9rem .9rem .8rem;transition:border-color .12s;display:flex}.glasses-card:hover{border-color:var(--accent)}.glasses-card-img{aspect-ratio:3;object-fit:contain;border-radius:calc(var(--radius) - 6px);background:linear-gradient(#f4f6f8,#dde3e9);width:100%;padding:.5rem}.glasses-card-name{font-size:.95rem;font-weight:600}.glasses-card-cta{color:var(--accent);font-size:.82rem;font-weight:600}.tryon{background:#000;position:fixed;inset:0;overflow:hidden}.tryon-canvas{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.tryon-video{opacity:.01;pointer-events:none;width:2px;height:2px;position:fixed}.tryon-topbar{top:0;padding:calc(var(--safe-top) + .7rem) calc(var(--safe-right) + .9rem) .5rem calc(var(--safe-left) + .9rem);z-index:5;background:linear-gradient(#0000008c,#0000);justify-content:space-between;align-items:center;display:flex;position:absolute;inset-inline:0}.icon-btn{color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#14181ea6;border:1px solid #ffffff26;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.15rem;display:flex}[dir=rtl] .icon-btn-back{transform:scaleX(-1)}.tryon-model-name{text-shadow:0 1px 6px #000000b3;font-size:.95rem;font-weight:700}.tryon-bottombar{bottom:0;padding-bottom:calc(var(--safe-bottom) + .8rem);z-index:5;background:linear-gradient(#0000,#0000008c);flex-direction:column;align-items:center;gap:.8rem;display:flex;position:absolute;inset-inline:0}.capture-btn{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffff40;border:4px solid #fff;border-radius:50%;width:68px;height:68px}.capture-btn:active{background:#fff}.picker{scroll-snap-type:x proximity;scrollbar-width:none;gap:.55rem;max-width:100%;padding:.3rem 1rem;display:flex;overflow-x:auto}.picker::-webkit-scrollbar{display:none}.picker-item{scroll-snap-align:center;background:#f4f6f8d9;border:2px solid #0000;border-radius:12px;flex:none;width:92px;padding:.35rem .45rem}.picker-item img{aspect-ratio:3;object-fit:contain;width:100%}.picker-item.active{border-color:var(--accent);background:#fff}.state-overlay{text-align:center;z-index:8;background:#080a0ee0;flex-direction:column;justify-content:center;align-items:center;gap:.9rem;padding:2rem;display:flex;position:absolute;inset:0}.state-title{margin:0;font-size:1.15rem;font-weight:700}.state-text{color:var(--text-dim);max-width:34ch;margin:0;line-height:1.5}.progress-track{background:var(--surface-2);border-radius:999px;width:min(240px,60vw);height:6px;overflow:hidden}.progress-fill{background:var(--accent);border-radius:999px;height:100%;transition:width .2s}.spinner{border:3px solid var(--surface-2);border-top-color:var(--accent);border-radius:50%;width:34px;height:34px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.noface-hint{top:calc(var(--safe-top) + 74px);z-index:4;pointer-events:none;justify-content:center;display:flex;position:absolute;inset-inline:0}.noface-hint span{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#14181ebf;border:1px solid #ffffff24;border-radius:999px;padding:.45rem 1rem;font-size:.9rem}.capture-modal{z-index:10;padding:calc(var(--safe-top) + 1rem) 1.2rem calc(var(--safe-bottom) + 1.2rem);background:#05070af0;flex-direction:column;justify-content:center;align-items:center;gap:1rem;display:flex;position:absolute;inset:0}.capture-img{border-radius:var(--radius);border:1px solid var(--border);max-width:100%;max-height:62vh}.capture-hint{color:var(--text-dim);text-align:center;margin:0;font-size:.85rem}.capture-actions{flex-wrap:wrap;justify-content:center;gap:.7rem;display:flex}.debug-overlay{top:calc(var(--safe-top) + 66px);z-index:9;border:1px solid var(--border);direction:ltr;background:#0a0d12d1;border-radius:10px;max-width:240px;padding:.6rem .7rem;font-family:ui-monospace,monospace;font-size:.72rem;position:absolute;inset-inline-start:.6rem}.debug-overlay label{margin-top:.35rem;display:block}.debug-overlay input[type=range]{width:100%}
