*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#fff;--s1:#f7f8fa;--s2:#eef0f4;--s3:#e1e4ea;--s4:#cdd1da;
  --tx:#111827;--t2:#4b5563;--t3:#9ca3af;--t4:#d1d5db;
  --ac:#e8552d;--ach:#cf4420;--acs:rgba(232,85,45,.07);--acb:rgba(232,85,45,.18);
  --green:#059669;--red:#dc2626;--blue:#2563eb;--yellow:#d97706;
  --bd:#e5e7eb;--r:10px;--r2:14px;--r3:16px;
  --f:'Outfit',system-ui,sans-serif;--fm:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.25,1,.5,1);
}
html{scroll-behavior:smooth}
body{font-family:var(--f);background:var(--s1);color:var(--tx);line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--acb);color:var(--ac)}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:4px}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:var(--s4);border-radius:3px}

/* ========== HEADER ========== */
.hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--bd)}
.hdr-inner{max-width:1100px;margin:0 auto;padding:0 1.5rem;height:56px;display:flex;align-items:center;gap:1rem}
.logo{display:flex;align-items:center;gap:.45rem;font-size:.95rem;font-weight:800;letter-spacing:-.03em;cursor:pointer;flex-shrink:0;text-decoration:none;color:var(--tx)}
.logo img{width:22px;height:22px;border-radius:5px}
.hdr-nav{display:flex;gap:.15rem;align-items:center;margin-left:auto}
.hdr-btn{padding:.32rem .6rem;border-radius:7px;font-family:var(--f);font-size:.7rem;font-weight:600;color:var(--t2);background:none;border:1px solid transparent;cursor:pointer;transition:all .12s;white-space:nowrap;text-decoration:none}
.hdr-btn:hover{background:var(--s1);color:var(--tx);border-color:var(--bd)}
.hdr-btn.on{background:var(--acs);color:var(--ac);border-color:var(--acb)}

/* ========== MAIN ========== */
.main{max-width:900px;margin:0 auto;padding:2rem 1.5rem 4rem}

/* Breadcrumb */
.bc{font-size:.7rem;color:var(--t3);margin-bottom:.5rem}
.bc a{color:var(--t3);text-decoration:none;cursor:pointer}.bc a:hover{color:var(--ac)}

/* Page Head */
.ph{margin-bottom:1.5rem}
.ph h1{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;margin-bottom:.2rem}
.ph p{color:var(--t2);font-size:.85rem;max-width:500px;line-height:1.6}
.ph a{color:var(--ac);text-decoration:none}
.kbd{display:inline-flex;padding:.05rem .3rem;border-radius:4px;background:var(--s2);border:1px solid var(--bd);font-family:var(--fm);font-size:.55rem;color:var(--t3);vertical-align:middle}

/* Section */
.sec{background:var(--bg);border:1px solid var(--bd);border-radius:var(--r3);padding:1.25rem;margin-bottom:.9rem}
.sec-t{font-size:.78rem;font-weight:700;color:var(--t2);margin-bottom:.7rem}

/* Result */
.res{background:var(--s1);border:1px solid var(--bd);border-radius:var(--r2);padding:.7rem .9rem;font-family:var(--fm);font-size:.92rem;min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center;word-break:break-all;cursor:pointer;transition:all .1s;position:relative;user-select:all;margin-bottom:.55rem}
.res:hover{background:var(--s2);border-color:var(--s4)}
.res::after{content:'Copy';position:absolute;top:.25rem;right:.45rem;font-family:var(--f);font-size:.52rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--t3);opacity:0;transition:opacity .1s}
.res:hover::after{opacity:1}
.res-l{text-align:left;justify-content:flex-start;white-space:pre-wrap;font-size:.78rem}

/* List */
.rl{background:var(--s1);border:1px solid var(--bd);border-radius:var(--r2);padding:2px;max-height:250px;overflow-y:auto;margin-bottom:.55rem}
.rl-i{display:flex;align-items:center;justify-content:space-between;padding:.45rem .7rem;border-radius:8px;cursor:pointer;transition:background .1s;font-size:.8rem}
.rl-i:hover{background:var(--s2)}
.rl-i .cp{opacity:0;font-size:.55rem;color:var(--t3);font-weight:600;text-transform:uppercase;letter-spacing:.03em}.rl-i:hover .cp{opacity:1}
.rl-i+.rl-i{border-top:1px solid var(--bd)}

/* Buttons */
.btn{padding:.48rem 1rem;border-radius:8px;font-family:var(--f);font-size:.76rem;font-weight:600;cursor:pointer;transition:all .12s;border:none;display:inline-flex;align-items:center;gap:.25rem}
.btn:active{transform:scale(.97)}
.ba{background:var(--ac);color:#fff}.ba:hover{background:var(--ach)}
.ba:disabled{opacity:.4;cursor:not-allowed;transform:none}
.bg{background:var(--s1);color:var(--t2);border:1px solid var(--bd)}.bg:hover{background:var(--s2);color:var(--tx)}
.acts{display:flex;gap:.3rem;flex-wrap:wrap}

/* Inputs */
.inp{width:100%;padding:.48rem .7rem;background:var(--bg);border:1px solid var(--bd);border-radius:8px;color:var(--tx);font-family:var(--f);font-size:.8rem;transition:border .12s}
.inp:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px var(--acs)}
.inp::placeholder{color:var(--t3)}
textarea.inp{min-height:75px;resize:vertical;line-height:1.5}
.sel{padding:.42rem 1.8rem .42rem .65rem;background:var(--bg);border:1px solid var(--bd);border-radius:8px;color:var(--tx);font-family:var(--f);font-size:.76rem;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='%239ca3af'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .55rem center}
.sel:focus{outline:none;border-color:var(--ac)}
.row{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin-bottom:.55rem}
.row-s .sel,.row-s .inp{flex:1;min-width:0}
.field{margin-bottom:.55rem}
.flbl{font-size:.62rem;font-weight:700;color:var(--t3);margin-bottom:.2rem;text-transform:uppercase;letter-spacing:.04em}
.note{font-size:.65rem;color:var(--t3);margin-bottom:.4rem}

/* Range */
.rng{display:flex;align-items:center;gap:.5rem;margin-bottom:.55rem}
.rng input[type=range]{flex:1;-webkit-appearance:none;height:4px;background:var(--s3);border-radius:2px;outline:none}
.rng input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--ac);cursor:pointer;border:2px solid var(--bg);box-shadow:0 0 0 2px var(--acb)}
.rv{font-family:var(--fm);font-size:.76rem;font-weight:600;color:var(--ac);min-width:24px;text-align:center}

/* Checkbox */
.chks{display:flex;gap:.2rem .55rem;flex-wrap:wrap;margin-bottom:.55rem}
.chk{display:flex;align-items:center;gap:.22rem;font-size:.76rem;color:var(--t2);cursor:pointer}
.chk input[type=checkbox]{-webkit-appearance:none;appearance:none;width:14px;height:14px;border:2px solid var(--s4);border-radius:3px;cursor:pointer;position:relative;flex-shrink:0}
.chk input:checked{background:var(--ac);border-color:var(--ac)}
.chk input:checked::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.48rem;color:#fff;font-weight:800}

/* Strength */
.str{display:flex;align-items:center;gap:.45rem;margin-bottom:.55rem}
.str-bar{flex:1;height:4px;background:var(--s3);border-radius:2px;overflow:hidden}
.str-fill{height:100%;border-radius:2px;transition:width .3s,background .3s}
.str-lbl{font-size:.65rem;font-weight:700;min-width:64px;text-align:right}

/* Color */
.clr-big{height:110px;border-radius:var(--r3);margin-bottom:.55rem;display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-size:1.2rem;font-weight:700;cursor:pointer;transition:transform .12s;border:1px solid var(--bd)}
.clr-big:hover{transform:scale(1.003)}
.clr-info{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem;margin-bottom:.55rem}
.clr-chip{background:var(--s1);border:1px solid var(--bd);border-radius:8px;padding:.35rem .45rem;text-align:center;cursor:pointer;font-family:var(--fm);font-size:.7rem;color:var(--t2);transition:all .1s}
.clr-chip:hover{border-color:var(--ac);color:var(--ac)}
.clr-chip small{display:block;font-size:.52rem;color:var(--t3);margin-bottom:.08rem;font-family:var(--f);text-transform:uppercase;letter-spacing:.04em;font-weight:700}

/* Palette */
.pal{display:flex;border-radius:var(--r3);overflow:hidden;margin-bottom:.55rem;height:85px}
.pal-s{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:.35rem;font-family:var(--fm);font-size:.48rem;cursor:pointer;transition:flex .2s var(--ease)}
.pal-s:hover{flex:1.7}
.pal-s span{background:rgba(0,0,0,.5);padding:.04rem .25rem;border-radius:3px;color:#fff;opacity:0;transition:opacity .1s}.pal-s:hover span{opacity:1}

/* Gradient */
.grd-big{height:110px;border-radius:var(--r3);margin-bottom:.55rem;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.5rem;cursor:pointer;border:1px solid var(--bd)}
.grd-big span{font-family:var(--fm);font-size:.6rem;background:rgba(0,0,0,.5);padding:.1rem .4rem;border-radius:99px;color:#fff}

/* QR */
.qr-box{display:flex;justify-content:center;padding:1rem;background:#fff;border-radius:var(--r2);margin-bottom:.55rem;border:1px solid var(--bd)}

/* ========== HOME ========== */
.hero{text-align:center;padding:2.5rem 0 1.5rem}
.hero h1{font-size:2.4rem;font-weight:800;letter-spacing:-.04em;line-height:1.1;margin-bottom:.5rem}
.hero h1 em{font-style:normal;color:var(--ac)}
.hero p{color:var(--t2);font-size:.9rem;max-width:440px;margin:0 auto;line-height:1.6}
.hero-search{max-width:460px;margin:1.5rem auto 0;position:relative}
.hero-search input{width:100%;padding:.65rem 1rem .65rem 2.5rem;background:var(--bg);border:1px solid var(--bd);border-radius:12px;font-family:var(--f);font-size:.88rem;color:var(--tx);box-shadow:0 2px 8px rgba(0,0,0,.04);transition:border .15s,box-shadow .15s}
.hero-search input:focus{outline:none;border-color:var(--ac);box-shadow:0 2px 16px rgba(232,85,45,.1)}
.hero-search input::placeholder{color:var(--t3)}
.hero-search::before{content:'';position:absolute;left:.85rem;top:50%;transform:translateY(-50%);width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}
.divider{height:1px;background:var(--bd);margin:1.5rem 0}
.cat-row{display:flex;gap:.3rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.2rem}
.cat-b{padding:.28rem .7rem;border-radius:99px;border:1px solid var(--bd);background:var(--bg);color:var(--t3);font-family:var(--f);font-size:.7rem;font-weight:600;cursor:pointer;transition:all .12s}
.cat-b:hover,.cat-b.on{background:var(--ac);color:#fff;border-color:var(--ac)}
.hg{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.6rem}
.hc{background:var(--bg);border:1px solid var(--bd);border-radius:var(--r3);padding:1rem;cursor:pointer;transition:all .18s var(--ease);display:flex;flex-direction:column;gap:.2rem}
.hc:hover{border-color:var(--s4);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.06)}
.hc-ico{font-size:1.25rem}
.hc h3{font-size:.82rem;font-weight:700}
.hc p{font-size:.7rem;color:var(--t2);line-height:1.5;flex:1}
.hc-cat{font-size:.52rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--t3);margin-top:.12rem}
.ft{border-top:1px solid var(--bd);padding:1.5rem 0;margin-top:2rem;text-align:center;font-size:.68rem;color:var(--t3)}
.ft a{color:var(--t3);text-decoration:none}.ft a:hover{color:var(--ac)}

/* Spinner & Toast */
.spin{display:inline-block;width:12px;height:12px;border:2px solid var(--s3);border-top-color:var(--ac);border-radius:50%;animation:sp .5s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%) translateY(80px);background:var(--tx);color:#fff;padding:.45rem .95rem;border-radius:8px;font-size:.76rem;font-weight:600;z-index:500;transition:transform .25s var(--ease);pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0)}

.ani{animation:su .2s var(--ease)}
@keyframes su{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Responsive */
@media(max-width:768px){
  .hdr-inner{padding:0 .75rem;gap:.5rem}
  .hdr-nav{gap:0;overflow-x:auto}
  .hdr-btn{font-size:.62rem;padding:.28rem .4rem}
  .main{padding:1.5rem 1rem 3rem}
  .hg{grid-template-columns:1fr 1fr}
  .hero h1{font-size:1.6rem}
  .clr-big,.grd-big{height:85px}
  .clr-info{grid-template-columns:1fr}
}
@media(max-width:480px){.hg{grid-template-columns:1fr}.row{flex-direction:column;align-items:stretch}.row .sel,.row .inp{width:100%}.hdr-nav{display:none}}