:root{
  --bg:#fff; --text:#1d1d1f; --muted:#86868b; --line:#e6e6ea;
  --primary:#0071e3; --primary-d:#0058b0; --soft:#f5f6f8;
}
#app{min-height:calc(100vh - 160px);}
#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 .preview{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center; max-height:340px;}
#app .preview img{max-width:100%; max-height:340px; display:block;}
#app .field{margin-top:6px;}
#app .field label{display:block; font-size:14px; font-weight:600; color:var(--text); margin-bottom:8px;}
#app .text-input{width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px; font-size:14px; background:#fff; box-sizing:border-box; font-family:inherit; resize:vertical;}
#app .text-input:focus{outline:none; border-color:var(--primary);}
#app .toolbar-row{display:flex; gap:10px; flex-wrap:wrap;}
#app .status{margin-top:14px; padding:12px 14px; border-radius:10px; background:var(--soft); color:var(--muted); font-size:14px;}
#app .status.err{background:#fff0f0; color:#c0392b;}
#app .status .bar{height:6px; border-radius:4px; background:#e0e0e6; margin-top:8px; overflow:hidden;}
#app .status .bar > i{display:block; height:100%; width:0; background:var(--primary); transition:width .2s;}
#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;}