*{box-sizing:border-box;} :root{--bg:#192752;--bg2:#242a31;--panel:#2a2a37;--panel2:#303f32;--input:#171b20;--input2:#1c2127;--border:#414952;--border2:#505963;--text:#d9dee5;--text2:#aeb6c0;--muted:#7f8994;--blue:#5b8def;--blue2:#769ff5;--blueDark:#314e80;--green:#61b88b;--yellow:#d5ad5c;--red:#d56b6b;--shadow:0 8px 24px rgba(0,0,0,.22);--radius:10px;} html,body{margin:0;padding:0;min-height:100%;} body{font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;color:var(--text);background:radial-gradient( circle at top,#1c0436 0,var(--bg) 42%,#080213 100% );line-height:1.6;} button,input,textarea,select{font:inherit;} h1{margin:0;padding:24px 20px 18px;color:#e7ebf0;font-size:25px; font-weight:600; letter-spacing:.04em;} h2,h3{color:#e0e5eb;font-weight:600;} .top-control-row{display:flex; align-items:center; gap:20px; flex-wrap:wrap;} #validation.notice{color:#facc15 !important; font-weight:bold;} main,.container,#app{width:min(1400px,96%); margin:0 auto;} #controls{margin:0 auto 18px; padding:20px; background:rgba(42,48,55,.94); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);} #controls label{color:var(--text2);font-size:14px;} input[type="text"],input[type="date"],input[type="file"],textarea,select{color:var(--text); background:var(--input); border:1px solid var(--border); border-radius:7px; outline:none; transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;} input[type="text"],input[type="date"],select{min-height:40px;padding:7px 11px;} textarea{width:100%; min-height:130px; padding:12px 14px; resize:vertical;line-height:1.55;} input[type="file"]{padding:8px 10px;} input::placeholder,textarea::placeholder{color:#69737e;} input:focus,textarea:focus,select:focus{border-color:var(--blue);background:#151a1f;box-shadow:0 0 0 2px rgba(91,141,239,.14);} button{min-height:40px; padding:8px 16px; color:#dfe6ef; background:#343b43; border:1px solid #4a535d; border-radius:7px; cursor:pointer; transition:background .18s ease,border-color .18s ease,transform .12s ease,box-shadow .18s ease;} button:hover{background:#3e4751; border-color:#606b77; box-shadow:0 3px 10px rgba(0,0,0,.18);} button:active{transform:translateY(1px);} button:disabled{color:#68717b; background:#292e34; border-color:#363d45; cursor:not-allowed; box-shadow:none;} #htmlBtn,#cssBtn,#jsBtn,#allBtn{color:#e8eef8; background:#34527f; border-color:#496b9e;} #htmlBtn:hover,#cssBtn:hover,#jsBtn:hover,#allBtn:hover{background:#3f6296; border-color:#6285b8;} #clearBtn{color:#eedede;background:#4e1721;border-color:#f00f31;} #clearBtn:hover{background:#514044; border-color:#75555b;} #dropZone{padding:28px 20px; margin:15px 0;text-align:center; color:var(--text2); background:linear-gradient( 135deg,rgba(10,61,3,0.801),rgba(11,161,11,0.356) );border:1px dashed #c7ced6;border-radius:10px; transition:background .2s ease,border-color .2s ease;} #dropZone:hover{background:rgba(91,141,239,.09); border-color:#7185a1;} #dropZone.dragover{background:rgba(91,141,239,.14); border-color:var(--blue2);} #fileInfo{margin:10px 0; color:var(--muted); font-size:13px;} .options,.settings,.control-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px;} .options{margin:14px 0;} .options label{display:flex; align-items:center; gap:6px;padding:6px 9px; color:var(--text2); background:#252b31; border:1px solid #39414a; border-radius:6px;} input[type="radio"],input[type="checkbox"]{accent-color:var(--blue);} pre,#resultCode,#sourceCode{font-family:"Cascadia Code","Consolas","SFMono-Regular",Menlo,monospace; font-size:13px; line-height:1.65;} #sourceCode,#resultCode{width:100%; min-height:500px; padding:18px; color:#cbd3dc; background:#02021f; border:2px solid #0c4105; border-left: none; border-radius:4px; border-top-left-radius: 0; border-bottom-left-radius: 0; white-space:pre; overflow:auto; tab-size:2;} pre{margin:0;} .file-button{color:#b5c01e;} #fileInput::file-selector-button{background:#114179f8; color:#fff; border:none; padding:8px 16px; border-radius:6px; cursor:pointer; font-weight:bold;} #fileInput::file-selector-button:hover{background:#0d47a1;} #sourceCode::-webkit-scrollbar,#resultCode::-webkit-scrollbar,pre::-webkit-scrollbar{width:10px; height:10px;} #sourceCode::-webkit-scrollbar-track,#resultCode::-webkit-scrollbar-track,pre::-webkit-scrollbar-track{background:#1b2025;} #sourceCode::-webkit-scrollbar-thumb,#resultCode::-webkit-scrollbar-thumb,pre::-webkit-scrollbar-thumb{background:#424b55; border-radius:6px;} #sourceCode::-webkit-scrollbar-thumb:hover,#resultCode::-webkit-scrollbar-thumb:hover,pre::-webkit-scrollbar-thumb:hover{background:#56616d;} #resultTab,#sourceTab{display:inline-block; margin:0 4px 0 0;padding:9px 18px; color:#aeb7c1; background:#292f36; border:1px solid #3e464f; border-bottom:none; border-radius:7px 7px 0 0;} #resultTab:hover,#sourceTab:hover{color:#dce3ea; background:#333a42;} #resultTab.active,#sourceTab.active{color:#e7edf5; background:#15191e; border-color:#4b5662;} #resultInfo{margin:10px 0; padding:10px 13px; color:var(--text2); background:#252b31; border:1px solid #3a424b; border-radius:7px; font-size:13px;} #validation{margin-top:14px; padding:13px 15px; color:#bdc6cf; background:#242a30; border:1px solid #3b444d; border-left:3px solid #596979; border-radius:7px;font-size:13px; line-height:1.7;} #validation .success,.validation-success{color:#9ed4b8;} #validation .warning,.validation-warning{color:#d8bd7b;} #validation .error,.validation-error{color:#df9999;} .line-count{margin:8px 0; padding:8px 12px; color:#aeb7c0; background:#22282e; border:1px solid #384049; border-radius:6px; font-size:13px;} #downloadBtn{color:#dcebe4; background:#315744; border-color:#47715a;} #downloadBtn:hover{background:#3b684f; border-color:#5b896c;} hr{border:0; border-top:1px solid #394149; margin:20px 0;} small,.help,.description,.hint{color:var(--muted); font-size:12px;} .error,.error-message{color:#e09a9a;} .success,.success-message{color:#9ed4b8;} .warning,.warning-message{color:#d8bd7b;} .tabs{display:flex; align-items:center; gap:8px;} .tabs .tab{flex:0 0 auto;} .tabs .result-info{flex:1; margin-left:8px;} .syntax-check-btn.notice{ background:#6f65f7; color:#fcfdf5; text-shadow: 2px 2px 3px #000; font-weight:bold; animation:pulse-check 1.2s infinite;} @keyframes pulse-check{0%{opacity:1;} 50%{opacity:.65;}100%{opacity:1;}} @media(max-width:800px){h1{padding:18px 14px; font-size:21px;} p{color:#f1cbcb;} #controls{padding:14px;} .options,.settings,.control-row{flex-direction:column; align-items:stretch;} button{width:100%;} #sourceCode,#resultCode{min-height:400px; font-size:12px;}} ::selection{color:#eef4ff; background:#3c5d8e;} .code-container {display: flex; background-color: #1e1e1e; margin-bottom: 20px; border-radius: 4px; overflow: hidden; font-family: monospace; font-size: 14px;line-height: 1.532; box-sizing: border-box;} .line-numbers {padding-top: 10px;padding-bottom: 8px;padding-left: 8px;padding-right: 8px; border:2px solid #0c4105; border-radius:4px; border-top-right-radius: 0; border-bottom-right-radius: 0; background-color: #1e1e1e;color: #22d6c7; text-align: right; user-select: none; border-right: 1px solid #333; white-space: pre; line-height: 1.532; font-family: inherit; font-size: 14px;box-sizing: border-box;} .code-view {flex: 1; margin: 0 !important; padding: 8px 12px !important; overflow-x: auto; background-color: transparent !important; color: #d4d4d4; line-height: 1.5; font-family: inherit; font-size: inherit; white-space: pre; box-sizing: border-box;} footer{padding:4px 0; text-align:center; color:var(--text2); font-size:14px;} .syntax-tag {color: #569cd6;} .syntax-attr {color: #9cdcfe;} .syntax-selector {color: #d7ba7d;} .syntax-property {color: #9cdcfe;} .syntax-keyword {color: #c586c0;} .syntax-string {color: #ce9178;} .syntax-number {color: #b5cea8;} .syntax-boolean {color: #569cd6;} .syntax-function {color: #dcdcaa;} .syntax-comment {color: #6a9955;}