:root{
  --green-700:#134e41;
  --green-600:#1a5f4c;
  --green-500:#1f6f58;
  --green-200:#cfe6df;
  --green-100:#e8f3f0;
  --text-900:#16302a;
  --text-700:#314a43;
  --muted-600:#6a7f78;
  --border:#d8e4e0;
  --bg:#f7faf9;
  --card:#f3f6f5;
  --tooltip-bg:#2f343c;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text-900); background:var(--bg);
}

.is-hidden{display:none !important}

/* Header */
.site-header{background:linear-gradient(90deg,var(--green-500),var(--green-700)); color:white; padding:28px 16px 16px}
.header-inner{max-width:1200px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.site-title{margin:0;font-size:28px;line-height:1.1}
.site-tagline{margin:4px 0 0;color:#dfeee9;font-weight:500}

/* Tabs */
.tabs{display:flex;gap:8px;margin-top:16px}
.tab{appearance:none;border:0;border-bottom:3px solid transparent;background:rgba(255,255,255,0.12);color:#fff;padding:10px 16px;border-radius:6px 6px 0 0;cursor:pointer;font-weight:600}
.tab:is(:hover,:focus){background:rgba(255,255,255,0.18)}
.tab.is-active{background:#fff;color:var(--green-700);border-color:var(--green-500)}
.tab-note{margin:10px 2px 8px;color:#e4f1ec}

/* Layout */
.container{max-width:1200px;margin:20px auto;padding:0 16px 48px}
.two-col{display:grid;grid-template-columns: minmax(460px,1fr) 420px;gap:28px;align-items:start}
.two-col.is-single-column{grid-template-columns:1fr}
.form-actions{display:flex;align-items:center;gap:12px;margin:0}
.clear-btn{appearance:none;background:#fff;color:var(--green-600);border:1px solid var(--border);border-radius:6px;padding:8px 14px;font-weight:600;cursor:pointer;transition:background 0.15s ease,color 0.15s ease,border-color 0.15s ease,box-shadow 0.15s ease}
.clear-btn:is(:hover,:focus){background:var(--green-100);color:var(--green-700);border-color:var(--green-600);box-shadow:0 1px 2px rgba(17,46,39,0.18)}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-list details{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 16px;box-shadow:0 6px 18px rgba(17,46,39,0.08)}
.faq-list summary{font-weight:600;cursor:pointer;list-style:inside;color:var(--green-700)}
.faq-list summary::marker{color:var(--green-500)}
.faq-list p{margin:8px 0 4px;color:var(--text-700);line-height:1.5}
@media (max-width: 980px){
  .two-col{grid-template-columns:1fr}
}

.left-col .tab-panel{display:none}
.left-col .tab-panel.is-active{display:block}

/* Section */
.section-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 8px;padding-bottom:6px;border-bottom:3px solid var(--green-200)}
.section-title{margin:12px 0 6px;color:var(--green-600);font-size:18px;letter-spacing:0.2px;border-bottom:3px solid var(--green-200);padding-bottom:6px}
.section-header .section-title{margin:0;border-bottom:0;padding:0}
.tab-panel .section-header:first-of-type{margin-top:0}
.tab-panel .section-title:first-of-type{margin-top:0}
.section-body{background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-bottom:24px}

/* Field */
.field{display:grid;grid-template-columns:minmax(200px,240px) minmax(0,1fr);column-gap:10px;row-gap:4px;align-items:start;margin:8px 0}
.field > label:not(.field-checkbox){grid-column:1;grid-row:1;font-weight:600;color:var(--text-700);justify-self:end;text-align:right;padding-top:6px}
.field .req{color:#cc3d3d}
.field-input{grid-column:2;grid-row:1;position:relative;width:100%;display:flex;align-items:center;gap:12px}
.field-input > :not(.info){flex:1 1 auto;min-width:0}
.field-input .info{position:relative;order:2;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:999px;background:var(--green-100);color:var(--green-600);font-weight:700;font-size:12px;cursor:help;z-index:5;outline:none;flex-shrink:0}
.field-input .info:focus-visible{outline:2px solid var(--green-500);outline-offset:2px}
.field-input .info::after{content:attr(data-tooltip);position:absolute;left:calc(100% + 14px);top:50%;transform:translateY(-50%);background:var(--tooltip-bg);color:#fff;padding:10px 12px;border-radius:8px;box-shadow:0 8px 18px rgba(0,0,0,0.18);width:min(360px, calc(100vw - 120px));max-width:none;min-width:160px;font-size:13px;font-weight:500;line-height:1.35;white-space:pre-line;opacity:0;visibility:hidden;transition:opacity 0.1s ease;pointer-events:none;z-index:10}
.field-input .info::before{content:"";position:absolute;top:50%;left:calc(100% + 6px);transform:translateY(-50%);border:6px solid transparent;border-right-color:var(--tooltip-bg);opacity:0;visibility:hidden;transition:opacity 0.1s ease;pointer-events:none;z-index:10}
.field-input .info:hover::after,
.field-input .info:focus::after,
.field-input .info:hover::before,
.field-input .info:focus::before{opacity:1;visibility:visible}
.field-input .info::after{pointer-events:none}
.field-input input[type="text"], .field-input select{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--text-900)}
.field-variant{width:100%}
.field-variant.is-hidden{display:none}

.field-input .date-grid{display:grid;grid-template-columns:72px minmax(0,1fr) 110px;gap:8px}
.field-input .name-grid{display:grid;grid-template-columns:1.8fr 0.8fr 2fr;gap:8px;min-width:0}
.field-input .date-grid input,
.field-input .name-grid input,
.field-input .date-grid select{padding-right:12px}
.field-input .author-field{display:flex;align-items:flex-start;gap:8px;width:100%}
.author-list{position:relative;display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-width:0}
.author-row{position:relative;display:flex;align-items:center;gap:8px;width:100%}
.author-row .name-grid{flex:1 1 auto;width:100%}
.author-row--extra .name-grid{grid-template-columns:1.8fr 0.8fr 2fr}
.author-row--extra .name-grid input{width:100%}
.field-input .entity-field{display:flex;align-items:center;gap:8px;width:100%}
.icon-btn{border:none;background:transparent;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;padding:0;cursor:pointer;flex-shrink:0;color:var(--green-600);transition:color 0.15s ease,transform 0.15s ease}
.icon-btn:focus-visible{outline:2px solid var(--green-200);outline-offset:2px}
.icon-btn--add{color:var(--green-500);align-self:flex-start;margin-top:4px}
.icon-btn--add:hover{color:var(--green-600);transform:scale(1.08)}
.icon-btn--remove{color:#d83a3a;font-size:20px}
.author-row--extra .icon-btn--remove{position:absolute;right:-36px;top:50%;transform:translateY(-50%);transition:color 0.15s ease,transform 0.15s ease}
.author-row--extra .icon-btn--remove:hover{color:#b32222;transform:translateY(-50%) scale(1.08)}
.field-input .author-field > .info{margin-top:6px}
.field-dependent.is-hidden{display:none}
.field-input .date-grid--with-button{grid-template-columns:72px minmax(0,1fr) 110px;gap:8px;align-items:center}

.field-checkbox{grid-column:2;grid-row:2;justify-self:start;display:flex;align-items:center;gap:6px;margin:2px 0 0;color:var(--muted-600);font-size:13px;font-weight:500;line-height:1.1}
input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:14px;
  height:14px;
  margin:0;
  border:1px solid var(--border);
  border-radius:3px;
  background:#fff;
  display:inline-grid;
  place-content:center;
  cursor:pointer;
}
input[type="checkbox"]::after{
  content:"";
  width:8px;
  height:8px;
  transform:scale(0);
  transition:transform 0.12s ease-in-out;
  background:var(--green-600);
  clip-path:polygon(14% 55%, 0% 70%, 45% 100%, 100% 25%, 84% 10%, 43% 62%);
}
input[type="checkbox"]:checked::after{
  transform:scale(1);
}

/* Outputs */
.right-col{display:flex;flex-direction:column;gap:18px}
.output-card{background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 1px 0 rgba(0,0,0,0.02)}
.output-card-header{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 0}
.output-card h3{margin:0;color:var(--green-600)}
.copy-btn{appearance:none;background:var(--green-600);color:#fff;border:0;border-radius:6px;padding:6px 10px;font-weight:600;cursor:pointer}
.copy-btn:is(:hover,:focus){background:var(--green-700)}
.output-body{padding:12px 14px 16px;margin:10px; border-radius:8px;background:var(--card);color:var(--text-700);min-height:96px;white-space:pre-wrap}
.support-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:16px;margin-top:8px;box-shadow:0 1px 0 rgba(0,0,0,0.02)}
.support-card h3{margin:0 0 8px;color:var(--green-600)}
.support-card p{margin:0 0 12px;color:var(--text-700);font-size:14px;line-height:1.5}
.support-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.support-links a{color:var(--green-600);font-weight:600;text-decoration:none}
.support-links a:is(:hover,:focus){text-decoration:underline;color:var(--green-700)}

/* Helpers */
input::placeholder{color:#9fb0aa}
select{background-color:#fff}

@media (max-width: 640px){
  .field{grid-template-columns:1fr}
  .field > label:not(.field-checkbox){grid-column:1;padding-top:0;justify-self:start;text-align:left}
  .field-input{grid-column:1}
  .field-checkbox{grid-column:1}
  .field-input .date-grid--with-button{grid-template-columns:repeat(3, minmax(0,1fr));gap:6px}
  .date-grid--with-button .today-btn{width:100%}
}








 `n.field-input select{padding-right:56px;background-position:right 18px center;background-repeat:no-repeat;} 
.field-input select{min-width:0}
.field-input .name-first{min-width:0}
.field-input .name-middle{width:72px;min-width:72px}
.field-input .name-last{min-width:0}