@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap");
:root{--primary:#60c6dc;--primary-dark:#2ca9c2;--bg:#071116;--panel:#0f2028;--panel-soft:#132a34;--ink:#eefbff;--muted:#a8c3cc;--line:rgba(96,198,220,.22);--shadow:rgba(0,0,0,.34)}
*{font-family:"Poppins",Arial,sans-serif;margin:0;padding:0;box-sizing:border-box}
body{min-height:100vh;padding:48px 24px 24px;color:var(--ink);display:flex;align-items:flex-start;justify-content:center;background:radial-gradient(circle at top left,rgba(96,198,220,.18),transparent 34rem),linear-gradient(135deg,#071116 0%,#0b1820 100%)}
.page{width:min(1116px,100%);display:grid;grid-template-columns:360px minmax(0,705px);gap:51px;align-items:start;justify-content:center}
.tool-card,.menu{background:rgba(15,32,40,.92);border:1px solid var(--line);border-radius:8px;box-shadow:0 20px 50px var(--shadow)}
.menu{padding:14px}.menu a{display:block;padding:16px;border-radius:8px;color:var(--ink);text-decoration:none;background:var(--panel-soft);border:1px solid transparent}.menu a+a{margin-top:10px}.menu a:hover{border-color:var(--primary);color:var(--primary)}.menu strong{display:block;margin-bottom:6px;font-size:17px}.menu span{display:block;color:var(--muted);font-size:14px;line-height:1.5}
.wrapper{min-height:580px;padding:26px;transition:all .3s linear}.wrapper.active{min-height:580px}
header h1{font-size:30px;font-weight:700}header p{margin-top:6px;margin-bottom:22px;color:var(--muted);font-size:15px;line-height:1.6}
.wrapper form{height:280px;display:flex;align-items:center;justify-content:center;text-align:center;background:#091820;border:1px dashed var(--primary);border-radius:8px;transition:all .3s linear;user-select:none;cursor:pointer}.wrapper.active form{height:225px;pointer-events:none}.wrapper form img{max-width:180px;display:none}.wrapper.active form img{display:block}.wrapper.active form .content{display:none}.wrapper form .content p{color:var(--primary);font-size:18px;font-weight:700}.wrapper form .content span{display:block;margin-top:8px;color:var(--muted);font-size:14px}
.wrapper .details{margin-top:20px;opacity:0;pointer-events:none}.wrapper.active .details{opacity:1;pointer-events:auto;transition:all .3s linear}.wrapper .details textarea{width:100%;height:128px;outline:none;border:1px solid var(--line);border-radius:8px;resize:none;color:var(--ink);background:#091820;font-size:16px;padding:10px 15px}.wrapper .details textarea::-webkit-scrollbar{width:0}.wrapper .details textarea:hover::-webkit-scrollbar{width:5px}.wrapper .details textarea:hover::-webkit-scrollbar-track{background:none}.wrapper .details textarea:hover::-webkit-scrollbar-thumb{background:var(--primary);border-radius:5px}
.wrapper .details .buttons{display:flex;margin-top:16px;align-items:center;justify-content:space-between;gap:12px}.wrapper .details .buttons button{height:50px;width:100%;outline:none;border:0;font-size:16px;font-weight:700;cursor:pointer;color:#061217;background:var(--primary);border-radius:8px;transition:all .2s linear}.wrapper .details .buttons button.close{color:var(--primary);background:transparent;border:1px solid var(--line)}.wrapper .details .buttons button:active{transform:scale(.97)}
@media(max-width:820px){body{padding:16px;align-items:flex-start}.page{grid-template-columns:1fr;gap:18px}.wrapper{padding:22px 18px;min-height:545px}.wrapper.active{min-height:545px}}