:root{color:#1f2420;background:#f5f1e8;font-family:Inter,PingFang SC,Microsoft YaHei,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--green: #1f6f5b;--green-dark: #174b43;--paper: #fffaf0;--ink: #202725;--line: rgba(32, 39, 37, .14);--red: #d43f31;--gold: #d9a441}*{box-sizing:border-box}body{min-width:1120px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}.app-shell{display:grid;grid-template-columns:260px minmax(860px,1fr);gap:22px;min-height:100vh;padding:22px;background:linear-gradient(90deg,rgba(31,111,91,.08),transparent 32%),radial-gradient(circle at 95% 6%,rgba(217,164,65,.14),transparent 28%),#f5f1e8}.timer-panel{display:flex;flex-direction:column;gap:14px;align-self:start;overflow:hidden;min-height:calc(100vh - 44px);max-height:calc(100vh - 44px);padding:18px;border:1px solid rgba(31,111,91,.18);border-radius:8px;background:#fffaf0e0;box-shadow:0 12px 40px #1f272217}h1,h2,p{margin:0}.main-status{display:grid;min-height:108px;place-items:center;border-radius:8px;color:var(--green);background:#1f6f5b1a;font-size:46px;font-weight:900;line-height:1;text-align:center}.timer-panel.stopped .main-status{color:var(--red);background:#d43f311a}.timer-panel.passing .main-status{color:#fffaf0;background:var(--green)}.status-strip{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:8px;background:#ffffff85}.status-strip div{display:grid;gap:4px}.status-strip span,.quick-info{color:#1f24209e;font-size:13px}.status-strip strong{overflow:hidden;font-size:20px;text-overflow:ellipsis;white-space:nowrap}.quick-info{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.quick-info span{min-width:0;padding:7px 6px;border-radius:7px;background:#1f6f5b14;text-align:center;white-space:nowrap}.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}.controls button,.file-picker,.reset-button{min-height:42px;border:0;border-radius:7px;font-weight:800}.primary{color:#fff;background:var(--green)}.danger{color:#fff;background:var(--red)}.ghost,.reset-button{color:var(--green-dark);background:#1f6f5b1a}button:disabled:not(.flip-card){cursor:not-allowed;opacity:.48}.file-picker{display:grid;place-items:center;color:var(--green-dark);background:#d9a4412e;cursor:pointer}.file-picker input{position:absolute;width:1px;height:1px;opacity:0}.track-list{display:grid;flex:1;gap:7px;align-content:start;min-height:0;overflow-y:auto;padding-right:4px}.track-item{display:block;width:100%;min-height:38px;padding:8px 10px;border:1px solid rgba(31,111,91,.12);border-radius:7px;color:#1f2420b8;background:#ffffff75;font-size:13px;font-weight:700;line-height:1.25;text-align:left}.track-item.active{border-color:#1f6f5b57;color:#fffaf0;background:var(--green)}.card-area{display:grid;grid-template-rows:auto 1fr;gap:10px;min-width:0}.card-toolbar{display:flex;align-items:center;justify-content:flex-end;min-height:42px;padding:0 4px}.reset-button{padding:0 18px}.card-grid{display:grid;grid-template-columns:repeat(5,minmax(148px,1fr));grid-template-rows:repeat(3,minmax(178px,1fr));gap:14px;min-height:calc(100vh - 96px)}.flip-card{position:relative;min-width:0;min-height:0;padding:0;border:0;border-radius:8px;background:transparent;perspective:1100px}.flip-card.used{cursor:default}.card-inner{position:absolute;top:0;right:0;bottom:0;left:0;display:block;transform-style:preserve-3d;transition:transform .5s ease}.flip-card.flipped .card-inner{transform:rotateY(180deg)}.flip-card.image-card.flipped{z-index:30}.flip-card.image-card.flipped .card-inner{position:fixed;inset:auto;top:50%;left:50%;width:var(--expanded-width, 420px);height:var(--expanded-height, 360px);max-width:calc(100vw - 44px);max-height:calc(100vh - 44px);transform:translate(-50%,-50%) rotateY(180deg);z-index:40}.flip-card.image-card.top-row.flipped .card-inner{top:56%}.flip-card.image-card.bottom-row.flipped .card-inner{top:44%}.card-face{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;overflow:hidden;place-items:center;border:1px solid rgba(32,39,37,.18);border-radius:8px;backface-visibility:hidden;box-shadow:0 10px 28px #1f27221a}.card-back{color:#fffaf0;background:linear-gradient(135deg,rgba(255,255,255,.16) 0 18%,transparent 18% 100%),repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 8px,transparent 8px 18px),var(--green)}.flip-card.used .card-back{background:linear-gradient(135deg,rgba(255,255,255,.16) 0 18%,transparent 18% 100%),repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 8px,transparent 8px 18px),var(--red)}.card-back:after{content:"";position:absolute;top:13px;right:13px;bottom:13px;left:13px;border:1px solid rgba(255,250,240,.5);border-radius:6px}.card-number{position:absolute;top:14px;left:16px;font-size:20px;font-weight:900}.card-back-title{z-index:1;font-size:26px;font-weight:900}.card-front{padding:12px;background:var(--paper);transform:rotateY(180deg)}.card-front img{width:100%;height:100%;object-fit:contain;border-radius:5px;background:#fff}.text-card{display:grid;width:100%;height:100%;place-items:center;padding:16px;border:1px dashed rgba(31,111,91,.28);border-radius:6px;color:var(--ink);font-size:clamp(18px,2.1vw,28px);font-weight:900;line-height:1.35;text-align:center}@media(max-width:1180px){body{min-width:0}.app-shell{grid-template-columns:1fr}.timer-panel{min-height:0}.card-grid{grid-template-columns:repeat(3,minmax(150px,1fr));grid-template-rows:none;min-height:auto}.flip-card{aspect-ratio:4 / 5}.flip-card.image-card.flipped .card-inner{left:50vw;width:var(--expanded-width, 420px);height:var(--expanded-height, 360px);max-width:calc(100vw - 44px);max-height:calc(100vh - 44px)}}