*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--green-dark: #085041;--green-mid: #0F6E56;--green-bright: #1D9E75;--green-light: #9FE1CB;--green-pale: #E1F5EE;--gray-900: #1a1a1a;--gray-700: #3d3d3d;--gray-500: #717171;--gray-300: #d4d4d4;--gray-100: #f5f5f5;--white: #ffffff;--red: #E24B4A;--red-pale: #FCEBEB;--amber: #BA7517;--amber-pale: #FAEEDA;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--radius-xl: 28px}html,body,#root{height:100%;font-family:DM Sans,sans-serif;background:var(--gray-100);color:var(--gray-900);-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer;border:none;background:none}input{font-family:inherit}a{text-decoration:none;color:inherit}.mono{font-family:DM Mono,monospace}.app-shell{max-width:430px;min-height:100%;margin:0 auto;background:var(--white);display:flex;flex-direction:column;position:relative}.topbar{padding:16px 20px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--gray-100);background:var(--white);position:sticky;top:0;z-index:10}.topbar-logo{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:500;color:var(--green-dark)}.topbar-logo span{color:var(--green-bright);font-weight:400}.page-body{flex:1;padding:20px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}.bottom-nav{display:flex;border-top:1px solid var(--gray-100);background:var(--white);padding:8px 0 12px}.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;font-size:11px;color:var(--gray-500);transition:color .15s}.nav-item.active{color:var(--green-mid)}.nav-item svg{width:22px;height:22px}.card{background:var(--white);border:1.5px solid var(--gray-300);border-radius:var(--radius-lg);padding:18px}.card-surface{background:var(--gray-100);border-radius:var(--radius-md);padding:14px 16px}.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.metric{background:var(--gray-100);border-radius:var(--radius-md);border:1.5px solid var(--gray-300);padding:14px}.metric-label{font-size:12px;color:var(--gray-500);margin-bottom:4px}.metric-value{font-size:26px;font-weight:500;line-height:1}.metric-value.green{color:var(--green-mid)}.metric-value.red{color:var(--red)}.metric-value.amber{color:var(--amber)}.metric-sub{font-size:12px;color:var(--gray-500);margin-top:2px}.btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;border-radius:var(--radius-md);font-size:15px;font-weight:500;transition:opacity .15s,transform .1s;width:100%}.btn:active{transform:scale(.98);opacity:.85}.btn-green{background:var(--green-bright);color:var(--white)}.btn-green-outline{background:var(--green-pale);color:var(--green-dark)}.btn-red-outline{background:var(--red-pale);color:var(--red)}.btn-ghost{background:var(--gray-100);color:var(--gray-700);font-size:13px;padding:10px 14px;width:auto}.btn-big{padding:22px;border-radius:var(--radius-xl);font-size:18px}.clock-display{text-align:center;padding:32px 20px}.clock-time{font-family:DM Mono,monospace;font-size:56px;font-weight:400;color:var(--green-dark);letter-spacing:-2px;line-height:1}.clock-date{font-size:14px;color:var(--gray-500);margin-top:8px}.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:500}.badge-green{background:var(--green-pale);color:var(--green-dark)}.badge-red{background:var(--red-pale);color:var(--red)}.badge-amber{background:var(--amber-pale);color:var(--amber)}.badge-gray{background:var(--gray-100);color:var(--gray-700)}.log-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--gray-100)}.log-row:last-child{border-bottom:none}.log-date{font-size:14px;font-weight:500}.log-time{font-size:12px;color:var(--gray-500);font-family:DM Mono,monospace;margin-top:2px}.section-label{font-size:11px;font-weight:500;color:var(--gray-500);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}.auth-screen{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 32px;gap:24px;background:var(--white);max-width:430px;margin:0 auto}.auth-logo{display:flex;flex-direction:column;align-items:center;gap:12px}.auth-logo-text{font-size:28px;font-weight:500;color:var(--green-dark)}.auth-logo-text span{color:var(--green-bright);font-weight:400}.auth-subtitle{font-size:14px;color:var(--gray-500);text-align:center}.form-group{width:100%;display:flex;flex-direction:column;gap:8px}.form-label{font-size:13px;color:var(--gray-700);font-weight:500}.form-input{width:100%;padding:12px 14px;border:1px solid var(--gray-300);border-radius:var(--radius-sm);font-size:15px;color:var(--gray-900);background:var(--white);outline:none;transition:border-color .15s}.form-input:focus{border-color:var(--green-bright)}.form-select{width:100%;padding:12px 14px;border:1px solid var(--gray-300);border-radius:var(--radius-sm);font-size:15px;font-family:DM Sans,sans-serif;color:var(--gray-900);background:var(--white);outline:none}.notice{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--radius-md);font-size:13px}.notice-green{background:var(--green-pale);color:var(--green-dark)}.notice-red{background:var(--red-pale);color:var(--red)}.notice-amber{background:var(--amber-pale);color:var(--amber)}.avatar{width:40px;height:40px;border-radius:50%;background:var(--green-pale);color:var(--green-dark);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;flex-shrink:0}.role-toggle{display:flex;background:var(--gray-100);border-radius:var(--radius-md);padding:4px;gap:4px}.role-btn{flex:1;padding:8px;border-radius:9px;font-size:13px;font-weight:500;color:var(--gray-500);transition:all .15s}.role-btn.active{background:var(--white);color:var(--gray-900);box-shadow:0 1px 3px #00000014}.export-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--gray-100)}.export-row:last-child{border-bottom:none}.export-label{font-size:14px;font-weight:500}.export-sub{font-size:12px;color:var(--gray-500);margin-top:2px}.spinner{width:24px;height:24px;border:2px solid var(--gray-300);border-top-color:var(--green-bright);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto}@keyframes spin{to{transform:rotate(360deg)}}.success-icon{width:80px;height:80px;border-radius:50%;background:var(--green-pale);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;animation:pop .3s ease-out}@keyframes pop{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}.divider{height:1px;background:var(--gray-100);margin:4px 0}.text-muted{color:var(--gray-500);font-size:13px}.text-center{text-align:center}.fw-500{font-weight:500}.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.w-full{width:100%}