@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url('../fonts/manrope/manrope-cyrillic.woff2') format('woff2');unicode-range:U+0400-052F,U+2116}
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url('../fonts/manrope/manrope-latin.woff2') format('woff2');unicode-range:U+0000-024F,U+2000-206F,U+20AC,U+2122}

/* One foundation for every public page. Tool files only define workspace geometry. */
:root{
  --bg:#fff;--surface:#fff;--surface-muted:#f5f6f8;--sidebar-bg:#f6f7f9;
  --text:#182033;--text-muted:#596477;--border:#dce1e8;
  --primary:#4654cc;--primary-hover:#3543ad;--primary-soft:#eef0fc;
  --success:#187346;--success-soft:#edf7f1;--warning:#895600;--warning-soft:#fff6e6;
  --danger:#b72f42;--danger-soft:#fff0f2;--disabled:#edf0f4;--disabled-text:#687386;
  --radius:8px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
  --font-sans:Manrope,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box;letter-spacing:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--font-sans);overflow-wrap:anywhere}
h1,h2,h3,h4,p,figure{margin:0}
h1,.page-title,.tool-page-title{font-size:30px;font-weight:750;line-height:1.25;overflow-wrap:anywhere}
h2,.card-title,.tool-panel-title{font-size:20px;font-weight:700;line-height:1.35}
h3{font-size:17px;font-weight:700;line-height:1.4}
h4{font-size:16px;line-height:1.4}
img,svg,video{max-width:100%;vertical-align:middle}
svg{flex-shrink:0}
button,input,select,textarea{font:inherit;color:inherit}
button,a,input,select,textarea,summary{touch-action:manipulation}
button,a,summary{transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease,opacity 160ms ease}
a{color:var(--primary);text-decoration:none;overflow-wrap:anywhere}
a:hover{text-decoration:underline;color:var(--primary-hover)}
button,summary{cursor:pointer}
button{min-height:40px;padding:8px 12px;border:1px solid var(--border);border-radius:6px;background:var(--surface);font-size:14px;font-weight:600;line-height:1.5;max-width:100%;overflow-wrap:anywhere}
button:hover{background:var(--surface-muted)}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
[hidden]:not([hidden="until-found"]),.hidden,.d-none,.ywm-hidden{display:none !important}
.visually-hidden,.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:-100px;background:var(--surface);padding:12px;z-index:100;border:1px solid var(--border)}
.skip-link:focus{top:12px}
code,pre{font-family:var(--font-mono);font-size:13px}
code{overflow-wrap:anywhere}
pre{max-width:100%;overflow:auto;padding:16px;background:var(--surface-muted);border:1px solid var(--border);border-radius:var(--radius)}
ul,ol{padding-left:24px;margin:12px 0}
li+li{margin-top:6px}
hr{border:0;border-top:1px solid var(--border);margin:24px 0}
small,.helper,.help,.helptext,.tool-note,.text-muted,.card-subtitle,.section-intro{color:var(--text-muted);font-size:14px;line-height:1.55}
.label,label>span:first-child{font-size:14px;font-weight:650}
.label{display:block;margin-bottom:8px}
fieldset{min-width:0;margin:0;padding:0;border:0}
legend{padding:0}
.tool-card-label,.eyebrow,.ywm-step__label{display:block;color:var(--text-muted);font-size:12px;font-weight:650;margin-bottom:4px}
.tool-page-description{max-width:780px;color:var(--text-muted);font-size:16px;line-height:1.6;margin-top:12px}
h1.card-title{font-size:30px;font-weight:750}

/* Navigation and page frame. The mobile drawer is independent of content height. */
.layout{display:grid;grid-template-columns:244px minmax(0,1fr);min-height:100dvh}
.sidebar{position:sticky;top:0;align-self:start;height:100dvh;overflow-y:auto;padding:24px 12px;background:var(--sidebar-bg);border-right:1px solid var(--border);z-index:50}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:0 12px 20px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-size:18px;font-weight:750;white-space:nowrap}
.brand-logo{width:28px;height:28px;object-fit:contain}
.nav{display:flex;flex-direction:column;gap:4px}
.nav-section{font-size:12px;color:var(--text-muted);font-weight:650;padding:16px 12px 4px}
.nav-link{display:flex;gap:10px;align-items:center;padding:10px 12px;min-height:44px;border-radius:6px;color:var(--text);font-size:13px;font-weight:600;line-height:1.4}
.nav-link:hover{background:var(--surface);text-decoration:none}
.nav-link.active{background:var(--primary-soft);color:var(--primary)}
.nav-link .icon{display:inline-flex;align-items:center;justify-content:center;width:20px;flex:0 0 20px;font-size:16px}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{border-bottom:1px solid var(--border);padding:16px 24px;min-height:56px}
.topbar-left,.breadcrumbs{display:flex;align-items:center;gap:12px;min-width:0}
.breadcrumbs{font-size:12px;color:var(--text-muted);flex-wrap:wrap;gap:8px}
.site-content{width:100%;max-width:1168px;margin:0 auto;padding:32px 24px 48px;flex:1;min-width:0}
.page,.tool-shell{min-width:0;width:100%}
.tool-page-header,.home-catalog-header{margin-bottom:24px;padding:0;background:transparent;border:0}
.tool-page>.tool-page-header+*{margin-top:0}
.stack-lg>.tool-page-header{margin-bottom:0}
.footer{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin:0 24px;padding:20px 0;border-top:1px solid var(--border);font-size:12px;color:var(--text-muted)}
.footer-links{display:flex;gap:16px;flex-wrap:wrap}
.sidebar-close,.hamburger{display:none}
.backdrop{position:fixed;inset:0;z-index:40;background:rgb(24 32 51 / 35%)}
.scroll-top-btn{position:fixed;bottom:20px;right:20px;width:44px;height:44px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--primary);opacity:0;visibility:hidden;z-index:20}
.scroll-top-btn svg{width:20px;height:20px}
.scroll-top-btn.is-visible{opacity:1;visibility:visible}

/* Shared geometry; grids never stretch closed disclosures to match open siblings. */
.stack-xs,.stack-sm,.stack-md,.stack-lg,.stack{display:flex;flex-direction:column;min-width:0}
.stack-xs{gap:4px}.stack-sm{gap:8px}.stack,.stack-md{gap:16px}.stack-lg{gap:24px}
.grid,.grid-2,.grid-3,.tool-check-grid,.tool-option-grid,.upload-grid{display:grid;gap:16px;align-items:start;min-width:0}
.grid-2,.tool-check-grid,.tool-option-grid,.upload-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid>*{min-width:0}
.actions,.inline-actions,.tool-inline-actions,.tool-input-head,.section-header,.card-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.actions,.inline-actions,.tool-inline-actions{justify-content:flex-start}
.actions>*{max-width:100%;min-width:0}
.card,.tool-panel,.tool-input-card,.tool-card{min-width:0;background:transparent}
.card-header{margin-bottom:16px}
.card-body{min-width:0}
.page>section+section,.page>.card+details,.page>details+section{margin-top:24px}
.tool-card,.ui-section,.tool-input-card{padding:20px 0;border-top:1px solid var(--border)}
.tool-card .tool-card,.tool-input-card .tool-card{border-top:0;padding:0}
.tool-input-head{margin-bottom:16px}
.rich-text>*+*,.prose>*+*{margin-top:12px}
.rich-text{max-width:850px}

/* Commands and form controls share dimensions and explicit states. */
.btn,button:not([class]),input[type=submit]{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;max-width:100%;padding:10px 16px;border:1px solid transparent;border-radius:8px;background:var(--primary);color:#fff;font-size:14px;font-weight:700;line-height:1.5;text-align:center;white-space:normal;text-decoration:none;overflow-wrap:anywhere}
.btn:hover,input[type=submit]:hover{background:var(--primary-hover);color:#fff;text-decoration:none}
.btn svg{width:18px;height:18px}
.btn.hamburger{display:none}
.btn-secondary,.btn-ghost,.btn-outline{background:var(--surface);color:var(--text);border-color:var(--border)}
.btn-secondary:hover,.btn-ghost:hover,.btn-outline:hover{background:var(--surface-muted);color:var(--text);border-color:#aeb8c7}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-muted)}
.btn-ghost:hover{background:var(--surface-muted);border-color:transparent;color:var(--text)}
.btn[aria-pressed=true]{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}
.btn-danger,.gsc-danger-secondary{background:var(--danger-soft);color:var(--danger);border-color:#e9b8bf}
.btn-danger:hover,.gsc-danger-secondary:hover{background:#fbe2e6;color:var(--danger)}
button:disabled,.btn[aria-disabled=true],input[type=submit]:disabled{background:var(--disabled);color:var(--disabled-text);border-color:var(--border);cursor:not-allowed;box-shadow:none}
.input:not([type=checkbox]):not([type=radio]),.textarea,input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=file]),select,textarea{display:block;width:100%;min-width:0;min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font-size:16px;line-height:1.5;transition:border-color 160ms ease}
/* Native macOS menu rendering ignores the shared control height. */
select:not([multiple]):not([size]),select.input:not([multiple]):not([size]){appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23596477' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
@media(forced-colors:active){select:not([multiple]):not([size]),select.input:not([multiple]):not([size]){appearance:auto;background-image:none}}
textarea{resize:vertical;min-height:160px}
input::placeholder,textarea::placeholder{color:#768193;opacity:1}
input:hover,select:hover,textarea:hover{border-color:#aeb8c7}
input:disabled,select:disabled,textarea:disabled{background-color:var(--disabled);color:var(--disabled-text);cursor:not-allowed}
input[type=checkbox],input[type=radio]{width:18px;height:18px;flex:0 0 18px;margin:3px 0;accent-color:var(--primary)}
input[type=file]{max-width:100%;font-size:14px}
input[type=file]::file-selector-button{padding:10px 12px;margin-right:12px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);font:600 14px var(--font-sans);cursor:pointer}
.form .helper,.form .helptext{margin-top:6px}
.form :is(.stack-sm,.stack-md,.slug-field,.domain-input-block,.gsc-form-field)>.helper{margin-top:0}
.errorlist{list-style:none;padding:0;margin:8px 0;color:var(--danger);font-size:14px}
[aria-invalid=true]{border-color:var(--danger)}
.tool-check-card,.check-card,.checkbox-row,.check-row{display:flex;gap:12px;align-items:flex-start;min-width:0;padding:12px;border:1px solid var(--border);border-radius:8px;font-size:14px}
.tool-check-card:has(input:checked),.check-card:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.tool-check-card strong,.tool-check-card .tool-note{display:block}
.tool-check-card input{margin-top:3px}

/* A disclosure has exactly one painted header and natural content height. */
details{min-width:0;align-self:start;width:100%;max-width:100%;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
details+details{margin-top:12px}
details>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:14px 16px;border-radius:7px;color:var(--text);font-size:14px;font-weight:700;overflow-wrap:anywhere}
details>summary::-webkit-details-marker{display:none}
details>summary::marker{content:''}
details>summary::after{content:'';width:9px;height:9px;flex:0 0 9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:0 4px 5px 0}
details[open]>summary{border-radius:7px 7px 0 0;border-bottom:1px solid var(--border)}
details[open]>summary::after{transform:rotate(225deg);margin-top:5px;margin-bottom:0}
details>summary:hover{background:var(--primary-soft);color:var(--primary)}
details>:not(summary){margin:0;padding:16px}
details>summary .tool-note{font-weight:400}
.tooltip,[role=tooltip]{max-width:min(300px,calc(100vw - 32px));padding:8px 12px;border:1px solid var(--border);border-radius:6px;background:var(--text);color:#fff;font-size:12px;z-index:70;overflow-wrap:anywhere}

/* Feedback and results. Status never depends on color alone. */
.alert,.empty-state,.state-card,.notice{padding:14px 16px;border:1px solid var(--border);border-radius:8px;background:var(--surface-muted);font-size:14px;overflow-wrap:anywhere}
.alert+ .alert{margin-top:12px}
.alert p+p{margin-top:8px}
.alert-danger,.alert.error,.alert-error,.state-card--error{background:var(--danger-soft);border-color:#e9b8bf;color:var(--danger)}
.alert-warning,.alert.warning,.state-card--warning{background:var(--warning-soft);border-color:#ead5b0;color:var(--warning)}
.alert-success,.alert.success,.state-card--success{background:var(--success-soft);border-color:#b9d9c7;color:var(--success)}
.badge,.tool-chip,.chip,.gsc-connection-status{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:6px;background:var(--surface-muted);color:var(--text-muted);font-size:12px;font-weight:650;line-height:1.5;overflow-wrap:anywhere}
.badge-success,.gsc-connection-status{color:var(--success);background:var(--success-soft)}
.badge-warning,.gsc-connection-status--warning{color:var(--warning);background:var(--warning-soft)}
.badge-danger,.badge-error{color:var(--danger);background:var(--danger-soft)}
.result-action-card{padding:20px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:24px 0}
.result-action-card__main,.result-action-card__actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.result-action-card__actions{margin-top:16px}
.tool-result-card{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;padding:20px 0;margin-bottom:20px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.tool-result-card__body{min-width:0;flex:1 1 260px;display:grid;gap:8px}
.tool-result-card__head{display:flex;align-items:flex-start;gap:10px;min-width:0}
.tool-result-card__head>div{min-width:0;display:grid;gap:4px}
.tool-result-card__head strong{font-size:18px;line-height:1.4}
.tool-result-card__icon{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--success-soft);color:var(--success);font-size:16px;font-weight:700}
.tool-result-card__text,.tool-result-card__meta{font-size:14px;color:var(--text-muted);line-height:1.55}
.tool-result-card__meta{padding-left:34px}
.tool-result-card__actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0;max-width:100%}
.tool-result-card__actions>.btn{flex:1 1 auto}
.tool-result-anchor:focus-visible{outline:none}
.tool-result-anchor:focus-visible>.tool-result-card{outline:3px solid var(--primary);outline-offset:3px;border-radius:4px}
.tool-demo-status{font-size:14px;line-height:1.55;color:var(--text-muted);min-height:22px;overflow-wrap:anywhere}
.tool-demo-status[data-state=error]{color:var(--danger)}
.tool-demo-actions{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap}
.tool-demo-actions form{display:contents}
.tool-demo-actions .tool-demo-status{flex:0 0 100%}
.table-wrap,.table-scroll,.preview-table-wrap,.tool-table-wrap{max-width:100%;overflow:auto;border:1px solid var(--border);border-radius:8px}
table{width:100%;border-collapse:collapse;font-size:13px;text-align:left}
th,td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
th{background:var(--surface-muted);color:var(--text-muted);font-weight:650;white-space:nowrap}
td{overflow-wrap:anywhere}
tr:last-child>td{border-bottom:0}
tbody tr:hover{background:var(--surface-muted)}
dl{margin:0}dt{font-weight:650}dd{margin:4px 0 0;color:var(--text-muted)}
.progress,.progress-track,.progress-bar-track{height:8px;background:var(--surface-muted);border-radius:4px;overflow:hidden}
.progress-bar,.progress-fill{height:100%;background:var(--primary);border-radius:inherit;max-width:100%}

/* Catalogue: repeated items, not a second visual language. */
.home-catalog-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.home-hero__copy{gap:8px}
.home-tool-filter{display:grid;gap:12px}
.home-tool-filter__search{max-width:640px}
.home-tool-filter__label{display:block;font-size:14px;font-weight:650;margin-bottom:8px}
.home-tool-filter__chips{display:flex;flex-wrap:wrap;gap:8px}
.home-tool-filter__chip{min-height:44px;padding:8px 12px;border:1px solid var(--border);border-radius:6px;background:var(--surface);font-size:13px;font-weight:600}
.home-tool-filter__chip.is-active{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}
.home-tool-filter__summary{font-size:12px;color:var(--text-muted)}
.home-category-block{margin-top:24px}
.home-category-block__header{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.home-tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tool-tile{display:flex;flex-direction:column;gap:12px;padding:20px;border:1px solid var(--border);border-radius:8px;color:var(--text)}
.tool-tile:hover{border-color:var(--primary);text-decoration:none;color:var(--text)}
.tool-tile__desc{font-size:14px;color:var(--text-muted)}
.tool-tile__badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.tool-tile__badge{font-size:12px;color:var(--text-muted)}
.tool-tile__meta{display:grid;gap:4px;font-size:12px;color:var(--text-muted)}
.tool-tile__link{padding-top:4px;font-size:14px;font-weight:650;color:var(--primary)}

@media(max-width:980px){
  .layout{display:block}.sidebar{position:fixed;left:0;top:0;width:min(300px,calc(100vw - 44px));transform:translateX(-100%);visibility:hidden}.sidebar.open{transform:none;visibility:visible}
  .sidebar-close,.hamburger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text)}
  .btn.hamburger{display:inline-flex}.sidebar-close svg{width:20px;height:20px}.topbar{padding:8px 16px}.topbar-left{gap:12px}
}
@media(max-width:640px){
  h1,.page-title,.tool-page-title{font-size:26px}.site-content{padding:24px 16px 32px}.tool-page-description{font-size:14px;margin-top:8px}
  h1.card-title{font-size:26px}
  .tool-result-card{align-items:stretch;gap:16px;padding:16px 0}
  .tool-result-card__actions{width:100%}
  .grid-2,.grid-3,.tool-check-grid,.tool-option-grid,.upload-grid,.home-tools-grid{grid-template-columns:minmax(0,1fr)}
  .footer{margin:0 16px}.tool-card,.tool-input-card,.ui-section{padding:16px 0}.tool-tile{padding:16px}
  details>summary{padding:12px;gap:12px}details>:not(summary){padding:12px}.scroll-top-btn{right:12px;bottom:12px}
  details>summary:has(>span):has(>small){display:grid;grid-template-columns:minmax(0,1fr) 13px;gap:4px 12px}
  details>summary:has(>span)>small{grid-column:1;font-size:12px;font-weight:400;color:var(--text-muted)}
  details>summary:has(>span):has(>small)::after{grid-column:2;grid-row:1 / span 2}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}}