*{box-sizing:border-box;margin:0;padding:0}
:root{--purple:#8b3dff;--purple2:#5b2ee5;--pink:#ec4899;--ink:#0d1216;--muted:#5f6368;--line:#e3e5e8;--bg:#f2f3f5;--grad:linear-gradient(120deg,#8b3dff,#5b2ee5 55%,#00c4cc)}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink)}
button{cursor:pointer;font-family:inherit}
.muted{color:var(--muted)}.small{font-size:12px}.tiny{font-size:11px}
.btn{border:none;border-radius:9px;padding:9px 16px;font-weight:600;font-size:14px;transition:.15s}
.btn-primary{background:var(--purple);color:#fff}.btn-primary:hover{background:var(--purple2)}
.btn-upgrade{background:linear-gradient(120deg,#f5a623,#ec4899);color:#fff}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn-white{background:#fff;color:var(--purple2);font-weight:700}
.btn-download{background:#0d1216;color:#fff}
.btn-block{width:100%;margin-top:12px}.btn.big{padding:13px;font-size:15px}
.brand-mark{width:38px;height:38px;border-radius:10px;background:transparent;display:flex;align-items:center;justify-content:center;font-family:Poppins;font-weight:800;font-size:21px;color:#fff;flex:none}
.brand-mark.sm{width:30px;height:30px;font-size:16px;border-radius:8px}
.plan-badge{font-size:11px;font-weight:800;padding:5px 11px;border-radius:99px;letter-spacing:.4px}
.plan-badge.free{background:#e8e2fb;color:#5b2ee5}.plan-badge.pro{background:linear-gradient(120deg,#f5a623,#ec4899);color:#fff}
.pro-chip{background:linear-gradient(120deg,#f5a623,#ec4899);color:#fff;font-size:9px;font-weight:800;padding:2px 7px;border-radius:99px;margin-left:6px}
.pro-chip.big-chip{font-size:12px;padding:5px 12px}
.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#8b3dff,#ec4899);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;flex:none}
.small-av{width:32px;height:32px;font-size:13px}
.icon-btn{background:none;border:none;font-size:17px;color:var(--muted)}

/* ---------- LANDING + AUTH ---------- */
#view-auth{display:block;min-height:100vh;background:#fff}
.brand-mark{overflow:hidden;padding:0;background:transparent}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block}
.lp-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);display:flex;align-items:center;gap:18px;padding:10px 22px;border-bottom:1px solid var(--line)}
.lp-brand{display:flex;align-items:center;gap:9px;font-family:Poppins;font-weight:800;font-size:22px}
.lp-brand img{width:38px;height:38px;object-fit:contain}
.lp-brand span{background:linear-gradient(120deg,#8b3dff,#00c4cc);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-links{display:flex;gap:20px;margin-left:12px}
.lp-links a{color:#2b2f33;text-decoration:none;font-size:14px;font-weight:600}
.lp-links a:hover{color:var(--purple2)}
.lp-nav-btns{margin-left:auto;display:flex;gap:9px}
.lp-hero{background:linear-gradient(180deg,#e9e4ff 0%,#c8f4f6 78%,#ffffff 100%);padding:52px 22px 34px;overflow:hidden}
.lp-hero-inner{max-width:1180px;margin:0 auto;display:flex;gap:40px;align-items:flex-start}
.lp-hero-text{flex:1.2;padding-top:16px;position:relative;min-width:0}
.lp-hero-text h1{font-family:Poppins;font-size:clamp(34px,4.6vw,56px);line-height:1.1;font-weight:800}
.lp-hero-text p{margin-top:14px;font-size:17px;color:#3c4043;max-width:480px;line-height:1.6}
.lp-hero-cta{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.lp-floats{position:relative;height:130px;margin-top:26px}
.float-el{position:absolute;width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#fff;box-shadow:0 12px 26px rgba(30,10,80,.22);font-family:Poppins}
.fe1{background:#8b3dff;left:2%;top:8px;transform:rotate(-6deg)}
.fe2{background:#ec4899;left:19%;top:44px;transform:rotate(5deg)}
.fe3{background:#00c4cc;left:36%;top:6px;transform:rotate(-3deg)}
.fe4{background:#f5a623;left:53%;top:48px;transform:rotate(7deg)}
.fe5{background:#111827;left:70%;top:10px;transform:rotate(-5deg)}
.fe6{background:#22c55e;left:86%;top:42px;transform:rotate(4deg)}
.auth-right{flex:1;display:flex;justify-content:center;min-width:0;width:100%}
.auth-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(30,10,80,.14);padding:26px;width:100%;max-width:420px}
.lp-section{max-width:1180px;margin:0 auto;padding:56px 22px 8px;text-align:center}
.lp-section h2{font-family:Poppins;font-size:clamp(25px,3.2vw,36px);font-weight:800}
.lp-sub{color:var(--muted);margin-top:8px;font-size:15.5px}
.lp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:30px;text-align:left}
.lp-card{border-radius:18px;padding:22px;color:#fff;min-height:190px;display:flex;flex-direction:column;gap:8px;box-shadow:0 14px 34px rgba(30,10,80,.16)}
.lp-card h3{font-family:Poppins;font-size:19px;line-height:1.35}
.lp-card p{font-size:13.5px;opacity:.94;line-height:1.55}
.lp-card-ic{font-size:30px}
.lp-card.c1{background:linear-gradient(140deg,#7c3aed,#ec4899)}
.lp-card.c2{background:linear-gradient(140deg,#0ea5e9,#22c55e)}
.lp-card.c3{background:linear-gradient(140deg,#f97316,#ef4444)}
.lp-card.c4{background:linear-gradient(140deg,#111827,#374151)}
.showcase-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-top:28px;text-align:left}
.lp-pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;max-width:780px;margin:30px auto 22px;text-align:left}
.lp-price-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px}
.lp-price-card.pro{border:2px solid var(--purple);box-shadow:0 16px 40px rgba(91,46,229,.14)}
.lp-price-card h3{font-family:Poppins;font-size:19px}
.lp-price-card ul{list-style:none;margin:12px 0;line-height:2;font-size:14px}
.lp-footer{margin-top:60px;border-top:1px solid var(--line);padding:26px 22px 34px;text-align:center;color:var(--muted);font-size:13px}
.lp-footer .lp-brand{justify-content:center;margin-bottom:8px}
.auth-box{width:100%;max-width:380px}
.auth-box h2{font-family:Poppins;font-size:26px;margin-bottom:6px}
.social-btn{width:100%;background:#fff;border:1px solid var(--line);border-radius:9px;padding:12px;font-size:14px;font-weight:600;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px}
.social-btn:hover{border-color:var(--purple)}
.social-btn .g{font-weight:800;background:conic-gradient(#4285f4 0 25%,#ea4335 0 50%,#fbbc05 0 75%,#34a853 0);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:17px}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;margin:18px 0}
.or:before,.or:after{content:'';flex:1;height:1px;background:var(--line)}
#authForm input{width:100%;border:1px solid var(--line);border-radius:9px;padding:12px;margin-bottom:10px;font-size:14px;background:#fff}
#authForm input:focus{outline:2px solid #d9c8ff;border-color:var(--purple)}
.auth-switch{margin-top:16px;font-size:13.5px}.auth-switch a{color:var(--purple2);font-weight:700}
.auth-err{color:#dc2626;font-size:13px;margin-top:8px;min-height:16px}

/* ---------- APP SHELL ---------- */
#view-app{display:flex;min-height:100vh}
.sidebar{width:236px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:16px 12px;position:sticky;top:0;height:100vh;flex:none}
.side-brand{display:flex;align-items:center;gap:10px;font-family:Poppins;font-weight:800;font-size:21px;padding:2px 6px 14px}
.side-brand span{background:linear-gradient(120deg,#8b3dff,#00c4cc);-webkit-background-clip:text;background-clip:text;color:transparent}
.create-btn{background:var(--purple);color:#fff;border:none;border-radius:10px;padding:12px;font-size:15px;font-weight:700;margin-bottom:8px}
.create-btn:hover{background:var(--purple2)}
.create-menu{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(20,10,60,.16);padding:6px;margin-bottom:10px}
.create-menu button{display:flex;width:100%;gap:9px;background:none;border:none;padding:9px 10px;border-radius:8px;font-size:13.5px;text-align:left;align-items:center}
.create-menu button:hover{background:#f3efff}
.create-menu small{color:var(--muted);margin-left:auto}
.side-nav{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.snav{padding:10px;border-radius:9px;font-size:14px;font-weight:500;color:#2b2f33;cursor:pointer;text-decoration:none;display:flex;align-items:center}
.snav:hover{background:#f0eefc}.snav.active{background:#efe9ff;color:var(--purple2);font-weight:700}
.side-user{margin-top:auto;display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.su-info{flex:1;min-width:0}.su-info b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.su-info span{font-size:11.5px;color:var(--muted)}
.main-col{flex:1;min-width:0}
.app-top{position:sticky;top:0;z-index:40;background:rgba(242,243,245,.9);backdrop-filter:blur(8px);display:flex;align-items:center;gap:12px;padding:12px 22px}
.search-wrap{flex:1;max-width:560px;background:#fff;border:1px solid var(--line);border-radius:99px;padding:10px 16px;display:flex;gap:8px;align-items:center}
.search-wrap input{border:none;outline:none;flex:1;font-size:14px;background:none}
.page{padding:10px 22px 40px;max-width:1240px;margin:0 auto}
.hero-banner{background:linear-gradient(110deg,#8b3dff,#5b2ee5 60%,#00c4cc);border-radius:20px;color:#fff;padding:34px 28px 26px;text-align:center;margin-top:8px}
.hero-banner h1{font-family:Poppins;font-size:clamp(24px,3.6vw,38px);font-weight:700}
.hero-search{max-width:560px;margin:18px auto 6px;background:#fff;border-radius:12px;display:flex;gap:8px;padding:13px 16px;align-items:center}
.hero-search input{border:none;outline:none;flex:1;font-size:15px;color:var(--ink)}
.type-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.type-item{background:none;border:none;color:#fff;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11.5px;font-weight:600;width:86px}
.type-ic{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-size:23px;transition:.15s}
.type-item:hover .type-ic{background:#fff;transform:translateY(-2px)}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin:26px 0 12px}
.sec-head h2{font-family:Poppins;font-size:20px}
.sec-head a{color:var(--purple2);font-size:13px;font-weight:600;text-decoration:none}
.sub-h{font-family:Poppins;font-size:16px;margin:20px 0 10px}
.recent-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.recent-card{min-width:190px;cursor:pointer}
.recent-card img{width:190px;height:150px;object-fit:cover;border-radius:12px;border:1px solid var(--line);display:block}
.recent-card .rc-name{font-size:13px;font-weight:600;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-card .rc-date{font-size:11px;color:var(--muted)}
.empty-note{background:#fff;border:1px dashed #c9cdd4;border-radius:12px;padding:20px;color:var(--muted);font-size:13.5px;width:100%}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.tpl-card{border-radius:14px;overflow:hidden;cursor:pointer;position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;transition:.15s;color:#fff}
.tpl-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(30,10,80,.22)}
.tpl-card .tpl-title{font-family:Poppins;font-weight:700;font-size:16.5px;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.tpl-card .tpl-sub{font-size:11px;opacity:.92}
.lock-badge{position:absolute;top:8px;right:8px;background:linear-gradient(120deg,#f5a623,#ec4899);color:#fff;font-size:10px;font-weight:800;padding:4px 8px;border-radius:99px;z-index:2}
.cat-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.cat-chip{background:#fff;border:1px solid var(--line);border-radius:99px;padding:8px 15px;font-size:13px;font-weight:600}
.cat-chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.design-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.design-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.design-card img{width:100%;height:140px;object-fit:cover;display:block}
.design-card .dc-body{padding:11px}
.design-card .dc-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.design-card .dc-date{font-size:11px;color:var(--muted)}
.design-card .dc-btns{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.design-card .dc-btns button{flex:1;background:#f0eefc;border:none;border-radius:7px;padding:7px 4px;font-size:11.5px;font-weight:600;color:var(--purple2)}
.design-card .dc-btns button.danger{background:#fdecec;color:#b91c1c}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;margin-top:16px;max-width:760px}
.price-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;position:relative}
.price-card.pro{border:2px solid var(--purple);box-shadow:0 16px 40px rgba(91,46,229,.14)}
.pro-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;font-size:11px;font-weight:800;padding:5px 14px;border-radius:99px;white-space:nowrap}
.price-card h3{font-family:Poppins;font-size:20px}
.price{font-family:Poppins;font-size:36px;font-weight:800;margin:10px 0 2px}.price span{font-size:14px;color:var(--muted);font-weight:500}
.yearly{color:#d97706;font-size:13px}
.price-card ul{list-style:none;margin:14px 0;line-height:2;font-size:14px}.price-card li.off{color:#9aa0a6}
.locked-box{background:#fff;border:1px dashed #c9b8ff;border-radius:14px;padding:30px;text-align:center;line-height:2}
.brand-colors{display:flex;gap:10px;flex-wrap:wrap}
.brand-color{width:56px;height:56px;border-radius:12px;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.15);cursor:pointer;position:relative}
.brand-add{display:flex;gap:10px;align-items:center;margin-top:12px}
.brand-add input[type=color]{width:48px;height:40px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:2px}
#brandKit select{padding:10px;border:1px solid var(--line);border-radius:9px;font-size:14px;background:#fff}
#brandLogoBox img{max-height:90px;margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px}
.order-item{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:8px;font-size:13px;line-height:1.7}
.order-item .st{font-weight:800;font-size:11px;padding:3px 9px;border-radius:99px}
.st.pending{background:#fef3c7;color:#92400e}.st.approved{background:#dcfce7;color:#166534}.st.rejected{background:#fee2e2;color:#991b1b}

/* ---------- EDITOR ---------- */
#view-editor{display:flex;flex-direction:column;height:100vh;background:#ebebee}
.ed-topbar{background:linear-gradient(90deg,#8b3dff,#5b2ee5);color:#fff;display:flex;align-items:center;gap:10px;padding:8px 14px}
.ed-left,.ed-right{display:flex;align-items:center;gap:6px}
.ed-menu{background:rgba(255,255,255,.14);border:none;color:#fff;border-radius:8px;padding:7px 11px;font-size:13px;font-weight:600}
.ed-menu:hover{background:rgba(255,255,255,.28)}
.ed-icon{background:none;border:none;color:#fff;font-size:17px;padding:6px 8px;border-radius:8px}
.ed-icon:hover{background:rgba(255,255,255,.2)}
.ed-sep{width:1px;height:22px;background:rgba(255,255,255,.3);margin:0 4px}
.saved-note{font-size:12px;opacity:.85}
.doc-title{flex:1;max-width:380px;margin:0 auto;background:transparent;border:none;color:#fff;font-size:14.5px;font-weight:600;text-align:center;border-radius:8px;padding:7px}
.doc-title:hover,.doc-title:focus{background:rgba(255,255,255,.15);outline:none}
.btn-download{position:relative}
.export-menu{position:absolute;right:14px;top:52px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;z-index:80;min-width:220px;box-shadow:0 16px 40px rgba(0,0,0,.25)}
.export-menu button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--ink);padding:12px 15px;font-size:13.5px}
.export-menu button:hover{background:#f3efff}
.ctx-bar{background:#fff;border-bottom:1px solid var(--line);min-height:48px;display:flex;align-items:center;padding:6px 14px;gap:8px;overflow-x:auto}
.ctx-hint{color:var(--muted);font-size:13px}
#ctxControls{display:flex;align-items:center;gap:7px;flex-wrap:nowrap}
#ctxControls input[type=color]{width:34px;height:30px;border:1px solid var(--line);border-radius:7px;background:#fff;padding:1px;cursor:pointer}
#ctxControls select,#ctxControls input[type=number]{border:1px solid var(--line);border-radius:7px;padding:6px;font-size:13px;background:#fff}
#pFontSize{width:64px}#pFont{max-width:150px}
#pStrokeW{width:52px}
.ctx-btn{background:#fff;border:1px solid var(--line);border-radius:7px;padding:6px 9px;font-size:12.5px;font-weight:600;white-space:nowrap}
.ctx-btn:hover{border-color:var(--purple)}
.ctx-btn.danger{color:#b91c1c}
.ctx-lbl{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px;white-space:nowrap}
.ctx-lbl input[type=range]{width:80px}
.ed-body{flex:1;display:flex;min-height:0}
.rail{width:76px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:10px 7px;gap:3px;flex:none}
.rail-btn{background:none;border:none;color:#3c4043;border-radius:11px;padding:10px 2px;font-size:19px;display:flex;flex-direction:column;align-items:center;gap:3px}
.rail-btn span{font-size:10px;font-weight:600}
.rail-btn.active{background:#efe9ff;color:var(--purple2)}
.rail-btn:hover{background:#f3f0ff}
.sidepanel{width:288px;background:#fff;border-right:1px solid var(--line);overflow-y:auto;padding:16px;flex:none}
.sidepanel h4{font-family:Poppins;font-size:13px;margin:16px 0 10px}
.sidepanel h4:first-child{margin-top:0}
.tpl-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tpl-mini{border-radius:10px;cursor:pointer;position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;color:#fff}
.tpl-mini .tpl-title{font-size:11.5px;font-family:Poppins;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.el-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.el-cell{background:#f4f2ff;border:1px solid #e6e0ff;border-radius:10px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:21px;cursor:pointer;color:#2b2140}
.el-cell:hover{border-color:var(--purple)}
.el-cell svg{width:26px;height:26px}
.text-preset{display:block;width:100%;background:#f7f5ff;border:1px solid #e6e0ff;color:var(--ink);border-radius:10px;padding:12px;margin-bottom:8px;text-align:left;cursor:pointer}
.text-preset.big{font-family:Poppins;font-size:20px;font-weight:800}
.text-preset.mid{font-size:15px;font-weight:600}.text-preset.small{font-size:12px}
.font-style-btn{display:block;width:100%;background:#fff;border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:9px;margin-bottom:6px;text-align:left;cursor:pointer}
.photo-grid,.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.photo-grid img,.upload-grid img{width:100%;height:92px;object-fit:cover;border-radius:9px;cursor:pointer;border:2px solid transparent}
.photo-grid img:hover,.upload-grid img:hover{border-color:var(--purple)}
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.swatch{aspect-ratio:1;border-radius:9px;cursor:pointer;border:1px solid rgba(0,0,0,.08)}
.swatch:hover{transform:scale(1.08)}
.layer-item{display:flex;align-items:center;gap:8px;background:#f7f5ff;border:1px solid #e6e0ff;border-radius:9px;padding:8px 10px;margin-bottom:6px;font-size:12px;cursor:pointer}
.layer-item.active{border-color:var(--purple);background:#efe9ff}
.layer-item .lname{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layer-item button{background:none;border:none;color:var(--muted);font-size:13px}
.stage{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;position:relative;padding:34px;background:#ebebee;background-image:radial-gradient(#cfcfd6 1px,transparent 1px);background-size:22px 22px}
.canvas-holder{transform-origin:center;box-shadow:0 14px 44px rgba(15,5,40,.25);background:#fff;line-height:0}
.zoom-pill{position:absolute;right:18px;bottom:16px;background:#fff;border:1px solid var(--line);border-radius:99px;display:flex;align-items:center;gap:2px;padding:4px 8px;box-shadow:0 8px 24px rgba(0,0,0,.14);z-index:5}
.zoom-pill button{background:none;border:none;font-size:15px;font-weight:700;padding:4px 8px}
.zoom-pill span{font-size:12px;color:var(--muted);min-width:38px;text-align:center}

/* ---------- SUPER ADMIN ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:16px}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.stat-card b{font-family:Poppins;font-size:25px;display:block}
.stat-card span{color:var(--muted);font-size:12px;font-weight:600}
.user-row{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px;flex-wrap:wrap}
.user-row .u-info{flex:1;min-width:170px}
.user-row .u-info b{font-size:14px}
.user-row .u-info span{display:block;font-size:12px;color:var(--muted)}
.user-row .u-meta{font-size:11.5px;color:var(--muted);text-align:right}
.user-row .u-btns{display:flex;gap:6px;flex-wrap:wrap;width:100%}
.mini-btn{border:none;border-radius:8px;padding:7px 11px;font-size:12px;font-weight:700;cursor:pointer}
.mini-btn.pro{background:linear-gradient(120deg,#f5a623,#ec4899);color:#fff}
.mini-btn.plain{background:#efe9ff;color:var(--purple2)}
.mini-btn.block{background:#fef3c7;color:#92400e}
.mini-btn.unblock{background:#dcfce7;color:#166534}
.mini-btn.del{background:#fee2e2;color:#991b1b}
.blocked-chip{background:#fee2e2;color:#991b1b;font-size:10px;font-weight:800;padding:2px 8px;border-radius:99px;margin-left:6px}

/* ---------- MODALS ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(10,6,25,.65);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:#fff;border-radius:16px;padding:24px;max-width:440px;width:100%;max-height:88vh;overflow-y:auto;position:relative;color:var(--ink)}
.modal.wide{max-width:760px}
.modal h3{font-family:Poppins;margin-bottom:12px}
.modal-x{position:absolute;top:12px;right:12px;background:#f1efff;border:none;border-radius:8px;width:30px;height:30px}
.pay-step{font-size:14px;margin:12px 0 8px}
.easypaisa-box{background:#ecfdf3;border:1px solid #86cfa8;border-radius:12px;padding:14px 16px;line-height:1.9;font-size:15px}
.easypaisa-box span{color:#1c7a4a;font-size:12px;display:block;line-height:1.2}
.copy-btn{background:#1c7a4a;color:#d9fbe8;border:none;border-radius:6px;padding:3px 10px;font-size:12px;margin-left:6px}
#payForm input,#payForm select{width:100%;border:1px solid var(--line);border-radius:9px;padding:11px;margin-bottom:10px;font-size:14px;background:#fff}
.share-row{display:flex;gap:8px;margin:12px 0}
.share-row input{flex:1;border:1px solid var(--line);border-radius:9px;padding:10px;font-size:12.5px;background:#fafafa}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(90px);background:#0d1216;color:#fff;padding:12px 20px;border-radius:99px;font-weight:600;font-size:14px;z-index:200;transition:.3s;box-shadow:0 10px 30px rgba(0,0,0,.35);max-width:92vw;text-align:center}
#toast.show{transform:translateX(-50%) translateY(0)}

@media(max-width:900px){
  .lp-links{display:none}
  .lp-hero-inner{flex-direction:column;align-items:center}
  .lp-hero-text{text-align:center}
  .lp-hero-text p{margin-left:auto;margin-right:auto}
  .lp-hero-cta{justify-content:center}
  .lp-floats{display:none}
  .sidebar{width:70px}.sidebar .side-brand span,.su-info{display:none}
  .create-btn{font-size:0;padding:12px}.create-btn:after{content:'＋';font-size:18px}
  .side-nav .snav{justify-content:center;font-size:0;padding:11px 0}
  .side-nav .snav:before{font-size:19px}
  .side-nav .snav[data-page="home"]:before{content:'🏠'}
  .side-nav .snav[data-page="projects"]:before{content:'📁'}
  .side-nav .snav[data-page="templates"]:before{content:'📐'}
  .side-nav .snav[data-page="brand"]:before{content:'🎨'}
  .side-nav .snav[data-page="pricing"]:before{content:'💎'}
  .side-nav .snav[data-page="trash"]:before{content:'🗑️'}
  .side-nav .snav.sa-nav:before{content:'👑'}
  .sidepanel{width:220px}
}

/* editor pack v3: position group, draw opts, patterns, pro note */
.pos-group{display:inline-flex;gap:2px}
.draw-opts{display:flex;gap:14px;align-items:center;margin:8px 0 4px;font-size:12.5px;color:#3c4450}
.draw-opts input[type=range]{width:80px}
.pat-swatch{font-size:10.5px;display:flex;align-items:center;justify-content:center;color:#5b21b6;background:#f4f0ff;border:1px solid #e3d9fb}
.pro-active-note{background:#e9fbe7;border:1px solid #b6e7ae;color:#166534;border-radius:10px;padding:11px 13px;font-size:13.5px;text-align:center}