@keyframes spin { to { transform: rotate(360deg); } }
:root { --primary:#007AFF;--primary-dim:#E5F1FF;--warning:#FF9500;--danger:#FF3B30;--success:#34C759;--success-dim:#E6F8EA;--purple:#AF52DE;--bg:#F2F2F7;--card:#FFFFFF;--text-main:#1C1C1E;--text-sec:#8E8E93;--border:#E5E5EA; }
* { box-sizing:border-box; }
body { margin:0;padding:0;font-family:'Inter',sans-serif;background:var(--bg);color:var(--text-main);min-height:100vh; }
.app { max-width:440px;margin:0 auto;padding:16px; }
.auth-card { background:var(--card);border-radius:24px;padding:30px;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,0.08);margin-top:60px; }
.auth-logo { font-size:3rem;margin-bottom:20px;color:var(--primary); }
.auth-title { font-size:1.4rem;font-weight:700;margin-bottom:8px; }
.auth-sub { color:var(--text-sec);font-size:0.9rem;margin-bottom:25px; }
.form-group { text-align:left;margin-bottom:16px; }
.form-label { display:block;font-size:0.8rem;font-weight:600;color:var(--text-sec);margin-bottom:6px; }
.form-input { width:100%;padding:14px;border:1px solid var(--border);border-radius:14px;font-size:1rem;outline:none;background:var(--bg); }
.form-input:focus { border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px var(--primary-dim); }
.btn-primary { width:100%;background:var(--primary);color:white;border:none;padding:16px;border-radius:14px;font-weight:700;font-size:1rem;cursor:pointer; }
.btn-primary:disabled { opacity:0.5; }
.auth-switch { margin-top:20px;font-size:0.9rem;color:var(--text-sec); }
.auth-switch a { color:var(--primary);font-weight:600;cursor:pointer; }
.dash-header { display:flex;justify-content:space-between;align-items:center;padding:10px 0;margin-bottom:10px; }
.user-info { display:flex;align-items:center;gap:10px; }
.user-avatar { width:40px;height:40px;background:var(--primary-dim);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--primary);font-weight:700; }
.user-name { font-weight:600; }
.btn-logout { background:none;border:none;color:var(--danger);font-weight:600;cursor:pointer; }
.btn-admin { background:var(--primary-dim);color:var(--primary);border:none;padding:6px 12px;border-radius:8px;font-weight:600;cursor:pointer;font-size:0.85rem;display:flex;align-items:center;gap:6px;margin-right:8px; }
.section-title { font-size:0.8rem;font-weight:600;color:var(--text-sec);text-transform:uppercase;margin:20px 0 12px 4px; }
.device-grid { display:grid;gap:12px; }
.device-card { background:var(--card);padding:16px;border-radius:16px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 10px rgba(0,0,0,0.04);cursor:pointer;border:2px solid transparent; }
.device-card:active { transform:scale(0.98); }
.d-info { display:flex;align-items:center;gap:12px; }
.d-icon { width:44px;height:44px;background:var(--primary-dim);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--primary); }
.d-name { font-weight:600; }
.d-id { font-size:0.75rem;color:var(--text-sec); }
.d-status { font-size:0.7rem;font-weight:600;padding:4px 10px;border-radius:10px;display:flex;align-items:center;gap:4px; }
.d-status.online { background:var(--success-dim);color:var(--success); }
.d-status.offline { background:#F2F2F7;color:var(--text-sec); }
.btn-add-device { background:var(--card);border:2px dashed var(--border);color:var(--text-sec);width:100%;padding:16px;border-radius:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px; }
.modal { position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity 0.3s; }
.modal.show { opacity:1;pointer-events:auto; }
.modal-card { background:white;width:100%;max-width:360px;padding:24px;border-radius:24px;text-align:center; }
.modal-icon { font-size:3rem;color:var(--primary);margin-bottom:15px; }
.modal-title { font-size:1.2rem;font-weight:700;margin-bottom:10px; }
.modal-desc { font-size:0.9rem;color:var(--text-sec);margin-bottom:20px; }
.pairing-code { font-family:'JetBrains Mono',monospace;font-size:2.5rem;letter-spacing:6px;font-weight:700;color:var(--primary);background:var(--primary-dim);padding:12px 20px;border-radius:16px;display:inline-block;margin:15px 0; }
.btn-modal { width:100%;padding:14px;border:none;border-radius:12px;font-weight:600;cursor:pointer;margin-top:8px; }
.btn-modal-cancel { background:var(--bg);color:var(--text-main); }
.panel-header { display:flex;align-items:center;gap:12px;margin-bottom:16px; }
.btn-back { background:none;border:none;color:var(--primary);font-size:1.2rem;cursor:pointer; }
.panel-title { font-weight:700;font-size:1.1rem;flex:1; }
.btn-settings { background:none;border:none;color:var(--text-sec);font-size:1.1rem;cursor:pointer; }
.timer-card { background:var(--card);border-radius:24px;padding:25px 20px;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,0.06);margin-bottom:16px; }
.progress-ring-container { position:relative;width:180px;height:180px;margin:0 auto 15px; }
.progress-ring { transform:rotate(-90deg);width:180px;height:180px; }
.progress-ring-bg { fill:none;stroke:var(--border);stroke-width:10; }
.progress-ring-fill { fill:none;stroke:var(--primary);stroke-width:10;stroke-linecap:round;stroke-dasharray:502.65;stroke-dashoffset:0;transition:all 1s; }
.timer-inner { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); }
.timer-display { font-family:'JetBrains Mono',monospace;font-size:2.2rem;font-weight:700; }
.timer-display .seconds { font-size:1.4rem;opacity:0.5; }
.timer-label { font-size:0.75rem;color:var(--text-sec);margin-top:4px; }
.status-badge { display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;font-size:0.8rem;font-weight:600;background:var(--border);color:var(--text-sec);margin-bottom:15px; }
.status-badge.active { background:var(--success-dim);color:var(--success); }
.status-badge.warning { background:#FFF4E5;color:var(--warning); }
.status-badge.penalty { background:#FFEBEA;color:var(--danger); }
.quick-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px; }
.quick-btn { background:var(--card);border:none;padding:14px 8px;border-radius:14px;font-weight:700;font-size:1rem;box-shadow:0 2px 10px rgba(0,0,0,0.04);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px; }
.quick-btn span { font-size:0.65rem;font-weight:500;opacity:0.6; }
.quick-btn:active { transform:scale(0.95); }
.quick-btn.btn-15 { color:var(--primary); }
.quick-btn.btn-30 { color:var(--success); }
.quick-btn.btn-60 { color:var(--purple); }
.control-card { background:var(--card);border-radius:16px;padding:14px;box-shadow:0 2px 10px rgba(0,0,0,0.04);margin-bottom:12px; }
.control-header { font-size:0.8rem;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:6px; }
.control-header i { color:var(--text-sec); }
.input-row { display:flex;gap:8px; }
.text-input { flex:1;padding:12px 14px;border:none;border-radius:10px;font-size:0.9rem;background:var(--bg);outline:none; }
.text-input:focus { box-shadow:0 0 0 2px var(--primary); }
.btn-send { width:44px;height:44px;border:none;border-radius:10px;background:var(--primary);color:white;cursor:pointer;display:flex;align-items:center;justify-content:center; }
.btn-danger { width:100%;background:var(--card);color:var(--danger);border:2px solid #FFEBEA;padding:14px;border-radius:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px; }
.settings-section { margin-bottom:20px; }
.settings-card { background:var(--card);border-radius:16px;padding:16px;box-shadow:0 2px 10px rgba(0,0,0,0.04); }
.setting-row { display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border); }
.setting-row:last-child { border-bottom:none; }
.setting-label { font-size:0.9rem;font-weight:500; }
.setting-input { width:120px;padding:8px;border:1px solid var(--border);border-radius:8px;text-align:right;font-size:0.9rem; }
.schedule-row { display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border); }
.schedule-row:last-child { border-bottom:none; }
.schedule-day { width:70px;font-size:0.85rem;font-weight:500; }
.schedule-inputs { display:flex;align-items:center;gap:4px;flex:1;justify-content:flex-end; }
.schedule-input { width:45px;padding:8px 4px;border:1px solid var(--border);border-radius:8px;text-align:center; }
.btn-save { width:100%;background:var(--success);color:white;border:none;padding:14px;border-radius:14px;font-weight:700;cursor:pointer;margin-top:16px; }
.hide { display:none !important; }
.toast-container { position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:10000;width:90%;max-width:340px; }
.toast { background:rgba(0,0,0,0.85);color:white;padding:14px 18px;border-radius:14px;font-size:0.9rem;font-weight:500;margin-bottom:8px;display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(-10px);transition:all 0.3s; }
.toast.show { opacity:1;transform:translateY(0); }
.toast.success i { color:var(--success); }
.toast.error i { color:var(--danger); }
.loading-btn { opacity:0.6;pointer-events:none; }
.app-footer { text-align:center;margin-top:30px;font-size:0.7rem;color:#AEAEB2; }