:root{font-family:Arial,"Microsoft JhengHei",sans-serif;color:#203c3f;background:#f3f7f7}*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;gap:18px;background:#fff;border-bottom:3px solid #14747b;padding:12px 24px}header img{width:128px;height:auto}header div{display:grid;gap:4px}header strong{letter-spacing:3px;color:#14747b}header small{color:#667b7d}#offline{margin-left:auto;font-size:11px;color:#14747b;font-weight:700}main{max-width:1400px;margin:18px auto;padding:0 16px;display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px}.workspace,.controls{background:white;border:1px solid #d9e5e4;border-radius:13px;padding:16px;box-shadow:0 2px 9px #1138390a}.tabs{display:flex;gap:7px;margin-bottom:12px}.tabs button{flex:1;background:#e7f0ef;color:#315b60}.tabs button.selected{background:#14747b;color:white}button,.upload{border:0;border-radius:8px;padding:12px 13px;background:#14747b;color:white;font-weight:700;cursor:pointer;text-align:center;font-size:14px}button:focus-visible,.upload:focus-within{outline:3px solid #7ebbc0}.muted,.upload.secondary{background:#e8f1f0;color:#1a6269}.preview{position:relative;display:flex;justify-content:center;align-items:center;min-height:470px;background:#e7eeee;border-radius:10px;padding:12px;touch-action:none;overflow:hidden}#crop{display:block;max-width:100%;height:auto;cursor:grab;background:white;box-shadow:0 3px 16px #0002;touch-action:none}#crop:active{cursor:grabbing}#empty{position:absolute;text-align:center;line-height:2;color:#71878a;pointer-events:none}#empty small{font-size:12px}.hint,.notice{font-size:12px;color:#657b7e;line-height:1.7}.controls{display:flex;flex-direction:column;gap:12px}.slot-label{display:flex;justify-content:space-between;color:#668082}.slot-label strong{color:#14747b}.controls label{font-size:13px;font-weight:700;display:grid;gap:7px}.controls select,.controls input[type=number]{width:100%;padding:10px;border:1px solid #bfd0cf;border-radius:7px;background:#fff}.controls input[type=range]{width:100%;accent-color:#14747b}.upload{display:block;position:relative}.upload input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}.free-row{display:flex;gap:8px}.line{height:1px;background:#dce8e7;margin:2px 0}#status{min-height:18px;font-size:12px;color:#14747b}@media(max-width:850px){main{grid-template-columns:1fr}.preview{min-height:300px}header{padding:12px}header img{width:95px}header small{font-size:10px}.controls{padding:14px}}@media(max-width:450px){main{padding:0 8px}.workspace{padding:10px}.tabs button{padding:10px 4px;font-size:12px}.preview{padding:6px;min-height:235px}header{gap:10px}#offline{display:none}}

/* I1B: touch-friendly controls and device safe areas */
body{padding-bottom:env(safe-area-inset-bottom,0px)}header{padding-top:max(12px,env(safe-area-inset-top,0px))}main{padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}.quick-actions{display:flex;gap:8px;flex-wrap:wrap}.quick-actions button{flex:1 1 110px;min-height:44px}.controls button,.tabs button,.upload{min-height:44px}.controls input[type=range]{min-height:36px}.preview{overscroll-behavior:contain}#crop{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}@media (pointer:coarse){.controls input[type=range]{min-height:44px}.tabs button{min-height:48px}}@media(min-width:851px) and (orientation:landscape){main{grid-template-columns:minmax(0,1fr) 335px}}@media(max-width:850px){main{grid-template-columns:1fr}.workspace{order:0}.controls{order:1}}