*{box-sizing:border-box}
:root{
  --bg:#08090b; --panel:#151619; --panel2:#101113; --text:#f5f5f5;
  --muted:#85858b; --gold:#ffb23f; --green:#58e6aa; --cyan:#19dce6;
  --red:#ff555b; --blue:#4d7dff; --orange:#ff7145; --yellow:#ffe12b;
}
html,body{margin:0;min-height:100%;background:
 radial-gradient(circle at 50% 12%,rgba(115,72,25,.30),transparent 30%),
 radial-gradient(circle at 20% 65%,rgba(98,30,28,.22),transparent 34%),
 #08090b;color:var(--text);font-family:Arial,Helvetica,sans-serif}
body{display:flex;justify-content:center}
button,input,select{font:inherit}
.app-shell{width:min(100%,720px);min-height:100vh;padding:20px 18px 38px}
.topbar{height:74px;display:grid;grid-template-columns:52px 1fr 52px;align-items:center}
.brand{text-align:center;font-size:25px;letter-spacing:7px;font-weight:800}
.icon-btn{width:46px;height:46px;border:0;background:transparent;color:#eee;font-size:42px;line-height:1;border-radius:50%;cursor:pointer}
.icon-btn.refresh{color:var(--gold);font-size:38px}
#backBtn{visibility:hidden}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px}
.tile{min-height:180px;border:1.5px solid var(--tile);border-radius:31px;background:rgba(19,20,22,.82);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--tile);cursor:pointer;box-shadow:inset 0 0 18px rgba(255,255,255,.01);transition:.18s}
.tile:hover{transform:translateY(-3px);background:rgba(29,30,33,.95);box-shadow:0 0 22px color-mix(in srgb,var(--tile) 12%,transparent)}
.tile:active{transform:scale(.97)}
.tile-icon{font-size:47px;line-height:1}
.tile-name{font-size:17px;font-weight:800;letter-spacing:.3px}
.power{width:100px;height:100px;border-radius:50%;margin:20px auto 0;border:0;color:white;font-size:45px;background:linear-gradient(135deg,#ff4f55,#ffb331);box-shadow:0 0 35px rgba(255,91,62,.38);cursor:pointer}
.page{padding:4px 12px}
.page-title{text-align:center;font-size:28px;letter-spacing:4px;margin:4px 0 28px}
.card{background:rgba(22,23,25,.93);border:1px solid #303136;border-radius:30px;padding:30px 26px;box-shadow:0 12px 35px rgba(0,0,0,.25)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px}
.field,.metric{background:#000;border-radius:20px;padding:17px 20px;border:1px solid #17181a}
.field label{display:block;color:#777;margin-bottom:8px;font-size:12px;text-transform:uppercase;font-weight:700}
.field input,.field select{width:100%;border:0;outline:0;background:transparent;color:#fff;font-size:18px;font-weight:800}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.metric{display:flex;align-items:center;gap:12px;color:var(--gold);font-weight:800}
.metric span{font-size:26px}.metric small{display:block;color:#777}
.score-box{margin-top:22px;border:1px solid #a06f27;border-radius:22px;padding:24px;display:grid;grid-template-columns:1fr 1fr 1fr;text-align:center}
.score-box small{color:#999;font-weight:700}.score{font-size:34px;font-weight:900;margin-top:12px}
.score.green{color:var(--green)}.score.blue{color:#40baff}.score.gold{color:var(--gold)}
.primary{width:100%;margin-top:28px;border:0;border-radius:20px;padding:24px;background:var(--gold);color:#0a0a0a;font-weight:900;font-size:20px;letter-spacing:2px;cursor:pointer;box-shadow:0 12px 25px rgba(255,177,63,.15)}
.section-title{color:#b17829;font-size:19px;letter-spacing:3px;font-weight:900;margin:28px 0 12px}
.history{background:#17181a;border-radius:24px;padding:20px;border-left:5px solid var(--gold);display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.history b{font-size:18px}.history small{display:block;color:#888;margin-top:8px}.badge{background:#5a4122;padding:11px 15px;border-radius:13px;color:#ffc46a;font-weight:900}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.info-card{background:#151619;border:1px solid #333;border-radius:22px;padding:22px}
.info-card h3{margin:0 0 8px}.info-card p{color:#aaa;line-height:1.5;margin:0}
.back-link{border:1px solid #3a3b3e;background:#151619;color:#fff;border-radius:15px;padding:13px 18px;cursor:pointer;margin-bottom:20px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#222;color:#fff;padding:13px 18px;border-radius:14px;opacity:0;pointer-events:none;transition:.25s;z-index:10;box-shadow:0 10px 30px #000}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:520px){
 .app-shell{padding:10px 12px 28px}.brand{font-size:20px;letter-spacing:5px}.topbar{height:68px}
 .menu-grid{gap:14px}.tile{min-height:154px;border-radius:27px}.tile-icon{font-size:39px}.tile-name{font-size:14px}
 .power{width:88px;height:88px}.page{padding:0 2px}.page-title{font-size:23px;letter-spacing:3px}
 .card{padding:24px 18px}.form-row{gap:12px}.field{padding:15px}.metrics{grid-template-columns:1fr}
 .score-box{padding:18px 8px}.score{font-size:27px}.history{padding:16px}
}
@media(max-width:370px){.menu-grid{gap:10px}.tile{min-height:135px;border-radius:23px}.tile-icon{font-size:33px}.tile-name{font-size:12px}}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.login-card{width:min(100%,430px);background:rgba(20,21,23,.97);border:1px solid #36373a;border-radius:32px;padding:34px 28px;box-shadow:0 25px 70px #000}.login-logo{text-align:center;font-size:52px}.login-title{text-align:center;letter-spacing:5px;font-size:24px}.login-sub{text-align:center;color:#888;margin:10px 0 28px}.login-field{margin-bottom:16px}.login-field label{display:block;color:#999;font-size:12px;font-weight:800;margin:0 0 7px 5px}.login-field input{width:100%;padding:17px;border-radius:16px;border:1px solid #333;background:#050506;color:#fff;outline:0}.login-error{color:#ff6565;text-align:center;min-height:22px}.demo{text-align:center;color:#666;font-size:12px;margin-top:18px}.userbar{display:flex;align-items:center;justify-content:space-between;background:#151619;border:1px solid #303136;border-radius:18px;padding:13px 16px;margin-bottom:18px}.userbar small{display:block;color:#888;margin-top:3px}.logout{border:1px solid #5b3434;background:#211719;color:#ff8b8b;border-radius:12px;padding:10px 13px;cursor:pointer}.user-list{display:grid;gap:10px;margin-top:14px}.user-row{display:flex;justify-content:space-between;align-items:center;background:#0b0c0e;border:1px solid #2a2b2e;border-radius:16px;padding:15px}.user-row small{color:#888;display:block;margin-top:4px}.danger{background:#2a1113;color:#ff7777;border:1px solid #5d272b;border-radius:10px;padding:8px 11px}.admin-btn{margin-top:18px}.metric input{width:100%;background:transparent;color:#fff;border:0;outline:0;font-weight:900}

/* SANTIAJI */
.santiaji-card{line-height:1.65}
.santiaji-title{margin:8px 0 16px;padding:12px 14px;border-left:4px solid #56e6aa;background:rgba(86,230,170,.08);font-size:20px;letter-spacing:.5px}
.santiaji-list{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.santiaji-list p{margin:0;padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.025)}
.santiaji-list p b{display:inline-block;min-width:28px}
@media (max-width:600px){
  .santiaji-title{font-size:17px}
  .santiaji-list{gap:9px}
  .santiaji-list p{padding:10px 11px;font-size:14px}
}

.attendance-status{display:flex;gap:12px;align-items:center;background:#0b0c0e;border:1px solid #292a2e;border-radius:18px;padding:16px;margin-bottom:18px}.attendance-status b{display:block}.attendance-status small{display:block;color:#888;margin-top:5px}.status-dot{width:12px;height:12px;border-radius:50%;background:var(--red);box-shadow:0 0 10px rgba(255,85,91,.4)}.status-dot.ok{background:var(--green);box-shadow:0 0 10px rgba(88,230,170,.5)}
.camera-box{position:relative;min-height:280px;background:#050506;border:1px solid #2d2e32;border-radius:22px;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:18px}.camera-box video,.camera-box img{width:100%;height:100%;max-height:420px;object-fit:cover}.camera-box img[hidden],.camera-box video[hidden]{display:none}.camera-box div{color:#777;text-align:center;font-size:44px;line-height:1.5}.camera-box small{font-size:13px}.attendance-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.secondary{border:1px solid #4a4b50;background:#17181b;color:#fff;border-radius:15px;padding:15px 10px;font-weight:800;cursor:pointer}.secondary:hover{background:#222328}.full{width:100%;margin-bottom:18px}.verify-box{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:18px;padding:16px;border-radius:16px;background:#0c0d0f;border:1px solid #292a2e}.verify-box span{color:#aaa;text-align:right;font-size:13px}.admin-filter{display:grid;grid-template-columns:1fr 1fr;gap:12px}.attendance-admin{display:grid;gap:12px}.attendance-row{display:flex;gap:14px;align-items:center;background:#111214;border:1px solid #303136;border-radius:20px;padding:12px}.attendance-row img{width:86px;height:86px;object-fit:cover;border-radius:15px;background:#000}.att-main{flex:1;min-width:0}.att-main b,.att-main small{display:block}.att-main small{color:#999;margin-top:5px}.att-main a{display:inline-block;color:var(--cyan);margin-top:8px;font-size:12px;font-weight:800;text-decoration:none}
@media(max-width:520px){.attendance-actions{grid-template-columns:1fr}.camera-box{min-height:230px}.admin-filter{grid-template-columns:1fr}.attendance-row{align-items:flex-start}.attendance-row img{width:72px;height:72px}.verify-box{flex-direction:column;align-items:flex-start}.verify-box span{text-align:left}}

.official-search{margin:0 0 14px}.official-search input{width:100%;box-sizing:border-box}.official-list{display:grid;gap:10px}.official-card{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.035)}.official-no{min-width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(78,131,255,.18);color:#8fb0ff;font-weight:800}.official-info{min-width:0}.official-info h3{margin:0 0 5px;font-size:15px;line-height:1.35}.official-info b{display:block;font-size:12px;color:#8fb0ff}.official-info small{display:block;margin-top:3px;opacity:.72;line-height:1.4}

/* CHAT */
.chat-card{padding:18px}.chat-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 4px 16px;border-bottom:1px solid #2b2c30}.chat-head b{display:block}.chat-head small{display:block;color:#888;margin-top:5px}.chat-head span{font-size:11px;color:var(--green);font-weight:900;white-space:nowrap}.chat-messages{height:55vh;min-height:360px;max-height:620px;overflow-y:auto;padding:16px 4px;display:flex;flex-direction:column;gap:12px;background:rgba(0,0,0,.18);border-radius:18px;margin-top:12px}.chat-msg{display:flex;gap:9px;align-items:flex-end;max-width:88%}.chat-msg.mine{align-self:flex-end;flex-direction:row-reverse}.chat-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#17191c;border:1px solid #303136;flex:0 0 auto}.chat-bubble{background:#17191c;border:1px solid #303136;border-radius:18px 18px 18px 5px;padding:10px 13px;box-shadow:0 6px 15px rgba(0,0,0,.16)}.chat-msg.mine .chat-bubble{background:rgba(86,230,170,.10);border-color:rgba(86,230,170,.3);border-radius:18px 18px 5px 18px}.chat-meta{display:flex;gap:10px;align-items:center;margin-bottom:5px}.chat-meta b{font-size:12px}.chat-meta span{font-size:10px;color:#777}.chat-text{font-size:14px;line-height:1.5;word-break:break-word}.chat-compose{display:flex;gap:10px;align-items:stretch;margin-top:12px}.chat-compose textarea{flex:1;resize:none;background:#050506;color:#fff;border:1px solid #34353a;border-radius:17px;padding:14px;outline:none}.chat-compose textarea:focus{border-color:var(--green)}.chat-send{width:auto;margin:0;padding:14px 20px;border-radius:17px}.chat-empty{text-align:center;color:#777;margin:auto;padding:30px}.chat-card .primary:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:520px){.chat-messages{height:58vh;min-height:320px}.chat-compose{align-items:stretch}.chat-send{padding:12px 15px}.chat-msg{max-width:94%}}

.profile-card{max-width:820px;margin:0 auto}.profile-hero{display:flex;gap:16px;align-items:center;padding:8px 0 22px}.profile-avatar{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:30px;border:1px solid rgba(82,124,255,.45);background:rgba(82,124,255,.12)}.profile-hero h2{margin:0 0 5px}.profile-hero small{display:block;opacity:.7}.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.profile-note{font-size:12px;opacity:.65;margin:14px 0}.profile-actions{display:flex;gap:10px;flex-wrap:wrap}.profile-actions .secondary{flex:1}.profile-readonly{opacity:.7}@media(max-width:700px){.profile-grid{grid-template-columns:1fr}}

.auth-tabs{display:flex;gap:8px;margin:0 0 18px}.auth-tab{flex:1;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.04);color:#aaa;border-radius:10px;padding:10px;font-weight:700;cursor:pointer}.auth-tab.active{color:#111;background:#56e6aa;border-color:#56e6aa}.login-card form .primary{width:100%}

.official-group-title{margin:24px 0 12px;font-size:15px;letter-spacing:.08em;text-transform:uppercase}

.data-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}.data-stat{background:#11151c;border:1px solid #252b35;border-radius:14px;padding:14px}.data-stat b{display:block;font-size:22px;color:#fff}.data-stat small{color:#8e98a8}.data-toolbar{display:grid;grid-template-columns:2fr 1fr auto;gap:10px;margin:12px 0}.data-table-wrap{overflow:auto;border:1px solid #252b35;border-radius:14px}.data-table{width:100%;border-collapse:collapse;min-width:1050px}.data-table th,.data-table td{padding:11px 10px;border-bottom:1px solid #222833;text-align:left;font-size:12px;vertical-align:top}.data-table th{position:sticky;top:0;background:#151a22;color:#cbd3df;z-index:1}.data-table td b{color:#fff}.data-table td small{display:block;color:#8994a5;margin-top:3px}.data-empty{padding:25px;text-align:center;color:#8e98a8}@media(max-width:700px){.data-summary{grid-template-columns:1fr}.data-toolbar{grid-template-columns:1fr}.data-table th,.data-table td{font-size:11px}}

/* SHOOTING RANGE */
.shooting-page{padding:0 2px}.shooting-card{background:#1b1b1b;border-radius:0;padding:14px 2px 28px}.shooting-date{background:#000;border:1px solid #111;border-radius:18px;padding:17px 20px;margin:0 0 26px}.shooting-date label,.shoot-field label{color:#9bea16;font-size:12px;font-weight:900;letter-spacing:.4px;display:block;margin-bottom:10px}.shooting-date input,.shoot-field select{width:100%;box-sizing:border-box;background:#000;color:#fff;border:0;outline:0;font-weight:800;font-size:16px}.shooting-date input{font-size:18px}.shooting-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 24px}.shoot-field{min-width:0}.shoot-field select{appearance:auto;border-radius:17px;padding:22px 18px;min-height:74px}.shoot-material{margin-top:25px}.shoot-material select{width:100%}.shoot-score-head{display:flex;justify-content:space-between;align-items:center;margin:28px 0 14px;color:#9bea16;font-size:18px;font-weight:900}.shoot-score-head span{font-size:18px}.hit-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:17px;overflow:hidden}.hit-box{border:1px solid #222;background:#050505;border-radius:15px 15px 0 0;padding:0 0 18px;color:#fff;cursor:pointer;overflow:hidden;min-width:0}.hit-box span{display:block;padding:10px 4px;font-size:18px;font-weight:900}.hit-box strong{display:block;font-size:26px;padding-top:28px}.hit-good span{background:#168a28}.hit-warn span{background:#fa5d00}.hit-box:active{transform:scale(.97)}.shoot-actions{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:10px;margin-top:20px}.shoot-save{margin:0;padding:16px;font-size:14px;border-radius:14px}.shoot-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.shoot-summary>div{background:#0c0c0c;border:1px solid #292929;border-radius:15px;padding:14px;text-align:center}.shoot-summary small{display:block;color:#777;font-size:10px;font-weight:800}.shoot-summary b{display:block;color:#ffae38;font-size:24px;margin-top:7px}.shooting-log-title{color:#9bea16;margin:28px 0 12px}.shooting-logs{display:grid;gap:12px}.shoot-log{background:#292929;border-radius:22px;padding:20px;display:flex;gap:14px;align-items:center}.shoot-log-icon{width:38px;height:38px;border:2px solid #ffb53e;border-radius:50%;display:grid;place-items:center;color:#ffb53e;font-size:20px;flex:0 0 auto}.shoot-log-main{min-width:0;flex:1}.shoot-log-main b{display:block;font-size:15px;line-height:1.35}.shoot-log-main small{display:block;color:#777;margin-top:7px;font-size:11px}.shoot-log>strong{font-size:30px;color:#ffb53e}.shooting-page .field input{background:transparent}
@media(max-width:520px){.shooting-card{padding-left:0;padding-right:0}.shooting-form-grid{gap:12px}.shoot-field select{padding:19px 12px;font-size:14px;min-height:68px}.shoot-score-head{font-size:16px}.shoot-score-head span{font-size:15px}.hit-grid{gap:5px}.hit-box span{font-size:16px;padding:9px 2px}.hit-box strong{font-size:22px;padding-top:25px}.shoot-actions{grid-template-columns:1fr 1fr;margin-top:16px}.shoot-save{grid-column:1/-1}.shoot-summary b{font-size:21px}.shoot-log{padding:16px;border-radius:18px}.shoot-log>strong{font-size:26px}.shoot-log-main b{font-size:13px}}

/* PROFILE / PERSONEL CARD */
.profile-page{padding:0 0 40px}.profile-shell{max-width:900px;margin:0 auto}.profile-banner{position:relative;display:flex;gap:24px;align-items:center;min-height:190px;padding:28px 30px 30px;border:1px solid rgba(255,255,255,.10);border-radius:0 0 30px 30px;background:linear-gradient(135deg,#24262a,#17191b 62%,#101112);overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.24)}.profile-banner:before{content:"";position:absolute;width:230px;height:230px;border:3px solid rgba(211,166,78,.55);border-radius:50%;left:5px;top:-58px}.profile-photo-wrap{position:relative;z-index:1;flex:0 0 auto}.profile-photo{width:145px;height:145px;border-radius:50%;display:grid;place-items:center;overflow:hidden;border:3px solid #d7ad55;background:#292b2e;box-shadow:0 0 0 7px rgba(215,173,85,.08)}.profile-photo img{width:100%;height:100%;object-fit:cover}.profile-photo span{font-size:64px;opacity:.7}.camera-button{position:absolute;right:-2px;bottom:-2px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#d7ad55;color:#111;font-size:21px;border:5px solid #17191b;cursor:pointer}.camera-button input{display:none}.profile-banner-text{position:relative;z-index:1;min-width:0}.profile-kicker{font-size:11px;letter-spacing:.14em;color:#d7ad55;font-weight:900;margin-bottom:8px}.profile-banner h1{font-size:28px;margin:0 0 10px;line-height:1.15}.profile-id{font-size:12px;color:#999}.profile-id b{display:inline-block;color:#b9f05d;background:rgba(86,230,170,.10);padding:8px 12px;border-radius:8px;margin-left:5px;letter-spacing:.08em}.profile-section{margin-top:30px}.profile-section-title{display:flex;align-items:center;gap:12px;font-size:16px;letter-spacing:.12em;font-weight:900;color:#ddd;margin:0 8px 14px}.profile-section-title span{display:block;width:6px;height:30px;border-radius:8px;background:#d7ad55}.profile-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.profile-field.full{grid-column:1/-1}.profile-field label{display:block;margin:0 0 -7px 28px;position:relative;z-index:2;width:max-content;max-width:80%;padding:0 7px;background:#111;color:#858585;font-size:11px;font-weight:900;letter-spacing:.05em}.profile-value{min-height:76px;display:flex;align-items:center;gap:12px;background:#1a1a1b;border:1px solid #343539;border-radius:22px;padding:0 20px;box-sizing:border-box;transition:.2s}.profile-value:focus-within{border-color:#d7ad55;box-shadow:0 0 0 2px rgba(215,173,85,.08)}.profile-value i{font-style:normal;color:#d7ad55;font-size:22px;width:28px;text-align:center;flex:0 0 auto}.profile-value input,.profile-value select{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:18px;font-weight:800}.profile-value input[type=date]{color-scheme:dark}.profile-value select{appearance:auto}.profile-value.readonly{background:#171718}.profile-value.readonly input{color:#eee}.profile-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:12px;margin-top:30px}.profile-actions .primary,.profile-actions .secondary{width:100%;margin:0}
@media(max-width:650px){.profile-banner{padding:25px 20px;gap:17px;min-height:165px;border-radius:0 0 24px 24px}.profile-banner:before{width:190px;height:190px;left:-45px;top:-50px}.profile-photo{width:112px;height:112px}.profile-photo span{font-size:50px}.camera-button{width:42px;height:42px;font-size:18px}.profile-banner h1{font-size:21px}.profile-kicker{font-size:9px}.profile-fields{grid-template-columns:1fr}.profile-field.full{grid-column:auto}.profile-section{margin-top:24px}.profile-section-title{font-size:14px}.profile-value{min-height:68px;border-radius:18px;padding:0 15px}.profile-value input,.profile-value select{font-size:16px}.profile-actions{grid-template-columns:1fr}.profile-actions .primary{grid-row:1}.profile-actions .secondary{grid-row:2}}

/* MEDICAL VITAL SIGNS */
.health-page{padding:0 0 42px}.health-brand{font-size:21px;letter-spacing:4px}.health-refresh{color:#ff575d}.health-visual{height:410px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 20%,rgba(255,70,80,.10),transparent 35%),linear-gradient(90deg,rgba(0,0,0,.2),rgba(45,10,12,.28),rgba(0,0,0,.2));border-bottom:1px solid #211719}.health-body{position:absolute;left:50%;top:22px;transform:translateX(-50%);font-size:210px;line-height:1;color:rgba(255,255,255,.035);font-weight:900}.health-badge{position:absolute;width:66px;height:112px;border:2px solid;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:rgba(4,5,6,.75);z-index:2}.health-badge span{font-size:22px}.health-badge small{color:#777;font-weight:900}.health-badge b{font-size:20px}.health-badge.height{left:5%;top:68px;border-color:#3764b9;color:#4c91ff}.health-badge.blood{right:5%;top:68px;border-color:#8b302f;color:#ff575d}.health-badge.weight{left:50%;bottom:34px;transform:translateX(-50%);border-color:#a06f27;color:#ffb33e}.health-card{margin:-2px 6% 0;background:#171819;border:1px solid #38393b;border-radius:32px;padding:38px 38px 36px;position:relative;z-index:3;box-shadow:0 -12px 30px rgba(0,0,0,.25)}.health-date{display:flex;align-items:center;background:#070809;border-left:6px solid #ff575d;border-radius:18px;padding:20px 20px 20px 28px}.health-date input{flex:1;background:transparent;color:#fff;border:0;outline:0;font-size:19px;font-weight:900;text-transform:uppercase}.health-date span{color:#ff575d;font-size:25px}.health-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}.health-input{min-height:82px;background:#0b0c0d;border-radius:18px;display:flex;align-items:center;gap:12px;padding:0 20px;color:#ff575d}.health-input>span{font-size:23px}.health-input input,.health-input select{width:100%;min-width:0;background:transparent;border:0;outline:0;color:#777;font-size:16px;font-weight:800}.health-input input::placeholder{color:#777}.health-input.select{position:relative;flex-wrap:wrap;gap:0}.health-input.select small{position:absolute;top:7px;left:58px;color:#777;font-size:10px;font-weight:900}.health-input.select select{color:#fff;padding-top:14px}.health-input.select>span{order:3;color:#777}.health-input em{font-style:normal;color:#555;font-size:20px}.health-preview{margin:16px 2px 0;color:#888;font-size:12px;text-align:center}.health-preview b{color:#56e6aa}.health-submit{width:100%;border:0;border-radius:25px;padding:22px;background:#ff535a;color:#fff;font-size:19px;font-weight:900;letter-spacing:1px;margin-top:20px;cursor:pointer;box-shadow:0 12px 28px rgba(255,83,90,.16)}.health-log-title{color:#aaa;margin:34px 6% 14px;font-size:17px}.health-logs{display:grid;gap:12px;margin:0 6%}.health-log{display:flex;align-items:center;gap:15px;background:#141516;border:1px solid #303134;border-radius:24px;padding:18px 16px}.health-bmi{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(29,111,75,.35);color:#56e6aa;font-weight:900;flex:0 0 auto}.health-log-main{flex:1;min-width:0}.health-log-main b{font-size:16px}.health-log-main b span{color:#56e6aa}.health-log-main b i{font-style:normal;color:#56e6aa}.health-log-main small{display:block;color:#777;margin-top:7px;line-height:1.35}.health-score{color:#555;font-size:25px}@media(max-width:520px){.health-brand{font-size:16px;letter-spacing:2px}.health-visual{height:390px}.health-body{font-size:185px}.health-card{margin-left:6%;margin-right:6%;padding:28px 20px 24px;border-radius:27px}.health-grid{gap:12px}.health-input{min-height:76px;padding:0 13px}.health-input input,.health-input select{font-size:13px}.health-submit{font-size:16px;padding:20px}.health-log-title{margin-left:6%;margin-right:6%}.health-logs{margin-left:6%;margin-right:6%}.health-log{padding:15px 12px}.health-log-main b{font-size:14px}.health-log-main small{font-size:11px}}

.official-note{font-size:12px;opacity:.65;margin:-4px 0 14px}.official-card-photo{position:relative;align-items:center;cursor:pointer;padding-right:54px}.official-avatar{width:54px;height:54px;flex:0 0 54px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#22252a,#111);border:2px solid rgba(215,173,85,.65);color:#d7ad55;font-size:25px}.official-avatar img{width:100%;height:100%;object-fit:cover}.official-camera{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1px solid rgba(215,173,85,.35);background:#d7ad55;color:#111;cursor:pointer}.official-modal{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.72);backdrop-filter:blur(7px);display:none;align-items:center;justify-content:center;padding:20px}.official-modal.show{display:flex}.official-modal-box{position:relative;width:min(420px,100%);background:#171819;border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:28px;text-align:center;box-shadow:0 24px 80px rgba(0,0,0,.45)}.official-modal-close{position:absolute;right:12px;top:10px;width:38px;height:38px;border:0;border-radius:50%;background:#2a2b2d;color:#fff;font-size:25px;cursor:pointer}.official-large-avatar{width:170px;height:170px;border-radius:50%;overflow:hidden;margin:4px auto 18px;display:grid;place-items:center;background:#222;border:3px solid #d7ad55;color:#d7ad55;font-size:70px}.official-large-avatar img{width:100%;height:100%;object-fit:cover}.official-modal-box h2{margin:0 0 8px;font-size:20px}.official-modal-box>b{color:#8fb0ff}.official-modal-box p{opacity:.72;line-height:1.5}.official-modal-box .danger{margin-top:10px;width:100%}@media(max-width:650px){.official-avatar{width:48px;height:48px;flex-basis:48px}.official-card{gap:9px}.official-info h3{font-size:14px}.official-camera{width:34px;height:34px}}

/* FACE TO FACE - PROFIL & DATA KELUARGA */
.face-person-cell{display:flex;align-items:center;gap:10px;min-width:220px}.face-mini-avatar{width:42px;height:42px;flex:0 0 42px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#25282d,#111);border:2px solid rgba(255,224,42,.55);font-size:20px}.face-mini-avatar img{width:100%;height:100%;object-fit:cover}.face-camera-btn{margin-left:5px!important;padding:9px 11px!important;min-width:auto!important;border-radius:12px!important}.face-modal-box{max-height:90vh;overflow:auto}.face-large-avatar{border-color:#ffe02a}.face-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left;margin:18px 0}.face-edit-field{display:flex;flex-direction:column;gap:6px}.face-edit-field.full{grid-column:1/-1}.face-edit-field label{font-size:10px;color:#888;font-weight:900;letter-spacing:.08em}.face-edit-field input,.face-edit-field select,.face-edit-field textarea{width:100%;box-sizing:border-box;border:1px solid #343539;border-radius:14px;background:#0c0d0e;color:#fff;padding:13px;outline:0;font:inherit}.face-edit-field textarea{resize:vertical}.face-edit-field small{color:#777;font-size:10px}.face-family-view{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left;margin-top:18px}.face-family-view>div{background:#0d0e0f;border:1px solid #2b2c2e;border-radius:14px;padding:13px}.face-family-view .full{grid-column:1/-1}.face-family-view span{display:block;color:#777;font-size:9px;font-weight:900;letter-spacing:.08em;margin-bottom:5px}.face-family-view b{display:block;color:#fff;font-size:14px;line-height:1.4}@media(max-width:650px){.face-edit-grid,.face-family-view{grid-template-columns:1fr}.face-edit-field.full,.face-family-view .full{grid-column:auto}.face-person-cell{min-width:170px}.face-mini-avatar{width:38px;height:38px;flex-basis:38px}.face-modal-box{padding:22px 16px}.face-large-avatar{width:140px;height:140px}}

/* ELEGANT COMMAND CENTER UI */
.tile{position:relative;overflow:hidden;text-align:left;padding:24px;align-items:flex-start;justify-content:flex-start;gap:12px;background:linear-gradient(145deg,rgba(25,26,29,.98),rgba(12,13,15,.98));box-shadow:0 16px 35px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04)}
.tile:before{content:"";position:absolute;inset:auto -30px -50px auto;width:130px;height:130px;border-radius:50%;background:var(--tile);opacity:.08;filter:blur(8px)}
.tile-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:color-mix(in srgb,var(--tile) 13%,#111);border:1px solid color-mix(in srgb,var(--tile) 35%,transparent);font-size:31px}
.tile-content{position:relative;z-index:1}.tile-name{font-size:17px;color:#fff}.tile-content small{display:block;color:#85858b;margin-top:5px;font-size:11px;letter-spacing:.5px}.tile-arrow{position:absolute;right:18px;top:22px;font-size:28px;color:var(--tile)}
.elegant-page{padding-bottom:40px}.hero-module{display:flex;gap:18px;align-items:center;padding:24px;border-radius:28px;background:linear-gradient(145deg,rgba(30,31,34,.98),rgba(13,14,16,.98));border:1px solid color-mix(in srgb,var(--module) 28%,#303136);box-shadow:0 18px 45px rgba(0,0,0,.28)}.hero-icon{width:76px;height:76px;border-radius:24px;display:grid;place-items:center;background:color-mix(in srgb,var(--module) 15%,#101114);color:var(--module);font-size:38px}.hero-module span,.detail-label,.elegant-card span{font-size:10px;letter-spacing:2px;color:#888;font-weight:900}.hero-module h1{margin:5px 0;font-size:26px;letter-spacing:2px}.hero-module p{margin:0;color:#aaa;line-height:1.45}.elegant-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}.elegant-card{padding:20px;border:1px solid #303136;border-radius:22px;background:#151619}.elegant-card strong{display:block;color:var(--green);font-size:22px;margin:5px 0}.elegant-card p{margin:0;color:#999;line-height:1.45;font-size:13px}.detail-panel{margin-top:16px;padding:22px;border-radius:26px;background:linear-gradient(145deg,#17181b,#0e0f11);border:1px solid #303136}.detail-head{display:flex;justify-content:space-between;align-items:center}.detail-head span{color:#888;font-size:10px;letter-spacing:2px;font-weight:900}.detail-head h2{margin:5px 0 16px;font-size:19px}.module-dot{width:14px;height:14px;border-radius:50%;box-shadow:0 0 18px currentColor}.action-list{display:grid;gap:10px}.action-list button{display:flex;align-items:center;gap:13px;text-align:left;background:#0c0d0f;border:1px solid #292a2e;border-radius:18px;padding:15px;color:#fff;cursor:pointer}.action-list button>span{font-size:22px;color:#bbb}.action-list button div{flex:1}.action-list b{display:block;font-size:13px}.action-list small{display:block;color:#777;margin-top:4px}.action-list i{font-style:normal;font-size:25px;color:#777}
/* Santiaji */
.santiaji-top{background:linear-gradient(180deg,#a90d14,#8f090f);margin:0 -18px;padding:0 18px;border-bottom:1px solid #d63b41}.santiaji-page{padding-top:14px}.santiaji-hero{display:flex;gap:15px;align-items:center;padding:22px;border-radius:27px;background:linear-gradient(145deg,rgba(38,38,40,.98),rgba(17,18,20,.98));border:1px solid #38393d;box-shadow:0 18px 45px rgba(0,0,0,.3);margin-bottom:16px}.santiaji-emblem{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;color:#ffd45a;background:#332c18;font-size:30px}.santiaji-hero span{font-size:10px;letter-spacing:2px;color:#999;font-weight:900}.santiaji-hero h1{margin:4px 0;font-size:26px;letter-spacing:3px}.santiaji-hero p{margin:0;color:#aaa;font-size:13px;line-height:1.45}.santiaji-menu{display:grid;gap:14px}.santiaji-item{overflow:hidden;border-radius:27px;background:#191a1c;border:1px solid #35363a;box-shadow:0 12px 30px rgba(0,0,0,.22);transition:.2s}.santiaji-item.open{border-color:color-mix(in srgb,var(--accent) 55%,#35363a);box-shadow:0 16px 35px rgba(0,0,0,.32),0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent)}.santiaji-item.gold{--accent:#d9aa43}.santiaji-item.red{--accent:#ff5b61}.santiaji-item.blue{--accent:#4e91ff}.santiaji-item.green{--accent:#53dfaa}.santiaji-toggle{width:100%;display:flex;align-items:center;gap:15px;padding:20px;background:transparent;border:0;color:#fff;text-align:left;cursor:pointer}.santiaji-icon{flex:0 0 62px;width:62px;height:62px;border-radius:19px;display:grid;place-items:center;font-size:30px;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,#151619);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}.santiaji-copy{flex:1;min-width:0}.santiaji-copy h2{margin:0;font-size:19px;line-height:1.35;letter-spacing:1px}.santiaji-copy p{margin:5px 0 0;color:var(--accent);font-weight:800;font-size:13px;letter-spacing:.7px}.santiaji-chevron{font-size:28px;color:#aaa;transition:.2s}.santiaji-item.open .santiaji-chevron{transform:rotate(180deg);color:var(--accent)}.santiaji-detail{max-height:0;overflow:hidden;padding:0 20px;transition:max-height .3s ease,padding .3s ease;border-top:1px solid transparent}.santiaji-item.open .santiaji-detail{max-height:240px;padding:18px 20px 20px;border-top-color:#2c2d30}.santiaji-detail p{color:#bdbdc2;line-height:1.6;margin:8px 0 15px}.santiaji-actions{display:flex;gap:9px}.santiaji-actions button{border:1px solid color-mix(in srgb,var(--accent) 35%,#333);background:color-mix(in srgb,var(--accent) 9%,#111);color:var(--accent);border-radius:13px;padding:10px 12px;font-size:11px;font-weight:900;cursor:pointer}.santiaji-footer{display:flex;gap:12px;align-items:center;margin:18px 2px 0;padding:15px 17px;border-radius:18px;background:#111214;border:1px solid #2d2e32}.santiaji-footer span{font-size:25px}.santiaji-footer b{display:block;font-size:12px;letter-spacing:1px}.santiaji-footer small{display:block;color:#777;margin-top:4px}
@media(max-width:600px){.tile{min-height:160px;padding:19px;border-radius:25px}.tile-icon{width:52px;height:52px;font-size:28px}.tile-name{font-size:15px}.hero-module{padding:19px}.hero-icon{width:62px;height:62px;border-radius:20px}.hero-module h1{font-size:21px}.elegant-grid{grid-template-columns:1fr}.santiaji-top{margin:0 -12px;padding:0 12px}.santiaji-hero{padding:18px}.santiaji-copy h2{font-size:16px}.santiaji-toggle{padding:17px}.santiaji-icon{flex-basis:54px;width:54px;height:54px}.santiaji-actions{flex-direction:column}.santiaji-actions button{width:100%}}