/* Account controls follow the existing card and form typography. */
.account-card label{display:block;font-size:13px;font-weight:600;margin:16px 0 8px}
.account-card .input-css{width:100%;box-sizing:border-box;min-height:44px;margin:0 0 12px}
.account-card button{min-height:44px;margin:0 0 12px}
.account-card p{font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.account-actions{display:flex;flex-wrap:wrap;gap:12px}.account-actions button{flex:1 1 150px}
.account-card [hidden],.account-actions[hidden]{display:none!important}


html[data-account-check="pending"]::before{content:'Memeriksa akses akun…';position:fixed;inset:0;display:grid;place-items:center;background:var(--bg-body,#f4f4f7);color:var(--text-main,#222);z-index:19999;font:14px system-ui}

.registration-system{border-top:1px solid var(--border,#ddd);margin-top:16px;padding-top:16px}.registration-system details{border:1px solid var(--border,#ddd);border-radius:12px;padding:14px;margin:0 0 12px}.registration-system summary{cursor:pointer;font-size:13px;font-weight:700}.registration-system details>p{margin-top:12px}.registration-system h4{font-size:13px;margin:20px 0 12px}.reg-list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--border,#ddd)}.reg-list-row div{min-width:0}.reg-list-row b{font-size:13px}.reg-list-row button{flex:0 0 auto;font-size:12px}.registration-system [hidden]{display:none!important}
/* Account dialog uses the same theme tokens, controls and spacing as profile cards. */
.account-dialog{width:min(520px,calc(100% - 32px));max-height:calc(100dvh - 32px);box-sizing:border-box;padding:0;color:var(--text-main);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--panel-radius,11px);overflow:auto;overscroll-behavior:contain}
.account-dialog::backdrop{background:rgba(0,0,0,.55)}
.account-dialog:not([open]){display:none!important}.account-dialog .account-card{padding:20px}
.account-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.account-dialog-heading h2{font-size:18px;margin:0}.account-dialog-heading button{width:44px;flex:0 0 44px;margin:0;font-size:24px;padding:0}
.account-dialog .registration-system{margin:0;padding:0;border:0}.account-dialog .sub-nav-container{position:static;margin:0 0 20px;min-height:44px;z-index:auto;box-shadow:none;display:flex}.account-auth-tabs .sub-nav-btn{flex:1;min-width:0;margin:0}
.account-dialog .account-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.account-dialog .account-actions button{width:100%;margin:0}.account-dialog .account-status-actions{grid-template-columns:1fr}
.account-dialog h3{font-size:16px;margin:24px 0 16px}.account-dialog h4{font-size:14px;margin:24px 0 12px}.account-dialog p{margin:0 0 12px}.account-dialog label{margin-top:16px}.account-dialog .reg-upload{margin:0;display:flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;cursor:pointer;text-align:center}
.account-dialog .reg-import-list{max-height:180px;overflow:auto;padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--bg-input)}.account-dialog .reg-list-row p{margin:4px 0 0}.account-dialog .reg-list-row{align-items:flex-start}.account-dialog [role=status]:empty{display:none}
html[data-account-check] #account-dialog{visibility:visible}
body:has(#account-dialog[open]){overflow:hidden}

html[data-ui-design] body .account-dialog{border-color:var(--ui-line);border-radius:var(--panel-radius,4px)}
html[data-ui-design="brutalist"] body .account-dialog{border:2px solid var(--ui-line);border-radius:3px;box-shadow:3px 3px var(--ui-line)}
html[data-ui-design="zamrud"] body .account-dialog,html[data-ui-design="grafit"] body .account-dialog{border-radius:var(--action-radius,20px)}

/* v14.66 account card and member rows */
.account-license-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.account-license-heading h3{margin:0}.account-plan-badge{padding:5px 12px;border-radius:20px;background:var(--primary);color:var(--bg-card);font-size:12px;font-weight:800}.account-profile-status{overflow-wrap:anywhere;margin:0 0 16px;line-height:1.6}.account-expiry{margin:0 0 16px;color:var(--text-muted);line-height:1.5}.account-license-card .license-actions{margin-top:16px}.account-dialog .reg-list-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}.account-dialog .reg-list-row>div{min-width:0;overflow-wrap:anywhere}.account-dialog .reg-list-row p{margin:6px 0 0;line-height:1.5}.account-dialog .reg-list-row button{width:auto;min-width:88px;flex:none;padding:10px 12px}.account-dialog #reg-applications p{margin:12px 0}.account-dialog #reg-school-request{margin-top:16px}@media(max-width:360px){.account-dialog .reg-list-row{grid-template-columns:minmax(0,1fr)}.account-dialog .reg-list-row button{justify-self:start}}
/* v14.66 concise account actions, status and themed listboxes. */
.account-profile-status{display:grid;gap:12px;margin:0 0 20px}.account-profile-status>div{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}.account-profile-status dt{font-weight:600}.account-profile-status dd{margin:0;overflow-wrap:anywhere;min-width:0}.account-dialog .account-status-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:0 0 16px}.account-dialog .account-session-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.account-dialog .account-session-actions button{min-width:0;padding-left:8px;padding-right:8px;white-space:normal;font-size:13px}.account-dialog .account-status-actions>button{margin:0}.account-dialog #reg-applications:empty{display:none}.account-select{position:relative;margin:0 0 12px}.account-card .account-native-select{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important}.account-dialog .account-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;margin:0;text-align:left;background:var(--bg-input);color:var(--text-main);border:1px solid var(--border);border-radius:var(--input-radius,8px);padding:12px 14px;font:inherit;box-shadow:none}.account-select-trigger span:first-child{min-width:0;overflow-wrap:anywhere}.account-select-chevron{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);flex-shrink:0;margin-right:3px;margin-top:-4px}.account-select-options{margin-top:8px;padding:6px;border:1px solid var(--border);border-radius:var(--input-radius,8px);background:var(--bg-card);max-height:220px;overflow:auto;box-shadow:0 6px 16px #0002}.account-dialog .account-select-options button{width:100%;margin:0;padding:12px;text-align:left;color:var(--text-main);background:transparent;border:0;border-radius:6px;font:inherit;box-shadow:none}.account-dialog .account-select-options button[aria-selected=true]{color:var(--primary);background:var(--bg-input);font-weight:700}.account-select-options button:focus-visible,.account-select-trigger:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}.account-select-options[hidden]{display:none!important}.account-loading{width:min(320px,calc(100% - 48px));padding:28px 24px;text-align:center;color:var(--text-main);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--panel-radius,12px);box-sizing:border-box}.account-loading::backdrop{background:#0007;backdrop-filter:blur(3px)}.account-loading:not([open]){display:none}.account-loading p{margin:16px 0 0;font:600 14px/1.6 system-ui}.account-loading-spinner{width:30px;height:30px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;margin:auto;animation:account-spin .8s linear infinite}@keyframes account-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.account-loading-spinner{animation-duration:2s}}

/* v14.66 inline manager and compact email preview, with explicit control gaps. */
.account-dialog #reg-school-manager{min-width:0;margin:0;padding:16px;border:1px solid var(--border);border-radius:var(--panel-radius,12px);background:var(--bg-input)}
.account-dialog #reg-school-manager>h3{margin:0 0 16px}.account-dialog #reg-school-manager .account-actions{margin:16px 0}
.account-dialog #reg-upload-preview{display:grid;gap:16px;margin:16px 0}.account-dialog #reg-upload-preview>p,.account-dialog #reg-upload-preview>button{margin:0}
.account-dialog #reg-upload-list{box-sizing:border-box;min-width:0;max-width:100%;max-height:180px;padding:12px 14px;border-radius:var(--input-radius,8px);background:var(--bg-card)}
.account-dialog #reg-upload-list p{font-size:13px;line-height:1.6;margin:0;padding:6px 0;overflow-wrap:anywhere;word-break:normal}
.account-dialog #reg-upload-list p+p{border-top:1px solid var(--border)}
#account-sync-students{width:100%;margin:16px 0 0}#account-sync-status{font-size:13px;line-height:1.6;margin:12px 0 0;overflow-wrap:anywhere}
#account-sync-students[hidden],#account-sync-status[hidden]{display:none!important}

/* v14.66 account metadata follows compact form labels. */
.account-license-card .account-profile-status,.account-license-card .account-profile-status dt,.account-license-card .account-profile-status dd{font-size:13px;line-height:1.6}
.account-dialog .account-session-actions>button{margin:0;width:100%}

/* v14.67 FREE identity, upgrade and deletion controls. */
.account-privacy-links{font-size:12px;line-height:1.6;margin:0 0 16px}.account-privacy-links a,.account-dialog a{color:var(--primary);text-underline-offset:3px}.account-dialog #reg-upgrade-panel,.account-dialog #account-delete-panel{padding:16px;border:1px solid var(--border);background:var(--bg-input);border-radius:var(--theme-box-radius);margin:0}.account-dialog #reg-upgrade-panel h3,.account-dialog #account-delete-panel h3{margin:0 0 16px}.account-consent{display:flex!important;align-items:flex-start;gap:10px;font-weight:400!important;line-height:1.6}.account-consent input{width:18px;height:18px;min-width:18px;margin:2px 0 0}
/* v14.68 privacy dialog shares theme typography, spacing and radii. */
.account-dialog .account-session-actions{grid-template-columns:1fr}
.privacy-dialog{width:min(640px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--border);border-radius:var(--theme-box-radius);background:var(--bg-card);color:var(--text-main);overflow:hidden;box-sizing:border-box;visibility:visible}
.privacy-dialog[open]{display:flex;flex-direction:column}.privacy-dialog:not([open]){display:none}.privacy-dialog::backdrop{background:rgba(0,0,0,.55)}
.privacy-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;border-bottom:1px solid var(--border);flex-shrink:0}.privacy-heading h2{font-size:18px;margin:0}.privacy-heading button{width:44px;height:44px;min-width:44px;margin:0;padding:0;font-size:24px;border-radius:var(--theme-box-radius)}
.privacy-content{overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:20px;scrollbar-width:thin;scrollbar-color:transparent transparent;font-size:13px;line-height:1.7}.privacy-content.is-scrolling{scrollbar-color:var(--text-muted,#89919b) transparent}.privacy-content::-webkit-scrollbar{width:6px}.privacy-content::-webkit-scrollbar-thumb{background:transparent;border-radius:6px}.privacy-content.is-scrolling::-webkit-scrollbar-thumb{background:var(--text-muted,#89919b)}
.privacy-content main{margin:0;padding:0;max-width:none}.privacy-content h1{display:none}.privacy-content h2{font-size:15px;margin:0 0 12px}.privacy-content p{margin:0 0 12px;overflow-wrap:anywhere}.privacy-content section{margin:16px 0 0;padding:16px;border:1px solid var(--border);border-radius:var(--theme-box-radius);background:var(--bg-input)}.privacy-content a,.account-lock a{color:var(--primary);text-underline-offset:3px}
body:has(.privacy-dialog[open]){overflow:hidden}

/* v14.69 direct authentication page. */
html[data-account-check="locked"] #account-dialog{visibility:visible;position:fixed;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);margin:0;z-index:20000;box-shadow:none}
html[data-account-check="locked"] #account-dialog::backdrop{background:transparent}
html[data-account-check="locked"] body::before{content:'';position:fixed;inset:0;z-index:19999;background:var(--bg-body);visibility:visible;pointer-events:none}
#account-dialog:has(#account-login-fields:not([hidden])) .account-dialog-heading,.account-dialog-heading:has(#account-close[hidden]){justify-content:center;text-align:center}
.account-dialog .account-dialog-heading button[hidden]{display:none!important}
.account-privacy-note{text-align:center;margin:16px 0 0!important}
.privacy-heading{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;padding:20px;gap:12px}.privacy-heading h2{grid-column:2;text-align:center;margin:0}.privacy-heading button{grid-column:3}

/* v14.70 consistent account footer and inline verification. */
.account-dialog #reg-status,.account-dialog #account-status{font-size:13px;line-height:1.6;text-align:center;overflow-wrap:anywhere;padding:12px 14px;margin:16px 0 0;border:1px solid var(--border);border-radius:var(--theme-box-radius);background:var(--bg-input);color:var(--text-muted)}
.account-dialog #reg-status:empty,.account-dialog #account-status:empty{display:none!important}
.account-dialog .account-privacy-note{font-size:13px;line-height:1.6;margin:16px 0 0!important}
.account-verification-note{padding:14px 16px;margin:0 0 16px;border:1px solid var(--border);border-radius:var(--theme-box-radius);background:var(--bg-input)}.account-dialog .account-verification-note h3{margin:0 0 8px;font-size:15px}.account-dialog .account-verification-note p{margin:0;font-size:13px;line-height:1.6}
.account-dialog #account-login-fields:has(#auth-verification-note:not([hidden])){margin-bottom:20px}

.account-dialog:has(#auth-verification-note:not([hidden])) .account-dialog-heading{justify-content:space-between;text-align:left}

/* v14.72 registration layout: shared field rhythm for every account type. */
.account-dialog #account-login-fields {
    --auth-label-size: 13px;
    --auth-control-size: 16px;
    --auth-field-gap: 8px;
    --auth-section-gap: 16px;
    font-family: inherit;
}
.account-dialog #auth-form,
.account-dialog #auth-form > div:not(.account-auth-field),
.account-dialog #auth-personal-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--auth-section-gap);
    min-width: 0;
    margin: 0;
}
.account-dialog #auth-form .account-auth-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--auth-field-gap);
    min-width: 0;
    margin: 0;
}
.account-dialog #auth-form label {
    margin: 0;
    font-family: inherit;
    font-size: var(--auth-label-size);
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-main);
}
.account-dialog #auth-form .input-css:not(.account-native-select),
.account-dialog #auth-form .account-select-trigger {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--theme-box-radius, 12px);
    background: var(--bg-input);
    color: var(--text-main);
    font-family: inherit;
    font-size: var(--auth-control-size);
    font-weight: 400;
    line-height: 22px;
}
.account-dialog #auth-form .account-select { margin: 0; min-width: 0; }
.account-dialog #auth-form .account-select-options button {
    font-family: inherit;
    font-size: var(--auth-control-size);
    line-height: 22px;
}
.account-dialog #auth-form .account-auth-help {
    margin: 0;
    font-size: var(--auth-label-size);
    line-height: 1.6;
    color: var(--text-muted);
}
.account-dialog #auth-form .account-auth-actions { gap: 12px; }
.account-dialog #auth-form .account-auth-actions button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    line-height: 22px;
}
.account-dialog .account-auth-footer {
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
}
.account-dialog #auth-form .input-css:focus-visible,
.account-dialog #auth-form .account-select-trigger:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-color: var(--primary);
}
@media (max-width: 360px) {
    .account-dialog .account-card { padding: 16px; }
}

/* Trusted-device PIN dialog is visible while account access remains gated. */
html[data-account-check] #device-pin-dialog, #device-pin-dialog { visibility: visible !important; z-index: 21000; }
#device-pin-dialog .account-card { padding: 11px; display: grid; gap: 15px; }
#device-pin-dialog h2, #device-pin-dialog p { margin: 0; }
#device-pin-dialog input { direction: ltr; letter-spacing: .35em; }
#device-pin-dialog::backdrop { background: rgba(0,0,0,.65); }
#device-pin-confirm-row { display: grid; gap: 9px; }
#device-pin-status:empty { display: none; }

#device-pin-dialog .device-pin-field { display: grid; gap: 9px; }
#device-pin-dialog .device-pin-field > :is(label,input) { margin: 0 !important; }

/* Compact language choice shared by login, registration and PIN dialogs. */
.account-dialog .auth-language{display:flex;align-items:center;justify-content:center;gap:4px;margin:0 0 15px;direction:ltr}
.account-dialog .auth-language button{font:inherit;font-size:13px;font-weight:600;color:var(--text-main);background:transparent;border:0;min-width:44px;min-height:44px;padding:8px;margin:0;cursor:pointer}
.account-dialog .auth-language button[aria-checked="true"]{color:var(--primary);text-decoration:underline;text-underline-offset:5px;font-weight:800}
.account-dialog .auth-language button:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.account-dialog .auth-language span{opacity:.55}
#device-pin-dialog .auth-language{margin:0}
.account-dialog .auth-pin-help{margin-bottom:15px}

.account-dialog .device-pin-email{direction:ltr;letter-spacing:normal!important}

/* Login actions share one centered row. The optional email-change action gets its own row. */
.account-dialog #auth-form > div.account-auth-actions{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:center;text-align:center}
.account-dialog #auth-form .account-auth-actions button{display:flex;align-items:center;justify-content:center;text-align:center}
.account-dialog #auth-form .account-auth-actions:has(#auth-return-pin[hidden]) #auth-submit,
.account-dialog #auth-form #auth-change-email{grid-column:1 / -1}
.account-dialog #auth-form #auth-return-pin{margin:0}
#device-pin-title{text-align:center}

/* Public deletion form inherits the same in-app popup styles as privacy. */
#deletion-web-content #deletion-form label:not(.consent){display:block;margin:15px 0 9px}
#deletion-web-content #deletion-form>label:first-child{margin-top:0}
#deletion-web-content #deletion-form .input-css{width:100%;margin:0}
#deletion-web-content #deletion-form button{width:100%;margin:15px 0 0}
#deletion-web-content #deletion-form [hidden]{display:none!important}
#deletion-web-content #result{margin:15px 0 0;overflow-wrap:anywhere}

/* r31: account actions use modal dialogs with one close/return pattern. */
.account-action-dialog{width:min(520px,calc(100% - 30px));max-width:calc(100% - 30px);max-height:calc(100dvh - 30px);visibility:visible!important}
body.egp-ui.egp-ui .account-action-dialog>.account-card{padding:15px!important;display:block}
.account-action-dialog .account-dialog-heading{margin:0 0 15px;justify-content:space-between;text-align:start}
.account-action-dialog .account-dialog-heading h2{font-size:18px;line-height:1.4}
.account-action-dialog .account-action-status{padding:12px 14px;margin:0 0 15px;border:1px solid var(--border);border-radius:var(--theme-box-radius);background:var(--bg-input);color:var(--text-muted)}
.account-action-dialog .account-action-status:empty{display:none}
body.egp-ui.egp-ui .account-action-dialog :is(#reg-school-manager,#reg-upgrade-panel,#account-delete-panel){padding:0!important;margin:0!important;border:0!important;background:transparent!important}
.account-action-dialog #auth-verification-note h3,.account-action-dialog .auth-pin-help{display:none}
body:has(.account-action-dialog[open]){overflow:hidden}
body.egp-ui.egp-ui .account-action-dialog .account-dialog-heading{display:flex!important;justify-content:space-between!important;text-align:start!important}