/* Shared Ziluto UI primitives. Match the percentage calculator's form fields
   and the professional tools' explanation card. Opt in with ui-* classes. */
.ui-tool-page{max-width:1160px;margin:0 auto;padding:42px 28px 90px;color:var(--ink,#12203b)}
.ui-tool-page h1{font:800 clamp(32px,4.7vw,49px)/1.17 'Manrope',sans-serif;letter-spacing:-2px;margin:17px 0 12px}
.ui-tool-page>p{font-size:16px;line-height:1.8;color:var(--muted,#64748b);max-width:780px}
.ui-breadcrumb{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:23px;color:#7c8ba2;font-size:12px;font-weight:700}
.ui-breadcrumb a,.ui-link-list a{color:#4e62df}
.ui-tool-panel{background:#fff;border:1px solid var(--border,#e5eaf3);box-shadow:var(--shadow,0 18px 60px rgba(32,52,108,.07));border-radius:24px;padding:31px;margin:28px 0}
.ui-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ui-field{display:block;margin:16px 0;color:#44526a;font-size:13px;font-weight:800}
.ui-field>input:not([type=checkbox]):not([type=range]),.ui-field>select,.ui-field>textarea{display:block;box-sizing:border-box;width:100%;min-width:0;margin-top:9px;padding:16px;font:inherit;font-size:16px;color:var(--ink,#12203b);background:#fafbff;border:1px solid #dce4f1;border-radius:12px;transition:border-color .2s,box-shadow .2s}
.ui-field>select{appearance:none;-webkit-appearance:none;padding-right:48px;background:#fafbff 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='%2364748b' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 17px center;cursor:pointer}
.ui-field>select:hover,.ui-field>input:not([type=range]):hover,.ui-field>textarea:hover{border-color:#b9c8ee}
.ui-field>select:focus,.ui-field>input:not([type=range]):focus,.ui-field>textarea:focus{outline:0;border-color:#7886fa;box-shadow:0 0 0 4px #4c66f71a}
.ui-field>input[type=file]{cursor:pointer;line-height:1.5}
.ui-field>input[type=file]::file-selector-button{font:inherit;font-weight:800;color:#465bd4;background:#eef2ff;border:1px solid #dce4f7;border-radius:9px;padding:9px 13px;margin-right:14px;cursor:pointer}
.ui-field>input[type=file]::file-selector-button:hover{background:#e6ebff}
.ui-field>input[type=range]{display:block;width:100%;margin:14px 0 0;accent-color:#395df5;cursor:pointer}
.ui-field>:disabled{opacity:.56;cursor:not-allowed}
.ui-field:focus-within{color:#273baf}
.ui-primary-button{width:100%;border:0;border-radius:12px;background:linear-gradient(105deg,#395df5,#7552df);color:#fff;font:800 16px 'DM Sans',system-ui,sans-serif;padding:17px;box-shadow:0 10px 22px #485ee82b;cursor:pointer;transition:filter .2s,transform .2s}
.ui-primary-button:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-1px)}
.ui-primary-button:focus-visible,.ui-field>input[type=range]:focus-visible{outline:3px solid #8ca3ff;outline-offset:3px}
.ui-primary-button:disabled{opacity:.55;cursor:not-allowed;transform:none}
/* Small, in-panel note: the exact invoice .pro-note design, shared across tools. */
.ui-inline-note,.pro-note{font-size:13px;color:#617087;line-height:1.65;border-left:3px solid #bfcafa;padding:5px 14px;margin:22px 0 0}
.ui-info-card{position:relative;isolation:isolate;margin-top:32px;padding:clamp(24px,3.6vw,38px);background:linear-gradient(135deg,#f8fbff 0%,#f0f5ff 54%,#f8f6ff 100%);border:1px solid #dce6ff;border-radius:24px;box-shadow:0 14px 34px rgba(41,76,158,.045)}
.ui-info-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse 60% 70% at 100% 0%,rgba(75,112,242,.065),transparent 85%);pointer-events:none;z-index:-1}
.ui-info-card .panel-title{font:800 clamp(19px,2.3vw,23px)/1.35 'Manrope',sans-serif;letter-spacing:-.5px;color:#172852;margin:0 0 12px}
.ui-info-card p{font-size:clamp(14px,1.25vw,16px);line-height:1.8;color:#51617c;max-width:920px;margin:0}
.ui-link-list{display:flex;flex-wrap:wrap;gap:10px}
.ui-link-list a,.ui-download-row a{display:inline-block;padding:9px 12px;border:1px solid #c6d1e5;border-radius:9px;text-decoration:none}
.ui-download-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:12px 0}
.ui-download-row span,.ui-status{overflow-wrap:anywhere}
.ui-status{white-space:pre-wrap}
@media(max-width:550px){.ui-tool-page{padding:30px 18px 65px}.ui-tool-panel{padding:21px;border-radius:19px}.ui-form-grid{grid-template-columns:1fr}.ui-info-card{margin-top:27px;padding:23px 20px;border-radius:20px}}
@media(prefers-reduced-motion:reduce){.ui-field :is(input,select,textarea),.ui-primary-button{transition:none}}