:root{
    --bg:#06111f;
    --bg-soft:#081827;
    --sidebar:#071523;
    --panel:#0d1d2f;
    --panel-2:#0a1929;
    --border:#1b3045;
    --border-soft:rgba(255,255,255,.07);

    --text:#edf5ff;
    --muted:#8399af;
    --muted-2:#647c94;

    --teal:#2fd2c8;
    --teal-soft:rgba(47,210,200,.10);
    --green:#51dfad;
    --red:#ff8080;

    --shadow:0 24px 70px rgba(0,0,0,.28);
}

*{
    box-sizing:border-box;
}

html,body{
    margin:0;
    min-height:100%;
}

body{
    font-family:Inter,Segoe UI,Arial,Helvetica,sans-serif;
    background:var(--bg);
    color:var(--text);
    font-weight:400;
}

a{
    color:inherit;
}

button,input{
    font:inherit;
}

/* LOGIN */

.login-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:32px;
    background:
        radial-gradient(circle at 78% 18%,rgba(47,210,200,.10),transparent 31%),
        radial-gradient(circle at 12% 85%,rgba(45,113,170,.11),transparent 31%),
        var(--bg);
}

.login-shell{
    width:min(1050px,100%);
    min-height:640px;
    display:grid;
    grid-template-columns:1.08fr .92fr;
    overflow:hidden;

    border:1px solid var(--border);
    border-radius:28px;
    background:var(--panel);
    box-shadow:var(--shadow);
}

.login-brand{
    padding:58px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:
        radial-gradient(circle at 20% 18%,rgba(47,210,200,.13),transparent 37%),
        linear-gradient(145deg,#071727,#091a2b);
}

.brand-logo{
    display:flex;
    align-items:center;
    gap:11px;
    font-size:15px;
    letter-spacing:.16em;
    font-weight:600;
}

.brand-mark{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:var(--teal-soft);
    border:1px solid rgba(47,210,200,.25);
    color:var(--teal);
}

.brand-copy{
    max-width:470px;
}

.eyebrow{
    color:var(--teal);
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:11px;
}

.brand-copy h1{
    margin:17px 0 18px;
    max-width:430px;
    font-size:44px;
    line-height:1.10;
    font-weight:550;
    letter-spacing:-.025em;
}

.brand-copy p{
    max-width:440px;
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.8;
}

.brand-footer{
    color:var(--muted-2);
    font-size:11px;
}

.login-form-side{
    padding:58px;
    display:flex;
    align-items:center;
    background:rgba(13,29,47,.96);
}

.login-form{
    width:100%;
}

.login-form h2{
    margin:0;
    font-size:27px;
    font-weight:550;
    letter-spacing:-.01em;
}

.form-subtitle{
    margin:8px 0 31px;
    color:var(--muted);
    font-size:13px;
}

.field{
    margin-bottom:18px;
}

.field label{
    display:block;
    margin-bottom:8px;
    color:#a6b7c8;
    font-size:12px;
}

.field input{
    width:100%;
    height:49px;
    border:1px solid #263c52;
    border-radius:11px;
    background:#081625;
    color:#fff;
    outline:none;
    padding:0 14px;
    transition:.18s ease;
}

.field input:focus{
    border-color:var(--teal);
    box-shadow:0 0 0 3px rgba(47,210,200,.08);
}

.login-button{
    width:100%;
    height:50px;
    margin-top:5px;
    border:0;
    border-radius:11px;
    cursor:pointer;
    background:linear-gradient(135deg,#2fd2c8,#2ab1bf);
    color:#03171a;
    font-weight:650;
}

.login-button:hover{
    filter:brightness(1.04);
}

.alert{
    padding:12px 14px;
    border-radius:11px;
    margin-bottom:18px;
    font-size:12px;
}

.alert-error{
    background:rgba(255,90,90,.08);
    border:1px solid rgba(255,90,90,.22);
    color:#ff9d9d;
}

.login-meta{
    text-align:center;
    margin-top:22px;
    color:var(--muted-2);
    font-size:11px;
}

/* ADMIN */

.admin-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:245px minmax(0,1fr);
}

.sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:245px;

    display:flex;
    flex-direction:column;

    padding:23px 16px;
    background:var(--sidebar);
    border-right:1px solid var(--border);
}

.sidebar-brand{
    display:flex;
    align-items:center;
    gap:10px;
    padding:3px 10px 27px;
    font-size:13px;
    letter-spacing:.12em;
    font-weight:600;
}

.sidebar-brand .brand-mark{
    width:31px;
    height:31px;
}

.nav-title{
    padding:6px 11px;
    margin-top:7px;
    color:#557089;
    font-size:10px;
    letter-spacing:.13em;
}

.sidebar-nav a{
    display:flex;
    align-items:center;
    gap:11px;

    min-height:42px;
    margin:3px 0;
    padding:0 12px;

    border-radius:10px;
    text-decoration:none;
    color:#8197ad;
    font-size:13px;
    transition:.15s ease;
}

.sidebar-nav a:hover{
    background:#0c2033;
    color:#dfe9f4;
}

.sidebar-nav a.active{
    color:#eaf7f6;
    background:rgba(47,210,200,.09);
    border:1px solid rgba(47,210,200,.13);
}

.nav-icon{
    width:18px;
    text-align:center;
    color:#6f8aa2;
}

.sidebar-nav a.active .nav-icon{
    color:var(--teal);
}

.sidebar-footer{
    margin-top:auto;
    padding:15px 11px 5px;
    border-top:1px solid var(--border-soft);
}

.system-online{
    display:flex;
    align-items:center;
    gap:8px;
    color:#668198;
    font-size:11px;
}

.online-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 10px rgba(81,223,173,.45);
}

.admin-main{
    grid-column:2;
    min-width:0;
}

.topbar{
    height:70px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 29px;

    position:sticky;
    top:0;
    z-index:10;

    background:rgba(8,23,38,.94);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
}

.topbar-title{
    color:#9aafc2;
    font-size:12px;
}

.admin-profile{
    display:flex;
    align-items:center;
    gap:11px;
}

.avatar{
    width:35px;
    height:35px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#081619;
    background:var(--teal);
    font-size:12px;
    font-weight:700;
}

.profile-copy{
    line-height:1.25;
}

.profile-name{
    color:#dce8f3;
    font-size:12px;
}

.profile-role{
    color:#667f96;
    font-size:10px;
}

.signout{
    margin-left:12px;
    color:#77bdb9;
    text-decoration:none;
    font-size:11px;
}

.page{
    padding:29px;
}

.page-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
}

.page-heading h1{
    margin:0;
    font-size:26px;
    font-weight:550;
    letter-spacing:-.015em;
}

.page-heading p{
    margin:7px 0 0;
    color:var(--muted);
    font-size:12px;
}

.status-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border:1px solid rgba(81,223,173,.2);
    border-radius:999px;
    background:rgba(81,223,173,.07);
    color:var(--green);
    font-size:11px;
}

.kpi-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:15px;
    margin-top:25px;
}

.kpi{
    min-height:137px;
    padding:19px;
    border-radius:15px;
    background:var(--panel);
    border:1px solid var(--border);
}

.kpi-label{
    color:#718aa2;
    font-size:10px;
    letter-spacing:.11em;
}

.kpi-value{
    display:block;
    margin-top:14px;
    font-size:28px;
    font-weight:500;
}

.kpi-meta{
    display:block;
    margin-top:8px;
    color:#607990;
    font-size:11px;
}

.kpi-value.online{
    color:var(--green);
    font-size:22px;
}

.content-grid{
    display:grid;
    grid-template-columns:minmax(0,1.6fr) minmax(300px,.8fr);
    gap:15px;
    margin-top:15px;
}

.panel{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:15px;
    overflow:hidden;
}

.panel-header{
    padding:18px 19px;
    border-bottom:1px solid var(--border-soft);
}

.panel-header h3{
    margin:0;
    font-size:14px;
    font-weight:500;
}

.panel-header p{
    margin:5px 0 0;
    color:#657f97;
    font-size:11px;
}

.event-list{
    list-style:none;
    padding:0;
    margin:0;
}

.event-item{
    display:flex;
    gap:12px;
    padding:15px 19px;
    border-bottom:1px solid var(--border-soft);
}

.event-item:last-child{
    border-bottom:0;
}

.event-dot{
    width:8px;
    height:8px;
    flex:0 0 auto;
    margin-top:5px;
    border-radius:50%;
    background:var(--teal);
}

.event-message{
    color:#b7c6d4;
    font-size:12px;
}

.event-meta{
    margin-top:4px;
    color:#5f788f;
    font-size:10px;
}

.empty-state{
    padding:28px 19px;
    color:#688197;
    font-size:12px;
}

.health-list{
    padding:5px 19px 16px;
}

.health-row{
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:13px 0;
    border-bottom:1px solid var(--border-soft);
    font-size:11px;
}

.health-row:last-child{
    border-bottom:0;
}

.health-row span:first-child{
    color:#71899f;
}

.health-good{
    color:var(--green);
}

.footer{
    margin-top:20px;
    padding:16px 2px 4px;
    color:#516b83;
    font-size:10px;
}

@media(max-width:1050px){
    .kpi-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .content-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:780px){
    .login-shell{
        grid-template-columns:1fr;
    }

    .login-brand{
        display:none;
    }

    .login-form-side{
        padding:35px 27px;
    }

    .admin-shell{
        display:block;
    }

    .sidebar{
        display:none;
    }

    .admin-main{
        width:100%;
    }

    .kpi-grid{
        grid-template-columns:1fr;
    }

    .page{
        padding:20px;
    }
}


/* =========================================================
   PRODUCTS / REGISTRY
   ========================================================= */

.primary-button,
.secondary-button{
    min-height:40px;
    padding:0 15px;
    border-radius:10px;
    cursor:pointer;
    transition:.15s ease;
}

.primary-button{
    border:1px solid rgba(47,210,200,.28);
    background:linear-gradient(135deg,#2fd2c8,#2bb7c2);
    color:#031619;
    font-size:12px;
    font-weight:650;
}

.primary-button:hover{
    filter:brightness(1.05);
}

.secondary-button{
    border:1px solid #263b51;
    background:#0a1929;
    color:#aebdcc;
    font-size:12px;
}

.secondary-button:hover{
    background:#102238;
}

.registry-stats{
    display:flex;
    gap:12px;
    margin-top:24px;
}

.mini-stat{
    min-width:155px;
    padding:13px 16px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:12px;
}

.mini-stat span{
    color:#69839b;
    font-size:10px;
}

.mini-stat strong{
    display:block;
    margin-top:5px;
    font-size:18px;
    font-weight:500;
}

.success-banner,
.error-banner{
    margin-top:15px;
    padding:12px 15px;
    border-radius:11px;
    font-size:12px;
}

.success-banner{
    color:#72e8bd;
    background:rgba(81,223,173,.07);
    border:1px solid rgba(81,223,173,.18);
}

.error-banner{
    color:#ffa0a0;
    background:rgba(255,80,80,.07);
    border:1px solid rgba(255,80,80,.18);
}

.registry-panel{
    margin-top:15px;
    border:1px solid var(--border);
    border-radius:15px;
    background:var(--panel);
    overflow:hidden;
}

.registry-toolbar{
    min-height:69px;
    padding:13px 16px;
    display:flex;
    align-items:center;
    gap:10px;
    border-bottom:1px solid var(--border-soft);
}

.registry-toolbar input,
.registry-toolbar select{
    height:40px;
    color:#dce8f4;
    background:#081625;
    border:1px solid #253a50;
    border-radius:9px;
    outline:none;
    padding:0 12px;
    font-size:12px;
}

.registry-toolbar input:focus,
.registry-toolbar select:focus{
    border-color:var(--teal);
}

.registry-search{
    flex:1;
    max-width:360px;
}

.registry-search input{
    width:100%;
}

.registry-toolbar select{
    min-width:145px;
}

.clear-filter{
    color:#7590a8;
    text-decoration:none;
    font-size:11px;
}

.table-wrap{
    overflow-x:auto;
}

.registry-table{
    width:100%;
    border-collapse:collapse;
}

.registry-table th{
    padding:12px 16px;
    text-align:left;
    color:#627c94;
    background:#0a1929;
    border-bottom:1px solid var(--border-soft);
    font-size:9px;
    font-weight:500;
    letter-spacing:.09em;
    text-transform:uppercase;
    white-space:nowrap;
}

.registry-table td{
    padding:14px 16px;
    color:#aebdcc;
    border-bottom:1px solid var(--border-soft);
    font-size:11px;
    vertical-align:middle;
}

.registry-table tbody tr:last-child td{
    border-bottom:0;
}

.registry-table tbody tr:hover{
    background:rgba(255,255,255,.012);
}

.product-cell{
    min-width:230px;
    display:flex;
    align-items:center;
    gap:11px;
}

.product-cell strong{
    display:block;
    color:#dce8f3;
    font-size:12px;
    font-weight:500;
}

.product-cell small{
    display:block;
    max-width:300px;
    margin-top:4px;
    color:#607990;
    font-size:10px;
}

.product-icon{
    width:36px;
    height:36px;
    flex:0 0 36px;
    display:grid;
    place-items:center;
    border-radius:10px;
    color:var(--teal);
    background:var(--teal-soft);
    border:1px solid rgba(47,210,200,.16);
    font-size:9px;
    font-weight:700;
}

.code-pill{
    display:inline-flex;
    min-width:42px;
    justify-content:center;
    padding:5px 8px;
    border-radius:7px;
    background:#091827;
    border:1px solid #21374c;
    color:#83b9cc;
    font-size:10px;
}

.status-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 8px;
    border-radius:999px;
    font-size:10px;
}

.status-badge span{
    width:6px;
    height:6px;
    border-radius:50%;
}

.status-active{
    color:#67dfb3;
    background:rgba(81,223,173,.07);
    border:1px solid rgba(81,223,173,.16);
}

.status-active span{
    background:#51dfad;
}

.status-inactive{
    color:#8497a9;
    background:rgba(130,150,170,.07);
    border:1px solid rgba(130,150,170,.15);
}

.status-inactive span{
    background:#7890a5;
}

.actions-cell{
    text-align:right;
}

.icon-action{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:8px;
    border:1px solid #23394e;
    background:#091827;
    color:#83a0b8;
    cursor:pointer;
}

.icon-action:hover{
    border-color:rgba(47,210,200,.32);
    color:var(--teal);
}

.table-empty{
    padding:52px 20px;
    text-align:center;
}

.table-empty strong{
    display:block;
    color:#b9c8d6;
    font-size:13px;
    font-weight:500;
}

.table-empty span{
    display:block;
    margin-top:7px;
    color:#617b92;
    font-size:11px;
}


/* =========================================================
   MODAL
   ========================================================= */

body.modal-open{
    overflow:hidden;
}

.modal-backdrop{
    position:fixed;
    inset:0;
    z-index:1000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:25px;
    background:rgba(2,8,14,.75);
    backdrop-filter:blur(7px);
}

.modal-backdrop.is-open{
    display:flex;
}

.modal-card{
    width:min(760px,100%);
    max-height:calc(100vh - 50px);
    overflow:auto;
    border-radius:18px;
    background:#0c1b2c;
    border:1px solid #22374c;
    box-shadow:0 35px 100px rgba(0,0,0,.46);
}

.modal-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding:20px 22px;
    border-bottom:1px solid var(--border-soft);
}

.modal-header h2{
    margin:0;
    color:#e6f0f9;
    font-size:17px;
    font-weight:550;
}

.modal-header p{
    margin:6px 0 0;
    color:#678198;
    font-size:11px;
}

.modal-close{
    width:32px;
    height:32px;
    border:0;
    border-radius:8px;
    color:#70899f;
    background:#091827;
    cursor:pointer;
    font-size:21px;
    line-height:1;
}

.modal-close:hover{
    color:#fff;
}

.modal-body{
    padding:21px 22px;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:17px;
}

.form-span-2{
    grid-column:span 2;
}

.form-group label{
    display:block;
    margin-bottom:7px;
    color:#94a9bb;
    font-size:11px;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    border:1px solid #263c52;
    border-radius:9px;
    background:#081625;
    color:#e4eef7;
    outline:none;
    padding:0 11px;
    font-size:12px;
}

.form-group input,
.form-group select{
    height:42px;
}

.form-group textarea{
    padding-top:11px;
    padding-bottom:11px;
    resize:vertical;
    min-height:91px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:var(--teal);
    box-shadow:0 0 0 3px rgba(47,210,200,.06);
}

.form-group small{
    display:block;
    margin-top:6px;
    color:#587188;
    font-size:9px;
}

.input-suffix{
    position:relative;
}

.input-suffix input{
    padding-right:55px;
}

.input-suffix span{
    position:absolute;
    top:50%;
    right:11px;
    transform:translateY(-50%);
    color:#5e7890;
    font-size:10px;
}

.modal-footer{
    display:flex;
    justify-content:flex-end;
    gap:9px;
    padding:15px 22px;
    border-top:1px solid var(--border-soft);
    background:#0a1929;
}

@media(max-width:700px){

    .registry-toolbar{
        align-items:stretch;
        flex-direction:column;
    }

    .registry-search{
        max-width:none;
    }

    .registry-toolbar select{
        width:100%;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .form-span-2{
        grid-column:span 1;
    }
}


/* =========================================================
   CUSTOMERS
   ========================================================= */

.customer-modal-card{
    width:min(820px,100%);
}

.customer-icon{
    width:36px;
    height:36px;
    flex:0 0 36px;

    display:grid;
    place-items:center;

    border-radius:10px;

    color:#87bde1;

    background:rgba(92,153,205,.08);
    border:1px solid rgba(92,153,205,.17);

    font-size:9px;
    font-weight:700;
}

.customer-id-pill{
    display:inline-flex;

    padding:5px 8px;

    border-radius:7px;

    color:#7fa7c1;

    background:#091827;
    border:1px solid #21374c;

    font-size:9px;
    letter-spacing:.04em;
}

.table-secondary{
    display:block;

    margin-top:4px;

    color:#607990;
    font-size:9px;
}

.status-suspended{
    color:#e9bd69;

    background:rgba(233,189,105,.07);
    border:1px solid rgba(233,189,105,.17);
}

.status-suspended span{
    background:#e9bd69;
}

.status-archived{
    color:#8396a7;

    background:rgba(131,150,167,.07);
    border:1px solid rgba(131,150,167,.16);
}

.status-archived span{
    background:#7b8fa2;
}

/* =========================================================
   CUSTOMER MODAL - COMPACT / STICKY FIX
   ========================================================= */

.customer-modal-card{
    width:min(900px, calc(100vw - 50px));
    max-height:calc(100vh - 70px);

    display:flex;
    flex-direction:column;

    overflow:hidden;
}

.customer-modal-card .modal-header{
    position:sticky;
    top:0;
    z-index:5;

    flex:0 0 auto;

    padding:18px 22px;

    background:#0c1b2c;
}

.customer-modal-card form{
    min-height:0;

    display:flex;
    flex-direction:column;
    flex:1;
}

.customer-modal-card .modal-body{
    min-height:0;
    flex:1;

    overflow-y:auto;

    padding:18px 22px;
}

.customer-modal-card .modal-footer{
    position:sticky;
    bottom:0;
    z-index:5;

    flex:0 0 auto;

    padding:14px 22px;

    background:#0a1929;
}


/* Slightly tighter customer form */

.customer-modal-card .form-grid{
    gap:14px 17px;
}

.customer-modal-card .form-group label{
    margin-bottom:6px;
}

.customer-modal-card .form-group input,
.customer-modal-card .form-group select{
    height:41px;
}

.customer-modal-card .form-group textarea{
    min-height:76px;
    max-height:110px;
}


/* Premium internal scrollbar */

.customer-modal-card .modal-body{
    scrollbar-width:thin;
    scrollbar-color:#38536a #0a1929;
}

.customer-modal-card .modal-body::-webkit-scrollbar{
    width:7px;
}

.customer-modal-card .modal-body::-webkit-scrollbar-track{
    background:#0a1929;
}

.customer-modal-card .modal-body::-webkit-scrollbar-thumb{
    background:#38536a;
    border-radius:20px;
}

.customer-modal-card .modal-body::-webkit-scrollbar-thumb:hover{
    background:#49677f;
}

/* =========================================================
   LICENSES
   ========================================================= */

.license-modal-card{
    width:min(820px,calc(100vw - 50px));
    max-height:calc(100vh - 70px);

    display:flex;
    flex-direction:column;

    overflow:hidden;
}

.license-modal-card .modal-header{
    flex:0 0 auto;
}

.license-modal-card form{
    min-height:0;
    flex:1;

    display:flex;
    flex-direction:column;
}

.license-modal-card .modal-body{
    min-height:0;
    flex:1;
    overflow-y:auto;
}

.license-modal-card .modal-footer{
    flex:0 0 auto;
}

.registry-main-text{
    color:#dce8f3;
    font-size:12px;
    font-weight:500;
}

.masked-license{
    display:inline-flex;

    padding:6px 9px;

    border:1px solid #22384d;
    border-radius:8px;

    background:#081625;

    color:#8eb5ca;

    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:10px;

    white-space:nowrap;
}

.domain-pill{
    display:inline-flex;

    padding:5px 8px;

    border-radius:7px;

    color:#8ea9bc;
    background:#091827;
    border:1px solid #20364b;

    font-size:10px;

    white-space:nowrap;
}

.lifetime-text{
    color:#72dfb6;
}

.status-revoked{
    color:#ff8d8d;

    background:rgba(255,90,90,.07);
    border:1px solid rgba(255,90,90,.18);
}

.status-revoked span{
    background:#ff7777;
}

.status-expired{
    color:#9aa8b5;

    background:rgba(140,155,170,.07);
    border:1px solid rgba(140,155,170,.16);
}

.status-expired span{
    background:#8799a9;
}


/* ONE-TIME REVEAL */

.reveal-card{
    width:min(680px,calc(100vw - 40px));
}

.reveal-warning{
    display:flex;
    flex-direction:column;
    gap:6px;

    padding:14px 15px;

    border-radius:11px;

    color:#e9be72;

    background:rgba(233,190,114,.07);
    border:1px solid rgba(233,190,114,.18);

    font-size:11px;
    line-height:1.55;
}

.reveal-warning strong{
    font-size:12px;
    font-weight:550;
}

.reveal-warning span{
    color:#b89c6c;
}

.reveal-details{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:10px;

    margin-top:16px;
}

.reveal-details div{
    padding:12px 13px;

    border:1px solid var(--border);
    border-radius:10px;

    background:#091827;
}

.reveal-details span{
    display:block;

    margin-bottom:5px;

    color:#647f96;

    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.07em;
}

.reveal-details strong{
    display:block;

    color:#c6d4e0;

    font-size:11px;
    font-weight:500;
}

.license-secret-box{
    display:flex;
    align-items:center;
    gap:10px;

    margin-top:18px;

    padding:12px;

    border:1px solid rgba(47,210,200,.24);
    border-radius:11px;

    background:#061421;
}

.license-secret-box code{
    flex:1;

    overflow-x:auto;

    color:#56ded5;

    font-size:14px;
    line-height:1.5;

    white-space:nowrap;
}

.copy-license-button{
    min-width:72px;
    height:37px;

    border:1px solid rgba(47,210,200,.24);
    border-radius:8px;

    background:rgba(47,210,200,.08);

    color:#65dcd4;

    cursor:pointer;

    font-size:11px;
}

.copy-confirmation{
    display:none;

    margin-top:8px;

    color:#61dfb2;

    font-size:10px;
}

.copy-confirmation.is-visible{
    display:block;
}

@media(max-width:700px){

    .reveal-details{
        grid-template-columns:1fr;
    }

    .license-secret-box{
        align-items:stretch;
        flex-direction:column;
    }
}

/* ACTIVATIONS */

.activation-action-form{
    display:flex;
    justify-content:flex-end;
    gap:6px;
}

.status-deactivated{
    color:#899aaa;
    background:rgba(130,150,170,.07);
    border:1px solid rgba(130,150,170,.16);
}

.status-deactivated span{
    background:#8093a5;
}

.status-blocked{
    color:#ff9292;
    background:rgba(255,90,90,.07);
    border:1px solid rgba(255,90,90,.18);
}

.status-blocked span{
    background:#ff7777;
}