/* Qrilly pages: home, chat, type tiles, create + studio, dashboard, admin, footer. Built on m3.css. */
.hide-s{} @media (max-width:640px){.hide-s{display:none!important}}
.topnav{display:flex;align-items:center;gap:4px}
.langmenu{position:absolute;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(440px,calc(100vw - 16px));max-height:70vh}
.langmenu a{display:grid;gap:0;min-height:52px;align-content:center}.langmenu a b{font-weight:500}.langmenu a small{font-size:12px;color:var(--on-v)}
.narrow{max-width:820px}
.sec-head{max-width:760px;margin-bottom:32px;display:grid;gap:10px}
/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(28px,6vw,72px) clamp(40px,7vw,90px)}
.hero-shapes{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-shapes .shape{position:absolute;opacity:.95}
.hero-shapes .s1{--sz:min(34vw,380px);top:-6%;inset-inline-end:-6%;--dur:14s}
.hero-shapes .s2{--sz:min(16vw,170px);top:18%;inset-inline-start:-3%;--dur:11s}
.hero-shapes .s3{--sz:min(22vw,240px);bottom:-8%;inset-inline-start:12%;--dur:13s}
.hero-shapes .s4{--sz:min(12vw,130px);top:52%;inset-inline-end:6%;--dur:9s}
.hero-shapes .s5{--sz:min(9vw,96px);top:8%;inset-inline-start:42%;--dur:30s}
.hero-shapes .s6{--sz:min(8vw,84px);bottom:10%;inset-inline-end:28%;--dur:10s}
.hero-in{position:relative;z-index:1;display:grid;justify-items:center;text-align:center;gap:18px}
.eyebrow{pointer-events:none}
.hero-sub{max-width:640px;margin:0}
/* ---------- chat ---------- */
.chat{width:min(760px,100%);text-align:start;padding:0;border-radius:var(--r-xxl);overflow:hidden;margin-top:10px;background:rgba(255,255,255,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 2px 6px rgba(28,20,70,.06),0 24px 60px rgba(60,40,160,.14)}
.chat-head{display:flex;align-items:center;gap:12px;padding:16px 18px 6px}
.chat-head b{display:block;font-weight:540}.chat-head small{font-size:12.5px;color:var(--on-v)} .chat-head .grow{flex:1}
.chat-log{display:flex;flex-direction:column;gap:10px;max-height:min(52vh,460px);min-height:120px;overflow-y:auto;padding:10px 18px 6px;scroll-behavior:smooth}
.msg{max-width:86%;animation:rise var(--t-med) var(--emph)}
.msg p{margin:0;padding:12px 16px;border-radius:22px;font-size:15.5px;line-height:1.5;white-space:pre-wrap}
.msg.bot{align-self:flex-start}.msg.bot p{background:var(--s-c);border-end-start-radius:8px}
.msg.me{align-self:flex-end}.msg.me p{background:var(--primary);color:#fff;border-end-end-radius:8px}
.msg.err p{background:var(--bad-c);color:var(--bad)}
.dots{display:inline-flex;gap:4px;padding:16px 18px;border-radius:22px;background:var(--s-c)}.dots i{width:7px;height:7px;border-radius:50%;background:var(--on-v);animation:dot 1.1s infinite}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
.chat-chips{padding:8px 18px 4px}
.chat-in{display:flex;align-items:center;gap:6px;margin:8px 10px 10px;padding:6px;border-radius:var(--r-full);background:var(--s-lowest);box-shadow:inset 0 0 0 1px var(--outline-v)}
.chat-in input{flex:1;min-width:0;height:44px;border:0;background:none;outline:0;font-size:16px;padding:0 6px}
.chat-in .icon-btn.on{background:var(--c-coral);color:#fff;animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(242,85,44,.45)}50%{box-shadow:0 0 0 10px rgba(242,85,44,0)}}
.qr-out{max-width:100%;display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:16px;align-items:center;padding:14px;border-radius:var(--r-xl);background:var(--s-lowest);box-shadow:inset 0 0 0 1px var(--outline-v)}
@media (max-width:520px){.qr-out{grid-template-columns:1fr;justify-items:center;text-align:center}}
.qr-box{width:100%;max-width:220px}.qr-box svg{display:block;width:100%;height:auto}
.qr-side{display:grid;gap:8px;justify-items:start}.qr-side p{margin:0}
@media (max-width:520px){.qr-side{justify-items:center}}
.qr-acts{display:flex;flex-wrap:wrap;gap:6px}
.qr-ph{position:relative;display:grid;place-items:center;width:160px;height:160px}.qr-ph .shape{position:absolute;inset:0;--sz:160px}.qr-ph .ms{position:relative;font-size:56px;color:var(--on-pc)}
/* ---------- type tiles ---------- */
.tile-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:40px}
@media (max-width:1100px){.tile-row{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:560px){.tile-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--r-xl);background:var(--s-low);color:inherit;text-decoration:none;transition:border-radius var(--t-med) var(--spring),transform var(--t-med) var(--spring),background var(--t-fast)}
.tile:hover{border-radius:var(--r-l);transform:translateY(-2px)}
.tile:active{transform:scale(.98)}
.tile-t{display:grid;gap:2px;min-width:0}.tile-t b{font-weight:520;font-size:15.5px}.tile-t small{font-size:13px;color:var(--on-v);line-height:1.4}
.tile .tag{position:absolute;top:10px;inset-inline-end:10px}
.essentials .tile{flex-direction:column;align-items:flex-start;padding:20px;min-height:180px;background:var(--s-lowest);box-shadow:inset 0 0 0 1px var(--outline-v)}
.essentials .tile .shape-ic{--sz:64px!important}
.groups{display:grid;gap:36px}
.group h3{display:flex;align-items:center;gap:10px;margin-bottom:14px}.group h3 .ms{color:var(--primary)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:10px}
/* ---------- promise, teaser, langs, how, faq, end ---------- */
.promise .grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.big-card{display:grid;gap:14px;align-content:start;padding:clamp(24px,4vw,40px);border-radius:var(--r-xxl)}
.ticks{margin:0;padding:0;list-style:none;display:grid;gap:8px}.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px}.ticks li::before{content:"check_circle";font-family:"Material Symbols Rounded";font-size:20px;line-height:1.2;color:currentColor;opacity:.75}
.promise-line{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;margin:8px 0 0;text-align:center}.promise-line .ms{color:var(--primary)}
.teaser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,64px);align-items:center}
@media (max-width:820px){.teaser{grid-template-columns:1fr}}
.teaser-qr{position:relative;aspect-ratio:1;max-width:440px;width:100%;margin:0 auto;border-radius:var(--r-xxl);background:var(--s-low);display:grid;place-items:center;padding:8%}
.teaser-qr svg{width:100%;height:auto;display:block;transition:opacity .4s}
.teaser-txt{display:grid;gap:16px;justify-items:start}
.lang-cloud{display:flex;flex-wrap:wrap;gap:10px}.lang-cloud a,.langmenu b,.foot-langs a{font-family:var(--font),"Noto Sans Devanagari","Noto Sans Bengali","Noto Sans Tamil","Noto Sans Telugu","Noto Sans Gujarati","Noto Sans Gurmukhi","Noto Sans Kannada","Noto Sans Malayalam","Noto Sans Oriya","Noto Nastaliq Urdu","Noto Naskh Arabic","Noto Sans Ol Chiki","Noto Sans Meetei Mayek",sans-serif}.lang-cloud .chip{height:44px;padding:0 18px;font-size:16px;border-radius:var(--r-full)}
.steps3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px}
.steps3 li{display:grid;gap:10px;align-content:start;position:relative;border-radius:var(--r-xxl)}
.step-n{position:absolute;top:22px;inset-inline-end:26px;font-size:56px;font-weight:200;line-height:1;color:var(--outline)}
.qa{border-radius:var(--r-l);background:var(--s-low);margin-top:10px;transition:background var(--t-fast)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;cursor:pointer;list-style:none;font-size:16.5px;font-weight:480}
.qa summary::-webkit-details-marker{display:none}
.qa summary .ms{transition:transform var(--t-med) var(--spring)} .qa[open] summary .ms{transform:rotate(180deg)} .qa[open]{background:var(--sc)}
.qa p{margin:0;padding:0 22px 20px}
.end-card{position:relative;overflow:hidden;display:grid;gap:14px;justify-items:start;padding:clamp(28px,6vw,64px);border-radius:var(--r-xxl)}
.end-shape{position:absolute;--sz:min(40vw,360px);inset-inline-end:-6%;top:-20%;--dur:40s}
.end-card>*:not(.end-shape){position:relative}
/* ---------- footer ---------- */
.foot{margin-top:40px;padding-block:48px 28px;background:var(--s-low);border-radius:var(--r-xxl) var(--r-xxl) 0 0}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:32px}
@media (max-width:820px){.foot-top{grid-template-columns:1fr}}
.foot-brand{display:grid;gap:10px;align-content:start}.foot-brand p{max-width:42ch;margin:0}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px}
.foot-cols ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}.foot-cols a{color:var(--on);text-decoration:none;font-size:14px}.foot-cols a:hover{color:var(--primary)}
.foot-langs{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:32px;padding-top:20px;border-top:1px solid var(--outline-v)}.foot-langs a{color:var(--on-v);text-decoration:none;font-size:14px}
.foot-end{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:20px}.foot-end a{color:var(--on-v)}
/* ---------- create + studio ---------- */
.create{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:clamp(16px,3vw,36px);align-items:start;padding-block:20px 80px}
@media (max-width:900px){.create{grid-template-columns:1fr}}
.create-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}.create-head .grow{flex:1}
.panel{display:grid;gap:18px;padding:clamp(16px,3vw,28px);border-radius:var(--r-xxl);background:var(--s-low)}
.panel h2{margin:0}
.pv-wrap{position:sticky;top:84px;display:grid;gap:14px}
@media (max-width:900px){.pv-wrap{position:static;order:-1}}
.pv{position:relative;display:grid;place-items:center;padding:clamp(18px,4vw,36px);border-radius:var(--r-xxl);background:repeating-conic-gradient(#F1EEF8 0 25%,#FAF9FD 0 50%) 0 0/22px 22px;min-height:280px}
.pv svg{width:100%;max-width:420px;height:auto;display:block;filter:drop-shadow(0 10px 30px rgba(40,20,120,.16))}
.pv .pv-empty{display:grid;justify-items:center;gap:10px;color:var(--on-v);text-align:center}
.score{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-l);background:var(--s-lowest);box-shadow:inset 0 0 0 1px var(--outline-v)}
.score .ring{--v:0;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:14px;background:conic-gradient(var(--sc-col,var(--ok)) calc(var(--v) * 1%),var(--s-high) 0);flex:none;position:relative}
.score .ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--s-lowest)}.score .ring b{position:relative}
.score .txt{flex:1;display:grid}.score .txt small{color:var(--on-v);font-size:13px}
.score.warn{--sc-col:var(--c-sun)}.score.bad{--sc-col:var(--bad)}
.exports{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.exports .btn{width:100%}
@media (max-width:420px){.exports{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sect{display:grid;gap:12px}.sect>.label{margin:0}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.opt{display:grid;place-items:center;gap:4px;aspect-ratio:1;border:0;border-radius:var(--r-l);background:var(--s-lowest);cursor:pointer;padding:8px;font-size:11.5px;color:var(--on-v);box-shadow:inset 0 0 0 1px var(--outline-v);transition:border-radius var(--t-med) var(--spring),box-shadow var(--t-fast),transform var(--t-med) var(--spring)}
.opt svg{width:34px;height:34px}.opt:hover{transform:scale(1.04)}
.opt[aria-pressed=true]{border-radius:var(--r-m);box-shadow:inset 0 0 0 2px var(--primary);background:var(--pc);color:var(--on-pc)}
.presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.preset{display:grid;gap:6px;justify-items:center;padding:10px 6px;border:0;border-radius:var(--r-l);background:var(--s-lowest);cursor:pointer;font-size:12.5px;color:var(--on);box-shadow:inset 0 0 0 1px var(--outline-v);transition:transform var(--t-med) var(--spring)}
.preset svg{width:64px;height:auto}.preset:hover{transform:translateY(-2px)}
.list-ed{display:grid;gap:8px}
.list-row{display:grid;gap:8px;padding:12px;border-radius:var(--r-l);background:var(--s-lowest);box-shadow:inset 0 0 0 1px var(--outline-v);position:relative}
.list-row .fields{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.list-row .rm{position:absolute;top:6px;inset-inline-end:6px}
.list-row.drag{opacity:.5}
.fileup{display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--r-l);border:1.5px dashed var(--outline);background:var(--s-lowest);cursor:pointer;min-height:64px}
.fileup img{width:48px;height:48px;border-radius:var(--r-s);object-fit:cover}.fileup .ph{width:48px;height:48px;border-radius:var(--r-s);display:grid;place-items:center;background:var(--s-high);flex:none}
.fileup .txt{display:grid;flex:1;min-width:0}.fileup small{color:var(--on-v);font-size:12.5px}
.fileup.drop{border-color:var(--primary);background:var(--pc)}
.mode-card{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mode-card button{display:grid;gap:4px;text-align:start;padding:14px 16px;border:0;border-radius:var(--r-l);background:var(--s-lowest);cursor:pointer;box-shadow:inset 0 0 0 1px var(--outline-v);transition:all var(--t-med) var(--spring)}
.mode-card button b{display:flex;align-items:center;gap:6px;font-weight:540}.mode-card button small{color:var(--on-v);font-size:12.5px;line-height:1.4}
.mode-card button[aria-pressed=true]{background:var(--sc);box-shadow:inset 0 0 0 2px var(--primary);border-radius:var(--r-m)}
.mode-card button:disabled{opacity:.45;cursor:not-allowed}
.slugbox{display:flex;align-items:center;gap:0;border:1px solid var(--outline);border-radius:var(--r-m);background:var(--s-lowest);overflow:hidden}
.slugbox span{padding:0 4px 0 14px;color:var(--on-v);font-size:15px;white-space:nowrap}.slugbox input{flex:1;min-width:0;height:52px;border:0;outline:0;background:none;font-size:16px}
.savebar{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px max(16px,env(safe-area-inset-left,0px)) calc(12px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);box-shadow:0 -1px 0 var(--outline-v)}
.savebar .grow{flex:1}
/* ---------- dashboard ---------- */
.dash{padding-block:24px 110px}
.dash-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;justify-content:space-between;margin-bottom:22px}
.kpis{display:flex;gap:10px;flex-wrap:wrap}.kpi{padding:12px 18px;border-radius:var(--r-l);background:var(--s-low)}.kpi b{display:block;font-size:26px;font-weight:300;font-variant-numeric:tabular-nums}.kpi small{color:var(--on-v);font-size:12.5px}
.codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.code{display:grid;grid-template-columns:88px 1fr;gap:14px;padding:14px;border-radius:var(--r-xl);background:var(--s-lowest);box-shadow:inset 0 0 0 1px var(--outline-v);color:inherit;text-decoration:none;position:relative;transition:transform var(--t-med) var(--spring),border-radius var(--t-med) var(--spring)}
.code:hover{transform:translateY(-2px);border-radius:var(--r-l)}
.code .mini{width:88px;height:88px;border-radius:var(--r-m);background:#fff;display:grid;place-items:center;padding:6px;box-shadow:inset 0 0 0 1px var(--outline-v)}.code .mini svg{width:100%;height:100%}
.code .ct{display:grid;gap:4px;align-content:start;min-width:0}.code .ct b{font-weight:520;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.code .ct small{color:var(--on-v);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.code .row{gap:6px}
.code.paused{opacity:.66}
.chart{width:100%;height:auto;display:block}.chart text{fill:var(--on-v);font-size:11px;font-family:var(--font)}
.bars{display:grid;gap:8px}.bar{display:grid;grid-template-columns:minmax(80px,140px) 1fr auto;gap:10px;align-items:center;font-size:14px}.bar i{height:10px;border-radius:5px;background:var(--pc);position:relative;overflow:hidden}.bar i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--primary);border-radius:5px}
.resp{display:grid;gap:8px}.resp .li{align-items:flex-start}
/* ---------- login, static, error ---------- */
.auth{min-height:calc(100vh - 140px);display:grid;place-items:center;padding-block:40px}
.auth-card{width:min(460px,100%);display:grid;gap:18px;padding:clamp(24px,5vw,40px);border-radius:var(--r-xxl);background:var(--s-low);text-align:center;justify-items:center}
.auth-card .btn{width:100%}
.prose{max-width:72ch;padding-block:40px 60px}.prose h1{margin-bottom:16px}.prose h2{margin:28px 0 8px;font-size:20px;font-weight:480}.prose p,.prose li{color:var(--on-v);line-height:1.7}
.err-page{min-height:60vh;display:grid;place-items:center;text-align:center;gap:16px;padding:40px 16px}
/* ---------- admin ---------- */
.adm table{width:100%;border-collapse:collapse;font-size:14px}.adm th,.adm td{text-align:start;padding:10px 8px;border-bottom:1px solid var(--outline-v);vertical-align:top}.adm th{font-weight:560;color:var(--on-v);font-size:12.5px}
.adm .tbl{overflow-x:auto;border-radius:var(--r-l);background:var(--s-lowest);box-shadow:inset 0 0 0 1px var(--outline-v)}