/* Gaemster UTM Builder 1.2.2
   Colors are CSS variables so a theme can override them, e.g.
   .gub-app{--gub-primary:#0a7;} */
.gub-app{
	--gub-ink:#14265c;--gub-muted:#596275;--gub-line:#dfe3ea;--gub-soft:#f5f7fb;
	--gub-surface:#fff;--gub-field:#fff;--gub-field-line:#7c8798;
	--gub-primary:#111827;--gub-primary-ink:#fff;--gub-danger:#b42318;--gub-focus:#1d4ed8;
	--gub-warn-bg:#fffaeb;--gub-warn-line:#f5c451;--gub-warn-ink:#6b4200;
	--gub-shadow:0 8px 30px rgba(20,38,92,.06);
	max-width:1100px;margin:0 auto 3rem;font-family:inherit;font-size:1rem;line-height:1.5;color:var(--gub-ink);text-align:left;scroll-margin-top:96px;
}
.gub-app.gub-theme-dark{
	--gub-ink:#e8ecf8;--gub-muted:#aab3c7;--gub-line:#2e3a5e;--gub-soft:#172043;
	--gub-surface:#0f1730;--gub-field:#0b1226;--gub-field-line:#7d8cad;
	--gub-primary:#fff;--gub-primary-ink:#0b1226;--gub-danger:#ff9a90;--gub-focus:#8ab4ff;
	--gub-warn-bg:#2b2208;--gub-warn-line:#8a6a12;--gub-warn-ink:#ffe3a0;--gub-shadow:none;
}
.gub-app *,.gub-app *::before,.gub-app *::after{box-sizing:border-box}
.gub-app h2,.gub-app h3,.gub-app h4{color:inherit;font-family:inherit;line-height:1.25}
.gub-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Intro */
.gub-intro{margin:0 0 1.25rem}
.gub-intro h2{font-size:clamp(1.7rem,3vw,2.5rem);margin:.15rem 0 .45rem}
.gub-intro p{max-width:760px;color:var(--gub-muted);margin:0}
.gub-eyebrow{text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;font-weight:800;color:var(--gub-muted)}

/* Cards */
.gub-card{background:var(--gub-surface);border:1px solid var(--gub-line);border-radius:18px;padding:clamp(1rem,2.5vw,1.75rem);box-shadow:var(--gub-shadow);margin-bottom:1rem}
.gub-card[hidden]{display:none}
.gub-output{background:linear-gradient(135deg,var(--gub-surface),var(--gub-soft))}
.gub-output h3,.gub-history h3{margin:.15rem 0 0;font-size:1.25rem}
.gub-out-title:focus{outline:none}

/* Form layout */
.gub-fields-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:0 1rem}
.gub-fields-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0 1rem}
.gub-field{margin-bottom:1rem;min-width:0;display:flex;flex-direction:column}
.gub-field label,.gub-rules legend{display:block;font-weight:700;font-size:.95rem}
.gub-field label span[aria-hidden]{color:var(--gub-danger)}
.gub-help{font-size:.8125rem;color:var(--gub-muted);line-height:1.4;margin:.2rem 0 .45rem;flex:1 0 auto}
.gub-error{display:block;color:var(--gub-danger);font-size:.875rem;font-weight:600;margin-top:.35rem}
.gub-error:empty{display:none}

/* Inputs */
.gub-app input[type=text],.gub-app input[type=url],.gub-app input[type=search],.gub-app select,.gub-result{
	width:100%;min-height:44px;margin:0;border:1px solid var(--gub-field-line);border-radius:10px;background:var(--gub-field);color:var(--gub-ink);
	font-family:inherit;font-size:16px;line-height:1.3;padding:.65rem .8rem;box-shadow:none;text-transform:none;letter-spacing:normal;text-shadow:none;
}
.gub-app input::placeholder{color:var(--gub-muted);opacity:.75}
.gub-app input[aria-invalid=true]{border-color:var(--gub-danger);border-width:2px}
.gub-app input[type=checkbox]{width:20px;height:20px;margin:0;flex:none;accent-color:var(--gub-primary)}

/* Focus: visible on every control, meets 3:1 contrast */
.gub-app a:focus-visible,.gub-app button:focus-visible,.gub-app input:focus-visible,.gub-app select:focus-visible,.gub-app textarea:focus-visible,.gub-app summary:focus-visible{
	outline:3px solid var(--gub-focus);outline-offset:2px;
}

/* Naming rules */
.gub-rules{border:1px solid var(--gub-line);border-radius:12px;padding:1rem;margin:.25rem 0 1.25rem;display:flex;align-items:center;gap:.75rem 1.5rem;flex-wrap:wrap;min-width:0}
.gub-rules legend{padding:0 .35rem;width:auto}
.gub-check{display:flex!important;align-items:center;gap:.5rem;font-weight:600!important;min-height:44px;cursor:pointer}
.gub-select-label{display:flex!important;align-items:center;gap:.5rem;font-weight:700}
.gub-select-label select{width:auto;min-width:160px}

/* Buttons */
.gub-actions{display:flex;gap:.65rem;align-items:center;flex-wrap:wrap}
.gub-app button{font-family:inherit;font-size:1rem;line-height:1.2;cursor:pointer;border-radius:10px;padding:.7rem 1.1rem;min-height:44px;font-weight:700;letter-spacing:normal;text-transform:none;box-shadow:none;text-shadow:none;margin:0}
.gub-app .gub-primary{background:var(--gub-primary);border:1px solid var(--gub-primary);color:var(--gub-primary-ink)}
.gub-app .gub-secondary{background:var(--gub-surface);border:1px solid var(--gub-field-line);color:var(--gub-ink)}
.gub-app .gub-linkbtn{background:transparent;border:0;padding:.5rem .6rem;text-decoration:underline;color:var(--gub-ink);font-weight:600}
.gub-app .gub-danger{color:var(--gub-danger)}
.gub-app button:hover:not(:disabled){filter:brightness(.94)}
.gub-app button:disabled{opacity:.5;cursor:not-allowed}

/* Output */
.gub-output-head,.gub-history-head{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-bottom:1rem}
.gub-status{font-size:.75rem;border:1px solid var(--gub-line);border-radius:999px;padding:.3rem .65rem;background:var(--gub-surface);white-space:nowrap}
.gub-result{min-height:110px;resize:vertical;margin-bottom:.5rem;overflow-wrap:anywhere;word-break:break-all}
.gub-result-meta{font-size:.8125rem;color:var(--gub-muted);margin-bottom:.75rem}
.gub-warnings{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.5rem}
.gub-warnings[hidden]{display:none}
.gub-warnings li{background:var(--gub-warn-bg);border:1px solid var(--gub-warn-line);color:var(--gub-warn-ink);border-radius:10px;padding:.6rem .8rem;font-size:.875rem}
.gub-copy-note{min-height:1.5em;font-size:.9rem;font-weight:700;margin-top:.5rem}
.gub-privacy{font-size:.8125rem;color:var(--gub-muted);margin:1rem 0 0}
.gub-privacy a{color:inherit}

/* History */
.gub-count{font-size:.8125rem;color:var(--gub-muted);margin-top:.15rem}
.gub-storage-note,.gub-history-note{background:var(--gub-warn-bg);border:1px solid var(--gub-warn-line);color:var(--gub-warn-ink);border-radius:10px;padding:.6rem .8rem;font-size:.875rem;margin:0 0 1rem}
.gub-history-note{display:flex;align-items:center;justify-content:space-between;gap:.75rem;background:var(--gub-soft);border-color:var(--gub-line);color:var(--gub-ink)}
.gub-storage-note[hidden],.gub-history-note[hidden],.gub-search[hidden],.gub-history-list[hidden],.gub-empty[hidden],.gub-no-results[hidden]{display:none}
.gub-search{margin-bottom:1rem}
.gub-empty,.gub-no-results{padding:1.2rem;border-radius:10px;background:var(--gub-soft);color:var(--gub-muted);margin:0}
.gub-history-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:.9rem}
.gub-item{border:1px solid var(--gub-line);border-radius:14px;padding:1rem;background:var(--gub-surface);display:flex;flex-direction:column;gap:.5rem;min-width:0}
.gub-item-title{font-size:1rem;overflow-wrap:anywhere}
.gub-item-meta{font-size:.8125rem;color:var(--gub-muted);overflow-wrap:anywhere}
.gub-item-url{display:block;font-size:.8125rem;line-height:1.4;background:var(--gub-soft);border-radius:8px;padding:.5rem .6rem;color:var(--gub-ink)}
.gub-item-url-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;word-break:break-all}
.gub-item-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto}
.gub-app .gub-item-actions button{padding:.5rem .85rem;font-size:.9rem;border:1px solid var(--gub-field-line);background:var(--gub-surface);color:var(--gub-ink);text-decoration:none;font-weight:700;flex:1 1 auto}
.gub-app .gub-item-actions .gub-danger{color:var(--gub-danger)}

/* Guide + FAQ */
.gub-guide{margin-top:2rem}
.gub-guide h2{font-size:clamp(1.35rem,2.2vw,1.8rem);margin:2rem 0 .6rem}
.gub-guide h2:first-child{margin-top:0}
.gub-guide h3{font-size:1.1rem;margin:1.5rem 0 .6rem}
.gub-guide p,.gub-tips{max-width:760px}
.gub-guide p{margin:0 0 1rem}
.gub-defs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:.6rem;margin:0}
.gub-defs>div{background:var(--gub-soft);border-radius:12px;padding:.75rem 1rem}
.gub-defs dt{font-weight:800;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.95rem}
.gub-defs dd{margin:.2rem 0 0;color:var(--gub-muted)}
.gub-tag{font-family:inherit;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--gub-ink);border-radius:999px;padding:.05rem .45rem;margin-left:.35rem;vertical-align:middle}
.gub-tag-opt{border-color:var(--gub-muted);color:var(--gub-muted)}
.gub-tips{margin:0;padding-left:1.25rem}
.gub-tips li{margin-bottom:.5rem}
.gub-faq{display:grid;gap:.6rem}
.gub-faq details{border:1px solid var(--gub-line);border-radius:12px;background:var(--gub-surface)}
.gub-faq summary{cursor:pointer;font-weight:700;padding:.85rem 1rem;min-height:44px;overflow-wrap:anywhere}
.gub-faq details p{margin:0;padding:0 1rem 1rem;color:var(--gub-muted)}

/* Small screens */
@media (max-width:640px){
	.gub-output-head,.gub-history-head{flex-direction:column;align-items:flex-start}
	.gub-history-head .gub-actions{width:100%}
	.gub-history-head .gub-actions button{flex:1 1 auto}
	.gub-actions>.gub-primary,.gub-actions>.gub-secondary{flex:1 1 100%}
	.gub-history-head .gub-actions>.gub-secondary{flex:1 1 auto}
	.gub-rules{flex-direction:column;align-items:flex-start}
	.gub-select-label{flex-direction:column;align-items:flex-start;width:100%}
	.gub-select-label select{width:100%}
	.gub-card{border-radius:14px}
	.gub-history-note{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.gub-app *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Empty history: keep it slim so the tool stays near the top */
.gub-history-empty{padding:.9rem 1.1rem}
.gub-history-empty .gub-history-head{margin-bottom:.6rem}
.gub-history-empty .gub-history-head .gub-actions,.gub-history-empty .gub-count{display:none}
.gub-history-empty .gub-empty{padding:.7rem .9rem;font-size:.9rem}