*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif;background:#fff5eb;color:#333}.app{min-height:100vh;padding-bottom:40px}.header{background:linear-gradient(135deg,#ffb347,#ff8c42,#ff6b35);color:#fff;padding:40px 20px;text-align:center;box-shadow:0 4px 12px #ff6b354d}.brand{margin-bottom:15px}.brand h1{font-size:2.5rem;margin-bottom:10px}.brand-subtitle{font-size:1rem;opacity:.95;margin:5px 0}.brand-name{font-weight:700;font-size:1.3rem;color:#fff5eb;text-shadow:0 2px 4px rgba(0,0,0,.2);letter-spacing:1px}.header p{font-size:1.1rem;opacity:.95}.container{max-width:900px;margin:-30px auto 0;padding:0 20px}.section{background:#fff;border-radius:12px;padding:25px;margin-bottom:20px;box-shadow:0 2px 8px #ff8c4226;border:2px solid #FFE4CC}.section h3{color:#ff6b35;margin-bottom:15px;font-size:1.3rem}.section label{display:block;margin-bottom:8px;font-weight:600;color:#ff8c42}.section input[type=text],.section input[type=number],.section select{width:100%;padding:12px;border:2px solid #FFD4A3;border-radius:8px;font-size:1rem;transition:border-color .3s}.section input:focus,.section select:focus{outline:none;border-color:#ff8c42}.add-platform-form{display:flex;flex-direction:column;gap:15px}.info-text{color:#ff8c42;font-size:.9rem;margin-bottom:10px;padding:8px 12px;background:#fff9f0;border-left:3px solid #FFB347;border-radius:4px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-col{display:flex;flex-direction:column}.form-col label{margin-bottom:8px;font-weight:600;color:#ff8c42;font-size:.9rem}.add-btn{background:linear-gradient(135deg,#ffb347,#ff8c42);color:#fff;border:none;padding:14px 24px;border-radius:8px;font-weight:600;cursor:pointer;transition:transform .2s;width:100%;font-size:1rem}.add-btn:hover:not(:disabled){transform:translateY(-2px)}.add-btn:disabled{opacity:.6;cursor:not-allowed}.platform-chips{display:flex;flex-wrap:wrap;gap:10px}.chip{background:linear-gradient(135deg,#ffb347,#ff8c42);color:#fff;padding:8px 15px;border-radius:20px;display:flex;align-items:center;gap:10px;font-weight:500}.chip-link{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;transition:opacity .3s}.chip-link:hover{opacity:.8}.chip-username{font-size:.9rem;opacity:.9}.chip-streak{font-weight:600}.chip-badge{background:#fff6;padding:2px 6px;border-radius:10px;font-size:.75rem;font-weight:700}.chip button{background:#ffffff4d;border:none;color:#fff;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:18px;line-height:1;transition:background .3s;flex-shrink:0}.chip button:hover{background:#ffffff80}.hint{margin-top:15px;color:#ff8c42;font-size:.9rem;font-style:italic;text-align:center}.preview{text-align:center;padding:20px;background:#fff5eb;border-radius:12px;border:2px dashed #FFB347}.preview img{max-width:100%;border-radius:12px;box-shadow:0 4px 12px #ff6b3533}textarea{width:100%;padding:15px;border:2px solid #FFD4A3;border-radius:8px;font-family:Courier New,monospace;font-size:.9rem;background:#fff9f0;color:#333;resize:vertical;margin-bottom:10px}textarea:focus{outline:none;border-color:#ff8c42}.copy-btn{width:100%;padding:12px;background:linear-gradient(135deg,#ffb347,#ff8c42);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:1rem;cursor:pointer;transition:transform .2s}.copy-btn:hover{transform:translateY(-2px)}@media (max-width: 768px){.header h1{font-size:1.8rem}.brand-name{font-size:1.1rem}.header p{font-size:.95rem}.container{padding:0 15px}.section{padding:20px 15px}.form-row{grid-template-columns:1fr;gap:15px}.form-col label{font-size:.85rem}.section input[type=text],.section input[type=number],.section select{font-size:.95rem;padding:10px}.add-btn{font-size:.95rem;padding:12px 20px}.color-preset{width:35px;height:35px;font-size:1rem}.platform-chips{gap:8px}.chip{padding:6px 12px;font-size:.85rem}.chip-username{font-size:.8rem}.chip-streak{font-size:.85rem}.chip button{width:20px;height:20px;font-size:16px}.streak-summary{grid-template-columns:1fr;gap:10px;padding:15px}.streak-stat{padding:12px}.stat-value{font-size:2rem}.stat-label{font-size:.8rem}.preview{padding:15px}.preview img{max-width:100%;height:auto}textarea{font-size:.8rem;padding:12px}.copy-btn{font-size:.95rem;padding:10px}.section h3{font-size:1.1rem}.hint{font-size:.85rem}.section ol{padding-left:15px;font-size:.9rem}.section ol li{margin-bottom:8px}.github-btn{font-size:.9rem;padding:10px 20px}}@media (max-width: 480px){.header h1{font-size:1.5rem}.brand-name{font-size:1rem}.header p{font-size:.9rem}.section{padding:15px 12px}.section h3{font-size:1rem}.add-btn{font-size:.9rem;padding:10px 16px}.color-preset{width:32px;height:32px;font-size:.9rem}.chip{font-size:.8rem;padding:5px 10px}.stat-value{font-size:1.8rem}.github-btn{font-size:.85rem;padding:8px 16px}}.streak-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:20px;padding:20px;background:linear-gradient(135deg,#fff9f0,#ffe4cc);border-radius:12px;border:2px solid #FFB347}.streak-stat{text-align:center;padding:15px;background:#fff;border-radius:10px;box-shadow:0 2px 8px #ff8c421a}.stat-value{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#ffb347,#ff6b35);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:5px}.stat-label{font-size:.9rem;color:#ff8c42;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.footer{text-align:center;padding:40px 20px;margin-top:40px}.github-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:linear-gradient(135deg,#ffb347,#ff8c42);color:#fff;text-decoration:none;border-radius:8px;font-weight:600;font-size:1rem;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 12px #ff8c424d}.github-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #ff8c4266}.github-btn .octicon{fill:#fff}.github-btn span{font-size:1rem}.section ol{padding-left:20px;margin-top:10px}.section ol li{margin-bottom:10px;color:#555}.section code{background:#fff9f0;padding:2px 8px;border-radius:4px;color:#ff6b35;font-family:Courier New,monospace;font-size:.9rem;border:1px solid #FFE4CC}.color-preset{width:40px;height:40px;border:2px solid #ddd;border-radius:8px;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s}.color-preset:hover{transform:scale(1.1);box-shadow:0 4px 12px #0003}