@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap);.char-counter-container{--primary-color:#46757e;--primary-hover:#365c63;--bg-color:#fff;--text-main:#334155;--text-muted:#64748b;--border-color:#e2e8f0;--error-color:#e11d48;font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;max-width:650px;margin:40px auto;padding:32px;background-color:var(--bg-color);border-radius:16px;box-shadow:0 10px 25px -5px rgba(0,0,0,.05) , 0 8px 10px -6px rgba(0,0,0,.05);border:1px solid var(--border-color);box-sizing:border-box;position:relative;color:var(--text-main)}.char-counter-mode-selector{display:flex;background-color:#f1f5f9;padding:4px;border-radius:12px;margin-bottom:20px;gap:2px}.char-counter-mode-selector label{flex:1;text-align:center;font-size:14px;font-weight:600;padding:10px 12px;cursor:pointer;border-radius:8px;transition:all .2s ease;color:var(--text-muted);display:flex;align-items:center;justify-content:center}.char-counter-mode-selector input[type="radio"]{display:none}.char-counter-mode-selector label:has(input:checked) {background-color:var(--bg-color);color:var(--primary-color);box-shadow:0 2px 4px rgba(0,0,0,.05)}.char-counter-container textarea.char-input{width:100%;min-height:200px;padding:16px;font-size:16px;line-height:1.6;border:2px solid var(--border-color);border-radius:12px;resize:vertical;box-sizing:border-box;transition:border-color .2s , box-shadow .2s;outline:none;background-color:#fafafa}.char-counter-container textarea.char-input:focus{border-color:var(--primary-color);background-color:#fff;box-shadow:0 0 0 4px rgba(70,117,126,.1)}.char-counter-settings{margin:20px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.char-counter-settings label{display:flex;align-items:center;font-size:13px;color:var(--text-muted);font-weight:500}.char-counter-settings input[type="checkbox"]{width:16px;height:16px;margin-right:8px;accent-color:var(--primary-color)}.char-counter-settings input[type="number"]{width:70px;padding:6px 10px;margin-left:8px;border:1px solid var(--border-color);border-radius:6px;font-size:13px}.char-count-display{display:flex;align-items:baseline;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border-color)}.current-mode-label{font-size:14px;font-weight:600;color:var(--text-muted)}.char-count{font-size:32px;font-weight:700;color:var(--primary-color)}.max-length-display{font-size:18px;color:var(--text-muted);font-weight:400}.char-counter-container button.copy-button{width:100%;margin-top:20px;padding:14px;font-size:16px;font-weight:600;background-color:var(--primary-color);color:#fff;border:none;border-radius:10px;cursor:pointer;transition:transform .1s , background-color .2s}.char-counter-container button.copy-button:hover{background-color:var(--primary-hover)}.char-counter-container button.copy-button:active{transform:scale(.98)}.char-limit-indicator{color:var(--error-color);font-size:13px;margin-top:8px;font-weight:600;text-align:center}.toast-notification{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:rgba(0,0,0,.8);backdrop-filter:blur(4px);color:#fff;padding:12px 24px;border-radius:30px;font-size:14px;font-weight:600;pointer-events:none;opacity:0;transition:all .3s cubic-bezier(.16,1,.3,1)}.toast-notification.show{opacity:1;transform:translate(-50%,-60%)}@media (max-width:600px){.char-counter-container{padding:20px;margin:10px}.char-counter-mode-selector{display:grid;grid-template-columns:1fr 1fr}.char-count{font-size:28px}}