/* Утилита «Банка без фона» v3 (2026-10-20): шаги Исходник → Как генерить → Результат */
.main.pc{ --pc-card:#1A1B1E; --pc-ctl:#26272B; --pc-ctl-h:#2F3034; --pc-fg:#F2F2F3; --pc-fg2:#C9CACE; --pc-mute:#8B8C92; --pc-mute2:#5E5F65; --pc-acc:#FF6B3D; overflow-y:auto; }
.pc .pc-wrap{ max-width:980px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.pc .pc-head{ margin-bottom:4px; }
.pc .pc-sub{ color:var(--pc-mute); font-size:13px; margin-top:6px; }
.pc .pc-nokey{ background:rgba(245,184,61,.08); box-shadow:inset 0 0 0 1px rgba(245,184,61,.3); color:#FFD680; border-radius:14px; padding:11px 14px; font-size:13px; }
.pc .pc-nokey a{ color:#FFD680; }
.pc .pc-step{ background:var(--pc-card); border-radius:20px; padding:16px; }
.pc .pc-step[hidden]{ display:none; }
.pc .pc-sh{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.pc .pc-sh .n{ width:24px; height:24px; border-radius:8px; background:var(--pc-acc); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:700; }
.pc .pc-sh b{ font-size:15px; font-weight:600; }
.pc .pc-tabs{ margin-left:auto; display:inline-flex; background:var(--pc-ctl); border-radius:11px; padding:3px; gap:2px; }
.pc .pc-tabs button{ border:0; background:transparent; color:var(--pc-mute); font:500 12.5px var(--sans, inherit); height:28px; padding:0 12px; border-radius:8px; cursor:pointer; }
.pc .pc-tabs button.on{ background:var(--pc-ctl-h); color:var(--pc-fg); }
.pc .pc-src{ display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:14px; align-items:stretch; }
.pc .pc-src-pick{ min-width:0; }
.pc [hidden]{ display:none !important; }
.pc .pc-drop{ display:flex; align-items:center; gap:14px; border:1.5px dashed #3A3B41; border-radius:16px; padding:20px; color:var(--pc-mute); cursor:pointer; height:100%; min-height:200px; }
.pc .pc-drop:hover,.pc .pc-drop.over{ border-color:var(--pc-acc); background:rgba(255,107,61,.04); }
.pc .pc-drop-ic{ width:48px; height:48px; border-radius:14px; background:var(--pc-ctl); display:grid; place-items:center; flex:0 0 auto; color:var(--pc-fg); }
.pc .pc-drop-t{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; line-height:1.45; }
.pc .pc-drop-t b{ color:var(--pc-fg); font-size:15px; font-weight:600; }
.pc .pc-search{ display:flex; align-items:center; gap:8px; height:36px; background:#0F1012; border-radius:11px; padding:0 12px; color:var(--pc-mute); box-shadow:inset 0 0 0 1px #2A2B30; }
.pc .pc-search input,.pc-modal .pc-search input{ flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--pc-fg, #F2F2F3); font:13px var(--sans, inherit); }
.pc .pc-olist,.pc-modal .pc-olist{ margin-top:8px; max-height:250px; overflow-y:auto; display:flex; flex-direction:column; gap:3px; }
.pc-modal .pc-olist.tall{ max-height:min(460px, calc(100vh - 220px)); }
.pc-orow{ display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:10px; align-items:center; padding:6px 8px; border-radius:11px; cursor:pointer; border:0; background:transparent; color:#F2F2F3; text-align:left; font-family:inherit; width:100%; }
.pc-orow:hover{ background:#151619; }
.pc-orow.on{ background:#1D1A19; box-shadow:inset 0 0 0 1.5px #FF6B3D; }
.pc-orow .th{ width:40px; height:40px; border-radius:9px; background:#0A0A0B center/contain no-repeat; }
.pc-orow .nm{ font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-orow .sb{ font-size:11px; color:#8B8C92; margin-top:2px; }
.pc-orow .st{ font-size:10.5px; color:#8B8C92; white-space:nowrap; }
.pc-orow .st.active{ color:#86EFBA; }
.pc .pc-empty,.pc-modal .pc-empty{ color:#8B8C92; font-size:12.5px; padding:14px; text-align:center; }
.pc .pc-src-prev{ border-radius:16px; background:#0F1012; box-shadow:inset 0 0 0 1px #2A2B30; display:flex; flex-direction:column; overflow:hidden; min-height:200px; }
.pc .pc-src-prev .im{ flex:1; display:grid; place-items:center; padding:10px; min-height:170px; position:relative; }
.pc .pc-src-prev img{ max-width:100%; max-height:190px; object-fit:contain; display:block; }
.pc .pc-src-prev .cap{ padding:8px 10px; border-top:1px solid rgba(255,255,255,.06); display:flex; flex-direction:column; gap:6px; }
.pc .pc-src-prev .cap .nm{ font-size:12px; color:var(--pc-fg2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc .pc-src-prev .cap .acts{ display:flex; gap:6px; flex-wrap:wrap; }
.pc .pc-src-prev .boxed{ position:absolute; left:8px; top:8px; font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:6px; background:rgba(255,107,61,.9); color:#fff; }
.pc .pc-modes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.pc .pc-mode{ display:flex; gap:11px; align-items:flex-start; text-align:left; border:0; border-radius:14px; padding:12px; background:#0F1012; color:var(--pc-fg); cursor:pointer; box-shadow:inset 0 0 0 1px #2A2B30; font-family:inherit; }
.pc .pc-mode:hover{ background:#151619; }
.pc .pc-mode.on{ box-shadow:inset 0 0 0 1.5px var(--pc-acc); background:#1D1A19; }
.pc .pc-mode[disabled]{ opacity:.45; cursor:not-allowed; }
.pc .pc-mode .r{ width:16px; height:16px; border-radius:50%; border:1.5px solid #4A4B51; flex:0 0 auto; margin-top:2px; }
.pc .pc-mode.on .r{ border:4.5px solid var(--pc-acc); }
.pc .pc-mode .mt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.pc .pc-mode b{ font-size:13.5px; font-weight:600; }
.pc .pc-mode small{ color:var(--pc-mute); font-size:11.5px; line-height:1.4; }
.pc .pc-go{ display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap; }
.pc .pc-go-hint{ color:var(--pc-mute); font-size:12.5px; }
.pc .pc-btn,.pc-modal .pc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:34px; padding:0 14px; border-radius:11px; border:0; background:var(--pc-ctl, #26272B); color:var(--pc-fg, #F2F2F3); font:500 13px var(--sans, inherit); cursor:pointer; white-space:nowrap; text-decoration:none; }
.pc .pc-btn:hover{ background:var(--pc-ctl-h); }
.pc .pc-btn.cta,.pc-modal .pc-btn.cta{ background:var(--pc-acc, #FF6B3D); color:#fff; font-weight:600; }
.pc .pc-btn.cta:hover{ background:#ff7d52; }
.pc .pc-btn.ok{ background:rgba(61,214,140,.16); color:#86EFBA; font-weight:600; }
.pc .pc-btn.ok:hover{ background:rgba(61,214,140,.24); }
.pc .pc-btn.ghost,.pc-modal .pc-btn.ghost{ background:transparent; color:var(--pc-mute, #8B8C92); }
.pc .pc-btn.ghost:hover{ background:var(--pc-ctl); color:var(--pc-fg); }
.pc .pc-btn.sm{ height:28px; padding:0 10px; border-radius:9px; font-size:12px; }
.pc .pc-btn.lg{ height:42px; padding:0 22px; font-size:14px; border-radius:12px; }
.pc .pc-btn[disabled],.pc-modal .pc-btn[disabled]{ opacity:.45; cursor:not-allowed; }
.pc .pc-res{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start; }
.pc .pc-res-prev{ position:relative; aspect-ratio:1/1; max-width:520px; width:100%; border-radius:14px; overflow:hidden; display:grid; place-items:center; background-color:#fff; background-image:linear-gradient(45deg,#d9d9de 25%,transparent 25%),linear-gradient(-45deg,#d9d9de 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d9d9de 75%),linear-gradient(-45deg,transparent 75%,#d9d9de 75%); background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0; }
.pc .pc-res-prev.orig{ background:#0A0A0B; }
.pc .pc-res-prev img{ width:100%; height:100%; object-fit:contain; display:block; }
.pc .pc-res-prev .dim{ position:absolute; inset:0; background:rgba(10,10,11,.6); display:grid; place-items:center; color:#fff; font-size:13px; text-align:center; gap:10px; align-content:center; }
.pc .pc-ba{ position:absolute; right:8px; top:8px; display:flex; background:rgba(0,0,0,.62); border-radius:9px; padding:2px; }
.pc .pc-ba button{ border:0; background:transparent; color:#cfd0d4; font:600 11px var(--sans, inherit); padding:4px 9px; border-radius:7px; cursor:pointer; }
.pc .pc-ba button.on{ background:#fff; color:#111; }
.pc .pc-spin{ width:32px; height:32px; border-radius:50%; border:3px solid rgba(255,255,255,.25); border-top-color:var(--pc-acc); animation:pcspin .8s linear infinite; margin:0 auto; }
@keyframes pcspin{ to{ transform:rotate(360deg); } }
.pc .pc-res-side{ display:flex; flex-direction:column; gap:10px; }
.pc .pc-res-side .grp{ background:#0F1012; border-radius:14px; padding:12px; box-shadow:inset 0 0 0 1px #2A2B30; display:flex; flex-direction:column; gap:8px; }
.pc .pc-res-side .grp .t{ font-size:12px; color:var(--pc-mute); }
.pc .pc-res-side .pc-btn{ width:100%; }
.pc .pc-res-side .cur{ display:flex; gap:10px; align-items:center; }
.pc .pc-res-side .cur .th{ width:44px; height:44px; border-radius:9px; background:#0A0A0B center/contain no-repeat; flex:0 0 auto; }
.pc .pc-res-side .cur .nm{ font-size:13px; font-weight:500; line-height:1.3; }
.pc .pc-res-side .cur .sb{ font-size:11px; color:var(--pc-mute); }
.pc .pc-res-st{ font-size:12.5px; color:var(--pc-mute); }
.pc .pc-res-st.ok{ color:#86EFBA; } .pc .pc-res-st.err{ color:#FF9E9E; }
.pc .done-note{ font-size:12.5px; color:#86EFBA; line-height:1.45; }
.pc-modal{ position:fixed; inset:0; z-index:10040; background:rgba(0,0,0,.6); display:grid; place-items:center; padding:20px; }
.pc-modal[hidden]{ display:none; }
.pc-modal-card{ background:#141518; border-radius:20px; width:min(860px,100%); max-height:calc(100vh - 40px); display:flex; flex-direction:column; overflow:hidden; color:#F2F2F3; font-family:var(--sans, inherit); }
.pc-modal-card.sm{ width:min(520px,100%); }
.pc-modal-h{ display:flex; align-items:baseline; gap:10px; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.07); }
.pc-modal-h span{ color:#8B8C92; font-size:12.5px; flex:1; }
.pc-modal-p{ padding:12px 14px 14px; }
.pc-modal .pc-search{ display:flex; align-items:center; gap:8px; height:36px; background:#0F1012; border-radius:11px; padding:0 12px; color:#8B8C92; box-shadow:inset 0 0 0 1px #2A2B30; }
.pc-x{ border:0; background:transparent; color:#8B8C92; font-size:20px; cursor:pointer; }
.pc-modal-b{ flex:1; min-height:0; display:grid; place-items:center; padding:14px; background:#0A0A0B; }
.pc-boxwrap{ position:relative; display:inline-block; cursor:crosshair; touch-action:none; line-height:0; }
.pc-boxwrap img{ display:block; max-width:min(820px, calc(100vw - 80px)); max-height:calc(100vh - 220px); user-select:none; -webkit-user-drag:none; }
.pc-rect{ position:absolute; border:2px solid #FF6B3D; background:rgba(255,107,61,.10); box-shadow:0 0 0 9999px rgba(0,0,0,.5); pointer-events:none; }
.pc-modal-f{ display:flex; gap:8px; padding:12px 16px; border-top:1px solid rgba(255,255,255,.07); }
@media (max-width:820px){ .pc .pc-src,.pc .pc-res{ grid-template-columns:1fr; } .pc .pc-modes{ grid-template-columns:1fr; } .pc .pc-tabs{ margin-left:0; } }
.pc-orow .sb .pc-new{ color:#16A34A; font-weight:600; }