/* =========================================================
   CVEWORK - CRONTAB CREATOR
   Based on the CVEWorks main Light / Red / White identity
========================================================= */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:#f7f7f8;color:#202124;line-height:1.5}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}

.container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


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

.site-header {
    background: #ffffff;
    border-bottom: 1px solid #e5e5e7;
}

.header-content {
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.4px;
}

.logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    background: #c90000;
    color: #ffffff;

    border-radius: 8px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.logo-name {
    color: #202124;
}

.logo-name span {
    color: #c90000;
}

.navigation {
    display: flex;
    align-items: center;
    gap: 32px;
}

.navigation a {
    color: #5f6368;
    font-size: 14px;
    font-weight: 600;

    transition:
        color 0.2s ease;
}

.navigation a:hover {
    color: #c90000;
}


/* =========================================================
   HERO
========================================================= */

.hero{position:relative;padding:72px 0 52px;text-align:center;background:linear-gradient(180deg,#fff 0%,#fffafa 100%);overflow:hidden}

.hero-glow{
    position:absolute;
    width:480px;
    height:480px;
    top:-320px;
    left:50%;
    transform:translateX(-50%);
    border-radius:50%;
    background:#d71920;
    opacity:.055;
    pointer-events:none
}

.hero-content{
    position:relative;
    max-width:900px
}

.hero-badge,
.section-label{
    display:inline-flex;
    align-items:center;
    padding:7px 14px;
    border:1px solid #ffcaca;
    border-radius:30px;
    background:#fff5f5;
    color:#d71920;
    font-size:10px;
    font-weight:900;
    letter-spacing:.10em
}

.hero h1{
    margin-top:20px;
    font-size:clamp(36px,6vw,60px);
    line-height:1.05;
    letter-spacing:-1.8px;
    color:#171717
}

.hero h1 span{
    color:#d71920
}

.hero-description{
    max-width:720px;
    margin:20px auto 0;
    color:#666;
    font-size:17px
}


/* =========================================================
   SECTIONS
========================================================= */

.creator-section,
.translator-section,
.info-section{
    padding:64px 0
}

.creator-section{
    background:#f7f7f8
}

.translator-section{
    background:#fff;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee
}

.info-section{
    background:#f7f7f8
}

.section-heading{
    max-width:720px;
    margin-bottom:30px
}

.section-heading.centered{
    margin-left:auto;
    margin-right:auto;
    text-align:center
}

.section-heading h2{
    margin-top:13px;
    font-size:32px;
    line-height:1.15;
    color:#171717
}

.section-heading p{
    margin-top:10px;
    color:#6a6a6a;
    font-size:15px
}


/* =========================================================
   MAIN CARDS
========================================================= */

.creator-card,
.translator-card,
.info-box{
    background:#fff;
    border:1px solid #e2e2e2;
    border-radius:13px;
    box-shadow:0 3px 15px rgba(0,0,0,.035)
}

.creator-card{
    padding:28px
}

.translator-card{
    max-width:1000px;
    margin:0 auto;
    padding:28px
}

.info-box{
    padding:34px;
    max-width:900px;
    margin:0 auto
}


/* =========================================================
   FORM
========================================================= */

.form-grid{
    display:grid;
    grid-template-columns:120px 120px 120px 180px;
    gap:18px 20px;
    align-items:end
}

.field-group{
    min-width:0
}

.field-group>label{
    display:block;
    margin-bottom:8px;
    color:#222;
    font-size:13px;
    font-weight:800
}

input[type=number],
input[type=text],
select{
    width:100%;
    height:45px;
    padding:0 13px;
    border:1px solid #d6dce5;
    border-radius:8px;
    background:#fff;
    color:#202124;
    outline:none;
    font-size:14px;
    transition:.2s ease
}

input[type=number]:focus,
input[type=text]:focus,
select:focus{
    border-color:#d71920;
    box-shadow:0 0 0 3px rgba(215,25,32,.08)
}

.full-width{
    grid-column:1/-1
}

.month-field{
    max-width:250px
}

.field-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:8px
}

.field-title-row>label{
    margin-bottom:0
}

.all-days-button{
    min-height:31px;
    padding:0 11px;
    border:1px solid #f0b0b3;
    border-radius:7px;
    background:#fff;
    color:#d71920;
    font-size:10px;
    font-weight:900;
    letter-spacing:.04em;
    cursor:pointer;
    transition:.2s ease
}

.all-days-button:hover,
.all-days-button.selected{
    background:#fff1f1;
    border-color:#d71920
}

.days-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:8px
}

.day-option{
    position:relative;
    cursor:pointer
}

.day-option input{
    position:absolute;
    opacity:0;
    pointer-events:none
}

.day-option span{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:7px 6px;
    border:1px solid #dedede;
    border-radius:8px;
    background:#fff;
    color:#5d5d5d;
    font-size:12px;
    font-weight:700;
    transition:.2s ease
}

.day-option:hover span{
    border-color:#efb3b6;
    background:#fffafa
}

.day-option input:checked+span{
    border-color:#d71920;
    background:#fff1f1;
    color:#d71920
}


/* =========================================================
   PERIOD
========================================================= */

.period-toggle{
    height:45px;
    display:flex;
    border:1px solid #d6dce5;
    border-radius:8px;
    overflow:hidden
}

.period-option{
    flex:1;
    cursor:pointer
}

.period-option input{
    position:absolute;
    opacity:0;
    pointer-events:none
}

.period-option span{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#666;
    background:#fff;
    font-size:13px;
    font-weight:800
}

.period-option input:checked+span{
    background:#fff1f1;
    color:#d71920
}


/* =========================================================
   BUTTONS
========================================================= */

.creator-actions{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:25px
}

.primary-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-height:46px;
    padding:0 20px;
    border:0;
    border-radius:8px;
    background:#d71920;
    color:#fff;
    font-size:14px;
    font-weight:800;
    box-shadow:0 5px 16px rgba(215,25,32,.18);
    transition:.2s ease;
    cursor:pointer
}

.primary-button:hover{
    background:#bd151b;
    transform:translateY(-1px)
}

.secondary-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 20px;
    border:1px solid #ddd;
    border-radius:8px;
    background:#fff;
    color:#555;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    transition:.2s ease
}

.secondary-button:hover{
    border-color:#efb3b6;
    background:#fffafa;
    color:#d71920
}


/* =========================================================
   HACKERDNA AFFILIATE
========================================================= */

.affiliate-section{
    padding:64px 0;
    background:#f7f7f8
}

.affiliate-box{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    padding:38px 42px;
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:14px;
    box-shadow:0 3px 15px rgba(0,0,0,.035);
    overflow:hidden
}

.affiliate-box::after{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    right:-120px;
    top:-130px;
    border-radius:50%;
    background:#d71920;
    opacity:.035;
    pointer-events:none
}

.affiliate-content{
    position:relative;
    z-index:1;
    max-width:760px
}

.affiliate-box h2{
    margin-top:12px;
    color:#171717;
    font-size:28px;
    line-height:1.2
}

.affiliate-box p{
    margin-top:8px;
    color:#686868;
    font-size:14px;
    line-height:1.7
}

.affiliate-button{
    position:relative;
    z-index:1;
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-height:46px;
    padding:0 20px;
    border-radius:8px;
    background:#d71920;
    color:#fff;
    font-size:14px;
    font-weight:800;
    box-shadow:0 5px 16px rgba(215,25,32,.18);
    transition:.2s ease
}

.affiliate-button:hover{
    background:#bd151b;
    transform:translateY(-1px)
}

.affiliate-button span{
    font-size:18px
}

.affiliate-disclosure{
    margin-top:13px!important;
    color:#999!important;
    font-size:11px!important;
    line-height:1.5!important
}


/* =========================================================
   RESULT
========================================================= */

.result-panel{
    margin-top:24px;
    padding:19px 20px 17px;
    border:1px solid #e3e3e3;
    border-radius:10px;
    background:#202124
}

.result-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}

.result-label,
.schedule-label{
    display:block;
    margin-bottom:6px;
    color:#d71920;
    font-size:10px;
    font-weight:900;
    letter-spacing:.10em
}

.result-panel code{
    color:#fff;
    font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
    font-size:19px;
    letter-spacing:.4px;
    word-break:break-all
}

.copy-button{
    min-height:34px;
    padding:0 13px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:7px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
    transition:.2s ease
}

.copy-button:hover{
    background:rgba(255,255,255,.15)
}

.result-help{
    margin-top:11px;
    color:#999;
    font-size:11px;
    line-height:1.55
}


/* =========================================================
   HIGHLIGHTED MEANING
========================================================= */

.schedule-result,
.translation-result{
    margin-top:15px;
    padding:18px 20px;
    border:1px solid #efb3b6;
    border-radius:10px;
    background:#fffafa;
    text-align:center
}

.schedule-result .schedule-label,
.translation-result .schedule-label{
    margin-bottom:5px
}

.schedule-result strong,
.translation-result strong{
    display:block;
    color:#171717;
    font-size:16px;
    line-height:1.4;
    font-weight:800
}


/* =========================================================
   TRANSLATOR
========================================================= */

.cron-input-row{
    display:flex;
    gap:10px
}

.cron-input-row input{
    flex:1;
    font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace
}

.cron-input-row .primary-button{
    flex-shrink:0
}

.hidden{
    display:none!important
}

.error-box{
    margin-top:13px;
    padding:12px 14px;
    border:1px solid #efb3b6;
    border-radius:8px;
    background:#fff1f1;
    color:#b3161d;
    font-size:13px
}


/* =========================================================
   SYNTAX HELP
========================================================= */

.syntax-help{
    margin-top:24px;
    padding:20px;
    border:1px solid #e3e3e3;
    border-radius:10px;
    background:#f7f7f8
}

.syntax-title{
    margin-bottom:15px
}

.syntax-title h3{
    margin-top:10px;
    font-size:17px;
    color:#171717
}

.syntax-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:8px
}

.syntax-grid div{
    padding:12px 10px;
    border:1px solid #e1e1e1;
    border-radius:8px;
    background:#fff
}

.syntax-grid strong{
    display:block;
    color:#d71920;
    font-size:10px;
    letter-spacing:.04em
}

.syntax-grid span{
    display:block;
    margin-top:3px;
    color:#777;
    font-size:11px
}

.syntax-example{
    display:block;
    margin-top:12px;
    padding:13px;
    border-radius:8px;
    background:#202124;
    color:#fff;
    font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
    font-size:14px
}

.syntax-help>p{
    margin-top:10px;
    color:#777;
    font-size:11px
}


/* =========================================================
   INFO
========================================================= */

.info-box h2{
    margin-top:13px;
    color:#171717;
    font-size:25px
}

.info-box p{
    max-width:720px;
    margin-top:10px;
    color:#666;
    font-size:14px;
    line-height:1.7
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    background: #ffffff;

    border-top: 1px solid #e4e4e6;
}

.footer-content {
    display: grid;

    grid-template-columns:
        2fr 1fr 1fr;

    gap: 50px;

    padding: 50px 0;
}

.footer-brand {
    max-width: 360px;
}

.footer-logo {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: #202124;

    font-size: 18px;
    font-weight: 800;
}

.footer-logo > span:last-child span {
    color: #c90000;
}

.footer-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    background: #c90000;
    color: #ffffff;

    border-radius: 7px;

    font-size: 10px;
    font-weight: 800;
}

.footer-brand p {
    margin-top: 12px;

    color: #85898d;

    font-size: 12px;
}

.footer-column {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.footer-column strong {
    margin-bottom: 4px;

    color: #303236;

    font-size: 12px;
}

.footer-column a {
    color: #85898d;

    font-size: 12px;
}

.footer-column a:hover {
    color: #c90000;
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {
    border-top: 1px solid #eeeeef;
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 18px 0;

    color: #92969a;

    font-size: 11px;
}

.footer-bottom-inner a {
    color: #c90000;
}

.footer-bottom-inner a:hover {
    text-decoration: underline;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:900px){

    .form-grid{
        grid-template-columns:repeat(2,120px)
    }

    .days-grid{
        grid-template-columns:repeat(4,1fr)
    }

    .syntax-grid{
        grid-template-columns:repeat(3,1fr)
    }

    .footer-content {
        grid-template-columns:
            1.5fr 1fr 1fr;
    }
}


@media(max-width:700px){

    .container {
        width: min(
            100% - 28px,
            1180px
        );
    }

    .header-content {
        height: 64px;
    }

    .navigation {
        gap: 16px;
    }

    .hero{
        padding:60px 0 45px
    }

    .hero h1{
        font-size:39px;
        letter-spacing:-1px
    }

    .hero-description{
        font-size:15px
    }

    .creator-section,
    .translator-section,
    .info-section{
        padding:52px 0
    }

    .section-heading h2{
        font-size:29px
    }

    .creator-card,
    .translator-card{
        padding:20px
    }

    .form-grid{
        grid-template-columns:1fr 1fr;
        gap:17px 12px
    }

    .month-field{
        max-width:none
    }

    .days-grid{
        grid-template-columns:repeat(2,1fr)
    }

    .creator-actions{
        flex-direction:column;
        align-items:stretch
    }

    .creator-actions button{
        width:100%
    }

    .cron-input-row{
        flex-direction:column
    }

    .cron-input-row button{
        width:100%
    }

    .result-top{
        align-items:flex-start
    }

    .syntax-grid{
        grid-template-columns:repeat(2,1fr)
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;

        gap: 30px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-bottom-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media(max-width:480px){

    .navigation a {
        font-size: 12px;
    }

    .logo-name {
        font-size: 18px;
    }

    .logo-mark {
        width: 36px;
        height: 36px;
    }

    .form-grid{
        grid-template-columns:1fr
    }

    .days-grid{
        grid-template-columns:1fr 1fr
    }

    .period-toggle{
        width:100%
    }
}


/* =========================================================
   CRONTAB EXPLAINED - LEARNING SECTION
========================================================= */

.explainer-card{
    max-width:920px;
    margin:18px auto 0;
    padding:26px;
    border:1px solid #e2e2e2;
    border-radius:13px;
    background:#fff;
    box-shadow:0 3px 15px rgba(0,0,0,.035)
}

.explainer-heading{
    text-align:center;
    max-width:620px;
    margin:0 auto 22px
}

.explainer-heading h3{
    margin-top:11px;
    color:#171717;
    font-size:23px;
    line-height:1.2
}

.explainer-heading p{
    margin-top:7px;
    color:#777;
    font-size:13px
}

.explainer-content{
    max-width:800px;
    margin:0 auto
}

.explainer-expression{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:13px;
    margin-bottom:14px;
    padding:13px 16px;
    border:1px solid #f0b7ba;
    border-radius:9px;
    background:#fffafa
}

.explainer-expression span{
    color:#d71920;
    font-size:10px;
    font-weight:900;
    letter-spacing:.09em
}

.explainer-expression code{
    color:#171717;
    font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
    font-size:15px;
    font-weight:800;
    letter-spacing:.4px
}

.breakdown-table-wrap{
    width:100%;
    overflow:hidden;
    border:1px solid #e3e3e3;
    border-radius:9px;
    background:#fff
}

.breakdown-table{
    width:100%;
    border-collapse:collapse;
    background:#fff
}

.breakdown-table th{
    padding:12px 15px;
    background:#f7f7f8;
    border-bottom:1px solid #e3e3e3;
    color:#555;
    text-align:left;
    font-size:10px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase
}

.breakdown-table td{
    padding:12px 15px;
    border-bottom:1px solid #eee;
    color:#666;
    font-size:13px
}

.breakdown-table tr:last-child td{
    border-bottom:0
}

.breakdown-table td:first-child{
    width:100px;
    color:#d71920;
    font-weight:800
}

.breakdown-table td:nth-child(2){
    width:220px;
    color:#222;
    font-weight:800
}

.breakdown-table code{
    display:inline-flex;
    min-width:30px;
    min-height:25px;
    align-items:center;
    justify-content:center;
    padding:3px 7px;
    border:1px solid #f0b7ba;
    border-radius:5px;
    background:#fff1f1;
    color:#d71920;
    font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
    font-size:12px;
    font-weight:800
}

.field-order{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:7px;
    margin-top:14px;
    padding:13px 15px;
    border:1px solid #e5e5e5;
    border-radius:8px;
    background:#f7f7f8
}

.field-order span{
    width:100%;
    margin-bottom:2px;
    color:#d71920;
    font-size:9px;
    font-weight:900;
    letter-spacing:.09em;
    text-align:center
}

.field-order strong{
    color:#444;
    font-size:11px;
    font-weight:800
}

.field-order i{
    color:#d71920;
    font-size:13px;
    font-style:normal;
    font-weight:900
}


@media(max-width:680px){

    .explainer-card{
        padding:19px
    }

    .explainer-heading h3{
        font-size:21px
    }

    .breakdown-table-wrap{
        overflow-x:auto
    }

    .breakdown-table{
        min-width:540px
    }

    .explainer-expression{
        align-items:flex-start;
        flex-direction:column;
        gap:5px
    }

    .field-order{
        justify-content:flex-start
    }

    .field-order span{
        text-align:left
    }
}