:root{
            --cl-petrol:#205c68;
            --cl-turquoise:#64b7ba;
            --cl-accent:#589ca2;
            --cl-ink:#183b43;
            --cl-muted:#526e75;
            --cl-line:rgba(24,59,67,.14);
            --cl-soft:#f4f8f7;
            --cl-white:#fff;
            --cl-green:#367c82;
            --cl-orange:#f59f00;
            --cl-radius:24px;
            --cl-shadow:0 28px 70px rgba(24,59,67,.16);
            --cl-shadow-sm:0 14px 32px rgba(24,59,67,.10);
        }
        *{box-sizing:border-box}
        html{min-height:100%}
        body.cl-login{
            min-height:100vh;
            margin:0;
            font-family:var(--tblr-body-font-family,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif);
            color:var(--cl-ink);
            background:
                radial-gradient(circle at 14% 11%,rgba(32,92,104,.16),transparent 28%),
                radial-gradient(circle at 86% 8%,rgba(100,183,186,.20),transparent 25%),
                radial-gradient(circle at 78% 92%,rgba(88,156,162,.10),transparent 28%),
                linear-gradient(145deg,#f5faf9 0%,#edf6f6 48%,#f4f8f7 100%);
        }
        a{color:var(--cl-petrol);text-decoration:none}
        a:hover{text-decoration:underline}
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:.45rem;
            min-height:2.35rem;
            padding:.62rem .95rem;
            border:1px solid transparent;
            border-radius:12px;
            font-weight:700;
            line-height:1.2;
            text-decoration:none;
            cursor:pointer;
            transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease;
            user-select:none;
            white-space:nowrap;
        }
        .btn:hover{text-decoration:none;transform:translateY(-1px)}
        .btn-primary{background:var(--cl-petrol);border-color:var(--cl-petrol);color:#fff;box-shadow:0 12px 24px rgba(32,92,104,.25)}
        .btn-primary:hover{background:#174752;border-color:#174752;color:#fff}
        .btn-outline-primary{background:#fff;border-color:rgba(32,92,104,.28);color:var(--cl-petrol)}
        .btn-outline-primary:hover{background:rgba(32,92,104,.07)}
        .btn-outline-secondary{background:#fff;border-color:rgba(82,110,117,.28);color:#345c64}
        .btn-outline-danger{background:#fff;border-color:rgba(214,57,57,.28);color:#d63939}
        .btn-ghost{background:transparent;border-color:transparent;color:var(--cl-muted)}
        .btn-lg{min-height:3rem;padding:.78rem 1.15rem;border-radius:14px;font-size:1rem}
        .btn-icon{width:2.65rem;padding:.55rem;background:#fff;border-color:var(--cl-line);color:var(--cl-muted);box-shadow:none}
        .w-100{width:100%}
        .form-label{display:block;margin-bottom:.42rem;font-weight:750;color:#183b43}
        .form-control{
            display:block;
            width:100%;
            min-height:2.75rem;
            padding:.68rem .85rem;
            border:1px solid #d4e5e5;
            border-radius:13px;
            background:#fff;
            color:var(--cl-ink);
            font:inherit;
            outline:0;
            transition:border-color .16s ease,box-shadow .16s ease;
        }
        .form-control:focus{border-color:var(--cl-petrol);box-shadow:0 0 0 .22rem rgba(32,92,104,.14)}
        .input-group{display:flex;align-items:stretch;width:100%}
        .input-group .form-control{min-width:0;flex:1 1 auto;border-top-right-radius:0;border-bottom-right-radius:0}
        .input-group .btn-icon{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}
        .form-check{display:flex;align-items:flex-start;gap:.55rem;margin:0}
        .form-check-input{width:1.05rem;height:1.05rem;margin-top:.16rem;accent-color:var(--cl-petrol);flex:0 0 auto}
        .form-check-label{color:#345c64;line-height:1.35}
        .text-muted{color:var(--cl-muted)!important}
        .small{font-size:.875rem}
        .cl-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
        .cl-stage{
            width:min(1320px,100%);
            display:grid;
            grid-template-columns:minmax(0,.86fr) minmax(640px,1.14fr);
            border:1px solid rgba(255,255,255,.75);
            border-radius:32px;
            overflow:hidden;
            background:rgba(255,255,255,.68);
            box-shadow:var(--cl-shadow);
            backdrop-filter:blur(20px);
        }
        .cl-showcase{
            position:relative;
            min-height:630px;
            overflow:hidden;
            padding:34px;
            color:#fff;
            background:
                radial-gradient(circle at 18% 18%,rgba(255,255,255,.18),transparent 24%),
                radial-gradient(circle at 92% 18%,rgba(100,183,186,.28),transparent 28%),
                linear-gradient(145deg,#183b43 0%,#205c68 58%,#2f7378 100%);
        }
        .cl-showcase::before{
            content:"";
            position:absolute;
            inset:-25%;
            background-image:radial-gradient(rgba(255,255,255,.18) 1.5px,transparent 1.5px);
            background-size:32px 32px;
            transform:rotate(-10deg);
            opacity:.42;
        }
        .cl-showcase::after{
            content:"";
            position:absolute;
            width:430px;
            height:430px;
            right:-145px;
            bottom:-140px;
            border-radius:999px;
            background:rgba(255,255,255,.13);
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
        }
        .cl-showcase-inner{position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
        .cl-login-ip{
            position:absolute;
            left:34px;
            bottom:12px;
            z-index:2;
            color:rgba(255,255,255,.68);
            font-size:.68rem;
            line-height:1;
            font-variant-numeric:tabular-nums;
            pointer-events:none;
        }
        .cl-brand{display:inline-flex;align-items:center;gap:.85rem;color:#fff;text-decoration:none}
        .cl-brand:hover{text-decoration:none}
        .cl-brand-mark{
            width:86px;height:58px;border-radius:18px;
            display:inline-grid;place-items:center;
            padding:8px;
            background:rgba(255,255,255,.92);
            border:1px solid rgba(255,255,255,.42);
            box-shadow:0 16px 34px rgba(0,0,0,.12);
            font-weight:850;letter-spacing:0;
            overflow:hidden;
        }
        .cl-brand-logo{
            display:block;
            width:100%;
            height:100%;
            object-fit:contain;
        }
        .cl-brand-title{display:block;font-weight:850;font-size:1.12rem;line-height:1.05}
        .cl-brand-sub{display:block;color:rgba(255,255,255,.75);font-size:.9rem;margin-top:.2rem}
        .cl-hero-badge{
            display:inline-flex;align-items:center;gap:.45rem;
            width:max-content;
            border-radius:999px;
            padding:.42rem .72rem;
            background:rgba(255,255,255,.13);
            border:1px solid rgba(255,255,255,.15);
            font-size:.78rem;
            text-transform:uppercase;
            letter-spacing:.08em;
            font-weight:800;
            color:rgba(255,255,255,.88);
        }
        .cl-hero-title{margin:1rem 0 .65rem;font-size:clamp(2rem,3.2vw,3.55rem);line-height:.98;letter-spacing:0;font-weight:875}
        .cl-hero-text{max-width:580px;margin:0;color:rgba(255,255,255,.82);font-size:1rem;line-height:1.55}
        .cl-mock{
            width:min(470px,100%);
            margin-top:20px;
            padding:14px;
            border-radius:24px;
            background:rgba(255,255,255,.13);
            border:1px solid rgba(255,255,255,.16);
            box-shadow:0 24px 60px rgba(0,0,0,.14);
            backdrop-filter:blur(12px);
        }
        .cl-mock-search{display:flex;align-items:center;gap:.75rem;padding:.8rem .9rem;border-radius:16px;background:rgba(255,255,255,.94);color:#183b43}
        .cl-mock-search svg{color:var(--cl-petrol)}
        .cl-mock-results{display:grid;gap:.62rem;margin-top:.85rem}
        .cl-mock-result{display:grid;grid-template-columns:42px 1fr auto;gap:.75rem;align-items:center;padding:.75rem;border-radius:16px;background:rgba(255,255,255,.78)}
        .cl-mock-cover{width:42px;height:52px;border-radius:10px;background:linear-gradient(145deg,#dceeee,#fff);border:1px solid rgba(32,92,104,.18)}
        .cl-line{height:8px;border-radius:999px;background:#d4e5e5;margin:.3rem 0}.cl-line.sm{width:64%}.cl-line.md{width:84%}.cl-line.xs{width:42%}
        .cl-pill{display:inline-flex;align-items:center;border-radius:999px;padding:.22rem .5rem;background:rgba(54,124,130,.12);color:#245e66;font-size:.75rem;font-weight:800}
        .cl-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
        .cl-feature{padding:12px;border-radius:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14)}
        .cl-feature strong{display:block;font-size:1.04rem}.cl-feature span{display:block;margin-top:.3rem;color:rgba(255,255,255,.72);font-size:.84rem;line-height:1.35}
        .cl-login-side{display:flex;align-items:center;justify-content:center;padding:22px;background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(245,250,249,.92))}
        .cl-auth{width:min(100%,680px)}
        .cl-mobile-brand{display:none;margin-bottom:18px}
        .cl-card{
            border:1px solid rgba(24,59,67,.12);
            border-radius:var(--cl-radius);
            background:rgba(255,255,255,.97);
            box-shadow:var(--cl-shadow-sm);
            overflow:hidden;
        }
        .cl-card-head{padding:20px 22px 14px;border-bottom:1px solid rgba(24,59,67,.08);background:linear-gradient(180deg,#fff,#f5faf9)}
        .cl-kicker{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:9px}
        .cl-badge{display:inline-flex;align-items:center;gap:.45rem;border-radius:999px;padding:.36rem .65rem;background:rgba(32,92,104,.08);color:var(--cl-petrol);font-size:.76rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
        .cl-badge-success{background:rgba(54,124,130,.10);color:#245e66}
        .cl-card-title{margin:0 0 .3rem;font-size:1.72rem;line-height:1.06;letter-spacing:0;font-weight:850;color:#183b43}
        .cl-card-subtitle{margin:0;color:var(--cl-muted);font-size:.95rem;line-height:1.48}
        .cl-card-body{padding:16px 22px 18px}
        .cl-alert{padding:.9rem 1rem;border-radius:16px;margin-bottom:16px;border:1px solid rgba(245,159,0,.24);background:#fff8e8;color:#7a5200}
        .cl-alert.alert-success{border-color:rgba(54,124,130,.22);background:#edf6f3;color:#245e66}
        .cl-alert.alert-warning{border-color:rgba(245,159,0,.24);background:#fff8e8;color:#7a5200}
        .cl-alert.alert-info{border-color:rgba(32,92,104,.18);background:#edf6f6;color:#205c68}
        .cl-alert-actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:.8rem}
        .cl-alert-actions .btn{min-height:2.25rem;padding:.54rem .8rem;border-radius:11px}
        .cl-logged{display:grid;grid-template-columns:auto 1fr;gap:.9rem;padding:1rem;border-radius:18px;border:1px solid rgba(54,124,130,.20);background:rgba(54,124,130,.07);margin-bottom:16px}
        .cl-status-icon{width:42px;height:42px;border-radius:15px;display:grid;place-items:center;background:#fff;color:var(--cl-green);box-shadow:0 10px 24px rgba(15,23,42,.08)}
        .cl-logged h3{margin:0 0 .25rem;font-size:1.05rem}.cl-logged-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.9rem}
        .cl-access-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
        .cl-provider-card{
            position:relative;
            display:grid;
            grid-template-columns:42px minmax(0,1fr);
            align-items:center;
            gap:.68rem;
            min-height:72px;
            padding:12px 34px 12px 12px;
            border-radius:17px;
            border:1px solid rgba(32,92,104,.14);
            background:linear-gradient(135deg,rgba(32,92,104,.075),rgba(100,183,186,.045));
            color:inherit;
            text-decoration:none;
            transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;
        }
        .cl-provider-card:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(24,59,67,.10);border-color:rgba(32,92,104,.26);text-decoration:none}
        .cl-provider-card::after{content:"›";position:absolute;right:13px;top:50%;transform:translateY(-50%);color:rgba(82,110,117,.58);font-size:1.45rem;line-height:1}
        .cl-provider-logo{width:42px;height:42px;flex:0 0 auto;border-radius:14px;display:grid;place-items:center;background:#fff;color:var(--cl-petrol);box-shadow:0 9px 20px rgba(24,59,67,.09);border:1px solid rgba(24,59,67,.06)}
        .cl-provider-title{display:block;font-weight:850;color:#183b43;line-height:1.12}
        .cl-provider-text{display:block;margin-top:.18rem;color:var(--cl-muted);font-size:.78rem;line-height:1.22}
        .cl-provider-shib{border-color:var(--cl-line);background:linear-gradient(135deg,#edf6f6,#fff)}
        .cl-provider-shib:hover{border-color:var(--cl-petrol)}
        .cl-provider-shib::after{color:var(--cl-petrol)}
        .cl-provider-shib .cl-provider-logo{background:#fff;border-color:var(--cl-line)}
        .cl-shib-logo{width:31px;height:31px;display:block}
        .cl-icon-box{width:42px;height:42px;flex:0 0 auto;border-radius:15px;display:grid;place-items:center;background:#fff;color:var(--cl-petrol);box-shadow:0 12px 24px rgba(24,59,67,.10)}
        .cl-section-label{margin:14px 0 8px;font-size:.76rem;text-transform:uppercase;letter-spacing:.10em;font-weight:850;color:#526e75}
        .cl-tabbar{display:grid;grid-template-columns:repeat(var(--cl-login-tabs,3),minmax(0,1fr));gap:6px;padding:6px;border:1px solid rgba(24,59,67,.08);border-radius:16px;background:#edf6f6}
        .cl-tab{border:0;border-radius:12px;background:transparent;color:#526e75;font:inherit;font-size:.88rem;font-weight:800;line-height:1.2;padding:.58rem .5rem;cursor:pointer;text-align:center;transition:background .16s ease,color .16s ease,box-shadow .16s ease}
        .cl-tab.is-active{background:#fff;color:var(--cl-petrol);box-shadow:0 8px 18px rgba(24,59,67,.10)}
        .cl-pane{padding-top:11px}.cl-pane[hidden]{display:none!important}
        .cl-form-grid{display:grid;gap:12px}.cl-form-between{display:flex;align-items:center;justify-content:space-between;gap:1rem}.cl-form-hint{margin:.1rem 0 0;color:var(--cl-muted);font-size:.86rem;line-height:1.45}
        .cl-2fa-box{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:14px;padding:13px 14px;border:1px solid rgba(32,92,104,.18);border-radius:16px;background:#edf6f6}
        .cl-2fa-box strong{display:block;color:#205c68;line-height:1.2}.cl-2fa-box span{display:block;margin-top:.22rem;color:#526e75;font-size:.86rem;line-height:1.35}.cl-2fa-box .btn{flex:0 0 auto}
        .cl-signup-links{margin-top:10px;text-align:center;color:var(--cl-muted);font-size:.88rem;line-height:1.4}
        .cl-signup-links a{font-weight:800;color:var(--cl-petrol);text-decoration:none}
        .cl-signup-links a:hover{text-decoration:underline}
        .cl-signup-links .cl-sep{margin:0 .45rem;color:#6d8e91}
        .cl-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
        .cl-mini-card{display:flex;gap:.65rem;align-items:flex-start;padding:11px 12px;border-radius:16px;border:1px solid rgba(24,59,67,.10);background:#fff;color:inherit;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
        .cl-mini-card:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(24,59,67,.08);border-color:rgba(32,92,104,.18);text-decoration:none}
        .cl-mini-card strong{display:block;color:#183b43;line-height:1.15}.cl-mini-card span{display:block;margin-top:.25rem;color:var(--cl-muted);font-size:.84rem;line-height:1.32}.cl-mini-card svg{color:var(--cl-petrol);flex:0 0 auto;margin-top:.08rem}
        .cl-shop{margin-top:10px;text-align:center}
        .cl-shop-link{margin-top:14px;text-align:center;}
        .cl-footer{padding:0 22px 16px;color:var(--cl-muted);text-align:center;font-size:.80rem;line-height:1.38}
        .cl-footer-links{margin-top:.45rem}.cl-footer a{color:var(--cl-petrol)}
        .cl-svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}.cl-svg-sm{width:17px;height:17px}
        @media (min-width: 768px){
            .cl-form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 14px}
            .cl-form-grid > .cl-form-hint{grid-column:1/-1}
            .cl-form-grid > .form-check{align-self:center}
            .cl-form-grid > .btn{width:auto;min-width:174px;justify-self:end;padding-left:1.1rem;padding-right:1.1rem}
            #pane-unified .cl-form-grid > .form-check,
            #pane-subuser .cl-form-grid > .form-check{grid-column:1/2}
            #pane-unified .cl-form-grid > .btn,
            #pane-subuser .cl-form-grid > .btn{grid-column:2/3}
        }
        @media (max-width: 991.98px){
            .cl-page{align-items:flex-start;padding:18px}
            .cl-stage{grid-template-columns:1fr;width:min(760px,100%);border-radius:26px}
            .cl-showcase{min-height:auto;padding:26px;border-radius:0}
            .cl-showcase-inner{display:block}.cl-showcase .cl-brand{display:none}.cl-hero-badge{font-size:.72rem}.cl-hero-title{margin:1rem 0 .7rem;font-size:2.15rem;letter-spacing:0}.cl-hero-text{font-size:.98rem;line-height:1.55}.cl-mock,.cl-feature-grid,.cl-showcase-bottom{display:none}
            .cl-login-side{padding:20px}.cl-access-grid{grid-template-columns:1fr}.cl-mobile-brand{display:flex;align-items:center;gap:.75rem}.cl-mobile-brand .cl-brand-mark{background:#fff;color:var(--cl-petrol);border-color:rgba(32,92,104,.12);box-shadow:0 12px 24px rgba(24,59,67,.08)}.cl-mobile-brand .cl-brand-title{color:#183b43}.cl-mobile-brand .cl-brand-sub{color:var(--cl-muted)}
            .cl-login-ip{left:20px;bottom:10px}
        }
        @media (max-width: 575.98px){
            body.cl-login{background:#f4f8f7}.cl-page{padding:0}.cl-stage{border-radius:0;border:0;box-shadow:none;min-height:100vh}.cl-showcase{padding:20px}.cl-login-side{padding:16px}.cl-card{border-radius:22px}.cl-card-head,.cl-card-body{padding-left:18px;padding-right:18px}.cl-card-title{font-size:1.72rem}.cl-kicker{align-items:flex-start;flex-direction:column;gap:.6rem}.cl-access-grid{grid-template-columns:1fr}.cl-provider-card{min-height:auto}.cl-tabbar{grid-template-columns:1fr}.cl-form-between{display:block}.cl-form-between a{display:inline-block;margin-top:.35rem}.cl-quick-grid{grid-template-columns:1fr}.cl-shop-link{margin-top:14px;text-align:center;}.cl-2fa-box{align-items:stretch;flex-direction:column}.cl-2fa-box .btn{width:100%}
        .cl-footer{padding-left:18px;padding-right:18px}.cl-logged{grid-template-columns:1fr}.cl-logged-actions .btn{width:100%}
        }

        body.cl-login .cl-showcase .cl-showcase-inner .cl-hero-badge{
            letter-spacing:0!important;
            color:#fff!important;
            -webkit-text-fill-color:#fff!important;
            background:rgba(255,255,255,.14)!important;
            border-color:rgba(255,255,255,.22)!important;
        }
        body.cl-login .cl-showcase .cl-showcase-inner .cl-hero-title{
            color:#fff!important;
            -webkit-text-fill-color:#fff!important;
            font-size:clamp(1.6rem,2.6vw,2.45rem)!important;
            line-height:1.08!important;
            letter-spacing:0!important;
            font-weight:850!important;
            text-shadow:0 2px 18px rgba(0,0,0,.14)!important;
        }
        body.cl-login .cl-showcase .cl-showcase-inner .cl-hero-text{
            color:rgba(255,255,255,.88)!important;
            -webkit-text-fill-color:rgba(255,255,255,.88)!important;
            font-size:.95rem!important;
            line-height:1.5!important;
        }
    
/* Florence login: petrol and muted turquoise, aligned with the app palette. */
body.cl-login{font-size:14px;line-height:1.5}button,input{font:inherit}.cl-hero-content{margin-top:56px}.cl-showcase-bottom{color:#dceeee}.cl-brand-mark{flex-shrink:0}.cl-brand-sub{max-width:360px}.cl-mock-search .text-muted{margin-left:auto;white-space:nowrap}.cl-alert{border:1px solid #eabfc2;background:#fff0f0;padding:14px;border-radius:12px;margin-bottom:20px;color:#912d37}.cl-logged{margin-bottom:20px}.cl-quick-grid form{margin:0;display:flex}.cl-quick-grid button{width:100%;text-align:left;cursor:pointer}.cl-login a:focus-visible,.cl-login button:focus-visible{outline:3px solid #205c68;outline-offset:3px}.cl-form-between{flex-wrap:wrap}.cl-form-grid>div{min-width:0}.cl-2fa-box strong,.cl-2fa-box span span{display:block}.cl-feature-grid{margin-bottom:24px}.cl-footer{font-size:.8rem}.cl-hero-title{overflow-wrap:normal}.cl-showcase .cl-hero-title{font-size:clamp(2rem,3.2vw,3rem)!important}@media(max-width:600px){.cl-form-grid{grid-template-columns:1fr!important}.cl-page{padding:14px}.cl-login-side{padding:14px}.cl-card-body{padding:18px}.cl-2fa-box{align-items:flex-start;flex-direction:column}.cl-quick-grid{grid-template-columns:1fr}.cl-brand-sub{font-size:.8rem}}

/* Keep the shared footer in this page's Florence palette only. */
.cl-login .ff-site-footer{background:#edf6f6;color:var(--cl-ink);border-color:#b7d2d5}
.cl-login .ff-site-footer :is(h2,a),.cl-login .ff-footer-brand{color:var(--cl-petrol)}
.cl-login .ff-site-footer a:hover{color:#174752}
.cl-login .ff-footer-bottom{color:var(--cl-muted);border-color:#b7d2d5}
.cl-login .form-control:autofill{-webkit-text-fill-color:var(--cl-ink);box-shadow:0 0 0 1000px #edf6f6 inset}
.cl-login .form-control:autofill:focus{box-shadow:0 0 0 1000px #edf6f6 inset,0 0 0 .22rem rgba(32,92,104,.14)}
@media(prefers-reduced-motion:reduce){.cl-login :is(.btn,.form-control,.cl-provider-card,.cl-mini-card){transition:none}.cl-login :is(.btn,.cl-provider-card,.cl-mini-card):hover{transform:none}}