/* Dönem anahtarı her iki görünümde de sayfanın üstünde kalır. */
.era-toolbar {
  max-width: 1050px;
  margin: 20px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #d5ece7;
  font: 11px "Courier New", monospace;
  letter-spacing: 1px;
}
#era-toggle { font-weight: 700; letter-spacing: 0; }
.modern {
  display: flow-root;
  color: #e5eaf5;
  background: radial-gradient(ellipse at 12% 5%, #1e3149 0, transparent 45%),
    radial-gradient(ellipse at 90% 45%, #173c39 0, transparent 40%), #0c1220;
  min-height: 100vh;
  padding-bottom: 30px;
  font-family: "Segoe UI", sans-serif;
}
.modern .era-toolbar { color: #9cacc0; font-family: inherit; letter-spacing: 2px; }
.modern button {
  border: 1px solid #354355;
  border-radius: 10px;
  background: #1e2a3c;
  color: #e5eaf5;
  padding: 10px 14px;
}
.modern button:hover:not(:disabled) { background: #2a3c50; border-color: #76dac5; }
.modern button:disabled { opacity: .5; cursor: wait; }
.modern button:focus-visible, .modern textarea:focus-visible { outline: 2px solid #8ef0d1; outline-offset: 4px; }
.modern #era-toggle { border-radius: 24px; background: #172737; color: #b3f7df; padding: 11px 20px; }
.modern .masthead { margin: 42px auto 30px; text-align: left; }
.modern .eyebrow { color: #87b6b7; font: 10px "Segoe UI", sans-serif; letter-spacing: 3px; }
.modern h1 { font-family: "Segoe UI", sans-serif; font-size: 72px; font-weight: 600; letter-spacing: -4px; text-shadow: none; margin: 12px 0; }
.modern h1 span { font: 300 42px "Segoe UI", sans-serif; color: #91e8cb; letter-spacing: -2px; transform: none; margin-left: 15px; }
.modern h1 i { color: #91e8cb; font-size: 27px; right: -44px; top: 15px; }
.modern .masthead > p { color: #a7b6c9; font-size: 17px; margin: 3px 0 25px; }
.modern .webline { border: 0; padding: 0; color: #6f879f; font: 10px "Segoe UI", sans-serif; letter-spacing: 3px; }
.modern .desktop { grid-template-columns: 244px minmax(0, 1fr); gap: 24px; }
.modern .window { background: #141e2dde; border: 1px solid #2b394b; border-radius: 20px; padding: 0; box-shadow: 0 16px 50px #0002; overflow: hidden; }
.modern .titlebar { background: transparent; color: #a6b9cc; padding: 17px 20px; min-height: 45px; font-size: 12px; font-weight: 500; border-bottom: 1px solid #293547; }
.modern .window-controls, .modern .titlebar > span:last-child:not(:first-child), .modern .badge, .modern .page-footer > div, .modern .taskbar { display: none; }
.modern .profile { padding: 22px 18px; }
.modern .computer { width: 78px; height: 78px; margin-bottom: 18px; border-radius: 25px; background: linear-gradient(140deg, #a4f5da, #4fb1ab); box-shadow: 0 0 35px #8ceacd18; display: grid; place-items: center; }
.modern .computer::after { content: "✦"; font-size: 45px; color: #163f43; }
.modern .screen, .modern .stand, .modern .base { display: none; }
.modern .profile h3 { font-size: 24px; font-weight: 600; }
.modern .handle { color: #9caec2; font: 11px "Segoe UI", sans-serif; margin-top: 7px; }
.modern .connection { border: 1px solid #2a514b; background: #17332f; color: #9ae1bf; border-radius: 20px; }
.modern .connection.offline { background: #3c3324; border-color: #6f5b35; color: #f0cc8c; }
.modern dl { margin-top: 15px; }
.modern dl div { border-bottom-color: #293547; padding: 12px 0; }
.modern dt { color: #9badc1; }
.modern dd { font-weight: 400; }
.modern .profile-note { color: #99afc5; font: 12px/1.8 "Segoe UI", sans-serif; margin-top: 18px; }
.modern .shortcuts { margin-top: 16px; }
.modern .shortcuts > p { color: #99acc1; padding: 0 16px; }
.modern .topic { width: calc(100% - 24px); margin: 0 12px 10px; background: #1a2636; border-color: #2b394b; padding: 12px; }
.modern .topic span { color: #8ce4ce; }
.modern .chat-window > .titlebar { color: #e7f0fb; font-weight: 600; }
.modern .menubar { padding: 8px 14px; border: 0; gap: 3px; }
.modern .menubar button { border: 0; background: transparent; color: #acbdd1; border-radius: 7px; padding: 7px 9px; }
.modern .menubar > span { color: #7f96af; font-family: inherit; }
.modern .room-banner { margin: 0 20px; padding: 13px 0; background: transparent; border: 0; border-bottom: 1px solid #293547; color: #aac9ce; }
.modern .live-dot { border-radius: 50%; background: #94f0ca; box-shadow: 0 0 12px #94f0ca60; }
.modern .room-date { color: #7f99b3; font-family: inherit; letter-spacing: 1px; }
.modern .messages { height: 365px; margin: 0; border: 0; background: transparent; padding: 24px 22px; scrollbar-color: #344b5b transparent; }
.modern .entry { margin-bottom: 25px; }
.modern .entry-header { font-family: inherit; margin-bottom: 10px; gap: 10px; }
.modern .avatar { border: 0; border-radius: 10px; width: 29px; height: 29px; background: #91e4cd; color: #173f3e; }
.modern .entry-header strong { color: #a0e9d6; font-weight: 600; }
.modern .entry-header time { color: #8499b1; }
.modern .entry.user .avatar { border: 0; background: #36475f; color: #e4edfa; }
.modern .entry.user strong { color: #dce6f4; }
.modern .entry-text { margin-left: 39px; line-height: 1.85; font-size: 14px; color: #d5dfed; }
.modern .entry.user .entry-text { border-radius: 0 12px 12px; background: #223146; padding: 12px 15px; }
.modern .welcome-stamp { margin-left: 39px; border: 0; padding: 0; color: #829eac; font: 10px/1.6 "Segoe UI", sans-serif; }
.modern .composer { padding: 18px 20px 20px; border-top: 1px solid #293547; }
.modern .composer label { color: #b6c7d9; font-weight: 400; margin-bottom: 12px; }
.modern textarea { background: #0e1927; border: 1px solid #35465b; color: #edf4ff; border-radius: 12px; padding: 13px; }
.modern textarea::placeholder { color: #8c9fb5; }
.modern .send { background: #a4f0d7; color: #163d36; border: 0; border-radius: 12px; }
.modern .send:hover:not(:disabled) { background: #c4ffe9; }
.modern .send span { color: #24564e; }
.modern .input-help { color: #8298b0; margin-top: 10px; }
.modern .statusbar { padding: 10px 15px; background: #101a29; color: #8099ae; }
.modern .statusbar span { border: 0; padding: 2px 5px; }
.modern .typing { color: #a0e9d6; margin-left: 22px; }
.modern .error { color: #ffe2ab; background: #3a3023; border-color: #79613d; border-radius: 10px; margin: 8px 20px; }
.modern .page-footer { color: #8298b0; font-family: inherit; margin-top: 28px; }
.modern .page-footer .disclaimer { color: #8da4bb; opacity: 1; }
.modern dialog { color: #d5dfed; background: #141e2d; }
.modern dialog::backdrop { background: #050b17b8; backdrop-filter: blur(6px); }
@media (max-width: 760px) {
  .era-toolbar { font-size: 9px; letter-spacing: 0; }
  #era-toggle { padding: 9px 12px; font-size: 12px; }
  .modern .era-toolbar { letter-spacing: .5px; }
  .modern .masthead { margin: 30px auto 24px; }
  .modern h1 { font-size: 55px; }
  .modern h1 span { font-size: 30px; }
  .modern .eyebrow { font-size: 9px; letter-spacing: 2px; }
  .modern .masthead > p { font-size: 15px; }
  .modern .webline { font-size: 9px; letter-spacing: 1.5px; }
  .modern .desktop { grid-template-columns: minmax(0, 1fr); }
  .modern .messages { height: 43vh; min-height: 250px; padding: 20px 14px; }
  .modern .entry-text { font-size: 13px; margin-left: 0; }
  .modern .welcome-stamp { margin-left: 0; }
  .modern .composer { padding: 15px 12px; }
  .modern .menubar { padding: 8px; }
  .modern .menubar button { font-size: 10px; padding: 7px; }
  .modern .menubar > span { font-size: 9px; }
}