/*
 * Site-wide header for the static /system-design/ pages.
 * Static replica of components/sections/PlatformNavigation.tsx (logged-out view),
 * because Tailwind and React are not loaded on these pages.
 * Values mirror the Tailwind classes used there (bg-black/80, max-w-7xl, px-6 py-4, text-sm ...).
 * If the React header changes, update this file and site-header.js together.
 */
.tgn,.tgn *,.tgn-overlay,.tgn-overlay *{box-sizing:border-box}
.tgn,.tgn-overlay{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;line-height:1.5;color:#fff;word-break:keep-all;overflow-wrap:normal;letter-spacing:normal;-webkit-font-smoothing:antialiased}
/* resets use :where() so they carry no class weight and never beat the component rules below */
:where(.tgn,.tgn-overlay) a{color:inherit;text-decoration:none}
:where(.tgn,.tgn-overlay) button{font-family:inherit;font-size:14px;font-weight:400;line-height:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:where(.tgn,.tgn-overlay) svg{display:block;flex-shrink:0}

/* bar: fixed in React; sticky here so page content does not need a top offset */
.tgn{position:sticky;top:0;left:0;width:100%;z-index:50;background:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:all .3s cubic-bezier(.4,0,.2,1)}
.tgn.is-scrolled{background:rgba(0,0,0,.95);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.tgn-inner{max-width:1280px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between}
.tgn-left{display:flex;align-items:center;gap:12px}
.tgn-logo{font-size:24px;line-height:32px;font-weight:700;background-image:linear-gradient(to right,#00ff88,#00cc6a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.tgn-dot{color:#27272a;font-size:14px;line-height:20px;user-select:none;-webkit-user-select:none}

.tgn-link{font-size:14px;line-height:20px;color:#9ca3af;transition:color .15s cubic-bezier(.4,0,.2,1)}
.tgn-link:hover{color:#00ff88}
.tgn-link.is-active{color:#00ff88;font-weight:600}

/* desktop menu (md and up) */
.tgn-desktop{display:none;align-items:center;gap:16px}
@media (min-width:1024px){.tgn-desktop{gap:24px}}
@media (min-width:768px){.tgn-desktop{display:flex}.tgn-mobile{display:none!important}}
.tgn-dd{position:relative}
.tgn-dd-btn{display:flex;align-items:center;gap:4px}
.tgn-chev{width:12px;height:12px;transition:transform .15s cubic-bezier(.4,0,.2,1)}
.tgn-dd.is-open .tgn-chev{transform:rotate(180deg)}
.tgn-dd-menu{display:none;position:absolute;left:0;top:100%;margin-top:8px;background:#1a1a1a;border:1px solid #27272a;border-radius:12px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);padding:8px;min-width:160px;z-index:50}
.tgn-dd-menu.is-wide{min-width:200px}
.tgn-dd-menu.is-right{left:auto;right:0;min-width:140px}
.tgn-dd.is-open .tgn-dd-menu{display:block}
.tgn-dd-item{display:block;padding:8px 16px;font-size:14px;line-height:20px;border-radius:8px;color:#9ca3af;transition:color .15s,background-color .15s;text-align:left;width:100%}
.tgn-dd-item:hover{color:#00ff88;background:#111111}
.tgn-dd-item.is-active{color:#00ff88;font-weight:600;background:#111111}
.tgn-dd-item.is-badged{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tgn-dd-item.is-danger:hover{color:#f87171}
.tgn-dd-sep{border-top:1px solid #27272a;margin:4px 0}

.tgn-badge{flex-shrink:0;font-size:10px;line-height:20px;font-weight:700;padding:2px 6px;border-radius:9999px;background:rgba(0,255,136,.15);color:#00ff88;white-space:nowrap}
.tgn-tab-badged{display:flex;align-items:center;gap:6px}
.tgn-tab-badged .tgn-badge{display:none}
@media (min-width:1024px){.tgn-tab-badged .tgn-badge{display:inline}}

.tgn-auth{min-height:32px;display:flex;align-items:center}
.tgn-subscribe{display:inline-block;padding:8px 20px;font-size:14px;line-height:20px;font-weight:700;color:#000;background-image:linear-gradient(to right,#00ff88,#00cc6a);border-radius:9999px;transition:transform .15s cubic-bezier(.4,0,.2,1)}
.tgn-subscribe:hover{transform:scale(1.05)}
.tgn-profile-btn{width:32px;height:32px;border-radius:9999px;border:1px solid #27272a;display:flex;align-items:center;justify-content:center;transition:border-color .15s}
.tgn-profile-btn:hover{border-color:#00ff88}
.tgn-green-dot{display:block;width:8px;height:8px;border-radius:9999px;background:#00ff88}

/* mobile bar controls */
.tgn-mobile{display:flex;align-items:center;gap:8px}
.tgn-mlogin{padding:6px 12px;font-size:14px;line-height:20px;font-weight:500;color:#00ff88;border:1px solid rgba(0,255,136,.4);border-radius:9999px;transition:background-color .15s}
.tgn-mlogin:hover{background:rgba(0,255,136,.1)}
.tgn-burger{color:#fff;padding:8px}
.tgn-burger svg{width:24px;height:24px}
.tgn-burger .tgn-ico-close{display:none}
.tgn.is-menu-open .tgn-burger .tgn-ico-open{display:none}
.tgn.is-menu-open .tgn-burger .tgn-ico-close{display:block}

/* mobile full-screen overlay */
.tgn-overlay{position:fixed;inset:0;z-index:40;display:none;flex-direction:column;padding:80px 24px 32px;overflow-y:auto;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);color:#fff}
.tgn-overlay.is-open{display:flex}
@media (min-width:768px){.tgn-overlay,.tgn-overlay.is-open{display:none}}
.tgn-ov-list{flex:1 1 0%}
.tgn-ov-list>*+*{margin-top:4px}
.tgn-ov-label{padding-top:8px;padding-bottom:4px;font-size:12px;line-height:16px;text-transform:uppercase;letter-spacing:.18em;color:rgba(156,163,175,.7)}
.tgn-ov-label.pt4{padding-top:16px}
.tgn-ov-label.pt3{padding-top:12px}
.tgn-ov-item{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(39,39,42,.5);color:#fff;transition:color .15s}
.tgn-ov-item:hover{color:#00ff88}
.tgn-ov-item.is-active{color:#00ff88;font-weight:600}
.tgn-ov-item.sub{padding:12px 0 12px 12px;font-size:16px;line-height:24px}
.tgn-ov-item.top{padding:16px 0;font-size:18px;line-height:28px}
.tgn-ov-item .tgn-arrow{width:16px;height:16px;color:#9ca3af}
.tgn-ov-name{display:flex;align-items:center;gap:8px}
.tgn-ov-auth{margin-top:32px}
.tgn-ov-auth>*+*{margin-top:12px}
.tgn-ov-btn{display:block;width:100%;text-align:center;padding:12px 20px;font-weight:700;border-radius:9999px;font-size:16px;line-height:24px}
.tgn-ov-btn.primary{background-image:linear-gradient(to right,#00ff88,#00cc6a);color:#000}
.tgn-ov-btn.outline{border:1px solid #00ff88;color:#00ff88;transition:background-color .15s}
.tgn-ov-btn.outline:hover{background:rgba(0,255,136,.1)}
.tgn-ov-card{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#1a1a1a;border-radius:12px;color:#fff;font-weight:500;transition:color .15s}
.tgn-ov-card:hover{color:#00ff88}
.tgn-ov-card svg{width:16px;height:16px}
.tgn-ov-logout{display:block;width:100%;text-align:center;padding:12px 0;font-size:14px;line-height:20px;color:#9ca3af}
.tgn-ov-logout:hover{color:#f87171}