/* ===== Animal Island UI - Component Library ===== */
:root {
  --ai-primary: #19C8B9; --ai-primary-hover: #3DD4C6; --ai-primary-active: #50B9AB;
  --ai-text: #725D42; --ai-text-secondary: #9F927D; --ai-text-disabled: #C4B89E;
  --ai-border: #C4B89E; --ai-border-hover: #A89878;
  --ai-bg: #F7F3DF; --ai-bg-secondary: #F0E8D8;
  --ai-shadow-bottom: #D4C9B4;
  --ai-radius-sm: 16px; --ai-radius-base: 18px; --ai-radius-lg: 24px; --ai-radius-pill: 50px;
  --ai-duration-base: 0.25s; --ai-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ai-font: Nunito, 'Noto Sans SC', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.ai-input-wrap { display:inline-flex; align-items:center; width:100%; background:#F7F3DF; border:2px solid #C4B89E; border-radius:50px; box-shadow:0 3px 0 0 #D4C9B4; transition:all 0.25s cubic-bezier(0.4,0,0.2,1); }
.ai-input-wrap:hover { border-color:#A89878; box-shadow:0 3px 0 0 #C4C9B4; }
.ai-input-wrap:focus-within { border-color:#19C8B9; }
.ai-input-wrap.ai-input-middle { height:40px; padding:0 18px; font-size:14px; }
.ai-input-wrap.ai-input-large { height:48px; padding:0 22px; font-size:16px; }
.ai-input { flex:1; width:100%; border:none; outline:none; background:transparent; color:#725D42; font-size:inherit; font-weight:500; font-family:var(--ai-font); }
.ai-input::placeholder { color:#C4B89E; font-weight:400; }
.ai-input-prefix { margin-right:6px; color:#A0936E; flex-shrink:0; display:inline-flex; align-items:center; }
.ai-card { border-radius:20px; background:rgb(247,243,223); padding:16px 24px; color:#725d42; font-weight:500; transition:all 0.3s ease; cursor:pointer; border:1.5px solid #d4c4a8; }
.ai-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.12); }
.ai-pattern-app-teal { background:radial-gradient(circle,rgba(130,213,187,0.18) 1.5px,transparent 1.5px),radial-gradient(circle,rgba(170,235,210,0.12) 1px,transparent 1px),#e8faf5; background-size:28px 28px,14px 14px; background-position:0 0,7px 7px; border:1.5px solid #82d5bb; color:#2a6b5a; }
.ai-pattern-app-pink { background:radial-gradient(circle,rgba(248,166,178,0.18) 1.5px,transparent 1.5px),radial-gradient(circle,rgba(255,200,210,0.12) 1px,transparent 1px),#fde4e8; background-size:28px 28px,14px 14px; background-position:0 0,7px 7px; border:1.5px solid #f8a6b2; color:#a85565; }
.ai-pattern-app-blue { background:radial-gradient(circle,rgba(136,157,240,0.18) 1.5px,transparent 1.5px),radial-gradient(circle,rgba(180,195,255,0.12) 1px,transparent 1px),#e8edff; background-size:28px 28px,14px 14px; background-position:0 0,7px 7px; border:1.5px solid #889df0; color:#4a5a8a; }
.ai-pattern-app-yellow { background:radial-gradient(circle,rgba(247,205,103,0.18) 1.5px,transparent 1.5px),radial-gradient(circle,rgba(255,230,160,0.12) 1px,transparent 1px),#fff8e0; background-size:28px 28px,14px 14px; background-position:0 0,7px 7px; border:1.5px solid #f7cd67; color:#7a6528; }
.ai-pattern-app-green { background:radial-gradient(circle,rgba(138,198,138,0.18) 1.5px,transparent 1.5px),radial-gradient(circle,rgba(180,220,180,0.12) 1px,transparent 1px),#e8f5e8; background-size:28px 28px,14px 14px; background-position:0 0,7px 7px; border:1.5px solid #8ac68a; color:#3a6b3a; }
.ai-pattern-purple { background:radial-gradient(circle,rgba(183,125,238,0.18) 1.5px,transparent 1.5px),radial-gradient(circle,rgba(220,180,255,0.12) 1px,transparent 1px),#f0e8ff; background-size:28px 28px,14px 14px; background-position:0 0,7px 7px; border:1.5px solid #b77dee; color:#6a3a9a; }
.ai-title { display:inline-block; font-family:var(--ai-font); font-weight:800; line-height:1; user-select:none; }
.ai-ribbon { --rf:#27D039;--rb:#20992A;--rk:#115017;--rt:#FFF; position:relative; display:inline-flex; align-items:center; justify-content:center; height:2em; padding:0 1.6em; color:var(--rt); font-weight:900; letter-spacing:0.04em; white-space:nowrap; filter:drop-shadow(0 0.08em 0.12em rgba(0,0,0,0.05)); }
.ai-ribbon-text { position:relative; z-index:4; display:inline-flex; align-items:center; height:2em; padding-top:0.11em; color:var(--rt); text-shadow:0 0.04em 0.08em rgba(0,0,0,0.05); }
.ai-ribbon-back { position:absolute; bottom:-0.4em; width:1.7em; height:1.7em; background:var(--rb); z-index:1; }
.ai-ribbon-back-left { left:-0.6em; border-radius:0.08em 0 0 0.08em; clip-path:polygon(100% 0%,100% 100%,0% 100%,30% 50%,0% 0%); }
.ai-ribbon-back-right { right:-0.6em; border-radius:0 0.08em 0.08em 0; clip-path:polygon(0% 0%,100% 0%,70% 50%,100% 100%,0% 100%); }
.ai-ribbon-fold { position:absolute; top:calc(100% - 0.05em); width:0; height:0; border-style:solid; z-index:2; }
.ai-ribbon-fold-left { left:0.15em; border-width:0 0.95em 0.45em 0; border-color:transparent var(--rk) transparent transparent; }
.ai-ribbon-fold-right { right:0.16em; border-width:0 0 0.45em 0.95em; border-color:transparent transparent transparent var(--rk); }
.ai-ribbon-front { position:absolute; inset:0 0.1em; background:var(--rf); border-radius:0.2em; z-index:3; transform:perspective(11.5em) rotateX(3deg); box-shadow:inset 0 -0.06em 0 rgba(0,0,0,0.05); pointer-events:none; }
.ai-color-app-teal { --rf:#82D5BB;--rb:#40A880;--rk:#186048;--rt:#FFF; }
.ai-color-app-pink { --rf:#F8A6B2;--rb:#E06880;--rk:#A03060;--rt:#FFF; }
.ai-color-app-blue { --rf:#889DF0;--rb:#5068D8;--rk:#2030A0;--rt:#FFF; }
.ai-color-app-yellow { --rf:#F7CD67;--rb:#D4A030;--rk:#8A6010;--rt:#725D42; }
.ai-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--ai-font); font-weight:600; white-space:nowrap; cursor:pointer; border:2px solid transparent; border-radius:50px; transition:all 0.25s cubic-bezier(0.4,0,0.2,1); user-select:none; outline:none; line-height:1; }
.ai-btn-middle { height:45px; padding:0 20px; font-size:14px; }
.ai-btn-small { height:32px; padding:0 16px; font-size:12px; border-radius:16px; }
.ai-btn-default { color:#725D42; background:#F8F8F0; border-color:#C4B89E; box-shadow:0 3px 0 0 #D4C9B4; }
.ai-btn-default:hover { color:#19C8B9; border-color:#19C8B9; transform:translateY(-1px); box-shadow:0 4px 0 0 #D4C9B4; }
.ai-btn-default:active { transform:translateY(2px); box-shadow:0 1px 0 0 #D4C9B4; }
.ai-btn-primary { color:#794F27; background:#F8F8F0; border-color:#F8F8F0; box-shadow:0 5px 0 0 #BDAEA0; }
.ai-btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 0 0 #BDAEA0; }
.ai-btn-primary:active { transform:translateY(2px); box-shadow:0 1px 0 0 #BDAEA0; }
.ai-btn-danger { color:#fff; background:#FC736D; border-color:#FC736D; box-shadow:0 3px 0 0 #D43030; }
.ai-btn-danger:hover { transform:translateY(-1px); box-shadow:0 4px 0 0 #D43030; }
.ai-btn-block { display:flex; width:100%; }
.ai-mood-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 16px; border-radius:50px; font-size:13px; font-weight:600; border:2px solid #C4B89E; background:#F8F8F0; color:#725D42; cursor:pointer; transition:all 0.2s ease; box-shadow:0 2px 0 0 #D4C9B4; font-family:var(--ai-font); }
.ai-mood-pill:hover { transform:translateY(-1px); box-shadow:0 3px 0 0 #D4C9B4; }
.ai-mood-pill.active { border-color:#19C8B9; background:#E0F7F4; color:#19C8B9; }
.ai-view-toggle { display:inline-flex; border-radius:50px; overflow:hidden; border:2px solid #C4B89E; background:#F8F8F0; box-shadow:0 2px 0 0 #D4C9B4; font-family:var(--ai-font); }
.ai-view-toggle button { padding:8px 16px; border:none; background:transparent; color:#725D42; font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s; font-family:inherit; }
.ai-view-toggle button.active { background:#19C8B9; color:#FFF; }
.ai-view-toggle button:hover:not(.active) { background:#F0E8D8; }
.ai-stat-item { display:flex; align-items:center; gap:8px; padding:10px 20px; border-radius:50px; background:#F8F8F0; border:2px solid #C4B89E; box-shadow:0 3px 0 0 #D4C9B4; font-size:14px; font-weight:600; color:#725D42; transition:all 0.2s; font-family:var(--ai-font); }
.ai-stat-item:hover { transform:translateY(-1px); box-shadow:0 4px 0 0 #D4C9B4; }
.ai-stat-item .stat-num { font-size:20px; font-weight:800; color:#19C8B9; }
.ai-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:1000; backdrop-filter:blur(4px); }
.ai-modal-box { background:#F7F3DF; border-radius:24px; border:2px solid #D4C4A8; box-shadow:0 8px 32px rgba(0,0,0,0.2),0 4px 0 0 #D4C9B4; padding:32px; max-width:520px; width:90%; max-height:80vh; overflow-y:auto; animation:ai-modalPop 0.3s cubic-bezier(0.34,1.56,0.64,1); font-family:var(--ai-font); }
@keyframes ai-modalPop { 0%{transform:scale(0.8) translateY(20px);opacity:0;} 100%{transform:scale(1) translateY(0);opacity:1;} }
.ai-modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.ai-modal-close { width:36px; height:36px; border-radius:50%; border:2px solid #C4B89E; background:#F8F8F0; color:#725D42; font-size:18px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; box-shadow:0 2px 0 0 #D4C9B4; }
.ai-modal-close:hover { background:#FC736D; border-color:#FC736D; color:#fff; }
.ai-form-group { margin-bottom:20px; }
.ai-form-label { display:block; font-size:14px; font-weight:700; color:#725D42; margin-bottom:8px; font-family:var(--ai-font); }
.ai-form-textarea { width:100%; min-height:120px; border:2px solid #C4B89E; border-radius:16px; background:#FFF; padding:14px 18px; font-size:14px; font-family:var(--ai-font); color:#725D42; resize:vertical; outline:none; transition:border-color 0.2s; box-sizing:border-box; }
.ai-form-textarea:focus { border-color:#19C8B9; }
.ai-toast { position:fixed; top:24px; left:50%; transform:translateX(-50%); padding:12px 24px; border-radius:50px; background:#F7F3DF; border:2px solid #82D5BB; color:#2a6b5a; font-weight:600; font-size:14px; box-shadow:0 4px 12px rgba(0,0,0,0.15),0 3px 0 0 #D4C9B4; z-index:2000; animation:ai-toastIn 0.3s ease; font-family:var(--ai-font); }
@keyframes ai-toastIn { 0%{transform:translateX(-50%) translateY(-20px);opacity:0;} 100%{transform:translateX(-50%) translateY(0);opacity:1;} }
.ai-fab { position:fixed; bottom:32px; right:32px; width:60px; height:60px; border-radius:50%; background:#19C8B9; border:3px solid #FFF; color:#FFF; font-size:28px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(25,200,185,0.4),0 3px 0 0 #14A89A; transition:all 0.25s; z-index:100; }
.ai-fab:hover { transform:scale(1.1) translateY(-2px); box-shadow:0 6px 16px rgba(25,200,185,0.5),0 4px 0 0 #14A89A; }
.ai-fab:active { transform:scale(0.95); }