/* Pixel Art Converter — dedicated responsive layout */
:root{--pa-bg:#f4f8fb;--pa-card:#fff;--pa-ink:#082338;--pa-muted:#617584;--pa-border:#d9e6e1;--pa-green:#16a085;--pa-green2:#20c7aa;--pa-navy:#173b68}
body.pixel-art-tool-page{margin:0;background:radial-gradient(circle at top left,rgba(34,197,164,.08),transparent 20%),linear-gradient(180deg,#f5f8fb,#eef4f7);color:var(--pa-ink);overflow-x:hidden}
body.pixel-art-tool-page *{box-sizing:border-box;min-width:0}
.pa-main{width:100%;padding-bottom:26px}
.pa-hero{width:min(1240px,calc(100% - 20px));margin:12px auto 10px;padding:22px 24px;border-radius:24px;background:linear-gradient(135deg,#10254a,#1d4c7b);color:#fff;box-shadow:0 18px 42px rgba(15,35,65,.14)}
.pa-hero h1{margin:0 0 8px;color:#fff;font-size:clamp(2rem,4vw,3rem);line-height:1.05;letter-spacing:-.035em}
.pa-hero p{margin:0;max-width:1000px;color:rgba(255,255,255,.86);line-height:1.55;font-size:1rem}
.pa-shell{width:min(1320px,calc(100% - 20px));margin:0 auto 18px;background:#fff;border:1px solid var(--pa-border);border-radius:26px;box-shadow:0 18px 42px rgba(15,35,30,.08);overflow:hidden}
.pa-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;background:linear-gradient(180deg,#f5faf8,#edf6f3);border-bottom:1px solid var(--pa-border)}
.pa-heading span,.pa-card-title span,.pa-kicker{display:block;font-size:.78rem;font-weight:900;letter-spacing:.08em;color:#0e9a82}
.pa-heading h2{margin:5px 0 0;font-size:1.6rem;color:var(--pa-ink)}
.pa-heading p{margin:0;padding:8px 12px;border:1px solid var(--pa-border);border-radius:999px;background:#fff;color:var(--pa-muted);font-size:.88rem}
.pa-upload-wrap{padding:18px}
.pa-upload-zone{min-height:230px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;border:2px dashed #8de0cf;border-radius:22px;background:linear-gradient(180deg,#fbfdfc,#f2f8f6);text-align:center;cursor:pointer;transition:.18s}
.pa-upload-zone.is-dragging{border-color:#0c8b74;background:#eaf9f5;transform:translateY(-1px)}
.pa-upload-zone input{display:none}
.pa-upload-icon{font-size:2.5rem}.pa-upload-zone strong{font-size:1.2rem}.pa-upload-zone small{color:var(--pa-muted);font-size:.93rem}
.pa-upload-button{margin-top:7px;display:inline-flex;align-items:center;justify-content:center;min-width:190px;min-height:48px;padding:0 18px;border-radius:14px;background:linear-gradient(135deg,var(--pa-green2),var(--pa-green));color:#fff;font-weight:850;box-shadow:0 10px 22px rgba(22,160,133,.2)}
.pa-upload-status{margin:10px 4px 0;color:#b42318;font-size:.9rem}
.pa-editor{padding:18px;display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:18px;align-items:start}
.pa-editor[hidden]{display:none!important}
.pa-preview-card,.pa-settings-card{border:1px solid var(--pa-border);border-radius:22px;background:#fff;box-shadow:0 12px 28px rgba(15,35,30,.05);overflow:hidden}
.pa-card-title{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid var(--pa-border);background:linear-gradient(180deg,#fff,#f9fbfa)}
.pa-card-title h3{margin:4px 0 0;font-size:1.2rem;color:var(--pa-ink)}
.pa-dimensions{padding:7px 10px;border-radius:999px;background:#eef7f4;color:#4f6875;font-weight:750;font-size:.84rem}
.pa-preview-stage{min-height:520px;padding:18px;display:flex;align-items:center;justify-content:center;overflow:auto;background-color:#edf3f1;background-image:linear-gradient(45deg,#fff 25%,transparent 25%),linear-gradient(-45deg,#fff 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#fff 75%),linear-gradient(-45deg,transparent 75%,#fff 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}
#paCanvas{display:block;width:auto;height:auto;max-width:100%;max-height:min(72vh,760px);image-rendering:pixelated;image-rendering:crisp-edges;background:#fff;border-radius:14px;box-shadow:0 14px 30px rgba(15,23,42,.12)}
.pa-file-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px 18px 18px}
.pa-file-info:empty{display:none}.pa-file-info>div{padding:11px 12px;border:1px solid var(--pa-border);border-radius:14px;background:#f8fcfa}.pa-file-info span{display:block;color:var(--pa-muted);font-size:.78rem;margin-bottom:3px}.pa-file-info strong{font-size:.94rem;color:var(--pa-ink);word-break:break-word}
.pa-settings-card{position:sticky;top:82px;padding-bottom:16px;background:linear-gradient(180deg,#f6fbf9,#f1f7f4)}
.pa-settings-card>.pa-card-title{background:transparent}
.pa-control-group{margin:14px 16px 0;padding:14px;border:1px solid var(--pa-border);border-radius:17px;background:#fff}
.pa-control-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}.pa-control-head label,.pa-control-group>label{font-weight:800;color:var(--pa-ink)}.pa-control-head strong{color:#0c927b}.pa-control-group small{display:block;margin-top:7px;color:var(--pa-muted);line-height:1.45;font-size:.82rem}
.pa-control-group input[type=range]{width:100%;accent-color:var(--pa-green)}
.pa-switch-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.pa-switch{position:relative;width:48px;height:28px;flex:0 0 auto}.pa-switch input{position:absolute;opacity:0}.pa-switch span{position:absolute;inset:0;background:#d7e1dd;border-radius:999px;transition:.18s}.pa-switch span:after{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:.18s}.pa-switch input:checked+span{background:var(--pa-green)}.pa-switch input:checked+span:after{transform:translateX(20px)}
.pa-color-row{display:flex;align-items:center;gap:10px;margin-top:10px}.pa-color-row input{width:54px;height:42px;border:1px solid var(--pa-border);border-radius:10px;background:#fff;padding:3px}.pa-color-row span{font-family:ui-monospace,monospace;color:#526b78}
.pa-actions{display:grid;grid-template-columns:1fr;gap:9px;margin:14px 16px 0}.pa-btn{min-height:48px;width:100%;padding:0 15px;border:1px solid #cad8d3;border-radius:14px;background:#fff;color:var(--pa-ink);font-weight:850;cursor:pointer}.pa-btn-primary{border-color:transparent;background:linear-gradient(135deg,var(--pa-green2),var(--pa-green));color:#fff;box-shadow:0 10px 22px rgba(22,160,133,.18)}.pa-btn-download{border-color:transparent;background:linear-gradient(135deg,#102b4d,#1d4c7b);color:#fff}.pa-btn:disabled{opacity:.48;cursor:not-allowed;box-shadow:none}.pa-status{margin:12px 16px 0;padding:11px 12px;border:1px solid var(--pa-border);border-radius:13px;background:#fff;color:var(--pa-muted);font-size:.86rem;line-height:1.45}
.pa-rating-slot{width:min(1320px,calc(100% - 20px));margin:0 auto 18px}.pa-rating-slot:empty{display:none}.pa-rating-slot #ootRatingMount{width:100%!important;max-width:none!important;margin:0!important}
.pa-content{width:min(1320px,calc(100% - 20px));margin:0 auto;display:grid;gap:16px}.pa-content-card{padding:24px;border:1px solid var(--pa-border);border-radius:22px;background:#fff;box-shadow:0 10px 24px rgba(15,35,30,.045)}.pa-content-card h2{margin:6px 0 12px;font-size:1.45rem;color:var(--pa-ink)}.pa-content-card p,.pa-content-card li{color:#536b7a;line-height:1.7}.pa-feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}.pa-feature-grid>div{display:flex;gap:8px;padding:13px;border:1px solid var(--pa-border);border-radius:14px;background:#f9fcfb}.pa-feature-grid span{color:#0e9a82;font-weight:900}.pa-feature-grid p{margin:0;line-height:1.45;font-size:.9rem}.pa-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;counter-reset:pa;margin:18px 0 0;padding:0;list-style:none}.pa-steps li{counter-increment:pa;padding:15px;border:1px solid var(--pa-border);border-radius:14px;background:#f9fbfb}.pa-steps li:before{content:counter(pa);display:grid;place-items:center;width:30px;height:30px;margin-bottom:8px;border-radius:50%;background:var(--pa-green);color:#fff;font-weight:900}.pa-content-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.pa-content-card ul{padding-left:20px;margin-bottom:0}.pa-faq-list{display:grid;gap:9px}.pa-faq-list details{border:1px solid var(--pa-border);border-radius:13px;background:#fff;overflow:hidden}.pa-faq-list summary{padding:14px 15px;font-weight:800;cursor:pointer}.pa-faq-list details p{margin:0;padding:0 15px 15px}
@media(max-width:1050px){.pa-editor{grid-template-columns:1fr}.pa-settings-card{position:static}.pa-preview-stage{min-height:400px}.pa-feature-grid,.pa-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .pa-hero,.pa-shell,.pa-rating-slot,.pa-content{width:calc(100% - 12px)}
  .pa-hero{margin-top:8px;padding:17px 15px;border-radius:18px}.pa-hero h1{font-size:1.9rem}.pa-hero p{font-size:.92rem;line-height:1.5}
  .pa-heading{padding:15px;align-items:flex-start;flex-direction:column;gap:9px}.pa-heading h2{font-size:1.28rem}.pa-heading p{width:100%;border-radius:14px;font-size:.82rem;line-height:1.4}
  .pa-upload-wrap{padding:12px}.pa-upload-zone{min-height:185px;padding:18px 12px;border-radius:18px}.pa-upload-icon{font-size:2rem}.pa-upload-zone strong{font-size:1.05rem}.pa-upload-zone small{font-size:.84rem}.pa-upload-button{width:100%;min-width:0;min-height:46px}
  .pa-editor{display:flex;flex-direction:column;padding:12px;gap:12px}.pa-preview-card{order:1;width:100%}.pa-settings-card{order:2;width:100%;border-radius:18px}.pa-card-title{padding:13px}.pa-card-title h3{font-size:1.05rem}.pa-dimensions{font-size:.76rem;padding:6px 8px}
  .pa-preview-stage{min-height:270px;padding:10px;overflow:hidden}#paCanvas{max-height:50vh;max-width:100%;border-radius:10px}.pa-file-info{grid-template-columns:1fr;padding:10px 12px 12px;gap:8px}
  .pa-control-group{margin:10px 12px 0;padding:12px;border-radius:14px}.pa-control-head{align-items:flex-start}.pa-switch-row{align-items:flex-start}.pa-actions{margin:12px 12px 0}.pa-btn{min-height:48px}.pa-status{margin:10px 12px 0}
  .pa-content-card{padding:18px;border-radius:18px}.pa-content-card h2{font-size:1.25rem}.pa-feature-grid,.pa-steps,.pa-content-grid{grid-template-columns:1fr}.pa-content{gap:12px}
}

/* ===== Pixel Art Converter: mobile viewport hardening ===== */
@media (max-width:700px){
  html{
    width:100%!important;
    max-width:100%!important;
    overflow-x:clip!important;
    overscroll-behavior-x:none!important;
  }
  body.pixel-art-tool-page{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    overflow-x:clip!important;
    position:relative!important;
    left:0!important;
    right:0!important;
  }
  body.pixel-art-tool-page header,
  body.pixel-art-tool-page footer,
  body.pixel-art-tool-page main,
  body.pixel-art-tool-page .pa-main{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    transform:none!important;
  }
  body.pixel-art-tool-page header{
    overflow-x:clip!important;
  }
  body.pixel-art-tool-page .pa-main{
    padding:0 7px 22px!important;
  }
  body.pixel-art-tool-page .pa-hero,
  body.pixel-art-tool-page .pa-shell,
  body.pixel-art-tool-page .pa-rating-slot,
  body.pixel-art-tool-page .pa-content{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  body.pixel-art-tool-page .pa-hero{
    margin-top:8px!important;
    margin-bottom:9px!important;
    padding:16px 15px!important;
    border-radius:17px!important;
    overflow:hidden!important;
  }
  body.pixel-art-tool-page .pa-hero h1,
  body.pixel-art-tool-page .pa-hero p,
  body.pixel-art-tool-page .pa-heading > *,
  body.pixel-art-tool-page .pa-heading h2,
  body.pixel-art-tool-page .pa-heading p{
    max-width:100%!important;
    min-width:0!important;
    overflow-wrap:anywhere!important;
  }
  body.pixel-art-tool-page .pa-hero h1{
    margin:0 0 7px!important;
    font-size:1.72rem!important;
    line-height:1.08!important;
    letter-spacing:-.025em!important;
  }
  body.pixel-art-tool-page .pa-hero p{
    font-size:.89rem!important;
    line-height:1.48!important;
  }
  body.pixel-art-tool-page .pa-shell{
    border-radius:18px!important;
    overflow:hidden!important;
  }
  body.pixel-art-tool-page .pa-heading{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:14px 13px!important;
    display:block!important;
  }
  body.pixel-art-tool-page .pa-heading span{
    font-size:.72rem!important;
    letter-spacing:.06em!important;
  }
  body.pixel-art-tool-page .pa-heading h2{
    margin:5px 0 8px!important;
    font-size:1.2rem!important;
    line-height:1.2!important;
  }
  body.pixel-art-tool-page .pa-heading p{
    width:100%!important;
    margin:0!important;
    padding:8px 9px!important;
    border-radius:12px!important;
    font-size:.78rem!important;
    line-height:1.38!important;
  }
  body.pixel-art-tool-page .pa-upload-wrap,
  body.pixel-art-tool-page .pa-editor{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:11px!important;
  }
  body.pixel-art-tool-page .pa-upload-zone{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:172px!important;
    padding:16px 12px!important;
    border-radius:16px!important;
    overflow:hidden!important;
  }
  body.pixel-art-tool-page .pa-upload-zone strong,
  body.pixel-art-tool-page .pa-upload-zone small{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }
  body.pixel-art-tool-page .pa-upload-zone strong{
    font-size:1rem!important;
    line-height:1.3!important;
  }
  body.pixel-art-tool-page .pa-upload-zone small{
    font-size:.8rem!important;
    line-height:1.4!important;
  }
  body.pixel-art-tool-page .pa-upload-button{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:44px!important;
  }
  body.pixel-art-tool-page .pa-editor{
    display:flex!important;
    flex-direction:column!important;
    gap:11px!important;
  }
  body.pixel-art-tool-page .pa-editor[hidden]{display:none!important;}
  body.pixel-art-tool-page .pa-preview-card,
  body.pixel-art-tool-page .pa-settings-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    position:static!important;
    overflow:hidden!important;
  }
  body.pixel-art-tool-page .pa-preview-card{order:1!important;}
  body.pixel-art-tool-page .pa-settings-card{order:2!important;}
  body.pixel-art-tool-page .pa-card-title{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:12px!important;
    gap:8px!important;
    flex-wrap:wrap!important;
  }
  body.pixel-art-tool-page .pa-preview-stage{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:245px!important;
    padding:9px!important;
    overflow:hidden!important;
  }
  body.pixel-art-tool-page #paCanvas{
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:100%!important;
    max-height:46vh!important;
    margin:0 auto!important;
  }
  body.pixel-art-tool-page .pa-file-info{
    width:100%!important;
    grid-template-columns:1fr!important;
    padding:9px 11px 11px!important;
  }
  body.pixel-art-tool-page .pa-control-group,
  body.pixel-art-tool-page .pa-actions,
  body.pixel-art-tool-page .pa-status{
    width:auto!important;
    max-width:calc(100% - 20px)!important;
    min-width:0!important;
    margin-left:10px!important;
    margin-right:10px!important;
  }
  body.pixel-art-tool-page .pa-control-group{
    padding:11px!important;
    margin-top:10px!important;
  }
  body.pixel-art-tool-page .pa-control-head{
    width:100%!important;
    min-width:0!important;
    gap:8px!important;
  }
  body.pixel-art-tool-page .pa-control-head label{
    min-width:0!important;
    overflow-wrap:anywhere!important;
  }
  body.pixel-art-tool-page .pa-control-group input[type=range]{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  body.pixel-art-tool-page .pa-switch-row{
    width:auto!important;
    max-width:calc(100% - 20px)!important;
    min-width:0!important;
  }
  body.pixel-art-tool-page .pa-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  body.pixel-art-tool-page .pa-btn{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  body.pixel-art-tool-page .pa-rating-slot{
    margin-top:0!important;
    margin-bottom:12px!important;
  }
  body.pixel-art-tool-page .pa-rating-slot #ootRatingMount,
  body.pixel-art-tool-page #ootRatingMount{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    overflow:hidden!important;
  }
  body.pixel-art-tool-page .pa-content{
    gap:11px!important;
  }
  body.pixel-art-tool-page .pa-content-card,
  body.pixel-art-tool-page .pa-content-grid{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  body.pixel-art-tool-page .pa-content-card{
    padding:16px!important;
    border-radius:17px!important;
    overflow:hidden!important;
  }
  body.pixel-art-tool-page .pa-feature-grid,
  body.pixel-art-tool-page .pa-steps,
  body.pixel-art-tool-page .pa-content-grid{
    grid-template-columns:1fr!important;
  }
}