*{box-sizing:border-box;margin:0;padding:0}body{font-family:Arial,sans-serif;background:#f3f7fb;color:#1f2937}.app{display:flex;min-height:100vh}.sidebar{width:270px;background:#fff;padding:24px;border-right:1px solid #e5e7eb}.logo{display:flex;align-items:center;gap:12px;margin-bottom:35px}.logo-icon{width:48px;height:48px;background:#e0f7fa;color:#00a6b4;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px}.logo h2{font-size:20px}.logo span{font-size:13px;color:#6b7280}.menu{display:flex;flex-direction:column;gap:8px}.menu a{text-decoration:none;color:#4b5563;padding:13px 15px;border-radius:12px;font-weight:500}.menu a:hover,.menu a.active{background:#00a6b4;color:#fff}.main{flex:1;padding:28px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.topbar h1{font-size:28px;margin-bottom:6px}.topbar p{color:#6b7280}.top-actions{display:flex;gap:12px}.top-actions input,.table-search{padding:13px 15px;border:1px solid #d1d5db;border-radius:12px;outline:none}.top-actions input{width:260px}button,.small-btn{border:none;cursor:pointer;border-radius:12px;background:#00a6b4;color:#fff;padding:13px 18px;font-weight:600;text-decoration:none;display:inline-block}button:hover,.small-btn:hover{background:#008c98}.small-btn{padding:9px 14px;font-size:14px}.gray-btn{background:#f3f4f6!important;color:#111827!important}.gray-btn:hover{background:#e5e7eb!important}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px}.card,.panel{background:#fff;border-radius:18px;padding:22px;box-shadow:0 10px 30px rgba(15,23,42,.06)}.card span{color:#6b7280;font-size:14px}.card h3{font-size:28px;margin:10px 0}.card p{color:#00a6b4;font-size:14px}.content-grid{display:grid;grid-template-columns:1fr 300px;gap:24px}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:15px}.panel h2{font-size:20px}table{width:100%;border-collapse:collapse}th{text-align:left;color:#6b7280;font-size:14px;padding:14px 8px;border-bottom:1px solid #e5e7eb}td{padding:16px 8px;border-bottom:1px solid #f1f5f9}.status{padding:6px 10px;border-radius:20px;font-size:13px;font-weight:600}.status.green{background:#dcfce7;color:#15803d}.status.blue{background:#dbeafe;color:#1d4ed8}.status.red{background:#fee2e2;color:#b91c1c}.right-panel{display:flex;flex-direction:column;gap:14px}.action-btn{width:100%;background:#f3f7fb;color:#1f2937;text-align:left}.action-btn:hover{background:#e0f7fa;color:#008c98}.muted{color:#6b7280;font-size:14px}.modal{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;align-items:center;justify-content:center;padding:20px}.modal.show{display:flex}.modal-box{width:100%;max-width:720px;background:#fff;border-radius:22px;padding:24px;box-shadow:0 20px 60px rgba(15,23,42,.25)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.close-btn{width:38px;height:38px;padding:0;border-radius:50%;background:#f3f4f6;color:#111827;font-size:24px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.form-grid label{display:flex;flex-direction:column;gap:8px;font-weight:600;color:#374151}.form-grid input,.form-grid textarea,.form-grid select{width:100%;border:1px solid #d1d5db;border-radius:12px;padding:13px 15px;outline:none;font-family:Arial,sans-serif;background:#fff}.form-grid textarea{min-height:110px;resize:vertical}.form-grid .full{grid-column:1/-1}.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}.tabs{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}.tab,.filter{background:#f3f7fb;color:#374151;padding:10px 14px}.tab.active,.tab:hover,.filter.active,.filter:hover{background:#00a6b4;color:#fff}.tab-content{display:none}.tab-content.active{display:block}.patient-layout,.appointment-layout,.settings-layout{display:grid;grid-template-columns:1fr 330px;gap:24px}.timeline-item{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid #e5e7eb}.files-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.file-card{background:#f3f7fb;border-radius:16px;padding:20px;font-size:34px;display:flex;flex-direction:column;gap:12px}.file-card span{font-size:14px}.big-textarea{width:100%;min-height:220px;border:1px solid #d1d5db;border-radius:14px;padding:15px}.info-row,.cash-row{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid #f1f5f9}.info-row{flex-direction:column}.info-row span,.cash-row span{color:#6b7280}.schedule{display:grid;grid-template-columns:90px repeat(3,minmax(260px,1fr));gap:14px;overflow-x:auto}.time-column,.doctor-column{display:grid;grid-template-rows:82px repeat(10,82px);gap:10px}.time-column div,.doctor-head{background:#fff;border-radius:14px;padding:16px;box-shadow:0 8px 20px rgba(15,23,42,.04)}.slot{background:#fff;border:1px dashed #d1d5db;border-radius:16px;padding:12px;min-width:260px}.slot.busy{background:#e0f7fa;border:1px solid #99e5ec;display:flex;flex-direction:column;gap:5px}.slot.busy.blue{background:#dbeafe}.slot.busy.red{background:#fee2e2}.filter-buttons{display:flex;gap:8px;flex-wrap:wrap}.doctor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.doctor-card{background:#fff;border-radius:20px;padding:22px;box-shadow:0 10px 30px rgba(15,23,42,.06)}.doctor-avatar{width:58px;height:58px;border-radius:18px;background:#e0f7fa;color:#00a6b4;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;margin-bottom:16px}.doctor-meta{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #f1f5f9}.doctor-actions{display:flex;gap:10px;margin-top:18px}.appointment-layout{grid-template-columns:1fr 360px}.appointment-head{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:25px}.appointment-head div{background:#f3f7fb;border-radius:16px;padding:16px}.appointment-head span{display:block;color:#6b7280;margin-bottom:6px;font-size:14px}.section-title{margin:26px 0 16px}.teeth-map{background:#f8fafc;border-radius:20px;padding:22px}.jaw{display:grid;grid-template-columns:repeat(16,1fr);gap:8px;margin-bottom:16px}.tooth{background:#fff;color:#374151;border:1px solid #d1d5db;padding:14px 0;border-radius:14px;font-weight:700}.tooth:hover,.tooth.active{background:#00a6b4;color:#fff;border-color:#00a6b4}.tooth.problem{background:#fee2e2;color:#b91c1c}.tooth.treated{background:#dcfce7;color:#15803d}.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;color:#6b7280;font-size:14px}.selected-tooth{background:#e0f7fa;color:#008c98;border-radius:18px;padding:20px;margin:18px 0}.selected-tooth b{font-size:42px}.diagnosis-box{border-top:1px solid #f1f5f9;padding-top:18px;margin-top:18px}.diagnosis-box label{display:block;margin-bottom:10px}.mini-files{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}.mini-files div{background:#f3f7fb;border-radius:12px;padding:12px}.settings-layout{grid-template-columns:1fr 330px}.settings-layout>.panel:nth-child(1),.settings-layout>.panel:nth-child(2),.settings-layout>.panel:nth-child(3){grid-column:1}.settings-side{grid-column:2;grid-row:1/span 3;height:fit-content}.work-days{margin-top:20px;display:flex;flex-direction:column;gap:12px}.work-day{display:grid;grid-template-columns:1fr 130px 130px;gap:12px;align-items:center}.work-day input{border:1px solid #d1d5db;border-radius:12px;padding:12px}.switch-row{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid #f1f5f9;font-weight:600}@media(max-width:1300px){.doctor-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:1200px){.appointment-layout,.patient-layout,.settings-layout,.content-grid{grid-template-columns:1fr}.appointment-head{grid-template-columns:repeat(2,1fr)}.jaw{grid-template-columns:repeat(8,1fr)}.settings-side{grid-column:1;grid-row:auto}}@media(max-width:1100px){.stats{grid-template-columns:repeat(2,1fr)}.files-grid{grid-template-columns:1fr}}@media(max-width:800px){.app{flex-direction:column}.sidebar{width:100%}.topbar{flex-direction:column;align-items:flex-start;gap:16px}.top-actions{width:100%;flex-direction:column}.top-actions input{width:100%}.stats,.doctor-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.work-day{grid-template-columns:1fr}}
