:root { color-scheme: light; font-family: Geist, system-ui, sans-serif; color: #030712; background: #fff; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; --accent: #0284c7; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; min-width: 320px; }
a { color: #0369a1; text-decoration: none; }
a:hover { color: #075985; }
a:focus-visible, button:focus-visible { outline: 3px solid #0284c7; outline-offset: 3px; }
pre, p, h1, h2, h3 { margin: 0; }
pre { tab-size: 2; }
.cell { min-width: 0; }
@media (max-width: 820px) { .hide-sm { display: none !important; } }
.mobile-menu { display: none; border: 1px solid #d1d5db; border-radius: 999px; padding: 8px 14px; background: #fff; color: #030712; font: 600 14px Geist, system-ui, sans-serif; cursor: pointer; }
@media (max-width: 820px) { .mobile-menu { display: inline-flex; margin-left: auto; } nav.menu-open #primary-links { display: flex !important; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 16px; padding: 8px 0; } }

.style-1 {width: 100%; min-height: 100%; background-color: #FFFFFF; background-image: repeating-linear-gradient(135deg, #F1F2F4 0px, #F1F2F4 1px, transparent 1px, transparent 9px); display: flex; flex-direction: column; align-items: center}
.style-2 {width: 100%; border-bottom: 1px solid #E5E7EB; background: #FFFFFFE6; display: flex; justify-content: center}
.style-3 {width: 100%; max-width: 1200px; padding: 16px clamp(20px, 4vw, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; background: #FFFFFF; border-left: 1px solid #E5E7EB; border-right: 1px solid #E5E7EB}
.style-4 {display: flex; align-items: center; gap: 10px; color: #030712}
.style-5 {font-family: 'Geist Mono', monospace; font-size: 18px; font-weight: 600; letter-spacing: -0.03em}
.style-6 {font-family: 'Geist Mono', monospace; font-size: 12px; color: #4B5563; background: #F3F4F6; border-radius: 999px; padding: 3px 10px}
.style-7 {display: flex; gap: 24px; flex-grow: 1; justify-content: flex-end; font-size: 14px; font-weight: 500}
.style-8 {color: #374151}
.style-9 {font-size: 14px; font-weight: 600; color: #FFFFFF; background: #030712; padding: 8px 16px; border-radius: 999px}
.style-10 {width: 100%; border-bottom: 1px solid #E5E7EB; display: flex; justify-content: center}
.style-11 {width: 100%; max-width: 1200px; background-color: #FFFFFF; background-image: linear-gradient(#0307120A 1px, transparent 1px), linear-gradient(90deg, #0307120A 1px, transparent 1px); background-size: 40px 40px; border-left: 1px solid #E5E7EB; border-right: 1px solid #E5E7EB; padding: clamp(56px, 9vw, 112px) clamp(20px, 4vw, 40px) clamp(48px, 7vw, 88px); display: flex; flex-direction: column; gap: clamp(40px, 6vw, 64px)}
.style-12 {display: flex; flex-direction: column; gap: 24px; max-width: 900px}
.style-13 {font-family: 'Geist Mono', monospace; font-size: 13px; color: #4B5563; letter-spacing: 0.06em; text-transform: uppercase}
.style-14 {font-size: clamp(40px, 7vw, 80px); line-height: 1.02; font-weight: 700; letter-spacing: -0.045em; overflow-wrap: anywhere}
.style-15 {color: var(--accent)}
.style-16 {font-size: clamp(17px, 2vw, 20px); line-height: 1.6; color: #4B5563; max-width: 640px}
.style-17 {display: flex; flex-wrap: wrap; gap: 12px; align-items: center}
.style-18 {font-size: 15px; font-weight: 600; color: #FFFFFF; background: #030712; padding: 12px 22px; border-radius: 999px}
.style-19 {display: flex; align-items: center; gap: 10px; font-family: 'Geist Mono', monospace; font-size: 14px; color: #374151; background: #FFFFFF; border: 1px solid #E5E7EB; padding: 11px 18px; border-radius: 999px; max-width: 100%; overflow-x: auto}
.style-20 {color: #9CA3AF}
.style-21 {white-space: nowrap}
.style-22 {display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 20px}
.style-23 {background: #0B1120; border-radius: 16px; box-shadow: 0 0 0 1px #0307121A, 0 20px 40px -20px #03071259; overflow: hidden}
.style-24 {display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #1E293B}
.style-25 {width: 10px; height: 10px; border-radius: 50%; background: #334155}
.style-26 {margin-left: 8px; font-family: 'Geist Mono', monospace; font-size: 12px; color: #94A3B8}
.style-27 {padding: 20px 22px 24px; font-family: 'Geist Mono', monospace; font-size: 13.5px; line-height: 1.8; color: #E2E8F0; white-space: pre; overflow-x: auto}
.style-28 {color: #64748B}
.style-29 {color: #7DD3FC}
.style-30 {color: #94A3B8}
.style-31 {color: #F9A8D4}
.style-32 {color: #FCD34D}
.style-33 {color: #6EE7B7}
.style-34 {color: #34D399}
.style-35 {display: flex; align-items: center; gap: 4px; padding: 8px 10px 0; border-bottom: 1px solid #1E293B; font-family: 'Geist Mono', monospace; font-size: 12px}
.style-36 {color: #E2E8F0; padding: 8px 12px; border-bottom: 2px solid #7DD3FC}
.style-37 {color: #64748B; padding: 8px 12px}
.style-38 {padding: 20px 22px 24px; font-family: 'Geist Mono', monospace; font-size: 13.5px; line-height: 1.8; color: #CBD5E1; white-space: pre; overflow-x: auto}
.style-39 {color: #FB7185}
.style-40 {width: 100%; max-width: 1200px; background: #FFFFFF; border-left: 1px solid #E5E7EB; border-right: 1px solid #E5E7EB; padding: 22px clamp(20px, 4vw, 40px); display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline}
.style-41 {font-family: 'Geist Mono', monospace; font-size: 15px; font-weight: 600}
.style-42 {font-family: 'Geist Mono', monospace; font-size: 13px; color: #6B7280}
.style-43 {font-size: 16px; color: #374151; min-width: 0; overflow-wrap: anywhere}
.style-44 {width: 100%; max-width: 1200px; background: #FFFFFF; border-left: 1px solid #E5E7EB; border-right: 1px solid #E5E7EB; padding: clamp(56px, 8vw, 96px) clamp(20px, 4vw, 40px); display: flex; flex-direction: column; gap: 40px}
.style-45 {display: flex; flex-direction: column; gap: 14px; max-width: 760px}
.style-46 {font-size: clamp(30px, 4.4vw, 48px); line-height: 1.08; font-weight: 700; letter-spacing: -0.035em}
.style-47 {display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); border-top: 1px solid #E5E7EB; border-left: 1px solid #E5E7EB}
.style-48 {padding: 28px; border-right: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB; display: flex; flex-direction: column; gap: 10px}
.style-49 {font-size: 18px; font-weight: 600; letter-spacing: -0.01em}
.style-50 {font-size: 15px; line-height: 1.65; color: #4B5563}
.style-51 {display: flex; flex-direction: column; gap: 14px; max-width: 800px}
.style-52 {display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 16px}
.style-53 {border-radius: 16px; box-shadow: 0 0 0 1px #E5E7EB; padding: 24px; display: flex; flex-direction: column; gap: 10px}
.style-54 {font-family: 'Geist Mono', monospace; font-size: 13px; color: var(--accent); font-weight: 600}
.style-55 {font-size: 17px; font-weight: 600}
.style-56 {font-size: 15px; line-height: 1.6; color: #4B5563}
.style-57 {display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 32px; align-items: start; padding-top: 24px}
.style-58 {display: flex; flex-direction: column; gap: 16px}
.style-59 {font-size: 24px; font-weight: 700; letter-spacing: -0.025em}
.style-60 {font-size: 16px; line-height: 1.65; color: #4B5563}
.style-61 {background: #F9FAFB; border-radius: 16px; box-shadow: 0 0 0 1px #E5E7EB; padding: 20px 22px; font-family: 'Geist Mono', monospace; font-size: 13.5px; line-height: 1.8; color: #111827; white-space: pre; overflow-x: auto}
.style-62 {color: #6B7280}
.style-63 {width: 100%; border-bottom: 1px solid #1E293B; background: #0B1120; display: flex; justify-content: center}
.style-64 {width: 100%; max-width: 1200px; border-left: 1px solid #1E293B; border-right: 1px solid #1E293B; padding: clamp(56px, 8vw, 96px) clamp(20px, 4vw, 40px); display: flex; flex-direction: column; gap: 36px}
.style-65 {display: flex; flex-direction: column; gap: 14px; max-width: 820px}
.style-66 {font-family: 'Geist Mono', monospace; font-size: 13px; color: #94A3B8; letter-spacing: 0.06em; text-transform: uppercase}
.style-67 {font-size: clamp(30px, 4.4vw, 48px); line-height: 1.08; font-weight: 700; letter-spacing: -0.035em; color: #F8FAFC}
.style-68 {display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); column-gap: 40px}
.style-69 {display: flex; flex-direction: column}
.style-70 {display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 14px 0; border-top: 1px solid #1E293B}
.style-71 {font-family: 'Geist Mono', monospace; font-size: 14px; color: #7DD3FC; width: 170px; flex-shrink: 0}
.style-72 {font-size: 15px; color: #CBD5E1; flex: 1 1 200px; min-width: 0}
.style-73 {display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); border-top: 1px solid #E5E7EB; border-left: 1px solid #E5E7EB}
.style-74 {padding: 28px; border-right: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB; display: flex; flex-direction: column; gap: 12px}
.style-75 {font-family: 'Geist Mono', monospace; font-size: 13px}
.style-76 {border-radius: 16px; box-shadow: 0 0 0 1px #E5E7EB; padding: clamp(20px, 3vw, 30px); display: flex; flex-direction: column; gap: 18px}
.style-77 {font-size: 20px; font-weight: 700; letter-spacing: -0.02em}
.style-78 {background: #0B1120; border-radius: 12px; padding: 16px 18px; font-family: 'Geist Mono', monospace; font-size: 13px; line-height: 1.75; color: #E2E8F0; white-space: pre; overflow-x: auto}
.style-79 {margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.6; color: #4B5563}
.style-80 {width: 100%; max-width: 1200px; background: #FFFFFF; border-left: 1px solid #E5E7EB; border-right: 1px solid #E5E7EB; padding: clamp(56px, 8vw, 96px) clamp(20px, 4vw, 40px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 48px; align-items: center}
.style-81 {font-size: clamp(30px, 4.4vw, 44px); line-height: 1.08; font-weight: 700; letter-spacing: -0.035em}
.style-82 {border-radius: 16px; box-shadow: 0 0 0 1px #E5E7EB, 0 20px 40px -24px #0307122E; overflow: hidden; background: #FFFFFF}
.style-83 {display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #E5E7EB}
.style-84 {font-size: 15px; font-weight: 600}
.style-85 {font-family: 'Geist Mono', monospace; font-size: 12px; color: #6B7280}
.style-86 {display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); border-bottom: 1px solid #E5E7EB}
.style-87 {padding: 18px 20px; display: flex; flex-direction: column; gap: 8px}
.style-88 {font-family: 'Geist Mono', monospace; font-size: 11px; color: #6B7280; letter-spacing: 0.06em}
.style-89 {font-size: 28px; font-weight: 700; letter-spacing: -0.02em}
.style-90 {font-size: 14px; color: #6B7280; font-weight: 500}
.style-91 {height: 6px; background: #F3F4F6; border-radius: 99px; display: flex; overflow: hidden}
.style-92 {width: 37%; background: #10B981}
.style-93 {width: 16%; background: #F59E0B}
.style-94 {padding: 14px 20px 18px; display: flex; flex-direction: column}
.style-95 {font-family: 'Geist Mono', monospace; font-size: 11px; color: #6B7280; letter-spacing: 0.06em; padding-bottom: 8px}
.style-96 {display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 9px 0; border-top: 1px solid #F3F4F6; font-size: 14px}
.style-97 {font-family: 'Geist Mono', monospace; font-size: 12px; color: #6B7280; width: 60px}
.style-98 {width: 8px; height: 8px; border-radius: 2px; background: #10B981}
.style-99 {flex: 1 1 160px; min-width: 0}
.style-100 {width: 8px; height: 8px; border-radius: 2px; background: #F59E0B}
.style-101 {width: 8px; height: 8px; border-radius: 2px; background: #F43F5E}
.style-102 {width: 100%; max-width: 1200px; background: #FFFFFF; border-left: 1px solid #E5E7EB; border-right: 1px solid #E5E7EB; padding: clamp(48px, 7vw, 80px) clamp(20px, 4vw, 40px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 32px 48px; align-items: center}
.style-103 {font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; font-weight: 700; letter-spacing: -0.03em}
.style-104 {width: 100%; display: flex; justify-content: center; flex-grow: 1}
.style-105 {width: 100%; max-width: 1200px; background: #FFFFFF; border-left: 1px solid #E5E7EB; border-right: 1px solid #E5E7EB; padding: clamp(48px, 7vw, 80px) clamp(20px, 4vw, 40px) 40px; display: flex; flex-direction: column; gap: 40px}
.style-106 {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 32px}
.style-107 {display: flex; flex-direction: column; gap: 12px; max-width: 620px; min-width: 0}
.style-108 {display: flex; flex-wrap: wrap; gap: 12px}
.style-109 {font-size: 15px; font-weight: 600; color: #030712; box-shadow: inset 0 0 0 1px #D1D5DB; padding: 12px 22px; border-radius: 999px}
.style-110 {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 24px; border-top: 1px solid #E5E7EB; font-size: 13px; color: #6B7280}
.style-111 {font-family: 'Geist Mono', monospace}
.manager-views { display: flex; gap: 16px; overflow-x: auto; padding: 0 16px; border-bottom: 1px solid #e5e7eb; color: #6b7280; font-size: 11px; white-space: nowrap; }
.manager-views span { padding: 10px 0 8px; }
.manager-views .is-active { color: #0369a1; border-bottom: 2px solid #0284c7; font-weight: 700; }
.manager-filters { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 16px; color: #4b5563; font-size: 11px; }
.manager-filters span { padding: 5px 9px; border: 1px solid #e5e7eb; border-radius: 7px; }
.manager-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 16px 16px; }
.manager-column { min-width: 0; padding: 8px; background: #f3f4f6; border-radius: 9px; }
.manager-column-head { display: flex; align-items: center; gap: 5px; margin-bottom: 7px; color: #374151; font-size: 10px; font-weight: 700; }
.manager-column-head b { margin-left: auto; color: #6b7280; }
.manager-dot { width: 7px; height: 7px; border-radius: 50%; }
.manager-dot.ready { background: #0284c7; }
.manager-dot.progress { background: #f59e0b; }
.manager-dot.blocked { background: #f43f5e; }
.manager-ticket { display: flex; flex-direction: column; gap: 3px; padding: 8px; background: #fff; border: 1px solid #e5e7eb; border-radius: 7px; font-size: 10px; line-height: 1.4; }
.manager-ticket strong { color: #0369a1; font: 600 9px 'Geist Mono', monospace; }
.manager-ticket span { font-weight: 600; }
.manager-ticket small { color: #6b7280; font-size: 9px; }
@media (max-width: 560px) { .manager-board { gap: 5px; padding-inline: 10px; } .manager-column { padding: 6px; } .manager-column-head { font-size: 9px; } .manager-ticket { padding: 6px; } }
.product-preview { display: grid; grid-template-columns: 112px minmax(0, 1fr); min-height: 340px; }
.preview-sidebar { display: flex; flex-direction: column; gap: 4px; padding: 14px 8px; background: #f5f7fa; border-right: 1px solid #e6e9ee; }
.preview-sidebar strong { padding: 2px 8px 10px; font: 600 15px 'Geist Mono', monospace; }
.preview-label { padding: 10px 8px 4px; color: #98a2ae; font-size: 8px; font-weight: 700; letter-spacing: .05em; }
.preview-nav { padding: 7px 8px; color: #666; border-radius: 6px; font-size: 10px; font-weight: 600; }
.preview-nav.active { color: #0e71b6; background: #e7f1f9; }
.preview-main { min-width: 0; }
.preview-area-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 14px 6px; font-size: 11px; }
.preview-area-head span { color: #98a2ae; font-size: 9px; }
.preview-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 4px 12px 14px; }
.preview-areas > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 8px; background: #fff; border: 1px solid #e6e9ee; border-radius: 7px; }
.preview-areas strong { overflow-wrap: anywhere; font-size: 10px; }
.preview-areas span { color: #6b7280; font-size: 9px; }
@media (max-width: 560px) { .product-preview { display: block; } .preview-sidebar { display: none; } }