body.fragmentator-open{overflow:hidden!important}
#btn-fragmentator-studio.is-active{background:#f43f5e!important;color:#fff!important;box-shadow:0 0 0 2px rgba(244,63,94,.22),0 7px 22px rgba(136,19,55,.28)!important}
.fragmentator-studio{position:fixed;inset:0;z-index:5000;background:#090b12;color:#edf1f7;font:13px/1.4 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.fragmentator-studio[hidden]{display:none!important}
.fragmentator-shell{height:100%;min-width:0;min-height:0;display:grid;grid-template-rows:58px minmax(0,1fr);background:radial-gradient(circle at 72% 22%,rgba(244,63,94,.1),transparent 38%),#090b12}
.fragmentator-head{display:flex;align-items:center;gap:13px;padding:0 18px;border-bottom:1px solid #2c303b;background:rgba(13,16,24,.97);box-shadow:0 8px 30px rgba(0,0,0,.28)}
.fragmentator-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,#fb7185,#9f1239);color:#fff;font-size:18px;font-weight:950;box-shadow:0 0 28px rgba(251,113,133,.2)}
.fragmentator-title small{display:block;color:#fb7185;font-size:9px;font-weight:900;letter-spacing:.18em}.fragmentator-title h2{margin:1px 0 0;font-size:17px;line-height:1.1}
.fragmentator-status{margin-left:auto;max-width:46vw;color:#9ca7b7;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fragmentator-status.is-error{color:#fda4af}
.fragmentator-close{width:36px;height:36px;border:1px solid #3c4351;border-radius:9px;background:#191e29;color:#eef2f7;font-size:17px}.fragmentator-close:hover{background:#2b3240}
.fragmentator-body{min-width:0;min-height:0;display:grid;grid-template-columns:minmax(300px,370px) minmax(0,1fr)}
.fragmentator-controls{min-width:0;min-height:0;overflow:auto;border-right:1px solid #2c303b;background:rgba(15,18,27,.98);scrollbar-width:thin;scrollbar-color:#606a7b transparent}
.fragmentator-section{padding:14px 16px;border-bottom:1px solid #292e39}.fragmentator-section h3{margin:0 0 10px;color:#fb7185;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.fragmentator-section p{margin:7px 0 0;color:#7f8a9b;font-size:10px;line-height:1.45}
.fragmentator-source-actions,.fragmentator-output-actions,.fragmentator-graph-tools{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.fragmentator-button,.fragmentator-file{display:flex;align-items:center;justify-content:center;min-height:36px;padding:0 10px;border:1px solid #424b5c;border-radius:8px;background:#202632;color:#f4f6fa;font-size:10px;font-weight:850;cursor:pointer;text-align:center}
.fragmentator-button:hover,.fragmentator-file:hover{border-color:#fb7185;background:#2d2732}.fragmentator-file input{display:none}
.fragmentator-button.is-primary{border-color:#be123c;background:linear-gradient(135deg,#be123c,#881337);color:#fff}.fragmentator-button.is-primary:hover{border-color:#fb7185;background:linear-gradient(135deg,#e11d48,#9f1239)}
.fragmentator-button.is-wide{grid-column:1/-1}.fragmentator-button:disabled{opacity:.45;cursor:not-allowed}
.fragmentator-source-name{margin-top:8px;padding:8px 9px;border:1px dashed #3a4250;border-radius:7px;color:#9ca7b7;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fragmentator-field{display:grid;grid-template-columns:112px minmax(0,1fr) 48px;gap:8px;align-items:center;margin:8px 0}.fragmentator-field>label{color:#b6bfcc;font-size:10px;font-weight:750}.fragmentator-field output{color:#fb7185;font:10px ui-monospace,SFMono-Regular,Consolas,monospace;text-align:right;white-space:nowrap}
.fragmentator-field input[type=range]{width:100%;accent-color:#f43f5e}.fragmentator-field input[type=color]{width:100%;height:30px;padding:2px;border:1px solid #465063;border-radius:7px;background:#121721}
.fragmentator-field select,.fragmentator-field input[type=number]{width:100%;min-width:0;height:30px;border:1px solid #3d4657;border-radius:7px;background:#121721;color:#eef2f7;padding:0 7px;font-size:10px}.fragmentator-field-wide{grid-template-columns:112px minmax(0,1fr)}
.fragmentator-toggle{display:flex;align-items:center;gap:8px;margin:8px 0;color:#b6bfcc;font-size:10px}.fragmentator-toggle input{accent-color:#f43f5e}
.fragmentator-stage{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;background:#0b0e15}
.fragmentator-panes{min-width:0;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#20242e}
.fragmentator-pane{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);background:#0b0e15}
.fragmentator-pane-label{padding:8px 14px;font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#fb7185;background:rgba(15,18,27,.9);border-bottom:1px solid #20242e}
.fragmentator-pane-label small{margin-left:8px;color:#7f8a9b;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:none}
.fragmentator-pane .fragmentator-preview-wrap{padding:18px}
@media(max-width:1100px){.fragmentator-panes{grid-template-columns:1fr}}
.fragmentator-preview-wrap{position:relative;min-width:0;min-height:0;display:grid;place-items:center;overflow:visible;padding:14px}
.fragmentator-checker{position:absolute;inset:14px;border:1px solid #343b48;border-radius:4px;background-color:#e5e7eb;background-image:linear-gradient(45deg,#cbd0d7 25%,transparent 25%),linear-gradient(-45deg,#cbd0d7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#cbd0d7 75%),linear-gradient(-45deg,transparent 75%,#cbd0d7 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;box-shadow:0 25px 80px rgba(0,0,0,.42)}
.fragmentator-preview{position:relative;z-index:1;display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;cursor:crosshair}
.fragmentator-empty{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);max-width:360px;text-align:center;color:#596475;pointer-events:none}.fragmentator-empty strong{display:block;color:#707b8c;font-size:16px}.fragmentator-empty span{display:block;margin-top:6px;font-size:11px}.fragmentator-empty.is-hidden{display:none}
.fragmentator-transport{display:grid;grid-template-columns:auto auto minmax(120px,1fr) auto;align-items:center;gap:9px;padding:12px 16px;border-top:1px solid #2b303b;background:#10141c}.fragmentator-transport button{width:34px;height:32px;border:1px solid #3d4657;border-radius:8px;background:#1d2430;color:#fff}.fragmentator-transport input[type=range]{width:100%;accent-color:#f43f5e}.fragmentator-time{min-width:72px;color:#9aa5b5;font:10px ui-monospace,SFMono-Regular,Consolas,monospace}
.fragmentator-edit-mode{margin-top:9px;padding:8px 9px;border:1px solid #4c3150;border-radius:8px;background:rgba(244,63,94,.08);color:#fda4af;font-size:10px;line-height:1.4}.fragmentator-edit-mode[hidden]{display:none}
@media(max-width:900px){.fragmentator-body{grid-template-columns:minmax(280px,330px) minmax(0,1fr)}.fragmentator-preview-wrap{padding:12px}.fragmentator-checker{inset:12px}.fragmentator-preview{max-width:calc(100% - 24px);max-height:calc(100% - 24px)}}
@media(max-width:680px){.fragmentator-shell{grid-template-rows:52px minmax(0,1fr)}.fragmentator-body{grid-template-columns:1fr;grid-template-rows:minmax(230px,42vh) minmax(0,1fr)}.fragmentator-controls{order:2;border-right:0;border-top:1px solid #2c303b}.fragmentator-stage{order:1}.fragmentator-status{display:none}}
@media(prefers-reduced-motion:reduce){.fragmentator-studio *{transition:none!important}}