.app-modal .modal-panel {
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.api-settings {
  min-height: min-content;
  overflow: visible;
  padding-bottom: 28px;
}

.pretty-select-menu {
  max-height: min(190px, 30dvh);
}

.friend-add-shortcut {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 9px 0 14px;
  padding: 9px 11px;
  border: 1px solid #e8e8e5;
  border-radius: 17px;
  background: rgba(255,255,255,.78);
  color: #1d1d1d;
  text-align: left;
  box-shadow: 0 5px 16px rgba(0,0,0,.035);
}

.friend-add-shortcut .shortcut-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #171717;
  color: #fff;
}

.shortcut-mark svg { width: 19px; height: 19px; }
.shortcut-copy strong, .shortcut-copy small { display: block; }
.shortcut-copy strong { font: 600 9px/1.2 var(--font-family); }
.shortcut-copy small { margin-top: 4px; color: #9a9a9a; font: 600 6px/1 var(--font-family); letter-spacing: .1em; }
.shortcut-arrow { color: #888; font-size: 13px; transition: transform .18s ease; }
.friend-add-shortcut:hover { border-color: #d8d8d4; background: #fff; }
.friend-add-shortcut:hover .shortcut-arrow { transform: translateX(2px); }

.friend-management {
  overflow: hidden;
  border: 1px solid #e6e6e2;
  border-radius: 17px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 5px 16px rgba(0,0,0,.025);
}

.friend-management button {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: #242424;
  text-align: left;
}

.friend-management button + button { border-top: 1px solid #ededE9; }
.management-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; background: #f0f0ed; }
.management-icon svg { width: 17px; height: 17px; }
.friend-management strong, .friend-management small { display: block; }
.friend-management strong { font: 600 9px/1.2 var(--font-family); }
.friend-management small { margin-top: 4px; color: #999; font: 7px/1.35 var(--font-family); }
.friend-management i { color: #aaa; font: normal 16px/1 var(--font-family); }
.friend-management .block-action { color: #9c4545; }
.friend-management .block-action .management-icon { background: #f7eded; }
.friend-management button:hover { background: #fafaf8; }

#friendCodeInput::placeholder {
  color: #aaa;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: .14em;
}

.swipe-row {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 15px;
  touch-action: pan-y;
}

.swipe-main {
  box-sizing: border-box;
  display: grid;
  width: 100%;
  max-width: none;
  margin: 0;
  position: relative;
  z-index: 2;
  background: #f7f7f5 !important;
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

.swipe-row.revealed .swipe-main { transform: translateX(-82px) !important; }
.swipe-actions { box-sizing: border-box; position: absolute; z-index: 1; inset: 0 0 0 auto; width: 82px; display: grid; place-items: stretch; padding: 7px 5px 7px 9px; pointer-events: none; visibility: hidden; }
.swipe-row.revealed .swipe-actions { pointer-events: auto; visibility: visible; }
.swipe-row.swiping .swipe-actions { visibility: visible; }
.swipe-actions button { border: 0; border-radius: 13px; background: #202020; color: #fff; font: 600 8px/1 var(--font-family); box-shadow: 0 5px 14px rgba(0,0,0,.12); }
.swipe-row.is-pinned .swipe-actions button { background: #777; }
.swipe-row.is-pinned::before { content: ''; position: absolute; z-index: 3; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: #202020; pointer-events: none; }
.friend-list, .group-list { gap: 3px; }

/* Conversation rows: keep the content inside one calm, light card. */
.friend-list,
.group-list {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.group-list .swipe-row,
.friend-list .swipe-row {
  min-height: 70px;
  margin: 0 0 6px;
  border: 1px solid rgba(205, 205, 201, .48);
  border-radius: 18px;
  background: #eeeEeb;
  box-shadow: 0 4px 14px rgba(75, 75, 70, .035);
}

.group-list .group-row,
.friend-list .friend-row {
  min-width: 0;
  min-height: 68px;
  height: 68px;
  padding: 10px 12px;
  border: 0;
  border-radius: 17px;
  background: #fbfbfa !important;
  overflow: hidden;
}

.group-list .group-row { grid-template-columns: 42px minmax(0, 1fr) auto; }
.group-list .group-row > span:nth-child(2),
.friend-list .friend-row > span:nth-child(2) { min-width: 0; }
.group-list .group-row strong,
.group-list .group-row small,
.friend-list .friend-row strong,
.friend-list .friend-row > span:nth-child(2) > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-list .group-mark {
  background: #e5e5e2;
  color: #5f5f5b;
  box-shadow: inset 0 0 0 1px rgba(130, 130, 125, .08);
}

.swipe-actions { background: #eeeeeb; }
.swipe-actions button {
  background: #deded9;
  color: #555550;
  box-shadow: none;
}
.swipe-row.is-pinned .swipe-actions button {
  background: #d2d2cd;
  color: #4e4e49;
}
.swipe-row.is-pinned::before { background: #aaa9a3; }

/* The open conversation is a complete screen, not a translucent layer. */
.social-app .chat-room { z-index: 6; background: #f1f1ef; }
.social-app.chat-open > .social-header,
.social-app.chat-open > .social-home { visibility: hidden; pointer-events: none; }
.social-app.chat-open .chat-room { visibility: visible; }

.char-api-status { display:grid; grid-template-columns:9px minmax(0,1fr) auto; align-items:center; gap:9px; margin:8px 0 11px; padding:10px 10px 10px 12px; border:1px solid #e3e3df; border-radius:15px; background:#fff; }
.api-status-dot { width:7px; height:7px; border-radius:50%; background:#b8b8b3; box-shadow:0 0 0 3px #eeeEeb; }
.char-api-status.ready .api-status-dot { background:#292927; box-shadow:0 0 0 3px #deded9; }
.char-api-status strong,.char-api-status small { display:block; }
.char-api-status strong { font:600 8px/1.2 var(--font-family); }
.char-api-status small { margin-top:4px; color:#999; font:7px/1.35 var(--font-family); }
.char-api-status button { min-width:59px; height:30px; padding:0 9px; border:0; border-radius:10px; background:#292927; color:#fff; font:600 7px/1 var(--font-family); }

/* Shareable beauty cards */
.theme-share-sheet,
.theme-library-sheet {
  box-sizing: border-box;
  position: absolute;
  inset: auto 0 0;
  z-index: 14;
  max-height: calc(100% - 66px);
  padding: 10px 18px 24px;
  overflow-y: auto;
  border-radius: 27px 27px 0 0;
  background: #f7f7f5;
  box-shadow: 0 -18px 46px rgba(55,55,50,.12);
  transform: translateY(105%);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.theme-share-sheet.open,
.theme-library-sheet.open { transform: translateY(0); }
.theme-sheet-handle { width: 36px; height: 4px; margin: 0 auto 15px; border-radius: 4px; background: #d7d7d3; }
.theme-share-sheet header,
.theme-library-sheet header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.theme-share-sheet header span,
.theme-library-sheet header span { display: block; color: #aaa; font: 600 7px/1 var(--font-family); letter-spacing: .16em; }
.theme-share-sheet header strong,
.theme-library-sheet header strong { display: block; margin-top: 4px; font: 600 17px/1.2 var(--display-font); }
.theme-share-sheet header button,
.theme-library-sheet header button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #e9e9e5; color: #777; font-size: 17px; }
.theme-sheet-note { margin: 14px 0; color: #858581; font: 8px/1.6 var(--font-family); }
.theme-name-field span { display: block; margin-bottom: 7px; color: #999; font: 600 7px/1 var(--font-family); letter-spacing: .12em; }
.theme-name-field input { box-sizing: border-box; width: 100%; height: 42px; padding: 0 13px; border: 1px solid #e5e5e1; border-radius: 14px; outline: 0; background: #fff; font-size: 9px; }
.theme-scope-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 14px 0; }
.theme-scope-list > button { min-width: 0; padding: 8px; border: 1px solid #e4e4e0; border-radius: 16px; background: #fff; text-align: left; }
.theme-scope-list > button.selected { border-color: #aaa9a3; background: #eeeEeb; box-shadow: inset 0 0 0 1px #d1d1cc; }
.theme-scope-list strong,.theme-scope-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-scope-list strong { margin-top: 8px; font-size: 8px; }.theme-scope-list small { margin-top: 3px; color: #999; font-size: 6px; }
.scope-preview { height: 46px; display: block; position: relative; overflow: hidden; border-radius: 11px; background: #eeeEeb; }
.scope-preview i { position: absolute; display: block; border-radius: 8px; background: #fff; }
.scope-preview i:nth-child(1){width:46%;height:12px;left:7px;top:7px}.scope-preview i:nth-child(2){width:56%;height:12px;right:7px;top:22px;background:#d6d6d1}.scope-preview i:nth-child(3){width:23%;height:5px;left:8px;bottom:5px;background:#c5c5c0}
.desktop-preview i:nth-child(1){width:25px;height:25px;border-radius:50%}.desktop-preview i:nth-child(2){width:36px;height:27px}.desktop-preview i:nth-child(3){width:22px;height:22px;left:38px;top:9px}
.bundle-preview { background: radial-gradient(rgba(90,90,85,.12) .7px,transparent .7px),#efefec; background-size:8px 8px; }
.send-theme-card,.open-theme-library { width:100%; height:42px; border:0; border-radius:14px; font:600 9px/1 var(--font-family); }
.send-theme-card { background:#292927; color:#fff; }.open-theme-library { margin-top:7px; background:#fff; color:#777; }
.beauty-card { box-sizing:border-box; align-self:flex-start; width:min(88%,280px); padding:8px; border:1px solid #e1e1dd; border-radius:20px; background:#fbfbfa; color:#333; box-shadow:0 5px 16px rgba(45,45,40,.045); }
.beauty-card.sent { align-self:flex-end; }
.beauty-card-cover { height:76px; position:relative; overflow:hidden; border-radius:14px; background:radial-gradient(rgba(80,80,75,.1) .7px,transparent .7px),#e9e9e5; background-size:9px 9px; }
.beauty-card-cover span { position:absolute; display:block; border-radius:10px; background:rgba(255,255,255,.9); box-shadow:0 3px 8px rgba(50,50,45,.04); }
.beauty-card-cover span:nth-child(1){width:50px;height:50px;left:12px;top:13px}.beauty-card-cover span:nth-child(2){width:92px;height:21px;right:12px;top:13px}.beauty-card-cover span:nth-child(3){width:70px;height:21px;right:12px;top:42px;background:#d3d3ce}.beauty-card-cover b{position:absolute;left:23px;top:34px;color:#999;font:600 6px/1 var(--font-family);letter-spacing:.14em}
.beauty-card-copy { padding:10px 4px 8px; }.beauty-card-copy span,.beauty-card-copy strong,.beauty-card-copy small{display:block}.beauty-card-copy span{color:#aaa;font:600 6px/1 var(--font-family);letter-spacing:.12em}.beauty-card-copy strong{margin-top:5px;font-size:10px}.beauty-card-copy small{margin-top:3px;color:#999;font-size:7px}
.beauty-card-actions { display:grid; grid-template-columns:.8fr 1.15fr .8fr; gap:5px; }.beauty-card-actions button{height:29px;border:0;border-radius:10px;background:#ededE9;color:#656560;font:600 7px/1 var(--font-family)}.beauty-card-actions [data-theme-apply]{background:#292927;color:#fff}.beauty-card>time{display:block;padding:6px 3px 1px;color:#aaa;font-size:6px;text-align:right}
.theme-library-sheet { inset:0; max-height:none; border-radius:0; padding-top:18px; transform:translateX(105%); }
.theme-library-sheet.open{transform:translateX(0)}
#themeLibraryList{display:grid;gap:8px;margin-top:20px}.library-theme{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:10px;width:100%;padding:9px;border:1px solid #e4e4e0;border-radius:16px;background:#fff;text-align:left}.library-swatch{width:48px;height:42px;border-radius:11px;background:#eeeEeb;position:relative}.library-swatch i{position:absolute;height:6px;border-radius:4px;background:#fff;left:7px;right:7px}.library-swatch i:nth-child(1){top:8px}.library-swatch i:nth-child(2){top:18px;left:16px}.library-swatch i:nth-child(3){top:28px;right:16px;background:#cdcdc8}.library-theme strong,.library-theme small{display:block}.library-theme strong{font-size:9px}.library-theme small{margin-top:4px;color:#999;font-size:7px}.library-theme b{color:#858581;font-size:7px}

/* Large group tools */
.group-entry-actions{display:grid;grid-template-columns:1fr 108px;gap:7px}.join-group-toggle{border:1px solid #deded9;border-radius:14px;background:#fff;color:#555;font:600 8px/1 var(--font-family)}
.join-group-box{display:grid;grid-template-columns:1fr 56px;gap:7px;margin-top:8px}.join-group-box input{min-width:0;height:38px;padding:0 12px;border:1px solid #deded9;border-radius:13px;background:#fff;outline:0;font-size:8px;text-transform:uppercase;letter-spacing:.1em}.join-group-box button{border:0;border-radius:13px;background:#292927;color:#fff;font-size:8px}
.group-share-card{display:grid;grid-template-columns:78px minmax(0,1fr) 52px;align-items:center;gap:11px;padding:11px;border:1px solid #e2e2de;border-radius:19px;background:#fff;box-shadow:0 5px 18px rgba(45,45,40,.035)}
.group-qr{width:78px;height:78px;display:grid;place-items:center;overflow:hidden;border-radius:13px;background:#f0f0ed;color:#999;font:600 8px/1 var(--font-family)}.group-qr img,.group-qr canvas{width:74px!important;height:74px!important}.group-share-card>div:nth-child(2)>span,.group-share-card>div:nth-child(2)>strong,.group-share-card>div:nth-child(2)>small{display:block}.group-share-card>div:nth-child(2)>span{color:#aaa;font:600 6px/1 var(--font-family);letter-spacing:.13em}.group-share-card>div:nth-child(2)>strong{margin-top:7px;font:600 13px/1 var(--display-font);letter-spacing:.08em}.group-share-card>div:nth-child(2)>small{margin-top:6px;color:#888;font-size:7px}.group-share-actions{display:grid;gap:6px}.group-share-actions button{height:30px;border:0;border-radius:10px;background:#eeeEeb;color:#686863;font-size:7px}.group-share-actions button:first-child{background:#292927;color:#fff}
.group-join-control{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:9px 0 13px;padding:10px 12px;border-radius:15px;background:#fff;border:1px solid #e6e6e2}.group-join-control strong,.group-join-control small{display:block}.group-join-control strong{font-size:8px}.group-join-control small{margin-top:4px;color:#999;font-size:7px}.group-join-control button{min-width:52px;height:28px;border:0;border-radius:10px;background:#292927;color:#fff;font-size:7px}.group-join-control button.closed{background:#e7e7e3;color:#777}.group-join-control button:disabled{opacity:.45}
.group-tool-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;border-radius:14px;background:#eaeaE6}.group-tool-tabs button{height:31px;border:0;border-radius:10px;background:transparent;color:#888;font-size:7px}.group-tool-tabs button.selected{background:#fff;color:#252523;font-weight:600;box-shadow:0 2px 7px rgba(45,45,40,.05)}
.group-tool-panel{display:none;min-height:120px;padding:10px 0 4px}.group-tool-panel.selected{display:block}.group-member-list{display:grid;gap:6px}.group-member{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px 9px;border-radius:14px;background:#fff}.group-member .friend-avatar{width:38px;height:38px}.group-member strong,.group-member small{display:block}.group-member strong{font-size:8px}.group-member small{margin-top:4px;color:#999;font-size:7px}.member-admin-actions{display:flex;gap:4px}.member-admin-actions button{height:26px;padding:0 7px;border:0;border-radius:8px;background:#ecece8;color:#777;font-size:6px}.member-admin-actions button:last-child:not(:first-child){color:#9a5555;background:#f4eceb}
.group-upload-button{width:100%;height:44px;border:1px dashed #cfcfca;border-radius:14px;background:#fff;color:#333;font:600 8px/1 var(--font-family)}.group-upload-button small{margin-left:5px;color:#aaa;font-weight:400}.group-media-list{display:grid;gap:6px;margin-top:9px}.group-file{display:grid;grid-template-columns:38px minmax(0,1fr) 18px;align-items:center;gap:9px;padding:9px;border-radius:14px;background:#fff;color:inherit;text-decoration:none}.group-file>span:first-child{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#292927;color:#fff;font:600 6px/1 var(--font-family)}.group-file strong,.group-file small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-file strong{font-size:8px}.group-file small{margin-top:4px;color:#999;font-size:6px}.group-file b{color:#777;font-size:12px}
.group-album-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:9px}.group-album-grid>a{position:relative;aspect-ratio:1;overflow:hidden;border-radius:12px;background:#e9e9e5}.group-album-grid img{width:100%;height:100%;object-fit:cover}.group-album-grid span{position:absolute;left:5px;right:5px;bottom:5px;overflow:hidden;color:#fff;font-size:6px;text-shadow:0 1px 4px #000;white-space:nowrap;text-overflow:ellipsis}

/* Calendar & class schedule */
.schedule-app{position:relative;height:calc(68dvh - 48px);padding:2px 1px 24px;overflow-y:auto;text-align:left;scrollbar-width:none}.schedule-app::-webkit-scrollbar{display:none}.schedule-app>header{display:flex;align-items:center;justify-content:space-between;margin:2px 0 13px}.schedule-app h2{margin:3px 0 0;font:600 24px/1.1 var(--display-font)}.schedule-app>header>button{height:30px;padding:0 12px;border:0;border-radius:11px;background:#292927;color:#fff;font-size:7px}.schedule-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:#eaeaE6}.schedule-tabs button{height:31px;border:0;border-radius:10px;background:transparent;color:#888;font-size:8px}.schedule-tabs button.selected{background:#fff;color:#252523;font-weight:600;box-shadow:0 2px 7px rgba(45,45,40,.05)}.schedule-panel{display:none;padding-top:12px}.schedule-panel.selected{display:block}.calendar-head{display:grid;grid-template-columns:34px 1fr 34px;align-items:center;margin-bottom:8px;text-align:center}.calendar-head button{width:32px;height:32px;border:0;border-radius:11px;background:#fff;font-size:17px}.calendar-head strong{font:600 13px/1 var(--display-font)}.calendar-week,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.calendar-week{margin-bottom:4px;text-align:center}.calendar-week span{color:#aaa;font-size:7px}.calendar-grid button{position:relative;aspect-ratio:1;border:0;border-radius:11px;background:transparent;color:#4f4f4b;font-size:8px}.calendar-grid button.outside{color:#c3c3bf}.calendar-grid button.today{box-shadow:inset 0 0 0 1px #292927}.calendar-grid button.selected{background:#292927;color:#fff}.calendar-grid button i{position:absolute;left:50%;bottom:4px;width:3px;height:3px;border-radius:50%;background:#999;transform:translateX(-50%)}.calendar-grid button.selected i{background:#fff}.selected-day-card{display:grid;grid-template-columns:1fr auto;align-items:end;margin-top:12px;padding:13px;border-radius:17px;background:#fff}.selected-day-card span,.selected-day-card strong{display:block}.selected-day-card span{grid-column:1;color:#999;font-size:7px}.selected-day-card strong{grid-column:1;margin-top:5px;font-size:10px}.selected-day-card button{grid-column:2;grid-row:1/3;height:29px;border:0;border-radius:10px;background:#e9e9e5;color:#555;font-size:7px}.date-note-list,.class-list{display:grid;gap:6px;margin-top:7px}.date-note-list article,.class-list article{display:grid;grid-template-columns:43px 1fr 25px;align-items:center;gap:8px;padding:9px 10px;border-radius:14px;background:#fff}.date-note-list time,.class-list time{font:600 8px/1 var(--display-font)}.date-note-list strong,.date-note-list small,.class-list strong,.class-list small{display:block}.date-note-list strong,.class-list strong{font-size:8px}.date-note-list small,.class-list small{margin-top:4px;color:#999;font-size:7px}.date-note-list button,.class-list button{width:24px;height:24px;border:0;border-radius:9px;background:#eeeEeb;color:#888}.class-week{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.class-week button{height:49px;padding:5px 0;border:0;border-radius:11px;background:#fff;color:#888}.class-week span,.class-week strong{display:block}.class-week span{font-size:6px}.class-week strong{margin-top:6px;font-size:9px}.class-week button.today{box-shadow:inset 0 0 0 1px #babAb5}.class-week button.selected{background:#292927;color:#fff}.class-list>p{padding:38px 10px;text-align:center;color:#aaa;font-size:8px}.add-class-button{width:100%;height:39px;margin-top:9px;border:1px dashed #cfcfca;border-radius:13px;background:#fff;color:#555;font-size:8px}.schedule-editor{position:absolute;z-index:4;inset:48px 0 auto;padding:15px;border:1px solid #dfdfdb;border-radius:19px;background:#f7f7f5;box-shadow:0 18px 45px rgba(45,45,40,.16)}.schedule-editor[hidden]{display:none}.editor-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.editor-title strong{font-size:12px}.editor-title button{width:28px;height:28px;border:0;border-radius:50%;background:#e6e6e2;color:#777}.schedule-editor>input,.schedule-editor select{box-sizing:border-box;width:100%;height:39px;margin-bottom:7px;padding:0 11px;border:1px solid #deded9;border-radius:12px;background:#fff;outline:0;font-size:8px}.schedule-editor-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}.schedule-editor-row.note-mode{grid-template-columns:1fr}.schedule-editor-row input{box-sizing:border-box;width:100%;height:39px;padding:0 11px;border:1px solid #deded9;border-radius:12px;background:#fff;font-size:8px}.schedule-editor>button{width:100%;height:38px;border:0;border-radius:12px;background:#292927;color:#fff;font-size:8px}