@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#111416;--panel:#191d1f;--panel2:#202527;--line:#303638;--text:#f4f7f7;--muted:#8f999b;--teal:#1fc3c5;--teal2:#10a9ad;--danger:#ff6868}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;color:var(--text);background:radial-gradient(800px 400px at 75% 0,#10383a55,transparent 70%),var(--bg);font:14px/1.55 Manrope,system-ui,sans-serif}a{color:inherit;text-decoration:none}button,input,select{font:inherit}.topbar{height:78px;display:flex;align-items:center;padding:0 max(28px,calc((100% - 1380px)/2));border-bottom:1px solid #ffffff12;background:#171b1ddf;backdrop-filter:blur(15px);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:9px}.brand img{width:39px;height:39px}.brand b{font-size:22px}.brand b i{font-style:normal;color:var(--teal)}.brand>span{font-size:9px;font-weight:800;letter-spacing:.18em;color:#728082;border-left:1px solid var(--line);padding-left:12px;margin-left:7px}.topbar nav{display:flex;gap:8px;margin-left:65px}.topbar nav a{padding:10px 16px;color:#aab2b3;font-weight:700;border-radius:8px}.topbar nav a:hover,.topbar nav a.active{background:#252b2d;color:#fff}.topbar nav a.active:after{content:"";display:block;height:2px;background:var(--teal);border-radius:2px;margin:6px 4px -8px}.account{margin-left:auto;display:flex;align-items:center;gap:10px}.account>div:nth-child(2){display:flex;flex-direction:column}.account small,.user-row small{color:var(--muted);font-size:11px}.avatar{width:36px;height:36px;border-radius:9px;background:#173e40;color:var(--teal);display:grid;place-items:center;font-weight:800}.logout{font-size:19px;color:#758082;margin-left:9px}.page{width:min(1380px,calc(100% - 48px));margin:auto;padding:52px 0 80px}.hero{min-height:300px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);margin-bottom:36px;overflow:hidden}.hero>div{max-width:700px}.hero>img{width:300px;filter:drop-shadow(0 25px 55px #00abb133);margin:20px 8% -45px 30px}.eyebrow{color:var(--teal);font-size:11px;font-weight:800;letter-spacing:.2em;margin-bottom:12px}.hero h1,.page-title h1{font-size:54px;line-height:1.08;margin:0 0 20px;letter-spacing:-.045em}.hero h1 em,.page-title h1 em{font-style:normal;color:var(--teal)}.hero p,.page-title p{font-size:16px;color:var(--muted);max-width:620px}.tool-card,.admin-card{border:1px solid var(--line);background:linear-gradient(140deg,#1b2022,#171a1c);border-radius:14px;box-shadow:0 24px 70px #0004}.tool-card{padding:28px}.section-head,.result-head{display:flex;justify-content:space-between;align-items:center}.section-head>div,.result-head>div{display:flex;align-items:center;gap:15px}.section-head h2,.result-head h2{margin:0;font-size:18px}.section-head p,.result-head p{margin:2px 0 0;color:var(--muted);font-size:12px}.step{width:37px;height:37px;display:grid;place-items:center;background:#123638;color:var(--teal);font-weight:800;border-radius:8px}.privacy{color:#62cf9a;background:#153329;padding:7px 11px;border-radius:6px;font-size:9px;font-weight:800;letter-spacing:.1em}.dropzone{height:260px;border:1px dashed #3c4649;border-radius:10px;margin-top:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;background:#15191a;transition:.2s}.dropzone:hover,.dropzone.over{border-color:var(--teal);background:#102224}.dropzone input{display:none}.upload-icon{font-size:28px;color:var(--teal);width:56px;height:56px;border:1px solid #245b5d;background:#153739;border-radius:12px;display:grid;place-items:center;margin-bottom:16px}.dropzone strong{font-size:16px}.dropzone span,.dropzone small{color:var(--muted)}.dropzone small{margin-top:12px;font-size:10px}.result-head{border-top:1px solid var(--line);margin-top:30px;padding-top:25px}.primary,.ghost{border:0;border-radius:7px;font-size:11px;letter-spacing:.08em;font-weight:800;cursor:pointer}.primary{color:#062729;background:var(--teal);padding:13px 18px}.primary:hover{background:#3bd4d6}.primary:disabled{opacity:.4;cursor:not-allowed}.primary span{margin-left:13px}.full{width:100%;display:flex;justify-content:space-between}.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;margin-top:22px}.color-card{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#141719}.checker{height:128px;display:grid;place-items:center;background-color:#d9d9d9;background-image:linear-gradient(45deg,#bdbdbd 25%,transparent 25%),linear-gradient(-45deg,#bdbdbd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#bdbdbd 75%),linear-gradient(-45deg,transparent 75%,#bdbdbd 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.checker canvas{max-width:100%;max-height:128px}.color-meta{padding:10px 12px}.color-meta b{display:block;font-size:12px}.color-meta small{color:var(--muted);font-size:9px}footer{border-top:1px solid var(--line);padding:25px max(24px,calc((100% - 1380px)/2));display:flex;justify-content:space-between;color:#718082;font-size:11px}footer>span{font-weight:800;letter-spacing:.12em}footer>span span{color:var(--teal)}
.auth-body{min-height:100vh;background:radial-gradient(600px 500px at 20% 50%,#0c4b4e55,transparent),#101315}.auth-shell{min-height:100vh;width:min(1120px,calc(100% - 48px));margin:auto;display:grid;grid-template-columns:1fr 430px;align-items:center;gap:100px}.auth-brand img{width:170px;filter:drop-shadow(0 20px 40px #08a8ad35)}.auth-brand>span{display:block;color:var(--teal);font-size:10px;font-weight:800;letter-spacing:.25em;margin:25px 0 14px}.auth-brand h1{font-size:52px;line-height:1.1;margin:0;letter-spacing:-.04em}.auth-brand h1 em{font-style:normal;color:var(--teal)}.auth-brand p{color:var(--muted);font-size:16px}.auth-card{background:#1a1f21;border:1px solid var(--line);border-radius:14px;padding:38px;box-shadow:0 30px 100px #0008}.auth-card h2{font-size:27px;margin:0 0 8px}.auth-card>p{color:var(--muted);margin:0 0 25px}.auth-card label,.add-user label{display:block;font-size:11px;font-weight:700;color:#aeb7b8;margin:15px 0}.auth-card input,.add-user input,.add-user select,.color-row input{display:block;width:100%;margin-top:7px;background:#121617;border:1px solid #343c3e;color:#fff;padding:12px;border-radius:7px;outline:0}.auth-card input:focus,.add-user input:focus,.color-row input:focus{border-color:var(--teal)}.auth-card small{display:block;text-align:center;color:#697476;margin-top:18px;font-size:10px}.alert{padding:12px 15px;border-radius:7px;background:#153b31;color:#70deb0;margin-bottom:18px}.alert.error{background:#3b2020;color:#ff9999}.admin-page{padding-top:40px}.page-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}.page-title h1{font-size:42px;margin-bottom:5px}.page-title p{margin:0}.ghost{padding:12px 15px;border:1px solid var(--line);color:#aab4b5}.admin-grid{display:grid;grid-template-columns:360px 1fr;gap:20px}.admin-card{padding:24px}.card-title{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:17px;margin-bottom:12px}.card-title span{font-size:11px;letter-spacing:.14em;color:var(--teal);font-weight:800}.card-title b{font-size:10px;color:var(--muted)}.user-row{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid #ffffff0b}.user-row>div:nth-child(2){display:flex;flex-direction:column}.user-row form,.you{margin-left:auto}.you{font-size:9px;color:var(--teal);font-weight:800}.icon-danger{border:0;background:#3b2222;color:#ff8989;border-radius:5px;width:27px;height:27px;cursor:pointer}.add-user{border-top:1px solid var(--line);margin-top:18px;padding-top:13px}.add-user h3{font-size:14px}.add-user select{appearance:auto}.color-table{overflow:auto}.color-row{display:grid;grid-template-columns:34px minmax(120px,1fr) 85px 95px 95px;gap:8px;align-items:center;min-width:590px;border-bottom:1px solid #ffffff0a;padding:7px}.color-row input{margin:0;padding:8px}.table-head{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800}.save-colors{float:right;margin-top:20px}
@media(max-width:900px){.topbar{padding:0 18px}.topbar nav{margin-left:25px}.brand>span,.account>div:nth-child(2){display:none}.hero>img{width:220px;margin-right:0}.admin-grid{grid-template-columns:1fr}.auth-shell{grid-template-columns:1fr;gap:30px;padding:50px 0}.auth-brand{text-align:center}.auth-brand img{width:110px}.auth-brand h1{font-size:38px}.auth-brand p{margin-bottom:0}}
@media(max-width:620px){.page{width:min(100% - 28px,1380px);padding-top:25px}.topbar nav{order:3;position:fixed;bottom:0;left:0;right:0;margin:0;background:#191d1f;justify-content:center;padding:8px;border-top:1px solid var(--line)}.hero{min-height:0;padding:30px 0}.hero h1{font-size:39px}.hero>img{display:none}.tool-card{padding:17px}.privacy{display:none}.section-head p{max-width:220px}.result-head{align-items:flex-start;gap:15px}.result-head>div{align-items:flex-start}.color-grid{grid-template-columns:repeat(2,1fr)}footer{padding-bottom:85px;flex-direction:column;gap:5px}.page-title{align-items:flex-start;gap:20px}.page-title h1{font-size:35px}.ghost{white-space:nowrap}.auth-shell{width:min(100% - 28px,1120px)}.auth-brand{display:none}.auth-card{padding:25px}}
.mc-avatar{object-fit:cover;image-rendering:pixelated;border:1px solid #31585a}.auth-card label em{font-style:normal;color:var(--muted);font-weight:400}