/* ==========================================================================
   AI Narratives
   Code Syntax Highlighting
   syntax.css
   Version: 1.0

   Developed by
   Zytrix Core Systems Enterprise
   ========================================================================== */

/* ==========================================================================
   CODE BLOCK
   ========================================================================== */

pre{

    background:#0F172A;

    color:#E5E7EB;

    padding:28px;

    border-radius:14px;

    overflow-x:auto;

    font-family:"IBM Plex Mono", monospace;

    font-size:14px;

    line-height:1.8;

    margin:35px 0;

    border:1px solid #1E293B;

}

pre code{

    background:none;

    color:inherit;

    padding:0;

    font-size:inherit;

}

/* ==========================================================================
   INLINE CODE
   ========================================================================== */

code{

    background:#F3F4F6;

    color:#DC2626;

    padding:3px 6px;

    border-radius:6px;

    font-family:"IBM Plex Mono", monospace;

    font-size:0.95em;

}

/* ==========================================================================
   LINE NUMBERS
   ========================================================================== */

.code-block{

    position:relative;

}

.code-lines{

    display:grid;

    grid-template-columns:60px 1fr;

}

.line-number{

    color:#64748B;

    text-align:right;

    padding-right:18px;

    user-select:none;

    border-right:1px solid #334155;

}

/* ==========================================================================
   SYNTAX COLORS
   ========================================================================== */

/* Comments */

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata{

    color:#64748B;

    font-style:italic;

}

/* Keywords */

.token.keyword{

    color:#C084FC;

}

/* Strings */

.token.string{

    color:#34D399;

}

/* Numbers */

.token.number{

    color:#FBBF24;

}

/* Functions */

.token.function{

    color:#60A5FA;

}

/* Variables */

.token.variable{

    color:#F87171;

}

/* Classes */

.token.class-name{

    color:#38BDF8;

}

/* Operators */

.token.operator{

    color:#F8FAFC;

}

/* Punctuation */

.token.punctuation{

    color:#CBD5E1;

}

/* Constants */

.token.constant{

    color:#F472B6;

}

/* Booleans */

.token.boolean{

    color:#FB923C;

}

/* Properties */

.token.property{

    color:#22C55E;

}

/* HTML Tags */

.token.tag{

    color:#F87171;

}

/* Attributes */

.token.attr-name{

    color:#FBBF24;

}

/* Attribute Values */

.token.attr-value{

    color:#34D399;

}

/* CSS Selectors */

.token.selector{

    color:#38BDF8;

}

/* CSS Properties */

.token.property{

    color:#60A5FA;

}

/* CSS Values */

.token.unit{

    color:#FB923C;

}

/* ==========================================================================
   TERMINAL
   ========================================================================== */

.terminal{

    background:#020617;

    color:#E2E8F0;

    padding:24px;

    border-radius:14px;

    font-family:"IBM Plex Mono", monospace;

    overflow:auto;

}

.terminal::before{

    content:"● ● ●";

    display:block;

    color:#EF4444;

    margin-bottom:20px;

    letter-spacing:8px;

}

/* ==========================================================================
   COPY BUTTON
   ========================================================================== */

.code-toolbar{

    position:relative;

}

.copy-code{

    position:absolute;

    top:12px;

    right:12px;

    padding:8px 14px;

    border:none;

    border-radius:8px;

    background:#1E293B;

    color:#FFFFFF;

    cursor:pointer;

    font-size:13px;

    transition:.25s;

}

.copy-code:hover{

    background:#2563EB;

}

/* ==========================================================================
   HIGHLIGHTED LINE
   ========================================================================== */

.highlight-line{

    display:block;

    margin:0 -28px;

    padding:0 28px;

    background:rgba(37,99,235,.15);

}

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

pre::-webkit-scrollbar{

    height:10px;

}

pre::-webkit-scrollbar-thumb{

    background:#475569;

    border-radius:20px;

}

pre::-webkit-scrollbar-track{

    background:#1E293B;

}

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

@media(max-width:768px){

pre{

padding:20px;

font-size:13px;

}

.copy-code{

position:relative;

display:block;

margin-bottom:12px;

top:auto;

right:auto;

}

}