/* ===== HEADER START ===== */

*,
*::before,
*::after{
    box-sizing:border-box;
}

body{
    margin:0;
    padding-top:120px;
    font-family:'Inter', sans-serif;
}

html,
body{
    overflow-x:hidden;
}

.dna-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    background:rgba(15,23,42,.94);
    backdrop-filter:blur(14px);
    box-shadow:0 2px 18px rgba(0,0,0,.28);
}

.dna-header-container{
    position:relative;
    width:100%;
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:12px 28px;
    background:linear-gradient(180deg, rgba(15,23,42,.96), rgba(17,24,39,.94));
    border-bottom:1px solid rgba(100,116,139,.22);
}

.dna-logo,
.dna-word-logo{
    min-width:0;
    display:inline-flex;
    align-items:center;
    gap:-1px;
    text-decoration:none;
    white-space:nowrap;
    flex:0 0 auto;
}

.dna-logo-icon,
.dna-logo-text,
.dna-logo-sub{
    display:none !important;
}

.dna-logo-tools{
    font-family:'Outfit', sans-serif;
    font-size:30px;
    font-weight:500;
    line-height:1;
    letter-spacing:0;
    color:#f8fbff;
}

.dna-logo-brand{
    font-family:'Lilita One', sans-serif;
    font-size:36px;
    font-weight:100;
    line-height:.92;
    letter-spacing:-1px;
    color:#60a5fa;
    transform:translateY(1px);
}

.dna-brand-dna{
    font-family:'Lilita One', sans-serif;
    display:inline-block;
    margin-right:3px;
    padding-right:3px;
    color:#60a5fa;
    -webkit-text-fill-color:currentColor;
    letter-spacing:-3px;
    transform:none;
    animation:dnaLogoColorPulse 2.4s linear infinite;
}

@keyframes dnaLogoColorPulse{
    0%{color:#60a5fa;}
    25%{color:#2563eb;}
    50%{color:#8b5cf6;}
    75%{color:#06b6d4;}
    100%{color:#60a5fa;}
}

@keyframes dnaLogoShine{
    0%{background-position:0% 50%;}
    100%{background-position:300% 50%;}
}

body:not(.theme-dark) .dna-header{
    background:rgba(248,251,255,.94);
}

body:not(.theme-dark) .dna-header-container{
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,247,255,.96));
    border-bottom-color:rgba(37,99,235,.12);
}

body:not(.theme-dark) .dna-logo-tools{
    color:#151f30;
}

body:not(.theme-dark) .dna-logo-brand{
    color:#1670f4;
}

.dna-nav{
    flex:1 1 auto;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:32px;
    min-width:0;
}

.dna-nav a,
.dna-dropdown button{
    position:relative;
    border:0;
    background:none;
    color:#cbd5e1;
    text-decoration:none;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
}

body:not(.theme-dark) .dna-nav a,
body:not(.theme-dark) .dna-dropdown button{
    color:#314158;
}

.dna-nav a.active,
.dna-dropdown button.active{
    color:#60a5fa;
}

.dna-nav a.active::after,
.dna-dropdown button.active::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-24px;
    width:100%;
    height:3px;
    border-radius:999px;
    background:linear-gradient(90deg, #2563eb, #8b5cf6);
}

.dna-dropdown{
    position:relative;
}

.dna-dropdown-menu{
    position:absolute;
    top:calc(100% + 12px);
    left:0;
    min-width:210px;
    display:none;
    padding:8px;
    background:#111827;
    border:1px solid rgba(100,116,139,.28);
    border-radius:12px;
    box-shadow:0 12px 30px rgba(0,0,0,.28);
    z-index:1000;
}

.dna-dropdown.open .dna-dropdown-menu{
    display:block;
}

.dna-dropdown-menu a{
    display:block;
    padding:9px 12px;
    border-radius:8px;
    color:#cbd5e1;
    font-size:14px;
}

.dna-dropdown-menu a:hover{
    background:rgba(96,165,250,.14);
    color:#f8fbff;
}

.dna-actions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:10px;
}

.icon-btn,
.mobile-menu-btn{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:grid;
    place-items:center;
    border:1px solid rgba(96,165,250,.28);
    border-radius:12px;
    background:rgba(255,255,255,.06);
    color:#cbd5e1;
    text-decoration:none;
    font-size:16px;
    line-height:1;
    cursor:pointer;
    transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.icon-btn:hover,
.mobile-menu-btn:hover{
    background:rgba(37,99,235,.16);
    border-color:rgba(96,165,250,.42);
    color:#60a5fa;
    transform:translateY(-1px);
}

body:not(.theme-dark) .icon-btn,
body:not(.theme-dark) .mobile-menu-btn{
    background:#f8fbff;
    color:#2563eb;
    border-color:rgba(37,99,235,.18);
}

.mobile-menu-btn{
    display:none;
}

@media(max-width:1200px){
    .dna-header-container{
        gap:14px;
        padding:12px 16px;
    }

    .dna-nav{
        gap:16px;
    }

    .dna-nav a,
    .dna-dropdown button{
        font-size:14px;
    }
}

@media(max-width:900px){
    body{
        padding-top:116px;
    }

    .dna-header-container{
        min-height:72px;
        display:grid;
        grid-template-columns:minmax(0, 1fr) auto auto;
        grid-template-areas:'logo actions menu';
        align-items:center;
        gap:8px;
        padding:12px 14px;
    }

    .dna-logo{
        grid-area:logo;
        overflow:hidden;
    }

    .dna-logo-tools{
        font-size:24px;
    }

    .dna-logo-brand{
        font-size:31px;
    }

    .dna-actions{
        grid-area:actions;
        gap:8px;
    }

    .dna-actions a.icon-btn[title='Contact']{
        display:none;
    }

    .mobile-menu-btn{
        grid-area:menu;
        display:grid;
    }

    .dna-nav{
        display:none;
    }

    .dna-nav a.active::after,
    .dna-dropdown button.active::after{
        display:none;
    }

    .dna-header-container.mobile-open{
        grid-template-columns:minmax(0, 1fr) auto auto;
        grid-template-areas:'logo actions menu';
        align-items:center;
        gap:8px;
        padding:12px 14px;
    }

    .dna-header-container.mobile-open .dna-nav{
        position:absolute;
        top:100%;
        left:12px;
        right:12px;
        width:auto;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        gap:6px;
        padding:12px;
        margin:0;
        background:rgba(15,23,42,.96);
        border:1px solid rgba(100,116,139,.2);
        border-radius:14px;
        box-shadow:0 18px 34px rgba(15,23,42,.22);
        z-index:1001;
    }

    body:not(.theme-dark) .dna-header-container.mobile-open .dna-nav{
        background:rgba(255,255,255,.98);
        border-color:rgba(37,99,235,.12);
    }

    .dna-header-container.mobile-open .dna-nav a,
    .dna-header-container.mobile-open .dna-dropdown button{
        width:100%;
        min-height:34px;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        padding:8px 14px;
        border-radius:8px;
        text-align:left;
    }

    .dna-dropdown-menu{
        position:static;
        min-width:0;
        width:100%;
        margin-top:4px;
        padding:4px 0 4px 12px;
        background:transparent;
        border:0;
        box-shadow:none;
    }
}

@media(max-width:430px){
    .dna-header-container{
        padding:11px 10px;
    }

    .dna-logo,
    .dna-word-logo{
        gap:5px;
    }

    .dna-logo-tools{
        font-size:21px;
    }

    .dna-logo-brand{
        font-size:28px;
    }

    .icon-btn,
    .mobile-menu-btn{
        width:40px;
        height:40px;
        flex-basis:40px;
    }
}

@media(max-width:370px){
    .dna-logo-tools{
        font-size:18px;
    }

    .dna-logo-brand{
        font-size:24px;
    }

    .icon-btn,
    .mobile-menu-btn{
        width:38px;
        height:38px;
        flex-basis:38px;
    }
}

/* ===== HEADER END ===== */

/* Header bookmark hint */
.dna-bookmark-hint {
    flex: 0 0 270px;
    min-width: 100px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 14px;
    border: 1px solid rgba(96, 165, 250, 0.20);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(139, 92, 246, 0.10));
    color: #dbeafe;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.dna-hint-prefix {
    color: #93c5fd;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

.dna-hint-rotator {
    position: relative;
    flex: 1 1 auto;
    height: 20px;
    min-width: 0;
    display: block;
    overflow: hidden;
    color: #f8fbff;
    font-size: 0.86rem;
    font-weight: 900;
    line-height: 20px;
    white-space: nowrap;
}

.dna-hint-rotator span {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(18px);
    animation: dnaHintSlide 8s ease-in-out infinite;
}

.dna-hint-rotator span:nth-child(2) { animation-delay: 2s; }
.dna-hint-rotator span:nth-child(3) { animation-delay: 4s; }
.dna-hint-rotator span:nth-child(4) { animation-delay: 6s; }

@keyframes dnaHintSlide {
    0% { opacity: 0; transform: translateY(18px); }
    8%, 22% { opacity: 1; transform: translateY(0); }
    30%, 100% { opacity: 0; transform: translateY(-18px); }
}

body:not(.theme-dark) .dna-bookmark-hint {
    border-color: rgba(37, 99, 235, 0.16);
    background: linear-gradient(135deg, #f8fbff, #edf5ff);
    color: #102033;
    box-shadow: 0 10px 24px rgba(31, 53, 83, 0.07);
}

body:not(.theme-dark) .dna-hint-prefix {
    color: #1769e8;
}

body:not(.theme-dark) .dna-hint-rotator {
    color: #102033;
}

@media (max-width: 1280px) {
    .dna-bookmark-hint {
        flex-basis: 220px;
        min-width: 200px;
        padding-inline: 11px;
    }

    .dna-hint-prefix {
        display: none;
    }
}

@media (max-width: 1024px) {
    .dna-bookmark-hint {
        display: none;
    }
}

/* Header bookmark star marker */
.dna-hint-star {
    position: relative;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    color: #facc15;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 0 14px rgba(250, 204, 21, 0.52);
    animation: dnaStarPop 1.7s ease-in-out infinite;
}

.dna-hint-star::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.18);
    transform: scale(0.65);
    opacity: 0;
    animation: dnaStarRing 1.7s ease-in-out infinite;
}

@keyframes dnaStarPop {
    0%, 100% { transform: rotate(0deg) scale(1); }
    35% { transform: rotate(18deg) scale(1.18); }
    58% { transform: rotate(-10deg) scale(0.98); }
}

@keyframes dnaStarRing {
    0% { opacity: 0; transform: scale(0.55); }
    36% { opacity: 1; transform: scale(1.25); }
    100% { opacity: 0; transform: scale(1.75); }
}

@media (max-width: 1280px) {
    .dna-hint-star {
        display: grid;
    }
}

/* Header bookmark icon marker */
.dna-hint-star {
    display: none !important;
}

.dna-hint-bookmark {
    position: relative;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    color: #facc15;
    font-size: 1.22rem;
    line-height: 1;
    filter: drop-shadow(0 5px 12px rgba(250, 204, 21, 0.34));
    overflow: hidden;
}

.dna-hint-bookmark i {
    position: relative;
    z-index: 1;
}

.dna-hint-bookmark::after {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    width: 8px;
    left: -45%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.92), transparent);
    transform: rotate(24deg);
    animation: dnaBookmarkShine 2.4s ease-in-out infinite;
}

@keyframes dnaBookmarkShine {
    0%, 38% { left: -45%; opacity: 0; }
    48% { opacity: 0.95; }
    66% { left: 120%; opacity: 0; }
    100% { left: 120%; opacity: 0; }
}

/* Compact header bookmark hint */
.dna-bookmark-hint {
    flex-basis: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    height: 40px !important;
    gap: 8px !important;
    padding: 0 10px !important;
}

.dna-hint-bookmark {
    width: 24px !important;
    height: 24px !important;
    flex-basis: 24px !important;
    font-size: 1.08rem !important;
}

.dna-hint-rotator {
    font-size: 0.82rem !important;
}

@media (max-width: 1280px) {
    .dna-bookmark-hint {
        flex-basis: 185px !important;
        min-width: 170px !important;
        max-width: 185px !important;
    }
}

/* Light theme bookmark icon shine */
body:not(.theme-dark) .dna-hint-bookmark {
    color: #f59e0b !important;
    filter: drop-shadow(0 5px 12px rgba(245, 158, 11, 0.24)) !important;
}

body:not(.theme-dark) .dna-hint-bookmark::after {
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.72), rgba(255, 193, 7, 0.78), transparent) !important;
}

/* Desktop header bookmark uses browser-star cue */
.dna-hint-bookmark {
    color: #facc15 !important;
    font-size: 1.06rem !important;
    overflow: visible !important;
}

.dna-hint-bookmark .fa-bookmark::before {
    content: "\f005";
}

.dna-hint-bookmark::after {
    display: none !important;
}

.dna-hint-bookmark i {
    filter: drop-shadow(0 4px 10px rgba(250, 204, 21, 0.34));
    animation: dnaHeaderStarGlint 2.1s ease-in-out infinite;
}

@keyframes dnaHeaderStarGlint {
    0%, 100% { color: #facc15; text-shadow: 0 0 0 rgba(250, 204, 21, 0); }
    45% { color: #ffe66d; text-shadow: 0 0 14px rgba(250, 204, 21, 0.52); }
}

.dna-bookmark-hint {
    flex-basis: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    padding: 0 12px !important;
}

.dna-hint-rotator {
    font-size: 0.8rem !important;
}

@media (max-width: 1280px) {
    .dna-bookmark-hint {
        flex-basis: 210px !important;
        min-width: 200px !important;
        max-width: 210px !important;
    }
}

/* Tool-page safe logo visibility guard */
.dna-header .dna-logo,
.dna-header .dna-word-logo {
    display: inline-flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1002 !important;
    min-width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
    text-decoration: none !important;
}

.dna-header .dna-logo-tools,
.dna-header .dna-logo-brand,
.dna-header .dna-brand-dna {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-indent: 0 !important;
    clip-path: none !important;
    transform-origin: center !important;
}

.dna-header .dna-logo-tools {
    color: #f8fbff !important;
}

.dna-header .dna-logo-brand,
.dna-header .dna-brand-dna {
    color: #60a5fa !important;
    -webkit-text-fill-color: currentColor !important;
}

body:not(.theme-dark) .dna-header .dna-logo-tools {
    color: #151f30 !important;
}

body:not(.theme-dark) .dna-header .dna-logo-brand,
body:not(.theme-dark) .dna-header .dna-brand-dna {
    color: #1670f4 !important;
    -webkit-text-fill-color: currentColor !important;
}