:root{
  --bg:#f4f6f8;
  --card:#ffffff;
  --ink:#1f2937;
  --muted:#6b7280;
  --soft:#f9fafb;
  --accent:#111827;
  --accent-hover:#374151;
  --danger:#b42318;
  --line:#e5e7eb;
  --shadow:0 10px 30px rgba(17,24,39,.08);
  --radius:16px;
}
*{box-sizing:border-box}
html{min-height:100%}
body{
  margin:0;
  min-height:100%;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:linear-gradient(180deg,#f8fafc 0%,var(--bg) 100%);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{width:min(960px,92vw);margin:0 auto}

/* top */
.hero{min-height:100vh;display:grid;place-items:center;padding:32px 0}
.grid.single{display:block;width:min(460px,92vw);margin:0 auto}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.card{
  background:rgba(255,255,255,.96);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
}
.tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding:5px;
  background:#eef2f7;
  border:1px solid #e2e8f0;
  border-radius:999px;
  margin-bottom:18px;
}
.tab{
  border:0;
  border-radius:999px;
  background:transparent;
  color:#475569;
  padding:11px 8px;
  font-weight:700;
  cursor:pointer;
  transition:.15s ease;
}
.tab.active{background:#fff;color:#111827;box-shadow:0 2px 10px rgba(15,23,42,.08)}
.form{display:grid;gap:11px}
.form label,.mini-label{font-weight:700;font-size:13px;color:#374151}
.form input,.form textarea,.form select{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:13px 14px;
  font:inherit;
  background:#fff;
  color:var(--ink);
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.form input:focus,.form textarea:focus,.form select:focus,.composer textarea:focus{
  border-color:#9ca3af;
  box-shadow:0 0 0 4px rgba(17,24,39,.06);
}
.form textarea{min-height:96px;resize:vertical}
.btn{
  border:0;
  border-radius:12px;
  background:var(--accent);
  color:#fff;
  font-weight:800;
  padding:13px 18px;
  cursor:pointer;
  font-size:15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:background .15s ease,transform .05s ease;
}
.btn:hover{background:var(--accent-hover)}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:#f3f4f6;color:#111827;border:1px solid var(--line)}
.btn.secondary:hover{background:#e5e7eb}
.btn.notice{background:#374151}
.btn.danger{background:var(--danger)}
.small{font-size:13px;color:var(--muted);line-height:1.7}
.alert{border-radius:12px;padding:12px 14px;margin-bottom:14px;border:1px solid var(--line);font-size:14px}
.alert.ok{background:#f0fdf4;color:#166534;border-color:#bbf7d0}
.alert.err{background:#fef2f2;color:#b42318;border-color:#fecaca}

/* room */
.room-head{
  position:sticky;
  top:0;
  z-index:5;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.room-head-inner{display:flex;gap:12px;justify-content:space-between;align-items:center;padding:12px 0}
.room-title{font-size:17px;font-weight:800;letter-spacing:.01em}
.chat-layout.single-room{display:block;max-width:880px;margin:0 auto;padding:22px 0 190px}
.messages{display:grid;gap:10px}
.msg{
  background:#fff;
  border:1px solid var(--line);
  border-radius:15px;
  padding:14px 15px;
  box-shadow:0 2px 10px rgba(15,23,42,.04);
}
.msg.notice,.msg.system{background:#fff}
.meta{font-size:12px;color:var(--muted);margin-bottom:7px;word-break:break-all}
.text{white-space:pre-wrap;line-height:1.75;word-break:break-word}
.empty{text-align:center;color:var(--muted);padding:50px 10px;background:#fff;border:1px dashed var(--line);border-radius:15px}
.photo-wrap{margin-top:10px}
.chat-photo{
  display:block;
  max-width:min(420px,100%);
  max-height:360px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  object-fit:contain;
}
.photo-name{font-size:12px;color:var(--muted);margin-top:6px}

/* composer */
.composer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding:12px 0;
  z-index:10;
}
.composer .wrap{width:min(880px,92vw)}
.composer form{
  display:grid;
  grid-template-columns:minmax(180px,260px) 1fr auto auto;
  gap:8px;
  align-items:end;
}
.mini-label{grid-column:1/-1;margin:0 0 -2px 2px}
.email-buttons{
  grid-column:1/2;
  display:flex;
  gap:7px;
  overflow-x:auto;
  padding:1px 2px 4px;
  scrollbar-width:thin;
}
.email-choice{
  flex:0 0 auto;
  max-width:240px;
  height:46px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:#374151;
  padding:0 14px;
  font:inherit;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease;
}

.email-choice input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}
.email-choice span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.form-note{
  grid-column:1/-1;
  font-size:13px;
  color:#6b7280;
  padding:4px 2px;
}

.email-choice:hover{background:#f9fafb}
.email-choice.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  box-shadow:0 4px 12px rgba(17,24,39,.14);
}
.composer textarea{
  grid-column:2/3;
  min-height:46px;
  max-height:120px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 13px;
  font:inherit;
  background:#fff;
  color:var(--ink);
  resize:vertical;
  outline:none;
}
.file-label{
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:#111827;
  font-weight:800;
  padding:0 14px;
  cursor:pointer;
}
.file-label:hover{background:#f9fafb}
.file-label input{display:none}
.file-info{font-size:12px;color:var(--muted);margin-top:7px;min-height:16px}

/* admin */
.admin{padding:30px 0}
.side{display:grid;gap:12px;align-content:start}
.form.compact{gap:9px}
.sender-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.sender-label{font-size:13px;font-weight:700;color:#555;white-space:nowrap}
.sender-current{display:inline-flex;align-items:center;min-height:38px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:8px 10px;font-size:13px;word-break:break-all;color:var(--ink)}

@media(max-width:800px){
  .hero{padding:22px 0;place-items:start center}
  .grid,.chat-layout{grid-template-columns:1fr}
  .card{padding:20px;border-radius:16px}
  .room-head-inner{align-items:center;flex-direction:row}
  .room-title{font-size:15px}
  .chat-layout.single-room{padding:16px 0 18px}
  .composer{position:sticky;padding:10px 0}
  .composer form{grid-template-columns:1fr;align-items:stretch}
  .mini-label,.email-buttons,.composer textarea{grid-column:1/-1}
  .email-buttons{flex-wrap:wrap;overflow:visible}
  .email-choice{max-width:100%}
  .file-label,.composer .btn{width:100%;height:46px}
  .chat-photo{max-width:100%;max-height:320px}
  .sender-row{align-items:stretch;flex-direction:column;gap:5px}
}

/* ===== room.php polish ===== */
.room-page{
  background:#f6f7f9;
}
.room-page .wrap{
  width:min(920px,94vw);
}
.room-head{
  background:rgba(255,255,255,.96);
  box-shadow:0 1px 0 rgba(17,24,39,.05);
}
.room-head-inner{
  min-height:58px;
  padding:10px 0;
}
.room-title{
  font-size:15px;
  font-weight:800;
  color:#111827;
}
.small-btn{
  min-height:38px;
  padding:9px 14px;
  border-radius:999px;
  font-size:13px;
}
.room-main{
  padding:22px 0 230px;
}
.conversation-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:20px;
  box-shadow:0 14px 35px rgba(15,23,42,.06);
  min-height:calc(100vh - 330px);
  padding:16px;
}
.messages{
  gap:12px;
}
.msg{
  width:fit-content;
  max-width:min(680px,100%);
  border-radius:18px;
  padding:13px 15px;
  border:1px solid #edf0f3;
  box-shadow:none;
  background:#f9fafb;
}
.msg.chat{
  background:#ffffff;
}
.msg.notice,.msg.system{
  width:100%;
  max-width:100%;
  text-align:center;
  background:#f8fafc;
  color:#475569;
}
.meta{
  font-size:11px;
  margin-bottom:6px;
  color:#64748b;
}
.text{
  font-size:15px;
  line-height:1.75;
}
.empty{
  min-height:220px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:#fafafa;
}
.chat-photo{
  border-radius:14px;
  box-shadow:0 8px 24px rgba(15,23,42,.08);
}
.composer{
  padding:12px 0 14px;
  background:rgba(246,247,249,.78);
  border-top:0;
}
.composer-card{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:20px;
  box-shadow:0 18px 45px rgba(15,23,42,.13);
  padding:14px;
}
.composer .wrap{
  width:min(920px,94vw);
}
.composer form.send-panel{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  align-items:stretch;
}
.sender-block{
  display:grid;
  gap:8px;
}
.sender-block .mini-label{
  margin:0;
  grid-column:auto;
  color:#475569;
  font-size:12px;
  letter-spacing:.02em;
}
.email-buttons{
  grid-column:auto;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  overflow:visible;
  padding:0;
}
.email-choice{
  height:38px;
  max-width:100%;
  border-radius:999px;
  padding:0 13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  color:#334155;
  font-size:12px;
  font-weight:800;
}
.email-choice:hover{
  background:#eef2f7;
}
.email-choice.active{
  background:#111827;
  border-color:#111827;
  color:#fff;
  box-shadow:0 8px 18px rgba(17,24,39,.18);
}
.message-row{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:8px;
  align-items:end;
}
.composer textarea{
  grid-column:auto;
  min-height:48px;
  max-height:140px;
  border-radius:15px;
  background:#f9fafb;
  border-color:#e5e7eb;
}
.file-label{
  height:48px;
  border-radius:15px;
  background:#fff;
  border-color:#e5e7eb;
  padding:0 16px;
}
.send-btn{
  height:48px;
  border-radius:15px;
  min-width:86px;
}
.file-info{
  margin:0;
  min-height:14px;
  font-size:12px;
}
@media(max-width:800px){
  .room-page .wrap,.composer .wrap{width:min(100% - 22px,920px)}
  .room-head-inner{min-height:54px}
  .room-title{font-size:14px}
  .room-main{padding:12px 0 14px}
  .conversation-card{min-height:54vh;padding:12px;border-radius:17px}
  .msg{max-width:100%;border-radius:16px;padding:12px 13px}
  .composer{
    position:sticky;
    bottom:0;
    padding:8px 0 10px;
    background:#f6f7f9;
  }
  .composer-card{border-radius:17px;padding:11px;box-shadow:0 -8px 25px rgba(15,23,42,.08)}
  .message-row{grid-template-columns:1fr 74px 74px;gap:6px}
  .composer textarea{min-height:46px;font-size:16px}
  .file-label,.send-btn{height:46px;width:auto;padding:0 10px;font-size:14px}
  .email-buttons{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
  .email-choice{flex:0 0 auto;max-width:230px}
}

/* ===== requested room layout update ===== */
.sender-block{
  order:1;
}
.message-row.message-bottom{
  order:2;
}
.sender-help{
  text-align:center;
  color:#64748b;
  font-size:12px;
  font-weight:800;
  margin-top:2px;
}
.sender-block .email-buttons{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.sender-block .email-choice{
  width:100%;
  height:44px;
  justify-content:center;
  border-radius:14px;
}
.sender-block .email-choice span{
  max-width:100%;
}
.composer form.send-panel{
  display:flex;
  flex-direction:column;
}
.message-row.message-bottom{
  margin-top:4px;
}
@media(max-width:800px){
  .sender-block .email-buttons{
    display:grid;
    grid-template-columns:1fr;
    overflow:visible;
    padding-bottom:0;
  }
  .sender-block .email-choice{
    flex:auto;
    max-width:100%;
  }
  .message-row.message-bottom{
    grid-template-columns:1fr;
  }
  .message-row.message-bottom .file-label,
  .message-row.message-bottom .send-btn{
    width:100%;
  }
}


/* ===== width alignment update ===== */
.room-main,
.composer .wrap{
  max-width:920px;
}
.conversation-card,
.composer-card{
  width:100%;
}
.messages{
  width:100%;
}
.msg{
  width:100%;
  max-width:100%;
}
.message-row.message-bottom{
  width:100%;
}
.message-row.message-bottom textarea{
  width:100%;
}
@media(max-width:800px){
  .room-main,
  .composer .wrap{
    max-width:calc(100% - 22px);
  }
}

/* ===== usability update ===== */
.room-page{
  min-height:100vh;
  background:#f5f6f8;
}
.room-head-inner{
  max-width:860px;
}
.room-main{
  width:min(860px,94vw);
  padding:18px 0 260px;
}
.conversation-card{
  border-radius:18px;
  padding:0;
  overflow:hidden;
  min-height:calc(100vh - 360px);
}
.messages-head{
  padding:14px 16px;
  border-bottom:1px solid #e5e7eb;
  font-size:13px;
  font-weight:900;
  color:#374151;
  background:#fff;
}
.messages{
  padding:14px;
}
.msg{
  border-radius:14px;
  background:#fff;
  border-color:#e8edf3;
}
.msg + .msg{margin-top:2px}
.meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.text{
  font-size:15px;
}
.composer{
  background:rgba(245,246,248,.92);
  padding:10px 0 12px;
}
.composer .wrap{
  width:min(860px,94vw);
}
.composer-card{
  border-radius:18px;
  padding:12px;
  box-shadow:0 -6px 25px rgba(15,23,42,.10);
}
.section-label{
  font-size:12px;
  font-weight:900;
  color:#475569;
  margin:0 0 7px;
  letter-spacing:.02em;
}
.sender-block{
  gap:6px;
  padding-bottom:8px;
  border-bottom:1px solid #eef2f7;
}
.sender-block .email-buttons{
  gap:7px;
}
.sender-block .email-choice{
  height:42px;
  border-radius:12px;
  background:#f8fafc;
}
.sender-block .email-choice.active{
  background:#111827;
  border-color:#111827;
}
.sender-help{
  text-align:left;
  margin:0;
  color:#94a3b8;
  font-size:11px;
}
.message-row.message-bottom{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  margin-top:2px;
}
.message-row.message-bottom .section-label{
  grid-column:1/-1;
}
.message-row.message-bottom textarea{
  min-height:56px;
  max-height:150px;
  border-radius:14px;
  background:#fff;
}
.composer-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
  min-width:110px;
}
.file-label,.send-btn{
  height:44px;
  border-radius:12px;
  padding:0 14px;
}
.send-btn{
  min-width:110px;
}
.file-info{
  padding-left:2px;
  color:#64748b;
}
@media(max-width:800px){
  .room-main{width:min(100% - 20px,860px);padding:10px 0 8px}
  .conversation-card{min-height:50vh;border-radius:16px}
  .messages-head{padding:12px 13px}
  .messages{padding:11px}
  .composer{position:sticky;bottom:0;padding:8px 0;background:#f5f6f8}
  .composer .wrap{width:min(100% - 20px,860px)}
  .composer-card{padding:10px;border-radius:16px}
  .message-row.message-bottom{grid-template-columns:1fr}
  .composer-actions{grid-template-columns:1fr 1fr;min-width:0}
  .file-label,.send-btn{width:100%;height:45px}
}

/* ===== header sender layout update ===== */
.room-head{
  position:sticky;
  top:0;
  z-index:20;
}
.header-sender-block{
  max-width:860px;
  padding:0 0 12px;
}
.header-sender-label{
  margin:0 0 8px;
  font-size:12px;
  color:#64748b;
}
.header-email-buttons{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
  padding:0;
}
.header-email-buttons .email-choice{
  width:100%;
  height:42px;
  border-radius:12px;
  justify-content:center;
}
.header-email-buttons .email-choice span{
  max-width:100%;
}
.composer form.send-panel{
  display:block;
}
.message-row.message-bottom{
  margin-top:0;
}
.room-main{
  padding-top:14px;
  padding-bottom:170px;
}
@media(max-width:800px){
  .header-sender-block{width:min(100% - 20px,860px);padding-bottom:10px}
  .header-sender-label{text-align:left;margin-bottom:7px}
  .header-email-buttons .email-choice{height:40px;font-size:12px}
  .room-main{padding-top:10px;padding-bottom:8px}
}

/* ===== fixed full-width message input update ===== */
.room-page{
  padding-bottom:190px;
}
.composer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:40;
  width:100%;
  padding:10px 0 12px;
  background:rgba(245,246,248,.96);
  border-top:1px solid #e5e7eb;
  backdrop-filter:blur(8px);
}
.composer .wrap{
  width:min(100% - 24px,860px);
  max-width:860px;
  margin:0 auto;
}
.composer-card{
  width:100%;
  box-sizing:border-box;
}
.composer form.send-panel,
.message-row.message-bottom{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.message-row.message-bottom{
  display:block;
}
.message-row.message-bottom textarea{
  display:block;
  width:100%;
  max-width:100%;
  min-height:58px;
  box-sizing:border-box;
  resize:vertical;
}
.composer-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  width:100%;
  margin-top:8px;
  min-width:0;
}
.file-label,.send-btn{
  width:100%;
  box-sizing:border-box;
}
.room-main{
  padding-bottom:24px;
}
@media(max-width:800px){
  .room-page{
    padding-bottom:185px;
  }
  .composer{
    position:fixed;
    padding:8px 0 10px;
  }
  .composer .wrap{
    width:min(100% - 20px,860px);
  }
  .message-row.message-bottom textarea{
    min-height:54px;
    font-size:16px;
  }
  .composer-actions{
    grid-template-columns:1fr 1fr;
  }
}


/* ===== final force fixed composer ===== */
html,body{min-height:100%;}
body.room-page{
  padding-bottom:240px !important;
}
body.room-page .composer{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:9999 !important;
  width:100vw !important;
  max-width:100vw !important;
  margin:0 !important;
  padding:10px 0 calc(10px + env(safe-area-inset-bottom)) !important;
  background:#f6f7f9 !important;
  border-top:1px solid #dfe3ea !important;
  box-shadow:0 -10px 30px rgba(15,23,42,.10) !important;
}
body.room-page .composer .wrap,
body.room-page .composer-card,
body.room-page .send-panel,
body.room-page .message-row.message-bottom{
  width:min(100vw - 20px,860px) !important;
  max-width:860px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}
body.room-page .message-row.message-bottom textarea{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
body.room-page .room-main{
  padding-bottom:260px !important;
}
@media(max-width:800px){
  body.room-page{padding-bottom:230px !important;}
  body.room-page .room-main{padding-bottom:250px !important;}
  body.room-page .composer{
    padding:8px 0 calc(8px + env(safe-area-inset-bottom)) !important;
  }
  body.room-page .composer .wrap,
  body.room-page .composer-card,
  body.room-page .send-panel,
  body.room-page .message-row.message-bottom{
    width:calc(100vw - 16px) !important;
  }
}

/* ===== sender email vertical radio layout ===== */
.header-sender-block{
  width:min(100% - 24px,860px) !important;
  margin:0 auto !important;
  padding:8px 0 12px !important;
}
.header-sender-label{
  margin:0 0 8px !important;
  font-size:12px !important;
  font-weight:700 !important;
  color:#64748b !important;
}
.header-email-buttons{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  width:100% !important;
  padding:0 !important;
  overflow:visible !important;
}
.header-email-buttons .email-choice{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  width:100% !important;
  max-width:100% !important;
  min-height:46px !important;
  height:auto !important;
  padding:11px 13px !important;
  border:1px solid #dfe3ea !important;
  border-radius:14px !important;
  background:#fff !important;
  color:#111827 !important;
  box-shadow:0 2px 8px rgba(15,23,42,.04) !important;
  white-space:normal !important;
  cursor:pointer !important;
}
.header-email-buttons .email-choice input[type="radio"]{
  position:static !important;
  opacity:1 !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  pointer-events:auto !important;
  accent-color:#111827 !important;
  margin:0 !important;
}
.header-email-buttons .email-choice span{
  display:block !important;
  flex:1 !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
}
.header-email-buttons .email-choice.active{
  border-color:#111827 !important;
  background:#f9fafb !important;
  color:#111827 !important;
  box-shadow:0 4px 12px rgba(15,23,42,.08) !important;
}
@media(max-width:800px){
  .header-sender-block{
    width:min(100% - 18px,860px) !important;
    padding:7px 0 10px !important;
  }
  .header-email-buttons .email-choice{
    min-height:44px !important;
    padding:10px 12px !important;
  }
  .header-email-buttons .email-choice span{
    font-size:13px !important;
  }
}

/* ===== mobile header tidy fix ===== */
.room-head{
  width:100% !important;
  background:rgba(255,255,255,.98) !important;
  border-bottom:1px solid #e5e7eb !important;
  box-shadow:0 4px 14px rgba(15,23,42,.04) !important;
}
.room-head .wrap{
  width:min(100% - 20px,860px) !important;
  max-width:860px !important;
}
.room-head-inner{
  display:grid !important;
  grid-template-columns:1fr auto !important;
  align-items:center !important;
  gap:10px !important;
  padding:10px 0 6px !important;
}
.room-title{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:15px !important;
  line-height:1.3 !important;
}
.room-head .small-btn{
  flex:none !important;
  height:34px !important;
  padding:0 12px !important;
  border-radius:999px !important;
  font-size:12px !important;
  white-space:nowrap !important;
}
.header-sender-block{
  display:block !important;
  width:min(100% - 20px,860px) !important;
  padding:4px 0 10px !important;
}
.header-sender-label{
  display:block !important;
  margin:0 0 7px !important;
  text-align:left !important;
  font-size:12px !important;
  line-height:1.35 !important;
}
.header-email-buttons{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:7px !important;
  width:100% !important;
}
.header-email-buttons .email-choice{
  width:100% !important;
  min-height:42px !important;
  padding:9px 12px !important;
  display:grid !important;
  grid-template-columns:20px minmax(0,1fr) !important;
  align-items:center !important;
  justify-content:stretch !important;
  gap:9px !important;
}
.header-email-buttons .email-choice input[type="radio"]{
  justify-self:center !important;
}
.header-email-buttons .email-choice span{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  text-align:left !important;
}
@media(max-width:600px){
  .room-head{
    position:sticky !important;
    top:0 !important;
    z-index:100 !important;
  }
  .room-head .wrap{
    width:calc(100% - 16px) !important;
  }
  .room-head-inner{
    padding:8px 0 5px !important;
  }
  .room-title{
    font-size:13px !important;
  }
  .room-head .small-btn{
    height:32px !important;
    padding:0 10px !important;
  }
  .header-sender-block{
    width:calc(100% - 16px) !important;
    padding:3px 0 8px !important;
  }
  .header-sender-label{
    font-size:11px !important;
    margin-bottom:6px !important;
  }
  .header-email-buttons{
    gap:6px !important;
  }
  .header-email-buttons .email-choice{
    min-height:39px !important;
    border-radius:12px !important;
    padding:8px 10px !important;
  }
  .header-email-buttons .email-choice span{
    font-size:12px !important;
  }
  body.room-page .room-main{
    padding-top:8px !important;
  }
}

/* ===== beautiful sender selector (hide radio, use selectable cards) ===== */
.header-email-buttons{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:8px !important;
}
.header-email-buttons .email-choice{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  min-height:46px !important;
  padding:12px 44px 12px 14px !important;
  border:1px solid #d8dee8 !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,#ffffff,#f8fafc) !important;
  color:#111827 !important;
  box-shadow:0 4px 14px rgba(15,23,42,.06) !important;
  cursor:pointer !important;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .12s ease !important;
}
.header-email-buttons .email-choice:hover{
  transform:translateY(-1px) !important;
  border-color:#9ca3af !important;
  box-shadow:0 8px 22px rgba(15,23,42,.10) !important;
}
.header-email-buttons .email-choice input[type="radio"]{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  opacity:0 !important;
  margin:0 !important;
  cursor:pointer !important;
  pointer-events:auto !important;
}
.header-email-buttons .email-choice span{
  display:block !important;
  min-width:0 !important;
  width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
  padding-left:2px !important;
}
.header-email-buttons .email-choice::after{
  content:"" !important;
  position:absolute !important;
  right:14px !important;
  top:50% !important;
  width:22px !important;
  height:22px !important;
  border-radius:999px !important;
  border:1px solid #cbd5e1 !important;
  background:#fff !important;
  transform:translateY(-50%) !important;
  box-sizing:border-box !important;
}
.header-email-buttons .email-choice.active{
  border-color:#111827 !important;
  background:#111827 !important;
  color:#fff !important;
  box-shadow:0 10px 26px rgba(15,23,42,.20) !important;
}
.header-email-buttons .email-choice.active::after{
  content:"✓" !important;
  display:grid !important;
  place-items:center !important;
  border-color:#fff !important;
  background:#fff !important;
  color:#111827 !important;
  font-size:14px !important;
  font-weight:900 !important;
}
@media(max-width:600px){
  .header-email-buttons .email-choice{
    min-height:43px !important;
    padding:10px 42px 10px 12px !important;
    border-radius:13px !important;
  }
  .header-email-buttons .email-choice span{
    font-size:12.5px !important;
  }
  .header-email-buttons .email-choice::after{
    right:12px !important;
    width:20px !important;
    height:20px !important;
  }
}

/* メールアドレス選択：ラジオボタンではなくボタン型 */
.header-email-buttons{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  width:100%!important;
}
.header-email-buttons .email-choice{
  appearance:none!important;
  -webkit-appearance:none!important;
  border:1px solid #d7dce5!important;
  background:#fff!important;
  color:#111827!important;
  border-radius:14px!important;
  padding:12px 14px!important;
  width:100%!important;
  min-height:46px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  cursor:pointer!important;
  font:inherit!important;
  text-align:left!important;
  box-shadow:0 1px 2px rgba(15,23,42,.05)!important;
}
.header-email-buttons .email-choice input[type="radio"]{display:none!important;}
.header-email-buttons .email-choice span{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  min-width:0!important;
}
.header-email-buttons .email-choice::after{
  content:'選択';
  flex:0 0 auto;
  margin-left:10px;
  font-size:12px;
  color:#6b7280;
  background:#f3f4f6;
  border-radius:999px;
  padding:4px 9px;
}
.header-email-buttons .email-choice.active{
  background:#111827!important;
  border-color:#111827!important;
  color:#fff!important;
}
.header-email-buttons .email-choice.active::after{
  content:'選択中';
  color:#111827;
  background:#fff;
}
.header-email-buttons .email-choice:hover{transform:translateY(-1px);}

/* ===== selected email address highlight ===== */
.header-email-buttons .email-choice.active,
.email-buttons .email-choice.active{
  background:linear-gradient(135deg,#2563eb,#0ea5e9)!important;
  border-color:#2563eb!important;
  color:#ffffff!important;
  box-shadow:0 10px 22px rgba(37,99,235,.28)!important;
}
.header-email-buttons .email-choice.active span,
.email-buttons .email-choice.active span{
  color:#ffffff!important;
  font-weight:700!important;
}
.header-email-buttons .email-choice.active::after,
.email-buttons .email-choice.active::after{
  content:'選択中'!important;
  color:#2563eb!important;
  background:#ffffff!important;
  font-weight:700!important;
}
.header-email-buttons .email-choice:not(.active),
.email-buttons .email-choice:not(.active){
  background:#ffffff!important;
  color:#111827!important;
}

/* ===== nickname select style ===== */
.header-sender-block{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  align-items:stretch!important;
}
.header-sender-label{
  margin:0!important;
  font-size:13px!important;
  font-weight:700!important;
  color:#334155!important;
}
.nickname-select{
  width:100%!important;
  min-height:46px!important;
  border:1px solid #cbd5e1!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#0f172a!important;
  font-size:15px!important;
  font-weight:700!important;
  padding:0 42px 0 14px!important;
  box-sizing:border-box!important;
  outline:none!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  background-image:linear-gradient(45deg, transparent 50%, #64748b 50%),linear-gradient(135deg, #64748b 50%, transparent 50%);
  background-position:calc(100% - 21px) 20px, calc(100% - 14px) 20px;
  background-size:7px 7px, 7px 7px;
  background-repeat:no-repeat;
  box-shadow:0 1px 2px rgba(15,23,42,.04)!important;
}
.nickname-select:focus{
  border-color:#2563eb!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.12)!important;
}
@media (max-width:640px){
  .nickname-select{min-height:44px!important;font-size:14px!important;border-radius:12px!important;}
}

/* Member edit page */
.room-head-actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.member-edit-main{
  padding-top:24px;
  padding-bottom:40px;
}
.member-edit-card{
  max-width:860px;
  margin:0 auto;
}
.member-edit-form{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.member-edit-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.member-edit-row{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:12px;
  padding:14px;
  border:1px solid var(--line,#e5e7eb);
  border-radius:16px;
  background:#fff;
}
.member-edit-row label{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:0;
}
.member-edit-row label span{
  font-size:12px;
  font-weight:800;
  color:#6b7280;
}
.member-edit-row input{
  width:100%;
  box-sizing:border-box;
}
.member-edit-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
}
.alert.ok{
  background:#ecfdf5;
  border-color:#a7f3d0;
  color:#047857;
}
@media (max-width: 640px){
  .room-head-inner{
    align-items:flex-start;
  }
  .room-head-actions{
    width:100%;
    justify-content:stretch;
  }
  .room-head-actions .btn{
    flex:1 1 0;
    text-align:center;
  }
  .member-edit-main{
    padding-top:14px;
  }
  .member-edit-row{
    grid-template-columns:1fr;
    padding:12px;
  }
  .member-edit-actions{
    flex-direction:column;
  }
  .member-edit-actions .btn{
    width:100%;
    text-align:center;
  }
}


/* password edit */
.password-edit-form{max-width:560px;margin:0 auto;}
.password-edit-form input{width:100%;}

/* member add page */
.member-add-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.member-add-label{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0;
}
.member-add-label span{
  font-size:12px;
  font-weight:800;
  color:#6b7280;
}
.member-add-label textarea{
  width:100%;
  min-height:150px;
  box-sizing:border-box;
  resize:vertical;
}
@media (max-width:640px){
  .member-add-label textarea{min-height:130px;}
}


/* member edit integrated add form */
.member-edit-section-title{
  font-size:14px;
  font-weight:900;
  color:#111827;
  margin:0 0 12px;
}
.member-add-inline-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.member-add-inline-row{
  display:grid;
  grid-template-columns:1fr 1.4fr auto;
  gap:12px;
  align-items:end;
  padding:14px;
  border:1px solid var(--line,#e5e7eb);
  border-radius:16px;
  background:#fff;
}
.member-add-inline-row label{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:0;
}
.member-add-inline-row label span{
  font-size:12px;
  font-weight:800;
  color:#6b7280;
}
.member-add-inline-row input{
  width:100%;
  box-sizing:border-box;
}
.member-add-inline-row .btn{
  min-height:46px;
  white-space:nowrap;
}
.member-edit-divider{
  height:1px;
  background:var(--line,#e5e7eb);
  margin:22px 0;
}
@media (max-width:640px){
  .member-add-inline-row{
    grid-template-columns:1fr;
    padding:12px;
  }
  .member-add-inline-row .btn{
    width:100%;
  }
}

/* ブラウザのパスワード警告を出にくくするため、通常のpassword型を使わず表示だけ伏字にする */
.masked-password{
  -webkit-text-security: disc;
  text-security: disc;
  letter-spacing: .08em;
}

/* ===== Guide page ===== */
.help-btn{margin-top:.75rem;width:100%;}
.guide-card{max-width:860px;margin:0 auto;}
.guide-list{display:grid;gap:14px;}
.guide-item{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:flex-start;padding:16px;border:1px solid #e5e7eb;border-radius:16px;background:#fff;}
.guide-item h2{margin:0 0 6px;font-size:1rem;color:#111827;}
.guide-item p{margin:0;color:#4b5563;line-height:1.8;font-size:.95rem;}
.guide-icon{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#eff6ff;color:#2563eb;font-weight:800;}
.guide-item.danger{border-color:#fecaca;background:#fffafa;}
.guide-item.danger .guide-icon{background:#fee2e2;color:#dc2626;}
@media(max-width:640px){.guide-item{grid-template-columns:38px 1fr;padding:14px}.guide-icon{width:38px;height:38px;border-radius:12px}.guide-item p{font-size:.9rem}}

/* =========================================================
   Unified stylish controls for room.php / member_edit.php
   入力欄・選択欄のデザイン統一
========================================================= */
:root{
  --control-bg: rgba(255,255,255,.94);
  --control-border: rgba(148,163,184,.45);
  --control-border-focus: #38bdf8;
  --control-shadow: 0 10px 24px rgba(15,23,42,.06);
  --control-shadow-focus: 0 0 0 4px rgba(56,189,248,.16), 0 12px 28px rgba(14,165,233,.12);
  --control-radius: 18px;
}

/* ルーム画面・メンバー変更画面の入力系を統一 */
body.room-page .nickname-select,
body.room-page textarea,
body.room-page input[type="text"],
body.room-page input[type="email"],
body.room-page input[type="search"],
body.room-page input[type="tel"],
body.room-page input[type="url"],
.member-edit-main input[type="text"],
.member-edit-main input[type="email"],
.member-edit-main input[type="search"],
.member-edit-main input[type="tel"],
.member-edit-main input[type="url"],
.member-edit-main select,
.member-edit-main textarea{
  width:100%!important;
  min-height:50px!important;
  border:1px solid var(--control-border)!important;
  border-radius:var(--control-radius)!important;
  background:var(--control-bg)!important;
  color:#0f172a!important;
  font:inherit!important;
  font-size:15px!important;
  font-weight:650!important;
  padding:14px 16px!important;
  outline:none!important;
  box-shadow:var(--control-shadow)!important;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .08s ease!important;
}

body.room-page textarea,
.member-edit-main textarea{
  min-height:58px!important;
  line-height:1.6!important;
  resize:vertical!important;
}

body.room-page .nickname-select:focus,
body.room-page textarea:focus,
body.room-page input[type="text"]:focus,
body.room-page input[type="email"]:focus,
.member-edit-main input[type="text"]:focus,
.member-edit-main input[type="email"]:focus,
.member-edit-main select:focus,
.member-edit-main textarea:focus{
  border-color:var(--control-border-focus)!important;
  box-shadow:var(--control-shadow-focus)!important;
  background:#fff!important;
}

/* ニックネーム選択を他入力欄と同じ見た目に */
body.room-page .nickname-select{
  appearance:none!important;
  -webkit-appearance:none!important;
  padding-right:46px!important;
  background-image:
    linear-gradient(45deg, transparent 50%, #2563eb 50%),
    linear-gradient(135deg, #2563eb 50%, transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.95))!important;
  background-position:
    calc(100% - 24px) 23px,
    calc(100% - 16px) 23px,
    0 0!important;
  background-size:8px 8px, 8px 8px, 100% 100%!important;
  background-repeat:no-repeat!important;
}

/* メンバー変更の追加・変更カードも統一 */
.member-add-inline-row,
.member-edit-row{
  border:1px solid rgba(148,163,184,.28)!important;
  border-radius:22px!important;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.90))!important;
  box-shadow:0 14px 32px rgba(15,23,42,.06)!important;
}

.member-add-inline-row label span,
.member-edit-row label span,
.header-sender-label,
.section-label{
  color:#334155!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
}

.member-edit-section-title{
  color:#0f172a!important;
  font-size:15px!important;
  font-weight:900!important;
  letter-spacing:.03em!important;
}

/* 下部メッセージ入力エリア */
body.room-page .composer{
  background:rgba(248,250,252,.92)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  border-top:1px solid rgba(148,163,184,.24)!important;
}

body.room-page .composer-card,
body.room-page .send-panel{
  border-radius:24px!important;
}

body.room-page .message-row.message-bottom{
  display:grid!important;
  gap:10px!important;
}

body.room-page .message-row.message-bottom textarea{
  border-radius:20px!important;
  min-height:58px!important;
  box-shadow:0 12px 28px rgba(15,23,42,.08)!important;
}

/* 写真・送信ボタンも入力欄と同じ雰囲気に */
body.room-page .composer-actions{
  display:flex!important;
  gap:10px!important;
  align-items:center!important;
}

body.room-page .file-label,
body.room-page .send-btn,
.member-add-inline-row .btn,
.member-edit-actions .btn{
  border-radius:16px!important;
  min-height:48px!important;
  box-shadow:0 10px 22px rgba(15,23,42,.08)!important;
}

body.room-page .file-label{
  border:1px solid rgba(148,163,184,.36)!important;
  background:#fff!important;
  color:#0f172a!important;
  font-weight:850!important;
}

body.room-page .send-btn,
.member-add-inline-row .btn,
.member-edit-actions .btn:not(.secondary){
  background:linear-gradient(135deg,#2563eb,#06b6d4)!important;
  color:#fff!important;
}

/* スマホで統一感を維持 */
@media (max-width:640px){
  body.room-page .nickname-select,
  body.room-page textarea,
  .member-edit-main input[type="text"],
  .member-edit-main input[type="email"],
  .member-edit-main select,
  .member-edit-main textarea{
    min-height:48px!important;
    border-radius:16px!important;
    font-size:16px!important;
  }
  body.room-page .composer-actions{
    flex-direction:column!important;
  }
  body.room-page .file-label,
  body.room-page .send-btn{
    width:100%!important;
  }
}


/* =========================================================
   FORCE INPUT DESIGN FIX - room.php / member_edit.php
   このCSSは最後に読み込まれるため、既存デザインを確実に上書きします。
========================================================= */
:root{
  --sr-input-radius: 18px;
  --sr-input-border: rgba(99, 179, 237, .42);
  --sr-input-bg: rgba(255,255,255,.96);
  --sr-input-shadow: 0 12px 28px rgba(15,23,42,.07);
  --sr-input-focus: #38bdf8;
  --sr-blue: #2563eb;
  --sr-cyan: #06b6d4;
}

body.room-page select,
body.room-page textarea,
body.room-page input:not([type="hidden"]):not([type="file"]),
body .member-edit-main select,
body .member-edit-main textarea,
body .member-edit-main input:not([type="hidden"]):not([type="file"]){
  width: 100% !important;
  min-height: 52px !important;
  box-sizing: border-box !important;
  border: 1.5px solid var(--sr-input-border) !important;
  border-radius: var(--sr-input-radius) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
  color: #0f172a !important;
  padding: 14px 17px !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  line-height: 1.5 !important;
  outline: none !important;
  box-shadow: var(--sr-input-shadow) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .12s ease !important;
  -webkit-appearance: none;
  appearance: none;
}

body.room-page textarea,
body .member-edit-main textarea{
  min-height: 64px !important;
  resize: vertical !important;
}

body.room-page select:focus,
body.room-page textarea:focus,
body.room-page input:not([type="hidden"]):not([type="file"]):focus,
body .member-edit-main select:focus,
body .member-edit-main textarea:focus,
body .member-edit-main input:not([type="hidden"]):not([type="file"]):focus{
  border-color: var(--sr-input-focus) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(56,189,248,.18), 0 14px 34px rgba(14,165,233,.14) !important;
}

body.room-page select,
body .member-edit-main select{
  padding-right: 48px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #2563eb 50%),
    linear-gradient(135deg, #2563eb 50%, transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
  background-position:
    calc(100% - 25px) 23px,
    calc(100% - 17px) 23px,
    0 0 !important;
  background-size: 8px 8px, 8px 8px, 100% 100% !important;
  background-repeat: no-repeat !important;
}

body .member-edit-main label,
body.room-page .header-sender-block{
  color:#334155 !important;
}

body .member-edit-main label span,
body.room-page .section-label,
body.room-page .header-sender-label{
  display:block !important;
  margin: 0 0 7px !important;
  color:#334155 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
}

body .member-add-inline-row,
body .member-edit-row{
  border:1px solid rgba(148,163,184,.25) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 16px 40px rgba(15,23,42,.07) !important;
  padding: 16px !important;
}

body .member-add-inline-row label,
body .member-edit-row label{
  display:flex !important;
  flex-direction:column !important;
  gap: 0 !important;
}

body.room-page .nickname-select{
  max-width: 420px !important;
}

body.room-page .composer-card,
body.room-page .send-panel{
  border-radius: 24px !important;
}

body.room-page .message-row.message-bottom{
  display:grid !important;
  gap: 10px !important;
}

body.room-page .composer-actions{
  display:flex !important;
  gap:10px !important;
}

body.room-page .file-label,
body.room-page .send-btn,
body .member-add-inline-row .btn,
body .member-edit-actions .btn{
  border-radius: 16px !important;
  min-height: 50px !important;
}

body.room-page .send-btn,
body .member-add-inline-row .btn,
body .member-edit-actions .btn:not(.secondary){
  background: linear-gradient(135deg, var(--sr-blue), var(--sr-cyan)) !important;
  color:#fff !important;
  border: none !important;
}

body.room-page .file-label{
  background:#fff !important;
  color:#0f172a !important;
  border:1.5px solid var(--sr-input-border) !important;
}

@media (max-width: 640px){
  body.room-page .nickname-select{
    max-width: 100% !important;
  }
  body.room-page .composer-actions{
    flex-direction: column !important;
  }
  body.room-page .file-label,
  body.room-page .send-btn{
    width:100% !important;
  }
}

/* =========================================================
   Calculator cover screen
   ========================================================= */
body.calculator-cover {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 10%, rgba(96, 165, 250, .22), transparent 28%),
    radial-gradient(circle at 80% 0%, rgba(20, 184, 166, .20), transparent 30%),
    linear-gradient(135deg, #f8fbff 0%, #eef7ff 100%);
}
.calculator-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.calculator-card {
  width: min(390px, 94vw);
  padding: 18px;
  border-radius: 30px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 26px 70px rgba(15, 23, 42, .16);
  backdrop-filter: blur(18px);
  transition: .25s ease;
}
.calculator-card.hide {
  display: none;
}
.calc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 14px;
}
.calc-brand {
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 800;
}
.calc-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #14b8a6);
  box-shadow: 0 0 0 6px rgba(37, 99, 235, .10);
}
.calc-display {
  width: 100%;
  height: 82px;
  border: 0;
  outline: 0;
  border-radius: 22px;
  background: linear-gradient(180deg, #0f172a, #1e293b);
  color: #fff;
  font-size: 36px;
  font-weight: 800;
  text-align: right;
  padding: 0 18px;
  margin-bottom: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 32px rgba(15,23,42,.18);
  letter-spacing: .02em;
}
.calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.calc-key {
  height: 62px;
  border: 0;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  color: #0f172a;
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255,255,255,.85);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.calc-key:active {
  transform: translateY(1px) scale(.98);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .10);
}
.calc-key:hover {
  background: #f8fbff;
}
.calc-op {
  background: linear-gradient(135deg, #dbeafe, #ccfbf1);
  color: #075985;
}
.calc-clear {
  background: #fee2e2;
  color: #b91c1c;
}
.calc-eq {
  background: linear-gradient(135deg, #2563eb, #14b8a6);
  color: #fff;
}
.calc-zero {
  grid-column: span 2;
}
.room-unlock-panel {
  display: none;
  width: min(520px, 94vw);
}
.room-unlock-panel.show {
  display: block;
}
.room-login-card {
  width: 100%;
}
@media (max-width: 520px) {
  .calculator-page { padding: 14px; }
  .calculator-card { border-radius: 24px; padding: 14px; }
  .calc-display { height: 74px; font-size: 32px; border-radius: 18px; }
  .calc-key { height: 58px; border-radius: 16px; }
}

/* =========================================================
   MEMBER MESSAGE COLOR
========================================================= */
.msg.member-message{
  background: linear-gradient(135deg, hsl(var(--member-hue) 90% 96%), hsl(var(--member-hue) 90% 91%));
  border-color: hsl(var(--member-hue) 70% 76%);
}
.msg.member-message .meta{
  color: hsl(var(--member-hue) 55% 34%);
}
.msg .member-dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  margin-right:6px;
  background: hsl(var(--member-hue, 210) 75% 55%);
  box-shadow:0 0 0 3px hsl(var(--member-hue, 210) 80% 90%);
  vertical-align:middle;
}