:root{
    --bg:#f4f7fb;
    --bg2:#ffffff;
    --bg3:#eef4ff;
    --bg4:#eefcf6;
    --tx:#0f172a;
    --tx2:#556174;
    --bd:#d7dfec;
    --ac:#2f5cff;
    --ach:#1f49cf;
    --ac2:#0f9d8a;
    --acl:rgba(47,92,255,.10);
    --acl2:rgba(15,157,138,.10);
    --gr:#14804a;
    --rd:#d23c3c;
    --r:14px;
    --mw:1360px;
    --f:"DM Sans","Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
    --fd:"Plus Jakarta Sans","DM Sans","Segoe UI",system-ui,sans-serif;
    --m:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
    --sh:0 10px 30px rgba(15,23,42,.08);
    --sh2:0 16px 48px rgba(15,23,42,.12);
}

.universal-input-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

.universal-input-label label {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.universal-field-state {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    border: 1px solid var(--bd);
}

.universal-field-state.required {
    background: rgba(239, 68, 68, .09);
    color: #b42318;
    border-color: rgba(239, 68, 68, .22);
}

.universal-field-state.optional {
    background: var(--acl);
    color: var(--ac);
}

.universal-field-help {
    margin: 6px 0 12px;
    color: var(--tx2);
    font-size: .88rem;
}

.universal-optional-fields {
    margin: 12px 0;
    border: 1px solid var(--bd);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg3) 72%, transparent);
    overflow: hidden;
}

.universal-optional-fields.slim {
    margin-top: 8px;
}

.universal-optional-fields summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 14px;
    font-weight: 850;
    color: var(--tx);
    user-select: none;
}

.universal-optional-fields summary::-webkit-details-marker {
    display: none;
}

.universal-optional-fields summary::after {
    content: "Show";
    float: right;
    color: var(--ac);
    font-size: .8rem;
}

.universal-optional-fields[open] summary {
    border-bottom: 1px solid var(--bd);
}

.universal-optional-fields[open] summary::after {
    content: "Hide";
}

.universal-optional-fields .universal-input-label,
.universal-optional-fields textarea,
.universal-optional-fields .universal-field-help {
    margin-left: 14px;
    margin-right: 14px;
}

.universal-optional-fields textarea {
    width: calc(100% - 28px);
}

.universal-no-input {
    border: 1px solid rgba(99, 102, 241, .18);
    background: linear-gradient(135deg, rgba(99, 102, 241, .1), rgba(16, 185, 129, .08));
    border-radius: 18px;
    padding: 18px;
    color: var(--tx);
}

.universal-no-input p {
    margin: 6px 0 0;
    color: var(--tx2);
}
.dark{
    --bg:#08111d;
    --bg2:#101a2d;
    --bg3:#15233a;
    --bg4:#112d28;
    --tx:#eef4ff;
    --tx2:#9eb1cf;
    --bd:#243550;
    --ac:#85a4ff;
    --ach:#a4bafc;
    --ac2:#4fd1c5;
    --acl:rgba(133,164,255,.14);
    --acl2:rgba(79,209,197,.12);
    --gr:#56d47f;
    --rd:#ff7a8a;
    --sh:0 10px 30px rgba(0,0,0,.25);
    --sh2:0 18px 56px rgba(0,0,0,.35);
}
html,body{background:var(--bg);color:var(--tx);font-family:var(--f)}
a{color:var(--ac);text-decoration:none}
a:hover{text-decoration:underline}
body{margin:0}
.app{min-height:100vh;background:
    radial-gradient(circle at 0 0, rgba(47,92,255,.09), transparent 24%),
    radial-gradient(circle at 100% 0, rgba(15,157,138,.09), transparent 22%),
    radial-gradient(circle at 100% 100%, rgba(249,115,22,.05), transparent 20%),
    var(--bg)}
.main{max-width:var(--mw);margin:0 auto;padding:24px 20px 42px}
.tool-route .main{max-width:none;width:100%;padding:12px 18px 18px}
.embed-main{max-width:none;padding:18px;min-height:100vh}
.logo{font-weight:800;letter-spacing:.02em;color:var(--tx)!important;text-decoration:none;font-size:1.08rem}
.mud-topbar{background:var(--bg2)!important;color:var(--tx)!important;border-bottom:1px solid var(--bd)}
.mud-topbar .mud-button-label,.mud-topbar .mud-icon-button{color:var(--tx)!important}
.mud-drawer{background:var(--bg2)!important;color:var(--tx)!important}
.drawer-menu{padding-top:12px}
.mobile-menu{display:none!important}
.nav-inner{max-width:var(--mw);margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:16px;height:100%}
.nav-search-wrap{position:relative;flex:1;max-width:680px}
.nav-search-mud .mud-input-root{background:var(--bg3);border-radius:12px}
.nav-search-mud .mud-input-slot{color:var(--tx)}
.nav-right{display:flex;align-items:center;gap:8px}
.search-drop{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:20;background:var(--bg2);border:1px solid var(--bd);border-radius:12px;box-shadow:var(--sh2);overflow:hidden}
.search-drop-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--bd);background:linear-gradient(90deg,var(--bg3),transparent)}
.search-drop-head span{font-weight:800;color:var(--tx)}
.search-drop-head a{font-size:.86rem;font-weight:700}
.search-group{padding:10px 12px;border-bottom:1px solid var(--bd)}
.search-group:last-child{border-bottom:0}
.search-group-head{display:flex;align-items:center;gap:8px;color:var(--tx);font-weight:800;margin-bottom:8px}
.search-group-head small{color:var(--tx2);font-weight:700}
.search-group-grid{display:grid;gap:8px}
.search-hit{display:block;padding:12px 14px;border:1px solid var(--bd);border-radius:12px;background:var(--bg3);color:var(--tx)}
.search-hit:hover{background:var(--bg4);border-color:var(--ac2);text-decoration:none}
.search-hit b{display:block;font-size:.95rem}
.search-hit small,.search-empty{color:var(--tx2)}
.search-empty{padding:14px}
.footer{margin-top:32px;border-top:1px solid var(--bd);background:var(--bg2)}
.footer-inner{max-width:var(--mw);margin:0 auto;padding:26px 20px;color:var(--tx2)}
.footer-cols{display:grid;grid-template-columns:1.3fr repeat(2,minmax(0,1fr));gap:24px}
.footer-brand{font-weight:800;color:var(--tx);margin:0 0 6px}
.footer-head{font-weight:700;color:var(--tx);margin:0 0 8px}
.footer-cols a{display:block;color:var(--tx2);margin:4px 0}
.footer-cols a:hover{color:var(--ac);text-decoration:none}
.copy{margin-top:16px}
.section{margin-top:30px}
.section-title,.page-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.section-title h2,.page-title-row h1{margin:0;font-size:1.35rem}
.section-title span,.page-title-row p,.muted{color:var(--tx2)}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.tool-grid-sm{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.tcard,.tcard-sm,.catcard,.dashboard-tile,.tool-head,.tool-panel,.calc-card,.empty-panel,.app-error,.not-found,.webhook-card{border:1px solid var(--bd);background:var(--bg2);box-shadow:var(--sh);border-radius:var(--r)}
.tcard{padding:16px;display:flex;gap:12px;align-items:flex-start;color:var(--tx);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.tcard:hover{text-decoration:none;border-color:var(--ac2);transform:translateY(-1px);box-shadow:var(--sh2)}
.tcard-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--acl),var(--acl2));color:var(--ac);flex:0 0 44px}
.tcard-copy b,.tcard-sm b,.tool-list-item b{display:block;color:var(--tx);margin-bottom:4px}
.tcard-copy p,.tcard-sm small{margin:0;color:var(--tx2);line-height:1.45}
.tool-card-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tool-card-badges em{font-style:normal;font-size:.72rem;line-height:1;border:1px solid var(--bd);border-radius:999px;padding:5px 8px;color:var(--tx2);background:rgba(255,255,255,.62)}
.dark .tool-card-badges em{background:rgba(255,255,255,.08)}
.library-filters{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:12px;margin:12px 0 18px}
.tool-list-badges{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.tool-list-badges em{font-style:normal;font-size:.7rem;border:1px solid var(--bd);border-radius:999px;padding:4px 7px;color:var(--tx2);white-space:nowrap}
@media(max-width:700px){.library-filters{grid-template-columns:1fr}.tool-list-badges{width:100%;justify-content:flex-start;margin-left:0}}
.tool-context-alert{margin-bottom:14px}
.tool-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.tool-meta-grid article{border:1px solid var(--bd);background:var(--bg2);border-radius:18px;padding:16px;box-shadow:var(--sh)}
.tool-meta-grid h2{font-size:1rem;margin:0 0 8px}
.tool-meta-grid p{margin:0;color:var(--tx2);line-height:1.55}
.tool-content-section{margin-top:18px;border:1px solid var(--bd);background:var(--bg2);border-radius:20px;padding:18px;box-shadow:var(--sh)}
.tool-content-section h2{margin:0 0 12px;font-size:1.12rem}
.tool-faq-list{display:grid;gap:12px}
.tool-faq-list article{border:1px solid rgba(148,163,184,.22);border-radius:16px;padding:14px;background:rgba(255,255,255,.55)}
.dark .tool-faq-list article{background:rgba(15,23,42,.35)}
.tool-faq-list h3{margin:0 0 6px;font-size:.98rem}
.tool-faq-list p{margin:0;color:var(--tx2);line-height:1.58}
.related-tool-row{display:flex;flex-wrap:wrap;gap:10px}
.related-tool-row a{display:inline-flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid rgba(148,163,184,.24);border-radius:999px;background:rgba(0,113,227,.06);color:var(--tx);font-weight:800;text-decoration:none}
.related-tool-row a:hover{border-color:rgba(0,113,227,.38);color:var(--ac);text-decoration:none}
@media(max-width:800px){.tool-meta-grid{grid-template-columns:1fr}}
.tcard-sm{padding:14px;display:flex;align-items:center;gap:10px;color:var(--tx)}
.tcard-sm:hover{text-decoration:none;border-color:var(--ac)}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.catcard{padding:18px 14px;text-align:center;color:var(--tx);display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center}
.catcard:hover{text-decoration:none;border-color:var(--ac2);transform:translateY(-1px);box-shadow:var(--sh2)}
.cat-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--acl),var(--acl2));color:var(--ac);font-size:1.1rem}
.tool-list{display:grid;gap:10px}
.tool-list-item{display:grid;grid-template-columns:auto auto 1fr;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--bd);border-radius:10px;background:var(--bg2);color:var(--tx)}
.tool-list-item:hover{border-color:var(--ac);text-decoration:none;background:var(--bg3)}
.hide-mobile{display:inline}
.top-search-studio{padding:12px 0 6px}
.top-search-bar{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--bd);border-radius:18px;background:linear-gradient(135deg,var(--bg2),var(--bg3));box-shadow:var(--sh2)}
.top-search-input .mud-input-root{border:none;background:transparent}
.top-search-input{flex:1}
.top-search-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.top-search-meta span{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid var(--bd);border-radius:999px;background:var(--bg2);color:var(--tx2);font-size:.85rem;font-weight:700}
.category-strip{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px}
.category-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--bd);border-radius:999px;background:var(--bg2);color:var(--tx);font-weight:700;text-decoration:none}
.category-chip small{color:var(--tx2);font-size:.8rem}
.category-chip:hover,.category-chip.active{text-decoration:none;border-color:var(--ac2);background:var(--bg4);box-shadow:var(--sh)}
.category-chip .mud-icon-root{color:var(--ac)}
.premium-dashboard{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:14px;margin-top:22px}
.dashboard-tile{min-height:150px;padding:18px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg,var(--bg2),var(--bg3))}
.dashboard-tile.large{min-height:190px}
.dashboard-tile>.mud-icon-root{color:var(--ac);font-size:2rem}
.dashboard-tile b{font-size:1.05rem}
.dashboard-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dashboard-links a{padding:9px 10px;border:1px solid var(--bd);border-radius:10px;background:var(--bg3);font-size:.88rem;color:var(--tx)}
.dashboard-links a:hover{border-color:var(--ac);text-decoration:none}
.tool-page{max-width:1180px;margin:0 auto}
.tool-route .tool-page{max-width:none;width:100%}
.breadcrumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:14px;color:var(--tx2);font-size:.92rem}
.tool-route .breadcrumb{margin-bottom:8px;font-size:.82rem}
.tool-head{position:relative;padding:18px;display:flex;gap:14px;align-items:flex-start}
.tool-route .tool-head{padding:12px 14px;gap:12px}
.tool-head h1{margin:0;font-size:1.5rem}
.tool-route .tool-head h1{font-size:1.18rem}
.tool-head p{margin:8px 0 0;color:var(--tx2)}
.tool-route .tool-head p{margin-top:4px;font-size:.9rem}
.tool-head-pro{box-shadow:var(--sh2)}
.tool-title-icon{display:grid;place-items:center;flex:0 0 54px;width:54px;height:54px;border-radius:14px;background:var(--acl);color:var(--ac)}
.tool-title-icon .mud-icon-root{font-size:2rem}
.tool-route .tool-title-icon{flex-basis:42px;width:42px;height:42px;border-radius:12px}
.tool-route .tool-title-icon .mud-icon-root{font-size:1.55rem}
.tool-head>div:nth-child(2){padding-right:96px}
.tool-head-actions{position:absolute;top:12px;right:12px;display:flex;gap:7px}
.tool-action-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--bd);background:var(--bg3);color:var(--tx);cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.06);transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}
.tool-action-btn:hover{background:var(--bg4);border-color:var(--ac2);color:var(--ac);transform:translateY(-1px)}
.tool-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tool-route .tool-badges{margin-top:8px}
.badge,.badge-soft{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--bg3);color:var(--tx2);font-weight:700;font-size:.82rem}
.badge-soft{background:var(--acl);color:var(--ac)}
.tool-body,.how-to,.related{margin-top:18px}
.tool-route .tool-body,.tool-route .how-to{margin-top:10px}
.how-to,.related{padding:18px;border:1px solid var(--bd);border-radius:var(--r);background:var(--bg2);box-shadow:var(--sh)}
.tool-route .how-to{padding:12px 14px}
.how-to h2,.related h2{margin:0 0 8px}
.eyebrow{margin:0 0 8px;color:var(--ac);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.tool-panel{padding:18px;background:linear-gradient(180deg,var(--bg2),var(--bg3))}
.calc-card{padding:16px;background:var(--bg2);margin-bottom:12px}
.calc-card h3{font-size:.95rem;margin:0 0 10px}
.calculator-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}
.calculator-hero h2{margin:2px 0 6px;font-size:1.4rem}
.calc-result-chip{min-width:180px;padding:14px 16px;border:1px solid var(--bd);border-radius:14px;background:var(--bg2);box-shadow:var(--sh)}
.calc-result-chip span{display:block;color:var(--tx2);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.calc-result-chip strong{display:block;margin-top:6px;font-family:var(--m);font-size:1.45rem;color:var(--tx)}
.calc-display{width:100%;box-sizing:border-box;padding:16px 14px;border:1px solid var(--bd);border-radius:14px;background:var(--bg2);color:var(--tx);font-family:var(--m);font-size:1.35rem;letter-spacing:0;text-align:right;outline:none;box-shadow:var(--sh)}
.calc-pad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.calc-pad button{min-height:58px;border:1px solid var(--bd);border-radius:14px;background:var(--bg2);color:var(--tx);font-family:var(--f);font-size:1rem;font-weight:800;cursor:pointer;box-shadow:var(--sh);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease}
.calc-pad button:hover{transform:translateY(-1px);border-color:var(--ac);box-shadow:var(--sh2)}
.calc-pad button.op{background:var(--acl);color:var(--ac)}
.calc-pad button.danger{background:#fee2e2;color:#b91c1c}
.info-banner{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 14px;border:1px solid var(--bd);border-radius:12px;background:linear-gradient(135deg,var(--bg3),var(--bg2));color:var(--tx);box-shadow:var(--sh)}
.info-banner strong{color:var(--ac)}
.info-banner span{color:var(--tx2);font-size:.9rem}
.btn,.btn-p,.btn-s,.tool-popup-btn,.copybtn{border:1px solid var(--bd);background:var(--bg2);color:var(--tx);font-family:var(--f);cursor:pointer;transition:all .18s ease}
.btn,.btn-p,.btn-s{padding:10px 16px;border-radius:10px;font-size:.92rem;font-weight:700}
.btn:hover,.btn-s:hover{border-color:var(--ac);color:var(--ac);text-decoration:none}
.btn-p{background:var(--ac);color:#fff;border-color:var(--ac)}
.btn-p:hover{background:var(--ach);color:#fff}
.btn-s{padding:6px 10px;font-size:.8rem}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.ta{width:100%;padding:12px;border:1px solid var(--bd);border-radius:12px;background:var(--bg3);color:var(--tx);font-family:var(--m);font-size:.92rem;resize:vertical;outline:none;line-height:1.5}
.ta:focus{border-color:var(--ac)}
.ta.out{background:var(--bg2)}
.split{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:start}
.pane{display:flex;flex-direction:column;gap:4px}
.pane-mid{display:flex;flex-direction:column;gap:8px;padding-top:24px;align-items:center}
.out-wrap{margin-top:14px}
.out-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:.92rem;font-weight:700}
.result-box{padding:14px;background:var(--acl);border-radius:10px;font-weight:700;text-align:center;margin:12px 0}
.error,.success,.app-error{margin-top:10px;padding:12px 14px;border-radius:12px;font-size:.94rem}
.error{background:#fdecec;border:1px solid #f5b5b5;color:var(--rd)}
.success{background:#e8f8ee;color:var(--gr)}
.dark .error{background:#3b1010;border-color:#7f1d1d}
.dark .success{background:#14532d40}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:16px}
.st{padding:14px;background:var(--bg2);border:1px solid var(--bd);border-radius:12px;text-align:center}
.st.hl{border-color:var(--ac);background:var(--acl)}
.sv{display:block;font-size:1.45rem;font-weight:800;color:var(--tx)}
.sl{display:block;font-size:.8rem;color:var(--tx2);margin-top:3px}
.dtable{width:100%;border-collapse:collapse;margin-top:10px;font-size:.88rem}
.dtable th,.dtable td{padding:8px 10px;border-bottom:1px solid var(--bd);text-align:left;vertical-align:top}
.dtable th{font-weight:700;background:var(--bg3)}
.config-diff-table td{vertical-align:top}
.config-diff-table code{white-space:nowrap}
.config-status{display:inline-flex;padding:3px 8px;border-radius:999px;background:var(--bg3);font-size:.75rem;font-weight:700}
.config-same .config-status{color:var(--gr);background:#dcfce7}
.config-mismatch .config-status{color:#92400e;background:#fef3c7}
.config-missing-a .config-status,.config-missing-b .config-status{color:var(--rd);background:#fee2e2}
.dark .config-same .config-status{background:#14532d40}
.dark .config-mismatch .config-status{background:#78350f55}
.dark .config-missing-a .config-status,.dark .config-missing-b .config-status{background:#7f1d1d55}
.c-green{color:var(--gr)}
.c-red{color:var(--rd)}
.center{text-align:center}
.muted{color:var(--tx2);font-size:.94rem}
.form-row,.form-col{display:grid;gap:10px}
.form-row{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.form-col{grid-template-columns:1fr}
.form-row input,.form-row select,.form-col input,.form-col select,.form-col textarea,.form-row textarea{padding:9px 12px;border:1px solid var(--bd);border-radius:10px;background:var(--bg3);color:var(--tx);font-family:var(--f);font-size:.95rem;outline:none}
.form-row input:focus,.form-row select:focus,.form-col input:focus,.form-col select:focus,.form-col textarea:focus,.form-row textarea:focus{border-color:var(--ac)}
input[type="range"]{width:100%;margin-top:4px}
input[type="color"]{height:40px;padding:2px;cursor:pointer}
.copybtn{padding:5px 10px;border-radius:8px;background:var(--bg2);color:var(--tx2);font-size:.78rem;font-weight:700;white-space:nowrap}
.copybtn:hover{border-color:var(--ac);color:var(--ac)}
.copybtn.copied{border-color:var(--gr);color:var(--gr)}
.qr-preview{min-height:360px;display:flex;align-items:center;justify-content:center;padding:20px;border:1px dashed var(--bd);border-radius:var(--r);background:var(--bg3)}
.qr-preview img{width:min(100%,320px);height:auto;display:block}
.qr-color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:4px}
.qr-color-card{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:12px;border:1px solid var(--bd);border-radius:14px;background:var(--bg3);box-shadow:0 10px 26px rgba(15,23,42,.05)}
.qr-color-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.qr-color-copy strong{font-size:.9rem;color:var(--tx);line-height:1.2}
.qr-color-copy small{font-size:.74rem;color:var(--tx2)}
.qr-color-preview{width:32px;height:32px;border-radius:10px;border:1px solid rgba(15,23,42,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.qr-color-card input[type="color"]{width:44px;height:40px;border:0;border-radius:12px;background:transparent;padding:0}
.qr-color-value{grid-column:1 / -1;font-size:.74rem;color:var(--tx2);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}
.qr-preset-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.qr-preset{width:42px;height:32px;display:flex;overflow:hidden;border:1px solid var(--bd);border-radius:999px;background:var(--bg2);padding:3px;cursor:pointer;box-shadow:0 8px 18px rgba(15,23,42,.06)}
.qr-preset span{flex:1;border-radius:999px}
.qr-preset:hover,.qr-preset:focus-visible{border-color:var(--ac);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
@media (max-width:720px){.qr-color-grid{grid-template-columns:1fr}.qr-color-card{grid-template-columns:1fr auto auto}}
.file-input{display:block;width:100%;padding:18px;border:1px dashed var(--bd);border-radius:12px;background:var(--bg3);color:var(--tx)}
.image-preview{display:flex;align-items:center;justify-content:center;min-height:260px;padding:16px;border:1px solid var(--bd);border-radius:12px;background:var(--bg3);margin-bottom:12px}
.image-preview img{max-width:100%;max-height:420px;border-radius:8px}
.image-meta{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--bd);border-radius:10px;background:var(--bg2);margin-top:12px}
.image-meta small{display:block;color:var(--tx2)}
.empty-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:260px;border:1px dashed var(--bd);border-radius:12px;color:var(--tx2);background:var(--bg3)}
.empty-panel .mud-icon-root{font-size:3rem;color:var(--ac)}
.image-editor-stage{min-height:520px;display:grid;place-items:center;padding:18px;border:1px solid var(--bd);border-radius:12px;background-image:linear-gradient(45deg,var(--bg3) 25%,transparent 25%),linear-gradient(-45deg,var(--bg3) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--bg3) 75%),linear-gradient(-45deg,transparent 75%,var(--bg3) 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;background-color:var(--bg2);overflow:auto}
.image-editor-stage canvas{max-width:100%;height:auto;border-radius:8px;box-shadow:var(--sh2)}
.image-editor-stage canvas.magic-eraser-active{cursor:crosshair;touch-action:none;outline:3px solid color-mix(in srgb,var(--accent) 38%,transparent);outline-offset:4px}
.image-editor-stage.hidden{display:none}
.image-editor-empty{min-height:520px}
.passport-preview-card{min-height:520px;padding:16px;display:flex;flex-direction:column;gap:12px}
.passport-preview-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.passport-preview-head h3{margin:0;font-size:1rem}
.passport-preview-head span{color:var(--tx2);font-size:.85rem;line-height:1.35;text-align:right}
.passport-preview-frame{flex:1;min-height:360px;display:flex;align-items:center;justify-content:center;padding:14px;border:1px dashed var(--bd);border-radius:12px;background:var(--bg3);overflow:hidden}
.passport-preview-image{display:block;max-width:100%;max-height:340px;object-fit:contain;border-radius:10px;box-shadow:var(--sh2);background:#fff}
.passport-preview-image{width:100%}
.passport-meta{display:flex;flex-direction:column;gap:4px;color:var(--tx2)}
.passport-cropper-stage{
    position:relative;
    min-height:360px;
    overflow:hidden;
    background:
        linear-gradient(45deg, rgba(127,155,186,.14) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(127,155,186,.14) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(127,155,186,.14) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(127,155,186,.14) 75%);
    background-size:24px 24px;
    background-position:0 0, 0 12px, 12px -12px, -12px 0;
}
.passport-cropper-photo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    z-index:1;
    display:block;
}
.passport-cropper-image{
    position:absolute;
    inset:0;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:contain;
}
.passport-cropper-overlay{
    position:absolute;
    inset:0;
    display:none;
    pointer-events:none;
    z-index:3;
}
.passport-crop-frame{
    position:absolute;
    border:2px solid var(--ac);
    border-radius:12px;
    box-shadow:0 0 0 9999px rgba(3,7,18,.28);
    pointer-events:none;
    z-index:2;
}
.passport-crop-handle{
    position:absolute;
    width:18px;
    height:18px;
    border-radius:50%;
    border:2px solid #fff;
    background:var(--ac);
    box-shadow:0 6px 16px rgba(15,23,42,.28);
    cursor:grab;
    pointer-events:auto;
    z-index:4;
}
.passport-crop-handle:active{cursor:grabbing}
.passport-crop-hint{
    position:absolute;
    left:14px;
    bottom:14px;
    padding:7px 10px;
    border-radius:999px;
    background:rgba(15,23,42,.72);
    color:#fff;
    font-size:.78rem;
    pointer-events:none;
}
.passport-editor-box{
    padding:14px;
    border:1px solid var(--bd);
    border-radius:16px;
    background:linear-gradient(180deg,var(--bg2),var(--bg3));
    box-shadow:var(--sh);
}
.magic-eraser-card{
    margin-top:14px;
    background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,var(--bg2)),var(--bg2));
}
.magic-eraser-card h3{
    margin-bottom:6px;
}
.magic-eraser-card label{
    display:block;
    margin:10px 0;
    color:var(--tx2);
    font-weight:800;
}
.magic-eraser-card input[type="range"]{
    width:100%;
    margin-top:7px;
}
.bg-preview{
    border:1px solid var(--bd);
    border-radius:12px;
    overflow:hidden;
    background:var(--bg2);
    min-height:120px;
    display:grid;
    place-items:center;
}
.bg-preview img{
    display:block;
    width:100%;
    max-height:160px;
    object-fit:cover;
}
.image-queue{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:10px;
}
.image-queue-item{
    border:1px solid var(--bd);
    background:var(--bg3);
    border-radius:14px;
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:stretch;
    cursor:pointer;
    color:var(--tx);
    text-align:left;
    transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.image-queue-item:hover{
    transform:translateY(-1px);
    border-color:var(--ac);
    box-shadow:var(--sh2);
}
.image-queue-item.active{
    border-color:var(--ac);
    box-shadow:0 0 0 2px rgba(76,115,255,.12);
}
.image-queue-item img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:10px;
    background:#fff;
}
.image-queue-item span{
    font-size:.84rem;
    font-weight:700;
    line-height:1.3;
    word-break:break-word;
}
.cutout-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:14px;
}
.cutout-card{
    border:1px solid var(--bd);
    border-radius:16px;
    background:var(--bg3);
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.cutout-card img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:contain;
    background:
        linear-gradient(45deg, rgba(127,155,186,.14) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(127,155,186,.14) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(127,155,186,.14) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(127,155,186,.14) 75%);
    background-size:20px 20px;
    background-position:0 0, 0 10px, 10px -10px, -10px 0;
    border-radius:12px;
}
.cutout-meta{
    display:flex;
    flex-direction:column;
    gap:2px;
}
.cutout-meta small{
    color:var(--tx2);
}
.cutout-card a{
    align-self:flex-start;
    color:var(--ac);
    text-decoration:none;
    font-weight:700;
}
.background-remover-shell{
    overflow:hidden;
}
.background-remover-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    padding:18px;
    border:1px solid var(--bd);
    border-radius:22px;
    background:linear-gradient(135deg,rgba(59,130,246,.12),rgba(20,184,166,.10),var(--bg2));
    margin-bottom:16px;
}
.background-remover-top h2{
    margin:6px 0 8px;
    font-size:clamp(1.45rem,2.2vw,2.15rem);
    line-height:1.08;
    letter-spacing:0;
}
.background-remover-top p{
    margin:0;
    color:var(--tx2);
    max-width:760px;
    line-height:1.55;
}
.tool-mini-kicker{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(37,99,235,.10);
    color:var(--ac);
    font-size:.78rem;
    font-weight:800;
}
.background-remover-actions{
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    min-width:min(420px,100%);
}
.background-remover-grid{
    display:grid;
    grid-template-columns:minmax(280px,360px) minmax(0,1fr);
    gap:16px;
    align-items:start;
}
.background-remover-sidebar{
    position:sticky;
    top:92px;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.background-remover-dropzone{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:178px;
    gap:8px;
    padding:22px;
    border:2px dashed rgba(37,99,235,.35);
    border-radius:24px;
    background:linear-gradient(180deg,var(--bg2),rgba(219,234,254,.42));
    color:var(--tx);
    text-align:center;
    cursor:pointer;
    transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.background-remover-dropzone:hover{
    border-color:var(--ac);
    transform:translateY(-1px);
    box-shadow:var(--sh2);
}
.background-remover-dropzone .mud-icon-root{
    font-size:2.8rem;
    color:var(--ac);
}
.background-remover-dropzone strong{
    font-size:1.05rem;
}
.background-remover-dropzone span{
    color:var(--tx2);
    line-height:1.35;
    max-width:260px;
}
.background-remover-dropzone input[type="file"],
.background-remover-background-upload input[type="file"]{
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer;
}
.background-remover-upload-percent{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-width:170px;
    margin-top:6px;
    padding:9px 12px;
    border:1px solid rgba(37,99,235,.20);
    border-radius:999px;
    background:rgba(255,255,255,.82);
    box-shadow:0 10px 28px rgba(15,23,42,.10);
    color:var(--tx);
}
.background-remover-upload-percent b{
    font-size:1rem;
    color:var(--ac);
}
.background-remover-upload-percent small{
    max-width:160px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--tx2);
    font-weight:800;
}
.background-remover-queue-head{
    display:flex;
    justify-content:space-between;
    gap:10px;
    color:var(--tx2);
    font-size:.86rem;
}
.background-remover-queue-head b{
    color:var(--tx);
}
.background-remover-queue{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
    gap:8px;
    max-height:248px;
    overflow:auto;
    padding-right:2px;
}
.background-remover-queue-item{
    position:relative;
    border:1px solid var(--bd);
    border-radius:16px;
    padding:8px;
    background:var(--bg2);
    color:var(--tx);
    cursor:pointer;
    text-align:left;
    transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.background-remover-queue-item:hover,
.background-remover-queue-item.active{
    border-color:var(--ac);
    box-shadow:0 0 0 3px rgba(37,99,235,.12);
    transform:translateY(-1px);
}
.background-remover-queue-item img{
    width:100%;
    aspect-ratio:1;
    object-fit:cover;
    border-radius:12px;
    background:#fff;
}
.background-remover-queue-item span{
    display:block;
    margin-top:6px;
    font-size:.75rem;
    font-weight:800;
    line-height:1.2;
    word-break:break-word;
}
.background-remover-queue-item small{
    display:inline-flex;
    margin-top:5px;
    padding:2px 7px;
    border-radius:999px;
    background:rgba(16,185,129,.12);
    color:#047857;
    font-size:.68rem;
    font-weight:800;
}
.background-remover-options{
    border:1px solid var(--bd);
    border-radius:18px;
    background:var(--bg2);
    box-shadow:var(--sh2);
    overflow:hidden;
}
.background-remover-options summary{
    list-style:none;
    cursor:pointer;
    padding:13px 14px;
    font-weight:900;
}
.background-remover-options summary::-webkit-details-marker{
    display:none;
}
.background-remover-option-body{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:0 14px 14px;
}
.background-remover-color-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}
.background-remover-color-row label,
.background-remover-full-label{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px;
    border:1px solid var(--bd);
    border-radius:14px;
    background:var(--bg3);
    font-weight:800;
    font-size:.84rem;
}
.background-remover-color-row input[type="color"],
.background-remover-full-label input[type="color"]{
    width:42px;
    height:34px;
    padding:0;
    border:0;
    border-radius:12px;
    background:transparent;
}
.background-remover-background-upload{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    min-height:54px;
    padding:12px;
    border:1px dashed var(--bd);
    border-radius:14px;
    background:var(--bg3);
    cursor:pointer;
}
.background-remover-background-upload .mud-icon-root{
    color:var(--ac);
}
.background-remover-range{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    align-items:center;
    color:var(--tx2);
    font-size:.86rem;
}
.background-remover-range input{
    grid-column:1 / -1;
    width:100%;
}
.background-remover-main{
    min-width:0;
}
.background-remover-empty{
    min-height:620px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:28px;
    border:1px dashed var(--bd);
    border-radius:24px;
    background:linear-gradient(180deg,var(--bg2),var(--bg3));
    text-align:center;
}
.background-remover-empty .mud-icon-root,
.background-remover-result-empty .mud-icon-root{
    font-size:3.4rem;
    color:var(--ac);
}
.background-remover-empty h3{
    margin:0;
    font-size:1.45rem;
}
.background-remover-empty p{
    margin:0;
    color:var(--tx2);
    max-width:520px;
    line-height:1.55;
}
.background-remover-preview-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}
.background-remover-preview-card{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height:620px;
    padding:16px;
    border:1px solid var(--bd);
    border-radius:24px;
    background:var(--bg2);
    box-shadow:var(--sh2);
}
.background-remover-preview-card header{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:flex-start;
}
.background-remover-preview-card header span{
    display:block;
    color:var(--ac);
    font-size:.78rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.background-remover-preview-card h3{
    margin:2px 0 0;
    font-size:1.05rem;
}
.background-remover-preview-card small{
    color:var(--tx2);
    text-align:right;
}
.background-remover-preview-frame{
    flex:1;
    min-height:500px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:16px;
    border:1px dashed var(--bd);
    border-radius:18px;
    background:var(--bg3);
}
.background-remover-preview-frame.checker,
.background-remover-result-empty{
    background:
        linear-gradient(45deg, rgba(100,116,139,.12) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(100,116,139,.12) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(100,116,139,.12) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(100,116,139,.12) 75%);
    background-size:24px 24px;
    background-position:0 0, 0 12px, 12px -12px, -12px 0;
    background-color:var(--bg2);
}
.background-remover-preview-frame img{
    display:block;
    max-width:100%;
    max-height:480px;
    object-fit:contain;
    border-radius:14px;
    box-shadow:var(--sh2);
}
.background-remover-result-empty{
    flex:1;
    min-height:500px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:18px;
    border:1px dashed var(--bd);
    border-radius:18px;
    color:var(--tx2);
    text-align:center;
}
.background-remover-downloads{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
}
.background-remover-download{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:10px 16px;
    border-radius:999px;
    background:var(--ac);
    color:#fff;
    text-decoration:none;
    font-weight:900;
    box-shadow:var(--sh2);
}
.background-remover-download.zip{
    background:#111827;
}
.background-remover-download.disabled{
    pointer-events:none;
    opacity:.44;
    filter:grayscale(.25);
}
@media (max-width:1080px){
    .background-remover-top{flex-direction:column}
    .background-remover-actions{justify-content:flex-start;min-width:0}
    .background-remover-grid{grid-template-columns:1fr}
    .background-remover-sidebar{position:static}
}
@media (max-width:780px){
    .background-remover-preview-grid{grid-template-columns:1fr}
    .background-remover-preview-card,
    .background-remover-empty{min-height:420px}
    .background-remover-preview-frame,
    .background-remover-result-empty{min-height:320px}
    .background-remover-preview-frame img{max-height:300px}
    .background-remover-color-row{grid-template-columns:1fr}
}
.tool-subhead{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-bottom:10px;
}
.tool-subhead h3{
    margin:0;
    font-size:1.05rem;
}
.tool-subhead p{
    margin:0;
    color:var(--tx2);
}
.passport-control-card{
    padding:14px;
    border:1px solid var(--bd);
    border-radius:16px;
    background:var(--bg2);
    box-shadow:var(--sh);
}
.passport-editor-head{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-bottom:10px;
}
.passport-editor-head b{
    font-size:.95rem;
    color:var(--tx);
}
.passport-editor-head small{
    color:var(--tx2);
    line-height:1.35;
}
.passport-mode-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}
.passport-mode-chip{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:12px 12px;
    border:1px solid var(--bd);
    border-radius:12px;
    background:var(--bg2);
    color:var(--tx);
    text-align:left;
    cursor:pointer;
    box-shadow:var(--sh);
}
.passport-mode-chip:hover{border-color:var(--ac);box-shadow:var(--sh2)}
.passport-mode-chip.active{border-color:var(--ac);background:var(--acl)}
.passport-mode-chip span{font-weight:800}
.passport-mode-chip small{color:var(--tx2);font-size:.8rem;line-height:1.25}
.passport-swatch-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:12px;
    align-items:flex-end;
}
.passport-swatch{
    width:34px;
    height:34px;
    border-radius:999px;
    border:2px solid var(--bg2);
    box-shadow:var(--sh);
    cursor:pointer;
}
.passport-swatch.active{
    border-color:var(--ac);
    transform:scale(1.05);
}
.passport-color-input{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:150px;
}
.passport-color-input span{
    font-size:.8rem;
    color:var(--tx2);
    font-weight:700;
}
.passport-color-input input{
    width:100%;
}
.passport-slider{
    padding:10px 0 4px;
}
.passport-slider-label{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-bottom:6px;
}
.passport-slider-label span{
    color:var(--tx2);
    font-size:.82rem;
    font-weight:700;
}
.passport-slider-label strong{
    color:var(--tx);
    font-size:.9rem;
}
.passport-action-row{
    margin-top:8px;
}
.clock-tool{display:grid;grid-template-columns:260px 1fr;gap:26px;align-items:center}
.analog-clock{position:relative;width:240px;aspect-ratio:1;border:10px solid var(--bg2);border-radius:50%;background:radial-gradient(circle,var(--bg2) 58%,var(--bg3));box-shadow:var(--sh2),inset 0 0 0 1px var(--bd)}
.hand{position:absolute;left:50%;bottom:50%;width:4px;transform-origin:50% 100%;border-radius:8px;background:var(--tx)}
.hand.hour{height:58px;transform:translateX(-50%) rotate(var(--hour))}
.hand.minute{height:82px;transform:translateX(-50%) rotate(var(--min));background:var(--ac)}
.hand.second{height:92px;width:2px;transform:translateX(-50%) rotate(var(--sec));background:var(--rd)}
.pin{position:absolute;left:50%;top:50%;width:14px;height:14px;transform:translate(-50%,-50%);border-radius:50%;background:var(--ac)}
.clock-readout strong{display:block;font-family:var(--m);font-size:3rem;line-height:1.1}
.clock-readout span,.clock-readout small{display:block;color:var(--tx2)}
.pomodoro-tool{text-align:center}
.timer-ring{width:240px;aspect-ratio:1;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--ac) var(--progress),var(--bg3) 0);position:relative}
.timer-ring:before{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--bg2)}
.timer-ring span,.timer-ring small{position:relative;z-index:1}
.timer-ring span{font-family:var(--m);font-size:2.5rem;font-weight:800}
.timer-ring small{display:block;color:var(--tx2);margin-top:54px}
.center-row{justify-content:center}
.command-hero{grid-template-columns:minmax(0,1fr) 390px}
.quick-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.dashboard-panel{display:flex;flex-direction:column;gap:12px}
.clock-card{padding:18px;border:1px solid var(--bd);border-radius:14px;background:var(--bg2);box-shadow:var(--sh2)}
.clock-card span,.clock-card small{display:block;color:var(--tx2)}
.clock-card strong{display:block;font-family:var(--m);font-size:2.45rem;line-height:1.1;margin:8px 0;color:var(--tx)}
.mini-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mini-metrics div{padding:12px;border:1px solid var(--bd);border-radius:10px;background:var(--bg2);text-align:center}
.mini-metrics b{display:block;font-size:1.15rem;color:var(--tx)}
.mini-metrics span{display:block;color:var(--tx2);font-size:.78rem}
.idea-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.idea-strip a{display:flex;align-items:center;gap:10px;padding:14px;border:1px solid var(--bd);border-radius:10px;background:var(--bg2);color:var(--tx);font-weight:700;text-decoration:none}
.idea-strip a:hover{border-color:var(--ac);color:var(--ac);text-decoration:none}
.hero-pro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:28px;align-items:center;text-align:left;padding:34px 0 28px}
.hero-copy h1{font-size:3rem;line-height:1.04;margin:10px 0 12px;letter-spacing:0}
.hero-copy .eyebrow{margin:0 0 10px;color:var(--ac);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.hero-text{margin:0;color:var(--tx2);font-size:1.05rem;line-height:1.7;max-width:58ch}
.hero-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:18px;border:1px solid var(--bd);border-radius:18px;background:linear-gradient(145deg,var(--bg2),var(--bg3));box-shadow:var(--sh2)}
.hero-tool-pill{display:flex;align-items:center;gap:8px;min-height:46px;padding:10px 12px;border:1px solid var(--bd);border-radius:10px;background:var(--bg2);color:var(--tx);font-weight:700;font-size:.86rem;text-decoration:none}
.hero-tool-pill:hover{border-color:var(--ac);text-decoration:none;transform:translateY(-1px)}
.top-search-studio .mud-icon-root{color:var(--ac)}
.webhook-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
.webhook-log,.webhook-detail{min-width:0}
.webhook-table tr{cursor:pointer}
.selected-row{background:var(--acl)}
.webhook-card{padding:16px}
.network-suite{display:grid;gap:18px}
.network-hero{background:linear-gradient(135deg,var(--bg2),var(--bg3))}
.network-toolbar{display:grid;gap:14px}
.network-toolbar-row{grid-template-columns:minmax(0,1fr) 260px}
.network-chipbar{display:flex;flex-wrap:wrap;gap:10px}
.network-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--bd);border-radius:999px;background:var(--bg2);color:var(--tx);font-weight:700;cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.network-chip:hover{transform:translateY(-1px);border-color:var(--ac);box-shadow:var(--sh)}
.network-chip.active{background:var(--acl);border-color:var(--ac);color:var(--ac)}
.network-workspace{display:grid;gap:16px}
.network-workspace-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.network-workspace-head h2{margin:0 0 6px;font-size:1.35rem}
.network-workspace-head p{margin:0;color:var(--tx2);max-width:70ch}
.network-mini-stats{display:grid;grid-template-columns:repeat(3,minmax(110px,1fr));gap:10px;min-width:320px}
.network-mini-stats div{padding:12px 14px;border:1px solid var(--bd);border-radius:12px;background:var(--bg2);text-align:center}
.network-mini-stats b{display:block;color:var(--tx);font-size:1rem}
.network-mini-stats span{display:block;color:var(--tx2);font-size:.8rem;margin-top:2px}
.network-suite .calc-card{margin-bottom:0}
.network-suite .dtable{margin-top:14px}
.network-suite .result-box{margin-top:14px}
.finding-list{display:grid;gap:12px;margin-top:12px}
.finding-card{border:1px solid var(--bd);border-radius:18px;background:var(--bg2);box-shadow:var(--sh);padding:16px}
.finding-card h4{font-size:1rem;margin:10px 0 8px}
.finding-card p{margin:7px 0;color:var(--muted)}
.finding-card.sev-critical{border-color:#b91c1c;background:linear-gradient(180deg,#fff5f5,#fff)}
.finding-card.sev-high{border-color:#ef4444;background:linear-gradient(180deg,#fff7ed,#fff)}
.finding-card.sev-medium{border-color:#f59e0b;background:linear-gradient(180deg,#fffbeb,#fff)}
.finding-card.sev-low{border-color:#60a5fa;background:linear-gradient(180deg,#eff6ff,#fff)}
.finding-card.sev-informational{border-color:#94a3b8}
.app-error{max-width:520px;margin:60px auto;padding:28px;text-align:center;background:var(--bg2)}
.app-error-icon{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 14px;border-radius:50%;background:#fee2e2;color:#991b1b;font-size:1.5rem;font-weight:800}
.not-found{max-width:560px;margin:56px auto;padding:28px;text-align:center;background:var(--bg2)}
.not-found-rich{max-width:760px;padding:34px}
.not-found-code{display:inline-grid;place-items:center;min-width:72px;height:42px;margin-bottom:14px;border-radius:999px;background:#eef2ff;color:#3730a3;font-weight:900;letter-spacing:.08em}
.not-found h1{margin:0 0 8px;font-size:2rem;line-height:1.1}
.not-found p{margin:0 auto 18px;max-width:56ch;color:var(--tx2);line-height:1.6}
.not-found-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:16px}
.not-found-links{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:18px}
.not-found-links a{padding:8px 10px;border:1px solid var(--bd);border-radius:999px;background:var(--bg3);color:var(--tx);font-weight:700;font-size:.9rem;text-decoration:none}
.not-found-links a:hover{border-color:var(--ac);color:var(--ac)}
.not-found-page{width:min(1180px,calc(100% - 28px));margin:38px auto 64px;display:grid;gap:22px}
.not-found-hero-card{position:relative;overflow:hidden;border:1px solid var(--bd);border-radius:30px;background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(248,250,252,.78));box-shadow:var(--sh);padding:38px;text-align:center}
.dark .not-found-hero-card{background:linear-gradient(135deg,rgba(17,24,39,.94),rgba(15,23,42,.78))}
.not-found-hero-card:before{content:"";position:absolute;inset:-38% 20% auto auto;width:360px;height:360px;border-radius:999px;background:radial-gradient(circle,rgba(78,115,223,.18),transparent 66%);pointer-events:none}
.not-found-hero-card h1{position:relative;margin:12px auto 10px;max-width:860px;font-size:clamp(2.1rem,5vw,4.6rem);line-height:.98;letter-spacing:0;color:var(--tx)}
.not-found-hero-card p{position:relative;margin:0 auto 22px;max-width:680px;color:var(--tx2);font-size:1.04rem;line-height:1.65}
.not-found-search{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;width:min(820px,100%);margin:22px auto 0;padding:10px;border:1px solid var(--bd);border-radius:24px;background:rgba(255,255,255,.82);box-shadow:0 18px 46px rgba(15,23,42,.08)}
.dark .not-found-search{background:rgba(15,23,42,.72)}
.not-found-search .mud-input-control{margin:0}
.not-found-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:18px}
.not-found-layout-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:22px}
.not-found-panel{border:1px solid var(--bd);border-radius:24px;background:var(--bg2);box-shadow:var(--sh);padding:22px}
.not-found-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.not-found-panel-head h2{margin:4px 0 0;font-size:1.35rem;line-height:1.15}
.not-found-panel-head a{color:var(--ac);font-weight:800;text-decoration:none}
.not-found-tool-list{display:grid;gap:10px}
.not-found-tool-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px;border:1px solid var(--bd);border-radius:18px;background:var(--bg);color:var(--tx);text-decoration:none;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.not-found-tool-row:hover,.not-found-tool-row:focus-visible{border-color:var(--ac);transform:translateY(-1px);box-shadow:0 12px 28px rgba(15,23,42,.08)}
.not-found-tool-row > span:first-child{display:grid;place-items:center;width:42px;height:42px;border-radius:15px;background:var(--bg3);color:var(--ac)}
.not-found-tool-row b{display:block;font-size:.98rem}
.not-found-tool-row small{display:block;color:var(--tx2);line-height:1.35;margin-top:3px}
.not-found-menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.not-found-menu-grid a{display:grid;gap:7px;padding:14px;border:1px solid var(--bd);border-radius:18px;background:var(--bg);color:var(--tx);text-decoration:none;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.not-found-menu-grid a:hover,.not-found-menu-grid a:focus-visible{border-color:var(--ac);transform:translateY(-1px);box-shadow:0 12px 28px rgba(15,23,42,.08)}
.not-found-menu-grid span{display:grid;place-items:center;width:38px;height:38px;border-radius:14px;background:var(--bg3);color:var(--ac)}
.not-found-menu-grid b{font-size:.95rem;line-height:1.15}
.not-found-menu-grid small{color:var(--tx2);font-weight:700}
.not-found-quick-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.not-found-quick-links a{display:inline-flex;align-items:center;gap:8px;padding:10px 13px;border:1px solid var(--bd);border-radius:999px;background:var(--bg2);color:var(--tx);font-weight:800;text-decoration:none}
.not-found-quick-links a:hover,.not-found-quick-links a:focus-visible{border-color:var(--ac);color:var(--ac)}
@media (max-width: 860px){
    .not-found-page{width:min(100% - 18px,1180px);margin:22px auto 46px}
    .not-found-hero-card{padding:26px 18px;border-radius:24px}
    .not-found-search{grid-template-columns:1fr;padding:8px;border-radius:20px}
    .not-found-layout-grid{grid-template-columns:1fr}
    .not-found-menu-grid{grid-template-columns:1fr}
    .not-found-panel{padding:17px;border-radius:20px}
}
.tool-popup{position:fixed;inset:0;z-index:2000;display:none}
.tool-popup.open{display:block}
.tool-popup-backdrop{position:absolute;inset:0;background:rgba(7,12,24,.55);backdrop-filter:blur(8px)}
.tool-popup-shell{position:absolute;inset:4vh 4vw;display:flex;flex-direction:column;border:1px solid var(--bd);border-radius:14px;background:linear-gradient(180deg,var(--bg2),var(--bg3));box-shadow:0 24px 80px rgba(0,0,0,.35);overflow:hidden;transition:inset .2s ease,max-width .2s ease}
.tool-popup.small .tool-popup-shell{inset:8vh auto 8vh 50%;width:min(760px,92vw);transform:translateX(-50%)}
.tool-popup.medium .tool-popup-shell{inset:5vh auto 5vh 50%;width:min(1040px,94vw);transform:translateX(-50%)}
.tool-popup.large .tool-popup-shell{inset:3vh auto 3vh 50%;width:min(1320px,96vw);transform:translateX(-50%)}
.tool-popup.full .tool-popup-shell{inset:1vh 1vw;transform:none;width:auto}
.tool-popup-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--bd);background:var(--bg2)}
.tool-popup-kicker{display:block;color:var(--tx2);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.tool-popup-head strong{display:block;color:var(--tx);font-size:1rem}
.tool-popup-actions{display:flex;gap:8px;flex-wrap:wrap}
.tool-popup-btn{border-radius:10px;background:var(--bg3);color:var(--tx);padding:7px 10px;font:inherit;font-weight:800;text-decoration:none}
.tool-popup-btn:hover{border-color:var(--ac);color:var(--ac);text-decoration:none}
.tool-popup iframe{flex:1;width:100%;border:0;background:var(--bg)}
body.tool-popup-open{overflow:hidden}
.catalog-filter{max-width:560px;margin-bottom:16px}
.cat-heading-pro{display:flex;justify-content:space-between;align-items:center}
.cat-heading-pro span{display:flex;align-items:center;gap:8px}
.cat-heading-pro small{color:var(--tx2);font-size:.85rem}
.hide-mobile{display:inline}
.related .tool-grid-sm{margin-top:12px}
.mud-button-root{text-transform:none}
.validator-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:18px;border:1px solid var(--bd);border-radius:var(--r);background:linear-gradient(135deg,var(--bg2),var(--bg3));box-shadow:var(--sh2)}
.validator-hero h1{margin:0;font-size:1.6rem;line-height:1.1}
.validator-metrics{display:grid;grid-template-columns:repeat(2,minmax(110px,1fr));gap:10px;min-width:min(280px,100%)}
.validator-metrics div{padding:12px 14px;border:1px solid var(--bd);border-radius:12px;background:var(--bg2);text-align:center}
.validator-metrics span{display:block;font-weight:800;color:var(--tx);font-size:1rem}
.validator-metrics small{display:block;color:var(--tx2);margin-top:4px}
.validator-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:14px}
.validator-pill{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--bd);border-radius:14px;background:var(--bg2);color:var(--tx);text-decoration:none;box-shadow:var(--sh)}
.api-workbench{
    overflow:hidden;
}
.api-workbench-bar{
    display:grid;
    grid-template-columns:minmax(112px,140px) minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    padding:12px;
    margin-bottom:14px;
    border:1px solid var(--bd);
    border-radius:22px;
    background:linear-gradient(180deg,var(--bg2),var(--bg3));
    box-shadow:var(--sh2);
}
.api-method-select,
.api-url-input{
    width:100%;
    min-height:48px;
    border:1px solid var(--bd);
    border-radius:16px;
    background:var(--bg);
    color:var(--tx);
    font:inherit;
    font-weight:800;
    padding:0 14px;
}
.api-method-select{
    color:var(--ac);
}
.api-url-input{
    min-width:0;
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
    font-size:.92rem;
    font-weight:700;
}
.api-pane{
    display:flex;
    flex-direction:column;
    gap:14px;
    min-height:680px;
    padding:16px;
    border:1px solid var(--bd);
    border-radius:22px;
    background:var(--bg2);
    box-shadow:var(--sh2);
}
.api-pane-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}
.api-pane-head h3{
    margin:0;
    font-size:1.15rem;
}
.api-pane-head p{
    margin:3px 0 0;
    color:var(--tx2);
    line-height:1.4;
}
.api-tabs .mud-tabs-toolbar{
    border-radius:16px;
    background:var(--bg3);
}
.api-field-label{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:8px 0;
    color:var(--tx);
    font-weight:900;
}
.api-field-label span{
    color:var(--tx2);
    font-size:.78rem;
    font-weight:700;
}
.api-editor,
.api-response-body,
.api-code-box{
    width:100%;
    max-width:100%;
    resize:vertical;
    font-size:.88rem;
    line-height:1.5;
    overflow:auto;
    white-space:pre;
}
.api-response-body{
    min-height:420px;
}
.api-preview-url{
    display:grid;
    gap:4px;
    margin-top:10px;
    padding:12px;
    border:1px solid var(--bd);
    border-radius:14px;
    background:var(--bg3);
}
.api-preview-url b{
    font-size:.78rem;
    text-transform:uppercase;
    color:var(--tx2);
    letter-spacing:.04em;
}
.api-preview-url span{
    min-width:0;
    overflow-wrap:anywhere;
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
    font-size:.86rem;
    color:var(--tx);
}
.api-two-col{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}
.api-two-col label{
    min-width:0;
    color:var(--tx2);
    font-weight:800;
}
.api-stats{
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.api-stats .sv{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
@media (max-width:920px){
    .api-workbench-bar{grid-template-columns:1fr}
    .api-pane{min-height:auto}
    .api-two-col{grid-template-columns:1fr}
    .api-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.validator-pill:hover{text-decoration:none;border-color:var(--ac2);background:var(--bg4);box-shadow:var(--sh2)}
.validator-pill.active{border-color:var(--ac);background:linear-gradient(135deg,var(--acl),var(--acl2));box-shadow:var(--sh2)}
.validator-pill b{font-size:.94rem;line-height:1.2}
.validator-pill small{color:var(--tx2);font-size:.8rem;line-height:1.2}
.education-suite{display:grid;gap:18px}
.education-chipbar{display:flex;flex-wrap:wrap;gap:10px}
.education-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--bd);border-radius:999px;background:var(--bg2);color:var(--tx);font-weight:700;text-decoration:none;cursor:pointer}
.education-chip:hover,.education-chip.active{text-decoration:none;border-color:var(--ac2);background:var(--bg4);box-shadow:var(--sh)}
.education-chip .mud-icon-root{color:var(--ac)}
.education-workspace{display:grid;gap:16px}
.education-workspace-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.education-workspace-head h2{margin:0 0 6px;font-size:1.35rem}
.education-workspace-head p{margin:0;color:var(--tx2);max-width:72ch}
.education-mini-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-width:280px}
.education-mini-stats div{padding:12px 14px;border:1px solid var(--bd);border-radius:12px;background:var(--bg2);text-align:center;box-shadow:var(--sh)}
.education-mini-stats b{display:block;font-size:1.05rem}
.education-mini-stats span{display:block;color:var(--tx2);font-size:.8rem;margin-top:3px}
.periodic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:10px;margin-top:14px}
.element-card{display:grid;gap:4px;align-content:start;padding:12px 10px;border:1px solid var(--bd);border-radius:12px;background:var(--bg2);color:var(--tx);box-shadow:var(--sh);text-align:left;cursor:pointer}
.element-card:hover,.element-card.active{border-color:var(--ac2);background:var(--bg4);box-shadow:var(--sh2)}
.element-card strong{font-size:1.45rem;line-height:1}
.element-card .el-num{color:var(--tx2);font-size:.76rem;font-weight:700}
.element-card .el-name{font-weight:700}
.element-card small{color:var(--tx2);font-size:.78rem;line-height:1.35}
.element-card .el-cat{color:var(--ac)}
.formula-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.formula-card{padding:14px;border:1px solid var(--bd);border-radius:12px;background:var(--bg2);box-shadow:var(--sh)}
.formula-card h3{margin:0 0 8px;font-size:1rem}
.formula-card ul{margin:0;padding-left:18px;color:var(--tx2)}
.formula-card li{margin:6px 0}
.formula-card code{font-family:var(--m);font-size:.9rem}
@media(max-width:1100px){
    .premium-dashboard{grid-template-columns:1fr 1fr}
    .dashboard-tile.large{grid-column:1 / -1}
    .webhook-grid{grid-template-columns:1fr}
    .hero-pro{grid-template-columns:1fr;gap:18px}
    .network-toolbar-row,.network-workspace-head{grid-template-columns:1fr;display:grid}
    .network-mini-stats{min-width:0;grid-template-columns:repeat(2,minmax(0,1fr))}
    .tool-popup-shell{inset:2vh 2vw;border-radius:10px}
    .tool-popup-head{align-items:flex-start}
    .tool-popup-actions{justify-content:flex-end}
    .education-workspace-head{grid-template-columns:1fr;display:grid}
    .education-mini-stats{min-width:0;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
    .nav-inner{gap:10px}
    .nav-right{display:none}
    .top-search-bar{flex-direction:column;align-items:stretch}
    .top-search-meta{gap:8px}
    .premium-dashboard{grid-template-columns:1fr}
    .dashboard-tile.large{grid-column:auto}
    .tool-list-item{grid-template-columns:auto 1fr}
    .hide-mobile{display:none}
    .validator-hero{flex-direction:column}
    .validator-metrics{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
    .top-search-bar{flex-wrap:wrap}
    .split,.clock-tool,.command-hero{grid-template-columns:1fr}
    .hero-pro{grid-template-columns:1fr}
    .footer-cols{grid-template-columns:1fr}
    .premium-dashboard{grid-template-columns:1fr}
}
@media(max-width:640px){
    .main{padding:18px 14px 34px}
    .mobile-menu{display:inline-flex!important}
    .nav-search-wrap{display:none}
    .tool-head{flex-direction:column}
    .section-title,.page-title-row{align-items:flex-start;flex-direction:column}
    .hide-mobile{display:none}
    .tool-popup-shell{inset:2vh 2vw;border-radius:10px}
    .tool-popup-head{align-items:flex-start}
    .tool-popup-actions{justify-content:flex-end}
    .dtable{font-size:.82rem}
    .hero-copy h1{font-size:2.25rem}
    .hero-panel{grid-template-columns:1fr}
    .network-mini-stats{grid-template-columns:1fr 1fr}
    .education-mini-stats{grid-template-columns:1fr 1fr}
}

.tool-disabled-alert{
    margin-top:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.tool-disabled-copy{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.tool-manager-page{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.tool-manager-hero{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}

.tool-manager-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}

.tool-manager-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.stat-card{
    border:1px solid rgba(127, 155, 186, .24);
    border-radius:16px;
    background:rgba(255,255,255,.72);
    padding:14px 16px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.stat-label{
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--muted);
}

.tool-manager-category{
    border:1px solid rgba(127, 155, 186, .18);
    border-radius:18px;
    padding:16px;
    background:rgba(255,255,255,.72);
    display:flex;
    flex-direction:column;
    gap:14px;
}

.tool-manager-category-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
}

.tool-manager-category-head h3{
    margin:0;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:1.1rem;
}

.tool-manager-category-head p{
    margin:4px 0 0;
    color:var(--tx2);
    font-size:.92rem;
}

.tool-manager-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.tool-manager-row{
    border:1px solid rgba(127, 155, 186, .18);
    border-radius:16px;
    padding:12px 14px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    background:rgba(255,255,255,.78);
}

.tool-manager-row.disabled{
    opacity:.72;
}

.tool-manager-row-copy{
    display:flex;
    align-items:flex-start;
    gap:12px;
    min-width:0;
}

.tool-manager-select{
    width:18px;
    height:18px;
    margin-top:4px;
    accent-color:var(--ac);
    flex:0 0 auto;
}

.tool-manager-row-copy > div{
    min-width:0;
}

.tool-manager-row-copy b,
.tool-manager-row-copy p,
.tool-manager-row-copy small{
    display:block;
}

.tool-manager-row-copy p{
    margin:4px 0 0;
    color:var(--tx2);
}

.tool-manager-row-copy small{
    margin-top:6px;
    color:var(--tx2);
    word-break:break-all;
}

.tool-manager-row-meta{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.tool-role-chip-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
}

.access-control-page{
    display:flex;
    flex-direction:column;
    gap:1rem;
    padding:1rem 0 2rem;
}

.access-control-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:1rem;
    padding:1rem 0;
}

.access-control-header h1{
    margin:0;
    font-size:clamp(2rem, 3vw, 2.6rem);
}

.access-control-header p{
    margin:0.35rem 0 0;
}

.access-control-status{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:0.5rem;
}

.access-control-tabs{
    margin-top:0.5rem;
}

.access-control-page .panel-card{
    height:100%;
}

@media (max-width: 980px){
    .tool-manager-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .tool-disabled-alert,
    .tool-manager-row,
    .tool-manager-category-head{
        flex-direction:column;
        align-items:flex-start;
    }
}

@media (max-width: 640px){
    .tool-manager-stats{
        grid-template-columns:1fr;
    }
}

.pdf-panel {
    border: 1px solid rgba(97, 125, 255, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 255, 0.92));
    box-shadow: 0 18px 42px rgba(37, 51, 105, 0.08);
}

.pdf-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.pdf-section-head h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #102147;
}

.pdf-section-head .muted,
.pdf-summary-card .muted {
    margin: 4px 0 0;
    color: #5b6b8b;
}

.pdf-upload-box {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px dashed rgba(80, 110, 220, 0.35);
    border-radius: 16px;
    background: rgba(250, 252, 255, 0.82);
}

.pdf-upload-box input[type="file"] {
    width: 100%;
    max-width: 100%;
    color: #102147;
}

.upload-progress-panel {
    display: grid;
    gap: 7px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 8%, var(--bg2));
    color: var(--tx);
}

.upload-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: .88rem;
}

.upload-progress-head span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-progress-head strong {
    flex: 0 0 auto;
    min-width: 58px;
    padding: 5px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, var(--bg2));
    color: var(--accent);
    text-align: center;
    font-size: .9rem;
    font-weight: 900;
}

.upload-progress-panel progress {
    width: 100%;
    height: 12px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, var(--bg3));
}

.upload-progress-panel progress::-webkit-progress-bar {
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, var(--bg3));
}

.upload-progress-panel progress::-webkit-progress-value {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
}

.upload-progress-panel progress::-moz-progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
}

.upload-progress-panel progress:not([value]) {
    position: relative;
    background: color-mix(in srgb, var(--accent) 12%, var(--bg3));
}

.upload-progress-panel progress:not([value])::-webkit-progress-bar {
    background: color-mix(in srgb, var(--accent) 12%, var(--bg3));
}

.upload-progress-panel progress:not([value])::-webkit-progress-value {
    background: linear-gradient(90deg, var(--accent), var(--accent2));
}

.upload-progress-panel progress:not([value])::-moz-progress-bar {
    background: linear-gradient(90deg, var(--accent), var(--accent2));
}

.upload-progress-panel small {
    color: var(--mut);
    font-size: .78rem;
}

.pdf-summary-card {
    padding: 16px;
    border: 1px solid rgba(97, 125, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
}

.pdf-loaded-list {
    display: grid;
    gap: 10px;
}

.pdf-loaded-item {
    display: grid;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid rgba(97, 125, 255, 0.12);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 248, 255, 0.92));
}

.pdf-loaded-item b,
.pdf-table-name b,
.pdf-launch-card b {
    color: #13264d;
}

.pdf-loaded-item span,
.pdf-loaded-item small,
.pdf-table-name small {
    color: #5f6d88;
}

.pdf-table-name {
    display: grid;
    gap: 3px;
}

.pdf-launch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

.pdf-launch-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(97, 125, 255, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 255, 0.92));
    box-shadow: 0 12px 28px rgba(37, 51, 105, 0.06);
}

.pdf-launch-card.disabled {
    opacity: 0.86;
}

.pdf-launch-top {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.pdf-launch-top b {
    display: block;
    line-height: 1.25;
}

.pdf-launch-card .mud-button {
    border-radius: 12px;
}

.pdf-panel .mud-table {
    border-radius: 14px;
    overflow: hidden;
}

.pdf-panel .mud-table td,
.pdf-panel .mud-table th {
    padding-top: 10px;
    padding-bottom: 10px;
}

.pdf-panel .mud-alert {
    border-radius: 14px;
}

.automation-panel {
    border: 1px solid rgba(47, 92, 255, 0.12);
    border-radius: 22px;
    padding: 1.1rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(243,247,255,0.95));
    box-shadow: 0 16px 40px rgba(21, 39, 87, 0.08);
}

.automation-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 0.75rem;
}

.automation-controls label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--mud-palette-text-secondary);
    font-size: 0.92rem;
}

.automation-controls input {
    border: 1px solid rgba(47, 92, 255, 0.16);
    border-radius: 14px;
    padding: 0.75rem 0.85rem;
    background: #fff;
    font: inherit;
}

.automation-small {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    color: var(--mud-palette-text-secondary);
    font-size: 0.9rem;
}

.automation-case-list,
.automation-report-list {
    display: grid;
    gap: 1rem;
}

.automation-case-card {
    border: 1px solid rgba(47, 92, 255, 0.12);
    border-radius: 22px;
    padding: 1rem;
    background: rgba(255,255,255,0.92);
}

.automation-case-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.automation-case-head h4 {
    margin: 0;
    font-size: 1.02rem;
}

.automation-case-head small {
    display: block;
    margin-top: 0.18rem;
    color: var(--mud-palette-text-secondary);
}

.automation-step-list {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.9rem;
}

.automation-step-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: flex-start;
}

.automation-step-kind {
    min-width: 5.5rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: rgba(47, 92, 255, 0.09);
    color: #3058f5;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.automation-step-kind.step-pass {
    background: rgba(20, 128, 74, 0.12);
    color: rgb(20, 128, 74);
}

.automation-step-kind.step-fail {
    background: rgba(210, 60, 60, 0.12);
    color: rgb(210, 60, 60);
}

.automation-step-kind.step-warning {
    background: rgba(245, 158, 11, 0.14);
    color: rgb(180, 83, 9);
}

.automation-step-row code {
    white-space: normal;
    word-break: break-word;
    color: var(--mud-palette-text-primary);
    background: rgba(47, 92, 255, 0.05);
    border-radius: 10px;
    padding: 0.32rem 0.5rem;
}

.automation-case-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.automation-thumb {
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid rgba(47, 92, 255, 0.12);
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.games-connect-four-actions {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.games-active-arena {
    scroll-margin-top: 92px;
    outline: none;
}

.games-active-arena:focus-visible {
    box-shadow: 0 0 0 3px rgba(87, 107, 255, 0.22), var(--sh);
}

.games-active-arena canvas {
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.games-active-arena button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.games-active-arena .games-grid,
.games-active-arena .games-connect-four-board,
.games-active-arena .games-connect-four-actions,
.games-active-arena .games-choice-row,
.games-active-arena .games-memory-grid,
.games-active-arena .games-trivia-options,
.games-active-arena .games-reaction-stage,
.games-active-arena .games-sequence-row,
.games-active-arena .games-pattern-row,
.games-active-arena .games-number-row {
    touch-action: manipulation;
}

.games-connect-four-board {
    display: grid;
    grid-template-columns: repeat(7, minmax(36px, 1fr));
    gap: 8px;
    max-width: 100%;
    background: linear-gradient(180deg, rgba(55, 77, 214, 0.08), rgba(15, 23, 42, 0.04));
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 18px;
    padding: 12px;
}

.games-connect-four-cell {
    aspect-ratio: 1;
    border-radius: 999px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(99, 102, 241, 0.12);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.02);
}

.games-connect-four-cell.empty span {
    opacity: 0;
}

.games-connect-four-cell.human {
    background: rgba(37, 99, 235, 0.16);
    color: #1d4ed8;
}

.games-connect-four-cell.bot {
    background: rgba(220, 38, 38, 0.14);
    color: #b91c1c;
}

.games-nim-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 12px 0;
}

.games-nim-stone {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.95), rgba(37, 99, 235, 0.75));
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
    display: inline-block;
}

.games-cell {
    aspect-ratio: 1;
    border-radius: 18px;
    border: 1px solid rgba(87, 107, 255, 0.18);
    background: linear-gradient(180deg, #ffffff, #f4f7ff);
    font-size: 2rem;
    font-weight: 800;
    color: #111827;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.games-cell.empty {
    color: rgba(17, 24, 39, 0.45);
}

.games-cell.human {
    background: linear-gradient(180deg, #dbeafe, #bfdbfe);
    color: #1d4ed8;
}

.games-cell.bot {
    background: linear-gradient(180deg, #fee2e2, #fecaca);
    color: #b91c1c;
}

.games-cell:hover {
    transform: translateY(-1px);
    border-color: rgba(87, 107, 255, 0.45);
    box-shadow: 0 6px 18px rgba(55, 77, 214, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.games-cell:focus-visible {
    outline: 2px solid rgba(87, 107, 255, 0.8);
    outline-offset: 2px;
}

.games-choice-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.games-memory-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.games-memory-card {
    aspect-ratio: 1;
    border-radius: 18px;
    border: 1px solid rgba(87, 107, 255, 0.18);
    background: linear-gradient(180deg, #fdfdff, #eef3ff);
    color: #111827;
    font-size: 1.5rem;
    font-weight: 800;
}

.games-memory-card.matched {
    border-color: rgba(22, 163, 74, 0.4);
    background: linear-gradient(180deg, #ecfdf5, #d1fae5);
}

.games-prompt {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #1f2937;
}

.games-quiz-question {
    margin: 0.35rem 0 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
}

.games-trivia-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.games-reaction-stage {
    min-height: 180px;
    border-radius: 24px;
    border: 1px solid rgba(87, 107, 255, 0.18);
    background: linear-gradient(180deg, #eff4ff, #f8fbff);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.games-reaction-stage.ready {
    background: linear-gradient(180deg, #dcfce7, #bbf7d0);
}

.games-reaction-button {
    border: 0;
    border-radius: 999px;
    padding: 18px 28px;
    font-size: 1rem;
    font-weight: 800;
    color: white;
    background: linear-gradient(135deg, #4f46e5, #2563eb);
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.24);
}

.games-scramble {
    margin: 0.35rem 0 0;
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1d4ed8;
}

.games-sequence-row,
.games-pattern-row,
.games-number-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.games-sequence-token,
.games-pattern-row span,
.games-number-row span {
    min-width: 48px;
    min-height: 48px;
    display: inline-grid;
    place-items: center;
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid rgba(87, 107, 255, 0.18);
    background: linear-gradient(180deg, #ffffff, #eef3ff);
    color: #1d4ed8;
    font-size: 1.15rem;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
}

.games-sequence-token:nth-child(2n) {
    color: #047857;
    background: linear-gradient(180deg, #ffffff, #ecfdf5);
}

.games-sequence-token:nth-child(3n) {
    color: #b45309;
    background: linear-gradient(180deg, #ffffff, #fffbeb);
}

.games-big-number,
.games-target-number {
    display: grid;
    place-items: center;
    min-height: 150px;
    margin-top: 12px;
    border-radius: 24px;
    border: 1px solid rgba(87, 107, 255, 0.18);
    background:
        radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.14), transparent 52%),
        linear-gradient(180deg, #ffffff, #f4f7ff);
    color: #1d4ed8;
    font-size: clamp(2.6rem, 8vw, 5.4rem);
    font-weight: 950;
    letter-spacing: -0.04em;
}

.games-target-number {
    min-height: 110px;
    font-size: clamp(1.8rem, 5vw, 3.4rem);
}

:root{
    --bg:#f5f5f7;
    --bg2:#ffffff;
    --bg3:#fbfbfd;
    --bg4:#f2f2f4;
    --tx:#1d1d1f;
    --tx2:#6e6e73;
    --bd:#d2d2d7;
    --ac:#0071e3;
    --ach:#005bbf;
    --ac2:#34c759;
    --acl:rgba(0,113,227,.09);
    --acl2:rgba(52,199,89,.08);
    --r:18px;
    --mw:1440px;
    --f:system-ui,"Segoe UI",Roboto,Arial,sans-serif;
    --sh:0 1px 2px rgba(0,0,0,.04),0 12px 32px rgba(0,0,0,.06);
    --sh2:0 2px 6px rgba(0,0,0,.06),0 24px 70px rgba(0,0,0,.10);
}

.dark{
    --bg:#000000;
    --bg2:#1d1d1f;
    --bg3:#161617;
    --bg4:#2c2c2e;
    --tx:#f5f5f7;
    --tx2:#a1a1a6;
    --bd:#3a3a3c;
    --ac:#2997ff;
    --ach:#47a8ff;
    --ac2:#30d158;
    --acl:rgba(41,151,255,.14);
    --acl2:rgba(48,209,88,.10);
    --sh:0 1px 2px rgba(0,0,0,.35),0 18px 44px rgba(0,0,0,.32);
    --sh2:0 4px 10px rgba(0,0,0,.42),0 30px 88px rgba(0,0,0,.45);
}

html,body{
    background:var(--bg);
    color:var(--tx);
    font-family:var(--f);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

.app{
    min-height:100vh;
    background:var(--bg);
}

.main{
    max-width:var(--mw);
    padding:42px 28px 56px;
}

.mud-topbar{
    height:52px!important;
    background:rgba(251,251,253,.82)!important;
    color:var(--tx)!important;
    border-bottom:1px solid rgba(210,210,215,.58)!important;
    box-shadow:none!important;
    backdrop-filter:saturate(180%) blur(22px);
}

.dark .mud-topbar{
    background:rgba(22,22,23,.82)!important;
    border-bottom-color:rgba(58,58,60,.72)!important;
}

.nav-inner{
    height:52px;
    padding:0 22px;
    gap:18px;
}

.logo{
    font-size:1rem;
    font-weight:700;
    letter-spacing:0;
    color:var(--tx)!important;
}

.nav-right{
    gap:4px;
}

.mud-button-root{
    border-radius:999px!important;
    font-weight:650!important;
    letter-spacing:0!important;
}

.mud-button-filled-primary,
.btn-p{
    background:#0071e3!important;
    border-color:#0071e3!important;
    color:#fff!important;
    box-shadow:0 8px 22px rgba(0,113,227,.22)!important;
}

.mud-button-outlined,
.btn-s,
.btn{
    border-color:rgba(110,110,115,.26)!important;
    background:rgba(255,255,255,.72)!important;
    color:var(--tx)!important;
    backdrop-filter:blur(18px);
}

.dark .mud-button-outlined,
.dark .btn-s,
.dark .btn{
    background:rgba(29,29,31,.72)!important;
}

.nav-search-mud .mud-input-root,
.top-search-input .mud-input-root,
.catalog-filter .mud-input-root{
    border-radius:999px!important;
    background:rgba(255,255,255,.78)!important;
    border:1px solid rgba(210,210,215,.72)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.78);
}

.dark .nav-search-mud .mud-input-root,
.dark .top-search-input .mud-input-root,
.dark .catalog-filter .mud-input-root{
    background:rgba(29,29,31,.86)!important;
    border-color:rgba(58,58,60,.86)!important;
}

.search-drop{
    margin-top:8px;
    border-radius:24px;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(210,210,215,.72);
    box-shadow:var(--sh2);
    backdrop-filter:blur(24px);
}

.dark .search-drop{
    background:rgba(29,29,31,.94);
}

.search-drop-head,
.search-hit,
.top-search-bar,
.dashboard-tile,
.tool-panel,
.calc-card,
.how-to,
.related,
.webhook-card,
.panel-card,
.tool-manager-category,
.tool-manager-row,
.stat-card,
.access-control-page .panel-card{
    background:rgba(255,255,255,.78)!important;
    border:1px solid rgba(210,210,215,.70)!important;
    box-shadow:var(--sh)!important;
    backdrop-filter:blur(18px);
}

.dark .search-drop-head,
.dark .search-hit,
.dark .top-search-bar,
.dark .dashboard-tile,
.dark .tool-panel,
.dark .calc-card,
.dark .how-to,
.dark .related,
.dark .webhook-card,
.dark .panel-card,
.dark .tool-manager-category,
.dark .tool-manager-row,
.dark .stat-card,
.dark .access-control-page .panel-card{
    background:rgba(29,29,31,.78)!important;
    border-color:rgba(58,58,60,.82)!important;
}

.hero-pro{
    min-height:460px;
    padding:72px 0 48px;
    grid-template-columns:minmax(0,1fr);
    text-align:center;
    justify-items:center;
    gap:34px;
}

.hero-copy{
    max-width:860px;
}

.hero-copy .eyebrow,
.eyebrow{
    color:var(--tx2);
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.08em;
}

.hero-copy h1{
    margin:8px 0 14px;
    font-size:clamp(3.15rem,7vw,6.2rem);
    line-height:.96;
    font-weight:800;
    letter-spacing:0;
}

.hero-text{
    max-width:760px;
    margin:0 auto;
    color:var(--tx2);
    font-size:clamp(1.18rem,2vw,1.55rem);
    line-height:1.45;
}

.quick-actions{
    justify-content:center;
    margin-top:26px;
}

.top-search-meta{
    justify-content:center;
}

.top-search-meta span,
.category-chip,
.badge,
.badge-soft,
.network-chip,
.education-chip{
    border-radius:999px;
    background:rgba(255,255,255,.72);
    border:1px solid rgba(210,210,215,.72);
    color:var(--tx2);
    box-shadow:none;
}

.dark .top-search-meta span,
.dark .category-chip,
.dark .badge,
.dark .badge-soft,
.dark .network-chip,
.dark .education-chip{
    background:rgba(29,29,31,.76);
    border-color:rgba(58,58,60,.82);
}

.hero-panel{
    width:min(900px,100%);
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    padding:14px;
    border-radius:30px;
    background:rgba(255,255,255,.64);
    border:1px solid rgba(210,210,215,.74);
    box-shadow:var(--sh2);
    backdrop-filter:blur(24px);
}

.dark .hero-panel{
    background:rgba(29,29,31,.72);
    border-color:rgba(58,58,60,.82);
}

.hero-tool-pill{
    min-height:78px;
    flex-direction:column;
    justify-content:center;
    border-radius:22px;
    background:var(--bg3);
    border:1px solid transparent;
    color:var(--tx);
    font-size:.86rem;
}

.hero-tool-pill:hover,
.tcard:hover,
.catcard:hover,
.dashboard-tile:hover,
.tool-list-item:hover{
    transform:translateY(-2px);
    box-shadow:var(--sh2);
    border-color:rgba(0,113,227,.35);
    text-decoration:none;
}

.top-search-studio{
    max-width:1080px;
    margin:0 auto 24px;
}

.top-search-bar{
    border-radius:28px;
    padding:16px 18px;
}

.section{
    margin-top:48px;
}

.section-title,
.page-title-row{
    margin-bottom:18px;
}

.section-title h2,
.page-title-row h1,
.tool-head h1,
.access-control-header h1,
.tool-manager-hero h2{
    color:var(--tx);
    font-weight:800;
    letter-spacing:0;
}

.section-title h2,
.page-title-row h1{
    font-size:clamp(1.7rem,3vw,2.55rem);
}

.tool-grid{
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:18px;
}

.cat-grid{
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:16px;
}

.tcard,
.tcard-sm,
.catcard,
.dashboard-tile,
.tool-head,
.tool-list-item,
.empty-panel,
.app-error,
.not-found{
    border-radius:26px;
    border:1px solid rgba(210,210,215,.72);
    background:rgba(255,255,255,.78);
    box-shadow:var(--sh);
    backdrop-filter:blur(18px);
}

.dark .tcard,
.dark .tcard-sm,
.dark .catcard,
.dark .dashboard-tile,
.dark .tool-head,
.dark .tool-list-item,
.dark .empty-panel,
.dark .app-error,
.dark .not-found{
    background:rgba(29,29,31,.78);
    border-color:rgba(58,58,60,.82);
}

.tcard{
    padding:18px;
}

.tcard-icon,
.cat-icon,
.tool-title-icon{
    border-radius:20px;
    background:linear-gradient(180deg,#f5f5f7,#ffffff);
    color:#0071e3;
    box-shadow:inset 0 0 0 1px rgba(210,210,215,.72);
}

.dark .tcard-icon,
.dark .cat-icon,
.dark .tool-title-icon{
    background:linear-gradient(180deg,#2c2c2e,#1d1d1f);
    color:#2997ff;
    box-shadow:inset 0 0 0 1px rgba(58,58,60,.86);
}

.premium-dashboard{
    grid-template-columns:1.25fr repeat(3,1fr);
    gap:18px;
}

.dashboard-tile{
    min-height:178px;
    padding:24px;
    border-radius:30px;
}

.dashboard-tile.large{
    min-height:220px;
}

.dashboard-links a{
    border-radius:999px;
    background:var(--bg3);
    border:1px solid rgba(210,210,215,.72);
}

.tool-page{
    max-width:1220px;
}

.breadcrumb{
    margin-bottom:20px;
    font-size:.9rem;
}

.tool-head{
    padding:28px;
    gap:18px;
    align-items:center;
}

.tool-head h1{
    font-size:clamp(2rem,4vw,3.4rem);
}

.tool-head p{
    font-size:1.08rem;
    line-height:1.55;
}

.tool-body,
.how-to,
.related{
    margin-top:22px;
}

.how-to,
.related,
.tool-panel,
.calc-card{
    border-radius:28px;
    padding:24px;
}

.form-row input,
.form-row select,
.form-col input,
.form-col select,
.form-col textarea,
.form-row textarea,
.ta,
.calc-display{
    border-radius:18px;
    background:rgba(255,255,255,.88);
    border:1px solid rgba(210,210,215,.82);
}

.dark .form-row input,
.dark .form-row select,
.dark .form-col input,
.dark .form-col select,
.dark .form-col textarea,
.dark .form-row textarea,
.dark .ta,
.dark .calc-display{
    background:rgba(29,29,31,.88);
    border-color:rgba(58,58,60,.86);
}

.dtable th{
    background:var(--bg4);
    color:var(--tx);
}

.dtable th,
.dtable td{
    padding:12px 14px;
}

.footer{
    background:var(--bg);
    border-top:1px solid rgba(210,210,215,.72);
}

.footer-inner{
    color:var(--tx2);
    padding:36px 28px;
}

.mud-drawer{
    background:rgba(251,251,253,.94)!important;
    backdrop-filter:blur(24px);
}

.dark .mud-drawer{
    background:rgba(22,22,23,.94)!important;
}

.drawer-menu .mud-nav-link{
    border-radius:14px;
    margin:2px 10px;
}

.tool-manager-page,
.access-control-page{
    max-width:1280px;
    margin:0 auto;
}

.tool-manager-hero,
.access-control-header{
    padding:30px;
    border-radius:30px;
    border:1px solid rgba(210,210,215,.72);
    background:rgba(255,255,255,.76);
    box-shadow:var(--sh);
    backdrop-filter:blur(18px);
}

.dark .tool-manager-hero,
.dark .access-control-header{
    background:rgba(29,29,31,.78);
    border-color:rgba(58,58,60,.82);
}

.tool-manager-row{
    border-radius:22px;
    align-items:flex-start;
}

.tool-access-editor{
    min-width:min(520px,100%);
}

.tool-access-editor .mud-input-root{
    border-radius:16px!important;
}

.stat-card,
.tool-manager-category{
    border-radius:26px;
}

.page-gate-alert{
    max-width:760px;
    margin:38px auto;
    padding:24px;
    border-radius:28px;
    border:1px solid rgba(210,210,215,.72);
    background:rgba(255,255,255,.84);
    box-shadow:var(--sh);
}

.dark .page-gate-alert{
    background:rgba(29,29,31,.84);
    border-color:rgba(58,58,60,.82);
}

@media(max-width:1100px){
    .hero-panel{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .premium-dashboard{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:720px){
    .main{
        padding:28px 16px 42px;
    }
    .hero-pro{
        min-height:auto;
        padding:42px 0 30px;
    }
    .hero-copy h1{
        font-size:clamp(2.65rem,13vw,4rem);
    }
    .hero-panel,
    .premium-dashboard{
        grid-template-columns:1fr;
    }
    .tool-manager-hero,
    .access-control-header{
        padding:22px;
    }
    .tool-access-editor{
        min-width:100%;
    }
}

/* Full-screen workspace layout */
:root {
    --mw: none;
}

.main {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 0;
    padding-left: clamp(18px, 2.4vw, 44px);
    padding-right: clamp(18px, 2.4vw, 44px);
}

.nav-inner,
.footer-inner {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    padding-left: clamp(16px, 2.2vw, 42px);
    padding-right: clamp(16px, 2.2vw, 42px);
}

.tool-page,
.tool-manager-page,
.access-control-page {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
}

.top-search-studio,
.hero-panel {
    max-width: none;
}

.hero-panel {
    width: 100%;
}

.hero-copy {
    max-width: min(1100px, 100%);
}

.tool-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.premium-dashboard {
    grid-template-columns: minmax(420px, 1.5fr) repeat(3, minmax(240px, 1fr));
}

@media(max-width:1100px) {
    .premium-dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media(max-width:720px) {
    .main {
        padding-left: 16px;
        padding-right: 16px;
    }

    .premium-dashboard,
    .hero-panel {
        grid-template-columns: 1fr;
    }
}

/* Unified workspace command surface */
.workspace-command {
    min-height: calc(100vh - 110px);
    display: grid;
    align-content: start;
    gap: 30px;
    padding: clamp(42px, 7vw, 96px) 0 38px;
}

.workspace-copy {
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
}

.workspace-copy h1 {
    margin: 8px 0 14px;
    color: var(--tx);
    font-size: clamp(3.1rem, 7vw, 6.4rem);
    line-height: .96;
    font-weight: 850;
    letter-spacing: 0;
}

.workspace-console {
    width: 100%;
    display: grid;
    gap: 18px;
    padding: clamp(18px, 2.2vw, 30px);
    border-radius: 34px;
    border: 1px solid rgba(210,210,215,.78);
    background: rgba(255,255,255,.72);
    box-shadow: var(--sh2);
    backdrop-filter: blur(24px);
}

.dark .workspace-console {
    background: rgba(29,29,31,.74);
    border-color: rgba(58,58,60,.84);
}

.workspace-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

.workspace-console .top-search-bar {
    margin: 0;
    min-height: 58px;
    border-radius: 20px;
    background: rgba(245,245,247,.9);
}

.dark .workspace-console .top-search-bar {
    background: rgba(44,44,46,.92);
}

.workspace-console .top-search-meta {
    justify-content: flex-start;
    margin: 0;
}

.workspace-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.workspace-card {
    min-height: 178px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 14px;
    padding: 20px;
    border-radius: 26px;
    border: 1px solid rgba(210,210,215,.78);
    background: rgba(255,255,255,.68);
    color: var(--tx);
    text-decoration: none;
    box-shadow: 0 12px 32px rgba(0,0,0,.05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.workspace-card.featured {
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,245,247,.74));
    border-color: rgba(0,113,227,.28);
}

.dark .workspace-card {
    background: rgba(29,29,31,.7);
    border-color: rgba(58,58,60,.84);
}

.dark .workspace-card.featured {
    background: linear-gradient(180deg, rgba(44,44,46,.88), rgba(29,29,31,.76));
    border-color: rgba(41,151,255,.34);
}

.workspace-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh2);
    border-color: rgba(0,113,227,.42);
}

.workspace-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #0071e3;
    color: #fff;
}

.workspace-card b {
    display: block;
    margin-bottom: 7px;
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--tx);
}

.workspace-card small {
    display: block;
    color: var(--tx2);
    line-height: 1.45;
    font-size: .9rem;
}

.workspace-card em {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--bg3);
    border: 1px solid rgba(210,210,215,.72);
    color: var(--tx2);
    font-style: normal;
    font-size: .78rem;
    font-weight: 700;
}

@media(max-width:1260px) {
    .workspace-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media(max-width:920px) {
    .workspace-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .workspace-search-row {
        grid-template-columns: 1fr;
    }
}

@media(max-width:620px) {
    .workspace-command {
        padding-top: 34px;
    }

    .workspace-grid {
        grid-template-columns: 1fr;
    }

    .workspace-card {
        min-height: 150px;
    }
}

/* Simple landing header with colorful feature boxes */
.landing-header {
    display: grid;
    gap: 12px;
    padding: clamp(24px, 4vw, 48px) 0 20px;
}

.landing-hero-copy {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 10px;
    text-align: center;
    padding: 0 14px;
}

.landing-hero-copy h1 {
    max-width: 980px;
    margin: 0 auto;
    font-size: clamp(2.15rem, 5vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: 0;
}

.landing-hero-copy p:last-child {
    max-width: 780px;
    margin: 0 auto;
    color: var(--tx2);
    font-size: 1.05rem;
    line-height: 1.6;
}

.landing-actions {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) auto;
    gap: clamp(14px, 2vw, 28px);
    align-items: center;
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 12px;
    border-radius: 28px;
    border: 1px solid rgba(210,210,215,.76);
    background: rgba(255,255,255,.72);
    box-shadow: var(--sh);
    backdrop-filter: blur(20px);
}

.dark .landing-actions {
    background: rgba(29,29,31,.76);
    border-color: rgba(58,58,60,.84);
}

.landing-actions .top-search-bar {
    margin: 0;
    min-height: 58px;
    border-radius: 20px;
    background: rgba(245,245,247,.92);
}

.public-tool-dock {
    width: min(1180px, 100%);
    margin: 2px auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(210,210,215,.72);
    border-radius: 24px;
    background: rgba(255,255,255,.68);
    box-shadow: 0 14px 42px rgba(0,0,0,.06);
    overflow: visible;
}

.dark .public-tool-dock {
    background: rgba(29,29,31,.72);
    border-color: rgba(58,58,60,.84);
}

.dock-label {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    color: var(--tx2);
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
}

.dock-tool {
    flex: 0 0 auto;
    min-width: 62px;
    height: 50px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 8px;
    border: 1px solid rgba(210,210,215,.76);
    border-radius: 16px;
    background: rgba(245,245,247,.92);
    color: var(--tx);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.dock-tool .mud-icon-root {
    font-size: 1.15rem;
}

.dock-tool small {
    max-width: 58px;
    overflow: hidden;
    color: var(--tx2);
    font-size: .67rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dock-tool:hover {
    color: #0071e3;
    border-color: rgba(0,113,227,.38);
    background: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

.dock-tool:hover small {
    color: #0071e3;
}

.dark .dock-tool {
    background: rgba(44,44,46,.92);
    border-color: rgba(58,58,60,.84);
}

.feature-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    padding: 16px 0 52px;
}

.feature-box {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 18px;
    padding: clamp(18px, 2vw, 26px);
    border-radius: 32px;
    border: 1px solid rgba(210,210,215,.72);
    background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(245,245,247,.72));
    box-shadow: var(--sh);
}

.feature-box::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 7px;
    background: var(--feature-accent, #0071e3);
}

.feature-tone-0 { --feature-accent: #0071e3; }
.feature-tone-1 { --feature-accent: #34c759; }
.feature-tone-2 { --feature-accent: #ff9f0a; }
.feature-tone-3 { --feature-accent: #af52de; }
.feature-tone-4 { --feature-accent: #ff375f; }
.feature-tone-5 { --feature-accent: #5e5ce6; }

.dark .feature-box {
    background: linear-gradient(135deg, rgba(44,44,46,.86), rgba(29,29,31,.72));
    border-color: rgba(58,58,60,.84);
}

.feature-box-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    color: var(--tx);
    text-decoration: none;
}

.feature-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: var(--feature-accent, #0071e3);
    color: #fff;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--feature-accent, #0071e3) 24%, transparent);
}

.feature-box-head b {
    display: block;
    margin-bottom: 6px;
    font-size: 1.24rem;
    font-weight: 850;
}

.feature-box-head small {
    display: block;
    max-width: 680px;
    color: var(--tx2);
    line-height: 1.45;
}

.feature-box-head em {
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.68);
    border: 1px solid rgba(210,210,215,.72);
    color: var(--tx2);
    font-style: normal;
    font-size: .78rem;
    font-weight: 750;
    white-space: nowrap;
}

.dark .feature-box-head em {
    background: rgba(29,29,31,.72);
    border-color: rgba(58,58,60,.84);
}

.feature-tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.feature-tool {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(210,210,215,.7);
    background: rgba(255,255,255,.68);
    color: var(--tx);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 650;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.feature-tool .mud-icon-root {
    color: var(--feature-accent, #0071e3);
}

.dark .feature-tool {
    background: rgba(29,29,31,.68);
    border-color: rgba(58,58,60,.84);
}

.feature-tool:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--feature-accent, #0071e3) 42%, rgba(210,210,215,.72));
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

@media(max-width:1050px) {
    .landing-actions {
        grid-template-columns: 1fr;
    }

    .landing-actions > .mud-button-root {
        width: fit-content;
        justify-self: center;
    }

    .feature-board {
        grid-template-columns: 1fr;
    }
}

@media(max-width:680px) {
    .landing-actions {
        grid-template-columns: 1fr;
    }

    .feature-box-head {
        grid-template-columns: 1fr;
    }

    .feature-box-head em {
        width: fit-content;
    }

    .feature-tool-grid {
        grid-template-columns: 1fr;
    }
}

/* Large top search, compact right-side actions, and extra themes */
.theme-graphite {
    --bg:#f3f4f6;
    --bg2:#ffffff;
    --bg3:#f8fafc;
    --bg4:#e5e7eb;
    --tx:#111827;
    --tx2:#4b5563;
    --bd:#d1d5db;
    --ac:#374151;
    --ach:#111827;
    --ac2:#6b7280;
    --acl:rgba(55,65,81,.10);
    --acl2:rgba(107,114,128,.10);
}

.theme-ocean {
    --bg:#eef9ff;
    --bg2:#ffffff;
    --bg3:#f4fbff;
    --bg4:#dff4ff;
    --tx:#082f49;
    --tx2:#35657e;
    --bd:#b9e3f5;
    --ac:#0284c7;
    --ach:#0369a1;
    --ac2:#06b6d4;
    --acl:rgba(2,132,199,.12);
    --acl2:rgba(6,182,212,.12);
}

.theme-emerald {
    --bg:#f0fdf4;
    --bg2:#ffffff;
    --bg3:#f7fef9;
    --bg4:#dcfce7;
    --tx:#052e16;
    --tx2:#3f6f52;
    --bd:#bbf7d0;
    --ac:#16a34a;
    --ach:#15803d;
    --ac2:#0d9488;
    --acl:rgba(22,163,74,.12);
    --acl2:rgba(13,148,136,.12);
}

.theme-sunset {
    --bg:#fff7ed;
    --bg2:#ffffff;
    --bg3:#fffbf7;
    --bg4:#ffedd5;
    --tx:#431407;
    --tx2:#7c4a2d;
    --bd:#fed7aa;
    --ac:#ea580c;
    --ach:#c2410c;
    --ac2:#db2777;
    --acl:rgba(234,88,12,.12);
    --acl2:rgba(219,39,119,.10);
}

.dark.theme-midnight {
    --bg:#020617;
    --bg2:#0f172a;
    --bg3:#111827;
    --bg4:#1e293b;
    --tx:#f8fafc;
    --tx2:#cbd5e1;
    --bd:#334155;
    --ac:#60a5fa;
    --ach:#93c5fd;
    --ac2:#22d3ee;
    --acl:rgba(96,165,250,.16);
    --acl2:rgba(34,211,238,.12);
}

.nav-inner {
    display: grid;
    grid-template-columns: auto auto minmax(20px, 1fr) auto;
    gap: 14px;
}

.nav-search-wrap {
    width: 100%;
    max-width: none;
    display: block;
    justify-self: stretch;
}

.nav-search-mud .mud-input-root {
    min-height: 46px;
    border-radius: 999px !important;
    background: rgba(255,255,255,.86) !important;
    box-shadow: inset 0 0 0 1px rgba(210,210,215,.7), 0 8px 22px rgba(0,0,0,.05);
}

.dark .nav-search-mud .mud-input-root {
    background: rgba(29,29,31,.84) !important;
    box-shadow: inset 0 0 0 1px rgba(58,58,60,.9), 0 10px 26px rgba(0,0,0,.28);
}

.nav-search-mud .mud-input-slot {
    font-size: .98rem;
}

.nav-right {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 4px;
    padding-left: 6px;
}

.nav-right .mud-icon-button,
.icon-shell-btn {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(210,210,215,.64);
    background: rgba(255,255,255,.62);
}

.dark .nav-right .mud-icon-button,
.dark .icon-shell-btn {
    border-color: rgba(58,58,60,.84);
    background: rgba(29,29,31,.62);
}

.nav-user-icon {
    color: var(--tx2);
    margin: 0 2px;
}

.icon-shell-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tx);
    cursor: pointer;
}

.nav-register-btn {
    border-radius: 999px !important;
    min-height: 40px;
}

@media(max-width:1120px) {
    .nav-inner {
        grid-template-columns: auto auto minmax(20px, 1fr) auto;
    }

    .nav-register-btn {
        display: none;
    }
}

@media(max-width:760px) {
    .nav-inner {
        grid-template-columns: auto 1fr auto;
    }

    .logo {
        min-width: 0;
    }

    .nav-search-wrap {
        grid-column: 1 / -1;
        order: 4;
    }
}

/* Currency converter */
.fx-shell {
    width: min(100%, 1180px);
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

.fx-rate-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-items: center;
    justify-content: center;
    gap: 8px 12px;
    padding: 8px 12px;
    border: 1px solid var(--bd);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg2) 78%, transparent);
    color: #09260f;
    text-align: center;
}

.dark .fx-rate-head {
    color: var(--tx);
}

.fx-rate-head span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 850;
}

.fx-rate-head strong {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 900;
}

.fx-rate-head small {
    color: var(--tx2);
    font-weight: 750;
}

.fx-converter-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 14px;
    padding: clamp(14px, 2vw, 20px);
    border: 1px solid var(--bd);
    border-radius: 24px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--bg2) 92%, transparent), color-mix(in srgb, var(--bg3) 86%, transparent));
    box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
}

.fx-card {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.fx-card label {
    font-size: .86rem;
    font-weight: 850;
    color: var(--tx);
}

.fx-input-row {
    min-height: 62px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(176px, 220px);
    align-items: center;
    border: 1.5px solid rgba(29,29,31,.46);
    border-radius: 18px;
    background: rgba(255,255,255,.92);
    overflow: visible;
    position: relative;
}

.dark .fx-input-row {
    background: rgba(29,29,31,.78);
    border-color: rgba(245,245,247,.32);
}

.fx-input-row > input,
.fx-input-row > select {
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--tx);
    font-weight: 900;
}

.fx-input-row > input {
    min-width: 0;
    padding: 0 18px;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.fx-input-row > select {
    padding: 0 16px;
    border-left: 1px solid rgba(210,210,215,.72);
    font-size: 1.45rem;
    cursor: pointer;
}

.fx-currency-picker {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 62px;
    border-left: 1px solid rgba(210,210,215,.72);
}

.dark .fx-currency-picker {
    border-left-color: rgba(245,245,247,.2);
}

.fx-currency-trigger {
    width: 100%;
    height: 100%;
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    color: var(--tx);
    cursor: pointer;
    padding: 0 14px;
    text-align: left;
}

.fx-currency-trigger:hover,
.fx-currency-picker.open .fx-currency-trigger {
    background: rgba(0, 112, 224, .06);
}

.fx-currency-logo {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #003087, #00a8ea);
    color: #fff;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: 0;
    box-shadow: 0 10px 22px rgba(0, 48, 135, .18);
}

.fx-currency-logo {
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .88), rgba(255, 255, 255, .28) 34%, transparent 58%),
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(226, 232, 240, .90)) !important;
    color: #0f172a !important;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", system-ui, sans-serif !important;
    font-size: 1.16rem !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .10), 0 10px 22px rgba(15, 23, 42, .10) !important;
}

.fx-currency-selected,
.fx-currency-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.fx-currency-selected strong,
.fx-currency-copy strong {
    color: var(--tx);
    font-size: .92rem;
    font-weight: 950;
    line-height: 1.15;
}

.fx-currency-selected small,
.fx-currency-copy small {
    color: var(--tx2);
    font-size: .74rem;
    font-weight: 750;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fx-currency-trigger .mud-icon-root {
    margin-left: auto;
    color: var(--tx2);
}

.fx-currency-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 80;
    width: min(360px, calc(100vw - 32px));
    display: grid;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(0, 112, 224, .18);
    border-radius: 18px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 22px 54px rgba(15,23,42,.18);
}

.dark .fx-currency-menu {
    background: rgba(22,27,34,.98);
    border-color: rgba(245,245,247,.18);
}

.fx-currency-search {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--bd);
    border-radius: 999px;
    background: var(--bg2);
    color: var(--tx2);
}

.fx-currency-search input {
    width: 100%;
    min-width: 0;
    height: 40px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--tx);
    font-size: .92rem;
    font-weight: 750;
}

.fx-currency-options {
    max-height: 320px;
    display: grid;
    gap: 4px;
    overflow: auto;
    padding-right: 2px;
}

.fx-currency-option {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--tx);
    cursor: pointer;
    text-align: left;
}

.fx-currency-option:hover,
.fx-currency-option.selected {
    background: rgba(0, 112, 224, .08);
}

.fx-currency-option.selected .fx-currency-logo {
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .92), rgba(255, 255, 255, .30) 34%, transparent 58%),
        linear-gradient(135deg, #ffffff, #eaf3ff) !important;
    box-shadow: inset 0 0 0 2px rgba(11, 92, 255, .28), 0 10px 22px rgba(11, 92, 255, .18) !important;
}

.fx-currency-empty {
    padding: 16px 10px;
    color: var(--tx2);
    font-size: .9rem;
    font-weight: 750;
    text-align: center;
}

.fx-swap {
    width: 48px;
    height: 48px;
    justify-self: center;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: #98ec67;
    color: #0b2b0f;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(52,199,89,.24);
    transition: transform .16s ease, box-shadow .16s ease;
}

.fx-swap:hover {
    transform: translateY(-2px) rotate(180deg);
    box-shadow: 0 16px 30px rgba(52,199,89,.32);
}

.fx-swap .mud-icon-root {
    font-size: 1.65rem;
}

.fx-field-note {
    grid-column: 1 / -1;
    margin-top: -3px;
    color: var(--tx2);
    font-size: .82rem;
    font-weight: 700;
    text-align: center;
}

.fx-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.fx-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid var(--bd);
    border-radius: 999px;
    background: var(--bg2);
    color: var(--tx2);
    font-size: .82rem;
    font-weight: 750;
}

.fx-matrix {
    margin-top: 4px;
    display: grid;
    gap: 12px;
}

.section-title.compact {
    margin: 0;
}

.fx-rate-flag {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ffffff;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", system-ui, sans-serif;
    font-size: 1rem;
    font-style: normal;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .10);
}

.fx-rate-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--bd);
    border-radius: 20px;
    background: color-mix(in srgb, var(--bg2) 88%, transparent);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
}

.fx-rate-table {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse;
    color: var(--tx);
}

.fx-rate-table caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.fx-rate-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--bg3) 92%, #0070e0 8%);
    color: var(--tx2);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .01em;
    text-align: left;
    border-bottom: 1px solid var(--bd);
}

.fx-rate-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--bd) 70%, transparent);
    font-size: .92rem;
    font-weight: 750;
    vertical-align: middle;
}

.fx-rate-table tbody tr {
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.fx-rate-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--bg3) 42%, transparent);
}

.fx-rate-table tbody tr:hover,
.fx-rate-table tbody tr.active {
    background: color-mix(in srgb, var(--ac2) 16%, transparent);
}

.fx-rate-table tbody tr:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ac2) 58%, transparent);
    outline-offset: -3px;
}

.fx-currency-cell {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
}

@media(max-width:680px) {
    .fx-rate-head {
        display: grid;
        gap: 5px;
    }

    .fx-converter-panel {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 12px;
    }

    .fx-swap {
        transform: rotate(90deg);
    }

    .fx-swap:hover {
        transform: translateY(-2px) rotate(270deg);
    }

    .fx-input-row {
        grid-template-columns: 1fr;
    }

    .fx-input-row > select {
        height: 54px;
        border-left: 0;
        border-top: 1px solid rgba(210,210,215,.72);
    }

    .fx-currency-picker {
        min-height: 62px;
        border-left: 0;
        border-top: 1px solid rgba(210,210,215,.72);
    }

    .fx-currency-trigger {
        min-height: 62px;
    }

    .fx-currency-menu {
        left: 0;
        right: auto;
        width: 100%;
    }
}

.tool-route .main {
    max-width: none !important;
    width: 100% !important;
    padding: 10px 18px 18px !important;
}

.tool-route .tool-page {
    width: 100% !important;
    max-width: none !important;
    display: grid;
    gap: 10px;
}

.tool-route .breadcrumb {
    margin: 0;
    min-height: 22px;
}

.tool-route .tool-head {
    min-height: 74px;
    padding: 12px 14px !important;
    border-radius: 22px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.tool-route .tool-head > div:nth-child(2) {
    min-width: 0;
    padding-right: 0 !important;
}

.tool-route .tool-head h1 {
    font-size: clamp(1.05rem, 1.7vw, 1.55rem) !important;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.tool-route .tool-head p {
    max-width: 980px;
    font-size: .88rem !important;
    line-height: 1.35 !important;
}

.tool-route .tool-title-icon {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
    border-radius: 14px !important;
}

.tool-route .tool-head-actions {
    position: static !important;
    justify-self: end;
    display: inline-flex;
    gap: 8px;
}

.tool-route .tool-action-btn {
    width: 36px;
    height: 36px;
    box-shadow: none;
}

.tool-route .tool-badges {
    gap: 6px;
    margin-top: 7px !important;
}

.tool-route .badge,
.tool-route .badge-soft {
    padding: 4px 8px;
    font-size: .76rem;
}

.tool-route .tool-body {
    width: 100%;
    min-width: 0;
    margin-top: 0 !important;
}

.tool-route .tool-panel,
.tool-route .tool-card,
.tool-route .panel-card,
.tool-route .calc-card,
.tool-route .passport-editor-box,
.tool-route .webhook-card,
.tool-route .empty-panel {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    border-radius: 22px !important;
    padding: clamp(14px, 1.35vw, 20px) !important;
}

.tool-route .tool-panel > .mud-grid,
.tool-route .tool-card > .mud-grid,
.tool-route .panel-card > .mud-grid {
    width: auto;
    margin: 0;
}

.tool-route .mud-grid {
    align-items: stretch;
}

.tool-route .mud-input-control,
.tool-route .mud-select,
.tool-route .mud-picker,
.tool-route .mud-input {
    max-width: 100%;
}

.tool-route .form-row {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    align-items: end;
    gap: 12px;
}

.tool-route .form-row label,
.tool-route .form-col label {
    min-width: 0;
    display: grid;
    gap: 6px;
    color: var(--tx);
    font-weight: 750;
}

.tool-route .form-row input,
.tool-route .form-row select,
.tool-route .form-row textarea,
.tool-route .form-col input,
.tool-route .form-col select,
.tool-route .form-col textarea,
.tool-route .ta,
.tool-route .calc-display {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 14px !important;
    min-height: 42px;
}

.tool-route .btn-row,
.tool-route .games-choice-row,
.tool-route .games-connect-four-actions,
.tool-route .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tool-route .btn,
.tool-route .btn-p,
.tool-route .btn-s,
.tool-route button:not(.mud-button-root):not(.tool-action-btn):not(.fx-swap):not(.games-cell):not(.games-memory-card):not(.games-reaction-button):not(.tool-popup-btn) {
    min-height: 38px;
    border-radius: 12px;
}

.tool-route .result-box,
.tool-route .info-banner,
.tool-route .success,
.tool-route .error {
    width: 100%;
    box-sizing: border-box;
}

.tool-route .dtable {
    display: table;
    width: 100%;
    table-layout: auto;
}

.tool-route .admin-table-wrap,
.tool-route details,
.tool-route .out-wrap,
.tool-route .image-preview,
.tool-route .qr-preview {
    max-width: 100%;
    overflow: auto;
}

.tool-route pre,
.tool-route code,
.tool-route textarea,
.tool-route .ta {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.tool-route .section-title {
    align-items: center;
    margin-bottom: 10px;
}

.tool-route .section-title h2 {
    font-size: 1.05rem;
}

.tool-route .how-to {
    margin-top: 0 !important;
    border-radius: 18px !important;
}

.tool-route .fx-shell {
    width: min(960px, 100%);
}

.focused-tool-page {
    display: grid;
    gap: 14px;
}

.tool-route .focused-tool-page {
    min-height: calc(100vh - 86px);
}

.focused-tool-page > .tool-head,
.focused-tool-page .tool-panel,
.focused-tool-page .tool-body,
.focused-tool-page .how-to,
.focused-tool-page .tool-meta-grid,
.focused-tool-page .tool-content-section {
    border: 1px solid rgba(148,163,184,.22);
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.9));
    box-shadow: 0 22px 70px rgba(15,23,42,.07);
}

.dark .focused-tool-page > .tool-head,
.dark .focused-tool-page .tool-panel,
.dark .focused-tool-page .tool-body,
.dark .focused-tool-page .how-to,
.dark .focused-tool-page .tool-meta-grid,
.dark .focused-tool-page .tool-content-section {
    background:
        linear-gradient(180deg, rgba(15,23,42,.92), rgba(17,24,39,.86));
    border-color: rgba(148,163,184,.18);
    box-shadow: 0 22px 70px rgba(0,0,0,.28);
}

.tool-route .focused-tool-page > .tool-head {
    position: sticky;
    top: 10px;
    z-index: 8;
    backdrop-filter: blur(18px);
}

.tool-route .focused-tool-page .tool-title-icon {
    background:
        linear-gradient(135deg, rgba(0,113,227,.16), rgba(52,199,89,.12));
    color: var(--ac);
}

.tool-route .focused-tool-page .tool-badges .badge:first-child {
    display: none;
}

.tool-route .focused-tool-page .tool-meta-grid,
.tool-route .focused-tool-page .tool-content-section {
    border-radius: 22px;
    padding: clamp(14px, 1.35vw, 20px);
}

.tool-route .focused-tool-page .tool-content-section h2 {
    font-size: 1rem;
}

.focused-tool-page .tool-faq-list article {
    border-radius: 16px;
    background: rgba(148,163,184,.08);
    padding: 14px;
}

.tool-route .focused-tool-page a[href^="/tools/"] {
    text-decoration: none;
}

/* Legal and policy pages */
.legal-page {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 0 56px;
    display: grid;
    gap: 22px;
}

.legal-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 14px;
    padding: clamp(28px, 5vw, 54px);
    border: 1px solid rgba(148,163,184,.22);
    border-radius: 30px;
    background:
        radial-gradient(circle at 12% 10%, rgba(0,113,227,.18), transparent 34%),
        radial-gradient(circle at 90% 12%, rgba(52,199,89,.15), transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(245,248,255,.9));
    box-shadow: 0 28px 80px rgba(15,23,42,.08);
}

.dark .legal-hero {
    background:
        radial-gradient(circle at 12% 10%, rgba(41,151,255,.20), transparent 34%),
        radial-gradient(circle at 90% 12%, rgba(48,209,88,.14), transparent 30%),
        linear-gradient(135deg, rgba(15,23,42,.96), rgba(17,24,39,.92));
}

.legal-hero h1 {
    margin: 0;
    color: var(--tx);
    font-size: clamp(2.15rem, 5vw, 4.7rem);
    line-height: .95;
    letter-spacing: 0;
}

.legal-hero p {
    max-width: 850px;
    margin: 0;
    color: var(--tx2);
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.7;
}

.legal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.legal-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 8px 12px;
    border: 1px solid rgba(148,163,184,.28);
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: var(--tx2);
    font-size: .86rem;
    font-weight: 760;
}

.dark .legal-meta span {
    background: rgba(15,23,42,.58);
}

.legal-grid,
.contact-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .58fr);
    align-items: start;
}

.contact-side {
    display: grid;
    gap: 16px;
}

.legal-card,
.legal-section,
.legal-callout,
.legal-panel {
    border: 1px solid rgba(148,163,184,.22);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.88));
    box-shadow: 0 20px 54px rgba(15,23,42,.06);
}

.dark .legal-card,
.dark .legal-section,
.dark .legal-callout,
.dark .legal-panel {
    background:
        linear-gradient(180deg, rgba(17,24,39,.94), rgba(15,23,42,.88));
}

.legal-card {
    display: grid;
    gap: 10px;
    padding: 22px;
    color: var(--tx);
    text-decoration: none;
}

.legal-link-card {
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.legal-link-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0,113,227,.34);
    box-shadow: 0 26px 64px rgba(0,113,227,.12);
}

.legal-card .mud-icon-root,
.legal-callout .mud-icon-root {
    color: var(--ac);
    font-size: 1.8rem;
}

.legal-card h2,
.legal-section h2 {
    margin: 0;
    color: var(--tx);
    font-size: 1.05rem;
    line-height: 1.2;
}

.legal-card p,
.legal-section p,
.legal-section li,
.legal-callout p {
    margin: 0;
    color: var(--tx2);
    line-height: 1.65;
}

.legal-section {
    padding: 26px;
    display: grid;
    gap: 14px;
}

.legal-section ul {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 8px;
}

.legal-callout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 22px;
    border-color: rgba(245,158,11,.34);
    background:
        linear-gradient(135deg, rgba(255,247,237,.96), rgba(255,255,255,.92));
}

.dark .legal-callout {
    background:
        linear-gradient(135deg, rgba(69,26,3,.38), rgba(15,23,42,.9));
}

.legal-callout strong {
    display: block;
    margin-bottom: 4px;
    color: var(--tx);
}

.legal-page a {
    color: var(--ac);
    font-weight: 780;
    text-decoration: none;
}

.legal-page a:hover {
    text-decoration: underline;
}

.sitemap-page {
    width: min(1280px, calc(100% - 32px));
}

.sitemap-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.sitemap-card {
    min-height: 180px;
}

.sitemap-links,
.sitemap-tool-list {
    display: grid;
    gap: 10px;
}

.sitemap-links a {
    display: inline-flex;
    align-items: center;
    width: fit-content;
}

.sitemap-tools {
    display: grid;
    gap: 18px;
}

.sitemap-category {
    padding: clamp(18px, 3vw, 26px);
}

.sitemap-category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.sitemap-category-head > div {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sitemap-category-head .mud-icon-root {
    color: var(--ac);
}

.sitemap-category-head h2 {
    margin: 0;
    color: var(--tx);
    font-size: 1.25rem;
}

.sitemap-tool-list {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.sitemap-tool-list a {
    display: grid;
    gap: 4px;
    min-height: 86px;
    padding: 14px;
    border: 1px solid rgba(148,163,184,.22);
    border-radius: 16px;
    background: rgba(255,255,255,.72);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.dark .sitemap-tool-list a {
    background: rgba(15,23,42,.5);
}

.sitemap-tool-list a:hover {
    transform: translateY(-2px);
    border-color: rgba(0,113,227,.34);
    box-shadow: 0 18px 36px rgba(15,23,42,.08);
    text-decoration: none;
}

.sitemap-tool-list span {
    color: var(--tx);
    font-weight: 850;
}

.sitemap-tool-list small {
    color: var(--tx2);
    font-weight: 600;
    line-height: 1.35;
}

.about-page .legal-hero h1 {
    max-width: 980px;
}

.about-page .legal-section {
    font-size: 1rem;
}

.about-principles .legal-card {
    min-height: 210px;
}

.captcha-panel {
    margin: 0;
    padding: 12px;
    border: 1px solid rgba(59, 130, 246, .18);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(239, 246, 255, .95), rgba(255, 255, 255, .95));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    width: fit-content;
    max-width: 100%;
}

.dark .captcha-panel {
    border-color: rgba(96, 165, 250, .22);
    background: linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(30, 41, 59, .82));
}

.captcha-note {
    margin: 8px 0 0;
    color: var(--mut);
    font-size: .82rem;
    line-height: 1.4;
}

.captcha-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    margin-top: 14px;
}

.captcha-action-row .captcha-panel {
    flex: 0 1 auto;
}

.captcha-action-row .mud-button-root,
.captcha-action-row .btn-p {
    align-self: center;
}

.is-processing {
    cursor: progress !important;
    opacity: .78;
}

.contact-message-panel {
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
    border-color: rgba(96, 165, 250, .22);
}

.dark .contact-message-panel {
    background: linear-gradient(180deg, rgba(15, 23, 42, .98), rgba(2, 6, 23, .9));
    border-color: rgba(96, 165, 250, .24);
}

.contact-message-form {
    display: grid;
    gap: 18px;
}

.contact-form-head {
    display: grid;
    gap: 6px;
}

.contact-form-head .mud-typography {
    margin: 0;
    color: var(--tx);
    font-weight: 850;
}

.contact-big-field {
    width: 100%;
}

.contact-big-field .mud-input-root {
    min-height: 48px;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.contact-big-field .mud-input-slot,
.contact-big-field input,
.contact-big-field textarea {
    font-size: .98rem !important;
    line-height: 1.5 !important;
}

.contact-big-field .mud-input-label {
    font-weight: 760 !important;
    color: var(--tx2) !important;
}

.contact-big-field .mud-input-helper-text,
.contact-big-field .mud-input-counter {
    color: var(--tx2) !important;
}

.dark .contact-big-field .mud-input-root {
    background: rgba(15, 23, 42, .86) !important;
    border-color: rgba(148, 163, 184, .28) !important;
}

.contact-message-box .mud-input-root {
    align-items: flex-start;
    min-height: 220px;
}

.contact-safety-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid rgba(245, 158, 11, .32);
    border-radius: 16px;
    background: rgba(255, 251, 235, .78);
    color: var(--tx2);
    line-height: 1.5;
}

.dark .contact-safety-note {
    background: rgba(120, 53, 15, .22);
    border-color: rgba(245, 158, 11, .36);
}

.contact-safety-note .mud-icon-root {
    color: #f59e0b;
    font-size: 1.25rem;
    margin-top: 1px;
}

.contact-verification {
    display: flex;
    align-items: center;
    min-height: 76px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 18px;
    background: rgba(248, 250, 252, .74);
}

.dark .contact-verification {
    background: rgba(15, 23, 42, .58);
}

.contact-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.contact-send-btn {
    width: auto;
    min-width: 190px;
    min-height: 46px;
    padding: 0 24px !important;
    border-radius: 14px !important;
    font-size: .98rem !important;
    font-weight: 850 !important;
}

.contact-send-btn.mud-button-disabled {
    opacity: .58 !important;
}

@media(max-width:980px) {
    .legal-grid,
    .contact-grid,
    .sitemap-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media(max-width:640px) {
    .legal-page {
        width: min(100% - 20px, 1180px);
        padding-top: 14px;
    }

    .legal-grid,
    .contact-grid,
    .sitemap-grid {
        grid-template-columns: 1fr;
    }

    .sitemap-category-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .legal-hero,
    .legal-section,
    .legal-callout,
    .legal-card {
        border-radius: 20px;
    }

    .contact-message-panel {
        padding: 18px !important;
    }

    .contact-actions,
    .contact-send-btn {
        width: 100%;
    }

    .contact-send-btn {
        min-width: 0;
    }
}

@media(min-width:1180px) {
    .tool-route .tool-manager-hero,
    .tool-route .tool-manager-stats,
    .tool-route .tool-manager-category,
    .tool-route .panel-card {
        max-width: none;
    }
}

@media(max-width:760px) {
    .tool-route .main {
        padding: 8px 12px 16px !important;
    }

    .tool-route .tool-head {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .tool-route .tool-head-actions {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .tool-route .form-row {
        grid-template-columns: 1fr !important;
    }
}

/* Premium field polish */
.tool-route .mud-input-control,
.auth-shell .mud-input-control,
.legal .mud-input-control {
    margin-top: 0;
}

.tool-route .mud-input-control > .mud-input-control-input-container,
.auth-shell .mud-input-control > .mud-input-control-input-container,
.legal .mud-input-control > .mud-input-control-input-container {
    min-height: 58px;
}

.tool-route .mud-input-root,
.auth-shell .mud-input-root,
.legal .mud-input-root {
    min-height: 54px;
    border-radius: 18px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,255,.9)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 12px 32px rgba(15,23,42,.06);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}

.dark .tool-route .mud-input-root,
.dark .auth-shell .mud-input-root,
.dark .legal .mud-input-root {
    background:
        linear-gradient(180deg, rgba(20,27,42,.96), rgba(15,23,42,.92)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 14px 36px rgba(0,0,0,.22);
}

.tool-route .mud-input-root:hover,
.auth-shell .mud-input-root:hover,
.legal .mud-input-root:hover {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 16px 38px rgba(37,99,235,.11);
}

.tool-route .mud-input-root.mud-focused,
.auth-shell .mud-input-root.mud-focused,
.legal .mud-input-root.mud-focused {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 4px rgba(0,113,227,.12),
        0 18px 46px rgba(37,99,235,.16);
}

.tool-route .mud-input-outlined-border,
.auth-shell .mud-input-outlined-border,
.legal .mud-input-outlined-border {
    border-radius: 18px !important;
    border-color: rgba(148,163,184,.46) !important;
}

.tool-route .mud-input-root:hover .mud-input-outlined-border,
.auth-shell .mud-input-root:hover .mud-input-outlined-border,
.legal .mud-input-root:hover .mud-input-outlined-border {
    border-color: rgba(0,113,227,.44) !important;
}

.tool-route .mud-input-root.mud-focused .mud-input-outlined-border,
.auth-shell .mud-input-root.mud-focused .mud-input-outlined-border,
.legal .mud-input-root.mud-focused .mud-input-outlined-border {
    border-color: rgba(0,113,227,.9) !important;
    border-width: 1.5px !important;
}

.tool-route .mud-input-slot,
.auth-shell .mud-input-slot,
.legal .mud-input-slot {
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: 0;
    color: var(--tx);
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.tool-route .mud-input-label,
.auth-shell .mud-input-label,
.legal .mud-input-label {
    color: rgba(71,85,105,.92) !important;
    font-weight: 750 !important;
}

.dark .tool-route .mud-input-label,
.dark .auth-shell .mud-input-label,
.dark .legal .mud-input-label {
    color: rgba(226,232,240,.82) !important;
}

.global-tool-close {
    position: fixed;
    top: 70px;
    right: 18px;
    z-index: 1600;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(148, 163, 184, .30);
    border-radius: 999px;
    background: rgba(255, 255, 255, .86) !important;
    color: var(--tx) !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .18);
    backdrop-filter: blur(18px);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.global-tool-close:hover {
    border-color: var(--ac2);
    color: var(--ac) !important;
    transform: translateY(-1px);
    box-shadow: 0 20px 42px rgba(15, 23, 42, .22);
}

.dark .global-tool-close {
    background: rgba(15, 23, 42, .86) !important;
    border-color: rgba(148, 163, 184, .24);
}

@media (max-width: 720px) {
    .global-tool-close {
        top: 62px;
        right: 12px;
        width: 40px;
        height: 40px;
    }
}

.tool-route .mud-input-adornment,
.auth-shell .mud-input-adornment,
.legal .mud-input-adornment {
    color: var(--ac);
}

.mud-converter {
    width: min(1120px, 100%);
    margin-inline: auto;
}

.mud-converter .mud-grid {
    align-items: center;
}

.converter-swap-button {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    box-shadow: 0 14px 34px rgba(0,113,227,.24) !important;
}

.mud-converter .result-box {
    border: 1px solid rgba(0,113,227,.14);
    background:
        radial-gradient(circle at top left, rgba(0,113,227,.12), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,246,255,.94));
    border-radius: 22px !important;
    text-align: left;
    padding: 22px !important;
}

.dark .mud-converter .result-box {
    background:
        radial-gradient(circle at top left, rgba(96,165,250,.18), transparent 38%),
        linear-gradient(135deg, rgba(15,23,42,.98), rgba(17,24,39,.94));
}

.mud-data-table {
    overflow: hidden;
    border: 1px solid rgba(148,163,184,.24);
    border-radius: 18px;
    background: rgba(255,255,255,.76);
}

.dark .mud-data-table {
    background: rgba(15,23,42,.72);
}

/* Keep legacy controls visually aligned while they are migrated to the shared design system. */
.tool-route .form-row input,
.tool-route .form-row select,
.tool-route .form-row textarea,
.tool-route .form-col input,
.tool-route .form-col select,
.tool-route .form-col textarea,
.tool-route .ta,
.tool-route .calc-display {
    min-height: 50px;
    border-radius: 18px !important;
    border: 1px solid rgba(148,163,184,.42) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,255,.9)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 12px 30px rgba(15,23,42,.05);
    font-weight: 650;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.tool-route .form-row input:focus,
.tool-route .form-row select:focus,
.tool-route .form-row textarea:focus,
.tool-route .form-col input:focus,
.tool-route .form-col select:focus,
.tool-route .form-col textarea:focus,
.tool-route .ta:focus,
.tool-route .calc-display:focus {
    border-color: rgba(0,113,227,.86) !important;
    box-shadow:
        0 0 0 4px rgba(0,113,227,.12),
        0 18px 46px rgba(37,99,235,.14);
    transform: translateY(-1px);
}

.dark .tool-route .form-row input,
.dark .tool-route .form-row select,
.dark .tool-route .form-row textarea,
.dark .tool-route .form-col input,
.dark .tool-route .form-col select,
.dark .tool-route .form-col textarea,
.dark .tool-route .ta,
.dark .tool-route .calc-display {
    background:
        linear-gradient(180deg, rgba(20,27,42,.96), rgba(15,23,42,.92)) !important;
    border-color: rgba(100,116,139,.44) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 14px 36px rgba(0,0,0,.22);
}
/* Indian income tax calculator */
.tax-studio .tool-surface {
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
    box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
}

.tax-hero {
    color: #0f766e;
    font-weight: 800;
    letter-spacing: 0;
}

.tax-idea {
    height: 100%;
    border: 1px solid rgba(14, 116, 144, .14);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(236,253,245,.92), rgba(239,246,255,.92));
}

.tax-studio .mud-input-root {
    min-height: 48px;
}

.tax-planner .tax-form-panel {
    position: static;
}

.tax-panel-title,
.tax-result-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.tax-steps .mud-expand-panel {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px !important;
    margin-bottom: 12px;
    overflow: hidden;
}

.tax-axis-layout {
    align-items: start;
}

.app.tool-route .tax-fullscreen-page {
    width: 100vw !important;
    max-width: none !important;
    margin-inline: calc(50% - 50vw) !important;
    padding: 0 clamp(10px, 1.5vw, 24px) clamp(14px, 2vw, 28px) !important;
    gap: 10px !important;
}

.tax-fullscreen-page > .breadcrumb {
    margin-bottom: 6px !important;
    padding-inline: 2px;
}

.tax-fullscreen-page > .tool-head {
    padding: 10px 12px !important;
    border-radius: 20px !important;
}

.tax-fullscreen-page .tool-body {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.tax-fullscreen-page .tax-axis-layout {
    min-height: calc(100dvh - 178px);
}

.tax-fullscreen-page .tax-axis-layout > .mud-grid-item {
    min-width: 0;
    display: flex;
}

.tax-fullscreen-page .tax-form-panel {
    width: 100%;
}

.tax-axis-layout .tax-form-panel,
.tax-axis-layout .tax-result-card {
    border-radius: 28px;
}

.tax-axis-layout .tax-form-panel {
    border-color: rgba(125, 211, 252, .20) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(56, 189, 248, .08), transparent 30%),
        linear-gradient(180deg, rgba(15, 29, 62, .94), rgba(8, 19, 41, .88)) !important;
    box-shadow: 0 18px 48px rgba(2, 6, 23, .24) !important;
}

.tax-axis-layout .tax-panel-title .mud-typography-h5,
.tax-axis-layout .tax-panel-title .mud-typography-overline,
.tax-result-card .mud-typography-overline,
.tax-result-card .tax-hero,
.tax-result-card .mud-typography-body2 {
    color: var(--dv-app-text, #f3f8ff) !important;
}

.tax-axis-layout .tax-panel-title .mud-typography-body2,
.tax-result-card .mud-typography-body2 {
    color: var(--dv-app-muted, #b9c9dc) !important;
}

.tax-step-list {
    display: grid;
    gap: 16px;
}

.tax-step-card {
    display: grid;
    gap: 16px;
    padding: clamp(14px, 2vw, 20px);
    border: 1px solid rgba(56, 189, 248, .18);
    border-radius: 22px;
    background:
        radial-gradient(circle at 0% 0%, rgba(56, 189, 248, .08), transparent 34%),
        linear-gradient(180deg, rgba(15, 29, 62, .90), rgba(8, 19, 41, .76));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.tax-step-card:not([open]) {
    gap: 0;
}

.tax-step-head {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 14px;
    align-items: start;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    outline: none;
}

.tax-step-head::-webkit-details-marker {
    display: none;
}

.tax-step-head::after {
    content: "";
    width: 10px;
    height: 10px;
    margin-top: 14px;
    border-right: 2px solid rgba(125, 211, 252, .90);
    border-bottom: 2px solid rgba(125, 211, 252, .90);
    transform: rotate(45deg);
    transition: transform .18s ease;
}

.tax-step-card[open] .tax-step-head::after {
    transform: rotate(225deg);
}

.tax-step-head:focus-visible {
    border-radius: 16px;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .28);
}

.tax-step-body {
    margin-top: 14px;
}

.tax-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(125, 211, 252, .34);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(14, 165, 233, .26), rgba(37, 99, 235, .20));
    color: #e0f7ff;
    font-size: 1rem;
    font-weight: 950;
    box-shadow: 0 12px 28px rgba(14, 165, 233, .12);
}

.tax-step-head h2 {
    margin: 0;
    color: var(--dv-app-text, #f3f8ff);
    font-size: clamp(1.02rem, 1.4vw, 1.22rem);
    font-weight: 950;
    letter-spacing: 0;
}

.tax-step-head p {
    margin: 4px 0 0;
    color: var(--dv-app-muted, #b9c9dc);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.5;
}

.tax-results-column {
    position: sticky;
    top: 18px;
}

@media (min-width: 960px) {
    .tax-fullscreen-page .tax-form-panel {
        max-height: calc(100dvh - 196px);
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 18px !important;
    }

    .tax-fullscreen-page .tax-form-panel::-webkit-scrollbar {
        width: 8px;
    }

    .tax-fullscreen-page .tax-form-panel::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(125, 211, 252, .24);
    }

    .tax-fullscreen-page .tax-form-panel::-webkit-scrollbar-track {
        background: rgba(2, 12, 29, .16);
        border-radius: 999px;
    }

    .tax-results-column {
        max-height: calc(100vh - 104px);
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 6px;
        align-content: start;
    }

    .tax-fullscreen-page .tax-results-column {
        max-height: calc(100dvh - 196px);
    }

    .tax-results-column::-webkit-scrollbar {
        width: 8px;
    }

    .tax-results-column::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(125, 211, 252, .28);
    }

    .tax-results-column::-webkit-scrollbar-track {
        background: rgba(2, 12, 29, .18);
        border-radius: 999px;
    }
}

.control-help,
.money-field {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.control-help-body,
.money-field .mud-input-control {
    flex: 1;
    min-width: 0;
}

.money-field {
    flex-direction: column;
    gap: 6px;
}

/* Public marketplace UX */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.top-service-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 18px;
    min-width: 0;
    flex: 1;
}

.top-service-menu a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--tx);
    font-size: .84rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.top-service-menu a:hover {
    background: var(--bg3);
    color: var(--ac);
    text-decoration: none;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    inset-inline: 1rem;
    bottom: 1rem;
    z-index: 20000;
    max-width: 720px;
    margin: 0 auto;
    padding: .9rem 1rem;
    border: 1px solid rgba(220, 38, 38, .22);
    border-radius: 18px;
    background: #fff7f7;
    color: #7f1d1d;
    box-shadow: 0 18px 60px rgba(15, 23, 42, .16);
}

#blazor-error-ui .reload {
    color: #b91c1c;
    font-weight: 800;
}

#components-reconnect-modal.components-reconnect-hide {
    display: none;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    position: fixed;
    inset: auto 1rem 1rem 1rem;
    z-index: 20001;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.daivverse-reconnect-card {
    width: min(100%, 680px);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .85rem;
    align-items: center;
    padding: .95rem 1rem;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 22px;
    background: rgba(255, 255, 255, .95);
    color: var(--text);
    box-shadow: 0 22px 70px rgba(15, 23, 42, .18);
    pointer-events: auto;
    backdrop-filter: blur(18px);
}

.daivverse-reconnect-pulse {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #2563eb;
    box-shadow: 0 0 0 8px rgba(37, 99, 235, .12);
    animation: reconnectPulse 1.2s ease-in-out infinite;
}

.daivverse-reconnect-copy {
    display: grid;
    gap: .2rem;
}

.daivverse-reconnect-copy strong {
    font-size: .95rem;
    letter-spacing: 0;
}

.daivverse-reconnect-copy span {
    color: var(--muted);
    font-size: .86rem;
}

.daivverse-reconnect-refresh {
    min-height: 38px;
    padding: .55rem .85rem;
    border: 0;
    border-radius: 999px;
    background: var(--ac);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.daivverse-reconnect-refresh:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .28);
    outline-offset: 3px;
}

.reconnect-state {
    display: none;
}

.components-reconnect-show .reconnect-state.reconnecting,
.components-reconnect-failed .reconnect-state.failed,
.components-reconnect-rejected .reconnect-state.rejected {
    display: block;
}

@keyframes reconnectPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(.78);
        opacity: .65;
    }
}

@media (max-width: 640px) {
    .daivverse-reconnect-card {
        grid-template-columns: auto 1fr;
    }

    .daivverse-reconnect-refresh {
        grid-column: 1 / -1;
        width: 100%;
    }
}

.hero-cta-row,
.trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1rem;
}

.hero-cta-row a,
.trust-strip span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: .55rem .8rem;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    color: var(--text);
    font-size: .9rem;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}

.hero-cta-row a:first-child {
    background: var(--ac);
    border-color: var(--ac);
    color: #fff;
}

.trust-strip span b {
    margin-right: .35rem;
    color: var(--text);
}

.status-legend-panel {
    margin-top: 1rem;
}

.drawer-tool-count {
    display: inline-flex;
    margin-left: .35rem;
    padding: .08rem .42rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, .07);
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    vertical-align: middle;
}

.studio-shell,
.library-market,
.category-market {
    width: min(1480px, 100%);
    margin: 0 auto;
}

.studio-search-hero {
    position: relative;
    z-index: 12;
    padding: clamp(8px, 2vw, 18px) 0 8px;
}

.studio-search-hero .studio-search {
    margin: 0 auto;
}

.studio-hero,
.library-hero,
.category-market-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    padding: clamp(20px, 4vw, 48px);
    border: 1px solid rgba(148,163,184,.20);
    border-radius: 28px;
    background:
        radial-gradient(circle at 12% 10%, rgba(0,113,227,.16), transparent 30%),
        radial-gradient(circle at 86% 0%, rgba(16,185,129,.14), transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
    box-shadow: 0 24px 70px rgba(15,23,42,.08);
    overflow: hidden;
}

.dark .studio-hero,
.dark .library-hero,
.dark .category-market-hero {
    background:
        radial-gradient(circle at 12% 10%, rgba(56,189,248,.18), transparent 30%),
        radial-gradient(circle at 86% 0%, rgba(34,197,94,.14), transparent 30%),
        linear-gradient(135deg, rgba(15,23,42,.96), rgba(30,41,59,.92));
}

.studio-hero-copy h1,
.library-hero h1,
.category-market-hero h1 {
    max-width: 880px;
    margin: 10px 0 10px;
    color: var(--tx);
    font-size: clamp(2rem, 5vw, 4.9rem);
    line-height: .96;
    letter-spacing: 0;
}

.library-hero h1,
.category-market-hero h1 {
    font-size: clamp(2rem, 4vw, 4rem);
}

.studio-hero-copy p,
.library-hero p,
.category-market-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--tx2);
    font-size: 1.05rem;
    line-height: 1.7;
}

.studio-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid rgba(0,113,227,.16);
    border-radius: 999px;
    background: rgba(239,246,255,.78);
    color: var(--ac);
    font-size: .78rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.studio-search,
.library-command {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    max-width: 980px;
    margin-top: 22px;
    padding: 10px;
    border: 1px solid rgba(148,163,184,.24);
    border-radius: 22px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 18px 48px rgba(15,23,42,.10);
}

.studio-search-wrap {
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.studio-search-wrap .studio-search {
    max-width: none;
}

.studio-search-dropdown {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 1px solid rgba(148,163,184,.26);
    border-radius: 20px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 24px 70px rgba(15,23,42,.18);
    backdrop-filter: blur(14px);
}

.dark .studio-search-dropdown {
    background: rgba(15,23,42,.98);
}

.studio-search-option {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    color: var(--tx);
    text-decoration: none;
}

.studio-search-option:hover,
.studio-search-option:focus-visible {
    background: rgba(0,113,227,.09);
    color: var(--ac);
    text-decoration: none;
    outline: none;
}

.studio-search-option-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0,113,227,.14), rgba(52,199,89,.12));
    color: var(--ac);
}

.studio-search-option b,
.studio-search-option small {
    display: block;
}

.studio-search-option b {
    font-size: .95rem;
    line-height: 1.2;
}

.studio-search-option small,
.studio-search-empty {
    color: var(--tx2);
    font-size: .78rem;
}

.studio-search-empty {
    padding: 14px;
    text-align: center;
}

.library-command {
    grid-template-columns: minmax(280px, 1fr) 220px 220px;
    max-width: none;
    margin: 18px 0;
}

.dark .studio-search,
.dark .library-command {
    background: rgba(15,23,42,.76);
}

.studio-search-input .mud-input-root {
    background: transparent !important;
    box-shadow: none !important;
}

.studio-mini-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.studio-mini-stats span {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(15,23,42,.06);
    color: var(--tx2);
    font-size: .82rem;
    font-weight: 800;
}

.studio-trust-card {
    display: none !important;
}

.studio-trust-card .mud-icon-root {
    display: none !important;
}

.studio-trust-card strong {
    display: none !important;
}

.studio-trust-card span {
    display: none !important;
}

.studio-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.studio-menu-item {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 8px;
    min-height: 106px;
    padding: 14px 10px;
    border: 1px solid rgba(148,163,184,.24);
    border-radius: 22px;
    background: var(--bg2);
    color: var(--tx);
    text-align: center;
    text-decoration: none;
    box-shadow: 0 16px 38px rgba(15,23,42,.07);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.studio-menu-item:hover,
.studio-menu-item.active {
    border-color: rgba(0,113,227,.38);
    color: var(--ac);
    transform: translateY(-2px);
    text-decoration: none;
    box-shadow: 0 20px 48px rgba(15,23,42,.12);
}

.studio-menu-item span:first-child,
.studio-quick-tile span,
.market-tool-icon,
.category-market-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(0,113,227,.12), rgba(0,186,242,.16));
    color: var(--ac);
}

.studio-menu-item b {
    font-size: .88rem;
}

.studio-menu-item small {
    color: var(--tx2);
    font-weight: 800;
}

.studio-quick-panel,
.studio-section,
.library-group {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid rgba(148,163,184,.22);
    border-radius: 28px;
    background: var(--bg2);
    box-shadow: 0 20px 54px rgba(15,23,42,.07);
}

.studio-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.studio-panel-head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--tx);
    font-size: 1.25rem;
}

.studio-panel-head p {
    margin: 4px 0 0;
    color: var(--tx2);
}

.studio-panel-head a {
    color: var(--ac);
    font-weight: 850;
    text-decoration: none;
}

.studio-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
    gap: 12px;
}

.studio-bookmark-wrap {
    position: relative;
    min-width: 0;
}

.studio-quick-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: 8px;
    min-height: 112px;
    padding: 16px;
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 22px;
    background: linear-gradient(180deg, var(--bg2), var(--bg3));
    color: var(--tx);
    text-align: left;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.studio-quick-tile:hover {
    border-color: var(--ac2);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(15,23,42,.11);
}

.studio-quick-tile span {
    grid-row: span 3;
}

.studio-quick-tile b {
    min-width: 0;
    color: var(--tx);
    font-size: .98rem;
    line-height: 1.15;
}

.studio-quick-tile small {
    color: var(--tx2);
    font-size: .76rem;
    line-height: 1.35;
}

.studio-quick-tile em {
    align-self: end;
    color: var(--ac);
    font-size: .72rem;
    font-style: normal;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.bookmark-remove {
    position: absolute !important;
    top: 8px;
    right: 8px;
    background: var(--bg2) !important;
    border: 1px solid rgba(148,163,184,.24) !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.10);
}

.bookmark-add-panel {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(148,163,184,.18);
}

.bookmark-candidates {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bookmark-candidates button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid rgba(148,163,184,.22);
    border-radius: 999px;
    background: var(--bg2);
    color: var(--tx);
    cursor: pointer;
    font: inherit;
    font-size: .82rem;
    font-weight: 800;
}

.bookmark-candidates button:hover {
    border-color: var(--ac2);
    color: var(--ac);
}

.bookmark-candidates button em {
    color: var(--ac);
    font-style: normal;
    font-size: .74rem;
    text-transform: uppercase;
}

.studio-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 16px;
}

.studio-category-card {
    border: 1px solid rgba(148,163,184,.22);
    border-radius: 26px;
    background:
        linear-gradient(140deg, rgba(255,255,255,.94), rgba(248,250,252,.88));
    overflow: hidden;
}

.dark .studio-category-card {
    background: linear-gradient(140deg, rgba(15,23,42,.94), rgba(30,41,59,.88));
}

.studio-category-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 18px;
    color: var(--tx);
    text-decoration: none;
}

.studio-category-head:hover {
    text-decoration: none;
}

.studio-category-head > span {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(0,113,227,.12), rgba(0,186,242,.18));
    color: var(--ac);
}

.studio-category-head b {
    display: block;
    font-size: 1rem;
}

.studio-category-head small {
    display: block;
    margin-top: 3px;
    color: var(--tx2);
    line-height: 1.4;
}

.studio-category-head em {
    min-width: 38px;
    padding: 7px 9px;
    border-radius: 999px;
    background: var(--acl);
    color: var(--ac);
    font-style: normal;
    font-weight: 900;
    text-align: center;
}

.studio-tool-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 18px 18px;
}

.studio-tool-chips a {
    padding: 8px 10px;
    border: 1px solid rgba(148,163,184,.22);
    border-radius: 999px;
    background: var(--bg3);
    color: var(--tx);
    font-size: .82rem;
    font-weight: 750;
    text-decoration: none;
}

.studio-tool-chips a:hover {
    border-color: var(--ac2);
    color: var(--ac);
    text-decoration: none;
}

.studio-result-grid,
.library-tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.library-groups {
    display: grid;
    gap: 18px;
}

.market-tool-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-height: 124px;
    padding: 14px;
    border: 1px solid rgba(148,163,184,.20);
    border-radius: 22px;
    background: linear-gradient(180deg, var(--bg2), var(--bg3));
    color: var(--tx);
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(15,23,42,.06);
}

.market-tool-card:hover {
    border-color: var(--ac2);
    color: var(--tx);
    text-decoration: none;
    transform: translateY(-1px);
}

.market-tool-copy b {
    display: block;
    margin-bottom: 5px;
}

.market-tool-copy small {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--tx2);
    line-height: 1.45;
}

.market-tool-badges {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.market-tool-badges em {
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(15,23,42,.06);
    color: var(--tx2);
    font-size: .72rem;
    font-style: normal;
    font-weight: 800;
}

.category-market-icon {
    width: 64px;
    height: 64px;
    border-radius: 22px;
}

@media (max-width: 980px) {
    .top-service-menu {
        display: none;
    }

    .studio-hero,
    .library-hero,
    .category-market-hero {
        grid-template-columns: 1fr;
        border-radius: 22px;
    }

    .studio-search,
    .library-command {
        grid-template-columns: 1fr;
    }

    .studio-search-dropdown {
        position: static;
        margin-top: 8px;
    }
}

@media (max-width: 640px) {
    .studio-hero,
    .library-hero,
    .category-market-hero,
    .studio-quick-panel,
    .studio-section,
    .library-group {
        padding: 16px;
        border-radius: 20px;
    }

    .studio-category-grid,
    .library-tool-grid,
    .studio-result-grid {
        grid-template-columns: 1fr;
    }

    .studio-panel-head {
        display: grid;
    }
}

.money-field-label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--tx);
    font-size: .82rem;
    font-weight: 700;
}

.money-field-words {
    width: 100%;
    margin-top: -2px;
    padding: 8px 10px;
    border: 1px dashed rgba(15, 118, 110, .22);
    border-radius: 12px;
    background: rgba(236, 253, 245, .52);
    color: var(--tx2);
    font-size: .78rem;
    line-height: 1.35;
    text-transform: capitalize;
}

.tax-result-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(56, 189, 248, .13), transparent 34%),
        linear-gradient(180deg, rgba(15, 29, 62, .96), rgba(8, 19, 41, .91)) !important;
    border-color: rgba(125, 211, 252, .24) !important;
    box-shadow: 0 22px 58px rgba(2, 6, 23, .30) !important;
}

.tax-result-head {
    align-items: center;
}

.tax-badge {
    min-width: 118px;
    padding: 12px 14px;
    border: 1px solid rgba(125, 211, 252, .22);
    border-radius: 18px;
    background: rgba(2, 12, 29, .44);
    text-align: right;
}

.tax-overall-summary {
    display: grid;
    gap: 6px;
    margin-top: 18px;
    padding: clamp(16px, 2vw, 22px);
    border: 1px solid rgba(34, 197, 94, .24);
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(34, 197, 94, .16), transparent 38%),
        rgba(2, 12, 29, .46);
}

.tax-overall-summary span {
    color: var(--dv-app-muted, #b9c9dc);
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.tax-overall-summary strong {
    color: #d9f99d;
    font-size: clamp(2rem, 4vw, 3.35rem);
    font-weight: 950;
    line-height: 1;
}

.tax-overall-summary em {
    color: var(--dv-app-muted, #b9c9dc);
    font-size: .9rem;
    font-style: normal;
    font-weight: 750;
    line-height: 1.45;
}

.tax-report-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid rgba(125, 211, 252, .18);
    border-radius: 16px;
    background: rgba(2, 12, 29, .30);
}

.tax-report-actions span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--dv-app-muted, #b9c9dc);
    font-size: .78rem;
    font-weight: 820;
}

.tax-report-actions .mud-icon-root {
    color: #7dd3fc;
}

.tax-cross-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(34, 197, 94, .26);
    background: rgba(20, 83, 45, .20);
}

.tax-cross-check.warning {
    border-color: rgba(251, 191, 36, .34);
    background: rgba(120, 53, 15, .20);
}

.tax-cross-check .mud-icon-root {
    margin-top: 2px;
    color: #86efac;
}

.tax-cross-check.warning .mud-icon-root {
    color: #fbbf24;
}

.tax-cross-check strong,
.tax-cross-check span {
    display: block;
}

.tax-cross-check strong {
    color: var(--dv-app-text, #f3f8ff);
    font-size: .86rem;
    font-weight: 930;
}

.tax-cross-check span {
    margin-top: 2px;
    color: var(--dv-app-muted, #b9c9dc);
    font-size: .78rem;
    font-weight: 720;
    line-height: 1.45;
}

.tax-badge span,
.tax-metric span {
    display: block;
    color: var(--dv-app-muted, #b9c9dc);
    font-size: .76rem;
    font-weight: 700;
}

.tax-badge strong,
.tax-metric strong {
    display: block;
    color: var(--dv-app-text, #f3f8ff);
    font-size: 1rem;
}

.tax-chart {
    display: grid;
    gap: 12px;
    margin-top: 18px;
    padding: 16px;
    border: 1px solid rgba(125, 211, 252, .18);
    border-radius: 20px;
    background: rgba(2, 12, 29, .34);
}

.tax-chart-head {
    display: grid;
    gap: 2px;
    margin-bottom: 2px;
}

.tax-chart-head strong {
    color: var(--dv-app-text, #f3f8ff);
    font-size: .98rem;
    font-weight: 950;
}

.tax-chart-head span {
    color: var(--dv-app-muted, #b9c9dc);
    font-size: .78rem;
    font-weight: 720;
}

.tax-explain-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 16px;
}

.tax-explain-strip > div {
    padding: 12px 14px;
    border: 1px solid rgba(125, 211, 252, .16);
    border-radius: 16px;
    background: rgba(2, 12, 29, .32);
}

.tax-explain-strip strong {
    display: block;
    color: var(--dv-app-text, #f3f8ff);
    font-size: .88rem;
    margin-bottom: 4px;
}

.tax-explain-strip span {
    display: block;
    color: var(--dv-app-muted, #b9c9dc);
    font-size: .82rem;
    line-height: 1.45;
}

.tax-bar-row {
    display: grid;
    grid-template-columns: 92px 1fr minmax(96px, auto);
    align-items: center;
    gap: 12px;
    font-size: .88rem;
    font-weight: 800;
}

.tax-bar-track {
    height: 16px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .16);
    overflow: hidden;
}

.tax-bar {
    height: 100%;
    border-radius: inherit;
    transition: width .2s ease;
}

.tax-bar.old {
    background: linear-gradient(90deg, #2563eb, #38bdf8);
}

.tax-bar.newer {
    background: linear-gradient(90deg, #0f766e, #86efac);
}

.tax-metric {
    height: 100%;
    padding: 14px;
    border: 1px solid rgba(125, 211, 252, .16);
    border-radius: 16px;
    background: rgba(2, 12, 29, .34);
}

.tax-summary-list {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.tax-summary-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid rgba(125, 211, 252, .14);
    border-radius: 14px;
    background: rgba(2, 12, 29, .30);
}

.tax-summary-list span {
    color: var(--dv-app-muted, #b9c9dc);
    font-size: .84rem;
    font-weight: 760;
}

.tax-summary-list strong {
    color: var(--dv-app-text, #f3f8ff);
    font-size: .9rem;
    font-weight: 920;
    text-align: right;
}

.tax-idea.compact {
    padding: 12px;
    border-radius: 16px;
}

@media (max-width: 1199px) {
    .tax-planner .tax-form-panel {
        position: static;
    }
}

@media (max-width: 640px) {
    .tax-result-head,
    .tax-panel-title {
        display: grid;
    }

    .tax-badge {
        text-align: left;
    }

    .tax-bar-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .tax-explain-strip {
        grid-template-columns: 1fr;
    }
}

/* Polished site footer */
.footer {
    margin-top: 48px;
    border-top: 1px solid rgba(148, 163, 184, .24);
    background:
        radial-gradient(circle at 10% 0%, rgba(47, 92, 255, .14), transparent 30%),
        radial-gradient(circle at 92% 12%, rgba(15, 157, 138, .13), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(244, 247, 251, .96));
}

.dark .footer {
    background:
        radial-gradient(circle at 10% 0%, rgba(133, 164, 255, .16), transparent 30%),
        radial-gradient(circle at 92% 12%, rgba(79, 209, 197, .12), transparent 28%),
        linear-gradient(180deg, rgba(16, 26, 45, .94), rgba(8, 17, 29, .98));
}

.footer-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 34px clamp(18px, 3vw, 52px) 24px;
    color: var(--tx2);
}

.footer-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 22px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 24px;
    background: rgba(255, 255, 255, .70);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .08);
    backdrop-filter: blur(18px);
}

.dark .footer-hero {
    background: rgba(15, 23, 42, .58);
}

.footer-brand-lockup {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.footer-logo-mark {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--ac), var(--ac2));
    color: #fff;
    box-shadow: 0 14px 28px rgba(47, 92, 255, .22);
}

.footer-brand {
    margin: 0;
    color: var(--tx);
    font-size: 1.12rem;
    font-weight: 900;
    letter-spacing: 0;
}

.footer-sub {
    max-width: 720px;
    margin: 5px 0 0;
    color: var(--tx2);
    line-height: 1.5;
}

.footer-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.footer-actions a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid rgba(47, 92, 255, .22);
    border-radius: 999px;
    background: rgba(47, 92, 255, .08);
    color: var(--ac);
    font-weight: 850;
    text-decoration: none;
}

.footer-actions a:hover {
    background: var(--ac);
    color: #fff;
    text-decoration: none;
}

.footer-cols {
    display: grid;
    grid-template-columns: minmax(280px, 1.35fr) repeat(3, minmax(170px, .72fr));
    gap: 18px;
    margin-top: 18px;
}

.footer-column {
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 20px;
    background: rgba(255, 255, 255, .52);
}

.dark .footer-column {
    background: rgba(15, 23, 42, .42);
}

.footer-head {
    margin: 0 0 12px;
    color: var(--tx);
    font-size: .82rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.footer-column a {
    display: block;
    width: fit-content;
    color: var(--tx2);
    margin: 9px 0;
    font-weight: 700;
    text-decoration: none;
}

.footer-column a:hover {
    color: var(--ac);
    text-decoration: none;
}

.footer-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-chip-row span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(47, 92, 255, .08);
    color: var(--tx);
    font-size: .8rem;
    font-weight: 800;
}

.footer-chip-row span:nth-child(2) {
    background: rgba(15, 157, 138, .10);
}

.footer-note {
    max-width: 760px;
    margin: 14px 0 0;
    color: var(--tx2);
    line-height: 1.55;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(148, 163, 184, .18);
    color: var(--tx2);
    font-size: .9rem;
}

.footer-bottom a {
    color: var(--tx2);
    font-weight: 800;
    text-decoration: none;
}

.footer-bottom a:hover {
    color: var(--ac);
}

.footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 14px;
}

.self-page-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(148, 163, 184, .26);
    border-radius: 999px;
    padding: 5px 10px;
    background: rgba(255, 255, 255, .7);
    color: var(--tx2);
    font-size: .78rem;
    font-weight: 850;
    text-decoration: none;
}

.self-page-link:hover {
    border-color: rgba(47, 92, 255, .36);
    color: var(--ac);
    text-decoration: none;
}

.dark .self-page-link {
    background: rgba(255, 255, 255, .08);
}

@media (max-width: 860px) {
    .footer-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-actions {
        justify-content: flex-start;
    }

    .footer-cols {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-bottom-links {
        justify-content: flex-start;
    }

    .breadcrumb .self-page-link {
        margin-left: 0;
    }
}

/* Floating help and contact panel */
.floating-contact {
    position: fixed;
    left: 18px;
    bottom: 22px;
    z-index: 1400;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
}

.floating-contact-tab {
    min-width: 64px;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px 0 14px;
    border: 1px solid rgba(36, 88, 255, .22);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ac), var(--ac2));
    color: #fff;
    box-shadow: 0 20px 45px rgba(15, 23, 42, .22);
    font-size: .82rem;
    line-height: 1;
    text-align: center;
    font-weight: 900;
    cursor: pointer;
    pointer-events: auto;
    transition: transform .18s ease, box-shadow .18s ease;
}

.floating-contact-tab .mud-icon-root {
    font-size: 1.08rem;
}

.floating-contact-tab span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding-right: 1px;
}

.floating-contact-tab:hover,
.floating-contact-tab:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 24px 56px rgba(15, 23, 42, .26);
    outline: none;
}

.floating-contact.is-open .floating-contact-tab {
    display: none;
}

.floating-contact-panel {
    width: min(450px, calc(100vw - 104px));
    height: min(720px, 82vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 28px;
    background: #f8fafc;
    box-shadow: 0 32px 100px rgba(15, 23, 42, .32);
    backdrop-filter: blur(22px);
    pointer-events: auto;
}

.dark .floating-contact-panel {
    background: rgba(15, 23, 42, .94);
}

.floating-contact-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 16px 16px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    background:
        radial-gradient(circle at 8% 0, rgba(255,255,255,.20), transparent 35%),
        linear-gradient(135deg, #111827, #1f3b8a 56%, #0f9d8a);
    color: #fff;
}

.floating-contact-head .mud-icon-button {
    margin-left: auto;
    color: rgba(255,255,255,.88) !important;
}

.floating-contact-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 16px;
    background: rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}

.floating-contact-avatar img,
.floating-chat-welcome-icon img {
    width: 30px;
    height: 30px;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    filter: drop-shadow(0 6px 12px rgba(15,23,42,.18));
}

.floating-contact-title {
    display: grid;
    gap: 2px;
}

.floating-contact-title span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    color: rgba(255,255,255,.76);
    font-size: .78rem;
    font-weight: 800;
}

.floating-contact-title span i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #38f6b4;
    box-shadow: 0 0 0 5px rgba(56,246,180,.16);
}

.floating-contact-head strong {
    display: block;
    color: #fff;
    font-size: 1.02rem;
    letter-spacing: .01em;
}

.floating-contact-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0;
    overflow: auto;
    background:
        radial-gradient(circle at 16% 8%, rgba(36,88,255,.07), transparent 28%),
        radial-gradient(circle at 92% 12%, rgba(15,157,138,.08), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(241,245,249,.90));
}

.floating-contact-copy {
    margin: 0;
    color: var(--tx2);
    line-height: 1.55;
    font-size: .92rem;
}

.floating-contact-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 13px;
}

.floating-contact-prompts button {
    border: 1px solid rgba(36, 88, 255, .15);
    border-radius: 14px;
    background: rgba(255,255,255,.86);
    color: #1e293b;
    padding: 8px 10px;
    font-size: .82rem;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(15,23,42,.06);
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.floating-contact-prompts button:hover,
.floating-contact-prompts button:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(36,88,255,.35);
    background: #fff;
    color: var(--ac);
    outline: none;
}

.floating-contact-composer {
    display: grid;
    grid-template-columns: 1fr 44px;
    gap: 10px;
    align-items: end;
    padding: 13px 14px 10px;
    border-top: 1px solid rgba(148, 163, 184, .18);
    background: rgba(255,255,255,.94);
}

.floating-contact-textbox {
    width: 100%;
    min-height: 54px;
    padding: 0 14px;
    border: 1px solid rgba(148, 163, 184, .48);
    border-radius: 18px;
    background: #fff;
    color: var(--tx);
    font: 850 .94rem/1.3 system-ui, "Segoe UI", Roboto, Arial, sans-serif;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.floating-contact-textbox::placeholder {
    color: rgba(100, 116, 139, .68);
}

.floating-contact-textbox:focus {
    border-color: rgba(36, 88, 255, .55);
    box-shadow: 0 0 0 4px rgba(36, 88, 255, .10);
}

.floating-contact-textbox:disabled {
    cursor: wait;
    opacity: .72;
}

.floating-contact-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}

.floating-contact-ask,
.floating-contact-open {
    border-radius: 999px !important;
    font-weight: 900 !important;
}

.floating-contact-send {
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, var(--ac), var(--ac2)) !important;
    color: #fff !important;
    box-shadow: 0 14px 28px rgba(36,88,255,.22);
}

.floating-contact-clear {
    grid-column: 1 / -1;
    justify-self: flex-start;
    min-height: 26px;
    padding: 0 2px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--tx2);
    font-size: .78rem;
    font-weight: 850;
    cursor: pointer;
}

.floating-contact-clear:hover,
.floating-contact-clear:focus-visible {
    border-color: var(--ac);
    color: var(--ac);
    outline: none;
}

.floating-contact-chat {
    min-height: max-content;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 16px;
}

.floating-chat-row {
    display: flex;
}

.floating-chat-row.is-user {
    justify-content: flex-end;
}

.floating-chat-row.is-guide {
    justify-content: flex-start;
}

.floating-chat-bubble {
    max-width: 86%;
    padding: 12px 14px;
    border-radius: 20px;
    line-height: 1.55;
    font-size: .92rem;
    box-shadow: 0 12px 28px rgba(15,23,42,.08);
}

.is-user .floating-chat-bubble {
    border-bottom-right-radius: 8px;
    background: linear-gradient(135deg, var(--ac), var(--ac2));
    color: #fff;
    font-weight: 800;
}

.is-guide .floating-chat-bubble {
    border: 1px solid rgba(148,163,184,.22);
    border-bottom-left-radius: 8px;
    background: rgba(255,255,255,.96);
    color: var(--tx);
}

.floating-chat-message {
    white-space: pre-wrap;
}

.floating-chat-welcome {
    margin: auto 0;
    padding: 20px;
    border: 1px solid rgba(148,163,184,.20);
    border-radius: 24px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 18px 45px rgba(15,23,42,.08);
}

.floating-chat-welcome-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(36,88,255,.12), rgba(15,157,138,.14));
    color: var(--ac);
}

.floating-chat-welcome strong {
    display: block;
    color: var(--tx);
    font-size: 1rem;
}

.floating-chat-welcome span {
    display: block;
    margin-top: 4px;
    color: var(--tx2);
    line-height: 1.45;
    font-size: .9rem;
}

.floating-contact-answer {
    white-space: pre-wrap;
    max-width: 100%;
    border: 1px solid rgba(15, 159, 143, .20);
    border-radius: 18px 18px 18px 7px;
    background: linear-gradient(180deg, rgba(15, 159, 143, .10), rgba(255,255,255,.72));
    color: var(--tx);
    padding: 14px;
    line-height: 1.55;
    font-size: .92rem;
    box-shadow: 0 12px 30px rgba(15,23,42,.08);
}

.dark .floating-contact-answer {
    background: linear-gradient(180deg, rgba(15, 159, 143, .14), rgba(15,23,42,.52));
}

.floating-typing {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.floating-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ac2);
    animation: floatingTyping 1s ease-in-out infinite;
}

.floating-typing span:nth-child(2) {
    animation-delay: .12s;
}

.floating-typing span:nth-child(3) {
    animation-delay: .24s;
}

.floating-typing em {
    margin-left: 7px;
    color: var(--tx2);
    font-style: normal;
    font-weight: 800;
}

@keyframes floatingTyping {
    0%, 80%, 100% { transform: translateY(0); opacity: .45; }
    40% { transform: translateY(-3px); opacity: 1; }
}

.floating-contact-meta {
    margin-top: 7px;
    color: rgba(71,85,105,.82);
    font-size: .78rem;
    font-weight: 850;
    text-align: left;
}

.floating-contact-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 14px 13px;
    border-top: 1px solid rgba(148, 163, 184, .18);
    background: rgba(255,255,255,.94);
    font-size: .86rem;
}

.dark .floating-contact-foot {
    background: rgba(2, 6, 23, .28);
}

.floating-contact-foot a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tx2);
    font-weight: 850;
    text-decoration: none;
}

.floating-contact-foot a:hover {
    color: var(--ac);
}

.floating-contact-open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 11px;
    border: 1px solid rgba(36,88,255,.18);
    border-radius: 999px;
    background: rgba(36,88,255,.08);
    color: var(--ac);
    font-size: .82rem;
    font-weight: 900;
    text-decoration: none;
}

@media (max-width: 640px) {
    .floating-contact {
        left: 12px;
        right: 12px;
        bottom: 14px;
        align-items: flex-start;
        flex-direction: column-reverse;
    }

    .floating-contact-panel {
        width: 100%;
        max-height: 70vh;
    }

    .floating-contact-tab {
        min-width: 58px;
        min-height: 48px;
    }
}

/* Information pages */
.info-hero {
    position: relative;
    overflow: hidden;
}

.info-hero::after {
    content: "";
    position: absolute;
    inset: auto -12% -45% 45%;
    height: 220px;
    background: radial-gradient(circle, rgba(36, 88, 255, .14), transparent 65%);
    pointer-events: none;
}

.info-page-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 22px 0;
}

.info-card {
    min-height: 210px;
}

.info-card .mud-icon-root {
    color: var(--ac);
}

.info-steps {
    margin-top: 22px;
}

.info-steps ol {
    margin: 14px 0 0;
    padding-left: 22px;
    color: var(--tx2);
    line-height: 1.75;
}

.info-steps li {
    margin: 8px 0;
}

.info-callout {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 22px;
    background: linear-gradient(135deg, rgba(36, 88, 255, .10), rgba(15, 159, 143, .10));
}

.info-callout > .mud-icon-root {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 54px;
    border-radius: 18px;
    background: #fff;
    color: var(--ac);
}

.info-callout h2 {
    margin: 0 0 6px;
}

.info-callout p {
    margin: 0;
    color: var(--tx2);
}

.info-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

@media (max-width: 900px) {
    .info-page-grid {
        grid-template-columns: 1fr;
    }

    .info-callout {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* DaivVerse premium interface refresh */
:root {
    --bg: #f7f8fb;
    --bg2: #ffffff;
    --bg3: #f3f6fb;
    --bg4: #edf3ff;
    --tx: #111827;
    --tx2: #657083;
    --bd: rgba(17, 24, 39, .11);
    --ac: #2458ff;
    --ach: #173fd1;
    --ac2: #0f9f8f;
    --acl: rgba(36, 88, 255, .09);
    --acl2: rgba(15, 159, 143, .09);
    --r: 22px;
    --mw: 1500px;
    --f: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
    --sh: 0 1px 2px rgba(17, 24, 39, .04), 0 18px 44px rgba(17, 24, 39, .07);
    --sh2: 0 4px 14px rgba(17, 24, 39, .07), 0 30px 80px rgba(17, 24, 39, .12);
}

html {
    scroll-behavior: smooth;
}

body,
.mud-typography,
.mud-button-root,
.mud-input,
.mud-select {
    font-family: var(--f) !important;
}

a:focus-visible,
button:focus-visible,
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(36, 88, 255, .28) !important;
    outline-offset: 3px;
}

.app {
    background:
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(247,248,251,.96) 360px),
        radial-gradient(circle at 20% -10%, rgba(36, 88, 255, .10), transparent 28%),
        radial-gradient(circle at 86% 0%, rgba(15, 159, 143, .08), transparent 26%),
        var(--bg);
}

.mud-topbar {
    min-height: 64px !important;
    border-bottom: 1px solid rgba(17, 24, 39, .08) !important;
    background: rgba(255, 255, 255, .84) !important;
    backdrop-filter: blur(18px);
    box-shadow: none !important;
}

.nav-inner {
    max-width: var(--mw);
    padding: 0 clamp(18px, 3vw, 46px);
    gap: 18px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    font-size: 1.02rem;
    letter-spacing: -.02em;
}

.logo::before {
    content: "";
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--ac), var(--ac2));
    box-shadow: 0 12px 24px rgba(36, 88, 255, .24);
}

.top-service-menu {
    gap: 2px;
    margin-left: 8px;
}

.top-service-menu a {
    min-height: 38px;
    padding: 7px 12px;
    color: var(--tx2);
    font-size: .86rem;
    font-weight: 760;
}

.top-service-menu a:hover,
.top-service-menu a:focus-visible {
    background: rgba(36, 88, 255, .08);
    color: var(--ac);
}

.nav-right {
    padding: 5px;
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 999px;
    background: rgba(255,255,255,.72);
}

.main {
    padding: clamp(22px, 3vw, 46px) clamp(16px, 3vw, 46px) 64px;
}

.studio-shell,
.library-market,
.category-market {
    width: min(1500px, 100%);
}

.studio-hero,
.library-hero,
.category-market-hero {
    padding: clamp(44px, 8vw, 112px) clamp(22px, 5vw, 72px);
    border-radius: 34px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.72)),
        radial-gradient(circle at 50% 0%, rgba(36, 88, 255, .13), transparent 38%),
        radial-gradient(circle at 82% 12%, rgba(15, 159, 143, .10), transparent 28%);
    box-shadow: 0 30px 90px rgba(17, 24, 39, .09);
    text-align: center;
}

.studio-hero-copy,
.library-hero > div,
.category-market-hero > div {
    max-width: 1040px;
    margin: 0 auto;
}

.studio-hero-copy h1,
.library-hero h1,
.category-market-hero h1 {
    max-width: 1000px;
    margin: 18px auto 18px;
    font-size: clamp(2.55rem, 6.5vw, 6.2rem);
    line-height: .94;
    letter-spacing: -.055em;
}

.library-hero h1,
.category-market-hero h1 {
    font-size: clamp(2.3rem, 5vw, 4.8rem);
}

.studio-hero-copy p,
.library-hero p,
.category-market-hero p {
    max-width: 820px;
    margin: 0 auto;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.65;
}

.studio-kicker {
    background: rgba(36, 88, 255, .08);
    border-color: rgba(36, 88, 255, .14);
    color: var(--ac);
}

.studio-search,
.library-command {
    margin: 30px auto 0;
    padding: 12px;
    width: 100%;
    border-radius: 999px;
    border: 1px solid rgba(17, 24, 39, .10);
    background: rgba(255,255,255,.92);
    box-shadow: 0 20px 60px rgba(17, 24, 39, .12);
}

.library-command {
    border-radius: 28px;
}

.hero-cta-row,
.trust-strip,
.studio-mini-stats {
    justify-content: center;
}

.hero-cta-row a {
    min-height: 46px;
    padding: 0 18px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.hero-cta-row a:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.hero-cta-row a:first-child {
    box-shadow: 0 18px 38px rgba(36, 88, 255, .24);
}

.studio-quick-panel,
.studio-section,
.library-group,
.tool-content-section,
.tool-meta-grid article,
.how-to,
.related {
    border-radius: 30px;
    border-color: rgba(17, 24, 39, .09);
    background: rgba(255,255,255,.88);
    box-shadow: 0 22px 66px rgba(17, 24, 39, .07);
}

.studio-panel-head h2,
.tool-content-section h2,
.tool-meta-grid h2 {
    letter-spacing: -.025em;
}

.studio-category-grid {
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

.studio-category-card,
.market-tool-card,
.tcard,
.studio-quick-tile,
.studio-menu-item {
    border-color: rgba(17, 24, 39, .09);
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(249,250,252,.94));
    box-shadow: 0 16px 44px rgba(17, 24, 39, .06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.studio-category-card:hover,
.market-tool-card:hover,
.tcard:hover,
.studio-quick-tile:hover,
.studio-menu-item:hover {
    border-color: rgba(36, 88, 255, .24);
    box-shadow: 0 26px 70px rgba(17, 24, 39, .11);
    transform: translateY(-3px);
}

.tcard-copy p,
.market-tool-copy small,
.studio-category-head small {
    color: var(--tx2);
}

.tcard-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 14px;
    color: var(--ac);
    font-size: .78rem;
    font-weight: 860;
}

.privacy-band {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
    gap: 28px;
    margin-top: 24px;
    padding: clamp(28px, 5vw, 58px);
    border-radius: 34px;
    background:
        radial-gradient(circle at 14% 10%, rgba(36, 88, 255, .28), transparent 32%),
        linear-gradient(135deg, #08111f, #111827 55%, #071b18);
    color: #f8fafc;
    box-shadow: 0 34px 100px rgba(17, 24, 39, .20);
}

.privacy-band h2 {
    max-width: 760px;
    margin: 18px 0 12px;
    font-size: clamp(2rem, 4vw, 4.2rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.privacy-band p {
    max-width: 760px;
    margin: 0;
    color: rgba(248,250,252,.72);
    line-height: 1.75;
}

.privacy-band .studio-kicker {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.16);
    color: #dbeafe;
}

.privacy-band-grid,
.use-case-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.privacy-band-grid span {
    min-height: 74px;
    display: flex;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;
    background: rgba(255,255,255,.08);
    color: #f8fafc;
    font-weight: 820;
}

.use-case-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.use-case-grid article {
    padding: 22px;
    border: 1px solid rgba(17, 24, 39, .09);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(249,250,252,.92));
}

.use-case-grid .mud-icon-root {
    color: var(--ac);
    font-size: 2rem;
}

.use-case-grid h3 {
    margin: 16px 0 8px;
    color: var(--tx);
    letter-spacing: -.02em;
}

.use-case-grid p {
    margin: 0;
    color: var(--tx2);
    line-height: 1.58;
}

.tool-route .main {
    padding: clamp(14px, 2vw, 28px);
}

.tool-page {
    max-width: 1240px;
}

.tool-route .tool-page {
    max-width: 1240px;
}

.tool-head {
    border-radius: 30px;
    border-color: rgba(17, 24, 39, .09);
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(249,250,252,.90)),
        radial-gradient(circle at 0 0, rgba(36, 88, 255, .12), transparent 34%);
}

.tool-head h1 {
    font-size: clamp(1.55rem, 3vw, 3rem);
    line-height: 1.05;
    letter-spacing: -.045em;
}

.tool-route .tool-head h1 {
    font-size: clamp(1.35rem, 2.5vw, 2.35rem);
}

.tool-title-icon {
    background: linear-gradient(135deg, rgba(36,88,255,.14), rgba(15,159,143,.12));
}

.tool-panel,
.calc-card,
.pdf-panel {
    border-radius: 28px;
    border-color: rgba(17, 24, 39, .09);
    background: rgba(255,255,255,.92);
    box-shadow: 0 20px 60px rgba(17, 24, 39, .07);
}

.split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.ta,
.mud-input-root,
.mud-input-outlined {
    border-radius: 18px !important;
}

.btn-p,
.btn,
.btn-s {
    border-radius: 999px;
}

.invoice-studio {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr);
    gap: 22px;
    align-items: start;
}

.invoice-editor,
.invoice-summary-card,
.invoice-preview-wrap {
    overflow: hidden;
}

.invoice-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.invoice-section-head h2,
.invoice-summary-card h2 {
    margin: 0;
    color: var(--tx);
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    letter-spacing: -.03em;
}

.invoice-section-head .eyebrow {
    margin: 0 0 4px;
    color: var(--ac);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.invoice-items {
    display: grid;
    gap: 14px;
}

.invoice-item-card {
    padding: 16px;
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(248,250,252,.96), rgba(255,255,255,.98));
}

.invoice-item-head,
.invoice-line-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.invoice-line-summary {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(17, 24, 39, .08);
    color: var(--tx2);
    font-size: .9rem;
}

.invoice-summary-card {
    position: sticky;
    top: 82px;
}

.invoice-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mini-title {
    margin: 18px 0 10px;
    color: var(--tx);
    font-size: 1rem;
}

.gst-invoice-preview {
    position: relative;
    isolation: isolate;
    padding: clamp(22px, 4vw, 42px);
    border: 1px solid rgba(17, 24, 39, .10);
    border-radius: 26px;
    background: #fff;
    color: #111827;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), 0 22px 70px rgba(17,24,39,.08);
}

.gst-invoice-preview::before {
    content: attr(data-watermark);
    position: absolute;
    inset: 0;
    z-index: -1;
    display: grid;
    place-items: center;
    color: rgba(15, 23, 42, .055);
    font-size: clamp(3rem, 12vw, 9rem);
    font-weight: 950;
    letter-spacing: .12em;
    line-height: 1;
    text-transform: uppercase;
    transform: rotate(-28deg);
    pointer-events: none;
    white-space: nowrap;
}

.gst-invoice-preview[data-watermark=""]::before {
    content: none;
}

.invoice-topline,
.invoice-bottom-grid,
.invoice-party-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .65fr);
    gap: 24px;
}

.invoice-topline {
    align-items: start;
    padding-bottom: 22px;
    border-bottom: 2px solid rgba(17, 24, 39, .12);
}

.invoice-topline h2 {
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: -.05em;
}

.invoice-topline p,
.invoice-party-grid p,
.invoice-bottom-grid p {
    margin: 4px 0;
    color: #4b5563;
    white-space: pre-line;
}

.invoice-meta {
    display: grid;
    gap: 5px;
    justify-items: end;
    color: #374151;
}

.invoice-party-grid {
    margin: 22px 0;
}

.invoice-party-grid.compact {
    padding: 16px;
    border: 1px solid rgba(17,24,39,.08);
    border-radius: 18px;
    background: #f8fafc;
}

.invoice-party-grid h3,
.invoice-bottom-grid h3 {
    margin: 0 0 8px;
    color: #111827;
    font-size: .95rem;
}

.invoice-table,
.invoice-total-table {
    width: 100%;
    border-collapse: collapse;
}

.invoice-table th,
.invoice-table td,
.invoice-total-table th,
.invoice-total-table td {
    padding: 10px 9px;
    border-bottom: 1px solid rgba(17, 24, 39, .10);
    text-align: left;
    vertical-align: top;
}

.invoice-table th,
.invoice-total-table th {
    background: #f8fafc;
    color: #374151;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.invoice-table td {
    font-size: .9rem;
}

.invoice-bottom-grid {
    margin-top: 24px;
    align-items: start;
}

.invoice-total-table {
    border: 1px solid rgba(17,24,39,.10);
    border-radius: 16px;
    overflow: hidden;
}

.invoice-total-table th {
    width: 52%;
}

.invoice-total-table td {
    text-align: right;
    font-weight: 800;
}

.invoice-total-table .grand th,
.invoice-total-table .grand td {
    background: #111827;
    color: #fff;
    font-size: 1.02rem;
}

.invoice-words {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #f1f5f9;
    color: #334155;
}

@media (max-width: 1100px) {
    .invoice-studio,
    .invoice-topline,
    .invoice-bottom-grid,
    .invoice-party-grid {
        grid-template-columns: 1fr;
    }

    .invoice-summary-card {
        position: static;
    }

    .invoice-meta {
        justify-items: start;
    }
}

@media (max-width: 760px) {
    .invoice-section-head {
        display: grid;
    }

    .invoice-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .gst-invoice-preview {
        padding: 18px;
        border-radius: 20px;
    }
}

@media print {
    .top-nav,
    .site-footer,
    .tool-head,
    .invoice-editor,
    .invoice-summary-card,
    .invoice-preview-wrap > .invoice-section-head {
        display: none !important;
    }

    .main,
    .tool-route .main {
        padding: 0 !important;
        background: #fff !important;
    }

    .invoice-preview-wrap,
    .gst-invoice-preview {
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
}

.api-doc-studio {
    padding: 0;
}

.api-doc-hero {
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 28px;
    padding: clamp(20px, 3vw, 34px);
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #f8fbff 48%, #eef6ff 100%);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.api-doc-hero .mud-typography-h3 {
    color: #0f172a;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.04;
}

.api-doc-hero-grid {
    align-items: center;
}

.api-doc-chip-row {
    flex-wrap: wrap;
}

.api-doc-command,
.api-doc-card,
.api-doc-metric,
.api-doc-tabs,
.api-doc-empty,
.api-doc-loading {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.07);
}

.api-doc-command {
    padding: 20px;
}

.api-doc-metric {
    height: 100%;
}

.api-doc-metric .mud-card-content {
    min-height: 132px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.api-doc-metric .mud-icon-root {
    color: #2563eb;
}

.api-doc-metric .mud-typography-caption {
    color: #64748b;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.api-doc-metric .mud-typography-subtitle1 {
    color: #0f172a;
    font-weight: 850;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.api-doc-loading,
.api-doc-empty {
    margin-top: 20px;
    padding: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}

.api-doc-empty .mud-icon-root {
    width: 54px;
    height: 54px;
    color: #2563eb;
}

.api-doc-tabs {
    margin-top: 22px;
    overflow: hidden;
}

.api-doc-tab-panel {
    padding: 24px;
}

.api-doc-card .mud-card-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.api-doc-code {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid #dbeafe;
    background: #f8fbff;
    color: #1e3a8a;
    font-family: Consolas, "Segoe UI Mono", monospace;
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

.api-doc-table {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    overflow: hidden;
}

.api-doc-table code {
    white-space: normal;
    overflow-wrap: anywhere;
}

.api-doc-endpoint-title {
    align-items: center;
}

.export-card {
    height: 100%;
}

.export-card .mud-icon-root {
    color: #2563eb;
    width: 32px;
    height: 32px;
}

.export-card .mud-button-root {
    width: fit-content;
    margin-top: 6px;
}

/* AI Prompt Generator */
.prompt-generator-studio {
    display: grid;
    gap: 24px;
    padding: 0 !important;
}

.prompt-hero-card {
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 28px;
    padding: clamp(20px, 3vw, 34px);
    background:
        radial-gradient(circle at 12% 12%, rgba(59, 130, 246, .13), transparent 34%),
        radial-gradient(circle at 88% 8%, rgba(14, 165, 233, .12), transparent 32%),
        linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(248, 250, 252, .82));
    box-shadow: var(--sh);
}

.dark .prompt-hero-card {
    background:
        radial-gradient(circle at 12% 12%, rgba(96, 165, 250, .18), transparent 34%),
        radial-gradient(circle at 88% 8%, rgba(34, 211, 238, .12), transparent 32%),
        linear-gradient(145deg, rgba(15, 23, 42, .96), rgba(17, 24, 39, .9));
}

.prompt-hero-grid {
    align-items: stretch;
}

.prompt-hero-card .mud-typography-h3 {
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1.03;
    letter-spacing: 0;
    font-weight: 900;
}

.prompt-no-api-note {
    max-width: 760px;
}

.prompt-quick-card,
.prompt-form-panel,
.prompt-output-panel,
.prompt-content-grid article {
    border: 1px solid rgba(148, 163, 184, .26);
    border-radius: 24px;
    background: rgba(255, 255, 255, .86);
    box-shadow: var(--sh);
}

.dark .prompt-quick-card,
.dark .prompt-form-panel,
.dark .prompt-output-panel,
.dark .prompt-content-grid article {
    background: rgba(15, 23, 42, .86);
    border-color: rgba(71, 85, 105, .5);
}

.prompt-quick-card {
    height: 100%;
    padding: 22px;
}

.prompt-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.prompt-feature-grid span,
.prompt-category-cloud span,
.prompt-counts span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 999px;
    background: rgba(248, 250, 252, .82);
    color: var(--tx);
    font-size: .84rem;
    font-weight: 800;
}

.dark .prompt-feature-grid span,
.dark .prompt-category-cloud span,
.dark .prompt-counts span {
    background: rgba(30, 41, 59, .82);
}

.prompt-builder-grid {
    align-items: start;
}

.prompt-form-panel,
.prompt-output-panel {
    padding: clamp(18px, 2vw, 26px);
}

.prompt-output-panel {
    position: sticky;
    top: 78px;
}

.prompt-output-head,
.prompt-action-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.prompt-counts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.prompt-empty-state {
    display: grid;
    place-items: center;
    text-align: center;
    min-height: 360px;
    gap: 10px;
    margin-top: 18px;
    padding: 28px;
    border: 1px dashed rgba(148, 163, 184, .42);
    border-radius: 22px;
    background: rgba(248, 250, 252, .7);
}

.dark .prompt-empty-state {
    background: rgba(30, 41, 59, .56);
}

.prompt-empty-state .mud-icon-root {
    width: 54px;
    height: 54px;
    color: var(--ac);
}

.prompt-output-box {
    min-height: 520px;
    margin-top: 18px;
    font-family: var(--m);
    white-space: pre-wrap;
}

.prompt-output-actions {
    justify-content: flex-start;
    margin-top: 16px;
}

.prompt-content-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.prompt-content-grid article {
    padding: 22px;
}

.prompt-content-grid h2 {
    margin: 0 0 10px;
    font-size: 1.15rem;
}

.prompt-content-grid p,
.prompt-content-grid li {
    color: var(--tx2);
    line-height: 1.65;
}

.prompt-category-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

@media (max-width: 960px) {
    .prompt-output-panel {
        position: static;
    }

    .prompt-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .prompt-feature-grid {
        grid-template-columns: 1fr;
    }

    .prompt-output-head,
    .prompt-action-row {
        align-items: stretch;
        flex-direction: column;
    }

    .prompt-action-row .mud-button-root {
        width: 100%;
    }

    .prompt-counts {
        justify-content: flex-start;
    }
}

@media (max-width: 980px) {
    .mobile-menu {
        display: inline-flex !important;
    }

    .nav-right {
        margin-left: auto;
    }

    .studio-search,
    .library-command {
        border-radius: 26px;
    }

    .privacy-band {
        grid-template-columns: 1fr;
    }

    .split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .main {
        padding: 18px 14px 44px;
    }

    .studio-hero,
    .library-hero,
    .category-market-hero {
        padding: 34px 18px;
        border-radius: 26px;
    }

    .studio-hero-copy h1,
    .library-hero h1,
    .category-market-hero h1 {
        font-size: clamp(2.15rem, 12vw, 3.6rem);
    }

    .privacy-band,
    .studio-quick-panel,
    .studio-section,
    .library-group,
    .tool-head,
    .tool-panel,
    .calc-card {
        border-radius: 24px;
    }

    .privacy-band-grid {
        grid-template-columns: 1fr;
    }
}

.speed-test-shell {
    display: grid;
    gap: 18px;
    margin-bottom: 18px;
}

.speed-test-copy {
    display: grid;
    gap: 6px;
}

.speed-test-copy strong {
    font-size: 1.12rem;
    color: var(--tx);
}

.speed-test-copy span {
    color: var(--tx2);
    line-height: 1.55;
}

.speed-test-controls {
    align-items: flex-end;
}

.speed-test-controls .form-col {
    min-width: 190px;
}

.speed-test-loading {
    display: grid;
    place-items: center;
    gap: 12px;
    padding: 12px 0 4px;
    text-align: center;
}

.speed-result-grid {
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr;
    gap: 18px;
    align-items: stretch;
    margin: 18px 0;
}

.speed-meter {
    --speed-rotation: -90deg;
    position: relative;
    min-height: 230px;
    border-radius: 28px;
    border: 1px solid rgba(210, 210, 215, .82);
    background: radial-gradient(circle at 50% 68%, rgba(255, 255, 255, .96) 0 27%, transparent 28%),
        conic-gradient(from 225deg, #ef4444 0 18%, #f59e0b 18% 38%, #22c55e 38% 70%, #2563eb 70% 100%);
    box-shadow: var(--sh);
    overflow: hidden;
}

.dark .speed-meter {
    border-color: rgba(58, 58, 60, .86);
    background: radial-gradient(circle at 50% 68%, rgba(29, 29, 31, .98) 0 27%, transparent 28%),
        conic-gradient(from 225deg, #ef4444 0 18%, #f59e0b 18% 38%, #22c55e 38% 70%, #60a5fa 70% 100%);
}

.speed-meter::before {
    content: "";
    position: absolute;
    inset: 22px;
    border-radius: 24px;
    background: var(--bg);
    clip-path: polygon(0 58%, 100% 58%, 100% 100%, 0 100%);
}

.speed-meter-arc {
    position: absolute;
    left: 34px;
    right: 34px;
    top: 30px;
    height: 140px;
    border-radius: 140px 140px 20px 20px;
    border-top: 10px solid rgba(255, 255, 255, .72);
    border-left: 10px solid rgba(255, 255, 255, .54);
    border-right: 10px solid rgba(255, 255, 255, .54);
    opacity: .92;
}

.dark .speed-meter-arc {
    border-color: rgba(255, 255, 255, .28);
}

.speed-meter-needle {
    position: absolute;
    left: 50%;
    top: 61%;
    width: 4px;
    height: 88px;
    border-radius: 999px;
    background: #111827;
    transform-origin: 50% 88%;
    transform: translate(-50%, -88%) rotate(var(--speed-rotation));
    transition: transform .5s cubic-bezier(.2, .9, .2, 1);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

.dark .speed-meter-needle {
    background: #f8fafc;
}

.speed-meter.is-loading .speed-meter-needle {
    animation: speedNeedlePulse 1.4s ease-in-out infinite alternate;
}

@keyframes speedNeedlePulse {
    from { transform: translate(-50%, -88%) rotate(-72deg); }
    to { transform: translate(-50%, -88%) rotate(42deg); }
}

.speed-meter-center {
    position: absolute;
    left: 50%;
    top: 61%;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #111827;
    transform: translate(-50%, -50%);
    border: 4px solid #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}

.dark .speed-meter-center {
    background: #f8fafc;
    border-color: #18181b;
}

.speed-meter-value {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 54px;
    text-align: center;
    font-size: 2.35rem;
    font-weight: 850;
    color: var(--tx);
    letter-spacing: 0;
}

.speed-meter-label {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 34px;
    text-align: center;
    color: var(--tx2);
    font-weight: 700;
    font-size: .84rem;
    text-transform: uppercase;
}

.speed-meter-rating {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 14px;
    text-align: center;
    color: var(--tx2);
    font-size: .88rem;
}

.speed-chart-card {
    min-height: 230px;
    border-radius: 28px;
    border: 1px solid rgba(210, 210, 215, .82);
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--sh);
    padding: 18px;
}

.dark .speed-chart-card {
    background: rgba(29, 29, 31, .84);
    border-color: rgba(58, 58, 60, .86);
}

.speed-chart-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    color: var(--tx);
    margin-bottom: 10px;
}

.speed-chart-head span {
    color: var(--tx2);
    font-size: .88rem;
}

.speed-chart {
    width: 100%;
    height: 154px;
    display: block;
}

.speed-chart line {
    stroke: rgba(148, 163, 184, .35);
    stroke-width: 1;
}

.speed-chart polyline {
    fill: none;
    stroke: #2563eb;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 8px 12px rgba(37, 99, 235, .2));
}

@media (max-width: 760px) {
    .speed-result-grid {
        grid-template-columns: 1fr;
    }

    .speed-meter {
        min-height: 214px;
    }
}

:root {
    --tv-page: #f7f8fb;
    --tv-surface: rgba(255,255,255,.92);
    --tv-surface-strong: #ffffff;
    --tv-ink: #101624;
    --tv-muted: #667085;
    --tv-soft: #eef2f7;
    --tv-line: rgba(16, 24, 40, .10);
    --tv-accent: #315cf6;
    --tv-accent-2: #0f9f8f;
    --tv-glow-1: rgba(49,92,246,.12);
    --tv-glow-2: rgba(15,159,143,.09);
    --tv-page-wash: rgba(255,255,255,.82);
    --tv-page-wash-2: rgba(247,248,251,.96);
    --tv-appbar-bg: rgba(255,255,255,.82);
    --tv-card-radius: 24px;
    --tv-pill-radius: 999px;
    --tv-shadow: 0 18px 50px rgba(16,24,40,.08);
    --tv-shadow-hover: 0 26px 80px rgba(16,24,40,.13);
}

.dark {
    --tv-page: #07111f;
    --tv-surface: rgba(15,23,42,.88);
    --tv-surface-strong: #111c30;
    --tv-ink: #f4f7fb;
    --tv-muted: #a8b3c7;
    --tv-soft: rgba(255,255,255,.08);
    --tv-line: rgba(255,255,255,.12);
    --tv-glow-1: rgba(80,132,255,.16);
    --tv-glow-2: rgba(46,213,182,.10);
    --tv-page-wash: rgba(7,17,31,.70);
    --tv-page-wash-2: rgba(7,17,31,.82);
    --tv-appbar-bg: rgba(7,17,31,.86);
    --tv-shadow: 0 18px 50px rgba(0,0,0,.28);
    --tv-shadow-hover: 0 26px 80px rgba(0,0,0,.40);
}

.theme-aurora {
    --bg:#f4f7fb;
    --bg2:#ffffff;
    --bg3:#eef4ff;
    --bg4:#eefcf6;
    --tx:#0f172a;
    --tx2:#556174;
    --bd:#d7dfec;
    --ac:#2f5cff;
    --ach:#1f49cf;
    --ac2:#0f9d8a;
    --acl:rgba(47,92,255,.10);
    --acl2:rgba(15,157,138,.10);
    --tv-page:#f7f8fb;
    --tv-surface:rgba(255,255,255,.92);
    --tv-surface-strong:#ffffff;
    --tv-ink:#101624;
    --tv-muted:#667085;
    --tv-soft:#eef2f7;
    --tv-line:rgba(16,24,40,.10);
    --tv-accent:#315cf6;
    --tv-accent-2:#0f9f8f;
    --tv-glow-1:rgba(49,92,246,.12);
    --tv-glow-2:rgba(15,159,143,.09);
    --tv-appbar-bg:rgba(255,255,255,.82);
}

.theme-pearl {
    --bg:#f8fafc;
    --bg2:#ffffff;
    --bg3:#f3f7fb;
    --bg4:#e9eef5;
    --tx:#111827;
    --tx2:#5b6678;
    --bd:#d8e0ea;
    --ac:#4f46e5;
    --ach:#3730a3;
    --ac2:#64748b;
    --acl:rgba(79,70,229,.10);
    --acl2:rgba(100,116,139,.10);
    --tv-page:#f8fafc;
    --tv-surface:rgba(255,255,255,.94);
    --tv-surface-strong:#ffffff;
    --tv-ink:#111827;
    --tv-muted:#667085;
    --tv-soft:#eef2f7;
    --tv-line:rgba(17,24,39,.10);
    --tv-accent:#4f46e5;
    --tv-accent-2:#64748b;
    --tv-glow-1:rgba(79,70,229,.10);
    --tv-glow-2:rgba(100,116,139,.08);
    --tv-appbar-bg:rgba(255,255,255,.86);
}

.theme-graphite {
    --tv-page:#f3f4f6;
    --tv-surface:rgba(255,255,255,.94);
    --tv-surface-strong:#ffffff;
    --tv-ink:#111827;
    --tv-muted:#4b5563;
    --tv-soft:#e5e7eb;
    --tv-line:rgba(55,65,81,.14);
    --tv-accent:#374151;
    --tv-accent-2:#6b7280;
    --tv-glow-1:rgba(55,65,81,.10);
    --tv-glow-2:rgba(107,114,128,.08);
    --tv-appbar-bg:rgba(255,255,255,.86);
}

.theme-royal {
    --bg:#f5f3ff;
    --bg2:#ffffff;
    --bg3:#f8f7ff;
    --bg4:#ede9fe;
    --tx:#1e1b4b;
    --tx2:#5b5a86;
    --bd:#ddd6fe;
    --ac:#6d28d9;
    --ach:#5b21b6;
    --ac2:#2563eb;
    --acl:rgba(109,40,217,.12);
    --acl2:rgba(37,99,235,.10);
    --tv-page:#f7f5ff;
    --tv-surface:rgba(255,255,255,.94);
    --tv-surface-strong:#ffffff;
    --tv-ink:#1e1b4b;
    --tv-muted:#636186;
    --tv-soft:#ede9fe;
    --tv-line:rgba(109,40,217,.13);
    --tv-accent:#6d28d9;
    --tv-accent-2:#2563eb;
    --tv-glow-1:rgba(109,40,217,.14);
    --tv-glow-2:rgba(37,99,235,.10);
    --tv-appbar-bg:rgba(255,255,255,.86);
}

.theme-sky {
    --bg:#f0f9ff;
    --bg2:#ffffff;
    --bg3:#f5fbff;
    --bg4:#dff4ff;
    --tx:#082f49;
    --tx2:#3d6680;
    --bd:#bae6fd;
    --ac:#0284c7;
    --ach:#0369a1;
    --ac2:#2563eb;
    --acl:rgba(2,132,199,.12);
    --acl2:rgba(37,99,235,.10);
    --tv-page:#f2fbff;
    --tv-surface:rgba(255,255,255,.94);
    --tv-surface-strong:#ffffff;
    --tv-ink:#082f49;
    --tv-muted:#3d6680;
    --tv-soft:#e0f2fe;
    --tv-line:rgba(2,132,199,.13);
    --tv-accent:#0284c7;
    --tv-accent-2:#2563eb;
    --tv-glow-1:rgba(2,132,199,.14);
    --tv-glow-2:rgba(37,99,235,.10);
    --tv-appbar-bg:rgba(255,255,255,.86);
}

.theme-ocean {
    --tv-page:#eef9ff;
    --tv-surface:rgba(255,255,255,.94);
    --tv-surface-strong:#ffffff;
    --tv-ink:#082f49;
    --tv-muted:#35657e;
    --tv-soft:#dff4ff;
    --tv-line:rgba(2,132,199,.16);
    --tv-accent:#0284c7;
    --tv-accent-2:#06b6d4;
    --tv-glow-1:rgba(2,132,199,.14);
    --tv-glow-2:rgba(6,182,212,.12);
    --tv-appbar-bg:rgba(255,255,255,.86);
}

.theme-mint {
    --bg:#f0fdfa;
    --bg2:#ffffff;
    --bg3:#f5fffc;
    --bg4:#ccfbf1;
    --tx:#042f2e;
    --tx2:#3b6c67;
    --bd:#99f6e4;
    --ac:#0f766e;
    --ach:#115e59;
    --ac2:#10b981;
    --acl:rgba(15,118,110,.12);
    --acl2:rgba(16,185,129,.10);
    --tv-page:#f0fdfa;
    --tv-surface:rgba(255,255,255,.94);
    --tv-surface-strong:#ffffff;
    --tv-ink:#042f2e;
    --tv-muted:#3b6c67;
    --tv-soft:#ccfbf1;
    --tv-line:rgba(15,118,110,.15);
    --tv-accent:#0f766e;
    --tv-accent-2:#10b981;
    --tv-glow-1:rgba(15,118,110,.13);
    --tv-glow-2:rgba(16,185,129,.11);
    --tv-appbar-bg:rgba(255,255,255,.86);
}

.theme-emerald {
    --tv-page:#f0fdf4;
    --tv-surface:rgba(255,255,255,.94);
    --tv-surface-strong:#ffffff;
    --tv-ink:#052e16;
    --tv-muted:#3f6f52;
    --tv-soft:#dcfce7;
    --tv-line:rgba(22,163,74,.15);
    --tv-accent:#16a34a;
    --tv-accent-2:#0d9488;
    --tv-glow-1:rgba(22,163,74,.13);
    --tv-glow-2:rgba(13,148,136,.11);
    --tv-appbar-bg:rgba(255,255,255,.86);
}

.theme-lavender {
    --bg:#fbf7ff;
    --bg2:#ffffff;
    --bg3:#fdfaff;
    --bg4:#f3e8ff;
    --tx:#3b0764;
    --tx2:#735085;
    --bd:#e9d5ff;
    --ac:#9333ea;
    --ach:#7e22ce;
    --ac2:#ec4899;
    --acl:rgba(147,51,234,.12);
    --acl2:rgba(236,72,153,.10);
    --tv-page:#fbf7ff;
    --tv-surface:rgba(255,255,255,.94);
    --tv-surface-strong:#ffffff;
    --tv-ink:#3b0764;
    --tv-muted:#735085;
    --tv-soft:#f3e8ff;
    --tv-line:rgba(147,51,234,.14);
    --tv-accent:#9333ea;
    --tv-accent-2:#ec4899;
    --tv-glow-1:rgba(147,51,234,.13);
    --tv-glow-2:rgba(236,72,153,.09);
    --tv-appbar-bg:rgba(255,255,255,.86);
}

.theme-rose {
    --bg:#fff5f7;
    --bg2:#ffffff;
    --bg3:#fff9fb;
    --bg4:#ffe4ec;
    --tx:#4c0519;
    --tx2:#7e5260;
    --bd:#fecdd3;
    --ac:#e11d48;
    --ach:#be123c;
    --ac2:#f97316;
    --acl:rgba(225,29,72,.12);
    --acl2:rgba(249,115,22,.09);
    --tv-page:#fff5f7;
    --tv-surface:rgba(255,255,255,.94);
    --tv-surface-strong:#ffffff;
    --tv-ink:#4c0519;
    --tv-muted:#7e5260;
    --tv-soft:#ffe4ec;
    --tv-line:rgba(225,29,72,.14);
    --tv-accent:#e11d48;
    --tv-accent-2:#f97316;
    --tv-glow-1:rgba(225,29,72,.12);
    --tv-glow-2:rgba(249,115,22,.09);
    --tv-appbar-bg:rgba(255,255,255,.86);
}

.theme-sunset {
    --tv-page:#fff7ed;
    --tv-surface:rgba(255,255,255,.94);
    --tv-surface-strong:#ffffff;
    --tv-ink:#431407;
    --tv-muted:#7c4a2d;
    --tv-soft:#ffedd5;
    --tv-line:rgba(234,88,12,.16);
    --tv-accent:#ea580c;
    --tv-accent-2:#db2777;
    --tv-glow-1:rgba(234,88,12,.13);
    --tv-glow-2:rgba(219,39,119,.09);
    --tv-appbar-bg:rgba(255,255,255,.86);
}

.dark.theme-midnight {
    --tv-page:#020617;
    --tv-surface:rgba(15,23,42,.90);
    --tv-surface-strong:#0f172a;
    --tv-ink:#f8fafc;
    --tv-muted:#cbd5e1;
    --tv-soft:rgba(255,255,255,.08);
    --tv-line:rgba(255,255,255,.13);
    --tv-accent:#60a5fa;
    --tv-accent-2:#22d3ee;
    --tv-glow-1:rgba(96,165,250,.16);
    --tv-glow-2:rgba(34,211,238,.12);
    --tv-appbar-bg:rgba(2,6,23,.86);
}

.dark.theme-obsidian {
    --bg:#050505;
    --bg2:#111111;
    --bg3:#18181b;
    --bg4:#27272a;
    --tx:#fafafa;
    --tx2:#c7c7cc;
    --bd:#3f3f46;
    --ac:#a1a1aa;
    --ach:#e4e4e7;
    --ac2:#38bdf8;
    --acl:rgba(161,161,170,.14);
    --acl2:rgba(56,189,248,.10);
    --tv-page:#050505;
    --tv-surface:rgba(17,17,17,.92);
    --tv-surface-strong:#111111;
    --tv-ink:#fafafa;
    --tv-muted:#c7c7cc;
    --tv-soft:rgba(255,255,255,.08);
    --tv-line:rgba(255,255,255,.12);
    --tv-accent:#a1a1aa;
    --tv-accent-2:#38bdf8;
    --tv-glow-1:rgba(161,161,170,.12);
    --tv-glow-2:rgba(56,189,248,.10);
    --tv-appbar-bg:rgba(5,5,5,.88);
}

.dark.theme-neon {
    --bg:#070016;
    --bg2:#120522;
    --bg3:#1b0b32;
    --bg4:#261247;
    --tx:#fbf7ff;
    --tx2:#d6c7ea;
    --bd:#4c1d95;
    --ac:#a78bfa;
    --ach:#c4b5fd;
    --ac2:#22d3ee;
    --acl:rgba(167,139,250,.18);
    --acl2:rgba(34,211,238,.14);
    --tv-page:#070016;
    --tv-surface:rgba(18,5,34,.90);
    --tv-surface-strong:#120522;
    --tv-ink:#fbf7ff;
    --tv-muted:#d6c7ea;
    --tv-soft:rgba(167,139,250,.12);
    --tv-line:rgba(196,181,253,.17);
    --tv-accent:#a78bfa;
    --tv-accent-2:#22d3ee;
    --tv-glow-1:rgba(167,139,250,.20);
    --tv-glow-2:rgba(34,211,238,.15);
    --tv-appbar-bg:rgba(7,0,22,.88);
}

.dark.theme-forest-night {
    --bg:#03130d;
    --bg2:#082018;
    --bg3:#0d2d21;
    --bg4:#123a2b;
    --tx:#ecfdf5;
    --tx2:#b6d8c6;
    --bd:#1f513d;
    --ac:#34d399;
    --ach:#6ee7b7;
    --ac2:#a3e635;
    --acl:rgba(52,211,153,.16);
    --acl2:rgba(163,230,53,.12);
    --tv-page:#03130d;
    --tv-surface:rgba(8,32,24,.90);
    --tv-surface-strong:#082018;
    --tv-ink:#ecfdf5;
    --tv-muted:#b6d8c6;
    --tv-soft:rgba(52,211,153,.10);
    --tv-line:rgba(110,231,183,.15);
    --tv-accent:#34d399;
    --tv-accent-2:#a3e635;
    --tv-glow-1:rgba(52,211,153,.16);
    --tv-glow-2:rgba(163,230,53,.11);
    --tv-appbar-bg:rgba(3,19,13,.88);
}

body {
    background: var(--tv-page);
}

.app {
    background:
        linear-gradient(180deg, var(--tv-page-wash), var(--tv-page-wash-2) 340px, var(--tv-page)),
        radial-gradient(circle at 16% -8%, var(--tv-glow-1), transparent 28%),
        radial-gradient(circle at 88% 0%, var(--tv-glow-2), transparent 30%),
        var(--tv-page);
}

.dark.app,
.dark .app {
    background:
        radial-gradient(circle at 14% -8%, var(--tv-glow-1), transparent 28%),
        radial-gradient(circle at 92% 0%, var(--tv-glow-2), transparent 30%),
        var(--tv-page);
}

.mud-topbar {
    min-height: 66px !important;
    background: var(--tv-appbar-bg) !important;
    border-bottom: 1px solid var(--tv-line) !important;
    backdrop-filter: blur(20px);
}

.dark .mud-topbar {
    background: var(--tv-appbar-bg) !important;
}

.nav-inner {
    max-width: 1500px;
    padding: 0 clamp(16px, 3vw, 42px);
    gap: clamp(10px, 1.4vw, 22px);
}

.logo {
    color: var(--tv-ink) !important;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: -.03em;
}

.logo::before {
    width: 30px;
    height: 30px;
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.22), transparent),
        linear-gradient(135deg, var(--tv-accent), var(--tv-accent-2));
    box-shadow: 0 14px 26px rgba(49,92,246,.26);
}

.top-service-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.top-service-menu a,
.nav-category-menu .mud-button-root {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: var(--tv-pill-radius);
    color: var(--tv-muted) !important;
    font-weight: 800;
    font-size: .88rem;
    text-decoration: none;
}

.top-service-menu a:hover,
.top-service-menu a:focus-visible,
.nav-category-menu .mud-button-root:hover,
.nav-category-menu .mud-button-root:focus-visible {
    background: rgba(49,92,246,.09);
    color: var(--tv-accent) !important;
    text-decoration: none;
}

.nav-right {
    margin-left: auto;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-pill-radius);
    background: rgba(255,255,255,.72);
    box-shadow: 0 12px 30px rgba(16,24,40,.05);
}

.dark .nav-right {
    background: rgba(255,255,255,.06);
}

.nav-search-cta {
    min-height: 38px;
    border-radius: var(--tv-pill-radius) !important;
    font-weight: 850 !important;
    text-transform: none !important;
}

.main {
    max-width: 1500px;
    padding: clamp(20px, 3vw, 44px) clamp(15px, 3vw, 42px) 70px;
}

.tool-route .main {
    max-width: none;
    padding: clamp(14px, 2vw, 28px);
}

.studio-shell,
.library-market,
.category-market {
    width: min(1500px, 100%);
    margin: 0 auto;
}

.studio-search-hero {
    padding: clamp(20px, 4vw, 42px);
    border: 1px solid var(--tv-line);
    border-radius: 34px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.70)),
        radial-gradient(circle at 50% 0%, rgba(49,92,246,.12), transparent 36%),
        radial-gradient(circle at 86% 8%, rgba(15,159,143,.10), transparent 32%);
    box-shadow: var(--tv-shadow);
}

.dark .studio-search-hero {
    background:
        linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.78)),
        radial-gradient(circle at 50% 0%, rgba(80,132,255,.16), transparent 36%);
}

.home-command-head {
    max-width: 860px;
    margin: 0 auto 22px;
    text-align: center;
}

.home-command-head h1 {
    margin: 14px 0 8px;
    color: var(--tv-ink);
    font-size: clamp(2.1rem, 5vw, 4.5rem);
    line-height: .98;
    letter-spacing: -.055em;
}

.home-command-head p {
    max-width: 680px;
    margin: 0 auto;
    color: var(--tv-muted);
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.65;
}

.studio-search-wrap {
    max-width: 1040px;
}

.studio-search,
.library-command {
    border: 1px solid rgba(16,24,40,.12);
    border-radius: 26px;
    background: var(--tv-surface-strong);
    box-shadow: 0 22px 70px rgba(16,24,40,.12);
}

.studio-search {
    grid-template-columns: auto minmax(0,1fr) auto;
    padding: 12px 12px 12px 16px;
}

.studio-search > .mud-icon-root {
    color: var(--tv-accent);
}

.studio-search-input .mud-input-root {
    min-height: 52px;
    font-size: 1.05rem;
}

.studio-search .mud-button-root,
.library-command .mud-button-root {
    border-radius: 18px !important;
    min-height: 48px;
    text-transform: none !important;
    font-weight: 850 !important;
}

.studio-search-dropdown {
    top: calc(100% + 12px);
    border-radius: 24px;
    border: 1px solid var(--tv-line);
    background: rgba(255,255,255,.98);
    box-shadow: 0 26px 90px rgba(16,24,40,.18);
}

.dark .studio-search-dropdown {
    background: rgba(15,23,42,.98);
}

.studio-search-option {
    border-radius: 18px;
}

.home-category-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 22px auto 0;
}

.home-category-strip a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 13px;
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-pill-radius);
    background: rgba(255,255,255,.72);
    color: var(--tv-ink);
    font-size: .88rem;
    font-weight: 850;
    text-decoration: none;
}

.home-category-strip a:hover,
.home-category-strip a:focus-visible {
    border-color: rgba(49,92,246,.26);
    background: rgba(49,92,246,.08);
    color: var(--tv-accent);
    text-decoration: none;
}

.home-important-tools {
    width: min(100%, 1180px);
    margin: 16px auto 0;
}

.home-bookmarks-card {
    width: 100%;
    max-width: none;
    margin: 18px auto 0;
    padding: 14px;
    border: 1px solid rgba(17,24,39,.08);
    border-radius: 30px;
    background:
        radial-gradient(circle at 10% 0, rgba(98,89,202,.12), transparent 34%),
        radial-gradient(circle at 92% 0, rgba(15,159,143,.10), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.88));
    box-shadow: 0 22px 60px rgba(17,24,39,.08);
}

.dark .home-bookmarks-card {
    background:
        radial-gradient(circle at 10% 0, rgba(98,89,202,.18), transparent 34%),
        radial-gradient(circle at 92% 0, rgba(15,159,143,.12), transparent 32%),
        linear-gradient(180deg, rgba(15,23,42,.92), rgba(17,24,39,.82));
}

.home-bookmarks-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 2px 12px;
}

.home-bookmarks-title {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.home-bookmarks-title > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(98,89,202,.17), rgba(37,99,235,.10));
    color: var(--tv-accent);
}

.home-bookmarks-title b {
    display: block;
    color: var(--tv-ink);
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.1;
}

.home-bookmarks-title small {
    display: block;
    margin-top: 3px;
    color: var(--tv-muted);
    font-size: .82rem;
    line-height: 1.25;
}

.home-bookmarks-head a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid var(--tv-line);
    border-radius: 999px;
    background: rgba(255,255,255,.7);
    color: var(--tv-accent);
    font-size: .84rem;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.dark .home-bookmarks-head a {
    background: rgba(255,255,255,.08);
}

.home-bookmarks-head a:hover,
.home-bookmarks-head a:focus-visible {
    border-color: rgba(98,89,202,.28);
    background: rgba(98,89,202,.10);
    text-decoration: none;
}

.home-bookmarks-search {
    display: grid;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(17,24,39,.07);
    border-radius: 22px;
    background: rgba(255,255,255,.72);
}

.dark .home-bookmarks-search {
    background: rgba(255,255,255,.06);
}

.home-bookmark-top {
    width: min(100%, 1040px);
    margin: 16px auto 0;
    padding: 12px;
    border: 1px solid var(--tv-line);
    border-radius: 24px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 14px 38px rgba(17,24,39,.06);
}

.dark .home-bookmark-top {
    background: rgba(255,255,255,.06);
}

.home-bookmark-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.home-bookmark-topline span,
.home-bookmark-topline a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--tv-ink);
    font-size: .86rem;
    font-weight: 900;
    text-decoration: none;
}

.home-bookmark-topline a {
    color: var(--tv-accent);
}

.bookmark-add-panel.bookmark-add-panel-top {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.home-important-rail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(17,24,39,.08);
    border-radius: 28px;
    background:
        radial-gradient(circle at 8% 0, rgba(98,89,202,.10), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.90));
    box-shadow: 0 18px 48px rgba(17,24,39,.07);
}

.home-bookmarks-card .home-important-rail {
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.home-important-tool-wrap {
    position: relative;
    min-width: 0;
}

.home-important-tool {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-height: 76px;
    padding: 8px 6px;
    border: 1px solid rgba(17,24,39,.07);
    border-radius: 20px;
    background: rgba(255,255,255,.86);
    color: var(--tv-ink);
    text-align: center;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.home-important-tool:hover,
.home-important-tool:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(98,89,202,.25);
    box-shadow: 0 14px 32px rgba(17,24,39,.09);
    color: var(--tv-ink);
    text-decoration: none;
}

.home-important-tool span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 15px;
    background:
        linear-gradient(145deg, rgba(98,89,202,.15), rgba(37,99,235,.09));
    color: var(--tv-accent);
}

.home-important-tool b {
    max-width: 100%;
    color: var(--tv-ink);
    font-size: .72rem;
    font-weight: 950;
    line-height: 1.18;
    white-space: normal;
    overflow-wrap: anywhere;
}

.home-bookmark-remove {
    top: -7px !important;
    right: -7px !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    background: var(--tv-surface-strong) !important;
}

@media (max-width: 640px) {
    .home-bookmarks-card {
        padding: 12px;
        border-radius: 24px;
    }

    .home-bookmarks-head {
        align-items: flex-start;
    }

    .home-bookmarks-title small {
        display: none;
    }

    .home-bookmarks-head a {
        min-height: 32px;
        padding: 6px 9px;
        font-size: .78rem;
    }
}

.studio-quick-panel,
.studio-section,
.library-group,
.status-legend-panel {
    border: 1px solid var(--tv-line);
    border-radius: 30px;
    background: var(--tv-surface);
    box-shadow: var(--tv-shadow);
}

.studio-panel-head {
    margin-bottom: 18px;
}

.studio-panel-head h2 {
    color: var(--tv-ink);
    font-size: clamp(1.35rem, 2vw, 2rem);
    letter-spacing: -.04em;
}

.studio-panel-head p {
    color: var(--tv-muted);
}

.studio-result-grid,
.library-tool-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.tcard,
.market-tool-card,
.studio-category-card,
.studio-quick-tile,
.studio-menu-item {
    border: 1px solid var(--tv-line);
    border-radius: 24px;
    background: var(--tv-surface-strong);
    box-shadow: 0 14px 36px rgba(16,24,40,.06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.tcard,
.market-tool-card {
    min-height: 150px;
}

.tcard:hover,
.market-tool-card:hover,
.studio-category-card:hover,
.studio-quick-tile:hover,
.studio-menu-item:hover {
    transform: translateY(-3px);
    border-color: rgba(49,92,246,.25);
    box-shadow: var(--tv-shadow-hover);
    text-decoration: none;
}

.tcard {
    padding: 18px;
    gap: 14px;
}

.tcard-icon,
.market-tool-icon,
.studio-menu-item span:first-child,
.studio-quick-tile span,
.category-market-icon,
.studio-category-head > span {
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(49,92,246,.14), rgba(15,159,143,.12));
    color: var(--tv-accent);
}

.tcard-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.tcard-topline b,
.market-tool-copy b,
.studio-category-head b {
    color: var(--tv-ink);
    letter-spacing: -.015em;
}

.tcard-arrow {
    display: inline-grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-pill-radius);
    color: var(--tv-accent);
    opacity: .78;
}

.tcard-copy p,
.market-tool-copy small,
.studio-category-head small {
    color: var(--tv-muted);
}

.tool-card-badges em,
.market-tool-badges em {
    border: 0;
    background: var(--tv-soft);
    color: var(--tv-muted);
    font-size: .72rem;
    font-weight: 850;
}

.studio-category-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}

.studio-category-card {
    padding: 18px;
}

.studio-tool-chips a {
    background: var(--tv-soft);
    color: var(--tv-ink);
    font-weight: 750;
}

.privacy-band {
    border-radius: 34px;
    background:
        radial-gradient(circle at 12% 0%, rgba(80,132,255,.22), transparent 34%),
        linear-gradient(135deg, #101624, #17233a);
    color: #fff;
}

.privacy-band p,
.privacy-band-grid span {
    color: rgba(255,255,255,.78);
}

.privacy-band-grid span {
    border-color: rgba(255,255,255,.14);
    background: rgba(255,255,255,.08);
}

.library-hero,
.category-market-hero {
    align-items: center;
    padding: clamp(28px, 5vw, 66px);
    border: 1px solid var(--tv-line);
    border-radius: 34px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72)),
        radial-gradient(circle at 14% 0%, rgba(49,92,246,.12), transparent 34%),
        radial-gradient(circle at 90% 16%, rgba(15,159,143,.10), transparent 28%);
    box-shadow: var(--tv-shadow);
    text-align: left;
}

.dark .library-hero,
.dark .category-market-hero {
    background:
        linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.78)),
        radial-gradient(circle at 14% 0%, rgba(80,132,255,.15), transparent 34%);
}

.library-hero h1,
.category-market-hero h1 {
    max-width: 900px;
    margin: 12px 0 10px;
    color: var(--tv-ink);
    font-size: clamp(2rem, 4.4vw, 4.6rem);
    line-height: .98;
    letter-spacing: -.055em;
}

.library-hero p,
.category-market-hero p {
    max-width: 780px;
    margin: 0;
    color: var(--tv-muted);
}

.library-command {
    position: sticky;
    top: 78px;
    z-index: 10;
    grid-template-columns: minmax(260px, 1.6fr) minmax(170px, .7fr) minmax(170px, .7fr) minmax(170px, .7fr);
    max-width: none;
    margin: 18px 0 0;
    padding: 12px;
    border-radius: 24px;
}

.library-summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 0;
}

.library-summary-row span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-pill-radius);
    background: rgba(255,255,255,.70);
    color: var(--tv-muted);
    font-size: .86rem;
    font-weight: 760;
}

.library-summary-row b {
    color: var(--tv-ink);
}

.studio-menu {
    gap: 10px;
    padding-bottom: 6px;
}

.studio-menu-item {
    min-width: 170px;
    padding: 12px;
}

.category-search-card {
    position: sticky;
    top: 78px;
    z-index: 9;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin: 16px 0;
    padding: 12px;
    border: 1px solid var(--tv-line);
    border-radius: 24px;
    background: var(--tv-surface-strong);
    box-shadow: var(--tv-shadow);
}

.category-search-card span {
    color: var(--tv-muted);
    font-weight: 850;
    white-space: nowrap;
}

.category-empty {
    margin-top: 18px;
}

.tool-page {
    max-width: 1280px;
}

.tool-head {
    border: 1px solid var(--tv-line);
    border-radius: 32px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.80)),
        radial-gradient(circle at 0 0, rgba(49,92,246,.12), transparent 34%);
    box-shadow: var(--tv-shadow);
}

.dark .tool-head {
    background:
        linear-gradient(180deg, rgba(15,23,42,.94), rgba(15,23,42,.82)),
        radial-gradient(circle at 0 0, rgba(80,132,255,.14), transparent 34%);
}

.tool-head h1 {
    color: var(--tv-ink);
    letter-spacing: -.055em;
}

.tool-title-icon {
    border-radius: 20px;
}

.tool-panel,
.calc-card,
.pdf-panel,
.tool-meta-grid article,
.tool-content-section,
.how-to {
    border: 1px solid var(--tv-line);
    border-radius: 28px;
    background: var(--tv-surface-strong);
    box-shadow: var(--tv-shadow);
}

.tool-split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    gap: 18px;
    align-items: start;
}

.btn,
.btn-p,
.btn-s,
.copybtn,
.mud-button-root {
    text-transform: none !important;
}

.btn,
.btn-p,
.btn-s {
    min-height: 42px;
    border-radius: var(--tv-pill-radius);
    font-weight: 850;
}

.btn-p {
    background: linear-gradient(135deg, var(--tv-accent), #2346c9);
    box-shadow: 0 16px 34px rgba(49,92,246,.22);
}

.ta,
.form-row input,
.form-row select,
.form-col input,
.form-col select,
.form-col textarea,
.form-row textarea {
    border-radius: 18px;
    background: #fbfcff;
    border-color: var(--tv-line);
}

.dark .ta,
.dark .form-row input,
.dark .form-row select,
.dark .form-col input,
.dark .form-col select,
.dark .form-col textarea,
.dark .form-row textarea {
    background: rgba(255,255,255,.06);
}

.footer {
    border-top: 1px solid var(--tv-line);
    background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(246,248,252,.96));
}

.dark .footer {
    background: linear-gradient(180deg, rgba(15,23,42,.88), rgba(7,17,31,.96));
}

.footer-inner {
    max-width: 1500px;
}

.footer-hero,
.footer-column {
    border-radius: 26px;
    border-color: var(--tv-line);
}

@media (max-width: 1180px) {
    .top-service-menu {
        display: none;
    }

    .mobile-menu {
        display: inline-flex !important;
    }

    .library-command {
        position: static;
        grid-template-columns: 1fr 1fr;
    }

    .tool-split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .nav-inner {
        padding: 0 12px;
    }

    .nav-right {
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .nav-search-cta .mud-button-label {
        font-size: 0;
    }

    .main {
        padding: 16px 12px 54px;
    }

    .studio-search-hero,
    .library-hero,
    .category-market-hero,
    .studio-quick-panel,
    .studio-section,
    .library-group,
    .privacy-band {
        border-radius: 24px;
        padding: 18px;
    }

    .home-command-head h1,
    .library-hero h1,
    .category-market-hero h1 {
        font-size: clamp(2rem, 12vw, 3.2rem);
        letter-spacing: -.045em;
    }

    .studio-search {
        grid-template-columns: auto minmax(0, 1fr);
        border-radius: 22px;
    }

    .studio-search .mud-button-root {
        grid-column: 1 / -1;
        width: 100%;
    }

    .home-important-tools {
        margin: -2px auto 14px;
    }

    .home-important-rail {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        padding: 8px;
        border-radius: 22px;
    }

    .home-important-tool {
        min-height: 76px;
        padding: 8px 5px;
        border-radius: 18px;
    }

    .home-important-tool span {
        width: 36px;
        height: 36px;
        border-radius: 14px;
    }

    .home-important-tool b {
        font-size: .68rem;
    }

    .library-command,
    .category-search-card {
        grid-template-columns: 1fr;
    }

    .category-search-card span {
        white-space: normal;
    }

    .studio-result-grid,
    .library-tool-grid,
    .studio-category-grid {
        grid-template-columns: 1fr;
    }

    .tcard,
    .market-tool-card {
        min-height: 0;
    }

    .tool-head {
        border-radius: 24px;
    }

    .tool-head > div:nth-child(2) {
        padding-right: 0;
    }

    .tool-head-actions {
        position: static;
        margin-top: 8px;
    }
}

/* Premium MudBlazor visual system */
:root {
    --bg: #f4f7fb;
    --bg2: #ffffff;
    --bg3: #f0f4ff;
    --bg4: #ecfdf5;
    --tx: #111827;
    --tx2: #64748b;
    --bd: rgba(15, 23, 42, .105);
    --ac: #6259ca;
    --ach: #5146b8;
    --ac2: #0ea5e9;
    --acl: rgba(98, 89, 202, .11);
    --acl2: rgba(14, 165, 233, .10);
    --gr: #16a34a;
    --rd: #ef4444;
    --tv-page: #f4f7fb;
    --tv-surface: rgba(255,255,255,.86);
    --tv-surface-strong: #ffffff;
    --tv-ink: #111827;
    --tv-muted: #64748b;
    --tv-soft: #eef2ff;
    --tv-line: rgba(15, 23, 42, .105);
    --tv-accent: #6259ca;
    --tv-accent-2: #0ea5e9;
    --tv-accent-3: #22c55e;
    --tv-warning: #f59e0b;
    --tv-card-radius: 22px;
    --tv-pill-radius: 999px;
    --tv-shadow: 0 18px 44px rgba(17, 24, 39, .075);
    --tv-shadow-hover: 0 26px 70px rgba(17, 24, 39, .13);
    --r: 18px;
    --mw: 1480px;
    --f: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}

.dark {
    --bg: #0b1120;
    --bg2: #111827;
    --bg3: #172033;
    --bg4: #10251f;
    --tx: #f8fafc;
    --tx2: #cbd5e1;
    --bd: rgba(255,255,255,.12);
    --ac: #8b7cff;
    --ach: #a69bff;
    --ac2: #38bdf8;
    --acl: rgba(139, 124, 255, .16);
    --acl2: rgba(56, 189, 248, .12);
    --gr: #22c55e;
    --rd: #f87171;
    --tv-page: #0b1120;
    --tv-surface: rgba(17, 24, 39, .86);
    --tv-surface-strong: #111827;
    --tv-ink: #f8fafc;
    --tv-muted: #cbd5e1;
    --tv-soft: rgba(255,255,255,.08);
    --tv-line: rgba(255,255,255,.12);
    --tv-accent: #8b7cff;
    --tv-accent-2: #38bdf8;
    --tv-accent-3: #34d399;
    --tv-warning: #fbbf24;
    --tv-shadow: 0 18px 44px rgba(0,0,0,.28);
    --tv-shadow-hover: 0 28px 76px rgba(0,0,0,.38);
}

html,
body,
.mud-typography,
.mud-button-root,
.mud-input,
.mud-select {
    font-family: var(--f) !important;
}

body {
    color: var(--tv-ink);
    background:
        radial-gradient(circle at 9% -10%, rgba(98,89,202,.12), transparent 32%),
        radial-gradient(circle at 92% -8%, rgba(14,165,233,.13), transparent 29%),
        linear-gradient(180deg, #fbfcff 0, #f4f7fb 360px, var(--tv-page) 100%);
}

.dark body,
.dark.app,
.dark .app {
    background:
        radial-gradient(circle at 10% -8%, rgba(139,124,255,.18), transparent 31%),
        radial-gradient(circle at 92% -8%, rgba(56,189,248,.13), transparent 29%),
        linear-gradient(180deg, #111827 0, #0b1120 420px, var(--tv-page) 100%);
}

.app {
    background:
        radial-gradient(circle at 9% -10%, rgba(98,89,202,.12), transparent 32%),
        radial-gradient(circle at 92% -8%, rgba(14,165,233,.13), transparent 29%),
        linear-gradient(180deg, rgba(255,255,255,.68), rgba(244,247,251,.95) 420px, var(--tv-page) 100%);
}

.mud-topbar {
    min-height: 68px !important;
    background: rgba(255,255,255,.88) !important;
    border-bottom: 1px solid var(--tv-line) !important;
    box-shadow: 0 12px 32px rgba(15,23,42,.055) !important;
    backdrop-filter: blur(18px);
}

.dark .mud-topbar {
    background: rgba(17,24,39,.88) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.24) !important;
}

.mud-drawer,
.mud-popover,
.mud-menu {
    background: var(--tv-surface-strong) !important;
    color: var(--tv-ink) !important;
}

.mud-paper,
.mud-card,
.mud-table,
.mud-list,
.mud-expansion-panels,
.mud-picker {
    border-color: var(--tv-line) !important;
    background-color: var(--tv-surface-strong) !important;
    color: var(--tv-ink) !important;
}

.mud-paper,
.mud-card {
    border-radius: var(--tv-card-radius) !important;
    box-shadow: var(--tv-shadow) !important;
}

.mud-card-content {
    padding: clamp(18px, 2vw, 28px) !important;
}

.mud-button-root {
    min-height: 40px;
    border-radius: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.mud-button-filled-primary,
.btn-p {
    background: linear-gradient(135deg, var(--tv-accent), var(--tv-accent-2)) !important;
    color: #fff !important;
    box-shadow: 0 16px 34px rgba(98,89,202,.24) !important;
}

.mud-button-filled-secondary {
    background: linear-gradient(135deg, var(--tv-accent-2), var(--tv-accent-3)) !important;
    color: #fff !important;
}

.mud-button-outlined,
.btn-s {
    border-color: var(--tv-line) !important;
    background: rgba(255,255,255,.68) !important;
    color: var(--tv-ink) !important;
}

.dark .mud-button-outlined,
.dark .btn-s {
    background: rgba(255,255,255,.06) !important;
}

.mud-input-root,
.mud-input-outlined,
.ta,
.form-row input,
.form-row select,
.form-col input,
.form-col select,
.form-col textarea,
.form-row textarea {
    border-radius: 16px !important;
    background: rgba(255,255,255,.86) !important;
    color: var(--tv-ink) !important;
}

.dark .mud-input-root,
.dark .mud-input-outlined,
.dark .ta,
.dark .form-row input,
.dark .form-row select,
.dark .form-col input,
.dark .form-col select,
.dark .form-col textarea,
.dark .form-row textarea {
    background: rgba(255,255,255,.065) !important;
}

.mud-input-root.mud-focused,
.mud-input-root:focus-within,
.ta:focus,
.form-row input:focus,
.form-row select:focus,
.form-col input:focus,
.form-col select:focus,
.form-col textarea:focus,
.form-row textarea:focus {
    border-color: rgba(98,89,202,.48) !important;
    box-shadow: 0 0 0 4px rgba(98,89,202,.12) !important;
}

h1[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus,
h3[tabindex="-1"]:focus,
.sr-only:focus {
    outline: none !important;
}

.nav-inner {
    max-width: var(--mw);
}

.logo {
    font-size: 1.05rem;
    letter-spacing: -.02em;
}

.logo::before {
    background:
        linear-gradient(135deg, rgba(255,255,255,.24), transparent),
        linear-gradient(135deg, var(--tv-accent), var(--tv-accent-2));
    box-shadow: 0 14px 28px rgba(98,89,202,.25);
}

.top-service-menu a,
.nav-category-menu .mud-button-root,
.drawer-menu .mud-nav-link {
    color: var(--tv-muted) !important;
}

.top-service-menu a:hover,
.top-service-menu a:focus-visible,
.nav-category-menu .mud-button-root:hover,
.nav-category-menu .mud-button-root:focus-visible,
.drawer-menu .mud-nav-link:hover {
    background: var(--tv-soft) !important;
    color: var(--tv-accent) !important;
}

.nav-right {
    background: rgba(255,255,255,.76);
    border: 1px solid var(--tv-line);
    box-shadow: 0 16px 34px rgba(15,23,42,.06);
}

.dark .nav-right {
    background: rgba(255,255,255,.07);
}

.studio-search-hero,
.library-hero,
.category-market-hero,
.tool-head,
.legal-hero,
.info-hero,
.prompt-hero-card,
.api-doc-hero {
    border: 1px solid var(--tv-line) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.74)),
        radial-gradient(circle at 10% 0%, rgba(98,89,202,.14), transparent 32%),
        radial-gradient(circle at 88% 10%, rgba(14,165,233,.13), transparent 30%) !important;
    box-shadow: var(--tv-shadow) !important;
}

.dark .studio-search-hero,
.dark .library-hero,
.dark .category-market-hero,
.dark .tool-head,
.dark .legal-hero,
.dark .info-hero,
.dark .prompt-hero-card,
.dark .api-doc-hero {
    background:
        linear-gradient(180deg, rgba(17,24,39,.94), rgba(17,24,39,.78)),
        radial-gradient(circle at 10% 0%, rgba(139,124,255,.17), transparent 32%),
        radial-gradient(circle at 88% 10%, rgba(56,189,248,.12), transparent 30%) !important;
}

.studio-kicker,
.library-kicker,
.category-kicker {
    border-color: rgba(98,89,202,.18);
    background: rgba(98,89,202,.09);
    color: var(--tv-accent);
}

.studio-search,
.library-command,
.category-search-card,
.studio-quick-panel,
.studio-section,
.library-group,
.status-legend-panel,
.tool-panel,
.calc-card,
.pdf-panel,
.tool-meta-grid article,
.tool-content-section,
.how-to,
.legal-panel,
.legal-card,
.info-card,
.auth-card,
.webhook-card {
    border: 1px solid var(--tv-line) !important;
    border-radius: var(--tv-card-radius) !important;
    background: var(--tv-surface-strong) !important;
    box-shadow: var(--tv-shadow) !important;
}

.tcard,
.market-tool-card,
.studio-category-card,
.studio-quick-tile,
.studio-menu-item,
.tool-list-item,
.dashboard-tile,
.catcard,
.tcard-sm {
    border: 1px solid var(--tv-line) !important;
    border-radius: var(--tv-card-radius) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.90)) !important;
    box-shadow: 0 14px 36px rgba(15,23,42,.06) !important;
}

.dark .tcard,
.dark .market-tool-card,
.dark .studio-category-card,
.dark .studio-quick-tile,
.dark .studio-menu-item,
.dark .tool-list-item,
.dark .dashboard-tile,
.dark .catcard,
.dark .tcard-sm {
    background:
        linear-gradient(180deg, rgba(17,24,39,.98), rgba(17,24,39,.88)) !important;
}

.tcard:hover,
.market-tool-card:hover,
.studio-category-card:hover,
.studio-quick-tile:hover,
.studio-menu-item:hover,
.tool-list-item:hover,
.dashboard-tile:hover,
.catcard:hover,
.tcard-sm:hover {
    transform: translateY(-4px);
    border-color: rgba(98,89,202,.34) !important;
    box-shadow: var(--tv-shadow-hover) !important;
}

.tcard-icon,
.market-tool-icon,
.studio-menu-item span:first-child,
.studio-quick-tile span,
.category-market-icon,
.studio-category-head > span,
.footer-logo-mark,
.tool-title-icon {
    background:
        linear-gradient(135deg, rgba(98,89,202,.16), rgba(14,165,233,.13)) !important;
    color: var(--tv-accent) !important;
}

.tool-card-badges em,
.market-tool-badges em,
.library-summary-row span,
.footer-chip-row span {
    background: var(--tv-soft) !important;
    color: var(--tv-muted) !important;
    border: 1px solid rgba(98,89,202,.10) !important;
}

.studio-panel-head h2,
.library-hero h1,
.category-market-hero h1,
.tool-head h1,
.legal-hero h1,
.info-hero h1 {
    color: var(--tv-ink);
}

.studio-panel-head p,
.library-hero p,
.category-market-hero p,
.tool-head p,
.legal-hero p,
.info-hero p,
.muted {
    color: var(--tv-muted) !important;
}

.privacy-band {
    background:
        radial-gradient(circle at 12% 0%, rgba(139,124,255,.26), transparent 32%),
        radial-gradient(circle at 88% 0%, rgba(56,189,248,.18), transparent 30%),
        linear-gradient(135deg, #111827, #1e1b4b) !important;
}

.footer {
    background:
        radial-gradient(circle at 12% 0%, rgba(98,89,202,.08), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(244,247,251,.98)) !important;
}

.dark .footer {
    background:
        radial-gradient(circle at 12% 0%, rgba(139,124,255,.12), transparent 28%),
        linear-gradient(180deg, rgba(17,24,39,.88), rgba(11,17,32,.98)) !important;
}

.footer-hero,
.footer-column {
    background: var(--tv-surface-strong) !important;
    border: 1px solid var(--tv-line) !important;
    box-shadow: var(--tv-shadow) !important;
}

.global-tool-close,
.floating-contact-tab,
.tool-guide-toggle {
    box-shadow: 0 18px 42px rgba(98,89,202,.18) !important;
}

@media (max-width: 760px) {
    .mud-topbar {
        min-height: 60px !important;
    }

    .studio-search-hero,
    .library-hero,
    .category-market-hero,
    .studio-quick-panel,
    .studio-section,
    .library-group,
    .tool-head,
    .legal-hero,
    .info-hero {
        border-radius: 22px !important;
    }

    .mud-card,
    .mud-paper,
    .tcard,
    .market-tool-card,
    .studio-category-card,
    .studio-quick-tile,
    .tool-panel,
    .calc-card {
        border-radius: 20px !important;
    }
}

/* Full-page layout pass */
:root {
    --mw: 100%;
}

.main,
.tool-route .main {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    padding-left: clamp(12px, 2.2vw, 34px) !important;
    padding-right: clamp(12px, 2.2vw, 34px) !important;
}

.nav-inner,
.footer-inner,
.studio-shell,
.library-market,
.category-market,
.tool-page,
.tool-route .tool-page,
.prompt-generator-studio,
.api-doc-studio,
.legal-page,
.info-page,
.about-page {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

.mud-container.prompt-generator-studio,
.mud-container.api-doc-studio {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.studio-search-hero,
.studio-section,
.studio-quick-panel,
.library-hero,
.library-command,
.library-group,
.category-market-hero,
.category-search-card,
.tool-head,
.tool-panel,
.tool-content-section,
.how-to,
.related,
.prompt-hero-card,
.prompt-form-panel,
.prompt-output-panel,
.api-doc-hero,
.api-doc-section,
.footer-hero,
.footer-column {
    max-width: none !important;
}

.footer-inner {
    padding-left: clamp(16px, 2.2vw, 36px) !important;
    padding-right: clamp(16px, 2.2vw, 36px) !important;
}

/* Compact tool cards: keep pages scannable and expose full descriptions via tooltip/title. */
.library-tool-grid,
.studio-result-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 10px !important;
}

.tool-card-tooltip-wrap,
.tool-card-tooltip-wrap > .mud-tooltip-root,
.tool-card-tooltip-wrap > span,
.tool-card-tooltip-wrap > a {
    display: block;
    min-width: 0;
    height: 100%;
}

.tool-card-tooltip-wrap .tcard,
.tool-card-tooltip-wrap .market-tool-card,
.tcard,
.market-tool-card {
    min-height: 0 !important;
}

.tcard,
.market-tool-card {
    padding: 10px 12px !important;
    gap: 10px !important;
    border-radius: 16px !important;
    align-items: center !important;
}

.market-tool-card {
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
}

.tcard-icon,
.market-tool-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex-basis: 34px !important;
    border-radius: 12px !important;
}

.tcard-copy,
.market-tool-copy {
    min-width: 0;
}

.market-tool-copy b,
.tcard-topline b,
.tcard-copy b {
    max-width: 100%;
    margin-bottom: 2px !important;
    overflow: hidden;
    color: var(--tv-ink);
    font-size: .92rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.single-library .library-tool-grid .market-tool-copy small {
    display: none !important;
}

.tcard-copy p {
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden;
    color: var(--tv-muted);
    font-size: .78rem;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.market-tool-copy small {
    margin: 0 !important;
    overflow: hidden;
    color: var(--tv-muted);
    font-size: .78rem;
    line-height: 1.25;
}

.tcard-copy small {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: var(--tv-muted);
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-tool-badges,
.tool-card-badges {
    gap: 4px !important;
}

.market-tool-badges {
    grid-column: auto !important;
    align-self: center;
    justify-content: flex-end;
    min-width: max-content;
}

.market-tool-badges em,
.tool-card-badges em {
    padding: 4px 7px !important;
    font-size: .66rem !important;
    line-height: 1 !important;
}

.tcard-arrow {
    width: 26px !important;
    height: 26px !important;
    flex-basis: 26px !important;
}

@media (max-width: 760px) {
    .library-tool-grid,
    .studio-result-grid {
        grid-template-columns: 1fr !important;
    }

    .market-tool-card {
        grid-template-columns: 34px minmax(0, 1fr) !important;
    }

    .market-tool-badges {
        grid-column: 2 / -1 !important;
        justify-content: flex-start;
        min-width: 0;
    }
}

/* Single-page style tool library: fewer menus, stronger search, compact results. */
.single-library {
    display: grid;
    gap: 14px;
}

.single-library-hero {
    padding: clamp(20px, 3vw, 34px) !important;
}

.single-library-hero h1 {
    max-width: 820px;
}

.single-library-command {
    position: sticky;
    top: 74px;
    z-index: 12;
    grid-template-columns: minmax(280px, 1.4fr) minmax(180px, .55fr) minmax(180px, .55fr) !important;
    margin-top: 0 !important;
}

.compact-summary {
    margin: 0 !important;
}

.compact-summary .link-button {
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid var(--tv-line);
    border-radius: 999px;
    background: var(--tv-surface-strong);
    color: var(--tv-accent);
    font: inherit;
    font-size: .86rem;
    font-weight: 850;
    cursor: pointer;
}

.compact-summary .link-button:hover,
.compact-summary .link-button:focus-visible {
    background: rgba(98,89,202,.08);
    outline: 2px solid rgba(98,89,202,.18);
    outline-offset: 2px;
}

.single-tool-results {
    margin-top: 0 !important;
}

.single-tool-results .studio-panel-head {
    margin-bottom: 12px;
}

.single-tool-results .studio-panel-head h2 {
    font-size: 1.15rem;
}

.single-tool-results .studio-panel-head p {
    font-size: .9rem;
}

.tree-tool-results {
    overflow: visible;
}

.tool-tree-grid {
    display: block;
    column-count: 1;
    column-gap: 18px;
}

.tool-tree {
    --tree-accent: #6259ca;
    --tree-accent-soft: rgba(98, 89, 202, .12);
    --tree-accent-line: rgba(98, 89, 202, .24);
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0 0 18px;
    break-inside: avoid;
    page-break-inside: avoid;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 26px;
    background:
        radial-gradient(circle at 5% 0, var(--tree-accent-soft), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.95));
    box-shadow: 0 20px 54px rgba(15, 23, 42, .07);
}

.tool-tree::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -58px;
    width: 180px;
    height: 180px;
    border-radius: 42% 58% 49% 51%;
    background: radial-gradient(circle, var(--tree-accent-soft), transparent 68%);
    pointer-events: none;
}

.tool-tree-ai { --tree-accent: #7c3aed; --tree-accent-soft: rgba(124, 58, 237, .13); --tree-accent-line: rgba(124, 58, 237, .26); }
.tool-tree-developer,
.tool-tree-json { --tree-accent: #2563eb; --tree-accent-soft: rgba(37, 99, 235, .12); --tree-accent-line: rgba(37, 99, 235, .24); }
.tool-tree-finance { --tree-accent: #059669; --tree-accent-soft: rgba(5, 150, 105, .12); --tree-accent-line: rgba(5, 150, 105, .24); }
.tool-tree-security { --tree-accent: #dc2626; --tree-accent-soft: rgba(220, 38, 38, .10); --tree-accent-line: rgba(220, 38, 38, .22); }
.tool-tree-network,
.tool-tree-seo { --tree-accent: #0891b2; --tree-accent-soft: rgba(8, 145, 178, .12); --tree-accent-line: rgba(8, 145, 178, .24); }
.tool-tree-converter { --tree-accent: #0f766e; --tree-accent-soft: rgba(15, 118, 110, .12); --tree-accent-line: rgba(15, 118, 110, .24); }
.tool-tree-datetime { --tree-accent: #4f46e5; --tree-accent-soft: rgba(79, 70, 229, .12); --tree-accent-line: rgba(79, 70, 229, .24); }
.tool-tree-games { --tree-accent: #f59e0b; --tree-accent-soft: rgba(245, 158, 11, .13); --tree-accent-line: rgba(245, 158, 11, .25); }
.tool-tree-utility,
.tool-tree-text { --tree-accent: #475569; --tree-accent-soft: rgba(71, 85, 105, .10); --tree-accent-line: rgba(71, 85, 105, .22); }

.tool-tree-head {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 18px;
    color: var(--tv-ink);
    text-decoration: none;
}

.tool-tree-head:hover,
.tool-tree-head:focus-visible {
    color: var(--tv-ink);
    text-decoration: none;
}

.tool-tree-head-icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 18px;
    background:
        linear-gradient(145deg, var(--tree-accent-soft), rgba(255,255,255,.78));
    color: var(--tree-accent);
}

.tool-tree-head b,
.tool-tree-head small {
    display: block;
}

.tool-tree-head b {
    font-size: 1.12rem;
    font-weight: 950;
    line-height: 1.22;
    overflow-wrap: anywhere;
}

.tool-tree-head small {
    margin-top: 4px;
    color: var(--tv-muted);
    font-size: .84rem;
    font-weight: 800;
}

.tool-tree-head small span {
    display: inline-flex;
    align-items: center;
}

.tool-tree-head small span:first-child {
    margin-right: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--tree-accent-soft);
    color: var(--tree-accent);
    font-size: .72rem;
    font-weight: 950;
}

.tool-tree-list {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 0 14px 16px 42px;
}

.tool-tree-list::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 28px;
    left: 39px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--tree-accent-line), rgba(148,163,184,.10));
}

.tool-tree-item {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 28px;
    gap: 12px;
    align-items: center;
    min-height: 74px;
    padding: 12px 12px 12px 0;
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 20px;
    background: rgba(255,255,255,.90);
    color: var(--tv-ink);
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .045);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.tool-tree-item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -18px;
    width: 24px;
    height: 2px;
    border-radius: 999px;
    background: var(--tree-accent-line);
}

.tool-tree-item:hover,
.tool-tree-item:focus-visible {
    transform: translateY(-1px);
    border-color: var(--tree-accent-line);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .08);
    color: var(--tv-ink);
    text-decoration: none;
}

.tool-tree-node {
    position: relative;
    z-index: 1;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 14px;
    background: var(--tree-accent-soft);
    color: var(--tree-accent);
    box-shadow: 0 0 0 8px rgba(248,250,252,.95);
}

.tool-tree-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.tool-tree-title {
    color: var(--tv-ink);
    font-size: .98rem;
    font-weight: 900;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
}

.tool-tree-description {
    color: var(--tv-muted);
    font-size: .84rem;
    font-weight: 650;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
}

.tool-tree-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.tool-tree-badges em {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--tree-accent-soft);
    color: var(--tree-accent);
    font-size: .68rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
}

.tool-tree-open {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: var(--tree-accent-soft);
    color: var(--tree-accent);
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1;
}

@media (max-width: 980px) {
    .single-library-command {
        position: static;
        grid-template-columns: 1fr !important;
    }

    .tool-tree-grid { column-count: 1; }
}

@media (min-width: 1060px) {
    .tool-tree-grid { column-count: 2; }
}

/* Category pages should read like curated pages, not dense search results. */
.readable-category-page {
    display: grid;
    gap: 16px;
}

.readable-category-hero {
    min-height: 0 !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: clamp(14px, 2vw, 22px) !important;
    align-items: center !important;
    padding: clamp(20px, 3vw, 34px) !important;
}

.readable-category-hero .category-market-icon {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    border-radius: 18px !important;
}

.readable-category-hero h1 {
    margin: 8px 0 8px !important;
    font-size: clamp(2rem, 3.4vw, 3.6rem) !important;
    line-height: 1.02 !important;
}

.readable-category-hero p {
    max-width: 860px !important;
    font-size: clamp(.98rem, 1.1vw, 1.08rem) !important;
    line-height: 1.6 !important;
}

.readable-category-page .category-search-card {
    position: static !important;
    margin: 0 !important;
}

.readable-category-grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: min(100%, 980px);
    margin: 0 auto;
}

.category-readable-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    min-height: 82px;
    padding: 14px 16px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 20px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
    color: var(--tv-ink);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.category-readable-card:hover {
    transform: translateY(-2px);
    border-color: rgba(98, 89, 202, .34);
    box-shadow: 0 22px 48px rgba(15, 23, 42, .10);
    color: var(--tv-ink);
    text-decoration: none;
}

.category-readable-icon {
    display: grid;
    width: 48px;
    height: 48px;
    min-width: 48px;
    place-items: center;
    border-radius: 15px;
    background:
        linear-gradient(145deg, rgba(98,89,202,.16), rgba(37,99,235,.10));
    color: var(--tv-accent);
}

.category-readable-copy {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.category-readable-title {
    display: block;
    color: var(--tv-ink);
    font-size: 1.02rem;
    font-weight: 900;
    line-height: 1.32;
    white-space: normal;
    overflow-wrap: anywhere;
}

.category-readable-description {
    display: block;
    color: var(--tv-muted);
    font-size: .89rem;
    font-weight: 650;
    line-height: 1.48;
    white-space: normal;
    overflow-wrap: anywhere;
}

.category-readable-badges {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    margin-top: 2px;
}

.category-readable-badges em {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(98, 89, 202, .10);
    color: var(--tv-accent);
    font-size: .72rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1.1;
}

.category-readable-open {
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: center;
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(98, 89, 202, .08);
    color: var(--tv-accent);
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1;
}

.readable-category-grid .market-tool-card {
    position: relative;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    min-height: 0 !important;
    padding: 16px !important;
    padding-right: 76px !important;
    align-items: flex-start !important;
    border-radius: 20px !important;
}

.readable-category-grid .market-tool-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 14px !important;
}

.readable-category-grid .market-tool-copy b {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
    font-size: 1rem !important;
    line-height: 1.35 !important;
}

.readable-category-grid .market-tool-copy small {
    display: block !important;
    margin-top: 6px !important;
    overflow: visible !important;
    color: var(--tv-muted);
    font-size: .86rem !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: initial !important;
}

.category-card-open {
    position: absolute;
    top: 16px;
    right: 16px;
    align-self: center;
    padding: 7px 10px;
    border: 1px solid var(--tv-line);
    border-radius: 999px;
    background: rgba(98,89,202,.08);
    color: var(--tv-accent);
    font-size: .76rem;
    font-weight: 900;
    white-space: nowrap;
}

.readable-category-grid .market-tool-badges {
    grid-column: 2 / -1 !important;
    justify-content: flex-start;
    margin-top: 2px;
}

@media (max-width: 760px) {
    .readable-category-hero {
        grid-template-columns: 44px minmax(0, 1fr) !important;
        gap: 12px !important;
        padding: 16px !important;
        text-align: left !important;
    }

    .readable-category-hero .category-market-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 14px !important;
    }

    .readable-category-hero h1 {
        margin: 4px 0 6px !important;
        font-size: clamp(1.75rem, 8vw, 2.35rem) !important;
    }

    .readable-category-hero p {
        font-size: .94rem !important;
        line-height: 1.48 !important;
    }

    .readable-category-hero .mud-chip {
        grid-column: 2 / -1;
        width: fit-content;
    }

    .readable-category-grid {
        grid-template-columns: 1fr !important;
    }

    .category-readable-card {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        min-height: 0;
        padding: 15px;
    }

    .category-readable-title {
        font-size: .98rem;
    }

    .category-readable-description {
        font-size: .85rem;
    }

    .category-readable-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    .readable-category-grid .market-tool-card {
        grid-template-columns: 40px minmax(0, 1fr) !important;
        padding: 14px !important;
        padding-bottom: 52px !important;
    }

    .category-card-open {
        top: auto;
        right: auto;
        bottom: 14px;
        left: 68px;
        grid-column: auto;
        justify-self: auto;
        margin-top: 0;
    }
}
/* Blog and guides */
.blog-page,
.blog-article-page {
    width: min(1180px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 32px 0 72px;
}

.blog-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 6px 0 20px;
    color: var(--tv-muted, #64748b);
    font-size: .92rem;
}

.blog-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.blog-breadcrumb a:hover {
    color: var(--mud-palette-primary);
}

.blog-hero,
.blog-article-hero {
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 30px;
    padding: clamp(28px, 5vw, 58px);
    background:
        radial-gradient(circle at top left, rgba(99, 102, 241, .13), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.88));
    box-shadow: 0 24px 70px rgba(15, 23, 42, .08);
}

.blog-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 7px 13px;
    border-radius: 999px;
    color: #334155;
    background: rgba(99, 102, 241, .11);
    border: 1px solid rgba(99, 102, 241, .18);
    font-weight: 800;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.blog-hero h1,
.blog-article-hero h1 {
    max-width: 880px;
    margin: 16px 0 12px;
    color: #0f172a;
    font-size: clamp(2.35rem, 6vw, 5.2rem);
    line-height: .96;
    letter-spacing: 0;
}

.blog-hero p,
.blog-article-hero p {
    max-width: 760px;
    margin: 0;
    color: #475569;
    font-size: clamp(1rem, 1.6vw, 1.24rem);
    line-height: 1.7;
}

.blog-search-row {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(180px, 280px) auto auto;
    gap: 12px;
    align-items: center;
    margin-top: 28px;
}

.blog-featured,
.blog-listing,
.blog-related-block,
.blog-cta {
    margin-top: 34px;
}

.blog-featured-grid,
.blog-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.blog-card {
    display: flex;
    min-height: 270px;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 24px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 52px rgba(15, 23, 42, .07);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.blog-card:hover {
    transform: translateY(-3px);
    border-color: rgba(99, 102, 241, .34);
    box-shadow: 0 26px 64px rgba(15, 23, 42, .1);
}

.blog-card-meta,
.blog-card-footer,
.blog-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: #64748b;
    font-size: .9rem;
}

.blog-card-meta span,
.blog-article-meta span {
    border-radius: 999px;
    padding: 5px 10px;
    background: #f1f5f9;
}

.blog-card h3 {
    margin: 0;
    font-size: 1.18rem;
    line-height: 1.25;
}

.blog-card h3 a,
.blog-card-footer a {
    color: #0f172a;
    text-decoration: none;
}

.blog-card h3 a:hover,
.blog-card-footer a:hover {
    color: var(--mud-palette-primary);
}

.blog-card p {
    margin: 0;
    color: #475569;
    line-height: 1.62;
}

.blog-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.blog-tag-row span {
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(99, 102, 241, .09);
    color: #4338ca;
    font-weight: 700;
    font-size: .78rem;
}

.blog-card-footer {
    margin-top: auto;
    justify-content: space-between;
    align-items: center;
}

.blog-card-footer a {
    font-weight: 800;
}

.blog-loading,
.blog-empty,
.blog-not-found {
    display: grid;
    place-items: center;
    gap: 14px;
    min-height: 320px;
    padding: 42px;
    text-align: center;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 28px;
    background: #fff;
}

.blog-empty .mud-icon-root,
.blog-not-found .mud-icon-root {
    font-size: 3rem;
    color: var(--mud-palette-primary);
}

.blog-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-top: 28px;
}

.blog-article-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 28px;
    margin-top: 30px;
}

.blog-toc {
    position: sticky;
    top: 92px;
    align-self: start;
    display: grid;
    gap: 10px;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 20px;
    background: #fff;
}

.blog-toc a {
    color: #475569;
    text-decoration: none;
    line-height: 1.35;
}

.blog-toc a:hover {
    color: var(--mud-palette-primary);
}

.blog-article-main {
    min-width: 0;
}

.blog-article-content {
    padding: clamp(24px, 4vw, 46px);
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 28px;
    background: #fff;
    color: #1f2937;
    box-shadow: 0 18px 52px rgba(15, 23, 42, .07);
}

.blog-article-content h2 {
    margin: 34px 0 12px;
    color: #0f172a;
    font-size: clamp(1.35rem, 2.2vw, 2rem);
}

.blog-article-content h2:first-child {
    margin-top: 0;
}

.blog-article-content h3 {
    margin: 24px 0 10px;
    color: #111827;
}

.blog-article-content p,
.blog-article-content li {
    color: #334155;
    font-size: 1.03rem;
    line-height: 1.8;
}

.blog-article-content a {
    color: var(--mud-palette-primary);
    font-weight: 700;
}

.blog-disclaimer {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 22px;
    padding: 18px;
    border: 1px solid rgba(245, 158, 11, .26);
    border-radius: 20px;
    background: #fffbeb;
    color: #713f12;
}

.blog-disclaimer p {
    margin: 0;
    line-height: 1.6;
}

.blog-related-grid,
.blog-related-articles {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.blog-related-grid a,
.blog-related-articles a,
.blog-cta {
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 20px;
    background: #fff;
    color: #0f172a;
    text-decoration: none;
}

.blog-related-grid a {
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 800;
}

.blog-related-articles a {
    display: grid;
    gap: 6px;
}

.blog-related-articles span,
.blog-cta p {
    color: #64748b;
}

.related-blog-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.related-blog-row a {
    display: grid;
    gap: 6px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 18px;
    background: rgba(255, 255, 255, .92);
    color: #0f172a;
    text-decoration: none;
}

.related-blog-row a:hover {
    border-color: rgba(99, 102, 241, .36);
}

.related-blog-row span {
    color: #64748b;
    line-height: 1.45;
}

.blog-not-found-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.latest-blog-section {
    margin-top: 34px;
}

@media (max-width: 980px) {
    .blog-search-row,
    .blog-featured-grid,
    .blog-card-grid,
    .blog-article-layout,
    .blog-related-grid,
    .blog-related-articles {
        grid-template-columns: 1fr;
    }

    .blog-toc {
        position: static;
    }
}

@media (max-width: 640px) {
    .blog-page,
    .blog-article-page {
        width: min(100vw - 20px, 1180px);
        padding-top: 18px;
    }

    .blog-hero,
    .blog-article-hero,
    .blog-article-content {
        border-radius: 22px;
    }

    .blog-card {
        min-height: 0;
    }
}

/* 2026 product UI layer
   This final layer unifies the public app around one clean, spacious system.
   It intentionally overrides older experimental card/tree styles without
   changing tool behavior, routes, registry data, or SEO content. */
:root {
    --tv-page: #f6f7fb;
    --tv-surface: rgba(255, 255, 255, .82);
    --tv-surface-strong: #ffffff;
    --tv-ink: #101522;
    --tv-muted: #667085;
    --tv-soft: #eef2f8;
    --tv-line: rgba(16, 24, 40, .105);
    --tv-accent: #3157f6;
    --tv-accent-2: #12a594;
    --tv-warm: #f4b85d;
    --tv-danger: #dc3f4d;
    --tv-card-radius: 26px;
    --tv-panel-radius: 34px;
    --tv-shadow: 0 18px 48px rgba(15, 23, 42, .075);
    --tv-shadow-hover: 0 30px 86px rgba(15, 23, 42, .13);
    --mw: 100%;
    color-scheme: light;
}

.dark {
    --tv-page: #090f1d;
    --tv-surface: rgba(17, 24, 39, .80);
    --tv-surface-strong: #111827;
    --tv-ink: #f6f8fc;
    --tv-muted: #aeb9cc;
    --tv-soft: rgba(255, 255, 255, .08);
    --tv-line: rgba(255, 255, 255, .12);
    --tv-accent: #8ea4ff;
    --tv-accent-2: #49d5c4;
    --tv-shadow: 0 18px 52px rgba(0, 0, 0, .32);
    --tv-shadow-hover: 0 30px 86px rgba(0, 0, 0, .46);
    color-scheme: dark;
}

html {
    scroll-behavior: smooth;
    background: var(--tv-page);
}

body {
    overflow-x: hidden;
    background: var(--tv-page);
    color: var(--tv-ink);
    font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
    letter-spacing: 0;
}

.app {
    min-height: 100vh;
    background:
        radial-gradient(circle at 6% -8%, rgba(49, 87, 246, .13), transparent 32vw),
        radial-gradient(circle at 100% 0, rgba(18, 165, 148, .10), transparent 28vw),
        linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(246, 247, 251, .98) 38%, var(--tv-page));
}

.dark.app,
.dark .app {
    background:
        radial-gradient(circle at 6% -8%, rgba(142, 164, 255, .16), transparent 32vw),
        radial-gradient(circle at 100% 0, rgba(73, 213, 196, .12), transparent 28vw),
        linear-gradient(180deg, #0b1222, #090f1d 44%, var(--tv-page));
}

.main {
    width: 100%;
    max-width: none;
    padding: clamp(16px, 2.2vw, 34px) clamp(14px, 2.35vw, 40px) clamp(44px, 5vw, 80px) !important;
}

.mud-topbar {
    position: sticky !important;
    top: 0;
    z-index: 70 !important;
    min-height: 68px !important;
    border-bottom: 1px solid var(--tv-line) !important;
    background: rgba(255, 255, 255, .78) !important;
    color: var(--tv-ink) !important;
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    box-shadow: 0 12px 34px rgba(15, 23, 42, .055) !important;
}

.dark .mud-topbar {
    background: rgba(9, 15, 29, .82) !important;
}

.nav-inner {
    width: 100%;
    max-width: none !important;
    min-height: 68px;
    padding: 0 clamp(14px, 2.4vw, 38px);
    gap: clamp(12px, 1.8vw, 26px);
}

.logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--tv-ink) !important;
    font-size: clamp(1.02rem, 1.2vw, 1.18rem) !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.logo::before {
    content: "";
    width: 34px;
    height: 34px;
    border-radius: 13px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .30), transparent),
        linear-gradient(135deg, var(--tv-accent), var(--tv-accent-2));
    box-shadow: 0 14px 30px rgba(49, 87, 246, .22);
}

.top-service-menu {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.category-top-menu {
    gap: 4px;
}

.category-top-menu .mud-menu {
    display: inline-flex;
}

.category-top-menu .mud-button-root {
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    color: var(--tv-muted) !important;
    font-size: .88rem !important;
    font-weight: 900 !important;
    text-transform: none !important;
    box-shadow: none !important;
}

.category-top-menu .mud-button-root:hover,
.category-top-menu .mud-button-root:focus-visible {
    background: var(--tv-soft) !important;
    color: var(--tv-ink) !important;
    transform: translateY(-1px);
}

.top-service-menu a,
.drawer-menu .mud-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--tv-muted) !important;
    font-size: .91rem;
    font-weight: 830;
    text-decoration: none !important;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.top-service-menu a:hover,
.top-service-menu a:focus-visible,
.drawer-menu .mud-nav-link:hover,
.drawer-menu .mud-nav-link:focus-visible {
    background: var(--tv-soft) !important;
    color: var(--tv-ink) !important;
    transform: translateY(-1px);
    outline: none;
}

.nav-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px;
    border: 1px solid var(--tv-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .055);
}

.dark .nav-right {
    background: rgba(255, 255, 255, .07);
}

.nav-search-cta {
    min-height: 38px !important;
    border-radius: 999px !important;
    padding-inline: 16px !important;
    font-weight: 900 !important;
    box-shadow: none !important;
}

.mud-button-filled-primary,
.btn-p,
.contact-send-btn {
    border: 0 !important;
    background: linear-gradient(135deg, var(--tv-ink), color-mix(in srgb, var(--tv-accent) 55%, var(--tv-ink))) !important;
    color: #fff !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .16) !important;
}

.dark .mud-button-filled-primary,
.dark .btn-p,
.dark .contact-send-btn {
    background: linear-gradient(135deg, var(--tv-accent), var(--tv-accent-2)) !important;
    color: #06101d !important;
}

.mud-button-root,
.btn,
.btn-p,
.btn-s,
.copybtn,
button {
    letter-spacing: 0 !important;
}

.studio-shell,
.library-market,
.category-market,
.blog-page,
.blog-article-page,
.legal-page,
.info-page,
.about-page,
.tool-page,
.prompt-generator-studio,
.api-doc-studio {
    width: 100% !important;
    max-width: none !important;
}

.studio-search-hero,
.library-hero,
.category-market-hero,
.blog-hero,
.blog-article-hero,
.legal-hero,
.info-hero,
.tool-head,
.prompt-hero-card,
.api-doc-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--tv-line) !important;
    border-radius: clamp(26px, 3vw, 46px) !important;
    background:
        radial-gradient(circle at 10% 0, rgba(49, 87, 246, .14), transparent 34%),
        radial-gradient(circle at 92% 10%, rgba(18, 165, 148, .12), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .76)) !important;
    box-shadow: var(--tv-shadow) !important;
}

.dark .studio-search-hero,
.dark .library-hero,
.dark .category-market-hero,
.dark .blog-hero,
.dark .blog-article-hero,
.dark .legal-hero,
.dark .info-hero,
.dark .tool-head,
.dark .prompt-hero-card,
.dark .api-doc-hero {
    background:
        radial-gradient(circle at 10% 0, rgba(142, 164, 255, .16), transparent 34%),
        radial-gradient(circle at 92% 10%, rgba(73, 213, 196, .12), transparent 32%),
        linear-gradient(180deg, rgba(17, 24, 39, .94), rgba(17, 24, 39, .78)) !important;
}

.studio-search-hero {
    min-height: auto !important;
    padding: clamp(18px, 3.2vw, 46px) !important;
}

.studio-search-wrap {
    width: min(100%, 1120px);
    margin: 0 auto;
}

.studio-search,
.library-command,
.category-search-card,
.blog-search-row {
    border: 1px solid var(--tv-line) !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, .86) !important;
    box-shadow: var(--tv-shadow) !important;
}

.dark .studio-search,
.dark .library-command,
.dark .category-search-card,
.dark .blog-search-row {
    background: rgba(17, 24, 39, .82) !important;
}

.studio-search {
    min-height: 82px;
    padding: 12px 14px;
}

.studio-search > .mud-icon-root {
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(49, 87, 246, .12), rgba(18, 165, 148, .10));
    color: var(--tv-accent);
}

.studio-search-input .mud-input-slot,
.library-command .mud-input-slot,
.category-search-card .mud-input-slot,
.blog-search .mud-input-slot {
    color: var(--tv-ink) !important;
    font-size: 1rem;
}

.home-bookmarks-card,
.studio-section,
.studio-quick-panel,
.library-group,
.blog-featured,
.blog-listing,
.tool-panel,
.calc-card,
.how-to,
.tool-content-section,
.tool-meta-grid article,
.legal-card,
.legal-panel,
.info-card,
.auth-card,
.webhook-card,
.pdf-panel,
.prompt-form-panel,
.prompt-output-panel,
.api-doc-section {
    border: 1px solid var(--tv-line) !important;
    border-radius: var(--tv-panel-radius) !important;
    background: rgba(255, 255, 255, .82) !important;
    box-shadow: var(--tv-shadow) !important;
}

.dark .home-bookmarks-card,
.dark .studio-section,
.dark .studio-quick-panel,
.dark .library-group,
.dark .blog-featured,
.dark .blog-listing,
.dark .tool-panel,
.dark .calc-card,
.dark .how-to,
.dark .tool-content-section,
.dark .tool-meta-grid article,
.dark .legal-card,
.dark .legal-panel,
.dark .info-card,
.dark .auth-card,
.dark .webhook-card,
.dark .pdf-panel,
.dark .prompt-form-panel,
.dark .prompt-output-panel,
.dark .api-doc-section {
    background: rgba(17, 24, 39, .78) !important;
}

.studio-panel-head h2,
.library-hero h1,
.category-market-hero h1,
.blog-hero h1,
.blog-article-hero h1,
.legal-hero h1,
.info-hero h1,
.tool-head h1 {
    color: var(--tv-ink) !important;
    letter-spacing: -.055em !important;
}

.studio-panel-head h2 {
    font-size: clamp(1.35rem, 2.2vw, 2.15rem) !important;
    line-height: 1.05;
}

.library-hero h1,
.category-market-hero h1,
.blog-hero h1,
.legal-hero h1,
.info-hero h1 {
    font-size: clamp(2.15rem, 5.8vw, 5.6rem) !important;
    line-height: .94 !important;
}

.studio-panel-head p,
.library-hero p,
.category-market-hero p,
.blog-hero p,
.blog-card p,
.legal-hero p,
.info-hero p,
.tool-head p,
.category-readable-description,
.tool-tree-description,
.tcard-copy p,
.market-tool-copy small {
    color: var(--tv-muted) !important;
}

.studio-kicker,
.blog-kicker,
.library-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(49, 87, 246, .16) !important;
    border-radius: 999px;
    background: rgba(49, 87, 246, .085) !important;
    color: var(--tv-accent) !important;
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.studio-category-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: clamp(14px, 1.6vw, 22px) !important;
}

.studio-category-card,
.blog-card,
.tcard,
.market-tool-card,
.tool-tree,
.category-readable-card,
.home-important-tool,
.studio-quick-tile,
.dashboard-tile,
.catcard,
.tcard-sm,
.related-blog-row a,
.blog-related-grid a,
.blog-related-articles a {
    border: 1px solid var(--tv-line) !important;
    border-radius: var(--tv-card-radius) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .80)) !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .055) !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.dark .studio-category-card,
.dark .blog-card,
.dark .tcard,
.dark .market-tool-card,
.dark .tool-tree,
.dark .category-readable-card,
.dark .home-important-tool,
.dark .studio-quick-tile,
.dark .dashboard-tile,
.dark .catcard,
.dark .tcard-sm,
.dark .related-blog-row a,
.dark .blog-related-grid a,
.dark .blog-related-articles a {
    background:
        linear-gradient(180deg, rgba(17, 24, 39, .95), rgba(17, 24, 39, .78)) !important;
}

.studio-category-card:hover,
.blog-card:hover,
.tcard:hover,
.market-tool-card:hover,
.tool-tree:hover,
.category-readable-card:hover,
.home-important-tool:hover,
.studio-quick-tile:hover,
.dashboard-tile:hover,
.catcard:hover,
.tcard-sm:hover,
.related-blog-row a:hover,
.blog-related-grid a:hover,
.blog-related-articles a:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--tv-accent) 42%, transparent) !important;
    box-shadow: var(--tv-shadow-hover) !important;
    text-decoration: none !important;
}

.tcard,
.market-tool-card {
    min-height: 86px !important;
    padding: 14px !important;
    align-items: center !important;
}

.tcard-icon,
.market-tool-icon,
.category-readable-icon,
.tool-tree-node,
.tool-tree-head-icon,
.studio-category-head > span,
.home-important-tool span,
.tool-title-icon,
.footer-logo-mark {
    background:
        linear-gradient(135deg, rgba(49, 87, 246, .13), rgba(18, 165, 148, .10)) !important;
    color: var(--tv-accent) !important;
}

.tcard-copy b,
.market-tool-copy b,
.category-readable-title,
.tool-tree-title,
.blog-card h3 a,
.home-important-tool b {
    color: var(--tv-ink) !important;
}

.tool-card-badges em,
.market-tool-badges em,
.tool-tree-badges em,
.category-readable-badges em,
.blog-card-meta span,
.blog-tag-row span,
.library-summary-row span,
.footer-chip-row span {
    border: 1px solid color-mix(in srgb, var(--tv-accent) 16%, transparent) !important;
    background: color-mix(in srgb, var(--tv-accent) 8%, transparent) !important;
    color: var(--tv-muted) !important;
}

.home-bookmarks-card {
    width: min(100%, 1220px);
    margin: clamp(18px, 2.4vw, 30px) auto 0;
    padding: clamp(16px, 2vw, 24px) !important;
}

.home-bookmarks-head {
    align-items: center;
}

.home-important-rail {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
}

.home-important-tool {
    min-height: 96px !important;
    padding: 13px 10px !important;
    justify-content: center;
}

.home-important-tool span {
    width: 42px !important;
    height: 42px !important;
    border-radius: 15px !important;
}

.home-important-tool b {
    max-width: 100%;
    font-size: .78rem !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
}

.library-market.single-library {
    gap: clamp(14px, 2vw, 24px);
}

.single-library-hero,
.single-library-command,
.compact-summary,
.single-tool-results {
    width: min(100%, 1500px);
    margin-inline: auto !important;
}

.single-library-command {
    top: 82px;
    padding: 14px !important;
    gap: 12px !important;
}

.tool-tree-grid {
    column-gap: 22px !important;
}

.tool-tree {
    overflow: clip !important;
}

.tool-tree-list {
    padding-left: 20px !important;
}

.tool-tree-list::before,
.tool-tree-item::before {
    display: none !important;
}

.tool-tree-item {
    grid-template-columns: 42px minmax(0, 1fr) 30px !important;
    min-height: 82px !important;
    padding: 12px !important;
    border-radius: 20px !important;
}

.tool-tree-description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.readable-category-grid {
    width: min(100%, 1180px) !important;
    gap: 12px !important;
}

.category-readable-card {
    grid-template-columns: 54px minmax(0, 1fr) auto !important;
    min-height: 94px !important;
    padding: 16px 18px !important;
}

.category-readable-description {
    max-width: 900px;
}

.category-readable-badges {
    grid-column: 2 / -1 !important;
}

.tool-page {
    width: min(100%, 1360px) !important;
    margin-inline: auto !important;
}

.tool-route .tool-page {
    width: 100% !important;
    max-width: none !important;
}

.tool-head {
    padding: clamp(18px, 2.4vw, 32px) !important;
}

.tool-route .tool-head {
    padding: 16px 18px !important;
}

.tool-body {
    display: block;
}

.tool-meta-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
}

.blog-page,
.blog-article-page {
    width: 100% !important;
    max-width: none !important;
}

.blog-search-row {
    padding: 12px !important;
}

.blog-featured-grid,
.blog-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}

.blog-card {
    min-height: 0 !important;
}

.blog-article-layout {
    grid-template-columns: minmax(210px, 280px) minmax(0, 1fr) !important;
}

.blog-article-content,
.blog-toc {
    background: var(--tv-surface-strong) !important;
    border-color: var(--tv-line) !important;
}

.footer {
    margin-top: clamp(34px, 5vw, 76px) !important;
    border-top: 1px solid var(--tv-line) !important;
    background:
        radial-gradient(circle at 18% 0, rgba(49, 87, 246, .10), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, .76), rgba(246, 247, 251, .96)) !important;
}

.dark .footer {
    background:
        radial-gradient(circle at 18% 0, rgba(142, 164, 255, .12), transparent 30%),
        linear-gradient(180deg, rgba(17, 24, 39, .72), rgba(9, 15, 29, .96)) !important;
}

.footer-inner {
    max-width: none !important;
    padding: clamp(20px, 3vw, 42px) clamp(14px, 2.4vw, 40px) !important;
}

.footer-hero,
.footer-column {
    border-radius: var(--tv-card-radius) !important;
}

.footer-cols {
    grid-template-columns: minmax(280px, 1.4fr) repeat(3, minmax(180px, 1fr)) !important;
}

.floating-contact {
    left: clamp(12px, 1.6vw, 22px) !important;
    right: auto !important;
}

.floating-contact-tab {
    min-width: 72px !important;
    height: 46px !important;
    border-radius: 999px !important;
    background: var(--tv-ink) !important;
    color: #fff !important;
}

.floating-contact-panel {
    left: 0 !important;
    right: auto !important;
    width: min(420px, calc(100vw - 24px)) !important;
    border-radius: 28px !important;
    border-color: var(--tv-line) !important;
    background: var(--tv-surface-strong) !important;
}

.floating-chat-bubble {
    border-radius: 20px !important;
}

.floating-contact-textbox {
    border-radius: 18px !important;
}

.mud-input-root,
.mud-input-outlined,
.mud-select,
.ta,
.form-row input,
.form-row select,
.form-col input,
.form-col select,
.form-col textarea,
.form-row textarea {
    border-radius: 18px !important;
}

.mud-input-root.mud-focused,
.mud-input-root:focus-within,
.ta:focus,
.form-row input:focus,
.form-row select:focus,
.form-col input:focus,
.form-col select:focus,
.form-col textarea:focus,
.form-row textarea:focus,
a:focus-visible,
button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--tv-accent) 22%, transparent) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--tv-accent) 11%, transparent) !important;
}

@media (max-width: 980px) {
    .mobile-menu {
        display: inline-flex !important;
    }

    .top-service-menu {
        display: none !important;
    }

    .nav-inner {
        min-height: 62px;
    }

    .nav-right {
        gap: 4px;
        padding: 4px;
    }

    .single-library-command,
    .blog-search-row {
        position: static !important;
        grid-template-columns: 1fr !important;
    }

    .footer-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .blog-article-layout {
        grid-template-columns: 1fr !important;
    }

    .blog-toc {
        position: static !important;
    }
}

@media (max-width: 680px) {
    .main {
        padding: 12px 10px 38px !important;
    }

    .logo {
        font-size: .96rem !important;
    }

    .logo::before {
        width: 30px;
        height: 30px;
        border-radius: 11px;
    }

    .nav-search-cta {
        min-width: 40px !important;
        padding: 0 10px !important;
    }

    .nav-search-cta .mud-button-label {
        font-size: 0 !important;
    }

    .studio-search-hero,
    .library-hero,
    .category-market-hero,
    .blog-hero,
    .blog-article-hero,
    .legal-hero,
    .info-hero,
    .tool-head,
    .home-bookmarks-card,
    .studio-section,
    .library-group,
    .tool-panel,
    .tool-content-section,
    .how-to {
        border-radius: 22px !important;
    }

    .studio-search {
        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr);
        min-height: 0;
    }

    .studio-search .mud-button-root {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
    }

    .home-important-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .studio-category-grid,
    .blog-card-grid,
    .blog-featured-grid {
        grid-template-columns: 1fr !important;
    }

    .category-readable-card {
        grid-template-columns: 46px minmax(0, 1fr) !important;
    }

    .category-readable-open {
        display: none !important;
    }

    .category-readable-badges {
        grid-column: 2 / -1 !important;
    }

    .tool-tree-grid {
        column-count: 1 !important;
    }

    .tool-tree-item {
        grid-template-columns: 38px minmax(0, 1fr) !important;
    }

    .tool-tree-open {
        display: none !important;
    }

    .footer-cols {
        grid-template-columns: 1fr !important;
    }

    .floating-contact {
        left: 10px !important;
        bottom: 12px !important;
    }

    .floating-contact-panel {
        width: calc(100vw - 20px) !important;
        max-height: min(76vh, 620px) !important;
    }
}

/* Tool-first refinement: reduce above-the-fold copy and let icons/tools lead. */
.tool-first-library {
    display: grid;
    gap: 14px;
}

.tool-first-library .single-library-command {
    order: 0;
}

.tool-first-library .compact-summary {
    order: 2;
}

.tool-first-library .single-tool-results {
    order: 1;
}

.tool-first-library > .tool-workflow-showcase {
    order: 2;
}

.tool-first-library .compact-library-hero {
    order: 3;
}

/* Asana-inspired global polish: consistent white workspace, soft cards, clear hierarchy. */
:root {
    --asana-page: #fbfaf8;
    --asana-surface: #ffffff;
    --asana-surface-soft: #f6f4f1;
    --asana-ink: #1f1f22;
    --asana-muted: #66646f;
    --asana-line: rgba(31, 31, 34, .11);
    --asana-coral: #f06a6a;
    --asana-purple: #7c5cff;
    --asana-mint: #27b894;
    --asana-yellow: #f7c948;
    --asana-radius-xl: 32px;
    --asana-radius-lg: 24px;
    --asana-radius-md: 16px;
    --asana-shadow: 0 18px 46px rgba(31, 31, 34, .08);
    --asana-shadow-hover: 0 28px 70px rgba(31, 31, 34, .13);
}

.dark {
    --asana-page: #0e1017;
    --asana-surface: #171a23;
    --asana-surface-soft: #202431;
    --asana-ink: #f7f5f2;
    --asana-muted: #b9b5c3;
    --asana-line: rgba(255, 255, 255, .12);
    --asana-shadow: 0 18px 48px rgba(0, 0, 0, .28);
    --asana-shadow-hover: 0 28px 78px rgba(0, 0, 0, .38);
}

html,
body {
    background: var(--asana-page) !important;
    color: var(--asana-ink) !important;
}

.app {
    background:
        radial-gradient(circle at 8% 8%, rgba(240, 106, 106, .13), transparent 26vw),
        radial-gradient(circle at 96% 4%, rgba(124, 92, 255, .11), transparent 28vw),
        linear-gradient(180deg, var(--asana-page), color-mix(in srgb, var(--asana-page) 86%, #ffffff)) !important;
}

.dark.app,
.dark .app {
    background:
        radial-gradient(circle at 8% 8%, rgba(240, 106, 106, .12), transparent 30vw),
        radial-gradient(circle at 96% 4%, rgba(124, 92, 255, .14), transparent 32vw),
        linear-gradient(180deg, #0e1017, #11131c) !important;
}

.tv-app-main-content {
    background: transparent !important;
}

.main {
    max-width: 1480px !important;
    margin-inline: auto !important;
    padding: clamp(18px, 2.3vw, 38px) clamp(16px, 3vw, 48px) clamp(54px, 6vw, 92px) !important;
}

.tool-route .main {
    max-width: none !important;
    padding: clamp(12px, 1.6vw, 22px) !important;
}

.tv-asana-topbar {
    min-height: 76px !important;
    border-bottom-color: var(--asana-line) !important;
    background: color-mix(in srgb, var(--asana-surface) 92%, transparent) !important;
    box-shadow: 0 10px 32px rgba(31, 31, 34, .06) !important;
}

.tv-asana-brand {
    color: var(--asana-ink) !important;
}

.tv-asana-brand-mark {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .45), transparent),
        linear-gradient(135deg, var(--asana-coral), var(--asana-purple)) !important;
    color: #fff !important;
    box-shadow: 0 14px 30px rgba(240, 106, 106, .22);
}

.tv-asana-menu-item > summary,
.tv-asana-action-link {
    color: var(--asana-muted) !important;
}

.tv-asana-menu-item > summary:hover,
.tv-asana-menu-item > summary:focus-visible,
.tv-asana-menu-item[open] > summary,
.tv-asana-action-link:hover,
.tv-asana-action-link:focus-visible {
    background: var(--asana-surface-soft) !important;
    color: var(--asana-ink) !important;
}

.tv-asana-mega {
    border-color: var(--asana-line) !important;
    border-radius: 0 0 var(--asana-radius-xl) var(--asana-radius-xl) !important;
    background: color-mix(in srgb, var(--asana-surface) 98%, transparent) !important;
    box-shadow: 0 34px 86px rgba(31, 31, 34, .16) !important;
}

.tv-asana-mega-intro {
    background:
        radial-gradient(circle at 15% 0, rgba(240, 106, 106, .16), transparent 42%),
        radial-gradient(circle at 100% 18%, rgba(124, 92, 255, .13), transparent 44%),
        var(--asana-surface-soft) !important;
}

.tv-asana-mega-intro h2,
.tv-asana-mega-section b,
.tv-asana-mega-grid section > a:not(.tv-asana-mega-section) {
    color: var(--asana-ink) !important;
}

.tv-asana-mega-intro p,
.tv-asana-mega-section small {
    color: var(--asana-muted) !important;
}

.tv-asana-mega-intro a,
.mud-button-filled-primary,
.btn-p,
.contact-send-btn {
    border: 0 !important;
    background: #1f1f22 !important;
    color: #fff !important;
    box-shadow: 0 16px 36px rgba(31, 31, 34, .16) !important;
}

.dark .tv-asana-mega-intro a,
.dark .mud-button-filled-primary,
.dark .btn-p,
.dark .contact-send-btn {
    background: linear-gradient(135deg, var(--asana-coral), var(--asana-purple)) !important;
    color: #fff !important;
}

.tv-asana-mega-section,
.tv-asana-mega-grid section > a:not(.tv-asana-mega-section):hover,
.tv-asana-mega-grid section > a:not(.tv-asana-mega-section):focus-visible {
    background: var(--asana-surface-soft) !important;
}

.tv-sticky-search-box,
.studio-search,
.library-command,
.category-search-card,
.blog-search-row,
.single-library-command {
    border: 1px solid var(--asana-line) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--asana-surface) 94%, transparent) !important;
    box-shadow: 0 14px 34px rgba(31, 31, 34, .065) !important;
}

.tv-sticky-search-box:focus-within,
.studio-search:focus-within,
.library-command:focus-within,
.category-search-card:focus-within,
.blog-search-row:focus-within {
    border-color: color-mix(in srgb, var(--asana-purple) 34%, var(--asana-line)) !important;
    box-shadow: 0 0 0 5px rgba(124, 92, 255, .10), 0 18px 40px rgba(31, 31, 34, .09) !important;
}

.studio-search-hero,
.library-hero,
.category-market-hero,
.blog-hero,
.blog-article-hero,
.legal-hero,
.info-hero,
.tool-head,
.prompt-hero-card,
.api-doc-hero,
.home-bookmarks-card {
    border: 1px solid var(--asana-line) !important;
    border-radius: var(--asana-radius-xl) !important;
    background:
        radial-gradient(circle at 12% 0, rgba(240, 106, 106, .13), transparent 34%),
        radial-gradient(circle at 92% 8%, rgba(124, 92, 255, .12), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--asana-surface) 94%, transparent), color-mix(in srgb, var(--asana-surface) 78%, transparent)) !important;
    box-shadow: var(--asana-shadow) !important;
}

.studio-search-hero,
.library-hero,
.category-market-hero,
.blog-hero,
.blog-article-hero,
.legal-hero,
.info-hero {
    padding: clamp(28px, 5vw, 74px) !important;
}

.home-command-head h1,
.library-hero h1,
.category-market-hero h1,
.blog-hero h1,
.blog-article-hero h1,
.legal-hero h1,
.info-hero h1,
.tool-head h1 {
    color: var(--asana-ink) !important;
    font-weight: 950 !important;
    letter-spacing: -.045em !important;
}

.home-command-head p,
.library-hero p,
.category-market-hero p,
.blog-hero p,
.blog-article-hero p,
.legal-hero p,
.info-hero p,
.tool-head p,
.category-readable-description,
.tool-tree-description,
.tcard-copy p,
.market-tool-copy small,
.blog-card p {
    color: var(--asana-muted) !important;
}

.home-bookmarks-card,
.studio-section,
.studio-quick-panel,
.library-group,
.blog-featured,
.blog-listing,
.blog-related-block,
.blog-cta,
.blog-article-content,
.blog-toc,
.tool-panel,
.calc-card,
.how-to,
.tool-content-section,
.tool-meta-grid article,
.legal-card,
.legal-panel,
.info-card,
.auth-card,
.webhook-card,
.pdf-panel,
.prompt-form-panel,
.prompt-output-panel,
.api-doc-section,
.category-readable-card,
.studio-category-card,
.blog-card,
.tcard,
.market-tool-card,
.tool-tree,
.home-important-tool,
.studio-quick-tile,
.dashboard-tile,
.catcard,
.tcard-sm {
    border: 1px solid var(--asana-line) !important;
    border-radius: var(--asana-radius-lg) !important;
    background: color-mix(in srgb, var(--asana-surface) 94%, transparent) !important;
    box-shadow: 0 12px 30px rgba(31, 31, 34, .055) !important;
}

.studio-category-card:hover,
.blog-card:hover,
.tcard:hover,
.market-tool-card:hover,
.tool-tree:hover,
.category-readable-card:hover,
.home-important-tool:hover,
.studio-quick-tile:hover,
.dashboard-tile:hover,
.catcard:hover,
.tcard-sm:hover {
    transform: translateY(-3px) !important;
    border-color: color-mix(in srgb, var(--asana-coral) 34%, var(--asana-line)) !important;
    box-shadow: var(--asana-shadow-hover) !important;
}

.tool-card-badges em,
.market-tool-badges em,
.tool-tree-badges em,
.category-readable-badges em,
.blog-card-meta span,
.blog-article-meta span,
.blog-tag-row span,
.library-summary-row span,
.footer-chip-row span,
.studio-kicker,
.blog-kicker,
.library-kicker {
    border-color: color-mix(in srgb, var(--asana-purple) 18%, var(--asana-line)) !important;
    background: color-mix(in srgb, var(--asana-purple) 8%, transparent) !important;
    color: var(--asana-muted) !important;
}

.tcard-icon,
.market-tool-icon,
.category-readable-icon,
.tool-tree-node,
.tool-tree-head-icon,
.studio-category-head > span,
.home-important-tool span,
.tool-title-icon,
.footer-logo-mark {
    background:
        linear-gradient(135deg, rgba(240, 106, 106, .14), rgba(124, 92, 255, .10)) !important;
    color: var(--asana-purple) !important;
}

.tool-page {
    width: min(100%, 1400px) !important;
}

.tool-route .tool-page {
    width: 100% !important;
    max-width: none !important;
}

.tool-route .tool-head {
    border-radius: var(--asana-radius-lg) !important;
}

textarea,
.ta,
.mud-input-root,
.mud-input-outlined,
.mud-select,
.form-row input,
.form-row select,
.form-col input,
.form-col select,
.form-col textarea,
.form-row textarea {
    border-radius: var(--asana-radius-md) !important;
}

.footer {
    border-top: 1px solid var(--asana-line) !important;
    background:
        radial-gradient(circle at 12% 0, rgba(240, 106, 106, .10), transparent 28%),
        radial-gradient(circle at 88% 0, rgba(124, 92, 255, .09), transparent 28%),
        var(--asana-page) !important;
}

.footer-hero,
.footer-column {
    border-color: var(--asana-line) !important;
    border-radius: var(--asana-radius-lg) !important;
    background: color-mix(in srgb, var(--asana-surface) 88%, transparent) !important;
}

@media (max-width: 980px) {
    .tv-asana-topbar {
        min-height: 68px !important;
    }

    .main {
        padding-inline: clamp(12px, 3vw, 22px) !important;
    }

    .studio-search-hero,
    .library-hero,
    .category-market-hero,
    .blog-hero,
    .blog-article-hero,
    .legal-hero,
    .info-hero {
        padding: clamp(22px, 6vw, 42px) !important;
    }
}

@media (max-width: 680px) {
    .studio-search-hero,
    .library-hero,
    .category-market-hero,
    .blog-hero,
    .blog-article-hero,
    .legal-hero,
    .info-hero,
    .tool-head,
    .home-bookmarks-card,
    .studio-section,
    .library-group,
    .tool-panel,
    .tool-content-section,
    .how-to {
        border-radius: 22px !important;
    }
}

.compact-library-hero {
    padding: clamp(16px, 2vw, 24px) !important;
    min-height: 0 !important;
    opacity: .96;
}

.compact-library-hero h1,
.compact-library-hero h2 {
    margin: 8px 0 6px !important;
    font-size: clamp(1.35rem, 2.5vw, 2.4rem) !important;
    line-height: 1.05 !important;
    color: var(--tv-ink) !important;
    letter-spacing: -.04em !important;
}

.compact-library-hero p {
    max-width: 760px !important;
    font-size: .95rem !important;
    line-height: 1.55 !important;
}

.library-command {
    align-items: center;
}

.library-command .mud-input-control {
    margin: 0 !important;
}

.compact-summary {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px !important;
}

.compact-summary span {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
}

.single-tool-results .studio-panel-head {
    align-items: center;
}

.single-tool-results .studio-panel-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.single-tool-results .studio-panel-head p,
.studio-panel-head p,
.category-market-hero p,
.tool-head p,
.blog-hero p,
.legal-hero p,
.info-hero p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.single-tool-results .studio-panel-head p {
    -webkit-line-clamp: 1;
}

.tool-tree-head small,
.library-summary-row span,
.tool-card-badges em,
.market-tool-badges em,
.category-readable-badges em {
    font-size: .74rem !important;
}

.tool-tree-description {
    -webkit-line-clamp: 1 !important;
}

.category-readable-description {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tool-head {
    align-items: center !important;
}

.tool-head > div:nth-child(2) {
    min-width: 0;
}

.tool-head p {
    max-width: 920px;
}

.tool-meta-grid,
.tool-content-section,
.how-to,
.related-blog-row,
.blog-related-block {
    margin-top: clamp(20px, 3vw, 42px) !important;
}

.privacy-band,
.use-case-section,
.latest-blog-section {
    margin-top: clamp(28px, 4vw, 60px) !important;
}

.studio-section .studio-panel-head,
.library-group .studio-panel-head {
    margin-bottom: 12px;
}

.studio-category-card {
    min-height: 0 !important;
}

.studio-category-head {
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
}

.studio-category-head small {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.studio-tool-chips {
    margin-top: 10px !important;
}

.studio-tool-chips a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
}

.blog-card p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

@media (min-width: 981px) {
    .tool-first-library .single-library-command {
        grid-template-columns: minmax(380px, 1.9fr) minmax(200px, .55fr) minmax(200px, .55fr) !important;
    }
}

@media (max-width: 680px) {
    .compact-library-hero {
        padding: 14px !important;
    }

    .compact-library-hero h1,
    .compact-library-hero h2 {
        font-size: 1.35rem !important;
    }

    .compact-library-hero p {
        display: none !important;
    }

    .single-tool-results .studio-panel-head p {
        display: none !important;
    }

    .category-readable-description,
    .tool-tree-description,
    .studio-category-head small {
        -webkit-line-clamp: 1 !important;
    }
}

/* Homepage command dashboard: MudBlazor-led bookmark workspace with tighter, app-like tiles. */
.home-bookmark-studio {
    position: relative;
    overflow: hidden;
}

.home-bookmark-studio::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--tv-accent) 16%, transparent), transparent 32%),
        radial-gradient(circle at 92% 10%, rgba(18, 165, 148, .13), transparent 30%);
}

.home-bookmark-studio > .mud-stack {
    position: relative;
    z-index: 1;
}

.home-bookmark-studio .home-bookmarks-head {
    padding: 0 !important;
    flex-wrap: wrap;
}

.home-bookmark-avatar {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--tv-accent) 18%, white), rgba(18, 165, 148, .12)) !important;
    color: var(--tv-accent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tv-accent) 18%, transparent);
}

.home-bookmark-studio .home-bookmarks-title .mud-typography-h6 {
    color: var(--tv-ink);
    font-size: 1.05rem;
    font-weight: 950;
    letter-spacing: -.02em;
}

.home-bookmark-studio .home-bookmarks-title .mud-typography-caption {
    color: var(--tv-muted);
    font-weight: 700;
}

.home-bookmark-actions,
.home-bookmark-mini-chips {
    flex-wrap: wrap;
}

.home-bookmark-actions .mud-button-root {
    min-height: 38px;
    border-radius: 999px !important;
    text-transform: none !important;
    font-weight: 900 !important;
}

.home-bookmark-command-row {
    align-items: center;
}

.home-bookmark-command-row .mud-input-control {
    margin: 0 !important;
}

.home-bookmark-command-row .mud-input-root {
    min-height: 50px;
    background: rgba(255,255,255,.74);
}

.dark .home-bookmark-command-row .mud-input-root {
    background: rgba(255,255,255,.07);
}

.mud-bookmark-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--tv-line);
    border-radius: 22px;
    background: color-mix(in srgb, var(--tv-accent) 6%, var(--tv-surface-strong)) !important;
}

.mud-bookmark-suggestions .mud-button-root {
    border-radius: 16px !important;
    text-transform: none !important;
    font-weight: 850 !important;
}

.home-bookmark-studio .home-important-rail {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.home-bookmark-studio .home-important-rail > .mud-grid-item {
    width: auto !important;
    max-width: none !important;
    flex-basis: auto !important;
    padding: 0 !important;
}

.home-bookmark-tile {
    min-height: 94px !important;
    padding: 10px 8px !important;
    border-color: color-mix(in srgb, var(--tv-accent) 14%, var(--tv-line)) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.76)) !important;
    text-transform: none !important;
}

.dark .home-bookmark-tile {
    background:
        linear-gradient(180deg, rgba(17,24,39,.92), rgba(17,24,39,.70)) !important;
}

.home-bookmark-tile .mud-button-label {
    display: grid;
    justify-items: center;
    gap: 7px;
    width: 100%;
    min-width: 0;
}

.home-bookmark-tile span {
    display: grid;
    width: 42px !important;
    height: 42px !important;
    place-items: center;
    border-radius: 16px !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--tv-accent) 16%, transparent), rgba(18, 165, 148, .10)) !important;
    color: var(--tv-accent) !important;
}

.home-bookmark-tile b {
    max-width: 100%;
    color: var(--tv-ink) !important;
    font-size: .77rem !important;
    font-weight: 950 !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere;
    text-align: center;
}

.home-bookmark-tile:hover,
.home-bookmark-tile:focus-visible {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--tv-accent) 42%, transparent) !important;
    box-shadow: var(--tv-shadow-hover) !important;
}

@media (max-width: 680px) {
    .home-bookmark-actions {
        width: 100%;
    }

    .home-bookmark-actions .mud-button-root {
        width: 100%;
    }

    .home-bookmark-mini-chips {
        justify-content: flex-start !important;
    }

    .home-bookmark-studio .home-important-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .home-bookmark-tile {
        min-height: 82px !important;
        padding: 8px 6px !important;
    }

    .home-bookmark-tile span {
        width: 36px !important;
        height: 36px !important;
        border-radius: 14px !important;
    }

    .home-bookmark-tile b {
        font-size: .7rem !important;
    }
}

/* DaivVerse home command center: colorful, card-first discovery layout. */
.tv-command-home {
    display: grid;
    gap: clamp(14px, 2vw, 24px);
}

.tv-search-start {
    position: relative;
    z-index: 4;
    padding: 4px 0 0;
}

.tv-home-jumpbar {
    position: sticky;
    top: 72px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: min(980px, 100%);
    margin: -4px auto 0;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--tv-accent) 14%, var(--tv-line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--tv-surface-strong) 86%, transparent);
    box-shadow: 0 14px 44px rgba(15,23,42,.08);
    backdrop-filter: blur(16px);
}

.tv-home-jumpbar a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 7px 13px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--tv-ink);
    font-size: .82rem;
    font-weight: 900;
    text-decoration: none;
}

.tv-home-jumpbar a:hover,
.tv-home-jumpbar a:focus-visible {
    border-color: color-mix(in srgb, var(--tv-accent) 24%, transparent);
    background: color-mix(in srgb, var(--tv-accent) 9%, transparent);
    color: var(--tv-accent);
}

.tv-home-section {
    scroll-margin-top: 110px;
}

.tv-home-overview {
    display: grid;
    grid-template-columns: minmax(280px, .92fr) minmax(0, 1.35fr);
    gap: clamp(14px, 2vw, 22px);
    align-items: stretch;
}

.tv-about-app-card {
    display: grid;
    align-content: center;
    gap: 14px;
    min-height: 100%;
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid rgba(19,33,24,.10);
    border-radius: 34px;
    background:
        radial-gradient(circle at 0% 0%, rgba(159,232,112,.28), transparent 34%),
        linear-gradient(180deg, #ffffff, #f8fbf5);
    box-shadow: 0 24px 64px rgba(19,33,24,.08);
}

.tv-about-app-card h2 {
    margin: 0;
    color: var(--tv-ink);
    font-size: clamp(1.45rem, 2.6vw, 2.45rem);
    line-height: 1.04;
    letter-spacing: -.04em;
}

.tv-about-app-card p {
    margin: 0;
    color: var(--tv-muted);
    font-size: .98rem;
    line-height: 1.65;
}

.tv-about-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.tv-about-points span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(19,33,24,.10);
    border-radius: 999px;
    background: rgba(255,255,255,.76);
    color: var(--tv-ink);
    font-size: .78rem;
    font-weight: 900;
}

.tv-feature-tool-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.tv-feature-tool-card {
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 12px;
    min-height: 156px;
    padding: 18px;
    border: 1px solid rgba(19,33,24,.10);
    border-radius: 30px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--room-a, #315cf6) 16%, transparent), transparent 36%),
        linear-gradient(180deg, #ffffff, #fbfdf8);
    color: var(--tv-ink);
    text-decoration: none;
    box-shadow: 0 20px 54px rgba(19,33,24,.075);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.tv-feature-tool-card:hover,
.tv-feature-tool-card:focus-visible {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--room-a, var(--tv-accent)) 28%, rgba(19,33,24,.10));
    box-shadow: 0 26px 70px rgba(19,33,24,.11);
    text-decoration: none;
}

.tv-feature-tool-icon {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 22px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--room-a, #315cf6) 18%, white), color-mix(in srgb, var(--room-b, #12b5a5) 28%, white));
    color: #101812;
}

.tv-feature-tool-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.tv-feature-tool-copy small {
    color: var(--room-a, var(--tv-accent));
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.tv-feature-tool-copy b {
    color: var(--tv-ink);
    font-size: 1.04rem;
    line-height: 1.2;
    font-weight: 950;
}

.tv-feature-tool-copy em {
    color: var(--tv-muted);
    font-size: .82rem;
    font-style: normal;
    font-weight: 720;
    line-height: 1.4;
}

.tv-feature-tool-open {
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: max-content;
    color: var(--room-a, var(--tv-accent));
    font-size: .82rem;
    font-weight: 950;
}

.tv-home-section .tv-bookmark-console {
    width: 100%;
}

.tv-command-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(18px, 2.5vw, 26px);
    padding: clamp(22px, 4vw, 44px);
    border: 1px solid color-mix(in srgb, var(--tv-line) 82%, transparent);
    border-radius: 34px;
    overflow: visible;
    background:
        radial-gradient(circle at 8% 0%, rgba(80, 112, 255, .22), transparent 34%),
        radial-gradient(circle at 92% 8%, rgba(20, 184, 166, .18), transparent 33%),
        radial-gradient(circle at 50% 105%, rgba(249, 115, 22, .10), transparent 42%),
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.88));
    box-shadow: 0 28px 90px rgba(15, 23, 42, .11);
}

.dark .tv-command-hero {
    background:
        radial-gradient(circle at 8% 0%, rgba(99, 102, 241, .22), transparent 36%),
        radial-gradient(circle at 92% 8%, rgba(20, 184, 166, .16), transparent 32%),
        radial-gradient(circle at 50% 105%, rgba(249, 115, 22, .09), transparent 42%),
        linear-gradient(135deg, rgba(15,23,42,.96), rgba(17,24,39,.88));
}

.tv-command-hero-copy {
    max-width: 980px;
    margin-inline: auto;
    text-align: center;
}

.tv-command-kicker {
    margin-bottom: 14px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(49,92,246,.12), rgba(20,184,166,.14)) !important;
    color: var(--tv-accent) !important;
    font-weight: 950 !important;
}

.tv-command-hero h1 {
    margin: 0;
    font-size: clamp(2.4rem, 7.4vw, 6.6rem);
    line-height: .9;
    letter-spacing: -.07em;
    color: var(--tv-ink);
}

.tv-command-hero-copy p {
    max-width: 760px;
    margin: 18px auto 0;
    color: var(--tv-muted);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.65;
}

.tv-command-search-panel {
    position: relative;
    z-index: 5;
    width: min(1060px, 100%);
    margin-inline: auto;
}

.tv-search-start .tv-command-search-panel {
    width: min(1180px, 100%);
}

.tv-command-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 10px 18px;
    min-height: 74px;
    border: 1px solid color-mix(in srgb, var(--tv-accent) 22%, var(--tv-line));
    border-radius: 26px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 22px 70px rgba(15,23,42,.12);
}

.dark .tv-command-search {
    background: rgba(15,23,42,.84);
}

.tv-command-search > .mud-icon-root {
    color: var(--tv-accent);
}

.tv-command-search .mud-input-root {
    background: transparent !important;
}

.tv-command-search .mud-input-slot {
    font-size: 1.05rem;
    font-weight: 750;
}

.tv-command-search .mud-button-root {
    min-height: 52px;
    border-radius: 18px !important;
    text-transform: none !important;
    font-weight: 950 !important;
}

.tv-category-filter-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: 12px;
    padding: 0;
    overflow: visible;
}

.tv-category-filter-label,
.tv-category-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    white-space: nowrap;
    border-radius: 999px;
}

.tv-category-filter-label {
    flex: 0 0 auto;
    min-width: max-content;
    padding: 0 8px;
    color: var(--tv-muted);
    font-size: .74rem;
    font-weight: 900;
}

.tv-category-filter-pill {
    flex: 0 0 auto;
    position: relative;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(22, 34, 51, .10);
    background: rgba(255, 255, 255, .86);
    color: #172033;
    box-shadow: 0 8px 22px rgba(22, 34, 51, .05);
    font-size: .78rem;
    font-weight: 900;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.tv-category-filter-pill > span:not(.mud-icon-root) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.tv-category-filter-pill small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: -5px;
    top: -6px;
    min-width: 18px;
    min-height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    border: 1px solid rgba(22, 34, 51, .10);
    font-size: .58rem;
    font-weight: 950;
    box-shadow: 0 4px 10px rgba(22, 34, 51, .08);
}

.tv-category-filter-pill:hover,
.tv-category-filter-pill:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--tv-accent) 32%, rgba(22, 34, 51, .10));
    box-shadow: 0 12px 28px rgba(22, 34, 51, .08);
    outline: none;
}

.tv-category-filter-pill.active {
    border-color: transparent;
    background: #101812;
    color: #ffffff;
    box-shadow: 0 14px 34px rgba(16, 24, 18, .16);
}

.tv-category-filter-pill.active small {
    background: rgba(255, 255, 255, .18);
    color: #ffffff;
}

.dark .tv-category-filter-pill {
    border-color: rgba(148, 163, 184, .18);
    background: rgba(15, 23, 42, .72);
    color: #f8fafc;
}

.dark .tv-category-filter-pill small {
    background: rgba(148, 163, 184, .16);
    color: #dbeafe;
}

.tv-command-search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 12px);
    z-index: 20;
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--tv-line);
    border-radius: 24px;
    background: var(--tv-surface-strong);
    box-shadow: var(--tv-shadow-hover);
}

.tv-command-search-results a {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid transparent;
    border-radius: 18px;
    color: var(--tv-ink);
}

.tv-command-search-results a:hover,
.tv-command-search-results a:focus-visible {
    text-decoration: none;
    border-color: color-mix(in srgb, var(--tv-accent) 24%, transparent);
    background: color-mix(in srgb, var(--tv-accent) 8%, var(--tv-surface-strong));
}

.tv-command-search-results a > span:first-child {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(49,92,246,.12), rgba(20,184,166,.10));
    color: var(--tv-accent);
}

.tv-command-search-results b,
.tv-command-search-results small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-command-search-results small {
    color: var(--tv-muted);
    font-weight: 750;
}

.tv-command-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.tv-command-stats article {
    display: grid;
    gap: 6px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.56);
    border-radius: 22px;
    background: rgba(255,255,255,.62);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.70);
}

.dark .tv-command-stats article {
    border-color: rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
}

.tv-command-stats span {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 15px;
    color: white;
    background: linear-gradient(135deg, #315cf6, #12b5a5);
}

.tv-command-stats b {
    color: var(--tv-ink);
    font-size: 1.45rem;
    line-height: 1;
    font-weight: 1000;
}

.tv-command-stats small {
    color: var(--tv-muted);
    font-weight: 850;
}

.tv-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .9fr);
    gap: 18px;
    align-items: stretch;
}

.tv-bookmark-console,
.tv-browse-console,
.tv-category-room {
    border: 1px solid var(--tv-line) !important;
    border-radius: 28px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.88)) !important;
    box-shadow: 0 18px 60px rgba(15,23,42,.08) !important;
}

.dark .tv-bookmark-console,
.dark .tv-browse-console,
.dark .tv-category-room {
    background:
        linear-gradient(180deg, rgba(17,24,39,.92), rgba(15,23,42,.78)) !important;
}

.tv-bookmark-console,
.tv-browse-console {
    padding: clamp(16px, 2vw, 24px) !important;
    display: grid;
    gap: 16px;
}

.tv-card-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.tv-card-head h2 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--tv-ink);
    letter-spacing: -.02em;
}

.tv-card-head p {
    margin: 3px 0 0;
    color: var(--tv-muted);
    line-height: 1.45;
}

.tv-card-icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 18px;
    color: white;
}

.tv-card-icon.bookmark {
    background: linear-gradient(135deg, #f97316, #ec4899);
}

.tv-card-icon.browse {
    background: linear-gradient(135deg, #315cf6, #06b6d4);
}

.tv-bookmark-search .mud-input-root {
    min-height: 52px;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--tv-accent) 5%, var(--tv-surface-strong)) !important;
}

.tv-bookmark-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px !important;
    border: 1px solid var(--tv-line) !important;
    border-radius: 20px !important;
    background: color-mix(in srgb, var(--tv-accent) 6%, var(--tv-surface-strong)) !important;
}

.tv-bookmark-suggestions .mud-button-root {
    border-radius: 14px !important;
    text-transform: none !important;
    font-weight: 850 !important;
}

.tv-bookmark-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 10px;
}

.tv-bookmark-cell {
    position: relative;
    min-width: 0;
}

.tv-bookmark-tile {
    min-height: 96px !important;
    padding: 10px 8px !important;
    border-radius: 20px !important;
    border-color: color-mix(in srgb, var(--tv-accent) 16%, var(--tv-line)) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.72)) !important;
    text-transform: none !important;
}

.dark .tv-bookmark-tile {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
}

.tv-bookmark-tile .mud-button-label {
    display: grid;
    justify-items: center;
    gap: 7px;
    width: 100%;
}

.tv-bookmark-tile span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 16px;
    color: var(--tv-accent);
    background: linear-gradient(135deg, rgba(49,92,246,.12), rgba(20,184,166,.12));
}

.tv-bookmark-tile b {
    max-width: 100%;
    color: var(--tv-ink);
    font-size: .76rem;
    line-height: 1.18;
    font-weight: 950;
    text-align: center;
    overflow-wrap: anywhere;
}

.tv-bookmark-tile:hover,
.tv-bookmark-tile:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--tv-shadow-hover) !important;
}

.tv-bookmark-remove {
    position: absolute !important;
    top: -7px;
    right: -7px;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border: 1px solid var(--tv-line) !important;
    background: var(--tv-surface-strong) !important;
}

.tv-category-pill-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.tv-category-strip {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin-bottom: 16px;
}

.tv-category-pill {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 12px;
    border: 1px solid var(--tv-line);
    border-radius: 18px;
    color: var(--tv-ink);
    background: var(--tv-surface-strong);
}

.tv-category-pill:hover,
.tv-category-pill:focus-visible {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--tv-shadow);
}

.tv-category-pill .mud-icon-root {
    color: var(--pill-accent, var(--tv-accent));
}

.tv-category-pill span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 900;
}

.tv-category-pill b {
    display: grid;
    min-width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 999px;
    color: var(--pill-accent, var(--tv-accent));
    background: color-mix(in srgb, var(--pill-accent, var(--tv-accent)) 10%, transparent);
    font-size: .82rem;
}

.tv-category-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 16px;
}

.tv-library-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 16px;
}

.tv-library-results {
    overflow: visible !important;
}

.tv-menu-hub-note {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid rgba(19,33,24,.10);
    border-radius: 26px;
    background:
        linear-gradient(135deg, rgba(159,232,112,.18), rgba(217,246,234,.24));
}

.tv-menu-hub-note > span {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 18px;
    color: #101812;
    background: #ffffff;
}

.tv-menu-hub-note b {
    display: block;
    color: var(--tv-ink);
    font-size: 1rem;
    font-weight: 950;
}

.tv-menu-hub-note p {
    margin: 3px 0 0;
    color: var(--tv-muted);
    font-size: .86rem;
    font-weight: 720;
    line-height: 1.45;
}

.tv-category-room {
    position: relative;
    overflow: hidden;
    padding: 18px;
}

.tv-category-room::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 7px;
    background: linear-gradient(90deg, var(--room-a, #315cf6), var(--room-b, #12b5a5));
}

.tv-category-room header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    margin-bottom: 14px;
}

.tv-category-room-title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    color: var(--tv-ink);
}

.tv-category-room-title:hover {
    text-decoration: none;
}

.tv-category-room-title > span {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border-radius: 18px;
    color: white;
    background: linear-gradient(135deg, var(--room-a, #315cf6), var(--room-b, #12b5a5));
}

.tv-category-room h2,
.tv-category-room h3 {
    margin: 0;
    color: var(--tv-ink);
    font-size: 1.08rem;
    letter-spacing: -.02em;
}

.tv-category-room p {
    margin: 5px 0 0;
    color: var(--tv-muted);
    line-height: 1.42;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tv-category-room header em {
    font-style: normal;
    color: var(--room-a, var(--tv-accent));
    background: color-mix(in srgb, var(--room-a, var(--tv-accent)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--room-a, var(--tv-accent)) 18%, transparent);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: .78rem;
    font-weight: 950;
    white-space: nowrap;
}

.tv-category-room ul {
    display: grid;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.tv-category-room li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--room-a, var(--tv-accent)) 10%, var(--tv-line));
    border-radius: 16px;
    background: color-mix(in srgb, var(--room-a, var(--tv-accent)) 4%, var(--tv-surface-strong));
}

.tv-library-room li {
    grid-template-columns: minmax(0, 1fr);
}

.tv-library-room ul {
    max-height: none;
}

.tv-category-room li:hover {
    border-color: color-mix(in srgb, var(--room-a, var(--tv-accent)) 28%, var(--tv-line));
    box-shadow: 0 10px 32px rgba(15,23,42,.07);
}

.tv-category-room li > a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--tv-ink);
}

.tv-category-room li > a:hover {
    text-decoration: none;
}

.tv-category-room li > a > span:first-child {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 13px;
    color: var(--room-a, var(--tv-accent));
    background: color-mix(in srgb, var(--room-a, var(--tv-accent)) 12%, transparent);
}

.tv-category-room li b,
.tv-category-room li small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-category-room li b {
    color: var(--tv-ink);
    font-size: .9rem;
    font-weight: 950;
}

.tv-category-room li small {
    color: var(--tv-muted);
    font-size: .76rem;
    font-weight: 700;
}

.tv-library-status {
    justify-self: end;
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid color-mix(in srgb, var(--room-a, var(--tv-accent)) 18%, transparent);
    border-radius: 999px;
    padding: 5px 8px;
    color: var(--room-a, var(--tv-accent));
    background: color-mix(in srgb, var(--room-a, var(--tv-accent)) 8%, transparent);
    font-size: .68rem;
    font-weight: 950;
}

.tv-tool-button-row {
    padding: 0 !important;
    overflow: hidden;
    border-radius: 22px !important;
    background: transparent !important;
}

.tv-tool-button {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100%;
    min-height: 72px;
    padding: 12px 14px;
    border: 1px solid rgba(19,33,24,.10);
    border-radius: 22px;
    color: var(--tv-ink) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.88));
    text-decoration: none !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.dark .tv-tool-button {
    border-color: rgba(255,255,255,.10);
    background: rgba(255,255,255,.055);
}

.tv-tool-button:hover,
.tv-tool-button:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--room-a, var(--tv-accent)) 34%, rgba(19,33,24,.10));
    background: color-mix(in srgb, var(--room-a, var(--tv-accent)) 7%, white);
    box-shadow: 0 14px 36px rgba(19,33,24,.08);
}

.tv-tool-button-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 16px;
    color: #101812;
    background: color-mix(in srgb, var(--room-a, var(--tv-accent)) 16%, white);
}

.tv-tool-button-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.tv-tool-button-copy b {
    color: var(--tv-ink);
    font-size: .94rem;
    font-weight: 950;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.tv-tool-button-copy small {
    color: var(--tv-muted);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tv-tool-button-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    color: var(--room-a, var(--tv-accent));
}

.tv-tool-button-meta em {
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid color-mix(in srgb, var(--room-a, var(--tv-accent)) 18%, transparent);
    border-radius: 999px;
    padding: 5px 8px;
    color: var(--room-a, var(--tv-accent));
    background: color-mix(in srgb, var(--room-a, var(--tv-accent)) 8%, transparent);
    font-size: .68rem;
    font-style: normal;
    font-weight: 950;
}

.tv-category-bookmark-button {
    color: var(--room-a, var(--tv-accent)) !important;
}

.tv-category-room-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    color: var(--room-a, var(--tv-accent));
    font-weight: 950;
}

.tone-0 { --room-a:#dc2626; --room-b:#f97316; --pill-accent:#dc2626; } /* Security */
.tone-1 { --room-a:#2563eb; --room-b:#06b6d4; --pill-accent:#2563eb; } /* Web and network */
.tone-2 { --room-a:#16a34a; --room-b:#84cc16; --pill-accent:#16a34a; } /* Money and banking */
.tone-3 { --room-a:#7c3aed; --room-b:#ec4899; --pill-accent:#7c3aed; } /* Games */
.tone-4 { --room-a:#4f46e5; --room-b:#0891b2; --pill-accent:#4f46e5; } /* Code and developer */
.tone-5 { --room-a:#0f766e; --room-b:#14b8a6; --pill-accent:#0f766e; } /* Data and encoding */
.tone-6 { --room-a:#9333ea; --room-b:#f59e0b; --pill-accent:#9333ea; } /* Smart generators */
.tone-7 { --room-a:#475569; --room-b:#0f172a; --pill-accent:#475569; } /* Other */
.tone-8 { --room-a:#ea580c; --room-b:#f59e0b; --pill-accent:#ea580c; } /* Calculators */
.tone-9 { --room-a:#be123c; --room-b:#fb7185; --pill-accent:#be123c; } /* Text */
.tone-10 { --room-a:#0891b2; --room-b:#38bdf8; --pill-accent:#0891b2; } /* Converters */
.tone-11 { --room-a:#0284c7; --room-b:#7dd3fc; --pill-accent:#0284c7; } /* Date and time */
.tone-12 { --room-a:#059669; --room-b:#34d399; --pill-accent:#059669; } /* Productivity and utilities */
.tone-13 { --room-a:#b45309; --room-b:#fbbf24; --pill-accent:#b45309; } /* Business */
.tone-14 { --room-a:#7c2d12; --room-b:#fb923c; --pill-accent:#7c2d12; } /* Learning */

.tv-privacy-band {
    border-radius: 30px;
}

.tv-other-content {
    display: grid;
    gap: clamp(12px, 2vw, 20px);
    scroll-margin-top: 110px;
}

.tv-other-head {
    margin-bottom: -8px;
}

.tv-other-content > .tool-workflow-showcase {
    margin-top: 0;
    margin-bottom: 0;
}

@media (max-width: 980px) {
    .tv-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .tv-command-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tv-home-overview {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .tv-search-start {
        padding-top: 0;
    }

    .tv-home-jumpbar {
        position: static;
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        width: 100%;
        border-radius: 22px;
        -webkit-overflow-scrolling: touch;
    }

    .tv-home-jumpbar a {
        flex: 0 0 auto;
    }

    .tv-home-overview {
        gap: 12px;
    }

    .tv-about-app-card {
        padding: 18px;
        border-radius: 26px;
    }

    .tv-feature-tool-board {
        grid-template-columns: 1fr;
    }

    .tv-feature-tool-card {
        min-height: 126px;
        border-radius: 24px;
    }

    .tv-command-hero {
        padding: 18px;
        border-radius: 26px;
    }

    .tv-command-hero h1 {
        font-size: clamp(2.1rem, 15vw, 3.8rem);
        letter-spacing: -.06em;
    }

    .tv-command-search {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 10px 12px;
        min-height: 0;
    }

    .tv-command-search .mud-button-root {
        grid-column: 1 / -1;
        width: 100%;
    }

    .tv-command-stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .tv-command-stats article {
        padding: 12px;
        border-radius: 18px;
    }

    .tv-dashboard-grid,
    .tv-category-card-grid {
        gap: 12px;
    }

    .tv-card-head {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .tv-card-head .mud-chip {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .tv-category-pill-grid {
        grid-template-columns: 1fr;
    }

    .tv-bookmark-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tv-bookmark-tile {
        min-height: 82px !important;
        border-radius: 17px !important;
    }

    .tv-bookmark-tile span {
        width: 34px;
        height: 34px;
        border-radius: 13px;
    }

    .tv-bookmark-tile b {
        font-size: .68rem;
    }

    .tv-category-card-grid {
        grid-template-columns: 1fr;
    }

    .tv-library-category-grid {
        grid-template-columns: 1fr;
    }

    .tv-category-room {
        padding: 15px;
        border-radius: 23px !important;
    }

    .tv-category-room header {
        grid-template-columns: 1fr;
    }

    .tv-category-room header em {
        justify-self: start;
    }

    .tv-tool-button {
        grid-template-columns: 40px minmax(0, 1fr) !important;
        min-height: 68px;
        padding: 11px;
    }

    .tv-tool-button-icon {
        width: 40px;
        height: 40px;
    }

    .tv-tool-button-meta {
        grid-column: 2;
        justify-content: flex-start;
    }

    .tv-tool-button-meta em {
        max-width: 160px;
    }
}

/* App-wide typography normalization: keep DaivVerse readable and tool-focused instead of oversized. */
:root {
    --tv-type-xs: .75rem;
    --tv-type-sm: .84rem;
    --tv-type-base: .94rem;
    --tv-type-md: 1rem;
    --tv-type-lg: 1.12rem;
    --tv-type-xl: 1.35rem;
    --tv-type-2xl: 1.72rem;
    --tv-type-hero: clamp(2rem, 4vw, 3.25rem);
}

html {
    font-size: 16px;
}

body,
.mud-typography-body1,
.mud-typography-body2,
.mud-input-slot,
.mud-list-item-text,
.mud-table,
.mud-button-root {
    font-size: var(--tv-type-base);
    line-height: 1.55;
}

h1,
.mud-typography-h1 {
    font-size: var(--tv-type-hero) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
}

h2,
.mud-typography-h2 {
    font-size: clamp(1.35rem, 2.2vw, 2rem) !important;
    line-height: 1.14 !important;
    letter-spacing: -.025em !important;
}

h3,
.mud-typography-h3 {
    font-size: clamp(1.15rem, 1.7vw, 1.55rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -.015em !important;
}

.mud-typography-h4 {
    font-size: clamp(1.08rem, 1.45vw, 1.35rem) !important;
    line-height: 1.22 !important;
}

.mud-typography-h5,
.studio-panel-head h2,
.section-title h2,
.page-title-row h1 {
    font-size: var(--tv-type-xl) !important;
    line-height: 1.22 !important;
    letter-spacing: -.018em !important;
}

.mud-typography-h6,
.tool-content-section h2,
.tool-meta-grid h2,
.calc-card h3 {
    font-size: var(--tv-type-lg) !important;
    line-height: 1.25 !important;
}

.mud-typography-caption,
.breadcrumb,
.badge,
.badge-soft,
.tool-card-badges em,
.tool-list-badges em {
    font-size: var(--tv-type-xs) !important;
}

.tool-head h1,
.validator-hero h1,
.category-market-hero h1,
.readable-category-hero h1,
.not-found h1,
.not-found-hero-card h1 {
    font-size: clamp(1.55rem, 2.8vw, 2.35rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -.025em !important;
}

.tv-command-hero h1,
.hero-copy h1,
.home-command-head h1,
.compact-library-hero h1,
.compact-library-hero h2,
.blog-hero h1,
.info-hero h1 {
    font-size: var(--tv-type-hero) !important;
    line-height: 1.08 !important;
    letter-spacing: -.04em !important;
}

.tv-command-hero-copy p,
.hero-text,
.compact-library-hero p,
.category-market-hero p,
.readable-category-hero p,
.studio-panel-head p {
    font-size: var(--tv-type-base) !important;
    line-height: 1.58 !important;
}

.tv-command-search .mud-input-slot,
.nav-search-mud .mud-input-slot,
.top-search input,
.category-search-card input {
    font-size: var(--tv-type-base) !important;
}

.tv-command-stats b,
.sv,
.calc-result-chip strong,
.clock-card strong,
.mini-metrics b {
    font-size: var(--tv-type-xl) !important;
}

.tv-card-head h2,
.tv-category-room h2,
.tv-category-room h3,
.tool-workflow-title b,
.tcard-copy b,
.category-readable-title,
.mud-tool-tile-copy b {
    font-size: var(--tv-type-md) !important;
    line-height: 1.25 !important;
}

.tv-card-head p,
.tv-category-room p,
.tv-category-room li small,
.tool-workflow-title small,
.tool-workflow-card .mud-typography-body2,
.tcard-copy p,
.category-readable-description,
.mud-tool-tile-copy small {
    font-size: var(--tv-type-sm) !important;
    line-height: 1.42 !important;
}

.tv-bookmark-tile b,
.home-bookmark-tile b,
.studio-quick-tile b {
    font-size: .74rem !important;
    line-height: 1.18 !important;
}

@media (max-width: 680px) {
    :root {
        --tv-type-base: .9rem;
        --tv-type-hero: clamp(1.9rem, 9vw, 2.65rem);
    }

    body,
    .mud-typography-body1,
    .mud-typography-body2,
    .mud-input-slot,
    .mud-button-root {
        font-size: var(--tv-type-base);
    }

    .tv-command-hero h1,
    .hero-copy h1,
    .home-command-head h1,
    .compact-library-hero h1,
    .compact-library-hero h2 {
        font-size: var(--tv-type-hero) !important;
    }

    .tv-bookmark-tile b,
    .home-bookmark-tile b,
    .studio-quick-tile b {
        font-size: .68rem !important;
    }
}

/* All-tools MudBlazor command center. */
.mud-tool-library {
    width: min(1500px, 100%);
    display: grid;
    gap: clamp(24px, 3vw, 38px);
}

.mud-tool-command,
.mud-tool-groups {
    position: relative;
    overflow: hidden;
    padding: clamp(14px, 2vw, 24px) !important;
    border: 1px solid var(--tv-line) !important;
    border-radius: var(--tv-panel-radius) !important;
    background:
        radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--tv-accent) 15%, transparent), transparent 34%),
        radial-gradient(circle at 94% 0%, rgba(18,165,148,.12), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.90), rgba(248,250,252,.82)) !important;
    box-shadow: var(--tv-shadow) !important;
}

.dark .mud-tool-command,
.dark .mud-tool-groups {
    background:
        radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--tv-accent) 20%, transparent), transparent 34%),
        radial-gradient(circle at 94% 0%, rgba(18,165,148,.15), transparent 32%),
        linear-gradient(180deg, rgba(17,24,39,.92), rgba(17,24,39,.74)) !important;
}

.mud-tool-command-head {
    flex-wrap: wrap;
    gap: 12px;
}

.mud-tool-command-head .mud-typography-h5 {
    color: var(--tv-ink);
    font-size: clamp(1.15rem, 2vw, 1.7rem);
    font-weight: 950;
    letter-spacing: -.035em;
}

.mud-tool-command-head .mud-typography-body2 {
    color: var(--tv-muted);
    font-weight: 700;
}

.mud-tool-command-avatar {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--tv-accent) 18%, white), rgba(18,165,148,.12)) !important;
    color: var(--tv-accent) !important;
}

.mud-tool-filter-grid .mud-input-control {
    margin: 0 !important;
}

.mud-tool-filter-grid .mud-input-root {
    min-height: 54px;
    background: rgba(255,255,255,.74);
}

.mud-tool-filter-grid > .mud-grid-item:first-child .mud-input-root {
    min-height: 62px;
    border-radius: 22px !important;
    background: #ffffff !important;
}

.mud-tool-filter-grid > .mud-grid-item:first-child .mud-input-slot {
    font-size: 1rem !important;
    font-weight: 800;
}

.dark .mud-tool-filter-grid .mud-input-root {
    background: rgba(255,255,255,.07);
}

.mud-tool-chip-row {
    flex-wrap: wrap;
    gap: 8px !important;
    padding-top: 4px;
}

.mud-tool-chip-row .mud-button-root {
    border-radius: 999px !important;
    text-transform: none !important;
    font-weight: 900 !important;
}

.mud-tool-expansions {
    display: grid;
    gap: 12px;
}

.mud-tool-expansions .mud-expand-panel {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--tv-accent) 12%, var(--tv-line));
    border-radius: 24px !important;
    background: rgba(255,255,255,.72) !important;
    box-shadow: 0 10px 28px rgba(15,23,42,.045);
}

.dark .mud-tool-expansions .mud-expand-panel {
    background: rgba(255,255,255,.055) !important;
}

.mud-tool-expansions .mud-expand-panel-header {
    min-height: 58px;
    padding: 14px 18px !important;
    color: var(--tv-ink) !important;
    font-weight: 950 !important;
}

.mud-tool-expansions .mud-expand-panel-content {
    padding: 0 16px 16px !important;
}

.mud-tool-panel-note {
    display: block;
    margin: 0 0 12px;
    color: var(--tv-muted) !important;
    font-weight: 800;
}

.mud-tool-tile {
    min-height: 76px !important;
    padding: 10px 12px !important;
    border-radius: 20px !important;
    border-color: color-mix(in srgb, var(--tv-accent) 14%, var(--tv-line)) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.76)) !important;
    text-transform: none !important;
}

.dark .mud-tool-tile {
    background: linear-gradient(180deg, rgba(17,24,39,.92), rgba(17,24,39,.70)) !important;
}

.mud-tool-tile .mud-button-label {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.mud-tool-tile-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--tv-accent) 16%, transparent), rgba(18,165,148,.10));
    color: var(--tv-accent);
}

.mud-tool-tile-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
    text-align: left;
}

.mud-tool-tile-copy b {
    color: var(--tv-ink);
    font-size: .9rem;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mud-tool-tile-copy small {
    display: -webkit-box;
    overflow: hidden;
    color: var(--tv-muted);
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.mud-tool-tile-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid color-mix(in srgb, var(--tv-accent) 16%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--tv-accent) 8%, transparent);
    color: var(--tv-muted);
    font-size: .68rem;
    font-weight: 950;
    white-space: nowrap;
}

.mud-tool-tile:hover,
.mud-tool-tile:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--tv-accent) 42%, transparent) !important;
    box-shadow: var(--tv-shadow-hover) !important;
}

.tool-workflow-showcase {
    width: min(1500px, 100%);
    margin: clamp(12px, 2vw, 24px) auto;
    padding: clamp(14px, 2vw, 22px);
    border: 1px solid color-mix(in srgb, var(--tv-accent) 12%, var(--tv-line));
    border-radius: var(--tv-panel-radius);
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--tv-accent) 12%, transparent), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.78));
    box-shadow: var(--tv-shadow);
}

.tool-workflow-compact {
    margin-top: 0;
}

.tool-workflow-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.tool-workflow-head .mud-typography-h5 {
    color: var(--tv-ink);
    font-weight: 950;
    letter-spacing: -.02em;
}

.tool-workflow-head .mud-typography-body2 {
    color: var(--tv-muted);
    font-weight: 700;
}

.tool-workflow-card {
    height: 100%;
    padding: 16px !important;
    border: 1px solid color-mix(in srgb, var(--tv-accent) 12%, var(--tv-line)) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.80) !important;
}

.dark .tool-workflow-card,
.dark .tool-workflow-showcase {
    background: linear-gradient(180deg, rgba(17,24,39,.92), rgba(17,24,39,.72)) !important;
}

.tool-workflow-icon {
    background: color-mix(in srgb, var(--tv-accent) 14%, transparent) !important;
    color: var(--tv-accent) !important;
}

.tool-workflow-title {
    display: grid;
    min-width: 0;
}

.tool-workflow-title b {
    color: var(--tv-ink);
    font-size: .98rem;
    font-weight: 950;
}

.tool-workflow-title small,
.tool-workflow-card .mud-typography-body2 {
    color: var(--tv-muted);
    font-weight: 700;
    line-height: 1.35;
}

.tool-workflow-links {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.tool-workflow-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid color-mix(in srgb, var(--tv-accent) 15%, var(--tv-line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--tv-accent) 6%, transparent);
    color: var(--tv-ink);
    font-size: .75rem;
    font-weight: 850;
    text-decoration: none;
}

.tool-workflow-chip:hover,
.tool-workflow-chip:focus-visible {
    border-color: color-mix(in srgb, var(--tv-accent) 42%, transparent);
    background: color-mix(in srgb, var(--tv-accent) 11%, transparent);
}

.universal-empty-result {
    display: grid;
    gap: 8px;
    place-items: center;
    min-height: 160px;
    margin: 8px 0 14px;
    padding: 18px;
    border: 1px dashed color-mix(in srgb, var(--tv-accent) 24%, var(--tv-line));
    border-radius: 18px;
    background: color-mix(in srgb, var(--tv-accent) 5%, transparent);
    color: var(--tv-muted);
    text-align: center;
}

.universal-empty-result .mud-icon-root {
    color: var(--tv-accent);
}

.universal-empty-result b {
    color: var(--tv-ink);
}

@media (max-width: 680px) {
    .mud-tool-command,
    .mud-tool-groups {
        padding: 12px !important;
    }

    .mud-tool-tile {
        min-height: 68px !important;
    }

    .mud-tool-tile .mud-button-label {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .mud-tool-tile-icon {
        width: 38px;
        height: 38px;
    }

    .mud-tool-tile-badge {
        grid-column: 2;
        justify-self: start;
    }

    .tool-workflow-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Product-card workspace refresh: bold cards, calm canvas, compact content hierarchy. */
:root {
    --tv-card-lime: #9fe870;
    --tv-card-mint: #d9f6ea;
    --tv-card-cream: #f7f4e8;
    --tv-card-ink: #132118;
}

.app:not(.dark) {
    background:
        radial-gradient(circle at 10% 0%, rgba(159, 232, 112, .36), transparent 24%),
        radial-gradient(circle at 88% 10%, rgba(20, 184, 166, .18), transparent 22%),
        linear-gradient(180deg, #f8f7ef 0%, #f3f7ef 45%, #eef6f4 100%);
}

.tv-command-home {
    gap: clamp(16px, 2vw, 26px);
}

.tv-command-search {
    min-height: 82px;
    border: 0;
    border-radius: 34px;
    background:
        radial-gradient(circle at 4% 0%, rgba(255,255,255,.52), transparent 28%),
        linear-gradient(135deg, var(--tv-card-lime), #c9f7a6);
    box-shadow: 0 24px 70px rgba(38, 67, 26, .18);
}

.dark .tv-command-search {
    background:
        radial-gradient(circle at 4% 0%, rgba(255,255,255,.12), transparent 28%),
        linear-gradient(135deg, rgba(159,232,112,.24), rgba(15,23,42,.92));
}

.tv-command-search > .mud-icon-root,
.tv-command-search .mud-input-slot,
.tv-command-search input::placeholder {
    color: var(--tv-card-ink) !important;
}

.dark .tv-command-search > .mud-icon-root,
.dark .tv-command-search .mud-input-slot,
.dark .tv-command-search input::placeholder {
    color: var(--tv-ink) !important;
}

.tv-command-search .mud-button-root {
    border-radius: 999px !important;
    background: #101812 !important;
    color: white !important;
    box-shadow: none !important;
}

.tv-home-jumpbar {
    border: 0;
    background: rgba(255,255,255,.76);
    box-shadow: 0 14px 44px rgba(19,33,24,.08);
}

.tv-home-jumpbar a {
    color: #213126;
}

.tv-home-jumpbar a:hover,
.tv-home-jumpbar a:focus-visible {
    background: var(--tv-card-mint);
    color: #101812;
}

.tv-bookmark-console,
.tv-browse-console,
.tv-category-room,
.mud-tool-command,
.mud-tool-groups,
.tool-workflow-showcase {
    border-color: rgba(19,33,24,.10) !important;
    border-radius: 34px !important;
    background: rgba(255,255,255,.86) !important;
    box-shadow: 0 24px 64px rgba(19,33,24,.08) !important;
}

.dark .tv-bookmark-console,
.dark .tv-browse-console,
.dark .tv-category-room,
.dark .mud-tool-command,
.dark .mud-tool-groups,
.dark .tool-workflow-showcase {
    background: linear-gradient(180deg, rgba(17,24,39,.94), rgba(15,23,42,.78)) !important;
}

.tv-card-icon.bookmark {
    color: #101812;
    background: linear-gradient(135deg, var(--tv-card-lime), #d7ffb8);
}

.tv-card-icon.browse {
    color: #101812;
    background: linear-gradient(135deg, #9cebdc, #d9f6ea);
}

.tv-bookmark-grid {
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
}

.tv-bookmark-tile {
    min-height: 104px !important;
    border: 1px solid rgba(19,33,24,.10) !important;
    border-radius: 28px !important;
    background:
        linear-gradient(180deg, #ffffff, #f8fbf5) !important;
    box-shadow: none !important;
}

.tv-bookmark-tile span {
    color: #101812;
    background: var(--tv-card-mint);
}

.tv-bookmark-tile:hover,
.tv-bookmark-tile:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(19,33,24,.20) !important;
    background: linear-gradient(180deg, #ffffff, #f0fbdf) !important;
}

.tv-category-strip .tv-category-pill {
    min-height: 58px;
    border: 0;
    border-radius: 24px;
    background: color-mix(in srgb, var(--pill-accent, var(--tv-accent)) 12%, white);
    box-shadow: none;
}

.tv-category-room {
    padding: 20px;
}

.tv-category-room::before {
    height: 0;
}

.tv-category-room-title > span {
    color: #101812;
    background: linear-gradient(135deg, color-mix(in srgb, var(--room-a) 24%, white), color-mix(in srgb, var(--room-b) 32%, white));
}

.tv-category-room header em {
    border: 0;
    color: #101812;
    background: color-mix(in srgb, var(--room-a) 18%, white);
}

.tv-category-room li {
    border: 0;
    border-radius: 22px;
    background: color-mix(in srgb, var(--room-a, var(--tv-accent)) 7%, white);
}

.tv-category-room li > a > span:first-child {
    color: #101812;
    background: rgba(255,255,255,.72);
}

.mud-tool-command {
    background:
        radial-gradient(circle at 3% 0%, rgba(159,232,112,.28), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.90), rgba(248,251,245,.86)) !important;
}

.mud-tool-groups {
    background: rgba(255,255,255,.82) !important;
}

/* White canvas mode for the card workspace. Keep color as accent, not as the page background. */
html,
body,
.app:not(.dark) {
    background: #ffffff !important;
}

.app:not(.dark) .main {
    background: #ffffff;
}

.app:not(.dark) .tv-command-search,
.app:not(.dark) .tv-home-jumpbar,
.app:not(.dark) .tv-about-app-card,
.app:not(.dark) .tv-feature-tool-card,
.app:not(.dark) .tv-bookmark-console,
.app:not(.dark) .tv-browse-console,
.app:not(.dark) .tv-category-room,
.app:not(.dark) .mud-tool-command,
.app:not(.dark) .mud-tool-groups,
.app:not(.dark) .tool-workflow-showcase,
.app:not(.dark) .privacy-band,
.app:not(.dark) .studio-section {
    background: #ffffff !important;
}

.app:not(.dark) .tv-command-search {
    border: 1px solid rgba(19,33,24,.12);
    box-shadow: 0 18px 54px rgba(19,33,24,.08);
}

.app:not(.dark) .tv-command-search > .mud-icon-root {
    color: var(--tv-accent) !important;
}

.app:not(.dark) .tv-command-search .mud-input-slot,
.app:not(.dark) .tv-command-search input::placeholder {
    color: var(--tv-ink) !important;
}

.app:not(.dark) .tv-command-search .mud-button-root {
    background: var(--tv-ink) !important;
    color: #ffffff !important;
}

.app:not(.dark) .tv-category-strip .tv-category-pill,
.app:not(.dark) .tv-category-room li,
.app:not(.dark) .tv-menu-hub-note {
    background: #ffffff;
    border: 1px solid rgba(19,33,24,.10);
}

/* DaivVerse command-market refresh: original finance-dashboard inspired UI. */
.app:not(.dark) {
    background:
        linear-gradient(180deg, #ffffff 0, #f7f9ff 42%, #f4fbf8 100%);
}

.mud-topbar {
    background: rgba(255, 255, 255, .92) !important;
    border-bottom: 1px solid rgba(22, 34, 51, .08) !important;
    box-shadow: 0 14px 44px rgba(22, 34, 51, .06) !important;
}

.category-top-menu {
    padding: 5px;
    border: 1px solid rgba(22, 34, 51, .08);
    border-radius: 999px;
    background: rgba(246, 248, 252, .82);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.category-top-menu .mud-button-root {
    min-height: 36px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    font-size: .82rem !important;
    font-weight: 900 !important;
    color: #334155 !important;
}

.category-top-menu .mud-button-root:hover,
.category-top-menu .mud-button-root:focus-visible {
    background: #0f172a !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .16);
}

.tv-command-home {
    gap: clamp(18px, 2.5vw, 30px);
}

.tv-forex-command {
    display: grid;
    grid-template-columns: minmax(280px, .76fr) minmax(0, 1.55fr);
    gap: clamp(14px, 2vw, 22px);
    align-items: stretch;
}

.tv-market-watch-card,
.tv-menu-deck,
.library-market .mud-tool-command,
.library-market .mud-tool-groups {
    border: 1px solid rgba(22, 34, 51, .10) !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(37, 99, 235, .12), transparent 34%),
        linear-gradient(180deg, #ffffff, #fbfdff) !important;
    box-shadow: 0 22px 70px rgba(22, 34, 51, .08) !important;
}

.tv-market-watch-card {
    display: grid;
    align-self: start;
    align-content: start;
    gap: 14px;
    min-height: 268px;
    padding: clamp(22px, 3vw, 34px);
    border-radius: 34px;
    overflow: hidden;
}

.tv-market-watch-card h2 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.55rem, 3vw, 2.75rem);
    line-height: 1;
    letter-spacing: -.05em;
}

.tv-market-watch-card p {
    margin: 0;
    color: #64748b;
    font-size: .98rem;
    line-height: 1.6;
}

.tv-market-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.tv-market-stat-grid span {
    display: grid;
    gap: 3px;
    min-height: 72px;
    padding: 12px;
    border: 1px solid rgba(22, 34, 51, .08);
    border-radius: 20px;
    background: rgba(255,255,255,.72);
}

.tv-market-stat-grid b {
    color: #0f172a;
    font-size: 1.32rem;
    font-weight: 950;
}

.tv-market-stat-grid small {
    color: #64748b;
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.tv-menu-deck-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.tv-menu-deck {
    display: grid;
    gap: 14px;
    min-height: 212px;
    padding: 18px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--room-a, #315cf6) 18%, transparent), transparent 42%),
        linear-gradient(180deg, #ffffff, #fbfdff) !important;
}

.tv-menu-deck header {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.tv-menu-deck header > span {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 18px;
    background: color-mix(in srgb, var(--room-a, #315cf6) 14%, #ffffff);
    color: var(--room-a, #315cf6);
}

.tv-menu-deck h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 950;
}

.tv-menu-deck p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: .82rem;
    line-height: 1.4;
    font-weight: 700;
}

.tv-menu-category-strip,
.tv-menu-tool-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.tv-menu-category-strip a,
.tv-menu-tool-stack a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(22,34,51,.08);
    background: rgba(255,255,255,.78);
    color: #334155;
    font-size: .76rem;
    font-weight: 900;
    text-decoration: none;
}

.tv-menu-tool-stack a {
    background: #0f172a;
    color: #ffffff;
    border-color: rgba(15, 23, 42, .18);
}

.tv-menu-category-strip a:hover,
.tv-menu-tool-stack a:hover {
    transform: translateY(-1px);
    text-decoration: none;
    box-shadow: 0 12px 26px rgba(22,34,51,.12);
}

.tv-home-overview {
    margin-top: 0;
}

.tv-about-app-card,
.tv-feature-tool-card,
.tv-bookmark-console,
.tv-category-room,
.tv-menu-hub-note {
    border-color: rgba(22, 34, 51, .10) !important;
    box-shadow: 0 18px 56px rgba(22, 34, 51, .07) !important;
}

.tv-feature-tool-board {
    gap: 14px;
}

.tv-feature-tool-card {
    border-radius: 28px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--room-a, #315cf6) 18%, transparent), transparent 38%),
        linear-gradient(180deg, #ffffff, #fbfdff) !important;
}

.tool-first-library {
    background:
        radial-gradient(circle at 8% 0%, rgba(37, 99, 235, .10), transparent 28%),
        radial-gradient(circle at 90% 8%, rgba(20, 184, 166, .10), transparent 30%),
        linear-gradient(180deg, #ffffff 0, #f8fbff 100%);
}

.mud-tool-command.single-library-command {
    position: sticky;
    top: 82px;
    z-index: 5;
    border-radius: 30px !important;
}

.tv-library-category-grid {
    gap: 16px !important;
}

.tv-library-room {
    border-radius: 30px !important;
}

.tv-tool-button {
    min-height: 74px;
    border-radius: 22px !important;
    background: rgba(255,255,255,.82) !important;
}

.tv-tool-button:hover,
.tv-tool-button:focus-visible {
    background: #0f172a !important;
    color: #ffffff !important;
}

.tv-tool-button:hover .tv-tool-button-copy small,
.tv-tool-button:focus-visible .tv-tool-button-copy small {
    color: rgba(255,255,255,.72) !important;
}

.dark .tv-market-watch-card,
.dark .tv-menu-deck,
.dark .tv-about-app-card,
.dark .tv-feature-tool-card,
.dark .library-market .mud-tool-command,
.dark .library-market .mud-tool-groups {
    background:
        radial-gradient(circle at 12% 0%, rgba(59,130,246,.18), transparent 36%),
        linear-gradient(180deg, rgba(15,23,42,.96), rgba(2,6,23,.94)) !important;
    border-color: rgba(148,163,184,.18) !important;
}

.dark .tv-market-watch-card h2,
.dark .tv-menu-deck h3,
.dark .tv-market-stat-grid b {
    color: #f8fafc;
}

.dark .tv-market-watch-card p,
.dark .tv-menu-deck p {
    color: #cbd5e1;
}

@media (max-width: 1180px) {
    .tv-forex-command {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .tv-market-stat-grid,
    .tv-menu-deck-grid,
    .tv-feature-tool-board {
        grid-template-columns: 1fr;
    }

    .tv-market-watch-card,
    .tv-menu-deck {
        border-radius: 24px;
    }

    .mud-tool-command.single-library-command {
        position: relative;
        top: auto;
    }
}

.app:not(.dark) .tv-bookmark-tile {
    background: #ffffff !important;
}

.app:not(.dark) .tool-first-library {
    gap: clamp(28px, 3.4vw, 44px);
}

.app:not(.dark) .tool-first-library .single-library-command {
    padding-bottom: clamp(18px, 2.4vw, 30px) !important;
}

.app:not(.dark) .tool-first-library .single-tool-results {
    margin-top: 2px;
}

/* Simple dashboard pass: keep the homepage focused on search, clear menus, and a few key tools. */
.tv-simple-dashboard,
.tv-simple-tool-section {
    display: grid;
    gap: 16px;
}

.tv-simple-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 2px 2px 0;
}

.tv-simple-head h2 {
    margin: 8px 0 0;
    color: #0f172a;
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: 0;
}

.tv-simple-head p {
    max-width: 620px;
    margin: 6px 0 0;
    color: #64748b;
    font-size: .94rem;
    line-height: 1.55;
    font-weight: 650;
}

.tv-simple-menu-grid,
.tv-simple-tool-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.tv-simple-menu-card {
    display: grid;
    gap: 13px;
    min-height: 260px;
    padding: 18px;
    border: 1px solid rgba(22, 34, 51, .10);
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--room-a, #315cf6) 14%, transparent), transparent 36%),
        linear-gradient(180deg, #ffffff, #fbfdff);
    box-shadow: 0 14px 42px rgba(22, 34, 51, .06);
}

.tv-simple-menu-card header {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.tv-simple-menu-card header > span {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 16px;
    color: var(--room-a, #315cf6);
    background: color-mix(in srgb, var(--room-a, #315cf6) 13%, #ffffff);
}

.tv-simple-menu-card h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 950;
}

.tv-simple-menu-card p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: .83rem;
    line-height: 1.42;
    font-weight: 700;
}

.tv-simple-menu-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.tv-simple-menu-tags a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid rgba(22, 34, 51, .08);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    color: #334155;
    font-size: .73rem;
    font-weight: 850;
    text-decoration: none;
}

.tv-simple-tool-links {
    display: grid;
    gap: 8px;
}

.tv-simple-tool-links a {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 7px 9px;
    border: 1px solid rgba(22, 34, 51, .08);
    border-radius: 14px;
    background: rgba(255, 255, 255, .82);
    color: #0f172a;
    font-size: .82rem;
    font-weight: 900;
    text-decoration: none;
}

.tv-simple-tool-links a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-simple-tool-links a:hover,
.tv-simple-tool-links a:focus-visible,
.tv-simple-menu-tags a:hover,
.tv-simple-menu-tags a:focus-visible,
.tv-simple-menu-open:hover,
.tv-simple-menu-open:focus-visible {
    transform: translateY(-1px);
    text-decoration: none;
    box-shadow: 0 12px 26px rgba(22, 34, 51, .10);
}

.tv-simple-menu-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    margin-top: auto;
    border-radius: 14px;
    background: #0f172a;
    color: #ffffff;
    font-size: .82rem;
    font-weight: 950;
    text-decoration: none;
}

.tv-simple-tool-grid .tv-feature-tool-card {
    min-height: 146px;
    border-radius: 22px;
}

.tv-category-card-grid {
    gap: 14px;
}

.tv-category-room {
    border-radius: 24px;
}

.tv-category-room ul {
    gap: 8px;
}

.tv-category-room li {
    min-height: 58px;
}

.tv-bookmark-grid {
    gap: 10px;
}

.mud-tool-command.single-library-command {
    position: relative !important;
    top: auto !important;
}

.dark .tv-simple-head h2,
.dark .tv-simple-menu-card h3,
.dark .tv-simple-tool-links a {
    color: #f8fafc;
}

.dark .tv-simple-head p,
.dark .tv-simple-menu-card p {
    color: #cbd5e1;
}

.dark .tv-simple-menu-card,
.dark .tv-simple-tool-links a {
    background: rgba(15, 23, 42, .82);
    border-color: rgba(148, 163, 184, .18);
}

@media (max-width: 1060px) {
    .tv-simple-menu-grid,
    .tv-simple-tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .tv-home-jumpbar {
        overflow: visible;
        flex-wrap: wrap;
        justify-content: flex-start;
        border-radius: 22px;
    }

    .tv-home-jumpbar a {
        flex: 1 1 calc(50% - 8px);
        justify-content: center;
        min-width: 0;
    }

    .tv-simple-head {
        display: grid;
        align-items: start;
    }

    .tv-simple-menu-grid,
    .tv-simple-tool-grid {
        grid-template-columns: 1fr;
    }

    .tv-simple-menu-card {
        min-height: 0;
        border-radius: 20px;
    }
}

/* One-page tool map: a simple card dashboard focused on finding and understanding tools. */
.tv-onepage-tool-map {
    display: grid;
    gap: 18px;
}

.tv-onepage-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
    padding: clamp(18px, 2.4vw, 28px);
    border: 1px solid rgba(22, 34, 51, .10);
    border-radius: 28px;
    background:
        radial-gradient(circle at 0% 0%, rgba(37, 99, 235, .10), transparent 32%),
        linear-gradient(180deg, #ffffff, #fbfdff);
    box-shadow: 0 16px 46px rgba(22, 34, 51, .06);
}

.tv-onepage-head h2 {
    margin: 8px 0 0;
    color: #0f172a;
    font-size: clamp(1.45rem, 2.4vw, 2.2rem);
    line-height: 1.06;
    font-weight: 950;
    letter-spacing: 0;
}

.tv-onepage-head p {
    max-width: 760px;
    margin: 8px 0 0;
    color: #64748b;
    font-size: .98rem;
    line-height: 1.58;
    font-weight: 650;
}

.tv-onepage-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(92px, 1fr));
    gap: 8px;
}

.tv-onepage-stats span {
    display: grid;
    gap: 2px;
    min-height: 66px;
    padding: 12px;
    border: 1px solid rgba(22, 34, 51, .08);
    border-radius: 18px;
    background: rgba(255, 255, 255, .82);
}

.tv-onepage-stats b {
    color: #0f172a;
    font-size: 1.3rem;
    line-height: 1;
    font-weight: 950;
}

.tv-onepage-stats small {
    color: #64748b;
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.tv-onepage-category-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.tv-onepage-category-card {
    display: grid;
    gap: 14px;
    align-content: start;
    width: 100%;
    padding: clamp(14px, 1.8vw, 20px);
    border: 1px solid rgba(22, 34, 51, .10);
    border-radius: 26px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--room-a, #315cf6) 13%, transparent), transparent 36%),
        linear-gradient(180deg, #ffffff, #fbfdff);
    box-shadow: 0 14px 42px rgba(22, 34, 51, .055);
}

.tv-onepage-category-card header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.tv-onepage-category-title {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-width: 0;
    color: #0f172a;
    text-decoration: none;
}

.tv-onepage-category-title > span {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 16px;
    color: var(--room-a, #315cf6);
    background: color-mix(in srgb, var(--room-a, #315cf6) 13%, #ffffff);
}

.tv-onepage-category-title h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1.05rem;
    line-height: 1.2;
    font-weight: 950;
}

.tv-onepage-category-title p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: .84rem;
    line-height: 1.45;
    font-weight: 650;
}

.tv-onepage-tool-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 8px;
}

.tv-onepage-tool-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 58px;
    padding: 10px;
    border: 1px solid rgba(22, 34, 51, .08);
    border-radius: 18px;
    background: rgba(255, 255, 255, .82);
    color: #0f172a;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.tv-onepage-tool-card:hover,
.tv-onepage-tool-card:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--room-a, #315cf6) 28%, rgba(22, 34, 51, .08));
    box-shadow: 0 12px 26px rgba(22, 34, 51, .09);
    text-decoration: none;
}

.tv-onepage-tool-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 12px;
    color: var(--room-a, #315cf6);
    background: color-mix(in srgb, var(--room-a, #315cf6) 10%, #ffffff);
}

.tv-onepage-tool-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.tv-onepage-tool-copy b {
    overflow-wrap: anywhere;
    color: #0f172a;
    font-size: .86rem;
    line-height: 1.2;
    font-weight: 950;
}

.tv-onepage-tool-copy small {
    display: block;
    color: #64748b;
    font-size: .74rem;
    line-height: 1.34;
    font-weight: 650;
}

.tv-onepage-tool-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: #0f172a;
    color: #ffffff;
    font-size: .72rem;
    font-weight: 950;
}

.dark .tv-onepage-head,
.dark .tv-onepage-category-card,
.dark .tv-onepage-tool-card {
    background: rgba(15, 23, 42, .86);
    border-color: rgba(148, 163, 184, .18);
}

.dark .tv-onepage-head h2,
.dark .tv-onepage-stats b,
.dark .tv-onepage-category-title h3,
.dark .tv-onepage-tool-copy b,
.dark .tv-onepage-tool-card {
    color: #f8fafc;
}

.dark .tv-onepage-head p,
.dark .tv-onepage-stats small,
.dark .tv-onepage-category-title p,
.dark .tv-onepage-tool-copy small {
    color: #cbd5e1;
}

@media (max-width: 980px) {
    .tv-onepage-head,
    .tv-onepage-tool-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .tv-category-filter-strip {
        justify-content: flex-start;
        padding-inline: 2px;
    }

    .tv-category-filter-label {
        width: 100%;
        justify-content: flex-start;
    }

    .tv-onepage-head,
    .tv-onepage-category-card {
        border-radius: 22px;
    }

    .tv-onepage-category-card header,
    .tv-onepage-tool-card {
        grid-template-columns: 1fr;
    }

    .tv-onepage-tool-card {
        align-items: start;
    }

    .tv-onepage-tool-open {
        justify-self: start;
    }
}

.nav-bookmark-cta {
    min-height: 38px;
    border-radius: var(--tv-pill-radius) !important;
    font-weight: 850 !important;
    text-transform: none !important;
}

.tv-bookmarks-page {
    gap: clamp(18px, 2.4vw, 28px);
}

.tv-bookmarks-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    padding: clamp(20px, 3vw, 34px);
    border: 1px solid rgba(22, 34, 51, .10);
    border-radius: 30px;
    background:
        radial-gradient(circle at 0% 0%, rgba(37, 99, 235, .10), transparent 34%),
        linear-gradient(180deg, #ffffff, #fbfdff);
    box-shadow: 0 16px 48px rgba(22, 34, 51, .06);
}

.tv-bookmarks-hero h1 {
    margin: 8px 0 0;
    color: #0f172a;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0;
}

.tv-bookmarks-hero p {
    max-width: 680px;
    margin: 8px 0 0;
    color: #64748b;
    font-size: .98rem;
    line-height: 1.55;
    font-weight: 650;
}

.tv-bookmarks-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr);
    gap: 16px;
    align-items: start;
}

.tv-bookmarks-panel {
    display: grid;
    gap: 16px;
    padding: clamp(16px, 2vw, 22px);
    border: 1px solid rgba(22, 34, 51, .10) !important;
    border-radius: 26px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 42px rgba(22, 34, 51, .055) !important;
}

.tv-bookmarks-panel-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.tv-bookmarks-panel-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.15rem;
    line-height: 1.2;
    font-weight: 950;
}

.tv-bookmarks-panel-head p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: .86rem;
    font-weight: 650;
}

.tv-bookmark-empty {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 260px;
    padding: 28px;
    border: 1px dashed rgba(22, 34, 51, .18);
    border-radius: 22px;
    background: #f8fbff;
    text-align: center;
}

.tv-bookmark-empty .mud-icon-root {
    color: var(--tv-accent);
    font-size: 2.4rem;
}

.tv-bookmark-empty h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 950;
}

.tv-bookmark-empty p {
    max-width: 440px;
    margin: 0;
    color: #64748b;
    font-size: .9rem;
    line-height: 1.5;
    font-weight: 650;
}

.tv-bookmark-manager-list,
.tv-bookmark-search-list {
    display: grid;
    gap: 10px;
}

.tv-bookmark-manager-card,
.tv-bookmark-search-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid rgba(22, 34, 51, .08);
    border-radius: 18px;
    background: rgba(248, 251, 255, .8);
}

.tv-bookmark-manager-card > a,
.tv-bookmark-search-card > a {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
    color: #0f172a;
    text-decoration: none;
}

.tv-bookmark-manager-card > a > span:first-child,
.tv-bookmark-search-card > a > span:first-child {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    color: var(--tv-accent);
    background: color-mix(in srgb, var(--tv-accent) 10%, #ffffff);
}

.tv-bookmark-manager-card b,
.tv-bookmark-search-card b {
    display: block;
    color: #0f172a;
    font-size: .9rem;
    line-height: 1.2;
    font-weight: 950;
    overflow-wrap: anywhere;
}

.tv-bookmark-manager-card small,
.tv-bookmark-search-card small {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.38;
    font-weight: 650;
}

.tv-bookmark-manager-card > div {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dark .tv-bookmarks-hero,
.dark .tv-bookmarks-panel,
.dark .tv-bookmark-manager-card,
.dark .tv-bookmark-search-card,
.dark .tv-bookmark-empty {
    background: rgba(15, 23, 42, .86) !important;
    border-color: rgba(148, 163, 184, .18) !important;
}

.dark .tv-bookmarks-hero h1,
.dark .tv-bookmarks-panel-head h2,
.dark .tv-bookmark-empty h3,
.dark .tv-bookmark-manager-card b,
.dark .tv-bookmark-search-card b,
.dark .tv-bookmark-manager-card > a,
.dark .tv-bookmark-search-card > a {
    color: #f8fafc;
}

.dark .tv-bookmarks-hero p,
.dark .tv-bookmarks-panel-head p,
.dark .tv-bookmark-empty p,
.dark .tv-bookmark-manager-card small,
.dark .tv-bookmark-search-card small {
    color: #cbd5e1;
}

@media (max-width: 980px) {
    .tv-bookmarks-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .nav-bookmark-cta {
        min-width: 40px !important;
        padding: 0 10px !important;
    }

    .nav-bookmark-cta .mud-button-label {
        font-size: 0 !important;
    }

    .tv-bookmarks-hero {
        display: grid;
        border-radius: 22px;
    }

    .tv-bookmark-manager-card,
    .tv-bookmark-search-card {
        grid-template-columns: 1fr;
    }

    .tv-bookmark-manager-card > div {
        justify-content: flex-start;
    }
}
/* DaivVerse marketplace-style homepage refresh.
   Uses original DaivVerse styling, icons, and layout patterns without external assets. */
.app:not(.dark) .mud-topbar {
    background: linear-gradient(90deg, #155bd5 0%, #2563eb 52%, #0f4fcb 100%) !important;
    color: #ffffff !important;
    border-bottom: 0 !important;
    box-shadow: 0 10px 28px rgba(21, 91, 213, .22) !important;
}

.app:not(.dark) .mud-topbar .logo,
.app:not(.dark) .mud-topbar .mud-button-root,
.app:not(.dark) .mud-topbar .mud-icon-root {
    color: #ffffff !important;
}

.app:not(.dark) .mud-topbar .nav-bookmark-cta {
    color: #0f3f9f !important;
    background: #ffffff !important;
    border-color: rgba(255,255,255,.5) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

.app:not(.dark) .mud-topbar .tv-header-menu .mud-button-root {
    border-radius: 10px;
    background: rgba(255,255,255,.09);
}

.app:not(.dark) .mud-topbar .tv-header-menu .mud-button-root:hover {
    background: rgba(255,255,255,.18);
}

.tv-command-home {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 18px clamp(12px, 2.5vw, 34px) 46px;
    background:
        radial-gradient(circle at 10% 0%, rgba(37, 99, 235, .11), transparent 28%),
        linear-gradient(180deg, #edf3ff 0%, #f5f7fb 30%, #f8fafc 100%);
}

.dark .tv-command-home {
    background:
        radial-gradient(circle at 10% 0%, rgba(96, 165, 250, .16), transparent 28%),
        linear-gradient(180deg, #0f172a 0%, #111827 100%);
}

.tv-search-start {
    width: min(1360px, 100%);
    margin: 0 auto;
    padding: 4px 0 0;
}

.tv-command-search-panel {
    position: relative;
    z-index: 5;
    width: 100%;
    margin: 0 auto;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 18px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .10);
}

.dark .tv-command-search-panel {
    background: rgba(15, 23, 42, .94);
    border-color: rgba(148, 163, 184, .24);
}

.tv-command-search {
    min-height: 62px;
    padding: 8px 10px 8px 16px;
    border: 1px solid #dbe7fb;
    border-radius: 14px;
    background: #f8fbff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.dark .tv-command-search {
    background: rgba(30, 41, 59, .82);
    border-color: rgba(96, 165, 250, .24);
}

.tv-command-search > .mud-icon-root {
    color: #2563eb;
}

.tv-command-search .mud-input-control {
    margin: 0;
}

.tv-command-search .mud-input-root {
    font-size: 1rem;
}

.tv-command-search .mud-button-root {
    min-height: 46px;
    border-radius: 12px;
    background: #155bd5 !important;
    box-shadow: 0 10px 20px rgba(21, 91, 213, .22);
}

.tv-category-filter-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 10px;
    width: 100%;
    margin-top: 14px;
    overflow: visible;
}

.tv-category-filter-label {
    min-height: 52px;
    justify-content: center;
    border: 1px dashed #c9d7ef;
    border-radius: 14px;
    background: #f7faff;
    color: #334155;
    font-size: .86rem;
}

.tv-category-filter-pill {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #dbe4f3;
    border-radius: 14px;
    background: #ffffff;
    color: #0f172a;
    font-weight: 750;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.tv-category-filter-pill .mud-icon-root {
    color: #2563eb;
}

.tv-category-filter-pill small {
    min-width: 24px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #eef4ff;
    color: #155bd5;
    font-size: .72rem;
}

.tv-category-filter-pill:hover,
.tv-category-filter-pill:focus-visible {
    transform: translateY(-2px);
    border-color: #8ab5ff;
    box-shadow: 0 12px 24px rgba(37, 99, 235, .13);
}

.tv-category-filter-pill.active {
    background: linear-gradient(135deg, #155bd5, #2563eb);
    border-color: #155bd5;
    color: #ffffff;
}

.tv-category-filter-pill.active .mud-icon-root,
.tv-category-filter-pill.active small {
    color: #ffffff;
}

.tv-category-filter-pill.active small {
    background: rgba(255,255,255,.20);
}

.tv-command-search-results {
    border-radius: 16px;
    border: 1px solid #dbe4f3;
    background: #ffffff;
    box-shadow: 0 22px 46px rgba(15, 23, 42, .14);
}

.tv-onepage-tool-map {
    width: min(1360px, 100%);
    margin: 18px auto 0;
}

.tv-onepage-category-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.tv-onepage-category-card {
    overflow: hidden;
    padding: 0;
    border: 1px solid #dde7f5;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .08);
}

.dark .tv-onepage-category-card {
    background: rgba(15, 23, 42, .92);
    border-color: rgba(148, 163, 184, .24);
}

.tv-onepage-category-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 18px;
    border-bottom: 1px solid #e5edf7;
    background:
        linear-gradient(90deg, rgba(37, 99, 235, .09), transparent 44%),
        #ffffff;
}

.dark .tv-onepage-category-card header {
    background:
        linear-gradient(90deg, rgba(96, 165, 250, .12), transparent 44%),
        rgba(15, 23, 42, .92);
    border-bottom-color: rgba(148, 163, 184, .22);
}

.tv-onepage-category-title {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    color: #0f172a;
}

.dark .tv-onepage-category-title {
    color: #f8fafc;
}

.tv-onepage-category-title > span {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #eaf2ff, #dceaff);
    color: #155bd5;
}

.tv-onepage-category-title h3 {
    margin: 0;
    font-size: clamp(1.02rem, 1.5vw, 1.28rem);
    line-height: 1.2;
}

.tv-onepage-category-title p {
    max-width: 760px;
    margin: 4px 0 0;
    color: #64748b;
    font-size: .91rem;
    line-height: 1.45;
}

.tv-onepage-tool-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
    gap: 12px;
    padding: 16px;
}

.tv-onepage-tool-card {
    min-height: 142px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border: 1px solid #e2eaf5;
    border-radius: 15px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    color: #0f172a;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.dark .tv-onepage-tool-card {
    background: rgba(30, 41, 59, .72);
    border-color: rgba(148, 163, 184, .22);
    color: #f8fafc;
}

.tv-onepage-tool-card:hover,
.tv-onepage-tool-card:focus-visible {
    transform: translateY(-3px);
    border-color: #8ab5ff;
    box-shadow: 0 15px 30px rgba(37, 99, 235, .13);
    text-decoration: none;
}

.tv-onepage-tool-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #eef4ff;
    color: #155bd5;
}

.tv-onepage-tool-copy {
    min-width: 0;
}

.tv-onepage-tool-copy b {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: inherit;
    font-size: .95rem;
    line-height: 1.28;
}

.tv-onepage-tool-copy small {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 6px;
    color: #64748b;
    line-height: 1.38;
}

.dark .tv-onepage-tool-copy small {
    color: #cbd5e1;
}

.tv-onepage-tool-open {
    display: none !important;
}

.tv-category-lazy-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 16px 16px;
    padding: 9px 12px;
    border: 1px dashed rgba(37, 99, 235, .26);
    border-radius: 999px;
    background: rgba(239, 246, 255, .78);
    color: #315177;
    font-size: .82rem;
    line-height: 1.25;
}

.tv-category-lazy-note .mud-icon-root {
    font-size: 1rem;
}

.dark .tv-category-lazy-note {
    border-color: rgba(147, 197, 253, .28);
    background: rgba(30, 41, 59, .72);
    color: #c7d2fe;
}

/* Last rule wins: homepage audience cards must never collapse into unreadable columns. */
.tv-command-home .tv-home-audience-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: clamp(14px, 2vw, 22px) !important;
    width: min(1180px, 100%) !important;
    max-width: 100% !important;
    justify-self: start !important;
    align-items: stretch !important;
}

.tv-command-home .tv-home-audience-card {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 16px !important;
    row-gap: 6px !important;
    min-height: 112px !important;
    padding: clamp(18px, 2vw, 24px) !important;
    overflow: hidden !important;
    text-align: left !important;
}

.tv-command-home .tv-home-audience-card > .mud-icon-root,
.tv-command-home .tv-home-audience-card > svg {
    grid-row: 1 / 3 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    padding: 12px !important;
    border-radius: 18px !important;
}

.tv-command-home .tv-home-audience-card b,
.tv-command-home .tv-home-audience-card small {
    display: block !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
}

.tv-command-home .tv-home-audience-card b {
    font-size: clamp(1.04rem, 1vw, 1.16rem) !important;
    line-height: 1.28 !important;
}

.tv-command-home .tv-home-audience-card small {
    font-size: .95rem !important;
    line-height: 1.55 !important;
}

@media (max-width: 640px) {
    .tv-command-home .tv-home-audience-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Keep the all-tools library from visually sliding underneath the sticky header. */
.app:has(.library-market.single-library) .tv-command-topbar {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .10) !important;
}

.dark:has(.library-market.single-library) .tv-command-topbar {
    background: #0f172a !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28) !important;
}

.app:has(.library-market.single-library) .tv-app-main-content {
    scroll-padding-top: 112px;
}

.app:has(.library-market.single-library) .library-market.single-library {
    scroll-margin-top: 112px;
    padding-top: 12px;
}

/* Last rule wins: keep header search results inside the visible screen. */
.tv-asana-actions .tv-sticky-search-wrap {
    position: relative !important;
    min-width: 0 !important;
}

.tv-asana-actions .tv-sticky-search-wrap .tv-sticky-search-results,
.app.side-menu-open .tv-asana-actions .tv-sticky-search-wrap .tv-sticky-search-results,
.app.side-menu-collapsed .tv-asana-actions .tv-sticky-search-wrap .tv-sticky-search-results {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: auto !important;
    right: 0 !important;
    width: min(680px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    transform: none !important;
    z-index: 1450 !important;
}

.tv-sticky-search-results a,
.tv-sticky-search-results a > span:last-child {
    min-width: 0 !important;
    max-width: 100% !important;
}

.tv-sticky-search-results b,
.tv-sticky-search-results small {
    max-width: 100% !important;
}

@media (max-width: 640px) {
    .tv-asana-actions .tv-sticky-search-wrap .tv-sticky-search-results,
    .app.side-menu-open .tv-asana-actions .tv-sticky-search-wrap .tv-sticky-search-results,
    .app.side-menu-collapsed .tv-asana-actions .tv-sticky-search-wrap .tv-sticky-search-results {
        right: 0 !important;
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
    }
}

/* Last rule wins: keep the help launcher on the right and open the panel inward. */
.floating-contact {
    left: auto !important;
    right: clamp(12px, 1.6vw, 22px) !important;
    bottom: clamp(14px, 2vw, 24px) !important;
    align-items: flex-end !important;
    flex-direction: column-reverse !important;
}

.floating-contact-panel {
    left: auto !important;
    right: 0 !important;
    width: min(430px, calc(100vw - 24px)) !important;
    height: min(720px, calc(100vh - 104px)) !important;
    max-height: calc(100vh - 104px) !important;
    transform-origin: bottom right !important;
}

.floating-contact-tab {
    align-self: flex-end !important;
}

@media (max-width: 640px) {
    .floating-contact {
        left: 10px !important;
        right: 10px !important;
        bottom: 12px !important;
        align-items: flex-end !important;
    }

    .floating-contact-panel {
        width: 100% !important;
        height: min(680px, calc(100vh - 92px)) !important;
        max-height: calc(100vh - 92px) !important;
    }
}

/* Final inner-page readability pass: tool workspaces must never clip content. */
.app .tool-page,
.app .focused-tool-page,
.app .tool-body,
.app .tool-content-section,
.app .tool-meta-grid,
.app .how-to,
.app .category-market,
.app .library-market,
.app .blog-article-page,
.app .legal-page,
.app .info-page {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
}

.app .focused-tool-page {
    width: min(100%, 1480px) !important;
    display: grid !important;
    gap: clamp(16px, 2vw, 26px) !important;
    margin-inline: auto !important;
}

.app .tool-route .focused-tool-page,
.app .tool-route .tool-page {
    width: 100% !important;
    max-width: none !important;
}

.app .breadcrumb {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: 100% !important;
    overflow: visible !important;
    white-space: normal !important;
}

.app .breadcrumb .self-page-link {
    margin-left: auto !important;
}

.app .tool-head.tool-head-pro,
.app .tool-route .tool-head.tool-head-pro {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: clamp(14px, 2vw, 24px) !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: clamp(18px, 2.4vw, 34px) !important;
}

.app .tool-head > div:nth-child(2),
.app .tool-route .tool-head > div:nth-child(2) {
    min-width: 0 !important;
    padding-right: 0 !important;
}

.app .tool-title-icon,
.app .tool-route .tool-title-icon {
    width: clamp(46px, 5vw, 62px) !important;
    height: clamp(46px, 5vw, 62px) !important;
    min-width: clamp(46px, 5vw, 62px) !important;
    border-radius: 20px !important;
}

.app .tool-head h1,
.app .tool-route .tool-head h1 {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(1.7rem, 3vw, 3rem) !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
}

.app .tool-head p,
.app .tool-route .tool-head p {
    max-width: 980px !important;
    margin-top: 8px !important;
    font-size: clamp(.98rem, 1.2vw, 1.08rem) !important;
    line-height: 1.62 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
}

.app .tool-badges,
.app .tool-route .tool-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-width: 100% !important;
}

.app .tool-head-actions,
.app .tool-route .tool-head-actions {
    position: static !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.app .tool-body,
.app .tool-route .tool-body {
    display: grid !important;
    gap: clamp(14px, 1.8vw, 22px) !important;
    margin-top: 0 !important;
}

.app .tool-context-alert,
.app .tool-route .tool-context-alert {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-radius: 18px !important;
    overflow: visible !important;
}

.app .tool-context-alert,
.app .tool-context-alert *,
.app .tool-route .tool-context-alert,
.app .tool-route .tool-context-alert * {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

.app .tool-panel,
.app .panel-card,
.app .pdf-panel,
.app .calc-card,
.app .empty-panel,
.app .webhook-card,
.app .prompt-form-panel,
.app .prompt-output-panel,
.app .api-doc-section,
.app .passport-editor-box {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: clamp(16px, 2vw, 24px) !important;
}

.app .tool-panel > *,
.app .panel-card > *,
.app .pdf-panel > *,
.app .calc-card > *,
.app .webhook-card > * {
    min-width: 0 !important;
    max-width: 100% !important;
}

.app .split,
.app .tool-split,
.app .tool-route .split {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(92px, auto) minmax(0, 1fr) !important;
    gap: clamp(14px, 1.8vw, 24px) !important;
    align-items: stretch !important;
}

.app .pane,
.app .pane-mid,
.app .tool-route .pane,
.app .tool-route .pane-mid {
    min-width: 0 !important;
    max-width: 100% !important;
}

.app .pane-mid,
.app .tool-route .pane-mid {
    justify-content: center !important;
    align-items: stretch !important;
}

.app textarea,
.app .ta,
.app .form-col textarea,
.app .form-row textarea,
.app .tool-route textarea,
.app .tool-route .ta {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: clamp(180px, 34vh, 460px) !important;
    box-sizing: border-box !important;
    overflow: auto !important;
    resize: vertical !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
}

.app pre,
.app code,
.app .result-box,
.app .output-box,
.app .empty-panel,
.app .mud-table,
.app .mud-table-container,
.app .dtable {
    max-width: 100% !important;
    overflow: auto !important;
}

.app .tool-meta-grid,
.app .tool-route .focused-tool-page .tool-meta-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
    gap: clamp(12px, 1.6vw, 20px) !important;
    margin-top: 0 !important;
}

.app .tool-content-section,
.app .how-to,
.app .tool-meta-grid article,
.app .tool-route .focused-tool-page .tool-content-section {
    padding: clamp(16px, 2vw, 24px) !important;
    overflow: visible !important;
}

.app .tool-content-section p,
.app .tool-content-section li,
.app .tool-meta-grid p,
.app .tool-meta-grid li,
.app .how-to p,
.app .how-to li {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.app .tool-faq-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
    gap: 12px !important;
}

.app .tool-faq-list article {
    min-width: 0 !important;
    border: 1px solid var(--tv-line, rgba(31, 31, 34, .11)) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--tv-surface-strong, #fff) 88%, transparent) !important;
    padding: 16px !important;
}

.app .related-tool-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.app .related-tool-row a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    max-width: 100% !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    border: 1px solid var(--tv-line, rgba(31, 31, 34, .11)) !important;
    border-radius: 999px !important;
    background: var(--tv-surface-strong, #fff) !important;
    color: var(--tv-ink, #1f1f22) !important;
    font-weight: 850 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

@media (max-width: 900px) {
    .app .tool-head.tool-head-pro,
    .app .tool-route .tool-head.tool-head-pro {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    .app .tool-head-actions,
    .app .tool-route .tool-head-actions {
        grid-column: 1 / -1 !important;
        justify-content: flex-start !important;
    }

    .app .split,
    .app .tool-split,
    .app .tool-route .split {
        grid-template-columns: 1fr !important;
    }

    .app .pane-mid,
    .app .tool-route .pane-mid {
        padding-top: 0 !important;
    }

    .app .pane-mid .btn,
    .app .pane-mid .btn-p,
    .app .pane-mid .btn-s,
    .app .pane-mid .mud-button-root {
        width: 100% !important;
    }
}

@media (max-width: 640px) {
    .app .focused-tool-page {
        gap: 14px !important;
    }

    .app .breadcrumb .self-page-link {
        width: 100% !important;
        justify-content: center !important;
        margin-left: 0 !important;
    }

    .app .tool-head.tool-head-pro,
    .app .tool-route .tool-head.tool-head-pro,
    .app .tool-panel,
    .app .panel-card,
    .app .pdf-panel,
    .app .tool-content-section,
    .app .how-to,
    .app .tool-meta-grid article {
        border-radius: 20px !important;
    }

    .app textarea,
    .app .ta,
    .app .form-col textarea,
    .app .form-row textarea {
        min-height: 220px !important;
    }
}

/* Final header brand/search polish. */
.tv-asana-actions {
    position: relative !important;
}

.tv-asana-brand {
    position: relative !important;
}

.tv-asana-brand-mark,
.footer-logo-mark {
    overflow: hidden !important;
    background: #020617 !important;
    color: transparent !important;
}

.tv-asana-brand-mark img,
.footer-logo-mark img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
}

.tv-asana-brand-mark {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    box-shadow: 0 12px 28px rgba(37, 99, 235, .26) !important;
}

.footer-logo-mark {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
    padding: 0 !important;
}

.tv-brand-tooltip {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    z-index: 1420;
    width: 260px;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 20px;
    background: rgba(255, 255, 255, .98);
    color: #0f172a;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease;
}

.tv-brand-tooltip img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 12px 28px rgba(37, 99, 235, .24);
}

.tv-brand-tooltip strong,
.tv-brand-tooltip small {
    display: block;
    min-width: 0;
    white-space: normal;
}

.tv-brand-tooltip strong {
    font-size: 1rem;
    line-height: 1.15;
}

.tv-brand-tooltip small {
    margin-top: 3px;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.3;
}

.tv-asana-brand:hover .tv-brand-tooltip,
.tv-asana-brand:focus-visible .tv-brand-tooltip {
    opacity: 1;
    transform: translateY(0);
}

.dark .tv-brand-tooltip {
    background: rgba(15, 23, 42, .98);
    border-color: rgba(148, 163, 184, .24);
    color: #f8fafc;
}

.dark .tv-brand-tooltip small {
    color: #cbd5e1;
}

.tv-sticky-filter-button {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    padding: 0 !important;
    border-radius: 999px !important;
}

.tv-sticky-filter-button span {
    display: none !important;
}

.tv-sticky-search-results {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: 48px !important;
    left: auto !important;
    width: min(680px, calc(100vw - 28px)) !important;
    max-height: min(68vh, 620px) !important;
    transform: none !important;
    z-index: 1450 !important;
}

@media (max-width: 980px) {
    .tv-sticky-search-results {
        right: 52px !important;
        width: min(620px, calc(100vw - 24px)) !important;
    }
}

@media (max-width: 640px) {
    .tv-asana-brand > span:nth-of-type(2) {
        display: none !important;
    }

    .tv-brand-tooltip {
        display: none !important;
    }

    .tv-sticky-search-results {
        top: calc(100% + 10px) !important;
        left: auto !important;
        right: 0 !important;
        width: calc(100vw - 20px) !important;
        transform: none !important;
    }
}

/* Tool-first layout: move support copy into compact tooltip chips. */
.app .tool-info-strip,
.app .tool-info-dock {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.app .tool-info-strip {
    margin: 0 0 -4px;
}

.app .tool-info-dock {
    margin-top: -4px;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--tv-line, rgba(15, 23, 42, .10)) 82%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--tv-surface-strong, #fff) 80%, transparent);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}

.app .tool-info-chip {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    max-width: 100%;
    padding: 7px 11px;
    border: 1px solid color-mix(in srgb, var(--tv-accent, #2563eb) 18%, var(--tv-line, rgba(15, 23, 42, .10)));
    border-radius: 999px;
    background: color-mix(in srgb, var(--tv-accent, #2563eb) 7%, var(--tv-surface-strong, #fff));
    color: var(--tv-ink, #132118);
    font: inherit;
    font-size: .82rem;
    font-weight: 900;
    line-height: 1;
    cursor: help;
    white-space: nowrap;
    transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.app .tool-info-chip .mud-icon-root {
    color: var(--tv-accent, #2563eb) !important;
    font-size: 1rem !important;
}

.app .tool-info-chip:hover,
.app .tool-info-chip:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--tv-accent, #2563eb) 38%, var(--tv-line, rgba(15, 23, 42, .10)));
    background: color-mix(in srgb, var(--tv-accent, #2563eb) 12%, var(--tv-surface-strong, #fff));
    box-shadow: 0 12px 28px rgba(15, 23, 42, .10);
    outline: 0;
}

.app .tool-info-chip-primary {
    min-height: 38px;
    padding-inline: 13px;
    background: color-mix(in srgb, var(--tv-accent, #2563eb) 10%, var(--tv-surface-strong, #fff));
}

.app .tool-info-dock + .tool-content-section,
.app .tool-info-dock + .related-blog-section,
.app .tool-info-dock + * {
    margin-top: 0 !important;
}

.app .tool-route .tool-context-alert {
    display: none !important;
}

.mud-tooltip,
.mud-tooltip-root .mud-tooltip {
    max-width: min(420px, calc(100vw - 28px)) !important;
    white-space: normal !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
}

/* Readable info panel revealed when the header (i) icon is clicked */
html body .app .how-to-info {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--bd);
}
html body .app .how-to-info-text {
    margin: 0;
    color: var(--tx2);
    line-height: 1.65;
    font-size: var(--fs-base);
    max-width: 80ch;
}

@media (max-width: 760px) {
    .app .tool-info-dock {
        border-radius: 20px;
        justify-content: flex-start;
    }

    .app .tool-info-chip {
        flex: 1 1 calc(50% - 8px);
        min-width: 138px;
    }
}

/* Header search: results are anchored directly below the input; filter stays icon-only. */
.tv-sticky-search-wrap {
    position: relative !important;
    flex: 1 1 280px !important;
    min-width: 220px !important;
}

.tv-asana-actions .tv-sticky-search-wrap {
    flex: 1 1 320px !important;
}

.tv-asana-actions .tv-sticky-search-box {
    width: 100% !important;
    min-width: 0 !important;
}

.tv-sticky-filter-button {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    padding: 0 !important;
    overflow: hidden !important;
    font-size: 0 !important;
}

.tv-sticky-filter-button span,
.tv-sticky-filter-button b,
.tv-sticky-filter-button small {
    display: none !important;
}

.tv-sticky-filter-button .mud-icon-root {
    font-size: 1.18rem !important;
}

.tv-sticky-search-wrap .tv-sticky-search-results {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: min(520px, calc(100vw - 24px)) !important;
    max-height: min(68vh, 620px) !important;
    transform: none !important;
    z-index: 1450 !important;
}

@media (max-width: 980px) {
    .tv-sticky-search-wrap,
    .tv-asana-actions .tv-sticky-search-wrap {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .tv-sticky-search-wrap .tv-sticky-search-results {
        min-width: min(560px, calc(100vw - 20px)) !important;
    }
}

@media (max-width: 640px) {
    .tv-sticky-search-wrap .tv-sticky-search-results {
        left: auto !important;
        right: 0 !important;
        width: calc(100vw - 20px) !important;
        min-width: 0 !important;
    }
}

/* Mega menu completeness: show all links without clipping columns. */
.tv-asana-mega {
    width: min(1380px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 92px) !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) !important;
    align-items: start !important;
    scrollbar-gutter: stable;
}

.tv-asana-more-mega {
    width: min(1480px, calc(100vw - 32px)) !important;
}

.tv-asana-mega-intro {
    position: sticky;
    top: 0;
    align-self: start;
}

.tv-asana-mega-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    align-items: start !important;
    min-width: 0 !important;
}

.tv-asana-mega-grid section {
    min-width: 0 !important;
    max-width: 100% !important;
}

.tv-asana-mega-grid section > a:not(.tv-asana-mega-section) {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.28 !important;
}

.tv-asana-mega-section b,
.tv-asana-mega-section small {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    line-height: 1.25 !important;
}

@media (max-width: 980px) {
    .tv-asana-mega {
        top: 68px !important;
        left: 10px !important;
        right: 10px !important;
        transform: none !important;
        grid-template-columns: 1fr !important;
        width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 86px) !important;
        padding: 14px !important;
        border-radius: 22px !important;
    }

    .tv-asana-mega-intro {
        position: static;
    }
}

/* Horizontal application menu: clean top navigation with compact mega menus. */
.tv-asana-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1240 !important;
    display: flex !important;
    align-items: center;
    gap: clamp(12px, 1.6vw, 26px);
    min-height: 74px !important;
    padding: 12px clamp(18px, 3vw, 44px) !important;
    border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .06) !important;
    backdrop-filter: blur(18px);
}

.dark .tv-asana-topbar {
    background: rgba(15, 23, 42, .94) !important;
    border-bottom-color: rgba(148, 163, 184, .18) !important;
}

.tv-asana-brand,
.tv-asana-action-link,
.tv-asana-menu-item > summary,
.tv-asana-mega a {
    color: inherit !important;
    text-decoration: none !important;
}

.tv-asana-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: max-content;
    font-size: 1.05rem;
    font-weight: 950;
    letter-spacing: 0;
}

.tv-asana-brand-mark {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #eef6ff, #e7fff5);
    color: #155bd5;
}

.tv-asana-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.tv-asana-menu-item {
    position: static;
}

.tv-asana-menu-item > summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 42px;
    padding: 0 10px;
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
    color: #1f2937 !important;
    font-size: .88rem;
    font-weight: 850;
    white-space: nowrap;
}

.tv-asana-menu-item > summary::-webkit-details-marker {
    display: none;
}

.tv-asana-menu-item > summary:hover,
.tv-asana-menu-item > summary:focus-visible,
.tv-asana-menu-item[open] > summary {
    background: #f1f5f9;
    color: #155bd5 !important;
    outline: 0;
}

.dark .tv-asana-menu-item > summary {
    color: #e5e7eb !important;
}

.dark .tv-asana-menu-item > summary:hover,
.dark .tv-asana-menu-item > summary:focus-visible,
.dark .tv-asana-menu-item[open] > summary {
    background: rgba(37, 99, 235, .18);
    color: #bfdbfe !important;
}

.tv-asana-mega {
    display: none;
    position: fixed;
    top: 74px;
    left: auto;
    right: clamp(16px, 4.5vw, 72px);
    transform: none;
    width: min(1120px, calc(100vw - 32px));
    max-height: calc(100vh - 98px);
    overflow: auto;
    overscroll-behavior: contain;
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
    gap: 22px;
    padding: 22px;
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 0 0 28px 28px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 32px 72px rgba(15, 23, 42, .16);
    color: #0f172a;
}

.tv-asana-menu-item:hover > .tv-asana-mega,
.tv-asana-menu-item:focus-within > .tv-asana-mega,
.tv-asana-menu-item[open] > .tv-asana-mega {
    display: grid;
}

.dark .tv-asana-mega {
    background: rgba(15, 23, 42, .98);
    color: #f8fafc;
    border-color: rgba(148, 163, 184, .18);
}

.tv-asana-mega-intro {
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, #eef6ff, #f5fff9);
}

.dark .tv-asana-mega-intro {
    background: linear-gradient(135deg, rgba(37, 99, 235, .18), rgba(20, 184, 166, .12));
}

.tv-asana-mega-intro > span {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 15px;
    background: #fff;
    color: #155bd5;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
}

.dark .tv-asana-mega-intro > span {
    background: rgba(15, 23, 42, .72);
    color: #bfdbfe;
}

.tv-asana-mega-intro h2 {
    margin: 14px 0 8px;
    font-size: 1.35rem;
    line-height: 1.12;
}

.tv-asana-mega-intro p {
    margin: 0 0 18px;
    color: #475569;
    font-size: .92rem;
    line-height: 1.55;
}

.dark .tv-asana-mega-intro p {
    color: #cbd5e1;
}

.tv-asana-mega-intro a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: #0f172a;
    color: #fff !important;
    font-size: .84rem;
    font-weight: 900;
}

.tv-asana-mega-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.tv-asana-mega-grid section {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 7px;
}

.tv-asana-mega-grid section > a:not(.tv-asana-mega-section) {
    display: block;
    padding: 6px 8px;
    border-radius: 10px;
    color: #475569 !important;
    font-size: .84rem;
    font-weight: 760;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-asana-mega-grid section > a.tv-asana-tool-link:not(.tv-asana-mega-section) {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
}

.tv-asana-tool-link > .mud-icon-root {
    width: 24px;
    height: 24px;
    min-width: 24px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
}

.tv-asana-tool-link > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-asana-mega-grid section > a:not(.tv-asana-mega-section):hover,
.tv-asana-mega-grid section > a:not(.tv-asana-mega-section):focus-visible {
    background: #f1f5f9;
    color: #155bd5 !important;
    outline: 0;
}

.dark .tv-asana-mega-grid section > a:not(.tv-asana-mega-section) {
    color: #cbd5e1 !important;
}

.dark .tv-asana-tool-link > .mud-icon-root {
    background: rgba(37, 99, 235, .20);
    color: #93c5fd;
}

.dark .tv-asana-mega-grid section > a:not(.tv-asana-mega-section):hover,
.dark .tv-asana-mega-grid section > a:not(.tv-asana-mega-section):focus-visible {
    background: rgba(37, 99, 235, .18);
    color: #bfdbfe !important;
}

.tv-asana-mega-section {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 9px;
    border-radius: 14px;
    background: #f8fafc;
}

.dark .tv-asana-mega-section {
    background: rgba(30, 41, 59, .66);
}

.tv-asana-mega-section > .mud-icon-root {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: inline-grid;
    place-items: center;
    border-radius: 11px;
    background: #eaf4ff;
    color: #155bd5;
}

.app .tv-asana-menu .mud-icon-root,
.app .tv-asana-menu-item > summary .mud-icon-root {
    color: #38bdf8 !important;
}

.app .tv-asana-mega-intro > span .mud-icon-root,
.app .tv-asana-mega-section > .mud-icon-root,
.app .tv-asana-tool-link > .mud-icon-root {
    color: #2563eb !important;
}

.app.dark .tv-asana-mega-intro > span .mud-icon-root,
.app.dark .tv-asana-mega-section > .mud-icon-root,
.app.dark .tv-asana-tool-link > .mud-icon-root {
    color: #60a5fa !important;
}

.tv-asana-mega-section span {
    min-width: 0;
}

.tv-asana-mega-section b,
.tv-asana-mega-section small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-asana-mega-section b {
    font-size: .88rem;
}

.tv-asana-mega-section small {
    color: #64748b;
    font-size: .72rem;
}

.tv-asana-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 620px;
    min-width: 280px;
}

.tv-asana-action-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 999px;
    color: #334155 !important;
    font-size: .84rem;
    font-weight: 850;
    white-space: nowrap;
}

.tv-asana-action-link:hover,
.tv-asana-action-link:focus-visible {
    background: #f1f5f9;
    color: #155bd5 !important;
    outline: 0;
}

.tv-asana-actions .tv-sticky-search-box {
    flex: 1 1 280px;
    min-width: 220px;
    min-height: 44px !important;
}

.tv-asana-mobile-menu {
    display: none;
    width: 42px;
    height: 42px;
    min-width: 42px;
    place-items: center;
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 999px;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
}

/* Non-home pages hide the whole header and show only this close/back-to-home
   icon fixed in the top-right corner. */
.tv-page-close-btn {
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 1300;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .14);
}
.tv-page-close-btn:hover,
.tv-page-close-btn:focus-visible {
    background: #f1f5f9;
    color: #155bd5;
    border-color: rgba(37, 99, 235, .4);
    outline: 0;
}
.app.dark .tv-page-close-btn {
    background: rgba(15, 23, 42, .92);
    color: #eaf4ff;
    border-color: rgba(148, 163, 184, .28);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
}

.app.side-menu-open:not(.tool-route) .tv-app-main-content,
.app.side-menu-open:not(.tool-route) .footer,
.app.side-menu-collapsed:not(.tool-route) .tv-app-main-content,
.app.side-menu-collapsed:not(.tool-route) .footer {
    margin-left: 0 !important;
}

.app.side-menu-open .tv-sticky-search-results,
.app.side-menu-collapsed .tv-sticky-search-results {
    left: 50% !important;
    width: min(920px, calc(100vw - 48px)) !important;
}

@media (max-width: 1180px) {
    .tv-asana-menu-item > summary {
        padding-inline: 8px;
        font-size: .82rem;
    }

    .tv-asana-action-link span {
        display: none;
    }

    .tv-asana-actions {
        flex-basis: 500px;
    }
}

@media (max-width: 980px) {
    /* On mobile / small screens, show no navigation menu at all — users browse
       from the home-screen sections. Hide the desktop menu, the action links,
       and the mobile hamburger (so the drawer menu can't open). */
    .tv-asana-menu {
        display: none;
    }

    .tv-asana-action-link {
        display: none;
    }

    .tv-asana-mobile-menu {
        display: none !important;
    }

    .tv-asana-actions {
        flex: 1 1 auto;
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .tv-asana-topbar {
        min-height: 66px !important;
        padding: 8px 10px !important;
        gap: 8px;
    }

    .tv-asana-brand span:last-child {
        display: none;
    }

    .tv-asana-actions .tv-sticky-search-box {
        min-width: 0;
    }

    .tv-asana-actions .tv-sticky-filter-button span {
        display: none;
    }
}

/* Instagram-style vertical menu: closed icon rail with hover/focus expansion. */
.tv-vertical-menu {
    --tv-side-rail: 74px;
    --tv-side-expanded: 306px;
    --tv-side-width: var(--tv-side-rail);
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1250;
    width: var(--tv-side-width);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 10px;
    padding: 12px 10px;
    border-right: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .96);
    color: #0f172a;
    box-shadow: 18px 0 46px rgba(15, 23, 42, .08);
    backdrop-filter: blur(18px);
    transition: width .18s ease, box-shadow .18s ease, background .18s ease;
    overflow: hidden;
}

.tv-vertical-menu:hover,
.tv-vertical-menu:focus-within {
    --tv-side-width: var(--tv-side-expanded);
    box-shadow: 26px 0 58px rgba(15, 23, 42, .14);
}

.dark .tv-vertical-menu {
    background: rgba(15, 23, 42, .96);
    color: #f8fafc;
    border-right-color: rgba(148, 163, 184, .20);
    box-shadow: 18px 0 46px rgba(0, 0, 0, .28);
}

.tv-vertical-menu-head,
.tv-vertical-brand,
.tv-vertical-quick a,
.tv-vertical-group > summary,
.tv-vertical-overview,
.tv-vertical-nested > summary,
.tv-vertical-nested a,
.tv-vertical-more-links a {
    display: flex;
    align-items: center;
}

.tv-vertical-menu-head {
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    padding: 0 2px 8px;
    border-bottom: 1px solid rgba(148, 163, 184, .20);
}

.tv-vertical-brand {
    min-width: 0;
    gap: 10px;
    color: inherit !important;
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: 0;
    text-decoration: none !important;
}

.tv-vertical-brand-mark,
.tv-vertical-quick a > .mud-icon-root,
.tv-vertical-group > summary > .mud-icon-root:first-child,
.tv-vertical-category-node > summary > .mud-icon-root:first-child,
.tv-vertical-nested a > .mud-icon-root,
.tv-vertical-more-links a > .mud-icon-root {
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    background: #eef5ff;
    color: #155bd5;
}

.tv-vertical-menu-toggle {
    display: none;
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 12px;
    background: #f8fbff;
    color: #155bd5;
    cursor: pointer;
}

.tv-vertical-menu-toggle:hover,
.tv-vertical-menu-toggle:focus-visible {
    background: #eaf4ff;
    outline: 2px solid rgba(21, 91, 213, .18);
    outline-offset: 2px;
}

.tv-vertical-quick {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
}

.tv-vertical-quick a {
    gap: 8px;
    min-height: 40px;
    padding: 6px 8px;
    border: 1px solid rgba(148, 163, 184, .20);
    border-radius: 14px;
    background: rgba(248, 251, 255, .86);
    color: inherit !important;
    font-size: .82rem;
    font-weight: 860;
    text-decoration: none !important;
}

.tv-vertical-quick a:hover,
.tv-vertical-quick a:focus-visible,
.tv-vertical-group > summary:hover,
.tv-vertical-group > summary:focus-visible,
.tv-vertical-overview:hover,
.tv-vertical-overview:focus-visible,
.tv-vertical-nested a:hover,
.tv-vertical-nested a:focus-visible,
.tv-vertical-more-links a:hover,
.tv-vertical-more-links a:focus-visible {
    background: #eef6ff;
    color: #155bd5 !important;
    outline: 0;
    text-decoration: none !important;
}

.tv-vertical-menu-scroll {
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
    scrollbar-width: none;
}

.tv-vertical-menu-scroll::-webkit-scrollbar {
    display: none;
}

.tv-vertical-section-label {
    margin: 2px 8px 8px;
    color: #64748b;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tv-vertical-group {
    margin: 0 0 7px;
}

.tv-vertical-group > summary,
.tv-vertical-overview {
    gap: 10px;
    min-height: 46px;
    padding: 7px 8px;
    border-radius: 15px;
    color: inherit;
    cursor: pointer;
    list-style: none;
    text-decoration: none !important;
}

.tv-vertical-group > summary::-webkit-details-marker,
.tv-vertical-nested > summary::-webkit-details-marker {
    display: none;
}

.tv-vertical-group > summary > span,
.tv-vertical-nested > summary > span,
.tv-vertical-nested a > span,
.tv-vertical-more-links a > span {
    min-width: 0;
    display: block;
}

.tv-vertical-group b,
.tv-vertical-group small,
.tv-vertical-more-links b,
.tv-vertical-more-links small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-vertical-group b,
.tv-vertical-more-links b {
    color: inherit;
    font-size: .88rem;
    line-height: 1.2;
}

.tv-vertical-group small,
.tv-vertical-more-links small {
    margin-top: 2px;
    color: #64748b;
    font-size: .73rem;
    line-height: 1.2;
}

.tv-vertical-group > summary > .mud-icon-root:last-child,
.tv-vertical-nested > summary > .mud-icon-root:last-child {
    margin-left: auto;
    color: #94a3b8;
    transition: transform .16s ease;
}

.tv-vertical-group[open] > summary > .mud-icon-root:last-child,
.tv-vertical-nested[open] > summary > .mud-icon-root:last-child {
    transform: rotate(180deg);
}

.tv-vertical-submenu {
    display: grid;
    gap: 8px;
    margin: 2px 0 8px 42px;
    padding: 8px 0 4px 10px;
    border-left: 1px solid rgba(148, 163, 184, .28);
}

.tv-vertical-overview {
    min-height: 38px;
    padding: 7px 9px;
    background: #f8fbff;
    border: 1px solid rgba(148, 163, 184, .20);
    color: inherit !important;
    font-size: .82rem;
    font-weight: 880;
}

.tv-vertical-nested {
    display: grid;
    gap: 6px;
}

.tv-vertical-nested > summary {
    justify-content: space-between;
    min-height: 32px;
    padding: 4px 8px;
    border-radius: 10px;
    color: #64748b;
    cursor: pointer;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
    list-style: none;
}

.tv-vertical-nested > div {
    display: grid;
    gap: 5px;
}

.tv-vertical-menu-tree > div {
    gap: 7px;
}

.tv-vertical-category-node > summary {
    gap: 8px;
    min-height: 40px;
    padding: 6px 8px;
    border: 1px solid rgba(148, 163, 184, .18);
    background: rgba(248, 251, 255, .82);
    color: inherit;
    letter-spacing: 0;
    text-transform: none;
}

.tv-vertical-category-node > summary > .mud-icon-root:first-child {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 10px;
}

.tv-vertical-category-node > summary small {
    color: #64748b;
}

.tv-vertical-subsection {
    margin: 3px 0 4px 18px;
    padding-left: 10px;
    border-left: 1px solid rgba(148, 163, 184, .22);
}

.tv-vertical-category-link {
    background: rgba(239, 246, 255, .78);
}

.tv-vertical-nested a,
.tv-vertical-more-links a {
    gap: 9px;
    min-height: 40px;
    padding: 7px 8px;
    border-radius: 13px;
    color: inherit !important;
    text-decoration: none !important;
}

.tv-vertical-nested a > .mud-icon-root,
.tv-vertical-more-links a > .mud-icon-root {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 10px;
}

.tv-vertical-info-group {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, .20);
}

.dark .tv-vertical-quick a,
.dark .tv-vertical-overview,
.dark .tv-vertical-menu-toggle {
    background: rgba(30, 41, 59, .72);
    border-color: rgba(148, 163, 184, .18);
}

.dark .tv-vertical-brand-mark,
.dark .tv-vertical-quick a > .mud-icon-root,
.dark .tv-vertical-group > summary > .mud-icon-root:first-child,
.dark .tv-vertical-category-node > summary > .mud-icon-root:first-child,
.dark .tv-vertical-nested a > .mud-icon-root,
.dark .tv-vertical-more-links a > .mud-icon-root {
    background: rgba(37, 99, 235, .20);
    color: #bfdbfe;
}

.dark .tv-vertical-section-label,
.dark .tv-vertical-group small,
.dark .tv-vertical-category-node > summary small,
.dark .tv-vertical-more-links small,
.dark .tv-vertical-nested > summary {
    color: #cbd5e1;
}

.dark .tv-vertical-category-node > summary,
.dark .tv-vertical-category-link {
    background: rgba(30, 41, 59, .72);
    border-color: rgba(148, 163, 184, .18);
}

.dark .tv-vertical-quick a:hover,
.dark .tv-vertical-quick a:focus-visible,
.dark .tv-vertical-group > summary:hover,
.dark .tv-vertical-group > summary:focus-visible,
.dark .tv-vertical-overview:hover,
.dark .tv-vertical-overview:focus-visible,
.dark .tv-vertical-nested a:hover,
.dark .tv-vertical-nested a:focus-visible,
.dark .tv-vertical-more-links a:hover,
.dark .tv-vertical-more-links a:focus-visible {
    background: rgba(37, 99, 235, .20);
    color: #f8fafc !important;
}

.tv-vertical-command-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1180 !important;
    display: flex !important;
    align-items: center;
    min-height: 70px !important;
    padding: 10px clamp(12px, 2vw, 24px) !important;
    border-bottom: 1px solid rgba(148, 163, 184, .14) !important;
    background: rgba(248, 251, 255, .92) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06) !important;
    backdrop-filter: blur(18px);
}

.dark .tv-vertical-command-topbar {
    background: rgba(15, 23, 42, .88) !important;
}

.tv-vertical-command-topbar .tv-sticky-search-inner {
    width: min(1040px, 100%);
    margin: 0 auto;
    min-height: 0 !important;
}

.tv-vertical-command-topbar .tv-sticky-search-box {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.tv-vertical-command-topbar .tv-sticky-filter-button {
    width: auto !important;
    min-width: 42px;
    height: 42px !important;
    padding: 0 14px !important;
}

.tv-vertical-command-topbar .tv-sticky-filter-button span {
    display: inline;
}

.app.side-menu-open:not(.tool-route) .tv-vertical-command-topbar,
.app.side-menu-collapsed:not(.tool-route) .tv-vertical-command-topbar {
    margin-left: 74px;
    width: calc(100% - 74px);
    transition: margin-left .18s ease, width .18s ease;
}

.app.side-menu-collapsed:not(.tool-route):has(.tv-vertical-menu:hover) .tv-vertical-command-topbar,
.app.side-menu-collapsed:not(.tool-route):has(.tv-vertical-menu:focus-within) .tv-vertical-command-topbar {
    margin-left: 306px;
    width: calc(100% - 306px);
}

.app.side-menu-open:not(.tool-route) .tv-app-main-content,
.app.side-menu-open:not(.tool-route) .footer {
    margin-left: 74px;
    transition: margin-left .18s ease;
}

.app.side-menu-collapsed:not(.tool-route) .tv-app-main-content,
.app.side-menu-collapsed:not(.tool-route) .footer {
    margin-left: 74px;
    transition: margin-left .18s ease;
}

.app.side-menu-collapsed .tv-vertical-menu {
    width: 74px;
    padding-inline: 8px;
}

.app.side-menu-collapsed .tv-vertical-menu:hover,
.app.side-menu-collapsed .tv-vertical-menu:focus-within {
    width: 306px;
    padding-inline: 10px;
}

.app.side-menu-collapsed .tv-vertical-brand-text,
.app.side-menu-collapsed .tv-vertical-quick a span,
.app.side-menu-collapsed .tv-vertical-section-label,
.app.side-menu-collapsed .tv-vertical-group > summary span,
.app.side-menu-collapsed .tv-vertical-group > summary > .mud-icon-root:last-child {
    display: none !important;
}

.app.side-menu-collapsed .tv-vertical-menu:hover .tv-vertical-brand-text,
.app.side-menu-collapsed .tv-vertical-menu:focus-within .tv-vertical-brand-text,
.app.side-menu-collapsed .tv-vertical-menu:hover .tv-vertical-quick a span,
.app.side-menu-collapsed .tv-vertical-menu:focus-within .tv-vertical-quick a span,
.app.side-menu-collapsed .tv-vertical-menu:hover .tv-vertical-section-label,
.app.side-menu-collapsed .tv-vertical-menu:focus-within .tv-vertical-section-label,
.app.side-menu-collapsed .tv-vertical-menu:hover .tv-vertical-group > summary span,
.app.side-menu-collapsed .tv-vertical-menu:focus-within .tv-vertical-group > summary span {
    display: block !important;
}

.app.side-menu-collapsed .tv-vertical-menu:hover .tv-vertical-group > summary > .mud-icon-root:last-child,
.app.side-menu-collapsed .tv-vertical-menu:focus-within .tv-vertical-group > summary > .mud-icon-root:last-child {
    display: inline-flex !important;
}

.app.side-menu-collapsed .tv-vertical-menu-head,
.app.side-menu-collapsed .tv-vertical-brand,
.app.side-menu-collapsed .tv-vertical-group > summary,
.app.side-menu-collapsed .tv-vertical-quick a {
    justify-content: center;
}

.app.side-menu-collapsed .tv-vertical-menu:hover .tv-vertical-menu-head,
.app.side-menu-collapsed .tv-vertical-menu:focus-within .tv-vertical-menu-head {
    justify-content: space-between;
}

.app.side-menu-collapsed .tv-vertical-menu:hover .tv-vertical-brand,
.app.side-menu-collapsed .tv-vertical-menu:focus-within .tv-vertical-brand,
.app.side-menu-collapsed .tv-vertical-menu:hover .tv-vertical-group > summary,
.app.side-menu-collapsed .tv-vertical-menu:focus-within .tv-vertical-group > summary,
.app.side-menu-collapsed .tv-vertical-menu:hover .tv-vertical-quick a,
.app.side-menu-collapsed .tv-vertical-menu:focus-within .tv-vertical-quick a {
    justify-content: flex-start;
}

.app.side-menu-collapsed .tv-vertical-quick {
    grid-template-columns: 1fr;
}

.app.side-menu-collapsed .tv-vertical-group[open] .tv-vertical-submenu,
.app.side-menu-collapsed .tv-vertical-more-links {
    display: none;
}

.app.side-menu-collapsed .tv-vertical-menu:hover .tv-vertical-group[open] .tv-vertical-submenu,
.app.side-menu-collapsed .tv-vertical-menu:focus-within .tv-vertical-group[open] .tv-vertical-submenu,
.app.side-menu-collapsed .tv-vertical-menu:hover .tv-vertical-more-links,
.app.side-menu-collapsed .tv-vertical-menu:focus-within .tv-vertical-more-links {
    display: grid;
}

.app.side-menu-open .tv-sticky-search-results {
    left: calc(74px + (100vw - 74px) / 2);
    width: min(920px, calc(100vw - 106px));
}

.app.side-menu-collapsed .tv-sticky-search-results {
    left: calc(74px + (100vw - 74px) / 2);
    width: min(920px, calc(100vw - 106px));
}

.app.side-menu-collapsed:has(.tv-vertical-menu:hover) .tv-sticky-search-results,
.app.side-menu-collapsed:has(.tv-vertical-menu:focus-within) .tv-sticky-search-results {
    left: calc(306px + (100vw - 306px) / 2);
    width: min(920px, calc(100vw - 338px));
}

@media (max-width: 900px) {
    .tv-vertical-menu {
        width: min(286px, calc(100vw - 20px));
    }

    .app.side-menu-open:not(.tool-route) .tv-app-main-content,
    .app.side-menu-open:not(.tool-route) .footer,
    .app.side-menu-collapsed:not(.tool-route) .tv-app-main-content,
    .app.side-menu-collapsed:not(.tool-route) .footer {
        margin-left: 64px;
    }

    .app.side-menu-collapsed .tv-vertical-menu {
        width: 64px;
    }

    .tv-vertical-command-topbar {
        min-height: 64px !important;
        padding: 8px 10px !important;
    }

    .app.side-menu-open:not(.tool-route) .tv-vertical-command-topbar {
        margin-left: min(286px, calc(100vw - 20px));
        width: calc(100% - min(286px, calc(100vw - 20px)));
    }

    .app.side-menu-collapsed:not(.tool-route) .tv-vertical-command-topbar {
        margin-left: 64px;
        width: calc(100% - 64px);
    }

    .tv-vertical-command-topbar .tv-sticky-search-box {
        min-height: 42px !important;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
    }

    .tv-vertical-command-topbar .tv-sticky-filter-button {
        width: 40px !important;
        min-width: 40px;
        padding: 0 !important;
    }

    .tv-vertical-command-topbar .tv-sticky-filter-button span {
        display: none;
    }

    .app.side-menu-open .tv-sticky-search-results,
    .app.side-menu-collapsed .tv-sticky-search-results {
        left: 74px;
        right: 10px;
        width: auto;
        transform: none;
    }
}

/* Large editor/tool workspace fixes: keep textareas, alerts and split panes inside the viewport. */
.tool-route .tool-page,
.tool-route .tool-body,
.tool-route .focused-tool-page {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.tool-route .tool-context-alert {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.tool-route .tool-context-alert,
.tool-route .tool-context-alert .mud-alert-message,
.tool-route .tool-context-alert .mud-alert-message > * {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.5;
}

.tool-route .split {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(96px, auto) minmax(0, 1fr) !important;
    gap: clamp(12px, 1.5vw, 18px);
    align-items: stretch;
}

.tool-route .pane {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tool-route .pane-mid {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
    padding-top: 0;
}

.tool-route .pane-mid .btn,
.tool-route .pane-mid .btn-p,
.tool-route .pane-mid .btn-s {
    width: 100%;
    justify-content: center;
}

.tool-route .out-bar {
    min-width: 0;
    gap: 10px;
}

.tool-route .out-bar > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tool-route .split .ta {
    min-height: clamp(280px, 48vh, 560px);
    max-height: 70vh;
    overflow: auto;
    resize: vertical;
}

.tool-route .ta {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.tool-route textarea.ta {
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
    tab-size: 2;
}

@media (max-width: 900px) {
    .tool-route .split {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .tool-route .pane-mid {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        order: 2;
    }

    .tool-route .pane-mid .btn,
    .tool-route .pane-mid .btn-p,
    .tool-route .pane-mid .btn-s {
        width: auto;
        min-width: 112px;
    }

    .tool-route .split .ta {
        min-height: clamp(240px, 42vh, 420px);
        max-height: none;
    }
}

@media (max-width: 560px) {
    .tool-route .tool-head {
        align-items: flex-start;
    }

    .tool-route .split .ta {
        min-height: 220px;
    }
}

.gtm-noscript-frame,
.blazor-error-hidden {
    display: none !important;
    visibility: hidden !important;
}

.footer-address {
    display: block;
    color: inherit;
    line-height: 1.5;
    opacity: .84;
}

.category-insight-grid,
.category-faq-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.category-insight-grid {
    margin-top: 22px;
}

.category-insight-card,
.category-faq-panel {
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .94);
    border-radius: 22px;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .08);
}

.category-insight-card {
    padding: 18px;
}

.category-insight-card .mud-icon-root {
    color: var(--mud-palette-primary);
    margin-bottom: 8px;
}

.category-insight-card h2,
.category-faq-panel h2,
.category-faq-grid h3 {
    margin: 0 0 8px;
}

.category-insight-card p,
.category-faq-grid p {
    margin: 0;
    color: #475569;
    line-height: 1.55;
}

.category-mini-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-mini-links a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(37, 99, 235, .16);
    border-radius: 999px;
    background: rgba(239, 246, 255, .9);
    color: #1d4ed8;
    font-weight: 800;
    font-size: .88rem;
    text-decoration: none;
}

.category-faq-panel {
    margin-top: 18px;
    padding: 20px;
}

.category-faq-grid article {
    border-top: 1px solid rgba(15, 23, 42, .08);
    padding-top: 12px;
}

.network-safety-panel {
    margin-top: 18px;
}

.network-chip.static {
    cursor: default;
    pointer-events: none;
}

.dark .category-insight-card,
.dark .category-faq-panel {
    background: rgba(15, 23, 42, .92);
    border-color: rgba(148, 163, 184, .20);
}

.dark .category-insight-card p,
.dark .category-faq-grid p {
    color: #cbd5e1;
}

/* Product-style top menu: grouped discovery without crowding the dashboard. */
.tv-command-topbar {
    overflow: visible !important;
}

.tv-command-topbar .mud-toolbar {
    display: grid !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 84px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.tv-product-nav {
    width: min(1120px, calc(100% - 180px));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.tv-product-nav::-webkit-scrollbar {
    display: none;
}

.tv-product-nav-item,
.tv-product-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #0f172a;
    font-size: .88rem;
    font-weight: 850;
    cursor: pointer;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.tv-product-nav-item:hover,
.tv-product-nav-item:focus-visible,
.tv-product-nav-item.active,
.tv-product-nav-link:hover,
.tv-product-nav-link:focus-visible {
    background: #eef6ff;
    border-color: rgba(21, 91, 213, .16);
    color: #155bd5;
    outline: 0;
}

.tv-product-nav-item.active {
    transform: translateY(-1px);
}

.tv-product-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 118;
    background: rgba(15, 23, 42, .10);
    backdrop-filter: blur(2px);
}

.tv-product-mega-menu {
    position: fixed;
    z-index: 119;
    top: 92px;
    left: 50%;
    width: min(1120px, calc(100vw - 28px));
    max-height: min(72vh, 680px);
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: minmax(250px, .74fr) minmax(0, 1.6fr);
    gap: 18px;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 28px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 30px 80px rgba(15, 23, 42, .18);
    overflow: auto;
}

.tv-product-mega-intro {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 20px;
    border-radius: 22px;
    background: linear-gradient(145deg, #f7fbff, #eaf4ff);
    border: 1px solid rgba(21, 91, 213, .12);
}

.tv-product-mega-intro > span {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #ffffff;
    color: #155bd5;
    font-size: .78rem;
    font-weight: 900;
}

.tv-product-mega-intro h2 {
    margin: 0;
    color: #071225;
    font-size: clamp(1.55rem, 2.4vw, 2.35rem);
    line-height: 1.04;
    letter-spacing: 0;
}

.tv-product-mega-intro p {
    margin: 0;
    color: #52637b;
    line-height: 1.55;
    font-size: .98rem;
}

.tv-product-mega-intro a {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #155bd5;
    color: #ffffff;
    text-decoration: none;
    font-weight: 900;
}

.tv-product-mega-content {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.tv-product-menu-categories,
.tv-product-menu-tools {
    display: grid;
    gap: 10px;
}

.tv-product-menu-categories {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.tv-product-menu-tools {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.tv-product-menu-categories a,
.tv-product-menu-tools a {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #e5edf7;
    border-radius: 16px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.tv-product-menu-categories a:hover,
.tv-product-menu-categories a:focus-visible,
.tv-product-menu-tools a:hover,
.tv-product-menu-tools a:focus-visible {
    border-color: rgba(21, 91, 213, .26);
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(21, 91, 213, .10);
    outline: 0;
}

.tv-product-menu-categories a > .mud-icon-root,
.tv-product-menu-tools a > span:first-child {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eef6ff;
    color: #155bd5;
}

.tv-product-menu-tools a > span:first-child .mud-icon-root {
    width: 21px;
    height: 21px;
}

.tv-product-menu-categories b,
.tv-product-menu-categories small,
.tv-product-menu-tools b,
.tv-product-menu-tools small {
    display: block;
    min-width: 0;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

.tv-product-menu-categories b,
.tv-product-menu-tools b {
    font-size: .92rem;
    line-height: 1.2;
}

.tv-product-menu-categories small,
.tv-product-menu-tools small {
    margin-top: 3px;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.35;
}

.dark .tv-product-nav-item,
.dark .tv-product-nav-link {
    color: #e2e8f0;
}

.dark .tv-product-nav-item:hover,
.dark .tv-product-nav-item:focus-visible,
.dark .tv-product-nav-item.active,
.dark .tv-product-nav-link:hover,
.dark .tv-product-nav-link:focus-visible {
    background: rgba(37, 99, 235, .22);
    border-color: rgba(147, 197, 253, .22);
    color: #bfdbfe;
}

.dark .tv-product-mega-menu {
    background: rgba(15, 23, 42, .96);
    border-color: rgba(148, 163, 184, .22);
}

.dark .tv-product-mega-intro,
.dark .tv-product-menu-categories a,
.dark .tv-product-menu-tools a {
    background: rgba(30, 41, 59, .86);
    border-color: rgba(148, 163, 184, .22);
    color: #f8fafc;
}

.dark .tv-product-mega-intro h2 {
    color: #f8fafc;
}

.dark .tv-product-mega-intro p,
.dark .tv-product-menu-categories small,
.dark .tv-product-menu-tools small {
    color: #cbd5e1;
}

@media (max-width: 980px) {
    .tv-product-nav {
        width: calc(100% - 20px);
        justify-content: flex-start;
    }

    .tv-product-mega-menu {
        top: 90px;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .tv-command-topbar .mud-toolbar {
        min-height: 78px !important;
    }

    .tv-product-nav {
        display: none;
    }

    .tv-product-mega-menu,
    .tv-product-menu-backdrop {
        display: none;
    }
}

/* Final hero headline size: strong but not oversized. */
.tv-command-home .tv-home-hero-copy h1 {
    max-width: 920px !important;
    font-size: clamp(2.65rem, 5.2vw, 5.65rem) !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
}

@media (max-width: 760px) {
    .tv-command-home .tv-home-hero-copy h1 {
        font-size: clamp(2.25rem, 11vw, 3.25rem) !important;
        line-height: 1 !important;
    }
}

.tv-command-home .tv-home-audience-panel {
    display: grid !important;
    gap: 18px !important;
    align-content: start !important;
    background: rgba(255, 255, 255, .82) !important;
    border: 1px solid rgba(0, 112, 224, .10) !important;
    border-radius: 34px !important;
    box-shadow: 0 28px 70px rgba(8, 52, 112, .12) !important;
    backdrop-filter: blur(18px);
}

.tv-command-home .tv-home-audience-panel .tv-home-audience-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    margin-top: 0 !important;
}

.tv-command-home .tv-home-audience-panel .tv-home-audience-card {
    min-height: 102px !important;
    background: #ffffff !important;
}

.tv-audience-panel-heading {
    display: grid;
    gap: 8px;
}

.tv-audience-panel-heading span {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 999px;
    background: #eef6ff;
    color: #155bd5;
    font-size: .78rem;
    font-weight: 900;
}

.tv-audience-panel-heading strong {
    color: #071225;
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    line-height: 1.12;
    letter-spacing: 0;
}

.tv-audience-panel-heading small {
    max-width: 560px;
    color: #53657f;
    font-size: .98rem;
    line-height: 1.55;
}

.tv-audience-tagline-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.tv-audience-tagline-grid span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 999px;
    background: #f5f9ff;
    color: #12325d;
    border: 1px solid rgba(0, 112, 224, .10);
    font-size: .84rem;
    font-weight: 850;
}

.tv-audience-tagline-grid svg {
    width: 18px !important;
    height: 18px !important;
    color: #0070e0;
}

.dark .tv-command-home .tv-home-audience-panel,
.dark .tv-command-home .tv-home-audience-panel .tv-home-audience-card {
    background: rgba(15, 23, 42, .82) !important;
    border-color: rgba(148, 163, 184, .24) !important;
}

.dark .tv-audience-panel-heading strong {
    color: #f8fafc;
}

.dark .tv-audience-panel-heading small {
    color: #cbd5e1;
}

/* Final homepage audience-card guard: keep these cards readable at every width. */
.tv-command-home .tv-home-audience-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(14px, 2vw, 22px) !important;
    width: min(1180px, 100%) !important;
    justify-self: start !important;
    align-items: stretch !important;
}

.tv-command-home .tv-home-audience-card {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 16px !important;
    row-gap: 6px !important;
    align-items: start !important;
    min-width: 0 !important;
    min-height: 132px !important;
    padding: clamp(18px, 2vw, 24px) !important;
    overflow: hidden !important;
    text-align: left !important;
    writing-mode: horizontal-tb !important;
}

.tv-command-home .tv-home-audience-card > .mud-icon-root,
.tv-command-home .tv-home-audience-card > svg {
    grid-row: 1 / 3 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    padding: 12px !important;
    border-radius: 18px !important;
}

.tv-command-home .tv-home-audience-card b,
.tv-command-home .tv-home-audience-card small {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
}

.tv-command-home .tv-home-audience-card b {
    font-size: clamp(1.04rem, 1vw, 1.16rem) !important;
    line-height: 1.28 !important;
}

.tv-command-home .tv-home-audience-card small {
    font-size: .95rem !important;
    line-height: 1.55 !important;
}

@media (min-width: 1360px) {
    .tv-command-home .tv-home-audience-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        width: min(1500px, 100%) !important;
    }
}

@media (max-width: 780px) {
    .tv-command-home .tv-home-audience-grid {
        grid-template-columns: 1fr !important;
    }

    .tv-command-home .tv-home-audience-card {
        min-height: 112px !important;
    }
}

/* Container-aware final pass: column count follows the actual section width, not viewport width. */
.tv-command-home .tv-home-audience-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}

@media (max-width: 360px) {
    .tv-command-home .tv-home-audience-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Premium full-width DaivVerse product experience. */
:root {
    --dv-blue: #003087;
    --dv-blue-2: #0070e0;
    --dv-cyan: #00b8ff;
    --dv-ink: #07142f;
    --dv-muted: #4c5f7c;
    --dv-border: rgba(5, 35, 80, .11);
    --dv-card-shadow: 0 20px 48px rgba(8, 52, 112, .10);
}

body,
.app,
.mud-typography,
.mud-button-root,
.mud-input-root {
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.app:not(.dark) {
    background:
        linear-gradient(180deg, #f8fbff 0, #f8fbff 84px, #ffffff 85px, #f6fbff 100%) !important;
}

.mud-topbar.tv-command-topbar {
    height: 72px !important;
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(7, 20, 47, .07) !important;
    box-shadow: 0 10px 34px rgba(8, 52, 112, .07) !important;
}

.tv-sticky-brand {
    color: #003c24 !important;
    font-size: .98rem !important;
    font-weight: 900 !important;
}

.tv-sticky-search-inner {
    min-height: 72px;
    gap: clamp(8px, 1.8vw, 16px);
}

.tv-sticky-search-box {
    min-height: 50px !important;
    border: 1px solid rgba(0, 112, 224, .12) !important;
    box-shadow: 0 10px 28px rgba(8, 52, 112, .08) !important;
}

.tv-sticky-filter-button,
.tv-sticky-bookmark {
    width: 48px !important;
    height: 48px !important;
    border-radius: 999px !important;
    background: #eaf4ff !important;
    color: var(--dv-blue-2) !important;
    box-shadow: none !important;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.tv-sticky-filter-button:hover,
.tv-sticky-bookmark:hover,
.tv-sticky-filter-button:focus-visible,
.tv-sticky-bookmark:focus-visible {
    transform: translateY(-1px);
    background: #dcedff !important;
    box-shadow: 0 12px 26px rgba(0, 112, 224, .14) !important;
}

.tv-command-home {
    color: var(--dv-ink);
}

.tv-command-home .tv-home-hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: clamp(24px, 4vw, 48px) !important;
    min-height: auto !important;
    padding-top: clamp(48px, 7vw, 112px) !important;
    padding-bottom: clamp(36px, 6vw, 86px) !important;
    background:
        radial-gradient(circle at 80% 14%, rgba(0, 112, 224, .20), transparent 25%),
        radial-gradient(circle at 12% 78%, rgba(0, 184, 255, .13), transparent 31%),
        linear-gradient(135deg, #ffffff 0%, #f7fbff 42%, #e9f5ff 100%) !important;
}

.tv-command-home .tv-home-hero::before {
    inset: 12% -150px auto auto !important;
    width: min(42vw, 520px) !important;
    height: min(42vw, 520px) !important;
    background:
        radial-gradient(circle, rgba(0, 112, 224, .12), rgba(0, 112, 224, 0) 68%) !important;
}

.tv-command-home .tv-home-hero-copy {
    display: grid;
    gap: 18px;
    max-width: 1060px;
}

.tv-command-home .tv-home-hero-copy h1 {
    margin: 0 !important;
    color: var(--dv-ink);
    font-size: clamp(3.1rem, 7.1vw, 7.25rem) !important;
    line-height: .93 !important;
    font-weight: 920;
    letter-spacing: 0 !important;
}

.tv-command-home .tv-home-hero-copy p {
    color: var(--dv-muted);
    font-size: clamp(1.06rem, 1.35vw, 1.32rem) !important;
    line-height: 1.72 !important;
}

.tv-home-kicker {
    border-color: rgba(0, 112, 224, .13) !important;
    background: rgba(255, 255, 255, .92) !important;
    color: var(--dv-blue) !important;
}

.tv-command-home .tv-home-actions .mud-button-root {
    min-height: 50px !important;
    padding-inline: 24px !important;
    border-radius: 999px !important;
    letter-spacing: 0 !important;
}

.tv-command-home .tv-home-actions .mud-button-filled-primary {
    background: linear-gradient(135deg, #001c64, #0070e0) !important;
    box-shadow: 0 18px 38px rgba(0, 48, 135, .24) !important;
}

.tv-home-trust-row span {
    background: rgba(255, 255, 255, .88) !important;
    border: 1px solid rgba(0, 112, 224, .10);
    box-shadow: 0 12px 26px rgba(8, 52, 112, .06) !important;
}

.tv-home-hero-visual {
    display: grid !important;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr) !important;
    gap: 16px !important;
    padding: clamp(16px, 2.4vw, 28px) !important;
    border: 1px solid rgba(0, 112, 224, .10) !important;
    border-radius: 34px !important;
    background: rgba(255, 255, 255, .90) !important;
    box-shadow: 0 30px 80px rgba(8, 52, 112, .13) !important;
}

.tv-hero-search-preview {
    min-height: 58px !important;
    border-radius: 999px !important;
}

.tv-hero-preview-card.primary {
    position: relative;
    overflow: hidden;
    min-height: 190px;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 82% 18%, rgba(255, 255, 255, .18), transparent 32%),
        linear-gradient(135deg, #002269, #0070e0 62%, #00a9ff) !important;
}

.tv-hero-preview-card.primary::after {
    content: "";
    position: absolute;
    right: -48px;
    bottom: -64px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
}

.tv-hero-mini-grid a,
.tv-hero-safe-note,
.tv-command-home .tv-home-audience-card,
.tv-popular-card,
.tv-onepage-category-card,
.tv-onepage-tool-card {
    border: 1px solid var(--dv-border) !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 12px 30px rgba(8, 52, 112, .06) !important;
}

.tv-hero-mini-grid a,
.tv-popular-card,
.tv-onepage-tool-card {
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.tv-hero-mini-grid a:hover,
.tv-popular-card:hover,
.tv-onepage-tool-card:hover,
.tv-hero-mini-grid a:focus-visible,
.tv-popular-card:focus-visible,
.tv-onepage-tool-card:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(0, 112, 224, .22) !important;
    box-shadow: 0 20px 44px rgba(8, 52, 112, .12) !important;
}

.tv-command-home .tv-home-audience-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.tv-command-home .tv-home-audience-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 5px;
    align-items: start;
    padding: 20px !important;
    border-radius: 26px !important;
}

.tv-command-home .tv-home-audience-card > svg {
    display: grid;
    place-items: center;
    width: 40px !important;
    height: 40px !important;
    padding: 9px;
    border-radius: 14px;
    background: #eaf4ff;
    color: var(--dv-blue-2) !important;
}

.tv-command-home .tv-home-search-panel,
.tv-command-home .tv-home-section,
.tv-command-home .tv-onepage-tool-map {
    border: 1px solid var(--dv-border) !important;
    border-radius: 34px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: var(--dv-card-shadow) !important;
    padding: clamp(22px, 3.4vw, 44px) !important;
}

.tv-section-heading {
    max-width: 920px;
}

.tv-section-heading span {
    color: var(--dv-blue-2) !important;
    font-size: .76rem !important;
    font-weight: 900 !important;
    letter-spacing: .14em !important;
}

.tv-section-heading h2 {
    color: var(--dv-ink) !important;
    font-size: clamp(1.85rem, 3.2vw, 3.25rem) !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
}

.tv-section-heading p {
    color: var(--dv-muted) !important;
    font-size: clamp(.98rem, 1.1vw, 1.12rem) !important;
    line-height: 1.65 !important;
}

.tv-popular-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    gap: 16px !important;
}

.tv-popular-card {
    min-height: 150px;
    border-radius: 26px !important;
    padding: 20px !important;
}

.tv-popular-card span,
.tv-onepage-tool-icon {
    background: #eaf4ff !important;
    color: var(--dv-blue-2) !important;
}

.tv-onepage-category-grid {
    gap: 22px !important;
}

.tv-onepage-category-card {
    overflow: hidden;
    border-radius: 30px !important;
    padding: 0 !important;
}

.tv-onepage-category-card > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
    padding: clamp(18px, 2.4vw, 30px);
    background:
        radial-gradient(circle at 100% 0%, rgba(0, 112, 224, .10), transparent 28%),
        linear-gradient(135deg, #f7fbff, #ffffff);
    border-bottom: 1px solid rgba(7, 20, 47, .07);
}

.tv-onepage-category-title {
    align-items: flex-start !important;
}

.tv-onepage-category-title h3 {
    color: var(--dv-ink) !important;
    font-size: clamp(1.3rem, 2vw, 2rem) !important;
}

.tv-onepage-category-title p,
.tv-onepage-tool-card small,
.tv-popular-card small {
    color: var(--dv-muted) !important;
    line-height: 1.5 !important;
}

.tv-onepage-tool-list {
    padding: clamp(16px, 2.2vw, 28px) !important;
    gap: 14px !important;
}

.tv-onepage-tool-card {
    min-height: 98px;
    border-radius: 22px !important;
    padding: 16px !important;
}

.tv-safe-promise {
    background:
        radial-gradient(circle at 100% 0%, rgba(0, 112, 224, .12), transparent 30%),
        linear-gradient(135deg, #f7fbff, #ffffff) !important;
}

.tv-why-grid article {
    border: 1px solid var(--dv-border) !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 24px rgba(8, 52, 112, .06) !important;
}

@media (prefers-reduced-motion: no-preference) {
    .tv-command-home .tv-home-hero-copy,
    .tv-home-hero-visual,
    .tv-command-home .tv-home-audience-card,
    .tv-command-home .tv-home-search-panel,
    .tv-command-home .tv-home-section,
    .tv-command-home .tv-onepage-tool-map {
        animation: dv-rise-in .55s ease both;
    }

    .tv-home-hero-visual {
        animation-delay: .08s;
    }

    .tv-command-home .tv-home-audience-card {
        animation-delay: .14s;
    }
}

@keyframes dv-rise-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 900px) {
    .mud-topbar.tv-command-topbar {
        height: 64px !important;
    }

    .tv-sticky-search-inner {
        min-height: 64px;
    }

    .tv-sticky-brand {
        max-width: 112px;
    }

    .tv-command-home .tv-home-hero {
        padding-top: 34px !important;
    }

    .tv-home-hero-visual,
    .tv-command-home .tv-home-audience-grid {
        grid-template-columns: 1fr !important;
    }

    .tv-command-home .tv-home-audience-card {
        min-height: 104px;
    }
}

@media (max-width: 620px) {
    .tv-command-home .tv-home-hero {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .tv-command-home .tv-home-hero-copy h1 {
        font-size: clamp(2.55rem, 12.5vw, 3.85rem) !important;
    }

    .tv-command-home .tv-home-actions {
        align-items: stretch;
    }

    .tv-command-home .tv-home-actions .mud-button-root {
        width: 100%;
    }

    .tv-home-trust-row span {
        width: 100%;
        justify-content: center;
    }

    .tv-hero-search-preview {
        grid-template-columns: 24px minmax(0, 1fr);
        border-radius: 22px !important;
        padding: 12px 14px !important;
    }

    .tv-hero-search-preview b {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .tv-command-home .tv-home-search-box {
        border-radius: 24px !important;
    }
}

.app:not(.tool-route) .mud-main-content,
.app:not(.tool-route) .main {
    padding-top: 0 !important;
}

.tv-command-home {
    padding-top: 0 !important;
}

@media (min-width: 520px) and (max-width: 900px) {
    .tv-command-home .tv-home-audience-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .tv-sticky-search-inner {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
    }

    .tv-sticky-brand {
        display: inline-flex !important;
        max-width: 116px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tv-sticky-search-box {
        min-width: 0;
    }
}

@media (max-width: 430px) {
    .tv-sticky-brand {
        display: none !important;
    }

    .tv-sticky-search-inner {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }
}

/* Audience card readability fix: never let hero cards collapse into vertical text. */
.tv-command-home .tv-home-audience-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
    align-items: stretch !important;
}

.tv-command-home .tv-home-audience-card {
    min-width: 0 !important;
    min-height: 124px !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    overflow: hidden;
}

.tv-command-home .tv-home-audience-card b,
.tv-command-home .tv-home-audience-card small {
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.tv-command-home .tv-home-audience-card b {
    white-space: normal;
    text-wrap: balance;
}

.tv-command-home .tv-home-audience-card small {
    text-wrap: pretty;
}

@media (min-width: 1180px) {
    .tv-command-home .tv-home-audience-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 720px) and (max-width: 1179px) {
    .tv-command-home .tv-home-audience-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 719px) {
    .tv-command-home .tv-home-audience-grid {
        grid-template-columns: 1fr !important;
    }

    .tv-command-home .tv-home-audience-card {
        min-height: 98px !important;
    }
}

/* Open, full-width landing refinement for a stronger product-site feel. */
.tv-command-home .tv-home-hero {
    overflow: hidden;
}

.tv-command-home .tv-home-hero-copy h1 {
    text-wrap: balance;
}

.tv-command-home .tv-home-hero-copy p {
    text-wrap: pretty;
}

.tv-hero-tool-launcher {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: min(760px, 100%);
    margin-top: 2px;
}

.tv-hero-tool-launch {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 8px 12px 8px 8px;
    border: 1px solid rgba(0, 112, 224, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    color: var(--dv-ink);
    box-shadow: 0 10px 24px rgba(8, 52, 112, .06);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.tv-hero-tool-launch span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 112, 224, .12), rgba(0, 193, 190, .16));
    color: #0067c5;
}

.tv-hero-tool-launch b {
    font-size: .82rem;
    line-height: 1;
    white-space: nowrap;
}

.tv-hero-tool-launch:hover,
.tv-hero-tool-launch:focus-visible {
    border-color: rgba(0, 112, 224, .32);
    box-shadow: 0 16px 34px rgba(8, 52, 112, .12);
    transform: translateY(-2px);
    text-decoration: none;
}

.tv-command-home .tv-home-search-panel {
    margin-top: clamp(0px, 1vw, 12px) !important;
}

.tv-command-home .tv-home-search-panel h2 {
    font-size: clamp(1.45rem, 2.2vw, 2.2rem) !important;
    line-height: 1.1;
}

.tv-command-home .tv-home-search-box {
    border: 2px solid rgba(0, 112, 224, .12) !important;
}

.tv-command-home .tv-home-search-box:focus-within {
    border-color: rgba(0, 112, 224, .34) !important;
    box-shadow:
        inset 0 0 0 1px rgba(0, 112, 224, .08),
        0 18px 40px rgba(0, 112, 224, .14) !important;
}

.tv-command-home .tv-home-section:nth-of-type(3),
.tv-command-home .tv-home-section:nth-of-type(5) {
    background:
        radial-gradient(circle at 0% 0%, rgba(0, 112, 224, .10), transparent 31%),
        linear-gradient(135deg, #ffffff, #f7fbff) !important;
}

.tv-command-home .tv-home-section:nth-of-type(4),
.tv-command-home .tv-onepage-tool-map {
    background:
        radial-gradient(circle at 100% 0%, rgba(0, 184, 255, .10), transparent 28%),
        linear-gradient(135deg, #ffffff, #fbfdff) !important;
}

@media (min-width: 1120px) {
    .tv-command-home .tv-home-hero {
        grid-template-columns: minmax(0, 1.02fr) minmax(390px, .82fr) !important;
        align-items: center !important;
        column-gap: clamp(42px, 6vw, 96px) !important;
        min-height: calc(100svh - 72px) !important;
    }

    .tv-command-home .tv-home-hero-copy {
        grid-column: 1;
        grid-row: 1;
    }

    .tv-home-hero-visual {
        grid-column: 2;
        grid-row: 1;
        grid-template-columns: 1fr !important;
        align-self: center;
    }

    .tv-command-home .tv-home-audience-grid {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (min-width: 1500px) {
    .tv-command-home .tv-home-hero-copy h1 {
        font-size: clamp(5.6rem, 6.2vw, 7.9rem) !important;
    }

    .tv-command-home .tv-home-hero-copy p {
        max-width: 850px;
    }
}

@media (max-width: 900px) {
    .tv-hero-tool-launcher {
        gap: 8px;
    }

    .tv-hero-tool-launch {
        min-height: 44px;
    }
}

@media (max-width: 620px) {
    .tv-command-home .tv-home-hero {
        padding-top: 22px !important;
        gap: 18px !important;
    }

    .tv-command-home .tv-home-hero-copy {
        gap: 14px;
    }

    .tv-command-home .tv-home-hero-copy h1 {
        font-size: clamp(2.35rem, 11.5vw, 3.5rem) !important;
    }

    .tv-command-home .tv-home-hero-copy p {
        font-size: .98rem !important;
        line-height: 1.62 !important;
    }

    .tv-home-hero-visual {
        border-radius: 26px !important;
        padding: 12px !important;
    }

    .tv-hero-preview-card.primary {
        min-height: 154px;
    }

    .tv-command-home .tv-home-search-panel,
    .tv-command-home .tv-home-section,
    .tv-command-home .tv-onepage-tool-map {
        border-radius: 26px !important;
    }
}

.tv-home-hero,
.tv-home-search-panel,
.tv-home-section {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto 24px;
}

.tv-home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    gap: 20px;
    align-items: stretch;
    padding-top: 22px;
}

.tv-home-hero-copy,
.tv-home-search-panel,
.tv-home-section,
.tv-onepage-tool-map {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 24px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .08);
}

.tv-home-hero-copy {
    padding: clamp(24px, 4vw, 46px);
}

.tv-home-hero-copy h1 {
    margin: 16px 0 12px;
    max-width: 880px;
    color: #0f172a;
    font-size: clamp(2rem, 4vw, 4.2rem);
    line-height: 1.02;
    letter-spacing: 0;
}

.tv-home-hero-copy p,
.tv-section-heading p {
    color: #475569;
    font-size: 1rem;
    line-height: 1.65;
}

.tv-home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.tv-home-audience-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.tv-home-audience-card,
.tv-popular-card,
.tv-home-search-results a {
    text-decoration: none;
    color: inherit;
}

.tv-home-audience-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 16px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .06);
}

.tv-home-audience-card svg,
.tv-popular-card span,
.tv-why-grid article svg {
    color: #155bd5;
}

.tv-home-audience-card b,
.tv-home-audience-card small {
    display: block;
}

.tv-home-audience-card small {
    margin-top: 4px;
    color: #64748b;
    line-height: 1.45;
}

.tv-home-search-panel,
.tv-home-section {
    padding: clamp(18px, 3vw, 28px);
}

.tv-home-search-panel h2 {
    margin: 0 0 14px;
    color: #0f172a;
    font-size: 1.35rem;
}

.tv-home-search-box {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 58px;
    padding: 0 14px;
    border: 1px solid rgba(21, 91, 213, .18);
    border-radius: 18px;
    background: #f8fafc;
}

.tv-home-search-input .mud-input-control,
.tv-home-search-input .mud-input {
    margin: 0 !important;
}

.tv-home-search-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.tv-home-search-results a {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
}

.tv-home-search-results b,
.tv-home-search-results small {
    display: block;
}

.tv-home-search-results small {
    margin-top: 3px;
    color: #64748b;
    line-height: 1.35;
}

.tv-section-heading {
    margin-bottom: 18px;
}

.tv-section-heading span {
    display: inline-flex;
    margin-bottom: 8px;
    color: #155bd5;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tv-section-heading h2 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.4rem, 2.4vw, 2.1rem);
    line-height: 1.12;
    letter-spacing: 0;
}

.tv-popular-grid,
.tv-why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.tv-popular-card,
.tv-why-grid article {
    display: grid;
    gap: 8px;
    align-content: start;
    min-height: 142px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.tv-popular-card:hover,
.tv-popular-card:focus-visible,
.tv-home-audience-card:hover,
.tv-home-audience-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(21, 91, 213, .28);
    box-shadow: 0 16px 32px rgba(15, 23, 42, .10);
    outline: none;
}

.tv-popular-card span {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eef4ff;
}

.tv-popular-card b,
.tv-popular-card small,
.tv-why-grid article b,
.tv-why-grid article span {
    display: block;
}

.tv-popular-card small,
.tv-why-grid article span {
    color: #64748b;
    line-height: 1.45;
}

.tv-safe-promise {
    background: linear-gradient(135deg, #f8fbff, #ffffff 48%, #f0fdf4);
}

.contact-native-label {
    display: block;
    margin: 2px 0 6px;
    color: #334155;
    font-size: .9rem;
    font-weight: 800;
}

.contact-native-select {
    width: 100%;
    min-height: 56px;
    margin-bottom: 10px;
    padding: 0 14px;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: #fff;
    color: #0f172a;
    font: inherit;
}

.dark .tv-home-hero-copy,
.dark .tv-home-search-panel,
.dark .tv-home-section,
.dark .tv-onepage-tool-map,
.dark .tv-home-audience-card,
.dark .tv-home-search-results a,
.dark .tv-popular-card,
.dark .tv-why-grid article,
.dark .contact-native-select {
    background: #0f172a;
    color: #f8fafc;
    border-color: rgba(148, 163, 184, .24);
}

.dark .tv-home-hero-copy h1,
.dark .tv-home-search-panel h2,
.dark .tv-section-heading h2 {
    color: #f8fafc;
}

.dark .tv-home-hero-copy p,
.dark .tv-section-heading p,
.dark .tv-home-audience-card small,
.dark .tv-home-search-results small,
.dark .tv-popular-card small,
.dark .tv-why-grid article span {
    color: #cbd5e1;
}

.dark .tv-home-search-box {
    background: #111827;
    border-color: rgba(148, 163, 184, .32);
}

/* Homepage hero refresh: open product-site clarity with original DaivVerse styling. */
.tv-command-home .tv-home-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .78fr);
    gap: clamp(22px, 4vw, 56px);
    align-items: center;
    width: min(1180px, calc(100% - 32px));
    margin: 16px auto 24px;
    padding: clamp(28px, 5vw, 64px);
    overflow: hidden;
    border: 1px solid rgba(18, 112, 255, .12);
    border-radius: 34px;
    background:
        radial-gradient(circle at 82% 18%, rgba(0, 112, 224, .18), transparent 30%),
        radial-gradient(circle at 10% 90%, rgba(0, 191, 255, .16), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #f3f9ff 46%, #e9f4ff 100%);
    box-shadow: 0 28px 80px rgba(8, 52, 112, .14);
}

.tv-command-home .tv-home-hero::before {
    content: "";
    position: absolute;
    inset: auto -90px -160px auto;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(0, 112, 224, .10);
    pointer-events: none;
}

.tv-command-home .tv-home-hero-copy {
    position: relative;
    z-index: 1;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.tv-home-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 8px 13px;
    border: 1px solid rgba(0, 112, 224, .16);
    border-radius: 999px;
    background: #ffffff;
    color: #003087;
    font-weight: 800;
    font-size: .82rem;
    box-shadow: 0 12px 28px rgba(8, 52, 112, .08);
}

.tv-home-kicker svg {
    width: 18px;
    height: 18px;
    color: #0070e0;
}

.tv-command-home .tv-home-hero-copy h1 {
    max-width: 760px;
    margin: 22px 0 18px;
    color: #06163a;
    font-size: clamp(2.45rem, 5vw, 4.85rem);
    line-height: .98;
    letter-spacing: 0;
}

.tv-command-home .tv-home-hero-copy p {
    max-width: 650px;
    margin: 0;
    color: #31456f;
    font-size: clamp(1.02rem, 1.2vw, 1.18rem);
    line-height: 1.7;
}

.tv-command-home .tv-home-actions {
    margin-top: 26px;
    gap: 12px;
}

.tv-command-home .tv-home-actions .mud-button-root {
    min-height: 46px;
    border-radius: 999px;
    padding-inline: 20px;
    font-weight: 800;
    text-transform: none;
}

.tv-command-home .tv-home-actions .mud-button-filled-primary {
    background: #003087;
    box-shadow: 0 16px 34px rgba(0, 48, 135, .24);
}

.tv-home-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.tv-home-trust-row span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    color: #24446f;
    font-size: .86rem;
    font-weight: 750;
    box-shadow: inset 0 0 0 1px rgba(0, 112, 224, .10);
}

.tv-home-trust-row svg {
    width: 18px;
    height: 18px;
    color: #0070e0;
}

.tv-home-hero-visual {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
    padding: clamp(16px, 2.2vw, 24px);
    border: 1px solid rgba(0, 112, 224, .12);
    border-radius: 30px;
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 24px 60px rgba(8, 52, 112, .16);
    backdrop-filter: blur(18px);
}

.tv-hero-search-preview,
.tv-hero-safe-note,
.tv-hero-preview-card,
.tv-hero-mini-grid a {
    border: 1px solid rgba(15, 23, 42, .08);
    background: #ffffff;
}

.tv-hero-search-preview {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 52px;
    padding: 0 14px;
    border-radius: 999px;
    color: #64748b;
    box-shadow: 0 12px 28px rgba(8, 52, 112, .08);
}

.tv-hero-search-preview svg {
    color: #0070e0;
}

.tv-hero-search-preview b {
    justify-self: end;
    padding: 7px 11px;
    border-radius: 999px;
    background: #e7f1ff;
    color: #003087;
    font-size: .78rem;
}

.tv-hero-preview-card {
    display: grid;
    gap: 10px;
    padding: 20px;
    border-radius: 24px;
    color: #0f172a;
}

.tv-hero-preview-card.primary {
    background: linear-gradient(135deg, #003087, #0070e0);
    color: #ffffff;
    border: 0;
}

.tv-hero-preview-card span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .84rem;
    font-weight: 800;
    color: rgba(255, 255, 255, .88);
}

.tv-hero-preview-card strong {
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.16;
}

.tv-hero-preview-card small {
    max-width: 34rem;
    color: rgba(255, 255, 255, .82);
    line-height: 1.55;
}

.tv-hero-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.tv-hero-mini-grid a {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 58px;
    padding: 12px;
    border-radius: 18px;
    color: #10284f;
    text-decoration: none;
    font-weight: 800;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.tv-hero-mini-grid a:hover,
.tv-hero-mini-grid a:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(0, 112, 224, .22);
    box-shadow: 0 14px 30px rgba(8, 52, 112, .10);
    outline: none;
}

.tv-hero-mini-grid svg {
    flex: 0 0 auto;
    color: #0070e0;
}

.tv-hero-safe-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    border-radius: 18px;
    color: #315071;
    font-weight: 750;
}

.tv-hero-safe-note svg {
    color: #00a86b;
}

.tv-command-home .tv-home-audience-grid {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 4px;
}

.tv-command-home .tv-home-audience-card {
    min-height: 116px;
    padding: 17px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .78);
    box-shadow: none;
}

.tv-command-home .tv-home-audience-card > svg {
    grid-row: 1 / 3;
    width: 28px;
    height: 28px;
    color: #0070e0;
}

.tv-command-home .tv-home-audience-card b {
    color: #06163a;
    font-size: .98rem;
}

.tv-command-home .tv-home-audience-card small {
    color: #415675;
    font-size: .88rem;
    line-height: 1.45;
}

.dark .tv-command-home .tv-home-hero {
    border-color: rgba(96, 165, 250, .20);
    background:
        radial-gradient(circle at 82% 18%, rgba(59, 130, 246, .20), transparent 30%),
        radial-gradient(circle at 10% 90%, rgba(20, 184, 166, .14), transparent 34%),
        linear-gradient(135deg, #0b1220 0%, #101d33 52%, #0b1528 100%);
}

.dark .tv-command-home .tv-home-hero-copy,
.dark .tv-command-home .tv-home-hero-copy h1 {
    color: #f8fafc;
}

.dark .tv-command-home .tv-home-hero-copy p,
.dark .tv-command-home .tv-home-audience-card small {
    color: #cbd5e1;
}

.dark .tv-home-kicker,
.dark .tv-home-trust-row span,
.dark .tv-home-hero-visual,
.dark .tv-hero-search-preview,
.dark .tv-hero-safe-note,
.dark .tv-hero-mini-grid a,
.dark .tv-command-home .tv-home-audience-card {
    background: rgba(15, 23, 42, .80);
    color: #f8fafc;
    border-color: rgba(148, 163, 184, .24);
}

.dark .tv-command-home .tv-home-audience-card b,
.dark .tv-hero-mini-grid a {
    color: #f8fafc;
}

@media (max-width: 840px) {
    .tv-home-hero {
        grid-template-columns: 1fr;
        width: min(100% - 20px, 1180px);
    }

    .tv-home-hero,
    .tv-home-search-panel,
    .tv-home-section {
        margin-bottom: 16px;
    }

    .tv-home-search-box {
        grid-template-columns: 24px minmax(0, 1fr);
    }

    .tv-home-search-box .mud-button-root {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .tv-command-home .tv-home-hero {
        grid-template-columns: 1fr;
        padding: 24px;
        border-radius: 28px;
    }

    .tv-command-home .tv-home-hero-copy h1 {
        font-size: clamp(2.25rem, 12vw, 3.35rem);
    }

    .tv-home-hero-visual {
        padding: 14px;
        border-radius: 24px;
    }

    .tv-command-home .tv-home-audience-grid {
        grid-template-columns: 1fr;
    }

    .tv-hero-mini-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 841px) and (max-width: 1080px) {
    .tv-command-home .tv-home-audience-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Full-width product layout pass: original DaivVerse product-site openness. */
.app:not(.dark) {
    background:
        linear-gradient(180deg, #ffffff 0, #eef6ff 430px, #ffffff 431px, #f7fbff 100%) !important;
}

.dark.app,
.dark .app {
    background:
        linear-gradient(180deg, #071326 0, #0b1830 430px, #0b1120 431px, #0f172a 100%) !important;
}

.main,
.tool-route .main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.tv-command-home {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0 clamp(42px, 6vw, 76px) !important;
    gap: clamp(24px, 3vw, 42px) !important;
    background: transparent !important;
}

.tv-command-home .tv-home-hero {
    width: 100% !important;
    max-width: none !important;
    min-height: min(720px, calc(100vh - 72px));
    margin: 0 !important;
    padding: clamp(44px, 7vw, 98px) clamp(18px, 6vw, 110px) clamp(34px, 5vw, 72px) !important;
    border-width: 0 0 1px 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, .82fr);
    background:
        radial-gradient(circle at 82% 20%, rgba(0, 112, 224, .20), transparent 28%),
        radial-gradient(circle at 8% 88%, rgba(0, 191, 255, .14), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #f5fbff 48%, #e7f3ff 100%) !important;
}

.tv-command-home .tv-home-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 84px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .72));
    pointer-events: none;
}

.dark .tv-command-home .tv-home-hero {
    background:
        radial-gradient(circle at 82% 18%, rgba(59, 130, 246, .25), transparent 30%),
        radial-gradient(circle at 10% 90%, rgba(20, 184, 166, .16), transparent 34%),
        linear-gradient(135deg, #081326 0%, #10203d 54%, #09182d 100%) !important;
}

.dark .tv-command-home .tv-home-hero::after {
    background: linear-gradient(180deg, transparent, rgba(11, 17, 32, .72));
}

.tv-command-home .tv-home-hero-copy h1 {
    max-width: 900px;
    font-size: clamp(3rem, 6.4vw, 6.65rem);
    line-height: .94;
}

.tv-command-home .tv-home-hero-copy p {
    max-width: 760px;
    font-size: clamp(1.08rem, 1.35vw, 1.32rem);
}

.tv-home-hero-visual {
    max-width: 560px;
    justify-self: end;
}

.tv-command-home .tv-home-audience-grid {
    width: min(1500px, 100%);
    justify-self: center;
    margin-top: clamp(12px, 3vw, 30px);
}

.tv-command-home .tv-home-audience-card {
    min-height: 128px;
}

.tv-command-home .tv-home-search-panel,
.tv-command-home .tv-home-section,
.tv-command-home .tv-onepage-tool-map,
.tv-command-home .privacy-band {
    width: min(1500px, calc(100% - clamp(24px, 5vw, 88px))) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.tv-command-home .tv-home-search-panel {
    margin-top: clamp(-12px, -1vw, -4px) !important;
    border-radius: 28px !important;
    box-shadow: 0 22px 60px rgba(8, 52, 112, .10) !important;
}

.tv-command-home .tv-home-search-box {
    min-height: 66px;
    border-radius: 999px;
    padding-inline: 18px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(0, 112, 224, .10);
}

.tv-command-home .tv-home-section,
.tv-command-home .tv-onepage-tool-map {
    border-radius: 30px !important;
}

.tv-popular-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
}

.tv-onepage-category-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)) !important;
}

.tv-sticky-search-inner {
    width: 100% !important;
    max-width: none !important;
    padding: 0 clamp(10px, 2.2vw, 36px);
}

.tv-sticky-search-box {
    max-width: none !important;
    border-radius: 999px !important;
    background: #ffffff !important;
}

.app:not(.dark) .mud-topbar.tv-command-topbar {
    box-shadow: 0 8px 24px rgba(8, 52, 112, .08) !important;
}

@media (max-width: 1080px) {
    .tv-command-home .tv-home-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .tv-home-hero-visual {
        max-width: none;
        justify-self: stretch;
    }
}

@media (max-width: 760px) {
    .tv-command-home .tv-home-hero {
        padding: 34px 16px 28px !important;
    }

    .tv-command-home .tv-home-hero-copy h1 {
        font-size: clamp(2.45rem, 14vw, 3.65rem);
    }

    .tv-command-home .tv-home-search-panel,
    .tv-command-home .tv-home-section,
    .tv-command-home .tv-onepage-tool-map,
    .tv-command-home .privacy-band {
        width: min(100% - 20px, 1500px) !important;
    }
}

/* Single-row section rhythm: each homepage section is a full-width band, then the next. */
.tv-command-home .tv-home-hero {
    grid-template-columns: 1fr !important;
    align-items: start !important;
}

.tv-command-home .tv-home-hero-copy {
    width: min(1120px, 100%);
}

.tv-command-home .tv-home-hero-copy h1 {
    max-width: 1040px;
}

.tv-command-home .tv-home-hero-copy p {
    max-width: 820px;
}

.tv-home-hero-visual {
    width: 100%;
    max-width: none !important;
    justify-self: stretch !important;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: stretch;
}

.tv-hero-search-preview,
.tv-hero-safe-note {
    grid-column: 1 / -1;
}

.tv-hero-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tv-command-home .tv-home-audience-grid {
    width: 100%;
}

.tv-command-home .tv-home-search-panel,
.tv-command-home .tv-home-section,
.tv-command-home .tv-onepage-tool-map,
.tv-command-home .privacy-band {
    display: grid;
    gap: clamp(16px, 2vw, 24px);
}

.tv-onepage-category-grid {
    grid-template-columns: 1fr !important;
}

.tv-onepage-category-card {
    width: 100%;
}

.tv-onepage-tool-list {
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)) !important;
}

@media (min-width: 1280px) {
    .tv-command-home .tv-home-hero {
        padding-left: clamp(90px, 8vw, 150px) !important;
        padding-right: clamp(90px, 8vw, 150px) !important;
    }

    .tv-command-home .tv-home-search-panel,
    .tv-command-home .tv-home-section,
    .tv-command-home .tv-onepage-tool-map,
    .tv-command-home .privacy-band {
        width: min(1540px, calc(100% - 128px)) !important;
    }
}

@media (max-width: 900px) {
    .tv-home-hero-visual {
        grid-template-columns: 1fr;
    }

    .tv-hero-mini-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .tv-hero-mini-grid {
        grid-template-columns: 1fr;
    }
}

/* Full-app theme harmonizer: late dashboard/tool styles now follow the active DaivVerse theme. */
html,
body {
    background: var(--tv-page) !important;
    color: var(--tv-ink) !important;
}

.app {
    min-height: 100vh;
    background:
        radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--tv-accent) 12%, transparent), transparent 31%),
        radial-gradient(circle at 94% 6%, color-mix(in srgb, var(--tv-accent-2) 10%, transparent), transparent 32%),
        linear-gradient(180deg, var(--tv-page), color-mix(in srgb, var(--tv-page) 86%, var(--tv-surface))) !important;
    color: var(--tv-ink) !important;
}

.app .main,
.app:not(.dark) .main {
    background: transparent !important;
}

.app .mud-topbar.tv-command-topbar,
.mud-popover .tv-floating-filter-panel,
.mud-popover .tv-theme-panel,
.app .tv-sticky-search-box,
.app .tv-sticky-search-results,
.app .tv-bookmark-quick-menu,
.app .tv-floating-filter-panel,
.app .tv-theme-option,
.app .tv-floating-filter-option,
.app .tv-command-search,
.app .tv-home-jumpbar,
.app .tv-about-app-card,
.app .tv-feature-tool-card,
.app .tv-bookmark-console,
.app .tv-browse-console,
.app .tv-category-room,
.app .mud-tool-command,
.app .mud-tool-groups,
.app .tool-workflow-showcase,
.app .tool-workflow-card,
.app .studio-section,
.app .tool-panel,
.app .calc-card,
.app .how-to,
.app .related,
.app .legal-card,
.app .legal-panel,
.app .info-card,
.app .tv-market-watch-card,
.app .tv-menu-deck,
.app .tv-simple-menu-card,
.app .tv-simple-tool-links a,
.app .tv-onepage-head,
.app .tv-onepage-category-card,
.app .tv-onepage-tool-card,
.app .tv-bookmarks-hero,
.app .tv-bookmarks-panel,
.app .tv-bookmark-manager-card,
.app .tv-bookmark-search-card,
.app .tv-bookmark-empty,
.app .mud-paper,
.app .mud-card {
    background: var(--tv-surface-strong) !important;
    border-color: var(--tv-line) !important;
    color: var(--tv-ink) !important;
    box-shadow: var(--tv-shadow) !important;
}

.app .mud-input-root,
.app .mud-input-control,
.app .mud-input,
.app .form-row input,
.app .form-row select,
.app .form-row textarea,
.app .form-col input,
.app .form-col select,
.app .form-col textarea,
.app .ta,
.app .calc-display,
.mud-popover .tv-theme-option,
.mud-popover .tv-floating-filter-option {
    background: var(--tv-surface-strong) !important;
    border-color: var(--tv-line) !important;
    color: var(--tv-ink) !important;
}

.app .mud-input-label,
.app .mud-input-helper-text,
.app p,
.app small,
.app .muted,
.app .tv-onepage-tool-copy small,
.app .tv-market-watch-card p,
.app .tv-menu-deck p,
.app .tv-simple-head p,
.app .tv-simple-menu-card p,
.app .tv-floating-filter-option small,
.app .tv-theme-option small,
.app .tv-bookmark-quick-menu small,
.mud-popover .tv-theme-option small,
.mud-popover .tv-floating-filter-option small {
    color: var(--tv-muted) !important;
}

.app h1,
.app h2,
.app h3,
.app h4,
.app h5,
.app h6,
.app b,
.app strong,
.app .tv-sticky-brand,
.app .tv-market-watch-card h2,
.app .tv-market-stat-grid b,
.app .tv-menu-deck h3,
.app .tv-simple-head h2,
.app .tv-simple-menu-card h3,
.app .tv-onepage-head h2,
.app .tv-onepage-category-title h3,
.app .tv-onepage-tool-copy b,
.app .tv-bookmark-quick-menu b,
.app .tv-floating-filter-option b,
.app .tv-theme-option b,
.mud-popover .tv-theme-option b,
.mud-popover .tv-floating-filter-option b {
    color: var(--tv-ink) !important;
}

.app a {
    color: var(--tv-accent);
}

.app .tv-sticky-brand::before {
    background: linear-gradient(135deg, var(--tv-accent), var(--tv-accent-2)) !important;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--tv-accent) 14%, transparent) !important;
}

.app .tv-sticky-bookmark,
.app .tv-sticky-filter-button,
.app .tv-sticky-theme-button,
.app .tv-command-search .mud-button-root,
.app .tv-simple-menu-open,
.app .tv-theme-option.active em,
.app .tv-floating-filter-option.active em,
.mud-popover .tv-theme-option.active em,
.mud-popover .tv-floating-filter-option.active em {
    background: var(--tv-accent) !important;
    border-color: color-mix(in srgb, var(--tv-accent) 30%, var(--tv-line)) !important;
    color: #ffffff !important;
}

.app .tv-theme-option.active,
.app .tv-floating-filter-option.active,
.app .tv-theme-option:hover,
.app .tv-floating-filter-option:hover,
.app .tv-bookmark-quick-menu a:hover,
.app .tv-sticky-search-results a:hover,
.mud-popover .tv-theme-option.active,
.mud-popover .tv-floating-filter-option.active,
.mud-popover .tv-theme-option:hover,
.mud-popover .tv-floating-filter-option:hover {
    background: color-mix(in srgb, var(--tv-accent) 10%, var(--tv-surface-strong)) !important;
    border-color: color-mix(in srgb, var(--tv-accent) 35%, var(--tv-line)) !important;
    color: var(--tv-ink) !important;
}

.app .tv-sticky-search-box > .mud-icon-root,
.app .tv-floating-filter-panel header span,
.app .tv-floating-filter-option-icon,
.app .tv-theme-option-icon,
.app .tv-bookmark-quick-menu header > span,
.app .tv-bookmark-quick-menu a > .mud-icon-root,
.app .tv-sticky-search-results a > span:first-child,
.app .tv-card-icon.bookmark,
.app .tv-card-icon.browse,
.app .tv-category-room-title > span,
.app .tv-category-room header em,
.app .tv-category-room li > a > span:first-child,
.app .tv-onepage-category-title > span,
.app .tv-onepage-tool-icon,
.app .tv-market-stat-grid span,
.app .tv-menu-deck header > span,
.app .tv-simple-menu-card header > span,
.mud-popover .tv-floating-filter-option-icon,
.mud-popover .tv-theme-option-icon {
    background: color-mix(in srgb, var(--tv-accent) 12%, var(--tv-surface-strong)) !important;
    border-color: color-mix(in srgb, var(--tv-accent) 18%, var(--tv-line)) !important;
    color: var(--tv-accent) !important;
}

.app .tv-bookmark-tile,
.app .tv-tool-button,
.app .tv-simple-tool-links a,
.app .tv-onepage-tool-card,
.app .tv-category-room li,
.app .tv-menu-category-strip a,
.app .tv-menu-tool-stack a {
    background: color-mix(in srgb, var(--tv-accent) 5%, var(--tv-surface-strong)) !important;
    border-color: color-mix(in srgb, var(--tv-accent) 13%, var(--tv-line)) !important;
    color: var(--tv-ink) !important;
}

.app .tv-bookmark-tile:hover,
.app .tv-tool-button:hover,
.app .tv-simple-tool-links a:hover,
.app .tv-onepage-tool-card:hover,
.app .tv-category-room li:hover {
    background: color-mix(in srgb, var(--tv-accent) 10%, var(--tv-surface-strong)) !important;
    border-color: color-mix(in srgb, var(--tv-accent) 36%, var(--tv-line)) !important;
    box-shadow: var(--tv-shadow-hover) !important;
    color: var(--tv-ink) !important;
}

.app .privacy-band {
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--tv-accent) 24%, transparent), transparent 32%),
        radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--tv-accent-2) 20%, transparent), transparent 30%),
        linear-gradient(135deg, color-mix(in srgb, var(--tv-accent) 32%, #111827), #111827) !important;
    color: #ffffff !important;
}

.app .privacy-band * {
    color: inherit !important;
}

.app .mud-button-filled-primary,
.app .mud-chip-color-primary,
.app .mud-badge-color-primary {
    background-color: var(--tv-accent) !important;
    color: #ffffff !important;
}

.category-top-menu,
.top-service-menu.category-top-menu {
    display: none !important;
}

.tv-command-search {
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
}

.tv-search-filter-button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    justify-content: center;
    max-width: 220px;
    padding: 8px 12px;
    border: 1px solid rgba(21, 91, 213, .20);
    border-radius: 14px;
    background: rgba(21, 91, 213, .08);
    color: var(--tv-ink, #132118);
    font: inherit;
    font-weight: 850;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.tv-search-filter-button:hover,
.tv-search-filter-button:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(21, 91, 213, .42);
    background: rgba(21, 91, 213, .12);
    outline: none;
}

.tv-search-filter-button > span {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.tv-search-filter-button b,
.tv-search-filter-button small {
    display: block;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-search-filter-button b {
    font-size: .88rem;
    line-height: 1.1;
}

.tv-search-filter-button small {
    color: var(--tv-muted, #64748b);
    font-size: .72rem;
    line-height: 1.1;
}

.dark .tv-search-filter-button {
    border-color: rgba(148, 163, 184, .24);
    background: rgba(255,255,255,.08);
    color: var(--tv-ink);
}

.dark .tv-search-filter-button small {
    color: #cbd5e1;
}

.tv-search-bookmark-button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 14px;
    background: #101812;
    color: #ffffff !important;
    font-size: .88rem;
    font-weight: 850;
    text-decoration: none !important;
    white-space: nowrap;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.tv-search-bookmark-button:hover,
.tv-search-bookmark-button:focus-visible {
    transform: translateY(-1px);
    background: #26331f;
    box-shadow: 0 16px 30px rgba(15, 23, 42, .16);
    outline: none;
}

.dark .tv-search-bookmark-button {
    background: #ffffff;
    color: #0f172a !important;
}

.tv-floating-filter-panel {
    right: 0 !important;
    left: auto !important;
    box-shadow: -24px 0 60px rgba(15, 23, 42, .28) !important;
    animation: tvFilterSlideInRight .18s ease-out !important;
}

@keyframes tvFilterSlideInRight {
    from { transform: translateX(24px); opacity: .72; }
    to { transform: translateX(0); opacity: 1; }
}

@media (max-width: 760px) {
    .tv-command-search {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    .tv-search-filter-button {
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
        justify-content: space-between;
    }

    .tv-search-filter-button b,
    .tv-search-filter-button small {
        max-width: none;
    }

    .tv-search-bookmark-button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* Compact sticky command header. */
.tv-command-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
    min-height: 62px !important;
    height: auto !important;
    padding: 8px clamp(10px, 1.7vw, 22px) !important;
    border-bottom: 0 !important;
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: blur(18px);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .07) !important;
}

.app:not(.dark) .mud-topbar.tv-command-topbar {
    background: rgba(255, 255, 255, .94) !important;
    color: var(--tv-ink, #132118) !important;
    border-bottom: 0 !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .07) !important;
}

.app:not(.dark) .mud-topbar.tv-command-topbar .mud-icon-root {
    color: inherit !important;
}

.dark .tv-command-topbar {
    background: rgba(15, 23, 42, .90) !important;
    border-color: transparent !important;
}

.tv-sticky-search-inner {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.tv-sticky-brand {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--tv-ink, #132118) !important;
    font-size: .98rem;
    font-weight: 950;
    letter-spacing: -.02em;
    text-decoration: none !important;
    white-space: nowrap;
}

/* Final header order: product menu first, search directly below it. */
.tv-command-topbar .mud-toolbar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 7px !important;
    min-height: 112px !important;
    height: auto !important;
    align-items: center !important;
}

.tv-command-topbar .tv-sticky-brand-menu {
    order: 1;
    justify-self: start;
    margin-left: 0;
}

.tv-command-topbar .tv-product-nav {
    order: 2;
    width: min(1120px, 100%);
    justify-self: start;
}

.tv-command-topbar .tv-sticky-search-inner {
    order: 3;
    grid-column: 1 / -1;
    grid-template-columns: minmax(260px, 1fr);
    min-height: 54px !important;
}

.tv-product-mega-menu {
    top: 126px !important;
}

/* Normal hero typography: keep the SEO H1 visible without oversized display text. */
.tv-command-home .tv-home-hero-copy h1 {
    font-size: clamp(2rem, 4vw, 3.25rem) !important;
    line-height: 1.08 !important;
    max-width: 860px !important;
    letter-spacing: 0 !important;
}

.tv-command-home .tv-home-hero-copy p {
    font-size: clamp(1rem, 1.25vw, 1.12rem) !important;
    line-height: 1.65 !important;
    max-width: 760px !important;
}

@media (max-width: 640px) {
    .tv-command-home .tv-home-hero-copy h1 {
        font-size: clamp(1.75rem, 9vw, 2.35rem) !important;
    }

    .tv-command-home .tv-home-hero-copy p {
        font-size: .98rem !important;
    }
}

@media (max-width: 760px) {
    .tv-command-topbar .mud-toolbar {
        grid-template-columns: 1fr !important;
        min-height: 122px !important;
    }

    .tv-command-topbar .tv-sticky-brand-menu,
    .tv-command-topbar .tv-product-nav,
    .tv-command-topbar .tv-sticky-search-inner {
        grid-column: 1 / -1;
    }

    .tv-command-topbar .tv-product-nav {
        display: flex !important;
        justify-content: flex-start;
        padding-inline: 4px;
    }

    .tv-product-mega-menu {
        top: 132px !important;
    }
}

.tv-sticky-brand::before {
    content: "";
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8cc63f, #2563eb);
    box-shadow: 0 0 0 5px rgba(140, 198, 63, .12);
}

.tv-sticky-search-box {
    min-height: 44px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 13px;
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 999px;
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.80), 0 10px 24px rgba(15,23,42,.06);
}

.dark .tv-sticky-search-box {
    background: rgba(30, 41, 59, .84);
    border-color: rgba(148, 163, 184, .22);
}

.tv-sticky-search-box > .mud-icon-root {
    color: #2563eb;
}

.app:not(.dark) .tv-sticky-search-box > .mud-icon-root {
    color: #155bd5 !important;
}

.tv-sticky-search-input .mud-input-control,
.tv-sticky-search-input .mud-input-root {
    min-width: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.tv-sticky-search-input .mud-input-root.mud-focused,
.tv-sticky-search-input .mud-input-root:focus-within {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.tv-sticky-search-input .mud-input-underline::before,
.tv-sticky-search-input .mud-input-underline::after,
.tv-sticky-search-input .mud-input-root::before,
.tv-sticky-search-input .mud-input-root::after,
.tv-sticky-search-input .mud-input::before,
.tv-sticky-search-input .mud-input::after {
    border-bottom: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.tv-sticky-search-input .mud-input-slot,
.tv-sticky-search-input input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 0 !important;
    font-size: .93rem !important;
    font-weight: 760 !important;
}

.tv-sticky-search-clear {
    width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--tv-muted, #64748b);
    cursor: pointer;
}

.tv-sticky-search-clear:hover,
.tv-sticky-search-clear:focus-visible {
    background: rgba(15, 23, 42, .07);
    color: var(--tv-ink, #132118);
    outline: 2px solid rgba(21, 91, 213, .14);
    outline-offset: 2px;
}

.tv-sticky-filter-button {
    width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #edf5ff;
    color: #155bd5;
    font: inherit;
    font-size: .84rem;
    font-weight: 900;
    cursor: pointer;
}

.tv-sticky-filter-button:hover,
.tv-sticky-filter-button:focus-visible {
    background: #ddecff;
    outline: 2px solid rgba(21, 91, 213, .16);
    outline-offset: 2px;
}

.tv-sticky-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tv-sticky-bookmark {
    width: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #101812;
    color: #ffffff !important;
    font-size: .86rem;
    font-weight: 900;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
}

.tv-sticky-bookmark:hover,
.tv-sticky-bookmark:focus-visible {
    background: #26331f;
    outline: 2px solid rgba(15, 23, 42, .12);
    outline-offset: 2px;
}

.tv-sticky-theme-button {
    width: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 999px;
    background: #ffffff;
    color: #155bd5;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}

.tv-sticky-theme-button:hover,
.tv-sticky-theme-button:focus-visible {
    border-color: #9ec5ff;
    background: #edf5ff;
    outline: 2px solid rgba(21, 91, 213, .16);
    outline-offset: 2px;
}

.dark .tv-sticky-theme-button {
    background: rgba(30, 41, 59, .84);
    border-color: rgba(148, 163, 184, .24);
    color: #f8fafc;
}

.tv-bookmark-quick-menu {
    position: fixed;
    top: 70px;
    right: 62px;
    z-index: 1290;
    width: min(330px, calc(100vw - 20px));
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 20px;
    background: rgba(255, 255, 255, .98);
    color: #0f172a;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .18);
}

.tv-bookmark-quick-menu header {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 8px 8px 10px;
    border-bottom: 1px solid #e2e8f0;
}

.tv-bookmark-quick-menu header > span {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eef4ff;
    color: #155bd5;
}

.tv-bookmark-quick-menu b,
.tv-bookmark-quick-menu small {
    display: block;
}

.tv-bookmark-quick-menu header b {
    font-size: .98rem;
    line-height: 1.15;
}

.tv-bookmark-quick-menu small {
    margin-top: 2px;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.25;
}

.tv-bookmark-quick-menu a {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
    color: #0f172a;
    text-decoration: none !important;
    transition: background .14s ease, transform .14s ease;
}

.tv-bookmark-quick-menu a:hover,
.tv-bookmark-quick-menu a:focus-visible {
    background: #f8fbff;
    transform: translateY(-1px);
    outline: 2px solid rgba(21, 91, 213, .14);
    outline-offset: 2px;
}

.tv-bookmark-quick-menu a > .mud-icon-root {
    width: 38px;
    height: 38px;
    padding: 8px;
    border-radius: 13px;
    background: #eef4ff;
    color: #155bd5;
}

.dark .tv-bookmark-quick-menu {
    background: rgba(15, 23, 42, .98);
    color: #f8fafc;
    border-color: rgba(148, 163, 184, .24);
}

.dark .tv-bookmark-quick-menu header {
    border-color: rgba(148, 163, 184, .20);
}

.dark .tv-bookmark-quick-menu a {
    color: #f8fafc;
}

.dark .tv-bookmark-quick-menu small {
    color: #cbd5e1;
}

.dark .tv-bookmark-quick-menu a:hover,
.dark .tv-bookmark-quick-menu a:focus-visible {
    background: rgba(37, 99, 235, .18);
}

.tv-sticky-search-results {
    position: fixed;
    top: 72px;
    left: 50%;
    right: auto;
    width: min(920px, calc(100vw - 24px));
    transform: translateX(-50%);
    z-index: 1190;
    display: grid;
    gap: 10px;
    max-height: min(56vh, 560px);
    overflow: auto;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 24px 64px rgba(15,23,42,.16);
}

.dark .tv-sticky-search-results {
    background: #0f172a;
    border-color: rgba(148, 163, 184, .22);
}

.tv-sticky-search-results section {
    display: grid;
    gap: 7px;
}

.tv-sticky-search-results h2 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 4px 4px 2px;
    color: var(--tv-muted, #64748b);
    font-size: .78rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.tv-sticky-search-results a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 9px;
    border-radius: 14px;
    color: var(--tv-ink, #132118);
    text-decoration: none !important;
}

.tv-sticky-search-results a:hover,
.tv-sticky-search-results a:focus-visible {
    background: rgba(37, 99, 235, .08);
    outline: none;
}

.tv-sticky-search-results a > span:first-child {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 12px;
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
}

.tv-sticky-search-results b,
.tv-sticky-search-results small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-sticky-search-results b {
    font-size: .9rem;
    line-height: 1.15;
}

.tv-sticky-search-results small {
    margin-top: 2px;
    color: var(--tv-muted, #64748b);
    font-size: .76rem;
    line-height: 1.15;
}

.tv-global-filter-panel .tv-floating-filter-option {
    text-decoration: none !important;
}

/* Global compactness pass. */
body {
    font-size: 14px;
}

.main,
.tool-route .main {
    padding-top: 14px !important;
    padding-bottom: 28px !important;
}

.studio-shell,
.library-market,
.category-market {
    gap: 12px !important;
}

.tv-command-home {
    padding-top: 10px !important;
}

.tv-onepage-category-grid,
.tv-library-category-grid,
.library-tool-grid,
.studio-result-grid {
    gap: 12px !important;
}

.tv-onepage-category-card,
.tv-category-room,
.market-tool-card,
.tcard,
.studio-section,
.tool-panel {
    border-radius: 18px !important;
}

.tv-onepage-category-card header,
.tv-category-room header {
    padding: 14px !important;
}

.tv-onepage-tool-list,
.tv-category-room ul {
    gap: 8px !important;
    padding: 10px !important;
}

.tv-onepage-tool-card,
.tv-tool-button,
.market-tool-card,
.tcard {
    min-height: 0 !important;
    padding: 10px !important;
}

.tv-onepage-category-title h3,
.tv-category-room h2 {
    font-size: 1rem !important;
}

.tv-onepage-category-title p,
.tv-onepage-tool-copy small,
.tv-tool-button-copy small,
.market-tool-copy small,
.tcard-copy p {
    font-size: .78rem !important;
    line-height: 1.35 !important;
}

@media (max-width: 760px) {
    .tv-command-topbar {
        padding: 7px 10px !important;
    }

    .tv-sticky-search-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
    }

    .tv-sticky-brand {
        display: none;
    }

    .tv-sticky-search-box {
        min-height: 42px;
    }

    .tv-sticky-bookmark {
        width: 42px;
        min-width: 42px;
        padding: 0;
    }

    .tv-bookmark-quick-menu {
        top: 62px;
        left: 10px;
        right: 10px;
        width: auto;
    }

    .tv-sticky-search-results {
        top: 62px;
        left: 10px;
        right: 10px;
        width: auto;
        transform: none;
    }
}

.tv-onepage-tool-open {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 11px;
    border-radius: 999px;
    background: #fff7d6;
    color: #8a5a00;
    font-size: .78rem;
    font-weight: 850;
}

.tv-onepage-category-card.tone-0 .tv-onepage-tool-icon,
.tv-onepage-category-card.tone-0 .tv-onepage-category-title > span {
    background: #fff3df;
    color: #d97706;
}

.tv-onepage-category-card.tone-1 .tv-onepage-tool-icon,
.tv-onepage-category-card.tone-1 .tv-onepage-category-title > span {
    background: #e9fdf2;
    color: #059669;
}

.tv-onepage-category-card.tone-2 .tv-onepage-tool-icon,
.tv-onepage-category-card.tone-2 .tv-onepage-category-title > span {
    background: #eef4ff;
    color: #2563eb;
}

.tv-onepage-category-card.tone-3 .tv-onepage-tool-icon,
.tv-onepage-category-card.tone-3 .tv-onepage-category-title > span {
    background: #f5efff;
    color: #7c3aed;
}

.tv-onepage-category-card.tone-4 .tv-onepage-tool-icon,
.tv-onepage-category-card.tone-4 .tv-onepage-category-title > span {
    background: #fff1f2;
    color: #e11d48;
}

.tv-onepage-category-card.tone-5 .tv-onepage-tool-icon,
.tv-onepage-category-card.tone-5 .tv-onepage-category-title > span {
    background: #ecfeff;
    color: #0891b2;
}

.tv-onepage-category-card.tone-6 .tv-onepage-tool-icon,
.tv-onepage-category-card.tone-6 .tv-onepage-category-title > span {
    background: #f0fdf4;
    color: #16a34a;
}

.tv-onepage-category-card.tone-7 .tv-onepage-tool-icon,
.tv-onepage-category-card.tone-7 .tv-onepage-category-title > span {
    background: #fef2f2;
    color: #dc2626;
}

/* Clearer color identity for each homepage category block. */
.app .tv-onepage-category-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--room-a, var(--tv-accent)) 28%, var(--tv-line)) !important;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--room-a, var(--tv-accent)) 12%, var(--tv-surface-strong)) 0 6px, transparent 6px),
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--room-a, var(--tv-accent)) 18%, transparent), transparent 34%),
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--room-b, var(--tv-accent-2)) 14%, transparent), transparent 36%),
        var(--tv-surface-strong) !important;
}

.app .tv-onepage-category-card header {
    border-bottom-color: color-mix(in srgb, var(--room-a, var(--tv-accent)) 18%, var(--tv-line)) !important;
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--room-a, var(--tv-accent)) 14%, var(--tv-surface-strong)),
            color-mix(in srgb, var(--room-b, var(--tv-accent-2)) 8%, var(--tv-surface-strong)) 62%,
            var(--tv-surface-strong)) !important;
}

.app .tv-onepage-category-card .mud-chip-root {
    border-color: color-mix(in srgb, var(--room-a, var(--tv-accent)) 30%, var(--tv-line)) !important;
    background: color-mix(in srgb, var(--room-a, var(--tv-accent)) 12%, var(--tv-surface-strong)) !important;
    color: var(--room-a, var(--tv-accent)) !important;
    font-weight: 900;
}

.app .tv-onepage-category-card .tv-onepage-category-title > span,
.app .tv-onepage-category-card .tv-onepage-tool-icon {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--room-a, var(--tv-accent)) 16%, var(--tv-surface-strong)),
            color-mix(in srgb, var(--room-b, var(--tv-accent-2)) 12%, var(--tv-surface-strong))) !important;
    color: var(--room-a, var(--tv-accent)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--room-a, var(--tv-accent)) 18%, transparent);
}

.app .tv-onepage-category-card .tv-onepage-tool-card {
    border-color: color-mix(in srgb, var(--room-a, var(--tv-accent)) 13%, var(--tv-line)) !important;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--room-a, var(--tv-accent)) 5%, var(--tv-surface-strong)),
            var(--tv-surface-strong)) !important;
}

.app .tv-onepage-category-card .tv-onepage-tool-card:hover,
.app .tv-onepage-category-card .tv-onepage-tool-card:focus-visible {
    border-color: color-mix(in srgb, var(--room-a, var(--tv-accent)) 44%, var(--tv-line)) !important;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--room-a, var(--tv-accent)) 10%, var(--tv-surface-strong)),
            color-mix(in srgb, var(--room-b, var(--tv-accent-2)) 5%, var(--tv-surface-strong))) !important;
}

.app .readable-category-page .category-market-hero,
.app .readable-category-page .category-search-card,
.app .readable-category-page .category-readable-card {
    border-color: color-mix(in srgb, var(--room-a, var(--tv-accent)) 24%, var(--tv-line)) !important;
}

.app .readable-category-page .category-market-hero {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--room-a, var(--tv-accent)) 12%, var(--tv-surface-strong)) 0 7px, transparent 7px),
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--room-a, var(--tv-accent)) 18%, transparent), transparent 36%),
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--room-b, var(--tv-accent-2)) 14%, transparent), transparent 34%),
        var(--tv-surface-strong) !important;
}

.app .readable-category-page .category-market-icon,
.app .readable-category-page .category-readable-icon {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--room-a, var(--tv-accent)) 16%, var(--tv-surface-strong)),
            color-mix(in srgb, var(--room-b, var(--tv-accent-2)) 12%, var(--tv-surface-strong))) !important;
    color: var(--room-a, var(--tv-accent)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--room-a, var(--tv-accent)) 18%, transparent);
}

.app .readable-category-page .category-readable-card:hover,
.app .readable-category-page .category-readable-card:focus-visible {
    border-color: color-mix(in srgb, var(--room-a, var(--tv-accent)) 44%, var(--tv-line)) !important;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--room-a, var(--tv-accent)) 10%, var(--tv-surface-strong)),
            color-mix(in srgb, var(--room-b, var(--tv-accent-2)) 5%, var(--tv-surface-strong))) !important;
}

@media (max-width: 900px) {
    .tv-command-home {
        padding: 12px 10px 32px;
    }

    .tv-command-search {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px;
    }

    .tv-category-filter-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tv-category-filter-label {
        grid-column: 1 / -1;
    }

    .tv-onepage-category-card header {
        align-items: flex-start;
        flex-direction: column;
    }

    .tv-onepage-tool-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 12px;
    }

    .tv-onepage-tool-card {
        min-height: 154px;
        padding: 12px;
    }
}

@media (max-width: 520px) {
    .tv-category-filter-strip,
    .tv-onepage-tool-list {
        grid-template-columns: 1fr;
    }
}

/* Floating filter drawer for the homepage tool catalog. */
.tv-category-filter-strip {
    display: none !important;
}

.tv-floating-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.tv-floating-filter-trigger {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: min(460px, 100%);
    padding: 8px 12px;
    border: 1px solid #d7e2f2;
    border-radius: 14px;
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
    text-align: left;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.tv-floating-filter-trigger:hover,
.tv-floating-filter-trigger:focus-visible {
    transform: translateY(-1px);
    border-color: #8ab5ff;
    box-shadow: 0 16px 30px rgba(37, 99, 235, .14);
}

.tv-floating-filter-trigger-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eef4ff;
    color: #155bd5;
}

.tv-floating-filter-trigger b,
.tv-floating-filter-trigger small {
    display: block;
}

.tv-floating-filter-trigger b {
    font-size: .94rem;
    line-height: 1.1;
}

.tv-floating-filter-trigger small {
    margin-top: 3px;
    color: #64748b;
    font-size: .8rem;
    line-height: 1.25;
}

.tv-floating-filter-trigger > .mud-icon-root:last-child {
    margin-left: auto;
    color: #64748b;
}

.tv-floating-filter-clear {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #fde2e2;
    border-radius: 999px;
    background: #fff7f7;
    color: #b42318;
    font-size: .84rem;
    font-weight: 800;
}

.tv-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(2px);
}

.tv-floating-filter-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1301;
    width: min(420px, 92vw);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    color: #0f172a;
    box-shadow: 24px 0 60px rgba(15, 23, 42, .28);
    animation: tvFilterSlideIn .18s ease-out;
}

@keyframes tvFilterSlideIn {
    from { transform: translateX(-24px); opacity: .72; }
    to { transform: translateX(0); opacity: 1; }
}

.tv-floating-filter-panel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 20px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
}

.tv-floating-filter-panel header span {
    display: block;
    color: #155bd5;
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tv-floating-filter-panel header h2 {
    margin: 4px 0 0;
    font-size: 1.28rem;
    line-height: 1.15;
}

.tv-floating-filter-panel header button {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe4f3;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
}

.tv-floating-filter-list {
    display: grid;
    gap: 10px;
    padding: 14px;
    overflow: auto;
}

.tv-floating-filter-option {
    width: 100%;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    color: #0f172a;
    text-align: left;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .04);
    transition: transform .14s ease, border-color .14s ease, background .14s ease;
}

.tv-floating-filter-option:hover,
.tv-floating-filter-option:focus-visible {
    transform: translateX(2px);
    border-color: #9ec5ff;
    background: #f8fbff;
}

.tv-floating-filter-option.active {
    border-color: #155bd5;
    background: #edf4ff;
}

.tv-floating-filter-option-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #eef4ff;
    color: #155bd5;
}

.tv-floating-filter-option b,
.tv-floating-filter-option small {
    display: block;
}

.tv-floating-filter-option b {
    font-size: .94rem;
    line-height: 1.2;
}

.tv-floating-filter-option small {
    margin-top: 4px;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.3;
}

.tv-floating-filter-option em {
    min-width: 34px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-style: normal;
    font-size: .78rem;
    font-weight: 900;
    text-align: center;
}

.tv-floating-filter-option.active em {
    background: #155bd5;
    color: #ffffff;
}

.tv-floating-filter-option > .mud-icon-root:last-child {
    color: #155bd5;
}

.tv-theme-panel {
    width: min(360px, 92vw);
}

.tv-theme-option-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
    overflow: auto;
}

.tv-theme-option {
    width: 100%;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    color: #0f172a;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .04);
    transition: transform .14s ease, border-color .14s ease, background .14s ease;
}

.tv-theme-option:hover,
.tv-theme-option:focus-visible {
    transform: translateX(2px);
    border-color: #9ec5ff;
    background: #f8fbff;
    outline: 0;
}

.tv-theme-option.active {
    border-color: #155bd5;
    background: #edf4ff;
}

.tv-theme-option-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #eef4ff;
    color: #155bd5;
}

.tv-theme-option b,
.tv-theme-option small {
    display: block;
}

.tv-theme-option b {
    font-size: .94rem;
    line-height: 1.2;
}

.tv-theme-option small {
    margin-top: 4px;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.3;
}

.tv-theme-option em {
    padding: 4px 8px;
    border-radius: 999px;
    background: #155bd5;
    color: #ffffff;
    font-style: normal;
    font-size: .75rem;
    font-weight: 900;
}

.dark .tv-floating-filter-trigger,
.dark .tv-floating-filter-panel,
.dark .tv-floating-filter-panel header,
.dark .tv-floating-filter-panel header button,
.dark .tv-floating-filter-option,
.dark .tv-theme-option {
    background: #0f172a;
    color: #f8fafc;
    border-color: rgba(148, 163, 184, .24);
}

.dark .tv-floating-filter-trigger small,
.dark .tv-floating-filter-option small,
.dark .tv-theme-option small {
    color: #cbd5e1;
}

.dark .tv-floating-filter-option:hover,
.dark .tv-floating-filter-option:focus-visible,
.dark .tv-floating-filter-option.active,
.dark .tv-theme-option:hover,
.dark .tv-theme-option:focus-visible,
.dark .tv-theme-option.active {
    background: rgba(37, 99, 235, .18);
}

.dark .tv-floating-filter-option em {
    background: rgba(148, 163, 184, .16);
    color: #f8fafc;
}

.dark .tv-theme-option-icon {
    background: rgba(37, 99, 235, .20);
    color: #bfdbfe;
}

@media (max-width: 760px) {
    .tv-floating-filter-row {
        align-items: stretch;
        flex-direction: column;
    }

    .tv-floating-filter-trigger {
        width: 100%;
        min-width: 0;
    }

    .tv-floating-filter-clear {
        width: fit-content;
    }
}

.tv-onepage-tool-open {
    display: none !important;
}

/* Last rule wins: homepage audience cards must never collapse into unreadable columns. */
.tv-command-home .tv-home-audience-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: clamp(14px, 2vw, 22px) !important;
    width: min(1180px, 100%) !important;
    max-width: 100% !important;
    justify-self: start !important;
    align-items: stretch !important;
}

.tv-command-home .tv-home-audience-card {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 16px !important;
    row-gap: 6px !important;
    min-height: 112px !important;
    padding: clamp(18px, 2vw, 24px) !important;
    overflow: hidden !important;
    text-align: left !important;
}

.tv-command-home .tv-home-audience-card > .mud-icon-root,
.tv-command-home .tv-home-audience-card > svg {
    grid-row: 1 / 3 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    padding: 12px !important;
    border-radius: 18px !important;
}

.tv-command-home .tv-home-audience-card b,
.tv-command-home .tv-home-audience-card small {
    display: block !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
}

.tv-command-home .tv-home-audience-card b {
    font-size: clamp(1.04rem, 1vw, 1.16rem) !important;
    line-height: 1.28 !important;
}

.tv-command-home .tv-home-audience-card small {
    font-size: .95rem !important;
    line-height: 1.55 !important;
}

@media (max-width: 640px) {
    .tv-command-home .tv-home-audience-grid {
        grid-template-columns: 1fr !important;
    }
}
.tool-step-panel {
    display: grid;
    gap: 16px;
}

.tool-stepper {
    display: grid;
    grid-template-columns: minmax(120px, auto) minmax(48px, 1fr) minmax(120px, auto);
    align-items: center;
    gap: 12px;
    width: min(680px, 100%);
    margin: 0 auto 4px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--ac, #2563eb) 16%, var(--bd, #dbe4f3));
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg2, #ffffff) 88%, var(--ac, #2563eb) 12%);
}

.tool-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--muted, #64748b);
    font-size: .9rem;
    font-weight: 900;
    white-space: nowrap;
}

.tool-step span {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--bg3, #f8fafc);
    color: currentColor;
    border: 1px solid var(--bd, #dbe4f3);
    font-size: .8rem;
}

.tool-step.active {
    background: var(--ac, #2563eb);
    color: #ffffff;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--ac, #2563eb) 24%, transparent);
}

.tool-step.done {
    background: color-mix(in srgb, #16a34a 12%, var(--bg2, #ffffff));
    color: #15803d;
}

.tool-step.active span {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .35);
    color: #ffffff;
}

.tool-step.done span {
    background: #dcfce7;
    border-color: #86efac;
    color: #15803d;
}

.tool-step-line {
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--bd, #dbe4f3), color-mix(in srgb, var(--bd, #dbe4f3) 64%, var(--ac, #2563eb)));
}

.tool-step-line.done {
    background: linear-gradient(90deg, #22c55e, var(--ac, #2563eb));
}

.tool-step-card {
    width: min(1040px, 100%);
    margin-inline: auto;
}

.tool-step-result-head,
.pdf-result-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.tool-step-result-head {
    margin-bottom: 12px;
}

.tool-step-result-head h2 {
    margin: 0;
}

.tool-step-result-head p {
    margin: 4px 0 0;
    color: var(--muted, #64748b);
}

.dark .tool-stepper {
    background: color-mix(in srgb, var(--bg2, #0f172a) 84%, var(--ac, #60a5fa) 16%);
}

@media (max-width: 640px) {
    .tool-stepper {
        grid-template-columns: 1fr 36px 1fr;
        gap: 8px;
        border-radius: 20px;
        padding: 8px;
    }

    .tool-step {
        min-height: 38px;
        padding: 7px 9px;
        font-size: .8rem;
    }

    .tool-step span {
        width: 24px;
        height: 24px;
    }
}

/* DaivVerse 2026 landing lookbook: light/dark glass workspace inspired by the provided mockups. */
.app {
    --dv-look-bg: #f7fbff;
    --dv-look-bg-2: #eef7ff;
    --dv-look-panel: rgba(255, 255, 255, .88);
    --dv-look-panel-solid: #ffffff;
    --dv-look-line: rgba(33, 99, 235, .14);
    --dv-look-ink: #071532;
    --dv-look-muted: #52627a;
    --dv-look-blue: #1268ff;
    --dv-look-cyan: #10d9d2;
    --dv-look-purple: #7a5cff;
    --dv-look-green: #10b981;
    --dv-look-shadow: 0 24px 70px rgba(19, 78, 151, .12);
    --dv-look-card-shadow: 0 14px 42px rgba(19, 78, 151, .10);
}

.app.dark {
    --dv-look-bg: #020b1e;
    --dv-look-bg-2: #06162d;
    --dv-look-panel: rgba(9, 22, 48, .78);
    --dv-look-panel-solid: #081630;
    --dv-look-line: rgba(96, 165, 250, .22);
    --dv-look-ink: #f8fbff;
    --dv-look-muted: #b8c7df;
    --dv-look-blue: #3c7cff;
    --dv-look-cyan: #20e6df;
    --dv-look-purple: #9b74ff;
    --dv-look-green: #20d6a0;
    --dv-look-shadow: 0 30px 100px rgba(0, 0, 0, .36);
    --dv-look-card-shadow: 0 20px 70px rgba(0, 0, 0, .30);
}

.app.light,
.app:not(.dark) {
    background:
        radial-gradient(circle at 86% 18%, rgba(18, 104, 255, .11), transparent 31vw),
        radial-gradient(circle at 9% 32%, rgba(16, 217, 210, .09), transparent 28vw),
        linear-gradient(180deg, #ffffff 0, var(--dv-look-bg) 100%) !important;
}

.app.dark {
    background:
        radial-gradient(circle at 78% 24%, rgba(18, 104, 255, .24), transparent 34vw),
        radial-gradient(circle at 10% 30%, rgba(16, 217, 210, .14), transparent 30vw),
        radial-gradient(circle at 50% 4%, rgba(122, 92, 255, .12), transparent 36vw),
        linear-gradient(180deg, #020713 0, var(--dv-look-bg) 100%) !important;
}

.tv-asana-topbar {
    min-height: 76px !important;
    padding-inline: clamp(16px, 4vw, 58px) !important;
    border-bottom: 1px solid var(--dv-look-line) !important;
    background: color-mix(in srgb, var(--dv-look-panel-solid) 86%, transparent) !important;
    backdrop-filter: blur(22px) saturate(1.25);
    box-shadow: 0 12px 36px rgba(7, 21, 50, .08) !important;
}

.dark .tv-asana-topbar {
    background: rgba(4, 13, 31, .78) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, .34) !important;
}

.tv-asana-brand {
    gap: 12px !important;
    color: var(--dv-look-ink) !important;
    font-size: 1.18rem !important;
    font-weight: 950 !important;
}

.tv-asana-brand-mark {
    width: 40px !important;
    height: 40px !important;
    border: 1px solid color-mix(in srgb, var(--dv-look-cyan) 42%, transparent) !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, rgba(18, 104, 255, .16), rgba(16, 217, 210, .16)) !important;
    box-shadow: 0 0 28px color-mix(in srgb, var(--dv-look-cyan) 22%, transparent) !important;
}

.tv-asana-menu {
    gap: clamp(4px, .7vw, 12px) !important;
}

.tv-asana-menu-item > summary,
.tv-asana-action-link,
.tv-asana-mobile-menu,
.tv-sticky-filter-button,
.tv-sticky-search-clear {
    border: 1px solid transparent !important;
    color: var(--dv-look-ink) !important;
}

.tv-asana-menu-item > summary:hover,
.tv-asana-menu-item > summary:focus-visible,
.tv-asana-menu-item[open] > summary,
.tv-asana-action-link:hover,
.tv-asana-action-link:focus-visible,
.tv-asana-mobile-menu:hover,
.tv-sticky-filter-button:hover,
.tv-sticky-filter-button:focus-visible {
    border-color: var(--dv-look-line) !important;
    background: color-mix(in srgb, var(--dv-look-blue) 9%, var(--dv-look-panel-solid)) !important;
    color: var(--dv-look-blue) !important;
}

.tv-sticky-search-wrap {
    min-width: min(330px, 32vw);
}

.tv-sticky-search-box {
    min-height: 48px !important;
    border: 1px solid var(--dv-look-line) !important;
    background: color-mix(in srgb, var(--dv-look-panel-solid) 90%, transparent) !important;
    box-shadow: 0 14px 36px rgba(7, 21, 50, .08) !important;
}

.dark .tv-sticky-search-box {
    background: rgba(7, 19, 43, .84) !important;
}

.tv-sticky-search-results {
    width: min(720px, calc(100vw - 32px)) !important;
    max-height: min(70vh, 680px) !important;
    overflow: auto !important;
    right: 0 !important;
    left: auto !important;
    border: 1px solid var(--dv-look-line) !important;
    background: color-mix(in srgb, var(--dv-look-panel-solid) 95%, transparent) !important;
    box-shadow: var(--dv-look-shadow) !important;
}

.dark .tv-sticky-search-results {
    background: rgba(5, 16, 38, .96) !important;
}

.tv-asana-mega {
    border-color: var(--dv-look-line) !important;
    background: color-mix(in srgb, var(--dv-look-panel-solid) 96%, transparent) !important;
    box-shadow: var(--dv-look-shadow) !important;
}

.dark .tv-asana-mega {
    background: rgba(5, 16, 38, .97) !important;
}

.tv-command-home {
    color: var(--dv-look-ink) !important;
}

.tv-command-home .tv-home-hero {
    min-height: auto !important;
    grid-template-columns: minmax(0, .98fr) minmax(420px, .92fr) !important;
    gap: clamp(30px, 5vw, 84px) !important;
    align-items: center !important;
    padding: clamp(48px, 6vw, 94px) clamp(24px, 6vw, 104px) 34px !important;
    border-bottom: 1px solid var(--dv-look-line) !important;
    background:
        radial-gradient(circle at 76% 32%, color-mix(in srgb, var(--dv-look-blue) 16%, transparent), transparent 31vw),
        radial-gradient(circle at 9% 70%, color-mix(in srgb, var(--dv-look-cyan) 14%, transparent), transparent 30vw),
        linear-gradient(135deg, color-mix(in srgb, var(--dv-look-bg) 64%, #ffffff), var(--dv-look-bg-2)) !important;
}

.dark .tv-command-home .tv-home-hero {
    background:
        linear-gradient(120deg, rgba(18, 104, 255, .18), transparent 22%),
        radial-gradient(circle at 73% 24%, rgba(18, 104, 255, .26), transparent 30vw),
        radial-gradient(circle at 90% 70%, rgba(16, 217, 210, .10), transparent 26vw),
        linear-gradient(135deg, #020817, #041838 62%, #020b1e) !important;
}

.tv-command-home .tv-home-hero::before {
    inset: 10% auto auto -8%;
    width: 420px;
    height: 420px;
    background:
        linear-gradient(135deg, transparent 45%, color-mix(in srgb, var(--dv-look-blue) 18%, transparent) 46%, transparent 68%);
    border-radius: 0;
    transform: rotate(-12deg);
    opacity: .8;
}

.tv-command-home .tv-home-hero::after {
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--dv-look-bg) 76%, transparent)) !important;
}

.tv-command-home .tv-home-hero-copy h1 {
    max-width: 780px !important;
    margin-top: 26px !important;
    color: var(--dv-look-ink) !important;
    font-size: clamp(3.1rem, 5.8vw, 5.9rem) !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
}

.tv-gradient-text {
    display: inline;
    background: linear-gradient(90deg, var(--dv-look-blue), #20a6ff 46%, var(--dv-look-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.tv-command-home .tv-home-hero-copy p {
    max-width: 660px !important;
    color: var(--dv-look-muted) !important;
    font-size: clamp(1.08rem, 1.25vw, 1.28rem) !important;
    line-height: 1.66 !important;
}

.tv-home-kicker {
    border: 1px solid var(--dv-look-line) !important;
    background: color-mix(in srgb, var(--dv-look-panel-solid) 84%, transparent) !important;
    color: var(--dv-look-blue) !important;
    box-shadow: 0 14px 36px rgba(7, 21, 50, .08) !important;
}

.dark .tv-home-kicker {
    background: rgba(8, 25, 58, .72) !important;
}

.tv-command-home .tv-home-actions .mud-button-root {
    min-height: 54px !important;
    border-radius: 14px !important;
    padding-inline: 28px !important;
}

.tv-command-home .tv-home-actions .mud-button-filled-primary {
    background: linear-gradient(135deg, var(--dv-look-blue), var(--dv-look-cyan)) !important;
    box-shadow: 0 18px 45px color-mix(in srgb, var(--dv-look-blue) 26%, transparent) !important;
}

.tv-command-home .tv-home-actions .mud-button-outlined-primary {
    border-color: var(--dv-look-line) !important;
    background: color-mix(in srgb, var(--dv-look-panel-solid) 70%, transparent) !important;
    color: var(--dv-look-ink) !important;
}

.tv-home-trust-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: min(1050px, 100%) !important;
    margin-top: 28px !important;
    border: 1px solid var(--dv-look-line);
    border-radius: 24px;
    background: color-mix(in srgb, var(--dv-look-panel-solid) 76%, transparent);
    box-shadow: var(--dv-look-card-shadow);
    overflow: hidden;
}

.dark .tv-home-trust-row {
    background: rgba(8, 25, 58, .62);
}

.tv-home-trust-row span {
    min-height: 72px !important;
    justify-content: center !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--dv-look-ink) !important;
}

.tv-home-trust-row span + span {
    border-left: 1px solid var(--dv-look-line);
}

.tv-home-trust-row svg {
    width: 30px !important;
    height: 30px !important;
    padding: 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--dv-look-blue) 12%, transparent);
    color: var(--dv-look-blue) !important;
}

.tv-hero-tool-launcher {
    display: none !important;
}

.tv-orbit-dashboard {
    min-height: 470px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    isolation: isolate;
}

.tv-orbit-glow {
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    filter: blur(2px);
    pointer-events: none;
}

.tv-orbit-glow-one {
    inset: 20% -9% auto auto;
    width: 520px;
    height: 160px;
    border: 2px solid color-mix(in srgb, var(--dv-look-blue) 40%, transparent);
    transform: rotate(-10deg);
    box-shadow: 0 0 48px color-mix(in srgb, var(--dv-look-blue) 20%, transparent);
}

.tv-orbit-glow-two {
    inset: auto 20% 4% auto;
    width: 360px;
    height: 104px;
    border: 2px solid color-mix(in srgb, var(--dv-look-cyan) 34%, transparent);
    transform: rotate(8deg);
}

.tv-orbit-console {
    position: absolute;
    inset: 54px 34px 30px 64px;
    display: grid;
    gap: 18px;
    padding: 32px;
    border: 1px solid var(--dv-look-line);
    border-radius: 34px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--dv-look-panel-solid) 88%, transparent), color-mix(in srgb, var(--dv-look-panel-solid) 62%, transparent));
    box-shadow: var(--dv-look-shadow);
    backdrop-filter: blur(24px) saturate(1.2);
}

.dark .tv-orbit-console {
    background:
        linear-gradient(135deg, rgba(12, 34, 78, .82), rgba(4, 15, 36, .74));
}

.tv-orbit-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 56px;
    padding: 0 18px;
    border: 1px solid var(--dv-look-line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--dv-look-panel-solid) 84%, transparent);
    color: var(--dv-look-muted);
    box-shadow: inset 0 1px rgba(255, 255, 255, .38);
}

.dark .tv-orbit-search {
    background: rgba(9, 24, 55, .82);
}

.tv-orbit-search svg {
    color: var(--dv-look-cyan);
}

.tv-orbit-tool-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.tv-orbit-tool-tile {
    display: grid;
    place-items: center;
    gap: 9px;
    min-height: 96px;
    padding: 12px 8px;
    border: 1px solid var(--dv-look-line);
    border-radius: 18px;
    background: color-mix(in srgb, var(--dv-look-blue) 7%, var(--dv-look-panel-solid));
    color: var(--dv-look-ink);
    text-align: center;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 850;
}

.dark .tv-orbit-tool-tile {
    background: rgba(18, 104, 255, .13);
}

.tv-orbit-tool-tile svg {
    width: 34px;
    height: 34px;
    padding: 8px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--dv-look-cyan) 16%, transparent);
    color: var(--dv-look-cyan);
}

.tv-orbit-chart {
    position: relative;
    min-height: 178px;
    border: 1px solid var(--dv-look-line);
    border-radius: 22px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--dv-look-panel-solid) 76%, transparent), color-mix(in srgb, var(--dv-look-blue) 8%, transparent));
    overflow: hidden;
}

.dark .tv-orbit-chart {
    background: rgba(5, 20, 50, .74);
}

.tv-orbit-chart svg {
    position: absolute;
    inset: 24px 18px 52px;
    width: calc(100% - 36px);
    height: 110px;
}

.tv-orbit-chart path {
    fill: none;
    stroke: url(#orbitLine);
    stroke-width: 8;
    stroke-linecap: round;
}

.tv-orbit-chart circle {
    fill: var(--dv-look-cyan);
    filter: drop-shadow(0 0 10px var(--dv-look-cyan));
}

.tv-orbit-bars {
    position: absolute;
    inset: auto 28px 20px auto;
    display: flex;
    align-items: end;
    gap: 10px;
    height: 84px;
}

.tv-orbit-bars span {
    width: 16px;
    border-radius: 999px 999px 5px 5px;
    background: linear-gradient(180deg, var(--dv-look-blue), var(--dv-look-purple));
}

.tv-orbit-card {
    position: absolute;
    display: grid;
    place-items: center;
    border: 1px solid var(--dv-look-line);
    border-radius: 24px;
    background: color-mix(in srgb, var(--dv-look-panel-solid) 80%, transparent);
    box-shadow: var(--dv-look-card-shadow);
    backdrop-filter: blur(18px);
}

.dark .tv-orbit-card {
    background: rgba(9, 24, 55, .78);
}

.tv-orbit-card-shield {
    z-index: 2;
    inset: 150px auto auto 0;
    width: 100px;
    height: 112px;
}

.tv-orbit-card-shield svg {
    width: 54px;
    height: 54px;
    color: var(--dv-look-blue);
}

.tv-orbit-card-globe {
    z-index: 2;
    inset: 32px 0 auto auto;
    width: 98px;
    height: 98px;
}

.tv-orbit-card-globe svg {
    width: 58px;
    height: 58px;
    color: var(--dv-look-cyan);
}

.tv-orbit-card-ssl {
    z-index: 3;
    right: 10px;
    bottom: 72px;
    align-items: start;
    justify-items: start;
    min-width: 210px;
    gap: 10px;
    padding: 18px;
    color: var(--dv-look-ink);
}

.tv-orbit-card-ssl span {
    font-size: .94rem;
    font-weight: 900;
}

.tv-orbit-card-ssl strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--dv-look-green);
}

.tv-orbit-card-code {
    z-index: 3;
    left: 92px;
    bottom: 36px;
    width: 240px;
    min-height: 88px;
    justify-items: stretch;
    gap: 10px;
    padding: 18px;
}

.tv-orbit-card-code span {
    height: 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--dv-look-blue) 48%, transparent);
}

.tv-orbit-card-code span:nth-child(2) {
    width: 78%;
}

.tv-orbit-card-code span:nth-child(3) {
    width: 54%;
}

.tv-command-home .tv-home-section,
.tv-command-home .tv-onepage-tool-map,
.tv-command-home .privacy-band {
    border: 1px solid var(--dv-look-line) !important;
    background: color-mix(in srgb, var(--dv-look-panel-solid) 82%, transparent) !important;
    box-shadow: var(--dv-look-card-shadow) !important;
}

.dark .tv-command-home .tv-home-section,
.dark .tv-command-home .tv-onepage-tool-map,
.dark .tv-command-home .privacy-band {
    background: rgba(6, 18, 42, .74) !important;
}

.tv-section-heading h2,
.tv-section-heading span,
.tv-popular-card b,
.tv-onepage-category-title h3,
.tv-onepage-tool-card b {
    color: var(--dv-look-ink) !important;
}

.tv-section-heading p,
.tv-popular-card small,
.tv-onepage-category-title p,
.tv-onepage-tool-card small {
    color: var(--dv-look-muted) !important;
}

.tv-popular-card,
.tv-onepage-category-card,
.tv-onepage-tool-card,
.tv-why-grid article {
    border: 1px solid var(--dv-look-line) !important;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--dv-look-panel-solid) 92%, transparent), color-mix(in srgb, var(--dv-look-blue) 4%, transparent)) !important;
    box-shadow: 0 14px 34px rgba(7, 21, 50, .08) !important;
}

.dark .tv-popular-card,
.dark .tv-onepage-category-card,
.dark .tv-onepage-tool-card,
.dark .tv-why-grid article {
    background:
        linear-gradient(145deg, rgba(10, 27, 61, .86), rgba(5, 16, 38, .76)) !important;
}

.tv-popular-card:hover,
.tv-popular-card:focus-visible,
.tv-onepage-category-card:hover,
.tv-onepage-tool-card:hover,
.tv-onepage-tool-card:focus-visible {
    transform: translateY(-4px) !important;
    border-color: color-mix(in srgb, var(--dv-look-cyan) 38%, var(--dv-look-line)) !important;
    box-shadow: 0 24px 56px color-mix(in srgb, var(--dv-look-blue) 16%, transparent) !important;
}

.tv-popular-card > span,
.tv-onepage-category-title > span,
.tv-onepage-tool-icon,
.tv-why-grid article .mud-icon-root {
    background: linear-gradient(135deg, color-mix(in srgb, var(--dv-look-blue) 18%, transparent), color-mix(in srgb, var(--dv-look-cyan) 18%, transparent)) !important;
    color: var(--dv-look-blue) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dv-look-blue) 18%, transparent);
}

.tv-command-home .tv-home-section:last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 1180px) {
    .tv-command-home .tv-home-hero {
        grid-template-columns: 1fr !important;
    }

    .tv-orbit-dashboard {
        min-height: 520px;
        max-width: 780px !important;
        justify-self: stretch !important;
    }
}

@media (max-width: 760px) {
    .tv-command-home .tv-home-hero {
        padding: 34px 16px 28px !important;
    }

    .tv-command-home .tv-home-hero-copy h1 {
        font-size: clamp(2.35rem, 13vw, 3.6rem) !important;
    }

    .tv-home-trust-row {
        grid-template-columns: 1fr !important;
        border-radius: 20px;
    }

    .tv-home-trust-row span + span {
        border-left: 0;
        border-top: 1px solid var(--dv-look-line);
    }

    .tv-orbit-dashboard {
        min-height: 500px;
    }

    .tv-orbit-console {
        inset: 48px 0 34px 0;
        padding: 18px;
        border-radius: 24px;
    }

    .tv-orbit-tool-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tv-orbit-card-shield {
        left: 8px;
        top: 10px;
        width: 72px;
        height: 78px;
    }

    .tv-orbit-card-globe {
        right: 8px;
        top: 8px;
        width: 72px;
        height: 72px;
    }

    .tv-orbit-card-ssl {
        right: 0;
        bottom: 8px;
        min-width: 168px;
    }

    .tv-orbit-card-code {
        left: 0;
        bottom: 16px;
        width: 180px;
    }

    .tv-asana-actions {
        gap: 6px !important;
    }

    .tv-asana-action-link span {
        display: none !important;
    }

    .tv-sticky-search-wrap {
        min-width: 0;
        width: min(100%, 420px);
    }
}

/* Premium blue SaaS theme system. Keep layout/content intact; restyle surfaces consistently. */
:root {
    --dv-blue-50: #eff6ff;
    --dv-blue-100: #dbeafe;
    --dv-blue-500: #3b82f6;
    --dv-blue-600: #2563eb;
    --dv-blue-700: #1d4ed8;
    --dv-cyan-500: #06b6d4;
    --dv-teal-500: #14b8a6;
    --dv-purple-500: #8b5cf6;
    --dv-success: #22c55e;
    --dv-warning: #f59e0b;
    --dv-danger: #ef4444;
    --dv-navy-950: #020617;
    --dv-navy-900: #07111f;
    --dv-navy-850: #0b1220;
    --dv-bg: #f8fbff;
    --dv-bg-soft: #eef6ff;
    --dv-surface: #ffffff;
    --dv-surface-soft: #f1f5f9;
    --dv-surface-glass: rgba(255, 255, 255, .86);
    --dv-text: #07111f;
    --dv-text-muted: #64748b;
    --dv-border: #dce7f5;
    --dv-border-strong: rgba(37, 99, 235, .22);
    --dv-radius-sm: 10px;
    --dv-radius-md: 16px;
    --dv-radius-lg: 22px;
    --dv-radius-xl: 28px;
    --dv-radius-2xl: 34px;
    --dv-space-1: 4px;
    --dv-space-2: 8px;
    --dv-space-3: 12px;
    --dv-space-4: 16px;
    --dv-space-5: 20px;
    --dv-space-6: 24px;
    --dv-shadow-card: 0 18px 45px rgba(15, 23, 42, .08);
    --dv-shadow-float: 0 24px 70px rgba(37, 99, 235, .18);
    --dv-shadow-hover: 0 24px 58px rgba(37, 99, 235, .20);
    --dv-focus: 0 0 0 4px rgba(37, 99, 235, .22);
    --dv-gradient-primary: linear-gradient(135deg, #2563eb 0%, #06b6d4 50%, #14b8a6 100%);
    --dv-gradient-hero: radial-gradient(circle at top right, rgba(37, 99, 235, .18), transparent 35%),
                        radial-gradient(circle at top left, rgba(6, 182, 212, .14), transparent 35%),
                        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    --dv-gradient-card: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(239, 246, 255, .82));
    --dv-transition: 160ms ease;
}

.app.dark,
[data-theme="dark"] {
    --dv-bg: #020617;
    --dv-bg-soft: #07111f;
    --dv-surface: #0b1220;
    --dv-surface-soft: #111827;
    --dv-surface-glass: rgba(11, 18, 32, .82);
    --dv-text: #f8fafc;
    --dv-text-muted: #cbd5e1;
    --dv-border: rgba(148, 163, 184, .18);
    --dv-border-strong: rgba(59, 130, 246, .34);
    --dv-shadow-card: 0 18px 50px rgba(0, 0, 0, .35);
    --dv-shadow-float: 0 24px 80px rgba(37, 99, 235, .28);
    --dv-shadow-hover: 0 26px 70px rgba(6, 182, 212, .20);
    --dv-gradient-hero: radial-gradient(circle at top right, rgba(37, 99, 235, .28), transparent 35%),
                        radial-gradient(circle at top left, rgba(6, 182, 212, .16), transparent 35%),
                        linear-gradient(180deg, #020617 0%, #07111f 100%);
    --dv-gradient-card: linear-gradient(145deg, rgba(15, 23, 42, .95), rgba(11, 18, 32, .86));
}

html,
body,
.app {
    background:
        radial-gradient(circle at 90% 4%, color-mix(in srgb, var(--dv-blue-600) 12%, transparent), transparent 28vw),
        radial-gradient(circle at 8% 20%, color-mix(in srgb, var(--dv-cyan-500) 9%, transparent), transparent 30vw),
        linear-gradient(180deg, var(--dv-bg), var(--dv-bg-soft)) !important;
    color: var(--dv-text) !important;
}

.app,
.app * {
    scrollbar-color: color-mix(in srgb, var(--dv-blue-600) 38%, var(--dv-border)) transparent;
}

.app ::selection {
    background: color-mix(in srgb, var(--dv-blue-600) 28%, transparent);
    color: var(--dv-text);
}

.app a {
    color: color-mix(in srgb, var(--dv-blue-600) 86%, var(--dv-text));
    text-underline-offset: 3px;
}

.app a:focus-visible,
.app button:focus-visible,
.app summary:focus-visible,
.app input:focus-visible,
.app textarea:focus-visible,
.app select:focus-visible,
.app [tabindex]:focus-visible {
    outline: none !important;
    box-shadow: var(--dv-focus) !important;
}

.tv-asana-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
    border-bottom: 1px solid var(--dv-border) !important;
    background: color-mix(in srgb, var(--dv-surface-glass) 96%, transparent) !important;
    backdrop-filter: blur(22px) saturate(1.22) !important;
}

.tv-asana-brand,
.tv-asana-menu-item > summary,
.tv-asana-action-link,
.tv-asana-mobile-menu {
    color: var(--dv-text) !important;
}

.tv-asana-menu-item > summary,
.tv-asana-action-link,
.tv-asana-mobile-menu {
    border-radius: 999px !important;
    transition: background var(--dv-transition), color var(--dv-transition), border-color var(--dv-transition), transform var(--dv-transition);
}

.tv-asana-menu-item > summary:hover,
.tv-asana-menu-item[open] > summary,
.tv-asana-action-link:hover,
.tv-asana-mobile-menu:hover {
    background: color-mix(in srgb, var(--dv-blue-600) 10%, var(--dv-surface)) !important;
    color: var(--dv-blue-600) !important;
}

.tv-asana-mega,
.tv-floating-filter-panel,
.tv-theme-panel,
.tv-sticky-search-results {
    border: 1px solid var(--dv-border) !important;
    background: color-mix(in srgb, var(--dv-surface) 96%, transparent) !important;
    box-shadow: var(--dv-shadow-float) !important;
    backdrop-filter: blur(22px) saturate(1.18) !important;
}

.dark .tv-asana-mega,
.dark .tv-floating-filter-panel,
.dark .tv-theme-panel,
.dark .tv-sticky-search-results {
    background: color-mix(in srgb, var(--dv-surface) 92%, transparent) !important;
}

.tv-asana-mega-intro,
.tv-floating-filter-panel header {
    background:
        radial-gradient(circle at 10% 0, color-mix(in srgb, var(--dv-blue-600) 16%, transparent), transparent 52%),
        radial-gradient(circle at 100% 20%, color-mix(in srgb, var(--dv-cyan-500) 14%, transparent), transparent 48%),
        var(--dv-surface-soft) !important;
}

.tv-command-home .tv-home-hero {
    background: var(--dv-gradient-hero) !important;
    color: var(--dv-text) !important;
}

.tv-command-home .tv-home-hero-copy h1 {
    color: var(--dv-text) !important;
}

.tv-gradient-text {
    background: linear-gradient(90deg, var(--dv-blue-600), var(--dv-cyan-500), var(--dv-teal-500)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

.tv-command-home .tv-home-hero-copy p,
.tv-section-heading p,
.category-readable-description,
.tool-tree-description,
.tcard-copy p,
.market-tool-copy small,
.blog-card p,
.tool-head p,
.tool-content-section p,
.how-to p,
.related p,
.legal-card p,
.info-card p {
    color: var(--dv-text-muted) !important;
}

.mud-button-filled-primary,
.btn-p,
.contact-send-btn,
.tool-action-primary,
.pdf-run-button,
.image-run-button {
    border: 0 !important;
    background: var(--dv-gradient-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 36px rgba(37, 99, 235, .24) !important;
    transition: transform var(--dv-transition), box-shadow var(--dv-transition), filter var(--dv-transition) !important;
}

.mud-button-filled-primary:hover,
.btn-p:hover,
.contact-send-btn:hover,
.tool-action-primary:hover,
.pdf-run-button:hover,
.image-run-button:hover {
    transform: translateY(-2px);
    filter: saturate(1.08);
    box-shadow: var(--dv-shadow-hover) !important;
}

.mud-button-outlined-primary,
.mud-button-text-primary,
.btn-s,
.tool-action-secondary {
    border-color: var(--dv-border-strong) !important;
    background: color-mix(in srgb, var(--dv-surface) 76%, transparent) !important;
    color: var(--dv-blue-600) !important;
}

.tv-sticky-search-box,
.studio-search,
.library-command,
.category-search-card,
.blog-search-row,
.single-library-command,
.mud-input-root,
.mud-input-control,
.form-row input,
.form-row select,
.form-row textarea,
.form-col input,
.form-col select,
.form-col textarea,
.ta,
.calc-display,
.tool-panel textarea,
.tool-panel input,
.tool-panel select,
.pdf-upload-zone,
.upload-zone,
.file-drop-zone {
    border: 1px solid var(--dv-border) !important;
    border-radius: var(--dv-radius-md) !important;
    background: color-mix(in srgb, var(--dv-surface) 94%, transparent) !important;
    color: var(--dv-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34) !important;
}

.tv-sticky-search-box:focus-within,
.studio-search:focus-within,
.library-command:focus-within,
.category-search-card:focus-within,
.blog-search-row:focus-within,
.single-library-command:focus-within,
.mud-input-root:focus-within,
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus,
.form-col input:focus,
.form-col select:focus,
.form-col textarea:focus,
.ta:focus {
    border-color: var(--dv-blue-600) !important;
    box-shadow: var(--dv-focus) !important;
}

.studio-search-hero,
.library-hero,
.category-market-hero,
.blog-hero,
.blog-article-hero,
.legal-hero,
.info-hero,
.tool-head,
.prompt-hero-card,
.api-doc-hero,
.home-bookmarks-card,
.tv-command-home .tv-home-section,
.tv-command-home .tv-onepage-tool-map,
.tv-command-home .privacy-band {
    border: 1px solid var(--dv-border) !important;
    border-radius: var(--dv-radius-xl) !important;
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--dv-blue-600) 12%, transparent), transparent 44%),
        radial-gradient(circle at 0 20%, color-mix(in srgb, var(--dv-cyan-500) 9%, transparent), transparent 38%),
        var(--dv-gradient-card) !important;
    box-shadow: var(--dv-shadow-card) !important;
}

.home-bookmarks-card,
.studio-section,
.studio-quick-panel,
.library-group,
.blog-featured,
.blog-listing,
.blog-related-block,
.blog-cta,
.blog-article-content,
.blog-toc,
.tool-panel,
.calc-card,
.how-to,
.tool-content-section,
.tool-meta-grid article,
.legal-card,
.legal-panel,
.info-card,
.auth-card,
.webhook-card,
.pdf-panel,
.prompt-form-panel,
.prompt-output-panel,
.api-doc-section,
.category-readable-card,
.studio-category-card,
.blog-card,
.tcard,
.market-tool-card,
.tool-tree,
.home-important-tool,
.studio-quick-tile,
.dashboard-tile,
.catcard,
.tcard-sm,
.tv-popular-card,
.tv-onepage-category-card,
.tv-onepage-tool-card,
.tv-why-grid article,
.result-card,
.tool-step-card {
    border: 1px solid var(--dv-border) !important;
    border-radius: var(--dv-radius-lg) !important;
    background: var(--dv-gradient-card) !important;
    color: var(--dv-text) !important;
    box-shadow: var(--dv-shadow-card) !important;
    transition: transform var(--dv-transition), box-shadow var(--dv-transition), border-color var(--dv-transition), background var(--dv-transition) !important;
}

.studio-category-card:hover,
.blog-card:hover,
.tcard:hover,
.market-tool-card:hover,
.tool-tree:hover,
.category-readable-card:hover,
.home-important-tool:hover,
.studio-quick-tile:hover,
.dashboard-tile:hover,
.catcard:hover,
.tcard-sm:hover,
.tv-popular-card:hover,
.tv-onepage-category-card:hover,
.tv-onepage-tool-card:hover,
.tool-workflow-card:hover {
    transform: translateY(-4px) !important;
    border-color: color-mix(in srgb, var(--dv-blue-600) 42%, var(--dv-border)) !important;
    box-shadow: var(--dv-shadow-hover) !important;
}

.tool-card-badges em,
.market-tool-badges em,
.tool-tree-badges em,
.category-readable-badges em,
.blog-card-meta span,
.blog-article-meta span,
.blog-tag-row span,
.library-summary-row span,
.footer-chip-row span,
.studio-kicker,
.blog-kicker,
.tv-home-kicker,
.tv-home-trust-row span,
.mud-chip-root,
.tool-step {
    border-color: color-mix(in srgb, var(--dv-blue-600) 18%, var(--dv-border)) !important;
    background: color-mix(in srgb, var(--dv-blue-600) 9%, var(--dv-surface)) !important;
    color: var(--dv-blue-700) !important;
}

.dark .tool-card-badges em,
.dark .market-tool-badges em,
.dark .tool-tree-badges em,
.dark .category-readable-badges em,
.dark .blog-card-meta span,
.dark .blog-article-meta span,
.dark .blog-tag-row span,
.dark .library-summary-row span,
.dark .footer-chip-row span,
.dark .studio-kicker,
.dark .blog-kicker,
.dark .tv-home-kicker,
.dark .tv-home-trust-row span,
.dark .mud-chip-root,
.dark .tool-step {
    color: #bfdbfe !important;
}

.tv-popular-card > span,
.tv-onepage-category-title > span,
.tv-onepage-tool-icon,
.tool-icon,
.market-tool-icon,
.category-readable-icon,
.studio-category-icon,
.dashboard-tile-icon,
.tv-floating-filter-option-icon,
.tv-theme-option-icon {
    border: 1px solid color-mix(in srgb, var(--dv-blue-600) 18%, transparent) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--dv-blue-600) 18%, transparent), color-mix(in srgb, var(--dv-cyan-500) 16%, transparent)) !important;
    color: var(--dv-blue-600) !important;
}

.dark .tv-popular-card > span,
.dark .tv-onepage-category-title > span,
.dark .tv-onepage-tool-icon,
.dark .tool-icon,
.dark .market-tool-icon,
.dark .category-readable-icon,
.dark .studio-category-icon,
.dark .dashboard-tile-icon,
.dark .tv-floating-filter-option-icon,
.dark .tv-theme-option-icon {
    color: #93c5fd !important;
}

.tone-0 .tv-onepage-tool-icon,
.tone-0 .tv-onepage-category-title > span,
[data-home-category="network"] .tv-onepage-tool-icon,
[data-home-category="network"] .tv-onepage-category-title > span {
    background: linear-gradient(135deg, rgba(37, 99, 235, .18), rgba(6, 182, 212, .16)) !important;
}

.tone-1 .tv-onepage-tool-icon,
.tone-1 .tv-onepage-category-title > span,
[data-home-category="security"] .tv-onepage-tool-icon,
[data-home-category="security"] .tv-onepage-category-title > span {
    background: linear-gradient(135deg, rgba(20, 184, 166, .18), rgba(34, 197, 94, .14)) !important;
}

.tone-2 .tv-onepage-tool-icon,
.tone-2 .tv-onepage-category-title > span,
[data-home-category="finance"] .tv-onepage-tool-icon,
[data-home-category="finance"] .tv-onepage-category-title > span {
    background: linear-gradient(135deg, rgba(29, 78, 216, .18), rgba(139, 92, 246, .14)) !important;
}

[data-home-category="document"] .tv-onepage-tool-icon,
[data-home-category="pdf"] .tv-onepage-tool-icon,
[data-home-category="document"] .tv-onepage-category-title > span,
[data-home-category="pdf"] .tv-onepage-category-title > span {
    background: linear-gradient(135deg, rgba(37, 99, 235, .16), rgba(139, 92, 246, .18)) !important;
}

[data-home-category="text"] .tv-onepage-tool-icon,
[data-home-category="text"] .tv-onepage-category-title > span {
    background: linear-gradient(135deg, rgba(6, 182, 212, .18), rgba(37, 99, 235, .14)) !important;
}

[data-home-category="games"] .tv-onepage-tool-icon,
[data-home-category="games"] .tv-onepage-category-title > span {
    background: linear-gradient(135deg, rgba(139, 92, 246, .18), rgba(6, 182, 212, .14)) !important;
}

.tool-step.active {
    background: var(--dv-gradient-primary) !important;
    color: #ffffff !important;
}

.tool-step.done {
    background: color-mix(in srgb, var(--dv-success) 16%, var(--dv-surface)) !important;
    color: var(--dv-success) !important;
}

.alert-success,
.status-success,
.result-success {
    border-color: color-mix(in srgb, var(--dv-success) 34%, var(--dv-border)) !important;
    background: color-mix(in srgb, var(--dv-success) 10%, var(--dv-surface)) !important;
}

.alert-warning,
.status-warning,
.result-warning {
    border-color: color-mix(in srgb, var(--dv-warning) 34%, var(--dv-border)) !important;
    background: color-mix(in srgb, var(--dv-warning) 10%, var(--dv-surface)) !important;
}

.alert-danger,
.status-danger,
.result-error,
.validation-message {
    border-color: color-mix(in srgb, var(--dv-danger) 34%, var(--dv-border)) !important;
    background: color-mix(in srgb, var(--dv-danger) 9%, var(--dv-surface)) !important;
}

.footer,
.site-footer,
.app-footer,
.footer-wrap {
    border-top: 1px solid transparent !important;
    border-image: linear-gradient(90deg, var(--dv-blue-600), var(--dv-cyan-500), var(--dv-teal-500)) 1 !important;
    background:
        radial-gradient(circle at 18% 0, color-mix(in srgb, var(--dv-blue-600) 12%, transparent), transparent 34%),
        var(--dv-surface-glass) !important;
    color: var(--dv-text) !important;
}

@media (prefers-reduced-motion: reduce) {
    .app *,
    .app *::before,
    .app *::after {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 900px) {
    .tv-asana-topbar {
        padding-inline: 12px !important;
    }

    .tv-command-home .tv-home-hero {
        grid-template-columns: 1fr !important;
        padding-inline: 16px !important;
    }

    .tv-command-home .tv-home-hero-copy h1 {
        font-size: clamp(2.2rem, 10vw, 3.5rem) !important;
    }

    .tv-sticky-search-results {
        left: 0 !important;
        right: auto !important;
        width: min(100vw - 24px, 720px) !important;
    }
}

/* Correction layer: focused mockup-style blue UI without breaking MudBlazor internals. */
.app {
    --dv-blue-50: #eff6ff;
    --dv-blue-100: #dbeafe;
    --dv-blue-600: #2563eb;
    --dv-blue-700: #1d4ed8;
    --dv-cyan-500: #06b6d4;
    --dv-teal-500: #14b8a6;
    --dv-purple-500: #8b5cf6;
    --dv-ink: #07111f;
    --dv-muted: #64748b;
    --dv-line: #dce7f5;
    --dv-card: rgba(255, 255, 255, .92);
    --dv-card-solid: #ffffff;
    --dv-page: #f8fbff;
    --dv-shadow-soft: 0 18px 48px rgba(15, 23, 42, .08);
    --dv-shadow-blue: 0 24px 70px rgba(37, 99, 235, .18);
    --dv-primary-gradient: linear-gradient(135deg, #2563eb 0%, #06b6d4 52%, #14b8a6 100%);
    --dv-hero-bg:
        radial-gradient(circle at 78% 28%, rgba(37, 99, 235, .16), transparent 32%),
        radial-gradient(circle at 4% 34%, rgba(6, 182, 212, .12), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.app.dark {
    --dv-ink: #f8fafc;
    --dv-muted: #cbd5e1;
    --dv-line: rgba(148, 163, 184, .22);
    --dv-card: rgba(11, 18, 32, .82);
    --dv-card-solid: #0b1220;
    --dv-page: #020617;
    --dv-shadow-soft: 0 18px 55px rgba(0, 0, 0, .32);
    --dv-shadow-blue: 0 24px 80px rgba(37, 99, 235, .28);
    --dv-hero-bg:
        radial-gradient(circle at 78% 26%, rgba(37, 99, 235, .30), transparent 33%),
        radial-gradient(circle at 8% 40%, rgba(6, 182, 212, .14), transparent 31%),
        linear-gradient(180deg, #020617 0%, #07111f 100%);
}

.app,
.app.light,
.app:not(.dark) {
    background:
        radial-gradient(circle at 90% 0, rgba(37, 99, 235, .08), transparent 30vw),
        radial-gradient(circle at 0 18%, rgba(6, 182, 212, .06), transparent 30vw),
        var(--dv-page) !important;
    color: var(--dv-ink) !important;
}

.app.dark {
    background:
        radial-gradient(circle at 80% 0, rgba(37, 99, 235, .20), transparent 32vw),
        radial-gradient(circle at 0 20%, rgba(6, 182, 212, .12), transparent 32vw),
        var(--dv-page) !important;
}

.tv-asana-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
    min-height: 76px !important;
    border-bottom: 1px solid var(--dv-line) !important;
    background: color-mix(in srgb, var(--dv-card-solid) 88%, transparent) !important;
    backdrop-filter: blur(20px) saturate(1.16) !important;
    box-shadow: 0 12px 36px rgba(15, 23, 42, .07) !important;
}

.dark .tv-asana-topbar {
    background: rgba(2, 6, 23, .86) !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .28) !important;
}

.tv-asana-brand,
.tv-asana-menu-item > summary,
.tv-asana-action-link {
    color: var(--dv-ink) !important;
}

.tv-asana-brand-mark {
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(37, 99, 235, .18), rgba(6, 182, 212, .16)) !important;
    box-shadow: 0 0 26px rgba(6, 182, 212, .20) !important;
}

.tv-asana-menu-item > summary,
.tv-asana-action-link,
.tv-asana-mobile-menu,
.tv-sticky-filter-button,
.tv-sticky-search-clear {
    border-radius: 999px !important;
}

.tv-asana-menu-item > summary:hover,
.tv-asana-menu-item[open] > summary,
.tv-asana-action-link:hover,
.tv-asana-action-link:focus-visible,
.tv-asana-mobile-menu:hover,
.tv-sticky-filter-button:hover {
    background: rgba(37, 99, 235, .10) !important;
    color: var(--dv-blue-600) !important;
}

.tv-asana-mega,
.tv-floating-filter-panel,
.tv-theme-panel {
    border: 1px solid var(--dv-line) !important;
    background: color-mix(in srgb, var(--dv-card-solid) 96%, transparent) !important;
    box-shadow: var(--dv-shadow-blue) !important;
    backdrop-filter: blur(20px) saturate(1.16) !important;
}

.dark .tv-asana-mega,
.dark .tv-floating-filter-panel,
.dark .tv-theme-panel {
    background: rgba(11, 18, 32, .96) !important;
}

.tv-sticky-search-box {
    min-height: 48px !important;
    border: 1px solid var(--dv-line) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--dv-card-solid) 94%, transparent) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .07) !important;
}

.tv-sticky-search-box:focus-within,
.studio-search:focus-within,
.library-command:focus-within,
.category-search-card:focus-within {
    border-color: rgba(37, 99, 235, .52) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .16), 0 16px 40px rgba(37, 99, 235, .12) !important;
}

.tv-sticky-search-results {
    right: 0 !important;
    left: auto !important;
    width: min(720px, calc(100vw - 32px)) !important;
    max-height: min(72vh, 680px) !important;
    overflow: auto !important;
    border: 1px solid var(--dv-line) !important;
    border-radius: 22px !important;
    background: color-mix(in srgb, var(--dv-card-solid) 97%, transparent) !important;
    box-shadow: var(--dv-shadow-blue) !important;
}

.dark .tv-sticky-search-results {
    background: rgba(11, 18, 32, .98) !important;
}

.tv-command-home .tv-home-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .88fr) !important;
    gap: clamp(30px, 5vw, 76px) !important;
    align-items: center !important;
    padding: clamp(48px, 6vw, 88px) clamp(24px, 6vw, 104px) 38px !important;
    background: var(--dv-hero-bg) !important;
    color: var(--dv-ink) !important;
}

.tv-command-home .tv-home-hero-copy h1 {
    max-width: 760px !important;
    color: var(--dv-ink) !important;
    font-size: clamp(3rem, 5.6vw, 5.7rem) !important;
    line-height: .99 !important;
    letter-spacing: 0 !important;
}

.tv-gradient-text {
    background: linear-gradient(90deg, var(--dv-blue-600), var(--dv-cyan-500), var(--dv-teal-500)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

.tv-command-home .tv-home-hero-copy p {
    max-width: 640px !important;
    color: var(--dv-muted) !important;
    font-size: clamp(1.05rem, 1.2vw, 1.22rem) !important;
    line-height: 1.66 !important;
}

.tv-home-kicker,
.tv-home-trust-row span,
.tool-card-badges em,
.market-tool-badges em,
.tool-tree-badges em,
.category-readable-badges em,
.blog-card-meta span,
.library-summary-row span,
.mud-chip-root {
    border-color: rgba(37, 99, 235, .18) !important;
    background: color-mix(in srgb, var(--dv-blue-50) 72%, var(--dv-card-solid)) !important;
    color: var(--dv-blue-700) !important;
}

.dark .tv-home-kicker,
.dark .tv-home-trust-row span,
.dark .tool-card-badges em,
.dark .market-tool-badges em,
.dark .tool-tree-badges em,
.dark .category-readable-badges em,
.dark .blog-card-meta span,
.dark .library-summary-row span,
.dark .mud-chip-root {
    background: rgba(37, 99, 235, .14) !important;
    color: #bfdbfe !important;
}

.tv-command-home .tv-home-actions .mud-button-filled-primary,
.mud-button-filled-primary:not(.mud-button-disabled),
.btn-p,
.contact-send-btn {
    background: var(--dv-primary-gradient) !important;
    color: #fff !important;
    box-shadow: 0 16px 36px rgba(37, 99, 235, .24) !important;
}

.tv-command-home .tv-home-actions .mud-button-outlined-primary,
.mud-button-outlined-primary {
    border-color: rgba(37, 99, 235, .24) !important;
    background: color-mix(in srgb, var(--dv-card-solid) 72%, transparent) !important;
    color: var(--dv-blue-700) !important;
}

.tv-orbit-dashboard {
    min-height: 470px !important;
    max-width: 640px !important;
    justify-self: stretch !important;
}

.tv-orbit-console,
.tv-orbit-card,
.tv-orbit-search,
.tv-orbit-tool-tile,
.tv-orbit-chart,
.tv-command-home .tv-home-section,
.tv-command-home .tv-onepage-tool-map,
.studio-search-hero,
.library-hero,
.category-market-hero,
.blog-hero,
.blog-article-hero,
.legal-hero,
.info-hero,
.tool-head,
.home-bookmarks-card,
.studio-section,
.library-group,
.tool-panel,
.calc-card,
.how-to,
.related,
.tool-content-section,
.legal-card,
.legal-panel,
.info-card,
.blog-card,
.tcard,
.market-tool-card,
.tool-tree,
.catcard,
.tcard-sm,
.tv-popular-card,
.tv-onepage-category-card,
.tv-onepage-tool-card,
.tv-why-grid article {
    border: 1px solid var(--dv-line) !important;
    background: linear-gradient(145deg, color-mix(in srgb, var(--dv-card-solid) 96%, transparent), color-mix(in srgb, var(--dv-blue-50) 58%, var(--dv-card-solid))) !important;
    color: var(--dv-ink) !important;
    box-shadow: var(--dv-shadow-soft) !important;
}

.dark .tv-orbit-console,
.dark .tv-orbit-card,
.dark .tv-orbit-search,
.dark .tv-orbit-tool-tile,
.dark .tv-orbit-chart,
.dark .tv-command-home .tv-home-section,
.dark .tv-command-home .tv-onepage-tool-map,
.dark .studio-search-hero,
.dark .library-hero,
.dark .category-market-hero,
.dark .blog-hero,
.dark .blog-article-hero,
.dark .legal-hero,
.dark .info-hero,
.dark .tool-head,
.dark .home-bookmarks-card,
.dark .studio-section,
.dark .library-group,
.dark .tool-panel,
.dark .calc-card,
.dark .how-to,
.dark .related,
.dark .tool-content-section,
.dark .legal-card,
.dark .legal-panel,
.dark .info-card,
.dark .blog-card,
.dark .tcard,
.dark .market-tool-card,
.dark .tool-tree,
.dark .catcard,
.dark .tcard-sm,
.dark .tv-popular-card,
.dark .tv-onepage-category-card,
.dark .tv-onepage-tool-card,
.dark .tv-why-grid article {
    background: linear-gradient(145deg, rgba(11, 18, 32, .94), rgba(17, 24, 39, .86)) !important;
}

.tv-popular-card:hover,
.tv-onepage-tool-card:hover,
.market-tool-card:hover,
.tool-tree:hover,
.blog-card:hover,
.tcard:hover,
.catcard:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(37, 99, 235, .38) !important;
    box-shadow: 0 22px 54px rgba(37, 99, 235, .16) !important;
}

.tv-popular-card > span,
.tv-onepage-category-title > span,
.tv-onepage-tool-icon,
.market-tool-icon,
.tool-icon,
.category-readable-icon,
.studio-category-icon {
    border: 1px solid rgba(37, 99, 235, .18) !important;
    background: linear-gradient(135deg, rgba(37, 99, 235, .16), rgba(6, 182, 212, .14)) !important;
    color: var(--dv-blue-600) !important;
}

.app input:not([type="checkbox"]):not([type="radio"]),
.app textarea,
.app select,
.app .ta,
.app .form-row input,
.app .form-row select,
.app .form-row textarea,
.app .form-col input,
.app .form-col select,
.app .form-col textarea {
    border-color: var(--dv-line) !important;
    background: var(--dv-card-solid) !important;
    color: var(--dv-ink) !important;
}

.dark input:not([type="checkbox"]):not([type="radio"]),
.dark textarea,
.dark select,
.dark .ta {
    background: #0b1220 !important;
}

.app input:not([type="checkbox"]):not([type="radio"]):focus,
.app textarea:focus,
.app select:focus,
.app .ta:focus {
    border-color: var(--dv-blue-600) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .18) !important;
    outline: none !important;
}

.footer,
.site-footer,
.app-footer,
.footer-wrap {
    border-top: 1px solid var(--dv-line) !important;
    background:
        radial-gradient(circle at 20% 0, rgba(37, 99, 235, .10), transparent 36%),
        var(--dv-card) !important;
    color: var(--dv-ink) !important;
}

.footer::before,
.site-footer::before,
.app-footer::before {
    background: var(--dv-primary-gradient) !important;
}

@media (max-width: 1180px) {
    .tv-command-home .tv-home-hero {
        grid-template-columns: 1fr !important;
    }

    .tv-orbit-dashboard {
        max-width: 760px !important;
    }
}

@media (max-width: 760px) {
    .tv-command-home .tv-home-hero {
        padding: 32px 16px 28px !important;
    }

    .tv-command-home .tv-home-hero-copy h1 {
        font-size: clamp(2.2rem, 12vw, 3.35rem) !important;
    }

    .tv-sticky-search-results {
        left: 0 !important;
        right: auto !important;
        width: min(100vw - 20px, 720px) !important;
    }
}

/* Exact landing replica pass: first screen mirrors the supplied dark DaivVerse dashboard mockup. */
.tv-command-home {
    background: #f4f7fb !important;
    padding: clamp(14px, 2vw, 26px) !important;
}

.tv-command-home .tv-replica-landing {
    width: min(1760px, calc(100vw - clamp(20px, 4vw, 68px))) !important;
    min-height: auto !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, .97fr) minmax(420px, .9fr) !important;
    grid-template-areas:
        "copy visual"
        "trust trust"
        "categories categories"
        "popularHead popularHead"
        "popular popular"
        "bottom bottom" !important;
    align-items: center !important;
    gap: clamp(16px, 2vw, 26px) clamp(28px, 4vw, 76px) !important;
    position: relative !important;
    overflow: hidden !important;
    padding: clamp(46px, 5vw, 78px) clamp(56px, 6vw, 96px) 0 !important;
    border: 1px solid rgba(100, 155, 255, .22) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 82% 24%, rgba(37, 99, 235, .34), transparent 28%),
        radial-gradient(circle at 76% 72%, rgba(6, 182, 212, .16), transparent 31%),
        linear-gradient(135deg, #020817 0%, #031227 44%, #051a38 100%) !important;
    color: #f8fbff !important;
    box-shadow: 0 30px 90px rgba(2, 6, 23, .32) !important;
}

.tv-command-home .tv-replica-landing::before {
    content: "";
    position: absolute;
    inset: 74px auto auto -110px;
    width: 540px;
    height: 360px;
    background:
        linear-gradient(132deg, transparent 16%, rgba(37, 99, 235, .30) 18%, rgba(37, 99, 235, .05) 32%, transparent 34%),
        linear-gradient(145deg, transparent 36%, rgba(6, 182, 212, .15) 38%, transparent 52%);
    transform: rotate(-10deg);
    pointer-events: none;
}

.tv-replica-bg-lines {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, transparent 0 59%, rgba(37, 99, 235, .12) 60%, transparent 61%),
        radial-gradient(circle at 88% 17%, rgba(30, 144, 255, .26) 0 2px, transparent 3px),
        radial-gradient(circle at 76% 31%, rgba(6, 182, 212, .58) 0 2px, transparent 3px),
        radial-gradient(circle at 92% 63%, rgba(139, 92, 246, .42) 0 2px, transparent 3px);
    pointer-events: none;
}

.tv-command-home .tv-replica-landing .tv-home-hero-copy {
    grid-area: copy !important;
    z-index: 2 !important;
    padding: 0 !important;
}

.tv-command-home .tv-replica-landing .tv-home-hero-copy h1 {
    max-width: 700px !important;
    margin: 0 0 24px !important;
    color: #ffffff !important;
    font-size: clamp(3.2rem, 4.75vw, 5.05rem) !important;
    line-height: 1.04 !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 12px 36px rgba(0, 0, 0, .30);
}

.tv-command-home .tv-replica-landing .tv-gradient-text {
    display: inline !important;
    background: linear-gradient(90deg, #66c2ff 0%, #3b82f6 42%, #39e6d6 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

.tv-command-home .tv-replica-landing .tv-home-hero-copy p {
    max-width: 650px !important;
    color: rgba(226, 236, 252, .92) !important;
    font-size: clamp(1.15rem, 1.28vw, 1.38rem) !important;
    line-height: 1.58 !important;
}

.tv-command-home .tv-replica-landing .tv-home-actions {
    margin-top: 30px !important;
    gap: 24px !important;
}

.tv-command-home .tv-replica-landing .tv-home-actions .mud-button-root {
    min-width: 220px !important;
    min-height: 58px !important;
    border-radius: 14px !important;
    font-size: 1.08rem !important;
    font-weight: 850 !important;
    text-transform: none !important;
}

.tv-command-home .tv-replica-landing .tv-home-actions .mud-button-filled-primary {
    background: linear-gradient(135deg, #2c6cff 0%, #10e2d4 100%) !important;
    box-shadow: 0 18px 44px rgba(37, 99, 235, .40) !important;
}

.tv-command-home .tv-replica-landing .tv-home-actions .mud-button-outlined-primary {
    border: 1px solid rgba(180, 210, 255, .22) !important;
    background: rgba(7, 17, 35, .68) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .06) !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-dashboard {
    grid-area: visual !important;
    z-index: 2 !important;
    min-height: 460px !important;
    max-width: none !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-console {
    inset: 42px 64px 44px 96px !important;
    padding: 26px !important;
    border: 1px solid rgba(94, 151, 255, .34) !important;
    border-radius: 26px !important;
    background: linear-gradient(145deg, rgba(16, 38, 83, .90), rgba(5, 18, 43, .78)) !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .38), 0 0 80px rgba(37, 99, 235, .18) !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-search,
.tv-command-home .tv-replica-landing .tv-orbit-tool-tile,
.tv-command-home .tv-replica-landing .tv-orbit-chart,
.tv-command-home .tv-replica-landing .tv-orbit-card {
    border-color: rgba(88, 148, 255, .28) !important;
    background: rgba(11, 28, 65, .82) !important;
    color: #f8fbff !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-tool-tile {
    min-height: 96px !important;
    color: #ffffff !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-tool-tile svg {
    color: #22d3ee !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-card-shield {
    left: 8px !important;
    top: 154px !important;
    width: 112px !important;
    height: 124px !important;
    background: linear-gradient(145deg, rgba(37, 99, 235, .36), rgba(8, 24, 58, .80)) !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-card-globe {
    right: 0 !important;
    top: 26px !important;
    width: 106px !important;
    height: 106px !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-card-ssl {
    right: 16px !important;
    bottom: 122px !important;
    min-width: 218px !important;
    padding: 20px !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-card-code {
    left: 92px !important;
    bottom: 54px !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-glow-one {
    inset: 52% -7% auto auto !important;
    width: 650px !important;
    height: 160px !important;
    border-color: rgba(37, 99, 235, .58) !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-glow-two {
    inset: 69% 22% auto auto !important;
    border-color: rgba(6, 182, 212, .34) !important;
}

.tv-replica-trust-row {
    grid-area: trust !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: min(1460px, 100%) !important;
    margin: 8px auto 0 !important;
    border: 1px solid rgba(118, 170, 255, .28) !important;
    border-radius: 24px !important;
    background: rgba(9, 26, 58, .78) !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .24) !important;
    overflow: hidden !important;
}

.tv-replica-trust-row span {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 16px !important;
    align-items: center !important;
    justify-content: start !important;
    min-height: 94px !important;
    padding: 18px 34px !important;
    border-radius: 0 !important;
    color: #f8fbff !important;
    background: transparent !important;
    box-shadow: none !important;
}

.tv-replica-trust-row span + span {
    border-left: 1px solid rgba(118, 170, 255, .22) !important;
}

.tv-replica-trust-row svg {
    grid-row: 1 / 3 !important;
    width: 50px !important;
    height: 50px !important;
    padding: 12px !important;
    border-radius: 999px !important;
    background: rgba(37, 99, 235, .24) !important;
    color: #38bdf8 !important;
}

.tv-replica-trust-row b {
    color: #ffffff !important;
    font-size: 1.13rem !important;
    line-height: 1.2 !important;
}

.tv-replica-trust-row small {
    color: rgba(203, 213, 225, .90) !important;
    font-size: .92rem !important;
}

.tv-replica-category-row {
    grid-area: categories;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
}

.tv-replica-category-card {
    position: relative;
    min-height: 218px;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 10px;
    padding: 22px 22px 18px;
    border: 1px solid rgba(99, 170, 255, .30);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(19, 50, 104, .86), rgba(8, 21, 48, .82));
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .20);
    overflow: hidden;
}

.tv-replica-category-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 10%, rgba(47, 112, 255, .30), transparent 42%);
    opacity: .9;
}

.tv-replica-category-card > * {
    position: relative;
}

.tv-replica-category-card > span {
    width: 64px;
    height: 64px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(125, 190, 255, .24);
    border-radius: 18px;
    background: rgba(37, 99, 235, .24);
}

.tv-replica-category-card > span svg {
    width: 40px;
    height: 40px;
    color: #28d9ff;
}

.tv-replica-category-card b {
    color: #ffffff;
    font-size: 1.13rem;
    line-height: 1.2;
}

.tv-replica-category-card small {
    color: rgba(226, 236, 252, .84);
    font-size: .96rem;
    line-height: 1.48;
}

.tv-replica-category-card em {
    justify-self: end;
    color: #7dd3fc;
    font-style: normal;
}

.tv-replica-category-card.tone-1 {
    background: linear-gradient(145deg, rgba(4, 80, 78, .82), rgba(7, 24, 48, .84));
}

.tv-replica-category-card.tone-2 {
    background: linear-gradient(145deg, rgba(75, 36, 128, .82), rgba(9, 21, 52, .84));
}

.tv-replica-category-card.tone-3 {
    background: linear-gradient(145deg, rgba(79, 39, 118, .84), rgba(18, 21, 55, .86));
}

.tv-replica-category-card.tone-4 {
    background: linear-gradient(145deg, rgba(88, 75, 18, .72), rgba(15, 24, 45, .88));
}

.tv-replica-category-card.tone-5 {
    background: linear-gradient(145deg, rgba(4, 72, 111, .84), rgba(4, 22, 49, .88));
}

.tv-replica-popular-head {
    grid-area: popularHead;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 2px;
}

.tv-replica-popular-head h2 {
    margin: 0;
    color: #ffffff;
    font-size: 1.75rem;
}

.tv-replica-popular-head a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #60a5fa;
    font-weight: 800;
    text-decoration: none;
}

.tv-replica-popular-row {
    grid-area: popular;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 18px;
}

.tv-replica-tool-card {
    position: relative;
    min-height: 168px;
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 18px;
    border: 1px solid rgba(118, 170, 255, .22);
    border-radius: 12px;
    background: rgba(15, 35, 73, .76);
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
}

.tv-replica-tool-icon {
    width: 58px;
    height: 58px;
    display: inline-grid;
    place-items: center;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(37, 99, 235, .55), rgba(6, 182, 212, .26));
}

.tv-replica-tool-icon svg {
    width: 34px;
    height: 34px;
    color: #22d3ee;
}

.tv-replica-star {
    position: absolute;
    top: 18px;
    right: 18px;
    color: rgba(203, 213, 225, .72);
}

.tv-replica-tool-card b {
    color: #ffffff;
    font-size: 1rem;
}

.tv-replica-tool-card small {
    color: rgba(203, 213, 225, .86);
    line-height: 1.45;
}

.tv-replica-bottom-trust {
    grid-area: bottom;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 8px calc(clamp(56px, 6vw, 96px) * -1) 0;
    border-top: 1px solid rgba(118, 170, 255, .20);
    background: rgba(8, 24, 52, .72);
}

.tv-replica-bottom-trust span {
    min-height: 84px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 18px 24px;
    color: rgba(226, 236, 252, .88);
    line-height: 1.3;
}

.tv-replica-bottom-trust span + span {
    border-left: 1px solid rgba(118, 170, 255, .20);
}

.tv-replica-bottom-trust svg {
    width: 42px;
    height: 42px;
    color: #22d3ee;
}

@media (max-width: 1320px) {
    .tv-replica-category-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tv-replica-popular-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .tv-command-home .tv-replica-landing {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "copy"
            "visual"
            "trust"
            "categories"
            "popularHead"
            "popular"
            "bottom" !important;
        padding: 34px 20px 0 !important;
    }

    .tv-replica-trust-row,
    .tv-replica-bottom-trust {
        grid-template-columns: 1fr !important;
    }

    .tv-replica-trust-row span + span,
    .tv-replica-bottom-trust span + span {
        border-left: 0 !important;
        border-top: 1px solid rgba(118, 170, 255, .20) !important;
    }

    .tv-replica-category-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tv-replica-popular-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tv-replica-bottom-trust {
        margin-left: -20px;
        margin-right: -20px;
    }
}

@media (max-width: 620px) {
    .tv-command-home {
        padding: 10px !important;
    }

    .tv-command-home .tv-replica-landing .tv-home-hero-copy h1 {
        font-size: clamp(2.35rem, 12vw, 3.2rem) !important;
    }

    .tv-replica-category-row,
    .tv-replica-popular-row {
        grid-template-columns: 1fr;
    }

    .tv-command-home .tv-replica-landing .tv-orbit-dashboard {
        min-height: 500px !important;
    }

    .tv-command-home .tv-replica-landing .tv-orbit-console {
        inset: 54px 0 42px 0 !important;
        padding: 18px !important;
    }
}

/* Asana-style rollback guard.
   Keeps the current horizontal mega-menu layout and forces the public site back
   to a clean light product UI, even when an old dark theme was cached locally. */
.app,
.app.dark,
.app.light,
body:has(.app) {
    --asana-bg: #fbfaf8;
    --asana-bg-soft: #f4f3ef;
    --asana-surface: #ffffff;
    --asana-surface-2: #f7f8fb;
    --asana-ink: #111827;
    --asana-muted: #5f6675;
    --asana-border: #e7e5df;
    --asana-border-strong: #d8d6ce;
    --asana-blue: #2563eb;
    --asana-coral: #ff6b57;
    --asana-purple: #7c3aed;
    --asana-green: #10b981;
    --asana-radius: 18px;
    --asana-radius-lg: 28px;
    --asana-shadow: 0 18px 46px rgba(17, 24, 39, .08);
    --asana-shadow-hover: 0 28px 70px rgba(17, 24, 39, .13);
    background:
        radial-gradient(circle at 8% 0%, rgba(255, 107, 87, .12), transparent 28vw),
        radial-gradient(circle at 96% 0%, rgba(37, 99, 235, .10), transparent 30vw),
        linear-gradient(180deg, var(--asana-bg), var(--asana-bg-soft)) !important;
    color: var(--asana-ink) !important;
}

.app.dark *,
.app.light * {
    color-scheme: light;
}

.app .mud-layout,
.app .mud-main-content,
.app main,
.main {
    background: transparent !important;
    color: var(--asana-ink) !important;
}

.tv-command-topbar.tv-asana-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
    min-height: 76px !important;
    padding: 12px clamp(18px, 4vw, 64px) !important;
    border-bottom: 1px solid rgba(17, 24, 39, .09) !important;
    background: rgba(255, 255, 255, .88) !important;
    color: var(--asana-ink) !important;
    box-shadow: 0 10px 28px rgba(17, 24, 39, .06) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
}

.tv-asana-brand,
.tv-asana-menu-item > summary,
.tv-asana-action-link,
.tv-asana-mobile-menu,
.tv-sticky-filter-button,
.tv-sticky-search-clear {
    color: var(--asana-ink) !important;
}

.tv-asana-menu-item > summary:hover,
.tv-asana-menu-item[open] > summary,
.tv-asana-action-link:hover,
.tv-asana-mobile-menu:hover,
.tv-sticky-filter-button:hover,
.tv-sticky-search-clear:hover {
    background: rgba(37, 99, 235, .08) !important;
    color: var(--asana-blue) !important;
}

.tv-asana-mega,
.tv-sticky-search-results,
.tv-floating-filter-panel,
.tv-theme-panel,
.tv-bookmark-quick-menu {
    border: 1px solid var(--asana-border) !important;
    background: rgba(255, 255, 255, .96) !important;
    color: var(--asana-ink) !important;
    box-shadow: 0 30px 90px rgba(17, 24, 39, .16) !important;
    backdrop-filter: blur(20px) saturate(145%) !important;
}

.tv-asana-mega a,
.tv-sticky-search-results a,
.tv-floating-filter-panel a,
.tv-theme-panel button {
    color: var(--asana-ink) !important;
}

.tv-sticky-search-box,
.studio-search,
.library-command,
.category-search-card {
    border: 1px solid var(--asana-border) !important;
    background: rgba(255, 255, 255, .94) !important;
    color: var(--asana-ink) !important;
    box-shadow: 0 12px 28px rgba(17, 24, 39, .06) !important;
}

.tv-command-home .tv-replica-landing {
    width: min(100% - 48px, 1680px) !important;
    min-height: auto !important;
    margin: 24px auto 28px !important;
    padding: clamp(54px, 7vw, 112px) clamp(26px, 6vw, 96px) 34px !important;
    border: 1px solid var(--asana-border) !important;
    border-radius: 36px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 82% 18%, rgba(255, 107, 87, .15), transparent 28%),
        radial-gradient(circle at 72% 78%, rgba(37, 99, 235, .12), transparent 31%),
        linear-gradient(135deg, #fffaf6 0%, #ffffff 48%, #f5f7ff 100%) !important;
    box-shadow: var(--asana-shadow) !important;
}

.tv-command-home .tv-replica-landing::before,
.tv-command-home .tv-replica-landing::after {
    opacity: .28 !important;
}

.tv-command-home .tv-replica-landing .tv-home-hero-copy h1 {
    max-width: 760px !important;
    color: var(--asana-ink) !important;
    font-size: clamp(3.25rem, 6vw, 6.8rem) !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

.tv-command-home .tv-replica-landing .tv-gradient-text {
    background: linear-gradient(90deg, var(--asana-coral), var(--asana-purple), var(--asana-blue)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

.tv-command-home .tv-replica-landing .tv-home-hero-copy p {
    color: #4b5563 !important;
    font-size: clamp(1.08rem, 1.25vw, 1.32rem) !important;
    line-height: 1.58 !important;
}

.tv-command-home .tv-replica-landing .tv-home-actions .mud-button-root,
.mud-button-root {
    border-radius: 999px !important;
    text-transform: none !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

.tv-command-home .tv-replica-landing .tv-home-actions .mud-button-filled-primary,
.mud-button-filled-primary:not(.mud-button-disabled) {
    background: linear-gradient(135deg, var(--asana-ink), #374151) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 34px rgba(17, 24, 39, .18) !important;
}

.tv-command-home .tv-replica-landing .tv-home-actions .mud-button-outlined-primary,
.mud-button-outlined-primary:not(.mud-button-disabled) {
    border-color: var(--asana-border-strong) !important;
    background: #ffffff !important;
    color: var(--asana-ink) !important;
}

.tv-orbit-console,
.tv-orbit-card,
.tv-orbit-search,
.tv-orbit-tool-tile,
.tv-orbit-chart,
.tv-replica-trust-row,
.tv-replica-category-card,
.tv-replica-tool-card,
.tv-replica-bottom-trust {
    border: 1px solid var(--asana-border) !important;
    background: rgba(255, 255, 255, .86) !important;
    color: var(--asana-ink) !important;
    box-shadow: var(--asana-shadow) !important;
}

.tv-orbit-tool-tile svg,
.tv-orbit-card svg,
.tv-replica-category-card svg,
.tv-replica-tool-card svg {
    color: var(--asana-blue) !important;
}

.tv-replica-category-card b,
.tv-replica-tool-card b,
.tv-home-trust-row b,
.tv-section-heading h2,
.tv-popular-card b,
.tv-onepage-category-card h3,
.tool-head h1,
.library-hero h1,
.category-market-hero h1,
.legal-hero h1,
.info-hero h1,
.blog-hero h1,
.blog-article-hero h1 {
    color: var(--asana-ink) !important;
}

.tv-replica-category-card small,
.tv-replica-tool-card small,
.tv-home-trust-row small,
.tv-section-heading p,
.tv-popular-card small,
.tv-onepage-tool-copy small,
.tool-head p,
.library-hero p,
.category-market-hero p,
.legal-hero p,
.info-hero p,
.blog-hero p,
.blog-article-hero p {
    color: var(--asana-muted) !important;
}

.studio-search-hero,
.library-hero,
.category-market-hero,
.blog-hero,
.blog-article-hero,
.legal-hero,
.info-hero,
.tool-head,
.home-bookmarks-card,
.tv-command-home .tv-home-section,
.tv-command-home .tv-onepage-tool-map,
.mud-tool-command,
.mud-tool-groups,
.tv-category-room,
.category-readable-card,
.tool-panel,
.calc-card,
.how-to,
.related,
.tool-content-section,
.tool-meta-grid article,
.tool-faq-list article,
.legal-card,
.legal-panel,
.info-card,
.blog-card,
.tcard,
.market-tool-card,
.tool-tree,
.catcard,
.tcard-sm,
.tv-popular-card,
.tv-onepage-category-card,
.tv-onepage-tool-card,
.tv-why-grid article,
.result-card,
.tool-step-card,
.pdf-panel,
.webhook-card,
.auth-card,
.panel-card,
.mud-card {
    border: 1px solid var(--asana-border) !important;
    border-radius: var(--asana-radius-lg) !important;
    background: rgba(255, 255, 255, .92) !important;
    color: var(--asana-ink) !important;
    box-shadow: var(--asana-shadow) !important;
}

.tcard:hover,
.market-tool-card:hover,
.tv-popular-card:hover,
.tv-onepage-tool-card:hover,
.tv-category-room:hover,
.category-readable-card:hover,
.blog-card:hover,
.studio-category-card:hover,
.tv-replica-category-card:hover,
.tv-replica-tool-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--asana-border-strong) !important;
    box-shadow: var(--asana-shadow-hover) !important;
}

.app input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.app textarea,
.app select,
.app .ta,
.app .mud-input-slot,
.app .mud-input-root,
.app .mud-input-outlined {
    border-color: var(--asana-border) !important;
    background: #ffffff !important;
    color: var(--asana-ink) !important;
}

.footer,
.site-footer,
.app-footer,
.footer-wrap {
    border-top: 1px solid var(--asana-border) !important;
    background: #ffffff !important;
    color: var(--asana-ink) !important;
}

/* Full app white and blue DaivVerse theme. */
.app.light,
.app.theme-sky,
.app.theme-ocean,
.app {
    --dv-blue-bg: #f7fbff;
    --dv-blue-soft: #eef6ff;
    --dv-blue-surface: rgba(255, 255, 255, .94);
    --dv-blue-surface-strong: #ffffff;
    --dv-blue-ink: #07111f;
    --dv-blue-muted: #5f7088;
    --dv-blue-line: #dbeafe;
    --dv-blue-line-strong: #93c5fd;
    --dv-blue-primary: #2563eb;
    --dv-blue-cyan: #06b6d4;
    --dv-blue-teal: #14b8a6;
    color: var(--dv-blue-ink) !important;
    background:
        radial-gradient(circle at 86% 6%, rgba(37, 99, 235, .16), transparent 28%),
        radial-gradient(circle at 12% 22%, rgba(6, 182, 212, .12), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 42%, #eef6ff 100%) !important;
}

.app.light .main,
.app.theme-sky .main,
.app.theme-ocean .main,
.app .main {
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, .11), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 54%, #eef6ff 100%) !important;
    color: var(--dv-blue-ink) !important;
}

.app.light .tv-command-topbar.tv-asana-topbar,
.app.theme-sky .tv-command-topbar.tv-asana-topbar,
.app.theme-ocean .tv-command-topbar.tv-asana-topbar,
.app .tv-command-topbar.tv-asana-topbar {
    border: 1px solid rgba(37, 99, 235, .14) !important;
    background: rgba(255, 255, 255, .92) !important;
    color: var(--dv-blue-ink) !important;
    box-shadow: 0 18px 48px rgba(37, 99, 235, .10), inset 0 1px 0 rgba(255, 255, 255, .86) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
}

.app .tv-asana-brand,
.app .tv-asana-menu summary,
.app .tv-asana-action-link,
.app .nav-link,
.app .mud-nav-link {
    color: var(--dv-blue-ink) !important;
}

.app .tv-asana-brand-mark,
.app .tv-asana-menu summary,
.app .tv-asana-action-link,
.app .tv-sticky-search-box,
.app .tv-sticky-filter-button,
.app .tv-asana-mobile-menu,
.app .icon-button,
.app .mud-icon-button,
.app .mud-chip-root {
    border-color: rgba(37, 99, 235, .14) !important;
    background: rgba(255, 255, 255, .88) !important;
    color: var(--dv-blue-primary) !important;
}

.app .tv-asana-brand-mark {
    background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(6, 182, 212, .14)) !important;
    border-color: rgba(37, 99, 235, .20) !important;
    box-shadow: 0 12px 30px rgba(37, 99, 235, .14) !important;
}

.app .tv-asana-menu summary:hover,
.app .tv-asana-menu details[open] summary,
.app .tv-asana-action-link:hover,
.app .mud-button-root:hover {
    border-color: rgba(37, 99, 235, .26) !important;
    background: #eef6ff !important;
    box-shadow: 0 14px 32px rgba(37, 99, 235, .12) !important;
}

.app .tv-asana-mega,
.app .tv-sticky-search-results,
.app .tv-floating-filter-panel,
.app .tv-theme-panel,
.app .mud-popover,
.app .mud-menu {
    border-color: rgba(37, 99, 235, .16) !important;
    background: rgba(255, 255, 255, .98) !important;
    color: var(--dv-blue-ink) !important;
    box-shadow: 0 28px 72px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255, 255, 255, .88) !important;
}

.app .tv-asana-mega a,
.app .tv-sticky-search-results a {
    color: var(--dv-blue-ink) !important;
}

.app .tv-asana-mega p,
.app .tv-asana-mega small,
.app .tv-sticky-search-results small,
.app p,
.app small,
.app .mud-typography-body2,
.app .mud-typography-caption,
.app .muted,
.app .text-muted {
    color: var(--dv-blue-muted) !important;
}

.app h1,
.app h2,
.app h3,
.app h4,
.app h5,
.app h6,
.app b,
.app strong,
.app .mud-typography-h1,
.app .mud-typography-h2,
.app .mud-typography-h3,
.app .mud-typography-h4 {
    color: var(--dv-blue-ink) !important;
}

.app .studio-section,
.app .tool-panel,
.app .tool-card,
.app .tool-step-card,
.app .tcard,
.app .tcard-sm,
.app .market-tool-card,
.app .catcard,
.app .category-readable-card,
.app .category-search-card,
.app .category-market-hero,
.app .blog-card,
.app .guide-card,
.app .info-card,
.app .result-card,
.app .pdf-panel,
.app .webhook-card,
.app .auth-card,
.app .panel-card,
.app .privacy-band,
.app .tv-home-section,
.app .tv-onepage-tool-map,
.app .mud-card,
.app .mud-paper:not(.mud-popover):not(.mud-dialog) {
    border: 1px solid rgba(37, 99, 235, .14) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(6, 182, 212, .08), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .92)) !important;
    color: var(--dv-blue-ink) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .86) !important;
    backdrop-filter: blur(10px) saturate(140%) !important;
}

.app .studio-section:hover,
.app .tool-card:hover,
.app .tcard:hover,
.app .market-tool-card:hover,
.app .catcard:hover,
.app .category-readable-card:hover,
.app .blog-card:hover,
.app .guide-card:hover {
    border-color: rgba(37, 99, 235, .30) !important;
    box-shadow: 0 24px 64px rgba(37, 99, 235, .14) !important;
}

.app input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.app textarea,
.app select,
.app code,
.app pre,
.app .ta,
.app .mud-input-root,
.app .mud-input-slot,
.app .mud-input-outlined,
.app .mud-input-control,
.app .mud-select,
.app .mud-table,
.app .mud-table-container {
    border-color: rgba(37, 99, 235, .16) !important;
    background: #ffffff !important;
    color: var(--dv-blue-ink) !important;
}

.app input::placeholder,
.app textarea::placeholder,
.app .mud-input-label,
.app .mud-input-helper-text,
.app .mud-table-cell,
.app .mud-table-head .mud-table-cell {
    color: var(--dv-blue-muted) !important;
}

.app .mud-input-root:focus-within,
.app input:focus,
.app textarea:focus,
.app select:focus,
.app .mud-button-root:focus-visible,
.app a:focus-visible,
.app button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .18) !important;
    outline-offset: 2px !important;
    border-color: rgba(37, 99, 235, .42) !important;
}

.app .mud-button-filled-primary,
.app .btn-primary,
.app .primary-button,
.app .tool-primary-action {
    border: 1px solid rgba(37, 99, 235, .18) !important;
    background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 58%, #06b6d4 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 38px rgba(37, 99, 235, .22) !important;
}

.app .mud-button-outlined-primary,
.app .btn-secondary,
.app .secondary-button {
    border-color: rgba(37, 99, 235, .22) !important;
    background: rgba(255, 255, 255, .82) !important;
    color: var(--dv-blue-primary) !important;
}

.app .mud-alert,
.app .alert,
.app .validation-message {
    border-color: rgba(37, 99, 235, .16) !important;
    background: rgba(239, 246, 255, .92) !important;
    color: var(--dv-blue-ink) !important;
}

.app .footer,
.app .site-footer,
.app .app-footer,
.app .footer-wrap {
    border-top: 1px solid rgba(37, 99, 235, .14) !important;
    background: #ffffff !important;
    color: var(--dv-blue-ink) !important;
}

.app .footer a,
.app .site-footer a,
.app .app-footer a {
    color: var(--dv-blue-muted) !important;
}

.app .footer a:hover,
.app .site-footer a:hover,
.app .app-footer a:hover {
    color: var(--dv-blue-primary) !important;
}

.tv-command-home .tv-replica-landing {
    background:
        radial-gradient(circle at 86% 18%, rgba(37, 99, 235, .16), transparent 28%),
        radial-gradient(circle at 15% 60%, rgba(6, 182, 212, .12), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #f8fbff 48%, #eef6ff 100%) !important;
}

/* DaivVerse reference homepage and full-app dark SaaS shell. This block is intentionally last. */
:root {
    --bg-primary: #07091A;
    --bg-deep: #020617;
    --bg-panel: #0D1027;
    --bg-card: rgba(13, 16, 39, .78);
    --bg-card-hover: #111435;
    --accent-teal: #00D4AA;
    --accent-cyan: #22D3EE;
    --accent-blue: #3B82F6;
    --accent-purple: #8B5CF6;
    --accent-amber: #FBBF24;
    --accent-pink: #F472B6;
    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --text-soft: #CBD5E1;
    --border-subtle: rgba(255, 255, 255, .08);
    --border-glow: rgba(0, 212, 170, .3);
    --glow: rgba(0, 212, 170, .15);
    --shadow-glow: 0 24px 80px rgba(0, 212, 170, .15), 0 18px 60px rgba(37, 99, 235, .12);
}

html,
body,
body:has(.app) {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.app,
.app.light,
.app.dark,
.app.theme-sky,
.app.theme-ocean,
.app.theme-neon,
.app.theme-midnight,
.app.theme-obsidian {
    --dv-page-bg: var(--bg-primary);
    --dv-surface: var(--bg-card);
    --dv-ink: var(--text-primary);
    --dv-muted: var(--text-secondary);
    --dv-line: var(--border-subtle);
    color-scheme: dark !important;
    background:
        radial-gradient(circle at 12% -8%, rgba(37, 99, 235, .22), transparent 28vw),
        radial-gradient(circle at 92% 5%, rgba(0, 212, 170, .13), transparent 24vw),
        radial-gradient(circle at 70% 82%, rgba(139, 92, 246, .14), transparent 28vw),
        linear-gradient(180deg, #07091A 0%, #020617 58%, #071426 100%) !important;
    color: var(--text-primary) !important;
    font-family: "DM Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.app .mud-layout,
.app .mud-main-content,
.app main,
.main {
    background: transparent !important;
    color: var(--text-primary) !important;
}

.app h1,
.app h2,
.app h3,
.app h4,
.app h5,
.app h6,
.app b,
.app strong,
.app .mud-typography-h1,
.app .mud-typography-h2,
.app .mud-typography-h3,
.app .mud-typography-h4 {
    color: var(--text-primary) !important;
    font-family: "Plus Jakarta Sans", "DM Sans", Inter, system-ui, sans-serif !important;
}

.app p,
.app small,
.app .mud-typography-body2,
.app .mud-typography-caption,
.app .muted,
.app .text-muted {
    color: var(--text-secondary) !important;
}

.tv-command-topbar.tv-asana-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
    min-height: 78px !important;
    padding: 14px clamp(22px, 4.5vw, 72px) !important;
    border: 0 !important;
    border-bottom: 0 !important;
    background: rgba(3, 8, 28, .82) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
}

.tv-asana-brand {
    gap: 12px !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    letter-spacing: -.02em !important;
}

.tv-asana-brand-mark {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid rgba(34, 211, 238, .24) !important;
    background: linear-gradient(145deg, rgba(14, 165, 233, .22), rgba(0, 212, 170, .12)) !important;
    box-shadow: 0 0 24px rgba(34, 211, 238, .18) !important;
}

.tv-asana-menu {
    gap: 8px !important;
    min-width: 0 !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
}

.tv-command-topbar.tv-asana-topbar {
    overflow: visible !important;
}

.tv-asana-menu-item {
    flex: 0 0 auto !important;
}

.tv-asana-menu-item > summary,
.tv-asana-action-link,
.tv-asana-mobile-menu,
.tv-sticky-filter-button,
.tv-sticky-search-clear,
.tv-sticky-theme-button,
.tv-replica-theme-toggle {
    border: 1px solid transparent !important;
    background: transparent !important;
    color: rgba(241, 245, 249, .92) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.tv-asana-menu-item > summary:hover,
.tv-asana-menu-item[open] > summary,
.tv-asana-action-link:hover,
.tv-asana-mobile-menu:hover,
.tv-sticky-filter-button:hover,
.tv-sticky-search-clear:hover,
.tv-sticky-theme-button:hover,
.tv-replica-theme-toggle:hover {
    border-color: rgba(34, 211, 238, .18) !important;
    background: rgba(14, 23, 53, .92) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 32px rgba(34, 211, 238, .10) !important;
}

.tv-asana-actions {
    gap: 10px !important;
}

.tv-asana-action-link span {
    display: none !important;
}

.tv-sticky-search-box {
    min-width: 52px !important;
    width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    justify-content: center !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    border-radius: 14px !important;
    background: rgba(10, 18, 44, .84) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .18) !important;
}

.tv-sticky-search-box .mud-input-control,
.tv-sticky-search-box .mud-input-root,
.tv-sticky-search-box .mud-input-slot {
    width: 0 !important;
    min-width: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

.tv-sticky-search-box:focus-within,
.tv-sticky-search-wrap:hover .tv-sticky-search-box {
    width: min(360px, 34vw) !important;
    padding: 0 10px 0 16px !important;
    justify-content: flex-start !important;
}

.tv-sticky-search-box:focus-within .mud-input-control,
.tv-sticky-search-wrap:hover .tv-sticky-search-box .mud-input-control,
.tv-sticky-search-box:focus-within .mud-input-root,
.tv-sticky-search-wrap:hover .tv-sticky-search-box .mud-input-root,
.tv-sticky-search-box:focus-within .mud-input-slot,
.tv-sticky-search-wrap:hover .tv-sticky-search-box .mud-input-slot {
    width: 100% !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.tv-asana-mega,
.tv-sticky-search-results,
.tv-floating-filter-panel,
.tv-theme-panel,
.mud-popover,
.mud-menu,
.tv-bookmark-quick-menu {
    border: 1px solid rgba(96, 165, 250, .18) !important;
    border-radius: 22px !important;
    background: rgba(8, 13, 35, .96) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .38), 0 0 40px rgba(37, 99, 235, .10) !important;
    backdrop-filter: blur(22px) saturate(145%) !important;
}

.tv-command-topbar .tv-asana-mega {
    left: clamp(16px, 4.5vw, 72px) !important;
    right: clamp(16px, 4.5vw, 72px) !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.tv-command-topbar .tv-asana-more-mega {
    width: auto !important;
    max-width: none !important;
}

.tv-command-topbar .tv-asana-mega-grid {
    min-width: 0 !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}

.tv-command-topbar .tv-asana-mega-grid section,
.tv-command-topbar .tv-asana-mega-grid a {
    min-width: 0 !important;
    max-width: 100% !important;
}

.tv-asana-mega a,
.tv-sticky-search-results a,
.tv-floating-filter-panel a,
.tv-theme-panel button {
    color: var(--text-primary) !important;
}

.tv-asana-mega a:hover,
.tv-sticky-search-results a:hover {
    background: rgba(0, 212, 170, .08) !important;
    color: #ffffff !important;
}

.tv-command-home {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    background:
        radial-gradient(circle at 4% 22%, rgba(37, 99, 235, .20), transparent 26vw),
        radial-gradient(circle at 90% 18%, rgba(0, 212, 170, .13), transparent 20vw),
        linear-gradient(180deg, #07091A 0%, #020617 100%) !important;
}

.tv-command-home .tv-replica-landing {
    width: 100% !important;
    min-height: calc(100vh - 78px) !important;
    margin: 0 !important;
    padding: clamp(44px, 5vw, 72px) clamp(22px, 6vw, 96px) 0 !important;
    display: grid !important;
    grid-template-columns: minmax(420px, .92fr) minmax(520px, 1fr) !important;
    grid-template-areas:
        "copy visual"
        "trust trust"
        "categories categories"
        "popularHead popularHead"
        "popular popular"
        "bottom bottom" !important;
    gap: 26px 46px !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 84% 26%, rgba(37, 99, 235, .34), transparent 23%),
        radial-gradient(circle at 72% 38%, rgba(0, 212, 170, .16), transparent 26%),
        radial-gradient(circle at 20% 22%, rgba(59, 130, 246, .16), transparent 26%),
        linear-gradient(145deg, #07091A 0%, #020617 52%, #071426 100%) !important;
    box-shadow: none !important;
}

.tv-command-home .tv-replica-landing::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    opacity: .68 !important;
    background:
        linear-gradient(115deg, transparent 0 17%, rgba(37, 99, 235, .16) 18%, transparent 26%),
        linear-gradient(130deg, transparent 0 12%, rgba(34, 211, 238, .10) 13%, transparent 22%),
        radial-gradient(circle at 77% 23%, rgba(34, 211, 238, .46) 0 2px, transparent 3px),
        radial-gradient(circle at 82% 35%, rgba(0, 212, 170, .52) 0 2px, transparent 3px),
        radial-gradient(circle at 68% 18%, rgba(59, 130, 246, .48) 0 2px, transparent 3px);
    pointer-events: none !important;
}

.tv-replica-bg-lines {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
        radial-gradient(ellipse at 80% 44%, transparent 0 34%, rgba(34, 211, 238, .24) 35%, transparent 36%),
        radial-gradient(ellipse at 80% 44%, transparent 0 40%, rgba(37, 99, 235, .18) 41%, transparent 42%),
        linear-gradient(90deg, rgba(59, 130, 246, .05) 1px, transparent 1px),
        linear-gradient(0deg, rgba(59, 130, 246, .04) 1px, transparent 1px) !important;
    background-size: auto, auto, 80px 80px, 80px 80px !important;
    opacity: .72 !important;
}

.tv-command-home .tv-replica-landing .tv-home-hero-copy {
    grid-area: copy !important;
    position: relative !important;
    z-index: 3 !important;
    align-self: center !important;
    padding: 18px 0 10px !important;
}

.tv-command-home .tv-replica-landing .tv-home-hero-copy h1 {
    max-width: 750px !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-family: "Plus Jakarta Sans", "DM Sans", Inter, system-ui, sans-serif !important;
    font-size: clamp(3.4rem, 5.4vw, 5.7rem) !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
    font-weight: 900 !important;
    text-shadow: 0 18px 54px rgba(0, 0, 0, .30) !important;
}

.tv-command-home .tv-replica-landing .tv-gradient-text {
    display: inline !important;
    background: linear-gradient(90deg, #38BDF8 0%, #3B82F6 45%, #00D4AA 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

.tv-command-home .tv-replica-landing .tv-home-hero-copy p {
    max-width: 690px !important;
    margin: 26px 0 0 !important;
    color: #CBD5E1 !important;
    font-size: clamp(1.08rem, 1.22vw, 1.35rem) !important;
    line-height: 1.55 !important;
}

.tv-command-home .tv-replica-landing .tv-home-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
    margin-top: 30px !important;
}

.tv-command-home .tv-replica-landing .tv-home-actions .mud-button-root {
    min-width: 190px !important;
    min-height: 58px !important;
    border-radius: 14px !important;
    text-transform: none !important;
    font-size: 1.04rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

.tv-command-home .tv-replica-landing .tv-home-actions .mud-button-filled-primary {
    border: 1px solid rgba(34, 211, 238, .28) !important;
    background: linear-gradient(135deg, #3B82F6 0%, #22D3EE 50%, #00D4AA 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 40px rgba(0, 212, 170, .24), 0 0 32px rgba(59, 130, 246, .22) !important;
}

.tv-command-home .tv-replica-landing .tv-home-actions .mud-button-outlined-primary {
    border: 1px solid rgba(148, 163, 184, .20) !important;
    background: rgba(3, 8, 28, .66) !important;
    color: #ffffff !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-dashboard {
    grid-area: visual !important;
    position: relative !important;
    z-index: 2 !important;
    min-height: 480px !important;
    align-self: center !important;
    overflow: visible !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-console {
    position: absolute !important;
    inset: 44px 10% 42px 14% !important;
    padding: 24px !important;
    border: 1px solid rgba(96, 165, 250, .30) !important;
    border-radius: 26px !important;
    background: linear-gradient(155deg, rgba(30, 41, 93, .84), rgba(8, 13, 35, .76)) !important;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .42), 0 0 60px rgba(59, 130, 246, .22), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    animation: dvHeroRise .7s ease both !important;
    overflow: visible !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-search,
.tv-command-home .tv-replica-landing .tv-orbit-tool-tile,
.tv-command-home .tv-replica-landing .tv-orbit-chart,
.tv-command-home .tv-replica-landing .tv-orbit-card {
    border: 1px solid rgba(96, 165, 250, .18) !important;
    background: rgba(15, 23, 60, .78) !important;
    color: #F8FAFC !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

.tv-orbit-search-wrap {
    position: relative !important;
    z-index: 200 !important;
    isolation: isolate !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-search {
    height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border-radius: 14px !important;
    padding: 0 14px 0 16px !important;
    color: #94A3B8 !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-search input {
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #F8FAFC !important;
    font: inherit !important;
    font-size: .95rem !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-search input::placeholder {
    color: #94A3B8 !important;
    opacity: 1 !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-search:focus-within {
    border-color: rgba(0, 212, 170, .42) !important;
    box-shadow: 0 0 0 4px rgba(0, 212, 170, .10), 0 16px 48px rgba(0, 0, 0, .20) !important;
}

.tv-orbit-filter-link {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 1px solid rgba(34, 211, 238, .16) !important;
    border-radius: 10px !important;
    background: rgba(0, 212, 170, .08) !important;
    color: #22D3EE !important;
    text-decoration: none !important;
    transition: transform .18s ease, border-color .18s ease, background .18s ease !important;
}

.tv-orbit-filter-link:hover,
.tv-orbit-filter-link:focus-visible {
    transform: translateY(-1px) !important;
    border-color: rgba(0, 212, 170, .38) !important;
    background: rgba(0, 212, 170, .15) !important;
    outline: none !important;
}

.tv-orbit-filter-link svg {
    width: 20px !important;
    height: 20px !important;
}

.tv-orbit-search-results {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 10px) !important;
    z-index: 999 !important;
    display: grid !important;
    gap: 8px !important;
    max-height: 315px !important;
    overflow: auto !important;
    padding: 10px !important;
    border: 1px solid rgba(96, 165, 250, .22) !important;
    border-radius: 16px !important;
    background: rgba(5, 12, 31, .96) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .38), 0 0 34px rgba(34, 211, 238, .10) !important;
    backdrop-filter: blur(18px) saturate(145%) !important;
}

.tv-orbit-search-results a {
    display: grid !important;
    grid-template-columns: 42px 1fr !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 10px !important;
    border-radius: 12px !important;
    color: #F8FAFC !important;
    text-decoration: none !important;
}

.tv-orbit-search-results a:hover,
.tv-orbit-search-results a:focus-visible {
    background: rgba(0, 212, 170, .10) !important;
    outline: none !important;
}

.tv-orbit-search-results a > span:first-child {
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: rgba(37, 99, 235, .24) !important;
}

.tv-orbit-search-results svg {
    color: #22D3EE !important;
}

.tv-orbit-search-results b {
    display: block !important;
    color: #ffffff !important;
    font-size: .92rem !important;
    line-height: 1.2 !important;
}

.tv-orbit-search-results small,
.tv-orbit-search-results p {
    margin: 0 !important;
    color: #94A3B8 !important;
    line-height: 1.35 !important;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.tv-orbit-tool-row {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 12px 0 18px !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-tool-tile {
    min-height: 54px !important;
    display: grid !important;
    place-items: center !important;
    gap: 4px !important;
    padding: 7px 5px !important;
    border-radius: 13px !important;
    text-decoration: none !important;
    background: linear-gradient(135deg, rgba(34, 211, 238, .12), rgba(59, 130, 246, .07)) !important;
    border-color: rgba(96, 165, 250, .20) !important;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-tool-tile:hover,
.tv-command-home .tv-replica-landing .tv-orbit-tool-tile:focus-visible {
    transform: translateY(-2px) !important;
    border-color: rgba(34, 211, 238, .45) !important;
    background: linear-gradient(135deg, rgba(34, 211, 238, .18), rgba(139, 92, 246, .10)) !important;
    box-shadow: 0 12px 28px rgba(34, 211, 238, .13) !important;
    outline: none !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-tool-tile svg {
    width: 19px !important;
    height: 19px !important;
    color: #22D3EE !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-tool-tile span {
    color: #F8FAFC !important;
    font-size: .58rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-chart {
    position: relative !important;
    min-height: 164px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background:
        linear-gradient(90deg, rgba(59, 130, 246, .08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(59, 130, 246, .08) 1px, transparent 1px),
        rgba(8, 13, 35, .78) !important;
    background-size: 44px 44px !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-chart svg {
    position: absolute !important;
    inset: 16px 18px auto !important;
    width: calc(100% - 36px) !important;
    height: 126px !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-chart path {
    fill: none !important;
    stroke: url(#orbitLine) !important;
    stroke-width: 7 !important;
    stroke-linecap: round !important;
    filter: drop-shadow(0 0 12px rgba(34, 211, 238, .35)) !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-chart circle {
    fill: #22D3EE !important;
}

.tv-orbit-bars {
    position: absolute !important;
    right: 20px !important;
    bottom: 18px !important;
    display: flex !important;
    align-items: end !important;
    gap: 12px !important;
    height: 96px !important;
}

.tv-orbit-bars span {
    width: 13px !important;
    border-radius: 99px !important;
    background: linear-gradient(180deg, #8B5CF6, #2563EB) !important;
    box-shadow: 0 0 20px rgba(139, 92, 246, .28) !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-card {
    position: absolute !important;
    z-index: 5 !important;
    border-radius: 20px !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-card-shield {
    left: 2% !important;
    top: 30% !important;
    width: 112px !important;
    height: 112px !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(145deg, rgba(37, 99, 235, .46), rgba(15, 23, 42, .78)) !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-card-shield svg,
.tv-command-home .tv-replica-landing .tv-orbit-card-globe svg {
    width: 62px !important;
    height: 62px !important;
    color: #22D3EE !important;
    filter: drop-shadow(0 0 20px rgba(34, 211, 238, .32)) !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-card-globe {
    right: 5% !important;
    top: 2% !important;
    width: 96px !important;
    height: 96px !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(145deg, rgba(37, 99, 235, .34), rgba(15, 23, 42, .80)) !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-card-ssl {
    right: 1% !important;
    bottom: 20% !important;
    min-width: 190px !important;
    padding: 18px 20px !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-card-ssl span {
    color: #ffffff !important;
    font-weight: 800 !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-card-ssl strong {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 12px !important;
    color: #34D399 !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-card-ssl strong::after {
    content: "›";
    margin-left: 26px;
    color: #CBD5E1;
    font-size: 1.6rem;
    line-height: 1;
}

.tv-command-home .tv-replica-landing .tv-orbit-card-code {
    left: 10% !important;
    bottom: 8% !important;
    width: 220px !important;
    padding: 18px !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-card-code span {
    display: block !important;
    height: 7px !important;
    margin: 8px 0 !important;
    border-radius: 99px !important;
    background: rgba(37, 99, 235, .52) !important;
}

.tv-orbit-glow {
    position: absolute !important;
    border-radius: 999px !important;
    pointer-events: none !important;
}

.tv-orbit-glow-one {
    width: 420px !important;
    height: 420px !important;
    right: 5% !important;
    top: 8% !important;
    border: 2px solid rgba(34, 211, 238, .30) !important;
    box-shadow: 0 0 34px rgba(34, 211, 238, .26), inset 0 0 24px rgba(37, 99, 235, .16) !important;
    transform: rotate(-18deg) skewX(-18deg) !important;
    opacity: .76 !important;
}

.tv-orbit-glow-two {
    width: 560px !important;
    height: 130px !important;
    right: 1% !important;
    bottom: 25% !important;
    border: 3px solid rgba(34, 211, 238, .26) !important;
    box-shadow: 0 0 34px rgba(34, 211, 238, .25) !important;
    transform: rotate(-8deg) !important;
}

.tv-replica-trust-row {
    grid-area: trust !important;
    position: relative !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 2px auto 0 !important;
    width: min(100%, 1380px) !important;
    border: 1px solid rgba(96, 165, 250, .22) !important;
    border-radius: 25px !important;
    background: rgba(10, 18, 44, .76) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    overflow: hidden !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
}

.tv-replica-trust-row span {
    min-height: 86px !important;
    display: grid !important;
    grid-template-columns: 56px 1fr !important;
    align-items: center !important;
    column-gap: 18px !important;
    padding: 18px clamp(18px, 3vw, 40px) !important;
}

.tv-replica-trust-row span + span {
    border-left: 1px solid rgba(96, 165, 250, .18) !important;
}

.tv-replica-trust-row svg {
    grid-row: span 2 !important;
    width: 44px !important;
    height: 44px !important;
    padding: 10px !important;
    border-radius: 999px !important;
    background: rgba(37, 99, 235, .22) !important;
    color: #22D3EE !important;
    box-shadow: 0 0 24px rgba(34, 211, 238, .18) !important;
}

.tv-replica-trust-row b {
    color: #ffffff !important;
    font-size: 1.08rem !important;
}

.tv-replica-trust-row small {
    color: #94A3B8 !important;
    line-height: 1.35 !important;
}

.tv-replica-category-row {
    grid-area: categories !important;
    position: relative !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: min(100%, 1480px) !important;
    margin: 0 auto !important;
}

.tv-replica-category-card,
.tv-replica-tool-card {
    position: relative !important;
    display: grid !important;
    align-content: start !important;
    gap: 12px !important;
    border: 1px solid rgba(96, 165, 250, .20) !important;
    border-radius: 12px !important;
    background: var(--bg-card) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
    overflow: hidden !important;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease !important;
}

.tv-replica-category-card:hover,
.tv-replica-tool-card:hover {
    background: var(--bg-card-hover) !important;
    border-color: rgba(0, 212, 170, .3) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 20px 56px rgba(0, 212, 170, .12), 0 18px 56px rgba(37, 99, 235, .14) !important;
}

.tv-replica-category-card {
    min-height: 178px !important;
    padding: 22px 22px 18px !important;
}

.tv-replica-category-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    opacity: .80 !important;
    background: radial-gradient(circle at 20% 0%, rgba(59, 130, 246, .28), transparent 48%) !important;
}

.tv-replica-category-card > * {
    position: relative !important;
    z-index: 1 !important;
}

.tv-replica-category-card > span,
.tv-replica-tool-icon {
    width: 58px !important;
    height: 58px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(37, 99, 235, .78), rgba(34, 211, 238, .34)) !important;
    box-shadow: 0 0 28px rgba(34, 211, 238, .14) !important;
}

.tv-replica-category-card > span svg,
.tv-replica-tool-icon svg {
    width: 33px !important;
    height: 33px !important;
    color: #22D3EE !important;
}

.tv-replica-category-card b,
.tv-replica-tool-card b {
    color: #ffffff !important;
    font-size: 1.02rem !important;
    line-height: 1.2 !important;
}

.tv-replica-category-card small,
.tv-replica-tool-card small {
    color: #CBD5E1 !important;
    line-height: 1.42 !important;
}

.tv-replica-category-card em {
    position: absolute !important;
    right: 18px !important;
    bottom: 16px !important;
    color: #22D3EE !important;
}

.tv-replica-category-card.tone-1 > span {
    background: linear-gradient(135deg, rgba(20, 184, 166, .74), rgba(34, 197, 94, .30)) !important;
}

.tv-replica-category-card.tone-2 > span {
    background: linear-gradient(135deg, rgba(139, 92, 246, .72), rgba(168, 85, 247, .30)) !important;
}

.tv-replica-category-card.tone-3 > span {
    background: linear-gradient(135deg, rgba(244, 114, 182, .70), rgba(239, 68, 68, .28)) !important;
}

.tv-replica-category-card.tone-4 > span {
    background: linear-gradient(135deg, rgba(251, 191, 36, .64), rgba(245, 158, 11, .24)) !important;
}

.tv-replica-category-card.tone-5 > span {
    background: linear-gradient(135deg, rgba(34, 211, 238, .72), rgba(14, 165, 233, .26)) !important;
}

.tv-replica-popular-head {
    grid-area: popularHead !important;
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 18px !important;
    width: min(100%, 1480px) !important;
    margin: -2px auto 0 !important;
}

.tv-replica-popular-head h2 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 1.8rem !important;
    letter-spacing: -.02em !important;
}

.tv-replica-popular-head a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #22D3EE !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

.tv-replica-popular-row {
    grid-area: popular !important;
    position: relative !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: min(100%, 1480px) !important;
    margin: 0 auto !important;
}

.tv-replica-tool-card {
    min-height: 154px !important;
    padding: 18px !important;
}

.tv-replica-star {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    color: rgba(203, 213, 225, .70) !important;
    transition: color .2s ease, transform .2s ease !important;
}

.tv-replica-tool-card:hover .tv-replica-star {
    color: #FBBF24 !important;
    transform: scale(1.08) !important;
}

.tv-replica-tool-card:nth-child(2) .tv-replica-tool-icon {
    background: linear-gradient(135deg, rgba(16, 185, 129, .72), rgba(0, 212, 170, .24)) !important;
}

.tv-replica-tool-card:nth-child(4) .tv-replica-tool-icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, .72), rgba(59, 130, 246, .26)) !important;
}

.tv-replica-tool-card:nth-child(5) .tv-replica-tool-icon {
    background: linear-gradient(135deg, rgba(249, 115, 22, .72), rgba(251, 191, 36, .24)) !important;
}

.tv-replica-tool-card:nth-child(6) .tv-replica-tool-icon {
    background: linear-gradient(135deg, rgba(244, 114, 182, .72), rgba(239, 68, 68, .24)) !important;
}

.tv-replica-tool-card:nth-child(7) .tv-replica-tool-icon {
    background: linear-gradient(135deg, rgba(20, 184, 166, .72), rgba(34, 197, 94, .24)) !important;
}

.tv-replica-bottom-trust {
    grid-area: bottom !important;
    position: relative !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 calc(clamp(22px, 6vw, 96px) * -1) !important;
    border-top: 1px solid rgba(96, 165, 250, .18) !important;
    background: rgba(5, 12, 31, .80) !important;
}

.tv-replica-bottom-trust span {
    min-height: 86px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    padding: 18px 24px !important;
    color: #CBD5E1 !important;
    line-height: 1.28 !important;
}

.tv-replica-bottom-trust span + span {
    border-left: 1px solid rgba(96, 165, 250, .18) !important;
}

.tv-replica-bottom-trust svg {
    width: 38px !important;
    height: 38px !important;
    color: #22D3EE !important;
    filter: drop-shadow(0 0 14px rgba(34, 211, 238, .32)) !important;
}

.app .studio-section,
.app .tool-panel,
.app .tool-card,
.app .tool-step-card,
.app .tcard,
.app .tcard-sm,
.app .market-tool-card,
.app .catcard,
.app .category-readable-card,
.app .category-search-card,
.app .category-market-hero,
.app .blog-card,
.app .guide-card,
.app .info-card,
.app .result-card,
.app .pdf-panel,
.app .webhook-card,
.app .auth-card,
.app .panel-card,
.app .privacy-band,
.app .tv-home-section,
.app .tv-onepage-tool-map,
.app .mud-card,
.app .mud-paper:not(.mud-popover):not(.mud-dialog) {
    border: 1px solid rgba(96, 165, 250, .16) !important;
    background: rgba(13, 16, 39, .76) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
}

.app input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.app textarea,
.app select,
.app code,
.app pre,
.app .ta,
.app .mud-input-root,
.app .mud-input-slot,
.app .mud-input-outlined,
.app .mud-input-control,
.app .mud-select,
.app .mud-table,
.app .mud-table-container {
    border-color: rgba(96, 165, 250, .16) !important;
    background: rgba(2, 6, 23, .70) !important;
    color: var(--text-primary) !important;
}

.app input::placeholder,
.app textarea::placeholder,
.app .mud-input-label,
.app .mud-input-helper-text,
.app .mud-table-cell,
.app .mud-table-head .mud-table-cell {
    color: var(--text-secondary) !important;
}

.app .mud-button-filled-primary,
.app .btn-primary,
.app .primary-button,
.app .tool-primary-action {
    border: 1px solid rgba(34, 211, 238, .22) !important;
    background: linear-gradient(135deg, #3B82F6 0%, #22D3EE 52%, #00D4AA 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 38px rgba(0, 212, 170, .18) !important;
}

.app .mud-button-outlined-primary,
.app .btn-secondary,
.app .secondary-button {
    border-color: rgba(96, 165, 250, .22) !important;
    background: rgba(13, 16, 39, .58) !important;
    color: #F8FAFC !important;
}

.app a:focus-visible,
.app button:focus-visible,
.app input:focus,
.app textarea:focus,
.app select:focus,
.app .mud-input-root:focus-within {
    outline: 3px solid rgba(0, 212, 170, .24) !important;
    outline-offset: 2px !important;
    border-color: rgba(0, 212, 170, .42) !important;
}

.footer,
.site-footer,
.app-footer,
.footer-wrap {
    border-top: 1px solid rgba(96, 165, 250, .16) !important;
    background: rgba(3, 8, 28, .92) !important;
    color: var(--text-primary) !important;
}

@keyframes dvHeroRise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1320px) {
    .tv-command-home .tv-replica-landing {
        grid-template-columns: 1fr 1fr !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    .tv-replica-category-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .tv-replica-popular-row {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1024px) {
    .tv-asana-menu,
    .tv-asana-action-link {
        display: none !important;
    }

    .tv-command-home .tv-replica-landing {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "copy"
            "visual"
            "trust"
            "categories"
            "popularHead"
            "popular"
            "bottom" !important;
    }

    .tv-command-home .tv-replica-landing .tv-orbit-dashboard {
        min-height: 430px !important;
    }

    .tv-replica-trust-row,
    .tv-replica-bottom-trust {
        grid-template-columns: 1fr !important;
    }

    .tv-replica-trust-row span + span,
    .tv-replica-bottom-trust span + span {
        border-left: 0 !important;
        border-top: 1px solid rgba(96, 165, 250, .18) !important;
    }
}

@media (max-width: 760px) {
    .tv-command-topbar.tv-asana-topbar {
        padding: 12px 16px !important;
    }

    .tv-asana-menu,
    .tv-asana-action-link {
        display: none !important;
    }

    .tv-command-home .tv-replica-landing {
        padding: 34px 18px 0 !important;
        gap: 22px !important;
    }

    .tv-command-home .tv-replica-landing .tv-home-hero-copy h1 {
        font-size: clamp(2.6rem, 12vw, 3.8rem) !important;
    }

    .tv-command-home .tv-replica-landing .tv-home-actions .mud-button-root {
        width: 100% !important;
    }

    .tv-command-home .tv-replica-landing .tv-orbit-dashboard {
        min-height: 390px !important;
    }

    .tv-command-home .tv-replica-landing .tv-orbit-console {
        inset: 32px 0 32px 0 !important;
        padding: 16px !important;
    }

    .tv-orbit-tool-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .tv-command-home .tv-replica-landing .tv-orbit-card-shield,
    .tv-command-home .tv-replica-landing .tv-orbit-card-globe,
    .tv-command-home .tv-replica-landing .tv-orbit-card-code {
        display: none !important;
    }

    .tv-command-home .tv-replica-landing .tv-orbit-card-ssl {
        right: 8px !important;
        bottom: 12px !important;
        min-width: 166px !important;
    }

    .tv-replica-category-row {
        grid-template-columns: 1fr !important;
    }

    .tv-replica-popular-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .tv-replica-tool-card {
        min-height: 152px !important;
        padding: 14px !important;
    }

    .tv-replica-bottom-trust {
        margin-left: -18px !important;
        margin-right: -18px !important;
    }

    .tv-sticky-search-box:focus-within,
    .tv-sticky-search-wrap:hover .tv-sticky-search-box {
        width: min(260px, 62vw) !important;
    }
}

@media (max-width: 430px) {
    .tv-replica-popular-row {
        grid-template-columns: 1fr !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tv-orbit-console,
    .tv-replica-category-card,
    .tv-replica-tool-card {
        animation: none !important;
        transition: none !important;
    }
}

/* Header anti-overlap hardening: keep brand, menu, and actions in their own lanes. */
.tv-command-topbar.tv-asana-topbar {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) max-content !important;
    align-items: center !important;
    column-gap: clamp(14px, 2.2vw, 34px) !important;
    overflow: visible !important;
}

.tv-command-topbar .tv-asana-brand {
    min-width: max-content !important;
    max-width: 220px !important;
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
}

.tv-command-topbar .tv-asana-brand > span:nth-of-type(2) {
    white-space: nowrap !important;
}

.tv-command-topbar .tv-asana-menu {
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: center !important;
    overflow: visible !important;
    gap: clamp(2px, .45vw, 8px) !important;
}

.tv-command-topbar .tv-asana-menu-item {
    min-width: 0 !important;
    flex: 0 1 auto !important;
}

.tv-command-topbar .tv-asana-menu-item > summary {
    min-height: 40px !important;
    padding-inline: clamp(7px, .7vw, 12px) !important;
    font-size: clamp(.76rem, .78vw, .88rem) !important;
    max-width: 86px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.tv-command-topbar .tv-asana-actions {
    min-width: max-content !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    position: relative !important;
    z-index: 2 !important;
}

@media (max-width: 1180px) {
    .tv-command-topbar .tv-asana-menu,
    .tv-command-topbar .tv-asana-action-link {
        display: none !important;
    }

    .tv-command-topbar.tv-asana-topbar {
        grid-template-columns: max-content minmax(0, 1fr) max-content !important;
    }
}

/* DaivVerse unified blue dashboard theme
   Final layer: keeps the whole app on one dark blue/cyan visual system. */
:root {
    --dv-app-bg: #020617;
    --dv-app-bg-2: #071426;
    --dv-app-surface: rgba(8, 13, 35, .88);
    --dv-app-surface-2: rgba(13, 21, 48, .82);
    --dv-app-surface-3: rgba(15, 23, 42, .72);
    --dv-app-border: rgba(96, 165, 250, .20);
    --dv-app-border-strong: rgba(34, 211, 238, .38);
    --dv-app-text: #F8FAFC;
    --dv-app-muted: #CBD5E1;
    --dv-app-soft: #94A3B8;
    --dv-app-blue: #3B82F6;
    --dv-app-blue-strong: #2563EB;
    --dv-app-cyan: #22D3EE;
    --dv-app-teal: #00D4AA;
    --dv-app-purple: #8B5CF6;
    --dv-app-green: #34D399;
    --dv-app-radius: 18px;
    --dv-app-radius-lg: 26px;
    --dv-app-shadow: 0 24px 70px rgba(0, 0, 0, .32), 0 0 45px rgba(37, 99, 235, .10);
    --dv-app-shadow-soft: 0 16px 42px rgba(0, 0, 0, .24);
    --dv-app-gradient: linear-gradient(135deg, var(--dv-app-blue-strong), var(--dv-app-cyan) 58%, var(--dv-app-teal));
    --dv-app-panel-gradient: linear-gradient(145deg, rgba(15, 23, 42, .86), rgba(7, 20, 54, .76));
}

html,
body,
.app,
.mud-layout,
.mud-main-content,
.main,
.tool-page,
.category-market,
.library-market,
.studio-shell:not(.tv-command-home) {
    background:
        radial-gradient(circle at 8% 14%, rgba(37, 99, 235, .18), transparent 30vw),
        radial-gradient(circle at 92% 10%, rgba(34, 211, 238, .12), transparent 26vw),
        radial-gradient(circle at 48% 96%, rgba(139, 92, 246, .09), transparent 32vw),
        linear-gradient(180deg, var(--dv-app-bg), var(--dv-app-bg-2)) !important;
    color: var(--dv-app-text) !important;
    font-family: "Plus Jakarta Sans", "DM Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.app,
.app.dark,
.app.light,
.app.theme-sky,
.app.theme-ocean,
.app.theme-neon,
.app.theme-midnight,
.app.theme-obsidian {
    --bg: var(--dv-app-bg) !important;
    --bg2: var(--dv-app-surface) !important;
    --bg3: var(--dv-app-surface-2) !important;
    --bg4: rgba(34, 211, 238, .10) !important;
    --tx: var(--dv-app-text) !important;
    --tx2: var(--dv-app-muted) !important;
    --bd: var(--dv-app-border) !important;
    --ac: var(--dv-app-cyan) !important;
    --ac2: var(--dv-app-teal) !important;
    --sh: var(--dv-app-shadow-soft) !important;
}

.app h1,
.app h2,
.app h3,
.app h4,
.app h5,
.app h6,
.app .mud-typography-h1,
.app .mud-typography-h2,
.app .mud-typography-h3,
.app .mud-typography-h4,
.app .mud-typography-h5,
.app .mud-typography-h6 {
    color: var(--dv-app-text) !important;
    font-family: "Plus Jakarta Sans", "DM Sans", Inter, system-ui, sans-serif !important;
    letter-spacing: -.02em !important;
}

.app p,
.app li,
.app small,
.app label,
.app .mud-typography-body1,
.app .mud-typography-body2,
.app .mud-typography-caption,
.app .mud-input-helper-text,
.app .text-muted,
.app .muted {
    color: var(--dv-app-muted) !important;
}

.app a {
    color: var(--dv-app-cyan) !important;
}

.app a:hover,
.app a:focus-visible {
    color: #A5F3FC !important;
}

.app .tv-command-topbar.tv-asana-topbar,
.app .mud-topbar {
    border-bottom: 1px solid rgba(96, 165, 250, .16) !important;
    background: rgba(3, 8, 28, .86) !important;
    color: var(--dv-app-text) !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .22) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
}

.app .tv-asana-brand,
.app .tv-asana-menu-item > summary,
.app .tv-asana-action-link,
.app .tv-asana-mobile-menu,
.app .tv-sticky-theme-button,
.app .tv-replica-theme-toggle {
    color: var(--dv-app-text) !important;
}

.app .tv-asana-brand-mark,
.app .tool-title-icon,
.app .category-market-icon,
.app .footer-logo-mark,
.app .tv-floating-filter-option-icon,
.app .tool-info-chip .mud-icon-root {
    border: 1px solid rgba(34, 211, 238, .26) !important;
    background: linear-gradient(135deg, rgba(37, 99, 235, .32), rgba(34, 211, 238, .16)) !important;
    color: var(--dv-app-cyan) !important;
    box-shadow: 0 0 28px rgba(34, 211, 238, .16) !important;
}

.app .tv-asana-menu-item > summary:hover,
.app .tv-asana-menu-item[open] > summary,
.app .tv-asana-action-link:hover,
.app .tv-asana-mobile-menu:hover,
.app .tv-sticky-theme-button:hover,
.app .tv-replica-theme-toggle:hover {
    border-color: rgba(34, 211, 238, .24) !important;
    background: rgba(14, 23, 53, .94) !important;
    color: #FFFFFF !important;
    box-shadow: 0 14px 34px rgba(34, 211, 238, .12) !important;
}

.app .tv-asana-mega,
.app .mud-popover,
.app .mud-menu,
.app .mud-dialog,
.app .tv-floating-filter-panel,
.app .tv-theme-panel,
.app .tv-bookmark-quick-menu,
.app .tv-sticky-search-results,
.app .studio-search-dropdown {
    border: 1px solid var(--dv-app-border) !important;
    background: rgba(8, 13, 35, .98) !important;
    color: var(--dv-app-text) !important;
    box-shadow: var(--dv-app-shadow) !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
}

.app .tv-asana-mega-intro,
.app .tv-floating-filter-panel header,
.app .mud-dialog-title {
    border: 1px solid rgba(96, 165, 250, .12) !important;
    background:
        radial-gradient(circle at 10% 0, rgba(37, 99, 235, .25), transparent 52%),
        radial-gradient(circle at 100% 20%, rgba(34, 211, 238, .14), transparent 48%),
        rgba(13, 21, 48, .88) !important;
    color: var(--dv-app-text) !important;
}

.app .tv-asana-mega-section,
.app .tv-asana-mega-grid section > a:not(.tv-asana-mega-section),
.app .drawer-menu .mud-nav-link,
.app .mud-list-item,
.app .mud-menu-item {
    color: var(--dv-app-text) !important;
}

.app .tv-asana-mega-grid section > a:not(.tv-asana-mega-section):hover,
.app .drawer-menu .mud-nav-link:hover,
.app .mud-list-item:hover,
.app .mud-menu-item:hover {
    background: rgba(34, 211, 238, .09) !important;
    color: #FFFFFF !important;
}

.app .tool-head,
.app .tool-panel,
.app .tool-step-card,
.app .tool-content-section,
.app .how-to,
.app .related,
.app .result-card,
.app .pdf-panel,
.app .webhook-card,
.app .tcard,
.app .tcard-sm,
.app .catcard,
.app .dashboard-tile,
.app .calc-card,
.app .empty-panel,
.app .app-error,
.app .not-found,
.app .market-tool-card,
.app .category-market-hero,
.app .category-readable-card,
.app .category-search-card,
.app .studio-category-card,
.app .blog-card,
.app .guide-card,
.app .info-card,
.app .panel-card,
.app .privacy-band,
.app .sitemap-category,
.app .prompt-card,
.app .quick-card,
.app .mud-card,
.app .mud-paper:not(.mud-popover):not(.mud-dialog):not(.mud-picker-paper) {
    border: 1px solid var(--dv-app-border) !important;
    border-radius: var(--dv-app-radius-lg) !important;
    background: var(--dv-app-panel-gradient) !important;
    color: var(--dv-app-text) !important;
    box-shadow: var(--dv-app-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
}

.app .tool-head,
.app .category-market-hero {
    position: relative !important;
    overflow: hidden !important;
}

.app .tool-head::before,
.app .category-market-hero::before,
.app .tool-panel::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle at top right, rgba(34, 211, 238, .10), transparent 36%),
        radial-gradient(circle at 4% 20%, rgba(37, 99, 235, .10), transparent 32%) !important;
    opacity: .9 !important;
}

.app .tool-head > *,
.app .category-market-hero > *,
.app .tool-panel > * {
    position: relative !important;
    z-index: 1 !important;
}

.app .tool-head h1,
.app .category-market-hero h1 {
    color: var(--dv-app-text) !important;
}

.app .breadcrumb,
.app .breadcrumb a,
.app .self-page-link {
    color: var(--dv-app-muted) !important;
}

.app .breadcrumb a:hover,
.app .self-page-link:hover {
    color: var(--dv-app-cyan) !important;
}

.app .badge,
.app .badge-soft,
.app .tool-info-chip,
.app .category-chip,
.app .chip,
.app .mud-chip,
.app .footer-chip-row span,
.app .tool-status-badge {
    border: 1px solid rgba(96, 165, 250, .20) !important;
    background: rgba(34, 211, 238, .08) !important;
    color: var(--dv-app-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

.app .badge:first-child,
.app .category-chip.active,
.app .mud-chip-color-primary {
    border-color: var(--dv-app-border-strong) !important;
    background: linear-gradient(135deg, rgba(37, 99, 235, .25), rgba(34, 211, 238, .12)) !important;
    color: #FFFFFF !important;
}

.app input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.app textarea,
.app select,
.app .mud-input-root,
.app .mud-input-slot,
.app .mud-input-outlined,
.app .mud-input-control,
.app .mud-select,
.app .mud-input,
.app .ta,
.app pre,
.app code {
    border-color: rgba(96, 165, 250, .22) !important;
    background: rgba(2, 6, 23, .72) !important;
    color: var(--dv-app-text) !important;
    caret-color: var(--dv-app-cyan) !important;
}

.app input::placeholder,
.app textarea::placeholder,
.app .mud-input-label {
    color: var(--dv-app-soft) !important;
}

.app input:focus,
.app textarea:focus,
.app select:focus,
.app .mud-input-root:focus-within,
.app .mud-input-outlined:focus-within {
    border-color: var(--dv-app-border-strong) !important;
    box-shadow: 0 0 0 4px rgba(34, 211, 238, .16) !important;
    outline: none !important;
}

.app .mud-button-filled-primary,
.app .mud-button-filled.mud-button-filled-primary,
.app .btn-primary,
.app .primary-button,
.app .tool-primary-action,
.app button[type="submit"]:not(.mud-icon-button) {
    border: 1px solid rgba(34, 211, 238, .28) !important;
    background: var(--dv-app-gradient) !important;
    color: #FFFFFF !important;
    box-shadow: 0 18px 42px rgba(34, 211, 238, .18) !important;
}

.app .mud-button-outlined-primary,
.app .mud-button-text-primary,
.app .btn-secondary,
.app .secondary-button,
.app .tool-action-btn,
.app .mud-icon-button {
    border-color: rgba(96, 165, 250, .22) !important;
    background: rgba(13, 21, 48, .72) !important;
    color: var(--dv-app-text) !important;
}

.app .mud-button-root:hover,
.app .btn-primary:hover,
.app .btn-secondary:hover,
.app .primary-button:hover,
.app .secondary-button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 22px 52px rgba(34, 211, 238, .16) !important;
}

.app .mud-table,
.app .mud-table-container,
.app table {
    border: 1px solid var(--dv-app-border) !important;
    border-radius: var(--dv-app-radius) !important;
    background: rgba(8, 13, 35, .74) !important;
    color: var(--dv-app-text) !important;
    overflow: hidden !important;
}

.app .mud-table-head,
.app thead {
    background: rgba(37, 99, 235, .12) !important;
}

.app .mud-table-cell,
.app th,
.app td {
    border-color: rgba(96, 165, 250, .12) !important;
    color: var(--dv-app-muted) !important;
}

.app .mud-alert {
    border: 1px solid rgba(96, 165, 250, .18) !important;
    border-radius: var(--dv-app-radius) !important;
    background: rgba(13, 21, 48, .86) !important;
    color: var(--dv-app-text) !important;
}

.app .mud-alert-severity-success {
    border-color: rgba(52, 211, 153, .30) !important;
    background: rgba(6, 78, 59, .32) !important;
}

.app .mud-alert-severity-warning {
    border-color: rgba(245, 158, 11, .34) !important;
    background: rgba(120, 53, 15, .30) !important;
}

.app .mud-alert-severity-error {
    border-color: rgba(239, 68, 68, .34) !important;
    background: rgba(127, 29, 29, .30) !important;
}

.app .footer,
.app .site-footer,
.app .app-footer,
.app .footer-wrap {
    border-top: 1px solid rgba(96, 165, 250, .18) !important;
    background:
        radial-gradient(circle at 15% 0, rgba(37, 99, 235, .18), transparent 30%),
        radial-gradient(circle at 90% 10%, rgba(34, 211, 238, .12), transparent 28%),
        rgba(3, 8, 28, .96) !important;
    color: var(--dv-app-text) !important;
}

.app .footer-column,
.app .footer-hero,
.app .footer-bottom {
    border-color: rgba(96, 165, 250, .16) !important;
    background: rgba(8, 13, 35, .54) !important;
    color: var(--dv-app-text) !important;
}

.app .mud-snackbar,
.app .mud-snackbar-content-message {
    border: 1px solid rgba(96, 165, 250, .18) !important;
    background: rgba(8, 13, 35, .98) !important;
    color: var(--dv-app-text) !important;
    box-shadow: var(--dv-app-shadow) !important;
}

@media (max-width: 760px) {
    .app .tool-head,
    .app .tool-panel,
    .app .category-market-hero,
    .app .tool-content-section,
    .app .how-to {
        border-radius: 20px !important;
    }
}

/* Deep consistency pass: neutralize old page-specific light/Asana surfaces. */
.app *,
.app *::before,
.app *::after {
    scrollbar-color: rgba(34, 211, 238, .45) rgba(2, 6, 23, .76) !important;
}

.app .main,
.app .content,
.app .page,
.app .page-shell,
.app .tools-shell,
.app .tool-shell,
.app .tool-page,
.app .focused-tool-page,
.app .category-market,
.app .library-market,
.app .single-library,
.app .blog-index,
.app .blog-detail,
.app .guide-page,
.app .legal-page,
.app .auth-page,
.app .account-page,
.app .sitemap-page,
.app .not-found-page,
.app .studio-section,
.app .studio-shell,
.app .mud-container,
.app .mud-grid,
.app .mud-tabs-panels,
.app .mud-tab-panel,
.app .mud-expansion-panels,
.app .mud-expansion-panel,
.app .mud-drawer,
.app .mud-drawer-content,
.app .mud-drawer-header,
.app .mud-picker,
.app .mud-picker-paper,
.app .mud-picker-content,
.app .mud-picker-calendar,
.app .mud-toolbar,
.app .mud-appbar {
    background:
        radial-gradient(circle at 14% 10%, rgba(37, 99, 235, .10), transparent 28vw),
        radial-gradient(circle at 92% 4%, rgba(34, 211, 238, .08), transparent 22vw),
        linear-gradient(180deg, var(--dv-app-bg), var(--dv-app-bg-2)) !important;
    color: var(--dv-app-text) !important;
}

.app .mud-drawer,
.app .mud-drawer-content,
.app .drawer-menu,
.app .mud-navmenu,
.app .mud-nav-group,
.app .mud-collapse-container,
.app .mud-collapse-wrapper,
.app .mud-collapse-wrapper-inner {
    background: rgba(3, 8, 28, .98) !important;
    color: var(--dv-app-text) !important;
}

.app .mud-nav-link,
.app .mud-nav-link-text,
.app .mud-nav-group .mud-nav-link,
.app .mud-nav-group .mud-nav-link-text,
.app .mud-nav-group .mud-nav-group-text,
.app .mud-nav-group .mud-icon-root {
    color: var(--dv-app-muted) !important;
}

.app .mud-nav-link:hover,
.app .mud-nav-link.active,
.app .mud-nav-link:focus-visible {
    border-color: rgba(34, 211, 238, .22) !important;
    background: rgba(34, 211, 238, .09) !important;
    color: var(--dv-app-text) !important;
}

.app .mud-input,
.app .mud-input-control,
.app .mud-input-root,
.app .mud-input-adornment,
.app .mud-select-input,
.app .mud-select,
.app .mud-select-filler,
.app .mud-select-item,
.app .mud-select-list,
.app .mud-list,
.app .mud-list-padding,
.app .mud-popover .mud-list,
.app .mud-popover .mud-list-item,
.app .mud-popover .mud-list-item-text {
    background: rgba(2, 6, 23, .88) !important;
    color: var(--dv-app-text) !important;
}

.app .mud-select-item:hover,
.app .mud-list-item:hover,
.app .mud-list-item-selected {
    background: rgba(34, 211, 238, .10) !important;
    color: #FFFFFF !important;
}

.app .mud-input-label,
.app .mud-input-adornment,
.app .mud-input-helper-text,
.app .mud-select-placeholder,
.app .mud-placeholder,
.app .mud-disabled,
.app .mud-typography-subtitle1,
.app .mud-typography-subtitle2 {
    color: var(--dv-app-soft) !important;
}

.app .mud-tabs-toolbar,
.app .mud-tabs-tabbar,
.app .mud-tab,
.app .mud-tab.mud-tab-active {
    border-color: rgba(96, 165, 250, .16) !important;
    background: rgba(8, 13, 35, .82) !important;
    color: var(--dv-app-text) !important;
}

.app .mud-tab.mud-tab-active {
    color: var(--dv-app-cyan) !important;
}

.app .mud-divider,
.app hr,
.app .divider,
.app .tool-divider {
    border-color: rgba(96, 165, 250, .16) !important;
}

.app .mud-tooltip,
.mud-tooltip {
    border: 1px solid rgba(96, 165, 250, .22) !important;
    background: rgba(8, 13, 35, .98) !important;
    color: var(--dv-app-text) !important;
    box-shadow: var(--dv-app-shadow-soft) !important;
}

.app .mud-icon-root,
.app svg {
    color: currentColor;
}

.app .mud-progress-linear,
.app .mud-progress-circular {
    color: var(--dv-app-cyan) !important;
}

.app .tool-meta-grid article,
.app .tool-faq-list article,
.app .related-tool-row a,
.app .tool-info-strip,
.app .upload-zone,
.app .drop-zone,
.app .file-drop-zone,
.app .result-actions,
.app .stepper,
.app .tool-stepper,
.app .converter-step,
.app .hash-row,
.app .json-editor-panel,
.app .code-editor-panel,
.app .editor-panel,
.app .output-panel,
.app .input-panel,
.app .preview-panel,
.app .currency-card,
.app .fx-currency-menu,
.app .qr-preview,
.app .qr-options,
.app .search-panel,
.app .filter-panel,
.app .pagination,
.app .pagination a,
.app .pagination button {
    border: 1px solid rgba(96, 165, 250, .18) !important;
    border-radius: var(--dv-app-radius) !important;
    background: rgba(8, 13, 35, .72) !important;
    color: var(--dv-app-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

.app .related-tool-row a:hover,
.app .pagination a:hover,
.app .pagination button:hover {
    border-color: var(--dv-app-border-strong) !important;
    background: rgba(34, 211, 238, .10) !important;
    color: #FFFFFF !important;
}

.app .tool-page img,
.app .preview-panel img,
.app .passport-preview-image,
.app canvas,
.app video {
    border: 1px solid rgba(96, 165, 250, .18) !important;
    border-radius: var(--dv-app-radius) !important;
    background: rgba(2, 6, 23, .72) !important;
}

.app [style*="background: #fff"],
.app [style*="background:#fff"],
.app [style*="background: white"],
.app [style*="background:white"],
.app [style*="background-color: #fff"],
.app [style*="background-color:#fff"],
.app [style*="background-color: white"],
.app [style*="background-color:white"] {
    background: rgba(8, 13, 35, .78) !important;
}

.app [style*="color: #0f172a"],
.app [style*="color:#0f172a"],
.app [style*="color: #111827"],
.app [style*="color:#111827"],
.app [style*="color: black"],
.app [style*="color:black"] {
    color: var(--dv-app-text) !important;
}

.app .tv-asana-menu,
.app .tv-asana-menu-item,
.app .tv-asana-menu-item > summary,
.app .tv-asana-actions,
.app .tv-asana-action-link {
    background: transparent !important;
}

.app .tv-asana-menu-item > summary {
    border: 1px solid transparent !important;
}

.app .tv-asana-menu-item > summary:hover,
.app .tv-asana-menu-item[open] > summary {
    border-color: rgba(34, 211, 238, .26) !important;
    background: rgba(14, 23, 53, .94) !important;
}

.app .tv-asana-mega {
    top: 78px !important;
    border-radius: 0 0 26px 26px !important;
}

.app .tv-asana-mega-grid section {
    border: 1px solid rgba(96, 165, 250, .12) !important;
    border-radius: 18px !important;
    background: rgba(2, 6, 23, .34) !important;
    padding: 10px !important;
}

.app .tv-asana-mega-section {
    background: rgba(34, 211, 238, .08) !important;
}

.app .tv-asana-mega-section small,
.app .tv-asana-mega-intro p,
.app .tv-asana-mega p,
.app .tv-asana-mega small {
    color: var(--dv-app-muted) !important;
}

.app .tv-asana-mega-section b,
.app .tv-asana-mega h2,
.app .tv-asana-mega a {
    color: var(--dv-app-text) !important;
}

/* Final full-app blue dashboard pass: tool routes and menu geometry. */
.app.tool-route,
.app.tool-route .main,
.app.tool-route .mud-main-content,
.app.tool-route .tool-page,
.app.tool-route .focused-tool-page {
    min-height: 100vh !important;
    background:
        radial-gradient(circle at 15% 0, rgba(37, 99, 235, .18), transparent 34vw),
        radial-gradient(circle at 84% 8%, rgba(34, 211, 238, .13), transparent 28vw),
        linear-gradient(180deg, #020617 0%, #030B1A 48%, #071426 100%) !important;
    color: var(--dv-app-text) !important;
}

.app.tool-route .tool-head,
.app.tool-route .tool-head-pro,
.app.tool-route .tool-body,
.app.tool-route .tool-info-dock,
.app.tool-route .tool-content-section,
.app.tool-route .tool-example-section,
.app.tool-route .tool-meta-grid article,
.app.tool-route .tool-faq-list article,
.app.tool-route .related-tool-row a {
    border: 1px solid rgba(96, 165, 250, .20) !important;
    border-radius: 24px !important;
    background:
        linear-gradient(145deg, rgba(15, 23, 42, .88), rgba(7, 20, 54, .76)) !important;
    color: var(--dv-app-text) !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

.app.tool-route .tool-head {
    position: relative !important;
    overflow: hidden !important;
}

.app.tool-route .tool-head::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle at 20% 0, rgba(34, 211, 238, .16), transparent 34%),
        radial-gradient(circle at 86% 14%, rgba(139, 92, 246, .14), transparent 28%) !important;
}

.app.tool-route .tool-head > * {
    position: relative !important;
    z-index: 1 !important;
}

.app.tool-route .tool-title-icon,
.app.tool-route .tool-info-chip,
.app.tool-route .tool-badges span,
.app.tool-route .badge,
.app.tool-route .tool-status-badge {
    border: 1px solid rgba(34, 211, 238, .22) !important;
    background: rgba(34, 211, 238, .10) !important;
    color: var(--dv-app-text) !important;
    box-shadow: 0 14px 34px rgba(34, 211, 238, .10) !important;
}

.app.tool-route .tool-info-chip-primary,
.app.tool-route .tool-title-icon {
    background: linear-gradient(135deg, rgba(37, 99, 235, .86), rgba(34, 211, 238, .72)) !important;
    color: #fff !important;
}

.app.tool-route .tool-head h1,
.app.tool-route .tool-content-section h2,
.app.tool-route .tool-example-section h2,
.app.tool-route .tool-meta-grid h2,
.app.tool-route .tool-faq-list h2 {
    color: var(--dv-app-text) !important;
}

.app.tool-route .tool-head p,
.app.tool-route .tool-content-section p,
.app.tool-route .tool-example-section p,
.app.tool-route .tool-meta-grid p,
.app.tool-route .tool-faq-list p,
.app.tool-route .related-tool-row small {
    color: var(--dv-app-muted) !important;
}

.app.tool-route .global-tool-close,
.app.tool-route .tool-action-btn,
.app.tool-route .tool-head-actions .mud-button-root {
    border: 1px solid rgba(96, 165, 250, .24) !important;
    background: rgba(13, 21, 48, .72) !important;
    color: var(--dv-app-text) !important;
}

.app.tool-route .global-tool-close:hover,
.app.tool-route .tool-action-btn:hover,
.app.tool-route .tool-head-actions .mud-button-root:hover {
    border-color: rgba(34, 211, 238, .38) !important;
    background: rgba(34, 211, 238, .12) !important;
    box-shadow: 0 18px 46px rgba(34, 211, 238, .16) !important;
}

.app .tv-command-topbar.tv-asana-topbar {
    gap: clamp(10px, 1.3vw, 24px) !important;
    min-width: 0 !important;
}

.app .tv-command-topbar .tv-asana-brand {
    flex: 0 0 auto !important;
    min-width: max-content !important;
}

.app .tv-command-topbar .tv-asana-menu {
    justify-self: end !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
}

.app .tv-command-topbar .tv-asana-menu-item > summary {
    white-space: nowrap !important;
}

.app .tv-command-topbar .tv-asana-actions {
    justify-self: end !important;
    flex: 0 0 auto !important;
}

.app .tv-command-topbar .tv-asana-mega {
    max-height: min(76vh, 720px) !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
}

@media (max-width: 1320px) {
    .app .tv-command-topbar .tv-asana-menu-item > summary {
        padding-inline: 9px !important;
        font-size: .88rem !important;
    }

    .app .tv-command-topbar .tv-asana-brand {
        font-size: 1rem !important;
    }
}

@media (max-width: 1180px) {
    .app .tv-command-topbar .tv-asana-menu {
        display: none !important;
    }
}

/* Homepage hero type scale: keep the premium layout but make the headline calmer. */
.tv-command-home .tv-replica-landing .tv-home-hero-copy h1,
.app .tv-command-home .tv-replica-landing .tv-home-hero-copy h1 {
    font-size: clamp(2.35rem, 4.15vw, 4.45rem) !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
}

.tv-command-home .tv-replica-landing .tv-home-hero-copy p,
.app .tv-command-home .tv-replica-landing .tv-home-hero-copy p {
    font-size: clamp(.98rem, 1.04vw, 1.16rem) !important;
    line-height: 1.62 !important;
}

@media (max-width: 760px) {
    .tv-command-home .tv-replica-landing .tv-home-hero-copy h1,
    .app .tv-command-home .tv-replica-landing .tv-home-hero-copy h1 {
        font-size: clamp(2rem, 9.2vw, 3rem) !important;
        line-height: 1.08 !important;
    }
}

/* Growth homepage sections */
.tv-home-badges,
.tv-home-growth-grid,
.tv-home-usecase-grid,
.tv-home-guide-grid {
    display: grid;
    gap: .85rem;
}

.tv-home-badges {
    display: flex;
    flex-wrap: wrap;
    margin-top: 1.15rem;
}

.tv-home-badges span,
.tv-section-kicker {
    border: 1px solid rgba(56, 189, 248, .24);
    background: rgba(15, 23, 42, .58);
    color: #cbd5e1;
    border-radius: 999px;
    padding: .52rem .78rem;
    font-size: .82rem;
    font-weight: 750;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.tv-section-kicker {
    display: inline-flex;
    margin-bottom: .7rem;
    color: #67e8f9;
}

.tv-home-growth-section,
.tv-home-usecase-section,
.tv-home-guides-preview,
.tv-home-final-cta {
    position: relative;
    z-index: 1;
    margin-top: 1.15rem;
    border: 1px solid rgba(96, 165, 250, .18);
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(34, 211, 238, .12), transparent 34%),
        linear-gradient(135deg, rgba(15, 23, 42, .76), rgba(2, 6, 23, .64));
    box-shadow: 0 24px 70px rgba(2, 6, 23, .34);
    padding: clamp(1.05rem, 2.1vw, 1.75rem);
    backdrop-filter: blur(18px);
}

.tv-home-growth-section h2,
.tv-home-usecase-section h2,
.tv-home-final-cta h2 {
    color: #f8fafc;
    margin: 0 0 .65rem;
    font-size: clamp(1.45rem, 2.35vw, 2.35rem);
    letter-spacing: 0;
}

.tv-home-growth-section p,
.tv-home-usecase-section p,
.tv-home-final-cta p,
.tv-home-guide-grid small {
    color: #cbd5e1;
    line-height: 1.62;
}

.tv-home-growth-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 1.1rem;
}

.tv-home-growth-grid article,
.tv-home-usecase-grid article,
.tv-home-guide-grid a {
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 18px;
    background: rgba(15, 23, 42, .58);
    padding: 1rem;
    color: #f8fafc;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.tv-home-growth-grid article:hover,
.tv-home-usecase-grid article:hover,
.tv-home-guide-grid a:hover {
    transform: translateY(-2px);
    border-color: rgba(34, 211, 238, .38);
    box-shadow: 0 16px 38px rgba(14, 165, 233, .15);
}

.tv-home-growth-grid svg {
    color: #22d3ee;
    margin-bottom: .65rem;
}

.tv-home-growth-grid b,
.tv-home-guide-grid b {
    display: block;
    margin-bottom: .35rem;
    color: #f8fafc;
}

.tv-home-growth-grid span {
    color: #94a3b8;
    font-size: .9rem;
    line-height: 1.52;
}

.tv-home-usecase-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 1rem;
}

.tv-home-usecase-grid h3 {
    color: #f8fafc;
    font-size: 1rem;
    margin: 0 0 .45rem;
}

.tv-home-guide-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tv-home-guide-grid span {
    display: inline-flex;
    color: #67e8f9;
    font-size: .78rem;
    font-weight: 800;
    margin-bottom: .55rem;
}

.tv-home-final-cta {
    text-align: center;
}

.tv-home-final-cta .tv-home-actions {
    justify-content: center;
}

@media (max-width: 1100px) {
    .tv-home-growth-grid,
    .tv-home-usecase-grid,
    .tv-home-guide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .tv-home-growth-grid,
    .tv-home-usecase-grid,
    .tv-home-guide-grid {
        grid-template-columns: 1fr;
    }
}

/* Final border treatment: use blue/cyan edge lines instead of white lining. */
.app.dark,
.app.theme-neon,
body:has(.app.theme-neon) {
    --bd: rgba(56, 189, 248, .20);
    --dv-border: rgba(56, 189, 248, .22);
    --border-subtle: rgba(56, 189, 248, .20);
}

.app.dark :where(
    .tv-command-topbar,
    .tv-asana-topbar,
    .tv-asana-mega,
    .tv-replica-landing,
    .tv-home-trust-row,
    .tv-replica-category-card,
    .tv-replica-tool-card,
    .tv-replica-bottom-trust,
    .tv-home-growth-section,
    .tv-home-usecase-section,
    .tv-home-guides-preview,
    .tv-home-final-cta,
    .tv-home-growth-grid article,
    .tv-home-usecase-grid article,
    .tv-home-guide-grid a,
    .tool-page,
    .tool-head,
    .tool-body,
    .tool-info-chip,
    .tool-content-section,
    .tool-meta-grid article,
    .tool-faq-list article,
    .related-tool-row a,
    .legal-page,
    .legal-card,
    .legal-panel,
    .blog-page,
    .blog-card,
    .footer,
    .footer-chip-row span,
    input,
    textarea,
    select
),
.app.theme-neon :where(
    .tv-command-topbar,
    .tv-asana-topbar,
    .tv-asana-mega,
    .tv-replica-landing,
    .tv-home-trust-row,
    .tv-replica-category-card,
    .tv-replica-tool-card,
    .tv-replica-bottom-trust,
    .tv-home-growth-section,
    .tv-home-usecase-section,
    .tv-home-guides-preview,
    .tv-home-final-cta,
    .tv-home-growth-grid article,
    .tv-home-usecase-grid article,
    .tv-home-guide-grid a,
    .tool-page,
    .tool-head,
    .tool-body,
    .tool-info-chip,
    .tool-content-section,
    .tool-meta-grid article,
    .tool-faq-list article,
    .related-tool-row a,
    .legal-page,
    .legal-card,
    .legal-panel,
    .blog-page,
    .blog-card,
    .footer,
    .footer-chip-row span,
    input,
    textarea,
    select
) {
    border-color: rgba(56, 189, 248, .22) !important;
}

.app.dark :where(
    .tv-replica-category-card,
    .tv-replica-tool-card,
    .tv-home-growth-grid article,
    .tv-home-usecase-grid article,
    .tv-home-guide-grid a,
    .tool-info-chip,
    .legal-card,
    .blog-card,
    .footer-chip-row span
),
.app.theme-neon :where(
    .tv-replica-category-card,
    .tv-replica-tool-card,
    .tv-home-growth-grid article,
    .tv-home-usecase-grid article,
    .tv-home-guide-grid a,
    .tool-info-chip,
    .legal-card,
    .blog-card,
    .footer-chip-row span
) {
    box-shadow:
        0 18px 48px rgba(2, 6, 23, .34),
        inset 0 0 0 1px rgba(34, 211, 238, .05) !important;
}

.app.dark :where(
    .tv-replica-category-card:hover,
    .tv-replica-tool-card:hover,
    .tv-home-growth-grid article:hover,
    .tv-home-usecase-grid article:hover,
    .tv-home-guide-grid a:hover,
    .related-tool-row a:hover
),
.app.theme-neon :where(
    .tv-replica-category-card:hover,
    .tv-replica-tool-card:hover,
    .tv-home-growth-grid article:hover,
    .tv-home-usecase-grid article:hover,
    .tv-home-guide-grid a:hover,
    .related-tool-row a:hover
) {
    border-color: rgba(34, 211, 238, .46) !important;
    box-shadow:
        0 20px 54px rgba(14, 165, 233, .18),
        inset 0 0 0 1px rgba(34, 211, 238, .08) !important;
}

/* All tools: show one category section per row for easier scanning. */
.single-library .tv-library-category-grid,
.mud-tool-library .tv-library-category-grid,
.tool-first-library .tv-library-category-grid {
    grid-template-columns: 1fr !important;
}

.single-library .tv-library-room,
.mud-tool-library .tv-library-room {
    width: 100%;
}

/* Final theme consistency pass: prevent white-on-white buttons and add a real pure white mode. */
.app :where(button, .mud-button-root, .btn, .btn-p, .btn-s, .tool-action, .tool-chip, .tool-info-chip, .tv-asana-action-link, .tv-sticky-theme-button) {
    text-decoration: none;
}

.app.dark :where(.mud-button-root, .mud-button-outlined, .mud-button-text, .btn, .btn-s, .tool-action, .tool-chip, .tool-info-chip, .tv-asana-action-link, .tv-sticky-theme-button) {
    background: rgba(8, 16, 34, .82) !important;
    border-color: rgba(56, 189, 248, .28) !important;
    color: #e0f2fe !important;
}

.app.dark :where(.mud-button-root *, .mud-button-outlined *, .mud-button-text *, .btn *, .btn-s *, .tool-action *, .tool-chip *, .tool-info-chip *, .tv-asana-action-link *, .tv-sticky-theme-button *) {
    color: inherit !important;
}

.app.dark :where(.mud-button-filled-primary, .mud-button-filled-secondary, .btn-p, .contact-send-btn, .tv-replica-primary, .hero-btn.primary, .run-button) {
    background: linear-gradient(135deg, #2563eb 0%, #22d3ee 55%, #14b8a6 100%) !important;
    border-color: rgba(34, 211, 238, .45) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 42px rgba(14, 165, 233, .24) !important;
}

.app.dark :where(.mud-button-filled-primary *, .mud-button-filled-secondary *, .btn-p *, .contact-send-btn *, .tv-replica-primary *, .hero-btn.primary *, .run-button *) {
    color: #ffffff !important;
}

.app.dark :where(.mud-button-filled-default, .mud-button-filled) {
    background: rgba(15, 23, 42, .92) !important;
    border: 1px solid rgba(56, 189, 248, .28) !important;
    color: #e0f2fe !important;
}

.app.light :where(.mud-button-root, .mud-button-outlined, .mud-button-text, .mud-button-filled-default, .btn, .btn-s, .tool-action, .tool-chip, .tool-info-chip, .tv-asana-action-link, .tv-sticky-theme-button) {
    color: #0f172a !important;
}

.app.light :where(.mud-button-root *, .mud-button-outlined *, .mud-button-text *, .mud-button-filled-default *, .btn *, .btn-s *, .tool-action *, .tool-chip *, .tool-info-chip *, .tv-asana-action-link *, .tv-sticky-theme-button *) {
    color: inherit !important;
}

.app.light :where(.mud-button-filled-primary, .mud-button-filled-secondary, .btn-p, .contact-send-btn, .tv-replica-primary, .hero-btn.primary, .run-button) {
    color: #ffffff !important;
}

.app.light :where(.mud-button-filled-primary *, .mud-button-filled-secondary *, .btn-p *, .contact-send-btn *, .tv-replica-primary *, .hero-btn.primary *, .run-button *) {
    color: #ffffff !important;
}

.app.light.theme-pure-white,
.app.light.theme-pure-white .main,
.app.light.theme-pure-white .mud-main-content,
.app.light.theme-pure-white .tv-app-main-content {
    --bg: #ffffff;
    --bg2: #f8fbff;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --card: #ffffff;
    --text: #0f172a;
    --muted: #475569;
    --bd: rgba(37, 99, 235, .16);
    --dv-bg: #ffffff;
    --dv-bg-soft: #f8fbff;
    --dv-surface: #ffffff;
    --dv-surface-soft: #f8fafc;
    --dv-text: #0f172a;
    --dv-text-muted: #475569;
    --dv-border: rgba(37, 99, 235, .16);
    background:
        radial-gradient(circle at 20% 0%, rgba(37, 99, 235, .08), transparent 30%),
        radial-gradient(circle at 90% 10%, rgba(34, 211, 238, .10), transparent 28%),
        #ffffff !important;
    color: #0f172a !important;
    color-scheme: light !important;
}

.app.light.theme-pure-white :where(
    .tv-command-topbar,
    .tv-asana-topbar,
    .tv-asana-mega,
    .site-drawer,
    .tv-replica-landing,
    .tv-home-trust-row,
    .tv-replica-category-card,
    .tv-replica-tool-card,
    .tv-replica-bottom-trust,
    .tv-home-growth-section,
    .tv-home-usecase-section,
    .tv-home-guides-preview,
    .tv-home-final-cta,
    .tv-home-growth-grid article,
    .tv-home-usecase-grid article,
    .tv-home-guide-grid a,
    .tool-page,
    .tool-head,
    .tool-body,
    .tool-content-section,
    .tool-meta-grid article,
    .tool-faq-list article,
    .related-tool-row a,
    .legal-page,
    .legal-card,
    .legal-panel,
    .blog-page,
    .blog-card,
    .footer,
    .footer-chip-row span,
    .mud-paper,
    .mud-card,
    .mud-popover,
    .mud-menu,
    .mud-list,
    .mud-table
) {
    background: rgba(255, 255, 255, .96) !important;
    border-color: rgba(37, 99, 235, .16) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .07) !important;
    color: #0f172a !important;
}

.app.light.theme-pure-white :where(
    h1, h2, h3, h4, h5, h6,
    p, span, small, label, strong, b,
    a, li, dt, dd,
    .mud-typography,
    .mud-input-slot,
    .mud-select-input,
    .mud-list-item-text,
    .mud-table-cell
) {
    color: inherit !important;
}

.app.light.theme-pure-white :where(.muted, .text-muted, .subtitle, .tool-muted, .mud-typography-body2, .mud-input-helper-text, .mud-list-item-text-secondary) {
    color: #475569 !important;
}

.app.light.theme-pure-white :where(input, textarea, select, .mud-input-root, .mud-input-control, .mud-input, .mud-select, .mud-picker-input-button) {
    background: #ffffff !important;
    border-color: rgba(37, 99, 235, .18) !important;
    color: #0f172a !important;
}

.app.light.theme-pure-white :where(input::placeholder, textarea::placeholder) {
    color: #64748b !important;
}

.app.light.theme-pure-white :where(.mud-button-root, .mud-button-outlined, .mud-button-text, .btn, .btn-s, .tool-action, .tool-chip, .tool-info-chip, .tv-asana-action-link, .tv-sticky-theme-button) {
    background: #ffffff !important;
    border: 1px solid rgba(37, 99, 235, .20) !important;
    color: #0f172a !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06) !important;
}

.app.light.theme-pure-white :where(.mud-button-root *, .mud-button-outlined *, .mud-button-text *, .btn *, .btn-s *, .tool-action *, .tool-chip *, .tool-info-chip *, .tv-asana-action-link *, .tv-sticky-theme-button *) {
    color: inherit !important;
}

.app.light.theme-pure-white :where(.mud-button-filled-primary, .mud-button-filled-secondary, .btn-p, .contact-send-btn, .tv-replica-primary, .hero-btn.primary, .run-button) {
    background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 58%, #14b8a6 100%) !important;
    border-color: rgba(37, 99, 235, .24) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 34px rgba(37, 99, 235, .18) !important;
}

.app.light.theme-pure-white :where(.mud-button-filled-primary *, .mud-button-filled-secondary *, .btn-p *, .contact-send-btn *, .tv-replica-primary *, .hero-btn.primary *, .run-button *) {
    color: #ffffff !important;
}

.app.light.theme-pure-white :where(.tv-replica-category-card:hover, .tv-replica-tool-card:hover, .tool-content-section:hover, .related-tool-row a:hover, .blog-card:hover) {
    border-color: rgba(37, 99, 235, .34) !important;
    box-shadow: 0 22px 48px rgba(37, 99, 235, .12) !important;
}

/* Final help launcher and panel polish. */
.floating-contact {
    z-index: 1900 !important;
}

.floating-contact-tab {
    position: relative !important;
    width: 58px !important;
    min-width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: visible !important;
    border: 1px solid rgba(34, 211, 238, .42) !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,.32), transparent 24%),
        linear-gradient(135deg, #2563eb 0%, #06b6d4 54%, #14b8a6 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 18px 44px rgba(14, 165, 233, .30),
        0 0 0 8px rgba(14, 165, 233, .08),
        inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.floating-contact-tab::before {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(37,99,235,.26), rgba(34,211,238,.20), rgba(20,184,166,.18));
    filter: blur(10px);
    opacity: .9;
}

.floating-contact-tab::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 8px;
    width: 9px;
    height: 9px;
    border: 2px solid rgba(255,255,255,.9);
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,.18);
}

.floating-contact-tab .mud-icon-root {
    width: 28px !important;
    height: 28px !important;
    font-size: 1.75rem !important;
    color: #ffffff !important;
}

.floating-contact-tab > span {
    position: absolute !important;
    right: 68px;
    top: 50%;
    min-width: max-content !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(34, 211, 238, .26);
    border-radius: 999px;
    background: rgba(8, 16, 34, .90);
    color: #e0f2fe !important;
    box-shadow: 0 14px 34px rgba(2, 6, 23, .26);
    opacity: 0;
    pointer-events: none;
    transform: translate(8px, -50%);
    transition: opacity .16s ease, transform .16s ease;
}

.floating-contact-tab:hover > span,
.floating-contact-tab:focus-visible > span {
    opacity: 1;
    transform: translate(0, -50%);
}

.floating-contact-panel {
    width: min(440px, calc(100vw - 24px)) !important;
    border: 1px solid rgba(34, 211, 238, .28) !important;
    border-radius: 26px !important;
    background:
        radial-gradient(circle at 16% 0%, rgba(34, 211, 238, .12), transparent 32%),
        radial-gradient(circle at 92% 10%, rgba(139, 92, 246, .12), transparent 30%),
        rgba(8, 16, 34, .96) !important;
    color: #e5f3ff !important;
    box-shadow:
        0 30px 90px rgba(2, 6, 23, .45),
        0 0 0 1px rgba(34, 211, 238, .08),
        inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.floating-contact-head {
    min-height: 76px;
    padding: 16px !important;
    border-bottom: 1px solid rgba(34, 211, 238, .18) !important;
    background:
        radial-gradient(circle at 18% 10%, rgba(34, 211, 238, .20), transparent 36%),
        linear-gradient(135deg, rgba(15, 23, 42, .98), rgba(15, 40, 92, .92) 55%, rgba(5, 150, 135, .78)) !important;
}

.floating-contact-avatar,
.floating-chat-welcome-icon {
    border-color: rgba(34, 211, 238, .28) !important;
    background: linear-gradient(135deg, rgba(37,99,235,.22), rgba(34,211,238,.16)) !important;
    box-shadow: 0 14px 28px rgba(14, 165, 233, .16), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.floating-contact-body {
    background:
        radial-gradient(circle at 12% 2%, rgba(37,99,235,.12), transparent 32%),
        linear-gradient(180deg, rgba(2, 6, 23, .66), rgba(8, 16, 34, .94)) !important;
}

.floating-chat-welcome,
.is-guide .floating-chat-bubble {
    border-color: rgba(34, 211, 238, .18) !important;
    background: rgba(15, 23, 42, .82) !important;
    color: #e5f3ff !important;
    box-shadow: 0 16px 38px rgba(2, 6, 23, .28) !important;
}

.floating-chat-welcome strong,
.floating-chat-message,
.floating-contact-title strong {
    color: #f8fafc !important;
}

.floating-chat-welcome span,
.floating-contact-title span,
.floating-contact-meta,
.floating-typing em {
    color: #b8c7dc !important;
}

.floating-contact-prompts button {
    border-color: rgba(34, 211, 238, .20) !important;
    background: rgba(15, 23, 42, .72) !important;
    color: #dff7ff !important;
    box-shadow: 0 10px 26px rgba(2, 6, 23, .20) !important;
}

.floating-contact-prompts button:hover,
.floating-contact-prompts button:focus-visible {
    border-color: rgba(34, 211, 238, .46) !important;
    background: rgba(14, 165, 233, .16) !important;
    color: #ffffff !important;
}

.floating-contact-composer,
.floating-contact-foot {
    border-color: rgba(34, 211, 238, .16) !important;
    background: rgba(2, 6, 23, .82) !important;
}

.floating-contact-textbox {
    border-color: rgba(34, 211, 238, .22) !important;
    background: rgba(15, 23, 42, .92) !important;
    color: #f8fafc !important;
}

.floating-contact-textbox::placeholder {
    color: #94a3b8 !important;
}

.floating-contact-clear,
.floating-contact-foot,
.floating-contact-foot a {
    color: #b8c7dc !important;
}

.app.light :where(.floating-contact-panel, .floating-chat-welcome, .is-guide .floating-chat-bubble) {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(37, 99, 235, .18) !important;
    box-shadow: 0 28px 70px rgba(15, 23, 42, .16) !important;
}

.app.light .floating-contact-body {
    background:
        radial-gradient(circle at 14% 0%, rgba(37,99,235,.08), transparent 30%),
        linear-gradient(180deg, #f8fbff, #ffffff) !important;
}

.app.light :where(.floating-chat-welcome strong, .floating-chat-message) {
    color: #0f172a !important;
}

.app.light :where(.floating-chat-welcome span, .floating-contact-meta, .floating-typing em) {
    color: #475569 !important;
}

.app.light .floating-contact-prompts button {
    background: #ffffff !important;
    border-color: rgba(37, 99, 235, .18) !important;
    color: #0f172a !important;
}

.app.light .floating-contact-composer,
.app.light .floating-contact-foot {
    background: #ffffff !important;
    border-color: rgba(37, 99, 235, .14) !important;
}

.app.light .floating-contact-textbox {
    background: #ffffff !important;
    border-color: rgba(37, 99, 235, .18) !important;
    color: #0f172a !important;
}

@media (max-width: 640px) {
    .floating-contact-tab > span {
        display: none !important;
    }

    .floating-contact-tab {
        width: 54px !important;
        min-width: 54px !important;
        height: 54px !important;
        min-height: 54px !important;
        border-radius: 18px !important;
    }

    .floating-contact-panel {
        border-radius: 22px !important;
    }
}

/* Final theme reconciliation: one supported light mode, consistent across html/body/app. */
html.light,
body.light,
body:has(.app.light),
.app.light {
    color-scheme: light !important;
}

html.light.theme-pure-white,
body.light.theme-pure-white,
body:has(.app.light.theme-pure-white),
.app.light.theme-pure-white {
    --bg-primary: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fbff;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-soft: #334155;
    --border-subtle: rgba(37, 99, 235, .16);
    --dv-look-bg: #ffffff;
    --dv-look-bg-2: #f8fbff;
    --dv-look-panel: rgba(255, 255, 255, .96);
    --dv-look-panel-solid: #ffffff;
    --dv-look-line: rgba(37, 99, 235, .16);
    --dv-look-ink: #0f172a;
    --dv-look-muted: #475569;
    --asana-bg: #ffffff;
    --asana-bg-soft: #f8fbff;
    --asana-surface: #ffffff;
    --asana-surface-2: #f8fafc;
    --asana-ink: #0f172a;
    --asana-muted: #475569;
    --asana-border: rgba(37, 99, 235, .16);
    --asana-border-strong: rgba(37, 99, 235, .24);
    background:
        radial-gradient(circle at 18% 0%, rgba(37, 99, 235, .07), transparent 30vw),
        radial-gradient(circle at 92% 6%, rgba(34, 211, 238, .08), transparent 26vw),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    color: #0f172a !important;
}

.app.light.theme-pure-white :where(
    .mud-layout,
    .mud-main-content,
    main,
    .main,
    .tv-command-home,
    .category-market,
    .library-market,
    .tool-page,
    .focused-tool-page,
    .legal-page,
    .info-page,
    .blog-page,
    .blog-article-page
) {
    background: transparent !important;
    color: #0f172a !important;
}

.app.light.theme-pure-white :where(
    .tv-command-topbar.tv-asana-topbar,
    .tv-asana-mega,
    .tv-floating-filter-panel,
    .tv-theme-panel,
    .mud-drawer,
    .mud-popover,
    .mud-paper,
    .mud-card,
    .tool-head,
    .tool-body,
    .tool-content-section,
    .tool-meta-grid article,
    .tool-faq-list article,
    .related-tool-row a,
    .category-card,
    .tool-card,
    .blog-card,
    .info-card,
    .legal-card,
    .footer
) {
    background: rgba(255, 255, 255, .96) !important;
    border-color: rgba(37, 99, 235, .16) !important;
    color: #0f172a !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .07) !important;
}

.app.light.theme-pure-white :where(
    h1, h2, h3, h4, h5, h6,
    p, span, small, label, li, dt, dd,
    a, button, summary,
    .mud-typography,
    .mud-nav-link,
    .mud-list-item,
    .mud-input,
    .mud-input-slot,
    .mud-select-input
) {
    color: inherit !important;
}

.app.light.theme-pure-white :where(
    .muted,
    .text-muted,
    .subtitle,
    .tool-muted,
    .mud-typography-body2,
    .mud-input-helper-text,
    .mud-list-item-text-secondary,
    .tv-asana-mega small,
    .tool-card-description,
    .category-description
) {
    color: #475569 !important;
}

.app.light.theme-pure-white :where(
    input,
    textarea,
    select,
    .mud-input-root,
    .mud-input-control,
    .mud-select,
    .mud-picker-input-button,
    .monaco-editor,
    pre,
    code
) {
    background: #ffffff !important;
    border-color: rgba(37, 99, 235, .18) !important;
    color: #0f172a !important;
}

.app.light.theme-pure-white :where(.mud-button-filled-primary, .mud-button-filled-secondary, .btn-p, .run-button, .contact-send-btn),
.app.light.theme-pure-white :where(.mud-button-filled-primary *, .mud-button-filled-secondary *, .btn-p *, .run-button *, .contact-send-btn *) {
    color: #ffffff !important;
}

html.light:not(.theme-pure-white),
body.light:not(.theme-pure-white),
body:has(.app.light:not(.theme-pure-white)),
.app.light:not(.theme-pure-white) {
    background: #ffffff !important;
    color: #0f172a !important;
}

/* Homepage hero: replace decorative dashboard badges with real quick-launch tool buttons. */
.tv-command-home .tv-replica-landing .tv-orbit-card-globe,
.tv-command-home .tv-replica-landing .tv-orbit-card-ssl,
.tv-command-home .tv-replica-landing .tv-orbit-card-code {
    display: none !important;
}

.tv-command-home .tv-replica-landing .tv-orbit-important-tools {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 14px;
    margin-top: 6px;
    padding: clamp(14px, 2vw, 18px);
    border: 1px solid rgba(34, 211, 238, .20);
    border-radius: 24px;
    background:
        radial-gradient(circle at 12% 0%, rgba(34, 211, 238, .13), transparent 38%),
        rgba(15, 23, 42, .68);
    box-shadow:
        0 18px 45px rgba(2, 6, 23, .22),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

.tv-orbit-important-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tv-orbit-important-head span {
    color: #f8fafc;
    font-size: .86rem;
    font-weight: 950;
    letter-spacing: .01em;
}

.tv-orbit-important-head a {
    color: #67e8f9;
    font-size: .78rem;
    font-weight: 900;
    text-decoration: none;
}

.tv-orbit-important-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.tv-orbit-important-button {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 9px 11px;
    border: 1px solid rgba(56, 189, 248, .18);
    border-radius: 17px;
    background: rgba(8, 16, 34, .72);
    color: #e0f2fe;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.tv-orbit-important-button:hover,
.tv-orbit-important-button:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(34, 211, 238, .46);
    background: rgba(14, 165, 233, .14);
    box-shadow: 0 14px 30px rgba(14, 165, 233, .16), inset 0 1px 0 rgba(255, 255, 255, .08);
    outline: none;
}

.tv-orbit-important-button .mud-icon-root {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(37, 99, 235, .32), rgba(34, 211, 238, .18));
    color: #67e8f9;
}

.tv-orbit-important-button span {
    min-width: 0;
    color: inherit;
    font-size: .84rem;
    font-weight: 900;
    line-height: 1.15;
}

.app.light.theme-pure-white .tv-command-home .tv-replica-landing .tv-orbit-important-tools {
    background: rgba(255, 255, 255, .92) !important;
    border-color: rgba(37, 99, 235, .16) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08) !important;
}

.app.light.theme-pure-white .tv-orbit-important-head span,
.app.light.theme-pure-white .tv-orbit-important-button {
    color: #0f172a !important;
}

.app.light.theme-pure-white .tv-orbit-important-head a {
    color: #2563eb !important;
}

.app.light.theme-pure-white .tv-orbit-important-button {
    background: #ffffff !important;
    border-color: rgba(37, 99, 235, .16) !important;
}

@media (max-width: 640px) {
    .tv-orbit-important-grid {
        grid-template-columns: 1fr;
    }

    .tv-orbit-tool-row {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Final text containment guard for homepage cards with short labels such as Developers. */
.tv-command-home :where(
    .tv-home-usecase-grid article,
    .tv-home-growth-grid article,
    .tv-home-guide-grid a,
    .tv-home-audience-card,
    .tv-replica-category-card,
    .tv-replica-tool-card,
    .tv-orbit-important-button
) {
    min-width: 0;
    overflow: hidden;
}

.tv-command-home :where(
    .tv-home-usecase-grid h3,
    .tv-home-usecase-grid p,
    .tv-home-growth-grid b,
    .tv-home-growth-grid span,
    .tv-home-guide-grid b,
    .tv-home-guide-grid small,
    .tv-home-audience-card b,
    .tv-home-audience-card small,
    .tv-replica-category-card b,
    .tv-replica-category-card small,
    .tv-replica-tool-card b,
    .tv-replica-tool-card small,
    .tv-orbit-important-button span
) {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Final compact heading scale across the app. Keep titles readable without oversized blocks. */
.app :where(h1, .mud-typography-h1) {
    font-size: clamp(1.55rem, 2.2vw, 2.25rem) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    margin-block: 0 .55rem !important;
}

.app :where(h2, .mud-typography-h2) {
    font-size: clamp(1.18rem, 1.55vw, 1.55rem) !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
    margin-block: 0 .45rem !important;
}

.app :where(h3, .mud-typography-h3) {
    font-size: clamp(1rem, 1.15vw, 1.18rem) !important;
    line-height: 1.22 !important;
    letter-spacing: 0 !important;
    margin-block: 0 .35rem !important;
}

.app :where(.tool-head h1, .tool-route .tool-head h1) {
    font-size: clamp(1.25rem, 1.65vw, 1.6rem) !important;
    line-height: 1.15 !important;
}

.app :where(.category-market-hero h1, .library-hero h1, .blog-hero h1, .blog-article-hero h1, .legal-hero h1, .info-hero h1, .home-command-head h1, .compact-library-hero h1) {
    font-size: clamp(1.55rem, 2vw, 2.15rem) !important;
    line-height: 1.14 !important;
}

.app .tv-command-home .tv-replica-landing .tv-home-hero-copy h1 {
    font-size: clamp(2rem, 3.4vw, 3.35rem) !important;
    line-height: 1.08 !important;
}

.app :where(.tool-content-section h2, .tool-example-section h2, .tool-meta-grid h2, .tool-faq-list h2, .tv-card-head h2, .studio-panel-head h2, .section-title h2, .page-title-row h1) {
    font-size: clamp(1.05rem, 1.2vw, 1.28rem) !important;
    line-height: 1.2 !important;
}

@media (max-width: 640px) {
    .app :where(h1, .mud-typography-h1) {
        font-size: clamp(1.35rem, 6vw, 1.85rem) !important;
    }

    .app .tv-command-home .tv-replica-landing .tv-home-hero-copy h1 {
        font-size: clamp(1.7rem, 8vw, 2.35rem) !important;
    }
}

/* Final upload control theme: remove native white/grey file picker surfaces across the app. */
.app :where(
    .file-input,
    input[type="file"],
    .pdf-upload-box,
    .pdf-upload-zone,
    .upload-zone,
    .drop-zone,
    .file-drop-zone,
    .background-remover-dropzone,
    .background-remover-background-upload
) {
    border: 1px dashed rgba(56, 189, 248, .30) !important;
    border-radius: 16px !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(34, 211, 238, .12), transparent 34%),
        linear-gradient(145deg, rgba(15, 23, 42, .86), rgba(7, 20, 54, .72)) !important;
    color: #e0f2fe !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 42px rgba(2, 6, 23, .20) !important;
}

.app :where(.file-input, input[type="file"]) {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px !important;
    font-weight: 800 !important;
}

.app :where(.file-input, input[type="file"])::file-selector-button {
    margin-right: 12px !important;
    border: 1px solid rgba(34, 211, 238, .34) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #2563eb, #22d3ee) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    padding: 9px 14px !important;
    cursor: pointer !important;
    box-shadow: 0 10px 26px rgba(34, 211, 238, .16) !important;
}

.app :where(.file-input, input[type="file"])::-webkit-file-upload-button {
    margin-right: 12px !important;
    border: 1px solid rgba(34, 211, 238, .34) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #2563eb, #22d3ee) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    padding: 9px 14px !important;
    cursor: pointer !important;
    box-shadow: 0 10px 26px rgba(34, 211, 238, .16) !important;
}

.app :where(.file-input, input[type="file"]):hover,
.app :where(.file-input, input[type="file"]):focus-visible,
.app :where(.pdf-upload-box, .pdf-upload-zone, .upload-zone, .drop-zone, .file-drop-zone, .background-remover-dropzone):hover {
    border-color: rgba(34, 211, 238, .50) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(34, 211, 238, .16), transparent 36%),
        linear-gradient(145deg, rgba(15, 23, 42, .92), rgba(14, 35, 78, .78)) !important;
    box-shadow: 0 20px 54px rgba(14, 165, 233, .14), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
    outline: none !important;
}

.app :where(.pdf-upload-box .muted, .pdf-upload-box small, .upload-zone small, .file-drop-zone small, .background-remover-dropzone span) {
    color: #cbd5e1 !important;
}

/* Final inner-page title compaction. This intentionally keeps page headers small and dashboard-like. */
.app :where(h1, .mud-typography-h1) {
    font-size: clamp(1.25rem, 1.55vw, 1.7rem) !important;
    line-height: 1.14 !important;
    margin-block: 0 .42rem !important;
}

.app :where(h2, .mud-typography-h2) {
    font-size: clamp(1.02rem, 1.15vw, 1.26rem) !important;
    line-height: 1.18 !important;
    margin-block: 0 .34rem !important;
}

.app :where(h3, .mud-typography-h3) {
    font-size: clamp(.94rem, 1vw, 1.08rem) !important;
    line-height: 1.22 !important;
    margin-block: 0 .28rem !important;
}

.app :where(
    .tool-head h1,
    .tool-route .tool-head h1,
    .category-market-hero h1,
    .readable-category-hero h1,
    .library-hero h1,
    .compact-library-hero h1,
    .blog-hero h1,
    .blog-article-hero h1,
    .legal-hero h1,
    .info-hero h1,
    .tv-bookmarks-hero h1,
    .home-command-head h1,
    .page-title-row h1
) {
    font-size: clamp(1.18rem, 1.42vw, 1.55rem) !important;
    line-height: 1.16 !important;
}

.app :where(
    .tool-content-section h2,
    .tool-example-section h2,
    .tool-meta-grid h2,
    .tool-faq-list h2,
    .category-insight-card h2,
    .category-faq-panel h2,
    .studio-panel-head h2,
    .section-title h2,
    .tv-card-head h2
) {
    font-size: clamp(.98rem, 1.05vw, 1.16rem) !important;
    line-height: 1.2 !important;
}

.app .tv-command-home .tv-replica-landing .tv-home-hero-copy h1 {
    font-size: clamp(1.8rem, 3vw, 3rem) !important;
    line-height: 1.08 !important;
}

@media (max-width: 640px) {
    .app :where(h1, .mud-typography-h1),
    .app :where(
        .tool-head h1,
        .tool-route .tool-head h1,
        .category-market-hero h1,
        .readable-category-hero h1,
        .library-hero h1,
        .compact-library-hero h1,
        .blog-hero h1,
        .blog-article-hero h1,
        .legal-hero h1,
        .info-hero h1,
        .tv-bookmarks-hero h1,
        .page-title-row h1
    ) {
        font-size: clamp(1.12rem, 5vw, 1.45rem) !important;
    }

    .app .tv-command-home .tv-replica-landing .tv-home-hero-copy h1 {
        font-size: clamp(1.55rem, 7.2vw, 2.15rem) !important;
    }
}

/* Keep semantic H1 tags, but render them visually like compact H3 headings. */
.app :where(h1, .mud-typography-h1),
.app :where(
    .tool-head h1,
    .tool-route .tool-head h1,
    .category-market-hero h1,
    .readable-category-hero h1,
    .library-hero h1,
    .compact-library-hero h1,
    .blog-hero h1,
    .blog-article-hero h1,
    .legal-hero h1,
    .info-hero h1,
    .tv-bookmarks-hero h1,
    .home-command-head h1,
    .page-title-row h1,
    .tv-command-home .tv-replica-landing .tv-home-hero-copy h1
) {
    font-size: clamp(.96rem, 1.08vw, 1.18rem) !important;
    line-height: 1.22 !important;
    letter-spacing: 0 !important;
    margin-block: 0 .32rem !important;
}

@media (max-width: 640px) {
    .app :where(h1, .mud-typography-h1),
    .app :where(
        .tool-head h1,
        .tool-route .tool-head h1,
        .category-market-hero h1,
        .readable-category-hero h1,
        .library-hero h1,
        .compact-library-hero h1,
        .blog-hero h1,
        .blog-article-hero h1,
        .legal-hero h1,
        .info-hero h1,
        .tv-bookmarks-hero h1,
        .home-command-head h1,
        .page-title-row h1,
        .tv-command-home .tv-replica-landing .tv-home-hero-copy h1
    ) {
        font-size: clamp(.95rem, 4vw, 1.12rem) !important;
    }
}

/* Inner pages are tool-first: no global footer, compact supporting text, tighter panels. */
.app.inner-route :where(.footer, .site-footer, .app-footer, .footer-wrap) {
    display: none !important;
}

.app.inner-route :where(.main, .mud-main-content, .tv-app-main-content) {
    padding-bottom: 14px !important;
}

.app.inner-route :where(
    .tool-head,
    .tool-head-pro,
    .category-market-hero,
    .readable-category-hero,
    .library-hero,
    .compact-library-hero,
    .blog-hero,
    .blog-article-hero,
    .legal-hero,
    .info-hero,
    .tv-bookmarks-hero,
    .page-title-row
) {
    margin-bottom: 10px !important;
    padding-block: 12px !important;
}

.app.inner-route :where(
    p,
    li,
    small,
    .muted,
    .tool-head p,
    .tool-content-section p,
    .tool-example-section p,
    .tool-meta-grid p,
    .tool-faq-list p,
    .category-insight-card p,
    .category-faq-panel p,
    .blog-card p,
    .legal-card p,
    .info-card p
) {
    font-size: .86rem !important;
    line-height: 1.42 !important;
}

.app.inner-route :where(
    .tool-body,
    .how-to,
    .tool-content-section,
    .tool-example-section,
    .tool-info-dock,
    .tool-meta-grid,
    .tool-faq-list,
    .related-tools,
    .category-tools-grid,
    .category-insights,
    .category-faq-panel,
    .blog-grid,
    .guide-grid
) {
    margin-top: 10px !important;
    gap: 10px !important;
}

.app.inner-route :where(
    .tool-panel,
    .tool-card,
    .panel-card,
    .calc-card,
    .webhook-card,
    .empty-panel,
    .tool-content-section,
    .tool-example-section,
    .tool-meta-grid article,
    .tool-faq-list article,
    .category-insight-card,
    .category-faq-panel,
    .blog-card,
    .legal-card,
    .info-card
) {
    padding: 12px !important;
}

.app.inner-route.tool-route :where(
    .tool-content-section,
    .tool-example-section,
    .tool-meta-grid,
    .tool-faq-list,
    .related-tools
) {
    opacity: .9;
}

.app.inner-route.tool-route :where(
    .tool-content-section h2,
    .tool-example-section h2,
    .tool-meta-grid h2,
    .tool-faq-list h2,
    .section-title h2
) {
    font-size: .96rem !important;
    margin-bottom: 6px !important;
}

.app.inner-route.tool-route :where(
    .tool-panel,
    .tool-card,
    .panel-card,
    .calc-card,
    .webhook-card,
    .pdf-workspace,
    .fx-shell,
    .studio-shell
) {
    box-shadow: 0 18px 55px rgba(14, 165, 233, .12), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

@media (max-width: 720px) {
    .app.inner-route :where(.main, .mud-main-content, .tv-app-main-content) {
        padding-inline: 8px !important;
    }

    .app.inner-route :where(
        .tool-head,
        .tool-head-pro,
        .category-market-hero,
        .readable-category-hero,
        .library-hero,
        .compact-library-hero,
        .blog-hero,
        .blog-article-hero,
        .legal-hero,
        .info-hero,
        .tv-bookmarks-hero
    ) {
        padding: 10px !important;
    }
}

/* Network suite hero: keep the header compact so the tool controls stay dominant. */
.app :where(.tool-head.tool-head-pro.network-hero) {
    padding: 10px 12px !important;
    gap: 10px !important;
    align-items: center !important;
}

.app :where(.tool-head.tool-head-pro.network-hero h1) {
    font-size: clamp(.92rem, 1vw, 1.08rem) !important;
    line-height: 1.18 !important;
    margin: 0 0 .18rem !important;
}

.app :where(.tool-head.tool-head-pro.network-hero p) {
    font-size: .78rem !important;
    line-height: 1.32 !important;
    margin-top: 2px !important;
    max-width: 72ch !important;
}

.app :where(.tool-head.tool-head-pro.network-hero .tool-title-icon) {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
    border-radius: 10px !important;
}

.app :where(.tool-head.tool-head-pro.network-hero .tool-title-icon .mud-icon-root) {
    font-size: 1.25rem !important;
}

/* Global compact ToolHero system.
   Keeps semantic, visible H1 headings while making tool input/workspace areas the page focus. */
.app.tool-route :where(
    .tool-head,
    .tool-head-pro,
    .tool-hero,
    .tool-page-hero,
    .tool-header,
    .tool-page-header
) {
    min-height: auto !important;
    padding: 34px 24px !important;
    margin-bottom: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
}

.app.tool-route :where(
    .tool-head > div:nth-child(2),
    .tool-hero-content,
    .tool-header-content,
    .tool-page-header-content
) {
    max-width: 1180px !important;
    min-width: 0 !important;
    padding-right: 0 !important;
}

.app.tool-route :where(
    .tool-title-icon,
    .tool-icon,
    .tool-hero-icon,
    .tool-header-icon
) {
    width: 54px !important;
    height: 54px !important;
    flex: 0 0 54px !important;
    border-radius: 16px !important;
}

.app.tool-route :where(
    .tool-title-icon .mud-icon-root,
    .tool-icon .mud-icon-root,
    .tool-hero-icon .mud-icon-root,
    .tool-header-icon .mud-icon-root
) {
    font-size: 1.75rem !important;
}

.app.tool-route :where(
    .tool-head h1,
    .tool-header h1,
    .tool-page-header h1,
    .tool-hero h1,
    .tool-title,
    .tool-hero-title,
    .tool-page-title
) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    font-size: clamp(30px, 3.5vw, 44px) !important;
    line-height: 1.05 !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    max-width: 980px !important;
}

.app.tool-route :where(
    .tool-head p,
    .tool-description,
    .tool-hero-description,
    .tool-subtitle,
    .tool-header-description
) {
    font-size: clamp(15px, 1.2vw, 17px) !important;
    line-height: 1.45 !important;
    margin: 8px 0 0 !important;
    max-width: 620px !important;
}

.app.tool-route :where(
    .tool-badges,
    .tool-hero-badges,
    .tool-header-badges
) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 12px !important;
}

.app.tool-route :where(
    .tool-badges span,
    .tool-hero-badge,
    .tool-badge,
    .badge,
    .badge-soft,
    .tool-status-badge
) {
    font-size: 12px !important;
    line-height: 1 !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
}

.app.tool-route :where(.tool-head-actions) {
    top: 14px !important;
    right: 14px !important;
}

.app.tool-route :where(.tool-body) {
    margin-top: 12px !important;
}

.app.tool-route :where(
    .tool-head.tool-head-pro.network-hero,
    .tool-head.tool-head-pro.education-hero
) {
    padding: 32px 24px !important;
}

.app.tool-route :where(.tool-panel:first-of-type, .tool-card:first-of-type, .panel-card:first-of-type, .calc-card:first-of-type) {
    margin-top: 0 !important;
}

@media (max-width: 768px) {
    .app.tool-route :where(
        .tool-head,
        .tool-head-pro,
        .tool-hero,
        .tool-page-hero,
        .tool-header,
        .tool-page-header
    ) {
        padding: 28px 16px !important;
        gap: 14px !important;
        align-items: flex-start !important;
    }

    .app.tool-route :where(
        .tool-title-icon,
        .tool-icon,
        .tool-hero-icon,
        .tool-header-icon
    ) {
        width: 46px !important;
        height: 46px !important;
        flex-basis: 46px !important;
        border-radius: 14px !important;
    }

    .app.tool-route :where(
        .tool-title-icon .mud-icon-root,
        .tool-icon .mud-icon-root,
        .tool-hero-icon .mud-icon-root,
        .tool-header-icon .mud-icon-root
    ) {
        font-size: 1.5rem !important;
    }

    .app.tool-route :where(
        .tool-head h1,
        .tool-header h1,
        .tool-page-header h1,
        .tool-hero h1,
        .tool-title,
        .tool-hero-title,
        .tool-page-title
    ) {
        font-size: clamp(26px, 8vw, 34px) !important;
        line-height: 1.06 !important;
    }

    .app.tool-route :where(
        .tool-head p,
        .tool-description,
        .tool-hero-description,
        .tool-subtitle,
        .tool-header-description
    ) {
        font-size: clamp(14px, 4vw, 16px) !important;
        margin-top: 6px !important;
    }

    .app.tool-route :where(
        .tool-badges span,
        .tool-hero-badge,
        .tool-badge,
        .badge,
        .badge-soft,
        .tool-status-badge
    ) {
        font-size: 11.5px !important;
        padding: 5px 9px !important;
    }

    .app.tool-route :where(.tool-head-actions) {
        position: static !important;
        margin-left: 0 !important;
        width: 100% !important;
        justify-content: flex-start !important;
    }
}

/* Final visual scale: tool H1s stay semantic, but must not look like large H1 display text. */
.app.tool-route :where(
    .tool-head h1,
    .tool-header h1,
    .tool-page-header h1,
    .tool-hero h1,
    .tool-title,
    .tool-hero-title,
    .tool-page-title
) {
    font-size: clamp(1rem, 1.12vw, 1.22rem) !important;
    line-height: 1.18 !important;
    font-weight: 850 !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
}

.app.tool-route :where(
    .tool-head p,
    .tool-description,
    .tool-hero-description,
    .tool-subtitle,
    .tool-header-description
) {
    font-size: .84rem !important;
    line-height: 1.36 !important;
    margin-top: 4px !important;
}

@media (max-width: 768px) {
    .app.tool-route :where(
        .tool-head h1,
        .tool-header h1,
        .tool-page-header h1,
        .tool-hero h1,
        .tool-title,
        .tool-hero-title,
        .tool-page-title
    ) {
        font-size: clamp(.98rem, 4vw, 1.16rem) !important;
    }
}

/* Absolute final tool-header override.
   Exact target for shared ToolLayout headers such as PDF Merger. */
html body .app.tool-route .focused-tool-page > header.tool-head.tool-head-pro,
html body .app.tool-route .focused-tool-page > .tool-head.tool-head-pro,
html body .app.tool-route header.tool-head.tool-head-pro {
    min-height: 0 !important;
    padding: 8px 10px !important;
    margin: 0 0 8px !important;
    gap: 8px !important;
    align-items: center !important;
    border-radius: 12px !important;
}

html body .app.tool-route .focused-tool-page > header.tool-head.tool-head-pro .tool-title-icon,
html body .app.tool-route .focused-tool-page > .tool-head.tool-head-pro .tool-title-icon,
html body .app.tool-route header.tool-head.tool-head-pro .tool-title-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    flex: 0 0 28px !important;
    border-radius: 8px !important;
}

html body .app.tool-route .focused-tool-page > header.tool-head.tool-head-pro .tool-title-icon .mud-icon-root,
html body .app.tool-route .focused-tool-page > .tool-head.tool-head-pro .tool-title-icon .mud-icon-root,
html body .app.tool-route header.tool-head.tool-head-pro .tool-title-icon .mud-icon-root {
    font-size: 1rem !important;
}

html body .app.tool-route .focused-tool-page > header.tool-head.tool-head-pro > div:nth-child(2),
html body .app.tool-route .focused-tool-page > .tool-head.tool-head-pro > div:nth-child(2),
html body .app.tool-route header.tool-head.tool-head-pro > div:nth-child(2) {
    min-width: 0 !important;
    padding-right: 44px !important;
}

html body .app.tool-route .focused-tool-page > header.tool-head.tool-head-pro h1,
html body .app.tool-route .focused-tool-page > .tool-head.tool-head-pro h1,
html body .app.tool-route header.tool-head.tool-head-pro h1 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body .app.tool-route .focused-tool-page > header.tool-head.tool-head-pro p,
html body .app.tool-route .focused-tool-page > .tool-head.tool-head-pro p,
html body .app.tool-route header.tool-head.tool-head-pro p {
    font-size: 11.5px !important;
    line-height: 1.25 !important;
    margin: 2px 0 0 !important;
    max-width: 620px !important;
}

html body .app.tool-route .focused-tool-page > header.tool-head.tool-head-pro .tool-badges,
html body .app.tool-route .focused-tool-page > .tool-head.tool-head-pro .tool-badges,
html body .app.tool-route header.tool-head.tool-head-pro .tool-badges {
    gap: 4px !important;
    margin-top: 4px !important;
}

html body .app.tool-route .focused-tool-page > header.tool-head.tool-head-pro .tool-badges span,
html body .app.tool-route .focused-tool-page > .tool-head.tool-head-pro .tool-badges span,
html body .app.tool-route header.tool-head.tool-head-pro .tool-badges span,
html body .app.tool-route .focused-tool-page > header.tool-head.tool-head-pro .badge,
html body .app.tool-route .focused-tool-page > .tool-head.tool-head-pro .badge,
html body .app.tool-route header.tool-head.tool-head-pro .badge,
html body .app.tool-route .focused-tool-page > header.tool-head.tool-head-pro .badge-soft,
html body .app.tool-route .focused-tool-page > .tool-head.tool-head-pro .badge-soft,
html body .app.tool-route header.tool-head.tool-head-pro .badge-soft {
    min-height: 0 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    padding: 3px 6px !important;
    gap: 3px !important;
}

html body .app.tool-route .focused-tool-page > header.tool-head.tool-head-pro .tool-badges .mud-icon-root,
html body .app.tool-route .focused-tool-page > .tool-head.tool-head-pro .tool-badges .mud-icon-root,
html body .app.tool-route header.tool-head.tool-head-pro .tool-badges .mud-icon-root {
    font-size: .82rem !important;
}

html body .app.tool-route .focused-tool-page > header.tool-head.tool-head-pro .tool-head-actions,
html body .app.tool-route .focused-tool-page > .tool-head.tool-head-pro .tool-head-actions,
html body .app.tool-route header.tool-head.tool-head-pro .tool-head-actions {
    top: 6px !important;
    right: 6px !important;
    gap: 4px !important;
}

html body .app.tool-route .focused-tool-page > header.tool-head.tool-head-pro .tool-action-btn,
html body .app.tool-route .focused-tool-page > .tool-head.tool-head-pro .tool-action-btn,
html body .app.tool-route header.tool-head.tool-head-pro .tool-action-btn {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    padding: 0 !important;
}

@media (max-width: 768px) {
    html body .app.tool-route .focused-tool-page > header.tool-head.tool-head-pro,
    html body .app.tool-route .focused-tool-page > .tool-head.tool-head-pro,
    html body .app.tool-route header.tool-head.tool-head-pro {
        padding: 8px !important;
        align-items: flex-start !important;
    }

    html body .app.tool-route .focused-tool-page > header.tool-head.tool-head-pro h1,
    html body .app.tool-route .focused-tool-page > .tool-head.tool-head-pro h1,
    html body .app.tool-route header.tool-head.tool-head-pro h1 {
        font-size: 13px !important;
    }
}

/* 2026-05-31 full application repair layer.
   This is intentionally last-in-file so every route receives the same loaded theme,
   spacing, containers, forms, cards, and missing component classes. */
:root {
    --dv-app-bg: #07091A;
    --dv-app-bg-2: #081329;
    --dv-app-surface: rgba(11, 21, 45, .92);
    --dv-app-surface-2: rgba(15, 29, 62, .88);
    --dv-app-card: rgba(12, 23, 50, .86);
    --dv-app-card-strong: #0f1e3f;
    --dv-app-border: rgba(88, 166, 255, .22);
    --dv-app-border-strong: rgba(56, 189, 248, .42);
    --dv-app-text: #f3f8ff;
    --dv-app-muted: #b9c7dc;
    --dv-app-soft: #dce9fb;
    --dv-app-primary: #38bdf8;
    --dv-app-primary-strong: #2563eb;
    --dv-app-accent: #22d3ee;
    --dv-app-success: #22c55e;
    --dv-app-warning: #fbbf24;
    --dv-app-danger: #fb7185;
    --dv-app-radius: 20px;
    --dv-app-radius-lg: 28px;
    --dv-app-shadow: 0 24px 70px rgba(0, 0, 0, .28);
    --dv-app-shadow-soft: 0 16px 48px rgba(2, 6, 23, .22);
    --dv-app-max: 1440px;
    --dv-app-wide: 1680px;
    --dv-app-readable: 860px;
    --bg: var(--dv-app-bg);
    --bg2: var(--dv-app-surface);
    --bg3: var(--dv-app-surface-2);
    --bg4: rgba(24, 42, 82, .92);
    --tx: var(--dv-app-text);
    --tx2: var(--dv-app-muted);
    --bd: var(--dv-app-border);
    --ac: var(--dv-app-primary);
    --ac2: var(--dv-app-accent);
    --acl: rgba(56, 189, 248, .16);
    --acl2: rgba(37, 99, 235, .18);
    --r: var(--dv-app-radius);
    --sh: var(--dv-app-shadow-soft);
    --sh2: var(--dv-app-shadow);
    --mw: var(--dv-app-max);
}

html,
body {
    max-width: 100%;
    overflow-x: clip;
    background: var(--dv-app-bg) !important;
    color: var(--dv-app-text) !important;
}

body {
    min-height: 100vh;
    font-family: "DM Sans", "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body:has(.app),
.app,
.app.light,
.app.dark,
.app.theme-neon,
.app.theme-midnight,
.app.theme-obsidian {
    color-scheme: dark !important;
    background:
        radial-gradient(circle at 9% -6%, rgba(14, 165, 233, .26), transparent 30vw),
        radial-gradient(circle at 96% 0%, rgba(37, 99, 235, .20), transparent 28vw),
        linear-gradient(180deg, #07091A 0%, #081329 46%, #07091A 100%) !important;
    color: var(--dv-app-text) !important;
}

.app *,
.app *::before,
.app *::after {
    box-sizing: border-box;
}

.app :where(img, video, canvas, svg, iframe) {
    max-width: 100%;
}

.app :where(a) {
    color: #7dd3fc;
    text-underline-offset: 3px;
}

.app :where(a:hover, a:focus-visible) {
    color: #bae6fd;
}

.app :where(:focus-visible) {
    outline: 3px solid rgba(125, 211, 252, .5) !important;
    outline-offset: 3px !important;
}

.tv-app-main-content,
.main {
    width: 100% !important;
    max-width: var(--dv-app-wide) !important;
    margin-inline: auto !important;
    padding: clamp(20px, 2.4vw, 36px) clamp(16px, 2.6vw, 44px) clamp(56px, 6vw, 96px) !important;
    color: var(--dv-app-text) !important;
}

.home-route .main {
    max-width: var(--dv-app-wide) !important;
}

.inner-route .main,
.tool-route .main {
    max-width: var(--dv-app-max) !important;
}

.embed-main {
    max-width: none !important;
    min-height: 100vh;
}

.studio-shell,
.library-market,
.single-library,
.category-market,
.blog-page,
.blog-article-page,
.legal-page,
.info-page,
.about-page,
.tool-page,
.focused-tool-page,
.universal-tool,
.calculator-tool,
.prompt-generator-studio,
.api-doc-studio,
.tv-bookmarks-page,
.word-dash-page {
    width: 100% !important;
    max-width: var(--dv-app-max) !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    color: var(--dv-app-text) !important;
}

.home-route .studio-shell,
.home-route .tv-command-home {
    max-width: var(--dv-app-wide) !important;
}

.blog-article-main,
.blog-article-content,
.legal-page .legal-panel,
.info-page .info-panel {
    max-width: var(--dv-app-readable);
}

.blog-article-content {
    margin-inline: auto;
}

.app :where(
    .tv-command-topbar,
    .tv-asana-topbar,
    .mud-drawer,
    .mud-popover,
    .mud-paper,
    .mud-card,
    .tool-head,
    .tool-panel,
    .calc-card,
    .panel-card,
    .webhook-card,
    .pdf-panel,
    .pdf-workspace,
    .legal-card,
    .legal-panel,
    .info-card,
    .auth-card,
    .category-search-card,
    .blog-hero,
    .blog-article-hero,
    .blog-featured,
    .blog-listing,
    .blog-article-content,
    .blog-toc,
    .category-market-hero,
    .category-readable-card,
    .category-insight-card,
    .category-faq-panel,
    .tv-bookmarks-panel,
    .tv-bookmark-manager-card,
    .tv-bookmark-search-card,
    .empty-panel,
    .empty-state,
    .result,
    .security-status-panel,
    .security-card,
    .crypto-card,
    .home-bookmarks-card,
    .studio-section,
    .studio-quick-panel,
    .library-group,
    .tv-category-room,
    .tv-replica-category-card,
    .tv-replica-tool-card,
    .tv-home-growth-grid article,
    .tv-home-usecase-grid article,
    .tool-content-section,
    .tool-example-section,
    .tool-meta-grid article,
    .tool-faq-list article,
    .related-tool-row a,
    .blog-related-grid a,
    .blog-related-articles a
) {
    border: 1px solid var(--dv-app-border) !important;
    border-radius: var(--dv-app-radius-lg) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(56, 189, 248, .10), transparent 34%),
        linear-gradient(180deg, rgba(15, 29, 62, .92), rgba(8, 19, 41, .88)) !important;
    color: var(--dv-app-text) !important;
    box-shadow: var(--dv-app-shadow-soft) !important;
}

.app :where(
    .tool-panel,
    .calc-card,
    .panel-card,
    .pdf-panel,
    .pdf-workspace,
    .legal-card,
    .legal-panel,
    .info-card,
    .auth-card,
    .blog-card,
    .category-readable-card,
    .category-insight-card,
    .tv-bookmarks-panel,
    .empty-panel,
    .empty-state,
    .result
) {
    padding: clamp(18px, 2vw, 28px) !important;
}

.app :where(
    .tool-head,
    .tool-head-pro,
    .category-market-hero,
    .readable-category-hero,
    .library-hero,
    .compact-library-hero,
    .blog-hero,
    .blog-article-hero,
    .legal-hero,
    .info-hero,
    .seo-landing-hero,
    .tv-bookmarks-hero
) {
    display: flex !important;
    align-items: center !important;
    gap: clamp(14px, 2vw, 24px) !important;
    min-height: auto !important;
    margin-bottom: clamp(18px, 2vw, 28px) !important;
    padding: clamp(24px, 3vw, 44px) !important;
    border-radius: clamp(22px, 2.6vw, 36px) !important;
}

.app :where(h1, .mud-typography-h1),
.app :where(.tool-head h1, .category-market-hero h1, .library-hero h1, .blog-hero h1, .blog-article-hero h1, .legal-hero h1, .info-hero h1, .tv-bookmarks-hero h1) {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    color: var(--dv-app-text) !important;
    font-size: clamp(2rem, 4vw, 4.6rem) !important;
    line-height: 1.02 !important;
    font-weight: 850 !important;
    letter-spacing: -.04em !important;
    margin: 0 0 .55rem !important;
    max-width: 1050px !important;
}

.app.tool-route :where(.tool-head h1, .tool-title, .tool-page-title, .tool-hero-title),
.app.inner-route :where(.category-market-hero h1, .library-hero h1, .blog-hero h1, .blog-article-hero h1, .legal-hero h1, .info-hero h1, .tv-bookmarks-hero h1) {
    font-size: clamp(1.9rem, 3.1vw, 3.35rem) !important;
}

.app :where(h2, .mud-typography-h2) {
    color: var(--dv-app-text) !important;
    font-size: clamp(1.35rem, 2vw, 2.2rem) !important;
    line-height: 1.15 !important;
    font-weight: 830 !important;
    letter-spacing: -.02em !important;
}

.app :where(h3, .mud-typography-h3) {
    color: var(--dv-app-text) !important;
    font-size: clamp(1.05rem, 1.3vw, 1.35rem) !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

.app :where(p, li, dd, dt, small, label, .mud-typography, .muted, .text-muted, .subtitle, .tool-description, .category-readable-description, .blog-card p, .legal-card p, .info-card p) {
    color: var(--dv-app-muted) !important;
    line-height: 1.6 !important;
}

.app :where(.muted, .text-muted, small, .mud-input-helper-text, .mud-typography-body2) {
    color: var(--dv-app-muted) !important;
}

.tool-title-icon,
.tool-icon,
.tool-hero-icon,
.category-market-icon,
.category-readable-icon,
.tv-tool-button-icon,
.tv-replica-tool-icon,
.footer-logo-mark,
.tv-asana-brand-mark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(37, 99, 235, .95), rgba(34, 211, 238, .88)) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 34px rgba(14, 165, 233, .22) !important;
}

.tool-title-icon,
.tool-icon,
.tool-hero-icon,
.category-market-icon {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
}

.tool-title-icon .mud-icon-root,
.tool-icon .mud-icon-root,
.tool-hero-icon .mud-icon-root,
.category-market-icon .mud-icon-root {
    font-size: 1.85rem !important;
    color: inherit !important;
}

.app :where(.badge, .badge-soft, .badge-warn, .tool-badge, .tool-info-chip, .tool-info-chip-primary, .mud-chip, .studio-kicker, .blog-kicker, .library-kicker, .section-kicker) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 30px !important;
    padding: 6px 11px !important;
    border: 1px solid rgba(56, 189, 248, .24) !important;
    border-radius: 999px !important;
    background: rgba(14, 165, 233, .12) !important;
    color: #dff7ff !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-transform: none !important;
}

.badge-warn {
    border-color: rgba(251, 191, 36, .36) !important;
    background: rgba(251, 191, 36, .13) !important;
    color: #fde68a !important;
}

.app :where(.btn-p, .btn-s, .btn, .copybtn, .mud-button-root, button:not(.mud-icon-button-root)) {
    min-height: 42px !important;
    border-radius: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.app :where(.btn-p, .mud-button-filled-primary, .contact-send-btn) {
    border: 1px solid rgba(125, 211, 252, .18) !important;
    background: linear-gradient(135deg, #2563eb, #22d3ee) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 40px rgba(14, 165, 233, .24) !important;
}

.app :where(.btn-s, .mud-button-outlined, .mud-button-text, .copybtn) {
    border: 1px solid var(--dv-app-border) !important;
    background: rgba(15, 29, 62, .72) !important;
    color: var(--dv-app-soft) !important;
    box-shadow: none !important;
}

.app :where(.btn-p, .btn-s, .mud-button-root, button):hover {
    transform: translateY(-1px);
}

.app :where(input, textarea, select, .ta, .mud-input-root, .mud-input, .mud-select, .mud-input-slot) {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    color: var(--dv-app-text) !important;
}

.app :where(input, textarea, select, .ta, .mud-input-root) {
    border-color: rgba(125, 211, 252, .24) !important;
    border-radius: 16px !important;
    background: rgba(7, 18, 40, .72) !important;
}

.app :where(input, textarea, select, .ta) {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(125, 211, 252, .24);
    outline: none;
}

.app :where(input::placeholder, textarea::placeholder) {
    color: rgba(203, 213, 225, .76) !important;
    opacity: 1 !important;
}

.app :where(input:focus, textarea:focus, select:focus, .ta:focus, .mud-input-root:focus-within) {
    border-color: rgba(125, 211, 252, .72) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .18) !important;
}

.tool-form,
.auth-form,
.tool-form.mud-converter {
    display: grid !important;
    gap: 16px !important;
}

.tool-mud-field {
    width: 100% !important;
}

.form-row,
.calc-inline,
.btn-row,
.page-gate-actions,
.typing-toolbar,
.education-toolbar-row,
.tool-actions,
.result-actions,
.pdf-result-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.form-col {
    flex: 1 1 240px;
    min-width: 0;
}

.check-line {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--dv-app-border) !important;
    border-radius: 16px !important;
    background: rgba(14, 165, 233, .08) !important;
    color: var(--dv-app-soft) !important;
}

.check-line input {
    width: 18px;
    min-width: 18px;
    height: 18px;
    margin-top: 2px;
}

.table-wrap,
.mud-table-container,
.admin-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    border-radius: 18px !important;
    border: 1px solid var(--dv-app-border) !important;
}

.data-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    color: var(--dv-app-text);
}

.data-table th,
.data-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(125, 211, 252, .14);
    text-align: left;
    vertical-align: top;
}

.data-table th {
    color: var(--dv-app-soft);
    font-weight: 850;
    background: rgba(14, 165, 233, .08);
}

.empty-state,
.universal-empty-result,
.prompt-empty-state,
.page-gate-loading {
    display: grid !important;
    place-items: center !important;
    gap: 10px !important;
    min-height: 150px !important;
    text-align: center !important;
    color: var(--dv-app-muted) !important;
}

.page-gate-alert {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 18px !important;
    border: 1px solid rgba(251, 191, 36, .34) !important;
    border-radius: 20px !important;
    background: rgba(251, 191, 36, .12) !important;
}

.page-gate-copy {
    display: grid;
    gap: 4px;
}

.auth-link-line {
    margin: 8px 0 0 !important;
    color: var(--dv-app-muted) !important;
}

.security-setup-grid,
.security-status-panel {
    display: grid;
    gap: 16px;
}

.security-setup-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.security-qr,
.security-secret,
.recovery-code-list,
.hash-list,
.diff-out,
.diff-stats,
.compact-list,
.stack-list,
.bulk-list {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.hash-list,
.diff-out,
.recovery-code-list {
    padding: 14px;
    border: 1px solid var(--dv-app-border);
    border-radius: 18px;
    background: rgba(2, 6, 23, .36);
}

.hash-name {
    color: var(--dv-app-soft);
    font-weight: 800;
}

.pwd-disp,
.sw-display,
.coin-display,
.typing-target {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--dv-app-border);
    border-radius: 18px;
    background: rgba(2, 6, 23, .42);
    color: var(--dv-app-text);
    overflow-wrap: anywhere;
}

.strength-bar,
.bar-wrap,
.bmi-bar {
    width: 100%;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, .18);
}

.strength-fill,
.bar-seg,
.bar-p,
.bar-i,
.bmi-r {
    height: 100%;
    border-radius: inherit;
}

.bulk-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(125, 211, 252, .16);
    border-radius: 14px;
    background: rgba(15, 29, 62, .52);
}

.bulk-row code,
.out,
.code-input textarea,
.api-code-box,
pre,
code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
    color: #e0f2fe !important;
    overflow-wrap: anywhere;
}

.color-preview {
    min-height: 88px;
    border-radius: 18px;
    border: 1px solid var(--dv-app-border);
}

.calc-inline input {
    max-width: 180px;
}

.d-flex {
    display: flex !important;
}

.align-center {
    align-items: center !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-start {
    justify-content: flex-start !important;
}

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: .75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: .75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.my-3 { margin-block: .75rem !important; }
.my-4 { margin-block: 1rem !important; }
.pa-4 { padding: 1rem !important; }
.pa-5 { padding: 1.25rem !important; }

.active,
.primary,
.required,
.optional,
.static,
.compact,
.slim,
.is-loading,
.newer,
.old,
.one,
.two,
.true,
.zip,
.accent {
    --dv-state-color: var(--dv-app-primary);
}

.strength-lbl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--dv-app-soft) !important;
    font-weight: 800;
}

.contact-hero,
.education-hero,
.seo-landing-hero {
    border: 1px solid var(--dv-app-border) !important;
    border-radius: var(--dv-app-radius-lg) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(56, 189, 248, .12), transparent 34%),
        linear-gradient(180deg, rgba(15, 29, 62, .94), rgba(8, 19, 41, .86)) !important;
    color: var(--dv-app-text) !important;
    box-shadow: var(--dv-app-shadow-soft) !important;
}

.education-toolbar,
.blog-category-filter,
.tool-manager-alert {
    width: 100%;
    min-width: 0;
}

.footer-column-wide {
    grid-column: span 2;
}

.checker {
    background-image:
        linear-gradient(45deg, rgba(255,255,255,.10) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,.10) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,.10) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.10) 75%);
    background-size: 18px 18px;
    background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}

.blog-article {
    max-width: var(--dv-app-readable);
    margin-inline: auto;
}

.tv-command-topbar.tv-asana-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
    width: min(calc(100% - 24px), var(--dv-app-wide)) !important;
    margin: 12px auto 0 !important;
    min-height: 72px !important;
    display: flex !important;
    align-items: center !important;
    gap: clamp(10px, 1.5vw, 18px) !important;
    padding: 10px 14px !important;
    border: 1px solid rgba(125, 211, 252, .18) !important;
    border-radius: 22px !important;
    background: rgba(8, 19, 41, .92) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
    box-shadow: none !important;
}

.tv-asana-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: fit-content !important;
    color: var(--dv-app-text) !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

.tv-asana-brand-mark,
.tv-asana-brand-mark img {
    width: 42px !important;
    height: 42px !important;
}

.tv-asana-menu {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
}

.tv-asana-menu-item {
    position: static !important;
}

.tv-asana-menu-item summary {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 0 10px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    color: var(--dv-app-soft) !important;
    font-size: .84rem !important;
    font-weight: 850 !important;
    list-style: none !important;
    cursor: pointer !important;
}

.tv-asana-menu-item summary::-webkit-details-marker {
    display: none;
}

.tv-asana-menu-item[open] summary,
.tv-asana-menu-item summary:hover,
.tv-asana-menu-item summary:focus-visible {
    border-color: rgba(56, 189, 248, .28) !important;
    background: rgba(14, 165, 233, .12) !important;
    color: #ffffff !important;
}

.tv-asana-mega {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 1250 !important;
    width: min(920px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 110px) !important;
    overflow: auto !important;
    display: grid !important;
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1.6fr) !important;
    gap: 16px !important;
    padding: 16px !important;
    border: 1px solid rgba(125, 211, 252, .22) !important;
    border-radius: 22px !important;
    background: rgba(6, 15, 34, .98) !important;
    color: var(--dv-app-text) !important;
    box-shadow: none !important;
    backdrop-filter: blur(16px) !important;
}

.tv-asana-more-item .tv-asana-mega {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
}

.tv-asana-mega-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.tv-asana-mega-grid section,
.tv-asana-mega-intro {
    min-width: 0 !important;
    padding: 12px !important;
    border: 1px solid rgba(125, 211, 252, .14) !important;
    border-radius: 18px !important;
    background: rgba(15, 29, 62, .54) !important;
}

.tv-asana-tool-link,
.tv-asana-mega-grid section > a:not(.tv-asana-mega-section),
.tv-asana-mega-section {
    min-width: 0 !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 8px 9px !important;
    border-radius: 12px !important;
    color: var(--dv-app-soft) !important;
    text-decoration: none !important;
    overflow-wrap: anywhere !important;
}

.tv-asana-tool-link:hover,
.tv-asana-mega-section:hover {
    background: rgba(14, 165, 233, .12) !important;
    color: #ffffff !important;
}

.tv-asana-tool-link .mud-icon-root,
.tv-asana-mega-section .mud-icon-root {
    color: #67e8f9 !important;
    flex: 0 0 auto;
}

/* Full menu inventory: every category dropdown should show every registered tool. */
.app .tv-asana-mega {
    width: min(1500px, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 88px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    grid-template-columns: minmax(190px, 250px) minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 14px !important;
    scrollbar-gutter: stable !important;
}

.app .tv-asana-more-item .tv-asana-mega {
    width: min(1500px, calc(100vw - 24px)) !important;
}

.app .tv-asana-mega-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 10px !important;
    align-items: start !important;
}

.app .tv-asana-mega-grid section {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
    align-content: start !important;
    gap: 5px !important;
    padding: 10px !important;
}

.app .tv-asana-mega-section {
    grid-column: 1 / -1 !important;
    margin-bottom: 3px !important;
}

.app .tv-asana-tool-link,
.app .tv-asana-mega-grid section > a:not(.tv-asana-mega-section) {
    min-height: 34px !important;
    gap: 7px !important;
    padding: 6px 7px !important;
    border-radius: 10px !important;
    font-size: .76rem !important;
    line-height: 1.18 !important;
}

.app .tv-asana-tool-link .mud-icon-root,
.app .tv-asana-mega-grid section > a:not(.tv-asana-mega-section) .mud-icon-root {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
}

.app .tv-asana-tool-link > span {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

@media (max-width: 1180px) {
    .app .tv-asana-mega {
        grid-template-columns: 1fr !important;
        left: 12px !important;
        right: 12px !important;
        width: calc(100vw - 24px) !important;
    }

    .app .tv-asana-mega-intro {
        position: static !important;
    }
}

/* Row-wise mega menu layout: section header first, then tools flowing left to right. */
.app .tv-asana-mega-grid {
    grid-template-columns: 1fr !important;
}

.app .tv-asana-mega-grid section {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
}

.app .tv-asana-mega-grid section:has(.tv-asana-tool-link:nth-of-type(12)) {
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
}

.app .tv-asana-mega-section {
    grid-column: 1 / -1 !important;
}

.app .tv-asana-tool-link {
    width: 100% !important;
}

.tv-asana-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: fit-content !important;
}

.tv-asana-action-link,
.tv-sticky-theme-button,
.tv-asana-mobile-menu {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(125, 211, 252, .16) !important;
    border-radius: 999px !important;
    background: rgba(14, 165, 233, .09) !important;
    color: var(--dv-app-soft) !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.tv-asana-mobile-menu {
    display: none !important;
}

.tool-popup {
    display: none;
}

.tool-popup[aria-hidden="false"],
.tool-popup.is-open,
.tool-popup.open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1300;
}

.tool-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, .62);
    backdrop-filter: blur(6px);
}

.tool-popup-shell {
    position: absolute;
    inset: 5vh 5vw;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--dv-app-border-strong);
    border-radius: 24px;
    background: var(--dv-app-bg-2);
    box-shadow: var(--dv-app-shadow);
}

.tool-popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--dv-app-border);
}

.tool-popup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tool-popup iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--dv-app-bg);
}

.cf-turnstile {
    max-width: 100%;
    min-height: 70px;
}

.footer {
    color: var(--dv-app-muted) !important;
}

@media (max-width: 1180px) {
    .tv-asana-menu {
        justify-content: flex-start !important;
        overflow-x: auto !important;
        scrollbar-width: thin;
    }

    .tv-asana-action-link span {
        display: none !important;
    }
}

@media (max-width: 900px) {
    .tv-command-topbar.tv-asana-topbar {
        width: min(calc(100% - 16px), var(--dv-app-wide)) !important;
        margin-top: 8px !important;
        flex-wrap: wrap !important;
    }

    .tv-asana-menu {
        display: none !important;
    }

    .tv-asana-mobile-menu {
        display: inline-flex !important;
    }

    .tv-app-main-content,
    .main {
        padding-inline: 12px !important;
    }

    .app :where(.tool-head, .tool-head-pro, .category-market-hero, .blog-hero, .blog-article-hero, .legal-hero, .info-hero, .tv-bookmarks-hero) {
        align-items: flex-start !important;
        padding: 20px !important;
    }

    .app :where(h1, .mud-typography-h1),
    .app.tool-route :where(.tool-head h1, .tool-title, .tool-page-title),
    .app.inner-route :where(.category-market-hero h1, .library-hero h1, .blog-hero h1, .blog-article-hero h1, .legal-hero h1, .info-hero h1, .tv-bookmarks-hero h1) {
        font-size: clamp(1.65rem, 8vw, 2.55rem) !important;
    }

    .app :where(.tool-title-icon, .tool-icon, .tool-hero-icon, .category-market-icon) {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
    }

    .blog-article-layout,
    .contact-grid,
    .category-insight-grid,
    .security-setup-grid,
    .form-row,
    .calc-inline {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .tv-command-topbar.tv-asana-topbar {
        border-radius: 18px !important;
        padding: 8px !important;
    }

    .tv-asana-brand span:not(.tv-asana-brand-mark):not(.tv-brand-tooltip) {
        font-size: .92rem !important;
    }

    .tv-asana-brand-mark,
    .tv-asana-brand-mark img {
        width: 36px !important;
        height: 36px !important;
    }

    .tv-app-main-content,
    .main {
        padding: 14px 10px 48px !important;
    }

    .app :where(.tool-panel, .calc-card, .panel-card, .pdf-panel, .pdf-workspace, .legal-card, .legal-panel, .info-card, .auth-card, .blog-card, .category-readable-card, .category-insight-card, .empty-panel, .empty-state) {
        padding: 14px !important;
        border-radius: 18px !important;
    }

    .bulk-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .app :where(.btn-p, .btn-s, .btn, .copybtn, .mud-button-root, button:not(.mud-icon-button-root)) {
        width: auto;
        min-height: 44px !important;
    }
}

/* Tool-focused workspace: maximize the usable tool area on every tool route. */
html body .app.tool-route .mud-main-content,
html body .app.tool-route .tv-app-main-content,
html body .app.tool-route .main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px 10px 12px !important;
    overflow-x: clip !important;
}

html body .app.tool-route .tool-page,
html body .app.tool-route .focused-tool-page,
html body .app.tool-route .tool-body {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    min-width: 0 !important;
}

html body .app.tool-route .breadcrumb {
    margin: 0 0 6px !important;
    padding: 0 !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    opacity: .78 !important;
}

html body .app.tool-route .tool-body {
    margin-top: 6px !important;
}

html body .app.tool-route .tool-info-strip {
    margin: 0 0 6px !important;
    min-height: 0 !important;
}

html body .app.tool-route .tool-info-chip,
html body .app.tool-route .tool-info-chip-primary {
    min-height: 0 !important;
    padding: 5px 8px !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
}

html body .app.tool-route .tool-panel,
html body .app.tool-route .tool-card,
html body .app.tool-route .panel-card,
html body .app.tool-route .calc-card,
html body .app.tool-route .webhook-card,
html body .app.tool-route .empty-panel,
html body .app.tool-route .pdf-panel,
html body .app.tool-route .pdf-workspace,
html body .app.tool-route .fx-shell,
html body .app.tool-route .studio-shell,
html body .app.tool-route .passport-editor-box,
html body .app.tool-route .background-remover-shell {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 12px !important;
    margin-block: 0 10px !important;
}

html body .app.tool-route .mud-grid,
html body .app.tool-route .mud-grid-spacing-xs-1,
html body .app.tool-route .mud-grid-spacing-xs-2,
html body .app.tool-route .mud-grid-spacing-xs-3,
html body .app.tool-route .mud-grid-spacing-xs-4 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

html body .app.tool-route .mud-grid > .mud-grid-item,
html body .app.tool-route .mud-grid-item,
html body .app.tool-route .mud-item {
    min-width: 0 !important;
    max-width: 100% !important;
}

html body .app.tool-route :where(
    input,
    textarea,
    select,
    pre,
    code,
    .ta,
    .mud-input-control,
    .mud-input-control-input-container,
    .mud-input-root,
    .mud-input,
    .mud-select,
    .mud-picker,
    .result-box,
    .out-wrap,
    .admin-table-wrap,
    .pdf-loaded-list,
    .pdf-summary-card
) {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body .app.tool-route textarea,
html body .app.tool-route .ta,
html body .app.tool-route .mud-input-slot textarea {
    width: 100% !important;
    resize: vertical !important;
}

html body .app.tool-route .split {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
}

html body .app.tool-route .pane,
html body .app.tool-route .pane-mid {
    min-width: 0 !important;
    max-width: 100% !important;
}

html body .app.tool-route .pane-mid {
    width: auto !important;
    padding-inline: 2px !important;
}

html body .app.tool-route .pdf-section-head,
html body .app.tool-route .studio-panel-head,
html body .app.tool-route .tv-card-head,
html body .app.tool-route .section-title {
    gap: 8px !important;
    margin-bottom: 8px !important;
}

html body .app.tool-route .pdf-section-head h3,
html body .app.tool-route .studio-panel-head h2,
html body .app.tool-route .tv-card-head h2,
html body .app.tool-route .section-title h2 {
    font-size: 14px !important;
    line-height: 1.18 !important;
    margin: 0 !important;
}

html body .app.tool-route .pdf-section-head p,
html body .app.tool-route .studio-panel-head p,
html body .app.tool-route .tv-card-head p,
html body .app.tool-route .section-title p,
html body .app.tool-route .muted {
    font-size: 11.5px !important;
    line-height: 1.3 !important;
}

html body .app.tool-route .tool-stepper {
    margin: 0 0 8px !important;
    padding: 6px 8px !important;
}

html body .app.tool-route .tool-step b {
    font-size: 11px !important;
}

html body .app.tool-route .tool-step span {
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
}

html body .app.tool-route .tool-step-panel-vertical {
    display: grid !important;
    gap: 16px !important;
}

html body .app.tool-route .security-workflow-intro {
    margin-bottom: 0 !important;
}

/* Developer tools: keep all input, action and output areas visible on one polished page. */
html body .app.tool-route .tool-category-developer .tool-body {
    display: grid !important;
    gap: 16px !important;
    overflow-x: hidden !important;
}

html body .app.tool-route .tool-category-developer .split {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
    min-width: 0 !important;
}

html body .app.tool-route .tool-category-developer .split:has(.pane-mid) {
    grid-template-columns: minmax(0, 1fr) minmax(132px, auto) minmax(0, 1fr) !important;
}

html body .app.tool-route .tool-category-developer .pane,
html body .app.tool-route .tool-category-developer .form-col,
html body .app.tool-route .tool-category-developer .out-wrap,
html body .app.tool-route .tool-category-developer .hash-list,
html body .app.tool-route .tool-category-developer .diff-out,
html body .app.tool-route .tool-category-developer .api-pane {
    min-width: 0 !important;
    border: 1px solid rgba(148, 163, 184, .22) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(248, 250, 252, .88)) !important;
    padding: 14px !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .08) !important;
}

.dark .app.tool-route .tool-category-developer .pane,
.dark .app.tool-route .tool-category-developer .form-col,
.dark .app.tool-route .tool-category-developer .out-wrap,
.dark .app.tool-route .tool-category-developer .hash-list,
.dark .app.tool-route .tool-category-developer .diff-out,
.dark .app.tool-route .tool-category-developer .api-pane {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, .94), rgba(17, 24, 39, .88)) !important;
    border-color: rgba(148, 163, 184, .20) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .22) !important;
}

html body .app.tool-route .tool-category-developer .pane-mid {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 0 !important;
    min-width: 132px !important;
}

html body .app.tool-route .tool-category-developer .pane-mid .btn,
html body .app.tool-route .tool-category-developer .pane-mid .btn-p,
html body .app.tool-route .tool-category-developer .pane-mid .btn-s {
    width: 100% !important;
}

html body .app.tool-route .tool-category-developer .out-bar {
    min-height: 32px !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}

html body .app.tool-route .tool-category-developer textarea.ta,
html body .app.tool-route .tool-category-developer .ta.out {
    min-height: 180px !important;
    font-family: var(--m) !important;
    line-height: 1.55 !important;
}

html body .app.tool-route .tool-category-developer .ta.out {
    background: rgba(14, 165, 233, .06) !important;
}

html body .app.tool-route .tool-category-developer .tool-body > button,
html body .app.tool-route .tool-category-developer .tool-body > .btn-p,
html body .app.tool-route .tool-category-developer .tool-body > .btn,
html body .app.tool-route .tool-category-developer .tool-body > .btn-s {
    justify-self: start !important;
}

html body .app.tool-route .tool-category-developer .dtable,
html body .app.tool-route .tool-category-developer .config-diff-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    border: 1px solid rgba(148, 163, 184, .22) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .72) !important;
}

.dark .app.tool-route .tool-category-developer .dtable,
.dark .app.tool-route .tool-category-developer .config-diff-table {
    background: rgba(15, 23, 42, .76) !important;
    border-color: rgba(148, 163, 184, .20) !important;
}

html body .app.tool-route .tool-category-developer .dtable thead,
html body .app.tool-route .tool-category-developer .dtable tbody {
    display: table !important;
    width: 100% !important;
    min-width: 640px !important;
    border-collapse: collapse !important;
}

html body .app.tool-route .tool-category-developer .result-box {
    border: 1px solid rgba(14, 165, 233, .22) !important;
    background:
        linear-gradient(135deg, rgba(14, 165, 233, .10), rgba(37, 99, 235, .08)) !important;
    color: var(--tx) !important;
}

html body .app.tool-route .tool-category-developer .cron-builder-fields {
    max-width: none !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}

html body .app.tool-route .tool-category-developer .cron-result {
    font-family: var(--m) !important;
    font-size: clamp(1rem, 1.8vw, 1.3rem) !important;
    letter-spacing: .02em !important;
    overflow-wrap: anywhere !important;
}

html body .app.tool-route .tool-category-developer .developer-inline-actions {
    margin: 0 !important;
    justify-content: flex-end !important;
}

html body .app.tool-route .tool-category-developer .developer-diagnostic-list {
    margin: 0 !important;
    padding-left: 18px !important;
}

html body .app.tool-route .tool-category-developer .color-preview {
    min-height: 64px !important;
    border-radius: 16px !important;
    margin: 16px 0 !important;
    background: var(--preview-color, #3b82f6) !important;
    border: 1px solid rgba(148, 163, 184, .30) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 14px 30px rgba(15,23,42,.10) !important;
}

html body .app.tool-route .tool-category-developer .mermaid-preview-frame {
    background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(239,246,255,.92)) !important;
    border: 1px solid rgba(37,99,235,.14) !important;
    border-radius: 18px !important;
    padding: 18px !important;
    overflow: auto !important;
}

.dark .app.tool-route .tool-category-developer .mermaid-preview-frame {
    background: linear-gradient(135deg, rgba(15,23,42,.92), rgba(30,41,59,.88)) !important;
    border-color: rgba(96,165,250,.20) !important;
}

html body .app.tool-route .tool-category-developer .mermaid-preview-inner {
    min-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

html body .app.tool-route .tool-category-developer .developer-subpanel {
    border: 1px solid rgba(37,99,235,.14) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.70) !important;
}

.dark .app.tool-route .tool-category-developer .developer-subpanel {
    background: rgba(15,23,42,.72) !important;
    border-color: rgba(96,165,250,.20) !important;
}

html body .app.tool-route .tool-category-developer .developer-fill-panel {
    min-height: 100% !important;
}

html body .app.tool-route .tool-category-developer .developer-panel-title {
    font-weight: 700 !important;
}

html body .app.tool-route .tool-category-developer .developer-eyebrow {
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #2563eb !important;
    font-weight: 700 !important;
}

html body .app.tool-route .tool-category-developer .tool-step-panel-vertical {
    gap: 16px !important;
}

@media (max-width: 900px) {
    html body .app.tool-route .tool-category-developer .split,
    html body .app.tool-route .tool-category-developer .split:has(.pane-mid) {
        grid-template-columns: 1fr !important;
    }

    html body .app.tool-route .tool-category-developer .pane-mid {
        min-width: 0 !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
    }

    html body .app.tool-route .tool-category-developer .pane-mid .btn,
    html body .app.tool-route .tool-category-developer .pane-mid .btn-p,
    html body .app.tool-route .tool-category-developer .pane-mid .btn-s {
        width: auto !important;
        flex: 1 1 140px !important;
    }
}

html body .app.tool-route .tool-info-dock,
html body .app.tool-route .tool-content-section,
html body .app.tool-route .tool-example-section,
html body .app.tool-route .tool-meta-grid,
html body .app.tool-route .tool-faq-list,
html body .app.tool-route .related-tools,
html body .app.tool-route .how-to {
    margin-top: 10px !important;
}

html body .app.tool-route .tool-content-section,
html body .app.tool-route .tool-example-section,
html body .app.tool-route .tool-meta-grid article,
html body .app.tool-route .tool-faq-list article,
html body .app.tool-route .how-to {
    padding: 10px !important;
}

@media (max-width: 900px) {
    html body .app.tool-route .main {
        padding-inline: 8px !important;
    }

    html body .app.tool-route .split {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body .app.tool-route .pane-mid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }
}

/* Final adaptive inner-screen pass: keep tools visible and usable on small screens. */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

html body .app.inner-route :where(.mud-main-content, .tv-app-main-content, .main, main) {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body .app.inner-route :where(.main, .tv-app-main-content) {
    padding-inline: clamp(6px, 1.5vw, 14px) !important;
}

html body .app.inner-route :where(
    .tool-page,
    .focused-tool-page,
    .tool-body,
    .tool-panel,
    .tool-card,
    .panel-card,
    .calc-card,
    .webhook-card,
    .pdf-workspace,
    .pdf-panel,
    .fx-shell,
    .studio-shell,
    .passport-editor-box,
    .background-remover-shell,
    .game-shell,
    .games-arcade,
    .word-dash-page
) {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body .app.inner-route :where(
    input,
    select,
    textarea,
    pre,
    code,
    canvas,
    table,
    .ta,
    .result-box,
    .out-wrap,
    .image-preview,
    .qr-preview,
    .pdf-loaded-list,
    .pdf-summary-card,
    .mud-input-control,
    .mud-input-control-input-container,
    .mud-input-root,
    .mud-input,
    .mud-select,
    .mud-picker
) {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body .app.inner-route :where(.tool-panel, .tool-card, .panel-card, .calc-card, .pdf-workspace, .pdf-panel, .fx-shell, .studio-shell) {
    border-radius: clamp(10px, 1.5vw, 16px) !important;
    padding: clamp(8px, 1.35vw, 12px) !important;
}

html body .app.inner-route :where(.mud-grid, .mud-grid-spacing-xs-1, .mud-grid-spacing-xs-2, .mud-grid-spacing-xs-3, .mud-grid-spacing-xs-4) {
    width: 100% !important;
    margin: 0 !important;
}

html body .app.inner-route :where(.mud-grid-item, .mud-item) {
    min-width: 0 !important;
}

html body .app.inner-route :where(.btn-row, .wrap, .tool-actions, .word-dash-actions, .word-dash-mobile-controls) {
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
}

html body .app.inner-route :where(.btn, .btn-p, .btn-s, .word-dash-btn, button:not(.mud-button-root)) {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
}

html body .app.inner-route textarea,
html body .app.inner-route .ta,
html body .app.inner-route .mud-input-slot textarea {
    min-height: clamp(120px, 32vh, 260px) !important;
    max-height: 56vh !important;
}

html body .app.tool-route .split {
    grid-template-columns: minmax(0, 1fr) minmax(36px, auto) minmax(0, 1fr) !important;
}

html body .app.tool-route :where(.pane, .pane-mid) {
    overflow-wrap: anywhere !important;
}

html body .app.inner-route :where(.tool-content-section, .tool-example-section, .tool-meta-grid, .tool-faq-list, .related-tools, .how-to) {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

@media (max-width: 1100px) {
    html body .app.tool-route .split,
    html body .app.inner-route :where(.split, .two-col, .tool-grid, .pdf-grid, .studio-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 720px) {
    html body .app.inner-route :where(.main, .tv-app-main-content) {
        padding: 4px 6px 8px !important;
    }

    html body .app.inner-route :where(.tool-panel, .tool-card, .panel-card, .calc-card, .pdf-workspace, .pdf-panel, .fx-shell, .studio-shell) {
        padding: 8px !important;
        margin-bottom: 8px !important;
    }

    html body .app.inner-route :where(.btn-row, .wrap, .tool-actions, .word-dash-actions, .word-dash-mobile-controls) {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    html body .app.inner-route :where(.btn, .btn-p, .btn-s, .word-dash-btn, button:not(.mud-button-root)) {
        min-height: 34px !important;
        padding: 7px 10px !important;
        font-size: 12px !important;
    }

    html body .app.inner-route textarea,
    html body .app.inner-route .ta,
    html body .app.inner-route .mud-input-slot textarea {
        min-height: 132px !important;
        max-height: 44vh !important;
    }
}

@media (max-width: 420px) {
    html body .app.inner-route :where(.main, .tv-app-main-content) {
        padding-inline: 4px !important;
    }

    html body .app.inner-route :where(.tool-panel, .tool-card, .panel-card, .calc-card, .pdf-workspace, .pdf-panel, .fx-shell, .studio-shell) {
        border-radius: 10px !important;
        padding: 7px !important;
    }
}

/* Final reconnect/session-break UI: replace the default Blazor refresh feel. */
html body #components-reconnect-modal.components-reconnect-hide {
    display: none !important;
}

html body #components-reconnect-modal.components-reconnect-show,
html body #components-reconnect-modal.components-reconnect-failed,
html body #components-reconnect-modal.components-reconnect-rejected {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: grid !important;
    place-items: end center !important;
    padding: 18px !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(2, 6, 23, 0), rgba(2, 6, 23, 0.14)) !important;
}

html body .daivverse-reconnect-card {
    width: min(100%, 520px) !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    pointer-events: auto !important;
    border: 1px solid rgba(37, 99, 235, 0.22) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.94)),
        radial-gradient(circle at 12% 10%, rgba(6, 182, 212, 0.16), transparent 34%) !important;
    color: #0f172a !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.6) inset !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    overflow: hidden !important;
}

html body .dark .daivverse-reconnect-card,
html body .app.dark ~ #components-reconnect-modal .daivverse-reconnect-card {
    border-color: rgba(34, 211, 238, 0.24) !important;
    background:
        linear-gradient(135deg, rgba(8, 15, 35, 0.96), rgba(15, 23, 42, 0.94)),
        radial-gradient(circle at 12% 10%, rgba(34, 211, 238, 0.18), transparent 34%) !important;
    color: #f8fafc !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(148, 163, 184, 0.08) inset !important;
}

html body .daivverse-reconnect-mark {
    position: relative !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.26) !important;
}

html body .daivverse-reconnect-mark::before {
    content: "" !important;
    position: absolute !important;
    inset: 8px !important;
    border-radius: 999px !important;
    border: 3px solid rgba(255, 255, 255, 0.38) !important;
    border-top-color: #ffffff !important;
    animation: daivverseReconnectSpin 900ms linear infinite !important;
}

html body .daivverse-reconnect-card-failed .daivverse-reconnect-mark::before,
html body .daivverse-reconnect-card-rejected .daivverse-reconnect-mark::before {
    animation: none !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
}

html body .daivverse-reconnect-mark span {
    width: 9px !important;
    height: 9px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.7) !important;
}

html body .daivverse-reconnect-copy {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
}

html body .daivverse-reconnect-copy strong {
    margin: 0 !important;
    color: inherit !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

html body .daivverse-reconnect-copy span {
    color: #475569 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

html body .dark .daivverse-reconnect-copy span,
html body .app.dark ~ #components-reconnect-modal .daivverse-reconnect-copy span {
    color: #cbd5e1 !important;
}

html body .daivverse-reconnect-refresh {
    min-width: 108px !important;
    min-height: 36px !important;
    padding: 8px 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.24) !important;
}

html body .daivverse-reconnect-refresh:hover,
html body .daivverse-reconnect-refresh:focus-visible {
    transform: translateY(-1px) !important;
    box-shadow: 0 16px 34px rgba(6, 182, 212, 0.28) !important;
    outline: 3px solid rgba(37, 99, 235, 0.22) !important;
    outline-offset: 2px !important;
}

@keyframes daivverseReconnectSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 560px) {
    html body #components-reconnect-modal.components-reconnect-show,
    html body #components-reconnect-modal.components-reconnect-failed,
    html body #components-reconnect-modal.components-reconnect-rejected {
        padding: 10px !important;
    }

    html body .daivverse-reconnect-card {
        grid-template-columns: 38px minmax(0, 1fr) !important;
        border-radius: 16px !important;
        gap: 9px !important;
        padding: 10px !important;
    }

    html body .daivverse-reconnect-mark {
        width: 36px !important;
        height: 36px !important;
        border-radius: 12px !important;
    }

    html body .daivverse-reconnect-refresh {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
}

/* Final adaptive inner-screen system.
   Keeps routes and content intact while making tool/category/detail pages fit smaller screens. */
html,
body,
.app.inner-route,
.app.tool-route,
.app.inner-route .mud-layout,
.app.inner-route .mud-main-content,
.app.inner-route .tv-app-main-content,
.app.inner-route .main {
    max-width: 100% !important;
    overflow-x: clip !important;
}

html body .app.inner-route .tv-app-main-content,
html body .app.inner-route .main {
    min-width: 0 !important;
    width: 100% !important;
}

html body .app.inner-route .main {
    padding: clamp(6px, 1.1vw, 14px) !important;
}

html body .app.inner-route :where(
    .tool-page,
    .focused-tool-page,
    .category-page,
    .blog-page,
    .info-page,
    .seo-landing-page,
    .tool-body,
    .tool-main,
    .tool-workspace,
    .studio-shell,
    .pdf-workspace,
    .fx-shell,
    .word-dash-page
) {
    width: 100% !important;
    max-width: min(100%, 1280px) !important;
    min-width: 0 !important;
    margin-inline: auto !important;
}

html body .app.inner-route :where(
    .tool-head,
    .tool-head-pro,
    .network-hero,
    .category-hero,
    .blog-hero,
    .info-hero,
    .seo-hero
) {
    min-height: auto !important;
    padding: clamp(10px, 1.7vw, 20px) !important;
    margin-bottom: clamp(8px, 1.2vw, 14px) !important;
    border-radius: clamp(12px, 1.4vw, 18px) !important;
    gap: clamp(8px, 1.2vw, 14px) !important;
}

html body .app.inner-route :where(
    .tool-head h1,
    .tool-head-pro h1,
    .network-hero h1,
    .category-hero h1,
    .blog-hero h1,
    .info-hero h1,
    .seo-hero h1,
    main > h1
) {
    font-size: clamp(1.15rem, 2vw, 1.8rem) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
}

html body .app.inner-route :where(
    .tool-head p,
    .tool-head-pro p,
    .network-hero p,
    .category-hero p,
    .blog-hero p,
    .info-hero p,
    .seo-hero p,
    .lead,
    .subtitle,
    .tool-description
) {
    max-width: 760px !important;
    font-size: clamp(.82rem, 1.05vw, .95rem) !important;
    line-height: 1.42 !important;
    margin-block: 4px 0 !important;
}

html body .app.inner-route :where(
    h2,
    .section-title h2,
    .tv-card-head h2,
    .studio-panel-head h2,
    .pdf-section-head h3
) {
    font-size: clamp(1rem, 1.45vw, 1.28rem) !important;
    line-height: 1.18 !important;
    margin-block: 0 6px !important;
}

html body .app.inner-route :where(
    .tool-title-icon,
    .tool-icon,
    .tool-hero-icon,
    .category-icon,
    .page-icon
) {
    width: clamp(34px, 4vw, 46px) !important;
    height: clamp(34px, 4vw, 46px) !important;
    min-width: clamp(34px, 4vw, 46px) !important;
}

html body .app.inner-route :where(
    .tool-title-icon .mud-icon-root,
    .tool-icon .mud-icon-root,
    .tool-hero-icon .mud-icon-root,
    .category-icon .mud-icon-root,
    .page-icon .mud-icon-root
) {
    font-size: clamp(1.15rem, 2.8vw, 1.55rem) !important;
}

html body .app.inner-route :where(
    .tool-panel,
    .tool-card,
    .panel-card,
    .calc-card,
    .pdf-panel,
    .pdf-workspace,
    .fx-shell,
    .studio-shell,
    .passport-editor-box,
    .background-remover-shell,
    .word-dash-shell,
    .word-dash-content article,
    .mud-paper,
    .mud-card
) {
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: clamp(10px, 1.3vw, 16px) !important;
    padding: clamp(8px, 1.15vw, 14px) !important;
}

html body .app.inner-route :where(
    .tool-panel,
    .tool-card,
    .panel-card,
    .calc-card,
    .pdf-panel,
    .pdf-workspace,
    .fx-shell,
    .studio-shell,
    .word-dash-shell
) {
    margin-bottom: clamp(7px, 1vw, 12px) !important;
}

html body .app.inner-route :where(
    .mud-grid,
    .mud-grid-spacing-xs-1,
    .mud-grid-spacing-xs-2,
    .mud-grid-spacing-xs-3,
    .mud-grid-spacing-xs-4,
    .tool-grid,
    .pdf-grid,
    .studio-grid,
    .category-grid,
    .cards-grid,
    .related-grid,
    .tool-meta-grid,
    .tool-faq-list,
    .word-dash-content
) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    gap: clamp(6px, 1vw, 12px) !important;
}

html body .app.inner-route :where(
    .mud-grid-item,
    .mud-item,
    .tool-grid > *,
    .pdf-grid > *,
    .studio-grid > *,
    .category-grid > *,
    .cards-grid > *,
    .related-grid > *
) {
    min-width: 0 !important;
    max-width: 100% !important;
}

html body .app.inner-route :where(
    .split,
    .two-col,
    .two-column,
    .tool-split,
    .converter-grid,
    .pdf-tool-layout,
    .background-remover-layout,
    .passport-editor-layout
) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)) !important;
    gap: clamp(8px, 1.1vw, 14px) !important;
    align-items: start !important;
}

html body .app.inner-route :where(
    .pane,
    .pane-mid,
    .input-panel,
    .output-panel,
    .preview-panel,
    .json-editor-panel,
    .code-editor-panel,
    .editor-panel
) {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: auto !important;
}

html body .app.inner-route :where(
    .mud-input-control,
    .mud-select,
    .mud-input,
    .mud-input-root,
    .mud-input-slot,
    input,
    select,
    textarea
) {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body .app.inner-route :where(.mud-input-control) {
    margin-top: 4px !important;
    margin-bottom: 6px !important;
}

html body .app.inner-route :where(input, select, .mud-input-slot) {
    font-size: clamp(.82rem, 1vw, .94rem) !important;
}

html body .app.inner-route textarea,
html body .app.inner-route .ta,
html body .app.inner-route .mud-input-slot textarea,
html body .app.inner-route :where(.json-editor, .code-editor, .monaco-editor, pre, code) {
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: clamp(.78rem, .95vw, .9rem) !important;
    line-height: 1.38 !important;
}

html body .app.inner-route textarea,
html body .app.inner-route .ta,
html body .app.inner-route .mud-input-slot textarea {
    min-height: clamp(104px, 24vh, 220px) !important;
    max-height: min(52vh, 420px) !important;
}

html body .app.inner-route :where(
    .upload-zone,
    .drop-zone,
    .file-drop-zone,
    .pdf-drop-zone,
    .background-remover-dropzone
) {
    min-height: clamp(96px, 18vh, 180px) !important;
    padding: clamp(10px, 1.4vw, 16px) !important;
}

html body .app.inner-route :where(
    .btn-row,
    .wrap,
    .tool-actions,
    .result-actions,
    .pdf-actions,
    .studio-actions,
    .word-dash-actions,
    .word-dash-mobile-controls
) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: clamp(5px, .9vw, 9px) !important;
    max-width: 100% !important;
}

html body .app.inner-route :where(
    .btn,
    .btn-p,
    .btn-s,
    .tool-action-btn,
    .word-dash-btn,
    button:not(.mud-button-root),
    .mud-button-root
) {
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: clamp(32px, 4vw, 40px) !important;
    padding: clamp(6px, .9vw, 9px) clamp(9px, 1.3vw, 14px) !important;
    font-size: clamp(.75rem, .95vw, .86rem) !important;
    line-height: 1.15 !important;
    white-space: normal !important;
}

html body .app.inner-route :where(
    .badge,
    .badge-soft,
    .tool-badge,
    .tool-info-chip,
    .tool-info-chip-primary,
    .mud-chip
) {
    min-height: 24px !important;
    padding: 4px 8px !important;
    font-size: clamp(.68rem, .85vw, .78rem) !important;
    line-height: 1.1 !important;
}

html body .app.inner-route :where(
    table,
    .mud-table,
    .mud-table-container,
    .table-wrap,
    .result-table
) {
    max-width: 100% !important;
    overflow-x: auto !important;
}

html body .app.inner-route :where(img, canvas, svg, video, iframe) {
    max-width: 100% !important;
}

html body .app.inner-route :where(.word-dash-canvas) {
    min-height: clamp(190px, 38vw, 320px) !important;
    max-height: min(54vh, 460px) !important;
}

html body .app.inner-route :where(
    .tool-content-section,
    .tool-example-section,
    .tool-info-dock,
    .related-tools,
    .how-to,
    .tool-meta-grid,
    .tool-faq-list
) {
    margin-top: clamp(8px, 1.1vw, 14px) !important;
    padding: clamp(8px, 1vw, 12px) !important;
    border-radius: clamp(10px, 1.2vw, 15px) !important;
}

@media (max-width: 900px) {
    html body .app.inner-route .main {
        padding: 6px !important;
    }

    html body .app.inner-route :where(
        .split,
        .two-col,
        .two-column,
        .tool-split,
        .converter-grid,
        .pdf-tool-layout,
        .background-remover-layout,
        .passport-editor-layout,
        .word-dash-content
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 640px) {
    html body .app.inner-route .main {
        padding: 4px !important;
    }

    html body .app.inner-route :where(
        .tool-head,
        .tool-head-pro,
        .network-hero,
        .category-hero,
        .blog-hero,
        .info-hero,
        .seo-hero,
        .tool-panel,
        .tool-card,
        .panel-card,
        .calc-card,
        .pdf-panel,
        .pdf-workspace,
        .fx-shell,
        .studio-shell,
        .word-dash-shell
    ) {
        border-radius: 10px !important;
        padding: 7px !important;
    }

    html body .app.inner-route :where(
        .tool-head,
        .tool-head-pro,
        .network-hero
    ) {
        display: flex !important;
        align-items: flex-start !important;
    }

    html body .app.inner-route :where(
        .tool-head h1,
        .tool-head-pro h1,
        .network-hero h1,
        .category-hero h1,
        .blog-hero h1,
        .info-hero h1,
        .seo-hero h1,
        main > h1
    ) {
        font-size: clamp(1.02rem, 5vw, 1.34rem) !important;
    }

    html body .app.inner-route textarea,
    html body .app.inner-route .ta,
    html body .app.inner-route .mud-input-slot textarea {
        min-height: 96px !important;
        max-height: 38vh !important;
    }

    html body .app.inner-route :where(.btn-row, .wrap, .tool-actions, .result-actions, .word-dash-actions) > * {
        flex: 1 1 min(100%, 128px) !important;
    }
}

@media (max-width: 420px) {
    html body .app.inner-route :where(
        .tool-title-icon,
        .tool-icon,
        .tool-hero-icon,
        .category-icon,
        .page-icon
    ) {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        border-radius: 9px !important;
    }

    html body .app.inner-route :where(.word-dash-mobile-controls button) {
        min-width: 0 !important;
        flex: 1 1 0 !important;
    }
}

/* Homepage hero visual spacing: lift the search/dashboard panel to reduce empty top space. */
html body .app.home-route .tv-command-home .tv-replica-landing .tv-orbit-dashboard {
    align-self: start !important;
    padding-top: 0 !important;
}

html body .app.home-route .tv-command-home .tv-replica-landing .tv-orbit-console {
    inset: 18px 10% 68px 14% !important;
}

html body .app.home-route .tv-command-home .tv-replica-landing .tv-orbit-search-wrap {
    margin-top: -4px !important;
}

@media (max-width: 1024px) {
    html body .app.home-route .tv-command-home .tv-replica-landing .tv-orbit-console {
        inset: 16px 7% 58px 7% !important;
    }
}

@media (max-width: 760px) {
    html body .app.home-route .tv-command-home .tv-replica-landing .tv-orbit-dashboard {
        min-height: 340px !important;
    }

    html body .app.home-route .tv-command-home .tv-replica-landing .tv-orbit-console {
        inset: 12px 0 44px 0 !important;
    }
}

/* Absolute final route/layout guard.
   Keep this at the end of the active bundle so older experimental compact/light
   layers cannot hide the real page structure or shrink tools into unreadable UI. */
html,
body,
body:has(.app),
.app,
.app.light,
.app.dark {
    background:
        radial-gradient(circle at 8% -8%, rgba(14, 165, 233, .25), transparent 30vw),
        radial-gradient(circle at 96% 0%, rgba(37, 99, 235, .20), transparent 28vw),
        linear-gradient(180deg, #07091A 0%, #081329 48%, #07091A 100%) !important;
    color: var(--dv-app-text, #f3f8ff) !important;
    overflow-x: clip !important;
}

html body .app :where(.tv-app-main-content, .mud-main-content, .main) {
    width: 100% !important;
    max-width: var(--dv-app-wide, 1680px) !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    padding: clamp(20px, 2.4vw, 36px) clamp(16px, 2.6vw, 44px) clamp(56px, 6vw, 96px) !important;
    color: var(--dv-app-text, #f3f8ff) !important;
}

html body .app.inner-route :where(.main, .tv-app-main-content),
html body .app.tool-route :where(.main, .tv-app-main-content) {
    padding: clamp(18px, 2.2vw, 32px) clamp(14px, 2.4vw, 36px) clamp(52px, 5vw, 84px) !important;
}

html body .app :where(
    .studio-shell,
    .library-market,
    .single-library,
    .category-market,
    .blog-page,
    .blog-article-page,
    .legal-page,
    .info-page,
    .about-page,
    .tool-page,
    .focused-tool-page,
    .universal-tool,
    .calculator-tool,
    .tv-bookmarks-page
) {
    width: 100% !important;
    max-width: var(--dv-app-max, 1440px) !important;
    min-width: 0 !important;
    margin-inline: auto !important;
}

html body .app.home-route :where(.studio-shell, .tv-command-home) {
    max-width: var(--dv-app-wide, 1680px) !important;
}

html body .app :where(
    .tool-head,
    .tool-head-pro,
    .category-market-hero,
    .readable-category-hero,
    .library-hero,
    .compact-library-hero,
    .blog-hero,
    .blog-article-hero,
    .legal-hero,
    .info-hero,
    .seo-landing-hero,
    .tv-bookmarks-hero
) {
    display: flex !important;
    align-items: center !important;
    gap: clamp(14px, 2vw, 24px) !important;
    min-height: auto !important;
    margin: 0 0 clamp(18px, 2vw, 28px) !important;
    padding: clamp(24px, 3vw, 44px) !important;
    border: 1px solid var(--dv-app-border, rgba(88, 166, 255, .22)) !important;
    border-radius: clamp(22px, 2.6vw, 36px) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(56, 189, 248, .13), transparent 34%),
        linear-gradient(180deg, rgba(15, 29, 62, .94), rgba(8, 19, 41, .88)) !important;
    color: var(--dv-app-text, #f3f8ff) !important;
    box-shadow: var(--dv-app-shadow-soft, 0 16px 48px rgba(2, 6, 23, .22)) !important;
}

html body .app :where(h1, .mud-typography-h1),
html body .app :where(.tool-head h1, .tool-head-pro h1, .category-market-hero h1, .readable-category-hero h1, .library-hero h1, .compact-library-hero h1, .blog-hero h1, .blog-article-hero h1, .legal-hero h1, .info-hero h1, .tv-bookmarks-hero h1),
html body .app.home-route .tv-command-home .tv-replica-landing .tv-home-hero-copy h1 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    color: var(--dv-app-text, #f3f8ff) !important;
    font-size: clamp(2rem, 3.8vw, 4.3rem) !important;
    line-height: 1.03 !important;
    font-weight: 850 !important;
    letter-spacing: -.04em !important;
    margin: 0 0 .55rem !important;
    max-width: 1050px !important;
}

html body .app.tool-route :where(.tool-head h1, .tool-head-pro h1, .tool-title, .tool-page-title, .tool-hero-title),
html body .app.inner-route :where(.category-market-hero h1, .readable-category-hero h1, .library-hero h1, .compact-library-hero h1, .blog-hero h1, .blog-article-hero h1, .legal-hero h1, .info-hero h1, .tv-bookmarks-hero h1) {
    font-size: clamp(1.9rem, 3vw, 3.25rem) !important;
}

html body .app :where(
    .tool-panel,
    .calc-card,
    .panel-card,
    .webhook-card,
    .pdf-panel,
    .pdf-workspace,
    .legal-card,
    .legal-panel,
    .info-card,
    .auth-card,
    .blog-card,
    .blog-featured,
    .blog-listing,
    .blog-article-content,
    .blog-toc,
    .category-readable-card,
    .category-insight-card,
    .category-faq-panel,
    .tv-bookmarks-panel,
    .tv-bookmark-manager-card,
    .tv-bookmark-search-card,
    .empty-panel,
    .empty-state,
    .result,
    .security-card,
    .crypto-card,
    .studio-section,
    .studio-quick-panel,
    .library-group,
    .tv-category-room,
    .tv-replica-category-card,
    .tv-replica-tool-card,
    .tool-content-section,
    .tool-example-section,
    .tool-meta-grid article,
    .tool-faq-list article
) {
    max-width: 100% !important;
    min-width: 0 !important;
    padding: clamp(18px, 2vw, 28px) !important;
    border: 1px solid var(--dv-app-border, rgba(88, 166, 255, .22)) !important;
    border-radius: var(--dv-app-radius-lg, 28px) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(56, 189, 248, .10), transparent 34%),
        linear-gradient(180deg, rgba(15, 29, 62, .92), rgba(8, 19, 41, .88)) !important;
    color: var(--dv-app-text, #f3f8ff) !important;
    box-shadow: var(--dv-app-shadow-soft, 0 16px 48px rgba(2, 6, 23, .22)) !important;
}

html body .app :where(p, li, dd, dt, small, label, .mud-typography, .muted, .text-muted, .subtitle, .tool-description, .category-readable-description, .blog-card p, .legal-card p, .info-card p) {
    color: var(--dv-app-muted, #b9c7dc) !important;
    line-height: 1.6 !important;
}

html body .app :where(input, textarea, select, .ta, .mud-input-root, .mud-input, .mud-select, .mud-input-slot) {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    color: var(--dv-app-text, #f3f8ff) !important;
}

html body .app :where(input, textarea, select, .ta, .mud-input-root) {
    border-color: rgba(125, 211, 252, .24) !important;
    border-radius: 16px !important;
    background: rgba(7, 18, 40, .72) !important;
}

html body .app :where(table, .mud-table, .mud-table-container, .table-wrap, .result-table) {
    max-width: 100% !important;
    overflow-x: auto !important;
}

html body .app :where(.tool-title-icon, .tool-icon, .tool-hero-icon, .category-market-icon) {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    flex: 0 0 58px !important;
    border-radius: 16px !important;
}

html body .app :where(.footer, .site-footer, .app-footer, .footer-wrap) {
    display: block !important;
}

@media (max-width: 900px) {
    html body .app :where(.tv-app-main-content, .mud-main-content, .main) {
        padding: 16px 12px 54px !important;
    }

    html body .app :where(.tool-head, .tool-head-pro, .category-market-hero, .blog-hero, .blog-article-hero, .legal-hero, .info-hero, .tv-bookmarks-hero) {
        align-items: flex-start !important;
        padding: 20px !important;
    }
}

@media (max-width: 640px) {
    html body .app :where(.tool-head h1, .tool-head-pro h1, .category-market-hero h1, .readable-category-hero h1, .library-hero h1, .blog-hero h1, .blog-article-hero h1, .legal-hero h1, .info-hero h1, .tv-bookmarks-hero h1),
    html body .app.home-route .tv-command-home .tv-replica-landing .tv-home-hero-copy h1 {
        font-size: clamp(1.55rem, 7vw, 2.35rem) !important;
    }
}

/* PDF workspace final system.
   All PDF operation routes share these classes through PdfOperationPage and the
   PDF tools hub, keeping upload, options, processing, and download states clear. */
html body .app .pdf-workflow-shell,
html body .app .pdf-tools-hub {
    width: 100% !important;
    display: grid !important;
    gap: clamp(16px, 2vw, 26px) !important;
}

html body .app .pdf-workflow-intro {
    display: grid !important;
    gap: 6px !important;
    padding: clamp(14px, 1.8vw, 20px) !important;
    border: 1px solid rgba(125, 211, 252, .20) !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, rgba(14, 165, 233, .14), rgba(20, 184, 166, .08)) !important;
}

html body .app .pdf-workflow-intro span {
    color: #7dd3fc !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
}

html body .app .pdf-workflow-intro strong {
    color: var(--dv-app-text, #f3f8ff) !important;
    font-size: clamp(.98rem, 1.2vw, 1.1rem) !important;
    line-height: 1.45 !important;
}

html body .app .pdf-process-overview {
    display: grid !important;
    gap: 6px !important;
    padding: clamp(14px, 1.8vw, 20px) !important;
    border: 1px solid rgba(56, 189, 248, .28) !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(56, 189, 248, .18), transparent 34%),
        linear-gradient(135deg, rgba(14, 165, 233, .13), rgba(37, 99, 235, .10)) !important;
}

html body .app .pdf-process-overview span {
    color: #7dd3fc !important;
    font-size: .78rem !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

html body .app .pdf-process-overview strong {
    color: var(--dv-app-text, #f3f8ff) !important;
    font-size: clamp(1rem, 1.35vw, 1.2rem) !important;
    line-height: 1.35 !important;
}

html body .app .pdf-process-overview p {
    max-width: 980px !important;
    margin: 0 !important;
    color: var(--dv-app-muted, #b9c7dc) !important;
    font-size: .9rem !important;
    line-height: 1.5 !important;
}

html body .app .pdf-tool-grid,
html body .app .pdf-hub-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr) !important;
    gap: clamp(18px, 2vw, 28px) !important;
    align-items: start !important;
}

html body .app .pdf-hub-grid {
    grid-template-columns: minmax(0, 1fr) minmax(340px, .48fr) !important;
}

html body .app .pdf-tool-grid-vertical {
    grid-template-columns: 1fr !important;
}

html body .app .pdf-work-card,
html body .app .pdf-assist-stack,
html body .app .pdf-hub-task-panel,
html body .app .pdf-hub-files-panel,
html body .app .pdf-result-shell {
    min-width: 0 !important;
}

html body .app .pdf-assist-stack {
    display: grid !important;
    gap: 16px !important;
}

html body .app .pdf-section-head,
html body .app .pdf-mini-head,
html body .app .pdf-launch-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
}

html body .app .pdf-section-head-tight {
    margin-bottom: 12px !important;
}

html body .app .pdf-section-head h3,
html body .app .pdf-mini-head h4,
html body .app .pdf-hub-hero h3 {
    margin: 0 !important;
    color: var(--dv-app-text, #f3f8ff) !important;
    line-height: 1.12 !important;
}

html body .app .pdf-mini-head h4 {
    font-size: 1rem !important;
    font-weight: 850 !important;
}

html body .app .pdf-section-head p,
html body .app .pdf-mini-head p,
html body .app .pdf-launch-top p,
html body .app .pdf-hub-hero p {
    margin: 4px 0 0 !important;
    color: var(--dv-app-muted, #b9c7dc) !important;
}

html body .app .pdf-drop-zone {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: center !important;
    padding: clamp(18px, 2.2vw, 28px) !important;
    border: 1px dashed rgba(125, 211, 252, .42) !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(56, 189, 248, .16), transparent 34%),
        rgba(7, 18, 40, .66) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

html body .app .pdf-upload-icon,
html body .app .pdf-result-icon,
html body .app .pdf-launch-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(56, 189, 248, .26), rgba(37, 99, 235, .16)) !important;
    color: #7dd3fc !important;
    border: 1px solid rgba(125, 211, 252, .20) !important;
}

html body .app .pdf-upload-copy {
    display: grid !important;
    min-width: 0 !important;
    gap: 4px !important;
}

html body .app .pdf-upload-copy strong {
    color: var(--dv-app-text, #f3f8ff) !important;
    font-size: 1.05rem !important;
}

html body .app .pdf-upload-copy span {
    color: var(--dv-app-muted, #b9c7dc) !important;
}

html body .app .pdf-file-input.file-input,
html body .app .pdf-drop-zone input[type="file"] {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 9px !important;
    border: 1px solid rgba(125, 211, 252, .24) !important;
    border-radius: 16px !important;
    background: rgba(2, 6, 23, .32) !important;
    color: var(--dv-app-text, #f3f8ff) !important;
    cursor: pointer !important;
}

html body .app .pdf-file-input::file-selector-button,
html body .app .pdf-drop-zone input[type="file"]::file-selector-button {
    min-height: 34px !important;
    margin-right: 12px !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 0 14px !important;
    background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

html body .app .pdf-file-rules {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 2px !important;
}

html body .app .pdf-file-rules span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    background: rgba(125, 211, 252, .10) !important;
    border: 1px solid rgba(125, 211, 252, .18) !important;
    color: #cdeafe !important;
    font-size: .78rem !important;
    font-weight: 750 !important;
}

html body .app .pdf-file-rules-block {
    margin-top: 14px !important;
}

html body .app .pdf-progress-panel,
html body .app .upload-progress-panel {
    margin-top: 14px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(125, 211, 252, .20) !important;
    background: rgba(7, 18, 40, .64) !important;
    padding: 14px !important;
}

html body .app .upload-progress-head {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    color: var(--dv-app-text, #f3f8ff) !important;
}

html body .app .upload-progress-panel progress {
    width: 100% !important;
    height: 10px !important;
    margin-top: 10px !important;
}

html body .app .pdf-selected-files,
html body .app .pdf-options-card,
html body .app .pdf-action-bar {
    margin-top: 16px !important;
    padding: clamp(14px, 1.6vw, 20px) !important;
    border: 1px solid rgba(125, 211, 252, .18) !important;
    border-radius: 22px !important;
    background: rgba(7, 18, 40, .50) !important;
}

html body .app .pdf-file-card-list,
html body .app .pdf-result-grid {
    display: grid !important;
    gap: 12px !important;
}

html body .app .pdf-result-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)) !important;
}

html body .app .pdf-result-grid-compact {
    grid-template-columns: 1fr !important;
}

html body .app .pdf-file-card,
html body .app .pdf-result-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
    padding: 14px !important;
    border: 1px solid rgba(125, 211, 252, .18) !important;
    border-radius: 18px !important;
    background: rgba(2, 6, 23, .28) !important;
}

html body .app .pdf-file-index {
    display: inline-flex !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: rgba(56, 189, 248, .16) !important;
    color: #7dd3fc !important;
    font-weight: 900 !important;
}

html body .app .pdf-file-main,
html body .app .pdf-result-main {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    display: grid !important;
    gap: 3px !important;
}

html body .app .pdf-file-main b,
html body .app .pdf-result-main b,
html body .app .pdf-launch-card b {
    color: var(--dv-app-text, #f3f8ff) !important;
    overflow-wrap: anywhere !important;
}

html body .app .pdf-file-main small,
html body .app .pdf-result-main small {
    color: var(--dv-app-muted, #b9c7dc) !important;
    overflow-wrap: anywhere !important;
}

html body .app .pdf-file-status {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    font-size: .78rem !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
}

html body .app .pdf-file-status.is-valid {
    color: #bbf7d0 !important;
    background: rgba(34, 197, 94, .14) !important;
    border: 1px solid rgba(34, 197, 94, .24) !important;
}

html body .app .pdf-file-status.is-warning {
    color: #fde68a !important;
    background: rgba(245, 158, 11, .14) !important;
    border: 1px solid rgba(245, 158, 11, .26) !important;
}

html body .app .pdf-field-grid {
    display: grid !important;
    gap: 12px !important;
}

html body .app .pdf-action-bar {
    display: grid !important;
    gap: 14px !important;
}

html body .app .pdf-action-copy {
    display: grid !important;
    gap: 4px !important;
}

html body .app .pdf-action-copy h4 {
    margin: 0 !important;
    color: var(--dv-app-text, #f3f8ff) !important;
    font-size: 1rem !important;
    font-weight: 850 !important;
}

html body .app .pdf-action-copy span {
    color: var(--dv-app-muted, #b9c7dc) !important;
    line-height: 1.55 !important;
}

html body .app .pdf-captcha-panel {
    display: grid !important;
    gap: 10px !important;
    max-width: 360px !important;
}

html body .app .pdf-captcha-panel > span {
    color: var(--dv-app-muted, #b9c7dc) !important;
    font-size: .82rem !important;
    font-weight: 800 !important;
}

html body .app .pdf-action-buttons,
html body .app .pdf-result-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
}

html body .app .pdf-help-steps {
    display: grid !important;
    gap: 12px !important;
}

html body .app .pdf-help-steps > div {
    padding: 12px !important;
    border: 1px solid rgba(125, 211, 252, .16) !important;
    border-radius: 16px !important;
    background: rgba(2, 6, 23, .24) !important;
}

html body .app .pdf-help-steps b,
html body .app .pdf-help-steps span {
    display: block !important;
}

html body .app .pdf-help-steps b {
    color: var(--dv-app-text, #f3f8ff) !important;
    margin-bottom: 3px !important;
}

html body .app .pdf-help-steps span {
    color: var(--dv-app-muted, #b9c7dc) !important;
}

html body .app .pdf-result-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

html body .app .pdf-result-meta span {
    color: #cdeafe !important;
    font-size: .8rem !important;
}

html body .app .pdf-empty-state {
    min-height: 220px !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
}

html body .app .pdf-hub-hero {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 18px !important;
}

html body .app .pdf-hub-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: flex-end !important;
}

html body .app .pdf-hub-stats span {
    display: grid !important;
    gap: 2px !important;
    min-width: 112px !important;
    padding: 11px 13px !important;
    border: 1px solid rgba(125, 211, 252, .18) !important;
    border-radius: 16px !important;
    background: rgba(7, 18, 40, .56) !important;
    color: var(--dv-app-muted, #b9c7dc) !important;
}

html body .app .pdf-hub-stats b {
    color: var(--dv-app-text, #f3f8ff) !important;
}

html body .app .pdf-launch-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)) !important;
    gap: 14px !important;
}

html body .app .pdf-launch-card {
    display: grid !important;
    gap: 14px !important;
    align-content: space-between !important;
    min-height: 190px !important;
    padding: 16px !important;
    border: 1px solid rgba(125, 211, 252, .18) !important;
    border-radius: 20px !important;
    background: rgba(7, 18, 40, .52) !important;
    transition: transform .18s ease, border-color .18s ease, background .18s ease !important;
}

html body .app .pdf-launch-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(56, 189, 248, .42) !important;
    background: rgba(12, 32, 67, .70) !important;
}

html body .app .pdf-launch-top {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    margin: 0 !important;
}

html body .app .pdf-launch-top .mud-chip {
    margin-left: auto !important;
}

@media (max-width: 1120px) {
    html body .app .pdf-tool-grid,
    html body .app .pdf-hub-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 720px) {
    html body .app .pdf-section-head,
    html body .app .pdf-mini-head,
    html body .app .pdf-hub-hero,
    html body .app .pdf-file-card,
    html body .app .pdf-result-card {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    html body .app .pdf-drop-zone {
        grid-template-columns: 1fr !important;
    }

    html body .app .pdf-upload-icon,
    html body .app .pdf-result-icon,
    html body .app .pdf-launch-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
    }

    html body .app .pdf-action-buttons,
    html body .app .pdf-result-actions,
    html body .app .pdf-result-actions .mud-button-root,
    html body .app .pdf-action-buttons .mud-button-root {
        width: 100% !important;
    }

    html body .app .pdf-hub-stats {
        justify-content: flex-start !important;
    }

    html body .app .pdf-launch-card {
        min-height: auto !important;
    }
}

/* Section-based DaivVerse SaaS landing experience. This lives at the end so the
   homepage consistently inherits the active app theme instead of old prototype
   blocks that made the landing page dense or directory-like. */
html {
    scroll-behavior: smooth;
}

html body .app .dv-saas-home {
    width: 100% !important;
    max-width: min(100%, 1680px) !important;
    display: grid !important;
    gap: clamp(22px, 3vw, 40px) !important;
    color: var(--dv-app-text, #f3f8ff) !important;
}

html body .app .dv-saas-hero,
html body .app .dv-saas-section,
html body .app .dv-saas-section-nav,
html body .app .dv-saas-preview,
html body .app .dv-saas-card,
html body .app .dv-saas-category-card,
html body .app .dv-saas-tool-card {
    border: 1px solid rgba(88, 166, 255, .20) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(56, 189, 248, .13), transparent 34%),
        linear-gradient(180deg, rgba(15, 29, 62, .92), rgba(8, 19, 41, .88)) !important;
    color: var(--dv-app-text, #f3f8ff) !important;
    box-shadow: 0 18px 56px rgba(2, 6, 23, .22) !important;
}

html body .app .dv-saas-hero {
    position: relative !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(24px, 4vw, 58px) !important;
    align-items: center !important;
    justify-items: center !important;
    text-align: center !important;
    min-height: min(680px, calc(100svh - 110px)) !important;
    padding: clamp(30px, 5vw, 76px) !important;
    border-radius: clamp(28px, 4vw, 46px) !important;
}

html body .app .dv-saas-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: -22% auto auto -14% !important;
    width: 46vw !important;
    height: 46vw !important;
    min-width: 420px !important;
    min-height: 420px !important;
    border-radius: 999px !important;
    background: radial-gradient(circle, rgba(14, 165, 233, .24), transparent 64%) !important;
    pointer-events: none !important;
}

html body .app .dv-saas-hero > * {
    position: relative !important;
    z-index: 1 !important;
}

html body .app .dv-saas-hero-copy {
    display: grid !important;
    gap: 20px !important;
    min-width: 0 !important;
    justify-items: center !important;
    max-width: 1080px !important;
}

html body .app .dv-saas-kicker {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: fit-content !important;
    min-height: 34px !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(125, 211, 252, .26) !important;
    background: rgba(56, 189, 248, .12) !important;
    color: #cdeafe !important;
    font-size: .82rem !important;
    font-weight: 850 !important;
}

html body .app .dv-saas-kicker .mud-icon-root {
    color: #7dd3fc !important;
    font-size: 1.05rem !important;
}

html body .app .dv-saas-hero h1 {
    max-width: 880px !important;
    margin: 0 !important;
    color: #f7fbff !important;
    font-size: clamp(2.6rem, 6.2vw, 6.6rem) !important;
    line-height: .96 !important;
    letter-spacing: -.06em !important;
    font-weight: 900 !important;
}

html body .app .dv-saas-hero p,
html body .app .dv-saas-section-head p,
html body .app .dv-saas-card span,
html body .app .dv-saas-category-card small,
html body .app .dv-saas-tool-card small,
html body .app .dv-saas-section p,
html body .app .dv-preview-footer {
    color: #c6d4e7 !important;
    line-height: 1.65 !important;
}

html body .app .dv-saas-hero p {
    max-width: 690px !important;
    font-size: clamp(1rem, 1.35vw, 1.22rem) !important;
}

html body .app .dv-saas-hero .dv-saas-vision {
    max-width: 880px !important;
    margin: 0 !important;
    padding: clamp(14px, 2vw, 18px) clamp(16px, 2.4vw, 24px) !important;
    border: 1px solid rgba(125, 211, 252, .22) !important;
    border-radius: 22px !important;
    background: rgba(2, 6, 23, .26) !important;
    color: #d9ecff !important;
    font-weight: 720 !important;
}

html body .app .dv-saas-actions,
html body .app .dv-saas-chip-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: center !important;
}

html body .app .dv-saas-actions .mud-button-root {
    min-height: 46px !important;
    border-radius: 999px !important;
    font-weight: 850 !important;
}

html body .app .dv-saas-chip-row span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 34px !important;
    padding: 7px 11px !important;
    border: 1px solid rgba(125, 211, 252, .18) !important;
    border-radius: 999px !important;
    background: rgba(2, 6, 23, .28) !important;
    color: #d9ecff !important;
    font-size: .86rem !important;
    font-weight: 760 !important;
}

html body .app .dv-saas-chip-row svg {
    color: #7dd3fc !important;
}

html body .app .dv-saas-preview {
    display: grid !important;
    gap: 16px !important;
    min-width: 0 !important;
    padding: clamp(18px, 2vw, 28px) !important;
    border-radius: 30px !important;
    background:
        linear-gradient(180deg, rgba(12, 28, 58, .96), rgba(5, 12, 32, .88)) !important;
}

html body .app .dv-preview-head,
html body .app .dv-saas-section-head.with-action {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
}

html body .app .dv-preview-head span,
html body .app .dv-preview-head a,
html body .app .dv-saas-inline-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #9ee7ff !important;
    font-weight: 850 !important;
    text-decoration: none !important;
}

html body .app .dv-saas-search-box {
    min-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border: 1px solid rgba(125, 211, 252, .24) !important;
    border-radius: 20px !important;
    background: rgba(2, 6, 23, .34) !important;
    padding: 0 16px !important;
}

html body .app .dv-saas-search-box input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--dv-app-text, #f3f8ff) !important;
    font-weight: 720 !important;
}

html body .app .dv-saas-search-box input::placeholder {
    color: #aebed4 !important;
}

html body .app .dv-saas-search-box:focus-within {
    border-color: rgba(56, 189, 248, .72) !important;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, .14) !important;
}

html body .app .dv-preview-grid,
html body .app .dv-saas-grid,
html body .app .dv-saas-steps,
html body .app .dv-saas-search-results {
    display: grid !important;
    gap: 14px !important;
}

html body .app .dv-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body .app .dv-preview-grid a,
html body .app .dv-preview-footer span {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    padding: 12px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(125, 211, 252, .16) !important;
    background: rgba(8, 19, 41, .64) !important;
    color: var(--dv-app-text, #f3f8ff) !important;
    text-decoration: none !important;
}

html body .app .dv-preview-grid svg {
    color: #7dd3fc !important;
}

html body .app .dv-preview-footer {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

html body .app .dv-preview-footer span {
    justify-content: center !important;
    min-height: 38px !important;
    padding: 8px !important;
    font-size: .78rem !important;
    font-weight: 820 !important;
}

html body .app .dv-saas-section-nav {
    position: sticky !important;
    top: calc(var(--dv-header-height, 72px) + 10px) !important;
    z-index: 12 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
    padding: 12px !important;
    border-radius: 999px !important;
    background: rgba(7, 18, 40, .88) !important;
    backdrop-filter: blur(16px) !important;
}

html body .app .dv-saas-section-nav a {
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 13px !important;
    border-radius: 999px !important;
    color: #d9ecff !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

html body .app .dv-saas-section-nav a:hover,
html body .app .dv-saas-section-nav a:focus-visible {
    background: rgba(56, 189, 248, .14) !important;
    color: #ffffff !important;
}

html body .app .dv-saas-section {
    display: grid !important;
    gap: clamp(18px, 2vw, 26px) !important;
    padding: clamp(24px, 3vw, 42px) !important;
    border-radius: clamp(24px, 3vw, 36px) !important;
}

html body .app .dv-saas-section-head {
    display: grid !important;
    gap: 10px !important;
    max-width: 870px !important;
}

html body .app .dv-saas-section-head h2,
html body .app .dv-saas-section h2 {
    margin: 0 !important;
    color: var(--dv-app-text, #f3f8ff) !important;
    font-size: clamp(1.9rem, 3.6vw, 3.8rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
    font-weight: 900 !important;
}

html body .app .dv-saas-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html body .app .dv-saas-grid.three,
html body .app .dv-saas-grid.mini {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html body .app .dv-saas-grid.categories,
html body .app .dv-saas-grid.tools {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)) !important;
}

html body .app .dv-saas-card,
html body .app .dv-saas-category-card,
html body .app .dv-saas-tool-card,
html body .app .dv-saas-steps article {
    min-width: 0 !important;
    min-height: 100% !important;
    display: grid !important;
    align-content: start !important;
    gap: 10px !important;
    padding: clamp(16px, 1.8vw, 24px) !important;
    border-radius: 24px !important;
    text-decoration: none !important;
    transition: transform .18s ease, border-color .18s ease, background .18s ease !important;
}

html body .app .dv-saas-card:hover,
html body .app .dv-saas-category-card:hover,
html body .app .dv-saas-tool-card:hover,
html body .app .dv-saas-card:focus-visible,
html body .app .dv-saas-category-card:focus-visible,
html body .app .dv-saas-tool-card:focus-visible {
    transform: translateY(-3px) !important;
    border-color: rgba(56, 189, 248, .48) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(56, 189, 248, .18), transparent 34%),
        linear-gradient(180deg, rgba(18, 41, 84, .94), rgba(8, 19, 41, .90)) !important;
}

html body .app .dv-saas-card b,
html body .app .dv-saas-category-card b,
html body .app .dv-saas-tool-card b,
html body .app .dv-saas-steps b {
    color: var(--dv-app-text, #f3f8ff) !important;
    font-size: 1.02rem !important;
    line-height: 1.2 !important;
}

html body .app .dv-saas-card > .mud-icon-root,
html body .app .dv-saas-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, rgba(56, 189, 248, .25), rgba(37, 99, 235, .18)) !important;
    color: #7dd3fc !important;
    border: 1px solid rgba(125, 211, 252, .18) !important;
}

html body .app .dv-saas-category-card em,
html body .app .dv-saas-tool-card em {
    width: fit-content !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    background: rgba(125, 211, 252, .10) !important;
    border: 1px solid rgba(125, 211, 252, .16) !important;
    color: #cdeafe !important;
    font-size: .78rem !important;
    font-style: normal !important;
    font-weight: 800 !important;
}

html body .app .dv-saas-category-card strong,
html body .app .dv-saas-card strong {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: auto !important;
    color: #9ee7ff !important;
    font-weight: 900 !important;
}

html body .app .dv-saas-split {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
    align-items: center !important;
}

html body .app .dv-saas-split > div:first-child {
    display: grid !important;
    gap: 16px !important;
}

html body .app .dv-saas-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html body .app .dv-saas-steps article {
    background: rgba(7, 18, 40, .62) !important;
    border: 1px solid rgba(125, 211, 252, .18) !important;
}

html body .app .dv-saas-steps article > span {
    display: inline-flex !important;
    width: 42px !important;
    height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
    color: #fff !important;
    font-weight: 950 !important;
}

html body .app .dv-saas-search-results {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
}

html body .app .dv-saas-search-results a,
html body .app .dv-saas-search-results p {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 13px !important;
    border: 1px solid rgba(125, 211, 252, .16) !important;
    border-radius: 18px !important;
    background: rgba(2, 6, 23, .24) !important;
    color: var(--dv-app-text, #f3f8ff) !important;
    text-decoration: none !important;
}

html body .app .dv-saas-search-results a > span {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

html body .app .dv-saas-search-results em {
    color: #9ee7ff !important;
    font-style: normal !important;
    font-size: .78rem !important;
    font-weight: 850 !important;
}

html body .app .dv-saas-final-cta {
    justify-items: center !important;
    text-align: center !important;
    padding-block: clamp(34px, 5vw, 70px) !important;
}

@media (max-width: 1120px) {
    html body .app .dv-saas-hero,
    html body .app .dv-saas-split {
        grid-template-columns: 1fr !important;
    }

    html body .app .dv-saas-grid.four,
    html body .app .dv-saas-grid.three,
    html body .app .dv-saas-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    html body .app .dv-saas-home {
        gap: 18px !important;
    }

    html body .app .dv-saas-hero,
    html body .app .dv-saas-section {
        padding: 20px !important;
        border-radius: 24px !important;
    }

    html body .app .dv-saas-hero h1 {
        font-size: clamp(2.15rem, 11vw, 3.4rem) !important;
    }

    html body .app .dv-saas-grid.four,
    html body .app .dv-saas-grid.three,
    html body .app .dv-saas-grid.mini,
    html body .app .dv-saas-steps,
    html body .app .dv-preview-grid,
    html body .app .dv-preview-footer {
        grid-template-columns: 1fr !important;
    }

    html body .app .dv-saas-section-nav {
        position: static !important;
        justify-content: flex-start !important;
        border-radius: 22px !important;
    }

    html body .app .dv-saas-actions .mud-button-root,
    html body .app .dv-saas-actions {
        width: 100% !important;
    }

    html body .app .dv-preview-head,
    html body .app .dv-saas-section-head.with-action {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
}

/* Global DaivVerse form normalization.
   Keeps labels static above controls so they never overlap input borders,
   placeholders, typed text, select values, or validation messages. */
html body .app {
    --dv-form-bg: rgba(8, 18, 40, .84);
    --dv-form-bg-soft: rgba(15, 35, 72, .72);
    --dv-form-border: rgba(96, 165, 250, .34);
    --dv-form-border-hover: rgba(125, 211, 252, .50);
    --dv-form-focus: rgba(56, 189, 248, .85);
    --dv-form-text: var(--dv-app-text, #f3f8ff);
    --dv-form-muted: var(--dv-app-muted, #b9c9dc);
    --dv-form-error: #f87171;
}

html body .app :where(.dv-form-group, .form-col, .form-row > label, .tool-route label:has(> input), .tool-route label:has(> select), .tool-route label:has(> textarea), .legal label:has(> input), .legal label:has(> select), .legal label:has(> textarea)) {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    color: var(--dv-form-text) !important;
    font-size: .9rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
}

html body .app :where(.dv-form-label, .tool-route .form-row label, .tool-route .form-col label, .legal .form-row label, .legal .form-col label, .contact-message-form label, .fx-card label, .money-field-label, .api-field-label) {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--dv-form-text) !important;
    font-size: .9rem !important;
    font-weight: 850 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    pointer-events: auto !important;
}

html body .app :where(.dv-form-label span, label .required, label [aria-hidden="true"]) {
    color: var(--dv-form-error) !important;
}

html body .app :where(.dv-form-input, .dv-form-select, .dv-form-textarea, .ta, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), textarea, select) {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid var(--dv-form-border) !important;
    border-radius: 16px !important;
    background: var(--dv-form-bg) !important;
    color: var(--dv-form-text) !important;
    font: inherit !important;
    font-size: .98rem !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    outline: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}

html body .app :where(.dv-form-input, .dv-form-select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select) {
    min-height: 52px !important;
    padding: 13px 16px !important;
}

html body .app :where(.dv-form-textarea, textarea) {
    min-height: 150px !important;
    padding: 14px 16px !important;
    resize: vertical !important;
}

html body .app :where(input, textarea)::placeholder {
    color: color-mix(in srgb, var(--dv-form-muted) 82%, transparent) !important;
    opacity: 1 !important;
}

html body .app :where(.dv-form-input, .dv-form-select, .dv-form-textarea, .ta, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), textarea, select):hover {
    border-color: var(--dv-form-border-hover) !important;
    background: var(--dv-form-bg-soft) !important;
}

html body .app :where(.dv-form-input, .dv-form-select, .dv-form-textarea, .ta, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), textarea, select):focus,
html body .app :where(.dv-form-input, .dv-form-select, .dv-form-textarea, .ta, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), textarea, select):focus-visible {
    border-color: var(--dv-form-focus) !important;
    box-shadow:
        0 0 0 3px rgba(56, 189, 248, .18),
        inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

html body .app :where(.dv-form-help, .dv-form-error, .validation-message, .mud-input-helper-text, .mud-input-counter, .field-validation-error) {
    position: static !important;
    display: block !important;
    margin-top: 4px !important;
    color: var(--dv-form-muted) !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

html body .app :where(.dv-form-error, .validation-message, .field-validation-error, .mud-input-error .mud-input-helper-text) {
    color: var(--dv-form-error) !important;
}

html body .app :where(.dv-form-row, .form-row) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
    gap: 16px !important;
    align-items: start !important;
}

html body .app :where(.dv-form-actions, .contact-actions, .btn-row) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: center !important;
}

/* MudBlazor outlined fields: disable overlapping/floating label geometry globally. */
html body .app :where(.mud-input-control) {
    display: grid !important;
    gap: 8px !important;
    margin-top: 0 !important;
}

html body .app :where(.mud-input-control > .mud-input-control-input-container) {
    display: grid !important;
    gap: 8px !important;
    min-height: 0 !important;
}

html body .app :where(.mud-input-label) {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    translate: none !important;
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--dv-form-text) !important;
    font-size: .9rem !important;
    font-weight: 850 !important;
    line-height: 1.35 !important;
    background: transparent !important;
    pointer-events: auto !important;
}

html body .app :where(.mud-input-root) {
    min-height: 52px !important;
    align-items: center !important;
    border-radius: 16px !important;
    background: var(--dv-form-bg) !important;
    color: var(--dv-form-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    transform: none !important;
}

html body .app :where(.mud-input-outlined-border) {
    border-radius: 16px !important;
    border-color: var(--dv-form-border) !important;
}

html body .app :where(.mud-input-outlined-border legend) {
    display: none !important;
}

html body .app :where(.mud-input-root:hover .mud-input-outlined-border) {
    border-color: var(--dv-form-border-hover) !important;
}

html body .app :where(.mud-input-root.mud-focused .mud-input-outlined-border) {
    border-color: var(--dv-form-focus) !important;
    border-width: 1.5px !important;
}

html body .app :where(.mud-input-root.mud-focused) {
    box-shadow:
        0 0 0 3px rgba(56, 189, 248, .18),
        inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

html body .app :where(.mud-input-slot, .mud-select-input, .mud-input input, .mud-input textarea) {
    color: var(--dv-form-text) !important;
    font-size: .98rem !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

html body .app :where(.mud-input input, .mud-select-input) {
    min-height: 50px !important;
}

html body .app :where(.mud-input textarea) {
    min-height: 140px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

/* Combined amount + selector controls keep one label above the whole group. */
html body .app :where(.fx-input-row) {
    min-height: 58px !important;
    border-color: var(--dv-form-border) !important;
    background: var(--dv-form-bg) !important;
}

html body .app :where(.fx-input-row input) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .app :where(.fx-currency-picker) {
    min-height: 58px !important;
    border-left-color: var(--dv-form-border) !important;
}

html body .app :where(.fx-currency-trigger) {
    min-height: 58px !important;
}

html body .app :where(label:has(> input[type="checkbox"]), label:has(> input[type="radio"])) {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-height: 44px !important;
    color: var(--dv-form-text) !important;
}

html body .app :where(input[type="checkbox"], input[type="radio"]) {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    accent-color: #38bdf8 !important;
}

@media (max-width: 720px) {
    html body .app :where(.dv-form-row, .form-row) {
        grid-template-columns: 1fr !important;
    }

    html body .app :where(.dv-form-actions, .contact-actions, .btn-row) {
        align-items: stretch !important;
        flex-direction: column !important;
    }
}

/* Viewport-safe top navigation. Keep every mega menu inside the browser window
   and switch cleanly to the MudBlazor drawer on mobile. */
html body .app .tv-command-topbar.tv-asana-topbar {
    overflow: visible !important;
    contain: none !important;
    z-index: 1500 !important;
}

html body .app .tv-asana-menu-item {
    position: static !important;
}

html body .app .tv-asana-menu-item > .tv-asana-mega,
html body .app .tv-asana-more-item > .tv-asana-mega {
    position: fixed !important;
    top: clamp(72px, 8.5vh, 92px) !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: calc(100dvh - 104px) !important;
    transform: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) !important;
    z-index: 1550 !important;
}

html body .app .tv-asana-menu-item > .tv-asana-mega *,
html body .app .tv-asana-more-item > .tv-asana-mega * {
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body .app .tv-asana-mega-grid {
    grid-template-columns: 1fr !important;
}

html body .app .tv-asana-mega-grid section {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}

@media (min-width: 1440px) {
    html body .app .tv-asana-mega-grid section {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    }
}

@media (max-width: 1180px) {
    html body .app .tv-asana-menu-item > .tv-asana-mega,
    html body .app .tv-asana-more-item > .tv-asana-mega {
        top: 76px !important;
        grid-template-columns: 1fr !important;
        max-height: calc(100dvh - 88px) !important;
    }
}

@media (max-width: 900px) {
    html body .app .tv-asana-menu {
        display: none !important;
    }

    html body .app .tv-asana-mobile-menu {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    html body .app .tv-asana-actions {
        margin-left: auto !important;
    }

    html body .app .mud-drawer,
    html body .app .mud-drawer-content {
        position: fixed !important;
        inset-block: 0 !important;
        left: 0 !important;
        width: min(88vw, 390px) !important;
        max-width: min(88vw, 390px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 1600 !important;
    }

    html body .app .drawer-menu {
        min-height: 100% !important;
        padding: 14px 10px 24px !important;
    }

    html body .app .drawer-menu .mud-nav-link,
    html body .app .drawer-menu .mud-nav-group {
        min-height: 44px !important;
    }

    html body .mud-overlay {
        z-index: 1590 !important;
    }
}

/* Contact page polish: scoped final rules so the public contact form keeps the
   shared app theme while avoiding the older generic form/layout overrides. */
html body .app .contact-page {
    max-width: min(100%, var(--dv-app-max, 1440px)) !important;
    gap: clamp(18px, 2vw, 28px) !important;
}

html body .app .contact-page .contact-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px) !important;
    align-items: end !important;
    gap: clamp(20px, 3vw, 34px) !important;
    padding: clamp(28px, 4vw, 52px) !important;
}

html body .app .contact-hero-copy {
    display: grid;
    gap: 14px;
    min-width: 0;
}

html body .app .contact-page .contact-kicker {
    justify-self: start;
    border: 1px solid rgba(125, 211, 252, .30) !important;
    background: rgba(14, 165, 233, .16) !important;
    color: var(--dv-app-text, #f3f8ff) !important;
    font-weight: 850 !important;
}

html body .app .contact-page .contact-hero h1 {
    max-width: 780px;
    margin: 0 !important;
    line-height: .98 !important;
}

html body .app .contact-page .contact-hero p {
    max-width: 760px;
    margin: 0 !important;
}

html body .app .contact-page .contact-meta span {
    gap: 8px;
    min-height: 40px;
    border-color: rgba(125, 211, 252, .24) !important;
    background: rgba(8, 18, 40, .56) !important;
    color: var(--dv-app-muted, #b9c9dc) !important;
}

html body .app .contact-page .contact-meta .mud-icon-root {
    color: #38bdf8;
    font-size: 1.05rem;
}

html body .app .contact-hero-card {
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px solid rgba(125, 211, 252, .24);
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(56, 189, 248, .14), transparent 38%),
        rgba(8, 18, 40, .58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

html body .app .contact-hero-card span {
    color: #7dd3fc;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

html body .app .contact-hero-card strong {
    color: var(--dv-app-text, #f3f8ff);
    font-size: 1.08rem;
    line-height: 1.35;
}

html body .app .contact-hero-card p {
    color: var(--dv-app-muted, #b9c9dc) !important;
    font-size: .92rem !important;
    line-height: 1.55 !important;
}

html body .app .contact-page .contact-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 390px) !important;
    gap: clamp(18px, 2.2vw, 28px) !important;
    align-items: start !important;
}

html body .app .contact-page .contact-message-panel {
    padding: clamp(20px, 2.5vw, 34px) !important;
    border: 1px solid rgba(125, 211, 252, .24) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(56, 189, 248, .09), transparent 32%),
        linear-gradient(180deg, rgba(15, 29, 62, .96), rgba(8, 19, 41, .92)) !important;
    box-shadow: 0 18px 56px rgba(2, 6, 23, .24) !important;
}

html body .app .contact-page .contact-message-form {
    display: grid !important;
    gap: 18px !important;
}

html body .app .contact-page .contact-form-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

html body .app .contact-page .contact-form-head .mud-typography {
    color: var(--dv-app-text, #f3f8ff) !important;
    font-size: clamp(1.35rem, 2vw, 1.75rem) !important;
    font-weight: 900 !important;
}

html body .app .contact-page .contact-form-head .muted {
    max-width: 680px;
    margin: 6px 0 0 !important;
    color: var(--dv-app-muted, #b9c9dc) !important;
    line-height: 1.55 !important;
}

html body .app .contact-page .contact-big-field {
    width: 100% !important;
}

html body .app .contact-page .contact-big-field .mud-input-control {
    gap: 0 !important;
}

html body .app .contact-page .contact-big-field .mud-input-label {
    display: none !important;
}

html body .app .contact-page .contact-big-field .mud-input-root {
    min-height: 50px !important;
    border-radius: 18px !important;
    background: rgba(2, 12, 29, .72) !important;
}

html body .app .contact-page .contact-big-field .mud-input-slot,
html body .app .contact-page .contact-big-field input,
html body .app .contact-page .contact-big-field textarea {
    color: var(--dv-app-text, #f3f8ff) !important;
    font-size: 1rem !important;
    font-weight: 720 !important;
}

html body .app .contact-page .contact-big-field input::placeholder,
html body .app .contact-page .contact-big-field textarea::placeholder {
    color: color-mix(in srgb, var(--dv-app-muted, #b9c9dc) 88%, transparent) !important;
    opacity: 1 !important;
    font-weight: 680 !important;
}

html body .app .contact-page .contact-message-box .mud-input-root {
    min-height: clamp(190px, 23vw, 240px) !important;
    align-items: flex-start !important;
}

html body .app .contact-page .contact-safety-note {
    border-color: rgba(245, 158, 11, .34) !important;
    background: rgba(120, 53, 15, .20) !important;
    color: var(--dv-app-muted, #b9c9dc) !important;
}

html body .app .contact-page .contact-verification {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 14px !important;
    align-items: center !important;
    min-height: 82px !important;
    padding: 14px !important;
    border: 1px solid rgba(125, 211, 252, .20) !important;
    border-radius: 20px !important;
    background: rgba(2, 12, 29, .42) !important;
}

html body .app .contact-verification-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

html body .app .contact-verification-copy strong {
    color: var(--dv-app-text, #f3f8ff);
    font-size: .94rem;
    font-weight: 900;
}

html body .app .contact-verification-copy span {
    color: var(--dv-app-muted, #b9c9dc);
    font-size: .84rem;
    line-height: 1.4;
}

html body .app .contact-page .contact-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
}

html body .app .contact-page .contact-send-btn {
    min-width: 190px !important;
    min-height: 48px !important;
    gap: 8px !important;
    border: 1px solid rgba(125, 211, 252, .38) !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #0284c7, #2563eb) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 34px rgba(37, 99, 235, .22) !important;
}

html body .app .contact-page .contact-send-btn:hover,
html body .app .contact-page .contact-send-btn:focus-visible {
    background: linear-gradient(135deg, #0369a1, #1d4ed8) !important;
}

html body .app .contact-page .contact-submit-note {
    max-width: 420px;
    color: var(--dv-app-muted, #b9c9dc);
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.45;
}

html body .app .contact-page .contact-side {
    display: grid !important;
    gap: 14px !important;
}

html body .app .contact-page .contact-side .legal-card {
    padding: 20px !important;
    border: 1px solid rgba(125, 211, 252, .18) !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, rgba(15, 29, 62, .90), rgba(8, 19, 41, .80)) !important;
    box-shadow: none !important;
}

html body .app .contact-page .contact-side .legal-card .mud-icon-root {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(14, 165, 233, .14);
    color: #38bdf8 !important;
    font-size: 1.35rem !important;
}

html body .app .contact-page .contact-side .legal-card h2 {
    margin: 2px 0 0;
    color: var(--dv-app-text, #f3f8ff);
    font-size: 1rem;
    font-weight: 900;
}

html body .app .contact-page .contact-side .legal-card p {
    margin: 0;
    color: var(--dv-app-muted, #b9c9dc);
    font-size: .92rem;
    line-height: 1.58;
}

@media (max-width: 980px) {
    html body .app .contact-page .contact-hero,
    html body .app .contact-page .contact-grid {
        grid-template-columns: 1fr !important;
    }

    html body .app .contact-hero-card {
        max-width: 620px;
    }
}

@media (max-width: 640px) {
    html body .app .contact-page .contact-hero {
        padding: 24px !important;
    }

    html body .app .contact-page .contact-form-head,
    html body .app .contact-page .contact-actions {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    html body .app .contact-page .contact-verification {
        grid-template-columns: 1fr !important;
    }

    html body .app .contact-page .contact-send-btn {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Games final pass: keep the DaivVerse blue theme, polish the selected arcade,
   and make native/pseudo fullscreen fill the available screen. */
html body .app .games-active-arena,
html body .app .games-active-arena .passport-editor-box,
html body .app .games-rps-score-card {
    border-color: rgba(56, 189, 248, .28) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(37, 99, 235, .22), transparent 38%),
        radial-gradient(circle at 92% 10%, rgba(34, 211, 238, .16), transparent 32%),
        linear-gradient(145deg, rgba(3, 12, 35, .98), rgba(7, 18, 45, .98)) !important;
    color: #f8fbff !important;
    box-shadow: 0 22px 70px rgba(2, 6, 23, .28) !important;
}

html body .app .games-active-arena .tool-subhead h3,
html body .app .games-active-arena .passport-editor-head b {
    color: #f8fbff !important;
}

html body .app .games-active-arena .tool-subhead p,
html body .app .games-active-arena .passport-editor-head small,
html body .app .games-active-arena .automation-small,
html body .app .games-active-arena .automation-small span {
    color: #b9d9f6 !important;
}

html body .app .games-grid {
    width: min(100%, 430px) !important;
    margin-inline: auto !important;
    gap: 10px !important;
}

html body .app .games-cell,
html body .app .games-connect-four-cell,
html body .app .games-memory-card {
    border-color: rgba(56, 189, 248, .38) !important;
    background: linear-gradient(145deg, rgba(15, 40, 82, .94), rgba(8, 20, 48, .98)) !important;
    color: #e0f7ff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(2, 132, 199, .13) !important;
}

html body .app .games-cell.human,
html body .app .games-connect-four-cell.human {
    background: linear-gradient(145deg, rgba(14, 165, 233, .95), rgba(37, 99, 235, .95)) !important;
    color: #ffffff !important;
}

html body .app .games-cell.bot,
html body .app .games-connect-four-cell.bot {
    background: linear-gradient(145deg, rgba(6, 182, 212, .92), rgba(14, 116, 144, .95)) !important;
    color: #ffffff !important;
}

/* Connect Four: cap the board width so the 7x6 grid stays a sensible size
   (the cells were stretching to the full arena width). Both themes. */
html body .app .games-connect-four-board {
    max-width: 440px !important;
    margin-inline: auto !important;
    width: 100% !important;
}

/* Light theme: empty cells read as light recessed holes, and the two players use
   clearly distinct disc colours (blue vs amber). Dark theme keeps its dark board. */
html body .app.light .games-connect-four-cell {
    border-color: var(--bd) !important;
    background: var(--bg3) !important;
    color: var(--tx) !important;
    box-shadow: inset 0 2px 5px rgba(15, 23, 42, .07) !important;
}
html body .app.light .games-connect-four-cell.human {
    background: radial-gradient(circle at 36% 30%, #7aa3ff, #2f5cff) !important;
    color: #ffffff !important;
    border-color: rgba(47, 92, 255, .5) !important;
}
html body .app.light .games-connect-four-cell.bot {
    background: radial-gradient(circle at 36% 30%, #ffd27a, #f59e0b) !important;
    color: #5b3b00 !important;
    border-color: rgba(245, 158, 11, .5) !important;
}

html body .app .games-rps-stage {
    display: grid !important;
    gap: 16px !important;
}

html body .app .games-rps-choice-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

html body .app .games-rps-choice {
    min-height: 138px !important;
    display: grid !important;
    place-items: center !important;
    gap: 8px !important;
    padding: 18px 14px !important;
    border: 1px solid rgba(125, 211, 252, .34) !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(125, 211, 252, .24), transparent 58%),
        linear-gradient(145deg, rgba(8, 47, 73, .96), rgba(15, 23, 42, .98)) !important;
    color: #f8fbff !important;
    cursor: pointer !important;
    transition: transform .18s ease, border-color .18s ease, background .18s ease !important;
}

html body .app .games-rps-choice:hover,
html body .app .games-rps-choice:focus-visible {
    transform: translateY(-3px) !important;
    border-color: rgba(56, 189, 248, .78) !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(56, 189, 248, .34), transparent 58%),
        linear-gradient(145deg, rgba(14, 116, 144, .98), rgba(30, 64, 175, .98)) !important;
    outline: none !important;
}

html body .app .games-rps-choice span {
    width: 56px !important;
    height: 56px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 18px !important;
    background: rgba(14, 165, 233, .20) !important;
    color: #7dd3fc !important;
    font-size: 1.75rem !important;
    font-weight: 950 !important;
}

html body .app .games-rps-choice b {
    color: #ffffff !important;
    font-size: 1rem !important;
}

html body .app .games-rps-score-card {
    padding: 18px !important;
    border: 1px solid rgba(56, 189, 248, .24) !important;
    border-radius: 24px !important;
}

html body .app .games-rps-score-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 12px !important;
}

html body .app .games-rps-score-row span {
    display: grid !important;
    gap: 4px !important;
    padding: 12px !important;
    border: 1px solid rgba(125, 211, 252, .20) !important;
    border-radius: 16px !important;
    background: rgba(15, 40, 82, .62) !important;
}

html body .app .games-rps-score-row small {
    color: #9ccff5 !important;
    font-size: .75rem !important;
    font-weight: 850 !important;
}

html body .app .games-rps-score-row strong {
    color: #ffffff !important;
    overflow-wrap: anywhere !important;
}

html body.tv-game-fullscreen-open,
html.tv-game-fullscreen-open {
    overflow: hidden !important;
}

html body .app .games-active-arena:fullscreen,
html body .app .games-active-arena:-webkit-full-screen,
html body .app .games-active-arena.dv-game-pseudo-fullscreen,
html body .word-dash-shell:fullscreen,
html body .word-dash-shell:-webkit-full-screen,
html body .word-dash-shell.dv-game-pseudo-fullscreen,
html body .tv-ndr-game-card:fullscreen,
html body .tv-ndr-game-card:-webkit-full-screen,
html body .tv-ndr-game-card.tv-ndr-pseudo-fullscreen,
html body .tv-msr-game-card:fullscreen,
html body .tv-msr-game-card:-webkit-full-screen,
html body .tv-msr-game-card.tv-msr-pseudo-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 7000 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: auto !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(56, 189, 248, .18), transparent 34%),
        linear-gradient(180deg, #020617, #07162f 52%, #020617) !important;
}

html body .app .games-active-arena:fullscreen,
html body .app .games-active-arena:-webkit-full-screen,
html body .app .games-active-arena.dv-game-pseudo-fullscreen {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    align-content: start !important;
}

html body .tv-ndr-game-card:fullscreen,
html body .tv-ndr-game-card:-webkit-full-screen,
html body .tv-ndr-game-card.tv-ndr-pseudo-fullscreen,
html body .tv-msr-game-card:fullscreen,
html body .tv-msr-game-card:-webkit-full-screen,
html body .tv-msr-game-card.tv-msr-pseudo-fullscreen {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
}

html body .tv-ndr-game-card:fullscreen .tv-ndr-canvas,
html body .tv-ndr-game-card:-webkit-full-screen .tv-ndr-canvas,
html body .tv-ndr-game-card.tv-ndr-pseudo-fullscreen .tv-ndr-canvas,
html body .tv-msr-game-card:fullscreen .tv-msr-canvas,
html body .tv-msr-game-card:-webkit-full-screen .tv-msr-canvas,
html body .tv-msr-game-card.tv-msr-pseudo-fullscreen .tv-msr-canvas,
html body .word-dash-shell:fullscreen .word-dash-canvas,
html body .word-dash-shell:-webkit-full-screen .word-dash-canvas,
html body .word-dash-shell.dv-game-pseudo-fullscreen .word-dash-canvas {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: contain !important;
    border-radius: 18px !important;
}

html body .tv-ndr-shell,
html body .tv-msr-shell {
    color-scheme: dark !important;
}

html body .tv-ndr-hero,
html body .tv-msr-hero,
html body .tv-ndr-game-card,
html body .tv-msr-game-card,
html body .tv-ndr-info-grid article,
html body .tv-msr-info-grid article {
    border-color: rgba(56, 189, 248, .24) !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(37, 99, 235, .24), transparent 34%),
        radial-gradient(circle at 86% 12%, rgba(34, 211, 238, .18), transparent 32%),
        linear-gradient(145deg, #061126, #081936 58%, #020617) !important;
}

html body .tv-ndr-kicker,
html body .tv-msr-kicker,
html body .tv-ndr-chips span,
html body .tv-msr-chips span {
    border-color: rgba(125, 211, 252, .34) !important;
    background: rgba(14, 165, 233, .13) !important;
    color: #bfdbfe !important;
}

html body .tv-ndr-btn,
html body .tv-msr-btn {
    border-color: rgba(125, 211, 252, .30) !important;
    background: rgba(15, 40, 82, .74) !important;
    color: #dbeafe !important;
}

html body .tv-ndr-btn.primary,
html body .tv-msr-btn.primary,
html body .tv-msr-btn.accent {
    border-color: rgba(56, 189, 248, .62) !important;
    background: linear-gradient(135deg, #0284c7, #2563eb) !important;
    color: #ffffff !important;
}

/* The neon hero / game-card / info panels are dark in BOTH themes, but on the
   light theme their headings/paragraphs inherited the dark light-theme text
   colour and became invisible (dark-on-dark). Force light text inside them. */
html body .app.light :is(.tv-ndr-hero, .tv-msr-hero, .tv-ndr-game-card, .tv-msr-game-card, .tv-ndr-info-grid article, .tv-msr-info-grid article) :is(h1, h2, h3, h4) {
    color: #f4ffff !important;
}
html body .app.light :is(.tv-ndr-hero, .tv-msr-hero, .tv-ndr-game-card, .tv-msr-game-card, .tv-ndr-info-grid article, .tv-msr-info-grid article) :is(p, li, small) {
    color: #b7c8da !important;
}

@media (max-width: 700px) {
    html body .app .games-rps-choice-grid,
    html body .app .games-rps-score-row {
        grid-template-columns: 1fr !important;
    }

    html body .app .games-rps-choice {
        min-height: 92px !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        justify-items: start !important;
    }
}

/* Home footer compact trust notes and boxed information links */
html body .app.home-route .footer-trust-compact {
    padding: 16px !important;
    gap: 10px !important;
}

html body .app.home-route .footer-trust-compact .footer-head {
    margin-bottom: 8px !important;
    font-size: .78rem !important;
    letter-spacing: .08em !important;
}

html body .app.home-route .footer-trust-compact .footer-chip-row {
    gap: 6px !important;
}

html body .app.home-route .footer-trust-compact .footer-chip-row span {
    min-height: 30px !important;
    padding: 6px 8px !important;
    border-radius: 999px !important;
    font-size: .74rem !important;
    line-height: 1.15 !important;
}

html body .app.home-route .footer-trust-compact .footer-note {
    margin-top: 8px !important;
    font-size: .78rem !important;
    line-height: 1.45 !important;
}

html body .app.home-route .footer-info-column {
    min-width: 0 !important;
}

html body .app.home-route .footer-info-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

html body .app.home-route .footer-info-link {
    display: flex !important;
    min-width: 0 !important;
    min-height: 42px !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    border: 1px solid rgba(56, 189, 248, .22) !important;
    border-radius: 14px !important;
    background: rgba(14, 165, 233, .08) !important;
    color: #e8f5ff !important;
    font-size: .8rem !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
}

html body .app.home-route .footer-info-link:hover,
html body .app.home-route .footer-info-link:focus-visible {
    border-color: rgba(56, 189, 248, .46) !important;
    background: rgba(14, 165, 233, .16) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

html body .app.home-route .footer-info-link .mud-icon-root {
    flex: 0 0 auto !important;
    color: #38bdf8 !important;
    font-size: 1rem !important;
}

html body .app.home-route .footer-info-link span {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

@media (max-width: 720px) {
    html body .app.home-route .footer-info-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Compact category and landing cards for dense Security, DNS, Code, and Text libraries */
html body .app.inner-route .category-compact-page .readable-category-grid {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: repeat(auto-fit, minmax(218px, 1fr)) !important;
    gap: 10px !important;
    margin-inline: 0 !important;
}

html body .app.inner-route .category-compact-page .category-readable-card {
    grid-template-columns: 34px minmax(0, 1fr) 22px !important;
    gap: 9px !important;
    min-height: 60px !important;
    padding: 9px 10px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 26px rgba(2, 6, 23, .18) !important;
}

html body .app.inner-route .category-compact-page .category-readable-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 11px !important;
}

html body .app.inner-route .category-compact-page .category-readable-icon .mud-icon-root {
    font-size: 1.04rem !important;
}

html body .app.inner-route .category-compact-page .category-readable-copy {
    gap: 3px !important;
}

html body .app.inner-route .category-compact-page .category-readable-title {
    font-size: .84rem !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
}

html body .app.inner-route .category-compact-page .category-readable-description {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: .72rem !important;
    line-height: 1.28 !important;
}

html body .app.inner-route .category-compact-page .category-readable-badges {
    grid-column: 2 / -1 !important;
    gap: 5px !important;
    margin-top: 0 !important;
}

html body .app.inner-route .category-compact-page .category-readable-badges em {
    min-height: 20px !important;
    padding: 3px 7px !important;
    font-size: .64rem !important;
}

html body .app.inner-route .category-compact-page .category-readable-open {
    width: 22px !important;
    height: 22px !important;
    font-size: 1rem !important;
}

html body .app.inner-route .category-step-strip {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

html body .app.inner-route .category-step-strip article {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 9px !important;
    min-width: 0 !important;
    padding: 12px !important;
    border: 1px solid rgba(125, 211, 252, .22) !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(14, 165, 233, .12), rgba(37, 99, 235, .08)) !important;
    color: var(--dv-app-text, #f3f8ff) !important;
}

html body .app.inner-route .category-step-strip article > span {
    display: inline-grid !important;
    width: 30px !important;
    height: 30px !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: rgba(56, 189, 248, .16) !important;
    color: #7dd3fc !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
}

html body .app.inner-route .category-step-strip b {
    display: block !important;
    color: var(--dv-app-text, #f3f8ff) !important;
    font-size: .82rem !important;
    line-height: 1.2 !important;
}

html body .app.inner-route .category-step-strip small {
    display: block !important;
    margin-top: 3px !important;
    color: var(--dv-app-muted, #b9c7dc) !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    line-height: 1.28 !important;
}

html body .app.inner-route .seo-compact-tools .tv-popular-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    gap: 10px !important;
}

html body .app.inner-route .seo-compact-tools .tv-popular-card {
    min-height: 108px !important;
    gap: 6px !important;
    padding: 12px !important;
    border-radius: 16px !important;
}

html body .app.inner-route .seo-compact-tools .tv-popular-card > span {
    width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
}

html body .app.inner-route .seo-compact-tools .tv-popular-card b {
    font-size: .86rem !important;
    line-height: 1.18 !important;
}

html body .app.inner-route .seo-compact-tools .tv-popular-card small {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: .72rem !important;
    line-height: 1.28 !important;
}

html body .app.inner-route .seo-step-strip {
    margin: 0 0 clamp(14px, 2vw, 22px) !important;
}

@media (max-width: 980px) {
    html body .app.inner-route .category-step-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    html body .app.inner-route .category-compact-page .readable-category-grid,
    html body .app.inner-route .seo-compact-tools .tv-popular-grid,
    html body .app.inner-route .category-step-strip {
        grid-template-columns: 1fr !important;
    }
}

/* Compact mega-menu rows so DNS, Security, Code, and Text can show more tools without clipping. */
html body .app .tv-asana-mega {
    max-width: min(980px, calc(100vw - 32px)) !important;
    max-height: calc(100dvh - 92px) !important;
    overflow: auto !important;
}

html body .app .tv-asana-mega-grid {
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)) !important;
    gap: 8px !important;
}

html body .app .tv-asana-mega-grid section {
    gap: 5px !important;
}

html body .app .tv-asana-mega-section {
    min-height: 42px !important;
    gap: 7px !important;
    padding: 7px !important;
    border-radius: 12px !important;
}

html body .app .tv-asana-mega-section > .mud-icon-root {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border-radius: 9px !important;
    font-size: .98rem !important;
}

html body .app .tv-asana-mega-section b {
    font-size: .78rem !important;
    line-height: 1.12 !important;
}

html body .app .tv-asana-mega-section small {
    font-size: .64rem !important;
    line-height: 1.1 !important;
}

html body .app .tv-asana-mega-grid section > a.tv-asana-tool-link:not(.tv-asana-mega-section) {
    min-height: 30px !important;
    gap: 6px !important;
    padding: 5px 6px !important;
    border-radius: 9px !important;
    font-size: .74rem !important;
    line-height: 1.1 !important;
}

html body .app .tv-asana-tool-link > .mud-icon-root {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 7px !important;
    font-size: .86rem !important;
}

/* Word Dash fullscreen must override the shared game shell rules so the
   canvas uses the whole viewport instead of retaining its page aspect ratio. */
html.tv-game-fullscreen-open,
html body.tv-game-fullscreen-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

html body .word-dash-shell:fullscreen,
html body .word-dash-shell:-webkit-full-screen,
html body .word-dash-shell.word-dash-pseudo-fullscreen,
html body .word-dash-shell.dv-game-pseudo-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(56, 189, 248, .18), transparent 34%),
        linear-gradient(180deg, #020617, #07162f 52%, #020617) !important;
}

html body .word-dash-shell:fullscreen .word-dash-toolbar,
html body .word-dash-shell:-webkit-full-screen .word-dash-toolbar,
html body .word-dash-shell.word-dash-pseudo-fullscreen .word-dash-toolbar,
html body .word-dash-shell.dv-game-pseudo-fullscreen .word-dash-toolbar,
html body .word-dash-shell:fullscreen .word-dash-hud,
html body .word-dash-shell:-webkit-full-screen .word-dash-hud,
html body .word-dash-shell.word-dash-pseudo-fullscreen .word-dash-hud,
html body .word-dash-shell.dv-game-pseudo-fullscreen .word-dash-hud,
html body .word-dash-shell:fullscreen .word-dash-mobile-controls,
html body .word-dash-shell:-webkit-full-screen .word-dash-mobile-controls,
html body .word-dash-shell.word-dash-pseudo-fullscreen .word-dash-mobile-controls,
html body .word-dash-shell.dv-game-pseudo-fullscreen .word-dash-mobile-controls,
html body .word-dash-shell:fullscreen .word-dash-result,
html body .word-dash-shell:-webkit-full-screen .word-dash-result,
html body .word-dash-shell.word-dash-pseudo-fullscreen .word-dash-result,
html body .word-dash-shell.dv-game-pseudo-fullscreen .word-dash-result {
    display: none !important;
}

html body .word-dash-shell:fullscreen .word-dash-canvas-wrap,
html body .word-dash-shell:-webkit-full-screen .word-dash-canvas-wrap,
html body .word-dash-shell.word-dash-pseudo-fullscreen .word-dash-canvas-wrap,
html body .word-dash-shell.dv-game-pseudo-fullscreen .word-dash-canvas-wrap {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}

html body .word-dash-shell:fullscreen .word-dash-canvas,
html body .word-dash-shell:-webkit-full-screen .word-dash-canvas,
html body .word-dash-shell.word-dash-pseudo-fullscreen .word-dash-canvas,
html body .word-dash-shell.dv-game-pseudo-fullscreen .word-dash-canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: fill !important;
    border-radius: 20px !important;
}

html body .word-dash-shell:fullscreen .word-dash-exit-fullscreen,
html body .word-dash-shell:-webkit-full-screen .word-dash-exit-fullscreen,
html body .word-dash-shell.word-dash-pseudo-fullscreen .word-dash-exit-fullscreen,
html body .word-dash-shell.dv-game-pseudo-fullscreen .word-dash-exit-fullscreen {
    display: inline-flex !important;
    position: fixed !important;
    top: max(16px, env(safe-area-inset-top)) !important;
    right: max(16px, env(safe-area-inset-right)) !important;
    z-index: 100000 !important;
}

/* =================================================================== */
/* ===  AURORA REDESIGN LAYER  ======================================= */
/* ===  A premium, iridescent visual pass layered on top of the    === */
/* ===  existing system. Pure presentation — colors, gradients,    === */
/* ===  glow, glass, typography and motion only. Loaded last so it === */
/* ===  wins the cascade.                                           === */
/* =================================================================== */

.app {
    --dv-aurora-1: #a855f7;   /* violet  */
    --dv-aurora-2: #6366f1;   /* indigo  */
    --dv-aurora-3: #3b82f6;   /* blue    */
    --dv-aurora-4: #22d3ee;   /* cyan    */
    --dv-aurora-5: #f472b6;   /* magenta */
    --dv-grad: linear-gradient(115deg, #a855f7 0%, #6366f1 28%, #3b82f6 52%, #22d3ee 78%, #a855f7 100%);
    --dv-grad-text: linear-gradient(108deg, #ffffff 0%, #d6c7ff 26%, #7dd3fc 55%, #c4b5fd 82%, #ffffff 100%);
    --dv-glow: 0 18px 50px rgba(99, 102, 241, .35), 0 6px 22px rgba(34, 211, 238, .22);
    --dv-glow-strong: 0 26px 70px rgba(124, 58, 237, .42), 0 10px 30px rgba(34, 211, 238, .30);
    --dv-ring: rgba(167, 139, 250, .55);
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    .app { scroll-behavior: auto; }
    .app *, .app *::before, .app *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ---- Premium typography ---- */
html body .app,
html body .app .dv-saas-home,
html body .app input,
html body .app textarea,
html body .app select,
html body .app button {
    font-family: var(--f) !important;
}
html body .app h1, html body .app h2, html body .app h3,
html body .app .dv-saas-hero h1,
html body .app .dv-saas-section-head h2,
html body .app .dv-saas-section h2,
html body .app .logo,
html body .app .tv-asana-brand,
html body .app .section-title h2,
html body .app .page-title-row h1 {
    font-family: var(--fd) !important;
    letter-spacing: -.03em;
}

/* ---- Animated aurora background field (dark themes) ---- */
.app.dark::after,
.dark .app::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(38vw 38vw at 12% -6%, rgba(168, 85, 247, .20), transparent 60%),
        radial-gradient(34vw 34vw at 88% 4%, rgba(34, 211, 238, .18), transparent 62%),
        radial-gradient(40vw 40vw at 70% 100%, rgba(99, 102, 241, .16), transparent 60%);
    background-size: 160% 160%;
    animation: dvAuroraDrift 26s ease-in-out infinite alternate;
    mix-blend-mode: screen;
}
.app.dark > * { position: relative; z-index: 1; }

@keyframes dvAuroraDrift {
    0%   { background-position: 0% 0%, 100% 0%, 60% 100%; }
    50%  { background-position: 30% 20%, 70% 16%, 40% 84%; }
    100% { background-position: 8% 6%, 96% 10%, 72% 96%; }
}

/* ---- HERO ---- */
html body .app .dv-saas-hero {
    border: 1px solid rgba(168, 139, 250, .26) !important;
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(168, 85, 247, .20), transparent 46%),
        radial-gradient(120% 120% at 100% 0%, rgba(34, 211, 238, .18), transparent 48%),
        linear-gradient(180deg, rgba(20, 16, 48, .94), rgba(8, 11, 30, .92)) !important;
    box-shadow:
        0 40px 120px rgba(8, 8, 30, .55),
        inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}
html body .app .dv-saas-hero::before {
    background: radial-gradient(circle, rgba(168, 85, 247, .34), transparent 64%) !important;
    animation: dvBlobFloat 18s ease-in-out infinite alternate;
}
html body .app .dv-saas-hero::after {
    content: "" !important;
    position: absolute !important;
    inset: auto -12% -28% auto !important;
    width: 44vw !important;
    height: 44vw !important;
    min-width: 380px !important;
    min-height: 380px !important;
    border-radius: 999px !important;
    background: radial-gradient(circle, rgba(34, 211, 238, .26), transparent 64%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    animation: dvBlobFloat 22s ease-in-out infinite alternate-reverse;
}
@keyframes dvBlobFloat {
    0%   { transform: translate3d(0,0,0) scale(1); }
    100% { transform: translate3d(4%, 5%, 0) scale(1.14); }
}

/* Gradient shimmer headline */
html body .app .dv-saas-hero h1 {
    background: var(--dv-grad-text) !important;
    background-size: 220% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: dvTextShimmer 9s linear infinite;
    text-shadow: 0 0 60px rgba(124, 58, 237, .25);
}
@keyframes dvTextShimmer {
    to { background-position: 220% center; }
}

html body .app .dv-saas-kicker {
    border: 1px solid rgba(196, 181, 253, .40) !important;
    background: linear-gradient(120deg, rgba(168, 85, 247, .22), rgba(34, 211, 238, .16)) !important;
    color: #ede9fe !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 8px 24px rgba(124, 58, 237, .22);
}
html body .app .dv-saas-kicker .mud-icon-root { color: #c4b5fd !important; }

html body .app .dv-saas-hero .dv-saas-vision {
    border: 1px solid rgba(196, 181, 253, .24) !important;
    background: linear-gradient(135deg, rgba(124, 58, 237, .14), rgba(2, 6, 23, .30)) !important;
    color: #e7e0ff !important;
}

/* ---- Primary / outlined buttons (hero + global) ---- */
.app.dark :where(.dv-saas-actions .mud-button-filled, .dv-saas-actions .mud-button-filled-primary, .mud-button-filled-primary, .mud-button-filled-secondary, .btn-p, .contact-send-btn, .tv-replica-primary, .hero-btn.primary, .run-button),
html body .app .dv-saas-actions .mud-button-root.mud-button-filled {
    background: var(--dv-grad) !important;
    background-size: 180% auto !important;
    border: 1px solid rgba(196, 181, 253, .50) !important;
    color: #ffffff !important;
    box-shadow: var(--dv-glow) !important;
    transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, background-position .5s ease !important;
}
.app.dark :where(.dv-saas-actions .mud-button-filled:hover, .mud-button-filled-primary:hover, .mud-button-filled-secondary:hover, .btn-p:hover, .contact-send-btn:hover, .tv-replica-primary:hover, .hero-btn.primary:hover, .run-button:hover),
html body .app .dv-saas-actions .mud-button-root.mud-button-filled:hover {
    transform: translateY(-2px) !important;
    background-position: right center !important;
    box-shadow: var(--dv-glow-strong) !important;
}
html body .app .dv-saas-actions .mud-button-outlined {
    border: 1px solid rgba(196, 181, 253, .40) !important;
    background: rgba(255, 255, 255, .04) !important;
    color: #ede9fe !important;
    backdrop-filter: blur(8px) !important;
    transition: transform .2s ease, border-color .2s ease, background .2s ease !important;
}
html body .app .dv-saas-actions .mud-button-outlined:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(196, 181, 253, .80) !important;
    background: rgba(168, 85, 247, .14) !important;
}

/* ---- Cards: glass + gradient hairline + glow/shimmer on hover ---- */
html body .app .dv-saas-section,
html body .app .dv-saas-card,
html body .app .dv-saas-category-card,
html body .app .dv-saas-tool-card,
html body .app .dv-saas-preview {
    position: relative !important;
    border: 1px solid rgba(148, 163, 255, .18) !important;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(168, 85, 247, .10), transparent 42%),
        linear-gradient(180deg, rgba(20, 18, 44, .82), rgba(9, 11, 28, .80)) !important;
    box-shadow: 0 22px 60px rgba(5, 6, 22, .40), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
    overflow: hidden !important;
}
html body .app .dv-saas-card::before,
html body .app .dv-saas-category-card::before,
html body .app .dv-saas-tool-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: 2px !important;
    background: var(--dv-grad) !important;
    opacity: .55 !important;
    transition: opacity .25s ease !important;
}
html body .app .dv-saas-card:hover,
html body .app .dv-saas-category-card:hover,
html body .app .dv-saas-tool-card:hover,
html body .app .dv-saas-card:focus-visible,
html body .app .dv-saas-category-card:focus-visible,
html body .app .dv-saas-tool-card:focus-visible {
    transform: translateY(-5px) !important;
    border-color: rgba(196, 181, 253, .55) !important;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(168, 85, 247, .20), transparent 44%),
        linear-gradient(180deg, rgba(31, 26, 66, .92), rgba(11, 13, 34, .88)) !important;
    box-shadow: 0 30px 80px rgba(76, 29, 149, .34), 0 10px 30px rgba(34, 211, 238, .18) !important;
}
html body .app .dv-saas-card:hover::before,
html body .app .dv-saas-category-card:hover::before,
html body .app .dv-saas-tool-card:hover::before { opacity: 1 !important; }

/* Card icon tiles glow */
html body .app .dv-saas-card svg,
html body .app .dv-saas-category-card svg,
html body .app .dv-saas-tool-card svg,
html body .app .dv-saas-steps svg { color: #c4b5fd !important; }

/* ---- Section nav pills ---- */
html body .app .dv-saas-section-nav {
    border: 1px solid rgba(168, 139, 250, .22) !important;
    background: linear-gradient(120deg, rgba(20, 16, 48, .90), rgba(8, 11, 30, .86)) !important;
    box-shadow: 0 16px 44px rgba(5, 6, 22, .42) !important;
}
html body .app .dv-saas-section-nav a:hover,
html body .app .dv-saas-section-nav a:focus-visible {
    background: linear-gradient(120deg, rgba(168, 85, 247, .26), rgba(34, 211, 238, .20)) !important;
    color: #ffffff !important;
}

/* ---- Search box ---- */
html body .app .dv-saas-search-box {
    border: 1px solid rgba(168, 139, 250, .28) !important;
    background: rgba(8, 9, 26, .42) !important;
}
html body .app .dv-saas-search-box:focus-within {
    border-color: rgba(196, 181, 253, .80) !important;
    box-shadow: 0 0 0 4px rgba(168, 85, 247, .18), 0 12px 36px rgba(124, 58, 237, .22) !important;
}
html body .app .dv-saas-search-box .mud-icon-root { color: #c4b5fd !important; }

/* ---- Top navigation bar: glass + glowing brand ---- */
.app.dark .tv-asana-topbar,
.dark .tv-asana-topbar,
.app.dark .tv-command-topbar {
    background: linear-gradient(180deg, rgba(14, 12, 34, .82), rgba(10, 11, 28, .72)) !important;
    border-bottom: 1px solid rgba(168, 139, 250, .20) !important;
    backdrop-filter: saturate(140%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(140%) blur(20px) !important;
}
.app.dark .tv-asana-brand > span:not(.tv-asana-brand-mark):not(.tv-brand-tooltip),
.dark .tv-asana-brand > span:not(.tv-asana-brand-mark):not(.tv-brand-tooltip) {
    background: var(--dv-grad-text) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 800 !important;
}
.app.dark .tv-asana-brand-mark,
.dark .tv-asana-brand-mark {
    box-shadow: 0 0 0 1px rgba(196, 181, 253, .35), 0 8px 24px rgba(124, 58, 237, .35) !important;
    border-radius: 12px !important;
}
.app.dark .tv-asana-menu > .tv-asana-menu-item > summary:hover,
.dark .tv-asana-menu > .tv-asana-menu-item > summary:hover { color: #c4b5fd !important; }
.app.dark .tv-sticky-theme-button:hover,
.app.dark .tv-asana-mobile-menu:hover,
.app.dark .tv-asana-action-link:hover {
    border-color: rgba(196, 181, 253, .60) !important;
    box-shadow: 0 8px 24px rgba(124, 58, 237, .26) !important;
}
.app.dark .tv-asana-mega,
.dark .tv-asana-mega {
    background: linear-gradient(180deg, rgba(17, 14, 40, .98), rgba(9, 11, 28, .98)) !important;
    border: 1px solid rgba(168, 139, 250, .22) !important;
    box-shadow: 0 40px 110px rgba(5, 6, 22, .60) !important;
}
.app.dark .tv-asana-tool-link:hover,
.dark .tv-asana-tool-link:hover { color: #c4b5fd !important; }

/* ---- Generic tool / content cards across the whole app ---- */
.app.dark :where(.tcard, .tcard-sm, .catcard, .dashboard-tile, .tool-head, .tool-panel, .calc-card, .webhook-card, .tv-replica-category-card, .tv-replica-tool-card) {
    background:
        radial-gradient(130% 150% at 0% 0%, rgba(168, 85, 247, .08), transparent 44%),
        linear-gradient(180deg, rgba(18, 16, 40, .78), rgba(10, 11, 28, .76)) !important;
    border: 1px solid rgba(148, 163, 255, .16) !important;
    box-shadow: 0 18px 48px rgba(5, 6, 22, .34) !important;
}
.app.dark :where(.tcard:hover, .tcard-sm:hover, .catcard:hover, .dashboard-tile:hover) {
    border-color: rgba(196, 181, 253, .50) !important;
    box-shadow: 0 26px 66px rgba(76, 29, 149, .30), 0 8px 24px rgba(34, 211, 238, .16) !important;
}
.app.dark .tcard-icon,
.dark .tcard-icon {
    background: linear-gradient(135deg, rgba(168, 85, 247, .28), rgba(34, 211, 238, .22)) !important;
    color: #e9d5ff !important;
    box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .22) !important;
}

/* ---- Section title accent underline ---- */
html body .app .dv-saas-section-head h2,
html body .app .dv-saas-section h2 {
    background: var(--dv-grad-text) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* ---- Footer polish ---- */
.app .footer {
    position: relative;
    border-top: 1px solid rgba(168, 139, 250, .20) !important;
    background: linear-gradient(180deg, rgba(12, 11, 30, .60), rgba(8, 9, 24, .85)) !important;
}
.app .footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--dv-grad);
    opacity: .6;
}
.app.dark .footer-cols a:hover,
.app.dark .footer-info-link:hover,
.app.dark .footer-actions a:hover { color: #c4b5fd !important; }
.app.dark .footer-logo-mark {
    box-shadow: 0 8px 24px rgba(124, 58, 237, .30) !important;
    border-radius: 12px !important;
}

/* ---- Inputs / focus rings ---- */
.app.dark :where(input, textarea, select):focus-visible {
    outline: none !important;
    border-color: rgba(196, 181, 253, .80) !important;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, .22) !important;
}
.app :where(a, button, .mud-button-root, .tcard, .catcard, .dv-saas-card, .dv-saas-category-card, .dv-saas-tool-card):focus-visible {
    outline: 2px solid var(--dv-ring) !important;
    outline-offset: 2px !important;
}

/* ---- Custom scrollbar & selection ---- */
.app.dark ::selection { background: rgba(168, 85, 247, .40); color: #fff; }
html { scrollbar-color: rgba(168,139,250,.5) transparent; scrollbar-width: thin; }
.app.dark *::-webkit-scrollbar { width: 12px; height: 12px; }
.app.dark *::-webkit-scrollbar-track { background: transparent; }
.app.dark *::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
    background-color: rgba(139, 92, 246, .45);
}
.app.dark *::-webkit-scrollbar-thumb:hover { background-color: rgba(168, 85, 247, .70); }

/* ---- Subtle section entrance ---- */
@media (prefers-reduced-motion: no-preference) {
    html body .app .dv-saas-section,
    html body .app .dv-saas-hero {
        animation: dvRise .7s cubic-bezier(.2,.7,.3,1) both;
    }
    @keyframes dvRise {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}
/* === END AURORA REDESIGN LAYER === */

/* =================================================================== */
/* ===  FULL-WIDTH + ADAPTIVE LAYOUT  ================================ */
/* ===  One central system: every page spans the full viewport     === */
/* ===  width with fluid, responsive gutters, and the shared        === */
/* ===  tool-page internals get a clean professional layout.        === */
/* =================================================================== */

.app {
    --dv-gutter: clamp(16px, 3.4vw, 64px);   /* fluid side padding   */
    --dv-flow: clamp(18px, 2.4vw, 34px);     /* vertical rhythm      */
    --dv-read: 74ch;                          /* comfy prose measure  */
}

/* Shell spans the whole width, content breathes with fluid gutters */
html body .app .main,
html body .app.tool-route .main,
html body .app .embed-main {
    max-width: none !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: clamp(16px, 2vw, 30px) var(--dv-gutter) clamp(44px, 5vw, 76px) !important;
}

/* Header + footer inner rails align with the full-width content */
html body .app .nav-inner,
html body .app .footer-inner {
    max-width: none !important;
    width: 100% !important;
    padding-left: var(--dv-gutter) !important;
    padding-right: var(--dv-gutter) !important;
}
html body .app .tv-asana-topbar {
    padding-left: clamp(14px, 2.4vw, 40px) !important;
    padding-right: clamp(14px, 2.4vw, 40px) !important;
}

/* Home + tool pages use the full canvas */
html body .app .dv-saas-home,
html body .app .studio-shell {
    max-width: none !important;
    width: 100% !important;
}
html body .app .tool-page {
    max-width: none !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: grid !important;
    gap: var(--dv-flow) !important;
}

/* Keep long-form prose readable even on ultrawide screens */
html body .app .tool-content-section p,
html body .app .tool-meta-grid p,
html body .app .tool-faq-list p,
html body .app .how-to p,
html body .app .legal-card p,
html body .app .blog-article p,
html body .app .info-page p {
    max-width: var(--dv-read);
}

/* ---- Breadcrumb ---- */
html body .app .breadcrumb {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 4px !important;
    font-size: .86rem !important;
    color: var(--tx2) !important;
}
html body .app .breadcrumb a { color: var(--tx2) !important; font-weight: 600; }
html body .app .breadcrumb a:hover { color: var(--ac) !important; text-decoration: none; }
html body .app .breadcrumb .self-page-link { margin-left: auto !important; }

/* ---- Tool header: balanced, professional ---- */
html body .app .tool-head-pro {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: clamp(18px, 2vw, 26px) !important;
    border-radius: 22px !important;
}
html body .app .tool-head-pro > div:nth-child(2) { flex: 1 1 auto; min-width: 0; }
html body .app .tool-head-pro h1 {
    margin: 0 0 6px !important;
    font-size: clamp(1.5rem, 2.6vw, 2.2rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -.02em !important;
}
html body .app .tool-head-pro > div:nth-child(2) > p {
    margin: 0 0 12px !important;
    color: var(--tx2) !important;
    font-size: 1.02rem !important;
    line-height: 1.55 !important;
    max-width: 70ch;
}
html body .app .tool-title-icon {
    flex: 0 0 auto !important;
    display: grid !important;
    place-items: center !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 16px !important;
}
html body .app .tool-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
html body .app .tool-badges .badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    font-size: .76rem !important;
    font-weight: 800 !important;
    border: 1px solid var(--bd) !important;
}
html body .app .tool-head-actions { flex: 0 0 auto; }

/* ---- Tool body wrapper ---- */
html body .app .tool-body {
    border-radius: 22px !important;
}

/* ---- Info dock: tidy chip bar ---- */
html body .app .tool-info-dock {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px clamp(12px, 1.6vw, 18px) !important;
    border: 1px solid var(--bd) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--bg2) 80%, transparent) !important;
}
html body .app .tool-info-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    border: 1px solid var(--bd) !important;
    font-weight: 700 !important;
    font-size: .84rem !important;
    cursor: pointer !important;
    transition: transform .15s ease, border-color .15s ease !important;
}
html body .app .tool-info-chip:hover { transform: translateY(-1px) !important; border-color: var(--ac) !important; }

/* ---- Content sections / examples / FAQ ---- */
html body .app .tool-content-section {
    border-radius: 22px !important;
    padding: clamp(18px, 2vw, 26px) !important;
}
html body .app .tool-content-section h2 {
    margin: 0 0 14px !important;
    font-size: clamp(1.15rem, 1.8vw, 1.5rem) !important;
    letter-spacing: -.02em !important;
}
html body .app .tool-meta-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
    gap: 14px !important;
}
html body .app .tool-meta-grid article { border-radius: 16px !important; }
html body .app .tool-faq-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)) !important;
    gap: 12px !important;
}

/* ---- Related tools as a responsive card row ---- */
html body .app .related-tool-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
    gap: 10px !important;
}
html body .app .related-tool-row a {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--bd) !important;
    border-radius: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: transform .15s ease, border-color .15s ease !important;
}
html body .app .related-tool-row a:hover { transform: translateY(-2px) !important; border-color: var(--ac) !important; }

/* ---- How-to ---- */
html body .app .how-to {
    border: 1px solid var(--bd) !important;
    border-radius: 22px !important;
    padding: clamp(18px, 2vw, 26px) !important;
    background: color-mix(in srgb, var(--bg2) 82%, transparent) !important;
}

/* ---- Responsive: collapse to a single clean column on small screens ---- */
@media (max-width: 760px) {
    html body .app .tool-head-pro { flex-wrap: wrap !important; }
    html body .app .tool-head-actions { order: -1; margin-left: auto; }
    html body .app .dv-saas-grid.four,
    html body .app .dv-saas-grid.three,
    html body .app .dv-saas-grid.mini { grid-template-columns: 1fr !important; }
    html body .app .dv-preview-grid,
    html body .app .dv-preview-footer { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
    html body .app .dv-preview-footer { grid-template-columns: 1fr !important; }
    html body .app .tool-title-icon { width: 46px !important; height: 46px !important; }
}
/* === END FULL-WIDTH + ADAPTIVE LAYOUT === */

/* =================================================================== */
/* ===  LIGHT THEME  ================================================= */
/* ===  A clean, professional light mode. Token-based components     === */
/* ===  inherit the :root light palette automatically; here we       === */
/* ===  override the surfaces that were hard-coded dark.             === */
/* =================================================================== */

.app.light {
    --bg: #f8faff;
    --bg2: #ffffff;
    --bg3: #f5f8ff;
    --bd: rgba(15, 23, 42, .10);
    --tx: #0f172a;
    --tx2: #51607a;
    --ac: #6d28d9;
    --ach: #5b21b6;
    --dv-grad-text-l: linear-gradient(102deg, #7c3aed 0%, #4f46e5 32%, #2563eb 58%, #0891b2 88%);
    --dv-card: linear-gradient(180deg, #ffffff, #fbfcff);
    --dv-line-l: rgba(15, 23, 42, .09);
    --dv-shadow-l: 0 14px 40px rgba(15, 23, 42, .08);
    --dv-shadow-l2: 0 24px 60px rgba(79, 70, 229, .14);
    color-scheme: light;
}

/* Page canvas — bright, near-white */
.app.light {
    background:
        radial-gradient(46vw 46vw at 8% -10%, rgba(124, 58, 237, .06), transparent 60%),
        radial-gradient(42vw 42vw at 98% -2%, rgba(8, 145, 178, .05), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fbfcff 45%, #f6f8ff 100%) !important;
}
.app.light::after { display: none !important; }

/* Homepage text default */
html body .app.light .dv-saas-home { color: #0f172a !important; }

/* ---- Hero / sections / cards / preview ---- */
html body .app.light .dv-saas-hero,
html body .app.light .dv-saas-section,
html body .app.light .dv-saas-card,
html body .app.light .dv-saas-category-card,
html body .app.light .dv-saas-tool-card,
html body .app.light .dv-saas-preview,
html body .app.light .dv-saas-section-nav {
    border: 1px solid var(--dv-line-l) !important;
    background: var(--dv-card) !important;
    color: #0f172a !important;
    box-shadow: var(--dv-shadow-l) !important;
}
html body .app.light .dv-saas-hero {
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(124, 58, 237, .08), transparent 46%),
        radial-gradient(120% 120% at 100% 0%, rgba(8, 145, 178, .08), transparent 48%),
        linear-gradient(180deg, #ffffff, #f6f8ff) !important;
    box-shadow: 0 30px 80px rgba(79, 70, 229, .10) !important;
}
html body .app.light .dv-saas-hero::before { background: radial-gradient(circle, rgba(124, 58, 237, .16), transparent 64%) !important; }
html body .app.light .dv-saas-hero::after { background: radial-gradient(circle, rgba(8, 145, 178, .14), transparent 64%) !important; }

/* Gradient headlines, readable on light */
html body .app.light .dv-saas-hero h1,
html body .app.light .dv-saas-section-head h2,
html body .app.light .dv-saas-section h2 {
    background: var(--dv-grad-text-l) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    text-shadow: none !important;
}

/* Body copy, supporting text */
html body .app.light .dv-saas-hero p,
html body .app.light .dv-saas-section-head p,
html body .app.light .dv-saas-section p,
html body .app.light .dv-saas-card span,
html body .app.light .dv-saas-category-card small,
html body .app.light .dv-saas-tool-card small,
html body .app.light .dv-preview-footer { color: #51607a !important; }

html body .app.light .dv-saas-card b,
html body .app.light .dv-saas-category-card b,
html body .app.light .dv-saas-tool-card b,
html body .app.light .dv-saas-steps b { color: #0f172a !important; }

/* Kicker / vision / chips */
html body .app.light .dv-saas-kicker {
    border: 1px solid rgba(124, 58, 237, .26) !important;
    background: linear-gradient(120deg, rgba(124, 58, 237, .10), rgba(8, 145, 178, .08)) !important;
    color: #4c1d95 !important;
    box-shadow: none !important;
}
html body .app.light .dv-saas-kicker .mud-icon-root { color: #7c3aed !important; }
html body .app.light .dv-saas-hero .dv-saas-vision {
    border: 1px solid rgba(15, 23, 42, .10) !important;
    background: #f6f8ff !important;
    color: #334155 !important;
}
html body .app.light .dv-saas-chip-row span {
    border: 1px solid rgba(15, 23, 42, .10) !important;
    background: #ffffff !important;
    color: #334155 !important;
}
html body .app.light .dv-saas-chip-row svg { color: #7c3aed !important; }

/* Cards hover + icons */
html body .app.light .dv-saas-card:hover,
html body .app.light .dv-saas-category-card:hover,
html body .app.light .dv-saas-tool-card:hover {
    border-color: rgba(124, 58, 237, .42) !important;
    background: linear-gradient(180deg, #ffffff, #f4f1ff) !important;
    box-shadow: var(--dv-shadow-l2) !important;
}
html body .app.light .dv-saas-card svg,
html body .app.light .dv-saas-category-card svg,
html body .app.light .dv-saas-tool-card svg,
html body .app.light .dv-saas-steps svg { color: #7c3aed !important; }

/* Section nav pills */
html body .app.light .dv-saas-section-nav { box-shadow: var(--dv-shadow-l) !important; }
html body .app.light .dv-saas-section-nav a { color: #334155 !important; }
html body .app.light .dv-saas-section-nav a:hover,
html body .app.light .dv-saas-section-nav a:focus-visible {
    background: linear-gradient(120deg, rgba(124, 58, 237, .12), rgba(8, 145, 178, .10)) !important;
    color: #4c1d95 !important;
}

/* Search box */
html body .app.light .dv-saas-search-box {
    border: 1px solid rgba(15, 23, 42, .12) !important;
    background: #ffffff !important;
}
html body .app.light .dv-saas-search-box input { color: #0f172a !important; }
html body .app.light .dv-saas-search-box input::placeholder { color: #94a3b8 !important; }
html body .app.light .dv-saas-search-box:focus-within {
    border-color: rgba(124, 58, 237, .55) !important;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, .12) !important;
}
html body .app.light .dv-saas-search-box .mud-icon-root { color: #7c3aed !important; }

/* Preview tiles */
html body .app.light .dv-preview-grid a,
html body .app.light .dv-preview-footer span {
    border: 1px solid rgba(15, 23, 42, .10) !important;
    background: #f7f9ff !important;
    color: #0f172a !important;
}
html body .app.light .dv-preview-grid svg { color: #7c3aed !important; }
html body .app.light .dv-preview-head span,
html body .app.light .dv-preview-head a,
html body .app.light .dv-saas-inline-link { color: #6d28d9 !important; }

/* Outlined hero buttons (override dark glass) */
html body .app.light .dv-saas-actions .mud-button-outlined {
    border: 1px solid rgba(124, 58, 237, .35) !important;
    background: #ffffff !important;
    color: #4c1d95 !important;
}
html body .app.light .dv-saas-actions .mud-button-outlined:hover {
    border-color: rgba(124, 58, 237, .60) !important;
    background: rgba(124, 58, 237, .07) !important;
}

/* Primary CTAs keep the vivid gradient (great on white) */
html body .app.light :where(.mud-button-filled-primary, .mud-button-filled-secondary, .btn-p, .contact-send-btn, .tv-replica-primary, .hero-btn.primary, .run-button),
html body .app.light .dv-saas-actions .mud-button-root.mud-button-filled {
    background: var(--dv-grad) !important;
    border: 1px solid rgba(124, 58, 237, .30) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 34px rgba(79, 70, 229, .26) !important;
}

/* ---- Top navigation: light glass ---- */
.app.light .tv-asana-topbar,
.app.light .tv-command-topbar {
    background: rgba(255, 255, 255, .82) !important;
    border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
    backdrop-filter: saturate(140%) blur(18px) !important;
    -webkit-backdrop-filter: saturate(140%) blur(18px) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .04) !important;
}
.app.light .tv-asana-brand > span:not(.tv-asana-brand-mark):not(.tv-brand-tooltip) {
    background: var(--dv-grad-text-l) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 800 !important;
}
.app.light .tv-asana-menu > .tv-asana-menu-item > summary { color: #312e81 !important; }
.app.light .tv-asana-menu > .tv-asana-menu-item > summary > span { color: #312e81 !important; }
.app.light .tv-asana-menu > .tv-asana-menu-item > summary:hover,
.app.light .tv-asana-menu > .tv-asana-menu-item > summary:hover > span { color: #6d28d9 !important; }
.app.light .tv-asana-action-link,
.app.light .tv-sticky-theme-button,
.app.light .tv-asana-mobile-menu {
    color: #334155 !important;
}
.app.light .tv-asana-action-link:hover,
.app.light .tv-sticky-theme-button:hover,
.app.light .tv-asana-mobile-menu:hover {
    border-color: rgba(124, 58, 237, .45) !important;
    color: #6d28d9 !important;
}
.app.light .tv-asana-mega {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, .10) !important;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .16) !important;
}
.app.light .tv-asana-mega-intro,
.app.light .tv-asana-mega-section,
.app.light .tv-asana-tool-link { color: #334155 !important; }
.app.light .tv-asana-tool-link:hover { color: #6d28d9 !important; }
.app.light .tv-asana-brand-mark {
    box-shadow: 0 0 0 1px rgba(124, 58, 237, .18), 0 8px 22px rgba(124, 58, 237, .18) !important;
    border-radius: 12px !important;
}

/* ---- Footer: light ---- */
.app.light .footer {
    border-top: 1px solid rgba(15, 23, 42, .10) !important;
    background: linear-gradient(180deg, #ffffff, #f4f7fd) !important;
}
.app.light .footer-cols a,
.app.light .footer-info-link,
.app.light .footer-actions a { color: #51607a !important; }
.app.light .footer-cols a:hover,
.app.light .footer-info-link:hover,
.app.light .footer-actions a:hover { color: #6d28d9 !important; }
.app.light .footer-brand,
.app.light .footer-head { color: #0f172a !important; }

/* ---- Tool head icon tile (light) ---- */
.app.light .tool-title-icon,
.app.light .tcard-icon {
    background: linear-gradient(135deg, rgba(124, 58, 237, .14), rgba(8, 145, 178, .12)) !important;
    color: #6d28d9 !important;
    box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .14) !important;
}

/* Section title gradient text also for generic section titles in light */
.app.light .section-title h2,
.app.light .page-title-row h1 { color: #0f172a !important; }

/* Light scrollbar */
.app.light *::-webkit-scrollbar { width: 12px; height: 12px; }
.app.light *::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
    background-color: rgba(124, 58, 237, .30);
}
.app.light *::-webkit-scrollbar-thumb:hover { background-color: rgba(124, 58, 237, .55); }
.app.light ::selection { background: rgba(124, 58, 237, .22); color: #1e1b4b; }
/* === END LIGHT THEME === */

/* =================================================================== */
/* ===  HOME SEO SECTIONS  =========================================== */
/* ===  Prose block + FAQ accordion + headline sizing for the new   === */
/* ===  SEO content on the homepage. Centralized; both themes.       === */
/* =================================================================== */

/* Right-size the longer SEO headline (kept small site-wide) */
html body .app .dv-saas-hero h1 {
    max-width: 26ch !important;
    font-size: clamp(1.6rem, 2.8vw, 2.3rem) !important;
    line-height: 1.16 !important;
}
@media (max-width: 640px) {
    html body .app .dv-saas-hero h1 { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
}

/* ---- SEO prose ---- */
html body .app .dv-saas-prose {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)) !important;
    gap: 16px 28px !important;
    max-width: none !important;
    width: 100% !important;
}
html body .app .dv-saas-prose p {
    margin: 0 !important;
    font-size: 1.06rem !important;
    line-height: 1.75 !important;
    color: var(--tx2) !important;
}
html body .app.dark .dv-saas-prose p { color: #c6d1e6 !important; }
html body .app.light .dv-saas-prose p { color: #475569 !important; }
html body .app .dv-saas-prose strong { color: var(--tx) !important; font-weight: 800 !important; }
html body .app.dark .dv-saas-prose strong { color: #f3f8ff !important; }
html body .app.light .dv-saas-prose strong { color: #0f172a !important; }
html body .app .dv-saas-prose a {
    font-weight: 700 !important;
    text-decoration: none !important;
    background: linear-gradient(var(--ac), var(--ac)) left 100% / 100% 1.5px no-repeat;
    padding-bottom: 1px;
}
html body .app.dark .dv-saas-prose a { color: #c4b5fd !important; }
html body .app.light .dv-saas-prose a { color: #6d28d9 !important; }
html body .app .dv-saas-prose a:hover { opacity: .85; }

/* ---- FAQ accordion ---- */
html body .app .dv-faq-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)) !important;
    gap: 12px 18px !important;
    align-items: start !important;
    max-width: none !important;
    width: 100% !important;
}
html body .app .dv-faq-item {
    border: 1px solid var(--bd) !important;
    border-radius: 16px !important;
    background: color-mix(in srgb, var(--bg2) 82%, transparent) !important;
    overflow: hidden !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
}
html body .app.dark .dv-faq-item {
    background: linear-gradient(180deg, rgba(20, 18, 44, .72), rgba(10, 11, 28, .70)) !important;
    border-color: rgba(148, 163, 255, .16) !important;
}
html body .app.light .dv-faq-item {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, .10) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05) !important;
}
html body .app .dv-faq-item[open] {
    border-color: var(--ac) !important;
}
html body .app.dark .dv-faq-item[open] { border-color: rgba(196, 181, 253, .5) !important; box-shadow: 0 16px 40px rgba(76, 29, 149, .22) !important; }
html body .app.light .dv-faq-item[open] { border-color: rgba(124, 58, 237, .4) !important; box-shadow: 0 16px 40px rgba(79, 70, 229, .12) !important; }
html body .app .dv-faq-item summary {
    list-style: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 18px 20px !important;
    font-weight: 800 !important;
    font-size: 1.04rem !important;
    color: var(--tx) !important;
    user-select: none !important;
}
html body .app.dark .dv-faq-item summary { color: #f3f8ff !important; }
html body .app.light .dv-faq-item summary { color: #0f172a !important; }
html body .app .dv-faq-item summary::-webkit-details-marker { display: none !important; }
html body .app .dv-faq-item summary::after {
    content: "+" !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
    display: grid !important;
    place-items: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 999px !important;
    font-size: 1.3rem !important;
    line-height: 1 !important;
    background: linear-gradient(135deg, rgba(168, 85, 247, .22), rgba(34, 211, 238, .18)) !important;
    color: var(--ac) !important;
    transition: transform .25s ease !important;
}
html body .app.light .dv-faq-item summary::after {
    background: linear-gradient(135deg, rgba(124, 58, 237, .14), rgba(8, 145, 178, .12)) !important;
    color: #6d28d9 !important;
}
html body .app .dv-faq-item[open] summary::after { content: "\2212" !important; transform: rotate(180deg) !important; }
html body .app .dv-faq-item p {
    margin: 0 !important;
    padding: 0 20px 20px !important;
    max-width: 80ch !important;
    line-height: 1.7 !important;
    color: var(--tx2) !important;
}
html body .app.dark .dv-faq-item p { color: #c6d1e6 !important; }
html body .app.light .dv-faq-item p { color: #475569 !important; }
html body .app .dv-faq-item a { font-weight: 700 !important; }
html body .app.dark .dv-faq-item a { color: #c4b5fd !important; }
html body .app.light .dv-faq-item a { color: #6d28d9 !important; }

/* Final CTA stays centered and punchy at full width */
html body .app .dv-saas-final-cta {
    text-align: center !important;
    justify-items: center !important;
}
html body .app .dv-saas-final-cta .dv-saas-actions { justify-content: center !important; }
/* === END HOME SEO SECTIONS === */

/* =================================================================== */
/* ===  LIGHT THEME — base-canvas fix  =============================== */
/* ===  Make the document + MudBlazor shells follow the light theme  === */
/* ===  so no dark backdrop bleeds behind the content.              === */
/* =================================================================== */
html:has(.app.light),
body:has(.app.light),
html.light,
body.light {
    background: #ffffff !important;
    color-scheme: light !important;
}
/* The light app owns the page canvas; inner shells stay transparent so the
   light wash shows through every gap (defends against any stale dark fills). */
html body .app.light {
    background:
        radial-gradient(46vw 46vw at 8% -10%, rgba(124, 58, 237, .06), transparent 60%),
        radial-gradient(42vw 42vw at 98% -2%, rgba(8, 145, 178, .05), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fbfcff 45%, #f6f8ff 100%) !important;
    min-height: 100vh !important;
}
html body .app.light .main,
html body .app.light .studio-shell,
html body .app.light .dv-saas-home,
html body .app.light .tv-command-home,
.app.light .mud-layout,
.app.light .mud-main-content,
.app.light .tv-app-main-content,
.app.light .mud-drawer-content {
    background: transparent !important;
}
.app.light .mud-appbar,
.app.light .mud-drawer {
    background: #ffffff !important;
    color: #0f172a !important;
}
/* === END LIGHT THEME — base-canvas fix === */

/* =================================================================== */
/* ===  DEVELOPER UTILITY MARKETPLACE  =============================== */
/* ===  Full-width browsable catalog of every tool + keyword cloud.  === */
/* ===  Centralized; adapts to dark and light themes.               === */
/* =================================================================== */

/* The catalog is an open, full-width directory — not a single boxed card */
html body .app .dv-saas-section.dv-market {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: clamp(28px, 3vw, 44px) !important;
}
html body .app .dv-saas-section.dv-market .dv-saas-section-head { max-width: none !important; }

/* Category block */
html body .app .dv-market-cat {
    display: grid !important;
    gap: 16px !important;
    scroll-margin-top: 140px !important;
}
html body .app .dv-market-cat-head {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--bd) !important;
}
html body .app .dv-market-cat-icon {
    flex: 0 0 auto !important;
    display: grid !important;
    place-items: center !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(168, 85, 247, .26), rgba(34, 211, 238, .20)) !important;
    color: #e9d5ff !important;
}
.app.light .dv-market-cat-icon {
    background: linear-gradient(135deg, rgba(124, 58, 237, .14), rgba(8, 145, 178, .12)) !important;
    color: #6d28d9 !important;
}
html body .app .dv-market-cat-meta { flex: 1 1 auto; min-width: 0; }
html body .app .dv-market-cat-meta h3 {
    margin: 0 !important;
    font-size: clamp(1.15rem, 1.8vw, 1.55rem) !important;
    letter-spacing: -.02em !important;
    color: var(--tx) !important;
}
.app.dark .dv-market-cat-meta h3 { color: #f3f8ff !important; }
.app.light .dv-market-cat-meta h3 { color: #0f172a !important; }
html body .app .dv-market-cat-meta p {
    margin: 2px 0 0 !important;
    font-size: .92rem !important;
    color: var(--tx2) !important;
    max-width: 80ch !important;
}
html body .app .dv-market-cat-link {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    border: 1px solid var(--bd) !important;
    font-weight: 800 !important;
    font-size: .84rem !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: border-color .15s ease, background .15s ease, transform .15s ease !important;
}
.app.dark .dv-market-cat-link { color: #c4b5fd !important; background: rgba(255,255,255,.03) !important; }
.app.light .dv-market-cat-link { color: #6d28d9 !important; background: #ffffff !important; }
html body .app .dv-market-cat-link:hover { transform: translateY(-1px) !important; border-color: var(--ac) !important; }

/* Tool grid — full width, fluid columns */
html body .app .dv-market-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)) !important;
    gap: 12px !important;
}
html body .app .dv-market-tool {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    padding: 14px 14px !important;
    border: 1px solid var(--bd) !important;
    border-radius: 16px !important;
    text-decoration: none !important;
    overflow: hidden !important;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}
.app.dark .dv-market-tool {
    background: linear-gradient(180deg, rgba(20, 18, 44, .74), rgba(10, 11, 28, .72)) !important;
    box-shadow: 0 10px 28px rgba(5, 6, 22, .28) !important;
}
.app.light .dv-market-tool {
    background: #ffffff !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05) !important;
}
html body .app .dv-market-tool::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 3px !important;
    background: var(--dv-grad) !important;
    opacity: 0 !important;
    transition: opacity .16s ease !important;
}
html body .app .dv-market-tool:hover {
    transform: translateY(-3px) !important;
    border-color: var(--ac) !important;
}
.app.dark .dv-market-tool:hover { box-shadow: 0 20px 48px rgba(76, 29, 149, .30) !important; background: linear-gradient(180deg, rgba(31, 26, 66, .9), rgba(11, 13, 34, .86)) !important; }
.app.light .dv-market-tool:hover { box-shadow: 0 18px 40px rgba(79, 70, 229, .12) !important; background: #fbfaff !important; }
html body .app .dv-market-tool:hover::before { opacity: 1 !important; }
html body .app .dv-market-tool-icon {
    flex: 0 0 auto !important;
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 11px !important;
    background: color-mix(in srgb, var(--ac) 14%, transparent) !important;
    color: var(--ac) !important;
}
.app.dark .dv-market-tool-icon { color: #c4b5fd !important; }
.app.light .dv-market-tool-icon { color: #6d28d9 !important; }
html body .app .dv-market-tool-text { display: grid !important; gap: 2px !important; min-width: 0 !important; flex: 1 1 auto; }
html body .app .dv-market-tool-text b {
    font-size: .96rem !important;
    font-weight: 800 !important;
    color: var(--tx) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.app.dark .dv-market-tool-text b { color: #f3f8ff !important; }
.app.light .dv-market-tool-text b { color: #0f172a !important; }
html body .app .dv-market-tool-text small {
    font-size: .8rem !important;
    line-height: 1.4 !important;
    color: var(--tx2) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
html body .app .dv-market-tool-go { flex: 0 0 auto !important; opacity: .4 !important; transition: transform .16s ease, opacity .16s ease !important; }
html body .app .dv-market-tool:hover .dv-market-tool-go { opacity: 1 !important; transform: translateX(2px) !important; color: var(--ac) !important; }

/* ---- Keyword cloud (SEO + discovery) ---- */
html body .app .dv-keyword-cloud {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
html body .app .dv-keyword-cloud a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 9px 15px !important;
    border-radius: 999px !important;
    border: 1px solid var(--bd) !important;
    font-weight: 700 !important;
    font-size: .9rem !important;
    text-decoration: none !important;
    transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease !important;
}
.app.dark .dv-keyword-cloud a { background: rgba(255,255,255,.03) !important; color: #d6c7ea !important; }
.app.light .dv-keyword-cloud a { background: #ffffff !important; color: #475569 !important; }
html body .app .dv-keyword-cloud a:hover {
    transform: translateY(-2px) !important;
    border-color: var(--ac) !important;
}
.app.dark .dv-keyword-cloud a:hover { background: linear-gradient(120deg, rgba(168,85,247,.20), rgba(34,211,238,.16)) !important; color: #ffffff !important; }
.app.light .dv-keyword-cloud a:hover { background: linear-gradient(120deg, rgba(124,58,237,.10), rgba(8,145,178,.08)) !important; color: #4c1d95 !important; }

@media (max-width: 560px) {
    html body .app .dv-market-cat-head { flex-wrap: wrap !important; }
    html body .app .dv-market-cat-link { order: 3 !important; }
    html body .app .dv-market-grid { grid-template-columns: 1fr !important; }
}
/* === END DEVELOPER UTILITY MARKETPLACE === */

/* =================================================================== */
/* ===  LIGHT THEME — internal / tool pages  ======================== */
/* ===  The app was originally dark-only, so tool pages, category    === */
/* ===  pages and MudBlazor surfaces carry hard-coded dark fills.    === */
/* ===  These overrides make every internal route fully light.       === */
/* =================================================================== */

/* Centralized: flip the shared dashboard variables to light values. Every
   ".app ... { color: var(--dv-app-text) }" / panel-gradient rule follows. */
.app.light {
    --dv-app-bg: #f8faff;
    --dv-app-bg-2: #ffffff;
    --dv-app-surface: #ffffff;
    --dv-app-surface-2: #f6f8ff;
    --dv-app-card: #ffffff;
    --dv-app-border: rgba(15, 23, 42, .10);
    --dv-app-text: #0f172a;
    --dv-app-muted: #51607a;
    --dv-app-soft: #475569;
    --dv-app-panel-gradient: linear-gradient(180deg, #ffffff, #fbfcff);
    --dv-app-shadow-soft: 0 12px 32px rgba(15, 23, 42, .06);
    --dv-blue-muted: #51607a;
    --dv-blue-primary: #6d28d9;
}

/* Neutralise dark decorative page fills so the light canvas shows */
.app.light :where(
    .tool-page, .focused-tool-page, .tool-route .main, .inner-route .main,
    .tv-app-main-content, .studio-shell, .library-market, .category-market,
    .single-library, .mud-tool-library, .blog-page, .legal-page
) {
    background: transparent !important;
}

/* Card-like surfaces become clean white panels */
.app.light :where(
    .tool-head, .tool-head-pro, .tool-body, .tool-panel, .tool-content-section,
    .how-to, .calc-card, .tcard, .tcard-sm, .catcard, .dashboard-tile, .webhook-card,
    .empty-panel, .tool-info-dock, .validator-hero, .network-hero, .clock-tool,
    .category-market-hero, .category-search-card, .category-step-strip article,
    .mud-tool-command, .single-library-command, .legal-card, .legal-panel, .blog-card,
    .mud-paper:not(.mud-popover-paper):not(.mud-menu-popover),
    .mud-card, .mud-expansion-panels, .mud-expand-panel
) {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, .10) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06) !important;
    color: #0f172a !important;
}

/* Inner chips / sub-cards a touch softer than pure white */
.app.light :where(
    .tool-meta-grid article, .tool-faq-list article, .related-tool-row a,
    .tool-info-chip, .badge, .tool-info-strip, .dv-preview-grid a
) {
    background: #f6f8ff !important;
    border-color: rgba(15, 23, 42, .10) !important;
    color: #0f172a !important;
}

/* Headings + body text on internal pages */
.app.light :where(
    .tool-head h1, .tool-content-section h2, .tool-content-section h3,
    .tool-meta-grid h2, .tool-meta-grid h3, .how-to h2, .category-market-hero h1,
    .tool-faq-list h3, .badge, .tool-info-chip
) { color: #0f172a !important; }
.app.light :where(
    .tool-head p, .tool-content-section p, .tool-meta-grid p, .tool-faq-list p,
    .how-to p, .how-to li, .breadcrumb, .breadcrumb a, .category-market-hero p,
    .muted, .tool-meta-grid li
) { color: #51607a !important; }

/* Tool head icon tile + accent */
.app.light :where(.tool-title-icon) {
    background: linear-gradient(135deg, rgba(124, 58, 237, .14), rgba(8, 145, 178, .12)) !important;
    color: #6d28d9 !important;
}

/* Form controls: light fields with readable text (MudBlazor + native) */
.app.light :where(
    input, textarea, select,
    .mud-input-slot, .mud-input-root, .mud-input-control,
    .mud-select-input, .mud-input-outlined-border
) { color: #0f172a !important; }
.app.light :where(textarea, input[type="text"], input[type="search"], input[type="number"], input[type="url"], input[type="email"]) {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, .14) !important;
}
.app.light :where(input::placeholder, textarea::placeholder) { color: #94a3b8 !important; }
.app.light :where(.mud-input-outlined .mud-input-outlined-border) { border-color: rgba(15, 23, 42, .18) !important; }
.app.light :where(.mud-input-label, .mud-input-helper-text, label) { color: #51607a !important; }

/* MudBlazor popovers / menus / dialogs stay light too */
.app.light :where(.mud-popover, .mud-popover-paper, .mud-menu-popover, .mud-list, .mud-dialog) {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, .10) !important;
}
.app.light :where(.mud-list-item, .mud-nav-link) { color: #0f172a !important; }

/* Hover lift on internal cards keeps the accent */
.app.light :where(.tcard:hover, .catcard:hover, .related-tool-row a:hover, .tool-info-chip:hover) {
    border-color: rgba(124, 58, 237, .42) !important;
}

/* ---- Tool ROUTE light overrides (beat the hard-coded dark .app.tool-route block) ---- */
.app.light.tool-route {
    background:
        radial-gradient(circle at 15% 0, rgba(124, 58, 237, .06), transparent 34vw),
        radial-gradient(circle at 84% 8%, rgba(8, 145, 178, .05), transparent 28vw),
        linear-gradient(180deg, #ffffff 0%, #fbfcff 55%, #f6f8ff 100%) !important;
}
.app.light.tool-route .main,
.app.light.tool-route .mud-main-content,
.app.light.tool-route .tool-page,
.app.light.tool-route .focused-tool-page {
    background: transparent !important;
    color: #0f172a !important;
}
.app.light.tool-route .tool-head,
.app.light.tool-route .tool-head-pro,
.app.light.tool-route .tool-body,
.app.light.tool-route .tool-info-dock,
.app.light.tool-route .tool-content-section,
.app.light.tool-route .tool-example-section,
.app.light.tool-route .tool-meta-grid article,
.app.light.tool-route .tool-faq-list article,
.app.light.tool-route .related-tool-row a,
.app.light.tool-route .how-to {
    border: 1px solid rgba(15, 23, 42, .10) !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06) !important;
}
.app.light.tool-route .tool-head::before {
    background:
        radial-gradient(circle at 20% 0, rgba(124, 58, 237, .08), transparent 34%),
        radial-gradient(circle at 86% 14%, rgba(8, 145, 178, .07), transparent 28%) !important;
}
.app.light.tool-route .tool-info-chip,
.app.light.tool-route .tool-badges span,
.app.light.tool-route .badge,
.app.light.tool-route .tool-status-badge {
    border: 1px solid rgba(15, 23, 42, .12) !important;
    background: #f6f8ff !important;
    color: #334155 !important;
    box-shadow: none !important;
}
.app.light.tool-route .tool-info-chip-primary,
.app.light.tool-route .tool-title-icon {
    background: linear-gradient(135deg, rgba(124, 58, 237, .16), rgba(8, 145, 178, .14)) !important;
    color: #6d28d9 !important;
}
.app.light.tool-route .tool-head h1,
.app.light.tool-route .tool-content-section h2,
.app.light.tool-route .tool-content-section h3,
.app.light.tool-route .tool-example-section h2,
.app.light.tool-route .tool-meta-grid h2,
.app.light.tool-route .tool-meta-grid h3,
.app.light.tool-route .tool-faq-list h2,
.app.light.tool-route .tool-faq-list h3 {
    color: #0f172a !important;
}
.app.light.tool-route .tool-head p,
.app.light.tool-route .tool-content-section p,
.app.light.tool-route .tool-example-section p,
.app.light.tool-route .tool-meta-grid p,
.app.light.tool-route .tool-meta-grid li,
.app.light.tool-route .tool-faq-list p,
.app.light.tool-route .related-tool-row small,
.app.light.tool-route .breadcrumb,
.app.light.tool-route .breadcrumb a {
    color: #51607a !important;
}
.app.light.tool-route .global-tool-close,
.app.light.tool-route .tool-action-btn,
.app.light.tool-route .tool-head-actions .mud-button-root {
    border: 1px solid rgba(15, 23, 42, .12) !important;
    background: #ffffff !important;
    color: #334155 !important;
}
.app.light.tool-route .global-tool-close:hover,
.app.light.tool-route .tool-action-btn:hover,
.app.light.tool-route .tool-head-actions .mud-button-root:hover {
    border-color: rgba(124, 58, 237, .42) !important;
    background: rgba(124, 58, 237, .07) !important;
}
/* Tool body form controls in light */
.app.light.tool-route input,
.app.light.tool-route textarea,
.app.light.tool-route select,
.app.light.tool-route .mud-input-slot {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, .14) !important;
}
.app.light.tool-route input::placeholder,
.app.light.tool-route textarea::placeholder { color: #94a3b8 !important; }
.app.light.tool-route label,
.app.light.tool-route .universal-input-label label,
.app.light.tool-route .universal-field-help { color: #334155 !important; }

/* Form controls everywhere in light mode (beats the .app input:not()():not() chain) */
.app.light input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.app.light textarea,
.app.light select,
.app.light .mud-input-root,
.app.light .mud-input-slot,
.app.light .mud-input-outlined,
.app.light .mud-input-control,
.app.light .mud-select,
.app.light .mud-input,
.app.light .ta {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, .14) !important;
    color: #0f172a !important;
    caret-color: #6d28d9 !important;
}
.app.light pre,
.app.light code {
    background: #f4f6fc !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, .10) !important;
}

/* Secondary / outlined buttons in light (dark rule was .app :where(...) = very low specificity) */
.app.light .btn-s,
.app.light .btn,
.app.light .copybtn,
.app.light .mud-button-outlined,
.app.light .mud-button-text {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, .14) !important;
    color: #334155 !important;
}
.app.light .btn-s:hover,
.app.light .btn:hover,
.app.light .copybtn:hover,
.app.light .mud-button-outlined:hover,
.app.light .mud-button-text:hover {
    border-color: rgba(124, 58, 237, .42) !important;
    background: rgba(124, 58, 237, .06) !important;
    color: #4c1d95 !important;
}

/* MudPaper panels in light (beats .app .mud-paper:not()():not() = (0,5,0)) */
.app.light .mud-paper:not(.mud-popover):not(.mud-dialog):not(.mud-picker-paper) {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, .10) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06) !important;
    backdrop-filter: none !important;
}

/* Category page hero + workflow showcase text in light */
.app.light .category-market-hero h1,
.app.light .library-hero h1,
.app.light .studio-hero-copy h1 { color: #0f172a !important; }
.app.light .category-market-hero p,
.app.light .library-hero p,
.app.light .studio-hero-copy p { color: #51607a !important; }
.app.light .tool-workflow-head .mud-typography-h5,
.app.light .tool-workflow-title b,
.app.light .tool-workflow-card b { color: #0f172a !important; }
.app.light .tool-workflow-head .mud-typography-body2,
.app.light .tool-workflow-title small,
.app.light .tool-workflow-card small { color: #51607a !important; }
.app.light .tool-workflow-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, .10) !important;
}
.app.light .tool-workflow-chip {
    background: #f4f6fc !important;
    border: 1px solid rgba(124, 58, 237, .18) !important;
    color: #4c1d95 !important;
}
.app.light .category-search-card,
.app.light .readable-category-grid .tcard { background: #ffffff !important; }

/* Inner-route HEROES in light (beats html body .app :where(...) = (0,1,2)) */
html body .app.light :where(
    .category-market-hero,
    .readable-category-hero,
    .library-hero,
    .compact-library-hero,
    .blog-hero,
    .blog-article-hero,
    .legal-hero,
    .info-hero,
    .seo-landing-hero,
    .tv-bookmarks-hero
) {
    background:
        radial-gradient(circle at 12% 0%, rgba(124, 58, 237, .08), transparent 34%),
        radial-gradient(circle at 88% 6%, rgba(8, 145, 178, .07), transparent 30%),
        linear-gradient(180deg, #ffffff, #f5f7ff) !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, .10) !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .07) !important;
}
html body .app.light :where(
    .category-market-hero, .readable-category-hero, .library-hero, .compact-library-hero,
    .blog-hero, .blog-article-hero, .legal-hero, .info-hero, .seo-landing-hero, .tv-bookmarks-hero
) :where(h1, h2, .blog-kicker, .studio-kicker) { color: #0f172a !important; }
html body .app.light :where(
    .category-market-hero, .readable-category-hero, .library-hero, .compact-library-hero,
    .blog-hero, .blog-article-hero, .legal-hero, .info-hero, .seo-landing-hero, .tv-bookmarks-hero
) :where(p, small, .legal-meta, .blog-meta) { color: #51607a !important; }

/* Blog / legal / info page bodies stay on the light canvas */
html body .app.light :where(.blog-page, .legal-page, .blog-article-page, .seo-landing-page) {
    background: transparent !important;
    color: #0f172a !important;
}

/* Mobile navigation drawer + nav menu in light */
html body .app.light .mud-drawer,
html body .app.light .mud-drawer .mud-drawer-content,
html body .app.light .mud-drawer .mud-navmenu,
html body .app.light .mud-drawer .mud-nav-group,
html body .app.light .mud-drawer .mud-list {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, .10) !important;
}
html body .app.light .mud-drawer .mud-nav-link,
html body .app.light .mud-drawer .mud-nav-link-text,
html body .app.light .mud-drawer .mud-nav-group .mud-nav-link-title {
    color: #334155 !important;
}
html body .app.light .mud-drawer .mud-nav-link.active,
html body .app.light .mud-drawer .mud-nav-link:hover {
    background: rgba(124, 58, 237, .08) !important;
    color: #4c1d95 !important;
}
html body .app.light .mud-drawer .mud-icon-root { color: #6d28d9 !important; }

/* Master panel/card light surface — mirrors the dark repair-layer group so
   every blog, legal, info, category, bookmark, security, studio, PDF and tool
   panel becomes a clean white card in light mode. */
.app.light :where(
    .tool-panel, .calc-card, .panel-card, .webhook-card, .pdf-panel, .pdf-workspace,
    .legal-card, .legal-panel, .info-card, .auth-card, .blog-card, .blog-featured,
    .blog-listing, .blog-article-content, .blog-toc, .category-readable-card,
    .category-insight-card, .category-faq-panel, .tv-bookmarks-panel,
    .tv-bookmark-manager-card, .tv-bookmark-search-card, .empty-panel, .empty-state,
    .result, .security-card, .crypto-card, .studio-section, .studio-quick-panel,
    .library-group, .tv-category-room, .tv-replica-category-card, .tv-replica-tool-card,
    .tool-content-section, .tool-example-section, .tool-meta-grid article, .tool-faq-list article
) {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, .10) !important;
    color: #0f172a !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06) !important;
}
.app.light :where(
    .tool-panel, .calc-card, .panel-card, .webhook-card, .legal-card, .legal-panel,
    .info-card, .blog-card, .blog-featured, .blog-listing, .blog-article-content,
    .category-readable-card, .category-insight-card, .category-faq-panel, .result,
    .security-card, .crypto-card, .studio-section, .tool-content-section, .tool-faq-list article
) :where(h1, h2, h3, h4, b, strong, summary, dt) { color: #0f172a !important; }
.app.light :where(
    .tool-panel, .calc-card, .panel-card, .legal-card, .legal-panel, .info-card,
    .blog-card, .blog-featured, .blog-listing, .blog-article-content, .category-readable-card,
    .category-insight-card, .category-faq-panel, .result, .security-card, .crypto-card,
    .studio-section, .tool-content-section, .tool-faq-list article
) :where(p, li, small, span, dd, .blog-meta, .blog-card-meta) { color: #51607a !important; }

/* High-specificity light surfaces for inner-route content cards (landing pages,
   blog, etc. where a more specific dark ".app .x" rule out-ranked the :where group). */
html body .app.light .tool-content-section,
html body .app.light .tool-example-section,
html body .app.light .tool-meta-grid article,
html body .app.light .tool-faq-list article,
html body .app.light .tv-popular-card,
html body .app.light .category-step-strip article,
html body .app.light .seo-step-strip article {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, .10) !important;
    color: #0f172a !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .05) !important;
}
html body .app.light .tool-meta-grid article p,
html body .app.light .tv-popular-card small,
html body .app.light .category-step-strip article small,
html body .app.light .tool-content-section p { color: #51607a !important; }
html body .app.light .tv-popular-card b,
html body .app.light .category-step-strip article b { color: #0f172a !important; }

/* Cosmetic chips, tags, footers + related links in light */
html body .app.light .blog-card-meta span,
html body .app.light .blog-tag-row span,
html body .app.light .blog-card-footer span {
    background: #f4f6fc !important;
    border: 1px solid rgba(15, 23, 42, .10) !important;
    color: #51607a !important;
}
html body .app.light .blog-tag-row span { color: #4c1d95 !important; }
html body .app.light .blog-card h3,
html body .app.light .blog-card h3 a { color: #0f172a !important; }
html body .app.light .blog-card p { color: #51607a !important; }
html body .app.light .blog-card-footer a { color: #6d28d9 !important; }
html body .app.light .related-tool-row a {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, .12) !important;
    color: #334155 !important;
}
html body .app.light .related-tool-row a:hover {
    border-color: rgba(124, 58, 237, .42) !important;
    background: rgba(124, 58, 237, .06) !important;
    color: #4c1d95 !important;
}
html body .app.light .related-tool-row a .mud-icon-root { color: #6d28d9 !important; }
/* Hero decorative preview pills (keep them on-theme in light) */
html body .app.light :where(.blog-hero, .blog-article-hero, .seo-landing-hero) :where(.blog-hero-pill, .blog-hero-tile, .hero-pill) {
    background: #f4f6fc !important;
    border: 1px solid rgba(15, 23, 42, .10) !important;
    color: #4c1d95 !important;
}

/* Contact page surfaces in light */
html body .app.light .contact-hero-card,
html body .app.light .contact-page .contact-message-panel,
html body .app.light .contact-page .contact-side .legal-card,
html body .app.light .contact-page .contact-message-form,
html body .app.light .contact-page .contact-verification,
html body .app.light .contact-page .contact-safety-note {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, .10) !important;
    color: #0f172a !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06) !important;
}
html body .app.light .contact-hero-card span { color: #6d28d9 !important; }
html body .app.light .contact-hero-card strong,
html body .app.light .contact-page .contact-form-head .mud-typography { color: #0f172a !important; }
html body .app.light .contact-hero-card p,
html body .app.light .contact-page .contact-form-head .muted,
html body .app.light .contact-page .contact-submit-note { color: #51607a !important; }
html body .app.light .contact-page .contact-message-form textarea,
html body .app.light .contact-page .contact-message-form input {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, .14) !important;
}

/* PDF / file-upload surfaces in light */
html body .app.light :where(.pdf-upload-box, .pdf-drop-zone, .upload-zone, .file-drop-zone, .dropzone, .pdf-file-row, .pdf-result-card, .pdf-step, .pdf-option-card, .pdf-action-bar, .pdf-process-bar, .pdf-step-card, .pdf-stage, .pdf-status, .pdf-preview-row) {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, .12) !important;
}
html body .app.light :where(.pdf-action-bar, .pdf-step, .pdf-step-card, .pdf-stage) :where(b, strong, span, p, small, h2, h3) { color: #334155 !important; }
html body .app.light :where(.pdf-action-bar, .pdf-step, .pdf-step-card, .pdf-stage) :where(b, strong, h2, h3) { color: #0f172a !important; }
html body .app.light :where(.pdf-upload-box, .pdf-drop-zone, .upload-zone, .file-drop-zone, .dropzone) {
    border-style: dashed !important;
    border-color: rgba(124, 58, 237, .35) !important;
    background: #faf9ff !important;
}
html body .app.light :where(.pdf-upload-box, .pdf-drop-zone) :where(b, strong, span, p, small) { color: #334155 !important; }

/* PDF — light surfaces missed by the block above: options, selected-files, file/result cards, help steps, hub stats.
   Their base rules use dark navy fills (rgba(7,18,40,..) / rgba(2,6,23,..)) with near-white text, which on the
   default light theme renders as dark-on-dark (Step 2 card, How-it-works steps). Lighten them to white surfaces. */
html body .app.light :where(.pdf-options-card, .pdf-selected-files, .pdf-file-card, .pdf-result-card) {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, .12) !important;
}
/* These base rules end in an element selector (> div / span), so they out-specify a
   :where() wrapper — match them explicitly to win the override. */
html body .app.light .pdf-help-steps > div,
html body .app.light .pdf-hub-stats span {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, .12) !important;
}
html body .app.light :where(.pdf-options-card, .pdf-selected-files, .pdf-help-steps, .pdf-file-card, .pdf-result-card) :where(b, strong, h3, h4) { color: #0f172a !important; }
html body .app.light :where(.pdf-options-card, .pdf-selected-files, .pdf-help-steps, .pdf-file-card, .pdf-result-card) :where(span, p, small, label) { color: #334155 !important; }
html body .app.light :where(.pdf-options-card, .pdf-selected-files, .pdf-action-bar, .pdf-help-steps, .pdf-file-card) .eyebrow { color: var(--ac) !important; }
html body .app.light .pdf-file-index { background: rgba(47, 92, 255, .12) !important; color: #2f5cff !important; }
html body .app.light .pdf-result-meta span { color: #475569 !important; }
html body .app.light .pdf-file-status.is-valid { color: #15803d !important; background: rgba(34, 197, 94, .12) !important; border-color: rgba(34, 197, 94, .30) !important; }
html body .app.light .pdf-file-status.is-warning { color: #b45309 !important; background: rgba(245, 158, 11, .14) !important; border-color: rgba(245, 158, 11, .32) !important; }
html body .app.light .pdf-file-rules span {
    background: rgba(47, 92, 255, .08) !important;
    border: 1px solid rgba(47, 92, 255, .20) !important;
    color: #2f5cff !important;
}
/* === END PDF LIGHT SURFACES === */

/* Word Dash Adventure sits on the white app background but inherited a light text
   colour, leaving most of the game chrome text invisible (light-on-white). Restore
   a readable light design: light cards with dark-blue text. The canvas draws its
   own (dark) game scene, which is unaffected. */
html body .app.light .word-dash-page { color: #0f2747 !important; }
html body .app.light .word-dash-shell,
html body .app.light .word-dash-content article,
html body .app.light .word-dash-result {
    background: linear-gradient(180deg, #ffffff, #eef5ff) !important;
    border: 1px solid rgba(37, 99, 235, .2) !important;
    color: #0f2747 !important;
}
html body .app.light .word-dash-hud div {
    background: linear-gradient(180deg, #eaf2ff, #dbe9ff) !important;
    border: 1px solid rgba(37, 99, 235, .28) !important;
}
html body .app.light .word-dash-hud span { color: #2563eb !important; }
html body .app.light .word-dash-hud strong { color: #0f2747 !important; }
html body .app.light .word-dash-toolbar-copy strong { color: #0f2747 !important; }
html body .app.light .word-dash-toolbar-copy span { color: #475569 !important; }
html body .app.light .word-dash-content article :is(h2, h3) { color: #0f2747 !important; }
html body .app.light .word-dash-content article :is(p, li, td, th) { color: #334155 !important; }
html body .app.light .word-dash-result :is(h2, p) { color: #0f2747 !important; }
html body .app.light .word-dash-result :is(span, strong) { color: #2563eb !important; }
/* === END WORD DASH LIGHT === */

/* Search panels (blog, library, category, studio) are set white by their base
   rule, but a later layer repaints them with var(--dv-surface)/var(--asana-surface),
   which resolve dark even on the light theme — a lone dark bar on a light hero.
   Force them back to a light surface on the light theme. */
html body .app.light :is(.blog-search-row, .studio-search, .library-command, .category-search-card, .tv-sticky-search-box) {
    background: rgba(255, 255, 255, .94) !important;
    border-color: rgba(15, 23, 42, .14) !important;
}

/* Contact page hero badges were dark navy with low-contrast text on the light
   theme. Make them light, readable pills on the light theme. */
html body .app.light .contact-page .contact-meta span {
    background: rgba(255, 255, 255, .92) !important;
    border-color: rgba(15, 23, 42, .14) !important;
    color: #334155 !important;
}
html body .app.light .contact-page .contact-meta span :is(a, code, strong, b) {
    color: #2563eb !important;
}
/* === END SEARCH PANEL LIGHT === */
/* === END LIGHT THEME — internal / tool pages === */

/* =================================================================== */
/* ===  HOME: FULL-WIDTH, FLAT (NO GRAY BLOCKS), CATEGORY GRID  ====== */
/* =================================================================== */

/* Fuller width — tighter side gutters on the home route */
.app.home-route { --dv-gutter: clamp(14px, 2vw, 38px); }

/* Cohesive look: the hero and EVERY home section share one background that
   matches the hero — a soft lavender (light) / aurora (dark) panel — so the
   page reads as one consistent surface instead of mismatched gray boxes. */
.app.light.home-route {
    --dv-home-panel: linear-gradient(180deg, #ffffff, #f6f8ff);
    --dv-home-r1: rgba(124, 58, 237, .08);
    --dv-home-r2: rgba(8, 145, 178, .07);
    --dv-home-bd: rgba(124, 58, 237, .14);
    --dv-home-sh: 0 18px 48px rgba(79, 70, 229, .08);
}
.app.dark.home-route {
    --dv-home-panel: linear-gradient(180deg, rgba(20, 16, 48, .82), rgba(10, 11, 28, .78));
    --dv-home-r1: rgba(168, 85, 247, .16);
    --dv-home-r2: rgba(34, 211, 238, .12);
    --dv-home-bd: rgba(168, 139, 250, .22);
    --dv-home-sh: 0 22px 60px rgba(5, 6, 22, .42);
}
html body .app.home-route .dv-saas-hero,
html body .app.home-route .dv-saas-section,
html body .app.home-route .dv-saas-section.dv-market,
html body .app.home-route .dv-saas-section.dv-keyword-section,
html body .app.home-route .dv-saas-section.dv-saas-seo-copy,
html body .app.home-route .dv-saas-section.dv-saas-faq,
html body .app.home-route .dv-saas-section.dv-saas-search-panel {
    background:
        radial-gradient(120% 130% at 0% 0%, var(--dv-home-r1), transparent 46%),
        radial-gradient(120% 130% at 100% 0%, var(--dv-home-r2), transparent 48%),
        var(--dv-home-panel) !important;
    border: 1px solid var(--dv-home-bd) !important;
    box-shadow: var(--dv-home-sh) !important;
    border-radius: clamp(20px, 2.2vw, 30px) !important;
    padding: clamp(22px, 2.6vw, 40px) !important;
}

/* Section headings: a touch more breathing room without the box */
html body .app.home-route .dv-saas-section-head { max-width: 920px !important; }

/* ---- Category grid (replaces the full tool catalog) ---- */
html body .app .dv-cat-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}
html body .app .dv-cat-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    min-width: 0 !important;
    padding: clamp(18px, 1.8vw, 24px) !important;
    border-radius: 20px !important;
    border: 1px solid var(--bd) !important;
    text-decoration: none !important;
    overflow: hidden !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.app.dark .dv-cat-card {
    background: linear-gradient(180deg, rgba(20, 18, 44, .72), rgba(10, 11, 28, .70)) !important;
    border-color: rgba(148, 163, 255, .16) !important;
    box-shadow: 0 16px 40px rgba(5, 6, 22, .30) !important;
}
.app.light .dv-cat-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, .10) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06) !important;
}
html body .app .dv-cat-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: 3px !important;
    background: var(--dv-grad) !important;
    opacity: .65 !important;
    transition: opacity .2s ease !important;
}
html body .app .dv-cat-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--ac) !important;
}
.app.dark .dv-cat-card:hover { box-shadow: 0 26px 60px rgba(76, 29, 149, .32) !important; background: linear-gradient(180deg, rgba(31, 26, 66, .9), rgba(11, 13, 34, .86)) !important; }
.app.light .dv-cat-card:hover { box-shadow: 0 22px 48px rgba(79, 70, 229, .14) !important; background: #fbfaff !important; }
html body .app .dv-cat-card:hover::before { opacity: 1 !important; }

html body .app .dv-cat-icon {
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(168, 85, 247, .26), rgba(34, 211, 238, .20)) !important;
    color: #c4b5fd !important;
}
.app.light .dv-cat-icon {
    background: linear-gradient(135deg, rgba(124, 58, 237, .14), rgba(8, 145, 178, .12)) !important;
    color: #6d28d9 !important;
}
html body .app .dv-cat-body { display: grid !important; gap: 5px !important; flex: 1 1 auto !important; }
html body .app .dv-cat-card b {
    font-family: var(--fd) !important;
    font-size: 1.12rem !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
    color: var(--tx) !important;
}
.app.dark .dv-cat-card b { color: #f3f8ff !important; }
.app.light .dv-cat-card b { color: #0f172a !important; }
html body .app .dv-cat-card small {
    font-size: .9rem !important;
    line-height: 1.5 !important;
    color: var(--tx2) !important;
}
.app.dark .dv-cat-card small { color: #c6d1e6 !important; }
.app.light .dv-cat-card small { color: #51607a !important; }
html body .app .dv-cat-foot {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-top: 4px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--bd) !important;
}
html body .app .dv-cat-foot em {
    font-style: normal !important;
    font-weight: 800 !important;
    font-size: .82rem !important;
    color: var(--tx2) !important;
}
html body .app .dv-cat-go {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-weight: 800 !important;
    font-size: .85rem !important;
}
.app.dark .dv-cat-go { color: #c4b5fd !important; }
.app.light .dv-cat-go { color: #6d28d9 !important; }
html body .app .dv-cat-card:hover .dv-cat-go { gap: 9px !important; }

/* ---- Alignment + spacing fixes ---- */
/* Collapse the doubled MudMainContent padding so there is ONE consistent page
   gutter (from .main), keeping content the same width on the left and right. */
html body .app .mud-main-content,
html body .app .tv-app-main-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
}
/* Reserve scrollbar space on both edges so content stays visually centered. */
html { scrollbar-gutter: stable both-edges; }

/* Even, predictable spacing between home sections (single source: the grid gap). */
html body .app.home-route .dv-saas-home { gap: clamp(20px, 2.4vw, 36px) !important; }

/* Header blends into the app instead of looking like a bolted-on strip:
   translucent, glassy, no hard divider line. */
.app .tv-asana-topbar,
.app .tv-command-topbar {
    border-bottom: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: saturate(150%) blur(16px) !important;
    backdrop-filter: saturate(150%) blur(16px) !important;
}
.app.light .tv-asana-topbar,
.app.light .tv-command-topbar {
    background: linear-gradient(180deg, rgba(247, 245, 255, .72), rgba(247, 245, 255, .42)) !important;
}
.app.dark .tv-asana-topbar,
.app.dark .tv-command-topbar {
    background: linear-gradient(180deg, rgba(16, 12, 36, .66), rgba(12, 11, 28, .34)) !important;
}

/* Headings: stop the gradient-clipped text from cutting descenders (g, y, p) */
html body .app .dv-saas-hero h1,
html body .app .dv-saas-section-head h2,
html body .app .dv-saas-section h2,
html body .app .dv-saas-kicker,
html body .app .dv-cat-card b {
    line-height: 1.18 !important;
    padding-bottom: .06em !important;
    overflow: visible !important;
}
html body .app .dv-saas-kicker { line-height: 1.3 !important; padding-bottom: 0 !important; }
/* === END HOME: FULL-WIDTH, FLAT, CATEGORY GRID === */

/* ---- Footer: remove the gray translucent blocks in light mode ---- */
.app.light .footer :where(
    .footer-hero, .footer-column, .footer-column-wide, .footer-trust-compact,
    .footer-info-column, .footer-brand-lockup, .footer-info-grid, .footer-bottom
) {
    background: transparent !important;
    border-color: rgba(15, 23, 42, .08) !important;
    box-shadow: none !important;
}
/* Footer pills / chips / action buttons → light surfaces */
.app.light .footer :where(.footer-actions a, .footer-chip-row span, .footer-info-link, .footer-logo-mark) {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, .10) !important;
    color: #334155 !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .05) !important;
}
.app.light .footer :where(.footer-actions a:hover, .footer-info-link:hover) {
    border-color: rgba(124, 58, 237, .4) !important;
    color: #4c1d95 !important;
}
.app.light .footer :where(.footer-actions a .mud-icon-root, .footer-chip-row span .mud-icon-root, .footer-info-link .mud-icon-root) { color: #6d28d9 !important; }
.app.light .footer :where(.footer-brand, .footer-head) { color: #0f172a !important; }
.app.light .footer :where(.footer-sub, .footer-note, .footer-address, .footer-bottom span) { color: #51607a !important; }
/* === END FOOTER LIGHT FIX === */

/* =================================================================== */
/* ===  FOOTER COLUMNS — single 4-column row, equal widths  ========= */
/* =================================================================== */
html body .app .footer .footer-cols {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(20px, 2.4vw, 40px) !important;
    align-items: start !important;
}
/* Trust Notes must not be wider than the other columns */
html body .app .footer .footer-column-wide,
html body .app .footer .footer-trust-compact {
    grid-column: auto !important;
    max-width: none !important;
    width: auto !important;
}
/* All four columns are plain vertical link lists under a bold uppercase head */
html body .app .footer .footer-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-width: 0 !important;
}
html body .app .footer .footer-column .footer-head {
    margin: 0 0 6px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    font-size: .82rem !important;
}
html body .app .footer .footer-column > a {
    display: block !important;
    margin: 0 !important;
    font-size: .92rem !important;
    line-height: 1.5 !important;
}
/* Trust Notes chips still wrap neatly inside their (now equal-width) column */
html body .app .footer .footer-chip-row { flex-wrap: wrap !important; gap: 8px !important; }

@media (max-width: 1000px) {
    html body .app .footer .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
    html body .app .footer .footer-cols { grid-template-columns: 1fr !important; }
}
/* === END FOOTER COLUMNS === */

/* =================================================================== */
/* ===  HEADER ALIGNS TO HERO/CONTENT BOX  =========================== */
/* ===  Menu content uses the SAME gutter as .main / the hero panel  === */
/* ===  so the brand (left) and actions (right) line up with the      === */
/* ===  hero box edges. (Look/style of the menu is unchanged.)        === */
/* =================================================================== */
html body .app .tv-asana-topbar,
html body .app .tv-command-topbar {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    margin-left: var(--dv-gutter) !important;
    margin-right: var(--dv-gutter) !important;
    padding-left: clamp(16px, 1.5vw, 24px) !important;
    padding-right: clamp(16px, 1.5vw, 24px) !important;
}

/* Guarantee all feature / category cards stretch to equal height in their row,
   driven entirely by the shared card classes (no per-card overrides). */
html body .app .dv-saas-grid,
html body .app .dv-saas-grid.four,
html body .app .dv-saas-grid.three,
html body .app .dv-saas-grid.mini,
html body .app .dv-cat-grid {
    align-items: stretch !important;
}
html body .app .dv-saas-card,
html body .app .dv-saas-category-card,
html body .app .dv-saas-tool-card,
html body .app .dv-cat-card {
    height: 100% !important;
    align-self: stretch !important;
}
/* === END HEADER ALIGNS TO HERO/CONTENT BOX === */

/* =================================================================== */
/* ===  UNIFORM FORM CONTROLS (shared, all tool pages)  ============= */
/* ===  One consistent size/shape for every native input, textarea  === */
/* ===  and select so controls look identical across pages.         === */
/* =================================================================== */
html body .app .tool-body :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]),
    select
) {
    min-height: 46px !important;
    padding: 11px 14px !important;
    border-radius: 12px !important;
    border-width: 1px !important;
    font-family: var(--f) !important;
    font-size: .95rem !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}
html body .app .tool-body textarea {
    min-height: 150px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    border-width: 1px !important;
    font-family: var(--f) !important;
    font-size: .95rem !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
}
/* Buttons sit at the same height as the inputs for a tidy row */
html body .app .tool-body :where(.btn, .btn-p, .btn-s, .copybtn) {
    min-height: 44px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Focus state consistent across controls */
html body .app .tool-body :where(input, textarea, select):focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 26%, transparent) !important;
}
/* === END UNIFORM FORM CONTROLS === */

/* =================================================================== */
/* ===  SITE-WIDE: hero cap, spacing rhythm, utility classes  ======= */
/* =================================================================== */
.app { --section-spacing: clamp(28px, 3.4vw, 56px); }

/* Keep every <h1> (required for SEO) but render it small site-wide. */
html body .app h1,
html body .app .mud-typography-h1 {
    font-size: clamp(1.25rem, 1.8vw, 1.7rem) !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
}
/* Hero / page headers — slightly larger than body h1 but still compact. */
html body .app :where(
    .tool-head h1, .tool-head-pro h1, .legal-hero h1, .info-hero h1,
    .blog-hero h1, .blog-article-hero h1, .category-market-hero h1,
    .readable-category-hero h1, .seo-landing-hero h1, .library-hero h1,
    .compact-library-hero h1, .tv-bookmarks-hero h1
) {
    font-size: clamp(1.4rem, 2.2vw, 1.9rem) !important;
    line-height: 1.2 !important;
}
html body .app .dv-saas-hero h1 {
    font-size: clamp(1.6rem, 2.8vw, 2.3rem) !important;
    line-height: 1.16 !important;
}

/* Consistent vertical rhythm for tool-page sections */
html body .app .tool-page { gap: var(--section-spacing) !important; }

/* ---- Reusable spacing / width utilities (replace static inline styles) ---- */
.app .dv-mt-1 { margin-top: 6px !important; }
.app .dv-mt-2 { margin-top: 10px !important; }
.app .dv-mt-3 { margin-top: 12px !important; }
.app .dv-mt-4 { margin-top: 14px !important; }
.app .dv-mt-5 { margin-top: 18px !important; }
.app .dv-maxw-400 { max-width: 400px !important; }
.app .dv-maxw-500 { max-width: 500px !important; }
.app .dv-maxw-600 { max-width: 600px !important; }
.app .dv-maxw-720 { max-width: 720px !important; }
.app .dv-note-italic { margin-top: 12px !important; font-style: italic !important; }
.app .dv-minh-240 { min-height: 240px !important; }
.app .dv-break-all { word-break: break-all !important; }

/* ---- Reusable info tooltip trigger ---- */
.app .dv-info-tip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 999px !important;
    border: 1px solid var(--bd) !important;
    background: color-mix(in srgb, var(--ac) 12%, transparent) !important;
    color: var(--ac) !important;
    cursor: help !important;
    vertical-align: middle !important;
    padding: 0 !important;
}
.app .dv-info-tip:hover { border-color: var(--ac) !important; }
.app .dv-info-tip .mud-icon-root { font-size: 1rem !important; }
/* === END SITE-WIDE === */

/* ---- Reusable meter / progress + media helpers (replace inline styles) ---- */
.app .dv-meter-track {
    border: 1px solid var(--bd);
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg3);
}
.app .dv-meter-sm { height: 12px; }
.app .dv-meter-md { height: 18px; }
.app .dv-meter-lg { height: 20px; }
.app .dv-meter-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ac), var(--ac2));
}
.app .dv-meter-fill--anim { transition: width .08s linear; }
.app .dv-camera-video {
    width: 100%;
    max-width: 720px;
    border-radius: 12px;
    background: #000;
}
.app .dv-needle-rest { transform: rotate(-45deg); }
.app .dv-strike { text-decoration: line-through; }
/* BMI scale segments (static widths/colors) */
.app .bmi-r-under { width: 24%; background: #3b82f6; }
.app .bmi-r-normal { width: 26%; background: #22c55e; }
.app .bmi-r-over { width: 25%; background: #f59e0b; }
.app .bmi-r-obese { width: 25%; background: #ef4444; }
/* Misc helpers */
.app .dv-cursor-pointer { cursor: pointer; }
.app .dv-hidden { display: none; }
/* SERP preview card (mimics a Google result — fixed brand-like colors) */
.app .dv-serp-card { margin-top: 20px; padding: 20px; background: var(--bg2); border: 1px solid var(--bd); border-radius: 8px; max-width: 600px; }
.app .dv-serp-title { font-size: 1.1rem; color: #1a0dab; margin-bottom: 4px; }
.app .dv-serp-url { font-size: .85rem; color: #006621; margin-bottom: 4px; }
.app .dv-serp-desc { font-size: .87rem; color: #545454; }
/* Open Graph preview card */
.app .dv-og-card { max-width: 500px; border: 1px solid var(--bd); border-radius: 8px; overflow: hidden; background: var(--bg2); }
.app .dv-og-img { height: 260px; background: #eee; display: flex; align-items: center; justify-content: center; color: #999; }
.app .dv-og-body { padding: 12px; }
.app .dv-og-domain { font-size: .75rem; color: var(--tx2); text-transform: uppercase; }
.app .dv-og-title { font-weight: 600; margin: 4px 0; }
.app .dv-og-desc { font-size: .85rem; color: var(--tx2); }
/* Pass / fail result colours */
.app .dv-ok { color: var(--gr); }
.app .dv-bad { color: var(--rd); }
/* Small static helpers */
.app .dv-text-center { text-align: center; }
.app .dv-fs-lg { font-size: 1.5rem; }
.app .dv-fs-lg-b { font-size: 1.5rem; font-weight: 700; }
.app .dv-fs-sm { font-size: .9rem; }
.app .dv-color-input { height: 60px; width: 100px; }
.app .dv-m0-b8 { margin: 0 0 8px; }
.app .dv-prose72 { margin: 0; max-width: 72ch; }
.app .dv-mt-16 { margin-top: 16px; }
.app .dv-swatch-lg { height: 80px; border-radius: 12px; margin: 16px 0; }
.app .dv-dl-cta { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 999px; }
.app .dv-contrast-preview { padding: 24px; border-radius: 12px; text-align: center; margin: 16px 0; }
/* CSS-generator preview scaffolding (static parts; the generated value stays inline) */
.app .dv-center-30 { display: flex; justify-content: center; padding: 30px; }
.app .dv-center-40 { display: flex; justify-content: center; padding: 40px; }
.app .dv-demo-box { width: 200px; height: 200px; background: var(--ac); }
.app .dv-demo-box2 { width: 200px; height: 200px; background: var(--bg2); border-radius: 12px; }
.app .dv-textshadow-demo { text-align: center; padding: 40px; font-size: 3rem; font-weight: 700; }
.app .dv-flex-demo-item { padding: 12px 24px; background: var(--ac); color: #fff; border-radius: 6px; font-weight: 600; }
.app .dv-swatch-120 { height: 120px; border-radius: 12px; margin: 16px 0; }
.app .dv-swatch-150 { height: 150px; border-radius: 12px; margin: 16px 0; }
.app .dv-swatch-200 { height: 200px; border-radius: 16px; margin-bottom: 16px; }
.app .dv-palette-row { display: flex; gap: 4px; margin: 16px 0; }
.app .dv-palette-swatch { flex: 1; height: 80px; border-radius: 8px; display: flex; align-items: end; justify-content: center; padding: 4px; }
.app .dv-palette-label { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); font-size: .7rem; }
.app .dv-disabled { pointer-events: none; opacity: .45; }
/* === END METER HELPERS === */

/* === FINAL NAV MENU BLUE THEME OVERRIDE ============================
   Keep the public navigation on the DaivVerse navy/blue system. This
   intentionally sits at the end of the bundle because older migration
   blocks still define light/gray menu surfaces above. */
html body .app .tv-command-topbar.tv-asana-topbar,
html body .app.light .tv-command-topbar.tv-asana-topbar,
html body .app.dark .tv-command-topbar.tv-asana-topbar {
    background:
        radial-gradient(circle at 12% 0%, rgba(56, 189, 248, .16), transparent 34%),
        linear-gradient(180deg, rgba(3, 13, 34, .96), rgba(4, 19, 49, .90)) !important;
    border-bottom: 1px solid rgba(96, 165, 250, .22) !important;
    box-shadow: none !important;
    color: #eaf6ff !important;
}

html body .app .tv-asana-brand,
html body .app .tv-asana-menu-item > summary,
html body .app .tv-asana-action-link,
html body .app .tv-asana-mobile-menu {
    color: #eaf6ff !important;
}

html body .app .tv-asana-menu-item > summary,
html body .app .tv-asana-action-link,
html body .app .tv-asana-mobile-menu {
    background: rgba(14, 165, 233, .08) !important;
    border-color: rgba(96, 165, 250, .20) !important;
}

html body .app .tv-asana-menu-item > summary:hover,
html body .app .tv-asana-menu-item > summary:focus-visible,
html body .app .tv-asana-menu-item[open] > summary,
html body .app .tv-asana-action-link:hover,
html body .app .tv-asana-action-link:focus-visible,
html body .app .tv-asana-mobile-menu:hover,
html body .app .tv-asana-mobile-menu:focus-visible {
    background: linear-gradient(135deg, rgba(37, 99, 235, .34), rgba(14, 165, 233, .24)) !important;
    border-color: rgba(125, 211, 252, .48) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html body .app .tv-asana-menu-item > .tv-asana-mega,
html body .app .tv-asana-more-item > .tv-asana-mega,
html body .app.light .tv-asana-menu-item > .tv-asana-mega,
html body .app.light .tv-asana-more-item > .tv-asana-mega,
html body .app.dark .tv-asana-menu-item > .tv-asana-mega,
html body .app.dark .tv-asana-more-item > .tv-asana-mega {
    background:
        radial-gradient(circle at 10% 0%, rgba(37, 99, 235, .22), transparent 38%),
        radial-gradient(circle at 92% 8%, rgba(34, 211, 238, .12), transparent 34%),
        linear-gradient(180deg, rgba(4, 16, 43, .99), rgba(2, 8, 23, .99)) !important;
    border: 1px solid rgba(96, 165, 250, .28) !important;
    color: #eff8ff !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}

html body .app .tv-asana-mega-intro,
html body .app .tv-asana-mega-grid section {
    background: linear-gradient(180deg, rgba(15, 48, 103, .52), rgba(7, 24, 58, .42)) !important;
    border-color: rgba(96, 165, 250, .18) !important;
    box-shadow: none !important;
}

html body .app .tv-asana-mega-intro > span,
html body .app .tv-asana-mega-section > .mud-icon-root,
html body .app .tv-asana-tool-link > .mud-icon-root {
    background: linear-gradient(135deg, rgba(37, 99, 235, .48), rgba(34, 211, 238, .28)) !important;
    color: #dff7ff !important;
    box-shadow: none !important;
}

html body .app .tv-asana-mega h2,
html body .app .tv-asana-mega b,
html body .app .tv-asana-mega a {
    color: #f8fbff !important;
}

html body .app .tv-asana-mega p,
html body .app .tv-asana-mega small,
html body .app .tv-asana-mega-intro p,
html body .app .tv-asana-mega-section small {
    color: #b9d9f7 !important;
}

html body .app .tv-asana-mega-section,
html body .app .tv-asana-tool-link,
html body .app .tv-asana-mega-grid section > a:not(.tv-asana-mega-section) {
    background: rgba(8, 33, 76, .48) !important;
    border-color: rgba(96, 165, 250, .16) !important;
    color: #eaf6ff !important;
}

html body .app .tv-asana-mega-section:hover,
html body .app .tv-asana-tool-link:hover,
html body .app .tv-asana-tool-link:focus-visible,
html body .app .tv-asana-mega-grid section > a:not(.tv-asana-mega-section):hover,
html body .app .tv-asana-mega-grid section > a:not(.tv-asana-mega-section):focus-visible {
    background: linear-gradient(135deg, rgba(37, 99, 235, .36), rgba(14, 165, 233, .24)) !important;
    border-color: rgba(125, 211, 252, .42) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html body .app .mud-drawer,
html body .app .mud-drawer-content,
html body .app .drawer-menu,
html body .app .mud-drawer .mud-navmenu {
    background:
        radial-gradient(circle at 20% 0%, rgba(56, 189, 248, .16), transparent 34%),
        linear-gradient(180deg, #03112b, #020817) !important;
    color: #eaf6ff !important;
}

html body .app .mud-drawer .mud-nav-link,
html body .app .mud-drawer .mud-nav-link-text,
html body .app .mud-drawer .mud-nav-group .mud-nav-link-title {
    color: #eaf6ff !important;
}

html body .app .mud-drawer .mud-nav-link:hover,
html body .app .mud-drawer .mud-nav-link.active {
    background: rgba(37, 99, 235, .26) !important;
    color: #ffffff !important;
}
/* === END FINAL NAV MENU BLUE THEME OVERRIDE ======================== */

/* === LIGHT-MODE NAV OVERRIDE (re-light the menu in light theme) =====
   The block above keeps the nav navy for the DARK theme. In LIGHT theme
   the header + mega menu must be light with dark, readable (non-gray) text.
   Placed last so it wins for .app.light. */

/* Header bar — light glass */
html body .app.light .tv-command-topbar.tv-asana-topbar {
    background: linear-gradient(180deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, .70)) !important;
    border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
    color: #1f2937 !important;
    -webkit-backdrop-filter: saturate(160%) blur(16px) !important;
    backdrop-filter: saturate(160%) blur(16px) !important;
}

/* Brand keeps the gradient wordmark */
html body .app.light .tv-asana-brand > span:not(.tv-asana-brand-mark):not(.tv-brand-tooltip) {
    background: var(--dv-grad-text-l) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* Menu / action / mobile triggers — dark indigo text, no navy pill */
html body .app.light .tv-asana-menu-item > summary,
html body .app.light .tv-asana-menu-item > summary > span,
html body .app.light .tv-asana-action-link,
html body .app.light .tv-asana-action-link > span,
html body .app.light .tv-asana-mobile-menu,
html body .app.light .tv-sticky-theme-button {
    background: transparent !important;
    border-color: transparent !important;
    color: #312e81 !important;
}
html body .app.light .tv-asana-menu-item > summary .mud-icon-root,
html body .app.light .tv-asana-action-link .mud-icon-root { color: #6d28d9 !important; }

html body .app.light .tv-asana-menu-item > summary:hover,
html body .app.light .tv-asana-menu-item > summary:focus-visible,
html body .app.light .tv-asana-menu-item[open] > summary,
html body .app.light .tv-asana-action-link:hover,
html body .app.light .tv-asana-action-link:focus-visible,
html body .app.light .tv-asana-mobile-menu:hover,
html body .app.light .tv-sticky-theme-button:hover {
    background: rgba(124, 58, 237, .10) !important;
    border-color: rgba(124, 58, 237, .28) !important;
    color: #4c1d95 !important;
}

/* Mega-menu panel — white */
html body .app.light .tv-asana-menu-item > .tv-asana-mega,
html body .app.light .tv-asana-more-item > .tv-asana-mega {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, .12) !important;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .16) !important;
    color: #0f172a !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html body .app.light .tv-asana-mega-intro,
html body .app.light .tv-asana-mega-grid section {
    background: linear-gradient(180deg, #f7f5ff, #eef4ff) !important;
    border-color: rgba(15, 23, 42, .08) !important;
}
html body .app.light .tv-asana-mega-intro > span,
html body .app.light .tv-asana-mega-section > .mud-icon-root,
html body .app.light .tv-asana-tool-link > .mud-icon-root {
    background: linear-gradient(135deg, rgba(124, 58, 237, .16), rgba(8, 145, 178, .14)) !important;
    color: #6d28d9 !important;
}
html body .app.light .tv-asana-mega h2,
html body .app.light .tv-asana-mega b,
html body .app.light .tv-asana-mega a { color: #0f172a !important; }
html body .app.light .tv-asana-mega p,
html body .app.light .tv-asana-mega small,
html body .app.light .tv-asana-mega-intro p,
html body .app.light .tv-asana-mega-section small { color: #51607a !important; }
html body .app.light .tv-asana-mega-intro a { color: #6d28d9 !important; }

html body .app.light .tv-asana-mega-section,
html body .app.light .tv-asana-tool-link,
html body .app.light .tv-asana-mega-grid section > a:not(.tv-asana-mega-section) {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, .10) !important;
    color: #334155 !important;
}
html body .app.light .tv-asana-mega-section:hover,
html body .app.light .tv-asana-tool-link:hover,
html body .app.light .tv-asana-tool-link:focus-visible,
html body .app.light .tv-asana-mega-grid section > a:not(.tv-asana-mega-section):hover,
html body .app.light .tv-asana-mega-grid section > a:not(.tv-asana-mega-section):focus-visible {
    background: rgba(124, 58, 237, .08) !important;
    border-color: rgba(124, 58, 237, .30) !important;
    color: #4c1d95 !important;
}
/* === END LIGHT-MODE NAV OVERRIDE === */

/* === "How it works" step cards match the other section cards ======== */
html body .app.light .dv-saas-steps article {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, .10) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06) !important;
}
html body .app.dark .dv-saas-steps article {
    background: linear-gradient(180deg, rgba(20, 18, 44, .74), rgba(10, 11, 28, .72)) !important;
    border: 1px solid rgba(168, 139, 250, .20) !important;
    box-shadow: 0 12px 32px rgba(5, 6, 22, .28) !important;
}
/* Step number badge — use the brand gradient for cohesion */
html body .app .dv-saas-steps article > span {
    background: var(--dv-grad, linear-gradient(135deg, #a855f7, #22d3ee)) !important;
}
/* === END STEP CARDS === */

/* === Compact section headings (keep below the small h1) ============= */
html body .app .dv-saas-section-head h2,
html body .app .dv-saas-section h2,
html body .app .dv-saas-section > h2 {
    font-size: clamp(1.3rem, 1.9vw, 1.75rem) !important;
    line-height: 1.22 !important;
}
html body .app .dv-saas-section-head .dv-saas-kicker { font-size: .76rem !important; }
/* === END COMPACT HEADINGS === */

/* === All-tools: tools as multiple blocks under each category ======= */
html body .app .tv-category-room ul {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
html body .app .tv-category-room ul .tv-tool-button-row { margin: 0 !important; }
html body .app .tv-tool-button { min-height: 64px !important; height: 100% !important; }
html body .app .tv-category-room {
    padding: clamp(18px, 2vw, 26px) !important;
}

/* Search / filter selects: light dropdown adornment (no dark square) */
.app.light .mud-input-adornment,
.app.light .mud-input-adornment-end,
.app.light .mud-input-adornment-start {
    background: transparent !important;
    color: #51607a !important;
}
.app.light .mud-input-adornment .mud-icon-root,
.app.light .mud-input-adornment-end .mud-icon-root { color: #6d28d9 !important; }
.app.light .mud-select .mud-input-slot,
.app.light .mud-tool-command .mud-input-slot { background: #ffffff !important; }

/* Per-tool info icon (hover shows what the tool does) */
.app .tv-tool-button-meta { display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.app .tv-tool-info {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--ac) 14%, transparent) !important;
    color: var(--ac) !important;
    cursor: help !important;
    flex: 0 0 auto !important;
    transition: background .15s ease !important;
}
.app .tv-tool-info:hover { background: color-mix(in srgb, var(--ac) 26%, transparent) !important; }
.app .tv-tool-info .mud-icon-root { font-size: 1rem !important; }
.app.light .tv-tool-info { color: #6d28d9 !important; }
.app.dark .tv-tool-info { color: #c4b5fd !important; }
/* Compact tool blocks: small full name, description moves to hover */
.app .tv-tool-button-copy b {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: .82rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}
.app .tv-tool-button-copy small { display: none !important; }
.app .tv-tool-button { min-height: 52px !important; padding: 10px 12px !important; }
.app .tv-tool-button-icon { width: 34px !important; height: 34px !important; }
/* Tool name color per theme (var(--tv-ink) is near-white, so fix light) */
.app.light .tv-tool-button,
.app.light .tv-tool-button-copy b { color: #0f172a !important; }
.app.dark .tv-tool-button,
.app.dark .tv-tool-button-copy b { color: #f3f8ff !important; }
/* === END ALL-TOOLS GRID + SEARCH FIX === */

/* === Internal pages: no header/menu — just a close-to-home button === */
/* Home keeps the full header + mega menu. Internal pages hide the whole
   top bar and show only a floating close (X) button (top-right) that
   navigates back to the home page. */
html body .app.inner-route .tv-asana-topbar,
html body .app.inner-route .tv-command-topbar,
html body .app.inner-route .tv-asana-menu {
    display: flex !important;
}
/* Floating close button at the very top-right corner */
html body .app .global-tool-close {
    display: none !important;
}
/* Clear a small top band for the close button now that the header is gone */
html body .app.inner-route .tv-app-main-content,
html body .app.inner-route .mud-main-content {
    padding-top: 0 !important;
}
html body .app.inner-route .main {
    padding-top: clamp(18px, 2vw, 28px) !important;
}
/* Themed close button (clear contrast in both themes) */
html body .app.light .global-tool-close {
    background: #ffffff !important;
    color: #6d28d9 !important;
    border: 1px solid rgba(15, 23, 42, .14) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .16) !important;
}
html body .app.dark .global-tool-close {
    background: rgba(18, 16, 44, .92) !important;
    color: #f3f8ff !important;
    border: 1px solid rgba(168, 139, 250, .30) !important;
}
html body .app .global-tool-close { width: 44px !important; height: 44px !important; }
/* === END INTERNAL NAV HIDE === */

/* === All-tools: single combined search + category bar ============== */
html body .app .dv-alltools-search {
    display: grid !important;
    gap: 12px !important;
    margin-bottom: clamp(20px, 2.4vw, 30px) !important;
}
html body .app .dv-search-combo {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    border: 1px solid var(--bd) !important;
    border-radius: 999px !important;
    padding: 5px 8px 5px 18px !important;
    background: var(--bg2) !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
.app.light .dv-search-combo { background: #ffffff !important; box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important; }
.app.dark .dv-search-combo { background: linear-gradient(180deg, rgba(20,18,44,.7), rgba(10,11,28,.66)) !important; }
html body .app .dv-search-combo:focus-within {
    border-color: var(--ac) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ac) 16%, transparent) !important;
}
html body .app .dv-search-combo-icon { color: var(--ac) !important; flex: 0 0 auto !important; }
.app.light .dv-search-combo-icon { color: #6d28d9 !important; }
.app.dark .dv-search-combo-icon { color: #c4b5fd !important; }
html body .app .dv-search-combo-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
    outline: none !important;
    font-family: var(--f) !important;
    font-size: 1rem !important;
    padding: 11px 6px !important;
    color: var(--tx) !important;
}
.app.light .dv-search-combo-input { color: #0f172a !important; }
.app.dark .dv-search-combo-input { color: #f3f8ff !important; }
html body .app .dv-search-combo-input::placeholder { color: #94a3b8 !important; }
html body .app .dv-search-combo-divider { width: 1px !important; height: 26px !important; background: var(--bd) !important; flex: 0 0 auto !important; }
html body .app .dv-search-combo-cat {
    flex: 0 0 auto !important;
    border: 0 !important;
    background: transparent !important;
    outline: none !important;
    cursor: pointer !important;
    font-family: var(--f) !important;
    font-size: .92rem !important;
    font-weight: 700 !important;
    padding: 11px 30px 11px 14px !important;
    border-radius: 999px !important;
    max-width: 220px !important;
    color: var(--tx) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236d28d9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
}
.app.light .dv-search-combo-cat { color: #0f172a !important; }
.app.dark .dv-search-combo-cat { color: #f3f8ff !important; }
html body .app .dv-search-combo-cat:hover { color: var(--ac) !important; }
.app.dark .dv-search-combo-cat option { background: #12122c !important; color: #f3f8ff !important; }
html body .app .dv-alltools-meta { display: flex !important; align-items: center !important; gap: 12px !important; padding-left: 10px !important; }
html body .app .dv-alltools-count { color: var(--tx2) !important; font-weight: 700 !important; font-size: .9rem !important; }
html body .app .dv-alltools-clear {
    border: 1px solid var(--bd) !important;
    background: transparent !important;
    color: var(--ac) !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}
html body .app .dv-alltools-clear:hover { border-color: var(--ac) !important; }
@media (max-width: 600px) {
    html body .app .dv-search-combo { flex-wrap: wrap !important; border-radius: 18px !important; }
    html body .app .dv-search-combo-divider { display: none !important; }
    html body .app .dv-search-combo-cat { max-width: none !important; width: 100% !important; }
}
/* === END ALL-TOOLS SEARCH COMBO === */

/* === Readable result tables + output panels (both themes) ========== */
html body .app.light .dtable { background: #ffffff !important; }
html body .app.light .dtable th {
    background: #f1f5fc !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, .10) !important;
}
html body .app.light .dtable td {
    background: #ffffff !important;
    color: #334155 !important;
    border-color: rgba(15, 23, 42, .10) !important;
}
html body .app.dark .dtable { background: rgba(20, 18, 44, .5) !important; }
html body .app.dark .dtable th {
    background: rgba(255, 255, 255, .07) !important;
    color: #f3f8ff !important;
    border-color: rgba(255, 255, 255, .12) !important;
}
html body .app.dark .dtable td {
    color: #e7def5 !important;
    border-color: rgba(255, 255, 255, .10) !important;
}
/* Generic result / output containers readable in light */
html body .app.light :where(.result, .output-box, .out-wrap, .result-panel, .result-card, .mud-table, .mud-table-cell, .mud-table-root) {
    background: #ffffff !important;
    color: #0f172a !important;
}
html body .app.light :where(.result, .result-card, .output-box) :where(b, strong, span, td, th, p, code, pre) { color: #1f2937 !important; }

/* === Compact tool header (let the tool be the focus, not a big hero) === */
html body .app .tool-head,
html body .app .tool-head-pro,
html body .app.tool-route .tool-head,
html body .app.tool-route .tool-head-pro {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 0 4px !important;
    margin-bottom: 6px !important;
    min-height: 0 !important;
    overflow: visible !important;
}
html body .app .tool-head::before,
html body .app.tool-route .tool-head::before { display: none !important; }
html body .app .tool-head .tool-title-icon {
    width: 40px !important;
    height: 40px !important;
    box-shadow: none !important;
}
html body .app .tool-head h1 {
    font-size: clamp(1.2rem, 2vw, 1.55rem) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}
html body .app .tool-head > div > p,
html body .app .tool-head-pro > div > p {
    font-size: .9rem !important;
    line-height: 1.45 !important;
    margin: 2px 0 0 !important;
    max-width: 70ch !important;
}
/* Drop the decorative eyebrow + status badges from the header to declutter */
html body .app .tool-head .eyebrow,
html body .app .tool-head-pro .tool-badges,
html body .app .tool-head-pro .tool-badges .badge { display: none !important; }
/* === END COMPACT TOOL HEADER === */

/* === MERGED TOOL HEADER — network suite prototype (dns-lookup) ===
   On a single-tool route the standalone hero is removed; the SEO <h1> now lives
   INSIDE the tool panel beside its icon, with the trust stats on the right.
   One cohesive panel — the tool is the focus. (Scoped to .network-suite for now;
   roll out to other tool families after user confirmation.) */
/* The suite workspaces were CSS grids that pinned a tall fixed first row, leaving
   dead space under the header. Switch the outer container to a simple flex column
   so the header sits directly above the form with a controlled ~8px gap. Applies
   to every suite family (network + education-style: Reference, Everyday, LocalNoApi). */
html body .app .network-workspace,
html body .app .education-workspace {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-items: stretch !important;
  grid-template-rows: none !important;
}
html body .app .network-workspace-head,
html body .app .education-workspace-head {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  height: auto !important;
  min-height: 0 !important;
  border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
  padding: 0 0 8px !important;
  margin: 0 !important;
}
html body .app.dark .network-workspace-head,
html body .app.dark .education-workspace-head {
  border-bottom-color: rgba(255, 255, 255, .10) !important;
}
html body .app .network-workspace-title,
html body .app .education-workspace-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}
html body .app .network-workspace-title .tool-title-icon,
html body .app .education-workspace-title .tool-title-icon {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  box-shadow: none !important;
}
html body .app .network-workspace-title h1,
html body .app .network-workspace-title h2,
html body .app .education-workspace-title h1,
html body .app .education-workspace-title h2 {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
html body .app .network-workspace-title > div > p,
html body .app .education-workspace-title > div > p {
  font-size: .88rem !important;
  line-height: 1.4 !important;
  margin: 2px 0 0 !important;
  opacity: .82 !important;
}
html body .app .network-workspace-head .eyebrow,
html body .app .education-workspace-head .eyebrow { display: none !important; }
html body .app .network-mini-stats,
html body .app .education-mini-stats { flex: 0 0 auto !important; }
/* Title takes the slack so stats + the important-note icon group on the right. */
html body .app .network-workspace-title,
html body .app .education-workspace-title { margin-right: auto !important; }
html body .app :where(.network-workspace-head, .education-workspace-head) .tool-head-actions {
  flex: 0 0 auto !important;
  align-self: center !important;
  margin: 0 !important;
}
/* === END MERGED TOOL HEADER === */

/* === RESULT / OUTPUT READABILITY (app-wide, both themes) =================
   A global rule forced ALL code/output text to light cyan (#e0f2fe), which is
   invisible on the light surfaces used in light mode. Plus several result panels
   relied on CSS variables that resolve to gray. Normalize so every result/output
   reads clearly in light AND dark. */

/* 1. Code & output text: dark ink on light surfaces in LIGHT mode. */
html body .app.light :where(.out, .bulk-row code, .api-code-box, .code-input textarea,
  .prompt-output-box, .ta.out, pre, code) {
  color: #1f2937 !important;
}
/* Output textareas / code boxes get a light surface (not a dark slab) in light mode. */
html body .app.light :where(.out, .api-code-box, .prompt-output-box, .code-input textarea,
  .ta.out, .out-wrap textarea, pre) {
  background: #f6f8fc !important;
  border-color: rgba(15, 23, 42, .12) !important;
}

/* 2. Stat cards: solid dark values + readable slate labels in light mode. */
html body .app.light :where(.stat-card, .stat-card strong, .stat-card b, .stat-card .stat-value) { color: #0f172a !important; }
html body .app.light .stat-label { color: #475569 !important; }

/* 3. Result boxes, formula/calc cards, empty panels, data & fx tables. */
html body .app.light :where(.result-box, .formula-card, .calc-card, .empty-panel) { color: #0f172a !important; }
html body .app.light :where(.result-box, .formula-card, .calc-card, .empty-panel)
  :where(b, strong, span, td, th, p, li, code, small) { color: #1f2937 !important; }
html body .app.light :where(.data-table, .fx-rate-table) { background: #ffffff !important; }
html body .app.light :where(.data-table, .fx-rate-table) th { background: #f1f5fc !important; color: #0f172a !important; }
html body .app.light :where(.data-table, .fx-rate-table) td { color: #334155 !important; }

/* 4. DARK mode: keep generic result/output text light & legible. */
html body .app.dark :where(.result, .result-card, .result-panel, .output-box, .out-wrap, .result-box,
  .data-table, .fx-rate-table) :where(b, strong, span, td, li, p, code, pre, small) { color: #e7def5 !important; }
html body .app.dark :where(.data-table, .fx-rate-table) th { color: #f3f8ff !important; }
/* === END RESULT / OUTPUT READABILITY === */

/* === THEME CONTRAST FIXES (token-level, both themes) ====================
   Repairs for hardcoded colors that ignored the theme and a missing token.
   Goal: WCAG AA in light AND dark with no per-page patches. */

/* (a) --muted was only defined inside one obscure theme, so var(--muted)
   resolved to inherited text (light-on-light in dark mode). Define it for
   both themes so every consumer (.finding-card p, .stat-label, etc.) adapts. */
html body .app.light { --muted: #556174; }
html body .app.dark  { --muted: #9eb1cf; }

/* (b) Severity finding cards: light-only white gradients had no dark override,
   so the token-driven heading/body text turned light → invisible on white.
   Give each severity a theme-tinted surface that keeps text readable in dark. */
html body .app.dark .finding-card.sev-critical { background: linear-gradient(180deg, rgba(185,28,28,.20), rgba(20,18,44,.55)) !important; border-color: #f87171 !important; }
html body .app.dark .finding-card.sev-high     { background: linear-gradient(180deg, rgba(239,68,68,.16), rgba(20,18,44,.55)) !important; border-color: #fb923c !important; }
html body .app.dark .finding-card.sev-medium   { background: linear-gradient(180deg, rgba(245,158,11,.16), rgba(20,18,44,.55)) !important; border-color: #fbbf24 !important; }
html body .app.dark .finding-card.sev-low      { background: linear-gradient(180deg, rgba(96,165,250,.16), rgba(20,18,44,.55)) !important; border-color: #60a5fa !important; }
html body .app.dark .finding-card h4 { color: #f4f7fb !important; }

/* (c) Config diff status badges: the "mismatch" text (#92400e) stayed dark on
   a dark badge in dark mode. Use light amber text in dark for readability. */
html body .app.dark .config-mismatch .config-status { color: #fcd34d !important; }
html body .app.dark .config-same .config-status     { color: #6ee7a8 !important; }
html body .app.dark .config-missing-a .config-status,
html body .app.dark .config-missing-b .config-status { color: #fda4af !important; }

/* (d) Calculator "danger" key: light-pink slab in dark → theme-tinted. */
html body .app.dark .calc-pad button.danger { background: rgba(239,68,68,.16) !important; color: #fda4af !important; }

/* (e) Error/404 chips: light-only fills get dark variants for polish. */
html body .app.dark .app-error-icon { background: rgba(239,68,68,.18) !important; color: #fda4af !important; }
html body .app.dark .not-found-code { background: rgba(99,102,241,.20) !important; color: #c7d2fe !important; }

/* (f) Footer: it renders on a dark gradient in dark mode, but links used
   var(--dv-blue-muted) (#5f7088 ≈ 3.8:1) and the brand text was near-white on a
   light footer in light mode. Make footer text/links AA in both themes. */
html body .app.dark .footer a,
html body .app.dark .footer .footer-info-link,
html body .app.dark .footer .footer-actions a { color: #c3d0ea !important; }
html body .app.dark .footer a:hover,
html body .app.dark .footer .footer-info-link:hover,
html body .app.dark .footer .footer-actions a:hover { color: #ffffff !important; }
html body .app.dark .footer :where(.footer-sub, .footer-note, .footer-address,
  .footer-bottom span, .footer-bottom, .footer-column span, .footer-trust-compact,
  .footer-trust-compact span, .footer-chip-row span) { color: #aeb9d3 !important; }
html body .app.dark .footer :where(.footer-brand, .footer-brand strong, .footer-head,
  .footer-logo-mark, .footer-brand-lockup strong) { color: #f4f7fb !important; }
/* Light mode: brand/heading text must be dark on the light footer surface. */
html body .app.light .footer :where(.footer-brand, .footer-brand strong, .footer-head,
  .footer-brand-lockup strong, .footer-logo-mark) { color: #0f172a !important; }

/* (g) Header brand hover-tooltip: white bg in light mode but near-white text
   (only the dark variant was themed). Dark text on the light tooltip. */
html body .app.light .tv-brand-tooltip,
html body .app.light .tv-brand-tooltip strong { color: #0f172a !important; }
html body .app.light .tv-brand-tooltip small { color: #64748b !important; }

/* (h) Blog disclaimer callout: fixed cream background, but body text inherited a
   light color in dark mode → invisible. Theme it as a dark amber callout. */
html body .app.dark .blog-disclaimer {
  background: rgba(120, 53, 15, .28) !important;
  border-color: rgba(251, 191, 36, .30) !important;
}
html body .app.dark .blog-disclaimer,
html body .app.dark .blog-disclaimer :where(p, span, strong, a, li) { color: #fcd34d !important; }

/* (i) MudAlert: the global rule hardcodes a DARK navy background for every theme
   but uses theme text color, so in light mode alerts were dark-bg + dark-text
   (invisible). Give light-mode alerts light surfaces + dark text. App-wide. */
html body .app.light .mud-alert {
  background: #eef3fb !important;
  border-color: rgba(15, 23, 42, .12) !important;
  color: #0f172a !important;
}
html body .app.light .mud-alert .mud-alert-message,
html body .app.light .mud-alert .mud-alert-message > *,
html body .app.light .mud-alert .mud-icon-root { color: #0f172a !important; }
html body .app.light .mud-alert-severity-success,
html body .app.light .mud-alert-outlined-success { background: #e8f8ee !important; border-color: rgba(16,185,129,.35) !important; }
html body .app.light .mud-alert-severity-warning,
html body .app.light .mud-alert-outlined-warning { background: #fff7e6 !important; border-color: rgba(217,119,6,.35) !important; }
html body .app.light .mud-alert-severity-error,
html body .app.light .mud-alert-outlined-error { background: #fdecec !important; border-color: rgba(220,38,38,.35) !important; }
html body .app.light .mud-alert-severity-info,
html body .app.light .mud-alert-outlined-info { background: #eaf2ff !important; border-color: rgba(37,99,235,.30) !important; }

/* (j) Config diff "missing" status pill: light red (#ef4444) on light-pink badge
   was 3.08:1. Darken the text for AA on the pink badge in light mode. */
html body .app.light .config-missing-a .config-status,
html body .app.light .config-missing-b .config-status { color: #b91c1c !important; }

/* (k) ROOT TOKEN GAP: the default light theme (theme-light) never defined the
   --tv-* family, so components using var(--tv-ink/--tv-muted/--tv-accent)
   inherited the DARK-theme values (near-white ink, cyan accent) on white
   surfaces — e.g. the library "menu hub note" heading and category "View menu"
   links. Define the light --tv-* set. Scoped to .theme-light so the named light
   themes (aurora/pearl/royal) keep their own palettes. */
html body .app.light.theme-light {
  --tv-ink: #101624;
  --tv-muted: #667085;
  --tv-accent: #315cf6;
  --tv-accent-2: #0f9f8f;
  --tv-page: #f7f8fb;
  --tv-surface: #ffffff;
  --tv-surface-strong: #ffffff;
  --tv-soft: #eef2f7;
  --tv-line: rgba(16, 24, 40, .10);
}
/* A link-color rule paints these cyan/near-white directly (out-specifying the
   token), so pin them explicitly for light mode: the library "menu hub note"
   heading and the category "View … menu" links. */
html body .app.light .tv-category-room-more { color: var(--room-a, #2563eb) !important; }
/* Some category tone colors sit just under AA on white; darken the hue ~30%
   in light mode (keeps the category color identity, falls back if unsupported). */
html body .app.light .tv-category-room-more { color: color-mix(in srgb, var(--room-a, #2563eb) 70%, #000) !important; }
html body .app.light .tv-menu-hub-note b { color: #0f172a !important; }
html body .app.light .tv-menu-hub-note p,
html body .app.light .tv-menu-hub-note > span { color: #475569 !important; }

/* (l) Workflow chips (category page "useful workflows"): cyan accent that fails
   on the light card in light mode. Use a readable accent per theme. */
html body .app.light .tool-workflow-chip { color: #1d4ed8 !important; }
html body .app.dark .tool-workflow-chip { color: #9ec5ff !important; }

/* (m) Category insight card links are light pills with cyan text in BOTH themes
   (the pill stays light even in dark mode) → cyan on white fails. Dark blue text. */
html body .app .category-insight-card a,
html body .app .category-mini-links a { color: #1d4ed8 !important; }

/* (n) Indian Income Tax calculator: the entire .tax-* steps + results area is
   dark-first (dark navy / gradient cards with light text). On the light page the
   opaque ones become heavy dark islands and the translucent ones wash out so the
   light text vanishes. Re-skin as light surfaces with dark text in LIGHT mode.
   Dark mode is unaffected (it was designed dark). */
html body .app.light :where(.tax-step-card, .tax-result-card) {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, .10) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .06) !important;
}
html body .app.light :where(.tax-badge, .tax-chart, .tax-report-actions, .tax-metric,
  .tax-explain-strip > div, .tax-summary-list > div) {
  background: #f4f7fb !important;
  border-color: rgba(15, 23, 42, .10) !important;
}
html body .app.light .tax-bar-track { background: #e6ecf5 !important; }
html body .app.light :where(.tax-overall-summary, .tax-cross-check) {
  background: #eef9f1 !important;
  border-color: rgba(22, 163, 74, .28) !important;
}
html body .app.light .tax-cross-check.warning {
  background: #fff7e6 !important;
  border-color: rgba(217, 119, 6, .30) !important;
}
/* Text → readable dark in light mode */
html body .app.light :where(.tax-step-card, .tax-result-card, .tax-badge, .tax-chart,
  .tax-report-actions, .tax-metric, .tax-overall-summary, .tax-cross-check,
  .tax-explain-strip, .tax-summary-list, .tax-chart-head, .tax-step-head)
  :where(h2, h3, h4, strong, b) { color: #0f172a !important; }
html body .app.light :where(.tax-step-card, .tax-result-card, .tax-badge, .tax-chart,
  .tax-report-actions, .tax-metric, .tax-overall-summary, .tax-cross-check,
  .tax-explain-strip, .tax-summary-list, .tax-chart-head, .tax-step-head)
  :where(span, em, p, small, li) { color: #475569 !important; }
/* The big headline figure was lime (#d9f99d → invisible on light) → dark green. */
html body .app.light .tax-overall-summary strong { color: #15803d !important; }
/* Step number chip + caret + status icons readable on light surfaces */
html body .app.light .tax-step-number {
  background: linear-gradient(135deg, #e0edff, #eaf2ff) !important;
  border-color: rgba(37, 99, 235, .30) !important;
  color: #1d4ed8 !important;
}
html body .app.light .tax-step-head::after { border-color: #2563eb !important; }
html body .app.light .tax-cross-check .mud-icon-root { color: #15803d !important; }
html body .app.light .tax-cross-check.warning .mud-icon-root { color: #b45309 !important; }
html body .app.light .tax-report-actions .mud-icon-root { color: #2563eb !important; }

/* (o) MoneyField "amount in words" helper (shared across finance calculators):
   hardcoded light-mint background regardless of theme → light text on light tint
   in dark mode. Give it a dark green-tinted surface + light text in dark mode. */
html body .app.dark .money-field-words {
  background: rgba(16, 185, 129, .10) !important;
  border-color: rgba(52, 211, 153, .26) !important;
  color: #cbd5e1 !important;
}

/* (p) Indian Income Tax calculator — layout: inputs LEFT, results RIGHT, no inner
   scroll under any section (page scrolls as one), header merged into the tool,
   disclaimer note tight under the header. */

/* Merge the page header into the tool: flat, no separate card, tight gap. */
html body .app .tax-fullscreen-page > .tool-head {
  padding: 0 0 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body .app .tax-fullscreen-page > .breadcrumb { margin-bottom: 4px !important; }
/* Disclaimer / info sits directly under the header icon + title. */
html body .app .tax-fullscreen-page .mud-alert.mb-4 { margin: 2px 0 12px !important; }

/* Inputs left / results right at ≥900px (single column below). */
@media (min-width: 900px) {
  html body .app .tax-axis-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
  }
  html body .app .tax-axis-layout > .mud-grid-item {
    max-width: 100% !important;
    flex: 1 1 auto !important;
    padding: 0 !important;
  }
}

/* No inner scrollbars under any section — let the whole page scroll. */
html body .app .tax-fullscreen-page .tax-form-panel,
html body .app .tax-fullscreen-page .tax-results-column {
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}
html body .app .tax-fullscreen-page .tax-axis-layout { min-height: 0 !important; }
html body .app .tax-results-column { position: static !important; }

/* Light mode: the form panel itself was a dark gradient — make it a light surface. */
html body .app.light .tax-axis-layout .tax-form-panel {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, .10) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .06) !important;
}
html body .app.light .tax-axis-layout .tax-panel-title .mud-typography-h5,
html body .app.light .tax-axis-layout .tax-panel-title .mud-typography-overline { color: #0f172a !important; }
html body .app.light .tax-axis-layout .tax-panel-title .mud-typography-body2 { color: #475569 !important; }

/* (q) Arcade games: the active game arena is designed as a dark neon card with
   light text, but a light-mode mud-paper/tool-card rule was whitening it in
   light mode, leaving the game title + description invisible. Keep the arena
   (and its score card) dark in light mode too, as intended for the game. */
/* The high-specificity selector (0,6,2) beats the global
   .app.light .mud-paper:not()():() rule (0,6,0) that whitens all panels. */
/* Light theme: the games arena follows the light theme (a lone dark "stage" looked
   broken against the rest of the light app, and its near-white inner stats were
   unreadable on the white inner cards). Dark theme keeps its dark stage via the
   base .app rule. */
html body .app.light .games-active-arena.mud-paper.tool-card.automation-panel,
html body .app.light .games-active-arena {
  border-color: rgba(15, 23, 42, .12) !important;
  background: linear-gradient(180deg, #ffffff, #f3f7ff) !important;
  color: #0f172a !important;
  box-shadow: 0 16px 44px rgba(21, 39, 87, .10) !important;
}
html body .app.light .games-active-arena .passport-editor-box,
html body .app.light .games-rps-score-card.mud-paper,
html body .app.light .games-rps-score-card {
  border-color: rgba(15, 23, 42, .12) !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 10px 30px rgba(21, 39, 87, .08) !important;
}
html body .app.light .games-active-arena .tool-subhead h3,
html body .app.light .games-active-arena .passport-editor-head b { color: #0f172a !important; }
html body .app.light .games-active-arena .tool-subhead p,
html body .app.light .games-active-arena .passport-editor-head small,
html body .app.light .games-active-arena .automation-small,
html body .app.light .games-active-arena .automation-small span { color: #334155 !important; }
/* Single-game (deep-linked) arena header: title left, Full screen button right. */
html body .app .games-active-arena .games-arena-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
html body .app .games-active-arena .games-arena-head > div { min-width: 0 !important; }
html body .app .games-active-arena .games-arena-fullscreen { flex: 0 0 auto !important; }

/* Rock Paper Scissors — follow the light theme (the choice buttons and score
   cells used dark navy gradients with near-white text, which looked broken on
   the light arena). Dark theme keeps the dark arcade look via the base rules. */
html body .app.light .games-rps-choice {
    border-color: var(--bd) !important;
    background: linear-gradient(180deg, #ffffff, #f3f7ff) !important;
    color: var(--tx) !important;
}
html body .app.light .games-rps-choice:hover,
html body .app.light .games-rps-choice:focus-visible {
    border-color: var(--ac) !important;
    background: linear-gradient(180deg, #ffffff, var(--bg4)) !important;
}
html body .app.light .games-rps-choice span { background: var(--acl) !important; color: var(--ac) !important; }
html body .app.light .games-rps-choice b { color: var(--tx) !important; }
html body .app.light .games-rps-score-row span { border-color: var(--bd) !important; background: var(--bg3) !important; }
html body .app.light .games-rps-score-row small { color: var(--tx2) !important; }
html body .app.light .games-rps-score-row strong { color: var(--tx) !important; }

/* === TYPING TEST (typing.com-style: levels, timer, live highlighting) === */
html body .app .typing-test { display: grid; gap: 14px; margin-top: 4px; }

html body .app .typing-toolbar { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
html body .app .typing-opt-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html body .app .typing-opt-label {
    font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--tx2);
}
html body .app .typing-opt {
    appearance: none; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 700; line-height: 1;
    border: 1px solid var(--bd); background: var(--bg3); color: var(--tx);
    border-radius: var(--radius-pill); padding: 7px 15px;
    transition: background .15s, border-color .15s, color .15s;
}
html body .app .typing-opt:hover { border-color: var(--ac); }
html body .app .typing-opt.is-active { background: var(--acl); border-color: var(--ac); color: var(--ac); }

html body .app .typing-stats { display: flex; flex-wrap: wrap; gap: 10px; }
html body .app .typing-stat {
    flex: 1 1 0; min-width: 92px; display: grid; gap: 2px; justify-items: start;
    padding: 10px 14px; border: 1px solid var(--bd); border-radius: var(--radius-sm); background: var(--bg3);
}
html body .app .typing-stat-label {
    font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--tx2);
}
html body .app .typing-stat b { font-size: 1.4rem; font-weight: 800; color: var(--tx); font-variant-numeric: tabular-nums; }

html body .app .typing-surface {
    font-family: var(--m); font-size: 1.3rem; line-height: 2; letter-spacing: .3px;
    color: var(--tx2); background: var(--bg3); border: 1px solid var(--bd); border-radius: var(--r);
    padding: 18px 20px; max-height: 244px; overflow-y: auto; outline: none; cursor: text;
    user-select: none; white-space: pre-wrap; word-break: break-word;
}
html body .app .typing-surface.is-focused { border-color: var(--ac); box-shadow: 0 0 0 3px var(--acl); }
html body .app .typing-surface .tc { border-radius: 3px; }
html body .app .typing-surface .tc.is-correct { color: var(--tx) !important; }
html body .app .typing-surface .tc.is-incorrect { color: var(--rd) !important; background: rgba(210, 60, 60, .16); }
html body .app .typing-surface .tc.is-incorrect.tc-space { background: rgba(210, 60, 60, .30); }
html body .app .typing-surface .tc.is-current { background: var(--acl); box-shadow: -2px 0 0 0 var(--ac); }
html body .app .typing-surface.is-finished { opacity: .9; }

html body .app .typing-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between;
}
html body .app .typing-hint { color: var(--tx2); font-size: .82rem; }
/* === END TYPING TEST === */

/* (r) Currency converter: real country-flag icons (flagcdn SVG) instead of the
   regional-indicator emoji (which render as bare letters on Windows). */
html body .app .fx-flag {
  width: 24px;
  height: 18px;
  border-radius: 4px;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .14);
}
html body .app .fx-flag-fallback {
  width: auto;
  min-width: 24px;
  height: 18px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(99, 102, 241, .14);
  color: #475569;
  font-size: .58rem;
  font-weight: 800;
  font-style: normal;
  box-shadow: none;
}
html body .app.dark .fx-flag-fallback { color: #c7d3ea !important; background: rgba(148, 163, 184, .20) !important; }
/* The picker's round glossy emoji badge becomes a plain holder for the flag. */
html body .app .fx-currency-logo,
html body .app .fx-currency-option.selected .fx-currency-logo {
  background: transparent !important;
  box-shadow: none !important;
}
/* The rate display + matrix code column <strong> were near-white on the light
   surfaces (the dark From/To pickers are intentionally light text, untouched). */
html body .app.light .fx-rate-head strong,
html body .app.light .fx-rate-table strong,
html body .app.light .fx-matrix strong { color: #0f172a !important; }
/* Trigger label colors are set per theme below (light surface in light mode). */

/* Dropdown menu was a translucent dark panel in every theme — see-through and
   muddy in light mode. Make it a SOLID surface per theme with readable options. */
html body .app.light .fx-currency-menu {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .12) !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .16) !important;
}
html body .app.dark .fx-currency-menu {
  background: #0b1830 !important;
  border: 1px solid rgba(96, 165, 250, .22) !important;
}
/* Option text readable on the per-theme menu surface. */
html body .app.light .fx-currency-option,
html body .app.light .fx-currency-copy strong { color: #0f172a !important; }
html body .app.light .fx-currency-copy small { color: #475569 !important; }
html body .app.dark .fx-currency-copy strong { color: #f3f8ff !important; }
html body .app.light .fx-currency-option:hover { background: rgba(37, 99, 235, .08) !important; }
html body .app.dark .fx-currency-option { color: #eaf1ff !important; }
html body .app.dark .fx-currency-copy small { color: #c3d0ea !important; }
html body .app.dark .fx-currency-option:hover { background: rgba(96, 165, 250, .14) !important; }

/* Dropdown search bar: the global "uniform form controls" rule forced
   min-height:46/padding/radius on the input and a label rule stacked it
   (icon above input) → double "linings" + clipped corners. Force a single
   inline pill (icon left, borderless transparent input filling the rest). */
html body .app .fx-currency-menu .fx-currency-search {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
}
html body .app.light .fx-currency-menu .fx-currency-search {
  background: #f4f7fb !important;
  border: 1px solid rgba(15, 23, 42, .14) !important;
}
html body .app.dark .fx-currency-menu .fx-currency-search {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(96, 165, 250, .24) !important;
}
html body .app .fx-currency-menu .fx-currency-search .mud-icon-root {
  flex: 0 0 auto !important;
  font-size: 1.15rem !important;
}
html body .app.light .fx-currency-menu .fx-currency-search .mud-icon-root { color: #64748b !important; }
html body .app.dark .fx-currency-menu .fx-currency-search .mud-icon-root { color: #9eb1cf !important; }
/* High specificity to beat the uniform-form-controls rule (min-height:46 etc.). */
html body .app .fx-currency-picker .fx-currency-menu .fx-currency-search input:not([type="hidden"]) {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-width: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
html body .app.light .fx-currency-picker .fx-currency-search input { color: #0f172a !important; }
html body .app.dark .fx-currency-picker .fx-currency-search input { color: #f3f8ff !important; }
html body .app.light .fx-currency-search input::placeholder { color: #94a3b8 !important; }
html body .app.dark .fx-currency-search input::placeholder { color: #8da3c4 !important; }

/* (s) Flatten the ToolLayout header into the tool, like the dns-lookup suite:
   no separate card (no bg/border/radius/shadow/blur, not sticky), compact, with a
   tight gap to the body. The header is `.focused-tool-page > .tool-head`. */
html body .app.tool-route .tool-page.focused-tool-page > header.tool-head.tool-head-pro,
html body .app .tool-page.focused-tool-page > header.tool-head.tool-head-pro {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  position: static !important;
  padding: 2px 0 4px !important;
  margin: 0 0 -26px !important;
}
html body .app .focused-tool-page > .tool-head::before { display: none !important; }

/* (t) The --dv-form-* tokens were defined dark for EVERY theme, so the currency
   picker (and other controls using var(--dv-form-bg)) showed a dark box in light
   mode with the amount field as a clipped white box inside it. Give light-mode
   form tokens light values so the control matches the theme. */
html body .app.light {
  --dv-form-bg: #ffffff;
  --dv-form-bg-soft: #f4f7fb;
  --dv-form-border: rgba(15, 23, 42, .16);
  --dv-form-border-hover: rgba(37, 99, 235, .45);
  --dv-form-focus: rgba(37, 99, 235, .70);
  --dv-form-text: #0f172a;
  --dv-form-muted: #51607a;
}
/* Currency trigger labels follow the (now theme-correct) surface. */
html body .app.light .fx-currency-trigger .fx-currency-selected strong,
html body .app.light .fx-input-row > input { color: #0f172a !important; }
html body .app.light .fx-currency-trigger .fx-currency-selected small { color: #51607a !important; }
html body .app.light .fx-currency-trigger .mud-icon-root { color: #64748b !important; }
html body .app.dark .fx-currency-trigger .fx-currency-selected strong { color: #f3f8ff !important; }
html body .app.dark .fx-currency-trigger .fx-currency-selected small { color: #c3d0ea !important; }

/* (u) Remove the inner divider line inside the amount+currency box — it ran into
   the box's rounded corners and read as a "cutting" border line. The flag + code
   already separate the currency segment, so the box is now one clean field. */
html body .app .fx-input-row .fx-currency-picker,
html body .app .fx-input-row > select { border-left: 0 !important; }
/* The amount field's white fill started exactly at the row's left edge, painting
   over the pill's faint left border + rounded corners (looked "cut"). Inset the
   pill's contents a few px so the border is fully visible on every side, and
   round the field's left corners to follow the pill.
   NOTE: overflow MUST stay visible — the currency picker's dropdown menu is a
   descendant of .fx-input-row, and overflow:hidden here clips the options list so
   only the search box shows. The input's own border-radius (below) + padding keep
   the corners clean without needing to clip the row. */
html body .app .fx-input-row {
  padding: 3px 5px !important;
  overflow: visible !important;
}
html body .app .fx-input-row > input {
  border-radius: 15px 0 0 15px !important;
  box-shadow: none !important;
}

/* (v) "Common mistakes" / examples lists: a global ul reset left the markers with
   no indent, so the bullets rendered OUTSIDE the card. Give the lists a left pad
   so the bullets sit inside their box. */
html body .app :where(.tool-example-section, .tool-content-section, .tool-meta-grid, .how-to) :where(ul, ol) {
  margin: 6px 0 0 !important;
  padding-left: 1.35rem !important;
  list-style-position: outside !important;
}
html body .app :where(.tool-example-section, .tool-content-section, .tool-meta-grid, .how-to) :where(ul, ol) li {
  margin: 4px 0 !important;
  padding-left: 2px !important;
}
/* === END THEME CONTRAST FIXES === */

/* === TOOLPAGELAYOUT — header feature badges (DNS-style, tokens only) === */
html body .app .tool-head .tool-feature-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-3, 12px) !important;
  align-items: center !important;
  justify-self: end !important;
  margin-right: 44px !important; /* clear the absolute info (i) button */
}
html body .app .tool-head .tool-feature-badge {
  min-width: 110px;
  padding: var(--space-3, 12px) var(--space-4, 14px);
  border: 1px solid var(--bd);
  border-radius: var(--radius-sm, 12px);
  background: var(--bg2);
  text-align: center;
}
html body .app .tool-head .tool-feature-badge b {
  display: block;
  color: var(--tx);
  font-size: var(--fs-md, 1rem);
  font-weight: 800;
}
html body .app .tool-head .tool-feature-badge span {
  display: block;
  margin-top: 2px;
  color: var(--tx2);
  font-size: var(--fs-xs, .78rem);
}
@media (max-width: 760px) {
  html body .app .tool-head .tool-feature-badges { justify-self: start !important; margin-right: 0 !important; }
}
/* === END TOOLPAGELAYOUT FEATURE BADGES === */

/* === CHECKBOX COLOUR + VERTICAL-FLOW TEXT CONTRAST (token-based, both themes) === */
/* Native checkboxes/radios: use the design accent instead of a hardcoded cyan. */
html body .app :where(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--ac) !important;
}
/* MudBlazor checkboxes: align the box + label to the design tokens. */
html body .app .mud-checkbox .mud-icon-root { color: var(--tx2); }
html body .app .mud-checkbox.mud-checked .mud-icon-root,
html body .app .mud-checkbox .mud-checkbox-true .mud-icon-root { color: var(--ac) !important; }
html body .app .mud-checkbox .mud-checkbox-label,
html body .app .mud-checkbox .mud-typography-body1 { color: var(--tx) !important; }
/* The MudCheckBox/MudRadio internal icon-button was picking up the dark
   outlined/text-button background (rgba(13,21,48,.72)) and rendering as a solid
   dark box on the light theme. Keep the control background transparent so only
   the tick + label show. */
html body .app .mud-checkbox .mud-button-root,
html body .app .mud-checkbox .mud-icon-button,
html body .app .mud-checkbox button.mud-button-root,
html body .app .mud-radio .mud-button-root,
html body .app .mud-radio .mud-icon-button {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Inline checkbox label: checkbox + its text on one row, vertically centred
   (overrides the .form-col label grid that otherwise stacks the box above text). */
html body .app label.check-inline,
html body .app .form-col label.check-inline {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-height: 0 !important;
    margin: 2px 0 !important;
    color: var(--tx) !important;
    cursor: pointer;
}
html body .app label.check-inline > input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0 !important;
}

/* Same-page workflow intro: previous near-white / cyan text was invisible on the
   light theme. Use primary + accent text tokens so it reads in both themes. */
html body .app .pdf-workflow-intro span,
html body .app .security-workflow-intro span { color: var(--ac) !important; }
html body .app .pdf-workflow-intro strong,
html body .app .security-workflow-intro strong { color: var(--tx) !important; }
/* === END CHECKBOX + WORKFLOW INTRO CONTRAST === */

/* === INFO-ICON POPUP (UniversalToolPage): tool guidance moved behind the (i) === */
html body .app .tool-info-pop {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 320px;
    text-align: left;
}
html body .app .tool-info-pop p {
    margin: 0;
    font-size: .82rem;
    line-height: 1.45;
}
html body .app .tool-info-pop p b {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .75;
    margin-bottom: 2px;
}
/* UniversalToolPage header: dns-lookup-style right cluster (feature cards + (i))
   laid out in the grid's third column so the (i) no longer wraps to a new row. */
html body .app .focused-tool-page .tool-head.tool-head-pro .tool-head-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    justify-self: end !important;
}
html body .app .focused-tool-page .tool-head.tool-head-pro .tool-head-right .tool-feature-badges {
    margin-right: 0 !important;
    justify-self: auto !important;
}
html body .app .focused-tool-page .tool-head.tool-head-pro .tool-head-right .tool-head-actions {
    position: static !important;
    top: auto !important;
    right: auto !important;
    grid-column: auto !important;
    margin: 0 !important;
}
/* Drop the right-padding reserved for the old absolute (i) on universal pages. */
html body .app .focused-tool-page .tool-head.tool-head-pro > div:nth-child(2) {
    padding-right: 0 !important;
}
/* Feature-card label was inheriting a near-white header colour and vanished on
   light theme — force the primary text token. */
html body .app .tool-head .tool-feature-badge b { color: var(--tx) !important; }
/* === END INFO-ICON POPUP === */

/* === LIGHT-THEME TEXT TOKENS (app-wide readability fix) ===
   The "dark SaaS shell" :root block defines --text-primary/secondary/soft as
   near-white (dark-first defaults). Only theme-pure-white overrode them, so on
   the regular light theme every `.app b, .app strong, .app h1..h6` rule that
   resolves var(--text-primary) rendered near-white on white and was unreadable.
   Give the light theme proper dark text tokens. Dark themes (.dark) keep the
   near-white :root defaults untouched. */
html.light, body.light, body:has(.app.light), .app.light,
html.theme-light, body.theme-light, .app.theme-light {
    --text-primary: #0f172a !important;
    --text-secondary: #475569 !important;
    --text-soft: #334155 !important;
}
/* === END LIGHT-THEME TEXT TOKENS === */

/* === TWO-COLUMN MUDGRID FIX (input left / output right) ===
   A spacing override added `gap: clamp(6px,1vw,12px)` to tool-page MudGrids.
   MudGrid columns use flex-basis percentages (lg-6 => 50%) and already get their
   gutter from per-item padding, so the extra gap pushed 50% + 50% + gap past
   100% and wrapped every two-column layout (e.g. input/output) into a single
   stacked column. Remove the redundant gap so lg-6 columns sit side by side. */
html body .app.inner-route .mud-grid,
html body .app.tool-route .mud-grid,
html body .app .focused-tool-page .mud-grid {
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
}
/* === END TWO-COLUMN MUDGRID FIX === */

/* === TOOLLAYOUT HEADER = DNS-LOOKUP SCALE ===
   A leftover flatten override shrank the ToolLayout header h1 to 13px (and the
   icon/subtitle), so it no longer matched the DNS-lookup header. Restore the
   DNS-lookup typography: readable title, ~1rem subtitle, 46px rounded icon badge. */
html body .app .focused-tool-page > header.tool-head.tool-head-pro h1,
html body .app.tool-route .focused-tool-page > header.tool-head.tool-head-pro h1 {
    font-size: clamp(1.3rem, 2vw, 1.6rem) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin: 0 0 .25rem !important;
}
html body .app .focused-tool-page > header.tool-head.tool-head-pro > div > p,
html body .app.tool-route .focused-tool-page > header.tool-head.tool-head-pro > div > p {
    font-size: clamp(.9rem, 1vw, 1rem) !important;
    line-height: 1.4 !important;
    color: var(--tx2) !important;
}
/* Match the DNS-lookup icon badge size/shape; leave the background/colour to the
   shared .tool-title-icon styling so both headers' icons render identically. */
html body .app .focused-tool-page > header.tool-head.tool-head-pro .tool-title-icon,
html body .app.tool-route .focused-tool-page > header.tool-head.tool-head-pro .tool-title-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    flex: 0 0 46px !important;
    border-radius: 16px !important;
}
html body .app .focused-tool-page > header.tool-head.tool-head-pro .tool-title-icon .mud-icon-root {
    font-size: 1.6rem !important;
}
/* === END TOOLLAYOUT HEADER SCALE === */

/* === NETWORK TOOL SPLIT LAYOUT (input left / results right, equal size) === */
html body .app .tool-step-panel.tool-step-panel-split {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    align-items: stretch !important;
}
/* Workflow intro spans the full width above the two columns. */
html body .app .tool-step-panel.tool-step-panel-split > .pdf-workflow-intro,
html body .app .tool-step-panel.tool-step-panel-split > .security-workflow-intro {
    grid-column: 1 / -1 !important;
}
/* Equal-height panels; let the editor + output areas fill the card. */
html body .app .tool-step-panel.tool-step-panel-split > .tool-step-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}
html body .app .tool-step-panel.tool-step-panel-split > .tool-step-card > textarea.ta,
html body .app .tool-step-panel.tool-step-panel-split > .tool-step-card .out-wrap {
    flex: 1 1 auto !important;
}
html body .app .tool-step-panel.tool-step-panel-split > .tool-step-card .out-wrap {
    display: flex !important;
    flex-direction: column !important;
}
html body .app .tool-step-panel.tool-step-panel-split > .tool-step-card .out-wrap textarea.out {
    flex: 1 1 auto !important;
    min-height: 220px !important;
}
/* Editor-style control toolbar pinned to the top of the input panel. */
html body .app .tool-editor-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    padding-bottom: 12px !important;
    margin: 4px 0 14px !important;
    border-bottom: 1px solid var(--bd) !important;
}
html body .app .tool-editor-toolbar .btn-p { margin: 0 !important; }
html body .app .tool-editor-toolbar .check-inline { margin: 0 !important; font-size: .86rem !important; }
/* Result toolbar actions (PDF + copy). */
html body .app .out-bar-actions { display: flex; align-items: center; gap: 8px; }
html body .app .out-pdf-btn { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 880px) {
    html body .app .tool-step-panel.tool-step-panel-split {
        grid-template-columns: 1fr !important;
    }
}
/* === END NETWORK TOOL SPLIT LAYOUT === */

/* === HELP POPUP FOOTER CONTRAST (light theme) ===
   The guide popup panel is light (#f8fafc) on the light theme, but the footer
   "Need more help?" / "Contact us" links and the "Clear" button used the
   dark-theme light colours (#b8c7dc / #a5f3fc), which were unreadable on white.
   Use readable muted + accent colours on the light theme; dark theme keeps the
   light text since its panel is dark. */
html body .app.light .floating-contact-foot span,
html body .app.light .floating-contact-clear {
    color: #556174 !important;
}
html body .app.light .floating-contact-foot a {
    color: #2f5cff !important;
}
html body .app.light .floating-contact-foot a:hover,
html body .app.light .floating-contact-clear:hover,
html body .app.light .floating-contact-clear:focus-visible {
    color: #1f49cf !important;
}
/* === END HELP POPUP FOOTER CONTRAST === */

/* === UI/UX MODERNIZATION SWEEP (audit fixes, additive & low-risk) === */
/* 1. Result tables must scroll on small screens instead of being clipped by
      body{overflow-x:clip}. Raw <table class="dtable"/"data-table"> ignore
      overflow on themselves unless made block-level scroll containers. */
@media (max-width: 900px) {
    html body .app .dtable,
    html body .app .data-table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100% !important;
    }
}
/* 2. Comfortable touch targets (WCAG 2.5.5) on touch devices. */
@media (pointer: coarse) {
    html body .app .btn-p,
    html body .app .btn-s,
    html body .app .btn,
    html body .app .floating-contact-send {
        min-height: 44px !important;
    }
    html body .app .tool-action-btn {
        width: 44px !important;
        height: 44px !important;
    }
}
/* 3. Discernible disabled state for the native button family (was browser default). */
html body .app .btn-p:disabled,
html body .app .btn-s:disabled,
html body .app .btn:disabled,
html body .app .btn-p[disabled],
html body .app .btn-s[disabled],
html body .app .btn[disabled] {
    opacity: .55 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}
/* 4. Prevent multi-column tool grids from overflowing very small phones. */
@media (max-width: 400px) {
    html body .app .tool-grid,
    html body .app .tool-grid-sm,
    html body .app .library-filters {
        grid-template-columns: 1fr !important;
    }
}
/* === END UI/UX MODERNIZATION SWEEP === */

/* === SHARED ToolMessage COMPONENT (token-based, both themes) === */
html body .app .tool-message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm, 12px);
    border: 1px solid var(--bd);
    background: var(--bg3);
    color: var(--tx);
    font-size: var(--fs-sm, .88rem);
    line-height: 1.45;
}
html body .app .tool-message .mud-icon-root { flex: 0 0 auto; margin-top: 1px; }
html body .app .tool-message-error { border-color: rgba(210,60,60,.35); color: var(--rd); background: rgba(210,60,60,.08); }
html body .app .tool-message-warning { border-color: rgba(180,120,20,.35); color: var(--tx); background: rgba(245,200,80,.12); }
html body .app .tool-message-success { border-color: rgba(20,128,74,.35); color: var(--gr); background: rgba(20,128,74,.08); }
html body .app .tool-message-info { border-color: var(--bd); color: var(--tx2); background: var(--bg3); }
/* === END SHARED ToolMessage COMPONENT === */

/* === PASSWORD GENERATOR display fix === */
/* The readout used input.ta (textarea styling) so a one-line password rendered
   in a ~100px box with the buttons stacked below. Lay it out as a single row
   with a proper single-line, prominent monospace field + inline actions. */
html body .app .pwd-disp {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    padding: 12px !important;
}
html body .app .pwd-disp input.ta,
html body .app .pwd-disp input[type="text"] {
    flex: 1 1 240px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 12px 14px !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 1.05rem !important;
    letter-spacing: .02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
html body .app .pwd-disp .copybtn,
html body .app .pwd-disp .btn-s { flex: 0 0 auto !important; }
/* Light-theme surfaces: .pwd-disp and .bulk-row used dark-navy backgrounds
   (rgba(2,6,23,.42) / rgba(15,29,62,.52)) that render as muddy gray on the light
   theme. Give them light token surfaces; dark theme keeps the dark fills. */
html body .app.light .pwd-disp {
    background: var(--bg3) !important;
    border-color: var(--bd) !important;
}
html body .app.light .bulk-row {
    background: var(--bg2) !important;
    border-color: var(--bd) !important;
}
html body .app.light .bulk-row code {
    background: var(--bg3) !important;
}
/* === END PASSWORD GENERATOR display fix === */

/* Tool body card had no inner padding, so loose content (not wrapped in an inner
   card) touched the card's left/top edge. Give it comfortable inset padding.
   Full-bleed exceptions (e.g. tax-fullscreen) keep their own padding:0 override. */
html body .app .focused-tool-page .tool-body {
    padding: clamp(16px, 2vw, 26px) !important;
}
/* === END TOOL BODY PADDING === */

/* Hash / number-base result rows: were display:block with dark-navy backgrounds
   (rgba(2,6,23,.36) list, rgba(8,13,35,.72) rows) that render gray on the light
   theme with dark text on a dark surface. Lay rows out properly and use light
   surfaces on the light theme (dark theme keeps its dark fills). */
html body .app .hash-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
}
html body .app .hash-row .hash-name { flex: 0 0 88px !important; }
html body .app .hash-row code {
    flex: 1 1 140px !important;
    min-width: 0 !important;
    overflow-x: auto !important;
}
html body .app.light .hash-list,
html body .app.light .diff-out,
html body .app.light .recovery-code-list {
    background: var(--bg3) !important;
    border-color: var(--bd) !important;
}
html body .app.light .hash-row {
    background: var(--bg2) !important;
    border-color: var(--bd) !important;
    color: var(--tx) !important;
}
html body .app.light .hash-row code { background: var(--bg3) !important; }
/* === END HASH ROW FIX === */

/* Display/preview panels (qr-preview, editor/output/input/preview panels,
   currency-card, search/filter/pagination) shared a dark-navy background
   (rgba(8,13,35,.72)) for both themes, so on the light theme they were dark boxes
   with unreadable text. Give the whole family light surfaces on the light theme;
   dark theme keeps the dark panels. */
html body .app.light .json-editor-panel,
html body .app.light .code-editor-panel,
html body .app.light .editor-panel,
html body .app.light .output-panel,
html body .app.light .input-panel,
html body .app.light .preview-panel,
html body .app.light .qr-preview,
html body .app.light .qr-options,
html body .app.light .currency-card,
html body .app.light .search-panel,
html body .app.light .filter-panel,
html body .app.light .pagination,
html body .app.light .pagination a,
html body .app.light .pagination button {
    background: var(--bg2) !important;
    border-color: var(--bd) !important;
    color: var(--tx) !important;
    box-shadow: none !important;
}
/* === END LIGHT PANEL FAMILY === */

/* QR colour preset swatches: the two-colour halves had no height (invisible) and
   a global [style*="background:#fff"] -> dark hack blanked the white halves. Give
   the halves size and keep the white half white on the light theme. */
html body .app .qr-preset {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
html body .app .qr-preset span {
    flex: 1 1 50% !important;
    align-self: stretch !important;
    height: auto !important;
    min-height: 34px !important;
    border-radius: 0 !important;
    display: block !important;
}
html body .app.light .qr-preset span[style*="#fff"],
html body .app.light .qr-preset span[style*="#FFF"],
html body .app.light .qr-preset span[style*="#f8fafc"] {
    background: #ffffff !important;
}
/* === END QR PRESET SWATCHES === */

/* QR size slider row */
html body .app .qr-size-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
html body .app .qr-size-row > label {
    font-weight: 700;
    color: var(--tx);
    flex: 0 0 auto;
}
html body .app .qr-size-row input[type="range"] {
    flex: 1 1 auto;
    min-width: 0;
}
html body .app .qr-size-row .qr-size-value {
    flex: 0 0 auto;
    min-width: 52px;
    text-align: right;
    font-weight: 700;
    color: var(--tx2);
}
/* === END QR SIZE SLIDER === */

/* MudTabs were painted dark navy (rgba(8,13,35,.82)) with --dv-app-text for both
   themes, so on the light theme the tab bar was a dark slab with dark-on-dark
   (unreadable) inactive tabs. Use light surfaces + readable text on the light
   theme; the active tab gets the accent. Dark theme keeps its dark tabs. */
html body .app.light .mud-tabs-tabbar {
    background: var(--bg3) !important;
    border-color: var(--bd) !important;
    color: var(--tx2) !important;
}
html body .app.light .mud-tab,
html body .app.light .mud-tab.mud-tab-active {
    background: transparent !important;
    color: var(--tx2) !important;
    border-color: var(--bd) !important;
}
html body .app.light .mud-tab.mud-tab-active { color: var(--ac) !important; }
html body .app.light .mud-tabs .mud-icon-button {
    background: transparent !important;
    color: var(--tx2) !important;
}
/* === END MUDTABS LIGHT THEME FIX === */

/* Mermaid studio: zoom controls + scrollable preview when zoomed. */
html body .app .mermaid-zoom-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
html body .app .mermaid-zoom-label {
    min-width: 48px;
    text-align: center;
    font-weight: 800;
    font-size: .82rem;
    color: var(--tx2);
}
html body .app .mermaid-preview-frame { overflow: auto !important; }
/* Zoom control buttons were picking up the dark button background on the light
   theme; render them as clean bordered light controls. */
html body .app.light .mermaid-zoom-bar .mud-icon-button,
html body .app.light .mermaid-zoom-bar .mud-button-root {
    background: var(--bg2) !important;
    color: var(--tx) !important;
    border: 1px solid var(--bd) !important;
}
html body .app.light .mermaid-zoom-bar .mud-icon-root { color: var(--tx) !important; }

/* Render the diagram from the top-left (was centred, hiding the start of large
   diagrams in the scroll frame). */
html body .app.tool-route .tool-category-developer .mermaid-preview-inner,
html body .app .mermaid-preview-inner {
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* Fullscreen diagram view */
html body .app .mermaid-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 4000 !important;
    background: var(--bg2);
    display: flex;
    flex-direction: column;
}
html body .app .mermaid-fullscreen-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--bd);
    background: var(--bg3);
}
html body .app .mermaid-fullscreen-bar .mermaid-fullscreen-close { margin-left: auto !important; }
html body .app .mermaid-fullscreen-canvas {
    flex: 1 1 auto;
    overflow: auto;
    padding: 20px;
    background: var(--bg2);
}
html body .app .mermaid-fullscreen-canvas .mermaid-preview-inner {
    min-width: max-content !important;
}
html body .app.light .mermaid-fullscreen-bar .mud-icon-button,
html body .app.light .mermaid-fullscreen-bar .mud-button-root {
    background: var(--bg2) !important;
    color: var(--tx) !important;
    border: 1px solid var(--bd) !important;
}
html body .app.light .mermaid-fullscreen-bar .mud-icon-root { color: var(--tx) !important; }
/* === END MERMAID ZOOM === */

/* === ROUTE READABILITY FIXES === */
html body .app :where(h1, .mud-typography-h1) {
    letter-spacing: 0 !important;
}

html body .app :where(h1, .mud-typography-h1):focus,
html body .app :where(h1, .mud-typography-h1):focus-visible,
html body .app :where(h1[tabindex="-1"], .mud-typography-h1[tabindex="-1"]) {
    outline: none !important;
    box-shadow: none !important;
}
/* === END ROUTE READABILITY FIXES === */

/* No navigation menu on mobile / small screens: hide the hamburger everywhere
   (later @media (max-width:900px) rules force it back to inline-flex, so this
   high-specificity rule is placed last to win). Users navigate from the
   home-screen sections; the desktop menu still shows on wide screens. */
@media (max-width: 980px) {
    html body .app .tv-asana-mobile-menu,
    html body .app.light .tv-asana-mobile-menu,
    html body .app.dark .tv-asana-mobile-menu {
        display: none !important;
    }

    /* The slide-in navigation drawer is opened only by the hamburger, which is
       now hidden on mobile, so hide the drawer (and its backdrop) outright. */
    html body .app .mud-drawer.mud-drawer-temporary:has(.drawer-menu),
    html body .app .mud-overlay-drawer {
        display: none !important;
    }
}
/* === END MOBILE MENU HIDE === */

/* Cookie consent banner (rendered at body level by daivverse-consent.js). */
.dv-cookie-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 5000;
    max-width: 780px;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, .14);
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .22);
    font-family: "DM Sans", system-ui, Segoe UI, sans-serif;
}
.dv-cookie-copy { flex: 1 1 320px; min-width: 0; display: grid; gap: 4px; }
.dv-cookie-copy strong { font-size: .98rem; }
.dv-cookie-copy span { font-size: .84rem; color: #475569; line-height: 1.5; }
.dv-cookie-copy a { color: #2563eb; text-decoration: underline; }
.dv-cookie-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.dv-cookie-btn {
    appearance: none;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    font-size: .86rem;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid transparent;
}
.dv-cookie-decline { background: #eef2f7; color: #0f172a; border-color: rgba(15, 23, 42, .14); }
.dv-cookie-accept { background: #2563eb; color: #ffffff; }
.dv-cookie-btn:hover { filter: brightness(1.04); }

body.dark .dv-cookie-banner {
    background: #101a2d;
    color: #eef4ff;
    border-color: rgba(148, 163, 184, .28);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
body.dark .dv-cookie-copy span { color: #9eb1cf; }
body.dark .dv-cookie-copy a { color: #85a4ff; }
body.dark .dv-cookie-decline { background: rgba(255, 255, 255, .06); color: #eef4ff; border-color: rgba(148, 163, 184, .28); }

@media (max-width: 560px) {
    .dv-cookie-actions { width: 100%; }
    .dv-cookie-btn { flex: 1 1 auto; }
}
/* === END COOKIE CONSENT BANNER === */

/* === FOOTER / CONTENT PAGE HEADER FIXES =========================================
   These fix the legal/info content pages reached from the footer (Legal Center,
   Privacy, Terms, Disclaimer, Cookies, Safety Boundary, About, Help, FAQ, How It
   Works, Roadmap, Changelog, Tool Status, Data Storage, Privacy & Security, etc.).
   They were regressed by earlier global design-system layers. */

/* (1) Route-change focus management programmatically focuses the page <h1>
   (tabindex="-1") for screen-reader users. The global focus-ring box-shadow then
   painted a stray blue rectangle around the title. Elements with tabindex="-1" are
   focused by script, never by keyboard, so they must NOT show a focus ring. */
html body .app [tabindex="-1"]:focus,
html body .app [tabindex="-1"]:focus-visible,
html body .app h1:focus,
html body .app h1:focus-visible,
html body .app h2:focus,
html body .app h2:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* (2) The legal/info hero holds four stacked siblings (chip, title, description,
   meta). A global rule forced every hero to `display:flex; align-items:center`,
   which is right for icon+text heroes but laid these four out in a squished row.
   Restore the intended top-to-bottom stack. */
html body .app .legal-hero,
html body .app .info-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: clamp(10px, 1.4vw, 16px) !important;
    text-align: left !important;
}

/* (3) The same layers clamped the hero description to 2 lines (and hid the rest),
   so longer intros were cut off mid-sentence. Let it flow fully. */
html body .app .legal-hero p,
html body .app .info-hero p {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    max-width: 70ch !important;
}
/* === END FOOTER / CONTENT PAGE HEADER FIXES === */