/* Cat Page Specific Styles */
:root{--cat-bg:#f5f0eb;--cat-card:#fff;--cat-shadow:0 2px 12px rgba(0,0,0,.06);--cat-text:#333;--cat-text-h:#5a4a3a;--cat-text-sub:#795548;--cat-text-msg:#8c6a59;--cat-accent:#d47b2a;--cat-accent-food:#d47b2a;--cat-accent-can:#5974a6;--cat-info-bg:rgba(255,191,105,.12);--cat-info-border:rgba(176,122,75,.18);--cat-quote-bg:rgba(255,255,255,.72);--cat-quote-border:rgba(128,128,128,.14);--cat-input-border:#ddd;--cat-preset-bg:rgba(128,128,128,.12);--cat-preset-hover:rgba(217,135,54,.18);--cat-hist-border:rgba(0,0,0,.05);--cat-stage-bg:linear-gradient(to bottom,rgba(112,154,172,.08) 0 68%,rgba(95,83,72,.06) 68% 100%);--cat-stage-shadow:inset 0 0 0 1px rgba(90,76,65,.09);--cat-floor-bg:rgba(83,73,65,.16)}
[data-theme="dark"]{--cat-bg:#1e1e1e;--cat-card:#2d2d30;--cat-shadow:0 2px 12px rgba(0,0,0,.3);--cat-text:#e0e0e0;--cat-text-h:#e8d5c4;--cat-text-sub:#c8b4a8;--cat-text-msg:#c8b4a8;--cat-accent:#f0a65a;--cat-accent-food:#f0a65a;--cat-accent-can:#7b9fd4;--cat-info-bg:rgba(255,174,82,.07);--cat-info-border:rgba(255,193,122,.16);--cat-quote-bg:rgba(20,20,20,.35);--cat-quote-border:rgba(128,128,128,.2);--cat-input-border:#555;--cat-preset-bg:rgba(128,128,128,.2);--cat-preset-hover:rgba(217,135,54,.25);--cat-hist-border:rgba(255,255,255,.06);--cat-stage-bg:linear-gradient(to bottom,rgba(123,164,181,.09) 0 68%,rgba(255,255,255,.035) 68% 100%);--cat-stage-shadow:inset 0 0 0 1px rgba(255,255,255,.07);--cat-floor-bg:rgba(255,255,255,.12)}

.cat-container{max-width:640px;margin:0 auto;padding:20px 16px}
.cat-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cat-header h1{font-size:1.5rem;color:var(--cat-text-h)}

.cat-theme-wrap{position:relative}
.cat-theme-btn{display:flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid var(--cat-info-border);border-radius:8px;background:var(--cat-card);color:var(--cat-text);font-size:13px;cursor:pointer;transition:all .2s}
.cat-theme-btn:hover{border-color:var(--cat-accent)}
.cat-theme-btn svg{width:16px;height:16px;fill:var(--cat-text-sub)}
.cat-theme-btn .caret{font-size:10px;opacity:.5;transition:transform .2s}
.cat-theme-wrap.open .cat-theme-btn .caret{transform:rotate(180deg)}
.cat-theme-dropdown{position:absolute;right:0;top:calc(100% + 4px);min-width:100px;background:var(--cat-card);border:1px solid var(--cat-info-border);border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.15);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-4px);transition:all .15s ease-out;z-index:99}
.cat-theme-wrap.open .cat-theme-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.cat-theme-opt{display:block;width:100%;padding:8px 14px;border:0;background:transparent;color:var(--cat-text);font-size:13px;text-align:left;cursor:pointer;transition:background .1s}
.cat-theme-opt:hover{background:var(--cat-preset-hover)}
.cat-theme-opt.active{color:var(--cat-accent);font-weight:600}

.cat-card{background:var(--cat-card);border-radius:16px;padding:16px;margin-bottom:20px;box-shadow:var(--cat-shadow);transition:background .3s}
.cat-card h2{font-size:1.1rem;margin-bottom:10px;color:var(--cat-text-h)}
.cat-stage{position:relative;width:100%;height:170px;overflow:hidden;touch-action:manipulation;border-radius:10px;background:var(--cat-stage-bg);box-shadow:var(--cat-stage-shadow)}
.cat-floor{position:absolute;right:10px;bottom:17px;left:10px;height:2px;background:var(--cat-floor-bg)}
.cat-actor{position:absolute;bottom:18px;left:0;width:40px;height:40px;margin:0;padding:0;cursor:pointer;border:0;outline-offset:2px;background:transparent;will-change:transform}
.cat-actor:disabled{cursor:default;pointer-events:none}
.cat-sprite{--flip:1;display:block;width:40px;height:40px;background-repeat:no-repeat;background-size:200% 200%;image-rendering:pixelated;image-rendering:crisp-edges;transform-origin:center bottom;transform:scaleX(var(--flip))}
.cat-stage[data-state="sit"] .cat-sprite{background-position:0 0}
.cat-stage[data-state="sit-tail"] .cat-sprite{background-position:100% 0}
.cat-stage[data-state="walk-a"] .cat-sprite{background-position:0 100%}
.cat-stage[data-state="walk-b"] .cat-sprite{background-position:100% 100%}
.cat-stage.is-walking[data-dir="right"] .cat-sprite{--flip:-1}
.cat-stage.is-walking .cat-sprite{animation:cat-walk-bob .42s steps(2,end) infinite}
@keyframes cat-walk-bob{0%,100%{transform:translateY(0) scaleX(var(--flip))}50%{transform:translateY(-1px) scaleX(var(--flip))}}
.cat-msg{min-height:20px;margin:8px 2px 0;color:var(--cat-text-msg);font-size:13px}
.cat-info{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:8px 12px;border:1px solid var(--cat-info-border);border-radius:8px;color:var(--cat-text-sub);background:var(--cat-info-bg)}
.cat-info__label{font-size:13px}
.cat-info__val{color:var(--cat-accent-food);font-size:20px;font-weight:700;line-height:1}

.fur-colors{margin-top:8px;padding:10px 12px;border:1px solid var(--cat-info-border);border-radius:10px;background:var(--cat-info-bg);display:flex;flex-direction:column;gap:10px}
.fur-presets{display:flex;align-items:center;gap:10px}
.fur-label{font-size:13px;color:var(--cat-text-sub);white-space:nowrap;font-weight:600}
.fur-swatches{display:flex;gap:8px;flex-wrap:wrap}
.fur-swatch{width:26px;height:26px;border-radius:50%;border:2px solid var(--cat-input-border);cursor:pointer;padding:0;transition:transform .15s,box-shadow .15s;flex-shrink:0}
.fur-swatch:hover{transform:scale(1.18)}
.fur-swatch.active{border-color:var(--cat-accent);box-shadow:0 0 0 2px var(--cat-card),0 0 0 4px var(--cat-accent)}
.fur-custom{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.color-well{display:flex;align-items:center;gap:8px;cursor:pointer}
.color-well__label{font-size:12px;color:var(--cat-text-sub);white-space:nowrap}
.color-well input[type=color]{width:40px;height:30px;padding:2px;border:2px solid var(--cat-input-border);border-radius:8px;background:var(--cat-card);cursor:pointer;transition:transform .15s,border-color .15s}
.color-well input[type=color]:hover{transform:scale(1.1);border-color:var(--cat-accent)}
.color-well input[type=color]::-webkit-color-swatch-wrapper{padding:1px}
.color-well input[type=color]::-webkit-color-swatch{border-radius:5px;border:none}

.btn-bigcat{background:#8e6bb8;color:#fff;margin-top:8px}

.cat-market{background:var(--cat-card);border-radius:16px;padding:16px;margin-bottom:20px;box-shadow:var(--cat-shadow);transition:background .3s}
.cat-market h2{font-size:1.1rem;margin-bottom:10px;color:var(--cat-text-h)}
.quotes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.quote{padding:14px 10px;border:1px solid var(--cat-quote-border);border-radius:12px;background:var(--cat-quote-bg);text-align:center}
.quote span,.quote small{display:block;opacity:.64;font-size:12px}
.quote strong{display:block;margin:5px 0 2px;color:#3b7d55;font-size:1.6rem;line-height:1.1}
.quote.buy strong{color:var(--cat-accent-food)}
.quote.inv strong{color:var(--cat-accent-can)}
.quote.food strong{color:#8d6e3f}
.trade-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.trade-box{padding:14px;border:1px solid var(--cat-quote-border);border-radius:12px}
.trade-box h3{font-size:1rem;margin-bottom:8px;color:var(--cat-text-h)}
.trade-box label{display:block;font-size:13px;margin-bottom:4px;color:var(--cat-text-sub)}
.trade-box input[type=number]{width:100%;padding:8px 10px;border:1px solid var(--cat-input-border);border-radius:8px;font-size:15px;outline:none;background:var(--cat-bg);color:var(--cat-text)}
.trade-box input:focus{border-color:#d98736}
.presets{display:flex;gap:6px;margin:8px 0}
.presets button{padding:4px 12px;border:0;border-radius:999px;color:var(--cat-text);background:var(--cat-preset-bg);cursor:pointer;font-size:13px}
.presets button:hover{background:var(--cat-preset-hover)}
.estimate{min-height:1.4em;margin:8px 0 12px;color:var(--cat-accent-food);font-weight:600;font-size:13px}
.cat-btn{display:block;width:100%;padding:10px;border:0;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:opacity .15s}
.cat-btn:disabled{opacity:.4;cursor:not-allowed}
.cat-btn-buy{background:#d98736;color:#fff}
.cat-btn-sell{background:#5974a6;color:#fff}
.cat-btn-checkin{background:#3b7d55;color:#fff;margin-top:8px}
.closed-msg{text-align:center;opacity:.68;padding:10px 0;font-size:14px}

.cat-history{background:var(--cat-card);border-radius:16px;padding:16px;box-shadow:var(--cat-shadow);transition:background .3s}
.cat-history h2{font-size:1.1rem;margin-bottom:10px;color:var(--cat-text-h)}
.history-list{max-height:300px;overflow-y:auto}
.history-item{padding:8px 0;border-bottom:1px solid var(--cat-hist-border);font-size:13px;display:flex;justify-content:space-between}
.history-item:last-child{border:0}
.history-item .time{opacity:.5;font-size:12px}
.history-item .delta.pos{color:#3b7d55}
.history-item .delta.neg{color:#c0392b}
.cat-empty{text-align:center;padding:20px;opacity:.5;font-size:13px}

.cat-tasks{background:var(--cat-card);border-radius:16px;padding:16px;margin-bottom:20px;box-shadow:var(--cat-shadow);transition:background .3s}
.cat-tasks h2{font-size:1.1rem;margin-bottom:10px;color:var(--cat-text-h)}
.task-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--cat-hist-border)}
.task-item:last-child{border:0}
.task-icon{width:28px;height:28px;border-radius:8px;background:var(--cat-preset-bg);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.task-info{flex:1;min-width:0}
.task-name{font-size:13px;color:var(--cat-text)}
.task-progress{height:4px;border-radius:2px;background:var(--cat-preset-bg);margin-top:4px;overflow:hidden}
.task-progress-bar{height:100%;border-radius:2px;background:var(--cat-accent-food);transition:width .3s}
.task-reward{font-size:12px;color:var(--cat-accent-food);font-weight:600;white-space:nowrap}
.task-claim{padding:4px 10px;border:0;border-radius:6px;background:var(--cat-accent-food);color:#fff;font-size:12px;cursor:pointer;white-space:nowrap}
.task-claim:disabled{opacity:.4;cursor:not-allowed}
.task-done{font-size:12px;color:#3b7d55;font-weight:600}
.online-timer{font-size:12px;color:var(--cat-text-sub);margin-bottom:10px;padding:6px 10px;border-radius:8px;background:var(--cat-preset-bg)}

@media(max-width:520px){
  .quotes{grid-template-columns:1fr 1fr}
  .trade-row{grid-template-columns:1fr}
}