:root{--transition-fast:0.15s ease;--transition-normal:0.25s ease;--radius-sm:4px;--radius-md:6px;--header-height:48px;--footer-height:48px;--layout-px:24px;--font-mono:'IBM Plex Mono',monospace;}
:root[data-theme="dark"]{--bg-app:#000000;--bg-window:#0D0D0D;--bg-editor:#0D0D0D;--border-color:#2D2D2D;--text-main:#B0B0B0;--text-muted:#555555;--text-bright:#FFFFFF;--text-accent:#FFFFFF;--glass-header:rgba(255,255,255,0.05);--bg-footer:#111111;}
:root[data-theme="light"]{--bg-app:#F0F0F0;--bg-window:#FFFFFF;--bg-editor:#FFFFFF;--border-color:#D4D4D4;--text-main:#3D3D3D;--text-muted:#A0A0A0;--text-bright:#000000;--text-accent:#000000;--glass-header:rgba(255,255,255,0.90);--bg-footer:rgba(255,255,255,0.90);}
*{box-sizing:border-box;margin:0;padding:0;scrollbar-width:thin;scrollbar-color:var(--border-color) transparent;}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background-color:var(--border-color);border-radius:var(--radius-sm);}
::-webkit-scrollbar-thumb:hover{background-color:var(--text-muted);}
body,input,button{font-family:var(--font-mono);}
body{background:var(--bg-app);color:var(--text-main);font-size:1em;min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:24px;overflow-x:hidden;transition:background var(--transition-normal);}
h1{font-size:1.75em;font-weight:700;color:var(--text-bright);scroll-margin-top:10px;}
@media (max-width:768px){body{padding:0;}}
.app-container{width:100%;max-width:650px;background:var(--bg-window);display:flex;flex-direction:column;transition:background var(--transition-normal),border var(--transition-normal);position:relative;}
.site-header{height:var(--header-height);background:var(--glass-header);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 var(--layout-px);user-select:none;z-index:10;backdrop-filter:blur(12px);}
.logo{display:flex;align-items:center;text-decoration:none;font-size:1em;font-weight:600;color:var(--text-main);transition:color var(--transition-fast);}
.logo:hover{color:var(--text-bright);}
.btn-theme-toggle{background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-main);transition:color var(--transition-fast);outline:none;}
.btn-theme-toggle:hover{color:var(--text-bright);}
.btn-theme-toggle .icon{width:14px;height:14px;}
html[data-theme="dark"] .theme-icon-sun{display:block;}
html[data-theme="dark"] .theme-icon-moon{display:none;}
html[data-theme="light"] .theme-icon-moon{display:block;}
html[data-theme="light"] .theme-icon-sun{display:none;}
:root:not([data-theme="light"]) .theme-icon-sun{display:block;}
:root:not([data-theme="light"]) .theme-icon-moon{display:none;}
.main-content{flex:1;display:flex;position:relative;}
.tool-section{flex:1;display:flex;flex-direction:column;background:var(--bg-editor);position:relative;}
.container{flex:1;padding:24px var(--layout-px);font-size:1em;line-height:1.65;}
@media (max-width:480px){.container{padding:14px var(--layout-px);}}
.tool-title{font-size:1.55em;font-weight:700;color:var(--text-bright);margin-bottom:24px;text-align:center;}
.url-row{display:flex;align-items:stretch;margin-bottom:22px;}
.input-box{position:relative;flex:1;}
.url-row input{width:100%;background:transparent;border:2px solid var(--border-color);border-radius:var(--radius-md) 0 0 var(--radius-md);padding:15px 52px 15px 18px;font-size:1em;color:var(--text-bright);outline:none;}
.url-row input::placeholder{color:var(--text-main);font-size:1em;}
.btn-clear{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:transparent;border:none;color:var(--text-main);font-size:1.1em;line-height:1;display:none;align-items:center;justify-content:center;cursor:pointer;transition:color var(--transition-fast);z-index:5;}
.btn-clear:hover{color:var(--text-bright);}
.btn-start{background:transparent;border:2px solid var(--border-color);border-left:none;border-radius:0 var(--radius-md) var(--radius-md) 0;padding:0 24px;display:flex;align-items:center;justify-content:center;color:var(--text-main);font-size:1em;font-weight:600;cursor:pointer;transition:color var(--transition-fast);margin-left:-2px;}
.btn-start:hover{color:var(--text-accent);}
.btn-start:disabled{opacity:0.6;cursor:not-allowed;}
.iframe-container{margin-top:16px;margin-bottom:24px;}
.iframe-body{width:100%;background:transparent;display:flex;flex-direction:column;}
.iframe-body iframe{width:100%;min-height:400px;border:none;display:block;}
.iframe-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:100%;padding:24px 0;background:transparent;}
.spinner{width:28px;height:28px;border:3px solid var(--border-color);border-top-color:var(--text-accent);border-radius:50%;animation:spin 0.8s linear infinite;}
.loader-text{font-size:1em;font-weight:500;color:var(--text-main);letter-spacing:0.5px;}
@keyframes spin{to{transform:rotate(360deg);}}
@media (max-width:768px){.iframe-body iframe{min-height:360px;}}
@media (max-width:480px){.iframe-body iframe{min-height:300px;}}
.hidden{display:none !important;}
.site-info{margin-top:42px;display:flex;flex-direction:column;gap:36px;}
.info-section{display:flex;flex-direction:column;gap:12px;}
.section-title{font-size:1.35em;font-weight:700;color:var(--text-bright);border-bottom:1px solid var(--border-color);padding-bottom:8px;margin:0;}
.info-body{font-size:1em;line-height:1.6;color:var(--text-main);}
.usage-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
.usage-steps li{display:flex;align-items:baseline;gap:10px;}
.step-num{font-weight:bold;color:var(--text-accent);}
.features-list{display:flex;flex-direction:column;gap:12px;margin-top:12px;}
.feature-item{padding-bottom:12px;border-bottom:1px solid var(--border-color);}
.feature-item:last-child{border-bottom:none;padding-bottom:0;}
.feature-content{margin:0;font-size:1em;line-height:1.65;color:var(--text-main);display:flex;align-items:baseline;gap:10px;}
.feature-icon{color:var(--text-accent);flex-shrink:0;text-align:center;}
.feature-title{font-size:1.15em;font-weight:700;color:var(--text-bright);margin-right:6px;}
.feature-detail{color:var(--text-main);}
.faq-list{display:flex;flex-direction:column;gap:16px;}
.faq-item{display:flex;flex-direction:column;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--border-color);}
.faq-item:last-child{border-bottom:none;padding-bottom:0;}
.site-footer{height:var(--footer-height);background:var(--bg-footer);border-top:1px solid var(--border-color);padding:0 var(--layout-px);display:flex;align-items:center;justify-content:space-between;font-size:0.85em;color:var(--text-main);user-select:none;}
.footer-section{display:flex;align-items:center;gap:16px;}
.footer-link{color:var(--text-main);text-decoration:none;font-weight:500;transition:color var(--transition-fast);}
.footer-link:hover{color:var(--text-bright);}
.footer-separator{color:var(--text-main);user-select:none;}
.legal-content{margin-top:42px;display:flex;flex-direction:column;gap:36px;}
.legal-section{display:flex;flex-direction:column;gap:12px;}
.legal-title{font-size:1.35em;font-weight:700;color:var(--text-bright);border-bottom:1px solid var(--border-color);padding-bottom:8px;margin:0;}
.legal-body{font-size:1em;line-height:1.6;color:var(--text-main);}
.legal-body p+p,.legal-body .legal-list+p{margin-top:10px;}
.legal-list{list-style:none;padding:0;margin:8px 0 0 0;display:flex;flex-direction:column;gap:6px;}
.legal-list li{display:flex;gap:10px;color:var(--text-main);}
.legal-list .list-marker{color:var(--text-accent);font-weight:bold;flex-shrink:0;}
@media (max-width:480px){.tool-title{font-size:1.35em;margin-bottom:16px;}.section-title,.legal-title{font-size:1.15em;}.feature-title{font-size:1.05em;}}