/* WizBrand reusable tool-page shell (layouts.tool) */
.tk { --tk-navy:#0b1f44; --tk-navy-2:#0d2552; --tk-blue:#2563eb; --tk-accent:#3b82f6; --tk-ink:#0f1b34; --tk-muted:#5d6b85; --tk-line:#e6ecf5; --tk-bg:#f5f8fd; --tk-ok:#16a34a; --tk-err:#dc2626;
    font-family:'Inter','Segoe UI',Arial,sans-serif; color:var(--tk-ink); background:var(--tk-bg); }

.tk-hero { position:relative; overflow:hidden; text-align:center; color:#fff; padding:54px 16px 84px;
    background: radial-gradient(1100px 360px at 82% -10%, #15346e 0, transparent 60%), linear-gradient(180deg,var(--tk-navy-2),var(--tk-navy)); }
.tk-hero::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:46px; background:var(--tk-bg); clip-path:ellipse(75% 100% at 50% 100%); }
.tk-crumb { display:inline-flex; gap:.5rem; align-items:center; font-size:.8rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); padding:.32rem .85rem; border-radius:999px; margin-bottom:1.1rem; }
.tk-crumb a { color:#cfe0ff; text-decoration:none; } .tk-crumb a:hover { color:#fff; } .tk-crumb .sep { opacity:.5; } .tk-crumb .here { color:#fff; font-weight:600; }
.tk-hero-ic { width:58px; height:58px; border-radius:16px; display:grid; place-items:center; margin:0 auto 1rem; font-size:1.5rem; color:#fff; background:linear-gradient(135deg,var(--tk-accent),var(--tk-blue)); box-shadow:0 14px 30px rgba(37,99,235,.45); }
.tk-hero h1 { font-family:'Plus Jakarta Sans','Inter',sans-serif; font-weight:800; font-size:clamp(1.9rem,3.4vw,2.8rem); margin:0 0 .45rem; letter-spacing:-.02em; color:#fff; }
.tk-hero p { color:#b9c8e6; font-size:1.04rem; margin:0 auto; max-width:620px; }

.tk-wrap { max-width:1440px; margin:0 auto; padding:0 clamp(20px, 3.5vw, 60px) 64px; position:relative; z-index:1; }
.tk-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:40px; align-items:start; }
@media (max-width:1300px){ .tk-layout { gap:26px; } }
@media (max-width:768px){ .tk-wrap { padding:0 16px 56px; } }
.tk-aside { align-self:start; position:sticky; top:80px; }
@media (max-width:992px){ .tk-layout{ grid-template-columns:1fr; } .tk-aside{ position:static; } }
.tk-panel { background:#fff; border:1px solid var(--tk-line); border-radius:20px; box-shadow:0 24px 60px rgba(11,31,68,.10); padding-bottom:2px; }

/* Dropzone */
.tk-drop { border:2.5px dashed #c3d4ef; border-radius:18px; background:#fbfdff; margin:26px; padding:54px 24px; text-align:center; transition:.2s; cursor:pointer; }
.tk-drop.drag { border-color:var(--tk-blue); background:#eef4ff; transform:scale(1.005); }
.tk-drop .ic { font-size:2.6rem; color:var(--tk-blue); margin-bottom:.6rem; }
.tk-drop h2 { font-size:1.2rem; font-weight:700; color:var(--tk-navy); margin:0 0 .3rem; }
.tk-drop p { color:var(--tk-muted); margin:0 0 1.1rem; font-size:.92rem; }

.tk-btn { display:inline-flex; align-items:center; gap:.5rem; border:none; cursor:pointer; font:inherit; font-weight:700; border-radius:12px; padding:.85rem 1.6rem; text-decoration:none; transition:.18s; }
.tk-btn-primary { background:linear-gradient(120deg,var(--tk-accent),var(--tk-blue)); color:#fff; box-shadow:0 12px 26px rgba(37,99,235,.4); }
.tk-btn-primary:hover { filter:brightness(1.07); color:#fff; transform:translateY(-1px); }
.tk-btn-primary:disabled { opacity:.55; cursor:not-allowed; filter:none; transform:none; }
.tk-btn-ghost { background:#eef3fb; color:var(--tk-navy); } .tk-btn-ghost:hover { background:#e2eaf7; color:var(--tk-navy); }
.tk-btn-lg { padding:1rem 2rem; font-size:1.05rem; }

/* Workspace: files + sticky options panel */
.tk-work { display:grid; grid-template-columns:1fr 320px; gap:0; }
.tk-files { padding:22px; max-height:62vh; overflow:auto; }
.tk-side { border-left:1px solid var(--tk-line); background:#fafcff; padding:22px; }
.tk-side-sticky { position:sticky; top:80px; }
.tk-side h3 { font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--tk-muted); margin:0 0 .8rem; font-weight:700; }
.tk-field { margin-bottom:1.1rem; } .tk-field label { display:block; font-size:.85rem; font-weight:600; margin-bottom:.4rem; color:var(--tk-ink); }
.tk-field select, .tk-field input[type=number], .tk-field input[type=text] { width:100%; border:1px solid var(--tk-line); border-radius:10px; padding:.6rem .7rem; font:inherit; color:var(--tk-ink); background:#fff; }
.tk-range-row { display:flex; align-items:center; gap:.6rem; } .tk-range-row input[type=range]{ flex:1; } .tk-range-val{ font-weight:700; color:var(--tk-blue); min-width:42px; text-align:right; }
.tk-check { display:flex; align-items:center; gap:.5rem; font-size:.88rem; }

.tk-item { display:flex; align-items:center; gap:14px; padding:12px; border:1px solid var(--tk-line); border-radius:14px; margin-bottom:10px; background:#fff; }
.tk-thumb { width:54px; height:54px; border-radius:10px; object-fit:cover; background:#eef3fb; flex:0 0 auto; }
.tk-item .meta { min-width:0; flex:1; } .tk-item .meta b { display:block; font-size:.92rem; color:var(--tk-navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tk-item .meta span { font-size:.78rem; color:var(--tk-muted); }
.tk-item .rm { border:none; background:#fbeaea; color:var(--tk-err); width:32px; height:32px; border-radius:9px; cursor:pointer; flex:0 0 auto; }
.tk-item .rm:hover { background:#f6d7d7; }
.tk-badge-ok { font-size:.74rem; font-weight:700; color:var(--tk-ok); background:#e8f7ee; padding:.15rem .5rem; border-radius:999px; }

.tk-progress { height:8px; background:#e7eefb; border-radius:999px; overflow:hidden; margin-top:6px; }
.tk-progress > span { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--tk-accent),var(--tk-blue)); transition:width .25s; }

.tk-toast { display:none; align-items:center; gap:.6rem; margin:0 26px 16px; padding:.8rem 1rem; border-radius:12px; font-size:.9rem; }
.tk-toast.show { display:flex; } .tk-toast.err { background:#fdecec; color:#a31212; border:1px solid #f6cccc; }

/* Below the fold */
.tk-trust { display:flex; flex-wrap:wrap; justify-content:center; gap:1.4rem; margin:26px auto 0; color:var(--tk-muted); font-size:.86rem; }
.tk-trust span { display:inline-flex; align-items:center; gap:.45rem; } .tk-trust i { color:var(--tk-ok); }
.tk-steps { margin-top:48px; } .tk-steps h2, .tk-related h2 { font-family:'Plus Jakarta Sans','Inter',sans-serif; font-weight:800; color:var(--tk-navy); font-size:1.5rem; text-align:center; margin:0 0 26px; }
.tk-steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tk-step { background:#fff; border:1px solid var(--tk-line); border-radius:16px; padding:22px; text-align:center; }
.tk-step .n { width:38px; height:38px; border-radius:50%; background:#eef4ff; color:var(--tk-blue); font-weight:800; display:grid; place-items:center; margin:0 auto .7rem; }
.tk-step h3 { font-size:1.02rem; color:var(--tk-navy); margin:0 0 .3rem; } .tk-step p { font-size:.88rem; color:var(--tk-muted); margin:0; }
.tk-related { margin-top:48px; }
.tk-related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr)); gap:14px; }
.tk-rel { display:flex; align-items:center; gap:.7rem; background:#fff; border:1px solid var(--tk-line); border-radius:14px; padding:14px 16px; text-decoration:none; color:var(--tk-navy); font-weight:600; transition:.18s; }
.tk-rel:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(11,31,68,.12); color:var(--tk-navy); border-color:#cdddf7; }
.tk-rel i { width:34px; height:34px; border-radius:9px; background:#eef4ff; color:var(--tk-blue); display:grid; place-items:center; flex:0 0 auto; }

@media (max-width:860px){ .tk-work{ grid-template-columns:1fr; } .tk-side{ border-left:none; border-top:1px solid var(--tk-line); } .tk-side-sticky{ position:static; } .tk-steps-grid{ grid-template-columns:1fr; } }

/* ---- Panel header (designed top of the main tool card) ---- */
.tk-panel-head { display:flex; align-items:center; gap:.9rem; padding:24px 26px 4px; text-align:left; }
.tk-panel-ic { width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg, var(--tk-accent), var(--tk-blue)); color:#fff; display:grid; place-items:center; font-size:1.2rem; flex:0 0 auto; box-shadow:0 12px 24px rgba(37,99,235,.4); }
.tk-panel-head > div { min-width:0; }
.tk-panel-head h2 { margin:0; text-align:left; font-family:'Plus Jakarta Sans','Inter',sans-serif; font-weight:800; font-size:1.18rem; color:var(--tk-navy); line-height:1.15; }
.tk-panel-head p { margin:.15rem 0 0; text-align:left; font-size:.86rem; color:var(--tk-muted); }

/* ---- Input bar (URL/username lookup tools) ---- */
.tk-inputbar { display:flex; gap:.6rem; flex-wrap:wrap; padding:20px 26px 26px; }
.tk-input { flex:1; min-width:220px; border:1px solid var(--tk-line); border-radius:12px; padding:.95rem 1rem; font:inherit; color:var(--tk-ink); }
.tk-input:focus { outline:none; border-color:var(--tk-blue); box-shadow:0 0 0 3px rgba(37,99,235,.15); }

/* ---- Inline note / error ---- */
/* Neutralise legacy style.css rule (#displayUserData { transform: translate(30%,9%) }) that pushed results out of the card */
#displayUserData { transform: none !important; }
.tk-note { margin:4px 26px 26px; padding:1rem 1.15rem; border-radius:14px; font-size:.92rem; line-height:1.45; display:flex; gap:.65rem; align-items:flex-start; }
.tk-note i { font-size:1.12rem; margin-top:.05rem; flex:0 0 auto; }
.tk-note span { min-width:0; word-break:break-word; }
.tk-note.err { background:#fdecec; color:#a31212; border:1px solid #f6cccc; }
.tk-note.info { background:#eef4ff; color:#1e3a8a; border:1px solid #d6e2fb; }
.tk-note.ok { background:#e8f7ee; color:#0f7a37; border:1px solid #bfe6cd; }
.tk-note.warn { background:#fff8eb; color:#92580a; border:1px solid #fde7b9; }

/* ---- Profile / result card ---- */
.tk-profile { display:flex; gap:18px; align-items:center; flex-wrap:wrap; padding:24px 26px 8px; border-top:1px solid var(--tk-line); }
.tk-profile img { width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid #eef3fb; flex:0 0 auto; }
.tk-profile .pinfo { min-width:0; flex:1; }
.tk-profile h3 { margin:0 0 .25rem; color:var(--tk-navy); font-size:1.2rem; }
.tk-profile p { color:var(--tk-muted); margin:0; font-size:.92rem; line-height:1.45; }
.tk-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:16px 26px 26px; }
.tk-stat-box { background:#f5f8fd; border:1px solid var(--tk-line); border-radius:14px; padding:16px 12px; text-align:center; }
.tk-stat-box b { display:block; font-size:1.5rem; color:var(--tk-navy); font-family:'Plus Jakarta Sans','Inter',sans-serif; }
.tk-stat-box span { font-size:.78rem; color:var(--tk-muted); }
@media (max-width:520px){ .tk-stats{ grid-template-columns:1fr; } }

/* ---- Content sections (about / features / FAQ) ---- */
.tk-content { margin-top:46px; }
.tk-content h2 { position:relative; text-align:center; font-family:'Plus Jakarta Sans','Inter',sans-serif; font-weight:800; color:var(--tk-navy); font-size:1.7rem; margin:0 0 1.7rem; padding-bottom:.8rem; letter-spacing:-.01em; }
.tk-content h2::after { content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:66px; height:4px; border-radius:999px; background:linear-gradient(90deg, var(--tk-accent), var(--tk-blue)); box-shadow:0 5px 16px rgba(37,99,235,.55); }
.tk-content > p { color:var(--tk-muted); line-height:1.65; margin:0 0 1rem; max-width:820px; }
/* Card wrapper for prose/about copy so it isn't bare text on the page */
.tk-prose { background:#fff; border:1px solid var(--tk-line); border-radius:18px; padding:26px 30px; box-shadow:0 12px 34px rgba(11,31,68,.06); }
.tk-prose p { color:var(--tk-muted); line-height:1.7; margin:0 0 1rem; max-width:none; }
.tk-prose p:last-child { margin-bottom:0; }
.tk-features { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,235px),1fr)); gap:16px; margin-top:6px; }
.tk-feature { background:#fff; border:1px solid var(--tk-line); border-radius:16px; padding:20px; transition:transform .18s, box-shadow .18s; }
.tk-feature:hover { transform:translateY(-3px); box-shadow:0 16px 34px rgba(11,31,68,.10); }
.tk-feature i { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:#eef4ff; color:var(--tk-blue); font-size:1.05rem; margin-bottom:.75rem; }
.tk-feature h3 { font-size:1.02rem; color:var(--tk-navy); margin:0 0 .3rem; }
.tk-feature p { font-size:.88rem; color:var(--tk-muted); margin:0; line-height:1.5; }

/* ---- FAQ accordion (native <details>, no JS) ---- */
.tk-faq { margin:14px auto 0; max-width:820px; }
.tk-faq details { background:#fff; border:1px solid var(--tk-line); border-radius:14px; margin-bottom:10px; }
.tk-faq summary { list-style:none; cursor:pointer; padding:16px 18px; font-weight:700; color:var(--tk-navy); display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.tk-faq summary::-webkit-details-marker { display:none; }
.tk-faq summary::after { content:"\f067"; font-family:"FontAwesome"; color:var(--tk-blue); font-size:.85rem; transition:transform .2s; }
.tk-faq details[open] summary::after { transform:rotate(45deg); }
.tk-faq .faq-a { padding:0 18px 16px; color:var(--tk-muted); line-height:1.6; }

/* ---- "More tools" sidebar card ---- */
.tk-sidecard { background:#fff; border:1px solid var(--tk-line); border-radius:20px; box-shadow:0 16px 42px rgba(11,31,68,.09); overflow:hidden; }
.tk-sidecard-head { display:flex; align-items:center; gap:.75rem; padding:18px 20px; background:linear-gradient(135deg, var(--tk-navy-2), #15346e); color:#fff; }
.tk-sidecard-head .ic { width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.13); display:grid; place-items:center; color:#fff; font-size:1.05rem; flex:0 0 auto; }
.tk-sidecard-head h3 { margin:0; font-family:'Plus Jakarta Sans','Inter',sans-serif; font-weight:800; font-size:1.05rem; color:#fff; line-height:1.1; }
.tk-sidecard-head span { font-size:.74rem; color:#9fb3d6; font-weight:500; }
.tk-sidecard-body { padding:10px; }
.tk-side-item { display:flex; align-items:center; gap:.7rem; padding:.58rem .6rem; border-radius:12px; text-decoration:none; color:var(--tk-navy); font-weight:600; font-size:.9rem; transition:.16s; }
.tk-side-item:hover { background:#f3f7ff; color:var(--tk-blue); text-decoration:none; }
.tk-side-ic { width:36px; height:36px; border-radius:10px; background:#eef4ff; color:var(--tk-blue); display:grid; place-items:center; flex:0 0 auto; font-size:.88rem; transition:.16s; }
.tk-side-item:hover .tk-side-ic { background:var(--tk-blue); color:#fff; transform:scale(1.06); }
.tk-side-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tk-side-go { margin-left:auto; color:#c0cce0; font-size:.82rem; opacity:0; transform:translateX(-5px); transition:.16s; }
.tk-side-item:hover .tk-side-go { opacity:1; transform:none; color:var(--tk-blue); }
.tk-side-more { display:flex; align-items:center; justify-content:center; gap:.45rem; margin:10px; padding:.85rem; border-radius:13px; background:linear-gradient(120deg,var(--tk-accent),var(--tk-blue)); color:#fff; font-weight:700; text-decoration:none; font-size:.9rem; box-shadow:0 12px 26px rgba(37,99,235,.4); transition:.16s; }
.tk-side-more:hover { filter:brightness(1.07); color:#fff; text-decoration:none; transform:translateY(-2px); }