:root{color-scheme:light;font-family:Arial,sans-serif;background-color:#f4f4f4}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh}a{color:inherit}button{font:inherit}.app-container{display:flex;flex-direction:column;min-height:100vh}.app-header{background-color:#1a6eb4;color:#fff;padding:10px 20px;display:flex;align-items:center;gap:1rem}.app-header h1{margin:0;font-size:24px;display:flex;align-items:center;gap:.5rem}.app-header-nav{display:flex;align-items:center;gap:12px}.app-header-nav a{color:#fff;text-decoration:none;font-size:16px;padding:4px 6px;border-radius:4px;transition:background-color .2s ease}.app-header-nav a:hover,.app-header-nav a[data-status=active]{background-color:#ffffff26}.app-main{flex:1;display:flex;justify-content:center;padding:20px}.demo-layout{display:flex;width:100%;max-width:1200px;gap:20px}.sidebar{width:250px;background-color:#002e5d;color:#fff;padding:20px;border-radius:6px;display:flex;flex-direction:column;gap:20px;height:max-content}.sidebar h2{font-size:20px;margin:0 0 12px}.sidebar ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}.sidebar a{color:#fff;text-decoration:none;display:block;padding:8px 10px;border-radius:5px;transition:background-color .3s ease}.sidebar a:hover{background-color:#00397e}.content{flex:1;background-color:#fff;padding:24px;border-radius:8px;box-shadow:0 2px 6px #0000000d;display:flex;flex-direction:column;gap:24px}.patient-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}.patient-list-item{padding:12px;border-radius:6px;border:1px solid #e0e0e0;background-color:#f7f7f7;cursor:pointer;transition:background-color .2s ease;color:#000}.patient-list-item:hover{background-color:#e0e0e0}.appointments{display:grid;gap:12px}.appointment-item{padding:14px;border:1px solid #d7d7d7;border-radius:6px;background-color:#f9f9f9;cursor:pointer;transition:border .2s ease,background-color .2s ease;color:#000}.appointment-item:hover{background-color:#ececec;border-color:#b5b5b5}.appointment-details{display:flex;flex-direction:column;gap:16px;background-color:#f2f2f2;padding:20px;border-radius:6px}.appointment-details h2{margin:0;font-size:20px}.fields-container{display:flex;gap:20px}.fields-section{flex:1}.button-group{display:flex;gap:12px;align-items:center}button{background-color:#1a6eb4;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;font-size:16px;transition:background-color .2s ease}button:hover{background-color:#0d5490}button:disabled{background-color:#d6d6d6;color:#8c8c8c;cursor:not-allowed}.image-button{padding:5px 10px}.image-button img{width:100px;height:auto}.iframe-container{border-radius:8px;overflow:hidden;border:1px solid #d7d7d7;background-color:#fff}.modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background-color:#00000059;z-index:1000}.modal-content{background-color:#fff;padding:24px;border-radius:8px;text-align:center;min-width:220px;display:grid;gap:12px}.spinner{border:4px solid rgba(0,0,0,.1);border-left:4px solid #3498db;border-radius:50%;width:24px;height:24px;margin:0 auto;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.internal-form{width:100%;max-width:720px;background-color:#fff;border-radius:8px;padding:24px;box-shadow:0 2px 6px #0000000d;display:grid;gap:20px}.form-grid{display:grid;gap:16px}.field{display:flex;flex-direction:column;gap:6px}.field label{font-weight:600;font-size:14px}.field input,.field select,.field textarea{padding:10px 12px;border-radius:6px;border:1px solid #d7d7d7;font-size:15px}.field textarea{resize:vertical;min-height:80px}.helper-text{font-size:13px;color:#4f4f4f}.tag{padding:2px 6px;border-radius:4px;background-color:#002e5d1f;color:#002e5d;font-size:12px;font-weight:600}.config-preview{background-color:#f4f6fb;border-radius:6px;padding:16px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:14px;display:grid;gap:6px}.toast{position:fixed;right:24px;bottom:24px;background-color:#1a6eb4;color:#fff;padding:16px 20px;border-radius:8px;box-shadow:0 10px 30px #00000026;display:flex;align-items:center;gap:12px}
