@charset "UTF-8";

/* =========================
   Reset
   ========================= */
*{margin:0;padding:0;border:0;outline:0;box-sizing:border-box;}
:focus{outline:0;}
a{text-decoration:none;color:#3496a7;}
a:hover{color:#1c6b76;}
h1,h2,h3,h4,h5,h6{font-weight:300;margin-bottom:.5em;line-height:1.2125em;}
h1{font-size:1.1rem;color:#1f6f00;margin:12px 0;}
h2{font-size:.9rem;text-align:center;color:#7f8c8d;}
h3{color:#f1c40f;font-size:1.2rem;margin:8px 0;}
hr{border-top:1px solid #ddd;margin:1.25em 0;height:0;}

/* =========================
   Base
   ========================= */
html{
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  font-weight:400;
  font-size:clamp(15px, 0.28vw + 14.1px, 17px);
  line-height:1.6;
  color:#252f34;
  height:100%;
  text-shadow:none;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  position:relative;
  min-height:100%;
  min-height:100dvh;
  height:auto;
  margin:0;
  overflow-x:hidden;
  background-color:#f8f7f0;
  z-index:0;
  display:flex;
  flex-direction:column;
}
/* fixed background */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:url("../img/bkg-green.svg") center/cover no-repeat;
  z-index:-1;
  pointer-events:none;
}

/* container */
.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 1rem;
}

/* =========================
   Header + Nav
   ========================= */
.maintenance-banner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.35rem .75rem;
  width:100%;
  padding:.55rem 1rem;
  background:#d68910;
  color:#1c1404;
  font-size:.95rem;
  font-weight:700;
  text-align:center;
  line-height:1.35;
}
.maintenance-banner a,
.maintenance-banner .maintenance-banner-link{
  color:#1c1404;
  text-decoration:underline;
  font-weight:800;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  font:inherit;
}
.maintenance-banner a:hover,
.maintenance-banner .maintenance-banner-link:hover{
  color:#3b2200;
}
.access-banner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.35rem .75rem;
  width:100%;
  padding:.55rem 1rem;
  font-size:.95rem;
  font-weight:700;
  text-align:center;
  line-height:1.35;
}
.access-banner-paid{
  background:#dbeafe;
  color:#1e3a5f;
}
.access-banner-allin{
  background:#fde68a;
  color:#78350f;
}

/* Global Site News announcement (below header) */
.site-news-banner{
  width:100%;
  background:linear-gradient(180deg,#f3fbf7 0%,#eaf8f1 100%);
  border-bottom:1px solid #cfe8da;
}
.site-news-banner__inner{
  width:100%;
  max-width:var(--ieg-content,1100px);
  margin:0 auto;
  padding:.65rem 1rem;
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  box-sizing:border-box;
}
.site-news-banner__icon{
  flex:0 0 28px;
  width:28px;
  height:28px;
  margin-top:2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#108143;
}
.site-news-banner__icon svg{
  width:20px;
  height:20px;
}
.site-news-banner__content{
  flex:1 1 auto;
  min-width:0;
}
.site-news-banner__label{
  margin:0;
  color:#0f6f3b;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.site-news-banner__title{
  margin:.15rem 0 .35rem;
  color:#15201a;
  font-size:.95rem;
  font-weight:700;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.site-news-banner__link{
  color:#108143;
  font-size:.85rem;
  font-weight:750;
  text-decoration:none;
}
.site-news-banner__link:hover{
  text-decoration:underline;
}
.site-news-banner__link:focus-visible,
.site-news-banner__close:focus-visible{
  outline:2px solid #108143;
  outline-offset:2px;
}
.site-news-banner__close{
  flex:0 0 auto;
  width:32px;
  height:32px;
  margin-top:-2px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#3d5248;
  font-size:1.35rem;
  line-height:1;
  cursor:pointer;
}
.site-news-banner__close:hover{
  background:rgba(16,129,67,.1);
  color:#0f6f3b;
}
@media (max-width:640px){
  .site-news-banner__inner{
    padding:.7rem .85rem;
  }
  .site-news-banner__title{
    font-size:.9rem;
  }
}

/* Site chrome only — do not style content <header> (e.g. .notes-read__head). */
body > header{
  background-color:rgba(7, 32, 24, .72);
  position:sticky;
  top:0;
  z-index:20;
  width:100%;
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
}
#header{
  min-height:3.5rem;
  display:flex;
  align-items:center;
  padding-top:env(safe-area-inset-top);
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  gap:1rem;
  position:relative;
}

#logo{
    display:block;
    width:260px;
    height:45px;
    flex:0 0 260px;

    background-image:url("../img/logo.png");
    background-repeat:no-repeat;
    background-position:left center;
    background-size:contain;

    padding:0;
    margin:0;
}

nav{position:relative;}
#top-nav{
  display:flex;
  gap:1rem;
  list-style:none;
}
#top-nav li a{
  display:flex;
  align-items:center;
  text-transform:uppercase;
  font-size:15px;
  letter-spacing:.02em;
  color:#f5f5f5;
  padding:.55rem .7rem;
  min-height:44px;
  border-radius:8px;
  position:relative;
}
#top-nav li a:hover{background:rgba(255,255,255,.05);}
#top-nav li a.active{background:rgb(34 50 55);color:#fff;}

.top-nav-right{display:flex;align-items:center;}
#top-nav-desktop{
  display:flex;
  align-items:center;
  gap:.75rem;
  list-style:none;
}
#top-nav-desktop li a{
  display:flex;
  align-items:center;
  color:#fff;
  padding:.55rem .7rem;
  min-height:44px;
  border-radius:8px;
}
#top-nav-desktop li a:hover{background:rgba(255,255,255,.08);}

#profile a.logmeout{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  background:url("../img/hd-logout.png") center/18px 18px no-repeat;
}

/* mobile header controls */
.header-buttons,.top-nav-toggle{display:none;}
#top-nav-mobile{display:none;list-style:none;}

/* =========================
   Wrapper layout (DESKTOP)
   - equal height columns
   - no gap
   ========================= */
/* Base: single-column layout */
#wrapper{
  width: 100%;
  max-width: 1200px;
  margin: 6px auto 1rem;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

/* make the menu fill the sidebar properly */
#wrapper > aside #side_menu,
#wrapper > aside .list-container,
#wrapper > aside .nav-ul{
  width:100%;

}

#wrapper > aside .nav-ul{
  list-style:none;
  font-size:.8rem;
}

#wrapper > aside .nav-ul li a{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
  width:100%;
  min-height:44px;
  padding: 10px 12px;
  color:#0a0a0a;
  border-left:1px solid #f48225;
  border-bottom:1px solid #d8dcdd;
  text-transform:uppercase;
}

#wrapper > aside .nav-ul li a i{
  margin-left: auto;
  flex: 0 0 auto;
  min-width: 1.4em;
  text-align: right;
  font-size: .75rem;
  font-style: normal;
  color:#5d6d67;
  background: #ecf0f1;
  border-radius: 4px;
  padding: 1px 6px;
}

#wrapper > aside .nav-ul li a:hover,
#wrapper > aside .nav-ul li a.active{
  color:#c0392b;
}

/* 2-column mode ONLY when aside exists and has content */
#wrapper:has(> aside:not(:empty)){
  flex-direction: row;
  align-items: stretch; /* equal height columns */
  flex-wrap: nowrap;
  gap: 0;               /* ✅ remove space between aside and section */
}

/* Sidebar column */
#wrapper:has(> aside:not(:empty)) > aside{
  width: 230px;
  flex: 0 0 230px;

  display: flex;            /* ✅ so inner wrappers can stretch */
  flex-direction: column;
  align-self: stretch;      /* (safe) */
  background-color: #ecf0f1;         /* ✅ makes equal height visible */
}

/* Make sidebar inner containers stretch full height */
#wrapper:has(> aside:not(:empty)) > aside #side_menu,
#wrapper:has(> aside:not(:empty)) > aside .list-container{
  flex: 1 1 auto;
  min-height: 0;
}

/* Main content column */
#wrapper:has(> aside:not(:empty)) > section{
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

/* content */
#wrapper > section{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
}


/* =========================
   Mobile (<=1024px)
   ========================= */
@media (max-width:1024px){
  #logo{font-size:18px;}

  .top-nav-right,#top-nav-desktop{display:none;}

  .header-buttons{
    display:flex;
    align-items:center;
    gap:10px;
    margin-left:auto;
  }
  .top-nav-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:24px;
    color:#fff;
    line-height:1;
    user-select:none;
    width:44px;
    height:44px;
    border-radius:8px;
  }
  #top-nav-mobile{
    display:flex;
    align-items:center;
    gap:10px;
  }
  #top-nav-mobile li a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    padding:10px 12px;
    min-height:44px;
    border-radius:8px;
    font-size:14px;
    white-space:nowrap;
  }

  /* dropdown main nav */
  nav{position:static;}
  nav #top-nav{
    position:absolute;
    top:3.5rem;
    left:0;right:0;
    background:rgb(105,149,124);
    display:none;
    flex-direction:column;
    gap:6px;
    padding:10px;
    z-index:9999;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
  }
  nav #top-nav.show{display:flex;}

  /* wrapper becomes single column */
  #wrapper{flex-direction:column;}

  /* off-canvas sidebar */
  #wrapper > aside{
    position:fixed;
    top:3.5rem;
    left:0;
    height:calc(100vh - 3.5rem);
    max-width:80%;
    z-index:1000;
    transform:translateX(-100%);
    transition:transform .3s ease;
    box-shadow:2px 0 6px rgba(0,0,0,.2);
    background:#fff;
  }
  #wrapper > aside.open{transform:translateX(0);}

  #wrapper > section{width:100%;}
}

/* ========= MOBILE SLIDING SIDEBAR ========= */
@media (max-width: 1024px) {

    /* Wrapper becomes column for normal flow */
    #wrapper { flex-direction: column; }

    /* Sidebar becomes off-canvas, but ONLY the wrapper sidebar */
    #wrapper > aside {
        position: fixed;
        top: 3.5rem; /* below the header height */
        left: 0;
        height: calc(100vh - 3.5rem);
        width: 230px;
        max-width: 80%;
        background: #ffffff;
        z-index: 1000;
        transform: translateX(-100%); /* hide it to the left */
        transition: transform 0.3s ease;
        box-shadow: 2px 0 6px rgba(0,0,0,0.2);
    }

    /* When .open is added, slide into view */
    #wrapper > aside.open { transform: translateX(0); }

    /* Content section full-width on mobile (ONLY wrapper content) */
    #wrapper > section { width: 100%; }

    /* Dark backdrop behind the sidebar */
    #sidebar-backdrop {
        position: fixed;
        inset: 3.5rem 0 0 0; /* from below the header downwards */
        background: rgba(0, 0, 0, 0.4);
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    #sidebar-backdrop.show {
        opacity: 1;
        pointer-events: auto;
    }
}

#sidemenu-toggle { display: inline-block; }

/* show on large screens (e.g. ≥ 992px) */
@media (min-width: 992px) {
    #sidemenu-toggle { display: none; }
}




/* =========================
   Misc
   ========================= */
nav ul,#top-nav{list-style:none;}
blockquote,q{quotes:none;}
.clearfix{clear:both;min-height:5px;}

/* =========================
   Footer (dark multi-column)
   ========================= */

#footer{
  margin-top: auto;
  padding: 5px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background: #053b2a;                /* deep green base */
  color: rgba(255,255,255,.75);
  border-top: 6px solid #ffffff;      /* white bar like screenshot */
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  width: 100%;
}

/* soft curved/gradient shapes */
#footer::before{
  content:"";
  position:absolute;
  inset:-60px -120px auto -120px;
  height:220px;
  background:
    radial-gradient(900px 240px at 25% 0%, rgba(0,0,0,.25), transparent 60%),
    radial-gradient(900px 260px at 70% 40%, rgba(0,0,0,.20), transparent 65%),
    radial-gradient(800px 260px at 90% 0%, rgba(255,255,255,.06), transparent 60%);
  pointer-events:none;
}

#footer .footer-inner{
  position: relative;
  padding: 18px 0 22px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

/* headings like screenshot (small + bright) */
#footer h4{
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  text-shadow: none; /* your global text-shadow is heavy */
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.15);
}

/* links list */
#footer ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap: 8px;
}

#footer a{
  color: rgba(255,255,255,.75);
  text-decoration:none;
  font-size: 14px;
  text-shadow: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

#footer a:hover{
  color: #7CFFB0; /* mint highlight */
}

/* copyright line */
#footer .copyright{
  margin-top: 8px;
  color: rgba(255,255,255,.55);
  font-size: 12px;
}

/* Mobile: stack to 2 columns then 1 */
@media (max-width: 900px){
  #footer .footer-inner{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 16px 0 18px;
  }
}
@media (max-width: 520px){
  #footer .footer-inner{
    grid-template-columns: 1fr;
  }
}
/* =========================
   page Head
   ========================= */

.page_head{
  background: radial-gradient(900px 240px at 10% 0%, rgba(46, 204, 113, .14), transparent 55%),
              radial-gradient(800px 260px at 85% 0%, rgba(52, 152, 219, .12), transparent 60%),
              #fff;
  padding: 14px 16px 10px;
}

.page_head h1{
  margin:0 0 6px 0;
  font-size: 26px;
  color:#1f6f00;
}


/* =========================
   Rules / Page
   ========================= */
.page_head h4 {
    font-size: 16px;
    font-weight: 500;
    color: #5c5c5c;
}

.page_head .rules_wrap {
    display: flex;
    align-items: flex-start;
    gap: 3px;
}

.page_head .rules_wrap small {
    flex-shrink: 0;
    display: inline-block;
    margin-top: 2px;
    opacity: 0.3;
}

.page_head .rules_wrap .rules_text {
    flex: 1;
    display: inline-block;
}

/* =========================
   FAQ / Spoiler
   ========================= */
.page_head .faq_title {
    text-align: center;
    font-size: 26px;
}

.page_head h4 {
    font-size: 16px;
    font-weight: 500;
    color: #5c5c5c;
}

.page_head .faq_wrap {
    position: relative;
    background: #ffffff;
    border-radius: 3px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06);
    margin: 0 2px 2px 2px;
    overflow: hidden;
}

/* teal bar full height */
.page_head .faq_wrap::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
    background: #00a89b;
    border-radius: 0 6px 6px 0;
}

/* plus/minus icon on question, fixed at top */
.page_head .faq_wrap .faq_q {
    position: relative;
    padding: 7px 30px 7px 3px;
    font-size: 16px;
    color: #222;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.page_head .faq_wrap .faq_q small {
    flex-shrink: 0;
    display: inline-block;
    margin-top: 2px;
    opacity: 0.3;
}

.page_head .faq_wrap .faq_q .question-text {
    flex: 1;
    display: inline-block;
}

.page_head .faq_wrap .faq_q::after {
    content: "+";
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 22px;
}

.page_head .faq_wrap .faq_q.is-open::after { content: "-"; }

.page_head .faq_wrap .faq_q,
.page_head .faq_wrap .faq_a { padding-right: 40px; }

.page_head .faq_wrap .faq_a {
    display: none;
    padding: 0 45px 5px 5px;
    font-size: 14px;
    line-height: 1.7;
    color: #7c818e;
    border-top: 1px solid #f1f2f8;
}


/* =========================
   Pane / Box
   ========================= */
.pane {
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease-out;
    padding: 5px;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
    box-shadow: 0 1px 2px #c9cccd;
}

.pane > ul,
.pane > ol { padding-left: 28px; }

/* =========================
   404 Page
   ========================= */
.page_not_found { text-align: center; }

.page_not_found .title {
    font-size: 200px;
    font-weight: 900;
    letter-spacing: 10px;
    color: #e54c2a;
    text-shadow: 7px 6px 0 #dadada, 0 -1px 0 #dadada,
                 1px -1px 0 #dadada, -1px 1px 0 #dadada,
                 1px 1px 0 #dadada;
}

.page_not_found a { margin-top: 25px; }

/* =========================
   Index Page v4
   ========================= */

.pg_index_v4{
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  padding-bottom:16px;
  color:#5f5f5f;
}

/* Type */
.pg_index_v4 h1{
  margin:0 0 10px 0;
  color:#0aa300;
  font-size:1.9rem;
}
.pg_index_v4 h3{
  margin:0 0 10px 0;
  color:#0aa300;
}
.lead{ margin:0 0 12px 0; line-height:1.55; }
.micro{ margin:10px 0 0 0; font-size:.85rem; opacity:.85; }

/* Lists */
.bullets{ margin:0; padding-left:18px; line-height:1.6; }
.bullets li{ margin:6px 0; }

.gridList{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
}
.gridList li{
  padding:10px 12px;
  border-radius:12px;
  background:rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.05);
  font-weight:700;
  color:#4f4f4f;
}

/* Layout */
.hero_v4{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:16px;
  padding:16px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(10,163,0,.10), rgba(10,163,0,.02));
  align-items:center;
}

.cta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

/* Cards / rows */
.row_v4{
  display:grid;
  grid-template-columns:1fr 320px; /* keeps image column small */
  gap:14px;
  margin-top:14px;
  align-items:stretch;
}

.card_v4{
  padding:16px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 6px 16px rgba(0,0,0,.05);
}

.card_v4--inlineMedia{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  background:linear-gradient(180deg, rgba(10,163,0,.06), rgba(255,255,255,.9));
}

/* Image sizing (this is the key fix) */
.imgSmall{
  max-width:100%;
  height:auto;
  max-height:220px;          /* prevents huge hero image */
  object-fit:contain;
  display:block;
}

.imgInline{
  max-width:100%;
  height:auto;
  max-height:170px;          /* keeps images “inline” with content */
  object-fit:contain;
  display:block;
}

/* Final */
.final_v4{
  margin-top:14px;
  padding:16px;
  border-radius:14px;
  background:rgba(10,163,0,.06);
  border:1px solid rgba(0,0,0,.06);
}

/* Responsive */
@media (max-width: 900px){
  .hero_v4{ grid-template-columns:1fr; }
  .row_v4{ grid-template-columns:1fr; }
  .imgInline{ max-height:200px; }
  .gridList{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .gridList{ grid-template-columns:1fr; }
  .cta .btn,
  .btn-dock .btn,
  .page-404 .btn{ width:100%; }
}



/* =========================
   Profile style
   ========================= */

.auth-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 0;
}

.optional-mark{color:#d35400;font-weight:400;}
.field-hint{margin:.35rem 0 0;color:#5b6b64;font-size:.82rem;line-height:1.35;width:100%;}
.form-c:has(.suggest-box){flex-direction:column;align-items:stretch;}
.suggest-box{position:relative;width:100%;max-width:none;flex:1 1 100%;}
.suggest-box input.val{width:100%;max-width:none;box-sizing:border-box;}
.suggest-list{position:absolute;left:0;right:0;top:100%;z-index:40;background:#fff;border:1px solid #c5d4cc;border-radius:8px;box-shadow:0 8px 22px rgba(20,40,32,.12);max-height:220px;overflow:auto;margin-top:2px;}
.suggest-item{display:block;width:100%;text-align:left;background:none;border:0;padding:.55rem .75rem;cursor:pointer;}
.suggest-item:hover,.suggest-item:focus{background:#eef6f1;}
.suggest-create{font-weight:600;color:#0a6933;}

html.auth-open,
body.auth-open {
  overflow: hidden !important;
  height: 100%;
}

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 10, 6, 0.88);
  overflow: hidden;
}

.auth-overlay.is-page {
  position: relative;
  inset: auto;
  z-index: 1;
  background: transparent;
  padding: 8px 0 24px;
  overflow: visible;
}

.auth-modal {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(320px, 1fr);
  grid-template-rows: minmax(0, 1fr);
  width: min(900px, 100%);
  max-height: calc(100dvh - 48px);
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.auth-overlay.is-page .auth-modal {
  max-height: calc(100dvh - 140px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
}

.auth-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 20;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  color: #222;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.auth-overlay.is-page .auth-close { display: none; }

.auth-close:hover {
  background: rgba(0, 0, 0, 0.15);
}

.auth-left {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 48px;
  background: linear-gradient(135deg, #b9e4c4, #d8efbf);
}

.auth-left-content {
  max-width: 320px;
  text-align: center;
}

.auth-left h2 {
  margin: 0 0 12px;
  color: #31852b;
  font-size: 32px;
  font-weight: 500;
}

.auth-left p {
  margin: 0 0 26px;
  color: #5f6e63;
}

.auth-modal.is-signin .auth-left-signup,
.auth-modal:not(.is-signin) .auth-left-signin { display: none; }

.auth-right {
  min-width: 0;
  min-height: 0;
  background: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.auth-form-wrapper {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 38px 40px 42px;
}

.auth-form-wrapper > h2,
.auth-panel > h2 {
  margin: 0 0 20px;
  color: #19251d;
  font-size: 26px;
  font-weight: 700;
}

.auth-panel.signin-panel,
.auth-panel.forgot-panel { display: none; }
.auth-modal.is-signin .signup-panel { display: none; }
.auth-modal.is-signin .signin-panel { display: block; }
.auth-modal.is-forgot .signup-panel,
.auth-modal.is-forgot .signin-panel { display: none; }
.auth-modal.is-forgot .forgot-panel { display: block; }

.trade-card,
.auth-form-wrapper .trade-reg {
  margin: 0 0 20px;
  padding: 0;
}

.auth-form-wrapper .trade-reg-label {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: #2f4a32;
}
.auth-form-wrapper .trade-reg-auto .trade-reg-label { display: none; }

.trade-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.trade-reg-card,
.trade-card {
  display: block;
  margin-bottom: 8px;
  padding: 14px 16px;
  border: 1px solid #5ba45a;
  border-radius: 10px;
  background: #f8fff8;
  text-align: left;
}

.trade-reg-card.is-off {
  opacity: 0.7;
  cursor: not-allowed;
  background: #f6f6f6;
  border-color: #c8d6c9;
}

.trade-reg-card input[type="radio"] {
  width: auto;
  height: auto;
  margin-right: 6px;
}

.paid-badge,
.trade-reg-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e6f7e5;
  color: #358536;
  font-size: 12px;
  font-weight: 700;
}

.trade-reg-card p,
.trade-card p {
  margin: 0;
  color: #536158;
  font-size: 13px;
  line-height: 1.45;
}

.trade-reg-note { display: none; }
.trade-reg-closed {
  background: #fff8e1;
  border-radius: 10px;
  padding: 10px 12px;
}
.trade-reg-grid { display: grid; gap: 8px; }

.signup-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.signup-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  color: #303b33;
  font-size: 13px;
  font-weight: 600;
}

.signup-form input,
.signup-form select {
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 13px;
  border: 1px solid #b7c0b8;
  border-radius: 7px;
  background: #fff;
  color: #222;
  font: inherit;
  outline: none;
  box-sizing: border-box;
}

.signup-form label:has(input[type="password"]) {
  overflow: hidden;
}

.signup-form input::placeholder {
  color: #6f776f;
}

.signup-form input:focus,
.signup-form select:focus {
  border-color: #24a94b;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(36, 169, 75, 0.12);
}

.field-help {
  margin: -5px 0 2px;
  color: #777;
  font-size: 12px;
  line-height: 1.4;
}

.terms_field {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  font-weight: 500;
}

.terms_field input {
  width: auto;
  height: auto;
  margin-top: 3px;
}

.auth-form-wrapper a.trigger-forgot,
.auth-form-wrapper a.back-to-login-link {
  color: #0061cc;
  font-size: 14px;
  font-weight: 600;
}

.auth-primary {
  border: 0;
  border-radius: 7px;
  padding: 11px 20px;
  background: #17ad4b;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 5px 12px rgba(23, 173, 75, 0.22);
}

.auth-primary:hover {
  background: #139940;
}

.auth-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 5px;
}

.mobile-switch {
  display: none;
  margin-top: 8px;
  text-align: center;
  font-size: 15px;
}

.mobile-switch a {
  color: #0061cc;
  font-weight: 600;
}

@media (max-width: 800px) {
  .auth-overlay {
    align-items: flex-start;
    padding: 14px;
  }

  .auth-overlay.is-page { padding: 0 0 16px; }

  .auth-modal {
    display: block;
    width: 100%;
    max-height: none;
    margin: 20px auto;
  }

  .auth-left {
    min-height: auto;
    padding: 30px 24px;
  }

  .auth-left h2 { font-size: 26px; }

  .auth-right { overflow: visible; }

  .auth-form-wrapper {
    max-width: none;
    padding: 30px 22px 32px;
  }

  .mobile-switch { display: block; }
}

@media (min-width: 801px) and (max-height: 720px) {
  .auth-modal { max-height: calc(100vh - 24px); }
  .auth-left { min-height: 0; padding: 28px; }
  .auth-form-wrapper {
    padding-top: 26px;
    padding-bottom: 26px;
  }
}

label { font-size: 14px; }
	
	
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
}


/* =========================
   Profile Page
   ========================= */
/* Container */
.profile {
  padding: 28px 16px;
  display: flex;
  justify-content: center;
}

/* Card */
.profile-card {
  width: min(980px, 100%);
  border-radius: 18px;
  background: #fff;
  box-shadow:
    0 10px 30px rgba(16, 24, 40, 0.08),
    0 2px 8px rgba(16, 24, 40, 0.06);
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, 0.06);
}

/* Hero (top) */
.profile-hero {
  padding: 26px 26px 18px;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  background:
    radial-gradient(900px 240px at 10% 0%, rgba(46, 204, 113, .14), transparent 55%),
    radial-gradient(800px 260px at 85% 0%, rgba(52, 152, 219, .12), transparent 60%),
    #fff;
}

.profile-avatar {
  width: 110px;
  height: 110px;
  border-radius: 999px;
  padding: 4px;
  background: linear-gradient(135deg, rgba(46, 204, 113, .9), rgba(52, 152, 219, .85));
  box-shadow: 0 10px 18px rgba(16, 24, 40, 0.12);
  align-self: start;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  background: #f5f7fa;
  display: block;
}

/* Text */
.profile-name {
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.profile-sub {
  margin: 8px 0 14px;
  font-size: 15px;
  color: #334155;
}

.muted {
  color: #64748b;
}

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
  font-weight: 600;
}

.chip--soft {
  background: rgba(46, 204, 113, 0.12);
  color: #0f6b3d;
}

/* Details row */
.profile-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.detail {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #334155;
  font-size: 14px;
}

.detail-ico {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.06);
}

.detail-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Stats grid */
.profile-grid {
  padding: 18px 26px 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.stat {
  border-radius: 14px;
  padding: 14px 14px;
  background: #f8fafc;
  border: 1px solid rgba(16, 24, 40, 0.06);
}

.stat-title {
  font-weight: 700;
  color: #0f172a;
  font-size: 14px;
  margin-bottom: 6px;
}

.stat-value {
  font-size: 13px;
  color: #334155;
}

.stat-muted {
  color: #64748b;
  font-size: 12px;
}

.stat-sep {
  margin: 0 6px;
  color: #cbd5e1;
}

/* Footer pills */
.profile-foot {
  padding: 12px 26px 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.pill {
  border-radius: 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(16, 24, 40, 0.08);
}

.pill-title {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 4px;
}

.pill-value {
  font-size: 13px;
  color: #0f172a;
  font-weight: 700;
}

.pill-note {
  margin-top: 6px;
  font-size: 12px;
  color: #475569;
  font-weight: 500;
  line-height: 1.35;
}

/* Responsive */
@media (max-width: 900px) {
  .profile-grid, .profile-foot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .profile-hero {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .profile-avatar {
    width: 92px;
    height: 92px;
  }
  .profile-name {
    font-size: 28px;
  }
  .profile-grid, .profile-foot {
    grid-template-columns: 1fr;
  }
  .detail-txt {
    white-space: normal;
  }
}

/* EDIT PAGE */
/* ===== Modern Profile Form ===== */
.panel {
  max-width: 980px;
  margin: 0 auto;
  padding: 22px;
  color: #0f172a;
}

.panel h1{
  margin: 0 0 8px 0;
  font-size: 28px;
  letter-spacing: -0.02em;
}

.panel p{
  margin: 0 0 18px 0;
  color: #475569;
  line-height: 1.55;
  font-size: 14px;
}

/* Avatar */
.UplAvatar{
  width: 110px;
  height: 110px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  border: 4px solid rgba(52,152,219,.18);
  box-shadow: 0 10px 18px rgba(16,24,40,.12);
  cursor: pointer;
}

.UplAvatar:hover{
  transform: translateY(-1px);
}



/* Responsive: stack labels over fields */
@media (max-width: 760px){
  .panel{
    padding: 16px;
    border-radius: 16px;
  }
  .form-wrap{
    grid-template-columns: 1fr;
  }
}





/* =========================
   Member Boxes
   ========================= */
.member-box-block {
    align-items: center;
    border-radius: 6px;
    cursor: default;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding: 5px;
    text-align: center;
}

.member-box-block .mem-box,
.member-box-block a.mem-box {
    background-color: #ecf0f1;
    border-radius: 6px;
    color: inherit;
    flex: 0 0 60px;
    margin: 5px;
    padding: 6px 10px;
    white-space: nowrap;
}

.member-box-block a.mem-box:hover {
    background-color: #efefcc;
    box-shadow: 0 0 3px rgba(0,0,0,.5);
}

.mem-box .caption2 {
    color: #006c86;
    margin-right: 7px;
}

/* =========================
   Premium Table
   ========================= */
.table-premium {
    border-collapse: collapse;
    margin: 10px 0 30px;
    width: 100%;
}

.table-premium thead { background-color: #f3f3f3; }

.table-premium thead th { padding: 8px; }

.table-premium th.base,
.table-premium th.gold,
.table-premium th.premium {
    background-color: #ecf0f1;
    border: 3px solid #fff;
    border-radius: 8px;
    font-weight: 400;
    padding: 6px 8px;
    text-align: center;
}

.table-premium th.gold {
    background-color: #f39c12;
    color: #fff;
}

.table-premium th.premium {
    background-color: #3498db;
    color: #fff;
}

.table-premium td {
    border-bottom: 1px solid #ecf0f1;
    padding: 6px 4px;
    text-align: left;
}

.table-premium td.answer {
    padding: 6px 8px;
    text-align: center;
}

@media (max-width: 576px) {
    .table-premium th.base,
    .table-premium th.gold,
    .table-premium th.premium { padding: 6px 2px; }
}

@media (max-width: 375px) {
    .table-premium th.base,
    .table-premium th.gold,
    .table-premium th.premium { word-break: break-all; }
}

@media (max-width: 576px) {
    .table-premium tr td:first-of-type { padding: 0; }
}

@media (max-width: 375px) {
    .table-premium tr:nth-of-type(2) td:nth-of-type(3),
    .table-premium tr:nth-of-type(2) td:nth-of-type(4),
    .table-premium tr:nth-of-type(2) td:nth-of-type(5) {
        width: 40px;
        word-break: break-word;
    }
}

@media (max-width: 576px) {
    .table-premium td.answer { padding: 4px 2px; }
}

.table-premium td.answer-no,
.table-premium td.answer-yes {
    color: #27ae60;
    font-size: 1rem;
    text-align: center;
}

.table-premium td.answer-no i,
.table-premium td.answer-yes i { margin: 0 auto; }

.table-premium td.answer-no { color: #c0392b; }

.tnumber {
    background-color: #16a085;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    min-width: 23px;
    padding: 2px 4px;
    text-align: center;
}

@media (max-width: 576px) { .tnumber { display: none; } }

/* Premium decorations */
.sale-gold-icon,
.sale-premium-icon {
    background: url(../img/hicon5-big.png) no-repeat 50%;
    background-size: contain;
    display: block;
    height: 70px;
    margin: 5px 10px;
    width: 75px;
}

.sale-premium-icon { margin: 10px 15px; }

.sale-gold-icon {
    background: url(/style/pic/hicon4-big.png) no-repeat 50%;
    background-size: contain;
}

.sale-premium-label {
    color: #fff;
    display: block;
    font-size: 1rem;
    margin: 15px -10px 14px;
    padding: 7px 0;
}

.plc-0 {
    background: linear-gradient(90deg,#f39c12,#f1ba62,#f39c12);
    text-shadow: 1px 1px 1px #c77f0c;
}
.plc-1 {
    background: linear-gradient(90deg,#16a085,#1ec9a7,#16a085);
    text-shadow: 1px 1px 1px #107662;
}
.plc-2 {
    background: linear-gradient(90deg,#2980b9,#3fa9ef,#2980b9);
    text-shadow: 1px 1px 1px #1f628e;
}
.plc-3 {
    background: linear-gradient(90deg,#8e44ad,#bd70dc,#8e44ad);
    text-shadow: 1px 1px 1px #6b3382;
}
.plc-4 {
    background: linear-gradient(90deg,#34495e,#648cb1,#34495e);
    text-shadow: 1px 1px 1px #212e3b;
}

.img-premium {
    background: url(../img/img-premium.png) no-repeat 50%;
    background-size: contain;
    display: block;
    height: 150px;
    margin: 30px auto;
    width: 100%;
}

ul.point {
    line-height: 1.6;
    list-style: none;
    margin: 15px 0 15px 15px;
}

ul.point li {
    background: url(../img/point-gr.png) no-repeat left 9px;
    background-size: 8px 8px;
    margin: 6px 0;
    padding-left: 18px;
}

.sale-premium-price {
    display: block;
    font-size: 1rem;
    min-height: 60px;
}

.sale-premium-price .currency-hint {
    color: #ecf0f1;
    font-size: 75%;
}

.sale-premium-price .save {
    color: #27ae60;
    display: block;
    font-size: .7rem;
}

.sale-premium-pricefree {
    display: block;
    font-size: .8rem;
    height: 60px;
    white-space: normal;
}

/* =========================
   Stat Table
   ========================= */
.statable {
    border-spacing: 0;
    margin: 0 0 8px 0;
    padding: 0;
    width: 100%;
    border-collapse: collapse;
}

.statable td,
.statable th {
    padding: 10px;
    vertical-align: middle;
}

.statable td .full,
.statable td .fullb {
    width: 100%;
    max-width: 100%;
    resize: vertical;
}

.statable td:first-child { line-height: 22px; }

.statable td + td {
    line-height: 22px;
    text-shadow: #fff 1px 1px 0;
}

/* =========================
   Zebra Table
   ========================= */
.zebr-table {
    margin: 0 0 40px 0;
    width: 100%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.zebr-table thead { color: #fff; }

.zebr-table tbody tr:nth-child(even),
.zebr-table thead tr.trzebra {
    background-color: rgba(101, 47, 238, 0.02);
}

.zebr-table tr td,
.zebr-table tr th { padding: 3px 7px; }

/* =========================
   Stat UL
   ========================= */
.stat-ul li {
    color: #858C94;
    padding: 8px 10px 8px 27px;
    border-bottom: 1px solid #e8e7e7;
}

.stat-ul li:hover { background: #f7f7f7; }
.stat-ul span { float: right; }

/* =========================
   Notes / Training
   ========================= */
   
   .page-title-full {
    background: #08A882;
    background-size: 38px auto;
    border-left: 5px solid #4caf50;
    text-shadow: 1px 1px 1px #1c718a;
	color: #fff;
	font-size:20px;
	padding-left: 15px
}

.nt_index {
    display: block;
    position: relative;
}

.padding {
	margin: 2px 10px;
}

.nt_index > form {
  /*  margin: 10px; */
}

.nt_index > .btn-group{
    display:flex; 
	justify-content:center;
    box-shadow: rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
	padding: 8px 0;
}

.nt_index > .page-title {
	color: #34495e;
    font-size: 1.2rem;
    font-weight: bold;
     text-shadow: 1px 1px 2px rgba(0, 80, 100, .2);
    padding: 2px 10px;
	text-align: center;
}

.nt_index .ItemList {
	align-items: center;
    box-shadow: rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
	background: #fafffa;
    border-left: 4px solid #26bda7;
    border-radius: 6px;
    color: #34495e;
    margin-bottom: 15px;
    padding-left: 10px;
    text-align: left;
}

.nt_index > .ItemList > .content {
    line-height: 1.5;
    position: relative;
}
.nt_index > .ItemList > .content > .title {
    font-weight:600;
}

.nt_index > .ItemList > .content > a {
    display: inline;
    color: #272727;
    line-height: 25px;
}

.nt_index > .ItemList .content ol,
.nt_index > .ItemList .content ul { padding-left: 18px; }
.nt_index > .ItemList .content ol li::marker { font-weight: 700; }

.nt_index > .ItemList .content .id {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #cfc3c3 !important;
    width: 35px;
    height: 22px;
    text-align: center;
    padding: 3px 0;
    border-radius: 3px;
}

.nt_index > .ItemList > .content > a:hover { color: #08a882; }


.nt_index > .ItemList > .bottom{
  display:flex;
  align-items:center;
  gap:12px;
  border-top:1px dotted #dadada;
  width:100%;
  box-sizing:border-box;
}

/* LEFT / MID / RIGHT columns */
.nt_index > .ItemList > .bottom > .note-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  min-width:0;
}

.nt_index > .ItemList > .bottom > .note-mid{
  flex:1 1 auto;
  min-width:0;
}

.nt_index > .ItemList > .bottom > .note-mid .area{
  display:block;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis; /* prevents long categories breaking layout */
  opacity: .4;
}

.nt_index > .ItemList > .bottom > .note-right{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
}

/* separators */
.nt_index > .ItemList > .bottom > .sepa{
  width:1px;
  height:18px;
  background:#e5e5e5;
}

/* like block */
.nt_index .ItemList .bottom .note-left .likeblock{
  display:flex;
  align-items:center;
  gap:10px;
}

.nt_index .ItemList .bottom .note-left .likeblock .fa-thumbs-up{
  color: rgb(2, 134, 57);
}

.nt_index .ItemList .bottom .note-left .likeblock .fa-thumbs-down{
  color: rgb(172, 51, 38);
}

.nt_index > .ItemList > .bottom > .like-count{ min-width: 1ch; }

/* basic buttons 
.btn{
  text-decoration:none;
  padding:6px 10px;
  border:1px solid #ddd;
  border-radius:8px;
  font-size:14px;
  line-height:1;
}*/
.btn-edit{ background:#fff; }
.btn-remove{ background:#fff; border-color:#f2c0c0; }

/* MOBILE: stack so it fits on screen */
@media (max-width: 640px){
  .note-row{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }

  .note-mid .are{
    white-space:normal;   /* allow wrap on mobile */
    overflow:visible;
    text-overflow:clip;
  }

  .note-left,
  .note-right{
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
  }

  /* optional: hide vertical separators on mobile */
  .note-left .sepa{ display:none; }
}

/* ================================
   TASK VIEW – Single choice buttons
   ================================ */
/* Hide radios but keep accessibility */
.nt_index > .ItemList .content .single_choice_content input[type="radio"] {
    display: none;
}

/* Full-width button labels */
.nt_index > .ItemList .content .single_choice_content .box {
    display: block;
    width: 100%;
    padding: 8px 7px;
    margin-bottom: 6px;

    border: 1px solid #d0d5dd;
    background: #ffffff;

    cursor: pointer;
    transition: all 0.2s ease;
}

/* Layout inside button */
.nt_index > .ItemList .content .single_choice_content .plan {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nt_index > .ItemList .content .single_choice_content .item {
    min-width: 28px;
    height: 28px;

    border-radius: 50%;
    background: #f1f3f5;

    display: flex;
    align-items: center;
    justify-content: center;

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

.nt_index > .ItemList .content .single_choice_content .answer {
    font-size: 15px;
    color: #222;
}

/* Hover effect */
.nt_index > .ItemList .content .single_choice_content .box:hover {
    border-color: #7aa2ff;
    background: #f5f8ff;
}

/* ✅ Selected (checked) state */
.nt_index > .ItemList .content .single_choice_content input[type="radio"]:checked + .box {
    border-color: #4f6df5;
    background: #eef2ff;
}

.nt_index > .ItemList .content .single_choice_content input[type="radio"]:checked + .box .item {
    background: #4f6df5;
    color: #ffffff;
}

.nt_index > .ItemList .content .single_choice_content input[type="radio"]:checked + .box .answer {
    font-weight: 600;
}

/* Disabled state */
.nt_index > .ItemList .content .single_choice_content input[type="radio"]:disabled + .box {
    opacity: 0.6;
    cursor: not-allowed;
    background: #f5f5f5;
}

/* Optional: correct / wrong states if you use them */
.nt_index > .ItemList .content .single_choice_content .box.correct {
    border-color: #2ecc71;
    background: #eafaf1;
}

.nt_index > .ItemList .content .single_choice_content .box.wrong {
    border-color: #e74c3c;
    background: #fdecea;
}
/* Checked + completed = green checked style */
.nt_index > .ItemList .content
.single_choice_content
input[type="radio"]:checked + label.box.completed {
    border-color: #2ecc71;
    background: #eafaf1;
}

/* Circle (a, b, c, d) */
.nt_index > .ItemList .content
.single_choice_content
input[type="radio"]:checked + label.box.completed .item {
    background: #2ecc71;
    color: #ffffff;
}

/* Answer text */
.nt_index > .ItemList .content
.single_choice_content
input[type="radio"]:checked + label.box.completed .answer {
    font-weight: 600;
}


/* =========================
   task_spoiler for calculator and notes
   ========================= */
.nt_index  .spoiler{
  margin:10px auto;
  color:#2d2d2d;
  box-shadow: rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
}

/* 2 columns */
.nt_index .spoiler__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  align-items:start; /* stop stretching */
}

/* mobile stack */
@media (max-width:768px){
  .nt_index .spoiler__grid{ grid-template-columns:1fr; }
}

/* card */
.nt_index .spoiler__item{
  position:relative;
  background: #f5f5f5;
  border-radius:2px;
  overflow:hidden;
box-shadow: rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
}

/* OPEN: thin teal bar (1px) */
.nt_index .spoiler__item.is-open{
  box-shadow: rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
}

/* question */
.nt_index .spoiler__q{
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  cursor:pointer;

  position:relative;
  padding:10px 45px 10px 10px;
  font-size:16px;
  color:#222;

  display:flex;
  align-items:flex-start;
  gap:8px;
}

.nt_index .spoiler__text{ flex:1; }

/* plus / minus (tap area stays 30px and keeps teal background ALWAYS) */
.nt_index .spoiler__q::after{
  content:"+";
  position:absolute;
  top:0;
  right:0;

  width:30px;     /* ✅ stays 30px */
  height:40px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#00a89b;  /* ✅ teal block behind + / - */
  color:#fff;
  font-size:22px;

  border-radius:0 6px 0 0; /* optional: top-right match card */
}

.nt_index .spoiler__item.is-open > .spoiler__q::after { content:"-"; }

/* answer */
.nt_index .spoiler__a{
  display:none;
  padding:0 1px 12px 10px;
  font-size:14px;
  line-height:1.7;
  color:#7c818e;
  background: #fff;
  border-top:1px solid #f1f2f8;
}
.nt_index .spoiler__item.is-open .spoiler__a { display:block; }


/* Task detail */
.nt_index .detail{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap:12px;
  align-items:center;
  padding:10px;
  background:#fff;
  border-radius:8px;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}

/* left: avatar + name */
 .nt_index .detail .td-author{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  min-width:90px;
}
.nt_index .detail .td-avatar{
  width:50px;
  height:50px;
  max-width:50px;
  max-height:50px;
  border-radius:50%;
  object-fit:cover;
  display:block;
}
.nt_index .detail .td-name{
  font-weight:600;
  font-size:14px;
  line-height:1.1;
  text-align:center;
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* middle: 2x2 */
.nt_index .detail .td-meta{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:8px 14px;
  align-items:start;
}
.nt_index .detail .td-item{
  display:flex;
  gap:8px;
  min-width:0;
}
.nt_index .detail .td-label{
  color:#7b8790;
  font-size:12px;
  white-space:nowrap;
}
.nt_index .detail .td-val{
  font-size:13px;
  color:#24323a;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}

/* right: edit/delete */
.nt_index .detail .td-actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  white-space:nowrap;
}

/* phone: stack nicely */
@media (max-width:640px){
  .nt_index .detail .task_detail{
    grid-template-columns: 1fr;
    align-items:start;
  }
  .nt_index .detail .td-author{
    flex-direction:row;
    justify-content:flex-start;
    min-width:0;
  }
  .nt_index .detail .td-name{
    text-align:left;
    max-width:100%;
  }
  .nt_index .detail .td-meta{
    grid-template-columns: 1fr 1fr; /* still 2 columns on most phones */
  }
  .nt_index .detail .td-actions{
    justify-content:flex-start;
  }
}

/* very small phones: 1 column meta */
@media (max-width:380px){
  .nt_index .detail .td-meta{ grid-template-columns: 1fr; }
}



























.notes_index .stats {
    background: #f9f9f9;
    border: 1px solid #f9f9f9;
    box-shadow: rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
}

.notes_index .stats h2 {
    font-size: 1.5em;
    color: #08A882 !important;
    text-align: center;
    font-weight: 500;
    line-height: 1.2;
}

.notes_index .stats .member-box-block {
    background: linear-gradient(-60deg, #d5ffb51a 0%, rgb(22 160 133 / 67%) 100%);
}

.notes_index .stats .member-box-block .mem-box { padding: 0 0 0 55px; }

.notes_index .stats .member-box-block .mem-box .title {
    color: rgb(42 42 42);
    display: block;
    float: left;
    margin-top: 4px;
    font-weight: bold;
}

.notes_index .stats .member-box-block .mem-box .value {
    color: #fff;
    font-size: 1.4em;
    display: block;
    margin-top: -14px;
    float: left;
}

.notes_index .stats .member-box-block .mem-box:first-of-type {
    background: url(../img/s_all.webp) no-repeat 0 0;
    background-size: 46px;
}
.notes_index .stats .member-box-block .mem-box:nth-of-type(2) {
    background: url(../img/s_done.webp) no-repeat 0 0;
    background-size: 46px;
}
.notes_index .stats .member-box-block .mem-box:nth-of-type(3) {
    background: url(../img/s_wait.webp) no-repeat 0 0;
    background-size: 46px;
}
.notes_index .stats .member-box-block .mem-box:nth-of-type(4) {
    background: url(../img/s_type.webp) no-repeat 0 0;
    background-size: 46px;
}

.training > .q_ans > div {
    padding: 6px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
                rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

.training > .q_ans > .ans_hide { display: none; }

/* make remove block button verticaly on left */

.multi_question{
  position: relative;
}

/* ✅ only add space when remove button exists */
.multi_question.has-remove{
  padding-left: 23px;
}

.multi_question > .answer_remove{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  writing-mode: vertical-rl;
  transform: rotate(180deg);

  color: #d9534f;
  cursor: pointer;
  font-weight: 600;
  user-select: none;
}

/* =========================
   Task View
   ========================= */
.task_view {
    background-color: #fff;
    padding: 7px;
}

.task_view > .question { font-size: 1.2rem; }


.stat-container {
    max-width: 1024px;
    margin: 0 auto;
    padding: 4px 6px;
    text-align: center;
    position: relative;
    background: linear-gradient(45deg, #9dd18a, #eafff3);
    box-shadow: 0px 4px 10px rgba(113, 113, 113, 0.35);
}

/* X button */
.stat-container > .close-main {
    position: absolute;
    top: 10px;
    right: 12px;
    border: none;
    background: transparent;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    color: #e74c3c;
}

.stat-container > .close-main:hover { color: #555; }
.stat-container > .main-title { margin-bottom: 8px; }

.stat-container > .columns {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: center;
}

.stat-container > .columns > .column {
    flex: 1 1 calc(33.333% - 20px);
    min-width: 120px;
    background-color: #ecf0f1;
    border-radius: 6px;
    color: inherit;
    margin: 5px 0;
    padding: 6px 3px;
    white-space: normal;
}

.stat-container > .columns > .column > h2 { margin-bottom: 10px; }

.stat-container > .columns > .column > .number {
    font-size: 26px;
    font-weight: bold;
}

@media (max-width: 900px) {
    .stat-container > .columns > .column { flex-basis: 100%; }
}



.task-row .btn-dock {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.task-row .btn-group {
  margin-left: auto;
}






/* =========================
   Bottom Info
   ========================= */
.bottom_info {
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    width: 100%;
    height: 40px;
    line-height: 40px;
}

.bottom_info ul li { padding-left: 10px; }

.bottom_info ul li a i,
.bottom_info ul li i,
.bottom_info ul li { color: #757575; }

.ar_info { opacity: 0.6; }
.bshare li a i:hover { color: #e54c2a; }



/* =========================
   Spoiler / FAQ
   ========================= */

.spoiler_block {
    margin: 2px auto;
    color: #2d2d2d;
}

.spoiler_block .spoiler_title {
    text-align: center;
    font-size: 26px;
}

.spoiler_block h4 {
    font-size: 16px;
    font-weight: 500;
    color: #5c5c5c;
}

.spoiler_block .spoiler_wrap {
    position: relative;
    background: #ffffff;
    border-radius: 3px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06);
    margin: 0 2px 2px 2px;
    overflow: hidden;
}

/* teal bar full height */
.spoiler_block .spoiler_wrap::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
    background: #00a89b;
    border-radius: 0 6px 6px 0;
}

/* plus/minus icon on question */
.spoiler_block .spoiler_wrap .spoiler_q {
    position: relative;
    padding: 7px 30px 7px 3px;
    font-size: 16px;
    color: #222;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.spoiler_block .spoiler_wrap .spoiler_q small {
    flex-shrink: 0;
    display: inline-block;
    margin-top: 2px;
    opacity: 0.3;
}

.spoiler_block .spoiler_wrap .spoiler_q .question-text {
    flex: 1;
    display: inline-block;
}

.spoiler_block .spoiler_wrap .spoiler_q::after {
    content: "+";
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 22px;
}

.spoiler_block .spoiler_wrap .spoiler_q.is-open::after {
    content: "-";
}

.spoiler_block .spoiler_wrap .spoiler_q,
.spoiler_block .spoiler_wrap .spoiler_a {
    padding-right: 120px;
}

.spoiler_block .spoiler_wrap .spoiler_a {
    display: none;
    padding: 0 45px 5px 5px;
    font-size: 14px;
    line-height: 1.7;
    color: #7c818e;
    border-top: 1px solid #f1f2f8;
}

.working-out-grid{
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 180px 180px 160px;
  gap: 12px;
  align-items: center;
  width: 100%;
}

/* keep controls compact and consistent */
.working-out-grid select,
.working-out-grid input[type="text"]{
  width: 100%;
  box-sizing: border-box;
      background-color: #f2f2f2;
    border: none;
    border-left: 3px solid #42c8f4;
    color: #34495e;
    font: .8rem tahoma,arial,sans-serif;
    padding: 8px 10px;
}

.col-action{
  display: flex;
  justify-content: flex-end; /* button/tick to the right */
  align-items: center;
  gap: 8px;
}

/* optional: make empty cells keep height so rows look consistent */
.col-sel1:empty,
.col-sel2:empty{
  min-height: 1px;
}

/* Mobile: stack but still readable */
@media (max-width: 640px){
  .working-out-grid{
    grid-template-columns: 1fr;
  }
  .col-action{
    justify-content: stretch;
  }
  .col-action > *{
    width: 100%;
  }
}

/* =========================
   Form Styles
   ========================= */
   
   /* Section headers */


.form-title,
.form-title-green {
    background: radial-gradient(900px 240px at 10% 0%, rgba(46, 204, 113, .14), transparent 55%), radial-gradient(800px 260px at 85% 0%, rgba(52, 152, 219, .12), transparent 60%), #fff;
        text-shadow: 1px 1px 1px #ffffff;
    color: #060606;
    display: block;
    font-size: 1rem;
    margin-top: 10px;
    padding: 2px 9px;
}

.form-wrap {
    position: relative;
    align-items: center;
    border-bottom: 1px solid #ecf0f1;
    display: flex;
    flex-flow: row wrap;
    font-size: .8rem;
    padding: 3px;
    text-align: left;
}
.form-wrap select, .form-wrap input {
  width: 100%;
  box-sizing: border-box;
}


.form-block {
    border-bottom: 3px solid #eee598;
    border-left: 3px solid #eee598;
    border-radius: 8px;
    border-right: 3px solid #eee598;
    display: block;
    margin: 10px 2px;
    padding: 0 0 5px;
}

.form-block .form-wrap:last-child { border: none; }

.form-block .t {
    background-color: #eee598;
    border-radius: 8px 8px 0 0;
    color: #154764;
    display: block;
    font-size: .8rem;
    font-weight: 700;
    margin: 0 -3px 5px;
    padding: 6px;
    text-align: center;
}

.form-t {
    flex-basis: 220px;
    flex-grow: 0;
    flex-shrink: 0;
    padding: 4px;
    text-align: left;
}

.form-c {
    flex: 1 1 50px;
    padding: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap; /* ok */
}

.form-c input:focus {
    background-color: #f4f6cb;
    border-left: 3px solid #f39c12;
    outline: none;
}

.form-c input:not([type="checkbox"]):not([type="button"]),
.form-c select,
.form-wrap select, 
.form-c textarea, 
.form-wrap input {
    background-color: #f2f2f2;
    border: none;
    border-left: 3px solid #42c8f4;
    color: #34495e;
    font: 1rem ui-sans-serif, system-ui, sans-serif;
    padding: 10px 12px;
    min-height: 44px;
}

.form-c textarea,
.form-s textarea {
    height: 96px;
    min-height: 48px;
    resize: vertical;
}

.form-c select {
    max-width: 100%;
}

/* full-width input */
/* full-width inputs (but NOT the selects inside .select-group) */
.form-c .val,
.form-c > select {
    width: 100%;
    display: block;
}

.form-c .select-group,
.form-wrap .select-group {
    display: flex;
    gap: 10px;
    flex: 1;
    align-items: center;
}

.form-c .select-group select,
.form-wrap .select-group select {
    flex: 1;
    box-sizing: border-box;
    width: auto;     /* desktop inline */
    min-width: 0;
}
/* Hide select-group completely when toggle is OFF */
.form-c .select-group {
    display: none;
}

/* Show select-group only when toggle is ON */
.form-c:has(.tog_switch input:checked) .select-group {
    display: flex;
}


/* only rows that contain a toggle should become a flex row */
.form-c:has(.tog_switch) {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap; /* desktop: keep in one line */
}
/* Make each select+error behave like a neat vertical stack within its flex cell */
.form-c .select-group {
  align-items: flex-start; /* allow error lines under one select without stretching the other */
}

.form-c .select-group select {
  display: block;
  width: 100%;
}

/* Your script inserts THIS div after the field */
.form-c .select-group select + .field-error-msg {
  display: block;
  width: 100%;
  margin-top: 4px;
}

@media (max-width: 600px) {

  /* Row 1 must NOT wrap: text + toggle stay on one line */
  .form-wrap{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }

  /* Let the text shrink so the toggle can fit */
  .form-t{
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Right side: only as wide as the toggle */
.form-c{
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}


  /* Force selects to NEW LINE under the row */
  .form-c .select-group{
    flex: 0 0 100%;
    width: 100%;
    flex-direction: column;
  }

  .form-c .select-group select{
    width: 100%;
  }
.form-c:has(.tog_switch){
  flex: 0 0 auto;
  width: auto;
}

}






.form-c .static,
.form-c .static-btn,
.form-s .static-text,
.form .sprint-text {
    background-color: #f2f2f2;
    border: none;
    border-left: 3px solid #95a5a6;
    color: #7e3200;
    cursor: default;
    font: .8rem tahoma,arial,sans-serif;
    padding: 8px 10px;
    text-shadow: 0 1px 1px #fff;
    width: 100%;
}

.form-s .sprint-text {
    background: #f2f2f2 url(../img/bk-level.png) no-repeat 0 0;
    background-size: 0 50px;
}

.form-s .sprint-text,
.form-s .static-text {
    border: none;
    color: #154764;
}

.form-c .static-btn {
    border-left: 3px solid #27ae60;
    color: #206f9c;
}

.form-c .static-btn:hover { background-color: #cbeaf2; }

.form-r { flex: 1 1 10px; padding: 2px; }

.form-r input:focus {
    background-color: #f4f6cb;
    border-left: 3px solid #f39c12;
    outline: none;
}

.form-r input:not([type="checkbox"]),
.form-r input:not([type="button"]),
.form-r select,
.form-c textarea,
.form-r .howto,
.form-r textarea {
    background-color: #f2f2f2;
    border: none;
    border-left: 3px solid #42c8f4;
    color: #34495e;
    font: .8rem tahoma,arial,sans-serif;
    padding: 8px 10px;
}

/* =========================
   Responsive tweaks
   ========================= */

/* Tablet and below */
@media (max-width: 768px) {
    .form-wrap {
        flex-direction: column;
        align-items: stretch;
    }

    .form-t,
    .form-c,
    .form-r {
        flex-basis: 100%;
        max-width: 100%;
        padding: 4px 4px;
    }

    .form-c input:not([type="checkbox"]),
    .form-c input:not([type="button"]),
    .form-c select,
    .form-c textarea,
    .form-c .howto,
    .form-r input:not([type="checkbox"]),
    .form-r input:not([type="button"]),
    .form-r select,
    .form-r textarea,
    .form-s textarea {
        width: 100%;
        box-sizing: border-box;
        min-height: 44px;
        font-size: 16px;
        padding: 10px 12px;
    }

    .form-c select {
        max-width: 100%;
        width: 100%;
    }

    .form-title,
    .form-title-green {
        font-size: 0.75rem;
        padding: 4px 8px 5px 50px;
        width: 100%;
        background-position: 0 0, 4px 0;
        background-size: 100% 100%, 40px auto;
    }

    .form-block {
        margin: 8px 0;
        padding-bottom: 4px;
    }
}

/* Phone and below */
@media (max-width: 576px) {
    .form-wrap { padding: 4px 2px; }

    .form-t {
        flex-basis: 100%;
        max-width: 100%;
        padding-bottom: 2px;
    }

    .form-c,
    .form-r {
        flex-basis: 100%;
        max-width: 100%;
        padding-top: 0;
    }
}

/* Very small phones */
@media (max-width: 420px) {
    .form-title,
    .form-title-green {
        font-size: 0.7rem;
        padding-left: 40px;
        background-size: 30px auto;
    }

    .form-block .t {
        font-size: 0.75rem;
        padding: 5px;
    }
}

/* =========================
   Search Box
   ========================= */
.search_container {
   display: none;
	margin: 5px 10px;
}

.search_container.is-active {
    display: block;
}

.search_container .height {
    height: 40px;
    width: 100%;
    margin-left: 0;
}

.search_container .search {
    position: relative;
    box-shadow: 0 0 40px rgba(51, 51, 51, .1);
    width: 100%;
    background: #fff;
}

.search_container .search input {
    width: 100%;
    height: 40px;
    text-indent: 40px;
    border: 2px solid #d6d4d4;
}

.search_container .search input:focus {
    box-shadow: none;
    border: 2px solid #0a6933;
}

.search_container .search .icon {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg fill='%23000000' height='800px' width='800px' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 488.4 488.4' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M0,203.25c0,112.1,91.2,203.2,203.2,203.2c51.6,0,98.8-19.4,134.7-51.2l129.5,129.5c2.4,2.4,5.5,3.6,8.7,3.6 s6.3-1.2,8.7-3.6c4.8-4.8,4.8-12.5,0-17.3l-129.6-129.5c31.8-35.9,51.2-83,51.2-134.7c0-112.1-91.2-203.2-203.2-203.2 S0,91.15,0,203.25z M381.9,203.25c0,98.5-80.2,178.7-178.7,178.7s-178.7-80.2-178.7-178.7s80.2-178.7,178.7-178.7 S381.9,104.65,381.9,203.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 10px;
    left: 8px;
}

.search_container .search button {
    position: absolute;
    top: 3px;
    right: 3px;
    height: 34px;
    width: 110px;
    background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
    box-shadow: 0px 4px 10px rgba(46, 179, 132, 0.4);
    color: #fff;
    font-weight: 500;
	cursor: pointer;
}

.search-live {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 40;
    background: #fff;
    border: 2px solid #0a6933;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    max-height: 360px;
    overflow: auto;
}

.search-live.is-open {
    display: block;
}

.search-live-item,
.search-live-all {
    display: block;
    padding: 10px 12px;
    color: #333;
    border-bottom: 1px solid #eee;
    text-decoration: none;
}

.search-live-item:last-child,
.search-live-all:last-child {
    border-bottom: 0;
}

.search-live-item.is-active,
.search-live-item:hover,
.search-live-all:hover,
.search-live-all.is-active {
    background: #f3fbf7;
}

.search-live .title {
    font-weight: 600;
    color: #0a6933;
}

.search-live .title mark,
.search-live .snippet mark {
    background: #d4f5e6;
    color: inherit;
    padding: 0 1px;
}

.search-live .snippet {
    font-size: 13px;
    color: #666;
    margin-top: 4px;
    line-height: 1.35;
}

.search-live-all {
    text-align: center;
    font-weight: 600;
    color: #0a6933;
}

.search-live-empty,
.search-live-msg {
    padding: 12px;
    color: #666;
}


/* =========================
   Styled Table (generic)
   ========================= */
.styled-table {
    border-collapse: collapse;
    font-size: 1rem;
    width: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.styled-table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
}

.styled-table th,
.styled-table td { padding: 6px 5px; }

.styled-table td { color: #616161; }

.styled-table tbody tr:nth-of-type(even) { background-color: #f3f3f3; }

.styled-table tbody tr:last-of-type { border-bottom: 2px solid #009879; }

.styled-table tbody tr.active-row,
.styled-table tbody tr:hover td {
    font-weight: bold;
    color: #009879;
}

/* Flex utility */
.flex {
    display: flex;
    flex-wrap: nowrap;
}

/* =========================
   New / Misc
   ========================= */
.multi_question {
    box-shadow: 0px 2px 0px 0px #4e57ef;
    margin-bottom: 7px;
}

.display_text {
  overflow: hidden;
}
.display_text svg {
  display: block;
  max-width: 100%;
  height: auto;
}
.display_text img, .imgthumb {
    cursor: pointer;
	  float: left;
  margin: 0 12px 8px 0;
  flex-shrink: 0;
  display: block;
}


/* =========================
   Math Styles (.EchoMath)
   ========================= */
.display_text .EchoMath,
.display_text .inlineMath{max-width:100%;overflow-x:auto;}
.EchoMath {
    box-shadow: 0 3px 5px -5px;
    background: url(../img/features-bg.png) no-repeat;
    padding: 10px;
    margin: 10px 0 !important;
    display: block;
    width: 100%;
    max-width: 100%;
}

.inlineMath {
    box-shadow: 0 3px 5px -5px;
    background: url(../img/features-bg.png) no-repeat;
    border-radius: 4px;
    padding: 1px 4px 5px;
}

.EchoMath .metag {
    font-family: 'Lato', serif;
    float: right;
    color: #b5b5b5 !important;
    font-weight: 100;
}

/* Square root */
.EchoMath .MRroot,
.inlineMath .MRroot {
  display: inline-flex;
  align-items: baseline; /* FIX: align text properly */
}

.EchoMath .MRsymbol,
.inlineMath .MRsymbol {
  font-size: 1.4em;      /* FIX: taller radical hook */
  line-height: 1;
  margin-right: -2px;   /* FIX: visually connect bar */
}
.EchoMath .MRindex,
.inlineMath .MRindex{
  font-size:.7em;
  position:relative;
  top:-.55em;
  margin-right:-.15em;
}
.math-unit{font-style:normal;font-family:inherit;padding:0 .05em;}
.math-abs{padding:0 .15em;border-left:2px solid currentColor;border-right:2px solid currentColor;}

.EchoMath .MRover,
.inlineMath .MRover {
  display: inline-block;
  border-top: 1px solid black;
  padding-top: 0.12em;  /* FIX: tighter spacing */
  line-height: 1;
}


.EchoMath .sqrt-content .fraction {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    font-size: inherit;
}

/* Fractions */
.EchoMath .fraction,
.inlineMath .fraction {
    display: inline-flex;
    flex-direction: column;
    text-align: center;
    font-size: 1em;
    line-height: 1;
    vertical-align: middle;
    margin: 0 4px;
}

.EchoMath .fraction .numerator,
.EchoMath .sqrt-content .numerator,
.inlineMath .fraction .numerator {
    border-bottom: 1px solid black;
    padding-bottom: 2px;
    font-size: inherit;
}

.EchoMath .fraction .denominator,
.EchoMath .sqrt-content .denominator,
.inlineMath .fraction .denominator {
    padding-top: 2px;
    font-size: inherit;
}

/* Superscript & Subscript  */
.EchoMath .supb, .inlineMath .supb {
    display: inline-block;
    position: relative;
    padding: 4px;
    margin: 0 6px;
}

.EchoMath .supb .up, .inlineMath .supb .up {
    position: relative;
    top: -5px;
    left: 2px;
    font-size: 0.85em;
}

.EchoMath .supb .dn, .inlineMath .supb .dn {
    position: relative;
    top: 5px;
    left: 2px;
    font-size: 0.85em;
}

/* Color box */
.EchoMath .colorbox {
    background: #fff9d2;
    border: 1px solid #89d5bc;
    padding: 4px;
    margin: 0 6px;
}

/* =========================
   Notify
   ========================= */
.notify {
    background-color: #9b59b6;
    color: #fff;
    display: block;
    text-shadow: 1px 1px #8e44ad;
}

/* =========================
   Tabs
   ========================= */
.tab-wrap {
    transition: 0.3s box-shadow ease;
    border-radius: 6px;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    list-style: none;
    background-color: #fff;
    margin: 0 0;
}

.tab { display: none; }

.tab:checked:nth-of-type(1) ~ .tab-content:nth-of-type(1),
.tab:checked:nth-of-type(2) ~ .tab-content:nth-of-type(2),
.tab:checked:nth-of-type(3) ~ .tab-content:nth-of-type(3),
.tab:checked:nth-of-type(4) ~ .tab-content:nth-of-type(4),
.tab:checked:nth-of-type(5) ~ .tab-content:nth-of-type(5) {
    opacity: 1;
    transition: 0.5s opacity ease-in,
                0.8s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    transform: translateY(0px);
    text-shadow: 0 0 0;
}

.tab:first-of-type:not(:last-of-type) + label {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.tab:not(:first-of-type):not(:last-of-type) + label { border-radius: 0; }

.tab:last-of-type:not(:first-of-type) + label {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.tab:checked + label {
    box-shadow: 0 -1px 0 #fff inset;
    cursor: default;
    background: url(../img/bk-corner.webp) no-repeat 4px top,
                linear-gradient(-60deg, #d5ffb51a 0%, rgb(22 160 133 / 67%) 100%);
}

.tab + label {
    box-shadow: 0 -1px 0 #eee inset;
    cursor: pointer;
    display: block;
    text-decoration: none;
    color: #2f2f2f;
    font-weight: 700;
    flex-grow: 3;
    text-align: center;
    background-image: linear-gradient(-60deg, #d5ffb51a 0%, rgb(22 160 133 / 67%) 100%);
    user-select: none;
    transition: 0.3s background-color ease,
                0.3s box-shadow ease;
    height: 30px;
    box-sizing: border-box;
    line-height: 30px;
}

.tab + label:hover {
    background-color: #f9f9f9;
    box-shadow: 0 1px 0 #f4f4f4 inset;
}

.tab-content {
    background-color: transparent;
    position: absolute;
    width: 100%;
    z-index: -1;
    opacity: 0;
    left: 0;
    transform: translateY(-3px);
    border-radius: 6px;
}

/* =========================
   RESPONSIVE TWEAKS
   ========================= */

/* Mobile background + footer columns + some spacing */
@media (max-width: 768px) {
    body { background-attachment: scroll; }

    #header { padding: 0 0.5rem; }

    .center { padding: 0 0.5rem; }

    .block-main { padding: 10px; }

    #footer .center {
        grid-template-columns: 1fr;
        text-align: center;
        grid-row-gap: 6px;
    }

    .block-text > .list > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .profile-card__img { margin: 80px auto 0; }
}

/* Extra small devices */
@media (max-width: 480px) {
    h1 { font-size: 1rem; }
    h2 { font-size: .85rem; }

    .block-text > .list > ul { grid-template-columns: 1fr; }

    .login-page { padding: 15px 20px; }
}

/* Make large tables scrollable on small screens */
@media (max-width: 768px) {
    .statable,
    .styled-table,
    .zebr-table,
    .table-premium {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}



ul.point {
    line-height: 1.6;
    list-style: none;
    margin: 15px 0 15px 15px;
    background-color: #ecf0f1;
    border-left: 5px solid #16a085;
    display: block;
    padding: 12px;
}

ul.point li {
    background: url(../img/point-gr.png) no-repeat left 9px;
    background-size: 8px 8px;
    margin: 6px 0;
    padding-left: 18px;
}

/* =========================
   Design / responsive audit
   ========================= */
.skip-link{
  position:absolute;
  left:12px;
  top:12px;
  z-index:100;
  background:#fff;
  color:#053b2a;
  padding:10px 14px;
  border-radius:8px;
  font-weight:700;
}
.skip-link:not(:focus):not(:focus-visible){
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

img, video, svg, canvas{
  max-width:100%;
  height:auto;
}

#wrapper > .page_head,
#wrapper > .pane,
#wrapper > .nt_index,
#wrapper > .forum-list,
#wrapper > .cf{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
#wrapper > .cf{
  overflow:visible;
  background:#fff;
}
#wrapper > .cf.cf-gate{
  max-width:460px;
  margin:48px auto;
  padding:36px 28px;
  background:#fff;
}
#wrapper > .cf.cf-gate .cf-empty{
  border:0;
  background:transparent;
  padding:0;
}
@media (max-width:768px){
  #wrapper > .cf.cf-gate{margin:24px 0;max-width:none}
}

#wrapper > .block-inform-alert,
#wrapper > .block-inform-error,
#wrapper > .block-inform-info,
#wrapper > .block-inform-success{
  margin:0;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.notes-gate .cta{ margin-top:16px; }

.page-404{
  text-align:center;
  padding:28px 16px 32px;
}
.page-404 img{
  display:block;
  margin:18px auto;
  max-width:min(420px, 100%);
}
.page-404 .cta{
  justify-content:center;
}

.page_head{
  overflow-wrap:anywhere;
}
.page_head p,
.page_head li,
.pane,
.padding{
  overflow-wrap:break-word;
}

.block-inform-alert,
.block-inform-cart,
.block-inform-error,
.block-inform-info,
.block-inform-success{
  overflow-wrap:break-word;
}

#top-nav li a:focus-visible,
#top-nav-desktop li a:focus-visible,
#top-nav-mobile li a:focus-visible,
#footer a:focus-visible,
.top-nav-toggle:focus-visible{
  outline:2px solid #7CFFB0;
  outline-offset:2px;
}

@media (max-width: 1100px){
  #top-nav{ gap:.35rem; }
  #top-nav li a{ font-size:14px; padding:.5rem .55rem; }
}

@media (max-width: 640px){
  .nt_index > .btn-group{
    flex-wrap:wrap;
    gap:8px;
    padding:10px 8px;
  }
  .nt_index > .btn-group .btn{
    border-radius:10px;
    border-left-width:1px;
    min-width:44px;
  }
  .search_container .search{
    flex-wrap:wrap;
  }
  .search_container .search input{
    min-height:44px;
    width:100%;
  }
  .search_container .search button{
    min-height:44px;
    width:100%;
  }
  .block-inform-alert,
  .block-inform-cart,
  .block-inform-error,
  .block-inform-info,
  .block-inform-success{
    padding:14px 14px 14px 56px;
  }
  .page_head h1{
    font-size:clamp(1.35rem, 5vw, 1.7rem);
  }
  .pg_index_v4 h1{
    font-size:clamp(1.5rem, 7vw, 1.9rem);
  }
  .hero_v4,
  .card_v4,
  .final_v4{
    padding:14px;
  }
  .micro{ font-size:.8rem; line-height:1.45; }
}

@media (max-width: 1024px){
  #top-nav-mobile li a{
    min-height:44px;
    padding:10px 12px;
  }
}

@media (max-width: 380px){
  #logo{ font-size:16px; padding-left:42px; }
  #top-nav-mobile li a{ font-size:12px; padding:10px 8px; }
  .header-row{ gap:.4rem; }
}

@media (max-width: 900px){
  .form-wrap{
    flex-direction:column;
    align-items:stretch;
  }
  .form-t{
    flex-basis:auto;
    width:100%;
  }
  .form-c{
    width:100%;
  }
  .profile-card,
  .panel{
    max-width:100%;
  }
}

@media (min-width: 1400px){
  .container,
  #wrapper{
    max-width:1280px;
  }
}

@media (min-width: 1800px){
  .container,
  #wrapper{
    max-width:1360px;
  }
}

@media (orientation: landscape) and (max-height: 500px){
  body > header{ position:relative; }
  #header{ min-height:3rem; }
  nav #top-nav{
    max-height:calc(100dvh - 3rem);
    overflow:auto;
  }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

@media (hover: none){
  .btn:hover,
  #logo:hover{
    transform:none;
  }
}

.points-chip{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 .7rem;
  border-radius:999px;
  background:#0ba360;
  color:#fff !important;
  font-weight:700;
  font-size:.85rem;
}
.points-split{display:flex;gap:1rem;flex-wrap:wrap;padding:0;list-style:none;}
.pricing-section{
  --starter-start:#65d8e8;
  --starter-end:#aa72f4;
  --study-start:#8eef9b;
  --study-end:#1fcce5;
  --pro-start:#ffc86f;
  --pro-end:#ff7777;
  --all-in-start:#f49abd;
  --all-in-end:#ed2467;
  margin:2.4rem 0 2.6rem;
  padding:2.2rem 1rem 2.1rem;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(226,244,232,.96), rgba(248,252,248,.9));
  border:1px solid rgba(10,105,51,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.pricing-section__title{
  margin:0 0 .45rem;
  text-align:center;
  color:#14351f;
  font-size:clamp(1.45rem, 2.2vw, 2rem);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.02em;
}
.pricing-section__lead{
  max-width:40rem;
  margin:0 auto 1.8rem;
  text-align:center;
  color:#3a5344;
  font-size:1rem;
  line-height:1.55;
}
.pricing-plans{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1.35rem;
  align-items:stretch;
  width:100%;
  max-width:100%;
}
.pricing-empty{text-align:center;margin:0;}
.pricing-anchor{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;}
.pricing-card{
  --card-ink:#102018;
  --card-line:rgba(16,32,24,.16);
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
  border-radius:28px;
  background:#fff;
  box-shadow:0 14px 32px rgba(20,40,28,.12);
  transition:transform .22s ease, box-shadow .22s ease;
}
.pricing-card--starter{--card-start:var(--starter-start);--card-end:var(--starter-end);--card-ink:#10141f;--card-line:rgba(16,20,31,.18);}
.pricing-card--study{--card-start:var(--study-start);--card-end:var(--study-end);--card-ink:#0b2618;--card-line:rgba(11,38,24,.18);}
.pricing-card--pro{--card-start:var(--pro-start);--card-end:var(--pro-end);--card-ink:#2a120c;--card-line:rgba(42,18,12,.16);}
.pricing-card--all-in{--card-start:var(--all-in-start);--card-end:var(--all-in-end);--card-ink:#fff;--card-line:rgba(255,255,255,.28);}
.pricing-card--featured{
  z-index:2;
  box-shadow:0 22px 42px rgba(20,40,28,.2);
}
.pricing-card--premium{
  box-shadow:0 18px 38px rgba(176,20,70,.2);
}
.pricing-card__top{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  min-height:8.4rem;
  padding:1.2rem 1.15rem 1rem;
  text-align:center;
  background:#fff;
  border-radius:28px 28px 0 0;
}
.pricing-card__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:1.55rem;
  margin:0 0 .55rem;
  padding:.15rem .7rem;
  border-radius:999px;
  background:#e8f6ee;
  color:#0a6933;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.pricing-card--featured .pricing-card__badge{background:#0ba360;color:#fff;}
.pricing-card--premium .pricing-card__badge{background:#ed2467;color:#fff;}
.pricing-card__badge--spacer{visibility:hidden;background:transparent;}
.pricing-card__name{
  margin:0;
  color:#16231c;
  font-size:clamp(1.2rem, 1.7vw, 1.62rem);
  font-weight:800;
  line-height:1.15;
  overflow-wrap:anywhere;
}
.pricing-card__subtitle{
  margin:.4rem 0 0;
  color:#5b6b62;
  font-size:.92rem;
  line-height:1.35;
}
.pricing-card__mid{
  position:relative;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  padding:.25rem 0 3.35rem;
  background:linear-gradient(160deg, var(--card-start) 8%, var(--card-end) 92%);
  color:var(--card-ink);
  text-shadow:0 1px 0 rgba(255,255,255,.16);
}
.pricing-card--all-in .pricing-card__mid{
  text-shadow:0 1px 2px rgba(90,0,28,.28);
}
.pricing-card__benefits{
  list-style:none;
  margin:0;
  padding:0;
}
.pricing-card__benefits li{
  margin:0 1.15rem;
  padding:.85rem .15rem;
  border-top:1px solid var(--card-line);
  text-align:center;
  font-size:.98rem;
  font-weight:700;
  line-height:1.35;
}
.pricing-card__benefits li:first-child{border-top:0;}
.pricing-card--all-in .pricing-card__benefits li strong{
  font-size:1.12em;
  letter-spacing:.01em;
}
.pricing-card__cta{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:3;
  display:flex;
  justify-content:center;
  transform:translateY(50%);
  padding:0 1rem;
}
.pricing-card__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  min-width:min(14rem, calc(100% - .5rem));
  padding:.7rem 1.5rem;
  border-radius:999px;
  background:#fff;
  color:#14221c !important;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:0 10px 22px rgba(16,24,20,.18);
  transition:transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.pricing-card__btn:hover{
  color:#0a6933 !important;
  transform:translateY(-3px);
  box-shadow:0 14px 26px rgba(16,24,20,.22);
}
a.inside.pricing-card__btn:focus,
a.inside.pricing-card__btn:focus-visible{
  outline:3px solid #0a6933 !important;
  outline-offset:3px !important;
  box-shadow:0 0 0 4px rgba(11,163,96,.28), 0 14px 26px rgba(16,24,20,.22) !important;
}
.pricing-card__unavailable{
  max-width:16rem;
  margin:0;
  padding:.7rem .85rem;
  border-radius:16px;
  background:#fff;
  color:#3a5344;
  text-align:center;
  font-size:.85rem;
  line-height:1.35;
  box-shadow:0 10px 22px rgba(16,24,20,.16);
}
.pricing-card__bottom{
  padding:2.35rem 1.1rem 1.3rem;
  text-align:center;
  background:#fff;
  border-radius:0 0 28px 28px;
}
.pricing-card__price{
  margin:0;
  color:#14221c;
  font-size:clamp(2.3rem, 4vw, 3.15rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
}
.pricing-card__term{
  margin:.35rem 0 0;
  color:#3f4f46;
  font-size:.95rem;
  font-weight:600;
}
.pricing-card__vat{
  margin:.2rem 0 0;
  color:#7a8a80;
  font-size:.75rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.pricing-section__note{
  max-width:44rem;
  margin:1.7rem auto 0;
  text-align:center;
  color:#3a5344;
  font-size:.92rem;
  line-height:1.55;
}
@supports (grid-template-rows:subgrid){
  .pricing-plans{
    grid-auto-rows:auto minmax(9rem,1fr) auto;
    row-gap:0;
    column-gap:1.35rem;
  }
  .pricing-card{
    display:grid;
    grid-template-rows:subgrid;
    grid-row:span 3;
    margin-bottom:1.5rem;
  }
}
@media (min-width:768px){
  .pricing-section{padding:2.4rem 1.2rem 2.2rem;}
  .pricing-plans{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:1200px){
  .pricing-section{padding:2.6rem 1.4rem 2.35rem;}
  .pricing-plans{grid-template-columns:repeat(4,minmax(0,1fr));}
  .pricing-card--featured{transform:translateY(-14px);}
}
@media (hover:hover){
  .pricing-card:hover{
    transform:translateY(-5px);
    box-shadow:0 20px 40px rgba(20,40,28,.16);
  }
  .pricing-card--featured:hover{
    transform:translateY(-8px);
    box-shadow:0 26px 46px rgba(20,40,28,.22);
  }
  .pricing-card--premium:hover{
    box-shadow:0 22px 44px rgba(176,20,70,.24);
  }
}
@media (min-width:1200px) and (hover:hover){
  .pricing-card--featured:hover{transform:translateY(-18px);}
}
@media (max-width:430px){
  .pricing-section{padding:1.7rem .7rem 1.8rem;border-radius:22px;}
  .pricing-card__top{padding-left:.9rem;padding-right:.9rem;}
  .pricing-card__benefits li{margin-left:.85rem;margin-right:.85rem;}
}
.referral-box{margin-top:1rem;}
.referral-copy-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.6rem 0 1rem;}
.referral-copy-row input{flex:1 1 16rem;min-height:40px;padding:0 .7rem;border:1px solid #d8e0da;border-radius:10px;}
.btn-points,.btn-points-buy{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:0 14px;border-radius:10px;margin:.25rem .25rem 0 0;
  background:#0ba360;color:#fff !important;font-weight:700;
}
.btn-points-buy{background:#0a6933;}
.points-gate{max-width:36rem;margin:1rem auto;padding:1.2rem;border-radius:12px;background:#fff8e8;border:1px solid #d68910;}
.points-gate-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem;}
.points-gate-modal{position:fixed;inset:0;background:rgba(7,32,24,.45);display:grid;place-items:center;z-index:80;padding:1rem;}
.points-gate-card{width:min(420px,100%);background:#fff;border-radius:16px;padding:1.2rem;}
.points-gate-close{margin-top:1rem;height:40px;border:0;border-radius:10px;padding:0 14px;cursor:pointer;}
.sec-gate,.sec-switch,.security-page{max-width:46rem;margin:1rem auto;padding:1.2rem;border-radius:12px;background:#fff;border:1px solid #c5d4cc;}
.sec-gate h1,.security-page h1{margin-bottom:.6rem;}
.sec-switch input,.security-page textarea{width:100%;margin:.4rem 0;padding:.6rem;border:1px solid #c5d4cc;border-radius:8px;}
.security-page table{width:100%;border-collapse:collapse;}
.security-page th,.security-page td{padding:.45rem .5rem;border-bottom:1px solid #e4eee8;text-align:left;vertical-align:top;}

/* Trade Status public dashboard */
.ts-page{padding-bottom:22px;}
.ts-sub{margin:0 0 16px;color:#536158;font-size:15px;line-height:1.5;}
.ts-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:0 0 16px;
}
.ts-sum{
  background:#f8fff8;
  border:1px solid #d7ead8;
  border-radius:12px;
  padding:12px 14px;
}
.ts-sum span{display:block;color:#536158;font-size:12px;font-weight:700;}
.ts-sum strong{display:block;margin-top:4px;color:#1f6f00;font-size:26px;line-height:1.1;}
.ts-filters{
  display:grid;
  grid-template-columns:160px 140px minmax(160px,1fr);
  gap:10px;
  margin:0 0 16px;
}
.ts-field{display:flex;flex-direction:column;gap:5px;margin:0;}
.ts-field span{font-size:12px;font-weight:700;color:#2f4a32;}
.ts-field select,
.ts-field input{
  height:42px;
  border:1px solid #c8d6c9;
  border-radius:10px;
  padding:0 12px;
  background:#fff;
  color:#243028;
}
.ts-state{margin:18px 0;color:#536158;}
.ts-state-error{color:#8a2b2b;background:#fff4f4;border-radius:10px;padding:12px 14px;}
.ts-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.ts-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:16px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.05);
  min-width:0;
}
.ts-card-head{display:flex;gap:12px;align-items:flex-start;}
.ts-avatar{
  width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  background:#e6f7e5;color:#1f6f00;font-weight:800;
  flex:0 0 auto;
}
.ts-card h2{margin:0 0 6px;font-size:18px;color:#1f2a22;}
.ts-badges{display:flex;flex-wrap:wrap;gap:6px;margin:0;}
.ts-badge{
  display:inline-block;padding:3px 8px;border-radius:999px;
  font-size:12px;font-weight:700;
}
.ts-badge-live{background:#e6f7e5;color:#1f6f00;}
.ts-badge-coming_soon{background:#fff4d6;color:#8a6d00;}
.ts-badge-draft{background:#eef1ef;color:#667069;}
.ts-badge-archived{background:#fde8e8;color:#a32626;}
.ts-badge-paid{background:#e8f1ff;color:#2457a6;}
.ts-badge-free{background:#e6f7e5;color:#358536;}
.ts-mods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.ts-mod{
  background:#f7faf7;
  border:1px solid #e4eee8;
  border-radius:10px;
  padding:10px 8px;
  text-align:center;
  min-width:0;
}
.ts-mod-k{margin:0;font-size:11px;font-weight:700;color:#536158;text-transform:uppercase;letter-spacing:.03em;}
.ts-mod-n{margin:4px 0 6px;font-size:28px;line-height:1;color:#1f6f00;font-weight:800;}
.ts-mod-break{margin:0;padding:0;list-style:none;font-size:11px;color:#667069;}
.ts-mod-break li{margin:2px 0;}
.ts-mod-break b{color:#243028;}
.ts-phases{margin:0;padding:0;list-style:none;display:grid;gap:6px;}
.ts-phase{
  display:grid;
  grid-template-columns:minmax(72px,auto) repeat(3,minmax(0,1fr));
  gap:6px;
  align-items:center;
  background:#f8fff8;
  border:1px solid #e4eee8;
  border-radius:8px;
  padding:7px 8px;
  font-size:12px;
  color:#536158;
}
.ts-phase strong{color:#2f4a32;}
.ts-phase-empty{grid-template-columns:1fr;color:#667069;}
@media (max-width:1100px){
  .ts-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ts-summary{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:760px){
  .ts-grid,
  .ts-summary,
  .ts-filters{grid-template-columns:1fr;}
  .ts-phase{grid-template-columns:1fr 1fr; }
  .ts-phase strong{grid-column:1 / -1;}
}

/* Reusable IEGrinds UI kit — Trade / Phase / Category / stats */
.ieg-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:0;
}
.ieg-card__head{
  padding:12px 14px 0;
  font-weight:700;
  color:#1f2a22;
}
.ieg-card__body{padding:12px 14px 14px;}
.ieg-stat{
  background:#f8fff8;
  border:1px solid #d7ead8;
  border-radius:12px;
  padding:12px 14px;
}
.ieg-stat__k{display:block;color:#536158;font-size:12px;font-weight:700;}
.ieg-stat__v{display:block;margin-top:4px;color:#1f6f00;font-size:24px;line-height:1.1;}
.ieg-progress{display:flex;flex-direction:column;gap:6px;}
.ieg-progress__label{font-size:12px;font-weight:700;color:#2f4a32;}
.ieg-progress__track{
  display:block;height:8px;border-radius:999px;background:#e4eee8;overflow:hidden;
}
.ieg-progress__bar{display:block;height:100%;background:#1f6f00;}
.ieg-badge{
  display:inline-block;padding:3px 8px;border-radius:999px;
  font-size:12px;font-weight:700;
}
.ieg-badge--phase{background:#fff4d6;color:#8a6d00;}
.ieg-badge--trade{background:#e6f7e5;color:#1f6f00;}
.ieg-cat{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border:1px solid #e4eee8;border-radius:12px;
  background:#fff;color:#1f2a22;text-decoration:none;
}
.ieg-cat__name{font-weight:700;}
.ieg-cat__n{color:#1f6f00;font-weight:800;}
@media (max-width:760px){
  .ieg-card,.ieg-stat,.ieg-cat{width:100%;}
}

/* Training practice loop (session UI — landing uses training.css) */
.tp-app{margin:12px 0 24px;}
.tp-progress{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;font-weight:700;color:#2f4a32;}
.tp-stem{font-size:18px;line-height:1.45;margin-bottom:12px;}
.tp-media img{max-width:100%;height:auto;border-radius:10px;}
.tp-options,.tp-match{display:flex;flex-direction:column;gap:8px;margin:12px 0;}
.tp-opt{
  display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid #e4eee8;
  border-radius:12px;background:#fbfcfb;
}
.tp-numeric{display:grid;grid-template-columns:1fr minmax(120px,180px);gap:8px;margin:12px 0;}
.tp-numeric input,.tp-numeric select, .tp-q textarea{
  width:100%;min-height:44px;border:1px solid #d8e0da;border-radius:10px;padding:10px;
}
.tp-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.tp-hint,.tp-fb{margin-top:14px;padding:12px;border-radius:12px;}
.tp-hint{background:#fff8e8;border:1px solid #f0e0b0;}
.tp-fb.is-ok{background:#eef8ee;border:1px solid #cde8ce;}
.tp-fb.is-bad{background:#fdf2f0;border:1px solid #f0d0c8;}
.tp-expl,.tp-notes{margin-top:10px;}
.tp-opt.is-correct{border-color:#1f6f00;background:#f3faf3;}
.tp-order{padding-left:20px;}
.tp-order li{padding:10px;border:1px solid #e4eee8;border-radius:10px;margin:6px 0;cursor:pointer;}
.tp-order li.is-pick{border-color:#1f6f00;background:#f3faf3;}
.hidden{display:none;}
@media (max-width:760px){
  .tp-numeric{grid-template-columns:1fr;}
  .tp-stem{font-size:16px;}
}

/* Interactive mock exams */
.mx-hub{margin:12px 0 18px;}
.mx-lead{margin:0 0 12px;color:#536158;line-height:1.45;}
.mx-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0;}
.mx-mode,.mx-hist,.mx-resume{
  display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid #e4eee8;
  border-radius:12px;background:#fff;color:#1f2a22;text-decoration:none;
}
.mx-mode strong,.mx-hist strong{font-size:16px;}
.mx-mode span,.mx-hist span,.mx-mode em{color:#536158;font-size:13px;line-height:1.4;font-style:normal;}
.mx-custom{display:grid;gap:10px;margin:10px 0 16px;}
.mx-custom label,.mx-custom select,.mx-custom input{width:100%;}
.mx-cats{border:1px solid #d8e0da;border-radius:10px;padding:10px;margin:0;}
.mx-cats legend{font-weight:700;}
.mx-check{display:flex;align-items:center;gap:8px;min-height:40px;margin:4px 0;}
.mx-check input{width:auto;min-height:20px;}
.mx-review{margin:12px 0;}
.mx-rhead{font-weight:700;color:#2f4a32;}
.mx-expl,.mx-notes{margin:12px 0;padding:10px;background:#f6faf6;border-radius:10px;}
.mx-custom input,.mx-custom select{min-height:44px;border:1px solid #d8e0da;border-radius:10px;padding:0 10px;}
.mx-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:8px 0 12px;flex-wrap:wrap;}
.mx-timer{font-weight:800;font-size:18px;background:#1f2a22;color:#fff;padding:8px 12px;border-radius:10px;}
.mx-timer.is-urgent{background:#8a1f12;}
.mx-count{font-weight:700;color:#2f4a32;}
.mx-nav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;}
.mx-nav__i{
  min-width:40px;min-height:40px;border:1px solid #d8e0da;border-radius:10px;background:#fff;font-weight:700;
}
.mx-nav__i.is-on{border-color:#1f6f00;background:#f3faf3;}
.mx-nav__i.is-done{box-shadow:inset 0 -3px 0 #1f6f00;}
.mx-nav__i.is-flag{background:#fff8e8;}
.mx-stem{font-size:18px;line-height:1.45;margin-bottom:12px;}
.mx-options,.mx-match{display:flex;flex-direction:column;gap:8px;margin:12px 0;}
.mx-opt{
  display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid #e4eee8;
  border-radius:12px;background:#fbfcfb;
}
.mx-opt.is-correct{border-color:#1f6f00;background:#f3faf3;}
.mx-numeric{display:grid;grid-template-columns:1fr minmax(120px,180px);gap:8px;}
.mx-numeric input,.mx-numeric select,.mx-q textarea,[data-mx-text]{
  width:100%;min-height:44px;border:1px solid #d8e0da;border-radius:10px;padding:10px;
}
.mx-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.mx-note{color:#536158;font-size:13px;}
.mx-order{padding-left:20px;}
.mx-order li{padding:10px;border:1px solid #e4eee8;border-radius:10px;margin:6px 0;cursor:pointer;}
.mx-order li.is-pick{border-color:#1f6f00;background:#f3faf3;}
.mx-pf{font-size:28px;font-weight:800;margin:0 0 10px;}
.mx-pf.is-pass{color:#1f6f00;}
.mx-pf.is-fail{color:#8a1f12;}
.mx-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0;}
.mx-weak{padding-left:18px;}
.mx-modal{position:fixed;inset:0;background:rgba(20,28,22,.45);display:flex;align-items:flex-end;justify-content:center;z-index:40;}
.mx-modal__box{background:#fff;border-radius:16px 16px 0 0;padding:18px;width:100%;max-width:520px;}
.mx-warn{font-weight:700;}
.mx-media img{max-width:100%;height:auto;border-radius:10px;}
@media (max-width:760px){
  .mx-modes,.mx-stats,.mx-numeric{grid-template-columns:1fr;}
  .mx-stem{font-size:16px;}
  .mx-timer{width:100%;text-align:center;}
}
.nt-hub,.nt-catpage{margin:12px 0 18px;}
.nt-lead{margin:0 0 12px;color:#536158;line-height:1.45;}
.nt-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0;}
.nt-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.nt-cat{flex-direction:column;align-items:stretch;min-height:auto;padding:12px;}
.nt-meta{display:block;color:#536158;font-size:13px;margin-top:6px;}
.nt-list{display:flex;flex-direction:column;gap:8px;}
.nt-row{
  display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid #d8e0da;border-radius:12px;text-decoration:none;color:inherit;background:#fff;
}
.nt-row strong{font-size:16px;}
.nt-ex{color:#536158;font-size:14px;line-height:1.4;}
.nt-row em{font-style:normal;font-size:13px;color:#2f4a32;}
.nt-filters{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;}
.nt-read{max-width:42rem;margin:12px auto 28px;padding:0 8px;}
.nt-crumb{color:#536158;font-size:14px;}
.nt-read h1{font-size:28px;line-height:1.25;margin:8px 0 10px;}
.nt-state{font-weight:700;color:#2f4a32;}
.nt-sideinfo{color:#536158;font-size:14px;}
.nt-article{font-size:18px;line-height:1.65;color:#1d2a20;}
.nt-article h2,.nt-article h3{margin:1.2em 0 .4em;}
.nt-article p,.nt-article li{margin:0 0 .8em;}
.nt-article img{max-width:100%;height:auto;border-radius:10px;}
.nt-article table{display:block;max-width:100%;overflow-x:auto;}
.nt-article pre,.nt-article code{white-space:pre-wrap;word-break:break-word;}
.nt-callout,.nt-important,.nt-warning,.nt-example,.nt-formula,.nt-tip,.nt-regulation,.nt-worked,.nt-key{
  margin:14px 0;padding:12px 14px;border-radius:12px;border-left:4px solid #1f6f00;background:#f3faf3;
}
.nt-warning{border-left-color:#8a1f12;background:#fff4f2;}
.nt-formula,.nt-worked{border-left-color:#1a4d8c;background:#f3f7fc;}
.nt-important,.nt-key{border-left-color:#b8860b;background:#fff8e8;}
.nt-actions,.nt-nav,.nt-recs{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0;}
.nt-nav .btn{min-width:44%;justify-content:center;}
.nt-searchform{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap;}
.nt-searchform input[type="search"]{flex:1;min-width:180px;min-height:44px;padding:8px 12px;border:1px solid #c5d0c7;border-radius:10px;font-size:16px;}
.nt-row:focus-visible,.nt-cat:focus-visible,.nt-article img:focus-visible{outline:3px solid #1f6f00;outline-offset:2px;}
.nt-article img{cursor:zoom-in;}
.nt-article figcaption,.nt-caption{font-size:14px;color:#536158;margin-top:6px;}
.nt-lightbox{border:0;padding:12px;max-width:min(96vw,1100px);background:#111;}
.nt-lightbox img{max-width:100%;height:auto;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media (max-width:760px){
  .nt-cats,.nt-stats{grid-template-columns:1fr;}
  .nt-read h1{font-size:22px;}
  .nt-article{font-size:16px;}
  .nt-nav .btn,.nt-actions .btn{min-width:100%;min-height:44px;}
  .nt-article table{font-size:14px;}
}

/* Learning Dashboard */
.ld-page{margin:8px 0 20px;display:flex;flex-direction:column;gap:12px;}
.ld-hero{padding:4px 2px 0;}
.ld-kicker{margin:0 0 6px;font-size:13px;font-weight:700;color:#536158;letter-spacing:.02em;}
.ld-title{margin:0;font-size:22px;line-height:1.3;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.ld-primary{border:2px solid #1f6f00;box-shadow:0 8px 20px rgba(31,111,0,.08);}
.ld-primary .ieg-card__head{font-size:18px;}
.ld-reason{margin:0 0 10px;font-size:16px;line-height:1.45;color:#1f2a22;}
.ld-resume-meta{margin:0 0 8px;font-weight:700;color:#2f4a32;}
.ld-cta{min-height:44px;min-width:160px;}
.ld-suggested{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.ld-plan{border:1px solid #d7e6d8;}
.ld-plan-lead,.ld-plan-progress{margin:0 0 10px;font-size:14px;color:#2f4a32;font-weight:700;}
.ld-plan-hint{margin:10px 0 0;font-size:12px;color:#536158;}
.ld-plan-list{display:flex;flex-direction:column;gap:8px;}
.ld-plan-item{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:10px 0;border-bottom:1px solid #eef3ef;
}
.ld-plan-item:last-child{border-bottom:0;}
.ld-plan-item__body{min-width:0;flex:1;}
.ld-plan-item__body strong{display:block;font-size:15px;color:#1f2a22;line-height:1.35;}
.ld-plan-item__body span{display:block;margin-top:4px;font-size:13px;color:#536158;line-height:1.4;}
.ld-plan-actions{display:flex;flex-wrap:wrap;gap:6px;flex-shrink:0;}
.ld-plan-actions .btn{min-height:40px;}
.ld-plan-skip{background:#fff;border:1px solid #c9d6cb;color:#2f4a32;}
.ld-plan-done{font-size:13px;font-weight:800;color:#1f6f00;white-space:nowrap;padding:8px 0;}
.ld-plan-item--completed,.ld-plan-item--skipped{opacity:.72;}
.ld-attention{display:flex;flex-direction:column;gap:12px;}
.ld-review .ld-big{margin:0 0 8px;font-size:28px;font-weight:800;color:#1f6f00;}
.ld-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;}
.ld-chip{
  display:inline-flex;align-items:center;min-height:36px;padding:6px 10px;
  border-radius:999px;background:#f3faf3;border:1px solid #d7ead8;color:#1f2a22;text-decoration:none;font-weight:700;font-size:13px;
}
.ld-weakrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #eef3ef;}
.ld-weakrow:last-child{border-bottom:0;}
.ld-weakrow span{display:block;color:#536158;font-size:13px;}
.ld-weakrow .btn{min-height:40px;}
.ld-strong{margin:0;font-size:13px;font-weight:700;color:#2f4a32;}
.ld-modules{display:grid;grid-template-columns:1fr;gap:12px;}
.ld-mod .ieg-stat{margin-bottom:10px;}
.ld-mini{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:10px;}
.ld-meta{margin:8px 0;color:#536158;font-size:13px;}
.ld-journey{display:flex;flex-direction:column;gap:8px;}
.ld-step{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border:1px solid #e4eee8;border-radius:12px;background:#fff;color:#1f2a22;text-decoration:none;min-height:48px;
}
.ld-status{font-size:12px;font-weight:800;padding:3px 8px;border-radius:999px;background:#eef3ef;color:#2f4a32;}
.ld-status--strong{background:#e6f7e5;color:#1f6f00;}
.ld-status--needs-review{background:#fff4f2;color:#8a1f12;}
.ld-status--practicing{background:#eef4fb;color:#1a4d8c;}
.ld-status--learning{background:#fff8e8;color:#8a6d00;}
.ld-activity{display:flex;flex-direction:column;}
.ld-act{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #eef3ef;text-decoration:none;color:#1f2a22;}
.ld-act em{font-style:normal;color:#536158;font-size:12px;white-space:nowrap;}
.ld-cat-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;}
.ld-cat-actions .btn{min-height:44px;}
.ld-debug{font-size:13px;color:#536158;}
.ld-debug-list{margin:8px 0 0;padding-left:18px;}
@media (min-width:760px){
  .ld-title{font-size:26px;}
  .ld-modules{grid-template-columns:repeat(3,minmax(0,1fr));}
  .ld-mini{grid-template-columns:repeat(3,minmax(0,1fr));}
  .ld-journey{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:759px){
  .ld-primary .btn,.ld-review .btn,.ld-mod .btn{width:100%;min-height:44px;justify-content:center;}
  .ld-weakrow{flex-wrap:wrap;}
  .ld-weakrow .btn{width:100%;}
  .ld-act{flex-direction:column;}
  .ld-plan-item{flex-direction:column;}
  .ld-plan-actions{width:100%;}
  .ld-plan-actions .btn{flex:1;justify-content:center;}
}

/* Skill Map / Learning Journey */
.skill-map-page{margin:8px 0 24px;display:flex;flex-direction:column;gap:14px;}
.skill-map-hero{padding:4px 2px 0;}
.skill-map-kicker{margin:0 0 6px;font-size:13px;font-weight:700;color:#536158;letter-spacing:.02em;}
.skill-map-title{margin:0;font-size:22px;line-height:1.3;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.skill-map-lead{margin:8px 0 0;font-size:15px;color:#2f4a32;line-height:1.45;max-width:42rem;}
.skill-map-summary{margin:10px 0 0;font-size:14px;font-weight:700;color:#1f2a22;}
.skill-map-filters ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.skill-map-filter{
  display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;
  border:1px solid #d7e6d8;border-radius:8px;background:#fff;color:#2f4a32;
  text-decoration:none;font-size:13px;font-weight:700;
}
.skill-map-filter.is-on{background:#e6f7e5;border-color:#1f6f00;color:#1f6f00;}
.skill-map-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;position:relative;}
.skill-map-card{position:relative;margin:0;}
.skill-map-connector{
  position:absolute;left:22px;top:100%;width:2px;height:10px;background:#d7e6d8;z-index:0;
}
.skill-map-card__inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:10px;
  padding:14px 16px;border:1px solid #e4eee8;border-radius:12px;background:#fff;
}
.skill-map-card--primary .skill-map-card__inner{border-color:#1f6f00;box-shadow:0 6px 16px rgba(31,111,0,.08);}
.skill-map-card__top{display:flex;gap:12px;align-items:flex-start;}
.skill-map-seq{
  flex-shrink:0;width:40px;height:40px;border-radius:10px;background:#eef3ef;color:#2f4a32;
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;
}
.skill-map-card__heading{min-width:0;flex:1;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;}
.skill-map-name{margin:0;font-size:16px;font-weight:700;color:#1f2a22;line-height:1.35;flex:1 1 100%;}
.skill-map-state{
  font-size:12px;font-weight:800;padding:3px 8px;border-radius:6px;background:#eef3ef;color:#2f4a32;
}
.skill-map-state--not_started{background:#eef3ef;color:#536158;}
.skill-map-state--learning{background:#fff8e8;color:#8a6d00;}
.skill-map-state--needs_practice{background:#fff6e8;color:#9a5b00;}
.skill-map-state--review_due{background:#eef4fb;color:#1a4d8c;}
.skill-map-state--strong{background:#e6f7e5;color:#1f6f00;}
.skill-map-today,.skill-map-primary-tag{
  font-size:11px;font-weight:700;color:#536158;padding:2px 0;
}
.skill-map-primary-tag{color:#1f6f00;}
.skill-map-signals{margin:0;padding-left:18px;color:#536158;font-size:13px;line-height:1.4;}
.skill-map-actions{display:flex;flex-wrap:wrap;gap:8px;}
.skill-map-cta,.skill-map-more{min-height:44px;}
.skill-map-more{background:#fff;border:1px solid #c9d6cb;color:#2f4a32;}
.skill-map-detail{
  display:flex;flex-wrap:wrap;gap:10px 14px;padding-top:4px;border-top:1px solid #eef3ef;
}
.skill-map-detail a{font-size:13px;font-weight:700;color:#1f6f00;}
.skill-map-foot{margin:4px 0 0;}
.skill-map-teaser__text{margin:0 0 10px;font-size:14px;color:#2f4a32;font-weight:700;line-height:1.4;}
.skill-map-teaser__cta{min-height:44px;}
.profile-skill-map-link .btn{min-height:44px;margin-right:10px;}
@media (min-width:760px){
  .skill-map-title{font-size:26px;}
  .skill-map-list{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  }
  .skill-map-connector{display:none;}
}
@media (max-width:759px){
  .skill-map-actions .btn{flex:1;justify-content:center;min-width:calc(50% - 4px);}
  .skill-map-teaser__cta{width:100%;justify-content:center;}
}