.board {
flex-grow: 1;
display: flex;
flex-direction: column;
min-height: 0;
gap: 0;
}
@keyframes pl-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pl-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pl-rise { animation: pl-rise 600ms var(--ease) both; }
.pl-d1 { animation-delay:  80ms; }
.pl-d2 { animation-delay: 160ms; }
.pl-d3 { animation-delay: 240ms; }
.pl-d4 { animation-delay: 320ms; }
.pl-d5 { animation-delay: 400ms; }
.pl-bar { transform-origin: left center; animation: pl-grow 800ms var(--ease) both; animation-delay: 240ms; }
.pl-nav { transition: background-color var(--t-fast) ease, color var(--t-fast) ease; }
.pl-nav:hover { background-color: rgba(28, 28, 30, 0.06); color: var(--ink); }
.pl-btn { transition: transform var(--t-fast) ease, box-shadow var(--t-base) var(--ease); }
.pl-btn:hover { transform: translateY(-1px); box-shadow: rgba(28, 28, 30, 0.2) 0 6px 18px 0; }
.pl-row { transition: background-color var(--t-fast) ease; }
.pl-row:hover { background: var(--surface-card-hi); }
.pl-card { transition: box-shadow var(--t-base) var(--ease); }
.pl-card:hover { box-shadow: rgba(40, 120, 60, 0.18) 0 12px 40px 0, rgba(255, 255, 255, 0.9) 0 0 0 1px inset; }
.pl-green, .pl-gold { transition: transform var(--t-fast) ease, box-shadow var(--t-base) var(--ease); }
.pl-green:hover { transform: translateY(-1px); box-shadow: rgba(40, 167, 69, 0.45) 0 8px 24px 0; }
.pl-gold:hover  { transform: translateY(-1px); box-shadow: rgba(40, 167, 69, 0.50) 0 8px 26px 0; }
.pl-del, .pl-rej { transition: background-color var(--t-fast) ease, color var(--t-fast) ease; }
.pl-del:hover { background-color: rgba(192, 57, 43, 0.12); color: var(--danger); }
.pl-rej:hover { background-color: rgba(168, 50, 42, 0.12); color: var(--danger); }
.pl-key { transition: background-color var(--t-fast) ease, color var(--t-fast) ease; }
.pl-key:hover { background-color: rgba(40, 167, 69, 0.3); }
.pl-field { transition: box-shadow var(--t-fast) ease; }
.pl-field:hover { box-shadow: rgba(28, 28, 30, 0.16) 0 0 0 1px inset; }
.pl-field:focus { outline: none; box-shadow: var(--accent) 0 0 0 2px inset; background: #fff; }
.pl-eye { transition: background-color var(--t-fast) ease, color var(--t-fast) ease; }
.pl-eye:hover { background-color: rgba(28, 28, 30, 0.07); color: var(--ink); }
.pl-link { transition: color var(--t-fast) ease; }
.pl-link:hover { color: var(--ink); }
.pl-edit { border-bottom: 1px dashed rgba(28, 28, 30, 0.3); transition: border-color var(--t-fast) ease; }
.pl-edit:hover { border-bottom-color: var(--ink); }
.pl-case { transition: transform 200ms var(--ease), box-shadow 240ms ease, background-color var(--t-fast) ease; }
.pl-case:hover { transform: translateY(-3px); box-shadow: rgba(40, 167, 69, 0.28) 0 12px 30px 0; }
.pl-act { opacity: 0.55; transition: opacity 200ms ease; }
.pl-row:hover .pl-act, .pl-act:hover, .pl-act:focus-within { opacity: 1; }
.pl-thumb { transition: transform var(--t-base) var(--ease); }
.pl-thumb:hover { transform: translateY(-2px); }
.pl-inc { transition: box-shadow var(--t-base) var(--ease), transform var(--t-fast) ease; cursor: pointer; }
.pl-inc:hover { transform: translateY(-2px); box-shadow: rgba(40, 120, 60, 0.24) 0 8px 24px 0; }
.pl-drag { transition: background-color var(--t-fast) ease, box-shadow var(--t-base) var(--ease), transform var(--t-fast) ease; cursor: grab; }
.pl-drag:active { cursor: grabbing; }
.pl-drag:hover { background-color: #fff; box-shadow: rgba(40, 120, 60, 0.3) 0 6px 18px 0; transform: translateX(2px); }
.pl-built { transition: box-shadow var(--t-base) var(--ease); }
.pl-built:hover { box-shadow: rgba(28, 28, 30, 0.16) 0 0 0 1px inset, rgba(40, 120, 60, 0.2) 0 8px 24px 0; }
.pl-tile { transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.pl-tile:hover { transform: translateY(-4px); box-shadow: rgba(40, 120, 60, 0.22) 0 14px 34px 0; }
.pl-zoom { opacity: 0; transition: opacity var(--t-base) var(--ease); }
.pl-tile:hover .pl-zoom, .pl-tile:focus-within .pl-zoom { opacity: 1; }
.pl-t1 { animation-delay:  60ms; } .pl-t2 { animation-delay: 110ms; }
.pl-t3 { animation-delay: 160ms; } .pl-t4 { animation-delay: 210ms; }
.pl-t5 { animation-delay: 260ms; } .pl-t6 { animation-delay: 310ms; }
.pl-t7 { animation-delay: 360ms; } .pl-t8 { animation-delay: 410ms; }
@keyframes pl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.pl-alarm { animation: pl-pulse 2.2s ease-in-out infinite; }
@keyframes pl-slide  { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }
.pl-halo   { opacity: 0.75; }
.pl-ripple { opacity: 0.6; }
.pl-ripple-b, .pl-ripple-c { display: none; }
.pl-slide  { animation: pl-slide 700ms var(--ease) both; }
.pl-s1 { animation-delay: 560ms; } .pl-s2 { animation-delay: 680ms; } .pl-s3 { animation-delay: 800ms; }
.pl-feat { transition: transform var(--t-base) var(--ease); }
.pl-feat:hover { transform: translateX(4px); }
.board [style*="overflow-y: auto"] { overscroll-behavior: contain; }
.board [style*="overflow-y: auto"]::-webkit-scrollbar { width: 8px; }
.board [style*="overflow-y: auto"]::-webkit-scrollbar-track { background: transparent; }
.board [style*="overflow-y: auto"]::-webkit-scrollbar-thumb {
background: var(--surface-sunken-3); border-radius: var(--r-pill);
}
.board--bare {
flex-direction: row;
min-height: 100vh;
gap: 0;
}
@media (max-width: 860px) {
.board--bare { flex-direction: column; }
.board--bare > section[style*="width: 600px"] {
width: 100% !important;
min-height: 320px;
padding: 32px !important;
}
.board--bare > section[style*="width: 600px"] div[style*="340px"] {
width: 220px !important; height: 220px !important;
}
}
.pl-num { -moz-appearance: textfield; }
.pl-num::-webkit-inner-spin-button, .pl-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pl-switch { -webkit-appearance: none; appearance: none; position: relative; flex-shrink: 0; width: 40px; height: 24px; margin: 0; border-radius: 9999px; background: rgba(28, 28, 30, 0.18); cursor: pointer; transition: background-color 150ms ease; }
.pl-switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 9999px; background: #FFFFFF; box-shadow: rgba(16, 24, 18, 0.25) 0 1px 3px 0; transition: transform 150ms ease; }
.pl-switch:checked { background: #28A745; }
.pl-switch:checked::before { transform: translateX(16px); }
.pl-liquid {
--lq-top: #46D07A; --lq-deep: #178A3E; --lq-glow: rgba(30, 140, 70, 0.38);
position: relative;
isolation: isolate;
overflow: hidden;
color: #FFFFFF;
background:
radial-gradient(75% 55% at 28% 12%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.12) 38%, rgba(255, 255, 255, 0) 62%),
linear-gradient(155deg, var(--lq-top) 0%, var(--lq-deep) 100%);
box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.65), inset 0 -3px 8px rgba(0, 0, 0, 0.14), 0 6px 16px -5px var(--lq-glow);
}
.pl-liquid::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
background: radial-gradient(60% 40% at 50% 100%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 70%);
}
.pl-liquid > svg { position: relative; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)); }
.pl-liquid--blue  { --lq-top: #5B9BFA; --lq-deep: #1E4FD0; --lq-glow: rgba(30, 79, 208, 0.36); }
.pl-liquid--amber { --lq-top: #F7BE5C; --lq-deep: #C77418; --lq-glow: rgba(199, 116, 24, 0.40); }
.pl-liquid--red   { --lq-top: #F26B5E; --lq-deep: #A8322A; --lq-glow: rgba(168, 50, 42, 0.38); }
.pl-glass {
background:
radial-gradient(85% 60% at 30% 10%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.7) 55%, rgba(255, 255, 255, 0.5) 100%),
linear-gradient(160deg, rgba(123, 216, 143, 0.22) 0%, rgba(20, 184, 166, 0.12) 55%, rgba(91, 155, 250, 0.12) 100%);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), inset 0 -1px 2px rgba(28, 28, 30, 0.07), rgba(28, 28, 30, 0.10) 0 0 0 1px, 0 4px 12px -5px rgba(16, 24, 18, 0.22);
-webkit-backdrop-filter: blur(10px) saturate(1.6);
backdrop-filter: blur(10px) saturate(1.6);
}