/* ZelfDutch Core — level page + lesson reader. Brand kit A "gezellig" (brand/tokens.css).
   Every rule sits under .zd so the theme (Astra / Elementor) is never touched. */
.zd{
  --zd-cream:#FBF3E6; --zd-paper:#FFFCF6; --zd-sand:#EADFCB; --zd-sand-2:#CFC3AC;
  --zd-navy:#1F3352; --zd-ink-2:#3D4A5F; --zd-orange:#E2702A; --zd-orange-deep:#B4501C; --zd-orange-soft:#FBE2CF;
  --zd-green:#4F7F62; --zd-green-deep:#3F6B51; --zd-green-soft:#E1EDE5; --zd-muted:#6E6A60; --zd-text-2:#4A4A45;
  --zd-hl:#FFE08A;
  --zd-f-display:'Mitr','IBM Plex Sans Thai Looped',system-ui,sans-serif;
  --zd-f-body:'IBM Plex Sans Thai Looped','Noto Sans Thai',system-ui,sans-serif;
  --zd-f-nl:'Nunito','Segoe UI',system-ui,sans-serif;
  box-sizing:border-box; width:100%; max-width:1200px; margin:0 auto; padding:24px 24px 64px;
  color:var(--zd-navy); font-family:var(--zd-f-body); font-size:16px; line-height:1.55;
}
body.zd-page{background:var(--zd-cream, #FBF3E6)}
.zd *,.zd *::before,.zd *::after{box-sizing:border-box}
.zd [hidden]{display:none !important}
.zd a{color:var(--zd-orange-deep)}
.zd a:hover{color:#8F3F15}
.zd button{font:inherit}
.zd .zd-i{flex:0 0 auto; display:block}
.zd h1,.zd h2{color:var(--zd-navy); letter-spacing:0}

.zd-crumbs{font-size:14px; color:var(--zd-muted); display:flex; gap:8px; flex-wrap:wrap; margin:0 0 20px}
.zd-crumbs a{color:var(--zd-muted)}
.zd-crumbs [aria-current]{color:var(--zd-navy)}
.zd-muted{color:var(--zd-muted); margin:0; font-size:15px}
.zd-linkbtn{background:none; border:0; color:var(--zd-orange-deep); text-decoration:underline; padding:8px 4px; min-height:40px; cursor:pointer; font-size:15px}
.zd-btn{font-family:var(--zd-f-display); font-size:15px; cursor:pointer; background:var(--zd-orange-deep); color:#fff; border:1px solid var(--zd-orange-deep);
  border-radius:999px; padding:9px 20px; min-height:44px}
.zd-btn:hover{background:#9A4418}
/* a link styled as a button: the theme's link colour would paint the label orange on orange */
a.zd-btn:not(.zd-btn-line):not(.zd-btn-peach),a.zd-btn:not(.zd-btn-line):not(.zd-btn-peach):hover,a.zd-btn:not(.zd-btn-line):not(.zd-btn-peach):visited{color:#fff; text-decoration:none}
a.zd-btn{display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box}
/* price button: label on top, price per 12 months below in smaller type (one tidy line each on a 360 px phone) */
a.zd-btn.zd-btn-2l{flex-direction:column; line-height:1.3}
.zd-btn-sub{display:block; font-size:14px; opacity:.92}
.zd-btn-line{background:var(--zd-paper); color:var(--zd-navy); border-color:var(--zd-sand-2); font-family:var(--zd-f-body)}
.zd-btn-line:hover,.zd-btn-line[aria-pressed="true"]{background:var(--zd-navy); color:var(--zd-paper); border-color:var(--zd-navy)}

/* badges + register pills (colours from the approved mockup) */
.zd-badge{font-family:var(--zd-f-display); font-size:13px; line-height:1.4; padding:3px 12px; border-radius:999px; display:inline-flex; gap:5px; align-items:center}
.zd-badge-free{background:var(--zd-green-deep); color:#fff}
.zd-badge-member{background:var(--zd-navy); color:var(--zd-cream); padding-left:9px}
.zd-pill{font-size:13px; line-height:1.45; padding:3px 10px; border-radius:999px; background:#EFE8DA; color:#4A463E; display:inline-block}
.zd-pill-u{background:var(--zd-green-soft); color:#2E5940}
.zd-pill-je{background:var(--zd-orange-soft); color:#8A3C12}

/* ===== level page ===== */
.zd-levels{display:flex; flex-direction:column; gap:28px}
.zd-levels .zd-crumbs{margin:0}
.zd-level-pick{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px}
.zd-level{border-radius:14px; padding:16px 20px; display:flex; flex-direction:column; gap:2px; text-decoration:none;
  background:var(--zd-paper); color:var(--zd-navy) !important; border:1px solid var(--zd-sand)}
.zd-level:hover{border-color:var(--zd-sand-2)}
.zd-level.is-on{background:var(--zd-navy); color:var(--zd-cream) !important; border-color:var(--zd-navy)}
.zd-level-id{font-family:var(--zd-f-nl); font-weight:800; font-size:30px; line-height:1.1}
.zd-level-name{font-family:var(--zd-f-display); font-size:17px}
.zd-level-n{font-size:14px; opacity:.85}
.zd-level-head{display:flex; flex-wrap:wrap; gap:20px 40px; align-items:flex-end; justify-content:space-between}
.zd-level-intro{display:flex; flex-direction:column; gap:6px; flex:999 1 520px; min-width:0}
.zd-level-intro h1{margin:0; font-family:var(--zd-f-display); font-weight:500; font-size:34px; line-height:1.3}
.zd-level-intro p{margin:0; color:var(--zd-text-2); max-width:640px}
.zd-login-box{flex:1 1 300px; background:var(--zd-paper); border:1px solid var(--zd-sand); border-radius:14px; padding:14px 18px;
  display:flex; gap:12px; align-items:center; font-size:14px; line-height:1.5; color:var(--zd-orange)}
.zd-login-box span{color:var(--zd-navy)}
.zd-filters{background:var(--zd-paper); border:1px solid var(--zd-sand); border-radius:14px; padding:16px 20px;
  display:flex; flex-wrap:wrap; gap:16px 32px; align-items:center}
.zd-fgroup{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.zd-flabel{font-family:var(--zd-f-display); font-size:15px; margin-right:4px}
label.zd-fgroup{gap:10px; margin:0}
.zd-chip{cursor:pointer; font-size:15px; padding:8px 16px; min-height:40px; border-radius:999px; background:var(--zd-cream); color:var(--zd-navy); border:1px solid var(--zd-sand-2)}
.zd-chip[aria-pressed="true"]{background:var(--zd-navy); color:var(--zd-paper); border-color:var(--zd-navy)}
.zd-select{font-family:var(--zd-f-body); font-size:15px; color:var(--zd-navy); background:var(--zd-cream); border:1px solid var(--zd-sand-2);
  border-radius:10px; padding:8px 12px; min-height:42px; max-width:280px}
.zd-check{display:flex; gap:10px; align-items:center; font-size:15px; cursor:pointer; min-height:40px; margin:0}
.zd-check input{width:20px; height:20px; accent-color:var(--zd-green); margin:0}
.zd-result{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-top:-8px}
.zd-result p{margin:0; font-size:15px; color:var(--zd-text-2)}
.zd-result b{color:var(--zd-navy)}
.zd-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:22px}
.zd-card{display:flex; flex-direction:column; background:var(--zd-paper); border:1px solid var(--zd-sand); border-radius:14px; overflow:hidden;
  text-decoration:none; color:var(--zd-navy) !important; transition:border-color .15s, transform .15s}
.zd-card:hover{border-color:var(--zd-sand-2); transform:translateY(-2px)}
.zd-card:focus-visible{outline:3px solid var(--zd-orange); outline-offset:2px}
.zd-card-img{position:relative; background:var(--zd-sand)}
.zd-card-img img,.zd-noimg{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover}
.zd-card-img .zd-badge{position:absolute; top:10px; left:10px}
.zd-card-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:4px; flex-grow:1}
.zd-card-meta{font-size:13px; color:var(--zd-muted)}
.zd-card-nl{font-family:var(--zd-f-nl); font-weight:800; font-size:19px; line-height:1.25}
.zd-card-th{font-size:15px; color:var(--zd-ink-2); line-height:1.45}
.zd-card-foot{margin-top:auto; padding-top:12px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between}
.zd-min{font-size:13px; color:var(--zd-muted); display:inline-flex; gap:5px; align-items:center}
.zd-more{align-self:center; font-family:var(--zd-f-display); font-size:15px; cursor:pointer; background:var(--zd-paper); color:var(--zd-orange-deep);
  border:1px solid var(--zd-orange-deep); border-radius:999px; padding:10px 20px; min-height:46px; width:100%}
.zd-empty{background:var(--zd-paper); border:1px dashed var(--zd-sand-2); border-radius:14px; padding:40px 24px; text-align:center;
  display:flex; flex-direction:column; gap:10px; align-items:center; font-family:var(--zd-f-display); font-size:19px}
.zd-note{margin:0; font-size:14px; color:var(--zd-muted); text-align:center}

@media (max-width:640px){
  .zd{padding:16px 16px 40px}
  .zd-levels{gap:16px}
  .zd-level-pick{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
  .zd-level{padding:8px 6px; align-items:center; min-height:64px; text-align:center}
  .zd-level-id{font-size:22px}
  .zd-level-name{display:none}
  .zd-level-n{font-size:12px}
  .zd-level-intro h1{font-size:25px}
  .zd-level-intro p{font-size:14px}
  .zd-login-box{display:none}
  .zd-filters{padding:12px; gap:12px}
  .zd-fgroup[role="group"]{flex-wrap:nowrap; overflow-x:auto; margin-right:-12px; padding-right:12px; scrollbar-width:none}
  .zd-chip{flex-shrink:0; font-size:14px; padding:8px 14px}
  .zd-flabel{flex-shrink:0}
  label.zd-fgroup{flex-wrap:nowrap; width:100%}
  .zd-select{max-width:none; width:100%; min-width:0; flex:1}
  .zd-cards{gap:10px}
  .zd-card{flex-direction:row; gap:12px; padding:10px; border-radius:14px}
  .zd-card:hover{transform:none}
  .zd-card-img{flex:0 0 104px; border-radius:10px; overflow:hidden; align-self:flex-start}
  .zd-card-img img,.zd-noimg{aspect-ratio:4/3}
  .zd-card-img .zd-badge{top:auto; bottom:4px; left:4px; font-size:11px; padding:1px 8px}
  .zd-card-img .zd-badge-member{padding:3px 6px}
  .zd-badge-t{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .zd-card-body{padding:0; gap:1px; min-width:0}
  .zd-card-meta{font-size:12px}
  .zd-card-nl{font-size:16px}
  .zd-card-th{font-size:13px; line-height:1.4}
  .zd-card-foot{padding-top:4px}
  .zd-card-foot .zd-pill{font-size:12px; padding:1px 8px}
  .zd-min{display:none}
}

/* ===== lesson page ===== */
.zd-lesson{max-width:860px}
.zd-sheet{position:relative; background:var(--zd-paper); border:1px solid var(--zd-sand); border-radius:18px; overflow:hidden; padding-bottom:28px}
.zd-hero{margin:0; background:var(--zd-navy); line-height:0}
.zd-hero img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover}
.zd-head{padding:22px 28px 4px; display:grid; gap:4px}
.zd-eyebrow{margin:0 0 4px; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; font-size:14px; color:var(--zd-orange-deep)}
.zd-head h1{margin:0; font-family:var(--zd-f-nl); font-weight:800; font-size:32px; line-height:1.2}
.zd-sub{margin:0; font-size:17px; color:var(--zd-ink-2)}
.zd-how{margin:10px 0 0; font-size:14px; color:var(--zd-text-2); background:var(--zd-cream); border-radius:10px; padding:9px 14px}
.zd-locked{margin:14px 28px 0; display:flex; flex-direction:column; gap:12px}
.zd-locked-sum{margin:0; font-size:15px; color:var(--zd-text-2)}
.zd-locked-preview{position:relative; display:flex; flex-direction:column; gap:10px}
.zd-locked-preview .zd-try-head{margin:0}
.zd-locked-preview .zd-try-src{font-size:13px; color:var(--zd-muted)}
.zd-try-blur{filter:blur(3px); color:#B9AE98; user-select:none; pointer-events:none}
.zd-locked-preview .zd-try-out{min-height:64px}
.zd-lockbox{background:var(--zd-cream); border:2px solid var(--zd-orange); border-radius:16px; padding:20px 18px; display:flex; flex-direction:column;
  gap:10px; align-items:center; text-align:center}
.zd-lockbox-i{width:44px; height:44px; border-radius:50%; background:var(--zd-orange-soft); color:var(--zd-orange-deep); display:flex; align-items:center; justify-content:center}
.zd-lockbox h2{margin:0; font-family:var(--zd-f-display); font-weight:500; font-size:20px}
.zd-lockbox p{margin:0; font-size:14px; color:var(--zd-text-2)}
.zd-lockbox .zd-btn{align-self:stretch; text-decoration:none; text-align:center; font-size:16px; padding:12px 18px; color:#fff}
.zd-lockbox .zd-btn:hover{color:#fff}
.zd-locked-free{margin:18px 28px 24px}
.zd-locked-free h2{margin:0 0 10px; font-family:var(--zd-f-display); font-weight:500; font-size:18px}
@media (max-width:600px){ .zd-locked, .zd-locked-free{margin-left:16px; margin-right:16px} }

.zd-player{display:flex; align-items:center; gap:14px; margin:16px 28px 0; padding:10px 14px; background:var(--zd-cream); border:1px solid var(--zd-sand); border-radius:14px}
.zd-play{flex:0 0 auto; width:46px; height:46px; border-radius:50%; border:0; background:var(--zd-orange-deep); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center}
.zd-play:hover{background:#9A4418}
.zd-play .zd-i:last-child,.zd-player.is-playing .zd-play .zd-i:first-child{display:none}
.zd-player.is-playing .zd-play .zd-i:last-child{display:block}
.zd-track{flex:1 1 auto; min-width:0}
.zd-bar{position:relative; height:8px; background:var(--zd-sand); border-radius:99px; cursor:pointer}
.zd-bar:focus-visible{outline:2px solid var(--zd-orange); outline-offset:3px}
.zd-fill{position:absolute; left:0; top:0; bottom:0; width:0; background:var(--zd-orange); border-radius:99px}
.zd-time{display:flex; justify-content:space-between; font-family:var(--zd-f-nl); font-size:12px; color:var(--zd-muted); margin-top:4px}
.zd-speed{display:flex; gap:4px; flex:0 0 auto}
.zd-sp{font-family:var(--zd-f-nl); font-weight:700; font-size:13px; border:1px solid var(--zd-sand-2); background:transparent; color:var(--zd-muted);
  border-radius:8px; padding:6px 8px; min-height:36px; cursor:pointer}
.zd-sp[aria-pressed="true"]{border-color:var(--zd-navy); background:var(--zd-navy); color:#fff}

.zd-tools{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; padding:16px 28px 0}
.zd-saved-n{font-size:15px; color:var(--zd-muted)}
.zd-saved-n b{color:var(--zd-orange-deep)}

.zd-text{margin:16px 28px 0; font-family:var(--zd-f-nl); font-weight:600; font-size:20px; line-height:2.05}
.zd-text p{margin:0 0 18px}
.zd-text p:last-child{margin-bottom:0}
.zd-s{transition:background .2s; border-radius:4px}
.zd-s.lit{background:#FFF6D9}
.zd-w{cursor:pointer; border-radius:4px; padding:1px 1px; border-bottom:1.5px dotted #B9AE98; transition:background .12s,color .12s}
.zd-w:hover{background:var(--zd-orange-soft)}
.zd-w:focus-visible{outline:2px solid var(--zd-orange); outline-offset:1px}
.zd-w.active{background:var(--zd-orange-deep); color:#fff; border-bottom-color:var(--zd-orange-deep)}
.zd-w.is-saved{border-bottom:2px solid var(--zd-green)}
.zd-w.speaking{background:var(--zd-hl); color:var(--zd-navy); border-bottom-color:#E0A800}
.zd-w.active.speaking{background:var(--zd-orange-deep); color:#fff}
.zd-th{display:none; font-family:var(--zd-f-body); font-weight:400; font-size:16px; line-height:1.5; color:#2E5940; background:var(--zd-green-soft);
  padding:4px 10px; border-radius:6px; margin:2px 0 12px}
.zd.show-th .zd-s{display:block}
.zd.show-th .zd-th{display:block}

/* ===== diary: Ploy's notebook (approved mockup https://claude.ai/artifact/QxAKDXFWFZvgM4XoaAxGoZ) ===== */
.zd-diary-top{display:flex; flex-wrap:wrap; gap:28px 40px; align-items:center; padding:36px 28px 4px}
.zd-diary-top .zd-head{flex:1 1 300px; min-width:0; padding:0}
.zd-photo{margin:0; flex:0 1 380px; min-width:0; position:relative; background:#fff; padding:10px 10px 28px;
  box-shadow:0 6px 18px rgba(31,51,82,.14); transform:rotate(-2deg)}
.zd-photo img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover}
.zd-tape{position:absolute; top:-12px; left:38%; width:92px; height:26px; background:rgba(251,226,207,.85); transform:rotate(3deg)}
.zd-dagboek,.zd-sign,.zd-date-wd{font-family:'Caveat',cursive; font-weight:700; color:var(--zd-orange-deep)}
.zd-dagboek{margin:0; font-size:30px; line-height:1}
.zd-meta{margin:0; font-size:14px; color:var(--zd-muted)}
.zd-tools-r{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center}
.zd-daynav{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.zd-daychip{font-family:var(--zd-f-nl); font-weight:700; font-size:14px; text-decoration:none; color:var(--zd-navy) !important; background:var(--zd-cream);
  border:1px solid var(--zd-sand-2); border-radius:999px; padding:7px 14px; min-height:40px; display:inline-flex; align-items:center}
.zd-daychip:hover{border-color:var(--zd-navy)}
.zd-day{display:flex; flex-wrap:wrap; gap:8px 28px; padding-top:22px; margin-top:22px; border-top:1px dashed var(--zd-sand-2); scroll-margin-top:90px}
.zd-day:first-child{margin-top:0}
.zd-text .zd-date{flex:0 0 116px; display:flex; flex-direction:column; align-items:flex-start; font-family:var(--zd-f-nl); line-height:1.15}
.zd-date .zd-w{border-bottom-style:dotted}
.zd-date-wd{font-size:25px}
.zd-date-num{font-weight:800; font-size:54px; line-height:1; color:var(--zd-navy)}
.zd-date-rest{font-weight:700; font-size:17px; color:var(--zd-navy)}
.zd-date-th{font-family:var(--zd-f-body); font-weight:400; font-size:13px; line-height:1.4; color:var(--zd-muted); margin-top:4px}
.zd-day-body{flex:999 1 480px; min-width:0}
.zd-text .zd-ruled{margin:0; line-height:44px;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 43px,#EFE4D0 43px,#EFE4D0 44px); background-position:0 6px}
.zd-ruled .zd-th{line-height:1.5}
.zd-sign{margin:6px 0 0 !important; text-align:right; font-size:26px; line-height:1.2}

/* dialogue: first speaker left, second right */
.zd-chat{display:flex; flex-direction:column; gap:14px}
.zd-chat + .zd-chat{margin-top:20px; padding-top:18px; border-top:1px dashed var(--zd-sand-2)}
.zd-turn{display:flex; flex-direction:column; align-items:flex-start; max-width:86%; min-width:0}
.zd-turn.r{align-self:flex-end; align-items:flex-end}
.zd-who{display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin:0 4px 5px; font-family:var(--zd-f-body); font-weight:400; font-size:14px; line-height:1.3; color:var(--zd-muted)}
.zd-turn.r .zd-who{flex-direction:row-reverse}
.zd-ava{flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--zd-f-nl); font-weight:800; font-size:14px; color:#fff; background:var(--zd-navy)}
.zd-turn.r .zd-ava{background:var(--zd-orange-deep)}
.zd-name{font-weight:600; color:var(--zd-navy); font-size:15px}
.zd-bubble{max-width:100%; background:var(--zd-cream); border:1px solid var(--zd-sand); border-radius:4px 16px 16px 16px; padding:9px 14px;
  font-size:19px; line-height:1.95; overflow-wrap:anywhere; transition:box-shadow .15s}
.zd-turn.r .zd-bubble{background:#FDEBDD; border-color:#F3CDB2; border-radius:16px 4px 16px 16px}
.zd-turn:has(.speaking) .zd-bubble{box-shadow:0 0 0 2px #E0A800}
.zd-bubble .zd-th{margin:4px 0 6px}

.zd-saved{margin:24px 28px 0; padding-top:18px; border-top:1px solid var(--zd-sand)}
.zd-saved-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.zd-saved h2{display:flex; gap:8px; align-items:center; font-family:var(--zd-f-display); font-size:18px; font-weight:500; margin:0}
.zd-saved h2 .zd-i{color:var(--zd-orange)}
.zd-saved-list{display:flex; flex-wrap:wrap; gap:8px}
.zd-schip{background:var(--zd-cream); border:1px solid var(--zd-sand); border-radius:10px; padding:4px 6px 4px 12px; font-size:15px; display:flex; align-items:center; gap:8px}
.zd-schip .nl{font-family:var(--zd-f-nl); font-weight:800}
.zd-schip .th{color:var(--zd-muted)}
.zd-schip button{border:0; background:none; color:var(--zd-muted); cursor:pointer; font-size:18px; line-height:1; min-width:32px; min-height:32px}
.zd-schip button:hover{color:var(--zd-orange-deep)}

/* translation popup — navy card as in the brand-kit lesson mockup */
.zd-pop{position:absolute; z-index:20; width:320px; max-width:calc(100% - 24px); background:var(--zd-navy); color:var(--zd-cream);
  border-radius:14px; box-shadow:0 12px 32px rgba(31,51,82,.28); padding:14px 16px 16px}
.zd-pop p{margin:0}
.zd-pop-x{position:absolute; top:6px; right:6px; width:40px; height:40px; border:0; background:none; color:#C9D2E3; cursor:pointer;
  display:flex; align-items:center; justify-content:center}
.zd-pop-word{font-family:var(--zd-f-nl); font-weight:800; font-size:22px; margin:0 36px 2px 0 !important}
.zd-pop-th{font-family:var(--zd-f-display); font-size:18px; color:#FFD3B0; margin-bottom:4px !important}
.zd-pop-note{font-size:14px; color:#C9D2E3; line-height:1.5; margin-bottom:12px !important}
.zd-pop-note:empty{display:none}
.zd-pop-actions{display:flex; gap:6px; flex-wrap:wrap}
.zd-pbtn{display:inline-flex; gap:6px; align-items:center; font-size:14px; cursor:pointer; background:transparent; color:var(--zd-cream);
  border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:6px 12px; min-height:38px}
.zd-pbtn:hover{background:rgba(255,255,255,.12)}
.zd-pbtn-main{background:var(--zd-orange-deep); border-color:var(--zd-orange-deep); color:#fff}
.zd-pbtn-main:hover{background:#9A4418}
.zd-pbtn-main.is-saved{background:var(--zd-green-deep); border-color:var(--zd-green-deep)}
.zd-pop-sent{margin-top:12px !important; padding:8px 10px; background:rgba(255,255,255,.1); border-radius:8px; font-size:15px; line-height:1.5}

.zd-pager{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px}
.zd-pager-a{display:flex; gap:10px; align-items:center; background:var(--zd-paper); border:1px solid var(--zd-sand); border-radius:14px;
  padding:12px 16px; text-decoration:none; color:var(--zd-navy) !important; min-height:64px}
.zd-pager-a:hover{border-color:var(--zd-sand-2)}
.zd-pager-a small{display:block; font-size:13px; color:var(--zd-muted)}
.zd-pager-a [lang="nl"]{font-family:var(--zd-f-nl); font-weight:800}
.zd-pager-next{justify-content:flex-end; text-align:right; grid-column:2}

@media (max-width:600px){
  .zd-lesson{padding:0 0 32px}
  .zd-lesson .zd-crumbs{padding:12px 16px 0; margin-bottom:12px}
  .zd-sheet{border-radius:0; border-left:0; border-right:0}
  .zd-head{padding:16px 16px 2px}
  .zd-head h1{font-size:25px}
  .zd-player{margin:14px 16px 0; padding:8px 10px; gap:10px}
  .zd-sp{padding:4px 6px; font-size:12px}
  .zd-tools{padding:14px 16px 0}
  .zd-text{margin:14px 16px 0; font-size:18px; line-height:2}
  .zd-diary-top{padding:22px 16px 0; gap:18px}
  .zd-photo{margin:0 6px; flex-basis:100%; padding:8px 8px 22px}
  .zd-dagboek{font-size:26px}
  .zd-daynav{flex-wrap:nowrap; overflow-x:auto; width:100%; margin-right:-16px; scrollbar-width:none}
  .zd-daychip,.zd-daynav .zd-flabel{flex-shrink:0}
  .zd-text .zd-date{flex:1 1 100%; flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:2px 8px}
  .zd-date-wd{font-size:24px}
  .zd-date-num{display:none}
  .zd-date-rest{font-weight:800; font-size:21px}
  .zd-text .zd-ruled{line-height:40px; background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 39px,#EFE4D0 39px,#EFE4D0 40px); background-position:0 5px}
  .zd-turn{max-width:93%}
  .zd-bubble{font-size:18px; padding:8px 12px}
  .zd-saved{margin:20px 16px 0}
  .zd-pager{padding:0 16px; grid-template-columns:1fr}
  .zd-pager-next{grid-column:auto}
  /* phones: the popup is a bottom sheet */
  .zd-pop{position:fixed; left:0 !important; right:0; bottom:0; top:auto !important; width:100%; max-width:100%;
    border-radius:16px 16px 0 0; padding:16px 18px 22px}
}

/* ===== shortcodes inside Elementor pages ([zelfdutch_levels] / [zelfdutch_free] / [zelfdutch_try]) ===== */
.zd.zd-embed{max-width:none; padding:0; margin:0}
.zd-home-levels{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.zd-hlevel{background:var(--zd-paper); border:1px solid var(--zd-sand); border-radius:18px; padding:22px 24px; text-decoration:none;
  color:var(--zd-navy) !important; display:flex; flex-direction:column; gap:6px; transition:border-color .15s, transform .15s}
.zd-hlevel:hover{border-color:var(--zd-sand-2); transform:translateY(-2px)}
.zd-hlevel:focus-visible{outline:3px solid var(--zd-orange); outline-offset:2px}
.zd-hlevel-id{font-family:var(--zd-f-nl); font-weight:800; font-size:40px; line-height:1}
.zd-hlevel-name{font-family:var(--zd-f-display); font-size:19px}
.zd-hlevel-desc{font-size:15px; color:var(--zd-text-2)}
.zd-hlevel-n{margin-top:6px; font-size:14px; color:var(--zd-orange-deep)}
.zd-home-free{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); gap:18px}
.zd-home-free .zd-card-nl{font-size:17px}
.zd-home-free .zd-card-foot{display:none}

.zd-try{background:var(--zd-paper); border:1px solid var(--zd-sand); border-radius:18px; padding:20px 22px; display:flex; flex-direction:column; gap:14px}
.zd-try-head{display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; justify-content:space-between}
.zd-try-title{font-family:var(--zd-f-display); font-size:19px}
.zd-try-src{font-size:14px; color:var(--zd-muted)}
.zd-try-text{display:flex; flex-direction:column; gap:8px}
.zd-try-line{margin:0; display:flex; flex-wrap:wrap; gap:2px 10px; align-items:baseline}
.zd-try-who{font-family:var(--zd-f-display); font-size:13px; color:var(--zd-orange-deep); min-width:44px}
.zd-try-nl{font-family:var(--zd-f-nl); font-weight:700; font-size:19px; line-height:1.7}
.zd-try-th{flex-basis:100%; padding-left:54px; font-size:15px; color:var(--zd-ink-2)}
.zd-try-out{min-height:76px; background:var(--zd-navy); color:var(--zd-cream); border-radius:14px; padding:12px 16px; display:flex; flex-direction:column; gap:2px; justify-content:center}
.zd-try-hint{font-size:14px; color:#C9D2E3}
.zd-try-word{font-family:var(--zd-f-nl); font-weight:800; font-size:21px}
.zd-try-mean{font-family:var(--zd-f-display); font-size:17px; color:#FFD3B0}
.zd-try-note{font-size:13px; color:#C9D2E3}
.zd-try-foot{display:flex; flex-wrap:wrap; gap:4px 16px; align-items:center; justify-content:space-between}
.zd-try-more{font-family:var(--zd-f-display); font-size:15px}
@media (max-width:600px){
  .zd-home-levels{gap:12px}
  .zd-hlevel{flex-direction:row; flex-wrap:wrap; align-items:center; gap:2px 14px; padding:14px 16px; border-radius:14px}
  .zd-hlevel-id{font-size:30px; flex:0 0 52px}
  .zd-hlevel-name{flex:1 1 0; min-width:0}
  .zd-hlevel-desc{display:none}
  .zd-hlevel-n{flex-basis:100%; margin:0 0 0 66px; font-size:13px}
  .zd-try{padding:16px}
  .zd-try-th{padding-left:0}
}

/* ===== signup: checkout + order received (commerce.php) — approved signup mockup ===== */
body.woocommerce-checkout{background:#FBF3E6}
/* focused header while signing up: logo only (mockup) */
body.woocommerce-checkout .ast-builder-menu-1,
body.woocommerce-checkout .ast-header-button-1,
body.woocommerce-checkout [data-section="section-header-mobile-trigger"]{display:none !important}
body.woocommerce-checkout .entry-title{font-family:'Mitr',sans-serif; font-weight:500; color:#1F3352}
body.woocommerce-checkout .woocommerce{font-family:'IBM Plex Sans Thai Looped',system-ui,sans-serif; color:#1F3352}
body.woocommerce-checkout .woocommerce h3{font-family:'Mitr',sans-serif; font-weight:500; color:#1F3352; font-size:20px}
body.woocommerce-checkout .woocommerce input.input-text{border:1px solid #CFC3AC; border-radius:12px; padding:12px 14px; background:#fff; min-height:48px}
body.woocommerce-checkout .woocommerce input.input-text:focus{border-color:#E2702A; outline:2px solid #FBE2CF}
body.woocommerce-checkout .woocommerce form .form-row label{font-size:15px; color:#1F3352}
body.woocommerce-checkout .woocommerce .description{font-size:13px; color:#6E6A60; background:none; padding:4px 0 0}
body.woocommerce-checkout .woocommerce .description::before{display:none}
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout #order_review{background:#FFFCF6; border:1px solid #EADFCB; border-radius:22px; padding:26px}
body.woocommerce-checkout #order_review{border:2px solid #E2702A}
body.woocommerce-checkout #order_review_heading{font-family:'Mitr',sans-serif; font-weight:500}
body.woocommerce-checkout #payment{background:#FBF3E6 !important; border-radius:14px}
body.woocommerce-checkout #payment .payment_box{background:#FFFCF6 !important; color:#4A4A45}
body.woocommerce-checkout #payment .payment_box::before{display:none}
body.woocommerce-checkout #place_order{width:100%; font-family:'Mitr',sans-serif; font-size:18px; font-weight:400; background:#B4501C; border-color:#B4501C;
  color:#fff; border-radius:999px; padding:15px 24px}
body.woocommerce-checkout #place_order:hover{background:#9A4418}
body.woocommerce-checkout .order-total .amount{font-family:'Mitr',sans-serif; font-size:28px; font-weight:600}
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{background:#FFFCF6; border-top-color:#E2702A; color:#1F3352}
.zd-consents{display:flex; flex-direction:column; gap:6px; margin:10px 0 14px; font-size:14px; color:#4A4A45}
.zd-consents .form-row{margin:0 !important; padding:0 !important}
.zd-consents input[type=checkbox]{width:18px; height:18px; accent-color:#B4501C; vertical-align:-3px; margin-right:6px}

.zd-steps{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center;
  font-family:'Mitr',sans-serif; font-size:15px; color:#6E6A60}
.zd-step{display:inline-flex; gap:8px; align-items:center; margin:0}
.zd-step-n{width:28px; height:28px; border-radius:50%; border:2px solid #CFC3AC; display:inline-flex; align-items:center; justify-content:center;
  font-family:'Nunito',sans-serif; font-weight:800; font-size:14px; box-sizing:border-box}
.zd-step.is-now{color:#B4501C}
.zd-step.is-now .zd-step-n{background:#B4501C; border-color:#B4501C; color:#fff}
.zd-step.is-done{color:#3F6B51}
.zd-step.is-done .zd-step-n{background:#3F6B51; border-color:#3F6B51; color:#fff}
.zd-steps-line{width:28px; height:2px; background:#CFC3AC; margin:0}

.zd-plan-pick{display:flex; flex-direction:column; gap:10px; margin:0 0 24px}
.zd-plan-pick h3{margin:0 0 4px}
.zd-plan-opt{display:flex; gap:14px; align-items:center; background:#fff; border:1px solid #EADFCB; border-radius:14px; padding:14px 16px;
  text-decoration:none !important; color:#1F3352 !important; min-height:44px}
.zd-plan-opt:hover{border-color:#CFC3AC}
.zd-plan-opt.is-on{background:#FBE2CF; border:2px solid #E2702A}
.zd-plan-dot{flex:0 0 20px; height:20px; border-radius:50%; border:2px solid #CFC3AC; box-sizing:border-box; background:#fff}
.zd-plan-opt.is-on .zd-plan-dot{border:6px solid #B4501C}
.zd-plan-txt{flex:1 1 auto; display:flex; flex-direction:column; min-width:0}
.zd-plan-name{font-family:'Mitr',sans-serif; font-size:17px}
.zd-plan-tag{font-size:12px; background:#B4501C; color:#fff; border-radius:999px; padding:1px 10px; margin-left:6px; vertical-align:2px}
.zd-plan-per{font-size:14px; color:#6E6A60}
.zd-plan-price{font-family:'Mitr',sans-serif; font-weight:600; font-size:22px; white-space:nowrap}
.zd-plan-price small{font-weight:400; font-size:14px; color:#6E6A60}

/* order received */
body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-customer-details,
body.woocommerce-order-received .woocommerce-bacs-bank-details{display:none}
body.woocommerce-order-received .woocommerce-thankyou-order-received{font-family:'Mitr',sans-serif; font-size:20px; color:#3F6B51}
body.woocommerce-order-received ul.woocommerce-order-overview{font-size:14px; color:#4A4A45; border:0; padding:0; margin:0 0 18px}
.zd-pay{display:flex; flex-direction:column; gap:14px; max-width:560px}
.zd-pay-card{background:#FFFCF6; border:1px solid #EADFCB; border-radius:20px; padding:20px; margin:0}
.zd-pay-card h2{margin:0 0 6px; font-family:'Mitr',sans-serif; font-weight:500; font-size:22px; color:#1F3352}
.zd-pay-card h2 small{font-family:'IBM Plex Sans Thai Looped',sans-serif; font-size:13px; color:#6E6A60; font-weight:400}
.zd-pay-amount{border:2px solid #E2702A; display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center}
.zd-pay-label{font-size:14px; color:#6E6A60}
.zd-pay-total{font-family:'Mitr',sans-serif; font-weight:600; font-size:40px; line-height:1}
.zd-pay-total small{font-weight:400; font-size:16px; color:#6E6A60}
.zd-pay-qr{width:240px; max-width:100%; height:auto; border-radius:14px; border:1px solid #EADFCB; background:#fff}
.zd-pay-hint{font-size:13px; color:#6E6A60; display:block}
.zd-pay-missing{margin:0; color:#8A3C12; background:#FBE2CF; border-radius:12px; padding:10px 12px; font-size:14px}
.zd-pay .zd-btn{display:block; width:100%; text-align:center; text-decoration:none; font-size:17px; padding:13px 20px; box-sizing:border-box; color:#fff}
.zd-pay .zd-btn-line{background:#FFFCF6; color:#B4501C; border-color:#B4501C}
.zd-pay .zd-btn-line:hover{background:#FBE2CF; color:#B4501C}
.zd-pay .zd-btn-peach{background:#FFD3B0; border-color:#FFD3B0; color:#1F3352}
.zd-pay-bank summary{font-family:'Mitr',sans-serif; font-size:16px; cursor:pointer}
.zd-pay-bank p{margin:8px 0 0; font-size:15px}
.zd-slip{display:flex; flex-direction:column; gap:12px}
.zd-slip-drop{border:2px dashed #CFC3AC; border-radius:14px; padding:18px 14px; display:flex; flex-direction:column; gap:6px; align-items:center;
  text-align:center; background:#FBF3E6; cursor:pointer}
.zd-slip-t{font-family:'Mitr',sans-serif; font-size:16px; color:#B4501C}
.zd-slip-drop input[type=file]{font-size:14px; max-width:100%}
.zd-pay-err{margin:0; color:#8A3C12; background:#FBE2CF; border-radius:12px; padding:8px 12px; font-size:14px}
.zd-pay-done{text-align:center; display:flex; flex-direction:column; gap:8px; align-items:center}
.zd-pay-done p{margin:0; color:#4A4A45}
.zd-pay-ok{width:60px; height:60px; border-radius:50%; background:#E1EDE5; color:#3F6B51; font-size:30px; font-weight:800;
  display:flex; align-items:center; justify-content:center}
.zd-timeline{list-style:none; display:flex; flex-direction:column; gap:12px}
.zd-timeline li{position:relative; padding-left:38px; display:flex; flex-direction:column; margin:0}
.zd-timeline li::before{content:""; position:absolute; left:0; top:2px; width:24px; height:24px; border-radius:50%; border:2px solid #CFC3AC;
  box-sizing:border-box; background:#FFFCF6}
.zd-timeline li.is-done::before{content:"\2713"; background:#3F6B51; border-color:#3F6B51; color:#fff; font-size:13px; font-weight:800;
  display:flex; align-items:center; justify-content:center}
.zd-timeline li.is-now::before{background:#FBE2CF; border-color:#E2702A}
.zd-timeline b{font-family:'Mitr',sans-serif; font-weight:400; font-size:16px}
.zd-timeline li.is-now b{color:#B4501C}
.zd-timeline span{font-size:13px; color:#6E6A60}
.zd-survey{display:flex; flex-direction:column; gap:12px}
.zd-survey fieldset{border:0; margin:0; padding:0}
.zd-survey legend{font-family:'Mitr',sans-serif; font-size:15px; margin-bottom:6px; padding:0}
.zd-chips{display:flex; flex-wrap:wrap; gap:8px}
.zd-chipopt{display:inline-flex; align-items:center; gap:6px; border:1px solid #CFC3AC; border-radius:999px; padding:7px 12px; font-size:14px;
  background:#fff; cursor:pointer; min-height:24px}
.zd-chipopt input{accent-color:#B4501C; margin:0}
.zd-pay-free{background:#1F3352; border-color:#1F3352; color:#FBF3E6}
.zd-pay-free h2{color:#FBF3E6}
.zd-pay-free p{color:#C9D2E3; margin:0 0 10px}
.zd-pay-thanks{font-family:'Mitr',sans-serif; color:#3F6B51; text-align:center}
@media (max-width:600px){
  body.woocommerce-checkout #customer_details, body.woocommerce-checkout #order_review{padding:18px}
  .zd-steps{font-size:13px; gap:6px}
  .zd-steps-line{width:14px}
}

/* ===== My account (templates/account.php) — approved account mockup ===== */
body.woocommerce-account{background:#FBF3E6}
body.woocommerce-account .entry-title{font-family:'Mitr',sans-serif; font-weight:500; color:#1F3352}
body.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px}
body.woocommerce-account .woocommerce-MyAccount-navigation a{display:block; padding:10px 14px; border-radius:12px; text-decoration:none;
  font-family:'Mitr',sans-serif; color:#1F3352}
body.woocommerce-account .woocommerce-MyAccount-navigation .is-active a{background:#FBE2CF; color:#B4501C}
body.woocommerce-account .woocommerce-MyAccount-content{font-family:'IBM Plex Sans Thai Looped',system-ui,sans-serif; color:#1F3352}
.zd-acct{display:flex; flex-direction:column; gap:14px; max-width:620px}
.zd-acct-hi h2{margin:0; font-family:'Mitr',sans-serif; font-weight:500; font-size:26px; color:#1F3352}
.zd-acct-hi p{margin:2px 0 0; font-size:14px; color:#6E6A60}
.zd-acct-card{background:#FFFCF6; border:2px solid #EADFCB; border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:8px}
.zd-acct-card.is-expiring{border-color:#E2702A}
.zd-acct-row{display:flex; justify-content:space-between; align-items:center; gap:10px}
.zd-acct-card h3, .zd-acct-last h3{margin:0; font-family:'Mitr',sans-serif; font-weight:400; font-size:18px}
.zd-acct-pill{font-family:'Mitr',sans-serif; font-size:13px; border-radius:999px; padding:3px 12px; background:#EFE8DA; color:#4A463E; white-space:nowrap}
.zd-acct-card.is-active .zd-acct-pill{background:#E1EDE5; color:#2E5940}
.zd-acct-card.is-expiring .zd-acct-pill, .zd-acct-card.is-review .zd-acct-pill, .zd-acct-card.is-unpaid .zd-acct-pill{background:#FBE2CF; color:#8A3C12}
.zd-acct-head{margin:0; font-family:'Mitr',sans-serif; font-weight:600; font-size:22px; line-height:1.3}
.zd-acct-sub{margin:0; font-size:14px; color:#4A4A45}
.zd-acct-bar{height:8px; border-radius:999px; background:#EADFCB; overflow:hidden}
.zd-acct-bar span{display:block; height:100%; border-radius:999px; background:#3F6B51}
.zd-acct-card.is-expiring .zd-acct-bar span{background:#E2702A}
.zd-acct .zd-btn{display:block; text-align:center; text-decoration:none; font-size:16px; padding:12px 18px; color:#fff}
.zd-acct .zd-btn-peach{background:#FFD3B0; border-color:#FFD3B0; color:#1F3352}
.zd-acct-last{background:#1F3352; border-radius:18px; padding:18px; color:#FBF3E6; display:flex; flex-direction:column; gap:4px}
.zd-acct-last h3{color:#FBF3E6}
.zd-acct-last-nl{margin:0; font-family:'Nunito',sans-serif; font-weight:800; font-size:18px}
.zd-acct-last-meta{margin:0 0 6px; font-size:13px; color:#C9D2E3}
.zd-acct-links{background:#FFFCF6; border:1px solid #EADFCB; border-radius:18px; overflow:hidden; display:flex; flex-direction:column}
.zd-acct-links a{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid #EADFCB;
  text-decoration:none; color:#1F3352; min-height:24px}
.zd-acct-links a:last-child{border-bottom:0}
.zd-acct-links span{display:flex; flex-direction:column}
.zd-acct-links b{font-family:'Mitr',sans-serif; font-weight:400; font-size:16px}
.zd-acct-links small{font-size:13px; color:#6E6A60}
body.woocommerce-account table.woocommerce-orders-table{border-radius:14px; overflow:hidden; background:#FFFCF6}
body.woocommerce-account .woocommerce-button{background:#B4501C; color:#fff; border-radius:999px; font-family:'Mitr',sans-serif}

/* ===== vocabulary + practice (vocab.php, templates/words.php, review.php, practice.php) — approved mockup row 4 ===== */
.zd-words, .zd-review, .zd-practice{display:flex; flex-direction:column; gap:16px; max-width:760px}
.zd-words-head h1{margin:0; font-family:var(--zd-f-display); font-weight:500; font-size:30px}
.zd-words-head p{margin:4px 0 0; color:var(--zd-text-2); font-size:15px}
.zd-seg{display:flex; background:#EFE8DA; border-radius:999px; padding:4px; gap:4px}
.zd-seg a{flex:1; text-align:center; border-radius:999px; padding:9px 12px; font-family:var(--zd-f-display); font-size:15px; text-decoration:none; color:var(--zd-text-2)}
.zd-seg a[aria-current]{background:var(--zd-paper); color:var(--zd-navy); box-shadow:0 1px 3px rgba(31,51,82,.12)}
.zd-seg-sm{background:none; padding:0; gap:8px}
.zd-seg-sm a{flex:0 0 auto; border:1px solid var(--zd-sand-2); background:var(--zd-paper); font-size:14px; padding:8px 14px}
.zd-seg-sm a[aria-current]{background:var(--zd-navy); color:var(--zd-cream); border-color:var(--zd-navy)}
.zd-seg-n{background:var(--zd-orange-deep); color:#fff; border-radius:999px; padding:0 8px; font-size:12px}
.zd-today{background:var(--zd-navy); color:var(--zd-cream); border-radius:18px; padding:16px 18px; display:flex; gap:14px; align-items:center}
.zd-today div{flex:1}
.zd-today h2{margin:0; font-family:var(--zd-f-display); font-weight:400; font-size:17px; color:var(--zd-cream)}
.zd-today p{margin:0; font-size:13px; color:#C9D2E3}
.zd-today .zd-btn{text-decoration:none; white-space:nowrap}
.zd .zd-btn-peach{background:#FFD3B0; border-color:#FFD3B0; color:var(--zd-navy) !important}
.zd-cats h2, .zd-practice-list h2{margin:0 0 10px; font-family:var(--zd-f-display); font-weight:500; font-size:20px}
.zd-cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr)); gap:10px}
.zd-cat{background:var(--zd-paper); border:1px solid var(--zd-sand); border-radius:16px; padding:14px; text-decoration:none; color:var(--zd-navy) !important;
  display:flex; flex-direction:column; gap:6px; min-height:96px; justify-content:space-between}
.zd-cat:hover{border-color:var(--zd-orange)}
.zd-cat-t{font-family:var(--zd-f-display); font-size:16px; line-height:1.3}
.zd-cat-n{font-size:12px; color:var(--zd-muted)}
.zd-cat-bar, .zd-rv-bar{height:5px; border-radius:999px; background:var(--zd-sand); overflow:hidden; display:block}
.zd-cat-bar span, .zd-rv-bar span{display:block; height:100%; background:var(--zd-green-deep); border-radius:999px}
.zd-rv-bar{height:6px}
.zd-rv-bar span{background:var(--zd-orange); transition:width .2s}
.zd-pr-level{background:var(--zd-paper); border:1px solid var(--zd-sand); border-radius:14px; padding:10px 14px; margin-top:8px}
.zd-pr-level summary{font-family:var(--zd-f-display); cursor:pointer; font-size:16px}
.zd-pr-level ul{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column}
.zd-pr-level li a{display:flex; justify-content:space-between; gap:10px; padding:9px 2px; border-top:1px solid var(--zd-sand); text-decoration:none; color:var(--zd-navy) !important}
.zd-pr-level li a span:first-child{font-family:var(--zd-f-nl); font-weight:700}
.zd-pr-meta{font-size:13px; color:var(--zd-muted); display:inline-flex; gap:4px; align-items:center; white-space:nowrap}
.zd-art{display:inline-block; border-radius:6px; padding:0 7px; font-family:var(--zd-f-nl); font-weight:800; font-size:14px; line-height:1.6}
.zd-art-de{background:#E3E9F3; color:var(--zd-navy)}
.zd-art-het{background:var(--zd-green-soft); color:#2E5940}
.zd-art-verb{background:#EFE8DA; color:#4A463E; font-family:var(--zd-f-display); font-weight:400; font-size:12px}
.zd-art-legend{margin:0; font-size:13px; color:var(--zd-muted); display:flex; gap:6px; align-items:center}
.zd-wlist, .zd-plist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.zd-wcard{background:var(--zd-paper); border:1px solid var(--zd-sand); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:6px}
.zd-wcard-top{display:flex; align-items:center; gap:8px}
.zd-wcard-nl{font-family:var(--zd-f-nl); font-weight:800; font-size:20px; margin-right:auto}
.zd-wcard-nl.zd-phrase{font-size:17px; font-weight:700}
.zd-wcard-th{font-family:var(--zd-f-display); font-size:16px; color:var(--zd-ink-2)}
.zd-wcard-note{font-size:13px; color:var(--zd-muted)}
.zd-wcard-ex{background:var(--zd-cream); border-radius:10px; padding:8px 10px; display:flex; flex-direction:column; font-size:13px; color:var(--zd-text-2)}
.zd-wcard-ex span[lang]{font-family:var(--zd-f-nl); font-weight:700; font-size:15px; color:var(--zd-navy)}
.zd-wcard-ex a, .zd-wcard-src{font-size:12px; margin-top:2px}
.zd-ibtn{width:36px; height:36px; border-radius:50%; border:1px solid var(--zd-sand); background:var(--zd-cream); color:var(--zd-orange-deep);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; padding:0}
.zd-star{color:var(--zd-muted)}
.zd-star.is-on{background:var(--zd-orange-soft); color:var(--zd-orange-deep)}
.zd-star.is-on svg{fill:currentColor}
.zd-known{display:inline-flex; gap:8px; align-items:center; font-size:13px; color:var(--zd-green-deep)}
.zd-known input{width:18px; height:18px; accent-color:var(--zd-green-deep); margin:0}
.zd-sticky-cta{position:sticky; bottom:12px; z-index:5}
.zd-sticky-cta .zd-btn, .zd-words > p > .zd-btn{display:block; text-align:center; text-decoration:none; color:#fff; box-shadow:0 8px 20px rgba(180,80,28,.25)}
.zd-saved-group h2{margin:6px 0; font-family:var(--zd-f-nl); font-size:17px}
.zd-saved-rows{list-style:none; margin:0; padding:0; background:var(--zd-paper); border:1px solid var(--zd-sand); border-radius:14px; overflow:hidden}
.zd-saved-rows li{display:flex; gap:10px; align-items:center; padding:10px 14px; border-top:1px solid var(--zd-sand)}
.zd-saved-rows li:first-child{border-top:0}
.zd-saved-rows li span[lang]{font-family:var(--zd-f-nl); font-weight:800; min-width:110px}
.zd-saved-rows li span:nth-child(2){flex:1; color:var(--zd-ink-2)}
.zd-empty-note{background:var(--zd-paper); border:1px dashed var(--zd-sand-2); border-radius:14px; padding:14px}
/* flashcards */
.zd-rv-head{display:flex; align-items:center; gap:12px}
.zd-rv-prog{flex:1; display:flex; flex-direction:column; gap:4px}
.zd-rv-label{font-size:13px; color:var(--zd-muted)}
.zd-rv-dir{display:flex; gap:6px}
.zd-rv-card{min-height:340px; border:2px solid var(--zd-sand); border-radius:24px; background:var(--zd-paper); box-shadow:0 18px 40px rgba(31,51,82,.12);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:24px; text-align:center; color:var(--zd-navy); cursor:pointer; font:inherit}
.zd-rv-card:hover,.zd-rv-card:focus{background:var(--zd-paper); color:var(--zd-navy)}   /* the theme paints every button blue on hover/focus */
.zd-rv-card.is-flipped{border-color:var(--zd-orange)}

/* [zelfdutch_facts] — live numbers on the home page */
.zd-facts-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0}
.zd-fact{background:var(--zd-cream); border:1px solid var(--zd-sand); border-radius:14px; padding:12px 16px; display:flex; flex-direction:column}
.zd-fact dd{order:1; margin:0; font-family:var(--zd-f-nl); font-weight:800; font-size:28px; line-height:1.2; color:var(--zd-navy)}
.zd-fact dt{order:2; font-size:14px; color:#6E6A60}
.zd-facts-note{margin:12px 0 0; font-size:14px; color:#6E6A60}
@media (max-width:640px){
  .zd-facts-grid{grid-template-columns:1fr 1fr; gap:10px}
  .zd-fact dd{font-size:24px}
  .zd-facts-note{font-size:13px}
}
.zd-rv-front, .zd-rv-back{display:flex; flex-direction:column; gap:10px; align-items:center}
.zd-rv-front{flex-direction:row; flex-wrap:wrap; justify-content:center}
.zd-rv-back[hidden], .zd-rv-hint[hidden]{display:none !important}
.zd-rv-nl{font-family:var(--zd-f-nl); font-weight:800; font-size:38px; line-height:1.15}
.zd-rv-th{font-family:var(--zd-f-display); font-size:26px; color:var(--zd-orange-deep)}
.zd-rv-front .zd-rv-th{color:var(--zd-navy)}
.zd-rv-note{font-size:13px; color:var(--zd-muted)}
.zd-rv-hint{font-size:14px; color:var(--zd-muted)}
.zd-rv-ex{background:var(--zd-cream); border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; font-size:13px; color:var(--zd-text-2)}
.zd-rv-ex span[lang]{font-family:var(--zd-f-nl); font-weight:700; font-size:15px; color:var(--zd-navy)}
.zd-rv-tools{display:flex; justify-content:center}
.zd-rv-tools .zd-btn{display:inline-flex; gap:6px; align-items:center}
.zd-rv-answer{display:flex; gap:10px}
.zd-rv-answer[hidden]{display:none}
.zd-rv-answer .zd-btn{flex:1; font-size:16px; padding:13px}
.zd-rv-good{background:var(--zd-green-deep); border-color:var(--zd-green-deep)}
.zd-rv-good:hover{background:#2E5940}
.zd-rv-foot{text-align:center; font-size:12px}
/* practice */
.zd-practice-cta{margin:18px 28px 0; display:flex; align-items:center; gap:12px; background:var(--zd-navy); color:var(--zd-cream) !important; border-radius:16px;
  padding:14px 18px; text-decoration:none}
.zd-practice-cta span{flex:1; display:flex; flex-direction:column}
.zd-practice-cta b{font-family:var(--zd-f-display); font-weight:400; font-size:17px}
.zd-practice-cta small{font-size:13px; color:#C9D2E3}
.zd-pr-q{display:flex; flex-direction:column; gap:10px}
.zd-pr-q[hidden], .zd-pr-fb[hidden], .zd-pr-result[hidden], .zd-pr-foot[hidden]{display:none !important}
.zd-pr-kind{font-family:var(--zd-f-display); font-size:14px; color:var(--zd-orange-deep)}
.zd-pr-th{margin:0; font-family:var(--zd-f-display); font-size:24px; line-height:1.35}
.zd-pr-gap{margin:0; background:var(--zd-paper); border:1px solid var(--zd-sand); border-radius:16px; padding:16px; font-family:var(--zd-f-nl); font-weight:800; font-size:21px; line-height:1.6}
.zd-pr-blank{display:inline-block; min-width:90px; border-bottom:3px solid var(--zd-orange); color:var(--zd-orange-deep); text-align:center}
.zd-pr-answer{min-height:96px; background:var(--zd-paper); border:2px dashed var(--zd-sand-2); border-radius:16px; padding:12px; display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start}
.zd-pr-ph{color:#B9AE98; font-size:14px; padding:8px}
.zd-pr-bank{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.zd .zd-tile{border:1px solid var(--zd-sand-2); background:#fff; color:var(--zd-navy); border-radius:12px; padding:8px 14px; font-family:var(--zd-f-nl); font-weight:800;
  font-size:18px; box-shadow:0 2px 0 var(--zd-sand); cursor:pointer; min-height:44px}
.zd-tile:disabled{background:#EFE8DA; color:#B9AE98; box-shadow:none; cursor:default}
.zd-tile.is-cut{visibility:hidden}
.zd-tile.is-ok{background:var(--zd-green-soft); border-color:var(--zd-green-deep); color:#2E5940}
.zd-tile.is-bad{background:var(--zd-orange-soft); border-color:var(--zd-orange); color:#8A3C12}
.zd-pr-opts{display:grid; grid-template-columns:1fr; gap:10px}
.zd .zd-opt{display:flex; justify-content:space-between; align-items:center; gap:10px; border:1px solid var(--zd-sand); background:var(--zd-paper); color:var(--zd-navy);
  border-radius:14px; padding:13px 16px; font-family:var(--zd-f-nl); font-weight:800; font-size:18px; cursor:pointer; text-align:left; min-height:48px}
.zd-opt small{font-family:var(--zd-f-body); font-weight:400; font-size:13px; color:var(--zd-muted)}
.zd-opt[aria-checked="true"]{border:2px solid var(--zd-orange)}
.zd-opt.is-ok{border:2px solid var(--zd-green-deep); background:var(--zd-green-soft)}
.zd-opt.is-bad{border:2px solid var(--zd-orange); background:var(--zd-orange-soft)}
.zd-pr-fb{border-radius:16px; padding:14px 16px; display:flex; flex-direction:column; gap:4px}
.zd-pr-fb.is-ok{background:var(--zd-green-soft)}
.zd-pr-fb.is-bad{background:var(--zd-orange-soft)}
.zd-pr-fb-t{font-family:var(--zd-f-display); font-weight:400; font-size:18px}
.zd-pr-fb.is-ok .zd-pr-fb-t{color:#2E5940}
.zd-pr-fb.is-bad .zd-pr-fb-t{color:#8A3C12}
.zd-pr-fb-label[hidden]{display:none}
.zd-pr-fb-nl{font-family:var(--zd-f-nl); font-weight:800; font-size:18px}
.zd-pr-fb-th{font-size:14px; color:var(--zd-text-2)}
.zd-pr-fb-notes{display:flex; flex-direction:column; gap:2px; font-size:13px; color:var(--zd-ink-2)}
.zd-pr-listen{align-self:flex-start; display:inline-flex !important; gap:6px; align-items:center; margin-top:4px}
.zd-pr-listen[hidden]{display:none !important}
.zd-pr-foot{display:flex; gap:10px}
.zd-pr-foot .zd-btn{font-size:16px; padding:13px 16px}
.zd-pr-check{flex:1}
.zd-pr-check:disabled{background:var(--zd-sand-2); border-color:var(--zd-sand-2); cursor:default}
.zd-pr-check.is-next{background:var(--zd-green-deep); border-color:var(--zd-green-deep)}
.zd-pr-cut[hidden]{display:none}
.zd-pr-result{display:flex; flex-direction:column; gap:12px}
.zd-pr-result > .zd-btn{display:block; text-align:center; text-decoration:none; color:#fff}
.zd-pr-result > .zd-btn-line{color:var(--zd-navy) !important}
.zd-pr-review ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.zd-pr-review li{display:flex; flex-direction:column; font-size:13px; color:var(--zd-text-2)}
.zd-pr-review li span[lang]{font-family:var(--zd-f-nl); font-weight:800; font-size:15px; color:var(--zd-navy)}
.zd-pr-msg{font-family:var(--zd-f-display); color:var(--zd-green-deep)}
@media (max-width:600px){
  .zd-practice-cta{margin-left:16px; margin-right:16px}
  .zd-rv-card{min-height:300px}
  .zd-rv-nl{font-size:32px}
}

/* ===== /practice/ hub (templates/practice-hub.php) — approved mockup row 7 ===== */
.zd-phub{display:flex; flex-direction:column; gap:28px; max-width:980px; margin:0 auto; padding:8px 0 40px}
.zd-phub h2{margin:0 0 12px; font-family:var(--zd-f-display); font-weight:500; font-size:22px; color:var(--zd-navy)}
.zd-phub-hero{background:var(--zd-navy); color:#FBF3E6; border-radius:24px; padding:32px; display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center}
.zd-phub-hero h1{margin:0 0 10px; font-family:var(--zd-f-display); font-weight:500; font-size:36px; line-height:1.3; color:#FBF3E6}
.zd-phub-hero p{margin:0; color:#C9D2E3; line-height:1.7}
.zd-phub-hero .zd-phub-eyebrow{font-family:var(--zd-f-display); font-size:15px; color:#FFD3B0; margin-bottom:8px}
.zd .zd-phub-try{display:inline-block; margin-top:18px; background:#FFD3B0; border-color:#FFD3B0; color:var(--zd-navy) !important; font-size:17px; padding:12px 28px}
.zd-phub-hero .zd-phub-small{margin-top:8px; font-size:13px; color:#C9D2E3}
.zd-phub-example{background:var(--zd-paper); color:var(--zd-navy); border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:10px}
.zd-phub-ex-label{font-size:12px; color:var(--zd-muted)}
.zd-phub .zd-phub-ex-th{margin:0; font-family:var(--zd-f-display); font-size:18px; color:var(--zd-navy)}
.zd-phub-ex-answer, .zd-phub-ex-bank{display:flex; gap:6px; flex-wrap:wrap}
.zd-phub-ex-answer{min-height:40px; border-bottom:2px dashed var(--zd-sand); padding-bottom:8px}
.zd-phub-ex-answer span, .zd-phub-ex-bank span{font-family:var(--zd-f-nl); font-weight:700; font-size:16px; border-radius:10px; padding:6px 12px}
.zd-phub-ex-answer span{background:var(--zd-orange-soft)}
.zd-phub-ex-bank span{background:#fff; border:1px solid var(--zd-sand-2)}
.zd-phub-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0 0 12px}
.zd-phub-stats div{background:var(--zd-paper); border:1px solid var(--zd-sand); border-radius:12px; padding:10px 12px; display:flex; flex-direction:column}
.zd-phub-stats dd{order:1; margin:0; font-family:var(--zd-f-nl); font-weight:800; font-size:24px; color:var(--zd-navy)}
.zd-phub-stats dt{order:2; font-size:13px; color:var(--zd-muted); line-height:1.4}
.zd-phub-resume{background:var(--zd-paper); border:2px solid var(--zd-orange); border-radius:16px; padding:14px 16px; display:flex; align-items:center; gap:12px}
.zd-phub-resume > div{display:flex; flex-direction:column; min-width:0; flex:1}
.zd-phub-resume b{font-family:var(--zd-f-nl); font-weight:800; font-size:17px; color:var(--zd-navy)}
.zd-phub-resume span{font-size:13px; color:var(--zd-ink-2)}
.zd-phub-resume .zd-phub-small{color:var(--zd-muted); font-size:12px}
.zd-phub-resume .zd-btn{white-space:nowrap}
.zd-phub-how ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.zd-phub-how li{display:flex; gap:12px; align-items:flex-start}
.zd-phub-how li > span{flex:0 0 40px; height:40px; border-radius:12px; background:var(--zd-orange-soft); color:var(--zd-orange-deep); display:flex; align-items:center; justify-content:center}
.zd-phub-how h3{margin:0; font-family:var(--zd-f-display); font-weight:500; font-size:17px; color:var(--zd-navy)}
.zd-phub-how p{margin:2px 0 0; color:var(--zd-text-2); font-size:14px; line-height:1.6}
.zd-phub-tabs{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; background:#EFE4D2; border-radius:999px; padding:4px; max-width:520px}
.zd-phub-tabs button{border:0; border-radius:999px; padding:9px 4px; font-family:var(--zd-f-display); font-size:15px; background:transparent; color:var(--zd-muted); cursor:pointer; min-height:44px}
.zd-phub-tabs button[aria-selected="true"]{background:var(--zd-paper); color:var(--zd-navy); box-shadow:0 1px 3px rgba(31,51,82,.12)}
.zd-phub-tabs button:hover, .zd-phub-tabs button:focus{background:var(--zd-paper); color:var(--zd-navy)}
.zd-phub-note{margin:12px 0; font-size:13px; color:var(--zd-muted); background:var(--zd-paper); border:1px dashed var(--zd-sand-2); border-radius:12px; padding:8px 12px}
.zd-phub-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.zd-phub-list a{height:100%; box-sizing:border-box; background:var(--zd-paper); border:1px solid var(--zd-sand); border-radius:14px; padding:12px 14px; text-decoration:none; color:var(--zd-navy) !important; display:flex; gap:12px; align-items:center}
.zd-phub-list a:hover{border-color:var(--zd-orange)}
.zd-phub-no{flex:0 0 36px; height:36px; border-radius:50%; background:#EFE4D2; color:var(--zd-navy); font-family:var(--zd-f-nl); font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center}
.zd-phub-no.is-done{background:var(--zd-green-deep); color:#fff}
.zd-phub-set{display:flex; flex-direction:column; min-width:0; flex:1}
.zd-phub-set b{font-family:var(--zd-f-nl); font-weight:800; font-size:16px; line-height:1.3}
.zd-phub-set > span{font-size:13px; color:var(--zd-ink-2)}
.zd-phub-score{display:flex; align-items:center; gap:8px; margin-top:4px}
.zd-phub-bar{flex:1; height:6px; border-radius:999px; background:#EFE4D2; overflow:hidden}
.zd-phub-bar span{display:block; height:100%; background:var(--zd-green-deep)}
.zd-phub-score small{font-size:12px; color:var(--zd-muted); white-space:nowrap}
.zd-phub-tag{align-self:flex-start; font-family:var(--zd-f-display); font-size:12px; color:var(--zd-muted); background:#F1E7D6; border-radius:999px; padding:2px 10px; white-space:nowrap; display:inline-flex; align-items:center; gap:3px}
.zd-phub-tag.is-free{color:var(--zd-green-deep); background:var(--zd-green-soft)}
.zd-phub-words{background:var(--zd-orange-soft); border-radius:18px; padding:20px}
.zd-phub-words h2{margin-bottom:4px; font-size:19px}
.zd-phub-words p{margin:0 0 6px; color:var(--zd-text-2); font-size:14px}
.zd-phub-words a{font-family:var(--zd-f-display)}
/* /words/ hub: one card to the practice page instead of the long list */
.zd-phub-link{display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--zd-navy); color:#FBF3E6 !important; border-radius:16px; padding:16px 18px; text-decoration:none}
.zd-phub-link span{display:flex; flex-direction:column}
.zd-phub-link b{font-family:var(--zd-f-display); font-weight:500; font-size:17px}
.zd-phub-link small{font-size:13px; color:#C9D2E3}
@media (max-width:900px){
  .zd-phub-list{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .zd-phub{gap:22px; padding-top:0}
  .zd-phub-hero{grid-template-columns:1fr; padding:24px 16px; border-radius:18px; gap:16px}
  .zd-phub-hero h1{font-size:28px}
  .zd .zd-phub-try{display:block; text-align:center}
  .zd-phub-hero .zd-phub-small{text-align:center}
  .zd-phub h2{font-size:20px}
  .zd-phub-how ul, .zd-phub-list{grid-template-columns:1fr}
  .zd-phub-stats dd{font-size:22px}
  .zd-phub-tabs{max-width:none}
}

/* plan upgrade: account card, /upgrade/, open-amount QR (approved mockup PareZsQ5eE8gqVRR2gdZBu) */
.zd-pay-type{margin:0; font-size:15px}
.zd-pay-type b{display:block; font-family:'Mitr',sans-serif; font-weight:600; font-size:40px; line-height:1.15; color:#B4501C}
.zd-pay .zd-pay-copy{width:auto; display:inline-block; font-size:15px; padding:10px 18px}
.zd-up-card.is-offer{border-color:#E2702A}
.zd-up-head{display:flex; gap:12px; align-items:center}
.zd-up-i{flex:0 0 44px; height:44px; border-radius:50%; background:#FBE2CF; color:#B4501C; display:flex; align-items:center; justify-content:center}
.zd-up-rows{display:flex; flex-direction:column; gap:8px}
.zd-up-row{display:flex; justify-content:space-between; align-items:baseline; gap:10px; background:#FBF3E6; border-radius:12px; padding:10px 14px}
.zd-up-row small{color:#6E6A60}
.zd-up-row b{font-family:'Mitr',sans-serif; font-size:18px; white-space:nowrap}
.zd-up-until{margin:0; font-size:14px; color:#6E6A60}
.zd-up{display:flex; flex-direction:column; gap:14px; max-width:560px}
.zd-up h1{margin:0; font-family:'Mitr',sans-serif; font-weight:500; font-size:26px; color:#1F3352}
.zd-up > p{margin:0; color:#4A4A45}
.zd-up-back{font-size:14px; align-self:flex-start}
.zd-up-form{display:flex; flex-direction:column; gap:14px}
.zd-up-form fieldset{border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.zd-up-form legend{font-family:'Mitr',sans-serif; font-size:18px; margin-bottom:8px}
.zd-up-opt{display:flex; align-items:center; gap:12px; background:#FFFCF6; border:1px solid #EADFCB; border-radius:14px; padding:14px 16px; min-height:64px; cursor:pointer}
.zd-up-opt:has(input:checked){border:2px solid #E2702A}
.zd-up-opt input{width:22px; height:22px; margin:0; accent-color:#B4501C}
.zd-up-opt span{flex:1; display:flex; flex-direction:column}
.zd-up-opt small{color:#6E6A60; font-size:14px}
.zd-up-opt-p{font-family:'Mitr',sans-serif; font-size:20px; white-space:nowrap}
.zd-up-sum{display:flex; flex-direction:column; gap:8px}
.zd-up-sum div{display:flex; justify-content:space-between; gap:10px}
.zd-up-sum div span:first-child{color:#6E6A60}
.zd-up-sum .is-b{font-weight:600}
.zd-up-sum .is-b span:first-child{color:inherit}
.zd-up-total{border-top:1px solid #EADFCB; padding-top:10px; align-items:baseline}
.zd-up-total b:last-child{font-family:'Mitr',sans-serif; font-size:24px; color:#B4501C}
.zd-up-sum small{color:#6E6A60; font-size:13px}
.zd-up .zd-btn{display:block; width:100%; text-align:center; text-decoration:none; font-size:17px; padding:13px 20px; box-sizing:border-box}
.zd-up-msg{margin:0 0 10px; background:#FBF3E6; border:1px solid #EADFCB; border-radius:12px; padding:12px 14px; font-weight:600; word-break:break-word}
.zd-up-apps{display:flex; gap:10px; flex-wrap:wrap}
.zd-up-apps .zd-btn{flex:1 1 140px; width:auto}
.zd .zd-up-apps a.zd-btn-line{color:#1F3352}
.zd-up a.zd-up-line{background:#06C755; border-color:#06C755}