*{box-sizing:border-box;}
:root{--w:580px;--bg0:#070607;--bg1:#0e0b0f;--cardA:rgba(20,15,20,0.86);--cardB:rgba(12,10,14,0.66);--ink:rgba(230,214,195,0.92);--muted:rgba(200,181,154,0.74);--line:rgba(232,214,176,0.18);--shadow:rgba(0,0,0,0.62);--accent:#b6904e;}
html,body{height:100%;}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:radial-gradient(900px 620px at 15% 12%,rgba(182,144,78,0.16),transparent 60%),radial-gradient(720px 520px at 85% 25%,rgba(62,154,161,0.10),transparent 62%),radial-gradient(820px 520px at 50% 100%,rgba(139,59,59,0.10),transparent 64%),linear-gradient(180deg,var(--bg0),var(--bg1));background-attachment:fixed;overflow-x:hidden;}
.sheet{width:100%;max-width:var(--w);margin:0 auto;padding:14px 12px 24px;position:relative;}
.kkny-card{border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,var(--cardA),var(--cardB));box-shadow:0 12px 30px var(--shadow);padding:16px;position:relative;overflow:hidden;}
.kkny-card::after{content:"";position:absolute;inset:-80px -80px auto -80px;height:210px;background:url("images/veveB.jpg");background-size:720px auto;background-repeat:no-repeat;background-position:20% 0%;opacity:0.08;filter:grayscale(1) contrast(1.05);transform:rotate(6deg);pointer-events:none;}
.kkny-grid{display:grid;grid-template-columns:160px 1fr;gap:12px;align-items:stretch;position:relative;z-index:1;}
.kkny-left{display:flex;}
.kkny-image{width:100%;height:100%;min-height:176px;border:1px solid rgba(232,214,176,0.16);border-radius:12px;overflow:hidden;background:rgba(0,0,0,0.22);box-shadow:0 0 18px rgba(182,144,78,0.14);}
.kkny-image img{width:100%;height:100%;display:block;object-fit:cover;}
.kkny-right{min-width:0;border:1px solid rgba(232,214,176,0.14);border-radius:12px;padding:10px;background:rgba(0,0,0,0.20);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03);display:flex;flex-direction:column;}
.kkny-input{width:100%;min-width:0;border:1px solid rgba(232,214,176,0.16);border-radius:10px;background:rgba(0,0,0,0.28);color:var(--ink);padding:10px 11px;font-size:12px;outline:none;margin:0 0 8px;}
.kkny-input::placeholder{color:var(--muted);}
.kkny-text{width:100%;min-width:0;flex:1;min-height:158px;border:1px solid rgba(232,214,176,0.16);border-radius:10px;background:rgba(0,0,0,0.28);color:var(--ink);padding:10px 11px;font-size:12px;line-height:1.6;outline:none;resize:vertical;margin:0;}
.kkny-text::placeholder{color:var(--muted);}
.kkny-generate{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;margin:14px 0 12px;}
.kkny-generate::before,.kkny-generate::after{content:"";height:1px;flex:1;max-width:180px;background:linear-gradient(90deg,transparent,rgba(232,214,176,0.22),transparent);}
.random-btn{appearance:none;border:none;background:none;cursor:pointer;padding:0 12px;transition:transform 180ms ease;}
.random-btn:hover{transform:scale(1.08);}
.random-btn img{width:70px;height:70px;object-fit:cover;border-radius:999px;border:1px solid rgba(182,144,78,0.35);box-shadow:0 0 16px rgba(182,144,78,0.25);display:block;}
.kkny-result{width:100%;min-height:140px;border:1px solid rgba(232,214,176,0.16);border-radius:12px;background:#050505;color:#9fffa8;padding:12px;font-size:11px;line-height:1.55;resize:vertical;outline:none;position:relative;z-index:1;}
@media (max-width:520px){.kkny-grid{grid-template-columns:1fr;}.kkny-image{min-height:220px;}.kkny-generate::before,.kkny-generate::after{max-width:none;}}



/* SCROLLBAR */
::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-track{
background:rgba(0,0,0,0.4);
border-radius:10px;
}

::-webkit-scrollbar-thumb{
background:linear-gradient(180deg,rgba(182,144,78,0.7),rgba(120,90,40,0.7));
border-radius:10px;
border:1px solid rgba(232,214,176,0.2);
}

::-webkit-scrollbar-thumb:hover{
background:linear-gradient(180deg,rgba(200,160,90,0.9),rgba(140,110,60,0.9));
}

/* Firefox */
*{
scrollbar-width:thin;
scrollbar-color:rgba(182,144,78,0.7) rgba(0,0,0,0.4);
}