:root{
  --bg:#fff; --text:#1d1d1f; --muted:#86868b; --line:#e6e6ea;
  --primary:#0071e3; --primary-d:#0058b0; --soft:#f5f6f8;
}
#app{min-height:calc(100vh - 160px); --text-dim:#86868b;}
#app .container{max-width:920px; margin:0 auto; padding:24px 16px 48px;}
#app .header{text-align:center; margin-bottom:22px;}
#app .app-title{font-size:26px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:10px;}
#app .app-title .icon{color:var(--primary); display:inline-flex;}
#app .header p{color:var(--muted); margin:8px 0 12px;}
#app .badge{display:inline-block; font-size:12px; color:var(--primary); background:rgba(0,113,227,.1); padding:4px 12px; border-radius:20px;}
#app .card{background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 1px 3px rgba(0,0,0,.04);}
#app .drop-area{border:2px dashed var(--line); border-radius:14px; padding:48px 20px; text-align:center; cursor:pointer; transition:.2s; background:var(--soft);}
#app .drop-area:hover,#app .drop-area.drag{border-color:var(--primary); background:rgba(0,113,227,.05);}
#app .drop-icon{color:var(--muted); display:flex; justify-content:center; margin-bottom:10px;}
#app .drop-text{font-size:16px; font-weight:600;}
#app .drop-hint{font-size:13px; color:var(--muted); margin-top:6px;}
#app .work{margin-top:6px;}
#app .compare{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
#app .compare-item .compare-label{font-size:13px; color:var(--muted); margin-bottom:8px; font-weight:600;}
#app .img-wrap{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; min-height:160px; display:flex; align-items:center; justify-content:center;}
#app .img-wrap img,#app .img-wrap canvas{max-width:100%; display:block;}
#app .img-wrap.checker{background-image:linear-gradient(45deg,#e9e9ee 25%,transparent 25%),linear-gradient(-45deg,#e9e9ee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9e9ee 75%),linear-gradient(-45deg,transparent 75%,#e9e9ee 75%); background-size:18px 18px; background-position:0 0,0 9px,9px -9px,-9px 0; background-color:#fff;}
#app .controls{margin-top:18px; display:flex; flex-direction:column; gap:12px;}
#app .control-row{display:flex; align-items:center; gap:12px;}
#app .control-row label{width:72px; font-size:14px; color:var(--text); font-weight:600; flex-shrink:0;}
#app .control-row input[type=range]{flex:1; accent-color:var(--primary);}
#app .ctrl-val{width:24px; text-align:center; color:var(--muted); font-size:13px;}
#app .text-input{flex:1; padding:9px 12px; border:1px solid var(--line); border-radius:9px; font-size:14px; background:#fff;}
#app .toolbar-row{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap;}
#app .status{margin-top:14px; padding:12px 14px; border-radius:10px; background:var(--soft); color:var(--muted); font-size:14px; text-align:center;}
#app .status.err{background:#fff0f0; color:#c0392b;}
#app .tip-box{margin-top:18px; padding:14px 16px; background:var(--soft); border-radius:12px; font-size:13px; color:var(--muted); line-height:1.7;}
#app .tip-box strong{color:var(--text);}
#app .btn{display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:10px; font-size:14px; border:1px solid transparent; cursor:pointer; font-weight:600;}
#app .btn-primary{background:var(--primary); color:#fff;}
#app .btn-primary:hover{background:var(--primary-d);}
#app .btn-primary:disabled{opacity:.5; cursor:not-allowed;}
#app .btn-outline{background:#fff; border-color:var(--line); color:var(--text);}
#app .btn svg{width:16px; height:16px;}
@media(max-width:640px){
  #app .compare{grid-template-columns:1fr;}
}