/* Structural rules shared by all eight tool workspaces. */
:root{--bg:#f5f6f8;--bg-alt:#fff;--text:#20272c;--text-muted:#70787f;--card-bg:#fff;--card-border:#e2e6e8;--primary:#256d51;--secondary:#256d51;--tertiary:#b5ef70;--accent-gradient:linear-gradient(#256d51,#256d51);--brand-gradient:linear-gradient(#b5ef70,#b5ef70);--shadow:transparent;--shadow-strong:#14291d12;--radius-sm:8px;--radius-md:10px;--radius-lg:12px;--font-heading:'Inter','Segoe UI',sans-serif;--font-body:'Inter','Segoe UI',sans-serif}
body.dark-mode{--bg:#151b1f;--bg-alt:#1d252a;--text:#e8eeea;--text-muted:#a2afb3;--card-bg:#1d252a;--card-border:#333e44;--primary:#a9e67c;--secondary:#a9e67c;--tertiary:#a9e67c;--accent-gradient:linear-gradient(#427d55,#427d55);--brand-gradient:linear-gradient(#a9e67c,#a9e67c);--shadow:transparent;--shadow-strong:#0002}
body.workspace{display:block;padding-left:244px;background:var(--bg);font-size:16px;line-height:1.55;overflow-x:visible}
body.workspace::before,body.workspace::after{display:none}
*{box-sizing:border-box}
::selection{background:#b5ef70;color:#17251e}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid #6fae46!important;outline-offset:4px}
button,.tag,.convert-btn,.download-link,.download-btn,.play-btn{border-radius:7px;box-shadow:none;font-size:14px;min-height:40px}
button:hover,.tag:hover,.convert-btn:hover,.download-btn:hover,.play-btn:hover{transform:none;box-shadow:none;filter:brightness(1.07)}
svg{width:21px;height:21px;flex-shrink:0}
.sidebar{position:fixed;inset:0 auto 0 0;width:244px;background:#192226;color:#aeb9bc;padding:34px 18px 22px;z-index:200;display:flex;flex-direction:column;overflow-y:auto}
.brand{display:flex;align-items:center;gap:12px;color:#f6f8f6;text-decoration:none;font-size:23px;font-weight:700;letter-spacing:-.9px;padding:0 10px 39px;line-height:1.15}
.brand-mark{height:39px;width:39px;display:flex;align-items:center;justify-content:center;color:#1b2923;background:#b5ef70;border-radius:11px;font-size:29px;letter-spacing:-3px;padding-right:3px}
.brand-mark span{font-size:28px}
.brand-by{display:block;margin-top:7px;font-size:11px;letter-spacing:1.4px;color:#94a0a4;font-weight:400}
.nav-link{display:flex;align-items:center;gap:12px;color:#abb7bb;text-decoration:none;padding:11px 13px;border-radius:7px;font-size:14px;margin:3px 0;transition:background .15s,color .15s}
.nav-link:hover{background:#ffffff0a;color:white}
.nav-link.active{color:#caf4a1;background:#b5ef7012}
.nav-link.active svg{color:#b5ef70}
.nav-count{margin-left:auto;font-size:11px;background:#b5ef7015;padding:0 6px;border-radius:4px}
.nav-group{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.8px;color:#788b91;padding:27px 13px 8px}
.sidebar-bottom{margin-top:auto;padding:40px 12px 0;font-size:12px;color:#c3cdcf}
.sidebar-bottom div{padding-top:6px;color:#809097;font-size:11px}
.status-dot{display:inline-block;width:6px;height:6px;border-radius:100%;background:#b5ef70;margin-right:7px}
body>header{background:var(--bg-alt);border:0;border-bottom:1px solid var(--card-border);box-shadow:none;backdrop-filter:none}
.header-container{max-width:none;min-height:77px;padding:0 42px}
.breadcrumbs{display:flex;align-items:center;gap:16px;font-size:13px;font-weight:500}
.breadcrumb-root{color:var(--text-muted);font-weight:400}.breadcrumb-slash{color:#aab2b5}
.header-note{font-size:12px;color:var(--text-muted);margin-right:12px}
.header-actions{gap:8px}
#theme-toggle,#languageIcon{height:34px;width:36px;border:1px solid var(--card-border);border-radius:6px;background:var(--bg-alt);color:var(--text);padding:0;min-height:34px;box-sizing:border-box;box-shadow:none;transform:none}
#languageIcon{font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:600}
#theme-toggle:before{width:15px;height:15px}
.language-menu{min-width:116px}.language-menu button{background:transparent;color:var(--text);padding:7px 12px;width:100%;justify-content:flex-start}
.menu-toggle{display:none}
body main{width:100%;max-width:1460px;margin:0 auto;padding:43px 42px 56px;gap:28px;align-items:stretch}
.page-header{max-width:none;padding:0 0 22px;align-items:flex-start;text-align:left;border-bottom:1px solid var(--card-border);gap:10px}
.page-header h1{background:none;-webkit-text-fill-color:var(--text);color:var(--text);font-size:34px;letter-spacing:-1.3px;font-weight:600}
.page-header p{font-size:15px;max-width:780px;line-height:1.65}
.split-layout,.editor-container,.editor-section,.converter-container{max-width:none;width:100%;min-width:0}
.split-layout{gap:20px;align-items:stretch}
.panel{min-width:0;box-shadow:none;border-radius:10px}
.panel-header{min-height:65px;font-size:14px;padding:14px 20px;background:var(--card-bg)}
.panel-body{min-width:0}
.panel-header select{font-size:14px}
/* Editor surfaces follow the selected theme, including output and gutters. */
:root{--editor-bg:#eef0f2;--editor-text:#20272c;--editor-gutter-bg:#e3e7ea;--editor-gutter-text:#70787f}
body.dark-mode{--editor-bg:#192226;--editor-text:#dfebe7;--editor-gutter-bg:#141d21;--editor-gutter-text:#7e979e}
.workspace textarea,.workspace #code-editor,.workspace #html-editor,.workspace #ascii-output,.workspace .code-container,.workspace .output-box{background:var(--editor-bg);color:var(--editor-text);max-width:100%}
.workspace .line-numbers{background:var(--editor-gutter-bg);color:var(--editor-gutter-text)}
.workspace .crontab-box{background:var(--editor-bg);color:var(--editor-text);border:1px solid var(--card-border)}
.workspace textarea::placeholder{color:var(--text-muted);opacity:1}
.workspace .converter-container{box-shadow:none;text-align:left}
.workspace .input-section{align-items:stretch}.workspace .input-section input[type=text]{max-width:none}
.workspace .styled-texts-section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.styled-text-container{min-width:0}.styled-text{min-width:0}.style-name{font-size:12px}
.workspace .dropzone{min-height:240px;border-width:1px;background:var(--bg);border-color:#91a99c}
.workspace .dropzone-icon{background-color:var(--primary)}
.workspace .features-section{padding:28px 0;background:none;border:0;border-top:1px solid var(--card-border);border-radius:0;text-align:left;margin-top:12px}
.features-section h2,.faq-section h2{background:none;-webkit-text-fill-color:var(--text);font-size:18px;font-weight:600;margin-bottom:24px;letter-spacing:-.4px}
.features-container{gap:28px;grid-template-columns:repeat(3,minmax(0,1fr))}
.feature-item{padding:0 20px 0 0;background:none;box-shadow:none;max-width:none;border-radius:0;border-right:1px solid var(--card-border);font-size:14px}
.feature-item:last-child{border:0}.feature-item:before,.feature-item:after,.crontab-box:before{display:none}.feature-item:hover{transform:none;box-shadow:none}.feature-item p{color:var(--text-muted)}.feature-item p:first-child{color:var(--text);font-weight:600;margin-bottom:7px}
.workspace .faq-section{padding:24px;background:var(--card-bg);text-align:left}
.faq-item{margin:0;padding:15px 0;border-radius:0;border-bottom:1px solid var(--card-border);box-shadow:none;background:none;font-size:14px}.faq-item:last-child{border:0}.faq-item:before{display:none}.faq-item summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;list-style:none}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:'+';font-size:20px;color:var(--text-muted)}.faq-item[open] summary:after{content:'−'}.faq-item summary p{margin:0!important;color:var(--text)!important}.faq-item>p{padding-top:12px;max-width:850px;color:var(--text-muted)}
.workspace footer{padding:22px 42px;background:none;text-align:left;font-size:12px}
.workspace .wrapper,.workspace .wrapper>.container,.workspace .tool-grid{width:100%;max-width:none;min-width:0}
.tool-page .tool-card{padding:14px;text-align:left;border-radius:10px;box-shadow:none}.tool-page .tool-card:before{display:none}.tool-page .tool-card:hover{transform:translateY(-2px);box-shadow:none}.tool-page .buttons-container{justify-content:flex-start}
@media(min-width:1500px){body main{padding-top:52px}}
@media(max-width:1150px){body.workspace{padding-left:218px}.sidebar{width:218px;padding-left:12px;padding-right:12px}.header-container{padding:0 28px}body main{padding:32px 28px}.header-note{display:none}.features-container{gap:16px}.feature-item{padding-right:10px}}
@media(max-width:800px){body.workspace{padding-left:0}.sidebar{transform:translateX(-100%);transition:transform .2s;width:244px;top:65px;box-shadow:15px 0 40px #0003}.nav-open .sidebar{transform:translateX(0)}.brand{padding-bottom:24px}.menu-toggle{display:inline-flex;background:transparent;color:var(--text);font-size:19px;min-height:34px;padding:3px 6px}.header-container{min-height:65px;padding:0 18px}.breadcrumbs{gap:12px}.breadcrumb-root,.breadcrumb-slash{display:none}.split-layout{grid-template-columns:1fr}body main{padding:30px 20px 40px}.page-header h1{font-size:29px}.features-container{grid-template-columns:1fr}.feature-item{max-width:none;padding:0 0 16px;border-right:0;border-bottom:1px solid var(--card-border)}.workspace .styled-texts-section{grid-template-columns:1fr}.workspace footer{padding:20px}.sidebar-bottom{padding-top:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.skip-link{position:fixed;top:-80px;left:260px;z-index:1000;padding:12px 18px;background:var(--card-bg);border:1px solid var(--primary);border-radius:6px}.skip-link:focus{top:12px}
body[data-tool="images_converter"] .converter-container{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px 30px;align-items:center}
body[data-tool="images_converter"] .upload-section{grid-row:1 / 5}body[data-tool="images_converter"] .format-selection{align-items:stretch}body[data-tool="images_converter"] .convert-btn{width:100%}
body[data-tool="crontab_generator"] .field-grid{grid-template-columns:repeat(5,minmax(0,1fr))}body[data-tool="crontab_generator"] .field-card{padding:16px 12px}body[data-tool="crontab_generator"] .field-card select{min-width:0;padding-left:10px;font-size:14px}
@media(max-width:1050px){body[data-tool="images_converter"] .converter-container{grid-template-columns:minmax(0,1fr) 200px}body[data-tool="crontab_generator"] .field-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){body[data-tool="images_converter"] .converter-container{display:flex;align-items:stretch;padding:20px}body[data-tool="images_converter"] .format-selection select{max-width:none}body[data-tool="crontab_generator"] .field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.skip-link{left:15px}}
