@import "https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap";
:root{--purple:#55007c;--orange:#e6561f;--bg:#f5f4f7;--border:#e2dfe6;--text-dark:#322f35;--text-gray:#726d77}*{box-sizing:border-box}body{background:var(--bg);color:var(--text-dark);margin:0;font-family:Poppins,Segoe UI,sans-serif}.topbar{border-bottom:1px solid var(--border);background:#fff;justify-content:space-between;align-items:center;padding:18px 28px;display:flex}.topbar h1{color:var(--purple);margin:0;font-size:18px}.topbar .sub{color:var(--text-gray);font-size:13px}.wrap{max-width:960px;margin:0 auto;padding:28px}.btn{cursor:pointer;border:none;border-radius:8px;align-items:center;gap:6px;padding:10px 18px;font-family:inherit;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex}.btn-primary{background:var(--purple);color:#fff}.btn-primary:hover{background:#4a1470}.btn-primary:disabled{opacity:.6;cursor:default}.btn-outline{color:var(--purple);border:1.5px solid var(--purple);background:#fff}.btn-outline:hover{background:#f4eefa}.btn-danger{color:#c0392b;background:#fff;border:1.5px solid #e9cfcb}.btn-danger:hover{background:#fdf1ef}.btn-ghost{color:var(--text-gray);background:0 0}.actions-row{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.card-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;display:grid}.card-item{border:1px solid var(--border);background:#fff;border-radius:14px;flex-direction:column;gap:10px;padding:18px;display:flex}.card-item .row{align-items:center;gap:12px;display:flex}.card-item .avatar{object-fit:cover;background:#ece8f0;border-radius:50%;flex:none;width:52px;height:52px}.card-item .info strong{font-size:15px;display:block}.card-item .info span{color:var(--text-gray);font-size:13px;display:block}.card-item .link-line{color:var(--purple);word-break:break-all;background:#f7f3fa;border-radius:8px;padding:8px 10px;font-size:12.5px}.card-item .btn-row{flex-wrap:wrap;gap:8px;margin-top:4px;display:flex}.card-item .btn-row form{margin:0}.card-item .btn-row .btn{padding:7px 12px;font-size:13px}.empty-state{text-align:center;color:var(--text-gray);padding:60px 20px}.wrap-wide{max-width:900px}.template-editor{flex-direction:column;align-items:center;display:flex}.template-editor>.error-box{width:100%;max-width:780px;margin-bottom:18px}.editor-columns{flex-flow:wrap;justify-content:center;align-items:flex-start;gap:32px;width:100%;display:flex}.editor-fit-outer{flex:none;justify-content:center;display:flex;overflow:hidden}.editor-fit-inner{transform-origin:top;flex-direction:column;align-items:center;display:flex}.editor-side-col{flex-direction:column;flex:0 0 280px;gap:16px;padding-top:8px;display:flex}.slug-bar{border:1px solid var(--border);background:#fff;border-radius:12px;width:100%;padding:12px 16px}.slug-bar label{color:var(--text-gray);margin-bottom:6px;font-size:12px;font-weight:600;display:block}.slug-input-row{align-items:center;gap:2px;font-size:14px;display:flex}.slug-input-row span{color:var(--text-gray);white-space:nowrap}.slug-input-row input{border:none;border-bottom:1.5px dashed var(--border);min-width:0;color:var(--text-dark);flex:auto;padding:2px 4px;font-family:inherit;font-size:14px}.slug-input-row input:focus{border-color:var(--purple);outline:none}.phone-frame{background:#1f1c22;border-radius:34px;padding:14px 10px;box-shadow:0 20px 45px #1e142847}.phone-notch{background:#1f1c22;border-radius:0 0 12px 12px;width:90px;height:16px;margin:0 auto 6px}.phone-screen{background:#f3f1f4;border-radius:22px;width:440px;overflow:hidden}.editor-hint{margin:0}.editor-actions{flex-direction:column;align-items:stretch}.editor-actions .btn{justify-content:center}@media (max-width:760px){.editor-columns{flex-direction:column;align-items:center}.editor-side-col{flex:none;width:100%;max-width:440px}}.form-card{border:1px solid var(--border);background:#fff;border-radius:14px;max-width:640px;padding:28px}.editor-form{max-width:none}.field{margin-bottom:18px}.field label{color:var(--text-dark);margin-bottom:6px;font-size:13px;font-weight:600;display:block}.field .hint{color:var(--text-gray);margin-top:4px;font-size:12px}.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=url],.field input[type=file],.field textarea{border:1.5px solid var(--border);width:100%;color:var(--text-dark);border-radius:8px;padding:10px 12px;font-family:inherit;font-size:14px}.field input:focus,.field textarea:focus{border-color:var(--purple);outline:none}.field textarea{resize:vertical;min-height:70px}.input-with-action{position:relative}.input-with-action input{padding-right:40px}.input-locked{color:var(--text-gray);cursor:default;background:#f5f4f7}.input-action-btn{width:32px;color:var(--text-gray);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex;position:absolute;top:0;bottom:0;right:4px}.input-action-btn:hover{color:var(--purple)}.two-col{grid-template-columns:1fr 1fr;gap:16px;display:grid}.current-photo{align-items:center;gap:12px;margin-bottom:10px;display:flex}.current-photo img{object-fit:cover;border-radius:50%;width:56px;height:56px}.form-actions{gap:10px;margin-top:22px;display:flex}.error-box{color:#b23a2f;background:#fdecec;border:1px solid #f3c7c2;border-radius:8px;margin-bottom:18px;padding:10px 14px;font-size:13px}.success-box{color:#1f8a4c;background:#eafbf0;border:1px solid #bfe8cf;border-radius:8px;margin-bottom:18px;padding:10px 14px;font-size:13px}.topbar-nav{align-items:center;gap:18px;display:flex}.topbar-nav a{color:var(--text-gray);font-size:14px;font-weight:600;text-decoration:none}.topbar-nav a:hover{color:var(--purple)}@media (max-width:640px){.topbar{flex-wrap:wrap;gap:8px;padding:14px 16px}.topbar-nav{flex-wrap:wrap;justify-content:flex-start;gap:10px 16px;width:100%}.wrap{padding:16px}.card-grid{grid-template-columns:1fr}}.login-wrap{background:var(--bg);justify-content:center;align-items:center;min-height:100vh;font-family:Poppins,Segoe UI,sans-serif;display:flex}.login-box{border:1px solid var(--border);text-align:center;background:#fff;border-radius:14px;width:320px;padding:34px}.login-box h1{color:var(--purple);margin-bottom:4px;font-size:20px}.login-box .sub{color:var(--text-gray);margin-bottom:20px;font-size:13px}.login-box .field-label{text-align:left;color:var(--text-dark);margin-bottom:6px;font-size:12.5px;font-weight:600;display:block}.login-box input{border:1.5px solid var(--border);border-radius:8px;width:100%;margin-bottom:14px;padding:11px 12px;font-family:inherit;font-size:14px}.password-field{position:relative}.password-field input{padding-right:40px}.password-toggle{width:32px;color:var(--text-gray);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex;position:absolute;top:0;bottom:14px;right:4px}.password-toggle:hover{color:var(--purple)}.login-box .btn-primary{justify-content:center;width:100%}.cropper-overlay{z-index:1000;background:#140e1899;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.cropper-box{background:#fff;border-radius:16px;flex-direction:column;align-items:stretch;width:100%;max-width:360px;padding:22px;display:flex}.cropper-title{color:var(--text-dark);margin:0 0 4px;font-size:17px}.cropper-hint{color:var(--text-gray);margin:0 0 14px;font-size:13px}.cropper-canvas-wrap{background:#2a2530;border-radius:12px;width:100%;height:280px;position:relative;overflow:hidden}.cropper-zoom{width:100%;accent-color:var(--purple);margin:16px 0 4px}.cropper-actions{justify-content:flex-end;gap:10px;margin-top:14px;display:flex}