*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{height:100vh;width:100vw;overflow:hidden;color:#f5f5ff;background:#050510}
#bg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
#panel{position:absolute;top:50%;left:9%;transform:translateY(-50%);width:360px;max-width:90vw;display:flex;flex-direction:column;gap:8px;color:#f5f5ff;text-shadow:0 0 7px rgba(0,0,0,.8)}
#title{font-size:1.35rem;text-transform:uppercase;letter-spacing:.08em;text-shadow:0 0 10px rgba(0,0,0,.95)}
#tag{font-size:.7rem;padding:3px 8px;border-radius:999px;border:1px solid rgba(200,200,255,.7);background:rgba(5,5,12,.78);text-transform:uppercase;letter-spacing:.08em;margin-top:2px;display:inline-block}
.label{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:#d5d7ff;text-shadow:0 0 6px rgba(0,0,0,.8);margin-top:6px}
input[type=text],input[type=date],input[type=time],input[type=number],select,textarea{width:100%;padding:8px 10px;border-radius:9px;border:1px solid rgba(130,135,165,.9);background:rgba(14,16,28,.92);color:#f7f7ff;font-size:.86rem;outline:none;backdrop-filter:blur(10px);box-shadow:0 0 12px rgba(0,0,0,.75)}
textarea{resize:vertical;min-height:90px}
input:focus,select:focus,textarea:focus{border-color:#8ba2ff;box-shadow:0 0 14px rgba(160,180,255,.9);background:rgba(18,20,36,.98)}
.btn{margin-top:6px;width:100%;padding:9px 10px;border-radius:9px;border:1px solid rgba(160,160,175,.55);background:rgba(40,40,48,.9);color:#f1f1f5;font-size:.82rem;text-transform:uppercase;letter-spacing:.09em;cursor:pointer;box-shadow:0 0 10px rgba(0,0,0,.7);transition:background .15s,box-shadow .15s,transform .07s}
.btn:hover{transform:translateY(-1px);background:rgba(55,55,65,.96);box-shadow:0 0 14px rgba(190,190,220,.55)}
.btn.primary{background:rgba(65,65,75,.97);border:1px solid rgba(200,200,220,.75);color:#fafafa;box-shadow:0 0 14px rgba(200,200,220,.7)}
.btn.primary:hover{background:rgba(80,80,90,.99);box-shadow:0 0 18px rgba(210,210,235,.9)}
.icon-btn,.mini-btn{border-radius:999px;border:1px solid rgba(170,170,185,.6);background:rgba(40,40,48,.9);color:#f1f1f5;font-size:.78rem;padding:4px 10px;cursor:pointer;text-transform:uppercase;letter-spacing:.08em;box-shadow:0 0 9px rgba(0,0,0,.7)}
.icon-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;padding:0}
.icon-btn:hover,.mini-btn:hover{background:rgba(60,60,70,.96);box-shadow:0 0 12px rgba(200,200,220,.75)}
.overlay{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100%;background:rgba(4,4,12,.96);border-left:1px solid rgba(200,200,240,.3);box-shadow:-14px 0 32px rgba(0,0,0,.95);transform:translateX(100%);transition:transform .18s ease-out;color:#f1f1ff;padding:16px 15px;overflow-y:auto;z-index:10}
.overlay.open{transform:translateX(0)}
.overlay h2{font-size:1.02rem;margin-bottom:6px}
.overlay h3{font-size:.95rem;margin:8px 0 3px}
.overlay p{font-size:.83rem;margin:3px 0;color:#d0d3ff}
.overlay pre{background:#050516;border-radius:8px;padding:8px;font-size:.78rem;white-space:pre-wrap;word-break:break-all;margin:5px 0 10px}
.overlay-close{display:flex;justify-content:flex-end;margin-bottom:6px}
.overlay-close button{border:0;background:transparent;color:#aab1ff;cursor:pointer;font-size:.9rem}
@media(max-width:900px){#panel{left:50%;transform:translate(-50%,-50%);padding:10px;max-width:92vw}}