.uuid-page{max-width: 1200px; margin: 0 auto; padding: clamp(1.25rem, 3vw, 3rem); display: grid; gap: clamp(1.5rem, 2.5vw, 2.5rem);}.uuid-section{background: var(--mct-surface, #f8fafc); border: 1px solid rgba(15, 23, 42, 0.1); border-radius: var(--mct-radius-lg, 16px); padding: clamp(1.25rem, 2.8vw, 2.25rem);}.uuid-hero{background: linear-gradient(120deg, #eff6ff 0%, #fdf2f8 46%, #fef3c7 100%); box-shadow: var(--mct-shadow-md, 0 10px 30px rgba(15,23,42,0.12));}.uuid-hero h1{margin: 0; line-height: 1.2;}.uuid-hero p{margin: 0;}.uuid-hero-summary{margin-top: 0.9rem; background: rgba(255,255,255,0.88); border: 1px solid rgba(148,163,184,0.45); border-radius: 12px; padding: 0.9rem 1rem;}.uuid-badges{display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem;}.uuid-badge{border-radius: 999px; border: 1px solid rgba(15,23,42,0.18); padding: 0.3rem 0.8rem; font-size: 0.88rem; font-weight: 600; background: rgba(255,255,255,0.85);}.uuid-cta{display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1rem;}.uuid-btn{min-height: 44px; border-radius: 10px; border: 1px solid transparent; padding: 0.6rem 1rem; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;}.uuid-btn-primary{background: #2563eb; color: #fff;}.uuid-btn-secondary{background: #fff; color: #0f172a; border-color: #94a3b8;}.uuid-meta{margin-top: 0.8rem; font-size: 0.92rem; color: #475569;}.uuid-accordion{display: grid; gap: 0.7rem;}.uuid-accordion-item{border: 1px solid #cbd5e1; border-radius: 12px; background: #fff; overflow: hidden;}.uuid-accordion-btn{width: 100%; min-height: 44px; border: 0; background: transparent; text-align: left; padding: 0.8rem 0.9rem; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; font: inherit; font-weight: 700; color: #0f172a; cursor: pointer;}.uuid-accordion-symbol{width: 26px; height: 26px; border-radius: 999px; border: 1px solid #cbd5e1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;}.uuid-accordion-panel{padding: 0 0.9rem 0.9rem;}.uuid-core{border: 2px solid #bfdbfe; background: linear-gradient(180deg, #eff6ff 0%, #fff 75%);}.uuid-grid{display: grid; gap: 1rem;}.uuid-field{display: grid; gap: 0.45rem;}.uuid-field label{font-weight: 700; color: #0f172a;}.uuid-input, .uuid-select{min-height: 44px; width: 100%; border: 1px solid #94a3b8; border-radius: 10px; padding: 0.6rem 0.75rem; font: inherit; color: #0f172a; background: #fff;}.uuid-inline-option{display: inline-flex; align-items: center; gap: 0.55rem; margin-right: 1rem; min-height: 44px;}.uuid-hint{font-size: 0.86rem; color: #475569;}.uuid-actions{display: flex; flex-wrap: wrap; gap: 0.65rem;}.uuid-status{min-height: 56px; border-radius: 12px; border: 1px solid transparent; padding: 0.85rem 1rem; font-weight: 600;}.uuid-status-info{background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a;}.uuid-status-success{background: #ecfdf5; border-color: #86efac; color: #14532d;}.uuid-status-error{background: #fef2f2; border-color: #fca5a5; color: #7f1d1d;}.uuid-result{border: 1px solid #cbd5e1; border-radius: 12px; background: #fff; padding: 1rem;}.uuid-result h3{margin-top: 0;}.uuid-output{width: 100%; border: 1px solid #cbd5e1; border-radius: 10px; padding: 0.75rem; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background: #f8fafc; min-height: 220px;}.uuid-summary{margin-top: 0.6rem; color: #334155; font-size: 0.95rem;}.uuid-content p{line-height: 1.75;}.uuid-content ul{padding-left: 1.1rem;}.uuid-content li{line-height: 1.7;}.uuid-related{margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));}.uuid-related a{display: flex; flex-direction: column; gap: 0.35rem; text-decoration: none; background: #fff; border: 1px solid #e2e8f0; padding: 1.25rem; border-radius: 12px; transition: all 0.2s ease; height: 100%;}.uuid-related a:hover, .uuid-related a:focus-visible{border-color: #3b82f6; box-shadow: 0 4px 12px rgba(59,130,246,0.15); transform: translateY(-2px);}.uuid-related a span{font-weight: 700; font-size: 1.05rem; color: #1e293b; line-height: 1.3;}.uuid-related a small{font-size: 0.85rem; color: #64748b; line-height: 1.4;}@media (min-width: 1024px){.uuid-related{grid-template-columns: repeat(4, 1fr);}}.uuid-btn:focus-visible, .uuid-input:focus-visible, .uuid-select:focus-visible, .uuid-output:focus-visible, .uuid-accordion-btn:focus-visible{outline: 3px solid #60a5fa; outline-offset: 2px;}@media (min-width: 840px){ .uuid-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}.uuid-grid .uuid-field-full{grid-column: 1 / -1;}}@media (max-width: 639px){ .uuid-actions{flex-direction: column;}.uuid-actions .uuid-btn{width: 100%;}}:root{ --header-bg: linear-gradient(120deg, #0ea5e9 0%, #60a5fa 45%, #f472b6 100%); --header-text: #ffffff; --header-accent: #ffe29a; --header-surface: rgba(255, 255, 255, 0.12); --header-border: rgba(255, 255, 255, 0.25); --header-shadow: 0 12px 30px rgba(14, 116, 144, 0.18); --header-focus: #fff; }.site-header{position: sticky; top: 0; z-index: 1000; background: var(--header-bg); color: var(--header-text); box-shadow: var(--header-shadow); backdrop-filter: blur(10px) saturate(1.2); padding: 0 !important;}.header-wrap{max-width: 1200px; margin: 0 auto; padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;}.logo{display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--header-text); font-weight: 800; letter-spacing: 0.02em; font-size: 1.25rem; white-space: nowrap;}.logo img{height: 38px; width: auto; aspect-ratio: 1024 / 575; object-fit: contain; border-radius: 10px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);}.nav-actions{display: flex; align-items: center; gap: 0.75rem;}.cta-button{background: #111827; color: #fff; border: 0; border-radius: 999px; padding: 0.55rem 1rem; font-weight: 700; font-size: 0.95rem; box-shadow: 0 10px 24px rgba(17, 24, 39, 0.25); text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; white-space: nowrap;}.cta-button:hover, .cta-button:focus{transform: translateY(-1px); box-shadow: 0 14px 28px rgba(17, 24, 39, 0.3); outline: none;}.menu-toggle{display: none; background: var(--header-surface); border: 1px solid var(--header-border); color: var(--header-text); border-radius: 12px; padding: 0.45rem 0.6rem; font-size: 1.2rem; cursor: pointer;}.menu-toggle:focus{outline: 2px solid var(--header-focus); outline-offset: 2px;}.nav{display: flex; gap: 0.75rem; align-items: center;}.nav-list{display: flex; gap: 0.6rem; margin: 0; padding: 0; list-style: none;}.nav-item{position: relative;}.nav-trigger{background: var(--header-surface); border: 1px solid var(--header-border); color: var(--header-text); padding: 0.45rem 0.8rem; border-radius: 999px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; transition: background 0.2s ease, transform 0.2s ease; white-space: nowrap;}.nav-trigger:hover, .nav-trigger:focus-within{background: rgba(255, 255, 255, 0.2); transform: translateY(-1px);}.nav-trigger .chip{width: 8px; height: 8px; background: var(--header-accent); border-radius: 999px; box-shadow: 0 0 0 3px rgba(255, 226, 154, 0.2);}.dropdown{position: absolute; left: 0; top: 110%; min-width: 240px; background: #ffffff; color: #111827; border-radius: 14px; padding: 0.5rem; box-shadow: 0 18px 38px rgba(15, 23, 42, 0.2); opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease; z-index: 50;}.nav-item:focus-within .dropdown, .nav-item:hover .dropdown{opacity: 1; pointer-events: auto; transform: translateY(0);}.dropdown a{display: block; padding: 0.55rem 0.7rem; border-radius: 10px; text-decoration: none; color: #111827; font-weight: 600; font-size: 0.95rem; transition: background 0.2s ease, color 0.2s ease;}.dropdown a:hover, .dropdown a:focus{background: #eef2ff; color: #1d4ed8; outline: none;}.dropdown .desc{display: block; font-weight: 400; font-size: 0.78rem; color: #6b7280; margin-top: 0.1rem;}@media (max-width: 980px){ .menu-toggle{display: inline-flex;}.nav{position: absolute; left: 0; right: 0; top: 100%; background: #0f172a; padding: 0.75rem 1rem 1rem; display: none; flex-direction: column; align-items: stretch; gap: 0.75rem;}.nav.open{display: flex;}.nav-list{flex-direction: column; gap: 0.6rem;}.dropdown{position: static; opacity: 1; pointer-events: auto; transform: none; background: rgba(255, 255, 255, 0.12); color: #fff;}.dropdown a{color: #fff;}.dropdown a:hover, .dropdown a:focus{background: rgba(255, 255, 255, 0.18); color: #fff;}.dropdown .desc{color: #e2e8f0;}}body.tools-page .header-wrap{padding: 0.45rem 0.75rem;}body.tools-page .logo img{height: 30px;}.menu-toggle:focus-visible, .nav a:focus-visible, .nav-trigger:focus-visible, .cta-button:focus-visible{outline: 3px solid rgba(99,102,241,0.95); outline-offset: 2px; border-radius: 8px;}.uuid-guide-header{ text-align: center; margin-bottom: 2.5rem; }.uuid-guide-title{ font-size: 2rem; color: #0f172a; margin-bottom: 1rem; }.uuid-guide-img-container{ text-align: center; margin: 1.5rem auto; max-width: 600px; }.uuid-guide-img{ max-width: 100%; height: auto; border-radius: 8px; border: 1px solid #e2e8f0; display: block; margin: 0 auto; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }.uuid-content-h3{ margin-top: 2rem; font-size: 1.5rem; color: #1e293b; border-bottom: 2px solid #f1f5f9; padding-bottom: 0.5rem; }.uuid-content-ul{ padding-left: 1.5rem; margin-top: 1rem; margin-bottom: 2rem; color: #334155; line-height: 1.8; }.uuid-content-li{ margin-bottom: 0.5rem; }.uuid-info-box{ background: #f8fafc; padding: 1.25rem 1.5rem; border-radius: 8px; border-left: 4px solid #3b82f6; margin-bottom: 2.5rem; }.uuid-info-h3{ margin-top: 0; font-size: 1.35rem; color: #0f172a; margin-bottom: 0.5rem; }.uuid-info-p{ margin-bottom: 0.75rem; color: #475569; line-height: 1.6; }.uuid-info-p-last{ margin: 0; color: #475569; line-height: 1.6; }.uuid-info-link{ color: #2563eb; font-weight: 600; text-decoration: underline; }.uuid-content-p{ line-height: 1.7; color: #475569; margin-top: 1rem; }.uuid-code-inline{ background: #f1f5f9; padding: 0.2rem 0.4rem; border-radius: 4px; color: #db2777; border: 1px solid #e2e8f0; }.uuid-content-h4{ margin-top: 1.5rem; font-size: 1.15rem; color: #334155; }.uuid-code-block{ background: #0f172a; padding: 1.25rem; border-radius: 8px; font-family: monospace; font-size: 1.05rem; color: #e0f2fe; margin-top: 0.75rem; overflow-x: auto; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); }.uuid-section-spacing{ margin-top: 2.5rem; margin-bottom: 2.5rem; }.uuid-spacing-h3{ margin-top: 0; font-size: 1.35rem; color: #0f172a; margin-bottom: 0.75rem; }.uuid-spacing-p{ margin: 0 0 1.5rem; color: #475569; line-height: 1.7; }.uuid-spacing-p-last{ margin: 0; color: #475569; line-height: 1.7; }.uuid-content-ul-no-margin{ padding-left: 1.5rem; margin-top: 1rem; color: #334155; line-height: 1.8; }.uuid-cta-box{ margin-top: 2rem; padding: 0.75rem 1.25rem; background: #eff6ff; border-radius: 8px; text-align: center; border: 1px solid #bfdbfe; color: #1e3a8a; }.uuid-table-container{ overflow-x: auto; margin: 1.5rem 0; border-radius: 8px; border: 1px solid #e2e8f0; }.uuid-table{ width: 100%; border-collapse: collapse; text-align: left; font-size: 1rem; background: #fff; }.uuid-table-thead{ background: #f8fafc; }.uuid-table-th{ padding: 1rem; color: #0f172a; border-bottom: 2px solid #cbd5e1; }.uuid-table-tr{ border-bottom: 1px solid #e2e8f0; }.uuid-table-tr-highlight{ border-bottom: 1px solid #e2e8f0; background: #f0fdf4; }.uuid-table-td-bold{ padding: 1rem; font-weight: 600; color: #1e293b; }.uuid-table-td{ padding: 1rem; color: #475569; }.uuid-table-td-highlight-bold{ padding: 1rem; font-weight: 700; color: #059669; }.uuid-table-td-highlight{ padding: 1rem; color: #065f46; font-weight: 500; }.uuid-dev-h3{ margin-top: 3rem; font-size: 1.5rem; color: #1e293b; border-bottom: 2px solid #f1f5f9; padding-bottom: 0.5rem; }.uuid-snippet-container{ margin-top: 1.5rem; margin-bottom: 1.5rem; }.uuid-snippet{ background: #1e293b; color: #f8fafc; padding: 1.25rem; border-radius: 8px; margin-bottom: 1rem; overflow-x: auto; font-family: monospace; border: 1px solid #334155; }.uuid-snippet-last{ background: #1e293b; color: #f8fafc; padding: 1.25rem; border-radius: 8px; overflow-x: auto; font-family: monospace; border: 1px solid #334155; }.uuid-snippet-title{ color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.75rem; text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em; }.uuid-snippet-code{ color: #e2e8f0; font-size: 1.05rem; }.uuid-regex-h3{ margin-top: 2.5rem; font-size: 1.35rem; color: #1e293b; }.uuid-regex-box{ background: #fdf2f8; border: 1px solid #fbcfe8; padding: 1.25rem; border-radius: 8px; overflow-x: auto; font-family: monospace; font-size: 1rem; color: #be185d; word-break: break-all; margin-top: 0.75rem; }.uuid-link{ color: #2563eb; text-decoration: underline; }