/* ============================================================
   情侣奖惩转盘 · 手写日记本风
   ============================================================ */

/* 手写体自带一份（安卓手机上没有楷体，不然会掉成黑体，整个本子就不像手写的了）
   霞鹜文楷 Lite · SIL OFL 1.1 · 见 fonts/OFL.txt
   国内机器上放自己服务器，别去连外面 CDN */
@font-face{
  font-family:"HandKai";
  src:url("fonts/hand.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --paper:#f7f1e1;
  --ink:#2f3e46;
  --ink-soft:rgba(47,62,70,.62);
  --wine:#b23a48;
  --gold:#d9a441;
  /* 系统里有楷体/行楷就先用系统的（更快），没有就用自带的那份 */
  --hand:"KaiTi","楷体","Kaiti SC","STKaiti","华文楷体","HandKai","Noto Serif CJK SC","Songti SC",serif;
  --hand-title:"STXingkai","行楷","KaiTi","楷体","Kaiti SC","STKaiti","华文楷体","HandKai",serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  background:#26333a;
  color:var(--ink);
  font-family:var(--hand);
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 纸 ---------- */
.paper{
  position:relative;
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  padding:20px 18px calc(30px + env(safe-area-inset-bottom));
  background-color:var(--paper);
  background-image:
    radial-gradient(120% 42% at 50% -6%, rgba(255,255,255,.62), rgba(255,255,255,0) 62%),
    radial-gradient(90% 30% at 10% 104%, rgba(217,164,65,.10), rgba(217,164,65,0) 70%),
    repeating-linear-gradient(to bottom, rgba(47,62,70,0) 0 27px, rgba(47,62,70,.075) 27px 28px);
  box-shadow:inset 0 0 70px rgba(120,100,60,.07);
}

/* ---------- 抬头 ---------- */
.head{padding-top:2px}

.sticky-title{
  display:inline-block;
  position:relative;
  transform:rotate(-1.3deg);
  background:#fbf3dd;
  padding:5px 16px 7px;
  border-radius:2px;
  box-shadow:0 3px 8px rgba(47,62,70,.14);
}
.sticky-title::before{
  content:'';
  position:absolute;
  left:50%; top:-8px;
  width:54px; height:16px;
  margin-left:-27px;
  background:rgba(217,164,65,.34);
  border-radius:1px;
  transform:rotate(-2.5deg);
  box-shadow:0 1px 2px rgba(47,62,70,.08);
}
.sticky-title h1{
  margin:0;
  font-family:var(--hand-title);
  font-size:25px;
  font-weight:400;
  letter-spacing:.08em;
  color:var(--ink);
}

.head-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:13px;
}
.today{font-size:13px; letter-spacing:.04em; color:var(--ink-soft)}
.edit-btn{
  font-family:var(--hand);
  font-size:13px;
  color:var(--wine);
  background:rgba(178,58,72,.06);
  border:1px dashed rgba(178,58,72,.45);
  border-radius:9px 11px 8px 12px;
  padding:4px 11px 5px;
  transform:rotate(.8deg);
  cursor:pointer;
}

/* ---------- 转盘 ---------- */
.wheel-block{margin-top:20px}

.wheel-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:4px 8px;
  margin-bottom:8px;
}
.tag{
  font-family:var(--hand-title);
  font-size:15px;
  letter-spacing:.06em;
  padding:2px 11px 3px;
  border-radius:3px;
}
.tag-reward{background:rgba(217,164,65,.30); color:#7d5a16; transform:rotate(-1deg)}
.tag-punish{background:rgba(178,58,72,.16); color:var(--wine); transform:rotate(1deg)}
.wheel-stat{font-size:11.5px; letter-spacing:.02em; color:var(--ink-soft)}

.wheel-wrap{padding-top:2px}
.wheel{
  display:block;
  width:100%;
  max-width:328px;
  height:auto;
  margin:0 auto;
  filter:drop-shadow(0 4px 7px rgba(47,62,70,.14));
}

.wheel text{
  font-family:var(--hand);
  font-size:13px;
  letter-spacing:.04em;
  text-anchor:middle;
  fill:rgba(47,62,70,.92);
}

.hub{fill:#f8f2e2; stroke:rgba(47,62,70,.42); stroke-width:2}
.wheel .hub-text{
  font-family:var(--hand-title);
  font-size:12.5px;
  letter-spacing:.06em;
  fill:rgba(47,62,70,.52);
}

/* 图钉指针 */
.pointer circle:first-child{fill:var(--gold); stroke:rgba(47,62,70,.55); stroke-width:2}
.pointer path{fill:var(--gold); stroke:rgba(47,62,70,.5); stroke-width:1.6; stroke-linejoin:round}
.pointer circle.pin-glint{fill:rgba(255,255,255,.8); stroke:none}

/* 红笔圈 */
.pen path{
  fill:none;
  stroke:var(--wine);
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-opacity:.82;
}

/* 落点文字 */
.landed{margin:11px 0 0; text-align:center}
.landed-pre{font-size:12px; letter-spacing:.06em; color:var(--ink-soft); margin-right:7px}
.landed-name{
  font-family:var(--hand-title);
  font-size:18px;
  font-weight:400;
  letter-spacing:.06em;
  color:var(--wine);
  padding:0 3px 2px;
  background:linear-gradient(transparent 66%, rgba(178,58,72,.20) 66% 92%, transparent 92%);
}
.landed-idle .landed-pre{color:rgba(47,62,70,.42)}
.landed-idle .landed-name{
  font-size:15px;
  color:rgba(47,62,70,.42);
  background:none;
}

/* 大按钮 */
.spin{
  display:block;
  width:100%;
  min-height:54px;
  margin:13px auto 0;
  font-family:var(--hand-title);
  font-size:21px;
  letter-spacing:.16em;
  text-indent:.16em;
  border-radius:15px 18px 14px 19px;
  cursor:pointer;
  background:linear-gradient(180deg,#fdf8ea,#f2e6c8);
  transition:transform .06s linear;
}
.spin-reward{
  color:var(--wine);
  border:2px solid var(--gold);
  box-shadow:0 2px 0 rgba(217,164,65,.55), 0 7px 15px rgba(47,62,70,.10);
}
.spin-punish{
  color:var(--wine);
  border:2px solid var(--wine);
  box-shadow:0 2px 0 rgba(178,58,72,.38), 0 7px 15px rgba(47,62,70,.10);
}
.spin:active{transform:translateY(1px) rotate(-.4deg)}

.divider{
  height:1px;
  margin:24px 2px;
  transform:rotate(-.18deg);
  background:repeating-linear-gradient(90deg, rgba(47,62,70,.32) 0 7px, rgba(47,62,70,0) 7px 13px);
}

/* ---------- 小本子 ---------- */
.sec-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:11px;
}
.sec-title{
  display:inline-block;
  margin:0;
  padding:0 3px;
  font-family:var(--hand-title);
  font-size:20px;
  font-weight:400;
  letter-spacing:.14em;
  color:var(--ink);
  background:linear-gradient(transparent 64%, rgba(217,164,65,.30) 64% 94%, transparent 94%);
}

.week{margin-bottom:14px}

/* 「选周」按钮 */
.cal-open{
  flex:0 0 auto;
  font-family:var(--hand);
  font-size:13px;
  color:var(--wine);
  background:rgba(178,58,72,.06);
  border:1px dashed rgba(178,58,72,.45);
  border-radius:9px 11px 8px 12px;
  padding:4px 11px 5px;
  transform:rotate(1deg);
  cursor:pointer;
}

/* 周条：‹ 本周 › */
.week-bar{
  display:flex;
  align-items:center;
  gap:4px;
  padding:6px 6px 7px;
  background:rgba(217,164,65,.14);
  border-radius:7px 9px 7px 10px;
  transform:rotate(-.4deg);
}
.week-bar-main{flex:1 1 auto; min-width:0; text-align:center}
.week-range{font-size:13px; letter-spacing:.01em; color:var(--ink); white-space:nowrap}
.week-foot{margin-top:1px; display:flex; align-items:center; justify-content:center; gap:6px}
.week-now{
  flex:0 0 auto;
  font-size:10.5px;
  line-height:1.5;
  color:var(--wine);
  border:1px solid rgba(178,58,72,.35);
  border-radius:8px;
  padding:0 5px;
}
.week-sum{font-size:11.5px; color:var(--ink-soft); white-space:nowrap}
.wk-nav{
  flex:0 0 auto;
  width:30px; height:34px;
  padding:0;
  font-family:var(--hand-title);
  font-size:21px;
  line-height:1;
  color:var(--wine);
  background:none;
  border:0;
  cursor:pointer;
  opacity:.8;
}
.wk-nav[disabled]{opacity:.22; cursor:default}

.rows{list-style:none; margin:9px 0 0; padding:0}

/* 320px 那种小屏：周条的字缩一点，别挤出去 */
@media (max-width: 345px){
  .week-range{font-size:11.5px}
  .wk-nav{width:26px}
}

.row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:7px;
  padding:8px 10px 9px;
  background:rgba(255,255,255,.58);
  border-radius:9px 11px 8px 12px;
  box-shadow:0 1px 2px rgba(47,62,70,.07), 0 0 0 1px rgba(47,62,70,.05);
  transform:rotate(-.35deg);
}
.row-b{transform:rotate(.45deg); background:rgba(255,255,255,.52)}

.row-main{flex:1 1 auto; min-width:0}
.row-meta{display:flex; align-items:center; gap:7px}
.t{font-size:11px; letter-spacing:.02em; color:rgba(47,62,70,.55); white-space:nowrap}

.tag-mini{
  font-family:var(--hand);
  font-size:11px;
  padding:0 6px 1px;
  border-radius:4px;
  letter-spacing:.04em;
}
.tag-mini.tag-reward{background:rgba(217,164,65,.28); color:#7d5a16; transform:none}
.tag-mini.tag-punish{background:rgba(178,58,72,.16); color:var(--wine); transform:none}

.del{
  margin-left:auto;
  padding:4px 2px 4px 12px;
  font-size:12px;
  line-height:1;
  color:rgba(47,62,70,.22);
  background:none;
  border:0;
  cursor:pointer;
}
.del:active{color:var(--wine)}

.row-item{
  position:relative;
  display:inline-block;
  margin-top:3px;
  font-size:16px;
  letter-spacing:.05em;
  color:var(--ink);
}

/* 完成后的划线与变灰 */
.row-done .row-item,
.row:has(.check.is-done) .row-item{color:rgba(47,62,70,.42)}
.row-done .row-item::after,
.row:has(.check.is-done) .row-item::after{
  content:'';
  position:absolute;
  left:-3px; right:-3px;
  top:calc(50% - 1px);
  height:2px;
  border-radius:2px;
  background:rgba(178,58,72,.55);
  box-shadow:0 2.5px 0 -.5px rgba(178,58,72,.24);
  transform:rotate(-1.2deg);
}

.row-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  flex:0 0 auto;
}
.done-at{font-size:10.5px; color:rgba(47,62,70,.45); white-space:nowrap}

/* 手写勾选圈 */
.check{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px; height:32px;
  padding:0;
  background:rgba(255,255,255,.5);
  border:2px solid rgba(47,62,70,.40);
  border-radius:48% 52% 51% 49% / 51% 49% 52% 48%;
  cursor:pointer;
}
.check svg{
  width:24px; height:24px;
  fill:none;
  stroke:var(--wine);
  stroke-width:3.1;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform:rotate(-3deg);
}
.check.is-done{
  border-width:1.6px;
  border-color:rgba(178,58,72,.45);
  background:rgba(178,58,72,.07);
}
.check-static{
  padding-right:4px;
  font-family:var(--hand-title);
  font-size:19px;
  color:var(--wine);
  opacity:.75;
}

/* ---------- 弹层：一层暗化 + 一张卡片（JS 控制 .is-open） ---------- */
.scrim{
  position:fixed;
  inset:0;
  z-index:50;
  display:block;
  background:rgba(38,51,58,.46);
  opacity:0;
  visibility:hidden;
  cursor:pointer;
  transition:opacity .18s ease, visibility .18s;
}
.scrim.is-open{opacity:1; visibility:visible}

.pop{
  position:fixed;
  z-index:51;
  left:50%; top:50%;
  width:min(348px, calc(100vw - 28px));
  padding:14px 15px 13px;
  background:#fbf5e4;
  border-radius:5px;
  box-shadow:0 18px 40px rgba(0,0,0,.38), 0 0 0 1px rgba(47,62,70,.10);
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,-48%) rotate(-.4deg) scale(.97);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.pop.is-open{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%) rotate(-.4deg) scale(1);
}

.cal-pop{
  max-height:calc(100vh - 36px);
  overflow-y:auto;
  padding:13px 14px 12px;
}

.cal-nav{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; padding-right:32px}
.cal-month{font-family:var(--hand-title); font-size:17px; letter-spacing:.08em; color:var(--ink)}
.cal-arrow{
  width:30px; height:30px;
  padding:0;
  font-family:var(--hand-title);
  font-size:20px;
  line-height:1;
  color:var(--wine);
  background:none;
  border:0;
  cursor:pointer;
  opacity:.8;
}
.cal-close{
  position:absolute;
  right:6px; top:4px;
  width:32px; height:32px;
  font-size:16px;
  line-height:32px;
  text-align:center;
  color:rgba(47,62,70,.42);
  cursor:pointer;
}
.cal-hint{margin:0 0 7px; font-size:11.5px; color:rgba(47,62,70,.5); text-align:center}

.cal-wds{display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:2px}
.cal-wd{font-size:11.5px; text-align:center; color:rgba(47,62,70,.5)}
.cal-wd:nth-child(6),.cal-wd:nth-child(7){color:rgba(178,58,72,.62)}

.cal-row{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  width:100%;
  padding:1px 0;
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  border-radius:9px 11px 8px 12px;
  cursor:pointer;
}
.cal-row.is-now{background:rgba(217,164,65,.17)}
.cal-row.is-sel{
  padding:0;
  border:2.2px solid rgba(178,58,72,.72);
  transform:rotate(-.25deg);
  box-shadow:0 0 0 2px rgba(178,58,72,.07);
}
.cal-d{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:33px;
  font-family:var(--hand);
  font-size:14.5px;
  color:var(--ink);
}
.cal-d.out{color:rgba(47,62,70,.25)}
.cal-d.today{color:var(--wine); font-weight:700}
.cal-d .dot{
  position:absolute;
  left:50%; bottom:2px;
  width:4px; height:4px;
  margin-left:-2px;
  border-radius:50%;
  background:var(--wine);
  opacity:.8;
}

.cal-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:11px;
  padding-top:9px;
  border-top:1px dashed rgba(47,62,70,.20);
}
.cal-foot-range{font-size:11.5px; color:var(--ink-soft)}
.cal-today{
  font-family:var(--hand);
  font-size:13px;
  color:var(--wine);
  background:rgba(178,58,72,.06);
  border:1px dashed rgba(178,58,72,.45);
  border-radius:9px 11px 8px 12px;
  padding:4px 11px 5px;
  cursor:pointer;
  white-space:nowrap;
}

/* 这一周什么都没写 */
.week-empty{
  padding:16px 0 12px;
  text-align:center;
  font-size:13.5px;
  color:rgba(47,62,70,.42);
}
.week-empty span{
  display:inline-block;
  padding:0 3px;
  background:linear-gradient(transparent 64%, rgba(217,164,65,.30) 64% 94%, transparent 94%);
}

/* ---------- 页脚 ---------- */
.foot{
  margin:28px 0 6px;
  text-align:center;
  font-family:var(--hand-title);
  font-size:13px;
  letter-spacing:.1em;
  color:rgba(47,62,70,.40);
}

/* ---------- 桌面：一张纸摊在桌上 ---------- */
@media (min-width:760px){
  body{padding:34px 16px}
  .paper{
    min-height:0;
    border-radius:3px;
    box-shadow:
      0 22px 46px rgba(0,0,0,.42),
      0 1px 0 rgba(255,255,255,.65) inset,
      inset 0 0 70px rgba(120,100,60,.07);
  }
}

/* ============================================================
   以下是「真做」之后新增的部分
   ============================================================ */

/* ---------- 转盘：转动的那一层 + 落点 ---------- */
.rotor{will-change:transform}
.wheel .sec{
  stroke:rgba(47,62,70,.38);
  stroke-width:1.5;
  stroke-linejoin:round;
}
.wheel .sec.is-landed{stroke:rgba(47,62,70,.52); stroke-width:2.3}
.wheel .wax{pointer-events:none}
.wheel .lb text{fill:rgba(47,62,70,.92)}
.pen.is-hidden{display:none}
.spin[disabled]{opacity:.55; cursor:default}
.spin[disabled]:active{transform:none}

/* 落点文字轻轻弹一下 */
.landed-name{display:inline-block}
.landed.is-fresh .landed-name{animation:pop-in .34s ease-out}
@keyframes pop-in{
  0%{transform:scale(.86); opacity:0}
  60%{transform:scale(1.05)}
  100%{transform:scale(1); opacity:1}
}

/* ---------- 离线提示条 ---------- */
.offline-bar{
  margin:10px 0 0;
  padding:6px 10px;
  font-size:11.5px;
  text-align:center;
  color:#7d5a16;
  background:rgba(217,164,65,.18);
  border:1px dashed rgba(217,164,65,.6);
  border-radius:8px 10px 8px 11px;
}
.offline-bar[hidden]{display:none}

/* ---------- 第一道门：暗号 ---------- */
.gate{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 20px calc(24px + env(safe-area-inset-bottom));
  background-color:var(--paper);
  background-image:
    radial-gradient(120% 42% at 50% -6%, rgba(255,255,255,.62), rgba(255,255,255,0) 62%),
    repeating-linear-gradient(to bottom, rgba(47,62,70,0) 0 27px, rgba(47,62,70,.075) 27px 28px);
}
.gate[hidden]{display:none}
.gate-card{width:100%; max-width:330px; text-align:center}
.gate-card .btn-main{width:100%}
.gate-lead{margin:18px 0 14px; font-size:14px; line-height:1.7; color:var(--ink-soft)}
.gate-input{
  width:100%;
  padding:11px 12px;
  font-family:var(--hand);
  font-size:16px;
  color:var(--ink);
  background:rgba(255,255,255,.72);
  border:1.5px dashed rgba(178,58,72,.45);
  border-radius:10px 12px 9px 13px;
  outline:none;
}
.gate-input:focus{border-style:solid; border-color:rgba(178,58,72,.7)}
.gate-hint{margin:10px 0 16px; font-size:11.5px; line-height:1.6; color:rgba(47,62,70,.5)}
.gate-hint.is-bad{color:var(--wine)}

/* ---------- 卡片（弹层里那张纸） ---------- */
.modal{
  width:min(356px, calc(100vw - 26px));
  /* 条目多了（一个盘最多 10 条）卡片会很高，所以自己能滚，别让「保存」掉到屏幕外 */
  max-height:calc(100vh - 32px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.card-tag{font-size:11.5px; letter-spacing:.06em; color:var(--ink-soft)}
.card-name{
  margin:6px 0 0;
  font-family:var(--hand-title);
  font-size:24px;
  letter-spacing:.06em;
  color:var(--wine);
  padding:0 2px 3px;
  background:linear-gradient(transparent 68%, rgba(178,58,72,.18) 68% 93%, transparent 93%);
}
.card-title{font-family:var(--hand-title); font-size:19px; letter-spacing:.08em}
.card-note{margin:10px 0 0; font-size:12.5px; line-height:1.7; color:var(--ink-soft)}
.card-note.quiet{font-size:11.5px; color:rgba(47,62,70,.45)}
.card-btns{display:flex; gap:9px; margin-top:16px}
/* 卡片要滚的时候，按钮钉在底部，「保存」永远够得着 */
.card-wide .card-btns{
  position:sticky;
  bottom:-1px;
  background:#fbf5e4;
  padding:8px 0 2px;
  box-shadow:0 -8px 12px -8px rgba(47,62,70,.28);
}
.btn-main,.btn-ghost,.btn-danger{
  flex:1 1 0;
  min-height:44px;
  font-family:var(--hand-title);
  font-size:16px;
  letter-spacing:.1em;
  border-radius:12px 14px 11px 15px;
  cursor:pointer;
}
.btn-main{color:var(--wine); background:linear-gradient(180deg,#fdf8ea,#f2e6c8); border:2px solid var(--gold)}
.btn-ghost{color:var(--ink-soft); background:rgba(255,255,255,.55); border:1.5px dashed rgba(47,62,70,.28)}
.btn-danger{color:#fff; background:var(--wine); border:2px solid #8c2834}
.btn-main:active,.btn-ghost:active,.btn-danger:active{transform:translateY(1px)}

/* ---------- 改条目面板 ---------- */
.edit-sec{margin-top:14px}
.edit-sec-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px}
.edit-count{font-size:11px; color:rgba(47,62,70,.45)}
.edit-list{list-style:none; margin:0; padding:0}
.edit-row{display:flex; align-items:center; gap:6px; margin-bottom:6px}
.edit-row input{
  flex:1 1 auto;
  min-width:0;
  padding:8px 10px;
  font-family:var(--hand);
  font-size:15px;
  color:var(--ink);
  background:rgba(255,255,255,.62);
  border:1px solid rgba(47,62,70,.16);
  border-radius:8px 10px 8px 11px;
  outline:none;
}
.edit-row input:focus{border-color:rgba(178,58,72,.5); background:#fff}
.edit-move,.edit-del{
  flex:0 0 auto;
  width:30px; height:32px;
  padding:0;
  font-family:var(--hand);
  font-size:14px;
  line-height:1;
  color:rgba(47,62,70,.45);
  background:rgba(255,255,255,.5);
  border:1px solid rgba(47,62,70,.14);
  border-radius:7px;
  cursor:pointer;
}
.edit-move:disabled{opacity:.3}
.edit-del{color:rgba(178,58,72,.55)}
.edit-add{
  width:100%;
  margin-top:2px;
  padding:7px 0;
  font-family:var(--hand);
  font-size:13px;
  color:var(--wine);
  background:rgba(178,58,72,.05);
  border:1px dashed rgba(178,58,72,.4);
  border-radius:8px 10px 8px 11px;
  cursor:pointer;
}

/* ---------- 提示条 ---------- */
.toast{
  position:fixed;
  z-index:70;
  left:50%;
  bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translate(-50%, 10px);
  max-width:min(320px, calc(100vw - 40px));
  padding:9px 14px;
  font-size:12.5px;
  line-height:1.5;
  text-align:center;
  color:#fdf8ea;
  background:rgba(47,62,70,.92);
  border-radius:10px 12px 9px 13px;
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.toast.is-open{opacity:1; visibility:visible; transform:translate(-50%,0)}

/* ---------- 行的小反馈 ---------- */
.check:active{transform:scale(.94)}
.row{transition:background .18s ease}
.row.is-just-done{background:rgba(217,164,65,.22)}