*{box-sizing:border-box}
:root{
 --topbar-h:104px;--footer-h:26px;--right-w:clamp(300px,20vw,370px);
 --bg:#03050b;--panel:#070914;--panel2:#0b0d18;--card:#0d101d;--card2:#111522;--field:#111522;
 --line:#292044;--line-strong:#8246d6;--text:#f8f7ff;--muted:#9792aa;--muted2:#6d6982;
 --pink:#ff35cf;--purple:#9b45ff;--blue:#2ba8ff;--good:#28dba0;--warning:#ffd04e;
 --accent:linear-gradient(90deg,#ff35cf,#9b45ff 52%,#2ba8ff);--radius:14px;
 --shadow:0 16px 44px rgba(0,0,0,.38);--glow:0 0 28px rgba(155,69,255,.16)
}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:13px}
button,input{font:inherit}button{transition:.18s ease}[hidden]{display:none!important}@keyframes spin{to{transform:rotate(360deg)}}
.app{height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(circle at 48% 44%,rgba(35,21,60,.20),transparent 48%),linear-gradient(180deg,#04060d,#03050a)}
/* LOGIN */
.auth-gate{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 20% 20%,#2b1046 0,transparent 36%),radial-gradient(circle at 80% 75%,#07314a 0,transparent 34%),#04050a}.auth-shell{width:min(1200px,100%);min-height:660px;display:grid;grid-template-columns:1.1fr .9fr;border:1px solid #302449;border-radius:30px;overflow:hidden;background:#080a12;box-shadow:0 40px 120px #000b}.auth-art{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;overflow:hidden;background:linear-gradient(145deg,#0b0d18,#05070e)}.auth-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(132,72,210,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(43,168,255,.04) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(circle at center,#000,transparent 82%)}.auth-glow{position:absolute;width:430px;height:430px;border-radius:50%;filter:blur(70px);opacity:.24}.glow-a{background:#ff28c8;left:-120px;top:-100px}.glow-b{background:#1e8fff;right:-120px;bottom:-120px}.auth-logo-full{position:relative;width:min(640px,92%);height:auto;display:block;border-radius:24px;overflow:hidden;border:1px solid rgba(117,79,170,.32);box-shadow:0 22px 46px rgba(0,0,0,.28),0 0 24px rgba(164,63,255,.14)}.auth-tagline{position:relative;letter-spacing:.22em;text-transform:uppercase;color:#aaa5bc;margin:18px 0 0}.auth-badges{position:relative;display:flex;gap:8px;margin-top:26px}.auth-badges span{padding:8px 12px;border:1px solid #37294e;border-radius:999px;color:#bdb8ca;background:#0c0e17b8;font-size:11px}.auth-panel{display:grid;place-items:center;padding:46px}.auth-card{width:min(420px,100%)}.eyebrow{font-size:10px;letter-spacing:.24em;color:#c6a9ff}.auth-card h2{font-size:30px;margin:10px 0 6px}.auth-card>p{color:var(--muted);margin:0 0 28px}.login-form{display:grid;gap:16px}.login-form label{display:grid;gap:8px;color:#d0cddd}.login-form input{width:100%;padding:13px 14px;border-radius:12px;border:1px solid #342945;background:#0c0f18;color:#fff;outline:none}.login-form input:focus{border-color:#9a55ff;box-shadow:0 0 0 3px rgba(154,85,255,.12)}.password-wrap{position:relative}.password-wrap input{padding-right:48px}.password-wrap button{position:absolute;right:6px;top:6px;width:36px;height:36px;border:0;background:transparent;color:#aaa4b9}.primary-action{border:0;border-radius:12px;padding:14px 18px;color:white;font-weight:900;background:var(--accent);box-shadow:0 10px 28px rgba(157,60,255,.20)}.auth-message{margin-top:14px;padding:12px;border-radius:12px;background:#341623;color:#ffd7df;border:1px solid #703042}.auth-foot{margin-top:24px;padding-top:18px;border-top:1px solid #262032;display:flex;justify-content:space-between;gap:12px;color:#777287;font-size:11px}.auth-foot a{color:#bbb4ff;text-decoration:none}
/* HEADER MKP LANGUAGE */
.topbar{height:var(--topbar-h);flex:0 0 var(--topbar-h);display:grid;grid-template-columns:minmax(420px,1.2fr) auto minmax(240px,.8fr);align-items:center;gap:14px;padding:0 16px;border-bottom:1px solid rgba(155,69,255,.28);background:linear-gradient(180deg,rgba(6,8,17,.99),rgba(4,6,13,.99));box-shadow:0 8px 30px rgba(0,0,0,.42),inset 0 -1px rgba(255,255,255,.02);z-index:20}.brand-zone{display:flex;align-items:center;gap:14px;min-width:0}.brand-logo-full{width:min(360px,100%);height:auto;display:block;border-radius:18px;overflow:hidden;border:1px solid rgba(90,66,126,.42);box-shadow:0 10px 26px rgba(0,0,0,.20),0 0 18px rgba(155,69,255,.12)}.dev-pill{font-size:9px;padding:5px 8px;border-radius:999px;color:#f0dcff;border:1px solid rgba(155,69,255,.55);background:linear-gradient(180deg,#2a1740,#171025);letter-spacing:.07em;white-space:nowrap}.topnav{display:flex;align-items:center;justify-content:center;gap:8px}.nav-btn{height:42px;display:flex;align-items:center;gap:8px;padding:0 16px;border:1px solid transparent;border-radius:10px;background:transparent;color:#aca8ba;text-decoration:none;cursor:pointer}.nav-btn.active{color:#fff;border-color:#8246d6;background:linear-gradient(180deg,#26183c,#171127);box-shadow:0 0 18px rgba(155,69,255,.12),inset 0 0 0 1px rgba(255,53,207,.05)}.nav-btn:hover{color:white;border-color:#4f356f}.user-zone{justify-self:end}.user-card{display:flex;align-items:center;gap:10px;min-width:240px;padding:7px 10px;border:1px solid #2c2441;border-radius:12px;background:linear-gradient(180deg,#0e1220,#090c15);color:#fff;text-align:left}.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:900;border:1px solid #8747dc;background:linear-gradient(135deg,#bd35ff,#258cff);box-shadow:0 0 16px rgba(155,69,255,.17)}.user-copy{flex:1;min-width:0}.user-copy b{display:block;font-size:12px}.user-copy small{display:block;color:#868097;font-size:9px;margin-top:3px}.online-dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 10px rgba(40,219,160,.75)}
.account-menu{position:fixed;right:16px;top:76px;z-index:80;width:300px;padding:14px;border:1px solid #34284a;border-radius:15px;background:#0b0e17;box-shadow:0 22px 70px #000c}.account-head{display:grid;gap:3px;padding-bottom:10px;border-bottom:1px solid #282034}.account-head span{font-size:11px;color:#8e899b}.account-meta{display:grid;grid-template-columns:76px 1fr;gap:8px;padding:12px 0;font-size:11px}.account-meta span{color:#817c8f}.account-menu button{width:100%;margin-top:7px;padding:9px;border-radius:9px;border:1px solid #352a46;background:#111521;color:#ddd9e8}.account-menu .danger{color:#ff9dac;border-color:#58303b}
/* MAIN */
.main{flex:1;min-height:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) var(--right-w);overflow:hidden}.panel{min-height:0;padding:10px;background:linear-gradient(180deg,rgba(6,8,16,.99),rgba(4,6,12,.99));overflow:auto;scrollbar-width:thin;scrollbar-color:#51316e transparent}.panel.left{border-right:1px solid rgba(155,69,255,.18)}.panel.right{border-left:1px solid rgba(43,168,255,.16)}.section-head{display:flex;align-items:center;gap:9px;margin:4px 2px 7px;color:#e8e4ef}.section-head.second{margin-top:12px}.section-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(180deg,#24163a,#12101d);color:#d278ff;border:1px solid #633c88;box-shadow:inset 0 0 12px rgba(155,69,255,.05)}.section-head b{font-size:11px;letter-spacing:.06em;text-transform:uppercase}.section-head small{display:block;color:#746e83;font-size:8.5px;margin-top:1px}.status{margin-left:auto;font-size:9px;padding:4px 7px;border-radius:999px;border:1px solid #4b3f5e}.status.ok{color:#58e6b2;border-color:#1b6c53;background:#0c2921}.status.bad{color:#ff9cab;border-color:#703040}.tool-card{padding:9px;border:1px solid #2a2239;border-radius:var(--radius);background:linear-gradient(180deg,rgba(13,16,29,.97),rgba(8,11,20,.98));box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 8px 24px rgba(0,0,0,.15)}.glow-card{border-color:#5e347f;box-shadow:inset 0 0 24px rgba(155,69,255,.035),0 0 22px rgba(155,69,255,.035)}.primary{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 10px;border:1px solid #d34fff;border-radius:9px;background:linear-gradient(90deg,#ef3fc6,#a342ff 52%,#268cff);color:#fff;font-weight:900;cursor:pointer;box-shadow:0 10px 24px rgba(155,69,255,.16),inset 0 1px rgba(255,255,255,.20)}.primary:hover{filter:brightness(1.06);transform:translateY(-1px)}.input-status{display:flex;align-items:center;gap:8px;margin-top:8px;padding:7px;border:1px solid #282134;border-radius:9px;background:#090c15}.thumb-placeholder{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;color:#6e6880;background:#060810;border:1px solid #2a2237;font-size:9px}.input-status b{display:block;font-size:9px}.input-status small{font-size:8px;color:#726d80}.stack-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:7px}.small-btn{min-height:32px;padding:7px 8px;border:1px solid #332941;background:linear-gradient(180deg,#111522,#0c101a);color:#d7d3e0;border-radius:9px;cursor:pointer}.small-btn:hover{border-color:#7b47a5;background:#171226}.featured{border-color:#6d3c93;background:linear-gradient(180deg,#23133a,#141021)}.metric{display:flex;justify-content:space-between;padding:6px 2px;border-bottom:1px solid #241e30;font-size:10px}.metric:last-child{border:0}.metric span{color:#817b8d}.metric b{color:#eae6f2}.info-card p{margin:2px;color:#8c8798;font-size:10px;line-height:1.45}
/* VIEWER */
.viewer-wrap{position:relative;min-width:0;min-height:0;overflow:hidden;background:radial-gradient(circle at 50% 38%,rgba(65,37,102,.17),transparent 40%),linear-gradient(135deg,#080c16,#0b0b18 52%,#120b1d);border-left:1px solid rgba(255,255,255,.015);border-right:1px solid rgba(255,255,255,.015)}.viewer-wrap:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(150,82,210,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(43,168,255,.03) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(circle at 50% 46%,#000 20%,transparent 80%)}.viewer-toolbar{position:absolute;top:12px;z-index:10;display:flex;align-items:center;gap:10px;padding:8px 11px;border:1px solid #412b5c;border-radius:10px;background:linear-gradient(180deg,rgba(17,16,29,.90),rgba(9,10,18,.94));box-shadow:0 10px 28px #0005}.viewer-toolbar.top-left{left:12px}.viewer-toolbar b{font-size:9px;color:#f2eaff;letter-spacing:.08em}.viewer-toolbar span{font-size:9px;color:#898397}.info-float{position:absolute;top:58px;left:12px;z-index:9;width:min(320px,calc(100% - 24px));padding:12px;border-radius:14px;border:1px solid rgba(117,79,170,.45);background:linear-gradient(180deg,rgba(9,11,20,.80),rgba(7,9,16,.66));backdrop-filter:blur(12px);box-shadow:0 16px 34px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.05)}.info-float-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}.info-float-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;border:1px solid rgba(121,70,171,.55);background:linear-gradient(180deg,#24163a,#12101d);color:#d278ff}.info-float-head b{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#f2eaff}.info-float-head small{display:block;color:#8e89a0;font-size:9px;margin-top:2px}.info-float-grid{display:grid;grid-template-columns:112px 1fr;gap:7px 10px;font-size:10px}.info-float-grid span{color:#8f89a0}.info-float-grid b{color:#f0eef7;word-break:break-word}.drop,.stage{position:absolute;inset:58px 12px 42px;border-radius:16px;border:1px solid #292138;background:rgba(6,8,14,.55);overflow:hidden}.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;color:#d7d3df;border-style:dashed}.drop img{width:90px;height:90px;border-radius:22px;object-fit:cover;box-shadow:0 0 30px rgba(155,69,255,.15)}.drop h2{margin:14px 0 6px;font-size:20px}.drop p{margin:0;color:#847f90}.drop button{margin-top:16px;padding:10px 16px;border-radius:9px;border:1px solid #7943a1;background:linear-gradient(180deg,#27173b,#151020);color:#fff}.stage{cursor:ew-resize;background:#0b0d14}.layer{position:absolute;inset:0;background-repeat:no-repeat;background-position:center;background-size:contain}.original{clip-path:inset(0 50% 0 0);z-index:2}.modified{z-index:1}.split{position:absolute;z-index:4;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.3)}.handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;background:white;color:#111;display:grid;place-items:center;font-weight:900}.tag{position:absolute;top:12px;z-index:5;padding:5px 8px;background:#05060acc;border:1px solid #2c2636;border-radius:7px;font-size:9px}.tag.left{left:12px}.tag.right{right:12px}.busy-pill{position:absolute;z-index:6;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:8px;align-items:center;padding:8px 12px;border-radius:999px;background:#080a12e8;border:1px solid #403052;font-size:10px}.spinner,.big-spinner{display:inline-block;border-radius:50%;border:2px solid #3c344a;border-top-color:#bf5cff;animation:spin 1s linear infinite}.spinner{width:14px;height:14px}.big-spinner{width:42px;height:42px}.meta{position:absolute;z-index:5;right:12px;bottom:12px;font-size:9px;padding:6px 8px;border-radius:8px;background:#05060acc;color:#d6d2de;border:1px solid rgba(90,70,110,.4)}
.canvas-spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:12;min-width:220px;padding:22px 26px;border-radius:18px;border:1px solid rgba(155,69,255,.48);background:rgba(7,9,20,.90);backdrop-filter:blur(12px);box-shadow:0 18px 60px rgba(0,0,0,.46),0 0 34px rgba(155,69,255,.18);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;pointer-events:none}.canvas-spinner b{font-size:13px}.canvas-spinner small{font-size:10px;color:#8d879d}.spinner-orbit{width:48px;height:48px;border-radius:50%;border:4px solid rgba(255,255,255,.10);border-top-color:#ff35cf;border-right-color:#9b45ff;border-bottom-color:#2ba8ff;animation:spin .8s linear infinite;box-shadow:0 0 22px rgba(155,69,255,.20)}
.viewer-foot{position:absolute;left:0;right:0;bottom:0;height:32px;display:flex;justify-content:space-between;align-items:center;padding:0 14px;border-top:1px solid rgba(155,69,255,.10);color:#686274;font-size:9px}
/* CONTROLS */
.controls-card{padding:7px 9px}.controls details{border-bottom:1px solid #261f31;padding:4px 0 8px}.controls summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font-size:10.5px;font-weight:800;padding:7px 0;color:#e3dfe8}.controls summary span{color:#bd67ff}.control{padding:7px 0}.control>div,.up-title{display:flex;justify-content:space-between;align-items:center;font-size:9.5px}.control label,.up-title label{color:#aaa5b4}.control output,.up-title output{font-size:9px;padding:3px 6px;border-radius:6px;background:#15101e;border:1px solid #322541;color:#e7dcff}.control input[type=range]{width:100%;height:16px;margin-top:4px;appearance:none;background:transparent}.control input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:linear-gradient(90deg,#bd42ff,#4f48a0,#25344d)}.control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;margin-top:-5px;background:#e49cff;border:2px solid #fff;box-shadow:0 0 12px rgba(192,85,255,.35)}.scale-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:7px}.scale-grid button{padding:8px;border-radius:8px;border:1px solid #30263e;background:#11141d;color:#bcb7c6}.scale-grid button.active{background:linear-gradient(135deg,#a03cff,#446cff);color:#fff;border-color:transparent;box-shadow:0 0 15px rgba(155,69,255,.12)}.upscale small{display:block;margin-top:6px;color:#625d6f;font-size:8px;text-align:center}.reset{width:100%;margin-top:10px;padding:9px;border-radius:9px;border:1px solid #31283e;background:#0e1119;color:#c8c3d0}.error{margin-top:9px;padding:9px;border-radius:9px;background:#381722;color:#ffc0ca;font-size:10px}.action-card{margin-top:10px}.action-card .small-btn{width:100%;margin-top:6px}.export-btn{border-color:#3957a3;background:linear-gradient(180deg,#121c36,#0c1326)}
.app-footer{height:var(--footer-h);flex:0 0 var(--footer-h);display:flex;justify-content:center;align-items:center;border-top:1px solid #201a2a;color:#5f5a68;font-size:8.5px}.overlay{position:fixed;inset:0;z-index:100;background:#03040ad9;display:grid;place-items:center;backdrop-filter:blur(8px)}.overlay-card{width:min(360px,calc(100vw - 30px));text-align:center;padding:28px;background:#0c0f18;border:1px solid #34284a;border-radius:18px}.modal{position:fixed;inset:0;z-index:90;background:#03040ac7;display:grid;place-items:center;padding:20px}.modal-card{position:relative;width:min(440px,100%);background:#0c0f18;border:1px solid #34284a;border-radius:20px;padding:26px;text-align:center}.modal-card img{width:90px;border-radius:20px}.modal-close{position:absolute;right:12px;top:10px;border:0;background:transparent;color:#9da2b3;font-size:28px}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left;margin-top:18px;padding-top:15px;border-top:1px solid #272132;font-size:10px}.info-grid span{color:#777184}.info-grid b{text-align:right}
@media(max-width:1260px){:root{--left-w:250px;--right-w:300px}.topbar{grid-template-columns:minmax(330px,1fr) auto minmax(220px,.7fr)}.brand-logo{width:300px}.nav-btn{padding:0 11px}}
@media(max-width:980px){html,body{overflow:auto}.app{height:auto;min-height:100vh}.topbar{height:auto;min-height:76px;grid-template-columns:1fr auto;padding:7px 12px}.brand-logo{width:290px;max-width:70vw}.topnav{grid-column:1/-1;order:3;padding-bottom:5px}.user-card{min-width:auto}.user-copy{display:none}.main{display:grid;grid-template-columns:1fr 300px;overflow:visible}.panel.left{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;border-right:0;border-bottom:1px solid rgba(155,69,255,.18)}.panel.left .section-head{display:none}.panel.left .tool-card{margin:0}.viewer-wrap{min-height:620px}.panel.right{border-left:1px solid rgba(155,69,255,.15)}}
@media(max-width:700px){.topbar{grid-template-columns:1fr auto}.brand-logo{width:235px}.dev-pill{display:none}.topnav{overflow-x:auto;justify-content:flex-start}.nav-btn{height:38px}.main{display:flex;flex-direction:column}.panel.left{display:flex;flex-direction:column;order:1}.viewer-wrap{order:2;min-height:62vh}.panel.right{order:3;border-left:0;border-top:1px solid rgba(155,69,255,.16)}.viewer-toolbar.top-right{display:none}.drop,.stage{inset:52px 8px 38px}.auth-gate{padding:0}.auth-shell{grid-template-columns:1fr;border-radius:0;min-height:100vh}.auth-art{min-height:260px;padding:28px}.auth-logo-full{width:min(520px,96%)}.auth-tagline,.auth-badges{display:none}.auth-panel{padding:26px}.app-footer{height:auto;padding:7px 10px;text-align:center}}

@media(max-width:1180px){.topbar{grid-template-columns:1fr auto}.topnav{display:none}.user-zone{justify-self:end}.main{grid-template-columns:minmax(0,1fr) 320px}.brand-title{font-size:24px}.brand-mark{width:60px;height:60px;flex-basis:60px}}
@media(max-width:860px){html,body{overflow:auto}.app{height:auto;min-height:100dvh;overflow:visible}.topbar{position:sticky;top:0;height:auto;min-height:76px;grid-template-columns:1fr auto;padding:8px 10px}.brand-mark{width:52px;height:52px;flex-basis:52px}.brand-title{font-size:21px}.brand-subtitle{font-size:7px;letter-spacing:.20em}.dev-pill{display:none}.user-card{min-width:0}.user-copy{display:none}.main{display:flex;flex-direction:column;overflow:visible}.viewer-wrap{min-height:62vh}.panel.right{border-left:0;border-top:1px solid rgba(43,168,255,.16);overflow:visible}.app-footer{position:static}.viewer-toolbar{font-size:9px}}
@media(max-width:560px){.brand-title{font-size:19px}.brand-subtitle{display:none}.brand-mark{width:46px;height:46px;flex-basis:46px}.user-card{padding:6px}.viewer-wrap{min-height:56vh}.panel.right{padding:8px}.canvas-spinner{min-width:190px;padding:18px}.auth-shell{display:block;min-height:0}.auth-art{padding:24px}.auth-logo-full{width:min(520px,96%)}}

@media(max-width:1180px){.topbar{grid-template-columns:1fr auto}.topnav{display:none}.user-zone{justify-self:end}.main{grid-template-columns:minmax(0,1fr) 320px}.brand-logo-full{width:min(320px,100%)}}
@media(max-width:860px){.info-float{position:static;width:auto;margin:52px 12px 0}.drop,.stage{inset:142px 8px 38px}.viewer-wrap{padding-top:0}.brand-logo-full{width:min(260px,100%)}.app{height:auto;min-height:100dvh;overflow:visible}.topbar{position:sticky;top:0;height:auto;min-height:76px;grid-template-columns:1fr auto;padding:8px 10px}.dev-pill{display:none}.user-card{min-width:0}.user-copy{display:none}.main{display:flex;flex-direction:column;overflow:visible}.viewer-wrap{min-height:70vh}.panel.right{border-left:0;border-top:1px solid rgba(43,168,255,.16);overflow:visible}.app-footer{position:static}.viewer-toolbar{font-size:9px}}
@media(max-width:560px){.brand-logo-full{width:min(220px,100%)}.info-float-grid{grid-template-columns:1fr}.info-float-grid span{margin-top:4px}.drop,.stage{inset:186px 8px 38px}.meta{left:50%;right:auto;transform:translateX(-50%);max-width:calc(100% - 20px);text-align:center}}

.tag{display:none!important}.busy-pill{bottom:22px}.info-float{border-radius:16px}.auth-card{width:min(420px,100%);padding:8px 0}.auth-art{gap:4px}


/* v0.4.17 — pulido final de cabecera, procesamiento y comparador */
.topbar{height:var(--topbar-h);flex-basis:var(--topbar-h);grid-template-columns:minmax(380px,1.2fr) auto minmax(230px,.8fr);padding:0 16px;overflow:hidden}
.brand-zone{height:100%;display:flex;align-items:center;gap:14px;overflow:hidden}
.brand-logo-full{width:286px!important;max-width:32vw;height:auto!important;max-height:88px;object-fit:contain;border-radius:18px;display:block;flex:0 0 auto}
.dev-pill{flex:0 0 auto}
.topnav{gap:8px;white-space:nowrap}
.processing-chip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 11px;border-radius:10px;border:1px solid rgba(155,69,255,.48);background:linear-gradient(180deg,rgba(34,20,56,.92),rgba(16,12,28,.94));color:#eadfff;font-size:10px;font-weight:700;box-shadow:0 0 18px rgba(155,69,255,.12)}
.processing-chip[hidden]{display:none!important}
.processing-chip i{width:10px;height:10px;border-radius:50%;border:2px solid rgba(255,255,255,.20);border-top-color:#ff35cf;border-right-color:#2ba8ff;animation:spin .75s linear infinite}

/* Comparador con identidad Mejora MAX */
.split{width:3px;background:linear-gradient(180deg,#ff35cf 0%,#a542ff 48%,#2ba8ff 100%);box-shadow:0 0 16px rgba(155,69,255,.65),0 0 5px rgba(43,168,255,.45)}
.handle{width:36px;height:36px;border-radius:50%;background:#0b0d16;color:#fff;border:2px solid transparent;background-image:linear-gradient(#0b0d16,#0b0d16),linear-gradient(135deg,#ff35cf,#9b45ff 52%,#2ba8ff);background-origin:border-box;background-clip:padding-box,border-box;box-shadow:0 0 20px rgba(155,69,255,.45);font-size:0}
.handle:before,.handle:after{content:"";position:absolute;top:50%;width:7px;height:7px;border-top:2px solid #fff;border-right:2px solid #fff}
.handle:before{left:8px;transform:translateY(-50%) rotate(-135deg)}
.handle:after{right:8px;transform:translateY(-50%) rotate(45deg)}

/* Procesamiento: blur del espacio de trabajo y spinner central */
.process-overlay{position:fixed;left:0;right:0;top:var(--topbar-h);bottom:0;z-index:85;display:grid;place-items:center;background:rgba(3,4,10,.28);backdrop-filter:blur(9px) saturate(.72);-webkit-backdrop-filter:blur(9px) saturate(.72)}
.process-overlay[hidden]{display:none!important}
.process-card{width:min(330px,calc(100vw - 36px));padding:24px 26px 20px;border-radius:20px;text-align:center;border:1px solid rgba(127,74,182,.48);background:linear-gradient(180deg,rgba(10,13,24,.94),rgba(7,9,17,.96));box-shadow:0 24px 70px rgba(0,0,0,.48),0 0 35px rgba(155,69,255,.10)}
.process-ring{position:relative;display:grid;place-items:center;width:64px;height:64px;margin:0 auto 15px;border-radius:50%;background:conic-gradient(from 0deg,#ff35cf,#9b45ff,#2ba8ff,#ff35cf);animation:processSpin 1s linear infinite;box-shadow:0 0 24px rgba(155,69,255,.28)}
.process-ring:after{content:"";width:50px;height:50px;border-radius:50%;background:#0b0e18;box-shadow:inset 0 0 18px rgba(155,69,255,.12)}
.process-ring i{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 12px #fff;top:3px;left:28px}
.process-card h3{margin:0;color:#f5f2fb;font-size:17px}
.process-card p{margin:7px 0 16px;color:#8f899c;font-size:10px}
.process-progress{height:4px;border-radius:999px;overflow:hidden;background:#1c2030;border:1px solid rgba(255,255,255,.04)}
.process-progress span{display:block;width:38%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff35cf,#9b45ff,#2ba8ff);animation:progressSweep 1.05s ease-in-out infinite}
@keyframes processSpin{to{transform:rotate(360deg)}}
@keyframes progressSweep{0%{transform:translateX(-120%)}50%{transform:translateX(115%)}100%{transform:translateX(300%)}}

/* El visor queda limpio durante procesamiento */
.busy-pill,.canvas-spinner{display:none!important}

@media(max-width:1180px){.brand-logo-full{width:250px!important;max-width:40vw}.topbar{grid-template-columns:minmax(310px,1fr) auto}.user-zone{display:flex}.processing-chip{height:32px}}
@media(max-width:860px){:root{--topbar-h:84px}.brand-logo-full{width:220px!important;max-height:68px}.process-overlay{top:var(--topbar-h)}.processing-chip{display:none!important}}
@media(max-width:560px){.brand-logo-full{width:190px!important}.topbar{padding:0 10px}.dev-pill{display:none!important}}

/* v0.4.17 - estabilidad visual y procesamiento */
.viewer-wrap.loading-image .stage,.viewer-wrap.loading-image .drop{opacity:.72;transition:opacity .16s ease}
.viewer-wrap .stage,.viewer-wrap .drop{transition:opacity .16s ease}
.is-processing .main{pointer-events:none}
.process-overlay{will-change:opacity;animation:processFadeIn .18s ease both}
@keyframes processFadeIn{from{opacity:0}to{opacity:1}}


/* v0.4.17 - branding limpio con PNG oficiales */
.auth-brand-clean{position:relative;display:flex;align-items:center;gap:18px;z-index:1;width:min(760px,92%)}
.auth-brand-icon{width:150px;height:150px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 0 22px rgba(155,69,255,.18))}
.auth-brand-stack{display:flex;flex-direction:column;min-width:0}
.auth-brand-wordmark{width:min(420px,100%);height:auto;display:block}
.auth-brand-subline{display:block;margin-top:6px;font-size:16px;letter-spacing:.46em;color:#e4e0ef;white-space:nowrap}
.brand-zone{display:flex;align-items:center;gap:14px;min-width:0;overflow:hidden}
.brand-icon-clean{width:88px;height:88px;object-fit:contain;flex:0 0 88px;filter:drop-shadow(0 0 18px rgba(155,69,255,.16))}
.brand-copy-clean{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.brand-wordmark-clean{width:clamp(240px,22vw,330px);max-width:100%;height:auto;display:block}
.brand-subline-clean{display:block;margin-top:2px;font-size:10px;letter-spacing:.40em;color:#a69fba;white-space:nowrap}
.brand-logo-full{display:none!important}
.brand-mark,.brand-copy,.brand-title,.brand-subtitle{display:none!important}
.auth-logo-full{display:none!important}
.topbar{grid-template-columns:minmax(390px,1.2fr) auto minmax(240px,.8fr)}
.dev-pill{margin-left:2px}
.split{width:3px;background:linear-gradient(180deg,#2ba8ff 0%,#9b45ff 52%,#ff35cf 100%);box-shadow:0 0 18px rgba(155,69,255,.42)}
.handle{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:radial-gradient(circle at 30% 30%,#ffffff 0 8%,#d8efff 8%,#161a28 12%,#080a13 58%);box-shadow:0 0 0 2px rgba(155,69,255,.18),0 0 16px rgba(43,168,255,.18)}
.handle span{display:block;background:linear-gradient(90deg,#ff35cf,#9b45ff,#2ba8ff);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900;font-size:15px;line-height:1}
.viewer-wrap.loading-image .stage{opacity:.92}
.viewer-wrap.loading-image .stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,18,.14),rgba(8,10,18,.08));pointer-events:none}
.process-overlay{backdrop-filter:blur(16px)}
@media(max-width:1180px){.topbar{grid-template-columns:minmax(290px,1fr) auto}.brand-icon-clean{width:72px;height:72px;flex-basis:72px}.brand-wordmark-clean{width:260px}.auth-brand-icon{width:130px;height:130px}.auth-brand-wordmark{width:360px}.auth-brand-subline{font-size:14px}}
@media(max-width:860px){.brand-icon-clean{width:62px;height:62px;flex-basis:62px}.brand-wordmark-clean{width:220px}.brand-subline-clean{font-size:9px;letter-spacing:.34em}.auth-brand-clean{gap:12px}.auth-brand-icon{width:110px;height:110px}.auth-brand-wordmark{width:280px}.auth-brand-subline{font-size:12px;letter-spacing:.32em}}
@media(max-width:560px){.brand-icon-clean{width:54px;height:54px;flex-basis:54px}.brand-wordmark-clean{width:185px}.brand-subline-clean{display:none}.auth-brand-clean{gap:10px}.auth-brand-icon{width:92px;height:92px}.auth-brand-wordmark{width:220px}.auth-brand-subline{font-size:10px;letter-spacing:.28em}.dev-pill{display:none!important}}

/* v0.4.17 - ajuste final de header, carga y divisor */
.brand-icon-clean{width:96px!important;height:96px!important;flex-basis:96px!important}
.brand-wordmark-clean{width:285px!important;max-width:285px!important}
.brand-copy-clean{width:285px!important;flex:0 0 285px!important}
.brand-subline-clean{width:285px!important;text-align:center!important;font-size:9px!important;letter-spacing:.43em!important;padding-left:.43em!important;margin-top:3px!important}
.viewer-wrap.loading-image .stage,.viewer-wrap.loading-image .drop{opacity:1!important;transition:none!important}
.viewer-wrap.loading-image .stage::after{display:none!important}
.stage{touch-action:none!important;user-select:none!important;cursor:ew-resize}
.split{pointer-events:none!important}
.handle{pointer-events:none!important}
@media(max-width:1180px){.brand-icon-clean{width:82px!important;height:82px!important;flex-basis:82px!important}.brand-copy-clean{width:250px!important;flex-basis:250px!important}.brand-wordmark-clean,.brand-subline-clean{width:250px!important;max-width:250px!important}.brand-subline-clean{font-size:8.5px!important}}
@media(max-width:860px){.brand-icon-clean{width:68px!important;height:68px!important;flex-basis:68px!important}.brand-copy-clean{width:210px!important;flex-basis:210px!important}.brand-wordmark-clean,.brand-subline-clean{width:210px!important;max-width:210px!important}}


/* v0.4.17 — cierre visual de header y comparador */
.brand-copy-clean{width:285px!important;flex-basis:285px!important}
.brand-wordmark-clean{width:285px!important;max-width:285px!important}
.brand-subline-clean{width:285px!important;max-width:285px!important;display:block!important;box-sizing:border-box!important;text-align:center!important;font-size:10.5px!important;font-weight:500!important;letter-spacing:.50em!important;padding-left:.50em!important;margin-top:4px!important;color:#b9b3c8!important;line-height:1!important}
.brand-icon-clean{width:92px!important;height:92px!important;flex-basis:92px!important}

.split{width:3px!important;background:linear-gradient(180deg,#2ba8ff 0%,#9b45ff 50%,#ff35cf 100%)!important;box-shadow:0 0 14px rgba(155,69,255,.42)!important;pointer-events:none!important}
.handle{width:34px!important;height:34px!important;border-radius:50%!important;border:1px solid rgba(178,122,255,.72)!important;background:#0a0d16!important;background-image:none!important;box-shadow:0 0 0 3px rgba(155,69,255,.10),0 0 14px rgba(43,168,255,.16)!important;color:#e8e5f2!important;font-size:0!important;pointer-events:none!important;display:grid!important;place-items:center!important}
.handle span{font-size:0!important;width:16px!important;height:10px!important;position:relative!important;background:none!important;color:transparent!important;display:block!important}
.handle span::before,.handle span::after{content:"";position:absolute;top:4px;width:7px;height:2px;border-radius:2px;background:linear-gradient(90deg,#ff35cf,#9b45ff,#2ba8ff)}
.handle span::before{left:0;transform:rotate(0deg)}
.handle span::after{right:0;transform:rotate(0deg)}
.handle::before,.handle::after{content:"";position:absolute;top:50%;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;transform:translateY(-50%)}
.handle::before{left:7px;border-right:5px solid #ff62d9}
.handle::after{right:7px;border-left:5px solid #4db8ff}
@media(max-width:1180px){.brand-icon-clean{width:84px!important;height:84px!important;flex-basis:84px!important}.brand-copy-clean,.brand-wordmark-clean,.brand-subline-clean{width:245px!important;max-width:245px!important;flex-basis:245px!important}.brand-subline-clean{font-size:9px!important;letter-spacing:.46em!important;padding-left:.46em!important}}
@media(max-width:860px){.brand-icon-clean{width:70px!important;height:70px!important;flex-basis:70px!important}.brand-copy-clean,.brand-wordmark-clean,.brand-subline-clean{width:205px!important;max-width:205px!important;flex-basis:205px!important}.brand-subline-clean{font-size:8px!important;letter-spacing:.40em!important;padding-left:.40em!important}}


/* =========================================================
   v0.4.17 UI LAYOUT TEST — visor central + dos barras laterales
   ========================================================= */
:root{--left-w:292px;--right-w:340px;--topbar-h:0px;--footer-h:0px}
html,body{overflow:hidden!important}
.app-layout-v2{height:100dvh!important;display:grid!important;grid-template-columns:var(--left-w) minmax(0,1fr) var(--right-w)!important;grid-template-rows:1fr!important;overflow:hidden!important;background:#04060d!important}
.topbar,.app-footer{display:none!important}
.sidebar-left,.sidebar-right,.viewer-main{min-width:0;min-height:0}

.sidebar-left{position:relative;display:flex;flex-direction:column;height:100dvh;padding:16px 14px 12px;border-right:1px solid rgba(155,69,255,.22);background:linear-gradient(180deg,#080a14 0%,#060812 100%);box-shadow:10px 0 32px rgba(0,0,0,.16);z-index:30;overflow:hidden}
.side-brand{display:flex;align-items:center;gap:10px;min-height:82px}
.side-brand-icon{width:72px;height:72px;object-fit:contain;flex:0 0 72px;filter:drop-shadow(0 0 16px rgba(155,69,255,.18))}
.side-brand-copy{min-width:0;display:flex;flex-direction:column;width:176px}
.side-brand-wordmark{display:block;width:176px;max-width:100%;height:auto}
.side-brand-copy>span{margin-top:5px;width:176px;text-align:center;font-size:7.4px;line-height:1;letter-spacing:.33em;padding-left:.33em;color:#aaa4ba;white-space:nowrap}
.side-version{align-self:flex-start;margin:7px 0 13px 82px;padding:4px 7px;border:1px solid rgba(155,69,255,.46);border-radius:999px;font-size:8px;letter-spacing:.08em;color:#dfd3ef;background:#171020}
.side-nav{display:grid;gap:7px;padding:10px 0 14px;border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04)}
.side-nav-btn{height:42px;display:flex;align-items:center;gap:11px;width:100%;padding:0 12px;border:1px solid transparent;border-radius:11px;background:transparent;color:#aaa5b7;text-decoration:none;cursor:pointer;text-align:left}
.side-nav-btn span{width:22px;text-align:center;color:#9e91b8}.side-nav-btn b{font-weight:650;font-size:12px}
.side-nav-btn:hover{border-color:#403053;color:#fff;background:#0c0f1a}.side-nav-btn.active{color:#fff;border-color:#7843c9;background:linear-gradient(180deg,#211633,#13101d);box-shadow:0 0 18px rgba(155,69,255,.08)}
.side-processing{margin-top:4px;justify-self:start}
.side-info{position:static!important;top:auto!important;left:auto!important;z-index:auto!important;width:100%!important;margin:14px 0 0!important;padding:12px!important;border-radius:14px!important;background:linear-gradient(180deg,rgba(12,14,25,.86),rgba(8,10,19,.90))!important;backdrop-filter:none!important;box-shadow:none!important}
.side-info .info-float-grid{grid-template-columns:92px 1fr!important;gap:7px 8px!important;font-size:9.5px!important}
.side-info .info-float-head{margin-bottom:9px!important}.side-info .info-float-head b{font-size:10px!important}
.side-footer{margin-top:auto;padding:12px 4px 2px;border-top:1px solid rgba(255,255,255,.05);font-size:8px;line-height:1.55;color:#625f70;text-align:left}

.viewer-main{height:100dvh;overflow:hidden;background:#070912}
.viewer-full{height:100%!important;min-height:0!important;border:0!important;border-radius:0!important;overflow:hidden!important;background:radial-gradient(circle at 50% 42%,rgba(50,28,84,.16),transparent 45%),#070912!important}
.viewer-full:before{opacity:.70}
.viewer-full .drop,.viewer-full .stage{inset:54px 12px 34px!important;border-radius:15px!important}
.viewer-full .viewer-toolbar{top:12px!important;left:12px!important}
.viewer-full .viewer-foot{left:12px!important;right:12px!important;bottom:8px!important}

.sidebar-right{position:relative;height:100dvh;display:flex!important;flex-direction:column!important;padding:12px!important;border-left:1px solid rgba(155,69,255,.18)!important;border-right:0!important;background:linear-gradient(180deg,#070a13,#05070e)!important;overflow-y:auto!important;overflow-x:hidden!important;z-index:31}
.right-user-wrap{position:relative;margin-bottom:10px}
.right-user-card{width:100%!important;min-width:0!important;height:58px!important;padding:8px 10px!important;border-color:#302644!important;background:linear-gradient(180deg,#0d1120,#090c15)!important}
.right-user-card .avatar{width:34px;height:34px}.right-user-card .user-copy{display:block!important}.right-user-card .user-copy b{font-size:11px!important}.right-user-card .user-copy small{font-size:8.5px!important}
.right-account-menu{position:absolute!important;top:64px!important;right:0!important;left:auto!important;width:100%!important;z-index:120!important}
.sidebar-right>.section-head{flex:0 0 auto}.sidebar-right>.controls-card{flex:0 0 auto}.sidebar-right>.action-card{margin-top:auto!important;flex:0 0 auto}

/* Procesamiento: únicamente el lienzo central queda desenfocado; menús visibles */
.process-overlay{position:fixed!important;left:var(--left-w)!important;right:var(--right-w)!important;top:0!important;bottom:0!important;z-index:85!important;display:grid!important;place-items:center!important;background:rgba(3,4,10,.28)!important;backdrop-filter:blur(12px) saturate(.72)!important;-webkit-backdrop-filter:blur(12px) saturate(.72)!important}
.process-overlay[hidden]{display:none!important}
.is-processing .viewer-main{pointer-events:none!important}.is-processing .sidebar-left,.is-processing .sidebar-right{pointer-events:none!important}.is-processing #processingChip{pointer-events:none!important}

/* responsive: mantiene prioridad del visor */
@media(max-width:1260px){:root{--left-w:252px;--right-w:310px}.sidebar-left{padding-left:10px;padding-right:10px}.side-brand-icon{width:62px;height:62px;flex-basis:62px}.side-brand-copy,.side-brand-wordmark,.side-brand-copy>span{width:160px}.side-version{margin-left:70px}.sidebar-right{padding:10px!important}}
@media(max-width:980px){:root{--left-w:220px;--right-w:290px}.side-brand{gap:7px}.side-brand-icon{width:52px;height:52px;flex-basis:52px}.side-brand-copy,.side-brand-wordmark,.side-brand-copy>span{width:145px}.side-brand-copy>span{font-size:6.2px}.side-version{margin-left:58px}.side-info .info-float-grid{grid-template-columns:1fr!important}.side-info .info-float-grid span{margin-top:4px}.viewer-full .drop,.viewer-full .stage{inset:50px 8px 32px!important}}
@media(max-width:760px){html,body{overflow:auto!important}.app-layout-v2{height:auto!important;min-height:100dvh!important;display:flex!important;flex-direction:column!important}.sidebar-left{height:auto!important;min-height:auto!important;position:relative!important;border-right:0!important;border-bottom:1px solid rgba(155,69,255,.20)!important}.side-brand{justify-content:center}.side-version{margin:4px auto 8px}.side-nav{grid-template-columns:repeat(3,1fr);display:grid}.side-nav-btn{justify-content:center}.side-nav-btn span{width:auto}.side-processing{grid-column:1/-1}.side-info{margin-top:10px!important}.side-footer{display:none}.viewer-main{height:64vh!important;min-height:520px}.sidebar-right{height:auto!important;min-height:auto!important;border-left:0!important;border-top:1px solid rgba(155,69,255,.18)!important;overflow:visible!important}.process-overlay{left:0!important;right:0!important;top:0!important;bottom:0!important}.right-account-menu{position:relative!important;top:8px!important}}


/* =========================================================
   v0.4.17 FINAL — refinamiento del layout final
   ========================================================= */
.side-version{display:none!important}
.left-user-wrap{position:relative;display:flex;flex-direction:column;gap:8px;margin:10px 0 12px}
.left-user-card{width:100%!important;min-width:0!important;height:58px!important;padding:8px 10px!important;border-color:#302644!important;background:linear-gradient(180deg,#0d1120,#090c15)!important}
.left-user-card .avatar{width:34px;height:34px}.left-user-card .user-copy{display:block!important}.left-user-card .user-copy b{font-size:11px!important}.left-user-card .user-copy small{font-size:8.5px!important}
.left-account-menu{position:static!important;top:auto!important;left:auto!important;right:auto!important;width:100%!important;z-index:auto!important;margin-top:0!important}
.sidebar-right>.section-head{margin-top:0!important}
.viewer-full .drop,.viewer-full .stage{inset:12px 12px 34px!important;border-radius:15px!important}
.viewer-full .viewer-toolbar{top:18px!important;left:18px!important;z-index:8!important;background:rgba(10,12,20,.58)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important}
.viewer-full .viewer-foot{left:12px!important;right:12px!important;bottom:8px!important}
.viewer-toolbar.top-left{pointer-events:none}
@media(max-width:760px){.left-user-wrap{margin:8px 0 10px}.left-account-menu{position:relative!important}}


/* v0.4.17 FINAL — Guía rápida / manual de usuario */
.guide-modal{padding:18px;background:rgba(3,4,10,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.guide-card{width:min(940px,calc(100vw - 28px));max-height:min(88vh,900px);overflow:auto;padding:28px 30px 24px;text-align:left;scrollbar-width:thin;scrollbar-color:#6b3fb0 #11131c}
.guide-card::-webkit-scrollbar{width:8px}.guide-card::-webkit-scrollbar-track{background:#11131c}.guide-card::-webkit-scrollbar-thumb{background:#6b3fb0;border-radius:8px}
.guide-head{display:flex;gap:18px;align-items:center;padding:0 36px 18px 0;border-bottom:1px solid #272132}.guide-head img{width:72px;height:72px;border-radius:16px;flex:0 0 auto}.guide-head h2{margin:2px 0 4px;font-size:26px}.guide-head p{margin:0;color:#a59db4;font-size:12px;line-height:1.55}.guide-kicker{font-size:9px;letter-spacing:.32em;color:#bc7dff;font-weight:800}
.guide-section{padding:18px 0;border-bottom:1px solid #211c2b}.guide-section:last-of-type{border-bottom:0}.guide-section h3{margin:0 0 10px;font-size:14px;color:#f0edf7}.guide-section>p{margin:0;color:#aaa2b7;font-size:11px;line-height:1.65}
.guide-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:0;counter-reset:step}.guide-steps li{counter-increment:step;background:#10131d;border:1px solid #2d2639;border-radius:12px;padding:12px;min-height:94px}.guide-steps li::before{content:counter(step);display:grid;place-items:center;width:22px;height:22px;margin-bottom:8px;border-radius:50%;background:linear-gradient(135deg,#ff35cf,#874eff,#2ba8ff);color:white;font-weight:800;font-size:10px}.guide-steps b{display:block;font-size:10px;margin-bottom:4px}.guide-steps span{display:block;color:#8f8899;font-size:9px;line-height:1.45}
.guide-note{background:linear-gradient(90deg,rgba(255,53,207,.08),rgba(43,168,255,.06));border:1px solid #3b2950;border-radius:12px;padding:12px!important;color:#c1b9ca!important}.preset-grid{display:grid;grid-template-columns:1fr auto 1fr auto;gap:7px 14px;margin-top:12px;background:#0f121b;border:1px solid #292334;border-radius:12px;padding:12px 14px;font-size:10px}.preset-grid span{color:#888193}.preset-grid b{color:#f1edf7;text-align:right}
.guide-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.guide-tools article{background:#0f121b;border:1px solid #292334;border-radius:12px;padding:13px}.guide-tools article b{display:block;margin-bottom:6px;color:#ece8f4;font-size:11px}.guide-tools article p{margin:0;color:#9790a2;font-size:9.5px;line-height:1.55}.guide-tip{margin-top:12px;border-left:3px solid #9b45ff;background:#11131d;border-radius:8px;padding:10px 12px;color:#aaa3b6;font-size:10px;line-height:1.5}.guide-tip b{color:#e6d9ff}.guide-foot{text-align:center;padding-top:15px;color:#625d6d;font-size:8.5px;letter-spacing:.08em}
@media(max-width:820px){.guide-card{padding:22px 18px}.guide-steps{grid-template-columns:1fr 1fr}.guide-tools{grid-template-columns:1fr}.preset-grid{grid-template-columns:1fr auto}.guide-head img{width:60px;height:60px}.guide-head h2{font-size:22px}}
@media(max-width:520px){.guide-steps{grid-template-columns:1fr}.guide-card{max-height:92vh}.guide-head{align-items:flex-start}.guide-head p{font-size:11px}}