:root{--color-deep-blue: #1A1464;--color-mid-blue: #2340A1;--color-green: #1FCA7E;--color-green-hover: #18B06A;--color-green-alt: #20B07A;--color-purple: #8e24aa;--color-red: #e53935;--color-red-light: #e2766b;--color-white: #fff;--color-text: #333;--color-gray: #F0F0F0;--color-gray-hover: #D9E2EF;--color-gray-border: #ccc;--color-gray-divider: #eee;--gradient-brand: linear-gradient(90deg, var(--color-mid-blue) 0%, var(--color-green-alt) 100%);--gradient-brand-hover: linear-gradient(90deg, var(--color-deep-blue) 0%, var(--color-green-hover) 100%);--gradient-bg: linear-gradient(315deg, var(--color-deep-blue) 0%, var(--color-green) 100%);--gradient-border: linear-gradient(90deg, var(--color-deep-blue), var(--color-green));--gradient-destructive: linear-gradient(90deg, var(--color-purple) 0%, var(--color-red) 100%);--overlay-bg: rgba(26, 20, 100, .4);--card-bg: rgba(255, 255, 255, .7);--card-shadow: 0 8px 24px rgba(26, 20, 100, .15);--shadow-brand-sm: 0 2px 8px rgba(26, 20, 100, .12);--shadow-brand-xs: 0 2px 8px rgba(26, 20, 100, .08);--text-shadow-brand: 0 2px 8px rgba(26, 20, 100, .18);--shadow-destructive: 0 4px 12px rgba(229, 57, 53, .4);--shadow-success: 0 4px 12px rgba(31, 202, 126, .4);--note-bg: rgba(35, 64, 161, .08);--font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;--font-size-base: 1.15rem;--radius: 6px;--radius-lg: 12px}body{font-family:var(--font-family);background:var(--gradient-bg);margin:0;padding:0;display:flex;flex-direction:column;height:100vh;align-items:center;justify-content:center;font-size:var(--font-size-base);position:relative;overflow:hidden}body:before{content:"";position:absolute;inset:0;background:var(--overlay-bg);z-index:0;pointer-events:none}.container{position:relative;z-index:1;background:var(--card-bg);padding:2rem 2.5rem;border-radius:var(--radius-lg);box-shadow:var(--card-shadow);max-width:820px;width:100%;text-align:center;border:3px solid;border-image:var(--gradient-border) 1;font-size:var(--font-size-base)}.banner-logo{width:120px;margin-bottom:1rem;display:block;margin-left:auto;margin-right:auto}h1{font-size:1.6rem;margin-bottom:.5rem;color:var(--color-mid-blue)}h2{font-size:1.3rem;margin-bottom:.25rem;color:var(--color-green-alt);text-align:center;font-weight:600;padding-bottom:.5rem}input{width:100%;box-sizing:border-box;padding:.6rem;border:1px solid var(--color-mid-blue);border-radius:var(--radius);font-size:1rem;margin-bottom:.75rem}button{padding:.6rem 1.2rem;border:none;background:var(--gradient-brand);color:var(--color-white);border-radius:var(--radius);font-size:1rem;cursor:pointer;transition:background .3s,color .3s}button:not(.tab-button):hover{background:var(--gradient-brand-hover);font-weight:600;color:var(--color-white)}.tabs{display:flex;margin:1rem 0;border-bottom:2px solid var(--color-gray-border);border-radius:8px;overflow:hidden}.tab-button{flex:1;padding:.75rem 0;cursor:pointer;background:var(--color-gray);border:none;border-bottom:2px solid transparent;border-radius:0;font-size:1rem;transition:background .2s,border-bottom .2s,color .2s;margin:0;color:var(--color-deep-blue);opacity:.95}.tab-button:hover{background:var(--color-gray-hover);color:var(--color-deep-blue);opacity:1}.tab-button.active{background:var(--color-green);color:var(--color-white);font-weight:700;border-bottom:2px solid transparent;border-image:var(--gradient-border) 1;opacity:1}.tab-button.active:hover{background:var(--color-green-hover);color:var(--color-white);opacity:1}.tab-content{display:none;margin-top:1rem}.tab-content.active{display:block}.tab-content form label{display:block;text-align:left;margin-bottom:.5rem;font-weight:500;color:var(--color-mid-blue);font-size:1rem}.tab-content form label input{margin-top:.3rem}#status{margin-top:1rem;font-weight:600;background:var(--color-deep-blue);color:var(--color-white);border-radius:var(--radius);padding:.75rem 1rem;box-shadow:var(--shadow-brand-sm);text-shadow:var(--text-shadow-brand);letter-spacing:.5px;transition:height .3s,padding .3s,opacity .3s;height:auto;display:none;overflow-wrap:break-word;word-break:break-word;white-space:pre-line;overflow:visible}#status.success{color:#90ee90}#status.error{color:#f08080}#status.warning{color:gold}#passkeys-table-container{margin-top:1rem;max-height:300px;overflow-y:auto;border:1px solid var(--color-gray-border);border-radius:var(--radius);background:var(--color-white);padding:0}#passkeys-list{display:flex;flex-direction:column;width:100%}.passkey-list-item{display:flex;align-items:center;justify-content:space-between;padding:.75em 1em;border-bottom:1px solid var(--color-gray-divider)}.passkey-list-item:last-child{border-bottom:none}.passkey-display{flex:1;text-align:left;font-size:1rem;color:var(--color-mid-blue)}.delete-passkey{background:none;border:none;cursor:pointer;padding:.25em;color:var(--color-red-light);border-radius:4px;transition:background .2s}.delete-passkey:hover{background:var(--color-red)!important;color:var(--color-white)}.delete-passkey:hover svg,.delete-passkey:hover svg path{stroke:var(--color-white)!important;color:var(--color-white)!important}.passkeys-table,.passkeys-table *{display:none!important}.passkey-list-header{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:2;background:var(--gradient-brand);font-weight:700;font-size:1rem;color:var(--color-white);border-bottom:2px solid var(--color-deep-blue);padding:.75em 1em;letter-spacing:.5px;box-shadow:var(--shadow-brand-xs)}.passkey-header-serial{width:3em;min-width:2em;text-align:left;flex-shrink:0}.passkey-header-display{flex:1;text-align:left}.passkey-header-action{width:4em;min-width:3em;text-align:center;flex-shrink:0}.passkey-list-item .passkey-header-serial{width:3em;min-width:2em;text-align:left;flex-shrink:0}.note{background:var(--note-bg);border-left:4px solid var(--color-mid-blue);color:var(--color-text);font-size:.85rem;text-align:left;padding:.5rem;border-radius:var(--radius);margin:1rem 0}.admin-header{text-align:left;margin-bottom:1.2rem}.admin-subtitle{margin:0;font-size:1.1rem;color:var(--color-mid-blue);font-weight:500}.admin-portal-link-container{margin-top:.75rem;width:calc(100% + 5rem + 6px);max-width:calc(826px + 5rem);text-align:center}.admin-portal-link{display:block;width:100%;box-sizing:border-box;padding:.55rem .9rem;border-radius:var(--radius);border:3px solid;border-image:var(--gradient-border) 1;background:transparent;color:var(--color-white);font-weight:500;text-decoration:none;font-size:.95rem;text-align:center;transition:color .2s,box-shadow .2s,background-color .2s,transform .2s}.admin-portal-link:hover{color:var(--color-white);background-color:#ffffff14;box-shadow:var(--shadow-brand-sm);transform:translateY(-1px)}.admin-portal-link:focus-visible{outline:2px solid var(--color-white);outline-offset:2px;background-color:#ffffff14}.userid-hash-hint{margin-left:8px;font-size:14px;color:var(--color-deep-blue);font-weight:400;display:inline}.device-action-buttons{display:flex;gap:.5rem;margin-top:.5rem}#register-device-btn,#approve-device-btn,#block-device-btn{flex:1;transition:all .3s ease}#block-device-btn{background:var(--gradient-destructive)}#block-device-btn:hover{background:var(--gradient-destructive)!important;box-shadow:var(--shadow-destructive);transform:translateY(-2px)}#approve-device-btn:hover{box-shadow:var(--shadow-success);transform:translateY(-2px)}#credentials-table-container{margin-top:1rem;max-height:300px;overflow-y:auto}.credentials-table-container{border:1px solid var(--color-gray-border);border-radius:var(--radius);overflow:hidden}.credentials-table-header{display:grid;grid-template-columns:2fr .8fr 1fr 1fr 1.5fr;gap:1rem;background:var(--gradient-brand);color:var(--color-white);padding:.75rem 1rem;font-weight:700;font-size:.95rem;letter-spacing:.5px}.credentials-table-body{background:var(--color-white);max-height:400px;overflow-y:auto}.credentials-table-row{display:grid;grid-template-columns:2fr .8fr 1fr 1fr 1.5fr;gap:1rem;padding:.75rem 1rem;border-bottom:1px solid var(--color-gray-divider);transition:background .2s;align-items:center}.credentials-table-row:last-child{border-bottom:none}.credentials-table-row:hover{background:var(--color-gray-hover)}.credentials-table-row.disabled-row{background:#8080801a;opacity:.7}.credentials-table-row.disabled-row:hover{background:#80808026}.cred-header-id,.cred-header-score,.cred-header-status,.cred-header-passed,.cred-header-reasons{text-align:left}.cred-cell-id{font-family:monospace;font-size:.9rem;color:var(--color-deep-blue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cred-cell-score,.cred-cell-status{font-weight:600;color:var(--color-mid-blue);text-align:left}.cred-cell-passed{font-weight:700;text-align:left;padding:.25rem .5rem;border-radius:4px;display:inline-block;font-size:16px}.cred-cell-passed.passed{color:#2d7a2d;background-color:#d4edda}.cred-cell-passed.failed{color:#842029;background-color:#f8d7da}.cred-cell-reasons{color:var(--color-text);font-size:.9rem;word-break:break-word}.fallback-message{padding:2rem;text-align:center}.fallback-message p{font-size:1.1rem;color:var(--color-deep-blue);font-weight:600;margin:0;line-height:1.6}
