:root {
 --bg: #f6f1e7;
 --bg-elevated: #fffdf7;
 --bg-sunken: #efe9dc;
 --paper: #fbf6e9;
 --paper-edge: rgba(108, 90, 60, 0.10);
 --ink: #3d3530;
 --ink-soft: #697065;
 --ink-muted: #9a9e94;
 --sage: #6b9080;
 --sage-deep: #4f7669;
 --sage-soft: rgba(107, 144, 128, 0.12);
 --clay: #b78168;
 --clay-soft: rgba(183, 129, 104, 0.12);
 --wood: #9f8c76;
 --line: rgba(108, 90, 60, 0.18);
 --line-strong: rgba(108, 90, 60, 0.32);
 --shadow: 0 1px 3px rgba(60, 50, 40, 0.06);
 --shadow-md: 0 4px 16px rgba(60, 50, 40, 0.10);
 --shadow-lg: 0 12px 36px rgba(60, 50, 40, 0.14);
 --radius: 10px;
 --radius-sm: 7px;
 --serif: "Songti SC", "STSong", "Georgia", "Noto Serif SC", serif;
 --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
 --danger: #b85450;
}

[data-theme="dark"] {
 --bg: #1a1c19;
 --bg-elevated: #232622;
 --bg-sunken: #1e211d;
 --paper: #2a2e28;
 --paper-edge: rgba(218, 211, 190, 0.10);
 --ink: #e0ddd5;
 --ink-soft: #a8aaa3;
 --ink-muted: #7a7d74;
 --sage: #8db9a3;
 --sage-deep: #a3cbb6;
 --sage-soft: rgba(141, 185, 163, 0.14);
 --clay: #c9a899;
 --clay-soft: rgba(201, 168, 153, 0.16);
 --wood: #b09a82;
 --line: rgba(218, 211, 190, 0.13);
 --line-strong: rgba(218, 211, 190, 0.28);
 --shadow: 0 1px 3px rgba(0, 0, 0, 0.20);
 --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.28);
 --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.36);
 --danger: #d06a66;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
 background: var(--bg);
 color: var(--ink);
 font-family: var(--sans);
 font-size: 15px;
 line-height: 1.75;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 min-height: 100vh;
 overflow-x: hidden;
}

.back-home {
 position: fixed;
 top: 1.4rem;
 left: 1.4rem;
 z-index: 100;
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
 padding: 0.5rem 1rem;
 background: var(--bg-elevated);
 border: 1px solid var(--line);
 border-radius: 999px;
 color: var(--ink-soft);
 text-decoration: none;
 font-size: 0.85rem;
 font-family: var(--serif);
 box-shadow: var(--shadow);
 transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.back-home:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateX(-2px); }
.back-home .icon { width: 1em; height: 1em; }

.mode-toggle {
 position: fixed;
 top: 1.4rem;
 right: 1.4rem;
 z-index: 100;
 padding: 0.5rem 1rem;
 background: var(--bg-elevated);
 border: 1px solid var(--line);
 border-radius: 999px;
 color: var(--ink-soft);
 font-size: 0.8rem;
 font-family: var(--serif);
 letter-spacing: 0.06em;
 cursor: pointer;
 box-shadow: var(--shadow);
 transition: border-color 0.3s ease, box-shadow 0.3s ease;
 -webkit-tap-highlight-color: transparent;
 user-select: none;
}
.mode-toggle:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }

.paperbin-container {
 max-width: 980px;
 margin: 0 auto;
 padding: 5rem 1.5rem 4rem;
}

.paperbin-header {
 text-align: center;
 margin-bottom: 2.4rem;
}
.paperbin-eyebrow {
 font-family: var(--serif);
 font-size: 0.8rem;
 letter-spacing: 0.4em;
 color: var(--ink-muted);
 margin-bottom: 0.8rem;
}
.paperbin-title {
 font-family: var(--serif);
 font-size: clamp(1.8rem, 4vw, 2.4rem);
 font-weight: 500;
 letter-spacing: 0.12em;
 color: var(--ink);
 margin-bottom: 0.4rem;
}
.paperbin-subtitle {
 font-family: var(--serif);
 font-style: italic;
 color: var(--ink-soft);
 font-size: 0.95rem;
 letter-spacing: 0.04em;
}
.paperbin-divider {
 width: 2.4rem;
 height: 1px;
 background: var(--line-strong);
 margin: 1.4rem auto 0;
}

.paperbin-privacy {
 margin: 1.2rem auto 0;
 max-width: 520px;
 text-align: left;
 font-family: var(--serif);
 color: var(--ink-soft);
 border: 1px dashed var(--line);
 border-radius: var(--radius-sm);
 background: transparent;
 transition: border-color 0.3s ease, background-color 0.3s ease;
}
.paperbin-privacy[open] {
 background: var(--bg-elevated);
 border-color: var(--line-strong);
}
.paperbin-privacy > summary {
 list-style: none;
 cursor: pointer;
 padding: 0.5rem 0.9rem;
 font-size: 0.78rem;
 letter-spacing: 0.18em;
 color: var(--ink-muted);
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
 margin: 0 auto;
 user-select: none;
}
.paperbin-privacy > summary::before {
 content: '·';
 color: var(--sage);
 font-size: 1.1em;
}
.paperbin-privacy > summary::-webkit-details-marker { display: none; }
.paperbin-privacy[open] > summary { color: var(--sage-deep); }
.paperbin-privacy-body {
 padding: 0.2rem 1rem 0.9rem;
 font-size: 0.78rem;
 line-height: 1.85;
 color: var(--ink-soft);
 letter-spacing: 0.02em;
 border-top: 1px dashed var(--line);
}
.paperbin-privacy-body p { margin: 0.5rem 0; }
.paperbin-privacy-body em {
 font-style: normal;
 color: var(--ink);
 border-bottom: 1px solid var(--line-strong);
 padding-bottom: 1px;
}

.paperbin-stage {
 display: grid;
 grid-template-columns: 1fr 1.3fr;
 gap: 1.6rem;
 margin-bottom: 2.4rem;
 background: var(--bg-elevated);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: 1.6rem;
 box-shadow: var(--shadow);
 position: relative;
 overflow: hidden;
}
.paperbin-stage::before {

 content: '';
 position: absolute;
 inset: 0;
 background-image:
 radial-gradient(circle at 25% 30%, rgba(108, 90, 60, 0.04) 0, transparent 60%),
 radial-gradient(circle at 75% 80%, rgba(108, 90, 60, 0.03) 0, transparent 60%);
 pointer-events: none;
}
@media (max-width: 720px) {
 .paperbin-stage { grid-template-columns: 1fr; }
}

.paperbin-bucket {
 position: relative;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 min-height: 280px;
 border-radius: var(--radius);
 background: linear-gradient(180deg, var(--paper) 0%, var(--bg-sunken) 100%);
 border: 1px solid var(--paper-edge);
 overflow: hidden;
 z-index: 1;
}
.paperbin-bucket-gif {
 max-width: 80%;
 max-height: 240px;
 display: block;
 filter: drop-shadow(0 8px 18px rgba(80, 60, 40, 0.18));
 animation: bucket-breathe 4.2s ease-in-out infinite;
}
@keyframes bucket-breathe {
 0%, 100% { transform: translateY(0) rotate(-1deg); }
 50% { transform: translateY(-3px) rotate(1deg); }
}
.paperbin-bucket-caption {
 font-family: var(--serif);
 font-size: 0.85rem;
 color: var(--ink-muted);
 margin-top: 0.4rem;
 letter-spacing: 0.18em;
}

.paperbin-compose {
 display: flex;
 flex-direction: column;
 gap: 0.9rem;
 z-index: 1;
}
.paperbin-compose-title {
 font-family: var(--serif);
 font-size: 1.05rem;
 letter-spacing: 0.08em;
 color: var(--ink);
 display: flex;
 align-items: center;
 gap: 0.5rem;
 margin-bottom: 0.2rem;
}
.paperbin-compose-title::before {
 content: '';
 width: 1.6rem;
 height: 1px;
 background: var(--line-strong);
}
.paperbin-field-label {
 font-family: var(--serif);
 font-size: 0.78rem;
 color: var(--ink-muted);
 letter-spacing: 0.16em;
 margin-bottom: 0.3rem;
 display: block;
}
.paperbin-textarea {
 width: 100%;
 min-height: 120px;
 background: var(--paper);
 color: var(--ink);
 border: 1px solid var(--paper-edge);
 border-radius: var(--radius-sm);
 padding: 0.85rem 1rem;
 font-family: var(--serif);
 font-size: 1rem;
 line-height: 1.85;
 letter-spacing: 0.02em;
 resize: vertical;
 outline: none;
 transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.paperbin-textarea:focus {
 border-color: var(--sage);
 box-shadow: 0 0 0 3px var(--sage-soft);
}
.paperbin-textarea::placeholder { color: var(--ink-muted); }

.paperbin-row {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 0.8rem;
}
@media (max-width: 480px) { .paperbin-row { grid-template-columns: 1fr; } }

.paperbin-input,
.paperbin-select {
 width: 100%;
 background: var(--paper);
 color: var(--ink);
 border: 1px solid var(--paper-edge);
 border-radius: var(--radius-sm);
 padding: 0.6rem 0.85rem;
 font-family: var(--serif);
 font-size: 0.92rem;
 outline: none;
 transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.paperbin-input:focus,
.paperbin-select:focus {
 border-color: var(--sage);
 box-shadow: 0 0 0 3px var(--sage-soft);
}

.paperbin-counter {
 font-size: 0.72rem;
 color: var(--ink-muted);
 text-align: right;
 font-family: var(--serif);
 letter-spacing: 0.04em;
 margin-top: 0.2rem;
}

.paperbin-compose-privacy {
 margin-top: 0.45rem;
 padding: 0.45rem 0.7rem;
 font-family: var(--serif);
 font-size: 0.74rem;
 line-height: 1.7;
 color: var(--ink-soft);
 background: var(--sage-soft);
 border-left: 2px solid var(--sage);
 border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
 letter-spacing: 0.02em;
}
.paperbin-compose-privacy em {
 font-style: normal;
 color: var(--ink);
 font-weight: 500;
}

.paperbin-actions {
 display: flex;
 gap: 0.6rem;
 margin-top: 0.2rem;
 flex-wrap: wrap;
}

.paperbin-btn {
 font-family: var(--serif);
 letter-spacing: 0.18em;
 font-size: 0.9rem;
 padding: 0.7rem 1.4rem;
 border-radius: 999px;
 border: 1px solid var(--line-strong);
 background: var(--bg-elevated);
 color: var(--ink);
 cursor: pointer;
 transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
 -webkit-tap-highlight-color: transparent;
}
.paperbin-btn:hover {
 background: var(--sage);
 color: #fff;
 border-color: var(--sage);
 transform: translateY(-1px);
}
.paperbin-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.paperbin-btn-primary {
 background: var(--ink);
 color: var(--bg-elevated);
 border-color: var(--ink);
}
.paperbin-btn-primary:hover {
 background: var(--sage-deep);
 border-color: var(--sage-deep);
 color: #fff;
}
.paperbin-btn-ghost { background: transparent; }

.paperbin-msg {
 font-family: var(--serif);
 font-size: 0.85rem;
 color: var(--ink-muted);
 min-height: 1.2em;
 letter-spacing: 0.04em;
}
.paperbin-msg.is-error { color: var(--danger); }
.paperbin-msg.is-success { color: var(--sage); }

.paperbin-draw {
 text-align: center;
 margin: 2.6rem auto 1.4rem;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0.8rem;
}
.paperbin-draw-divider {
 font-family: var(--serif);
 font-size: 0.78rem;
 letter-spacing: 0.4em;
 color: var(--ink-muted);
 position: relative;
 width: 100%;
 text-align: center;
 margin: 0.4rem 0 0.6rem;
}
.paperbin-draw-divider::before,
.paperbin-draw-divider::after {
 content: '';
 position: absolute;
 top: 50%;
 width: 28%;
 height: 1px;
 background: var(--line);
}
.paperbin-draw-divider::before { left: 4%; }
.paperbin-draw-divider::after { right: 4%; }

.paperbin-draw-btn {
 font-family: var(--serif);
 letter-spacing: 0.32em;
 font-size: 0.95rem;
 padding: 0.8rem 2rem;
 border-radius: 999px;
 border: 1px solid var(--line-strong);
 background: var(--bg-elevated);
 color: var(--ink);
 cursor: pointer;
 transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
 -webkit-tap-highlight-color: transparent;
}
.paperbin-draw-btn:hover {
 background: var(--clay);
 color: #fff;
 border-color: var(--clay);
}
.paperbin-draw-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.paperbin-draw-btn.is-spinning { animation: draw-shake 0.45s linear; }
@keyframes draw-shake {
 0% { transform: rotate(0deg); }
 25% { transform: rotate(-3deg) scale(1.02); }
 50% { transform: rotate(3deg) scale(1.02); }
 75% { transform: rotate(-2deg) scale(1.01); }
 100% { transform: rotate(0deg); }
}

.paperbin-draw-card {
 margin: 1.2rem auto 0;
 max-width: 520px;
 background: var(--paper);
 border: 1px solid var(--paper-edge);
 border-radius: var(--radius);
 padding: 1.6rem 1.4rem;
 font-family: var(--serif);
 position: relative;
 box-shadow: var(--shadow-md);
 transform-origin: center top;
 animation: paper-flip-in 0.62s cubic-bezier(.32,.72,0,1) both;
}
@keyframes paper-flip-in {
 0% { opacity: 0; transform: rotateX(60deg) scale(0.96); }
 60% { opacity: 1; transform: rotateX(-6deg) scale(1.01); }
 100% { opacity: 1; transform: rotateX(0) scale(1); }
}
.paperbin-draw-card-mood {
 display: inline-block;
 font-size: 0.72rem;
 color: var(--clay);
 letter-spacing: 0.18em;
 margin-bottom: 0.6rem;
 padding: 0.18rem 0.6rem;
 border: 1px solid var(--clay-soft);
 border-radius: 999px;
 background: var(--clay-soft);
}
.paperbin-draw-card-content {
 font-size: 1.05rem;
 line-height: 1.95;
 white-space: pre-wrap;
 color: var(--ink);
 letter-spacing: 0.02em;
 margin: 0.4rem 0 1rem;
}
.paperbin-draw-card-meta {
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-size: 0.78rem;
 color: var(--ink-muted);
 letter-spacing: 0.06em;
}
.paperbin-draw-card-empty {
 font-style: italic;
 color: var(--ink-muted);
 font-size: 0.9rem;
 padding: 0.6rem 0;
}

.paperbin-list-section {
 margin-top: 3rem;
}
.paperbin-list-head {
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 margin-bottom: 1.2rem;
 flex-wrap: wrap;
 gap: 0.6rem;
}
.paperbin-list-title {
 font-family: var(--serif);
 font-size: 1.2rem;
 letter-spacing: 0.16em;
 color: var(--ink);
 display: flex;
 align-items: center;
 gap: 0.6rem;
}
.paperbin-list-title::before {
 content: '';
 width: 1.6rem;
 height: 1px;
 background: var(--line-strong);
}
.paperbin-list-meta {
 font-family: var(--serif);
 font-size: 0.78rem;
 color: var(--ink-muted);
 letter-spacing: 0.08em;
}
.paperbin-list-report {
 font-family: var(--serif);
 font-size: 0.78rem;
 letter-spacing: 0.12em;
 color: var(--ink-muted);
 background: transparent;
 border: 1px dashed var(--line);
 border-radius: 999px;
 padding: 0.3rem 0.7rem;
 transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
 -webkit-tap-highlight-color: transparent;
 cursor: pointer;
}
.paperbin-list-report:hover { border-color: var(--clay); color: var(--clay); background: var(--clay-soft); }
.paperbin-report-hint {
 display: inline-block;
 margin-top: 0.4rem;
 font-size: 0.72rem;
 color: var(--ink-muted);
 letter-spacing: 0.04em;
 line-height: 1.6;
}

.paperbin-mood-filter {
 display: flex;
 flex-wrap: wrap;
 gap: 0.4rem;
 margin-bottom: 1.2rem;
}
.paperbin-mood-pill {
 font-family: var(--serif);
 font-size: 0.78rem;
 letter-spacing: 0.08em;
 padding: 0.32rem 0.9rem;
 border-radius: 999px;
 background: transparent;
 border: 1px solid var(--line);
 color: var(--ink-soft);
 cursor: pointer;
 transition: all 0.25s ease;
 -webkit-tap-highlight-color: transparent;
}
.paperbin-mood-pill:hover { border-color: var(--line-strong); }
.paperbin-mood-pill.is-active {
 background: var(--ink);
 color: var(--bg-elevated);
 border-color: var(--ink);
}

.paperbin-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
 gap: 1rem;
 min-height: 200px;
 position: relative;
 transition: opacity 0.2s ease;
}
.paperbin-grid.is-loading { opacity: 0.55; }

.paper {
 background: var(--paper);
 border: 1px solid var(--paper-edge);
 border-radius: var(--radius);
 padding: 1.1rem 1rem 0.9rem;
 position: relative;
 box-shadow: var(--shadow);
 display: flex;
 flex-direction: column;
 gap: 0.6rem;
 transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}
.paper-report-trigger {
 position: absolute;
 top: 0.5rem;
 right: 0.5rem;
 width: 1.6rem;
 height: 1.6rem;
 border: 0;
 background: transparent;
 color: var(--ink-muted);
 font-family: var(--serif);
 font-size: 0.95rem;
 letter-spacing: 0.1em;
 line-height: 1;
 cursor: pointer;
 border-radius: 999px;
 opacity: 0.4;
 transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease;
 -webkit-tap-highlight-color: transparent;
}
.paper:hover .paper-report-trigger,
.paper-report-trigger:focus { opacity: 0.95; }
.paper-report-trigger:hover { background: var(--clay-soft); color: var(--clay); }
.paper:hover {
 transform: translateY(-2px);
 box-shadow: var(--shadow-md);
}
.paper.is-entering { opacity: 0; transform: translateY(8px); }
.paper::before {

 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, transparent 0, rgba(108, 90, 60, 0.025) 100%);
 border-radius: var(--radius);
 pointer-events: none;
}

.paper-mood {
 display: inline-block;
 font-size: 0.7rem;
 letter-spacing: 0.16em;
 color: var(--clay);
 padding: 0.14rem 0.55rem;
 border: 1px solid var(--clay-soft);
 border-radius: 999px;
 background: var(--clay-soft);
 font-family: var(--serif);
 align-self: flex-start;
}
.paper-content {
 font-family: var(--serif);
 font-size: 0.95rem;
 line-height: 1.85;
 color: var(--ink);
 white-space: pre-wrap;
 word-break: break-word;
 letter-spacing: 0.02em;
 flex: 1;
 min-height: 3em;
}
.paper-meta {
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-size: 0.72rem;
 color: var(--ink-muted);
 letter-spacing: 0.06em;
 font-family: var(--serif);
 border-top: 1px dashed var(--line);
 padding-top: 0.5rem;
}
.paper-alias { font-style: italic; }
.paper-reactions {
 display: flex;
 gap: 0.3rem;
 flex-wrap: wrap;
}
.paper-reaction {
 font-family: var(--serif);
 font-size: 0.74rem;
 letter-spacing: 0.04em;
 padding: 0.22rem 0.55rem;
 border: 1px solid var(--line);
 border-radius: 999px;
 background: transparent;
 color: var(--ink-soft);
 cursor: pointer;
 transition: all 0.25s ease;
 display: inline-flex;
 align-items: center;
 gap: 0.28rem;
 -webkit-tap-highlight-color: transparent;
}
.paper-reaction:hover { border-color: var(--sage); color: var(--sage-deep); }
.paper-reaction.is-on {
 background: var(--sage);
 color: #fff;
 border-color: var(--sage);
}
.paper-reaction[data-kind="burn"]:hover { border-color: var(--clay); color: var(--clay); }
.paper-reaction[data-kind="burn"].is-on {
 background: var(--clay);
 color: #fff;
 border-color: var(--clay);
}
.paper-reaction-count { font-size: 0.7rem; opacity: 0.8; }

.paper-replies {
 margin-top: 0.4rem;
 display: flex;
 flex-direction: column;
 gap: 0.4rem;
}
.paper-reply {
 font-family: var(--serif);
 font-size: 0.84rem;
 line-height: 1.75;
 color: var(--ink-soft);
 background: var(--bg-sunken);
 border-left: 2px solid var(--sage);
 padding: 0.4rem 0.6rem;
 border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
 font-style: italic;
}
.paper-reply-author {
 font-style: normal;
 font-size: 0.7rem;
 color: var(--ink-muted);
 margin-bottom: 0.18rem;
 letter-spacing: 0.06em;
}

.paper-pagination {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 0.6rem;
 margin: 2rem 0 1rem;
 transition: opacity 0.3s ease, visibility 0.3s ease;
}
.paper-pagination.is-hidden {
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
}
.paper-pagination button {
 font-family: var(--serif);
 letter-spacing: 0.1em;
 padding: 0.4rem 1rem;
 background: var(--bg-elevated);
 border: 1px solid var(--line);
 border-radius: 999px;
 color: var(--ink-soft);
 cursor: pointer;
 transition: all 0.25s ease;
}
.paper-pagination button:hover { border-color: var(--line-strong); }
.paper-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.paper-pagination .is-current {
 background: var(--ink);
 color: var(--bg-elevated);
 border-color: var(--ink);
}
.paper-pagination-info {
 font-family: var(--serif);
 font-size: 0.78rem;
 color: var(--ink-muted);
 letter-spacing: 0.04em;
}

.paperbin-report-overlay {
 position: fixed;
 inset: 0;
 background: rgba(20, 18, 14, 0.42);
 backdrop-filter: blur(2px);
 -webkit-backdrop-filter: blur(2px);
 z-index: 200;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 1.5rem;
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.32s ease;
}
.paperbin-report-overlay[hidden] { display: none !important; }
.paperbin-report-overlay.is-show { opacity: 1; pointer-events: auto; }
.paperbin-report-card {
 background:
 linear-gradient(180deg, var(--bg-elevated) 0%, var(--paper) 100%);
 border: 1px solid var(--line-strong);
 border-radius: 14px;
 width: 100%;
 max-width: 460px;
 padding: 0;
 font-family: var(--serif);
 box-shadow: var(--shadow-lg);
 position: relative;
 overflow: hidden;
 transform: translateY(16px) scale(0.97);
 opacity: 0;
 transition: transform 0.42s cubic-bezier(.32,.72,0,1), opacity 0.32s ease;
}
.paperbin-report-overlay.is-show .paperbin-report-card {
 transform: translateY(0) scale(1);
 opacity: 1;
}
.paperbin-report-card::before {

 content: '';
 position: absolute;
 top: 0;
 right: 0;
 width: 60px;
 height: 60px;
 background: linear-gradient(135deg, transparent 50%, var(--clay-soft) 50%);
 pointer-events: none;
 z-index: 0;
}
.paperbin-report-card::after {

 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 2px;
 background: linear-gradient(90deg, transparent 0%, var(--clay) 30%, var(--sage) 70%, transparent 100%);
 opacity: 0.6;
 pointer-events: none;
}
.paperbin-report-header {
 padding: 1.6rem 1.6rem 0.6rem;
 position: relative;
 z-index: 1;
}
.paperbin-report-eyebrow {
 font-size: 0.7rem;
 letter-spacing: 0.4em;
 color: var(--ink-muted);
 margin-bottom: 0.5rem;
}
.paperbin-report-title {
 font-size: 1.1rem;
 letter-spacing: 0.12em;
 margin: 0 0 0.3rem;
 color: var(--ink);
 font-weight: 500;
}
.paperbin-report-sub {
 font-size: 0.78rem;
 color: var(--ink-muted);
 letter-spacing: 0.08em;
 font-style: italic;
}
.paperbin-report-desc {
 font-size: 0.86rem;
 color: var(--ink-soft);
 padding: 0 1.6rem;
 line-height: 1.75;
 margin: 0.8rem 0 0;
 position: relative;
 z-index: 1;
}
.paperbin-report-field {
 padding: 0.9rem 1.6rem 0;
 position: relative;
 z-index: 1;
}
.paperbin-report-hint {
 font-size: 0.72rem;
 color: var(--ink-muted);
 letter-spacing: 0.04em;
 line-height: 1.65;
 padding: 0 1.6rem;
 margin: 0.4rem 0 0;
 position: relative;
 z-index: 1;
 font-style: italic;
}
.paperbin-report-textarea {
 width: 100%;
 min-height: 90px;
 background: var(--paper);
 color: var(--ink);
 border: 1px solid var(--paper-edge);
 border-radius: var(--radius-sm);
 padding: 0.7rem 0.9rem;
 font-family: var(--serif);
 font-size: 0.92rem;
 line-height: 1.8;
 outline: none;
 resize: vertical;
 letter-spacing: 0.02em;
 transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.paperbin-report-textarea:focus {
 border-color: var(--clay);
 box-shadow: 0 0 0 3px var(--clay-soft);
}
.paperbin-report-textarea::placeholder { color: var(--ink-muted); }
.paperbin-report-actions {
 display: flex;
 justify-content: flex-end;
 gap: 0.6rem;
 padding: 1.2rem 1.6rem 1.4rem;
 margin-top: 0.4rem;
 border-top: 1px dashed var(--line);
 position: relative;
 z-index: 1;
}

.paperbin-report-toast {
 position: fixed;
 left: 50%;
 bottom: 28px;
 transform: translateX(-50%) translateY(20px);
 z-index: 300;
 background: var(--ink);
 color: var(--bg-elevated);
 font-family: var(--serif);
 font-size: 0.85rem;
 letter-spacing: 0.1em;
 padding: 0.6rem 1.2rem;
 border-radius: 999px;
 box-shadow: var(--shadow-lg);
 opacity: 0;
 pointer-events: none;
 transition: transform 0.35s cubic-bezier(.32,.72,0,1), opacity 0.35s ease;
}
.paperbin-report-toast.is-show {
 opacity: 1;
 transform: translateX(-50%) translateY(0);
}
.paperbin-report-toast.is-error { background: var(--danger); }

@media (max-width: 540px) {
 .paperbin-report-header,
 .paperbin-report-desc,
 .paperbin-report-field,
 .paperbin-report-hint,
 .paperbin-report-actions { padding-left: 1.2rem; padding-right: 1.2rem; }
 .paperbin-report-card { max-width: 100%; }
}

.paperbin-fly {
 position: fixed;
 z-index: 50;
 pointer-events: none;
 width: 80px;
 height: 50px;
 background: var(--paper);
 border: 1px solid var(--paper-edge);
 border-radius: 4px;
 box-shadow: var(--shadow);
 animation: paper-fly 1s cubic-bezier(.42,0,.32,1) forwards;
}
@keyframes paper-fly {
 0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
 60% { opacity: 1; transform: translate(40px, 80px) rotate(180deg) scale(0.6); }
 100% { opacity: 0; transform: translate(80px, 180px) rotate(360deg) scale(0.3); }
}

.paperbin-bucket.is-shaking {
 animation: bucket-shake 0.55s cubic-bezier(.45,.05,.55,.95);
}
@keyframes bucket-shake {
 0% { transform: translate(0, 0) rotate(0deg); }
 15% { transform: translate(-3px, -1px) rotate(-1.5deg); }
 30% { transform: translate(4px, 1px) rotate(1.6deg); }
 45% { transform: translate(-4px, 0) rotate(-1.2deg); }
 60% { transform: translate(3px, -2px) rotate(1deg); }
 75% { transform: translate(-2px, 1px) rotate(-0.6deg); }
 100% { transform: translate(0, 0) rotate(0deg); }
}

.paperbin-bucket::after {

 content: '';
 position: absolute;
 left: 50%;
 top: 28%;
 width: 0;
 height: 0;
 background: var(--clay-soft);
 border: 1px solid var(--clay);
 border-radius: 0 0 8px 8px;
 transform: translateX(-50%);
 opacity: 0;
 transition: width 0.4s ease, height 0.4s ease, opacity 0.3s ease, top 0.4s ease;
 pointer-events: none;
 z-index: 2;
}
.paperbin-bucket.is-shaking::after {

 width: 38px;
 height: 22px;
 top: 18%;
 opacity: 0.9;
 animation: hand-dip 0.55s ease-out;
}
@keyframes hand-dip {
 0% { transform: translateX(-50%) translateY(-12px) scale(0.6); opacity: 0; }
 30% { transform: translateX(-50%) translateY(-4px) scale(0.9); opacity: 0.9; }
 60% { transform: translateX(-50%) translateY(2px) scale(1); opacity: 1; }
 100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 0.9; }
}

.paperbin-fly-from-bucket {
 position: fixed;
 z-index: 60;
 pointer-events: none;
 width: 56px;
 height: 36px;
 background:
 linear-gradient(135deg, var(--paper) 0%, var(--bg-elevated) 100%);
 border: 1px solid var(--paper-edge);
 border-radius: 3px;
 box-shadow: var(--shadow-md);
 transform-origin: center;
 animation: paper-rise 0.85s cubic-bezier(.32,.72,0,1) forwards;
}
.paperbin-fly-from-bucket::before {
 content: '';
 position: absolute;
 inset: 0;
 background:
 linear-gradient(90deg, transparent 47%, var(--line) 48%, transparent 49%),
 linear-gradient(0deg, transparent 47%, var(--line) 48%, transparent 49%);
 background-size: 7px 7px;
 opacity: 0.4;
 border-radius: inherit;
}
@keyframes paper-rise {
 0% {
 opacity: 0;
 transform: translate(0, 0) rotate(0deg) scale(0.4);
 }
 18% {
 opacity: 1;
 transform: translate(calc(var(--dx) * 0.18), calc(var(--dy) * 0.18)) rotate(calc(var(--rot) * 0.18)) scale(0.85);
 }
 55% {
 opacity: 1;
 transform: translate(calc(var(--dx) * 0.62), calc(var(--dy) * 0.58)) rotate(calc(var(--rot) * 0.65)) scale(1.05);
 }
 100% {
 opacity: 0.0;
 transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.6);
 }
}

.paperbin-draw-btn.is-shake-error {
 animation: btn-shake 0.45s ease;
}
@keyframes btn-shake {
 0%, 100% { transform: translateX(0); }
 20% { transform: translateX(-6px); }
 40% { transform: translateX(5px); }
 60% { transform: translateX(-4px); }
 80% { transform: translateX(3px); }
}

.paperbin-draw-card.is-revealing {
 animation: paper-flip-in 0.85s cubic-bezier(.32,.72,0,1) both;
}
.paperbin-draw-card.is-revealing .paperbin-draw-card-content {

 letter-spacing: 0.04em;
}
.paperbin-char-stream {
 display: inline;
 background-image: linear-gradient(120deg, transparent 0%, transparent 49%, var(--clay-soft) 50%, transparent 51%, transparent 100%);
 background-size: 220% 100%;
 background-position: 100% 0;
 background-repeat: no-repeat;
 animation: char-shimmer 1.2s ease-out 0.6s 1 both;
}
@keyframes char-shimmer {
 0% { background-position: 100% 0; }
 60% { background-position: 0% 0; }
 100% { background-position: 0% 0; }
}

.paperbin-banned-warn {
 margin: 0.4rem 0 0;
 font-family: var(--serif);
 font-size: 0.78rem;
 color: var(--danger);
 letter-spacing: 0.04em;
 line-height: 1.7;
 max-height: 0;
 opacity: 0;
 overflow: hidden;
 padding: 0;
 transition: max-height 0.25s ease, opacity 0.25s ease, padding 0.25s ease, margin 0.25s ease;
 border-left: 2px solid var(--danger);
 padding-left: 0.6rem;
 background: transparent;
}
.paperbin-banned-warn.is-show {
 max-height: 4em;
 opacity: 1;
 margin: 0.5rem 0 0.2rem;
 padding: 0.35rem 0 0.35rem 0.6rem;
 background: rgba(184, 84, 80, 0.06);
 border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.paperbin-textarea.is-banned,
.paperbin-report-textarea.is-banned {
 border-color: var(--danger);
 box-shadow: 0 0 0 3px rgba(184, 84, 80, 0.12);
 background: rgba(184, 84, 80, 0.03);
}

.paperbin-stat-bar {
 display: flex;
 gap: 1.6rem;
 justify-content: center;
 margin-bottom: 1.2rem;
 font-family: var(--serif);
 font-size: 0.85rem;
 color: var(--ink-soft);
 letter-spacing: 0.1em;
 flex-wrap: wrap;
}
.paperbin-stat-bar span { display: inline-flex; align-items: center; gap: 0.32rem; }
.paperbin-stat-bar strong { font-weight: 500; color: var(--ink); }

@media (max-width: 540px) {
 .paperbin-container { padding: 4.5rem 1rem 3rem; }
 .paperbin-stage { padding: 1.1rem; }
 .paperbin-bucket { min-height: 200px; }
 .paperbin-bucket-gif { max-height: 160px; }
 .paperbin-title { letter-spacing: 0.08em; }
 .paperbin-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
 .paperbin-bucket-gif { animation: none; }
 .paperbin-bucket.is-shaking,
 .paperbin-bucket.is-shaking::after { animation: none; }
 .paperbin-bucket.is-shaking::after { display: none; }
 .paperbin-draw-card { animation: none; }
 .paperbin-draw-card.is-revealing { animation: none; }
 .paperbin-char-stream { animation: none; background: transparent; }
 .paperbin-draw-btn.is-spinning { animation: none; }
 .paperbin-draw-btn.is-shake-error { animation: none; }
 .paperbin-fly,
 .paperbin-fly-from-bucket { animation: none; display: none; }
 .paperbin-report-overlay,
 .paperbin-report-card { transition: opacity 0.15s linear; }
 .paperbin-banned-warn { transition: none; }
 .paper,
 .paperbin-grid,
 .paper-pagination { transition: none; }
 .paper.is-entering { opacity: 1; transform: none; }
}