:root {
  --sse-primary:#008080; --sse-dark:#174646; --sse-bg:#eef6f5; --sse-border:#c8dedd;
  --sse-danger:#a82424; --sse-radius:.45rem; --sse-header-height:48px;
  --sse-soft:#c8e8e5; --sse-accent:#2ca8a1; --sse-header-bg:#008080e8; --sse-focus:#2ca8a145;
  --sse-surface:#fff; --sse-muted:#174646; --sse-overlay:#17464699;
}
*{box-sizing:border-box}
.licence-translation{display:block;margin-top:.14rem;color:#355f5d;font-size:11px;font-style:italic}
html{max-width:100%;overflow-x:clip;font-family:"Arial Narrow",Arial,sans-serif;color:var(--sse-dark);background:var(--sse-bg);font-size:13px}
body{max-width:100%;margin:0;min-height:100vh;overflow-x:clip;display:flex;flex-direction:column;line-height:1.35;background:var(--sse-bg)}

body.theme-palette-teal {
  --sse-primary:#008080; --sse-dark:#174646; --sse-bg:#eef8f7; --sse-border:#9ed8d3;
  --sse-soft:#c8e8e5; --sse-accent:#2ca8a1; --sse-header-bg:#008080e8;
  --sse-focus:#2ca8a145; --sse-surface:#fff; --sse-muted:#174646; --sse-overlay:#17464699;
}

body.theme-palette-red {
  --sse-primary:#cb181d; --sse-dark:#99000d; --sse-bg:#fee5d9; --sse-border:#fc9272;
  --sse-soft:#fcbba1; --sse-accent:#ef3b2c; --sse-header-bg:#cb181de8;
  --sse-focus:#ef3b2c45; --sse-surface:#fff; --sse-muted:#99000d; --sse-overlay:#99000d99;
}

body.theme-palette-blue {
  --sse-primary:#2171b5; --sse-dark:#084594; --sse-bg:#eff3ff; --sse-border:#9ecae1;
  --sse-soft:#c6dbef; --sse-accent:#4292c6; --sse-header-bg:#2171b5e8;
  --sse-focus:#4292c645; --sse-surface:#fff; --sse-muted:#084594; --sse-overlay:#08459499;
}

body.theme-palette-green {
  --sse-primary:#238b45; --sse-dark:#005a32; --sse-bg:#edf8e9; --sse-border:#a1d99b;
  --sse-soft:#c7e9c0; --sse-accent:#41ab5d; --sse-header-bg:#238b45e8;
  --sse-focus:#41ab5d45; --sse-surface:#fff; --sse-muted:#005a32; --sse-overlay:#005a3299;
}

body.theme-palette-black-white {
  --sse-primary:#1a1a1a; --sse-dark:#000; --sse-bg:#fff; --sse-border:#d9d9d9;
  --sse-soft:#f5f5f5; --sse-accent:#666; --sse-header-bg:#1a1a1af2;
  --sse-focus:#66666645; --sse-surface:#fff; --sse-muted:#000; --sse-overlay:#0009;
}

body.theme-palette-charcoal-sand {
  --sse-primary:#1e1e1c; --sse-dark:#11110f; --sse-bg:#fff; --sse-border:#b7a487;
  --sse-soft:#d8cbb3; --sse-accent:#7a6c58; --sse-header-bg:#1e1e1cf2;
  --sse-focus:#7a6c5845; --sse-surface:#f3eee3; --sse-muted:#11110f; --sse-overlay:#11110f99;
}
.site-header{position:sticky;top:0;z-index:100;align-self:stretch;width:100%;min-height:var(--sse-header-height);background:var(--sse-header-bg);color:#fff;backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.25)}
.header-inner{width:calc(100% - 2cm);max-width:120rem;min-height:var(--sse-header-height);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.header-left,.header-right{display:flex;align-items:center;gap:.55rem;min-width:0}
.developer-mark{display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;border:1px solid rgba(255,255,255,.65);border-radius:50%;overflow:hidden;color:#fff;text-decoration:none;font-size:10px;font-weight:700;letter-spacing:.04em}.developer-mark img,.user-avatar img{width:100%;height:100%;object-fit:cover}
.header-divider{width:1px;height:24px;flex:0 0 auto;background:rgba(255,255,255,.45)}
.brand{display:grid;color:#fff;text-decoration:none;font-size:13px;font-weight:700;line-height:1.05;white-space:nowrap}
.brand small,.header-user small{color:rgba(255,255,255,.84);font-size:11px;font-style:normal;font-weight:400}
.user-avatar{display:grid;place-items:center;width:27px;height:35px;flex:0 0 auto;overflow:hidden;border-radius:.22rem;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.6);font-size:10px;font-weight:700}
.header-user{display:grid;max-width:15rem;line-height:1.05}.header-user strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.header-action,.header-logout button{display:inline-flex;align-items:center;min-height:24px;padding:.25rem .48rem;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(255,255,255,.12);color:#fff;text-decoration:none;font-size:10px;font-weight:700;white-space:nowrap}
.header-logout{margin:0}.header-logout button{cursor:pointer}
.site-breadcrumb{position:sticky;top:var(--sse-header-height);z-index:90;align-self:stretch;width:100%;min-height:30px;display:flex;align-items:center;background:rgba(255,255,255,.9);border-bottom:1px solid var(--sse-border);backdrop-filter:blur(9px)}
.site-breadcrumb div{width:calc(100% - 2cm);max-width:120rem;margin:auto;display:flex;align-items:center;gap:.48rem;overflow-x:auto;white-space:nowrap}.site-breadcrumb a{color:var(--sse-dark);text-decoration:none;font-size:12px}.site-breadcrumb a[aria-current=page]{color:var(--sse-primary);font-weight:700}
.page-shell{width:calc(100% - 2cm);max-width:120rem;margin:0 auto;display:grid;place-items:start stretch;align-content:start;flex:1;padding:.65rem 0 3rem}
.auth-card,.workspace-card{min-width:0;max-width:100%;padding:.9rem;background:var(--sse-surface);border:1px solid var(--sse-border);border-top:3px solid var(--sse-primary);border-radius:var(--sse-radius);box-shadow:0 .65rem 1.8rem #17464612}.auth-card{width:min(100%,31rem);justify-self:center}.workspace-card{width:100%;justify-self:stretch;overflow:hidden}.page-shell:has(>.auth-card){place-items:center;align-content:center;padding-top:.85rem}
h1{font-size:18px;margin:.15rem 0 .7rem}h2{font-size:15px;margin:.25rem 0 .6rem}h3{font-size:13px}p{margin:.45rem 0}small{font-size:11px;font-style:italic;font-weight:400}
label{display:grid;gap:.2rem;margin:.45rem 0;font-size:12px;font-weight:700}
input,select,textarea,button{font-family:inherit;border-radius:.3rem}input,select,textarea{width:100%;padding:.38rem .5rem;border:1px solid var(--sse-border);background:var(--sse-surface);color:var(--sse-dark);font-size:12px;font-weight:400;line-height:1.25}option{font-size:12px;font-weight:400}input:focus,select:focus,textarea:focus{outline:2px solid var(--sse-focus);border-color:var(--sse-primary)}
button,.button-secondary{border:0;padding:.34rem .55rem;background:var(--sse-primary);color:#fff;font-size:10px;font-weight:700;line-height:1.2;cursor:pointer;border-radius:999px;text-decoration:none}button:hover{filter:brightness(.9)}.button-secondary{background:var(--sse-muted)}.secondary-form{margin-top:.35rem}
.login-actions{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}.auth-button-link{display:inline-flex;align-items:center;min-height:26px;padding:.34rem .55rem;border:1px solid var(--sse-primary);border-radius:999px;background:#fff;color:var(--sse-primary);font-size:10px;font-weight:700;text-decoration:none}.password-toggle{display:inline-flex;grid-template-columns:none;align-items:center;gap:.35rem;margin:.2rem 0 .1rem;font-size:11px;font-weight:400}.password-toggle input{width:14px;height:14px;margin:0;padding:0;accent-color:var(--sse-primary)}
.hint{font-size:12px;font-weight:400;color:#587070}.alert{padding:.45rem .6rem;border-radius:.3rem;margin:.45rem 0;font-size:12px}.alert-error{background:#fee5e5;color:#7b1717;border:1px solid #efbaba}.toast-stack{position:fixed;right:max(.75rem,calc((100vw - 75rem)/2));bottom:2.25rem;z-index:1000;width:min(calc(100vw - 1.5rem),28rem);display:flex;flex-direction:column-reverse;gap:.45rem;pointer-events:none}.toast{position:relative;margin:0;padding:.65rem 2.1rem .65rem .75rem;border-radius:.42rem;font-size:12px;box-shadow:0 .75rem 2rem rgba(23,70,70,.28);pointer-events:auto;animation:toast-bounce-in .58s cubic-bezier(.2,.8,.25,1.2) both}.toast.is-dismissing{animation:toast-dismiss .2s ease-in forwards}.toast-dismiss{position:absolute;top:.32rem;right:.38rem;width:20px;height:20px;display:grid;place-items:center;padding:0;border-radius:50%;background:transparent;color:currentColor;font-size:15px;line-height:1}.toast-success{background:#e5f6ed;color:#145c35;border:1px solid #a7dcbc}.toast-error{background:#fee5e5;color:#7b1717;border:1px solid #efbaba}.toast-info{background:#e5f1f6;color:#164e68;border:1px solid #accfdf}@keyframes toast-bounce-in{0%{opacity:0;transform:translateY(120%) scale(.96)}62%{opacity:1;transform:translateY(-12px) scale(1.01)}80%{transform:translateY(6px) scale(.995)}100%{transform:translateY(0) scale(1)}}@keyframes toast-dismiss{to{opacity:0;transform:translateY(35%) scale(.96)}}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#587070}.has-shell-context .eyebrow{display:none}.workspace-heading{display:flex;justify-content:space-between;gap:.65rem;align-items:flex-start}
.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.45rem}.summary-grid div{padding:.55rem .65rem;background:var(--sse-bg);border-radius:.3rem}.summary-grid dt{font-size:11px;color:#587070}.summary-grid dd{margin:.1rem 0 0;font-size:13px;font-weight:700}.summary-action{display:inline-flex;margin-top:.35rem;padding:.2rem .42rem;border:1px solid var(--sse-border);border-radius:999px;color:var(--sse-primary);background:#fff;font-size:10px;text-decoration:none}
.site-footer{position:fixed;bottom:0;z-index:20;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;padding:.32rem max(.5rem,1cm);background:rgba(255,255,255,.88);border-top:1px solid var(--sse-border);backdrop-filter:blur(8px);font-size:11px}.site-footer a{color:var(--sse-primary)}.footer-company{justify-self:start}.footer-links{justify-self:center;display:flex;align-items:center;gap:.3rem}.footer-version{justify-self:end;color:var(--sse-dark);white-space:nowrap}
dialog{font-size:13px;border:1px solid var(--sse-border);border-top:3px solid var(--sse-primary);border-radius:var(--sse-radius);box-shadow:0 1rem 4rem #0004}dialog::backdrop{background:#173b3b88;backdrop-filter:blur(4px)}details{margin-top:.65rem;font-size:12px}
.licence-dialog{width:min(calc(100vw - 2rem),52rem);max-height:min(88vh,50rem);padding:0;overflow:auto}.licence-dialog header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;background:var(--sse-bg);border-bottom:1px solid var(--sse-border)}.licence-dialog h2{margin:0}.licence-close{background:#fff;color:var(--sse-dark);border:1px solid var(--sse-border)}.licence-body{position:relative;isolation:isolate;display:block;padding:1rem;overflow:hidden}.licence-body::before{content:"";position:absolute;z-index:-1;inset:1rem;background:url("developer-logo.jpeg") center/contain no-repeat;opacity:.075;pointer-events:none}.licence-body ol{padding-left:1.35rem}.licence-body li{margin:.5rem 0}.profile-card{width:min(100%,42rem)}.profile-photo{display:block;width:82px;height:82px;margin:.5rem 0;object-fit:cover;border-radius:50%;border:2px solid var(--sse-border)}.profile-card fieldset{margin:.7rem 0;padding:.55rem .7rem;border:1px solid var(--sse-border);border-radius:.35rem}.profile-card legend{font-size:12px;font-weight:700}
.subscription-reminder-dialog{width:min(calc(100vw - 2rem),34rem);padding:0;overflow:hidden;border-top:4px solid var(--sse-primary)}.subscription-reminder-dialog::backdrop{background:rgba(23,59,59,.62);backdrop-filter:blur(4px)}.subscription-reminder-dialog>p,.subscription-reminder-dialog>.subscription-reminder-summary,.subscription-reminder-dialog>.bank-details{margin-left:1rem;margin-right:1rem}.subscription-reminder-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;background:var(--sse-bg);border-bottom:1px solid var(--sse-border)}.subscription-reminder-head h2{margin:0}.subscription-reminder-head form{margin:0}.subscription-reminder-close{width:24px;height:24px;padding:0;display:grid;place-items:center;background:transparent;color:var(--sse-dark);border:1px solid var(--sse-border);font-size:16px}.subscription-reminder-summary{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.subscription-reminder-summary div,.bank-details dl div{padding:.5rem;background:var(--sse-bg);border-radius:.3rem}.subscription-reminder-summary dt,.bank-details dt{font-size:11px;color:#587070}.subscription-reminder-summary dd,.bank-details dd{margin:.12rem 0 0;font-size:13px;font-weight:700}.reminder-overdue{padding:.5rem;border:1px solid #efbaba;background:#fee5e5;color:#7b1717;border-radius:.3rem}.reminder-due{padding:.5rem;border:1px solid #e6c35a;background:#fff6cf;color:#654d00;border-radius:.3rem}.bank-details{margin-bottom:1rem}.bank-details h3{margin:.65rem 0 .4rem}.bank-details dl{display:grid;gap:.35rem;margin:0}
@media(max-width:48rem){.header-inner,.site-breadcrumb div,.page-shell{width:calc(100% - 1rem)}.header-user{display:none}.header-right{gap:.35rem}.header-action,.header-logout button{padding:.22rem .4rem}.workspace-heading{display:grid}.page-shell{align-items:start}.subscription-reminder-summary{grid-template-columns:1fr}.site-footer{grid-template-columns:1fr auto}.footer-company{display:none}.footer-links{justify-self:start}.footer-version{justify-self:end}}
@media(max-width:32rem){.brand small,.header-divider{display:none}.header-inner{width:min(100% - .7rem,75rem)}.site-breadcrumb div{width:min(100% - .7rem,75rem)}.header-action{font-size:0}.header-action::after{content:"Profile";font-size:10px}.licence-dialog{width:calc(100vw - .7rem);max-height:92vh}.licence-dialog header{padding:.55rem}.licence-body{padding:.65rem}.licence-body ol{padding-left:1.1rem}.licence-body li{margin:.38rem 0}.login-actions{align-items:stretch}.auth-button-link{justify-content:center;flex:1 1 auto}}

/* Compact horizontal profile layout. */
.page-shell:has(> .profile-card) {
    place-items: start stretch;
    align-content: start;
}

.profile-card {
    width: min(100%, 70rem);
    justify-self: center;
}

.profile-intro {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .8rem;
}

.profile-intro h1 {
    margin-top: 0;
}

.profile-intro .profile-photo {
    margin: 0;
}

.profile-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: .7rem;
}

.profile-card .profile-section {
    min-width: 0;
    margin: 0;
    padding: .65rem;
}

.profile-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 .55rem;
}

.profile-wide,
.profile-submit {
    grid-column: 1 / -1;
}

.profile-submit {
    justify-self: end;
}

@media (max-width: 48rem) {
    .profile-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 40rem) {
    .profile-intro,
    .profile-fields {
        grid-template-columns: 1fr;
    }

    .profile-wide {
        grid-column: auto;
    }

    .profile-submit {
        width: 100%;
        justify-content: center;
    }
}

/* Keep bilingual captions on one line and controls on the following line. */
label {
    display: block;
}

label > input,
label > select,
label > textarea,
label > .password-field {
    display: block;
    margin-top: .2rem;
}

/* Shared User Profile dialog and passport-style photo frames. */
.profile-dialog {
    width: min(calc(100vw - 2rem), 70rem);
    max-height: min(90vh, 48rem);
    padding: 0;
    overflow: auto;
    background: var(--sse-surface);
}

.profile-dialog::backdrop {
    background: var(--sse-overlay);
    backdrop-filter: blur(5px);
}

.profile-dialog .profile-card {
    width: 100%;
    padding: .85rem;
}

.profile-dialog .profile-intro {
    position: sticky;
    top: 0;
    z-index: 2;
    grid-template-columns: auto minmax(0, 1fr) auto;
    margin: -.85rem -.85rem .65rem;
    padding: .7rem .85rem;
    background: var(--sse-bg);
    border-bottom: 1px solid var(--sse-border);
}

.profile-dialog-close {
    align-self: start;
    background: var(--sse-surface);
    color: var(--sse-dark);
    border: 1px solid var(--sse-border);
}

.profile-photo {
    width: 72px;
    height: 92px;
    border-radius: .28rem;
}

@media (max-width: 40rem) {
    .profile-dialog {
        width: calc(100vw - .7rem);
        max-height: 94vh;
    }

    .profile-dialog .profile-intro {
        grid-template-columns: 58px minmax(0, 1fr) auto;
        align-items: start;
    }

    .profile-dialog .profile-photo {
        width: 56px;
        height: 72px;
    }

    .profile-dialog-close {
        padding: .3rem;
    }
}