/* TRON Energy V11.1: three-area targeted visual refinement.
   Announcement, tab control, and service heading only.
   No API, order, wallet, translation, or database logic is changed. */

/* 1. Quiet, legible notice bar, with a light-touch action button. */
.notice-bar{
  display:flex;align-items:center;gap:16px;min-height:68px;
  padding:12px 17px;border:1px solid #304b5b;border-radius:15px;
  background:linear-gradient(105deg,#142838 0%,#102130 100%);
  box-shadow:inset 0 1px 0 rgba(224,255,247,.045);
}
.notice-bar .notice-icon{
  display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;
  border-radius:12px;background:#173c42;color:#a2f0dc;
  border:1px solid #356c69;box-shadow:none;
}
.notice-bar .notice-icon svg{width:21px;height:21px;stroke-linejoin:round}
.notice-bar .notice-body{display:flex;flex:1;min-width:0;align-items:center;gap:0;flex-direction:row}
.notice-bar .notice-marquee{width:100%;flex:1;min-width:0;overflow:hidden}
.notice-bar .notice-copy{font-size:13px;font-weight:500;line-height:1.5;color:#d1e2e8;letter-spacing:0;}
.notice-bar>a{
  display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;gap:7px;
  min-height:38px;padding:7px 13px;border-radius:10px;
  border:1px solid #477a76;background:rgba(35,91,84,.26);
  color:#c7fff1;font-size:12px;font-weight:700;line-height:1.2;
  text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s;
}
.notice-bar>a:hover{background:rgba(48,121,106,.32);border-color:#7ddbc3;color:#fff}
.notice-bar>a span{font-size:16px;line-height:1}

/* 2. Balanced two-way selector. No heavy gradients or enlarged emoji. */
.rent-area>.tabs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  height:auto;min-height:84px;gap:12px;padding:15px 22px 12px;
  background:#101e2b;border-bottom:1px solid #2b4654;
}
.rent-area>.tabs>.tab{
  display:flex;align-items:center;justify-content:center;gap:11px;min-width:0;max-width:none;
  margin:0!important;padding:15px 13px;min-height:54px;
  border:1px solid transparent;border-radius:13px;
  background:#152636;color:#b1c5d1;box-shadow:none;
  font-size:17px;font-weight:720;line-height:1.2;letter-spacing:0;
  text-shadow:none;transition:color .18s,border-color .18s,background .18s;
}
.rent-area>.tabs>.tab.active{
  background:linear-gradient(120deg,#1e4548,#204044);
  color:#f6fffc;border:1px solid #468d82;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(78,172,150,.07);
}
.rent-area>.tabs>.tab:not(.active):hover{background:#203544;color:#f5fcff;border-color:#385a68}
.rent-area>.tabs>.tab .tab-icon{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  font-size:20px;line-height:1;filter:none;text-shadow:none;
}
.rent-area>.tabs>#flashTab .tab-icon{color:#f5c966}
.rent-area>.tabs>#packTab .tab-icon{font-size:19px;color:#accbde}
.rent-area>.tabs .tab-indicator{display:none!important}

/* 3. Title/time strip: less visual noise, clearer hierarchy. */
.rent-content>.section-head{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-width:0;margin:0;padding-bottom:22px;border-bottom:1px solid #2b4857;
}
.rent-content>.section-head>div{flex:1;min-width:0}
.rent-content>.section-head .eyebrow{
  display:block;margin-bottom:11px;color:#8ddace;
  font-size:11px;font-weight:760;line-height:1.35;letter-spacing:.15em;
}
.rent-content>.section-head h2{
  display:flex;align-items:center;gap:13px;min-width:0;margin:0 0 5px;
  color:#f8fbff;font-size:clamp(24px,2.7vw,34px);line-height:1.2;
  letter-spacing:-.035em;font-weight:780;
}
/* V11.2 fix: remove duplicated title icon and keep heading clean. */
.rent-content>.section-head h2::before{content:none!important;display:none!important}
.rent-content>.section-head p{font-size:14px;line-height:1.65;color:#b7cad4}
.rent-content>.section-head .timer-pill{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  min-height:40px;max-width:45%;padding:8px 14px;
  border:1px solid #4a8c80;border-radius:999px;
  background:#1c443f;color:#d4fff1;
  font-size:12px;font-weight:700;line-height:1.35;text-align:center;
  white-space:normal;box-shadow:none;
}

@media(max-width:700px){
 .notice-bar{min-height:58px;gap:10px;padding:9px 11px;border-radius:12px}
 .notice-bar .notice-icon{flex-basis:33px;width:33px;height:33px;border-radius:9px}
 .notice-bar .notice-icon svg{width:18px;height:18px}
 .notice-bar .notice-copy{font-size:11.5px}
 .notice-bar>a{min-height:34px;padding:6px 10px;gap:3px;font-size:11px;border-radius:8px}
 .rent-area>.tabs{min-height:66px;padding:10px 12px;gap:8px}
 .rent-area>.tabs>.tab{min-height:47px;gap:7px;padding:10px 7px;font-size:clamp(12px,3.55vw,15px);border-radius:10px;overflow-wrap:anywhere}
 .rent-area>.tabs>.tab .tab-icon{font-size:17px}
 .rent-area>.tabs>#packTab .tab-icon{font-size:16px}
 .rent-content>.section-head{gap:12px;padding-bottom:20px}
 .rent-content>.section-head .eyebrow{font-size:9px;letter-spacing:.12em;margin-bottom:8px}
 .rent-content>.section-head h2{font-size:clamp(21px,5.9vw,27px);gap:8px;margin-bottom:6px}
 .rent-content>.section-head p{font-size:12px}
 .rent-content>.section-head .timer-pill{font-size:10.5px;min-height:34px;max-width:40%;padding:7px 9px}
}
@media(max-width:380px){
 .notice-bar{gap:7px;padding:8px}
 .notice-bar .notice-icon{flex-basis:30px;width:30px;height:30px}
 .notice-bar>a{font-size:10px;padding:5px 7px}
 .rent-area>.tabs{padding:9px 8px;gap:6px}
 .rent-area>.tabs>.tab{font-size:12px;gap:5px;padding:9px 5px}
 .rent-content>.section-head{gap:8px}
 .rent-content>.section-head h2{font-size:21px}
 .rent-content>.section-head .timer-pill{font-size:10px;padding:6px 7px}
}
@media(prefers-reduced-motion:reduce){
 .notice-bar .notice-marquee-track{animation:none!important}
}