@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Ubuntu:wght@300;400;500;700&display=swap";body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}:root{--red:#e63946;--ui:#111827;--bg:#f5f5f7;--surface:#fff;--input-bg:#f5f5f7;--input-border:#e0e0e4;--text:#1a1a2e;--text-muted:#9aa0b3}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,sans-serif}.app{flex-direction:column;min-height:100vh;display:flex}.main{flex-direction:column;flex:1;gap:16px;width:100%;max-width:560px;margin:0 auto;padding:20px;display:flex}.template-switcher{justify-content:center;gap:6px;display:flex}.template-btn{border:1px solid var(--input-border);background:var(--surface);color:var(--text-muted);cursor:pointer;border-radius:8px;padding:8px 16px;font-size:.82rem;font-weight:500;transition:all .15s}.template-btn:hover{background:var(--input-bg);border-color:#c9ced6}.template-btn.active{background:var(--ui);color:#fff;border-color:var(--ui)}.preview-section{background:0 0;justify-content:center;align-items:flex-start;padding:12px 0;display:flex;overflow:visible}.preview-wrapper{justify-content:center;width:100%;display:flex}.card-wrap{transform-origin:top;flex-shrink:0;width:533px;height:306px;position:relative;overflow:visible}.business-card{background:#fff;border-radius:0;flex-shrink:0;width:533px;height:306px;display:flex;overflow:hidden;box-shadow:0 4px 20px #0000001f}.card-left{background:var(--red);z-index:1;border-top-right-radius:12px;border-bottom-right-radius:12px;flex-direction:column;justify-content:space-between;width:55%;padding:24px 22px;display:flex;position:relative}.card-left:after{content:"";background:var(--red);border-top-right-radius:12px;border-bottom-right-radius:12px;width:60px;height:306px;position:absolute;top:0;right:-30px}.card-right{z-index:0;-webkit-user-select:none;user-select:none;background:#333;width:45%;height:306px;position:relative;overflow:hidden}.card-logo{height:20px;margin-bottom:18px;display:block}.card-name-group{flex-direction:column;gap:6px;display:flex}.card-name{color:#fff;font-size:1.05rem;font-weight:800;line-height:1.2}.card-role{color:#ffffffd9;font-size:.7rem;font-weight:500}.card-contacts{flex-direction:column;gap:5px;font-size:.66rem;display:flex}.card-contact{color:#fff;align-items:center;gap:7px;font-weight:500;display:flex}.card-contact svg{opacity:.9;flex-shrink:0;width:12px;height:12px}.card-photo{object-fit:cover;object-position:center;transform-origin:50%;will-change:transform;-webkit-user-drag:none;width:100%;height:100%;display:block;position:absolute;top:50%;left:50%}.card-photo-placeholder{color:#bbb;flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex;position:absolute;inset:0}.card-photo-placeholder svg{width:44px;height:44px}.card-photo-placeholder span{font-size:.78rem;font-weight:500}.photo-resize{color:#111827;cursor:nwse-resize;-webkit-user-select:none;user-select:none;z-index:5;background:#fff;border:1px solid #0000001f;border-radius:50%;justify-content:center;align-items:center;width:26px;height:26px;font-size:12px;line-height:1;display:flex;position:absolute;bottom:-36px;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #00000026}.business-card.vyatkina{background:#fc403a;width:533px;height:306px;position:relative;overflow:hidden}.vyatkina-bg{z-index:0;transform-origin:50%;background:repeating-linear-gradient(0deg,#0000,#0000 76px,#ffffff26 76px 77px),repeating-linear-gradient(90deg,#0000,#0000 76px,#ffffff26 76px 77px);position:absolute;inset:0;transform:rotate(-90deg)scale(1.5)}.vyatkina-text{z-index:2;flex-direction:column;width:57%;height:100%;padding:33px 16px 20px 29px;display:flex;position:absolute;top:0;left:0}.vyatkina-logo{object-fit:contain;height:17px;margin-bottom:8px;display:block}.vyatkina-name{color:#fff;white-space:pre-line;margin-bottom:6px;font-family:Ubuntu,sans-serif;font-size:24px;font-weight:700;line-height:1.05}.vyatkina-role{color:#fff;margin-bottom:14px;font-family:Ubuntu,sans-serif;font-size:14px;font-weight:400;line-height:1.3}.vyatkina-contacts{flex-direction:column;gap:6px;display:flex}.vyatkina-contact{color:#fff;align-items:center;gap:8px;font-family:Ubuntu,sans-serif;font-size:12px;line-height:1.2;display:flex}.vyatkina-contact svg{opacity:.9;flex-shrink:0;width:12px;height:12px}.vyatkina-photo{-webkit-user-select:none;user-select:none;z-index:1;width:44%;height:100%;position:absolute;top:0;right:0;overflow:hidden}.vyatkina-img{border-radius:0}.business-card.ermolaeva{background:#fff;width:533px;height:306px;position:relative;overflow:hidden}.ermolaeva-text{flex-direction:column;justify-content:flex-start;width:63%;height:100%;padding:28px 16px 20px 34px;display:flex;position:absolute;top:0;left:0}.ermolaeva-logo{object-fit:contain;height:14px;margin-bottom:10px;display:block}.ermolaeva-name{color:#130909;white-space:pre-line;margin-bottom:6px;font-family:Ubuntu,sans-serif;font-size:24px;font-weight:400;line-height:1.2}.ermolaeva-role{color:#130909;margin-bottom:14px;font-family:Ubuntu,sans-serif;font-size:16px;font-weight:300;line-height:1.25}.ermolaeva-address{color:#130909;margin-bottom:4px;font-family:Ubuntu,sans-serif;font-size:11px;font-weight:400;line-height:1.3}.ermolaeva-contacts{flex-direction:column;gap:4px;display:flex}.ermolaeva-contact{color:#130909;align-items:center;gap:10px;font-family:Ubuntu,sans-serif;font-size:12px;display:flex}.ermolaeva-contact svg{flex-shrink:0;width:16px;height:16px}.ermolaeva-phone{letter-spacing:.5px;font-size:20px;font-weight:400}.ermolaeva-photo{-webkit-user-select:none;user-select:none;width:37%;height:100%;position:absolute;top:0;right:0;overflow:hidden}.ermolaeva-img{border-radius:0}.business-card.eliseeva{background:#fff;width:533px;height:306px;position:relative;overflow:hidden}.eliseeva-bg{z-index:0;transform-origin:50%;background:repeating-linear-gradient(0deg,#0000,#0000 76px,#fc403a1f 76px 77px),repeating-linear-gradient(90deg,#0000,#0000 76px,#fc403a1f 76px 77px);position:absolute;inset:0;transform:rotate(-90deg)scale(1.5)}.eliseeva-text{z-index:2;flex-direction:column;width:57%;height:100%;padding:22px 16px 20px 30px;display:flex;position:absolute;top:0;left:0}.eliseeva-name{color:#1b1b1c;white-space:pre-line;margin-bottom:2px;font-family:Ubuntu,sans-serif;font-size:40px;font-weight:700;line-height:1.1}.eliseeva-role{color:#fc403a;margin-bottom:12px;font-family:Ubuntu,sans-serif;font-size:18px;font-weight:700;line-height:1.2}.eliseeva-contacts{flex-direction:column;gap:4px;display:flex}.eliseeva-contact{color:#1b1b1c;align-items:center;gap:8px;font-family:Ubuntu,sans-serif;font-size:12px;line-height:1.2;display:flex}.eliseeva-contact svg{flex-shrink:0;width:14px;height:14px}.eliseeva-address{font-size:11px}.eliseeva-photo{-webkit-user-select:none;user-select:none;z-index:1;width:43%;height:100%;position:absolute;top:0;right:0;overflow:hidden}.eliseeva-img{border-radius:0}.settings{background:var(--surface);border:1px solid #00000012;border-radius:14px;width:100%;max-width:520px;margin:0 auto;padding:14px}.settings-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.s-upload{border:1px dashed var(--input-border);cursor:pointer;height:36px;color:var(--text);background:var(--input-bg);border-radius:8px;grid-column:1/-1;justify-content:center;align-items:center;font-size:.82rem;font-weight:500;transition:all .15s;display:flex}.s-upload:hover{background:#eef0f3;border-color:#c9ced6}.s-field{background:var(--input-bg);border:1px solid var(--input-border);border-radius:8px;align-items:center;height:38px;padding:0 10px;transition:all .15s;display:flex}.s-field:focus-within{border-color:var(--ui);background:#fff;box-shadow:0 0 0 3px #11182714}.s-field input,.s-field select{color:var(--text);background:0 0;border:none;outline:none;flex:1;min-width:0;font-family:inherit;font-size:.86rem}.s-field input::placeholder{color:#9ca3af}.s-field select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa0b3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;padding-right:24px}.s-field--full{grid-column:1/-1}.s-download{border:1px solid var(--input-border);background:var(--surface);height:38px;color:var(--text);cursor:pointer;border-radius:8px;grid-column:1/-1;font-size:.86rem;font-weight:500;transition:all .15s}.s-download:hover{background:var(--input-bg);border-color:#c9ced6}.s-phone-field{padding-right:4px}.s-phone-remove{width:24px;height:24px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;font-size:1.1rem;transition:all .15s;display:flex}.s-phone-remove:hover{color:var(--red);background:#e639461a}.s-phone-row{grid-column:1/-1;gap:4px;display:flex}.s-phone-row .s-field{flex:1}.s-phone-add{border:1px solid var(--input-border);background:var(--surface);width:32px;height:38px;color:var(--text-muted);cursor:pointer;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;font-size:1rem;font-weight:500;transition:all .15s;display:flex}.s-phone-add:hover{background:var(--input-bg);color:var(--text);border-color:#c9ced6}.s-phone-email-row{grid-column:1/-1;align-items:center;gap:6px;display:flex}.s-phone-email-row .s-field{flex:1;min-width:0}.s-phone-email-row .s-phone-add{border:1px solid var(--input-border);background:var(--surface);width:32px;height:38px;color:var(--text-muted);cursor:pointer;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;font-size:1rem;font-weight:500;transition:all .15s;display:flex}.s-phone-email-row .s-phone-add:hover{background:var(--input-bg);color:var(--text);border-color:#c9ced6}.s-phone-email-row .s-field input{text-overflow:ellipsis;width:100%;overflow:hidden}.s-upload-row{grid-column:1/-1}.photo-scale-mobile{display:none}@media (width<=560px){.main{padding:12px}.settings{padding:10px}.settings-grid{gap:6px}.s-field{height:36px}.s-upload{height:34px}.s-download{height:36px}.preview-section{padding:12px}.photo-resize{display:none}.photo-scale-mobile{text-align:center;width:100%;padding:8px 0 0;display:block}.photo-scale-mobile input[type=range]{width:80%;accent-color:var(--red);height:4px}}