@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto/Roboto-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}


:root{


  --baby-green:#d9f7e3;
  --baby-lime:#e9ffd6;
  --lemon:#fff6b3;
  --ink:#111;
  --soft-gray:#EFF7F2;
  --mid-gray:#cbd5df;
  --accent:#9be2a8;      
  --accent-2:#ffd24d;    
  --btn-text:#0b1b10;
  --focus:#3b82f6;
  --footer-safe: calc(var(--footer-h) + 20px + env(safe-area-inset-bottom));


  --menu-h: 64px;
  --footer-h: 56px;


  --panel-bg:#F5FBF7;
  --panel-border:#E2EFE6;


  --input-border: #cbd3df;
  --input-border-strong: #9aa6b2;
  --input-edge: #b6c2d0;
  --input-edge-hover: #9aa6b2;
  --input-ring: var(--focus);


  --lk-accent: var(--accent-2);
  --lk-accent-weak: var(--accent);
  --lk-panel: var(--panel-bg);
  --lk-panel-dark: rgba(20,20,25,.85);
  --lk-text: var(--ink);
  --lk-text-dark: #e8eaee;
  --lk-muted: #4b5563;
  --lk-border: var(--panel-border);
}
@supports (color: color-mix(in srgb, #000, #fff)) {
  :root{
    --input-border: color-mix(in srgb, var(--mid-gray) 85%, #000 15%);
    --input-border-strong: color-mix(in srgb, var(--mid-gray) 70%, #000 30%);
  }
}


*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font: 16px/1.5 'Roboto', system-ui, -apple-system, Segoe UI, Ubuntu, Cantarell, Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--soft-gray);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;  
}
body.no-scroll { overflow: hidden; }
a, a:link, a:visited, a:hover, a:focus, a:active { text-decoration: none; color: inherit; }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }


.site-wrap{


  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;                     
}
@supports (height: 100svh){
  .site-wrap{ height: 100svh; }         
}


.header{ position: relative; z-index: 1; }


.main, main.content{
  position: relative;                    
  inset: auto;
  overflow: auto;                        
  -webkit-overflow-scrolling: touch;
  min-height: 0;                         
  padding: 16px 0 16px;
}
.main-inner{ 
  max-width:960px; margin:0 auto; padding:20px 16px 48px; 
  padding-bottom: max(48px, var(--footer-safe));
}


footer.footer{
  position: relative;                    
  z-index: 1;
  border-top:1px solid var(--mid-gray);
  background: linear-gradient(0deg, var(--baby-green), var(--baby-lime));
}
.footer-inner{
  max-width:1100px; margin:0 auto; width:100%;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-size:14px; flex-wrap:wrap; text-align:center;
}
.footer-links{ flex:1; min-width:200px; }
.footer-cta{ flex-shrink:0; }


@media (max-width: 600px){
  .footer-inner{ flex-direction:column; gap:8px; font-size:13px; padding-bottom:12px; }
  .footer-links{ order:2; line-height:1.4; }
  .footer-cta{ order:1; }
}


@media (max-width: 400px){
  :root{ --footer-safe: calc(var(--footer-h) + 28px + env(safe-area-inset-bottom)); }
}


.header{
  position: sticky; top: 0; z-index: 1000;
  background: linear-gradient(0deg,#eaf9f0,#dcf6e6);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  border-bottom: 1px solid var(--mid-gray);
  backdrop-filter: saturate(1.2) blur(4px);
}
.header-inner{
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px;
}
.brand{ display:flex; align-items:center; gap:12px; color:inherit; }
.brand img{ height:42px; width:auto; display:block; }
.brand .title{ font-weight:700; letter-spacing:.2px; font-size:18px; }
.nav{ margin-left:auto; display:flex; align-items:center; gap:10px; }


.menu{ display:flex; gap:4px; list-style:none; margin:0; padding:0; }
.menu > li{ position:relative; }
.menu > li.right > .dropdown{ left:auto; right:0; }


.menu > li > a,
.menu > li > button.menu-trigger{
  appearance:none; background:transparent; border:0;
  font:inherit; color:inherit; line-height:1;
  cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  font-weight:600; padding:10px 12px; border-radius:10px;
  transition: transform .06s ease, background .15s ease, box-shadow .15s ease;
}
.menu > li > a:hover,
.menu > li > button.menu-trigger:hover{ background: var(--lemon); }
.menu > li > a:active,
.menu > li > button.menu-trigger:active{ transform: translateY(1px); }
.menu > li > a:focus-visible,
.menu > li > button.menu-trigger:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(59,130,246,.28); }


#mainMenu > li.lang{
  position:relative;
  margin-right:12px;       
}


#mainMenu > li.lang .lang-btn{
  display:inline-flex; align-items:center; gap:.45rem;
  min-height:36px; padding:0 .85rem; border-radius:9999px;
  font-size:.95rem; font-weight:600; line-height:1;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:
    0 1px 2px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter:saturate(160%) blur(6px);
  transition:background .2s ease, transform .06s ease, box-shadow .2s ease;
  cursor:pointer;
}
#mainMenu > li.lang .lang-btn:hover{ transform:translateY(-1px); }
#mainMenu > li.lang .lang-btn:focus-visible{
  outline:0;
  box-shadow:
    0 0 0 2px rgba(0,0,0,.10),
    0 0 0 4px rgba(60,190,110,.25);  
}
#mainMenu > li.lang .lang-btn .flag{ font-size:1.05em; }
#mainMenu > li.lang .lang-btn .abbr{ letter-spacing:.02em; }


#mainMenu > li.lang .lang-btn::after{
  content:'\25BE'; font-size:.8em; margin-left:.15rem; opacity:.7; transition:transform .15s ease;
}
#mainMenu > li.lang.open .lang-btn::after{ transform:rotate(180deg); }


#mainMenu > li.lang.open .lang-btn{
  background:rgba(255,255,255,.92);
  border-color:rgba(0,0,0,.10);
  box-shadow:
    0 6px 18px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.9);
}


#mainMenu > li.lang .dropdown{
  display:none; position:absolute; right:0; top:calc(100% + .55rem);
  min-width:200px; padding:.35rem;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.8) inset;
  z-index:50;
}
#mainMenu > li.lang.open > .dropdown{ display:block; }


#mainMenu > li.lang .lang-dropdown a{
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem .9rem; border-radius:.55rem;
  font-weight:600; text-decoration:none;
  color:inherit;
}
#mainMenu > li.lang .lang-dropdown a:hover{
  background:rgba(0,0,0,.04);
}
#mainMenu > li.lang .lang-dropdown a.active{
  background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.02));
  position:relative;
}
#mainMenu > li.lang .lang-dropdown a.active::before{
  content:'\2713'; position:absolute; right:.7rem; opacity:.85;
}


@media (max-width:800px){
  #mainMenu > li.lang{ margin: .25rem 0; }
  #mainMenu > li.lang .lang-btn{ width:100%; justify-content:center; }
  #mainMenu > li.lang .dropdown{
    position:static; min-width:auto; padding:.25rem 0;
    border:0; border-radius:10px; box-shadow:none; background:transparent;
  }
  #mainMenu > li.lang .lang-dropdown a{ padding:.65rem; }
}


.menu > li > button.menu-trigger::after{
  content:"\25BE"; font-weight:600; transform-origin:center; transition: transform .15s ease;
}
.menu li.open > button.menu-trigger::after{ transform: rotate(180deg); }


.dropdown{
  position:absolute; top: calc(100% + 6px); left: 0;
  min-width: 200px; padding: 8px;
  background: #fff; border: 1px solid var(--mid-gray);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.08);
  display: none;
}
.menu li.open > .dropdown{ display:block; }
.dropdown a{
  display:block; padding:10px; border-radius:8px; color:inherit; text-decoration:none; font-weight:600;
}
.dropdown a:hover{ background: var(--baby-lime); }
.dropdown .menu-sep{
  height: 1px; margin: 6px 8px;
  background: linear-gradient(90deg, transparent, var(--mid-gray), transparent); opacity: .9;
}
.dropdown .menu-label{
  display:block; padding:6px 10px 2px; font-size:12px; letter-spacing:.06em; color:#475569; text-transform:uppercase;
}
.menu > li.sep{
  width:1px; height:18px; background:rgba(0,0,0,.18);
  align-self:center; margin:0 8px; border-radius:1px;
}


#menuBackdrop{ position: fixed; inset: 0; background: rgba(0,0,0,.2); display: none; z-index: 999; }
#menuBackdrop.show{ display:block; }
@media (max-width: 800px){
  .menu{
    position: fixed; left: 12px; right: 12px;
    max-height: calc(100vh - 96px);
    overflow: auto; flex-direction: column; gap: 6px; padding: 10px;
    background:#fff; border:1px solid var(--mid-gray); border-radius:14px;
    box-shadow:0 14px 36px rgba(0,0,0,.12);
    display: none; z-index: 1000;
  }
  .menu.show{ display:flex; }


  .menu li.open > .dropdown{ position: static; display: block; box-shadow: none; border: 0; padding: 4px 0; background: transparent; min-width: 0; }
  .dropdown a{ padding:10px 12px; }
  .menu > li.sep{ display:none; }
}
.menu > li.right{ margin-left:auto; }


.main{ flex:1; }
.main-inner{ max-width:960px; margin:0 auto; padding: 0px 0px 16px; }
main.content,
.main{
  position: absolute;
  top: var(--menu-h);
  left: 0; right: 0;
  bottom: var(--footer-h);  
  overflow: auto;
  padding: 16px 0 16px;
  min-height: 0;
}


footer.footer{
  position: fixed; left: 0; right: 0; bottom: 0;
  min-height: var(--footer-h);
  z-index: 900;
  display:flex; align-items:center;
  border-top:1px solid var(--mid-gray);
  background: linear-gradient(0deg, var(--baby-green), var(--baby-lime));
}


body{
  padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom));
}


.footer-inner{
  max-width:1100px; margin:0 auto; width:100%;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-size:14px; flex-wrap:wrap; text-align:center;
}
.footer-links{ flex:1; min-width:200px; }
.footer-cta{ flex-shrink:0; }


@media (max-width: 600px){
  footer.footer{
    position: static;          
    min-height: auto;
  }
  body{ padding-bottom: 0; }   
  .footer-inner{ flex-direction:column; gap:8px; font-size:13px; padding-bottom:12px; }
  .footer-links{ order:2; line-height:1.4; }
  .footer-cta{ order:1; }
}


@media (max-width: 600px){


  body{
    overflow: auto;                  
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;               
  }


  .main, main.content{
    position: static;                
    top: auto; right: auto; bottom: auto; left: auto;
    overflow: visible;               
    min-height: auto;
    padding: 16px;                   
  }


  footer.footer{
    position: static;                
    margin-top: auto;                
    min-height: auto;
  }


  .footer-inner{ flex-direction: column; gap: 8px; font-size: 13px; padding-bottom: 12px; }
  .footer-links{ order: 2; line-height: 1.4; }
  .footer-cta{ order: 1; }
}


.only-mobile { display: none; }
@media (max-width: 800px){ .only-mobile{ display:inline-flex; align-items:center; } }


.acc-trigger { display:inline-flex; align-items:center; gap:8px; }
.acc-avatar  { width:24px; height:24px; border-radius:50%; object-fit:cover; border:1px solid var(--mid-gray); }
.acc-avatar.lg { width:36px; height:36px; }
.acc-label   { font-weight:700; }


.dropdown{
  position:absolute; top:calc(100% + 6px); left:0;
  width:auto; min-width:260px; max-width:360px;
  max-height:60vh; overflow:auto;
  padding:6px; background:#fff; border:1px solid var(--mid-gray);
  border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,.08);
  display:none; z-index:1002;
}
.menu li.open > .dropdown{ display:block; }
.menu > li.right > .dropdown{ left:auto; right:0; }


.drop-grid{ display:block; }
.drop-grid a{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:12px 14px; border-radius:8px;
  white-space:nowrap; line-height:1.25;
  color:inherit; text-decoration:none; font-weight:600;
}
.drop-grid a + a{ border-top:1px solid color-mix(in srgb, var(--mid-gray) 60%, #fff 40%); }
.drop-grid a:hover{ background: var(--baby-lime); }
.drop-grid a:focus-visible,
#mainMenu > li.lang .lang-dropdown a:focus-visible,
.account-panel .logout-link:focus-visible{
  outline:0;
  background:var(--baby-lime);
  box-shadow:0 0 0 3px rgba(59,130,246,.24);
}


.dropdown .menu-sep{
  height:1px; margin:8px 6px;
  background:linear-gradient(90deg, transparent, var(--mid-gray), transparent);
  opacity:.9;
}


.account-panel{ min-width:260px; }
.account-panel .account-head{ display:flex; align-items:center; gap:10px; padding:2px 6px 8px; }
.account-panel .acc-name{ font-weight:800; }
.account-panel .account-links a{ padding:10px 8px; }
.account-panel .logout-form{ padding:4px 6px; }
.account-panel .logout-link{
  appearance:none; background:transparent; border:0; padding:8px;
  font-weight:700; color:#b42318; border-radius:8px; cursor:pointer;
}
.account-panel .logout-link:hover{ background:#fee4e2; }

 
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}

summary{
  cursor:pointer;
}


@media (max-width: 800px){
  .menu{
    position:fixed; left:12px; right:12px;
    max-height:calc(100vh - 96px);
    overflow:auto; display:none; z-index:1000;
    background:transparent; border:0; box-shadow:none; padding:0; gap:10px;
    flex-direction:column;
  }
  .menu.show{ display:flex; }
  .menu > li.right{ margin-left:0; }          
  .menu > li{
    width:100%; background:#fff; border:1px solid var(--mid-gray);
    border-radius:14px; overflow:hidden;
  }
  .menu > li > a,
  .menu > li > button.menu-trigger{
    width:100%; justify-content:space-between; padding:12px 14px;
  }
  .menu li.open > .dropdown{
    position:static; display:block; border:0; box-shadow:none; background:transparent;
    width:100%; max-width:none; max-height:none; padding:0 6px 8px;
  }
  .drop-grid{ display:block; }
  .drop-grid a{ padding:12px 12px; }
  .drop-grid a + a{ border-top:1px solid color-mix(in srgb, var(--mid-gray) 65%, #fff 35%); }
}