:root{
	--bg:#071029;
	--card:#071e37;
	--muted:#233049;
	--accent:#06b6d4;
	--glass:rgba(255,255,255,0.04);
}
html,body{height:100%}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;margin:0;padding:36px;background:linear-gradient(180deg,#031027 0%, #071029 50%, #07102a 100%);color:#e6eef8;display:flex;align-items:flex-start;justify-content:center}
main{width:min(920px,96%)}
.hero{position:relative;padding:28px;border-radius:12px;background:linear-gradient(135deg, rgba(6,182,212,0.06), rgba(125,211,252,0.03));backdrop-filter:blur(6px);box-shadow:0 10px 40px rgba(2,6,23,0.6);overflow:hidden}
.brand{
	display:flex;align-items:center;gap:14px;margin-bottom:8px
}
.logo{width:56px;height:56px;border-radius:12px;background:linear-gradient(90deg,#06b6d4,#7dd3fc);box-shadow:0 6px 16px rgba(6,182,212,0.12);display:flex;align-items:center;justify-content:center;color:#022; font-weight:700}
.title{font-size:1.4rem;margin:0}
.subtitle{color:#9fcfe3;margin-top:4px;font-size:0.94rem}

.card{margin-top:18px;background:var(--card);border-radius:12px;padding:18px;border:1px solid var(--glass);transform:translateY(12px);opacity:0;animation:cardIn .6s ease forwards}
@keyframes cardIn{to{transform:none;opacity:1}}

label{display:block;margin:10px 0;color:#cfeefb}
input,textarea,select{width:100%;padding:10px;border-radius:10px;border:1px solid var(--muted);background:transparent;color:inherit;outline:none;transition:box-shadow .18s,transform .12s,border-color .15s}
input:focus,textarea:focus,select:focus{box-shadow:0 6px 20px rgba(6,182,212,0.12);border-color:var(--accent);transform:translateY(-2px)}

.actions{display:flex;gap:12px;align-items:center;margin-top:14px}
button{background:linear-gradient(90deg,var(--accent),#7dd3fc);border:none;color:#012;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:600;box-shadow:0 8px 24px rgba(6,182,212,0.12);transition:transform .12s,box-shadow .12s}
button:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(6,182,212,0.16)}
a{color:#7dd3fc;text-decoration:none}
pre{background:rgba(0,8,16,0.4);padding:12px;border-radius:8px;color:#bfe6fb;overflow:auto}

.floating-bg{position:absolute;inset:-20% -10% auto auto;width:480px;height:480px;border-radius:50%;filter:blur(36px);opacity:.12;background:conic-gradient(from 120deg,#06b6d4,#7dd3fc,#60a5fa)}

.toast{position:fixed;right:24px;bottom:24px;background:#062233;color:#dff9ff;padding:12px 16px;border-radius:10px;box-shadow:0 10px 30px rgba(2,6,23,0.6);transform:translateY(18px) scale(.98);opacity:0;pointer-events:none;transition:all .28s cubic-bezier(.2,.9,.24,1)}
.toast.show{opacity:1;transform:none;pointer-events:auto}

.rating-star{display:inline-block;transform-origin:50% 50%;transition:transform .18s}
.rating-star.pop{transform:scale(1.28) rotate(-8deg)}

.profile-summary{margin-bottom:16px;display:grid;grid-template-columns:1fr;gap:8px}
.profile-pill{padding:12px 14px;border-radius:12px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:.96rem;color:#d4f1ff}
.button-link{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.08);color:#e9f8ff;text-decoration:none;transition:transform .12s,background .15s}
.button-link:hover{transform:translateY(-2px);background:rgba(255,255,255,0.14)}

.dashboard-grid{display:grid;gap:24px}
.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:12px}
.summary-card{padding:18px;border-radius:18px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);backdrop-filter:blur(12px);min-height:120px}
.summary-card h3{margin:0;font-size:.95rem;color:#c2efff;text-transform:uppercase;letter-spacing:.08em}
.summary-card p{margin:12px 0 0;font-size:1.8rem;font-weight:700;color:#f8feff}
.summary-card span{color:#8ed7ff;font-size:.95rem}
.chart-card{padding:18px;border-radius:18px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);backdrop-filter:blur(12px)}
.chart-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;color:#c2efff}
.chart-title h3{margin:0;font-size:1rem}
.bar-row{display:flex;align-items:center;gap:12px;margin:10px 0}
.bar-label{width:50px;color:#9ad8ff}
.bar-track{background:rgba(255,255,255,0.08);height:12px;border-radius:999px;overflow:hidden;flex:1}
.bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#06b6d4,#7dd3fc);transition:width .4s ease}
.chart-list{display:grid;gap:12px}
.chart-item{display:flex;justify-content:space-between;gap:16px;padding:14px 12px;background:rgba(255,255,255,0.04);border-radius:14px;border:1px solid rgba(255,255,255,0.08)}
.chart-item strong{color:#e2faff}
.review-list{display:grid;gap:14px;margin-top:16px}
.review-card{padding:16px;border-radius:18px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);display:grid;gap:8px}
.review-card h4{margin:0;font-size:1rem}
.review-card p{margin:0;color:#d6eeff}
.review-card small{color:#8dbcd4}
.dashboard-header{display:flex;justify-content:space-between;align-items:center;gap:16px}
.dashboard-header button{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);color:#e9f8ff;padding:10px 16px;border-radius:12px;cursor:pointer;transition:transform .12s,background .15s}
.dashboard-header button:hover{transform:translateY(-2px);background:rgba(255,255,255,0.14)}

@media (max-width:900px){.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.summary-grid{grid-template-columns:1fr}.dashboard-header{flex-direction:column;align-items:flex-start}}
@media (max-width:640px){.brand{gap:10px}.logo{width:48px;height:48px}}