* {margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif;}
body {padding:20px;max-width:1600px;margin:0 auto;background:#f5f5f5;}
.container {gap:20px;display:flex;flex-direction:column;}
.title {text-align:center;color:#333;margin-bottom:10px;font-size:18px;}
.row-box {display:flex;gap:20px;width:100%;}
.col-box {flex:1;min-width:300px;}
.section {
    background:#fff;padding:18px;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,0.1);
    display:flex;flex-direction:column;
}
.section h3 {color:#444;margin-bottom:12px;font-size:16px;border-bottom:1px solid #eee;padding-bottom:8px;}
#textInput {
    width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;resize:vertical;font-size:14px;
    flex:1;min-height:120px;outline:none;
}
.drag-area {
    width:100%;border:2px dashed #ccc;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#666;cursor:pointer;transition:all 0.3s;
    flex:1;min-height:120px;
}
.drag-area.active {border-color:#2196F3;background:#f0f8ff;color:#2196F3;}
.drag-area p {text-align:center;font-size:14px;line-height:1.5;}
.algo-wrap {margin-top:8px;}
.algo-group {display:flex;flex-wrap:wrap;gap:12px;margin-bottom:10px;}
.algo-item {display:flex;align-items:center;gap:4px;font-size:14px;}
.result-box {
    width:100%;height:100%;min-height:300px;padding:10px;border:1px solid #ddd;border-radius:4px;resize:vertical;font-size:13px;line-height:1.6;
    background:#fafafa;white-space:pre-wrap;overflow-y:auto;flex:1;
}
.btn-group {display:flex;gap:10px;margin-top:12px;justify-content:center;}
button {padding:8px 16px;border:none;border-radius:4px;background:#2196F3;color:#fff;cursor:pointer;font-size:14px;transition:background 0.2s;}
button:hover {background:#1976D2;}
button.clear {background:#f44336;}
button.clear:hover {background:#d32f2f;}
button.copy {background:#4CAF50;}
button.copy:hover {background:#388E3C;}
.loading {color:#2196F3;font-size:14px;text-align:center;display:none;margin-top:8px;}
.custom-tip {
    position:fixed;top:46px;left:50%;transform:translateX(-50%);padding:5px 20px;border-radius:4px;
    background:rgba(0,0,0,0.75);color:#fff;font-size:14px;text-align:center;z-index:9999;
    opacity:0;transition:opacity 0.2s ease;pointer-events:none;
}
.custom-tip.show {opacity:1;}
@media (max-width:768px) {
    .row-box {flex-direction:column;}
    .col-box {min-width:unset;}
    .custom-tip {width:80%;}
}