* { margin:0; padding:0; box-sizing:border-box; }
        :root { --primary:#66BCB4; --dark:#0e0e0e; --bg:#f9faf5; --border:#e0e0e0; --muted:#888; }
        body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--dark); min-height:100vh; }
        nav { display:flex; align-items:center; padding:0 40px; height:64px; background:white; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50; }
        .logo { font-size:22px; font-weight:700; text-decoration:none; color:var(--primary); }
        .nav-back { display:flex; align-items:center; gap:8px; margin-left:24px; color:var(--muted); font-size:13px; text-decoration:none; }
        .nav-back:hover { color:var(--dark); }
        .nav-right { margin-left:auto; display:flex; gap:12px; }
        .btn-login { background:none; border:1px solid var(--border); padding:8px 18px; border-radius:100px; font-size:13px; cursor:pointer; }
        .btn-start { background:var(--dark); color:white; border:none; padding:9px 20px; border-radius:100px; font-size:13px; font-weight:500; cursor:pointer; }
        .tool-hero { text-align:center; padding:60px 40px 40px; }
        .tool-icon-big { width:72px; height:72px; background:#fffbf0; border-radius:20px; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:32px; }
        .tool-hero h1 { font-size:36px; font-weight:700; letter-spacing:-1px; margin-bottom:10px; }
        .tool-hero p { font-size:16px; color:var(--muted); max-width:480px; margin:0 auto; }
        .tool-area { max-width:800px; margin:0 auto; padding:0 40px 80px; }
        .drop-zone { border:2px dashed var(--border); border-radius:20px; padding:48px 40px; text-align:center; cursor:pointer; transition:all .2s; background:white; margin-bottom:16px; }
        .drop-zone:hover,.drop-zone.dragover { border-color:var(--primary); background:#f0fffc; }
        .drop-zone-icon { font-size:36px; color:var(--primary); margin-bottom:12px; }
        .drop-zone h3 { font-size:16px; font-weight:600; margin-bottom:6px; }
        .drop-zone p { font-size:13px; color:var(--muted); margin-bottom:16px; }
        .btn-select { background:var(--primary); color:white; border:none; padding:10px 24px; border-radius:100px; font-size:14px; font-weight:600; cursor:pointer; }
        #fileInput { display:none; }
        .options-panel { background:white; border:1px solid var(--border); border-radius:16px; padding:24px; margin-bottom:16px; display:none; }
        .options-panel.visible { display:block; }
        .file-info-row { display:flex; align-items:center; gap:12px; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--border); }
        .file-info-icon { width:40px; height:40px; background:#fff0f0; border-radius:10px; display:flex; align-items:center; justify-content:center; }
        .file-info-name { flex:1; font-size:14px; font-weight:600; }
        .btn-remove { background:none; border:1px solid var(--border); width:30px; height:30px; border-radius:8px; cursor:pointer; color:var(--muted); font-size:12px; }
        .section-title { font-size:14px; font-weight:600; margin-bottom:12px; }
        .rotation-btns { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
        .rotation-btn { border:2px solid var(--border); border-radius:12px; padding:16px; cursor:pointer; text-align:center; transition:all .15s; background:white; font-family:inherit; }
        .rotation-btn:hover { border-color:var(--primary); background:#f0fffc; }
        .rotation-btn.selected { border-color:var(--primary); background:#f0fffc; }
        .rotation-btn-icon { font-size:24px; margin-bottom:6px; }
        .rotation-btn-label { font-size:13px; font-weight:600; }
        .pages-option { margin-bottom:20px; }
        .pages-option label { font-size:13px; font-weight:500; display:block; margin-bottom:8px; }
        .pages-radio { display:flex; gap:12px; flex-wrap:wrap; }
        .radio-item { display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer; }
        .custom-pages { margin-top:10px; display:none; }
        .custom-pages input { width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:10px; font-size:13px; outline:none; font-family:inherit; }
        .custom-pages input:focus { border-color:var(--primary); }
        .btn-rotate { width:100%; background:var(--primary); color:white; border:none; padding:16px; border-radius:12px; font-size:15px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; }
        .btn-rotate:hover { opacity:.85; }
        .result-area { display:none; background:white; border:1px solid var(--border); border-radius:16px; padding:24px; }
        .result-area.visible { display:block; }
        .result-actions { display:flex; gap:10px; }
        .btn-download { flex:1; background:var(--dark); color:white; border:none; padding:14px; border-radius:12px; font-size:14px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
        .btn-download:hover { opacity:.85; }
        .btn-again { background:none; border:1px solid var(--border); padding:14px 20px; border-radius:12px; font-size:14px; cursor:pointer; }
        .btn-again:hover { background:var(--bg); }
        .privacy-badge { display:flex; align-items:center; justify-content:center; gap:8px; font-size:12px; color:var(--muted); margin-top:16px; }
        .privacy-badge i { color:var(--primary); }
        .success-msg { text-align:center; padding:16px; background:#f0fffc; border-radius:12px; margin-bottom:20px; font-size:14px; color:#217346; font-weight:600; }