:root{
  --bg:#f4f1ea;
  --bg-soft:#fffaf2;
  --text:#1f2933;
  --muted:#6b7280;
  --panel:#fffdf8;
  --line:#e8dfd0;
  --accent:#7c3aed;
  --accent-2:#f59e0b;
  --danger:#dc2626;
  --success:#16a34a;
  --shadow:0 18px 45px rgba(31,41,55,.10);
  --shadow-soft:0 8px 22px rgba(31,41,55,.08);
  --radius:22px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  min-height:100vh;
  font-family:"Trebuchet MS","Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 10%, rgba(245,158,11,.16), transparent 28%),
    radial-gradient(circle at 88% 6%, rgba(124,58,237,.14), transparent 25%),
    linear-gradient(135deg,#fbf7ef 0%,#f3eee5 48%,#eee7dc 100%);
}

a{color:inherit}

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  padding:1rem 1.35rem;
  background:rgba(255,253,248,.88);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(232,223,208,.9);
  box-shadow:0 8px 28px rgba(31,41,55,.06);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-size:1.05rem;
  font-weight:900;
  letter-spacing:.01em;
  text-decoration:none;
}

.brand::before{
  content:"";
  width:15px;
  height:15px;
  border-radius:5px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 6px 16px rgba(124,58,237,.25);
}

.topbar nav{
  display:flex;
  align-items:center;
  gap:.55rem;
  flex-wrap:wrap;
}

.topbar nav a{
  padding:.48rem .72rem;
  border-radius:999px;
  color:#475569;
  text-decoration:none;
  font-weight:800;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}

.topbar nav a:hover{
  background:#efe7ff;
  color:#5b21b6;
  transform:translateY(-1px);
}

.container{
  width:min(1320px,100%);
  margin:0 auto;
  padding:1.35rem;
}

.grid.two{
  display:grid;
  grid-template-columns:370px 1fr;
  gap:1.25rem;
  align-items:start;
}

.panel,.auth-card{
  background:rgba(255,253,248,.94);
  border:1px solid rgba(232,223,208,.95);
  border-radius:var(--radius);
  padding:1.2rem;
  box-shadow:var(--shadow);
}

.sticky-form{
  position:sticky;
  top:5.6rem;
  align-self:start;
}

.auth-card{
  max-width:470px;
  margin:8vh auto;
}

h1{
  margin:.15rem 0 1.05rem;
  font-size:clamp(1.45rem,2.3vw,2rem);
  line-height:1.1;
  letter-spacing:-.035em;
}

h2{
  margin:.15rem 0 .65rem;
  font-size:1.12rem;
  letter-spacing:-.015em;
}

p{line-height:1.55}

form{display:grid;gap:.82rem}

.inline{display:inline}
.inline button{margin:0}

label{
  display:grid;
  gap:.38rem;
  color:#475569;
  font-weight:850;
}

input,textarea,select{
  width:100%;
  padding:.78rem .85rem;
  border:1px solid #d7cdbc;
  border-radius:15px;
  background:#fffaf2;
  color:var(--text);
  font:inherit;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

input:focus,textarea:focus,select:focus{
  border-color:#a78bfa;
  background:#fff;
  box-shadow:0 0 0 4px rgba(124,58,237,.12);
}

textarea{resize:vertical;min-height:105px}

button,.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  border:0;
  border-radius:15px;
  padding:.78rem 1rem;
  background:linear-gradient(135deg,#7c3aed,#6d28d9);
  color:white;
  text-decoration:none;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(124,58,237,.22);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

button:hover,.button:hover{
  transform:translateY(-1px);
  filter:saturate(1.08);
  box-shadow:0 14px 30px rgba(124,58,237,.28);
}

button:active,.button:active{transform:translateY(0)}

.button.ghost{
  background:#efe7dc;
  color:#374151;
  box-shadow:none;
}

.button.ghost:hover{background:#e8ddcf}

.small{
  font-size:.86rem;
  padding:.52rem .72rem;
  border-radius:12px;
}

.danger{
  background:linear-gradient(135deg,#ef4444,#dc2626);
  box-shadow:0 10px 22px rgba(220,38,38,.18);
}

.flash{
  padding:.9rem 1rem;
  border-radius:16px;
  margin-bottom:1rem;
  background:#eaf8ef;
  border:1px solid #b7e4c7;
  color:#14532d;
  box-shadow:var(--shadow-soft);
}

.flash.error{
  background:#fff0f0;
  border-color:#fecaca;
  color:#991b1b;
}

.notes{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(235px,1fr));
  gap:1rem;
}

.note{
  position:relative;
  min-height:178px;
  padding:1rem;
  border-radius:12px 22px 14px 22px;
  border:1px solid rgba(0,0,0,.07);
  box-shadow:0 14px 28px rgba(31,41,55,.14);
  transform:rotate(-.45deg);
  overflow-wrap:anywhere;
  transition:transform .15s ease, box-shadow .15s ease;
}

.note::before{
  content:"";
  position:absolute;
  top:10px;
  left:50%;
  width:58px;
  height:13px;
  border-radius:999px;
  background:rgba(255,255,255,.48);
  transform:translateX(-50%) rotate(-2deg);
  box-shadow:0 1px 5px rgba(0,0,0,.08);
}

.note:hover{
  transform:rotate(0deg) translateY(-3px);
  box-shadow:0 18px 34px rgba(31,41,55,.18);
}

.note:nth-child(even){transform:rotate(.55deg)}
.note:nth-child(3n){transform:rotate(-.2deg)}
.note:nth-child(even):hover,.note:nth-child(3n):hover{transform:rotate(0deg) translateY(-3px)}

.note h2{padding-top:.45rem}
.note p{margin:.55rem 0 0}

.note.yellow{background:#fff1a8}
.note.blue{background:#cfe7ff}
.note.green{background:#cdf7dc}
.note.pink{background:#ffd6e8}
.note.purple{background:#e6d7ff}
.note.gray{background:#edf0f5}

.card-actions{
  display:flex;
  gap:.48rem;
  align-items:center;
  flex-wrap:wrap;
  margin-top:.9rem;
}

.card-actions form{display:inline}

.row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.78rem;
}

.calendar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:.2rem;
}

.view-tabs{
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
}

.view-tabs a{
  padding:.52rem .78rem;
  border-radius:999px;
  text-decoration:none;
  background:#efe7dc;
  color:#475569;
  font-weight:900;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}

.view-tabs a:hover{transform:translateY(-1px)}
.view-tabs a.active{background:#7c3aed;color:white}

.calendar-nav{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  margin:0 0 1rem;
}

.month-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:.6rem;
}

.day-cell{
  min-height:138px;
  background:rgba(255,253,248,.92);
  border:1px solid var(--line);
  border-radius:18px;
  padding:.7rem;
  box-shadow:var(--shadow-soft);
  transition:transform .15s ease, box-shadow .15s ease;
}

.day-cell:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(31,41,55,.11);
}

.day-cell strong{
  display:inline-flex;
  min-width:30px;
  height:30px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#f5eadb;
}

.day-cell.muted{opacity:.48}

.event-pill{
  margin-top:.5rem;
  background:#f2ecff;
  border-left:4px solid var(--accent);
  border-radius:12px;
  padding:.42rem .48rem;
  font-size:.86rem;
  line-height:1.3;
}

.event-pill span{font-weight:950;color:#5b21b6}
.event-pill a{float:right;text-decoration:none;font-weight:900;color:#7c3aed}

.agenda{display:grid;gap:.85rem}

.agenda-day,.agenda-event{
  background:rgba(255,253,248,.94);
  border:1px solid var(--line);
  border-radius:20px;
  padding:1rem;
  box-shadow:var(--shadow-soft);
}

.agenda-day h2{margin-bottom:.8rem}
.agenda-event{margin:.65rem 0;background:#fffaf2}
.agenda-event strong{color:#5b21b6}

.year-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:.85rem;
}

.month-tile{
  display:grid;
  gap:.6rem;
  min-height:108px;
  background:rgba(255,253,248,.94);
  border:1px solid var(--line);
  border-radius:20px;
  padding:1rem;
  text-decoration:none;
  box-shadow:var(--shadow-soft);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.month-tile:hover{
  transform:translateY(-3px);
  border-color:#c4b5fd;
  box-shadow:0 14px 30px rgba(31,41,55,.12);
}

.month-tile strong{font-size:1.05rem}
.month-tile span{color:var(--muted)}
.empty{color:var(--muted)}

@media (max-width:850px){
  .grid.two{grid-template-columns:1fr}
  .sticky-form{position:static}
  .topbar{align-items:flex-start;flex-direction:column;padding:.9rem 1rem}
  .topbar nav{gap:.35rem}
  .container{padding:.85rem}
  .notes{grid-template-columns:1fr}
  .month-grid{grid-template-columns:1fr}
  .day-cell{min-height:auto}
  .row{grid-template-columns:1fr}
  .panel,.auth-card{border-radius:18px;padding:1rem}
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#111827;
    --bg-soft:#172033;
    --text:#f3f4f6;
    --panel:#172033;
    --line:#2c3a4f;
    --muted:#a8b3c4;
    --shadow:0 18px 45px rgba(0,0,0,.24);
    --shadow-soft:0 8px 22px rgba(0,0,0,.18);
  }

  body{
    background:
      radial-gradient(circle at 12% 10%, rgba(245,158,11,.12), transparent 28%),
      radial-gradient(circle at 88% 6%, rgba(124,58,237,.17), transparent 25%),
      linear-gradient(135deg,#0f172a 0%,#111827 55%,#1e1b2e 100%);
  }

  .topbar{background:rgba(23,32,51,.88);border-bottom-color:#2c3a4f}
  .topbar nav a{color:#d1d5db}
  .topbar nav a:hover{background:#2b2146;color:#ddd6fe}
  label{color:#d1d5db}
  input,textarea,select,.day-cell,.agenda-day,.agenda-event,.month-tile{background:#172033;color:#f3f4f6;border-color:#334155}
  input:focus,textarea:focus,select:focus{background:#111827}
  .button.ghost,.view-tabs a{background:#263244;color:#e5e7eb}
  .button.ghost:hover,.view-tabs a:hover{background:#334155}
  .day-cell strong{background:#263244}
  .event-pill{background:#251d3a}
  .note{color:#1f2933}
}