*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#f2f3f5;font-family:Arial,Helvetica,sans-serif;color:#171717}
body{min-height:100vh}
.app{max-width:1500px;margin:0 auto;padding:24px;display:grid;grid-template-columns:330px minmax(0,1fr);gap:24px}
.sidebar{background:#fff;border-radius:16px;padding:22px;box-shadow:0 8px 30px rgba(0,0,0,.08);height:max-content;position:sticky;top:20px}
h1{margin:0 0 6px;font-size:18px}
.muted{margin:0 0 24px;color:#777;line-height:1.5}
.label{display:block;font-weight:700;margin:18px 0 8px}
input[type=file],input[type=text]{width:100%}
input[type=text]{padding:12px 13px;border:1px solid #d9d9d9;border-radius:9px;font-size:16px;outline:none;color: #146c58;}
input[type=text]:focus{border-color:#777}
input[type=range]{width:100%;accent-color:#111}
.hint{margin-top:18px;background:#f7f7f7;border-radius:10px;padding:12px;font-size:13px;line-height:1.55;color:#555}
.actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:22px}
button{border:0;border-radius:9px;padding:12px 10px;font-size:14px;font-weight:700;cursor:pointer}
button.primary{background: #137a68;color:#fff}
button.secondary{background:#ececec;color:#111}
.status{font-size:12px;color:#777;margin-top:12px;min-height:16px}
.preview-wrap{min-width:0;background:#dcdcdc;border-radius:16px;padding:20px;display:flex;justify-content:center;align-items:flex-start}
.preview{width:min(100%,900px);display:flex;justify-content:center}
canvas{display:block;width:100%;height:auto;max-height:calc(100vh - 48px);object-fit:contain;box-shadow:0 12px 35px rgba(0,0,0,.22);background:#fff;touch-action:none;user-select:none}
@media(max-width:900px){
 .app{grid-template-columns:1fr;padding:12px}
 .sidebar{position:static}
 .preview-wrap{padding:8px}
 canvas{max-height:none}
}
p.txt_mall {
    font-size: 14px;
    opacity: .5;
    font-style: italic;
}
#photoInput::file-selector-button {
    background-color: #137a68;
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s ease;
    margin-right: 12px;
}

#photoInput::file-selector-button:hover {
    background-color: #0f6153; 
}

#photoInput::-webkit-file-upload-button {
    background-color: #137a68;
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    margin-right: 12px;
}
#photoInput::-webkit-file-upload-button:hover {
    background-color: #0f6153;
}