:root {
--c-bg-0: #090c11;
--c-bg-1: #0e1117;
--c-bg-2: #141921;
--c-bg-3: #1c2333;
--c-bg-4: #232d42;
--c-teal: #00e5b8;
--c-blue: #4d9fff;
--c-orange: #ff9f43;
--c-red: #ff6b6b;
--c-green: #4caf7d;
--c-purple: #a78bfa;
--c-text-0: #f0f4f8;
--c-text-1: #94a3b8;
--c-text-2: #64748b;
--c-text-3: #475569;
--c-border: rgba(148,163,184,.12);
--c-border-hi: rgba(0,229,184,.3);
--bg-primary: var(--c-bg-1);
--bg-surface: var(--c-bg-2);
--bg-hover: var(--c-bg-3);
--bg-nav: #111620;
--bg-content: #12171f;
--bg-black: #000;
--bg-code: #0d1117;
--bg-danger: rgba(239,68,68,.1);
--bg-warn: rgba(245,158,11,.1);
--accent-teal: var(--c-teal);
--accent-blue: var(--c-blue);
--accent-warn: var(--c-orange);
--accent-danger: var(--c-red);
--accent-red: var(--c-red);
--accent-green: var(--c-green);
--accent-orange: var(--c-orange);
--accent-purple: var(--c-purple);
--accent-teal-dark: #00b896;
--text-primary: var(--c-text-0);
--text-muted: var(--c-text-1);
--text-dim: var(--c-text-2);
--text-secondary: #cbd5e1;
--cta-fg: var(--btn-on-accent-fg);
--border-color: var(--c-border);
--border-accent: var(--c-border-hi);
--border-blue: rgba(77,159,255,.35);
--border-hi: var(--c-border-hi);
--color-danger: #f87171;
--color-info: #60a5fa;
--color-warning: #fbbf24;
--tint-teal-sm: rgba(0,229,184,.06);
--tint-teal-md: rgba(0,229,184,.12);
--tint-teal-lg: rgba(0,229,184,.18);
--tint-teal-xl: rgba(0,229,184,.25);
--tint-teal-xxl: rgba(0,229,184,.3);
--tint-blue-sm: rgba(77,159,255,.06);
--tint-blue-md: rgba(77,159,255,.12);
--tint-danger-sm: rgba(255,107,107,.06);
--tint-danger-md: rgba(255,107,107,.12);
--tint-warn-sm: rgba(255,159,67,.06);
--tint-warn-md: rgba(255,159,67,.12);
--tint-white-xs: rgba(255,255,255,.02);
--tint-white-sm: rgba(255,255,255,.04);
--tint-white-md: rgba(255,255,255,.08);
--tint-black-sm: rgba(0,0,0,.2);
--tint-black-md: rgba(0,0,0,.25);
--tint-black-lg: rgba(0,0,0,.3);
--tint-black-xl: rgba(0,0,0,.5);
--scrim: rgba(14,17,23,.5);
--scrim-heavy: rgba(14,17,23,.85);
--scrim-light: rgba(14,17,23,.2);
--shadow-sm: rgba(0,0,0,.3);
--shadow-md: rgba(0,0,0,.4);
--shadow-lg: rgba(0,0,0,.5);
--overlay-scrim: rgba(0,0,0,.6);
--btn-on-accent-fg: #04140f;
--glow-t: 0 0 25px -5px var(--c-teal);
--glow-b: 0 0 25px -5px var(--c-blue);
--font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
--font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--font-ui: var(--font-mono);
--font-prose: var(--font-body);
--font-sans: var(--font-body);
--font-primary: var(--font-mono);
--text-2xs: 10px;
--text-xs: 11px;
--text-sm: 12px;
--text-base: 14px;
--text-md: 15px;
--text-lg: 18px;
--text-xl: 22px;
--text-2xl: 28px;
--text-3xl: 36px;
--font-size-base: 14px;
--line-height: 1.6;
--line-height-tight: 1.3;
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--gap-sm: 8px;
--gap-md: 16px;
--gap-lg: 24px;
--r-xs: 2px;
--r-sm: 4px;
--r-md: 8px;
--r-lg: 12px;
--r-xl: 16px;
--r-full: 9999px;
--radius: var(--r-md);
--radius-sm: var(--r-sm);
--radius-lg: var(--r-lg);
--e-fast: .12s;
--e-med: .22s;
--e-slow: .35s;
--e-ease: cubic-bezier(.16,1,.3,1);
--e-spring: cubic-bezier(.34,1.56,.64,1);
--bp-mobile: 480px;
--bp-phablet: 600px;
--bp-tablet: 768px;
--bp-laptop: 1024px;
--bp-desktop: 1280px;
}
body::before{content: '';
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V18L28 2l28 16v32L28 66zM28 66v34M56 50l-28 16M0 50l28 16' fill='none' stroke='%2300e5b8' stroke-width='.5' stroke-opacity='.05'/%3E%3C/svg%3E");
background-size: 56px 100px;}
body::after{content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background: radial-gradient(ellipse 100% 55% at 50% 0%, transparent 25%, var(--bg-primary) 85%);}
.app2-bar{display: flex;
align-items: center;
gap: 8px;
padding: 0 20px;
height: 48px;
background: var(--bg-nav);
border-bottom: 1px solid var(--border-color);
position: sticky;
top: 0;
z-index: 200;}
.app2-logo{display: flex;
align-items: center;
gap: 7px;
font-family: var(--font-mono);
font-size: 14px;
font-weight: 700;
color: var(--text-primary);
text-decoration: none;
letter-spacing: -.3px;
flex-shrink: 0;
margin-right: 6px;}
.app2-logo svg{color: var(--accent-teal); flex-shrink: 0;}
.app2-logo span span{color: var(--text-muted); font-weight: 400;}
.app2-nav{display: flex;
align-items: center;
gap: 2px;
flex: 1;
overflow: hidden;}
.app2-nav a{font-family: var(--font-mono);
font-size: 11px;
white-space: nowrap;
padding: 5px 9px;
border-radius: var(--radius-sm);
color: var(--text-muted);
text-decoration: none;
transition: color var(--e-fast), background var(--e-fast);}
.app2-nav a:hover,
.app2-nav a.active{color: var(--accent-teal);
background: var(--tint-teal-sm);}
.app2-nav-dropdown{position: relative;}
.app2-nav-dropdown-trigger{font-family: var(--font-mono);
font-size: 11px;
white-space: nowrap;
padding: 6px 10px;
border: none;
background: none;
border-radius: var(--radius-sm);
color: var(--text-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 7px;
transition: color var(--e-fast), background var(--e-fast);}
.app2-nav-dropdown-trigger:hover,
.app2-nav-dropdown-trigger.active{color: var(--accent-teal);
background: var(--tint-teal-sm);}
.app2-nav-caret{font-size: 8px;
opacity: .6;
transition: transform var(--e-fast), opacity var(--e-fast);}
.app2-nav-dropdown-trigger:hover .app2-nav-caret,
.app2-nav-dropdown-trigger.active .app2-nav-caret{opacity: 1;}
.app2-nav-dropdown.open .app2-nav-caret,
.app2-nav-dropdown:hover .app2-nav-caret,
.app2-nav-dropdown:focus-within .app2-nav-caret{transform: rotate(180deg);}
.app2-nav-dropdown-menu{position: fixed;
min-width: 190px;
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: 10px;
box-shadow: 0 16px 36px var(--shadow-lg), 0 0 0 1px rgba(45,212,191,.06);
padding: 6px;
display: none;
flex-direction: column;
gap: 2px;
z-index: 200;
opacity: 0;
transform: translateY(-4px);
transition: opacity .16s ease, transform .16s ease;}
.app2-nav-dropdown-menu::before{content: "";
position: absolute;
top: 0; left: 12px; right: 12px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent-teal), transparent);
opacity: .5;
border-radius: 2px;}
.app2-nav-dropdown-menu a{font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
white-space: nowrap;
padding: 7px 10px 7px 8px;
border-radius: 7px;
color: var(--text-secondary);
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
transition: color var(--e-fast), background var(--e-fast), transform var(--e-fast);}
.app2-nav-dropdown-menu a:hover,
.app2-nav-dropdown-menu a.active{color: var(--accent-teal);
background: var(--tint-teal-sm);
transform: translateX(2px);}
.app2-nav-dropdown.open .app2-nav-dropdown-menu{display: flex;
opacity: 1;
transform: translateY(0);}
.nav-icon{display: inline-flex;
align-items: center;
justify-content: center;
width: 21px;
height: 21px;
border-radius: 6px;
background: var(--tint-teal-sm);
font-size: 12px;
flex-shrink: 0;
transition: background var(--e-fast), transform var(--e-fast);}
.app2-nav-dropdown-trigger .nav-icon{width: 20px; height: 20px; font-size: 12px; background: none;}
.app2-nav-dropdown-menu a:hover .nav-icon,
.app2-nav-dropdown-menu a.active .nav-icon{background: var(--accent-teal);
transform: scale(1.08) rotate(-4deg);}

.app2-nav-dropdown-menu--tools{
  min-width: 240px;
  max-height: min(70vh, 560px);
  overflow-y: auto;
}
.app2-nav-dropdown-section{
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  opacity: .7;
  padding: 10px 8px 4px;
  border-top: 1px solid var(--border-default);
  margin-top: 4px;
}
.app2-nav-dropdown-section:first-child{ border-top: none; margin-top: 0; padding-top: 4px; }
.app2-nav-dropdown-alltools{
  font-weight: 700 !important;
  color: var(--accent-teal) !important;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: 2px;
  padding-bottom: 9px !important;
}

/* Search palette */
.sk-palette-bg{position: fixed;
inset: 0;
background: var(--overlay-scrim);
z-index: 300;
display: none;
align-items: flex-start;
justify-content: center;
padding: 12vh 16px 16px;}
.sk-palette-bg.open{display: flex;}
.sk-palette{width: 100%;
max-width: 560px;
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-md, 8px);
box-shadow: 0 20px 60px var(--shadow-lg);
overflow: hidden;
display: flex;
flex-direction: column;
max-height: 70vh;}
.sk-palette-inputrow{display: flex;
align-items: center;
gap: 8px;
padding: 12px 14px;
border-bottom: 1px solid var(--border-default);}
.sk-palette-icon{font-size: 14px; opacity: .6;}
.sk-palette-input{flex: 1;
background: none;
border: none;
outline: none;
font-family: var(--font-mono);
font-size: 14px;
color: var(--text-primary);}
.sk-palette-input::placeholder{color: var(--text-muted);}
.sk-palette-esc{font-family: var(--font-mono);
font-size: 9px;
color: var(--text-muted);
border: 1px solid var(--border-default);
border-radius: 3px;
padding: 2px 5px;}
.sk-palette-results{overflow-y: auto;
flex: 1;
padding: 6px;}
.sk-palette-item{display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 10px;
border-radius: var(--radius-sm);
text-decoration: none;
margin-bottom: 1px;}
.sk-palette-item--sel,
.sk-palette-item:hover{background: var(--tint-teal-sm);}
.sk-palette-item-type{font-family: var(--font-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--accent-teal);}
.sk-palette-item-title{font-size: 13px;
color: var(--text-primary);
font-weight: 600;}
.sk-palette-item-snip{font-size: 11px;
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;}
.sk-palette-empty,
.sk-palette-hint{padding: 24px 14px;
text-align: center;
font-size: 12px;
color: var(--text-muted);}
.sk-palette-foot{display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
border-top: 1px solid var(--border-default);
font-size: 10px;
color: var(--text-muted);
font-family: var(--font-mono);}
.sk-palette-foot kbd{border: 1px solid var(--border-default);
border-radius: 3px;
padding: 1px 4px;
font-size: 9px;
margin-right: 2px;}
.sk-palette-viewall{color: var(--accent-teal);
text-decoration: none;}
.sk-palette-viewall:hover{text-decoration: underline;}
@media (max-width: 768px){
.sk-palette-bg{padding: 8vh 12px 12px;}
}
.app2-mob-nav-section{font-family: var(--font-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-muted);
opacity: .7;
padding: 14px 4px 4px;
border-top: 1px solid var(--border-default);
margin-top: 4px;
display: flex;
align-items: center;
gap: 6px;}
.app2-mob-nav-section:first-child{border-top: none; margin-top: 0; padding-top: 4px;}
.app2-mob-nav-subitem{ padding-left: 30px !important; font-size: 12px !important; }
.app2-mob-nav-subitem .nav-icon{ width: 18px; height: 18px; font-size: 11px; flex-shrink: 0; }
.app2-mob-nav-tools-root{ border-top: 1px solid var(--border-default); margin-top: 4px; padding-top: 12px !important; }
.app2-mob-tool-cat-toggle{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  opacity: .75;
  padding: 9px 10px 9px 30px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.app2-mob-tool-cat-toggle:active{ opacity: 1; color: var(--accent-teal); }
.app2-mob-tool-cat-caret{ font-size: 10px; transition: transform .15s ease; }
.app2-mob-tool-cat.open .app2-mob-tool-cat-caret{ transform: rotate(180deg); }
.app2-mob-tool-cat-items{ display: none; flex-direction: column; gap: 3px; }
.app2-mob-tool-cat.open .app2-mob-tool-cat-items{ display: flex; }
.app2-hamburger{display: none;
background: none;
border: none;
color: var(--text-muted);
padding: 6px;
border-radius: var(--radius-sm);
cursor: pointer;
margin-left: auto;
transition: background var(--e-fast);}
.app2-hamburger:hover{background: var(--bg-surface); color: var(--text-primary);}
@media (max-width: 768px) {
.app2-nav { display: none; }
.app2-hamburger { display: flex; }
}
.app2-auth--links{display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
flex-shrink: 0;
font-family: var(--font-mono);}
.app2-auth-link{color: var(--text-muted);
text-decoration: none;
padding: 4px 8px;
border-radius: var(--radius-sm);
transition: color var(--e-fast);}
.app2-auth-link:hover{color: var(--accent-teal);}
.app2-auth-link--accent{background: var(--accent-teal);
color: var(--cta-fg) !important;
font-weight: 700;
padding: 4px 12px;}
.app2-auth-link--accent:hover{opacity: .88; text-decoration: none;}
.ua-wrap{position: relative; flex-shrink: 0;}
.ua-btn{display: flex;
align-items: center;
gap: 7px;
background: none;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 4px 9px;
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 12px;
cursor: pointer;
transition: border-color var(--e-fast);}
.ua-btn:hover{border-color: var(--border-accent);}
.ua-avatar{width: 24px; height: 24px; border-radius: 50%; object-fit: cover;}
.ua-initials{width: 24px; height: 24px; border-radius: 50%;
background: var(--tint-teal-md);
color: var(--accent-teal);
font-size: 10px; font-weight: 700;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
font-family: var(--font-mono);}
.ua-name{max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ua-caret{opacity: .45; font-size: 10px;}
.ua-menu{display: none;
position: absolute;
top: calc(100% + 6px);
right: 0;
background: var(--bg-surface);
border: 1px solid var(--border-accent);
border-radius: var(--radius);
min-width: 180px;
box-shadow: 0 8px 32px var(--shadow-lg), var(--glow-t);
z-index: 999;
overflow: hidden;}
.ua-menu--open{display: block;}
.ua-menu-head{display: flex; align-items: center; gap: 10px;
padding: 12px 14px; border-bottom: 1px solid var(--border-color);}
.ua-menu-name{font-size: 13px; font-weight: 600; color: var(--text-primary);}
.ua-menu-role{font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-mono);}
.ua-sep{border: none; border-top: 1px solid var(--border-color); margin: 4px 0;}
.ua-menu-item{display: block; width: 100%; text-align: left;
background: none; border: none; cursor: pointer;
padding: 9px 14px; font-size: 12px;
font-family: var(--font-mono);
color: var(--text-muted); text-decoration: none;
transition: background var(--e-fast), color var(--e-fast);}
.ua-menu-item:hover{background: var(--tint-white-sm); color: var(--text-primary);}
.ua-menu-item--danger:hover{color: var(--accent-danger);}
.app2-mob{position: fixed; inset: 0; z-index: 500;
pointer-events: none;
display: flex; justify-content: flex-end;}
.app2-mob.open{pointer-events: auto;}
.app2-mob-backdrop{position: absolute; inset: 0;
background: var(--scrim);
opacity: 0; transition: opacity var(--e-med);}
.app2-mob.open .app2-mob-backdrop{opacity: 1;}
.app2-mob-drawer{position: relative; width: 260px; height: 100%;
background: var(--bg-surface);
border-left: 1px solid var(--border-color);
display: flex; flex-direction: column; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateX(100%);
transition: transform var(--e-med) var(--e-ease);
box-shadow: -8px 0 32px var(--shadow-md);}
.app2-mob.open .app2-mob-drawer{transform: translateX(0);}
.app2-mob-nav{padding-bottom: 24px;}
.app2-mob-close{background: none; border: none; color: var(--text-muted);
font-size: 16px; align-self: flex-end; padding: 4px 8px;
border-radius: var(--radius-sm); cursor: pointer; margin-bottom: 14px;}
.app2-mob-close:hover{color: var(--text-primary); background: var(--tint-white-sm);}
.app2-mob-auth{font-size: 12px; margin-bottom: 16px;
padding-bottom: 16px; border-bottom: 1px solid var(--border-color);
font-family: var(--font-mono);}
.app2-mob-nav{display: flex; flex-direction: column; gap: 3px;}
.app2-mob-nav a{font-size: 13px; font-weight: 500; color: var(--text-secondary); padding: 9px 10px 9px 8px;
border-radius: 9px; text-decoration: none;
font-family: var(--font-mono);
display: flex; align-items: center; gap: 10px;
transition: background var(--e-fast), color var(--e-fast), transform var(--e-fast);}
.app2-mob-nav a:hover,
.app2-mob-nav a.active{background: var(--tint-teal-sm); color: var(--accent-teal); transform: translateX(2px);}
.app2-mob-nav a .nav-icon{width: 21px; height: 21px; font-size: 12px; border-radius: 6px;}
.app2-mob-nav a:hover .nav-icon,
.app2-mob-nav a.active .nav-icon{background: var(--accent-teal); transform: scale(1.08) rotate(-4deg);}
.app2-main{max-width: 1100px; margin: 0 auto; padding: 32px 20px 80px;}
.app2-main:has(.hp-hero){padding-top: 8px;}
.app2-loading{text-align: center; padding: 80px 20px;
color: var(--text-dim); font-family: var(--font-mono); font-size: 12px;}
.app2-404{text-align: center; padding: 80px 20px;}
.app2-404 h1{font-size: 72px; color: var(--text-dim); line-height: 1; margin-bottom: 14px;}
.app2-404 p{color: var(--text-muted); font-size: 13px;}
.hp-hero{padding: 0 0 36px; max-width: 700px;}
.hp-hero__title{font-size: clamp(26px, 5vw, 42px) !important;
font-weight: 800 !important;
letter-spacing: -.8px;
line-height: 1.1;
margin-bottom: 12px;
color: var(--text-primary) !important;
opacity: 1 !important;}
.hp-cursor{animation: blink 1s step-end infinite; color: var(--accent-teal);}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.hp-hero__sub{font-size: 14px; color: var(--text-muted);
max-width: 520px; line-height: 1.7; margin-bottom: 4px;
font-family: var(--font-body, sans-serif);}
.hp-stats{display: flex; flex-wrap: wrap; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--bg-surface); overflow: hidden; margin-bottom: 28px;}
.hp-hero__stats{margin-top: 22px; margin-bottom: 0;}
.hp-stat{
  position: relative;
  display: flex; align-items: center; gap: 7px;
  padding: 9px 16px; font-size: 12px;
  transition: background .15s ease;
}
a.hp-stat{ color: inherit; text-decoration: none; cursor: pointer; }
.hp-stat:not(:last-child)::after{
  content: ''; position: absolute; right: 0; top: 22%; bottom: 22%; width: 1px;
  background: linear-gradient(180deg, transparent, var(--border-color) 35%, var(--border-color) 65%, transparent);
}
.hp-stat:hover{ background: var(--bg-hover); }
.hp-stat:hover:not(:last-child)::after{ background: linear-gradient(180deg, transparent, var(--tint-teal-xl) 35%, var(--tint-teal-xl) 65%, transparent); }
.hp-stat__icon{font-size: 13px; line-height: 1; color: var(--accent-teal); opacity: .85;}
.hp-stat__count{font-size: 13px; font-weight: 700; font-family: var(--font-mono); color: var(--text-primary); line-height: 1;}
.hp-stat__label{font-size: 11px; color: var(--text-dim); font-family: var(--font-mono);}

.hp-section{margin-bottom: 40px;}
.hp-section__head{display: flex; align-items: center; justify-content: space-between;
margin-bottom: 16px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px;}
.hp-section__title{font-size: 11px; font-family: var(--font-mono); text-transform: uppercase;
letter-spacing: .1em; color: var(--accent-teal); font-weight: 700;}
.hp-section__more{font-size: 11px; color: var(--text-dim); text-decoration: none; font-family: var(--font-mono);}
.hp-section__more:hover{color: var(--accent-teal);}
.hp-cards{display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 10px;}
.hp-card{background: var(--bg-surface); border: 1px solid var(--border-color);
border-radius: var(--radius); padding: 14px; text-decoration: none;
color: var(--text-primary); display: flex; flex-direction: column; gap: 6px;
transition: border-color var(--e-fast), transform var(--e-fast);}
.hp-card:hover{border-color: var(--border-accent); transform: translateY(-1px); text-decoration: none;}
.hp-card__title{font-size: 13px; font-weight: 600; line-height: 1.4;}
.hp-card__meta{display: flex; gap: 10px; font-size: 10px; color: var(--text-dim); font-family: var(--font-mono);}
.hp-empty{color: var(--text-dim); font-size: 13px; padding: 24px 0; text-align: center; font-family: var(--font-mono);}
.sec-wrap{background: var(--bg-surface); border: 1px solid var(--border-color);
border-radius: var(--radius); padding: 16px 20px; margin-bottom: 28px;}
.sec-header{display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px; flex-wrap: wrap; gap: 8px;}
.sec-title{font-size: 11px; font-family: var(--font-mono); font-weight: 700;
text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim);}
.sec-badge{font-size: 10px; font-family: var(--font-mono); text-transform: uppercase;
letter-spacing: .1em; padding: 3px 10px; border-radius: var(--r-sm);
background: var(--tint-teal-md); color: var(--accent-teal);
border: 1px solid var(--tint-teal-xxl);
display: inline-flex; align-items: center; gap: 6px;}
.sec-pulse{width: 7px; height: 7px; border-radius: 50%;
background: var(--accent-teal); flex-shrink: 0;
animation: sec-breathe 2.5s ease-in-out infinite;}
@keyframes sec-breathe { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.7)} }
.sec-grid{display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 12px;}
.sec-stat{display: flex; flex-direction: column; gap: 2px; min-width: 80px;}
.sec-stat-val{font-size: 24px; font-weight: 800;
font-family: var(--font-mono); color: var(--accent-teal); line-height: 1;}
.sec-stat-lbl{font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-mono);}
.sec-skeleton{color: var(--border-color) !important; animation: sec-breathe 1.5s ease infinite;}
.sec-sparkline{flex: 1; min-width: 140px; max-width: 200px; opacity: .65; align-self: center;}
.sec-footer{display: flex; align-items: center; justify-content: space-between;
font-size: 10px; color: var(--text-dim); font-family: var(--font-mono);
flex-wrap: wrap; gap: 6px; margin-top: 8px;
padding-top: 10px; border-top: 1px solid var(--border-color);}
.sec-last, .sec-spark-lbl{opacity: .6;}
.ct-index{display: flex; flex-direction: column; gap: 8px;}
.ct-index--grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;}
@media (max-width: 640px){
  .ct-index--grid{grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;}
}
@media (max-width: 380px){
  .ct-index--grid{grid-template-columns: 1fr; gap: 10px;}
}
.ct-view-toggle{display: inline-flex; align-items: center; gap: 2px; margin-left: auto;
border: 1px solid var(--border-color); border-radius: var(--r-md); padding: 2px; background: var(--bg-surface);}
.ct-view-toggle button{display: flex; align-items: center; justify-content: center;
width: 26px; height: 24px; border: none; background: transparent; border-radius: var(--r-sm);
color: var(--text-dim); cursor: pointer; transition: background var(--e-fast), color var(--e-fast);}
.ct-view-toggle button:hover{color: var(--text-primary);}
.ct-view-toggle button.active{background: var(--accent-teal); color: var(--btn-on-accent-fg);}
.ct-view-toggle button svg{width: 14px; height: 14px;}

.hw-card::after{content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: var(--accent-teal);
transform: scaleY(0); transform-origin: bottom;
transition: transform var(--e-med) var(--e-ease);}
.hw-card:hover{border-color: var(--border-accent);
transform: translateX(4px);
box-shadow: -4px 0 0 0 var(--accent-teal-dark, #00b896), 0 4px 20px var(--shadow-sm);
text-decoration: none;}
.hw-card:hover::after{transform: scaleY(1);}
.hw-card__cat{display: inline-block; font-size: 9px; font-family: var(--font-mono);
font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
padding: 2px 8px; border-radius: var(--r-sm); margin-bottom: 9px;
background: var(--tint-teal-sm); color: var(--accent-teal); border: 1px solid var(--tint-teal-xl);}
.hw-card__cat--laser{background: var(--tint-warn-sm); color: var(--accent-orange); border-color: var(--tint-warn-md);}
.hw-card__cat--cnc{background: var(--tint-blue-sm); color: var(--accent-blue); border-color: var(--border-blue);}
.hw-card__cat--electronics,
.hw-card__cat--flipper-zero{background: rgba(167,139,250,.08); color: var(--accent-purple); border-color: rgba(167,139,250,.2);}
.hw-card__cat--raspberry-pi{background: var(--tint-danger-sm); color: var(--accent-red); border-color: var(--tint-danger-md);}
.hw-card__cat--link-homestead{background: rgba(132,204,22,.08); color: #84cc16; border-color: rgba(132,204,22,.22);}
.hw-card__cat--link-esp32-rpi{background: var(--tint-danger-sm); color: var(--accent-red); border-color: var(--tint-danger-md);}
.hw-card__cat--link-3d-print{background: var(--tint-teal-sm); color: var(--accent-teal); border-color: var(--tint-teal-xl);}
.hw-card__cat--link-laser{background: var(--tint-warn-sm); color: var(--accent-orange); border-color: var(--tint-warn-md);}
.hw-card__cat--link-cnc{background: var(--tint-blue-sm); color: var(--accent-blue); border-color: var(--border-blue);}
.hw-card__cat--link-flipper{background: rgba(167,139,250,.08); color: var(--accent-purple); border-color: rgba(167,139,250,.2);}
.hw-card__cat--link-networking{background: rgba(56,189,248,.08); color: #38bdf8; border-color: rgba(56,189,248,.22);}
.hw-card__cat--link-gaming{background: rgba(244,114,182,.08); color: #f472b6; border-color: rgba(244,114,182,.22);}
.hw-card__cat--link-local-tn{background: rgba(251,191,36,.08); color: var(--accent-orange); border-color: rgba(251,191,36,.22);}

/* Link cards — deliberately lighter and denser than article cards (howtos/
   projects/notes), since a 2-sentence external link doesn't need the same
   visual weight as a full guide. Horizontal layout: favicon left, content
   right, instead of the stacked layout every other card type uses. */
.hw-card--link{display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px 14px 20px;}
.hw-card--link .hw-card__cat{margin-bottom: 6px;}
.hw-card--link .hw-card__title{font-size: 13px; margin-bottom: 4px;}
.hw-card--link .nt-card__excerpt{-webkit-line-clamp: 1; margin-bottom: 2px;}
.link-favicon-wrap{flex-shrink: 0; margin-top: 2px;}
.link-favicon{display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px;
  font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  transition: transform var(--e-fast);}
.hw-card--link:hover .link-favicon{transform: scale(1.06);}
.link-domain{font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);
  opacity: .85;}
.link-domain::before{content: '↗ ';}
.link-clicks{font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);
  margin-left: 8px; opacity: .7;}
.link-clicks::before{content: '· ';}

/* Detail page — link-specific header treatment */
.link-detail-head{display: flex; align-items: center; gap: 14px; margin-bottom: 18px;}
.link-detail-favicon{flex-shrink: 0;}
.link-detail-favicon .link-favicon{width: 56px; height: 56px; border-radius: 14px; font-size: 22px;}
.link-visit-btn{display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px;
  border: 1px solid var(--accent-teal); border-radius: var(--radius); color: var(--accent-teal);
  font-size: 13px; font-weight: 600; text-decoration: none; transition: all var(--e-fast);
  background: var(--tint-teal-sm);}
.link-visit-btn:hover{background: var(--accent-teal); color: var(--btn-on-accent-fg); text-decoration: none;
  box-shadow: 0 4px 16px rgba(45,212,191,.25);}
.hw-card__title{font-size: 14px; font-weight: 700; line-height: 1.4; margin: 0 0 9px; letter-spacing: -.15px;}
.hw-card__title a{color: var(--text-primary); text-decoration: none; transition: color var(--e-fast);}
.hw-card:hover .hw-card__title a{color: var(--accent-teal);}
.hw-card__foot{display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
font-size: 10px; font-family: var(--font-mono); color: var(--text-dim);}
.nt-card{background: var(--bg-surface); border: 1px solid var(--border-color);
border-radius: var(--radius); padding: 16px 18px 14px;
text-decoration: none; display: block;
transition: border-color var(--e-fast), transform var(--e-fast), box-shadow var(--e-fast);
position: relative; overflow: hidden;}
.nt-card::after{content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: var(--accent-blue);
transform: scaleY(0); transform-origin: bottom;
transition: transform var(--e-med) var(--e-ease);}
.nt-card:hover{border-color: var(--border-blue);
transform: translateX(4px);
box-shadow: -4px 0 0 0 var(--accent-blue), 0 4px 20px var(--shadow-sm);
text-decoration: none;}
.nt-card:hover::after{transform: scaleY(1);}
.nt-card__meta{display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
font-size: 10px; font-family: var(--font-mono); color: var(--text-dim); margin-bottom: 8px;}
.nt-card__title{font-size: 14px; font-weight: 700; line-height: 1.4; margin: 0 0 6px;}
.nt-card__title a{color: var(--text-primary); text-decoration: none; transition: color var(--e-fast);}
.nt-card:hover .nt-card__title a{color: var(--accent-blue);}
.nt-card__excerpt{font-size: 12px; color: var(--text-muted); line-height: 1.6; margin: 0;
font-family: var(--font-body, sans-serif);
display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden;}
.ct-detail{max-width: 760px;}
.ct-back{display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; font-family: var(--font-mono);
color: var(--text-dim); text-decoration: none; margin-bottom: 22px;
padding-bottom: 2px; border-bottom: 1px solid transparent;
transition: color var(--e-fast), border-color var(--e-fast);}
.ct-back:hover{color: var(--accent-teal); border-color: var(--accent-teal); text-decoration: none;}
.ct-detail__title{font-size: clamp(22px, 4vw, 36px);
font-weight: 800; line-height: 1.15; letter-spacing: -.6px;
color: var(--text-primary); margin: 0 0 16px;}
.ct-meta{display: flex; flex-wrap: wrap; align-items: center;
gap: 6px 16px; font-size: 11px;
font-family: var(--font-mono); color: var(--text-dim); margin-bottom: 18px;}
.ct-tagrow{display: flex; flex-wrap: wrap; gap: 5px;}
.ct-tag{display: inline-block; font-size: 9px; font-family: var(--font-mono); font-weight: 700;
text-transform: uppercase; letter-spacing: .07em; padding: 2px 8px;
border-radius: var(--r-sm); background: var(--tint-teal-sm);
color: var(--accent-teal); border: 1px solid var(--tint-teal-xl);}
.ct-tag--laser{background: var(--tint-warn-sm); color: var(--accent-orange); border-color: var(--tint-warn-md);}
.ct-tag--cnc{background: var(--tint-blue-sm); color: var(--accent-blue); border-color: var(--border-blue);}
.ct-tag--electronics,
.ct-tag--flipper{background: rgba(167,139,250,.08); color: var(--accent-purple); border-color: rgba(167,139,250,.2);}
.ct-tag--raspberry-pi{background: var(--tint-danger-sm); color: var(--accent-red); border-color: var(--tint-danger-md);}
.ct-body{font-size: 15px; line-height: 1.85;
color: var(--text-primary); margin-top: 24px;
font-family: var(--font-body, sans-serif);}
.ct-body > *:first-child{margin-top: 0;}
.ct-body h1,.ct-body h2,.ct-body h3,.ct-body h4{font-weight: 700; line-height: 1.3; letter-spacing: -.3px; margin: 2em 0 .6em;
color: var(--text-primary); font-family: var(--font-mono);}
.ct-body h1{font-size: 22px; border-bottom: 1px solid var(--border-color); padding-bottom: 8px;}
.ct-body h2{font-size: 18px; color: var(--accent-teal);}
.ct-body h3{font-size: 15px;}
.ct-body h4{font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim);}
.ct-body p{margin: 0 0 1em;}
.ct-body a{color: var(--accent-teal); text-decoration: underline; text-decoration-color: var(--tint-teal-xl);}
.ct-body a:hover{text-decoration-color: var(--accent-teal);}
.ct-body ul,.ct-body ol{margin: 0 0 1em 22px; line-height: 1.9;}
.ct-body li{margin-bottom: 4px;}
.ct-body li::marker{color: var(--accent-teal);}
.ct-body blockquote{margin: 1.5em 0; padding: 10px 18px;
border-left: 3px solid var(--accent-teal);
background: var(--tint-teal-sm); border-radius: 0 var(--r-sm) var(--r-sm) 0;
color: var(--text-muted); font-style: italic;}
.ct-body blockquote p:last-child{margin: 0;}
.ct-body code{font-family: var(--font-mono); font-size: .85em;
background: var(--bg-surface); border: 1px solid var(--border-color);
padding: 2px 6px; border-radius: var(--r-sm); color: var(--accent-teal);}
.ct-body pre{background: var(--bg-code, #0d1117);
border: 1px solid var(--border-color); border-left: 3px solid var(--accent-teal);
border-radius: 0 var(--radius) var(--radius) 0;
padding: 18px 20px; overflow-x: auto; margin: 1.5em 0;}
.ct-body pre code{background: none; border: none; padding: 0;
font-size: 13px; color: var(--accent-green, #4caf7d); line-height: 1.75;}
.ct-body table{width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 13px;}
.ct-body th{background: var(--bg-hover); border-bottom: 1px solid var(--border-color);
padding: 8px 14px; text-align: left;
font-family: var(--font-mono); font-size: 10px;
text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim);}
.ct-body td{padding: 8px 14px; border-bottom: 1px solid var(--tint-white-sm);}
.ct-body tr:hover td{background: var(--tint-white-xs);}
.ct-body img{max-width: 100%; border-radius: var(--radius); border: 1px solid var(--border-color); margin: 1em 0; display: block;}
.ct-body hr{border: none; border-top: 1px solid var(--border-color); margin: 2em 0;}
.ct-filterbar{display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; align-items: flex-end;}
.ct-filter-label{font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; color: var(--text-dim); letter-spacing: .06em; display: block; margin-bottom: 4px;}
.ct-filter-input, .ct-filter-select{background: var(--bg-surface); border: 1px solid var(--border-color);
color: var(--text-primary); border-radius: var(--r-sm);
padding: 6px 10px; font-size: 12px; font-family: var(--font-mono); outline: none;}
.ct-filter-input:focus, .ct-filter-select:focus{border-color: var(--border-accent);}
.ct-sort-pill{font-size: 11px; padding: 4px 10px; border-radius: var(--r-sm);
border: 1px solid var(--border-color); color: var(--text-dim);
text-decoration: none; font-family: var(--font-mono);
transition: border-color var(--e-fast), color var(--e-fast), background var(--e-fast);}
.ct-sort-pill:hover, .ct-sort-pill.active{border-color: var(--border-accent); color: var(--accent-teal); background: var(--tint-teal-sm);}
.ct-filter-pills{display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px;}
.ct-filter-pill{font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--border-color); color: var(--text-dim); background: var(--bg-surface);
  text-decoration: none; font-family: var(--font-mono); cursor: pointer;
  transition: all var(--e-fast); display: inline-flex; align-items: center; gap: 6px;}
.ct-filter-pill:hover{border-color: var(--border-accent); color: var(--text-primary); text-decoration: none;}
.ct-filter-pill.active{border-color: var(--accent-teal); color: var(--btn-on-accent-fg); background: var(--accent-teal);
  box-shadow: 0 2px 10px rgba(45,212,191,.25);}
.ct-filter-pill .ct-filter-pill-count{opacity: .7; font-size: 10px;}
.ct-filter-pill.active .ct-filter-pill-count{opacity: .85;}
.ct-pagination{display: flex; align-items: center; gap: 4px; justify-content: center; margin-top: 28px; flex-wrap: wrap;}
.ct-pagination a, .ct-pagination span{min-width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
border-radius: var(--r-sm); font-size: 12px; font-family: var(--font-mono);
border: 1px solid var(--border-color); color: var(--text-dim); text-decoration: none;
transition: border-color var(--e-fast), color var(--e-fast), background var(--e-fast);}
.ct-pagination a:hover{border-color: var(--border-accent); color: var(--accent-teal);}
.ct-pagination span.active{background: var(--accent-teal); color: var(--cta-fg); border-color: var(--accent-teal); font-weight: 700;}
.auth-card{background: var(--bg-surface); border: 1px solid var(--border-accent); border-radius: var(--radius); padding: 36px 30px; width:100%; max-width:360px;}
.auth-title{font-size:18px; font-weight:700; margin-bottom:22px;}
.auth-error--error{background:var(--bg-danger); border:1px solid rgba(239,68,68,.3); color:var(--color-danger);}
.auth-error--success{background:var(--tint-teal-sm); border:1px solid var(--tint-teal-xxl); color:var(--accent-teal);}
.auth-label{display:block; font-size:11px; font-family:var(--font-mono); color:var(--text-muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em;}
.auth-input{width:100%; background:var(--bg-primary); border:1px solid var(--border-color);
border-radius:var(--r-sm); padding:9px 12px; color:var(--text-primary);
font-size:13px; font-family:var(--font-mono); outline:none;
transition:border-color var(--e-fast);}
.auth-input:focus{border-color:var(--accent-teal);}
.auth-btn{width:100%; background:var(--accent-teal); color:var(--cta-fg);
border:none; border-radius:var(--r-sm); padding:10px; font-size:13px;
font-weight:700; font-family:var(--font-mono); cursor:pointer; margin-bottom:14px;
transition:opacity var(--e-fast);}
.auth-btn:hover{opacity:.9;}
.auth-btn:disabled{opacity:.5; cursor:not-allowed;}
.auth-switch{font-size:12px; color:var(--text-muted); text-align:center; font-family:var(--font-mono);}
.auth-switch a{color:var(--accent-teal);}
.deals-header{margin-bottom: 24px;}
.deals-title{font-size: 20px; font-weight: 800; letter-spacing: -.4px; color: var(--text-primary);}
.deals-sub{font-size: 11px; color: var(--text-dim); margin-top: 4px; font-family: var(--font-mono);}
.deals-filters{display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; align-items: center;}
.deals-filter-btn{font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em;
padding: 4px 10px; border-radius: var(--r-sm); border: 1px solid var(--border-color);
background: var(--bg-surface); color: var(--text-dim); cursor: pointer; transition: var(--e-fast);}
.deals-filter-btn.active, .deals-filter-btn:hover{border-color: var(--border-accent); color: var(--accent-teal); background: var(--tint-teal-sm);}
.deals-sort{margin-left: auto; font-size: 11px; background: var(--bg-surface);
border: 1px solid var(--border-color); color: var(--text-primary);
padding: 4px 8px; border-radius: var(--r-sm); font-family: var(--font-mono);}
.deals-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 16px;}
.deal-card{background: var(--bg-surface); border: 1px solid var(--border-color);
border-radius: var(--radius); overflow: hidden; display: flex;
flex-direction: column; transition: border-color var(--e-fast), transform var(--e-fast), box-shadow var(--e-fast);}
.deal-card:hover{border-color: var(--border-accent); transform: translateY(-2px); box-shadow: 0 8px 28px var(--shadow-md);}
.deal-img-wrap{width: 100%; height: 180px; background: var(--bg-product-tile, #fff);
display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 14px;}
.deal-img{width: 100%; height: 100%; object-fit: contain;}
.deal-img-placeholder{font-size: 44px;}
.deal-body{padding: 14px 16px; display: flex; flex-direction: column; flex: 1; gap: 7px;}
.deal-badges{display: flex; gap: 6px; flex-wrap: wrap; align-items: center;}
.deal-badge-off{font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: var(--r-sm);
background: var(--tint-danger-md); color: var(--accent-danger); border: 1px solid var(--tint-danger-md);}
.deal-badge-cat{font-size: 9px; text-transform: uppercase; letter-spacing: .07em;
padding: 2px 6px; border-radius: var(--r-sm);
background: var(--tint-teal-sm); color: var(--accent-teal); border: 1px solid var(--tint-teal-xl);}
.deal-badge-featured{font-size: 9px; text-transform: uppercase; letter-spacing: .06em;
padding: 2px 6px; border-radius: var(--r-sm);
background: rgba(251,191,36,.08); color: var(--color-warning, #fbbf24); border: 1px solid rgba(251,191,36,.25);}
.deal-title{font-size: 13px; font-weight: 700; color: var(--text-primary); line-height: 1.4;}
.deal-desc{font-size: 11px; color: var(--text-muted); line-height: 1.6; flex: 1; font-family: var(--font-body, sans-serif);}
.deal-price-row{display: flex; align-items: baseline; gap: 8px;}
.deal-price{font-size: 22px; font-weight: 800; font-family: var(--font-mono); color: var(--accent-teal);}
.deal-was{font-size: 12px; color: var(--text-dim); text-decoration: line-through; font-family: var(--font-mono);}
.deal-rating{font-size: 10px; color: var(--color-warning, #fbbf24);}
.deal-verified{font-size: 10px; color: var(--text-dim); font-family: var(--font-mono); display: flex; align-items: center; gap: 4px;}
.deal-verified::before{content: '✓'; color: var(--accent-teal); font-size: 9px;}
.deal-verified--old{color: var(--accent-danger);}
.deal-verified--old::before{content: '⚠'; color: var(--accent-danger);}
.deal-cta{display: block; text-align: center; background: var(--accent-teal); color: var(--cta-fg);
font-weight: 700; font-size: 12px; font-family: var(--font-mono);
padding: 10px; border-radius: var(--r-sm); text-decoration: none;
margin-top: 4px; transition: opacity var(--e-fast); letter-spacing: .04em;}
.deal-cta:hover{opacity: .88; text-decoration: none;}
.deal-featured{border-color: var(--border-accent);}
@media (max-width: 600px) { .deals-grid { grid-template-columns: 1fr; } }
.sp-title{font-size: 20px; font-weight: 700; margin: 0 0 16px;}
.sp-input-row{display: flex; gap: 8px; margin-bottom: 12px;}
.sp-input{flex: 1; background: var(--bg-surface); border: 1px solid var(--border-color);
border-radius: var(--radius); padding: 10px 14px; color: var(--text-primary);
font-size: 14px; font-family: var(--font-mono); outline: none;}
.sp-input:focus{border-color: var(--border-accent);}
.sp-btn{background: var(--accent-teal); color: var(--cta-fg); border: none;
border-radius: var(--radius); padding: 10px 18px;
font-weight: 700; font-size: 12px; font-family: var(--font-mono); cursor: pointer;}
.sp-tab{background: none; border: 1px solid var(--border-color); border-radius: var(--r-sm);
padding: 4px 10px; font-size: 11px; font-family: var(--font-mono); color: var(--text-dim); cursor: pointer;
transition: border-color var(--e-fast), color var(--e-fast);}
.sp-tab--on, .sp-tab:hover{border-color: var(--border-accent); color: var(--accent-teal);}
.sp-count{font-size: 11px; color: var(--text-dim); margin: 0 0 12px; font-family: var(--font-mono);}
.sp-hint, .sp-empty{font-size: 13px; color: var(--text-dim); text-align: center; padding: 32px 0;}
.sp-item{display: flex; flex-direction: column; gap: 3px;
padding: 12px 14px; margin-bottom: 8px;
border-radius: var(--radius); text-decoration: none; color: var(--text-primary);
border: 1px solid var(--border-color); transition: background var(--e-fast), border-color var(--e-fast);}
.sp-item:hover{background: var(--bg-surface); border-color: var(--border-accent);}
.sp-item-type{font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; color: var(--accent-teal); letter-spacing: .07em;}
.sp-item-title{font-size: 14px; font-weight: 600; line-height: 1.35;}
.sp-item-meta{font-size: 11px; color: var(--text-dim); font-family: var(--font-mono);}
.sp-item-snippet{font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-top: 2px;}
.sp-item-tags{font-size: 11px; color: var(--text-dim); font-family: var(--font-mono);}
.action-bar{display: flex; gap: 8px; align-items: center; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color); flex-wrap: wrap;}
.register-banner{position: relative;
background: var(--tint-teal-sm);
border: 1px solid var(--border-accent);
border-radius: var(--radius-sm);
padding: 14px 40px 14px 16px;
margin-bottom: 20px;
font-size: 13px;}
.register-banner-close{position: absolute;
top: 8px;
right: 10px;
background: none;
border: none;
color: var(--text-muted);
font-size: 18px;
line-height: 1;
cursor: pointer;
padding: 2px;}
.register-banner-close:hover{color: var(--text-primary);}
.register-banner-founder{font-size: 12.5px;
color: var(--accent-teal);
font-weight: 600;
margin-bottom: 8px;}
.register-banner-features{display: flex;
flex-wrap: wrap;
gap: 6px 14px;
margin-bottom: 10px;}
.register-banner-feat{font-size: 12px;
color: var(--text-primary);
white-space: nowrap;}
.register-banner-cta{display: inline-block;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--bg-primary);
background: var(--accent-teal);
padding: 7px 14px;
border-radius: var(--radius-sm);
text-decoration: none;}
.register-banner-cta:hover{opacity: .88;}
@media (max-width: 600px){
.register-banner{font-size: 12.5px; padding: 12px 36px 12px 14px;}
.register-banner-features{flex-direction: column; gap: 4px;}
}
.action-btn{display: flex; align-items: center; gap: 5px;
font-size: 11px; font-family: var(--font-mono); padding: 6px 12px;
border: 1px solid var(--border-color); border-radius: var(--r-sm);
background: none; color: var(--text-dim); text-decoration: none;
transition: border-color var(--e-fast), color var(--e-fast);}
.action-btn:hover{border-color: var(--border-accent); color: var(--accent-teal);}
.action-toast{position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
background: var(--bg-surface); border: 1px solid var(--border-color);
border-radius: var(--radius); padding: 10px 18px; font-size: 12px;
font-family: var(--font-mono); color: var(--text-primary); opacity: 0;
transition: opacity var(--e-fast), transform var(--e-fast); pointer-events: none; z-index: 9999;}
.action-toast--show{opacity: 1; transform: translateX(-50%) translateY(0);}
500;700&display=swap');

*, *::before, *::after{box-sizing: border-box; margin: 0; padding: 0;}
html{font-size: var(--font-size-base);}
a:hover{color: var(--text-primary);}
.logo{font-size: 20px;
font-weight: 700;
color: var(--accent-teal);
letter-spacing: -1px;}
.logo span{color: var(--accent-blue);}
.subbadge{font-size: 10px;
background: rgba(59,142,255,0.15);
color: var(--accent-blue);
border: 1px solid rgba(59,142,255,0.3);
padding: 2px 6px;
border-radius: 4px;
margin-left: 4px;}
.status-bar{background: var(--bg-nav);
border-bottom: 1px solid rgba(0,255,209,0.07);
padding: 5px 24px;
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
gap: 0;
white-space: nowrap;
overflow: hidden;}
.sb-left{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.sb-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0;}
.sb-brand{color:var(--accent-teal);font-weight:700;letter-spacing:.05em;}
.sb-clock{color:var(--text-primary);font-weight:600;letter-spacing:.04em;min-width:90px;}
.sb-date{color:rgba(255,255,255,.35);min-width:120px;}
.sb-stat{color:rgba(255,255,255,.3);}
.sb-sep{color:var(--tint-teal-lg);margin:0 2px;}
.status-bar .dot{width:6px;height:6px;background:var(--accent-teal);border-radius:50%;
display:inline-block;margin-right:2px;
animation:sb-pulse 2.5s ease-in-out infinite;
flex-shrink:0;}
@keyframes sb-pulse {
0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(0,255,209,.4);}
50%{opacity:.7;box-shadow:0 0 0 4px rgba(0,255,209,0);}
}
@media (max-width: 1024px) {
.sb-right { display:none; }
.sb-date { display:none; }
.status-bar { font-size:10px;padding:4px 14px; }
}
@media (max-width:480px) {
.sb-sep { display:none; }
}
.main-content{max-width: 1100px; margin: 0 auto; padding: 0 24px;}
.hero{padding: 48px 0 36px;
border-bottom: 1px solid var(--border-color);}
.hero-tag{font-size: 11px;
color: var(--accent-teal);
background: var(--tint-teal-sm);
border: 1px solid rgba(0,255,209,0.18);
padding: 3px 10px;
border-radius: 4px;
display: inline-block;
margin-bottom: 16px;}
.hero h1{font-size: 38px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.1;
margin-bottom: 24px;}
.hero h1 .t{color: var(--accent-teal);}
.hero h1 .b{color: var(--accent-blue);}
.btn-row{display: flex; gap: 10px; flex-wrap: wrap;}
.btn-primary{background: var(--accent-teal); color: var(--cta-fg); font-weight: 700;}
.btn-secondary{background: transparent;
color: var(--accent-blue);
border: 1px solid rgba(59,142,255,0.35);}
.section{padding: 28px 0;
border-bottom: 1px solid var(--border-color);}
.section-label::after{content: '';
flex: 1;
height: 1px;
background: var(--border-color);}
.card:hover{border-color: var(--border-accent);}
.now-box{background: var(--bg-surface);
border: 1px solid rgba(59,142,255,0.13);
border-left: 3px solid var(--accent-blue);
border-radius: 0 var(--radius) var(--radius) 0;
padding: 14px 16px;}
.now-box .label{font-size: 10px; color: var(--accent-blue); margin-bottom: 8px;}
.now-items{display: flex; flex-direction: column; gap: 6px;}
.now-item{display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: var(--text-muted);}
.now-item .icon{width: 20px;
height: 20px;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
flex-shrink: 0;}
.icon-teal{background: var(--tint-teal-md); color: var(--accent-teal);}
.icon-blue{background: rgba(59,142,255,0.08); color: var(--accent-blue);}
.now-item strong{color: var(--text-secondary);}
.note-row{display: flex; flex-direction: column; gap: 8px;}
.note{background: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 12px 14px;
display: flex;
justify-content: space-between;
align-items: flex-start;}
.note:hover{border-color: var(--border-accent);}
.note-text{font-size: 12px; color: var(--text-secondary); line-height: 1.5; flex: 1;}
.note-date{font-size: 10px; color: var(--text-dim); white-space: nowrap; margin-left: 16px;}
.footer{background: var(--bg-nav);
border-top: 1px solid var(--border-color);
padding: 16px 24px;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 48px;}
.footer-l{font-size: 11px; color: var(--text-dim);}
.footer-r{font-size: 11px; color: var(--text-dim);}
.footer-r a{color: var(--accent-blue);}
.ascii-footer{font-family: var(--font-mono);
font-size: 9px;
color: var(--text-dim);
line-height: 1.3;}
.auth-wrap{display: flex; align-items: center; justify-content: center; min-height: 80vh; padding: 24px;}
.auth-box{background: var(--bg-surface); border: 1px solid var(--border-accent); border-radius: var(--radius); padding: 36px 32px; width: 100%; max-width: 360px;}
.auth-logo{font-size: 22px; font-weight: 700; color: var(--accent-teal); margin-bottom: 4px;}
.auth-logo span{color: var(--accent-blue);}
.auth-sub{font-size: 11px; color: var(--text-muted); margin-bottom: 24px;}
.auth-field{margin-bottom: 14px;}
.auth-field label{display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 5px;}
.auth-field input{width: 100%; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 9px 12px; font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); outline: none; transition: border-color 0.15s;}
.auth-field input:focus{border-color: var(--accent-teal);}
.auth-field small{font-size: 10px; color: var(--text-dim); margin-top: 3px; display: block;}
.auth-check{display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); margin-bottom: 12px; cursor: pointer;}
.auth-check input{width: auto; accent-color: var(--accent-teal);}
.auth-error{background: rgba(226,75,74,0.1); border: 1px solid rgba(226,75,74,0.3); border-radius: var(--radius); color: #f09595; font-size: 12px; padding: 10px 12px; margin-bottom: 14px;}
.auth-footer{font-size: 11px; color: var(--text-muted); text-align: center; margin-top: 16px;}
.auth-footer a{color: var(--accent-teal);}
.btn-sm{padding: 5px 12px !important; font-size: 11px !important;}
.btn-full{width: 100%; text-align: center;}
.profile-avatar-wrap{flex-shrink: 0;}
.profile-avatar{width: 80px; height: 80px; border-radius: 50%; object-fit: cover;}
.contact-profile-card{display: flex; align-items: center; gap: 14px; padding: 16px;
  background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius);
  text-decoration: none; margin-bottom: 14px; transition: all var(--e-fast);}
.contact-profile-card:hover{border-color: var(--accent-teal); box-shadow: 0 4px 16px rgba(45,212,191,.1); text-decoration: none;}
.contact-profile-avatar{width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 1px solid var(--border-color);}
.contact-profile-info{min-width: 0}
.contact-profile-name{font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--text-primary);}
.contact-profile-role{font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.4;}
.contact-profile-link{font-family: var(--font-mono); font-size: 11px; color: var(--accent-teal); margin-top: 6px;}
.profile-avatar-initials{width: 80px; height: 80px; border-radius: 50%;
background: var(--tint-teal-md); color: var(--accent-teal);
display: flex; align-items: center; justify-content: center;
font-size: 24px; font-weight: 700;}
.profile-meta-item{font-size: 12px; color: var(--text-muted);}
.page-title{font-size: 28px; font-weight: 700;}
.filter-btn{font-family: var(--font-mono); font-size: 12px; padding: 5px 14px; border-radius: 20px; border: 1px solid var(--border-color); color: var(--text-muted); background: transparent; cursor: pointer; transition: all 0.15s; text-decoration: none;}
.filter-btn:hover{border-color: var(--accent-teal); color: var(--accent-teal);}
.filter-btn.active{background: var(--tint-teal-md); border-color: var(--accent-teal); color: var(--accent-teal);}
.project-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;}
.project-card{background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; text-decoration: none; transition: border-color 0.15s; display: block;}
.project-card:hover{border-color: var(--border-accent);}
.project-cover{height: 160px; background-size: cover; background-position: center;}
.project-cover-placeholder{display: flex; align-items: center; justify-content: center; background: rgba(0,255,209,0.05);}
.project-cover-placeholder span{font-size: 28px; font-weight: 700; color: rgba(0,255,209,0.3);}
.project-card-body{padding: 14px;}
.post-header{padding-top: 36px;}
.post-meta-top{display: flex; align-items: center; gap: 10px; margin-bottom: 14px;}
.post-back{font-size: 12px; color: var(--text-muted);}
.post-back:hover{color: var(--accent-teal);}
.post-title{font-size: 30px; font-weight: 700; line-height: 1.2; margin-bottom: 10px;}
.post-meta{font-size: 12px; display: flex; gap: 8px; align-items: center;}
.post-tags{display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px;}
.tag{font-size: 10px; background: rgba(59,142,255,0.1); color: var(--accent-blue); border: 1px solid rgba(59,142,255,0.2); padding: 2px 8px; border-radius: 20px;}
.post-cover-full img{width: 100%; max-height: 400px; object-fit: cover; border-radius: var(--radius);}
.post-nav{display: flex; justify-content: space-between; gap: 16px;}
.post-nav a{font-size: 13px; color: var(--text-muted); line-height: 1.5;}
.post-nav a:hover{color: var(--accent-teal);}
.post-body{line-height: 1.8; font-size: 14px; color: var(--text-primary);}
.post-body h1,.post-body h2,.post-body h3,.post-body h4{font-weight: 700; margin: 1.5em 0 0.5em; color: var(--text-primary);}
.post-body h1{font-size: 24px;}
.post-body h2{font-size: 20px; color: var(--accent-teal);}
.post-body h3{font-size: 16px;}
.post-body p{margin: 0 0 1em;}
.post-body a{color: var(--accent-teal);}
.post-body code{background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 4px; padding: 2px 6px; font-size: 12px;}
.post-body pre{background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 16px; overflow-x: auto; margin: 1em 0;}
.post-body pre code{background: none; border: none; padding: 0;}
.post-body blockquote{border-left: 3px solid var(--accent-teal); padding-left: 16px; color: var(--text-muted); margin: 1em 0;}
.post-body ul,.post-body ol{padding-left: 24px; margin: 0 0 1em;}
.post-body li{margin-bottom: 4px;}
.post-body hr{border: none; border-top: 1px solid var(--border-color); margin: 2em 0;}
.post-body img{max-width: 100%; border-radius: var(--radius);}
.editor-layout{display: grid; grid-template-columns: 1fr 240px; gap: 20px; align-items: start;}
.editor-tabs{display: flex; gap: 2px; border-bottom: 1px solid var(--border-color); margin-top: 12px; align-items: center;}
.editor-tab{font-family: var(--font-mono); font-size: 12px; background: transparent; border: none; color: var(--text-muted); padding: 7px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;}
.editor-tab:hover{color: var(--text-primary);}
.editor-tab.active{color: var(--accent-teal); border-bottom-color: var(--accent-teal);}
.editor-hint{font-size: 10px; margin-left: auto;}
.editor-sidebar{display: flex; flex-direction: column; gap: 12px; position: sticky; top: 70px;}
.editor-sidebar-section{background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 14px;}
.settings-form{max-width: 480px;}
.settings-form .form-field{margin-bottom: 16px;}
.settings-form .form-field label{display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 5px;}
.settings-form input,
.settings-form textarea,
.settings-form select{width: 100%; background: var(--bg-surface); border: 1px solid var(--border-color);
border-radius: var(--radius); padding: 9px 12px; font-family: var(--font-mono);
font-size: 13px; color: var(--text-primary); outline: none; transition: border-color 0.15s;}
.settings-form input:focus,
.settings-form textarea:focus{border-color: var(--accent-teal);}
.settings-form textarea{resize: vertical; min-height: 80px;}
.flash{padding: 10px 14px; border-radius: var(--radius); font-size: 13px; margin-bottom: 16px;}
.flash-ok{background: rgba(29,158,117,0.12); border: 1px solid rgba(29,158,117,0.3); color: #5dcaa5;}
.flash-error{background: rgba(226,75,74,0.1); border: 1px solid rgba(226,75,74,0.3); color: #f09595;}
.links-layout{display: grid; grid-template-columns: 200px 1fr; gap: 24px;}
.links-sidebar{position: sticky; top: 70px;}
.links-cat-nav{display: flex; flex-direction: column; gap: 2px;}
.links-cat-item{display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius); font-size: 12px; color: var(--text-muted); transition: all 0.15s; text-decoration: none;}
.links-cat-item:hover, .links-cat-item.active{background: var(--tint-teal-sm); color: var(--accent-teal);}
.links-cat-icon{font-size: 14px; width: 20px; text-align: center; flex-shrink: 0;}
.links-cat-count{margin-left: auto; font-size: 10px; color: var(--text-dim);}
.links-group{margin-bottom: 32px;}
.links-group-header{display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 14px; font-weight: 500;}
.links-group-header a{color: var(--text-primary);}
.links-group-header a:hover{color: var(--accent-teal);}
.links-more{margin-left: auto; font-size: 11px; color: var(--accent-teal);}
.links-grid{display: flex; flex-direction: column; gap: 6px;}
.link-card{display: flex; align-items: center; gap: 12px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 10px 14px; text-decoration: none; transition: border-color 0.15s;}
.link-card:hover{border-color: var(--border-accent);}
.link-card-icon{flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;}
.link-card-body{flex: 1; min-width: 0;}
.link-card-title{font-size: 13px; color: var(--text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.link-card-desc{font-size: 11px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.link-card-url{font-size: 10px; color: var(--text-dim); margin-top: 2px;}
.link-card-arrow{color: var(--text-dim); font-size: 12px; flex-shrink: 0; transition: color 0.15s;}
.link-card:hover .link-card-arrow{color: var(--accent-teal);}
.media-strip{display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px;}
.media-strip-item{flex-shrink: 0; width: 120px; height: 90px; border-radius: var(--radius); overflow: hidden;}
.media-strip-item img{width: 100%; height: 100%; object-fit: cover; transition: opacity 0.15s;}
.media-strip-item:hover img{opacity: 0.8;}
.media-album-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px;}
.media-album-card{text-decoration: none; display: block;}
.media-album-cover{position: relative; height: 140px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border-color);}
.media-album-cover img{width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s;}
.media-album-card:hover .media-album-cover img{opacity: 0.85;}
.media-album-placeholder{display: flex; align-items: center; justify-content: center; height: 100%; font-size: 36px;}
.media-album-count{position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 20px;}
.media-album-info{background: var(--bg-surface); border: 1px solid var(--border-color); border-top: none; border-radius: 0 0 var(--radius) var(--radius); padding: 10px 12px;}
.media-masonry{columns: 3; column-gap: 10px;}
@media (max-width: 768px) { .media-masonry { columns: 2; } }
.media-masonry-item{break-inside: avoid; margin-bottom: 10px; position: relative; border-radius: var(--radius); overflow: hidden; cursor: pointer; background: var(--bg-surface);}
.media-masonry-item img{width: 100%; display: block; transition: opacity 0.2s;}
.media-masonry-item:hover img{opacity: 0.85;}
.media-item-overlay{position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.7)); padding: 20px 10px 10px; opacity: 0; transition: opacity 0.2s;}
.media-masonry-item:hover .media-item-overlay{opacity: 1;}
.media-item-caption{font-size: 11px; color: #fff;}
.media-video-item{cursor: default;}
.media-video-wrap{position: relative; padding-bottom: 56.25%; height: 0;}
.media-video-wrap iframe, .media-video-wrap video{position: absolute; inset: 0; width: 100%; height: 100%;}
.media-item-caption-below{font-size: 11px; color: var(--text-muted); padding: 8px 10px;}
.lightbox{display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 1000; align-items: center; justify-content: center;}
.lightbox.open{display: flex;}
.lightbox-inner{max-width: 90vw; max-height: 90vh; position: relative;}
.lightbox-inner img{max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: var(--radius); display: block;}
.lightbox-caption{color: #ccc; font-size: 12px; text-align: center; margin-top: 10px;}
.lightbox-close{position: fixed; top: 20px; right: 24px; background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; z-index: 1001; opacity: 0.7;}
.lightbox-close:hover{opacity: 1;}
.lightbox-prev, .lightbox-next{position: fixed; top: 50%; transform: translateY(-50%); background: none; border: none; color: #fff; font-size: 48px; cursor: pointer; z-index: 1001; opacity: 0.5; padding: 0 20px;}
.lightbox-prev:hover, .lightbox-next:hover{opacity: 1;}
.lightbox-prev{left: 0;}
.lightbox-next{right: 0;}
.admin-media-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px;}
.admin-media-item{background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden;}
.admin-media-thumb{height: 120px; overflow: hidden; background: var(--bg-primary); display: flex; align-items: center; justify-content: center;}
.admin-media-thumb img{width: 100%; height: 100%; object-fit: cover;}
.admin-media-video{font-size: 32px; color: var(--text-dim);}
.admin-media-meta{padding: 8px 10px;}
.admin-media-actions{padding: 0 8px 8px;}
@media (max-width: 768px) {
.nav {
flex-wrap: wrap;
height: auto;
min-height: 52px;
padding: 0 16px;
position: sticky;
top: 0;
z-index: 200;
align-items: center;
}
.nav-hamburger { display: flex; }
.nav-right { display: none !important; }
.nav-links {
display: none;
flex-direction: column;
width: 100%;
padding: 0 0 8px;
order: 10;
background: var(--bg-surface);
border-top: 1px solid var(--border-color);
animation: navSlideDown 0.2s ease;
}
@keyframes navSlideDown {
from { opacity:0; transform: translateY(-6px); }
to { opacity:1; transform: translateY(0); }
}
.nav-links.open { display: flex; }
.nav-links .nav-link,
.nav-links a {
display: block;
padding: 13px 0;
font-size: 13px;
font-family: var(--font-mono);
color: var(--text-muted);
border-bottom: 1px solid var(--tint-white-sm);
width: 100%;
text-align: left;
background: none;
letter-spacing: 0.03em;
}
.nav-links .nav-link:hover,
.nav-links a:hover { color: var(--accent-teal); }
.nav-links .nav-link.active,
.nav-links a.active { color: var(--accent-teal); }
.nav-dropdown-wrap { width: 100%; }
.nav-dropdown-btn { width: 100%; text-align: left; display: flex; justify-content: space-between; }
.nav-dropdown-menu {
position: static;
display: none;
box-shadow: none;
border: none;
border-radius: 0;
background: transparent;
padding: 0 0 4px 16px;
}
.nav-dropdown-menu.open { display: block; }
.nav-dropdown-item {
padding: 10px 0;
font-size: 12px;
color: var(--text-muted);
border-bottom: 1px solid rgba(255,255,255,0.03);
}
.nav-mobile-user {
display: block;
padding: 12px 0 4px;
margin-top: 4px;
border-top: 1px solid var(--border-color);
}
.nav-mobile-user .nav-user-guest {
display: flex;
gap: 16px;
align-items: center;
}
.nav-mobile-user .nav-user-guest .nav-link {
border: none;
padding: 8px 0;
width: auto;
}
.nav-mobile-user .nav-user-menu { position: relative; }
.nav-mobile-user .nav-dropdown {
position: absolute;
left: 0;
right: auto;
top: calc(100% + 4px);
min-width: 180px;
z-index: 300;
}
.nav-mobile-user .nav-username { display: inline; }
body.nav-open { overflow: hidden; }
.status-bar { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main-content { padding: 0 16px; }
.hero { padding: 32px 0 24px; }
.hero h1 { font-size: 26px; }
.btn-row { gap: 8px; flex-wrap: wrap; }
.btn { font-size: 11px; padding: 7px 14px; }
.cards { grid-template-columns: 1fr; }
.project-grid { grid-template-columns: 1fr; }
.media-album-grid { grid-template-columns: repeat(2,1fr); }
.links-layout {
display: flex;
flex-direction: column;
gap: 16px;
}
.links-sidebar { position: static !important; top: auto !important; }
.links-cat-nav {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
gap: 6px;
padding-bottom: 8px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.links-cat-nav::-webkit-scrollbar { display: none; }
.links-cat-item {
flex-shrink: 0;
white-space: nowrap;
font-size: 11px;
padding: 6px 12px;
border: 1px solid var(--border-color);
border-radius: 20px;
cursor: pointer;
}
.links-cat-count { display: none; }
.links-grid { grid-template-columns: 1fr; }
.link-card { padding: 10px 12px; }
.link-desc { display: none; }
.media-masonry { columns: 2; }
.media-strip-item { width: 90px; height: 68px; }
.post-title { font-size: 22px; }
.post-nav { flex-direction: column; gap: 12px; }
.post-nav-next { text-align: left; }
.profile-header { flex-direction: column; gap: 16px; }
.profile-body { grid-template-columns: 1fr; }
.profile-sidebar { display: none; }
.profile-avatar, .profile-avatar-initials { width: 56px; height: 56px; font-size: 18px; }
.editor-layout { grid-template-columns: 1fr; }
.editor-sidebar { position: static; }
.auth-box { padding: 24px 18px; }
.footer { flex-direction: column; gap: 12px; text-align: center; padding: 16px; }
.settings-tabs { overflow-x: auto; flex-wrap: nowrap; }
.tab-btn { flex-shrink: 0; }
.admin-wrap { grid-template-columns: 1fr; }
.admin-sidebar {
position: fixed;
left: -220px;
top: 0;
height: 100vh;
width: 200px;
z-index: 300;
transition: left 0.25s ease;
box-shadow: 4px 0 24px var(--shadow-md);
}
.admin-sidebar.open { left: 0; }
.admin-overlay {
display: none;
position: fixed;
inset: 0;
background: var(--tint-black-xl);
z-index: 299;
}
.admin-overlay.open { display: block; }
.admin-topbar { display: none; }
@media (max-width: 768px) {
.admin-topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
height: 48px;
background: var(--bg-surface);
border-bottom: 1px solid var(--border-color);
position: sticky;
top: 0;
z-index: 200;
}
}
.admin-content { padding: 16px; }
.admin-header { flex-direction: column; gap: 12px; align-items: flex-start; }
.widget { overflow-x: auto; }
.module-grid { grid-template-columns: 1fr; }
.color-grid { grid-template-columns: 1fr; }
.admin-media-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 480px) {
.hero h1 { font-size: 22px; }
.page-title { font-size: 20px; }
.post-title { font-size: 19px; }
.main-content { padding: 0 12px; }
.section { padding: 20px 0; }
.hero { padding: 20px 0 16px; }
.media-masonry { columns: 1; }
.media-album-grid { grid-template-columns: 1fr; }
.filter-row { gap: 6px; }
.filter-btn { font-size: 11px; padding: 4px 10px; }
.nav-username { display: none; }
.status-bar span:nth-child(n+3) { display: none; }
.admin-media-grid { grid-template-columns: 1fr; }
.admin-content { padding: 12px; }
}
@media (max-width: 768px) {
.nav-links-desktop { display: none !important; }
.nav-right { display: none !important; }
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
height: 52px;
position: sticky;
top: 0;
z-index: 200;
background: var(--bg-nav);
border-bottom: 1px solid var(--border-color);
}
.nav-hamburger {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
border-radius: var(--radius);
transition: background 0.15s;
}
.nav-hamburger:hover { background: var(--bg-surface); }
.nav-hamburger span {
display: block;
width: 20px;
height: 2px;
background: var(--accent-teal);
border-radius: 2px;
transition: transform 0.25s, opacity 0.25s;
transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-overlay {
display: block;
position: fixed;
inset: 0;
background: rgba(0,0,0,0);
z-index: 299;
pointer-events: none;
transition: background 0.3s;
}
.mobile-overlay.open {
background: var(--overlay-scrim);
pointer-events: all;
}
.mobile-drawer {
display: block;
position: fixed;
top: 0;
right: -280px;
width: 270px;
height: 100vh;
background: var(--bg-surface);
border-left: 1px solid var(--border-color);
z-index: 300;
transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
box-shadow: -8px 0 32px var(--shadow-md);
}
.mobile-drawer.open { right: 0; }
.mobile-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
height: 52px;
border-bottom: 1px solid var(--border-color);
position: sticky;
top: 0;
background: var(--bg-surface);
z-index: 1;
}
.mobile-drawer-close {
background: none;
border: none;
color: var(--text-muted);
font-size: 18px;
cursor: pointer;
padding: 6px 8px;
border-radius: var(--radius);
line-height: 1;
transition: color 0.15s, background 0.15s;
}
.mobile-drawer-close:hover { color: var(--text-primary); background: var(--bg-primary); }
.mobile-drawer-body { padding: 8px 0 32px; }
.mobile-nav-item {
display: block;
padding: 13px 20px;
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-muted);
text-decoration: none;
transition: color 0.15s, background 0.15s;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
}
.mobile-nav-item:hover,
.mobile-nav-item.active {
color: var(--accent-teal);
background: rgba(0,255,209,0.04);
}
.mobile-nav-item.active { border-left: 2px solid var(--accent-teal); padding-left: 18px; }
.mobile-nav-group { }
.mobile-nav-toggle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 13px 20px;
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-muted);
background: none;
border: none;
width: 100%;
text-align: left;
cursor: pointer;
transition: color 0.15s;
}
.mobile-nav-toggle:hover { color: var(--accent-teal); }
.mobile-nav-caret { transition: transform 0.2s; font-size: 10px; }
.mobile-nav-group.open .mobile-nav-caret { transform: rotate(180deg); }
.mobile-nav-children { display: none; background: var(--bg-primary); }
.mobile-nav-group.open .mobile-nav-children { display: block; }
.mobile-nav-child {
display: block;
padding: 10px 20px 10px 32px;
font-size: 12px;
color: var(--text-muted);
text-decoration: none;
}
.mobile-nav-child:hover { color: var(--accent-teal); }
.mobile-drawer-divider {
margin: 16px 20px;
border-top: 1px solid var(--border-color);
}
.mobile-nav-user { padding: 0 20px; }
.mobile-nav-user .nav-user-guest {
display: flex;
gap: 12px;
align-items: center;
}
.mobile-nav-user .nav-user-menu { position: relative; }
.mobile-nav-user .nav-dropdown {
position: absolute;
right: 0;
bottom: calc(100% + 4px);
width: 190px;
top: auto;
}
.links-layout { grid-template-columns: 1fr; gap: 12px; }
.links-sidebar { position: static; }
.links-cat-nav { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 6px; scrollbar-width: none; }
.links-cat-nav::-webkit-scrollbar { display: none; }
.links-cat-item { flex-shrink: 0; font-size: 11px; padding: 5px 12px; border: 1px solid var(--border-color); border-radius: 20px; white-space: nowrap; cursor: pointer; }
.links-cat-item:hover,
.links-cat-item.active { border-color: var(--accent-teal); color: var(--accent-teal); }
.links-cat-count { display: none; }
.links-grid { grid-template-columns: 1fr; }
.link-card-desc { display: none; }
.status-bar { font-size: 10px; padding: 0 12px; }
.main-content { padding: 0 14px; }
.hero { padding: 28px 0 20px; }
.hero h1 { font-size: 26px; }
.cards, .project-grid { grid-template-columns: 1fr; }
.settings-tabs { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; }
.tab-btn { flex-shrink: 0; }
.post-title { font-size: 22px; }
.footer { flex-direction: column; gap: 8px; text-align: center; padding: 16px; font-size: 11px; }
}
@media (max-width: 480px) {
.hero h1 { font-size: 22px; }
.post-title { font-size: 19px; }
.main-content { padding: 0 12px; }
}
@media (max-width: 768px) {
.admin-wrap { grid-template-columns: 1fr; }
.admin-sidebar {
position: fixed;
left: -220px;
top: 0;
height: 100vh;
width: 200px;
z-index: 300;
transition: left 0.25s ease;
box-shadow: 4px 0 24px var(--shadow-md);
}
.admin-sidebar.open { left: 0; }
.admin-overlay {
display: none;
position: fixed;
inset: 0;
background: var(--tint-black-xl);
z-index: 299;
}
.admin-overlay.open { display: block; }
.admin-content { padding: 16px; }
.admin-header { flex-direction: column; gap: 12px; align-items: flex-start; }
.widget { overflow-x: auto; }
.module-grid { grid-template-columns: 1fr; }
.color-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.nav-links-desktop { display: none; }
.nav-right { display: none; }
.nav-hamburger { display: flex; }
.nav { padding: 0 16px; }
.mobile-overlay {
display: block; position: fixed; inset: 0;
background: var(--overlay-scrim); z-index: 400;
opacity: 0; pointer-events: none;
transition: opacity 0.25s; backdrop-filter: blur(2px);
}
.mobile-overlay.open { opacity: 1; pointer-events: all; }
.mobile-drawer {
display: flex; flex-direction: column;
position: fixed; top: 0; right: -100%;
width: min(300px, 85vw); height: 100dvh;
background: var(--bg-surface);
border-left: 1px solid var(--border-color);
z-index: 500; overflow-y: auto;
transition: right 0.28s cubic-bezier(0.4,0,0.2,1);
}
.mobile-drawer.open { right: 0; }
.mobile-drawer-header {
display: flex; align-items: center;
justify-content: space-between;
padding: 16px 20px; border-bottom: 1px solid var(--border-color);
position: sticky; top: 0; background: var(--bg-surface); z-index: 1;
}
.mobile-drawer-close {
background: none; border: 1px solid var(--border-color);
border-radius: 6px; color: var(--text-muted); cursor: pointer;
font-size: 16px; width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
transition: color 0.15s, border-color 0.15s;
}
.mobile-drawer-close:hover { color: var(--accent-teal); border-color: var(--accent-teal); }
.mobile-drawer-body { flex: 1; padding: 12px 0; }
.mobile-nav-group { margin-bottom: 4px; }
.mobile-nav-label {
font-size: 9px; font-family: var(--font-mono);
color: var(--accent-teal); text-transform: uppercase;
letter-spacing: 0.12em; padding: 12px 20px 4px; opacity: 0.7;
}
.mobile-nav-item {
display: block; padding: 12px 20px;
font-size: 14px; font-family: var(--font-mono);
color: var(--text-muted); text-decoration: none;
border-left: 3px solid transparent;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.mobile-nav-item:hover { color: var(--text-primary); border-color: var(--accent-teal); background: rgba(0,255,209,0.04); }
.mobile-nav-item.active { color: var(--accent-teal); border-color: var(--accent-teal); background: var(--tint-teal-sm); }
.mobile-drawer-footer {
padding: 16px 20px; border-top: 1px solid var(--border-color);
}
.mobile-drawer-footer .nav-user-guest { display: flex; gap: 12px; }
}
@media (max-width: 480px) {
.mobile-drawer { width: 100vw; border-left: none; }
}
.search-form{display: flex;
gap: 10px;
margin-bottom: 28px;
max-width: 600px;}
.search-input{flex: 1;
background: var(--bg-surface) !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--radius);
color: var(--text-primary) !important;
font-family: var(--font-mono);
font-size: 14px;
padding: 10px 14px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
-webkit-appearance: none;}
.search-input:focus{border-color: var(--accent-teal) !important;
box-shadow: 0 0 0 2px var(--tint-teal-md);}
.search-input::placeholder{color: var(--text-muted);}
.search-results-count{font-family: var(--font-mono);
font-size: 12px;
color: var(--text-muted);
margin-bottom: 20px;}
.search-results{display: flex; flex-direction: column; gap: 10px;}
.search-result{background: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 16px 20px;
transition: border-color 0.15s, background 0.15s;}
.search-result:hover{border-color: var(--accent-teal);
background: rgba(0,255,209,0.02);}
.search-result-type{font-family: var(--font-mono);
font-size: 9px;
color: var(--accent-blue);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 6px;
opacity: 0.8;}
.search-result-title{font-size: 16px;
font-weight: 600;
margin-bottom: 6px;
line-height: 1.3;}
.search-result-title a{color: var(--text-primary);
text-decoration: none;
transition: color 0.15s;}
.search-result-title a:hover{color: var(--accent-teal);}
.search-result-excerpt{color: var(--text-muted);
font-size: 13px;
line-height: 1.6;}
.search-result-excerpt mark{background: rgba(0,255,209,0.18);
color: var(--accent-teal);
border-radius: 2px;
padding: 0 2px;
font-style: normal;}
.search-empty{text-align: center;
padding: 60px 0;
color: var(--text-muted);}
@media (max-width: 1024px) { .nav-search-form { display: none; } }
.view-count{display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--border-color);}
.view-count-icon{color: var(--accent-teal); font-size: 12px;}
.view-count-unique{opacity: 0.6; font-size: 10px;}
.profile-header{display: flex;
gap: 24px;
align-items: flex-start;
margin-bottom: 28px;}
.profile-username{font-size: 26px; font-weight: 700; margin: 0 0 6px;}
.profile-bio{color: var(--text-muted); margin: 0 0 10px; line-height: 1.6; max-width: 500px;}
.profile-meta-row{display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); align-items: center;}
.profile-stats{display: flex;
gap: 24px;
padding: 16px 20px;
background: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: var(--radius);
margin-bottom: 24px;}
.profile-stat{text-align: center;}
.profile-stat-num{font-size: 28px; font-weight: 700; color: var(--accent-teal);}
.profile-stat-label{font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em;}
.profile-body{display: grid; grid-template-columns: 1fr 280px; gap: 24px;}
.profile-section{margin-bottom: 24px;}
.profile-widget{margin-bottom: 12px;}
.profile-content-item{display: block;
padding: 10px 0;
border-bottom: 1px solid var(--border-color);
text-decoration: none;
transition: color 0.15s;}
.profile-content-item:last-child{border-bottom: none;}
.profile-content-tag{font-size: 9px; font-family: var(--font-mono); color: var(--accent-blue); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 2px;}
.profile-content-title{color: var(--text-primary); font-size: 14px; font-weight: 500;}
.profile-content-date{font-size: 11px; color: var(--text-muted); margin-top: 2px;}
.profile-content-item:hover .profile-content-title{color: var(--accent-teal);}
.profile-network-item{display: flex; gap: 10px; align-items: flex-start;}
.profile-network-icon{font-size: 18px; flex-shrink: 0; margin-top: 2px;}
@media (max-width: 768px) {
.profile-header { flex-direction: column; gap: 16px; }
.profile-body { grid-template-columns: 1fr; }
.profile-stats { gap: 16px; }
.profile-stat-num { font-size: 22px; }
}
.contact-wrap{display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 48px;
align-items: flex-start;
max-width: 900px;}
.contact-intro{position: sticky; top: 80px;}
.contact-desc{color: var(--text-muted);
line-height: 1.8;
margin-bottom: 32px;
font-size: 15px;}
.contact-channels{display: flex; flex-direction: column; gap: 18px;}
.contact-channel{display: flex;
gap: 14px;
align-items: flex-start;}
.contact-channel-icon{font-size: 18px;
color: var(--accent-teal);
width: 28px;
flex-shrink: 0;
margin-top: 2px;}
.contact-channel-label{font-family: var(--font-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-muted);
margin-bottom: 2px;}
.contact-channel-value{font-size: 13px;
color: var(--text-primary);}
.contact-form-wrap{background: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 28px 24px;}
.contact-row{display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;}
.contact-math-field{display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;}
.contact-math-field label{margin-bottom: 0 !important;
flex: 1;
min-width: 200px;}
.contact-math-field input{flex-shrink: 0;}
.contact-submit{width: 100%;
margin-top: 8px;
padding: 12px;
font-size: 15px;}
.required{color: var(--accent-teal);}
.contact-form-wrap textarea{background: var(--bg-primary) !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--radius);
color: var(--text-primary) !important;
font-family: var(--font-mono);
font-size: 13px;
padding: 10px 12px;
width: 100%;
resize: vertical;
outline: none;
transition: border-color 0.2s;
box-sizing: border-box;}
.contact-form-wrap textarea:focus{border-color: var(--accent-teal) !important;}
@media (max-width: 768px) {
.contact-wrap { grid-template-columns: 1fr; gap: 32px; }
.contact-intro { position: static; }
.contact-channels { flex-direction: row; flex-wrap: wrap; gap: 16px; }
.contact-row { grid-template-columns: 1fr; }
.contact-math-field { flex-direction: column; align-items: flex-start; gap: 8px; }
.contact-form-wrap { padding: 20px 16px; }
}
.contact-form-wrap .form-field{display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 16px;}
.contact-form-wrap .form-field label{display: block;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0;}
.contact-form-wrap .form-field input,
.contact-form-wrap .form-field textarea{display: block;
width: 100%;
box-sizing: border-box;}
.contact-form-wrap .form-field input[type="number"]{width: 100px;}
@keyframes dropFade { from{opacity:0;transform:translateX(-50%) translateY(-5px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
.av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;flex-shrink:0;font-family:monospace;font-weight:700;color:#fff;}
@media (max-width: 1024px) {
.nav-links,.nav-right { display:none; }
.nav-burger { display:flex; }
.nav-inner { gap:0;padding:0 16px; }
.nav-logo { margin-right:auto; }
}
.font-mono{font-family: var(--font-mono);}
.font-body{font-family: var(--font-body);}
body{font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--line-height);
color: var(--text-primary);
background: var(--bg-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;}
.l-logo-mark, .l-logo-sub, .l-search-input, .l-search-prompt,
.l-nav-link-label, .l-crumb, .section-label, .detail-section-label,
code, pre, kbd, samp, .mono, [class*="badge"], [class*="-tag"],
.chip, .label, .tag, .pill{font-family: var(--font-mono);}
p, .prose, .description, .card-desc, .card-meta, .detail-body,
.mdb-card__desc, .mdb-desc, .mat-desc, .nfo-body, .post-body,
.howto-body, .about-body, .profile-bio{font-family: var(--font-body);}
h1, h2, h3, h4, h5, h6{font-family: var(--font-mono);
line-height: var(--line-height-tight);
color: var(--text-primary);
font-weight: 700;}
h1{font-size: var(--text-2xl);}
h2{font-size: var(--text-xl);}
h3{font-size: var(--text-lg);}
h4{font-size: var(--text-md);}
h5{font-size: var(--text-base);}
h6{font-size: var(--text-sm);}
.prose{font-family: var(--font-body);
font-size: 15px;
line-height: 1.75;
color: var(--text-secondary);
max-width: 72ch;}
.prose p{margin-bottom: 1em;}
.prose h2{font-size: var(--text-xl); margin: 1.5em 0 .5em; font-family: var(--font-mono);}
.prose h3{font-size: var(--text-lg); margin: 1.25em 0 .4em; font-family: var(--font-mono);}
.prose li{margin-bottom: .4em;}
.prose ul{padding-left: 1.4em; margin-bottom: 1em;}
.prose ol{padding-left: 1.4em; margin-bottom: 1em;}
.prose code{font-family: var(--font-mono); font-size: 12px;
background: var(--bg-code); color: var(--accent-teal);
padding: 1px 5px; border-radius: var(--r-sm);}
.prose pre{background: var(--bg-code); padding: 16px; border-radius: var(--r-md);
overflow-x: auto; margin-bottom: 1em;}
.prose a{color: var(--accent-blue); text-decoration: underline; text-decoration-color: rgba(77,159,255,.35);}
.prose a:hover{text-decoration-color: var(--accent-blue);}
.prose blockquote{border-left: 3px solid var(--accent-teal);
padding-left: 1em; color: var(--text-muted); font-style: italic; margin: 1em 0;}
.u-flex{display: flex;}
.u-flex-col{display: flex; flex-direction: column;}
.u-grid{display: grid;}
.u-center{display: flex; align-items: center; justify-content: center;}
.u-between{display: flex; align-items: center; justify-content: space-between;}
.u-wrap{flex-wrap: wrap;}
.u-gap-1{gap: var(--sp-1);}
.u-gap-2{gap: var(--sp-2);}
.u-gap-3{gap: var(--sp-3);}
.u-gap-4{gap: var(--sp-4);}
.u-gap-5{gap: var(--sp-5);}
.u-min-0{min-width: 0; min-height: 0;}
.u-grow{flex: 1; min-width: 0;}
.u-shrink-0{flex-shrink: 0;}
.u-truncate{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.u-sr-only{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;}
.u-mono{font-family: var(--font-mono);}
.u-
.u-bold{font-weight: 700;}
.u-medium{font-weight: 500;}
.u-muted{color: var(--text-muted);}
.u-dim{color: var(--text-dim);}
.u-teal{color: var(--accent-teal);}
.u-blue{color: var(--accent-blue);}
.u-upper{text-transform: uppercase; letter-spacing: .08em;}
.u-cap{text-transform: capitalize;}
.u-nowrap{white-space: nowrap;}
.u-break{word-break: break-word;}
.chip{display: inline-flex; align-items: center; gap: 4px;
font-family: var(--font-mono); font-size: 10px; font-weight: 500;
padding: 2px 8px; border-radius: var(--r-full);
background: var(--tint-white-sm); color: var(--text-muted);
border: 1px solid var(--c-border); white-space: nowrap;
transition: background var(--e-fast), color var(--e-fast), border-color var(--e-fast);
cursor: default; user-select: none;}
.chip:where(a, button, [role="button"]){cursor: pointer;}
.chip:where(a, button, [role="button"]):hover{background: var(--tint-white-md); color: var(--text-primary);
border-color: rgba(148,163,184,.25);}
.chip--teal{background: var(--tint-teal-sm); color: var(--accent-teal); border-color: var(--tint-teal-md);}
.chip--blue{background: var(--tint-blue-sm); color: var(--accent-blue); border-color: var(--tint-blue-md);}
.chip--warn{background: var(--tint-warn-sm); color: var(--accent-warn); border-color: var(--tint-warn-md);}
.chip--danger{background: var(--tint-danger-sm); color: var(--accent-red); border-color: var(--tint-danger-md);}
.chip--green{background: rgba(76,175,125,.08); color: var(--accent-green); border-color: rgba(76,175,125,.2);}
.chip--active{background: var(--tint-teal-md); color: var(--accent-teal); border-color: var(--tint-teal-lg);}
.chip--lg{font-size: 11px; padding: 4px 12px;}
.chip--sm{font-size: 9px; padding: 1px 6px;}
.badge{display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-size: 9px; font-weight: 700;
min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-full);
background: var(--tint-white-md); color: var(--text-muted);
line-height: 1; white-space: nowrap;}
.badge--teal{background: var(--tint-teal-md); color: var(--accent-teal);}
.badge--blue{background: var(--tint-blue-md); color: var(--accent-blue);}
.badge--warn{background: var(--tint-warn-md); color: var(--accent-warn);}
.badge--danger{background: var(--tint-danger-md); color: var(--accent-red);}
.badge--green{background: rgba(76,175,125,.18); color: var(--accent-green);}
.btn{display: inline-flex; align-items: center; justify-content: center;
gap: 6px; padding: 7px 14px; border-radius: var(--r-md);
font-family: var(--font-mono); font-size: 12px; font-weight: 500;
border: 1px solid var(--c-border); color: var(--text-primary);
background: var(--bg-surface); cursor: pointer; white-space: nowrap;
transition: all var(--e-fast); text-decoration: none; user-select: none;
-webkit-tap-highlight-color: transparent;}
.btn:hover{background: var(--bg-hover); border-color: rgba(148,163,184,.2);}
.btn:active{opacity: .85; transform: scale(.98);}
.btn--sm{font-size: 11px; padding: 4px 10px;}
.btn--lg{font-size: 14px; padding: 10px 20px;}
.btn--teal{background: var(--tint-teal-sm); border-color: var(--tint-teal-md); color: var(--accent-teal);}
.btn--teal:hover{background: var(--tint-teal-md); border-color: var(--tint-teal-lg);}
.btn--blue{background: var(--tint-blue-sm); border-color: var(--tint-blue-md); color: var(--accent-blue);}
.btn--blue:hover{background: var(--tint-blue-md);}
.btn--danger{background: var(--tint-danger-sm); border-color: var(--tint-danger-md); color: var(--accent-red);}
.btn--danger:hover{background: var(--tint-danger-md);}
.btn--ghost{background: transparent; border-color: transparent;}
.btn--ghost:hover{background: var(--tint-white-sm); border-color: var(--c-border);}
.btn--icon{padding: 6px; width: 32px; height: 32px; border-radius: var(--r-md);}
.input{width: 100%; padding: 8px 12px; border-radius: var(--r-md);
background: var(--bg-hover); border: 1px solid var(--c-border);
color: var(--text-primary); font-family: var(--font-body); font-size: 14px;
outline: none; transition: border-color var(--e-fast), box-shadow var(--e-fast);
-webkit-appearance: none;}
.input:focus{border-color: var(--c-border-hi); box-shadow: 0 0 0 3px var(--tint-teal-sm);}
.input::placeholder{color: var(--text-dim);}
.input--sm{font-size: 12px; padding: 5px 9px;}
.input--mono{font-family: var(--font-mono);}
.input--code{font-family: var(--font-mono); font-size: 12px; resize: vertical;
background: var(--bg-code); color: var(--accent-teal);}
.section-label{font-family: var(--font-mono); font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: .12em;
color: var(--accent-teal); margin-bottom: var(--sp-3);}
.divider{border: none; border-top: 1px solid var(--c-border); margin: var(--sp-4) 0;}
.divider--accent{border-color: var(--tint-teal-md);}
@keyframes shimmer {
0% { background-position: -600px 0; }
100% { background-position: 600px 0; }
}
.skel{background: linear-gradient(90deg,
var(--bg-surface) 0%,
var(--bg-hover) 50%,
var(--bg-surface) 100%);
background-size: 600px 100%;
animation: shimmer 1.4s ease-in-out infinite;
border-radius: var(--r-md);}
.skel--text{height: 14px; width: 100%; margin-bottom: 8px;}
.skel--text-sm{height: 11px; width: 60%; margin-bottom: 6px;}
.skel--title{height: 20px; width: 70%; margin-bottom: 12px;}
.skel--card{height: 160px; width: 100%;}
.skel--avatar{width: 40px; height: 40px; border-radius: var(--r-full);}
.empty{display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: var(--sp-7) var(--sp-5); text-align: center; gap: var(--sp-3);}
.empty-icon{font-size: 32px; opacity: .3;}
.empty-title{font-family: var(--font-mono); font-size: 14px; color: var(--text-muted);}
.empty-sub{font-family: var(--font-body); font-size: 13px; color: var(--text-dim);
max-width: 36ch;}
.toast{position: fixed; bottom: var(--sp-5); right: var(--sp-5);
display: flex; align-items: center; gap: var(--sp-2);
background: var(--bg-hover); border: 1px solid var(--c-border);
border-radius: var(--r-lg); padding: 10px 16px; z-index: 9999;
font-family: var(--font-body); font-size: 13px; color: var(--text-primary);
box-shadow: 0 8px 32px var(--shadow-lg);
transform: translateY(0); opacity: 1;
transition: transform var(--e-med) var(--e-ease), opacity var(--e-med);
max-width: min(380px, calc(100vw - 32px));}
.toast--entering{transform: translateY(12px); opacity: 0;}
.toast--leaving{transform: translateY(8px); opacity: 0; pointer-events: none;}
.toast--ok{border-color: var(--tint-teal-md);}
.toast--ok::before{content: '✓'; color: var(--accent-teal); font-size: 14px;}
.toast--err{border-color: var(--tint-danger-md);}
.toast--err::before{content: '✗'; color: var(--accent-red); font-size: 14px;}
.toast--warn{border-color: var(--tint-warn-md);}
.toast--warn::before{content: '⚠'; color: var(--accent-warn); font-size: 13px;}
:focus-visible{outline: 2px solid var(--accent-teal);
outline-offset: 2px;}
:focus:not(:focus-visible){outline: none;}
::-webkit-scrollbar{width: 5px; height: 5px;}
::-webkit-scrollbar-track{background: transparent;}
::-webkit-scrollbar-thumb{background: var(--c-bg-4); border-radius: 3px;}
::-webkit-scrollbar-thumb:hover{background: var(--text-dim);}
*{scrollbar-width: thin; scrollbar-color: var(--c-bg-4) transparent;}
::selection{background: var(--tint-teal-md); color: var(--c-text-0);}
a{color: inherit; text-decoration: none;}
a:where(.link){color: var(--accent-blue); text-decoration-line: underline;
text-decoration-color: rgba(77,159,255,.35); text-underline-offset: 2px;}
a:where(.link):hover{text-decoration-color: var(--accent-blue);}
.filter-row{display: flex; align-items: center; gap: var(--sp-2);
flex-wrap: wrap; margin-bottom: var(--sp-3);}
.filter-label{font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
letter-spacing: .1em; color: var(--text-dim); flex-shrink: 0; min-width: 52px;}
.mdb-card__desc, .mdb-desc, .mdb-spec p, .mat-desc,
.record-desc, .card-description, .card-
.detail-desc, .detail-body, .mat-detail-desc,
.record-detail .description{font-family: var(--font-body); font-size: 14px; line-height: 1.7;}
.mach-filter-pill{font-family: var(--font-mono); font-size: 10px; padding: 3px 10px;
border-radius: var(--r-full); border: 1px solid var(--c-border);
background: var(--tint-white-xs); color: var(--text-muted);
cursor: pointer; transition: all var(--e-fast); white-space: nowrap;
user-select: none;}
.mach-filter-pill:hover, .mach-filter-pill.active:hover{opacity: .85;}
.mach-filter-pill.active{background: var(--tint-teal-md); color: var(--accent-teal);
border-color: var(--tint-teal-lg);}
.mach-sort-btn{font-family: var(--font-mono); font-size: 10px; padding: 3px 10px;
border-radius: var(--r-full); border: 1px solid var(--c-border);
background: transparent; color: var(--text-muted); cursor: pointer;
transition: all var(--e-fast);}
.mach-sort-btn.active{color: var(--accent-teal); border-color: var(--tint-teal-md);
background: var(--tint-teal-sm);}
@media (max-width: 768px) {
.cards { grid-template-columns: 1fr 1fr; }
.u-hide-mobile { display: none !important; }
}
@media (max-width: 480px) {
.cards { grid-template-columns: 1fr; }
.u-hide-phablet { display: none !important; }
.prose { font-size: 14px; }
}
.cmp-wrap{max-width:960px}
.cmp-header{margin-bottom:24px}
.cmp-title{font-size:clamp(20px,4vw,30px);font-weight:900;font-family:var(--font-mono);letter-spacing:-.5px;margin:0 0 6px}
.cmp-sub{font-size:13px;color:var(--text-dim);font-family:var(--font-mono);margin:0}
.cmp-pickers{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:24px}
.cmp-picker-input{width:100%;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--r-sm);padding:9px 12px;color:var(--text-primary);font-family:var(--font-mono);font-size:13px;outline:none;transition:border-color var(--e-fast)}
.cmp-picker-input:focus{border-color:var(--border-accent)}
.cmp-go-btn{background:var(--accent-teal);color:var(--cta-fg);border:none;border-radius:var(--r-sm);padding:10px 22px;font-size:13px;font-weight:700;font-family:var(--font-mono);cursor:pointer;transition:opacity var(--e-fast);flex-shrink:0}
.cmp-go-btn:hover{opacity:.88}
.cmp-empty{color:var(--text-dim);font-size:13px;padding:32px 0;text-align:center}
.cmp-table-wrap{overflow-x:auto;border:1px solid var(--border-color);border-radius:var(--radius)}
.cmp-table{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
.cmp-table th,.cmp-table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border-color)}
.cmp-dev-head{background:var(--bg-surface);vertical-align:top}
.cmp-dev-name{font-family:var(--font-mono);font-weight:700;font-size:14px;color:var(--text-primary);text-decoration:none}
.cmp-dev-name:hover{color:var(--accent-teal)}
.cmp-dev-mfr{font-size:10px;color:var(--text-dim);font-family:var(--font-mono);margin-top:2px}
.cmp-section-row td{background:var(--bg-surface);font-size:10px;font-family:var(--font-mono);font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-teal);padding:7px 14px}
.cmp-label{font-size:11px;font-family:var(--font-mono);color:var(--text-dim);white-space:nowrap}
.cmp-val{font-family:var(--font-mono);color:var(--text-primary);font-weight:600}
.cmp-diff .cmp-val{color:var(--accent-teal)}
.cmp-type{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:2px 8px;border-radius:var(--r-sm);background:var(--tint-teal-sm);color:var(--accent-teal)}
.cmp-link{font-size:11px;font-family:var(--font-mono);color:var(--accent-teal);text-decoration:none}
.cmp-link:hover{text-decoration:underline}
.cmp-link--buy{color:#22c55e}
.tool-wrap{max-width:960px}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.tool-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius);padding:18px 20px}
.tool-card-title{font-size:13px;font-weight:800;font-family:var(--font-mono);color:var(--accent-teal);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border-color)}
.tool-form{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.tool-label{display:flex;flex-direction:column;gap:4px;font-size:10px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--text-dim)}
.tool-input{background:var(--bg-hover);border:1px solid var(--border-color);border-radius:var(--r-sm);padding:7px 10px;color:var(--text-primary);font-family:var(--font-mono);font-size:13px;outline:none;transition:border-color var(--e-fast)}
.tool-input:focus{border-color:var(--border-accent)}
.tool-result{display:flex;flex-direction:column;gap:6px;padding-top:10px;border-top:1px solid var(--border-color)}
.tool-result-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-family:var(--font-mono);color:var(--text-muted)}
.tool-result-row strong{color:var(--accent-teal);font-size:14px}
.tool-result-row--total{padding-top:6px;border-top:1px dashed var(--border-color)}
.tool-result-row--total strong{font-size:17px}
.tool-note{font-size:10px;color:var(--text-dim);font-family:var(--font-mono);margin-top:10px;line-height:1.5}
.tool-note a{color:var(--accent-teal)}
.sp-wrap{max-width:640px}
.sp-form{display:flex;flex-direction:column;gap:14px}
.sp-textarea{resize:vertical;min-height:60px;line-height:1.6}
.sp-stars{display:flex;gap:4px;font-size:26px;cursor:pointer;padding:4px 0}
.sp-star{color:var(--text-dim);transition:color var(--e-fast),transform var(--e-fast);user-select:none}
.sp-star:hover{transform:scale(1.15)}
.sp-star--on{color:var(--accent-teal)}
.sp-sub-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-color)}
.sp-sub-row:last-child{border-bottom:none}
.sp-sub-info{flex:1;min-width:0}
.sp-sub-name{font-size:13px;font-weight:700;font-family:var(--font-mono);color:var(--text-primary)}
.sp-sub-meta{font-size:11px;color:var(--text-dim);font-family:var(--font-mono);margin-top:2px}
.sp-sub-reject{font-size:11px;color:#f87171;font-family:var(--font-mono);margin-top:4px;line-height:1.5}
.sp-badge{font-size:10px;font-family:var(--font-mono);font-weight:700;padding:3px 10px;border-radius:var(--r-sm);flex-shrink:0}
.sp-badge--pub{background:rgba(34,197,94,.12);color:#22c55e;border:1px solid rgba(34,197,94,.3)}
.sp-badge--pend{background:rgba(245,158,11,.12);color:#f59e0b;border:1px solid rgba(245,158,11,.3)}
.sp-badge--rej{background:rgba(248,113,113,.12);color:#f87171;border:1px solid rgba(248,113,113,.3)}
.rq-wrap{max-width:760px;display:flex;flex-direction:column;gap:14px}
.rq-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius);padding:16px 18px;transition:opacity .3s}
.rq-title{font-size:14px;font-weight:800;font-family:var(--font-mono);color:var(--text-primary)}
.rq-meta{font-size:11px;color:var(--text-dim);font-family:var(--font-mono);margin-top:3px}
.rq-meta a{color:var(--accent-teal);text-decoration:none}
.rq-
.rq-label{font-size:9px;font-family:var(--font-mono);font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-teal);margin-bottom:4px}
.rq-text{font-size:13px;line-height:1.6;color:var(--text-muted);white-space:pre-line;background:var(--bg-hover);border-radius:var(--r-sm);padding:10px 12px}
.rq-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--border-color)}
.rq-note{flex:1;min-width:140px;font-size:11px;padding:6px 10px}
.cmp-popular{padding-top:8px}
.cmp-pop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.cmp-pop-link{display:block;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--r-sm);padding:12px 14px;font-size:12px;font-weight:700;font-family:var(--font-mono);color:var(--text-muted);text-decoration:none;transition:all var(--e-fast)}
.cmp-pop-link:hover{border-color:var(--accent-teal);color:var(--accent-teal);text-decoration:none}
.cmp-tray{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:200;
background:var(--bg-surface);border:1px solid var(--border-accent);border-radius:var(--radius);
box-shadow:0 8px 24px var(--shadow-md);padding:10px 14px;display:flex;align-items:center;gap:12px;
max-width:calc(100vw - 24px);flex-wrap:wrap}
.cmp-tray-items{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cmp-tray-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-family:var(--font-mono);
font-weight:700;background:var(--tint-teal-sm);color:var(--accent-teal);border:1px solid var(--tint-teal-xl);
border-radius:var(--r-sm);padding:4px 6px 4px 10px;white-space:nowrap}
.cmp-tray-x{background:none;border:none;color:var(--accent-teal);cursor:pointer;font-size:11px;
padding:2px;line-height:1;opacity:.7}
.cmp-tray-x:hover{opacity:1}
.cmp-tray-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.cmp-tray-go{background:var(--accent-teal);color:var(--cta-fg);border:none;border-radius:var(--r-sm);
padding:7px 14px;font-size:12px;font-weight:700;font-family:var(--font-mono);text-decoration:none;
white-space:nowrap;transition:opacity var(--e-fast)}
.cmp-tray-go:hover{opacity:.88;text-decoration:none}
.cmp-tray-hint{font-size:11px;color:var(--text-dim);font-family:var(--font-mono);white-space:nowrap}
.cmp-tray-clear{background:none;border:1px solid var(--border-color);color:var(--text-dim);
border-radius:var(--r-sm);padding:6px 10px;font-size:11px;font-family:var(--font-mono);cursor:pointer}
.cmp-tray-clear:hover{color:var(--text-muted);border-color:var(--text-dim)}
@media(max-width:480px){
.cmp-tray{flex-direction:column;align-items:stretch;left:8px;right:8px;bottom:8px;transform:none;max-width:none}
.cmp-tray-actions{justify-content:space-between}
}
.cmp-toast{position:fixed;top:16px;left:50%;transform:translateX(-50%) translateY(-20px);z-index:300;
background:var(--bg-surface);border:1px solid var(--border-accent);border-radius:var(--r-sm);
padding:10px 18px;font-size:12px;font-family:var(--font-mono);color:var(--text-primary);
opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;box-shadow:0 4px 16px var(--shadow-sm)}
.cmp-toast--show{opacity:1;transform:translateX(-50%) translateY(0)}
.hw-card{position:relative;
display: block;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius, 10px);
padding: 14px 18px 14px 20px;
overflow: hidden;
transition: border-color var(--e-fast), transform var(--e-fast), box-shadow var(--e-fast);}
.hw-cmp-check{position:absolute;top:10px;right:10px;z-index:2;cursor:pointer}
.hw-cmp-input{position:absolute;opacity:0;width:24px;height:24px;cursor:pointer;margin:0}
.hw-cmp-box{display:flex;align-items:center;justify-content:center;width:24px;height:24px;
border-radius:var(--r-sm);border:1px solid var(--border-color);background:var(--bg-surface);
color:var(--text-dim);font-size:14px;font-weight:700;font-family:var(--font-mono);
transition:all var(--e-fast);pointer-events:none}
.hw-cmp-input:checked ~ .hw-cmp-box{font-size:0}
.hw-cmp-input:checked ~ .hw-cmp-box::after{font-size:13px}
.hw-cmp-check:hover .hw-cmp-box{border-color:var(--accent-teal)}
.cmp-picker{position:relative}
.cmp-picker-dropdown{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:50;
background:var(--bg-surface);border:1px solid var(--border-accent);border-radius:var(--r-sm);
max-height:260px;overflow-y:auto;box-shadow:0 8px 20px var(--shadow-md)}
.cmp-picker-dropdown--open{display:block}
.cmp-picker-item{padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--border-color);
display:flex;flex-direction:column;gap:2px;-webkit-tap-highlight-color:transparent}
.cmp-picker-item:last-child{border-bottom:none}
.cmp-picker-item:hover,.cmp-picker-item:active{background:var(--bg-hover)}
.cmp-picker-item-name{font-size:13px;font-weight:700;font-family:var(--font-mono);color:var(--text-primary)}
.cmp-picker-item-meta{font-size:10px;color:var(--text-dim);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em}
.cmp-picker-empty{padding:14px 12px;font-size:12px;color:var(--text-dim);font-family:var(--font-mono);text-align:center}
.dv-cmp-btn{display:inline-flex;align-items:center;gap:6px;background:var(--bg-surface);
color:var(--text-muted);border:1px solid var(--border-color);border-radius:var(--r-sm);
padding:6px 14px;font-size:12px;font-weight:700;font-family:var(--font-mono);cursor:pointer;
transition:all var(--e-fast)}
.dv-cmp-btn:hover{border-color:var(--accent-teal);color:var(--accent-teal)}
.dv-cmp-btn--active{background:var(--tint-teal-sm);color:var(--accent-teal);border-color:var(--tint-teal-xl)}
body:has(#cmp-tray) #app2-main{padding-bottom:70px}
.tool-section{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius);padding:18px 20px;margin-top:14px}
.tool-section-title{font-size:13px;font-weight:800;font-family:var(--font-mono);color:var(--accent-teal);margin-bottom:4px}
.tool-section-sub{font-size:11px;color:var(--text-dim);font-family:var(--font-mono);margin-bottom:12px;line-height:1.5}
.ml-lookup-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:6px}
.ml-lookup-form .tool-label{flex:1;min-width:160px}
.ml-card{margin-top:14px;border-top:1px solid var(--border-color);padding-top:14px}
.ml-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.ml-card-title{font-size:14px;font-weight:800;font-family:var(--font-mono);color:var(--text-primary)}
.ml-stars{color:var(--accent-teal);font-size:13px}
.ml-meta{font-size:11px;color:var(--text-dim);font-family:var(--font-mono);margin-bottom:12px}
.ml-group{margin-bottom:12px}
.ml-group-name{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-teal);font-family:var(--font-mono);margin-bottom:6px}
.ml-settings{display:flex;flex-direction:column;gap:4px}
.ml-setting{display:flex;justify-content:space-between;gap:12px;font-size:12px;font-family:var(--font-mono);padding:4px 10px;background:var(--bg-hover);border-radius:var(--r-sm)}
.ml-setting-key{color:var(--text-dim);text-transform:capitalize}
.ml-setting-val{color:var(--text-primary);font-weight:700;text-align:right}
.ml-notes{margin-top:10px;font-size:12px;line-height:1.6;color:var(--text-muted);background:var(--bg-hover);border-radius:var(--r-sm);padding:10px 12px}
.ml-empty{font-size:12px;color:var(--text-dim);font-family:var(--font-mono);line-height:1.6;padding:14px 0}
.ml-alt-title{font-size:10px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin:4px 0 8px}
.ml-alts{display:flex;flex-wrap:wrap;gap:8px}
.ml-alts .cmp-pop-link{display:inline-block;width:auto;cursor:pointer;border:1px solid var(--border-color);background:none;font-family:var(--font-mono)}
.tap-table-wrap{overflow:auto;max-height:340px;border:1px solid var(--border-color);border-radius:var(--r-sm)}
.tap-table{width:100%;border-collapse:collapse;font-size:12px}
.tap-table th{position:sticky;top:0;background:var(--bg-hover);text-align:left;padding:8px 10px;font-size:9px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--accent-teal);border-bottom:1px solid var(--border-color)}
.tap-table td{padding:7px 10px;font-family:var(--font-mono);border-bottom:1px solid var(--border-color);color:var(--text-muted)}
.tap-table tr:last-child td{border-bottom:none}
.tap-thread{color:var(--text-primary);font-weight:700;white-space:nowrap}
.tap-mm{color:var(--text-dim);font-size:10px}
.uc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.uc-grid input[readonly]{color:var(--accent-teal);font-weight:700}
.tool-cat-title{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);font-family:var(--font-mono);margin:18px 0 8px}
.tool-cat-title:first-of-type{margin-top:0}
.tool-card--link{display:block;text-decoration:none;cursor:pointer;transition:border-color var(--e-fast),transform var(--e-fast)}
.tool-card--link:hover{border-color:var(--accent-teal);transform:translateY(-2px);text-decoration:none}
.tool-card-desc{font-size:11px;color:var(--text-dim);font-family:var(--font-mono);line-height:1.5}
.tool-card--link .tool-card-title{margin-bottom:8px;padding-bottom:0;border-bottom:none}
.tool-detail-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius);padding:18px 20px}
.acc-profile-card,.acc-saved-list{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius);padding:14px 16px}
.acc-saved-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--border-color)}
.acc-saved-row:last-child{border-bottom:none}
.acc-saved-link{font-size:12px;font-family:var(--font-mono);color:var(--text-primary);text-decoration:none;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-saved-link:hover{color:var(--accent-teal)}
.acc-saved-remove{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:12px;padding:4px;flex-shrink:0}
.acc-saved-remove:hover{color:#f87171}
.action-btn--saved{color:var(--accent-teal);border-color:var(--accent-teal)}
.action-btn--saved svg{fill:var(--accent-teal)}
.action-pin-count{font-family:var(--font-mono);font-size:10px;font-weight:700;background:rgba(45,212,191,.12);color:var(--accent-teal);border-radius:8px;padding:1px 6px;margin-left:4px}
.contact-layout{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}
.contact-sidebar{display:flex;flex-direction:column;gap:16px}
.contact-form-col{min-width:0}
.contact-info-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--r-sm,6px);padding:14px;font-family:var(--font-mono)}
.contact-info-card-row{padding:8px 0;border-bottom:1px solid var(--border-color)}
.contact-info-card-row:last-child{border-bottom:none}
.contact-info-card-label{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-teal);margin-bottom:4px}
.contact-info-card-body{font-size:12px;color:var(--text-secondary);line-height:1.5;font-family:var(--font-primary,inherit)}
@media(max-width:720px){.contact-layout{grid-template-columns:1fr}}
.th-section{margin-top:16px;padding-top:14px;border-top:1px solid var(--border-color)}
.th-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.th-title{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);font-family:var(--font-mono)}
.th-pin-btn{font-size:11px;font-family:var(--font-mono);background:none;border:1px solid var(--border-color);color:var(--accent-teal);border-radius:var(--r-sm);padding:5px 10px;cursor:pointer;transition:border-color var(--e-fast)}
.th-pin-btn:hover{border-color:var(--accent-teal)}
.th-pin-btn:disabled{opacity:.5;cursor:default}
.th-history{display:flex;flex-direction:column;gap:4px}
.th-row{display:flex;align-items:center;gap:8px}
.th-load{flex:1;text-align:left;background:var(--bg-hover);border:none;border-radius:var(--r-sm);padding:6px 10px;font-size:11px;font-family:var(--font-mono);color:var(--text-muted);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color var(--e-fast)}
.th-load:hover{color:var(--accent-teal)}
.th-time{font-size:9px;color:var(--text-dim);font-family:var(--font-mono);flex-shrink:0;white-space:nowrap}
.th-remove{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:11px;padding:2px 4px;flex-shrink:0}
.th-remove:hover{color:#f87171}
.th-empty{font-size:11px;color:var(--text-dim);font-family:var(--font-mono);padding:6px 0}
.po-device-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.po-device-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--bg-hover);border:1px solid transparent;border-radius:var(--r-sm);padding:8px 12px;cursor:pointer;text-align:left;transition:border-color var(--e-fast)}
.po-device-btn:hover{border-color:var(--border-color)}
.po-device-btn--active{border-color:var(--accent-teal)}
.po-device-name{font-size:12px;font-weight:700;color:var(--text-main)}
.po-device-meta{font-size:9px;color:var(--text-dim);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em}
.po-card{margin-top:4px}
.po-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:2px}
.po-card-title{font-size:14px;font-weight:800;color:var(--text-main)}
.po-card-cat{font-size:9px;color:var(--text-dim);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0;white-space:nowrap}
.po-card-sub{font-size:11px;color:var(--text-muted);margin-bottom:10px}
.po-header2{display:flex;flex-direction:column;gap:1px;border:1px solid var(--border-color);border-radius:var(--r-sm);overflow:hidden;background:var(--border-color)}
.po-header2-row .po-pin{background:var(--bg-card)}
.po-list{display:flex;flex-direction:column;gap:1px;border:1px solid var(--border-color);border-radius:var(--r-sm);overflow:hidden;background:var(--border-color)}
.po-list .po-pin{background:var(--bg-card)}
.po-pin{display:flex;align-items:flex-start;gap:8px;padding:7px 10px;min-height:34px}
.po-pin-num{font-family:var(--font-mono);font-size:10px;font-weight:800;border-radius:4px;padding:2px 6px;flex-shrink:0;min-width:24px;text-align:center}
.po-pin-
.po-pin-name{font-size:12px;font-weight:700;color:var(--text-main);word-break:break-word}
.po-pin-desc{font-size:10px;color:var(--text-dim)}
.po-dropdowns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
@media(max-width:500px){.po-dropdowns{grid-template-columns:1fr}}
.po-orientation{display:flex;align-items:flex-start;gap:10px;background:rgba(45,212,191,.07);border:1px solid rgba(45,212,191,.18);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:12px}
.po-orient-icon{font-size:18px;flex-shrink:0;margin-top:1px}
.po-orientation strong{display:block;font-size:11px;font-family:var(--font-mono);font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-teal);margin-bottom:4px}
.po-orientation p{margin:0;font-size:12px;color:var(--text-muted);line-height:1.5}
.po-header2-wrap{margin-bottom:4px}
.po-header2-labels{display:grid;grid-template-columns:1fr 16px 1fr;gap:0;margin-bottom:4px}
.po-header2-labels span{font-size:9px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);text-align:center}
.po-header2-row{display:grid;grid-template-columns:1fr 16px 1fr;gap:0}
.po-row-divider{display:flex;align-items:center;justify-content:center;background:var(--bg-surface)}
.po-row-divider::after{content:'';display:block;width:2px;height:100%;background:var(--border-color)}
.po-pin--empty{background:var(--bg-surface) !important;min-height:34px}
.acc-wrap{max-width:680px;margin:0 auto;padding:0 0 48px}
.acc-hero{display:flex;align-items:flex-start;gap:16px;padding:20px 0 18px;border-bottom:1px solid var(--border-color);margin-bottom:0}
.acc-avatar{width:64px;height:64px;border-radius:50%;border:2px solid var(--border-color);flex-shrink:0}
.acc-hero-info{min-width:0}
.acc-hero-name{font-size:18px;font-weight:800;color:var(--text-main);margin-bottom:2px}
.acc-hero-username{font-size:12px;font-family:var(--font-mono);color:var(--text-dim);margin-bottom:5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.acc-hero-bio{font-size:12px;color:var(--text-muted);line-height:1.5;margin-top:4px}
.acc-badge{font-family:var(--font-mono);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:2px 6px;border-radius:3px}
.acc-badge--admin{background:rgba(251,146,60,.15);color:#fb923c}
.acc-badge--founding{background:rgba(45,212,191,.12);color:var(--accent-teal)}
.acc-badge--ok{background:rgba(74,222,128,.12);color:#4ade80}
.acc-badge--warn{background:rgba(251,191,36,.12);color:#fbbf24}
.acc-tabs{display:flex;gap:4px;padding:12px 0 0;border-bottom:1px solid var(--border-color);margin-bottom:20px}
.acc-tab{font-family:var(--font-mono);font-size:11px;font-weight:700;padding:6px 14px;border-radius:var(--r-sm) var(--r-sm) 0 0;text-decoration:none;color:var(--text-dim);border:1px solid transparent;border-bottom:none;margin-bottom:-1px;transition:color var(--e-fast)}
.acc-tab:hover{color:var(--text-main)}
.acc-tab--active{color:var(--accent-teal);border-color:var(--border-color);background:var(--bg-card)}
.acc-section{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--r-md);padding:16px 18px;margin-bottom:14px}
.acc-section--danger{border-color:rgba(248,113,113,.3)}
.acc-section-title{font-family:var(--font-mono);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);border-bottom:1px solid var(--border-color);padding-bottom:8px;margin-bottom:12px}
.acc-field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
@media(max-width:500px){.acc-field-row{grid-template-columns:1fr}}
.acc-label{display:flex;flex-direction:column;gap:4px;font-size:10px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)}
.acc-label--full{grid-column:1/-1}
.acc-input{background:var(--bg-input,var(--bg-hover));border:1px solid var(--border-color);border-radius:var(--r-sm);padding:7px 10px;font-size:13px;color:var(--text-main);width:100%;font-family:inherit;transition:border-color var(--e-fast)}
.acc-input:focus{outline:none;border-color:var(--accent-teal)}
.acc-textarea{resize:vertical;min-height:70px;font-family:inherit;line-height:1.5}
.acc-input-row{display:flex;gap:6px}
.acc-input-row .acc-input{flex:1}
.acc-inline-btn{background:none;border:1px solid var(--border-color);color:var(--accent-teal);font-family:var(--font-mono);font-size:11px;font-weight:700;padding:0 12px;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;transition:border-color var(--e-fast)}
.acc-inline-btn:hover{border-color:var(--accent-teal)}
.acc-check-row{display:flex;flex-wrap:wrap;gap:12px}
.acc-check{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);cursor:pointer}
.acc-check--full{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted);cursor:pointer}
.acc-check input[type=checkbox]{accent-color:var(--accent-teal);width:14px;height:14px}
.acc-social-icon{margin-right:2px}
.acc-info-row{display:flex;align-items:baseline;gap:10px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.acc-info-row:last-child{border-bottom:none}
.acc-info-label{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);flex-shrink:0;width:110px}
.acc-info-val{font-size:13px;color:var(--text-muted);display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.acc-text-link{font-size:11px;font-family:var(--font-mono);color:var(--accent-teal);text-decoration:none}
.acc-text-link:hover{text-decoration:underline}
.acc-muted{font-size:11px;color:var(--text-dim)}
.acc-section-actions{display:flex;align-items:center;gap:12px;margin-top:14px}
.acc-save-btn{background:var(--accent-teal);color:var(--btn-on-accent-fg);font-family:var(--font-mono);font-size:12px;font-weight:800;padding:8px 20px;border:none;border-radius:var(--r-sm);cursor:pointer;transition:opacity var(--e-fast)}
.acc-save-btn:hover{opacity:.85}
.acc-save-btn:disabled{opacity:.5;cursor:default}
.acc-save-status{font-size:12px;font-family:var(--font-mono)}
.acc-danger-btn{background:none;border:1px solid rgba(248,113,113,.5);color:#f87171;font-family:var(--font-mono);font-size:12px;font-weight:700;padding:7px 16px;border-radius:var(--r-sm);cursor:pointer;transition:border-color var(--e-fast)}
.acc-danger-btn:hover{border-color:#f87171}
.acc-token-list{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.acc-token-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg-hover);border-radius:var(--r-sm);padding:8px 10px}
.acc-token-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.acc-token-name{font-size:12px;font-weight:700;color:var(--text-main);font-family:var(--font-mono)}
.acc-revoke-btn{background:none;border:1px solid rgba(248,113,113,.4);color:#f87171;font-size:10px;font-family:var(--font-mono);padding:3px 8px;border-radius:3px;cursor:pointer;flex-shrink:0;white-space:nowrap}
.acc-revoke-btn:hover{border-color:#f87171}
.hub-panel{margin-top:24px;padding:18px 20px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--r-md);border-left:3px solid var(--accent-teal)}
.hub-title{font-size:10px;font-family:var(--font-mono);font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-teal);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border-color)}
.hub-loading{font-size:11px;color:var(--text-dim);font-family:var(--font-mono)}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.hub-col{display:flex;flex-direction:column}
.hub-col-label{font-size:9px;font-family:var(--font-mono);font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:8px}
.hub-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.hub-list li{border-radius:var(--r-sm);overflow:hidden}
.hub-list a{font-size:12px;color:var(--accent-teal);text-decoration:none;line-height:1.4;
display:block;padding:5px 8px;margin:-1px;border-radius:var(--r-sm);
border-left:2px solid transparent;transition:all var(--e-fast)}
.hub-list a:hover{color:var(--text-primary);background:rgba(45,212,191,.08);border-left-color:var(--accent-teal);padding-left:12px}
.hub-pinout-card{display:flex;align-items:center;gap:10px;background:var(--bg-hover);border:1px solid var(--border-color);border-radius:var(--r-sm);padding:10px 12px;text-decoration:none;transition:border-color var(--e-fast)}
.hub-pinout-card:hover{border-color:var(--accent-teal);text-decoration:none}
.hub-pinout-icon{font-size:20px;flex-shrink:0}
.hub-pinout-card strong{font-size:12px;color:var(--text-main);font-family:var(--font-mono)}
.hub-meta{font-size:10px;color:var(--text-dim);font-family:var(--font-mono)}
.hub-device-card{display: flex; gap: 14px; align-items: center;
padding: 14px; margin-bottom: 16px;
background: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: 6px;
text-decoration: none;
transition: border-color .15s ease;}
.hub-device-card:hover{border-color: var(--accent-teal, #2dd4bf);}
.hub-device-img{width: 64px; height: 64px; object-fit: contain; border-radius: 4px; flex-shrink: 0;}
.hub-device-
.hub-device-name{font-weight: 700; font-size: 14px; color: var(--fg, #e8e8e8);}
.hub-device-specs{font-size: 11px; color: var(--text-muted); font-family: monospace;}
.hub-device-mats{font-size: 10px; color: var(--accent-teal, #2dd4bf); font-family: monospace;}
.hub-deals .hub-deal-price{color: var(--accent-teal, #2dd4bf); font-weight: 700; margin-left: 6px;}
.hub-deal-pct{color: #f59e0b; font-size: 10px; margin-left: 4px;}
.inbox-wrap{display: flex; gap: 0; height: calc(100vh - 120px); min-height: 480px;
border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden;}
.inbox-side{width: 300px; flex-shrink: 0; overflow-y: auto; padding: 14px;
border-right: 1px solid var(--border-color); background: var(--bg-surface);}
.inbox-main{flex: 1; min-width: 0; overflow-y: auto; padding: 20px;}
.inbox-main .dm-wrap{max-width: none; height: auto;}
.inbox-main .dm-thread-wrap{height: 100%; display: flex; flex-direction: column;}
@media (max-width: 760px) {
.inbox-wrap { flex-direction: column; height: auto; }
.inbox-side { width: auto; max-height: 280px; border-right: none; border-bottom: 1px solid var(--border-color); }
.inbox-main { padding: 14px; }
}
.oc-grid--col{display: flex; flex-direction: column; gap: 8px;}
.oc-card--compact{padding: 8px 10px; gap: 8px;}
.oc-card--compact .oc-card-av,
.oc-card--compact .oc-card-av--init{width: 32px; height: 32px; font-size: 12px;}
.oc-card--compact .oc-card-actions{display: flex; gap: 4px;}
.oc-card--active{border-color: var(--accent-teal); background: rgba(45,212,191,.06);}
.inbox-side .oc-section{margin-bottom: 16px;}
.inbox-side .oc-section-hd{margin-bottom: 8px;}
.prof-edit-note{font-size: 11px; font-family: var(--font-mono); color: var(--accent-teal);
margin-top: 6px;}
.prof-body--edit{display: block; max-width: 720px;}
.prof-body--edit .acc-section:first-child{margin-top: 0;}
.acc-tab-extern{background: none; border: none; border-bottom: 2px solid transparent;
font-family: var(--font-mono); font-size: 12px; color: var(--text-dim);
padding: 8px 14px; margin-bottom: -1px; margin-left: auto; text-decoration: none;
transition: color var(--e-fast);}
.acc-tab-extern:hover{color: var(--accent-teal);}
.acc-tab-extern:first-of-type{margin-left: auto;}
.pinned-header{margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color);}
.pinned-card-link{display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
text-decoration: none; color: var(--text-main);}
.pinned-card-remove{background: none; border: none; color: var(--text-dim); cursor: pointer;
font-size: 13px; padding: 4px 6px; border-radius: 4px; flex-shrink: 0; transition: color var(--e-fast);}
.pinned-card-remove:hover{color: #f87171;}
.prof-username-row{display: flex; align-items: center; gap: 8px;}
.prof-copy-btn{background: none; border: 1px solid var(--border-color); border-radius: 6px;
color: var(--text-dim); cursor: pointer; font-size: 13px; padding: 3px 8px;
transition: color var(--e-fast), border-color var(--e-fast);}
.prof-copy-btn:hover{color: var(--accent-teal); border-color: var(--accent-teal);}

/* ── Public profile page ─────────────────────────────────────────────── */
.prof-wrap{max-width: 880px; margin: 0 auto; padding: 0 4px 40px;}
.prof-hero{display: flex; gap: 20px; align-items: flex-start;
padding: 24px; background: var(--bg-card); border: 1px solid var(--border-color);
border-radius: var(--r-lg); margin-bottom: 20px; flex-wrap: wrap;}
.prof-avatar-wrap{flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;}
.prof-avatar-note{font-size: 9px; font-family: var(--font-mono); color: var(--text-dim); text-decoration: none; text-align: center; max-width: 88px; line-height: 1.3; opacity: .75; transition: opacity var(--e-fast), color var(--e-fast);}
.prof-avatar-note:hover{opacity: 1; color: var(--accent-teal);}
.prof-avatar{width: 88px; height: 88px; border-radius: var(--r-full); object-fit: cover;
border: 2px solid var(--border-color);}
.prof-avatar-initials{width: 88px; height: 88px; border-radius: var(--r-full);
background: var(--tint-teal-sm); color: var(--accent-teal); font-family: var(--font-mono);
font-size: 28px; font-weight: 700; display: flex; align-items: center; justify-content: center;
border: 2px solid var(--border-accent);}
.prof-info{flex: 1; min-width: 200px;}
.prof-username{font-size: 20px; font-weight: 700; color: var(--text-main); font-family: var(--font-mono);}
.prof-copy-btn{background: none; border: 1px solid var(--border-color); border-radius: var(--r-sm);
font-size: 12px; padding: 2px 7px; cursor: pointer; color: var(--text-muted); transition: color var(--e-fast), border-color var(--e-fast);}
.prof-bio{font-size: 14px; color: var(--text-secondary); line-height: 1.55; margin: 10px 0 12px; max-width: 60ch;}
.prof-meta-row{display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px;}
.prof-meta-item{font-size: 12px; color: var(--text-dim); font-family: var(--font-mono);}
.prof-meta-link{text-decoration: none; transition: color var(--e-fast);}
.prof-meta-link:hover{color: var(--accent-teal);}
.prof-open-to{display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px;}
.prof-tag{display: inline-block; font-size: 11px; font-family: var(--font-mono);
text-transform: uppercase; letter-spacing: .04em; color: var(--accent-teal);
background: var(--tint-teal-sm); border: 1px solid var(--border-accent);
border-radius: var(--r-full); padding: 3px 10px;}
.prof-msg-btn{display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
font-size: 12px; font-weight: 700; color: var(--bg-primary); background: var(--accent-teal);
padding: 8px 16px; border-radius: var(--r-sm); text-decoration: none; border: none; cursor: pointer;}
.prof-msg-btn:hover{opacity: .88;}

.prof-body{display: grid; grid-template-columns: 1fr 260px; gap: 20px; align-items: start;}
@media (max-width: 720px){ .prof-body{grid-template-columns: 1fr;} }

.prof-stats{display: flex; gap: 10px; margin-bottom: 16px;}
.prof-stat{flex: 1; text-align: center; background: var(--bg-card); border: 1px solid var(--border-color);
border-radius: var(--r-md); padding: 14px 8px;}
.prof-stat-n{font-size: 22px; font-weight: 700; color: var(--accent-teal); font-family: var(--font-mono);}
.prof-stat-l{font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-top: 2px;}

.prof-section{background: var(--bg-card); border: 1px solid var(--border-color);
border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 14px;}
.prof-section-label{font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
color: var(--accent-teal); font-family: var(--font-mono); font-weight: 700; margin-bottom: 8px;}
.prof-prose{font-size: 13px; color: var(--text-secondary); line-height: 1.6; white-space: pre-wrap;}

.prof-sidebar{display: flex; flex-direction: column; gap: 14px;}
.prof-widget{background: var(--bg-card); border: 1px solid var(--border-color);
border-radius: var(--r-md); padding: 14px 16px;}
.prof-widget-label{font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
color: var(--text-dim); font-family: var(--font-mono); font-weight: 700; margin-bottom: 8px;}
.prof-exp-badge{display: inline-block; font-size: 12px; font-family: var(--font-mono); font-weight: 700;
text-transform: capitalize; color: var(--accent-teal); background: var(--tint-teal-sm);
border: 1px solid var(--border-accent); border-radius: var(--r-sm); padding: 4px 10px;}
.prof-social-link{display: flex; align-items: center; gap: 6px; padding: 6px 0; font-size: 13px;
color: var(--text-secondary); text-decoration: none; transition: color var(--e-fast);}
.prof-social-link:hover{color: var(--accent-teal);}
.prof-social-val{color: var(--text-dim); font-family: var(--font-mono); font-size: 11px;}
.prof-displayname-row{display: flex; align-items: center; gap: 6px; margin-top: 6px;
font-size: 12px; color: var(--text-dim); font-family: var(--font-mono);}
.prof-displayname-label{flex-shrink: 0;}
.prof-editable{cursor: text; border-radius: 4px; padding: 1px 4px; margin: -1px -4px;
transition: background var(--e-fast);}
.prof-editable:hover{background: rgba(45,212,191,.10); outline: 1px dashed rgba(45,212,191,.4);}
.prof-editable--empty{color: var(--text-dim); font-style: italic;}
.prof-editable--empty:hover{color: var(--accent-teal);}
.prof-editable.prof-editing{background: none; outline: none; padding: 0; margin: 0;}
.prof-inline-input{background: var(--bg-surface); border: 1px solid var(--accent-teal);
border-radius: 4px; color: var(--text-main); font: inherit; padding: 3px 6px;
width: 100%; box-sizing: border-box;}
textarea.prof-inline-input{resize: vertical; min-height: 60px;}
.prof-bio-field.prof-editing{display: block;}
.prof-tag--toggle{cursor: pointer; user-select: none; transition: opacity var(--e-fast);}
.prof-tag--toggle:hover{opacity: .8;}
.prof-tag--off{opacity: .45; border-style: dashed;}
.prof-social-row{margin-bottom: 4px; display: flex; align-items: center; gap: 6px;}
.prof-social-clear{background: none; border: none; color: var(--text-dim); font-size: 11px;
cursor: pointer; padding: 2px 4px; border-radius: var(--r-sm); flex-shrink: 0; opacity: .6; transition: opacity var(--e-fast), color var(--e-fast);}
.prof-social-clear:hover{opacity: 1; color: #f87171;}
.prof-social-clear:disabled{opacity: .3; cursor: default;}
.ct-byline{margin: -8px 0 20px;}
.proj-diff-badge{display: inline-block; font-size: 9px; font-family: var(--font-mono);
text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
padding: 2px 8px; border-radius: var(--r-full, 999px); border: 1px solid transparent;}
.proj-diff-badge--beginner{color: #34d399; background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.3);}
.proj-diff-badge--intermediate{color: #fb923c; background: rgba(251,146,60,.12); border-color: rgba(251,146,60,.3);}
.proj-diff-badge--advanced{color: #f87171; background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.3);}
.proj-info-row{font-size: 13px; color: var(--text-secondary); margin-bottom: 6px;}
.proj-info-row strong{color: var(--text-primary);}
.proj-parts-box{background: var(--bg-card); border: 1px solid var(--border-color);
border-radius: var(--radius, 8px); padding: 14px 16px; margin: 16px 0 24px;}
.proj-parts-label{font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
color: var(--accent-teal); font-family: var(--font-mono); font-weight: 700; margin-bottom: 8px;}
.proj-parts-body{font-size: 13px; color: var(--text-secondary); line-height: 1.6;}
.ct-byline-link{font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); text-decoration: none;}
.ct-byline-link:hover{color: var(--accent-teal);}
.prof-social-clear{background: none; border: none; color: var(--text-dim); font-size: 11px;
cursor: pointer; padding: 2px 4px; border-radius: var(--r-sm); transition: color var(--e-fast), background var(--e-fast);}
.prof-social-clear:hover{color: #ef4444; background: rgba(239,68,68,.1);}
.prof-social-clear:disabled{opacity: .4; cursor: default;}
.prof-social-link.prof-editable{display: inline-block;}
.prof-exp-select{background: var(--bg-surface); border: 1px solid var(--border-color);
border-radius: 4px; color: var(--text-main); font: inherit; font-family: var(--font-mono);
font-size: 12px; padding: 4px 8px; text-transform: capitalize; cursor: pointer;}
.pinned-section{margin-bottom: 28px;}
.pinned-section-title{font-size: 13px; font-weight: 700; font-family: var(--font-mono);
text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim);
margin-bottom: 10px;}
.pinned-card-time{font-size: 10px; color: var(--text-dim); font-family: var(--font-mono);
flex-shrink: 0; white-space: nowrap;}
.tool-filter-row{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:6px;margin-bottom:20px;padding-bottom:4px;scrollbar-width:none}
.tool-filter-row::-webkit-scrollbar{display:none}
.tool-filter-btn{flex-shrink:0;-webkit-appearance:none;appearance:none;
background:var(--bg-surface);border:1px solid var(--border-color);border-radius:20px;
padding:6px 16px;font-size:11px;font-family:var(--font-mono);font-weight:700;
text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);cursor:pointer;
white-space:nowrap;transition:all var(--e-fast)}
.tool-filter-btn:hover{border-color:var(--accent-teal);color:var(--accent-teal);background:rgba(45,212,191,.06)}
.tool-filter-btn--on{background:var(--accent-teal)!important;border-color:var(--accent-teal)!important;color:var(--btn-on-accent-fg)!important;box-shadow:0 0 0 1px var(--accent-teal)}
.tool-grid-all{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.tool-card-cat{font-size:9px;font-family:var(--font-mono);font-weight:800;text-transform:uppercase;
letter-spacing:.1em;color:var(--text-dim);margin-bottom:6px}
.prof-online-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 2px rgba(34,197,94,.2);margin-right:6px;flex-shrink:0}
.prof-online-dot--off{background:#475569;box-shadow:none}
.prof-actions{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.prof-linktree{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.prof-linktree-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--r-sm);text-decoration:none;color:var(--text-main);font-size:13px;font-weight:600;transition:border-color var(--e-fast),color var(--e-fast)}
.prof-linktree-item:hover{border-color:var(--accent-teal);color:var(--accent-teal);text-decoration:none}
.prof-linktree-icon{font-size:16px;flex-shrink:0}
.prof-linktree-arrow{margin-left:auto;font-size:12px;opacity:.5}
.prof-link-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border-color)}
.prof-link-drag{color:var(--text-dim);font-size:12px;cursor:grab;flex-shrink:0}
.prof-link-preview{flex:1;font-size:12px;font-weight:600;color:var(--accent-teal);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prof-link-vis{font-size:12px;font-family:var(--font-mono);cursor:pointer;flex-shrink:0;opacity:.85;transition:opacity var(--e-fast),background var(--e-fast);display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:var(--r-full);border:1px solid var(--border-color);}
.prof-link-vis:hover{opacity:1}
.prof-link-vis-label{font-size:10px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;}
.prof-link-vis--public{color:#2dd4bf;background:rgba(45,212,191,.1);border-color:rgba(45,212,191,.3);}
.prof-link-vis--contacts{color:#818cf8;background:rgba(129,140,248,.1);border-color:rgba(129,140,248,.3);}
.prof-link-vis--private{color:var(--text-dim);background:rgba(255,255,255,.04);}
.prof-link-del{-webkit-appearance:none;appearance:none;background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:12px;padding:2px 4px;border-radius:var(--r-sm);flex-shrink:0;transition:color var(--e-fast)}
.prof-link-del:hover{color:#f87171}
.prof-link-empty{font-size:11px;color:var(--text-dim);font-family:var(--font-mono);padding:8px 0}
.prof-link-add{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.prof-link-input{flex:1;min-width:140px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--r-sm);color:var(--text-main);font-size:12px;font-family:var(--font-mono);padding:7px 10px;outline:none;transition:border-color var(--e-fast)}
.prof-link-input:focus{border-color:var(--accent-teal)}
.prof-link-input--sm{flex:0 0 70px;min-width:0}
.prof-link-add-btn{-webkit-appearance:none;appearance:none;background:var(--accent-teal);color:var(--btn-on-accent-fg);border:none;border-radius:var(--r-sm);font-size:12px;font-family:var(--font-mono);font-weight:700;padding:7px 14px;cursor:pointer;white-space:nowrap;transition:opacity var(--e-fast)}
.prof-link-add-btn:hover{opacity:.88}
.prof-section-hint{font-size:9px;color:var(--text-dim);font-weight:400;letter-spacing:normal;text-transform:none;font-family:var(--font-mono);margin-left:6px}
.prof-online-toggle{margin-top:10px}
.prof-toggle-label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.prof-toggle-chk{position:absolute;opacity:0;width:0;height:0}
.prof-toggle-track{display:inline-block;width:32px;height:18px;background:var(--border-color);border-radius:9px;position:relative;transition:background var(--e-fast);flex-shrink:0}
.prof-toggle-chk:checked + .prof-toggle-track{background:var(--accent-teal)}
.prof-toggle-thumb{position:absolute;top:3px;left:3px;width:12px;height:12px;background:#fff;border-radius:50%;transition:left var(--e-fast)}
.prof-toggle-chk:checked + .prof-toggle-track .prof-toggle-thumb{left:17px}
.prof-toggle-text{font-size:11px;color:var(--text-dim);font-family:var(--font-mono)}
.pinned-wrap{max-width:960px;margin:0 auto;padding:0 0 48px}
.pinned-hdr{padding:28px 0 20px;border-bottom:1px solid var(--border-color);margin-bottom:28px}
.pinned-hdr-top{display:flex;align-items:baseline;gap:12px;margin-bottom:4px}
.pinned-title{font-size:20px;font-weight:800;font-family:var(--font-mono);color:var(--text-primary);margin:0;letter-spacing:-.3px}
.pinned-count-badge{font-size:9px;font-family:var(--font-mono);font-weight:700;background:rgba(45,212,191,.12);color:var(--accent-teal);border:1px solid rgba(45,212,191,.25);border-radius:10px;padding:2px 7px;letter-spacing:.06em;text-transform:uppercase}
.pinned-sub{font-size:11px;color:var(--text-dim);margin:0;font-family:var(--font-mono)}
.pinned-sections{display:flex;flex-direction:column;gap:32px}
.pinned-section-hdr{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.pinned-section-label{font-size:9px;font-family:var(--font-mono);font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim)}
.pinned-section-count{font-size:9px;font-family:var(--font-mono);color:var(--text-dim);background:var(--bg-surface);border:1px solid var(--border-color);border-radius:8px;padding:1px 6px}
.pinned-section-line{flex:1;height:1px;background:var(--border-color)}
.pinned-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.pinned-card{position:relative;display:flex;flex-direction:column;background:linear-gradient(165deg,var(--bg-card) 0%,var(--bg-surface) 100%);border:1px solid var(--border-color);border-radius:12px;overflow:hidden;transition:border-color var(--e-fast),box-shadow .25s ease,transform .25s ease,opacity .22s;cursor:pointer}
.pinned-card:hover{border-color:rgba(45,212,191,.45);box-shadow:0 12px 28px var(--shadow-md),0 0 0 1px rgba(45,212,191,.12);transform:translateY(-3px)}
.pinned-card--out{opacity:0;transform:scale(.96)}
.pinned-card::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--border-color)}
.pinned-card[data-type="howto"]::before{background:linear-gradient(90deg,#2dd4bf,#5eead4)}
.pinned-card[data-type="device"]::before{background:linear-gradient(90deg,#818cf8,#a5b4fc)}
.pinned-card[data-type="material"]::before{background:linear-gradient(90deg,#fb923c,#fdba74)}
.pinned-card[data-type="tool"]::before{background:linear-gradient(90deg,#34d399,#6ee7b7)}
.pinned-card-actions{position:absolute;top:12px;right:12px;display:flex;gap:5px;opacity:0;transition:opacity var(--e-fast);z-index:2}
.pinned-card:hover .pinned-card-actions{opacity:1}
.pinned-card-act{-webkit-appearance:none;appearance:none;background:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-dim);cursor:pointer;font-size:10px;font-family:var(--font-mono);padding:4px 8px;border-radius:var(--r-full);transition:all var(--e-fast);white-space:nowrap;box-shadow:0 2px 8px var(--shadow-sm)}
.pinned-card-act--open:hover{color:var(--accent-teal);border-color:var(--accent-teal)}
.pinned-card-act--del:hover{color:#f87171;border-color:#f87171}
.pinned-card-
.pinned-card-body{padding:18px 16px 14px;flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.pinned-card-top{display:flex;align-items:flex-start;gap:8px}
.pinned-card-icon{font-size:19px;flex-shrink:0;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--tint-teal-sm);}
.pinned-card[data-type="device"] .pinned-card-icon{background:rgba(129,140,248,.12);}
.pinned-card[data-type="material"] .pinned-card-icon{background:rgba(251,146,60,.12);}
.pinned-card[data-type="tool"] .pinned-card-icon{background:rgba(52,211,153,.12);}
.pinned-card-title{font-size:14px;font-weight:700;color:var(--text-primary);line-height:1.4;word-break:break-word;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;transition:color var(--e-fast);flex:1;min-width:0;padding-top:2px}
.pinned-card:hover .pinned-card-title{color:var(--accent-teal)}
.pinned-card-summary{font-size:11px;color:var(--text-dim);font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pinned-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;border-top:1px solid var(--border-color);}
.pinned-card-type{font-size:9px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.07em;font-weight:700;flex-shrink:0;padding:3px 9px;border-radius:var(--r-full);}
.pinned-card[data-type="howto"] .pinned-card-type{color:#2dd4bf;background:rgba(45,212,191,.12);}
.pinned-card[data-type="device"] .pinned-card-type{color:#818cf8;background:rgba(129,140,248,.12);}
.pinned-card[data-type="material"] .pinned-card-type{color:#fb923c;background:rgba(251,146,60,.12);}
.pinned-card[data-type="tool"] .pinned-card-type{color:#34d399;background:rgba(52,211,153,.12);}
.pinned-card-date{font-size:9px;color:var(--text-dim);font-family:var(--font-mono);flex-shrink:0;margin-left:auto}
.pinned-empty{font-size:12px;color:var(--text-dim);padding:24px 0;font-family:var(--font-mono);grid-column:1/-1}
.pinned-empty p{font-size:11px;color:var(--text-dim);opacity:.7;margin-top:4px}
.pinned-empty a{color:var(--accent-teal)}
@media(max-width:600px){.pinned-grid{grid-template-columns:1fr}}
.pinned-tool-summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:5px 8px;padding:8px 12px 8px 16px;border-top:1px solid var(--border-color);background:var(--bg-hover)}
.pts-item{display:flex;flex-direction:column;gap:1px;min-width:0}
.pts-label{font-size:8px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--text-dim);font-weight:700}
.pts-value{font-size:11px;line-height:1.6;padding-bottom:1px;font-family:var(--font-mono);color:var(--accent-teal);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lip-drop{border:2px dashed var(--border-color);border-radius:var(--r-md);padding:0;cursor:pointer;transition:border-color var(--e-fast),background var(--e-fast)}
.lip-drop:hover,.lip-drop--over{border-color:var(--accent-teal);background:var(--tint-teal-sm)}
.lip-drop-inner{display:flex;flex-direction:column;align-items:center;gap:6px;padding:32px 16px}
.lip-drop-icon{font-size:32px;line-height:1}
.lip-drop-text{font-size:13px;color:var(--text-muted)}
.lip-drop-link{color:var(--accent-teal);text-decoration:underline;cursor:pointer}
.lip-drop-sub{font-size:10px;color:var(--text-dim);font-family:var(--font-mono)}
.lip-preview-wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:600px){.lip-preview-wrap{grid-template-columns:1fr}}
.lip-preview-pane{display:flex;flex-direction:column;gap:6px}
.lip-preview-label{font-size:9px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);font-weight:700}
.lip-canvas{max-width:100%;height:auto;border-radius:var(--r-sm);border:1px solid var(--border-color);display:block;background:var(--bg-code);image-rendering:pixelated}
.tool-range{width:100%;accent-color:var(--accent-teal);cursor:pointer}
.lip-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.lip-preset-btn{-webkit-appearance:none;appearance:none;background:var(--bg-surface);border:1px solid var(--border-color);color:var(--text-dim);border-radius:20px;padding:5px 12px;font-size:11px;font-family:var(--font-mono);cursor:pointer;transition:all var(--e-fast);white-space:nowrap}
.lip-preset-btn:hover{border-color:var(--accent-teal);color:var(--accent-teal)}
.lip-preset-btn--active{background:rgba(45,212,191,.12);border-color:var(--accent-teal);color:var(--accent-teal);font-weight:700}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--line-height);-webkit-font-smoothing:antialiased;min-height:100vh;}
.pres-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
.pres-dot--online{background:#2dd4bf;box-shadow:0 0 4px rgba(45,212,191,.6)}
.pres-dot--away{background:#f2b84a}
.pres-dot--busy{background:#f87171}
.pres-dot--offline{background:#4b615c}
.prof-status-select-wrap{margin-top:10px;display:inline-flex;align-items:center;gap:8px}
.prof-status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0}
.prof-status-dot--online{background:#2dd4bf;box-shadow:0 0 4px rgba(45,212,191,.6)}
.prof-status-dot--busy{background:#f87171}
.prof-status-dot--offline{background:#4b615c}
.prof-status-select{background:var(--bg-surface);border:1px solid var(--border-color);color:var(--text-main);border-radius:5px;padding:4px 8px;font-size:11px;font-family:var(--font-mono);cursor:pointer}
.prof-status-select:hover{border-color:var(--accent-teal)}
/* ===== Light theme overrides ===== */
[data-theme="light"] {
--c-bg-0: #ffffff;
--c-bg-1: #ffffff;
--c-bg-2: #f4f6f8;
--c-bg-3: #e7ebf0;
--c-bg-4: #d8dee6;
--c-text-0: #10151c;
--c-text-1: #48566a;
--c-text-2: #6b7788;
--c-text-3: #8996a6;
--c-border: rgba(15,23,42,.12);
--c-border-hi: rgba(0,150,120,.35);
--bg-nav: #ffffff;
--bg-content: #ffffff;
--bg-black: #0f172a;
--text-secondary: #2d3748;
--accent-teal-dark: #00967a;
--shadow-sm: rgba(15,23,42,.10);
--shadow-md: rgba(15,23,42,.14);
--shadow-lg: rgba(15,23,42,.18);
--overlay-scrim: rgba(15,23,42,.45);
--scrim: rgba(15,23,42,.35);
--scrim-heavy: rgba(15,23,42,.65);
--scrim-light: rgba(15,23,42,.12);
--tint-black-sm: rgba(15,23,42,.06);
--tint-black-md: rgba(15,23,42,.10);
--tint-black-lg: rgba(15,23,42,.16);
--tint-black-xl: rgba(15,23,42,.28);
--tint-white-xs: rgba(15,23,42,.02);
--tint-white-sm: rgba(15,23,42,.04);
--tint-white-md: rgba(15,23,42,.08);
/* btn-on-accent-fg and cta-fg stay dark (#04140f) intentionally — teal CTAs need dark text in both themes */
}

/* ===== Theme toggle button ===== */
.app2-theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border:1px solid var(--border-color); border-radius:var(--r-sm,6px);
  background:transparent; color:var(--text-muted); cursor:pointer; flex-shrink:0;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
  margin-left:4px;
}
.app2-theme-toggle:hover{ color:var(--accent-teal); border-color:var(--border-accent); background:var(--bg-hover); }
.app2-theme-toggle .ti-sun,
.app2-theme-toggle .ti-moon{ display:block; }
.app2-theme-toggle .ti-moon{ display:none; }
[data-theme="light"] .app2-theme-toggle .ti-sun{ display:none; }
[data-theme="light"] .app2-theme-toggle .ti-moon{ display:block; }

/* ===== Homepage: collapsible sections ===== */
.hp-section__head{
  display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none;
}
.hp-section__chevron{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:20px; height:20px; padding:0; border:none; background:transparent;
  color:var(--text-dim); cursor:pointer; transition:color .15s ease, transform .25s ease;
}
.hp-section__head:hover .hp-section__chevron{ color:var(--accent-teal); }
.hp-section--collapsed .hp-section__chevron{ transform:rotate(-90deg); }
.hp-section__body-wrap{
  display:grid; grid-template-rows:1fr; transition:grid-template-rows .28s ease;
}
.hp-section--collapsed .hp-section__body-wrap{ grid-template-rows:0fr; }
.hp-section__body{ overflow:hidden; min-height:0; }
.hp-section--collapsed .hp-section__body{ pointer-events:none; }

/* ===== Homepage: terminal-style list rows ===== */
.hp-list{ display:flex; flex-direction:column; }
.hp-list-row{
  position:relative;
  display:flex; align-items:center; gap:12px;
  padding:11px 10px 11px 14px;
  text-decoration:none; color:var(--text-primary);
  border-bottom:1px solid var(--border-color);
  transition:background .15s ease, padding-left .15s ease;
  animation:hpRowIn .35s ease backwards;
  animation-delay:calc(var(--i,0) * 35ms);
  overflow:hidden;
}
.hp-list-row::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:0;
  background:var(--accent-teal); transition:width .15s ease;
}
.hp-list-row:hover{ background:var(--bg-hover); padding-left:20px; }
.hp-list-row:hover::before{ width:3px; }
.hp-list-row__idx{
  font-family:var(--font-mono); font-size:10px; color:var(--text-dim);
  flex-shrink:0; width:18px;
}
.hp-list-row__glyph{
  font-family:var(--font-mono); font-size:13px; color:var(--accent-teal);
  flex-shrink:0; opacity:.85;
}
.hp-list-row__title{
  flex:1 1 auto; min-width:0; font-size:13px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hp-list-row__tag{
  flex-shrink:0; font-size:9px; font-family:var(--font-mono); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; padding:2px 7px;
  border-radius:var(--r-sm); background:var(--tint-teal-sm);
  color:var(--accent-teal); border:1px solid var(--tint-teal-xl);
}
.hp-list-row__meta{
  flex-shrink:0; display:flex; gap:10px; font-size:10px; color:var(--text-dim);
  font-family:var(--font-mono);
}
.hp-list-row__arrow{
  flex-shrink:0; font-family:var(--font-mono); font-size:13px; color:var(--text-dim);
  opacity:0; transform:translateX(-4px); transition:opacity .15s ease, transform .15s ease, color .15s ease;
}
.hp-list-row:hover .hp-list-row__arrow{ opacity:1; transform:translateX(0); color:var(--accent-teal); }
.hp-list-row:last-child{ border-bottom:none; }

@keyframes hpRowIn{
  from{ opacity:0; transform:translateX(-6px); }
  to{ opacity:1; transform:translateX(0); }
}

@media (max-width:640px){
  .hp-list-row__meta{ display:none; }
  .hp-list-row__idx{ width:14px; }
  .hp-list-row{ align-items:flex-start; padding-top:12px; padding-bottom:12px; }
  .hp-list-row__title{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    line-height:1.35;
  }
  .hp-list-row__tag{ margin-top:1px; }
  .hp-list-row__arrow{ display:none; }
}

/* ===== Homepage: hero search box ===== */
.hp-search{
  position: relative;
  max-width: 480px;
  margin-top: 20px;
}
.hp-search__prompt{
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 14px; color: var(--accent-teal);
  pointer-events: none;
}
.hp-search__input{
  width: 100%; box-sizing: border-box;
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: var(--radius); padding: 11px 40px 11px 32px;
  font-family: var(--font-mono); font-size: 13px; color: var(--text-primary);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hp-search__input::placeholder{ color: var(--text-dim); }
.hp-search__input:focus{
  outline: none; border-color: var(--accent-teal);
  box-shadow: 0 0 0 3px var(--tint-teal-sm), var(--glow-t);
}
.hp-search__kbd{
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);
  border: 1px solid var(--border-color); border-radius: 4px; padding: 1px 6px;
  pointer-events: none;
}
.hp-search__results{
  display: none;
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--bg-hover); border: 1px solid var(--border-accent);
  border-radius: var(--radius); box-shadow: 0 16px 40px var(--shadow-lg), var(--glow-t);
  max-height: 360px; overflow-y: auto; z-index: 40;
  padding: 6px;
}
.hp-search__results.open{ display: block; }
.hp-search__item{
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: var(--radius-sm);
  text-decoration: none; margin-bottom: 1px; transition: background .12s ease;
}
.hp-search__item:hover, .hp-search__item--sel{ background: var(--tint-teal-sm); }
.hp-search__item-type{
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--accent-teal); flex-shrink: 0;
}
.hp-search__item-title{
  font-size: 13px; color: var(--text-primary); font-weight: 600; flex: 1 1 auto; min-width: 0;
}
.hp-search__item-snip{
  font-size: 11px; color: var(--text-muted); width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hp-search__viewall{
  display: block; text-align: center; font-family: var(--font-mono); font-size: 11px;
  color: var(--accent-teal); text-decoration: none; padding: 8px; margin-top: 2px;
  border-top: 1px solid var(--border-color);
}
.hp-search__viewall:hover{ text-decoration: underline; }
.hp-search__hint{
  font-size: 12px; color: var(--text-dim); padding: 12px; text-align: center; font-family: var(--font-mono);
}
@media (max-width: 640px){
  .hp-search{ max-width: 100%; }
  .hp-search__kbd{ display: none; }
}

/* ===== Homepage: latest-update spotlight ===== */
.hp-spotlight{
  background: linear-gradient(180deg, rgba(45,212,191,.06), rgba(45,212,191,0) 65%);
  border: 1px solid rgba(45,212,191,.25); border-radius: 12px;
  padding: 20px 22px; margin-bottom: 32px;
  box-shadow: 0 0 32px rgba(45,212,191,.06);
}
.hp-spotlight__eyebrow{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.hp-spotlight__label{
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--accent-teal); font-weight: 700;
}
.hp-spotlight__date{
  font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);
}
.hp-spotlight__all{
  margin-left: auto; font-family: var(--font-mono); font-size: 10px;
  color: var(--text-dim); text-decoration: none;
}
.hp-spotlight__all:hover{ color: var(--accent-teal); }
.hp-spotlight__title{ font-size: 19px; font-weight: 700; line-height: 1.35; margin-bottom: 8px; }
.hp-spotlight__title a{ color: var(--text-primary); text-decoration: none; }
.hp-spotlight__title a:hover{ color: var(--accent-teal); }
.hp-spotlight__excerpt{
  font-size: 13px; color: var(--text-muted); line-height: 1.65;
  margin: 0 0 16px; font-family: var(--font-body, sans-serif); max-width: 640px;
}
.hp-spotlight__cta{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  background: var(--accent-teal); color: var(--cta-fg); text-decoration: none;
  transition: opacity .15s ease;
}
.hp-spotlight__cta:hover{ opacity: .85; text-decoration: none; }
@media (max-width: 640px){
  .hp-spotlight{ padding: 16px 18px; }
  .hp-spotlight__title{ font-size: 16px; }
}

/* ── Forum / discussion widget ──────────────────────────────────────── */
.forum-widget{margin-top:32px;padding-top:20px;border-top:1px solid var(--border-color)}
.forum-widget-title{font-size:11px;font-family:var(--font-mono);font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:14px}
.forum-empty{font-size:13px;color:var(--text-dim);margin-bottom:14px}

.forum-post{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:8px}
.forum-post-reply{margin-left:22px;border-left:2px solid var(--border-color);border-top-left-radius:0;border-bottom-left-radius:0}
.forum-post-teaser{filter:blur(3px);pointer-events:none;user-select:none}
.forum-replying-to{font-size:10.5px;color:var(--text-dim);font-family:var(--font-mono);margin-bottom:4px;display:flex;align-items:center;gap:4px}
.forum-post-head{display:flex;align-items:baseline;gap:6px;font-size:12px;color:var(--text-dim);margin-bottom:6px}
.forum-post-author{font-weight:700;color:var(--text-primary)}
.forum-post-body{font-size:14px;line-height:1.6;color:var(--text-primary);white-space:pre-wrap;word-break:break-word}
.forum-post-actions{display:flex;gap:14px;margin-top:8px}
.forum-action-btn{background:none;border:none;color:var(--accent-teal);font-size:11.5px;font-family:var(--font-mono);font-weight:700;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;padding:0}
.forum-action-btn:hover{text-decoration:underline}
.forum-action-btn:disabled{opacity:.5;cursor:default;text-decoration:none}
.forum-admin-delete-post{color:#f87171}

.forum-thread-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:-10px 0 20px}
.forum-mod-btn{padding:5px 12px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--r-sm);color:var(--text-dim);font-size:11px;font-family:var(--font-mono);font-weight:700;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;transition:all var(--e-fast)}
.forum-mod-btn:hover{border-color:var(--accent-teal);color:var(--text-primary)}
.forum-mod-btn.is-active{background:var(--tint-teal-sm);border-color:var(--accent-teal);color:var(--accent-teal)}
.forum-mod-btn.is-danger:hover{border-color:#f87171;color:#f87171}
.forum-thread-badges{display:flex;gap:6px;margin-bottom:10px}
.forum-badge{font-size:10px;font-family:var(--font-mono);font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:var(--r-sm)}
.forum-badge-pinned{background:var(--tint-teal-sm);color:var(--accent-teal)}
.forum-badge-locked{background:rgba(248,113,113,.12);color:#f87171}

.forum-reply-box{margin-top:10px;padding-top:10px;border-top:1px solid var(--border-color)}
.forum-view-full{display:inline-block;margin:4px 0 4px;font-size:12.5px;color:var(--accent-teal);text-decoration:none;font-family:var(--font-mono)}
.forum-view-full:hover{text-decoration:underline}

.forum-compose{margin-top:16px}
.forum-textarea{width:100%;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--r-sm);padding:10px 12px;font-family:var(--font-body,sans-serif);font-size:13.5px;line-height:1.5;color:var(--text-primary);resize:vertical;min-height:64px;outline:none;transition:border-color var(--e-fast)}
.forum-textarea:focus{border-color:var(--accent-teal)}
.forum-reply-box .forum-textarea{min-height:50px;font-size:13px}
.forum-compose-foot{margin-top:8px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.forum-err{color:#f87171;font-size:11.5px;font-family:var(--font-mono)}
.forum-btn{padding:8px 18px;background:var(--accent-teal);color:var(--cta-fg);border:none;border-radius:var(--r-sm);font-weight:700;font-size:12.5px;font-family:var(--font-mono);cursor:pointer;transition:opacity var(--e-fast);flex-shrink:0}
.forum-btn:hover{opacity:.88}
.forum-btn:disabled{opacity:.5;cursor:default}
.forum-btn-sm{padding:6px 14px;font-size:11.5px}

.forum-signin-cta{text-align:center;padding:16px 0 6px}
.forum-signin-btn{display:inline-block;padding:9px 22px;background:var(--accent-teal);color:var(--cta-fg);border-radius:var(--r-sm);text-decoration:none;font-weight:700;font-size:12.5px;font-family:var(--font-mono)}
.forum-signin-btn:hover{opacity:.88;text-decoration:none}
.forum-signin-inline{font-size:12.5px;color:var(--text-dim);margin-top:8px}
.forum-signin-inline a{color:var(--accent-teal);text-decoration:none}
.forum-signin-inline a:hover{text-decoration:underline}

.forum-smiley-bar{display:flex;flex-wrap:wrap;gap:2px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--border-color)}
.forum-smiley-btn{background:none;border:none;border-radius:var(--r-sm);width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;line-height:1;transition:background var(--e-fast)}
.forum-smiley-btn:hover{background:var(--bg-hover)}

/* Thread page */
.forum-thread-posts{margin-top:8px}
.forum-thread-gated{text-align:center;padding:48px 16px}
.forum-thread-gated p{color:var(--text-dim);margin-bottom:14px;font-size:13.5px}

/* Forum index / section browse */
.forum-index-wrap{max-width:820px;margin:0 auto;padding:24px 16px}
.forum-index-hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px;gap:12px}
.forum-index-title{font-size:26px;font-weight:800;color:var(--text-primary)}
.forum-index-sub{font-size:13px;color:var(--text-dim);margin-top:4px}
.forum-section-list{display:flex;flex-direction:column;gap:10px}
.forum-section-card{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--r-md);padding:16px 18px;text-decoration:none;color:inherit;transition:border-color var(--e-fast)}
.forum-section-card:hover{border-color:var(--accent-teal)}
.forum-section-main{flex:1;min-width:0}
.forum-section-name{font-size:15px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:6px}
.forum-section-desc{font-size:12.5px;color:var(--text-dim);margin-top:3px}
.forum-section-meta{font-size:11px;color:var(--text-dim);font-family:var(--font-mono);white-space:nowrap;text-align:right}
.forum-section-admin-actions{display:flex;gap:6px;margin-left:8px}
.forum-icon-btn{background:none;border:1px solid var(--border-color);border-radius:var(--r-sm);width:26px;height:26px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-dim);font-size:12px;transition:all var(--e-fast)}
.forum-icon-btn:hover{border-color:var(--accent-teal);color:var(--accent-teal)}
.forum-icon-btn.is-danger:hover{border-color:#f87171;color:#f87171}
.forum-new-section-btn{padding:8px 16px;background:var(--accent-teal);color:var(--cta-fg);border:none;border-radius:var(--r-sm);font-weight:700;font-size:12.5px;font-family:var(--font-mono);cursor:pointer;white-space:nowrap}
.forum-new-section-btn:hover{opacity:.88}

/* Section thread list */
.forum-thread-list{display:flex;flex-direction:column;gap:8px}
.forum-thread-row{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--r-sm);padding:12px 16px;text-decoration:none;color:inherit;transition:border-color var(--e-fast)}
.forum-thread-row:hover{border-color:var(--accent-teal)}
.forum-thread-row-main{flex:1;min-width:0}
.forum-thread-row-title{font-size:14px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:6px}
.forum-thread-row-meta{font-size:11.5px;color:var(--text-dim);font-family:var(--font-mono);margin-top:3px}
.forum-thread-row-stats{font-size:11px;color:var(--text-dim);font-family:var(--font-mono);text-align:right;white-space:nowrap}
.forum-new-thread-btn{display:inline-block;padding:8px 16px;background:var(--accent-teal);color:var(--cta-fg);border-radius:var(--r-sm);font-weight:700;font-size:12.5px;font-family:var(--font-mono);text-decoration:none;margin-bottom:16px}
.forum-new-thread-btn:hover{opacity:.88;text-decoration:none}

/* New-thread form */
.forum-new-thread-form{max-width:640px}
.forum-input{width:100%;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--r-sm);padding:10px 12px;font-family:var(--font-body,sans-serif);font-size:14px;color:var(--text-primary);outline:none;transition:border-color var(--e-fast);margin-bottom:12px}
.forum-input:focus{border-color:var(--accent-teal)}

/* Lightweight modal */
.forum-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:200;padding:16px}
.forum-modal{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--r-md);padding:24px;max-width:420px;width:100%;max-height:90vh;overflow-y:auto}
.forum-modal-title{font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:16px}
.forum-modal-label{display:block;font-size:11px;font-family:var(--font-mono);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);margin-bottom:5px;margin-top:12px}
.forum-modal-label:first-of-type{margin-top:0}
.forum-select{width:100%;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--r-sm);padding:9px 12px;font-family:var(--font-body,sans-serif);font-size:13.5px;color:var(--text-primary)}
.forum-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.forum-modal-cancel{padding:8px 16px;background:none;border:1px solid var(--border-color);border-radius:var(--r-sm);color:var(--text-dim);font-size:12.5px;cursor:pointer}
.forum-modal-cancel:hover{color:var(--text-primary)}
.forum-icon-btn[disabled]{opacity:.3;cursor:default}
.forum-icon-btn[disabled]:hover{border-color:var(--border-color);color:var(--text-dim)}
.forum-post-author-link{color:var(--text-primary);font-weight:700;text-decoration:none}
.forum-post-author-link:hover{color:var(--accent-teal);text-decoration:underline}

/* ── View Transitions (page navigation cross-fade) ─────────────────────── */
/* Fast, snappy — deliberately quicker than the browser default (250ms ease)
   to feel "instant" rather than decorative, matching the terminal aesthetic. */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:140ms;
  animation-timing-function:cubic-bezier(.2,0,.2,1);
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){
    animation:none;
  }
}

/* ── Live viewer count badge ───────────────────────────────────────────── */
.viewer-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;color:var(--text-dim);background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--r-sm);padding:4px 10px;margin:8px 0}
.viewer-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-teal);flex-shrink:0;animation:viewer-pulse 2s ease-in-out infinite}
@keyframes viewer-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){
  .viewer-badge-dot{animation:none}
}