body{font-family:"Be Vietnam Pro","Segoe UI",Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(160deg, #edf1ff 0%, #f6faff 100%);margin:0;padding:32px;color:#1e1b4b}.patterns-page{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:32px}.hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}.hero .eyebrow{margin:0;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:rgba(30,27,75,.5)}.hero h1{margin:0;font-size:40px;font-weight:800;color:#1e1b4b}.hero .subtitle{margin:0;font-size:16px;max-width:560px;color:rgba(30,27,75,.7)}.hero .badge{margin-top:8px;display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:18px;background:#0f172a;color:#fff;box-shadow:0 10px 30px rgba(17,24,39,.25)}.hero .badge a{color:#a5b4fc;text-decoration:none}.hero .badge a:hover{text-decoration:underline}.controls-card{display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:16px;padding:18px 22px;border-radius:30px;background:#fff;box-shadow:0 32px 60px rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.15);align-items:center}.control{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}.control .label{font-size:13px;font-weight:600;color:rgba(30,27,75,.7)}.color-picker{width:58px;height:58px;border-radius:999px;background:#e0e7ff;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 2px rgba(99,102,241,.2),0 16px 28px rgba(99,102,241,.15)}.color-picker input[type=color]{width:40px;height:40px;border:none;padding:0;border-radius:50%;cursor:pointer;background:rgba(0,0,0,0)}.slider-control .slider-wrap{width:100%;display:flex;align-items:center;gap:12px}.slider-control .slider-wrap input[type=range]{flex:1;appearance:none;height:10px;border-radius:999px;background:#e0e7ff;outline:none}.slider-control .slider-wrap input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:#6366f1;box-shadow:0 8px 18px rgba(99,102,241,.4);cursor:pointer}.slider-control .slider-wrap input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#6366f1;border:none;box-shadow:0 8px 18px rgba(99,102,241,.4);cursor:pointer}.slider-control .slider-wrap span{min-width:48px;font-weight:600;color:#6366f1}.action-control{align-items:center}.action-control .btn-round{width:52px;height:52px;border-radius:26px;border:none;background:#6366f1;color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 20px 40px rgba(79,70,229,.25)}.action-control .btn-round:hover{background:#4f46e5}.pattern-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:24px}.pattern-card{background:hsla(0,0%,100%,.9);border-radius:28px;padding:18px 18px 20px;box-shadow:0 25px 50px rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.15);display:flex;flex-direction:column;gap:16px;position:relative}.pattern-preview{position:relative;width:100%;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background-color:#eef2ff;border:1px solid rgba(99,102,241,.2)}.pattern-actions{position:absolute;top:14px;right:14px;display:flex;gap:10px}.pattern-actions button{width:32px;height:32px;border-radius:50%;border:none;background:rgba(17,24,39,.92);color:#fff;font-size:14px;display:flex;align-items:center;justify-content:center;cursor:pointer}.pattern-actions button:hover{background:#111827}.pattern-name{text-align:center;font-weight:600;color:#1e1b4b}.empty-message{text-align:center;color:rgba(15,23,42,.6);font-size:15px}@media(max-width: 960px){body{padding:24px}.controls-card{grid-template-columns:repeat(2, minmax(0, 1fr))}}@media(max-width: 640px){body{padding:18px}.controls-card{grid-template-columns:1fr}.hero h1{font-size:32px}}