:root{--navy:#163f61;--blue:#77b8d0;--sky:#e7f5fa;--bg:#f6fbfd;--card:#fff;--ink:#122333;--muted:#657887;--line:#d7e8ef;--green:#247a58;--yellow:#a87607;--orange:#bd6021;--red:#a93030;--shadow:0 20px 60px rgba(15,47,73,.11);--radius:24px}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:radial-gradient(circle at 85% 0,#daf2fa 0,#f8fcfd 32%,#fff 75%);color:var(--ink)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.layout{display:grid;grid-template-columns:300px 1fr;min-height:100vh}
aside{background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border-right:1px solid var(--line);padding:18px;position:sticky;top:0;height:100vh;overflow:auto;z-index:5}
.brand{text-align:center;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:14px}
.brand img{width:220px;max-width:100%;display:block;margin:0 auto 8px}
.brand strong{display:block;color:var(--navy)}
.brand small{color:var(--muted)}
.navBtn{width:100%;border:0;background:transparent;color:var(--muted);text-align:left;border-radius:16px;padding:12px 13px;font-weight:850;margin:3px 0}
.navBtn.active,.navBtn:hover{background:linear-gradient(135deg,var(--navy),#287198);color:#fff}
.navFooter{margin-top:16px;border-top:1px solid var(--line);padding-top:14px;color:var(--muted)}
.navFooter span{display:block;color:var(--navy);font-weight:900}
main{padding:24px;max-width:1500px;width:100%;margin:0 auto}
.hero{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:20px}
.eyebrow{color:var(--blue);font-weight:1000;letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px;font-size:12px}
.hero h1{font-size:36px;color:var(--navy);margin:0}
.hero p:last-child{color:var(--muted);margin:8px 0 0}
.heroActions,.buttonRow{display:flex;gap:10px;flex-wrap:wrap}
.primary,.secondary,.ghost,.dangerBtn{border:0;border-radius:15px;padding:11px 15px;font-weight:950}
.primary{background:linear-gradient(135deg,var(--navy),#2b749d);color:#fff}
.secondary{background:#fff;color:var(--navy);border:1px solid var(--line)}
.ghost{background:var(--sky);color:var(--navy)}
.page{display:none}
.page.active{display:block}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.kpis article,.card{background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.kpis b{display:block;font-size:36px;color:var(--navy)}
.kpis span{font-weight:850;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.span4{grid-column:span 4}
.span6{grid-column:span 6}
.span8{grid-column:span 8}
.span12{grid-column:span 12}
.cardHead{display:flex;justify-content:space-between;align-items:center;gap:10px}
h2{margin:0 0 12px;color:var(--navy)}
h3{color:var(--navy);margin:.1rem 0}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.toolbar input,.toolbar select{max-width:390px}
.stack{display:grid;gap:10px}
.item{background:#fff;border:1px solid var(--line);border-radius:19px;padding:14px;display:grid;gap:7px}
.itemTop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.meta{font-size:13px;color:var(--muted);line-height:1.4}
.itemActions{display:flex;gap:8px;flex-wrap:wrap}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.patientCard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;display:grid;gap:10px}
.tags{display:flex;gap:7px;flex-wrap:wrap}
.tag{font-size:12px;font-weight:950;border-radius:999px;background:var(--sky);color:var(--navy);padding:6px 9px}
.risk{font-size:12px;font-weight:1000;border-radius:999px;padding:6px 9px}
.green{background:#e3f6ee;color:var(--green)}
.amber{background:#fff3cd;color:var(--yellow)}
.red{background:#ffdada;color:var(--red)}
.clinicalWarning{margin-top:14px;border-left:5px solid var(--orange);background:#fff8e9;border-radius:14px;padding:12px;color:#71400d;line-height:1.45}
.quickGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.quickGrid button{text-align:left;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;color:var(--navy)}
.quickGrid span{display:block;color:var(--muted);font-size:13px;margin-top:5px}
input,select,textarea{width:100%;border:1px solid var(--line);border-radius:15px;padding:11px 12px;background:#fff;color:var(--ink)}
label{display:block;color:var(--muted);font-size:12px;font-weight:950;margin:10px 0 6px}
textarea{min-height:96px;resize:vertical}
.formGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.full{grid-column:1/-1}
.report{min-height:310px;line-height:1.45}
.modal{position:fixed;inset:0;background:rgba(10,25,38,.45);display:none;align-items:center;justify-content:center;padding:18px;z-index:20}
.modal.open{display:flex}
.modalCard{width:min(920px,100%);max-height:92vh;overflow:auto;background:#fff;border:1px solid var(--line);box-shadow:0 30px 90px rgba(0,0,0,.26);border-radius:28px}
.modalHead{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:18px;border-bottom:1px solid var(--line)}
.modalHead button{border:0;background:#f1f8fb;border-radius:50%;height:38px;width:38px;font-size:24px}
.modalBody,.modalCard form{padding:18px}
.mobileTop{display:none}
#toast{position:fixed;right:18px;bottom:18px;z-index:50}
.toast{background:var(--navy);color:#fff;border-radius:16px;padding:12px 14px;box-shadow:var(--shadow);font-weight:800}
.loginScreen{min-height:100vh;display:grid;place-items:center;padding:22px}
.loginCard{width:min(430px,100%);background:rgba(255,255,255,.96);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:28px;padding:24px}
.loginCard img{width:230px;max-width:100%;display:block;margin:0 auto 14px}
.loginCard h1{color:var(--navy);font-size:32px;margin:0 0 8px}
.loginError{min-height:20px;color:var(--red);font-weight:850}
@media(max-width:980px){.layout{grid-template-columns:1fr}
aside{position:fixed;left:-320px;width:300px;transition:.24s;box-shadow:var(--shadow)}
aside.open{left:0}
.mobileTop{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:8px 12px}
.mobileTop img{height:55px}
.mobileTop button{border:0;background:var(--sky);border-radius:14px;padding:10px 13px;font-weight:1000;color:var(--navy)}
main{padding:18px}
.hero{align-items:flex-start;flex-direction:column}
.hero h1{font-size:29px}
.kpis{grid-template-columns:repeat(2,1fr)}
.span4,.span6,.span8,.span12{grid-column:span 12}
.formGrid,.quickGrid{grid-template-columns:1fr}
.toolbar input,.toolbar select{max-width:100%}
}
.patientSheet{display:grid;gap:16px}
.sheetHero{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,#fff,#eef9fc);padding:16px}
.sheetHero h2{margin-bottom:4px}
.sheetHero p{margin:0;color:var(--muted)}
.sheetGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sheetGrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.sheetGrid article{border:1px solid var(--line);border-radius:18px;background:#fff;padding:14px}
.sheetGrid span{display:block;color:var(--blue);font-size:12px;font-weight:1000;text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}
.sheetGrid p{margin:0;color:var(--ink);line-height:1.45}
.patientSheet h3{margin:8px 0 0;color:var(--navy)}
.summaryActions{display:flex;gap:10px;flex-wrap:wrap}
.hceTabs{display:flex;gap:8px;overflow:auto;padding:4px 0 8px;border-bottom:1px solid var(--line)}
.hceTabs button{border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:999px;padding:9px 12px;font-weight:950;white-space:nowrap}
.hceTabs button.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.patientTabPanel{display:none}
.patientTabPanel.active{display:grid;gap:14px}
.woundThumb{display:block;width:min(260px,100%);max-height:220px;object-fit:cover;border-radius:16px;border:1px solid var(--line);margin:0 0 10px}
.photoPreview{display:grid;gap:8px}
.photoPreview img{width:min(280px,100%);max-height:220px;object-fit:cover;border:1px solid var(--line);border-radius:16px}
.photoPreview span{color:var(--muted);font-size:13px;font-weight:800}
.clinicalForm{display:grid;gap:14px}
.clinicalSection{border:1px solid var(--line);border-radius:20px;background:#fff;padding:14px}
.clinicalSection h3{margin:0 0 8px;color:var(--navy)}
.clinicalPreviewGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.clinicalPreviewGrid article{border:1px solid var(--line);border-radius:18px;background:#f8fcfd;padding:14px}
.clinicalPreviewGrid h3{margin:0 0 8px;color:var(--navy)}
.clinicalPreviewGrid p{margin:0 0 10px;line-height:1.45;color:var(--ink)}
.muted{color:var(--muted);line-height:1.45}
.checkList{display:grid;gap:10px}
.checkList span{display:block;border:1px solid var(--line);background:#f8fcfd;border-radius:14px;padding:11px 12px;color:var(--ink);font-weight:800}
.checkList span:before{content:"✓";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#e3f6ee;color:var(--green);font-weight:1000;margin-right:8px}
.securityGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.securityGrid article{border:1px solid var(--line);background:#f8fcfd;border-radius:18px;padding:14px}
.securityGrid b{display:block;color:var(--navy);margin-bottom:6px}
.securityGrid span{color:var(--muted);line-height:1.4}
@media(max-width:980px){.sheetHero{flex-direction:column}
.sheetGrid,.sheetGrid.two{grid-template-columns:1fr}
.clinicalPreviewGrid{grid-template-columns:1fr}
.securityGrid{grid-template-columns:1fr}
}