/* ========================================
   mynotes - Sticky Note Corkboard Styles
   ======================================== */

:root {
  /* Board dimensions */
  --board-width: 2400px;
  --board-height: 1600px;
  --note-size: 180px;

  /* App background */
  --app-bg: #050505;

  /* Floating action buttons */
  --fab-size: clamp(44px, 7vw, 54px);
  --fab-gap: clamp(12px, 3vw, 16px);
  --fab-edge: clamp(16px, 3vw, 22px);
  --fab-radius: 10px;
  --fab-icon-size: clamp(1.1rem, 3.5vw, 1.4rem);
  --fab-menu-offset: clamp(8px, 2vw, 12px);
  
  /* Colors */
  --cork-bg: #c4a574;
  --cork-dark: #8b7355;
  --note-yellow: #fff740;
  --note-pink: #ff7eb9;
  --note-blue: #7afcff;
  --note-green: #98fb98;
  --note-orange: #ffd29d;
  --note-lavender: #d8c7ff;
  
  /* Style */
  --ink: #2f2b24;
  --shadow-hard: 6px 6px 0 rgba(47, 43, 36, 0.22);
  --shadow-hard-soft: 4px 4px 0 rgba(47, 43, 36, 0.18);
  --shadow-hard-strong: 8px 8px 0 rgba(47, 43, 36, 0.28);
  
  /* Shadows */
  --note-shadow: var(--shadow-hard-soft);
  --note-shadow-drag: var(--shadow-hard-strong);
  --note-shadow-color: rgba(47, 43, 36, 0.22);
  --note-shadow-color-drag: rgba(47, 43, 36, 0.32);
}

/* ========================================
   Reset & Base
   ======================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Trebuchet MS', Verdana, 'Segoe UI', sans-serif;
  background: var(--app-bg);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ========================================
   Screens
   ======================================== */
#room-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

body.room-bg-active #room-bg {
  opacity: 1;
}

.screen {
  display: none;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.screen.active {
  display: flex;
}

/* ========================================
   Login Screen
   ======================================== */
#login-screen {
  align-items: center;
  justify-content: center;
  background: transparent;
}

.login-container {
  background: #fffdf5;
  padding: 2.5rem 2rem;
  border-radius: 12px;
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-hard);
  max-width: 400px;
  width: 90%;
  text-align: center;
}

.app-title {
  font-size: 2rem;
  color: #3a3a3a;
  margin-bottom: 0.35rem;
}

.app-subtitle {
  color: #5f5f5f;
  font-size: 0.92rem;
  margin-bottom: 1.75rem;
}

.input-group {
  position: relative;
  text-align: left;
  margin-bottom: 1rem;
}

.input-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #333;
  font-weight: 500;
}

.input-group input {
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 0.75rem;
  border: 2px solid var(--ink);
  border-radius: 10px;
  font-size: 1rem;
  background: #fff;
  box-shadow: 3px 3px 0 rgba(47, 43, 36, 0.12);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.input-group input::placeholder {
  color: #b4b4b4;
}

.input-group input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 4px 4px 0 rgba(47, 43, 36, 0.2);
}

.toggle-password {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.toggle-password:hover {
  opacity: 1;
}

.btn {
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--ink);
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-hard-soft);
  transition: transform 0.1s, box-shadow 0.2s, background 0.2s;
}

.btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(47, 43, 36, 0.18);
}

.btn-primary {
  background: #00af6b;
  color: white;
  width: 100%;
}

.login-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.login-actions .btn-primary {
  width: auto;
  flex: 1;
}

.btn-primary:hover {
  background: #1f7a47;
}

.btn-confirm {
  background: #00af6b;
  color: white;
}

.btn-confirm:hover {
  background: #1f7a47;
}

.btn-secondary {
  background: #f1f1f1;
  color: #333;
}

.btn-secondary:hover {
  background: #d0d0d0;
}

.btn-small {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

.remember-room {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: #555;
}

.remember-room-inline {
  margin-bottom: 0;
  white-space: nowrap;
}

.login-actions .remember-room {
  margin-bottom: 0;
}

.remember-room input {
  width: 16px;
  height: 16px;
}

.hint {
  margin-top: 1.5rem;
  font-size: 0.82rem;
  color: #3a3a3a;
  line-height: 1.5;
}

/* ========================================
   Board Screen
   ======================================== */
#board-screen {
  flex-direction: column;
}

/* Floating action buttons */
.room-label {
  position: fixed;
  top: var(--fab-edge);
  left: var(--fab-edge);
  min-height: var(--fab-size);
  padding: 0 16px;
  border-radius: var(--fab-radius);
  background: #3a3a3a;
  color: #f2f2f2;
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-hard-soft);
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  z-index: 1500;
  user-select: none;
}

.room-label.is-hidden {
  display: none;
}

.fab-btn {
  width: var(--fab-size);
  height: var(--fab-size);
  border: 2px solid var(--ink);
  border-radius: var(--fab-radius);
  background: #fff;
  color: #333;
  font-size: var(--fab-icon-size);
  cursor: pointer;
  box-shadow: var(--shadow-hard-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.fab-btn:hover {
  background-color: #f9f9f9;
  box-shadow: 5px 5px 0 rgba(47, 43, 36, 0.2);
}

.fab-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(47, 43, 36, 0.18);
}

.fab-top-right {
  position: fixed;
  top: var(--fab-edge);
  right: var(--fab-edge);
  z-index: 1500;
}

.fab-exit {
  background-color: #fffdf5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 560'%3E%3Cpath fill='%2300AF6B' d='M%20490.00847%2C426.30353%20476.01016%2C389.202%20c%20-6.29359%2C-15.40393%20-20.29754%2C-25.90277%20-37.80672%2C-25.90277%20h%20-6.29359%20V%2043.395188%20H%20128.10708%20V%20220.49813%20h%2039.90082%20l%2045.50014%2C-56.705%20c%209.10455%2C-10.49319%2023.09721%2C-17.50371%2038.49535%2C-17.50371%20h%2097.30516%20c%2015.39814%2C0%2028.69653%2C8.39343%2035.69568%2C21.70324%20l%2028.70782%2C54.59395%20c%201.39983%2C2.09977%202.0941%2C4.9051%202.0941%2C8.40471%200%2C9.79327%20-8.39898%2C18.19234%20-18.20344%2C18.19234%20-7.69907%2C0%20-13.29275%2C-3.49397%20-16.80361%2C-9.79327%20l%20-25.89123%2C-49.70013%20h%20-42.00056%20l%2032.1961%2C80.50236%209.80446%2C102.89424%20h%2083.28993%20c%2013.30968%2C0%2023.80841%2C8.40471%2028.70782%2C19.60911%20l%209.0989%2C23.79736%20H%20333.19921%20c%20-10.48744%2C0%20-19.59763%2C-7.6935%20-20.2919%2C-18.19798%20l%20-9.80446%2C-90.30128%20-76.99069%2C159.59924%20c%20-4.20513%2C9.10464%20-14.00395%2C15.40394%20-25.20259%2C15.40394%20h%20-37.1068%20l%2094.5055%2C-195.30657%20-29.3908%2C-73.4975%20-28.0079%2C34.30185%20c%20-6.99351%2C9.10463%20-18.90901%2C15.39829%20-31.50184%2C15.39829%20h%20-41.295%20v%20231.00261%20l%2065.79768%2C65.09843%20H%200%20V%200%20h%20560%20v%20559.99436%20h%20-63.00367%20l%20-65.09212%2C-65.09843%20v%20-68.5924%20z%20M%20228.20627%2C64.39286%20c%2021.70302%2C0%2039.89517%2C18.203626%2039.89517%2C39.90122%200%2C21.70324%20-18.19215%2C39.2013%20-39.89517%2C39.2013%20-21.70302%2C0%20-39.20655%2C-17.49806%20-39.20655%2C-39.2013%200%2C-21.697594%2017.50353%2C-39.90122%2039.20655%2C-39.90122%20M%20245.70979%2C509.59994%20296.10934%2C560%20h%20-60.90957%20l%20-65.79768%2C-65.10407%20h%2039.19526%20c%2014.00959%2C0%2027.30798%2C5.60502%2037.11244%2C14.70401'/%3E%3C/svg%3E");
  background-size: 115% 115%;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
  font-size: 0;
  transition: transform 0.15s, box-shadow 0.2s, background-color 0.2s;
}

.fab-exit:hover {
  background: #dedede url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 560'%3E%3Cpath fill='%231f7a47' d='M%20490.00847%2C426.30353%20476.01016%2C389.202%20c%20-6.29359%2C-15.40393%20-20.29754%2C-25.90277%20-37.80672%2C-25.90277%20h%20-6.29359%20V%2043.395188%20H%20128.10708%20V%20220.49813%20h%2039.90082%20l%2045.50014%2C-56.705%20c%209.10455%2C-10.49319%2023.09721%2C-17.50371%2038.49535%2C-17.50371%20h%2097.30516%20c%2015.39814%2C0%2028.69653%2C8.39343%2035.69568%2C21.70324%20l%2028.70782%2C54.59395%20c%201.39983%2C2.09977%202.0941%2C4.9051%202.0941%2C8.40471%200%2C9.79327%20-8.39898%2C18.19234%20-18.20344%2C18.19234%20-7.69907%2C0%20-13.29275%2C-3.49397%20-16.80361%2C-9.79327%20l%20-25.89123%2C-49.70013%20h%20-42.00056%20l%2032.1961%2C80.50236%209.80446%2C102.89424%20h%2083.28993%20c%2013.30968%2C0%2023.80841%2C8.40471%2028.70782%2C19.60911%20l%209.0989%2C23.79736%20H%20333.19921%20c%20-10.48744%2C0%20-19.59763%2C-7.6935%20-20.2919%2C-18.19798%20l%20-9.80446%2C-90.30128%20-76.99069%2C159.59924%20c%20-4.20513%2C9.10464%20-14.00395%2C15.40394%20-25.20259%2C15.40394%20h%20-37.1068%20l%2094.5055%2C-195.30657%20-29.3908%2C-73.4975%20-28.0079%2C34.30185%20c%20-6.99351%2C9.10463%20-18.90901%2C15.39829%20-31.50184%2C15.39829%20h%20-41.295%20v%20231.00261%20l%2065.79768%2C65.09843%20H%200%20V%200%20h%20560%20v%20559.99436%20h%20-63.00367%20l%20-65.09212%2C-65.09843%20v%20-68.5924%20z%20M%20228.20627%2C64.39286%20c%2021.70302%2C0%2039.89517%2C18.203626%2039.89517%2C39.90122%200%2C21.70324%20-18.19215%2C39.2013%20-39.89517%2C39.2013%20-21.70302%2C0%20-39.20655%2C-17.49806%20-39.20655%2C-39.2013%200%2C-21.697594%2017.50353%2C-39.90122%2039.20655%2C-39.90122%20M%20245.70979%2C509.59994%20296.10934%2C560%20h%20-60.90957%20l%20-65.79768%2C-65.10407%20h%2039.19526%20c%2014.00959%2C0%2027.30798%2C5.60502%2037.11244%2C14.70401'/%3E%3C/svg%3E") center / 115% 115% no-repeat;
  box-shadow: var(--shadow-hard);
}

.fab-exit:active {
  background: #fffdf5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 560'%3E%3Cpath fill='%2300AF6B' d='M%20490.00847%2C426.30353%20476.01016%2C389.202%20c%20-6.29359%2C-15.40393%20-20.29754%2C-25.90277%20-37.80672%2C-25.90277%20h%20-6.29359%20V%2043.395188%20H%20128.10708%20V%20220.49813%20h%2039.90082%20l%2045.50014%2C-56.705%20c%209.10455%2C-10.49319%2023.09721%2C-17.50371%2038.49535%2C-17.50371%20h%2097.30516%20c%2015.39814%2C0%2028.69653%2C8.39343%2035.69568%2C21.70324%20l%2028.70782%2C54.59395%20c%201.39983%2C2.09977%202.0941%2C4.9051%202.0941%2C8.40471%200%2C9.79327%20-8.39898%2C18.19234%20-18.20344%2C18.19234%20-7.69907%2C0%20-13.29275%2C-3.49397%20-16.80361%2C-9.79327%20l%20-25.89123%2C-49.70013%20h%20-42.00056%20l%2032.1961%2C80.50236%209.80446%2C102.89424%20h%2083.28993%20c%2013.30968%2C0%2023.80841%2C8.40471%2028.70782%2C19.60911%20l%209.0989%2C23.79736%20H%20333.19921%20c%20-10.48744%2C0%20-19.59763%2C-7.6935%20-20.2919%2C-18.19798%20l%20-9.80446%2C-90.30128%20-76.99069%2C159.59924%20c%20-4.20513%2C9.10464%20-14.00395%2C15.40394%20-25.20259%2C15.40394%20h%20-37.1068%20l%2094.5055%2C-195.30657%20-29.3908%2C-73.4975%20-28.0079%2C34.30185%20c%20-6.99351%2C9.10463%20-18.90901%2C15.39829%20-31.50184%2C15.39829%20h%20-41.295%20v%20231.00261%20l%2065.79768%2C65.09843%20H%200%20V%200%20h%20560%20v%20559.99436%20h%20-63.00367%20l%20-65.09212%2C-65.09843%20v%20-68.5924%20z%20M%20228.20627%2C64.39286%20c%2021.70302%2C0%2039.89517%2C18.203626%2039.89517%2C39.90122%200%2C21.70324%20-18.19215%2C39.2013%20-39.89517%2C39.2013%20-21.70302%2C0%20-39.20655%2C-17.49806%20-39.20655%2C-39.2013%200%2C-21.697594%2017.50353%2C-39.90122%2039.20655%2C-39.90122%20M%20245.70979%2C509.59994%20296.10934%2C560%20h%20-60.90957%20l%20-65.79768%2C-65.10407%20h%2039.19526%20c%2014.00959%2C0%2027.30798%2C5.60502%2037.11244%2C14.70401'/%3E%3C/svg%3E") center / 115% 115% no-repeat;
}

.fab-container {
  position: fixed;
  right: var(--fab-edge);
  bottom: var(--fab-edge);
  z-index: 1500;
}

.fab-primary {
  background: #fff;
  color: #333;
}

.fab-primary:hover {
  background-color: #f1f1f1;
}

.fab-menu {
  position: absolute;
  right: 0;
  bottom: calc(var(--fab-size) + var(--fab-gap) + var(--fab-menu-offset));
  display: flex;
  flex-direction: column;
  gap: var(--fab-gap);
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.fab-option {
  width: var(--fab-size);
  height: var(--fab-size);
  border: 2px solid var(--ink);
  border-radius: var(--fab-radius);
  background: #fff;
  font-size: var(--fab-icon-size);
  cursor: pointer;
  box-shadow: var(--shadow-hard-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.fab-option:hover {
  background-color: #f9f9f9;
  box-shadow: 5px 5px 0 rgba(47, 43, 36, 0.2);
}

.fab-icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70% 70%;
  color: transparent;
  font-size: 0;
}

.fab-icon-add {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 14V7C20 5.34315 18.6569 4 17 4H12M20 14L13.5 20M20 14H15.5C14.3954 14 13.5 14.8954 13.5 16V20M13.5 20H7C5.34315 20 4 18.6569 4 17V12' stroke='%232f2b24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 4V7M7 10V7M7 7H4M7 7H10' stroke='%232f2b24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 62% 62%;
}

.fab-icon-text {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M13 7H5.2C4.0799 7 3.51984 7 3.09202 7.21799C2.71569 7.40973 2.40973 7.71569 2.21799 8.09202C2 8.51984 2 9.0799 2 10.2V13.8C2 14.9201 2 15.4802 2.21799 15.908C2.40973 16.2843 2.71569 16.5903 3.09202 16.782C3.51984 17 4.07989 17 5.2 17H13M17 7H18.8C19.9201 7 20.4802 7 20.908 7.21799C21.2843 7.40973 21.5903 7.71569 21.782 8.09202C22 8.51984 22 9.0799 22 10.2V13.8C22 14.9201 22 15.4802 21.782 15.908C21.5903 16.2843 21.2843 16.5903 20.908 16.782C20.4802 17 19.9201 17 18.8 17H17M17 21L17 3M19.5 3.00001L14.5 3M19.5 21L14.5 21' stroke='%232f2b24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.fab-icon-image {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12.5 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H17C17.93 21 18.395 21 18.7765 20.8978C19.8117 20.6204 20.6204 19.8117 20.8978 18.7765C21 18.395 21 17.93 21 17M19 8V2M16 5H22M10.5 8.5C10.5 9.60457 9.60457 10.5 8.5 10.5C7.39543 10.5 6.5 9.60457 6.5 8.5C6.5 7.39543 7.39543 6.5 8.5 6.5C9.60457 6.5 10.5 7.39543 10.5 8.5ZM14.99 11.9181L6.53115 19.608C6.05536 20.0406 5.81747 20.2568 5.79643 20.4442C5.77819 20.6066 5.84045 20.7676 5.96319 20.8755C6.10478 21 6.42628 21 7.06929 21H16.456C17.8951 21 18.6147 21 19.1799 20.7582C19.8894 20.4547 20.4547 19.8894 20.7582 19.1799C21 18.6147 21 17.8951 21 16.456C21 15.9717 21 15.7296 20.9471 15.5042C20.8805 15.2208 20.753 14.9554 20.5733 14.7264C20.4303 14.5442 20.2412 14.3929 19.8631 14.0905L17.0658 11.8527C16.6874 11.5499 16.4982 11.3985 16.2898 11.3451C16.1061 11.298 15.9129 11.3041 15.7325 11.3627C15.5279 11.4291 15.3486 11.5921 14.99 11.9181Z' stroke='%232f2b24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.fab-icon-doodle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8.99997 11.2224L12.7778 15.0002M7.97485 20.975C6.60801 22.3419 4 22.0002 2 22.0002C3.0251 20.0002 1.65827 17.3921 3.0251 16.0253C4.39194 14.6585 6.60801 14.6585 7.97485 16.0253C9.34168 17.3921 9.34168 19.6082 7.97485 20.975ZM11.9216 15.9248L21.0587 6.05671C21.8635 5.18755 21.8375 3.83776 20.9999 3.00017C20.1624 2.16258 18.8126 2.13663 17.9434 2.94141L8.07534 12.0785C7.5654 12.5507 7.31043 12.7868 7.16173 13.0385C6.80514 13.6423 6.79079 14.3887 7.12391 15.0057C7.26283 15.2631 7.50853 15.5088 7.99995 16.0002C8.49136 16.4916 8.73707 16.7373 8.99438 16.8762C9.6114 17.2093 10.3578 17.195 10.9616 16.8384C11.2134 16.6897 11.4494 16.4347 11.9216 15.9248Z' stroke='%232f2b24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.fab-container.open .fab-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.fab-container.open .fab-primary {
  background-color: #e0e0e0;
  transform: rotate(45deg);
}

/* Board Viewport */
#board-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  cursor: grab;
}

#board-viewport.dragging {
  cursor: grabbing;
}

/* Corkboard */
#corkboard {
  position: absolute;
  width: var(--board-width);
  height: var(--board-height);
  background: linear-gradient(135deg, #c7aa78 0%, #b89463 100%);
  will-change: transform;
  box-shadow: 0 0 0 3px rgba(47, 43, 36, 0.12), 0 12px 24px rgba(47, 43, 36, 0.18);
  border: 6px solid var(--cork-dark);
}

/* ========================================
   Sticky Notes
   ======================================== */
.sticky-note {
  position: absolute;
  width: var(--note-size);
  height: var(--note-size);
  cursor: grab;
  user-select: none;
  touch-action: none;
  overflow: visible;
}

.note-shadow {
  position: absolute;
  inset: 0;
  transform: translate(6px, 6px);
  pointer-events: none;
  transition: transform 0.15s;
}

.note-shadow-inner {
  width: 100%;
  height: 100%;
  background: var(--note-shadow-color);
  transform: rotate(var(--note-rot, 0deg));
  transform-origin: center;
  transition: transform 0.15s, background 0.15s;
}

.note-body {
  position: absolute;
  inset: 0;
  padding: 12px;
  border: 2px solid var(--ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: rotate(var(--note-rot, 0deg));
  transform-origin: center;
  transition: transform 0.15s;
}

.sticky-note.dragging {
  cursor: grabbing;
  z-index: 1000;
  opacity: 0.92;
  transition: none;
  will-change: left, top;
}

.sticky-note.dragging .note-shadow {
  transform: translate(8px, 8px);
}

.sticky-note.dragging .note-shadow-inner {
  background: var(--note-shadow-color-drag);
}

.sticky-note.dropping .note-body,
.sticky-note.dropping .note-shadow-inner {
  animation: drop-bounce 0.2s ease-out;
}

@keyframes drop-bounce {
  0% { transform: rotate(var(--note-rot, 0deg)) scale(1.02) translateY(-2px); }
  60% { transform: rotate(var(--note-rot, 0deg)) scale(0.99) translateY(1px); }
  100% { transform: rotate(var(--note-rot, 0deg)) scale(1) translateY(0); }
}

/* Note Colors */
.note-body.yellow { background-color: var(--note-yellow); }
.note-body.pink { background-color: var(--note-pink); }
.note-body.blue { background-color: var(--note-blue); }
.note-body.green { background-color: var(--note-green); }
.note-body.orange { background-color: var(--note-orange); }
.note-body.lavender { background-color: var(--note-lavender); }

/* Color variants for realism */
.note-body.yellow.v1 { background-color: #fff84d; }
.note-body.yellow.v2 { background-color: #ffef33; }
.note-body.pink.v1 { background-color: #ff8fc4; }
.note-body.pink.v2 { background-color: #ff6fae; }
.note-body.blue.v1 { background-color: #8affff; }
.note-body.blue.v2 { background-color: #6af7f7; }
.note-body.green.v1 { background-color: #a8ffa8; }
.note-body.green.v2 { background-color: #88f088; }
.note-body.orange.v1 { background-color: #ffddb6; }
.note-body.orange.v2 { background-color: #ffc88a; }
.note-body.lavender.v1 { background-color: #e2d5ff; }
.note-body.lavender.v2 { background-color: #cbb8ff; }

/* Note content */
.note-content {
  flex: 1;
  overflow: hidden;
  margin-top: 8px;
  font-size: 0.92rem;
  line-height: 1.35;
  word-wrap: break-word;
  color: var(--ink);
}

.note-content.text-content {
  white-space: pre-wrap;
}

.note-content canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

/* Rotation mode */
.sticky-note.rotating {
  cursor: grabbing;
}

/* ========================================
   Modals
   ======================================== */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}

.modal.active {
  display: flex;
}

.modal-content {
  background: #fffdf5;
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 90%;
  max-height: 90%;
  overflow: auto;
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-hard);
}

.confirm-modal {
  width: min(420px, 92vw);
  text-align: center;
}

.confirm-modal h3 {
  margin-bottom: 0.5rem;
  color: #333;
}

.confirm-text {
  color: #6a6a6a;
  font-size: 0.95rem;
}

.note-editor {
  width: 320px;
}

#doodle-modal .note-editor {
  width: 360px;
}

.note-editor h3 {
  margin-bottom: 1rem;
  color: #333;
  text-align: center;
}

.note-editor textarea {
  width: 100%;
  height: 120px;
  padding: 0.75rem;
  border: 2px solid var(--ink);
  border-radius: 10px;
  font-size: 1rem;
  resize: none;
  font-family: inherit;
  box-shadow: 3px 3px 0 rgba(47, 43, 36, 0.12);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.note-editor textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 4px 4px 0 rgba(47, 43, 36, 0.2);
}

.color-picker {
  margin: 1rem 0;
}

.color-picker label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: #666;
}

.color-options {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
}

.color-btn {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 3px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.2s;
}

.color-btn:hover {
  transform: scale(1.1);
}

.color-btn.selected {
  border-color: var(--ink);
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.modal-actions .btn {
  flex: 1 1 110px;
}

/* Drop zone */
.drop-zone {
  border: 2px dashed var(--ink);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.2s, background 0.2s;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.drop-zone.has-image {
  padding: 1rem;
}

.drop-zone.has-image p {
  display: none;
}

.drop-zone.has-image .image-preview {
  display: block;
}

.drop-zone:hover,
.drop-zone.dragover {
  border-color: var(--ink);
  background: rgba(47, 43, 36, 0.08);
}

.drop-zone p {
  color: #888;
  font-size: 0.9rem;
}

.image-preview {
  display: none;
  width: 100%;
  max-width: 256px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  image-rendering: pixelated;
}

.image-preview.has-image {
  display: block;
}

/* Doodle canvas */
.doodle-canvas {
  display: block;
  width: 256px;
  height: 256px;
  margin: 0 auto 1rem;
  border: 2px solid var(--ink);
  border-radius: 6px;
  cursor: crosshair;
  image-rendering: pixelated;
  background: white;
}

.doodle-tools {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.doodle-tool-group {
  display: flex;
  gap: 0.5rem;
}

.doodle-tool-btn.active,
#doodle-eraser.active {
  background: #333;
  color: #fff;
}

/* ========================================
   Toasts
   ======================================== */
.toast-container {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 5200;
  pointer-events: none;
}

.toast {
  min-width: 220px;
  max-width: min(360px, 90vw);
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 2px solid var(--ink);
  background: #fffdf5;
  color: var(--ink);
  box-shadow: var(--shadow-hard);
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.05em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.toast-error {
  background: #fff1f1;
}

.toast.toast-info {
  background: #f5f1ff;
}

/* ========================================
   Loading Overlay
   ======================================== */
.loading-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 5000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.loading-overlay.active {
  display: flex;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-overlay p {
  margin-top: 1rem;
  color: white;
  font-size: 0.9rem;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 480px) {
  .login-container {
    padding: 1.5rem 1rem;
  }
  
  .app-title {
    font-size: 1.5rem;
  }

  .room-label {
    padding: 0 12px;
    font-size: 0.78rem;
  }
  
  .note-editor {
    width: 280px;
  }

  #doodle-modal .note-editor {
    width: min(360px, 92vw);
  }
}