:root {
  --paper: #f5efe4;
  --paper-2: #efe7d7;
  --ink: #2b2620;
  --ink-soft: #6b6152;
  --amber: #c2703d;
  --amber-deep: #a85a2c;
  --line: #ddd2bd;
  --card: #fffdf8;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(circle at 12% 8%, #fbf3e2 0%, transparent 45%),
    radial-gradient(circle at 88% 92%, #f3e6cf 0%, transparent 40%),
    var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  min-height: 100vh;
}

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* Header */
.app-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(245,239,228,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: 1100px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  font-size: 30px; filter: drop-shadow(1px 2px 0 rgba(0,0,0,0.1));
  animation: bob 3s ease-in-out infinite;
}
@keyframes bob { 0%,100%{ transform: translateY(0) rotate(-3deg);} 50%{ transform: translateY(-4px) rotate(3deg);} }
.brand-name {
  font-family: "Fraunces", serif; font-weight: 900; font-size: 26px;
  margin: 0; line-height: 1; letter-spacing: -0.5px; color: var(--ink);
}
.brand-tag { margin: 3px 0 0; font-size: 11px; color: var(--ink-soft); }
.header-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--amber), #c85c73, #4a7c59, #7a5ea3, var(--amber));
  background-size: 300% 100%;
  animation: slide 8s linear infinite;
}
@keyframes slide { to { background-position: 300% 0; } }

.countdown {
  display: flex; flex-direction: column; align-items: center;
  min-width: 74px; padding: 8px 12px; border-radius: 14px;
  border: 2px solid; line-height: 1;
}
.countdown[data-tone="calm"] { border-color: #4a7c59; background: #4a7c5915; color: #3d6b4c; }
.countdown[data-tone="soon"] { border-color: #c2843d; background: #c2843d15; color: #a86e28; }
.countdown[data-tone="urgent"] { border-color: #c14343; background: #c1434318; color: #b13636; animation: pulseBorder 1.4s ease-in-out infinite; }
@keyframes pulseBorder { 0%,100%{ box-shadow: 0 0 0 0 rgba(193,67,67,0.4);} 50%{ box-shadow: 0 0 0 6px rgba(193,67,67,0);} }
.countdown-num { font-family: "Fraunces", serif; font-weight: 900; font-size: 28px; }
.countdown-lbl { font-size: 9px; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }

/* Main */
.main { flex: 1; max-width: 1100px; width: 100%; margin: 0 auto; padding: 24px 20px 40px; }

/* Stats */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.stat-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px; text-align: center;
  box-shadow: 0 2px 0 var(--line);
  animation: rise 0.5s ease both;
}
.stat-card:nth-child(1){ animation-delay: 0.02s; }
.stat-card:nth-child(2){ animation-delay: 0.08s; }
.stat-card:nth-child(3){ animation-delay: 0.14s; }
.stat-card:nth-child(4){ animation-delay: 0.2s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.stat-value { font-family: "Fraunces", serif; font-weight: 900; font-size: 34px; line-height: 1; }
.stat-value[data-pulse="1"] { animation: pop 0.6s ease; }
@keyframes pop { 0%{ transform: scale(1);} 40%{ transform: scale(1.18);} 100%{ transform: scale(1);} }
.stat-label { font-size: 11px; color: var(--ink-soft); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.5px; }

/* Motivation */
.motivation {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(120deg, #fff8ea, #fdeed6);
  border: 1px dashed var(--amber); border-radius: 16px;
  padding: 14px 18px; margin-bottom: 18px;
}
.motiv-icon { font-size: 24px; }
.motiv-text { flex: 1; min-width: 180px; margin: 0; font-size: 14px; color: var(--ink); font-style: italic; }

/* Controls */
.controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; }
.control-group { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.search-input, .control-select {
  font-family: "IBM Plex Mono", monospace; font-size: 13px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; color: var(--ink); outline: none;
}
.search-input:focus, .control-select:focus, .input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(194,112,61,0.15); }
.search-input { flex: 1; min-width: 140px; }

/* Buttons */
.btn {
  font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 13px;
  border: none; border-radius: 10px; padding: 10px 16px; cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--amber); color: #fff; box-shadow: 0 3px 0 var(--amber-deep); }
.btn-primary:hover { background: var(--amber-deep); }
.btn-add { white-space: nowrap; }
.btn-ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--paper-2); }
.btn-done { background: #4a7c59; color: #fff; box-shadow: 0 3px 0 #3a6347; flex: 1; }
.btn-done:hover { background: #3d6b4c; }
.btn-cheer { background: #7a5ea3; color: #fff; box-shadow: 0 3px 0 #634a86; }
.btn-cheer:hover { background: #634a86; }

/* Form */
.form-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px; margin-bottom: 22px; box-shadow: 0 6px 20px rgba(139,97,59,0.08);
  animation: rise 0.35s ease both;
}
.form-title { font-family: "Fraunces", serif; font-weight: 600; font-size: 20px; margin: 0 0 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-wide { grid-column: 1 / -1; }
.field-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-soft); }
.input {
  font-family: "IBM Plex Mono", monospace; font-size: 14px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; color: var(--ink); outline: none; width: 100%;
}
.textarea { resize: vertical; }
.range { width: 100%; accent-color: var(--amber); }
.priority-toggle { display: flex; gap: 8px; }
.prio-btn {
  flex: 1; font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 9px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink-soft); cursor: pointer; transition: all 0.15s;
}
.prio-active.prio-low { background: #4a7c59; color: #fff; border-color: #4a7c59; }
.prio-active.prio-medium { background: #c2843d; color: #fff; border-color: #c2843d; }
.prio-active.prio-high { background: #c14343; color: #fff; border-color: #c14343; }
.form-err { color: #c14343; font-size: 13px; margin-top: 12px; }
.form-actions { display: flex; gap: 10px; margin-top: 18px; }

/* Grid + cards */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.assign-card {
  background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--amber);
  border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 2px 0 var(--line); transition: transform 0.15s ease, box-shadow 0.15s ease;
  animation: rise 0.4s ease both;
}
.assign-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(139,97,59,0.14); }
.assign-done { opacity: 0.62; }
.assign-done .card-title { text-decoration: line-through; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.card-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.subject-pill { border: 1px solid; border-radius: 20px; padding: 3px 9px; font-weight: 600; white-space: nowrap; }
.type-chip { font-size: 11px; background: var(--paper-2); color: var(--ink-soft); border-radius: 20px; padding: 3px 9px; }
.prio-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.prio-dot-low { background: #4a7c59; }
.prio-dot-medium { background: #c2843d; }
.prio-dot-high { background: #c14343; box-shadow: 0 0 0 3px rgba(193,67,67,0.18); }
.card-title { font-family: "Fraunces", serif; font-weight: 600; font-size: 17px; margin: 0; line-height: 1.25; }
.card-notes { margin: 0; font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
.card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-top: auto; }
.due-label { font-weight: 600; }
.hours-label { color: var(--ink-soft); }

.progress-wrap { display: flex; align-items: center; gap: 8px; }
.progress-track { flex: 1; height: 7px; background: var(--paper-2); border-radius: 6px; overflow: hidden; position: relative; }
.progress-fill { height: 100%; border-radius: 6px; transition: width 0.3s ease; }
.progress-range { position: absolute; opacity: 0; width: 0; height: 0; }
.progress-pct { font-size: 11px; color: var(--ink-soft); min-width: 32px; text-align: right; }

/* Slider as full-width overlay for touch */
.progress-wrap { position: relative; }
.progress-range { position: static; opacity: 1; width: 70px; accent-color: var(--amber); height: auto; }

.card-actions { display: flex; gap: 8px; align-items: center; }
.icon-btn {
  font-family: inherit; font-size: 14px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 10px; cursor: pointer; color: var(--ink-soft); transition: all 0.15s;
}
.icon-btn:hover { background: var(--paper-2); }
.icon-danger:hover { background: #c1434315; color: #c14343; border-color: #c14343; }
.icon-confirm { background: #c14343; color: #fff; border-color: #c14343; font-size: 12px; }

/* Empty */
.empty-state { text-align: center; padding: 60px 20px; color: var(--ink-soft); }
.empty-emoji { font-size: 54px; margin-bottom: 10px; animation: bob 3s ease-in-out infinite; }
.empty-state h3 { font-family: "Fraunces", serif; font-weight: 600; font-size: 22px; margin: 0 0 6px; color: var(--ink); }
.empty-state p { margin: 0; font-size: 14px; }

/* Footer */
.app-footer { border-top: 1px solid var(--line); padding: 24px 20px; text-align: center; background: var(--paper-2); }
.footer-note { max-width: 620px; margin: 0 auto 10px; font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
.footer-note a, .footer-links a { color: var(--amber-deep); text-decoration: underline; }
.footer-links { margin: 0; font-size: 12px; color: var(--ink-soft); }

/* Confetti */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 100; overflow: hidden; }
.confetti-bit {
  position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px;
  animation: fall 2s ease-in forwards;
}
@keyframes fall {
  to { transform: translateY(105vh) rotate(720deg); opacity: 0.2; }
}

/* Responsive */
@media (max-width: 860px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .header-inner { flex-direction: row; align-items: center; }
  .brand-name { font-size: 22px; }
  .btn-add { width: 100%; }
  .control-group { width: 100%; }
  .search-input { min-width: 0; }
}
</parameter>
</invoke>