html,body{  height: auto;overflow: auto;margin:0;background:#eee; color:#333; font-size:16px;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
.layout{display:flex;height:100vh}
.panel{height:100vh;overflow-y:auto;overflow-x:hidden}

/* ==================================================================================================== */
.sidebar{width:180px;background:#fff;border-right:1px solid #eaecef;transition:margin-left .3s}
    .sidebar.closed{margin-left:-180px}
    .sidebar-nav { display:flex; flex-direction:column; gap:5px; margin:10px 0 0 0;color:#666; }
    .sidebar-nav a { display:flex; align-items:center; padding:8px 12px; border-radius:10px; text-decoration:none; gap:8px; 
        color:#666; font-size:95%; transition:all .35s ease; }
    .sidebar-nav a:hover { background:#f2f2f2; color:#666;}
    .sidebar-nav a.active { background:#f2f2f2; position:relative; color:#666;}
    .sidebar-nav a.active::after { content:""; width:6px; height:6px; border-radius:50%; 
     background:#888; position:absolute; right:15px; }
    .sidebar-nav .disabled{opacity:.45;cursor:not-allowed;display:flex;align-items:center;gap:10px;padding:12px 16px}
    .innerbox1{margin:70px 20px 0 20px;}

    .menu-toggle{position:fixed;top:14px;left:14px;width:34px;height:34px;border-radius:8px;border:none; 
        display: flex;align-items: center;justify-content: center; background:#fff; color:#111; 
        box-shadow:0 2px 4px rgba(0,0,0,.1);font-size:150%;cursor:pointer;z-index:2000}
     .menu-toggle:hover { box-shadow:0 2px 4px rgba(0,0,0,.45);}

    .material-symbols-rounded {font-size: 24px;color: #666;font-variation-settings: "FILL" 0, "wght" 400, "GRAD" -25, "opsz" 24;}

/* ==================================================================================================== */
    .lettercolor {font-size: 90%;margin: 0 6px 0 0;display: inline-flex;font-weight: 600;
    border-radius: 6px; padding: 3px 10px;vertical-align: text-bottom; vertical-align: 0em;}
    .lettercolor.wood {background: #0D9857;color: #fff;}
    .lettercolor.fire {background: #F94315;color: #fff;}
    .lettercolor.earth {background: #BB6C43;color: #fff;}
    .lettercolor.gold {background: #f5bf0f;color: #333;}
    .lettercolor.water {background: #378AFF;color: #fff;}


/* =============================================== h1 h2================================================= */
h1 {display: inline-flex;align-items: center;gap: 3px;color: #333;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,Arial, sans-serif;font-size: 105%;}
h1 .material-symbols-rounded.water-icon {color: #444;font-variation-settings: "FILL" 1, "wght" 400, "opsz" 20;}
h2 {margin: 0 0 12px 0;font-weight: 700;display: flex;align-items: center;gap: 4px;font-size: 110%;color: #333;}
h2 .material-symbols-rounded.trendup, 
h2 .material-symbols-rounded.hot,
h2 .material-symbols-rounded.trenddown, h2 .material-symbols-rounded.black, 
h2 .material-symbols-rounded.gold {font-size: 130%;margin-right: 5px;display: inline-flex;
    border-radius: 6px;padding: 2px;vertical-align: -0.2em;font-variation-settings: "FILL" 1, "wght" 400, "opsz" 20;}
h2 .material-symbols-rounded.trendup  { background: #378AFF; color: #fff;}
h2 .material-symbols-rounded.trenddown { background: #0D9857; color: #fff;}
h2 .material-symbols-rounded.gold     { background: #f5bf0f; color: #000;}
h2 .material-symbols-rounded.hot     { background: #F94315;color: #fff; }
h2 .material-symbols-rounded.black     { background: #333;color: #fff; }

/* =============================================== NEW ================================================= */
.subbar{width:190px;padding:0 10px;background: #f2f5fa;}
    .sector-tabs{display:flex;gap:13px;margin:120px 0 0 0;flex-wrap:wrap}

    .tab-btn{padding:6px 12px;border-radius:8px;border:0px solid transparent;
        font-size:90%;font-weight:500;cursor:pointer;text-align:left;background:#fff;color: inherit; text-decoration: none;}
    .tab-btn:hover {background: #777;color: #fff;}
    .tab-btn.active {background: #777;color: #fff;  text-decoration: none;}
    .tab-btn a,.tab-btn a:visited,.tab-btn a:hover,.tab-btn a:active {color: #fff;}
    
/* ============================== index many numbers Statistics Block =================================== */
.stats-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:16px;margin:0px 0 16px 0; max-width: 1075px;}
.stat-card{background:linear-gradient(135deg,#fff,#f7faff);padding:16px 16px;border-radius:14px;
    display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
    box-shadow:0 4px 14px rgb(0 0 0 / .05);transition:transform .15s ease,box-shadow .15s ease}
.stat-card:hover{transform:translateY(-4px);box-shadow:0 8px 11px rgb(0 0 0 / .1)}
.stat-number{font-size:280%;font-weight:700;color:#525252;margin-bottom:6px}
.stat-hour::after{content:"h";font-size:70%;margin-left:3px}
.stat-label{font-size:90%;color:#666;letter-spacing:.02em;margin-bottom:10px}

/* ==================================================================================================== */
.mainarea{flex:1;min-width: 0;min-height: 0;overflow-y: auto; padding:18px; }

    .sector-desc{font-size:90%;color:#333;margin:6px 18px 25px 0;font-weight: 400;;}
    .stockwall{max-width:700px;padding:15px 0 0 20px;background:#fff;border-radius:10px;color:#666;}
    .sector-panel{display:none}
    .sector-panel.active{display:block}
    
    .stock-header{display:grid;grid-template-columns:1.3fr 1fr repeat(5,0.8fr);padding:4px 0;font-size:80%;
        text-transform:uppercase;color:#666;border-bottom:1px solid #e6e8ec}
    .stock-header div,.stock-row div{text-align:center}
    .stock-header div:first-child,.stock-row div:first-child{text-align:left}
    .stock-header div[data-order="asc"]{color:#378AFF}
    .stock-header div[data-order="desc"]{color:#BB6C43}
    .stock-row{display:grid;grid-template-columns:1.3fr 1fr repeat(5,0.8fr);padding:12px 2px;
        align-items:center;font-size:90%;border-bottom:1px solid #f0f1f3;transition:.15s}
    .stock-row:hover{background:#fafbfc}
    .stock-row div:first-child{font-weight:500;}
    .stock-row div:last-child{}
    .stock-link{display:block;text-decoration:none;color:inherit;}
      
    .rating{display:inline-block;font-size:90%;font-weight:600;min-width:30px; 
        border-radius:6px;margin:auto;padding:3px 8px;text-align:center;}        
    .data-update-time {margin: 10px 0 10px 0;font-size: 80%;color: #666;letter-spacing: 0px;text-align: left;}

    .menu-icon.desktop-only { display: inline-block; }
    .menu-icon.mobile-only  { display: none; }

.box-row{display:flex;gap:16px;flex-wrap:wrap; margin:0 0 16px 0;height:auto;}
.home52w { box-sizing: border-box; background: #fff; border-radius: 12px; padding: 12px 16px;
        box-shadow: 0 1px 4px rgba(0,0,0,.1); flex: 1 1 calc(50% - 16px); height:auto; max-width: 530px; }
.top10list { box-sizing: border-box; background: #fff; border-radius: 12px; padding: 12px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,.1); flex: 1 1 100%; height:auto; max-width: 256px; }
        
    .sector-summary{display:flex;flex-direction:column;gap:10px;margin-top:20px}
    .sector-row{display:grid;grid-template-columns:162px 1fr;align-items:center;gap:10px}
    .sector-name{font-size:85%;text-align:right}
    .bar-bg{position:relative;height:12px;border-radius:10px;background:repeating-linear-gradient(to right,rgba(0,0,0,.2) 0 1px,transparent 1px 25%) #f0f0f09a;overflow:visible}
    .bar{position:relative;height:100%;border-radius:6px}
    .bar::after{content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.3)}
    .dot-percent{position:absolute;right:-40px;top:50%;transform:translateY(-50%);font-size:80%;font-weight:400;white-space:nowrap}
    .bar-high{background:#f5bf0f9a}
    .bar-high::after{background:#f5bf0f}
    .bar-low{background:#378AFF9a}
    .bar-low::after{background:#378AFF}

    .list-box{margin-top:12px}
    .list-row{display:grid;grid-template-columns:26px 1fr 55px;align-items:center;padding:10px 2px;
        border-bottom:1px dashed #ddd;font-size:90%;transition:.2s}
    .list-row:hover{background:#f8f8f8}
    .list-row span:first-child{color:#999;font-weight:400;font-size:85%;}
    .list-row span:last-child{color:#666;font-size:90%;}
    .list-row:last-child{border-bottom:0px;}
    .list-row a{color:#111;font-weight:600}
    .list-row a:hover{color:#378AFF}

    .stockwall{max-width:740px;padding:15px 0 0 20px;background:#fff;border-radius:10px;color:#666;position:relative;}

    .search-container{margin:10px 20px 20px 0;position:relative;}
    #stockSearch{width:100%;padding:8px 12px;border-radius:8px;border:1px solid #ddd;font-size:90%;}
    .autocomplete-list{position:absolute;top:38px;left:0;width:100%;background:#fff;
      border:1px solid #ddd;border-radius:8px;max-height:260px;overflow-y:auto;
      box-shadow:0 4px 10px rgba(0,0,0,.08);z-index:999;}
    .autocomplete-item{padding:8px 12px;font-size:90%;cursor:pointer;
      display:flex;justify-content:space-between;color:#333;}
    .autocomplete-item:hover{background:#f2f2f2;}
    .autocomplete-item span{color:#999;font-size:85%;}

/* ========================================================= Search btn====== */
    .search-btn{padding:8px 12px;color:#666;border:none;align-items:center;background:#fff;gap:8px; font-size:95%;
        border-radius:10px;text-decoration:none; display:flex; align-items:center; cursor:pointer;transition:all .2s ease}
    .search-btn:hover{ background:#f2f2f2; color:#666;}
    .search-overlay{position:fixed;inset:0;background:rgb(0 0 0 / .6);backdrop-filter:blur(6px);
    display:none;align-items:flex-start;justify-content:center;padding-top:15vh;z-index:9999}
    .search-overlay.active{display:flex}
/* ========================================================= Search box====== */
    .search-box-wrapper{width:400px;max-width:90%;background:#fff;border-radius:12px;padding:25px;
    position:relative;animation:fadeIn .15s ease-out}
    @keyframes fadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
    #searchInput{width:82%;padding:12px 12px;font-size:95%;border:none;outline:none;background:#f4f4f4;
        border-radius:10px;transition:all .2s ease}
    #searchInput:focus{background:#fff;box-shadow:0 0 0 2px #666 inset}
    #closeSearch{position:absolute;top:30px;right:20px;border:none;background:none;font-size:140%;color:#888;cursor:pointer}
    #closeSearch:hover{color:#000}.search-result{margin-top:16px;max-height:500px;overflow-y:auto;display:none}
    .search-item{padding:10px 14px;font-size:90%;border-radius:10px;cursor:pointer;transition:background .15s ease}
    .search-item:hover{background:#eee}
    .search-item mark{background:#f5bf0f;padding:2px 2px;}

/* =========================================================Info Page（/info）==================================== */
.info-box { box-sizing: border-box; background: #fff; border-radius: 12px; padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,.1); flex: 1 1 100%;  max-width: 740px; min-height:90%; }
.info-box a,.info-box a:visited,.info-box a:hover,.info-box a:active {color: #000;text-decoration: none;}
.info-card {max-width: 720px;margin: 0 auto;background: #fff;border-radius: 18px; height: auto;}
.info-desc {margin: 20px 0 10px 0;font-size: 90%;line-height: 1.5;color: #666;}
.info-terms {margin: 10px 0;font-size: 90%;line-height: 1.4;color: #666;}
.info-main {margin: 30px 0; font-size: 95%;color: #666;}
.info-main p {margin: 0 0 10px 0;padding-left: 10px;}
.info-remark {margin-top: 20px;padding-top: 20px;padding-left: 10px;font-size: 70%;border-top: 1px dashed #ddd;color: #666;}



/* ================================================================ footer =========================== */ 
.site-footer{margin-top:10px;border-top:1px solid #eaecef;font-size:80%;color:#666}
.footer-inner{margin:auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.footer-links{display:flex;flex-wrap:wrap;gap:15px}
.footer-links a{color:#666;text-decoration:none;transition:.2s}
.footer-links a:hover{ color:#111}

/* ================================================================ mobile =========================== */ 
@media(max-width:600px){
.layout{  display: block;height: auto;overflow: visible;}
        .sidebar{margin-left:-200px; position:fixed;top:0;left:0;height:100vh;z-index:1000}
        .sidebar.closed{margin-left:0}
            .industry-tabs{flex:0 0 100%;max-width:100%;padding:0 20px 0 30px;}

.subbar{width:100%;height:auto;padding:0 20px;}
            .industry-tabs{margin:60px 0 10px 0;}
            .info-box {margin:60px 0 10px 0; }
.mainarea{height:auto; overflow:visible;min-width: 0;min-height: 0; padding:10px; margin:10px 10px}
.box-row{margin:0px 0 0 0;}
.home52w { max-width: 100%; }
.top10list { max-width: 100%; }
            .stats-section{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;margin:10px 0; max-width:100%;}
            .stat-card{padding:20px 20px}
            .stat-number{font-size:220%;font-weight:700;}
            .stat-hour::after{font-size:70%;margin-left:1px;}
            .stat-label{font-size:90%;margin-bottom:4px;}
                .design-box{max-width:100%;}
                .design-list{max-width:100%;}
                .setting-box{max-width:100%;margin:50px 0 0 0;}
        .sector-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:60px 20px 20px 15px}
        .mainarea{flex:1;min-width: 0;min-height: 0;overflow-y: auto; padding:0; }

        .label-2line{width:2em;line-height:1.2;word-break:break-all;margin:auto;}
        .stock-header{align-items:center; font-size:90%;}
        .stock-header div,.stock-row div{font-size:90%;}
        .stock-header{display:grid;grid-template-columns:1.3fr 0.8fr repeat(4,0.6fr) 0.7fr;}
        .stock-row{display:grid;grid-template-columns:1.3fr 0.8fr repeat(4,0.6fr) 0.7fr;padding:10px 6px 10px 0px;font-size:90%;}
        .menu-icon.desktop-only { display: none; }
        .menu-icon.mobile-only  { display: inline-block; }
        .menu-toggle:hover {  background:#eee;}

        .search-box-wrapper{width:300px;}
        .search-overlay{padding-top:12vh}
        .stats-section{margin:50px 0 16px 0;}
        .footer-links{gap:8px}

}

/* ================================================================ tablet =========================== */ 
@media (min-width:601px) and (max-width:1024px) {
.layout{  display: block;height: auto;overflow: visible;}
        .sidebar{margin-left:-200px; position:fixed;top:0;left:0;height:100vh;z-index:1000}
        .sidebar.closed{margin-left:0}
            .industry-tabs{flex:0 0 100%;max-width:100%;padding:0 20px 0 30px;}

.subbar{width:100%;height:auto;padding:0 20px;}
            .industry-tabs{margin:60px 0 10px 0;}
            .info-box {margin:60px 0 10px 0; }
.mainarea{height:auto; overflow:visible;min-width: 0;min-height: 0; padding:30px; margin:10px 10px}
.box-row{margin:0px 0 0 0;}
.home52w {max-width: 48%; }
.top10list {max-width: 48%;}
            .stats-section{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;margin:10px 0; max-width:98%;}
            .stat-card{padding:16px 16px}
            .stat-number{font-size:240%;font-weight:700;}
            .stat-hour::after{font-size:70%;margin-left:1px;}
            .stat-label{font-size:90%;margin-bottom:4px;}
                .design-box{max-width:100%;}
                .design-list{max-width:100%;}
                .setting-box{max-width:100%;margin:50px 0 0 0;}
        .sector-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:60px 20px 20px 15px}
        .mainarea{flex:1;min-width: 0;min-height: 0;overflow-y: auto; padding:0; }

        .label-2line{width:2em;line-height:1.2;word-break:break-all;margin:auto;}
        .stock-header{align-items:center; font-size:90%;}
        .stock-header div,.stock-row div{font-size:90%;}
        .stock-header{display:grid;grid-template-columns:1.3fr 0.8fr repeat(4,0.6fr) 0.7fr;}
        .stock-row{display:grid;grid-template-columns:1.3fr 0.8fr repeat(4,0.6fr) 0.7fr;padding:10px 6px 10px 0px;font-size:90%;}
        .menu-icon.desktop-only { display: none; }
        .menu-icon.mobile-only  { display: inline-block; }
        .menu-toggle:hover {  background:#eee;}

        .search-box-wrapper{width:300px;}
        .search-overlay{padding-top:12vh}

        .stats-section{margin:50px 0 16px 0;}
        .footer-links{gap:8px}

}