/* Trimmed copy of skymate-moon-20261110/moon.css: tools index + calendar only. */
/* ---------- index of tools ---------- */
.sm-index{margin:26px 0 8px}
.sm-index-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.sm-tool{display:grid;gap:6px;align-content:start;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(12,17,39,.5);color:var(--text);text-decoration:none;transition:border-color .2s,transform .2s}
.sm-tool:hover{border-color:rgba(255,212,138,.45);transform:translateY(-2px)}
.sm-tool svg{width:22px;height:22px;stroke:var(--sun);fill:none;stroke-width:1.6}
.sm-tool b{font:600 14.5px/1.3 var(--f-head)}
.sm-tool small{color:var(--dim);font-size:12px;line-height:1.5}
.sm-tool[aria-disabled]{opacity:.55;pointer-events:none}
.sm-soon{justify-self:start;font-size:11px;padding:1px 8px;border-radius:99px;border:1px solid var(--line-2);color:var(--muted)}


/* ---------- calendar (SKYMATE_CAL_V2): month grid like thatskyapplication, bars placed by local time ---------- */
#calendar .panel-head{flex-wrap:wrap;gap:12px}
.sm-nav{display:flex;gap:6px;align-items:center}
.sm-nav button{min-width:38px;height:36px;padding:0 12px;border-radius:12px;border:1px solid var(--line-2);background:var(--glass-2);color:var(--text);font:600 14px var(--f-head);cursor:pointer}
.sm-nav button:disabled{opacity:.35;cursor:default}
.sm-nav .sm-today{background:var(--sunset);color:#2a1300;border-color:transparent}
.sm-cal-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:4px 0 12px;flex-wrap:wrap}
.sm-cal-top h3{margin:0;font:600 19px var(--f-head)}
.sm-dows{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center;font-size:12px;color:var(--dim);padding-bottom:6px}
.sm-weeks{border:1px solid rgba(255,255,255,.09);border-radius:12px;overflow:hidden;background:#0d1322}
.sm-wk{--hd:30px;--ln:20px;position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));height:calc(var(--hd) + var(--lanes) * var(--ln) + 8px);min-height:72px;border-top:1px solid rgba(255,255,255,.07)}
.sm-wk:first-child{border-top:0}
.sm-cell{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;height:100%;padding:7px 0 0;border:0;border-inline-start:1px solid rgba(255,255,255,.07);border-radius:0;background:transparent;color:#c9d1e3;font:inherit;text-align:center;cursor:pointer;transition:background .15s}
.sm-cell:first-child{border-inline-start:0}
.sm-cell:hover{background:rgba(255,255,255,.03)}
.sm-cell b{font:500 12.5px var(--f-num)}
.sm-cell.out b{opacity:.38}
.sm-cell em{position:absolute;bottom:2px;inset-inline-end:5px;font:600 10.5px var(--f-num);color:#aeb8d6;font-style:normal}
.sm-cell.today{background:rgba(88,99,240,.16);box-shadow:inset 0 0 0 2px #5a63e6}
.sm-cell.sel:not(.today){background:rgba(255,255,255,.06)}
.sm-bar{position:absolute;z-index:1;pointer-events:none;height:calc(var(--ln) - 3px);display:flex;align-items:center;gap:4px;min-width:4px;padding:0 6px;box-sizing:border-box;border-radius:4px;font:600 11.5px/1 var(--f-body);color:#fff;white-space:nowrap;overflow:hidden}
.sm-bar>span{overflow:hidden;text-overflow:ellipsis}
.sm-bar svg,.sm-sum svg{width:11px;height:11px;flex:none;color:#e8ecf7}
.sm-bar.cs{border-start-start-radius:0;border-end-start-radius:0}
.sm-bar.ce{border-start-end-radius:0;border-end-end-radius:0}
.sm-bar.k-shard svg{color:#8d97ad}.sm-bar.k-shard.red svg,.sm-sum .k-shard.red+svg{color:#ff5470}
/* colours follow the source calendar */
.k-season{background:#0a5d8f}.k-event{background:#a3123c}.k-double_hearts{background:#8b1a9b}
.k-double_seasonal_light,.k-double_treasure_candles{background:#9a6a06}.k-radiance{background:#a87b0a}.k-community{background:#15803d}
.k-travelling_spirit{background:#0f766e}.k-returning_spirits{background:#0369a1}
.k-update{background:#3b34b5}.k-maintenance{background:#475569}
.k-shard{background:#323d52}.k-nesting{background:#b25e09}.k-iss{background:#1f49c4}.k-eye_of_eden{background:#a3141b}
.k-aviary_fireworks{background:#b8124f}.k-other{background:#4b5563}
/* Active / Upcoming */
.sm-sum{display:grid;grid-template-columns:1fr 1fr;margin-top:14px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:#0d1322}
.sm-sum>div{padding:14px 16px;min-width:0}
.sm-sum>div+div{border-inline-start:1px solid rgba(255,255,255,.09)}
.sm-sum h5{margin:0 0 10px;font:600 11.5px var(--f-body);letter-spacing:.06em;color:#8f9ab5;text-transform:uppercase}
.sm-sum ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sm-sum li{display:flex;align-items:center;gap:8px;font-size:14px;min-width:0}
.sm-sum li>i{width:9px;height:9px;border-radius:50%;flex:none}
.sm-sum li b{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm-sum time{font:12px var(--f-num);color:#8f9ab5;white-space:nowrap}
.sm-sum .k-shard.red+svg{color:#ff5470}
/* day details */
.sm-detail{margin-top:14px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(12,17,39,.45)}
.sm-detail h4{margin:0 0 10px;display:flex;align-items:center;gap:10px;font:600 16px var(--f-head)}
.sm-detail h4 span{font-size:11.5px;padding:2px 10px;border-radius:99px;background:var(--sunset);color:#2a1300}
.sm-detail ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sm-detail li{display:flex;align-items:flex-start;gap:10px}
.sm-detail li>i{width:10px;height:10px;border-radius:3px;flex:none;margin-top:7px}
.sm-detail b{display:block;font-weight:600;font-size:14.5px}
.sm-detail small{color:var(--muted);font-size:12.5px}
.sm-none{margin:0;color:var(--muted);font-size:13.5px}
.sm-src{margin:10px 2px 0;font-size:12px;color:var(--dim)}
/* the new design does not carry the creator cards */
.creator-credit{display:none!important}

@media(max-width:1180px){.sm-index-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:620px){
  .sm-index-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
  .sm-tool{flex:0 0 142px;scroll-snap-align:start}
  .sm-wk{--hd:24px;--ln:15px;min-height:56px}
  .sm-cell{padding-top:5px}
  .sm-cell b{font-size:11.5px}
  .sm-bar{font-size:9px;padding:0 3px;gap:2px;border-radius:3px}
  .sm-bar svg{width:8px;height:8px}
  .sm-sum{grid-template-columns:1fr}
  .sm-sum>div+div{border-inline-start:0;border-top:1px solid rgba(255,255,255,.09)}
  .sm-sum li{font-size:13.5px}
}