:root{--primary-50:#f0f9ff;--primary-100:#e0f2fe;--primary-200:#bae6fd;--primary-300:#7dd3fc;--primary-400:#38bdf8;--primary-500:#0ea5e9;--primary-600:#0284c7;--primary-700:#0369a1;--primary-800:#075985;--primary-900:#0c4a6e;--gradient-bg:linear-gradient(160deg,#f3f7ff 0%,#e3eeff 100%);--gradient-card:linear-gradient(135deg,#e0f2ff 0%,#c2e5ff 100%);--gradient-accent:linear-gradient(90deg,#4facfe 0%,#00f2fe 100%);--text-primary:#1a365d;--text-secondary:#4a5568;--text-light:#f8fafc;--link-normal:#3182ce;--link-hover:#63b3ed;--link-active:#2c5282;--shadow-sm:0 1px 3px rgba(0,0,0,0.1);--shadow-md:0 4px 6px rgba(0,0,0,0.1);--shadow-lg:0 10px 15px rgba(0,0,0,0.1);--transition-fast:all 0.15s ease;--transition-normal:all 0.3s ease;--transition-slow:all 0.5s ease}*{margin:0;padding:0;box-sizing:border-box;font-family:"Vazirmatn",sans-serif;font-weight:500}html,body{width:100%;min-height:100vh;scroll-behavior:smooth}body{background:var(--gradient-bg);color:var(--text-primary);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:20px;line-height:1.6}.con{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;width:100%;max-width:800px;padding:30px;border-radius:24px;background-color:#fff;box-shadow:var(--shadow-lg);margin:20px auto;transition:var(--transition-normal)}.color{display:flex;flex-direction:column;align-items:center;gap:12px;width:120px;padding:15px;border-radius:16px;background:var(--gradient-card);box-shadow:var(--shadow-sm);transition:var(--transition-fast);position:relative}.color:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}.bg{width:100%;aspect-ratio:1/1;border-radius:12px;cursor:pointer;box-shadow:var(--shadow-sm);transition:var(--transition-fast);border:2px solid #fff}.bg:hover{transform:scale(1.05);box-shadow:0 0 0 3px var(--primary-200)}.color input[type="text"]{width:100%;background:rgba(255,255,255,0.8);border:1px solid var(--primary-200);border-radius:8px;padding:8px;text-align:center;font-size:14px;color:var(--text-primary);transition:var(--transition-fast)}.color input[type="text"]:focus{outline:none;border-color:var(--primary-400);box-shadow:0 0 0 2px var(--primary-100)}.remove{position:absolute;top:-10px;right:-10px;width:28px;height:28px;border-radius:50%;background:var(--gradient-accent);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm);transition:var(--transition-fast);z-index:2}.remove:hover{transform:scale(1.1);background:#ff4757}.remove img{width:60%;filter:brightness(0) invert(1)}.add{background:rgba(255,255,255,0.5);border:2px dashed var(--primary-300);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition-normal)}.add:hover{background:rgba(255,255,255,0.8);border-color:var(--primary-500)}.addbg{width:60px;height:60px;display:flex;align-items:center;justify-content:center;opacity:.7;transition:var(--transition-fast)}.add:hover .addbg{opacity:1;transform:scale(1.1)}header{width:100%;max-width:800px;display:flex;justify-content:center;align-items:center;padding:20px;margin-bottom:20px;border-radius:16px}header img{height:40px;width:auto}footer{width:100%;max-width:800px;text-align:center;padding:20px;margin-top:20px;color:var(--text-secondary);font-size:14px}.pickr .pcr-button{z-index:-111;opacity:0}@media(max-width:768px){.con{padding:20px 15px;gap:15px}.color{width:calc(50% - 20px)}header{flex-direction:column;gap:15px;padding:15px}}@media(max-width:480px){body{padding:15px}.color{width:100%}.con{border-radius:16px;padding:15px 10px}}a{color:var(--link-normal);text-decoration:none;transition:color .3s ease}a:hover{color:var(--link-hover)}a:active{color:var(--link-active)}.site-footer{background:#fff;color:var(--text-primary);padding:1.5rem 0;text-align:center;box-shadow:var(--shadow-sm);margin-top:2rem;border-radius:0 0 16px 16px}.footer-content{max-width:800px;margin:0 auto;padding:0 20px;display:flex;flex-direction:column;gap:.5rem}.copyright{font-size:.9rem;margin:0}.footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem}.separator{color:var(--text-primary)}.author-link,.footer-link{color:var(--link-normal);text-decoration:none;transition:var(--transition-fast)}.author-link:hover,.footer-link:hover{color:var(--text-primary);text-decoration:underline}@media(max-width:480px){.footer-content{flex-direction:column}.footer-links{flex-direction:column;align-items:center;gap:0}.separator{display:none}}