/* Lovoline — inner pages (pricing, custom development, quote, templates, contact, sign in, register).
   Loaded after site.css and reuses its tokens. */
[hidden]{display:none!important}

/* Page hero */
.phero{position:relative;padding:72px 0 40px;overflow:hidden;text-align:center}
.phero .glow{inset:-10% -10% 0 -10%;height:auto;opacity:.85;-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}
.phero .wrap{position:relative;z-index:1}
.phero h1{font-size:clamp(2.4rem,5.4vw,4.4rem);max-width:17ch;margin:0 auto 18px}
.phero h1 .serif{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.phero .sub{margin-bottom:28px}
.phero.left{text-align:left}.phero.left h1,.phero.left .sub{margin-left:0}
.crumbs{display:inline-flex;gap:8px;font-size:.84rem;color:var(--muted);margin-bottom:18px}
.crumbs a:hover{color:var(--ink)}
.hero-ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn-lg{height:50px;padding:0 24px;font-size:.98rem}
.btn-outline{border:1px solid var(--line-2);background:#fff}
.btn-outline:hover{border-color:var(--ink)}
.trust-row{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-top:28px;font-size:.88rem;color:var(--muted)}
.trust-row span{display:inline-flex;align-items:center;gap:8px}
.trust-row b{color:var(--ink)}
.ok-ic{width:18px;height:18px;border-radius:50%;background:#16a34a;position:relative;flex:0 0 18px}
.ok-ic::after{content:"";position:absolute;left:6.5px;top:3.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Billing switch */
.bill{display:inline-flex;align-items:center;gap:4px;padding:4px;background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:var(--sh)}
.bill button{height:40px;padding:0 18px;border-radius:999px;font-weight:600;font-size:.9rem;color:var(--muted);display:inline-flex;align-items:center;gap:8px;transition:.15s}
.bill button.on{background:var(--ink);color:#fff}
.save-tag{font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:999px;background:linear-gradient(135deg,#ffe2d2,#cdf0e2);color:#c2410c}
.bill button.on .save-tag{background:rgba(255,255,255,.18);color:#fff}

/* Plans */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px;text-align:left}
.plan{position:relative;background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px 24px;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.plan:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.plan.is-pop{border:0;box-shadow:var(--sh-lg)}
.plan.is-pop::before{content:"";position:absolute;inset:0;border-radius:24px;padding:1.5px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.pop-tag{position:absolute;top:-12px;left:24px;font-size:.74rem;font-weight:700;padding:5px 12px;border-radius:999px;background:var(--grad);color:#fff;letter-spacing:.02em}
.plan h3{font-size:1.2rem;margin:0 0 4px}
.plan .tag-line{color:var(--muted);font-size:.9rem;min-height:2.8em;margin:0}
.price{display:flex;align-items:baseline;gap:6px;margin:20px 0 4px}
.price b{font-size:2.8rem;letter-spacing:-.045em;line-height:1;font-weight:600}
.price span{color:var(--muted);font-size:.9rem}
.price-note{font-size:.8rem;color:var(--muted);min-height:1.3em;margin:0 0 20px}
.plan .btn{width:100%;height:46px;margin-bottom:22px}
.feat{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:.92rem}
.feat li{position:relative;padding-left:28px;color:var(--ink-2)}
.feat li::before{content:"";position:absolute;left:0;top:.2em;width:18px;height:18px;border-radius:50%;background:rgba(22,163,74,.12)}
.feat li::after{content:"";position:absolute;left:6.5px;top:calc(.2em + 3.5px);width:4px;height:8px;border:solid #16a34a;border-width:0 2px 2px 0;transform:rotate(45deg)}
.feat-h{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:12px}
@media (max-width:1100px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.plans{grid-template-columns:1fr}}

/* Tokens */
.tok{display:grid;grid-template-columns:1fr 1.15fr;gap:24px;align-items:start}
.tok-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px}
.tok-card h3{font-size:1.25rem}
.costs{list-style:none;padding:0;margin:18px 0 0}
.costs li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid var(--line);font-size:.94rem}
.costs li b{white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.coin{width:16px;height:16px;border-radius:50%;background:var(--grad);display:inline-block;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
.calc{margin-top:22px;background:var(--soft);border-radius:16px;padding:18px}
.calc label{display:flex;justify-content:space-between;font-size:.88rem;font-weight:600;margin-bottom:10px}
.calc input[type=range]{width:100%;accent-color:#0b8578}
.calc-out{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;font-size:.9rem;color:var(--muted)}
.calc-out b{font-size:1.1rem;color:var(--ink)}
.packs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.pack{position:relative;border:1px solid var(--line-2);border-radius:18px;padding:20px;background:#fff;text-align:left;transition:.2s;cursor:pointer}
.pack:hover{border-color:var(--ink);transform:translateY(-2px)}
.pack.sel{border-color:transparent;box-shadow:0 0 0 2px #0b8578,var(--sh)}
.pack .n{font-size:1.6rem;font-weight:600;letter-spacing:-.04em;display:flex;align-items:center;gap:8px}
.pack small{color:var(--muted);font-size:.84rem}
.pack .p{display:block;font-weight:600;margin-top:10px}
.pack .per{font-size:.78rem;color:var(--muted);font-weight:400}
.pack-tag{position:absolute;top:14px;right:14px;font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--soft)}
.buy-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
@media (max-width:900px){.tok{grid-template-columns:1fr}}
@media (max-width:480px){.packs{grid-template-columns:1fr}}

/* Comparison table */
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:24px;background:#fff}
.cmp{width:100%;border-collapse:collapse;min-width:720px;font-size:.92rem}
.cmp th,.cmp td{padding:15px 18px;text-align:center;border-bottom:1px solid var(--line)}
.cmp th:first-child,.cmp td:first-child{text-align:left;color:var(--ink-2)}
.cmp thead th{position:sticky;top:0;background:#fff;font-size:.95rem;padding-top:22px;padding-bottom:18px;z-index:1}
.cmp thead th small{display:block;font-weight:400;color:var(--muted);font-size:.82rem;margin-top:2px}
.cmp tbody tr:hover td{background:#fbfaf7}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp .pop-col{background:rgba(11,133,120,.04)}
.yes,.no{display:inline-block;width:20px;height:20px;border-radius:50%;position:relative;vertical-align:middle}
.yes{background:rgba(22,163,74,.12)}
.yes::after{content:"";position:absolute;left:7px;top:4px;width:4px;height:8px;border:solid #16a34a;border-width:0 2px 2px 0;transform:rotate(45deg)}
.no::after{content:"";position:absolute;left:5px;right:5px;top:9px;height:2px;background:#c8c8cf;border-radius:2px}

/* Cards and grids used across pages */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:980px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid-3,.grid-2{grid-template-columns:1fr}}
.svc{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;transition:transform .25s,box-shadow .25s}
.svc:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.svc .ic{width:46px;height:46px;border-radius:14px;background:var(--soft);display:grid;place-items:center;font-size:1.3rem;margin-bottom:18px}
.svc p{color:var(--muted);font-size:.93rem;margin:0 0 14px}
.svc ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.svc ul li{font-size:.76rem;padding:4px 10px;border-radius:999px;background:var(--soft);color:var(--ink-2)}

/* Dev packages */
.pkgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pkg{position:relative;background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.pkg:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.pkg.is-pop{border:0;box-shadow:var(--sh-lg)}
.pkg.is-pop::before{content:"";position:absolute;inset:0;border-radius:24px;padding:1.5px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.pkg-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.pkg .ic{width:46px;height:46px;border-radius:14px;background:var(--soft);display:grid;place-items:center;font-size:1.3rem}
.deliv{font-size:.76rem;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--soft);white-space:nowrap}
.pkg h3{margin:0 0 4px}
.pkg .d{color:var(--muted);font-size:.92rem;margin:0 0 16px;min-height:2.8em}
.pkg .from{font-size:.82rem;color:var(--muted)}
.pkg .amt{font-size:2.2rem;font-weight:600;letter-spacing:-.04em;line-height:1.1;margin-bottom:18px}
.pkg .feat{flex:1;margin-bottom:22px}
.pkg .btn{width:100%;height:46px}
.care{grid-column:span 1;background:var(--ink);color:#fff;border-radius:24px;padding:26px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.care::before{content:"";position:absolute;width:300px;height:300px;right:-120px;top:-140px;background:radial-gradient(circle,rgba(92,184,58,.5),transparent 65%)}
.care>*{position:relative}
.care .d,.care .from{color:rgba(255,255,255,.65)}
.care .feat li{color:rgba(255,255,255,.88)}
.care .feat li::before{background:rgba(255,255,255,.14)}
.care .feat li::after{border-color:#fff}
@media (max-width:1000px){.pkgs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pkgs{grid-template-columns:1fr}}

/* Process */
.process{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:p}
.proc{position:relative;padding:24px 20px;background:#fff;border:1px solid var(--line);border-radius:20px}
.proc::before{counter-increment:p;content:"0" counter(p);font-size:.82rem;font-weight:700;color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text;display:block;margin-bottom:14px}
.proc h3{font-size:1.02rem;margin-bottom:6px}
.proc p{font-size:.88rem;color:var(--muted);margin:0}
.proc small{display:block;margin-top:12px;font-size:.76rem;font-weight:600;color:var(--ink-2)}
@media (max-width:1000px){.process{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.process{grid-template-columns:1fr}}

/* Stack chips */
.stack{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:860px;margin:0 auto}
.stack span{height:40px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid var(--line);display:inline-flex;align-items:center;font-size:.9rem;font-weight:500}

/* Split feature rows */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:28px}}
.promise{display:grid;gap:14px}
.promise div{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px}
.promise b{display:block;margin-bottom:2px}
.promise p{margin:0;color:var(--muted);font-size:.92rem}
.promise .ok-ic{margin-top:3px}

/* Forms */
.fld{display:grid;gap:6px}
.fld label,.fld .lbl{font-size:.85rem;font-weight:600;color:var(--ink-2)}
.fld .opt-t{font-weight:400;color:var(--muted)}
.inp{width:100%;height:48px;padding:0 14px;border-radius:14px;border:1px solid var(--line-2);background:#fff;outline:none;font-size:.95rem;transition:border-color .15s,box-shadow .15s}
textarea.inp{height:auto;min-height:120px;padding:12px 14px;resize:vertical;line-height:1.5}
select.inp{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a6a75' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/16px no-repeat;padding-right:40px}
.inp:focus{border-color:rgba(11,133,120,.6);box-shadow:0 0 0 4px rgba(11,133,120,.12)}
.fld .err{display:none;font-size:.8rem;color:#d92d20}
.fld.bad .inp{border-color:#d92d20}
.fld.bad .err{display:block}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.frow{grid-template-columns:1fr}}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--ink-2);cursor:pointer}
.chk input{width:18px;height:18px;margin:2px 0 0;accent-color:#0d0d12;flex:0 0 18px}
.form-card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:30px;box-shadow:var(--sh)}
.form-stack{display:grid;gap:16px}
.done{text-align:center;padding:24px 6px}
.done-ic{width:60px;height:60px;border-radius:50%;background:#16a34a;color:#fff;display:grid;place-items:center;font-size:1.7rem;margin:0 auto 16px;animation:popIn .35s ease}
@keyframes popIn{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.ref{display:inline-block;font-family:ui-monospace,Menlo,monospace;font-weight:600;background:var(--soft);padding:4px 10px;border-radius:8px}
.note{font-size:.8rem;color:var(--muted);margin:0}

/* Quote wizard */
.q-grid{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
.q-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}
.q-head b{font-size:1.25rem;letter-spacing:-.03em}
.q-prog{display:flex;gap:6px;margin-bottom:26px}
.q-prog i{flex:1;height:4px;border-radius:4px;background:var(--soft);transition:background .3s}
.q-prog i.on{background:var(--grad)}
.q-step{display:none}.q-step.on{display:block;animation:fadeUp .35s ease}
.opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.opt{position:relative;display:flex;flex-direction:column;gap:6px;text-align:left;padding:16px;border:1px solid var(--line-2);border-radius:16px;background:#fff;cursor:pointer;transition:.15s}
.opt:hover{border-color:var(--ink)}
.opt.sel{border-color:transparent;box-shadow:0 0 0 2px #0b8578;background:rgba(11,133,120,.04)}
.opt .e{font-size:1.4rem}
.opt b{font-size:.95rem}
.opt small{color:var(--muted);font-size:.8rem}
.opt.chkopt{flex-direction:row;align-items:center;gap:12px;padding:14px 16px}
.opt.chkopt .box{flex:0 0 20px;height:20px;border-radius:6px;border:1.5px solid var(--line-2);position:relative;transition:.15s}
.opt.chkopt.sel .box{background:#0b8578;border-color:#0b8578}
.opt.chkopt.sel .box::after{content:"";position:absolute;left:6px;top:2px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.opt.chkopt span{flex:1}
.opt.chkopt em{font-style:normal;font-size:.8rem;color:var(--muted)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill-opt{height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);font-size:.88rem;font-weight:500;background:#fff;transition:.15s}
.pill-opt:hover{border-color:var(--ink)}
.pill-opt.sel{background:var(--ink);border-color:var(--ink);color:#fff}
.q-nav{display:flex;justify-content:space-between;gap:10px;margin-top:28px}
.q-nav .btn{height:48px;padding:0 22px}
.summary{position:sticky;top:90px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:var(--sh)}
.summary h3{font-size:1.05rem;margin-bottom:14px}
.sum-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:.88rem}
.sum-row span{color:var(--muted)}
.sum-row b{text-align:right;font-weight:600}
.est{margin-top:16px;padding:18px;border-radius:18px;background:linear-gradient(135deg,rgba(140,207,63,.1),rgba(22,180,126,.08) 50%,rgba(11,133,120,.1))}
.est small{display:block;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.est b{display:block;font-size:1.7rem;letter-spacing:-.04em;margin:4px 0}
.est p{font-size:.8rem;color:var(--muted);margin:0}
.files-up{border:1.5px dashed var(--line-2);border-radius:16px;padding:18px;text-align:center;font-size:.88rem;color:var(--muted);cursor:pointer;transition:.15s;display:block}
.files-up:hover,.files-up.drag{border-color:#0b8578;background:rgba(11,133,120,.04)}
.files-up b{color:var(--ink)}
.file-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
@media (max-width:980px){.q-grid{grid-template-columns:1fr}.summary{position:static}}
@media (max-width:640px){.opts{grid-template-columns:repeat(2,minmax(0,1fr))}.form-card{padding:22px}}

/* Contact */
.c-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:start}
.c-cards{display:grid;gap:12px}
.c-card{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;transition:.2s}
a.c-card:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--sh)}
.c-card .ic{flex:0 0 44px;height:44px;border-radius:14px;background:var(--soft);display:grid;place-items:center;font-size:1.2rem}
.c-card b{display:block}
.c-card p{margin:2px 0 0;color:var(--muted);font-size:.9rem}
.c-card .meta-t{font-size:.78rem;color:#16a34a;font-weight:600;margin-top:6px;display:block}
.topics{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:900px){.c-grid{grid-template-columns:1fr}}

/* Auth */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth-l{display:flex;flex-direction:column;padding:28px 40px}
.auth-l .logo{margin-bottom:auto}
.auth-box{width:100%;max-width:400px;margin:40px auto}
.auth-box h1{font-size:2rem;margin-bottom:6px}
.auth-box .lead{font-size:.98rem;margin-bottom:26px}
.auth-foot{font-size:.82rem;color:var(--muted);margin-top:auto;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pw{position:relative}
.pw .inp{padding-right:64px}
.pw button{position:absolute;right:8px;top:50%;transform:translateY(-50%);height:32px;padding:0 10px;border-radius:9px;font-size:.8rem;font-weight:600;color:var(--muted)}
.pw button:hover{background:var(--soft);color:var(--ink)}
.strength{display:flex;gap:4px;margin-top:6px}
.strength i{flex:1;height:4px;border-radius:4px;background:var(--soft);transition:background .25s}
.strength[data-s="1"] i:nth-child(-n+1){background:#ef4444}
.strength[data-s="2"] i:nth-child(-n+2){background:#f59e0b}
.strength[data-s="3"] i:nth-child(-n+3){background:#84cc16}
.strength[data-s="4"] i:nth-child(-n+4){background:#16a34a}
.s-lbl{font-size:.76rem;color:var(--muted);margin-top:4px;min-height:1.1em}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.88rem}
.row-between a{font-weight:600}
.btn-full{width:100%;height:50px;font-size:.98rem}
.alt{text-align:center;font-size:.9rem;color:var(--muted);margin-top:22px}
.alt a{color:var(--ink);font-weight:600}
.tpl-chip{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--soft);margin-bottom:22px;font-size:.88rem}
.tpl-chip .sw{width:34px;height:34px;border-radius:10px;flex:0 0 34px}
.tpl-chip b{display:block;font-size:.92rem}
.tpl-chip a{margin-left:auto;font-size:.8rem;color:var(--muted);text-decoration:underline}
.auth-r{position:relative;overflow:hidden;background:#121715;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:56px}
.auth-r::before{content:"";position:absolute;inset:-20%;background:radial-gradient(40% 40% at 30% 20%,rgba(140,207,63,.55),transparent 70%),radial-gradient(40% 40% at 80% 30%,rgba(22,180,126,.45),transparent 70%),radial-gradient(50% 50% at 50% 90%,rgba(11,133,120,.5),transparent 70%);filter:blur(20px);animation:drift 16s ease-in-out infinite alternate}
.auth-r>*{position:relative}
.auth-r h2{font-size:clamp(1.8rem,3vw,2.6rem);max-width:16ch}
.auth-r p{color:rgba(255,255,255,.72);max-width:44ch}
.mock{margin-top:34px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:16px;backdrop-filter:blur(10px);max-width:460px}
.mock-msg{background:rgba(255,255,255,.12);border-radius:14px 14px 4px 14px;padding:10px 14px;font-size:.88rem;margin-left:auto;max-width:80%;width:fit-content}
.mock-ai{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:.88rem;color:rgba(255,255,255,.85)}
.mock-ai .av{flex:0 0 24px;height:24px;border-radius:8px;background:var(--grad)}
.mock-site{margin-top:14px;background:#fff;border-radius:14px;overflow:hidden;color:var(--ink)}
.mock-site .bar{display:flex;gap:5px;padding:8px 10px;background:#f4f3ef}.mock-site .bar i{width:7px;height:7px;border-radius:50%;background:#dcdad3}
.mock-site .body{padding:16px;display:grid;grid-template-columns:1.2fr .8fr;gap:12px;align-items:center}
.mock-site h4{font-family:Georgia,serif;font-size:1.2rem;margin:0 0 6px;line-height:1.1}
.mock-site .l{height:7px;border-radius:4px;background:#ece9e2;margin-bottom:6px}
.mock-site .cta{display:inline-block;margin-top:6px;font-size:.7rem;font-weight:600;background:#c2410c;color:#fff;padding:5px 10px;border-radius:999px}
.mock-site .img{aspect-ratio:1;border-radius:50% 50% 12px 12px;background:radial-gradient(circle at 50% 55%,#fff 0 30%,#e7d8bf 31%)}
@media (max-width:960px){.auth{grid-template-columns:1fr}.auth-r{display:none}.auth-l{padding:22px}}

/* Templates page */
.tpl-tools{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.search{position:relative;flex:0 1 320px}
.search input{width:100%;height:44px;border-radius:999px;border:1px solid var(--line-2);background:#fff;padding:0 16px 0 42px;outline:none;font-size:.92rem}
.search input:focus{border-color:rgba(11,133,120,.6);box-shadow:0 0 0 4px rgba(11,133,120,.12)}
.search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--muted)}
.count{font-size:.88rem;color:var(--muted)}
.empty-state{text-align:center;padding:56px 20px;border:1.5px dashed var(--line-2);border-radius:24px;color:var(--muted)}
.empty-state b{color:var(--ink);display:block;font-size:1.1rem;margin-bottom:4px}