/* Insan Agraria: exact navy and gold from the supplied final identity guide.
   SVG viewports display the original logo pixels without stretching them. */
:root{--navy:#0d2d5b;--navy-dark:#001b46;--navy-soft:#edf3fb;--gold:#d4a853;--gold-soft:#fff5df;--ink:#18314f;--bg:#f3f6fb}
.login-screen{background:radial-gradient(ellipse at 10% 8%,#fff 0,transparent 55%),radial-gradient(ellipse at 96% 96%,#efe3c9 0,transparent 45%),linear-gradient(135deg,#eef4fc,#e1eaf6)}
.auth-shell{border-color:#fff;box-shadow:inset 0 1px 0 #fff,0 0 0 1px #bccbde,0 7px 0 #b4c4d9,0 8px 0 1px #9fb2cb,0 28px 45px -24px #0d2d5b66,0 45px 85px -32px #0d2d5b33}
.auth-brand-panel{background:#fff;padding-left:32px;padding-top:27px;padding-bottom:27px}
.auth-wordmark{width:100%;max-width:368px;margin:0;aspect-ratio:1080/330;object-fit:contain}
.auth-brand-copy{margin:15px 0 39px}.auth-brand-copy h1{font-size:40px;letter-spacing:-1.5px;margin:15px 0;color:var(--navy)}.auth-brand-copy h1 span{color:#a46a08}
.auth-brand-copy p{font-size:13px;line-height:1.7;color:#546a86}.auth-brand-copy .eyebrow{color:#516988;font-size:9px;letter-spacing:.13em}.auth-feature-row{gap:7px;margin-top:18px}.auth-feature-row span{font-size:10px;padding:6px 8px;color:#365477}
.auth-brand-panel::after{background-color:var(--navy);border-color:var(--gold);opacity:1}
.auth-brand-panel::before{background-color:var(--navy);border-color:var(--gold)}
.auth-watermark{display:none}.auth-brand-foot{color:#5b6e85;font-size:10px}.auth-brand-foot .gold-dot{background:var(--gold)}
.auth-form-panel>.overline{color:#697c97}.auth-form-panel h2{color:var(--navy)}.auth-form-panel .login-lock{color:var(--navy)}
.auth-form-panel .input-icon input:focus,.otp-input:focus{border-color:#4779b0;box-shadow:0 0 0 3px #0d2d5b12;outline:none}
.auth-form-panel .login-submit{background:linear-gradient(#16477e,#0d2d5b);border-color:#1b467e;box-shadow:inset 0 1px 0 #ffffff42,0 5px 0 #001738,0 10px 16px #0d2d5b26}
.auth-form-panel .login-submit:hover:not(:disabled){background:linear-gradient(#205994,#073469)}
.auth-copyright{color:#506785}.auth-copyright small{color:#657790}
.splash-mark{padding:10px}.splash h1 span{color:var(--navy);letter-spacing:.1em;font-weight:800}.splash>.eyebrow{color:#6a7d97;letter-spacing:.14em}
.sidebar-brand{gap:10px}.sidebar-brand .brand-icon{width:44px;height:49px;background:#fff;border-radius:10px;overflow:hidden;flex-shrink:0}.sidebar-brand .brand-icon img{width:100%;height:100%;object-fit:contain;object-position:center;padding:2px;margin:0;transform:none;display:block}
.sidebar-brand b{font-size:19px;letter-spacing:.07em;color:var(--navy)}.sidebar-brand small{font-size:7px;letter-spacing:.11em;color:#6e7e96}.brand-period{color:var(--gold)}
.workspace-pill{color:var(--navy);font-weight:700;letter-spacing:.1em}.workspace-pill span{background:var(--gold)}
.app-screen .button.primary{background:linear-gradient(#16477e,#0d2d5b);border:1px solid #173e70;box-shadow:inset 0 1px 0 #ffffff30,0 3px 0 #001737,0 6px 12px #0d2d5b14}.app-screen .button.primary:active{transform:translateY(2px);box-shadow:0 1px 0 #001737}
.nav-item.active{background:linear-gradient(110deg,#0d2d5b,#16477e);box-shadow:0 4px 9px #0d2d5b1f}.welcome-banner{border-color:#d8e4f5}.welcome-banner::after{opacity:.22}
.app-footer b{color:var(--navy);letter-spacing:.08em;margin-left:0}.hko-map-pin{background:linear-gradient(#16477e,#0d2d5b)}
@media(min-width:1600px) and (min-height:850px){.auth-brand-panel{padding-left:40px;padding-top:32px;padding-bottom:30px}.auth-wordmark{max-width:400px}.auth-brand-copy h1{font-size:46px}.auth-brand-copy p{font-size:14px}.auth-brand-copy .eyebrow{font-size:10px}.auth-feature-row span{font-size:11px}}
@media(min-width:761px) and (max-width:940px){.auth-brand-panel{padding-left:24px}.auth-brand-copy h1{font-size:33px}.auth-brand-copy .eyebrow{font-size:8px;letter-spacing:.08em}.auth-feature-row{gap:6px}.auth-feature-row span{font-size:9px}}
@media(max-height:700px) and (min-width:761px){.auth-brand-panel{padding-top:20px;padding-bottom:23px}.auth-wordmark{max-width:305px}.auth-brand-copy{margin-top:12px;margin-bottom:32px}.auth-brand-copy h1{font-size:36px;margin:11px 0}.auth-brand-copy p{font-size:12px}.auth-feature-row{margin-top:12px}.auth-brand-copy .eyebrow{font-size:8px}}
@media(max-width:760px){.auth-mobile-wordmark{width:240px;max-width:100%;height:auto;aspect-ratio:1080/330;object-fit:contain;margin:0 auto 19px}.auth-form-panel:has(#mfa-panel:not([hidden])) .auth-mobile-wordmark{width:207px;margin-bottom:12px}.auth-copyright{font-size:10px}}
@media(max-height:700px) and (max-width:760px){.auth-mobile-wordmark{width:205px;margin-bottom:13px}.auth-form-panel>.overline{display:none}.auth-form-panel h2{font-size:24px}.auth-form-panel form{margin-top:16px}.auth-form-panel .input-icon{margin-bottom:12px}.auth-form-panel .invite-note{margin-top:15px;padding-top:11px}}

/* The final brand statement uses a smaller final line to keep login compact. */
.auth-brand-copy h1{font-size:38px;line-height:1.12}.auth-brand-copy h1 span{display:inline-block;font-size:25px;letter-spacing:-.7px;color:#956714;line-height:1.3}.auth-brand-copy p{max-width:315px}.auth-brand-copy{margin-top:10px}
@media(min-width:1600px) and (min-height:850px){.auth-brand-copy h1{font-size:46px}.auth-brand-copy h1 span{font-size:29px}}
@media(min-width:761px) and (max-width:940px){.auth-brand-copy h1{font-size:33px}.auth-brand-copy h1 span{font-size:21px}}
@media(max-height:700px) and (min-width:761px){.auth-brand-copy h1{font-size:33px}.auth-brand-copy h1 span{font-size:23px}.auth-brand-copy p{font-size:12px}.auth-brand-copy{margin-top:10px;margin-bottom:32px}}

/* v0.8: compact interaction states and a clearer woven accent in the workspace. */
.auth-form-panel .input-icon input,.auth-form-panel .otp-input,.auth-form-panel .otp-input.backup-input{font-family:inherit;font-size:14px;font-weight:400;letter-spacing:normal;line-height:1.5}
.auth-form-panel .otp-input{text-align:left;min-height:47px;padding:12px 13px;background:#fff;color:#223551}
.splash{background:#f5f7fb;gap:18px}.splash .boot-logo{display:block;width:48px;height:50px;object-fit:contain;margin:0;animation:none;transform:none}.splash .boot-message{display:flex;align-items:center;justify-content:center;gap:10px;max-width:360px;padding:0 16px}.splash #boot-status{font-size:13px;line-height:1.6;color:#5a6d84;margin:0;letter-spacing:normal}.splash #skip-splash{margin-top:0;font-size:12px}
.loading-spinner{display:inline-block;width:17px;height:17px;flex:0 0 17px;border-width:2px;border-top-color:var(--navy)}.loading-panel{display:flex;justify-content:center;align-items:center;gap:10px;min-height:220px;padding:40px 20px;color:#6c7c91;font-size:13px}.loading-panel p{margin:0}
.confirm-modal{width:min(370px,calc(100vw - 32px));max-width:370px}.confirm-modal .modal-head{padding:22px 22px 10px}.confirm-modal .modal-head h2{font-size:19px}.confirm-modal .modal-body{padding:0 22px 20px;scrollbar-gutter:auto}.confirm-modal .modal-actions{padding:15px 22px;gap:10px}.confirm-modal .button{min-width:88px}.confirm-modal .form-error{margin-top:12px}
.sidebar-brand .brand-icon{min-width:44px;overflow:visible}.sidebar-brand .brand-icon img{max-width:100%;max-height:100%;margin:0;transform:none}.sidebar-brand{position:relative;margin-bottom:14px}.sidebar-brand::after{content:'';position:absolute;bottom:0;left:0;right:0;height:9px;background:var(--navy) url('assets/tenun-ntt.svg') repeat center/200px 70px;border-radius:3px;border-bottom:1px solid var(--gold)}
.welcome-banner{padding-right:68px}.welcome-banner::after{width:42px;opacity:1;background:var(--navy) url('assets/tenun-ntt.svg') repeat center/210px 74px;border-left:2px solid var(--gold)}.welcome-banner .banner-glyph{display:none}.page-heading{border-bottom:1px solid #dce4ef;padding-bottom:23px;position:relative}.page-heading::after{content:'';position:absolute;bottom:-1px;left:0;width:90px;height:4px;background:var(--navy) url('assets/tenun-ntt.svg') repeat center/170px 60px;border-radius:2px}.app-footer small{font-size:10px;color:#697b93;line-height:1.6}.nav-item{text-decoration:none}
.photo-crop-modal{border:1px solid #dbe3ee;border-radius:20px;padding:0;width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 24px);color:var(--ink);background:#fff;overflow:hidden;box-shadow:0 24px 80px #0d2d5b44}.photo-crop-modal[open]{display:flex;flex-direction:column}.photo-crop-modal::backdrop{background:#0b203d75}.crop-head,.crop-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;flex:0 0 auto}.crop-head h2{font-size:19px}.crop-head .icon-button{font-size:26px}.crop-body{min-height:0;overflow:auto;padding:0 22px 20px;scrollbar-width:thin;scrollbar-color:#b4c1d4 #f5f7fb}.crop-body>p{font-size:12px;color:#6b7c91;line-height:1.6;margin-bottom:15px}.crop-stage{width:min(100%,300px);aspect-ratio:1;margin:0 auto 18px;position:relative;border-radius:14px;overflow:hidden;touch-action:none;cursor:grab;background:#edf2f8}.crop-stage:active{cursor:grabbing}.crop-stage canvas{display:block;width:100%;height:100%}.crop-guide{position:absolute;inset:0;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 100px #081a36a6;pointer-events:none}#crop-zoom{padding:0;border:0;box-shadow:none;accent-color:var(--navy);height:30px;background:transparent;cursor:pointer}.crop-body .crop-keyboard{margin:12px 0 8px;font-size:11px}.crop-controls{display:flex;justify-content:center;gap:8px}.crop-controls button{height:34px;min-width:34px;border:1px solid #dce3ed;border-radius:7px;background:#f6f8fc;color:var(--navy);font:inherit;font-size:14px}.crop-controls #crop-reset{font-size:11px;padding:0 9px}.crop-actions{justify-content:flex-end;background:#f8fafd;border-top:1px solid #e3e9f1}
@media(min-width:1600px) and (min-height:850px){.auth-form-panel .input-icon input,.auth-form-panel .otp-input,.auth-form-panel .otp-input.backup-input{font-size:15px}}
@media(max-width:760px){.auth-form-panel .input-icon input,.auth-form-panel .otp-input,.auth-form-panel .otp-input.backup-input{font-size:16px}.welcome-banner{padding-right:47px}.welcome-banner::after{width:28px}.app-footer{flex-direction:column;align-items:flex-start;gap:6px}.app-footer small{font-size:9px}.page-heading{padding-bottom:18px}}
@media(max-height:680px){.crop-stage{width:min(100%,220px)}.crop-head,.crop-actions{padding:13px 18px}.crop-body{padding:0 18px 12px}.crop-body>p{margin-bottom:10px}}

/* Account avatars match the circular crop preview. */
#top-avatar,#sidebar-profile .avatar,#account-photo-preview .avatar,#account-menu .avatar{border-radius:50%}