:root{
  --bg:#eef3f8;
  --ink:#132238;
  --muted:#65748a;
  --navy:#0b3f73;
  --navy-2:#145c99;
  --orange:#f06a22;
  --green:#0b8b63;
  --line:#d8e1eb;
  --good:#21a366;
  --warn:#f4b400;
  --bad:#e53935;
  --white:#ffffff;
  --shadow:0 10px 28px rgba(14,40,68,.14);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#0b3f73;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--ink);
}

body{
  display:flex;
  align-items:stretch;
  justify-content:center;
}

.screen{
  width:100vw;
  height:100vh;
  min-width:960px;
  min-height:540px;
  display:grid;
  grid-template-rows:10.5vh 1fr 4.5vh;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 15%),
    var(--bg);
}

.topbar{
  background:linear-gradient(135deg,#0a3766,#0d4a83);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.2vh 2vw;
  box-shadow:0 3px 12px rgba(0,0,0,.16);
}

.brand{
  display:flex;
  align-items:center;
  gap:1vw;
}

.brand-mark{
  width:4.7vw;
  min-width:68px;
  height:4.7vw;
  min-height:68px;
  max-width:88px;
  max-height:88px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:3px solid rgba(255,255,255,.92);
  border-radius:50%;
  font-weight:900;
  font-size:clamp(18px,1.45vw,28px);
  letter-spacing:.06em;
}

h1{
  margin:0;
  font-size:clamp(26px,2.25vw,46px);
  line-height:1;
  letter-spacing:.015em;
}

h1 span{color:#ff8a32}

.brand p{
  margin:.85vh 0 0;
  font-size:clamp(10px,.83vw,16px);
  letter-spacing:.28em;
  opacity:.88;
}

.status-block{
  display:flex;
  align-items:center;
  gap:1vw;
}

.mode-badge{
  padding:.7vh .75vw;
  border:1px solid rgba(255,255,255,.5);
  border-radius:999px;
  font-size:clamp(10px,.75vw,14px);
  font-weight:700;
  letter-spacing:.08em;
  background:rgba(255,255,255,.13);
}

.hidden{display:none!important}

.updated{
  display:grid;
  grid-template-columns:auto auto;
  column-gap:.5vw;
  align-items:baseline;
  text-align:right;
}

.updated span{
  font-size:clamp(12px,.85vw,16px);
  opacity:.86;
}

.updated strong{
  font-size:clamp(20px,1.45vw,30px);
}

.updated small{
  grid-column:1/3;
  margin-top:.3vh;
  font-size:clamp(11px,.82vw,16px);
  opacity:.86;
}

.dashboard{
  min-height:0;
  padding:1.2vh .8vw;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:1.2vh .8vw;
}

.card{
  min-width:0;
  min-height:0;
  background:var(--white);
  border-radius:10px;
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid rgba(18,57,92,.14);
  display:grid;
  grid-template-rows:7.1vh 1fr;
}

.card-head{
  display:flex;
  align-items:center;
  padding:0 1.35vw;
  color:#fff;
  gap:.85vw;
}

.card-head h2{
  margin:0;
  font-size:clamp(19px,1.55vw,32px);
  letter-spacing:.01em;
  line-height:1.1;
}

.head-icon{
  width:2.35vw;
  height:2.35vw;
  min-width:34px;
  min-height:34px;
  max-width:48px;
  max-height:48px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  border:2px solid rgba(255,255,255,.75);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:clamp(17px,1.25vw,25px);
}

.card-alert .card-head{background:linear-gradient(90deg,#f05b24,#ff8a27)}
.card-contract .card-head{background:linear-gradient(90deg,#0b4f87,#1775bd)}
.card-weather .card-head{background:linear-gradient(90deg,#0d4b84,#1976bf)}
.card-todo .card-head{background:linear-gradient(90deg,#07815d,#16a276)}

.card-body{
  min-height:0;
  padding:1.25vh 1.35vw;
  overflow:hidden;
}

.rows{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.row{
  min-height:5.7vh;
  display:grid;
  grid-template-columns:minmax(0,1.75fr) minmax(140px,1fr) minmax(120px,.72fr);
  align-items:center;
  gap:1vw;
  border-bottom:1px solid var(--line);
}

.row:last-child{border-bottom:none}

.row-title-wrap{
  min-width:0;
  display:flex;
  align-items:center;
  gap:.45vw;
}

.row-title{
  min-width:0;
  flex:1 1 auto;
  font-size:clamp(14px,1.02vw,20px);
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.row-location{
  flex:0 0 auto;
  padding:.28vh .48vw;
  border-radius:6px;
  border:1px solid #bdd3e8;
  background:#edf5fc;
  color:#0b4f87;
  font-size:clamp(13px,.9vw,18px);
  font-weight:900;
  line-height:1.15;
  white-space:nowrap;
  letter-spacing:.02em;
}

.progress-wrap{
  display:flex;
  align-items:center;
  gap:.6vw;
  min-width:0;
}

.progress{
  height:1.35vh;
  min-height:10px;
  background:#e8edf3;
  border-radius:999px;
  flex:1;
  overflow:hidden;
}

.progress > span{
  display:block;
  height:100%;
  width:0;
  border-radius:inherit;
  background:linear-gradient(90deg,#1d7fe3,#35a3ff);
}

.progress-value{
  width:3.4vw;
  min-width:48px;
  font-weight:800;
  font-size:clamp(14px,1.08vw,22px);
  text-align:right;
}

.status{
  display:flex;
  align-items:center;
  gap:.45vw;
  font-size:clamp(12px,.92vw,18px);
  font-weight:700;
  white-space:nowrap;
}

.dot{
  width:.72vw;
  height:.72vw;
  min-width:10px;
  min-height:10px;
  border-radius:50%;
  flex:0 0 auto;
}

.good{color:var(--good)}
.warn{color:#d99100}
.bad{color:var(--bad)}
.dot.good{background:var(--good)}
.dot.warn{background:var(--warn)}
.dot.bad{background:var(--bad)}

.contract-summary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7vw;
  margin-bottom:1.1vh;
}

.metric{
  background:#f5f8fc;
  border:1px solid var(--line);
  border-radius:8px;
  padding:.8vh .8vw;
}

.metric span{
  display:block;
  color:var(--muted);
  font-size:clamp(10px,.72vw,14px);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:.25vh;
}

.metric strong{
  font-size:clamp(16px,1.18vw,23px);
}

.checklist{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7vh .7vw;
}

.check-item{
  display:flex;
  align-items:center;
  gap:.55vw;
  padding:.7vh .7vw;
  border-radius:7px;
  background:#f7fafc;
  border:1px solid var(--line);
  font-size:clamp(12px,.86vw,17px);
  min-width:0;
}

.check-box{
  width:1.25vw;
  height:1.25vw;
  min-width:16px;
  min-height:16px;
  border-radius:4px;
  border:2px solid #aebac8;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  font-size:clamp(10px,.65vw,13px);
  font-weight:900;
}

.check-item.done .check-box{
  background:var(--good);
  border-color:var(--good);
  color:#fff;
}

.check-item span:last-child{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.weather-layout{
  height:100%;
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:1.25vw;
}

.weather-now{
  border-right:1px solid var(--line);
  padding-right:1vw;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.weather-date{
  color:var(--muted);
  font-size:clamp(11px,.78vw,15px);
  font-weight:700;
  margin-bottom:.4vh;
}

.temp{
  font-size:clamp(44px,4vw,78px);
  line-height:.95;
  font-weight:900;
  color:#0e3767;
}

.condition{
  font-size:clamp(16px,1.15vw,23px);
  font-weight:800;
  margin-top:.45vh;
}

.weather-meta{
  margin-top:.8vh;
  color:var(--muted);
  font-size:clamp(11px,.8vw,16px);
}

.rain-alert{
  margin-top:1vh;
  padding:.75vh .7vw;
  background:#eaf4ff;
  border-left:4px solid #1976bf;
  border-radius:6px;
  font-size:clamp(11px,.82vw,16px);
  line-height:1.3;
}

.chart-wrap{
  min-width:0;
  display:flex;
  flex-direction:column;
}

.chart-title{
  color:var(--muted);
  font-weight:800;
  font-size:clamp(11px,.8vw,16px);
  margin-bottom:.25vh;
}

.chart-summary{
  color:#39526d;
  font-size:clamp(10px,.7vw,14px);
  font-weight:700;
  margin-bottom:.35vh;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.rain-chart{
  flex:1;
  display:flex;
  align-items:flex-end;
  gap:.22vw;
  border-bottom:1px solid #b9c5d2;
  padding:.25vh .1vw .45vh;
  min-height:0;
}

.rain-col{
  flex:1;
  min-width:0;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-direction:column;
  position:relative;
}

.bar{
  width:68%;
  max-width:34px;
  min-height:3px;
  border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,#33a3ff,#1d73d7);
}

.bar-label{
  font-size:clamp(9px,.61vw,12px);
  font-weight:800;
  margin-bottom:.18vh;
}

.rain-mm{
  margin-top:.16vh;
  color:#0d4b84;
  font-size:clamp(8px,.56vw,11px);
  font-weight:800;
  line-height:1;
}

.hour{
  margin-top:.2vh;
  color:var(--muted);
  font-size:clamp(8px,.57vw,11px);
  line-height:1;
}

.todo-row{
  min-height:7.2vh;
  display:grid;
  grid-template-columns:3.2vw minmax(0,1fr) minmax(8.2vw,9.5vw);
  align-items:center;
  gap:.75vw;
  border-bottom:1px solid var(--line);
}

.todo-row:last-child{border-bottom:none}

.priority{
  width:2vw;
  height:2vw;
  min-width:28px;
  min-height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:900;
  background:#7b8796;
  font-size:clamp(12px,.88vw,17px);
}

.priority.p1{background:#e53935}
.priority.p2{background:#f57c00}
.priority.p3{background:#e5a400}

.todo-text{
  min-width:0;
  font-size:clamp(13px,.96vw,19px);
  font-weight:700;
  line-height:1.22;
  overflow:hidden;
  white-space:normal;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.todo-status{
  min-width:0;
  color:var(--muted);
  font-size:clamp(10px,.74vw,14px);
  line-height:1.2;
  text-align:right;
  white-space:normal;
  overflow-wrap:anywhere;
}

.empty{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:clamp(14px,1vw,20px);
  text-align:center;
}

.footer{
  background:#0a3c6d;
  color:rgba(255,255,255,.9);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 2vw;
  font-size:clamp(10px,.72vw,14px);
  letter-spacing:.04em;
}

.footer.warning{
  background:#7a310d;
}

@media (max-aspect-ratio: 4/3){
  .screen{min-width:0}
  .dashboard{gap:8px}
  .brand p{display:none}
  .row{grid-template-columns:minmax(0,1.5fr) minmax(120px,1fr)}
  .status{display:none}
}


/* Fallback typography for older Samsung/Tizen browsers that do not support CSS clamp(). */
@supports not (font-size: clamp(12px, 1vw, 20px)) {
  .brand-mark{font-size:1.45vw}
  h1{font-size:2.25vw}
  .brand p{font-size:.83vw}
  .mode-badge{font-size:.75vw}
  .updated span{font-size:.85vw}
  .updated strong{font-size:1.45vw}
  .updated small{font-size:.82vw}
  .card-head h2{font-size:1.55vw}
  .head-icon{font-size:1.25vw}
  .row-title{font-size:1.02vw}
  .row-location{font-size:.9vw}
  .progress-value{font-size:1.08vw}
  .status{font-size:.92vw}
  .metric span{font-size:.72vw}
  .metric strong{font-size:1.18vw}
  .check-item{font-size:.86vw}
  .check-box{font-size:.65vw}
  .weather-date{font-size:.78vw}
  .temp{font-size:4vw}
  .condition{font-size:1.15vw}
  .weather-meta{font-size:.8vw}
  .rain-alert{font-size:.82vw}
  .chart-title{font-size:.8vw}
  .chart-summary{font-size:.7vw}
  .bar-label{font-size:.61vw}
  .rain-mm{font-size:.56vw}
  .hour{font-size:.57vw}
  .priority{font-size:.88vw}
  .todo-text{font-size:.96vw}
  .todo-status{font-size:.74vw}
  .empty{font-size:1vw}
  .footer{font-size:.72vw}
}


.contract-state.bad{
  background:#fff3f2;
  border-color:#f2b4b0;
}
.contract-state.bad strong{color:var(--bad)}
.contract-state.warn{
  background:#fff8e8;
  border-color:#f2d58d;
}
.contract-state.warn strong{color:#b97700}
.contract-state.good{
  background:#effaf4;
  border-color:#a8dfc2;
}
.contract-state.good strong{color:var(--good)}

.metric-note{
  display:block;
  margin-top:.35vh;
  color:var(--muted);
  font-size:clamp(10px,.68vw,13px);
  font-weight:700;
}

.condition-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7vh .7vw;
}

.condition-item{
  min-width:0;
  padding:.65vh .7vw;
  border-radius:7px;
  background:#f7fafc;
  border:1px solid var(--line);
}

.condition-item.bad{
  background:#fff7f6;
  border-color:#efc5c1;
}
.condition-item.warn{
  background:#fffaf0;
  border-color:#f1deb0;
}
.condition-item.good{
  background:#f3fbf6;
  border-color:#b8dfc8;
}

.condition-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7vw;
}

.condition-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:clamp(12px,.84vw,17px);
  font-weight:800;
  color:var(--ink);
}

.condition-state{
  white-space:nowrap;
  font-size:clamp(10px,.72vw,14px);
  font-weight:900;
}

.condition-item.bad .condition-state{color:var(--bad)}
.condition-item.warn .condition-state{color:#b97700}
.condition-item.good .condition-state{color:var(--good)}

.condition-detail{
  margin-top:.35vh;
  color:var(--muted);
  font-size:clamp(10px,.7vw,14px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.contract-note{
  margin-top:.75vh;
  padding:.55vh .7vw;
  background:#f1f4f8;
  border-radius:6px;
  color:#5b6878;
  font-size:clamp(10px,.72vw,14px);
  font-weight:800;
}

@supports not (font-size: clamp(12px, 1vw, 20px)) {
  .metric-note{font-size:.68vw}
  .condition-name{font-size:.84vw}
  .condition-state{font-size:.72vw}
  .condition-detail{font-size:.7vw}
  .contract-note{font-size:.72vw}
}