:root{

    --barcode-bg:#ffffff;

    --barcode-line:#000000;

    --preview-bg:#f5f5f5;

    --card-bg:#1b1b1b;

    --border:#333333;

    --border-light:#2d2d2d;

    --text:#ffffff;

    --text-muted:#cfcfcf;

    --accent:#4f46e5;

    --success:#10b981;

    --warning:#f59e0b;

    --danger:#ef4444;

}

/* ==========================================
   INPUTS
========================================== */

input,
select,
textarea{

    width:100%;

    padding:10px;

    border-radius:8px;

    border:1px solid var(--border);

    background:#1b1b1b;

    color:#fff;

    box-sizing:border-box;

    font-size:15px;

}

input[type="range"]{

    padding:0;

    margin:12px 0 6px;

    accent-color:var(--accent);

}

textarea{

    resize:vertical;

    min-height:180px;

    font-family:inherit;

}

label{

    display:block;

    margin-top:15px;

    margin-bottom:8px;

    font-weight:600;

}

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

button{

    padding:10px 14px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    background:var(--accent);

    color:#fff;

    transition:.25s;

    font-size:15px;

}

button:hover{

    transform:translateY(-2px);

}

button:active{

    transform:translateY(0);

}

.btn-group{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:24px;

}

.btn-group button{

    width:100%;

}

.btn.secondary{

    background:#242424;

}

.btn.secondary:hover{

    background:#2c2c2c;

}

/* ==========================================
   SETTINGS PANELS
========================================== */

.settings-group{

    margin-top:22px;

    padding:18px;

    border-radius:10px;

    border:1px solid var(--border-light);

}

.settings-group h3{

    margin:0 0 16px;

    font-size:16px;

}

.settings-group p{

    color:#bfbfbf;

    margin-bottom:14px;

    font-size:14px;

}

/* ==========================================
   CHECKBOXES
========================================== */

.settings-option{

    display:flex;

    align-items:center;

    gap:10px;

    margin:14px 0;

    cursor:pointer;

    user-select:none;

    color:#ddd;

}

.settings-option:hover{

    color:#fff;

}

.settings-option input[type="checkbox"]{

    width:auto;

    margin:0;

    accent-color:var(--accent);

}

/* ==========================================
   COLOR PICKERS
========================================== */

.color-setting{

    margin-bottom:18px;

}

.color-row{

    display:flex;

    align-items:center;

    gap:12px;

}

.color-row input[type="color"]{

    appearance:none;

    -webkit-appearance:none;

    width:58px;

    height:42px;

    padding:0;

    border-radius:8px;

    border:1px solid var(--border);

    background:none;

    cursor:pointer;

}

.color-row input[type="color"]::-webkit-color-swatch-wrapper{

    padding:0;

}

.color-row input[type="color"]::-webkit-color-swatch{

    border:none;

    border-radius:6px;

}

.color-row span{

    flex:1;

    padding:10px 14px;

    border-radius:8px;

    background:#202020;

    border:1px solid var(--border);

    font-family:monospace;

    letter-spacing:1px;

    font-size:14px;

}

/* ==========================================
   RANGE VALUES
========================================== */

#barWidthValue,
#barHeightValue,
#marginValue,
#fontSizeValue{

    display:block;

    margin-bottom:12px;

    color:#ccc;

    font-size:14px;

    font-weight:600;

}

/* ==========================================
   PREVIEW
========================================== */

.barcode-preview-container{

    margin-top:24px;

    margin-bottom:24px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.barcode-viewport{

    width:100%;

    overflow:auto;

    padding:30px;

    background:#111;

    border-radius:12px;

    box-sizing:border-box;

}

.barcode-inner{

    display:inline-block;

    transform-origin:top left;

    will-change:transform;

}

/* ==========================================
   SVG
========================================== */

#barcode{

    display:block;

    margin:auto;

    background:var(--barcode-bg);

    border-radius:10px;

    box-shadow:

        0 0 25px rgba(79,70,229,.18),

        inset 0 0 10px rgba(255,255,255,.05);

    padding:20px;

    max-width:none;

}

/* ==========================================
   PLACEHOLDER
========================================== */

.barcode-placeholder{

    width:100%;

    min-height:240px;

    display:flex;

    justify-content:center;

    align-items:center;

    border:2px dashed #444;

    border-radius:10px;

    color:#888;

    font-size:16px;

}

/* ==========================================
   ZOOM
========================================== */

.zoom-control{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:15px;

}

.zoom-control label{

    margin:0;

    white-space:nowrap;

    font-weight:600;

}

.zoom-control input{

    flex:1;

}

/* ==========================================
   STATISTICS
========================================== */

.barcode-stats{

    margin-top:25px;

}

.stats-row{

    display:grid;

    grid-template-columns:1fr 140px;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid var(--border-light);

}

.stats-row span{

    color:#ccc;

    font-weight:500;

}

.stats-row strong{

    display:block;

    text-align:right;

    font-weight:700;

}

/* ==========================================
   STATUS
========================================== */

.status-ready{

    color:var(--success);

}

.status-working{

    color:var(--warning);

}

.status-error{

    color:var(--danger);

}

.status-success{

    color:#22c55e;

}

/* ==========================================
   HERO CARD FIXES
========================================== */

.output-panel{

    overflow:hidden;

}

.output-panel h2{

    margin-bottom:18px;

}

/* ==========================================
   SVG RENDER QUALITY
========================================== */

svg{

    shape-rendering:geometricPrecision;

    text-rendering:optimizeLegibility;

}

/* ==========================================
   LOADING
========================================== */

.generating{

    animation:pulseGlow 1.2s infinite alternate;

}

@keyframes pulseGlow{

    from{

        box-shadow:

            0 0 18px rgba(79,70,229,.15),

            inset 0 0 12px rgba(255,255,255,.03);

    }

    to{

        box-shadow:

            0 0 34px rgba(79,70,229,.35),

            inset 0 0 20px rgba(255,255,255,.05);

    }

}

/* ==========================================
   FADE
========================================== */

.fadeIn{

    animation:fadeIn .25s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media (max-width:1200px){

    .barcode-preview-container{

        overflow-x:auto;

    }

}

@media (max-width:1000px){

    .barcode-viewport{

        padding:24px;

    }

    #barcode{

        padding:18px;

    }

    .stats-row{

        grid-template-columns:1fr 120px;

    }

}

@media (max-width:800px){

    .btn-group{

        gap:8px;

    }

    .settings-group{

        padding:16px;

    }

    .barcode-viewport{

        padding:18px;

    }

    #barcode{

        padding:14px;

        max-width:none;

    }

    .zoom-control{

        flex-direction:column;

        align-items:stretch;

        gap:8px;

    }

}

@media (max-width:600px){

    .stats-row{

        grid-template-columns:1fr 100px;

        font-size:14px;

    }

    .stats-row strong{

        font-size:14px;

    }

    .color-row{

        gap:8px;

    }

    .color-row span{

        font-size:13px;

        padding:9px 10px;

    }

    .color-row input[type="color"]{

        width:50px;

        height:38px;

    }

    textarea{

        min-height:150px;

    }

}

@media (max-width:480px){

    .barcode-viewport{

        padding:14px;

    }

    #barcode{

        padding:10px;

        border-radius:8px;

    }

    .settings-group{

        padding:14px;

    }

}

/* ==========================================
   EXPORT MODE
========================================== */

.exporting{

    box-shadow:none !important;

    animation:none !important;

}

.exporting #barcode{

    box-shadow:none !important;

    border-radius:0;

}

.exporting .barcode-viewport{

    background:transparent;

    padding:0;

}

/* ==========================================
   PRINT
========================================== */

@media print{

    body{

        background:#ffffff !important;

    }

    nav,
    footer,
    .hero,
    .btn-group,
    .zoom-control,
    .barcode-stats{

        display:none !important;

    }

    .workspace-grid{

        display:block;

    }

    .hero-card{

        border:none !important;

        box-shadow:none !important;

        padding:0 !important;

        background:#fff !important;

    }

    .output-panel:first-child{

        display:none;

    }

    .barcode-preview-container{

        margin:0;

        display:flex;

        justify-content:center;

        align-items:center;

    }

    .barcode-viewport{

        overflow:visible;

        background:#fff;

        padding:0;

    }

    #barcode{

        background:#fff !important;

        box-shadow:none !important;

        page-break-inside:avoid;

    }

}

/* ==========================================
   BATCH PREVIEW
========================================== */

.batch-preview{

    margin-top:25px;

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));

    gap:20px;

}

.batch-card{

    background:#202020;

    border:1px solid #333;

    border-radius:12px;

    padding:16px;

    transition:.2s;

}

.batch-card:hover{

    transform:translateY(-3px);

    border-color:var(--accent);

}

.batch-card svg{

    display:block;

    margin:auto;

    background:#fff;

    padding:10px;

    border-radius:6px;

}

.batch-label{

    margin-top:12px;

    text-align:center;

    font-size:13px;

    color:#ddd;

    word-break:break-word;

}

/* ==========================================
   SCROLLBAR
========================================== */

.barcode-viewport::-webkit-scrollbar{

    width:10px;

    height:10px;

}

.barcode-viewport::-webkit-scrollbar-thumb{

    background:#444;

    border-radius:20px;

}

.barcode-viewport::-webkit-scrollbar-track{

    background:#222;

}

/* Firefox */

.barcode-viewport{

    scrollbar-width:thin;

    scrollbar-color:#444 #222;

}

/* ==========================================
   INPUT FOCUS
========================================== */

input:focus,
textarea:focus,
select:focus{

    outline:none;

    border-color:var(--accent);

    box-shadow:0 0 0 3px rgba(79,70,229,.20);

}

/* ==========================================
   BUTTON STATES
========================================== */

button:disabled{

    opacity:.5;

    cursor:not-allowed;

    transform:none !important;

}

button.loading{

    position:relative;

    pointer-events:none;

}

button.loading::after{

    content:"";

    width:16px;

    height:16px;

    border:2px solid rgba(255,255,255,.3);

    border-top-color:#fff;

    border-radius:50%;

    animation:spin .7s linear infinite;

    position:absolute;

    right:14px;

    top:50%;

    transform:translateY(-50%);

}

@keyframes spin{

    to{

        transform:translateY(-50%) rotate(360deg);

    }

}

/* ==========================================
   BADGES
========================================== */

.badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:4px 10px;

    border-radius:999px;

    background:#262626;

    border:1px solid #333;

    font-size:12px;

    font-weight:600;

    color:#ddd;

}

/* ==========================================
   HELP TEXT
========================================== */

.help-text{

    margin-top:6px;

    font-size:13px;

    color:#9ca3af;

}

.error-text{

    color:var(--danger);

}

.success-text{

    color:var(--success);

}

/* ==========================================
   UTILITY
========================================== */

.hidden{

    display:none !important;

}

.center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.mt10{

    margin-top:10px;

}

.mt20{

    margin-top:20px;

}

.mt30{

    margin-top:30px;

}

.mb10{

    margin-bottom:10px;

}

.mb20{

    margin-bottom:20px;

}

.w100{

    width:100%;

}

/* ==========================================
   SVG QUALITY
========================================== */

#barcode text{

    user-select:none;

}

#barcode image{

    image-rendering:crisp-edges;

}

#barcode rect{

    shape-rendering:crispEdges;

}

/* ==========================================
   ACCESSIBILITY
========================================== */

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{

    outline:2px solid var(--accent);

    outline-offset:2px;

}

.settings-option:focus-within{

    border-radius:6px;

}

/* ==========================================
   TRANSITIONS
========================================== */

*{

    transition:

        background-color .2s,

        border-color .2s,

        color .2s;

}

/* Prevent transitions while exporting */

.exporting *{

    transition:none !important;

}

/* ==========================================
   SELECTION
========================================== */

::selection{

    background:rgba(79,70,229,.35);

    color:#fff;

}

/* ==========================================
   EMPTY STATE
========================================== */

.empty-state{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:12px;

    min-height:260px;

    color:#8b8b8b;

    text-align:center;

}

.empty-state svg{

    opacity:.35;

}

/* ==========================================
   ANIMATIONS
========================================== */

.slideUp{

    animation:slideUp .3s ease;

}

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(16px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.scaleIn{

    animation:scaleIn .25s ease;

}

@keyframes scaleIn{

    from{

        opacity:0;

        transform:scale(.95);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/* ==========================================
   FINAL STAT ALIGNMENT
========================================== */

#statType,
#statCharacters,
#statWidth,
#statHeight,
#statFormat,
#status{

    display:inline-block !important;

    width:140px;

    text-align:right;

    font:700 16px/1 Arial,sans-serif;

}

@media (max-width:600px){

    #statType,
    #statCharacters,
    #statWidth,
    #statHeight,
    #statFormat,
    #status{

        width:100px;

        font-size:14px;

    }

}

.batch-preview-container{

    margin-top:30px;

}


.batch-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(260px,1fr));

    gap:20px;

}


.batch-card{

    background:white;

    padding:20px;

    border-radius:12px;

    border:1px solid #ddd;

    text-align:center;

}


.batch-svg svg{

    max-width:100%;

    height:auto;

}


.batch-name{

    margin-top:15px;

    font-weight:600;

}

/* ==========================================
   END OF FILE
========================================== */