*{box-sizing:border-box}
:root{--ink:#0f172a;--muted:#64748b;--primary:#4f46e5;--cyan:#0891b2;--line:#e2e8f0;--soft:#f8fafc}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.v7-topbar{position:sticky;top:0;z-index:100;background:#ffffffd9;backdrop-filter:blur(18px);border-bottom:1px solid #e2e8f080}
.v7-topinner{max-width:1180px;margin:auto;padding:12px 20px;display:flex;justify-content:space-between;align-items:center}
.v7-brand{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--ink)}.v7-brand-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#4f46e5,#06b6d4);box-shadow:0 8px 20px #4f46e533}
.v7-mini{font-size:10px;color:var(--muted);font-weight:700}
.v7-hero{padding:45px 20px 35px;background:linear-gradient(180deg,#f7f8ff 0,#fff 100%);position:relative;overflow:hidden}
.v7-hero:before,.v7-hero:after{content:"";position:absolute;border-radius:50%;filter:blur(3px);pointer-events:none}.v7-hero:before{width:360px;height:360px;background:#c4b5fd30;left:-120px;top:-150px}.v7-hero:after{width:330px;height:330px;background:#67e8f933;right:-100px;top:20px}
.v7-hero-inner{max-width:1180px;margin:auto;position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center}
.v7-eyebrow{display:inline-flex;align-items:center;gap:8px;color:#4338ca;background:#eef2ff;border:1px solid #c7d2fe;padding:8px 12px;border-radius:999px;font-size:11px;font-weight:900}
.v7-title{font-size:clamp(36px,5vw,62px);line-height:1.02;letter-spacing:-3px;margin:16px 0 14px;color:var(--ink)}.v7-title span{color:#4f46e5}.v7-desc{color:var(--muted);line-height:1.75;max-width:580px}
.v7-visual{min-height:340px;position:relative;display:grid;place-items:center}.v7-phone{width:245px;height:440px;border:8px solid #0f172a;border-radius:38px;background:#fff;box-shadow:0 30px 80px #0f172a25;transform:rotate(4deg);overflow:hidden;position:relative;animation:phoneFloat 5s ease-in-out infinite}
.v7-phone-top{height:28px;background:#0f172a;width:90px;border-radius:0 0 16px 16px;margin:auto}.v7-phone-body{padding:20px}.v7-phone-chip{height:70px;border-radius:20px;background:linear-gradient(135deg,#4f46e5,#06b6d4);color:#fff;padding:13px;font-size:10px}.v7-phone-line{height:12px;background:#eef2ff;border-radius:8px;margin-top:12px}.v7-phone-line.short{width:65%}.v7-phone-btn{height:45px;background:#4f46e5;border-radius:13px;margin-top:25px;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:900}
.v7-float{position:absolute;padding:12px 15px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 15px 35px #0f172a15;font-size:11px;font-weight:900;display:flex;gap:8px;align-items:center;animation:float 4s ease-in-out infinite}.v7-float.a{top:30px;left:5%}.v7-float.b{bottom:35px;right:5%;animation-delay:1s}.v7-float.c{top:45%;right:0;animation-delay:2s}
.v7-section{padding:55px 20px}.v7-section.soft{background:#f8fafc}.v7-container{max-width:1180px;margin:auto}.v7-heading{text-align:center;margin-bottom:30px}.v7-heading h2{font-size:clamp(26px,4vw,40px);letter-spacing:-1.5px;margin:0 0 8px}.v7-heading p{color:var(--muted);font-size:13px;line-height:1.7}
.v7-agenda-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.v7-agenda{background:#fff;border:1px solid var(--line);border-radius:25px;padding:20px;transition:.25s;position:relative;overflow:hidden}.v7-agenda:hover{transform:translateY(-6px);box-shadow:0 22px 55px #0f172a12}.v7-agenda:before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,#4f46e5,#06b6d4)}
.v7-agenda-head{display:flex;justify-content:space-between;align-items:center}.v7-calendar{width:50px;height:50px;border-radius:16px;background:#eef2ff;display:grid;place-items:center;font-size:24px}.v7-open{font-size:9px;font-weight:900;color:#15803d;background:#dcfce7;padding:6px 9px;border-radius:99px}.v7-agenda h3{font-size:15px;line-height:1.4;margin:17px 0 10px}.v7-meta{color:var(--muted);font-size:11px;line-height:1.8}.v7-start{display:flex;width:100%;justify-content:center;align-items:center;gap:8px;padding:13px;border-radius:14px;text-decoration:none;background:#4f46e5;color:#fff;font-weight:900;font-size:12px;margin-top:17px;transition:.2s}.v7-start:hover{background:#4338ca;transform:translateY(-2px)}
.v7-search{max-width:620px;margin:0 auto 25px;position:relative}.v7-search input{width:100%;height:52px;border:1px solid var(--line);border-radius:17px;padding:0 18px 0 48px;font-size:13px;outline:none;background:#fff;box-shadow:0 8px 25px #0f172a08}.v7-search input:focus{border-color:#818cf8;box-shadow:0 0 0 4px #6366f11a}.v7-search span{position:absolute;left:17px;top:15px}
.v7-empty{text-align:center;padding:40px;border:1px dashed #cbd5e1;border-radius:24px;background:#fff;color:var(--muted)}
/* Attendance wizard */
.att-wrap{min-height:100vh;background:linear-gradient(180deg,#f6f8ff,#fff);padding:25px 15px 60px}.att-shell{max-width:850px;margin:auto}.att-header{text-align:center;margin:10px auto 25px}.att-back{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#4f46e5;font-size:12px;font-weight:800;margin-bottom:18px}.att-header h1{font-size:clamp(26px,4vw,40px);letter-spacing:-1.5px;margin:0 0 7px}.att-header p{color:var(--muted);font-size:12px}
.att-card{background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:0 20px 60px #0f172a0d;overflow:hidden}.att-progress{display:grid;grid-template-columns:repeat(3,1fr);padding:18px 22px;border-bottom:1px solid var(--line);gap:8px}.att-step{display:flex;align-items:center;gap:8px;color:#94a3b8;font-size:10px;font-weight:900}.att-step b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#f1f5f9}.att-step.active{color:#4338ca}.att-step.active b{background:#4f46e5;color:#fff}.att-step.done{color:#16a34a}.att-step.done b{background:#dcfce7;color:#15803d}
.att-panel{padding:28px}.att-panel h2{margin:0 0 6px;font-size:20px}.att-help{color:var(--muted);font-size:11px;line-height:1.6;margin-bottom:22px}
.att-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.att-field{display:flex;flex-direction:column;gap:7px}.att-field.full{grid-column:1/-1}.att-field label{font-size:11px;font-weight:900;color:#334155}.att-field input,.att-field select{height:48px;border:1px solid #dbe2ea;border-radius:14px;padding:0 14px;font:inherit;font-size:13px;outline:none;background:#fff}.att-field input:focus,.att-field select:focus{border-color:#818cf8;box-shadow:0 0 0 4px #6366f11a}.att-required{color:#ef4444}.att-actions{display:flex;justify-content:space-between;gap:10px;margin-top:24px}.att-btn{border:0;border-radius:14px;padding:13px 18px;font-weight:900;font-size:12px;cursor:pointer;text-decoration:none}.att-btn.primary{background:#4f46e5;color:#fff}.att-btn.secondary{background:#f1f5f9;color:#334155}.att-sign{border:2px dashed #cbd5e1;border-radius:20px;background:#f8fafc;overflow:hidden}.att-sign canvas{display:block;width:100%;height:220px;touch-action:none;cursor:crosshair}.att-sign-tools{display:flex;justify-content:space-between;padding:10px;border-top:1px solid #e2e8f0}.att-check{display:flex;gap:10px;align-items:flex-start;padding:14px;background:#f8fafc;border-radius:15px;font-size:11px;color:#475569;line-height:1.6}.att-check input{margin-top:3px}.att-success{text-align:center;padding:40px}.att-success .icon{width:80px;height:80px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;background:#dcfce7;color:#16a34a;font-size:38px;animation:pop .5s ease}.att-success h2{font-size:26px;margin:0 0 8px}.att-success p{color:var(--muted);font-size:12px;line-height:1.7}
@keyframes phoneFloat{0%,100%{transform:rotate(4deg) translateY(0)}50%{transform:rotate(1deg) translateY(-12px)}}@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
@media(max-width:850px){.v7-hero-inner{grid-template-columns:1fr}.v7-visual{min-height:360px}.v7-agenda-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.v7-topinner{padding:10px 14px}.v7-mini{display:none}.v7-hero{padding-top:35px}.v7-agenda-grid{grid-template-columns:1fr}.v7-title{letter-spacing:-2px}.att-grid{grid-template-columns:1fr}.att-field.full{grid-column:auto}.att-panel{padding:20px}.att-progress{padding:15px}.att-step span{display:none}}