:root{--teal: #1a8a7a;--teal-dark: #146b5e;--teal-light: #e8f5f3;--blue: #5bc0de;--blue-dark: #39a6c4;--white: #ffffff;--bg: #f5f7f9;--border: #e0e5ea;--text: #2d3748;--text-muted: #718096;--success: #38a169;--radius: 10px;--shadow: 0 2px 12px rgba(0,0,0,.08)}@keyframes sp-letter-in{0%{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes sp-badge-in{0%{opacity:0;transform:translate(14px)}to{opacity:1;transform:translate(0)}}@keyframes sp-tag-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes sp-cursor-blink{0%,to{opacity:1}50%{opacity:0}}@keyframes sp-line-sweep{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes sp-glow-pulse{0%{opacity:0;transform:scale(.6)}40%{opacity:.18}to{opacity:.07;transform:scale(1.4)}}@keyframes sp-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-32px) scale(.97)}}@keyframes app-fade-in{0%{opacity:0}to{opacity:1}}.splash{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:#0f1a18;display:flex;align-items:center;justify-content:center}.splash--exit{animation:sp-exit 1.1s cubic-bezier(.4,0,1,1) forwards}.splash-glow{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,#1a8a7a 0%,transparent 70%);animation:sp-glow-pulse 2.4s ease-out forwards;pointer-events:none}.splash-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}.splash-logo-row{display:flex;align-items:flex-end;gap:8px}.splash-wordmark{display:flex;font-size:48px;font-weight:700;color:#fff;letter-spacing:-2px;text-shadow:0 0 40px rgba(26,138,122,.5)}.splash-letter{display:inline-block;opacity:0;animation:sp-letter-in .9s cubic-bezier(.22,1,.36,1) forwards}.splash-group{font-size:12px;font-weight:700;color:#fff;background:#5bc0de;padding:3px 7px;border-radius:4px;letter-spacing:.8px;margin-bottom:8px;opacity:0;animation:sp-badge-in .7s ease-out forwards}.splash-tagline-row{display:flex;align-items:center;font-size:12px;font-weight:600;letter-spacing:5px;color:#1a8a7a;min-height:18px}.splash-tag-letter{opacity:0}.splash-tag-letter--in{animation:sp-tag-in .4s ease-out forwards}.splash-cursor{color:#1a8a7a;margin-left:1px;font-weight:300}.splash-cursor--blink{animation:sp-cursor-blink .6s step-end infinite}.splash-cursor--hide{opacity:0}@keyframes sp-underline-in{0%{opacity:0;transform:scaleX(.4)}to{opacity:1;transform:scaleX(1)}}@keyframes sp-shimmer-run{0%{transform:translate(-100%)}to{transform:translate(350%)}}.splash-underline{position:relative;width:300px;height:1px;background:#1a8a7a59;overflow:hidden;opacity:0}.splash-underline--in{animation:sp-underline-in .5s ease-out forwards}.splash-shimmer{position:absolute;top:-1px;width:25%;height:3px;background:linear-gradient(90deg,transparent,#7fffd4,#ffffff,#7fffd4,transparent);border-radius:2px;filter:blur(1px);transform:translate(-100%)}.splash-shimmer--run{animation:sp-shimmer-run 1.2s ease-in-out .3s infinite alternate}.splash-line{width:300px;height:1px;background:linear-gradient(90deg,transparent,#1a8a7a,#5bc0de,#1a8a7a,transparent);box-shadow:0 0 8px #1a8a7acc;transform:scaleX(0);transform-origin:left}.splash-line--in{animation:sp-line-sweep .8s cubic-bezier(.4,0,.2,1) forwards}.app--hidden{visibility:hidden}.app--visible{animation:app-fade-in .45s ease-out forwards}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}button{cursor:pointer;border:none;background:none;font:inherit}input,select{font:inherit}.app{min-height:100vh;display:flex;flex-direction:column}.main-content{max-width:960px;margin:0 auto;padding:24px 20px 60px;width:100%}.header{background:var(--teal);padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 8px #00000026}.header-inner{display:flex;align-items:center;gap:16px}.renelec-logo{display:flex;align-items:center;gap:0;line-height:1}.logo-wordmark{font-size:20px;font-weight:700;color:var(--white);letter-spacing:-.5px}.logo-group{font-size:10px;font-weight:700;color:var(--white);background:var(--blue);padding:2px 5px;border-radius:3px;margin-left:4px;letter-spacing:.5px;align-self:flex-end;margin-bottom:2px}.portal-label{font-size:11px;font-weight:600;color:#ffffffb3;letter-spacing:2px;text-transform:uppercase}.signin-banner{background:var(--teal);margin:-48px -40px 28px;padding:18px 24px;border-radius:16px 16px 0 0;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 8px #00000026}.header-user{display:flex;align-items:center;gap:12px}.user-name{color:#ffffffe6;font-size:14px}.btn-signout{font-size:13px;color:#fffc;padding:4px 10px;border:1px solid rgba(255,255,255,.3);border-radius:6px;transition:all .15s}.btn-signout:hover{background:#ffffff26;color:#fff}.signin-section{flex:1;display:flex;align-items:center;justify-content:center;padding:60px 20px}.signin-card{background:var(--white);border-radius:16px;box-shadow:var(--shadow);padding:48px 40px;text-align:center;max-width:400px;width:100%}.signin-subtitle{font-size:13px;font-weight:600;letter-spacing:3px;color:var(--teal);margin-top:6px;margin-bottom:24px}.signin-desc{font-size:14px;color:var(--text-muted);margin-bottom:32px;margin-top:0;line-height:1.6}.btn-microsoft{display:inline-flex;align-items:center;justify-content:center;background:var(--white);color:var(--text);border:1.5px solid var(--border);border-radius:8px;padding:12px 24px;font-size:15px;font-weight:500;width:100%;gap:8px;transition:all .15s;box-shadow:0 1px 4px #0000000f}.btn-microsoft:hover{border-color:var(--teal);box-shadow:0 2px 8px #1a8a7a26}.btn-microsoft:disabled{opacity:.6;cursor:not-allowed}.section{margin-top:28px}.section-title{font-size:13px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}.builder-name-inline{color:var(--teal);text-transform:none;letter-spacing:0}.builder-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}@media(max-width:600px){.builder-grid{grid-template-columns:repeat(2,1fr)}}.builder-card{background:none;border:2px solid transparent;border-radius:10px;padding:10px 12px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s,border-color .15s}.builder-card:hover{transform:scale(1.06);border-color:#1a8a7a4d}.builder-card.selected{border-color:var(--teal)}.builder-card[title=Persimmon]{background:#f5f5f5;border-radius:8px}.builder-logo-img{width:120px;height:60px;object-fit:contain;display:block}.builder-card[title="David Wilson"] .builder-logo-img{width:160px;height:60px}.builder-logo-fallback{width:120px;height:60px;border-radius:8px;display:flex;align-items:center;justify-content:center}.builder-initials{font-size:22px;font-weight:700;color:#fff;letter-spacing:-.5px}.builder-add{border-style:dashed;color:var(--text-muted);flex-direction:column;gap:6px}.builder-add:hover{border-color:var(--blue);color:var(--teal)}.builder-add-icon{font-size:24px;line-height:1}.builder-add-label{font-size:12px;font-weight:500}.site-pills{display:flex;flex-wrap:wrap;gap:10px}.site-pill{display:inline-flex;align-items:center;gap:8px;background:var(--white);border:2px solid var(--border);border-radius:24px;padding:8px 16px;font-size:14px;font-weight:500;transition:all .15s;animation:pill-in .3s ease both}.site-pill:hover{border-color:var(--teal);background:var(--teal-light)}.site-pill.selected{border-color:var(--teal);background:var(--teal-light);color:var(--teal-dark)}.monitor-dot{width:8px;height:8px;border-radius:50%;background:var(--success);flex-shrink:0}.site-name{color:var(--text)}.site-number{font-size:11px;font-weight:700;color:var(--white);background:var(--teal);border-radius:10px;padding:1px 7px}.site-pill-add{border-style:dashed;color:var(--text-muted);font-size:13px}.site-pill-add:hover{border-color:var(--blue);color:var(--teal);background:var(--white)}@keyframes pill-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.cascade-in{animation:cascade .25s ease both}@keyframes cascade{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.setup-panel{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.panel-header{padding:16px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}.panel-site-name{font-size:16px;font-weight:600;color:var(--text)}.panel-site-number{font-size:12px;font-weight:700;color:var(--white);background:var(--teal);border-radius:10px;padding:2px 10px}.tab-bar{display:flex;border-bottom:1px solid var(--border);padding:0 24px;gap:0}.tab-btn{padding:12px 20px;font-size:14px;font-weight:500;color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s}.tab-btn:hover{color:var(--teal)}.tab-btn.active{color:var(--teal);border-bottom-color:var(--teal)}.tab-content{padding:24px}.tab-form{display:flex;flex-direction:column;gap:18px;max-width:480px}.form-group{display:flex;flex-direction:column;gap:6px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-group label{font-size:13px;font-weight:600;color:var(--text-muted)}.form-group input,.form-group select{padding:10px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:14px;color:var(--text);background:var(--white);transition:border-color .15s;outline:none}.form-group input:focus,.form-group select:focus{border-color:var(--teal)}.btn-primary{background:var(--teal);color:#fff;border-radius:8px;padding:11px 20px;font-size:14px;font-weight:600;transition:all .15s;align-self:flex-start}.btn-primary:hover{background:var(--teal-dark)}.btn-primary.loading{background:var(--blue);cursor:wait}.btn-primary.success{background:var(--success)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-link{background:none;color:var(--teal);font-size:13px;font-weight:500;padding:0}.btn-link:hover{text-decoration:underline}.chip-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.chip-grid{display:flex;flex-wrap:wrap;gap:8px}.chip{padding:5px 12px;border-radius:16px;font-size:13px;font-weight:500;border:1.5px solid var(--border);color:var(--text-muted);background:var(--white);transition:all .15s}.chip:hover{border-color:var(--teal);color:var(--teal)}.chip.active{border-color:var(--teal);background:var(--teal-light);color:var(--teal-dark)}.chip-removable{display:inline-flex;align-items:center;gap:6px}.chip-remove{font-size:15px;line-height:1;color:var(--teal-dark);padding:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.monitor-toggle-row{display:flex;align-items:center;gap:14px}.btn-monitor{padding:11px 20px;border-radius:8px;font-size:14px;font-weight:600;border:2px solid var(--teal);color:var(--teal);transition:all .15s}.btn-monitor:hover{background:var(--teal-light)}.btn-monitor.active{background:var(--teal);color:#fff;border-color:var(--teal)}.monitor-badge{font-size:13px;font-weight:600;color:var(--success);animation:pulse 2s infinite}.monitor-info{font-size:13px;color:var(--text-muted);line-height:1.5}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}
