.cropconv{--cc-navy:#09284f;--cc-blue:#1676d2;--cc-blue2:#0d8be6;--cc-text:#263b53;--cc-muted:#708195;--cc-line:#dde7f1;--cc-soft:#f5f9fd;--cc-white:#fff;font-family:inherit;color:var(--cc-text);margin:0 0 28px}.cropconv *{box-sizing:border-box}.cropconv [hidden]{display:none!important}.cropconv button,.cropconv input,.cropconv select{font:inherit}.cc-hero{background:linear-gradient(135deg,#09284f,#0a3567);border-radius:18px;padding:24px 26px;color:#fff;box-shadow:0 12px 30px rgba(8,42,83,.13);margin-bottom:16px}.cc-brand{color:#62b9ff;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}.cc-title{font-size:30px;font-weight:850;line-height:1.12;margin:0 0 8px}.cc-hero p{max-width:760px;margin:0;color:#dbeaff;font-size:15px}.cc-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.cc-badges span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700}.cc-layout{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(360px,.97fr);gap:16px;align-items:start}.cc-steps{display:flex;flex-direction:column;gap:12px}.cc-step,.cc-preview-card{background:#fff;border:1px solid var(--cc-line);border-radius:16px;box-shadow:0 8px 24px rgba(20,57,95,.06)}.cc-step{padding:18px}.cc-step-head{display:flex;align-items:center;gap:12px;margin-bottom:15px}.cc-step-head>b{width:34px;height:34px;border-radius:10px;background:#eaf4ff;color:var(--cc-blue);display:grid;place-items:center;font-size:15px;flex:0 0 34px}.cc-step-head>div{display:flex;flex-direction:column}.cc-step-head strong{color:var(--cc-navy);font-size:17px;line-height:1.25}.cc-step-head small{color:var(--cc-muted);font-size:12px;margin-top:2px}.cc-file-input{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}.cc-upload{border:1.5px dashed #aac6e4;background:#f7fbff;border-radius:14px;padding:26px 18px;text-align:center;transition:.18s}.cc-upload.is-drag{border-color:var(--cc-blue);background:#edf7ff}.cc-upload-icon{width:50px;height:50px;border-radius:14px;background:#e3f2ff;color:var(--cc-blue);display:grid;place-items:center;margin:0 auto 11px}.cc-upload-icon svg{width:27px;height:27px}.cc-upload>strong{display:block;color:#29445f;font-size:14px}.cc-upload>small{display:block;color:#8a9aac;font-size:11px;margin-top:10px}.cc-upload-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:13px}.cc-btn{border:0;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;font-weight:800;font-size:13px;text-decoration:none!important;cursor:pointer;transition:.18s}.cc-btn-primary{background:linear-gradient(135deg,#1676d2,#0f92e8);color:#fff!important;box-shadow:0 6px 15px rgba(22,118,210,.16)}.cc-btn-primary:hover{transform:translateY(-1px);color:#fff!important}.cc-btn-light{background:#edf4fb;color:#31516e!important;border:1px solid #d6e4f1}.cc-loaded{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f5f9fd;border:1px solid #dce8f3;border-radius:11px;padding:11px 12px}.cc-loaded>div{min-width:0;display:flex;flex-direction:column}.cc-loaded strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#24415e}.cc-loaded span{font-size:11px;color:#8391a1;margin-top:2px}.cc-replace{color:var(--cc-blue);font-size:12px;font-weight:800;cursor:pointer}.cc-alert{margin-top:10px;background:#fff0f1;border:1px solid #ffcbd0;color:#a41e2d;border-radius:10px;padding:10px 12px;font-size:12px}.cc-ratios{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.cc-ratios button{height:66px;border:1px solid #dbe6f0;border-radius:11px;background:#fbfdff;color:#64758a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;font-size:11px;font-weight:800;cursor:pointer}.cc-ratios button:hover,.cc-ratios button.active{border-color:#5aa5ea;background:#edf7ff;color:#126fc5;box-shadow:inset 0 0 0 1px rgba(18,111,197,.2)}.cc-ratios i{display:block;border:2px solid currentColor;border-radius:2px;width:25px;height:16px}.cc-ratios i.free{border-style:dashed}.cc-ratios i.r11{width:18px;height:18px}.cc-ratios i.circle{width:20px;height:20px;border-radius:50%}.cc-ratios i.r45{width:17px;height:21px}.cc-ratios i.r32{width:24px;height:16px}.cc-ratios i.r43{width:23px;height:17px}.cc-ratios i.r169{width:27px;height:15px}.cc-ratios i.r916{width:14px;height:25px}.cc-tool-buttons{display:flex;flex-wrap:wrap;gap:7px}.cc-tool-buttons button{border:1px solid #d9e5ef;background:#f8fbfe;color:#35526d;border-radius:9px;padding:8px 10px;font-weight:800;font-size:12px;cursor:pointer}.cc-tool-buttons button:hover{border-color:#89b9e5;background:#eff8ff;color:#0d6dbe}.cc-check{display:flex;gap:8px;align-items:center;color:#607287;font-size:12px;margin-top:13px}.cc-check input{accent-color:var(--cc-blue)}.cc-subtitle{font-size:12px;font-weight:850;color:#52677d;margin:15px 0 8px}.cc-coords{display:grid;grid-template-columns:1fr 1fr;gap:8px}.cc-coords label,.cc-output-size label{display:flex;align-items:center;border:1px solid #dbe5ef;border-radius:9px;background:#fff;overflow:hidden}.cc-coords span,.cc-output-size span{font-size:10px;color:#7f8d9e;padding-left:8px;min-width:43px}.cc-coords input,.cc-output-size input{width:100%;min-width:0;border:0;outline:0;padding:8px;color:#2d465f;font-weight:750}.cc-output-size{display:grid;grid-template-columns:1fr 38px 1fr;gap:7px;align-items:center}.cc-output-size label{position:relative}.cc-output-size em{font-style:normal;color:#8b99a8;font-size:10px;padding-right:7px}.cc-output-size button{height:36px;border:1px solid #dbe5ef;border-radius:9px;background:#f7fafc;cursor:pointer}.cc-output-size button.locked{background:#eaf5ff;border-color:#8ebce5}.cc-field{display:block;margin-top:13px}.cc-field>span{display:flex;justify-content:space-between;color:#5d7084;font-size:12px;font-weight:750;margin-bottom:6px}.cc-field select{width:100%;border:1px solid #dbe5ef;border-radius:9px;padding:9px 10px;background:#fff;color:#2b455e;outline:none}.cc-field input[type=range]{width:100%;accent-color:var(--cc-blue)}.cc-save-row{display:flex;gap:8px;margin-top:13px}.cc-save-row .cc-btn{flex:1}.cc-save:disabled{opacity:.5;cursor:default;transform:none}.cc-preview-card{padding:18px;position:sticky;top:16px}.cc-preview-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#6e8ba6}.cc-preview-title{font-size:19px;font-weight:850;color:var(--cc-navy);margin-top:2px}.cc-preview-tabs{display:flex;gap:5px;margin:12px 0 9px}.cc-preview-tabs button{border:0;background:#edf3f8;color:#66788b;border-radius:8px;padding:7px 10px;font-size:11px;font-weight:800;cursor:pointer}.cc-preview-tabs button.active{background:#dceeff;color:#126fc5}.cc-canvas-wrap{position:relative;height:520px;border-radius:13px;overflow:hidden;background-color:#0f1724;background-image:linear-gradient(45deg,#172333 25%,transparent 25%),linear-gradient(-45deg,#172333 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#172333 75%),linear-gradient(-45deg,transparent 75%,#172333 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;touch-action:none}.cc-canvas-wrap canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;outline:none}.cc-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;color:#d7e4f0;z-index:1}.cc-empty>span{width:54px;height:54px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);border-radius:15px;display:grid;place-items:center;font-size:25px;margin-bottom:10px}.cc-empty strong{font-size:15px}.cc-empty small{max-width:300px;color:#8da2b6;margin-top:5px;line-height:1.45}.cc-loading{position:absolute;inset:0;background:rgba(8,20,35,.76);backdrop-filter:blur(3px);z-index:4;display:flex;align-items:center;justify-content:center;gap:9px;color:#fff;font-size:12px;font-weight:800}.cc-loading i{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:ccspin .7s linear infinite}@keyframes ccspin{to{transform:rotate(360deg)}}.cc-preview-meta{background:#f5f9fc;border-radius:10px;padding:9px 11px;margin-top:10px}.cc-preview-meta>div{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:11px}.cc-preview-meta span{color:#8290a0}.cc-preview-meta strong{color:#3e566e;text-align:right}.cc-privacy{display:flex;gap:9px;align-items:flex-start;margin-top:10px;background:#eef9f4;border:1px solid #d2eee0;border-radius:10px;padding:10px;color:#356b51}.cc-privacy>span{width:24px;height:24px;border-radius:50%;background:#d6f1e3;display:grid;place-items:center;font-weight:900}.cc-privacy>div{display:flex;flex-direction:column}.cc-privacy strong{font-size:11px}.cc-privacy small{font-size:10px;color:#678474;margin-top:2px}.cc-how{margin:22px 0;background:#f6faff;border:1px solid #deebf6;border-radius:16px;padding:20px}.cc-how>small,.cc-service-block small,.cc-share small{font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#6f8ba6;font-size:10px}.cc-how-title,.cc-service-title{font-size:21px;font-weight:850;color:var(--cc-navy);margin:3px 0 13px}.cc-how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.cc-how-grid>div{background:#fff;border:1px solid #e0eaf4;border-radius:12px;padding:14px;display:flex;flex-direction:column}.cc-how-grid b{color:#75aadd;font-size:20px}.cc-how-grid strong{font-size:13px;color:#27445f;margin-top:6px}.cc-how-grid span{font-size:11px;color:#75869a;line-height:1.45;margin-top:4px}.cc-service-block{display:grid;grid-template-columns:54px 1fr;gap:16px;border-radius:16px;padding:20px;margin:16px 0;border:1px solid #dce8f3}.cc-service-block.cc-pro{background:#f5f9fd;border-color:#d9e6f2}.cc-service-block.cc-question{background:linear-gradient(135deg,#eef7ff,#fbfdff)}.cc-service-icon{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:#fff;color:var(--cc-blue);font-size:23px;font-weight:900;box-shadow:0 4px 12px rgba(26,63,99,.06)}.cc-pro .cc-service-icon{color:var(--cc-blue)}.cc-service-block p{margin:0 0 12px;color:#687b8e;font-size:13px;line-height:1.5;max-width:820px}.cc-share{display:flex;justify-content:space-between;align-items:center;gap:15px;border:1px solid #e0e8f0;background:#fff;border-radius:14px;padding:15px 17px;margin:16px 0 24px}.cc-share>div:first-child{display:flex;flex-direction:column}.cc-share>div:first-child strong{font-size:14px;color:#29455e;margin-top:2px}.cc-share-icons{display:flex;gap:7px}.cc-share-icons a,.cc-share-icons button{width:38px;height:38px;border:0;border-radius:10px;background:#edf4fb;color:#315673!important;display:grid;place-items:center;text-decoration:none!important;font-size:12px;font-weight:900;cursor:pointer}.cc-share-icons a:hover,.cc-share-icons button:hover{background:#dfefff;color:#126fc5!important}.cc-toast{position:fixed;right:18px;bottom:18px;z-index:9999;background:#0a2c50;color:#fff;padding:10px 13px;border-radius:10px;font-size:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s}.cc-toast.show{opacity:1;transform:none}
@media(max-width:1050px){.cc-layout{grid-template-columns:1fr}.cc-preview-card{position:relative;top:auto}.cc-canvas-wrap{height:460px}.cc-how-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.cc-hero{padding:20px;border-radius:15px}.cc-title{font-size:24px}.cc-layout{gap:12px}.cc-step,.cc-preview-card{border-radius:14px;padding:14px}.cc-ratios{grid-template-columns:repeat(3,1fr)}.cc-canvas-wrap{height:360px}.cc-how-grid{grid-template-columns:1fr}.cc-service-block{grid-template-columns:44px 1fr;padding:16px}.cc-service-icon{width:44px;height:44px}.cc-share{align-items:flex-start;flex-direction:column}.cc-share-icons{width:100%}.cc-share-icons a,.cc-share-icons button{flex:1}.cc-output-size{grid-template-columns:1fr 34px 1fr}}
@media(max-width:430px){.cc-canvas-wrap{height:300px}.cc-coords{grid-template-columns:1fr 1fr}.cc-tool-buttons button span{display:none}.cc-save-row{flex-direction:column}.cc-upload-actions{display:grid}.cc-upload-actions .cc-btn{width:100%}}

.cc-service-icon svg{width:27px;height:27px;display:block}.cc-share-icons svg{width:20px;height:20px;display:block}.cc-social-tg,.cc-social-vk,.cc-social-ok,.cc-social-copy{color:#315673!important}.cc-canvas-wrap canvas.cc-cursor-move{cursor:move}.cc-canvas-wrap canvas.cc-cursor-resize{cursor:nwse-resize}

/* CropConv 1.0.3 — единая визуальная система конвертеров IT'S NEW */
.cropconv .cc-btn{min-height:44px;padding:0 18px;border-radius:10px;line-height:1.2}
.cropconv .cc-upload-actions{align-items:stretch}
.cropconv .cc-upload-actions .cc-btn{width:146px;min-width:146px;min-height:44px}
.cropconv .cc-save-row .cc-btn{min-height:44px}
.cropconv .cc-tool-buttons button{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.cropconv .cc-tool-buttons button svg{width:17px;height:17px;flex:0 0 17px}

.cropconv .cc-coords{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cropconv .cc-coords label,.cropconv .cc-output-size label{min-height:44px;overflow:visible}
.cropconv .cc-coords span,.cropconv .cc-output-size span{display:flex;align-items:center;align-self:stretch;flex:0 0 72px;min-width:72px;padding:0 8px 0 10px;font-size:11px;white-space:nowrap;background:#f8fbfe;border-right:1px solid #edf2f7;color:#6c7f92}
.cropconv .cc-coords input,.cropconv .cc-output-size input{height:42px;min-width:0;padding:8px 9px;font-size:13px;background:#fff}
.cropconv .cc-output-size{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:8px}
.cropconv .cc-output-size button{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;display:grid;place-items:center;color:#526b82;border-radius:10px}
.cropconv .cc-output-size button svg{width:21px;height:21px;display:block}
.cropconv .cc-output-size button.locked{background:#eaf5ff;border-color:#72afe5;color:#0875cf;box-shadow:inset 0 0 0 1px rgba(8,117,207,.08)}
.cropconv .cc-output-size em{padding:0 9px 0 4px}
.cropconv .cc-empty>span svg{width:27px;height:27px;display:block}

/* Блоки — как в StencilConv / DotConv */
.cropconv .cc-service-block{grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:18px;padding:22px 24px;border-radius:16px}
.cropconv .cc-service-block.cc-pro{background:#f5f9fd;border-color:#d9e6f2}
.cropconv .cc-service-block.cc-question{background:linear-gradient(135deg,#0a2a52 0%,#0c396d 100%);border-color:#123f72;box-shadow:0 10px 28px rgba(8,42,83,.11)}
.cropconv .cc-service-copy{min-width:0}
.cropconv .cc-service-block .cc-service-title{margin:3px 0 8px;font-size:20px}
.cropconv .cc-service-block p{margin:0;max-width:820px}
.cropconv .cc-service-action{display:flex;align-items:center;justify-content:flex-end}
.cropconv .cc-service-action .cc-btn{min-width:156px;white-space:nowrap}
.cropconv .cc-question small{color:#79bcfa}
.cropconv .cc-question .cc-service-title{color:#fff}
.cropconv .cc-question p{color:#c9dced}
.cropconv .cc-question .cc-service-icon{background:rgba(255,255,255,.1);color:#62b9ff;box-shadow:none;border:1px solid rgba(255,255,255,.12)}
.cropconv .cc-question .cc-btn-primary{background:linear-gradient(135deg,#1686e5,#0d9bea);box-shadow:0 7px 18px rgba(0,120,220,.28)}
.cropconv .cc-pro .cc-service-icon{background:#fff;color:var(--cc-blue);border:1px solid #d9e6f2}

.cropconv .cc-share{background:#f3f9ff;border-color:#d9e8f5;padding:18px 20px;min-height:82px}
.cropconv .cc-share-copy{display:flex;flex-direction:column;min-width:0}
.cropconv .cc-share-copy small{color:#5981a6}
.cropconv .cc-share-copy strong{font-size:15px;color:#183b5d;margin-top:3px}
.cropconv .cc-share-copy span{font-size:12px;color:#73879b;margin-top:4px}
.cropconv .cc-share-icons{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.cropconv .cc-share-icons a,.cropconv .cc-share-icons button{width:42px;height:42px;flex:0 0 42px;border:1px solid #d9e7f4;background:#fff;border-radius:11px;box-shadow:0 2px 7px rgba(28,64,99,.03)}
.cropconv .cc-share-icons a:hover,.cropconv .cc-share-icons button:hover{background:#edf7ff;border-color:#a9cdeb;transform:translateY(-1px)}
.cropconv .cc-social-wa{color:#315673!important}

@media(max-width:820px){
  .cropconv .cc-service-block{grid-template-columns:52px minmax(0,1fr);align-items:start}
  .cropconv .cc-service-action{grid-column:2;justify-content:flex-start}
}
@media(max-width:680px){
  .cropconv .cc-upload-actions .cc-btn{width:auto;min-width:132px;flex:1 1 132px}
  .cropconv .cc-service-block{grid-template-columns:44px minmax(0,1fr);gap:13px;padding:17px}
  .cropconv .cc-service-action{grid-column:1/-1}
  .cropconv .cc-service-action .cc-btn{width:100%}
  .cropconv .cc-share{gap:13px}
  .cropconv .cc-share-icons{width:100%;display:grid;grid-template-columns:repeat(5,42px);justify-content:start}
}
@media(max-width:520px){
  .cropconv .cc-coords{grid-template-columns:1fr}
  .cropconv .cc-coords span{flex-basis:72px;min-width:72px}
  .cropconv .cc-output-size{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);align-items:end}
  .cropconv .cc-output-size label{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:18px 34px;min-height:58px;padding:4px 6px 3px;overflow:hidden}
  .cropconv .cc-output-size span{grid-column:1/-1;display:block;min-width:0;flex-basis:auto;align-self:auto;padding:0 3px;background:transparent;border:0;font-size:10px;line-height:18px}
  .cropconv .cc-output-size input{height:34px;padding:3px 4px;font-size:13px}
  .cropconv .cc-output-size em{align-self:center;padding:0 3px 0 2px}
  .cropconv .cc-output-size button{margin-bottom:3px}
}
@media(max-width:430px){
  .cropconv .cc-upload-actions .cc-btn{width:100%;min-width:0}
  .cropconv .cc-share-icons{grid-template-columns:repeat(5,minmax(0,1fr))}
  .cropconv .cc-share-icons a,.cropconv .cc-share-icons button{width:100%;min-width:0}
}

/* CropConv 1.0.4 — выравнивание с фирменной синей палитрой IT'S NEW */
/* Три способа загрузки всегда имеют одинаковую геометрию */
.cropconv .cc-upload-actions{display:flex;align-items:stretch;justify-content:center;gap:8px}
.cropconv .cc-upload-actions .cc-btn{
    -webkit-appearance:none;
    appearance:none;
    box-sizing:border-box;
    flex:0 0 152px;
    width:152px;
    min-width:152px;
    max-width:152px;
    height:46px;
    min-height:46px;
    padding:0 12px;
    margin:0;
    white-space:nowrap;
    line-height:1;
}

/* Без оранжевых акцентов: служебные блоки используют только синие/нейтральные цвета сайта */
.cropconv .cc-service-block.cc-pro{
    background:#f5f9fd;
    border-color:#d9e6f2;
}
.cropconv .cc-pro .cc-service-icon{
    background:#fff;
    color:var(--cc-blue);
    border:1px solid #d9e6f2;
}

/* Поделиться — непосредственно под рабочей частью конвертера */
.cropconv .cc-share{margin:16px 0 22px}

/* Все иконки соцсетей одного фирменного цвета, без брендовых разноцветных акцентов */
.cropconv .cc-social-tg,
.cropconv .cc-social-vk,
.cropconv .cc-social-ok,
.cropconv .cc-social-wa,
.cropconv .cc-social-copy{
    color:#315673!important;
}
.cropconv .cc-share-icons a:hover,
.cropconv .cc-share-icons button:hover{
    color:#126fc5!important;
}

@media(max-width:680px){
    .cropconv .cc-upload-actions .cc-btn{
        flex:1 1 0;
        width:auto;
        min-width:0;
        max-width:none;
        height:46px;
    }
}
@media(max-width:430px){
    .cropconv .cc-upload-actions{display:grid;grid-template-columns:1fr;gap:8px}
    .cropconv .cc-upload-actions .cc-btn{width:100%;max-width:none}
}


/* CropConv 1.0.5 — круговая обрезка */
.cropconv .cc-ratios i.circle{width:20px;height:20px;border-radius:50%;}
.cropconv .cc-field select:disabled{background:#f3f7fb;color:#5e7489;cursor:not-allowed;}
.cropconv .cc-output-size button:disabled{opacity:.75;cursor:not-allowed;}