:root{--lc-navy:#173f69;--lc-blue:#287dbb;--lc-green:#2f9b7f;--lc-gold:#dfa020;--lc-purple:#7653b5;--lc-bg:#f4f7fb;--lc-line:#d8e3ee;--lc-muted:#647b90}
body{margin:0!important;padding:0!important;align-items:stretch!important;background:var(--lc-bg)!important;color:#183650;font-family:Nunito,Arial,sans-serif!important;text-align:left!important}
body>header:not(.page-title){max-width:none!important;width:100%!important;min-height:58px;margin:0!important;padding:10px 24px!important;background:var(--lc-navy)!important;box-shadow:0 2px 10px #173b6122}
body>header:not(.page-title) h1{margin:0 auto!important;color:#fff!important;font-size:1.2rem!important;text-align:center!important}
#menuBtn,.pro-header .back-link{background:#215c94!important;color:#fff!important;border:0!important;border-radius:9px!important;padding:9px 14px!important;font-weight:850!important;text-decoration:none!important}
.pro-header{position:relative!important;inset:auto!important;width:100%!important;height:58px!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;padding:10px 24px!important;background:var(--lc-navy)!important}.pro-header span{position:absolute;left:50%;transform:translateX(-50%);font-weight:900}.pro-header .back-link[hidden]{display:none!important}
.page-title{display:none!important}
.lettercode-intro{width:min(1450px,calc(100% - 32px));margin:18px auto 0;padding:18px 20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.8fr);gap:22px;align-items:center;background:linear-gradient(125deg,#fff,#edf7ff);border:1px solid #cee0ee;border-radius:18px;box-shadow:0 7px 24px #173b6110}.lettercode-intro h2{margin:4px 0 8px;color:var(--lc-navy);font-size:1.45rem}.lettercode-intro p{margin:0;color:var(--lc-muted);line-height:1.55}.lettercode-intro .canva-tip{margin-top:9px;padding:8px 10px;border-left:4px solid var(--lc-purple);background:#f6f1ff;border-radius:6px}.lettercode-intro .eyebrow{color:#b06e00;font-size:.72rem;font-weight:950;letter-spacing:.11em}.lettercode-example{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:9px;padding:13px;border-radius:14px;background:#fff;border:1px solid var(--lc-line)}.lettercode-example strong{display:block;color:var(--lc-navy)}.lettercode-example small{color:var(--lc-muted)}.lettercode-example .code-box{display:flex;gap:3px;margin-top:7px}.lettercode-example i{display:grid;place-items:center;width:28px;height:31px;border:1px solid #8eb3d2;border-radius:4px;background:#f6fbff;font-style:normal;font-weight:900}.lettercode-example .arrow{color:var(--lc-green);font-size:1.5rem;font-weight:950}.lettercode-example button{grid-column:1/-1;margin:5px 0 0!important;background:var(--lc-green)!important;font-size:.86rem!important}
#main-content{display:grid!important;grid-template-columns:minmax(310px,390px) minmax(500px,1fr) 235px!important;gap:18px!important;width:min(1450px,calc(100% - 32px))!important;max-width:none!important;margin:18px auto!important;padding:0!important;align-items:start!important}
#left-panel,#center-panel,#right-panel-buttons{margin:0!important;padding:16px!important;background:#fff!important;border:1px solid var(--lc-line)!important;border-radius:17px!important;box-shadow:0 6px 20px #173b6110!important;box-sizing:border-box!important;min-width:0!important;max-width:none!important}
#controls{gap:12px!important}.control-group{position:relative;gap:7px!important;padding:13px!important;border:1px solid #e0e8f0;border-radius:12px;background:#f9fbfd}.control-group[data-step]::before{content:attr(data-step);position:absolute;right:10px;top:9px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#dceeff;color:var(--lc-blue);font-weight:950}
#controls label{padding-right:30px;color:var(--lc-navy)!important;font-size:.9rem}#controls textarea{width:100%!important;min-height:86px;padding:10px!important;border:1px solid #bfd1e0!important;border-radius:9px!important;background:#fff!important;resize:vertical}
.words-and-feedback-group{display:block!important}.words-input-area{width:100%!important}.feedback-messages{margin:8px 0 0!important;min-height:0!important;padding:8px 10px!important;border-radius:8px!important;background:#eef7fd!important;font-size:.82rem!important}
#woordFeedbackContainer{margin:0!important;padding:0!important;border:0!important}#woordFeedbackContainer details{border:1px solid var(--lc-line);border-radius:10px;background:#fff}#woordFeedbackContainer summary{padding:10px 12px;color:var(--lc-navy);font-weight:850;cursor:pointer}#woordFeedbackContainer ul{margin:0;padding:8px 28px 13px;max-height:160px;overflow:auto}
#center-panel::before{content:'3  Bekijk je werkblad';display:block;color:var(--lc-navy);font-size:1rem;font-weight:950}
#puzzelOutput{position:relative;width:min(100%,794px)!important;min-height:900px;margin:auto;padding:42px 46px!important;gap:17px!important;align-items:stretch!important;background:#fff;border:1px solid #e0e4e8;box-shadow:0 5px 20px #173b6120;box-sizing:border-box;overflow:hidden}
.lettercode-sheet-header{order:-10;border-bottom:1px solid #ccd9e4;padding-bottom:14px;margin-bottom:4px}.lettercode-identity{display:flex;justify-content:space-between;gap:35px;font-size:.82rem}.lettercode-identity span{display:flex;align-items:end;gap:7px;width:44%}.lettercode-identity i{flex:1;border-bottom:1px solid #506a80}.lettercode-sheet-header h2{text-align:center;margin:20px 0 7px;color:var(--lc-navy);font-size:1.55rem}.lettercode-sheet-header p{text-align:center;margin:0;color:var(--lc-muted);font-size:.9rem}
#right-panel-buttons{display:block!important;position:sticky;top:76px}#right-panel-buttons h3{margin:0 0 12px;text-align:center;color:var(--lc-navy)}.button-group{display:flex!important;flex-direction:column!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important}.button-group button{width:100%!important;min-width:0!important;margin:0!important;white-space:normal!important;font-size:.86rem!important;font-weight:900!important}.button-group #regenereerBtn{background:var(--lc-gold)!important}.button-group #downloadPngBtn{background:var(--lc-blue)!important}.button-group #downloadPdfBtn{background:var(--lc-green)!important}.button-group #toggleSolutionsBtn{background:#d67f1c!important}.button-group #downloadSolutionsPdfBtn{background:var(--lc-purple)!important}.solution-letter{color:#16834f!important;font-weight:950!important}.woord-rooster .solution-letter{font-size:1.05rem}.lettercode-solutions{outline:3px solid #b9e3cd}
.lettercode-intro{box-sizing:border-box}.regenerate-tip{margin:-2px 0 7px;padding:8px;border-radius:8px;background:#fff6da;color:#70551a;font-size:.75rem;line-height:1.4}.prefilled-letter{color:#16834f!important;font-weight:950!important}.letter-tip{display:block;margin-top:8px;padding:10px;border-radius:9px;background:#fff4cf;color:#694e08;font-size:.82rem;line-height:1.45}.letter-tip-step{display:grid;grid-template-columns:25px minmax(0,1fr);gap:9px;align-items:start;margin-top:9px;text-align:left}.letter-tip-step>b{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#dfa020;color:#fff;line-height:1}.letter-tip-step>span{display:block;min-width:0;overflow-wrap:anywhere}.letter-tip small{display:block;margin-top:10px;color:#796526;text-align:left}
@media(max-width:1100px){#main-content{grid-template-columns:350px 1fr!important}#right-panel-buttons{grid-column:1/-1;position:static}.button-group{display:grid!important;grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.lettercode-intro{grid-template-columns:1fr;width:calc(100% - 20px)}#main-content{grid-template-columns:1fr!important;width:calc(100% - 20px)!important}.button-group{grid-template-columns:1fr!important}.pro-header span{display:none}}