/*
Theme Name: reskit
Theme URI: https://restoolkit.com
Author: Weixuan
Author URI: https://restoolkit.com
Description: reskit - Minimal tech-style resource & tool site theme
Version: 1.2.6
License: GPL v2 or later
Text Domain: reskit
Tags: gray, white, minimal, tech, sidebar, responsive
*/

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
body{
  font-family:"SF Mono","JetBrains Mono",ui-monospace,"Cascadia Code","Fira Code",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.5;color:var(--text);background:#f5f5f5;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
svg{display:block}

/* ===== Variables ===== */
:root{
  --sidebar-w:208px;
  --maxw:1160px;
  --r:8px;
  --r-sm:6px;
  --text:#1a1a1a;
  --text-sub:#666;
  --text-faint:#999;
  --bg:#f5f5f5;
  --card:#fff;
  --border:#e0e0e0;
  --border-light:#ededed;
  --accent:#1a1a1a;--accent-rgb:26,26,26;
  --t:.18s ease;
}

/* ===== Shell ===== */
.app{display:flex;min-height:100vh}

/* ===== Sidebar ===== */
.sidebar{
  width:var(--sidebar-w);position:fixed;top:0;left:0;bottom:0;
  background:#fafafa;border-right:1px solid var(--border);
  display:flex;flex-direction:column;z-index:100;
  transition:transform var(--t);
}
.sidebar__brand{padding:16px 14px 12px;border-bottom:1px solid var(--border-light);display:flex;align-items:center;gap:8px}
.sidebar__logo{
  width:28px;height:28px;border-radius:6px;border:1.5px solid var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--accent);flex-shrink:0;letter-spacing:-.5px;
}
.sidebar__logo-link{display:flex;flex-shrink:0}
.sidebar__logo-link img{width:28px;height:28px;border-radius:6px;object-fit:contain}
.sidebar__title{font-size:14px;font-weight:700;color:var(--text);line-height:1.2}
.sidebar__subtitle{font-size:10px;color:var(--text-faint);letter-spacing:.05em;text-transform:uppercase}

.sidebar__nav{flex:1;overflow-y:auto;padding:6px 8px}
.sidebar__nav::-webkit-scrollbar{width:3px}
.sidebar__nav::-webkit-scrollbar-thumb{background:#ddd;border-radius:3px}

.nav__label{font-size:10px;font-weight:600;color:var(--text-faint);text-transform:uppercase;letter-spacing:.08em;padding:10px 8px 4px}
.nav__list{list-style:none}
.nav__item{
  display:flex;align-items:center;gap:8px;
  padding:7px 8px;border-radius:var(--r-sm);
  font-size:13px;color:var(--text-sub);
  cursor:pointer;text-decoration:none;
  transition:all var(--t);line-height:1.3;
}
.nav__item:hover{background:#f0f0f0;color:var(--text)}
.nav__item.active{background:var(--accent);color:#fff;font-weight:500}
.nav__icon{width:14px;height:14px;flex-shrink:0;opacity:.6}
.nav__item.active .nav__icon{opacity:1}
.nav__badge{
  margin-left:auto;font-size:10px;
  background:#e0e0e0;color:var(--text-sub);
  padding:1px 6px;border-radius:8px;font-weight:500;
}
.nav__item.active .nav__badge{background:rgba(255,255,255,.2);color:#fff}

.sidebar__footer{padding:8px;border-top:1px solid var(--border-light)}
.sidebar__search-form{display:block}
.sidebar__search{
  width:100%;padding:6px 10px;
  border:1px solid var(--border);border-radius:var(--r-sm);
  font-size:12px;background:#fff;color:var(--text-sub);
  outline:none;font-family:inherit;transition:all var(--t);
}
.sidebar__search:focus{border-color:var(--accent)}
.sidebar__search::placeholder{color:#bbb}

/* ===== Main ===== */
.main{flex:1;margin-left:var(--sidebar-w);min-width:0;display:flex;flex-direction:column}

/* ===== Topbar (Mobile) ===== */
.topbar{
  display:none;position:sticky;top:0;z-index:90;
  background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  padding:8px 12px;align-items:center;gap:10px;
}
.topbar__btn{
  width:34px;height:34px;border-radius:6px;border:1px solid var(--border);
  background:#fff;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.topbar__btn svg{width:16px;height:16px;stroke:var(--text);fill:none;stroke-width:2}
.topbar__brand{font-size:14px;font-weight:700;color:var(--text)}
.topbar__spacer{flex:1}

/* ===== Content ===== */
.content{padding:18px;max-width:var(--maxw);width:100%;margin:0 auto}
.content--narrow{max-width:760px}
.content--full{max-width:none;padding:12px}
.content--center{display:flex;align-items:center;justify-content:center;min-height:60vh}

/* ===== Hero ===== */
.hero{
  background:#fff;border:1px solid var(--border);border-radius:var(--r);
  padding:20px 18px;margin-bottom:16px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.hero__left{flex:1;min-width:0}
.hero__title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:4px;letter-spacing:-.02em}
.hero__desc{font-size:12px;color:var(--text-sub)}
.hero__right{display:flex;gap:20px;flex-shrink:0}
.hero__stat{text-align:right}
.hero__stat-num{font-size:18px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.hero__stat-label{font-size:10px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;margin-top:1px}

/* ===== Section ===== */
.section-head{display:flex;align-items:center;justify-content:space-between;margin:18px 0 10px}
.section-head__title{font-size:14px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;letter-spacing:-.01em}
.section-head__bar{width:3px;height:14px;border-radius:2px;background:var(--accent);display:inline-block}
.section-head__more{font-size:12px;color:var(--text-sub);transition:color var(--t)}
.section-head__more:hover{color:var(--text)}

/* ===== Tabs ===== */
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tab{
  padding:5px 12px;border-radius:4px;
  font-size:12px;font-weight:500;
  background:#fff;border:1px solid var(--border);
  color:var(--text-sub);cursor:pointer;
  transition:all var(--t);text-decoration:none;
}
.tab:hover{border-color:#999;color:var(--text)}
.tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ===== Grid ===== */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

/* ===== Card ===== */
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;cursor:pointer;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
}
.card:hover{border-color:var(--accent);box-shadow:0 2px 12px rgba(0,0,0,.06);transform:translateY(-2px)}

.card__thumb{
  width:100%;aspect-ratio:16/10;
  background:#f0f0f0;border-bottom:1px solid var(--border-light);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.card__thumb img{width:100%;height:100%;object-fit:cover}
.card__thumb-icon{width:32px;height:32px;stroke:#bbb;fill:none;stroke-width:1.5}
.card__cat{
  position:absolute;top:6px;left:6px;
  padding:2px 7px;border-radius:3px;
  font-size:10px;font-weight:600;color:#fff;
  background:rgba(var(--accent-rgb),.8);backdrop-filter:blur(4px);
  letter-spacing:.02em;z-index:1;
}
.card__body{padding:10px 12px 12px;flex:1;display:flex;flex-direction:column}
.card__title{
  font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px;
  line-height:1.35;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  transition:color var(--t);
}
.card:hover .card__title{color:#333}
.card__desc{
  font-size:11px;color:var(--text-sub);line-height:1.4;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card__meta{display:flex;align-items:center;gap:10px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border-light)}
.card__meta-item{font-size:10px;color:var(--text-faint);display:flex;align-items:center;gap:3px;font-variant-numeric:tabular-nums}
.card__meta-item svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.5}
.card--empty{opacity:.5}

/* ===== Page Head ===== */
.page-head{margin-bottom:18px}
.page-head__title{font-size:18px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;letter-spacing:-.01em}
.page-head__desc{font-size:13px;color:var(--text-sub);margin-top:6px}

/* ===== Pagination ===== */
.pagination,.nav-links{display:flex;justify-content:center;gap:4px;margin-top:20px;flex-wrap:wrap}
.page-numbers{
  min-width:30px;height:30px;padding:0 8px;border-radius:5px;
  border:1px solid var(--border);background:#fff;
  font-size:12px;color:var(--text-sub);
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t);text-decoration:none;
}
.page-numbers:hover{border-color:#999;color:var(--text)}
.page-numbers.current{background:var(--accent);color:#fff;border-color:var(--accent)}
.page-numbers.dots{border:none;background:none}

/* ===== Article ===== */
.article{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:24px 28px}
.article--tool{padding:16px 18px}
.article__breadcrumb{font-size:12px;color:var(--text-faint);margin-bottom:16px}
.article__breadcrumb a{color:var(--text-sub)}
.article__breadcrumb a:hover{color:var(--text)}
.article__title{font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.02em;margin-bottom:10px;line-height:1.3}
.article__meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-faint);margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border-light)}
.article__thumb{margin-bottom:20px;border-radius:var(--r);overflow:hidden}
.article__thumb img{width:100%}
.article__content{font-size:14px;color:#333;line-height:1.7}
.article__content h2,.article__content h3{font-size:16px;font-weight:700;margin:20px 0 10px;letter-spacing:-.01em}
.article__content p{margin-bottom:14px}
.article__content a{color:var(--accent);text-decoration:underline}
.article__content img{border-radius:var(--r-sm);margin:10px 0}
.article__content ul,.article__content ol{padding-left:20px;margin-bottom:14px}
.article__content li{margin-bottom:4px}
.article__content blockquote{border-left:3px solid var(--border);padding-left:14px;color:var(--text-sub);margin:14px 0}
.article__content pre{background:#f5f5f5;border:1px solid var(--border);border-radius:var(--r-sm);padding:12px;overflow-x:auto;font-size:13px;margin:14px 0}
.article__content code{font-family:inherit;background:#f0f0f0;padding:1px 5px;border-radius:3px;font-size:13px}
.article__content pre code{background:none;padding:0}

.article__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border-light)}
.tag{
  font-size:11px;padding:3px 10px;border-radius:3px;
  background:#f5f5f5;border:1px solid var(--border);color:var(--text-sub);
  transition:all var(--t);
}
.tag:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ===== Post Nav ===== */
.post-nav{display:flex;gap:12px;margin-top:16px}
.post-nav__item{
  flex:1;background:#fff;border:1px solid var(--border);border-radius:var(--r);
  padding:12px 16px;display:flex;flex-direction:column;gap:4px;
  transition:all var(--t);text-decoration:none;color:inherit;
}
.post-nav__item:hover{border-color:#999}
.post-nav__item span{font-size:11px;color:var(--text-faint)}
.post-nav__item strong{font-size:13px;font-weight:600;color:var(--text);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.post-nav__next{text-align:right}

/* ===== Footer ===== */
.footer{
  margin-top:28px;padding:16px 18px;
  border-top:1px solid var(--border);text-align:center;
  font-size:11px;color:var(--text-faint);
}
.footer a{color:var(--text-sub);transition:color var(--t)}
.footer a:hover{color:var(--text)}
.footer__links{display:inline}

/* ===== 404 ===== */
.error-page{text-align:center}
.error-page__code{font-size:64px;font-weight:700;color:var(--border);letter-spacing:-.04em}
.error-page__text{font-size:16px;color:var(--text-sub);margin-bottom:20px}
.btn{
  display:inline-block;padding:8px 20px;border-radius:var(--r-sm);
  background:var(--accent);color:#fff;font-size:13px;font-weight:500;
  border:0;cursor:pointer;
  transition:all var(--t);
}
.btn:hover{opacity:.85}

/* ===== Overlay ===== */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:99;opacity:0;transition:opacity var(--t)}
.overlay.show{display:block;opacity:1}

/* ===== Widget ===== */
.widget{margin-bottom:12px}
.widget__title{font-size:12px;font-weight:600;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}

/* ===== Responsive ===== */
@media(max-width:1024px){
  .grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0);box-shadow:4px 0 20px rgba(0,0,0,.08)}
  .main{margin-left:0}
  .topbar{display:flex}
  .topbar-desktop{display:none !important}
  .content{padding:12px}
  .grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .hero{flex-direction:column;align-items:flex-start;gap:12px}
  .hero__right{gap:16px}
  .hero__stat{text-align:left}
  .hero__title{font-size:16px}
  .card__body{padding:8px 10px 10px}
  .article{padding:16px 18px}
  .article__title{font-size:18px}
  .post-nav{flex-direction:column}
}
@media(max-width:480px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .tab{padding:4px 10px;font-size:11px}
  .section-head__title{font-size:13px}
}

/* ===== Desktop Topbar ===== */
.topbar-desktop{
  position:sticky;top:0;z-index:90;
  background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  padding:0 18px;height:44px;
  display:flex;align-items:center;gap:10px;
}
.topbar-desktop__spacer{flex:1}
.topbar-desktop{display:flex}

/* ===== Language Toggle (single button) ===== */
.lang-toggle{
  display:flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:var(--r-sm);
  font-size:12px;font-weight:500;
  background:#fff;border:1px solid var(--border);
  color:var(--text-sub);cursor:pointer;
  transition:all var(--t);font-family:inherit;
  white-space:nowrap;
}
.lang-toggle:hover{border-color:#999;color:var(--text)}
.lang-toggle__icon{width:14px;height:14px;flex-shrink:0}

/* ===== Old lang buttons (legacy) ===== */
.topbar__lang{display:flex;align-items:center;gap:2px}
.lang-btn{
  padding:4px 10px;border-radius:4px;
  font-size:12px;font-weight:500;
  background:transparent;border:1px solid transparent;
  color:var(--text-sub);cursor:pointer;
  transition:all var(--t);font-family:inherit;
}
.lang-btn:hover{color:var(--text)}
.lang-btn.active{background:var(--accent);color:#fff}

/* ===== Topbar User/Login ===== */
.topbar__user{
  display:flex;align-items:center;gap:8px;
  padding:4px 10px;border-radius:var(--r-sm);
  font-size:12px;color:var(--text-sub);
  background:#fff;border:1px solid var(--border);
  cursor:pointer;transition:all var(--t);text-decoration:none;color:inherit;
}
.topbar__user:hover{border-color:#999;color:var(--text)}
.topbar__user-avatar{
  width:20px;height:20px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:600;
}
.topbar__login-link{
  padding:5px 14px;border-radius:var(--r-sm);
  font-size:12px;font-weight:500;
  background:transparent;color:var(--text-sub);
  border:1px solid var(--border);
  transition:all var(--t);text-decoration:none;
}
.topbar__login-link:hover{border-color:#999;color:var(--text)}

/* ===== Auth Pages ===== */
.auth-wrap{width:100%;max-width:400px;margin:0 auto}
.auth-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--r);
  padding:32px 28px;
}
.auth__title{font-size:20px;font-weight:700;color:var(--text);letter-spacing:-.02em;margin-bottom:4px}
.auth__subtitle{font-size:12px;color:var(--text-sub);margin-bottom:24px}
.form-group{margin-bottom:16px}
.form-label{
  display:block;font-size:12px;font-weight:500;color:var(--text);
  margin-bottom:6px;letter-spacing:.01em;
}
.form-label .required{color:#d93025;margin-left:2px}
.form-input{
  width:100%;padding:9px 12px;
  border:1px solid var(--border);border-radius:var(--r-sm);
  font-size:13px;color:var(--text);background:#fff;
  outline:none;font-family:inherit;transition:all var(--t);
}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.05)}
.form-input::placeholder{color:#bbb}
.form-hint{font-size:11px;color:var(--text-faint);margin-top:4px}

/* ===== Captcha ===== */
.captcha-row{display:flex;gap:8px;align-items:center}
.captcha-row .form-input{flex:1}
.captcha-img{
  width:100px;height:36px;border:1px solid var(--border);
  border-radius:var(--r-sm);background:linear-gradient(135deg,#f0f0f0,#e8e8e8);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;letter-spacing:3px;color:#333;
  cursor:pointer;flex-shrink:0;user-select:none;
  font-family:"SF Mono","Courier New",monospace;
  position:relative;overflow:hidden;transition:opacity var(--t);
}
.captcha-img::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 3px,rgba(0,0,0,.03) 3px,rgba(0,0,0,.03) 4px);
}
.captcha-refresh{
  width:36px;height:36px;border-radius:var(--r-sm);
  border:1px solid var(--border);background:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;transition:all var(--t);
}
.captcha-refresh:hover{border-color:#999}
.captcha-refresh svg{width:14px;height:14px;stroke:var(--text-sub);fill:none;stroke-width:1.5}

/* ===== Password Strength ===== */
.pw-strength{display:flex;gap:3px;margin-top:6px}
.pw-bar{flex:1;height:3px;border-radius:2px;background:#e0e0e0;transition:background var(--t)}
.pw-bar.active-1{background:#d93025}
.pw-bar.active-2{background:#f9a825}
.pw-bar.active-3{background:#1e8e3e}
.pw-strength__text{font-size:11px;color:var(--text-faint);margin-top:3px}

/* ===== Email Code ===== */
.email-code-row{display:flex;gap:8px}
.email-code-row .form-input{flex:1}
.send-code-btn{
  white-space:nowrap;padding:9px 14px;font-size:12px;font-weight:500;
  border:1px solid var(--border);border-radius:var(--r-sm);
  background:#fff;color:var(--text);cursor:pointer;
  transition:all var(--t);font-family:inherit;flex-shrink:0;
}
.send-code-btn:hover:not(:disabled){border-color:var(--accent)}
.send-code-btn:disabled{color:var(--text-faint);cursor:not-allowed;opacity:.6}

/* ===== Verify Status ===== */
.verify-status{font-size:11px;margin-top:4px;display:flex;align-items:center;gap:4px}
.verify-status--success{color:#1e8e3e}
.verify-status--error{color:#d93025}
.verify-status--info{color:var(--text-faint)}
.verify-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.verify-status--success .verify-dot{background:#1e8e3e}
.verify-status--error .verify-dot{background:#d93025}
.verify-status--info .verify-dot{background:var(--text-faint)}

/* ===== Auth Footer ===== */
.auth__footer{text-align:center;margin-top:20px;font-size:12px;color:var(--text-sub)}
.auth__footer a{color:var(--text);font-weight:500;transition:color var(--t)}
.auth__footer a:hover{text-decoration:underline}

/* ===== Checkbox ===== */
.form-check{display:flex;align-items:flex-start;gap:8px;margin-bottom:16px}
.form-check input{width:14px;height:14px;margin-top:2px;accent-color:var(--accent)}
.form-check label{font-size:11px;color:var(--text-sub);line-height:1.5}
.form-check label a{color:var(--text);text-decoration:underline}

/* ===== Button ===== */
.btn--block{display:block;width:100%}
.btn--ghost{background:transparent;color:var(--text-sub);border:1px solid var(--border)}
.btn--ghost:hover{border-color:#999;color:var(--text);opacity:1}

/* ===== Responsive Auth ===== */
@media(max-width:480px){
  .auth-card{padding:24px 18px}
  .send-code-btn{padding:9px 10px;font-size:11px}
}

/* ===== Tool CPT — Card Grid ===== */
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tool-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  overflow:hidden;cursor:pointer;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
}
.tool-card:hover{border-color:var(--accent);box-shadow:0 2px 12px rgba(0,0,0,.06);transform:translateY(-2px)}
.tool-card__top{padding:18px 16px 14px;display:flex;align-items:flex-start;gap:12px}
.tool-card__icon{
  width:40px;height:40px;border-radius:8px;
  background:#f5f5f5;border:1px solid var(--border-light);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all var(--t);
}
.tool-card:hover .tool-card__icon{background:var(--accent);border-color:var(--accent)}
.tool-card__icon svg{width:20px;height:20px;stroke:#999;fill:none;stroke-width:1.5;transition:stroke var(--t)}
.tool-card:hover .tool-card__icon svg{stroke:#fff}
.tool-card__info{flex:1;min-width:0}
.tool-card__name{font-size:14px;font-weight:600;color:var(--text);margin-bottom:3px;letter-spacing:-.01em}
.tool-card__tag{
  display:inline-block;font-size:9px;font-weight:600;color:#fff;
  background:rgba(var(--accent-rgb),.8);padding:2px 6px;border-radius:3px;
  letter-spacing:.05em;text-transform:uppercase;
}
.tool-card__body{padding:0 16px 12px}
.tool-card__desc{
  font-size:12px;color:var(--text-sub);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tool-card__footer{
  padding:10px 16px;border-top:1px solid var(--border-light);
  display:flex;align-items:center;justify-content:space-between;
}
.tool-card__features{font-size:11px;color:var(--text-faint);display:flex;align-items:center;gap:8px}
.tool-card__features span{display:flex;align-items:center;gap:3px}
.tool-card__arrow{font-size:12px;color:var(--text-faint);transition:all var(--t)}
.tool-card:hover .tool-card__arrow{color:var(--text);transform:translateX(2px)}

/* ===== Tool Single Page ===== */
.breadcrumb{font-size:12px;color:var(--text-faint);margin-bottom:12px}
.breadcrumb a{color:var(--text-sub);text-decoration:none}
.breadcrumb a:hover{color:var(--text)}
.breadcrumb__sep{margin:0 4px;color:var(--text-faint)}

.tool-wrap{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:20px 24px;
}
.tool-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border-light)}
.tool-head__icon{width:36px;height:36px;border-radius:8px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tool-head__icon svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.5}
.tool-head__title{font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.tool-head__desc{font-size:12px;color:var(--text-sub);margin-top:2px}

/* Mode Toggle */
.mode-toggle{display:inline-flex;background:#f0f0f0;border-radius:var(--r-sm);padding:3px;margin-bottom:16px}
.mode-btn{padding:6px 16px;border-radius:4px;font-size:13px;font-weight:500;background:transparent;border:none;color:var(--text-sub);cursor:pointer;transition:all var(--t);font-family:inherit}
.mode-btn:hover{color:var(--text)}
.mode-btn.active{background:var(--accent);color:#fff}

/* Tool Fields */
.tool-field{margin-bottom:14px}
.tool-field__label{display:block;font-size:12px;font-weight:500;color:var(--text);margin-bottom:6px}
.tool-textarea{
  width:100%;min-height:130px;padding:12px;
  border:1px solid var(--border);border-radius:var(--r-sm);
  font-size:13px;color:var(--text);background:#fff;
  outline:none;font-family:inherit;resize:vertical;
  transition:all var(--t);line-height:1.5;
}
.tool-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.05)}
.tool-textarea::placeholder{color:#bbb}
.tool-textarea--output{background:#fafafa}
.tool-input{
  width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-sm);
  font-size:13px;color:var(--text);background:#fff;outline:none;font-family:inherit;transition:all var(--t);
}
.tool-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.05)}

/* Output + Copy */
.tool-output-wrap{position:relative}
.tool-copy{
  position:absolute;top:8px;right:8px;
  padding:4px 10px;border-radius:var(--r-sm);
  font-size:11px;font-weight:500;
  background:rgba(255,255,255,.95);border:1px solid var(--border);
  color:var(--text-sub);cursor:pointer;transition:all var(--t);font-family:inherit;
  display:flex;align-items:center;gap:4px;z-index:1;
}
.tool-copy:hover{border-color:#999;color:var(--text);background:#fff}

/* Buttons */
.tool-actions{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap}
.tool-btn{
  padding:8px 20px;border-radius:var(--r-sm);
  background:var(--accent);color:#fff;font-size:13px;font-weight:500;
  border:none;cursor:pointer;transition:all var(--t);font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.tool-btn:disabled{opacity:.45;cursor:not-allowed}
.tool-btn:hover{opacity:.85}
.tool-btn-ghost{
  padding:8px 16px;border-radius:var(--r-sm);
  background:transparent;color:var(--text-sub);font-size:13px;font-weight:500;
  border:1px solid var(--border);cursor:pointer;transition:all var(--t);font-family:inherit;
}
.tool-btn-ghost:hover{border-color:#999;color:var(--text)}

/* Status */
.tool-status{font-size:11px;display:flex;align-items:center;gap:4px;margin-top:6px;min-height:16px}
.tool-status--success{color:#1e8e3e}
.tool-status--error{color:#d93025}
.tool-status--info{color:var(--text-faint)}
.tool-status__dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

/* Options */
.tool-options{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px;padding:10px 0;border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}
.tool-option{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:var(--text-sub);user-select:none}
.tool-option input[type=checkbox]{width:14px;height:14px;accent-color:var(--accent)}
.tool-option input[type=radio]{width:14px;height:14px;accent-color:var(--accent)}
.tool-option select{padding:4px 8px;border:1px solid var(--border);border-radius:var(--r-sm);font-size:12px;background:#fff;color:var(--text);outline:none;font-family:inherit;cursor:pointer}
.tool-option select:focus{border-color:var(--accent)}

/* Password Generator */
.pwgen-length-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.pwgen-length-label{font-size:12px;font-weight:500;color:var(--text);min-width:50px}
.pwgen-slider{flex:1;height:4px;-webkit-appearance:none;appearance:none;background:var(--border);border-radius:2px;outline:none}
.pwgen-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;transition:all var(--t)}
.pwgen-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}
.pwgen-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:none}
.pwgen-length-value{font-size:15px;font-weight:700;color:var(--text);min-width:28px;text-align:right;font-variant-numeric:tabular-nums}
.pwgen-display{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pwgen-output{
  flex:1;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-sm);
  font-size:17px;font-weight:600;color:var(--text);background:#fafafa;
  font-family:inherit;letter-spacing:.04em;word-break:break-all;
  min-height:44px;display:flex;align-items:center;
}
.pwgen-strength{display:flex;gap:3px;margin:8px 0 4px}
.pwgen-bar{flex:1;height:4px;border-radius:2px;background:var(--border);transition:background var(--t)}
.pwgen-bar.weak{background:#d93025}
.pwgen-bar.medium{background:#f9a825}
.pwgen-bar.strong{background:#1e8e3e}
.pwgen-strength-text{font-size:11px;color:var(--text-faint);margin-bottom:12px}

/* Crypto */
.crypto-algo-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.algo-pill{
  padding:5px 12px;border-radius:var(--r-sm);font-size:12px;font-weight:500;
  background:#fff;border:1px solid var(--border);color:var(--text-sub);
  cursor:pointer;transition:all var(--t);font-family:inherit;
}
.algo-pill:hover{border-color:#999;color:var(--text)}
.algo-pill.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Related */
.related{margin-top:20px;padding-top:16px;border-top:1px solid var(--border-light)}
.related__title{font-size:12px;font-weight:600;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.related__list{display:flex;flex-wrap:wrap;gap:6px}
.related__item{
  padding:5px 12px;border-radius:var(--r-sm);font-size:12px;
  background:#fff;border:1px solid var(--border);color:var(--text-sub);
  transition:all var(--t);text-decoration:none;
}
.related__item:hover{border-color:#999;color:var(--text)}

/* SEO Section */
.seo-section{margin-top:20px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:20px 24px}
.seo-section h2{font-size:15px;font-weight:700;margin-bottom:10px;letter-spacing:-.01em}
.seo-section p{font-size:13px;color:var(--text-sub);line-height:1.7;margin-bottom:10px}
.seo-section ol{padding-left:20px;margin-bottom:10px}
.seo-section li{font-size:13px;color:var(--text-sub);margin-bottom:4px}
.seo-section h3{font-size:13px;font-weight:600;margin-bottom:3px}

/* Toast */
.reskit-toast{
  position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(10px);
  padding:8px 20px;background:var(--accent);color:#fff;
  font-size:13px;border-radius:var(--r-sm);z-index:9999;
  opacity:0;transition:opacity var(--t),transform var(--t);pointer-events:none;
}
.reskit-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Tool Grid Responsive */
@media(max-width:1024px){.tool-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.tool-grid{grid-template-columns:1fr}.tool-wrap{padding:16px}}

/* ===== Card Tool Icon (legacy) ===== */
.card__tool-icon{width:36px;height:36px}
.card__tool-icon svg{width:36px;height:36px;stroke:#bbb;fill:none;stroke-width:1.5}

/* ===== Compact Tool Card ===== */
.card--tool{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:10px 12px;cursor:pointer;text-decoration:none;color:inherit;
  display:flex;flex-direction:row;align-items:center;gap:10px;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.card--tool:hover{border-color:var(--accent);box-shadow:0 2px 12px rgba(0,0,0,.06);transform:translateY(-2px)}
.card--tool__icon{
  width:28px;height:28px;border-radius:6px;
  background:#f5f5f5;border:1px solid var(--border-light);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background var(--t),border-color var(--t);
}
.card--tool:hover .card--tool__icon{background:var(--accent);border-color:var(--accent)}
.card--tool__icon svg{width:14px;height:14px;stroke:#999;fill:none;stroke-width:1.5;transition:stroke var(--t)}
.card--tool:hover .card--tool__icon svg{stroke:#fff}
.card--tool__text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.card--tool__name{
  font-size:13px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card--tool__desc{
  font-size:11px;color:var(--text-sub);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}

@media(max-width:480px){
  .card--tool{padding:8px 10px;gap:8px}
  .card--tool__icon{width:22px;height:22px}
  .card--tool__icon svg{width:12px;height:12px}
  .card--tool__name{font-size:12px}
  .card--tool__desc{font-size:12px;-webkit-line-clamp:2;white-space:normal}
}


/* ===== SEO Collapsible ===== */
.seo-details{border:none;background:none;cursor:pointer}
.seo-summary{
  font-size:13px;font-weight:600;color:var(--text-sub);
  cursor:pointer;list-style:none;padding:0;
  display:flex;align-items:center;gap:6px;
  transition:color var(--t);
}
.seo-summary:hover{color:var(--text)}
.seo-summary::-webkit-details-marker{display:none}
.seo-summary::before{
  content:"";width:6px;height:6px;border-right:1.5px solid var(--text-faint);
  border-bottom:1.5px solid var(--text-faint);transform:rotate(45deg);
  transition:transform var(--t);flex-shrink:0;
}
.seo-details[open] .seo-summary::before{transform:rotate(225deg)}
.seo-content{margin-top:12px}
.seo-content h2{font-size:14px;font-weight:700;margin-bottom:8px;letter-spacing:-.01em}
.seo-content p{font-size:12px;color:var(--text-sub);line-height:1.6;margin-bottom:8px}
.seo-content ol{padding-left:18px;margin-bottom:10px}
.seo-content li{font-size:12px;color:var(--text-sub);margin-bottom:4px}
.seo-content h3{font-size:12px;font-weight:600;margin-bottom:3px;color:var(--text)}

/* ===== UX 1.0.7 ===== */
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  position:fixed;left:12px;top:12px;z-index:10000;width:auto;height:auto;overflow:visible;
  background:var(--accent);color:#fff;padding:8px 12px;border-radius:6px;font-size:12px;text-decoration:none;
}

.topbar__login-link--compact{padding:5px 10px;font-size:11px}
.topbar__user--icon{padding:2px;border:none;background:transparent}
.topbar__user--icon .topbar__user-avatar{width:28px;height:28px;font-size:11px}

.topbar-desktop__search{
  display:flex;align-items:center;gap:6px;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-sm);
  padding:0 10px;height:32px;min-width:220px;max-width:320px;
}
.topbar-desktop__search-icon{width:14px;height:14px;color:var(--text-faint);flex-shrink:0}
.topbar-desktop__search-input{
  border:0;outline:0;background:transparent;font:inherit;font-size:12px;color:var(--text);width:100%;
}
.topbar-desktop__search-input::placeholder{color:#bbb}

.pw-field{position:relative}
.pw-field .form-input{padding-right:40px}
.pw-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border:0;background:transparent;cursor:pointer;
  color:var(--text-faint);display:flex;align-items:center;justify-content:center;border-radius:4px;
}
.pw-toggle:hover{color:var(--text);background:#f3f3f3}
.pw-toggle svg{width:16px;height:16px}

.account-profile{
  display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border-light)
}
.account-profile__avatar{
  width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;flex-shrink:0
}
.account-profile__name{font-size:14px;font-weight:600}
.account-profile__email{font-size:12px;color:var(--text-faint)}
.account-profile__plan{margin-left:auto;padding:3px 10px;border-radius:4px;background:#1e8e3e;color:#fff;font-size:10px;font-weight:600}

.account-block{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border-light)}
.account-block__title{font-size:13px;font-weight:600;margin-bottom:12px;color:var(--text)}
.account-pref-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--text-sub)}
.account-lang-btns{display:flex;gap:6px}
.account-lang-btn{
  min-width:42px;height:28px;padding:0 10px;border-radius:6px;border:1px solid var(--border);
  background:#fff;color:var(--text-sub);font-size:12px;cursor:pointer
}
.account-lang-btn.is-active,.account-lang-btn:hover{border-color:var(--accent);color:var(--text);background:#f7f7f7}

.account-upgrade{
  margin-bottom:16px;padding:12px 14px;border:1px dashed var(--border);border-radius:8px;background:#fafafa
}
.account-upgrade__title{font-size:13px;font-weight:600;margin-bottom:4px}
.account-upgrade__desc{font-size:12px;color:var(--text-sub);line-height:1.5}

.btn--danger{margin-top:8px;background:transparent;color:#d93025;border:1px solid var(--border)}
.btn--danger:hover{border-color:#d93025;background:#fff5f5}

.seo-lang-note{
  font-size:12px;color:var(--text-faint);margin-bottom:10px;padding:8px 10px;
  background:#f7f7f7;border-radius:6px;border:1px solid var(--border-light)
}

@media(max-width:768px){
  .topbar-desktop__search{display:none}
}


/* ===== P0 Tools extras ===== */
.tool-input--sm{width:84px;padding:4px 8px}
.tool-textarea--tall{min-height:200px}
.tool-note{font-size:11px;color:var(--text-faint);margin-top:8px;line-height:1.5}
.qr-preview{
  margin-top:8px;padding:16px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:#fafafa;display:flex;align-items:center;justify-content:center;min-height:200px
}
.qr-preview canvas{
  width:min(100%,280px);
  height:auto;
  aspect-ratio:1/1;
  max-width:100%;
  image-rendering:pixelated;
}
.ts-now{
  margin-bottom:14px;padding:12px 14px;border:1px solid var(--border-light);border-radius:var(--r-sm);background:#fafafa
}
.ts-now__label{font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.ts-now__value{font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.ts-now__meta{font-size:12px;color:var(--text-sub);margin-top:4px;font-variant-numeric:tabular-nums}
.ts-now__sep{margin:0 6px;color:var(--text-faint)}
.jwt-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.regex-preview{
  min-height:100px;padding:12px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:#fafafa;font-size:13px;line-height:1.7;white-space:pre-wrap;word-break:break-word
}
.regex-preview mark{
  background:var(--accent);color:#fff;border-radius:2px;padding:0 2px
}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 14px}
.stat-card{
  background:#fafafa;border:1px solid var(--border-light);border-radius:var(--r-sm);
  padding:12px 10px;text-align:center
}
.stat-card__num{font-size:18px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.stat-card__label{font-size:10px;color:var(--text-faint);margin-top:2px;text-transform:uppercase;letter-spacing:.04em}
.case-grid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
@media(max-width:768px){
  .jwt-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
}

/* ===== User Menu Dropdown ===== */
.user-menu{position:relative}
.user-menu__trigger{cursor:pointer;border:none;background:transparent;font-family:inherit}
.user-menu__dropdown{
  position:absolute;top:calc(100% + 6px);right:0;min-width:180px;
  background:#fff;border:1px solid var(--border);border-radius:var(--r);
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  padding:6px;z-index:200;opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity var(--t),transform var(--t),visibility var(--t);
}
.user-menu.open .user-menu__dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.user-menu__item{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:var(--r-sm);
  font-size:12px;color:var(--text-sub);text-decoration:none;
  transition:background var(--t),color var(--t);cursor:pointer;
}
.user-menu__item:hover{background:#f5f5f5;color:var(--text)}
.user-menu__item svg{width:14px;height:14px;flex-shrink:0;stroke:currentColor;fill:none}
.user-menu__divider{height:1px;background:var(--border-light);margin:4px 0}
.user-menu__item--theme{gap:6px;cursor:pointer}
.user-menu__item--theme>span{flex:1}
.theme-chevron{width:14px;height:14px;flex-shrink:0;stroke:currentColor;fill:none;transition:transform var(--t)}
.user-menu__item--theme.expanded .theme-chevron{transform:rotate(180deg)}

/* ===== Color Picker Panel ===== */
.color-picker-panel{
  max-height:0;overflow:hidden;
  transition:max-height var(--t);
}
.color-picker-panel.open{max-height:260px}
.cp-sv{
  position:relative;width:100%;height:120px;border-radius:var(--r-sm);
  cursor:crosshair;overflow:hidden;border:1px solid var(--border-light);
  margin:4px 0 6px;
}
.cp-sv__white{position:absolute;inset:0;background:linear-gradient(to right,#fff,transparent)}
.cp-sv__black{position:absolute;inset:0;background:linear-gradient(to top,#000,transparent)}
.cp-cursor{
  position:absolute;width:14px;height:14px;border:2px solid #fff;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.2);
}
.cp-hue{
  position:relative;width:100%;height:12px;border-radius:6px;cursor:pointer;
  background:linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%);
}
.cp-hue__handle{
  position:absolute;width:16px;height:16px;border:2px solid #fff;border-radius:50%;
  top:50%;transform:translate(-50%,-50%);pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.2);
}
.cp-row{display:flex;align-items:center;gap:6px;margin-top:8px}
.cp-preview{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);flex-shrink:0}
.cp-hex{
  flex:1;border:1px solid var(--border);border-radius:var(--r-sm);
  padding:5px 8px;font-family:inherit;font-size:12px;color:var(--text);
  background:#fafafa;outline:none;text-transform:uppercase;letter-spacing:.02em;
  transition:border-color var(--t);
}
.cp-hex:focus{border-color:#999}
.cp-reset{
  width:28px;height:28px;border-radius:6px;border:1px solid var(--border);
  background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all var(--t);
}
.cp-reset:hover{border-color:#999}
.cp-reset svg{width:13px;height:13px;stroke:var(--text-faint);fill:none;stroke-width:1.5}
.theme-toggle-btn{
  width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--border);
  background:#fff;display:flex;align-items:center;justify-content:center;
  color:var(--text-sub);transition:all var(--t);flex-shrink:0;
}
.theme-toggle-btn:hover{border-color:#999;color:var(--text)}
.theme-toggle-btn svg{width:16px;height:16px;stroke:currentColor;fill:none}

@media(max-width:768px){
  .user-menu__dropdown{right:-4px;min-width:160px}
  .cp-sv{height:100px}
  .cp-hex{font-size:11px;padding:4px 6px}
  .cp-preview{width:24px;height:24px}
  .cp-reset{width:24px;height:24px}
  .cp-reset svg{width:11px;height:11px}
}

/* == convert tools == */
.nav__item--sub{padding-left:22px}
.nav__item--sub .nav__icon{width:10px;height:10px;opacity:.4}
.article__meta a{color:var(--text-sub)}
.article__meta a:hover{color:var(--text)}
.article__meta-right{margin-left:auto;color:var(--text-faint);font-size:11px;letter-spacing:.02em}

.dropzone{border:1.5px dashed var(--border);border-radius:var(--r-sm);background:#fff;padding:30px 16px;text-align:center;cursor:pointer;transition:.18s}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:rgba(var(--accent-rgb),.02)}
.dropzone svg{width:22px;height:22px;margin:0 auto 8px}
.dropzone__t{font-size:13px;font-weight:600;color:var(--text)}
.dropzone__d{font-size:11px;color:var(--text-faint);margin-top:3px}

.progress{border:1px solid var(--border);border-radius:var(--r-sm);padding:14px 16px;background:#fff}
.progress__row{font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.progress__name{font-weight:600;color:var(--text);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.progress__pct{color:var(--text-sub);font-variant-numeric:tabular-nums;flex-shrink:0}
.progress__bar{height:6px;background:#eee;border-radius:3px;overflow:hidden}
.progress__bar i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .2s}
.progress__hint{font-size:11px;color:var(--text-faint);margin-top:8px}

.filebar{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;background:#fff}
.filebar__name{font-weight:600;font-size:13px;color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filebar__size{font-size:11px;color:var(--text-faint);flex-shrink:0;font-variant-numeric:tabular-nums}
.filebar__x{border:none;background:transparent;cursor:pointer;color:var(--text-faint);font-size:14px;padding:4px 8px;line-height:1;border-radius:4px;flex-shrink:0}
.filebar__x:hover{color:#d93025;background:#fff5f5}

.conv-row{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;background:#fff;font-size:13px}
.conv-row__spinner{width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:cv-spin .8s linear infinite;flex-shrink:0}
.conv-row__text{color:var(--text);font-weight:500}
.conv-row__timer{margin-left:auto;color:var(--text-faint);font-size:12px;font-variant-numeric:tabular-nums}
@keyframes cv-spin{to{transform:rotate(360deg)}}

.result{display:flex;align-items:center;gap:12px;background:#fafafa;border:1px solid var(--border-light);border-radius:var(--r-sm);padding:12px 14px}
.result__icon{width:40px;height:40px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;color:var(--accent);letter-spacing:.02em;flex-shrink:0}
.result__info{flex:1;min-width:0}
.result__name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result__size{font-size:11px;color:var(--text-faint);margin-top:2px}
.result__dl{flex-shrink:0}

.err-note{display:flex;align-items:center;gap:10px;border:1px solid rgba(217,48,37,.35);background:#fff5f5;color:#d93025;border-radius:var(--r-sm);padding:10px 14px;font-size:12px}
.err-note span{flex:1;min-width:0}
.err-note .tool-btn-ghost{padding:5px 12px;font-size:12px;border-color:rgba(217,48,37,.35);color:#d93025;flex-shrink:0}
.err-note .tool-btn-ghost:hover{border-color:#d93025}

/* convert tools — mobile */
@media(max-width:480px){
  .result{flex-wrap:wrap}
  .result__dl{width:100%;justify-content:center}
  .filebar__name{font-size:12px}
  .article__meta{flex-wrap:wrap}
  .article__meta-right{margin-left:0;width:100%}
}

/* ===== C-end polish 1.2.0 ===== */
body.sidebar-open{overflow:hidden}
.sidebar__footer--mobile{display:none}
.seo-section--compact{padding:16px 18px}
.seo-section--compact h2{font-size:13px;margin:12px 0 8px}
.seo-section--compact ol,.seo-section--compact p,.seo-section--compact li{font-size:12px}
.related__item{display:inline-flex;align-items:center}
.account-lang-btn{min-width:42px;height:28px}
.topbar__login-link,.topbar__login-link--compact{display:inline-flex;align-items:center;justify-content:center}
.hero__title{margin:0 0 4px}
.hero__desc{margin:0}
.page-head__title{margin:0}

@media(max-width:768px){
  .sidebar__footer--mobile{display:block}
}

/* ===== 1.2.6 入场动画与首帧防闪 ===== */
/* 卡片入场：纯 CSS keyframes，渲染首帧即生效（旧方案是 footer JS 把已渲染卡片打回 opacity:0 再淡入，造成闪没） */
@keyframes reskit-card-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.grid>.card{animation:reskit-card-in .32s cubic-bezier(.22,.61,.36,1) both}
.grid>.card:nth-child(4n+2){animation-delay:.06s}
.grid>.card:nth-child(4n+3){animation-delay:.12s}
.grid>.card:nth-child(4n){animation-delay:.18s}
/* 整页导航交叉过渡：Chrome/Safari 渐进增强，不支持的浏览器自动忽略 */
@view-transition{navigation:auto}
/* 中文首帧防闪：服务端输出 lang-zh class，applyLang 前先隐藏待翻译 UI 文案（i18n-ready 后立即可见；head 内联脚本 1.2s 超时兜底） */
html.lang-zh:not(.i18n-ready) [data-i18n],
html.lang-zh:not(.i18n-ready) .lang-toggle__text{visibility:hidden}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}