@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:16px 28px;display:flex}.topbar-brand{align-items:center;gap:12px;display:flex}.topbar-logo{flex:none;width:42px;height:42px}.topbar h1{color:var(--text-dark);margin:0;font-size:19px;font-weight:700}.topbar .sub{color:var(--text-gray);font-size:13px}.topbar-avatar{width:42px;height:42px;color:var(--purple);cursor:pointer;font:inherit;background:#efe6f7;border:none;border-radius:50%;flex:none;justify-content:center;align-items:center;padding:0;display:flex}.topbar-avatar svg{width:22px;height:22px}.profile-menu{position:relative}.profile-dropdown{border:1px solid var(--border);z-index:20;background:#fff;border-radius:12px;min-width:220px;position:absolute;top:calc(100% + 10px);right:0;overflow:hidden;box-shadow:0 8px 24px #321e3c24}.profile-dropdown-email{color:var(--text-gray);border-bottom:1px solid var(--border);word-break:break-all;padding:12px 16px;font-size:12.5px}.profile-dropdown form{margin:0}.profile-dropdown-item{color:#c0392b;cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:10px;width:100%;padding:12px 16px;font-family:inherit;font-size:14px;font-weight:600;display:flex}.profile-dropdown-item:hover{background:#fdf1ef}.topbar-tabs{border-bottom:1px solid var(--border);background:#fff;align-items:center;gap:8px;padding:0 28px;display:flex;overflow-x:auto}.tab-link{color:var(--text-gray);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-bottom:2.5px solid #0000;align-items:center;gap:8px;margin-right:20px;padding:14px 6px;font-family:inherit;font-size:14.5px;font-weight:600;text-decoration:none;display:inline-flex}.tab-link:hover{color:var(--purple)}.tab-icon{width:18px;height:18px}.tab-active{color:var(--purple);border-bottom-color:var(--purple)}.tab-form{margin:0 0 0 auto}.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-icon{flex:none;width:16px;height:16px}.btn-primary{background:var(--purple);color:#fff}.btn-primary:hover{background:#4a1470}.btn-primary:disabled{opacity:.6;cursor:default}.btn-soft{color:var(--purple);background:#f1ecf6}.btn-soft:hover{background:#e6ddf0}.btn-outline{color:var(--purple);border:1.5px solid var(--purple);background:#fff}.btn-outline:hover{background:#f4eefa}.btn-danger{color:#c0392b;background:#fdecea}.btn-danger:hover{background:#fbdedb}.btn-ghost{color:var(--text-gray);background:0 0}.actions-row{justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px;display:flex}.page-title{color:var(--text-dark);margin:0;font-size:26px;font-weight:700}.page-subtitle{color:var(--text-gray);margin:4px 0 0;font-size:14px}.card-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;display:grid}.card-item{border:1px solid var(--border);background:#fff;border-radius:16px;flex-direction:column;gap:14px;padding:20px;display:flex;position:relative;box-shadow:0 1px 3px #321e3c0a}.card-menu{display:none}.card-menu-btn{width:30px;height:30px;color:var(--text-gray);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;display:flex}.card-menu-btn:hover{color:var(--purple);background:#f1ecf6}.card-menu-btn svg{width:20px;height:20px}.card-menu-dropdown{border:1px solid var(--border);z-index:15;background:#fff;border-radius:12px;flex-direction:column;min-width:200px;display:flex;position:absolute;top:calc(100% + 6px);right:0;overflow:hidden;box-shadow:0 8px 24px #321e3c24}.card-menu-dropdown form{margin:0}.card-menu-item{width:100%;color:var(--text-dark);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:10px;padding:11px 14px;font-family:inherit;font-size:13.5px;font-weight:600;text-decoration:none;display:flex}.card-menu-item:hover{background:#f7f5f9}.card-menu-item svg{flex:none;width:16px;height:16px}.card-menu-item-danger{color:#c0392b}.card-menu-item-danger:hover{background:#fdf1ef}.card-item .row{align-items:center;gap:14px;display:flex}.card-item .avatar{object-fit:cover;background:#ece8f0;border-radius:50%;flex:none;width:60px;height:60px}.card-item .info strong{font-size:16.5px;display:block}.card-item .info span{color:var(--text-gray);margin-top:1px;font-size:13.5px;display:block}.badge-row{flex-wrap:wrap;gap:8px;display:flex}.badge{border-radius:999px;align-items:center;gap:6px;padding:5px 12px;font-size:12.5px;font-weight:600;display:inline-flex}.badge-active{color:#1f8a4c;background:#e6f7ec}.badge-dot{background:#1f8a4c;border-radius:50%;width:7px;height:7px}.badge-type{color:var(--purple);background:#f1ecf6}.badge-icon{width:14px;height:14px}.card-item-divider{border:none;border-top:1px solid var(--border);margin:0}.card-item .btn-row{flex-wrap:wrap;gap:8px;display:flex}.card-item .btn-row form{margin:0}.card-item .btn-row .btn{white-space:nowrap;flex:auto;justify-content:center;padding:8px 10px;font-size:12.5px}.empty-state{text-align:center;color:var(--text-gray);padding:60px 20px}@media (max-width:640px){.topbar-tabs{padding:0 16px}.tab-link{gap:6px;margin-right:10px;padding:12px 2px;font-size:13.5px}.tab-icon{width:16px;height:16px}.tab-form{display:none}.page-title{font-size:19px}.page-subtitle{font-size:13px}.actions-row{align-items:center}.actions-row .btn{white-space:nowrap}.card-item-top{padding-right:34px}.card-item .btn-row,.card-item .card-item-divider{display:none}.card-menu{display:block;position:absolute;top:16px;right:16px}}.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}.template-picker{border:1px solid var(--border);background:#fff;border-radius:12px;width:100%;padding:12px 16px}.template-picker>label{color:var(--text-gray);margin-bottom:8px;font-size:12px;font-weight:600;display:block}.template-options{flex-direction:column;gap:8px;display:flex}.template-option{text-align:left;border:1.5px solid var(--border);cursor:pointer;background:#fff;border-radius:8px;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:8px 10px;font-family:inherit;display:flex}.template-option-title{color:var(--text-dark);font-size:13px;font-weight:700}.template-option-desc{color:var(--text-gray);font-size:11.5px}.template-option-active{border-color:var(--purple);background:#f7f2fb}.template-option-active .template-option-title{color:var(--purple)}.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}@media (max-width:640px){.topbar{padding:14px 16px}.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}