:root{
 --pink:#f8c9dc; --pink2:#ffeaf3; --pink3:#e99aba;
 --green:#ccebd2; --green2:#eaf8ed; --green3:#86c99a;
 --text:#553f4b; --white:#fffdfd; --shadow:0 12px 30px rgba(128,80,105,.12);
}
*{box-sizing:border-box} body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);
background:linear-gradient(135deg,#fff8fb 0%,#fff 45%,#f2fff4 100%);min-height:100vh}
a{text-decoration:none;color:inherit}.topbar{height:70px;background:linear-gradient(90deg,var(--pink2),var(--green2));
display:flex;align-items:center;justify-content:space-between;padding:0 25px;box-shadow:var(--shadow);position:sticky;top:0;z-index:5}
.brand{font-size:22px;font-weight:800}.dino{font-size:30px;vertical-align:middle}.top-actions{display:flex;gap:10px;align-items:center}
.user-pill,.badge{background:#fff;border:1px solid #f0d8e2;border-radius:999px;padding:8px 12px}.app{display:flex;min-height:calc(100vh - 110px)}
.sidebar{width:245px;padding:22px 14px;background:rgba(255,255,255,.8);border-right:1px solid #f0e2e8}
.side-title{font-weight:800;padding:10px 14px;color:#8c5c71}.sidebar a{display:block;padding:12px 14px;margin:5px 0;border-radius:14px}
.sidebar a:hover{background:linear-gradient(90deg,var(--pink2),var(--green2));transform:translateX(2px)}
.content{flex:1;padding:28px;max-width:1400px}.footer{text-align:center;padding:15px;background:#fff6fa;color:#9b7182}
h1{margin-top:0}.subtitle{color:#8a7280}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.card{background:rgba(255,255,255,.9);border:1px solid #f1dfe7;border-radius:22px;padding:20px;box-shadow:var(--shadow)}
.stat{font-size:32px;font-weight:800;margin-top:8px}.icon{font-size:32px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.btn{display:inline-block;border:0;border-radius:12px;padding:10px 15px;background:linear-gradient(135deg,var(--pink3),#d8f1dc);
color:#553f4b;font-weight:700;cursor:pointer}.btn.green{background:linear-gradient(135deg,#b9e7c3,#e7f8e9)}
.btn.danger{background:#ffd5df}.btn.small{padding:7px 10px;font-size:13px}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden}th,td{padding:11px;border-bottom:1px solid #f1e5ea;text-align:left}
th{background:linear-gradient(90deg,#ffe9f1,#eaf8ed)}tr:hover td{background:#fffafd}
input,select,textarea{width:100%;padding:11px;border:1px solid #e5ccd7;border-radius:11px;background:#fff;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--green3);box-shadow:0 0 0 3px #dff5e4}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.full{grid-column:1/-1}.notice{padding:13px;border-radius:14px;background:#fff3c9;margin-bottom:15px}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#ffe8f1,#e4f8e8)}
.login-card{width:420px;max-width:100%;background:#fff;padding:35px;border-radius:28px;box-shadow:var(--shadow);text-align:center}
.dino-big{font-size:72px}.search{display:flex;gap:10px}.search input{flex:1}
.glitter-card{position:relative;overflow:hidden;background:linear-gradient(135deg,#ffdce9,#fff,#dff5e4);
border:2px solid #f1b9ce}.glitter-card:before{content:"✦ ✧ ✦ ✧ ✦";position:absolute;top:8px;right:12px;color:#fff;font-size:20px;opacity:.9;letter-spacing:7px;animation:sparkle 1.8s infinite}
@keyframes sparkle{50%{opacity:.35;transform:scale(1.1)}}.member-card{max-width:520px;padding:25px;border-radius:25px;min-height:290px}
.member-head{display:flex;justify-content:space-between;gap:10px}.member-code{font-weight:800}.barcode{font-family:monospace;letter-spacing:5px;font-size:22px;background:#fff;padding:8px;border-radius:10px}
.cover{width:70px;height:90px;object-fit:cover;border-radius:8px;background:#f7e7ee}.empty{padding:35px;text-align:center;color:#9b7b89}
@media(max-width:800px){.sidebar{width:190px}.content{padding:18px}.form-grid{grid-template-columns:1fr}}
@media(max-width:600px){.sidebar{display:none}.topbar{padding:0 12px}.brand{font-size:17px}.content{padding:14px}.grid{grid-template-columns:1fr}}