.sw-wrapper{
  --sw-blue:#1E4DB7;
  --sw-orange:#E57200;
  --sw-dark:#0f172a;
  --sw-gray:#64748b;
  --sw-bg:#ffffff;
  --sw-card:#f8fafc;

  --sw-radius:22px;
  --sw-padding:clamp(16px, 2.5vw, 28px);
  --sw-shadow:0 12px 30px rgba(0,0,0,.08);
  --sw-temp-size:clamp(2.6rem, 6vw, 4.4rem);
  --sw-unit-size:clamp(0.9rem, 2vw, 1.3rem);
  --sw-unit-color:var(--sw-gray);
  --sw-card-val-size:1.3rem;
  --sw-card-head-size:.7rem;
  --sw-card-sub-size:.85rem;
  --sw-moon-text-size:1rem;
  --sw-moon-icon-size:28px;

  font-family:"SF Pro Display","Segoe UI",Roboto,system-ui,sans-serif;
  background:var(--sw-bg);
  border-radius:var(--sw-radius);
  padding:var(--sw-padding);
  box-shadow:var(--sw-shadow);
  max-width:700px;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  color:var(--sw-dark);
}

.sw-wrapper svg,
.sw-wrapper svg *,
.sw-wrapper img{background:transparent !important}

.sw-wrapper.loading .sw-content{opacity:0;pointer-events:none}
.sw-skeleton{position:absolute;inset:0;padding:var(--sw-padding);background:#fff;z-index:50;transition:opacity .3s}
.sw-wrapper:not(.loading) .sw-skeleton{opacity:0;pointer-events:none}
.sw-sk-header{height:100px;background:#f3f4f6;border-radius:16px;margin-bottom:20px;animation:pulse 1.5s infinite}
.sw-sk-grid{height:150px;background:#f3f4f6;border-radius:16px;animation:pulse 1.5s infinite;animation-delay:.2s}
@keyframes pulse{0%{opacity:1}50%{opacity:.5}100%{opacity:1}}

.sw-header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.sw-main-col{display:flex;flex-direction:column;gap:6px}
.sw-temp-row{display:flex;align-items:center;gap:12px}
.sw-icon-lg{width:50px;height:50px;display:flex;align-items:center;justify-content:center}
.sw-icon-lg img{width:50px;height:50px;display:block}
.sw-temp-now{font-size:var(--sw-temp-size);font-weight:800;line-height:1}
.sw-unit{font-size:var(--sw-unit-size);color:var(--sw-unit-color);font-weight:700;margin-left:4px}
.sw-thermo{width:18px;height:18px;margin-right:6px;stroke:var(--sw-unit-color)}
.sw-desc-now{font-size:1.05rem;font-weight:650;text-transform:capitalize}
.sw-dn-row{display:flex;align-items:center;gap:8px;font-size:.98rem;font-weight:600;color:var(--sw-gray)}
.sw-dn-dot{width:4px;height:4px;background:var(--sw-gray);border-radius:50%}

/* Minimal sun line centered */
.sw-sun-min{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:150px}
.sw-sun-line{width:140px;height:6px;background:#e5e7eb;border-radius:6px;position:relative}
.sw-sun-dot{width:12px;height:12px;background:var(--sw-orange);border:2px solid #fff;border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 2px 6px rgba(0,0,0,.2)}
.sw-sun-times{display:flex;gap:12px;font-size:.8rem;color:var(--sw-gray);font-weight:600}

/* Presets */
.sw-wrapper.sw-header-1 .sw-header{flex-direction:row}
.sw-wrapper.sw-header-2 .sw-temp-now{font-size:clamp(2.2rem,5vw,3.4rem)}
.sw-wrapper.sw-header-2 .sw-desc-now{font-size:.95rem}
.sw-wrapper.sw-header-3 .sw-header{flex-direction:column;align-items:flex-start}
.sw-wrapper.sw-header-3 .sw-sun-min{align-items:flex-start}

/* Grid cards */
.sw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}
.sw-card{background:var(--sw-card);padding:14px;border-radius:16px;display:flex;flex-direction:column;gap:6px;min-height:90px}
.sw-card-head{font-size:var(--sw-card-head-size);letter-spacing:.08em;text-transform:uppercase;color:var(--sw-gray);font-weight:700}
.sw-card-val{font-size:var(--sw-card-val-size);font-weight:800}
.sw-card-sub{font-size:var(--sw-card-sub-size);color:var(--sw-gray)}
.sw-moon-text{font-size:var(--sw-moon-text-size);font-weight:700}
.sw-moon-emoji{font-size:var(--sw-moon-icon-size)}
.sw-moon-row{display:flex;align-items:center;justify-content:space-between;gap:8px}

.sw-section-title{font-size:.8rem;font-weight:800;color:var(--sw-gray);text-transform:uppercase;margin:14px 0 10px 0;letter-spacing:.06em}

.sw-hourly{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.sw-h-item{min-width:70px;background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:10px;text-align:center}
.sw-h-time{font-size:.85rem;font-weight:700}
.sw-h-icon img{width:28px;height:28px}
.sw-h-temp{font-size:1.05rem;font-weight:800}
.sw-h-pop{font-size:.7rem;color:var(--sw-blue);font-weight:700}

.sw-days-con{display:none;margin-top:8px;border-top:1px dashed #e5e7eb;padding-top:12px}
.sw-days-con.active{display:block}
.sw-d-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #f1f5f9}
.sw-d-day{width:48px;font-weight:800}
.sw-d-icon img{width:24px;height:24px}
.sw-d-bar-box{flex-grow:1;display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--sw-gray)}
.sw-bar-track{flex-grow:1;height:6px;background:#e2e8f0;border-radius:6px;position:relative;overflow:hidden}
.sw-bar-fill{position:absolute;height:100%;border-radius:6px;background:linear-gradient(90deg,#60a5fa,var(--sw-orange))}

.sw-footer{margin-top:12px;padding-top:12px;border-top:1px solid #f1f5f9;display:flex;flex-direction:column;gap:6px}
.sw-btn{background:none;border:none;color:var(--sw-blue);font-weight:800;cursor:pointer;padding:6px 0;text-align:left;display:inline-flex;align-items:center;gap:8px}
.sw-message{font-size:.78rem;color:#94a3b8}

/* Icon buttons (preset 1) */
.sw-action-row{display:flex;gap:10px;margin-top:6px}
.sw-icon-btn{border:1px solid #e2e8f0;background:#fff;border-radius:12px;padding:8px 10px;display:flex;align-items:center;gap:8px;font-weight:700;color:var(--sw-dark);cursor:pointer}
.sw-icon-btn svg{width:16px;height:16px;stroke:var(--sw-blue)}

/* Tabs (preset 3) */
.sw-tabs{display:flex;gap:10px;margin-top:8px}
.sw-tab{padding:6px 12px;border-radius:999px;border:1px solid #e2e8f0;font-weight:700;cursor:pointer}
.sw-tab.active{background:var(--sw-blue);color:#fff;border-color:var(--sw-blue)}
.sw-collapse-controls{display:flex;gap:10px;margin-top:8px}
.sw-panel-collapsible{display:none}
.sw-panel-collapsible.active{display:block}

/* Modal */
.sw-modal{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;align-items:center;justify-content:center;z-index:9999;padding:16px}
.sw-modal.active{display:flex}
.sw-modal-content{background:#fff;border-radius:18px;max-width:720px;width:100%;max-height:85vh;overflow:auto;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.sw-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sw-modal-title{font-weight:800}
.sw-modal-close{background:none;border:none;font-size:22px;cursor:pointer}

/* Responsive */
@media (max-width:640px){
  .sw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sw-sun-line{width:110px}
}
@media (max-width:420px){
  .sw-header{gap:10px}
  .sw-temp-row{gap:8px}
  .sw-icon-lg{width:40px;height:40px}
  .sw-icon-lg img{width:40px;height:40px}
  .sw-grid{grid-template-columns:1fr}
}